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