/* Enthy landing on the glass system. One sky, Manrope, real glass, no frames around the page.
   Tokens come from glass.css (body.enthy-glass); everything here is scoped to .startseite. */
.startseite { --ink: #183f3b; --ink-2: #33524f; --ink-soft: #5d7a7c; --accent: #0f6e73; --accent-2: #2d8a8f; --line: rgb(24 56 50 / 10%);
  --frame: min(1240px, calc(100% - 96px)); color: var(--ink); line-height: 1.6; overflow-x: clip; -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; background: #e8eee9; }
.startseite *, .startseite *::before, .startseite *::after { box-sizing: border-box; }
.startseite a { color: inherit; }
.startseite p { margin: 0; }
.startseite :is(h1,h2,h3,h4,h5) { margin: 0; font-weight: 700; letter-spacing: -.045em; line-height: 1.05; text-wrap: balance; }
.startseite :is(h1,h2) em { font-style: normal; color: var(--accent); }
.startseite button, .startseite input { font-family: inherit; }
.startseite button, .startseite a { -webkit-tap-highlight-color: transparent; }
.startseite [hidden] { display: none !important; }
.startseite :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.startseite section[id] { scroll-margin-top: 110px; }
.startseite .section-frame { width: var(--frame); margin-inline: auto; }
.startseite main { position: relative; z-index: 1; }
.startseite .studio-sky { z-index: 0; }
/* A scrolling page cannot afford four blurred, animated layers under every glass surface. The landing sky is
   the same colour fields as soft gradients, no filter, one slow drift on transform only. */
.startseite .studio-sky i { filter: none; }
.startseite .studio-sky .sky-a { background: radial-gradient(circle at 42% 42%, #b3dcc9 0%, #adD3c6 26%, rgb(169 207 196 / 55%) 46%, transparent 70%); }
.startseite .studio-sky .sky-b { background: radial-gradient(circle, #f8ecd0 0%, #f4e8d0 24%, rgb(242 230 207 / 55%) 46%, transparent 70%); }
.startseite .studio-sky .sky-c { background: radial-gradient(circle, #96c6cb 0%, #a1cbcb 26%, rgb(169 207 204 / 55%) 48%, transparent 70%); }
.startseite .studio-sky .sky-d { background: radial-gradient(circle, rgb(111 168 158 / 85%) 0%, rgb(111 168 158 / 40%) 36%, transparent 68%); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; padding: 12px 20px; background: var(--ink); color: #fff !important; border-radius: 12px; }
.skip-link:focus { top: 20px; }
.section-label { color: var(--ink-soft); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

/* ---------- Glass material ---------- */
.glass { border: 1px solid var(--gl-edge); background: var(--gl-bg); box-shadow: var(--gl-shadow), var(--gl-inner), 0 0 0 1px var(--gl-ring); backdrop-filter: var(--gl-blur); -webkit-backdrop-filter: var(--gl-blur); }
.glass-2 { border: 1px solid var(--gl-edge); background: var(--gl-bg-2); box-shadow: var(--gl-shadow), var(--gl-inner), 0 0 0 1px var(--gl-ring); backdrop-filter: var(--gl-blur); -webkit-backdrop-filter: var(--gl-blur); }

/* ---------- Buttons ---------- */
.startseite .button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 50px; padding: 12px 22px; border: 1px solid var(--gl-edge); border-radius: 999px; background: rgb(255 255 255 / 72%); color: var(--ink); font-size: 14px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; text-decoration: none; cursor: pointer; box-shadow: 0 14px 40px -18px rgb(24 56 50 / 30%), var(--gl-inner); transition: transform .22s cubic-bezier(.2,.8,.2,1), background .2s, box-shadow .22s; }
.startseite .button span[aria-hidden] { font-size: 17px; line-height: 1; opacity: .8; transition: transform .22s; }
.startseite .button:hover { background: var(--pill-active); transform: translateY(-2px); box-shadow: 0 22px 50px -20px rgb(24 56 50 / 40%), var(--gl-inner); }
.startseite .button:hover span[aria-hidden] { transform: translateX(3px); }
.startseite .button-primary, .startseite .button-dark { border-color: #ffffff30; background: linear-gradient(145deg, #2f7f84, #16545b); color: #fff; box-shadow: 0 16px 36px -14px #14484c99, inset 0 1px #ffffff55; }
.startseite .button-primary:hover, .startseite .button-dark:hover { background: linear-gradient(145deg, #35898e, #1a5e66); box-shadow: 0 22px 44px -16px #14484cb0, inset 0 1px #ffffff66; }
.startseite .button-small { min-height: 42px; padding: 8px 16px; font-size: 13px; gap: 10px; }
.startseite .button:active { transform: translateY(0); }
.startseite .button:disabled { opacity: .45; cursor: default; transform: none; }

/* ---------- Header ---------- */
.startseite .site-header { position: sticky; top: 14px; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: calc(100% - 40px); max-width: 1292px; min-height: 68px; margin: 14px auto 0; padding: 10px 12px 10px 18px; border-radius: 999px; transition: box-shadow .25s, background .25s, max-width .75s cubic-bezier(.2, .8, .2, 1), opacity .4s; }
/* While the film plays the header steps back: wordmark and one call to action in a small pill, the rest on hover. */
@media (min-width: 901px) {
  .startseite .site-header.is-quiet { max-width: 380px; opacity: .78; }
  .startseite .site-header.is-quiet:hover, .startseite .site-header.is-quiet:focus-within { opacity: 1; }
  .startseite .site-header.is-quiet .site-nav, .startseite .site-header.is-quiet .desktop-only { position: absolute; opacity: 0; pointer-events: none; }
}
/* The header is one glass surface for the whole page: its white fill fades with the stage light, so the dark room shows through instead of a second, darker fill snapping in. */
.startseite .site-header { --stage-on: 0; --hdr-white: 44%; background: linear-gradient(rgb(18 40 43 / calc(24% * var(--stage-on))), rgb(18 40 43 / calc(24% * var(--stage-on)))), linear-gradient(rgb(255 255 255 / calc(var(--hdr-white) * (1 - var(--stage-on)))), rgb(255 255 255 / calc(var(--hdr-white) * (1 - var(--stage-on))))); }
.startseite .site-header.is-condensed { --hdr-white: 62%; }
.startseite .wordmark { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-size: 22px; font-weight: 800; letter-spacing: -.045em; line-height: 1; text-decoration: none; }
.brand-symbol { flex: none; display: block; width: 26px; height: 26px; border-radius: 8px; }
.startseite .site-nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; padding: 4px; border-radius: 999px; background: var(--gl-bg-3); border: 1px solid var(--gl-edge); }
.startseite .site-nav a { padding: 8px 14px; border-radius: 999px; color: var(--ink-soft); font-size: 13px; font-weight: 600; text-decoration: none; transition: background .18s, color .18s; }
.startseite .site-nav a:hover { background: var(--pill-active); color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 14px; }
.startseite .text-link { color: var(--ink-soft); font-size: 13px; font-weight: 600; text-decoration: none; }
.startseite .text-link:hover { color: var(--ink); }
.menu-toggle { display: none; width: 42px; height: 42px; padding: 10px; border: 1px solid var(--gl-edge); border-radius: 50%; background: var(--gl-bg-3); cursor: pointer; }
.menu-toggle i { display: block; width: 18px; height: 1.5px; margin: 5px auto; background: var(--ink); border-radius: 2px; }

/* ---------- Hero. The copy stands left from the start; the stage on the right tells the story and writes
   the headline line by line: material arrives, the system connects and draws it in, the course is built
   where it stays, then it turns through disciplines while "Fuer jedes Fach." completes the headline. ---------- */
.startseite .hero { position: relative; width: 100%; min-height: 100svh; margin-top: -82px; padding: 0; overflow: clip; isolation: isolate; --gutter: clamp(24px, 6vw, 110px); }
.hero-stage { position: absolute; inset: 0; }
.scene-space { position: absolute; inset: 0; }
.threads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.threads path { fill: none; opacity: 0; }
.threads .thread-core { stroke: rgb(24 56 50 / 40%); stroke-width: 1.1; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }
.threads .thread-flow { stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: .07 1; stroke-dashoffset: 1.05; stroke-linecap: round; }
.threads .thread-peer { stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 2 6; stroke-linecap: round; }

/* The system: a ring of glass with the mark at its centre. */
.core { position: absolute; left: 0; top: 0; z-index: 2; width: 300px; height: 300px; border-radius: 50%; transform: translate(-50%, -50%) scale(.72); opacity: 0; background: radial-gradient(circle at 50% 42%, rgb(255 255 255 / 78%), rgb(232 244 241 / 40%) 58%, rgb(255 255 255 / 10%) 100%); box-shadow: 0 60px 140px -50px rgb(24 56 50 / 55%), inset 0 1px 0 #fff, inset 0 0 80px rgb(255 255 255 / 60%), 0 0 0 1px rgb(255 255 255 / 70%); transition: opacity .7s, transform .9s cubic-bezier(.2,.8,.2,1); }
.core.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.core.is-off { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
.core.is-spinning { transform: translate(-50%, -50%) scale(1.05); }
.core-ring { position: absolute; border-radius: 50%; pointer-events: none; }
.core-ring-outer { inset: -24px; border: 1px dashed rgb(15 110 115 / 35%); animation: core-spin 60s linear infinite; }
.core-ring-inner { inset: 30px; border: 1px solid rgb(255 255 255 / 85%); box-shadow: inset 0 0 0 1px rgb(24 56 50 / 6%); }
.core.is-spinning .core-ring-outer { animation-duration: 7s; border-style: solid; border-color: rgb(15 110 115 / 40%); }
.core.is-spinning .core-ring-inner { animation: core-spin 5s linear infinite reverse; border-style: dashed; border-color: rgb(15 110 115 / 35%); }
@keyframes core-spin { to { transform: rotate(360deg); } }
.core-pulse { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0; pointer-events: none; }
.core.is-pulse .core-pulse { animation: core-pulse 1.1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes core-pulse { 0% { opacity: .8; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.45); } }
.core-mark { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; border-radius: 20px; transform: translate(-50%, -50%); background: url('/static/mark.svg') center / contain no-repeat; box-shadow: 0 24px 50px -20px rgb(24 56 50 / 70%), inset 0 1px 0 rgb(255 255 255 / 40%); }
.core.is-on .core-mark { animation: core-breathe 3.4s ease-in-out infinite; }
@keyframes core-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 24px 50px -20px rgb(24 56 50 / 70%), inset 0 1px 0 rgb(255 255 255 / 40%); } 50% { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 30px 60px -22px rgb(24 56 50 / 80%), 0 0 40px rgb(15 110 115 / 22%), inset 0 1px 0 rgb(255 255 255 / 40%); } }
.core.is-on .core-ring-inner { animation: ring-breathe 3.4s ease-in-out infinite; }
@keyframes ring-breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.03); opacity: 1; } }
.core.is-spinning .core-mark { animation: core-mark-turn 1.3s cubic-bezier(.3,.7,.2,1) both; }
@keyframes core-mark-turn { 0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); } 50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.14); } 100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); } }
.core-status { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); padding: 7px 14px; border-radius: 999px; border: 1px solid var(--gl-edge); background: rgb(255 255 255 / 80%); color: var(--ink-soft); font-size: 10.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; box-shadow: var(--gl-inner); }
.core-status b { color: var(--accent); font-weight: 800; }

