/* ============================================================================
   startseite.css — A-154
   ----------------------------------------------------------------------------
   Der Stil der Startseite, bis Build 318 als 43-KB-Block in index.html.
   Geprueft wie beim Skriptteil: keine Ersetzung des Workers fasst diesen
   Block an.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { margin: 0; padding: 0; }

    :root {
      --shadow-deep: rgba(74,72,69,0.22);
    }

    /* A-1384 (03.10.2026: „Es ist inkonsistent. Am besten zum Text
       hinsliden"): hier stand scroll-behavior:auto - die Startseite baut
       ihre Abschnitte per Skript, und der Sprung beim LADEN sollte sofort
       sitzen. Das erledigen jetzt startseite.js (behavior 'instant') und
       gemeinsam.js (ankerNachziehen, ebenfalls instant). Klicks innerhalb
       der Seite gleiten wie auf jeder Unterseite (style.css). */
    body { font-family: 'Source Sans 3', sans-serif; background: var(--cream); color: var(--text); font-size: 17px; line-height: 1.75; opacity: 0; transition: opacity 0.15s; }

    /* ── NAV ── */

    /* ── HERO ── */
    .hero {
      min-height: 100vh; display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
      /* A-472: vierte Abschrift der Kopfhoehe. Der Held schiebt seinen Inhalt
         unter der Leiste hervor — also gegen die gemessene Leiste, nicht
         gegen eine Zahl, die nur bei Standard stimmt. */
      padding-top: var(--kopf-hoehe, 68px);
      /* A-087: war eine einzelne Flaeche, waehrend jede Unterseite einen
         Verlauf hat. Derselbe Verlauf wie dort — sichtbar ist er nur, solange
         kein Hero-Bild hinterlegt ist, und dann traegt er die ganze Seite. */
      background: var(--hero-verlauf);
    }

    /* Hero background image (set via admin) */
    .hero-bg {
      position: absolute; inset: 0; background-size: cover; background-position: center;
    }
    /* A-094: Der Schleier dunkelt das Hero-FOTO ab, damit der goldene Text
       darauf lesbar bleibt. Ohne Foto liegt er auf dem Verlauf und macht aus
       ihm eine gleichmaessig dunkle Flaeche — deshalb sah der Hero der
       Startseite anders aus als jeder Unterseiten-Hero, obwohl beide denselben
       Verlauf benutzen. Er wird jetzt serverseitig stummgeschaltet, solange
       kein Hero-Bild hinterlegt ist. */
    .hero-overlay {
      position: absolute; inset: 0;
      background: rgba(20, 18, 17, 0.75);
    }

    /* Decorative paw prints - removed */
    .hero-paw {
      position: absolute; font-size: 6rem; opacity: 0.05; pointer-events: none;
      filter: blur(1px);
    }
    .hero-paw:nth-child(1) { top: 10%; right: 8%; transform: rotate(20deg); }
    .hero-paw:nth-child(2) { bottom: 15%; left: 5%; transform: rotate(-15deg); font-size: 4rem; }

    .hero-content {
      position: relative; z-index: 2; text-align: center; color: white;
      padding: 3rem 2rem; max-width: 820px;
    }

    .hero-eyebrow {
      font-size: 0.72rem; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase;
      color: var(--rose-gold); margin-bottom: 2rem;
      display: flex; align-items: center; justify-content: center; gap: 1rem;
    }
    .hero-eyebrow::before, .hero-eyebrow::after {
      content: ''; display: block; width: 32px; height: 1px; background: var(--rose-gold); opacity: 0.5;
    }

    .hero-title {
      font-family: 'Cormorant Garamond', serif;
      /* A-1414: auch nach der Fensterhoehe. Am 1366x768-Laptop (Torstens
         Mutter) fuellte ein langer Zuchtname in vier Zeilen den ganzen
         Bildschirm. Bei 1920x1080 bleibt es bei 6,5rem. */
      font-size: clamp(3rem, min(8vw, 10vh), 6.5rem);
      font-weight: 300; line-height: 1.05; margin-bottom: 0.5rem;
      letter-spacing: -0.02em;
      color: var(--amber-light);
    }
    .hero-title em { font-style: italic; color: var(--amber-light); font-weight: 300; }

    .hero-tagline {
      font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
      font-size: clamp(1.1rem, 2.5vw, 1.5rem); color: rgba(255,255,255,0.65);
      margin-bottom: 3rem; letter-spacing: 0.02em;
    }

    .hero-quote {
      font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(1rem, 2vw, 1.25rem);
      color: rgba(255,255,255,0.5); max-width: 500px; margin: 0 auto 3rem;
      line-height: 1.6; padding-top: 2rem;
      border-top: 1px solid rgba(255,255,255,0.12);
    }

    .hero-eyebrow, .hero-title {
      text-shadow: 0 2px 3px rgba(0,0,0,1), 0 0 18px rgba(0,0,0,0.9), 0 4px 10px rgba(0,0,0,0.8);
      -webkit-text-stroke: 0.6px rgba(0,0,0,0.5);
    }
    .hero-tagline, .hero-quote {
      text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    }

    .hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
    /* A-1465: beide Knoepfe mit dem Stift geleert - die Reihe faellt weg,
       sonst bliebe ihr Abstand stehen. Im Bearbeiten-Modus bleibt sie, dort
       stehen die geleerten Knoepfe als Platzhalter zum Wiederfuellen.
       !important, weil die Vorlagen (style.css) .hero-cta mit hoeherem
       Gewicht auf flex setzen. */
    html:not([data-be="an"]) .hero-cta:not(:has(> a:not([hidden]))) { display: none !important; }
    .btn {
      display: inline-block; padding: 0.9rem 2.25rem; border-radius: 2px;
      font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
      text-decoration: none; transition: all 0.25s; border: none; cursor: pointer;
      font-family: 'Source Sans 3', sans-serif;
    }
    /* A-096: stand als einziges Element im Hero auf einem festen Grau —
       #7A7670 ist der Wert, den --amber im Standardthema hat. In jedem anderen
       Thema blieb der Knopf deshalb grau, waehrend Titel, Zierlinie und
       Zierzeile die Themenfarbe annahmen. Auch der Schatten beim Ueberfahren
       trug eine feste Farbe (ein Braunton aus einer frueheren Fassung). */
    .btn-warm { background: var(--amber); color: var(--auf-amber, #1a1a1a); }
    .btn-warm:hover { background: var(--amber-dark); color: var(--auf-amber-dark, #ffffff); transform: translateY(-2px); box-shadow: 0 8px 24px var(--shadow); }
    .btn-ghost { background: transparent; color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.3); }
    .btn-ghost:hover { border-color: rgba(255,255,255,0.7); color: white; }

    .hero-scroll {
      position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
      color: rgba(255,255,255,0.3); font-size: 0.65rem; letter-spacing: 0.2em;
      text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
      animation: float 2.5s ease-in-out infinite;
    }
    .hero-scroll::after { content: '↓'; font-size: 1rem; }
    @keyframes float { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }

    /* ── SECTIONS ── */
    section { padding: 7rem 2rem; }
    .container { max-width: 1160px; margin: 0 auto; }
    /* A-1351: die Raster-Abschnitte nehmen die Breite des Designs
       (--raster-breite, style.css); Text-Abschnitte bleiben bei 1160px. */
    #katzen > .container, #deckkatzen > .container, #ruhestand > .container,
    #familie > .container, #sucht-zuhause > .container, #welpen > .container,
    #galerie > .container, #news-teaser > .container, #preise > .container {
      max-width: var(--raster-breite, 1160px);
    }
    /* A-1414: bei Vollbild wachsen auch die Text-Abschnitte (Rasse, Ueber
       uns, Kontakt) mit, aber nur bis 1480px; die Absaetze darin enden bei
       75ch (gemessen etwa 85 Zeichen, bei 80ch waren es 92), der
       Abschnittstext unter der Ueberschrift bei 46rem. Mehr ist nicht mehr
       lesbar. Die Raster-Abschnitte oben schlagen das (ID). */
    html[data-breite="voll"] .container { max-width: 1480px; }
    html[data-breite="voll"] .container p { max-width: 75ch; }
    html[data-breite="voll"] .section-lead { max-width: 46rem; }

    .section-label {
      font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--rose-gold); margin-bottom: 0.75rem;
    }
    .section-title {
      font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem, 4vw, 3.5rem);
      font-weight: 300; line-height: 1.15; color: var(--amber-dark); margin-bottom: 1rem;
    }
    .section-title em { font-style: italic; }
    .section-lead { font-size: 1.05rem; color: var(--text-soft); max-width: 540px; margin-bottom: 3.5rem; line-height: 1.8; }
    .divider { width: 40px; height: 1px; background: var(--rose-gold); margin: 1.5rem 0; opacity: 0.6; }

    /* ── ÜBER DIE RASSE ── */
    #rasse { background: var(--warm-white); }

    /* A-1103: Führt eine Zucht MEHRERE Rassen, baut der Worker den Abschnitt
       neu: ein Aufklapper je Rasse, der erste offen. Torstens Satz an die
       Züchterin: „so stehen alle Informationen auf der Startseite, aber man
       wird nicht komplett erschlagen."
       Die Blöcke sind bewusst ruhig gehalten — eine Zeile, ein Zeichen, und
       erst beim Öffnen Bild und Text. Wer eine Rasse führt, sieht davon
       nichts: dort bleibt der alte Abschnitt mit dem großen Bild. */
    .rasse-block {
      border-bottom: 1px solid var(--border);
      max-width: 52rem; margin-inline: auto;
    }
    .rasse-block:first-of-type { border-top: 1px solid var(--border); }
    .rasse-block-kopf {
      list-style: none; cursor: pointer;
      display: flex; align-items: center; gap: 0.75rem;
      padding: 1.15rem 0.25rem;
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 400;
      color: var(--amber-dark);
    }
    .rasse-block-kopf::-webkit-details-marker { display: none; }
    /* Das Zeichen dreht sich beim Öffnen. Keine Schrift, kein Bild: ein
       gedrehtes Quadrat aus zwei Rändern, damit es in jedem Thema die
       Farbe der Überschrift trägt. */
    .rasse-block-kopf::before {
      content: ''; flex: none; width: 0.5rem; height: 0.5rem;
      border-right: 2px solid var(--rose-gold); border-bottom: 2px solid var(--rose-gold);
      transform: rotate(-45deg); transition: transform 0.2s ease;
      margin-left: 0.15rem;
    }
    .rasse-block[open] > .rasse-block-kopf::before { transform: rotate(45deg); }
    .rasse-block-kopf:hover { color: var(--rose-gold); }
    .rasse-block-inhalt {
      display: grid; grid-template-columns: 240px 1fr; gap: 2rem;
      align-items: start; padding: 0 0.25rem 1.75rem;
    }
    .rasse-bild { border-radius: 2px; overflow: hidden; background: var(--cream-dark); }
    .rasse-bild img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
    .rasse-block-text p { color: var(--text-soft); margin-bottom: 1rem; }
    .rasse-block-text p:last-child { margin-bottom: 0; }
    /* ── A-1235: OHNE BILD TRÄGT DER TEXT DIE GANZE BREITE ──────────────
       Diese Regel gab es seit dem Rassenblock, und sie hat nie gegriffen.
       Sie fragt, ob es das Bild-ELEMENT gibt — der Worker setzt es aber
       IMMER, nur mit `hidden`, wenn kein Bild hochgeladen ist. Also war die
       Antwort immer „ja, gibt es", das Raster blieb zweispaltig, und weil
       ein verstecktes Element keine Rasterzelle belegt, rutschte der Text
       in die 240 Pixel schmale BILDspalte. Die 1fr daneben blieben leer.

       Gemessen am 25.09.2026 auf einer Kundenseite bei 1600 Pixeln
       Fensterbreite: Textspalte 240 von 832 Pixeln, vier Wörter je Zeile,
       aufgeklappt 1341 Pixel hoch für 1235 Zeichen. Der Kommentar von
       damals hat den Fehler vorhergesagt, nur seitenverkehrt — das leere
       Feld stand rechts statt links.

       Betroffen waren zwei laufende Zuchten mit zusammen vier Blöcken;
       alle anderen führen gar keinen Rassenblock.

       Die sechs anderen `:has()`-Regeln dieses Projekts schreiben
       `:not([hidden])` mit (style.css, hero-overlay). Diese eine hatte es
       vergessen. */
    .rasse-block-inhalt:not(:has(.rasse-bild:not([hidden]))) { grid-template-columns: 1fr; }
    @media (max-width: 700px) {
      .rasse-block-inhalt { grid-template-columns: 1fr; gap: 1.25rem; }
      .rasse-bild img { aspect-ratio: 4/3; }
    }

    .rasse-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
    /* A-1461: ohne Bild steht der Text allein, in Lesebreite statt in einer
       halben Spalte neben einer leeren Flaeche (setzeLeereBildspalten). Im
       Bearbeiten-Modus erscheint die Bildhuelle darueber. */
    .rasse-grid.ohne-bild, .ueber-grid.ohne-bild { grid-template-columns: 1fr; gap: 2rem; max-width: 760px; margin: 0 auto; }

    .rasse-image-wrap {
      position: relative;
    }
    .rasse-image {
      aspect-ratio: 3/4; background: var(--cream-dark); border-radius: 2px;
      overflow: hidden; position: relative;
    }
    .rasse-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .rasse-placeholder {
      width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
      font-size: 6rem; color: var(--border);
      background: linear-gradient(135deg, var(--cream-dark), var(--border));
    }
    .rasse-image-accent {
      position: absolute; bottom: -1.5rem; right: -1.5rem;
      width: 60%; aspect-ratio: 1; background: var(--cream-dark);
      border-radius: 2px; z-index: -1; opacity: 0.5;
    }

    .rasse-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 3rem; }
    .fact {
      padding: 1.25rem; background: var(--cream-dark); border-radius: 2px;
      border-left: 2px solid var(--rose-gold);
    }
    .fact-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.3rem; }
    .fact-value { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; color: var(--amber-dark); }

    /* ── KATZEN ── */
    /* A-391: siehe style.css — gemessen statt geraten. */
    /* A-1183: das Sprachband kommt dazu — auch diese Zeile ist eine zweite
       Fassung derselben Regel aus style.css und gewinnt hier. */
    section { scroll-margin-top: calc(var(--kopf-hoehe, 68px) + var(--sprachband-hoehe, 0px) + var(--laufband-hoehe, 0px) + 12px); }
    /* A-1366: ganze Abschnitte bündig unter den Leisten, siehe style.css. */
    section[id] { scroll-margin-top: calc(var(--kopf-hoehe, 68px) + var(--sprachband-hoehe, 0px) + var(--laufband-hoehe, 0px)); }
    nav { border-bottom: none; }
    #katzen { background: var(--cream); }
    #deckkatzen { background: var(--warm-white); }

    /* A-1105: Das Aussehen der Tierkarte steht jetzt in tierkarte.css.
       Grund: die eigene Seite „Zuhause gesucht" (A-1102) baut dieselben
       Karten, laedt aber nicht startseite.css — ihre Fotos standen deshalb
       unbeschnitten und die Karten untereinander. Beide Seiten laden nun
       dieselbe Datei; abgeschrieben waere es zweimal zu pflegen. */

    /* ── WELPEN ── */
    #welpen { background: var(--cream); }
    /* Alle Sektionen wechseln sich zwischen warm-white und cream ab; der News-
       Teaser hatte als einziger keinen Hintergrund und fiel damit auf die
       Seitenfarbe zurueck — dadurch fehlte die Kante zur Galerie. */
    #news-teaser { background: var(--warm-white); }
    /* A-1480: der Wechsel nach der sichtbaren Folge (startseite.js,
       abschnitteFaerben). Schlaegt die Farben je Kennung oben, deshalb
       !important - die Kennungen haben die hoehere Spezifitaet. „a" ist
       hellweiss wie der erste Abschnitt der festen Folge (#rasse), so bleibt
       eine Startseite in der Vorgabe-Reihenfolge farbgleich. */
    section[data-ton="a"] { background: var(--warm-white) !important; }
    section[data-ton="b"] { background: var(--cream) !important; }

    .litter-card { background: var(--warm-white); border-radius: 2px; overflow: hidden; box-shadow: 0 2px 20px var(--shadow); margin-bottom: 2.5rem; }
    .litter-top {
      background: var(--hero-2); color: white; padding: 1.75rem 2rem;
      display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
    }
    .litter-name { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 300; }
    /* Datum war Teil derselben Zeile und brach mitten im Datum um */
    .litter-datum { display: block; font-family: 'Source Sans 3', sans-serif; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; margin-top: 0.2rem; }
    .litter-badge {
      font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
      padding: 0.35rem 0.85rem; border-radius: 1px;
    }
    .badge-available { background: var(--badge-available); color: white; }
    .badge-reserved { background: var(--badge-reserved); color: white; }
    .badge-upcoming { background: var(--amber-light); color: white; }

    .litter-body { padding: 2rem; }
    .litter-parents { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
    .litter-parent { font-size: 0.9rem; color: var(--text-soft); }
    .litter-parent strong { color: var(--amber-dark); font-weight: 600; }

    .kitten-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
    /* A-1429 (Build 1208): Torsten, 06.10.2026: „auf vollmodus ist babajewo
       startseite nicht zentriert". Bei voller Breite (1905 px) legte
       auto-fill 10 Spalten an, Babajewos 7 Kitten standen links, rechts
       538 px leer. Im Vollmodus: nur so viele Spalten wie Kitten, hoechstens
       200 px breit, mittig. */
    html[data-breite="voll"] .kitten-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 200px)); justify-content: center; }
    /* A-111, A-823: ein schmales Band zwischen Katern und Kitten statt eines
       Kastens am Ende der Kitten - Haarlinien oben und unten, kein Rahmen,
       der Betrag eine Stufe kleiner. Die eingeschlossenen Punkte stehen in
       einer Zeile, mit Punkten getrennt; Text und Adulte sind mehrzeilig. */
    .preise-band { padding: 0; }
    .preise-band .container { padding-top: 0; padding-bottom: 0; }
    .preis-box {
      max-width: 640px; margin: 0 auto; padding: 1.6rem 1rem;
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center;
    }
    .preis-box-titel { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rose-gold); margin-bottom: 0.5rem; }
    .preis-box-betrag { font-family: 'Cormorant Garamond', serif; font-size: 1.9rem; font-weight: 600; color: var(--amber-dark); margin-bottom: 0.6rem; }
    .preis-box-liste { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; line-height: 1.8; color: var(--text-soft); display: flex; flex-wrap: wrap; justify-content: center; gap: 0 0.4rem; }
    .preis-box-liste li + li::before { content: "·"; margin-right: 0.4rem; color: var(--text-muted); }
    .preis-box-text { margin: 0.8rem auto 0; max-width: 520px; font-size: 0.92rem; line-height: 1.6; color: var(--text-soft); white-space: pre-line; }
    .preis-box-adulte { margin: 0.8rem auto 0; max-width: 520px; font-size: 0.88rem; line-height: 1.6; color: var(--text-muted); white-space: pre-line; }
    .kitten-card { background: var(--cream); border-radius: 2px; overflow: hidden; text-align: center; transition: transform 0.3s; display: flex; flex-direction: column; }
    .kitten-card:hover { transform: translateY(-4px); }
    .kitten-photo { aspect-ratio: 1; overflow: hidden; background: linear-gradient(135deg, var(--cream-dark), var(--border)); }
    .kitten-photo img { width: 100%; height: 100%; object-fit: cover; }
    .kitten-dots { display: flex; justify-content: center; gap: 5px; padding: 0.4rem 0 0.1rem; }
    .kitten-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); cursor: pointer; transition: background 0.2s; display: inline-block; }
    .kitten-dot.active, .kitten-dot:hover { background: var(--amber-dark); }
    .kitten-photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: rgba(139,94,60,0.2); }
    .kitten-info { padding: 0.85rem; display: flex; flex-direction: column; flex: 1; }
    .kitten-name { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; color: var(--amber-dark); margin-bottom: 0.2rem;
      min-height: 2.6em; display: flex; align-items: center; justify-content: center; }
    .kitten-detail { font-size: 0.7rem; color: var(--text-muted); line-height: 1.5; }
    .litter-note { font-size: 0.88rem; color: var(--text); line-height: 1.65; margin: 0.25rem 0 1.1rem; white-space: pre-line; max-width: 46rem; }   /* A-1351: Fliesstext bleibt schmal, auch in breiten Wurfkarten */
    .kitten-ems { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 0.66rem; letter-spacing: 0.05em; color: var(--rose-gold); }
    /* A-1257: .kitten-status steht jetzt in style.css — die eigene Seite
       eines Kittens braucht dieselbe Plakette, laedt diese Datei aber nicht. */

    /* ── GALERIE ── */
    /* A-086: Der Abschnitt war als einziger dunkel — ein Fremdkoerper zwischen
       lauter hellen Flaechen, und im Farbwechsel blieb er grau, waehrend alles
       andere die Themenfarbe annahm. Jetzt hell wie die uebrigen Abschnitte.
       Damit muessen auch Ueberschrift, Vorspann und die Bedienelemente
       darunter umgestellt werden: sie waren auf hellen Text auf dunklem Grund
       gerechnet und waeren sonst kaum noch zu lesen. */
    /* Ohne die Kanten ging der Abschnitt in den Nachbarn auf — er ist hell wie
       sie, und bei einer Zucht ohne Fotos steht darin nur die Ueberschrift.
       Die Haarlinien machen ihn wieder als eigenen Block erkennbar. */
    #galerie {
      background: var(--cream-dark); padding: 7rem 2rem;
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    }
    #galerie .section-title { color: var(--amber-dark); }
    #galerie .section-lead { color: var(--text-soft); }
    #galerie .section-label { color: var(--rose-gold); }
    #galerie .divider { background: var(--rose-gold); }

    .gallery-grid { display: grid; grid-template-columns: repeat(var(--galerie-spalten, 4), 1fr); gap: 10px; grid-auto-flow: dense; }   /* A-1351: 5 Spalten in breiten Designs ab 1700px */
    /* MOSAIK: jede vierte Kachel belegt 2x2 Felder. Das Raster bleibt exakt
       (eine doppelte Kachel ist genau zwei Spalten plus Abstand hoch), aber der
       Rhythmus ist unregelmaessig statt Schachbrett. grid-auto-flow:dense fuellt
       die Luecken, die dabei entstehen, mit den naechsten kleinen Kacheln. */
    .gallery-item.gross { grid-column: span 2; grid-row: span 2; }

    /* ── A-128: DREI RASTERARTEN ──────────────────────────────────────────
       Der Stil kommt aus settings.galerieStil und steht als data-stil am
       Raster. Kein Wert heisst `raster` — der heutige Stand. Ein Deploy darf
       die Galerie eines Mandanten nicht umbauen, ohne dass jemand etwas
       angefasst hat. */
    /* Gleichmass: alle Kacheln gleich gross, Bild fuellt und schneidet ab.
       Kein Blur-Fill noetig, weil keine Leerflaeche entsteht. */
    .gallery-grid[data-stil="gleichmass"] { grid-template-columns: repeat(var(--galerie-spalten, 4), 1fr); }
    .gallery-grid[data-stil="gleichmass"] .gallery-item.gross { grid-column: span 1; grid-row: span 1; }
    .gallery-grid[data-stil="gleichmass"] .gallery-item img { object-fit: cover; }
    .gallery-grid[data-stil="gleichmass"] .gallery-item.pf::before { display: none; }

    /* Mauerwerk: Spalten statt Raster, jedes Bild behaelt sein Verhaeltnis.
       `break-inside` haelt eine Kachel zusammen; ohne das zerreisst der Browser
       sie am Spaltenende. Das Seitenverhaeltnis setzt das Script aus den beim
       Hochladen gespeicherten Massen — fehlen sie (Videos, aeltere Eintraege),
       bleibt die Kachel quadratisch. */
    .gallery-grid[data-stil="mauerwerk"] {
      display: block; column-count: var(--galerie-spalten, 4); column-gap: 10px;
    }
    .gallery-grid[data-stil="mauerwerk"] .gallery-item {
      break-inside: avoid; margin-bottom: 10px; aspect-ratio: 1;
    }
    .gallery-grid[data-stil="mauerwerk"] .gallery-item[style*="--vh"] { aspect-ratio: var(--vh); }
    .gallery-grid[data-stil="mauerwerk"] .gallery-item.gross { grid-column: auto; grid-row: auto; }
    .gallery-grid[data-stil="mauerwerk"] .gallery-item img { object-fit: cover; }
    .gallery-grid[data-stil="mauerwerk"] .gallery-item.pf::before { display: none; }
    @media (max-width: 900px) { .gallery-grid[data-stil="mauerwerk"] { column-count: 3; } }
    @media (max-width: 600px) { .gallery-grid[data-stil="mauerwerk"] { column-count: 2; } }

    /* ── A-314: Torstens Galerie-Demo (16.08.) ─────────────────────────────
       Demo 1 "Mauerwerk" doppelte den A-128-Stil — uebernommen wurde nur
       seine Gleit-Animation: die Kacheln gleiten beim Scrollen abwechselnd
       von links, unten und rechts herein. Die Klassen vergibt das Script
       (nur bei diesem Stil); ohne Script bleibt alles sichtbar. */
    .gallery-grid[data-stil="mauerwerk"] .gallery-item.gleit {
      opacity: 0; transform: translateY(26px) scale(.985);
      transition: opacity .65s cubic-bezier(.2,.7,.3,1), transform .65s cubic-bezier(.2,.7,.3,1);
    }
    .gallery-grid[data-stil="mauerwerk"] .gallery-item.gleit-links { transform: translate(-28px,18px) scale(.985); }
    .gallery-grid[data-stil="mauerwerk"] .gallery-item.gleit-rechts { transform: translate(28px,18px) scale(.985); }
    .gallery-grid[data-stil="mauerwerk"] .gallery-item.gleit-da { opacity: 1; transform: none; }

    /* LAUFBAND (Demo 2): waagerechtes Band mit Rastpunkten — am Handy
       wischen, am PC fuehren die Pfeile im Bandfuss (Script). */
    .gallery-grid[data-stil="laufband"] {
      display: flex; gap: 10px; overflow-x: auto;
      scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin;
    }
    .gallery-grid[data-stil="laufband"] .gallery-item {
      flex: 0 0 min(74vw, 340px); height: 250px; aspect-ratio: auto;
      scroll-snap-align: center;
    }
    .gallery-grid[data-stil="laufband"] .gallery-item img { object-fit: cover; }
    .gallery-grid[data-stil="laufband"] .gallery-item.pf::before { display: none; }
    #galerie-bandfuss {
      display: flex; justify-content: space-between; align-items: center;
      gap: 12px; color: var(--text-muted); font-size: 0.85rem; margin-top: 0.4rem;
    }
    .band-knopf {
      font: inherit; background: none; border: 1px solid var(--border);
      border-radius: 99px; width: 36px; height: 36px; cursor: pointer; color: var(--text);
    }
    .band-knopf:hover { border-color: var(--amber); color: var(--amber-dark); }
    .band-knopf:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

    /* GROSSBILD / "Buehne" (Demo 3): ein grosses Bild, darunter die
       Vorschauleiste; das neue Bild schiebt das alte seitlich heraus. */
    #galerie-buehne {
      position: relative; aspect-ratio: 16/10; overflow: hidden;
      border-radius: 2px; background: var(--card-bg); margin-bottom: 10px; cursor: pointer;
    }
    #galerie-buehne .buehne-bild {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
      transform: translateX(100%); transition: transform .5s cubic-bezier(.3,.75,.25,1);
    }
    #galerie-buehne .buehne-bild.da { transform: none; }
    #galerie-buehne .buehne-bild.weg { transform: translateX(-100%); }
    .gallery-grid[data-stil="grossbild"] { display: flex; flex-wrap: wrap; gap: 10px; }
    .gallery-grid[data-stil="grossbild"] .gallery-item {
      flex: 0 0 82px; height: 58px; aspect-ratio: auto; opacity: .55;
      border: 2px solid transparent; border-radius: 3px;
      transition: opacity .2s, border-color .2s;
    }
    .gallery-grid[data-stil="grossbild"] .gallery-item.buehne-aktiv { opacity: 1; border-color: var(--amber); }
    .gallery-grid[data-stil="grossbild"] .gallery-item img { object-fit: cover; }
    .gallery-grid[data-stil="grossbild"] .gallery-item.pf::before { display: none; }
    .gallery-grid[data-stil="grossbild"] .gallery-overlay { display: none; }
    @media (prefers-reduced-motion: reduce) {
      .gallery-grid[data-stil="mauerwerk"] .gallery-item.gleit { opacity: 1; transform: none; transition: none; }
      #galerie-buehne .buehne-bild { transition: none; }
    }

    /* Die Kachel hebt sich jetzt vom hellen Abschnitt ab, nicht mehr vom dunklen. */
    .gallery-item { aspect-ratio: 1; overflow: hidden; border-radius: 1px; cursor: pointer; position: relative; background: var(--card-bg); }
    .gallery-item img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; transition: transform 0.5s ease; }
    .gallery-item:hover img { transform: scale(1.05); }
    /* Blur-Fill: die Leerflaeche um ein contain-Bild fuellt eine weichgezeichnete
       Kopie desselben Fotos (Prinzip wie YouTube bei Hochkant-Videos). --pf wird
       pro Bild vom Script unten gesetzt, sobald das Foto geladen ist. */
    .gallery-item.pf::before {
      content: ''; position: absolute; inset: 0;
      background-image: var(--pf); background-size: cover; background-position: center;
      filter: blur(16px) saturate(1.08); transform: scale(1.15); opacity: 0.85;
    }
    .gallery-overlay { position: absolute; inset: 0; z-index: 2; background: rgba(26,26,24,0.5); opacity: 0; transition: opacity 0.3s; display: flex; align-items: center; justify-content: center; }
    .gallery-item:hover .gallery-overlay { opacity: 1; }
    .gallery-overlay span { color: white; font-size: 1.5rem; }
    /* ── A-1199: DIE NENNUNG DES FOTOGRAFEN ──────────────────────────────
       Ein Ausstellungsfoto gehört dem Fotografen, auch wenn die eigene
       Katze darauf ist. Die Erlaubnis zur Veröffentlichung hängt fast immer
       an seiner Nennung, und die gilt für die SEITE, nicht nur für das
       Großbild — wer nur scrollt, öffnet nie eines.

       Deshalb auf der Kachel, aber leise: unten quer, gedeckter Grund,
       kleine Schrift. Sie soll lesbar sein und das Motiv nicht zerschneiden.
       z-index 3, damit sie über dem Hover-Schleier (2) bleibt; `pointer-events:none`,
       damit sie den Klick aufs Bild nicht abfängt. */
    .gallery-foto-von {
      position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
      background: rgba(26,26,24,0.55); color: rgba(255,255,255,0.92);
      font-size: 0.62rem; letter-spacing: 0.02em; line-height: 1.5;
      padding: 0.15rem 0.4rem; pointer-events: none;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .gallery-empty { color: var(--text-muted); font-style: italic; }

    /* LIGHTBOX */
    .lightbox { display: none; position: fixed; inset: 0; background: rgba(26,26,24,0.96); z-index: 999; align-items: center; justify-content: center; padding: 2rem; }
    .lightbox.active { display: flex; }
    .lightbox img { max-width: 90vw; max-height: 90vh; border-radius: 1px; object-fit: contain; }
    .lightbox-close { position: absolute; top: 1.5rem; right: 1.5rem; color: rgba(255,255,255,0.5); font-size: 1.8rem; cursor: pointer; transition: color 0.2s; }
    .lightbox-close:hover { color: white; }
    .lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: none; color: white; font-size: 2.5rem; width: 52px; height: 72px; cursor: pointer; border-radius: 2px; transition: background 0.2s; display: flex; align-items: center; justify-content: center; }
    .lightbox-prev { left: 1rem; }
    .lightbox-next { right: 1rem; }
    .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.25); }
    .lightbox-counter { position: absolute; top: 1.5rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.4); font-size: 0.8rem; }
    /* A-170: Der Umbruch-Hinweis steht jetzt in style.css — die Lightbox gibt
       es auf zwei Seiten, der Stil hatte nur eine. */

    /* ── ÜBER UNS ── */
    /* A-092: getauscht. #ueber lag als einziger Abschnitt auf dem dritten Ton
       und riss die Abwechslung cream / warm-white auseinander; der Kontakt
       darunter lag danach wieder auf cream, also zweimal derselbe Wechsel. */
    #ueber { background: var(--cream); }
    .ueber-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 6rem; align-items: center; }
    .ueber-image img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; box-shadow: 0 8px 40px var(--shadow-deep); }
    .ueber-placeholder { width: 100%; aspect-ratio: 1; background: linear-gradient(135deg, var(--cream-dark), var(--border)); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 5rem; color: var(--border); }
    /* A-1443: der Verlauf ist nur der Platzhalter. Steht ein Bild darin,
       faellt er weg - sonst steht ein rundes Logo mit durchsichtigen Ecken
       (of-flamingmoon, 07.10.2026) in einem grauen Quadrat. Ein Foto fuellt
       den Rahmen ganz (object-fit: cover), dort aendert sich nichts. */
    .ueber-placeholder:has(img) { background: none; }

    .pullquote {
      font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.3rem;
      font-weight: 300; color: var(--amber); line-height: 1.65;
      border-left: 2px solid var(--rose-gold); padding-left: 1.5rem;
      margin: 2rem 0;
    }

    /* ── KONTAKT ── */
    #kontakt { background: var(--cream-dark); }
    /* Vorher stand hier padding-bottom: 12rem — knapp 200 px Leerraum ueber dem
       Footer. Die Sektion nutzt jetzt den normalen 7rem-Rhythmus aller anderen. */
    .kontakt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; }

    .kontakt-item { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
    .kontakt-icon {
      width: 2.5rem; height: 2.5rem; background: var(--hero-2); border-radius: 50%;
      display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0;
    }
    .kontakt-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.25rem; }
    .kontakt-value { font-size: 0.95rem; color: var(--text); }
    .kontakt-value a { color: var(--amber-dark); text-decoration: none; }
    .kontakt-value a:hover { color: var(--rose-gold); }

    /* A-1438: die Erklaerung bei „allein", freundlich und gut lesbar. */
    .cf-leben-hinweis {
      margin: 0.6rem 0 0; padding: 0.7rem 0.9rem; font-size: 0.85rem; line-height: 1.55;
      background: var(--cream); border-left: 3px solid var(--rose-gold); color: var(--text);
    }
    .cf-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
    @media (max-width: 560px) { .cf-zwei { grid-template-columns: 1fr; } }
    /* A-200 (Befund 5.2/29): Die freiwilligen Zusatzfragen zugeklappt. Der
       Pfeil dreht sich statt des Standard-Dreiecks — das laeuft ueber die
       eigene Spanne, list-style bleibt aus. */
    .cf-mehr { margin-bottom: 1.25rem; border: 1px solid var(--border); border-radius: 2px; background: var(--cream); }
    .cf-mehr summary {
      cursor: pointer; list-style: none; padding: 0.75rem 1rem;
      font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; color: var(--text-muted);
      display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
    }
    .cf-mehr summary::-webkit-details-marker { display: none; }
    .cf-mehr-pfeil { transition: transform 0.2s; flex-shrink: 0; }
    .cf-mehr[open] .cf-mehr-pfeil { transform: rotate(180deg); }
    .cf-mehr[open] summary { border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
    .cf-mehr > .form-group, .cf-mehr > .cf-zwei, .cf-mehr > .cf-mehr-titel { margin-left: 1rem; margin-right: 1rem; }
    .cf-mehr > .form-group:last-child { padding-bottom: 1rem; margin-bottom: 0; }
    .cf-mehr-titel {
      font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--rose-gold); margin: 0 0 0.6rem;
    }
    .cf-mehr-titel + .form-group, .cf-mehr-titel + .cf-zwei { margin-top: 0; }
    .kontakt-form { background: var(--warm-white); padding: 2.5rem; border-radius: 2px; box-shadow: 0 4px 30px var(--shadow); }
    .form-title { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 300; color: var(--amber-dark); margin-bottom: 1.5rem; }
    .form-group { margin-bottom: 1.25rem; }
    .form-group label { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.4rem; }
    .form-group input, .form-group textarea, .form-group select {
      width: 100%; padding: 0.75rem 1rem; background: var(--cream); border: 1px solid var(--border);
      border-radius: 2px; font-family: 'Source Sans 3', sans-serif; font-size: 0.95rem; color: var(--text);
      outline: none; transition: border-color 0.2s;
    }
    .form-group input:focus, .form-group textarea:focus { border-color: var(--amber); }
    .form-group textarea { resize: vertical; min-height: 120px; }
    .form-submit {
      width: 100%; padding: 0.9rem; background: var(--hero-2); color: white; border: none;
      border-radius: 2px; font-family: 'Source Sans 3', sans-serif; font-size: 0.78rem;
      font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background 0.2s;
    }
    .form-submit:hover { background: var(--amber); }

    /* ── FOOTER ── */
    .footer-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 300; color: rgba(255,255,255,0.7); margin-bottom: 0.5rem; }
    .footer-logo em { font-style: italic; color: var(--amber-light); }
    footer p { font-size: 0.82rem; margin-top: 0.5rem; }

    /* ── EMPTY STATE ── */
    .empty { text-align: center; padding: 3rem; color: var(--text-muted); font-style: italic; font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; }

    /* ── RESPONSIVE ── */
    @media (max-width: 960px) {
      .rasse-grid, .ueber-grid { grid-template-columns: 1fr; }
      .gallery-grid { grid-template-columns: repeat(3, 1fr); }
      .kontakt-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
      .gallery-grid { grid-template-columns: repeat(2, 1fr); }
      /* Bei zwei Spalten wuerde eine doppelte Kachel die gesamte Breite fuellen
         und den Blaetterrhythmus zerreissen. */
      .gallery-item.gross { grid-column: span 1; grid-row: span 1; }
      /* .cats-grid: siehe tierkarte.css (A-1105). */
      .kitten-grid { grid-template-columns: repeat(2, 1fr); }
      section { padding: 5rem 1.25rem; }
      /* Mutter und Vater standen nebeneinander und wurden dabei gequetscht */
      .litter-parents { flex-direction: column; align-items: flex-start; gap: 0.4rem; margin-bottom: 1.5rem; }
      /* Wurfname und Datum brachen mitten im Datum um */
      .litter-top { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
      .litter-name { font-size: 1.35rem; line-height: 1.25; }
    }

    /* ── KITTEN TICKER ── */
    /* A-466: Das hier ist eine VOLLSTAENDIGE ZWEITE FASSUNG des Tickers.
       index.html laedt startseite.css NACH style.css, also gewinnt sie —
       und sie stand auf mehr als der doppelten Polsterung (0.85rem gegen
       0.4rem). Gemessen: 57 px auf der Startseite. Wer nur style.css
       schlanker macht, bekommt genau die Seite nicht schmaler, auf die
       zuerst jemand schaut.
       Die Werte hier laufen bewusst mit style.css gleich; nur die kleinere
       Schriftgroesse unten (0.75rem statt 0.85rem) bleibt der Startseite.

       A-1183: und genau deshalb steht der Zuschlag fuer das Sprachband auch
       hier. Die erste Messung nach dem Umbau zeigte das Band bei 68 und die
       Laufschrift ebenfalls bei 68 — sie lief dahinter durch, weil nur
       style.css geaendert war. Wer eine dieser beiden Fassungen anfasst,
       muss die andere mitnehmen. */
    /* A-1535 (Torsten, 13.10.2026: „Akzentfarbe überall"): A-1487 hatte das
       Band in style.css auf die abgedunkelte Akzentfarbe gestellt, diese
       Fassung blieb beim alten Grau - die Startseite war die einzige graue. */
    .kitten-ticker {
      background: color-mix(in srgb, var(--amber) 45%, #000); color: white;
      padding: 0.25rem 0; overflow: hidden;
      line-height: 1.25;
      position: sticky;
      top: calc(var(--kopf-hoehe, 68px) + var(--sprachband-hoehe, 0px));
      z-index: 90;
      cursor: default;
    }
    .kitten-ticker-track {
      display: inline-flex; align-items: center;
      white-space: nowrap;
      animation: ticker 36s linear infinite;
    }
    .kitten-ticker-track:hover { animation-play-state: paused; }
    @media (min-width: 900px) {
      .kitten-ticker-track {
        animation: ticker 30s linear infinite;
      }
    }
    @keyframes ticker {
      0% { transform: translateX(100vw); }
      100% { transform: translateX(-100%); }
    }
    /* A-817: dieselbe Abschrift wie in style.css - der Start rechnet in
       cqw, der Breite des Bandes, nicht des Fensters. Dieser Satz steht
       NACH dem aus style.css und gewinnt deshalb; ohne die Abschrift hier
       startete das Band auf der Startseite weiter am Fensterrand
       (gemessen: 1440 bei einem 1120 breiten Band). */
    @supports (width: 1cqw) {
      @keyframes ticker {
        0% { transform: translateX(100cqw); }
        100% { transform: translateX(-100%); }
      }
    }
    .ticker-item {
      display: inline-flex; align-items: center; gap: 0.5rem;
      font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em;
      text-transform: uppercase; color: rgba(255,255,255,0.9);
      padding: 0 1.5rem; text-decoration: none;
      transition: color 0.2s;
    }
    .ticker-item:hover { color: #fff; }
    a.ticker-item { cursor: pointer; }
    a.ticker-item:hover { color: var(--amber-light); }
    /* A-466: wie in style.css — beide waren groesser als die Schrift daneben. */
    .ticker-item .ticker-emoji { font-size: 0.85rem; }
    .ticker-sep { color: rgba(255,255,255,0.25); padding: 0 0.25rem; font-size: 0.95rem; }
    .ticker-badge {
      background: var(--badge-neutral); color: #fff;
      border-radius: 99px; padding: 0.1em 0.55em;
      font-size: 0.65rem; font-weight: 700; margin-left: 0.3rem;
    }
    /* Sucht-Zuhause im Orange der Katzenkarte */
    .ticker-badge-home { background: var(--badge-home); }

    /* ── NAV ADMIN GEAR ── */
    @keyframes pulse-green {
      0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); }
      50% { box-shadow: 0 4px 30px rgba(37, 211, 102, 0.7); }
    }
    .whatsapp-tooltip {
      position: absolute; right: 70px; top: 50%; transform: translateY(-50%);
      background: #1E1E1E; color: white; padding: 0.4rem 0.85rem;
      border-radius: 4px; font-size: 0.78rem; font-weight: 600;
      white-space: nowrap; opacity: 0; transition: opacity 0.2s; pointer-events: none;
    }
    .whatsapp-btn:hover .whatsapp-tooltip { opacity: 1; }
    .facebook-tooltip {
      position: absolute; right: 70px; top: 50%; transform: translateY(-50%);
      background: #1E1E1E; color: white; padding: 0.4rem 0.85rem;
      border-radius: 4px; font-size: 0.78rem; font-weight: 600;
      white-space: nowrap; opacity: 0; transition: opacity 0.2s; pointer-events: none;
    }
    .facebook-btn:hover .facebook-tooltip { opacity: 1; }

    /* ── BACK TO TOP ── */
    /* A-040: Knopf und Stil stehen jetzt in style.css und in der Fusszeile
       im Worker - eine Kopie fuer alle Seiten statt einer je Seite. */

    /* ── SCROLL ANIMATIONS ── */
    .reveal, .reveal-left, .reveal-right {
      opacity: 1; transform: none;
    }
    .reveal.visible, .reveal-left.visible, .reveal-right.visible { opacity: 1; transform: none; }
    .reveal-delay-1, .reveal-delay-2, .reveal-delay-3, .reveal-delay-4 { transition-delay: 0s; }

    /* ── KITTEN DIARY LINK ── */
    .kitten-diary-link { display: block; margin-top: 0.5rem; font-size: 0.68rem; font-weight: 600; line-height: 1.4; color: var(--rose-gold); text-decoration: none; }
    .kitten-diary-link:hover { opacity: 0.7; text-decoration: underline; }
    /* A-1105: die Abzeichen und die Zeilen der Tierkarte stehen ebenfalls in
       tierkarte.css — sie gehoeren zur Karte, nicht zur Startseite. */

    /* ── WARTELISTE ── */
    .litter-waitlist-cta { margin-top: 1.25rem; }
    .litter-waitlist-cta button { background: none; border: 1px solid var(--rose-gold); color: var(--amber-dark); border-radius: 20px; padding: 0.55rem 1.2rem; font-size: 0.82rem; font-family: inherit; cursor: pointer; letter-spacing: 0.03em; }
    .litter-waitlist-cta button:hover { background: var(--rose-gold); color: #fff; }
    .waitlist-box { background: var(--warm-white); border-radius: 4px; padding: 2.5rem 2rem; text-align: center; max-width: 560px; margin: 0 auto; }
    /* Statt einer grossen Box mitten in der Kitten-Sektion nur noch eine
       schmale Zeile; das Formular liegt im Fenster darunter. */
    .waitlist-strip { background: var(--warm-white); border-radius: 4px; padding: 1.75rem 1.5rem; text-align: center; max-width: 560px; margin: 2.5rem auto 0; }
    .btn-waitlist-open { max-width: 320px; margin: 0.5rem auto 0; }
    .wl-overlay {
      display: none; position: fixed; inset: 0; z-index: 1000;
      background: rgba(26,26,24,0.72); align-items: center; justify-content: center; padding: 1.25rem;
    }
    .wl-overlay.offen { display: flex; }
    .wl-dialog {
      position: relative; background: var(--warm-white); border-radius: 6px;
      padding: 2rem 1.75rem 1.75rem; width: 100%; max-width: 520px;
      max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    }
    .wl-close {
      position: absolute; top: 0.5rem; right: 0.6rem; background: none; border: none;
      font-size: 1.3rem; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0.35rem 0.5rem;
    }
    .wl-close:hover { color: var(--text); }
    .waitlist-headline { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; color: var(--amber-dark); margin-bottom: 0.5rem; }
    .waitlist-sub { color: var(--text-muted); font-size: 0.92rem; line-height: 1.7; margin-bottom: 0.5rem; }
    .waitlist-form { text-align: left; }
    .waitlist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; }
    .waitlist-form input[type="text"], .waitlist-form input[type="email"], .waitlist-form textarea {
      width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 2px;
      font-family: 'Source Sans 3', sans-serif; font-size: 0.9rem; background: var(--cream); color: var(--text);
    }
    .waitlist-form textarea { margin-bottom: 0.75rem; resize: vertical; }
    /* A-110 */
    .zeichen-zaehler { font-size: 0.75rem; color: var(--text-muted); text-align: right; margin: -0.4rem 0 0.75rem; }
    .zeichen-zaehler.knapp { color: var(--amber-dark); }
    .wl-litter-label { display: block; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.3rem; }
    .wl-litter-select { width: 100%; padding: 0.7rem 0.85rem; margin-bottom: 0.75rem; border: 1px solid var(--border, rgba(0,0,0,0.15)); border-radius: 4px; font-family: inherit; font-size: 0.9rem; background: var(--warm-white); color: var(--text); }
    .waitlist-catch { background: var(--cream); border: 1px dashed var(--rose-gold); border-radius: 2px; padding: 0.75rem 1rem; margin-bottom: 1rem; }
    .waitlist-catch label { display: block; font-size: 0.85rem; color: var(--text); margin-bottom: 0.4rem; font-weight: 600; }
    .waitlist-catch input { width: 100%; padding: 0.6rem 0.9rem; border: 1px solid var(--border); border-radius: 2px; font-size: 0.9rem; background: var(--warm-white); color: var(--text); }
    .btn-waitlist {
      width: 100%; background: var(--amber-dark); color: var(--auf-amber-dark, #ffffff); border: none; padding: 0.85rem;
      border-radius: 2px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
      cursor: pointer; transition: opacity 0.2s;
    }
    .btn-waitlist:hover { opacity: 0.85; }
    .btn-waitlist:disabled { opacity: 0.6; cursor: default; }
    @media (max-width: 600px) { .waitlist-grid { grid-template-columns: 1fr; } }
    /* A-1501: die neue Warteliste (Fragen der Zucht, Fotos, Code) */
    .waitlist-form input[type="tel"], .waitlist-form select:not(.wl-litter-select) {
      width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 2px;
      font-family: 'Source Sans 3', sans-serif; font-size: 0.9rem; background: var(--cream); color: var(--text);
    }
    .wl-fragen select, .wl-fragen input, .wl-fragen textarea { margin-bottom: 0.75rem; }
    .wl-frage { display: block; font-size: 0.85rem; color: var(--text); margin: 0.2rem 0 0.3rem; font-weight: 600; }
    .wl-hinweis { font-size: 0.8rem; color: var(--text-muted); line-height: 1.6; margin: -0.35rem 0 0.9rem; }
    .wl-kontakt { display: flex; gap: 1.25rem; flex-wrap: wrap; margin: 0.25rem 0 0.9rem; font-size: 0.9rem; }
    .wl-kontakt label { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
    .wl-fotos-alt { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
    .wl-foto-alt { position: relative; }
    .wl-foto-alt img { width: 72px; height: 72px; object-fit: cover; border-radius: 3px; display: block; }
    .wl-foto-alt button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: none; background: #333; color: #fff; font-size: 0.7rem; cursor: pointer; }
    .wl-danke { color: var(--amber-dark); font-size: 0.95rem; line-height: 1.6; }
    .wl-code { font-family: ui-monospace, Consolas, monospace; font-size: 1.8rem; letter-spacing: 0.15em; text-align: center; margin: 0.5rem 0 1rem; padding: 0.75rem; background: var(--cream); border: 1px dashed var(--rose-gold); border-radius: 4px; color: var(--text); }
    .wl-stand { background: var(--cream); border-left: 3px solid var(--amber-dark); border-radius: 0 4px 4px 0; padding: 0.7rem 0.9rem; margin: 0 0 1rem; }
    .wl-stand-kopf { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.2rem; }
    .wl-stand-satz { font-size: 0.95rem; color: var(--text); }
    .wl-stand-am { font-size: 0.8rem; color: var(--text-muted); }
    .wl-stand-zeile { font-size: 0.9rem; color: var(--text); margin-top: 0.4rem; white-space: pre-line; }
    .wl-stand-foto { width: 100%; max-height: 220px; object-fit: cover; border-radius: 4px; margin: 0.3rem 0 0.5rem; display: block; }
    .wl-wunsch { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.2rem 0 0.4rem; }
    .wl-wunsch-kitten { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; width: 84px; font-size: 0.8rem; text-align: center; cursor: pointer; position: relative; }
    .wl-wunsch-kitten img, .wl-wunsch-leer { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 2px solid transparent; display: flex; align-items: center; justify-content: center; background: var(--cream); }
    .wl-wunsch-kitten input { position: absolute; top: 4px; left: 10px; }
    .wl-wunsch-kitten input:checked ~ img, .wl-wunsch-kitten input:checked ~ .wl-wunsch-leer { border-color: var(--amber-dark); }
    #wl-code-eingabe { text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.75rem; }
    .wl-code-link { margin-top: 0.75rem; font-size: 0.85rem; }
    .wl-code-link a, .wl-zurueck { color: var(--amber-dark); }
    .wl-zurueck { display: block; margin: 0.9rem auto 0; background: none; border: none; font-size: 0.82rem; text-decoration: underline; cursor: pointer; font-family: inherit; }
    /* A-1495: die Liste selbst (.certs-list, .cert-item…) steht in style.css,
       sie erscheint auch auf /gesundheit. Hier nur der Klappknopf. */
    .certs-toggle { margin-top: 0.9rem; background: none; border: none; padding: 0; font-size: 0.85rem; font-weight: 600; color: var(--amber-dark); cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; }
    .certs-toggle:hover { text-decoration: underline; }
    .certs-toggle .chev { transition: transform 0.2s ease; display: inline-block; }
    .certs-toggle.open .chev { transform: rotate(180deg); }

    /* ── GALLERY CATEGORIES ── */
    .gallery-filters { display: flex; gap: 0.75rem; margin-bottom: 2rem; flex-wrap: wrap; }
    .gallery-filter {
      padding: 0.4rem 1rem; border-radius: 2px; font-size: 0.75rem; font-weight: 600;
      letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; border: none;
      background: var(--card-bg); color: var(--text-soft); transition: all 0.2s;
      border: 1px solid var(--border);
      font-family: 'Source Sans 3', sans-serif;
    }
    .gallery-filter:hover, .gallery-filter.active { background: var(--amber-dark); color: var(--card-bg); border-color: var(--amber-dark); }
    .gallery-pagination {
      display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem;
    }
    .gallery-page-btn {
      background: var(--card-bg); border: 1px solid var(--border);
      color: var(--text-soft); width: 40px; height: 40px; border-radius: 2px; font-size: 1.4rem;
      cursor: pointer; transition: background 0.2s; display: flex; align-items: center; justify-content: center;
    }
    .gallery-page-btn:hover:not([disabled]) { background: var(--cream); }
    .gallery-page-btn[disabled] { opacity: 0.35; cursor: default; }
    .gallery-page-info { color: var(--text-muted); font-size: 0.78rem; letter-spacing: 0.08em; }