/* ==========================================================================
   unterHUNDs – Stylesheet
   Farben: Grün und Gelb aus dem Logo, warmes Papierweiß als Grundton.
   Schrift: Bricolage Grotesque (Überschriften), Source Serif 4 (Fließtext),
            IBM Plex Mono (Etiketten und Zahlen).
   ========================================================================== */

/* --- Schriften, selbst gehostet ------------------------------------------- */
/* Kein Aufruf von Google-Servern: die Dateien liegen unter assets/schriften/.
   font-display:swap zeigt den Text sofort in der Ersatzschrift und tauscht,
   sobald die eigene Schrift geladen ist. */

@font-face{
  font-family:"Bricolage Grotesque";font-style:normal;font-weight:600;font-display:swap;
  src:url("../schriften/bricolage-grotesque-v9-latin_latin-ext-600.woff2") format("woff2");
}
@font-face{
  font-family:"Bricolage Grotesque";font-style:normal;font-weight:700;font-display:swap;
  src:url("../schriften/bricolage-grotesque-v9-latin_latin-ext-700.woff2") format("woff2");
}

@font-face{
  font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;
  src:url("../schriften/source-serif-4-v14-latin_latin-ext-regular.woff2") format("woff2");
}
@font-face{
  font-family:"Source Serif 4";font-style:italic;font-weight:400;font-display:swap;
  src:url("../schriften/source-serif-4-v14-latin_latin-ext-italic.woff2") format("woff2");
}
@font-face{
  font-family:"Source Serif 4";font-style:normal;font-weight:600;font-display:swap;
  src:url("../schriften/source-serif-4-v14-latin_latin-ext-600.woff2") format("woff2");
}
@font-face{
  font-family:"Source Serif 4";font-style:italic;font-weight:600;font-display:swap;
  src:url("../schriften/source-serif-4-v14-latin_latin-ext-600italic.woff2") format("woff2");
}

@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("../schriften/ibm-plex-mono-v20-latin_latin-ext-regular.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("../schriften/ibm-plex-mono-v20-latin_latin-ext-500.woff2") format("woff2");
}

:root{
  /* Die Seite ist bewusst hell. So weiss der Browser Bescheid und faerbt
     Eingabefelder, Bildlaufleisten und Auswahllisten passend – und
     Zwangsverdunklung greift nicht. */
  color-scheme: only light;

  --papier:#faf8f2;
  --papier-2:#f2efe4;
  --tinte:#191d19;
  --grau:#5e6a5f;
  --linie:#e2ded2;
  --tanne:#16351f;
  --wald:#2f6b3f;
  --wald-hell:#e8f0e7;
  --gelb:#f5c324;
  --marke-gruen:#237825;

  --rand:clamp(1.5rem,5vw,2.5rem);
  --breite:1140px;
  --rund:14px;
  --schatten:0 1px 0 var(--linie);

  --schrift-titel:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  --schrift-text:"Source Serif 4",Georgia,serif;
  --schrift-mono:"IBM Plex Mono",ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--schrift-text);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--schrift-titel);font-weight:700;line-height:1.08;margin:0 0 .5em;letter-spacing:-.015em}
