/* Gamehort – Webseite. Keine externen Schriften oder Skripte (DSGVO, Ladezeit). */
:root {
    --nacht: #0b0f17;
    --nacht-2: #111827;
    --karte: #161f2e;
    --linie: #263247;
    --text: #e8edf5;
    --text-2: #a7b2c4;
    --text-3: #6f7c92;
    --blau: #3987e5;
    --blau-tief: #2a78d6;
    --blau-hell: #9cc5f7;
    --gold: #f2b84b;
    --gruen: #3ecf8e;
    --rot: #f0645a;
    --lila: #a78bfa;
    --tuerkis: #2dd4bf;
    --orange: #fb923c;
    --radius: 18px;
    --breite: 1160px;
    --schrift: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --schrift-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font: 17px/1.6 var(--schrift-text);
    color: var(--text);
    background: var(--nacht);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: var(--blau-hell); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #fff; }
h1, h2, h3 { overflow-wrap: break-word; hyphens: manual; font-family: var(--schrift); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 5.4vw, 4.1rem); font-weight: 800; }
h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
p { text-wrap: pretty; }
.huelle { width: min(var(--breite), 100% - 40px); margin-inline: auto; }
.kicker {
    font: 600 0.78rem/1 var(--schrift-text);
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--blau-hell);
}
.zahl { font-variant-numeric: tabular-nums; }

