/* Tierheimfinder — Klassisch, part one of the look: the frame of the page.
 *
 * Part two is `static/app-inhalt.css` and is linked straight after this file by
 * every page that links this one — the animal card, the lists, the map and the
 * footer. 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 for the public page it is
 * set in `gestaltung.py`.
 *
 * The direction is "Passepartout": the cream is a mount board, not a
 * background. There is no white card, no shadow and no green header slab —
 * photographs are pinned flat on the cream and the type does the box's job.
 *
 * Twelve colour tokens cut by meaning, six spacing steps, two radii, one border
 * width, two type weights, zero shadows and zero web fonts. Every literal
 * colour on the site lives in the two blocks below and nowhere else; a test
 * fails if a hex value appears anywhere after them.
 */

:root {
    /* The one content width, shared by the header, the result line, the grid and
       the shelter list, so nothing on the page starts at a different left edge.
       The overhaul raised it to 1440 to win a fifth column of animals; on a wide
       monitor that put the wordmark against one bezel and the colour control
       against the other with a metre of green between them. 1200 is what the
       site had before and what it goes back to. */
    --spalte: 1200px;
    /* A full-width bar has to keep its background edge to edge and its contents
       on the column. This is that inset: the page padding on a narrow screen,
       and the gutter plus the page padding once the column stops growing. The
       result line and the pill strips used to start at 24 pixels while the
       header started at 120 and the grid at 144, which is the ragged left edge
       Georg saw. */
    --rand:   max(var(--s3), calc((100% - var(--spalte)) / 2 + var(--s3)));
    --rand-w: max(var(--s5), calc((100% - var(--spalte)) / 2 + var(--s5)));

    /* Papier — the cream. The default. */
    --bg:          #fefae0;   /* page */
    --bg-sunk:     #f4eec8;   /* text field, idle pill, skeleton, photo placeholder */
    --bg-bar:      #f9f4d8;   /* the two bars: result line, bottom nav */
    --ink:         #22201a;   /* body text, animal name */
    --ink-2:       #57513f;   /* breed, town, every secondary line */
    --ink-3:       #6f6852;   /* counts, dates, hints */
    --brand:       #1b4332;   /* links, active pill fill, wordmark */
    --on-brand:    #fefae0;   /* label on a brand fill */
    --warn:        #8f2f10;   /* errors, a stale scrape */
    /* A label standing ON the warning tone rather than in it. One place needs
       it: the drop target that would TAKE an animal off a list, which has to
       be the opposite of the brand fill that puts one on. 7.73:1 here. */
    --on-warn:     #fefae0;
    /* A found animal, waiting for its owner. Deliberately neither the brand
       green — that is what the site says yes with, and this animal is not on
       offer — nor the error red, because nothing has gone wrong. Amber against
       the cream at 7.1:1 on the page and 6.4:1 on the sunk tone. */
    --fund:        #7a4a02;
    --on-fund:     #fefae0;
    --line:        #e4dcb6;   /* decorative hairline */
    --line-strong: #8b835d;   /* the edge of a control */
    --photo-edge:  rgb(0 0 0 / .06);
    /* Ink standing directly on a photograph. White in both themes on purpose:
       a photo does not follow the theme, so the ink on it must not either. */
    --foto-ink:    #fff;

    /* Two tones, and no backdrop colour whatsoever — including any pixel of any
       shelter photograph — falls below 3:1 against both at once. That is what
       makes it safe to put a focusable element directly on a photo (OP88). */
    --focus-ring:  var(--ink);
    --focus-halo:  var(--bg);

    --r-photo:   3px;
    --r-control: 8px;

    --s1: 4px;  --s2: 8px;  --s3: 12px;
    --s4: 16px; --s5: 24px; --s6: 40px;

    --t-xl:   1.75rem;      /* 28px/600 */
    --t-lg:   1.375rem;     /* 22px/600 */
    --t-md:   1.0625rem;    /* 17px/600 — the animal's name */
    --t-base: 1rem;         /* 16px/400 — prose, and every text field */
    --t-sm:   0.8125rem;    /* 13px/400 */
    --t-xs:   0.75rem;      /* 12px/500 */
    /* The word on a capsule you press — the pills and the chips. The scale
       jumps 13 to 16 and neither is right here: 13 is the "hardly readable"
       Georg named, 16 puts fewer than five questions on a 360-pixel row. */
    --t-control: 0.875rem;  /* 14px/500 */

    --motion: 120ms ease;
    color-scheme: light;
}

