/* Gemeinsames Stylesheet – ausgelagert am 09.10.2026.
   Lag zuvor als <style> in jeder einzelnen Seite; dadurch wurde es bei
   jedem Seitenwechsel neu uebertragen und jede Aenderung musste 43-fach
   nachgezogen werden (Nutzer, 09.10.2026).
   ⚠ Pfade in url() gelten ab diesem Verzeichnis (css/), nicht ab der
     HTML-Datei – deshalb ../fonts/. Pfade im JavaScript dagegen gelten
     weiter ab dem HTML-Dokument. */
/* Gilt nur fuer index.html (eigenes Layout mit Buehne). */
/* ============================================================
   Chihuahua-Freunde – Startseite
   Farbwelt aus den gedruckten Werbemitteln:
   Österreich-Rot #C8102E (Pantone 186 C), Weiß, Logo-Schwarz. Rot-Weiß-Rot als
   Layout-Struktur (waagrechte Bänder), nicht als Flächenteppich.
   ============================================================ */

:root{
  --rot:#C8102E;
  --rot-tief:#A50D26;   /* für rote Schrift auf Weiß – kontraststark */
  --rot-dunkel:#78091B;
  --tinte:#12100F;
  --grau:#5C5754;
  --papier:#FFFFFF;
  --sand:#F6F3F1;
  --band:clamp(1.1rem,4vw,2.2rem);
  --rand:clamp(1.25rem,5vw,4.5rem);
  --serif:"Source Serif 4",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papier);color:var(--tinte);
  font-family:var(--sans);font-size:clamp(.97rem,.35vw + .9rem,1.06rem);
  line-height:1.72;overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
a{color:var(--rot-tief);text-underline-offset:.22em;text-decoration-thickness:.08em}
a:hover{color:var(--rot-dunkel)}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px}

h1,h2,h3{line-height:1.06;letter-spacing:-.022em;margin:0;font-weight:800}
h2{font-size:clamp(1.6rem,3.8vw,2.5rem)}
h3{font-size:clamp(1.1rem,1.5vw,1.3rem);letter-spacing:-.012em}
p{margin:0 0 1.1em}
.wrap{max-width:74rem;margin-inline:auto;padding-inline:var(--rand)}
.schmal{max-width:46rem}

/* ---------- Trikolore-Band: das durchgehende Gestaltungsmotiv ---------- */
.trikolore{display:flex;flex-direction:column;height:var(--band);width:100%}
.trikolore i{display:block;flex:1}
.trikolore i:nth-child(1),.trikolore i:nth-child(3){background:var(--rot)}
.trikolore i:nth-child(2){background:var(--papier)}
.trikolore--duenn{--band:clamp(.5rem,1.6vw,.9rem)}

/* ---------- Kopfzeile ---------- */
.kopf{
  position:fixed;inset:0 0 auto;z-index:60;
  display:flex;align-items:center;gap:.9rem;
  padding:.55rem var(--rand);
  background:rgba(255,255,255,.86);backdrop-filter:blur(14px);
  border-bottom:3px solid var(--rot);
  transform:translateY(-110%);transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.kopf.sichtbar{transform:none}
.kopf__logo{width:2.1rem;flex:none}
.kopf__logo path{fill:var(--tinte)}
.kopf__name{font-weight:800;letter-spacing:-.02em;font-size:1.02rem;white-space:nowrap}
.kopf nav{margin-left:auto;display:flex;gap:1.4rem;font-size:.94rem;font-weight:600}
.kopf nav a{color:var(--tinte);text-decoration:none}
.kopf nav a:hover{color:var(--rot-tief)}
@media(max-width:46rem){.kopf nav{display:none}}

/* ---------- Bühne ---------- */
.buehne{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto;overflow:clip;background:var(--papier)}
.buehne__bild{position:absolute;inset:0;overflow:hidden}
.buehne__bild img{width:100%;height:100%;object-fit:cover;object-position:38% 45%;
  transform:scale(1.14);animation:kenburns 26s ease-in-out infinite alternate}
.buehne__bild::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(255,255,255,.97) 0 26%,rgba(255,255,255,.72) 44%,rgba(255,255,255,.12) 68%,rgba(0,0,0,.14) 100%)}
/* ⚠ scale muss die Verschiebung decken: Überstand je Seite ist
   (scale-1)/2 = 1,5 % gegen 1,0 % Verschiebung. Vorher scale(1.01)
   bei 2,2 % – das Bild lief an einer Kante aus dem Rahmen
   (bemerkt am 07.10.2026 am runden Ausschnitt der Unterseiten). */
