/* Kerstens Kamine – Darstellung hell/dunkel (Inhaber 06.11.2026).
   Dunkel = <html data-theme="dark" class="dunkel nacht">, gesetzt vom Kopf-Skript in index.php und von
   assets/js/theme-manager.js (Modi System / Automatisch nach Sonnenstand / Hell / Dunkel).
   Layout, Markup und Inhalte bleiben unverändert: hier werden nur die Farb-Variablen aus site.css für den
   Dunkelmodus neu belegt und die Stellen nachgezogen, die in site.css feste helle Farben haben.
   Focus-Seiten sind immer dunkel (eigener Markenauftritt) und laden diese Datei nicht. */

/* ── Farb-Variablen ── (hell: Werte aus :root in site.css) */
:root {
  --karte: #ffffff;              /* Karten, Kacheln, Boxen */
  --karte-rand: var(--rand);
  --glut-schein: none;           /* warmer Schein um Orange-Akzente, nur im Dunkeln */
}
@media screen {
html[data-theme="dark"].nacht {
  --bg: #121316;                 /* Anthrazit / Gusseisengrau statt Schwarz */
  --karte: #1b1d22;
  --karte-rand: #2c3038;
  --text: #f3f4f6;
  --leise: #9ca3af;
  --sehr-leise: #7a818d;         /* noch ≥ 4,5:1 auf #121316 (Website-Check) */
  --fuellen-start: #6f7682;      /* Wort-Füll-Effekt: Startfarbe */
  --grau: #1b1d22;
  --grau-2: #23262c;
  --rand: #2c3038;
  --dunkel: #2f333b;             /* aktive Chips/Flächen mit weißer Schrift: heller als der Grund, Schrift bleibt lesbar */
  --glut: #ea6a2e;               /* Kamin-Orange minimal heller, damit es auf Anthrazit nicht absäuft */
  --glut-hell: #f5a640;
  --glut-schein: 0 0 12px rgba(249, 115, 22, .15);
  --schatten: 0 1px 2px rgba(0,0,0,.35), 0 12px 32px -12px rgba(0,0,0,.75);
  background: #0d0e10;           /* Fläche außerhalb der Seite auf sehr breiten Bildschirmen */
  color-scheme: dark;
}
html.nacht body { box-shadow: 0 0 0 1px rgba(255,255,255,.04); }

/* Knöpfe: Hauptknopf hell auf Anthrazit, Orange-Hover mit dezentem Schein */
.nacht .knopf-dunkel { --k-bg: #f3f4f6; --k-text: #121316; --k-hover: var(--glut); }
.nacht .knopf-hell { --k-bg: #f3f4f6; --k-text: #121316; }
.nacht .knopf:hover, .nacht .knopf:focus-visible { box-shadow: var(--glut-schein); }
.nacht .rund-knopf:hover { background: #f3f4f6; color: #121316; border-color: #f3f4f6; }

/* ── Kopfzeile: dunkles Glas ── */
.nacht .kopf:not(.kopf-focus) {
  --glas: rgba(22,23,27,.55); --glas-rand: rgba(255,255,255,.12); --glas-glanz: rgba(255,255,255,.14);
  color: var(--text);
  background: linear-gradient(180deg, rgba(31,33,38,.74) 0%, rgba(18,19,22,.62) 55%, rgba(25,27,31,.70) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(255,255,255,.05),
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 1px 0 rgba(0,0,0,.2), 0 18px 44px -18px rgba(0,0,0,.75);
  -webkit-backdrop-filter: blur(16px) saturate(1.4) brightness(.9);
  backdrop-filter: url(#glas-brechung) blur(14px) saturate(1.4) brightness(.9);
}
.nacht .kopf:not(.kopf-focus).ueber-dunkel { background: linear-gradient(180deg, rgba(26,28,32,.86) 0%, rgba(16,17,20,.78) 55%, rgba(22,23,27,.82) 100%); }
.nacht .kopf:not(.kopf-focus)::before { background: linear-gradient(112deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 78%, rgba(255,255,255,.05) 100%); }
.nacht .kopf:not(.kopf-focus)::after { box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.nacht .nav-licht { background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px -10px rgba(0,0,0,.6); }
.nacht .kopf .pille { color: #e5e7eb; text-shadow: none; }
.nacht .kopf .pille:hover, .nacht .kopf .pille[aria-current="page"] { color: #fff; }
.nacht .kopf .pille-focus img, .nacht .pille-focus img { filter: brightness(0) invert(1); }
.nacht .kopf:not(.kopf-focus) .knopf-klein { --k-bg: rgba(243,244,246,.95); --k-text: #121316; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 16px -8px rgba(0,0,0,.6); }
.nacht .kopf:not(.kopf-focus) .menue-knopf,
.nacht .kopf:not(.kopf-focus) .suche-knopf { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); color: var(--text); }
@media (max-width: 1100px) {
  .nacht .kopf:not(.kopf-focus), .nacht .kopf:not(.kopf-focus).ueber-dunkel { background: #1b1d22; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 10px 28px -14px rgba(0,0,0,.8); }
}

/* ── Logo und Bilder ── */
/* eigenes Logo: helle Fassung (gleiche Datei wie auf den Focus-Seiten) */
.nacht .marke img.logo-dunkel { content: url("/assets/img/logo-hell.png"); }
/* Logo mit lebender Flamme (logo-flamme.js, Farben fest im Skript): Schrift weiß wie logo-hell.png, K etwas heller */
.nacht .logo-svg path[fill="#3e3d3c"] { fill: #fff; }
.nacht .logo-svg path[fill="#6f6140"] { fill: #8c7b55; }
.nacht .menue-liste .menue-logo { filter: brightness(0) invert(1); }
/* Herstellerlogos: eigene helle Fassungen (Schrift hell, Markenfarben bleiben), Tausch per nacht-logos.css –
   erzeugt von tools/website_logos_dunkel.py. Deshalb stehen sie im Dunkeln auf dunklen Karten statt auf Weiß. */
.nacht .marken-raster li, .nacht .mf-logo { background: var(--karte); border-color: var(--karte-rand); }
.nacht .marke-logo img, .nacht .marken-raster img, .nacht .mf-logo img { mix-blend-mode: normal; }
/* Logos ohne eigene helle Fassung (Modellseiten: Logos aus dem Serviceportal/Herstellerdateien, Zahlungsarten, 369):
   auf leicht abgetönter heller Karte, damit die Markenfarben stimmen */
.nacht .modell-marke-logo, .nacht .modell-marken-logo img { background: #fff; opacity: .95; padding: 8px 12px; border-radius: 6px; box-sizing: content-box; }
.nacht .logo-369, .nacht .zahl-abzeichen { background: #fff; border-color: transparent; opacity: .95; }
/* Bleistiftskizzen (Zeichnung auf weißem Papier): im Dunkeln umgekehrt – helle Striche auf dem Anthrazit, ohne weiße Fläche */
/* (Mischmodus am <figure>, weil die Figur durch Deckkraft/Parallaxe eine eigene Ebene bildet – am <img> greift er dort nicht) */
.nacht .ablauf-skizze, .nacht .stimmen-skizze, .nacht .wartung-skizze { mix-blend-mode: screen; }
.nacht .ablauf-skizze img, .nacht .stimmen-skizze img, .nacht .wartung-skizze img { filter: invert(1) hue-rotate(180deg); }
/* einfarbige Logos frei auf dunklem Grund: Klasse .partner-logo-mono ans <img> setzen */
[data-theme="dark"] .partner-logo-mono { filter: brightness(0) invert(1) opacity(.85); }
/* Produktfotos sind freigestellt auf Weiß: bleiben auf hellem Grund, nur ohne grellen Rand */
.nacht .finder-bild, .nacht .modell-bild, .nacht .modell-daumen button, .nacht .shop-zub-bild, .nacht .ersatzteile-bild { border-color: transparent; }
/* Visitenkarte (Startseite) bleibt eine weiße Papierkarte mit dunkler Schrift */
.nacht .visitenkarte { --text: #151413; --leise: #57534e; --rand: #e4e2dd; color: #151413; }

/* ── Sprachwahl ── */
.nacht .sprachwahl { background: rgba(255,255,255,.05); }
.nacht .sprachwahl-auswahl summary { color: #e5e7eb; }
.nacht .sprachwahl-auswahl summary:hover, .nacht .sprachwahl-auswahl[open] summary { background: rgba(255,255,255,.1); }
.nacht .sprachwahl-liste { background: rgba(27,29,34,.97); border-color: var(--karte-rand); box-shadow: 0 18px 40px -14px rgba(0,0,0,.8); }
.nacht .sprachwahl-liste a:hover { background: rgba(255,255,255,.08); }
.nacht .sprachwahl-liste a[aria-current] { background: #f3f4f6; color: #121316; }
.nacht .sprachwahl-liste a[aria-current] b { color: #6b7280; }

/* ── Cookie-Hinweis, Suche ── */
.nacht .einwilligung { background: rgba(27,29,34,.96); box-shadow: 0 24px 60px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px var(--karte-rand); }
.nacht .suche-schleier { background: rgba(0,0,0,.6); }
.nacht .suche-karte { background: var(--karte); }

/* ── Formulare ── */
.nacht .feld input, .nacht .feld select, .nacht .feld textarea { background-color: var(--karte); border-color: var(--karte-rand); color: var(--text); }
.nacht .feld input:focus, .nacht .feld select:focus, .nacht .feld textarea:focus { background-color: #16171b; border-color: var(--leise); }
.nacht .feld-dunkel input { background: var(--karte); }
.nacht .cl-block .feld input, .nacht .cl-block .feld textarea,
.nacht .fb-werte input, .nacht .rr-wahl select, .nacht .finder-filter-feld select { background-color: var(--karte); color: var(--text); border-color: var(--karte-rand); }
.nacht ::placeholder { color: var(--sehr-leise); }

/* ── Hinweis-Kästen (Entwurf, Fehler, Erfolg) ── */
.nacht .faq-entwurf summary::after, .nacht .entwurf-hinweis, .nacht .termin-annahme.fehler { background: #3a2212; color: #f6b08a; }
.nacht .termin-annahme, .nacht .termin-auswahl.fertig { background: #13281c; color: #9fdcb2; }
.nacht .upload-liste .ok, .nacht .formular-meldung.ok { color: #6fd08f; }
.nacht .shop-testband { background: #3a2f0c; color: #f3d37a; }
.nacht .raten-hinweis { background: #33260f; border-color: #5c4519; color: #f1d9a8; }
.nacht .raten-rechner { background: var(--karte); border-color: #5c4519; }
.nacht .finder-tipp { background: #2a1a10; border-color: rgba(234,106,46,.35); }

/* ── Terminkalender ── */
.nacht .kal-tag, .nacht .zeit-chip, .nacht .cl-option span { background: var(--karte); border-color: var(--karte-rand); }
.nacht .kal-tag.frei { background: #13241a; border-color: #2c5a3a; }
.nacht .kal-tag.kurz { background: #2a1a10; border-color: #5b3420; }
.nacht .termin-kurzfristig, .nacht .termin-nur-beratung p { background: #2a1a10; border-color: #5b3420; color: #f3c7ab; }
.nacht .cl-option input:checked + span { background: #f3f4f6; border-color: #f3f4f6; color: #121316; }

/* ── Ofen-Finder ── */
.nacht .finder-schritte li::before, .nacht .finder-chip::before { background: var(--grau-2); }
.nacht .finder-karte:has(:checked), .nacht .finder-chip:has(:checked) { background: #2a1a10; box-shadow: 0 0 0 4px rgba(234,106,46,.14), var(--glut-schein); }
.nacht .fb-regler input[type=range]::-webkit-slider-thumb { background: #f3f4f6; }
.nacht .fb-regler input[type=range]::-moz-range-thumb { background: #f3f4f6; }
.nacht .finder-filter { background: var(--karte); border-color: var(--karte-rand); }

/* ── Reiter, Prospekteschrank, Sonstiges ── */
.nacht .reiter-knopf[aria-selected="true"] { background: #f3f4f6; color: #121316; border-color: #f3f4f6; }
.nacht .fr-gross-zu { background: #f3f4f6; }
.nacht .schrank-rahmen, .nacht .schrank-lade { background: #1b1d22; }
.nacht .schrank-lade-karte { background: rgba(27,29,34,.92); }
.nacht .dunkel .fuss-wort, .nacht .fuss-wort { color: #1b1d22; }

/* ── Schalter in der Kopfzeile (ein Knopf + kleines Menü) ── */
.ansicht { position: relative; display: grid; }
.ansicht-knopf { display: grid; place-items: center; width: 44px; padding: 0 !important; border: 0; cursor: pointer; font: inherit; }
.ansicht-knopf svg, .ansicht-liste svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ansicht-knopf .sonne, .nacht .ansicht-knopf .mond { display: none; }
.nacht .ansicht-knopf .sonne { display: block; }
.ansicht-liste { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; min-width: 270px; padding: 6px; border-radius: 16px; display: grid; gap: 2px;
  background: rgba(255,255,255,.97); border: 1px solid var(--rand); box-shadow: 0 18px 40px -14px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); animation: sprachwahl-auf .2s var(--weich); }
.ansicht-liste[hidden] { display: none; }
.ansicht-liste button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 0; border-radius: 11px; background: none; color: var(--text); font: inherit; font-size: 15px; text-align: left; cursor: pointer; transition: background .2s; }
.ansicht-liste button:hover, .ansicht-liste button:focus-visible { background: rgba(0,0,0,.05); outline: none; }
.ansicht-liste button svg { flex: none; opacity: .75; }
.ansicht-liste button span { display: grid; }
.ansicht-liste small { font-size: 12px; color: var(--leise); }
.ansicht-liste small:empty { display: none; }
.ansicht-liste button[aria-checked="true"] { background: var(--dunkel); color: #fff; }
.ansicht-liste button[aria-checked="true"] small { color: rgba(255,255,255,.7); }
.nacht .ansicht-liste { background: rgba(27,29,34,.97); border-color: var(--karte-rand); box-shadow: 0 18px 40px -14px rgba(0,0,0,.8); }
.nacht .ansicht-liste button:hover, .nacht .ansicht-liste button:focus-visible { background: rgba(255,255,255,.08); }
.nacht .ansicht-liste button[aria-checked="true"] { background: #f3f4f6; color: #121316; }
.nacht .ansicht-liste button[aria-checked="true"] small { color: #4b5563; }
@media (max-width: 1100px) { .nav-rechts .ansicht { display: none; } }   /* Handy/Tablet: Sprache und Darstellung stehen im Menü */
/* Einstellungs-Knopf: Sprache + Darstellung in einem Menü (Inhaber 06.11.2026) */
.einstellungen-titel { margin: 8px 12px 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.einstellungen-titel:first-child { margin-top: 4px; }
.ansicht-liste .sprachwahl-einstellungen { display: flex; margin: 0 6px 6px; background: none; }
.sprachwahl-einstellungen a { flex: 1; text-align: center; font-size: 13px; padding: 7px 8px; }
.einstellungen-modi { display: grid; gap: 2px; }
.nacht .sprachwahl a[aria-current] { background: #f3f4f6; color: #121316; }

/* ── Auswahl im Handy-Menü ── */
.ansicht-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 4px 4px 0; color: var(--text); font-size: 15px; }
.ansicht-segmente { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--rand); }
.ansicht-segmente button { padding: 7px 12px; border: 0; border-radius: 999px; background: none; color: var(--leise); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background .3s, color .3s; }
.ansicht-segmente button[aria-checked="true"] { background: var(--dunkel); color: #fff; }
.nacht .ansicht-segmente button[aria-checked="true"] { background: #f3f4f6; color: #121316; }
}

/* Sanfter Farbwechsel beim Umschalten (nur dann, nicht beim Laden und nicht bei jedem Hover) */
html.ansicht-wechsel, html.ansicht-wechsel *, html.ansicht-wechsel *::before, html.ansicht-wechsel *::after {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease !important;
}
@media (prefers-reduced-motion: reduce) { html.ansicht-wechsel * { transition: none !important; } }