/* Fernschule für Nutztierhaltung
   Shared stylesheet for both homepage versions.
   Palette and type are locked by the brand guide, do not improvise here.

   Colour rule from Janine, 27 Aug: the deep brown appears ONLY in the footer and on
   special CTAs. Everything else stays in one light warm register, cream and sand. */

@font-face{font-family:'Libre Baskerville';src:url('fonts/LibreBaskerville.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Libre Baskerville';src:url('fonts/LibreBaskerville-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('fonts/SourceSans3.ttf') format('truetype');font-weight:200 900;font-display:swap}

:root{
  --creme:#FBF6EC;
  --sand:#F2E9D6;
  --sand-tief:#EADFC5;   /* leicht dunkler als Sand, ersetzt die kraeftigen Braunbaender */
  --weizen:#F0DCA8;
  --gold:#D9A93C;
  --braun:#8A5A22;
  --tinte:#3E2C1C;       /* nur Fuss und spezielle CTA */
  --linie:#E4D7BE;

  --serif:'Libre Baskerville',Georgia,serif;
  --sans:'Source Sans 3',system-ui,-apple-system,sans-serif;

  --bahnbreite:min(1180px,100% - clamp(40px,10vw,160px));
  --luft:clamp(64px,7.5vw,116px);
  --eck:28px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--creme);color:var(--tinte);
  font-family:var(--sans);font-size:clamp(16px,1.05vw,17.5px);line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.16;margin:0;letter-spacing:-.015em}
h1{font-size:clamp(36px,5.6vw,66px)}
h2{font-size:clamp(26px,3.4vw,42px)}
h3{font-size:clamp(18px,1.65vw,22px);line-height:1.3}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.bahn{width:var(--bahnbreite);margin-inline:auto}
section{padding-block:var(--luft)}
.sand{background:var(--sand)}
.sand-tief{background:var(--sand-tief)}
.dunkel{background:var(--tinte);color:var(--creme)}
.dunkel h2,.dunkel h3{color:var(--creme)}
.mitte{text-align:center}
/* Zentriert steht der goldene Strich UNTER dem Eyebrow, nicht daneben. Janine 27.08. */
.mitte .marke{flex-direction:column;align-items:center;gap:15px;margin-bottom:22px}
.mitte .marke::before{order:2;width:34px}
.mitte .fuehrung,.mitte h2,.mitte .mittel{margin-inline:auto}
.mitte .hinweis{
  border:none;padding:0;margin-left:auto;margin-right:auto;text-align:center;max-width:100ch;
}

.marke{
  font-size:12.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:600;
  color:var(--braun);margin:0 0 18px;display:flex;align-items:center;gap:10px;
}
.marke::before{content:'';width:22px;height:1.5px;background:var(--gold);flex:none}
.dunkel .marke{color:var(--weizen)}

.fuehrung{font-size:clamp(16.5px,1.3vw,20px);line-height:1.58;color:var(--braun);max-width:56ch}
.dunkel .fuehrung{color:var(--weizen)}
.mittel{max-width:34ch}
/* Ein Block, auf Desktop zwei Spalten nebeneinander im Blocksatz. Janine 27.08.
   text-align gewinnt hier gegen das geerbte center aus .mitte, weil es direkt am Element
   steht. Schmal faellt es auf eine Spalte zurueck, Blocksatz reisst dort zu grosse Luecken. */
.lauftext{
  max-width:68ch;margin-inline:auto;color:var(--braun);
  font-size:clamp(16.5px,1.3vw,20px);line-height:1.62;
}
@media (min-width:761px){
  .lauftext{
    max-width:none;display:grid;grid-template-columns:1fr 1fr;
    gap:clamp(28px,3.5vw,52px);text-align:justify;hyphens:auto;
  }
  .lauftext p{margin:0}
}
/* Der Vorspann ueber der Etappenlinie soll auf zwei Zeilen laufen, nicht auf drei. */
.fuehrung.breit{max-width:78ch}

/* ---------- Eckenrundung ----------
   Regel 27.08.: oben rechts. Im Lehrgangsraster nur die ERSTE Reihe, zweite bleibt eckig.
   Schmal wandert sie nach unten rechts, nur beim letzten Bild der Abfolge. */
.eck{border-radius:0;overflow:hidden}
/* .eck-solo und .eck-gruppe sind derzeit ungenutzt, seit die randabfallenden Bilder raus sind.
   Bewusst behalten: sie tragen die Eckenregel fuer kuenftige Einzel- und Gruppenbilder. */
.eck-solo > .eck,
.eck-gruppe > :last-child .eck{border-top-right-radius:var(--eck)}

/* ---------- Kopfbereich, ueber dem Hero transparent ---------- */
.kopf{
  position:fixed;top:0;left:0;right:0;z-index:60;padding-block:20px;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .35s ease,border-color .35s ease,padding .35s ease;
}
.kopf.klebt{
  background:rgba(251,246,236,.94);backdrop-filter:blur(9px);
  border-bottom-color:var(--linie);padding-block:11px;
}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:24px}
/* Logo als Inline-SVG plus echter Text. Ein <img src="logo.svg"> waere ein isoliertes
   Dokument ohne Zugriff auf die Seitenschriften, die Wortmarke fiele auf eine Systemschrift
   zurueck und wuerde von der viewBox abgeschnitten. */
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-signet{width:40px;height:40px;flex:none;transition:width .3s ease,height .3s ease}
.kopf.klebt .logo-signet{width:33px;height:33px}
.logo-wort b{
  font-family:var(--serif);font-weight:700;color:var(--tinte);display:block;
  font-size:clamp(18px,1.7vw,22px);line-height:1.02;letter-spacing:-.015em;
}
.logo-wort em{
  font-style:normal;font-weight:600;color:var(--braun);display:block;
  font-size:clamp(8px,.72vw,9.4px);letter-spacing:.185em;text-transform:uppercase;margin-top:3px;
}
.logo-negativ{--signet-ring:#F0DCA8}
.logo-negativ .logo-wort b{color:var(--creme)}
.logo-negativ .logo-wort em{color:var(--weizen)}

.menue{display:flex;gap:clamp(18px,2.4vw,34px);align-items:center;list-style:none;margin:0;padding:0}
.menue a{
  text-decoration:none;font-size:15px;font-weight:600;color:var(--tinte);
  padding-block:4px;position:relative;transition:color .35s ease;
}
.menue a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .28s ease;
}
.menue a:hover::after,.menue a:focus-visible::after{transform:scaleX(1)}

/* ---------- Burgermenue ----------
   Greift genau an dem Punkt, an dem die flache Navi nicht mehr neben das Logo passt.
   Vorher wurden Menuepunkte ab dem dritten einfach ausgeblendet, das war der Grund,
   warum auf dem Handy nur zwei sichtbar waren. Janine 27.08.
   Schwelle 760 px: flach passen die fuenf Punkte rechnerisch bis 623 px, aber bei 760 kippt
   die ganze Seite ins Schmalformat. Eine Grenze statt zwei. */
.burger{display:none}
@media (max-width:760px){
  .burger{
    display:flex;flex-direction:column;justify-content:center;gap:7px;
    width:44px;height:44px;padding:0;margin-right:-10px;position:relative;z-index:2;
    background:none;border:none;cursor:pointer;color:var(--tinte);
  }
  .burger span{
    display:block;width:25px;height:1.8px;background:currentColor;margin-inline:auto;
    transition:transform .42s cubic-bezier(.6,0,.2,1),width .42s cubic-bezier(.6,0,.2,1);
  }
  .burger span:last-child{width:18px;margin-right:0}
  .kopf:not(.klebt) .burger{color:var(--creme)}
  /* Offen liegt die cremefarbene Flaeche darunter, das Kreuz muss dunkel sein */
  .burger[aria-expanded="true"],.kopf:not(.klebt) .burger[aria-expanded="true"]{color:var(--tinte)}
  .burger[aria-expanded="true"] span{width:25px}
  .burger[aria-expanded="true"] span:first-child{transform:translateY(4.4px) rotate(45deg)}
  .burger[aria-expanded="true"] span:last-child{transform:translateY(-4.4px) rotate(-45deg)}

  .menue{
    position:fixed;inset:0;z-index:1;
    flex-direction:column;justify-content:center;align-items:center;gap:0;
    background:var(--creme);
    visibility:hidden;opacity:0;
    transition:opacity .4s ease,visibility 0s linear .4s;
  }
  .menue[data-offen="ja"]{visibility:visible;opacity:1;transition:opacity .4s ease}
  .menue li{opacity:0;translate:0 20px;transition:opacity .5s ease,translate .5s cubic-bezier(.22,1,.36,1)}
  .menue[data-offen="ja"] li{opacity:1;translate:0 0}
  .menue[data-offen="ja"] li:nth-child(1){transition-delay:.10s}
  .menue[data-offen="ja"] li:nth-child(2){transition-delay:.16s}
  .menue[data-offen="ja"] li:nth-child(3){transition-delay:.22s}
  .menue[data-offen="ja"] li:nth-child(4){transition-delay:.28s}
  .menue[data-offen="ja"] li:nth-child(5){transition-delay:.34s}
  /* Die Flaeche ist creme, deshalb bleibt der Text dunkel, auch ueber dem Hero */
  /* Logo bleibt ueber der Menueflaeche stehen, sonst verliert man die Orientierung */
  .logo{position:relative;z-index:2}
  .menue a{
    color:var(--tinte);font-family:var(--serif);font-weight:400;
    font-size:clamp(27px,6.4vw,40px);letter-spacing:-.015em;
    display:block;padding:15px 10px;
  }
  .menue a::after{left:10px;right:10px;height:2px;bottom:9px}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;padding:0;min-height:clamp(660px,90vh,920px);
  display:flex;align-items:center;overflow:hidden;
}
.hero-bild{position:absolute;inset:0;z-index:0}
/* Das Huehnerbild ist hochformatig (1194x1600). Bei object-fit:cover deckt es die Breite
   exakt ab, waagerechter Ueberhang ist null, deshalb wirkt object-position dort NICHT.
   Wer das Motiv seitlich verschieben will, muss vorher vergroessern. 27.08. */
.hero-bild img{
  width:100%;height:100%;object-fit:cover;object-position:var(--bildlage,50% 50%);
  transform:scale(var(--bildzoom,1)) translateX(var(--bildschub,0));
}
/* Der Schleier haelt die Textspalte (0 bis rund 45 Prozent) auf ruhigem Grund und faellt
   erst danach ab. Vorher fiel er schon bei 42 Prozent auf .52, dadurch stand das Ende des
   Vorspanns auf unruhigem Stroh. Janine 27.08. */
/* Die Stufen sind je Seite einstellbar. **Die Vorgaben sind der von Janine freigegebene
   Stand der Startseite und duerfen sich nicht aendern.** Wer den Schleier fuer eine Seite
   braucht, setzt die Variablen an deren `.hero-bild`, so wie die Lehrgangsseite es tut,
   weil ihr Bild links deutlich heller ist. */
.hero-bild::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(94deg,
    rgba(40,28,17,var(--schleier-start,.74)) 0%,
    rgba(40,28,17,var(--schleier-mitte,.52)) var(--schleier-knick,42%),
    rgba(40,28,17,var(--schleier-kante,.20)) 74%,
    rgba(40,28,17,.08) 100%);
}
.hero-innen{position:relative;z-index:1;width:var(--bahnbreite);margin-inline:auto;padding-block:clamp(140px,15vh,190px) clamp(110px,12vh,150px)}
.hero-text{max-width:min(620px,100%)}
.hero h1,.hero .fuehrung{color:var(--creme)}
.hero .marke{margin-bottom:30px}
.hero h1{margin-bottom:26px}
.hero h1 em{font-style:italic;color:var(--weizen)}
.hero .fuehrung{margin-bottom:44px;color:rgba(251,246,236,.9)}
.hero .marke{color:var(--weizen)}

