/**
 * my-fish Theme: Bausteine, die mehrere Vorlagen teilen. Bänder, Karten, Markierungen,
 * Brotkrumen und Hinweiskästen. Global geladen, Werte über die Kurznamen aus theme.css.
 */

.band { padding-block:var(--s-8); }
.band--tinted { background:var(--stone-50); }
.band-head { display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-6);margin-bottom:var(--s-6); }
.band-head__text { max-width:68ch; }
.band-head__text .t-unterzeile { margin-top:var(--s-3); }
.chip { display:inline-flex;align-items:center;gap:var(--s-2); font-size:14px;line-height:20px;font-weight:600;letter-spacing:.05em;text-transform:uppercase; background:var(--petrol-100);color:var(--petrol-700); border-radius:var(--r-sm);padding:var(--s-1) var(--s-2); }
.chip--filter { text-transform:none;letter-spacing:0;font-weight:500;background:var(--paper);border:var(--line);color:var(--ink-950);padding:var(--s-2) var(--s-3);border-radius:var(--r-full);cursor:pointer;font-family:var(--font-text);text-decoration:none; }
.chip--filter[aria-pressed="true"] { background:var(--petrol-100);border-color:var(--petrol-300);color:var(--petrol-700); }
.flag { display:inline-flex;align-items:center;gap:var(--s-2);font-size:14px;line-height:20px;font-weight:600;color:var(--moss-600);margin:0; }
.flag::before { content:"";width:8px;height:8px;border-radius:var(--r-full);background:currentColor; }
.flag--warn { color:var(--coral-600); }
.flag--note { color:var(--ocker-600); }
.card { background:var(--paper);border:var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow 120ms linear; }
.card:hover { box-shadow:var(--shadow-2); }
.card__body { padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-2);flex:1; }
.card__foot { padding:var(--s-3) var(--s-4);border-top:var(--line);display:flex;align-items:center;justify-content:space-between; }
.card a.titel { text-decoration:none; }
.card a.titel:hover { text-decoration:underline;text-underline-offset:3px; }
.figure { margin:0;overflow:hidden;background:var(--petrol-100); }
.figure img { width:100%;height:100%;object-fit:cover; }
.species .figure { height:180px; }
.species .card__body { gap:var(--s-1);padding:var(--s-4); }
.species__lat { font-size:15px;line-height:22px;font-style:italic;color:var(--petrol-700);margin:0; }
.crumbs { display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;padding-block:var(--s-3);font-size:15px;line-height:22px; }
.crumbs a { color:var(--petrol-700);text-decoration:none; }
.crumbs a:hover { text-decoration:underline;text-underline-offset:3px; }
.crumbs span[aria-hidden] { color:var(--stone-300); }
.species__meta { display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);margin:var(--s-2) 0 0;font-size:15px;line-height:22px;font-variant-numeric:tabular-nums; }
.species__meta span { display:inline-flex;align-items:center;gap:var(--s-2); }
.species__meta span + span::before { content:"";width:4px;height:4px;border-radius:var(--r-full);background:var(--stone-300); }
.note { display:flex;gap:var(--s-3);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);margin:var(--s-3) 0 0;max-width:68ch; }
.note svg { flex:none;margin-top:3px; }
.note--warn { background:var(--coral-50); }
.note--warn svg { color:var(--coral-600); }
.note--tipp { background:var(--moss-50); }
.note--tipp svg { color:var(--moss-600); }
.note p { margin:0;font-size:15px;line-height:22px;max-width:none; }
.note b { font-weight:600; }

/* Artkarten: der Titel-Link deckt die ganze Karte ab, der Fuß ist nur Beschriftung. */
.species { position:relative; }
.species a.titel::after { content:"";position:absolute;inset:0; }
.species a.titel:focus-visible { outline:none; }
.species:has(a.titel:focus-visible) { outline:2px solid var(--petrol-600);outline-offset:2px; }
.species .figure img { transition:transform 280ms var(--ease-out); }
.species:hover .figure img { transform:scale(1.04); }

.col4 { grid-column:span 4; }
.col3 { grid-column:span 3; }
/* Nachbarn im Steckbrief: Bilder im festen 16:9-Rahmen statt fester Höhe, damit sie nicht in die Breite gezogen werden. */
.nachbarn .species .figure { height:auto;aspect-ratio:16/9; }

