/* =============================================================================
 | veredelung.css — Atmosphäre statt Umbau
 |
 | Herkunft: Aus einem Entwurf übernommen, der die Seite komplett neu bauen
 | wollte (React/Vite/shadcn). Der Vergleich ergab: Farben, Schrift und Aufbau
 | sind hier bereits dieselben. Was der Entwurf wirklich voraus hatte, waren
 | fünf Gestaltungsmittel — Filmkorn, Glasflächen, ein Verlaufsknopf mit
 | Schimmern, sich anhebende Karten und auslaufende Linien. Genau die stehen
 | hier, handgeschrieben.
 |
 | WARUM HANDGESCHRIEBEN: Der Tailwind-Build ist eingefroren (kein Node auf dem
 | Server). Neue Utility-Klassen existieren im ausgelieferten Stylesheet nicht.
 | Alles Neue muss deshalb hierher — wie schon bei bedienung.css.
 |
 | WAS AUS DEM ENTWURF NICHT ÜBERNOMMEN WURDE, und warum:
 |   - Radius 0.65rem. In resources/css/app.css steht als Regel: „Radien: 0
 |     überall. 9999px nur für User-Avatare." Das ist keine Nachlässigkeit,
 |     sondern die Kante, die die Seite ausmacht. Bleibt.
 |   - Weiche Schatten als Grundton. Ebenfalls dort ausgeschlossen. Schatten
 |     gibt es hier nur beim Anheben — also nur, solange der Zeiger draufsteht.
 |   - Die Beispielprofile des Entwurfs. Erfundene Namen kommen nicht auf diese
 |     Seite; siehe die Notiz „Keine erfundenen Inhalte".
 |
 | Geladen für beide Marken, nach den markenspezifischen Dateien.
 ============================================================================= */


/* -----------------------------------------------------------------------------
 | 1 — FILMKORN UND LICHT
 |
 | Der Grund war eine glatte Fläche mit einem einzigen Verlauf. Dazu kommen
 | jetzt zwei Lichtquellen (Burgund links oben, Gold rechts) und eine feine
 | Körnung darüber.
 |
 | Bewusst als background-image am body statt als überlagertes Element mit
 | mix-blend-mode, wie es der Entwurf machte: Eine bildschirmfüllende Ebene mit
 | Mischmodus zwingt den Browser bei jedem Bildlauf zum Neuberechnen der ganzen
 | Seite. Auf dem Telefon kostet das spürbar. Als Hintergrundebene kostet es
 | nichts — dieselbe Wirkung, kein Preis.
 |
 | Das Korn ist ein SVG mit fractalNoise, entsättigt und auf 4,5 % gedeckelt.
 | Ein Wert darüber sieht nach Bildrauschen aus, darunter sieht man ihn nicht.
 ---------------------------------------------------------------------------- */

:root:not(.ml-theme) body {
    background-color: rgb(var(--c-noir));
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)' opacity='.045'/%3E%3C/svg%3E"),
        radial-gradient(circle at 16% -2%, rgb(var(--c-burgund) / .30), transparent 32rem),
        radial-gradient(circle at 92% 14%, rgb(var(--c-gold) / .055), transparent 26rem),
        radial-gradient(ellipse at top, rgb(var(--c-bg-inner)) 0%, rgb(var(--c-noir)) 70%);
    background-repeat: repeat, no-repeat, no-repeat, no-repeat;
    background-attachment: scroll, fixed, fixed, fixed;
    background-size: 180px 180px, auto, auto, auto;
    background-position: 0 0, center, center, center;
}

/* MissLiberty arbeitet mit hellen Blöcken (.ml-hell) über demselben dunklen
   Grund. Dort ist das Korn kein Filmkorn, sondern Papier — deshalb schwächer
   und ohne die beiden Lichter, die auf Creme nur schmutzig wirken würden. */
.ml-theme .ml-hell {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)' opacity='.03'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 180px 180px;
}

/* Bilder, Farbflächen und Karten sollen das Papierkorn nicht erben. */
.ml-theme .ml-hell img,
.ml-theme .ml-hell .card,
.ml-theme .ml-hell picture {
    background-image: none;
}


