/* ==========================================================================
   WkD – Landingpages für Google Ads
   --------------------------------------------------------------------------
   Diese Datei gilt NUR für lp-ausbildung.html, lp-studium.html und
   lp-beruf.html. Sie liegt bewusst getrennt von style.css, damit an der
   normalen Website nichts kaputtgehen kann.

   Grundgedanke: Eine Landingpage hat genau ein Ziel. Deshalb gibt es hier
   keine Hauptnavigation, keine Querverweise auf andere Kurse und keine
   Fußzeile voller Links. Nur der Weg zur Anmeldung, und die Pflichtlinks.

   Aufbau:
     1. Grundlagen und Abstände
     2. Kopfzeile
     3. Hero
     4. Bausteine (Abschnitte, Karten, Listen)
     5. Anmeldeblock (das Herzstück)
     6. Fragen und Antworten
     7. Feste CTA-Leiste auf dem Handy
     8. Fußzeile
     9. Mobile Ansicht
   ========================================================================== */


/* ==========================================================================
   1. GRUNDLAGEN
   ========================================================================== */

.lp{
  --lp-luft:      clamp(56px, 7vw, 104px);   /* Abstand zwischen Abschnitten */
  --lp-schmal:    760px;                      /* Lesebreite für Fließtext    */
  padding-bottom:0;
}

/* Auf dem Handy steht unten eine feste Leiste mit dem Anmelde-Knopf.
   Damit sie den letzten Absatz nicht verdeckt, bekommt die Seite unten Platz. */
@media(max-width:760px){
  body.lp-seite{padding-bottom:86px}
}

.lp-abschnitt{padding:var(--lp-luft) 0}
/* Die Kopfzeile klebt oben. Ohne diesen Abstand verschwindet die
   Ueberschrift des Sprungziels darunter. */