/* Abend — warm brown-black, not navy and not pure black. Navy fights the
   greens; pure black makes the block artefacts on volunteer-shot photographs
   visible at the edges. theme.js always writes exactly hell or dunkel, so the
   palette is written twice and never three times. */
:root[data-theme="dunkel"] {
    --bg:          #17150f;
    --bg-sunk:     #221f16;
    --bg-bar:      #1d1a13;
    --ink:         #f2ecd8;
    --ink-2:       #b3ab93;
    --ink-3:       #968e76;
    --brand:       #9ad4b2;
    --on-brand:    #10231a;
    --warn:        #ff9a72;
    /* The warning tone is light here, so the label on it is the page's own
       near-black rather than the cream — 8.79:1. A cream label on light salmon
       would be 1.6:1 and unreadable. */
    --on-warn:     #17150f;
    /* 8.9:1 on the sunk tone, and the label on the fill flips to the page's own
       near-black at 9.9:1 — a cream label on light amber would fail both. */
    --fund:        #f0b168;
    --on-fund:     #17150f;
    --line:        #302c21;
    --line-strong: #7a725c;
    --photo-edge:  rgb(255 255 255 / .07);
    --foto-ink:    #fff;
    color-scheme: dark;
}

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

/* Anything jumped to has to clear what is pinned above it, and since the result
   line stopped sticking the header is the whole of that: 52 pixels, against the
   210 the old 199-pixel header needed — which is what closes OP84. The figure
   is exactly the header's height on purpose. It was 96 while the result line
   was pinned too, and a number larger than what actually holds still leaves a
   band of empty page above whatever the reader jumped to. */
html {
    scroll-padding-top: 52px;   /* the header; nothing else is pinned */
    -webkit-text-size-adjust: 100%;
}

body {
    /* No web font ships. Zero bytes. system-ui first — it used to be listed
       fourth, behind Segoe UI, which is backwards. */
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--t-base);
    /* There was no line-height at all, so every line outside two rules rendered
       at the font's own 1.15. This one declaration is the largest legibility
       gain available. */
    line-height: 1.5;
    background: var(--bg);
    color: var(--ink);
    min-height: 100vh;
    /* The fixed bottom bar covers the last 52 pixels of the document,
       the footer among them. */
    padding-bottom: calc(52px + env(safe-area-inset-bottom));
}

/* Two transitions on the whole site, and focus is never one of them: a
   transitioned outline is why focus felt laggy. */
.pill, .navitem, .btn, .btn-more, .chip, .thema, .gestaltung-knopf, .panel-wahl {
    transition: background-color var(--motion), color var(--motion),
                border-color var(--motion);
}
.tier-haupt img { transition: filter 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: 40;
    background: var(--bg-bar);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    padding: var(--s3) var(--s4);
    border-radius: 0 0 var(--r-control) 0;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------------ header */
/* 52 pixels, one row, cream, and it scrolls away. */
/* Green, and pinned. The overhaul made this cream and let it scroll away, which
   bought the vertical budget but cost the site its only recognisable surface and
   left the top of the screen moving under the reader. Georg asked for both back.
   Both are affordable at 52 pixels — what made the old header unaffordable was
   199 pixels of it, three stacked rows, not the colour. The label tone is
   --on-brand, 10.53:1 on this green in Papier and 9.73:1 in Abend, and the
   two-tone focus ring needs no override here because it never did. */
.kopf {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--brand);
    color: var(--on-brand);
}

/* A fixed height, not a minimum: the whole vertical budget of this design rests
   on the header being 52 pixels, and a wordmark that wrapped to a second line
   would take 27 of them back. Measured at 360: 252 pixels are free for the
   name, which needs 244 at 17px and 259 at 18px. */
