/* =============================================================================
 | 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.
 ============================================================================= */


/* -----------------------------------------------------------------------------
 | 0 — PALETTE UND SCHRIFT
 |
 | Der eigentliche Hebel. Der kompilierte Tailwind-Build setzt jede Farbklasse
 | als rgb(var(--c-…) / alpha) und jede Schriftklasse als var(--font-sans) —
 | nachgesehen in public/build/assets. Eine Umdefinition der Variablen wirkt
 | deshalb auf jede Seite und jede Opazitätsstufe zugleich, ohne dass eine
 | einzige Vorlage angefasst werden muss.
 |
 | Die Werte sind die des Entwurfs, gemessen an seiner veröffentlichten Fassung
 | und vom Betreiber als Vorgabe bestätigt: Grund #110d10, Karten #1c141a,
 | Sekundärfläche #241720, Akzent #d8ae78, Burgund #6f273e, Text #f5eee7.
 |
 | Alles hinter :root:not(.ml-theme) — MissLiberty behält seine eigene Palette.
 |
 | NEBENWIRKUNG, NACHGERECHNET: Der Grund wird von #0a0a0a auf #110d10 minimal
 | heller, alle Textfarben deutlich heller. Der schwächste Wert war bisher
 | --c-sand-200 auf Schwarz mit 4,4:1 — deshalb gibt es dc-lesbarkeit.css.
 | Mit der neuen Palette kommt derselbe Ton auf 7,0:1. Die Lesbarkeitsdatei
 | bleibt trotzdem geladen: Sie hebt schwache Opazitätsstufen an und arbeitet
 | selbst mit diesen Variablen, zieht also mit.
 ---------------------------------------------------------------------------- */

:root:not(.ml-theme) {
    /* Gründe */
    --c-noir: 17 13 16;          /* #110d10 — Seitengrund */
    --c-noir-50: 39 27 36;       /* #271b24 — Sekundärfläche */
    --c-noir-100: 33 23 30;      /* #21171e — gedämpfte Fläche */
    --c-bg-inner: 36 23 32;      /* #241720 — der wärmere Kern des Verlaufs */
    --c-coal: 28 20 26;          /* #1c141a — Karten */
    --c-ash: 58 44 54;           /* Ränder und Trenner */

    /* Gold */
    --c-gold: 216 174 120;       /* #d8ae78 */
    --c-gold-50: 243 221 188;    /* #f3ddbc — heller Schimmerpunkt */
    --c-gold-100: 231 199 158;
    --c-gold-600: 186 146 94;
    --c-gold-700: 152 116 71;

    /* Burgund */
    --c-burgund: 111 39 62;      /* #6f273e */
    --c-burgund-50: 138 52 79;
    --c-burgund-100: 74 26 42;

    /* Text */
    --c-sand: 245 238 231;       /* #f5eee7 */
    --c-sand-100: 201 184 186;   /* #c9b8ba — Fliesstext */
    --c-sand-200: 169 153 157;   /* #a9999d — Nebentext */

    /* Die beiden Hilfstöne aus dc-lesbarkeit.css ziehen mit, sonst blieben
       genau die angehobenen Stellen im alten Braun stehen. */
    --dc-sand-t: 186 170 173;
    --dc-gold-t: 205 165 112;
}

/*
 | DM Sans als Fliesstextschrift.
 |
 | Der Entwurf setzt sie durchgängig; hier lief bisher Inter. Vier Schnitte,
 | zusammen 64 KB, lokal unter /fonts — dieselbe Quelle und Lizenz wie die
 | vorhandenen Schriften. Cormorant Garamond bleibt unangetastet die
 | Auszeichnungsschrift.
 */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/dm-sans-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/dm-sans-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/dm-sans-latin-600-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/dm-sans-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Die Variable deckt jede .font-sans-Klasse ab; body zusätzlich, weil dort im
   Build der Name fest eingesetzt ist und nicht über die Variable läuft. */
:root:not(.ml-theme) { --font-sans: "DM Sans"; }

:root:not(.ml-theme) body {
    font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
}


