@font-face {
  font-family: 'Eczar';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/eczar-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Eczar';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/eczar-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/karla-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/karla-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/newsreader-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/newsreader-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/*  Zwei Farbfassungen in einer Datei.
    Umgeschaltet wird über data-look am <html>-Element; die Wahl bleibt
    im Browser gespeichert. Achtung: NICHT data-theme verwenden — das
    belegt die Vorschau-Umgebung von Claude bereits für hell/dunkel.  */
:root,
:root[data-look="abend"]{
  --ground:#17110E; --ground-2:#201814; --ground-3:#2B211B;
  --line:#3E2F26; --line-soft:#2E231C; --line-stark:#7A6352;
  --ink:#F4EBE1; --ink-2:#D6C6B7; --ink-3:#B5A294;
  --accent:#DE8A2C; --accent-hell:#E9A855; --on-accent:#1B1109;
  --b-rot:#D24A41; --b-orange:#DE8A2C; --b-gelb:#DFBE4C;
  --b-gruen:#86A05A; --b-blau:#6390B6; --b-rosa:#D98CA5;
  --b-braun:#A8734C;
  --display:"Eczar","Iowan Old Style",Georgia,serif;
  --body:"Karla","Avenir Next","Segoe UI",system-ui,sans-serif;
  --display-w:600; --h1-w:500;
  --korn:normal; --korn-deckung:.05;
  --bildrand:color-mix(in srgb,var(--ink) 16%,transparent);
  --hero-ink:var(--ink); --hero-ink-2:var(--ink-2);
  --hero-ink-3:var(--ink-3); --hero-akzent:var(--accent-hell);
}
:root[data-look="wald"]{
  --ground:#0E1912; --ground-2:#15241A; --ground-3:#1D2F23;
  --line:#325031; --line-soft:#233823; --line-stark:#6B7C63;
  --ink:#EDF2E5; --ink-2:#C1CEB5; --ink-3:#9BAA92;
  --accent:#C2A23F; --accent-hell:#D9BC5F; --on-accent:#14180F;
  --b-rot:#CC5248; --b-orange:#D68A3A; --b-gelb:#D7BE55;
  --b-gruen:#8FAE63; --b-blau:#6E9BBE; --b-rosa:#CE8BA6;
  --b-braun:#B07E55;
  --display:"Newsreader","Iowan Old Style",Georgia,serif;
  --body:"Karla","Avenir Next","Segoe UI",system-ui,sans-serif;
  --display-w:500; --h1-w:400;
  --korn:normal; --korn-deckung:.05;
  --bildrand:color-mix(in srgb,var(--ink) 16%,transparent);
  --hero-ink:var(--ink); --hero-ink-2:var(--ink-2);
  --hero-ink-3:var(--ink-3); --hero-akzent:var(--accent-hell);
}
:root[data-look="hell"]{
  --ground:#F3EFE8; --ground-2:#EBE5DA; --ground-3:#FAF7F2;
  --line:#D6CCBB; --line-soft:#E2DACC; --line-stark:#8E7E6B;
  --ink:#241C16; --ink-2:#4E4235; --ink-3:#5A4D3F;
  --accent:#A85A0D; --accent-hell:#96500E; --on-accent:#FFF8EF;
  --b-rot:#B33A31; --b-orange:#B7701A; --b-gelb:#93790E;
  --b-gruen:#5F7A38; --b-blau:#3C6A92; --b-rosa:#A85476;
  --b-braun:#7E5230;
  --display:"Eczar","Iowan Old Style",Georgia,serif;
  --body:"Karla","Avenir Next","Segoe UI",system-ui,sans-serif;
  --display-w:600; --h1-w:500;
  --korn:multiply; --korn-deckung:.055;
  --bildrand:color-mix(in srgb,var(--ink) 22%,transparent);
  /* Auf dem Foto bleibt die Schrift hell, auch im Tageslicht. */
  --hero-ink:#F7F2E9; --hero-ink-2:#E6DCCD;
  --hero-ink-3:#BEAF9C; --hero-akzent:#EDA84F;
}
:root[data-look="beige"]{
  --ground:#EBE1CE; --ground-2:#E1D5BC; --ground-3:#F5EEE1;
  --line:#C6B597; --line-soft:#D7C8AC; --line-stark:#85745C;
  --ink:#2A2117; --ink-2:#4F4230; --ink-3:#554836;
  --accent:#9E560F; --accent-hell:#874B0A; --on-accent:#FFF8EC;
  --b-rot:#A8342B; --b-orange:#A96615; --b-gelb:#846C0B;
  --b-gruen:#556F31; --b-blau:#355F84; --b-rosa:#9B4A6B;
  --b-braun:#6F472A;
  --display:"Eczar","Iowan Old Style",Georgia,serif;
  --body:"Karla","Avenir Next","Segoe UI",system-ui,sans-serif;
  --display-w:600; --h1-w:500;
  --korn:multiply; --korn-deckung:.06;
  --bildrand:color-mix(in srgb,var(--ink) 22%,transparent);
  --hero-ink:#F7F2E9; --hero-ink-2:#E6DCCD;
  --hero-ink-3:#BEAF9C; --hero-akzent:#EDA84F;
}
:root{
  --t-xs:.78rem; --t-sm:.92rem; --t-md:1.0625rem; --t-lg:1.2rem;
  --t-xl:clamp(1.5rem,2.6vw,2rem);
  --t-2xl:clamp(1.9rem,4.2vw,2.9rem);
  --t-3xl:clamp(2.5rem,7vw,4.7rem);
  --gutter:clamp(1.25rem,5vw,4.5rem);
  --max:76rem; --read:38rem;
  /* Ein Wert für die Luft zwischen den Abschnitten. Hier schrauben,
     nicht an dreissig einzelnen Stellen. */
  --luft:clamp(1.8rem,4vw,3.2rem);
  /* Das Laufband über dem Auftakt hat eigene, in allen vier Fassungen
     gleiche Farben. Grund: Es liegt auf dem Foto, und das Foto ist
     überall dasselbe. Hell auf der dunklen Hecke, dunkle Schrift.
     kontrast.py prüft die Werte mit (FESTE_PAARE). */
  --lauf-grund:#F4EBE1; --lauf-ink:#1B1410; --lauf-punkt:#A85A0D;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--body);font-size:var(--t-md);line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

/* Korn — nimmt dem Dunkel das Digitale */
body::after{
  content:"";position:fixed;inset:0;z-index:900;pointer-events:none;
  opacity:var(--korn-deckung);mix-blend-mode:var(--korn);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Die Regel, an der es vorher gefehlt hat: nie ein Bild verzerren. */
img{max-width:100%;height:auto;display:block}
/* Ein Haarstrich an der Bildkante. Vor allem auf hellem Grund laufen sonst
   helle Bildpartien — Wolken, Schnee, weisses Fell — in die Seite aus.
   outline statt border: liegt über dem Bild und verändert keine Masse. */
.band img,.vollbild img,.tile img,.pup img,.anwesen img,.pferde img,
.media>figure>img,.breed-portrait img,.person img,.imtext img{
  outline:1px solid var(--bildrand);outline-offset:-1px}
figure{margin:0}
p{margin:0}

a{color:var(--accent-hell);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--accent-hell);outline-offset:3px;border-radius:2px}

h1,h2,h3{font-family:var(--display);font-weight:var(--display-w);
  line-height:1.08;letter-spacing:-.005em;text-wrap:balance;margin:0}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

.eyebrow{font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;display:flex;align-items:center;gap:.7em}
/* Der Strich gehört zur Beschriftung — also in deren Farbe, nicht in der
   blassen Zierlinienfarbe. Vorher war er auf hellem Grund unsichtbar. */
.eyebrow::before{content:"";width:1.8em;height:1px;background:var(--ink-3);flex:none}

.lede{font-size:clamp(1.15rem,1.9vw,1.38rem);line-height:1.55;color:var(--ink-2)}
.prose{max-width:var(--read);display:flex;flex-direction:column;gap:.95em}
.prose p{color:var(--ink-2)}

/* Sprungmarken: Ein Abschnitt muss genau dort anfangen, wo die feste
   Kopfzeile aufhört. Ist der Wert zu gross, bleibt ein Streifen des
   vorigen Abschnitts darüber stehen — auf dem iPhone gut sichtbar.
   Die Kopfzeile ist aber nicht gleich hoch: Der Name bricht um, die
   Navigation bekommt unter 900 px eine eigene Zeile, und sobald die
   Schriften geladen sind, ändert sich die Höhe noch einmal. Deshalb
   misst das Skript am Seitenende die echte Höhe und schreibt sie nach
   --kopf. Die Werte hier sind nur der Rückfall ohne JavaScript und
   nach den gemessenen Höhen gesetzt (63 / 101 / 117 px). */
:root{--kopf:63px}
section{padding-block:var(--luft);scroll-margin-top:var(--kopf)}
main#oben{scroll-margin-top:14rem}
/* .t2: die Hauptüberschrift der Welpen-Seite. Dort ist der Abschnittstitel
   die h1 der Seite, soll aber aussehen wie auf der Startseite die h2. */
h2,.t2{font-size:var(--t-2xl);margin-bottom:.95rem}
.eyebrow+h2,.eyebrow+.t2{margin-top:.85rem}

/* ── Kopfzeile ── */
.top{position:sticky;top:0;z-index:800;
  background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:blur(14px) saturate(1.1);border-bottom:1px solid var(--line-soft)}
.top-in{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.5rem);padding-block:.85rem}
.nav{margin-left:auto}  /* Navigation und Umschalter bleiben zusammen rechts */
/* Der Name ist das Zeichen der Seite — es gibt kein Logo. Deshalb mitwachsend
   gesetzt und nicht auf Lesetextgrösse. Der obere Wert ist gemessen: bei
   1440 px ergeben 1,55vw eine Schrifthöhe von 22 px und eine Namensbreite
   von 283 px — Mittelmass zwischen den ursprünglichen 16 px, die zu klein
   wirkten, und den 29 px, die zu gross wirkten. */
.mark{font-family:var(--display);font-size:clamp(1.15rem,1.55vw,1.48rem);
  font-weight:600;color:var(--ink);
  text-decoration:none;display:flex;align-items:baseline;gap:.4em;white-space:nowrap;
  letter-spacing:-.015em;line-height:1.12}
.mark .m2{color:var(--accent-hell);font-weight:var(--display-w)}
/* Dazwischen liegt die Navigation schon in ihrer eigenen Zeile, der Name
   teilt sich die obere nur noch mit dem Umschalter — dort ist am meisten
   Platz, und er darf entsprechend gross werden. */
@media (max-width:900px) and (min-width:641px){
  .mark{font-size:clamp(1.2rem,2.2vw,1.55rem)}
}
/* Schmale Fenster: der Name bricht auf zwei Zeilen um, statt kleiner zu
   werden — auf einer Zeile bliebe er sonst hinter allem anderen zurück. */
@media (max-width:640px){
  .mark{flex-direction:column;gap:0;font-size:clamp(1rem,3.6vw,1.22rem);
    line-height:1.08;letter-spacing:-.02em}
  :root{--kopf:117px}
}
.nav{display:flex;gap:clamp(.9rem,2vw,1.8rem);align-items:center}
.nav a{font-size:var(--t-sm);color:var(--ink-2);text-decoration:none;font-weight:500;
  padding-block:.3em;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}

/* Umschalter zwischen den beiden Farbfassungen */
.look{display:inline-flex;align-items:center;gap:.5em;flex:none;cursor:pointer;
  font-family:var(--body);font-size:var(--t-xs);font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-2);background:transparent;
  border:1px solid var(--line-stark);border-radius:999px;padding:.42em .85em .42em .6em;
  transition:border-color .18s,color .18s,background .18s}