.kopf-innen {
    max-width: var(--spalte);
    margin: 0 auto;
    height: 52px;
    padding: 0 var(--s3);
    display: flex;
    align-items: center;
    gap: var(--s3);
}

.wortmarke {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--brand);
    text-decoration: none;
    font-size: var(--t-md);
    font-weight: 600;
    letter-spacing: -0.011em;
    margin-right: auto;
}
/* A system font resolves to four different faces across platforms, so the name
   is allowed to clip rather than to bet the header's height on an advance
   width. Clipping is visible and recoverable; a two-row header is neither. */
.wortmarke span { overflow: hidden; text-overflow: ellipsis; }
/* Shown again at 640 — see the media query at the foot of this file. */
.wortmarke-land { display: none; }

.pfote {
    width: 20px;
    height: 20px;
    flex: none;
    fill: currentColor;
}

/* ------------------------------------------------- the four views, one nav */
/* Below 1024 this same element is the fixed bottom bar; at 1024 and above it
   is a row of text links in the header. One element, two positions. */
.ansichten {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    display: flex;
    background: var(--bg-bar);
    border-top: 1px solid var(--line-strong);
    padding-bottom: env(safe-area-inset-bottom);
    /* A longer label in future degrades to a scroll rather than to a broken
       row. "Langzeitgäste" measures about 80px in an 88px cell at 360. */
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}
.ansichten::-webkit-scrollbar { display: none; }

.navitem {
    flex: 1 0 auto;
    min-width: 25%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: center;
    color: var(--ink-2);
    text-decoration: none;
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: 0.015em;
    border-top: 2px solid transparent;
}
/* Three signals instead of none: a rule, a colour and a weight. */
.navitem.aktiv {
    color: var(--brand);
    font-weight: 600;
    border-top-color: var(--brand);
}

/* ------------------------------------------- the two controls in the corner */
/* 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 {
    flex: none;
    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 { background: var(--bg-sunk); border-color: var(--line-strong); }
/* On the green header the same controls wear the header's own tone. */
.kopf .wortmarke,
.kopf .thema,
.kopf .gestaltung-knopf { color: var(--on-brand); }
.kopf .thema:hover,
.kopf .gestaltung-knopf:hover {
    background: rgb(255 255 255 / .12);
    border-color: rgb(255 255 255 / .28);
}
/* Without this the inline-flex above would beat the hidden attribute, and a
   control that cannot work would still be on the screen. */
.thema[hidden] { display: none; }
.gestaltung-knopf[hidden] { display: none; }
.thema-zeichen { display: inline-flex; }
.thema-zeichen svg { width: 22px; height: 22px; fill: currentColor; }

/* The pair travels as one element, so a look that lays the header out on a
   grid places two controls in one cell instead of fighting over it. */
.kopf-tasten {
    flex: none;
    display: inline-flex;
    align-items: center;
}
/* C or M — the look that is running, not the one the press would give. */
.gestaltung-zeichen {
    font-size: var(--t-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
}


/* ------------------------------- 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 {
        gap: var(--s2);
        padding-left: var(--s2);
        padding-right: var(--s2);
    }
    .wortmarke { gap: var(--s1); }
}
/* Der dritte Teil dieser Ausnahme steht in `app-inhalt.css`: .kopf-konto wird
   dort erklärt, und die spätere Datei gewinnt. */

/* --------------------------------------------------- the persistent view head */
.ansicht-kopf[hidden] { display: none; }

/* One German sentence saying what is on the screen. It replaces the view
   heading, the subtitle and the margins under them — about 84 pixels restating
   what the highlighted nav item says.

   It scrolls away with the page, at Georg's word: a count is read once, and 44
   pinned pixels under a 52-pixel pinned header took a fifth of a phone screen
   away from the animals for the whole of a 1420-animal list. The header is
   still pinned; that was asked for separately.

   It sits above .ansicht-kopf as a child of <body>, which it needed while it
   was pinned. Nothing depends on that now. */
.ergebnis-leiste {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: 0 var(--rand);
    background: var(--bg-bar);
    border-bottom: 1px solid var(--line);
}
/* Without this the flex above would beat the hidden attribute, and the shelter
   list would carry an empty bar it has no sentence for. */
.ergebnis-leiste[hidden] { display: none; }

.ergebnis {
    font-size: var(--t-sm);
    font-weight: 400;
    line-height: 1.4;
    color: var(--ink-2);
    margin-right: auto;
    font-variant-numeric: tabular-nums;
}
.ergebnis-zahl { color: var(--ink); font-weight: 600; }

/* The search line under the result sentence, above the chip row (OP189). The
   field used to hide behind the Filter button below 1024; the button is gone,
   so the field is simply there, at every width. */
.kopf-suche {
    max-width: var(--spalte);
    margin: 0 auto;
    padding: var(--s2) var(--s3) 0;
}

.such-feld {
    font-family: inherit;
    /* 16px is a hard floor: below it iOS Safari zooms the viewport on focus,
       which produces horizontal scrolling and blocks the deploy. */
    font-size: var(--t-base);
    color: var(--ink);
    background: var(--bg-sunk);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-control);
    padding: 0 var(--s3);
    height: 44px;
    width: 100%;
}
.such-feld::placeholder { color: var(--ink-3); opacity: 1; }