/* -----------------------------------------------------------------------------
 | 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;
}

/* Hier stand kurzzeitig ein Papierkorn für MissLibertys helle Blöcke. Es ist
   entfernt: Diese Datei wird seit dem 08.09.2026 nur noch für Dominacall24
   geladen (siehe layouts/app.blade.php). MissLiberty hat ein eigenes
   Gestaltungssystem in ml-editorial.css und bleibt davon unberührt. */


/* -----------------------------------------------------------------------------
 | 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));
}


/* -----------------------------------------------------------------------------
 | 6 — DER KOPF DER STARTSEITE
 |
 | Nachtrag vom 08.09.2026. Beim ersten Durchgang hatte ich den Entwurf auf
 | Farben und Abschnittsfolge verglichen und daraus geschlossen, der Aufbau sei
 | derselbe. Das stimmte — der sichtbare Unterschied lag woanders:
 |
 |   Überschrift erste Ebene   Entwurf 64-122 px   hier 36-48 px
 |   Überschrift zweite Ebene  Entwurf 48-60 px    hier 30 px
 |   Kopf                      Entwurf Vollbild    hier reiner Text
 |
 | Die Schriftgrösse ist es, die den Eindruck macht, nicht die Farbe. Also holt
 | dieser Abschnitt beides nach.
 |
 | Der Text bleibt, wie er war: „Domina-Anzeigen in Deutschland" ist der Satz,
 | über den die Seite gefunden wird. Der Entwurf schrieb dort „Finde deine
 | Richtung" — schön, aber ohne ein einziges Wort, nach dem jemand sucht.
 ---------------------------------------------------------------------------- */

.dc-kopf {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 440px;
    /*
     | HIER DARF NICHTS ABGESCHNITTEN WERDEN.
     |
     | Ursprünglich stand hier overflow: hidden, damit das vergrösserte Bild im
     | Rahmen bleibt. Das hat die Suche unbrauchbar gemacht: Die Auswahllisten
     | für Bundesland, Kategorie und Umkreis sind absolut positioniert und
     | klappen nach unten auf — sie wurden an der Unterkante des Kopfes
     | abgeschnitten. Sichtbar blieben zwei Einträge, auswählen konnte man
     | nichts. Von aussen sah das aus, als sei die Suche kaputt.
     |
     | Das Bild wird jetzt in seinem eigenen Rahmen beschnitten (.dc-kopf__bild),
     | nicht im Kopf. Dieselbe Wirkung, ohne die Listen zu treffen.
     |
     | Merke: Ein overflow:hidden über einem Formular mit Aufklappmenüs ist
     | immer ein Fehler.
     */
    /* Zieht den Kopf unter die klebende Kopfzeile, damit das Bild hinter ihr
       durchläuft statt an ihrer Unterkante zu beginnen — sonst stünde die
       Glasleiste ganz oben als schwarzer Balken davor.
       64 Pixel, gemessen: die Leiste ist 65 hoch. Der Wert muss nicht genau
       stimmen: Das padding gibt exakt dasselbe wieder her, die Netto-Position
       des Textes ändert sich also nicht. Ist die Leiste einmal höher, bleibt
       oben ein Streifen Grund stehen; ist sie niedriger, läuft das Bild ein
       paar Pixel weiter. Beides fällt nicht auf, ein Überlappen kann nicht
       passieren. */
    margin-top: -64px;
    padding-top: 64px;
}

@media (min-width: 1024px) { .dc-kopf { min-height: 530px; } }

/* Das Beschneiden sitzt hier — siehe die Begründung am .dc-kopf darüber. */
.dc-kopf__bild {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
}

.dc-kopf__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 1;
    /*
     | Das Motiv wird nach rechts geschoben.
     |
     | Der goldene Ring sitzt im Bild bei 63 % der Breite — genau dort, wo die
     | Schlagzeile endet und der Schleier am dichtesten ist. Gemessen war davon
     | nur ein rötlicher Schimmer übrig. Vergrössern und verschieben bringt ihn
     | in das rechte Drittel, wo kein Text steht.
     |
     | Kein Schärfeverlust: 1920 Pixel Quelle auf einen 1425 Pixel breiten
     | Kasten mal 1,22 sind 1739 — immer noch unter der Auflösung des Bildes.
     */
    transform: scale(1.22) translateX(6%);
    transform-origin: center;
}

