/* Fishothek: Einstieg und Bereichsseiten. Karten, Pass und Chips aus bausteine.css. */

/* Kopf eines Bereichs: Text links, Anzahl rechts, Filter darunter über die ganze Breite. */
.fb-kopf { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-5) var(--s-6);align-items:start; }
.fb-kopf__text { max-width:62ch; }
.fb-kopf__text .t-aufmacher { margin-top:var(--s-2); }
.fb-kopf__text .t-unterzeile { margin-top:var(--s-3); }
.fb-kopf__zahl { margin:var(--s-5) 0 0;display:grid;justify-items:end;gap:var(--s-1); }
.fb-kopf__zahl b { font-family:var(--font-display);font-weight:500;font-size:44px;line-height:1;color:var(--petrol-700);font-variant-numeric:tabular-nums; }
.fb-kopf__zahl span { font-size:14px;line-height:20px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--petrol-600); }
.fb-kopf .fb-filter { grid-column:1 / -1; }

/* Filter auf dunkler Fläche. */
.fb-filter { background:var(--petrol-900);color:var(--paper);border-radius:var(--r-lg);padding:var(--s-5);box-shadow:var(--shadow-2); }
.fb-filter__haupt { display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:var(--s-3);align-items:end; }
.fh-filter .fb-filter__haupt { grid-template-columns:repeat(3,minmax(0,1fr)) auto; }
.fb-feld { display:grid;gap:var(--s-2);min-width:0; }
.fb-feld label { font-size:14px;line-height:20px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--petrol-200); }
.fb-feld select,
.fb-feld input { width:100%;min-height:48px;padding:var(--s-2) var(--s-3);border:1px solid transparent;border-radius:var(--r-md);background:var(--paper);color:var(--ink-950);font:inherit;font-size:16px;line-height:22px; }
.fb-feld select { appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%231d4d5f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center; }
.fb-feld select:focus-visible,
.fb-feld input:focus-visible { outline:2px solid var(--petrol-300);outline-offset:2px; }
.fb-filter__los { min-height:48px;justify-content:center; }
.fb-mehr { margin-top:var(--s-4);border-top:1px solid rgba(255,255,255,.14);padding-top:var(--s-3); }
.fb-mehr summary { display:inline-flex;align-items:center;gap:var(--s-2);cursor:pointer;font-weight:600;list-style:none;padding-block:var(--s-1); }
.fb-mehr summary::-webkit-details-marker { display:none; }
.fb-mehr summary::before { content:"";width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2 4h12M4 8h8M6 12h4'/%3E%3C/svg%3E") no-repeat center; }
.fb-mehr summary:focus-visible { outline:2px solid var(--petrol-300);outline-offset:4px;border-radius:var(--r-sm); }
.fb-mehr__zahl { display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-full);background:var(--paper);color:var(--petrol-800);font-size:14px;line-height:1;font-variant-numeric:tabular-nums; }
.fb-mehr__inhalt { display:grid;gap:var(--s-5);margin-top:var(--s-4); }
.fb-mehr__gruppe { margin:0;padding:0;border:0;min-width:0; }
.fb-mehr__gruppe legend { padding:0;margin-bottom:var(--s-3);font-family:var(--font-display);font-size:18px;line-height:24px;font-weight:500;color:var(--paper); }
.fb-mehr__felder { display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s-3); }
.fb-feld--suche { max-width:430px; }
.fb-filter__weg { margin:var(--s-3) 0 0;font-size:15px;line-height:22px; }
.fb-filter__weg a { color:var(--paper);text-underline-offset:3px; }