/* Every noun in the sentence is a chip carrying a × that removes that one
   filter. */
.chip {
    font-family: inherit;
    font-size: inherit;
    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; }

/* --------------------------------------------------------- the pill strips */
.streifen {
    display: flex;
    gap: var(--s1);
    /* No vertical padding: the pill's 44-pixel target already carries 5 pixels
       of transparent border above and below its paint, so a row that adds 12
       more spends 24 pixels on nothing — twice over at desktop, where there
       are two rows. */
    padding: 0 var(--rand);
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--rand);
}
.streifen::-webkit-scrollbar { display: none; }
.streifen:empty { display: none; }

/* The shelter list's location row is two rows, because they answer two
   different questions: where in Austria, and then the two lists that are not
   shelters at all. Both scroll as one, so the second row's indent still lines
   up with the first province after a thumb has pushed the row sideways.

   No row gap: every pill already carries five transparent pixels above and
   below its paint, so the two rows sit ten apart without adding any. */
.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 — see shelterPillPlatzhalter. */
.streifen-platzhalter { visibility: hidden; pointer-events: none; }

/* Each head strip sits beside its category word — Vermittlung, Tierart,
   Bundesland — because three bare rows of pills read as one confusing pile.
   The row is bound to the column the tiles use: pills never run further right
   than the tiles end, and scrolling clips at that edge. */
.kopf-zeile {
    display: flex;
    align-items: flex-start;
    max-width: var(--spalte);
    margin: 0 auto;
    padding: 0 var(--s3);
}
.kopf-zeile[hidden] { display: none; }
/* `.pill`'s sum again: 8 of padding for the ring, 8 back as margin, so the
   pills stand where a bare padding-left: 0 would put them. */
.kopf-zeile .streifen {
    flex: 1;
    min-width: 0;
    padding-left: var(--s2);
    padding-right: var(--s2);
    scroll-padding-inline: var(--s2);
    margin-left: calc(-1 * var(--s2));
}
.streifen-titel {
    flex: none;
    width: 5rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: 0.015em;
    color: var(--ink-3);
}

/* ------------------------------------------------------------ the chip row */
/* Five questions in one line that scrolls sideways (OP189). It replaced the
   Filter button, the separate filter view and the two pill strips, which
   wrapped to about 450 pixels at 360; the head above the tiles is the search
   line plus one 48-pixel row now. The chips are pills, so the 44-pixel target,
   the 34-pixel paint and the solid chosen state come from the capsule rules
   below. */
.chip-bereich {
    position: relative;
    max-width: var(--spalte);
    margin: 0 auto;
}
.chip-leiste {
    display: flex;
    gap: var(--s1);
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    /* `.pill`'s sum: 15 of padding for the ring, 8 back as margin, so the
       border box lands on 7 and the paint on --s3, level with the search field.
       It was 7 against the ring's 8 and the first chip's ring was a cut arc. */
    padding-inline: calc(var(--s3) + 3px);
    margin-inline-start: -8px;
    /* The snap measures from the scrollport, so it has to be told the inset or
       it undoes it: the row came to rest 15 pixels along and the first chip's
       paint sat at -3 instead of 12, half off the screen. Seen in a browser at
       360; it had been 7 pixels out the same way since the chips were built. */
    scroll-padding-inline: calc(var(--s3) + 3px);
}
.chip-leiste::-webkit-scrollbar { display: none; }

