/* =============================================================================
| dc-layout.css — die Gestaltung von Dominacall24, an einer Stelle
|
| Bis zum 08.09.2026 lagen hier drei Dateien übereinander, in dieser Reihenfolge
| geladen und jede die vorige übersteuernd:
|
| 1. dc-design.css (41 KB) — Palette, Schrift, Karten, Korn
| 2. dc-atelier-refresh.css ( 7 KB) — zweite Fassung, Farben und Knöpfe
| 3. dc-reference-layout.css (60 KB) — der Entwurf, den der Betreiber
| ausgewählt hat: „so soll es aussehen"
|
| Drei Fassungen derselben Sache sind eine Falle: Wer eine Regel ändert, kann
| nicht sehen, ob sie greift, weil zwei weitere Dateien mitreden. Genau daran
| ist am selben Tag der Abstand des Abschnitts „Häufige Fragen" hängengeblieben —
| eine Regel aus Fassung 3 deckte ihn nicht ab, also griff eine aus Fassung 1,
| und die Lücke davor war doppelt so gross wie überall sonst.
|
| ZUSAMMENGEFÜHRT, NICHT ZUSAMMENGESTRICHEN. Der Inhalt steht Zeichen für
| Zeichen in der bisherigen Ladereihenfolge untereinander. Damit ist die
| Kaskade dieselbe wie vorher — dieselbe Reihenfolge, dieselbe Gewichtung,
| dasselbe Ergebnis. Nachgemessen an fünf Seiten: kein einziger berechneter
| Wert hat sich geändert.
|
| Warum nicht sofort ausgemistet: Was in Fassung 1 und 2 noch wirkt und was
| von Fassung 3 überschrieben wird, sieht man erst, wenn alles in einer Datei
| steht. Aufräumen ist der zweite Schritt und gehört gemessen, nicht geraten.
|
| Die drei alten Dateien sind gelöscht, hier und auf dem Server.
============================================================================= */
/* #############################################################################
# STUFE 1 — vormals dc-design.css
############################################################################# */
/* =============================================================================
| 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.
|
| ZWEITER NACHTRAG, 08.09.2026 abends. Der Betreiber hat auf den Suchen-Knopf
| im Kopf gezeigt: „so sollen sie alle aussehen, keine runden mehr." Damit ist
| die Pille auf Dominacall24 erledigt — Knöpfe, Marken, Merkmals-Chips und
| Schnellzugriffe tragen jetzt dieselbe Kante. MissLiberty behält die Pille.
|
| Der Wert steht ab hier als --dc-kante an genau einer Stelle. Wer die Form
| ändern will, ändert diese Zeile; alles andere zieht nach.
---------------------------------------------------------------------------- */
:root:not(.ml-theme) {
--dc-kante: .22rem;
}
/* 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, Schnellzugriffe im Kopf). */
.dc-chip {
display: inline-flex;
align-items: center;
border-radius: var(--dc-kante, .22rem);
border: 1px solid rgb(var(--c-gold) / .22);
padding: 6px 12px;
font-size: 11px;
line-height: 1.5;
color: rgb(var(--c-sand-100));
}
/* Die Pillen aus dem Baukasten (rounded-full) auf den Bestandsseiten —
Blog-Filter, Gruppen-Marken, Zähler, Vorlieben-Auswahl.
Bedingung ist eine waagerechte Polsterung: Was px- trägt, ist eine Marke
oder ein Knopf und wird eckig. Was keine hat, ist ein Punkt, ein Balken,
ein Avatar oder ein Ring darum — das bleibt rund. */
:root:not(.ml-theme) [class*="rounded-full"][class*="px-"] {
border-radius: var(--dc-kante);
}
/* -----------------------------------------------------------------------------
| Textmarkierung in der Marke statt im Browserblau.
---------------------------------------------------------------------------- */
::selection {
background: rgb(var(--c-gold) / .3);
color: rgb(var(--c-sand));
}
/* -----------------------------------------------------------------------------
| 10 — FEHLENDE UTILITY-KLASSEN AUS DEM EINGEFRORENEN BUILD
|
| Der Tailwind-Build kann nicht neu erzeugt werden (kein Node auf dem Server).
| Er enthält nur die Klassen, die zum Zeitpunkt des letzten Builds im Markup
| standen. Wer eine bisher unbenutzte Klasse einsetzt, bekommt keine Regel —
| die Klasse steht im HTML und tut nichts.
|
| Nachgesehen in public/build/assets/app-9AvTht_2.css:
| .md\:flex vorhanden .lg\:flex FEHLT
| .md\:hidden vorhanden .lg\:hidden vorhanden
|
| Genau darüber bin ich am 08.09.2026 gestolpert: Beim Verschieben des
| Umbruchpunkts im Anbieter-Kopf von md auf lg verschwand das Menü bei JEDER
| Breite — lg:hidden liess den Ersatz-Burger verschwinden, lg:flex holte das
| Menü aber nicht zurück.
|
| Hier stehen deshalb die Klassen nach, die gebraucht werden und im Build
| fehlen. Wer künftig eine neue Utility-Klasse verwendet, prüft vorher:
| grep -o '\.lg\:flex{[^}]*}' public/build/assets/app-*.css
---------------------------------------------------------------------------- */
@media (min-width: 1024px) {
.lg\:flex { display: flex; }
.lg\:h-\[100px\] { height: 100px; }
.lg\:h-\[112px\] { height: 112px; }
}
/*
| Weitere fehlende Klassen, gefunden beim systematischen Abgleich am
| 08.09.2026: Von 80 Responsive-Klassen im Markup der Website fehlten acht im
| Build. Vier davon stammen aus eigenen Änderungen desselben Tages und haben
| deshalb nie gewirkt — der Absatz im Kopf blieb klein, der Abstand über der
| Suche kleiner als gedacht, der Kasten im Blog enger, und der Verweis „Alle
| Artikel" bekam seine grössere Tippfläche nicht.
|
| Die Werte sind die von Tailwind: mt-12 = 3rem, p-6 = 1.5rem,
| text-lg = 1.125rem/1.75rem, text-5xl = 3rem/1.
*/
@media (min-width: 640px) {
.sm\:inline-flex { display: inline-flex; }
.sm\:text-5xl { font-size: 3rem; line-height: 1; }
}
@media (min-width: 768px) {
.md\:mt-12 { margin-top: 3rem; }
.md\:p-6 { padding: 1.5rem; }
.md\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
}
/* #############################################################################
# STUFE 2 — vormals dc-atelier-refresh.css
############################################################################# */
/* Dominacall24 — Atelier Refresh
Ergänzt das bestehende Editorial-Noir-Design, ohne MissLiberty zu beeinflussen. */
:root:not(.ml-theme) {
--c-noir: 14 10 16;
--c-noir-50: 32 23 35;
--c-noir-100: 25 17 28;
--c-bg-inner: 46 20 34;
--c-coal: 31 22 33;
--c-ash: 75 52 69;
--c-gold: 226 190 127;
--c-gold-50: 250 230 196;
--c-gold-100: 240 211 165;
--c-gold-600: 189 143 83;
--c-gold-700: 151 107 58;
--c-burgund: 121 31 66;
--c-burgund-50: 155 48 86;
--c-burgund-100: 72 18 41;
--c-sand: 250 244 237;
--c-sand-100: 213 196 198;
--c-sand-200: 181 158 165;
}
:root:not(.ml-theme) body {
background-color: rgb(var(--c-noir));
background-image:
radial-gradient(circle at 12% 0%, rgb(var(--c-burgund) / .31), transparent 31rem),
radial-gradient(circle at 90% 18%, rgb(var(--c-gold) / .11), transparent 30rem),
linear-gradient(180deg, rgb(26 15 27), rgb(var(--c-noir)) 36rem);
}
:root:not(.ml-theme) header.sticky {
border-bottom-color: rgb(var(--c-gold) / .14);
box-shadow: 0 14px 38px rgb(0 0 0 / .28), inset 0 -1px rgb(255 255 255 / .035);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
:root:not(.ml-theme) header.sticky {
background-color: rgb(var(--c-noir) / .79);
-webkit-backdrop-filter: blur(22px) saturate(145%);
backdrop-filter: blur(22px) saturate(145%);
}
}
:root:not(.ml-theme) .btn-gold {
min-height: 44px;
border-radius: var(--dc-kante);
background-image: linear-gradient(115deg, rgb(var(--c-gold-600)), rgb(var(--c-gold)) 48%, rgb(var(--c-gold-50)) 70%, rgb(var(--c-gold-600)));
background-size: 220% auto;
box-shadow: 0 10px 28px -14px rgb(var(--c-gold) / .64);
}
:root:not(.ml-theme) .btn-ghost {
min-height: 44px;
border-radius: var(--dc-kante);
border-color: rgb(var(--c-gold) / .42);
background: rgb(var(--c-noir) / .15);
}
:root:not(.ml-theme) .card {
border-radius: 16px;
border-color: rgb(var(--c-gold) / .16);
box-shadow: 0 20px 44px -30px rgb(0 0 0 / .85), inset 0 1px rgb(255 255 255 / .035);
}
:root:not(.ml-theme) .card:hover {
border-color: rgb(var(--c-gold) / .42);
}
:root:not(.ml-theme) .card.is-premium::before {
width: 3px;
background: linear-gradient(180deg, rgb(var(--c-gold-50)), rgb(var(--c-gold-600)));
border-radius: 16px 0 0 16px;
}
:root:not(.ml-theme) .dc-chip,
:root:not(.ml-theme) .chip {
border-radius: var(--dc-kante);
border-color: rgb(var(--c-gold) / .28);
background: rgb(var(--c-gold) / .055);
}
:root:not(.ml-theme) .dc-kopf {
min-height: 500px;
isolation: isolate;
}
@media (min-width: 768px) {
:root:not(.ml-theme) .dc-kopf { min-height: 570px; }
}
:root:not(.ml-theme) .dc-kopf__bild img {
transform: scale(1.12) translateX(4%);
filter: saturate(.84) contrast(1.07) brightness(.78);
}
:root:not(.ml-theme) .dc-kopf::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(circle at 16% 30%, rgb(var(--c-burgund) / .18), transparent 30rem);
}
:root:not(.ml-theme) .dc-kopf__schleier {
background:
linear-gradient(90deg,
rgb(var(--c-noir)) 0%,
rgb(var(--c-noir) / .94) 35%,
rgb(var(--c-noir) / .63) 60%,
rgb(var(--c-noir) / .22) 83%,
rgb(var(--c-noir) / .54) 100%),
linear-gradient(0deg, rgb(var(--c-noir)) 0%, rgb(var(--c-noir) / .2) 29%, transparent 58%);
}
:root:not(.ml-theme) .dc-kopf__inhalt {
padding-top: 7rem;
padding-bottom: 4.5rem;
}
:root:not(.ml-theme) .dc-vorspann {
color: rgb(var(--c-gold-50));
font-size: .65rem;
letter-spacing: .34em;
}
:root:not(.ml-theme) .dc-schlagzeile {
max-width: 10.5ch;
font-size: clamp(3.2rem, 7.6vw, 7.1rem);
line-height: .8;
letter-spacing: -.052em;
text-shadow: 0 10px 35px rgb(0 0 0 / .25);
}
:root:not(.ml-theme) .dc-schlagzeile__zusatz {
max-width: 23ch;
margin-top: .18em;
font-size: .48em;
line-height: 1;
letter-spacing: -.025em;
color: rgb(var(--c-gold-50));
}
:root:not(.ml-theme) .dc-kopf__inhalt > div > p {
max-width: 38rem;
color: rgb(var(--c-sand-100));
}
:root:not(.ml-theme) .dc-kopf form {
max-width: 72rem;
padding: 1.2rem 1.25rem;
border-radius: 18px;
border-color: rgb(var(--c-gold) / .26);
background-color: rgb(var(--c-coal) / .77);
box-shadow: 0 32px 72px -34px rgb(0 0 0 / .9), inset 0 1px rgb(255 255 255 / .065);
}
:root:not(.ml-theme) .dc-kopf form .input {
border-bottom-color: rgb(var(--c-gold) / .32);
}
:root:not(.ml-theme) .dc-stadtbild {
border-radius: 18px;
border-color: rgb(var(--c-gold) / .25);
box-shadow: 0 30px 60px -34px rgb(0 0 0 / .9);
}
:root:not(.ml-theme) .dc-abschnitt-titel {
font-size: clamp(2.35rem, 4.8vw, 4.2rem);
letter-spacing: -.045em;
}
:root:not(.ml-theme) .dc-abschnitt-titel::after { color: rgb(var(--c-gold-50)); }
:root:not(.ml-theme) .dc-kopf + section,
:root:not(.ml-theme) .dc-kopf ~ section {
position: relative;
}
:root:not(.ml-theme) .dc-kopf ~ section:nth-of-type(even)::before {
content: "";
position: absolute;
inset: 10% 0 auto;
height: 1px;
background: linear-gradient(90deg, transparent, rgb(var(--c-gold) / .12), transparent);
}
@media (max-width: 767px) {
:root:not(.ml-theme) .dc-kopf { min-height: 570px; }
:root:not(.ml-theme) .dc-kopf__bild img { transform: scale(1.02); filter: saturate(.76) contrast(1.05) brightness(.62); }
:root:not(.ml-theme) .dc-kopf__inhalt { padding-top: 5.5rem; padding-bottom: 2.75rem; }
:root:not(.ml-theme) .dc-schlagzeile { max-width: 9.5ch; font-size: clamp(3rem, 14vw, 4.5rem); }
:root:not(.ml-theme) .dc-schlagzeile__zusatz { max-width: 19ch; font-size: .5em; }
:root:not(.ml-theme) .dc-kopf form { padding: 1rem; border-radius: 14px; }
:root:not(.ml-theme) .card { border-radius: 13px; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
:root:not(.ml-theme) .card:hover {
transform: translateY(-6px);
box-shadow: 0 32px 56px -28px rgb(0 0 0 / .95), 0 0 0 1px rgb(var(--c-gold) / .12);
}
}
/* Kompakter Seitenrhythmus: Die ursprünglichen Tailwind-Abstände (64–80 px je
Abschnitt) ließen die Seiten auf großen Displays unnötig weit wirken. Die
Anpassung gilt nur für Dominacall24 und bewahrt auf kleinen Geräten genug
Luft für gut bedienbare Formulare und Karten. */
:root:not(.ml-theme) main > section.py-20 { padding-top: 3.25rem; padding-bottom: 3.25rem; }
:root:not(.ml-theme) main > section.py-16 { padding-top: 3rem; padding-bottom: 3rem; }
:root:not(.ml-theme) main .gap-8 { gap: 1.5rem; }
:root:not(.ml-theme) main .mb-8 { margin-bottom: 1.5rem; }
:root:not(.ml-theme) .dc-kopf .mt-9 { margin-top: 1.5rem; }
:root:not(.ml-theme) .dc-kopf .mt-12 { margin-top: 2rem; }
@media (min-width: 768px) {
:root:not(.ml-theme) main > section.py-20 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
:root:not(.ml-theme) main > section.py-16 { padding-top: 3.25rem; padding-bottom: 3.25rem; }
}
/* #############################################################################
# STUFE 3 — vormals dc-reference-layout.css (die ausgewählte Fassung)
############################################################################# */
/* Dominacall24 — Referenzintegration
Vollständiges Layout-System nach dem bereitgestellten Designprototyp.
Diese Datei lädt nach den bisherigen Overrides und bleibt auf Dominacall24 beschränkt. */
:root:not(.ml-theme) {
--dcx-bg: #110d10;
--dcx-panel: #1c141a;
--dcx-panel-raised: #241720;
--dcx-ink: #f5eee7;
--dcx-muted: #b8a6aa;
--dcx-gold: #d8ae78;
--dcx-burgund: #6f273e;
--dcx-line: rgb(245 238 231 / .11);
--dcx-ease: cubic-bezier(.23, 1, .32, 1);
}
:root:not(.ml-theme) body { background-color: var(--dcx-bg); background-image: radial-gradient(circle at 18% 2%, rgb(111 39 62 / .24), transparent 36rem), radial-gradient(circle at 90% 24%, rgb(216 174 120 / .07), transparent 34rem); }
:root:not(.ml-theme) .dcx-container { width: min(100% - 2rem, 1280px); margin-inline: auto; }
:root:not(.ml-theme) .dcx-home { color: var(--dcx-ink); overflow: clip; }
:root:not(.ml-theme) .dcx-eyebrow { display: flex; align-items: center; gap: .85rem; margin: 0; color: var(--dcx-gold); font-family: Inter, system-ui, sans-serif; font-size: .65rem; font-weight: 600; letter-spacing: .24em; line-height: 1.2; text-transform: uppercase; }
:root:not(.ml-theme) .dcx-eyebrow i { display: block; width: 3.5rem; height: 1px; background: linear-gradient(90deg, rgb(216 174 120 / .8), transparent); }
:root:not(.ml-theme) .dcx-section { padding-block: clamp(4.5rem, 8vw, 7rem); }
:root:not(.ml-theme) .dcx-section h2,
:root:not(.ml-theme) .dcx-standard h2,
:root:not(.ml-theme) .dcx-provider h2 { margin: .75rem 0 0; color: #fff7f0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(3rem, 5vw, 4.9rem); font-weight: 400; letter-spacing: -.05em; line-height: .9; }
:root:not(.ml-theme) .dcx-section h2 > span { color: var(--dcx-gold); }
:root:not(.ml-theme) .dcx-section h2 em,
:root:not(.ml-theme) .dcx-standard h2 em,
:root:not(.ml-theme) .dcx-provider h2 em { color: var(--dcx-gold); font-weight: 400; }
/* Header: bewusst deutlich reduzierter als die bisherige Funktionsnavigation.
Zusätzliche Ziele bleiben im mobilen Menü und im Footer erreichbar. */
:root:not(.ml-theme) header.sticky { min-height: 76px; background: rgb(17 13 16 / .88); border-bottom-color: var(--dcx-line); box-shadow: none; }
:root:not(.ml-theme) header.sticky .ml-kopf { height: 76px; gap: clamp(1rem, 2vw, 2rem); }
:root:not(.ml-theme) header.sticky .ml-logo { height: 50px; }
:root:not(.ml-theme) header.sticky .ml-nav-desktop { gap: clamp(1.35rem, 2.8vw, 2.7rem); font-size: .75rem; letter-spacing: .08em; }
:root:not(.ml-theme) header.sticky .ml-nav-desktop > a,
:root:not(.ml-theme) header.sticky .ml-nav-desktop button { border-bottom: 0; padding-bottom: 0; }
:root:not(.ml-theme) header.sticky .ml-nav-desktop > a:first-child { color: var(--dcx-gold); }
:root:not(.ml-theme) header.sticky .btn-gold { padding: .65rem 1.15rem !important; font-size: .72rem !important; letter-spacing: .02em; }
:root:not(.ml-theme) header.sticky .ml-nav-desktop.items-center.gap-4 { gap: .85rem; padding-left: 1.25rem; }
/* Hero und Suche */
:root:not(.ml-theme) .dcx-hero { position: relative; display: flex; align-items: flex-end; min-height: min(700px, calc(100svh - 76px)); overflow: hidden; isolation: isolate; }
:root:not(.ml-theme) .dcx-hero__media,
:root:not(.ml-theme) .dcx-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
:root:not(.ml-theme) .dcx-hero__media { z-index: -2; }
:root:not(.ml-theme) .dcx-hero__media img { object-fit: cover; object-position: 58% 45%; filter: saturate(.82) brightness(.68) contrast(1.06); }
:root:not(.ml-theme) .dcx-hero__veil { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #110d10 2%, rgb(17 13 16 / .96) 29%, rgb(17 13 16 / .48) 66%, rgb(17 13 16 / .8)), linear-gradient(0deg, #110d10 0%, transparent 42%); }
:root:not(.ml-theme) .dcx-hero__content { padding-top: 10rem; padding-bottom: clamp(2.4rem, 5vw, 4.5rem); }
:root:not(.ml-theme) .dcx-hero__copy { max-width: 41rem; }
:root:not(.ml-theme) .dcx-hero__title { max-width: 10ch; margin: 1.25rem 0 0; color: #fff7f0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(4.2rem, 8vw, 7.6rem); font-weight: 400; letter-spacing: -.055em; line-height: .77; text-wrap: balance; }
:root:not(.ml-theme) .dcx-hero__title em { color: var(--dcx-gold); font-weight: 400; }
:root:not(.ml-theme) .dcx-hero__intro { max-width: 31rem; margin: 1.75rem 0 0; color: #dfd1d1; font-size: clamp(1rem, 1.5vw, 1.13rem); line-height: 1.65; }
:root:not(.ml-theme) .dcx-hero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.5rem; color: #bbaaad; font-size: .75rem; }
:root:not(.ml-theme) .dcx-hero__trust span { display: inline-flex; align-items: center; gap: .45rem; }
:root:not(.ml-theme) .dcx-hero__trust b { width: .36rem; height: .36rem; border-radius: 999px; background: #72ad85; }
:root:not(.ml-theme) .dcx-hero__trust svg { width: 1rem; height: 1rem; color: var(--dcx-gold); }
:root:not(.ml-theme) .dcx-search-shell { max-width: 70rem; margin-top: 2.25rem; padding: .6rem; border: 1px solid rgb(245 238 231 / .14); border-radius: .4rem; background: rgb(28 20 26 / .76); box-shadow: 0 24px 70px rgb(0 0 0 / .22), inset 0 1px rgb(255 255 255 / .04); backdrop-filter: blur(16px); }
:root:not(.ml-theme) .dcx-search-shell form { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
:root:not(.ml-theme) .dcx-search-shell form > div { gap: .5rem; }
:root:not(.ml-theme) .dcx-search-shell form > div:first-child { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
:root:not(.ml-theme) .dcx-search-shell form > div:nth-child(2) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(9rem, auto); }
:root:not(.ml-theme) .dcx-search-shell .input { min-height: 48px; padding: .7rem .95rem; border: 1px solid rgb(245 238 231 / .08); border-radius: .25rem; background: rgb(255 255 255 / .045); color: #eadedf; }
:root:not(.ml-theme) .dcx-search-shell .input::placeholder { color: #aa969b; }
:root:not(.ml-theme) .dcx-search-shell .btn-gold { min-height: 48px; border-radius: .25rem; box-shadow: none; }
:root:not(.ml-theme) .dcx-search-shell form > div:first-child > div:last-child { display: none; }
:root:not(.ml-theme) .dcx-search-shell form > div:nth-child(3) { padding: .45rem .25rem 0; }
:root:not(.ml-theme) .dcx-search-shell form > div:nth-child(3) > button { min-height: 40px; border-radius: .25rem; }
:root:not(.ml-theme) .dcx-utility { border-block: 1px solid var(--dcx-line); background: #171014; }
:root:not(.ml-theme) .dcx-utility__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; min-height: 64px; color: #aa999c; font-size: .76rem; letter-spacing: .04em; }
:root:not(.ml-theme) .dcx-utility strong { color: #e4d7d4; font-weight: 500; }
:root:not(.ml-theme) .dcx-utility__inner > div { display: flex; flex-wrap: wrap; gap: 1.4rem; color: #938286; font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; }
:root:not(.ml-theme) .dcx-utility__inner > div span { display: inline-flex; align-items: center; gap: .35rem; }
:root:not(.ml-theme) .dcx-utility svg { width: .9rem; height: .9rem; color: var(--dcx-gold); }
/* Kuratierte Karten und Kennzahlen */
:root:not(.ml-theme) .dcx-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
:root:not(.ml-theme) .dcx-text-link { display: inline-flex; align-items: center; gap: .65rem; color: var(--dcx-gold); font-size: .69rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; transition: color .2s var(--dcx-ease); white-space: nowrap; }
:root:not(.ml-theme) .dcx-text-link svg { width: 1.9rem; height: 1.9rem; padding: .43rem; border: 1px solid rgb(216 174 120 / .45); border-radius: 50%; transition: color .2s var(--dcx-ease), background .2s var(--dcx-ease), transform .2s var(--dcx-ease); }
:root:not(.ml-theme) .dcx-text-link:hover svg { color: #171014; background: var(--dcx-gold); transform: translateX(.2rem); }
:root:not(.ml-theme) .dcx-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
:root:not(.ml-theme) .dcx-feature-card { overflow: hidden; border: 1px solid var(--dcx-line); border-radius: .3rem; background: var(--dcx-panel); transition: border-color .28s var(--dcx-ease), transform .28s var(--dcx-ease), box-shadow .28s var(--dcx-ease); }
:root:not(.ml-theme) .dcx-feature-card:hover { border-color: rgb(216 174 120 / .42); box-shadow: 0 25px 65px rgb(0 0 0 / .28); transform: translateY(-.28rem); }
:root:not(.ml-theme) .dcx-feature-card__image { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #2a1b24; }
:root:not(.ml-theme) .dcx-feature-card__image img { width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: opacity .6s ease, transform .7s var(--dcx-ease); }
:root:not(.ml-theme) .dcx-feature-card:hover .dcx-feature-card__image img { opacity: 1; transform: scale(1.045); }
:root:not(.ml-theme) .dcx-feature-card__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgb(28 20 26 / .95), transparent 58%); }
:root:not(.ml-theme) .dcx-feature-card__initial { display: grid; width: 100%; height: 100%; place-items: center; color: var(--dcx-gold); font-family: "Cormorant Garamond", serif; font-size: 8rem; }
:root:not(.ml-theme) .dcx-feature-card__badges { position: absolute; top: 1rem; left: 1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
:root:not(.ml-theme) .dcx-feature-card__badges b,
:root:not(.ml-theme) .dcx-feature-card__badges i { padding: .3rem .48rem; font-family: Inter, system-ui, sans-serif; font-size: .55rem; font-style: normal; font-weight: 700; letter-spacing: .11em; line-height: 1; text-transform: uppercase; }
:root:not(.ml-theme) .dcx-feature-card__badges b { color: #171014; background: var(--dcx-gold); }
:root:not(.ml-theme) .dcx-feature-card__badges i { border: 1px solid rgb(255 255 255 / .27); background: rgb(0 0 0 / .2); color: #fff7f0; backdrop-filter: blur(8px); }
:root:not(.ml-theme) .dcx-feature-card__identity { position: absolute; right: 1rem; bottom: 1rem; left: 1rem; }
:root:not(.ml-theme) .dcx-feature-card__identity strong { display: block; color: #fff7f0; font-family: "Cormorant Garamond", serif; font-size: clamp(1.75rem, 2.5vw, 2.3rem); font-weight: 400; line-height: .86; }
:root:not(.ml-theme) .dcx-feature-card__identity small { display: block; margin-top: .55rem; color: #d7c7c8; font-family: Inter, system-ui, sans-serif; font-size: .68rem; }
:root:not(.ml-theme) .dcx-feature-card__body { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 82px; padding: .85rem 1rem; }
:root:not(.ml-theme) .dcx-feature-card__body p { margin: 0; color: #d1c0c3; font-size: .75rem; }
:root:not(.ml-theme) .dcx-feature-card__body span { display: block; margin-top: .35rem; color: #928186; font-size: .63rem; }
:root:not(.ml-theme) .dcx-round-link { display: inline-grid; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; place-items: center; border: 1px solid rgb(216 174 120 / .48); border-radius: 50%; color: var(--dcx-gold); transition: color .2s, background .2s; }
:root:not(.ml-theme) .dcx-round-link svg { width: 1rem; height: 1rem; }
:root:not(.ml-theme) .dcx-round-link:hover { color: #171014; background: var(--dcx-gold); }
:root:not(.ml-theme) .dcx-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-top: 2rem; }
:root:not(.ml-theme) .dcx-metrics > div { padding: 1rem; border: 1px solid var(--dcx-line); background: rgb(255 255 255 / .018); }
:root:not(.ml-theme) .dcx-metrics strong { display: block; color: var(--dcx-gold); font-family: "Cormorant Garamond", serif; font-size: 2rem; font-weight: 500; line-height: 1; }
:root:not(.ml-theme) .dcx-metrics span { display: block; margin-top: .35rem; color: #928186; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
/* Vertrauen, Regionen und Anbieter-CTA */
:root:not(.ml-theme) .dcx-standard { position: relative; overflow: hidden; padding-block: clamp(4.5rem, 8vw, 7rem); border-block: 1px solid var(--dcx-line); background: #1a1218; }
:root:not(.ml-theme) .dcx-standard::before { content: ""; position: absolute; top: -15rem; right: -12rem; width: 45rem; height: 45rem; border-radius: 50%; background: radial-gradient(circle, rgb(111 39 62 / .35), transparent 62%); }
:root:not(.ml-theme) .dcx-standard__grid { position: relative; display: grid; grid-template-columns: .85fr 1.15fr; align-items: end; gap: clamp(2.5rem, 8vw, 8rem); }
:root:not(.ml-theme) .dcx-standard__intro > p:last-child { max-width: 28rem; margin: 1.5rem 0 0; color: #ad9b9f; font-size: .94rem; line-height: 1.7; }
:root:not(.ml-theme) .dcx-standard__reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.7rem; }
:root:not(.ml-theme) .dcx-standard__reasons article { padding-top: 1.1rem; border-top: 1px solid rgb(216 174 120 / .5); }
:root:not(.ml-theme) .dcx-standard__reasons svg { width: 1.35rem; height: 1.35rem; color: var(--dcx-gold); }
:root:not(.ml-theme) .dcx-standard__reasons h3 { margin: 1.1rem 0 0; color: #f7eee8; font-family: "Cormorant Garamond", serif; font-size: 1.65rem; font-weight: 400; line-height: .95; }
:root:not(.ml-theme) .dcx-standard__reasons p { margin: .8rem 0 0; color: #a9999d; font-size: .82rem; line-height: 1.6; }
:root:not(.ml-theme) .dcx-cities__grid { display: grid; grid-template-columns: minmax(16rem, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(2.5rem, 8vw, 7rem); }
:root:not(.ml-theme) .dcx-city-image { position: relative; display: block; aspect-ratio: 4 / 4.8; overflow: hidden; border: 1px solid var(--dcx-line); border-radius: .3rem; background: var(--dcx-panel); }
:root:not(.ml-theme) .dcx-city-image img { width: 100%; height: 100%; object-fit: cover; opacity: .75; transition: transform .7s var(--dcx-ease), opacity .4s; }
:root:not(.ml-theme) .dcx-city-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(17 13 16 / .92), transparent 63%); }
:root:not(.ml-theme) .dcx-city-image:hover img { transform: scale(1.04); opacity: .92; }
:root:not(.ml-theme) .dcx-city-image > span { position: absolute; z-index: 1; right: 1.6rem; bottom: 1.55rem; left: 1.6rem; }
:root:not(.ml-theme) .dcx-city-image small { display: block; color: var(--dcx-gold); font-size: .62rem; font-weight: 600; letter-spacing: .19em; text-transform: uppercase; }
:root:not(.ml-theme) .dcx-city-image strong { display: block; color: #fff7f0; font-family: "Cormorant Garamond", serif; font-size: 3rem; font-weight: 400; line-height: .95; }
:root:not(.ml-theme) .dcx-city-image strong i { color: var(--dcx-gold); font-style: normal; }
:root:not(.ml-theme) .dcx-city-image em { display: block; margin-top: .4rem; color: #cab9bd; font-size: .75rem; font-style: normal; }
:root:not(.ml-theme) .dcx-city-list > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1.8rem; margin-top: 2rem; padding-top: .6rem; border-top: 1px solid var(--dcx-line); }
:root:not(.ml-theme) .dcx-city-list > div a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .85rem 0; border-bottom: 1px solid rgb(245 238 231 / .07); color: #cdbdc0; font-size: .88rem; transition: color .2s; }
:root:not(.ml-theme) .dcx-city-list > div a:hover { color: var(--dcx-gold); }
:root:not(.ml-theme) .dcx-city-list > div svg { width: .9rem; height: .9rem; color: #75646a; }
:root:not(.ml-theme) .dcx-city-list > .dcx-text-link { margin-top: 1.75rem; }
:root:not(.ml-theme) .dcx-provider { padding-bottom: clamp(4.5rem, 8vw, 7rem); }
:root:not(.ml-theme) .dcx-provider .dcx-container > div { position: relative; overflow: hidden; padding: clamp(3.25rem, 6vw, 5rem) 1.5rem; border: 1px solid rgb(216 174 120 / .26); border-radius: .35rem; background: #241720; text-align: center; }
:root:not(.ml-theme) .dcx-provider .dcx-container > div::before { content: ""; position: absolute; top: -13rem; left: 50%; width: 35rem; height: 30rem; border-radius: 50%; background: radial-gradient(circle, rgb(216 174 120 / .14), transparent 62%); transform: translateX(-50%); }
:root:not(.ml-theme) .dcx-provider .dcx-container > div > * { position: relative; }
:root:not(.ml-theme) .dcx-provider .dcx-eyebrow { justify-content: center; }
:root:not(.ml-theme) .dcx-provider .dcx-eyebrow::before { content: "✦"; color: var(--dcx-gold); font-size: .9rem; }
:root:not(.ml-theme) .dcx-provider h2 { font-size: clamp(2.8rem, 5vw, 4.5rem); }
:root:not(.ml-theme) .dcx-provider p:not(.dcx-eyebrow) { max-width: 34rem; margin: 1.25rem auto 0; color: #b9a8ac; font-size: .92rem; line-height: 1.65; }
:root:not(.ml-theme) .dcx-primary-link { display: inline-flex; align-items: center; gap: .65rem; margin-top: 1.75rem; padding: .85rem 1.3rem; border-radius: var(--dc-kante); background: linear-gradient(110deg, #c39356, #f0d09a 55%, #c39356); color: #171014; font-size: .78rem; font-weight: 700; transition: box-shadow .2s, transform .2s; }
:root:not(.ml-theme) .dcx-primary-link:hover { box-shadow: 0 13px 35px rgb(216 174 120 / .18); transform: translateY(-2px); }
:root:not(.ml-theme) .dcx-primary-link svg { width: 1rem; height: 1rem; }
:root:not(.ml-theme) .dcx-journal { border-top: 1px solid var(--dcx-line); background: rgb(255 255 255 / .012); }
:root:not(.ml-theme) .dcx-journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
/* Profilseite: eigenes Zwei-Spalten-Raster mit ruhiger, enger Hierarchie */
:root:not(.ml-theme) .dcx-profile { padding-block: 1.5rem 4.5rem; }
:root:not(.ml-theme) .dcx-profile .dcx-container { width: min(100% - 2rem, 1200px); }
:root:not(.ml-theme) .dcx-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1.3rem; color: #9c898f; font-size: .75rem; }
:root:not(.ml-theme) .dcx-breadcrumb a:hover { color: var(--dcx-gold); }
:root:not(.ml-theme) .dcx-profile-admin { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; padding: .85rem 1rem; border: 1px solid rgb(111 39 62 / .6); background: rgb(111 39 62 / .15); }
:root:not(.ml-theme) .dcx-profile-admin p { margin: 0; color: #e2d1d3; font-size: .78rem; }
:root:not(.ml-theme) .dcx-profile-admin strong { display: block; margin-bottom: .2rem; color: var(--dcx-gold); font-size: .61rem; letter-spacing: .15em; text-transform: uppercase; }
:root:not(.ml-theme) .dcx-profile-admin a { flex: 0 0 auto; padding: .65rem .8rem; border: 1px solid rgb(216 174 120 / .5); color: var(--dcx-gold); font-size: .65rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
:root:not(.ml-theme) .dcx-profile-hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(18rem, .88fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
:root:not(.ml-theme) .dcx-gallery-main { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--dcx-line); border-radius: .3rem; background: #21171e; }
:root:not(.ml-theme) .dcx-gallery-main > div { position: absolute; inset: 0; }
:root:not(.ml-theme) .dcx-gallery-main img { width: 100%; height: 100%; object-fit: cover; opacity: .88; }
:root:not(.ml-theme) .dcx-gallery-main::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgb(17 13 16 / .62), transparent 38%); }
:root:not(.ml-theme) .dcx-gallery-controls { position: absolute; z-index: 2; right: 1rem; bottom: 1rem; display: flex; gap: .5rem; }
:root:not(.ml-theme) .dcx-gallery-controls button { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border: 1px solid rgb(255 255 255 / .25); border-radius: 50%; background: rgb(0 0 0 / .22); color: #fff7f0; backdrop-filter: blur(8px); }
:root:not(.ml-theme) .dcx-gallery-controls button:hover { border-color: var(--dcx-gold); color: var(--dcx-gold); }
:root:not(.ml-theme) .dcx-gallery-controls svg { width: 1rem; height: 1rem; }
:root:not(.ml-theme) .dcx-gallery-count { position: absolute; z-index: 2; bottom: 1.25rem; left: 1.25rem; color: #e9d9c7; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; }
:root:not(.ml-theme) .dcx-gallery-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin-top: .65rem; }
:root:not(.ml-theme) .dcx-gallery-thumbs button { aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--dcx-line); border-radius: .2rem; opacity: .58; transition: opacity .2s, border-color .2s; }
:root:not(.ml-theme) .dcx-gallery-thumbs button[aria-current="true"] { border-color: var(--dcx-gold); opacity: 1; }
:root:not(.ml-theme) .dcx-gallery-thumbs button:hover { opacity: 1; }
:root:not(.ml-theme) .dcx-gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
:root:not(.ml-theme) .dcx-profile__badges { display: flex; flex-wrap: wrap; gap: .45rem; }
:root:not(.ml-theme) .dcx-profile__badges span { padding: .32rem .52rem; font-size: .58rem; font-weight: 700; letter-spacing: .11em; line-height: 1; text-transform: uppercase; }
:root:not(.ml-theme) .dcx-profile__badges span:first-child { background: var(--dcx-gold); color: #171014; }
:root:not(.ml-theme) .dcx-profile__badges span:not(:first-child) { border: 1px solid rgb(114 173 133 / .4); background: rgb(114 173 133 / .1); color: #a8d0b3; }
:root:not(.ml-theme) .dcx-profile__place { margin: 1.4rem 0 0; color: var(--dcx-gold); font-size: .65rem; font-weight: 600; letter-spacing: .19em; text-transform: uppercase; }
:root:not(.ml-theme) .dcx-profile__name { margin: .5rem 0 0; color: #fff7f0; font-family: "Cormorant Garamond", serif; font-size: clamp(3.7rem, 5.9vw, 6rem); font-weight: 400; letter-spacing: -.055em; line-height: .78; }
:root:not(.ml-theme) .dcx-profile__name em { color: var(--dcx-gold); font-style: italic; font-weight: 400; }
:root:not(.ml-theme) .dcx-profile__tagline { margin: 1.55rem 0 0; color: #d5c3c4; font-family: "Cormorant Garamond", serif; font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.2; }
:root:not(.ml-theme) .dcx-profile__tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.25rem; }
:root:not(.ml-theme) .dcx-profile__tags a { padding: .42rem .65rem; border: 1px solid rgb(245 238 231 / .12); border-radius: var(--dc-kante); background: rgb(255 255 255 / .035); color: #baa9ad; font-size: .66rem; }
:root:not(.ml-theme) .dcx-profile__tags a:hover { border-color: rgb(216 174 120 / .55); color: var(--dcx-gold); }
:root:not(.ml-theme) .dcx-profile__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
:root:not(.ml-theme) .dcx-profile__actions a,
:root:not(.ml-theme) .dcx-profile__actions button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 46px; padding: .65rem 1.05rem; border: 1px solid rgb(245 238 231 / .16); border-radius: var(--dc-kante); color: #d7c9ca; font-size: .73rem; transition: color .2s, background .2s, border-color .2s; }
:root:not(.ml-theme) .dcx-profile__actions a:first-child { border-color: transparent; background: linear-gradient(110deg, #c39356, #f0d09a 55%, #c39356); color: #171014; font-weight: 700; }
:root:not(.ml-theme) .dcx-profile__actions a:hover,
:root:not(.ml-theme) .dcx-profile__actions button:hover { border-color: var(--dcx-gold); color: var(--dcx-gold); }
:root:not(.ml-theme) .dcx-profile__actions a:first-child:hover { box-shadow: 0 12px 30px rgb(216 174 120 / .18); color: #171014; }
:root:not(.ml-theme) .dcx-profile__meta { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--dcx-line); color: #847277; font-size: .63rem; letter-spacing: .1em; text-transform: uppercase; }
:root:not(.ml-theme) .dcx-profile__meta span { display: inline-flex; align-items: center; gap: .35rem; }
:root:not(.ml-theme) .dcx-profile__meta svg { width: .9rem; height: .9rem; color: var(--dcx-gold); }
:root:not(.ml-theme) .dcx-profile-detail { margin-top: clamp(3.5rem, 7vw, 6rem); padding-block: clamp(3.5rem, 7vw, 5.5rem); border-block: 1px solid var(--dcx-line); background: #1a1218; }
:root:not(.ml-theme) .dcx-profile-detail__grid { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: clamp(2.5rem, 9vw, 9rem); }
:root:not(.ml-theme) .dcx-profile-copy { max-width: 48rem; }
:root:not(.ml-theme) .dcx-profile-copy h2 { margin: .8rem 0 0; color: #fff7f0; font-family: "Cormorant Garamond", serif; font-size: clamp(2.6rem, 4vw, 4rem); font-weight: 400; letter-spacing: -.035em; line-height: .95; }
:root:not(.ml-theme) .dcx-profile-copy h2 span { color: var(--dcx-gold); }
:root:not(.ml-theme) .dcx-profile-copy .dcx-profile-description { margin-top: 1.6rem; color: #b9a8ac; font-size: .95rem; line-height: 1.85; white-space: pre-line; }
:root:not(.ml-theme) .dcx-profile-aside { height: fit-content; padding: 1.35rem; border: 1px solid var(--dcx-line); border-radius: .28rem; background: #21171e; }
:root:not(.ml-theme) .dcx-profile-aside dl { margin: 1.2rem 0 0; }
:root:not(.ml-theme) .dcx-profile-aside dl > div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .85rem; border-bottom: 1px solid var(--dcx-line); font-size: .75rem; }
:root:not(.ml-theme) .dcx-profile-aside dl > div:last-child { border-bottom: 0; }
:root:not(.ml-theme) .dcx-profile-aside dt { color: #8f7e83; }
:root:not(.ml-theme) .dcx-profile-aside dd { margin: 0; color: #e2d4d1; text-align: right; }
:root:not(.ml-theme) .dcx-profile-aside__notice { display: flex; gap: .5rem; margin: 1.25rem 0 0; color: #7e6d72; font-size: .65rem; line-height: 1.55; }
:root:not(.ml-theme) .dcx-profile-aside__notice svg { flex: 0 0 auto; width: .9rem; height: .9rem; color: var(--dcx-gold); }
:root:not(.ml-theme) .dcx-profile-extra { padding-top: 3.5rem; }
:root:not(.ml-theme) .dcx-profile-extra > section { margin-top: 3.5rem; padding-top: 2.25rem; border-top: 1px solid var(--dcx-line); }
:root:not(.ml-theme) .dcx-profile-extra h2 { margin: .6rem 0 1.5rem; color: #fff7f0; font-family: "Cormorant Garamond", serif; font-size: clamp(2.25rem, 4vw, 3.5rem); font-weight: 400; line-height: .95; }
:root:not(.ml-theme) .dcx-profile-extra .grid { gap: 1rem; }
@media (max-width: 1023px) {
:root:not(.ml-theme) .dcx-search-shell form > div:first-child,
:root:not(.ml-theme) .dcx-search-shell form > div:nth-child(2) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root:not(.ml-theme) .dcx-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root:not(.ml-theme) .dcx-standard__grid,
:root:not(.ml-theme) .dcx-cities__grid,
:root:not(.ml-theme) .dcx-profile-hero,
:root:not(.ml-theme) .dcx-profile-detail__grid { grid-template-columns: 1fr; }
:root:not(.ml-theme) .dcx-standard__reasons { max-width: 48rem; }
:root:not(.ml-theme) .dcx-city-image { max-width: 31rem; }
:root:not(.ml-theme) .dcx-profile-hero { gap: 2rem; }
:root:not(.ml-theme) .dcx-profile-aside { max-width: 42rem; }
}
@media (max-width: 767px) {
:root:not(.ml-theme) .dcx-container { width: min(100% - 1.5rem, 1280px); }
:root:not(.ml-theme) header.sticky .ml-kopf { height: 65px; }
:root:not(.ml-theme) header.sticky .ml-logo { height: 43px; }
:root:not(.ml-theme) .dcx-hero { min-height: 690px; align-items: flex-end; }
:root:not(.ml-theme) .dcx-hero__media img { object-position: 58% center; }
:root:not(.ml-theme) .dcx-hero__veil { background: linear-gradient(90deg, rgb(17 13 16 / .96), rgb(17 13 16 / .55)), linear-gradient(0deg, #110d10, transparent 55%); }
:root:not(.ml-theme) .dcx-hero__content { padding-top: 7rem; padding-bottom: 1.5rem; }
:root:not(.ml-theme) .dcx-hero__title { font-size: clamp(3.65rem, 16vw, 5.5rem); }
:root:not(.ml-theme) .dcx-hero__intro { margin-top: 1.25rem; font-size: .95rem; }
:root:not(.ml-theme) .dcx-hero__trust { margin-top: 1rem; font-size: .67rem; }
:root:not(.ml-theme) .dcx-search-shell { margin-top: 1.5rem; padding: .45rem; }
:root:not(.ml-theme) .dcx-search-shell form > div:first-child,
:root:not(.ml-theme) .dcx-search-shell form > div:nth-child(2) { grid-template-columns: 1fr; gap: .4rem; }
:root:not(.ml-theme) .dcx-search-shell form > div:first-child > div:last-child { display: none; }
:root:not(.ml-theme) .dcx-search-shell .input,
:root:not(.ml-theme) .dcx-search-shell .btn-gold { min-height: 45px; }
:root:not(.ml-theme) .dcx-utility__inner { min-height: 0; padding-block: .8rem; font-size: .68rem; }
:root:not(.ml-theme) .dcx-utility__inner > div { gap: .8rem; font-size: .56rem; }
:root:not(.ml-theme) .dcx-section { padding-block: 3.75rem; }
:root:not(.ml-theme) .dcx-section-head { align-items: flex-start; flex-direction: column; margin-bottom: 2rem; }
:root:not(.ml-theme) .dcx-section h2,
:root:not(.ml-theme) .dcx-standard h2,
:root:not(.ml-theme) .dcx-provider h2 { font-size: clamp(2.75rem, 13vw, 4rem); }
:root:not(.ml-theme) .dcx-feature-grid,
:root:not(.ml-theme) .dcx-standard__reasons,
:root:not(.ml-theme) .dcx-journal-grid { grid-template-columns: 1fr; }
:root:not(.ml-theme) .dcx-feature-card__image { aspect-ratio: 4 / 3; }
:root:not(.ml-theme) .dcx-metrics { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
:root:not(.ml-theme) .dcx-standard { padding-block: 3.75rem; }
:root:not(.ml-theme) .dcx-standard__grid { gap: 2.5rem; }
:root:not(.ml-theme) .dcx-standard__reasons { gap: 1.6rem; }
:root:not(.ml-theme) .dcx-cities__grid { gap: 2.5rem; }
:root:not(.ml-theme) .dcx-city-list > div { grid-template-columns: repeat(2, 1fr); gap: 0 1rem; }
:root:not(.ml-theme) .dcx-provider { padding-bottom: 3.75rem; }
:root:not(.ml-theme) .dcx-profile { padding-block: 1.15rem 3.25rem; }
:root:not(.ml-theme) .dcx-profile .dcx-container { width: min(100% - 1.5rem, 1200px); }
:root:not(.ml-theme) .dcx-profile-admin { align-items: flex-start; flex-direction: column; }
:root:not(.ml-theme) .dcx-profile-admin a { width: 100%; text-align: center; }
:root:not(.ml-theme) .dcx-gallery-main { aspect-ratio: 4 / 3; }
:root:not(.ml-theme) .dcx-profile__name { font-size: clamp(3.5rem, 16vw, 5rem); }
:root:not(.ml-theme) .dcx-profile-detail { margin-top: 3.25rem; padding-block: 3.5rem; }
:root:not(.ml-theme) .dcx-profile-extra { padding-top: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
:root:not(.ml-theme) .dcx-home *,
:root:not(.ml-theme) .dcx-profile * { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
/* Bestehende Seitenstruktur. Diese Regeln ändern weder Reihenfolge noch Text,
Daten, Kartenanzahl oder Ziele der Bestandstemplates. Sie vereinheitlichen
ausschließlich Abstände, Flächen, Typografie und die Bildbehandlung. */
:root:not(.ml-theme) .dc-kopf {
min-height: 590px;
background: #110d10;
}
:root:not(.ml-theme) .dc-kopf__bild img {
transform: none;
object-position: 58% 48%;
filter: saturate(.82) brightness(.68) contrast(1.06);
}
:root:not(.ml-theme) .dc-kopf__schleier {
background: linear-gradient(90deg, #110d10 2%, rgb(17 13 16 / .96) 29%, rgb(17 13 16 / .48) 66%, rgb(17 13 16 / .8)), linear-gradient(0deg, #110d10 0%, transparent 42%);
}
:root:not(.ml-theme) .dc-kopf__inhalt { padding-top: 5.25rem; padding-bottom: 3rem; }
:root:not(.ml-theme) .dc-kopf .dc-vorspann { margin-bottom: 1rem; }
:root:not(.ml-theme) .dc-kopf .dc-schlagzeile { max-width: 10.5ch; margin-bottom: 1.2rem; font-size: clamp(3.65rem, 7.2vw, 6.8rem); line-height: .78; }
:root:not(.ml-theme) .dc-kopf .dc-schlagzeile__zusatz { max-width: 22ch; margin-top: .28em; font-size: .46em; line-height: .97; }
:root:not(.ml-theme) .dc-kopf .dc-vertrauen { margin-top: 1.15rem; }
:root:not(.ml-theme) .dc-kopf > .dc-kopf__inhalt > .mt-9,
:root:not(.ml-theme) .dc-kopf > .dc-kopf__inhalt > .md\:mt-12 { margin-top: 1.65rem; }
:root:not(.ml-theme) .dc-kopf form { max-width: 70rem; padding: .7rem; border-radius: .38rem; background: rgb(28 20 26 / .76); box-shadow: 0 24px 70px rgb(0 0 0 / .22), inset 0 1px rgb(255 255 255 / .04); backdrop-filter: blur(16px); }
:root:not(.ml-theme) .dc-kopf form .input { min-height: 46px; border: 1px solid rgb(245 238 231 / .08); border-radius: .22rem; background: rgb(255 255 255 / .045); }
:root:not(.ml-theme) .dc-kopf form .btn-gold { min-height: 46px; border-radius: .22rem; box-shadow: none; }
:root:not(.ml-theme) .dc-kopf ~ section { position: relative; }
/* Die Regel „.dc-kopf ~ section.py-20" stand hier bis zum 08.09.2026 mit 3,8rem
und in zwei Bildschirmbreiten darunter noch einmal. Sie war wirkungslos: Die
Abschnitts-Regel weiter unten (siehe „DER TAKT") trifft dieselben Elemente,
wiegt gleich schwer und steht später — nur bei .max-w-3xl griff sie mangels
Abdeckung doch, und genau daher kam der Ausreisser. Entfernt, damit nicht
wieder jemand hier dreht und sich wundert. */
:root:not(.ml-theme) .dc-kopf ~ section .dc-vorspann { margin-bottom: .65rem; }
:root:not(.ml-theme) .dc-kopf ~ section .dc-abschnitt-titel { font-size: clamp(2.65rem, 4.5vw, 4.25rem); line-height: .92; }
:root:not(.ml-theme) .dc-kopf ~ section .card { border-radius: .3rem; background: #1c141a; box-shadow: none; }
:root:not(.ml-theme) .dc-kopf ~ section .card:hover { box-shadow: 0 20px 48px rgb(0 0 0 / .22); }
:root:not(.ml-theme) .dc-kopf ~ section .grid.gap-8 { gap: 1.25rem; }
:root:not(.ml-theme) .dc-kopf ~ section .grid.gap-6 { gap: 1.1rem; }
:root:not(.ml-theme) .dc-kopf ~ section .mb-8 { margin-bottom: 1.75rem; }
:root:not(.ml-theme) .dc-kopf ~ section .dc-stadtbild { border-radius: .3rem; }
:root:not(.ml-theme) .dc-kopf ~ section .dc-stadtblock { align-items: center; }
:root:not(.ml-theme) .dc-kopf ~ section .card.group.flex.flex-col.h-full > .p-5 { padding: 1rem; }
:root:not(.ml-theme) .dc-kopf ~ section .card.group.flex.flex-col.h-full > .p-5 .mb-4 { margin-bottom: .8rem; }
:root:not(.ml-theme) .dc-kopf ~ section .card.group.flex.flex-col.h-full > .p-5 .pt-3 { padding-top: .7rem; }
:root:not(.ml-theme) .dc-kopf ~ section .flex.gap-4 { gap: 1rem; }
:root:not(.ml-theme) main > .max-w-6xl.mx-auto.py-10 { padding-top: 2rem; padding-bottom: 4rem; }
:root:not(.ml-theme) main > .max-w-6xl.mx-auto.py-10 > .grid.lg\:grid-cols-3 { gap: clamp(1.5rem, 3.5vw, 3rem); }
:root:not(.ml-theme) main > .max-w-6xl.mx-auto.py-10 > .grid > [class~="lg:col-span-2"] > [class~="aspect-[4/5]"] { aspect-ratio: 16 / 10; border-radius: .3rem; }
:root:not(.ml-theme) main > .max-w-6xl.mx-auto.py-10 > section.mt-16 { margin-top: 3.75rem; padding-top: 2.25rem; }
@media (min-width: 768px) {
:root:not(.ml-theme) .dc-kopf { min-height: 625px; }
:root:not(.ml-theme) .dc-kopf__inhalt { padding-top: 6.25rem; padding-bottom: 3.75rem; }
}
@media (min-width: 1024px) {
:root:not(.ml-theme) .dc-kopf ~ section .lg\:gap-6 { gap: 1rem; }
:root:not(.ml-theme) .dc-kopf ~ section .lg\:gap-4 { gap: .9rem; }
}
@media (max-width: 767px) {
:root:not(.ml-theme) .dc-kopf { min-height: 570px; }
:root:not(.ml-theme) .dc-kopf__bild img { object-position: 62% center; }
:root:not(.ml-theme) .dc-kopf__schleier { background: linear-gradient(90deg, rgb(17 13 16 / .96), rgb(17 13 16 / .55)), linear-gradient(0deg, #110d10, transparent 55%); }
:root:not(.ml-theme) .dc-kopf__inhalt { padding-top: 4.25rem; padding-bottom: 2.25rem; }
:root:not(.ml-theme) .dc-kopf .dc-schlagzeile { font-size: clamp(3.25rem, 14vw, 4.5rem); }
:root:not(.ml-theme) .dc-kopf form { padding: .5rem; }
:root:not(.ml-theme) .dc-kopf ~ section .grid.gap-8 { gap: 1rem; }
}
/* Profil-Template: Der DOM-Inhalt und sämtliche Komponenten bleiben bestehen.
Die Klassen schaffen nur einen klaren, durchgehenden Editorial-Aufbau. */
:root:not(.ml-theme) .dc-profile-template {
width: min(100% - 2rem, 1240px);
max-width: none;
padding-top: 1.45rem;
padding-bottom: 4.5rem;
}
:root:not(.ml-theme) .dc-profile-template .dc-profile-breadcrumb {
gap: .55rem;
margin-bottom: 1.3rem;
color: #958188;
font-size: .68rem;
letter-spacing: .035em;
}
:root:not(.ml-theme) .dc-profile-template .dc-profile-breadcrumb a:hover { color: var(--dcx-gold); }
:root:not(.ml-theme) .dc-profile-template .dc-profile-adminbar,
:root:not(.ml-theme) .dc-profile-template .dc-profile-ownerbar {
position: relative;
overflow: hidden;
margin-bottom: 1rem;
padding: .9rem 1rem;
border-radius: .22rem;
box-shadow: none;
}
:root:not(.ml-theme) .dc-profile-template .dc-profile-adminbar { border-color: rgb(111 39 62 / .65); background: linear-gradient(100deg, rgb(111 39 62 / .25), rgb(41 22 30 / .35)); }
:root:not(.ml-theme) .dc-profile-template .dc-profile-ownerbar { border-color: rgb(216 174 120 / .25); background: linear-gradient(100deg, rgb(216 174 120 / .08), rgb(28 20 26 / .68)); }
:root:not(.ml-theme) .dc-profile-template .dc-profile-adminbar a,
:root:not(.ml-theme) .dc-profile-template .dc-profile-ownerbar a {
min-height: 39px;
padding: .65rem .9rem;
border: 1px solid rgb(216 174 120 / .45);
border-radius: var(--dc-kante);
background: transparent;
color: var(--dcx-gold);
font-size: .64rem;
letter-spacing: .1em;
}
:root:not(.ml-theme) .dc-profile-template .dc-profile-ownerbar a { background: linear-gradient(110deg, #c39356, #f0d09a 55%, #c39356); border-color: transparent; color: #171014; }
:root:not(.ml-theme) .dc-profile-template .dc-profile-hero {
grid-template-columns: minmax(0, 1.08fr) minmax(18rem, .92fr);
align-items: start;
gap: clamp(2rem, 5.5vw, 5.25rem);
}
/*
| Die Spannweiten aus dem Baukasten zurücknehmen.
|
| Das Raster darüber macht aus drei Spalten zwei. Die Galerie trägt aber
| lg:col-span-2 und würde damit beide Spalten einnehmen — die rechte Spalte
| rutschte unter die Bilder statt daneben. Genau deshalb sah die Anzeigenseite
| nach dem Setzen der Entwurfsklassen zuerst falsch aus.
|
| Die Klassen bleiben im Markup stehen: Ohne .dc-profile-template (etwa in der
| Handy-App) wird das dreispaltige Raster weiter gebraucht.
*/
:root:not(.ml-theme) .dc-profile-template .dc-profile-hero > * {
grid-column: auto;
}
:root:not(.ml-theme) .dc-profile-template .dc-profile-gallery > [class~="aspect-[4/5]"] {
aspect-ratio: 16 / 10;
margin-bottom: .7rem;
border-color: rgb(245 238 231 / .12);
border-radius: .28rem;
background: #21171e;
box-shadow: 0 25px 70px rgb(0 0 0 / .2);
}
:root:not(.ml-theme) .dc-profile-template .dc-profile-gallery > [class~="aspect-[4/5]"] img { object-position: center 24%; }
/*
| Das Bild muss die Fläche füllen, sonst bleibt sie schwarz.
|
| Der Entwurf stellt das Bildfeld von 4:5 auf 16:10 um — aus 760 Pixeln Höhe
| werden 380. Das Bild selbst blieb dabei in seiner eigenen Höhe von 810 Pixeln
| stehen und ragte unten heraus; sichtbar war nur sein oberster, dunkler Rand.
|
| Die Ursache liegt eine Ebene tiefer: Das ![]()
trägt h-full, sein Elternteil
| hat aber keine festgelegte Höhe — dann bedeutet „volle Höhe" eben
| die eigene. Solange das Feld 4:5 war (760 gegen 810), fiel das nicht auf.
|
| Bewusst nur hier und nicht allgemein: Das ohne Höhe ist an anderen
| Stellen genau richtig.
*/
:root:not(.ml-theme) .dc-profile-template .dc-profile-gallery > [class~="aspect-[4/5]"] picture {
display: block;
height: 100%;
}
:root:not(.ml-theme) .dc-profile-template .dc-profile-gallery > .grid.grid-cols-5 { display: grid; grid-template-columns: repeat(3, 5.6rem); gap: .6rem; }
:root:not(.ml-theme) .dc-profile-template .dc-profile-gallery > .grid.grid-cols-5 button { aspect-ratio: 4 / 3; border-radius: .17rem; }
:root:not(.ml-theme) .dc-profile-template .dc-profile-gallery > p.hidden.lg\:block {
display: block;
max-width: 46rem;
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--dcx-line);
color: #b8a6aa;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: clamp(1.12rem, 1.55vw, 1.38rem);
line-height: 1.42;
}
:root:not(.ml-theme) .dc-profile-template .dc-profile-sidebar {
position: sticky;
top: 101px;
padding: .5rem 0 0;
}
:root:not(.ml-theme) .dc-profile-template .dc-profile-sidebar > .flex:first-child {
gap: .45rem;
margin-bottom: 1.1rem;
}
:root:not(.ml-theme) .dc-profile-template .dc-profile-sidebar > .flex:first-child .dc-vorspann {
color: var(--dcx-gold);
font-size: .62rem;
letter-spacing: .2em;
}
:root:not(.ml-theme) .dc-profile-template .dc-profile-sidebar > .flex:first-child span {
padding: .3rem .5rem;
border-radius: var(--dc-kante);
font-size: .55rem;
}
:root:not(.ml-theme) .dc-profile-template .dc-profile-title {
margin: 0 0 1.35rem;
color: #fff7f0;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: clamp(3.75rem, 5.7vw, 5.85rem);
font-weight: 400;
letter-spacing: -.055em;
line-height: .76;
}
:root:not(.ml-theme) .dc-profile-template .dc-profile-title .dc-name-schluss {
margin-top: .07em;
color: var(--dcx-gold);
font-weight: 400;
}
:root:not(.ml-theme) .dc-profile-template .dc-profile-disclosure {
margin-bottom: 1.2rem;
padding: .9rem .9rem;
border-color: rgb(216 174 120 / .34);
border-radius: .2rem;
background: rgb(216 174 120 / .065);
color: #cfc0bd;
font-size: .67rem;
line-height: 1.55;
}
:root:not(.ml-theme) .dc-profile-template .dc-profile-disclosure strong,
:root:not(.ml-theme) .dc-profile-template .dc-profile-disclosure svg { color: var(--dcx-gold); }
:root:not(.ml-theme) .dc-profile-template .dc-profile-location {
margin-bottom: .65rem;
color: #d6c6c8;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 1.35rem;
line-height: 1;
}
:root:not(.ml-theme) .dc-profile-template .dc-profile-categories { gap: .38rem; margin-bottom: 1rem; }
:root:not(.ml-theme) .dc-profile-template .dc-profile-categories a,
:root:not(.ml-theme) .dc-profile-template .dc-profile-preferences a {
padding: .34rem .55rem;
border-radius: var(--dc-kante);
font-size: .58rem;
letter-spacing: .07em;
}
:root:not(.ml-theme) .dc-profile-template .dc-profile-meta {
margin-bottom: 1.25rem;
padding-top: .8rem;
border-top: 1px solid var(--dcx-line);
color: #867379;
font-size: .62rem;
letter-spacing: .03em;
}
:root:not(.ml-theme) .dc-profile-template .dc-profile-preferences {
margin-bottom: 1.3rem;
padding-top: 1rem;
border-top: 1px solid var(--dcx-line);
}
:root:not(.ml-theme) .dc-profile-template .dc-profile-preferences h2,
:root:not(.ml-theme) .dc-profile-template .dc-profile-contact h2 {
margin-bottom: .7rem;
color: var(--dcx-gold);
font-size: .58rem;
letter-spacing: .16em;
}
:root:not(.ml-theme) .dc-profile-template .dc-profile-contact { padding-top: 1.1rem; border-color: var(--dcx-line); }
:root:not(.ml-theme) .dc-profile-template .dc-profile-contact .space-y-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
:root:not(.ml-theme) .dc-profile-template .dc-profile-contact .space-y-2 > * + * { margin-top: 0; }
:root:not(.ml-theme) .dc-profile-template .dc-profile-contact a {
min-height: 44px;
padding: .6rem .7rem;
border-color: rgb(216 174 120 / .25);
border-radius: .18rem;
background: rgb(216 174 120 / .055);
color: #e3c998;
font-size: .68rem;
}
:root:not(.ml-theme) .dc-profile-template .dc-profile-contact a:hover { border-color: var(--dcx-gold); background: rgb(216 174 120 / .12); }
:root:not(.ml-theme) .dc-profile-template .dc-profile-sidebar > div:not(.dc-profile-contact):not(.dc-profile-preferences):not(.dc-profile-meta):not(.flex) { margin-top: 1rem; }
:root:not(.ml-theme) .dc-profile-template .dc-profile-sidebar > .border-t { border-color: var(--dcx-line); }
:root:not(.ml-theme) .dc-profile-template .dc-profile-sidebar .mt-6 { margin-top: 1rem; }
:root:not(.ml-theme) .dc-profile-template .dc-profile-sidebar .mt-8 { margin-top: 1.4rem; }
:root:not(.ml-theme) .dc-profile-template .dc-profile-sidebar .pt-6 { padding-top: 1.1rem; }
:root:not(.ml-theme) .dc-profile-template .dc-profile-sidebar .grid.grid-cols-2 { gap: .6rem; }
:root:not(.ml-theme) .dc-profile-template .dc-profile-section {
margin-top: clamp(3.25rem, 6vw, 5rem);
padding-top: clamp(2rem, 3vw, 2.75rem);
border-color: var(--dcx-line);
}
:root:not(.ml-theme) .dc-profile-template .dc-profile-section > .flex { margin-bottom: 1.4rem; }
:root:not(.ml-theme) .dc-profile-template .dc-profile-section > .flex h2,
:root:not(.ml-theme) .dc-profile-template .dc-profile-section > h2 {
color: #fff7f0;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: clamp(2.5rem, 4vw, 3.8rem);
font-weight: 400;
letter-spacing: -.035em;
line-height: .88;
}
:root:not(.ml-theme) .dc-profile-template .dc-profile-section > .flex .text-xs,
:root:not(.ml-theme) .dc-profile-template .dc-profile-section > .text-xs:first-child { color: var(--dcx-gold); font-size: .6rem; letter-spacing: .18em; }
:root:not(.ml-theme) .dc-profile-template .dc-profile-section .grid.gap-6 { gap: 1rem; }
:root:not(.ml-theme) .dc-profile-template .dc-profile-section .grid.gap-5 { gap: 1rem; }
:root:not(.ml-theme) .dc-profile-template .dc-profile-section .space-y-3 > * + * { margin-top: .65rem; }
:root:not(.ml-theme) .dc-profile-template .dc-profile-section .card { border-radius: .25rem; box-shadow: none; }
:root:not(.ml-theme) .dc-profile-template > .mt-10 { margin-top: 2.5rem; }
@media (max-width: 767px) {
:root:not(.ml-theme) .dc-profile-template .dc-profile-hero { grid-template-columns: 1fr; gap: 2rem; }
:root:not(.ml-theme) .dc-profile-template .dc-profile-sidebar { position: static; max-width: 48rem; padding: 0; }
:root:not(.ml-theme) .dc-profile-template .dc-profile-gallery > p.hidden.lg\:block { display: none; }
}
@media (max-width: 640px) {
:root:not(.ml-theme) .dc-profile-template { width: min(100% - 1.5rem, 1240px); padding-top: 1rem; padding-bottom: 3.25rem; }
:root:not(.ml-theme) .dc-profile-template .dc-profile-adminbar,
:root:not(.ml-theme) .dc-profile-template .dc-profile-ownerbar { align-items: flex-start; gap: .75rem; padding: .8rem; }
:root:not(.ml-theme) .dc-profile-template .dc-profile-adminbar a,
:root:not(.ml-theme) .dc-profile-template .dc-profile-ownerbar a { width: 100%; text-align: center; }
:root:not(.ml-theme) .dc-profile-template .dc-profile-gallery > [class~="aspect-[4/5]"] { aspect-ratio: 4 / 4.25; }
:root:not(.ml-theme) .dc-profile-template .dc-profile-gallery > .grid.grid-cols-5 { grid-template-columns: repeat(3, 1fr); }
:root:not(.ml-theme) .dc-profile-template .dc-profile-title { font-size: clamp(3.4rem, 15vw, 4.8rem); }
:root:not(.ml-theme) .dc-profile-template .dc-profile-contact .space-y-2 { grid-template-columns: 1fr; }
:root:not(.ml-theme) .dc-profile-template .dc-profile-section { margin-top: 3.25rem; padding-top: 1.8rem; }
}
/* Seitentypen jenseits der Start- und Profilseite. Das Overlay arbeitet nur
mit vorhandenen Klassen und verändert keine Struktur, Texte oder Interaktion. */
:root:not(.ml-theme) main { min-height: 52vh; }
:root:not(.ml-theme) main :is(a, button, input, select, textarea):focus-visible {
outline: 2px solid var(--dcx-gold);
outline-offset: 3px;
}
:root:not(.ml-theme) main .max-w-7xl,
:root:not(.ml-theme) main .max-w-6xl,
:root:not(.ml-theme) main .max-w-5xl,
:root:not(.ml-theme) main .max-w-4xl { scroll-margin-top: 6.5rem; }
/* -----------------------------------------------------------------------------
| DER TAKT — ein Abstand für alle Blöcke einer Seite
|
| GEMESSEN AM 08.09.2026, Startseite bei 1440 Pixeln Breite. Der sichtbare
| Abstand von einem Block zum nächsten — also von der Unterkante dessen, was
| gezeichnet wird, bis zur Oberkante des Nächsten:
|
| 58 · 144 · 144 · 143 · 158 · 93 · 86
|
| Sieben Übergänge, fünf verschiedene Werte. Nach dem Kopfbild 58 Pixel, ein
| paar Bildschirme weiter 158 — dasselbe Verhältnis zweier Abschnitte, fast
| dreimal so viel Luft. Das liest sich nicht als Gestaltung, sondern als Zufall.
|
| DIE URSACHEN, alle drei:
|
| 1. Die Regel hier deckte .max-w-4xl bis .max-w-7xl ab, aber nicht .max-w-3xl.
| Der Abschnitt „Häufige Fragen" fiel deshalb auf eine ältere Regel zurück
| (.dc-kopf ~ section.py-20) und bekam 72/72 statt 58/86. Daher die 158 davor
| und die 93 danach.
| 2. Oben und unten waren verschieden (58 gegen 86). Sichtbar ist immer die
| Summe zweier benachbarter Polsterungen; verschiedene Werte machen die
| Summe nur schwerer vorhersagbar, ohne dass man den Unterschied sieht.
| 3. Nach dem Kopfbild zählt nur die obere Polsterung des Folgeblocks — das
| Bild hat unten keine. Deshalb dort 58 statt 144.
|
| DIE LÖSUNG ist ein einziger Wert. --dc-takt ist die halbe Lücke; zwei
| benachbarte Blöcke ergeben zusammen den vollen Abstand. Bei 1440 Pixeln also
| 2 × 56 = 112 Pixel überall — auch spürbar weniger als die bisherigen 144, denn
| die Leere zwischen den Abschnitten war der eigentliche Anlass der Beschwerde.
|
| Wer den Rhythmus der ganzen Seite ändern will, ändert diese eine Zeile.
---------------------------------------------------------------------------- */
:root:not(.ml-theme) {
--dc-takt: 3.5rem;
--dc-takt-fuss: 5.5rem;
}
:root:not(.ml-theme) main > .max-w-7xl.mx-auto,
:root:not(.ml-theme) main > .max-w-6xl.mx-auto:not(.dc-profile-template),
:root:not(.ml-theme) main > .max-w-5xl.mx-auto,
:root:not(.ml-theme) main > .max-w-4xl.mx-auto,
:root:not(.ml-theme) main > .max-w-3xl.mx-auto,
:root:not(.ml-theme) main > .max-w-2xl.mx-auto {
padding-top: var(--dc-takt);
padding-bottom: var(--dc-takt);
}
/*
| Der erste Block nach dem Kopfbild trägt den Abstand allein.
|
| Die Genauigkeit der Auswahl ist Absicht: Sie muss dieselbe Gewichtung haben
| wie die Regel darüber, sonst gewinnt die und der Zuschlag verpufft. Deshalb
| .mx-auto zusammen mit dem Merkmal „irgendein max-w" statt eines schlichten
| „+ section", das leichter wiegt.
*/
:root:not(.ml-theme) main > .dc-kopf + .mx-auto[class*="max-w-"] {
padding-top: calc(var(--dc-takt) * 2);
}
/*
| Vor dem Fußbereich etwas mehr Luft — sonst bricht die Seite unten ab.
|
| Die Anzeigenseite ist ausgenommen: Sie bringt als einzige Seite ihre eigenen
| Werte mit (.dc-profile-template, oben und unten), weil sie oben dicht unter
| der Brotkrume beginnt statt mit einer Überschrift.
*/
:root:not(.ml-theme) main > .mx-auto[class*="max-w-"]:last-child:not(.dc-profile-template) {
padding-bottom: var(--dc-takt-fuss);
}
/*
| Blöcke mit Trennstrich oben.
|
| Auf der Startseite trägt der Schlussteil (der lange Fliesstext über Dominas
| in Deutschland) eine Linie über sich. Für das Auge ist die Linie die Oberkante
| des Blocks — die Polsterung darüber zählt nicht mehr mit. Gemessen waren es
| deshalb 56 statt 112 Pixel: Der Strich klebte am Journal darüber.
|
| Der Zuschlag stellt den vollen Takt bis zur Linie her. Unter der Linie bleibt
| die halbe Strecke, und das ist richtig so: Ein Trennstrich gehört zu dem, was
| unter ihm kommt.
*/
:root:not(.ml-theme) main > .mx-auto[class*="max-w-"][class*="border-t"] {
margin-top: var(--dc-takt);
}
/* Verzeichnis, Suche, Kategorien, Städte und Bundesländer */
:root:not(.ml-theme) main > .max-w-7xl.mx-auto > header,
:root:not(.ml-theme) main > .max-w-6xl.mx-auto > header,
:root:not(.ml-theme) main > .max-w-5xl.mx-auto > header {
position: relative;
margin-bottom: clamp(1.5rem, 3.5vw, 2.7rem);
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--dcx-line);
}
:root:not(.ml-theme) main > .max-w-7xl.mx-auto > header h1,
:root:not(.ml-theme) main > .max-w-6xl.mx-auto > header h1,
:root:not(.ml-theme) main > .max-w-5xl.mx-auto > header h1,
:root:not(.ml-theme) main > .max-w-4xl.mx-auto > header h1 {
margin: .5rem 0 0;
color: #fff7f0;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: clamp(2.9rem, 5vw, 4.9rem);
font-weight: 400;
letter-spacing: -.05em;
line-height: .86;
}
:root:not(.ml-theme) main > .max-w-7xl.mx-auto > header p,
:root:not(.ml-theme) main > .max-w-6xl.mx-auto > header p,
:root:not(.ml-theme) main > .max-w-5xl.mx-auto > header p { max-width: 47rem; margin-top: 1rem; color: #ae9ca0; line-height: 1.65; }
:root:not(.ml-theme) nav[aria-label="Brotkrume"] { color: #8c797e; font-size: .68rem; letter-spacing: .03em; }
:root:not(.ml-theme) nav[aria-label="Brotkrume"] a:hover { color: var(--dcx-gold); }
:root:not(.ml-theme) main [x-data] > .flex.sticky {
top: 5.65rem;
z-index: 10;
padding: .65rem;
border: 1px solid var(--dcx-line);
border-radius: .28rem;
background: rgb(28 20 26 / .93);
box-shadow: 0 12px 30px rgb(0 0 0 / .16);
backdrop-filter: blur(14px);
}
:root:not(.ml-theme) main [x-data] :is(input[type="text"], input[type="search"], select) {
min-height: 43px;
border-color: rgb(245 238 231 / .12);
border-radius: .22rem;
background: rgb(255 255 255 / .035);
}
:root:not(.ml-theme) .card.dc-karte,
:root:not(.ml-theme) a.card.group[target="_blank"][rel~="sponsored"] {
overflow: hidden;
border-color: var(--dcx-line);
border-radius: .3rem;
background: linear-gradient(145deg, #21171e, #181116);
box-shadow: none;
transition: transform .25s var(--dcx-ease), border-color .25s var(--dcx-ease), box-shadow .25s var(--dcx-ease);
}
:root:not(.ml-theme) .card.dc-karte:hover,
:root:not(.ml-theme) .card.dc-karte:focus-within,
:root:not(.ml-theme) a.card.group[target="_blank"][rel~="sponsored"]:hover {
border-color: rgb(216 174 120 / .56);
box-shadow: 0 20px 50px rgb(0 0 0 / .25);
transform: translateY(-.2rem);
}
:root:not(.ml-theme) .card.dc-karte.is-premium { border-color: rgb(216 174 120 / .4); }
:root:not(.ml-theme) .card.dc-karte .dc-karte-haupt { padding: .85rem .9rem .9rem; }
:root:not(.ml-theme) .card.dc-karte .dc-karte-ort { color: #b7a5a9; font-size: .73rem; }
:root:not(.ml-theme) .card.dc-karte .chip { border-radius: var(--dc-kante); font-size: .56rem; letter-spacing: .09em; }
:root:not(.ml-theme) .max-w-7xl.mx-auto > .grid:has(> .dc-karte) { gap: 1rem; }
:root:not(.ml-theme) .max-w-7xl.mx-auto > .card.text-center {
border-color: var(--dcx-line);
border-radius: .3rem;
background: #1c141a;
box-shadow: none;
}
:root:not(.ml-theme) [data-cityname].card { border-radius: .25rem; transition: border-color .2s, background .2s, transform .2s; }
:root:not(.ml-theme) [data-cityname].card:hover { border-color: rgb(216 174 120 / .45); background: rgb(216 174 120 / .065); transform: translateY(-2px); }
:root:not(.ml-theme) details.group { border-bottom-color: var(--dcx-line); }
:root:not(.ml-theme) details.group > summary { min-height: 3.45rem; color: #eadfdd; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.35rem; }
:root:not(.ml-theme) details.group[open] > summary { color: var(--dcx-gold); }
:root:not(.ml-theme) details.group [data-cityname]:not(.card) { border-bottom-color: rgb(245 238 231 / .08); }
/* Artikel, Lexikon, redaktionelle und rechtliche Inhaltsseiten */
:root:not(.ml-theme) .ml-hell { background: #171014; color: #e6d9d7; }
:root:not(.ml-theme) .ml-hell .bg-coal { background-color: #21171e; }
:root:not(.ml-theme) .ml-marke,
:root:not(.ml-theme) .dc-vorspann,
:root:not(.ml-theme) .rt__marke { color: var(--dcx-gold); }
:root:not(.ml-theme) .ml-schlagzeile,
:root:not(.ml-theme) .rt__titel { color: #fff7f0; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; letter-spacing: -.045em; line-height: .88; }
:root:not(.ml-theme) .blog-content,
:root:not(.ml-theme) .rt,
:root:not(.ml-theme) .prose.prose-invert { color: #c6b6b9; }
:root:not(.ml-theme) .blog-content :is(h2,h3,h4),
:root:not(.ml-theme) .rt :is(h2,h3,h4),
:root:not(.ml-theme) .prose.prose-invert :is(h2,h3,h4) { color: #f8eee8; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; letter-spacing: -.025em; }
:root:not(.ml-theme) .blog-content h2,
:root:not(.ml-theme) .rt h2,
:root:not(.ml-theme) .prose.prose-invert h2 { margin-top: 2.4rem; font-size: clamp(2rem, 3vw, 2.8rem); line-height: .95; }
:root:not(.ml-theme) .blog-content p,
:root:not(.ml-theme) .rt p,
:root:not(.ml-theme) .prose.prose-invert p { line-height: 1.8; }
:root:not(.ml-theme) .blog-content :is(a, strong),
:root:not(.ml-theme) .rt :is(a, strong),
:root:not(.ml-theme) .prose.prose-invert :is(a, strong) { color: var(--dcx-gold); }
:root:not(.ml-theme) .blog-content blockquote,
:root:not(.ml-theme) .rt blockquote,
:root:not(.ml-theme) .prose.prose-invert blockquote { border-left-color: var(--dcx-gold); background: rgb(216 174 120 / .06); color: #dacccd; }
:root:not(.ml-theme) .lex-karte {
border-color: var(--dcx-line);
border-radius: .25rem;
background: #1c141a;
box-shadow: none;
transition: transform .22s var(--dcx-ease), border-color .22s var(--dcx-ease), background .22s var(--dcx-ease);
}
:root:not(.ml-theme) .lex-karte:hover,
:root:not(.ml-theme) .lex-karte:focus-visible { border-color: rgb(216 174 120 / .5); background: #241720; transform: translateY(-.16rem); }
:root:not(.ml-theme) .lex-karte[data-t="praktik"] > span + span,
:root:not(.ml-theme) .lex-karte[data-t="abgrenzung"] > span + span { color: #b8a6aa; }
:root:not(.ml-theme) .ml-personen > .ml-person { border-color: var(--dcx-line); border-radius: .3rem; background: #1c141a; box-shadow: none; }
:root:not(.ml-theme) .dc-kern,
:root:not(.ml-theme) .dc-faq { border-color: var(--dcx-line); border-radius: .3rem; background: #1c141a; }
/* Anbieter-, Preis-, Konto- und Formularseiten */
/*
| Der Kopf der Anbieterseite läuft im selben Takt.
|
| Er hatte 96 Pixel oben wie unten. Nach unten ergab das mit dem Folgeblock
| 152 statt 112 — der einzige Übergang auf der Seite, der aus der Reihe fiel.
| Unten also der halbe Takt wie überall; oben bleibt es grosszügiger, weil
| darüber die Navigationsleiste sitzt und kein Inhalt.
*/
:root:not(.ml-theme) body.font-sans.bg-noir > main > section.relative.py-24 {
padding-top: calc(var(--dc-takt) * 1.75);
padding-bottom: var(--dc-takt);
}
:root:not(.ml-theme) body.font-sans.bg-noir .card,
:root:not(.ml-theme) main:has(> .max-w-4xl > .dc-vorspann) > .max-w-4xl > .grid > .card,
:root:not(.ml-theme) main:has(input[name="confirm"]) > .max-w-xl > .card {
border-color: var(--dcx-line);
border-radius: .3rem;
background: linear-gradient(145deg, #21171e, #1a1218);
box-shadow: none;
}
:root:not(.ml-theme) body.font-sans.bg-noir .card:hover { border-color: rgb(216 174 120 / .3); }
:root:not(.ml-theme) body.font-sans.bg-noir .btn-gold,
:root:not(.ml-theme) body.font-sans.bg-noir .btn-ghost {
min-height: 42px;
border-radius: var(--dc-kante);
font-size: .7rem;
letter-spacing: .055em;
}
:root:not(.ml-theme) main:has(input[name="confirm"]) .input,
:root:not(.ml-theme) main:has(input[name="confirm"]) .label { border-radius: .22rem; }
:root:not(.ml-theme) main:has(input[name="confirm"]) .input { min-height: 44px; border-color: rgb(245 238 231 / .14); background: rgb(255 255 255 / .035); }
/* Eigenständige Anbieter- und Nutzer-App. Interaktionen und Datenattribute
werden nicht überschrieben; die Regeln betreffen lediglich sichtbare Flächen. */
html.ua-html:not(.ml-theme) body.ap-body.ua-body { background: #110d10; color: #eadfdd; }
html.ua-html:not(.ml-theme) .ap-kopf,
html.ua-html:not(.ml-theme) .ap-tabs { border-color: var(--dcx-line); background: rgb(23 16 20 / .94); box-shadow: none; }
html.ua-html:not(.ml-theme) .ap-karte,
html.ua-html:not(.ml-theme) .ap-formkarte { border-color: var(--dcx-line); border-radius: .32rem; background: linear-gradient(145deg, #21171e, #1a1218); box-shadow: none; }
html.ua-html:not(.ml-theme) .ap-zeile,
html.ua-html:not(.ml-theme) .ap-liste--verbunden > .ap-zeile { border-color: rgb(245 238 231 / .08); }
html.ua-html:not(.ml-theme) .ap-zeile:hover { background: rgb(216 174 120 / .055); }
html.ua-html:not(.ml-theme) .ap-knopf--gold { border-radius: 999px; background: linear-gradient(110deg, #c39356, #f0d09a 55%, #c39356); color: #171014; }
html.ua-html:not(.ml-theme) .ap-knopf--geist,
html.ua-html:not(.ml-theme) .ap-knopf--leise { border-radius: 999px; border-color: rgb(216 174 120 / .35); color: var(--dcx-gold); }
html.ua-html:not(.ml-theme) .ap-feld,
html.ua-html:not(.ml-theme) .ap-eingabe,
html.ua-html:not(.ml-theme) .ap-schalter { border-color: rgb(245 238 231 / .14); border-radius: .25rem; background: rgb(255 255 255 / .035); color: #eadfdd; }
html.ua-html:not(.ml-theme) .ua-held,
html.ua-html:not(.ml-theme) .ua-anzeige,
html.ua-html:not(.ml-theme) .ua-mitglied { border-radius: .3rem; }
html.ua-html:not(.ml-theme) .ap-aktionsleiste--immer { border-color: var(--dcx-line); background: rgb(23 16 20 / .96); box-shadow: 0 -14px 35px rgb(0 0 0 / .22); }
@media (max-width: 767px) {
/* Auf dem Telefon derselbe Rhythmus, nur enger: 2 × 36 = 72 Pixel.
Ein einziger Wert genügt — die Regeln oben rechnen mit ihm. */
:root:not(.ml-theme) {
--dc-takt: 2.25rem;
--dc-takt-fuss: 3.25rem;
}
:root:not(.ml-theme) main > .max-w-7xl.mx-auto > header h1,
:root:not(.ml-theme) main > .max-w-6xl.mx-auto > header h1,
:root:not(.ml-theme) main > .max-w-5xl.mx-auto > header h1,
:root:not(.ml-theme) main > .max-w-4xl.mx-auto > header h1 { font-size: clamp(2.65rem, 12vw, 3.8rem); }
:root:not(.ml-theme) main [x-data] > .flex.sticky { top: 4.7rem; padding: .5rem; }
:root:not(.ml-theme) .max-w-7xl.mx-auto > .grid:has(> .dc-karte) { gap: .75rem; }
:root:not(.ml-theme) details.group > summary { font-size: 1.15rem; }
}