/* ==========================================================================
   Kurs-Landingpages – gemeinsames Stylesheet

   Anders als die Leistungs-Landingpages (leistungen/stil.css, heller
   zweispaltiger Aufbau) sind das bewusst vollflaechige Ein-Bildschirm-Seiten:
   ein Foto ueber die ganze Flaeche, eine schwebende Glaskarte mit dem
   Wichtigsten, kaum Scrollen. Fuer Google-Ads-Kampagnen auf einzelne Kurse.
   Eigenstaendig, NICHT die style.css der Website - Farben und Schriften
   kommen aber exakt aus der echten Marke.
   ========================================================================== */

@font-face { font-family:'Barlow'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../assets/fonts/barlow-400-latin.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../assets/fonts/barlow-500-latin.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../assets/fonts/barlow-700-latin.woff2') format('woff2'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../assets/fonts/montserrat-700-latin.woff2') format('woff2'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../assets/fonts/montserrat-800-latin.woff2') format('woff2'); }

:root{
  --teal:#78BE20; --teal-dark:#60981A; --teal-bright:#82CB26; --teal-text:#4A7314;
  --mint:#DEF5E7; --navy:#373a3b; --navy-2:#2c2e2f; --white:#f1f7fb;
  --font-head:'Montserrat', sans-serif; --font-body:'Barlow', sans-serif;
  --radius:20px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font-body); color:var(--white);
  background:var(--navy); -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--font-head); line-height:1.15; margin:0 0 .5em; }
p{ margin:0 0 1em; }
a{ color:inherit; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }

/* ---------- Vollflaechiger Hero: das ganze Erste-Bildschirm-Erlebnis ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  overflow:hidden; padding:96px 0 48px;
  background:linear-gradient(135deg,#2c3a2e 0%,#1c2a20 55%,#14201a 100%);
}
/* Notausgang: fuehrt zurueck zur Hauptseite, falls jemand von dieser
   bewusst schmalen Landingpage aus die ganze Website sehen moechte. */
.lp-logo{
  position:absolute; top:18px; right:20px; z-index:2;
  display:flex; align-items:center; gap:.42rem;
  padding:.5em .9em .5em .65em; border-radius:999px;
  background:rgba(20,28,22,.55); color:#fff; text-decoration:none;
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .2s ease, background .2s ease;
}
.lp-logo:hover{ background:rgba(20,28,22,.75); transform:translateY(-1px); }
.lp-logo svg{ height:1.15rem; aspect-ratio:2612.26/3169.95; flex-shrink:0; color:var(--teal-bright); }
.lp-logo span{ font-family:var(--font-head); font-weight:800; font-size:.92rem; letter-spacing:.01em; }
/* Ohne echtes Foto (data-hero-bilder fehlt oder ist leer, siehe kurs.js)
   tragen zwei weiche Farbflecken (Markengruen/Mint) die Tiefe. Sobald ein
   Foto per JS in .hero-bg eingehaengt wird, deckt es sie automatisch ab -
   es liegt spaeter in der Stock-Reihenfolge (DOM-Position), nicht weil es
   groesser waere. */
.hero-orb{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.55; z-index:0; pointer-events:none; }
.hero-orb-a{ width:46vw; height:46vw; top:-18vw; right:-10vw; background:radial-gradient(circle, var(--teal) 0%, transparent 70%); }
.hero-orb-b{ width:38vw; height:38vw; bottom:-16vw; left:-8vw; background:radial-gradient(circle, var(--mint) 0%, transparent 70%); }

/* Foto-Ebene: kurs.js waehlt beim Laden zufaellig eines der in
   data-hero-bilder hinterlegten Fotos und haengt es hier als <img> ein.
   Die Animation ist ein klassischer, sehr langsamer Ken-Burns-Pan/Zoom -
   kaum wahrnehmbar als Bewegung, aber die Seite wirkt dadurch lebendiger
   als ein starres Foto. */
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-bg img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform-origin:56% 46%;
  animation:kursHeroPan 24s ease-in-out infinite alternate;
}
@keyframes kursHeroPan{
  from{ transform:scale(1.03) translate3d(0,0,0); }
  to{ transform:scale(1.13) translate3d(-1.6%,-1.1%,0); }
}
@media (prefers-reduced-motion:reduce){
  .hero-bg img{ animation:none; }
}

/* Abdunkler NUR fuer den Kontrast der Glaskarte, nicht als Bild-Schleier -
   analog zur Regel bei den Leistungs-Landingpages: das Motiv soll zu sehen
   bleiben. Rechts bleibt das Foto darum unbedeckt (Motiv gehoert dorthin). */