/* The phone's layout switch, which this look does not have: two layouts under
   700 pixels are Steckbrief's own thing since 2026-08-04. The element stands in
   every page's markup and filter.js only fills it where <html> says the look has
   both, so this is the belt to that brace — a look that never answered the class
   would show two unstyled buttons the day that flag was set by mistake. */
.handy-wahl, .handy-wort { display: none; }

.frage-pfeil { font-size: 0.75em; color: var(--ink-3); }
.pill.active .frage-pfeil { color: inherit; }

/* The panel under a chip: transient like an open select. filter.js sets its
   left edge to the pressed chip's, clamped to the container's own width, so the
   width here has to stay under that — 336 is a 360-pixel screen minus the page
   inset on both sides, and the clamp then has 24 pixels to play with. It was
   220 at its narrowest, which is a menu of German province names with counts
   after them squeezed into two thirds of the room it had.

   One width for every question rather than one per content, so the panel is the
   same object wherever it opens. The strong hairline is the whole edge — the
   site has no drop shadows, on purpose. */
.chip-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 25;
    width: min(336px, calc(100vw - 2 * var(--s3)));
    max-height: min(60vh, 420px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    /* Two pixels, so a row is its own thing without the list turning into a
       column of separate buttons. */
    gap: 2px;
    background: var(--bg-bar);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-control);
    padding: var(--s2);
}
/* Without this the flex above would beat the hidden attribute and the panel
   would stand open under a chip nobody pressed. */
.chip-panel[hidden] { display: none; }

.panel-titel {
    font-size: var(--t-sm);
    font-weight: 500;
    letter-spacing: 0.015em;
    color: var(--ink-3);
    padding: var(--s1) var(--s3) var(--s2);
}

/* One choice per row, its count in the label's own brackets, and the row itself
   the size of a menu entry rather than of a hint: it was 13px type in 44
   pixels, and "the drop downs are too small" is what that reads as. 16px in 48,
   with the side padding raised to match. */
.panel-wahl {
    font-family: inherit;
    font-size: var(--t-base);
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    text-align: left;
    padding: 0 var(--s3);
    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); }
/* The chosen row is marked twice over, because it was marked once: a green word
   among black ones is the one signal a reader who cannot separate those two
   colours does not get. A bar down the left edge and a tick far right say the
   same thing in shape. */
.panel-wahl.aktiv {
    color: var(--brand);
    font-weight: 600;
    box-shadow: inset 2px 0 0 0 var(--brand);
}
.panel-wahl.aktiv::after {
    content: '\2713';   /* a tick — written as its number, so the mark cannot
                           depend on how a browser guessed this file's encoding */
    margin-left: auto;
    padding-left: var(--s2);
    font-size: var(--t-md);
    line-height: 1;
}

/* The tap target stays 44 pixels; the painted pill is 34. A transparent 5px
   border plus `background-clip: padding-box` keeps the fill and the outline off
   that border, so the thing a thumb hits is unchanged and the thing an eye sees
   is smaller than it — but only a little. It was a 10px border round a 24-pixel
   paint carrying 12px type, and Georg's words for that row were "too small,
   hardly readable". The fill is the page itself rather than the sunk tone, and
   the edge is the hairline rather than the strong rule — only the chosen pill
   is solid, which is the whole job of the row.

   Three other rules subtract this border width to line a strip's first paint up
   with the text above it — `.chip-leiste` twice and `main .streifen` — and two
   comments count the clear space it leaves above and below. All of them moved
   from 10 to 5 with it; a border changed on its own puts every pill row on the
   site a few pixels off its own left edge.

   Each of those rows is also a scroll container and clips at its padding box,
   so each has to hold the focus ring too: `:focus-visible` reaches 8 past the
   border box — 2 offset, 2 outline, 4 halo. A scrolling pill row therefore
   needs 8 of inline padding for the ring while its first pill's border box
   stays 5 short of the text edge for the paint, and the difference comes back
   as a negative inline-start margin. The three rules below only apply it. */
