/**
 * my-fish Theme: Steckbrief einer Art nach Entwurf steckbrief-neonsalmler.html.
 * Nur auf Einträgen der Fishothek geladen. Werte über die Kurznamen aus theme.css,
 * durchscheinende Töne mit color-mix aus denselben Farben.
 */

.steckbrief > * { margin-block:0; }

/* ---------- Kopf der Art ---------- */

/* Rhythmus: 24 px für eng Zusammengehöriges, 40 px innerhalb eines Blocks, rund 88 px (40 + 48) am
   Farbwechsel vom Kopfband zum Hauptteil. Vorher 144 px zwischen Kacheln und erster Überschrift. */
.sbkopf { padding-top:var(--s-4);padding-bottom:var(--s-6); }
.sbmain { padding-top:var(--s-7); }
.sbhead { display:grid;grid-template-columns:minmax(0,1fr) 580px;gap:var(--s-6);align-items:center; }
.sbhead--ohne-bild { grid-template-columns:1fr; }
.sbhead__text h1 { margin:var(--s-2) 0 0; }
.sbhead__lat { font-size:24px;line-height:32px;font-style:italic;color:var(--petrol-700);margin:var(--s-2) 0 0; }
.sbhead__intro { margin-top:var(--s-4);max-width:72ch; }
.sbhead__intro a { color:var(--petrol-700); }
.sbhead__flags { display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);margin-top:var(--s-4);list-style:none;padding:0; }
.sbhead__flags li { margin:0; }
.sbhead__media { position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-2); }
/* Immer 16:9; height:auto hebt die Höhe aus dem height-Attribut auf, sonst gilt die Bildhöhe statt des Formats. */
.sbhead__media img { display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center 45%; }
.sbhead__media figcaption { position:absolute;left:var(--s-3);bottom:var(--s-3);font-size:14px;line-height:20px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--paper);background:color-mix(in srgb,var(--ink-950) 72%,transparent);border-radius:var(--r-sm);padding:var(--s-1) var(--s-2); }

/* Kennzahlen: bei weniger als sechs Werten füllen die Kacheln die Zeile. */
/* Zeichen über Wert und Beschriftung: so passt auch „Lebenserwartung" in schmale Kacheln; ab 170 px je Kachel
   bricht die Reihe um, statt die Beschriftung über den Rand zu schieben. */
.datafacts { display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s-3);margin:var(--s-6) 0 0;list-style:none;padding:0; }
.datafacts > li { display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--s-2);background:var(--paper);border:var(--line);border-radius:var(--r-md);padding:var(--s-3);margin:0;min-width:0; }
.datafacts p { margin:0;min-width:0; }
.datafacts b { display:block;font-family:var(--font-display);font-weight:500;font-size:18px;line-height:24px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere; }
.datafacts p span { display:block;font-size:14px;line-height:20px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--petrol-600);overflow-wrap:anywhere;hyphens:auto; }
.ficon,.sicon { width:36px;height:36px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;background:var(--petrol-100);color:var(--petrol-700);flex:none; }

/* ---------- Hauptteil: Text 7 Spalten, Datentafel 5 Spalten (DESIGN.md 4.4) ---------- */

/* Breite der Datentafel und Lücke davor; der Kommentarkasten (kommentare.css) richtet sich danach. */
.steckbrief { --sb-tafel:416px;--sb-luecke:var(--s-7); }
.sbmain { display:grid;grid-template-columns:1fr var(--sb-tafel);gap:var(--sb-luecke);align-items:start; }
.sbtext section { scroll-margin-top:190px; }
.sbtext section + section { margin-top:var(--s-7);padding-top:var(--s-6);border-top:var(--line); }
.sbtext h2 { display:flex;align-items:center;gap:var(--s-3);font-family:var(--font-display);font-weight:500;font-size:28px;line-height:35px;margin:0 0 var(--s-3);text-wrap:balance; }
.sbtext section:not(.wcheck) h3 { font-family:var(--font-display);font-weight:500;font-size:20px;line-height:26px;margin:var(--s-5) 0 var(--s-2); }
.sbtext p { margin:0 0 var(--s-3);max-width:68ch; }
.sbtext p:last-child { margin-bottom:0; }
.sbtext ul { margin:0;padding-left:var(--s-4);display:flex;flex-direction:column;gap:var(--s-2); }
.sbtext a { color:var(--petrol-700); }

