/* AZAV School Landingpage · Fassung 2 · 16.10.2026
   Aufbau nach learningsuite.com (Arta), Farbe und Schrift aus DESIGN.md (Modus Marke), Werte aus tokens.css.
   Gold nur am Kaufknopf. Bewegung: eine Kurve, nur transform und opacity, unter prefers-reduced-motion aus. */

:root{
  --haken-weiss:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --pfeil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e518d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --spiel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e518d' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath fill='%230e518d' d='M10 9v6l5-3z'/%3E%3C/svg%3E");
  --kopf-hoehe:calc(var(--raum-6) + var(--raum-1));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--kopf-hoehe) + var(--raum-2))}
body{margin:0;font-family:var(--schrift);font-weight:var(--gewicht-text);font-size:var(--stufe-4);line-height:var(--zeile-text);
  color:var(--text);background:var(--grund);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-wrap:break-word}
img,video{max-width:100%}
picture{display:block}
h1,h2,h3{font-weight:var(--gewicht-titel);line-height:var(--zeile-titel);letter-spacing:-.01em;margin:0;text-wrap:balance}
h1{font-size:var(--stufe-1);font-weight:var(--gewicht-text)}
h2{font-size:var(--stufe-2)}
h3{font-size:var(--stufe-3)}
p{margin:0;text-wrap:pretty}
a{color:var(--akzent)}
strong,b{font-weight:var(--gewicht-titel)}
:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}
.kopf :focus-visible,.held :focus-visible,.schluss :focus-visible{outline-color:var(--grund)}
[tabindex="-1"]:focus{outline:none}
.nw{white-space:nowrap}
.blau{color:var(--akzent)}

.wrap{width:100%;max-width:calc(var(--breite) + 2 * var(--raum-3));margin:0 auto;padding:0 var(--raum-2)}
@media (min-width:640px){.wrap{padding:0 var(--raum-3)}}

.sprung{position:absolute;left:var(--raum-2);top:var(--raum-2);z-index:100;padding:var(--raum-1) var(--raum-2);border-radius:var(--radius-klein);
  background:var(--grund);color:var(--akzent-tief);transform:translateY(-300%)}
.sprung:focus{transform:none}

/* Knöpfe: Gold nur hier */
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:var(--raum-5);padding:0 var(--raum-3);
  border-radius:var(--radius-klein);font:inherit;font-weight:var(--gewicht-titel);line-height:1.2;text-align:center;text-decoration:none;
  transition:transform var(--dauer-kurz) var(--kurve)}
.knopf-kauf{background:var(--signal);color:var(--signal-text);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 24px -14px rgba(4,18,33,.6)}
.knopf:active{transform:translateY(1px)}
@media (hover:hover){.knopf-kauf:hover{transform:translateY(-2px)}}
.knopf-gross{min-height:calc(var(--raum-5) + var(--raum-1));padding:0 var(--raum-4)}
.knopf-klein{min-height:44px;padding:0 var(--raum-2);font-size:var(--klein)}
.knopf-breit{width:100%}

/* Kopfleiste: Navy, geht in den Kopf über */
.kopf{position:sticky;top:0;z-index:50;background:var(--akzent-tief);color:var(--grund)}
.kopf::after{content:"";position:absolute;left:0;right:0;top:100%;height:var(--raum-3);pointer-events:none;
  background:linear-gradient(rgba(4,18,33,.22),rgba(4,18,33,0));opacity:0;transition:opacity var(--dauer-kurz) var(--kurve)}
.kopf.erhoben::after{opacity:1}
.kopf-reihe{display:flex;align-items:center;gap:var(--raum-2);min-height:var(--raum-6)}
.kopf-logo{display:flex;align-items:center;gap:var(--raum-2);margin-right:auto;min-height:44px;color:var(--grund);text-decoration:none}
.kopf-logo img{height:34px;width:auto}
.kopf-marke{font-weight:var(--gewicht-titel);font-size:var(--klein);padding-left:var(--raum-2);border-left:1px solid rgba(255,255,255,.28);white-space:nowrap}
@media (max-width:379px){.kopf-marke{display:none}}
.kopf-nav{display:none}
@media (min-width:980px){
  .kopf-reihe{min-height:var(--kopf-hoehe)}
  .kopf-logo img{height:40px}
  .kopf-marke{font-size:var(--stufe-4)}
  .kopf-nav{display:flex;gap:var(--raum-2)}
  .kopf-nav a{position:relative;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 var(--raum-1);color:var(--auf-nacht);text-decoration:none;font-size:var(--klein)}
  .kopf-nav a::after{content:"";position:absolute;left:var(--raum-1);right:var(--raum-1);bottom:var(--raum-1);height:2px;background:var(--grund);
    transform:scaleX(0);transform-origin:left;transition:transform var(--dauer-kurz) var(--kurve)}
  .kopf-nav a:hover{color:var(--grund)}
  .kopf-nav a:hover::after,.kopf-nav a:focus-visible::after{transform:scaleX(1)}
}
/* Menü unter 980 px, geht ohne JavaScript */
.menue{position:relative}
.menue summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--raum-1);min-height:44px;padding:0 var(--raum-2);
  border-radius:var(--radius-klein);border:1px solid rgba(255,255,255,.3);font-weight:var(--gewicht-titel);font-size:var(--klein);color:var(--grund)}
