/* ========================================================================== BIMschmiede – Dark Mode Schalter: . Gesetzt wird er vom Inline-Skript im (verhindert Aufblitzen) und vom Umschalter unten rechts. Grundsatz: die Website ist hell gebaut; hier werden gezielt die Flächen, Texte und Kanten umgestellt – keine pauschale Filter-Invertierung. ========================================================================== */ /* ---------- Farbwerte ---------- */ :root{ --bsdm-bg:#ffffff; --bsdm-bg2:#f6f7f8; --bsdm-card:#ffffff; --bsdm-ink:#1D232B; --bsdm-sub:#767676; --bsdm-line:#e8eaed; } html[data-theme="dark"]{ --bsdm-bg:#12161b; --bsdm-bg2:#171c22; --bsdm-card:#1a2027; --bsdm-ink:#e9ecef; --bsdm-sub:#9aa3ad; --bsdm-line:rgba(255,255,255,.13); color-scheme:dark; } /* ---------- Grundflächen des Themes ---------- */ html[data-theme="dark"] body{background:var(--bsdm-bg);color:var(--bsdm-ink)} /* Theme-Rahmen: main.content und der Seiten-Wrapper stehen fest auf Weiß */ html[data-theme="dark"] main.content, html[data-theme="dark"] main, html[data-theme="dark"] body > div:not([class]), html[data-theme="dark"] #wrap, html[data-theme="dark"] .lqd-page-wrap{background-color:var(--bsdm-bg) !important} html[data-theme="dark"] .site-content, html[data-theme="dark"] .content-area, html[data-theme="dark"] .elementor, html[data-theme="dark"] .elementor-section, html[data-theme="dark"] .elementor-container, html[data-theme="dark"] .elementor-widget-container, html[data-theme="dark"] .main-header, html[data-theme="dark"] .lqd-head-sec-wrap, html[data-theme="dark"] header, html[data-theme="dark"] footer{background-color:transparent} html[data-theme="dark"] .elementor-section[style*="background-color: #FFFFFF"], html[data-theme="dark"] .elementor-section[style*="background-color:#fff"], html[data-theme="dark"] .elementor-element[style*="background-color: #FFFFFF"]{ background-color:var(--bsdm-bg) !important} /* Überschriften, Fließtext, Links */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-theme="dark"] .elementor-heading-title, html[data-theme="dark"] strong, html[data-theme="dark"] b{color:var(--bsdm-ink)} html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] span, html[data-theme="dark"] figcaption{color:var(--bsdm-sub)} html[data-theme="dark"] a{color:var(--bsdm-ink)} /* Theme-Elemente mit fest gesetztem Schwarz */ html[data-theme="dark"] .ld-fh-element, html[data-theme="dark"] .lqd-cc-solid-txt-inner, html[data-theme="dark"] .btn-txt, html[data-theme="dark"] .text-outline, html[data-theme="dark"] label, html[data-theme="dark"] .wpcf7 label, html[data-theme="dark"] .lqd-scrl-indc-txt{color:var(--bsdm-ink) !important} html[data-theme="dark"] .wpcf7 input[type=text], html[data-theme="dark"] .wpcf7 input[type=email], html[data-theme="dark"] .wpcf7 textarea{ background:var(--bsdm-card);border-color:var(--bsdm-line);color:var(--bsdm-ink)} html[data-theme="dark"] hr{border-color:var(--bsdm-line)} /* Kopf- und Fußbereich */ /* Handy-Kopf: das Theme setzt hier fest #f6f6f6 – auf dieser hellen Leiste verschwanden das hell gedrehte Logo und die Burger-Striche. */ html[data-theme="dark"] .lqd-mobile-sec-inner, html[data-theme="dark"] .navbar-header{ background:var(--bsdm-bg) !important;border-bottom:1px solid var(--bsdm-line)} /* Aufgeklapptes Handy-Menue: etwas heller als der Seitengrund, damit es als Overlay erkennbar bleibt und nicht mit der Seite darunter verschwimmt. */ html[data-theme="dark"] .navbar-collapse-inner, html[data-theme="dark"] .lqd-mobile-sec-nav{ background-color:var(--bsdm-card); box-shadow:0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08)} html[data-theme="dark"] .main-header .lqd-head-sec-wrap.is-stuck, html[data-theme="dark"] [data-sticky-header] .is-stuck{ background:rgba(18,22,27,.92) !important;backdrop-filter:blur(10px)} html[data-theme="dark"] .navbar-brand img, html[data-theme="dark"] .logo-default, html[data-theme="dark"] .logo-light{ /* Die Bildmarke ist nur 50x65 px und besteht fast nur aus Haarlinien. Reines Weiss plus ein halbes Pixel Schein gibt ihr auf Dunkel wieder Substanz. */ filter:brightness(0) invert(1) drop-shadow(0 0 .6px rgba(255,255,255,.9))} html[data-theme="dark"] .lqd-custom-menu a, html[data-theme="dark"] .main-nav a, html[data-theme="dark"] .nav-trigger, html[data-theme="dark"] .lqd-menu-btn-icon{color:var(--bsdm-ink)} /* Die Punkte der Kopfnavigation stehen im Theme fest auf Schwarz bzw. 67 % Schwarz – auf dem dunklen Kopf waren sie damit praktisch unsichtbar (1,2:1 gemessen). Der aktive Punkt eines Untermenues ebenso. */ html[data-theme="dark"] .main-header .main-nav a, html[data-theme="dark"] .main-header .main-nav a > *, html[data-theme="dark"] .main-header .nav-item-children a, html[data-theme="dark"] .main-header .lqd-menu-link-text{color:var(--bsdm-ink) !important} html[data-theme="dark"] .main-header .main-nav .link-sep, html[data-theme="dark"] .main-header .submenu-expander{color:var(--bsdm-sub) !important} html[data-theme="dark"] .sub-menu, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .lqd-submenu{ background:var(--bsdm-card) !important;border-color:var(--bsdm-line) !important; box-shadow:0 20px 50px rgba(0,0,0,.5) !important} /* Das Ausklappmenue im Kopf malt seine weisse Flaeche in einem ::before – die Liste selbst ist durchsichtig. Etwas heller als der Seitengrund, damit sich das Overlay abhebt, dazu eine feine Kante. */ html[data-theme="dark"] .nav-item-children:before{ background:var(--bsdm-card) !important; box-shadow:0 20px 50px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.10) !important} /* Seitenmenue hinter dem runden Burger (ld_header_sidedrawer). */ html[data-theme="dark"] .ld-module-dropdown{ background-color:var(--bsdm-card) !important; box-shadow:0 0 70px rgba(0,0,0,.6), inset -1px 0 0 rgba(255,255,255,.10)} html[data-theme="dark"] .ld-sd-wrap, html[data-theme="dark"] .ld-sd-inner{background-color:transparent} /* Die Menuepunkte im Seitenmenue stehen fest auf Grau (#646464) bzw. 51 % Schwarz – auf der dunklen Flaeche waren sie nicht mehr zu lesen. ul.inline-nav = die kleine Werkzeugzeile darueber, bleibt zweitrangig. */ html[data-theme="dark"] .ld-module-dropdown a{color:var(--bsdm-ink) !important} html[data-theme="dark"] .ld-module-dropdown .inline-nav a{color:var(--bsdm-sub) !important} html[data-theme="dark"] .ld-module-dropdown a:hover, html[data-theme="dark"] .ld-module-dropdown .inline-nav a:hover{color:#fff !important} html[data-theme="dark"] .lqd-module-backdrop{background-color:rgba(0,0,0,.45)} /* Pfeile des Hero-Sliders: einzige verbliebene weisse Flaeche im dunklen Kopf. */ html[data-theme="dark"] .lqd-asym-slider-arrow{ background:var(--bsdm-card) !important;color:var(--bsdm-ink); box-shadow:inset 0 0 0 1px var(--bsdm-line)} html[data-theme="dark"] .lqd-asym-slider-arrow svg, html[data-theme="dark"] .lqd-asym-slider-arrow path{stroke:currentColor;fill:currentColor} html[data-theme="dark"] .lqd-asym-slider-arrow:hover{background:#232a33 !important} /* Bilder etwas beruhigen, Screenshots nicht verfälschen */ html[data-theme="dark"] .elementor-widget-image img, html[data-theme="dark"] figure img{filter:brightness(.90) contrast(1.02)} /* ========================================================================== Eigene Sektionen (alles mit einer bs-Klasse: bs-pm, bs-lst, bs-fg, bs-mv …) Sie arbeiten alle mit denselben vier Variablen – einmal umgestellt, ziehen Texte, Kanten und Karten nach. Der Attribut-Selektor erfasst auch neue Produktseiten, ohne dass diese Datei nachgepflegt werden muss. ========================================================================== */ html[data-theme="dark"] [class*="bs-"], html[data-theme="dark"] .bs3d{ --ink:#e9ecef; --sub:#a6aeb8; --line:rgba(255,255,255,.14); --soft:#1a2027; /* eine Stufe kräftiger als --sub/--line – im Hellen dunkler, im Dunklen heller */ --stift:#a6aeb8; --kante:rgba(255,255,255,.22)} html[data-theme="dark"] [class*="bs-"]{color:var(--ink)} /* --- Flächen, die im hellen Design fest auf Weiß stehen --- */ html[data-theme="dark"] [class*="bs-"] .card, html[data-theme="dark"] [class*="bs-"] .box, html[data-theme="dark"] [class*="bs-"] .panel, html[data-theme="dark"] [class*="bs-"] .pane, html[data-theme="dark"] [class*="bs-"] .sheet, html[data-theme="dark"] [class*="bs-"] .step, html[data-theme="dark"] [class*="bs-"] .steps li, html[data-theme="dark"] [class*="bs-"] .detail, html[data-theme="dark"] [class*="bs-"] .tree, html[data-theme="dark"] [class*="bs-"] .antwort, html[data-theme="dark"] [class*="bs-"] .frame, html[data-theme="dark"] [class*="bs-"] .tabs, html[data-theme="dark"] [class*="bs-"] .chip, html[data-theme="dark"] [class*="bs-"] .q, html[data-theme="dark"] [class*="bs-"] .ph, html[data-theme="dark"] [class*="bs-"] .col, html[data-theme="dark"] [class*="bs-"] details, html[data-theme="dark"] [class*="bs-"] input, html[data-theme="dark"] [class*="bs-"] select, html[data-theme="dark"] [class*="bs-"] textarea{ background:var(--bsdm-card);border-color:var(--bsdm-line);color:var(--bsdm-ink)} html[data-theme="dark"] .bs-proz .card{background:rgba(26,32,39,.88)} html[data-theme="dark"] [class*="bs-"] .card p, html[data-theme="dark"] [class*="bs-"] .step p, html[data-theme="dark"] [class*="bs-"] .steps li span, html[data-theme="dark"] [class*="bs-"] .antwort p, html[data-theme="dark"] [class*="bs-"] .antwort li, html[data-theme="dark"] [class*="bs-"] figcaption{color:var(--bsdm-sub)} /* --- Ruhige Zweitflächen (Hinweise, Fußnoten, Statuszeilen) --- */ html[data-theme="dark"] [class*="bs-"] .note, html[data-theme="dark"] [class*="bs-"] .status, html[data-theme="dark"] [class*="bs-"] .report, html[data-theme="dark"] [class*="bs-"] .hint{ background:#232a33;color:#a6aeb8;border-color:var(--bsdm-line)} /* --- Sektionen mit hell gesetztem Inline-Hintergrund (z. B. „Funktionen") --- */ html[data-theme="dark"] [class*="bs-"] section[style*="background"], html[data-theme="dark"] [class*="bs-"] div[style*="background:#f6f7f8"], html[data-theme="dark"] [class*="bs-"] div[style*="background: #f6f7f8"]{ background:#171c22 !important} /* --- Umgekehrter Fall: Flächen, die var(--ink) als HINTERGRUND nutzen. Im dunklen Modus ist --ink hell, deshalb hier feste dunkle Werte. --- */ html[data-theme="dark"] [class*="bs-"] .dark, html[data-theme="dark"] [class*="bs-"] .term, html[data-theme="dark"] [class*="bs-"] .quote{ background:#0d1116;border:1px solid var(--bsdm-line);color:#e9ecef} html[data-theme="dark"] .bs-auto .term{box-shadow:0 24px 60px rgba(0,0,0,.5)} html[data-theme="dark"] .bs-plan .wipe{background:#e9ecef} html[data-theme="dark"] .bs-plan .wipe b{background:#e9ecef;color:#12161b} /* --- Aktive/ausgewählte Zustände: heller Knopf, dunkle Schrift --- */ html[data-theme="dark"] [class*="bs-"] .chip.on, html[data-theme="dark"] [class*="bs-"] .tab.on, html[data-theme="dark"] [class*="bs-"] .ph.on, html[data-theme="dark"] [class*="bs-"] .pill.done, html[data-theme="dark"] [class*="bs-"] .b-pflicht, html[data-theme="dark"] [class*="bs-"] .btn, html[data-theme="dark"] [class*="bs-"] .btn-dark, html[data-theme="dark"] [class*="bs-"] .btn-light, html[data-theme="dark"] [class*="bs-"] button.btn{ background:#e9ecef;border-color:#e9ecef;color:#12161b} html[data-theme="dark"] [class*="bs-"] .chip.on *, html[data-theme="dark"] [class*="bs-"] .ph.on *, html[data-theme="dark"] [class*="bs-"] .btn *, html[data-theme="dark"] [class*="bs-"] .btn-light *{color:#12161b} html[data-theme="dark"] [class*="bs-"] .btn:hover, html[data-theme="dark"] [class*="bs-"] .btn-dark:hover, html[data-theme="dark"] [class*="bs-"] .btn-light:hover{background:#fff;color:#12161b} html[data-theme="dark"] [class*="bs-"] .btn[disabled]{background:#39424e;color:#c8cfd8} html[data-theme="dark"] [class*="bs-"] .btn-line, html[data-theme="dark"] [class*="bs-"] .btn-ghost{ background:transparent;border-color:#e9ecef;color:#e9ecef} html[data-theme="dark"] [class*="bs-"] .btn-line:hover, html[data-theme="dark"] [class*="bs-"] .btn-ghost:hover{background:#e9ecef;color:#12161b} /* --- Tabellen: das Theme streift Zeilen hell --- */ html[data-theme="dark"] [class*="bs-"] table, html[data-theme="dark"] [class*="bs-"] table tr, html[data-theme="dark"] [class*="bs-"] table tr:nth-child(2n), html[data-theme="dark"] [class*="bs-"] table th, html[data-theme="dark"] [class*="bs-"] table td{ background:transparent;border-color:rgba(255,255,255,.10);color:var(--bsdm-ink)} html[data-theme="dark"] [class*="bs-"] table th{color:#9aa3ad} /* --- Einzelfälle --- */ html[data-theme="dark"] .bs-demo .b-auto{background:#232a33;border-color:var(--bsdm-line);color:#e9ecef} html[data-theme="dark"] .bs-din .hit{background:#3a4553;color:#fff} html[data-theme="dark"] .bs-din .l3:hover, html[data-theme="dark"] .bs-din summary:hover{background:#232a33} html[data-theme="dark"] [class*="bs-"] .tag{border-color:var(--bsdm-line);color:#a6aeb8} html[data-theme="dark"] [class*="bs-"] .tag b{color:#e9ecef} /* Planzeichnungen bleiben bewusst Papier – Text darin dunkel lassen */ html[data-theme="dark"] .bs-plan .sheet svg text{fill:#1D232B} html[data-theme="dark"] .bs-plan .sheet{background:#f2f4f6} html[data-theme="dark"] .bs-plan .sheet .hint{background:#e6e9ec;color:#5d646c} /* Schwebende Navigation */ html[data-theme="dark"] .bs-zsm-nav{background:rgba(26,32,39,.95);border-color:var(--bsdm-line); box-shadow:0 14px 40px rgba(0,0,0,.5)} html[data-theme="dark"] .bs-zsm-nav a{color:#e9ecef} html[data-theme="dark"] .bs-zsm-nav a:hover{background:#232a33} html[data-theme="dark"] .bs-zsm-nav a.act{background:#e9ecef;color:#12161b} /* Scroll-Animation */ html[data-theme="dark"] .bs3d-stage{ background:linear-gradient(180deg,#12161b 0%,#151a20 60%,#181e25 100%)} html[data-theme="dark"] .bs3d-phases{background:rgba(26,32,39,.92);border-color:var(--bsdm-line)} html[data-theme="dark"] .bs3d-phase{color:rgba(233,236,239,.55)} html[data-theme="dark"] .bs3d-phase.on{background:#e9ecef;color:#12161b} html[data-theme="dark"] .bs3d-phase.on *{color:#12161b} html[data-theme="dark"] .bs3d-num span{color:rgba(233,236,239,.28)} html[data-theme="dark"] .bs3d-num span.on{color:#e9ecef} html[data-theme="dark"] .bs3d-bullets li{color:#a6aeb8} html[data-theme="dark"] .bs3d-prog{background:rgba(255,255,255,.12)} /* Hochformat: die weißen Verlaufsstreifen unter dem Modell mitdunkeln. */ @media (max-width:900px){ html[data-theme="dark"] .bs3d-side, html[data-theme="dark"] .bs3d-cap{ background:linear-gradient(180deg,rgba(18,22,27,0) 0%,rgba(18,22,27,.84) 14%,rgba(18,22,27,.95) 100%)} } /* ========================================================================== Umschalter Tag / Nacht – ein kleiner Himmel als Schalter. Tag: blauer Himmel, Sonne mit Strahlen, zwei Wolken. Nacht: tiefblauer Himmel, Mondsichel, funkelnde Sterne. ========================================================================== */ .bsdm{position:relative;flex:0 0 auto;align-self:center;margin:0 18px 0 4px; width:78px;height:38px; padding:0;border:none;border-radius:999px;cursor:pointer;overflow:hidden; -webkit-tap-highlight-color:transparent; box-shadow:0 8px 26px rgba(29,35,43,.28), inset 0 0 0 1px rgba(255,255,255,.35); background:linear-gradient(180deg,#7fc4f2 0%,#b8e0f8 100%); transition:background .55s ease, box-shadow .45s ease} html[data-theme="dark"] .bsdm{ background:linear-gradient(180deg,#141c33 0%,#26325a 100%); box-shadow:0 8px 26px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.14)} .bsdm:focus-visible{outline:2px solid #E85D26;outline-offset:3px} .bsdm{pointer-events:auto} /* .main-header steht auf pointer-events:none */ .bsdm:hover{transform:translateY(-1px)} /* Fallback, falls in keinem Kopf ein Platz gefunden wurde */ .bsdm--fest{position:fixed;right:96px;bottom:26px;z-index:9990;margin:0} /* Handy-Kopf: das Theme gibt jedem Kind 33,33 % Breite (.lqd-mobile-sec .navbar-header > *, Spezifitaet 0-2-1) und schickt den Burger per order:3 nach rechts. Der Schalter braucht deshalb eine staerkere Regel – sonst wird er auf Produktseiten quer gezogen – und rueckt direkt neben den Burger. */ .lqd-mobile-sec .navbar-header > .bsdm, .lqd-mobile-sec-inner > .bsdm{order:2;flex:0 0 auto;width:66px;height:33px; margin:0 8px 0 auto} /* Der Burger belegt ein Drittel der Leiste, sein Symbol sitzt aber ganz rechts. Damit der Schalter nicht in dieser leeren Tastflaeche endet, bekommt der Burger die Breite seines Symbols – die Tastflaeche bleibt bei 56 px. */ .lqd-mobile-sec .navbar-header > .nav-trigger, .lqd-mobile-sec-inner > .nav-trigger{width:auto;min-width:56px} /* Sonne / Mond */ .bsdm-orb{position:absolute;top:6px;left:6px;width:26px;height:26px;border-radius:50%; background:radial-gradient(circle at 35% 32%,#fff6cf 0%,#ffd75e 55%,#ffb92e 100%); box-shadow:0 0 14px rgba(255,196,66,.85), 0 2px 6px rgba(0,0,0,.18); transition:transform .6s cubic-bezier(.68,-0.25,.27,1.25), background .5s, box-shadow .5s} html[data-theme="dark"] .bsdm-orb{ transform:translateX(40px) rotate(-25deg); background:radial-gradient(circle at 35% 32%,#f4f6ff 0%,#dfe4f2 60%,#c3cadd 100%); box-shadow:0 0 16px rgba(214,222,255,.55), 0 2px 6px rgba(0,0,0,.35)} /* Mondkrater erscheinen erst nachts */ .bsdm-orb:before,.bsdm-orb:after{content:"";position:absolute;border-radius:50%; background:rgba(150,160,185,.42);opacity:0;transition:opacity .45s .12s} .bsdm-orb:before{width:7px;height:7px;top:6px;left:15px} .bsdm-orb:after{width:4.5px;height:4.5px;top:16px;left:8px} html[data-theme="dark"] .bsdm-orb:before,html[data-theme="dark"] .bsdm-orb:after{opacity:1} /* Sonnenstrahlen: drehen sich weg, wenn es Nacht wird */ .bsdm-rays{position:absolute;top:6px;left:6px;width:26px;height:26px; transition:opacity .4s, transform .6s cubic-bezier(.68,-0.25,.27,1.25)} .bsdm-rays i{position:absolute;top:50%;left:50%;width:2.5px;height:5px;margin:-2.5px 0 0 -1.25px; border-radius:2px;background:rgba(255,214,92,.95);transform-origin:50% 50%} html[data-theme="dark"] .bsdm-rays{opacity:0;transform:translateX(40px) rotate(90deg)} /* Wolken ziehen tagsüber vorbei */ .bsdm-cloud{position:absolute;border-radius:999px;background:rgba(255,255,255,.95); transition:transform .6s ease, opacity .45s} .bsdm-cloud:before{content:"";position:absolute;border-radius:50%;background:inherit} .bsdm-c1{width:22px;height:9px;right:8px;bottom:8px} .bsdm-c1:before{width:11px;height:11px;top:-5px;left:4px} .bsdm-c2{width:14px;height:6px;right:26px;top:7px;opacity:.75} .bsdm-c2:before{width:7px;height:7px;top:-3px;left:3px} html[data-theme="dark"] .bsdm-cloud{opacity:0;transform:translateX(26px)} /* Sterne funkeln nachts */ .bsdm-star{position:absolute;background:#fff;border-radius:50%;opacity:0; transition:opacity .5s .15s, transform .5s .15s;transform:scale(.4)} html[data-theme="dark"] .bsdm-star{opacity:1;transform:scale(1); animation:bsdmTwinkle 3.2s ease-in-out infinite} .bsdm-s1{width:3px;height:3px;left:12px;top:9px} .bsdm-s2{width:2px;height:2px;left:24px;top:20px;animation-delay:.6s !important} .bsdm-s3{width:2.5px;height:2.5px;left:19px;top:28px;animation-delay:1.2s !important} .bsdm-s4{width:2px;height:2px;left:31px;top:12px;animation-delay:1.8s !important} .bsdm-s5{width:1.6px;height:1.6px;left:9px;top:24px;animation-delay:2.4s !important} @keyframes bsdmTwinkle{0%,100%{opacity:.35}50%{opacity:1}} @media (max-width:700px){ .bsdm{width:66px;height:33px;margin:0 12px 0 0} .bsdm--fest{right:80px;bottom:20px;margin:0} .bsdm-orb,.bsdm-rays{width:24px;height:24px;top:4.5px;left:4.5px} html[data-theme="dark"] .bsdm-orb{transform:translateX(33px) rotate(-25deg)} html[data-theme="dark"] .bsdm-rays{transform:translateX(33px) rotate(90deg)} } @media (prefers-reduced-motion:reduce){ .bsdm-orb,.bsdm-rays,.bsdm-cloud,.bsdm-star{transition-duration:.01ms;animation:none} }