/* Mathe-Workshop v4 – Dunkelmodus: Kästchenpapier bei Nacht.
   Farben stammen aus dem Logo: Glühbirnen-Gelb, Blau, Grün. */
:root{
  color-scheme:dark;
  --bg:#09111f; --grid:#13203a; --sheet:#0d1729; --panel:#15244a;
  --text:#e7edf9; --muted:#9db0d0; --head:#f5f8ff;
  --blue:#6db3f8; --blue-deep:#2f7fd1; --line:#223458;
  --yellow:#ffb81f; --yellow-text:#1a1200;
  --green:#4fd1ae; --red:#ff7f76;
  --todo:#5a4c00; --todo-text:#fff2a8;
  --display:ui-rounded,"SF Pro Rounded","Avenir Next Rounded","Nunito","Trebuchet MS",system-ui,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background-color:var(--bg);color:var(--text);font:1.0625rem/1.6 var(--body);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:1.25rem 1.25rem;background-position:-1px -1px}
.wrap{max-width:50rem;margin-inline:auto;padding-inline:1rem;background:var(--sheet);box-shadow:0 0 0 1px var(--line)}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:3px}
h1,h2,h3{font-family:var(--display);line-height:1.15;text-wrap:balance;margin:0;color:var(--head)}
h1{font-size:clamp(2rem,6.5vw,3.3rem);font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(1.55rem,4.5vw,2.1rem);font-weight:750;letter-spacing:-.01em}
p{margin:0}
.todo{background:var(--todo);color:var(--todo-text);padding:0 .25em;border-radius:.2em}

.btn{display:inline-block;font:700 1.05rem/1 var(--display);padding:.95rem 1.4rem;border-radius:.6rem;background:var(--yellow);color:var(--yellow-text);text-decoration:none;border:2px solid var(--yellow);white-space:nowrap}
.btn:hover{background:transparent;color:var(--yellow)}
.btn.ghost{background:transparent;color:var(--blue);border-color:var(--blue-deep)}
.btn.ghost:hover{background:var(--panel);color:var(--head)}
.btn.small{padding:.6rem 1rem;font-size:.95rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem}

/* Leiste oben */
.topbar{position:sticky;top:0;z-index:10;border-top:1px solid var(--line);display:flex;align-items:center;gap:1rem;padding-block:.35rem;border-bottom:1px solid var(--line)}
.topbar ul{flex:1;min-width:0;list-style:none;margin:0;padding:0;display:flex;gap:1.3rem;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.topbar ul::-webkit-scrollbar{display:none}
.topbar li a{display:block;padding-block:.7rem;font:700 1rem var(--display);color:var(--text);text-decoration:none;border-bottom:3px solid transparent}
.topbar li a:hover{border-bottom-color:var(--yellow)}
.topbar .btn{flex:none}

/* Hero: Logo mit warmem Licht hinter der Glühbirne */
.brand-head{padding-block:2.2rem 1rem}
.hero{padding-block:2rem 3rem;display:grid;gap:2rem;align-items:start;border-top:1px solid var(--line)}
.hero-text{display:grid;gap:1.5rem;align-content:start}
.hero figure.clip{max-width:17rem}
@media (min-width:46rem){.hero{grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:2.5rem}}
@media (max-width:45.99rem){.hero figure.clip{max-width:14rem}}
.logo-box{position:relative;isolation:isolate;width:min(100%,32rem)}
.logo-box::before{content:"";position:absolute;z-index:-1;left:-1rem;top:-3.5rem;width:16rem;height:16rem;background:radial-gradient(closest-side,rgba(255,184,31,.30),rgba(255,184,31,.10) 55%,transparent)}
.logo-box img{display:block;width:100%;height:auto}
.hero .lead{font-size:1.25rem;max-width:34rem;color:var(--text)}

section{scroll-margin-top:3.5rem}
section>.wrap{padding-block:3rem;border-top:1px solid var(--line)}
section:last-of-type>.wrap{padding-bottom:1rem}
section .wrap>*+*{margin-top:1.1rem}

ol.stairs{list-style:none;padding:0;display:grid;gap:.5rem;margin-top:1.5rem}
ol.stairs li{margin-left:calc(var(--i)*1.4rem);padding:.7rem 1rem;border:2px solid var(--blue-deep);border-radius:.5rem;background:var(--panel);font-weight:600;color:var(--head)}
ol.stairs li span{display:block;font-weight:400;color:var(--muted);font-size:.95rem}
ol.stairs li.gap{border-style:dashed;border-color:var(--yellow);background:transparent;color:var(--yellow)}
ol.stairs li.gap span{color:var(--yellow)}

dl.facts{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:.9rem 1.2rem}
dl.facts dt{font-family:var(--display);font-weight:700;color:var(--blue)}
dl.facts dd{margin:0}
@media (max-width:30rem){dl.facts{grid-template-columns:1fr;gap:.1rem}dl.facts dd{margin-bottom:.8rem}}

.ticket{border:2px solid var(--blue-deep);border-radius:.8rem;padding:1.4rem;background:var(--panel);display:grid;gap:1rem}
.ticket dl{margin:0;display:grid;grid-template-columns:minmax(0,7rem) minmax(0,1fr);gap:.4rem 1rem}
.ticket dt{font-weight:700;color:var(--head)}
.ticket dd{margin:0}
.ticket>*+*{margin-top:0}
.mailline{overflow-wrap:anywhere}

/* Über mich: Video neben dem Text, auf dem Handy darunter */
.about{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.5rem 2rem;align-items:start}
.about>*+*{margin-top:0}
.about .text>*+*{margin-top:1rem}
figure.clip{margin:0;max-width:19rem;justify-self:center;width:100%}
figure.clip video{display:block;width:100%;height:auto;aspect-ratio:9/16;border-radius:.8rem;border:2px solid var(--blue-deep);background:#000}
figure.clip figcaption{color:var(--muted);font-size:.9rem;margin-top:.5rem}

.parents{border-left:5px solid var(--green)}
details{border-bottom:1px solid var(--line);padding-block:.9rem}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--blue)}
details p{margin-top:.6rem}

footer .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;padding-block:2rem 2.5rem;border-top:1px solid var(--line);color:var(--muted);font-size:.95rem}
footer a{color:var(--muted)}

/* Impressum / Datenschutz */
.legal{padding-block:1.2rem 3rem;min-height:100vh}
.legal .legal-logo{display:block;width:12rem;height:auto;margin-bottom:1.5rem}
.legal h1{font-size:2rem}
.legal h2{font-size:1.25rem;margin-top:1.8rem}
.legal p,.legal ul{margin-top:.6rem}

ul.plain{list-style:none;margin:0;padding:0}
.outro{font-family:var(--display);font-size:1.2rem;font-weight:700;color:var(--head)}
.note{color:var(--head)}