/* Tierheimfinder — Steckbrief. The dossier.
 *
 * One of four looks, and part one of the two files the page loads when it is
 * on: its own reset, its own fonts, its own two palettes and an answer for
 * every class the front end emits. Nothing cascades in from anywhere, so
 * nothing here may lean on app.css.
 *
 * Part two is `design-steckbrief-inhalt.css` and is linked straight after this
 * file — the animal card, the lists, the footer and the two phone layouts.
 * They are one look in two files since 2026-08-04 (OP191, house rule 25); the
 * order they are linked in is part of the look and is set in `gestaltung.py`.
 *
 * The idea: every animal is a small story, not a thumbnail. So the page reads
 * like a printed dossier, on a 1080-pixel measure. Fewer animals per screen
 * than the site had, each of them larger and each of them saying more.
 *
 * Two faces, and the split is the whole typographic idea. Fraunces sets every
 * name, heading and sentence; Work Sans sets every label, control and number.
 * Both of Fraunces' files are used, roman and italic.
 *
 * Almost no motion, and that is the point: elegance here is spacing.
 *
 * Every literal colour lives in the two blocks below and nowhere after them.
 */

/* ------------------------------------------------------------------ fonts */
/* Self-hosted and latin subset. The address is relative because this sheet
   sits in static/: `schrift/…` still works the day the site moves to a sub-path.

   Fraunces' own defaults are opsz 9 and wght 900, so a rule that sets neither
   gets a very heavy, very small-optical face. Every Fraunces rule below names
   both. */
@font-face {
    font-family: Fraunces;
    src: url(schrift/fraunces.woff2?v=1) format('woff2');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Fraunces;
    src: url(schrift/fraunces-kursiv.woff2?v=1) format('woff2');
    font-weight: 300 800;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: WorkSans;
    src: url(schrift/worksans.woff2?v=1) format('woff2');
    font-weight: 300 700;
    font-display: swap;
}