.gallery { display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3); }
.gallery figure { margin:0;display:flex;flex-direction:column;gap:var(--s-2); }
.gallery figure > a { display:block;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;background:var(--petrol-100); }
.gallery img { display:block;width:100%;height:100%;object-fit:cover;transition:transform 280ms var(--ease-out); }
.gallery figure > a:hover img { transform:scale(1.03); }
.gallery figcaption { font-size:14px;line-height:20px;font-weight:600;color:var(--petrol-600); }

.faq details { background:var(--paper);border:var(--line);border-radius:var(--r-md); }
.faq details + details { margin-top:var(--s-3); }
.faq summary { list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-4);font-family:var(--font-display);font-weight:500;font-size:20px;line-height:26px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+";font-family:var(--font-text);font-weight:300;font-size:28px;line-height:1;color:var(--petrol-600);flex:none; }
.faq details[open] summary::after { content:"–"; }
.faq details[open] summary { border-bottom:var(--line); }
.faq__antwort { padding:var(--s-4); }
.faq__antwort p { max-width:none; }
.sbdaten summary { font-size:17px;line-height:24px; }

.sbanzeige { margin-top:var(--s-7);padding-top:var(--s-6);border-top:var(--line); }
.sbanzeige .t-kicker { margin-bottom:var(--s-2); }
.sbanzeige img { max-width:100%;height:auto; }

/* Datentafel */
.databox { background:var(--stone-50);border:var(--line);border-radius:var(--r-lg);padding:var(--s-5); }
.databox h2 { font-family:var(--font-display);font-weight:500;font-size:20px;line-height:26px;margin:0 0 var(--s-3); }
.databox__stufe { margin:0 0 var(--s-3); }
.databox dl { margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--s-2) var(--s-4); }
.databox dt,.databox dd { font-size:15px;line-height:22px;padding-block:var(--s-1);border-bottom:var(--line); }
.databox dd { margin:0;font-weight:600;font-variant-numeric:tabular-nums;text-align:right; }
.databox dl > dt:nth-last-of-type(1),.databox dl > dd:nth-last-of-type(1) { border-bottom:0; }
.databox__sprung { font-size:14px;line-height:20px;font-weight:400; }
.databox__foot { margin-top:var(--s-4);display:flex;flex-direction:column;gap:var(--s-2); }
.databox .btn { justify-content:center; }
/* Querverweis ins Zuchtprogramm (Myfish_Zucht::projekte_zur_art). */
.databox__zucht { margin:0 0 var(--s-1); }
.databox__zucht a { color:inherit; }
/* Ohne Skript klebt die Tafel nur, wo sie ganz ins Fenster passt (bei Fischen rund 1.050 px plus
   Kopfleiste). Mit steckbrief.js läuft sie immer mit: Das Skript setzt top, bei hohen Tafeln negativ,
   sodass sie stehen bleibt, sobald ihr unteres Ende zu sehen ist. */
@media (min-width:901px) {
	.databox--haftet { position:sticky; }
}
@media (min-width:901px) and (min-height:1150px) {
	.databox { position:sticky;top:184px; }
	.admin-bar .databox { top:216px; }
	body:has(.masthead--kompakt) .databox { top:72px; }
	body.admin-bar:has(.masthead--kompakt) .databox { top:104px; }
}

/* ---------- Passt das Wasser bei dir? ---------- */

