/* 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 die Seiten in informationen/. */
/* 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}
}

/* ==========================================================
   Beitragsbild – acht Formen (Nutzer, 07.10.2026: „8 varianten
   bauen und alle unterschiedlich einsetzen")
   Alle 39 Unterseiten teilen dieses Stylesheet; welche Form eine
   Seite bekommt, entscheidet allein ihre Klasse im HTML.
   Grosse Formen dort, wo das Bild Teil der Aussage ist, kleine
   dort, wo es schmueckt.
   ========================================================== */
/* ⚠ `display:grid` ist hier nicht Zierde, sondern noetig: Der Rahmen holt
   seine Hoehe aus `aspect-ratio`, und das gilt fuer eine Prozenthoehe des
   Kindes NICHT als feste Hoehe – `height:100%` am Bild lief deshalb ins
   Leere. Das Bild blieb in seiner Eigenhoehe stehen, der sandfarbene Grund
   schaute oben und unten heraus (Nutzer-Screenshots, 07.10.2026).
   Als Grid-Element streckt sich das Bild dagegen ueber die ganze Zelle. */
.bild{margin:2rem 0;overflow:hidden;background:var(--sand);display:grid}
/* ⚠ `margin:0` ist hier PFLICHT: Die allgemeine Regel `.inhalt img`
   gibt jedem Artikelbild `margin:2rem 0`. Im Rahmen drueckte das das Bild
   nach unten – oben blieb der sandfarbene Grund sichtbar, unten schnitt
   `overflow:hidden` ab. Das war die Ursache der abgeschnittenen Bilder
   (Nutzer-Screenshots, 07.10.2026), nicht die Hoehenberechnung allein. */
.bild img{margin:0;width:100%;height:100%;object-fit:cover;display:block;
  animation:kenburns 26s ease-in-out infinite alternate}
/* ⚠ scale muss die Verschiebung decken: Ueberstand je Seite ist
   (scale-1)/2 = 1,5 % gegen 1 % Verschiebung. Mit scale(1.01) bei 2,2 %
   lief das Bild an einer Kante aus dem Rahmen (Nutzer, 07.10.2026). */
@keyframes kenburns{to{transform:scale(1.03) translate3d(-1%,-.7%,0)}}
@media (prefers-reduced-motion:reduce){.bild img{animation:none}}

/* ⚠ RECHENFEHLER, behoben am 07.10.2026 (vom Nutzer bemerkt):
   `shape-outside:circle(50%)` bezieht sich ohne Angabe auf die MARGIN-BOX.
   Die Ränder sind hier bewusst asymmetrisch (links viel, rechts null), die
   margin-box ist also nicht quadratisch – der Umfluss-Kreis lag dadurch rund
   13 px nach links und 6 px nach unten versetzt zum sichtbaren Bild.
   `border-box` als Referenz setzt ihn auf das Bild selbst. */
.v-rund-rechts {float:right;width:clamp(8.5rem,30%,13rem);aspect-ratio:1;
  margin:.3rem 0 1.1rem 1.6rem;border-radius:50%;shape-outside:border-box circle(50%);shape-margin:1rem}
.v-rund-links  {float:left;width:clamp(8.5rem,30%,13rem);aspect-ratio:1;
  margin:.3rem 1.6rem 1.1rem 0;border-radius:50%;shape-outside:border-box circle(50%);shape-margin:1rem}
.v-rund-ring   {float:right;width:clamp(8.5rem,30%,13rem);aspect-ratio:1;
  margin:.3rem 0 1.1rem 1.6rem;border-radius:50%;shape-outside:border-box circle(50%);shape-margin:1.1rem;
  box-shadow:0 0 0 3px var(--papier),0 0 0 5px var(--rot)}
.v-gross-rund  {float:right;width:clamp(11rem,40%,17rem);aspect-ratio:1;
  margin:.3rem 0 1.2rem 1.8rem;border-radius:50%;shape-outside:border-box circle(50%);shape-margin:1.1rem}
.v-eck-rechts  {float:right;width:clamp(9rem,32%,14rem);aspect-ratio:1;
  margin:.3rem 0 1.1rem 1.6rem;border-radius:.9rem}
.v-eck-hoch    {float:right;width:clamp(7.5rem,26%,11rem);aspect-ratio:3/4;
  margin:.3rem 0 1.1rem 1.6rem;border-radius:.9rem}