/* Auf schmalen Geräten steht der Text über der ganzen Breite. Dort hilft kein
   Verschieben — dort trägt der Schleier, und das Motiv bleibt Fläche. */
@media (max-width: 767px) {
    .dc-kopf__bild img { transform: none; opacity: .85; }
}

/* Zwei Schleier: einer von links, damit der Text auf Grund steht, einer von
   unten, damit der Kopf in die Seite übergeht statt an einer Kante zu enden.
   Die Werte sind gemessen, nicht geschätzt — siehe Kontrastprüfung im
   Changelog zu 2026-09-30.52. */
.dc-kopf__schleier {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgb(var(--c-noir)) 0%,
            rgb(var(--c-noir) / .96) 40%,
            rgb(var(--c-noir) / .74) 60%,
            rgb(var(--c-noir) / .24) 80%,
            rgb(var(--c-noir) / .46) 100%),
        linear-gradient(0deg, rgb(var(--c-noir)) 0%, transparent 42%);
}

.dc-kopf__inhalt {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: 4.5rem;
    padding-bottom: 3rem;
}

@media (min-width: 768px) { .dc-kopf__inhalt { padding-top: 6rem; padding-bottom: 4rem; } }
/*
 | DIE SUCHE IM KOPF IST EINE ZEILE.
 |
 | Das war der auffälligste Unterschied zum Entwurf — nicht Farbe, nicht
 | Schrift, sondern die Dichte: dort eine schlanke Leiste, hier ein Kasten über
 | drei Zeilen, der den halben Bildschirm einnahm.
 |
 | Umgebaut wird ausschliesslich hier. Die Komponente (components/search-form)
 | bleibt Zeichen für Zeichen, wie sie ist — sie trägt die wichtigste Funktion
 | der Seite, und auf /suche sowie den Stadt- und Bundeslandseiten soll der
 | ausführliche Kasten weiter stehen.
 |
 | ZUR GESCHICHTE, damit der Zusammenhang nicht verlorengeht: Beim ersten Anlauf
 | wurde die Suche unbedienbar, und ich hielt diesen Umbau für die Ursache. Er
 | war es nicht. Schuld war das overflow:hidden am .dc-kopf (siehe dort) — es
 | schnitt die Aufklappmenüs ab. Nachgeprüft: position:relative sitzt an den
 | einzelnen Feldern, nicht an den Rastern; display:contents auf den Rastern
 | kann die Menüs also gar nicht verschieben.
 */
@media (min-width: 1024px) {
    .dc-kopf form {
        display: grid;
        grid-template-columns: 1.6fr .95fr 1.1fr 1.1fr auto;
        align-items: center;
        gap: .55rem 1rem;
        padding: 1rem 1.15rem;
    }

    /* Die beiden inneren Raster werden durchsichtig; angesprochen über ihre
       Spaltenzahl, weil das die einzige verlässliche Kennung im Markup ist. */
    .dc-kopf form > .md\:grid-cols-3,
    .dc-kopf form > .md\:grid-cols-4 { display: contents; }

    /* Hinweiszeile (drittes Feld der Ortsuche) und Sortierung (drittes Feld der
       Filterzeile): im Kopf ausgeblendet, im Formular weiterhin enthalten —
       ihr Wert geht beim Absenden mit. Der Hinweis sagt dasselbe wie der
       Platzhalter im Feld, die Sortierung gehört zur Trefferliste. */
    .dc-kopf form > .md\:grid-cols-3 > div:last-child,
    .dc-kopf form > .md\:grid-cols-4 > div:nth-child(3) { display: none; }

    /* Vorlieben und die entfernbaren Filter-Chips laufen über die volle Zeile. */
    .dc-kopf form > :not(.md\:grid-cols-3):not(.md\:grid-cols-4) { grid-column: 1 / -1; }

    .dc-kopf form .btn-gold { width: 100%; }
}