/* ---------------------------------------------------------- Porzellan, hell */
:root {
    /* The measure. 1080 is a reading width, not a screen width: three cards of
       340 pixels with a 24-pixel gutter. It grows once, at 1280 and above, to
       1420 — see the wide block at the foot of this file, where the row holds
       four cards instead of three. */
    --spalte: 1080px;

    /* Two faces and nothing else. A fallback is named after each web font, so
       a blocked or failed download leaves the page set rather than unset. */
    --schrift-titel: Fraunces, 'Iowan Old Style', 'Palatino Linotype', Palatino,
                     Georgia, 'Times New Roman', serif;
    --schrift-text:  WorkSans, system-ui, -apple-system, 'Segoe UI', Roboto,
                     'Helvetica Neue', Arial, sans-serif;

    /* Porcelain and plum. Warm-white paper, near-black aubergine ink, and one
       deep plum that carries every link, every wordmark and every yes. */
    --bg:      #fcfcfd;   /* the page */
    --bg-sunk: #f0eff3;   /* a well: the open panel's rows, a skeleton */
    --bg-bar:  #ffffff;   /* what stands up off the page: card, masthead, sheet */

    --ink:   #14111a;     /* 18.21:1 on --bg, 18.67:1 on --bg-bar */
    --ink-2: #4c4657;     /*  8.82:1 on --bg,  9.05:1 on --bg-bar */
    /* Measured 4.36:1 on --bg and 3.91:1 on --bg-sunk — under the 4.5 body
       text needs and over the 3 a non-text edge needs. So it is never text
       here: it draws hairline furniture and an icon stroke, and every quiet
       line of type takes --ink-2 instead. */
    --ink-3: #7b7488;

    --brand:    #5c2a4a;  /* 10.86:1 on --bg, 11.14:1 on --bg-bar */
    --on-brand: #fcfcfd;  /* 10.86:1 on --brand */

    /* The second hue, and the only one in this palette that is neither the
       plum the site says yes with, nor the amber of a long wait, nor the red
       of a fault. That is exactly what a found animal needs. */
    --zweit:    #5f7a5a;  /*  4.64:1 on --bg,  4.75:1 on --bg-bar */
    --on-zweit: #fcfcfd;  /*  4.64:1 on --zweit */
    --fund:     var(--zweit);
    --on-fund:  var(--on-zweit);

    /* Over a year in a shelter. Amber as ink on the page, and only as ink
       since 2026-08-08: it coloured the filled bar under the card until
       Georg had that bar taken out, and the waiting line's own words are
       what carry it now. */
    --lang:    #9a6a10;   /*  4.61:1 on --bg,  4.73:1 on --bg-bar */

    --warn: #a03024;      /*  6.96:1 on --bg,  7.14:1 on --bg-bar */

    --line:        #e5e2ea;  /* the hairline between two rows of a data list */
    --line-strong: #918aa0;  /* 3.23:1 on --bg — the edge of a control */
    --photo-edge:  rgb(0 0 0 / .08);
    /* Ink standing on a photograph, and the shadow that keeps it readable on a
       pale one. White in both themes on purpose: a photograph does not follow
       the theme, so the ink on it must not either. */
    --foto-ink:      #ffffff;
    /* The same ink while a press is still in the air. Paler, never
       half-transparent: an icon at reduced opacity reads as disabled rather
       than as busy. */
    --foto-ink-leise: rgb(255 255 255 / .7);
    --foto-schatten: rgb(0 0 0 / .6);

    /* The ring is the ink, the halo is the page, and the two stand 18.21:1
       apart. Nothing can fall below 3:1 against both at once — a backdrop
       light enough to swallow the ink is light enough for the halo to show,
       and the other way round — which is what makes it safe to put a focus
       ring straight onto a shelter photograph. */
    --focus-ring: var(--ink);
    --focus-halo: var(--bg);

    /* Nearly square. A dossier is printed, and print has no rounded corners;
       these two are here so a control does not look accidentally sharp. */
    --r-photo:   2px;
    --r-control: 3px;

    --s1: 4px;  --s2: 8px;  --s3: 12px;
    --s4: 16px; --s5: 24px; --s6: 40px;
    /* The seventh step is this look's own: the air between the masthead, the
       lede and the first card is what makes the page read as editorial, and
       40 pixels is not enough of it. */
    --s7: 64px;

    --t-xs:   0.6875rem;   /* 11px — every label, uppercase and tracked */
    --t-sm:   0.8125rem;   /* 13px — the value beside a label */
    --t-base: 1rem;        /* 16px — prose, and the floor for every text field */
    --t-md:   1.0625rem;   /* 17px — a row of the open panel */
    --t-lg:   1.25rem;     /* 20px — the lede */
    --t-xl:   1.5rem;      /* 24px — an animal's name */

    /* How wide the label column of a data list is. One number, because the
       rows have to line up down the whole card. */
    --daten-spalte: 5.5rem;

    --motion: 140ms ease-out;
    color-scheme: light;
}

/* --------------------------------------------------------- Aubergine, dunkel */
/* Not black, and the plum turns into the pink it would be under lamplight.
   theme.js writes exactly hell or dunkel, so the palette is written twice and
   never three times. */
:root[data-theme="dunkel"] {
    --bg:      #141119;
    --bg-sunk: #1e1a26;
    --bg-bar:  #191521;

    --ink:   #f2eff4;     /* 16.40:1 on --bg, 15.74:1 on --bg-bar */
    --ink-2: #b6adc2;     /*  8.67:1 on --bg,  8.33:1 on --bg-bar */
    --ink-3: #8d8499;     /*  5.24:1 on --bg — furniture here too, for one look */

    --brand:    #e2a8c6;  /*  9.48:1 on --bg,  9.10:1 on --bg-bar */
    --on-brand: #2a1220;  /*  8.83:1 on --brand */

    --zweit:    #a8c5a2;  /*  9.94:1 on --bg,  9.55:1 on --bg-bar */
    --on-zweit: #141119;  /*  9.94:1 on --zweit */
    --fund:     var(--zweit);
    --on-fund:  var(--on-zweit);

    --lang:    #e9b45f;   /*  9.93:1 on --bg,  9.53:1 on --bg-bar */

    --warn: #ff9a86;      /*  9.09:1 on --bg,  8.73:1 on --bg-bar */

    --line:        #2c2636;
    --line-strong: #7d7490;  /* 4.25:1 on --bg — clear of the 3 an edge needs */
    --photo-edge:  rgb(255 255 255 / .09);
    --foto-ink:      #ffffff;
    --foto-ink-leise: rgb(255 255 255 / .7);
    --foto-schatten: rgb(0 0 0 / .6);

    color-scheme: dark;
}