.v-passepartout{float:right;width:clamp(9rem,32%,14rem);aspect-ratio:1;
  margin:.3rem 0 1.1rem 1.6rem;padding:.5rem;background:var(--papier);
  border:1px solid #E4DFDC;border-radius:.4rem;box-shadow:0 6px 18px -12px rgba(0,0,0,.5)}
.v-passepartout img{border-radius:.2rem}

/* ⚠ Am Handy ist Umfluss unlesbar: neben einem 30-%-Bild bleiben zwei,
   drei Woerter je Zeile. Dort stehen alle Formen zentriert ueber dem Text. */
@media (max-width:34rem){
  .bild[class*="v-"]{float:none;width:min(52%,10rem);margin:1.6rem auto;shape-outside:none}
}

/* ⚠ Floats aus dem Artikel herausholen: Bei kurzen Beitraegen ist das
   umflossene Bild hoeher als der restliche Text und ragte sonst in den
   Block „Weitere Themen" hinein (Nutzer-Screenshot „Wuerfe"). */
.inhalt::after{content:"";display:block;clear:both}

/* ---------- 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)}
/* ---------- Durchlaufendes Hintergrundbild ----------
   Wunsch des Nutzers (07.10.2026): das Bild aus dem Kopf weiter nach unten
   fuehren und „diese weisse Box von oben nach unten verlaufend immer heller
   werden lassen".

   ★ Das Bild liegt hinter der GANZEN Seite, nicht in den einzelnen Bloecken.
   Sonst setzte es in jedem Block neu an und der Uebergang bräche. `fixed`
   laesst es beim Scrollen stehen – das gibt nebenbei einen ruhigen
   Parallax-Eindruck.
   Darueber legen die Bloecke verschieden dichte Schleier:
   Kopf duenn (Bild soll wirken), Fliesstext von 80 % auf 97 % zunehmend.
   ⚠ 80 % ist die Untergrenze: Darunter faellt der graue Nebentext unter
   4,5:1 (gemessen gegen ein dunkles Foto). */
body{position:relative;background:var(--papier)}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:var(--grundbild);background-size:cover;background-position:center 18%;
}
.titel,.inhalt,.weiter,.fuss{position:relative;isolation:isolate}
.titel::after,.inhalt::after,.weiter::after,.fuss::after{
  content:"";position:absolute;inset:0;inset-inline:calc(50% - 50vw);
  z-index:-1;pointer-events:none;
}
/* ⚠ BEIDE Verlaeufe muessen dieselbe Richtung haben und an der Grenze
   denselben Wert: Der Kopf lief vorher diagonal (165deg) und endete bei
   86 %, der Fliesstext begann senkrecht bei 80 % – daraus wurde eine
   sichtbare Kante und der Eindruck, der Verlauf gehe seitlich
   (Nutzer, 07.10.2026). Jetzt beide `to bottom`, und der Text setzt genau
   dort an, wo der Kopf aufhoert. */
/* Kopf: duenner Schleier, das Bild darf durchkommen */
/* ⚠ Der Kopf bleibt GLEICHMAESSIG - das Verlaufen beginnt erst unter der
   Ueberschrift (Nutzer, 08.10.2026: „mir hat es besser gefallen als der
   verlauf erst unter der Überschrift begonnen hat"). Der Fliesstext setzt
   auf demselben Wert an, damit keine Kante entsteht. */
.titel::after{background:rgba(255,255,255,.76)}
/* Fliesstext: ab hier nach unten immer dichter */
.inhalt::after{background:linear-gradient(to bottom,
  rgba(255,255,255,.76) 0%,rgba(255,255,255,.90) 35%,rgba(255,255,255,.985) 75%)}
/* ⚠ Die Marke muss den dunkleren Rotton tragen: --rot kommt bei 76 %
   Deckung ueber einem dunklen Foto nur auf 3,6:1, --rot-tief auf 4,8:1. */
.titel .zweig{color:var(--rot-tief)}
.titel .zweig::before{background:var(--rot-tief)}
/* Weiterlesen und Fuss wie gehabt */
.weiter::after{background:linear-gradient(rgba(246,243,241,.93),rgba(246,243,241,.97))}
.fuss::after{background:linear-gradient(rgba(18,16,15,.90),rgba(18,16,15,.94))}
body{overflow-x:clip}
/* ---------- 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} }