.menue summary::-webkit-details-marker{display:none}
.menue-zeichen{position:relative;width:18px;height:2px;background:currentColor;border-radius:2px}
.menue-zeichen::before,.menue-zeichen::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;border-radius:2px}
.menue-zeichen::before{top:-6px}
.menue-zeichen::after{top:6px}
.menue-liste{position:absolute;right:0;top:calc(100% + var(--raum-1));display:grid;min-width:220px;padding:var(--raum-1);
  background:var(--grund);border-radius:var(--radius);box-shadow:var(--schatten-tief)}
.menue-liste a{display:flex;align-items:center;min-height:44px;padding:0 var(--raum-2);border-radius:var(--radius-klein);
  color:var(--text);text-decoration:none;font-weight:var(--gewicht-titel)}
.menue-liste a:hover,.menue-liste a:focus-visible{background:var(--flaeche-leise)}
@media (min-width:980px){.menue{display:none}}
@media (max-width:979px){.kopf .knopf{display:none}}

/* 1 · Kopf */
.held{position:relative;overflow:hidden;color:var(--grund);background:var(--nacht);background-image:var(--nacht-verlauf);
  padding:var(--raum-5) 0 var(--raum-6)}
.held-raster{display:grid;gap:var(--raum-5)}
@media (min-width:1024px){
  .held{padding:var(--raum-6) 0 var(--raum-7)}
  .held-raster{grid-template-columns:7fr 5fr;align-items:center;gap:var(--raum-6)}
  .held-bild{justify-self:start;width:calc(100% + var(--raum-6));max-width:none;margin-right:calc(-1 * var(--raum-6))}
  .handy{width:29%}
}
.held-eyebrow{font-size:var(--klein);font-weight:var(--gewicht-titel);color:var(--auf-nacht);margin-bottom:var(--raum-2)}
@media (min-width:640px){.held-eyebrow{font-size:var(--stufe-4)}}
/* Betonung über Helligkeit statt Gewicht: die ganze H1 bleibt 400 (Council 16.10.: Fettblock am Handy) */
.held h1{color:var(--auf-nacht-leise)}
.held h1 strong{font-weight:inherit;color:var(--grund)}
.held-unter{color:var(--auf-nacht);margin-top:var(--raum-3);max-width:34em}
.held .haken-nacht{margin-top:var(--raum-3)}
.held-aktion{display:flex;flex-wrap:wrap;align-items:center;gap:var(--raum-2) var(--raum-4);margin-top:var(--raum-4)}
.held-link{display:inline-flex;align-items:center;gap:var(--raum-1);min-height:44px;color:var(--grund);font-weight:var(--gewicht-titel);
  text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.held-klein{font-size:var(--mini);color:var(--auf-nacht-leise);margin-top:var(--raum-2)}
.held-klein span,.schluss-klein span{white-space:nowrap}
/* Handy: im ersten Bild genau ein Kaufknopf (die Leiste unten), die Kursansicht direkt unter der Unterzeile */
@media (max-width:639px){
  .held{padding-top:var(--raum-4)}
  .held-raster{display:flex;flex-direction:column;gap:0}
  .held-text{display:contents}
  .held-eyebrow{order:1}
  .held h1{order:2}
  .held-unter{order:3;margin-top:var(--raum-2)}
  .held-bild{order:4;margin-top:var(--raum-4)}
  .held .haken{order:5;margin-top:var(--raum-4)}
  .held-aktion{order:6;margin-top:var(--raum-2)}
  .held-klein{order:7}
  .held-aktion .knopf{display:none}
}

/* Geräte: Laptop und Handy mit der echten Kursansicht */
.held-bild{position:relative;width:100%;max-width:620px;justify-self:center;padding-bottom:var(--raum-4)}
.laptop{position:relative;margin:0 5%}
.laptop-schirm{background:var(--text);padding:2.2%;border-radius:var(--radius) var(--radius) var(--raum-1) var(--raum-1);box-shadow:var(--schatten-tief)}
.laptop-schirm img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center;border-radius:var(--raum-1)}
.laptop-fuss{height:var(--raum-2);margin:0 -5%;border-radius:0 0 var(--radius-klein) var(--radius-klein);background:var(--flaeche);
  background-image:linear-gradient(180deg,rgba(255,255,255,.6),rgba(10,61,107,.16));box-shadow:var(--schatten-tief)}
