:root{
  --navy-900:#1a3a52; --navy-700:#2a4457; --navy-500:#4e6e88; --navy-300:#6b8299;
  --blue-600:#1f6ec2; --blue-500:#2b7fd8; --blue-200:#a9cdef; --blue-100:#d7e8f8; --blue-050:#eaf3fc;
  --gold-600:#c99c0f; --gold-500:#e8b81a; --gold-300:#e8d4a0; --gold-200:#f5e4b8; --gold-100:#fbf0cf; --gold-050:#fff9e6;
  --gold-ink:#8a7d55; --white:#fff;
  --radius-card:22px; --wrap:1120px;
  --font-h:"Crimson Pro",Georgia,serif; --font-ui:"Poppins",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;font-family:var(--font-ui);color:var(--navy-700);font-size:17px;line-height:1.55}
a{color:var(--blue-500)} a:hover{color:var(--blue-600)}
h1,h2,h3{font-family:var(--font-h);font-weight:700;color:var(--navy-900);margin:0;text-wrap:pretty}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.214em;text-transform:uppercase;color:var(--blue-500)}
.btn{font-family:inherit;font-size:16px;font-weight:700;color:#fff;background:var(--blue-500);border:none;
     border-radius:999px;padding:16px 34px;cursor:pointer;text-decoration:none;display:inline-block;transition:background .12s}
.btn:hover{background:var(--blue-600);color:#fff}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* Kopfleiste */
.top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);border-bottom:1px solid var(--blue-050)}
.top .wrap{display:flex;align-items:center;gap:28px;padding-top:14px;padding-bottom:14px}
.top .mark{font-family:var(--font-h);font-weight:700;font-size:19px;color:var(--navy-900);line-height:1.1;flex:0 0 auto}
.top nav{display:flex;gap:22px;font-size:13px;font-weight:500;flex:0 0 auto;margin-left:auto}
.top nav a{color:var(--navy-700);text-decoration:none}
.prog{flex:0 1 auto;display:flex;align-items:center;gap:12px;min-width:0;margin-right:12px}
.prog .segs{display:flex;gap:4px}
.prog .segs i{width:18px;height:6px;border-radius:3px;background:var(--blue-100)}
.prog .segs i.on{background:var(--blue-500)}
.prog span{font-size:12px;color:var(--navy-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Kopfbereich */
.hero{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;align-items:center;padding-top:72px}
.hero h1{font-size:54px;line-height:1.05;margin-top:18px}
.hero p{font-size:19px;max-width:46ch;margin:22px 0 0}
.hero .cta{display:flex;gap:14px;align-items:center;margin-top:32px;flex-wrap:wrap}
.hero .credit{font-size:13px;color:var(--navy-300);margin-top:26px}
.arc{position:relative;aspect-ratio:1;background:var(--blue-050);border-radius:var(--radius-card);overflow:hidden}
.arc i{position:absolute;left:50%;transform:translateX(-50%);border-radius:50%;aspect-ratio:1}
.arc .r1{top:22%;width:72%;border:2px solid var(--blue-500)}
.arc .r2{top:33%;width:53%;border:2px solid var(--blue-200)}
.arc .sun{top:45%;width:33%;background:var(--gold-500)}

/* Kennzahlen */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--blue-050);
       border-radius:var(--radius-card);overflow:hidden;margin-top:56px}
