/* ============================================================
   Lernwolke – Landingpage
   Designsprache: Frutiger Aero (Himmel, Wasser, Glas, Glanz)
   ============================================================ */

:root{
  /* Markenfarben */
  --lw-sky:#3fa9e5;
  --lw-sky-light:#8ed6f5;
  --lw-sky-pale:#dcf1fb;
  --lw-deep:#0f5686;
  --lw-deep-ink:#0a3a5c;
  --lw-aqua:#41d6c3;
  --lw-green:#79cf2f;
  --lw-green-deep:#4ea410;
  --lw-sun:#ffc94d;
  --lw-coral:#ff7a6b;

  /* Flaechen */
  --lw-ink:#17364c;
  --lw-body:#3d5c73;
  --lw-muted:#6d8ba3;
  --lw-paper:#ffffff;
  --lw-paper-soft:#f6fbfe;
  --lw-line:#d3e6f2;
  --lw-line-soft:#e6f2f9;

  /* Glas */
  --lw-glass:rgba(255,255,255,.72);
  --lw-glass-strong:rgba(255,255,255,.9);
  --lw-glass-line:rgba(255,255,255,.85);

  /* Schatten */
  --lw-shadow-sm:0 2px 8px rgba(16,68,105,.08);
  --lw-shadow:0 12px 34px rgba(16,68,105,.13);
  --lw-shadow-lg:0 26px 70px rgba(13,58,92,.20);
  --lw-glow:0 0 0 4px rgba(63,169,229,.16);

  --lw-radius:18px;
  --lw-radius-lg:26px;
  --lw-radius-pill:999px;

  --lw-shell:min(1180px,calc(100vw - 40px));
}

*{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:88px}

body.lw{
  margin:0;
  font-family:"Segoe UI",system-ui,-apple-system,Tahoma,Arial,sans-serif;
  color:var(--lw-body);
  background:var(--lw-paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.lw h1,.lw h2,.lw h3,.lw h4{color:var(--lw-ink);margin:0;line-height:1.16;letter-spacing:-.02em}
.lw p{margin:0;line-height:1.65}
.lw a{color:var(--lw-deep);text-decoration:none}
.lw img,.lw svg{max-width:100%}
.lw button{font:inherit}

.lw-shell{width:var(--lw-shell);margin-inline:auto}
.lw-center{text-align:center}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Abschnittskopf ---------- */
.lw-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 15px;margin-bottom:16px;
  font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--lw-deep);
  border:1px solid rgba(63,169,229,.32);
  border-radius:var(--lw-radius-pill);
  background:linear-gradient(#ffffff,#e7f5fd);
  box-shadow:inset 0 1px 0 #fff,var(--lw-shadow-sm);
}
.lw-section{padding:clamp(64px,8vw,110px) 0;position:relative}
.lw-section-head{max-width:640px;margin-inline:auto;margin-bottom:52px;text-align:center}
.lw-section-head h2{font-size:clamp(1.75rem,3.4vw,2.55rem);margin-bottom:14px}
.lw-section-head p{font-size:1.05rem;color:var(--lw-muted)}

/* ---------- Knoepfe ---------- */
.lw-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 26px;
  border-radius:var(--lw-radius-pill);
  font-weight:700;font-size:.98rem;
  border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  white-space:nowrap;
}
.lw-btn:active{transform:translateY(1px)}
.lw-btn:focus-visible{outline:none;box-shadow:var(--lw-glow)}

.lw-btn-primary{
  color:#fff;
  border-color:var(--lw-green-deep);
  background:linear-gradient(#9ee65a 0%,#7ed12f 48%,#63bd17 52%,#4ea410 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 8px 20px rgba(78,164,16,.32);
  text-shadow:0 -1px 0 rgba(0,0,0,.22);
}
.lw-btn-primary:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 14px 28px rgba(78,164,16,.36)}