/* Artkarte mit Pass: Sammlung, Werte mit Sinnbildern, Urteil. Startseite und Nachbarn im Steckbrief. */
.coll { font-size:14px;line-height:20px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--petrol-600);margin:0; }
.pass { list-style:none;margin:var(--s-3) 0 0;padding:var(--s-3) 0 0;border-top:var(--line);display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-2) var(--s-3); }
.pass li { display:flex;align-items:center;gap:var(--s-2);font-size:15px;line-height:22px;font-variant-numeric:tabular-nums;color:var(--ink-950); }
.pass svg { width:20px;height:20px;flex:none;color:var(--petrol-600); }
.verdict { margin:var(--s-3) 0 0;min-height:20px; }

/* Nachbarn: zwei Blöcke untereinander; schmale Karten stellen den Pass einspaltig. */
.nachbarn__block + .nachbarn__block { margin-top:var(--s-8); }
.nachbarn .species { container-type:inline-size; }
.nachbarn .t-karte { hyphens:auto;overflow-wrap:break-word; }
.nachbarn .pass li { align-items:flex-start;min-width:0;hyphens:auto;overflow-wrap:break-word; }
.nachbarn .pass svg { margin-top:1px; }
.nachbarn .verdict { align-items:flex-start; }
.nachbarn .verdict::before { flex:none;margin-top:6px; }
@container (max-width:250px) { .nachbarn .pass { grid-template-columns:1fr; } }

@media (max-width:900px) {
	.band-head { flex-direction:column;align-items:flex-start;gap:var(--s-3); }
	.col4 { grid-column:span 6; }
	.col3 { grid-column:span 6; }
}

@media (max-width:640px) {
	.band { padding-block:var(--s-6); }
	.col4 { grid-column:1 / -1; }
	.col3 { grid-column:1 / -1; }
	/* Nachbarn wie die Fishothek-Reihe der Startseite: seitlich wischen statt acht Karten untereinander. */
	.nachbarn .grid12 { grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82vw;gap:var(--s-3);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--pad-page));padding-inline:var(--pad-page);scroll-padding-inline:var(--pad-page);padding-bottom:var(--s-2);scrollbar-width:none; }
	.nachbarn .grid12::-webkit-scrollbar { display:none; }
	.nachbarn .col3 { grid-column:auto;scroll-snap-align:start; }
	.nachbarn__block + .nachbarn__block { margin-top:var(--s-7); }
}

@media (prefers-reduced-motion:reduce) {
	.species .figure img { transition:none; }
}

/* Seitenleiste für Listen */
.seitenleiste { display:flex;flex-direction:column;align-items:center;gap:var(--s-3);margin-top:var(--s-7); }
.seitenleiste__reihe { list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s-2); }
.seitenleiste__zahl,.seitenleiste__pfeil { display:inline-flex;align-items:center;justify-content:center;gap:var(--s-1);min-width:44px;height:44px;padding-inline:var(--s-2);border-radius:var(--r-md);border:1px solid var(--stone-200);background:var(--paper);color:var(--ink-950);font-size:16px;font-variant-numeric:tabular-nums;text-decoration:none;transition:background .15s,border-color .15s; }
.seitenleiste__pfeil { padding-inline:var(--s-4);font-weight:500; }
.seitenleiste a:hover { background:var(--petrol-50);border-color:var(--petrol-300); }
.seitenleiste a:focus-visible { outline:2px solid var(--petrol-600);outline-offset:2px; }
.seitenleiste__zahl.ist-aktuell { background:var(--petrol-700);border-color:var(--petrol-700);color:var(--paper);font-weight:600; }
.seitenleiste__pfeil.ist-aus { opacity:.4; }
.seitenleiste__luecke { min-width:24px;text-align:center;color:var(--petrol-600); }
.seitenleiste__info { margin:0;font-size:14px;line-height:20px;color:var(--petrol-700); }
@media (max-width:640px) {
	.seitenleiste__pfeil { padding-inline:var(--s-3); }
	.seitenleiste__zahl,.seitenleiste__pfeil { min-width:40px;height:40px; }
	.seitenleiste__reihe { gap:6px; }
}