/* Helle Navigation, solange der Kopf ueber dem Bild liegt */
/* Nur im Bereich der flachen Navi. Darunter liegt das Menue auf einer cremefarbenen
   Flaeche, creme auf creme waere unsichtbar. Bewusst auf den Breakpoint begrenzt,
   statt es spaeter zurueckzusetzen: gleiche Spezifitaet, die spaetere Regel gewinnt. */
@media (min-width:761px){.kopf:not(.klebt) .menue a{color:var(--creme)}}
.kopf:not(.klebt):not([data-menue="offen"]) .logo-wort b{color:var(--creme)}
.kopf:not(.klebt):not([data-menue="offen"]) .logo-wort em{color:var(--weizen)}
.kopf:not(.klebt):not([data-menue="offen"]) .logo-signet{--signet-ring:#F0DCA8}

/* ---------- Mini-Boxen, ueberlappen die Hero-Kante bewusst (Janines Entscheidung 27.08.) --- */
.merkmale{padding-block:clamp(48px,6vw,80px)}
.merkmal-reihe{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,44px)}
.merkmal{display:flex;gap:16px;align-items:flex-start}
.merkmal svg{width:32px;height:56px;flex:none;color:var(--braun);margin-top:-6px}
.merkmal b{
  font-family:var(--serif);font-weight:400;font-size:clamp(16px,1.35vw,18.5px);
  line-height:1.28;display:block;
}

/* ---------- Knoepfe ---------- */
.knopf{
  display:inline-flex;align-items:center;gap:11px;background:var(--braun);color:var(--creme);
  text-decoration:none;font-weight:600;font-size:15.5px;padding:15px 30px;border-radius:2px;
  transition:background .25s ease,transform .25s ease;border:none;cursor:pointer;font-family:var(--sans);
}
.knopf:hover{background:var(--tinte);transform:translateY(-2px)}
/* Groesse gehoert ins Blatt, nicht in die Attribute. Ohne diese Regel rendert ein
   viewBox-SVG ohne width/height mit 300x150 und sprengt den Knopf. 27.08. */
.knopf svg{width:15px;height:auto;flex:none;transition:transform .25s ease}
.knopf:hover svg{transform:translateX(4px)}
.knopf.hell{background:transparent;color:var(--braun);box-shadow:inset 0 0 0 1.5px var(--braun)}
.knopf.hell:hover{background:var(--braun);color:var(--creme)}
.knopf.auf-bild{background:var(--creme);color:var(--tinte)}
.knopf.auf-bild:hover{background:var(--weizen)}
.knopf.rand-hell{background:transparent;color:var(--creme);box-shadow:inset 0 0 0 1.5px rgba(251,246,236,.55)}
.knopf.rand-hell:hover{background:var(--creme);color:var(--tinte)}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:14px}
/* In einem zentrierten Block muss auch die Knopfreihe zentriert werden.
   text-align vom Elternteil erreicht ein Flex-Kind nicht. Janine 28.08. */
.knopf-reihe.mitte{justify-content:center}

/* ---------- Split: schmale Ueberschrift links, Inhalt rechts ---------- */
.split{display:grid;grid-template-columns:minmax(0,28fr) minmax(0,72fr);gap:clamp(32px,5vw,80px);align-items:start}
.split-kopf{position:sticky;top:110px}
.split-kopf h2{font-size:clamp(24px,2.5vw,34px)}
.split-kopf .fuehrung{font-size:16px;margin-top:16px}
.split-kopf .knopf-reihe{margin-top:26px}

/* ---------- Textspalten, bewusst ohne Kacheln (Kundenvorgabe) ---------- */
.spalten{display:grid;gap:clamp(28px,3.5vw,52px)}
.drei{grid-template-columns:repeat(3,1fr)}
.zwei{grid-template-columns:repeat(2,1fr)}
.spalte h3{margin-bottom:11px}
/* Die Ziffer stand in Gold und kam auf Creme nur auf 2.01:1, auf Sand-tief auf
   1.64:1. Grossschrift braucht 3:1. Braun bringt 5.47:1 und 4.45:1 und ist dieselbe
   Farbe, die .modul .nr an der gleichen Stelle schon nutzt. Janine 28.08. */
.spalte .nr{
  font-family:var(--serif);font-size:clamp(28px,3vw,40px);color:var(--braun);display:block;
  margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--linie);line-height:1;
}
.spalte svg.icon{width:30px;height:30px;color:var(--braun);margin-bottom:16px}

/* ---------- Bild plus schwebende Zahlenbloecke ---------- */
.fakten-raster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.fakten-bild{position:relative}
.fakten-bild .eck{overflow:hidden;border-top-right-radius:var(--eck)}
.fakten-bild img{width:100%;aspect-ratio:3/2;object-fit:cover}
/* Die Bloecke schweben dauerhaft leicht vor sich hin. Bewusst OHNE Zeigerreaktion,
   sie sollen sich unter dem Mauszeiger nicht anders verhalten. Janine 27.08. */
@keyframes schweben{
  0%,100%{translate:0 0}
  33%{translate:3px -5px}
  66%{translate:-4px 3px}
}
.schwebend{
  position:absolute;background:var(--creme);padding:14px 30px 14px 22px;
  box-shadow:0 14px 40px rgba(62,44,28,.14);
  display:flex;align-items:center;gap:14px;
  animation:schweben 7s ease-in-out infinite;
}
.schwebend.zwei{animation-duration:9s;animation-delay:-3s}
.schwebend b{font-family:var(--serif);font-size:clamp(26px,2.7vw,36px);line-height:1;flex:none}
.schwebend span{
  font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--braun);
  font-weight:600;line-height:1.35;max-width:9ch;
}
.schwebend.eins{left:clamp(-28px,-2vw,-14px);bottom:clamp(24px,4vw,52px)}
.schwebend.zwei{right:clamp(-24px,-2vw,-12px);top:clamp(22px,4vw,46px)}

/* ---------- Lehrgaenge, gleichmaessiges Raster, alles auf einer Linie ---------- */
.lehrgaenge{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3vw,44px);margin-top:52px}
.lehrgang{display:flex;flex-direction:column;text-align:left}
.lehrgang figure{margin:0 0 20px;background:var(--sand);overflow:hidden;aspect-ratio:4/3}
.lehrgang img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.22,1,.36,1),filter .9s ease;filter:saturate(.92);
}
.lehrgang:hover img{transform:scale(1.04);filter:saturate(1)}
.lehrgang h3{margin-bottom:8px}
.lehrgang .fakten{
  font-size:13px;color:var(--braun);letter-spacing:.04em;margin-bottom:10px;
  display:flex;flex-wrap:wrap;gap:7px;align-items:center;
}
.lehrgang .fakten i{width:3px;height:3px;border-radius:50%;background:var(--gold);flex:none}
.lehrgang p{font-size:15.5px;line-height:1.6}
/* margin-top:auto schiebt Strich, Preis und Knopf auf eine gemeinsame Linie,
   unabhaengig davon wie lang der Beschreibungstext ist. */