.handy{position:absolute;right:0;bottom:0;width:27%;margin:0;padding:1.5%;background:var(--text);border-radius:var(--radius-gross);box-shadow:var(--schatten-tief)}
.handy-schirm{border-radius:var(--radius);overflow:hidden}
.handy-schirm img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;object-position:top center}

/* Haken */
.haken{list-style:none;margin:0;padding:0;display:grid;gap:var(--raum-1)}
.haken li{position:relative;padding-left:2.1em}
.haken li::before{content:"";position:absolute;left:0;top:.2em;width:1.3em;height:1.3em;border-radius:50%;
  background:var(--akzent) var(--haken-weiss) center/62% no-repeat}
.haken-nacht li{color:var(--auf-nacht)}
.haken-nacht li::before{border-radius:.32em;background-color:rgba(255,255,255,.16)}
.haken-titel{font-weight:var(--gewicht-titel);margin:var(--raum-4) 0 var(--raum-2)}
@media (min-width:640px){.haken-zwei{grid-template-columns:1fr 1fr;column-gap:var(--raum-3)}}

/* 2 · Vertrauen */
.vertrauen{background:var(--grund);padding:var(--raum-5) 0;border-bottom:var(--linie)}
.siegel{list-style:none;margin:0 auto;padding:0;display:grid;max-width:960px}
.siegel li+li{border-top:var(--linie)}
@media (min-width:768px){
  .siegel{grid-template-columns:1fr 1.5fr 1fr;align-items:center}
  .siegel li+li{border-top:0;border-left:var(--linie)}
}
.siegel a{display:grid;justify-items:center;align-content:center;gap:calc(var(--raum-1) / 2);min-height:44px;padding:var(--raum-2);
  border-radius:var(--radius);color:var(--text);text-decoration:none;text-align:center}
@media (hover:hover){.siegel a:hover{background:var(--flaeche-leise)}}
.siegel-name{font-weight:var(--gewicht-titel)}
.siegel-wert{font-size:var(--klein);color:var(--gedaempft)}
.sterne{display:inline-flex;gap:2px}
.sterne svg{width:18px;height:18px;fill:var(--akzent)}
.siegel-zeichen{width:22px;height:22px;fill:none;stroke:var(--akzent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* Echte Siegel von ProvenExpert und Agenturmarkt (Marcel 28.10.2026), als Kopie vom eigenen Server, Klick führt zum Profil */
.siegel-echt img{display:block;height:auto}
.siegel-pe{width:104px}
.siegel-am{width:min(100%,280px)}
.band-titel{text-align:center;font-size:var(--klein);font-weight:var(--gewicht-titel);color:var(--gedaempft);margin:var(--raum-4) 0 var(--raum-3)}
/* Mobil kompakt: Name und Sterne in einer Zeile, Leiste nicht höher als ein Bildschirm */
@media (max-width:767px){
  .vertrauen{padding:var(--raum-4) 0}
  .siegel{grid-template-columns:auto 1fr;align-items:center}
  .siegel li:nth-child(2){border-top:0}
  .siegel li:nth-child(3){grid-column:1 / -1}
  .siegel a{grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:var(--raum-1);row-gap:0;padding:var(--raum-2) var(--raum-1)}
  .siegel-wert{grid-column:1 / -1}
  .siegel-pe{width:88px}
  .siegel-am{width:min(100%,232px)}
  .band-titel{margin-top:var(--raum-3)}
}
/* Logos stehen still. Höhe je Logo nach Fläche ausgeglichen (--h) */
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--raum-3);max-width:1040px;margin:0 auto;padding:0 var(--raum-2)}
@media (min-width:640px){.logos{column-gap:var(--raum-5)}}
.logos img{height:calc(var(--h,40px) * .8);width:auto;filter:grayscale(1);opacity:.7}
@media (min-width:768px){.logos{max-width:760px}.logos img{height:var(--h,40px)}}