/*
 | Auf dem Telefon fällt die Vertrauenszeile weg.
 |
 | Gemessen: Mit ihr lag der Suchen-Knopf bei 828 Pixeln, der Bildschirm ist
 | 812 hoch — er fehlte um genau die 60 Pixel, die Zeile und ihr Abstand
 | einnehmen. Auf dem Telefon ist der Knopf wichtiger als ein Schmuckelement,
 | zumal dieselbe Aussage weiter unten als eigener Block noch einmal steht
 | („Manuell geprüft · Diskret von Anfang an · Kuratierte Auswahl").
 */
@media (max-width: 767px) {
    .dc-kopf__inhalt .dc-vertrauen { display: none; }
}

/* Der Kopf-Kasten bleibt schmaler als die Seite — das ist die Luft, die dem
   Bild rechts den Platz lässt. */
.dc-kopf form { max-width: 68rem; }

/* Das Suchformular sitzt im Kopf und wird dort zu Glas. Die Komponente selbst
   bleibt unangetastet — sie trägt bg-coal und einen Rahmen und sieht auf jeder
   anderen Seite aus wie bisher. */
.dc-kopf form {
    background-color: rgb(var(--c-coal) / .74);
    border-color: rgb(var(--c-gold) / .18);
    box-shadow:
        inset 0 1px rgb(255 255 255 / .05),
        0 28px 70px -34px rgb(0 0 0 / .9);
    margin-bottom: 0;
}

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

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


/* -----------------------------------------------------------------------------
 | 7 — DIE GROSSE SCHRIFT
 |
 | Cormorant Garamond liegt in 400 und 500 vor, ein Magerschnitt existiert
 | nicht. Die Wirkung kommt deshalb nicht aus dem Strichgewicht, sondern aus
 | Grösse, engem Zeilenabstand und negativer Laufweite — bei einer Renaissance-
 | Antiqua trägt das ohnehin weiter als ein dünnerer Schnitt.
 |
 | clamp() statt fester Stufen: Zwischen 375 und 1440 Pixeln wächst die Zeile
 | stetig mit. Feste Sprünge (text-4xl md:text-5xl) lassen sie genau in den
 | Zwischenbreiten zu klein aussehen, in denen die meisten Telefone liegen.
 ---------------------------------------------------------------------------- */

/*
 | DIE FEHLENDEN SCHNITTE.
 |
 | Am 08.09.2026 an der veröffentlichten Fassung des Entwurfs nachgemessen:
 | Die Schlagzeilen stehen dort im Magerschnitt (Gewicht 300), nicht in 400.
 | Cormorant Garamond lag hier nur in 400 und 500 vor, und kursiv gar nicht —
 | genau die zwei Dinge, aus denen der Entwurf seine Wirkung zieht.
 |
 | Nachgeladen von der Fontsource-Auslieferung (dieselbe Quelle wie die
 | vorhandenen Dateien, SIL Open Font License). Die @font-face-Regeln stehen
 | hier statt in resources/css/app.css, weil der Build eingefroren ist.
 |
 | Zusammen 68 KB. Sie werden nur geholt, wo sie gebraucht werden — font-display
 | swap zeigt bis dahin die vorhandene 400er Fassung.
 */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/cormorant-garamond-latin-300-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 | Die Skala des Entwurfs, an seiner veröffentlichten Fassung gemessen:
 |   Schlagzeile  101-115 px, Gewicht 300, Zeile 0,80, Laufweite -0,04em
 |   Abschnitt     60 px,     Gewicht 300, Zeile 0,95
 |
 | Der Deckel liegt hier bei 6,5rem (104 px) statt 115: Der Entwurf hatte
 | „Finde deine Richtung", elf Zeichen. Hier steht „Domina-Anzeigen in
 | Deutschland", dreissig — das ist der Satz, über den die Seite gefunden wird,
 | und er bleibt. Bei 115 px bräuchte er drei statt zwei Zeilen.
 */
