/* =====================================================================
   3D Highspeed Learning – Theme-Design „Ruhige Tiefe"
   Helle, vertrauensbildende Seite mit dezenter räumlicher Tiefe.
   ===================================================================== */

:root{
  /* --blue-600 war bis zum 05.10.2026 #0787bc. Auf Weiss ergab das 4.04:1,
     auf Creme 3.75:1 - unter den 4.5:1, die normaler Text braucht. Betroffen
     war alles, was diese Farbe TRAEGT: jeder Verweis, die kleine Zeile ueber
     den Ueberschriften und der weisse Text auf dem blauen Knopf (dort gilt
     dasselbe Verhaeltnis, nur umgekehrt). #0677a5 ist dieselbe Farbe, eine
     Spur tiefer: 5.01:1 auf Weiss, 4.65:1 auf Creme. */
  --ink:#16242e; --blue-900:#0a3d57; --blue-600:#0677a5; --blue-400:#3aa6d8;
  --orange:#d88c3d;
  --paper:#ffffff; --cream:#faf6ef; --cream-2:#f3ece1;
  --muted:#5d6a72; --line:#e9e2d6;
  --maxw:1140px; --r:16px; --r-sm:11px;
  /* Schriften als Variable, damit die chinesische Fassung lesbar bleibt:
     Fraunces und Inter enthalten keine CJK-Zeichen, der Browser holt sie
     zeichenweise aus den nachgestellten CJK-Schriften. */
  --ff-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --ff-display:"Fraunces",Georgia,"Times New Roman","Noto Serif SC","Songti SC","SimSun",serif;
  --shadow-1:0 1px 2px rgba(16,36,46,.06),0 6px 20px rgba(16,36,46,.07);
  --shadow-2:0 2px 6px rgba(16,36,46,.08),0 18px 48px rgba(16,36,46,.14);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ff-sans);
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
h1,h2,h3{font-family:var(--ff-display);font-weight:600;line-height:1.12;letter-spacing:-.015em;margin:0}
p{margin:0 0 1rem}
a{color:var(--blue-600);text-decoration:none}
a:hover{color:var(--blue-900)}
img{max-width:100%;height:auto}
.site-main{flex:1}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-600);margin:0 0 14px}
.eyebrow.amber{color:var(--orange)}
.lead{font-size:20px;line-height:1.6;color:var(--muted)}
.muted{color:var(--muted)}
.measure{max-width:62ch}
.center{text-align:center}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--ff-sans);font-weight:600;font-size:16px;
  padding:14px 26px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