/* Knopf links, Preis rechts daneben. margin-top:auto auf der Zeile haelt sie unabhaengig
   von der Textlaenge auf einer gemeinsamen Linie. */
.lehrgang .abschluss{
  margin-top:auto;padding-top:18px;border-top:1px solid var(--linie);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.lehrgang .preis{font-family:var(--serif);font-size:21px;color:var(--tinte);margin:0;text-align:left}
.lehrgang .preis small{font-family:var(--sans);font-size:12.5px;color:var(--braun);display:block;margin-top:2px}
.lehrgang .abschluss .knopf{padding:13px 24px;font-size:15px}
/* Erste Reihe rundet oben rechts, zweite Reihe bleibt eckig.
   Ab 601 px, damit der Schmalbereich sie nicht gegen hoehere Spezifitaet zuruecksetzen muss. */
@media (min-width:601px){
  .lehrgang:nth-child(3) figure{border-top-right-radius:var(--eck)}
}

/* ---------- Gegenueberstellung passt / passt nicht ---------- */
.gegen{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,2.5vw,34px);margin-top:48px}
.gegen-box{background:var(--creme);padding:clamp(28px,3vw,42px);border-top:2px solid var(--gold)}
.gegen-box.nein{border-top-color:var(--linie);background:transparent;box-shadow:inset 0 0 0 1px var(--linie)}
.gegen-box h3{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.gegen-box h3 svg{width:24px;height:24px;flex:none;color:var(--braun)}
.gegen-box.nein h3 svg{color:var(--braun);opacity:.4}
.gegen-box ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.gegen-box li{display:flex;gap:12px;font-size:15.5px;line-height:1.55}
.gegen-box li svg{width:17px;height:17px;flex:none;margin-top:4px;color:var(--gold)}
.gegen-box.nein li svg{color:var(--braun);opacity:.42}

/* ---------- Leseprobe, PDF-Mockup ---------- */
.probe-raster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:center}
.pdf-buehne{position:relative;padding:clamp(16px,2.4vw,32px) 0;max-width:clamp(240px,26vw,340px);margin-inline:auto}
.pdf{
  background:var(--creme);box-shadow:0 24px 60px rgba(62,44,28,.18);
  aspect-ratio:1/1.414;padding:clamp(20px,2.4vw,32px);
}
.pdf.hinten{
  position:absolute;inset:0;width:80%;
  transform:rotate(-6deg) translate(-14%,-3%);opacity:.62;z-index:1;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.pdf.vorne{
  position:relative;width:84%;margin-left:auto;transform:rotate(3.5deg);z-index:2;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.pdf-buehne:hover .pdf.hinten{transform:rotate(-8.5deg) translate(-18%,-5%)}
.pdf-buehne:hover .pdf.vorne{transform:rotate(5deg) translateY(-6px)}

/* Leseprobe-Funnel: Bildseite schmaler, Textseite breiter, damit die Ueberschrift
   zweizeilig wird und die Seite kuerzer. Janines Vorgabe 28.08.
   Steht bewusst IN der Breit-Abfrage: unter 761 px gilt weiter die eine Spalte aus
   dem Mobilblock, ein spaeterer Reset wuerde die stillschweigend ueberschreiben. */
@media (min-width:761px){
  .probe-raster.eng{grid-template-columns:40fr 60fr}
  .probe-raster.eng .pdf-buehne{max-width:clamp(220px,22vw,300px)}
}
.pdf .kopfzeile{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.pdf .kopfzeile svg{width:18px;height:auto}
.pdf .kopfzeile span{font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--braun);font-weight:600}
.pdf .titel{font-family:var(--serif);font-weight:400;font-size:clamp(11px,1.05vw,14px);margin:0 0 10px;line-height:1.3}
.pdf .zeile{height:4px;background:var(--linie);border-radius:2px;margin-bottom:7px}
.pdf .zeile.kurz{width:62%}
.pdf .zeile.mittel{width:84%}

/* ---------- Bewertungen ---------- */
.stimmen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.5vw,34px);margin-top:48px}
.stimme{background:var(--creme);padding:clamp(26px,2.8vw,36px);display:flex;flex-direction:column}
.sterne{display:flex;gap:3px;margin-bottom:16px}
.sterne svg{width:15px;height:15px;color:var(--gold)}
.stimme blockquote{margin:0 0 20px;font-size:15.5px;line-height:1.62}
.stimme .wer{margin-top:auto;padding-top:16px;border-top:1px solid var(--linie);font-size:13.5px;color:var(--braun)}
.stimme .wer b{display:block;color:var(--tinte);font-weight:600;font-size:15px;margin-bottom:2px}

/* ---------- Bildsektion mit Text darauf ---------- */
.bildband{position:relative;overflow:hidden;padding-block:clamp(80px,10vw,150px)}
.bildband > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.bildband::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(92deg,rgba(40,28,17,.82) 0%,rgba(40,28,17,.6) 48%,rgba(40,28,17,.24) 100%);
}
.bildband .bahn{position:relative;z-index:2}
.bildband h2,.bildband .satz{color:var(--creme)}
.bildband .fuehrung{color:rgba(251,246,236,.88)}
.bildband .marke{color:var(--weizen)}
.bildband .satz{
  font-family:var(--serif);font-size:clamp(24px,3vw,40px);line-height:1.28;max-width:20ch;margin:0;
}
.bildband .satz em{font-style:italic;color:var(--weizen)}
.bildband-innen{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:clamp(28px,5vw,72px);align-items:center}

/* ---------- Ratgeber-Teaser ---------- */
.beitraege{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,2.6vw,38px);margin-top:48px}
/* Die Karten kommen aus WordPress, siehe Skript am Seitenende. Was im HTML steht, ist
   nur der Rueckfall, falls WordPress nichts liefert. */
.beitrag figure:empty{background:var(--sand-tief)}
.beitrag figure{margin:0 0 18px;overflow:hidden;aspect-ratio:3/2;background:var(--sand)}
.beitrag img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.beitrag:hover img{transform:scale(1.04)}
.beitrag .datum{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--braun);font-weight:600;display:block;margin-bottom:8px}
.beitrag h3{font-size:clamp(17px,1.4vw,20px);margin-bottom:8px}
.beitrag p{font-size:15px;line-height:1.58;color:var(--braun)}
.beitrag{display:flex;flex-direction:column}
.mehr-reihe{display:flex;justify-content:flex-end;margin-top:10px}
/* In der Lehrgangskarte sitzt der Verweis unten, wie Preis und Knopf in der Verkaufsfassung */
.lehrgang .mehr-reihe{margin-top:auto;padding-top:18px}
.beitrag .mehr-reihe{margin-top:auto;padding-top:16px}
.mehr{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-weight:700;font-size:15px;color:var(--braun);padding-bottom:3px;position:relative;
}
.mehr svg{width:13px;height:13px;transition:transform .25s ease}
.mehr::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .28s ease;
}
.mehr:hover::after,.mehr:focus-visible::after{transform:scaleX(1)}
.mehr:hover svg{transform:translateX(4px)}
@media (min-width:601px){
  .beitrag:nth-child(3) figure{border-top-right-radius:var(--eck)}
}

/* ---------- Kontakt mit Formular ---------- */
.kontakt-raster{display:grid;grid-template-columns:minmax(0,54fr) minmax(0,46fr);gap:clamp(36px,5vw,80px);align-items:start}
.formular{background:var(--creme);padding:clamp(28px,3vw,44px);box-shadow:0 14px 42px rgba(62,44,28,.08)}
.feld{margin-bottom:18px}
.feld label{
  display:block;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:var(--braun);margin-bottom:7px;
}
.feld input,.feld textarea,.feld select{
  width:100%;font-family:var(--sans);font-size:16px;color:var(--tinte);
  background:transparent;border:none;border-bottom:1.5px solid var(--linie);
  padding:9px 0;transition:border-color .25s ease;
}
.feld textarea{resize:vertical;min-height:96px;line-height:1.6}
/* Der Tastaturfokus war unsichtbar: outline entfernt, Ersatz eine goldene Linie
   mit 2,01:1 gegen Creme und 1,52:1 gegen die Ruhelinie. Gemessen 29.08. Braun
   bringt 5,47:1 und 4,14:1, und die groessere Staerke macht den Wechsel auch ohne
   Farbwahrnehmung sichtbar. Derselbe Grund wie bei den Ziffern am 28.08. */
.feld input:focus,.feld textarea:focus,.feld select:focus{
  outline:none;border-bottom-color:var(--braun);border-bottom-width:2.5px;
  /* Die Ruhelinie bleibt bei 1,5 px, damit sich das Formular im Normalzustand
     nicht veraendert. Der eine Pixel mehr Rand wird unten weggenommen, sonst
     huepfte das Feld beim Tabben um 1 px. */
  padding-bottom:8px;
}
.feld input::placeholder,.feld textarea::placeholder{color:var(--braun);opacity:.5}
.hinweis-klein{font-size:13px;color:var(--braun);line-height:1.5;margin-top:16px}
.wege{display:grid;gap:12px;margin-top:32px}
.weg{
  display:flex;align-items:center;gap:14px;padding:16px 20px;
  background:var(--creme);text-decoration:none;transition:transform .25s ease,box-shadow .25s ease;
  box-shadow:inset 0 0 0 1px var(--linie);
}
.weg:hover{transform:translateX(4px);box-shadow:inset 0 0 0 1px var(--gold),0 8px 22px rgba(62,44,28,.08)}
.weg svg{width:20px;height:20px;flex:none;color:var(--braun)}
.weg b{display:block;font-size:15px;font-weight:600}
.weg span{font-size:13.5px;color:var(--braun)}