.lp-abschnitt,.lp-anmelden{scroll-margin-top:78px}
.lp-abschnitt.hell{background:var(--rosa)}
.lp-abschnitt.weiss{background:#fff}
.lp-abschnitt.dunkel{background:var(--dunkel);color:#fff}
.lp-abschnitt.dunkel h2,
.lp-abschnitt.dunkel h3{color:#fff}
.lp-abschnitt.dunkel p{color:#e3d6ef}

.lp h2{
  font-family:'Manrope',sans-serif;font-weight:800;
  font-size:clamp(28px,3.4vw,44px);line-height:1.15;
  letter-spacing:-.02em;margin:0 0 18px;
}
.lp h3{
  font-family:'Manrope',sans-serif;font-weight:700;
  font-size:clamp(19px,1.7vw,23px);line-height:1.25;margin:0 0 10px;
}
.lp p{font-size:clamp(17px,1.25vw,19px);line-height:1.62;color:var(--grau);margin:0 0 16px}
.lp p strong{color:var(--text);font-weight:600}
.lp-abschnitt.dunkel p strong{color:#fff}

/* Einleitungssatz direkt unter einer Überschrift */
.lp-lead{font-size:clamp(18px,1.5vw,22px)!important;color:var(--text)!important;max-width:var(--lp-schmal)}
/* Auf dunklem Grund muss der Einleitungssatz hell sein. Das !important
   oben schlaegt sonst jede Angabe direkt am Element. */
.lp-abschnitt.dunkel .lp-lead,
.lp-anmelden .lp-lead{color:#e3d3f2!important}

.lp-kopfzeile-block{max-width:var(--lp-schmal);margin-bottom:38px}
.lp-kicker{
  display:inline-block;font-family:'Manrope',sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lila);margin:0 0 12px;
}
.lp-abschnitt.dunkel .lp-kicker{color:var(--limette)}

/* Knöpfe: die Landingpage benutzt bewusst nur zwei Sorten */
.lp-knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Manrope',sans-serif;font-weight:800;
  font-size:clamp(17px,1.3vw,19px);line-height:1.2;
  padding:19px 34px;border-radius:999px;border:0;cursor:pointer;
  background:linear-gradient(100deg,#8400d6,#a800f0);color:#fff;
  box-shadow:0 12px 30px rgba(132,0,214,.32);
  transition:transform .15s ease,box-shadow .15s ease;
  text-align:center;
}
.lp-knopf:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(132,0,214,.4)}
.lp-knopf:focus-visible{outline:3px solid var(--limette);outline-offset:3px}
.lp-knopf[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.lp-knopf-breit{width:100%}

.lp-zweitweg{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;color:var(--lila);text-decoration:underline;
  text-underline-offset:3px;font-size:16px;
}
.lp-abschnitt.dunkel .lp-zweitweg,
.lp-hero .lp-zweitweg{color:var(--limette)}

/* Kleine Vertrauenszeile unter einem Knopf */
.lp-mikro{font-size:15px!important;color:var(--grau)!important;margin:14px 0 0!important}
.lp-abschnitt.dunkel .lp-mikro{color:#c9b6dc!important}


/* ==========================================================================
   2. KOPFZEILE
   Absichtlich fast leer. Jeder zusätzliche Link ist ein Ausgang.
   ========================================================================== */

.lp-kopf{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rahmen);
}
.lp-kopf-inhalt{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 0;
}
.lp-kopf .logo img{display:block;height:34px;width:auto}
.lp-kopf-rechts{display:flex;align-items:center;gap:18px}
.lp-kopf-tel{font-weight:600;font-size:15px;color:var(--text)}
.lp-kopf .lp-knopf{padding:12px 22px;font-size:15px;box-shadow:none}


/* ==========================================================================
   3. HERO
   ========================================================================== */

.lp-hero{position:relative;background:var(--dunkel);overflow:hidden}
.lp-hero-bild{position:absolute;inset:0}
.lp-hero-bild img{width:100%;height:100%;object-fit:cover;display:block}
.lp-hero-schleier{
  position:absolute;inset:0;
  /* Frueher lief der Schleier von links dunkel nach rechts hell, weil der
     Text links stand. Seit die Ueberschrift mittig steht, muss die Mitte
     der dunkelste Punkt sein - sonst steht weisse Schrift auf dem hellen
     Teil des Fotos. */
  background:linear-gradient(180deg,
      rgba(25,0,47,.82) 0%,
      rgba(25,0,47,.9) 55%,
      rgba(25,0,47,.82) 100%),
    radial-gradient(ellipse at 50% 45%,
      rgba(25,0,47,.55) 0%,
      rgba(25,0,47,.2) 60%,
      rgba(25,0,47,0) 100%);
}
.lp-hero-inhalt{
  position:relative;z-index:2;
  padding:clamp(56px,7vw,104px) 0 clamp(48px,6vw,88px);
  max-width:720px;margin-inline:auto;
  text-align:center;
}
/* Der Vorspann und die Knopfreihe mitte sich mit der Ueberschrift. */
.lp-hero-inhalt .lp-hero-text{margin-inline:auto}
.lp-hero-inhalt .lp-hero-knoepfe{justify-content:center}
.lp-hero-inhalt .lp-marken{justify-content:center}
.lp-hero h1{
  font-family:'Manrope',sans-serif;font-weight:800;color:#fff;
  font-size:clamp(32px,4.4vw,60px);line-height:1.08;letter-spacing:-.025em;
  margin:0 0 20px;
}
.lp-hero .lp-kicker{color:var(--limette)}
.lp-hero-text{
  font-size:clamp(18px,1.6vw,23px)!important;line-height:1.55;
  color:#e8dcf3!important;margin:0 0 28px!important;
}
.lp-hero-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:18px}

/* Vertrauensmerkmale unter dem Knopf */
.lp-marken{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;padding:0;list-style:none}
.lp-marken li{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:15px;font-weight:600;
  padding:9px 16px;border-radius:999px;
}
.lp-marken svg{width:16px;height:16px;flex:0 0 16px;color:var(--limette)}


/* ==========================================================================
   4. BAUSTEINE
   ========================================================================== */

/* Karten nebeneinander */
.lp-raster{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.lp-raster.zwei{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

.lp-karte{
  background:#fff;border:1px solid var(--rahmen);border-radius:var(--radius-gross);
  padding:30px 28px;
}
.lp-abschnitt.hell .lp-karte{border-color:#efdfe6}
.lp-abschnitt.dunkel .lp-karte{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.lp-karte p:last-child{margin-bottom:0}
.lp-karte-zeichen{
  width:46px;height:46px;border-radius:14px;margin-bottom:18px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,#f3e3ff,#fbe9ff);color:var(--lila);
}
.lp-abschnitt.dunkel .lp-karte-zeichen{background:rgba(214,255,34,.14);color:var(--limette)}
.lp-karte-zeichen svg{width:23px;height:23px}

/* Häkchenliste */
.lp-haken{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.lp-haken li{
  position:relative;padding-left:34px;
  font-size:17px;line-height:1.5;color:var(--text);
}
.lp-abschnitt.dunkel .lp-haken li{color:#efe5f7}
.lp-haken li::before{
  content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;
  background:var(--lila) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
}
.lp-abschnitt.dunkel .lp-haken li::before{background-color:var(--limette);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319002f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}

/* Gegenüberstellung "so nicht / so bei uns" */
.lp-gegen{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.lp-gegen-teil{border-radius:var(--radius-gross);padding:30px 28px}
.lp-gegen-teil.alt{background:#f4f2f6;border:1px solid var(--rahmen)}
.lp-gegen-teil.neu{background:linear-gradient(150deg,#f6ecff,#fdf0ff);border:1px solid #e6cdf7}
.lp-gegen-teil h3{font-size:19px}
.lp-gegen-teil ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.lp-gegen-teil li{position:relative;padding-left:28px;font-size:16.5px;line-height:1.5;color:var(--text)}
.lp-gegen-teil.alt li::before{content:"×";position:absolute;left:4px;top:-2px;font-size:22px;color:#a2939f;font-weight:700}
.lp-gegen-teil.neu li::before{content:"✓";position:absolute;left:2px;top:0;font-size:17px;color:var(--lila);font-weight:700}

/* Ablauf in Schritten */
.lp-schritte{list-style:none;padding:0;margin:0;display:grid;gap:14px;counter-reset:lp}
.lp-schritte li{
  counter-increment:lp;position:relative;padding:22px 24px 22px 76px;
  background:#fff;border:1px solid var(--rahmen);border-radius:var(--radius);
  font-size:17px;line-height:1.55;color:var(--text);
}
.lp-schritte li::before{
  content:counter(lp);position:absolute;left:24px;top:20px;
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(140deg,#8400d6,#a800f0);color:#fff;
  display:grid;place-items:center;
  font-family:'Manrope',sans-serif;font-weight:800;font-size:16px;
}
.lp-schritte b{display:block;margin-bottom:3px}

/* Bild neben Text */
.lp-paar{display:grid;gap:clamp(28px,4vw,60px);grid-template-columns:1.05fr .95fr;align-items:center}
.lp-paar-bild img{width:100%;border-radius:var(--radius-gross);display:block}

/* Zahlenreihe */
.lp-fakten{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-top:34px}
.lp-fakt{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);padding:24px 22px}
.lp-fakt b{display:block;font-family:'Manrope',sans-serif;font-weight:800;
  font-size:clamp(26px,2.6vw,34px);color:var(--limette);line-height:1.1;margin-bottom:6px}
.lp-fakt span{font-size:15.5px;color:#d8c8e8;line-height:1.45}


/* ==========================================================================
   5. ANMELDEBLOCK
   Hier wird die Entscheidung getroffen. Alles andere auf der Seite führt
   hierher.
   ========================================================================== */

.lp-anmelden{background:var(--dunkel);color:#fff;padding:var(--lp-luft) 0}
.lp-anmelden .lp-kicker{color:var(--limette)}
.lp-anmelden h2{color:#fff}
.lp-anmelden > .wrap > p{color:#e0d2ee}

.lp-box{
  margin-top:36px;background:#fff;color:var(--text);
  border-radius:var(--radius-gross);padding:clamp(26px,3.2vw,44px);
  box-shadow:0 30px 70px rgba(0,0,0,.3);
  display:grid;gap:clamp(26px,3vw,44px);grid-template-columns:1.15fr .85fr;
  align-items:start;
}

.lp-wahl-titel{
  font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.02em;margin:0 0 12px;color:var(--text);
  display:flex;align-items:center;gap:9px;
}
.lp-wahl-titel span{
  width:24px;height:24px;border-radius:50%;background:var(--rosa);color:var(--lila);
  display:grid;place-items:center;font-size:13px;font-weight:800;flex:0 0 24px;
}
.lp-wahl + .lp-wahl{margin-top:28px}

/* Auswahl als Pillen. Das echte Eingabefeld bleibt bedienbar und liegt
   unsichtbar unter dem Etikett, damit Tastatur und Screenreader gehen. */
.lp-pillen{display:flex;flex-wrap:wrap;gap:9px}
.lp-pille{position:relative}
.lp-pille input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;margin:0;cursor:pointer}
.lp-pille span{
  display:block;padding:11px 20px;border-radius:999px;
  border:1.5px solid var(--rahmen);background:#fff;
  font-weight:700;font-size:15.5px;color:var(--text);
  transition:all .14s ease;
}
.lp-pille input:checked + span{border-color:var(--lila);background:var(--lila);color:#fff}
.lp-pille input:focus-visible + span{outline:3px solid var(--limette);outline-offset:2px}

/* Kursart als größere Kacheln */
.lp-arten{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.lp-art{position:relative}
.lp-art input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;margin:0;cursor:pointer}
.lp-art span{
  display:block;padding:16px 18px;border-radius:var(--radius);
  border:1.5px solid var(--rahmen);background:#fff;transition:all .14s ease;height:100%;
}
.lp-art b{display:block;font-size:16px;font-weight:700;margin-bottom:3px}
.lp-art small{display:block;font-size:14px;color:var(--grau);line-height:1.4}
.lp-art input:checked + span{border-color:var(--lila);background:#faf3ff;box-shadow:0 0 0 3px rgba(155,0,255,.1)}
.lp-art input:focus-visible + span{outline:3px solid var(--lila);outline-offset:2px}

/* Die Zusammenfassung rechts */
.lp-kasse{
  background:var(--rosa);border-radius:var(--radius-gross);
  padding:28px 26px;position:sticky;top:90px;
}
.lp-kasse-kurs{font-family:'Manrope',sans-serif;font-weight:800;font-size:20px;margin:0 0 4px;line-height:1.25}
.lp-kasse-zusatz{font-size:15px;color:var(--grau);margin:0 0 18px;line-height:1.45}
.lp-kasse-preis{
  font-family:'Manrope',sans-serif;font-weight:800;
  font-size:clamp(34px,3.6vw,44px);line-height:1;letter-spacing:-.02em;margin:0;
}
.lp-kasse-preis small{display:block;font-family:'DM Sans',sans-serif;font-weight:500;
  font-size:15px;color:var(--grau);margin-top:7px;letter-spacing:0}
.lp-kasse-steuer{font-size:13.5px;color:var(--grau);margin:8px 0 20px}
.lp-kasse-liste{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:9px}
.lp-kasse-liste li{position:relative;padding-left:26px;font-size:15px;line-height:1.45;color:var(--text)}
.lp-kasse-liste li::before{content:"✓";position:absolute;left:2px;top:0;color:var(--lila);font-weight:700}
.lp-kasse .lp-knopf{width:100%}

.lp-sicher{
  display:flex;align-items:flex-start;gap:9px;margin-top:16px;
  font-size:13.5px;line-height:1.45;color:var(--grau);
}
.lp-sicher svg{width:16px;height:16px;flex:0 0 16px;margin-top:2px;color:var(--lila)}


/* ==========================================================================
   6. FRAGEN UND ANTWORTEN
   ========================================================================== */

.lp-fragen{max-width:840px;margin:0 auto;display:grid;gap:12px}
.lp-frage{
  background:#fff;border:1px solid var(--rahmen);border-radius:var(--radius);
  overflow:hidden;
}
.lp-frage summary{
  list-style:none;cursor:pointer;padding:22px 56px 22px 24px;position:relative;
  font-family:'Manrope',sans-serif;font-weight:700;font-size:17.5px;line-height:1.4;
}
.lp-frage summary::-webkit-details-marker{display:none}
.lp-frage summary::after{
  content:"";position:absolute;right:24px;top:50%;width:12px;height:12px;
  border-right:2.5px solid var(--lila);border-bottom:2.5px solid var(--lila);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;
}
.lp-frage[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.lp-frage summary:focus-visible{outline:3px solid var(--lila);outline-offset:-3px}
.lp-frage-text{padding:0 24px 24px}
.lp-frage-text p{font-size:16.5px;margin-bottom:12px}
.lp-frage-text p:last-child{margin-bottom:0}


/* ==========================================================================
   7. FESTE CTA-LEISTE AUF DEM HANDY
   ========================================================================== */

.lp-leiste{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--rahmen);
  padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 24px rgba(0,0,0,.09);
}
.lp-leiste .lp-knopf{width:100%;padding:16px 20px;font-size:17px}
@media(max-width:760px){ .lp-leiste{display:block} }


/* ==========================================================================
   8. FUSSZEILE
   Nur die gesetzlich nötigen Links. Keine Kursnavigation.
   ========================================================================== */

.lp-fuss{background:#fff;border-top:1px solid var(--rahmen);padding:34px 0 40px}
.lp-fuss-inhalt{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;font-size:14.5px;color:var(--grau);
}
.lp-fuss nav{display:flex;flex-wrap:wrap;gap:18px}
.lp-fuss a{color:var(--grau);text-decoration:underline;text-underline-offset:3px}
.lp-fuss a:hover{color:var(--lila)}


/* ==========================================================================
   9. MOBILE ANSICHT
   ========================================================================== */

@media(max-width:960px){
  .lp-box{grid-template-columns:1fr}
  .lp-kasse{position:static}
  .lp-paar{grid-template-columns:1fr}
  .lp-paar-bild{order:-1}
}

@media(max-width:760px){
  .lp-kopf-tel{display:none}
  .lp-hero-schleier{background:linear-gradient(180deg,rgba(25,0,47,.72) 0%,rgba(25,0,47,.93) 55%,rgba(25,0,47,.97) 100%)}
  .lp-hero-inhalt{max-width:100%}
  .lp-hero-knoepfe{flex-direction:column;align-items:stretch}
  .lp-hero-knoepfe .lp-knopf{width:100%}
  .lp-hero-knoepfe .lp-zweitweg{justify-content:center}
  .lp-schritte li{padding:20px 20px 20px 64px}
  .lp-schritte li::before{left:18px}
}


/* --------------------------------------------------------------------------
   RUHIGERE FARBEN (seit 13.10.2026)
   "hell" ist jetzt der warme, fast weisse Ton aus style.css (--rosa zeigt
   dorthin). Der Block "Wer hinter WkD steht" steht nicht mehr dunkel,
   sondern hell (Klasse lp-wer). Dunkel bleiben nur der Kopf, der
   Anmeldeblock und der Schlussaufruf.
   -------------------------------------------------------------------------- */
.lp-abschnitt.hell .lp-karte{border-color:var(--flaeche-rand,#e9e3d9)}
.lp-karte-zeichen{background:var(--lila-zart,#f2eafc)}
.lp-gegen-teil.neu{background:#fff;border:2px solid var(--lila)}
.lp-wer .lp-fakt{background:#fff;border:1px solid var(--flaeche-rand,#e9e3d9)}
.lp-wer .lp-fakt b{color:var(--lila)}
.lp-wer .lp-fakt span{color:var(--text-weich,#574d61)}

/* --------------------------------------------------------------------------
   GUT ZU WISSEN (Anmeldeblock, seit 15.10.2026)
   Drei kurze Antworten direkt unter der Kursauswahl: feste Termine und was
   passiert, wenn eine Gruppe nicht startet (AGB § 5), Material bei
   Verhinderung, Privatunterricht ohne Mindestlaufzeit (AGB § 6).
   -------------------------------------------------------------------------- */
.lp-gut{margin:26px 0 0;padding:22px 24px;border:1px solid rgba(255,255,255,.18);border-radius:18px}
.lp-anmelden .lp-gut-titel{margin:0 0 12px;font:800 13px 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--limette,#d7f36b)}
.lp-gut ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lp-gut li{color:#e0d2ee;font-size:14.5px;line-height:1.55}
.lp-gut li b{display:block;color:#fff;margin-bottom:4px}
@media (max-width:860px){ .lp-gut ul{grid-template-columns:1fr;gap:12px} }
/* Stimmen stehen jetzt direkt unter dem Hero */
.lp-abschnitt.stimmen .lp-lead{max-width:62ch;margin-left:auto;margin-right:auto}