/* CyberOpa - cyberopa.at | Farbwelt: Navy #1A3A5C + Teal #00829A (Markenvorgabe), Senior-gerechte Typo ab 18px */
@font-face{font-family:'Public Sans';src:url('fonts/PublicSans.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('fonts/BricolageGrotesque.woff2') format('woff2');font-weight:200 800;font-display:swap}
:root{
  --navy:#1A3A5C;--navy-deep:#122A44;--navy-soft:#24486E;
  --teal:#00829A;--teal-ink:#006377;--teal-soft:#E4F2F5;
  --sun:#F7B32B;--sun-soft:#FFF3D2;--sun-ink:#6B4E00;
  --paper:#F7F9FA;--white:#FFFFFF;--ink:#1E2A38;--muted:#44586C;
  --line:#D9E2E9;--ok:#1B7A3D;--ok-soft:#E4F4E9;--warn:#B3261E;--warn-soft:#FBEAE9;
  --ff-head:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --ff-body:'Public Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --fs-sm:1rem;--fs-base:1.125rem;--fs-md:1.25rem;--fs-lg:1.5rem;
  --fs-xl:clamp(1.7rem,1.4rem + 1.2vw,2.2rem);
  --fs-2xl:clamp(2rem,1.6rem + 2vw,2.9rem);
  --fs-3xl:clamp(2.3rem,1.7rem + 3vw,3.6rem);
  --s1:.5rem;--s2:1rem;--s3:1.5rem;--s4:2rem;--s5:3rem;--s6:4.5rem;
  --radius:16px;--radius-sm:10px;--radius-lg:24px;
  --shadow:0 2px 6px rgba(18,42,68,.06),0 14px 34px rgba(18,42,68,.10);
  --shadow-sm:0 1px 3px rgba(18,42,68,.08);
  --nav-h:84px;--container:1180px;--reading:56rem;
  --ease:cubic-bezier(.25,.65,.35,1)}
*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px);-webkit-text-size-adjust:100%}
body{overflow-x:clip;font-family:var(--ff-body);font-size:var(--fs-base);line-height:1.7;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img,svg,picture{display:block;max-width:100%}img{height:auto}
h1,h2,h3,h4{font-family:var(--ff-head);line-height:1.15;letter-spacing:-.015em;color:var(--navy);overflow-wrap:break-word;hyphens:manual;text-wrap:balance}
p,li,dd,dt,label,figcaption{overflow-wrap:break-word;hyphens:auto}
a{color:var(--teal-ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--navy)}
ul,ol{list-style:none}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--sun-soft);color:var(--navy-deep)}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:.9rem 1.4rem;border-radius:0 0 var(--radius-sm) 0;z-index:300;text-decoration:none;font-weight:700}
.skip-link:focus{left:0}
.container{max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}
.reading{max-width:var(--reading);margin-inline:auto}

/* ── Header ─────────────────────────────────────── */
/* Header bewusst deckend (kein backdrop-filter): erzeugt sonst einen eigenen
   Containing-Block fuer das Off-Canvas-Menue und macht die Nav-Kontraste fuer
   Pruefwerkzeuge unbestimmbar. */