/* ------------------------------------------------------------------- reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    /* Anything jumped to has to clear the pinned masthead: 56 pixels of it on
       a phone, plus a little air. */
    scroll-padding-top: 72px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--schrift-text);
    font-size: var(--t-base);
    font-weight: 400;
    line-height: 1.55;
    background: var(--bg);
    color: var(--ink);
    min-height: 100vh;
    /* The fixed bottom bar covers the last 56 pixels of the document. */
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
}

img, svg { max-width: 100%; }

/* Almost nothing moves, and what does is listed here. Focus is never one of
   them: a transitioned outline is what makes focus feel late. */
.pill, .navitem, .btn, .btn-more, .chip, .thema, .gestaltung-knopf, .kopf-konto, .panel-wahl,
.heim-zeile, .weg, .neu-mischen, .tier-teilen, .tier-merken, .listen-icon,
.listen-dock-ziel, .listen-dock-neu, .tier {
    transition: background-color var(--motion), color var(--motion),
                border-color var(--motion), transform var(--motion);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
    }
    html { scroll-behavior: auto; }
}

:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--focus-halo);
    border-radius: var(--r-photo);
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 60;
    background: var(--bg-bar);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-top: 0;
    padding: var(--s3) var(--s4);
    font-size: var(--t-sm);
}
.skip-link:focus { left: 0; }

/* The Leitstand's shelter strip. It lives in the shared footer markup, and
   every look that is not the Leitstand switches it off. */
#heimStreifen { display: none; }

/* ---------------------------------------------------------------- masthead */
.kopf {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--bg-bar);
    border-bottom: 1px solid var(--line-strong);
}

/* A grid rather than a flex row, because the wide layout has to centre the
   wordmark against the whole measure and not against whatever is left over
   beside the controls. */
.kopf-innen {
    max-width: var(--spalte);
    margin: 0 auto;
    height: 56px;
    padding: 0 var(--s4);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: var(--s3);
}

.wortmarke {
    grid-area: 1 / 1;
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--schrift-titel);
    font-size: var(--t-md);
    font-weight: 600;
    font-variation-settings: 'opsz' 17;
    letter-spacing: 0.005em;
}
/* Fraunces resolves to one known face, but the fallback does not, so the name
   is allowed to clip rather than to bet the masthead's height on an advance
   width. Clipping is recoverable; a masthead that grows a second row is not. */
.wortmarke span { overflow: hidden; text-overflow: ellipsis; }
/* Shown again at 640 — the country word plus the account control cut the name
   to "Tierheimfinde…" at 360. */
.wortmarke-land { display: none; }

.pfote {
    width: 20px;
    height: 20px;
    flex: none;
    fill: var(--brand);
}



/* ------------------------------------------------------- the four views */
/* Fixed positioning takes this out of the masthead grid entirely, which is
   what lets the phone bar and the masthead's second row be one element with
   no undoing of each other. */
.ansichten {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    display: flex;
    background: var(--bg-bar);
    border-top: 1px solid var(--line-strong);
    padding-bottom: env(safe-area-inset-bottom);
    /* A longer label one day degrades into a strip that scrolls inside
       itself, never into a document that scrolls sideways. */
    overflow-x: auto;
    scrollbar-width: none;
}
.ansichten::-webkit-scrollbar { display: none; }

.navitem {
    flex: 1 0 auto;
    min-width: 25%;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-2);
    text-decoration: none;
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border-top: 2px solid transparent;
}
/* Three signals, not one: the rule, the plum and the weight. */
.navitem.aktiv {
    color: var(--brand);
    font-weight: 600;
    border-top-color: var(--brand);
}

/* ------------------------------------------------- the two masthead controls */
.kopf-konto {
    grid-area: 1 / 2;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 var(--s2);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-2);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--r-control);
    /* A username can be 32 characters, and the masthead is 56 pixels tall with
       a wordmark and a second control beside it. */
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kopf-konto:hover { color: var(--brand); border-color: var(--line-strong); }