.hero::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg, rgba(30,38,32,.82) 0%, rgba(30,38,32,.55) 46%, rgba(30,38,32,.08) 78%);
}

.hero-inner{ position:relative; z-index:1; width:100%; }

/* ---------- Die schwebende Glaskarte: Traeger des 3D-Effekts ---------- */
.karte{
  max-width:560px; padding:40px 40px 36px;
  background:rgba(20,28,22,.42);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  /* Zwei Schatten uebereinander erzeugen die Tiefe: ein enger, dunkler
     direkt unter der Karte, ein weiter, weicher Markengruen-Schein
     dahinter - so wirkt sie, als schwebe sie vor dem Foto statt flach
     darauf zu liegen. */
  box-shadow:
    0 24px 60px -20px rgba(0,0,0,.55),
    0 8px 24px -8px rgba(0,0,0,.4),
    0 0 90px -30px rgba(120,190,32,.35);
  transform:perspective(1400px) rotateY(-2.2deg) rotateX(1deg);
}
.eyebrow{
  display:inline-block; font-family:var(--font-head); font-weight:700;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-bright); margin:0 0 14px;
}
.karte h1{ font-size:clamp(1.9rem,4vw,2.6rem); color:#fff; }
.karte h1 span{ color:var(--teal-bright); }
.karte .lead{ font-size:1.05rem; color:#dfe6e1; max-width:46ch; }

/* ---------- Kurzfakten: prägnant statt Fliesstext ---------- */
.fakten{ list-style:none; margin:22px 0 26px; padding:0; display:grid; gap:12px; }
.fakten li{ display:flex; align-items:flex-start; gap:.7em; font-size:.94rem; color:#eef2ef; }
.fakten .icon{
  flex:none; width:26px; height:26px; border-radius:8px; background:rgba(120,190,32,.22);
  display:flex; align-items:center; justify-content:center; color:var(--teal-bright);
  font-size:.9rem; line-height:1; margin-top:1px;
}

/* ---------- Preis-Chip: schwebt ueber der Kartenecke, eigener Schatten -
   das ist der zweite, deutlichste 3D-Akzent der Seite. ---------- */
.preis-chip{
  position:absolute; top:-18px; right:-14px;
  background:var(--teal); color:var(--navy-2);
  font-family:var(--font-head); font-weight:800; font-size:1.02rem;
  padding:.55em 1.1em; border-radius:999px;
  box-shadow:0 14px 26px -8px rgba(0,0,0,.5), 0 0 0 4px rgba(20,28,22,.9);
  transform:rotate(4deg);
}
.preis-chip small{ display:block; font-family:var(--font-body); font-weight:600; font-size:.62rem; letter-spacing:.04em; text-transform:uppercase; opacity:.8; }
.karte{ position:relative; }

/* ---------- Aktionen ---------- */
.cta-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:4px; }
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-head); font-weight:700; font-size:.98rem;
  padding:.9em 1.9em; border-radius:999px; border:2px solid transparent;
  text-decoration:none; cursor:pointer; line-height:1.15;
  transition:transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn-primaer{ background:var(--teal); color:var(--navy-2); box-shadow:0 10px 24px -8px rgba(120,190,32,.55); }
.btn-primaer:hover{ background:var(--teal-bright); transform:translateY(-2px); }
.btn-hell{ border-color:rgba(255,255,255,.5); color:#fff; }
.btn-hell:hover{ background:rgba(255,255,255,.1); border-color:#fff; transform:translateY(-2px); }

/* ---------- Vertrauensleiste unten in der Karte ---------- */
.vertrauen{ display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14); }
.vertrauen span{ font-size:.8rem; color:#cbd3ce; display:flex; align-items:center; gap:.4em; }
.vertrauen b{ color:#fff; }

/* ---------- Schlanke Fusszeile, kein Site-Nav ---------- */
footer.mini{
  position:relative; z-index:1; padding:22px 0 26px; text-align:center;
  font-size:.82rem; color:#aab4ae; border-top:1px solid rgba(255,255,255,.08);
}
footer.mini a{ text-decoration:underline; text-underline-offset:2px; }
footer.mini a:hover{ color:#fff; }
footer.mini .adresse{ margin-bottom:.4em; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .karte{ transform:none; }
  .btn, .btn:hover{ transform:none; transition:none; }
}

@media (max-width:640px){
  .hero{ padding:88px 0 40px; align-items:flex-start; }
  .karte{ max-width:none; padding:30px 24px 28px; transform:none; }
  .preis-chip{ position:static; display:inline-flex; flex-direction:column; align-items:flex-start; transform:none; margin-bottom:18px; }
  .cta-row .btn{ width:100%; justify-content:center; }
}