.sbtext section.wcheck { margin-top:var(--s-6);padding-top:0;border:1px solid var(--petrol-200);border-radius:var(--r-lg);background:var(--petrol-50); }
.sbtext .wcheck p { max-width:none; }
.wcheck__kopf { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--petrol-200);border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; }
.wcheck__kopf h3 { margin:0;font-family:var(--font-display);font-weight:500;font-size:19px;line-height:26px; }
.wcheck__wahl { position:relative;display:flex;align-items:center;gap:var(--s-2); }
.wcheck__wahl label { font-size:14px;line-height:20px;color:var(--petrol-700); }
.wcheck__feld { position:relative;display:flex;align-items:center; }
.wcheck__feld > svg { position:absolute;left:10px;width:18px;height:18px;color:var(--petrol-500);pointer-events:none; }
.wcheck__wahl input { font-family:var(--font-text);font-size:16px;line-height:24px;font-weight:500;padding:6px var(--s-3) 6px 34px;border:1px solid var(--petrol-300);border-radius:var(--r-md);background:var(--paper);color:var(--ink-950);width:210px; }
.wcheck__wahl input:focus-visible { outline:2px solid var(--petrol-600);outline-offset:1px; }
.wcheck__wahl input:disabled { color:var(--petrol-700);background:var(--stone-100); }
/* Die Liste behält ihr hidden auch gegen allgemeine ul-Regeln. */
.wcheck .wcheck__liste[hidden] { display:none; }
.wcheck .wcheck__liste { position:absolute;z-index:20;top:calc(100% + 6px);right:0;left:auto;min-width:268px;margin:0;padding:4px;display:block;list-style:none;background:var(--paper);border:1px solid var(--petrol-300);border-radius:var(--r-md);box-shadow:var(--shadow-2);max-height:264px;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--petrol-200) transparent; }
.wcheck__liste li { display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin:0;padding:7px var(--s-2) 7px var(--s-3);border-radius:var(--r-sm);cursor:pointer;font-size:15px;line-height:22px;scroll-margin:4px; }
.wcheck__liste li b { font-weight:500; }
.wcheck__liste li span { font-size:14px;color:var(--petrol-700); }
.wcheck__liste li:hover { background:var(--petrol-50); }
.wcheck__liste li.aktiv { background:var(--petrol-100); }
.wcheck__liste li.aktiv b { font-weight:600;color:var(--petrol-900); }
.wcheck__innen { padding:var(--s-5); }
.wcheck__leer { margin:0;font-size:15px;line-height:23px;color:var(--petrol-700); }
.wcheck .weigen { margin:var(--s-4) 0 0; }
.wcheck .weigen label { display:block;margin:0 0 var(--s-2);font-size:14px;line-height:21px;color:var(--petrol-800); }
.wcheck .weigen__zeile { display:flex;flex-wrap:wrap;gap:var(--s-2); }
.wcheck .weigen input { font-family:var(--font-text);font-size:16px;line-height:24px;padding:6px var(--s-3);border:1px solid var(--petrol-300);border-radius:var(--r-md);background:var(--paper);color:var(--ink-950);width:170px; }
.wcheck .weigen input:focus-visible { outline:2px solid var(--petrol-600);outline-offset:1px; }
.wcheck .weigen__meldung { margin:var(--s-2) 0 0;font-size:14px;line-height:21px;color:var(--coral-700,var(--coral-600)); }
.wcheck .weigen__meldung:empty { display:none; }
.wcheck .wquelle .weigen { margin-top:0; }
.wcheck .wkopf { display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-2) var(--s-3);margin:0 0 var(--s-3); }
.wcheck .wkopf__wert { font-family:var(--font-display);font-weight:500;font-size:21px;line-height:28px;font-variant-numeric:tabular-nums;margin:0; }
.wcheck .wkopf__wert span { font-size:15px;font-weight:400;color:var(--petrol-700); }
.wcheck .wskala { margin:0 0 var(--s-4); }
.wcheck .wskala__gleis { position:relative;height:40px; }
.wcheck .wskala__grund { position:absolute;left:0;right:0;top:22px;height:8px;border-radius:var(--r-full);background:var(--stone-200); }
.wcheck .wskala__bereich { position:absolute;top:22px;height:8px;border-radius:var(--r-full); }
.wcheck .wskala__bereich--haltung,.wcheck .wlegende__haltung { background:var(--petrol-300); }
.wcheck .wskala__bereich--zucht,.wcheck .wlegende__zucht { background:var(--petrol-600); }
.wcheck .wskala__marke { position:absolute;top:14px;width:3px;height:24px;border-radius:2px;background:var(--coral-600); }
.wcheck .wskala__marke--gut { background:var(--moss-600); }
.wcheck .wskala__spanne { position:absolute;top:16px;height:20px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--coral-600) 16%,transparent);border:1px solid var(--coral-600); }
.wcheck .wskala__spanne--gut { background:color-mix(in srgb,var(--moss-600) 16%,transparent);border-color:var(--moss-600); }
.wcheck .wskala__achse { display:flex;justify-content:space-between;margin-top:2px;font-size:14px;line-height:20px;color:var(--petrol-700);font-variant-numeric:tabular-nums; }
.wcheck .wlegende { display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);margin:0 0 var(--s-4);font-size:14px;line-height:20px;color:var(--petrol-700); }
.wcheck .wlegende span { display:inline-flex;align-items:center;gap:var(--s-2); }
.wcheck .wlegende i { width:14px;height:8px;border-radius:var(--r-full);display:block; }
.wcheck .wlegende i.wlegende__marke { width:3px;height:14px;border-radius:2px;background:var(--coral-600); }
.wcheck .wlegende i.wlegende__spanne { height:12px;background:color-mix(in srgb,var(--coral-600) 30%,transparent);border:1px solid var(--coral-600); }
.wcheck .wampel { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2) var(--s-4);margin:0 0 var(--s-4);padding:0;list-style:none; }
.wcheck .wampel li { display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-2);margin:0;align-items:baseline;font-size:15px;line-height:23px; }
.wcheck .wampel li::before { content:"";width:9px;height:9px;border-radius:var(--r-full);align-self:center; }
.wcheck .wampel li.ja::before { background:var(--moss-600); }
.wcheck .wampel li.nein::before { background:var(--coral-600); }
.wcheck .wampel li.offen::before { background:var(--ocker-600); }
.wcheck .wampel b { font-weight:600; }
.wcheck .wampel span { color:var(--petrol-700); }
.wcheck .whinweis { margin:0 0 var(--s-4);padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:var(--paper);border:var(--line);font-size:15px;line-height:23px; }
.wcheck .whinweis b { font-weight:600; }
.wcheck .whinweis--warn { background:var(--coral-50);border-color:color-mix(in srgb,var(--coral-600) 25%,var(--paper)); }
.wcheck .wmisch { border:var(--line);border-radius:var(--r-md);background:var(--paper);overflow:hidden; }
.wcheck .wmisch__kopf { padding:10px var(--s-4);border-bottom:var(--line);font-size:14px;line-height:20px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--petrol-600); }
.wcheck .wmisch__zeilen { margin:0;padding:0;list-style:none; }
.wcheck .wmisch__zeile { display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:var(--s-3);align-items:center;margin:0;padding:var(--s-3) var(--s-4);border-top:var(--line); }
.wcheck .wmisch__zeile:first-child { border-top:0; }
.wcheck .wmisch__zeile p { margin:0;font-size:15px;line-height:22px; }
.wcheck .wmisch__zeile p span { color:var(--petrol-700); }
.wcheck .wmisch__balken { display:flex;height:24px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--stone-200); }
.wcheck .wmisch__balken i { display:flex;align-items:center;justify-content:center;font-style:normal;font-size:14px;line-height:20px;font-weight:600;color:var(--paper);white-space:nowrap; }
.wcheck .wmisch__balken i.leitung { background:var(--petrol-600); }
.wcheck .wmisch__balken i.osmose { background:var(--petrol-200);color:var(--petrol-800); }
.wcheck .wfuss { margin:var(--s-4) 0 0;padding-top:var(--s-3);border-top:1px solid var(--petrol-200); }
.wcheck .wfuss p { margin:0;font-size:14px;line-height:21px;color:var(--petrol-700); }
.wcheck .wquelle { margin-top:var(--s-3);border-top:1px solid var(--petrol-200);padding-top:var(--s-3); }
.wcheck .wquelle summary { display:flex;align-items:center;gap:var(--s-2);cursor:pointer;list-style:none;font-size:14px;line-height:21px;color:var(--petrol-700); }
.wcheck .wquelle summary::-webkit-details-marker { display:none; }
.wcheck .wquelle summary::after { content:"";width:7px;height:7px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform 120ms linear; }
.wcheck .wquelle[open] summary::after { transform:rotate(225deg) translate(-1px,-1px); }
.wcheck .wquelle summary:hover { color:var(--petrol-800); }
.wcheck .wquelle summary b { font-weight:600; }
.wcheck .wquelle__innen { margin-top:var(--s-3);padding:var(--s-3);border-radius:var(--r-md);background:var(--paper);border:var(--line); }
.wcheck .wquelle__innen p { margin:0;font-size:14px;line-height:21px;color:var(--petrol-700); }
.wcheck .wquelle__innen p + p { margin-top:var(--s-2); }
.wcheck .wquelle__innen p.wquelle__zitat { color:var(--ink-950); }
.wcheck .wquelle__innen a { color:var(--petrol-700);font-weight:600; }