.look:hover{color:var(--ink);border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent)}
.look i{width:.72em;height:.72em;border-radius:50%;flex:none;
  background:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 35%,transparent)}
@media (max-width:560px){.look{padding:.42em .7em .42em .55em;letter-spacing:.06em}}
@media (max-width:880px){.nav{gap:.95rem}}
/* Schmale Schirme: die Navigation bekommt eine eigene Zeile, statt dass
   Menüpunkte verschwinden. Keiner der fünf fällt weg.
   Die Grenze liegt bei 900 px, nicht bei den ursprünglichen 780: Mit dem
   grösser gesetzten Namen reicht der Platz darunter nicht mehr für Name,
   Navigation und Umschalter auf einer Zeile — die Navigation bräche dann
   selbst auf zwei Zeilen um. Gemessen kippt es bei 880 px, 900 lässt Luft. */
@media (max-width:900px){
  .top-in{flex-wrap:wrap;row-gap:.45rem}
  .mark{order:1}
  .look{order:2;margin-left:auto}
  .nav{order:3;width:100%;margin-left:0;justify-content:space-between;
    gap:.3rem;border-top:1px solid var(--line-soft);padding-top:.45rem}
  .nav a{font-size:.82rem;letter-spacing:-.01em}
  :root{--kopf:101px}
}