/* ---------- Etappenlinie ---------- */
.etappen{margin-top:52px;position:relative}
.schiene{position:relative;height:2px;background:var(--linie);margin:0 6.25% 30px}
/* Fuellung und Laeufer haengen am Scrollfortschritt. Die Laengen kommen als Pixel aus
   dem Skript, gerechnet aus den echten Punktpositionen. Prozentrechnung ist hier zweimal
   danebengegangen, weil Schiene und Punkteraster nicht dieselbe Ausdehnung haben. */
.schiene::after{
  content:'';position:absolute;left:0;top:0;background:var(--gold);
  width:var(--fuell,0px);height:100%;
  transition:width .65s cubic-bezier(.34,1.3,.5,1);
}
.punkte{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;margin-top:-38px}
.punkt{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding-inline:8px}
.punkt i{
  width:15px;height:15px;border-radius:50%;background:var(--creme);
  box-shadow:inset 0 0 0 2.5px var(--braun);flex:none;
  transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.sand .punkt i,.sand-tief .punkt i{background:var(--sand)}
.sichtbar .punkt i{transform:scale(1)}
.sichtbar .punkt:nth-child(2) i{transition-delay:.28s}
.sichtbar .punkt:nth-child(3) i{transition-delay:.56s}
.sichtbar .punkt:nth-child(4) i{transition-delay:.84s}
/* Der goldene Punkt springt in vier Stufen von Tag 1 bis Tag 43 und deckt dabei den
   jeweiligen Punkt exakt ab. --lx und --ly sind die Punktmitte relativ zu .etappen,
   das Skript liest sie direkt aus dem Layout. Damit stimmt es waagerecht wie senkrecht.
   z-index 3 haelt ihn ueber Schiene und Punkten. */
.laeufer{
  position:absolute;top:0;left:0;width:15px;height:15px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 5px rgba(217,169,60,.16);z-index:3;
  translate:calc(var(--lx,0px) - 50%) calc(var(--ly,0px) - 50%);
}
/* Erst nach der ersten Positionierung animieren, sonst rutscht er beim Laden aus der Ecke. */
.laeufer.laeuft{transition:translate .65s cubic-bezier(.34,1.3,.5,1),box-shadow .3s ease}

/* Kompakte Lehrgaenge haben nur zwei Etappen. Die Schiene ragt dann bei den
   Vorgabewerten weit ueber den ersten und letzten Punkt hinaus, deshalb hier
   derselbe Ueberstand wie bei vier Punkten: 6,25 Prozent je Seite.
   Bewusst IN der Breit-Abfrage, weil .schiene im Schmalbereich auf margin:0
   gesetzt wird und eine spaetere Regel mit hoeherer Spezifitaet das sonst
   ueberschreiben wuerde. Genau dieser Fehler ist in diesem Projekt schon
   fuenfmal passiert. */
@media (min-width:761px){
  .etappen.zwei .schiene{margin-inline:18.75%}
  .etappen.zwei .punkt > div{max-width:30ch}
}
.punkt i{background:var(--creme);box-shadow:inset 0 0 0 2.5px var(--braun)}
.punkt b{font-family:var(--serif);font-weight:400;font-size:16px;display:block}
.punkt span{font-size:14px;color:var(--braun);line-height:1.5}

.hinweis{border-left:2.5px solid var(--gold);padding:4px 0 4px 26px;margin-top:44px;max-width:66ch;font-size:15.5px}

/* ---------- Ähre als Wasserzeichen ---------- */
.mit-aehre{position:relative;overflow:clip}
/* Wandert beim Scrollen von rechts aussen nach innen und bleibt neben der Headline stehen.
   --aehre-weg wird per JS von 0 bis 1 gesetzt, siehe Skript am Seitenende. */
.aehre-gross{
  position:absolute;right:clamp(-60px,-4vw,-20px);
  /* Startet tief rechts aussen, endet auf Hoehe der Ueberschrift direkt daneben */
  top:calc(74% - var(--aehre-weg,0) * 39%);
  translate:calc(var(--aehre-weg,0) * -1 * clamp(190px,24vw,420px)) -50%;
  width:clamp(180px,19vw,290px);height:auto;
  opacity:calc(.05 + var(--aehre-weg,0) * .1);pointer-events:none;z-index:0;
}
/* :not() noetig, sonst schlaegt diese Regel das absolute der Aehre (gleiche Spezifitaet,
   spaeter im Blatt) und die Aehre landet im Textfluss. */
.mit-aehre > *:not(.aehre-gross){position:relative;z-index:1}

/* ---------- Schulleitung ---------- */
.leitung{display:grid;grid-template-columns:170px 1fr;gap:clamp(28px,4vw,52px);align-items:center}
.leitung .portrait{
  aspect-ratio:1;background:var(--creme);display:grid;place-items:center;
  border-radius:50%;overflow:hidden;box-shadow:inset 0 0 0 1px var(--linie);
}
.leitung .portrait svg{width:70px;height:auto;opacity:.5}
.leitung .rolle{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--braun);margin-top:10px;font-weight:600}

/* Die Modifikatoren "gestapelt" (Bild ueber dem Text) und "rechts" (rechtsbuendig)
   gab es am 28.08. den Tag ueber. Janine hat sie am Abend zurueckgenommen und die
   Grundanordnung gewaehlt: Portrait links, Text rechts daneben, auf Schulseite,
   Leseprobe und Startseite gleich. Die Regeln sind deshalb geloescht statt
   auskommentiert, sonst waeren es tote Regeln. */

/* ---------- FAQ, breit und mittig, laut Vorgabe zuletzt vor dem Footer ---------- */
.faq{margin:48px auto 0;max-width:860px;text-align:left}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{
  cursor:pointer;list-style:none;padding:24px 46px 24px 0;position:relative;
  font-family:var(--serif);font-size:clamp(17px,1.5vw,20px);line-height:1.4;transition:color .22s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--braun)}