/* Gruppen, Trefferzeile, Raster. */
.fb-gruppen { list-style:none;margin:0 0 var(--s-5);padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2); }
.fb-gruppen a[aria-current="true"] { background:var(--petrol-100);border-color:var(--petrol-300);color:var(--petrol-700); }
.fb-gruppen a:hover { border-color:var(--petrol-400); }
.fb-gruppen__n { font-size:14px;color:var(--petrol-600);font-variant-numeric:tabular-nums; }
.fb-treffer { display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-4); }
.fb-sort { display:flex;align-items:center;gap:var(--s-2);font-size:15px;line-height:22px;color:var(--petrol-700); }
.fb-sort select { min-height:40px;padding:var(--s-1) 36px var(--s-1) var(--s-3);border:var(--line);border-radius:var(--r-md);background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%231d4d5f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;font:inherit;color:var(--ink-950); }
.fb-raster { row-gap:var(--s-5); }
.fb-raster .species,
.fh-beliebt .species { container-type:inline-size; }
.fb-raster .species .figure,
.fh-beliebt .species .figure,
.fh-sammlung .figure { height:auto;aspect-ratio:16/9; }
.fb-raster .t-karte,
.fh-beliebt .t-karte { hyphens:auto;overflow-wrap:break-word; }
.fb-raster .pass li,
.fh-beliebt .pass li { min-width:0;align-items:flex-start;overflow-wrap:break-word; }
.fb-raster .pass svg,
.fh-beliebt .pass svg { margin-top:1px; }
@container (max-width:250px) { .fb-raster .pass,.fh-beliebt .pass { grid-template-columns:1fr; } }
.fb-leer { padding:var(--s-7) var(--s-5);border:1px dashed var(--stone-300);border-radius:var(--r-lg);text-align:center;display:grid;gap:var(--s-3);justify-items:center; }
.fb-leer p { margin:0; }

/* Blättern. */
.fb-blaettern { display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2);margin-top:var(--s-7); }
.fb-blaettern a,
.fb-blaettern span { display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 var(--s-2);border-radius:var(--r-md);font-weight:600;font-variant-numeric:tabular-nums;text-decoration:none; }
.fb-blaettern a { border:var(--line);color:var(--petrol-700);background:var(--paper); }
.fb-blaettern a:hover { border-color:var(--petrol-400); }
.fb-blaettern [aria-current="page"] { background:var(--petrol-600);color:var(--paper); }
.fb-blaettern__luecke { color:var(--stone-300); }

/* Register und Aufruf. */
.fb-register__liste { list-style:none;margin:var(--s-4) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2); }
.fb-register__liste a { display:inline-grid;place-items:center;width:44px;height:44px;border:var(--line);border-radius:var(--r-md);background:var(--paper);color:var(--petrol-700);font-weight:600;text-decoration:none; }
.fb-register__liste a:hover { border-color:var(--petrol-400);background:var(--petrol-50); }
.fb-mitmachen { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-4); }
.fb-mitmachen .t-body { margin-top:var(--s-2);color:var(--petrol-800); }

/* Einstieg /fishothek/. */
.fh-kopf { display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-6);align-items:start; }
.fh-kopf__text { max-width:62ch;padding-top:var(--s-5); }
.fh-kopf__text .t-aufmacher { margin-top:var(--s-2); }
.fh-kopf__text .t-unterzeile { margin-top:var(--s-4); }
.fh-kopf__text .t-body { margin-top:var(--s-4); }
.fh-kopf__text .t-body a { color:var(--petrol-700);font-weight:600;text-underline-offset:3px; }
.fh-woche .figure { height:auto;aspect-ratio:16/10; }
.fh-woche .pass { margin-top:var(--s-3); }
.fh-kopf .fh-filter { grid-column:1 / -1; }
.fh-vorauswahl { display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);margin-top:var(--s-4);border-top:1px solid rgba(255,255,255,.14);padding-top:var(--s-4); }
.fh-vorauswahl__titel { font-size:14px;line-height:20px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--petrol-200); }
.fh-vorauswahl ul { list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2); }
.fh-vorauswahl a { display:inline-flex;padding:var(--s-1) var(--s-3);border:1px solid rgba(255,255,255,.28);border-radius:var(--r-full);color:var(--paper);font-size:15px;line-height:22px;font-weight:500;text-decoration:none; }
.fh-vorauswahl a:hover,
.fh-vorauswahl a:focus-visible { background:rgba(255,255,255,.1);border-color:var(--paper); }
.fh-vorauswahl a[aria-current="true"] { background:var(--paper);border-color:var(--paper);color:var(--petrol-800); }