@keyframes kenburns{to{transform:scale(1.03) translate3d(-1%,-.7%,0)}}

/* ⚠ padding-block statt padding - siehe .titel auf den Unterseiten:
   als `.wrap` braucht das Element sein seitliches Innenmaß. */
.buehne__inhalt{position:relative;z-index:2;align-self:center;padding-block:7rem 3rem}
.buehne__marke{display:flex;align-items:flex-end;gap:clamp(.8rem,2.6vw,1.7rem)}
.buehne__logo{width:clamp(5.4rem,13vw,10.5rem);flex:none}
.buehne__logo path{fill:var(--tinte);stroke:var(--tinte);stroke-width:2.2;
  stroke-dasharray:var(--len,4200);stroke-dashoffset:var(--len,4200);
  fill-opacity:0;animation:zeichnen 2.1s cubic-bezier(.6,.05,.2,1) .25s forwards, fuellen .9s ease 1.75s forwards}
@keyframes zeichnen{to{stroke-dashoffset:0}}
@keyframes fuellen{to{fill-opacity:1;stroke-width:0}}

.buehne h1{font-size:clamp(1.9rem,5.4vw,3.4rem);letter-spacing:-.038em}
.buehne h1 span{display:block}
.buehne h1 .zeile2{color:var(--rot)}
/* ⚠ Weisser Schein um die Schrift (Nutzer, 08.10.2026). Der Text steht
   teils ueber dem Bild, wo der Verlauf schon duenn ist. Mehrere weiche
   Schatten uebereinander ergeben einen gleichmaessigen Hof statt eines
   harten Umrisses - ein einzelner Schatten sieht nach Schlagschatten aus.
   ⚠ Das hebt den wahrgenommenen Kontrast, laesst sich aber nicht nach
   WCAG berechnen: Die Formel kennt nur Vorder- und Hintergrundfarbe. */
.buehne__unter{margin-top:1.3rem;max-width:34rem;font-size:clamp(1rem,1.2vw,1.1rem);color:#4A4542;
  /* ⚠ Eigener, dunklerer Ton statt var(--grau): Ueber dem Bild kam
     #5C5754 nur auf 4,1:1, #4A4542 auf 5,4:1. Gilt nur hier, der
     allgemeine Grauton bleibt unveraendert. */
  text-shadow:0 0 3px rgba(255,255,255,.95),0 0 8px rgba(255,255,255,.85),
              0 0 18px rgba(255,255,255,.7)}
.buehne__unter b{color:var(--tinte);font-weight:700}