h1{font-size:clamp(2.3rem,5.2vw,4rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
a{color:var(--wald);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--tanne)}
img{max-width:100%;height:auto;display:block}
ul{margin:0 0 1em;padding-left:1.1em}

:focus-visible{outline:3px solid var(--wald);outline-offset:3px;border-radius:4px}

.sprungmarke{position:absolute;left:-9999px;top:0;background:var(--tanne);color:#fff;padding:.7rem 1rem;z-index:100}
.sprungmarke:focus{left:0}

.etikett{
  font-family:var(--schrift-mono);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grau);margin:0 0 .9rem;
}

.bahn{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
/* Innenabstand der Abschnitte. War mit bis zu 96 px oben und unten sehr
   grosszuegig – auf breiten Bildschirmen entstanden dadurch Luecken, die wie
   ein Seitenende wirken. */
.abschnitt{padding:clamp(2.6rem,5vw,4.2rem) 0}
.abschnitt--dunkel{background:var(--tanne);color:#f4f2e9}
.abschnitt--dunkel h2,.abschnitt--dunkel h3{color:#fff}
.abschnitt--dunkel .etikett{color:var(--gelb)}
.abschnitt--dunkel a{color:var(--gelb)}

/* Weisse Karten in einem dunklen Abschnitt: Der helle Text des Abschnitts
   wird vererbt und ist auf Weiss nicht lesbar. Innerhalb der Karte gelten
   deshalb wieder die normalen Farben. */
.abschnitt--dunkel .karte,
.abschnitt--dunkel .hinweis,
.abschnitt--dunkel .tabelle{color:var(--tinte)}
.abschnitt--dunkel .karte h2,
.abschnitt--dunkel .karte h3,
.abschnitt--dunkel .hinweis h2,
.abschnitt--dunkel .hinweis h3{color:var(--tanne)}
.abschnitt--dunkel .karte a,
.abschnitt--dunkel .hinweis a{color:var(--wald)}
.abschnitt--dunkel .karte .etikett,
.abschnitt--dunkel .karte__preis,
.abschnitt--dunkel .karte__fuer{color:var(--grau)}
.abschnitt--sand{background:var(--papier-2)}

/* --- Kopf ---------------------------------------------------------------- */
/* Dunkelgruene Leiste im selben Ton wie der Fussbereich.
   Logo gross und mittig, Navigation darunter. */
/* Untere Kante hell statt dunkel: Auf hellem Grund war die dunkle Linie
   unsichtbar, auf dunklen Abschnitten verschmolz die Leiste mit dem Inhalt
   darunter. Die helle Linie ist in beiden Fällen zu sehen. */
.kopf{position:sticky;top:0;z-index:60;background:var(--tanne);
      border-bottom:1px solid rgba(255,255,255,.18);
      box-shadow:0 2px 12px rgba(0,0,0,.18)}

.kopf__marke{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding:.9rem clamp(1.1rem,4vw,2rem) .5rem;
  /* Eine Groesse steuert alles: Logohoehe. Siegel und Abstand sind daran
     gekoppelt, damit das Siegel genau so gross ist wie der Hundekopf im Logo
     und denselben Abstand haelt wie der Kopf zum Schriftzug. */
  --logo:clamp(64px,9vw,116px);
  --muenze:0.975;   /* Hoehe des Hundekopfs im Verhaeltnis zur Logohoehe */
  --luecke:0.075;   /* Abstand Hundekopf zur Schrift, gemessen im Logo */
}
.marke{display:inline-block;line-height:0}
.marke img{height:var(--logo);width:auto}
.kopf__siegel{
  line-height:0;flex:0 0 auto;padding:0;
  margin-left:calc(var(--logo) * var(--luecke));
}
.kopf__siegel img{height:calc(var(--logo) * var(--muenze));width:auto;border-radius:50%;background:#fff}

.nav{padding:0 var(--rand) .55rem}
.nav__liste{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.2rem clamp(.7rem,1.6vw,1.4rem);list-style:none;margin:0;padding:0;
}
.nav__punkt{position:relative}
.nav__punkt > a{
  font-family:var(--schrift-titel);font-weight:600;font-size:.97rem;
  color:#fff;text-decoration:none;padding:.45rem 0;display:inline-block;
  border-bottom:2px solid transparent;
}
.nav__punkt > a:hover,.nav__punkt > a[aria-current="page"]{border-bottom-color:var(--gelb)}
.nav__punkt--taste > a{border:0;padding:.42rem 1rem;line-height:1.2;white-space:nowrap}
.nav__punkt--taste{margin-left:clamp(.8rem,2vw,1.6rem)}

.nav__unter{
  position:absolute;left:50%;transform:translate(-50%,6px);top:100%;min-width:236px;
  background:#fff;border:1px solid var(--linie);border-radius:var(--rund);padding:.5rem;
  list-style:none;margin:0;box-shadow:0 14px 30px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;transition:.16s ease;z-index:5;
}
.nav__punkt--auf:hover .nav__unter,.nav__punkt--auf:focus-within .nav__unter{
  opacity:1;visibility:visible;transform:translate(-50%,0);
}
.nav__unter a{display:block;padding:.45rem .75rem;border-radius:8px;text-decoration:none;
              color:var(--tinte);font-size:.95rem}
.nav__unter a:hover{background:var(--wald-hell);color:var(--tanne)}

.menue-schalter{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.menue-schalter:focus-visible ~ .kopf__marke .menue-taste{outline:2px solid var(--gelb);outline-offset:3px}
.menue-taste{display:none;flex-direction:column;justify-content:center;gap:6px;cursor:pointer;
             position:absolute;right:var(--rand);top:50%;transform:translateY(-50%);
             width:48px;height:48px;align-items:center;-webkit-tap-highlight-color:transparent}
.menue-taste span{width:26px;height:2px;background:#fff;display:block;border-radius:2px;
                  transition:transform .2s ease,opacity .15s ease}
.menue-schalter:checked ~ .kopf__marke .menue-taste span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menue-schalter:checked ~ .kopf__marke .menue-taste span:nth-child(2){opacity:0}
.menue-schalter:checked ~ .kopf__marke .menue-taste span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* --- Tasten -------------------------------------------------------------- */
.taste{
  display:inline-block;font-family:var(--schrift-titel);font-weight:600;font-size:1rem;
  background:var(--wald);color:#fff;text-decoration:none;
  padding:.85rem 1.5rem;border-radius:999px;transition:background .16s ease,transform .16s ease;
}
.taste:hover{background:var(--tanne);color:#fff;transform:translateY(-1px)}
.taste--klein{padding:.55rem 1.1rem;font-size:.92rem}
.kopf .taste{background:var(--gelb);color:var(--tanne)}
.kopf .taste:hover{background:#fff;color:var(--tanne)}
.taste--rand{background:transparent;color:var(--tanne);border:1.5px solid var(--tanne)}
.taste--rand:hover{background:var(--tanne);color:#fff}
.taste--gelb{background:var(--gelb);color:var(--tanne)}
.taste--gelb:hover{background:#e0af12;color:var(--tanne)}

/* --- Aufmacher ----------------------------------------------------------- */
.aufmacher{padding:clamp(2.4rem,5vw,4.2rem) 0 clamp(1.6rem,3vw,2.4rem)}
/* Endet der Aufmacher mit einem Kasten, reicht wenig Abstand nach unten –
   sonst wirkt die Seite dort zu Ende. */
.aufmacher > .hinweis:last-child{margin-bottom:0}
.aufmacher__raster{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
/* Gelbe Hervorhebung als Strich UNTER dem Wort. Der Balken lag vorher
   quer im Text und schnitt durch Unterlaengen wie das g in Alltag. */
.aufmacher h1 .streich{position:relative;display:inline-block;white-space:nowrap}
.aufmacher h1 .streich::after{
  content:"";position:absolute;left:-.03em;right:-.03em;bottom:-.1em;
  height:.11em;background:var(--gelb);border-radius:.05em;
}
.aufmacher__vorspann{font-size:1.2rem;color:var(--grau);max-width:48em;margin-bottom:1.8rem}
.aufmacher__tasten{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.6rem}
.aufmacher__beleg{font-family:var(--schrift-mono);font-size:.8rem;color:var(--grau);letter-spacing:.02em}
.aufmacher__bild{position:relative;border-radius:var(--rund);overflow:hidden;background:var(--wald-hell);aspect-ratio:4/3}
.aufmacher__bild img{width:100%;height:100%;object-fit:cover}
.aufmacher__bild picture{height:100%}

/* --- Lebensphasen (Signaturelement) -------------------------------------- */
.phasen{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);background:#fff}
.phasen__kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:2.5rem}
.phasen__kopf h2{margin:0;max-width:20ch}
.phasen__achse{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.phasen__achse::before{
  content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--linie);
}
.phase{position:relative;padding-top:2.4rem;text-decoration:none;color:inherit;display:block}
.phase::before{
  content:"";position:absolute;top:2px;left:0;width:16px;height:16px;border-radius:50%;
  background:var(--papier);border:2px solid var(--wald);transition:.16s ease;
}
.phase:hover::before{background:var(--gelb);border-color:var(--gelb)}
.phase__zeit{font-family:var(--schrift-mono);font-size:.74rem;color:var(--grau);display:block;margin-bottom:.35rem}
.phase__name{font-family:var(--schrift-titel);font-weight:700;font-size:1.08rem;display:block;margin-bottom:.3rem;color:var(--tanne)}
.phase__text{font-size:.95rem;color:var(--grau);margin:0}

/* --- Karten -------------------------------------------------------------- */
.raster{display:grid;gap:1.4rem}
.raster--3{grid-template-columns:repeat(3,1fr)}
.raster--2{grid-template-columns:repeat(2,1fr)}
.karte{
  background:#fff;border:1px solid var(--linie);border-radius:var(--rund);
  padding:1.6rem;display:flex;flex-direction:column;
  transition:border-color .16s ease,transform .16s ease;
}
.karte:hover{border-color:var(--wald);transform:translateY(-2px)}
.karte h3{margin-bottom:.4rem}
.karte h3 a{text-decoration:none;color:var(--tanne)}
.karte p{color:var(--grau);font-size:.98rem;margin-bottom:1rem}
.karte__preis{margin-top:auto;font-family:var(--schrift-mono);font-size:.82rem;color:var(--tinte);border-top:1px solid var(--linie);padding-top:.8rem}
.karte--bild{padding:0;overflow:hidden}
.karte--bild img{aspect-ratio:4/3;object-fit:cover;width:100%}
.karte--bild .karte__text{padding:1.4rem}

/* --- Zwei Spalten -------------------------------------------------------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,3.5rem);align-items:start}
.liste-haken{list-style:none;padding:0;margin:0 0 1.5rem}
.liste-haken li{position:relative;padding-left:1.7rem;margin-bottom:.6rem}
.liste-haken li::before{
  content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;
  background:var(--gelb);
}

/* --- Preise -------------------------------------------------------------- */
.preise{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-bottom:2rem}
.preis{border:1px solid var(--linie);border-radius:var(--rund);padding:1.4rem;background:#fff}
.preis__wert{font-family:var(--schrift-titel);font-weight:800;font-size:2rem;color:var(--tanne);line-height:1;margin:.2rem 0 .4rem}
.preis__zusatz{font-size:.92rem;color:var(--grau);margin:0}

/* --- Orte ---------------------------------------------------------------- */
.orte{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0;margin:0}
.orte li{
  font-family:var(--schrift-mono);font-size:.85rem;
  border:1px solid var(--linie);border-radius:999px;padding:.35rem .9rem;background:#fff;
}

/* --- Schlussaufruf ------------------------------------------------------- */
.aufruf{background:var(--wald-hell);border-radius:var(--rund);padding:clamp(2rem,5vw,3.2rem);text-align:center}
.aufruf h2{max-width:18ch;margin:0 auto .8rem}
.aufruf p{max-width:52ch;margin:0 auto 1.6rem;color:var(--grau)}
.aufruf__tasten{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}

/* --- Fuß ----------------------------------------------------------------- */
.fuss{background:var(--tanne);color:#dfe6dd;margin-top:0;padding:clamp(3rem,6vw,4.5rem) 0 1.5rem}
.fuss a{color:#fff;text-decoration:none}
.fuss a:hover{color:var(--gelb)}
.fuss__innen{max-width:var(--breite);margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem);display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2rem}
.fuss .etikett{color:var(--gelb)}
.fuss__gross{font-family:var(--schrift-titel);font-size:1.2rem;font-weight:600;line-height:1.5}
.fuss__liste{list-style:none;padding:0;margin:0}
.fuss__liste li{margin-bottom:.45rem}
.fuss__zeile{
  max-width:var(--breite);margin:2.5rem auto 0;padding:1.2rem clamp(1.1rem,4vw,2rem) 0;
  border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;
  font-size:.88rem;color:#b9c6b8;
}
.fuss__zeile p{margin:0}

/* --- Schmale Bildschirme ------------------------------------------------- */
@media (max-width:960px){
  .aufmacher__raster,.duo{grid-template-columns:1fr}
  .raster--3,.raster--2,.preise{grid-template-columns:1fr 1fr}
  .phasen__achse{grid-template-columns:1fr;gap:1.6rem}
  .phasen__achse::before{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .phase{padding-top:0;padding-left:2.2rem}
  .phase::before{top:.25rem;left:0}
  .fuss__innen{grid-template-columns:1fr 1fr}
}

@media (max-width:760px){
  .menue-taste{display:flex}
  .kopf__marke{justify-content:flex-start;padding-right:4rem}
  .nav{
    position:absolute;left:0;right:0;top:100%;background:var(--tanne);
    border-bottom:1px solid rgba(0,0,0,.25);padding:.6rem clamp(1.1rem,4vw,2rem) 1.4rem;
    display:none;
  }
  .menue-schalter:checked ~ .nav{display:block}
  .nav{max-height:calc(100dvh - 100%);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .nav__liste{flex-direction:column;align-items:stretch;gap:0}
  .nav__punkt > a{padding:.7rem 0;display:block;border-bottom:1px solid rgba(255,255,255,.18)}
  .nav__punkt--taste{margin:.9rem 0 0}
  .nav__punkt--taste > a{display:inline-block;padding:.55rem 1.1rem}
  .nav__unter{
    position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;
    padding:.3rem 0 .6rem .8rem;background:transparent;min-width:0;
  }
  .nav__unter a{color:rgba(255,255,255,.85);padding:.4rem 0}
  .nav__unter a:hover{background:transparent;color:var(--gelb)}
  .raster--3,.raster--2,.preise{grid-template-columns:1fr}

  /* Logo darf auf dem Handy nicht die halbe Leiste einnehmen */
  .kopf__marke{--logo:clamp(46px,13vw,64px)}

  /* Fliesstext etwas kleiner, damit weniger Umbrueche entstehen */
  body{font-size:16px}
  h1{font-size:clamp(1.7rem,7.5vw,2.3rem)}
  h2{font-size:clamp(1.3rem,5.5vw,1.7rem)}
  .aufmacher__vorspann{font-size:1.05rem}

  /* Karten und Kaesten bekommen innen Luft, aussen den Seitenrand */
  .karte{padding:1.1rem 1.2rem}
  .hinweis{padding-left:1rem}
  .liste-haken li{padding-left:1.4rem}
}

@media (max-width:520px){
  .fuss__innen{grid-template-columns:1fr}
}

/* --- Leistungsverzeichnis (Seite Kurse und Preise) ----------------------- */
.sprungnav{
  display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0 0 1rem;
}
.sprungnav a{
  font-family:var(--schrift-mono);font-size:.82rem;text-decoration:none;color:var(--tanne);
  border:1px solid var(--linie);background:#fff;border-radius:999px;padding:.4rem 1rem;display:inline-block;
}
.sprungnav a:hover{background:var(--tanne);color:#fff;border-color:var(--tanne)}

.gruppe{margin-bottom:clamp(2.5rem,5vw,4rem)}
.gruppe > h2{margin-bottom:.3rem}
.gruppe__hinweis{color:var(--grau);max-width:62ch;margin-bottom:1.8rem}

.leistungen{list-style:none;padding:0;margin:0;border-top:1px solid var(--linie)}
.leistung{
  display:grid;grid-template-columns:1fr auto;gap:.4rem 2rem;align-items:baseline;
  padding:1.15rem 0;border-bottom:1px solid var(--linie);
}
.leistung:hover{background:rgba(255,255,255,.6)}
.leistung__name{font-family:var(--schrift-titel);font-weight:700;font-size:1.1rem;margin:0}
.leistung__name a{text-decoration:none;color:var(--tanne)}
.leistung__name a:hover{text-decoration:underline}
.leistung__preis{
  font-family:var(--schrift-mono);font-size:.95rem;color:var(--tinte);white-space:nowrap;text-align:right;
}
.leistung__text{grid-column:1 / -1;margin:0;color:var(--grau);font-size:.98rem;max-width:70ch}

.hinweis{
  border-left:3px solid var(--gelb);background:#fff;border-radius:0 var(--rund) var(--rund) 0;
  padding:1.2rem 1.4rem;margin:0 0 1.5rem;
}
.hinweis p:last-child{margin-bottom:0}

@media (max-width:560px){
  .leistung{grid-template-columns:1fr}
  .leistung__preis{text-align:left}
}

/* --- Bilder --------------------------------------------------------------- */
picture{display:block}
.bild-fehlt{
  display:flex;align-items:center;justify-content:center;min-height:120px;
  background:var(--wald-hell);border:1px dashed var(--wald);border-radius:var(--rund);
  font-family:var(--schrift-mono);font-size:.8rem;color:var(--wald);padding:1rem;text-align:center;
}
.karte__bild img,.leistung__bild img{width:100%;height:auto;display:block}
.leistung{grid-template-columns:auto 1fr auto;align-items:center}
.leistung__name,.leistung__preis{align-self:center}
.leistung__bild{
  grid-row:span 2;align-self:center;   /* mittig zur Zeile statt an der Grundlinie */
  width:104px;border-radius:10px;overflow:hidden;background:var(--wald-hell);
}
.leistung__bild img{aspect-ratio:4/3;object-fit:cover}
.leistung:not(:has(.leistung__bild)){grid-template-columns:1fr auto}
.leistung__text{grid-column:2 / -1}
.leistung:not(:has(.leistung__bild)) .leistung__text{grid-column:1 / -1}
@media (max-width:560px){
  .leistung{grid-template-columns:72px 1fr}
  .leistung__bild{width:72px}
  .leistung__text{grid-column:1 / -1}
}

/* --- Logo und Siegel ------------------------------------------------------ */
/* Logo steht frei auf der gruenen Leiste, keine Hinterlegung noetig. */
.fuss__logo{height:36px;width:auto;margin-bottom:1.1rem}
.fuss__siegel{display:inline-block;line-height:0;background:#fff;border-radius:50%;padding:4px}
.fuss__siegel img{height:52px;width:auto}
.fuss__zeile{align-items:center}


/* --- Fliesstext auf Unterseiten ------------------------------------------ */
.fliesstext{max-width:none}
.fliesstext h2{margin-top:2.4rem}
.fliesstext h2:first-child{margin-top:0}

/* --- Team ---------------------------------------------------------------- */
.leitung{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
.person{display:grid;grid-template-columns:200px 1fr;gap:1.4rem;align-items:start}
.person--gross{grid-template-columns:220px 1fr;align-items:center;
  background:#fff;border:1px solid var(--linie);border-radius:var(--rund);padding:1.2rem}
.person__bild{border-radius:var(--rund);overflow:hidden;background:var(--wald-hell)}
.person__bild img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;
                  object-position:50% 20%;display:block}
.person h2{margin-bottom:.2rem}
.person h3{margin-bottom:.2rem;color:var(--tanne)}
.person__rolle{font-family:var(--schrift-mono);font-size:.8rem;color:var(--grau);margin-bottom:.8rem}
.person__text p:last-child{margin-bottom:0}
.team{display:grid;grid-template-columns:1fr 1fr;gap:2rem 2.5rem}

@media (max-width:960px){
  .leitung,.team{grid-template-columns:1fr}
}
@media (max-width:560px){
  .person,.person--gross{grid-template-columns:110px 1fr;gap:1rem}
}

/* --- Datenliste in Karten ------------------------------------------------ */
.daten{margin:0 0 1rem;display:grid;grid-template-columns:auto 1fr;gap:.25rem .9rem;font-size:.95rem}
.daten dt{font-family:var(--schrift-mono);font-size:.76rem;text-transform:uppercase;
          letter-spacing:.08em;color:var(--grau);padding-top:.18rem}
.daten dd{margin:0;color:var(--tinte)}

/* --- Einstiegstext auf der Startseite ------------------------------------ */
.einstieg{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,3.5rem);
          margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:clamp(2rem,4vw,3rem);
          border-top:1px solid var(--linie)}
.einstieg h2{font-size:clamp(1.35rem,2.2vw,1.7rem)}
@media (max-width:860px){.einstieg{grid-template-columns:1fr}}

/* --- Nummerierter Ablauf -------------------------------------------------- */
.ablauf{list-style:none;counter-reset:schritt;padding:0;margin:0 0 1.4rem}
.ablauf li{counter-increment:schritt;position:relative;padding-left:2.4rem;margin-bottom:.7rem}
.ablauf li::before{
  content:counter(schritt);position:absolute;left:0;top:.05em;
  width:1.6rem;height:1.6rem;border-radius:50%;background:var(--gelb);color:var(--tanne);
  font-family:var(--schrift-mono);font-size:.8rem;display:flex;align-items:center;justify-content:center;
}

/* --- Aufklappbare Fragen -------------------------------------------------- */
.faq{border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie);background:#fff}
.faq summary{
  cursor:pointer;list-style:none;padding:1rem 2.6rem 1rem 1.1rem;position:relative;
  font-family:var(--schrift-titel);font-weight:600;font-size:1.03rem;color:var(--tanne);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:1.1rem;top:1.45rem;width:9px;height:9px;
  border-right:2px solid var(--wald);border-bottom:2px solid var(--wald);
  transform:rotate(45deg);transition:transform .16s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.65rem}
.faq summary:hover{background:var(--wald-hell)}
.faq details p{margin:0;padding:0 2.6rem 1.2rem 1.1rem;color:var(--grau);max-width:80ch}

/* --- Bildergalerie -------------------------------------------------------- */
.galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.5rem}
.galerie figure{margin:0;border-radius:var(--rund);overflow:hidden;background:var(--wald-hell)}
.galerie img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;display:block}
@media (max-width:760px){.galerie{grid-template-columns:1fr 1fr}}

/* --- Einzelne Bildblöcke im Text ----------------------------------------- */
.bild-block{margin:1.4rem 0 0;border-radius:var(--rund);overflow:hidden;background:var(--wald-hell)}
.bild-block img{width:100%;height:auto;display:block}
.bild-paar{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.4rem}
.bild-paar figure{margin:0;border-radius:var(--rund);overflow:hidden;background:var(--wald-hell)}
.bild-paar img{width:100%;height:auto;display:block}

/* --- Tabellen in Rechtstexten -------------------------------------------- */
.tabelle{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.96rem}
.tabelle th,.tabelle td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--linie);vertical-align:top}
.tabelle th{font-family:var(--schrift-titel);font-size:.85rem;text-transform:uppercase;
            letter-spacing:.06em;color:var(--grau);background:var(--papier-2)}
@media (max-width:700px){
  .tabelle thead{display:none}
  .tabelle tr{display:block;border:1px solid var(--linie);border-radius:var(--rund);
              margin-bottom:.9rem;padding:.5rem .8rem;background:#fff}
  .tabelle td{display:block;border:0;padding:.35rem 0}
  .tabelle td::before{content:attr(data-label);display:block;font-family:var(--schrift-mono);
                      font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--grau)}
}

/* --- Hervorgehobener Widerspruchshinweis --------------------------------- */
.widerspruch{border:2px solid var(--tanne);border-radius:var(--rund);padding:1.6rem 1.8rem;
             margin:2.5rem 0;background:#fff;max-width:70ch}
.widerspruch h2{font-size:1.35rem}

/* --- Google-Bewertungen --------------------------------------------------- */
/* Bewertungsblock: oben Abstand zum Bild, unten wenig – die Abschnitte
   bringen ihren eigenen Innenabstand schon mit. */
.bewertungen{margin:2rem 0 .5rem}
/* Steht er am Ende des Aufmachers, entfaellt der untere Abstand ganz. */
.aufmacher > .bewertungen:last-child{margin-bottom:0}
.bewertungen__liste{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.bewertungen__hinweis{font-size:.95rem;color:var(--grau);margin:0}
.bewertung{
  width:190px;background:#fff;border:1px solid var(--linie);border-radius:12px;
  padding:16px 12px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.07);
  display:flex;flex-direction:column;gap:5px;
}
.bewertung__ort{font-family:var(--schrift-titel);font-size:1.05rem;font-weight:700;color:var(--tanne)}
.bewertung__sterne{color:#fbbc04;font-size:1.15rem;line-height:1;letter-spacing:1px}
.bewertung__note{font-size:1rem;font-weight:600;color:var(--tinte)}
.bewertung__anzahl{font-size:.82rem;color:var(--grau)}
.bewertung__link{font-size:.82rem;color:#4285F4;text-decoration:none;margin-top:.2rem}
.bewertung__link:hover{text-decoration:underline;color:#4285F4}

/* Auf dem Handy zwei nebeneinander – Sterne bleiben sichtbar */
@media (max-width:768px){
  .bewertungen__liste{gap:10px}
  .bewertung{width:calc(50% - 5px);padding:12px 8px}
  .bewertung__ort{font-size:.95rem}
  .bewertung__sterne{font-size:1.05rem}
  .bewertung__note{font-size:.92rem}
  .bewertung__anzahl{font-size:.76rem}
}
@media (max-width:380px){
  .bewertung{width:100%}
}
}

/* --- Einwilligungsbanner --------------------------------------------------- */
.consent{
  position:fixed;inset:auto 0 0 0;z-index:900;display:flex;justify-content:center;
  padding:1rem;background:rgba(22,53,31,.35);backdrop-filter:blur(2px);
}
.consent__kasten{
  background:#fff;border-radius:var(--rund);box-shadow:0 8px 40px rgba(0,0,0,.25);
  padding:1.6rem 1.8rem;max-width:640px;width:100%;max-height:88vh;overflow:auto;
}
.consent__titel{font-size:1.25rem;margin:0 0 .5rem}
.consent__text{font-size:.97rem;color:var(--grau);margin:0 0 1.1rem}
.consent__zeile{
  display:flex;gap:.7rem;align-items:flex-start;padding:.55rem 0;
  border-top:1px solid var(--linie);font-size:.93rem;cursor:pointer;
}
.consent__zeile--fest{cursor:default;color:var(--grau)}
.consent__zeile input{margin-top:.2rem;width:18px;height:18px;accent-color:var(--wald);flex:0 0 auto}
.consent__tasten{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.consent__tasten .taste{font-size:.95rem;padding:.6rem 1.1rem}
.taste--schlicht{background:none;border:0;color:var(--grau);text-decoration:underline;padding:.6rem .4rem}
.taste--schlicht:hover{color:var(--tanne)}
.consent__fuss{font-size:.85rem;color:var(--grau);margin:1rem 0 0}
@media (max-width:600px){
  .consent{padding:0}
  .consent__kasten{border-radius:var(--rund) var(--rund) 0 0;padding:1.2rem 1.1rem}
  .consent__tasten .taste{flex:1 1 100%;text-align:center}
}

/* --- Randabstand auf schmalen Bildschirmen -------------------------------- */
/* Einzelne Bausteine bringen eigene Innenabstaende mit oder sitzen ausserhalb
   von .bahn. Damit auf dem Handy nichts am Displayrand klebt, bekommen sie
   hier denselben Rand wie der Rest. */
@media (max-width:760px){
  .bahn{padding-left:var(--rand);padding-right:var(--rand)}
  .fliesstext,.duo,.einstieg,.raster,.leistungen,.faq,.sprungnav,.orte,
  .phasen__achse,.galerie,.aufmacher__raster{padding-left:0;padding-right:0}
  .hinweis{margin-left:0;margin-right:0}
  .tabelle{margin-left:0;margin-right:0}
  /* Bilder duerfen bis an den Rand, aber nicht darueber hinaus */
  img{max-width:100%;height:auto}
}

/* --- Blog ----------------------------------------------------------------- */
.blaettern{display:flex;align-items:center;justify-content:center;gap:1.2rem;
           margin-top:2.5rem;font-family:var(--schrift-mono);font-size:.9rem}
.blaettern a{color:var(--wald);text-decoration:none;border-bottom:2px solid var(--gelb);padding:.2rem 0}
.blaettern span{color:var(--grau)}

/* Fliesstext eines Beitrags: Abstaende fuer Inhalte aus der Datenbank */
.beitrag h2{margin-top:2.2rem}
.beitrag h3{margin-top:1.6rem}
.beitrag p{margin:0 0 1.1rem}
.beitrag ul,.beitrag ol{margin:0 0 1.2rem 1.2rem}
.beitrag li{margin-bottom:.4rem}
.beitrag img{max-width:100%;height:auto;border-radius:var(--rund);margin:1.4rem 0}
.beitrag figure{margin:1.6rem 0}
.beitrag figcaption{font-size:.88rem;color:var(--grau);margin-top:.5rem}
.beitrag blockquote{margin:1.6rem 0;padding:.2rem 0 .2rem 1.1rem;
                    border-left:3px solid var(--gelb);color:var(--grau)}
.beitrag table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.96rem}
.beitrag th,.beitrag td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--linie)}

/* --- Zielgruppenzeile in Produktkarten ------------------------------------ */
/* Kein Sperrsatz in Grossbuchstaben: die Zeilen sind zu lang dafuer. */
.karte__fuer{
  font-family:var(--schrift-titel);font-size:.92rem;font-weight:600;
  color:var(--wald);margin:0 0 .6rem;
}

/* --- Produktkarten: gleiche Höhe, Taste immer unten ----------------------- */
/* Die Karten in einem Raster sind unterschiedlich lang. Ohne Hilfe steht die
   Taste mal höher, mal tiefer. Mit flex und margin-top:auto sitzt sie überall
   auf gleicher Höhe am unteren Rand. */
.raster > .karte{display:flex;flex-direction:column}
.karte--bild > .karte__text{display:flex;flex-direction:column;flex:1}
.karte__text > p:last-child{
  margin-top:auto;margin-bottom:0;padding-top:1rem;
  display:flex;flex-wrap:wrap;gap:.6rem;    /* Abstand zwischen mehreren Tasten */
}
.karte__text > p:last-child .taste{flex:1 1 100%;text-align:center}

/* Zielgruppe: normale Schrift statt Versalien, damit lange Angaben lesbar bleiben */
.karte__fuer{font-size:.92rem;color:var(--grau);margin:-.2rem 0 .7rem;font-style:italic}

/* Preisangabe optisch vom Fließtext trennen */
.karte__text .karte__preis{border-top:1px solid var(--linie);padding-top:.7rem;margin-top:.9rem}

/* ==========================================================================
   Übernommene Seiten
   Aus dem bestehenden Bestand übernommene Seiten (Einblick in die Ausbildung,
   Informationen für Veterinärämter, Partnerangebot) bringen ihre eigene
   Auszeichnung mit. Statt sie umzuschreiben, kleiden wir sie hier neu ein.
   ========================================================================== */
.uebernommen .wrap{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.uebernommen .hero,.uebernommen .titel{padding:clamp(2.5rem,5vw,4rem) 0 1.5rem}
.uebernommen .hero h1,.uebernommen .titel h1{margin:0 0 .8rem}
.uebernommen .eyebrow{
  font-family:var(--schrift-mono);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--wald);margin:0 0 .6rem;
}
.uebernommen .lead{font-size:1.1rem;color:var(--grau);max-width:70ch}
.uebernommen .sec{padding:clamp(2rem,4vw,3rem) 0;border-top:1px solid var(--linie)}
.uebernommen .sec > h2{margin-top:0}

/* Kästen, Werkzeuge, Zahlen, Textproben */
.uebernommen .tool,.uebernommen .note,.uebernommen .fakt,.uebernommen .probe,
.uebernommen .schwerpunkt,.uebernommen .stat,.uebernommen .umfang,.uebernommen .shot{
  background:#fff;border:1px solid var(--linie);border-radius:var(--rund);
  padding:1.2rem 1.4rem;margin:1.1rem 0;
}
.uebernommen .note{border-left:4px solid var(--gelb)}
.uebernommen .probe{background:var(--papier-2);font-size:.97rem}
.uebernommen .stat,.uebernommen .summe{font-family:var(--schrift-mono)}
.uebernommen .summe{font-weight:600;color:var(--tanne)}
.uebernommen .sp-ico{font-size:1.4rem;line-height:1;margin-bottom:.4rem}
.uebernommen .sp-desc{color:var(--grau)}
.uebernommen .sp-list{margin:.6rem 0 0 1.1rem}
.uebernommen .zeit{font-family:var(--schrift-mono);font-size:.82rem;color:var(--grau)}

/* Artikelauszüge: Titel, Merkmal, Beschreibung */
.uebernommen .art-t{font-family:var(--schrift-titel);font-weight:600;color:var(--tanne)}
.uebernommen .art-m{font-family:var(--schrift-mono);font-size:.82rem;color:var(--grau)}
.uebernommen .art-d{color:var(--grau);font-size:.95rem}

/* Tasten und Tabellen */
.uebernommen .btn{
  display:inline-block;background:var(--gelb);color:var(--tanne);font-weight:600;
  padding:.7rem 1.4rem;border-radius:999px;text-decoration:none;
  font-family:var(--schrift-titel);border:2px solid var(--gelb);
}
.uebernommen .btn:hover{background:transparent}
.uebernommen table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.96rem}
.uebernommen th,.uebernommen td{
  text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--linie);vertical-align:top;
}
.uebernommen th{
  font-family:var(--schrift-titel);font-size:.85rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--grau);background:var(--papier-2);
}
.uebernommen img{max-width:100%;height:auto;border-radius:var(--rund)}
.uebernommen .p-calm{color:var(--grau)}

/* --- Formulare in übernommenen Seiten ------------------------------------- */
.uebernommen fieldset{
  border:1px solid var(--linie);border-radius:var(--rund);background:#fff;
  padding:1.3rem 1.4rem;margin:0 0 1.2rem;
}
.uebernommen legend{
  font-family:var(--schrift-titel);font-weight:600;color:var(--tanne);
  padding:0 .5rem;font-size:1.02rem;
}
.uebernommen label{display:block;margin-bottom:.9rem;font-size:.97rem}
.uebernommen label > span,.uebernommen .feldname{display:block;margin-bottom:.3rem;font-weight:600}
.uebernommen input[type="text"],.uebernommen input[type="email"],
.uebernommen input[type="tel"],.uebernommen input[type="url"],
.uebernommen input[type="number"],.uebernommen select,.uebernommen textarea{
  width:100%;max-width:34rem;display:block;margin-top:.25rem;
  font:inherit;font-size:1rem;color:var(--tinte);background:var(--papier);
  border:1px solid var(--linie);border-radius:8px;padding:.6rem .75rem;
}
.uebernommen textarea{min-height:7rem;resize:vertical}
.uebernommen input:focus,.uebernommen select:focus,.uebernommen textarea:focus{
  outline:2px solid var(--wald);outline-offset:1px;border-color:var(--wald);
}
.uebernommen input[type="checkbox"],.uebernommen input[type="radio"]{
  width:18px;height:18px;accent-color:var(--wald);margin-right:.5rem;vertical-align:-3px;
}
.uebernommen small,.uebernommen .hinweistext{display:block;color:var(--grau);font-size:.88rem;margin-top:.25rem}
.uebernommen button[type="submit"],.uebernommen input[type="submit"]{
  font-family:var(--schrift-titel);font-weight:600;font-size:1rem;cursor:pointer;
  background:var(--gelb);color:var(--tanne);border:2px solid var(--gelb);
  border-radius:999px;padding:.75rem 1.6rem;
}
.uebernommen button[type="submit"]:hover,.uebernommen input[type="submit"]:hover{background:transparent}
.uebernommen .pflicht,.uebernommen .stern{color:var(--wald)}

/* --- Abstand zum Fuß ------------------------------------------------------ */
/* Übernommene Seiten enden oft direkt mit einem Kasten oder Tasten. Ohne
   Abstand stoßen sie an den Fuß. */
.uebernommen > *:last-child{padding-bottom:clamp(2.5rem,5vw,4rem)}

/* Endet eine Seite mit einem dunklen Abschnitt, verschmilzt er mit dem
   ebenfalls dunklen Fuß. Eine feine Linie trennt beide. */
.fuss{border-top:1px solid rgba(255,255,255,.16)}

/* --- Suche und Ansichtswechsel in Blog und Research ----------------------- */
.werkzeugleiste{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  margin:1.6rem 0 0;padding:1rem 0;border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie);
}
.suche{display:flex;gap:.5rem;align-items:center;flex:1 1 18rem}
.suche input[type="search"]{
  flex:1;font:inherit;font-size:1rem;padding:.55rem .8rem;background:#fff;
  border:1px solid var(--linie);border-radius:999px;color:var(--tinte);min-width:0;
}
.suche input[type="search"]:focus{outline:2px solid var(--wald);outline-offset:1px}
.suche button{
  font-family:var(--schrift-titel);font-weight:600;font-size:.95rem;cursor:pointer;
  background:var(--gelb);color:var(--tanne);border:2px solid var(--gelb);
  border-radius:999px;padding:.5rem 1.1rem;
}
.suche button:hover{background:transparent}
.ansicht{display:flex;gap:.4rem;font-family:var(--schrift-mono);font-size:.82rem}
.ansicht a{
  padding:.4rem .8rem;border:1px solid var(--linie);border-radius:999px;
  text-decoration:none;color:var(--grau);background:#fff;
}
.ansicht a[aria-current="page"]{background:var(--tanne);border-color:var(--tanne);color:#fff}
.treffer{font-family:var(--schrift-mono);font-size:.85rem;color:var(--grau);margin:1.2rem 0 0}

/* Listenansicht: kompakt, ohne Bilder */
.liste-beitraege{list-style:none;margin:1.5rem 0 0;padding:0;border-top:1px solid var(--linie)}
.liste-beitraege li{
  display:grid;grid-template-columns:1fr auto;gap:.4rem 1.5rem;align-items:baseline;
  padding:.9rem 0;border-bottom:1px solid var(--linie);
}
.liste-beitraege a{
  font-family:var(--schrift-titel);font-weight:600;font-size:1.03rem;
  color:var(--tanne);text-decoration:none;
}
.liste-beitraege a:hover{text-decoration:underline;text-decoration-color:var(--gelb)}
.liste-beitraege .liste-datum{font-family:var(--schrift-mono);font-size:.82rem;color:var(--grau);white-space:nowrap}
.liste-beitraege .liste-text{grid-column:1 / -1;color:var(--grau);font-size:.95rem;margin:0}
@media (max-width:600px){
  .liste-beitraege li{grid-template-columns:1fr}
  .liste-beitraege .liste-datum{grid-row:3}
}

/* Nur für Screenreader sichtbar */
.visuell-versteckt{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Quadratische Aufmacherbilder – etwa Porträts im Format 1:1 */
.aufmacher__bild--quadrat{aspect-ratio:1/1;max-width:420px;margin-left:auto}
@media (max-width:960px){.aufmacher__bild--quadrat{margin:0 auto}}

/* --- Übernommene Bausteine (Lerntrainer, Bewertungen) --------------------- */
/* Sie bringen ihre eigene Gestaltung mit. Hier nur der Rahmen: volle Breite
   der Textspalte, Abstand nach oben und unten. */
.baustein{margin:2rem 0;font-family:var(--schrift-titel)}
.baustein *{box-sizing:border-box}
.baustein__titel{font-size:1.35rem;font-weight:700;margin:0 0 .4rem}

/* --- Elliot im Fußbereich -------------------------------------------------- */
.fuss__elliot{margin:0;display:flex;flex-direction:column;align-items:center;gap:.3rem;flex:0 0 auto}
.fuss__elliot img{width:92px;height:92px;display:block}
.fuss__elliot figcaption{
  font-family:var(--schrift-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gelb);opacity:.9;
}
@media (max-width:760px){
  .fuss__elliot img{width:76px;height:76px}
}

/* --- Breite in Beiträgen und Fachartikeln --------------------------------- */
/* Der Text stand deutlich schmaler als die Überschrift darüber. Innerhalb der
   Beiträge nutzen wir die volle Spaltenbreite; nur einzelne Absätze bleiben
   begrenzt, damit die Zeilen lesbar bleiben. */
/* Ein gemeinsames Maß für Text und Überschriften: Sie sollen an derselben
   Kante enden. Nur Bausteine, Bilder, Tabellen und Raster nutzen die volle
   Breite. */
/* Festes Maß in rem statt in ch: ch richtet sich nach der Schriftgröße,
   dadurch lief eine große Überschrift weiter als der Fließtext darunter. */
.beitrag{--satzbreite:100%;max-width:none}
.beitrag > p,
.beitrag > ul,
.beitrag > ol,
.beitrag > blockquote,
.beitrag > h2,
.beitrag > h3,
.beitrag > h4{max-width:var(--satzbreite)}
.beitrag > table,
.beitrag > figure,
.beitrag > .faq,
.beitrag > .raster,
.beitrag > .baustein{max-width:none}


/* Bewertungskasten links bündig zum Text, nicht mittig */
.baustein--bewertungen-sachkunde .uh-uhb,
.baustein--bewertungen-pruefungstrainer .uh-uhb{
  margin:0;max-width:100%;
}
/* Auch der Lerntrainer nimmt dieselbe Kante */
.baustein--lerntrainer .lt-wrap{max-width:100%;margin:0;padding:0}

/* ==========================================================================
   Eine Breite für den ganzen Beitrag
   Überschrift, Vorspann, Text und Bausteine stehen in derselben Spalte und
   enden an derselben Kante. Nur diese eine Zahl ändern, wenn es breiter oder
   schmaler werden soll.
   ========================================================================== */
article{--satzbreite:100%}
article > .aufmacher h1,
article > .aufmacher .aufmacher__vorspann,
article > .aufmacher .aufmacher__beleg,
article > .aufmacher .etikett{max-width:var(--satzbreite)}

/* Breites Bild unter dem Aufmacher der Startseite */
.aufmacher__band{margin:2rem 0;border-radius:var(--rund);overflow:hidden;background:var(--wald-hell)}
.aufmacher__band img{width:100%;height:auto;display:block;aspect-ratio:21/9;object-fit:cover}
@media (max-width:760px){.aufmacher__band img{aspect-ratio:16/9}}

/* --- Sprungmarken unter der festen Kopfleiste ----------------------------- */
/* Die Kopfleiste bleibt beim Scrollen stehen. Ohne Abstand landet ein
   Sprungziel dahinter und man sieht die Überschrift nicht. Die Höhe der
   Leiste wächst mit dem Logo, deshalb dieselbe Rechnung wie dort. */
:root{--kopfhoehe:clamp(120px,16vw,190px)}
[id]{scroll-margin-top:calc(var(--kopfhoehe) + 1rem)}
html{scroll-behavior:smooth}
@media (max-width:760px){
  :root{--kopfhoehe:clamp(112px,26vw,140px)}
}
/* Wer lieber ohne weiches Scrollen arbeitet, bekommt es auch nicht */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* --- Formulare aus dem Buchungsordner ------------------------------------- */
/* Die Formulare selbst sind unverändert übernommen und behalten ihre
   Klassennamen. Hier bekommen sie das Aussehen der neuen Seite. */
.formular{max-width:42rem}
.formular form{background:#fff;border:1px solid var(--linie);border-radius:var(--rund);
               padding:clamp(1.2rem,3vw,2rem)}
.formular .form-group{margin-bottom:1.1rem}
.formular label{display:block;font-weight:600;margin-bottom:.35rem;font-size:.97rem;color:var(--tanne)}
.formular .required{color:var(--wald)}
.formular input[type="text"],.formular input[type="email"],.formular input[type="tel"],
.formular input[type="date"],.formular input[type="number"],.formular input[type="url"],
.formular select,.formular textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--tinte);background:var(--papier);
  border:1px solid var(--linie);border-radius:8px;padding:.65rem .8rem;
}
.formular textarea{min-height:8rem;resize:vertical;line-height:1.5}
.formular input:focus,.formular select:focus,.formular textarea:focus{
  outline:2px solid var(--wald);outline-offset:1px;border-color:var(--wald);
}
.formular .note{font-size:.86rem;color:var(--grau);margin-top:.3rem}
.formular input[type="checkbox"],.formular input[type="radio"]{
  width:18px;height:18px;accent-color:var(--wald);margin-right:.5rem;vertical-align:-3px;
}
.formular button[type="submit"]{
  font-family:var(--schrift-titel);font-weight:600;font-size:1.02rem;cursor:pointer;
  background:var(--gelb);color:var(--tanne);border:2px solid var(--gelb);
  border-radius:999px;padding:.8rem 1.8rem;margin-top:.5rem;
}
.formular button[type="submit"]:hover{background:transparent}
/* Honigtopf gegen Bots bleibt unsichtbar */
.formular input[name="_formsubmit_id"]{display:none !important}

/* Hinweis, wenn im Formular etwas fehlt – statt des Browserfensters */
.formular-meldung{
  background:#fdecea;border-left:4px solid #b3261e;border-radius:0 8px 8px 0;
  padding:.8rem 1rem;margin:0 0 1rem;color:#7f1d1a;font-size:.97rem;
}
.formular .feld-fehlt{border-color:#b3261e;background:#fff6f5}
.formular .feld-fehlt:focus{outline-color:#b3261e}