/* Gemeinsames Design-System aller fuenf Apps (Stand 30.08.2026). Ausgeliefert von jeder App unter /thema.css. Gesteuert ueber Attribute am -Element, die /thema.js VOR dem ersten Zeichnen setzt: data-design = 1 Original (keine Ueberschreibung, Fallback) 2 Noir (Standard seit 30.08.) | 13 Matrix data-geraet = handy | tablet | pc (erkannt oder im Menue gewaehlt) data-eingabe = touch | maus data-bewegung= aus (Transitions/Animationen abgeschaltet) Zwei Variablen-Dialekte werden bedient: trading/pv/rechnungen (--bg --card --border --fg --muted --sky --blue --green --red --amber) und immo (--blau --gruen --rot --gelb --lila) sowie bilder (--kar --rand --akz --grau --feld). Design 1 laesst ALLE Farben der Apps unangetastet. */ /* ======================= 1) Geraeteklassen (alle Designs) ================= */ html{--tap:36px;--dichte:1} html[data-geraet="handy"]{--tap:48px;--dichte:1.04} html[data-geraet="tablet"]{--tap:44px;--dichte:1} html[data-geraet="pc"]{--tap:34px;--dichte:.97} /* Touch: jedes Bedienelement mindestens fingergross (44-48 px, Apple HIG / Material), 8 px Abstand; Formulare 16 px, sonst zoomt iOS beim Tippen. */ html[data-eingabe="touch"] :is(a.btn,.btn,button,nav a,.knopf,input[type=submit], select,.thema,.kachel .geh):not(#thema-knopf):not(#thema-nav){min-height:var(--tap);line-height:1.2} html[data-eingabe="touch"] :is(a.btn,.btn,button,nav a,.knopf):not(#thema-knopf):not(#thema-nav){display:inline-flex; align-items:center;justify-content:center;padding-left:14px;padding-right:14px} html[data-eingabe="touch"] nav{gap:8px!important} html[data-eingabe="touch"] :is(input,select,textarea){font-size:16px!important;min-height:var(--tap)} html[data-eingabe="touch"] td,html[data-eingabe="touch"] th{padding-top:9px;padding-bottom:9px} html[data-geraet="handy"] body{font-size:16px} html[data-geraet="handy"] :is(.card,.karte,.kachel,.wrap,form.m){overflow-x:auto; -webkit-overflow-scrolling:touch} html[data-geraet="handy"] h1{font-size:1.25rem} html[data-geraet="pc"] body{font-size:15px} @media (prefers-reduced-motion:reduce){html{--bewegung:0}} html[data-bewegung="aus"] *,html[data-bewegung="aus"] *::before, html[data-bewegung="aus"] *::after{animation:none!important;transition:none!important} /* ======================= 2) Einstellungsmenue (⚙) ========================= */ #thema-knopf{position:fixed;right:calc(12px + env(safe-area-inset-right)); bottom:calc(12px + env(safe-area-inset-bottom));z-index:9000;width:var(--tap); height:var(--tap);min-width:38px;min-height:38px;max-width:44px;max-height:44px;border-radius:50%;border:1px solid var(--border,var(--rand,rgba(128,128,128,.4)));background:var(--card,var(--kar,#222)); color:var(--fg,#eee);font-size:1.15rem;cursor:pointer;opacity:.7; box-shadow:0 4px 18px -6px rgba(0,0,0,.5);transition:opacity .2s,transform .2s; display:flex;align-items:center;justify-content:center;padding:0;font-family:system-ui} #thema-knopf svg{display:block} #thema-knopf,#thema-nav{--sk:36px;width:var(--sk)!important;height:var(--sk)!important;min-width:0!important; min-height:0!important;max-width:none!important;max-height:none!important; background:var(--card,var(--kar,#222))!important;color:var(--fg,#eee)!important; border:1px solid var(--border,var(--rand,rgba(128,128,128,.4)))!important;transform:none!important; outline:none;-webkit-tap-highlight-color:transparent} #thema-knopf:focus,#thema-nav:focus,#thema-knopf:active,#thema-nav:active{background:var(--card,var(--kar,#222))!important;color:var(--fg,#eee)!important} html[data-eingabe="maus"] #thema-knopf:hover,html[data-eingabe="maus"] #thema-nav:hover{opacity:1} #thema-knopf:focus-visible,#thema-nav:focus-visible{box-shadow:0 0 0 2px var(--sky,var(--blau,var(--akz,#6ea8fe)))} html[data-geraet="handy"] :is(#thema-knopf,#thema-nav){--sk:40px} html[data-geraet="tablet"] :is(#thema-knopf,#thema-nav){--sk:32px} html[data-geraet="pc"] :is(#thema-knopf,#thema-nav){--sk:32px} html[data-geraet="tablet"] :is(#thema-knopf,#thema-nav) svg,html[data-geraet="pc"] :is(#thema-knopf,#thema-nav) svg{width:17px;height:17px} html[data-geraet="tablet"] #thema-menu,html[data-geraet="pc"] #thema-menu{bottom:calc(50px + env(safe-area-inset-bottom))} html[data-design="2"] :is(#thema-knopf,#thema-nav){background:#0a0a0a!important;color:#d0d0d0!important;border-color:#333!important} html[data-design="13"] :is(#thema-knopf,#thema-nav){background:#11161d!important;color:#c9d1d9!important;border-color:#30363d!important} /* Dreistrich-Menue unten links: Startseite + Projekte (nicht auf der Landing) */ #thema-nav{position:fixed;left:calc(12px + env(safe-area-inset-left)); bottom:calc(12px + env(safe-area-inset-bottom));z-index:9000;width:var(--tap);height:var(--tap); min-width:38px;min-height:38px;max-width:44px;max-height:44px;border-radius:50%; border:1px solid var(--border,var(--rand,rgba(128,128,128,.4)));background:var(--card,var(--kar,#222)); color:var(--fg,#eee);cursor:pointer;opacity:.75;box-shadow:0 4px 18px -6px rgba(0,0,0,.5); display:flex;align-items:center;justify-content:center;padding:0;transition:opacity .2s} #thema-nav svg{display:block} /* Randleiste links: zu (nur Knopf) | mini (Symbole, 56 px) | breit (Namen, 216 px) */ html{--leiste-b:0px} html[data-leiste="mini"]{--leiste-b:56px} html[data-leiste="breit"]{--leiste-b:216px} #thema-leiste{position:fixed;left:0;top:0;bottom:0;z-index:8990;width:var(--leiste-b);overflow:hidden; display:flex;flex-direction:column;gap:2px;padding:calc(8px + env(safe-area-inset-top)) 6px calc(60px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));box-sizing:border-box; background:var(--card,var(--kar,#1a1a1a));color:var(--fg,#eee); border-right:1px solid var(--border,var(--rand,rgba(128,128,128,.4))); transition:width .22s cubic-bezier(.2,.7,.3,1),transform .22s;font:13.5px/1.3 system-ui,-apple-system,sans-serif} html[data-leiste="zu"] #thema-leiste{width:0;border-right:0;padding-left:0;padding-right:0} #thema-leiste a,#thema-leiste .um,#thema-leiste .einst{display:flex;align-items:center;gap:10px;height:42px;padding:0 10px; border-radius:8px;color:inherit;text-decoration:none;white-space:nowrap;overflow:hidden; background:transparent;border:0;font:inherit;cursor:pointer;flex:none;text-align:left} #thema-leiste .ico{width:24px;flex:none;text-align:center;font-size:1.1rem;line-height:1} #thema-leiste .tx{opacity:1;transition:opacity .15s} html[data-leiste="mini"] #thema-leiste .tx{opacity:0;width:0} #thema-leiste a:hover,#thema-leiste .um:hover,#thema-leiste .einst:hover{background:rgba(128,128,128,.15);text-decoration:none} #thema-leiste a.hier{font-weight:700;color:var(--sky,var(--blau,var(--akz,#6ea8fe))); box-shadow:inset 3px 0 0 var(--sky,var(--blau,var(--akz,#6ea8fe)))} #thema-leiste a:first-child{margin-bottom:6px;border-bottom:1px solid var(--border,var(--rand,#444));border-radius:8px 8px 0 0} #thema-leiste .um{order:9;margin-top:auto;color:var(--muted,var(--grau,#999))} #thema-leiste .einst{order:5} #thema-leiste .einst .ico svg{width:18px;height:18px;display:block;margin:0 auto} #thema-leiste .einst.an{background:rgba(128,128,128,.15)} /* Einstellungsmenue innerhalb der Leiste: im Fluss statt schwebend */ #thema-menu.inleiste{position:static;width:auto;max-height:none;margin:4px 0 6px;padding:8px 8px 6px; box-shadow:none;animation:none;border-radius:8px;flex:none;order:6} #thema-leiste{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none} #thema-leiste::-webkit-scrollbar{display:none} html[data-leiste="mini"] #thema-menu.inleiste{display:none} html[data-leiste="mini"] #thema-leiste .um .ico{transform:rotate(180deg)} /* Inhalt beiseite schieben (nicht auf dem Handy: dort liegt die Leiste ueber dem Inhalt) */ html:not([data-geraet="handy"])[data-leiste="mini"] body,html:not([data-geraet="handy"])[data-leiste="breit"] body{ margin-left:var(--leiste-b)!important;transition:margin-left .22s cubic-bezier(.2,.7,.3,1)} html:not([data-geraet="handy"])[data-leiste="mini"] #thema-sprung,html:not([data-geraet="handy"])[data-leiste="breit"] #thema-sprung{margin-left:0} /* Handy: mini (52 px) schiebt den Inhalt, breit legt sich als Schublade darueber */ html[data-geraet="handy"][data-leiste="mini"]{--leiste-b:52px} html[data-geraet="handy"][data-leiste="mini"] body{margin-left:52px!important;transition:margin-left .22s} html[data-geraet="handy"][data-leiste="breit"] #thema-leiste{width:min(260px,80vw);box-shadow:0 0 40px rgba(0,0,0,.5)} html[data-geraet="handy"][data-leiste="mini"] #thema-leiste{padding-left:4px;padding-right:4px} html[data-geraet="handy"][data-leiste="mini"] #thema-leiste a,html[data-geraet="handy"][data-leiste="mini"] #thema-leiste .um, html[data-geraet="handy"][data-leiste="mini"] #thema-leiste .einst{padding:0 8px} #thema-nav{z-index:8995} html[data-design="2"] :is(#thema-nav,#thema-leiste,#thema-leiste a,#thema-leiste .um,#thema-leiste .einst,#thema-menu.inleiste){border-radius:0!important} html[data-design="2"] #thema-leiste{background:#0a0a0a;border-right-color:#1e1e1e} html[data-design="2"] #thema-leiste a.hier{color:#fff;box-shadow:inset 2px 0 0 #fff} html[data-design="13"] :is(#thema-leiste a,#thema-leiste .um,#thema-leiste .einst,#thema-menu.inleiste){border-radius:6px!important} html[data-design="13"] #thema-leiste{background:#0d1117;border-right-color:#21262d} #thema-menu{position:fixed;right:calc(10px + env(safe-area-inset-right)); bottom:calc(58px + env(safe-area-inset-bottom));z-index:9001;width:min(300px,calc(100vw - 20px)); max-height:min(calc(100vh - 70px),calc(100dvh - 70px));overflow-y:auto;overscroll-behavior:contain; -webkit-overflow-scrolling:touch;background:var(--card,var(--kar,#1a1a1a)); color:var(--fg,#eee);border:1px solid var(--border,var(--rand,rgba(128,128,128,.4))); border-radius:12px;padding:10px 12px 8px;font:12.5px/1.35 system-ui,-apple-system,sans-serif; box-shadow:0 18px 50px -12px rgba(0,0,0,.6);transform-origin:bottom right; animation:thema-auf .18s ease-out;box-sizing:border-box} #thema-menu[hidden]{display:none} @keyframes thema-auf{from{opacity:0;transform:scale(.94) translateY(6px)}} #thema-menu h4{margin:7px 0 4px;font-size:.62rem;letter-spacing:.09em;text-transform:uppercase; color:var(--muted,var(--grau,#999));font-weight:600} #thema-menu h4:first-child{margin-top:0} #thema-menu .reihe{display:grid;grid-template-columns:1fr 1fr;gap:5px} #thema-menu .wahl{min-height:34px;display:flex;align-items:center;gap:7px;padding:4px 8px; border-radius:8px;border:1px solid var(--border,var(--rand,#444));background:transparent; color:inherit;cursor:pointer;font:inherit;text-align:left;box-sizing:border-box} #thema-menu .wahl.an{border-color:var(--sky,var(--blau,var(--akz,#6ea8fe))); box-shadow:inset 0 0 0 1px var(--sky,var(--blau,var(--akz,#6ea8fe)))} #thema-menu .wahl .sw{width:16px;height:16px;border-radius:4px;flex:none;border:1px solid rgba(128,128,128,.4)} #thema-menu .wahl small{display:block;color:var(--muted,var(--grau,#999));font-size:.66rem;line-height:1.2} #thema-menu .klein{grid-template-columns:repeat(4,1fr)} #thema-menu .klein .wahl{justify-content:center;padding:4px 2px;font-size:.72rem} #thema-menu .projekte{display:grid;grid-template-columns:1fr 1fr;gap:3px 6px} #thema-menu .projekte a{display:flex;align-items:center;gap:6px;min-height:30px;padding:2px 6px; border-radius:6px;color:inherit;text-decoration:none;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;font-size:.78rem} #thema-menu .projekte a:hover{background:rgba(128,128,128,.15);text-decoration:none} #thema-menu .projekte a.hier{font-weight:700;color:var(--sky,var(--blau,var(--akz,#6ea8fe)))} #thema-menu .fuss{margin-top:6px;font-size:.62rem;color:var(--muted,var(--grau,#999));text-align:right} /* Handy: Bottom-Sheet ueber die volle Breite, hoechstens 60 % der sichtbaren Hoehe */ html[data-geraet="handy"] #thema-menu{left:calc(8px + env(safe-area-inset-left)); right:calc(8px + env(safe-area-inset-right));width:auto; max-height:min(60vh,60dvh);transform-origin:bottom center} html[data-geraet="handy"] #thema-menu .wahl{min-height:38px} html[data-geraet="handy"] #thema-menu .projekte{grid-template-columns:1fr 1fr 1fr} /* Tablet: etwas groessere Trefferflaechen */ html[data-geraet="tablet"] #thema-menu{width:min(340px,calc(100vw - 20px))} html[data-geraet="tablet"] #thema-menu .wahl{min-height:40px} /* ======================= 3) Design 2 "Noir" (Standard) ==================== */ /* Sprache: Schwarz, Haarlinien (#1e1e1e), keine Rundungen, Weiss als einziger Akzent, Bedeutungsfarben gedaempft; Scheinwerfer folgt dem Zeiger; Karten blenden gestaffelt ein und bekommen beim Ueberfahren eine weisse Kante; Knoepfe sind Rahmen, die sich beim Ueberfahren fuellen (Invertierung). */ html[data-design="2"],html[data-design="2"][data-theme="light"], html[data-design="2"][data-theme="dark"]{ --bg:#050505;--bg2:#000;--card:#0a0a0a;--fg:#f2f2f2;--muted:#8d8d8d;--muted2:#666;--muted3:#777; --border:#1e1e1e;--border2:#2d2d2d;--border3:#262626; --sky:#ffffff;--blue:#d9d9d9;--blau:#d9d9d9;--lila:#cfc4ff; --green:#7ee2a8;--gruen:#7ee2a8;--red:#ff7b7b;--rot:#ff7b7b;--amber:#e6c77a;--gelb:#e6c77a; --flash-up:rgba(126,226,168,.35);--flash-dn:rgba(255,123,123,.35); --grid-em:rgba(255,255,255,.3);--grid:rgba(255,255,255,.09);--grid-w:rgba(255,255,255,.05); --kar:#0a0a0a;--rand:#1e1e1e;--akz:#ffffff;--grau:#8d8d8d;--feld:#000; --n-linie:#1e1e1e;--n-linie2:#333;--n-hover:#121212;color-scheme:dark} html[data-design="2"] body{background:#050505;color:#f2f2f2} html[data-design="2"] header{background:#050505!important;border-bottom:1px solid var(--n-linie)!important} /* Rundungen weg - ueberall */ html[data-design="2"] :is(.card,.karte,.kachel,.kpi,.pvcard,.pvtile,.ctlcard,.btn,a.btn,button,.knopf, input,select,textarea,form.m,form.rechner,.hinweis,.badge,nav a,.unternav a,.chip,.marke,.log, .tree,#thema-menu,#thema-menu .wahl,.eqbtn,.pvtabs button,.rpnav,.socbar,.socbar>i,#pbar,#pbarWrap, .switch .sl,.switch .sl:before,.flownode,.mini-upload,.foldbar,.lbalken,details,summary,.gitter, .druckblock,.bef,.k,.leiste){border-radius:0!important} /* Flaechen */ html[data-design="2"] :is(.card,.karte,.kachel,.kpi,.pvcard,.pvtile,.ctlcard,form.m,form.rechner,.tree,.log,.k){ background:#0a0a0a!important;border:1px solid var(--n-linie)!important;box-shadow:none!important; position:relative;transition:background .3s,border-color .3s} html[data-design="2"] :is(.card,.karte,.kachel,.pvcard,.ctlcard,.k):hover{background:var(--n-hover)!important} html[data-design="2"] :is(.card,.karte,.pvcard,.ctlcard)::before{content:'';position:absolute;left:0;top:0;bottom:0; width:2px;background:#fff;transform:scaleY(0);transform-origin:top;transition:transform .3s;pointer-events:none} html[data-design="2"] :is(.card,.karte,.pvcard,.ctlcard):hover::before{transform:scaleY(1)} html[data-design="2"] :is(.kachel,.kpi,.pvtile){border-top:1px solid var(--n-linie2)!important} html[data-design="2"] :is(.kachel,.kpi,.pvtile):hover{border-top-color:#fff!important} html[data-design="2"] :is(.kachel.wahl.aktiv,.kachel.aktiv){border-color:#fff!important} /* Typografie */ html[data-design="2"] h1{font-weight:250;letter-spacing:-.01em} html[data-design="2"] h1 b,html[data-design="2"] h1 strong{font-weight:750} html[data-design="2"] :is(h2,h3,.cardhd,.grouphd){font-weight:500;letter-spacing:.02em;color:#d0d0d0!important} html[data-design="2"] :is(.kpi .l,.kachel .lbl,.pvtile .lbl,.kpi .label,.lbl,.sub,.sub2,.mut,.muted,.note){ color:#8d8d8d!important;letter-spacing:.04em;text-transform:uppercase;font-size:.66rem!important} html[data-design="2"] :is(.kpi .v,.kachel .val,.pvtile .val,.val){font-weight:300!important;letter-spacing:-.01em} html[data-design="2"] :is(.pos,.gut,.up){color:#7ee2a8!important} html[data-design="2"] :is(.neg,.rot,.dn){color:#ff7b7b!important} /* Knoepfe: Rahmen, Fuellung beim Ueberfahren; Bedeutung ueber die Rahmenfarbe */ html[data-design="2"] :is(.btn,a.btn,button,.knopf,.eqbtn,.pvtabs button,.rpnav,.rpquick button,.chip, .mini-upload button,.vsblatt button,input[type=submit]):not(#thema-knopf):not(#thema-nav):not(#thema-menu .wahl):not(#thema-leiste button){ background:#0a0a0a!important;color:#f2f2f2!important;border:1px solid var(--n-linie2)!important; box-shadow:none!important;text-shadow:none!important;font-weight:500;letter-spacing:.03em; transition:background .2s,color .2s,border-color .2s,transform .15s} html[data-design="2"] :is(.btn,a.btn,button,.knopf,.eqbtn,.pvtabs button,.rpnav,.rpquick button,.chip, .mini-upload button,.vsblatt button):not(#thema-knopf):not(#thema-nav):not(#thema-menu .wahl):not(#thema-leiste button):hover:not(:disabled){background:#f2f2f2!important;color:#000!important; border-color:#f2f2f2!important} html[data-design="2"] :is(.btn,a.btn,button,.knopf):active:not(:disabled){transform:scale(.97)} html[data-design="2"] :is(.btn.b-blue,.pvtabs button.b-blue,.eqbtn.on,.chip.an,.bk.an,.kachel.wahl.aktiv){ background:#f2f2f2!important;color:#000!important;border-color:#f2f2f2!important} html[data-design="2"] :is(.btn.b-red,.knopf.rot){border-color:#ff7b7b!important;color:#ff7b7b!important;background:#0a0a0a!important} html[data-design="2"] :is(.btn.b-red,.knopf.rot):hover{background:#ff7b7b!important;color:#000!important} html[data-design="2"] .btn.b-green{border-color:#7ee2a8!important;color:#7ee2a8!important;background:#0a0a0a!important} html[data-design="2"] .btn.b-green:hover{background:#7ee2a8!important;color:#000!important} html[data-design="2"] :is(.btn,button,.knopf):disabled{opacity:.35;cursor:not-allowed} html[data-design="2"] :is(.knopf.grau,.btn.b-gray){color:#bdbdbd!important} html[data-design="2"] .chip b{color:inherit} /* Navigation: Haarlinie unten, aktiver Punkt weiss unterstrichen */ html[data-design="2"] :is(nav a,.unternav a){background:transparent!important;border:1px solid transparent!important; color:#bdbdbd!important;border-bottom:1px solid transparent!important} html[data-design="2"] :is(nav a,.unternav a):hover{color:#fff!important;border-bottom-color:#fff!important;background:transparent!important} html[data-design="2"] :is(nav a.an,.unternav a.an,nav .btn.b-blue,nav .btn.b-red){color:#fff!important; border-bottom:1px solid #fff!important;background:transparent!important;font-weight:600} html[data-design="2"] nav .btn.b-red{color:#ff7b7b!important;border-bottom-color:#ff7b7b!important} /* Abzeichen, Hinweise */ html[data-design="2"] .badge{background:transparent!important;border:1px solid currentColor;padding:2px 8px; font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:#bdbdbd} html[data-design="2"] :is(.badge.b-green,.badge.on){color:#7ee2a8!important} html[data-design="2"] :is(.badge.b-red){color:#ff7b7b!important} html[data-design="2"] .hinweis{background:#0a0a0a!important;border:1px solid var(--n-linie)!important; border-left:2px solid #bdbdbd!important;color:#d0d0d0} html[data-design="2"] :is(.hinweis.warn,.warn){border-left-color:#e6c77a!important} html[data-design="2"] :is(.hinweis.rot){border-left-color:#ff7b7b!important} html[data-design="2"] :is(.hinweis.gut){border-left-color:#7ee2a8!important} html[data-design="2"] :is(.hinweis.blau){border-left-color:#fff!important} /* Felder */ html[data-design="2"] :is(input,select,textarea){background:#000!important;color:#f2f2f2!important; border:1px solid var(--n-linie2)!important;box-shadow:none!important;transition:border-color .2s} html[data-design="2"] :is(input,select,textarea):focus{outline:none;border-color:#fff!important} html[data-design="2"] input[type=checkbox],html[data-design="2"] input[type=radio]{accent-color:#fff} html[data-design="2"] input[type=range]{accent-color:#fff} html[data-design="2"] .switch .sl{background:#222!important;border:1px solid var(--n-linie2)} html[data-design="2"] .switch .sl:before{background:#8d8d8d!important} html[data-design="2"] .switch input:checked + .sl{background:#f2f2f2!important} html[data-design="2"] .switch input:checked + .sl:before{background:#000!important} /* Tabellen, Protokoll, Balken */ html[data-design="2"] th{color:#8d8d8d!important;font-weight:500;font-size:.66rem!important;letter-spacing:.08em; text-transform:uppercase;border-bottom:1px solid var(--n-linie2)!important;background:transparent!important} html[data-design="2"] td{border-bottom:1px solid var(--n-linie)!important;background:transparent!important} html[data-design="2"] tbody tr:nth-child(even){background:transparent!important} html[data-design="2"] tr:hover td{background:#121212!important} html[data-design="2"] .log{color:#bdbdbd;background:#000!important} html[data-design="2"] :is(.socbar,#pbarWrap,.lbalken,.foldbar){background:#1a1a1a!important} html[data-design="2"] :is(.socbar>i,#pbar,#ladeleiste.an .lbalken){background:#f2f2f2!important} html[data-design="2"] a{color:#f2f2f2} html[data-design="2"] a:hover{text-decoration:underline;text-decoration-color:#fff} html[data-design="2"] ::selection{background:#fff;color:#000} html[data-design="2"] ::-webkit-scrollbar{width:8px;height:8px} html[data-design="2"] ::-webkit-scrollbar-thumb{background:#333} /* Bewegung: gestaffeltes Einblenden der Flaechen, Scheinwerfer, Iris-Eintritt */ html[data-design="2"]:not([data-bewegung="aus"]) :is(.card,.karte,.kachel,.kpi,.pvcard,.pvtile,.ctlcard,.k){ animation:n-auf .5s cubic-bezier(.2,.7,.3,1) both} html[data-design="2"]:not([data-bewegung="aus"]) :is(.card,.karte,.kachel,.kpi,.pvcard,.pvtile,.ctlcard,.k):nth-child(2){animation-delay:.05s} html[data-design="2"]:not([data-bewegung="aus"]) :is(.card,.karte,.kachel,.kpi,.pvcard,.pvtile,.ctlcard,.k):nth-child(3){animation-delay:.1s} html[data-design="2"]:not([data-bewegung="aus"]) :is(.card,.karte,.kachel,.kpi,.pvcard,.pvtile,.ctlcard,.k):nth-child(4){animation-delay:.15s} html[data-design="2"]:not([data-bewegung="aus"]) :is(.card,.karte,.kachel,.kpi,.pvcard,.pvtile,.ctlcard,.k):nth-child(5){animation-delay:.2s} html[data-design="2"]:not([data-bewegung="aus"]) :is(.card,.karte,.kachel,.kpi,.pvcard,.pvtile,.ctlcard,.k):nth-child(n+6){animation-delay:.25s} @keyframes n-auf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} html[data-design="2"][data-eingabe="maus"] body::before{content:'';position:fixed;inset:0;z-index:-1; pointer-events:none;background:radial-gradient(560px circle at var(--lx,50%) var(--ly,30%), rgba(255,255,255,.10),transparent 60%)} html[data-design="2"]:not([data-bewegung="aus"]) body::after{content:'';position:fixed;left:50%;top:38%; width:0;height:0;transform:translate(-50%,-50%);border-radius:50%;z-index:9500;pointer-events:none; box-shadow:0 0 0 300vmax #050505;animation:thema-iris .7s ease-out forwards} @keyframes thema-iris{to{width:340vmax;height:340vmax;box-shadow:0 0 0 0 #050505;visibility:hidden}} /* ======================= 4) Design 13 "Matrix" =========================== */ /* Sprache: dunkles Blaugrau (#0d1117), praezise 6-px-Kanten, Blau #6ea8fe als Akzent, gefuellte Knoepfe (Primaer blau, Gefahr rot, Erfolg gruen), Kopfzeilen in Versalien, Zeilen scannen sich von links ein. */ html[data-design="13"],html[data-design="13"][data-theme="light"], html[data-design="13"][data-theme="dark"]{ --bg:#0d1117;--bg2:#090c10;--card:#11161d;--fg:#dce3ec;--muted:#7d8590;--muted2:#5c6470;--muted3:#6c747f; --border:#21262d;--border2:#30363d;--border3:#292f36; --sky:#6ea8fe;--blue:#6ea8fe;--blau:#6ea8fe;--lila:#bc8cff; --green:#3fb950;--gruen:#3fb950;--red:#f85149;--rot:#f85149;--amber:#d29922;--gelb:#d29922; --flash-up:rgba(63,185,80,.35);--flash-dn:rgba(248,81,73,.35); --grid-em:rgba(220,227,236,.3);--grid:rgba(220,227,236,.09);--grid-w:rgba(220,227,236,.05); --kar:#11161d;--rand:#21262d;--akz:#6ea8fe;--grau:#7d8590;--feld:#0d1117; --m-linie:#21262d;--m-linie2:#30363d;--m-hover:#161b22;--m-blau:#1f6feb;color-scheme:dark} html[data-design="13"] body{background:#0d1117;color:#dce3ec} html[data-design="13"] header{background:#0d1117!important;border-bottom:1px solid var(--m-linie)!important} html[data-design="13"] :is(.card,.karte,.kachel,.kpi,.pvcard,.pvtile,.ctlcard,.btn,a.btn,button,.knopf, input,select,textarea,form.m,form.rechner,.hinweis,.badge,nav a,.unternav a,.chip,.marke,.log,.tree, #thema-menu .wahl,.eqbtn,.pvtabs button,.rpnav,.flownode,.mini-upload,.k){border-radius:6px!important} html[data-design="13"] :is(.card,.karte,.kachel,.kpi,.pvcard,.pvtile,.ctlcard,form.m,form.rechner,.tree,.log,.k){ background:#11161d!important;border:1px solid var(--m-linie)!important;box-shadow:none!important; transition:border-color .2s,background .2s} html[data-design="13"] :is(.card,.karte,.kachel,.pvcard,.ctlcard,.k):hover{border-color:#6ea8fe!important} html[data-design="13"] :is(.kachel.wahl.aktiv,.kachel.aktiv){border-color:#6ea8fe!important;box-shadow:inset 0 0 0 1px #6ea8fe!important} html[data-design="13"] h1{font-weight:700;letter-spacing:-.02em} html[data-design="13"] :is(h2,.cardhd,.grouphd){font-size:.72rem!important;letter-spacing:.1em;text-transform:uppercase; color:#7d8590!important;font-weight:600} html[data-design="13"] :is(.kpi .l,.kachel .lbl,.pvtile .lbl,.lbl,.sub2,.mut){color:#7d8590!important; font-size:.68rem!important;letter-spacing:.06em;text-transform:uppercase} html[data-design="13"] :is(.kpi .v,.kachel .val,.pvtile .val,.val){font-weight:650!important;font-variant-numeric:tabular-nums} html[data-design="13"] :is(.pos,.gut,.up){color:#3fb950!important} html[data-design="13"] :is(.neg,.rot,.dn){color:#f85149!important} /* Knoepfe: gefuellt, drei Bedeutungen */ html[data-design="13"] :is(.btn,a.btn,button,.knopf,.eqbtn,.pvtabs button,.rpnav,.rpquick button,.chip, .mini-upload button,.vsblatt button,input[type=submit]):not(#thema-knopf):not(#thema-nav):not(#thema-menu .wahl):not(#thema-leiste button){ background:#21262d!important;color:#dce3ec!important;border:1px solid var(--m-linie2)!important; box-shadow:none!important;text-shadow:none!important;font-weight:600; transition:background .15s,border-color .15s,transform .1s} html[data-design="13"] :is(.btn,a.btn,button,.knopf,.eqbtn,.pvtabs button,.rpnav,.rpquick button,.chip, .mini-upload button,.vsblatt button):not(#thema-knopf):not(#thema-nav):not(#thema-menu .wahl):not(#thema-leiste button):hover:not(:disabled){background:#30363d!important;border-color:#8b949e!important} html[data-design="13"] :is(.btn,a.btn,button,.knopf):active:not(:disabled){transform:translateY(1px)} html[data-design="13"] :is(.btn.b-blue,.pvtabs button.b-blue,.eqbtn.on,.chip.an,.bk.an,input[type=submit]){ background:#1f6feb!important;color:#fff!important;border-color:#388bfd!important} html[data-design="13"] :is(.btn.b-blue,.pvtabs button.b-blue,input[type=submit]):hover{background:#388bfd!important} html[data-design="13"] :is(.btn.b-red,.knopf.rot){background:#da3633!important;color:#fff!important;border-color:#f85149!important} html[data-design="13"] :is(.btn.b-red,.knopf.rot):hover{background:#f85149!important} html[data-design="13"] .btn.b-green{background:#238636!important;color:#fff!important;border-color:#2ea043!important} html[data-design="13"] .btn.b-green:hover{background:#2ea043!important} html[data-design="13"] :is(.btn,button,.knopf):disabled{opacity:.45;cursor:not-allowed} html[data-design="13"] :is(nav a,.unternav a){background:transparent!important;border:1px solid transparent!important; color:#c9d1d9!important} html[data-design="13"] :is(nav a,.unternav a):hover{background:#161b22!important;border-color:var(--m-linie2)!important} html[data-design="13"] :is(nav a.an,.unternav a.an,nav .btn.b-blue){background:#161b22!important;border-color:var(--m-linie2)!important; color:#6ea8fe!important;box-shadow:inset 0 -2px 0 #6ea8fe!important} html[data-design="13"] nav .btn.b-red{background:#161b22!important;color:#f85149!important;box-shadow:inset 0 -2px 0 #f85149!important} html[data-design="13"] .badge{border-radius:99px!important;font-weight:600;font-size:.68rem;padding:2px 9px; background:#21262d!important;color:#c9d1d9;border:1px solid var(--m-linie2)} html[data-design="13"] :is(.badge.b-green,.badge.on){background:rgba(63,185,80,.15)!important;color:#3fb950!important;border-color:rgba(63,185,80,.4)} html[data-design="13"] .badge.b-red{background:rgba(248,81,73,.15)!important;color:#f85149!important;border-color:rgba(248,81,73,.4)} html[data-design="13"] .hinweis{background:#11161d!important;border:1px solid var(--m-linie)!important; border-left:3px solid #6ea8fe!important;color:#dce3ec} html[data-design="13"] :is(.hinweis.warn,.warn){border-left-color:#d29922!important} html[data-design="13"] .hinweis.rot{border-left-color:#f85149!important} html[data-design="13"] .hinweis.gut{border-left-color:#3fb950!important} html[data-design="13"] :is(input,select,textarea){background:#0d1117!important;color:#dce3ec!important; border:1px solid var(--m-linie2)!important;box-shadow:none!important;transition:border-color .15s,box-shadow .15s} html[data-design="13"] :is(input,select,textarea):focus{outline:none;border-color:#6ea8fe!important; box-shadow:0 0 0 3px rgba(110,168,254,.25)!important} html[data-design="13"] :is(input[type=checkbox],input[type=radio],input[type=range]){accent-color:#6ea8fe} html[data-design="13"] .switch .sl{background:#21262d!important;border:1px solid var(--m-linie2)} html[data-design="13"] .switch input:checked + .sl{background:#1f6feb!important} html[data-design="13"] .switch .sl:before{background:#c9d1d9!important} html[data-design="13"] th{text-transform:uppercase;letter-spacing:.08em;font-size:.66rem!important;font-weight:600; color:#7d8590!important;border-bottom:2px solid #30363d!important;background:transparent!important} html[data-design="13"] td{border-bottom:1px solid var(--m-linie)!important} html[data-design="13"] tbody tr:nth-child(even){background:transparent!important} html[data-design="13"] tr:hover td{background:#161b22!important} html[data-design="13"] .log{color:#c9d1d9;background:#0d1117!important;font-family:ui-monospace,Menlo,monospace} html[data-design="13"] :is(.socbar,#pbarWrap,.lbalken,.foldbar){background:#21262d!important} html[data-design="13"] :is(.socbar>i,#pbar,#ladeleiste.an .lbalken){background:#6ea8fe!important} html[data-design="13"] a{color:#6ea8fe} html[data-design="13"] ::selection{background:#1f6feb;color:#fff} html[data-design="13"] ::-webkit-scrollbar{width:8px;height:8px} html[data-design="13"] ::-webkit-scrollbar-thumb{background:#30363d;border-radius:4px} /* Bewegung: Flaechen scannen sich von links ein, Scanner-Eintritt */ html[data-design="13"]:not([data-bewegung="aus"]) :is(.card,.karte,.kachel,.kpi,.pvcard,.pvtile,.ctlcard,.k,tbody tr){ animation:m-scan .4s ease-out both} html[data-design="13"]:not([data-bewegung="aus"]) :is(.card,.karte,.kachel,.kpi,.pvcard,.pvtile,.ctlcard,.k,tbody tr):nth-child(2){animation-delay:.04s} html[data-design="13"]:not([data-bewegung="aus"]) :is(.card,.karte,.kachel,.kpi,.pvcard,.pvtile,.ctlcard,.k,tbody tr):nth-child(3){animation-delay:.08s} html[data-design="13"]:not([data-bewegung="aus"]) :is(.card,.karte,.kachel,.kpi,.pvcard,.pvtile,.ctlcard,.k,tbody tr):nth-child(4){animation-delay:.12s} html[data-design="13"]:not([data-bewegung="aus"]) :is(.card,.karte,.kachel,.kpi,.pvcard,.pvtile,.ctlcard,.k,tbody tr):nth-child(5){animation-delay:.16s} html[data-design="13"]:not([data-bewegung="aus"]) :is(.card,.karte,.kachel,.kpi,.pvcard,.pvtile,.ctlcard,.k,tbody tr):nth-child(n+6){animation-delay:.2s} @keyframes m-scan{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}} html[data-design="13"]:not([data-bewegung="aus"]) body::after{content:'';position:fixed;left:0;right:0; bottom:0;height:100%;background:#0d1117;border-top:2px solid #6ea8fe;z-index:9500; pointer-events:none;animation:thema-scan .5s ease-out forwards} @keyframes thema-scan{to{height:0;border-color:transparent;visibility:hidden}} /* ======================= 6) Informationsfuehrung (2/5/13) ================= */ /* Sprungleiste (aus thema.js): alle Abschnitte der Seite als Chips, aktueller Abschnitt markiert; auf Handy/Tablet seitlich wischbar und oben klebend. */ #thema-sprung{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:4px 0 8px; margin:0 0 8px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity} #thema-sprung::-webkit-scrollbar{display:none} #thema-sprung a{flex:none;scroll-snap-align:start;font-size:.74rem;line-height:1;padding:8px 11px; min-height:var(--tap);display:inline-flex;align-items:center;border:1px solid var(--border,var(--rand,#444)); border-radius:99px;color:var(--muted,var(--grau,#999));text-decoration:none;white-space:nowrap; background:var(--card,var(--kar,transparent));transition:color .2s,border-color .2s} #thema-sprung a:hover,#thema-sprung a.an{color:var(--fg,#eee);border-color:var(--sky,var(--blau,var(--akz,#6ea8fe)))} #thema-sprung a.an{box-shadow:inset 0 0 0 1px var(--sky,var(--blau,var(--akz,#6ea8fe)))} html[data-design="2"] #thema-sprung a{border-radius:0} html[data-design="13"] #thema-sprung a{border-radius:6px;text-transform:uppercase;letter-spacing:.06em;font-size:.66rem} html[data-geraet="handy"] #thema-sprung,html[data-geraet="tablet"] #thema-sprung{position:sticky;top:0;z-index:30; background:var(--bg,#111);padding-top:6px;margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px} /* Hauptnavigation auf Handy: eine wischbare Zeile statt Knopfsalat */ html:not([data-design="1"])[data-geraet="handy"] body>nav, html:not([data-design="1"])[data-geraet="handy"] header nav{display:flex;flex-wrap:nowrap!important; overflow-x:auto;scrollbar-width:none;gap:6px;white-space:nowrap;-webkit-overflow-scrolling:touch} html:not([data-design="1"])[data-geraet="handy"] body>nav::-webkit-scrollbar{display:none} html:not([data-design="1"])[data-geraet="handy"] body>nav>*{flex:none;float:none!important;margin-top:0!important} /* Erste Kennzahlenreihe: die Zahl fuehrt, die Beschriftung folgt */ html:not([data-design="1"]) :is(.kpi,.kachel) :is(b,.w,.wert,strong:first-child){font-size:1.35em;line-height:1.15;display:inline-block} /* Zahlen in Spalten sauber untereinander; Kennzahlen groesser als Beschriftung; Sektionsueberschriften als ruhige Etiketten - Blick zuerst auf die Zahl, dann auf die Bedeutung (F-/Z-Muster, NN/g). */ html:not([data-design="1"]) :is(td,.kpi .w,.wert,.zahl,.num,.big){font-variant-numeric:tabular-nums} html:not([data-design="1"]) .kpi .w{font-size:calc(1.3rem*var(--dichte))} html:not([data-design="1"]) .badge{font-weight:600} html:not([data-design="1"]) .hinweis.warn,html:not([data-design="1"]) .warn{border-left:3px solid var(--amber,var(--gelb,#d29922))} html:not([data-design="1"]) :is(.card,.karte)>h2:first-child{margin-top:0} html:not([data-design="1"]) .fuss,html:not([data-design="1"]) .fusszeile{opacity:.75}