/* ════════════════════════════════════════════════════════════════════════
   FAKE-SEITEN — Warnseite /fake-seiten (17.10.2026)

   Baut auf legal.css auf, das davor lädt: Inhaltsverzeichnis, Textspalte und
   Abschnitte kommen von dort. Hier steht nur, was diese Seite zusätzlich hat:
   die Warnung über dem Text, die offiziellen Seiten als Linkzeilen und die
   Liste der Fake-Adressen. Werte nur aus tokens.css.
   Wächter: tests/fakeSeiten.test.js.
   ════════════════════════════════════════════════════════════════════════ */

/* Das Gerüst der Rechtsseiten, aber die Warnung als eigenes Feld: groß über
   dem Text und am Handy GANZ OBEN, noch vor dem Verzeichnis. Bei den
   Rechtsseiten steht am Handy das Verzeichnis zuerst; hier käme die Warnung
   dann erst nach einem Bildschirm Inhaltsangabe. */
.fake-seite {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 760px);
    grid-template-areas:
        "inhalt warnung"
        "inhalt text";
    justify-content: center;
    align-items: start;
    gap: var(--jt-a-6) var(--jt-a-8);
    max-width: 1200px;
    margin: 0 auto;
}

.fake-seite > .fake-warnung { grid-area: warnung; }
.fake-seite > .legal-inhalt { grid-area: inhalt; }
.fake-seite > .legal-text { grid-area: text; }

/* ── Die Warnung ── */
/* Bernstein ist hier Bedeutung, nicht Schmuck: die Warnfarbe des Hauses,
   ringsum als Kante statt als Balken an einer Seite. */
.fake-warnung {
    min-width: 0;
    padding: clamp(18px, 3vw, 28px) clamp(20px, 4vw, 48px);
    border-radius: var(--jt-r-l);
    background:
        linear-gradient(180deg, rgba(var(--jt-warnung-rgb), 0.13), rgba(var(--jt-warnung-rgb), 0.04)),
        var(--jt-samt);
    box-shadow:
        inset 0 0 0 1px rgba(var(--jt-warnung-rgb), 0.5),
        0 24px 56px -20px rgba(var(--jt-grund-rgb), 0.9);
}

.fake-warnung__marke {
    margin: 0 0 var(--jt-a-2);
    font-family: var(--jt-schrift-alt);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--jt-warnung);
}

.fake-warnung__text {
    max-width: 52ch;
    margin: 0;
    font-family: var(--jt-schrift-text);
    font-size: clamp(1.06rem, 1.6vw, 1.22rem);
    font-weight: 600;
    line-height: 1.55;
    color: var(--jt-creme);
}

/* ── Die Textspalte ── */
/* Der erste Abschnitt steht ganz oben: ohne Linie darüber. Bei den
   Rechtsseiten trennt sie ihn vom Stand, den es hier erst am Ende gibt. */
.fake-text > .legal-abschnitt:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* Links im Fließtext. Eine Klasse mehr als Bootstraps `a`. */
.fake-text p a {
    color: var(--jt-gold-hell);
    text-decoration: underline;
    text-decoration-color: rgba(var(--jt-gold-rgb), 0.45);
    text-underline-offset: 3px;
}

.fake-text p a:hover,
.fake-text p a:focus-visible {
    color: var(--jt-creme);
    text-decoration-color: currentColor;
}

/* ── Die offiziellen Seiten: je Seite eine Zeile zum Antippen ── */
.fake-offiziell {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: var(--jt-a-2) var(--jt-a-3);
    margin: 0 0 var(--jt-a-4);
    padding: 0;
    list-style: none;
}

.fake-text .fake-offiziell li {
    max-width: none;
    margin: 0;
}

.fake-text .fake-offiziell__link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    height: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: var(--jt-r-m);
    background: rgba(var(--jt-creme-rgb), 0.03);
    box-shadow: inset 0 0 0 1px rgba(var(--jt-messing-rgb), 0.2);
    color: var(--jt-text);
    text-decoration: none;
    transition: background var(--jt-zeit-kurz) var(--jt-kurve), box-shadow var(--jt-zeit-kurz) var(--jt-kurve);
}

.fake-text .fake-offiziell__link:hover,
.fake-text .fake-offiziell__link:focus-visible {
    background: rgba(var(--jt-creme-rgb), 0.06);
    box-shadow: inset 0 0 0 1px rgba(var(--jt-messing-rgb), 0.55);
    color: var(--jt-text);
}

.fake-text .fake-offiziell__link:focus-visible {
    outline: 2px solid var(--jt-fokus);
    outline-offset: 2px;
}

.fake-offiziell__adresse {
    font-family: var(--jt-schrift-zahl);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--jt-gold-hell);
    overflow-wrap: anywhere;
}

.fake-offiziell__text {
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--jt-text-leise);
}

/* ── Die Fake-Adressen ── */
/* Höchstens zwei Spalten, jede mindestens so breit wie die längste Adresse
   (32 Zeichen in der Ziffernschrift) — schmaler wird es eine Spalte, ohne
   dass es dafür eine eigene Bildschirmgrenze braucht. */
.fake-liste {
    columns: 2 19rem;
    column-gap: var(--jt-a-6);
    margin: var(--jt-a-3) 0;
    padding: 0;
    list-style: none;
    font-family: var(--jt-schrift-zahl);
    font-size: 0.9rem;
    line-height: 1.45;
}

.fake-text .fake-liste li {
    position: relative;
    max-width: none;
    margin: 0;
    padding: 6px 0 6px 1.5em;
    break-inside: avoid;
    border-bottom: 1px solid rgba(var(--jt-messing-rgb), 0.1);
    color: rgba(var(--jt-text-rgb), 0.9);
    overflow-wrap: anywhere;
}

/* Das Kreuz ist Zeichnung, kein Text: Vorleseprogramme sagen sonst „mal". */
.fake-text .fake-liste li::before {
    content: "×";
    content: "×" / "";
    position: absolute;
    top: 6px;
    left: 0.25em;
    font-weight: 700;
    color: var(--jt-fehler-hell);
}

/* Das [.] leise: Die Adresse bleibt lesbar, die Klammern bleiben sichtbar. */
.fake-liste__punkt {
    color: var(--jt-text-still);
}

.fake-text .fake-notiz {
    font-size: 0.9rem;
    color: var(--jt-text-leise);
}

/* Zwei Klassen: `.legal-text p` (0,1,1) setzt sonst den Rand zurück. */
.fake-text .fake-aktion {
    margin: var(--jt-a-4) 0 0;
}

/* Der Stand schliesst die Spalte ab, abgesetzt wie ein Abschnitt — die Linie
   über die ganze Spalte, nicht nur so breit wie ein Absatz (57ch). */
.fake-text .fake-stand {
    max-width: none;
    margin: var(--jt-a-6) 0 0;
    padding-top: var(--jt-a-4);
    border-top: 1px solid rgba(var(--jt-messing-rgb), 0.16);
}

/* ── Tablet und Handy: Warnung, Verzeichnis, Text untereinander ── */
@media (max-width: 1099px) {
    .fake-seite {
        grid-template-columns: minmax(0, 760px);
        grid-template-areas:
            "warnung"
            "inhalt"
            "text";
    }
}

@media (prefers-reduced-motion: reduce) {
    .fake-text .fake-offiziell__link {
        transition: none;
    }
}