.dc-schlagzeile {
    font-family: var(--font-serif), Georgia, serif;
    font-size: clamp(2.75rem, 7.2vw, 6.5rem);
    font-weight: 300;
    line-height: .82;
    letter-spacing: -.04em;
    color: rgb(var(--c-sand));
    text-wrap: balance;
}

/*
 | Der nachgestellte Halbsatz in Gold und kursiv — im Entwurf das Kennzeichen
 | jeder Schlagzeile („Finde deine / *Richtung.*", „Mistress / *Yuna.*").
 |
 | Dort ist er genauso gross wie die Hauptzeile. Hier steht als Zusatz
 | „kuratiert, diskret, direkt" — sechsundzwanzig Zeichen gegen die neun von
 | „Richtung.". In gleicher Grösse bräuchte er zwei eigene Zeilen und die
 | Schlagzeile wüchse auf vier. Deshalb 0,62 der Hauptgrösse: Das ergibt die
 | Staffelung, die eine lange Beifügung ohnehin verlangt, und hält die
 | Schlagzeile bei zwei Zeilen wie im Entwurf.
 */
.dc-schlagzeile__zusatz {
    display: block;
    font-style: italic;
    font-weight: 300;
    font-size: .62em;
    line-height: .95;
    margin-top: .12em;
    color: rgb(var(--c-gold));
}

.dc-abschnitt-titel {
    font-family: var(--font-serif), Georgia, serif;
    font-size: clamp(2.1rem, 4.4vw, 3.75rem);
    font-weight: 300;
    line-height: .95;
    letter-spacing: -.03em;
    color: rgb(var(--c-sand));
    text-wrap: balance;
}

/* Der goldene Punkt hinter einer Abschnittsüberschrift. Ein Zeichen, das nichts
   sagt und alles macht — aus einer Zeile Text wird eine gesetzte Überschrift. */
.dc-abschnitt-titel::after {
    content: ".";
    color: rgb(var(--c-gold));
}


/* -----------------------------------------------------------------------------
 | 8 — DIE STADTKACHEL NEBEN DEN BUNDESLÄNDERN
 |
 | Die Bundesländer standen als nackte Textliste da. Der Entwurf stellt daneben
 | ein Stadtbild — das ist der einzige Ort der Startseite, an dem ein Bild etwas
 | erzählt statt nur zu schmücken.
 |
 | Das Raster steht hier und nicht als Utility-Klasse im Markup: Beliebige
 | Spaltenmasse (grid-cols-[.85fr_1.15fr]) gibt es im eingefrorenen Build nicht.
 | Und minmax(0, …) statt 1fr — sonst schrumpft eine Spalte nie unter ihren
 | Inhalt, und die lange Bundesländerliste sprengt das Raster.
 ---------------------------------------------------------------------------- */

.dc-stadtblock {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .dc-stadtblock {
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
        gap: 3.5rem;
    }
}

.dc-stadtbild {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid rgb(var(--c-gold) / .15);
}

/* Ohne aspect-ratio (ältere Safari) trägt eine Mindesthöhe. */
@supports not (aspect-ratio: 4 / 5) {
    .dc-stadtbild { min-height: 380px; }
}

.dc-stadtbild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .82;
    transition: transform .5s cubic-bezier(.23, 1, .32, 1), opacity .3s;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .dc-stadtbild:hover img { transform: scale(1.04); opacity: 1; }
}

/*
 | Der Schleier trägt die Beschriftung unten links.
 |
 | Erster Anlauf endete bei 58 % Höhe mit 55 % Deckung auf 26 %. Nachgemessen
 | über den echten Bildpixeln kam die goldene Kleinzeile „Deine Stadt wartet"
 | damit auf 4,11:1 — knapp unter der Schwelle von 4,5. Sie sitzt am höchsten
 | der drei Zeilen, dort war der Schleier am schwächsten.
 |
 | Jetzt steiler unten, dafür weiter oben auslaufend: Der Text steht auf Grund,
 | und vom Motiv bleibt gleich viel übrig.
 */
