/*
 * trackersAnywhere — öffentliche Seiten
 *
 * Die Farbwerte stammen unverändert aus der App
 * (app/src/main/java/de/petitsouris/trackersanywhere/ui/theme/Theme.kt):
 * DarkPalette ist der Vorgabewert, LightPalette greift bei prefers-color-scheme: light.
 * Ändert sich die App-Palette, gehören beide Blöcke nachgezogen.
 */

:root {
    color-scheme: dark light;

    --void: #05090B;
    --deep: #0A1216;
    --surface: #0F1A20;
    --surface-hi: #16242C;
    --line: #1E323C;
    --cyan: #22D3C5;
    --cyan-dim: #0E6D67;
    --amber: #F5A623;
    --rose: #FF4D6D;
    --violet: #7C6BFF;
    --lime: #8BE04B;
    --text-hi: #E7F2F4;
    --text-mid: #8CA5AF;
    --text-low: #6E8A97;

    --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 8px 24px rgb(0 0 0 / .35);
    --radius: 18px;
    --content: 64rem;
    --prose: 44rem;
}

@media (prefers-color-scheme: light) {
    :root {
        --void: #EDF3F4;
        --deep: #FFFFFF;
        --surface: #FFFFFF;
        --surface-hi: #F7FAFB;
        --line: #CBDCE1;
        --cyan: #0B7A72;
        --cyan-dim: #109C91;
        --amber: #A25F00;
        --rose: #C01F43;
        --violet: #5546C8;
        --lime: #447A1A;
        --text-hi: #0B1A20;
        --text-mid: #48626D;
        --text-low: #5E7580;

        --shadow: 0 1px 2px rgb(11 26 32 / .06), 0 8px 24px rgb(11 26 32 / .08);
    }
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--void);
    color: var(--text-hi);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; }

a { color: var(--cyan); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--text-hi); }

:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
    border-radius: 4px;
}

h1, h2, h3 { line-height: 1.2; letter-spacing: -.015em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); font-weight: 700; }
h3 { font-size: 1.06rem; font-weight: 700; }

.wrap { width: 100%; max-width: var(--content); margin-inline: auto; padding-inline: 1.25rem; }
.prose { max-width: var(--prose); }

.skip {
    position: absolute; left: -9999px;
    background: var(--surface); color: var(--text-hi);
    padding: .6rem 1rem; border-radius: 8px; z-index: 10;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- Kopfzeile ---------- */

.topbar {
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--void) 88%, transparent);
    backdrop-filter: blur(8px);
    position: sticky; top: 0; z-index: 5;
}
.topbar .wrap {
    display: flex; align-items: center; gap: 1rem;
    min-height: 60px; flex-wrap: wrap;
}
.brand {
    display: inline-flex; align-items: center; gap: .6rem;
    font-weight: 700; color: var(--text-hi); text-decoration: none;
    margin-inline-end: auto;
}
.brand img {
    width: 30px; height: 30px; border-radius: 8px;
    background: #05090B; border: 1px solid var(--line);
}
.topnav { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.topnav a {
    color: var(--text-mid); text-decoration: none; font-size: .93rem;
}
.topnav a:hover, .topnav a[aria-current="page"] { color: var(--text-hi); }
.topnav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--cyan); }
/* Sprachwahl: <details>, damit sie ohne JavaScript auf- und zugeht. Die Liste ist mit
   24 Einträgen zu lang für die Kopfzeile, deshalb ein Klappfeld statt einer Reihe. */