.site-header{position:sticky;top:0;z-index:120;background:var(--white);border-bottom:1px solid var(--line)}
.nav-row{position:relative;display:flex;align-items:center;gap:var(--s3);min-height:var(--nav-h)}
.brand{display:inline-flex;align-items:center;flex-shrink:1;min-width:0;text-decoration:none}
.brand img{width:auto;height:52px;max-width:calc(100vw - 150px)}
.site-nav{display:flex;align-items:center;margin-left:auto;min-width:0}
.nav-list{display:flex;align-items:center;gap:clamp(.4rem,1.2vw,1.1rem)}
.nav-list a{display:inline-flex;align-items:center;min-height:48px;padding:.35rem .65rem;font-family:var(--ff-head);font-weight:600;font-size:var(--fs-base);color:var(--navy);text-decoration:none;border-radius:var(--radius-sm);white-space:nowrap}
.nav-list a:hover{background:var(--teal-soft);color:var(--navy-deep)}
.nav-list a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2.5px;text-underline-offset:6px;text-decoration-color:var(--teal)}
.nav-cta{background:var(--teal);color:#fff!important;padding:.55rem 1.25rem!important;border-radius:999px;box-shadow:var(--shadow-sm)}
.nav-cta:hover{background:var(--teal-ink)!important;color:#fff!important}

/* Themen-Mega-Menue: die 24 Themen liegen aufgeraeumt in einem Ausklapp-Panel
   statt als Linkflut direkt in der Kopfzeile. */
.nav-has-mega{display:flex;align-items:center}
.nav-mega-btn{display:inline-flex;align-items:center;gap:.45rem;min-height:48px;padding:.35rem .65rem;background:none;border:0;border-radius:var(--radius-sm);font-family:var(--ff-head);font-weight:600;font-size:var(--fs-base);color:var(--navy);cursor:pointer;white-space:nowrap}
.nav-mega-btn:hover{background:var(--teal-soft);color:var(--navy-deep)}
.nav-mega-btn[aria-expanded="true"]{background:var(--teal-soft);color:var(--navy-deep)}
.nav-chev{flex:none;display:block;width:18px;height:18px;transition:transform .2s var(--ease)}
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .nav-chev{background:currentColor;-webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/18px 18px no-repeat;mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/18px 18px no-repeat}
}
.nav-mega-btn[aria-expanded="true"] .nav-chev{transform:rotate(180deg)}
.nav-mega{position:absolute;top:calc(100% - .3rem);left:50%;transform:translateX(-50%);z-index:130;width:min(1000px,calc(100vw - 2.4rem));padding:1.3rem 1.4rem 1.1rem;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.nav-mega[hidden]{display:none}
/* Ohne JavaScript bleibt die Themenliste offen ausgeklappt und damit erreichbar. */
.no-js .nav-mega[hidden]{display:block;position:static;transform:none;width:auto;padding:.6rem 0 0;border:0;border-radius:0;box-shadow:none}
.nav-mega-head{margin-bottom:.9rem;padding-bottom:.7rem;border-bottom:1px solid var(--line);font-family:var(--ff-head);font-weight:600;font-size:var(--fs-sm);color:var(--muted)}
.nav-mega-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}
.nav-mega-cat{min-width:0}
.nav-mega-cat-head{font-family:var(--ff-head);font-weight:700;font-size:var(--fs-sm);color:var(--teal-ink);margin-bottom:.5rem;padding-bottom:.3rem;border-bottom:2px solid var(--teal-soft)}
.nav-mega-list{display:grid;gap:.15rem}
.nav-mega-list li{min-width:0}
.nav-mega-list a{display:flex;align-items:center;gap:.6rem;min-width:0;min-height:44px;padding:.35rem .5rem;border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:500;color:var(--navy);text-decoration:none;white-space:normal;line-height:1.35}
.nav-mega-list a:hover{background:var(--teal-soft);color:var(--navy-deep)}
.nav-mega-list a[aria-current="page"]{background:var(--teal-soft);color:var(--navy-deep);font-weight:700}
.nav-mega-num{flex:none;min-width:2.1rem;padding:.1rem .3rem;border-radius:6px;background:var(--teal-soft);color:var(--teal-ink);font-family:var(--ff-head);font-weight:700;font-size:.9rem;text-align:center}
.nav-mega-list a:hover .nav-mega-num,.nav-mega-list a[aria-current="page"] .nav-mega-num{background:var(--teal);color:#fff}
.nav-mega-label{min-width:0;overflow-wrap:break-word}
.nav-mega-all{display:inline-flex;align-items:center;min-height:44px;margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--line);width:100%;font-family:var(--ff-head);font-weight:600;font-size:var(--fs-sm);color:var(--teal-ink);white-space:normal}
.nav-mega-all:hover{background:none;color:var(--navy-deep)}
@media (max-width:860px){.nav-mega-grid{grid-template-columns:1fr 1fr;gap:1rem}}
@media (max-width:540px){.nav-mega-grid{grid-template-columns:1fr}}

/* ── 4-Kategorien & Tab-Steuerung ──────────────── */
.cat-tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2rem}
.cat-tab{padding:.6rem 1.2rem;border-radius:999px;border:2px solid var(--line);background:var(--white);color:var(--navy);font-family:var(--ff-head);font-weight:600;font-size:var(--fs-base);cursor:pointer;transition:all .2s var(--ease)}
.cat-tab:hover{border-color:var(--teal);color:var(--teal-ink)}
.cat-tab.is-active{background:var(--navy);color:#fff;border-color:var(--navy)}

.cat-section{margin-bottom:3rem}
.cat-section-head{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem;padding-bottom:.6rem;border-bottom:2px solid var(--line)}
.cat-section-head h3{font-size:var(--fs-lg);color:var(--navy)}
.cat-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .8rem;border-radius:999px;background:var(--teal-soft);color:var(--teal-ink);font-family:var(--ff-head);font-weight:700;font-size:var(--fs-sm);margin-bottom:.8rem}