.dc-stadtbild::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,
        rgb(var(--c-noir)) 0%,
        rgb(var(--c-noir) / .88) 20%,
        rgb(var(--c-noir) / .45) 40%,
        transparent 66%);
    pointer-events: none;
}

.dc-stadtbild__text {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.35rem;
    z-index: 1;
}

.dc-stadtbild__name {
    font-family: var(--font-serif), Georgia, serif;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    line-height: 1.05;
    color: rgb(var(--c-sand));
    margin-top: .25rem;
}

.dc-stadtbild__name span { color: rgb(var(--c-gold)); }

.dc-stadtbild__zahl {
    display: block;
    font-size: .8125rem;
    color: rgb(var(--c-sand-100));
    margin-top: .3rem;
}


/* -----------------------------------------------------------------------------
 | 8b — DIESELBE SKALA AUF ALLEN UNTERSEITEN
 |
 | Die Startseite allein umzustellen hätte den Bruch nur verschoben: Wer von
 | einer 104-Pixel-Schlagzeile auf eine Stadtseite mit 36 Pixeln klickt, sieht
 | zwei verschiedene Websites.
 |
 | Statt rund fünfzig Überschriften einzeln umzuhängen, greift diese Regel das
 | Muster ab, das der Bestand ohnehin durchgängig verwendet: eine Überschrift
 | in der Auszeichnungsschrift und in Sandfarbe. Der Selektor ist absichtlich
 | eng — er verlangt beide Klassen zusammen und trifft damit nichts anderes.
 |
 | Nicht betroffen und mit Absicht ausgenommen:
 |   - MissLiberty (:root:not(.ml-theme)) — dort gilt .ml-schlagzeile, ein
 |     eigenes System mit eigener Haut und eigenen Umbruchregeln.
 |   - Die Rechtstexte. Ihre Zwischenüberschriften tragen !font-serif mit
 |     Ausrufezeichen; die Klasse heisst dann anders und wird hier nicht
 |     gefunden. Das ist erwünscht: Ein Impressum mit 60-Pixel-Zwischen-
 |     überschriften wäre albern.
 |   - Die drei Handy-Apps. Sie arbeiten mit ap-/ua-Klassen, nicht mit diesen.
 |
 | Die Werte sind eine Stufe unter der Startseite: Deren Schlagzeile soll die
 | grösste der Website bleiben.
 ---------------------------------------------------------------------------- */

/*
 | Die Grössenklasse ist Teil der Bedingung — und zwar seit dem ersten Versuch.
 |
 | Ohne sie traf die Regel auch die Titel in Anzeigen- und Artikelkarten. Die
 | tragen text-xl, waren also als kleine Überschrift gemeint, sprangen aber auf
 | 44 Pixel und liefen damit in ihr eigenes line-clamp: Auf der Blogübersicht
 | war danach jeder der acht Titel abgeschnitten.
 |
 | Jetzt gilt: Wer text-3xl oder mehr geschrieben hat, wollte eine Schauzeile —
 | die wächst. Wer text-xl oder text-2xl geschrieben hat, wollte eine
 | Zwischenüberschrift — die bleibt.
 */
:root:not(.ml-theme) h1.font-serif.text-sand.text-3xl,
:root:not(.ml-theme) h1.font-serif.text-sand.text-4xl,
:root:not(.ml-theme) h1.font-serif.text-sand.text-5xl,
:root:not(.ml-theme) h1.font-serif.text-sand.text-6xl {
    font-size: clamp(2.4rem, 5.6vw, 4.75rem);
    font-weight: 300;
    line-height: .88;
    letter-spacing: -.035em;
    text-wrap: balance;
}

:root:not(.ml-theme) h2.font-serif.text-sand.text-3xl,
:root:not(.ml-theme) h2.font-serif.text-sand.text-4xl {
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    font-weight: 300;
    line-height: .98;
    letter-spacing: -.028em;
    text-wrap: balance;
}

