/* Layout: eine nächtliche Landstraße läuft fix im Hintergrund, die Inhalte ziehen darüber wie Schilder am Straßenrand. */
:root{
  color-scheme: dark;
  --night:#060807;
  --veil:rgba(6,8,7,.86);
  --asphalt:#141816;
  --bone:#ebe6d8;
  --bone-dim:#a9a596;
  --pmx:#2fae8a;
  --pmx-deep:#1d8a70;
  --line:rgba(235,230,216,.14);
  --f-display:"Saira Stencil One","Impact","Arial Narrow Bold",sans-serif;
  --f-body:"Cormorant Garamond","Garamond","Georgia",serif;
  --f-mono:"Space Mono","Courier New",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--night);color:var(--bone);font-family:var(--f-body);font-size:1.2rem;line-height:1.55;overflow-x:hidden}
#road{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
main{position:relative;z-index:1}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{text-wrap:balance;font-weight:400;margin:0}
p{margin:0}
.eyebrow{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--pmx)}
:focus-visible{outline:2px solid var(--pmx);outline-offset:3px}

/* HERO */
.hero{padding-block:clamp(28px,6vh,64px) clamp(56px,10vh,120px);text-align:center}
.topline{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim)}
.topline nav{display:flex;gap:18px;flex-wrap:wrap}
.topline a{color:var(--bone-dim);text-decoration:none}
.topline a:hover{color:var(--pmx)}
.emblem{position:relative;width:min(94vw,640px);max-width:100%;aspect-ratio:900/370;margin:clamp(36px,7vh,80px) auto 10px;cursor:pointer;outline:none}
.emblem picture{display:block;position:relative;z-index:1}
.emblem img{position:relative;z-index:1;width:100%;height:auto;display:block;animation:arrive 1.6s cubic-bezier(.16,.9,.24,1) both,glow 5s ease-in-out 1.6s infinite;filter:drop-shadow(0 0 22px rgba(47,174,138,.35))}
.emblem:hover img,.emblem:focus-visible img{animation:arrive 1.6s cubic-bezier(.16,.9,.24,1) both,shake .5s linear}
.emblem .halo{position:absolute;left:50%;top:50%;width:min(70vw,440px);aspect-ratio:1;max-width:none;transform:translate(-50%,-50%);pointer-events:none}
.emblem .spin{transform-origin:200px 200px;animation:spin 90s linear infinite}
.emblem .spin-r{transform-origin:200px 200px;animation:spin 140s linear infinite reverse}
.emblem.fast .spin{animation-duration:2.5s}
.emblem.fast .spin-r{animation-duration:3.5s}
.emblem.fast img{filter:drop-shadow(0 0 48px rgba(47,174,138,.9))}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes arrive{from{transform:scale(.35) translateY(-30px);filter:blur(10px) drop-shadow(0 0 0 rgba(47,174,138,0))}}
@keyframes glow{50%{filter:drop-shadow(0 0 38px rgba(47,174,138,.6))}}
@keyframes shake{20%{transform:translate(-2px,1px) rotate(-.4deg)}40%{transform:translate(2px,-1px) rotate(.4deg)}60%{transform:translate(-1px,0)}80%{transform:translate(1px,1px)}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero h1{font-family:var(--f-display);font-size:clamp(3.2rem,12vw,8.5rem);line-height:.9;letter-spacing:.04em;margin-top:8px}
.hero h1 span{color:var(--pmx)}
.creed{font-family:var(--f-mono);font-size:clamp(.8rem,2.4vw,1rem);letter-spacing:.32em;text-transform:uppercase;margin-top:34px;display:flex;justify-content:center;gap:.9em;flex-wrap:wrap}
.creed b{font-weight:400;color:var(--bone-dim)}
.creed b:last-child{color:var(--pmx)}
.hero .lead{max-width:34em;margin:22px auto 0;font-size:clamp(1.15rem,2.6vw,1.45rem);font-style:italic;color:var(--bone)}

/* SECTIONS */
section.band{background:linear-gradient(to bottom,rgba(6,8,7,0),var(--veil) 90px,var(--veil) calc(100% - 90px),rgba(6,8,7,0));padding-block:110px}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:32px;align-items:end;margin-bottom:48px}
.head h2{font-family:var(--f-display);font-size:clamp(2.4rem,6vw,4.2rem);line-height:.95;letter-spacing:.03em}
.head p{color:var(--bone-dim);max-width:38em}
@media (max-width:760px){.head{grid-template-columns:1fr;gap:14px}}

