/* ==========================================================================
   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}

/* --- 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 0 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;
  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: drei Karten nebeneinander --- */
.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.25fr;gap:45px;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:14px;display:flex;gap:12px;align-items:center;
}
.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;
}
.level small{display:block;color:#817688;margin-top:3px}

/* --- Kursthemen --- */
.topics{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.topic img{width:100%;height:220px;object-fit:cover;border-radius:var(--radius);display:block}
.topic h3{font:800 19px 'Manrope',sans-serif;margin:14px 0 7px}
.topic p{color:var(--grau);line-height:1.5;font-size:14px;margin:0}

/* --- 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}
.exam b{font:800 28px 'Manrope',sans-serif;color:var(--lila);display:block}
.exam h3{font:800 22px 'Manrope',sans-serif;margin:10px 0}
.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}


/* ==========================================================================
   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}

/* 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;
}

/* --- Kopfzeile des Shops --- */
.shop-kopf{
  background:var(--dunkel);color:#fff;
  padding:56px 0 44px;
}
.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}

/* --- 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}

/* 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;
}

/* --- 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)}

.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}

.zahlwahl{display:grid;gap:10px;margin-top:8px}
.zahlwahl label{
  display:flex;align-items:center;gap:13px;
  border:1.5px solid var(--rahmen);border-radius:12px;
  padding:15px 18px;cursor:pointer;font-weight:700;font-size:15px;
  transition:border-color .15s,background .15s;
}
.zahlwahl label:hover{border-color:var(--lila)}
.zahlwahl input{accent-color:var(--lila);width:19px;height:19px}
.zahlwahl input:checked + span{color:var(--lila)}
.zahlwahl label:has(input:checked){border-color:var(--lila);background:#faf5ff}

.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}

/* --- 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}
.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)}

.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);
}
.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}

}