.lw-btn-sky{
  color:#fff;
  border-color:#1d7cb5;
  background:linear-gradient(#7fd0f5 0%,#46abe4 48%,#2b95d4 52%,#1a7db8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 20px rgba(26,125,184,.3);
  text-shadow:0 -1px 0 rgba(0,0,0,.2);
}
.lw-btn-sky:hover{filter:brightness(1.06);transform:translateY(-2px)}

.lw-btn-ghost{
  color:var(--lw-deep);
  border-color:rgba(63,169,229,.4);
  background:var(--lw-glass-strong);
  box-shadow:inset 0 1px 0 #fff,var(--lw-shadow-sm);
}
.lw-btn-ghost:hover{background:#fff;transform:translateY(-2px);box-shadow:var(--lw-shadow)}

.lw-btn-lg{min-height:56px;padding:0 34px;font-size:1.05rem}
.lw-btn-block{width:100%}

/* ============================================================
   Kopfzeile
   ============================================================ */
.lw-header{
  position:sticky;top:0;z-index:60;
  border-bottom:1px solid transparent;
  transition:background .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.lw-header.is-stuck{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:var(--lw-line);
  box-shadow:0 6px 24px rgba(16,68,105,.08);
}
.lw-header-inner{display:flex;align-items:center;gap:20px;height:74px}

.lw-logo{display:inline-flex;align-items:center;gap:11px;flex-shrink:0}
.lw-logo-mark{width:40px;height:40px;flex-shrink:0;filter:drop-shadow(0 4px 8px rgba(26,125,184,.28))}
.lw-logo-text{display:flex;flex-direction:column;line-height:1}
.lw-logo-name{font-size:1.3rem;font-weight:800;letter-spacing:-.03em;color:var(--lw-deep-ink)}
.lw-logo-name em{font-style:normal;color:var(--lw-sky)}
.lw-logo-claim{font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--lw-muted);margin-top:3px}

.lw-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.lw-nav a{
  padding:9px 15px;border-radius:var(--lw-radius-pill);
  font-size:.93rem;font-weight:600;color:var(--lw-body);
  transition:background .18s ease,color .18s ease;
}
.lw-nav a:hover{background:rgba(63,169,229,.12);color:var(--lw-deep)}
.lw-header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.lw-header-actions .lw-btn{min-height:42px;padding:0 20px;font-size:.92rem}

.lw-burger{
  display:none;width:44px;height:44px;flex-shrink:0;
  align-items:center;justify-content:center;
  border:1px solid var(--lw-line);border-radius:12px;
  background:var(--lw-glass-strong);cursor:pointer;
}
.lw-burger span{display:block;width:19px;height:2px;border-radius:2px;background:var(--lw-deep);box-shadow:0 -6px 0 var(--lw-deep),0 6px 0 var(--lw-deep)}

/* ============================================================
   Held
   ============================================================ */
.lw-hero{
  position:relative;overflow:hidden;
  padding:clamp(48px,7vw,84px) 0 clamp(70px,9vw,120px);
  background:
    radial-gradient(1100px 520px at 78% -8%,rgba(65,214,195,.30),transparent 62%),
    radial-gradient(900px 520px at 8% 4%,rgba(126,209,47,.20),transparent 60%),
    linear-gradient(178deg,#d6f0fc 0%,#eaf8fe 42%,#ffffff 100%);
}
/* Himmelsglanz oben */
.lw-hero::before{
  content:"";position:absolute;inset:0 0 auto;height:340px;
  background:linear-gradient(180deg,rgba(255,255,255,.85),transparent);
  pointer-events:none;
}
.lw-bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lw-bubbles i{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95),rgba(160,225,250,.42) 42%,rgba(86,190,232,.16) 70%,transparent 74%);
  box-shadow:inset 0 0 18px rgba(255,255,255,.7);
  animation:lwFloat 15s ease-in-out infinite;
}
.lw-bubbles i:nth-child(1){width:170px;height:170px;left:4%;top:16%;animation-duration:19s}
.lw-bubbles i:nth-child(2){width:88px;height:88px;left:22%;top:62%;animation-duration:14s;animation-delay:-3s}
.lw-bubbles i:nth-child(3){width:230px;height:230px;right:-3%;top:8%;animation-duration:23s;animation-delay:-6s}
.lw-bubbles i:nth-child(4){width:64px;height:64px;right:18%;bottom:12%;animation-duration:12s;animation-delay:-2s}
.lw-bubbles i:nth-child(5){width:120px;height:120px;left:47%;top:-4%;animation-duration:17s;animation-delay:-8s}
@keyframes lwFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,-26px,0) scale(1.05)}
}