/* The course: built where it stays. */
.scene-course { --roll: 520ms; position: absolute; left: 0; top: 0; z-index: 3; width: min(560px, 40vw); padding: 24px 24px 20px; border-radius: 30px; opacity: 0; transform: translate(-50%, -50%) scale(.94); transition: opacity .6s, transform 1s cubic-bezier(.2,.8,.2,1); }
.scene-course.is-on { opacity: 1; transform: translate(-50%, -50%); }
.scene-course::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(112deg, transparent 38%, #ffffffaa 50%, transparent 62%); background-size: 260% 100%; background-position: 120% 0; opacity: 0; pointer-events: none; }
.scene-course.is-complete::before { animation: course-sweep 1.3s cubic-bezier(.3,.7,.2,1) both; }
@keyframes course-sweep { 0% { opacity: 0; background-position: 120% 0; } 20% { opacity: 1; } 100% { opacity: 0; background-position: -60% 0; } }
.course-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.course-head small { display: block; color: var(--ink-soft); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.course-head h3 { margin-top: 6px; font-size: 26px; letter-spacing: -.045em; }
.course-mark { flex: none; width: 40px; height: 40px; border-radius: 13px; background: url('/static/mark.svg') center / contain no-repeat; box-shadow: 0 14px 30px -14px rgb(24 56 50 / 60%); }
.course-rows { display: grid; gap: 7px; margin-top: 20px; }
.course-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 9px 13px; border-radius: 15px; border: 1px solid var(--gl-edge); background: rgb(255 255 255 / 34%); box-shadow: inset 0 1px 0 #ffffffc0; transition: background .4s, box-shadow .4s; }
.course-row.is-filled { background: rgb(255 255 255 / 70%); box-shadow: inset 0 1px 0 #fff, 0 12px 30px -18px rgb(24 56 50 / 40%); }
.row-index { flex: none; width: 22px; color: var(--ink-soft); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.row-title { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-count { flex: none; min-width: 28px; color: var(--ink-soft); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; transition: color .3s; }
.course-row.is-filled .row-count { color: var(--accent); }
.row-slot { flex: none; width: 104px; height: 24px; }
.row-check { flex: none; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 10.5px; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .35s cubic-bezier(.2,.8,.2,1); }
.row-check::before { content: '✓'; font-weight: 800; }
.course-row.is-filled .row-check { opacity: 1; transform: scale(1); }
.course-questions { display: grid; gap: 5px; margin-top: 14px; }
.course-question { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 13px; border-radius: 12px; background: rgb(15 110 115 / 7%); font-size: 12px; font-weight: 600; opacity: 0; transform: translateX(14px); transition: opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1); }
.course-question span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.course-question small { flex: none; padding: 3px 9px; border-radius: 999px; background: rgb(255 255 255 / 85%); color: var(--accent); font-size: 9.5px; font-weight: 800; letter-spacing: .04em; }
.scene-course.is-live .course-question { opacity: 1; transform: none; }
.scene-course.is-live .course-question:nth-child(2) { transition-delay: .18s; }
.scene-course.is-live .course-question:nth-child(3) { transition-delay: .36s; }
.course-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 10.5px; font-weight: 600; }
.course-foot b { color: var(--ink); font-weight: 700; }
/* Turning through disciplines: the frame stays, the content rolls once per discipline, calm and staged. */
.course-head h3, .row-title, .row-count, .course-question, .course-foot span { transition: opacity calc(var(--roll) * .55) cubic-bezier(.2,.8,.2,1), transform calc(var(--roll) * .7) cubic-bezier(.2,.8,.2,1); }
.scene-course.is-turning :is(.course-head h3, .row-title, .row-count, .course-foot span, .course-question) { opacity: 0; transform: translateY(-9px); }
.scene-course.is-turning .course-row:nth-child(2) :is(.row-title, .row-count) { transition-delay: calc(var(--roll) * .08); }
.scene-course.is-turning .course-row:nth-child(3) :is(.row-title, .row-count) { transition-delay: calc(var(--roll) * .16); }
.scene-course.is-turning .course-row:nth-child(4) :is(.row-title, .row-count) { transition-delay: calc(var(--roll) * .24); }
.scene-course.is-arriving :is(.course-head h3, .row-title, .row-count, .course-foot span, .course-question) { transition-duration: 0s; transition-delay: 0s; opacity: 0; transform: translateY(11px); }

/* Material: each fragment is a small, specific object. */
.shard { position: absolute; left: 0; top: 0; z-index: 4; display: grid; gap: 3px; width: 176px; padding: 11px 14px 12px; border-radius: 15px; border: 1px solid var(--gl-edge); background: linear-gradient(135deg, rgb(255 255 255 / 84%), rgb(255 255 255 / 64%)); box-shadow: 0 30px 60px -26px rgb(24 56 50 / 55%), var(--gl-inner); transform-origin: 0 0; pointer-events: none; }
.shard small { color: var(--ink-soft); font-size: 8.5px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.shard span { color: var(--ink); font-size: 12px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
.shard.kind-note { width: 156px; background: linear-gradient(135deg, rgb(253 249 224 / 92%), rgb(250 243 210 / 78%)); border-color: rgb(255 255 255 / 90%); }
.shard.kind-note span { font-weight: 500; font-style: italic; }
.shard.kind-exam { background: linear-gradient(135deg, rgb(255 255 255 / 88%), rgb(226 240 236 / 78%)); }
.shard-opts { display: flex; gap: 5px; margin-top: 6px; }
.shard-opts i { display: block; width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgb(24 56 50 / 25%); background: rgb(255 255 255 / 70%); }
.shard-opts i.on { background: var(--accent); border-color: var(--accent); }
.shard.kind-photo { background: linear-gradient(140deg, rgb(243 238 226 / 94%), rgb(228 222 208 / 84%)); border-color: rgb(255 255 255 / 80%); }
.shard.kind-photo::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, rgb(255 255 255 / 30%), transparent 40%, rgb(24 56 50 / 6%)); pointer-events: none; }
.shard.kind-photo span { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; }
.shard.kind-slide { padding-top: 27px; }
.shard.kind-slide::before { content: ''; position: absolute; left: 14px; right: 14px; top: 10px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) 0 38%, rgb(15 110 115 / 22%) 38%); }
.shard.kind-page { width: 164px; }
.shard-lines { display: grid; gap: 4px; margin-top: 7px; }
.shard-lines i { display: block; height: 3px; border-radius: 2px; background: rgb(24 56 50 / 16%); }
.shard-lines i:nth-child(2) { width: 82%; }
.shard-lines i:nth-child(3) { width: 60%; }
.shard.kind-formula { width: 146px; }
.shard.kind-formula span { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 500; letter-spacing: 0; font-size: 13px; }
.shard-chapter { position: absolute; right: -7px; top: -10px; display: grid; place-items: center; min-width: 26px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .1em; opacity: 0; transform: scale(.5); box-shadow: 0 8px 18px -8px rgb(15 110 115 / 80%); transition: opacity .25s, transform .35s cubic-bezier(.2,.8,.2,1); }
.shard-chapter::before { content: attr(data-chapter); }
.shard.is-tagged .shard-chapter { opacity: 1; transform: scale(1); }

/* The copy: present from the start, written by the story. */
.hero-copy { position: absolute; left: var(--gutter); top: 50%; z-index: 6; width: min(520px, 34vw); transform: translateY(-50%); }
.startseite .hero h1 { display: grid; gap: 2px; font-size: clamp(46px, 5.2vw, 78px); line-height: 1; letter-spacing: -.055em; font-weight: 800; }
.startseite .hero h1 .line { display: block; opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.startseite .hero h1 .line.is-in { opacity: 1; transform: none; }
.startseite .hero h1 em { font-style: normal; color: var(--accent); }
.hero-copy [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.hero.is-settled .hero-copy [data-reveal] { opacity: 1; transform: none; }
.hero.is-settled .hero-copy .hero-lead { transition-delay: .1s; }
.hero.is-settled .hero-copy .hero-actions { transition-delay: .22s; }
.hero.is-settled .hero-copy .hero-note { transition-delay: .34s; }
.startseite .hero .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 7px 14px 7px 9px; border-radius: 999px; border: 1px solid var(--gl-edge); background: rgb(255 255 255 / 55%); color: var(--ink-soft); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow-dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgb(15 110 115 / 14%); }
.startseite .hero-lead { max-width: 460px; margin: 24px 0 28px; color: var(--ink-2); font-size: 16.5px; line-height: 1.7; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.startseite .hero-note { margin-top: 18px; color: var(--ink-soft); font-size: 12px; font-weight: 500; }
.hero-skip { position: absolute; right: var(--gutter); bottom: 30px; z-index: 6; padding: 9px 16px; border: 1px solid var(--gl-edge); border-radius: 999px; background: rgb(255 255 255 / 60%); color: var(--ink-soft); font-size: 12px; font-weight: 650; cursor: pointer; visibility: visible; transition: opacity .4s, visibility 0s, background .2s; }
.hero-skip:hover { background: rgb(255 255 255 / 90%); color: var(--ink); }
.hero.is-settled .hero-skip { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .4s, visibility 0s .4s, background .2s; }
.hero-replay { position: absolute; left: var(--gutter); bottom: 26px; z-index: 6; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border: 1px solid var(--gl-edge); border-radius: 999px; background: rgb(255 255 255 / 55%); color: var(--ink-soft); font-size: 12px; font-weight: 650; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .6s 1.2s, background .2s, color .2s; }
.hero-replay span { font-size: 15px; line-height: 1; }
.hero-replay:hover { background: rgb(255 255 255 / 90%); color: var(--ink); }
.hero.is-settled .hero-replay { opacity: 1; pointer-events: auto; }
.scroll-cue { position: absolute; left: 50%; bottom: 24px; z-index: 6; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; color: var(--ink-soft); font-size: 12px; font-weight: 600; text-decoration: none; transform: translateX(-50%); opacity: 0; transition: color .2s, opacity .6s 1.2s; }
.hero.is-settled .scroll-cue { opacity: 1; }
.scroll-cue:hover { color: var(--ink); }
.scroll-cue span { display: block; animation: cue-bob 2.2s ease-in-out infinite; }
@keyframes cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (max-width: 1120px) { .hero-copy { width: min(440px, 36vw); } .startseite .hero h1 { font-size: clamp(40px, 4.8vw, 60px); } .scene-course { width: min(480px, 44vw); } }
@media (max-width: 900px) {
  .startseite .hero { min-height: 100svh; margin-top: -74px; --gutter: 20px; }
  .core { width: 190px; height: 190px; }
  .core-mark { width: 50px; height: 50px; border-radius: 16px; }
  .core-ring-outer { inset: -18px; }
  .core-ring-inner { inset: 22px; }
  .core-status { bottom: 14px; font-size: 9px; }
  .scene-course { width: calc(100% - 2 * var(--gutter)); padding: 16px 14px 12px; border-radius: 22px; }
  .course-head h3 { font-size: 19px; }
  .course-mark { width: 34px; height: 34px; }
  .course-row { min-height: 48px; padding: 8px 12px; }
  .row-title { font-size: 13px; }
  .course-questions { display: none; }
  .row-slot { width: 88px; }
  .shard, .shard.kind-note, .shard.kind-page, .shard.kind-formula { width: 132px; padding: 9px 11px 10px; }
  .shard.kind-slide { padding-top: 24px; }
  .shard span { font-size: 11px; }
  .hero-copy { top: 78px; left: var(--gutter); right: var(--gutter); width: auto; transform: none; }
  .startseite .hero h1 { font-size: clamp(34px, 9.4vw, 52px); }
  .hero.is-settled .hero-copy { padding: 18px; border-radius: 24px; background: rgb(255 255 255 / 78%); border: 1px solid var(--gl-edge); box-shadow: var(--gl-shadow), var(--gl-inner); }
  .hero.is-settled .scene-course, .hero.is-settled .shard, .hero.is-settled .threads { opacity: 0 !important; pointer-events: none; transition: opacity .5s; }
  .startseite .hero-lead { font-size: 14.5px; margin: 14px 0 16px; }
  .hero-actions .button { flex: 1 1 auto; min-height: 46px; font-size: 13px; }
  .startseite .hero .eyebrow { margin-bottom: 14px; }
  .startseite .hero-note { margin-top: 12px; font-size: 11px; }
  .hero-skip { right: 16px; bottom: 18px; }
  .hero-replay { left: 16px; bottom: 18px; }
  .scroll-cue { display: none; }
}

/* ---------- The dark stage: the lights go down for the film and come back up for the offer ---------- */
.stage-dark { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: radial-gradient(120% 90% at 20% 10%, #16363a 0%, #0f2427 45%, #0a1719 100%); opacity: 0; pointer-events: none; transition: opacity .35s linear; }
/* A slow light in the room: a teal spot behind the stage, a cooler one high on the left, a warm breath top right. Transform only. */
.stage-dark::before { content: ""; position: absolute; inset: -18%; background:
  radial-gradient(42% 46% at 60% 58%, rgb(58 160 166 / 24%), transparent 70%),
  radial-gradient(30% 38% at 16% 26%, rgb(111 211 207 / 12%), transparent 70%),
  radial-gradient(34% 30% at 84% 10%, rgb(236 196 128 / 7%), transparent 70%);
  animation: stage-light 34s ease-in-out infinite alternate; }
@keyframes stage-light { to { transform: translate3d(2.5%, -2%, 0) scale(1.07); } }
/* Grain and a vignette, so the dark is a surface and not a fill. */
.stage-dark::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>") repeat; background-size: 240px 240px; opacity: .06; box-shadow: inset 0 0 220px rgb(0 0 0 / 55%); }
@media (prefers-reduced-motion: reduce) { .stage-dark::before { animation: none; } }
.startseite .preview { position: relative; z-index: 1; padding: 110px 0 120px; }
.startseite.is-dark .preview, .startseite .preview.is-dark {
  --ink: #e9f3f0; --ink-2: #c6d9d5; --ink-soft: #93b2af; --accent: #6fd3cf; --accent-2: #8fe0dc; --line: rgb(206 242 236 / 12%);
  --gl-bg: rgb(22 46 48 / 58%); --gl-bg-2: rgb(26 52 54 / 72%); --gl-bg-3: rgb(22 46 48 / 44%);
  --gl-edge: rgb(176 224 218 / 18%); --gl-ring: rgb(0 0 0 / 30%);
  --gl-inner: inset 0 1px 0 rgb(206 242 236 / 14%), inset 0 -1px 0 rgb(0 0 0 / 20%);
  --gl-shadow: 0 32px 80px -28px rgb(0 0 0 / 70%), 0 2px 6px rgb(0 0 0 / 20%);
  --pill-bg: rgb(255 255 255 / 6%); --pill-active: rgb(255 255 255 / 15%); --hair: rgb(206 242 236 / 12%);
}
.startseite .site-header.is-dark { border-color: rgb(176 224 218 / 16%); color: #e9f3f0; box-shadow: 0 24px 60px -30px rgb(0 0 0 / 60%); }
.startseite .site-header.is-dark .site-nav { background: rgb(255 255 255 / 6%); border-color: rgb(176 224 218 / 14%); }
.startseite .site-header.is-dark .site-nav a { color: #b6cfcc; }
.startseite .site-header.is-dark .site-nav a:hover { background: rgb(255 255 255 / 10%); color: #fff; }
.startseite .site-header.is-dark .wordmark, .startseite .site-header.is-dark .header-actions > a:not(.button) { color: #e9f3f0; }
.startseite .site-header.is-dark .button:not(.button-primary):not(.button-dark) { background: rgb(255 255 255 / 10%); border-color: rgb(176 224 218 / 18%); color: #e9f3f0; }
.startseite .site-header.is-dark .menu-toggle i { background: #e9f3f0; }
.preview-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 26px; }
.preview-head .section-label { margin-bottom: 14px; }
.startseite .preview-head h2 { font-size: clamp(36px, 4.2vw, 52px); }
.scroll-preference { color: inherit; font: inherit; font-size: 11.5px; background: transparent; border: 1px solid rgb(255 255 255 / 25%); border-radius: 30px; padding: 6px 12px; cursor: pointer; }
.scroll-preference:disabled { cursor: default; opacity: .7; }

/* ---------- Access: two glass cards that tilt toward the pointer ---------- */
.startseite .pricing { padding: 20px 0 110px; }
.pricing-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 40px; }
.pricing-heading .section-label { margin-bottom: 18px; }
.startseite .pricing-heading h2 { font-size: clamp(38px, 4.2vw, 58px); }
.pricing-heading > p { max-width: 420px; color: var(--ink-2); font-size: 15px; line-height: 1.75; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; perspective: 1400px; }
.pricing-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pricing-grid:has(> :only-child) { grid-template-columns: minmax(0, 560px); }
[data-tilt] { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 40%; position: relative; transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; }
[data-tilt]::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(420px circle at var(--mx) var(--my), rgb(255 255 255 / 55%), rgb(255 255 255 / 0%) 60%); opacity: 0; pointer-events: none; transition: opacity .35s; }
[data-tilt].is-tilting { transition: transform .08s linear; }
[data-tilt].is-tilting::after { opacity: 1; }
.startseite .price-card { position: relative; display: flex; flex-direction: column; min-height: 470px; padding: 30px 30px 28px; border-radius: 30px; }
.startseite .price-card-featured { background: linear-gradient(150deg, rgb(255 255 255 / 78%), rgb(220 240 236 / 62%)); box-shadow: var(--gl-shadow-lift), var(--gl-inner), 0 0 0 1px rgb(15 110 115 / 14%); }
.startseite .price-card-featured::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(60% 50% at 20% 0%, rgb(111 211 207 / 22%), transparent 70%); }
.startseite .price-card-featured .price-badge { background: linear-gradient(145deg, #2f7f84, #16545b); border-color: transparent; color: #fff; }
.price-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.price-kicker { color: var(--ink-soft); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.startseite .price-badge { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--gl-edge); background: var(--gl-bg-2); color: var(--accent); font-size: 11px; font-weight: 750; }
.startseite .price-number { display: flex; align-items: baseline; gap: 6px; margin: 24px 0 2px; font-size: 64px; font-weight: 800; letter-spacing: -.06em; line-height: 1; }
.price-number small { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--ink-2); }
.price-number .price-tbd { font-size: 30px; font-weight: 750; letter-spacing: -.03em; color: var(--ink-2); line-height: 1.1; padding: 12px 0 14px; }
.startseite .price-card h3 { margin-top: 26px; font-size: 34px; line-height: 1.08; }
.price-caption { margin-top: 10px; color: var(--ink-2); font-size: 14px; font-weight: 550; line-height: 1.5; }
.price-list { list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: grid; gap: 11px; }
.startseite .price-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.price-list li i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: rgb(15 110 115 / 12%); color: var(--accent); font-size: 11px; font-style: normal; font-weight: 800; }
.price-cta { margin-top: auto; padding-top: 26px; display: grid; gap: 12px; }
.price-cta .button { width: 100%; }
.availability-note { color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
.price-footnotes { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 20px; padding: 0 8px; color: var(--ink-soft); font-size: 11.5px; font-weight: 500; }
.price-footnotes a { text-underline-offset: 3px; }

/* ---------- Interest ---------- */
.startseite .interest { padding: 0 0 110px; }
.startseite .interest-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 70px); padding: clamp(28px, 4vw, 48px); border-radius: 32px; }
.interest-copy .section-label { margin-bottom: 18px; }
.startseite .interest-copy h2 { font-size: clamp(34px, 3.6vw, 48px); }
.interest-copy > p:last-child { max-width: 380px; margin-top: 18px; color: var(--ink-2); font-size: 14.5px; line-height: 1.75; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-field label { color: var(--ink-2); font-size: 12px; font-weight: 650; }
.form-field label span { color: var(--ink-soft); font-weight: 500; }
.startseite .form-field input { width: 100%; min-height: 50px; padding: 11px 15px; border: 1px solid var(--gl-edge); border-radius: 14px; background: rgb(255 255 255 / 70%); color: var(--ink); font-size: 14px; box-shadow: var(--gl-inner); transition: border-color .15s, background .15s; }
.startseite .form-field input:focus { outline: none; border-color: rgb(15 110 115 / 55%); background: #fff; }
.form-field input::placeholder { color: #8ea3a4; }
.consent-field { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-soft); font-size: 11.5px; line-height: 1.65; }
.consent-field input { flex: none; width: 16px; height: 16px; margin: 3px 0; accent-color: var(--accent); }
.consent-field a { text-underline-offset: 2px; }
.form-submit { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 20px; }
.form-status { flex: 1 1 160px; color: var(--ink-2); font-size: 12.5px; line-height: 1.55; }
.form-status.error { color: #a3202c; }

/* ---------- FAQ ---------- */
.startseite .faq { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 5vw, 80px); padding-bottom: 110px; }
.faq-heading .section-label { margin-bottom: 18px; }
.startseite .faq-heading h2 { font-size: clamp(36px, 3.8vw, 52px); }
.faq-lead { max-width: 300px; margin-top: 16px; color: var(--ink-2); font-size: 14.5px; line-height: 1.7; }
.arrow-link { display: inline-flex; align-items: center; gap: 14px; margin-top: 18px; padding: 6px 0; color: var(--ink); font-size: 13px; font-weight: 650; text-decoration: none; }
.faq-list { display: grid; gap: 8px; }
.faq-list details { border-radius: 20px; border: 1px solid var(--gl-edge); background: rgb(255 255 255 / 48%); box-shadow: var(--gl-inner); transition: background .2s; }
.faq-list details[open] { background: rgb(255 255 255 / 70%); }
.startseite .faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 62px; padding: 16px 22px; color: var(--ink); font-size: 15px; font-weight: 650; letter-spacing: -.015em; line-height: 1.4; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gl-edge); background: var(--gl-bg-3); color: var(--ink-soft); font-size: 16px; font-weight: 400; transition: transform .25s; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.startseite .faq-list details p { max-width: 640px; margin: -4px 0 0; padding: 0 22px 20px; color: var(--ink-2); font-size: 13.5px; line-height: 1.75; }
.faq-list details p a { text-underline-offset: 3px; }

/* ---------- Closing & footer ---------- */
.startseite .closing { padding: 40px 0 120px; text-align: center; }
.closing > img { width: 56px; height: 56px; margin-bottom: 22px; border-radius: 18px; box-shadow: 0 24px 50px -24px rgb(24 56 50 / 50%); }
.startseite .closing h2 { font-size: clamp(42px, 5vw, 72px); }
.closing > div { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.startseite .site-footer { position: relative; z-index: 1; margin: 0 14px 14px; padding: 44px clamp(24px, 4vw, 56px) 26px; border-radius: 30px; background: linear-gradient(160deg, #1b4a4c, #123336); color: #e6f1ee; }
.startseite .wordmark-light { color: #f1f8f5; }
.footer-main { display: grid; grid-template-columns: 1fr 1fr 1.4fr; align-items: center; gap: 30px; padding-bottom: 36px; }
.footer-main p { color: #a9c7c2; font-size: 13px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 22px; }
.footer-links a { color: #c4dbd6; font-size: 12px; font-weight: 600; text-decoration: none; }
.footer-links a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 20px; border-top: 1px solid rgb(255 255 255 / 12%); color: #8fb3ad; font-size: 11.5px; }

/* ---------- Responsive ---------- */
@media (min-width: 1600px) { .startseite .section-frame }
@media (max-width: 1120px) {
  .startseite { --frame: calc(100% - 56px); }
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-grid > .price-card-featured { grid-column: 1 / -1; }
  .startseite .site-header { gap: 14px; }
  .startseite .site-nav a { padding: 8px 11px; font-size: 12.5px; }
  .startseite .price-card { padding: 28px; }
}
@media (max-width: 900px) {
  .desktop-only { display: none; }
  .app-body { grid-template-columns: 1fr; min-height: 0; }
  .app-rail { display: none; }
  .startseite .preview { padding: 80px 0 110px; }
  .preview-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pricing-grid, .pricing-grid:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; }
  .startseite .price-card { min-height: 0; }
  .startseite .interest-card { grid-template-columns: 1fr; }
  .startseite .faq { grid-template-columns: 1fr; gap: 28px; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-links { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 720px) {
  .startseite { --frame: calc(100% - 32px); }
  .startseite .site-header { top: 8px; width: calc(100% - 16px); min-height: 60px; margin-top: 8px; padding: 8px 8px 8px 14px; }
  .startseite .wordmark { font-size: 20px; }
  .header-actions { gap: 8px; }
  .header-actions .button { min-height: 38px; padding: 6px 12px; font-size: 12px; }
  .menu-toggle { display: block; }
  /* Nested backdrop filters do not compose inside the blurred header, so the menu is near-opaque. */
  .startseite .site-nav { position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px; border-radius: 22px; background: rgb(246 250 248 / 96%); box-shadow: var(--gl-shadow-lift), var(--gl-inner); }
  .startseite .site-nav.is-open { display: flex; }
  .startseite .site-nav a { padding: 12px 14px; }
  .startseite .preview { padding-bottom: 80px; }
  .startseite .preview-head h2 { font-size: 34px; }
  .demo-source { max-width: none; }
  .sample-foot { flex-direction: column; align-items: flex-start; }
  .startseite .pricing { padding-bottom: 80px; }
  .pricing-heading { display: block; margin-bottom: 26px; }
  .pricing-heading > p { margin-top: 18px; }
  .startseite .price-number { font-size: 64px; }
  .startseite .interest { padding-bottom: 80px; }
  .startseite .interest-card { border-radius: 26px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .startseite .form-field input { font-size: 16px; }
  .startseite .faq { padding-bottom: 80px; }
  .startseite .closing { padding: 20px 0 80px; }
  .startseite .site-footer { margin: 0 8px 8px; padding: 32px 22px 22px; border-radius: 22px; }
  .footer-main { gap: 20px; padding-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .startseite *, .startseite *::before, .startseite *::after { animation: none !important; transition: none !important; }
  .startseite .button:hover { transform: none; }
  [data-tilt] { transform: none !important; }
  .scene-space { transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .startseite .glass, .startseite .glass-2, .startseite .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #f6f9f7; }
}