.faq summary::after{
  content:'';position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.8px solid var(--braun);border-bottom:1.8px solid var(--braun);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .antwort{padding:0 0 26px;max-width:68ch;color:var(--braun)}

/* ---------- Fuss, der einzige Ort mit tiefem Braun ---------- */
.fuss{background:var(--tinte);color:var(--creme);padding-block:clamp(52px,6vw,78px)}
.fuss .logo{margin-bottom:26px}
.fuss .logo-signet{width:46px;height:46px}
.fuss-innen{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px}
/* h2, nicht h4: sonst springt jede Seite von h2 auf h4, weil der Fuss die
   letzten Ueberschriften stellt. Rein semantisch, das Aussehen ist identisch. */
/* line-height und letter-spacing muessen mitgegeben werden: als h4 erbte die Zeile
   die 1.68 des Fliesstextes, h2 faengt sich ueber h1,h2,h3 die 1.16 ein. Ohne das
   wurde jede Seite acht Pixel kuerzer, gemessen im Byte-Vergleich zweier Renders. */
.fuss h2{font-family:var(--serif);font-weight:400;font-size:16px;margin:0 0 14px;
  color:var(--weizen);line-height:1.68;letter-spacing:normal}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fuss a{color:var(--creme);text-decoration:none;font-size:15px;opacity:.85;transition:opacity .2s ease}
.fuss a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.fuss .klein{font-size:14px;opacity:.7;line-height:1.6}
.fuss-unten{
  margin-top:44px;padding-top:22px;border-top:1px solid rgba(240,220,168,.22);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:13.5px;opacity:.72;
}

/* ---------- Scroll-Reveals ---------- */
.rein{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.rein.sichtbar{opacity:1;transform:none}
.rein.v1{transition-delay:.08s}
.rein.v2{transition-delay:.16s}
.rein.v3{transition-delay:.24s}
.rein.v4{transition-delay:.32s}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .merkmal-reihe{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:32px}
  .split-kopf{position:static}
  .fakten-raster,.probe-raster,.kontakt-raster,.bildband-innen{grid-template-columns:1fr}
  .probe-raster .pdf-buehne{order:-1;max-width:440px}
  .lehrgaenge,.stimmen,.beitraege{grid-template-columns:repeat(2,1fr)}
  .fuss-innen{grid-template-columns:1fr 1fr}
  .fuss-innen>div:first-child{grid-column:1 / -1}
  .drei{grid-template-columns:repeat(2,1fr)}
}
/* Zweispaltiger Bereich: die rechte Spalte rundet. Bewusst NUR hier, damit der Reset im
   Schmalbereich nicht gegen die hoehere Spezifitaet von :nth-child ankaempfen muss. */
@media (min-width:601px) and (max-width:1000px){
  .lehrgang:nth-child(3) figure,
  .beitrag:nth-child(3) figure{border-top-right-radius:0}
  .lehrgang:nth-child(2) figure,
  .beitrag:nth-child(2) figure{border-top-right-radius:var(--eck)}
}
@media (max-width:760px){
  .zwei,.gegen{grid-template-columns:1fr}
  .mittel{max-width:none}
  .leitung{grid-template-columns:1fr;justify-items:start}
  .leitung .portrait{width:130px}
  .merkmale{margin-top:-32px}
  .hero-bild::after{background:linear-gradient(180deg,rgba(40,28,17,.6) 0%,rgba(40,28,17,.72) 100%)}
  .schwebend.eins{left:0;bottom:-18px}
  .schwebend.zwei{right:0;top:-18px}
  /* Etappen kippen ins Hochformat, sonst quetschen sich vier Punkte auf 360 px */
  .etappen{position:relative;padding-left:34px}
  .schiene{width:2px;height:auto;position:absolute;left:7px;top:8px;bottom:8px;margin:0}
  .punkte{grid-auto-flow:row;gap:30px;margin-top:0}
  /* Senkrecht waechst die Fuellung in der Hoehe. Der Laeufer braucht keine eigene Regel,
     er sitzt ueber --lx/--ly ohnehin auf dem richtigen Punkt. */
  .schiene::after{width:100%;height:var(--fuell,0px);transition:height .65s cubic-bezier(.34,1.3,.5,1)}
  .punkt{flex-direction:row;align-items:flex-start;text-align:left;padding-inline:0;gap:18px;margin-left:-34px}
  .aehre-gross{opacity:.05;right:-80px}
}
@media (max-width:600px){
  .drei,.lehrgaenge,.stimmen,.beitraege,.merkmal-reihe{grid-template-columns:1fr}
  /* Schmal: Rundung wandert nach unten rechts, nur beim letzten Bild der Abfolge */
  .lehrgang:last-child figure,.beitrag:last-child figure,
  .fakten-bild .eck,
  .eck-solo > .eck,.eck-gruppe > :last-child .eck{border-bottom-right-radius:var(--eck)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .rein{opacity:1;transform:none}
  .punkt i{transform:scale(1)}
  .schiene::after{width:100%}
}

/* ================================================================
   LEHRGANGSSEITE
   Muster aus Janines Pinterest-Board, Briefing Abschnitt D.
   ================================================================ */

/* ---------- Faktenzeile im Hero ---------- */
.hero-fakten{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:34px;
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  color:var(--weizen);
}
.hero-fakten i{width:4px;height:4px;border-radius:50%;background:var(--gold);flex:none}

/* ---------- Shop the look: ein grosses Bild, ein kleineres daneben ----------
   Nur das rechte, hoehere Bild rundet oben rechts, damit die Regel gewahrt bleibt. */
.schau{display:grid;grid-template-columns:minmax(0,66fr) minmax(0,34fr);gap:clamp(16px,1.8vw,26px);align-items:end}
.schau figure{margin:0;overflow:hidden;background:var(--sand)}
.schau img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.schau .gross img{aspect-ratio:4/3}
/* Quadratisch und schmaler, damit das rechte Bild sichtbar das kleinere ist */
.schau .klein img{aspect-ratio:1/1}
.schau .klein{border-top-right-radius:var(--eck)}
.schau:hover img{transform:scale(1.03)}
/* Ueberschrift links, Text rechts, sonst steht die rechte Haelfte unter den Bildern leer */
.schau-text{
  display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);
  gap:clamp(24px,3.4vw,60px);align-items:start;margin-top:clamp(34px,4vw,54px);
}
.schau-text h2{max-width:16ch}
.schau-text .fuehrung{max-width:none}
@media (max-width:760px){.schau-text{grid-template-columns:1fr;gap:18px}}

/* ---------- Tiefe je Thema ----------
   Weizen sitzt als Marker am Thema, der Balken selbst laeuft in Braun.
   Grund: Weizen auf Creme kommt auf rund 1,2:1 und waere als Grafik nicht erkennbar,
   Braun auf Creme liegt bei 5,6:1. Janine 27.08. */
.tiefe-bilder{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.8vw,26px);margin-bottom:clamp(44px,5vw,68px)}
.tiefe-bilder figure{margin:0;overflow:hidden;background:var(--sand)}
.tiefe-bilder img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
/* Eckenregel gilt auch hier: nur das rechteste Bild der ersten Reihe rundet oben rechts */
@media (min-width:761px){.tiefe-bilder figure:last-child{border-top-right-radius:var(--eck)}}
.tiefe-raster{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(30px,3.6vw,56px)}
/* Die Balken sollen vergleichbar sein, also liegen sie je Reihe auf einer Linie,
   egal wie lang der Text darueber ist. */
.tiefe-block{display:flex;flex-direction:column}
.tiefe-block .thema{
  display:flex;align-items:center;gap:11px;margin-bottom:14px;
  font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;color:var(--braun);
}
.tiefe-block .thema::before{
  content:'';width:13px;height:13px;flex:none;
  background:var(--weizen);box-shadow:inset 0 0 0 1px var(--braun);
}
.tiefe-block h3{margin-bottom:12px}
.tiefe-block p{font-size:15.5px;line-height:1.6;color:var(--braun);margin-bottom:22px}
.tiefe-block .mehr{align-self:flex-start}
.balken{height:6px;background:var(--sand-tief);position:relative;overflow:hidden;margin-top:auto;margin-bottom:16px}
.balken i{
  position:absolute;inset:0 auto 0 0;width:0;background:var(--braun);
  transition:width 1.2s cubic-bezier(.22,1,.36,1);
}
.sichtbar .balken i{width:var(--tiefe,70%)}
.tiefe-block:nth-child(2) .balken i{transition-delay:.12s}
.tiefe-block:nth-child(3) .balken i{transition-delay:.24s}
.tiefe-block:nth-child(4) .balken i{transition-delay:.36s}

/* ---------- Module ---------- */
.module{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,2.6vw,38px);margin-top:52px}
.modul{background:var(--creme);padding:clamp(26px,3vw,40px);border-top:2px solid var(--gold);display:flex;flex-direction:column}
.sand .modul,.sand-tief .modul{background:var(--creme)}
.modul .nr{
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--braun);display:block;margin-bottom:12px;
}
.modul h3{margin-bottom:20px}
.modul ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.modul li{display:flex;gap:12px;font-size:15.5px;line-height:1.55}
.modul li::before{
  content:'';width:6px;height:6px;flex:none;margin-top:8px;border-radius:50%;
  background:var(--gold);
}
.modul .takt{
  margin-top:auto;padding-top:22px;font-size:13.5px;color:var(--braun);
  border-top:1px solid var(--linie);
}

/* ---------- Vier Nutzen, Tier rechts ---------- */
.nutzen-raster{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:clamp(32px,4.5vw,72px);align-items:center}
.nutzen-boxen{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,30px)}
.nutzen-box{background:var(--creme);padding:clamp(22px,2.4vw,32px);box-shadow:inset 0 0 0 1px var(--linie)}
.sand .nutzen-box,.sand-tief .nutzen-box{background:var(--creme)}
.nutzen-box svg{width:26px;height:26px;color:var(--braun);margin-bottom:16px}
.nutzen-box b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(16px,1.4vw,19px);line-height:1.3;margin-bottom:9px}
.nutzen-box span{font-size:14.5px;line-height:1.55;color:var(--braun)}
/* Das Bild darf die Zeilenhoehe NICHT bestimmen, sonst richtet sich die Boxenspalte nach
   dem Bild statt umgekehrt. Absolut gesetzt traegt es null Hoehe bei, die Boxen geben die
   Hoehe vor und das Bild fuellt sie. Janine 27.08. */
.nutzen-tier{position:relative;overflow:hidden;border-top-right-radius:var(--eck)}
.nutzen-tier img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Leistungsliste ---------- */
.leistungen{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(30px,4vw,64px);margin-top:44px}
.leistung{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--linie)}
.leistung svg{width:19px;height:19px;flex:none;margin-top:3px;color:var(--gold)}
.leistung b{display:block;font-size:15.5px;font-weight:600;margin-bottom:5px}
.leistung span{font-size:14.5px;line-height:1.55;color:var(--braun)}

/* ---------- Angebotsblock ---------- */
.angebot{
  display:grid;grid-template-columns:minmax(0,54fr) minmax(0,46fr);
  gap:clamp(32px,4vw,64px);align-items:center;
  background:var(--creme);padding:clamp(32px,4vw,60px);box-shadow:0 18px 52px rgba(62,44,28,.09);
}
.angebot .preis-gross{font-family:var(--serif);font-size:clamp(40px,4.6vw,60px);line-height:1;display:block;margin-bottom:10px}
.angebot .preis-zusatz{font-size:14.5px;color:var(--braun);display:block;margin-bottom:28px}
.angebot ul{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:12px}
.angebot li{display:flex;gap:12px;font-size:15.5px;line-height:1.55}
.angebot li svg{width:17px;height:17px;flex:none;margin-top:4px;color:var(--gold)}

/* ---------- Schmalbereich ---------- */
@media (max-width:1000px){
  .tiefe-raster,.module,.leistungen{grid-template-columns:1fr}
  .nutzen-raster,.angebot{grid-template-columns:1fr}
  .nutzen-tier{max-width:420px}
}
@media (max-width:760px){
  .schau{grid-template-columns:1fr}
  .tiefe-bilder{grid-template-columns:1fr}
  .nutzen-boxen{grid-template-columns:1fr}
  .hero-fakten{font-size:12.5px;gap:8px 13px}
}