/* ── Auftakt ──
   Vollflächig, Schrift darüber. Möglich, weil das Kopfbild der bisherigen
   Website auf 21:9 erweitert wurde — der Hund sitzt rechts, links bleibt
   Hecke für den Text. Siehe werkzeug/bilder-ki/HERKUNFT.md */
.hero{position:relative;min-height:clamp(29rem,74svh,43rem);display:flex;
  align-items:center;padding-block:clamp(3rem,7vw,5rem) clamp(6rem,12vw,9rem);
  overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:66% 52%;animation:drift 30s ease-in-out infinite alternate}
/* Vom 21:9-Bild sieht ein Telefon nur ein Viertel der Breite. Deshalb
   wechselt die Seite unter 700 px auf die 16:9-Fassung: grösserer Ausschnitt,
   mehr Bildpunkte im sichtbaren Bereich. Die Ausrichtung folgt dem Kopf —
   er sitzt im breiten Bild bei 56–84 %, im schmalen bei 48–80 %. */
.hero picture{position:absolute;inset:0;display:block}
@media (min-width:701px) and (max-width:900px){ .hero-img{object-position:74% 50%} }
@media (max-width:700px){ .hero-img{object-position:71% 50%} }
@keyframes drift{from{transform:scale(1.03)}to{transform:scale(1.09)}}
@media (prefers-reduced-motion:reduce){.hero-img{animation:none;transform:scale(1.03)}}

/* Schleier: links kräftig für die Schrift, rechts offen für den Hund */
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(to right,var(--ground) 2%,color-mix(in srgb,var(--ground) 86%,transparent) 26%,
    color-mix(in srgb,var(--ground) 42%,transparent) 52%,transparent 74%),
  /* Der untere Rand läuft in den Seitengrund aus — sonst bricht das Bild
     mit einer harten Kante ab. Deckend bei 0, offen ab etwa 46 %. */
  linear-gradient(to top,var(--ground) 0,var(--ground) 4%,
    color-mix(in srgb,var(--ground) 88%,transparent) 13%,
    color-mix(in srgb,var(--ground) 52%,transparent) 27%,transparent 46%)}
/* Schmale Fenster: der Zuschnitt schiebt das helle Fell nach links unter
   die Schrift — dort braucht der Schleier mehr Deckung. */
@media (max-width:700px){
  /* Die Deckung sitzt unten, wo der Text steht — oben, beim Kopf des
     Hundes, läuft sie aus. Vorher lag sie flächig über dem ganzen Bild
     und hat ihn mit verdunkelt. */
  .hero::before{background:
    linear-gradient(to top,var(--ground) 0,var(--ground) 6%,
      color-mix(in srgb,var(--ground) 72%,transparent) 26%,
      color-mix(in srgb,var(--ground) 36%,transparent) 48%,
      color-mix(in srgb,var(--ground) 9%,transparent) 68%,transparent 84%),
    linear-gradient(to right,color-mix(in srgb,var(--ground) 40%,transparent),
      color-mix(in srgb,var(--ground) 14%,transparent) 48%,transparent 82%)}
}
/* In den hellen Fassungen bleibt die Schrift im Auftakt hell — sie liegt
   ja auf dem Foto. Der dunkle Schleier kommt von links, unten übernimmt
   der helle Seitengrund. Die Textposition ist in allen vier gleich. */
:root[data-look="hell"] .hero::before,
:root[data-look="beige"] .hero::before{background:
  /* Heller Auslauf zuoberst, damit der untere Rand sauber in die Seite
     übergeht — darunter der dunkle Schleier von links. Rechts bleibt er
     offen, deshalb ist der Hund genauso hell wie in den dunklen Fassungen. */
  linear-gradient(to top,var(--ground) 0,var(--ground) 3%,
    color-mix(in srgb,var(--ground) 62%,transparent) 8%,
    color-mix(in srgb,var(--ground) 20%,transparent) 13%,transparent 17%),
  linear-gradient(to right,rgba(24,18,13,.88) 2%,rgba(24,18,13,.72) 24%,
    rgba(24,18,13,.36) 50%,rgba(24,18,13,0) 72%)}
@media (max-width:700px){
  /* Schmal ist der Auftakt niedriger — der Textblock braucht mehr Abstand
     nach unten, sonst gerät die letzte Zeile in den hellen Auslauf. */
  .hero{padding-block:clamp(2.5rem,6vw,4rem) 10.5rem}
  /* Der Schleier bleibt über dem Hund leicht — dafür bekommt die Schrift
     einen eigenen Rand. Das trifft den Text, nicht das Foto. */
  .hero .lede, .hero-meta, .hero .eyebrow{
    text-shadow:0 1px 2px rgba(8,5,3,.95),0 1px 8px rgba(8,5,3,.9),
                0 2px 20px rgba(8,5,3,.8)}
  .hero h1{text-shadow:0 1px 3px rgba(8,5,3,.75),0 2px 12px rgba(8,5,3,.7),
                0 3px 30px rgba(8,5,3,.6)}
  :root[data-look="hell"] .hero::before,
  :root[data-look="beige"] .hero::before{background:
    /* Längerer Auslauf mit mehr Stufen — die kurze Blende erzeugte eine
       sichtbare Kante zwischen Bild und Seitengrund. */
    linear-gradient(to top,var(--ground) 0,var(--ground) 6%,
      color-mix(in srgb,var(--ground) 74%,transparent) 11%,
      color-mix(in srgb,var(--ground) 44%,transparent) 16%,
      color-mix(in srgb,var(--ground) 16%,transparent) 21%,transparent 26%),
    linear-gradient(to right,rgba(24,18,13,.46) 0,rgba(24,18,13,.25) 32%,
      rgba(24,18,13,.04) 58%,rgba(24,18,13,0) 88%),
    /* Die obere Bildhälfte bleibt frei — dort ist der Kopf des Hundes.
       Die Lesbarkeit trägt hier der Schattenrand der Schrift, nicht die
       Blende. So bleibt der Hund so hell wie möglich. */
    linear-gradient(to bottom,rgba(24,18,13,0) 0,rgba(24,18,13,0) 16%,
      rgba(24,18,13,.10) 40%,rgba(24,18,13,.25) 72%,rgba(24,18,13,.05) 88%,
      rgba(24,18,13,0) 96%)}
}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero .eyebrow{color:var(--hero-ink-2);text-shadow:0 1px 12px rgba(8,5,3,.9)}
.hero .eyebrow::before{background:var(--hero-ink-3)}
.hero h1{font-size:var(--t-3xl);font-weight:var(--h1-w);max-width:16ch;
  margin-block:.5rem .9rem;color:var(--hero-ink);text-shadow:0 2px 30px rgba(8,5,3,.65)}