.buehne__fahne{display:flex;gap:.42rem;margin-bottom:1.5rem}
.buehne__fahne i{display:block;height:.55rem;border-radius:99px;background:var(--rot)}
.buehne__fahne i:nth-child(1){width:3.4rem}
.buehne__fahne i:nth-child(2){width:1.5rem;background:#DCD7D4}
.buehne__fahne i:nth-child(3){width:3.4rem}

.knopfreihe{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.1rem}
.knopf{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.92em 1.5em;border-radius:99px;font-weight:700;font-size:1rem;
  text-decoration:none;border:2px solid var(--rot);transition:.22s;
}
.knopf--voll{background:var(--rot);color:#fff}
.knopf--voll:hover{background:var(--rot-dunkel);border-color:var(--rot-dunkel);color:#fff;transform:translateY(-2px)}
/* ⚠ Nicht transparent: Auf der Buehne steht der Knopf teils ueber dem
   Bild, dort kam die rote Schrift auf 1,8:1 (Nutzer, 08.10.2026:
   „weil das Rot nicht so sehr sich abhebt vom Hintergrund"). Mit 82 %
   Weiss sind es 5,4:1, und das Bild scheint noch durch. */
.knopf--leer{color:var(--rot-tief);background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.1)}
.knopf--leer:hover{background:var(--rot);color:#fff;transform:translateY(-2px)}
.knopf--wa svg{flex:none}

.runter{position:absolute;left:var(--rand);bottom:1.4rem;z-index:3;
  font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grau);
  display:flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:600}
.runter::after{content:"";width:2.6rem;height:2px;background:var(--rot);animation:schieben 1.9s ease-in-out infinite}
@keyframes schieben{0%,100%{transform:scaleX(.4);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}}

/* ---------- Abschnitte ---------- */
section{position:relative}
.abschnitt{padding:clamp(4rem,11vw,8.5rem) 0}
.marke{display:inline-flex;align-items:center;gap:.7rem;
  font-size:.79rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--rot-tief);margin-bottom:1.5rem}
.marke::before{content:"";width:2.2rem;height:3px;background:var(--rot)}
.fuehrung{font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.6;color:var(--tinte)}

/* ---------- Silhouette als Bildmaske ---------- */
.silhouette{background:var(--sand);overflow:hidden}
.silhouette__gitter{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(min-width:56rem){.silhouette__gitter{grid-template-columns:1.05fr .95fr}}
.maske{position:relative;aspect-ratio:440/501;max-width:29rem;margin-inline:auto;width:100%;
  perspective:1100px;
  /* Ruhelage: Licht von oben links. Das Skript verschiebt diese zwei Werte. */
  --nx:-.32;--ny:-.42}
/* Der Lichteinfall wandert mit dem Zeiger; die Werte setzt das Skript. */
.maske__koerper{position:absolute;inset:0;
  transform:rotateX(calc(var(--ny,0) * -7deg)) rotateY(calc(var(--nx,0) * 9deg));
  transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
/* Das Fenster trägt die Kontur – das Bild darin darf sich frei bewegen,
   ohne dass die Form mitwandert. */
.maske__fenster{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:var(--m);mask-image:var(--m);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  /* folgt der Kontur, nicht dem Rechteck – nur mit der SVG-Maske möglich */
  filter:
    drop-shadow(calc(var(--nx,0) * -7px + 0px) calc(var(--ny,0) * -6px + 18px) 24px rgba(28,16,10,.46))
    drop-shadow(calc(var(--nx,0) * -2px) calc(var(--ny,0) * -2px + 3px) 5px rgba(28,16,10,.34))
    drop-shadow(calc(var(--nx,0) * 2px) calc(var(--ny,0) * 2px - 1px) 3px rgba(255,255,255,.46));
  transition:filter .35s ease}
.maske picture{display:block;width:100%;height:100%}
.maske img{width:100%;height:100%;object-fit:cover;
  /* Reserve nach oben und unten, damit das Bild wandern kann */
  transform:scale(1.16) translate3d(0,var(--py,0%),0);
  will-change:transform}
/* Innenmodellierung: Licht oben links, Schattenkante unten rechts – dieselbe Maske */
.maske__licht{position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:var(--m);mask-image:var(--m);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  background:
    radial-gradient(58% 46% at calc(34% + var(--nx,0) * 14%) calc(24% + var(--ny,0) * 14%),
      rgba(255,255,255,.20), rgba(255,255,255,.05) 44%, rgba(255,255,255,0) 64%),
    linear-gradient(calc(150deg + var(--nx,0) * 25deg),
      rgba(255,255,255,0) 38%, rgba(74,38,20,.30) 76%, rgba(40,20,10,.48) 100%);
  mix-blend-mode:soft-light;transition:background .35s ease}
/* Läuft die Eigenbewegung, übernimmt das Skript die Glättung – die
   CSS-Übergänge würden sich sonst bei jedem Bild neu aufziehen. */
.maske--lebt .maske__koerper,
.maske--lebt .maske__fenster,
.maske--lebt .maske__licht{transition:none}
.maske__ring{position:absolute;inset:-6% -6% auto;height:0;padding-bottom:112%;
  border-radius:50%;border:2px dashed rgba(255,0,0,.32);animation:dreh 34s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .maske__koerper{transform:none;transition:none}
}

/* ---------- Standorte ---------- */
.orte{background:var(--tinte);color:#fff}
.orte h2{color:#fff}
.orte .fuehrung{color:#CFC9C6}
.orte__liste{display:grid;gap:1px;background:rgba(255,255,255,.16);margin-top:3rem;border:1px solid rgba(255,255,255,.16)}
@media(min-width:52rem){.orte__liste{grid-template-columns:repeat(3,1fr)}}
.ort{background:var(--tinte);padding:clamp(1.6rem,3vw,2.4rem);position:relative;overflow:hidden}
.ort::before{content:"";position:absolute;inset:auto 0 0;height:4px;background:var(--rot);
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ort:hover::before,.ort:focus-within::before{transform:scaleX(1)}
.ort__land{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rot);font-weight:800}
.ort h3{margin:.5rem 0 .3rem;color:#fff}
.ort__person{color:#CFC9C6;margin:0 0 .9rem}
.ort a{color:#fff;font-weight:600;word-break:break-word}

/* ---------- Themenraster ---------- */
.themen__gitter{display:grid;gap:.88rem;margin-top:2.4rem;
  grid-template-columns:repeat(auto-fill,minmax(12.4rem,1fr))}
.thema{
  display:flex;flex-direction:column;justify-content:space-between;gap:1.28rem;
  padding:1.2rem 1.12rem;border:1px solid #E4DFDC;border-radius:.72rem;
  text-decoration:none;color:var(--tinte);background:#fff;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s;
}
.thema:hover{transform:translateY(-4px);border-color:var(--rot);box-shadow:0 14px 34px -18px rgba(0,0,0,.45);color:var(--tinte)}
.thema__titel{font-weight:700;font-size:.95rem;line-height:1.3}
.thema__pfeil{align-self:flex-end;width:1.28rem;height:1.28rem;flex:none;color:var(--rot);transition:transform .3s}
.thema:hover .thema__pfeil{transform:translateX(4px)}

/* ---------- Weg zum Welpen ---------- */
.weg{background:var(--rot);color:#fff}
.weg h2{color:#fff}
.weg .marke{color:#fff}
.weg .marke::before{background:#fff}
.weg .fuehrung{color:rgba(255,255,255,.94)}
.weg__stufen{counter-reset:stufe;display:grid;gap:1px;margin-top:3rem;background:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.3)}
@media(min-width:56rem){.weg__stufen{grid-template-columns:repeat(2,1fr)}}
.stufe{background:var(--rot);padding:clamp(1.5rem,3vw,2.2rem);display:flex;gap:1.2rem;align-items:flex-start;
  text-decoration:none;color:#fff;transition:background .3s}
.stufe:hover{background:var(--rot-dunkel);color:#fff}
.stufe__nr{counter-increment:stufe;font-weight:800;font-size:1.3rem;opacity:.55;flex:none;min-width:2.2rem}
.stufe__nr::before{content:counter(stufe,decimal-leading-zero)}
.stufe h3{color:#fff;margin-bottom:.3rem}
.stufe p{margin:0;color:rgba(255,255,255,.9);font-size:.98rem}

/* ---------- Züchter werden ---------- */
.zuechter{background:var(--sand)}
.zuechter__gitter{display:grid;gap:clamp(2rem,5vw,3.6rem)}
@media(min-width:56rem){.zuechter__gitter{grid-template-columns:1fr 1fr;align-items:center}}
.liste{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.85rem}
.liste li{padding-left:2.1rem;position:relative}
.liste li::before{content:"";position:absolute;left:0;top:.62em;width:1.15rem;height:2px;background:var(--rot)}
.bildrahmen{position:relative;border-radius:1rem;overflow:hidden}
.bildrahmen img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.bildrahmen::after{content:"";position:absolute;inset:auto 0 0;height:.55rem;
  background:linear-gradient(90deg,var(--rot) 0 34%,#fff 34% 66%,var(--rot) 66%)}

/* ---------- Fußzeile ---------- */
.fuss{background:var(--tinte);color:#B9B3AF;padding:clamp(3.5rem,8vw,6rem) 0 2.5rem;font-size:.95rem}
.fuss a{color:#fff}
.fuss__gitter{display:grid;gap:2.5rem}
@media(min-width:52rem){.fuss__gitter{grid-template-columns:1.4fr 1fr 1fr}}
.fuss h4{color:#fff;font-size:.79rem;letter-spacing:.2em;text-transform:uppercase;margin:0 0 1rem}
.fuss__logo{width:3.4rem;margin-bottom:1.2rem}
.fuss__logo path{fill:#fff}
.fuss__recht{margin-top:3rem;padding-top:1.8rem;border-top:1px solid rgba(255,255,255,.16);font-size:.85rem;line-height:1.7}
.fuss ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}

/* ---------- Auftauchen beim Scrollen ---------- */
.auf{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.auf.da{opacity:1;transform:none}
.auf:nth-child(2){transition-delay:.08s}
.auf:nth-child(3){transition-delay:.16s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .auf{opacity:1;transform:none}
  .buehne__logo path{fill-opacity:1;stroke-width:0}
}
/* Ohne JavaScript bleibt alles sichtbar */
.kein-js .auf{opacity:1;transform:none}

/* Der Welpen-Punkt führt als einziger aus der Seite hinaus und ist das
   eigentliche Ziel vieler Besucher – deshalb farbig unterlegt. */
.kopf nav a.nav--welpen{color:var(--papier);background:var(--rot);
  padding:.3rem .7rem;border-radius:99px;font-weight:700}
.kopf nav a.nav--welpen:hover{background:var(--rot-dunkel);color:var(--papier)}

/* ==========================================================
   Schwebender Welpen-Knopf  (Nutzer, 07.10.2026: „wie das
   early-bird bei minigolf")
   Rundes Welpenfoto unten rechts, aus dem nach links ein Schild
   aufklappt. Übernommen sind die Lehren von ice-minigolf, nicht
   die Gestaltung – eine rollende Eiskugel passt nicht zu einer
   Hundezucht, hier ploppt das Foto auf.
   ========================================================== */
.welpen{
  --rund:clamp(3.6rem,2.8rem + 2.4vw,5rem);
  /* ★ Wartezeit als Animationsverzögerung, NICHT als setTimeout im Skript.
     Lehre aus ice-minigolf: Mit einem Timer stand der fertige Knopf erst
     da und sprang dann auf den Anfang zurück. Mit `both` gilt während der
     Verzögerung schon der Anfangszustand. */
  --warten:1.2s;
  position:fixed;z-index:70;
  right:clamp(.8rem,3vw,2rem);bottom:clamp(.9rem,3.5vw,2rem);
}
.welpen[hidden]{display:none}
.welpen__knopf{position:relative;display:flex;align-items:center;text-decoration:none}

.welpen__text{
  display:block;
  margin-right:calc(var(--rund) * -.5);
  padding:.6rem calc(var(--rund) * .85) .6rem 1.6rem;
  /* ★ Links mehr Luft (Nutzer, 07.10.2026). Grund: Die linke Kante ist
     eine Pillen-Rundung (border-radius:99px). Bei dreizeiligem Text ist
     das Schild rund 4rem hoch, der Bogen greift also weit nach innen –
     bei zu knappem Innenmaß beginnt die Schrift mitten in der Rundung. */
  font-family:var(--sans);
  /* ⚠ Bewusst die Grundschrift, nicht die Serifen-Variable:
     Der Fallback lief auf Systemen ohne "Iowan Old Style" oder
     "Palatino Linotype" ins generische serif – auf Linux also Times
     (Nutzer, 07.10.2026). Ein Knopf ist ein Bedienelement, da passt
     die Grundschrift ohnehin besser. */font-size:clamp(.92rem,.8rem + .4vw,1.08rem);
  font-weight:700;letter-spacing:.01em;line-height:1.3;
  color:var(--papier);background:var(--rot);
  border-radius:99px 0 0 99px;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.6);
}
.welpen__text small{display:block;font-size:.82em;font-weight:400;
  opacity:.92;margin-top:.12rem}
.welpen__bild{
  position:relative;z-index:1;flex:none;
  width:var(--rund);height:var(--rund);
  border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 3px var(--papier),0 10px 26px -10px rgba(0,0,0,.6);
}
.welpen__bild img{width:100%;height:100%;object-fit:cover;display:block}

.welpen__knopf:hover .welpen__text{background:var(--rot-dunkel)}
.welpen__knopf:hover .welpen__bild{box-shadow:0 0 0 3px var(--papier),0 12px 30px -8px rgba(0,0,0,.7)}

/* --- Auftritt: Foto ploppt auf, dann klappt das Schild heraus --- */
.welpen.auftritt .welpen__bild{
  animation:welpen-plopp .7s cubic-bezier(.3,1.5,.5,1) var(--warten) both}
.welpen.auftritt .welpen__text{
  animation:welpen-klapp .5s cubic-bezier(.25,.8,.25,1) calc(var(--warten) + .45s) both}
@keyframes welpen-plopp{
  0%  {opacity:0;transform:scale(.3)}
  60% {opacity:1;transform:scale(1.08)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes welpen-klapp{
  from{clip-path:inset(0 0 0 100%);opacity:.3}
  to  {clip-path:inset(0 0 0 0);opacity:1}
}

/* Am Handy nur das runde Foto – ein Schild daneben wird dort zu breit */
/* ⚠ Am Handy bleibt der Text SICHTBAR, nur der Zusatz entfaellt.
   Vorher war das ganze Schild ausgeblendet - uebrig blieb ein rundes
   Hundefoto unten rechts, dem niemand ansieht, wofuer es steht
   (Nutzer, 08.10.2026). Die volle Fassung braucht rund 310 px und
   fraesse auf einem 360er-Display fast die ganze Breite; „Zu den Welpen"
   allein kommt mit 184 px aus. */
/* Kurzfassung nur am Handy – „und Abgabehunden" statt der drei Zeilen
   (Nutzer, 08.10.2026). So steht auch dort, dass es nicht nur um Welpen
   geht, ohne dass das Schild zu breit wird. */
/* ⚠ Die Selektoren MUESSEN `.welpen__text` mitnehmen: `.welpen__text small`
   setzt display:block und hat Spezifitaet (0,1,1) - eine blosse Klasse
   (0,1,0) verliert dagegen, dann standen beide Zusaetze da und der Knopf
   war vierzeilig (Nutzer, 08.10.2026). */
.welpen__text .welpen__kurz{display:none}
@media (max-width:30rem){
  .welpen__text .welpen__lang{display:none}
  .welpen__text .welpen__kurz{display:block}
  .welpen__text{font-size:.88rem;padding:.55rem calc(var(--rund) * .85) .55rem 1.1rem}
  .welpen{--rund:3.2rem}
}
@media (prefers-reduced-motion:reduce){
  .welpen.auftritt .welpen__bild,
  .welpen.auftritt .welpen__text{animation:none}
}

/* ---------- Leseschrift: Source Serif 4 ----------
   Selbst gehostet, NICHT von fonts.googleapis.com geladen (Nutzer,
   07.10.2026). Grund: Eine Einbindung vom Google-Server uebertraegt bei
   jedem Aufruf die IP des Besuchers an Google – das waere ein Widerspruch
   zur eigenen Datenschutzerklaerung („Solange Sie einen solchen Link nicht
   anklicken, werden keine Daten an diese Anbieter uebertragen") und seit
   dem Urteil des LG Muenchen (2022) abmahnfaehig. Die Schrift selbst ist
   unter der Open Font License frei.
   Nur `latin` und nur die drei gebrauchten Schnitte: 117 kB statt 528 kB
   fuer das volle Paket. */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;
  font-display:swap;src:url(../fonts/source-serif-4-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:600;
  font-display:swap;src:url(../fonts/source-serif-4-600-normal.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400;
  font-display:swap;src:url(../fonts/source-serif-4-400-italic.woff2) format("woff2")}

/* ⚠ Bewusst NUR der Artikeltext, nicht `body`: Ueberschriften, Navigation,
   Knoepfe und Fusszeile sind Bedienelemente und bleiben bei der
   Grundschrift (Nutzer: „bis auf die Ueberschriften"). */
/* ⚠ Auf der Startseite gibt es keinen Artikel-Container, deshalb hier
   die Fliesstexte einzeln. Ausgenommen bleiben Bedienelemente: die kleinen
   Marken-Labels, die Standortangaben, Ueberschriften und die Fusszeile. */
.buehne__unter,
.fuehrung,
.abschnitt p:not(.marke):not(.ort__land):not(.ort__person),
.stufe p,
.liste li{font-family:"Source Serif 4",Georgia,serif}
.abschnitt h2,.abschnitt h3,.abschnitt h4{font-family:var(--sans)}
/* Ueberschriften, Tabellen und Bildunterschriften bleiben bei der
   Grundschrift – sonst erbten sie die Serifen vom Artikel. */
.lese h2,.lese h3,.lese h4,.lese table,.lese figcaption,.lese b{font-family:var(--sans)}
/* ⚠ Knoepfe sind Bedienelemente und bleiben bei der Grundschrift.
   Sie stehen teils in klassenlosen <p> innerhalb der Abschnitte und
   hatten die Serifen von dort geerbt (Nutzer, 07.10.2026). */
.knopf,.knopf--voll,.knopf--leer,.stufe,.thema,.weiter a{font-family:var(--sans)}

/* Logo und Name als ein Link zum Seitenanfang */
.kopf__marke{display:inline-flex;align-items:center;gap:.85rem;
  text-decoration:none;color:inherit}
.kopf__marke:hover .kopf__name{color:var(--rot-tief)}

/* ⚠ Am Handy nur ein Hauch Rand (Nutzer, 08.10.2026: „nur 3 oder 5px,
   gerade dass es nicht am Rand klebt"). Die clamp-Untergrenze von 1,25rem
   nahm auf einem 360er-Display 40 px der Breite weg, also gut ein Zehntel.
   ⚠ Gilt auch fuer die Kopfleiste, die dasselbe --rand benutzt. */
@media (max-width:34rem){ :root{--rand:5px} }

/* ---------- Klappmenü am Handy (08.10.2026) ----------
   Vorher verschwand die Navigation unter 46rem ersatzlos - am Telefon gab
   es gar keine (Nutzer). Jetzt ein Schalter, der sie aufklappt.
   ⚠ Voll deckende Flaeche, KEIN backdrop-filter: Lehre aus den
   Minigolf-Seiten, wo die halbtransparente Variante ueber dem bewegten
   Hintergrund unruhig wurde. */
.kopf__schalter{display:none;margin-left:auto;width:2.6rem;height:2.6rem;
  padding:0;background:none;border:0;cursor:pointer;position:relative}
.kopf__schalter span,.kopf__schalter span::before,.kopf__schalter span::after{
  content:"";position:absolute;left:.55rem;width:1.5rem;height:2px;
  background:var(--tinte);border-radius:2px;transition:transform .25s,opacity .2s}
.kopf__schalter span{top:50%;margin-top:-1px}
.kopf__schalter span::before{top:-7px;left:0}
.kopf__schalter span::after{top:7px;left:0}
.kopf__schalter[aria-expanded="true"] span{background:transparent}
.kopf__schalter[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.kopf__schalter[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

@media(max-width:46rem){
  .kopf__schalter{display:block}
  .kopf nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    background:var(--papier);
    border-top:1px solid #E4DFDC;
    box-shadow:0 18px 34px -22px rgba(0,0,0,.6);
    padding:.4rem var(--rand) .8rem;
  }
  .kopf nav.offen{display:flex}
  .kopf nav a{padding:.78rem .2rem;border-bottom:1px solid #F0ECEA}
  .kopf nav a:last-child{border-bottom:0}
  /* Der Welpen-Punkt bleibt auch im Klappmenue hervorgehoben */
  .kopf nav a.nav--welpen{align-self:flex-start;margin:.5rem .2rem .3rem}
}