/* 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 fuer impressum.html und datenschutz.html. */
/* Unterseite – auf Lesbarkeit gebaut. Gleiche Farbwelt wie die Startseite,
   aber ruhiger: eine Spalte, große Schrift, Rot nur als Markierung. */
:root{
  --rot:#C8102E;--rot-tief:#A50D26;--rot-dunkel:#78091B;
  --tinte:#12100F;--grau:#5C5754;--papier:#fff;--sand:#F6F3F1;
  --rand:clamp(1.25rem,5vw,3rem);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--sans);
  font-size:clamp(.97rem,.35vw + .9rem,1.06rem);line-height:1.78;overflow-x:hidden}
img{max-width:100%;height:auto;display:block;border-radius:.6rem}
a{color:var(--rot-tief);text-underline-offset:.2em}
a:hover{color:var(--rot-dunkel)}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px}

/* Lesefortschritt */
.fortschritt{position:fixed;inset:0 0 auto;height:4px;background:var(--rot);
  transform:scaleX(0);transform-origin:left;z-index:80;transition:transform .1s linear}

.kopf{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:.85rem;
  padding:.6rem var(--rand);background:rgba(255,255,255,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid #E8E3E0}
.kopf__logo{width:2rem;flex:none}
.kopf__logo path{fill:var(--tinte)}
.kopf a{color:var(--tinte);text-decoration:none;font-weight:800;letter-spacing:-.02em}
.kopf__zurueck{margin-left:auto;font-size:.92rem;font-weight:600;color:var(--rot-tief)!important}

.trikolore{display:flex;height:.5rem}
.trikolore i{flex:1}
.trikolore i:nth-child(odd){background:var(--rot)}
.trikolore i:nth-child(2){background:#fff}

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

/* ⚠ `padding-block`, NICHT die Kurzform `padding`: Dieses Element ist
   zugleich ein `.wrap` und bekommt von dort `padding-inline:var(--rand)`.
   Die Kurzform setzte links und rechts auf 0 - am Handy klebte die
   Ueberschrift dadurch am Rand (Nutzer, 08.10.2026). */
.titel{padding-block:clamp(3rem,9vw,6rem) clamp(1.5rem,4vw,2.5rem)}
.titel .zweig{display:inline-flex;align-items:center;gap:.6rem;font-size:.76rem;
  letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--rot-tief);margin-bottom:1.2rem}
.titel .zweig::before{content:"";width:1.8rem;height:3px;background:var(--rot)}
.titel h1{font-size:clamp(1.7rem,4.4vw,2.7rem);line-height:1.07;letter-spacing:-.03em;margin:0;font-weight:800}

.inhalt{padding-bottom:clamp(3rem,8vw,5rem)}
.inhalt p{margin:0 0 1.25em}
.inhalt p:first-of-type{font-size:1.08em;line-height:1.62}
.inhalt strong{font-weight:700}
.inhalt h2,.inhalt h3,.inhalt h4{line-height:1.15;letter-spacing:-.018em;margin:2.4em 0 .7em;font-weight:800}
.inhalt h2{font-size:clamp(1.3rem,2.6vw,1.75rem)}
.inhalt h3{font-size:clamp(1.1rem,1.8vw,1.3rem)}
.inhalt ul,.inhalt ol{margin:0 0 1.4em;padding-left:0;list-style:none}
.inhalt ul li{position:relative;padding-left:1.9rem;margin-bottom:.6em}
.inhalt ul li::before{content:"";position:absolute;left:0;top:.68em;width:1rem;height:2px;background:var(--rot)}
.inhalt ol{counter-reset:n;}
.inhalt ol li{position:relative;padding-left:2.4rem;margin-bottom:.6em;counter-increment:n}
.inhalt ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:0;
  color:var(--rot);font-weight:800;font-size:.9em}
.inhalt img{margin:2rem 0}
.inhalt table{width:100%;border-collapse:collapse;margin:2rem 0;font-size:.96em}
.inhalt td,.inhalt th{padding:.6rem .8rem;border-bottom:1px solid #E8E3E0;text-align:left}
.inhalt blockquote{margin:2rem 0;padding-left:1.4rem;border-left:4px solid var(--rot);
  font-size:1.08em;color:var(--grau)}
.inhalt hr{border:0;border-top:1px solid #E8E3E0;margin:2.6rem 0}

/* Weiterlesen */
.weiter{background:var(--sand);padding:clamp(3rem,8vw,5rem) 0}
.weiter h2{font-size:clamp(1.25rem,2.4vw,1.6rem);margin:0 0 1.8rem;letter-spacing:-.02em}
.weiter__gitter{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}
.weiter a{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.05rem 1.2rem;background:#fff;border:1px solid #E4DFDC;border-radius:.7rem;
  text-decoration:none;color:var(--tinte);font-weight:600;font-size:.99rem;line-height:1.35;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s}
.weiter a:hover{transform:translateY(-3px);border-color:var(--rot);color:var(--tinte)}
.weiter a::after{content:"›";color:var(--rot);font-size:1.4rem;line-height:1;flex:none}

.fuss{background:var(--tinte);color:#B9B3AF;padding:3rem 0 2.4rem;font-size:.93rem}
.fuss a{color:#fff}
.fuss__logo{width:3rem;margin-bottom:1.1rem}
.fuss__logo path{fill:#fff}
.fuss p{margin:0 0 .8em}

.auf{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.auf.da{opacity:1;transform:none}
.kein-js .auf{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}.auf{opacity:1;transform:none}
}
/* ==========================================================
   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"). */
.lese{font-family:"Source Serif 4",Georgia,serif}
/* 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)}
/* ---------- Blocksatz (08.10.2026) ----------
   ⚠ Blocksatz OHNE `hyphens:auto` ist im Deutschen unbrauchbar: Woerter wie
   „Qualzuchtpraeventionskonzept" lassen sich nicht umbrechen, der Ausgleich
   laeuft dann allein ueber die Wortabstaende und reisst Loecher in den Satz.
   ⚠ Am Handy zurueck auf linksbuendig: Bei rund 35 Zeichen je Zeile hilft
   auch Trennung nicht mehr.
   `text-wrap:pretty` glaettet zusaetzlich Schusterjungen und Hurenkinder. */
.lese p{
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
  hyphenate-limit-chars:7 3 3;   /* erst ab 7 Zeichen trennen, Reste min. 3 */
  text-wrap:pretty;
}
@media (max-width:40rem){
  .lese p{text-align:left;hyphens:manual}
}

/* ⚠ Logo und Name bilden EINEN Link zur Startseite. Vorher stand das SVG
   ausserhalb des <a> und war nicht klickbar — der Nutzer erwartet dort
   zu Recht einen Link (08.10.2026). */
.kopf__marke{display:inline-flex;align-items:center;gap:.85rem}

/* ⚠ 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} }