/* Haarfeine Aussenkontur: hält den Titel auch dort lesbar, wo helles Fell
   direkt hinter den Buchstaben liegt. paint-order legt die Kontur hinter
   die Füllung, damit die Buchstabenform unangetastet bleibt. */
.hero h1{-webkit-text-stroke:.6px rgba(16,11,7,.5);paint-order:stroke fill}
@media (max-width:700px){ .hero h1{-webkit-text-stroke-width:.75px} }
.hero h1 em{font-style:normal;color:var(--hero-akzent)}
.hero .lede{max-width:31rem;color:var(--hero-ink);text-shadow:0 1px 18px rgba(8,5,3,.75)}
.hero-meta{text-shadow:0 1px 14px rgba(8,5,3,.85)}

/* Breitbild über die volle Breite des Abschnitts */
.vollbild{margin-block:clamp(1.1rem,2.4vw,1.7rem)}
.vollbild img{width:100%;max-height:62svh;object-fit:cover;object-position:58% 44%}
.vollbild figcaption{padding-top:.6rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.6rem;
  font-size:var(--t-sm);color:var(--hero-ink-2)}
.hero-meta b{color:var(--hero-ink);font-weight:600}

.fade-up{animation:fadeUp .85s cubic-bezier(.2,.7,.25,1) backwards}
.d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.31s}.d4{animation-delay:.44s}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){.fade-up{animation:none}}

/* ── Laufband «Wir haben Welpen» ──
   Ersetzt am 25.09.2026 das kleine Etikett oben rechts, das Ingrid zu
   unauffällig war. Ein heller Streifen, leicht schräg wie ein Klebeband
   über den oberen Rand des Auftaktbilds gelegt — ausgewählt aus drei
   Mustern (Band in der Akzentfarbe, umgekehrtes Band unter der Kopfzeile,
   dieses hier).

   Die Farben sind fest und wechseln nicht mit der Fassung (--lauf-*):
   Das Band liegt auf dem Foto, und das ist in allen vier Fassungen
   dasselbe dunkle Bild. Hell auf dunkler Hecke fällt es überall auf.

   Die Schrift steht, solange die Maus darüber ist oder der Fokus darin
   liegt. Wer im System «Bewegung reduzieren» eingestellt hat, sieht den
   Satz einmal, stehend. Einen Pause-Knopf gab es bis zum 25.09.2026; er
   ist auf Wunsch von Richard entfernt. WCAG 2.2.2 verlangt streng
   genommen eine Möglichkeit zum Anhalten auch auf Touch-Geräten — für
   eine private Seite ist das keine Pflicht, aber es ist eine bewusste
   Abweichung.

   Die Spur ist zweimal dieselbe Gruppe aus sechs Sätzen; translateX(-50%)
   schliesst deshalb nahtlos an. Sechs, weil eine Gruppe breiter sein muss
   als das Fenster, sonst läuft am Ende eine Lücke durchs Bild — bei
   1,3rem sind es rund 3300 px. Nur der allererste Satz ist für
   Screenreader lesbar, alle Kopien tragen aria-hidden. */
/* Die Schräge hebt die rechte Ecke um die halbe Breite mal tan(1,6°),
   also um 1,4vw — bei 2560 px sind das 36 px. Ohne diesen Anteil im
   Abstand stiess die Ecke ab 1920 px an die Oberkante des Auftakts und
   wurde abgeschnitten. Gemessen bleibt jetzt überall ein Rand. */
.laufband{position:absolute;left:-3%;right:-3%;top:calc(1.4vw + clamp(.6rem,1.2vw,1rem));z-index:4;
  display:flex;align-items:stretch;overflow:hidden;padding-inline:3%;
  transform:rotate(-1.6deg);background:var(--lauf-grund);color:var(--lauf-ink);
  box-shadow:0 14px 30px rgba(6,4,2,.5),0 2px 6px rgba(6,4,2,.35);
  font-family:var(--display);font-weight:600;font-size:1.3rem;line-height:1.2}
.laufband-fenster{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center;
  padding-block:.58rem;text-decoration:none;color:inherit}
.laufband-lauf{display:flex;width:max-content;animation:laufen 70s linear infinite}
.laufband-satz{display:flex;align-items:center;white-space:nowrap}
.laufband-satz i{display:inline-block;width:.42em;height:.42em;border-radius:50%;
  background:var(--lauf-punkt);margin-inline:1.3em}
@keyframes laufen{to{transform:translateX(-50%)}}
.laufband:hover .laufband-lauf,.laufband:focus-within .laufband-lauf{animation-play-state:paused}
.laufband-fenster:focus-visible{outline:2px solid currentColor;outline-offset:-4px}
/* Platz für das Band über der Vorzeile. .mit-band hängt nur am Auftakt,
   solange das Band steht — ohne Band gilt die gewohnte Polsterung. */
/* Der Zuschlag ist je Breite verschieden, weil der Text im Auftakt
   senkrecht zentriert steht und die Höhe unterschiedlich viel Luft lässt.
   Gemessen als Abstand von der Unterkante des Bands (an der linken
   Textkante, wo die Schräge am tiefsten liegt) bis zur Vorzeile:
   ab 901 px 26–29, bei 701–900 px rund 36, auf dem Telefon rund 22
   (vorher 35–41, auch das war Richard auf dem Telefon zu viel).
   Am 25.09.2026 auf Wunsch von Richard von 60 px am Bildschirm
   heruntergesetzt — die Schrift soll näher ans Band. */
