/* ==========================================================================
   WkD – Weltklasse Deutsch
   Zentrales Stylesheet
   --------------------------------------------------------------------------
   Aufbau der Datei:
     1. Schriften (lokal gehostet – DSGVO)
     2. Farben & Grundeinstellungen
     3. Grundgerüst (Body, Links, Container)
     4. Kopfbereich (Aktionsleiste, Navigation)
     5. Startbereich (Hero)
     6. Wiederkehrende Bausteine (Abschnitte, Überschriften, Buttons)
     7. Einzelne Abschnitte
     8. Fußbereich
     9. Rechtsseiten (Impressum, Datenschutz, AGB, Widerruf)
    10. Mobile Ansicht
   ========================================================================== */


/* ==========================================================================
   1. SCHRIFTEN
   Die Schriften liegen lokal unter assets/fonts/ und werden NICHT von Google
   geladen. Das ist wichtig: Ein direkter Aufruf bei Google überträgt die
   IP-Adresse deiner Besucher in die USA und ist in Deutschland abmahnbar
   (LG München I, Urteil vom 20.01.2022, Az. 3 O 17493/20).
   ========================================================================== */

@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/dm-sans-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/dm-sans-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/dm-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('../assets/fonts/dm-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('../assets/fonts/dm-sans-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('../assets/fonts/dm-sans-latin-ext-700-normal.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;
  src:url('../assets/fonts/manrope-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;
  src:url('../assets/fonts/manrope-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;
  src:url('../assets/fonts/manrope-latin-800-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;
  src:url('../assets/fonts/manrope-latin-ext-800-normal.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}


/* ==========================================================================
   2. FARBEN & GRUNDEINSTELLUNGEN
   Alle Markenfarben stehen hier an einer Stelle. Wenn du eine Farbe ändern
   willst, änderst du sie hier – und sie ändert sich auf der ganzen Seite.
   ========================================================================== */

:root{
  --lila:        #9b00ff;   /* Hauptfarbe / Akzent  */
  --lila-hell:   #c000ff;   /* für Farbverläufe     */
  --dunkel:      #19002f;   /* dunkler Hintergrund  */
  --text:        #22043d;   /* Standard-Textfarbe   */
  --rosa:        #f8e9ef;   /* heller Abschnitt     */
  --limette:     #d6ff22;   /* Signalfarbe          */
  --grau:        #766c7e;   /* Fließtext gedämpft   */
  --rahmen:      #e8dfea;   /* Linien und Rahmen    */

  --radius:      14px;
  --radius-gross:28px;
  --breite:      1180px;    /* max. Inhaltsbreite   */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* Bei Nutzern, die reduzierte Bewegung eingestellt haben, keine Animation */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* ==========================================================================
   3. GRUNDGERÜST
   ========================================================================== */

body{
  margin:0;
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--text);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

a{text-decoration:none;color:inherit}
img{max-width:100%}

/* Zentrierter Inhaltsbereich – wird auf fast jedem Abschnitt verwendet */
.wrap{width:min(var(--breite),92%);margin-inline:auto}

/* Nur für Screenreader sichtbar (z.B. der Sprunglink) */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Sprunglink: wird sichtbar, sobald man mit Tab hineinspringt */
.skip-link:focus{
  position:fixed;top:10px;left:10px;z-index:100;width:auto;height:auto;
  clip:auto;background:var(--dunkel);color:#fff;padding:12px 18px;border-radius:8px;
}

/* Sichtbarer Fokusrahmen für Tastaturbedienung (Barrierefreiheit) */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--lila);
  outline-offset:3px;
  border-radius:4px;
}


/* ==========================================================================
   4. KOPFBEREICH
   ========================================================================== */

/* Der grüne Hinweisstreifen ganz oben */
.promo{
  min-height:42px;padding:8px 16px;
  background:var(--limette);
  display:flex;justify-content:center;align-items:center;text-align:center;
  font-size:13px;font-weight:700;
}

.nav{
  height:64px;background:#fff;
  display:flex;align-items:center;
  position:sticky;top:0;z-index:20;
  border-bottom:1px solid #eee;
}
.nav-inner{display:flex;align-items:center;gap:34px}

/* Knopf für die kostenlose Probestunde in der Kopfzeile.
   Auf schmalen Bildschirmen wird er ausgeblendet – dort steht die
   Probestunde stattdessen ganz oben im aufgeklappten Menü. */
.nav-probe{padding:10px 20px;font-size:14px;white-space:nowrap}
.probe-mobil{display:none}

/* Das Logo steht allein, ohne Schriftzug daneben.
   Es gibt zwei Bilddateien: logo-wkd.svg dunkel für helle Flächen und
   logo-wkd-hell.svg weiß für den dunklen Fußbereich. Größe hier ändern. */
.logo{display:inline-flex;align-items:center}
.logo img{height:40px;width:auto;display:block}

.links{display:flex;gap:30px;font-size:14px;font-weight:700;flex:1}
.links a{padding:4px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.links a:hover{color:var(--lila);border-bottom-color:var(--lila)}

/* Menü-Knopf für Handys – auf großen Bildschirmen ausgeblendet */
.menu-btn{
  display:none;background:none;border:0;cursor:pointer;
  padding:8px;margin-left:auto;
}
.menu-btn span{
  display:block;width:24px;height:2px;background:var(--text);
  border-radius:2px;transition:transform .2s,opacity .2s;
}
.menu-btn span + span{margin-top:5px}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}


/* ==========================================================================
   5. STARTBEREICH (HERO)
   ========================================================================== */

/* Die Höhe wächst mit der Fensterbreite mit.
   Sonst gilt: je breiter das Fenster, desto stärker wird das Foto oben und
   unten abgeschnitten. clamp() heißt: mindestens 560px, höchstens 900px,
   dazwischen 45% der Fensterbreite. Die 45% sind bewusst so gewählt, dass die
   Fotos (Seitenverhältnis 2:1) nur wenig beschnitten werden. */
.hero{
  min-height:clamp(560px, 45vw, 900px);
  display:flex;align-items:center;
  position:relative;overflow:hidden;
  color:#fff;background:var(--dunkel);
}

/* --- Die Bühne: hier liegen die vier Folien exakt übereinander ----------- */
.hero-buehne{position:absolute;inset:0;z-index:0}

.folie{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity .9s ease, visibility 0s linear .9s;
}
.folie.ist-aktiv{
  opacity:1;visibility:visible;
  transition:opacity .9s ease, visibility 0s;
}

/* object-position "62% 25%" heißt: Beim Beschneiden bleibt der Bildpunkt bei
   62% von links und 25% von oben im sichtbaren Bereich – also das Gesicht.
   Ohne diese Angabe schneidet der Browser mittig und nimmt den Kopf weg. */
.hero-photo{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:62% 25%;
}
/* Pro Motiv leicht anders, damit niemand angeschnitten wird */
.folie:nth-child(2) .hero-photo{object-position:60% 8%}
.folie:nth-child(3) .hero-photo{object-position:58% 45%}
.folie:nth-child(4) .hero-photo{object-position:62% 42%}

/* Dunkler Verlauf über dem Foto, damit die Schrift lesbar bleibt */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(20,5,35,.78) 0%,rgba(20,5,35,.52) 42%,rgba(20,5,35,.06) 78%);
}
.hero-inhalt{position:relative;z-index:2;padding:90px 0;text-align:center}

/* --- Die vier Textblöcke ------------------------------------------------
   Alle vier liegen im selben Rasterfeld (grid-area:1/1) übereinander.
   Der Kasten ist dadurch immer so hoch wie der längste Text, und der Knopf
   darunter bleibt beim Wechsel exakt an seiner Stelle stehen. */
.hero-texte{display:grid;margin-bottom:32px}
.hero-text{
  grid-area:1/1;
  opacity:0;transform:translateY(16px);
  pointer-events:none;
  transition:opacity .5s ease, transform .5s ease;
}
.hero-text.ist-aktiv{
  opacity:1;transform:none;pointer-events:auto;
  transition:opacity .55s ease .2s, transform .55s ease .2s;
}
.hero-kicker{
  margin:0 0 18px;
  font:800 clamp(15px,1.35vw,22px)/1 'Manrope',sans-serif;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--limette);
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}
.hero-titel{
  font:800 clamp(38px,5.2vw,72px)/1.04 'Manrope',sans-serif;
  letter-spacing:-.03em;max-width:660px;margin:0 auto 20px;
  text-shadow:0 2px 20px rgba(0,0,0,.4);
}
.hero-unter{
  font-size:18px;line-height:1.55;max-width:540px;margin:0 auto;
  text-shadow:0 1px 10px rgba(0,0,0,.45);
}
.hero-cta{position:relative;z-index:2}

/* Auf sehr breiten Bildschirmen (WQHD, 4K) ist der zentrierte Inhaltsbereich
   weit von der linken Kante entfernt – der Text stünde dann mitten im Bild.
   Deshalb wird der Textblock ab 1400px links verankert statt zentriert.
   Der Abstand wächst mit dem Bildschirm mit, hört aber bei 260px auf. */
@media(min-width:1400px){
  .hero-inhalt{
    width:auto;max-width:var(--breite);
    margin-inline:clamp(60px,7vw,260px) 0;
  }
}

/* --- Pfeile links und rechts -------------------------------------------- */
.hero-pfeil{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(20,5,35,.42);
  border:1.5px solid rgba(255,255,255,.55);
  color:#fff;cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .2s, border-color .2s, transform .2s;
}
.hero-pfeil svg{width:24px;height:24px}
.hero-pfeil:hover{background:rgba(155,0,255,.85);border-color:#fff}
.hero-pfeil:focus-visible{outline:3px solid var(--limette);outline-offset:3px}
.hero-pfeil-links{left:22px}
.hero-pfeil-rechts{right:22px}

/* --- Punkte unter den Bildern ------------------------------------------- */
.hero-punkte{
  position:absolute;left:0;right:0;bottom:52px;z-index:4;
  display:flex;justify-content:center;gap:11px;
}
.hero-punkt{
  width:11px;height:11px;padding:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.42);
  border:1.5px solid rgba(255,255,255,.75);
  transition:background .25s, width .25s, border-radius .25s;
}
.hero-punkt[aria-selected="true"]{
  background:var(--limette);border-color:var(--limette);
  width:30px;border-radius:6px;
}
.hero-punkt:focus-visible{outline:3px solid var(--limette);outline-offset:3px}

/* Vertrauensleiste direkt unter dem Hero */
.trust{
  background:#fff;border-radius:32px 32px 0 0;
  margin-top:-34px;position:relative;z-index:3;
  text-align:center;padding:24px;font-weight:700;
}
.stars{background:#00b67a;color:#fff;padding:2px 7px;margin:0 8px;border-radius:3px}


/* ==========================================================================
   6. WIEDERKEHRENDE BAUSTEINE
   ========================================================================== */

.section{padding:90px 0}
.section-rosa{background:var(--rosa)}
.section-dunkel{background:var(--dunkel);color:#fff}

.headline{text-align:center;max-width:820px;margin:0 auto 45px}
.headline h2{
  font:800 clamp(30px,4.5vw,58px)/1.05 'Manrope',sans-serif;
  letter-spacing:-.03em;margin:0 0 16px;
}
.headline p{color:var(--grau);font-size:17px;line-height:1.55}
.section-dunkel .headline p{color:#ddd}

/* Der lila Button, der überall auftaucht */
.cta{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(90deg,#9700ee,var(--lila-hell));
  color:#fff;border-radius:999px;padding:13px 22px;
  font-weight:800;font-size:15px;
  transition:transform .15s,box-shadow .15s;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(155,0,255,.35)}
.arrow{
  display:grid;place-items:center;width:22px;height:22px;
  border-radius:50%;background:rgba(255,255,255,.15);
}


/* ==========================================================================
   7. EINZELNE ABSCHNITTE
   ========================================================================== */

/* --------------------------------------------------------------------------
   METHODE: die drei Vorteile, direkt unter dem Bildwechsler

   Drei gleich breite weisse Karten auf cremefarbenem Grund. Jede Karte hat
   oben eine nummerierte Marke und eine zweizeilige Ueberschrift, darunter ein
   Foto, einen kurzen Strich als Trenner und den Text. Karte 02 und 03 tragen
   unten zusaetzliche Angaben; die sitzen mit "margin-top:auto" immer auf der
   gleichen Hoehe, egal wie lang der Text darueber ist.

   Warum gleich breit: Die drei Punkte sind gleich wichtig. Ungleiche Kaesten
   wuerden eine Rangfolge behaupten, die es nicht gibt.

   Die Reihenfolge 01 -> 02 -> 03 ist inhaltlich festgelegt und darf sich auch
   im Umbruch nicht aendern. Deshalb sortiert hier nichts per CSS um.
   -------------------------------------------------------------------------- */

.methode{
  background:#faf6f0;
  padding:96px 0 104px;
  --sand:      #f0e4d4;   /* Flaeche der Nummernmarke */
  --sand-linie:#d6bf9e;   /* der kurze Trennstrich    */
  --karte-rand:#ece2d6;
}

.methode-kopf{text-align:center;max-width:780px;margin:0 auto 48px}

/* Die kleine Zeile ueber der Ueberschrift */
.marke{
  font:800 12px 'DM Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lila);margin:0 0 16px;
}

.methode-kopf h2{
  font:800 clamp(31px,4.1vw,49px)/1.08 'Manrope',sans-serif;
  letter-spacing:-.025em;margin:0 0 20px;color:var(--text);
}

.methode-lead{
  color:#5f5568;font-size:19px;line-height:1.65;
  margin:0 auto;max-width:54ch;
}

/* Der handgezeichnete Schwung unter dem Wort "Sprechen." */
.schwung{position:relative;display:inline-block;white-space:nowrap}
.schwung svg{
  position:absolute;left:0;bottom:-.3em;
  width:100%;height:.4em;color:var(--lila);overflow:visible;
}


/* --- Die drei Karten --- */

.vorteile{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.vorteil{
  display:flex;flex-direction:column;min-width:0;
  background:#fff;border:1px solid var(--karte-rand);
  border-radius:26px;padding:30px 30px 32px;
  box-shadow:0 18px 40px rgba(34,4,61,.055);
}

.vorteil-kopf{display:flex;align-items:center;gap:15px;margin-bottom:24px}

.vorteil-nummer{
  flex:none;display:grid;place-items:center;
  width:46px;height:46px;border-radius:14px;
  background:var(--sand);color:var(--text);
  font:800 15px 'Manrope',sans-serif;letter-spacing:.02em;
}

.vorteil-kopf h3{
  margin:0;color:var(--text);
  font:800 clamp(19px,1.7vw,23px)/1.24 'Manrope',sans-serif;letter-spacing:-.02em;
}

/* "height:auto" ist Pflicht: Das Attribut height="660" im HTML wirkt sonst
   als Hoehenangabe und schlaegt das Seitenverhaeltnis. Die Attribute bleiben
   trotzdem stehen, damit der Browser vor dem Laden schon Platz reserviert. */
.vorteil-bild{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:18px;background:var(--sand);
}

.vorteil-strich{
  display:block;width:46px;height:3px;border-radius:2px;
  background:var(--sand-linie);margin:24px 0 18px;
}

.vorteil-text{margin:0;font-size:16px;line-height:1.7;color:#5c5266}

/* Die Zusatzangaben unten. "margin-top:auto" schiebt sie an den unteren Rand,
   damit sie in allen Karten auf einer Linie stehen. */
.vorteil-fuss{margin-top:auto;padding-top:24px;display:grid;gap:10px}

.mass{
  display:flex;align-items:center;gap:12px;
  background:#faf6f0;border:1px solid var(--karte-rand);
  border-radius:14px;padding:13px 15px;
  font-size:14.5px;line-height:1.4;color:#4b4155;
}
.mass b{font-weight:700;color:var(--text)}
.mass svg{
  flex:none;width:21px;height:21px;
  fill:none;stroke:var(--lila);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}

/* Karte 03: nur Symbol und Wort, ohne Kasten */
.vorteil-fuss-schmal{gap:12px}
.vorteil-fuss-schmal .mass{
  background:none;border:0;padding:0 2px;
  font-size:15px;color:var(--text);font-weight:600;
}


/* --- Das Band unter den Karten --- */

.methode-band{
  list-style:none;margin:22px 0 0;padding:24px 30px;
  background:#fff;border:1px solid var(--karte-rand);border-radius:22px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px 26px;
}
.methode-band li{
  display:flex;align-items:center;gap:13px;
  font:600 15.5px/1.45 'DM Sans',sans-serif;color:var(--text);
}
.methode-band svg{
  flex:none;width:23px;height:23px;
  fill:none;stroke:var(--lila);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}


/* --- Schmalere Bildschirme --- */

/* Tablet: zwei Karten nebeneinander, die dritte geht ueber die volle Breite.
   Dort steht das Bild links und der Text rechts. Die Reihenfolge im Quelltext
   bleibt unveraendert (01, 02, 03) - hier wird nur die Flaeche zugewiesen. */
@media(min-width:701px) and (max-width:1040px){
  .vorteile{grid-template-columns:1fr 1fr}
  .vorteil:last-child{
    grid-column:1 / -1;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
    column-gap:34px;align-content:start;
  }
  .vorteil:last-child .vorteil-kopf {grid-column:2;grid-row:1;margin-bottom:18px}
  .vorteil:last-child .vorteil-bild {grid-column:1;grid-row:1 / span 4;align-self:center}
  .vorteil:last-child .vorteil-strich{grid-column:2;grid-row:2;margin:0 0 16px}
  .vorteil:last-child .vorteil-text  {grid-column:2;grid-row:3}
  .vorteil:last-child .vorteil-fuss  {grid-column:2;grid-row:4;margin-top:20px;padding-top:0}
}

@media(max-width:880px){
  .methode-band{grid-template-columns:1fr;padding:22px 24px}
}

@media(max-width:700px){
  .methode{padding:66px 0 72px}
  .methode-kopf{margin-bottom:36px}
  .methode-lead{font-size:17px}
  .vorteile{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .vorteil{padding:26px 24px 28px;border-radius:22px}
  .vorteil:last-child{grid-column:auto}
  .vorteil-bild,
  .vorteil:last-child .vorteil-bild{aspect-ratio:16/10}
  .vorteil-kopf{gap:13px;margin-bottom:20px}
  .vorteil-nummer{width:42px;height:42px;border-radius:12px}
  .methode-band{margin-top:18px}
}

.features{display:grid;grid-template-columns:1fr 2.2fr 1fr;gap:14px}
.card{
  min-height:350px;border-radius:var(--radius);
  padding:34px;overflow:hidden;position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
}
/* Bild oben, Text unten – auch wenn die Karte schmal ist */
.card .round{margin-bottom:auto}
.card .round + h3{margin-top:24px}
.card-dunkel{background:var(--dunkel);color:#fff}
.card-lila{background:#9500d9;color:#fff}
.card-rosa{background:#f18bd4}
.card h3{font:800 25px/1.1 'Manrope',sans-serif;margin:0 0 10px}
.card p{line-height:1.55;margin:0}
.card-lila h3{max-width:380px}
/* Das runde Bild oben rechts in der Karte.
   Es steht bewusst im normalen Textfluss (nicht absolut positioniert),
   damit es die Überschrift auch in der schmalen Karte nie überdeckt.
   "margin:0 0 auto auto" schiebt es nach oben rechts. */
.round{
  width:150px;height:150px;          /* beides fest – sonst wird der Kreis oval */
  object-fit:cover;border-radius:50%;
  margin:0 0 24px auto;              /* rechtsbündig oben */
  border:4px solid rgba(255,255,255,.2);
  flex:0 0 auto;
}

/* --- Sprachniveaus --- */
.levels{background:#f5e6ec}
.levelbox{
  background:var(--dunkel);color:#fff;border-radius:var(--radius);
  padding:38px;display:grid;grid-template-columns:1fr 1.55fr;gap:42px;align-items:center;
}
.levelbox h3{font:800 30px 'Manrope',sans-serif;margin:0 0 14px}
.levelbox p{color:#e9deee;line-height:1.6;margin:0 0 24px}
.level-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.level{
  background:#fff;color:var(--text);border-radius:10px;
  padding:15px;display:flex;gap:12px;align-items:flex-start;
}
.level b{
  display:grid;place-items:center;flex:0 0 auto;
  width:44px;height:44px;border-radius:50%;
  background:var(--dunkel);color:var(--limette);font-size:15px;margin-top:2px;
}
.level small{display:block;color:#5f5568;font-size:13.5px;line-height:1.5;margin-top:5px}

/* --------------------------------------------------------------------------
   UNTERRICHT: vier Themen aus dem Unterricht

   Aufbau: Einleitung, eine Zeile mit vier Merkmalen, vier gleich breite
   Karten mit Foto, Nummer und Hakenliste, darunter ein farbiges Band mit
   dem Weg zu den Kursen.

   Die Nummer liegt als Kreis auf dem Foto. Sie ist "aria-hidden", weil sie
   nur die Reihenfolge zeigt und nichts erklaert.
   -------------------------------------------------------------------------- */

.unterricht{
  background:#faf8fd;
  --karte-rand:#ece5f3;
}

.unterricht-kopf{text-align:center;max-width:820px;margin:0 auto 38px}

.unterricht-kopf h2{
  font:800 clamp(29px,3.8vw,45px)/1.12 'Manrope',sans-serif;
  letter-spacing:-.025em;margin:0 0 18px;color:var(--text);
}

.unterricht-lead{
  color:#5f5568;font-size:18px;line-height:1.6;
  margin:0 auto;max-width:60ch;
}

/* --- Die vier Merkmale --- */

.merkmale{
  list-style:none;margin:0 0 40px;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px 26px;
  justify-items:center;
}
.merkmale li{display:flex;align-items:flex-start;gap:12px;max-width:280px}
.merkmale svg{
  flex:none;width:26px;height:26px;margin-top:1px;
  fill:none;stroke:var(--lila);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.merkmale span{font-size:14.5px;line-height:1.45;color:#5c5266}
.merkmale b{
  display:block;font:700 16px 'DM Sans',sans-serif;color:var(--text);
  margin-bottom:2px;
}

/* --- Die vier Karten --- */

.themen{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

.thema{
  display:flex;flex-direction:column;min-width:0;
  background:#fff;border:1px solid var(--karte-rand);
  border-radius:22px;padding:18px 18px 24px;
  box-shadow:0 14px 34px rgba(34,4,61,.05);
}

.thema-bild{position:relative;margin-bottom:20px}
.thema-bild img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:16px;background:#f1e9f8;
}
.thema-nummer{
  position:absolute;top:12px;left:12px;
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:#fff;border:1.5px solid var(--lila);color:#7d00cf;
  font:800 13px 'Manrope',sans-serif;
  box-shadow:0 4px 12px rgba(34,4,61,.16);
}

.thema h3{
  font:800 clamp(17px,1.5vw,20px)/1.25 'Manrope',sans-serif;
  letter-spacing:-.015em;margin:0 0 9px;color:var(--text);
}
/* min-height: haelt die Trennlinien der vier Karten auf einer Hoehe,
   auch wenn der Text mal zwei und mal vier Zeilen braucht. */
.thema > p{margin:0 0 18px;font-size:14.5px;line-height:1.6;color:#5f5568;min-height:4.8em}

.haken{
  list-style:none;margin:0;padding:18px 0 0;
  border-top:1px solid var(--karte-rand);
  display:grid;gap:9px;
}
.haken li{
  position:relative;padding-left:29px;
  font-size:14.5px;line-height:1.45;color:#40374d;
}
.haken li::before{
  content:"\2713";position:absolute;left:0;top:0;
  display:grid;place-items:center;width:20px;height:20px;border-radius:7px;
  background:#f2e2ff;color:#6f00b8;font-size:11.5px;font-weight:700;
}

/* --- Das Band unter den Karten --- */

.unterricht-band{
  margin-top:26px;padding:26px 30px;
  background:linear-gradient(120deg,#f7ecff 0%,#fdf1fa 100%);
  border:1px solid #eedcfa;border-radius:22px;
  display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;
}
.band-zeichen{
  display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:linear-gradient(140deg,#8f00e6,#b400ff);
  box-shadow:0 10px 24px rgba(155,0,255,.28);
}
.band-zeichen svg{
  width:27px;height:27px;fill:none;stroke:#fff;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.band-text h3{
  font:800 21px/1.25 'Manrope',sans-serif;margin:0 0 6px;color:var(--text);
}
.band-text p{margin:0;font-size:15px;line-height:1.55;color:#544a5e;max-width:62ch}
.unterricht-band .cta{white-space:nowrap}

/* --- Schmalere Bildschirme --- */

@media(max-width:1040px){
  .themen{grid-template-columns:1fr 1fr}
  /* Vier Merkmale nebeneinander werden hier zu eng: Die zweite Zeile
     ("100 % reale Situationen") passte nicht mehr neben das Symbol. */
  .merkmale{grid-template-columns:1fr 1fr;justify-items:start;gap:22px 30px}
  .merkmale li{max-width:none}
}

@media(max-width:880px){
  .unterricht-band{grid-template-columns:auto 1fr;row-gap:18px}
  .unterricht-band .cta{grid-column:1 / -1;justify-self:start}
}

@media(max-width:620px){
  .unterricht-kopf{margin-bottom:30px}
  .unterricht-lead{font-size:16.5px}
  .merkmale{grid-template-columns:1fr;margin-bottom:30px}
  .themen{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .unterricht-band{padding:22px;grid-template-columns:1fr;justify-items:start}
}

/* --- Prüfungen --- */
.examgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.exam{background:#fff;color:var(--text);border-radius:var(--radius);padding:28px}
/* Der Pruefungsname ist jetzt die Ueberschrift der Karte und traegt deshalb
   das Aussehen, das vorher das <b> darueber hatte. */
.exam h3{font:800 28px 'Manrope',sans-serif;color:var(--lila);margin:0 0 12px}
.exam p{color:var(--grau);line-height:1.5;margin:0}

/* --- Stimmen von Teilnehmenden --- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.review{
  background:#241b29;color:#fff;border-radius:var(--radius);
  padding:22px;min-height:150px;
}
.review .stars{margin:0;background:none;color:var(--limette);padding:0}
.review h3{font:800 19px 'Manrope',sans-serif;margin:10px 0 8px}
.review p{margin:0;line-height:1.55}

/* --- Häufige Fragen --- */
.faq{background:#fff8fb}
.faqlist{max-width:900px;margin-inline:auto;display:grid;gap:10px}
.faqlist details{
  background:#fff;border:1px solid var(--rahmen);
  border-radius:var(--radius);padding:20px;
}
.faqlist summary{
  font:700 18px 'Manrope',sans-serif;cursor:pointer;
  display:flex;justify-content:space-between;gap:16px;align-items:center;
  list-style:none;
}
.faqlist summary::-webkit-details-marker{display:none}
.faqlist summary::after{
  content:'+';flex:0 0 auto;
  background:var(--dunkel);color:#fff;border-radius:50%;
  width:28px;height:28px;display:grid;place-items:center;font-size:18px;
}
.faqlist details[open] summary::after{content:'×'}
.faqlist p{color:var(--grau);line-height:1.65;margin:14px 0 0}
/* Ohne diese Zeile erbt der Link die graue Textfarbe und ist als Link
   nicht zu erkennen (a{color:inherit} gilt fuer die ganze Seite). */
.faqlist p a{color:var(--lila);text-decoration:underline;text-underline-offset:3px}


/* ==========================================================================
   8. FUSSBEREICH
   ========================================================================== */

.footer{background:var(--dunkel);color:#fff;padding:80px 0 25px}
.footer h2{
  font:800 clamp(38px,7vw,90px)/1 'Manrope',sans-serif;
  letter-spacing:-.04em;margin:0 0 60px;
}
.footgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.footgrid h3{margin:0 0 14px;font-size:16px}
.footgrid p,.footgrid a{color:#ded4e5;font-size:14px;line-height:1.6;display:block;margin:7px 0}
.footgrid a:hover{color:#fff;text-decoration:underline}
.bottom{
  border-top:1px solid #563e66;margin-top:50px;padding-top:18px;
  color:#b9aabd;font-size:12px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.bottom a{color:#b9aabd}
.bottom a:hover{color:#fff;text-decoration:underline}
.bottom nav{display:flex;gap:16px;flex-wrap:wrap}


/* ==========================================================================
   9. RECHTSSEITEN (Impressum, Datenschutz, AGB, Widerruf)
   Schlichtes, gut lesbares Textlayout.
   ========================================================================== */

.legal{padding:60px 0 90px;max-width:820px}
.legal h1{font:800 clamp(30px,4vw,46px)/1.1 'Manrope',sans-serif;letter-spacing:-.02em;margin:0 0 8px}
.legal .stand{color:var(--grau);font-size:14px;margin:0 0 40px}
.legal h2{font:800 24px 'Manrope',sans-serif;margin:42px 0 12px}
.legal h3{font:700 18px 'Manrope',sans-serif;margin:26px 0 8px}
.legal p,.legal li{line-height:1.75;color:#3a2d47}
.legal ul,.legal ol{padding-left:22px}
.legal li{margin:6px 0}
.legal a{color:var(--lila);text-decoration:underline}
.legal address{font-style:normal;line-height:1.75}

/* Ein Knopf bleibt ein Knopf, auch mitten im Rechtstext.
   .legal a ist spezifischer als .btn und hat die Aufschrift sonst lila
   eingefaerbt. Auf dem lila Knopf war sie dadurch unsichtbar. */
.legal a.btn{color:#fff;text-decoration:none}
.legal a.btn-hell{color:var(--text)}
.legal .pruefung-privat a.btn{color:#fff}

/* Gelb markierte Stellen, die Daniel noch ausfüllen muss */
.todo{
  background:#fff8c4;border-left:4px solid #e8b400;
  padding:2px 8px;border-radius:3px;font-weight:600;
}
.hinweis{
  background:#fff8e1;border:1px solid #ffe08a;border-left:5px solid #e8b400;
  border-radius:var(--radius);padding:20px 24px;margin:0 0 40px;
}
.hinweis p{margin:0 0 8px}
.hinweis p:last-child{margin:0}
.hinweis strong{color:#8a6100}

/* Zurück-Link oben auf den Rechtsseiten */
.zurueck{display:inline-block;margin:0 0 24px;font-weight:700;color:var(--lila)}
.zurueck:hover{text-decoration:underline}


/* ==========================================================================
   10. MOBILE ANSICHT
   ========================================================================== */

@media(max-width:900px){
  .menu-btn{display:block}

  /* Navigation klappt als Liste unter die Kopfzeile */
  .links{
    display:none;
    position:absolute;top:64px;left:0;right:0;
    flex-direction:column;gap:0;
    background:#fff;border-bottom:1px solid #eee;
    padding:8px 0;box-shadow:0 12px 24px rgba(0,0,0,.08);
  }
  .links.open{display:flex}
  .links a{padding:14px 6%;border-bottom:1px solid #f2f2f2}
  .links a:last-child{border-bottom:0}

  .nav-inner{gap:16px;width:min(var(--breite),92%)}
  .nav .cta{padding:10px 16px;font-size:13px}
  .nav-probe{display:none}
  .links .probe-mobil{display:block;color:var(--lila);font-weight:800}

  .features,.levelbox{grid-template-columns:1fr}
  .topics{grid-template-columns:1fr 1fr}
  .examgrid,.reviews{grid-template-columns:1fr}
  .footgrid{grid-template-columns:1fr 1fr}
  .hero{min-height:600px}
  .card{min-height:300px}
  .round{width:130px;height:130px;right:20px;top:24px}
}

/* Ab hier ist das Fenster hochkant. Der Text rutscht deshalb nach unten und
   der Verlauf läuft von unten nach oben statt von links nach rechts –
   sonst läge die Schrift mitten im Gesicht. */
@media(max-width:700px){
  .hero{align-items:flex-end}
  .hero::after{
    background:linear-gradient(0deg,rgba(20,5,35,.88) 0%,rgba(20,5,35,.72) 34%,rgba(20,5,35,.28) 62%,rgba(20,5,35,.12) 100%);
  }
  /* Die Handybilder sind bereits hochkant zugeschnitten (Verhältnis 0,72),
     deshalb reicht hier eine Ausrichtung nach oben. */
  .hero-photo,
  .folie:nth-child(2) .hero-photo,
  .folie:nth-child(3) .hero-photo,
  .folie:nth-child(4) .hero-photo{object-position:50% 12%}

  .hero-inhalt{padding:60px 0 96px}
  .hero-titel{font-size:clamp(30px,8.4vw,44px)}
  .hero-unter{font-size:16px}
  .hero-texte{margin-bottom:26px}

  /* Auf dem Handy sitzen die Pfeile weiter oben im Foto. Mittig würden sie
     sonst mitten in der Überschrift stehen und den ersten Buchstaben
     verdecken. */
  .hero-pfeil{width:42px;height:42px;top:32%}
  .hero-pfeil svg{width:19px;height:19px}
  .hero-pfeil-links{left:10px}
  .hero-pfeil-rechts{right:10px}
  .hero-punkte{bottom:56px}
}

@media(max-width:560px){
  .promo{font-size:11px}
  .hero{min-height:560px}
  .topics,.level-grid,.footgrid{grid-template-columns:1fr}
  .section{padding:60px 0}
  .levelbox{padding:26px}
  .card{padding:26px}
  .bottom{flex-direction:column;gap:10px}
  .bottom nav{gap:12px}
}


/* ==========================================================================
   11. SHOP
   Kurskatalog, Kursdetailseite, Warenkorb und Kasse.
   ========================================================================== */

/* --- Warenkorb-Symbol in der Kopfzeile --- */
.kopf-korb{
  position:relative;display:inline-grid;place-items:center;
  width:42px;height:42px;border-radius:50%;
  color:var(--text);flex:0 0 auto;
  transition:background .15s;
}
.kopf-korb:hover{background:#f3ecf7}
.kopf-korb svg{width:22px;height:22px}
.korb-zahl{
  position:absolute;top:2px;right:0;
  min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:var(--lila);color:#fff;
  font-size:11px;font-weight:800;line-height:19px;text-align:center;
}

/* --------------------------------------------------------------------------
   SPRACHUMSCHALTER

   Weltkugel statt Landesfahne. Eine Fahne steht fuer ein Land, nicht fuer
   eine Sprache: Arabisch wird in zwanzig Laendern gesprochen, Persisch auch
   in Afghanistan, und fuer Englisch muesste man sich zwischen zwei Fahnen
   entscheiden. Die Namen stehen in der jeweils eigenen Schrift, weil man
   "Türkçe" auch dann erkennt, wenn man kein Wort Deutsch liest.
   -------------------------------------------------------------------------- */
.sprachwahl{position:relative;flex:0 0 auto}
.sprach-knopf{
  display:inline-flex;align-items:center;gap:5px;
  height:42px;padding:0 10px;border:0;border-radius:999px;
  background:none;color:var(--text);cursor:pointer;
  font:800 13px 'DM Sans',sans-serif;
  transition:background .15s;
}
.sprach-knopf:hover{background:#f3ecf7}
.sprach-knopf:focus-visible{outline:3px solid var(--lila);outline-offset:2px}
.sprach-knopf svg{width:21px;height:21px}
.sprach-kuerzel{letter-spacing:.04em}

.sprach-liste{
  position:absolute;top:calc(100% + 8px);right:0;z-index:60;
  margin:0;padding:6px;list-style:none;
  min-width:172px;
  background:#fff;border:1px solid var(--rahmen);border-radius:14px;
  box-shadow:0 18px 40px rgba(25,0,47,.16);
}
.sprach-liste li{margin:0}
.sprach-liste a{
  display:block;padding:9px 12px;border-radius:9px;
  color:var(--text);font-size:15px;font-weight:600;text-decoration:none;
}
.sprach-liste a:hover{background:#f5f1f8}
.sprach-liste a[aria-current]{background:var(--lila);color:#fff;font-weight:800}
/* Arabisch und Persisch stehen im Menue schon in ihrer eigenen
   Leserichtung, sonst rutschte die Schrift an die falsche Seite. */
.sprach-liste a[dir=rtl]{text-align:right}

/* --------------------------------------------------------------------------
   LIVE-UNTERRICHT

   Steht auf der Startseite direkt unter dem Bildwechsler. "Online" heisst
   fuer viele zuerst "Video zum Abspielen"; wer das denkt, liest den Rest
   der Seite mit der falschen Erwartung.
   -------------------------------------------------------------------------- */
.live-band{
  display:flex;align-items:flex-start;gap:20px;
  background:#faf6fd;border:1px solid var(--rahmen);
  border-radius:var(--radius);
  padding:22px 26px;margin:26px 0 0;
}
.live-marke{
  flex:0 0 46px;display:grid;place-items:center;
  width:46px;height:46px;border-radius:14px;
  background:var(--lila);color:#fff;
}
.live-marke svg{width:24px;height:24px}
.live-text h2{
  font:800 19px 'Manrope',sans-serif;margin:0 0 6px;color:var(--dunkel);
}
.live-text p{margin:0;font-size:15.5px;line-height:1.65;color:#4a3d57}

/* Dieselbe Aussage kurz, unter der Ueberschrift von Kurse und Kasse. */
.shop-kopf .live-zeile{
  margin:14px auto 0;font-size:15.5px;color:var(--limette);font-weight:700;
}

@media (max-width:600px){
  .live-band{flex-direction:column;gap:14px;padding:20px}
}

/* --- Kopfzeile des Shops --- */
/* --------------------------------------------------------------------------
   AUSRICHTUNG DER KOPFBEREICHE

   Die grosse Ueberschrift eines Kopfbereichs steht auf der ganzen Website
   mittig, der Text im Seiteninhalt darunter weiter linksbuendig. Zwei
   Gruende: Ein Kopfbereich ist eine Ankuendigung und darf wie eine stehen,
   und beim Blaettern durch die Seiten sprang die Ueberschrift vorher hin
   und her, weil sie mal mittig (Startseite) und mal links (Shop) stand.

   Fliesstext bleibt bewusst linksbuendig. Zentrierte Absaetze haben an
   jedem Zeilenanfang eine andere Kante; das Auge findet die naechste Zeile
   schlechter, und bei Lernenden auf A1 faellt das doppelt ins Gewicht.
   Zentriert wird deshalb nur der kurze Vorspann direkt unter der
   Ueberschrift.
   -------------------------------------------------------------------------- */
.shop-kopf{
  background:var(--dunkel);color:#fff;
  padding:56px 0 44px;
  text-align:center;
}
.shop-kopf h1{
  font:800 clamp(30px,4.5vw,52px)/1.05 'Manrope',sans-serif;
  letter-spacing:-.03em;margin:0 0 14px;
}
.shop-kopf p{
  color:#ded4e5;font-size:17px;line-height:1.6;
  max-width:640px;margin:0 auto;
}

/* --- Entwurfs-Warnhinweis --- */
.entwurf-hinweis{
  background:#fff8e1;border:1px solid #ffd75e;border-left:5px solid #e8b400;
  border-radius:var(--radius);padding:18px 22px;margin:28px 0 0;
}
.entwurf-hinweis > strong{color:#8a6100;display:block;margin-bottom:4px}
.entwurf-hinweis p strong{color:#6b4e00}
.entwurf-hinweis p{margin:0;color:#6b4e00;line-height:1.6;font-size:15px}

/* --- Filterleiste --- */
.filter{
  display:flex;flex-wrap:wrap;gap:26px;
  padding:26px 0;border-bottom:1px solid var(--rahmen);
  margin-bottom:34px;
}
.filter-gruppe{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.filter-gruppe > span{
  font-size:13px;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--grau);margin-right:4px;
}
.chip{
  border:1.5px solid var(--rahmen);background:#fff;color:var(--text);
  border-radius:999px;padding:9px 17px;
  font:700 14px 'DM Sans',sans-serif;cursor:pointer;
  transition:border-color .15s,background .15s,color .15s;
}
.chip:hover{border-color:var(--lila)}
.chip[aria-pressed="true"]{background:var(--dunkel);border-color:var(--dunkel);color:#fff}

/* --- Kursraster --- */
.kursraster{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.kurs{
  border:1px solid var(--rahmen);border-radius:var(--radius);
  padding:26px;background:#fff;
  display:flex;flex-direction:column;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.kurs:hover{border-color:var(--lila);box-shadow:0 12px 30px rgba(25,0,47,.09);transform:translateY(-2px)}

.kurs-kopf{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.niveau-marke{
  display:grid;place-items:center;flex:0 0 auto;
  width:46px;height:46px;border-radius:50%;
  background:var(--dunkel);color:var(--limette);
  font:800 15px 'Manrope',sans-serif;
}
.kurs-art{
  font-size:12px;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--lila);
}
.kurs h2,.kurs h3{font:800 20px/1.25 'Manrope',sans-serif;margin:0 0 4px}
.kurs .untertitel{color:var(--grau);font-size:14px;margin:0 0 14px}
.kurs .umfang{
  font-size:14px;line-height:1.55;color:#4a3d57;margin:0 0 18px;
  padding-left:22px;position:relative;
}
.kurs .umfang::before{
  content:'';position:absolute;left:0;top:6px;
  width:12px;height:12px;border-radius:3px;background:var(--limette);
}
.kurs-fuss{margin-top:auto;padding-top:18px;border-top:1px solid var(--rahmen)}
.preis{font:800 26px 'Manrope',sans-serif;display:block}
.preis small{
  display:block;font:400 12px 'DM Sans',sans-serif;
  color:var(--grau);margin-top:2px;
}
.preis-offen{font:800 19px 'Manrope',sans-serif;color:var(--grau)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:0;border-radius:999px;cursor:pointer;
  padding:13px 24px;font:800 15px 'DM Sans',sans-serif;
  background:linear-gradient(90deg,#9700ee,var(--lila-hell));color:#fff;
  transition:transform .15s,box-shadow .15s,opacity .15s;
  text-align:center;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(155,0,255,.32)}
.btn:disabled{background:#ddd6e2;color:#8b8194;cursor:not-allowed;transform:none;box-shadow:none}
.btn-hell{background:#fff;color:var(--text);border:1.5px solid var(--rahmen)}
.btn-hell:hover{border-color:var(--lila);box-shadow:none}
.btn-breit{width:100%;margin-top:14px}
.btn-gross{padding:16px 30px;font-size:16px}

.leer-hinweis{
  text-align:center;padding:60px 20px;color:var(--grau);
  border:2px dashed var(--rahmen);border-radius:var(--radius);
}

/* --- Kursdetailseite --- */
.detail{display:grid;grid-template-columns:1.6fr 1fr;gap:44px;align-items:start;padding:50px 0 90px}
.detail h2{font:800 24px 'Manrope',sans-serif;margin:38px 0 14px}
.detail p{line-height:1.75;color:#3a2d47}
.detail ul{padding-left:0;list-style:none;margin:0}
.detail ul li{
  position:relative;padding-left:30px;margin:11px 0;line-height:1.6;color:#3a2d47;
}
.detail ul li::before{
  content:'';position:absolute;left:4px;top:7px;
  width:9px;height:9px;border-radius:50%;background:var(--lila);
}

.termin-kasten{
  background:var(--rosa);border-radius:var(--radius);
  padding:24px;margin:26px 0;
}
.termin-kasten h3{font:800 17px 'Manrope',sans-serif;margin:0 0 12px}
.termin-zeile{display:flex;gap:12px;padding:7px 0;font-size:15px}
.termin-zeile b{flex:0 0 108px;color:var(--grau);font-weight:600}
/* Hinweis im Terminkasten, z. B. der feste Umfang der Pruefungsvorbereitung */
.termin-hinweis{
  margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(25,0,47,.12);
  font-size:14px;line-height:1.6;color:var(--text);
}
@media (max-width:560px){.termin-zeile{flex-direction:column;gap:2px}
  .termin-zeile b{flex:none}}

/* Kaufkasten rechts, scrollt mit */
.kaufkasten{
  border:1px solid var(--rahmen);border-radius:var(--radius);
  padding:28px;position:sticky;top:88px;background:#fff;
  box-shadow:0 4px 20px rgba(25,0,47,.05);
}
.kaufkasten .preis{font-size:34px;margin-bottom:6px}
.kaufkasten .mwst{color:var(--grau);font-size:13px;margin:0 0 20px}
.menge{display:flex;align-items:center;gap:12px;margin:18px 0}
.menge label{font-size:14px;font-weight:700}
.menge input{
  width:74px;padding:11px;text-align:center;
  border:1.5px solid var(--rahmen);border-radius:10px;
  font:700 15px 'DM Sans',sans-serif;
}
.sicher-hinweis{
  margin:18px 0 0;font-size:13px;color:var(--grau);line-height:1.6;
  padding-top:16px;border-top:1px solid var(--rahmen);
}

/* --- Warenkorb --- */
.korb{padding:50px 0 90px}
.korb-raster{display:grid;grid-template-columns:1.7fr 1fr;gap:38px;align-items:start}
.korb-pos{
  display:grid;grid-template-columns:56px 1fr auto;gap:18px;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--rahmen);
}
.korb-pos:first-child{border-top:1px solid var(--rahmen)}
.korb-pos h3{font:800 18px 'Manrope',sans-serif;margin:0 0 3px}
.korb-pos .untertitel{color:var(--grau);font-size:14px;margin:0}
.korb-pos-preis{text-align:right;white-space:nowrap}
.korb-pos-preis b{font:800 19px 'Manrope',sans-serif;display:block}
.korb-steuer{display:flex;align-items:center;gap:14px;margin-top:10px}
.korb-steuer input{
  width:62px;padding:8px;text-align:center;
  border:1.5px solid var(--rahmen);border-radius:9px;
  font:700 14px 'DM Sans',sans-serif;
}
.entfernen{
  background:none;border:0;cursor:pointer;padding:4px 0;
  color:var(--grau);font:600 13px 'DM Sans',sans-serif;text-decoration:underline;
}
.entfernen:hover{color:#c00}

.summenkasten{
  border:1px solid var(--rahmen);border-radius:var(--radius);
  padding:28px;background:#fff;position:sticky;top:88px;
}
.summenkasten h2{font:800 20px 'Manrope',sans-serif;margin:0 0 18px}
.summe-zeile{display:flex;justify-content:space-between;gap:16px;padding:9px 0;font-size:15px}
.summe-gesamt{
  border-top:2px solid var(--dunkel);margin-top:14px;padding-top:16px;
  font:800 21px 'Manrope',sans-serif;
}

/* --- Zahlungsarten --- */
.zahlarten{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 0}
.zahlart{
  border:1.5px solid var(--rahmen);border-radius:9px;
  padding:9px 14px;font:700 13px 'DM Sans',sans-serif;
  background:#fff;color:#4a3d57;
}
/* Apple Pay und Google Pay stehen etwas zurueckgenommen: Sie werden nicht
   jedem angeboten, sondern nur auf Geraeten, die sie beherrschen. */
.zahlart-geraet{color:#6f6379;border-style:dashed}
.zahlart-fussnote{
  color:var(--grau);font-size:12.5px;line-height:1.5;margin:9px 0 0;
}

/* --- Kasse --- */
.kasse{padding:50px 0 90px}
.kasse-raster{display:grid;grid-template-columns:1.4fr 1fr;gap:44px;align-items:start}
.feldgruppe{border:0;padding:0;margin:0 0 34px}
.feldgruppe legend{
  font:800 20px 'Manrope',sans-serif;padding:0;margin:0 0 18px;
}
.feld{margin-bottom:16px}
.feld label{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
.feld input,.feld select,.feld textarea{
  width:100%;padding:13px 15px;
  border:1.5px solid var(--rahmen);border-radius:11px;
  font:400 15px 'DM Sans',sans-serif;color:var(--text);background:#fff;
}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:0;border-color:var(--lila);box-shadow:0 0 0 3px rgba(155,0,255,.12);
}
.feld .hilfe{font-size:13px;color:var(--grau);margin:6px 0 0}
.feld-paar{display:grid;grid-template-columns:1fr 2fr;gap:14px}
.pflicht{color:var(--lila)}

/* ------------------------------------------------------------------
   VORSCHLAGSLISTE LAND

   Eigene Liste statt <datalist>. Die eingebaute Liste des Browsers sucht
   nur im angezeigten Namen: Wer "Amerika" tippt, bekam Amerikanisch-Samoa
   angeboten, aber nicht die Vereinigten Staaten, und "England" fand gar
   nichts. Diese hier sucht auch in den Zweitnamen und zeigt sie an.
   ------------------------------------------------------------------ */
.land-huelle{position:relative}
.land-liste{
  position:absolute;z-index:60;left:0;right:0;top:100%;
  margin:4px 0 0;padding:5px;list-style:none;
  background:#fff;border:1.5px solid var(--rahmen);border-radius:11px;
  box-shadow:0 12px 28px rgba(25,0,47,.16);
  max-height:min(17rem,44vh);overflow-y:auto;
}
.land-liste li{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:10px 12px;border-radius:8px;cursor:pointer;
  font:400 15px 'DM Sans',sans-serif;color:var(--text);
}
.land-liste li[aria-selected="true"]{background:#f3e6ff;color:#5c009b;font-weight:700}
@media (hover:hover){.land-liste li:hover{background:#f7f0fd}}
.land-liste .zusatz{font-size:13px;color:var(--grau);white-space:nowrap;flex:0 0 auto}
.land-liste li[aria-selected="true"] .zusatz{color:#7d00cf}

.zustimmung{
  display:flex;gap:12px;align-items:flex-start;
  margin:14px 0;line-height:1.6;font-size:14px;
}
.zustimmung input{width:19px;height:19px;flex:0 0 auto;margin-top:2px;accent-color:var(--lila)}
.zustimmung a{color:var(--lila);text-decoration:underline}

/* --------------------------------------------------------------------------
   Fehlende Angaben in der Kasse

   Bis zum 08.09.2026 wurde nur die Rahmenfarbe des Feldes gesetzt. Bei
   Ankreuzfeldern war davon nichts zu sehen, sie haben keinen Rahmen. Die
   Meldung sprach von "markierten Punkten", markiert war aber nichts.

   Deshalb jetzt: Der ganze Block wird hervorgehoben, nicht nur das Feld,
   und die Meldung steht direkt darunter statt nur ganz unten am Formular.
   Rot allein reicht nicht, etwa 8 Prozent der Maenner sehen es schlecht;
   deshalb zusaetzlich der Balken links und der erklaerende Text.
   -------------------------------------------------------------------------- */
.zustimmung.fehlt,
.feld.fehlt{
  border-left:3px solid #c00;
  padding-left:13px;
  border-radius:0 8px 8px 0;
  background:#fff5f5;
}
.zustimmung.fehlt{margin-left:-16px;padding-top:8px;padding-bottom:8px}
.feld.fehlt{margin-left:-16px;padding-top:10px;padding-bottom:2px}
.feld.fehlt input,
.feld.fehlt select,
.feld.fehlt textarea{border-color:#c00}
.feld-meldung{
  color:#a30000;font-size:13.5px;font-weight:600;
  margin:6px 0 0;line-height:1.5;
}
/* .zustimmung ist ein Flex-Kasten. Ohne diese Zeile stellt sich die
   Meldung NEBEN den Text statt darunter und quetscht ihn zusammen. */
.zustimmung.fehlt{flex-wrap:wrap}
.zustimmung.fehlt .feld-meldung{flex-basis:100%;margin-left:31px}

/* .zahlwahl ist am 10.09.2026 entfallen. Die Zahlungsart wird nicht mehr bei
   uns gewaehlt, sondern auf der Bezahlseite von Mollie; damit gab es hier
   nichts mehr auszuwaehlen. */

.baustelle{
  background:#f3ecf7;border-radius:var(--radius);
  padding:22px 24px;margin-top:26px;
}
.baustelle strong{display:block;margin-bottom:6px}
.baustelle p{margin:0;font-size:14px;line-height:1.65;color:#4a3d57}

/* --- Laufzeit und Kuendigung, unmittelbar ueber dem Bestellknopf ---------
   § 312j Abs. 2 BGB verlangt diese Angaben "klar und verstaendlich in
   hervorgehobener Weise". Deshalb ein eigener Kasten mit Rahmen, nicht nur
   ein Absatz im Fliesstext. Er darf optisch nicht untergehen. */
.laufzeit-hinweis{
  margin-top:26px;padding:20px 22px;
  background:#fbf7fe;border:2px solid var(--lila);border-radius:var(--radius);
}
.laufzeit-hinweis strong{display:block;margin-bottom:10px;font-size:15px}
.laufzeit-hinweis ul{margin:0 0 12px;padding-left:20px}
.laufzeit-hinweis li{font-size:14px;line-height:1.7;color:#3a2f44;margin-bottom:4px}
.laufzeit-hinweis p{margin:0;font-size:13px;line-height:1.65;color:#4a3d57}
.laufzeit-hinweis a{color:var(--lila);text-decoration:underline}

/* --- Kurze Rückmeldung unten am Bildschirm --- */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);
  background:var(--dunkel);color:#fff;
  padding:15px 26px;border-radius:999px;
  font-weight:700;font-size:15px;
  box-shadow:0 12px 32px rgba(0,0,0,.28);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
  z-index:60;max-width:90%;text-align:center;
}
.toast.sichtbar{opacity:1;transform:translate(-50%,0)}

/* --- Brotkrumen --- */
.krume{padding:22px 0 0;font-size:14px;color:var(--grau)}
.krume a{color:var(--grau);text-decoration:underline}
.krume a:hover{color:var(--lila)}

/* --- Shop auf kleineren Bildschirmen --- */
@media(max-width:1000px){
  .kursraster{grid-template-columns:1fr 1fr}
  .detail,.korb-raster,.kasse-raster{grid-template-columns:1fr;gap:30px}
  .kaufkasten,.summenkasten{position:static}
}
@media(max-width:640px){
  .kursraster{grid-template-columns:1fr}
  .filter{gap:16px}
  .filter-gruppe{width:100%}
  .korb-pos{grid-template-columns:44px 1fr;row-gap:12px}
  .korb-pos-preis{grid-column:1 / -1;text-align:left}
  .feld-paar{grid-template-columns:1fr}
  .shop-kopf{padding:38px 0 32px}
}

/* Elemente mit dem Attribut "hidden" muessen verborgen bleiben, auch wenn
   eine Klasse weiter oben display:grid oder display:flex setzt. */
[hidden]{display:none !important}

/* ==========================================================================
   12. NIVEAU-ÜBERSICHT UND KURSAUSWAHL
   Die drei Ebenen: Niveau wählen -> Unterrichtsart wählen -> Angebot kaufen.
   ========================================================================== */

/* --- Ebene 1: die fünf Stufen untereinander --- */
.stufen-liste{display:grid;gap:26px;padding:34px 0 50px}

.stufe{
  display:grid;grid-template-columns:1fr 1.35fr;gap:0;
  border:1px solid var(--rahmen);border-radius:var(--radius);
  overflow:hidden;background:#fff;
  transition:border-color .15s,box-shadow .15s;
}
.stufe:hover{border-color:var(--lila);box-shadow:0 14px 34px rgba(25,0,47,.09)}

/* Verlauf liegt hier im CSS, nicht im Bild – dadurch füllt der Hintergrund
   die ganze Fläche und die Treppe wird nie angeschnitten. */
.stufe-bild{
  display:grid;place-items:center;padding:22px;
  background:linear-gradient(135deg,#2d0a52 0%,#19002f 100%);
}
.stufe-bild img{
  width:100%;height:auto;max-height:300px;
  object-fit:contain;display:block;
}

.stufe-text{padding:32px 34px}

.stufe-kopf{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.stufe-marke{
  display:grid;place-items:center;flex:0 0 auto;
  width:60px;height:60px;border-radius:50%;
  background:var(--dunkel);color:var(--limette);
  font:800 21px 'Manrope',sans-serif;
}
.stufe-kopf h2{font:800 27px/1.15 'Manrope',sans-serif;margin:0}
.stufe-kopf h2 a:hover{color:var(--lila)}
.stufe-kurz{color:var(--lila);font-weight:700;font-size:15px;margin:3px 0 0}

.stufe-beschreibung{line-height:1.7;color:#3a2d47;margin:0 0 22px}

.stufe-h3{
  font:800 13px 'DM Sans',sans-serif;text-transform:uppercase;
  letter-spacing:.07em;color:var(--grau);margin:0 0 10px;
}
.stufe-ziele{list-style:none;padding:0;margin:0 0 20px}
.stufe-ziele li{
  position:relative;padding-left:28px;margin:9px 0;
  line-height:1.55;color:#3a2d47;font-size:15px;
}
.stufe-ziele li::before{
  content:'';position:absolute;left:2px;top:6px;
  width:14px;height:9px;border-left:2.5px solid var(--lila);
  border-bottom:2.5px solid var(--lila);transform:rotate(-45deg);
}

.stufe-voraussetzung{
  font-size:14px;color:var(--grau);line-height:1.55;
  background:var(--rosa);border-radius:9px;padding:12px 15px;margin:0 0 22px;
}
.stufe-voraussetzung b{color:var(--text)}

.stufe-fuss{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--rahmen);
}
.stufe-arten{display:block;color:var(--grau);font-size:13px;margin-top:3px}

.stufen-hinweis{
  color:var(--grau);font-size:14px;line-height:1.6;
  text-align:center;max-width:720px;margin:6px auto 0;
}

/* --- Verweis auf die vollständige Liste --- */
.alle-hinweis{
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  flex-wrap:wrap;
  border:1px dashed var(--rahmen);border-radius:var(--radius);
  padding:26px 30px;margin-bottom:22px;
}
.alle-hinweis h2{font:800 20px 'Manrope',sans-serif;margin:0 0 6px}
.alle-hinweis p{color:var(--grau);margin:0;line-height:1.55;max-width:520px}

.beratung{
  background:var(--dunkel);color:#fff;border-radius:var(--radius);
  padding:34px 36px;text-align:center;
}
.beratung h2{font:800 26px 'Manrope',sans-serif;margin:0 0 10px}
.beratung p{color:#ded4e5;line-height:1.6;margin:0 auto 22px;max-width:560px}

/* --- Ebene 2: Unterrichtsarten --- */
.kopf-marke{
  display:inline-grid;place-items:center;
  width:52px;height:52px;border-radius:50%;
  background:var(--limette);color:var(--dunkel);
  font:800 19px 'Manrope',sans-serif;vertical-align:middle;
  margin-right:10px;
}

.art-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:34px 0 0}
.art-karte{
  border:1px solid var(--rahmen);border-radius:var(--radius);
  padding:30px;background:#fff;
  display:flex;flex-direction:column;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.art-karte:hover{border-color:var(--lila);box-shadow:0 12px 30px rgba(25,0,47,.09);transform:translateY(-2px)}
.art-icon{
  display:grid;place-items:center;
  width:54px;height:54px;border-radius:14px;
  background:var(--rosa);color:var(--lila);margin-bottom:18px;
}
.art-icon svg{width:28px;height:28px}
.art-karte h2{font:800 23px 'Manrope',sans-serif;margin:0 0 4px}
.art-karte h2 a:hover{color:var(--lila)}
.art-kurz{color:var(--lila);font-weight:700;font-size:14px;margin:0 0 16px}
.art-text{line-height:1.65;color:#3a2d47;margin:0 0 16px;font-size:15px}
.art-passt{
  font-size:14px;line-height:1.6;color:var(--grau);
  border-left:3px solid var(--limette);padding-left:14px;margin:0 0 22px;
}
.art-fuss{margin-top:auto;padding-top:18px;border-top:1px solid var(--rahmen)}
.art-fuss .preis{margin-bottom:12px}

.stufe-info{
  background:var(--rosa);border-radius:var(--radius);
  padding:32px 36px;margin-top:34px;
}
.stufe-info h2{font:800 22px 'Manrope',sans-serif;margin:0 0 12px}
/* Zwischenueberschrift, z. B. "Warum B1+?" */
.stufe-info h3{font:800 17px 'Manrope',sans-serif;margin:22px 0 8px}
.stufe-info p{line-height:1.7;color:#3a2d47;margin:0 0 12px}
.stufe-info p:last-child{margin:0}

/* --- Ebene 3: die konkreten Angebote --- */
.angebot-liste{display:grid;gap:18px;padding:34px 0 0}
.angebot{
  display:grid;grid-template-columns:1.7fr 1fr;gap:32px;
  border:1px solid var(--rahmen);border-radius:var(--radius);
  padding:30px 34px;background:#fff;align-items:center;
  transition:border-color .15s,box-shadow .15s;
}
.angebot:hover{border-color:var(--lila);box-shadow:0 10px 26px rgba(25,0,47,.07)}

.paket-marke{
  display:inline-block;background:var(--limette);color:var(--dunkel);
  border-radius:999px;padding:5px 13px;
  font:800 12px 'DM Sans',sans-serif;letter-spacing:.04em;
  margin-bottom:10px;
}
.angebot-text h2{font:800 23px 'Manrope',sans-serif;margin:0 0 16px}
.angebot-zeile{
  display:flex;gap:14px;margin:7px 0;font-size:15px;
  line-height:1.5;color:#3a2d47;
}
.angebot-zeile b{flex:0 0 96px;color:var(--grau);font-weight:600}
.angebot-mehr{
  display:inline-block;margin-top:16px;
  color:var(--lila);font-weight:700;font-size:14px;text-decoration:underline;
}

.angebot-kauf{
  border-left:1px solid var(--rahmen);padding-left:32px;
}
.angebot-kauf .preis{font-size:30px}
.angebot-kauf .mwst{color:var(--grau);font-size:12px;margin:4px 0 16px;line-height:1.5}

/* --- Kleinere Bildschirme --- */
@media(max-width:1000px){
  .stufe{grid-template-columns:1fr}
  .stufe-bild img{height:210px}
  .art-raster{grid-template-columns:1fr}
  .angebot{grid-template-columns:1fr;gap:22px}
  .angebot-kauf{border-left:0;border-top:1px solid var(--rahmen);padding-left:0;padding-top:22px}
}
@media(max-width:640px){
  .stufe-text{padding:26px 22px}
  .stufe-kopf h2{font-size:23px}
  .stufe-marke{width:52px;height:52px;font-size:18px}
  .stufe-fuss{flex-direction:column;align-items:stretch}
  .stufe-fuss .btn{justify-content:center}
  .alle-hinweis{flex-direction:column;align-items:stretch;padding:22px}
  .beratung{padding:26px 22px}
  .angebot{padding:24px 22px}
  .angebot-zeile{flex-direction:column;gap:2px}
  .angebot-zeile b{flex:none}
  .kopf-marke{width:44px;height:44px;font-size:17px}
}

/* Die Niveau-Kacheln auf der Startseite sind jetzt Links */
a.level{transition:transform .15s,box-shadow .15s}
a.level:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.22)}
a.level:hover strong{color:var(--lila)}

/* ==========================================================================
   13. ABLAUF „SO FUNKTIONIERT UNSER UNTERRICHT"

   Aufbau: zwei Spalten. Links die Überschrift, rechts die Karten.
   Die linke Spalte ist "sticky" – sie bleibt beim Scrollen stehen, während
   die Karten daran vorbeiziehen. Das kann der Browser von sich aus, dafür
   braucht es kein JavaScript.

   Die Karten blenden zusätzlich beim Hereinscrollen ein. Das macht
   js/main.js. Ohne JavaScript sind sie sofort sichtbar – die Seite bleibt
   also in jedem Fall lesbar.
   ========================================================================== */

/* ACHTUNG: hier darf KEIN overflow:hidden stehen. Das würde das
   position:sticky der linken Spalte wirkungslos machen – die Überschrift
   würde dann einfach mitscrollen. */
.ablauf{
  background:linear-gradient(180deg,#230742 0%,#1b0334 100%);
  color:#fff;padding:96px 0 110px;
  border-bottom:1px solid #3a1a58;
}

.ablauf-raster{
  display:grid;grid-template-columns:1fr 1.15fr;
  gap:64px;align-items:start;
}

/* --- Linke Spalte: bleibt stehen --- */
.ablauf-kopf{position:sticky;top:104px}
.ablauf-kopf h2{
  font:800 clamp(32px,4vw,52px)/1.08 'Manrope',sans-serif;
  letter-spacing:-.03em;margin:0 0 20px;
}
.ablauf-kopf p{
  color:#d8cbe2;line-height:1.7;font-size:17px;margin:0 0 30px;max-width:420px;
}

/* --- Rechte Spalte: die Karten --- */
.schritte{list-style:none;margin:0;padding:0;display:grid;gap:20px}

.schritt{
  display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
  background:linear-gradient(135deg,#2a0b4d 0%,#1b0433 100%);
  border:1px solid #3d1d5e;border-radius:18px;
  padding:30px 34px;
  transition:border-color .3s,transform .3s;
}
.schritt:hover{border-color:var(--lila);transform:translateX(4px)}

.schritt-nr{
  display:grid;place-items:center;flex:0 0 auto;
  width:56px;height:56px;border-radius:50%;
  border:2px solid var(--limette);color:var(--limette);
  font:800 18px 'Manrope',sans-serif;
}

.schritt-text h3{
  font:800 22px/1.3 'Manrope',sans-serif;
  color:var(--limette);margin:0 0 10px;
}
.schritt-text p{color:#e2d8ea;line-height:1.65;margin:0;font-size:16px}

/* --- Ein- und Ausblenden beim Scrollen (nur mit JavaScript) ---

   Die Animation läuft in BEIDE Richtungen: Jedes Mal, wenn eine Karte in den
   Bildbereich kommt, fährt sie herein; verlässt sie ihn, fährt sie wieder
   heraus. Scrollt man zurück, passiert dasselbe erneut.

   Die Richtung richtet sich danach, wo die Karte hinausgescrollt ist:
   .raus-unten  = liegt unter dem Bildschirm  -> kommt von unten
   .raus-oben   = liegt über dem Bildschirm   -> kommt von oben
   ---------------------------------------------------------------------- */

.schritte.js-animiert .schritt{
  transition:opacity .7s ease,
             transform .7s cubic-bezier(.16,.84,.44,1),
             border-color .3s;
}

/* Zustand außerhalb des Bildbereichs */
.schritte.js-animiert .schritt.raus-unten{
  opacity:0;transform:translateY(52px) scale(.96);
}
.schritte.js-animiert .schritt.raus-oben{
  opacity:0;transform:translateY(-52px) scale(.96);
}

/* Zustand im Bildbereich */
.schritte.js-animiert .schritt.sichtbar{opacity:1;transform:none}

/* Die Nummer springt beim Erscheinen kurz auf */
.schritte.js-animiert .schritt-nr{
  transform:scale(.62);opacity:.25;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),
             opacity .4s ease;
}
.schritte.js-animiert .schritt.sichtbar .schritt-nr{transform:scale(1);opacity:1}

/* Wer „Bewegung reduzieren" eingestellt hat, sieht alles sofort */
@media (prefers-reduced-motion:reduce){
  .schritte.js-animiert .schritt,
  .schritte.js-animiert .schritt.raus-oben,
  .schritte.js-animiert .schritt.raus-unten,
  .schritte.js-animiert .schritt-nr{opacity:1;transform:none;transition:none}
  .schritt:hover{transform:none}
}

@media(max-width:900px){
  .ablauf{padding:70px 0 80px}
  .ablauf-raster{grid-template-columns:1fr;gap:36px}
  .ablauf-kopf{position:static}
  .ablauf-kopf p{max-width:none}
}
@media(max-width:560px){
  .schritt{grid-template-columns:1fr;gap:14px;padding:24px 22px}
  .schritt-nr{width:46px;height:46px;font-size:16px}
  .schritt-text h3{font-size:20px}
  .schritt:hover{transform:none}
}


/* ==========================================================================
   14. UNSERE EIGENEN LERNBÜCHER
   ========================================================================== */

.buecher{
  background:linear-gradient(135deg,#2d0a52 0%,#19002f 60%,#3d0a6b 100%);
  color:#fff;padding:96px 0;overflow:hidden;
}
.buecher-raster{
  display:grid;grid-template-columns:1fr 1fr;
  gap:60px;align-items:center;
}

.buecher-text h2{
  font:800 clamp(30px,4vw,48px)/1.1 'Manrope',sans-serif;
  letter-spacing:-.03em;margin:0 0 22px;
}
.buecher-text p{color:#ded4e5;line-height:1.75;font-size:17px;margin:0 0 18px}

.buecher-bestellen{
  font-weight:800;color:#fff !important;margin:30px 0 14px !important;
  font-size:16px !important;
}
.buecher-knoepfe{display:flex;gap:12px;flex-wrap:wrap}
.buecher-knoepfe .btn-hell{background:transparent;color:#fff;border-color:#6b4d85}
.buecher-knoepfe .btn-hell:hover{border-color:var(--limette);color:var(--limette)}

/* Das Foto der beiden Bücher */
.buecher-bilder{display:grid;place-items:center}
.buecher-foto{
  width:100%;max-width:580px;height:auto;display:block;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.5));
  transition:transform .4s ease;
}
.buecher-bilder:hover .buecher-foto{transform:translateY(-8px) scale(1.02)}

@media (prefers-reduced-motion:reduce){
  .buecher-foto,.buecher-bilder:hover .buecher-foto{transition:none;transform:none}
}

@media(max-width:900px){
  .buecher{padding:70px 0}
  .buecher-raster{grid-template-columns:1fr;gap:44px}
  .buecher-bilder{order:-1}
  .buecher-foto{max-width:min(480px,88vw)}
}
@media(max-width:560px){
  .buecher-foto{max-width:94vw}
  .buecher-knoepfe .btn{flex:1 1 100%;justify-content:center}
}

/* Elemente mit dem Attribut "hidden" müssen verborgen bleiben, auch wenn
   eine Klasse weiter oben display:grid oder display:flex setzt. */
[hidden]{display:none !important}

/* Die Niveau-Kacheln auf der Startseite sind Links */
a.level{transition:transform .15s,box-shadow .15s}
a.level:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.22)}
a.level:hover strong{color:var(--lila)}

/* ==========================================================================
   15. AKTIONSBALKEN MIT COUNTDOWN
   Erscheint ganz oben, sobald im Redaktionsbereich eine Rabattaktion
   aktiviert wurde. Läuft die Zeit ab, verschwindet er von selbst.
   ========================================================================== */

.aktionsbalken{
  background:var(--limette);color:var(--dunkel);
  position:relative;z-index:30;
}
.aktion-inhalt{
  width:min(var(--breite),94%);margin-inline:auto;
  min-height:52px;padding:9px 0;
  display:flex;align-items:center;justify-content:center;gap:18px;
  flex-wrap:wrap;
}

.aktion-uhr{display:flex;gap:7px;align-items:center;flex:0 0 auto}
.aktion-feld{
  background:rgba(25,0,47,.09);
  border-radius:8px;padding:5px 9px;
  font-size:12px;font-weight:600;color:#3d2a4d;
  display:inline-flex;align-items:baseline;gap:3px;
  font-variant-numeric:tabular-nums;
}
.aktion-feld b{
  font:800 16px/1 'Manrope',sans-serif;color:var(--dunkel);
  font-variant-numeric:tabular-nums;
}

.aktion-text{
  font-weight:800;font-size:15px;color:var(--dunkel);
  text-decoration:underline;text-underline-offset:3px;
  text-align:center;
}
.aktion-text:hover{color:var(--lila)}

/* --------------------------------------------------------------------------
   DER RABATTCODE AUF DEM AKTIONSBALKEN

   Er ist beides: zum Ablesen da und ein Knopf. Deshalb steht der Code als
   Text und der Knopf daneben - ein Code, der NUR ein Knopf ist, lässt sich
   nicht abtippen, und wer ihn sich für später merken will, braucht ihn
   lesbar.

   Feste Zeichenbreite: 0 und O sind sonst nicht zu unterscheiden, und
   dieser Code wird abgetippt.
   -------------------------------------------------------------------------- */
.aktion-code{
  display:flex;align-items:center;gap:9px;flex:0 0 auto;
  background:rgba(255,255,255,.72);
  border:1.5px dashed rgba(45,10,82,.35);
  border-radius:999px;padding:5px 6px 5px 14px;
}
.aktion-code-text{font-size:13px;color:var(--text);white-space:nowrap}
.aktion-code b{
  font:800 14px ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  letter-spacing:.06em;
  /* Damit der Code sich mit einem Doppelklick markieren lässt. */
  user-select:all;
}
.aktion-code-knopf{
  border:0;border-radius:999px;cursor:pointer;
  background:var(--dunkel);color:#fff;
  padding:7px 15px;font:800 13px 'DM Sans',sans-serif;
  white-space:nowrap;
}
.aktion-code-knopf:hover{background:var(--lila)}
.aktion-code-knopf:disabled{opacity:.6;cursor:default}
.aktion-code-knopf:focus-visible{outline:3px solid var(--lila);outline-offset:2px}

/* Kurz nach dem Kopieren. Der Knopf bleibt ein Knopf - er sagt nur zwei
   Sekunden lang, dass es geklappt hat, und geht dann zurueck auf
   "Kopieren". Ein dauerhaft veraenderter Knopf sieht aus, als sei er
   verbraucht. */
.aktion-code-knopf.ist-kopiert{background:#0d7a56}
.aktion-code-knopf.ist-kopiert:hover{background:#0d7a56}

@media(max-width:760px){
  /* Auf dem Handy hat der Balken nur eine Zeile Platz. Der Code ist
     wichtiger als der Fließtext, also darf er umbrechen und der Text
     dahinter zurücktreten. */
  .aktion-code{padding:4px 5px 4px 11px;gap:7px}
  .aktion-code-text{font-size:12px}
  .aktion-code b{font-size:13px}
  .aktion-code-knopf{padding:6px 12px;font-size:12px}
}

.aktion-zu{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;
  color:var(--dunkel);padding:8px;line-height:0;
  border-radius:6px;opacity:.65;transition:opacity .15s,background .15s;
}
.aktion-zu:hover{opacity:1;background:rgba(25,0,47,.08)}

@media(max-width:700px){
  .aktion-inhalt{gap:10px;padding:10px 34px 10px 10px;min-height:0}
  .aktion-uhr{gap:5px}
  .aktion-feld{padding:4px 7px;font-size:11px}
  .aktion-feld b{font-size:14px}
  .aktion-text{font-size:13px;width:100%}
  .aktion-zu{right:6px}
}


/* ==========================================================================
   16. RABATTCODE IM WARENKORB UND AN DER KASSE
   ========================================================================== */

.gutschein{
  border-top:1px solid var(--rahmen);
  margin-top:18px;padding-top:18px;
}
.gutschein-titel{
  font-size:13px;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--grau);margin:0 0 10px;
}
.gutschein-zeile{display:flex;gap:9px}
.gutschein-zeile input{
  flex:1;min-width:0;padding:12px 14px;
  border:1.5px solid var(--rahmen);border-radius:11px;
  font:700 15px 'DM Sans',sans-serif;
  text-transform:uppercase;letter-spacing:.06em;
}
.gutschein-zeile input:focus{
  outline:0;border-color:var(--lila);box-shadow:0 0 0 3px rgba(155,0,255,.12);
}
.gutschein-zeile .btn{padding:12px 20px;flex:0 0 auto}

.gutschein-meldung{margin:10px 0 0;font-size:14px;line-height:1.5}
.gutschein-meldung.gut{color:#0a7a3d;font-weight:700}
.gutschein-meldung.schlecht{color:#c00;font-weight:700}

/* Der eingelöste Code als Streifen */
.gutschein-aktiv{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#eafbf0;border:1.5px solid #9fe0ba;
  border-radius:11px;padding:12px 15px;
}
.gutschein-aktiv b{color:#0a7a3d;font-size:15px}
.gutschein-aktiv small{display:block;color:#3f7a58;font-size:13px;margin-top:2px}
.gutschein-weg{
  background:none;border:0;cursor:pointer;flex:0 0 auto;
  color:#3f7a58;font:600 13px 'DM Sans',sans-serif;text-decoration:underline;
}
.gutschein-weg:hover{color:#c00}

/* Die Rabattzeile in der Summenübersicht */
.summe-zeile.summe-rabatt{color:#0a7a3d;font-weight:700}
.summe-zeile.summe-rabatt span:last-child{white-space:nowrap}

/* Durchgestrichener Preis, wenn ein Rabatt aktiv ist */
.preis-alt{
  text-decoration:line-through;color:var(--grau);
  font-weight:600;font-size:.62em;margin-left:8px;
}


/* ==========================================================================
   17. STIMMEN DER TEILNEHMENDEN
   Zwei Karten nebeneinander, die automatisch von rechts nach links
   weiterwandern. Die Karten liegen in einer Spur (.stimmen-spur), die per
   transform verschoben wird – das ist flüssiger als das Verschieben
   einzelner Elemente und läuft auch auf schwachen Geräten ruckelfrei.
   ========================================================================== */

.stimmen{background:#fff}

.stimmen-band{
  position:relative;
  border-radius:var(--radius-gross);
  padding:34px;
  background:linear-gradient(120deg,#efe6fb 0%,#f7ecf3 38%,#e9eefb 72%,#e4f0fb 100%);
  overflow:hidden;
}

.stimmen-spur{
  display:flex;gap:22px;
  will-change:transform;
  transition:transform .75s cubic-bezier(.4,0,.2,1);
}
/* Beim Sprung zurück an den Anfang darf nichts zu sehen sein */
.stimmen-spur.ohne-uebergang{transition:none}

.stimme{
  /* margin:0 ist wichtig: <figure> hat im Browser von Haus aus 40px
     Außenabstand links und rechts. Ohne diese Zeile stimmt die
     Schrittweite der Spur nicht und die Karten ragen über den Rand. */
  margin:0;
  flex:0 0 calc((100% - 22px) / 2);
  display:flex;align-items:flex-start;gap:22px;
  background:#fff;border-radius:26px;
  padding:26px 30px;
  box-shadow:0 10px 30px rgba(35,7,66,.09);
}

.stimme img{
  flex:0 0 auto;
  width:86px;height:86px;
  border-radius:50%;object-fit:cover;
  background:#efe6fb;
}

.stimme-inhalt{flex:1;min-width:0;display:flex;flex-direction:column;height:100%}

.stimme-text{
  margin:0 0 16px;
  font-size:15.5px;line-height:1.62;
  color:#3d3550;
  text-align:justify;hyphens:auto;
}

.stimme-name{
  margin:auto 0 0;text-align:right;
  font:700 15px 'Manrope',sans-serif;
  color:var(--text);
}

/* --- Punkte unter den Karten --- */
.stimmen-punkte{
  display:flex;justify-content:center;gap:9px;
  margin-top:22px;
}
.stimmen-punkt{
  width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  border:0;background:#d8cfe4;
  transition:background .25s, width .25s, border-radius .25s;
}
.stimmen-punkt[aria-selected="true"]{
  background:var(--lila);width:26px;border-radius:5px;
}
.stimmen-punkt:focus-visible{outline:3px solid var(--lila);outline-offset:3px}

@media(max-width:760px){
  .stimmen-band{padding:20px}
  /* Auf dem Handy passt nur eine Karte nebeneinander */
  .stimme{flex:0 0 100%}
  .stimme{padding:22px;gap:16px}
  .stimme img{width:66px;height:66px}
  .stimme-text{font-size:15px;text-align:left}
}


/* ==========================================================================
   18. INHALTSSEITEN
   Gemeinsame Bausteine für Über uns, Methode, Prüfungen und Probestunde.
   ========================================================================== */

/* Lesbare Textspalte – bewusst schmal, langer Fließtext über die volle
   Breite ist auf großen Monitoren kaum noch lesbar. */
.textspalte{max-width:760px}
.textspalte p{line-height:1.75;color:#3a2d47;font-size:17px;margin:0 0 18px}
.textspalte h2{font:800 clamp(24px,2.6vw,32px)/1.2 'Manrope',sans-serif;margin:46px 0 14px}
.textspalte h3{font:700 20px 'Manrope',sans-serif;margin:30px 0 10px}
.textspalte ul{padding-left:22px;margin:0 0 18px}
.textspalte li{line-height:1.7;color:#3a2d47;margin:8px 0}
.textspalte strong{color:var(--text)}
/* Knöpfe ausnehmen: .textspalte a hat die höhere Spezifität (0,1,1) und
   würde sonst die weisse Schrift von .cta und .btn (0,1,0) überschreiben –
   der Knopf wäre lila auf lila und damit unlesbar. */
.textspalte a:not(.cta):not(.btn){color:var(--lila);text-decoration:underline}

/* Hervorgehobener Absatz – für den einen Satz, der hängen bleiben soll */
.merksatz{
  border-left:4px solid var(--lila);
  background:#faf6ff;border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 24px;margin:26px 0;
}
.merksatz p{margin:0;font-size:18px;line-height:1.6;color:var(--text)}

/* Ehrlicher Hinweis – dunkler, damit man ihn nicht überliest */
.klarstellung{
  border:1px solid var(--rahmen);border-left:4px solid #d68a00;
  background:#fffdf5;border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 24px;margin:26px 0;
}
.klarstellung p{margin:0 0 10px;line-height:1.65}
.klarstellung p:last-child{margin:0}

/* Zahlenkacheln */
.fakten{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:34px 0}
.fakt{
  background:#fff;border:1px solid var(--rahmen);border-radius:var(--radius);
  padding:22px;
}
.fakt b{display:block;font:800 30px 'Manrope',sans-serif;color:var(--lila);margin-bottom:6px}
.fakt span{display:block;color:var(--grau);line-height:1.5;font-size:14px}

/* Ablauf einer Unterrichtsstunde – nummerierte Liste mit Linie */
.stunde{list-style:none;padding:0;margin:30px 0;counter-reset:takt}
.stunde li{
  position:relative;padding:0 0 28px 62px;counter-increment:takt;
}
.stunde li::before{
  content:counter(takt);position:absolute;left:0;top:0;
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--lila);color:#fff;
  font:800 16px 'Manrope',sans-serif;
}
/* Verbindungslinie zwischen den Punkten */
.stunde li::after{
  content:"";position:absolute;left:19px;top:44px;bottom:6px;width:2px;
  background:var(--rahmen);
}
.stunde li:last-child{padding-bottom:0}
.stunde li:last-child::after{display:none}
.stunde h3{font:700 19px 'Manrope',sans-serif;margin:8px 0 6px}
.stunde p{margin:0;line-height:1.65;color:#3a2d47}

/* Gegenüberstellung: so machen es andere / so machen wir es */
.gegenueber{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:34px 0}
.gegenueber > div{border-radius:var(--radius-gross);padding:28px}
.gegen-andere{background:#f4f1f6;border:1px solid var(--rahmen)}
/* Bewusst dunkler als --lila-hell: Weiss auf #c000ff erreicht nur 4,5:1
   und liegt damit genau an der Grenze. Dieser Verlauf bleibt bei 5:1. */
.gegen-wir{background:linear-gradient(150deg,#8400d6 0%,#a800f0 100%);color:#fff}
.gegenueber h3{font:800 19px 'Manrope',sans-serif;margin:0 0 14px}
.gegen-andere h3{color:var(--grau)}
.gegenueber ul{list-style:none;padding:0;margin:0}
.gegenueber li{position:relative;padding-left:26px;margin:10px 0;line-height:1.6}
.gegenueber li::before{position:absolute;left:0;top:0}
.gegen-andere li::before{content:"×";color:#b4a9bd;font-weight:800;font-size:19px;line-height:1.2}
.gegen-wir li::before{content:"✓";color:var(--limette);font-weight:800}

@media(max-width:900px){
  .fakten{grid-template-columns:1fr 1fr}
  .gegenueber{grid-template-columns:1fr}
}
@media(max-width:560px){
  .fakten{grid-template-columns:1fr}
  .textspalte p,.textspalte li{font-size:16px}
  .stunde li{padding-left:52px}
  .stunde li::before{width:34px;height:34px;font-size:14px}
  .stunde li::after{left:16px;top:38px}
}


/* ==========================================================================
   19. HINWEIS AUF DIE PERSÖNLICHE PRÜFUNGSVORBEREITUNG

   Prüfungsvorbereitung gibt es nur als Gruppenkurs. Dieser Kasten steht
   überall dort, wo Prüfungskurse gezeigt werden, und führt zu WhatsApp.
   Der Text selbst steht in js/kurse.js, damit er nur an einer Stelle
   gepflegt werden muss.
   ========================================================================== */

.pruefung-privat{
  margin:30px 0 0;
  padding:28px 30px;
  border-radius:var(--radius-gross);
  /* Gruener Ton wie WhatsApp, damit der Kasten ins Auge faellt */
  border:1px solid #bfe3d1;
  background:linear-gradient(150deg,#eaf7f0,#f2fbf6);
}
/* Nicht abgeschlossene Zahlung: kein Gruen. Gruen liest sich wie "erledigt",
   und der Kunde soll hier gerade NICHT denken, er sei fertig. Bewusst warm
   statt alarmrot - es ist kein Fehler des Kunden, sondern ein offener
   Vorgang, den er in einem Klick nachholen kann. */
.pruefung-privat.zahlung-offen{
  border-color:#e0b64a;
  border-left:6px solid #d99b18;
  background:linear-gradient(150deg,#fff6e0,#fffcf5);
}
.pruefung-privat.zahlung-offen h3{color:#7a5c00}
/* Der Hinweis auf den Testbetrieb steht direkt darueber und ist ebenfalls
   gelb. Damit die beiden Kaesten nicht ineinanderlaufen, bekommt der offene
   Vorgang den kraeftigen Balken links und etwas Abstand. */
.pruefung-privat.zahlung-offen{margin-top:18px}

/* IM OFFENEN KASTEN GIBT ES ZWEI KNOEPFE, UND SIE SIND NICHT GLEICH WICHTIG.
   "Zahlung jetzt nachholen" ist das, worum es geht; "Bestaetigung als PDF"
   ist Beiwerk. Sahen beide gleich aus, uebersah man den entscheidenden. */
.pruefung-privat.zahlung-offen .btn-nachholen{
  background:#b8000d;border-color:#b8000d;
  box-shadow:0 10px 24px rgba(184,0,13,.26);
  font-size:17px;padding:16px 30px;
}
.pruefung-privat.zahlung-offen .btn-nachholen:hover{background:#960009;border-color:#960009}
.pruefung-privat.zahlung-offen .btn-nachholen:focus-visible{outline-color:#b8000d}
/* Der zweite Knopf tritt zurueck: gleiche Form, nur als Umriss. */
/* border-width steht in .btn auf 0, deshalb reicht border-color allein
   nicht - ohne die volle Angabe sah der Knopf aus wie blosser Text. */
.pruefung-privat.zahlung-offen .btn-zweitrangig{
  background:#fff;color:#6b5000;border:1.5px solid #d3b874;box-shadow:none;
}
.pruefung-privat.zahlung-offen .btn-zweitrangig:hover{
  background:#fdf3dd;border-color:#b8951f;color:#5c4500;
}
.pruefung-privat h3{
  font-family:'Manrope',sans-serif;font-weight:800;
  font-size:20px;line-height:1.25;margin:0 0 10px;color:var(--text);
}
.pruefung-privat p{
  margin:0 0 18px;font-size:16.5px;line-height:1.6;color:#4a5a52;max-width:62ch;
}

/* Der Knopf in kraeftigem WhatsApp-Gruen. Der Ton ist bewusst dunkler als
   das helle Markengruen: Weisse Schrift auf #25D366 kaeme nur auf 2:1 und
   waere kaum lesbar, dieser Ton kommt auf 5,3:1 und erfuellt WCAG AA. */
.pruefung-privat .btn{
  display:inline-flex;align-items:center;gap:9px;
  background:#0d7a56;border-color:#0d7a56;color:#fff;
  box-shadow:0 10px 24px rgba(13,122,86,.28);
}
.pruefung-privat .btn:hover{background:#0a6448;border-color:#0a6448}
.pruefung-privat .btn:focus-visible{outline:3px solid #0d7a56;outline-offset:3px}
.pruefung-privat .btn svg{width:19px;height:19px;flex:0 0 19px}

}

/* Hinweis in der Kasse, wenn ein gemerkter Rabattcode nicht mehr gilt.
   Warm statt rot: Es ist kein Fehler des Kunden, sondern eine Auskunft. */
.rabatt-weg{
  background:#fff6e0;border:1px solid #e0b64a;border-radius:10px;
  padding:10px 14px;margin:12px 0 0;
  color:#6b5312;font-size:14px;line-height:1.55;
}