.stats div{background:#fff;padding:26px 24px}
.stats b{display:block;font-family:var(--font-h);font-size:38px;color:var(--navy-900);line-height:1}
.stats strong{display:block;font-size:14px;color:var(--navy-900);margin-top:10px}
.stats span{display:block;font-size:13px;color:var(--navy-300);margin-top:4px}

section.blk{padding-top:76px}
.blk > h2{font-size:34px}
.blk > p.sub{font-size:16px;color:var(--navy-300);margin:8px 0 0}

/* Ablauf */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.steps div{background:var(--blue-050);border-radius:var(--radius-card);padding:28px}
.steps .n{width:46px;height:46px;border-radius:12px;background:var(--gold-500);color:var(--navy-900);
          font-size:21px;font-weight:700;display:flex;align-items:center;justify-content:center}
.steps h3{font-size:21px;margin-top:18px}
.steps p{font-size:15px;color:var(--navy-500);margin:8px 0 0}
.tip{background:var(--gold-050);border:1px solid var(--gold-300);border-radius:var(--radius-card);
     padding:22px 26px;margin-top:20px;display:flex;gap:20px;align-items:center}
.tip .ic{width:40px;height:40px;flex:0 0 auto;border-radius:11px;background:var(--gold-500);color:var(--navy-900);
         font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center}
.tip p{font-family:var(--font-h);font-weight:700;font-size:19px;color:var(--navy-900);margin:0;line-height:1.4}

/* Filter */
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{font-family:inherit;font-size:13px;font-weight:600;padding:9px 16px;border-radius:999px;
              cursor:pointer;border:1px solid var(--blue-100);background:#fff;color:var(--navy-700)}
.chips button[aria-pressed="true"]{background:var(--blue-500);border-color:var(--blue-500);color:#fff}

/* Themen */
#themenliste{display:grid;gap:16px;margin-top:28px}
.thema{border:1px solid var(--blue-050);border-radius:var(--radius-card);background:#fff;overflow:hidden}
.thema[open]{border-color:var(--blue-500)}
/* Zebra: jedes zweite Thema sehr dezent getoent, wie Zeilen einer Tabelle */
#themenliste .thema:nth-child(even){background:#f7fafd;border-color:#e6eef8}
#themenliste .thema:nth-child(even)[open]{border-color:var(--blue-500)}
#themenliste .thema:nth-child(even) .detail{border-top-color:#e6eef8}
.thema > .kopf{padding:24px 26px;display:flex;gap:20px;align-items:flex-start;cursor:pointer;list-style:none;width:100%;
               background:none;border:none;text-align:left;font:inherit;color:inherit}
.thema .num{width:52px;height:52px;flex:0 0 auto;border-radius:14px;background:var(--gold-500);color:var(--navy-900);
            font-size:22px;font-weight:700;display:flex;align-items:center;justify-content:center}
.thema.fertig .num{background:var(--blue-500);color:#fff}
.thema .meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.badge{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;border-radius:6px;
       background:var(--blue-050);color:var(--blue-500)}
.badge.folgt{background:var(--gold-050);color:var(--gold-ink)}
.badge.fertig{background:var(--blue-100);color:var(--blue-600)}
.thema .cnt{font-size:12px;color:var(--navy-300)}
.thema h3{font-size:23px;margin-top:10px;line-height:1.2}
.thema .teaser{font-size:15px;color:var(--navy-500);margin:6px 0 0}
.caret{width:30px;height:30px;flex:0 0 auto;border-radius:50%;background:#fff;border:1px solid var(--blue-100);
       display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--blue-500);transition:transform .22s}
.thema[open] .caret{transform:rotate(180deg)}
.detail{padding:0 26px 26px;border-top:1px solid var(--blue-050)}
.detail .grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;padding-top:24px}
.player{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--blue-050);
        border:none;padding:0;width:100%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.player img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.player .play{position:relative;width:62px;height:62px;border-radius:50%;background:var(--gold-500);color:var(--navy-900);
              font-size:22px;display:flex;align-items:center;justify-content:center;padding-left:5px}
.player.leer{cursor:default;flex-direction:column;gap:10px}
.player.leer b{font-family:var(--font-h);font-size:20px;color:var(--navy-900)}
.player.leer span{font-size:14px;color:var(--navy-300)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.markbtn{font-family:inherit;font-size:14px;font-weight:600;margin-top:14px;padding:11px 20px;border-radius:999px;
         cursor:pointer;border:1px solid var(--blue-500);background:#fff;color:var(--blue-500)}
.thema.fertig .markbtn{background:var(--blue-500);color:#fff}
.detail .lbl{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-300)}
.blatt{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--blue-050);
       border-radius:14px;padding:14px 16px;margin-top:8px}
.blatt .box{width:22px;height:22px;flex:0 0 auto;border-radius:6px;border:1.5px solid var(--blue-100);background:#fff;
            color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.blatt .box[aria-checked="true"]{background:var(--blue-500);border-color:var(--blue-500)}
.blatt b{display:block;font-size:15px;font-weight:600;color:var(--navy-900)}
.blatt span{display:block;font-size:13px;color:var(--navy-300);margin-top:2px}
.blatt a.pdf{flex:0 0 auto;font-size:13px;font-weight:600;color:var(--blue-500);text-decoration:none;
              white-space:nowrap;padding-top:2px}
.blatt a.pdf:hover{color:var(--blue-600);text-decoration:underline}
.blatt .fehlt{flex:0 0 auto;font-size:13px;color:var(--navy-300);white-space:nowrap;padding-top:2px}

/* Bibliothek */
.bar{height:8px;border-radius:4px;background:var(--blue-050);margin-top:24px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px;background:var(--blue-500);width:0;transition:width .22s}
#bibliothek{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:26px}
.zeile{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--blue-050);
       border-radius:14px;padding:15px 18px}
.zeile.an{background:var(--blue-050);border-color:var(--blue-100)}
.zeile .txt{flex:1 1 auto;min-width:0}
.zeile b{display:block;font-size:15px;font-weight:600;color:var(--navy-900)}
.zeile span{display:block;font-size:12px;color:var(--navy-300);margin-top:2px}
.zeile .act{font-size:13px;font-weight:600;color:var(--blue-500);flex:0 0 auto;text-decoration:none}
.zeile .act:hover{text-decoration:underline}

/* Abschluss */
.ende{position:relative;overflow:hidden;background:var(--gold-050);margin-top:88px;padding:84px 32px 96px;text-align:center}
.ende .sun{position:absolute;left:82%;top:46%;width:78px;height:78px;border-radius:50%;background:var(--gold-500)}
.ende .h1{position:absolute;left:-18%;top:62%;width:76%;height:300px;border-radius:50%;background:var(--gold-100)}
.ende .h2{position:absolute;left:42%;top:68%;width:80%;height:280px;border-radius:50%;background:var(--gold-200)}
.ende .inner{position:relative;max-width:760px;margin:0 auto}
.ende h2{font-size:44px;line-height:1.15;margin-top:18px}
.ende p{font-size:18px;margin:18px 0 0}
.ende .btn{margin-top:30px}

/* Fuß */
.hinweis{background:var(--blue-050);border-radius:var(--radius-card);padding:30px 34px;display:flex;gap:24px;margin-top:56px}
.hinweis .ic{width:44px;height:44px;flex:0 0 auto;border-radius:12px;background:var(--blue-500);color:#fff;
             font-family:var(--font-h);font-weight:700;font-size:24px;display:flex;align-items:center;justify-content:center}
.hinweis p{font-size:15px;line-height:1.6;margin:0}
.fuss{font-size:13px;line-height:1.7;color:var(--navy-300);margin:26px 0 72px}

@media (max-width:900px){
  .prog .segs{display:none}
  .hero,.stats,.steps,.detail .grid,.gate .inner,#bibliothek{grid-template-columns:1fr}
  .hero h1{font-size:38px} .ende h2{font-size:32px}
  .arc{max-width:420px} .top nav{display:none}
  .wrap{padding:0 20px}
}
@media print{ .top,.chips,.player,.markbtn{display:none} .thema .detail{display:block!important} }