.hero.mit-band{padding-top:calc(clamp(3rem,7vw,5rem) + 1.4rem + 1.4vw)}
@media (max-width:900px){.hero.mit-band{padding-top:calc(clamp(3rem,7vw,5rem) + 2.4rem + 1.4vw)}}
@media (max-width:700px){.hero.mit-band{padding-top:calc(clamp(2.5rem,6vw,4rem) + 2.2rem + 1.4vw)}}
@media (max-width:640px){.laufband{font-size:1.08rem}}
@media (prefers-reduced-motion:reduce){
  .laufband-lauf{animation:none;width:100%;justify-content:center}
  .laufband-satz[aria-hidden]{display:none}
  .laufband-satz i:last-child{display:none}
}

/* ── Zweispalter ── */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(1.5rem,3.2vw,2.8rem);align-items:start}
.split.flip>*:first-child{order:2}
@media (max-width:880px){.split{grid-template-columns:1fr;gap:1.5rem}
  /* Die Spiegelung bleibt: Überschrift und Text zuerst, Bilder danach. */
  .split.flip>*:first-child{order:2}}
/* Lange Textspalten hinterlassen sonst ein leeres Feld daneben */
@media (min-width:881px){
  .media{position:sticky;top:4.5rem;display:flex;flex-direction:column;gap:1.1rem}
}
.media{display:flex;flex-direction:column;gap:1.1rem}
.media>figure{width:100%}
.media>figure>img{width:100%}

/* 66ch, nicht 46. Der Wert steuert die Zeilenlänge der Bildunterschriften,
   und angenehm sind 60 bis 75 Zeichen. Mit 46ch brachen fünf Unterschriften
   auf zwei Zeilen um, obwohl sie unter ihrem Bild auf eine gepasst hätten —
   die längste brauchte 477 px bei 487 px Bildbreite und wurde bei 341 px
   abgeschnitten.

   Warum 61 und nicht mehr: `ch` ist die Breite der Null, und in einer
   Proportionalschrift passen in dieselbe Breite deutlich mehr Zeichen.
   Gemessen (echte Zeilenkästen per Range ausgelesen, nicht geschätzt):
   66ch liessen Zeilen mit 82 Zeichen zu, 61ch treffen die 75 — die
   Obergrenze des angenehmen Bereichs. Unterschriften bis 75 Zeichen
   stehen damit auf einer Zeile, längere brechen ausgewogen um.
   Dieser Wert gilt für ALLE Bildunterschriften. Vorher stand er dreimal
   zusätzlich lokal (.band, .vollbild, .person) — dreimal dasselbe Symptom
   geflickt, statt hier zu rechnen. Wer ihn ändert, ändert ihn hier. */
figcaption{margin-top:.5rem;font-size:var(--t-xs);color:var(--ink-3);
  line-height:1.5;max-width:min(100%,61ch);text-wrap:balance}

.quote{border-left:2px solid var(--accent);padding-left:1.3rem;margin-top:1.2rem;
  font-family:var(--display);font-size:var(--t-lg);line-height:1.4;
  color:var(--ink);max-width:30ch}

/* ── Über mich: Porträt + Anwesen ── */
/* Das Porträt stand früher als 170-px-Marke neben seiner Bildunterschrift,
   weil die Vorlage aus dem Abzug der alten Website nur 198 px breit war.
   Seit dem 16.09.2026 liegt ein richtiges Bild vor (1151 px, quer): Es nimmt
   die Spaltenbreite ein, die Bildunterschrift steht darunter wie bei jedem
   anderen Bild der Seite. */
.person{margin-bottom:clamp(1.4rem,2.6vw,1.9rem);max-width:var(--read)}
.person img{width:100%}
/* Eigener Wert, weil hier die Schrift grösser ist (t-sm statt t-xs) und
   ein ch damit breiter — 62ch treffen hier eine andere Pixelzahl als in
   der Grundregel. Gemessen passt Ingrids Unterschrift damit auf eine Zeile. */
.person figcaption{margin-top:.55rem;font-size:var(--t-sm);color:var(--ink-2);
  max-width:min(100%,62ch)}
.anwesen{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
/* Die beiden Ponys nebeneinander, gleiche Kachelform wie das Anwesen */
.pferde{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.pferde figure{overflow:hidden;aspect-ratio:4/3;background:var(--ground-3)}
.pferde img{width:100%;height:100%;object-fit:cover}
.anwesen figure{overflow:hidden;aspect-ratio:1.3;background:var(--ground-3)}
.anwesen img{width:100%;height:100%;object-fit:cover}
@media (max-width:520px){.anwesen{grid-template-columns:repeat(3,1fr);gap:.4rem}}

/* ── Welpen ── */
.litter{background:var(--ground-2);border-block:1px solid var(--line-soft)}
.head2{display:grid;grid-template-columns:1fr minmax(0,30rem);
  gap:clamp(1.2rem,2.6vw,2.4rem);align-items:end;margin-bottom:clamp(1.1rem,2.4vw,1.8rem)}
/* Einspaltig stehen Titel und Einleitung untereinander. Der Spaltenabstand
   wird dann zum Zeilenabstand, und zusammen mit dem Rand unter dem h2 waren
   das 34 px — auf dem Telefon rutschten die Bilder darunter aus dem Blick. */
@media (max-width:880px){.head2{grid-template-columns:1fr;align-items:start;row-gap:.8rem}
  .head2 h2,.head2 .t2{margin-bottom:0}}

/* Knopf unter dem Anriss auf der Startseite, der zur Welpen-Seite führt. */
.weiter{margin-top:clamp(1.1rem,2.4vw,1.7rem)}

/* Flex statt fester Spaltenzahl: Die Zellen wachsen mit und füllen jede
   Zeile ganz aus — egal ob sechs, sieben oder acht Welpen im Wurf sind. */
.ribbons{display:flex;flex-wrap:wrap;gap:1px;
  background:var(--line);border:1px solid var(--line);margin-block:1.2rem}
.ribbon{flex:1 1 7rem;background:var(--ground-2);padding:1rem .9rem 1.1rem;
  display:flex;flex-direction:column;gap:.5rem}
/* Die Farbe ist der Inhalt dieser Zeile — der Balken darf nicht zaghaft sein. */
.ribbon i{display:block;width:100%;height:9px;border-radius:2px;background:var(--c)}
.ribbon b{font-family:var(--display);font-weight:600;font-size:.98rem;color:var(--ink);line-height:1}
@media (max-width:640px){.ribbon{flex-basis:5.5rem;padding:.85rem .7rem .95rem}}

/* Lückenloses Raster: gleiche Kachelform, Spaltenzahl teilt die Anzahl */
.grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.5rem,1.1vw,1rem)}
@media (max-width:860px){.grid6{grid-template-columns:repeat(2,1fr)}}
.tile{aspect-ratio:4/3;overflow:hidden;background:var(--ground-3)}
.tile img{width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.7,.25,1)}
.tile:hover img{transform:scale(1.045)}
@media (prefers-reduced-motion:reduce){.tile img{transition:none}}