/* Lesefokus & Praxis-Tipps */
.praxis-tipp{background:var(--white);border-left:6px solid var(--sun);border-radius:var(--radius-sm);padding:1.4rem 1.6rem;margin-top:var(--s3);box-shadow:var(--shadow-sm)}
.praxis-tipp h3{font-size:var(--fs-md);color:var(--sun-ink);margin-bottom:.5rem}
.lese-abschnitt p{font-size:1.15rem;line-height:1.8;color:var(--ink);margin-bottom:1.2rem}

.burger{display:none;flex-direction:column;justify-content:center;gap:6px;width:56px;height:56px;padding:14px;background:var(--white);border:2px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;color:var(--navy)}
.burger span{display:block;height:3px;background:currentColor;border-radius:3px;transition:transform .25s var(--ease),opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
@media (max-width:920px){
  .burger{display:inline-flex}
  /* display:none statt max-height:0 - ein nur zusammengeschobenes Panel behaelt
     Layout-Rechtecke ueber dem Hero, dort messen Pruefwerkzeuge dann dunklen
     Text auf dunkelblauem Hero-Grund. */
  .nav-panel{display:none;position:absolute;left:0;right:0;top:100%;margin:0;max-height:calc(100vh - var(--nav-h));overflow-y:auto;background:var(--white);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .nav-panel[data-open="true"]{display:block;animation:navSlideIn .22s var(--ease)}
  .nav-list{flex-direction:column;align-items:stretch;padding:1rem clamp(1.1rem,4vw,2rem) 1.4rem;gap:.15rem}
  .nav-list a{width:100%;min-height:54px;border-bottom:1px solid var(--line);border-radius:0;white-space:normal}
  .nav-list>li:last-child a{border-bottom:0}
  .nav-cta{border-radius:var(--radius-sm);justify-content:center;margin-top:.5rem}
  .nav-has-mega{display:block}
  .nav-mega-btn{width:100%;justify-content:space-between;min-height:54px;padding:.35rem .65rem;border-bottom:1px solid var(--line);border-radius:0}
  .nav-mega{position:static;transform:none;width:auto;padding:.4rem 0 .7rem;border:0;border-radius:0;box-shadow:none;background:var(--white)}
  .nav-mega-head{display:none}
  .nav-mega-list{grid-template-columns:1fr;gap:0}
  .nav-mega-list a{min-height:52px;padding-inline:.65rem;border-bottom:1px solid var(--line);border-radius:0}
  .nav-mega-all{margin-top:.2rem;padding-inline:.65rem}
}
@keyframes navSlideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ── Buttons ────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:56px;padding:.85rem 1.7rem;font-family:var(--ff-head);font-weight:700;font-size:var(--fs-base);text-decoration:none;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--teal);color:#fff;box-shadow:0 6px 18px rgba(0,130,154,.30)}
.btn--primary:hover{background:var(--teal-ink);color:#fff}
.btn--navy{background:var(--navy);color:#fff;box-shadow:0 6px 18px rgba(26,58,92,.28)}
.btn--navy:hover{background:var(--navy-deep);color:#fff}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn--ghost:hover{background:var(--navy);color:#fff}
.btn--ghost-light{background:var(--navy-soft);color:#fff;border-color:rgba(255,255,255,.55)}
.btn--ghost-light:hover{background:rgba(255,255,255,.14);color:#fff}
.btn svg{flex:none}

/* ── Hero (Startseite) ──────────────────────────── */
/* Die beiden Farbschleier liegen als Background-Layer direkt auf .hero (frueher
   ein ::before): optisch identisch, aber der Hintergrund hinter Headline, Badge
   und Buttons bleibt fuer Kontrast-Pruefungen eindeutig bestimmbar. */
.hero{position:relative;isolation:isolate;background:radial-gradient(60% 80% at 85% 20%,rgba(0,130,154,.35),transparent 70%),radial-gradient(40% 55% at 10% 90%,rgba(247,179,43,.14),transparent 70%),linear-gradient(160deg,var(--navy-deep) 0%,var(--navy) 55%,#1F4A74 100%);color:#fff;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s5);align-items:center;padding-block:clamp(3rem,2rem + 4vw,5.5rem)}
.hero h1{color:#fff;font-size:var(--fs-3xl);max-width:16ch}
.hero h1 .hl{color:var(--sun)}
.hero-sub{margin-top:var(--s3);font-size:var(--fs-md);color:#DCE7F2;max-width:34rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:var(--s4)}
.uhu-badge{display:inline-flex;align-items:center;gap:.7rem;margin-bottom:var(--s3);padding:.5rem 1.1rem .5rem .6rem;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.30);border-radius:999px;font-family:var(--ff-head);font-weight:600;font-size:var(--fs-sm)}
.uhu-badge img{width:30px;height:39px}
.hero-figure{position:relative;justify-self:center}
.hero-figure::before{content:"";position:absolute;inset:6% -2% -4% -2%;background:radial-gradient(closest-side,rgba(255,255,255,.16),transparent);border-radius:50%}
.hero-figure img{position:relative;width:min(400px,72vw);border-radius:50%;border:6px solid rgba(255,255,255,.25);box-shadow:0 24px 70px rgba(0,0,0,.35)}
.hero-trust{display:flex;flex-wrap:wrap;gap:.6rem 2rem;padding:var(--s3) 0 var(--s4);border-top:1px solid rgba(255,255,255,.22);color:#DCE7F2;font-size:var(--fs-sm)}
.hero-trust li{display:inline-flex;align-items:center;gap:.55rem}
.hero-trust svg{color:var(--sun);flex:none}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;gap:var(--s4)}.hero-figure{order:-1}.hero-figure img{width:min(280px,60vw)}}

/* ── Sektionen ──────────────────────────────────── */
.section{padding-block:clamp(3rem,2rem + 4vw,5.5rem)}
.section--white{background:var(--white)}
.section--navy{background:var(--navy);color:#E6EDF5}
.section--navy h2{color:#fff}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--ff-head);font-weight:700;font-size:var(--fs-sm);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink)}
.eyebrow::before{content:"";width:2rem;height:3px;border-radius:3px;background:var(--sun)}
.section--navy .eyebrow{color:#9FD5E0}
h2.sec-title{font-size:var(--fs-2xl);margin:.6rem 0 var(--s2)}
.sec-intro{max-width:46rem;color:var(--muted);font-size:var(--fs-md)}
.section--navy .sec-intro{color:#C6D5E4}

/* Schritte (So funktioniert es) */
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);margin-top:var(--s5)}
.step-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4);box-shadow:var(--shadow-sm)}
.step-card .num{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--teal-soft);color:var(--teal-ink);font-family:var(--ff-head);font-weight:800;font-size:var(--fs-lg);margin-bottom:var(--s2)}
.step-card h3{font-size:var(--fs-lg);margin-bottom:.5rem}
.step-card p{color:var(--muted)}
@media (max-width:860px){.steps{grid-template-columns:1fr}}

/* Themen-Grid */
.topics{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s5)}
.topic-card{position:relative;display:flex;flex-direction:column;gap:.55rem;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.5rem 1.35rem;text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.topic-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--teal)}
.topic-card .t-head{display:flex;align-items:center;gap:.9rem}
.topic-card .t-num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:var(--navy);color:#fff;font-family:var(--ff-head);font-weight:800;font-size:1.15rem}
.topic-card:nth-child(3n+2) .t-num{background:var(--teal)}
.topic-card:nth-child(3n) .t-num{background:var(--navy-soft)}
.topic-card h3{font-size:var(--fs-md);color:var(--navy)}
.topic-card p{color:var(--muted);font-size:var(--fs-sm);line-height:1.55}
.topic-card .t-go{margin-top:auto;display:inline-flex;align-items:center;gap:.45rem;font-family:var(--ff-head);font-weight:700;color:var(--teal-ink);font-size:var(--fs-sm)}
.topic-card:hover .t-go{color:var(--navy)}
@media (max-width:980px){.topics{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.topics{grid-template-columns:1fr}}

/* Split-Sektionen mit Illustration */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5);align-items:center;margin-top:var(--s4)}
.split figure{margin:0}
.split img{border-radius:var(--radius-lg);box-shadow:var(--shadow);width:100%;max-width:480px;justify-self:center;margin-inline:auto}
.split .checks{display:grid;gap:.8rem;margin-top:var(--s3)}
.split .checks li{display:flex;gap:.8rem;align-items:flex-start}
.split .checks svg{flex:none;margin-top:.3rem;color:var(--teal)}
.section--navy .split .checks svg{color:var(--sun)}
@media (max-width:860px){.split{grid-template-columns:1fr}.split figure{order:-1}}

/* ── Themen-Seite (PowerPoint-Flow) ─────────────── */
.lesson-hero{background:linear-gradient(150deg,var(--navy-deep),var(--navy));color:#fff;padding-block:clamp(2.2rem,1.5rem + 2.5vw,3.5rem)}
.lesson-hero .crumb{font-size:var(--fs-sm)}
.lesson-hero .crumb a{color:#B9CCDF}
.lesson-hero h1{color:#fff;font-size:var(--fs-2xl);margin-top:.7rem}
.lesson-hero .tagline{margin-top:.6rem;color:var(--sun);font-family:var(--ff-head);font-weight:600;font-size:var(--fs-md)}
.progress-row{display:flex;align-items:center;gap:1rem;margin-top:var(--s3)}
.progress-label{flex:none;font-family:var(--ff-head);font-weight:700;font-size:var(--fs-sm);color:#DCE7F2}
.progress-track{flex:1;height:12px;background:rgba(255,255,255,.18);border-radius:999px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--sun));border-radius:999px}
.lesson{max-width:var(--reading);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}
.stage{margin-top:var(--s5);background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.5rem,1rem + 2vw,2.6rem);box-shadow:var(--shadow-sm)}
.stage-tag{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--ff-head);font-weight:700;font-size:var(--fs-sm);color:var(--teal-ink);background:var(--teal-soft);border-radius:999px;padding:.35rem 1rem;margin-bottom:var(--s2)}
.stage h2{font-size:var(--fs-xl);margin-bottom:var(--s2)}
.stage .hint{color:var(--muted);margin-bottom:var(--s3)}

/* Kenntnis-Check + Quiz */
.q-block{border:0;border-top:1px solid var(--line);padding:var(--s3) 0 0;margin-top:var(--s3);min-width:0}
legend.q-text{padding:0;float:left;width:100%}
legend.q-text + *{clear:both}
.q-block:first-of-type{border-top:0;padding-top:0;margin-top:0}
.q-text{font-family:var(--ff-head);font-weight:700;font-size:var(--fs-md);color:var(--navy);margin-bottom:1rem}
.q-opts{display:grid;gap:.7rem}
.q-opt{display:flex;align-items:center;gap:.9rem;min-height:56px;padding:.7rem 1.1rem;background:var(--paper);border:2px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--fs-base);transition:border-color .15s,background .15s}
.q-opt:hover{border-color:var(--teal)}
.q-opt input{width:26px;height:26px;accent-color:var(--teal);flex:none;cursor:pointer}
.q-opt.is-picked{border-color:var(--teal);background:var(--teal-soft)}
.q-opt.is-right{border-color:var(--ok);background:var(--ok-soft)}
.q-opt.is-wrong{border-color:var(--warn);background:var(--warn-soft)}
.q-feedback{display:none;margin-top:.9rem;padding:1rem 1.2rem;border-radius:var(--radius-sm);font-size:var(--fs-base)}
.q-feedback.is-on{display:block}
.q-feedback--ok{background:var(--ok-soft);border-left:5px solid var(--ok)}
.q-feedback--wrong{background:var(--warn-soft);border-left:5px solid var(--warn)}
.q-result{display:none;margin-top:var(--s3);padding:1.2rem 1.4rem;border-radius:var(--radius);background:var(--sun-soft);border:1px solid #EAD189;font-size:var(--fs-md)}
.q-result.is-on{display:flex;gap:1rem;align-items:flex-start}
.q-result img{width:44px;height:58px;flex:none}
.q-result strong{color:var(--navy)}

/* Inhalt */
.keybox{background:var(--teal-soft);border-left:6px solid var(--teal);border-radius:var(--radius-sm);padding:1.4rem 1.6rem;margin-top:var(--s3)}
.keybox h3{font-size:var(--fs-md);color:var(--teal-ink);margin-bottom:.9rem}
.keybox ul{display:grid;gap:.7rem}
.keybox li{display:flex;gap:.75rem;align-items:flex-start}
.keybox svg{flex:none;margin-top:.32rem;color:var(--teal-ink)}
.uhu-tipp{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;background:var(--sun-soft);border:1px solid #EAD189;border-radius:var(--radius);padding:1.4rem 1.6rem;margin-top:var(--s3)}
.uhu-tipp img{width:56px;height:73px}
.uhu-tipp h3{font-size:var(--fs-md);color:var(--sun-ink);margin-bottom:.4rem}
.stage .intro p + p{margin-top:1rem}

/* PowerPoint-Navigation */
.lesson-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s2);align-items:stretch;margin-block:var(--s5)}
.lesson-nav a{display:flex;flex-direction:column;justify-content:center;gap:.25rem;padding:1rem 1.3rem;min-height:76px;background:var(--white);border:2px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--navy);box-shadow:var(--shadow-sm);transition:border-color .15s,transform .18s var(--ease)}
.lesson-nav a:hover{border-color:var(--teal);transform:translateY(-2px)}
.lesson-nav .dir{font-size:var(--fs-sm);color:var(--muted);font-family:var(--ff-head);font-weight:600}
.lesson-nav .name{font-family:var(--ff-head);font-weight:700}
.lesson-nav .to-prev{text-align:left}
.lesson-nav .to-next{text-align:right;background:var(--navy);color:#fff;border-color:var(--navy)}
.lesson-nav .to-next .dir{color:#B9CCDF}
.lesson-nav .to-next:hover{border-color:var(--teal);background:var(--navy-deep)}
.lesson-nav .to-index{align-self:center;display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:.6rem 1.2rem;border-radius:999px;border:2px solid var(--line);background:var(--white);color:var(--navy);text-decoration:none;font-family:var(--ff-head);font-weight:700}
.lesson-nav .to-index:hover{border-color:var(--teal)}
@media (max-width:720px){.lesson-nav{grid-template-columns:1fr 1fr}.lesson-nav .to-index{grid-column:1/-1;order:3}}

/* ── Kontakt-CTA Band ───────────────────────────── */
.cta-band{background:linear-gradient(140deg,var(--teal-ink),var(--teal));color:#fff;border-radius:var(--radius-lg);padding:clamp(2rem,1.4rem + 2.5vw,3.4rem);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);align-items:center;box-shadow:var(--shadow)}
.cta-band h2{color:#fff;font-size:var(--fs-xl)}
.cta-band p{color:#D7ECF1;margin-top:.5rem;max-width:38rem}
@media (max-width:860px){.cta-band{grid-template-columns:1fr}}

/* ── Footer ─────────────────────────────────────── */
.site-footer{background:var(--navy-deep);color:#C6D5E4;margin-top:var(--s6)}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:var(--s4);padding-block:var(--s5)}
.site-footer .foot-h{color:#fff;font-size:var(--fs-base);margin-bottom:var(--s2)}
.site-footer a{color:#C6D5E4}
.site-footer a:hover{color:#fff}
.footer-brand img{height:60px;width:auto;background:#fff;border-radius:var(--radius-sm);padding:.5rem .8rem}
.footer-brand p{margin-top:var(--s2);font-size:var(--fs-sm);max-width:30ch}
.footer-list{display:grid;gap:.6rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding-block:var(--s3);font-size:var(--fs-sm);display:flex;flex-wrap:wrap;gap:.7rem 2rem;justify-content:space-between}
.mki-credit{font-size:12px;text-align:center;color:inherit;padding-bottom:1rem}
.mki-credit a{color:inherit}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr}}

/* ── Rechtsseiten / 404 ─────────────────────────── */
.legal{max-width:var(--reading);margin-inline:auto;padding:var(--s5) clamp(1.1rem,4vw,2rem)}
.legal h1{font-size:var(--fs-2xl);margin-bottom:var(--s3)}
.legal h2{font-size:var(--fs-lg);margin:var(--s4) 0 var(--s2)}
.legal p + p{margin-top:1rem}
.notice{background:var(--sun-soft);border:1px solid #EAD189;border-radius:var(--radius-sm);padding:1.1rem 1.3rem;margin-bottom:var(--s3)}

/* Reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
html.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* Back to top */
.to-top{position:fixed;right:20px;bottom:20px;z-index:110;display:none;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--navy);color:#fff;border:0;cursor:pointer;box-shadow:var(--shadow)}
.to-top.is-on{display:inline-flex}
.to-top:hover{background:var(--teal-ink)}
@media print{.site-header,.site-footer,.to-top,.lesson-nav,.btn{display:none!important}body{background:#fff}}

/* 320px-Haertung (Falle 20): Flex-/Grid-Kinder duerfen unter min-content schrumpfen,
   unbrechbare Tokens (Beispiel-Mail-Adressen, lange Komposita) brechen kontrolliert um */
.hero-grid>*,.split>*,.topics>*,.steps>*,.footer-grid>*,.lesson-nav a,.topic-card .t-head h3,.q-opt,.uhu-tipp>div{min-width:0}
.keybox li span,.split .checks span,.uhu-tipp p,.q-feedback,.q-opt,.lesson-nav .name,.stage .intro p{overflow-wrap:anywhere}

/* ── UHU-Glossar: antippbare Begriffe + Erklaer-Popover ─────────── */
.begriff{display:inline;background:none;border:0;padding:0;margin:0;font:inherit;color:var(--teal-ink);cursor:help;text-decoration:underline dotted 2px;text-underline-offset:3px;border-radius:3px}
.begriff:hover{color:var(--navy);background:var(--teal-soft)}
.beg-pop{position:fixed;inset:0;z-index:220;display:flex;align-items:center;justify-content:center;padding:1.2rem;background:rgba(18,42,68,.55)}
.beg-pop[hidden]{display:none}
.beg-pop-card{position:relative;max-width:34rem;width:100%;background:var(--white);border-radius:var(--radius-lg);padding:1.8rem 2rem;box-shadow:var(--shadow);border-top:6px solid var(--sun)}
.beg-pop-head{display:flex;align-items:center;gap:.9rem;margin-bottom:.8rem}
.beg-pop-head h3{font-size:var(--fs-lg);color:var(--navy)}
.beg-pop-card p{font-size:var(--fs-base)}
.beg-pop-link{margin-top:1rem}
.beg-pop-link a{font-family:var(--ff-head);font-weight:700}
.beg-pop-link:empty{display:none}
.beg-pop-close{position:absolute;top:.8rem;right:.8rem;width:48px;height:48px;border:2px solid var(--line);border-radius:50%;background:var(--white);font-size:1.5rem;line-height:1;cursor:pointer;color:var(--navy)}
.beg-pop-close:hover{border-color:var(--teal)}

/* ── Video-Tipp-Box ─────────────────────────────────────────────── */
.video-tipp{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;background:var(--white);border:2px solid var(--teal-soft);border-left:6px solid var(--teal);border-radius:var(--radius);padding:1.4rem 1.6rem;margin-top:var(--s3)}
.video-tipp .vt-icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--teal);color:#fff;flex:none}
.video-tipp h3{font-size:var(--fs-md);color:var(--teal-ink);margin-bottom:.35rem}
.video-tipp .vt-kanal{color:var(--muted);font-size:var(--fs-sm)}