.lang { position: relative; }
.lang > summary {
    list-style: none; cursor: pointer; user-select: none;
    border: 1px solid var(--line); border-radius: 999px;
    padding: .2rem .65rem; font-size: .78rem; font-weight: 700;
    letter-spacing: .04em; color: var(--text-mid);
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary:hover { color: var(--text-hi); border-color: var(--cyan); }
.lang[open] > summary { background: var(--cyan); border-color: var(--cyan); color: var(--void); }
@media (prefers-color-scheme: light) { .lang[open] > summary { color: #FFFFFF; } }

.lang-menu {
    position: absolute; inset-inline-end: 0; top: calc(100% + .5rem);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 14px; padding: .55rem; box-shadow: var(--shadow); z-index: 10;
    display: grid; grid-template-columns: repeat(2, minmax(7rem, 1fr)); gap: .1rem .3rem;
    max-height: 70vh; overflow: auto;
    max-width: calc(100vw - 2rem);
}
.lang-menu a, .lang-menu span {
    font-size: .88rem; padding: .3rem .5rem; border-radius: 8px;
    text-decoration: none; color: var(--text-mid); white-space: nowrap;
}
.lang-menu a:hover { background: var(--surface-hi); color: var(--text-hi); }
.lang-menu span { color: var(--cyan); font-weight: 700; }

/* ---------- Held ---------- */

.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(60% 70% at 50% -10%, color-mix(in srgb, var(--cyan) 16%, transparent), transparent 70%),
        linear-gradient(180deg, var(--deep), var(--void));
    z-index: -2;
}
/* Der Radarkegel darf den Text nicht stören: nach unten ausblenden, damit die
   Kante des drehenden Keils nicht als Schliere über der Überschrift steht. */
.radar {
    position: absolute; top: -14rem; left: 50%; translate: -50% 0;
    width: min(52rem, 130vw); aspect-ratio: 1; opacity: .42;
    z-index: -1; pointer-events: none;
    mask-image: linear-gradient(180deg, #000 30%, transparent 72%);
    -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 72%);
}
.radar .sweep { transform-origin: 50% 50%; animation: sweep 9s linear infinite; }
@keyframes sweep { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .radar .sweep { animation: none; } }

.hero .wrap { padding-block: clamp(2.5rem, 1rem + 6vw, 5rem) 3rem; text-align: center; }
.hero-icon {
    width: 84px; height: 84px; border-radius: 22px;
    background: #05090B; border: 1px solid var(--line);
    box-shadow: var(--shadow); margin-bottom: 1.2rem;
}
.tagline {
    color: var(--cyan); font-size: clamp(1.1rem, .95rem + .7vw, 1.45rem);
    font-weight: 600; margin: .2rem 0 .9rem;
}
.lede { color: var(--text-mid); max-width: 40rem; margin: 0 auto 1.8rem; }
.facts {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: .5rem .9rem; color: var(--text-low);
    font-size: .85rem; margin-top: 1.6rem;
}
.facts span::after { content: " ·"; color: var(--line); }
.facts span:last-child::after { content: ""; }
/* Auf den erzeugten Seiten steht hier der Schlusssatz des Store-Textes am Stück. */
.facts.one { display: block; max-width: 42rem; margin-inline: auto; }

/* ---------- Knöpfe ---------- */

.cta { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .72rem 1.3rem; border-radius: 999px;
    font-weight: 700; font-size: .95rem; text-decoration: none;
    border: 1px solid transparent;
}
.btn-primary { background: var(--cyan); color: var(--void); }
@media (prefers-color-scheme: light) { .btn-primary { color: #FFFFFF; } }
.btn-primary:hover { background: var(--cyan-dim); color: var(--void); }
@media (prefers-color-scheme: light) { .btn-primary:hover { color: #FFFFFF; } }
.btn-ghost { border-color: var(--line); color: var(--text-hi); background: var(--surface); }
.btn-ghost:hover { border-color: var(--cyan); color: var(--text-hi); }
.btn[aria-disabled="true"] {
    background: var(--surface); color: var(--text-low);
    border-color: var(--line); cursor: default; pointer-events: none;
}

/* ---------- Abschnitte ---------- */

section { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
section + section { border-top: 1px solid var(--line); }
.section-lede { color: var(--text-mid); max-width: var(--prose); margin: 0 0 2rem; }

/* Die erzeugten Sprachseiten übernehmen die Abschnittsüberschriften unverändert aus dem
   Store-Text — dort stehen sie in Großbuchstaben. Kleinschreiben ließe sich nicht in
   jeder Sprache verlustfrei (Griechisch verliert dabei die Akzente), also bleiben sie
   groß und werden als Marke gesetzt statt als laute Überschrift. */
h2.caps, h3.caps {
    font-size: clamp(.98rem, .92rem + .3vw, 1.15rem);
    letter-spacing: .09em; font-weight: 800; color: var(--text-hi);
}
h2.caps { margin-bottom: 1.1rem; }
h3.caps { color: var(--cyan); margin-bottom: .5rem; }
.prose-p { color: var(--text-mid); max-width: var(--prose); margin: 0 0 1rem; }
.prose-p + .cards, .prose-p + .dotted, .prose-p + .shots { margin-top: 1.6rem; }

/* Hinweis, dass Datenschutz und Support nur zweisprachig vorliegen. */
.only {
    margin: 2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line);
    color: var(--text-low); font-size: .9rem; max-width: var(--prose);
}

.cards {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.25rem 1.35rem;
}
.card h3 { margin-bottom: .35rem; }
.card p { margin: 0; color: var(--text-mid); font-size: .95rem; }
.card .kicker {
    display: block; font-size: .72rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--cyan); font-weight: 700;
    margin-bottom: .45rem;
}

/* Aufzählungen mit Punkt in Signalfarbe */
ul.dotted { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
ul.dotted li { position: relative; padding-inline-start: 1.35rem; color: var(--text-mid); }
ul.dotted li::before {
    content: ""; position: absolute; inset-inline-start: 0; top: .62em;
    width: .5rem; height: .5rem; border-radius: 50%;
    background: var(--cyan);
}
ul.dotted.muted li::before { background: var(--text-low); }
.two-col { display: grid; gap: 1.6rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

/* ---------- Bildstrecke ---------- */

.shots {
    display: grid; grid-auto-flow: column; grid-auto-columns: 240px;
    gap: 1rem; overflow-x: auto; padding-bottom: 1rem;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
}
.shot { scroll-snap-align: start; }
.shot img {
    display: block; width: 100%; border-radius: 14px;
    border: 1px solid var(--line); background: var(--deep);
}
.shot figcaption {
    margin-top: .55rem; font-size: .85rem; color: var(--text-low);
}

/* ---------- Einstufungen ---------- */

.grades { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.grade {
    border: 1px solid var(--line); border-radius: 14px;
    padding: 1rem 1.1rem; background: var(--surface);
}
.chip {
    display: inline-block; font-size: .72rem; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
    padding: .2rem .55rem; border-radius: 6px; margin-bottom: .5rem;
    color: var(--void);
}
@media (prefers-color-scheme: light) { .chip { color: #FFFFFF; } }
.chip-cyan { background: var(--cyan); }
.chip-lime { background: var(--lime); }
.chip-amber { background: var(--amber); }
.grade p { margin: 0; color: var(--text-mid); font-size: .95rem; }

/* ---------- Hinweiskasten ---------- */

.note {
    border: 1px solid var(--line); border-inline-start: 3px solid var(--cyan);
    background: var(--surface-hi); border-radius: 12px;
    padding: 1rem 1.2rem; margin: 1.5rem 0;
}
.note.warn { border-inline-start-color: var(--amber); }
.note > :first-child { margin-top: 0; }
.note > :last-child { margin-bottom: 0; }

/* Noch auszufüllende Angaben — absichtlich auffällig, damit sie nicht
   versehentlich öffentlich stehen bleiben. Siehe README.md. */
.todo {
    display: inline-block;
    border: 1px dashed var(--amber); color: var(--amber);
    border-radius: 6px; padding: 0 .4rem; font-style: normal;
}

/* ---------- Rechtstexte ---------- */

.legal h1 { margin-bottom: .3rem; }
.legal .updated { color: var(--text-low); font-size: .9rem; margin: 0 0 2rem; }
.legal h2 { margin-top: 2.4rem; }
.legal p, .legal li { color: var(--text-mid); }
.legal strong { color: var(--text-hi); }
.legal ul { padding-inline-start: 1.2rem; }
.legal li { margin-bottom: .4rem; }

.table-scroll { overflow-x: auto; margin: 1.2rem 0; }
table {
    border-collapse: collapse; width: 100%; min-width: 32rem;
    font-size: .93rem;
}
th, td {
    text-align: start; padding: .6rem .8rem;
    border-bottom: 1px solid var(--line); vertical-align: top;
}
th { color: var(--text-hi); font-weight: 700; white-space: nowrap; }
td { color: var(--text-mid); }

dl.contact { margin: 0; }
dl.contact dt { font-weight: 700; margin-top: 1rem; }
dl.contact dd { margin: .2rem 0 0; color: var(--text-mid); }

/* ---------- Fußzeile ---------- */

footer {
    border-top: 1px solid var(--line); background: var(--deep);
    padding-block: 2.2rem; margin-top: 0;
}
footer .wrap { display: grid; gap: 1rem; }
.footnav { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.footnav a { color: var(--text-mid); text-decoration: none; font-size: .93rem; }
.footnav a:hover { color: var(--text-hi); }
.legal-line { color: var(--text-low); font-size: .85rem; margin: 0; }