/* ==========================================================================
   OFENZAUBER BERND MENZEL – Design-Variante „Modern“
   --------------------------------------------------------------------------
   Wird zusaetzlich zu style.css geladen und greift nur, wenn
   <html data-design="modern"> gesetzt ist (Umschalter / includes/config.php).
   Inhalte und Aufbau bleiben identisch – geaendert werden Farben,
   Schrift und Formen:
   - Graphit & Beton statt Kohle & Kalk
   - Glut-Kupfer als Akzent statt Dunkelrot & Messing
   - Logo in der Dunkelgrau-Variante
   - Jost fuer Ueberschriften statt Serifenschrift
   - klare Kanten statt Bogen und Kapseln
   ========================================================================== */


/* 01 VARIABLEN ============================================================= */
:root[data-design="modern"] {
    /* Akzent: Glut-Kupfer */
    --c-glut: #b8471b;
    --c-glut-dunkel: #933613;
    --c-glut-hell: #d65f2c;
    --c-glutschein: #ff7a3d;

    /* Graphit & Beton */
    --c-kohle: #121212;
    --c-kohle-2: #1a1a1a;
    --c-kohle-3: #262626;
    --c-kalk: #f4f4f2;
    --c-sand: #e8e8e5;
    --c-leinen: #ffffff;

    /* Akzenttexte (Dachzeilen) */
    --c-messing: #b8471b;
    --c-messing-hell: #ea8150;

    /* Text */
    --c-text: #161616;
    --c-text-leise: #5a5a5a;
    --c-text-hell: #f3f3f3;
    --c-text-hell-leise: rgba(243, 243, 243, 0.66);
    --c-linie: rgba(0, 0, 0, 0.11);
    --c-linie-hell: rgba(255, 255, 255, 0.13);

    /* Eine Schrift fuer alles */
    --f-serif: 'Jost', 'Segoe UI', system-ui, sans-serif;

    /* Klare Kanten */
    --radius: 0px;
    --radius-gross: 0px;

    /* Kachelband in Logo-Dunkelgrau */
    --kachel-glut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='12'%3E%3Crect x='3' y='1' width='70' height='10' rx='5' fill='%23484848'/%3E%3C/svg%3E");
    --kachel-messing: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='12'%3E%3Crect x='3' y='1' width='70' height='10' rx='5' fill='%239a9a9a'/%3E%3C/svg%3E");
    --kachel-siegel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132.5 45' preserveAspectRatio='none'%3E%3Crect x='3.25' y='0' width='126' height='45' rx='22.5' fill='%23454545'/%3E%3C/svg%3E");
}