/* Abschnitte */
.abschnitt{padding:var(--raum-6) 0}
@media (min-width:960px){.abschnitt{padding:var(--raum-7) 0}}
.hell{background:var(--flaeche)}
.kopfzeile-mitte{text-align:center;max-width:780px;margin:0 auto var(--raum-5)}
.lead{color:var(--gedaempft);margin-top:var(--raum-2)}
.aktion-mitte{text-align:center;margin-top:var(--raum-5)}

/* KI-Zeichen am Bild (AI-Act Art. 50, Kanon A4D-05). Echte Fotos tragen nie eins */
.ki-bild{position:relative}
.ki-zeichen{position:absolute;top:var(--raum-1);right:var(--raum-1);z-index:3;padding:calc(var(--raum-1) / 2) var(--raum-1);border-radius:var(--raum-1);
  font-size:var(--mini);font-weight:var(--gewicht-titel);line-height:1.2;letter-spacing:.04em;color:var(--grund);background:rgba(8,47,83,.82);
  pointer-events:none;transition:opacity var(--dauer-kurz) var(--kurve)}

/* 3 · Für wen */
.karten-4{display:grid;gap:var(--raum-3)}
@media (min-width:640px){.karten-4{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.karten-4{grid-template-columns:repeat(4,1fr)}}
.karte{background:var(--grund);border:var(--linie);border-radius:var(--radius);padding:var(--raum-2);box-shadow:var(--schatten)}
.karte-bild{border-radius:var(--radius-klein);overflow:hidden;aspect-ratio:4/3;background:var(--flaeche)}
.karte-bild img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:639px){.karte-bild{aspect-ratio:16/10}}
.karte-text{padding:var(--raum-3) var(--raum-1) var(--raum-1)}
.karte h3{margin-bottom:var(--raum-1)}
.karte p{color:var(--gedaempft)}

/* 4 · Halbwissen */
.teilung{display:grid;gap:var(--raum-5);align-items:center}
@media (min-width:960px){.teilung{grid-template-columns:5fr 6fr;gap:var(--raum-6)}}
.teilung-bild{position:relative;margin:0;width:100%;max-width:520px;justify-self:center;border-radius:var(--radius-gross);overflow:hidden;box-shadow:var(--schatten)}
.teilung-bild img{display:block;width:100%;height:auto}
.teilung-bild figcaption{position:absolute;left:0;right:0;bottom:0;padding:var(--raum-6) var(--raum-3) var(--raum-3);color:var(--grund);
  font-weight:var(--gewicht-titel);background:linear-gradient(180deg,rgba(8,47,83,0),rgba(8,47,83,.7) 40%,rgba(8,47,83,.94))}
.teilung-text .lead{margin-top:var(--raum-3)}

/* 5 · Einblick und Video-Rahmen (auch Fallstudien) */
.videos{display:grid;gap:var(--raum-3)}
@media (min-width:900px){.videos{grid-template-columns:repeat(3,1fr)}}
.vorschau{margin:0}
.vorschau-rahmen{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten)}
.vorschau-rahmen video{display:block;width:100%;height:100%;object-fit:cover;background:var(--nacht);transition:transform var(--dauer) var(--kurve)}
.vorschau-start{display:none;color:var(--grund)}
.js .vorschau-start{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
  gap:var(--raum-1);width:100%;height:100%;margin:0;padding:var(--raum-2);border:0;font:inherit;color:var(--grund);text-align:left;
  cursor:pointer;background:transparent;transition:opacity var(--dauer-kurz) var(--kurve)}
.vorschau .vorschau-start{padding-right:36%;background:linear-gradient(90deg,rgba(8,47,83,.72),rgba(8,47,83,.3) 55%,rgba(8,47,83,0) 72%)}
.vorschau-titel{font-weight:var(--gewicht-titel);font-size:var(--stufe-4);line-height:1.3;text-wrap:balance}
.etikett{display:inline-block;padding:calc(var(--raum-1) / 2) var(--raum-1);border-radius:var(--raum-1);background:var(--grund);color:var(--akzent-tief);
  font-size:var(--mini);font-weight:var(--gewicht-titel);line-height:1.3}
.abspielen{display:inline-flex;align-items:center;gap:var(--raum-1);white-space:nowrap;min-height:calc(var(--raum-4) + var(--raum-1) / 2);padding:0 var(--raum-2);
  border-radius:var(--radius-klein);background:var(--akzent);color:var(--grund);font-size:var(--mini);font-weight:var(--gewicht-titel);line-height:1.2;
  box-shadow:0 8px 18px -10px rgba(4,18,33,.6);transition:transform var(--dauer-kurz) var(--kurve)}