/* The masthead is a grid, so the two square controls sit in one cell as one
   element rather than each claiming a column of their own. */
.kopf-tasten {
    grid-area: 1 / 3;
    display: inline-flex;
    align-items: center;
}

/* The colour-scheme button and, since 2026-08-04, the look switch beside it.
   One box for both: same size, same target, same corner — only what they show
   differs, an icon there and a letter here. */
.thema,
.gestaltung-knopf {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--r-control);
    color: var(--ink-2);
    cursor: pointer;
}
.thema:hover,
.gestaltung-knopf:hover { color: var(--brand); border-color: var(--line-strong); }
/* Without this the inline-flex above outranks the hidden attribute, and a
   control that cannot work would still be on the screen. */
.thema[hidden] { display: none; }
.gestaltung-knopf[hidden] { display: none; }
/* C or M — the look that is running, not the one the press would give. The
   masthead's own face, because that is what the letter stands next to. */
.gestaltung-zeichen {
    font-family: var(--schrift-titel);
    /* 13 pixels, and the axis is bound to it: Fraunces defaults to opsz 9, and
       a letter drawn for footnotes reads as a plain serif at any other size. */
    font-size: var(--t-sm);
    font-variation-settings: 'opsz' 13;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.thema-zeichen { display: inline-flex; }

/* ------------------------------- der Kopf auf dem schmalsten Handy (2026-08-04) */
/* Der Gestaltungs-Knopf machte den Kopf 44 Pixel breiter, und bei 360 war das
   genau die Breite, die der Wortmarke fehlte: aus „Tierheimfinder" wurde
   „Tierheimf…". Also rückt hier zusammen, was zusammenrücken kann — die Abstände
   und die Innenränder —, und kein Ziel wird kleiner als 44 Pixel. */
@media (max-width: 480px) {
    .kopf-innen { column-gap: var(--s2); }
    .wortmarke { gap: var(--s1); }
    .kopf-konto { padding-left: 0; padding-right: 0; }
}

.thema-zeichen svg { width: 20px; height: 20px; fill: currentColor; }

/* -------------------------------------------------------------- the lede */
/* Not a status bar and not pinned: this is the one place a number on the
   site is allowed to be a sentence. */
.ergebnis-leiste {
    max-width: var(--spalte);
    margin: 0 auto;
    padding: var(--s7) var(--s4) var(--s5);
}
/* Same reason as .thema[hidden]: the shelter list has no sentence for it. */
.ergebnis-leiste[hidden] { display: none; }

.ergebnis {
    font-family: var(--schrift-titel);
    font-size: var(--t-lg);
    font-weight: 400;
    font-variation-settings: 'opsz' 20;
    line-height: 1.35;
    color: var(--ink-2);
    max-width: 34ch;
    font-variant-numeric: tabular-nums;
}
.ergebnis-zahl { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------ the view's own head */
.ansicht-kopf {
    max-width: var(--spalte);
    margin: 0 auto;
    padding: 0 var(--s4);
}
.ansicht-kopf[hidden] { display: none; }

.kopf-suche { padding-bottom: var(--s4); }

/* A ruled line, not a box. The field is the widest thing in the head and a
   boxed one turned the top of the page into a form. */
.such-feld {
    font-family: var(--schrift-text);
    /* 16 pixels is a hard floor: below it iOS Safari zooms the viewport when
       the field takes focus, and a zoomed viewport scrolls sideways. */
    font-size: var(--t-base);
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line-strong);
    border-radius: 0;
    padding: 0 var(--s1);
    height: 48px;
    width: 100%;
}
.such-feld:hover { border-bottom-color: var(--ink-2); }
/* --ink-2 and not --ink-3: a placeholder is read, so it is text, and --ink-3
   does not reach 4.5:1 on this page. */
.such-feld::placeholder { color: var(--ink-2); opacity: 1; }
.such-bar { padding-bottom: var(--s4); }

/* --------------------------------------------------- the segmented filter bar */
/* Six questions in one ruled strip and not six pills — the brief's word. It
   said five; the sixth arrived on 2026-08-05 and this said five until OP239.
   Below 700 the cells keep their natural width and the strip scrolls inside
   itself; the document never does. */
.chip-bereich { padding-bottom: var(--s5); }

.chip-leiste {
    display: flex;
    background: var(--bg-bar);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-control);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.chip-leiste::-webkit-scrollbar { display: none; }
/* Nothing in this strip is ever cut in half, which is why no cell is allowed
   to shrink. */
.chip-leiste > * { flex: 1 0 auto; min-width: 0; }

/* Inside the strip a pill stops being a pill: the word carries the state. */
.chip-leiste .pill {
    min-height: 48px;
    /* `1 0 auto` and never `1 1 auto` (OP239). This rule names two classes to
       the one class of `.chip-leiste > *` above, so it wins, and a shrink
       written here quietly took that rule's promise back for every plain chip
       — an answered question is a `.frage-paar` span, which this selector does
       not match, and it kept its 0. On a phone the unanswered questions were
       squeezed into 360 pixels until their words were cut through the middle —
       "ierart", "Bundeslan", "Vermittlungsfä" — instead of the strip
       scrolling, which is the whole point of the `overflow-x` above. The grow
       stays: on a wide screen the six cells still share the width. */
    flex: 1 0 auto;
    justify-content: center;
    gap: var(--s2);
    padding: 0 var(--s3);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    box-shadow: none;
    color: var(--ink-2);
    font-size: var(--t-sm);
    font-weight: 500;
    white-space: nowrap;
}
.chip-leiste .pill:hover { background: var(--bg-sunk); color: var(--ink); }
/* Never a solid fill: a filled cell in a six-cell strip reads as a pressed
   button, and this is a stated answer. */
.chip-leiste .pill.active {
    background: none;
    color: var(--brand);
    font-weight: 600;
    border-bottom-color: var(--brand);
    box-shadow: none;
}
.chip-leiste .pill.active:hover { background: var(--bg-sunk); }
/* The hairline between two questions. It has to outweigh the `border: 0`
   above, so it names both classes rather than leaning on source order. */
.chip-leiste > .pill:not(:first-child),
.chip-leiste > .frage-paar:not(:first-child) { border-left: 1px solid var(--line); }

/* The question's own word in front of the answer, so a cell reading "Hund"
   still says which question it answers. filter.js writes the field name onto
   both states of the chip, which is where these five come from. */
.frage-paar { display: inline-flex; align-items: stretch; }
.frage-paar .frage-chip::before {
    font-weight: 400;
    color: var(--ink-2);
    padding-right: var(--s1);
}
.frage-paar .frage-chip[data-feld="tierart"]::before    { content: "Tierart:"; }
.frage-paar .frage-chip[data-feld="bundesland"]::before { content: "Bundesland:"; }
.frage-paar .frage-chip[data-feld="geschlecht"]::before { content: "Geschlecht:"; }
.frage-paar .frage-chip[data-feld="alter"]::before      { content: "Alter:"; }
.frage-paar .frage-chip[data-feld="dauer"]::before      { content: "Im Heim:"; }

/* The × that clears one question — the one control on the page that warns. */
.chip-leiste .frage-x {
    flex: none;
    min-width: 44px;
    padding: 0;
    border-bottom-color: transparent;
    font-size: var(--t-md);
    color: var(--ink-2);
}
.chip-leiste .frage-x:hover { color: var(--warn); background: var(--bg-sunk); }

/* The ▾ filter.js writes is not in the latin subset — the font would draw a
   blank or a fallback box — so the glyph is switched off and the arrow is two
   borders turned through 45 degrees. */
.frage-pfeil {
    flex: none;
    display: inline-block;
    font-size: 0;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    color: var(--ink-3);
}
.pill.active .frage-pfeil { color: currentColor; }

/* Rings inside a strip that scrolls sideways. An outline drawn outside the
   control is clipped by the scroll box, so in these four places it goes
   inside instead. The halo can go with it: the halo exists for a ring standing
   on a photograph, and every one of these stands on a tone this file
   chose. */
.chip-leiste .pill:focus-visible,
.ansichten .navitem:focus-visible,
.listen-dock-ziel:focus-visible,
.listen-dock-neu:focus-visible { outline-offset: -3px; box-shadow: none; }
/* A strip pill carries eight transparent pixels of its own, so its ring lands
   two pixels outside the paint at this offset. */
.streifen .pill:focus-visible { outline-offset: -6px; box-shadow: none; }

/* --------------------------------------------------------------- the sheet */
/* The panel is a wide sheet under the whole strip, not a popover under one
   chip. `position: static` is what makes that work with no change to
   filter.js: the inline `left` it sets on an absolutely positioned panel
   stops applying the moment the panel is in the flow. */
.chip-panel {
    position: static;
    margin-top: var(--s3);
    background: var(--bg-bar);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-control);
    padding: var(--s3);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--s5);
    max-height: min(60vh, 460px);
    overflow-y: auto;
}
.chip-panel[hidden] { display: none; }