/* 02 TYPOGRAFIE ============================================================ */
[data-design="modern"] h1,
[data-design="modern"] h2,
[data-design="modern"] h3,
[data-design="modern"] h4 {
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

[data-design="modern"] h1 {
    font-size: clamp(2.2rem, 1.3rem + 3.2vw, 3.9rem);
}

[data-design="modern"] h2 {
    font-size: clamp(1.85rem, 1.35rem + 1.9vw, 2.8rem);
}

[data-design="modern"] h3 {
    font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Hervorhebungen: Farbe statt Kursivschrift */
[data-design="modern"] h1 em,
[data-design="modern"] h2 em,
[data-design="modern"] h3 em,
[data-design="modern"] .hero h1 em,
[data-design="modern"] .seitenkopf h1 em,
[data-design="modern"] .sinne__zitat em {
    font-style: normal;
    font-weight: 500;
}

[data-design="modern"] .hero h1 {
    font-size: clamp(2.2rem, 1.3rem + 2.8vw, 3.4rem);
    font-weight: 300;
}

[data-design="modern"] .dachzeile {
    letter-spacing: 0.2em;
}

[data-design="modern"] .dachzeile::before {
    width: 1.6rem;
    height: 2px;
}

[data-design="modern"] .rechtstext p,
[data-design="modern"] .rechtstext li {
    color: #3a3a3a;
}

/* Elemente, die in der Klassik-Variante Serifen- bzw. Kursivschrift nutzen */
[data-design="modern"] .hero__fakten strong {
    font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
    font-weight: 300;
}

[data-design="modern"] .sinne__zitat {
    font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem);
    font-weight: 300;
}

[data-design="modern"] .jubilaeum__zahl {
    font-size: 60px;
    font-weight: 300;
}

[data-design="modern"] .sinne__signatur,
[data-design="modern"] .signatur strong {
    font-style: normal;
}

[data-design="modern"] .sinne__signatur {
    font-size: 1rem;
}

[data-design="modern"] .signatur strong {
    font-size: 1.5rem;
    font-weight: 500;
}

[data-design="modern"] .sinne__liste li::before {
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: 0.08em;
}

[data-design="modern"] .leistung__nummer {
    font-size: 0.85rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.24em;
}

[data-design="modern"] .karte__titel {
    font-size: 1.45rem;
}

[data-design="modern"] .system h3,
[data-design="modern"] .service h3,
[data-design="modern"] .wert h3,
[data-design="modern"] .sinne__liste h3,
[data-design="modern"] .ablauf__schritt h3 {
    font-size: 1.25rem;
    font-weight: 500;
}

[data-design="modern"] .partner__name {
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.16em;
}

[data-design="modern"] .kontaktweg__wert {
    font-size: 1.1rem;
    font-weight: 400;
}

[data-design="modern"] .consent__titel {
    font-size: 1.4rem;
    font-weight: 400;
}

[data-design="modern"] .lightbox__text {
    font-size: 1rem;
    letter-spacing: 0.02em;
}

[data-design="modern"] .fehlerseite__code {
    font-weight: 200;
}


/* 03 KOPF, LOGO, SIEGEL ==================================================== */
[data-design="modern"] .kopf {
    background: rgba(255, 255, 255, 0.92);
}

/* Logo in Dunkelgrau: Graustufen aus dem Dunkelrot ergeben fast exakt #484848 */
[data-design="modern"] .kopf__logo img,
[data-design="modern"] .siegel__logo {
    filter: grayscale(1);
}

[data-design="modern"] .siegel__band::before,
[data-design="modern"] .siegel__band::after {
    background: #454545;
}

[data-design="modern"] .kachelband::before,
[data-design="modern"] .kachelband::after {
    background: #484848;
}

[data-design="modern"] .kachelband--messing::before,
[data-design="modern"] .kachelband--messing::after {
    background: #9a9a9a;
}

[data-design="modern"] .sprungnav {
    background: rgba(232, 232, 229, 0.94);
}


/* 04 DUNKLE FLAECHEN – kuehler, Glut nur als Lichtschein ================== */
[data-design="modern"] .hero {
    background:
        radial-gradient(ellipse 50% 60% at 78% 60%, rgba(255, 122, 61, 0.2), transparent 70%),
        linear-gradient(160deg, #181818 0%, #0e0e0e 100%);
}

[data-design="modern"] .seitenkopf {
    background:
        radial-gradient(ellipse 45% 80% at 92% 100%, rgba(255, 122, 61, 0.16), transparent 70%),
        #121212;
}

[data-design="modern"] .kontaktband {
    background:
        radial-gradient(ellipse 55% 70% at 85% 100%, rgba(255, 122, 61, 0.13), transparent 70%),
        #1a1a1a;
}

[data-design="modern"] .hero__bild figcaption {
    background: rgba(14, 14, 14, 0.86);
    border-left-color: var(--c-glut-hell);
}


/* 05 FORMEN – klare Kanten statt Bogen und Kapseln ========================= */
[data-design="modern"] .bogen {
    border-radius: 0;
}

[data-design="modern"] .bogen-rahmen::before {
    inset: 18px -18px -18px 18px;
    border-color: rgba(234, 129, 80, 0.45);
    border-radius: 0;
}

[data-design="modern"] .leistung__bild--bogen .bogen-rahmen::before,
[data-design="modern"] .bildrahmen::after {
    border-color: rgba(184, 71, 27, 0.4);
}

[data-design="modern"] .unikate__mosaik figure:nth-child(1) {
    border-radius: 0;
}

[data-design="modern"] .knopf,
[data-design="modern"] .filter a,
[data-design="modern"] .materialien li,
[data-design="modern"] .regionen li,
[data-design="modern"] .sprungnav a {
    border-radius: 0;
}

[data-design="modern"] .knopf {
    letter-spacing: 0.14em;
}

[data-design="modern"] .ablauf__schritt::before {
    border-radius: 0;
    border-color: var(--c-text);
    font-weight: 300;
    color: var(--c-text);
}

[data-design="modern"] .sinne__signatur img {
    border-radius: 0;
}

[data-design="modern"] .system {
    border-top-color: var(--c-text);
}

[data-design="modern"] .karte:hover {
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.35);
}

[data-design="modern"] .regionen li.ist-heimat {
    background: var(--c-text);
    border-color: var(--c-text);
}

[data-design="modern"] .waerme__punkte i {
    border-radius: 0;
}