/* ── T-Wurf: Viererraster mit Lightbox ──
   Kleine Vorschaubilder, je vier Weibchen und vier Rüden; ein Klick
   öffnet die grosse Fassung. Vier teilt sich in 4 und 2 Spalten ohne
   Lücke. Ohne JavaScript ist jedes Bild ein gewöhnlicher Link auf die
   grosse Datei. */
.twurf{margin-bottom:clamp(1.6rem,3.2vw,2.6rem)}
.twurf h3{font-family:var(--display);font-weight:var(--display-w);font-size:var(--t-lg);
  color:var(--ink);margin:1.3rem 0 .7rem}
.twurf h3:first-of-type{margin-top:.2rem}
.twurf-hinweis{font-size:var(--t-sm);color:var(--ink-3);margin:0 0 .4rem;text-wrap:balance}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.5rem,1.1vw,1rem)}
@media (max-width:640px){.grid4{grid-template-columns:repeat(2,1fr)}}
.zoom{display:block;position:relative;aspect-ratio:5/3;overflow:hidden;
  background:var(--ground-3);cursor:zoom-in}
.zoom img{width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.7,.25,1)}
.zoom:hover img{transform:scale(1.045)}
.zoom:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Lupe unten rechts: sagt, dass man klicken kann. Feste Farben, denn sie
   liegt auf dem Foto. */
.zoom::after{content:"";position:absolute;right:.45rem;bottom:.45rem;width:1.9rem;height:1.9rem;
  border-radius:50%;background:rgba(20,14,10,.62) no-repeat center/1.05rem
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4EBE1' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){.zoom img{transition:none}}

/* ── T-Wurf: «Akku leer!», drei Bilder in einer Reihe ──
   Gleich hoch über flex-grow im Verhältnis der Seitenverhältnisse. Auf
   dem Telefon das Querbild allein, die zwei Hochformate darunter. */
.akku{margin:0 0 clamp(1.6rem,3.2vw,2.6rem)}
.akku-reihe{--g:clamp(.5rem,1.1vw,1rem);display:flex;gap:var(--g);align-items:flex-start}
.akku-bild{flex:var(--ar) 1 0;min-width:0}
.akku .zoom{aspect-ratio:var(--ar)}
@media (max-width:640px){
  .akku-reihe{flex-wrap:wrap}
  .akku-bild:first-child{flex-basis:100%}
}

/* ── T-Wurf: Gruppenbild und Video als Paar, linksbündig ──
   Beide hochkant, nebeneinander und gleich hoch: flex-grow im Verhältnis
   der Seitenverhältnisse, flex-basis 0. Die Höhe des Paars ist über
   max-width gedeckelt (72svh, höchstens 40rem), sonst stünden zwei
   Hochformate am breiten Bildschirm höher als das Fenster. Auf dem
   Telefon untereinander; nebeneinander wären beide nur rund 170 px breit. */
.t-medien{--g:clamp(.5rem,1.1vw,1rem);
  max-width:calc(min(72svh,40rem) * (var(--ar-v) + var(--ar-f)) + var(--g));
  margin:0 0 clamp(1.6rem,3.2vw,2.6rem)}
.paar{display:flex;gap:var(--g);align-items:flex-start}
/* Das Quervideo darunter ist so breit wie das Paar. Höchstens rund 840 px,
   das Video hat 848 — es wird also nie hochskaliert. */
.t-quer{margin:clamp(1rem,2vw,1.5rem) 0 0}
.t-quer .t-video{aspect-ratio:var(--ar-q)}
.paar figure{margin:0;min-width:0}
.paar-video{flex:var(--ar-v) 1 0}
.paar-foto{flex:var(--ar-f) 1 0}
.t-video{display:block;width:100%;height:auto;aspect-ratio:var(--ar-v);background:var(--ground-3)}
.paar .zoom{aspect-ratio:var(--ar-f)}
@media (max-width:640px){
  .t-medien{max-width:none}
  .paar{flex-direction:column}
  .paar-video{flex:none;width:min(100%,calc(72svh * var(--ar-v)))}
  .paar-foto{flex:none;width:min(100%,calc(72svh * var(--ar-f)))}
}

/* Die Lightbox selbst: ein natives <dialog>. Es fängt den Fokus, schliesst
   mit Esc und gibt den Fokus beim Schliessen zurück. Farben fest, weil der
   Grund immer die dunkle Abdeckung ist. */
.lightbox{padding:0;border:0;margin:0;background:transparent;color:#F4EBE1;
  width:100vw;height:100dvh;max-width:none;max-height:none}
.lightbox[open]{display:grid;place-items:center}
.lightbox::backdrop{background:rgba(10,7,5,.92)}
.lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:.7rem}
.lightbox img{display:block;width:auto;height:auto;max-width:94vw;max-height:82dvh;
  box-shadow:0 20px 50px rgba(0,0,0,.5)}