.btn-primary,.btn:not(.btn-ghost):not(.btn-light){
  background:linear-gradient(135deg,var(--blue-600),var(--blue-900));color:#fff;box-shadow:0 8px 22px rgba(7,135,188,.32)}
.btn-primary:hover,.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(7,135,188,.42);filter:brightness(1.05);color:#fff}
.btn-ghost{background:transparent;color:var(--blue-900);border:1.5px solid #cfdbe2}
.btn-ghost:hover{border-color:var(--blue-600);color:var(--blue-600);transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--blue-900)}
.btn-light:hover{color:var(--blue-900)}
.btn-sm{padding:9px 16px;font-size:14px}

/* Header */
header.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.admin-bar header.site{top:32px}
/* min-height, nicht height: Bricht die Zeile doch einmal um - eine
   laengere Marke, eine andere Sprache -, wird der Kopf hoeher, statt
   dass die zweite Zeile unten herauslaeuft. Genau das war am
   16.09.2026 der sichtbare Fehler, bevor „Mein Bereich" die Zeile
   wieder kurz genug machte. */
.nav{display:flex;align-items:center;gap:22px;min-height:72px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand .logo{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,var(--blue-400),var(--blue-900));
  display:grid;place-items:center;box-shadow:var(--shadow-1);flex:none}
.brand strong{display:block;font-family:var(--ff-display);font-size:18px;letter-spacing:-.01em;line-height:1.1}
.brand small{display:block;font-size:11px;color:var(--muted)}
/* Das Menue beginnt dicht an der Marke und nimmt den Rest der Zeile ein;
   nach rechts geschoben wird nur noch die Konto-Gruppe. Vorher trug
   .links selbst margin-left:auto – dadurch klaffte zwischen Logo und
   „Die Methode“ eine Luecke von mehreren hundert Pixeln. */
.links{flex:1 1 auto;margin-left:2px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.konto-gruppe{display:flex;align-items:center;gap:6px;margin-left:auto}
.links a{color:#33424b;font-size:15px;font-weight:500;padding:9px 11px;border-radius:9px}
.links a:hover{background:var(--cream);color:var(--blue-900)}
/* Seite, auf der man gerade steht. Der Balken unterscheidet sie vom
   Ueberfahren mit der Maus – sonst sähen beide Zustände gleich aus.
   Knöpfe (.btn) sind ausgenommen, sie haben ihre eigene Farbe. */
.links a:not(.btn)[aria-current="page"]{
  background:var(--cream);color:var(--blue-900);font-weight:600;
  box-shadow:inset 0 -2px 0 var(--blue-600);
}
.links a.btn{color:#fff}
.links a.btn-ghost{color:var(--blue-900)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid #cfdbe2;color:var(--ink);border-radius:8px;padding:6px 10px;font-size:16px;cursor:pointer}
@media(max-width:880px){
  /* Das aufgeklappte Menue braucht eine eigene Zeile. Ohne flex-wrap blieb es
     als Flex-Element in der Kopfzeile stecken und wurde auf den Platz neben
     dem Logo zusammengedrueckt (124 statt 327 px); die feste Hoehe von 72 px
     zusammen mit align-items:center schob es zur Haelfte ueber den oberen
     Bildschirmrand – die ersten vier Eintraege waren unerreichbar.
     Gemeldet am 09.09.2026 von Testpersonen mit iPhone und iPad. */
  .nav{flex-wrap:wrap;height:auto;min-height:72px}
  /* Umbrochen werden soll NUR das Menue. Marke und Hamburger gehoeren in die
     erste Zeile: flex-basis 0 laesst die Marke schrumpfen, statt die Taste auf
     eine zweite Zeile zu draengen (genau das tat vorher das erzwungene
     nowrap – nur eben auch mit dem Menue). */
  .brand{flex:1 1 0;min-width:0}
  .nav-toggle{display:block;flex:0 0 auto}
  /* nowrap ist Pflicht: .links traegt fuer die Desktop-Zeile flex-wrap:wrap.
     In einer Spalte mit Hoehendeckel (unten) bricht das die Liste in ZWEI
     Spalten um – die Eintraege waren dann halb so breit und die hintere
     Haelfte ausserhalb des Kastens. */
  .links{display:none;width:100%;margin-left:0;flex-direction:column;flex-wrap:nowrap;align-items:stretch;padding-bottom:12px}
  /* In der Spalte waeren zwei Knoepfe nebeneinander zu schmal. */
  .konto-gruppe{width:100%;flex-direction:column;align-items:stretch;margin-left:0;gap:6px}
  /* Auf kleinen Bildschirmen ist die Liste hoeher als das Fenster. Der Kopf
     ist sticky – ohne Deckel liesse sich sein unteres Ende nie erreichen. */
  .links.open{display:flex;max-height:70vh;overflow-y:auto}
}

/* Klappmenue in der Kopfzeile (Sehtest, Lerntest, Legasthenie).
   Der Kopf sieht aus wie ein Menueeintrag, ist aber ein <button> – nur der
   laesst sich mit der Tastatur bedienen und meldet mit aria-expanded, ob die
   Liste offen ist. */
.klapp{position:relative}
.klapp-kopf{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:500;color:#33424b;padding:9px 11px;border-radius:9px}
.klapp-kopf:hover{background:var(--cream);color:var(--blue-900)}
.klapp-aktiv>.klapp-kopf{background:var(--cream);color:var(--blue-900);font-weight:600;
  box-shadow:inset 0 -2px 0 var(--blue-600)}
.klapp-pfeil{font-size:11px;line-height:1;transition:transform .15s ease}
.klapp[data-offen="1"] .klapp-pfeil{transform:rotate(180deg)}
.klapp-liste{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:190px;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-2);padding:6px;z-index:70}
.klapp[data-offen="1"] .klapp-liste{display:block}
/* Zwischen Knopf und Kaertchen liegen 6 px Luft. Faehrt die Maus dort
   durch, liegt darunter die Kopfzeile statt des Klappmenues – .klapp
   verliert seinen :hover-Zustand und die Liste verschwindet, bevor man
   einen Eintrag erreicht. Gemeldet am 14.09.2026: „es zeigt die Seiten
   an, aber ich kann keine auswaehlen."
   Dieses unsichtbare Stueck ueberbrueckt die Luecke. Es gehoert zur
   Liste, haelt also den Hover – und ist 10 px hoch, also hoeher als die
   6 px, die es zu ueberbruecken gilt. */
.klapp-liste::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.klapp-liste a{display:block;padding:9px 12px;border-radius:8px;white-space:nowrap;
  font-size:15px;font-weight:500;color:#33424b}
.klapp-liste a:hover{background:var(--cream);color:var(--blue-900)}
.klapp-liste a[aria-current="page"]{background:var(--cream);color:var(--blue-900);font-weight:600}
/* Nur wo es einen Mauszeiger gibt: Auf dem Handy wuerde „hover" am Finger
   kleben bleiben und die Liste liesse sich nicht mehr schliessen. */
@media(hover:hover){.klapp:hover .klapp-liste{display:block}}
@media(max-width:880px){
  /* In der Spalte klappt die Liste nach unten auf, statt darueber zu schweben. */
  .klapp{width:100%}
  .klapp-kopf{width:100%;justify-content:space-between}
  .klapp-liste{position:static;box-shadow:none;border:0;border-left:2px solid var(--line);
    border-radius:0;margin:2px 0 6px 12px;padding:0 0 0 10px;min-width:0}
  @media(hover:hover){.klapp:hover .klapp-liste{display:none}}
  .klapp[data-offen="1"] .klapp-liste{display:block}
}

/* Hero */
.hero{position:relative;overflow:hidden;
  background:radial-gradient(1100px 520px at 78% -8%, #e9f4fb 0%, rgba(233,244,251,0) 60%),
             linear-gradient(180deg,#fcfaf6 0%,#ffffff 70%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;padding:80px 0 88px}
@media(max-width:920px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:40px;padding:54px 0 60px}}
.hero h1{font-size:clamp(38px,5.4vw,62px);font-weight:600}
.hero h1 .accent{color:var(--blue-600);font-style:italic;font-weight:500}
.hero p.sub{font-size:20px;color:var(--muted);margin:22px 0 30px;max-width:30em}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .micro{margin-top:18px;font-size:14px;color:var(--muted)}
.hero .micro b{color:var(--blue-900)}

/* Player-Demo-Rahmen */
.demo-frame{position:relative;border-radius:22px;padding:12px;background:linear-gradient(160deg,#13202b,#0a1620);
  box-shadow:var(--shadow-2);border:1px solid rgba(255,255,255,.08)}
.demo-frame .bar{display:flex;align-items:center;gap:7px;padding:4px 6px 10px}
.demo-frame .bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.25);display:block}
/* 16/9, nicht 16/10: Die Buehne war auf das Seitenverhaeltnis der
   gezeichneten Attrappe gelegt, die Filme sind aber 16/9. Der Unterschied
   sah aus wie ein zu kleiner Film in einem zu grossen Kasten - mit
   schwarzen Streifen oben und unten. (15.09.2026) */
.demo-stage{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.5px) 0 0/8px 8px,
    radial-gradient(900px 300px at 50% 120%, rgba(58,166,216,.25), transparent 60%),#0a1620}
.demo-stage .page{width:60%;aspect-ratio:1.45;border-radius:8px;background:linear-gradient(180deg,#fbfbf8,#eef0ea);
  box-shadow:0 30px 60px rgba(0,0,0,.55),0 6px 14px rgba(0,0,0,.4);
  transform:perspective(900px) rotateX(6deg) rotateY(-9deg);position:relative;overflow:hidden}
.demo-stage .page::before{content:"";position:absolute;inset:14% 12%;
  background:repeating-linear-gradient(180deg,#c9cdc2 0 2px,transparent 2px 9px);opacity:.5}
.demo-caption{position:absolute;top:18px;left:18px;background:rgba(255,255,255,.92);color:var(--ink);
  font-size:12.5px;font-weight:600;border-radius:8px;padding:6px 11px;box-shadow:var(--shadow-1)}
/* Der Wiedergabe-Knopf aus dem urspruenglichen Entwurf („● Wiedergabe · 1
   Seite pro Sekunde"). Das Theme setzt ihn nirgends – in den Elementor-Daten
   der Startseite steht er aber noch, und weil sein Text dort entfernt wurde,
   blieb unter dem Film ein leerer Kreis stehen: left:50%, bottom:14px.
   Am 15.09.2026 abbestellt.

   Die Regel verschwindet nicht einfach, sie blendet aus. Die Auszeichnung
   liegt in der Datenbank; wegnehmen laesst sie sich nur in Elementor. Beide
   Schreibweisen, weil der Entwurf `play` benutzte und das Theme `demo-play`. */
.demo-stage .demo-play,
.demo-stage .play{display:none}

/* Trust */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.trust .row{display:flex;flex-wrap:wrap;gap:18px 44px;justify-content:center;padding:20px 0;font-size:14px;color:var(--muted);font-weight:500}
.trust .row span{display:inline-flex;align-items:center;gap:9px}

/* Sections */
section.block{padding:96px 0}
section.cream{background:var(--cream)}
.section-head{max-width:50rem;margin:0 auto 54px;text-align:center}
.section-head h2{font-size:clamp(28px,3.6vw,42px)}
.section-head p{margin-top:14px;font-size:19px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:54px;align-items:center}
@media(max-width:880px){.split{grid-template-columns:minmax(0,1fr);gap:34px}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow-1)}
.compare{display:grid;gap:14px}
.compare .item{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow-1)}
.compare .ic{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:18px}
.compare .slow .ic{background:#f7e7e7;color:#b5524f}
.compare .fast .ic{background:#e6f3da;color:#4f8a2e}
.compare h4{margin:0 0 3px;font-family:var(--ff-sans);font-size:16px;font-weight:700}
.compare p{margin:0;font-size:14.5px;color:var(--muted)}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media(max-width:880px){.steps{grid-template-columns:minmax(0,1fr)}}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;box-shadow:var(--shadow-1);transition:transform .18s,box-shadow .18s}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.step .n{font-family:var(--ff-display);font-size:15px;font-weight:600;color:#fff;width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;background:linear-gradient(135deg,var(--blue-400),var(--blue-900));margin-bottom:18px}
.step h3{font-size:21px;margin-bottom:8px}
.step p{margin:0;font-size:15.5px;color:var(--muted)}

/* Demo-Video (sitzt in .demo-stage – Hero der Startseite und Anleitung)
   Auch ohne Klasse: Auf der Startseite kommt die Auszeichnung aus Elementor,
   und was dort eingesetzt wird, traegt die Klasse nicht zwingend. Ohne diese
   Regel nimmt das <video> seine eigene Groesse (1920 Pixel) und wird vom
   overflow:hidden der Buehne beschnitten.
   object-fit bleibt contain: Ein Film mit anderem Verhaeltnis bekommt lieber
   einen Streifen als einen Beschnitt – abgeschnittene Schrift ist schlimmer
   als ein Rand. */
.demo-stage video,
.demo-video{display:block;width:100%;height:100%;object-fit:contain;background:#000;border-radius:10px}
/* Die gezeichnete Buch-Attrappe tritt zurueck, sobald ein echter Film daneben
   liegt – sonst schimmert sie unter dem Film hervor. Hier reicht die Bedingung:
   ohne Film ist die Attrappe das Bild. */
.demo-stage:has(video) .page{display:none}

/* Wissenschaft */
.quote{font-family:var(--ff-display);font-size:24px;line-height:1.4;color:var(--ink);border-left:3px solid var(--orange);padding-left:22px;font-style:italic}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}
@media(max-width:620px){.facts{grid-template-columns:minmax(0,1fr)}}
.fact{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;text-align:center;box-shadow:var(--shadow-1)}
.fact b{display:block;font-family:var(--ff-display);font-size:34px;color:var(--blue-900)}
.fact span{font-size:13.5px;color:var(--muted)}

/* Testimonials */
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media(max-width:880px){.tgrid{grid-template-columns:minmax(0,1fr)}}
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--shadow-1)}
.tcard .stars{color:var(--orange);letter-spacing:2px;font-size:15px}
.tcard p{font-size:16px;margin:12px 0 18px}
.tcard .who{display:flex;align-items:center;gap:12px}
.tcard .ava{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--blue-400),var(--blue-900));flex:none}
.tcard .who b{font-family:var(--ff-sans);font-size:15px}
.tcard .who span{font-size:13px;color:var(--muted)}

/* Gründer · 23.09.2026: Das Porträt füllte eine ganze Rasterspalte (418 px im
   Quadrat) und zog den Blick von der Überschrift weg. Jetzt feste, schmale
   Spalte und oben ausgerichtet – der Text beginnt auf gleicher Höhe. */
.founder{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:44px;align-items:start}
/* Die frei gewordene Breite darf nicht in die Zeilenlaenge wandern: gleiches
   Mass wie .measure, sonst werden die Absaetze zu breit zum Lesen. */
.founder .portrait+div{max-width:62ch}
@media(max-width:880px){.founder{grid-template-columns:minmax(0,1fr)}}
.founder .portrait{aspect-ratio:1;max-width:260px;border-radius:20px;border:1px solid var(--line);display:grid;place-items:center;
  color:#90a4b0;font-size:14px;text-align:center;box-shadow:var(--shadow-1);background:repeating-linear-gradient(135deg,#eef4f8 0 18px,#e7eef3 18px 36px)}

/* Preise */
.plans{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;max-width:860px;margin:0 auto}
@media(max-width:760px){.plans{grid-template-columns:minmax(0,1fr)}}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px;box-shadow:var(--shadow-1);position:relative}
.plan.feature{border:1.5px solid var(--blue-400);box-shadow:var(--shadow-2)}
/* Weisse Schrift auf dem hellen Orange erreicht nur 2.7:1 – für ein 12px-Etikett
   zu wenig (nötig 4.5:1). Dunklerer Ton mit 4.5:1, Orange bleibt erkennbar. */
.plan .tag{position:absolute;top:-12px;right:22px;background:#a96722;color:#fff;font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px}
.plan h3{font-size:22px}
.plan .price{font-family:var(--ff-display);font-size:40px;margin:10px 0 2px}
.plan .price small{font-size:15px;color:var(--muted);font-family:var(--ff-sans)}
.plan ul{list-style:none;padding:0;margin:18px 0 24px;display:grid;gap:11px}
.plan li{display:flex;gap:10px;font-size:15px;color:#33424b}
.plan li svg{flex:none;margin-top:3px}

/* FAQ */
.faq{max-width:760px;margin:0 auto;display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:18px 22px;box-shadow:var(--shadow-1)}
.faq summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blue-600);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:14px 0 0;color:var(--muted);font-size:15.5px}

/* CTA-Band */
.cta-band{background:linear-gradient(135deg,var(--blue-900),#072c40);color:#fff;text-align:center;border-radius:24px;padding:60px 30px;box-shadow:var(--shadow-2);position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.5px) 0 0/9px 9px;opacity:.5}
.cta-band>*{position:relative;z-index:2}
.cta-band h2{color:#fff;font-size:clamp(26px,3.4vw,38px)}
.cta-band p{color:#bcd2df;max-width:44ch;margin:14px auto 26px}

/* Ankernavigation oben auf langen Seiten */
.hslt-seitennav a{text-decoration:none}

/* Der Lerntest, eingebettet auf seiner eigenen Seite.
   allowfullscreen ist Pflicht: Der Test ruft beim Start requestFullscreen()
   auf. Ohne das Attribut bliebe er im Rahmen – und ein Stereogramm, das auf
   Rahmengroesse geschrumpft wird, laesst sich nicht mehr fusionieren. */
.hslt-lerntest-rahmen{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow-1);background:#fff;
}
.hslt-lerntest-frame{display:block;width:100%;height:85vh;min-height:560px;border:0}
/* Auf dem Handy ist 85vh zu wenig fuer die Einleitung im Rahmen. */
@media(max-width:700px){.hslt-lerntest-frame{height:92vh;min-height:520px}}

/* Platzhalter-Markierungen */
.placeholder{border:2px dashed var(--orange);background:#fdf6ec;border-radius:var(--r-sm);padding:16px;color:#9a6620;font-size:13.5px;margin:14px 0}
.placeholder strong{display:block;margin-bottom:4px;text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:var(--orange)}
.placeholder-img{display:grid;place-items:center;min-height:160px;text-align:center;border:2px dashed #9ccbe3;background:#eef7fc;border-radius:var(--r-sm);color:#15688e;font-size:13.5px;margin:14px 0;padding:18px}

/* Einfache Inhaltsseiten (Recht, Mitglieder) */
.page-content{padding:54px 0}
.page-content .inner{max-width:820px;margin:0 auto}
.page-content h1{font-size:clamp(28px,3.6vw,40px);margin-bottom:18px}
/* Die Inhaltsvorlagen beginnen mit <section class="block"> und bringen deren
   96 px Innenabstand oben mit. Auf einer Seite MIT Titelzeile kommen die zu
   den 54 px von .page-content und den 18 px unter der Ueberschrift hinzu –
   zwischen Titel und erstem Satz klafften so 130 px. Gemeldet am 14.09.2026
   fuer den Lerntest, betraf aber jede Seite aus einer Vorlage.
   Ohne Innenabstand faellt der Abstand des ersten Absatzes mit dem der
   Ueberschrift zusammen; es bleiben deren 18 px – genau der Wert, fuer den
   die Titelzeile gemacht ist. */
.page-content section.block:first-of-type{padding-top:0}
.legal h2{font-size:20px;margin:28px 0 10px}
.legal h3{font-size:16px}
.legal ul,.legal ol{padding-left:22px}
.legal li{margin-bottom:6px}

/* Footer */
footer.site{background:#0c1d29;color:#9fb2bd;padding:60px 0 26px;margin-top:auto}
.fcols{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:30px}
@media(max-width:760px){.fcols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.brand-footer{margin-bottom:14px}
.brand-footer .logo{width:36px;height:36px}
.brand-footer strong{color:#fff;font-family:var(--ff-display);font-size:17px}
footer.site h5{color:#fff;font-family:var(--ff-sans);font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 14px}
footer.site a{display:block;color:#9fb2bd;font-size:14.5px;padding:5px 0}
footer.site a:hover{color:#fff}
footer.site .muted{color:#9fb2bd}
.fbar{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:#7f95a2}

/* Vorschau-Hinweis (Soft-Launch) */
/* Der Balken wird seit dem 14.09.2026 nicht mehr ausgegeben (siehe
   header.php). Die Regel bleibt, falls er zurueckkommt – aber mit
   z-index UNTER der Kopfzeile (60): Auf 70 lag er ueber dem
   aufgeklappten Menue und verdeckte dessen ersten Eintrag. */
.hslt-test-bar{background:#7a1f1f;color:#fff;text-align:center;font-size:13.5px;font-weight:700;letter-spacing:.04em;padding:9px 16px;position:sticky;top:0;z-index:50}
.hslt-preview-bar{background:#fdf6ec;border-bottom:1px solid #eed9b8;color:#8a5a14;text-align:center;font-size:13.5px;font-weight:600;padding:8px 16px}

/* Sprachumschalter (WPML/Polylang) – die Kopfzeile baut ihre Links selbst,
   deshalb bringt das Theme einen eigenen Umschalter mit. */
.hslt-langs{display:flex;gap:2px;align-items:center;margin-left:8px;padding-left:10px;border-left:1px solid var(--line)}
.hslt-lang{font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--muted);
  padding:6px 7px;border-radius:7px;line-height:1}
.hslt-lang:hover{background:var(--cream);color:var(--blue-900)}
.hslt-lang.is-active{color:var(--blue-900);background:var(--cream-2)}
@media(max-width:880px){
  .hslt-langs{margin-left:0;padding-left:0;border-left:0;border-top:1px solid var(--line);
    margin-top:8px;padding-top:10px}
}

/* Chinesische Fassung: dichtere Schrift braucht etwas mehr Zeilenluft,
   und die kursiven/gesperrten Auszeichnungen wirken bei CJK unsauber. */
html[lang^="zh"] body{line-height:1.85}
html[lang^="zh"] h1,html[lang^="zh"] h2,html[lang^="zh"] h3{letter-spacing:0;line-height:1.35}
html[lang^="zh"] .hero h1 .accent{font-style:normal}
html[lang^="zh"] .quote{font-style:normal}
html[lang^="zh"] .eyebrow,html[lang^="zh"] footer.site h5{letter-spacing:.04em}

/* ---------------------------------------------------------- Sehtest-Band
   Die Spielwiese kommt aus dem Plugin und bringt ihre eigene Gestaltung mit.
   Hier nur die Einbettung in die Startseite. */
.sehtest-band .hsl-uebung { margin-top:30px; }
.sehtest-band .hsl-u-teaserkopf { font-size:15.5px; }
.sehtest-band .hsl-u-mehr { margin-top:26px; }

/* ------------------------------------------- Ein Weg durch die Seiten
   Seit dem 14.09.2026 traegt jede Seite genau einen Verweis: den auf die
   naechste. Er sitzt unter einer duennen Linie am Fuss des Inhalts.
   Muss NACH .block stehen - sonst gewinnt dessen Innenabstand. */
.hslt-weiter { padding:0 0 76px; }
.hslt-weiter .wrap { border-top:1px solid var(--line); padding-top:26px;
                     display:flex; justify-content:flex-end; }
@media(max-width:620px){
  .hslt-weiter .wrap { display:block; }
  .hslt-weiter .btn  { width:100%; justify-content:center; }
}

/* Ein Verweis, der zu Text geworden ist. Bewusst ohne eigene Gestaltung:
   Er soll sich nicht als Knopf ausgeben, der nicht mehr reagiert. */
.hslt-kein-link { color:inherit; }

/* ==========================================================================
   WOOCOMMERCE · Konto, Warenkorb, Kasse            (16.09.2026)

   Anlass: Die Seite „Mein Konto" ist die Anmeldung, die echte Nutzer sehen –
   wp-login.php sieht fast nur der Betreiber. Sie kam bisher in WooCommerce-
   Grau daher, mitten in einer cremefarbenen Seite mit Fraunces-Ueberschriften.

   Die Auswahlketten sind absichtlich so lang wie die von WooCommerce: Dessen
   Stylesheet laedt nach diesem hier, und mit kuerzeren Ketten gaebe es einen
   Wettlauf, den man nur mit !important gewinnt.
   ========================================================================== */

/* Formularkarten: Anmelden und Registrieren nebeneinander */
.woocommerce form.login,
.woocommerce form.register,
.woocommerce-account .woocommerce form.checkout_coupon{
  border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;
  background:var(--paper);box-shadow:var(--shadow-1)}

/* Eingabefelder wie auf der Anmeldeseite */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text{
  border:1.5px solid #cfdbe2;border-radius:10px;padding:10px 12px;
  font-family:var(--ff-sans);font-size:16px;color:var(--ink);background:#fff;
  box-shadow:none;line-height:1.4}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-page form .form-row input.input-text:focus{
  border-color:var(--blue-600);box-shadow:0 0 0 3px rgba(7,135,188,.16);outline:0}
.woocommerce form .form-row label{color:var(--muted);font-size:14px;font-weight:500}
/* Das Pflichtfeld-Sternchen: Orange der Seite statt Signalrot. */
.woocommerce form .form-row .required,
.woocommerce .required{color:var(--orange);text-decoration:none;border:0}

/* Knoepfe wie .btn-primary */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ff-sans);font-weight:600;font-size:16px;line-height:1;
  padding:14px 26px;border-radius:999px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--blue-600),var(--blue-900));color:#fff;
  box-shadow:0 8px 22px rgba(7,135,188,.32);
  transition:transform .15s ease,box-shadow .15s ease;text-decoration:none}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover{
  background:linear-gradient(135deg,var(--blue-600),var(--blue-900));color:#fff;
  transform:translateY(-2px);box-shadow:0 12px 28px rgba(7,135,188,.38)}
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled]{
  background:#cfdbe2;color:#fff;box-shadow:none;transform:none}

/* „Angemeldet bleiben" braucht Luft zum Knopf */
.woocommerce form.login .woocommerce-form-login__rememberme{
  display:block;margin:4px 0 16px;color:var(--muted);font-size:14px}
.woocommerce form.login .lost_password{margin:12px 0 0}
.woocommerce form.login .lost_password a{color:var(--blue-600)}

/* Meldungen: Hinweis blau, Erfolg gruen, Fehler orange – wie sonst auch */
.woocommerce-info,.woocommerce-message,.woocommerce-error{
  border-top:0;border-radius:12px;background:var(--paper);
  border:1px solid var(--line);box-shadow:var(--shadow-1);color:var(--ink)}
.woocommerce-info{border-left:4px solid var(--blue-600)}
.woocommerce-message{border-left:4px solid #4f8a2e}
.woocommerce-error{border-left:4px solid var(--orange)}
.woocommerce-info::before,.woocommerce-message::before,.woocommerce-error::before{
  display:none}
.woocommerce-info,.woocommerce-message,.woocommerce-error{padding:16px 20px}

/* Kontomenue links */
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0}
.woocommerce-MyAccount-navigation li{margin:0 0 6px}
.woocommerce-MyAccount-navigation li a{
  display:block;padding:9px 14px;border-radius:10px;color:var(--blue-900);
  border:1px solid transparent}
.woocommerce-MyAccount-navigation li a:hover{background:var(--cream)}
.woocommerce-MyAccount-navigation li.is-active a{
  background:var(--cream);border-color:var(--line);font-weight:600}

@media (max-width:640px){
  .woocommerce form.login,.woocommerce form.register{padding:20px 16px}
  .woocommerce #respond input#submit,.woocommerce a.button,
  .woocommerce button.button,.woocommerce input.button{width:100%;justify-content:center}
}

/* =====================================================================
   Bilder und Kurzfilme in den Seiten (19.09.2026)
   Ein Tester fand die Seiten „zu viel Text, der visuell nicht abgehoben
   ist … sehr straight und nuechtern". Die Dateien liegen in
   assets/medien/ und kommen aus tools/make_seitenmedien.py.

   Markup-Regel: Jedes Bild und jeder Film steckt in einem EIGENEN <div>
   und steht mit ihm auf EINER Zeile. wpautop wickelt sonst ein <p> um das
   Bild oder haengt ein verwaistes </p> an - darunter klafft dann eine
   Leerzeile, die im Code niemand sieht.

   Zweite Regel, gleiche Ursache: Ein eingeruecktes „  </div>" auf eigener
   Zeile macht wpautop zu „</p></div>". Der Browser legt dafuer ein leeres
   <p> an, und in einem Raster (.split) wird daraus eine ganze Zusatzzeile
   mit 70 px Luft. Das steckt in den aelteren Vorlagen seit jeher (an der
   Live-Seite nachgemessen) und bleibt dort, damit sich nichts verschiebt.
   In den NEUEN Bausteinen haengen die </div> deshalb hinten an der Zeile
   davor.
   ===================================================================== */
.hslt-bild img,.hslt-bild video{
  display:block;width:100%;height:auto;border-radius:var(--r);
  background:var(--cream-2);box-shadow:var(--shadow-1)}
.hslt-bild video{aspect-ratio:16/9;object-fit:cover}
.hslt-bildtext{display:block;margin-top:10px;font-size:14px;line-height:1.5;color:var(--muted)}

/* Bild oben in einer Karte, randlos bis an die Kante. Der Innenradius ist
   um die 1px-Kante kleiner, sonst blitzt in den Ecken Weiss durch. */
.card>.hslt-kartenbild{margin:-22px -22px 18px}
.hslt-kartenbild img{
  display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;border-bottom:1px solid var(--line)}

/* Film: Den Knopf setzt assets/filme.js. Er sitzt OBEN rechts, weil unter
   dem Film die Bildunterschrift im selben Rahmen steht. */
.hslt-film{position:relative}
.hslt-film-knopf{
  position:absolute;top:12px;right:12px;width:36px;height:36px;padding:0;
  border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:rgba(11,26,38,.55);opacity:.7;transition:opacity .15s}
.hslt-film-knopf:hover,.hslt-film-knopf:focus-visible{opacity:1}
.hslt-film-knopf:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hslt-film-knopf::before{content:"";width:4px;height:12px;border-left:3px solid #fff;border-right:3px solid #fff}
.hslt-film-knopf[data-steht="1"]::before{
  width:0;height:0;border-right:0;border-left:11px solid #fff;
  border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}

/* Gratis-Buecher: Einstieg mit Bild daneben */
.hslt-biblio-einstieg{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:26px;align-items:center}
@media(max-width:760px){
  .hslt-biblio-einstieg{grid-template-columns:minmax(0,1fr)}
  .hslt-biblio-einstieg>.hslt-bild{order:-1}
}

/* Methode: Probier es aus - vier Saetze mit vertauschten Buchstaben, der
   erste und der letzte bleiben stehen. Bis zum 21.09.2026 war es ein Satz
   halb aus Ziffern; das fand der Betreiber zu schwer.
   40 oben und unten; unten fallen die 40 mit den 24 der naechsten
   Kartenreihe zusammen (Aussenabstaende von Geschwistern addieren sich
   nicht). */
.hslt-wortsalat{margin:40px 0;background:var(--cream);border:1px solid var(--line);
  border-radius:var(--r);padding:26px 28px;text-align:center}
.hslt-wortsalat .eyebrow{margin-bottom:10px}
.hslt-wortsalat-titel{font-size:clamp(22px,2.6vw,28px);margin:0 auto 10px;max-width:30ch;color:var(--ink)}
.hslt-wortsalat-hinweis{margin:0 auto;max-width:62ch;color:var(--muted);font-size:15.5px}
.hslt-wortsalat-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;margin-top:20px;text-align:left}
@media(max-width:760px){.hslt-wortsalat-liste{grid-template-columns:minmax(0,1fr)}}
.hslt-wortsalat-satz{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 18px}
.hslt-wortsalat-zeile{font-family:var(--ff-display);font-weight:600;
  font-size:clamp(18px,1.9vw,21px);line-height:1.45;color:var(--blue-900);margin:0 0 8px}
.hslt-wortsalat summary{cursor:pointer;display:inline-block;color:var(--blue-600);font-weight:600;font-size:14.5px}
.hslt-wortsalat details p{margin:8px 0 0;color:var(--muted);font-size:15.5px}