/*
 | Hier stand kurzzeitig ein „Sicherheitsnetz", das Überschriften in Karten mit
 | font-size: revert zurücksetzte. Das war falsch und ist entfernt: revert geht
 | nicht auf die vorige Regel zurück, sondern auf den Ursprung davor — also auf
 | den Browser-Standard. Aus Tailwinds text-xl (20 px) wurden dadurch die 24 px
 | des Browsers, gemessen an den Blogkarten.
 |
 | Gebraucht wird es ohnehin nicht: Die Bedingung oben verlangt text-3xl oder
 | grösser, und Kartentitel tragen text-xl. Sie werden gar nicht erst getroffen.
 */

/* Die Auskunfts- und Rechtstextseiten haben ihre eigene Titelklasse. Sie zieht
   mit, bleibt aber schmaler — dort steht Fliesstext, keine Schauseite. */
:root:not(.ml-theme) .rt__titel {
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 300;
    line-height: .9;
    letter-spacing: -.032em;
}

/* Kursive Beifügungen in Gold — dasselbe Mittel wie in der Schlagzeile der
   Startseite, damit es auf Unterseiten verwendet werden kann. */
.dc-kursiv {
    font-style: italic;
    font-weight: 300;
    color: rgb(var(--c-gold));
}

/* Der letzte Namensteil auf einer Anzeigenseite: eigene Zeile, kursiv, Gold,
   mit Punkt. Der Punkt steht hier und nicht im Markup — er gehört nicht zum
   Namen und soll beim Markieren und Kopieren nicht mitgehen. */
.dc-name-schluss {
    display: block;
    font-style: italic;
    font-weight: 300;
    color: rgb(var(--c-gold));
}

.dc-name-schluss::after { content: "."; }


/* -----------------------------------------------------------------------------
 | 9 — RADIEN
 |
 | Hier wird eine frühere Entscheidung umgekehrt, und das gehört dokumentiert.
 |
 | In resources/css/app.css steht über dem Form-System: „Radien: 0 überall.
 | 9999px nur für User-Avatare." Deshalb hatte ich am 08.09.2026 vormittags
 | ausdrücklich darauf verzichtet, die Rundungen des Entwurfs zu übernehmen —
 | die harte Kante schien die Handschrift der Seite zu sein.
 |
 | Der Betreiber hat danach die veröffentlichte Fassung des Entwurfs gezeigt
 | und gesagt: so soll es aussehen. Damit ist die Frage entschieden.
 |
 | NACHTRAG, weil ich mich dabei geirrt hatte: Der Kommentar in app.css war
 | schon vorher überholt. resources/views/partials/stil-knoepfe.blade.php gibt
 | .btn-gold und .btn-ghost seit langem border-radius: 999px — und zwar in
 | allen drei Layouts, also auch auf MissLiberty. Die Knöpfe waren längst rund;
 | eckig waren nur die Karten und Bildflächen. Die Knopfregel, die hier stand,
 | war deshalb doppelt gemoppelt und ist entfernt. Wer die Knopfform ändern
 | will, ändert sie in stil-knoepfe.blade.php — an einer Stelle für alle.
 ---------------------------------------------------------------------------- */

/* Karten und Bildflächen: fünf Pixel, wie im Entwurf. Nicht mehr — bei einer
   Anzeigenkarte, die fast nur aus Bild besteht, wirken grössere Radien wie ein
   Fehler im Zuschnitt. */
.card,
.dc-stadtbild,
.dc-glas {
    border-radius: 5px;
}

/* .card hat overflow:hidden; ohne diese Zeile schneidet das Bild die Rundung
   der Karte an den Ecken wieder ab. */
.card > :first-child,
.card img {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

/* Der Premium-Streifen sitzt an der linken Kante und muss die Rundung
   mitmachen, sonst steht er als gerader Strich vor einer runden Ecke. */
.card.is-premium::before {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

/* Merkmals-Chips (Vorlieben, Kategorien) in Pillenform. Gilt für die Muster,
   die im Bestand dafür verwendet werden. */
.dc-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    border: 1px solid rgb(var(--c-gold) / .22);
    padding: 6px 12px;
    font-size: 11px;
    line-height: 1.5;
    color: rgb(var(--c-sand-100));
}


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

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