/* Aquarienlayouts: Bepflanzungsplan und Quelle in der Einzelansicht (sonst Bausteine aus steckbrief.css),
   Übersicht mit Filter und Karten. */

.plan__inhalt { display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s-5);align-items:start; }
.plan__zeichnung { margin:0; }
.plan__zeichnung a { display:block;border:var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--paper); }
.plan__zeichnung img { display:block;width:100%;height:auto; }
.sbtext .plan__liste { list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-1); }
.plan__liste li { display:flex;align-items:baseline;gap:var(--s-2);padding-block:var(--s-1);border-bottom:var(--line); }
.plan__buchstabe { flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:var(--r-full);background:var(--petrol-600);color:var(--paper);font-size:14px;line-height:1;font-weight:600; }
.plan__name { flex:1;min-width:0; }
.plan__anzahl { flex:none;font-variant-numeric:tabular-nums;color:var(--petrol-700); }
.layout__quelle { margin:var(--s-3) 0 0;font-size:14px;line-height:20px;color:var(--petrol-700); }

.layouts-kopf__text { max-width:72ch;margin-top:var(--s-3); }
.layouts-kopf__text p { margin:0 0 var(--s-2); }
.layouts-filter { display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);margin:0 0 var(--s-5);padding:var(--s-3) 0;border-top:var(--line);border-bottom:var(--line); }
.layouts-filter[hidden] { display:none; }
.layouts-filter__gruppe { display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2); }
.layouts-filter__titel { margin-right:var(--s-1);font-size:14px;line-height:20px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--petrol-600); }
.layouts-filter .chip { font:inherit;font-size:15px;line-height:22px;text-transform:none;letter-spacing:normal;padding:var(--s-1) var(--s-3);border:1px solid var(--petrol-300);border-radius:var(--r-full);background:var(--paper);color:var(--petrol-800);cursor:pointer; }
.layouts-filter .chip:hover { border-color:var(--petrol-600); }
.layouts-filter .chip[aria-pressed="true"] { background:var(--petrol-600);border-color:var(--petrol-600);color:var(--paper); }
.layouts-filter .chip:focus-visible { outline:2px solid var(--petrol-600);outline-offset:2px; }
.layouts-raster { row-gap:var(--s-5); }
.layout-karte[hidden] { display:none; }
.layouts-raster .species .figure { height:auto;aspect-ratio:16/9; }
/* Layout-Karten: Werte als Pass wie bei den Artkarten; schmale Karten einspaltig. */
.layout-karte { container-type:inline-size; }
.layout-karte .t-karte { hyphens:auto;overflow-wrap:break-word; }
.layout-karte .pass { margin-top:var(--s-3); }
.layout-karte .pass li { min-width:0; }
@container (max-width:250px) { .layout-karte .pass { grid-template-columns:1fr; } }
.layouts-leer { margin:var(--s-4) 0 0; }
.layouts-ratgeber__text { max-width:760px; }

@media (max-width:900px) {
	.plan__inhalt { grid-template-columns:1fr; }
}
@media (max-width:640px) {
	.layouts-filter { gap:var(--s-3); }
}