/* ELEMENTE */
.elements{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.el{background:var(--night);padding:30px 24px 34px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;transition:background .5s}
.el::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--pmx);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.el:hover{background:#0b100d}
.el:hover::after{transform:scaleX(1)}
.el svg{width:56px;height:56px;stroke:var(--pmx);fill:none;stroke-width:2;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.el:hover svg{transform:rotate(180deg)}
.el .tag{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim)}
.el h3{font-family:var(--f-display);font-size:1.9rem;letter-spacing:.03em}
.el p{font-size:1.08rem;color:var(--bone-dim)}
.el .wheels{font-family:var(--f-mono);font-size:.75rem;color:var(--pmx);margin-top:auto;letter-spacing:.1em}
@media (max-width:900px){.elements{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.elements{grid-template-columns:1fr}}

/* KODEX / KARTEN */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.cards{grid-template-columns:1fr}}
.card{perspective:1200px;border:0;padding:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;aspect-ratio:3/4.2;max-width:100%;width:100%}
@media (max-width:520px){.card{aspect-ratio:auto;min-height:330px}}
.card-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.card:hover .card-in,.card.open .card-in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid rgba(47,174,138,.45);background:linear-gradient(160deg,#0c1513,#060807 70%);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:22px 18px;text-align:center}
.face::before{content:"";position:absolute;inset:8px;border:1px solid var(--line);pointer-events:none}
.face .num{font-family:var(--f-body);font-size:1.6rem;letter-spacing:.2em;color:var(--pmx)}
.face svg{width:46%;max-width:130px;stroke:var(--bone);fill:none;stroke-width:1.6}
.face .name{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.28em;text-transform:uppercase}
.back{transform:rotateY(180deg);justify-content:center;gap:16px;background:linear-gradient(200deg,#10201c,#060807 75%)}
.back h3{font-family:var(--f-display);font-size:1.6rem;color:var(--pmx);letter-spacing:.03em}
.back p{font-size:1.12rem;line-height:1.45;max-width:20em}
.hint{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;color:var(--bone-dim);margin-top:22px;text-transform:uppercase}

/* ORAKEL */
.oracle{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px;align-items:center}
@media (max-width:820px){.oracle{grid-template-columns:1fr}}
.eye-btn{border:0;background:none;padding:0;cursor:pointer;width:min(100%,380px);margin:0 auto;display:block}
.eye-btn svg{width:100%;height:auto;display:block;overflow:visible}
.eye-btn .lid{stroke:var(--bone);fill:none;stroke-width:2}
.eye-btn .iris{fill:none;stroke:var(--pmx);stroke-width:2}
.eye-btn .pupil{fill:var(--pmx);transition:r .4s}
.eye-btn.blink .lids{animation:blink .35s}
@keyframes blink{50%{transform:scaleY(.06)}}
.eye-btn .lids{transform-origin:190px 120px}
.rays line{stroke:var(--pmx);stroke-width:1.2;opacity:.55}
.rays{transform-origin:190px 120px;animation:spin 60s linear infinite}
.saying{font-size:clamp(1.6rem,4vw,2.6rem);font-style:italic;line-height:1.2;min-height:3.6em;text-wrap:balance}
.saying-meta{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim);margin-top:18px;display:flex;gap:18px;flex-wrap:wrap}
.btn{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;background:transparent;color:var(--bone);border:1px solid var(--pmx);padding:12px 18px;cursor:pointer;transition:background .3s,color .3s}
.btn:hover{background:var(--pmx);color:var(--night)}

/* CHIFFRE */
.cipher{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
@media (max-width:820px){.cipher{grid-template-columns:1fr}}
.disk-wrap{width:min(100%,400px);margin:0 auto;touch-action:none;user-select:none}
.disk-wrap svg{width:100%;height:auto;display:block}
.disk text{font-family:var(--f-mono);font-size:15px;fill:var(--bone);text-anchor:middle;dominant-baseline:central}
.disk .inner text{fill:var(--pmx)}
.disk .inner{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.disk.drag .inner{transition:none}
.out{font-family:var(--f-mono);font-size:clamp(.95rem,2.6vw,1.2rem);letter-spacing:.14em;word-break:break-word}
.out .lbl{display:block;font-size:.68rem;letter-spacing:.24em;color:var(--bone-dim);margin-bottom:6px}
.out .ct{color:var(--pmx);margin-bottom:22px}
.out .pt{color:var(--bone);min-height:2.6em;transition:color .4s,text-shadow .4s}
.solved .pt{color:var(--pmx);text-shadow:0 0 18px rgba(47,174,138,.6)}
.controls{display:flex;gap:10px;align-items:center;margin-top:24px;flex-wrap:wrap}
.shift{font-family:var(--f-mono);font-size:.8rem;color:var(--bone-dim);letter-spacing:.14em;min-width:9ch;text-align:center}
.riddle{font-style:italic;color:var(--bone-dim);margin-top:22px;font-size:1.12rem;border-left:1px solid var(--pmx);padding-left:16px}
.won{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.2em;color:var(--pmx);text-transform:uppercase;margin-top:16px}

/* AUFNAHME + FOOTER */
.found{text-align:left;padding-block:120px 70px}
.found h2{font-family:var(--f-display);font-size:clamp(2.6rem,9vw,6.4rem);line-height:.92;letter-spacing:.02em;max-width:11em}
.found h2 span{color:var(--pmx)}
.found p{max-width:34em;color:var(--bone-dim);margin-top:24px}
footer{position:relative;z-index:1;background:var(--night);border-top:1px solid var(--line);padding-block:36px 90px}
.foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;color:var(--bone-dim);text-transform:uppercase}
.foot a{color:var(--bone);text-decoration:none;border-bottom:1px solid var(--pmx)}
.foot a:hover{color:var(--pmx)}
.foot strong{display:block;color:var(--bone);font-weight:400;font-size:.68rem;letter-spacing:.24em;margin-bottom:8px}
.moon{display:flex;gap:12px;align-items:center}
.moon canvas{width:38px;height:38px;flex:none}
@media (max-width:700px){.foot{grid-template-columns:1fr}}

/* HUD */
.hud{position:fixed;z-index:2;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;color:var(--bone-dim);background:rgba(6,8,7,.7);border:1px solid var(--line);padding:8px 12px;text-transform:uppercase;font-variant-numeric:tabular-nums;pointer-events:none}
.hud b{color:var(--pmx);font-weight:400}
.toast{position:fixed;z-index:3;left:50%;bottom:calc(64px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;background:var(--pmx);color:var(--night);padding:12px 18px;transition:opacity .4s,transform .4s;pointer-events:none;max-width:calc(100% - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* RECHTSSEITEN */
.legal{position:relative;z-index:1;max-width:760px;margin:0 auto;padding-block:48px 90px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.legal .back-link{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim);text-decoration:none}
.legal .back-link:hover{color:var(--pmx)}
.legal .mini-logo{width:240px;max-width:70%;height:auto;aspect-ratio:900/370;display:block;margin:36px 0 28px}
.legal h1{font-family:var(--f-display);font-size:clamp(2.4rem,8vw,4rem);line-height:1;letter-spacing:.03em;margin-bottom:28px}
.legal h2{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--pmx);margin:36px 0 10px}
.legal p,.legal li{color:var(--bone);max-width:62ch}
.legal p+p{margin-top:12px}
.legal ul{padding-left:1.2em;margin:8px 0 0}
.legal a{color:var(--pmx)}
.legal .note{color:var(--bone-dim);font-style:italic;margin-top:40px}