/* Main Skill — gemeinsames Stylesheet
   Drei Farbmodi: System, Hell, Dunkel. Alle Farben als Variablen,
   damit jeder Modus dieselben Bausteine bedient. */

/* ── Farbmarken ───────────────────────────────────────── */
:root{
  /* Hell ist die Grundlage */
  --ink:#14181a; --ink-dim:#4e5658; --ink-faint:#737c7e;
  --ground:#f7f6f2; --raise:#ffffff; --line:rgba(16,24,24,.12);
  --brand:#14584a; --brand-soft:#e4efeb; --brand-ink:#ffffff;
  --glass:rgba(255,255,255,.62); --glass-lift:rgba(255,255,255,.85);
  --halo:rgba(20,88,74,.13);
  --mesh-1:rgba(20,88,74,.16); --mesh-2:rgba(110,231,183,.16); --mesh-3:rgba(20,88,74,.09);
  --grain:rgba(16,24,24,.04);
  --shade:0 10px 30px rgba(16,24,24,.08);
  --f-display:"Bricolage Grotesque","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --f-body:"Public Sans","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:clamp(1rem, 4vw, 2.5rem);
  --ring:var(--brand);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#f2f5f4; --ink-dim:#a3adac; --ink-faint:#78817f;
    --ground:#070909; --raise:#111516; --line:rgba(255,255,255,.11);
    --brand:#6ee7b7; --brand-soft:#15241f; --brand-ink:#04120d;
    --glass:rgba(255,255,255,.05); --glass-lift:rgba(255,255,255,.11);
    --halo:rgba(110,231,183,.16);
    --mesh-1:rgba(31,95,79,.55); --mesh-2:rgba(110,231,183,.16); --mesh-3:rgba(24,60,52,.5);
    --grain:rgba(255,255,255,.035);
    --shade:0 18px 44px rgba(0,0,0,.38);
    --ring:var(--brand);
  }
}
:root[data-theme="dark"]{
  --ink:#f2f5f4; --ink-dim:#a3adac; --ink-faint:#78817f;
  --ground:#070909; --raise:#111516; --line:rgba(255,255,255,.11);
  --brand:#6ee7b7; --brand-soft:#15241f; --brand-ink:#04120d;
  --glass:rgba(255,255,255,.05); --glass-lift:rgba(255,255,255,.11);
  --halo:rgba(110,231,183,.16);
  --mesh-1:rgba(31,95,79,.55); --mesh-2:rgba(110,231,183,.16); --mesh-3:rgba(24,60,52,.5);
  --grain:rgba(255,255,255,.035);
  --shade:0 18px 44px rgba(0,0,0,.38);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth; overflow-x:clip}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:400 clamp(1rem, .96rem + .2vw, 1.0625rem)/1.65 var(--f-body);
  -webkit-font-smoothing:antialiased; overflow-x:clip; max-width:100vw;
}
h1,h2,h3{font-family:var(--f-display); text-wrap:balance; margin:0; letter-spacing:-.03em; line-height:1.06}
a{color:inherit}
:focus-visible{outline:2px solid var(--ring); outline-offset:3px; border-radius:5px}
img,svg{max-width:100%}

/* Zum Inhalt springen: erste Station für Tastatur und Screenreader */
.skip{
  position:absolute; left:.75rem; top:-4rem; z-index:100;
  padding:.7rem 1.1rem; border-radius:.6rem; font-weight:600;
  background:var(--brand); color:var(--brand-ink); text-decoration:none;
  transition:top .18s ease;
}
.skip:focus{top:calc(.75rem + env(safe-area-inset-top, 0px))}

.visually-hidden{
  position:absolute!important; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── Hintergrund ──────────────────────────────────────── */
.mesh{
  position:fixed; inset:-20%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(42rem 42rem at 20% 18%, var(--mesh-1), transparent 62%),
    radial-gradient(34rem 34rem at 80% 72%, var(--mesh-2), transparent 60%),
    radial-gradient(50rem 30rem at 50% 108%, var(--mesh-3), transparent 70%);
  filter:blur(30px);
}
@media (prefers-reduced-motion: no-preference){
  .mesh{animation:drift 40s ease-in-out infinite alternate}
  @keyframes drift{ to{ transform:translate3d(4%, -3%, 0) scale(1.06) } }
}
.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.6;
  background-image:radial-gradient(var(--grain) 1px, transparent 1px);
  background-size:3px 3px;
}

.progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:60; transform-origin:0 50%;
  background:var(--brand); transform:scaleX(0);
}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .progress{ animation:grow linear both; animation-timeline:scroll(root block) }
    @keyframes grow{ to{ transform:scaleX(1) } }
  }
}

.wrap{max-width:74rem; margin-inline:auto; padding-inline:var(--gut)}

/* ── Kopfzeile ────────────────────────────────────────── */
.nav{
  position:sticky; top:calc(.75rem + env(safe-area-inset-top, 0px)); z-index:50;
  margin:.75rem auto 0; width:min(68rem, calc(100vw - 2*var(--gut)));
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding:.5rem .55rem .5rem 1rem; border-radius:1.6rem;
  background:var(--glass); border:1px solid var(--line);
  backdrop-filter:blur(24px) saturate(1.7); -webkit-backdrop-filter:blur(24px) saturate(1.7);
  box-shadow:var(--shade);
}
.brand{display:flex; align-items:center; gap:.55rem; font-weight:600; text-decoration:none; font-size:.95rem; margin-right:auto}
.logo{width:2rem; height:2rem; flex:none; display:block; overflow:visible}
.logo-bg{fill:var(--brand)}
.logo .p{fill:var(--brand-ink)}
.logo .spark{fill:#fde047}
@media (prefers-reduced-motion: no-preference){
  .logo rect.p, .logo .spark{transform-box:fill-box; transform-origin:center}
  .logo .p{animation:logo-ein .5s steps(4) backwards}
  .logo .p.v{animation:logo-ein .5s steps(4) backwards, logo-welle 3.2s steps(2) 1.2s infinite}
  .logo .spark{animation:logo-funke 1.6s steps(1) infinite}
  .brand:hover .logo{animation:logo-hopp .45s steps(3)}
  @keyframes logo-ein{from{transform:translateY(-6px); opacity:0}}
  @keyframes logo-welle{0%,70%{transform:none} 80%{transform:translateY(-1px)} 90%{transform:translateY(1px)}}
  @keyframes logo-funke{50%{opacity:0}}
  @keyframes logo-hopp{50%{transform:translateY(-4px) rotate(-6deg)}}
  .logo .p:nth-of-type(2){animation-delay:0.00s}
  .logo .p:nth-of-type(3){animation-delay:0.04s}
  .logo .p:nth-of-type(4){animation-delay:0.08s}
  .logo .p:nth-of-type(5){animation-delay:0.12s}
  .logo .p:nth-of-type(6){animation-delay:0.16s}
  .logo .p:nth-of-type(7){animation-delay:0.20s}
  .logo .p:nth-of-type(8){animation-delay:0.24s}
  .logo .p:nth-of-type(9){animation-delay:0.28s}
  .logo .p:nth-of-type(10){animation-delay:0.32s}
  .logo .p:nth-of-type(11){animation-delay:0.36s}
  .logo .p:nth-of-type(12){animation-delay:0.40s}
  .logo .p:nth-of-type(13){animation-delay:0.44s}
  .logo .p:nth-of-type(14){animation-delay:0.48s}
  .logo .p:nth-of-type(15){animation-delay:0.52s}
  .logo .p:nth-of-type(16){animation-delay:0.56s}
  .logo .p:nth-of-type(17){animation-delay:0.60s}
  .logo .p:nth-of-type(18){animation-delay:0.64s}
  .logo .p.v:nth-of-type(n){animation-delay:.3s, 1.2s}
}
.nav-links{display:flex; gap:.2rem; list-style:none; margin:0; padding:0; font-size:.85rem}
.nav-links a{padding:.4rem .7rem; border-radius:999px; text-decoration:none; color:var(--ink-dim)}
.nav-links a:hover{color:var(--ink); background:var(--glass-lift)}
@media (max-width:56rem){ .nav-links{display:none} }

.tools{display:flex; align-items:center; gap:.35rem}
.pill{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.4rem .7rem; border-radius:999px; font-size:.8rem; font-weight:500;
  background:transparent; color:var(--ink-dim); border:1px solid var(--line);
  cursor:pointer; font-family:inherit;
}
.pill:hover{background:var(--glass-lift); color:var(--ink)}
.pill svg{width:.95rem; height:.95rem; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
select.pill{appearance:none; padding-right:1.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .55rem center; background-size:.55rem}
.go{
  padding:.45rem 1rem; border-radius:999px; text-decoration:none; font-size:.85rem; font-weight:600;
  background:var(--brand); color:var(--brand-ink); white-space:nowrap;
}

/* ── Hero ─────────────────────────────────────────────── */
.kicker{
  display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1.5rem;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand); padding:.35rem .8rem; border-radius:999px;
  background:var(--brand-soft); border:1px solid var(--line);
}
.kicker i{width:.4rem; height:.4rem; border-radius:50%; background:var(--brand); flex:none}
@media (prefers-reduced-motion: no-preference){
  .kicker i{animation:pulse 2.8s ease-in-out infinite}
  @keyframes pulse{50%{opacity:.25}}
}
h1{font-size:clamp(2.3rem, 1.3rem + 4.4vw, 5rem); font-weight:800; max-width:16ch}
h1 em{font-style:normal; color:var(--brand)}
.cta{display:flex; flex-wrap:wrap; gap:.75rem}
.btn{
  padding:.85rem 1.5rem; border-radius:999px; text-decoration:none; font-weight:600; font-size:.95rem;
  border:1px solid transparent; cursor:pointer; font-family:inherit; display:inline-block;
}
@media (prefers-reduced-motion: no-preference){
  .btn{transition:transform .2s ease, background .2s ease}
  .btn:hover{transform:translateY(-2px)}
}
.btn-solid{background:var(--brand); color:var(--brand-ink); box-shadow:0 8px 28px var(--halo)}
.btn-ghost{background:var(--glass); border-color:var(--line); color:var(--ink)}
.btn-ghost:hover{background:var(--glass-lift)}

/* ── Abschnitte ───────────────────────────────────────── */
section{padding-block:clamp(3rem, 8vh, 5.5rem)}
.eyebrow{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 .8rem}
h2{font-size:clamp(1.7rem, 1.3rem + 1.9vw, 2.7rem); font-weight:700}
h3{font-size:1.2rem; font-weight:700}
.sub{color:var(--ink-dim); margin:.9rem 0 0; max-width:50ch}

/* ── Figur wählen: Pixel-Stadt, Pfad, Dialogbox ─────────── */
:root{--ok:#1d7a4c; --mid:#a35f00; --no:#b42318}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--ok:#6ee7b7; --mid:#f0b44c; --no:#ff8a7a} }
:root[data-theme="dark"]{--ok:#6ee7b7; --mid:#f0b44c; --no:#ff8a7a}

.start{padding-block:clamp(2rem, 6vh, 4rem) 1rem}
.start h1{font-size:clamp(2.2rem, 1.4rem + 3.6vw, 4.2rem); margin-bottom:1.1rem}

.pfad{list-style:none; margin:0 0 1rem; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase}
.pfad li{padding:.3rem .65rem; border:2px solid var(--line); color:var(--ink-faint)}
.pfad li + li::before{content:"→ "; color:var(--ink-faint)}
.pfad li.fertig{color:var(--brand); border-color:var(--brand)}
.pfad li.jetzt{color:var(--brand-ink); background:var(--brand); border-color:var(--brand)}
.pfad li.jetzt::before, .pfad li.fertig::before{color:inherit}

.szene{position:relative; overflow:hidden; border:3px solid var(--ink); background:#1e3f8c}
.stadt{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center bottom; image-rendering:pixelated}
.stadt-tag{opacity:0}
.szene[data-tag="2"] .stadt-tag{opacity:.55}
.szene[data-tag="4"] .stadt-tag{opacity:1}
.bahnen{position:relative; z-index:1; list-style:none; margin:0; padding:clamp(1.5rem, 6vw, 4rem) 0 0; display:grid}
.bahnen li{display:block}

.figur{position:relative; display:grid; grid-template-columns:minmax(5.5rem, 9rem) 1fr; align-items:end; background:rgba(12,16,28,.28); border-bottom:5px solid #3b3f4a; padding:.9rem clamp(.6rem, 2vw, 1.4rem) 0}
.trio{display:flex; justify-content:space-around; align-items:flex-end; gap:.4rem}
.person{position:relative; display:flex; flex-direction:column; align-items:center; background:none; border:0; padding:.2rem .4rem 0; color:inherit; font:inherit; cursor:pointer}
.person:hover{background:rgba(255,255,255,.12)}
.person:focus-visible{outline:3px solid #fff; outline-offset:-3px}
.person[aria-pressed="true"]{background:rgba(255,255,255,.16); box-shadow:inset 0 -4px 0 var(--brand)}
.prop{width:clamp(14px, 1.8vw, 22px); height:auto; image-rendering:pixelated; margin-bottom:-2px}
.sprite{position:relative; display:block; height:clamp(64px, 17vw, 124px); aspect-ratio:1/2; overflow:hidden}
.sprite img{position:absolute; left:0; top:0; height:100%; width:auto; max-width:none; image-rendering:pixelated}
.s-main{display:none}
.person[aria-pressed="true"] .s-heute{display:none}
.person[aria-pressed="true"] .s-main, .me-figur .s-main{display:block}
.szene[data-wahl="ja"] .person[aria-pressed="false"]{opacity:.35; filter:grayscale(.7)}

.tag{align-self:center; justify-self:start; white-space:nowrap; font-family:var(--f-mono); font-size:clamp(.62rem, .55rem + .3vw, .78rem); letter-spacing:.06em; text-transform:uppercase; color:#eef0f3; background:rgba(0,0,0,.5); padding:.2rem .5rem}
.figur.gewaehlt .tag{background:var(--brand); color:var(--brand-ink)}

@media (prefers-reduced-motion: no-preference){
  .sprite img{animation:strip 1s infinite}
  .sprite img.n2{animation-timing-function:steps(2); animation-duration:.7s}
  .sprite img.n3{animation-timing-function:steps(3); animation-duration:.6s}
  .sprite img.n4{animation-timing-function:steps(4); animation-duration:.6s}
  .sprite img.n5{animation-timing-function:steps(5); animation-duration:.7s}
  .sprite img.n6{animation-timing-function:steps(6); animation-duration:.9s}
  .sprite img.n10{animation-timing-function:steps(10); animation-duration:1s}
  .sprite img.n7{animation-timing-function:steps(7); animation-duration:.9s}
  .sprite img.n8{animation-timing-function:steps(8); animation-duration:.9s}
  .sprite img.n11{animation-timing-function:steps(11); animation-duration:1.3s}
  @keyframes strip{to{transform:translateX(-100%)}}
  .stadt-tag{transition:opacity 1.2s ease}
  .prop{animation:wackel 1.2s steps(2) infinite}
  .person:nth-child(2) .prop{animation-delay:.3s}
  .person:nth-child(3) .prop{animation-delay:.6s}
  @keyframes wackel{50%{transform:translateY(-3px) rotate(-6deg)}}
  .person.befreit .prop{animation:weg .9s steps(6) forwards}
  @keyframes weg{to{transform:translateY(-90px) rotate(30deg); opacity:0}}
  .stempel{animation:stempel .35s steps(3)}
  @keyframes stempel{from{transform:rotate(-3deg) scale(1.8); opacity:0}}
}
@media (prefers-reduced-motion: reduce){ .person.befreit .prop{visibility:hidden} }

.konsole{margin-top:1rem; border:3px solid var(--ink); background:var(--raise); box-shadow:6px 6px 0 var(--brand); padding:clamp(1rem, 3vw, 1.6rem); min-height:9rem}
.frage{font-family:var(--f-display); font-weight:700; font-size:clamp(1.25rem, 1.1rem + .8vw, 1.7rem); margin:0 0 .9rem; letter-spacing:-.02em}
.skill{margin:0 0 1rem; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint)}
.skill b{display:block; font-family:var(--f-display); font-size:clamp(1.3rem, 1.1rem + .9vw, 1.8rem); letter-spacing:-.02em; text-transform:none; color:var(--brand)}
.chips{display:flex; flex-wrap:wrap; gap:.55rem}
.chip{font:600 .95rem var(--f-body); color:var(--ink); background:var(--ground); border:2px solid var(--ink); padding:.55rem .9rem; cursor:pointer; box-shadow:3px 3px 0 var(--line)}
.chip:hover{background:var(--brand-soft)}
.chip[aria-pressed="true"]{background:var(--brand); color:var(--brand-ink); border-color:var(--brand)}
#st-2{position:relative}
.edit-btn{position:absolute; top:0; right:0; font:600 .85rem var(--f-body); color:var(--ink); background:var(--ground); border:2px solid var(--ink); padding:.35rem .7rem; cursor:pointer; box-shadow:2px 2px 0 var(--line)}
.edit-btn:hover, .edit-btn[aria-expanded="true"]{background:var(--brand-soft)}
.edit-btn:focus-visible{outline:3px solid var(--brand); outline-offset:2px}
.edit-form{display:grid; gap:1rem; padding-top:2.4rem}
.feld{display:grid; gap:.35rem; border:0; margin:0; padding:0; min-width:0}
.feld > span, .feld legend{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); padding:0; margin-bottom:.35rem}
.edit-form input{font:500 1rem var(--f-body); color:var(--ink); background:var(--ground); border:2px solid var(--ink); padding:.55rem .7rem; width:100%; max-width:26rem}
.edit-form input:focus-visible{outline:3px solid var(--brand); outline-offset:1px}
.eigen{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.7rem}
.eigen input{flex:1 1 12rem}
.stempel{display:inline-block; margin:0; transform:rotate(-3deg); font-family:var(--f-mono); font-weight:700; font-size:clamp(.95rem, .85rem + .5vw, 1.2rem); letter-spacing:.12em; text-transform:uppercase; border:3px solid currentColor; padding:.3rem .75rem}
.v-ja{color:var(--ok)} .v-teil{color:var(--mid)} .v-nein{color:var(--no)}
.antwort{font-size:clamp(1.05rem, 1rem + .4vw, 1.3rem); max-width:46ch; margin:.9rem 0 1.2rem}

/* ── Spieler 2: Main Skill ─────────────────────────────── */
.karte-me{display:grid; grid-template-columns:minmax(0, 15rem) 1fr; gap:clamp(1rem, 4vw, 2.5rem); align-items:center; border:3px solid var(--ink); background:var(--raise); box-shadow:6px 6px 0 var(--brand); padding:clamp(1rem, 3vw, 1.8rem)}
.me-figur{display:grid; place-items:end center; background:var(--brand-soft); border:2px solid var(--line); padding:1.5rem .8rem .8rem}
.me-figur .sprite{height:auto; width:100%}
.karte-me h2{margin:0}
.me-klasse{margin:.3rem 0 1.2rem; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint)}
.werte{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.werte li{display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:center; font-size:.95rem}
.balken{display:flex; gap:3px}
.balken i{display:block; width:clamp(10px, 1.6vw, 16px); height:clamp(10px, 1.6vw, 16px); background:var(--line)}
.balken i.an{background:var(--brand)}
.lv3 .balken i.an{background:var(--mid)}
.lv2 .balken i.an, .lv1 .balken i.an{background:var(--no)}
.lv0 span:first-child, .lv1 span:first-child{color:var(--ink-faint)}

@media (max-width: 640px){
  .figur{grid-template-columns:1fr; gap:.3rem}
  .karte-me{grid-template-columns:1fr}
  .me-figur .sprite{width:min(100%, 18rem)}
}

/* Intro-Video: morpht aus der Karte (intro.js). Karte bleibt im Fluss, das Video liegt absolut darueber. */
.me-buehne{position:relative}
.karte-me{position:relative; transition:opacity .2s linear}
/* Pixel-Computer: Bildschirm (Einzelbild 64x73, x 11-21, y 39-48) zeigt ein blinkendes Play-Zeichen,
   darueber eine Sprechblase "Play Video" (Monitor aussen x 7-25, oben y 35). Beides startet das Intro. */
.me-pc{position:relative; display:block; width:100%}
.me-screen{position:absolute; left:calc(11 / 64 * 100%); top:calc(39 / 73 * 100%); width:calc(11 / 64 * 100%); height:calc(10 / 73 * 100%); z-index:1; display:grid; place-items:center; background:#12281c; cursor:pointer}
.me-screen svg{width:64%; height:auto; animation:me-cursor 1.2s steps(2) infinite}
.me-screen svg rect{fill:#6ee796}
.me-pc:hover .me-screen{background:#1c3d2b}
.me-pc:hover .me-screen svg rect{fill:#c8ffd9}
@keyframes me-cursor{50%{opacity:.45}}
.me-play{position:absolute; left:calc(16 / 64 * 100%); top:calc(35 / 73 * 100% - 12px); transform:translate(-50%, -100%); z-index:2; display:inline-flex; align-items:center; gap:.4em; white-space:nowrap; font:700 clamp(.62rem, 1.1vw, .74rem)/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; cursor:pointer; border:3px solid var(--ink); background:var(--brand); color:var(--brand-ink); padding:.45em .6em; box-shadow:3px 3px 0 var(--ink)}
.me-play::after{content:""; position:absolute; left:50%; top:100%; width:8px; height:8px; background:var(--brand); border-right:3px solid var(--ink); border-bottom:3px solid var(--ink); transform:translate(-50%, -3px) rotate(45deg)}
.me-play:hover{transform:translate(calc(-50% - 1px), calc(-100% - 1px)); box-shadow:4px 4px 0 var(--ink)}
.me-play:focus-visible, .me-zu:focus-visible{outline:3px solid var(--ring); outline-offset:3px}
.me-play-icon{font-size:.9em}
.me-play.laedt{cursor:progress}
.me-play.laedt .me-play-icon, .me-play.laedt ~ .sprite .me-screen svg{animation:me-cursor .35s steps(2) infinite}
.me-intro{position:absolute; left:0; top:0; z-index:2; display:block; background:#000; opacity:0; transition:opacity .2s linear}
.me-buehne.intro-an .me-intro{opacity:1}
.me-buehne.intro-an .karte-me{opacity:0; pointer-events:none}
.me-buehne.intro-an{transition:height .7s cubic-bezier(.2,.8,.2,1)}
.me-buehne.intro-gross .me-intro{transition:opacity .2s linear, left .7s cubic-bezier(.2,.8,.2,1), top .7s cubic-bezier(.2,.8,.2,1), width .7s cubic-bezier(.2,.8,.2,1), height .7s cubic-bezier(.2,.8,.2,1), clip-path .7s cubic-bezier(.2,.8,.2,1)}
.me-zu{position:absolute; top:.6rem; right:.6rem; z-index:3; width:2.4rem; height:2.4rem; border:3px solid var(--ink); background:var(--raise); color:var(--ink); font:700 1.3rem/1 var(--f-mono); cursor:pointer; box-shadow:3px 3px 0 var(--ink)}
@media (prefers-reduced-motion: reduce){
  .karte-me, .me-intro, .me-buehne.intro-an, .me-buehne.intro-gross .me-intro{transition:none}
  .me-screen svg, .me-play.laedt .me-play-icon, .me-play.laedt ~ .sprite .me-screen svg{animation:none}
}

/* ── Spiel: ein Arbeitstag, zwei Runden ───────────────── */
.play{margin-top:1rem; border:3px solid var(--ink); background:var(--raise); box-shadow:6px 6px 0 var(--brand); padding:clamp(1rem, 3vw, 1.6rem); position:relative}
.play-head{display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center}
.play-head p{margin:0}
.rolle{font-size:.9rem; color:var(--ink-dim)}
.rolle b{color:var(--ink)}
.runde{font-weight:700; color:var(--no)}
.runde.ms{color:var(--ok)}
.uhr b, .punkte b{font-family:var(--f-display); font-size:1.6rem; font-variant-numeric:tabular-nums}
.punkte{margin-left:auto !important; color:var(--ink-dim)}
.g-knoepfe{display:flex; flex-wrap:wrap; gap:.5rem}
.tagbalken{height:8px; background:var(--line); margin:.9rem 0 0}
.tagbalken i{display:block; height:100%; width:0; background:var(--brand)}
.buehne-spiel{position:relative; margin:1rem 0; border:3px solid var(--ink); background:#0d1428; line-height:0}
#g-canvas{display:block; width:100%; height:auto; max-width:100%; image-rendering:pixelated; touch-action:manipulation; cursor:pointer}
#g-canvas:focus-visible{outline:3px solid var(--brand); outline-offset:2px}
.lock{position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:.8rem; text-align:center; background:color-mix(in srgb, var(--raise) 88%, transparent); font-family:var(--f-display); font-weight:700; font-size:1.2rem}
.lock p{margin:0}
.vergleich{border-top:2px solid var(--line); padding-top:1rem; display:grid; gap:.5rem}
.vs-zeile{margin:0; display:grid; grid-template-columns:minmax(8rem, 11rem) 1fr 3rem; gap:.8rem; align-items:center; font-weight:600}
.vs-zeile b{font-family:var(--f-display); font-size:1.3rem; text-align:right; font-variant-numeric:tabular-nums}
.vs-balken{height:16px; background:var(--line)}
.vs-balken i{display:block; height:100%; width:0; background:var(--no)}
.vs-zeile.ms .vs-balken i{background:var(--ok)}
@media (prefers-reduced-motion: no-preference){ .vs-balken i{transition:width .8s steps(8)} }
.result{margin:.6rem 0 0; font-size:1.1rem}
.result b{color:var(--brand)}
.vergleich .btn{justify-self:start; margin-top:.4rem}
.start [hidden]{display:none !important}
.play .hint{margin:.8rem 0 0; font-size:.82rem; color:var(--ink-faint)}

/* ── Kontakt ──────────────────────────────────────────── */
.contact{
  border-radius:1.8rem; padding:clamp(2rem, 5vw, 3.2rem); text-align:center;
  background:var(--glass); border:1px solid var(--line);
  backdrop-filter:blur(24px) saturate(1.6); -webkit-backdrop-filter:blur(24px) saturate(1.6);
  box-shadow:var(--shade);
}
.contact p{color:var(--ink-dim); margin:1rem auto 2rem; max-width:44ch}
.mail{
  display:inline-block; font-family:var(--f-mono); font-size:clamp(.95rem, .9rem + .5vw, 1.2rem);
  padding:.9rem 1.8rem; border-radius:999px; text-decoration:none; font-weight:500;
  background:var(--brand); color:var(--brand-ink); box-shadow:0 10px 32px var(--halo);
}


/* Kontakt-Knoepfe (frueher Deep-Dive-Pop-up) */
.dd-go{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:1rem}

/* ── Fusszeile ────────────────────────────────────────── */
footer{border-top:3px solid var(--ink); padding-block:2rem 5rem; color:var(--ink-dim); font-size:.9rem; margin-top:3.5rem}
.fgrid{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:start; gap:1.2rem 2rem}
.fwer{display:grid; gap:.25rem}
.fwer strong{font-family:var(--f-display); font-size:1.1rem; color:var(--ink)}
.fwer a, .flinks a{color:inherit; text-underline-offset:3px}
.fwer a:hover, .flinks a:hover{color:var(--brand)}
.flinks{display:grid; gap:.35rem; justify-items:end; text-align:right}
.fbase{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem 1.5rem; margin-top:1.6rem; padding-top:1rem; border-top:1px solid var(--line); color:var(--ink-faint); font-size:.8rem}
@media (max-width: 30rem){ .flinks{justify-items:start; text-align:left} }

/* ── Rechtstexte ──────────────────────────────────────── */
.legal{max-width:44rem; padding-block:clamp(2.5rem, 7vh, 4.5rem)}
.legal h1{font-size:clamp(1.9rem, 1.5rem + 1.8vw, 2.9rem); max-width:22ch; margin-bottom:.6rem}
.legal h2{font-size:1.3rem; margin:2.6rem 0 .7rem}
.legal p, .legal li{color:var(--ink-dim); max-width:68ch}
.legal ul{padding-left:1.2rem}
.legal li{margin-bottom:.4rem}
.legal .updated{font-family:var(--f-mono); font-size:.75rem; color:var(--ink-faint)}
.legal dl{display:grid; grid-template-columns:auto 1fr; gap:.4rem 1.2rem; margin:1rem 0}
.legal dt{font-weight:600; color:var(--ink)}
.legal dd{margin:0; color:var(--ink-dim)}
.todo{
  border-left:3px solid var(--brand); background:var(--brand-soft);
  padding:.9rem 1.1rem; border-radius:0 .6rem .6rem 0; margin:1.2rem 0; color:var(--ink);
}
.todo p{color:inherit; margin:0}

/* ── Einblenden, rein als Verbesserung ────────────────── */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{ animation:rise both ease-out; animation-timeline:view(); animation-range:entry 0% entry 85% }
    @keyframes rise{ from{ opacity:.55; transform:translateY(20px) } to{ opacity:1; transform:none } }
  }
}

/* ── Allan Brignoli ───────────────────────────────────── */
.profil .lead{font-size:1.15rem; color:var(--ink); max-width:52ch}
.profil-figur{width:9rem; max-width:100%; margin:1.5rem 0 0}
.profil-figur .sprite{height:auto; width:100%}
.profil-figur .s-main{display:block}
.linkliste{list-style:none; padding:0 !important; display:grid; gap:.7rem}
.linkliste li{margin:0}
.linkliste a{display:grid; gap:.2rem; padding:.9rem 1rem; border:2px solid var(--ink); background:var(--raise); color:var(--ink); text-decoration:none; box-shadow:4px 4px 0 var(--brand)}
.linkliste a:hover{transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--brand)}
.linkliste span{color:var(--ink-dim)}
.verweis{max-width:26rem; margin:1.6rem 0 0}
.contact .wo{margin-bottom:0; color:var(--ink); font-weight:500}
.contact .anf-oder{margin:2rem auto 0; color:var(--ink); font-weight:600}

/* ── Antworten ────────────────────────────────────────── */
.faq-lead{color:var(--ink-dim); margin:.9rem 0 0; max-width:50ch}
.faq{display:grid; gap:.9rem; margin-top:1.8rem; max-width:52rem}
.faq details{border:2px solid var(--ink); background:var(--raise); box-shadow:4px 4px 0 var(--brand)}
.faq details[open]{box-shadow:6px 6px 0 var(--brand)}
.faq summary{position:relative; cursor:pointer; list-style:none; padding:1rem 3.2rem 1rem 1.1rem; font-family:var(--f-display); font-weight:600; font-size:1.05rem; line-height:1.3; letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:1.3rem; top:50%; width:.62rem; height:.62rem; margin-top:-.52rem; border-right:3px solid var(--brand); border-bottom:3px solid var(--brand); transform:rotate(45deg)}
.faq details[open] summary::after{margin-top:-.2rem; transform:rotate(-135deg)}
.faq summary:hover{background:var(--brand-soft)}
.faq summary:focus-visible{outline:3px solid var(--ring); outline-offset:2px; border-radius:0}
.faq details > p{margin:0; padding:0 1.1rem .7rem; color:var(--ink-dim); max-width:66ch}
.faq details > p:last-child{padding-bottom:1.1rem}
.faq .faq-link a{color:var(--brand); font-weight:600; text-underline-offset:3px}
.faq .faq-link a:hover{color:var(--ink)}
@media (prefers-reduced-motion: no-preference){
  .faq summary::after{transition:transform .2s steps(3)}
  .faq details[open] > :not(summary){animation:faq-auf .3s steps(4)}
  @keyframes faq-auf{from{opacity:0; transform:translateY(-6px)}}
}

/* ── Meine Seiten (Fusszeile) ─────────────────────────── */
.sites{margin-bottom:2rem}
.sites h2{font-size:1.1rem; font-weight:700; letter-spacing:-.01em; margin:0 0 .9rem; color:var(--ink)}
.sites .linkliste{grid-template-columns:repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap:1rem; margin:0}
.sites .linkliste a{font-size:.9rem}