.abspielen svg{width:14px;height:14px;fill:currentColor}
@media (hover:hover){
  .vorschau-rahmen:hover video{transform:scale(1.03)}
  .vorschau-rahmen:hover .abspielen{transform:translateY(-2px)}
  .vorschau-rahmen.spielt:hover video{transform:none}
}
.vorschau-rahmen.spielt .vorschau-start,.vorschau-rahmen.spielt .ki-zeichen{opacity:0;pointer-events:none}

/* 6 · Nutzen-Reihen */
.reihe{display:grid;gap:var(--raum-4);align-items:center}
.reihe+.reihe{margin-top:var(--raum-6)}
@media (min-width:960px){
  .reihe{grid-template-columns:7fr 5fr;gap:var(--raum-6)}
  .reihe-gedreht{grid-template-columns:5fr 7fr}
  .reihe-gedreht .reihe-bild{order:2}
  .reihe+.reihe{margin-top:var(--raum-7)}
}
.reihe-bild{background:var(--flaeche-leise);border:var(--linie);border-radius:var(--radius-gross);padding:var(--raum-2)}
@media (min-width:640px){.reihe-bild{padding:var(--raum-4)}}
.reihe-bild img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:top center;border-radius:var(--radius-klein);box-shadow:var(--schatten)}
.reihe-text h3{margin-bottom:var(--raum-2)}
.reihe-text p{color:var(--gedaempft)}

/* 7 · Material: am Rechner Reiter links, Bild rechts. Am Handy klappt je Eintrag sein Bild auf */
.reiter{display:grid;gap:var(--raum-2)}
.reiter-knopf{position:relative;display:block;width:100%;min-height:44px;margin:0;padding:var(--raum-3);border:0;border-radius:var(--radius);
  font:inherit;color:inherit;text-align:left;background:transparent;cursor:pointer}
.reiter-titel{display:block;font-weight:var(--gewicht-titel);font-size:var(--stufe-3);line-height:var(--zeile-titel)}
.reiter-text{display:block;margin-top:var(--raum-1);color:var(--gedaempft)}
.ist-an .reiter-titel{color:var(--akzent)}
.reiter-bild{margin:0;border-radius:var(--radius-klein);overflow:hidden;background:var(--grund);box-shadow:var(--schatten)}
.reiter-bild img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.reiter-zeile{text-align:center;color:var(--gedaempft);max-width:720px;margin:var(--raum-5) auto 0}
.js .reiter-eintrag:not(.ist-an) .reiter-bild{display:none}
@media (max-width:959px){
  .reiter-eintrag{border-radius:var(--radius);border:var(--linie);background:rgba(255,255,255,.5)}
  .reiter-eintrag.ist-an{background:var(--grund);box-shadow:var(--schatten)}
  .js .reiter-knopf{padding-right:calc(var(--raum-6))}
  .js .reiter-knopf::after{content:"";position:absolute;right:var(--raum-3);top:var(--raum-3);width:22px;height:22px;
    background:var(--pfeil) center/contain no-repeat;transition:transform var(--dauer) var(--kurve)}
  .js .ist-an .reiter-knopf::after{transform:rotate(180deg)}
  .reiter-bild{margin:0 var(--raum-2) var(--raum-2);box-shadow:none;border:var(--linie)}
}
@media (min-width:960px){
  .js .reiter{grid-template-columns:5fr 7fr;column-gap:var(--raum-6);row-gap:var(--raum-1);align-items:start}
  .js .reiter-eintrag{display:contents}
  .js .reiter-knopf{grid-column:1}
  .js .reiter-eintrag:nth-child(1) .reiter-knopf{grid-row:1}
  .js .reiter-eintrag:nth-child(2) .reiter-knopf{grid-row:2}
  .js .reiter-eintrag:nth-child(3) .reiter-knopf{grid-row:3}
  .js .reiter-eintrag:nth-child(4) .reiter-knopf{grid-row:4}
  .js .reiter-bild{grid-column:2;grid-row:1 / span 4;align-self:center;border-radius:var(--radius);box-shadow:var(--schatten-tief)}
  .js .ist-an .reiter-knopf{background:var(--grund);box-shadow:var(--schatten)}
  .reiter-knopf:hover{background:rgba(255,255,255,.55)}
  .js .ist-an .reiter-knopf:hover{background:var(--grund)}
}

/* 8 · Lehrplan */
.zahlen{display:grid;grid-template-columns:1fr 1fr;max-width:880px;margin:0 auto var(--raum-5);background:var(--flaeche-leise);
  border:var(--linie);border-radius:var(--radius)}
