/* ============================================================
   APPS-LANDINGPAGE — Stil aus zottisapp (Launcher + Quests OS):
   dunkle Flaechen, Karten mit eigener Akzentfarbe, fette
   System-Schrift, Wortmarken statt fehlender Logos.
   Eigener Namensraum "--ax-", damit nichts mit den Praefixen "--lx-",
   "--wq-" oder "--zs-" kollidiert, falls Seiten spaeter zusammen-
   gefuehrt werden. (Kein Stern-Slash in Kommentaren - das wuerde den
   Kommentar vorzeitig schliessen und den naechsten Block verwerfen.)
   ============================================================ */
:root{
  --ax-bg:#0b0b0d;
  --ax-card:#151519;
  --ax-line:#2a2a31;
  --ax-text:#f4f4f5;
  --ax-muted:#8b8b96;
  --ax-radius:20px;
  --ax-touch:48px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--ax-bg); color:var(--ax-text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{
  width:100%; max-width:1080px; margin:0 auto;
  padding:38px calc(20px + env(safe-area-inset-left,0))
          calc(38px + env(safe-area-inset-bottom,0));
}

/* ── Kopf ────────────────────────────────────────────── */
.top{display:flex; align-items:center; gap:14px; margin-bottom:46px}
.top img{height:46px; width:auto; filter:brightness(0) invert(1)}
.top .back{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  min-height:var(--ax-touch); padding:0 6px;
  font-size:13px; font-weight:700; color:var(--ax-muted); text-decoration:none;
}
.top .back:hover{color:var(--ax-text)}

.intro{max-width:640px; margin-bottom:52px}
.intro .kicker{
  display:block; font-size:11.5px; font-weight:800; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ax-muted); margin-bottom:16px;
}
.intro h1{
  margin:0 0 16px; font-size:clamp(30px,6vw,46px); font-weight:900;
  letter-spacing:-.03em; line-height:1.12;
}
.intro p{margin:0; font-size:15.5px; line-height:1.7; color:var(--ax-muted)}

/* ── Abschnitte ──────────────────────────────────────── */
.sec{margin-bottom:52px}
.sec > h2{
  display:flex; align-items:center; gap:12px; margin:0 0 20px;
  font-size:12px; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ax-muted);
}
.sec > h2::after{content:""; flex:1; height:1px; background:var(--ax-line)}

.grid{display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width:640px){ .grid{grid-template-columns:1fr 1fr} }
@media (min-width:980px){ .grid{grid-template-columns:1fr 1fr 1fr} }

/* ── Karte ───────────────────────────────────────────── */
.app{
  --accent:var(--ax-muted);
  position:relative; display:flex; flex-direction:column; gap:14px;
  min-height:212px; padding:24px 22px 20px;
  background:var(--ax-card); border:1px solid var(--ax-line);
  border-radius:var(--ax-radius); text-decoration:none;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.app:hover,.app:focus-visible{
  transform:translateY(-3px); outline:none;
  border-color:var(--accent); box-shadow:0 10px 34px -12px var(--accent);
}
.app:active{transform:translateY(-1px)}

/* Wortmarke — gleiche Logik wie im zottisapp-Launcher.
   Der grosse Buchstabe traegt die Akzentfarbe: ab 24px fett gilt die
   3:1-Schwelle, kleine Texte bleiben deshalb bewusst grau/weiss. */
.wordmark{line-height:1}
.wordmark .mark{font-size:38px; font-weight:900; letter-spacing:-.04em}
.wordmark .mark span{color:var(--accent)}
.wordmark .name{margin-top:9px; font-size:15px; font-weight:800; letter-spacing:.13em}
.wordmark .tag{
  margin-top:5px; font-size:10px; font-weight:800; letter-spacing:.24em;
  color:var(--ax-muted);
}

.desc{margin:0; flex:1; font-size:13.5px; line-height:1.65; color:var(--ax-muted)}

.go{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:800; color:var(--ax-muted);
  transition:color .18s ease;
}
.app:hover .go,.app:focus-visible .go{color:var(--ax-text)}
.go svg{width:14px; height:14px; fill:currentColor}

.badge{
  position:absolute; top:18px; right:18px;
  padding:5px 10px; border-radius:40px;
  font-size:9.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ax-text); background:rgba(255,255,255,.08);
  border:1px solid var(--ax-line);
}

/* ── Fuss ────────────────────────────────────────────── */
.foot{
  display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center;
  padding-top:26px; border-top:1px solid var(--ax-line);
  font-size:12.5px; color:var(--ax-muted);
}
/* Padding statt Zeilenhoehe: bringt die Tippflaeche auf ~45px, ohne
   die Fusszeile optisch auseinanderzuziehen. */
.foot a{display:inline-block; padding:15px 4px; font-weight:700; text-decoration:none}
.foot a:hover{color:var(--ax-text)}
.foot .right{margin-left:auto}

@media (prefers-reduced-motion:reduce){
  .app{transition:none}
  .app:hover,.app:focus-visible,.app:active{transform:none}
}

/* ─────────────────────────────────────────────── Einwilligung (GA4)
   Wird von assets/js/consent.js erzeugt und nur eingeblendet, solange
   noch keine Entscheidung gefallen ist. */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:rgba(13,13,16,.97);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--ax-line);
  box-shadow:0 -18px 50px -24px rgba(0,0,0,.9);
  padding-bottom:env(safe-area-inset-bottom);
  animation:consent-up .35s cubic-bezier(.25,.8,.25,1);
}
@keyframes consent-up{from{transform:translateY(100%)}to{transform:none}}

.consent-inner{
  width:100%; max-width:1120px; margin-inline:auto;
  padding:20px 22px;
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px;
}
.consent-text{flex:1 1 360px}
.consent-text strong{
  display:block; font-size:1rem; font-weight:650;
  color:var(--ax-text); margin-bottom:.3rem;
}
.consent-text p{
  margin:0; font-size:.88rem; line-height:1.6; color:var(--ax-muted);
}
.consent-text a{color:#7dd3fc; text-decoration:underline}
.consent-text a:hover{color:var(--ax-text)}

.consent-actions{display:flex; flex-wrap:wrap; gap:10px; margin-left:auto}
/* Beide Knoepfe bewusst gleich gross und gleich auffaellig — ein
   versteckter Ablehnen-Button waere keine freiwillige Einwilligung. */
.consent-btn{
  min-height:var(--ax-touch); padding:0 24px;
  border-radius:999px; border:1px solid var(--ax-line);
  background:#1d1d23; color:var(--ax-text);
  font:inherit; font-size:.88rem; font-weight:600;
  cursor:pointer; transition:background .2s ease, border-color .2s ease;
}
.consent-btn:hover{background:#26262e; border-color:#3a3a44}
.consent-yes{background:var(--ax-text); color:#0b0b0d; border-color:var(--ax-text)}
.consent-yes:hover{background:#fff; border-color:#fff}
.consent-btn:focus-visible{outline:2px solid #7dd3fc; outline-offset:3px}

@media (max-width:620px){
  .consent-inner{padding:18px 18px}
  .consent-actions{width:100%; margin-left:0}
  .consent-btn{flex:1}
}