/* Gesetzte Filter zum Entfernen. */
.fb-gesetzt { list-style:none;margin:0 0 var(--s-4);padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2); }
.fb-gesetzt a { display:inline-flex;align-items:center;gap:var(--s-1);padding:var(--s-1) var(--s-3);border-radius:var(--r-full);background:var(--petrol-50);border:1px solid var(--petrol-200);color:var(--petrol-800);font-size:15px;line-height:22px;text-decoration:none; }
.fb-gesetzt a:hover,
.fb-gesetzt a:focus-visible { border-color:var(--petrol-500); }
.fb-gesetzt a span[aria-hidden] { font-size:18px;line-height:1;color:var(--petrol-600); }
.fb-gesetzt__titel { color:var(--petrol-600); }
.fb-gesetzt a.fb-gesetzt__alle { background:none;border-color:transparent;text-decoration:underline;text-underline-offset:3px;color:var(--petrol-700); }
.fh-sammlung { position:relative; }
.fh-sammlung a.titel { color:inherit;text-decoration:none; }
.fh-sammlung a.titel::after { content:"";position:absolute;inset:0; }
.fh-sammlung:has(a.titel:focus-visible) { outline:2px solid var(--petrol-600);outline-offset:2px; }
.fh-sammlung .figure img { transition:transform 280ms var(--ease-out); }
.fh-sammlung:hover .figure img { transform:scale(1.04); }
.fh-sammlung__zahl { display:flex;align-items:center;gap:var(--s-3);margin:0; }
.fh-sammlung__zahl .ficon { display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);background:var(--petrol-50);color:var(--petrol-600); }
.fh-sammlung__zahl b { font-family:var(--font-display);font-weight:500;font-size:28px;line-height:1;color:var(--petrol-700);font-variant-numeric:tabular-nums; }
.fh-sammlung__zahl span:last-child { font-size:14px;line-height:20px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--petrol-600); }
.fh-sammlung .t-karte { margin-top:var(--s-2); }
.fh-sammlung .t-klein { color:var(--petrol-800); }
.fh-sammlung__gruppen { list-style:none;margin:var(--s-2) 0 0;padding:0;display:grid;gap:var(--s-1); }
.fh-sammlung__gruppen a { position:relative;z-index:1;color:var(--ink-950);text-decoration:none;font-size:15px;line-height:24px; }
.fh-sammlung__gruppen a span { color:var(--petrol-600); }
.fh-sammlung__gruppen a:hover { color:var(--petrol-700);text-decoration:underline;text-underline-offset:3px; }
.fh-mitmachen { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-5);padding:var(--s-6);border-radius:var(--r-lg);background:var(--petrol-800);color:var(--paper); }
.fh-mitmachen .t-kicker { color:var(--petrol-200); }
.fh-mitmachen .t-artikel { margin-top:var(--s-2); }
.fh-mitmachen .t-body { margin-top:var(--s-2);max-width:68ch; }

@media (max-width:1100px) {
	.fb-raster .col3,
	.fh-beliebt .col3 { grid-column:span 4; }
}
@media (max-width:1100px) {
	.fb-filter__haupt,
	.fh-filter .fb-filter__haupt { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.fb-filter__los { grid-column:1 / -1; }
}
@media (max-width:900px) {
	.fh-kopf { grid-template-columns:1fr; }
	.fh-kopf__text { padding-top:0; }
	.fb-raster .col3,
	.fh-beliebt .col3,
	.fh-sammlungen .col4 { grid-column:span 6; }
}
@media (max-width:640px) {
	.fb-kopf { grid-template-columns:1fr; }
	.fb-kopf__zahl { justify-items:start;margin-top:0;grid-row:2; }
	.fb-kopf__zahl b { font-size:32px; }
	.fb-filter { padding:var(--s-4);margin-inline:calc(-1 * var(--s-2)); }
	.fb-filter__haupt,
	.fh-filter .fb-filter__haupt { grid-template-columns:1fr; }
	.fb-feld--suche { grid-column:auto; }
	.fb-gruppen { flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--pad-page));padding-inline:var(--pad-page);scrollbar-width:none; }
	.fb-gruppen::-webkit-scrollbar { display:none; }
	.fb-gruppen li { flex:none; }
	.fb-raster .col3,
	.fh-beliebt .col3,
	.fh-sammlungen .col4 { grid-column:1 / -1; }
	.fh-mitmachen { padding:var(--s-5); }
}
.fb-filter__schalter { display:none; }
@media (max-width:640px) {
	.fb-filter__schalter { display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:0;border:0;background:none;color:var(--paper);font:inherit;font-weight:600;cursor:pointer; }
	.fb-filter__schalter::after { content:"";width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E") no-repeat center;transition:transform 160ms var(--ease-out); }
	.fb-filter__schalter[aria-expanded="true"]::after { transform:rotate(180deg); }
	.fb-filter__schalter + .fb-filter__haupt { margin-top:var(--s-3); }
	.fb-filter--zu { padding-block:var(--s-2); }
	.fb-filter--zu > :not(.fb-filter__schalter) { display:none; }
}
@media (prefers-reduced-motion:reduce) {
	.fh-sammlung .figure img { transition:none; }
}