/* 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}
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}
.mark{
  width:1.5rem; height:1.5rem; border-radius:.42rem; display:grid; place-items:center; flex:none;
  background:var(--brand); color:var(--brand-ink); font-weight:800; font-size:.72rem
}
.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 ─────────────────────────────────────────────── */
.hero{padding-block:clamp(3.5rem, 11vh, 7rem) clamp(2.5rem, 7vh, 4.5rem)}
.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)}
.lede{margin:1.5rem 0 2.2rem; font-size:clamp(1.05rem, 1rem + .5vw, 1.32rem); color:var(--ink-dim); max-width:48ch}
.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}

/* ── Seitwärts-Track ──────────────────────────────────── */
.railhead{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap}
.swipe{font-family:var(--f-mono); font-size:.72rem; color:var(--ink-faint); white-space:nowrap; display:flex; align-items:center; gap:.5rem}
@media (prefers-reduced-motion: no-preference){
  .swipe span{display:inline-block; animation:nudge 1.9s ease-in-out infinite}
  @keyframes nudge{50%{transform:translateX(5px)}}
}
.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:min(21rem, 78vw); gap:1.1rem;
  overflow-x:auto; scroll-snap-type:x mandatory; margin-top:2rem;
  padding:.5rem var(--gut) 1.8rem; margin-inline:calc(-1 * var(--gut)); max-width:100vw;
  scrollbar-width:thin;
}
.tile{
  scroll-snap-align:center; position:relative; overflow:hidden;
  border-radius:1.4rem; padding:1.7rem 1.5rem; min-height:18rem;
  display:flex; flex-direction:column; justify-content:space-between; gap:1rem;
  background:var(--glass); border:1px solid var(--line);
  backdrop-filter:blur(20px) saturate(1.5); -webkit-backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:var(--shade);
}
.tile .no{font-family:var(--f-mono); font-size:.72rem; color:var(--brand); letter-spacing:.1em}
.tile h3{margin:0 0 .6rem; font-size:1.45rem}
.tile p{margin:0; color:var(--ink-dim); font-size:.95rem}

/* ── Aussage ──────────────────────────────────────────── */
.claim{
  border-radius:1.6rem; padding:clamp(1.8rem, 5vw, 3.2rem);
  background:var(--glass); border:1px solid var(--line);
  backdrop-filter:blur(20px) saturate(1.5); -webkit-backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:var(--shade);
}
.claim p.big{
  font-family:var(--f-display); font-weight:700; margin:0;
  font-size:clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem); line-height:1.13; letter-spacing:-.025em;
  max-width:24ch; text-wrap:balance;
}
.claim p.big b{color:var(--brand); font-weight:inherit}
.claim .body{margin:1.4rem 0 0; color:var(--ink-dim); max-width:56ch}
.trust{
  display:flex; gap:1rem; align-items:flex-start; margin-top:2.2rem;
  padding-top:1.5rem; border-top:1px solid var(--line); color:var(--ink-dim); font-size:.93rem;
}
.trust .sym{color:var(--brand); font-family:var(--f-mono); font-size:.8rem; flex:none; padding-top:.15rem}
.trust p{margin:0; max-width:58ch}

/* ── Ablauf ───────────────────────────────────────────── */
.steps{list-style:none; margin:2.4rem 0 0; padding:0}
.steps li{display:grid; grid-template-columns:auto 1fr; gap:1.3rem; padding:1.5rem 0; border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps .dot{
  width:2.4rem; height:2.4rem; border-radius:50%; display:grid; place-items:center; flex:none;
  font-family:var(--f-mono); font-size:.8rem; color:var(--brand);
  border:1px solid var(--line); background:var(--brand-soft);
}
.steps .when{font-family:var(--f-mono); font-size:.72rem; color:var(--brand); letter-spacing:.08em; display:block; margin-bottom:.3rem}
.steps h3{margin:0 0 .35rem}
.steps p{margin:0; color:var(--ink-dim); font-size:.95rem; max-width:54ch}

/* ── Zielgruppen ──────────────────────────────────────── */
.who{display:flex; flex-wrap:wrap; gap:.55rem; margin:2rem 0 0; padding:0; list-style:none}
.who li{font-size:.9rem; padding:.5rem 1rem; border-radius:999px; color:var(--ink-dim); background:var(--glass); border:1px solid var(--line)}

/* ── Spiel ────────────────────────────────────────────── */
.play{
  border-radius:1.6rem; padding:clamp(1.5rem, 4vw, 2.4rem);
  background:var(--glass); border:1px solid var(--line);
  backdrop-filter:blur(20px) saturate(1.5); -webkit-backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:var(--shade); margin-top:2rem;
}
.play-head{display:flex; flex-wrap:wrap; gap:1rem; align-items:baseline; justify-content:space-between}
.scoreboard{display:flex; gap:1.6rem; font-family:var(--f-mono); font-size:.8rem; color:var(--ink-faint)}
.scoreboard b{display:block; font-size:1.5rem; color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums}
.board{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(8.5rem, 1fr)); gap:.7rem; margin:1.6rem 0 1.2rem;
}
.slot{
  position:relative; min-height:5.2rem; border-radius:.9rem; padding:.7rem .8rem;
  border:1px dashed var(--line); background:transparent; color:var(--ink);
  font:500 .88rem/1.35 var(--f-body); text-align:left; cursor:default;
}
.slot[data-live="1"]{
  border-style:solid; cursor:pointer; background:var(--raise); box-shadow:var(--shade);
  border-color:var(--brand);
}
.slot[data-live="1"]:hover{background:var(--brand-soft)}
.slot .tag{display:block; font-family:var(--f-mono); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brand); margin-bottom:.3rem}
.slot .min{position:absolute; right:.6rem; bottom:.5rem; font-family:var(--f-mono); font-size:.7rem; color:var(--ink-faint)}
.slot:disabled{opacity:.45}
.play-foot{display:flex; flex-wrap:wrap; gap:.7rem; align-items:center}
.play .hint{margin:0; font-size:.85rem; color:var(--ink-faint)}
.result{margin:1.2rem 0 0; font-size:1rem; color:var(--ink)}
.result b{color:var(--brand)}

/* ── 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);
}

/* ── Fusszeile ────────────────────────────────────────── */
footer{border-top:1px solid var(--line); padding-block:2.5rem; color:var(--ink-faint); font-size:.85rem; margin-top:3.5rem}
.fbar{display:flex; flex-wrap:wrap; gap:.7rem 1.5rem; justify-content:space-between; align-items:center}
.fbar nav{display:flex; gap:1.2rem; flex-wrap:wrap}
.fbar a{color:inherit}

/* ── 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 } }
  }
}