.lw-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(32px,5vw,64px);align-items:center}

.lw-hero h1{font-size:clamp(2.15rem,4.6vw,3.5rem);margin-bottom:20px}
.lw-hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--lw-sky),var(--lw-aqua) 55%,var(--lw-green));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lw-hero-lead{font-size:clamp(1.02rem,1.6vw,1.18rem);max-width:53ch;margin-bottom:30px}
.lw-hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:30px}

.lw-hero-trust{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.88rem;color:var(--lw-muted);font-weight:600}
.lw-hero-trust span{display:inline-flex;align-items:center;gap:7px}
.lw-hero-trust b{
  width:20px;height:20px;flex-shrink:0;display:grid;place-items:center;
  border-radius:50%;font-size:.68rem;color:#fff;
  background:linear-gradient(#9ee65a,#63bd17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}

/* Kennzahlen */
.lw-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px;max-width:520px}
.lw-stat{
  padding:16px 18px;border-radius:var(--lw-radius);
  border:1px solid var(--lw-glass-line);
  background:var(--lw-glass);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 #fff,var(--lw-shadow-sm);
}
.lw-stat strong{display:block;font-size:1.55rem;font-weight:800;color:var(--lw-deep);letter-spacing:-.02em}
.lw-stat span{font-size:.78rem;color:var(--lw-muted);font-weight:600}

/* ---------- Klassenzimmer-Vorschau im Helden ---------- */
.lw-hero-art{position:relative}
.lw-classroom{
  position:relative;border-radius:var(--lw-radius-lg);overflow:hidden;
  border:1px solid rgba(255,255,255,.9);
  background:linear-gradient(#ffffff,#f2f9fe);
  box-shadow:var(--lw-shadow-lg);
}
.lw-classroom::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.55) 0%,transparent 38%);
}
.lw-classroom-bar{
  display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;
  border-bottom:1px solid var(--lw-line);
  background:linear-gradient(#fdfeff,#e5f2fa);
}
.lw-classroom-bar i{width:10px;height:10px;border-radius:50%;background:#d9e6ef;box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}
.lw-classroom-bar i:nth-child(1){background:#ff8a7a}
.lw-classroom-bar i:nth-child(2){background:#ffd166}
.lw-classroom-bar i:nth-child(3){background:#8fdc57}
.lw-classroom-bar strong{margin-left:8px;font-size:.76rem;color:var(--lw-deep);font-weight:700}
.lw-classroom-bar em{
  margin-left:auto;font-style:normal;font-size:.66rem;font-weight:800;letter-spacing:.08em;
  color:#fff;padding:3px 9px;border-radius:var(--lw-radius-pill);
  background:linear-gradient(#ff8b7c,#ef5f4d);box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.lw-classroom-body{display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:0}
.lw-board{position:relative;padding:16px;background:#fff;min-height:250px}
.lw-board-canvas{
  position:relative;height:100%;min-height:218px;border-radius:12px;
  border:1px solid var(--lw-line);
  background:
    linear-gradient(#fbfeff,#f2f9fd),
    repeating-linear-gradient(0deg,transparent 0 27px,rgba(63,169,229,.09) 27px 28px);
  overflow:hidden;
}
.lw-board-canvas svg{position:absolute;inset:0;width:100%;height:100%}
.lw-board-tools{
  position:absolute;left:24px;top:50%;transform:translateY(-50%);
  display:grid;gap:5px;padding:6px;border-radius:14px;
  border:1px solid var(--lw-glass-line);
  background:var(--lw-glass-strong);
  box-shadow:var(--lw-shadow-sm);
}
.lw-board-tools b{
  width:28px;height:28px;display:grid;place-items:center;border-radius:9px;
  font-size:.85rem;background:#f2f8fc;color:var(--lw-deep);
}
.lw-board-tools b.on{background:linear-gradient(#7fd0f5,#2b95d4);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}

.lw-roster{border-left:1px solid var(--lw-line);background:linear-gradient(#f8fcfe,#eef7fc);padding:12px 10px;display:grid;gap:8px;align-content:start}
.lw-roster-title{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--lw-muted);font-weight:800}
.lw-face{display:flex;align-items:center;gap:8px;font-size:.74rem;font-weight:600;color:var(--lw-ink)}
.lw-face i{
  width:24px;height:24px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;
  font-size:.8rem;font-style:normal;
  background:linear-gradient(#dff0fb,#b9dff5);
  box-shadow:inset 0 1px 0 #fff;
}
.lw-face u{margin-left:auto;text-decoration:none;font-size:.72rem}
.lw-face.raised i{background:linear-gradient(#ffe6a3,#ffc94d);animation:lwWave 1.4s ease-in-out infinite}
@keyframes lwWave{0%,100%{transform:rotate(0)}30%{transform:rotate(15deg)}60%{transform:rotate(-10deg)}}

/* Schwebende Marker am Helden-Bild */
.lw-float-card{
  position:absolute;display:flex;align-items:center;gap:10px;
  padding:11px 15px;border-radius:14px;
  border:1px solid var(--lw-glass-line);
  background:var(--lw-glass-strong);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:var(--lw-shadow);
  font-size:.8rem;font-weight:700;color:var(--lw-ink);
  animation:lwFloat 8s ease-in-out infinite;
}
.lw-float-card small{display:block;font-size:.68rem;font-weight:600;color:var(--lw-muted)}
.lw-float-card b{font-size:1.15rem}
.lw-float-a{left:-26px;bottom:56px;animation-delay:-1s}
.lw-float-b{right:-18px;top:38px;animation-delay:-4s}

/* ============================================================
   Faecher / Kurse
   ============================================================ */
.lw-subjects{background:linear-gradient(180deg,#ffffff,#f4fbfe)}
.lw-subject-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,258px),1fr));gap:20px}
.lw-subject{
  position:relative;padding:26px 24px 24px;border-radius:var(--lw-radius);
  border:1px solid var(--lw-line);background:var(--lw-paper);
  box-shadow:var(--lw-shadow-sm);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  overflow:hidden;
}
.lw-subject::before{
  content:"";position:absolute;inset:0 0 auto;height:4px;
  background:linear-gradient(90deg,var(--lw-sky),var(--lw-aqua));
  opacity:0;transition:opacity .22s ease;
}
.lw-subject:hover{transform:translateY(-6px);box-shadow:var(--lw-shadow);border-color:rgba(63,169,229,.4)}
.lw-subject:hover::before{opacity:1}
.lw-subject-icon{
  width:52px;height:52px;display:grid;place-items:center;margin-bottom:16px;
  border-radius:16px;font-size:1.6rem;
  background:linear-gradient(#eaf7ff,#cfeaf9);
  box-shadow:inset 0 1px 0 #fff,0 4px 12px rgba(63,169,229,.18);
}
.lw-subject h3{font-size:1.1rem;margin-bottom:8px}
.lw-subject p{font-size:.9rem;color:var(--lw-muted);margin-bottom:15px}
.lw-subject-meta{display:flex;flex-wrap:wrap;gap:7px}
.lw-tag{
  font-size:.72rem;font-weight:700;padding:4px 11px;border-radius:var(--lw-radius-pill);
  color:var(--lw-deep);background:#e8f5fd;border:1px solid #cbe8f8;
}
.lw-tag.green{color:var(--lw-green-deep);background:#eefbe2;border-color:#d3f0b8}

/* ============================================================
   Ablauf
   ============================================================ */
.lw-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:22px;counter-reset:lwstep}
.lw-step{
  position:relative;padding:30px 24px 26px;border-radius:var(--lw-radius);
  border:1px solid var(--lw-glass-line);
  background:linear-gradient(#ffffff,#f5fbfe);
  box-shadow:var(--lw-shadow-sm);
}
.lw-step::before{
  counter-increment:lwstep;content:counter(lwstep);
  position:absolute;top:-19px;left:24px;
  width:40px;height:40px;display:grid;place-items:center;
  border-radius:50%;font-weight:800;font-size:1.05rem;color:#fff;
  background:linear-gradient(#7fd0f5,#2b95d4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 6px 16px rgba(26,125,184,.32);
}
.lw-step h3{font-size:1.06rem;margin:10px 0 9px}
.lw-step p{font-size:.9rem;color:var(--lw-muted)}

/* ============================================================
   Live-Klassenzimmer / Funktionen
   ============================================================ */
.lw-features{
  background:
    radial-gradient(800px 400px at 88% 12%,rgba(65,214,195,.18),transparent 60%),
    linear-gradient(180deg,#eef8fd,#ffffff);
}
.lw-feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:20px}
.lw-feature{
  padding:26px 24px;border-radius:var(--lw-radius);
  border:1px solid var(--lw-glass-line);
  background:var(--lw-glass);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 #fff,var(--lw-shadow-sm);
  transition:transform .22s ease,box-shadow .22s ease;
}
.lw-feature:hover{transform:translateY(-5px);box-shadow:inset 0 1px 0 #fff,var(--lw-shadow)}
.lw-feature-icon{
  width:46px;height:46px;display:grid;place-items:center;margin-bottom:15px;
  border-radius:14px;font-size:1.4rem;
  background:linear-gradient(#ffffff,#dff0fb);
  box-shadow:inset 0 1px 0 #fff,0 3px 10px rgba(63,169,229,.16);
}
.lw-feature h3{font-size:1.02rem;margin-bottom:8px}
.lw-feature p{font-size:.88rem;color:var(--lw-muted)}

/* ============================================================
   Preise
   ============================================================ */
.lw-price-toggle{
  display:inline-flex;gap:4px;padding:5px;margin:0 auto 16px;
  border-radius:var(--lw-radius-pill);border:1px solid var(--lw-line);
  background:var(--lw-paper);box-shadow:var(--lw-shadow-sm);
}
.lw-price-toggle button{
  min-height:40px;padding:0 22px;border:0;border-radius:var(--lw-radius-pill);
  font-size:.9rem;font-weight:700;color:var(--lw-muted);background:transparent;cursor:pointer;
  transition:color .18s ease,background .18s ease;
}
.lw-price-toggle button.is-active{
  color:#fff;
  background:linear-gradient(#7fd0f5,#2b95d4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.lw-price-note{display:block;margin-bottom:40px;font-size:.85rem;color:var(--lw-muted)}

.lw-price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:22px;align-items:stretch}
.lw-price{
  position:relative;display:flex;flex-direction:column;
  padding:30px 26px 28px;border-radius:var(--lw-radius-lg);
  border:1px solid var(--lw-line);background:var(--lw-paper);
  box-shadow:var(--lw-shadow-sm);
  transition:transform .22s ease,box-shadow .22s ease;
}
.lw-price:hover{transform:translateY(-5px);box-shadow:var(--lw-shadow)}
.lw-price.is-featured{
  border-color:rgba(63,169,229,.55);
  background:linear-gradient(#ffffff,#f3fbff);
  box-shadow:0 0 0 3px rgba(63,169,229,.12),var(--lw-shadow);
}
.lw-price-flag{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  padding:5px 16px;border-radius:var(--lw-radius-pill);
  font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:linear-gradient(#9ee65a,#63bd17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 16px rgba(78,164,16,.3);
  white-space:nowrap;
}
.lw-price h3{font-size:1.15rem;margin-bottom:6px}
.lw-price-sub{font-size:.85rem;color:var(--lw-muted);margin-bottom:20px;min-height:40px}
.lw-price-amount{display:flex;align-items:baseline;gap:5px;margin-bottom:4px}
.lw-price-amount strong{font-size:2.5rem;font-weight:800;color:var(--lw-deep);letter-spacing:-.03em}
.lw-price-amount span{font-size:.92rem;color:var(--lw-muted);font-weight:600}
.lw-price-per{font-size:.8rem;color:var(--lw-muted);margin-bottom:22px}
.lw-price ul{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:11px}
.lw-price li{display:flex;gap:10px;font-size:.9rem;line-height:1.45}
.lw-price li::before{
  content:"\2713";flex-shrink:0;
  width:19px;height:19px;margin-top:1px;display:grid;place-items:center;
  border-radius:50%;font-size:.66rem;font-weight:800;color:#fff;
  background:linear-gradient(#9ee65a,#63bd17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.lw-price li.muted{color:var(--lw-muted)}
.lw-price li.muted::before{content:"\2013";background:#dbe7ef;color:#8ba4b8;box-shadow:none}
.lw-price .lw-btn{margin-top:auto}

.lw-price-footnote{
  margin-top:34px;padding:18px 22px;border-radius:var(--lw-radius);
  border:1px dashed rgba(63,169,229,.42);background:#f4fbfe;
  font-size:.88rem;color:var(--lw-muted);text-align:center;
}

/* ============================================================
   Stimmen
   ============================================================ */
.lw-voices{background:linear-gradient(180deg,#ffffff,#f2fafe)}
.lw-voice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:20px}
.lw-voice{
  display:flex;flex-direction:column;
  padding:26px 24px;border-radius:var(--lw-radius);
  border:1px solid var(--lw-line);background:var(--lw-paper);
  box-shadow:var(--lw-shadow-sm);
}
.lw-voice-stars{color:var(--lw-sun);font-size:1rem;letter-spacing:2px;margin-bottom:13px}
.lw-voice p{font-size:.93rem;color:var(--lw-ink);margin-bottom:20px;flex:1}
.lw-voice-who{display:flex;align-items:center;gap:11px}
.lw-voice-who i{
  width:38px;height:38px;flex-shrink:0;display:grid;place-items:center;
  border-radius:50%;font-style:normal;font-size:1.05rem;
  background:linear-gradient(#e2f3fd,#bce2f6);box-shadow:inset 0 1px 0 #fff;
}
.lw-voice-who strong{display:block;font-size:.9rem;color:var(--lw-ink)}
.lw-voice-who small{font-size:.78rem;color:var(--lw-muted)}

/* Sichtbarer Demo-Hinweis: Platzhalter, keine echten Bewertungen */
.lw-demo-banner{
  display:flex;align-items:center;gap:12px;justify-content:center;
  max-width:760px;margin:0 auto 36px;padding:13px 20px;
  border-radius:var(--lw-radius);border:1px dashed #f0c36b;
  background:#fff9ec;color:#8a6118;font-size:.87rem;font-weight:600;text-align:left;
}
.lw-demo-banner b{font-size:1.1rem}

/* ============================================================
   FAQ
   ============================================================ */
.lw-faq{max-width:800px;margin-inline:auto;display:grid;gap:12px}
.lw-faq details{
  border-radius:var(--lw-radius);border:1px solid var(--lw-line);
  background:var(--lw-paper);box-shadow:var(--lw-shadow-sm);
  overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;
}
.lw-faq details[open]{border-color:rgba(63,169,229,.45);box-shadow:var(--lw-shadow)}
.lw-faq summary{
  display:flex;align-items:center;gap:14px;
  padding:19px 22px;cursor:pointer;list-style:none;
  font-weight:700;color:var(--lw-ink);font-size:.98rem;
}
.lw-faq summary::-webkit-details-marker{display:none}
.lw-faq summary::after{
  content:"+";margin-left:auto;flex-shrink:0;
  width:26px;height:26px;display:grid;place-items:center;
  border-radius:50%;font-size:1.1rem;font-weight:700;color:var(--lw-deep);
  background:#e9f5fd;transition:background .22s ease;
}
.lw-faq details[open] summary::after{content:"\2013";background:linear-gradient(#7fd0f5,#2b95d4);color:#fff}
.lw-faq .lw-faq-body{padding:0 22px 21px;font-size:.92rem;color:var(--lw-muted);line-height:1.65}

/* ============================================================
   Anmelden / Registrieren
   ============================================================ */
.lw-signup{
  position:relative;overflow:hidden;
  background:
    radial-gradient(900px 480px at 15% 0%,rgba(126,209,47,.24),transparent 60%),
    radial-gradient(900px 520px at 88% 100%,rgba(65,214,195,.28),transparent 62%),
    linear-gradient(160deg,#0f5686 0%,#1c7cb5 46%,#2f9fd8 100%);
  color:#eaf7ff;
}
.lw-signup h2,.lw-signup h3{color:#fff}
.lw-signup-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(32px,5vw,60px);align-items:center}
.lw-signup-copy h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:16px}
.lw-signup-copy p{color:rgba(234,247,255,.86);font-size:1.05rem;margin-bottom:26px;max-width:48ch}
.lw-signup-list{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.lw-signup-list li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:rgba(234,247,255,.94)}
.lw-signup-list li b{
  width:24px;height:24px;flex-shrink:0;display:grid;place-items:center;
  border-radius:50%;font-size:.75rem;color:#0f5686;
  background:linear-gradient(#ffffff,#cfeaf9);box-shadow:inset 0 -1px 0 rgba(0,0,0,.06);
}

.lw-card{
  padding:30px 28px;border-radius:var(--lw-radius-lg);
  border:1px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.96);
  box-shadow:var(--lw-shadow-lg);
  color:var(--lw-body);
}
.lw-card h3{font-size:1.25rem;margin-bottom:6px}
.lw-card-sub{font-size:.88rem;color:var(--lw-muted);margin-bottom:22px}

.lw-tabs{display:flex;gap:4px;padding:4px;margin-bottom:22px;border-radius:var(--lw-radius-pill);background:#eef6fb;border:1px solid var(--lw-line)}
.lw-tabs button{
  flex:1;min-height:38px;border:0;border-radius:var(--lw-radius-pill);
  font-size:.88rem;font-weight:700;color:var(--lw-muted);background:transparent;cursor:pointer;
  transition:color .18s ease,background .18s ease;
}
.lw-tabs button.is-active{color:#fff;background:linear-gradient(#7fd0f5,#2b95d4);box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}

.lw-field{margin-bottom:15px}
.lw-field label{display:block;font-size:.82rem;font-weight:700;color:var(--lw-ink);margin-bottom:6px}
.lw-label-hint{font-weight:600;color:var(--lw-muted)}
.lw-field input,.lw-field select{
  width:100%;min-height:46px;padding:0 14px;
  border:1px solid var(--lw-line);border-radius:12px;
  background:var(--lw-paper-soft);color:var(--lw-ink);
  box-shadow:inset 0 2px 4px rgba(16,68,105,.05);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.lw-field input:focus,.lw-field select:focus{
  outline:none;border-color:var(--lw-sky);background:#fff;
  box-shadow:inset 0 2px 4px rgba(16,68,105,.04),var(--lw-glow);
}
.lw-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lw-check{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:var(--lw-muted);margin:18px 0 20px;line-height:1.5}
.lw-check input{width:18px;height:18px;flex-shrink:0;margin-top:1px;accent-color:var(--lw-sky)}
.lw-form-note{margin-top:15px;font-size:.78rem;color:var(--lw-muted);text-align:center;line-height:1.5}
.lw-form-error{
  display:none;margin-bottom:16px;padding:11px 14px;border-radius:11px;
  border:1px solid #f3c0b8;background:#fdf0ee;color:#b64434;font-size:.84rem;font-weight:600;
}
.lw-form-error.is-visible{display:block}

/* ============================================================
   Fusszeile
   ============================================================ */
.lw-footer{padding:56px 0 32px;background:#0c3e63;color:rgba(219,238,250,.72);font-size:.88rem}
.lw-footer a{color:rgba(219,238,250,.72)}
.lw-footer a:hover{color:#fff}
.lw-footer-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:34px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.13)}
.lw-footer h4{color:#fff;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:15px}
.lw-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.lw-footer-about p{margin:14px 0 0;max-width:38ch;line-height:1.6}
.lw-footer .lw-logo-name{color:#fff}
.lw-footer .lw-logo-name em{color:var(--lw-sky-light)}
.lw-footer .lw-logo-claim{color:rgba(219,238,250,.55)}
.lw-footer-base{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;padding-top:22px;font-size:.82rem}

/* ============================================================
   Einblenden beim Scrollen
   ============================================================ */
.lw-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.lw-reveal.is-in{opacity:1;transform:none}

/* ============================================================
   Anpassung an kleine Geraete
   ============================================================ */
@media (max-width:980px){
  .lw-hero-grid{grid-template-columns:1fr}
  .lw-hero-art{order:-1;max-width:560px;margin-inline:auto;width:100%}
  .lw-float-a,.lw-float-b{display:none}
  .lw-signup-grid{grid-template-columns:1fr}
  .lw-footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .lw-nav{
    position:fixed;inset:74px 0 auto;flex-direction:column;align-items:stretch;gap:2px;
    margin:0;padding:14px 20px 22px;
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--lw-line);
    box-shadow:0 18px 40px rgba(16,68,105,.14);
    transform:translateY(-140%);transition:transform .28s ease;
  }
  .lw-nav.is-open{transform:none}
  .lw-nav a{padding:13px 15px;font-size:1rem}
  .lw-burger{display:flex;margin-left:auto;order:2}
  .lw-header-actions{order:3}
  .lw-header-actions .lw-btn-ghost{display:none}
  .lw-stats{grid-template-columns:1fr;max-width:none}
  .lw-stat{display:flex;align-items:baseline;gap:10px}
  .lw-stat strong{font-size:1.3rem}
}
@media (max-width:600px){
  :root{--lw-shell:calc(100vw - 32px)}
  .lw-classroom-body{grid-template-columns:1fr}
  .lw-roster{border-left:0;border-top:1px solid var(--lw-line);grid-template-columns:1fr 1fr;display:grid}
  .lw-roster-title{grid-column:1/-1}
  .lw-board-tools{left:12px}
  .lw-hero-cta{flex-direction:column}
  .lw-hero-cta .lw-btn{width:100%}
  .lw-field-row{grid-template-columns:1fr}
  .lw-footer-grid{grid-template-columns:1fr;gap:26px}
  .lw-card{padding:24px 20px}
}

@media (prefers-reduced-motion:reduce){
  .lw-bubbles i,.lw-float-card,.lw-face.raised i{animation:none}
  .lw-reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* Restored landing: defensive responsive rules for very narrow phones. */
@media (max-width:480px){
  .lw-header-inner{gap:8px;min-width:0}
  .lw-logo{min-width:0;flex:1}
  .lw-logo-text{min-width:0}
  .lw-logo-claim{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
  .lw-header-actions{flex:0 0 auto}
  .lw-header-actions .lw-btn-primary{padding-inline:12px;font-size:.82rem}
  .lw-burger{flex:0 0 auto}
  .lw-nav{inset-inline:0;padding-inline:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .lw-hero{overflow:hidden}
  .lw-classroom{min-width:0;width:100%}
  .lw-classroom-bar{min-width:0}
  .lw-classroom-bar strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lw-roster{grid-template-columns:1fr}
  .lw-roster-title{grid-column:auto}
  .lw-price-grid,.lw-subject-grid,.lw-feature-grid,.lw-voice-grid{grid-template-columns:minmax(0,1fr)}
  .lw-footer-base{flex-direction:column}
}