.zahlen div{display:flex;flex-direction:column-reverse;align-items:center;padding:var(--raum-3) var(--raum-2);text-align:center}
.zahlen div:nth-child(even){border-left:var(--linie)}
.zahlen div:nth-child(n+3){border-top:var(--linie)}
@media (min-width:640px){
  .zahlen{grid-template-columns:repeat(4,1fr)}
  .zahlen div:nth-child(n+2){border-left:var(--linie)}
  .zahlen div:nth-child(n+3){border-top:0}
}
.zahlen dt{font-size:var(--klein);color:var(--gedaempft)}
.zahlen dd{margin:0;font-size:var(--stufe-2);font-weight:var(--gewicht-titel);line-height:1.15;color:var(--akzent)}
.module{display:grid;gap:var(--raum-2);max-width:880px;margin:0 auto}
.modul{background:var(--grund);border:var(--linie);border-radius:var(--radius);box-shadow:var(--schatten)}
.modul summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;column-gap:var(--raum-3);min-height:44px;padding:var(--raum-3)}
.modul summary::-webkit-details-marker{display:none}
.modul summary::after{content:"";grid-column:2;grid-row:1 / span 3;align-self:center;width:22px;height:22px;
  background:var(--pfeil) center/contain no-repeat;transition:transform var(--dauer) var(--kurve)}
.modul[open] summary::after{transform:rotate(180deg)}
.modul-nr{grid-column:1;font-size:var(--mini);font-weight:var(--gewicht-titel);color:var(--akzent)}
.modul-titel{grid-column:1;font-size:var(--stufe-3);font-weight:var(--gewicht-titel);line-height:var(--zeile-titel);margin-top:2px;text-wrap:balance}
.modul-meta{grid-column:1;font-size:var(--klein);color:var(--gedaempft);margin-top:var(--raum-1)}
.lektionen{list-style:none;display:grid;gap:var(--raum-2);margin:0 var(--raum-3);padding:var(--raum-3) 0;border-top:var(--linie)}
.lektionen li{position:relative;padding-left:2em}
.lektionen li::before{content:"";position:absolute;left:0;top:.25em;width:1.25em;height:1.25em;background:var(--spiel) center/contain no-repeat}
.lektionen li.weitere{color:var(--gedaempft)}
.lektionen li.weitere::before{display:none}
/* Rechner: Überschrift und Zahlen stehen links still, die Module laufen rechts (Council 16.10.: Breite nutzen) */
@media (min-width:960px){
  .lehrplan-raster{display:grid;grid-template-columns:5fr 7fr;column-gap:var(--raum-6);align-items:start}
  .lehrplan-kopf{position:sticky;top:calc(var(--kopf-hoehe) + var(--raum-5))}
  .lehrplan-kopf .kopfzeile-mitte{text-align:left;margin:0 0 var(--raum-4)}
  .lehrplan-kopf .zahlen{grid-template-columns:1fr 1fr;margin:0}
  .lehrplan-kopf .zahlen div:nth-child(n+2){border-left:0}
  .lehrplan-kopf .zahlen div:nth-child(even){border-left:var(--linie)}
  .lehrplan-kopf .zahlen div:nth-child(n+3){border-top:var(--linie)}
  .lehrplan-raster .module{max-width:none;margin:0}
}

/* 9 · Fallstudien */
.faelle{display:grid}
.fall{display:grid;gap:var(--raum-3);align-items:center}
.fall+.fall{margin-top:var(--raum-5);padding-top:var(--raum-5);border-top:1px solid rgba(10,61,107,.14)}
@media (min-width:960px){
  .fall{grid-template-columns:11fr 9fr;gap:var(--raum-6)}
  .fall-gedreht{grid-template-columns:9fr 11fr}
  .fall-gedreht .fall-film{order:2}
  .fall+.fall{margin-top:var(--raum-6);padding-top:var(--raum-6)}
}
.fall-film{box-shadow:var(--schatten-tief)}
.fall-film .vorschau-start{background:linear-gradient(180deg,rgba(8,47,83,.3),rgba(8,47,83,0) 32%,rgba(8,47,83,0) 64%,rgba(8,47,83,.4))}
.fall-film .abspielen{align-self:flex-end}
.fall-firma{font-size:var(--klein);color:var(--gedaempft);margin-top:calc(var(--raum-1) / 2)}
.fall-ergebnis{margin-top:var(--raum-2);font-weight:var(--gewicht-titel);color:var(--akzent)}
.fall-stimmen{display:grid;gap:var(--raum-2);margin:var(--raum-3) 0 0}
.fall-stimmen div{padding-top:var(--raum-2);border-top:1px solid rgba(10,61,107,.14)}
.fall-stimmen dt{font-size:var(--mini);font-weight:var(--gewicht-titel);letter-spacing:.06em;text-transform:uppercase;color:var(--gedaempft)}
.fall-stimmen dd{margin:calc(var(--raum-1) / 2) 0 0}