.panel-titel {
    grid-column: 1 / -1;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-2);
    padding: 0 var(--s2) var(--s2);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--s2);
}

.panel-wahl {
    font-family: var(--schrift-text);
    font-size: var(--t-md);
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    text-align: left;
    padding: 0 var(--s2);
    background: none;
    border: 0;
    border-radius: var(--r-control);
    color: var(--ink);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.panel-wahl:hover { background: var(--bg-sunk); }
.panel-wahl.aktiv { color: var(--brand); font-weight: 600; }

/* --------------------------------------------------------- pills and strips */
/* Outside the filter strip a pill is still a pill: the province row on the
   shelter list, the species row on one shelter's page, the Liste/Karte switch.
   The transparent border is what separates 44 pixels of target from 28 pixels
   of paint, and `background-clip: padding-box` keeps the fill off it. */
.pill {
    font-family: var(--schrift-text);
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    min-height: 44px;
    border: 8px solid transparent;
    padding: 0 var(--s3);
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    flex: none;
    white-space: nowrap;
    background: var(--bg-bar);
    /* After the shorthand, never before it: `background` resets this and the
       fill would paint under the transparent border again. */
    background-clip: padding-box;
    color: var(--ink-2);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    border-radius: var(--r-control);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.pill:hover { background: var(--bg-sunk); background-clip: padding-box; color: var(--ink); }
.pill.active {
    background: var(--brand);
    background-clip: padding-box;
    color: var(--on-brand);
    box-shadow: inset 0 0 0 1px var(--brand);
    font-weight: 600;
}
.pill.active:hover {
    background: var(--brand);
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px var(--ink);
}

.streifen {
    display: flex;
    gap: var(--s1);
    overflow-x: auto;
    scrollbar-width: none;
}
.streifen::-webkit-scrollbar { display: none; }
.streifen:empty { display: none; }

/* Two rows that scroll as one, so the second row's indent still lines up with
   the first province after a thumb has pushed the row sideways. */
.streifen-zwei {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    row-gap: 0;
}
.streifen-zeile {
    display: flex;
    gap: var(--s1);
    flex: none;
    width: max-content;
}
/* There to hold the left edge and for nothing else. */
.streifen-platzhalter { visibility: hidden; pointer-events: none; }

/* A strip with its category word beside it, so three bare rows of pills do not
   read as one pile. */
.kopf-zeile {
    display: flex;
    align-items: flex-start;
    max-width: var(--spalte);
    margin: 0 auto;
    min-width: 0;
}
.kopf-zeile[hidden] { display: none; }
.kopf-zeile .streifen { flex: 1; min-width: 0; }
.streifen-titel {
    flex: none;
    width: 5.5rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.ansicht-streifen { margin-bottom: var(--s4); }

/* ------------------------------------------------ Vermittlung vs. Fundtiere */
/* The one row where a pill is not a narrowing but a choice between two
   different questions. The middle entry keeps the found-animal green even
   while it is not the pressed one, so the row says at a glance that it is a
   different kind of thing and not a third species. */
.fund-streifen { padding-bottom: 0; }
.fund-pill-fund {
    box-shadow: inset 0 0 0 1px var(--fund);
    color: var(--fund);
}
.fund-pill-fund:hover { color: var(--fund); }
.fund-pill-fund.active {
    background: var(--fund);
    background-clip: padding-box;
    color: var(--on-fund);
    box-shadow: inset 0 0 0 1px var(--fund);
}
.fund-pill-fund.active:hover {
    background: var(--fund);
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px var(--ink);
}

/* A noun of the result sentence, carrying a × that drops that one filter. */
.chip {
    font-family: var(--schrift-text);
    font-size: var(--t-xs);
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    min-height: 30px;
    padding: 0 var(--s2);
    background: var(--brand);
    color: var(--on-brand);
    border: 1px solid var(--brand);
    border-radius: var(--r-control);
    cursor: pointer;
}
.chip:hover { background: var(--bg-sunk); color: var(--brand); }
.chip-x { font-size: var(--t-md); line-height: 1; }

/* ----------------------------------------------------------------- buttons */
.btn {
    font-family: var(--schrift-text);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    min-height: 44px;
    padding: 0 var(--s5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    border: 1px solid transparent;
    border-radius: var(--r-control);
    cursor: pointer;
    /* "Website besuchen" is a link wearing a button's clothes, and no real
       button on this site is underlined. */
    text-decoration: none;
}
.btn-primary { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.btn-primary:hover { background: var(--ink); border-color: var(--ink); }
.btn-rand { background: none; color: var(--brand); border-color: var(--line-strong); }
.btn-rand:hover { background: var(--bg-sunk); border-color: var(--brand); }

.btn-more {
    font-family: var(--schrift-text);
    display: block;
    margin: var(--s6) auto 0;
    min-height: 44px;
    padding: 0 var(--s6);
    background: none;
    color: var(--brand);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-control);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    cursor: pointer;
}
.btn-more:hover { background: var(--bg-sunk); border-color: var(--brand); }

/* -------------------------------------------------------------------- main */
main {
    max-width: var(--spalte);
    margin: 0 auto;
    padding: 0 var(--s4) var(--s7);
}

/* ------------------------------------------------------------ the front door */
.willkommen { padding-top: var(--s5); }

.willkommen-titel {
    font-family: var(--schrift-titel);
    font-size: 2.125rem;              /* 34px */
    font-weight: 500;
    font-variation-settings: 'opsz' 34;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: var(--s3);
}
.willkommen-zahlen {
    font-family: var(--schrift-titel);
    font-size: var(--t-lg);
    font-weight: 400;
    font-variation-settings: 'opsz' 20;
    font-style: italic;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--s5);
}
.willkommen-kopf { margin-bottom: var(--s6); }
.willkommen-links { min-width: 0; }

.willkommen-punkte {
    max-width: 60ch;
    color: var(--ink-2);
    padding-left: var(--s4);
}
.willkommen-punkte li { margin-bottom: var(--s2); }
.willkommen-punkte li:last-child { margin-bottom: 0; }

.willkommen-neu-zeile {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding-bottom: var(--s4);
    margin-bottom: var(--s5);
    border-bottom: 1px solid var(--line);
}
.willkommen-neu {
    font-family: var(--schrift-titel);
    font-size: var(--t-xl);
    font-weight: 500;
    font-variation-settings: 'opsz' 24;
    line-height: 1.1;
    margin-right: auto;
}
.neu-mischen {
    flex: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-control);
    color: var(--ink-2);
    cursor: pointer;
}
.neu-mischen:hover { color: var(--brand); border-color: var(--brand); }
.neu-mischen svg { width: 18px; height: 18px; }

.willkommen-wege {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
    margin-top: var(--s7);
}
.weg {
    display: flex;
    align-items: flex-start;
    gap: var(--s4);
    padding: var(--s4);
    background: var(--bg-bar);
    border: 1px solid var(--line);
    border-radius: var(--r-control);
    text-decoration: none;
    min-height: 44px;
}
.weg:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.weg-zeichen { flex: none; display: inline-flex; padding-top: 3px; color: var(--brand); }
.weg-zeichen svg { width: 20px; height: 20px; fill: currentColor; }
.weg-wort { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.weg-titel {
    font-family: var(--schrift-titel);
    font-size: var(--t-md);
    font-weight: 600;
    font-variation-settings: 'opsz' 17;
    color: var(--ink);
}
.weg-text { font-size: var(--t-sm); color: var(--ink-2); }