:root{
  --nacht:#05070c;--ink:#eef3ff;--mute:#a9b6d0;--eis:#7db4ff;--eis-d:#4a8dff;--gold:#ffb14a;--glut:#ffd9a0;
  --dawn:0;
  --anz:"Segoe UI Variable Display","SF Pro Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{overscroll-behavior-y:none;-webkit-text-size-adjust:100%;background:var(--nacht);color-scheme:dark}
body{margin:0;background:var(--nacht);color:var(--ink);font:400 17px/1.6 var(--anz);overflow-x:hidden;scrollbar-color:#2a3550 var(--nacht)}
::selection{background:var(--eis);color:#05070c}
img,svg,canvas{display:block;max-width:100%}
a{color:var(--eis);text-underline-offset:.2em}
a:hover:not(.knopf){color:#fff}
:focus-visible{outline:2px solid var(--eis);outline-offset:4px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--nacht);padding:10px 14px;border-radius:8px;z-index:100}
.skip:focus{left:12px}

/* Kopf */
.kopf{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;justify-content:space-between;align-items:flex-start;padding:8px clamp(16px,4vw,48px);pointer-events:none}
.kopf>*{pointer-events:auto}
.marke{--k:1.7px;display:flex;align-items:flex-start;gap:8px;color:var(--ink);text-decoration:none}
.marke img{height:calc(78*var(--k));width:auto;flex:none}
.marke>span{display:flex;flex-direction:column;align-items:center;font-size:0;letter-spacing:0;margin:calc(7*var(--k)*.6) 0 0}
.marke b{display:block;font-weight:600;font-size:calc(33*var(--k));letter-spacing:.02em;line-height:1}
.marke>span>span{display:block;font-size:calc(11.5*var(--k));letter-spacing:.46em;margin:calc(8*var(--k)) -.46em 0 0;color:var(--mute);font-weight:300;line-height:1}
.kopf nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid rgba(125,180,255,.35);border-radius:999px;color:var(--ink);text-decoration:none;font-size:15px;letter-spacing:.02em;background:rgba(5,7,12,.55);backdrop-filter:blur(8px)}
.kopf nav{display:flex;align-items:center;gap:10px}
.ton{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid rgba(125,180,255,.35);border-radius:50%;background:rgba(5,7,12,.55);backdrop-filter:blur(8px);color:var(--ink);cursor:pointer}
.ton:hover{border-color:var(--eis);background:rgba(125,180,255,.12)}
.ton[aria-pressed="false"] .w{display:none}
.ton[aria-pressed="true"] .x{display:none}
.kopf nav a:hover{border-color:var(--eis);background:rgba(125,180,255,.12)}

/* Szene: ruhige Grundfassung (ohne Skript, ohne Bewegung) */
.reise{position:relative}
.buehne{position:relative;min-height:100vh;background:radial-gradient(120% 70% at 50% 110%,rgba(74,141,255,.25),transparent 60%),var(--nacht)}
.buehne::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(1px 1px at 12% 18%,#fff,transparent 60%),radial-gradient(1px 1px at 33% 64%,#cfe0ff,transparent 60%),
  radial-gradient(1.5px 1.5px at 71% 22%,#fff,transparent 60%),radial-gradient(1px 1px at 88% 74%,#cfe0ff,transparent 60%)}
.szene .buehne::before{display:none}
#himmel,.horizont,.hinweis,.punkte{display:none}
.station{position:relative;padding:clamp(72px,12vh,140px) clamp(20px,6vw,96px);max-width:1100px}
.station h1,.station h2{font-weight:300;letter-spacing:-.03em;line-height:1.04;margin:0 0 20px;font-size:clamp(2.1rem,6.2vw,5.4rem);text-wrap:balance}
.station p{margin:0;max-width:56ch;font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.55;color:var(--mute)}
.station em{font-style:normal;color:var(--ink)}
.knopf{display:inline-flex;align-items:center;min-height:52px;padding:0 28px;border-radius:999px;background:var(--ink);color:var(--nacht);text-decoration:none;font-weight:600;font-size:17px}
.knopf:hover{background:#fff;color:var(--nacht)}
.knopf.leise{background:transparent;color:var(--ink);border:1px solid rgba(238,243,255,.45)}
.knopf.leise:hover{background:rgba(238,243,255,.1);color:#fff}
.aktionen{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.fuss{padding:28px clamp(20px,6vw,96px) 40px;color:var(--mute);font-size:14px;display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;justify-content:space-between}
.fuss a{color:var(--mute)}
.fuss a:hover:not(.knopf){color:#fff}
.schritte{display:flex;flex-wrap:wrap;gap:6px 26px;margin:0 0 22px;padding:0;list-style:none;font-size:clamp(1.3rem,3vw,2.2rem);font-weight:300;letter-spacing:-.02em}
.schritte li+li::before{content:"";display:inline-block;width:26px;height:1px;background:var(--eis);vertical-align:middle;margin-right:26px}

/* Szene: Bewegungsfassung (Klasse .szene setzt das Skript) */
.szene .reise{height:1500vh}
.szene .buehne{position:sticky;top:0;height:100vh;height:100dvh;min-height:0;overflow:hidden;background:
  radial-gradient(130% 80% at 50% 118%,rgba(255,177,74,calc(var(--dawn)*.85)),rgba(74,141,255,calc(var(--dawn)*.45)) 38%,transparent 72%),
  radial-gradient(90% 60% at 20% 0%,rgba(74,141,255,.10),transparent 70%),var(--nacht)}
.szene #himmel{display:block;position:absolute;inset:0;width:100%;height:100%}
.szene .hinweis,.szene .punkte{display:block}
.szene .station{position:absolute;left:0;bottom:0;padding:0 clamp(20px,6vw,96px) clamp(84px,14vh,150px);max-width:min(980px,100%);opacity:0;visibility:hidden;will-change:opacity,transform,filter}
.szene .station.an{visibility:visible}
.szene .station.mitte{top:0;display:flex;flex-direction:column;justify-content:center;padding-bottom:0;padding-top:20vh}
.szene .fuss{position:absolute;left:0;right:0;bottom:0;padding-top:0;opacity:0;visibility:hidden}
.szene .fuss.an{visibility:visible}
.szene #kontakt{padding-bottom:clamp(108px,15vh,170px)}

.horizont{--sonne:min(46vh,38vw);position:absolute;left:0;right:0;bottom:11vh;height:42vh;clip-path:inset(-100vh -100vw 0 -100vw);pointer-events:none;opacity:clamp(0,calc(var(--dawn)*2),1)}
.horizont::before{content:"";position:absolute;left:72%;bottom:calc(var(--sonne)*-0.55 + var(--dawn)*var(--sonne)*0.42);width:var(--sonne);aspect-ratio:1;border-radius:50%;transform:translateX(-50%);
  background:linear-gradient(180deg,#fff1d6 0%,var(--glut) 30%,var(--gold) 70%,#ff7a3c 100%)}
.horizont::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,rgba(255,217,160,.95) 30%,rgba(255,217,160,.95) 70%,transparent)}
.szene .station p{text-shadow:0 0 22px rgba(5,7,12,.9)}
.hinweis{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);color:var(--mute);font-size:13px;letter-spacing:.32em;text-transform:uppercase;text-align:center;pointer-events:none}
.hinweis i{display:block;width:1px;height:34px;margin:10px auto 0;background:linear-gradient(var(--eis),transparent);animation:fall 2.2s ease-in-out infinite}
@keyframes fall{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.punkte{position:absolute;right:clamp(12px,2.4vw,32px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;z-index:20}
.punkte button{width:28px;height:28px;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.punkte button::after{content:"";width:7px;height:7px;border-radius:50%;background:rgba(169,182,208,.5);transition:transform .3s,background .3s}
.punkte button[aria-current="true"]::after{background:var(--eis);transform:scale(1.9)}
.punkte button:hover::after{background:#fff}

@media (max-aspect-ratio:1/1){
  .horizont{--sonne:min(26vh,58vw)}
  .horizont::before{left:50%}
}
@media (max-width:720px){
  .marke{--k:.78px;margin-left:-4px}
  .kopf{padding-left:8px;padding-right:10px}
  .ton{display:none!important}
  .szene #kontakt h2{font-size:clamp(1.7rem,8vw,2.2rem);margin-bottom:12px}
  .fuss .adr{display:none}
  .szene #kontakt p{display:none}
  .szene #kontakt{padding-bottom:clamp(64px,9vh,90px)}
  .szene .station[aria-labelledby="t5"]{padding-bottom:clamp(36px,5vh,56px)}
  .szene #kontakt .aktionen{margin-top:18px;gap:10px}
  .szene #kontakt .knopf{min-height:46px;padding:0 20px;font-size:16px}
  .punkte{display:none!important}
  .szene .station{padding-bottom:clamp(76px,12vh,110px)}
}
@media (prefers-reduced-motion:reduce){.hinweis i{animation:none}}

/* Unterseiten */
.recht{max-width:760px;margin:0 auto;padding:130px 24px 60px}
.recht h1{font-weight:300;font-size:clamp(2rem,5vw,3.2rem);letter-spacing:-.03em;margin:0 0 24px}
.recht h2{font-size:1.15rem;margin:30px 0 6px}
.recht p{margin:0 0 12px;color:var(--mute)}
.recht .hinweisbox{border:1px solid rgba(255,177,74,.5);border-radius:14px;padding:14px 18px;color:var(--glut)}

/* Gebaute Websites: Auswahl und Schaufenster */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.chip{min-height:44px;padding:0 20px;border-radius:999px;border:1px solid rgba(125,180,255,.55);background:rgba(125,180,255,.12);color:var(--ink);font:inherit;font-size:16px;cursor:pointer}
.chip:hover{background:rgba(125,180,255,.28);border-color:var(--eis)}
.leise-hinweis{margin-top:16px!important;font-size:1rem!important}
.leise-hinweis[hidden]{display:none}
#schau{width:min(1280px,94vw);height:min(86vh,900px);max-width:none;max-height:none;padding:0;border:1px solid rgba(125,180,255,.5);border-radius:20px;background:#070a12;color:var(--ink);overflow:hidden;animation:schauein .45s cubic-bezier(.16,1,.3,1)}
#schau::backdrop{background:rgba(2,4,9,.82);backdrop-filter:blur(6px)}
#schau[open]{display:flex;flex-direction:column}
@keyframes schauein{from{opacity:0;transform:scale(.88) translateY(24px)}to{opacity:1;transform:none}}
.schau-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px 10px 20px;border-bottom:1px solid rgba(125,180,255,.25)}
.schau-name{font-size:17px;font-weight:500;letter-spacing:-.01em}
.schau-knoepfe{display:flex;gap:10px;align-items:center}
.schau-extern,.schau-zu{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(125,180,255,.45);color:var(--ink);background:transparent;font:inherit;font-size:15px;text-decoration:none;cursor:pointer}
.schau-extern:hover,.schau-zu:hover{background:rgba(125,180,255,.18)}
#schau iframe{flex:1;width:100%;border:0;background:#fff}
.schau-hinweis{margin:0;padding:8px 20px;font-size:13px;color:var(--mute)}
.schau-offen body{overflow:hidden}
@media (max-width:720px){#schau{width:100vw;height:100dvh;border-radius:0;border:0}.schau-extern{display:none}}
@media (prefers-reduced-motion:reduce){#schau{animation:none}}

.szene .station{pointer-events:none}
.szene .station a,.szene .station button{pointer-events:auto}

/* Gebaute Websites: Zeilen statt Knöpfe */
.projektzeilen{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:18px}
.projektzeile{display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:4px 0;border:0;background:transparent;color:var(--ink);font:300 clamp(1.5rem,3.4vw,2.4rem)/1.1 var(--anz);letter-spacing:-.025em;cursor:pointer;text-align:left;border-bottom:1px solid rgba(125,180,255,.35)}
.projektzeile svg{flex:none;color:var(--eis);transition:transform .3s}
.projektzeile:hover{color:#fff;border-bottom-color:var(--eis)}
.projektzeile:hover svg{transform:translate(4px,-4px)}
@media (max-width:720px){.schau-extern{display:inline-flex!important;min-height:36px;padding:0 12px;font-size:14px}.schau-kopf{padding:8px 10px 8px 14px}.schau-name{font-size:15px}.schau-hinweis{font-size:12px;padding:6px 14px}}
@media (max-aspect-ratio:1/1){.szene #t7+p{display:none}.szene #t7{margin-bottom:14px}}