/* Kommentare: assets/css/kommentare.css */

/* ---------- Kleinere Bildschirme ---------- */

/* Sechs Kacheln in einer Reihe brauchen rund 1.250 px, sonst wird „Lebenserwartung" getrennt: darunter drei je Reihe. */
@media (max-width:1260px) and (min-width:641px) {
	.datafacts { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:1100px) {
	.sbhead { grid-template-columns:minmax(0,1fr) 400px;gap:var(--s-5); }
	.steckbrief { --sb-tafel:340px;--sb-luecke:var(--s-6); }
	.sbmain { grid-template-columns:minmax(0,1fr) var(--sb-tafel); }
}

@media (max-width:900px) {
	.sbhead { grid-template-columns:1fr; }
	.sbmain { grid-template-columns:minmax(0,1fr); }
	/* Auf schmalen Bildschirmen stehen die Zahlen vor dem Text, wie eine Infobox. */
	.databox { order:-1; }
	.gallery { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:640px) {
	.sbkopf { padding-bottom:var(--s-5); }
	.sbmain { padding-top:var(--s-5); }
	/* Zwei Spalten: Zeichen über dem Wert, Beschriftung ohne Versalien, damit sie in die halbe Breite passt. */
	.datafacts { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.datafacts p span { text-transform:none;letter-spacing:0; }
	.sbhead__lat { font-size:20px;line-height:28px; }
	.sbtext h2 { font-size:24px;line-height:30px; }
	.sbtext section + section { margin-top:var(--s-6);padding-top:var(--s-5); }
	.faq summary { font-size:18px;line-height:24px;padding:var(--s-3) var(--s-4); }
	.databox { padding:var(--s-4); }
	.wcheck__innen { padding:var(--s-4); }
	.wcheck__kopf { flex-direction:column;align-items:stretch; }
	.wcheck__wahl { justify-content:space-between;gap:var(--s-3); }
	.wcheck__feld { flex:1; }
	.wcheck__wahl input { width:100%; }
	.wcheck .wcheck__liste { left:0;right:0;min-width:0; }
	.wcheck .wampel { grid-template-columns:1fr; }
	.wcheck .wmisch__zeile { grid-template-columns:1fr;gap:var(--s-2); }
}

@media (prefers-reduced-motion:reduce) {
	.wcheck .wquelle summary::after,.gallery img { transition:none; }
}
.databox__farben { display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 12px; }
.databox__farbe { display:inline-flex;align-items:center;gap:6px;white-space:nowrap; }
.farbpunkt { display:inline-block;flex:none;width:12px;height:12px;border:1px solid rgb(0 0 0 / .2);border-radius:50%; }
.farbpunkt--leer { border-style:dashed;background:transparent; }

/* Hinweis auf invasive Arten */
.sb-invasiv-zeile { padding-top:var(--s-5); }
.sb-invasiv { display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);border:1px solid #e7b9b4;border-radius:var(--r-md);background:#fdf1ef;color:#5c1410; }
.sb-invasiv p { margin:0;font-size:16px;line-height:24px; }
.sb-invasiv a { color:inherit;text-decoration:underline;text-underline-offset:3px; }
@media (max-width:640px) { .sb-invasiv { flex-direction:column;align-items:flex-start; } }