/* 10 · Preis */
@media (min-width:960px){.teilung-preis{grid-template-columns:1fr 1fr}}
.paket{position:relative;width:100%;max-width:540px;justify-self:center;padding:0 9% 15% 0}
.paket-blatt{position:absolute;right:0;bottom:0;width:34%;border-radius:var(--raum-1);overflow:hidden;background:var(--grund);
  box-shadow:var(--schatten-tief);transform:rotate(-3deg)}
.paket-blatt img{display:block;width:100%;height:auto}
.preis-karte{background:var(--grund);border:var(--linie);border-radius:var(--radius-gross);padding:var(--raum-4) var(--raum-3);box-shadow:var(--schatten-tief)}
@media (min-width:640px){.preis-karte{padding:var(--raum-5)}}
.preis-lead{color:var(--gedaempft);margin-top:var(--raum-2)}
.preis-karte .haken{margin-top:var(--raum-3)}
.preis-zeile{display:flex;align-items:center;gap:var(--raum-2);margin:var(--raum-4) 0 var(--raum-3)}
.preis{font-size:var(--stufe-zahl);font-weight:var(--gewicht-titel);line-height:1;letter-spacing:-.02em;color:var(--akzent-tief)}
.preis-text{font-size:var(--klein);line-height:1.4;color:var(--gedaempft)}
.zahlarten{list-style:none;display:flex;flex-wrap:wrap;gap:var(--raum-1);margin:var(--raum-3) 0 0;padding:0}
.zahlarten li{font-size:var(--mini);padding:calc(var(--raum-1) / 2) var(--raum-1);border-radius:var(--raum-1);background:var(--flaeche-leise);border:var(--linie)}
.preis-klein{font-size:var(--mini);color:var(--gedaempft);margin-top:var(--raum-2)}

/* 11 · Dozent */
.dozent{display:grid;gap:var(--raum-5);align-items:center}
@media (min-width:960px){.dozent{grid-template-columns:1fr 1fr;gap:var(--raum-6)}}
.dozent-bild{margin:0}
.dozent-bild img{display:block;width:100%;height:auto;border-radius:var(--radius-gross);box-shadow:var(--schatten)}
@media (max-width:959px){.dozent-bild img{aspect-ratio:4/3;object-fit:cover;object-position:82% 30%}}
.dozent-bild figcaption{font-size:var(--mini);color:var(--gedaempft);margin-top:var(--raum-2)}
.dozent-text .lead{margin-top:var(--raum-3)}
.fakten{list-style:none;display:grid;gap:var(--raum-2);margin:var(--raum-4) 0 0;padding:0}
@media (min-width:640px){.fakten{grid-template-columns:1fr 1fr}}
.fakten li{padding:var(--raum-2);border-radius:var(--radius-klein);background:var(--grund);border:var(--linie);font-weight:var(--gewicht-titel);line-height:1.4}
.bewertung{margin-top:var(--raum-3);font-size:var(--klein);font-weight:var(--gewicht-titel);color:var(--akzent-tief)}
.stimmen-titel{text-align:center;margin:var(--raum-6) 0 var(--raum-4)}
@media (min-width:960px){.stimmen-titel{margin-top:var(--raum-7)}}
.stimmen{display:grid;gap:var(--raum-3)}
@media (min-width:900px){.stimmen{grid-template-columns:repeat(3,1fr)}}
.stimme{margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:var(--raum-3);background:var(--grund);border:var(--linie);
  border-radius:var(--radius);padding:var(--raum-4) var(--raum-3);box-shadow:var(--schatten)}
.stimme footer{font-size:var(--mini);color:var(--gedaempft)}

/* 12 · Schritte (echte Abfolge, deshalb Ziffern) */
.schritte{list-style:none;display:grid;gap:var(--raum-3);margin:0;padding:0}
@media (min-width:900px){.schritte{grid-template-columns:repeat(3,1fr)}}
.schritte li{background:var(--flaeche-leise);border:var(--linie);border-radius:var(--radius);padding:var(--raum-4) var(--raum-3)}
.schritt-nr{display:block;font-size:var(--stufe-2);font-weight:var(--gewicht-titel);line-height:1;color:var(--akzent);margin-bottom:var(--raum-2)}
.schritte h3{margin-bottom:var(--raum-1)}
.schritte p{color:var(--gedaempft)}

