/* Website-Generator – Dunkelmodus (automatisch erzeugt aus app.css, nissa.css, chat.css, video.css) * Aktiv, wenn gesetzt ist (assets/dunkel.js: Geräte-Einstellung oder Knopf ☀/🌙). * Die Kunden-Website in der Vorschau (iframe) bleibt unverändert. */ html.dunkel { color-scheme: dark; --a: #4d8df0; --a2: #7aa9f5; --a-hell: #16233a; --bg: #111214; --karte: #1c1c1e; --text: #ececf0; --leise: #a1a1a6; --rand: #34353a; --ok: #34c759; --fehler: #ff6b6b; --n-grau: #c7ccd4; } html.dunkel body { background: var(--bg); color: var(--text); } html.dunkel body.editor-modus { --a: #0a84ff; --a2: #409cff; --a-hell: #0b2742; --rand: #38383a; --text: #f5f5f7; --leise: #a1a1a6; --bg: #000; } html.dunkel img, html.dunkel video, html.dunkel iframe { color-scheme: normal; } /* --- aus app.css --- */ html.dunkel .eingabe, html.dunkel .feld input[type=text], html.dunkel .feld input[type=email], html.dunkel .feld input[type=tel], html.dunkel .feld input[type=url], html.dunkel .feld input[type=number], html.dunkel .feld textarea, html.dunkel .feld select { background: #1c1c1c; } html.dunkel .feld.fehlt input { background: #291717; } html.dunkel .kachel { background: #1c1c1c; } html.dunkel .kachel:hover { border-color: #45597c; } html.dunkel .farbpunkt { border: 3px solid #3d3d3d; } html.dunkel .leistung { background: #1c1c1c; } html.dunkel .leistung .weg { background: #1c1c1c; } html.dunkel .chip { border: 1px dashed #455a7d; background: #1c1c1c; } html.dunkel .upload { background: #191d25; } html.dunkel .upload:hover { border-color: #45597c; } html.dunkel .vorschaubilder label { background: rgba(28,28,28,0.92); } html.dunkel .knopf--rand { background: #1c1c1c; } html.dunkel .meldung--fehler { background: #301b1b; color: #e58080; } html.dunkel .meldung--ok { background: #223527; color: #9fe3ae; } html.dunkel .kreis { border-top-color: #3d3d3d; } html.dunkel .geraete { background: #1c1c1c; } html.dunkel .rahmen { background: #2b3139; } html.dunkel .aktion { background: #1c1c1c; } html.dunkel .tabelle { background: #1c1c1c; } html.dunkel .tabelle th { background: #20242c; } html.dunkel .mini-knopf { background: #1c1c1c; } html.dunkel .import { border: 1px solid #333a47; } html.dunkel .mini-kreis { border: 3px solid #333a47; } html.dunkel .branche-suche .eingabe { background: #1c1c1c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235f6b7c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center; } html.dunkel .vs-kopf { background: #1c1c1c; } html.dunkel .vs-buehne { background: #262a32; } html.dunkel .fv { background: #191d25; } html.dunkel .fv-kopf { background: #1c1c1c; } html.dunkel .fv-raster input, html.dunkel .fv-raster select, html.dunkel .fv-raster textarea { background: #1c1c1c; } html.dunkel .vs-pfeil { background: #1c1c1c; } html.dunkel .meldung--hinweis { background: #352d1f; color: #ffcf85; } html.dunkel .paket { background: #1c1c1c; } html.dunkel .kennzahlen span { background: #1c1c1c; } html.dunkel .kennzahlen .warn { border-color: #906a32; background: #2e271b; } html.dunkel .warn { color: #ffb566; } html.dunkel .filter-leiste .chip { background: #1c1c1c; } html.dunkel .lead { background: #1c1c1c; } html.dunkel .mini-knopf--gruen { border-color: #37443a; color: #92e3a9; background: #1d2e21; } html.dunkel .einst select, html.dunkel .einst textarea { background: #1c1c1c; } html.dunkel .bereich { background: #1c1c1c; } html.dunkel .liste-zeile input, html.dunkel .liste-zeile textarea { background: #1c1c1c; } html.dunkel .lz-weg { background: #1c1c1c; } html.dunkel .fokus-knopf { background: rgba(28,28,28,0.92); } html.dunkel .fokus-inhalt { background: #1c1c1c; } html.dunkel .fokus-punkt { border: 3px solid #3d3d3d; } html.dunkel .pflicht { background: #352d1f; color: #ffcf85; } html.dunkel .pflicht small { color: #dbbf8a; } html.dunkel .live { background: #1c1c1c; } html.dunkel .live-leiste { background: #1c1c1c; } html.dunkel .live-seiten button:hover { background: #1e232c; } html.dunkel .live-geraete { background: #22262d; } html.dunkel .live-geraete button.aktiv { background: #1c1c1c; } html.dunkel .live-zu { background: #22262d; } html.dunkel .live-buehne { background: #262a31; } html.dunkel .live-rahmen { background: #1c1c1c; } html.dunkel .live-laedt { background: #1c1c1c; } html.dunkel .l-icon-wahl.auto { background: #1c2029; color: #aeb2b9; } html.dunkel .l-foto-wahl { border: 1px dashed #455a7d; background: #1c1c1c; } html.dunkel .wahl-inhalt { background: #1c1c1c; } html.dunkel .wahl-zu { background: #22262d; } html.dunkel .icon-raster button { background: #1c1c1c; } html.dunkel .branche-tipp { background: #322c1d; border: 1px solid #917730; } html.dunkel .zahl-weg { background: #1c1c1c; } html.dunkel .zahl-weg--online { background: linear-gradient(180deg, var(--a-hell), #1c1c1c 60%); } html.dunkel .kopier { background: #1c1c1c; } @media (min-width: 1100px) { html.dunkel .g-arbeit #branchen .kachel:hover { border-color: #455a7d; background: #161d26; } } html.dunkel .feld input.gesperrt { background: #1e232c; } html.dunkel .update-box { border: 2px solid #906a32; background: #2e271b; } html.dunkel .anrechnung { background: #223527; color: #9fe3ae; } html.dunkel .anrechnung small { color: #99cca4; } html.dunkel .wechsel-box { border: 2px solid #37443a; background: #1b2b1f; } html.dunkel .fortschritt-balken { background: #262b34; } html.dunkel .u-de div { background: #1e232c; } html.dunkel .u-neu input, html.dunkel .u-neu textarea { background: #1c1c1c; } html.dunkel .u-zeile.offen .u-neu input, html.dunkel .u-zeile.offen .u-neu textarea { border-color: #906a32; } html.dunkel .l-link-wahl { border: 1px dashed #455a7d; background: #1c1c1c; } html.dunkel .k-chip { background: #22262d; color: #c9cdd3; } html.dunkel .k-chip--ok { background: #223527; color: #9fe3ae; } html.dunkel .k-chip--offen { background: #352d1f; color: #ffcf85; } html.dunkel .mini-knopf { background: #1c1c1c; } html.dunkel .link-knopf { color: #de8787; } html.dunkel .k-rot { color: #de8787; border-color: #7b4646; } html.dunkel .liste-zeile select { background: #1c1c1c; } html.dunkel .lz-foto-weg { color: #de8787; } html.dunkel .bereich-wo { background: #1a212d; color: #7f9ae6; } html.dunkel .wo-zeigen { border: 1px solid #313949; background: #1c1c1c; color: #7595f0; } html.dunkel .nur-paket { background: #352d1f; color: #ffcf85; } html.dunkel .paket-entwurf { background: #223527; color: #9fe3ae; } html.dunkel .paket-entwurf--fehlt { background: #352d1f; color: #ffcf85; } html.dunkel .agentur-balken { background: #232933; } html.dunkel .live-bearbeiten { background: #1c1c1c; } html.dunkel .live-bearbeiten.aktiv { background: #1b2230; border-color: #325390; color: #7595f0; } html.dunkel .bearb-zeile .bearb-ab { background: #1c1c1c; } html.dunkel .bearb-link { color: #7595f0; } html.dunkel .bs-bau { border: 1px dashed #393c42; background: #161c26; } html.dunkel .bs-karte { background: #1c1c1c; } html.dunkel .bs-karte-kopf { background: #1c2029; } html.dunkel .bs-karte-knoepfe button { background: #1c1c1c; } html.dunkel .bs-bild-wahl { background: #1c1c1c; } html.dunkel .bs-item { background: #191d25; } html.dunkel .bs-item-weg { background: #1c1c1c; } html.dunkel .bs-typ { background: #1c1c1c; } html.dunkel .menue-zeile { background: #1c1c1c; } html.dunkel .menue-nr { background: #20252e; } html.dunkel .menue-zeile button { background: #1c1c1c; } html.dunkel .menue-zeile--unter { background: #191d25; } html.dunkel .menue-zeile--aus { background: #202226; } html.dunkel .menue-zeile .menue-aus { color: #f07e75; } html.dunkel .menue-zeile--aus .menue-aus { color: #86fcca; border-color: #467c5d; background: #1b3024; } html.dunkel .g-cookie { background: #1c1c1c; } html.dunkel .g-seite { background: #1c2029; } html.dunkel .g-formular { background: #1c1c1c; } html.dunkel .g-kontakt-info { background: #1c1c1c; } html.dunkel .g-vorlage { background: #1c1c1c; } html.dunkel .g-ansicht-kopf { background: #1c1c1c; } html.dunkel .g-ansicht-geraete button { background: #1c1c1c; } html.dunkel .g-ansicht-zu { background: #20252e; } html.dunkel .g-paket { background: #1c1c1c; } html.dunkel .referenz-frage { background: #302c1b; } html.dunkel .k-neu { background: #613838; } html.dunkel .an-inhalt a { background: #1c1c1c; } html.dunkel .g-anleitung code, html.dunkel .g-anleitung kbd { background: #20252e; } html.dunkel .g-anleitung kbd { border: 1px solid #383c42; background: #1c1c1c; } html.dunkel .l-seiten-wahl { background: #1c1c1c; } html.dunkel .express { background: linear-gradient(135deg, #1a212d 0%, #20192c 100%); border: 1px solid #31394a; } html.dunkel .express-blitz { background: #1c1c1c; } html.dunkel .express-felder .eingabe { background: #1c1c1c; } html.dunkel .express-willkommen { background: #1a2d20; border: 1px solid #31493a; } html.dunkel .ansicht-gross { border: 1px solid #333a48; background: #1a212d; color: #7595f0; } html.dunkel .ansicht-gross:hover { background: #1f2736; } html.dunkel .editor-an { border: 1px solid #383248; background: #20192c; } html.dunkel .editor-an:hover { background: #251e34; } html.dunkel .ed-gruppe { color: #b1b5bc; } html.dunkel body.editor-modus.ed-offen .assistent { background: #1c1c1c; } html.dunkel body.editor-modus .ed-popup-kopf { background: #1c1c1c; } html.dunkel .ed-popup-zu { background: #22262d; } html.dunkel .ed-popup-zu:hover { background: #292f37; } html.dunkel body.editor-modus .ed-popup-fuss { background: #1c1c1c; } html.dunkel body.editor-modus .ed-leiste { background: #222226; color: #e3e3e4; border-right: 1px solid #3c3c3e; } html.dunkel body.editor-modus .ed-leiste-kopf { border-bottom: 1px solid #3c3c3e; } html.dunkel body.editor-modus .ed-leiste-kopf strong { color: #e3e3e4; } html.dunkel body.editor-modus .ed-leiste-kopf span { color: #b9b9bb; } html.dunkel body.editor-modus .ed-werkzeug { color: #e3e3e4; } html.dunkel body.editor-modus .ed-werkzeug:hover { background: #2c2c31; } html.dunkel body.editor-modus .ed-zahl { background: #313135; color: #b9b9bb; } html.dunkel body.editor-modus .ed-leiste-unten { border-top: 1px solid #3c3c3e; } html.dunkel body.editor-modus .ed-klassisch { color: #b9b9bb; } html.dunkel body.editor-modus .ed-klassisch:hover { color: #66b2ff; } html.dunkel body.editor-modus .knopf--rand { background: #1c1c1c; color: #66b2ff; border-color: #3c3c3e; } html.dunkel body.editor-modus .knopf--rand:hover { background: #222226; color: #66b2ff; border-color: #3c3c3e; } html.dunkel body.editor-modus .assistent input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]), html.dunkel body.editor-modus .assistent textarea, html.dunkel body.editor-modus .assistent select { border: 1px solid #3c3c3e; background: #1c1c1c; } html.dunkel body.editor-modus .assistent details, html.dunkel body.editor-modus .assistent .karte { border-color: #3c3c3e; } html.dunkel body.editor-modus .ed-popup-kopf { background: #222226; border-bottom: 1px solid #3c3c3e; } html.dunkel body.editor-modus .ed-popup-zu { color: #b9b9bb; } html.dunkel body.editor-modus .ed-popup-zu:hover { background: #313135; color: #e3e3e4; } html.dunkel body.editor-modus .ed-popup-fuss { background: #1a1a23; border-top: 1px solid #3c3c3e; } @media (max-width: 860px) { html.dunkel body.editor-modus .ed-leiste { border-top: 1px solid #3c3c3e; } } /* --- aus nissa.css --- */ html.dunkel .g-kopf { background: #1c1c1c; } html.dunkel .g-marke { color: #f1f5f9; } /* Logo im dunklen Modus: zweite Version (eigenes Dunkel-Logo oder automatisch aufgehellte SVG) – sonst helles Schild */ html.dunkel .g-marke--zwei .g-logo-hell { display: none !important; } html.dunkel .g-marke--zwei .g-logo-dunkel { display: block !important; } html.dunkel body .g-marke--schild .g-marke-bild { background: #f8fafc; padding: 5px 10px; border-radius: 8px; box-shadow: none; } html.dunkel .knopf--rand { background: #1c1c1c; } html.dunkel .g-hero { background: radial-gradient(900px 420px at 85% -10%, rgba(37,99,235,.14), transparent 60%), radial-gradient(700px 380px at 0% 110%, rgba(99,102,241,.10), transparent 60%), linear-gradient(135deg, #1b2126 0%, #1a1f2d 100%); border-bottom: 1px solid #2e354c; } html.dunkel .g-hero h1 { color: #f1f5f9; } html.dunkel .g-hero p { color: #c1c5cc; } html.dunkel .frist-info { background: #1c1c1c; border: 1px solid #2f3b4c; } html.dunkel .frist-info strong { color: #f1f5f9; } html.dunkel body .g-video-knopf { background: #1c1c1c; border-color: #2f3b4c; color: #f1f5f9; } html.dunkel body .g-video-knopf:hover, html.dunkel body .g-video-knopf:focus-visible { background: #1c1c1c; border-color: #295e99; } html.dunkel body .g-video-text strong { color: #f1f5f9; } /* --- aus premium.css --- */ html.dunkel .chip { border-color: #403e3b; } html.dunkel body .vk-held h1 em { background: linear-gradient(95deg, var(--p-gold-hell), #443c27 60%, var(--p-gold)); } /* --- aus chat.css --- */ html.dunkel .wg-chat-knopf { background: linear-gradient(135deg, #34425b, var(--c-a) 55%, #3f3861); } html.dunkel .wg-chat-knopf:focus-visible { outline: 3px solid #3d3d3d; } html.dunkel .wg-chat-punkt { background: #613838; border: 2px solid #3d3d3d; } html.dunkel .wg-chat-panel { background: #1c1c1c; } html.dunkel .wg-chat-kopf { background: linear-gradient(135deg, #1e3a8a, var(--c-a) 70%, #34425b); } html.dunkel .wg-chat-status { background: #41474e; } html.dunkel .wg-chat-liste { background: #1a1f29; } html.dunkel .wg-chat-msg--admin .wg-chat-blase { background: #1c1c1c; } html.dunkel .wg-chat-form { background: #1c1c1c; } html.dunkel .wg-chat-zeile textarea { background: #1b2126; } html.dunkel .wg-chat-zeile textarea:focus, html.dunkel .wg-chat-gast input:focus { background: #1c1c1c; } html.dunkel .wg-chat-anhang:hover { background: #20252e; } html.dunkel .wg-chat-datei-weg { background: #20252e; } html.dunkel .wg-chat-fehler { color: #e77e7e; } /* --- aus video.css --- */ html.dunkel .g-video-knopf:hover, html.dunkel .g-video-knopf:focus-visible { border-color: rgba(61,61,61,0.4); } html.dunkel .g-video-play { background: #1c1c1c; } html.dunkel .g-video-play::after { border: 2px solid rgba(61,61,61,0.7); } /* --- aus vorlagen.css --- */ html.dunkel .vk-held h1 em { background: linear-gradient(95deg, #2c3b4c, #2e2745 50%, #482a3a); } html.dunkel .vk-suche:focus-within { border-color: #295e99; } html.dunkel .vk-schwebe { background: #1c1c1c; } html.dunkel .vk-schwebe-bild { background: #292f37; } html.dunkel .vk-schwebe .vk-leiste { background: #1e252c; } html.dunkel .vk-branche select { background: var(--karte, #1c1c1c); } html.dunkel .vk-filter button { background: var(--karte, #1c1c1c); } html.dunkel .vk-browser { background: var(--karte, #1c1c1c); } html.dunkel .vk-leiste { background: color-mix(in srgb, var(--bg) 60%, var(--karte, #1c1c1c)); } html.dunkel .vk-leiste i { background: #553131; } html.dunkel .vk-leiste span { background: var(--karte, #1c1c1c); } html.dunkel .vk-bild { background: linear-gradient(110deg, #21272e 30%, #1b2126 50%, #21272e 70%) 0 0 / 300% 100%; } html.dunkel .vk-knopf--hell { background: #1c1c1c; color: #d4ddf1; } html.dunkel .vk-abzeichen .vk-neu { background: linear-gradient(95deg, #f59e0b, #61384c); } html.dunkel .vk-abzeichen .vk-kat { color: color-mix(in srgb, var(--vk-farbe) 80%, #f2f2f2); } html.dunkel .vk-blaettern { background: var(--karte, #1c1c1c); } /* Handarbeit: Stellen, die die Automatik nicht treffen kann */ html.dunkel .farbpunkt { border-color: #1c1c1e; } html.dunkel ::placeholder { color: #6e6e73; } html.dunkel body.editor-modus .ed-leiste { background: #1c1c1e; color: #f5f5f7; border-color: #38383a; } html.dunkel body.editor-modus .ed-werkzeug:hover { background: #2c2c2e; } html.dunkel body.editor-modus .ed-werkzeug.aktiv { background: #0a84ff; color: #fff; } html.dunkel body.editor-modus .ed-sym { filter: grayscale(1) brightness(1.8); } html.dunkel body.editor-modus .ed-popup-kopf { background: #2c2c2e; border-color: #38383a; } html.dunkel body.editor-modus .ed-popup-fuss { background: #1c1c1e; border-color: #38383a; } html.dunkel body.editor-modus.ed-offen .assistent { background: #1c1c1e; border-color: rgba(255,255,255,.12); box-shadow: 0 22px 60px rgba(0,0,0,.6); } html.dunkel body.editor-modus.ed-offen .ed-schleier { background: rgba(0,0,0,.35); } html.dunkel body.editor-modus .knopf { background: #0a84ff; border-color: #0a84ff; color: #fff; } html.dunkel body.editor-modus .knopf:hover { background: #409cff; border-color: #409cff; } html.dunkel body.editor-modus .knopf--rand { background: #2c2c2e; color: #409cff; border-color: #48484a; } html.dunkel body.editor-modus .assistent input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]), html.dunkel body.editor-modus .assistent textarea, html.dunkel body.editor-modus .assistent select { background: #2c2c2e; border-color: #48484a; color: #f5f5f7; } html.dunkel .knopf { color: #fff; } html.dunkel .knopf--rand { color: var(--a2); } /* Umschalter ☀/🌙 */ .dunkel-knopf { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: 12px; padding: 0; border: 1px solid rgba(127,127,127,.35); border-radius: 6px; background: transparent; color: inherit; font-size: 1rem; line-height: 1; cursor: pointer; vertical-align: middle; } .dunkel-knopf:hover { background: rgba(127,127,127,.15); } .ed-leiste-unten .dunkel-knopf { width: 100%; height: auto; margin: 0; padding: 6px; border: 0; font-size: .82rem; color: #6e6e73; gap: 6px; } html.dunkel .ed-leiste-unten .dunkel-knopf { color: #a1a1a6; } @media (max-width: 860px) { .ed-leiste-unten .dunkel-knopf { width: 40px; font-size: 1rem; } .ed-leiste-unten .dunkel-knopf span { display: none; } }