/* -----------------------------------------------------------------------------
 | 2 — GLASFLÄCHEN
 |
 | Die Kopfzeile hatte backdrop-blur-sm (4 Pixel) bei 90 % Deckung — praktisch
 | eine undurchsichtige Leiste. Mit stärkerer Unschärfe und weniger Deckung
 | wandert der Inhalt sichtbar darunter durch, statt an einer Kante zu
 | verschwinden.
 |
 | Die Deckung sinkt nur dort, wo der Browser die Unschärfe wirklich kann.
 | Ohne @supports stünde auf älteren Geräten Text auf halbdurchsichtigem Grund.
 ---------------------------------------------------------------------------- */

header.sticky {
    box-shadow:
        inset 0 1px rgb(255 255 255 / .045),
        0 20px 44px -34px rgb(0 0 0 / .9);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    header.sticky {
        background-color: rgb(var(--c-noir) / .70);
        -webkit-backdrop-filter: blur(18px) saturate(150%);
        backdrop-filter: blur(18px) saturate(150%);
    }
}

/* Als Klasse für alles Weitere, was über Inhalt liegen soll — Blätter,
   Hinweisleisten, schwebende Kästen. */
.dc-glas {
    background-color: rgb(var(--c-coal) / .72);
    border: 1px solid rgb(var(--c-gold) / .16);
    box-shadow:
        inset 0 1px rgb(255 255 255 / .04),
        0 24px 64px -32px rgb(0 0 0 / .85);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .dc-glas {
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        backdrop-filter: blur(16px) saturate(140%);
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .dc-glas { background-color: rgb(var(--c-coal)); }
}


/* -----------------------------------------------------------------------------
 | 3 — DER KNOPF BEKOMMT EINEN SCHIMMER
 |
 | .btn-gold war eine flache Goldfläche mit hover:bg-gold/90 — beim Überfahren
 | wurde er also dunkler. Jetzt liegt ein Verlauf darin, der beim Überfahren
 | durchwandert: der Schimmer läuft von links nach rechts durch die Fläche.
 |
 | Der Verlauf ersetzt die Hintergrundfarbe, nicht den Text. Der dunkelste Punkt
 | ist --c-gold-600 (169 138 72); schwarzer Text darauf kommt auf 5,8:1 und
 | bleibt damit über der Schwelle.
 |
 | Auf dem Telefon gibt es kein Überfahren — dort läuft der Schimmer beim
 | Antippen. Das ist die Rückmeldung, die vorher fehlte.
 ---------------------------------------------------------------------------- */

.btn-gold {
    background-image: linear-gradient(
        110deg,
        rgb(var(--c-gold)) 0%,
        rgb(var(--c-gold-50)) 46%,
        rgb(var(--c-gold-600)) 100%
    );
    background-size: 220% auto;
    background-position: 0% center;
    transition:
        background-position .45s cubic-bezier(.23, 1, .32, 1),
        box-shadow .25s cubic-bezier(.23, 1, .32, 1);
}

@media (hover: hover) {
    .btn-gold:hover:not(:disabled) {
        background-position: 100% center;
        box-shadow: 0 12px 30px -10px rgb(var(--c-gold) / .35);
    }
}

.btn-gold:active:not(:disabled) { background-position: 100% center; }

/* Der Geist-Knopf hatte beim Überfahren nur einen 10-Prozent-Schleier.
   Jetzt füllt er sich und die Kante zieht an — dasselbe Ereignis, sichtbar. */
@media (hover: hover) {
    .btn-ghost:hover:not(:disabled) {
        border-color: rgb(var(--c-gold));
        box-shadow: inset 0 0 0 1px rgb(var(--c-gold) / .45);
    }
}


/* -----------------------------------------------------------------------------
 | 4 — KARTEN HEBEN SICH AN
 |
 | .card hatte beim Überfahren nur eine hellere Kante. Die Karte hebt sich
 | jetzt um vier Pixel und wirft dabei einen Schatten — das ist der Moment, in
 | dem sie zum anklickbaren Gegenstand wird.
 |
 | Nur bei echtem Zeiger: Auf einem Touchgerät bleibt :hover nach dem Antippen
 | hängen, und dann steht eine Karte in einem Raster erhoben da, während man
 | schon zwei Seiten weiter ist.
 |
 | Und nur, wenn Bewegung erwünscht ist — die Systemeinstellung dafür gilt hier
 | genauso wie für alles andere.
 ---------------------------------------------------------------------------- */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .card {
        transition:
            transform .3s cubic-bezier(.23, 1, .32, 1),
            border-color .3s cubic-bezier(.23, 1, .32, 1),
            box-shadow .3s cubic-bezier(.23, 1, .32, 1);
    }

    .card:hover {
        transform: translateY(-4px);
        box-shadow:
            0 34px 64px -28px rgb(0 0 0 / .95),
            0 0 0 1px rgb(var(--c-gold) / .12);
    }

    /* Das Bild in der Karte zieht beim Überfahren leicht an. Die Karte selbst
       hat overflow:hidden, das Bild bleibt also im Rahmen.
       Ausgenommen sind Bilder, die das schon selbst regeln (die Telefon-Karte
       hat group-hover:scale-105) — sonst überschriebe diese Regel den dort
       gewollten Wert, nur weil sie später geladen wird. */
    .card img:not([class*="group-hover:scale"]) {
        transition: transform .5s cubic-bezier(.23, 1, .32, 1);
    }

    .card:hover img:not([class*="group-hover:scale"]) { transform: scale(1.035); }
}