/* 13 · Fragen, zweispaltig */
.fragen{display:grid;gap:var(--raum-2);max-width:1040px;margin:0 auto}
.fragen-spalte{display:grid;gap:var(--raum-2);align-content:start}
@media (min-width:900px){.fragen{grid-template-columns:1fr 1fr;gap:var(--raum-3)}.fragen-spalte{gap:var(--raum-3)}}
.frage{background:var(--grund);border:var(--linie);border-radius:var(--radius);box-shadow:var(--schatten)}
.frage summary{list-style:none;cursor:pointer;position:relative;min-height:44px;padding:var(--raum-3) var(--raum-6) var(--raum-3) var(--raum-3);
  font-weight:var(--gewicht-titel);line-height:1.45}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"";position:absolute;right:var(--raum-3);top:50%;width:22px;height:22px;margin-top:-11px;
  background:var(--pfeil) center/contain no-repeat;transition:transform var(--dauer) var(--kurve)}
.frage[open] summary::after{transform:rotate(180deg)}
.frage p{padding:0 var(--raum-3) var(--raum-3);color:var(--gedaempft)}

/* 14 · Schluss */
.schluss{display:grid;gap:var(--raum-5);align-items:center;overflow:hidden;border-radius:var(--radius-gross);padding:var(--raum-5) var(--raum-3);
  color:var(--grund);background:var(--nacht);background-image:var(--nacht-verlauf)}
@media (min-width:960px){.schluss{grid-template-columns:6fr 5fr;gap:var(--raum-6);padding:var(--raum-6)}}
.schluss h2{color:var(--grund)}
.schluss-text p{color:var(--auf-nacht);margin:var(--raum-2) 0 var(--raum-4)}
.schluss-text p.schluss-klein{font-size:var(--mini);color:var(--auf-nacht-leise);margin:var(--raum-2) 0 0}
.schluss-bild{width:100%;max-width:520px;justify-self:center}

/* Fuß */
.fuss{background:var(--grund);border-top:var(--linie);padding:var(--raum-6) 0 calc(var(--raum-7) + var(--raum-2));font-size:var(--klein);color:var(--gedaempft)}
@media (min-width:980px){.fuss{padding-bottom:var(--raum-4)}}
.fuss-raster{display:grid;gap:var(--raum-4)}
@media (min-width:800px){.fuss-raster{grid-template-columns:1.4fr 1fr 1fr auto}}
.fuss-logo{height:40px;width:auto;margin-bottom:var(--raum-2)}
.fuss-titel{font-weight:var(--gewicht-titel);color:var(--text);margin-bottom:var(--raum-1)}
.fuss a{display:flex;align-items:center;min-height:44px;color:var(--text);text-underline-offset:3px}
.fuss-zeichen{display:flex;gap:var(--raum-2);align-items:flex-start}
.fuss-zeichen img{width:56px;height:auto}
.fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--raum-1) var(--raum-3);margin-top:var(--raum-4);
  padding-top:var(--raum-3);border-top:var(--linie);font-size:var(--mini)}

/* Leiste unten: Handy immer, Tablet beim Scrollen, Rechner nie */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:var(--raum-2);
  padding:var(--raum-1) var(--raum-2) calc(var(--raum-1) + env(safe-area-inset-bottom));background:var(--grund);
  box-shadow:0 -12px 30px -14px rgba(10,61,107,.4)}
.leiste-preis b{display:block;font-size:var(--stufe-3);line-height:1.1;color:var(--akzent-tief)}
.leiste-preis span{font-size:var(--mini);color:var(--gedaempft)}
.leiste .knopf{flex:1;max-width:280px}
.js .leiste{transform:translateY(115%);transition:transform var(--dauer) var(--kurve)}
.js .leiste.sichtbar{transform:none}
@media (max-width:639px){.js .leiste{transform:none}}
@media (min-width:980px){.leiste{display:none}}

/* Bewegung nur mit Bewegungswunsch */
@media (prefers-reduced-motion:no-preference){
  .js .lauf{opacity:0;transform:translateY(16px);animation:rein var(--dauer) var(--kurve) forwards;animation-delay:calc(var(--i,0) * 90ms + 60ms)}
  @keyframes rein{to{opacity:1;transform:none}}
  .js [data-reveal]>.wrap{opacity:0;transform:translateY(24px);transition:opacity var(--dauer) var(--kurve),transform var(--dauer) var(--kurve)}
  .js [data-reveal].sichtbar>.wrap{opacity:1;transform:none}
  .js .ist-an .reiter-bild{animation:blende var(--dauer) var(--kurve)}
  @keyframes blende{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .vorschau-rahmen video,.knopf,.abspielen,.leiste,.kopf-nav a::after{transition:none}
}