/* ---------- Tiefe: Themen-Icons statt Weizenquadrat, plus Skala ---------- */
.tiefe-block .thema{gap:10px}
.tiefe-block .thema::before{content:none}
.tiefe-block .thema svg{width:19px;height:19px;flex:none;color:var(--braun)}
/* Ohne Beschriftung liest man den Balken nicht als Tiefe, sondern als Dekoration */
.skala{
  display:flex;justify-content:space-between;gap:12px;margin:9px 0 0;
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--braun);
}
.skala span:first-child{opacity:.5}
.skala span:last-child{opacity:.85}
.balken{margin-bottom:0}

/* ---------- Fuer wen: Ueberschrift links, vier Spalten daneben ----------
   Kein Kasten, kein Hintergrund. Reihenfolge im Block: Zeichen, Ueberschrift, Text. */
.wer-raster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3.4vw,52px)}
.wer-block h3{margin-bottom:10px;font-size:clamp(16px,1.4vw,19px)}
.wer-block p{font-size:14.5px;line-height:1.55;color:var(--braun);margin:0}
.wer-block .zeichen svg{
  width:clamp(38px,3.4vw,46px);height:auto;color:var(--braun);
  display:block;margin-bottom:16px;
}

/* ---------- Module: Linie mit Abstand zum letzten Kapitel ---------- */
.modul ul{padding-bottom:clamp(18px,2vw,26px)}

/* ---------- Danach: Bild endet auf der Kante der Boxen ---------- */
/* Die Boxen sollen ihren Inhalt umschliessen, nicht auf Zeilenhoehe gestreckt werden.
   Das Bild rechts folgt der so entstandenen Hoehe, dadurch liegt alles auf einer Linie. */
.nutzen-raster{align-items:stretch}
.nutzen-boxen{align-content:start}

@media (max-width:1000px){
  /* Einspaltig braucht das Bild wieder eine eigene Hoehe */
  .nutzen-tier{position:static}
  .nutzen-tier img{position:static;aspect-ratio:4/5;height:auto}
}
@media (max-width:600px){
  .wer-raster{grid-template-columns:1fr}
  .wer-block .zeichen svg{width:38px;margin-bottom:12px}
}

/* ---------- Formulare: Einwilligung und Rueckmeldung ---------- */
.zustimmung{
  display:flex;gap:12px;align-items:flex-start;margin:-4px 0 20px;
  font-size:13.5px;line-height:1.5;color:var(--braun);cursor:pointer;
}
.zustimmung input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--braun)}
/* Kein Gruen, Melanies Vorgabe, deshalb traegt der Erfolg die Hausfarbe. Das
   Fehlerrot ist auf allen drei Flaechen geprueft: 6,35 / 5,67 / 5,17 zu 1. */
.hinweis-klein[data-zustand=gut]{color:var(--braun);font-weight:600}
.hinweis-klein[data-zustand=fehler]{color:#A3341F;font-weight:600}

/* ---------- Ratgeber: Themenzeile nach Tierart (A2, Janine 28.08.) ----------
   Bewusst schmal und rund, damit die Zeile als Wegweiser gelesen wird. Die
   grossen Bildkarten der Lehrgaenge stehen auf derselben Seite weiter unten,
   ohne diesen Formunterschied stuende dieselbe Sechserreihe zweimal da.

   Eine Kachel OHNE href ist kein Link. Das ist der Zustand einer Tierart, zu der
   noch kein Beitrag existiert: sichtbar, aber nicht anklickbar. Sie wird nicht
   ausgegraut, das kostet nur Kontrast. Das entsaettigte Bild und "in Arbeit"
   sagen es deutlich genug. */
.themen{display:grid;grid-template-columns:1fr;gap:12px;margin-top:40px;text-align:left}
.thema{
  display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center;
  padding:12px 18px 12px 12px;background:var(--creme);border:1px solid var(--linie);
  text-decoration:none;color:inherit;
  transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .5s;
}
.thema img{grid-row:span 2;width:56px;height:56px;border-radius:50%;object-fit:cover}
.thema-name{font-family:var(--serif);font-size:17px;line-height:1.2}
.thema-zahl{
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--braun);font-weight:600;margin-top:5px;
}
.thema[href]:hover{
  transform:translateX(4px);border-color:var(--braun);
  box-shadow:0 8px 22px rgba(62,44,28,.08);
}
.thema:not([href]) img{filter:grayscale(1);opacity:.62}
.thema:not([href]) .thema-zahl{font-style:italic;letter-spacing:.08em;text-transform:none;font-weight:400}

/* Sechs nebeneinander waeren je 196 px breit, dafuer ist Bild plus Text zu viel.
   Deshalb zwei Reihen zu dritt, nicht eine zu sechst. */
@media (min-width:601px){.themen{grid-template-columns:repeat(2,1fr);gap:14px}}
@media (min-width:761px){.themen{grid-template-columns:repeat(3,1fr);gap:16px}}

/* ---------- Ratgeber-Uebersicht: Raster, das mit wenig Inhalt umgehen kann ----------
   Auf der Startseite bremst data-wp-mindest="3", damit kein halb leeres Raster
   entsteht. Auf der Uebersicht darf das nicht bremsen, dort gehoert hin, was da
   ist. Beim Stand vom 28.08. ist das genau ein Beitrag, der stand links mit zwei
   Loechern daneben.

   Die Spur ist deshalb hoechstens ein Drittel breit und der Rest wird zentriert:
   ab drei Karten sieht es aus wie bisher, darunter steht die Karte mittig statt
   angeschnitten. Bewusst NUR ab 1001 px, denn darunter setzen zwei bestehende
   Media Queries schon zwei und eine Spalte. Eine Regel dahinter wuerde die beiden
   still aushebeln, Media Queries erhoehen die Spezifitaet nicht. */
@media (min-width:1001px){
  .beitraege.alle{
    --spalt:clamp(24px,2.6vw,38px);
    grid-template-columns:repeat(auto-fit,minmax(280px,calc((100% - 2*var(--spalt))/3)));
    justify-content:center;
  }
}

/* ---------- Ratgeber-Beitrag (A2 / B1 / C1, Janine 28.08.) ----------
   A2: schlanker Kopf statt bildschirmfuellendem Hero. Wer aus der Suche kommt,
   will lesen; ein Full-Bleed-Bild schoebe den ersten Absatz unter die Falz.
   B1: eine Lesespalte, keine Sidebar. Ein Inhaltsverzeichnis, das sich aus den
   Zwischenueberschriften baut, kann Divi nicht von allein, und Melanie soll
   nichts pflegen muessen, wofuer sie ein Plugin braucht. */
/* Der Kopf folgt der NEXUS-Ratgeberseite, die Janine gebaut hat, nur mit Bild
   statt Farbflaeche (ihre Vorgabe 28.08.). Flach gehalten, rund 500 px: der
   Vorspann muss ueber der Falz stehen bleiben, das war der Sinn von A2. Der
   Creme-Schleier haelt den Text dunkel lesbar, das Bild bleibt Textur. */
.beitrag-kopf{
  position:relative;isolation:isolate;
  padding:clamp(64px,8vw,104px) 0 clamp(52px,6vw,84px);
}
.beitrag-kopf .kopf-bild{position:absolute;inset:0;z-index:-1;overflow:hidden}
.beitrag-kopf .kopf-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.beitrag-kopf .kopf-bild::after{
  content:'';position:absolute;inset:0;
  /* Zwei Schleier uebereinander. Der schraege haelt die linke Haelfte hell, der
     senkrechte legt oben nach, wo Eyebrow und Titel liegen. Gemessen ueber zwoelf
     Motive aus dem Bestand: mit nur einem Verlauf fiel der Eyebrow ueber dem
     hellsten Stallbild auf 4,45 zu 4,50. */
  background:
    linear-gradient(180deg, rgba(251,246,236,.4) 0%, rgba(251,246,236,.12) 38%,
                            rgba(251,246,236,0) 62%),
    linear-gradient(100deg,
      rgba(251,246,236,.975) 0%, rgba(251,246,236,.955) 46%,
      rgba(251,246,236,.78) 70%, rgba(251,246,236,.5) 100%);
}
/* Der Text steht LINKS am Bahnrand, nicht in der zentrierten Lesespalte. So macht
   es die NEXUS-Seite, und nur so bleibt die rechte Bildhaelfte frei. */
/* Genauso breit wie die Lesespalte darunter, mitgezogen als Janine sie am 28.08.
   auf 750 px gesetzt hat. Beim jetzigen Text aendert das nichts: .fuehrung ist auf
   56ch begrenzt und endet bei 625 px, die Ueberschrift bricht per <br> um. Die
   Regel greift erst bei einer laengeren Ueberschrift, dann fluchtet der Kopf mit
   dem Artikel statt davor aufzuhoeren.
   ⚠️ Der Kontrast wurde NICHT neu gerechnet, sondern nachgewiesen, dass er gleich
   bleibt: die Textrechtecke sind nach der Aenderung Pixel fuer Pixel dieselben.
   Wer .fuehrung hier spaeter breiter macht, schiebt Text nach rechts, wo der
   Schleier duenner wird, und muss neu messen. */