.pill {
    font-family: inherit;
    font-size: var(--t-control);
    min-height: 44px;
    border: 5px solid transparent;
    padding: 0 var(--s3);
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    flex: none;
    scroll-snap-align: start;
    white-space: nowrap;
    background: var(--bg);
    /* After the shorthand, never before it: `background` resets this to
       border-box, and then the fill paints under the transparent border and the
       pill is 44 pixels of colour again. */
    background-clip: padding-box;
    color: var(--ink-2);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    /* The fill and the ring follow the padding box, whose corner radius is
       this minus the 5px border — 17px, half the 34px paint, a full capsule.
       Writing the paint radius here directly squares the corners off. The 22
       is unchanged from the 10px border on purpose: half of 24 plus 10 and half
       of 34 plus 5 are the same number. */
    border-radius: 22px;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
/* Hover and selected stop being one rule: they were the same declaration, so a
   pill under the pointer was indistinguishable from the pill that is on. */
.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); }

/* ------------------------------------------- a chip that carries an answer */
/* A filled chip is two buttons wearing one capsule: the word reopens the panel
   to change the answer, the × clears the question. A button inside a button is
   invalid markup, so it has to be two.

   It used to make them look like one by pulling the × back 18 pixels over the
   word's transparent border and squaring the two inner corners, and Georg's
   word for the result was ugly. Two reasons it was: the halves overlapped
   rather than met, so the join sat wherever the paints happened to land; and
   every declaration of it was one class deep and written ABOVE `.pill`, which
   is one class deep too and therefore won on order alone — the × was drawn at
   12px instead of 17, kept padding it had asked to drop, and wore the full
   capsule on both ends. Hence this block sitting after `.pill` with every
   selector in it two classes deep: neither trap can come back quietly.

   The halves meet instead of overlapping. Each drops the transparent border on
   the side that faces the other, so the two paints touch with nothing between
   them and the outer ends keep the full capsule. */
.frage-paar { display: inline-flex; flex: none; }

.frage-paar .frage-chip {
    border-right-width: 0;
    padding-right: var(--s2);
    border-radius: 22px 0 0 22px;
}

/* The × half, and it draws the one hairline of the join — in the label's own
   tone, so the line reads as part of the object rather than as a crack in it.
   --on-brand is the cream on the green in Papier and the near-black on the
   mint in Abend: clearly visible in both, loud in neither, and it needs no
   colour of its own. Symmetric padding inside a 44-pixel target puts the glyph
   in the middle of its own paint, and the glyph is the large size, because at
   the pill's own 14px an × is a speck. */
.frage-paar .frage-x {
    border-left-width: 0;
    min-width: 44px;
    padding: 0 var(--s2);
    justify-content: center;
    border-radius: 0 22px 22px 0;
    font-size: var(--t-lg);
    line-height: 1;
    box-shadow: inset 1px 0 0 0 var(--on-brand);
}

/* Hover is the ink edge every chosen pill wears, minus the side that is the
   join: the whole point of the rebuild is that nothing runs down the middle of
   the capsule but the one hairline. */
.frage-paar .frage-chip:hover {
    box-shadow: inset 0 1px 0 0 var(--ink), inset 0 -1px 0 0 var(--ink),
                inset 1px 0 0 0 var(--ink);
}
.frage-paar .frage-x:hover {
    box-shadow: inset 1px 0 0 0 var(--on-brand), inset 0 1px 0 0 var(--ink),
                inset 0 -1px 0 0 var(--ink), inset -1px 0 0 0 var(--ink);
}

/* ------------------------------------------------- Vermittlung vs. Fundtiere */
/* The one row on the site where a pill is not a narrowing but a choice between
   two different questions, and where one of the three is always pressed. It sits
   above the species row, drawn only where the list actually holds found animals,
   so a site with none looks exactly as it did before this existed. */
.fund-streifen { padding-bottom: 0; }
/* The found-animal pill carries the amber edge even when it is not the pressed
   one: the row has to say at a glance that its middle entry is a different kind
   of thing, not a third species. */