.lightbox figcaption{font-size:var(--t-sm);letter-spacing:.04em;color:#D9CDBF}
.lightbox button{position:fixed;display:grid;place-items:center;width:3rem;height:3rem;
  border-radius:50%;cursor:pointer;font:600 1.35rem/1 var(--body);color:#F4EBE1;
  background:rgba(20,14,10,.6);border:1px solid rgba(244,235,225,.35)}
.lightbox button:hover{background:rgba(20,14,10,.85);border-color:#F4EBE1}
.lightbox button:focus-visible{outline:2px solid #F4EBE1;outline-offset:3px}
.lb-zu{top:1rem;right:1rem;font-size:1.9rem;font-weight:400}
.lb-vor{left:1rem;top:calc(50% - 1.5rem)}
.lb-nach{right:1rem;top:calc(50% - 1.5rem)}
@media (max-width:640px){.lb-vor,.lb-nach{top:auto;bottom:1rem}}
html.lb-offen{overflow:hidden}

/* Wurf-Streifen: waagrecht, darum nie eine Lücke */
.strip{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.5rem,1.1vw,1rem)}
/* Der Hinweis steht nur da, wo auch gewischt werden kann — die
   Medienabfrage weiter unten blendet ihn ein. Reihenfolge beachten:
   die allgemeine Regel muss vorher stehen, sonst gewinnt sie. */
.wischen{display:none;align-items:center;gap:.45em;margin-top:.2rem;
  font-size:var(--t-xs);color:var(--ink-3);letter-spacing:.08em;
  text-transform:uppercase;font-weight:600}

@media (max-width:900px){
  /* Wischbarer Streifen mit Einrastpunkten. overscroll-behavior verhindert,
     dass die Wischgeste am Ende auf die Seite oder den Zurück-Schritt
     des Browsers überspringt. */
  .strip{display:flex;overflow-x:auto;padding-bottom:.9rem;
    scroll-snap-type:x mandatory;scrollbar-width:thin;
    overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scroll-padding-inline:0}
  .pup{flex:0 0 clamp(10rem,38vw,13rem);scroll-snap-align:start}
  .strip:focus-visible{outline:2px solid var(--accent-hell);outline-offset:4px}
  .wischen{display:flex}
}
.pup img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--ground-3)}
.pup figcaption{margin-top:.5rem;display:flex;flex-direction:column;gap:.1rem}
.pup b{font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--ink)}
.pup span{font-size:var(--t-xs);color:var(--ink-3)}

/* Archivstreifen für die kleinen Altbilder */
.archiv{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.5rem,1.1vw,1rem);
  max-width:46rem;margin-top:1.2rem}
.archiv .tile{aspect-ratio:4/3}
@media (max-width:520px){.archiv{grid-template-columns:1fr 1fr}.archiv figure:last-child{display:none}}

/* Breitbild über die volle Spaltenbreite */
.band{margin-block:clamp(1.8rem,3.6vw,2.8rem) 0}
/* Bild mitten im Fliesstext — bricht die lange Rassebeschreibung auf.
   Auf Lesespaltenbreite begrenzt, damit die Kante am Text ausgerichtet ist. */
.imtext{max-width:var(--read);margin-block:clamp(1.1rem,2.4vw,1.6rem)}
.imtext img{width:100%}
.band img{width:100%}
.band figcaption{margin-top:.5rem}

/* «Welpen sind keine Ware» */
.siegel{display:flex;gap:clamp(1.2rem,3vw,2rem);align-items:center;flex-wrap:wrap;
  margin-top:clamp(1.4rem,2.8vw,2rem);padding-top:clamp(1.2rem,2.2vw,1.6rem);
  border-top:1px solid var(--line-soft)}
/* 240 px am oberen Ende — mehr gibt die Vorlage nicht her (480 px, also
   die doppelte Anzeigebreite). Der Textblock daneben ist auf 38rem
   gedeckelt und bleibt bei rund 74 Zeichen pro Zeile; bei 1440 px
   Fensterbreite sind daneben immer noch knapp 200 px frei (gemessen). */
.siegel img{width:clamp(8.5rem,18vw,15rem);flex:none;
  transition:transform .25s cubic-bezier(.2,.7,.25,1)}
.siegel a:hover img{transform:scale(1.04)}
.siegel div{flex:1 1 22rem;min-width:15rem;max-width:38rem}
.siegel p{color:var(--ink-2);font-size:var(--t-sm)}
.siegel p+p{margin-top:.7em}

/* Verbände */
.verbaende{margin-top:clamp(2.4rem,5vw,4rem);padding-top:clamp(1.6rem,3vw,2.4rem);
  border-top:1px solid var(--line-soft)}
.verbaende>p.vor{color:var(--ink-2);font-size:var(--t-sm);max-width:var(--read);margin-top:.6rem}
/* Flex mit flex-grow statt festen Spalten: drei Zeichen füllen jede Breite
   selbst aus und brechen ohne Lücke um. */
.marken{list-style:none;margin:clamp(1.4rem,3vw,2rem) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:clamp(1rem,2.5vw,1.8rem)}
.marken li{flex:1 1 14rem}
.marken a{display:flex;align-items:center;gap:1rem;height:100%;
  padding:1rem 1.1rem;background:var(--ground-3);border:1px solid var(--line);
  text-decoration:none;color:inherit;
  transition:border-color .18s,transform .18s}
.marken a:hover{border-color:var(--line-stark);transform:translateY(-1px)}
/* Das KTR-Zeichen ist einfarbig und folgt über currentColor der Fassung;
   VDH und FCI behalten ihre eigenen Farben. Alle drei stehen im gleich
   breiten Feld, damit die Beschriftungen auf einer Linie beginnen — die
   VDH-Raute ist liegend und füllt es in der Breite, die beiden runden
   Zeichen in der Höhe. */
.marken .zeichen{flex:none;display:grid;place-items:center;width:4.4rem;height:3.6rem}
.marken .zeichen svg,.marken .zeichen img{display:block;
  width:auto;height:auto;max-width:100%;max-height:100%}
.marken .zeichen.ktr{color:var(--ink-2)}
.marken .zeichen.ktr svg,.marken .zeichen.fci img{height:100%}
.marken .zeichen.vdh svg{width:100%}
.marken .wer{display:block;font-size:var(--t-xs);color:var(--ink-3);line-height:1.45;
  text-wrap:balance}
.marken .wer b{display:block;font-family:var(--display);font-size:var(--t-sm);
  font-weight:600;color:var(--ink);letter-spacing:.02em;margin-bottom:.15em}
.wege{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:1.2rem;font-size:var(--t-sm)}
/* Unter 40rem reichen zwei Felder nicht mehr nebeneinander, ohne dass das
   dritte allein und breiter darunter steht — dann alle drei gleich breit. */
@media (max-width:40rem){.marken li{flex:1 1 100%}}

/* ── Steckbrief ── */
.facts{margin:1.1rem 0 0;border-top:1px solid var(--line-soft)}
.facts div{display:grid;grid-template-columns:minmax(8.5rem,auto) 1fr;gap:1.2rem;
  padding-block:.85rem;border-bottom:1px solid var(--line-soft);
  font-size:var(--t-sm);align-items:baseline}
.facts dt{color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;
  font-size:var(--t-xs);font-weight:600}
.facts dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums}