/* ── Kopf ─────────────────────────────────────────────── */
.kopf {
    position: sticky; top: 0; z-index: 20;
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    background: color-mix(in srgb, var(--nacht) 78%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--linie) 60%, transparent);
}
.kopf .huelle { display: flex; align-items: center; gap: 28px; height: 68px; }
.marke { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 800 1.25rem var(--schrift); letter-spacing: -0.02em; }
.marke:hover { color: var(--text); }
.marke svg, .marke img { width: 32px; height: 32px; }
.navi { display: flex; gap: 24px; margin-left: auto; }
.navi a { color: var(--text-2); text-decoration: none; font-size: 0.95rem; }
.navi a:hover { color: var(--text); }
.knopf {
    display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
    padding: 12px 20px; border-radius: 999px;
    background: var(--blau-tief); color: #fff; text-decoration: none;
    font-weight: 650; font-size: 0.98rem;
    box-shadow: 0 10px 30px -10px rgba(57, 135, 229, 0.7);
    transition: transform 0.15s, background 0.15s;
}
.knopf:hover { color: #fff; background: var(--blau); transform: translateY(-1px); }
.knopf.leise { background: transparent; box-shadow: inset 0 0 0 1px var(--linie); color: var(--text); }
.knopf.leise:hover { box-shadow: inset 0 0 0 1px var(--text-3); }
.kopf .knopf { padding: 9px 16px; font-size: 0.9rem; }

/* ── Hero ─────────────────────────────────────────────── */
.held { position: relative; padding: 88px 0 72px; overflow: hidden; }
.held::before {
    content: ""; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
    background: radial-gradient(closest-side, rgba(57, 135, 229, 0.28), transparent 70%);
    pointer-events: none;
}
.held .huelle { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.held p.lead { font-size: 1.22rem; color: var(--text-2); margin: 22px 0 32px; max-width: 34rem; }
.held .aktionen { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.held h1 { text-wrap: wrap; }
.held .hinweis { margin-top: 18px; color: var(--text-3); font-size: 0.92rem; }
.blau-text { color: var(--blau-hell); }

/* Telefon */
.telefon {
    position: relative; width: min(340px, 100%); aspect-ratio: 9 / 19; margin-inline: auto;
    border-radius: 48px; padding: 12px;
    background: linear-gradient(160deg, #2a3446, #121925 60%);
    box-shadow: 0 50px 100px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px #2f3a4f inset, 0 0 0 2px #0a0d14;
    transform: rotate(-3deg);
}
.telefon .schirm {
    position: relative; height: 100%; border-radius: 38px; overflow: hidden;
    background: #0d1320; padding: 52px 14px 14px;
}
.telefon .schirm::before { content: ""; position: absolute; top: 12px; left: 50%; width: 96px; height: 28px; transform: translateX(-50%); background: #000; border-radius: 20px; }
.app-kopf { display: flex; justify-content: space-between; align-items: end; margin-bottom: 12px; }
.app-kopf b { font: 800 1.55rem var(--schrift); }
.app-kopf span { width: 30px; height: 30px; border-radius: 50%; background: var(--blau-tief); display: grid; place-items: center; font-weight: 700; }
.segment { display: grid; grid-template-columns: 1fr 1fr; background: #1a2335; border-radius: 10px; padding: 3px; font-size: 0.72rem; text-align: center; margin-bottom: 12px; color: var(--text-2); }
.segment i { font-style: normal; padding: 5px; border-radius: 8px; }
.segment i.an { background: #2c3850; color: #fff; font-weight: 600; }
.regal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.cover {
    aspect-ratio: 3 / 4.1; border-radius: 9px; position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: end; padding: 7px;
    font: 800 0.6rem/1.1 var(--schrift); color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.6);
}
.cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.55)); }
.cover * { position: relative; z-index: 1; }
.cover small { font: 600 0.48rem var(--schrift-text); opacity: 0.85; margin-top: 2px; }
.c1 { background: radial-gradient(circle at 70% 20%, #ffd166, transparent 45%), linear-gradient(150deg, #ef476f, #7b2cbf); }
.c2 { background: radial-gradient(circle at 30% 30%, #9be7ff, transparent 40%), linear-gradient(160deg, #0077b6, #023e8a); }
.c3 { background: repeating-linear-gradient(45deg, #2d6a4f 0 8px, #40916c 8px 16px); }
.c4 { background: radial-gradient(circle at 50% 35%, #fff3, transparent 35%), linear-gradient(170deg, #f77f00, #d62828); }
.c5 { background: conic-gradient(from 200deg at 60% 40%, #4cc9f0, #4361ee, #7209b7, #4cc9f0); }
.c6 { background: linear-gradient(180deg, #e9c46a 0 40%, #264653 40%); }
.c7 { background: radial-gradient(circle at 20% 80%, #b8f2e6, transparent 40%), linear-gradient(140deg, #5e548e, #231942); }
.c8 { background: repeating-radial-gradient(circle at 50% 120%, #ff006e 0 10px, #8338ec 10px 20px); }
.c9 { background: linear-gradient(135deg, #a3b18a, #3a5a40); }
.plakette { position: absolute; top: 6px; right: 6px; z-index: 2; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; font-size: 0.5rem; text-shadow: none; }
.plakette.versiegelt { background: var(--lila); }
.plakette.fav { background: var(--gold); color: #3a2a00; }

/* schwebende Karten am Telefon */
.held-bild { position: relative; }
.schwebe {
    position: absolute; background: rgba(22, 31, 46, 0.92); border: 1px solid var(--linie);
    border-radius: 16px; padding: 12px 14px; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px); font-size: 0.82rem;
}
.schwebe.wert { left: -6%; bottom: 16%; }
.schwebe.wert b { display: block; font: 800 1.4rem var(--schrift); color: #fff; }
.schwebe.wert span { color: var(--gruen); font-weight: 600; }
.schwebe.scan { right: -4%; top: 14%; display: flex; gap: 10px; align-items: center; }
.schwebe.scan .striche { width: 34px; height: 24px; background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 4px, #fff 4px 5px, transparent 5px 8px); border-radius: 3px; }
.schwebe .klein { color: var(--text-3); font-size: 0.72rem; }

/* ── Abschnitte ───────────────────────────────────────── */
.abschnitt { padding: 104px 0; }
.abschnitt.hell { background: linear-gradient(180deg, var(--nacht-2), var(--nacht)); border-block: 1px solid #1a2333; }
.kopfzeile { max-width: 46rem; margin-bottom: 56px; }
.kopfzeile p { color: var(--text-2); font-size: 1.12rem; margin-top: 16px; }
.kopfzeile .kicker { display: block; margin-bottom: 14px; }

/* Funktionen */
.raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.funktion {
    background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius);
    padding: 28px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.funktion p { color: var(--text-2); font-size: 0.98rem; }
.symbol { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; }
.symbol svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s-blau { background: rgba(57, 135, 229, 0.16); color: var(--blau-hell); }
.s-gruen { background: rgba(62, 207, 142, 0.14); color: var(--gruen); }
.s-gold { background: rgba(242, 184, 75, 0.15); color: var(--gold); }
.s-lila { background: rgba(167, 139, 250, 0.15); color: var(--lila); }
.s-rot { background: rgba(240, 100, 90, 0.14); color: var(--rot); }
.s-tuerkis { background: rgba(45, 212, 191, 0.14); color: var(--tuerkis); }
.funktion.gross { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.funktion.gross > div:first-child { display: flex; flex-direction: column; gap: 12px; }

/* Zustands-Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 0.8rem; font-weight: 600; padding: 6px 11px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.chip.lila { color: var(--lila); border-color: rgba(167, 139, 250, 0.4); background: rgba(167, 139, 250, 0.08); }
.chip.tuerkis { color: var(--tuerkis); border-color: rgba(45, 212, 191, 0.4); background: rgba(45, 212, 191, 0.08); }
.chip.gruen { color: var(--gruen); border-color: rgba(62, 207, 142, 0.4); background: rgba(62, 207, 142, 0.08); }
.chip.blau { color: var(--blau-hell); border-color: rgba(57, 135, 229, 0.45); background: rgba(57, 135, 229, 0.1); }
.chip.orange { color: var(--orange); border-color: rgba(251, 146, 60, 0.4); background: rgba(251, 146, 60, 0.08); }
.chip.rot { color: var(--rot); border-color: rgba(240, 100, 90, 0.4); background: rgba(240, 100, 90, 0.08); }

/* Statistik-Mock */
.statistik { background: #0f1724; border: 1px solid var(--linie); border-radius: 16px; padding: 18px; }
.statistik .titel { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.statistik .titel b { font: 800 1.6rem var(--schrift); }
.statistik .titel span { color: var(--text-3); font-size: 0.8rem; }
.balken { display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; gap: 8px; height: 120px; }
.balken div { background: linear-gradient(180deg, var(--blau), var(--blau-tief)); border-radius: 6px 6px 2px 2px; position: relative; }
.balken div.spitze { background: linear-gradient(180deg, var(--gold), #d4952a); }
.jahre { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 8px; color: var(--text-3); font-size: 0.72rem; text-align: center; font-variant-numeric: tabular-nums; }

/* Generationen */
.zeitstrahl { display: grid; grid-template-columns: repeat(9, 1fr); gap: 10px; }
.gen {
    background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; padding: 16px 12px;
    display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.gen b { font: 800 1.6rem var(--schrift); color: var(--blau-hell); font-variant-numeric: tabular-nums; }
.gen .ab { font-size: 0.75rem; color: var(--text-3); letter-spacing: 0.06em; }
.gen p { font-size: 0.82rem; color: var(--text-2); line-height: 1.4; }
.unter-zeitstrahl { margin-top: 18px; color: var(--text-3); font-size: 0.9rem; }

/* Schritte */
.schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: s; }
.schritt { position: relative; padding: 30px 28px 28px; border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); }
.schritt::before {
    counter-increment: s; content: counter(s);
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
    background: var(--blau-tief); color: #fff; font: 800 1.05rem var(--schrift); margin-bottom: 18px;
}
.schritt p { color: var(--text-2); margin-top: 8px; font-size: 0.98rem; }

/* Datenschutz-Band */
.vertrauen { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.liste { list-style: none; display: grid; gap: 16px; }
.liste li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; color: var(--text-2); }
.liste li b { color: var(--text); display: block; }
.haken { width: 28px; height: 28px; border-radius: 50%; background: rgba(62, 207, 142, 0.14); color: var(--gruen); display: grid; place-items: center; }
.haken svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Export-Karte */
.datei-karten { display: grid; gap: 14px; }
.datei { display: flex; gap: 16px; align-items: center; background: var(--karte); border: 1px solid var(--linie); border-radius: 16px; padding: 18px 20px; }
.datei .typ { font: 700 0.75rem var(--mono); padding: 10px 8px; border-radius: 10px; min-width: 64px; text-align: center; }
.datei .typ.json { background: rgba(57, 135, 229, 0.15); color: var(--blau-hell); }
.datei .typ.csv { background: rgba(62, 207, 142, 0.14); color: var(--gruen); }
.datei p { color: var(--text-2); font-size: 0.92rem; }

/* FAQ */
.fragen { max-width: 52rem; display: grid; gap: 12px; }
details { background: var(--karte); border: 1px solid var(--linie); border-radius: 16px; padding: 4px 22px; }
summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 650; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--blau-hell); font-size: 1.4rem; line-height: 1; transition: transform 0.2s; }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--text-2); padding-bottom: 20px; }

/* Abschluss */
.abschluss { text-align: center; padding: 110px 0; position: relative; overflow: hidden; }
.abschluss::before { content: ""; position: absolute; left: 50%; top: 0; width: 900px; height: 500px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(57, 135, 229, 0.22), transparent); pointer-events: none; }
.abschluss .huelle { position: relative; }
.abschluss p { color: var(--text-2); font-size: 1.15rem; margin: 18px auto 32px; max-width: 36rem; }

/* Fuß */
.fuss { border-top: 1px solid #1a2333; padding: 40px 0 48px; color: var(--text-3); font-size: 0.9rem; }
.fuss .huelle { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; justify-content: space-between; }
.fuss nav { display: flex; gap: 22px; flex-wrap: wrap; }
.fuss a { color: var(--text-2); text-decoration: none; }
.fuss a:hover { color: var(--text); }

/* Rechtstexte */
.recht { padding: 72px 0 96px; }
.recht .huelle { max-width: 760px; }
.recht h1 { font-size: clamp(2.2rem, 5vw, 3rem); margin-bottom: 28px; }
.recht h2 { font-size: 1.35rem; margin: 36px 0 10px; }
.recht p, .recht li { color: var(--text-2); margin-bottom: 12px; }
.recht ul { padding-left: 1.2rem; }
.platzhalter { background: rgba(242, 184, 75, 0.14); color: var(--gold); border-radius: 6px; padding: 1px 6px; font-weight: 600; }

/* ── Kleine Bildschirme ───────────────────────────────── */
@media (max-width: 980px) {
    .held .huelle, .vertrauen { grid-template-columns: minmax(0, 1fr); }
    .held { padding-top: 56px; }
    .held-bild { max-width: 420px; margin-inline: auto; width: 100%; }
    .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .funktion.gross { grid-column: span 2; }
    .zeitstrahl { grid-template-columns: repeat(3, 1fr); }
    .schritte { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    body { font-size: 16px; }
    .navi { display: none; }
    .kopf .knopf { margin-left: auto; }
    .raster { grid-template-columns: minmax(0, 1fr); }
    .funktion.gross { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
    .abschnitt { padding: 72px 0; }
    .schwebe.wert { left: 0; }
    .schwebe.scan { right: 0; }
    .zeitstrahl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    h1 { font-size: clamp(2rem, 9.5vw, 2.6rem); }
    .held p.lead { font-size: 1.08rem; }
    .kopf .huelle { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .knopf { transition: none; }
}
.kanzlei { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 56px; font-size: 0.8rem; color: var(--text-3); }
.kanzlei img { display: block; max-width: 100%; height: auto; border-radius: 6px; background: #fff; padding: 6px; }