/* ============================================================
   STUBE  ::  Stilbogen des Teddybaer-Ratgebers
   Eine einzige Datei fuer alle Seiten.
   Bildsprache: Wolle, Mohair, Naht, Knopfauge.
   Klassennamen sind bewusst deutsch und hauseigen.
   ============================================================ */

/* --- 1. Farben, Schriften, Takt ---------------------------- */
:root{
  /* Wolle = Flaechen, Russ = Schrift, Honig = Fuehrungsfarbe */
  --wolle:        #f8f2e8;
  --wolle-tief:   #f0e6d6;
  --flausch:      #fffcf7;
  --russ:         #2b211b;
  --russ-weich:   #5c4f45;
  --honig:        #b4692a;
  --honig-tief:   #8c4d1b;
  --honig-hell:   #e7b681;
  --loden:        #3d5a45;
  --loden-tief:   #26382c;
  --kirsch:       #9d3b34;
  --saum:         #ddcdb3;
  --saum-zart:    #ece0cb;

  --fell: radial-gradient(115% 120% at 26% 18%, #efd3ac 0%, transparent 58%),
          radial-gradient(90% 110% at 88% 96%, #cfa877 0%, transparent 62%),
          linear-gradient(152deg, #e3c49b 0%, #c99b64 100%);

  --schrift-titel: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --schrift-text: -apple-system,BlinkMacSystemFont,"Segoe UI","Segoe UI Variable Text",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;

  --takt: 8px;
  --rand-weit: clamp(1.15rem, 4.2vw, 2.6rem);
  --bogen: 14px;
  --bogen-gross: 26px;
  --schatten-sanft: 0 1px 2px rgba(43,33,27,.05), 0 10px 28px -18px rgba(43,33,27,.4);
  --schatten-tief: 0 2px 4px rgba(43,33,27,.06), 0 26px 56px -32px rgba(43,33,27,.55);
}

/* --- 2. Grundlage ------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  color-scheme:light;
  scroll-padding-top:calc(var(--takt) * 5);
}
body{
  margin:0;
  background:var(--wolle);
  color:var(--russ);
  font-family:var(--schrift-text);
  font-size:clamp(1.02rem,.985rem + .18vw,1.13rem);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--honig-tief)}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--loden);
  outline-offset:3px;
  border-radius:4px;
}
h1,h2,h3,h4{
  font-family:var(--schrift-titel);
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.012em;
  color:var(--russ);
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.05rem,1.28rem + 3.3vw,3.6rem);letter-spacing:-.024em}
h2{font-size:clamp(1.52rem,1.2rem + 1.4vw,2.2rem)}
h3{font-size:clamp(1.19rem,1.09rem + .5vw,1.46rem);line-height:1.28}
h4{font-size:1.06rem;line-height:1.35}
p{margin:0}
hr{border:0;margin:0}
table{border-collapse:collapse;width:100%}

/* --- 3. Bahnen und Baender --------------------------------- */
.hulle{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--rand-weit)}
.hulle--eng{max-width:820px}
.band{padding-block:clamp(2.8rem,7vw,5.4rem)}
.band--knapp{padding-block:clamp(2rem,4.5vw,3.2rem)}
.band--tief{background:var(--wolle-tief)}
.band--loden{background:var(--loden-tief);color:#f3ece0}
.band--loden h2,.band--loden h3{color:#fdf8ef}
.band--loden .merkzeile{color:var(--honig-hell)}

.bandkopf{max-width:44rem;margin-bottom:clamp(1.6rem,3.5vw,2.6rem)}
.bandkopf p{margin-top:.9rem;color:var(--russ-weich)}
.band--loden .bandkopf p{color:#d9cfbf}
.band--loden .absatz{color:#d9cfbf}
.band--loden blockquote{color:#fdf8ef;border-left-color:var(--honig-hell)}

/* Absatz = freistehender Fliesstext ausserhalb von .inhalt */
.absatz{margin-top:1.1rem;line-height:1.72;color:var(--russ-weich);max-width:38rem}

/* Merkzeile = kleine Vorzeile ueber der Ueberschrift */
.merkzeile{
  display:inline-block;
  font-size:.735rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--honig-tief);
  margin-bottom:.85rem;
}
.merkzeile--loden{color:var(--loden)}

/* Anriss = Vorspann unter der Ueberschrift */
.anriss{
  font-size:clamp(1.1rem,1.03rem + .42vw,1.34rem);
  line-height:1.6;
  color:var(--russ-weich);
  max-width:38rem;
}

/* Naht = Trennlinie im Stil einer Steppnaht */
.naht{
  height:2px;
  background:repeating-linear-gradient(90deg,var(--saum) 0 15px,transparent 15px 27px);
  margin-block:clamp(2rem,5vw,3.4rem);
}
.naht--knoten{position:relative;overflow:visible}
.naht--knoten::after{
  content:"";
  position:absolute;left:50%;top:50%;
  width:11px;height:11px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--wolle);
  box-shadow:0 0 0 2px var(--honig);
}

/* --- 4. Kopfleiste ----------------------------------------- */
.sprungtaste{
  position:absolute;left:-9999px;top:0;
  background:var(--russ);color:var(--wolle);
  padding:.7rem 1.1rem;border-radius:0 0 var(--bogen) 0;
  z-index:60;
}
.sprungtaste:focus{left:0}

.kopfleiste{
  background:var(--wolle);
  border-bottom:1px solid var(--saum-zart);
}
.kopfleiste__innen{
  display:flex;
  align-items:center;
  gap:clamp(.9rem,3vw,2.4rem);
  min-height:74px;
  flex-wrap:wrap;
  padding-block:.7rem;
}
.wortmarke{
  display:inline-flex;
  align-items:center;
  gap:.68rem;
  text-decoration:none;
  color:var(--russ);
  flex:0 0 auto;
}
.wortmarke svg{width:38px;height:38px;flex:0 0 auto}
.wortmarke__text{display:flex;flex-direction:column;line-height:1.05}
.wortmarke__haupt{
  font-family:var(--schrift-titel);
  font-size:1.3rem;
  font-weight:600;
  letter-spacing:-.02em;
}
.wortmarke__unter{
  font-size:.63rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--honig-tief);
  font-weight:700;
  margin-top:.16rem;
}

.hauptnav{flex:1 1 100%;min-width:0}
.hauptnav ul{
  list-style:none;margin:0;padding:0 0 .2rem;
  display:flex;gap:1.35rem;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.hauptnav ul::-webkit-scrollbar{display:none}
.hauptnav a{
  display:block;
  white-space:nowrap;
  text-decoration:none;
  color:var(--russ-weich);
  font-size:.92rem;
  font-weight:600;
  padding:.35rem 0;
  border-bottom:2px solid transparent;
}
.hauptnav a:hover{color:var(--russ);border-bottom-color:var(--honig-hell)}
.hauptnav a[aria-current]{color:var(--russ);border-bottom-color:var(--honig)}

@media (min-width:900px){
  .kopfleiste__innen{flex-wrap:nowrap;min-height:92px}
  .hauptnav{flex:1 1 auto}
  .hauptnav ul{justify-content:flex-end;overflow:visible;gap:1.7rem}
}

/* --- 5. Aufmacher ------------------------------------------ */
.aufmacher{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(62% 88% at 84% 14%,rgba(231,182,129,.42),transparent 64%),
    radial-gradient(72% 86% at 4% 96%,rgba(61,90,69,.15),transparent 62%),
    linear-gradient(176deg,#fdf8f0 0%,#f1e6d3 100%);
  border-bottom:1px solid var(--saum-zart);
}
.aufmacher::before{
  content:"";
  position:absolute;inset:0;
  background:repeating-linear-gradient(63deg,rgba(255,255,255,.5) 0 2px,transparent 2px 7px);
  opacity:.34;
  pointer-events:none;
}
/* Zweispalter = Wort links, Bild rechts. Ohne eigene Innenhoehe,
   damit er auch in einem .band eingesetzt werden kann. */
.zweispalter{
  position:relative;
  display:grid;
  gap:clamp(1.9rem,5vw,3.6rem);
  align-items:center;
}
.spaltentext{max-width:36rem}
.spaltentext .anriss{margin-top:1.15rem}
.aufmacher__gitter{
  position:relative;
  display:grid;
  gap:clamp(1.9rem,5vw,3.6rem);
  padding-block:clamp(2.7rem,7vw,5rem);
  align-items:center;
}
.aufmacher__wort{max-width:36rem}
.aufmacher__wort .anriss{margin-top:1.15rem}
.aufmacher h1 .hervor{
  color:var(--honig-tief);
  font-style:italic;
}
@media (min-width:940px){
  .zweispalter,
  .aufmacher__gitter{grid-template-columns:1.04fr .96fr}
  .aufmacher--artikel .aufmacher__gitter{grid-template-columns:1fr}
  .aufmacher--artikel .aufmacher__wort{max-width:44rem}
}

/* Knoepfe */
.knopfreihe{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.7rem}
.knopf{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.82rem 1.35rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:650;
  font-size:.95rem;
  line-height:1.2;
  border:1.5px solid transparent;
  transition:transform .16s ease, box-shadow .16s ease;
}
.knopf--voll{background:var(--russ);color:var(--wolle);box-shadow:var(--schatten-sanft)}
.knopf--voll:hover{transform:translateY(-2px);box-shadow:var(--schatten-tief)}
.knopf--rand{border-color:var(--russ);color:var(--russ)}
.knopf--rand:hover{background:rgba(43,33,27,.06)}
/* Varianten fuer dunkle Baender */
.knopf--hell{background:var(--wolle);color:var(--loden-tief);box-shadow:var(--schatten-sanft)}
.knopf--hell:hover{transform:translateY(-2px)}
.knopf--randhell{border-color:rgba(233,225,213,.52);color:#e8e1d5}
.knopf--randhell:hover{background:rgba(255,255,255,.09)}
.knopf__pfeil{font-size:1.05em;line-height:1}

/* --- 6. Bildrahmen (nie ein leeres Kaestchen) -------------- */
.bildrahmen{
  position:relative;
  border-radius:var(--bogen-gross);
  overflow:hidden;
  background:var(--fell);
  box-shadow:var(--schatten-tief);
  isolation:isolate;
}
.bildrahmen::after{
  content:"";
  position:absolute;inset:11px;
  border:1.5px dashed rgba(255,252,247,.62);
  border-radius:calc(var(--bogen-gross) - 9px);
  pointer-events:none;
  z-index:2;
}
.bildrahmen img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  /* Fehlt die Datei, bleibt der warme Fellverlauf stehen statt eines
     grauen Kastens mit Alternativtext. Das alt-Attribut bleibt erhalten
     und wird von Vorlesegeraeten weiterhin ausgegeben. */
  color:transparent;
  font-size:0;
}
.bildrahmen--hoch img{aspect-ratio:5/6}
.bildrahmen--breit img{aspect-ratio:16/9}
.bildrahmen--schief{transform:rotate(-1.1deg)}

figure{margin:0}
figure.bildfeld{margin-block:clamp(1.8rem,4vw,2.8rem)}
figcaption{
  margin-top:.8rem;
  font-size:.86rem;
  line-height:1.55;
  color:var(--russ-weich);
  padding-left:1rem;
  border-left:2px solid var(--honig-hell);
}

/* --- 7. Kacheln -------------------------------------------- */
.kachelfeld{
  display:grid;
  gap:clamp(1rem,2.4vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
}
/* Zwei feste Spalten ab Tabletbreite, damit vier Rubriken
   ein sauberes Quadrat ergeben statt drei plus eine. */
.kachelfeld--zwei{grid-template-columns:1fr}
@media (min-width:820px){
  .kachelfeld--zwei{grid-template-columns:1fr 1fr}
}
.kachel{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  background:var(--flausch);
  border:1px solid var(--saum-zart);
  border-radius:var(--bogen);
  padding:clamp(1.25rem,2.6vw,1.7rem);
  box-shadow:var(--schatten-sanft);
  transition:transform .18s ease, border-color .18s ease;
}
.kachel:hover{transform:translateY(-3px);border-color:var(--honig-hell)}
.kachel h3{font-size:1.14rem}
.kachel h3 a{text-decoration:none;color:var(--russ)}
.kachel h3 a::after{content:"";position:absolute;inset:0}
.kachel:hover h3 a{color:var(--honig-tief)}
.kachel p{font-size:.95rem;color:var(--russ-weich);line-height:1.62}
.kachel__marke{
  font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--loden);
}

/* Rubrikkachel mit Linkliste, ohne Ganzflaechen-Link */
.rubrik{
  background:var(--flausch);
  border:1px solid var(--saum-zart);
  border-radius:var(--bogen);
  padding:clamp(1.35rem,2.8vw,1.9rem);
  box-shadow:var(--schatten-sanft);
}
.rubrik h3{margin-bottom:.55rem}
.rubrik > p{color:var(--russ-weich);font-size:.95rem}
.rubrik__liste{list-style:none;margin:1.05rem 0 0;padding:0;display:grid;gap:.1rem}
.rubrik__liste li{border-top:1px dashed var(--saum)}
.rubrik__liste li:first-child{border-top:0}
.rubrik__liste a{
  display:block;
  padding:.62rem 1.6rem .62rem 0;
  text-decoration:none;
  color:var(--russ);
  font-size:.95rem;
  font-weight:550;
  position:relative;
}
.rubrik__liste a::after{
  content:"\203A";
  position:absolute;right:.25rem;top:.5rem;
  color:var(--honig);
  font-size:1.2rem;
  line-height:1.2;
}
.rubrik__liste a:hover{color:var(--honig-tief)}

/* --- 8. Fliesstext ----------------------------------------- */
.inhalt{max-width:70ch}
.inhalt--breit{max-width:none}
.inhalt > * + *{margin-top:1.25rem}
.inhalt h2{margin-top:clamp(2.4rem,5vw,3.4rem)}
.inhalt h2 + p,.inhalt h3 + p{margin-top:.9rem}
.inhalt h3{margin-top:2.1rem}
.inhalt p{line-height:1.75}
.inhalt a{
  color:var(--honig-tief);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.inhalt a:hover{color:var(--kirsch)}
.inhalt strong{font-weight:670;color:var(--russ)}
/* Nur schmucklose Listen bekommen den Hausschmuck.
   Listen MIT Klasse (.schrittliste, .rubrik__liste ...) bleiben unberuehrt. */
.inhalt ul:not([class]),.inhalt ol:not([class]){margin:1.25rem 0;padding-left:0;list-style:none}
.inhalt ul:not([class]) > li{position:relative;padding-left:1.7rem;margin-top:.62rem}
.inhalt ul:not([class]) > li::before{
  content:"";
  position:absolute;left:.16rem;top:.66em;
  width:9px;height:9px;border-radius:50%;
  background:var(--honig-hell);
  box-shadow:0 0 0 1.5px var(--honig);
}
.inhalt ol:not([class]){counter-reset:zaehler}
.inhalt ol:not([class]) > li{position:relative;padding-left:1.95rem;margin-top:.62rem;counter-increment:zaehler}
.inhalt ol:not([class]) > li::before{
  content:counter(zaehler) ".";
  position:absolute;left:0;top:0;
  font-weight:700;color:var(--honig-tief);
  font-variant-numeric:tabular-nums;
}
blockquote{
  margin:clamp(1.9rem,4vw,2.6rem) 0;
  padding:0 0 0 clamp(1.1rem,3vw,1.8rem);
  border-left:3px solid var(--honig);
  font-family:var(--schrift-titel);
  font-size:clamp(1.2rem,1.1rem + .55vw,1.55rem);
  line-height:1.42;
  font-style:italic;
  color:var(--russ);
}
.inhalt blockquote{margin-top:clamp(1.9rem,4vw,2.6rem)}

/* Artikelkopf */
.artikelkopf{max-width:44rem}
.artikelkopf .anriss{margin-top:1.1rem;max-width:42rem}
.stempel{
  display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;
  margin-top:1.4rem;
  font-size:.83rem;
  color:var(--russ-weich);
  letter-spacing:.01em;
}
.stempel span{display:inline-flex;align-items:center;gap:.42rem}
.stempel span::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--honig);
}

/* Pfad = Brotkrume */
.pfad{padding-top:1.35rem;font-size:.82rem}
.pfad ol{list-style:none;display:flex;flex-wrap:wrap;gap:.42rem;margin:0;padding:0}
.pfad li{color:var(--russ-weich);display:flex;gap:.42rem;align-items:center}
.pfad li + li::before{content:"\203A";color:var(--saum)}
.pfad a{color:var(--russ-weich);text-decoration:none}
.pfad a:hover{color:var(--honig-tief);text-decoration:underline}
.pfad [aria-current]{color:var(--russ);font-weight:600}

/* --- 9. Kaesten -------------------------------------------- */
.merkkasten{
  background:var(--flausch);
  border:1px solid var(--saum-zart);
  border-left:4px solid var(--honig);
  border-radius:0 var(--bogen) var(--bogen) 0;
  padding:clamp(1.15rem,2.8vw,1.6rem) clamp(1.15rem,3vw,1.75rem);
  margin-block:clamp(1.8rem,4vw,2.5rem);
}
.merkkasten__titel{
  font-family:var(--schrift-text);
  font-size:.73rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--honig-tief);
  margin-bottom:.7rem;
}
.merkkasten p + p{margin-top:.8rem}
.merkkasten--warnung{border-left-color:var(--kirsch);background:#fdf4f1}
.merkkasten--warnung .merkkasten__titel{color:var(--kirsch)}
.merkkasten--gruen{border-left-color:var(--loden);background:#f4f7f2}
.merkkasten--gruen .merkkasten__titel{color:var(--loden)}

/* Antwortkasten: der herausloesbare Kurzbescheid */
.antwortkasten{
  background:linear-gradient(148deg,#fffdf8 0%,#f6ecda 100%);
  border:1px solid var(--saum);
  border-radius:var(--bogen-gross);
  padding:clamp(1.35rem,3.4vw,2.1rem);
  margin-block:clamp(1.9rem,4vw,2.6rem);
  box-shadow:var(--schatten-sanft);
}
.antwortkasten .merkzeile{margin-bottom:.6rem}
.antwortkasten p{font-size:1.06rem;line-height:1.66}
.antwortkasten ul{margin-top:1rem !important}

/* Sprungmarken = Inhaltsverzeichnis */
.sprungmarken{
  border-top:2px solid var(--russ);
  border-bottom:1px dashed var(--saum);
  padding:1.1rem 0 1.3rem;
  margin-block:clamp(1.9rem,4vw,2.6rem);
}
.sprungmarken__titel{
  font-size:.73rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--russ-weich);margin-bottom:.85rem;
}
.sprungmarken ol{
  list-style:none;margin:0;padding:0;
  display:grid;gap:.42rem .1rem;
  counter-reset:sprung;
}
.sprungmarken li{counter-increment:sprung;padding-left:0}
.sprungmarken a{
  text-decoration:none;color:var(--russ);font-size:.95rem;font-weight:550;
}
.sprungmarken a::before{
  content:counter(sprung,decimal-leading-zero);
  color:var(--honig);font-weight:700;margin-right:.6rem;
  font-variant-numeric:tabular-nums;
}
.sprungmarken a:hover{color:var(--honig-tief);text-decoration:underline}
@media (min-width:700px){.sprungmarken ol{grid-template-columns:1fr 1fr;gap:.5rem 1.8rem}}

/* Schrittliste mit Knopfaugen */
.schrittliste{list-style:none;margin:clamp(1.7rem,3.5vw,2.3rem) 0;padding:0;counter-reset:schritt}
.schrittliste > li{
  position:relative;
  counter-increment:schritt;
  padding:0 0 0 3.55rem;
  margin-top:1.6rem;
}
.schrittliste > li:first-child{margin-top:0}
.schrittliste > li::before{
  content:counter(schritt);
  position:absolute;left:0;top:-.12em;
  width:2.45rem;height:2.45rem;
  border-radius:50%;
  background:var(--honig);
  color:#fff8ee;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--schrift-text);
  font-weight:700;font-size:.98rem;
  box-shadow:0 0 0 3px var(--wolle),0 0 0 4.5px var(--honig-hell);
}
.schrittliste h3{margin:0 0 .38rem;font-size:1.13rem}
.schrittliste p{color:var(--russ-weich)}
.schrittliste p + p{margin-top:.6rem}

/* Faktenblatt */
.faktenblatt{
  margin-block:clamp(1.8rem,4vw,2.4rem);
  border:1px solid var(--saum-zart);
  border-radius:var(--bogen);
  overflow:hidden;
  background:var(--flausch);
}
.faktenblatt div{
  display:grid;
  gap:.2rem;
  padding:.95rem clamp(1rem,2.6vw,1.4rem);
  border-top:1px dashed var(--saum);
}
.faktenblatt div:first-child{border-top:0}
.faktenblatt dt{
  font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--loden);
}
.faktenblatt dd{margin:0;font-size:.99rem}
@media (min-width:640px){
  .faktenblatt div{grid-template-columns:14rem 1fr;align-items:baseline;gap:1.2rem}
  .faktenblatt dt{padding-top:.16rem}
}

/* --- 10. Tabellen ------------------------------------------ */
.tabellenfeld{
  overflow-x:auto;
  margin-block:clamp(1.8rem,4vw,2.5rem);
  border:1px solid var(--saum-zart);
  border-radius:var(--bogen);
  background:var(--flausch);
}
.tabellenfeld table{min-width:34rem;font-size:.95rem}
.tabellenfeld caption{
  caption-side:top;
  text-align:left;
  padding:.95rem clamp(1rem,2.4vw,1.3rem) .1rem;
  font-size:.74rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--honig-tief);
}
.tabellenfeld th,.tabellenfeld td{
  text-align:left;
  padding:.82rem clamp(1rem,2.4vw,1.3rem);
  border-top:1px solid var(--saum-zart);
  vertical-align:top;
}
.tabellenfeld thead th{
  border-top:0;
  background:var(--wolle-tief);
  font-size:.79rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--russ);
}
.tabellenfeld tbody th{font-weight:650;color:var(--russ)}
.tabellenfeld tbody tr:nth-child(even) td,
.tabellenfeld tbody tr:nth-child(even) th{background:rgba(240,230,214,.42)}

/* --- 11. Fragen -------------------------------------------- */
.frageblock{margin-top:clamp(1.6rem,3.5vw,2.2rem);display:grid;gap:0}
.frage{
  border-top:1px dashed var(--saum);
  padding:clamp(1.15rem,2.6vw,1.55rem) 0;
}
.frage:last-child{border-bottom:1px dashed var(--saum)}
.frage h3{font-size:1.1rem;margin-bottom:.55rem}
.frage p{color:var(--russ-weich)}
.frage p + p{margin-top:.7rem}

/* --- 12. Weiterlesen --------------------------------------- */
.weiterlesen{margin-top:clamp(2.6rem,6vw,4rem)}
.weiterlesen .merkzeile{margin-bottom:1.1rem}

/* --- 13. Fussleiste ---------------------------------------- */
.fussleiste{
  background:var(--loden-tief);
  color:#d9d1c3;
  padding-block:clamp(2.8rem,6vw,4.2rem) clamp(1.6rem,3vw,2.2rem);
  margin-top:clamp(3rem,7vw,5rem);
}
.fussleiste__gitter{
  display:grid;
  gap:clamp(1.9rem,4.5vw,3rem);
  grid-template-columns:1fr;
}
@media (min-width:760px){
  .fussleiste__gitter{grid-template-columns:1.5fr 1fr 1fr}
}
.fussleiste h2{
  font-family:var(--schrift-text);
  font-size:.74rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--honig-hell);
  margin-bottom:1rem;
}
.fussleiste ul{list-style:none;margin:0;padding:0;display:grid;gap:.62rem}
.fussleiste a{color:#e8e1d5;text-decoration:none;font-size:.94rem}
.fussleiste a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.fussleiste__wort{
  font-family:var(--schrift-titel);
  font-size:1.42rem;
  color:#fdf8ef;
  margin-bottom:.8rem;
  letter-spacing:-.02em;
}
.fussleiste__haltung{font-size:.92rem;line-height:1.68;color:#c6bdad;max-width:34rem}
.fussleiste__haltung p + p{margin-top:.75rem}
.fussleiste__leiste{
  margin-top:clamp(2.2rem,5vw,3.2rem);
  padding-top:1.3rem;
  border-top:1px solid rgba(233,225,213,.16);
  display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;
  align-items:center;
  font-size:.83rem;
  color:#a89e8e;
}
.fussleiste__leiste a{font-size:.83rem;color:#a89e8e}

/* --- 14. Kleinkram ----------------------------------------- */
.nur-fuer-lesegeraete{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.mittig{text-align:center;margin-inline:auto}
.abstand-oben{margin-top:clamp(1.8rem,4vw,2.6rem)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}