/* Ohne Zeiger bleibt wenigstens die Rückmeldung beim Antippen. */
@media (hover: none) {
    .card:active { border-color: rgb(var(--c-gold) / .45); }
}


/* -----------------------------------------------------------------------------
 | 5 — AUSLAUFENDE LINIEN AN DEN VORSPÄNNEN
 |
 | Über jedem Abschnitt steht eine gesperrte Kleinzeile („Nach Region", „Aus dem
 | Journal"). Sie stand bisher allein in der Zeile. Mit einer nach rechts
 | auslaufenden Haarlinie wird daraus eine Abschnittsmarke — dasselbe Mittel,
 | das der Entwurf .line-accent nannte.
 |
 | Die Linie ist ::after am Vorspann selbst, kein zusätzliches Element im
 | Markup, und sie verschwindet nicht, wenn der Text umbricht.
 ---------------------------------------------------------------------------- */

.dc-vorspann {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dc-vorspann::after {
    content: "";
    flex: 1 1 auto;
    min-width: 20px;
    height: 1px;
    background: linear-gradient(90deg, rgb(var(--c-gold) / .55), rgb(var(--c-gold) / 0));
}

/* Mittige Vorspänne bekommen die Linie auf beiden Seiten, sonst schiebt das
   ::after den Text nach links und die Mitte ist keine mehr. */
.dc-vorspann--mitte { justify-content: center; }

.dc-vorspann--mitte::before {
    content: "";
    flex: 1 1 auto;
    min-width: 20px;
    height: 1px;
    background: linear-gradient(270deg, rgb(var(--c-gold) / .55), rgb(var(--c-gold) / 0));
}

/* Auf schmalen Geräten hat die Linie neben einem langen Vorspann keinen Platz
   mehr und würde den Text umbrechen lassen. Dann lieber keine Linie. */
@media (max-width: 480px) {
    .dc-vorspann::after,
    .dc-vorspann--mitte::before { display: none; }
}

/* Freistehende Trennlinie in derselben Sprache. */
.dc-linie {
    height: 1px;
    border: 0;
    background: linear-gradient(90deg, rgb(var(--c-gold) / .5), rgb(var(--c-gold) / 0));
}


/* -----------------------------------------------------------------------------
 | Textmarkierung in der Marke statt im Browserblau.
 ---------------------------------------------------------------------------- */

::selection {
    background: rgb(var(--c-gold) / .3);
    color: rgb(var(--c-sand));
}