.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);
}

/* ------------------------------------------------------------------ buttons */
.btn {
    font-family: inherit;
    font-size: var(--t-sm);
    font-weight: 600;
    min-height: 44px;
    padding: 0 var(--s4);
    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 button clothes — the browser
       underlines it, and no real button on the site is underlined (OP104). */
    text-decoration: none;
}
.btn-primary { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.btn-primary:hover { background: var(--bg-sunk); color: var(--brand); }
.btn-rand { background: none; color: var(--brand); border-color: var(--line-strong); }
.btn-rand:hover { background: var(--bg-sunk); }

.btn-more {
    font-family: inherit;
    display: block;
    margin: var(--s5) auto 0;
    min-height: 44px;
    padding: 0 var(--s5);
    background: none;
    color: var(--brand);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-control);
    font-size: var(--t-sm);
    font-weight: 600;
    cursor: pointer;
}
.btn-more:hover { background: var(--bg-sunk); }

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

/* Inside main the page padding is already the left edge; without this the
   strips on one shelter's page and on the shelter list would carry that inset a
   second time and start to the right of the text above them. Pills line up on
   the left, never indented, never centred. `.pill`'s sum: 8 of padding for the
   ring, 8 + 5 back as margin so the paint lands on the text edge. */
main .streifen {
    padding: 0 var(--s2);
    scroll-padding-inline: var(--s2);
    margin-left: calc(-1 * (var(--s2) + 5px));
}

/* The head above ends on a pill's own clear space — five pixels since the pill
   grew — and that is not enough of it: the first heading sat hard against the
   row above. */
.ansicht-kopf:not([hidden]) ~ main { padding-top: var(--s3); }

/* ------------------------------------------------------- the welcome page */
/* The front door leads with what the site is about: a big warm greeting in the
   brand green, the live count as a strong line rather than a footnote, two
   buttons, the newest arrivals in the same tiles as everywhere else, and then
   the four ways in. The prose keeps its 62-character measure; the tiles and
   the way cards take the full column. */
.willkommen { padding-top: var(--s4); }

.willkommen-titel {
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--brand);
    margin-bottom: var(--s2);
}
.willkommen-zahlen {
    font-size: var(--t-lg);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--s3);
}
/* Title and count on the left, the four short lines beside them once there is
   room — see the 1024 block. On a phone they simply stack. */
.willkommen-kopf { margin-bottom: var(--s5); }

/* Short lines, not prose — but the measure is still a reading measure. */
.willkommen-punkte {
    max-width: 62ch;
    color: var(--ink-2);
    padding-left: var(--s4);
}
.willkommen-punkte li { margin-bottom: var(--s2); }
.willkommen-punkte li:last-child { margin-bottom: 0; }

/* "Frisch eingezogen" — four mixed arrivals, filled in once they have loaded,
   and a refresh beside the heading that deals four different ones. The section
   is simply absent while they load or when nothing arrived. */
.willkommen-neu-zeile {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
}
.willkommen-neu {
    font-size: var(--t-lg);
    font-weight: 600;
    letter-spacing: -0.015em;
}
.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(--brand);
    cursor: pointer;
}
.neu-mischen:hover { background: var(--bg-sunk); }
.neu-mischen svg { width: 20px; height: 20px; }

/* One column on a phone, two once there is room. Each is a real anchor with a
   real address, so it can be middle-clicked and read by a crawler. */
.willkommen-wege {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s3);
    /* Clear air under the arrival tiles: without it the four cards sat hard
       against the strip and read as its continuation. */
    margin-top: var(--s6);
}
.weg {
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    padding: var(--s3);
    background: var(--bg-sunk);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-control);
    text-decoration: none;
    min-height: 44px;
}
.weg:hover { background: var(--bg-bar); border-color: var(--ink-3); }
.weg-zeichen { flex: none; display: inline-flex; padding-top: 2px; color: var(--brand); }
.weg-zeichen svg { width: 22px; height: 22px; fill: currentColor; }
.weg-wort { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.weg-titel { font-size: var(--t-md); font-weight: 600; color: var(--brand); }
.weg-text { font-size: var(--t-sm); color: var(--ink-2); }