.hinweis{margin-top:1.6rem;padding:1.1rem 1.3rem;border:1px solid var(--line);
  background:var(--ground-3);font-size:var(--t-sm);color:var(--ink-2);max-width:var(--read)}
.hinweis b{color:var(--ink);font-family:var(--display);font-weight:600}

/* ── Kontakt ── */
.contact{background:var(--ground-2);border-top:1px solid var(--line-soft)}
.card{background:var(--ground-3);border:1px solid var(--line-stark);
  padding:clamp(1.5rem,3vw,2.2rem);display:flex;flex-direction:column;gap:1.3rem}
.card .name{font-family:var(--display);font-size:1.3rem;font-weight:600}
.card address{font-style:normal;color:var(--ink-2);line-height:1.65}
.card .row{display:flex;flex-direction:column;gap:.15rem}
.card .row span{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600}
.btn{display:inline-flex;align-items:center;gap:.6em;align-self:flex-start;
  background:var(--accent);color:var(--on-accent);font-weight:600;font-size:var(--t-sm);
  padding:.72em 1.25em;border-radius:2px;text-decoration:none;
  transition:background .18s,transform .18s}
.btn:hover{background:var(--accent-hell);color:var(--on-accent);transform:translateY(-1px)}

/* ── Karte: Zwei-Klick-Lösung ──
   Solange niemand klickt, geht nichts an Google. Erst der Knopf setzt das
   iframe ein. Ohne das wäre die Aussage in der Datenschutzerklärung falsch,
   die Seite lade nichts von fremden Servern nach. */
.karte{margin-top:clamp(1.6rem,3vw,2.4rem)}
.karte-rahmen{position:relative;overflow:hidden;
  border:1px solid var(--line-stark);background:var(--ground-3)}
.karte-rahmen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Das Standbild vor dem Klick: ein Bildschirmfoto aus Google Maps.
   Es steht VOLLSTÄNDIG da — nicht als Hintergrund mit object-fit:cover.
   Der Grund ist nicht Geschmack: Unten im Bild steht die Namensnennung von
   Google, und die darf weder weggeschnitten noch verdeckt werden. Deshalb
   liegt die Tafel mit Anschrift und Knopf auch UNTER dem Bild und nicht
   darüber, und deshalb hat der Rahmen kein aspect-ratio — sein Verhältnis
   ergibt sich aus dem Bild. */
/* Das Bild ist ein Link nach Google Maps. Das löst nebenbei ein Ärgernis:
   Im Bildschirmfoto steht oben links Googles eigener Knopf «In Maps öffnen»,
   der auf einem Standbild sonst nichts täte. Jetzt tut ein Klick genau das,
   was dort steht. Geladen wird dabei nichts — ein Link überträgt erst etwas,
   wenn jemand ihn anklickt und die Seite verlässt. */
.karte-bild{display:block;position:relative;outline-offset:-3px}
.karte-bild img{width:100%;height:auto;display:block}
.karte-bild:hover{outline:3px solid var(--accent)}
.karte-bild:focus-visible{outline:3px solid var(--accent)}
/* Die Bedienung in einer eigenen Tafel mit eigenem Grund, unter dem Bild. */
.karte-platz{display:flex;flex-wrap:wrap;align-items:center;
  gap:.8rem clamp(1rem,2.6vw,2rem);
  background:var(--ground);border-top:1px solid var(--line-stark);
  padding:clamp(.85rem,2.2vw,1.15rem) clamp(1rem,3vw,1.7rem)}
.karte-platz .ort{font-family:var(--display);font-weight:var(--display-w);
  font-size:var(--t-lg);color:var(--ink);line-height:1.3;max-width:24ch}
.karte-platz .btn{margin-left:auto}
/* Nebeneinander nur, wenn beides nebeneinander passt — sonst rutscht der
   Knopf unter die Anschrift und bleibt linksbündig. */
@media (max-width:700px){.karte-platz .btn{margin-left:0}}
/* Trägt zweierlei: den Datenschutzhinweis vor dem Klick und die
   Namensnennung «Kartenbild: Google Maps». Die steht zwar auch im Bild,
   schrumpft dort auf einem Telefon aber auf rund 6 px — gemessen bei
   308 px Feldbreite. Im Bild bleibt sie trotzdem stehen, sie darf nicht
   weggeschnitten werden (siehe bilder-karte/HERKUNFT.md). */
.karte-hinweis{margin-top:.7rem;font-size:var(--t-xs);color:var(--ink-3);
  max-width:72ch;line-height:1.6;text-wrap:pretty}
.karte-danach{margin-top:.45rem;font-size:var(--t-xs);color:var(--ink-3)}

/* ── Fusszeile ── */
.foot{border-top:1px solid var(--line-soft);padding-block:1.4rem 2rem;
  font-size:var(--t-xs);color:var(--ink-3)}
.foot-in{display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;align-items:center}
.foot a{color:var(--ink-3)}
.foot a:hover{color:var(--ink-2)}

.js .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .8s cubic-bezier(.2,.7,.25,1),transform .8s cubic-bezier(.2,.7,.25,1)}
.js .reveal.seen{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* Reine Lesestrecken: eine schmale Spalte, sonst nichts. */
.legal{max-width:44rem;margin-inline:auto;padding-block:clamp(1.9rem,4vw,3.2rem)}
.legal h1{font-size:var(--t-2xl);margin-bottom:.5rem}
.legal .stand{font-size:var(--t-xs);color:var(--ink-3);letter-spacing:.06em;
  text-transform:uppercase;font-weight:600;margin-bottom:2.6rem}
.legal h2{font-size:var(--t-xl);margin:1.8rem 0 .7rem;padding-top:.9rem;
  border-top:1px solid var(--line-soft)}
.legal h3{font-family:var(--display);font-weight:var(--display-w);
  font-size:1.08rem;margin:1.7rem 0 .4rem;color:var(--ink)}
.legal p{color:var(--ink-2)}
.legal p+p,.legal ul+p,.legal p+ul{margin-top:.9em}
.legal ul{padding-left:1.15em;margin:.7em 0;color:var(--ink-2)}
.legal li{margin-block:.4em}
.legal address{font-style:normal;color:var(--ink);line-height:1.75;margin-block:.6em}
.legal a{overflow-wrap:anywhere}


.zurueck{display:inline-flex;align-items:center;gap:.5em;margin-top:3rem;
  font-size:var(--t-sm);font-weight:500}
.foot .hier{color:var(--ink-2)}