/* ============================================================================ MHD Farbschema (18.09.2026): dunkle Tokens und der Umschalter Sprache/Schema. Geladen ueber _kopf.php im jeder Seite, NACH der Vorbelegung von data-theme auf (Skript ebenfalls in _kopf.php). Es gibt nur EINEN Selektor fuer dunkel: html[data-theme="dark"]. "Wie das System" loest das Skript zu light oder dark auf, CSS braucht kein prefers-color-scheme. Helle Werte stehen weiterhin in den Seiten (:root) und in header.css, footer.css, anfrage.css, leistung.css. Hier werden nur die Variablen ueberschrieben und die wenigen hart gesetzten Farben nachgezogen. CI: Violett #6A007A wird auf Dunkel zu #C48ED0 fuer Text und #8E2FA2 mit weisser Schrift fuer Flaechen (Knoepfe, aktive Segmente). ========================================================================== */ html[data-theme="dark"]{ color-scheme:dark; --paper:#16161B; --panel:#1F1F26; --card:#1C1C22; --card-2:#22222A; --ink:#EDECE8; --ink-2:#D2D1CD; --muted:#A8ABB1; --hairline:#34343D; --hairline-dark:#4A4A54; --violet:#C48ED0; --violet-deep:#D8ACE2; --violet-hi:#A24FB0; --flieder:#8E2FA2; --flieder-hell:#A24FB0; --auf-flieder:#fff; /* 18.09.2026 abends: Hans wollte weisse Schrift, vorher Flieder #D3A4E0 mit dunkler Schrift */ --on-dark:#EDECE8; --muted-dark:#A8ABB1; --grau-svg:#4A4A54; --grau-svg-2:#5A5A64; --sh-btn:0 1px 2px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.35); --sh-btn-hi:0 1px 3px rgba(0,0,0,.45),0 8px 24px rgba(0,0,0,.4); --sh-btn-hover:0 2px 5px rgba(0,0,0,.45),0 10px 26px rgba(0,0,0,.45); --sh-btn-hi-hover:0 2px 6px rgba(0,0,0,.5),0 14px 34px rgba(0,0,0,.5); --sh-bild:0 1px 2px rgba(0,0,0,.4),0 10px 24px rgba(0,0,0,.45); } html[data-theme="dark"] body{background:var(--paper);color:var(--ink)} html[data-theme="dark"] ::selection{background:var(--violet-hi);color:#fff} /* ── Knoepfe: Flieder-Flaeche mit dunkler Schrift (Violett auf Dunkel traegt nicht) ── */ html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .site-header .nav-r a.btn-primary, html[data-theme="dark"] .cta-leiste a, html[data-theme="dark"] dialog.anfrage .af .btn-primary, html[data-theme="dark"] .fb-senden, html[data-theme="dark"] .toc .toc-cta.btn-primary{background:var(--flieder);color:var(--auf-flieder)} html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] .site-header .nav-r a.btn-primary:hover, html[data-theme="dark"] .cta-leiste a:hover, html[data-theme="dark"] dialog.anfrage .af .btn-primary:hover, html[data-theme="dark"] .fb-senden:hover{background:var(--flieder-hell);color:var(--auf-flieder)} html[data-theme="dark"] .btn-line{border-color:var(--ink);color:var(--ink)} html[data-theme="dark"] .btn-line:hover{border-color:var(--violet);color:var(--violet)} /* Kleine violette Flaechen mit weisser Schrift */ html[data-theme="dark"] :is(.skip,.badge,.fb-nr,.units button.on,.ways .pillar a:hover,.pnav .aktiv .kern){color:var(--auf-flieder)} html[data-theme="dark"] :is(.skip,.badge,.fb-nr,.units button.on){background:var(--flieder)} html[data-theme="dark"] .tile.soon .badge{background:var(--panel);color:var(--muted)} /* ── Kopfzeile / Fuss / feste Leiste (eigene Variablenraeume) ── */ html[data-theme="dark"] .site-header, html[data-theme="dark"] .site-footer, html[data-theme="dark"] dialog.anfrage{ --ink:#EDECE8; --paper:#16161B; --panel:#1F1F26; --hairline:#34343D; --muted:#A8ABB1; --violet:#C48ED0; --violet-deep:#D8ACE2; --violet-hi:#A24FB0; --sh-btn-hi:0 1px 3px rgba(0,0,0,.45),0 8px 24px rgba(0,0,0,.4); --sh-btn-hover:0 2px 6px rgba(0,0,0,.5),0 14px 34px rgba(0,0,0,.5); } html[data-theme="dark"] header.site-header{background:rgba(22,22,27,.92);border-bottom-color:var(--hairline)} html[data-theme="dark"] .site-header .menu-list{box-shadow:0 16px 40px rgba(0,0,0,.5)} html[data-theme="dark"] .cta-leiste{background:rgba(22,22,27,.94);border-top-color:#34343D} /* Signet und Wortmarke: dunkle Zeichnung auf transparent, deshalb eigene helle Fassungen */ html[data-theme="dark"] .site-header .mark{content:url(/img/mhd-signet-dunkel.png)} html[data-theme="dark"] .site-header .wordmark{content:url(/img/mhd-wortmarke-dunkel.png)} html[data-theme="dark"] .site-footer::before{opacity:.09;filter:invert(1)} html[data-theme="dark"] .hero::before{opacity:.10;filter:invert(1)} /* ── Flaechen, die hell hart auf Weiss standen ── */ html[data-theme="dark"] :is(.facts,.duo article,.hl,.faq details,.deliver,.pt-bilder a,.seal,.newslist article, .tile,.karte,.fb,.fb-chip,.proof img,.portrait img,.units,.calc-result .field input){background:var(--card)} html[data-theme="dark"] :is(dialog.anfrage .card,dialog.anfrage .chip,dialog.anfrage .af .fld input,dialog.anfrage .af .fld textarea, .fb-form input[type=text],.fb-form input[type=email],.fb-form textarea){background:var(--card-2);color:var(--ink)} html[data-theme="dark"] .tile.soon{background:transparent} html[data-theme="dark"] .m-lead,html[data-theme="dark"] .ph-kontext,html[data-theme="dark"] .ways .pillar p{color:var(--ink-2)} html[data-theme="dark"] .ways{background:rgba(162,79,176,.12);border-color:rgba(196,142,208,.35)} @media(min-width:861px){html[data-theme="dark"] .ways .pillar+.pillar{border-left-color:rgba(196,142,208,.35)}} html[data-theme="dark"] .ph-num{background:rgba(162,79,176,.18)} html[data-theme="dark"] .cr{background:rgba(201,148,106,.12);border-color:#8E5A31} html[data-theme="dark"] .cr .tag,html[data-theme="dark"] .m-map .cut{color:#D9A878;fill:#D9A878} html[data-theme="dark"] .draftnote{background:rgba(192,138,32,.15);color:#E0B45A;border-color:#8a5f10} html[data-theme="dark"] .fb-betreff output{background:var(--panel)} html[data-theme="dark"] .pnav{background:rgba(22,22,27,.94)} html[data-theme="dark"] dialog.anfrage::backdrop{background:rgba(0,0,0,.7)} html[data-theme="dark"] dialog.anfrage .af-err{color:#F08A93} html[data-theme="dark"] .fb-status.fehler{color:#F08A93} html[data-theme="dark"] main :is(p,li,dd,.a,.date span,.newslist p,.then p,.m-lead,.bio-lead) a:not(.btn):not(.plain):not(.konf):not(.quietlink),html[data-theme="dark"] .pcard p a,html[data-theme="dark"] .hl p a,html[data-theme="dark"] .ph-kontext a,html[data-theme="dark"] .faq .a a{text-decoration-color:rgba(196,142,208,.5)} /* ── Netzwerk-Sektion und Zeichnungen (graue Leiterbahnen, Pads, Zaehler) ── */ html[data-theme="dark"] #netzwerk{background:#1A1A20;border-top-color:rgba(196,142,208,.25);border-bottom-color:rgba(196,142,208,.25)} html[data-theme="dark"] #netzwerk .fn-node{fill:#1A1A20} html[data-theme="dark"] #netzwerk .fn-label,html[data-theme="dark"] #netzwerk .fn-region{stroke:#1A1A20} html[data-theme="dark"] .fn-node{fill:var(--paper)} html[data-theme="dark"] .fn-label,html[data-theme="dark"] .fn-region{stroke:var(--paper)} html[data-theme="dark"] .fn-trace{stroke:#6A6A74} html[data-theme="dark"] .fn-feld-e{stroke:rgba(196,142,208,.35)} html[data-theme="dark"] .fn-feld-d{fill:rgba(196,142,208,.07);stroke:rgba(196,142,208,.5)} html[data-theme="dark"] .counter .seg path,html[data-theme="dark"] #netzwerk .counter .seg path{fill:#2C2C34} html[data-theme="dark"] .counter .seg path.on{fill:var(--ink)} html[data-theme="dark"] :is(.m-map .tr,.flow-svg .trace,.track-svg .trace,.pnav .trace){stroke:var(--grau-svg)} html[data-theme="dark"] :is(.rail .tear,.pnav .tear){fill:var(--grau-svg)} html[data-theme="dark"] .rail::before{background:var(--grau-svg)} html[data-theme="dark"] .pnav .pad{stroke:var(--grau-svg-2)} html[data-theme="dark"] .pnav .aktiv .kern{fill:var(--paper)} html[data-theme="dark"] .prepreg{fill:#2A2A31} html[data-theme="dark"] .core{fill:#33333B} html[data-theme="dark"] .ext{stroke:var(--hairline-dark)} html[data-theme="dark"] .calc .etch{color:#8A8A94} /* ══ Umschalter Sprache + Farbschema (_anzeige.php) ═══════════════════════════ Ein Baustein, zwei Orte: Fuss und Klappmenue, ohne Beschriftung. Aktives Segment: Violett mit weisser Schrift, dunkel Flieder mit dunkler Schrift. Form: die eine abgerundete Ecke oben rechts wie ueberall auf der Site. */ .anzeige{display:flex;align-items:center;gap:18px;flex-wrap:wrap; --anz-track:#EDECE9; --anz-rand:#DBD9D3; --anz-text:#1A1A1E; --anz-aktiv:#6A007A; --anz-auf-aktiv:#fff; --anz-hover:#F1E7F3; font:400 15px/1 "Fira Sans",system-ui,sans-serif;letter-spacing:normal;text-transform:none} html[data-theme="dark"] .anzeige{--anz-track:#26262E; --anz-rand:#3A3A44; --anz-text:#EDECE8; --anz-aktiv:#8E2FA2; --anz-auf-aktiv:#fff; --anz-hover:#31313B} .anzeige-seg{display:inline-flex;align-items:stretch;background:var(--anz-track);border:1px solid var(--anz-rand);border-radius:0 12px 0 0;overflow:hidden} .anzeige-seg>a,.anzeige-seg>button{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:36px;padding:0 14px; font:inherit;font-weight:500;font-size:14.5px;color:var(--anz-text);background:transparent;border:0;cursor:pointer;text-decoration:none; transition:background .15s,color .15s} .anzeige-seg>a:hover,.anzeige-seg>button:hover{background:var(--anz-hover)} .anzeige-seg>a[aria-current="true"],.anzeige-seg>button[aria-pressed="true"]{background:var(--anz-aktiv);color:var(--anz-auf-aktiv);font-weight:600} .anzeige-seg>a[aria-current="true"]{pointer-events:none} .anzeige-seg>a:focus-visible,.anzeige-seg>button:focus-visible{outline:2px solid var(--anz-aktiv);outline-offset:-3px} .anzeige-schema svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .anzeige-schema svg .voll{fill:currentColor;stroke:none} .anzeige-schema button[data-mode="dark"] svg{fill:currentColor;stroke-width:1.4} /* Kopfzeile: dezenter Sprachwechsel als Textlink (zeigt die andere Sprache), auf allen Breiten, auch unter 1120px neben „Menü“. Die Segmentgruppe steht nur im Fuss und im Klappmenue. */ .site-header .nav-r>a.lang-mini{display:inline-flex;align-items:center;gap:5px;font-family:var(--cond);font-weight:500;font-size:13.5px; letter-spacing:.12em;color:var(--muted);padding:6px 2px;position:relative} .site-header .nav-r>a.lang-mini::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--violet);opacity:.75} .site-header .nav-r>a.lang-mini:hover{color:var(--violet)} .site-header .nav-r>a.lang-mini:hover::before{opacity:1} /* 1121 bis 1300px: Nav-Abstand 14px statt 18px, sonst lag „Leistungen“ bei 1121 14px auf der Wortmarke */ @media(min-width:1121px) and (max-width:1300px){header.site-header .nav-r{gap:14px}} /* Klappmenue: unter den Punkten, mit Trennlinie */ .site-header .menu-list .anzeige{padding:14px 20px 8px;margin-top:8px;border-top:1px solid var(--hairline)} /* Fuss: eigene Zeile ueber der Adresszeile */ .site-footer .anzeige{margin-top:56px;position:relative} .site-footer .anzeige+.foot-row{margin-top:22px} @media print{.anzeige{display:none}} /* ══ Power Tree (/power-tree/, ): eigene Farbwelt der App ══════ Die App hat eigene Tokens (--surface, --card, --line, --accent) und viele hart gesetzte weisse Flaechen. Statusfarben (good/warning/serious/critical) bleiben unveraendert, sie sind Bedeutungstraeger. */ html.pt[data-theme="dark"]{ --ink:#ECEBE7; --ink2:#B8B6B0; --muted:#8E8C86; --accent:#C48ED0; --surface:#15151A; --card:#1E1E24; --line:#33333B; --line2:#2A2A31; --pt-feld:#25252D; --pt-flieder:rgba(196,142,208,.16); --pt-flieder-text:#D3A4E0; --pt-flieder-rand:rgba(196,142,208,.4); } html.pt[data-theme="dark"] body{background:var(--surface);color:var(--ink)} html.pt[data-theme="dark"] :is(.mf,.picker,.movegrp .mv,#statusbar,.seg,.seg button,.colhead,.ch-add,.col-add,.ch-add.ghostadd, .stage,.chead,.panel,.tblock){background:var(--card)} html.pt[data-theme="dark"] :is(.fctl input,.fctl select,input.netv){background:var(--pt-feld);color:var(--ink)} html.pt[data-theme="dark"] .derived{background:#20202A} html.pt[data-theme="dark"] .chead:hover{background:#24242C} html.pt[data-theme="dark"] .editor{background:#1A1A21} html.pt[data-theme="dark"] .scale .track{background:#2C2C34;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)} html.pt[data-theme="dark"] .vlab-bg{fill:var(--card)} html.pt[data-theme="dark"] .seg button[aria-pressed=true],html.pt[data-theme="dark"] .btn{background:#8E2FA2;color:#fff} html.pt[data-theme="dark"] .ch-add:hover,html.pt[data-theme="dark"] .col-add:hover{background:#8E2FA2;color:#fff;border-color:#8E2FA2} html.pt[data-theme="dark"] :is(.ch-add,.col-add){border-color:#4A4A54} html.pt[data-theme="dark"] .ch{border-right-color:#3A3A44} html.pt[data-theme="dark"] .ch-add.ghostadd{border-color:#4A4A54} html.pt[data-theme="dark"] .col-add{border-color:#4A4A54} html.pt[data-theme="dark"] .sarr.rest{color:#55555F} html.pt[data-theme="dark"] :is(.gmult,.lens,.pill.d,.gctl){background:var(--pt-flieder);color:var(--pt-flieder-text);border-color:var(--pt-flieder-rand)} html.pt[data-theme="dark"] .card.gagg{background:rgba(196,142,208,.07);border-color:#6A5A78} html.pt[data-theme="dark"] .grp rect{fill:#1C1A20;stroke:#4A3F55} html.pt[data-theme="dark"] .grplab{fill:#B79BC7} html.pt[data-theme="dark"] .colsep{stroke:#33333B} html.pt[data-theme="dark"] .domainsep{stroke:#5A4636} html.pt[data-theme="dark"] .hb-box{background:rgba(40,30,25,.94);border-color:#5A4636} html.pt[data-theme="dark"] #statusbar[data-status=good]{border-color:rgba(12,163,12,.4);background:rgba(12,163,12,.12)} html.pt[data-theme="dark"] #statusbar[data-status=warning]{border-color:rgba(250,178,25,.4);background:rgba(250,178,25,.12)} html.pt[data-theme="dark"] #statusbar[data-status=serious]{border-color:rgba(236,131,90,.4);background:rgba(236,131,90,.12)} html.pt[data-theme="dark"] #statusbar[data-status=critical]{border-color:rgba(208,59,59,.4);background:rgba(208,59,59,.14)} html.pt[data-theme="dark"] .card[data-status=serious] .chead{background:rgba(236,131,90,.12)} html.pt[data-theme="dark"] .card[data-status=critical] .chead{background:rgba(208,59,59,.14)} html.pt[data-theme="dark"] .card[data-status=warning] .alarm{color:#1A1A1E} html.pt[data-theme="dark"] .incomplete{background:rgba(250,178,25,.15);color:#F0C060;border-color:rgba(250,178,25,.4)} html.pt[data-theme="dark"] .pk-warn{color:#F0C060} html.pt[data-theme="dark"] .fld.missing .fctl input,html.pt[data-theme="dark"] .fld.missing .fctl select{background:rgba(208,59,59,.14)} html.pt[data-theme="dark"] .blockers{background:rgba(208,59,59,.12);border-color:rgba(208,59,59,.4);color:#F08A93} html.pt[data-theme="dark"] .ok{background:rgba(12,163,12,.12);border-color:rgba(12,163,12,.4);color:#7FD47F} html.pt[data-theme="dark"] .pill{background:#2A2A31} html.pt[data-theme="dark"] .pill[data-status]{background:color-mix(in srgb,var(--c) 22%,var(--card));color:var(--ink);border-color:color-mix(in srgb,var(--c) 45%,var(--card))} html.pt[data-theme="dark"] input.netv:placeholder-shown{background:rgba(250,178,25,.1)} html.pt[data-theme="dark"] .tblock[data-term] .scale[data-status=critical]~.tbody .pct{color:#F08A93} html.pt[data-theme="dark"] .card{box-shadow:0 1px 2px rgba(0,0,0,.4)} html.pt[data-theme="dark"] .card.editing{box-shadow:0 6px 20px rgba(0,0,0,.6)} html.pt[data-theme="dark"] .picker{box-shadow:0 6px 22px rgba(0,0,0,.6)} /* Deutsche Einsprengsel auf den EN-Seiten () muessen im Textfluss bleiben: leistung.css setzt in .date jedes span als Block (Terminliste), das zerriss die Vortragstitel. */ .date span[lang],.date b span[lang],.fakten span[lang],.newslist span[lang]{display:inline;font:inherit;color:inherit;margin:0;padding:0} /* Power Tree Alpha 0.21 (18.09.2026): neue Kaesten und Marken */ html.pt[data-theme="dark"] :is(.metarow,.cfgbox,.tblock,.card.editing .tsec){background:#1A1A21} html.pt[data-theme="dark"] .cfgbtn{background:var(--pt-feld);color:var(--ink2)} html.pt[data-theme="dark"] .cfgbtn:hover{color:var(--ink)} html.pt[data-theme="dark"] .card.editing .tsec-h{background:#20202A} html.pt[data-theme="dark"] .flash{background:rgba(196,142,208,.12);border-color:rgba(196,142,208,.35)} html.pt[data-theme="dark"] .beta{background:rgba(250,178,25,.14);color:#F0C060} html.pt[data-theme="dark"] .beta .bsub{color:#E0B45A} html.pt[data-theme="dark"] body.dropping::after{background:rgba(22,22,27,.72)} html.pt[data-theme="dark"] body.dropping::before{background:var(--card);box-shadow:0 8px 28px rgba(0,0,0,.6)} html.pt[data-theme="dark"] .card[data-now=serious]{--tnow:rgba(236,131,90,.12);--hnow:rgba(236,131,90,.22)} html.pt[data-theme="dark"] .card[data-now=critical]{--tnow:rgba(208,59,59,.14);--hnow:rgba(208,59,59,.26)} html.pt[data-theme="dark"] .card[data-wc=serious]{--twc:rgba(236,131,90,.12);--hwc:rgba(236,131,90,.22)} html.pt[data-theme="dark"] .card[data-wc=critical]{--twc:rgba(208,59,59,.14);--hwc:rgba(208,59,59,.26)} html.pt[data-theme="dark"] .card.editing[data-status=serious] .chead{background:rgba(236,131,90,.12)} html.pt[data-theme="dark"] .card.editing[data-status=critical] .chead{background:rgba(208,59,59,.14)} html.pt[data-theme="dark"] .card.editing .ensec{border-left-color:rgba(196,142,208,.6)} html.pt[data-theme="dark"] #statusbar .st-list{border-color:#3A3A44} html.pt[data-theme="dark"] .card.editing :is(input:not([type=checkbox]):not([type=radio]),select,textarea){background:var(--pt-feld);color:var(--ink);border-color:var(--line)} /* Klappmenue: header.css setzt .site-header .menu-list a (Farbe Tinte, Block, 11px 20px) mit hoeherer Spezifitaet als die Segmentregeln, darum stand DE/EN im Menue schwarz auf Violett (Hans, 19.09.2026). */ .site-header .menu-list .anzeige-seg>a{display:inline-flex;padding:0 14px;color:var(--anz-text);font-size:14.5px} .site-header .menu-list .anzeige-seg>a:hover{background:var(--anz-hover);color:var(--anz-text)} .site-header .menu-list .anzeige-seg>a[aria-current="true"],.site-header .menu-list .anzeige-seg>a[aria-current="true"]:hover{background:var(--anz-aktiv);color:var(--anz-auf-aktiv)} /* Silbentrennung im Fliesstext auf schmalen Bildschirmen (Hans, 19.09.2026: Flatterrand bei langen Komposita wie „Steckerbelegung, Querschnitte"). Greift ueber das lang-Attribut der Seite (de bzw. en-GB), Mindestlaengen verhindern kurze Trennstuecke. Am Desktop bleibt der Satz unveraendert. */ @media (max-width: 720px) { main :is(p, li, dd, .a, .then p, .m-lead, .bio-lead, .ph-kontext, .lead) { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; } main :is(a, b, strong, code, .label, .yr, time) { hyphens: manual; -webkit-hyphens: manual; } }