.beitrag-kopf .kopf-text{max-width:min(750px,100%)}
/* Auf dem Bildkopf traegt die Meta-Zeile Tinte statt Braun. Grund ist gemessen,
   nicht Geschmack: bei 12,5 px gilt 4,5:1, und ueber dem dunkelsten Bild im
   Bestand (pferd.webp) kam Braun auf 4,49. Tinte haelt jedes Motiv aus. Auf der
   NEXUS-Seite ist diese Zeile ebenfalls dunkel, nicht in der Akzentfarbe. */
.beitrag-kopf .beitrag-meta{color:var(--tinte)}
.beitrag-kopf .beitrag-meta i{background:var(--braun)}
.beitrag-kopf h1{margin-bottom:26px}
.beitrag-kopf .beitrag-meta{margin-bottom:22px}
/* Der Kopftext steht links, nicht mittig, damit die rechte Bildhaelfte sichtbar
   bleibt. Auf schmalen Schirmen deckt der Schleier durchgehend. */
@media (max-width:760px){
  .beitrag-kopf .kopf-bild::after{background:rgba(251,246,236,.93)}
}
.beitrag-meta{
  display:flex;flex-wrap:wrap;gap:9px 16px;align-items:center;
  font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--braun);font-weight:600;margin-bottom:20px;
}
.beitrag-meta i{width:3px;height:3px;border-radius:50%;background:var(--gold);flex:none}
.beitrag-kopf h1{font-size:clamp(29px,3.6vw,46px)}
.beitrag-kopf .fuehrung{margin-top:22px}

/* Die Lesespalte. ⚠️ ch ist NICHT die mittlere Zeichenbreite, sondern die Breite
   der Ziffer Null, und die ist deutlich breiter. Im Browser nachgezaehlt: 68ch
   ergaben 82 echte Zeichen pro Zeile, 62ch rund 75. Janine wollte es breiter und
   hat am 28.08. 750 px vorgegeben. Deshalb steht hier eine Pixelzahl und kein
   ch-Wert: sie hat eine Breite genannt, keine Zeichenzahl. Die zweite Haelfte
   des min() haelt auf schmalen Schirmen denselben Rand wie .bahn. */
.lesespalte{width:min(750px,100% - clamp(40px,10vw,160px));margin-inline:auto}

.beitrag-bild{margin:clamp(30px,3.5vw,46px) 0 0}
.beitrag-bild img{width:100%;aspect-ratio:16/9;object-fit:cover}
.beitrag-bild figcaption{
  font-size:13px;color:var(--braun);margin-top:10px;line-height:1.5;
}

/* ⚠️ Der Fliesstext kommt aus Melanies Editor, nicht aus Modulen. Deshalb wird
   hier nach ELEMENT gestylt statt nach Klasse. Fuer den Divi-Nachbau denselben
   Block in Divis Custom CSS legen, .entry-content ist dort der Container. */
/* Fliesstext im Beitrag groesser als der Rest der Site: hier liest jemand 1000
   Woerter am Stueck, nicht drei Zeilen Bildunterschrift. Die vw-Variante half
   nicht, 1.1vw sind bei 1440 px nur 15,8 px, es griff immer das Minimum. */
.artikel,.entry-content{font-size:17px;line-height:1.75}
@media (min-width:761px){.artikel,.entry-content{font-size:18.5px}}
.artikel > *:first-child,.entry-content > *:first-child{margin-top:0}
.artikel p,.entry-content p{margin:0 0 23px}
.artikel h2,.entry-content h2{font-size:clamp(22px,2.1vw,28px);margin:46px 0 15px}
.artikel h3,.entry-content h3{font-size:clamp(18px,1.5vw,21px);margin:34px 0 11px}
.artikel ul,.artikel ol,.entry-content ul,.entry-content ol{margin:0 0 23px;padding-left:0}
.artikel ul,.entry-content ul{list-style:none}
.artikel ol,.entry-content ol{padding-left:1.3em}
.artikel li,.entry-content li{margin-bottom:10px}
.artikel ul li,.entry-content ul li{position:relative;padding-left:22px}
.artikel ul li::before,.entry-content ul li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--gold);
}
.artikel blockquote,.entry-content blockquote{
  margin:34px 0;padding:2px 0 2px 26px;border-left:2.5px solid var(--gold);
  font-family:var(--serif);font-size:clamp(18px,1.7vw,22px);line-height:1.5;
}
.artikel blockquote p,.entry-content blockquote p{margin:0}
.artikel figure,.entry-content figure{margin:34px 0}
.artikel figure img,.entry-content figure img{width:100%}
.artikel figcaption,.entry-content figcaption{
  font-size:13px;color:var(--braun);margin-top:10px;line-height:1.5;
}
/* Verweise im Fliesstext muessen ohne Farbe erkennbar sein, deshalb Unterstrich. */
.artikel a,.entry-content a{
  color:var(--braun);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.artikel a:hover,.entry-content a:hover{text-decoration-thickness:2px}
.artikel strong,.entry-content strong{font-weight:600}
/* Tabellen scrollen im eigenen Kasten, statt die Seite quer zu ziehen. */
.artikel .tabelle,.entry-content .tabelle{overflow-x:auto;margin:0 0 26px}
.artikel table,.entry-content table{border-collapse:collapse;width:100%;font-size:15.5px}
.artikel th,.artikel td,.entry-content th,.entry-content td{
  text-align:left;padding:11px 14px;border-bottom:1px solid var(--linie);
}
.artikel th,.entry-content th{
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--braun);font-weight:600;
}

/* Kennzeichnung der Vorlage. Faellt beim Divi-Nachbau ersatzlos weg. */
.vorlagen-hinweis{
  background:var(--sand-tief);border-left:3px solid var(--braun);
  padding:17px 21px;margin:0 0 38px;font-size:14.5px;line-height:1.6;
}
.vorlagen-hinweis b{display:block;margin-bottom:4px}

/* ---------- Zwei Elemente aus der NEXUS-Ratgeberseite (Janine 28.08.) ----------
   Der Erklaerkasten holt einen Begriff aus dem Lesefluss heraus, ohne ihn zu
   verstecken. Der Schlussabsatz steht nach einer Trennlinie und sagt, was jetzt
   zu tun ist. Beides sind im Divi-Nachbau eigene Text-Module im Beitrag. */
.artikel .erklaerkasten,.entry-content .erklaerkasten{
  background:var(--sand);border-left:3px solid var(--gold);
  padding:24px 26px 4px;margin:34px 0;
}
.artikel .erklaerkasten .marke,.entry-content .erklaerkasten .marke{margin-bottom:14px}
.artikel .erklaerkasten p,.entry-content .erklaerkasten p{font-size:.94em}
.artikel .schluss,.entry-content .schluss{
  border-top:1px solid var(--linie);margin-top:40px;padding-top:28px;
}


/* ================================================================
   MOBIL, EINSPALTIG. Janines Ansage vom 29.08.2026.
   Auf dem Handy sitzt der Kopf jeder Sektion mittig, der Goldstrich
   rutscht unter die Marke statt daneben, und Knoepfe laufen ueber die
   volle Spaltenbreite. Auf Desktop bleibt alles unveraendert.

   ⚠️ Der Block steht bewusst ganz am Ende des Blatts. Eine Media Query
   erhoeht die Spezifitaet NICHT, diese Regeln gewinnen also nur, weil
   sie spaeter stehen. Wer hier etwas ergaenzt, ergaenzt INNERHALB
   dieser Abfragen und niemals darunter.
   ================================================================ */

