/* Ilmdosh visual system: shared rhythm, accessible controls, subject accents. */
:root{--design-accent:#087d87;--design-soft:#eaf8f6;--design-shadow:0 8px 28px #152b4910}
body{line-height:1.7}
h1,h2,h3{font-weight:800;line-height:1.28}
button,.btn,.button,input,select,textarea{border-radius:12px}
button,.btn,.button,a{ -webkit-tap-highlight-color:transparent }
:focus-visible{outline:3px solid #e6a125;outline-offset:4px}
.hero{position:relative;border:1px solid var(--line);border-radius:28px;background:linear-gradient(120deg,var(--design-soft),var(--design-surface) 75%);overflow:hidden}
.hero h1{font-size:clamp(30px,4.5vw,52px);line-height:1.16;letter-spacing:-.035em}
.hero p,.hero .lead{line-height:1.8}
.hero .eyebrow,.hero .kicker{color:var(--design-accent);font-weight:800;letter-spacing:.05em}
.btn.primary,.hero .btn.primary,.button.primary,button.primary{background:var(--design-accent);border-color:var(--design-accent);color:white;box-shadow:0 4px 12px #152b4920}
.gcard,.course-card,.tile,.how-card,.starter-entry,.abi-entry,.guide-home-cta,.navigation-card{border-radius:20px;box-shadow:var(--design-shadow);border:1px solid var(--line);background:var(--design-surface)}
.gcard,.course-card{padding:22px}
.card,.chapter,.question-box,.abi-panel,.guide-topic,.starter-topic,.lesson section{border-radius:18px}
.gnum,.subject-icon{border-radius:15px;background:var(--design-soft);color:var(--design-accent)}
.hero-cta,.actions{gap:12px}
.main-menu,#menu{border-radius:0 0 20px 20px}
.main-menu>a,#menu>a,.navigation-grid>a{border-radius:12px}
.menu-toggle,#menuButton{border-radius:14px;background:var(--design-soft);border-color:var(--line)}
.zoom-controls,.utility-bar{box-shadow:0 2px 15px #152b4908}
.diagram,.visual-lab{border-radius:16px}
.table-scroll{border-radius:12px}
th{background:var(--design-soft)}
.question-box,.q-solution{box-shadow:var(--design-shadow)}
.option{border-radius:12px;min-height:48px}
.settings-section{padding-bottom:16px;border-bottom:1px solid var(--line)}
.calculator-panel,.lesson-notes,#notebook{box-shadow:0 16px 55px #152b4929}
.calculator-keys button{border-radius:10px}
@media(hover:hover){.gcard.ready:hover,.course-card:hover,.navigation-grid>a:hover,.tile:hover{border-color:var(--design-accent);box-shadow:0 10px 26px #152b4918}.btn:hover,.button:hover{filter:brightness(.97)}}
@media(max-width:600px){.hero{border-radius:20px}.hero h1{font-size:30px}.gcard,.course-card{padding:17px}.card,.question-box{border-radius:16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

:root{--design-surface:var(--card)}
html[data-dark]{--design-soft:#203b46;--design-accent:#15828c}
.hero{padding:36px;gap:24px;margin-bottom:32px}
.hero-image{background:transparent;padding:14px}
.hero-image img{width:100%;max-width:220px;filter:drop-shadow(0 12px 18px #087d871a)}
.brand strong{letter-spacing:-.035em}
.course-card{border-top:3px solid var(--design-accent)}
.study-readiness,.study-guide{border-radius:18px}
@media(max-width:700px){.hero{grid-template-columns:1fr;padding:24px}.hero-image{display:none}}

/* Richer subject cards, following the Matematika visual hierarchy. */
:root{--design-accent:#3558c9;--design-soft:#eef2ff}
.hero{background:linear-gradient(115deg,var(--design-soft),var(--card) 85%)}
.hero h1 em{font-style:normal;color:var(--primary)}
.hero .actions>a:first-child{background:#3558c9;color:white;border-color:#3558c9;font-weight:800;box-shadow:0 5px 14px #3558c927}
.hero .actions>a{padding:12px 16px;border-radius:13px}
.hero-image{position:relative;border-radius:50%;background:radial-gradient(circle,#ddf5f2 0%,transparent 70%)}
.grade-grid{gap:20px}
.grade-card{--grade-color:#247bc2;--grade-soft:#eaf5ff;position:relative;overflow:hidden;border-top:0;border:1px solid var(--line);border-bottom:3px solid var(--grade-color);padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.grade-start{--grade-color:#c66b16;--grade-soft:#fff3e4}.grade-7{--grade-color:#7257c4;--grade-soft:#f1edff}.grade-8{--grade-color:#c64481;--grade-soft:#fff0f7}.grade-9{--grade-color:#198275;--grade-soft:#e4f7f0}.grade-10{--grade-color:#3e66ca;--grade-soft:#edf1ff}.grade-11{--grade-color:#8a54b3;--grade-soft:#f6edff}.grade-abitur{--grade-color:#a87913;--grade-soft:#fff7df}
.grade-card:before{content:"";position:absolute;right:-25px;top:-30px;width:125px;height:125px;border-radius:50%;background:var(--grade-soft);pointer-events:none}
.grade-art{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:var(--grade-soft);color:var(--grade-color);margin-bottom:8px}
.grade-art svg{width:46px;height:46px}
.grade-label{font-size:10px;letter-spacing:.09em;font-weight:800;color:var(--muted)}
.grade-card h3{font-size:1.4rem;margin:0}.grade-card p{font-size:.95rem;line-height:1.75;flex:1;margin:4px 0 16px}
.grade-card .progress-bar{width:100%;margin-top:8px;background:var(--grade-soft)}
.grade-card .progress-bar span{background:var(--grade-color)}
.home-navigation .navigation-grid>a{padding:14px;border-radius:15px;box-shadow:0 3px 12px #152b4907}
.home-navigation h2,h2.section-heading{font-weight:800}
.course-heading{border:1px solid var(--line);border-radius:22px;padding:24px;background:linear-gradient(110deg,var(--design-soft),var(--card))}
.lesson-list .course-card{border-top:0;border-left:3px solid var(--primary)}
html[data-dark]{--design-soft:#24324c;--design-accent:#3558c9}
html[data-dark] .hero .eyebrow{color:#b4c7ff}
html[data-dark] .grade-card{--grade-soft:#283846}
html[data-dark] .grade-art{color:var(--ink)}
html[data-dark] .hero-image{background:transparent}
@media(max-width:700px){.hero-image{display:grid;position:absolute;right:18px;top:18px;padding:0;width:44px;height:44px}.hero .eyebrow{padding-right:48px;min-height:36px}.hero-image img{width:44px}.grade-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.grade-card{padding:16px}.grade-card h3{font-size:1.15rem}.grade-card p{font-size:.85rem}.grade-art{width:52px;height:52px}.grade-art svg{width:38px;height:38px}.grade-label{font-size:9px}}
@media(max-width:360px){.grade-grid{grid-template-columns:1fr}}
html[data-large-zoom] .grade-grid{grid-template-columns:1fr}

.grade-card> *{position:relative}

/* Reading and navigation polish: quiet surfaces, clear hierarchy. */
.hero{box-shadow:0 12px 36px #243b6410}
.hero .eyebrow,.hero .kicker{display:inline-block;padding:6px 10px;border-radius:9px;background:var(--design-surface);border:1px solid var(--line);font-size:12px}
.home-navigation{padding-block:8px 16px}
.navigation-grid>a{background:var(--design-surface);border:1px solid var(--line);transition:border-color .15s,box-shadow .15s}
.navigation-grid>a[aria-current=page]{background:var(--design-soft);border-color:var(--design-accent)}
.lesson-toc{background:var(--design-surface);border:1px solid var(--line);padding:8px;border-radius:16px;gap:6px}
.lesson-toc a{border-radius:9px;padding:7px 10px;text-decoration:none;background:var(--design-soft)}
.course-meter,.gh-ring{background:var(--design-surface);box-shadow:0 4px 14px #243b640b}
.lesson-number,.learning-step-number{border-radius:10px;font-weight:800}
.lesson-list{border-radius:18px;box-shadow:0 4px 18px #243b6408}
.lesson-row{padding-block:18px}
.lesson-row-main strong{line-height:1.5}
.lesson-row:focus-visible{outline-offset:-4px}
.lesson section,.q-solution,.worked-example{box-shadow:0 4px 18px #243b6407}
.core-idea,.rule{border-radius:14px}
.lesson h2{letter-spacing:-.02em}
.steps li{padding-block:8px}
.steps li::marker{font-weight:800;color:var(--primary,var(--brand))}
.question-box{border-top:3px solid var(--design-accent)}
.option:not(.correct):not(.wrong):not(.selected):hover{background:var(--design-soft)}
.option b{border-radius:8px;min-width:28px;text-align:center}
input[type=search]:focus{box-shadow:0 0 0 4px var(--design-soft)}
.progress-bar,.gprog{height:7px;border-radius:20px;overflow:hidden}
.progress-bar span,.gprog i{border-radius:inherit}
@media(prefers-reduced-motion:reduce){.navigation-grid>a{transition:none}}

.hero .eyebrow{margin-right:48px;padding-right:10px;min-height:0}
.grade-card{background:linear-gradient(145deg,var(--grade-soft),var(--card) 50%)}
.chapter-heading .subject-icon{width:44px;height:44px;border-radius:14px;font-weight:800}
.study-readiness{background:linear-gradient(120deg,var(--design-soft),var(--card));border:1px solid var(--line)}
.practice-start{background:linear-gradient(120deg,var(--design-soft),var(--card))}
@media(max-width:600px){.hero .eyebrow{font-size:10px}.lesson-row{padding-block:15px}}

/* Final home composition: generous spacing and consistent entry points. */
.hero{border-radius:30px;border-color:color-mix(in srgb,var(--design-accent) 18%,var(--line))}
.hero .actions,.hero-cta{padding-top:6px}
.home-navigation h2,.sec-h{letter-spacing:-.025em}
.home-navigation .navigation-grid>a{min-height:64px;padding:14px 16px;background:linear-gradient(120deg,var(--design-surface),var(--design-soft));box-shadow:0 4px 15px #233b6408}
.home-navigation .navigation-grid>a .nav-icon{width:34px;height:34px;flex-shrink:0}
.course-card,.gcard{transition:box-shadow .18s,border-color .18s}
.gcard:focus-visible,.course-card:focus-visible{outline-offset:-4px}
@media(hover:hover){.gcard.ready:hover,.grade-card:hover{box-shadow:0 12px 30px #233b6420}}
@media(max-width:600px){.hero{border-radius:24px}.home-navigation .navigation-grid>a{padding:12px;min-height:60px}}
@media(prefers-reduced-motion:reduce){.course-card,.gcard{transition:none}}

.study-journey{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:36px 0}
.study-journey article{padding:24px;border:1px solid var(--line);border-top:3px solid #3558c9;border-radius:20px;background:linear-gradient(145deg,var(--design-soft),var(--card) 70%);box-shadow:0 6px 22px #233b640b}
.study-journey h3{margin:16px 0 10px}.study-journey p{color:var(--muted);font-size:.95rem;margin:0}
.hero>div>p.muted{border-top:1px solid var(--line);padding-top:18px;margin-top:24px;font-size:.9rem}
.grade-art{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--grade-color) 16%,transparent)}
@media(max-width:700px){.study-journey{grid-template-columns:1fr}.study-journey article{padding:20px}}

/* Measured against Matematika at 320, 390, 768 and 1440 px. */
body{font-size:17px}
#main{max-width:1120px;padding:24px 20px 40px}
.brand-row{height:64px;padding:0 20px}
.brand{gap:12px}.brand img{width:64px;height:50px}.brand small{line-height:1.5}
.hero{display:block;width:min(1140px,calc(100vw - 32px));max-width:none;margin:0 0 24px;left:50%;transform:translateX(-50%);padding:48px 289px 48px 45px}
.hero-image{position:absolute;right:45px;top:50%;transform:translateY(-50%);width:190px;height:190px;padding:0}
.hero-image img{width:190px;max-width:190px}
.hero h1{margin:16px 0 14px}.hero p{font-size:17px;margin:0 0 18px}
.hero .actions{margin:18px 0;gap:12px}
.hero .actions .button{font-size:16px;font-weight:700;line-height:1.35;height:auto;min-height:52px;padding:12px 16px}
.hero .actions .nav-icon{width:26px;height:26px}
.hero .eyebrow{margin:0}
.navigation-grid{gap:10px}
.home-navigation{padding:24px 0}
.home-navigation .navigation-grid>a{min-height:44px;padding:12px 18px;font-size:16px;line-height:1.35;font-weight:700}
.home-navigation .navigation-grid>a .nav-icon{width:30px;height:30px}
.grade-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:16px}
.grade-card{padding:22px;gap:4px}
@media(max-width:999px){.hero{padding:36px}.hero-image{display:none}}
@media(max-width:900px){.brand-row{height:73px;padding:10px 20px;gap:8px}}
@media(max-width:600px){body{font-size:16px}#main{padding:16px 16px 32px}.brand-row{padding-inline:16px}.hero{padding:22px}.hero p{font-size:16px}.grade-card{padding:18px}.brand{gap:12px}.brand img{width:64px;height:50px}.navigation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:360px){#main{padding-inline:10px}.brand-row{height:64px;padding-inline:10px}.brand{gap:6px}.brand img{width:40px;height:34px}.brand small{font-size:11px}.brand strong{font-size:18px}.navigation-grid{grid-template-columns:1fr}}
html[data-large-zoom] .hero{padding:22px}html[data-large-zoom] .hero-image{display:none}
html[data-large-zoom] .brand-row{height:auto;min-height:64px}

.hero p{max-width:none}
.hero .actions>a:first-child{min-width:218px}

@media(min-width:600px){.navigation-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:340px) and (max-width:360px){#main{padding-inline:16px}.brand-row{height:73px;padding-inline:16px}.brand{gap:12px}.brand img{width:64px;height:50px}.brand small{font-size:13px}.brand strong{font-size:28px}.navigation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:561px) and (max-width:600px){body{font-size:17px}#main{padding-inline:20px}.brand-row{padding-inline:20px}}

@media(max-width:600px){.grade-grid{gap:12px}}

.exam-verdict{padding:10px 14px;border-radius:10px;border:2px solid #b23b42}.exam-verdict[data-correct="true"]{border-color:#25814b}

/* Learning hierarchy: school path, references, then optional tools. */
.home-navigation .common-links {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.course-finish {margin-top:28px;margin-bottom:28px;padding-top:24px;padding-bottom:24px;border-top:1px solid var(--line)}
.course-finish p {max-width:65ch;line-height:1.6}
.gh-actions,.course-heading + .actions {gap:12px}
@media(max-width:600px){.home-navigation .common-links{grid-template-columns:1fr}.gh-actions .btn{width:100%;white-space:normal;text-align:left}.course-finish .primary{width:100%;white-space:normal}}

.course-intro,.chapter-intro{max-width:75ch;line-height:1.7;overflow-wrap:anywhere}.chapter-intro{margin:12px 0 20px;padding:0 16px}.course-intro{margin:16px 0}

.concept-map{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:20px 0}.concept-map article{padding:18px;background:var(--soft);border:1px solid var(--line);border-radius:14px}.science-figure{width:100%;max-width:400px;display:block;margin:20px auto}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse}td,th{padding:12px;border:1px solid var(--line);text-align:left}