/* shiftmelabs.de — Farben und Schriften wie in der ShiftMe-App (public/app.css), Grün = Spiel, Orange = du. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/bricolage-grotesque-800.woff2) format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/nunito-sans.woff2) format("woff2")}

:root{
  --bg:#F3F6EE; --ink:#1E2A14; --muted:#6B7562; --line:#E1E7D8;
  --green:#6CA742; --green-text:#3F6B1D; --orange:#E5A43D;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#14171B; --ink:#EEF1F3; --muted:#98A2AC; --line:#2E343B;
    --green:#7CC24E; --green-text:#9AD66E; --orange:#F0AE45;
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.0625rem; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--green-text); text-decoration-color:color-mix(in srgb,var(--green) 55%,transparent); text-underline-offset:.18em}
a:hover{text-decoration-color:currentColor}
a:focus-visible{outline:3px solid var(--orange); outline-offset:3px; border-radius:2px}

/* Bühne: das Logo ist die Seite. */
.buehne{
  min-height:100svh; display:grid; grid-template-rows:1fr auto auto 1fr auto;
  justify-items:center; align-content:center; text-align:center;
  padding:24px 16px 20px;
}
.logo{
  grid-row:2; width:min(58vw,340px); height:auto; overflow:visible;
  margin-bottom:28px;
}
.logo.klein{width:min(32vw,170px)}
.logo .lg{fill:var(--green)}
.logo .lo{fill:var(--orange)}
.wortmarke{
  grid-row:3; margin:0;
  font-family:"Bricolage Grotesque","Nunito Sans",system-ui,sans-serif; font-weight:800;
  font-size:clamp(2.4rem,7vw,3.6rem); line-height:1; letter-spacing:-.025em;
}
.zeile{grid-row:4; align-self:start; margin:14px 0 0; color:var(--muted); font-size:1.0625rem}
.fuss{grid-row:5; display:flex; gap:28px; margin-top:40px; font-size:.9375rem}
.fuss a{color:var(--muted); text-decoration:none}
.fuss a:hover{color:var(--ink)}

/* Einmaliger Auftritt: die Spirale wächst von innen nach außen, der orange Punkt kommt zuletzt. */
@media (prefers-reduced-motion:no-preference){
  .logo circle{transform-box:fill-box; transform-origin:center; animation:auftritt .55s cubic-bezier(.2,.9,.3,1.2) both}
  .logo .d0{animation-delay:.05s}.logo .d1{animation-delay:.13s}.logo .d2{animation-delay:.21s}.logo .d3{animation-delay:.29s}
  .logo .d4{animation-delay:.37s}.logo .d5{animation-delay:.45s}.logo .d6{animation-delay:.53s}.logo .d7{animation-delay:.61s}
  .logo .d8{animation-delay:.69s}.logo .d9{animation-delay:.77s}.logo .d10{animation-delay:.85s}.logo .d11{animation-delay:.93s}
  .logo .d12{animation-delay:1.12s}
  .wortmarke,.zeile,.fuss{animation:einblenden .6s ease-out both; animation-delay:1.25s}
  .fuss{animation-delay:1.45s}
}
@keyframes auftritt{from{opacity:0; transform:scale(.2)} to{opacity:1; transform:none}}
@keyframes einblenden{from{opacity:0} to{opacity:1}}

/* Rechtliches: ruhig, schmal, unterhalb der Bühne. */
.recht{
  max-width:38rem; margin:0 auto; padding:56px 16px 8px;
  border-top:1px solid var(--line);
}
.recht h2{
  font-family:"Bricolage Grotesque","Nunito Sans",system-ui,sans-serif; font-weight:800;
  font-size:1.5rem; letter-spacing:-.015em; margin:0 0 6px;
}
.recht .unterzeile{margin-top:0; color:var(--muted)}
.recht p{margin:14px 0}
.recht address{font-style:normal; margin:14px 0; line-height:1.55}
.ende{max-width:38rem; margin:0 auto; padding:40px 16px 48px; font-size:.9375rem}
.hoch{color:var(--muted)}