:root {
  --ink: #172f43;
  --blue: #216b99;
  --brand: #2b7bac;
  --yellow: #ffde59;
  --soft-blue: #eaf4fa;
  --soft-yellow: #fff7d4;
  --rule: #d5e2ea;
  --quiet: #445d6d;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 20px }
body { margin: 0; color: var(--ink); background: white; font: 17px/1.55 system-ui,sans-serif }
header, main, footer { width: min(1120px, 90%); margin-inline: auto }
header, nav, footer, .brand, .actions, .facts { display: flex; align-items: center; gap: 20px }
header, footer { justify-content: space-between; padding-block: 16px }
header { border-bottom: 1px solid var(--rule) }
.brand { gap: 11px; font-size: 22px; font-weight: 850; letter-spacing: -.045em }

nav { font-size: 15px; font-weight: 650 }
a { color: var(--blue); text-underline-offset: 4px }
header a, .btn { text-decoration: none; color: var(--ink) }
header a:hover, footer a:hover { text-decoration: underline }
[aria-current=page] { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--brand) }
:focus-visible { outline: 3px solid #a24509; outline-offset: 4px }
h1,h2,h3,h4,p { margin: 0 }
h1,h2,h3,h4 { letter-spacing: -.043em; line-height: 1.07; text-wrap: balance }
h1 { font-size: clamp(38px,5.2vw,68px); margin: 13px 0 18px }
h1 em,.paper h2 { font-family: Georgia,serif; font-weight: 400; font-style: italic }
h1 em { color: var(--blue) }
h2 { font-size: clamp(31px,3.7vw,46px); margin-bottom: 16px }
h3 { font-size: clamp(25px,2.5vw,33px); margin: 8px 0 12px }
h4 { font-size: 21px; margin: 22px 0 8px }
p + p { margin-top: 10px }
.kicker,.facts,.code { font: 700 12px/1.45 ui-monospace,monospace; text-transform: uppercase; letter-spacing: .075em }
.kicker { color: #235c80 }
.hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 7%; align-items: center; padding: 52px 0 }
.lead { font-size: 19px; max-width: 53ch; color: var(--quiet) }
.actions { margin-top: 22px; flex-wrap: wrap; gap: 12px }
.btn { display: inline-flex; align-items:center; min-height: 44px; border-radius: 7px; background: var(--yellow); padding: 10px 17px; font-weight: 750 }
.btn.secondary { background: white; box-shadow: inset 0 0 0 1px #7194ab }
.btn:hover { box-shadow: inset 0 -3px 0 #203d5a55 }
.board { padding: 36px 8%; border-radius: 17px; background-color: var(--brand); }
.paper { position: relative; padding: 24px; background: white; transform: rotate(-2deg); box-shadow: 6px 7px #19557d }
.paper:before { content: ''; width: 75px; height: 17px; background: var(--yellow); position: absolute; top: -9px; left: 39%; transform: rotate(4deg) }
.paper h2 { font-size: 31px; margin: 8px 0 }
.paper .kicker { color: #a63232 }
.row { display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid var(--rule); padding:7px 0 }
details { margin-top: 12px }
summary { color: #14547a; font-weight: 720; cursor: pointer; padding: 5px 0 }
details p { padding: 8px 0 4px }
.band { border-top: 1px solid var(--rule); padding: 38px 0 46px }
.paths,.split { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px }
.path,.panel { min-width: 0; border-radius: 15px; padding: clamp(20px,3vw,35px); background: var(--soft-blue) }
.path { display:flex; flex-direction:column; align-items:flex-start; border-top: 5px solid var(--brand) }
.path.warm { border-color: #e9b723 }
.warm { background: var(--soft-yellow) }
.path h3,.chapter h1 { margin-top: 0 }
.token { display: block; font-size: clamp(45px,5vw,64px); line-height: 1; font-weight: 850; letter-spacing: -.065em; margin-bottom: 8px }
.path p { max-width: 46ch; margin: 3px 0 8px }
.path .tail { margin-top:auto; padding-top:16px }
.link { font-weight: 750 }
.breadcrumb { margin-top: 22px; font-size: 14px; color: var(--quiet) }
.chapter { padding: 32px clamp(20px,4vw,46px); border-radius: 14px; margin: 20px 0 34px; background: var(--soft-blue) }
.chapter.warm { background: var(--soft-yellow) }
.chapter h1 { margin: 8px 0 14px }
.facts { display:inline-flex; flex-wrap:wrap; gap:8px; margin: 0 0 12px; color: var(--quiet) }
.facts span { background: #fff; border: 1px solid var(--rule); border-radius: 99px; padding: 4px 9px }
.jump { display:flex; flex-wrap:wrap; gap:10px 18px; margin:18px 0 0; font-weight:700 }
.panel { background: #f2f7fa }
.panel h2,.panel h3 { font-size: 28px; margin: 0 0 13px }
.panel.course { background: #154d70; color: white }
.din-hilfe { border-top:1px solid var(--rule); margin-top:20px; padding-top:17px }
.din-hilfe h3 { font-size:21px; margin-bottom:8px }
.din-hilfe .btn { margin-top:13px; font-size:15px }
.din-hilfe .note { margin-top:7px }
.course .kicker { color: #c9e5fa }
.course .note { color: #c9e5fa }
.course .price { font-weight: 750 }
.course .actions { gap: 12px 16px }
.example { padding: 21px 25px; border-left:5px solid var(--brand); background: #f3f8fa; margin-top: 20px; border-radius: 0 12px 12px 0 }
.example h3 { font-size: 23px }
.section-title { margin-bottom: 20px }
.section-title p,.faq p,.intro { max-width: 74ch }
.section-title h2 { margin: 5px 0 12px }
.faq details { border-bottom: 1px solid var(--rule); margin: 0; padding: 10px 0 }
.faq summary { font-size: 18px }
.wq { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap: 8px; padding: 0; list-style:none }
.wq a { display:block; height:100%; padding:10px 13px; border:1px solid var(--rule); border-radius:6px; background:white; font-weight:650 }
.muted,.note { color: var(--quiet) }
.note { font-size: 14px; margin-top: 16px }
.status { display:inline-flex; padding:4px 10px; border:1px solid #bac9d5; border-radius:5px; font:650 14px/1.5 system-ui }
footer { border-top:1px solid var(--rule); flex-wrap:wrap; font-size:14px }
footer div { display:flex; flex-wrap:wrap; gap:12px 18px }
code { overflow-wrap:anywhere; background:#e1edf5; padding:1px 4px; border-radius:3px }
@media(max-width:760px){
 body { font-size:16px } .hero,.paths,.split { grid-template-columns:minmax(0,1fr) }
 .hero { padding:30px 0; gap:30px } .board { padding:25px 7% }
 .brand { font-size:18px; gap:7px } 
 header,nav { gap:12px } nav { font-size:14px } .band { padding:28px 0 }
 .wq { grid-template-columns:1fr } .lead { font-size:17px }
}
@media(max-width:380px){ header,main,footer{width:92%} nav{gap:8px}.brand{font-size:16px} .paper{padding:17px} }
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

h1,h2,h3,h4 { hyphens:auto; overflow-wrap:anywhere }

.brand { gap: .25em }
.brand b { color: var(--blue); font-weight: 900 }
.legal { padding-bottom: 40px; overflow-wrap: anywhere }
.legal > :is(p,h2,ul) { max-width: 76ch }
.legal h2 { margin: 28px 0 8px; font-size: clamp(21px,3vw,28px) }
.legal li + li { margin-top: 4px }

.brand { gap: 9px }
.brand img { border-radius: 10px }
.course-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 16px }
.course-heading > div { min-width: 0; overflow-wrap: anywhere }
.course-heading :is(h2,h3) { margin: 6px 0 0 }
.course-cover { width: clamp(96px,9vw,124px); height: auto; aspect-ratio: 1; border-radius: 8px }
.wq a { display: flex; align-items: center; gap: 12px }
.wq-cover { width: 72px; height: 72px; border-radius: 6px }
.video-teaser { margin: 24px 0 }
.video-link { display: flex; align-items: center; gap: 22px; padding: 16px; border: 1px solid var(--rule); border-radius: 12px; text-decoration: none }
.video-link strong { display: block; color: var(--ink); margin: 5px 0; font-size: 21px; line-height: 1.25 }
.video-link:hover .link { text-decoration: underline }
.video-cover { width: min(32%,230px); height: auto; border-radius: 6px }
@media(max-width:600px){ .brand img { width:36px; height:36px } .video-link { flex-direction:column; align-items:flex-start; gap:10px } .video-cover { width:min(100%,320px) } }
.lesson-video { display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(20px,4vw,45px); align-items:center }
.lesson-copy h2 { margin:6px 0 14px; font-size:clamp(26px,3.2vw,39px) }
.player-screen { position:relative; overflow:hidden; aspect-ratio:16 / 9; border-radius:12px; background:#172f43 }
.player-screen > img,.player-screen > iframe { display:block; position:absolute; inset:0; width:100%; height:100%; border:0 }
.video-launch,.video-stop { font:700 16px system-ui; cursor:pointer; border:0; border-radius:7px }
.video-launch { position:absolute; bottom:12px; left:12px; color:#162f42; background:#ffde59; padding:12px 17px; box-shadow:0 2px 8px #0005 }
.video-stop { margin-top:12px; color:var(--blue); background:var(--soft-blue); padding:8px 12px }
@media(max-width:760px){ .lesson-video{grid-template-columns:1fr} }
.hero-topic { font-size:clamp(21px,2.1vw,29px); color:var(--blue); margin:0 0 12px; line-height:1.12 }
.hero-question { font-size:clamp(40px,5.2vw,68px); margin:0 0 18px }
.hero-question em { font-family:Georgia,serif; font-weight:400; color:var(--blue) }
.tail a { display:block }
.tail a + a { margin-top:8px; font-size:.92em }
.case-teaser { margin-bottom:20px }
.case-teaser a { display:inline-block; margin-top:12px }
.case-table { width:100%; max-width:850px; border-collapse:collapse; margin:18px 0 }
.case-table th,.case-table td { padding:10px 12px; border-bottom:1px solid var(--rule); text-align:left; vertical-align:top }
.case-table thead { background:var(--soft-blue) }
@media(max-width:520px){.case-table{font-size:15px}.case-table th,.case-table td{padding:9px 5px}}
.guide-callout { margin:18px 0; padding:19px 22px; border-left:4px solid var(--brand); background:var(--soft-blue); border-radius:0 10px 10px 0 }
.guide-callout h3 { margin:6px 0; font-size:clamp(23px,3vw,30px) }
.guide-callout a { display:inline-block; margin-top:9px }
.voices {
  margin: 10px 0 30px;
  padding: 15px clamp(12px, 2vw, 24px) 9px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: #f5f9fb;
}
.voices-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px }
.voices-heading h2 { margin: 0; font-size: clamp(19px, 2.1vw, 24px); letter-spacing: -.03em }
.voices-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; min-height: 30px; border-radius: 20px; border: 1px solid #c1d6e2;
  background: white; color: #235c80; font: 650 12px/1.2 system-ui,sans-serif; cursor: pointer;
}
.voices-toggle[hidden] { display: none }
.voices-toggle::before { content: ""; width: 3px; height: 10px; border-inline: 2px solid currentColor; box-sizing: content-box }
.voices-toggle[data-paused]::before { width: 0; height: 0; border: 5px solid transparent; border-right: 0; border-left: 8px solid currentColor }
.voices-window { overflow-x: auto; container-type: inline-size; scrollbar-width: thin }
.voices[data-moving] .voices-window { overflow: hidden; mask-image: linear-gradient(to right, transparent, black 11px, black calc(100% - 17px), transparent) }
.voices-track, .voices-list { display: flex; width: max-content }
.voices[data-moving] .voices-track { animation: voices-loop var(--voice-duration) linear 1.3s infinite; will-change: transform }
.voices[data-moving][data-still] .voices-track { animation-play-state: paused }
@media (hover: hover) { .voices[data-moving] .voices-window:hover .voices-track { animation-play-state: paused } }
@keyframes voices-loop { to { transform: translateX(var(--voice-shift)) } }
.voice-card { width: 315px; width: clamp(235px, 34cqi, 335px); margin: 0; padding: 1px 18px 2px 12px; border-left: 2px solid #cadde8 }
.voices-ap2 .voice-card { width: 330px; width: clamp(235px, 50cqi, 570px) }
.voices figcaption { display: flex; align-items: center; gap: 7px; color: var(--quiet); font: 600 12px/1.4 system-ui,sans-serif }
.voice-badge { padding: 1px 6px; border-radius: 4px; font: 750 10px/1.55 ui-monospace,monospace; letter-spacing: .04em }
.voice-badge.ap1 { color: #164865; background: #d7eaf6 }
.voice-badge.ap2 { color: #574400; background: #ffeb97 }
.voices blockquote { margin: 5px 0 0; color: var(--ink); font: 16px/1.4 Georgia,serif; overflow-wrap: break-word }
.voices-reader { margin: 7px 0 0; border-top: 1px solid var(--rule) }
.voices-reader summary { width: fit-content; max-width: 100%; font-size: 13px; padding: 6px 0 2px }
.voices-reader[open] summary { margin: 0 0 12px }
.voices-full { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%, 265px),1fr)); gap: 14px 22px; padding: 2px 0 9px }
.voices-full figure { margin: 0 }
.voices-reader p { padding: 0 }
@media (max-width: 650px) {
  .voices { margin: 6px 0 22px; padding: 12px 11px 7px }
  .voice-card { padding-right: 14px }
}
@media (prefers-reduced-motion: reduce) {
  .voices:not([data-motion-opt-in]) .voices-track { animation: none }
}

.table-label { text-align:left; color:var(--quiet); font-size:.9em; padding:4px 0 8px }
.pass-rules { max-width:72ch; padding-left:1.35em }
.pass-rules li + li { margin-top:6px }

/* Formelsammlungen und Notenrechner */
@media (max-width:800px) {
  header { flex-wrap:wrap; align-items:flex-start; row-gap:8px }
  header nav { flex-wrap:wrap; gap:5px 14px; width:100% }
  header nav a { padding-block:3px }
}
.tools-band { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 25px; border-top:1px solid var(--rule); padding:18px 0 }
.tools-band a { font-weight:720 }
.resource-hero { gap:5%; padding:34px 0 44px }
.resource-hero h1,.calc-intro h1 { font-size:clamp(35px,4.4vw,61px); line-height:1.06 }
.resource-hero h1 { hyphens:manual }
.resource-hero .note { max-width:64ch; font-size:13px }
.formula-board { background:var(--brand); padding:clamp(18px,3vw,38px); border-radius:17px }
.sheet { background:white; border-radius:8px; overflow:hidden; box-shadow:6px 7px 0 #185578; color:var(--ink) }
.sheet-head,.sheet-foot { background:var(--soft-blue); padding:11px 15px; font-size:12px; font-weight:720; margin:0 }
.sheet-head { display:flex; justify-content:space-between; color:#174e71 }
.formula-line { display:flex; align-items:center; gap:14px; padding:11px; font-size:14px }
.formula-line b { border:1px solid var(--rule); padding:1px 7px }
.formula-line code { background:white; padding:0 }
.formula-grid { width:100%; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums }
.formula-grid th,.formula-grid td { border:1px solid var(--rule); padding:5px 8px; text-align:right }
.formula-grid thead,.formula-grid th { background:#f1f6f8; color:var(--quiet) }
.formula-grid td:nth-child(2) { text-align:left }
.formula-grid .active-cell { background:#fff2ab; box-shadow:inset 0 0 0 2px #9e7700; font-weight:800 }
.sheet-foot { color:#235c80; font-family:ui-monospace,monospace }
.download-band { display:grid; grid-template-columns:minmax(0,1.35fr) auto; align-items:center; gap:28px; margin:0 0 36px; background:var(--soft-yellow); border-top:4px solid var(--yellow); padding:clamp(20px,3.4vw,40px); border-radius:12px }
.download-band h2 { font-size:clamp(27px,3vw,39px); margin:7px 0 12px }
.download-band small { display:block; color:var(--quiet); font-size:13px; margin-top:6px }
.topic-strips { display:flex; flex-wrap:wrap; gap:5px 17px; padding:0; margin:12px 0 0; list-style:none; font-size:14px; font-weight:620 }
.topic-strips li::before { content:"· "; color:#856b08 }
.material-links { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:20px }
.material-links>a { display:flex; align-items:flex-start; gap:15px; color:var(--ink); text-decoration:none; background:var(--soft-blue); padding:22px; border-radius:12px }
.material-links>a:last-child { background:var(--soft-yellow) }
.material-links h3 { font-size:23px; margin:4px 0 7px }
.material-links img { width:clamp(50px,6vw,82px); height:auto; border-radius:6px }
.material-links b { display:block; color:var(--blue); text-decoration:underline; margin-top:8px }
.calc-intro { padding:24px 0 30px }
.calc-intro .lead { max-width:70ch }
.calc-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:22px; align-items:start }
.calc-inputs,.calc-result,.supplement { border-radius:13px; padding:clamp(18px,3vw,34px) }
.calc-inputs { border:1px solid var(--rule) }
.calc-top,.point-row { display:flex; justify-content:space-between; align-items:center; gap:14px }
.calc-top h2,.calc-result h2,.supplement h2 { font-size:clamp(25px,3vw,34px); margin:0 0 7px }
.calc-top>span { font:650 12px/1.5 ui-monospace,monospace; color:var(--quiet); white-space:nowrap }
.point-row { border-bottom:1px solid var(--rule); padding:11px 0 }
.point-row label { font-weight:750 }
.point-row small,.point-row output { display:block; color:var(--quiet); font-size:13px; font-weight:500 }
.point-row output:empty { display:none }
.point-row input,#oral { width:90px; max-width:100%; padding:8px; font:650 16px/1.4 system-ui; border:1px solid #86a3b3; border-radius:6px; color:var(--ink); background:#fff }
input[aria-invalid=true] { outline:2px solid #a03525 }
.reset-calc { background:none; border:0; text-decoration:underline; color:var(--blue); font:650 14px system-ui; margin:15px 0 0; padding:4px 0; cursor:pointer }
.calc-result { background:#154d70; color:white; border-top:5px solid var(--yellow) }
.calc-result .kicker { color:#cae5f5 }
.calc-result h2 { margin:5px 0 }
#grade-score { color:#ffe375; font-size:clamp(35px,4.2vw,55px); line-height:1.1; font-weight:800; letter-spacing:-.045em }
#grade-status { font-weight:750 }
.calc-checks { padding:0; list-style:none; margin:16px 0 0; font-size:14px }
.calc-checks li { display:flex; align-items:baseline; gap:8px; padding:5px 0; border-top:1px solid #497690 }
.calc-checks span { color:#d4e5f0; font:700 12px/1.5 system-ui; min-width:50px }
.calc-checks [data-state=yes] span { color:#b5f0ce }
.calc-checks [data-state=no] span { color:#ffdd9c }
.supplement { background:var(--soft-blue); margin:22px 0 30px }
.supplement>p { max-width:81ch }
.supplement h2 { margin:7px 0 10px }
.supp-choices { display:flex; flex-wrap:wrap; gap:8px 16px; margin:18px 0 0; padding:0; border:0 }
.supp-choices legend { font-weight:700; padding:0; margin-bottom:7px }
.supp-choices label { padding:6px 10px; border:1px solid #b4cedd; border-radius:7px; background:white; cursor:pointer; font-size:15px }
.supp-choices input { accent-color:var(--blue) }
#supp-box:not([hidden]) { border-top:1px solid #b4cedd; padding-top:13px; margin-top:14px }
#supp-scenario label { display:inline-block; margin:10px 6px 5px 0 }
#supp-target { font-weight:700 }
#supp-out:empty { display:none }
@media(max-width:760px){ .calc-grid,.download-band,.material-links { grid-template-columns:1fr } .resource-hero { gap:24px } .download-band {gap:15px} }

#next-text,#next-action,#next-reasons,#supp-target,#supp-out,#ap1-plan p { max-width:77ch }
#next-reasons { margin:12px 0; padding-left:1.25em }
#next-reasons li + li { margin-top:5px }
#next-action:not(:empty) { margin-top:12px; font-weight:650 }
#supp-choices[hidden] { display:none }
#supp-out:not(:empty) { margin:10px 0 0 }
#ap1-plan { background:white; border-left:4px solid var(--yellow); padding:15px 20px; border-radius:6px; margin-top:20px }
#ap1-plan h3 { font-size:23px; margin:5px 0 8px }
#ap1-plan .btn { margin-top:12px; font-size:15px }