@media (max-width:760px){

  /* ---------- 1. Marke: Strich unter den Text, mittig ----------
     Dieselbe Mechanik, die .mitte auf Desktop schon benutzt: der Strich
     ist ein ::before und wandert per order hinter den Text. */
  .marke{flex-direction:column;align-items:center;gap:15px;text-align:center}
  .marke::before{order:2;width:34px}
  /* Ausnahme: der Erklaerkasten im Ratgeber-Beitrag ist kein Sektionskopf,
     seine Marke bleibt eine linksbuendige Zeile im Lesefluss. */
  .artikel .erklaerkasten .marke,.entry-content .erklaerkasten .marke{
    flex-direction:row;align-items:center;gap:10px;text-align:left;
  }
  .artikel .erklaerkasten .marke::before,
  .entry-content .erklaerkasten .marke::before{order:0;width:22px}

  /* ---------- 2. Sektionskoepfe mittig ---------- */
  .hero-text,
  .split-kopf,
  .fakten-raster > div:not(.fakten-bild),
  .bildband-innen > div,
  .probe-raster > div:not(.pdf-buehne),
  .mit-aehre .spalte,
  #schule > .bahn,
  #fuerwen > .bahn > .marke,#fuerwen > .bahn > h2,
  #ratgeber > .bahn > .marke,#ratgeber > .bahn > h2,#ratgeber > .bahn > .fuehrung,
  .kontakt-raster > div:not(.formular) > .marke,
  .kontakt-raster > div:not(.formular) > h2,
  .kontakt-raster > div:not(.formular) > .fuehrung{text-align:center}

  .hero-text .fuehrung,.split-kopf .fuehrung,
  .fakten-raster .fuehrung,.bildband-innen .fuehrung,
  .probe-raster .fuehrung{margin-inline:auto}

  /* Generisch, und damit greifen die Regeln auch auf den Unterseiten, deren
     Sektionen eigene Klassen tragen: jede Ueberschrift direkt unter einer Marke
     und der Text direkt darunter. Trifft "Die Tiefe", "Der Inhalt", "Danach",
     "Geschrieben von" und "Erfahrungen" auf den zwoelf Lehrgangsseiten sowie
     "Alle Beitraege" und "Weiterlesen" im Ratgeber. */
  .marke + h1,.marke + h2,.marke + h3{text-align:center}
  .marke + h1 + .fuehrung,.marke + h2 + .fuehrung,.marke + h3 + .fuehrung,
  .marke + h1 + p,.marke + h2 + p,.marke + h3 + p{text-align:center;margin-inline:auto}

  /* Kopf des Ratgeber-Beitrags: Titel, Datum und Lesezeit gehoeren zusammen,
     die Meta-Zeile ist ein Flex-Element und braucht justify statt text-align. */
  .beitrag-kopf .kopf-text{text-align:center}
  .beitrag-kopf .beitrag-meta{justify-content:center}

  /* Ausnahme, von Janine ausdruecklich so gewollt: die drei nummerierten
     Punkte unter "Was danach anders ist" bleiben linksbuendig. */
  #ergebnis .spalten .spalte{text-align:left}

  /* Die Icons in "Warum diese Schule" mittig ueber ihre Ueberschrift */
  .mit-aehre .spalte > svg{display:block;margin-inline:auto}

  /* Schulleitung mittig, samt Portrait. Gilt auf der Startseite wie auf der
     Schulseite, es ist derselbe Baustein. */
  .leitung{justify-items:center;text-align:center}
  #schule .mehr-reihe{justify-content:center}

  /* ---------- 3. Knoepfe ueber die volle Breite ----------
     Ausgenommen bleiben die Lehrgangskarten: dort steht der Knopf neben
     dem Preis, das ist die eine Stelle mit zwei Spalten im Karteninneren. */
  .knopf-reihe{flex-direction:column;align-items:stretch;gap:12px}
  .knopf-reihe .knopf{width:100%;justify-content:center}
  form button.knopf{width:100%;justify-content:center}

  /* ---------- 4. Die vier Merkmale: oben derselbe Abstand wie unten ----------
     Nach unten liegen zwei Polster uebereinander, das eigene und das der
     naechsten Sektion. Nach oben gab es nur das eigene, und davon zog
     margin-top noch 32 px ab. Jetzt oben dieselbe Summe wie unten. */
  .merkmale{margin-top:0;padding-top:calc(var(--luft) + clamp(48px,6vw,80px))}

  /* ---------- 5. Umfang: mehr Luft zwischen Bild und Text ----------
     Der schwebende Zahlenblock haengt 18 px unter das Bild hinaus, von den
     alten 32 px Abstand blieben also 14 px uebrig. */
  .fakten-raster{gap:56px}

  /* ---------- 6. Burger: drei gleich lange Striche, offen ein Kreuz ----------
     Drei Striche zu 1.8 px mit 7 px Abstand ergeben 19.4 px Hoehe. Vom
     ersten bis zur Mitte sind es 8.8 px, deshalb kreuzen sich erster und
     letzter genau dort, wo der mittlere ausgeblendet wird. */
  .burger span{transition:transform .42s cubic-bezier(.6,0,.2,1),opacity .22s ease}
  .burger span:last-child{width:25px;margin-right:auto}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:first-child{transform:translateY(8.8px) rotate(45deg)}
  .burger[aria-expanded="true"] span:last-child{transform:translateY(-8.8px) rotate(-45deg)}

  /* ---------- 7. Zweite Runde, Janine am 29.08. nachmittags ---------- */

  /* Die vier Merkmale: halber Abstand nach oben. Gemessen waren oben und unten
     gleich, aber unten grenzt sofort die naechste Sektion mit eigener
     Hintergrundfarbe an, und diese Kante liest das Auge als Ende des Abstands.
     Deshalb wirkte oben doppelt so viel Luft. */
  .merkmale{padding-top:calc((var(--luft) + clamp(48px,6vw,80px)) / 2)}

  /* Fuss: Logo und Beschreibung mittig ueber die volle Breite, darunter Schule
     und Rechtliches nebeneinander. Das spart rund ein Drittel der Fusshoehe. */
  .fuss-innen{grid-template-columns:1fr 1fr;gap:36px 24px}
  .fuss-innen > :first-child{grid-column:1 / -1;text-align:center}
  .fuss-innen > :first-child .logo{justify-content:center}
  /* Der harte Umbruch hinter "Pferden," ist fuer den Desktop-Satz gesetzt und riss
     auf dem Handy eine Zeile zu frueh um. */
  .fuss .klein br{display:none}
  .fuss-unten{justify-content:center;text-align:center}

  /* Burger: das Menue liegt als position:fixed IM Kopf. Sobald der Kopf klebt,
     traegt er backdrop-filter, und ein Element mit backdrop-filter wird zum
     Bezugsrahmen fuer fixed positionierte Nachfahren. Das Menue schrumpfte damit
     auf Kopfzeilenhoehe, die Navigation war weg. Bei offenem Menue liegt darunter
     ohnehin eine deckende Flaeche, der Weichzeichner ist dort ohne Wirkung. */
  .kopf[data-menue="offen"]{backdrop-filter:none;-webkit-backdrop-filter:none}

  /* .wer-block steht an genau zwei Stellen: "So wird hier unterrichtet" auf der
     Schulseite und "Fuer wen das ist" auf den zwoelf Lehrgangsseiten. Janine
     will beide mittig, deshalb ohne Eingrenzung. Das #fuerwen der Startseite
     benutzt .gegen-box und bleibt davon unberuehrt. */
  .wer-block{text-align:center}
  .wer-block .zeichen svg{margin-inline:auto}
  #grenzen .spalten .spalte{text-align:center}

  /* Faktenzeile im Lehrgangs-Hero: 8 Wochen, 4 Module, 16 Kapitel, Zugriff.
     Vier Fakten passen auf 375 px nicht in eine Zeile, und beim freien Umbruch
     blieb der Trennpunkt am Zeilenende haengen, bei allen sechs Lehrgaengen.
     Der mittlere Punkt wird deshalb zum unsichtbaren Zeilenumbruch: volle
     Breite, keine Hoehe, keine Farbe. Danach stehen zwei Fakten je Zeile. */
  .hero-fakten{justify-content:center}
  .hero-fakten i:nth-of-type(2){width:100%;height:0;background:none;margin:0}

  /* Fuss: auch die beiden Linkspalten mittig, nicht nur der Logoblock */
  .fuss-innen > :nth-child(n+2){text-align:center}

  /* Leseprobe, "Was Sie bekommen". Der gleichnamige #inhalt der Lehrgangsseiten
     enthaelt kein .spalten, der Selektor trifft also nur die Leseprobe. */
  #inhalt .spalten .spalte{text-align:center}
  #inhalt .spalten .spalte > svg{display:block;margin-inline:auto}

  /* Lehrgang, "Die Tiefe": zwei Bilder untereinander sind auf dem Handy zu viel.
     Das zweite faellt weg, die Rundung wandert an das erste. */
  .tiefe-bilder figure:last-child{display:none}
  .tiefe-bilder figure:first-child{border-bottom-right-radius:var(--eck)}

  /* Lehrgang, "Die meisten Fehler": nur noch ein Bild, und es steht unter dem
     Text statt darueber. Die Klasse .schau-block sitzt an der Bahn, weil CSS
     ohne :has() den Elternteil nicht auswaehlen kann. */
  .schau-block{display:flex;flex-direction:column}
  .schau-block .schau{order:2;margin-top:clamp(28px,5vw,44px)}
  .schau .klein{display:none}
  .schau .gross{border-bottom-right-radius:var(--eck)}

  /* Lehrgang, "Danach": Rundung von oben rechts nach unten rechts */
  .nutzen-tier{border-top-right-radius:0;border-bottom-right-radius:var(--eck)}
}

/* ---------- Umschalter der Entwurfsfassungen, nur im Netlify-Paket ---------- */
/* Gehoert NICHT zum Entwurf. Vor dem Livegang entfaellt er zusammen mit dem
   <a class="vorschau"> in allen Dateien.

   ⚠️ Vorher war das eine Leiste ganz oben. Sie schob die Kopfzeile per
   .vorschau ~ .kopf{top:39px} nach unten, und beim Scrollen lief die Leiste weg,
   waehrend die Kopfzeile bei 39 px stehen blieb: darueber stand ein Streifen
   Hero mit angeschnittener Ueberschrift. Als schwebende Schaltflaeche unten
   links entfaellt das, die Kopfzeile klebt wieder bei 0. Janine 29.08. */
.vorschau{
  position:fixed;left:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);z-index:90;
  display:inline-flex;align-items:center;gap:9px;max-width:calc(100vw - 28px);
  background:#1c1c1c;color:#fff;text-decoration:none;
  font-family:var(--sans);font-size:13.5px;font-weight:600;
  padding:10px 16px;border-radius:99px;
  box-shadow:0 10px 28px rgba(28,20,12,.34);
  transition:background .2s ease,transform .2s ease;
}
.vorschau:hover{background:#000;transform:translateY(-2px)}
.vorschau:focus-visible{outline:2px solid #fff;outline-offset:3px}
.vorschau-marke{
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  opacity:.55;padding-right:9px;border-right:1px solid rgba(255,255,255,.25);
}
.vorschau-text{white-space:nowrap}
@media (max-width:600px){
  .vorschau{font-size:12.5px;padding:9px 13px;gap:7px}
  .vorschau-marke{font-size:9.5px;padding-right:7px}
}