/*
  Gemeinsames Grundgerüst für die Unterseiten im v7-Look (Über mich, RUNCADE).
  Gleiche Farben, Schriften, Kopfzeile und Fußzeile wie die Startseite (index.html).
  Dunkel ist Standard; hell über Systemeinstellung oder den Umschalter (localStorage "theme").
*/
@font-face{font-family:"Source Sans 3";font-weight:400;font-display:swap;src:url("fonts/source-sans-3-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:600;font-display:swap;src:url("fonts/source-sans-3-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:700;font-display:swap;src:url("fonts/source-sans-3-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:900;font-display:swap;src:url("fonts/source-sans-3-latin-900-normal.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:600;font-display:swap;src:url("fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:700;font-display:swap;src:url("fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2")}

:root{
  --bg:#0A0D11;--bg-2:#10151B;--panel:#141A21;--line:#232C36;--line-2:#2E3945;
  --ink:#F3F5F7;--text:#C9D0D6;--muted:#8D97A1;--dim:#5B6670;
  --accent:#FF6B1A;--accent-2:#FFB37A;--glow:rgba(255,107,26,.35);--on-accent:#0A0D11;
  --sans:"Source Sans 3","Segoe UI",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --nav-bg:rgba(10,13,17,.72);--dot:rgba(255,255,255,.07);--ok:#3DDC84;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg:#F6F5F1;--bg-2:#EEEDE7;--panel:#FFFFFF;--line:#E1DFD8;--line-2:#CBC8BE;
  --ink:#12161B;--text:#3A424A;--muted:#535C65;--dim:#646C74;--accent:#C2410C;--accent-2:#9A3412;--on-accent:#FFFFFF;--glow:rgba(232,90,12,.28);
  --nav-bg:rgba(246,245,241,.8);--dot:rgba(18,22,27,.08);--ok:#14833F;color-scheme:light}}
:root[data-theme="light"]{
  --bg:#F6F5F1;--bg-2:#EEEDE7;--panel:#FFFFFF;--line:#E1DFD8;--line-2:#CBC8BE;
  --ink:#12161B;--text:#3A424A;--muted:#535C65;--dim:#646C74;--accent:#C2410C;--accent-2:#9A3412;--on-accent:#FFFFFF;--glow:rgba(232,90,12,.28);
  --nav-bg:rgba(246,245,241,.8);--dot:rgba(18,22,27,.08);--ok:#14833F;color-scheme:light}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:18px/1.6 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.eyebrow{display:inline-block;font:600 13px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
h1,h2,h3{color:var(--ink);font-weight:900;letter-spacing:-.035em}
h2{font-size:clamp(2.1rem,5vw,3.8rem);line-height:1}
h2 em,h1 em{font-style:normal;color:var(--accent)}
p{color:var(--text)}
.grid-bg{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(var(--dot) 1px,transparent 1.2px) 0 0/28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 75%)}

/* Kopfzeile */
nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
nav.solid{background:var(--nav-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
nav .wrap{display:flex;justify-content:space-between;align-items:center;height:72px}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;font:700 17px var(--mono);white-space:nowrap}
.brand i{width:30px;height:30px;border-radius:50%;background:var(--accent);display:grid;place-items:center;font:700 12px var(--mono);font-style:normal;color:var(--on-accent)}
nav .right{display:flex;align-items:center;gap:12px}
nav .links{display:flex;gap:28px;align-items:center;font-size:16px;color:var(--muted)}
nav .links a:hover,nav .links a[aria-current]{color:var(--ink)}
.pill{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;font-weight:700;font-size:16px;white-space:nowrap;transition:box-shadow .3s,border-color .2s,transform .2s}
.pill.main{background:var(--accent);color:var(--on-accent)}
.pill.main:hover{box-shadow:0 0 40px 4px var(--glow)}
.pill.line{border:1.5px solid var(--line-2);color:var(--ink)}
.pill.line:hover{border-color:var(--ink)}
.theme-btn{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line-2);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;flex:none}
.theme-btn:hover{border-color:var(--ink)}
.theme-btn svg{width:18px;height:18px}
.theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:block}:root[data-theme="dark"] .theme-btn .moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-btn .sun{display:block}:root:not([data-theme="light"]) .theme-btn .moon{display:none}}
@media (max-width:960px){nav .links a:not(.pill){display:none}}
@media (max-width:460px){nav .wrap{padding:0 16px}.brand{font-size:15px;gap:8px}nav .pill{padding:10px 14px;font-size:14px}nav .right{gap:8px}}

/* Fußzeile */
footer{border-top:1px solid var(--line);padding:30px 0;color:var(--dim);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer .fl{display:flex;gap:18px;flex-wrap:wrap}
footer a:hover{color:var(--ink)}
@media (max-width:760px){footer .fl{gap:4px 18px}footer .fl a{display:inline-block;padding:12px 0}}

/* Einblenden beim Scrollen (v7.js setzt .in) */
.js .rv{opacity:0;transform:translateY(32px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .rv{opacity:1;transform:none;transition:none}}

/* Formular (Warteliste, Kontakt) */
.form{display:flex;flex-direction:column;gap:12px}
.form input[type=email],.form input[type=text]{width:100%;background:var(--bg);border:1.5px solid var(--line-2);border-radius:14px;padding:15px 16px;font:400 17px var(--sans);color:var(--ink)}
.form input:focus{outline:none;border-color:var(--accent)}
.form label{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted);line-height:1.45}
.form label input{margin-top:1px;accent-color:var(--accent);width:22px;height:22px;flex:none}
.form label{padding:4px 0;cursor:pointer}
.form label a{color:var(--accent)}
.form button{font:700 16px var(--sans);border:0;cursor:pointer;justify-content:center;min-height:52px}
.form button:disabled{opacity:.6;cursor:wait}
.form .msg{font-size:15px;color:var(--accent);min-height:1.3em}
.form .msg.ok{color:var(--ok)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- Bühne (Hero mit Marcel), immer dunkel – genutzt von Über mich ---------- */
@font-face{font-family:"Hand";font-weight:700;font-display:swap;src:url("fonts/caveat-latin-700-normal.woff2") format("woff2")}
.stage{--bg:#0A0D11;--ink:#F3F5F7;--text:#C9D0D6;--muted:#9AA3AC;--dim:#6B7680;--panel:#141A21;--line:#232C36;--line-2:#2E3945;--accent:#FF6B1A;--glow:rgba(255,107,26,.35);--on-accent:#0A0D11;
  position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:flex;align-items:flex-end;background:#0A0D11;color:var(--ink)}
.stage .spot{position:absolute;left:68%;top:56%;width:1100px;height:1100px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,107,26,.3) 0,transparent 58%);pointer-events:none}
.stage .giant{position:absolute;left:0;right:0;top:14%;pointer-events:none;user-select:none;white-space:nowrap;font:900 clamp(6rem,21vw,21rem)/.82 var(--sans);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px #2E3945}
.stage .giant div{display:inline-block;animation:giant 44s linear infinite}
.stage .giant .b{color:#FF6B1A;-webkit-text-stroke:0;opacity:.92}
@keyframes giant{to{transform:translateX(-50%)}}
.stage .me{position:absolute;right:6%;bottom:0;height:min(90svh,960px);z-index:2}
.stage .me img{height:100%;width:auto}
.stage .me.cut{filter:drop-shadow(0 0 1px rgba(255,150,70,.95)) drop-shadow(-8px -6px 22px rgba(255,107,26,.4))}
.stage .me.cut img{-webkit-mask-image:linear-gradient(#000 86%,transparent);mask-image:linear-gradient(#000 86%,transparent)}
.stage .copy{position:relative;z-index:3;width:100%;max-width:1200px;margin:0 auto;padding:0 24px 9vh}
.stage .hi{font:700 clamp(1.8rem,3vw,2.6rem)/1 "Hand",cursive;color:#FF6B1A;transform:rotate(-3deg);display:inline-block;margin-bottom:12px}
.stage h1{font-size:clamp(3.2rem,8vw,7rem);line-height:.9;letter-spacing:-.05em;color:#F3F5F7;max-width:8em}
.stage h1 em{color:#FF6B1A}
.stage .lead{font-size:clamp(1.1rem,1.7vw,1.3rem);color:#C9D0D6;max-width:27em;margin:22px 0 28px}
.stage .lead b{color:#F3F5F7}
.stage .btns{display:flex;gap:12px;flex-wrap:wrap}
.stage .btns .pill{min-height:54px;font-size:17px;padding:0 24px}
.stage .pill.line{color:#F3F5F7;border-color:#2E3945}
.lower3{position:absolute;z-index:4;left:0;bottom:16%;display:flex;flex-direction:column;align-items:flex-start;gap:0;transform:translateX(-30%)}
.lower3 b{background:#F3F5F7;color:#0A0D11;font:800 clamp(1rem,1.6vw,1.25rem)/1 var(--sans);letter-spacing:-.01em;padding:10px 16px}
.lower3 span{background:#FF6B1A;color:#0A0D11;font:700 13px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:9px 16px}
.chip{position:absolute;z-index:4;background:rgba(20,26,33,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid #2E3945;border-radius:16px;padding:12px 16px;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);font-size:14px;color:#9AA3AC;line-height:1.3}
.chip b{display:block;color:#F3F5F7;font:700 15px var(--mono)}
nav{color:var(--ink)}
nav:not(.solid):not(.menu-open){--ink:#F3F5F7;--muted:#B9C1C8;--line-2:#3A4654;color:#F3F5F7}
@media (max-width:900px){
  .stage{flex-direction:column;align-items:stretch;padding-top:76px}
  .stage .me{position:relative;right:auto;height:auto;width:min(380px,82%);margin:0 auto -14%;order:0}
  .stage .me img{width:100%;height:auto}
  .stage .copy{order:1;padding-bottom:40px}
  .stage .giant{top:110px;font-size:26vw;opacity:.7}
  .stage .spot{top:30%;left:50%;width:700px;height:700px}
  .lower3{left:auto;right:-6%;bottom:22%;transform:none;align-items:flex-end}
}
@media (prefers-reduced-motion:reduce){.stage .giant div{animation:none}}