/* ================= DESIGN "STROM" AM SCHREIBTISCH (ab 681 px) - Aufbau A, B, C (10.11.2026) =================
   David, 10.11.2026, 17:23: "Ich möchte parallel in einem eigenen Chat dieses Design umsetzen. Angepasst für die
   Desktopansicht und passend für die Arbeitsabläufe am PC." 18:05: "Alle 3 Varianten zur Auswahl in der Konfiguretion".

   Gehört dem Schreibtisch-Chat (docs/design/strom/VERTRAG.md, Abschnitt 4). ALLES steht in @media (min-width:681px):
   am Handy tut diese Datei nichts (dort: css/handy_seiten.css). Farben, Schrift und Rundungen kommen aus
   css/strom_tokens.css (gehört dem Handy-Chat); eigene Werte heissen --gs-...

   Aufbau (<html data-strom-aufbau>, gesetzt von js/schreibtisch_strom.js, Wahl "Aufbau Strom" in der Tafel Design):
   A  Reiter als Leiste links (mit Zeichen), Gespräch mit Davina als Spalte rechts in jedem Reiter
      (Material "Supporting pane"). Unter 1600 px zeigt die Leiste nur Zeichen, unter 1101 px wird das Gespräch
      ein Fenster auf Knopfdruck.
   B  Reiter oben über die ganze Breite, Davina als Eingabeleiste unten in jedem Reiter; ein Klick hinein zeigt den
      Verlauf darüber. (Vorgabe - am nächsten an der bisherigen Bedienung.)
   C  Reiter oben als Pillen, Heute als Übersicht in Kacheln, Davina als Seitenfenster über den Knopf unten rechts.
   In allen dreien bleibt der Reiter D.A.V.I.N.A. bei seinen drei Spalten und den vier Anordnungen (layout.css).

   Glas mit Maß (gemessen 10.11.2026, 17:52, Headless-Chrome mit Software-Zeichnung, 1920 px - nur Richtwert):
   Unschärfe auf allen Karten 60 -> 34 Bilder/s, die Partikel 60 -> 31. Deshalb: Partikel hinter Text aus, dichte
   Flächen (Kalender) fast deckend ohne Unschärfe, Flächen in Karten ohne Unschärfe (keine Unschärfe in der Unschärfe).
   ========================================================================================================== */

@media (min-width:681px){

  :root[data-thema="strom"]{
    --gs-kopf:44px; --gs-band:30px; --gs-rand:14px;
    --gs-leiste:212px; --gs-leiste-schmal:64px; --gs-gespraech:360px; --gs-fenster:400px;
    --gs-text:15px; --gs-neben:13px; --gs-knopf:32px; --gs-hauptknopf:34px; --gs-feld:34px;
  --gs-sym-heute:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h10'/%3E%3C/svg%3E");
  --gs-sym-entscheidungen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --gs-sym-eingang:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13l2.5-7h11L20 13v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z'/%3E%3Cpath d='M4 13h5l1 2h4l1-2h5'/%3E%3C/svg%3E");
  --gs-sym-bereiche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='2'/%3E%3Crect x='13' y='4' width='7' height='7' rx='2'/%3E%3Crect x='4' y='13' width='7' height='7' rx='2'/%3E%3Crect x='13' y='13' width='7' height='7' rx='2'/%3E%3C/svg%3E");
  --gs-sym-kalender:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17'/%3E%3C/svg%3E");
  --gs-sym-lebensrad:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 3.5v17M3.5 12h17M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --gs-sym-jarvis:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1'/%3E%3C/svg%3E");
  --gs-sym-suche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E");
  --gs-sym-eigen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h12v16l-6-4-6 4z'/%3E%3C/svg%3E");
  --gs-sym-mic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21'/%3E%3C/svg%3E");
  --gs-sym-rec:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7.5'/%3E%3Ccircle cx='12' cy='12' r='3' fill='black'/%3E%3C/svg%3E");
  --gs-sym-tts:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z'/%3E%3Cpath d='M15.5 9a4 4 0 0 1 0 6M18 6.5a7.5 7.5 0 0 1 0 11'/%3E%3C/svg%3E");
  --gs-sym-net:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.6 2.8 2.6 14.2 0 17M12 3.5c-2.6 2.8-2.6 14.2 0 17'/%3E%3C/svg%3E");
  --gs-sym-snd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V6l10-2v12'/%3E%3Ccircle cx='6.5' cy='18' r='2.5'/%3E%3Ccircle cx='16.5' cy='16' r='2.5'/%3E%3C/svg%3E");
  --gs-sym-hilfe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .8-1 1.5v.7M12 17h.01'/%3E%3C/svg%3E");
  }

  /* ---- Grund: weiche Farbflächen, keine Partikel, kein Raster ---- */
  :root[data-thema="strom"] body{background:var(--g-grund);color:var(--text);font-family:var(--g-schrift);font-size:var(--gs-text);line-height:1.45}
  :root[data-thema="strom"] body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:
    radial-gradient(48% 46% at 4% 0%, var(--g-klecks1), transparent 72%),
    radial-gradient(40% 44% at 102% 18%, var(--g-klecks2), transparent 72%),
    radial-gradient(56% 40% at 46% 108%, var(--g-klecks3), transparent 72%),
    var(--g-grund)}
  :root[data-thema="strom"] #partikelBuehne,:root[data-thema="strom"] body .fx{display:none!important}
  :root[data-thema="strom"] body *{text-shadow:none;letter-spacing:0;text-transform:none}
  :root[data-thema="strom"] body :is(button,input,select,textarea){font-family:inherit}
  :root[data-thema="strom"] ::selection{background:var(--g-akzent-zart)}
  :root[data-thema="strom"] body :focus-visible{outline:3px solid var(--akzent);outline-offset:2px}
  :root[data-thema="strom"] body ::-webkit-scrollbar{width:8px;height:8px}
  :root[data-thema="strom"] body ::-webkit-scrollbar-thumb{background:var(--g-strich);border-radius:4px}
  :root[data-thema="strom"] body ::-webkit-scrollbar-track{background:transparent}
  :root[data-thema="strom"] body :is(.col,#chat,#heute,#entscheidungen,.vizmagic,.vizkamera){scrollbar-color:var(--g-strich) transparent;scrollbar-width:thin}
  :root[data-thema="strom"] a{color:var(--akzent);text-underline-offset:3px}

  /* ---- Kopfzeile: Glas, ruhig. "REC" ist nur die Laufzeit (ui.js) und steht schon in der Karte System ---- */
  :root[data-thema="strom"] body .app{grid-template-rows:var(--gs-kopf) var(--gs-band) minmax(0,1fr) var(--gs-band)}
  :root[data-thema="strom"] body:not(.jarvis) .app{grid-template-rows:var(--gs-kopf) minmax(0,1fr)}
  :root[data-thema="strom"] body .masthead{background:var(--g-glas-stark);-webkit-backdrop-filter:var(--g-unschaerfe-stark);backdrop-filter:var(--g-unschaerfe-stark);
    border-bottom:1px solid var(--g-kante);padding:0 18px;gap:14px}
  :root[data-thema="strom"] body .masthead .mark{font-size:0;color:var(--text);display:flex;align-items:baseline;gap:10px}
  :root[data-thema="strom"] body .masthead .mark::before{content:"D.A.V.I.N.A.";font-size:17px;font-weight:750;color:var(--text)}
  :root[data-thema="strom"] body .masthead .mark>span:not(#verLabel),:root[data-thema="strom"] body .masthead .mark i{display:none}
  :root[data-thema="strom"] body .masthead #verLabel{font-size:var(--gs-neben);color:var(--g-leise);margin-left:0!important}
  :root[data-thema="strom"] body .mhead-r{font-size:var(--gs-neben);color:var(--g-leise);gap:16px}
  :root[data-thema="strom"] body .mhead-r b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
  :root[data-thema="strom"] body .rec{display:none}
  @media (max-width:1100px){ :root[data-thema="strom"] body .mhead-r span:has(#mLat){display:none} }

  /* ---- Laufbänder (Kurse, Meldungen): bleiben, aber ruhig ---- */
  :root[data-thema="strom"] body :is(.tickerbar,.newsbar){background:var(--g-glas2);border-color:var(--g-kante)}
  :root[data-thema="strom"] body .tickerbar .track{font-size:var(--gs-neben);padding:6px 0}
  :root[data-thema="strom"] body .newsbar .track{font-size:var(--gs-neben);color:var(--g-leise)}
  /* das Schild "Meldungen" deckend, sonst läuft der Text sichtbar darunter durch */
  :root[data-thema="strom"] body .newsbar .lbl{position:relative;z-index:1;font-family:inherit;font-size:12px;font-weight:650;color:var(--warn);
    background:var(--g-fest);box-shadow:inset 0 0 0 100px var(--g-rot-zart);border-radius:0 10px 10px 0}
  :root[data-thema="strom"] body :is(.tk,.tk b){color:var(--text)}
  :root[data-thema="strom"] body .tk{color:var(--g-leise)}

  /* ---- Hauptbereich ---- */
  :root[data-thema="strom"] body .main{padding:var(--gs-rand);gap:var(--gs-rand)}
  :root[data-thema="strom"] body :is(.col,.center){gap:12px}
  :root[data-thema="strom"] body .center{container-type:normal}   /* sonst Bezugsrahmen fuer position:fixed/absolute (wie handy.css .hg) */
  /* ohne die Eindämmung oben bestimmte der breiteste Inhalt die Breite der Mitte - das Raster lief bei 1024 px über den
     Rand (gemessen 1194 px). min-width:0 lässt die Spalten wieder schrumpfen. */
  :root[data-thema="strom"] body :is(.center,.col){min-width:0}

  /* ---- Karte: Glas auf dem ::before (so bleiben Menüe mit position:fixed in der Karte frei) ---- */
  :root[data-thema="strom"] body .card{background:none;border:0;border-radius:var(--g-rund-karte);box-shadow:none;padding:14px 16px 16px}
  :root[data-thema="strom"] body .card::after{display:none}
  :root[data-thema="strom"] body .card::before{content:"";display:block!important;position:absolute;inset:0;z-index:-1;width:auto;height:auto;pointer-events:none;
    border-radius:inherit;background:var(--g-glas);-webkit-backdrop-filter:var(--g-unschaerfe);backdrop-filter:var(--g-unschaerfe);
    border:1px solid var(--g-rand);box-shadow:0 0 0 1px var(--g-kante),var(--g-schatten)}
  :root[data-thema="strom"] body .card .card{padding:12px 14px;border-radius:16px}
  :root[data-thema="strom"] body .card .card::before{background:var(--g-glas2);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:var(--g-kante);box-shadow:none}
  :root[data-thema="strom"] body .ch{font-family:inherit;font-size:15px;font-weight:650;color:var(--text);gap:8px;margin-bottom:10px;min-height:var(--gs-knopf)}
  :root[data-thema="strom"] body .ch::before{display:none}
  :root[data-thema="strom"] body .ch em{font-size:var(--gs-neben);font-weight:500;color:var(--g-leise)}
  :root[data-thema="strom"] body .ch em.sim{color:var(--g-gelb)}
  :root[data-thema="strom"] body .ch.gross,:root[data-thema="strom"] body .gruppe{font-size:12px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--g-leise)}
  :root[data-thema="strom"] body .gruppe{border:0;padding:8px 4px 0;margin-top:4px}
  :root[data-thema="strom"] body .klapp{color:var(--g-leise)}
  :root[data-thema="strom"] body .card.leer .ch{color:var(--g-leise)}

  /* ---- Knöpfe: ruhig; der Hauptknopf (.primary) ist deckend ---- */
  :root[data-thema="strom"] body .sbtn{font-size:13.5px;font-weight:600;line-height:1.2;color:var(--text);background:var(--g-glas2);border:1px solid var(--g-kante);
    border-radius:12px;padding:6px 12px;min-height:var(--gs-knopf);box-shadow:none;transition:background-color .15s,border-color .15s,color .15s}
  :root[data-thema="strom"] body .sbtn:hover{background:var(--g-akzent-zart);border-color:var(--akzent);color:var(--akzent)}
  :root[data-thema="strom"] body .sbtn.on{background:var(--g-akzent-zart);border-color:var(--akzent);color:var(--akzent)}
  :root[data-thema="strom"] body .sbtn.primary{background:var(--akzent);border-color:transparent;color:var(--auf-akzent);min-height:var(--gs-hauptknopf);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 18px -12px var(--akzent)}
  :root[data-thema="strom"] body .sbtn.primary:hover{filter:brightness(1.08);color:var(--auf-akzent)}
  :root[data-thema="strom"] body :is(.sbtn.gefahr,.sbtn.dublRot:not(:disabled)){color:var(--warn);border-color:rgba(var(--warn-rgb),.45);background:var(--g-rot-zart)}
  :root[data-thema="strom"] body .sbtn.warnBtn{color:var(--g-gelb);border-color:currentColor;background:var(--g-gelb-zart)}
  :root[data-thema="strom"] body .sbtn:disabled{opacity:.45;filter:none}
  :root[data-thema="strom"] body .ch .sbtn+.sbtn{margin-left:0}
  :root[data-thema="strom"] body .kartChip{border-radius:999px}

  /* ---- Felder ---- */
  :root[data-thema="strom"] body :is(input[type=text],input[type=search],input[type=password],input[type=email],input[type=url],input[type=number],
    input[type=date],input[type=time],input[type=datetime-local],input[type=tel],input:not([type]),textarea,select):not(#field){
    font-size:14px;color:var(--text);background:var(--g-feld);border:1px solid var(--g-strich);border-radius:12px;padding:6px 10px;min-height:var(--gs-feld);box-shadow:none}
  :root[data-thema="strom"] body :is(input,textarea,select):not(#field):focus{outline:none;border-color:var(--akzent);box-shadow:0 0 0 3px var(--g-akzent-zart)}
  :root[data-thema="strom"] body ::placeholder{color:var(--g-leise);opacity:.85}
  :root[data-thema="strom"] body input[type=range]{accent-color:var(--akzent)}
  :root[data-thema="strom"] body input:is([type=checkbox],[type=radio]){accent-color:var(--akzent)}
  :root[data-thema="strom"] body .ctl{font-size:14px;color:var(--text);margin:8px 0;gap:10px}
  :root[data-thema="strom"] body .ctl label{width:128px;font-size:var(--gs-neben);font-weight:600;color:var(--g-leise)}
  :root[data-thema="strom"] body .ctl .val{width:auto;min-width:40px;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}

  /* ---- Einträge, Werte, Hinweise ---- */
  :root[data-thema="strom"] body .item{padding:9px 6px;gap:10px;border-top:1px solid var(--line);font-size:14px;border-radius:10px}
  :root[data-thema="strom"] body .item:hover{background:var(--g-glas2)}
  :root[data-thema="strom"] body .item .txt{color:var(--text)}
  :root[data-thema="strom"] body :is(.due,.item .due,.item .fristHerleitung,.note.fristHerleitung){font-size:12.5px;color:var(--g-leise)}
  :root[data-thema="strom"] body .item .box{width:18px;height:18px;border:1.5px solid var(--g-strich);border-radius:5px;background:none}
  :root[data-thema="strom"] body .item .box.on{background:var(--akzent);border-color:var(--akzent);color:var(--auf-akzent)}
  :root[data-thema="strom"] body .item.gewaehlt{background:var(--g-akzent-zart)}
  :root[data-thema="strom"] body .item.soon .due{color:var(--g-gelb)}
  :root[data-thema="strom"] body .item.over .due{color:var(--warn)}
  :root[data-thema="strom"] body .item.f-gruen{border-left-color:var(--g-gruen)}
  :root[data-thema="strom"] body .item.f-gelb{border-left-color:var(--g-gelb)}
  :root[data-thema="strom"] body .item:is(.f-rot,.f-ueber,.f-blink){border-left-color:var(--warn)}
  :root[data-thema="strom"] body .item.treffer{background:var(--g-gruen-zart)}
  :root[data-thema="strom"] body :is(.note,.bankAutoInfo){font-size:var(--gs-neben);line-height:1.5;color:var(--g-leise)}
  :root[data-thema="strom"] body :is(code,.note code){font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.875em;color:var(--text);
    background:var(--g-glas2);border-radius:6px;padding:1px 5px;overflow-wrap:anywhere}
  :root[data-thema="strom"] body .kv{font-size:14px;color:var(--g-leise);margin:6px 0;gap:12px}
  :root[data-thema="strom"] body .kv b{color:var(--text);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
  :root[data-thema="strom"] body .meter{height:6px;border-radius:3px;background:var(--g-glas2);margin:3px 0 9px}
  :root[data-thema="strom"] body .meter i{background:var(--akzent);box-shadow:none;border-radius:3px}
  :root[data-thema="strom"] body .drop{border:1.5px dashed var(--g-strich);border-radius:16px;background:var(--g-glas2);color:var(--g-leise)}
  :root[data-thema="strom"] body .drop b{color:var(--akzent)}

  /* ---- Fenster "Übereinstimmung erkannt" (Farben stehen im HTML, deshalb !important) und Zierrat ---- */
  :root[data-thema="strom"] #treffPopup{background:var(--g-schleier)!important}
  :root[data-thema="strom"] #treffPopup>div{max-width:440px!important;border:1px solid var(--g-rand)!important;border-radius:var(--g-rund-blatt);padding:22px 24px!important;
    background:var(--g-glas-stark)!important;-webkit-backdrop-filter:var(--g-unschaerfe-stark);backdrop-filter:var(--g-unschaerfe-stark);box-shadow:0 0 0 1px var(--g-kante),var(--g-schatten)!important}
  :root[data-thema="strom"] #treffPopup [style*="Chakra"]{font-family:inherit!important;font-size:18px!important;font-weight:700;color:var(--g-gruen)!important}
  :root[data-thema="strom"] #treffPopupInhalt{font-size:15px!important;color:var(--text)!important}
  :root[data-thema="strom"] #treffPopupOk{background:var(--akzent);border-color:transparent;color:var(--auf-akzent);min-height:var(--gs-hauptknopf)}
  :root[data-thema="strom"] body .suit{display:none!important}

  /* ---- Menüs einer Karte (Glas, stark) ---- */
  :root[data-thema="strom"] body .kartMehrMenue{background:var(--g-glas-stark);-webkit-backdrop-filter:var(--g-unschaerfe-stark);backdrop-filter:var(--g-unschaerfe-stark);
    border:1px solid var(--g-rand);border-radius:16px;box-shadow:0 0 0 1px var(--g-kante),0 18px 40px -16px rgba(10,12,25,.55);padding:6px}
  :root[data-thema="strom"] body .kartMehrMenue .sbtn{background:none;border-color:transparent;border-radius:10px;font-weight:500}
  :root[data-thema="strom"] body .kartMehrMenue .sbtn:hover{background:var(--g-glas2);color:var(--text);border-color:transparent}
  :root[data-thema="strom"] body .kartMehrMenue .mGruppe{font-size:12px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--g-leise)}

  /* ---- D.A.V.I.N.A.: Anzeigen (Wheel of Life, Kernstatus, Audiopegel, Kamera, Magic) ---- */
  :root[data-thema="strom"] body .viz{background:var(--g-glas);-webkit-backdrop-filter:var(--g-unschaerfe);backdrop-filter:var(--g-unschaerfe);
    border:1px solid var(--g-rand);border-radius:var(--g-rund-karte);box-shadow:0 0 0 1px var(--g-kante),var(--g-schatten)}
  :root[data-thema="strom"] body .viz::before,:root[data-thema="strom"] body .viz::after{display:none}
  :root[data-thema="strom"] body .viz .tag{font-family:inherit;font-size:var(--gs-neben);color:var(--g-leise);top:10px;left:14px}
  :root[data-thema="strom"] body .viz .tag b{color:var(--text);font-weight:650}
  :root[data-thema="strom"] body .viz .rb{font-size:12px;color:var(--g-leise)}
  :root[data-thema="strom"] body :is(.vizmagic,.vizkamera,.vizwheelmagic){padding:12px 14px}
  /* Titel des Wheel of Life lief unter den Knopf "Stand festhalten" (schon vorher, Befund 10.11.2026) */
  :root[data-thema="strom"] body .vizwheel .tag{right:136px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Reiter D.A.V.I.N.A.: Eingabezeile und Verlauf behalten ihren Platz; werden die Anzeigen darüber zu hoch, rollen sie
     in sich (vorher schob die Höhe die Eingabezeile bei 800 px Fensterhöhe unter den Rand) */
  :root[data-thema="strom"] body.jarvis #jarvis{min-height:0;overflow:hidden}
  :root[data-thema="strom"] body.jarvis #jarvis .band.hudmagic{flex:0 1 auto;min-height:150px;overflow-y:auto;scrollbar-width:thin}
  :root[data-thema="strom"] body.jarvis #chat{min-height:96px}
  :root[data-thema="strom"] body #jarvis .inputrow{flex-shrink:0}

  /* ---- Gespräch: Blasen, Eingabezeile mit ruhigen Zeichen statt fünf gefüllter Knöpfe ---- */
  :root[data-thema="strom"] body #chat{gap:10px;padding:4px 6px 4px 2px}
  :root[data-thema="strom"] body .msg{font-size:15px;line-height:1.5;padding:9px 13px;border:0;border-radius:18px;max-width:min(88%,72ch)}
  :root[data-thema="strom"] body .msg.ai{align-self:flex-start;background:var(--g-glas2);color:var(--text);border-bottom-left-radius:6px}
  :root[data-thema="strom"] body .msg.me{align-self:flex-end;background:var(--akzent);color:var(--auf-akzent);border-bottom-right-radius:6px}
  :root[data-thema="strom"] body .msg.sys{align-self:stretch;max-width:none;background:var(--g-gelb-zart);color:var(--text);font-size:var(--gs-neben);border-radius:12px;opacity:1}
  :root[data-thema="strom"] body .msg .who{font-family:inherit;font-size:12px;font-weight:650;color:var(--g-leise);margin-bottom:2px}
  :root[data-thema="strom"] body .msg.me .who{display:none}
  :root[data-thema="strom"] body .msg.ai .who{color:var(--akzent)}
  :root[data-thema="strom"] body .msg.me :is(a,code){color:var(--auf-akzent)}
  :root[data-thema="strom"] body .inputrow{height:auto;min-height:48px;padding:6px 6px 6px 14px;gap:2px;border:1px solid var(--g-strich);border-radius:18px;
    background:var(--g-feld);box-shadow:none}
  :root[data-thema="strom"] body .inputrow:focus-within{border-color:var(--akzent);box-shadow:0 0 0 3px var(--g-akzent-zart)}
  :root[data-thema="strom"] body .inputrow .pre{display:none}
  :root[data-thema="strom"] body #field{font-size:15px;color:var(--text);height:34px}
  :root[data-thema="strom"] body #field:focus-visible{outline:none}
  :root[data-thema="strom"] body .inputrow .ib{width:var(--gs-knopf);height:var(--gs-knopf);min-width:0;min-height:0;padding:0;font-size:0;border:1px solid transparent;
    border-radius:10px;background:none;color:var(--g-leise);display:grid;place-items:center;box-shadow:none;animation:none}
  :root[data-thema="strom"] body .inputrow .ib::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:var(--gs-ib) center/contain no-repeat;mask:var(--gs-ib) center/contain no-repeat}
  :root[data-thema="strom"] body #micBtn{--gs-ib:var(--gs-sym-mic)}
  :root[data-thema="strom"] body #recBtn{--gs-ib:var(--gs-sym-rec)}
  :root[data-thema="strom"] body #ttsBtn{--gs-ib:var(--gs-sym-tts)}
  :root[data-thema="strom"] body #netBtn{--gs-ib:var(--gs-sym-net)}
  :root[data-thema="strom"] body #sndBtn{--gs-ib:var(--gs-sym-snd)}
  :root[data-thema="strom"] body #hilfeBtn{--gs-ib:var(--gs-sym-hilfe)}
  :root[data-thema="strom"] body .inputrow .ib:hover{background:var(--g-glas2);border-color:var(--g-kante);color:var(--text)}
  :root[data-thema="strom"] body .inputrow .ib.on{background:var(--g-akzent-zart);color:var(--akzent)}
  :root[data-thema="strom"] body .inputrow .ib.live{background:var(--warn);border-color:var(--warn);color:var(--g-fest)}
  :root[data-thema="strom"] body .inputrow #micBtn{order:9;margin-left:6px;width:38px;height:38px;border-radius:19px;background:var(--g-akzent-zart);color:var(--akzent)}
  :root[data-thema="strom"] body .inputrow #micBtn.live{background:var(--warn);color:var(--g-fest)}
  :root[data-thema="strom"] body .chatNeu{border-radius:999px}

  /* ---- Reiter: Grundform (Aufbau B) - Text mit Unterstrich, Gross- und Kleinschreibung ---- */
  :root[data-thema="strom"] body .center .tabs{padding:0;gap:2px;justify-content:flex-start;align-items:center}
  :root[data-thema="strom"] body .tab{font-family:inherit;font-size:14px;font-weight:600;color:var(--g-leise);background:none;border:0;border-bottom:2px solid transparent;
    border-radius:0;padding:0 12px;min-height:40px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:color .15s,border-color .15s}
  :root[data-thema="strom"] body .tab:hover{color:var(--text);border-bottom-color:var(--g-strich);background:none}
  :root[data-thema="strom"] body .tab.on{color:var(--akzent);border-bottom-color:var(--akzent);background:none;font-weight:650}
  :root[data-thema="strom"] body .tab.tabSuche{margin-left:auto}
  :root[data-thema="strom"] body .tab[data-tab="jarvis"]{margin-left:0}
  :root[data-thema="strom"] body #sekStat{position:static;transform:none;margin-left:12px;font-size:12.5px;color:var(--g-leise)}
  /* Zeichen vor jedem Reiter (Masken, Farbe = Schrift) */
  :root[data-thema="strom"] body .tab::before{content:"";flex:none;width:18px;height:18px;background:currentColor;
    -webkit-mask:var(--gs-tab,var(--gs-sym-eigen)) center/contain no-repeat;mask:var(--gs-tab,var(--gs-sym-eigen)) center/contain no-repeat}
  :root[data-thema="strom"] body .tab[data-tab="heute"]{--gs-tab:var(--gs-sym-heute)}
  :root[data-thema="strom"] body .tab[data-tab="entscheidungen"]{--gs-tab:var(--gs-sym-entscheidungen)}
  :root[data-thema="strom"] body .tab[data-tab="eingang"]{--gs-tab:var(--gs-sym-eingang)}
  :root[data-thema="strom"] body .tab[data-tab="bereiche"]{--gs-tab:var(--gs-sym-bereiche)}
  :root[data-thema="strom"] body .tab[data-tab="kalender"]{--gs-tab:var(--gs-sym-kalender)}
  :root[data-thema="strom"] body .tab[data-tab="lebensrad"]{--gs-tab:var(--gs-sym-lebensrad)}
  :root[data-thema="strom"] body .tab[data-tab="jarvis"]{--gs-tab:var(--gs-sym-jarvis)}
  :root[data-thema="strom"] body .tab.tabSuche{--gs-tab:var(--gs-sym-suche)}
  :root[data-thema="strom"] body .tab.tabSuche::after{content:"S";font-size:11px;font-weight:650;color:var(--g-leise);border:1px solid var(--g-kante);border-radius:6px;padding:1px 5px;background:var(--g-glas2)}
  /* B und C: die Reiterleiste steht über der ganzen Breite, auch im Reiter D.A.V.I.N.A. (dort lag sie in der
     schmalen Mitte und brach in zwei bis drei Reihen um - Befund 10.11.2026 bei 1024 und 1280 px) */
  :root[data-thema="strom"]:not([data-strom-aufbau="a"]) body .main{position:relative;padding-top:calc(var(--gs-rand) + 52px)}
  :root[data-thema="strom"]:not([data-strom-aufbau="a"]) body .center .tabs{position:absolute;top:var(--gs-rand);left:var(--gs-rand);right:var(--gs-rand);height:44px;
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;border-bottom:1px solid var(--g-kante)}
  :root[data-thema="strom"]:not([data-strom-aufbau="a"]) body .center .tabs::-webkit-scrollbar{display:none}
  /* schmaler: erst weniger Abstand, unter 901 px nur noch Zeichen (der Name steht im Tooltip, js/schreibtisch_strom.js,
     und bleibt für Vorleseprogramme im Text) - so passen alle Reiter in eine Reihe (geprüft bei 681 px) */
  @media (max-width:1240px){
    :root[data-thema="strom"]:not([data-strom-aufbau="a"]) body .center .tabs #sekStat{display:none}
    :root[data-thema="strom"]:not([data-strom-aufbau="a"]) body .center .tabs .tab{padding:0 9px}
  }
  @media (max-width:900px){
    :root[data-thema="strom"]:not([data-strom-aufbau="a"]) body .center .tabs{gap:2px}
    :root[data-thema="strom"]:not([data-strom-aufbau="a"]) body .center .tabs .tab{font-size:0;padding:0;min-width:44px;justify-content:center}
    :root[data-thema="strom"]:not([data-strom-aufbau="a"]) body .center .tabs .tab::before{display:block;width:20px;height:20px}
    :root[data-thema="strom"]:not([data-strom-aufbau="a"]) body .center .tabs .tab.tabSuche::after{display:none}
  }

  /* ---- Ansichten ---- */
  :root[data-thema="strom"] body #heute{max-width:880px}
  :root[data-thema="strom"] body #heute>.card .ch.gross{margin-top:18px!important}
  :root[data-thema="strom"] body #entscheidungen{max-width:960px}
  :root[data-thema="strom"] body :is(#eingang,#bereiche){gap:14px}
  /* Kalender: dicht und lang - ruhige, fast deckende Fläche ohne Unschärfe */
  :root[data-thema="strom"] body #kalender .card::before{background:var(--g-glas-stark);-webkit-backdrop-filter:none;backdrop-filter:none}

  /* ---- Gespräch ausserhalb des Reiters D.A.V.I.N.A. (Grundform; jeder Aufbau sagt unten, wo es steht) ---- */
  :root[data-thema="strom"] body:not(.jarvis) #jarvis{gap:10px}
  :root[data-thema="strom"] body:not(.jarvis) #jarvis :is(.band,#praxisStart),:root[data-thema="strom"] body:not(.jarvis) #jarvis>div[style*="display:none"]{display:none!important}
  :root[data-thema="strom"] body .stromDavinaKnopf{display:none}
  /* in der schmalen Spalte (A) und im Fenster (C): das Feld bekommt eine eigene Zeile, die Zeichen stehen darunter */
  :root[data-thema="strom"]:is([data-strom-aufbau="a"],[data-strom-aufbau="c"]) body:not(.jarvis) #jarvis .inputrow{flex-wrap:wrap;padding:6px}
  :root[data-thema="strom"]:is([data-strom-aufbau="a"],[data-strom-aufbau="c"]) body:not(.jarvis) #jarvis #field{flex:1 1 100%;padding:0 8px}

  /* ================= AUFBAU A: Leiste links, Gespräch rechts ================= */
  :root[data-thema="strom"][data-strom-aufbau="a"] body .center .tabs{position:fixed;z-index:30;left:var(--gs-rand);top:calc(var(--gs-kopf) + var(--gs-rand));bottom:var(--gs-rand);
    width:var(--gs-leiste);flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:2px;padding:10px 8px;border-radius:var(--g-rund-karte);overflow-y:auto}
  :root[data-thema="strom"][data-strom-aufbau="a"] body.jarvis .center .tabs{top:calc(var(--gs-kopf) + var(--gs-band) + var(--gs-rand));bottom:calc(var(--gs-band) + var(--gs-rand))}
  :root[data-thema="strom"][data-strom-aufbau="a"] body .center .tabs::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
    background:var(--g-glas-stark);-webkit-backdrop-filter:var(--g-unschaerfe-stark);backdrop-filter:var(--g-unschaerfe-stark);border:1px solid var(--g-rand);box-shadow:0 0 0 1px var(--g-kante),var(--g-schatten)}
  :root[data-thema="strom"][data-strom-aufbau="a"] body .center .tabs .tab{border:1px solid transparent;border-radius:12px;min-height:38px;padding:0 10px;justify-content:flex-start;width:100%}
  :root[data-thema="strom"][data-strom-aufbau="a"] body .center .tabs .tab:hover{background:var(--g-glas2);border-color:transparent}
  :root[data-thema="strom"][data-strom-aufbau="a"] body .center .tabs .tab.on{background:var(--g-akzent-zart);border-color:var(--akzent)}
  :root[data-thema="strom"][data-strom-aufbau="a"] body .center .tabs .tab.tabSuche{margin-top:auto;margin-left:0}
  :root[data-thema="strom"][data-strom-aufbau="a"] body .center .tabs .tab.tabSuche::after{margin-left:auto}
  :root[data-thema="strom"][data-strom-aufbau="a"] body .center .tabs #sekStat{margin:6px 10px 2px;white-space:normal;display:block}
  :root[data-thema="strom"][data-strom-aufbau="a"] body .main{padding-left:calc(var(--gs-leiste) + 2 * var(--gs-rand))}
  /* das Gespräch als Spalte rechts in jedem Reiter ausser D.A.V.I.N.A. */
  :root[data-thema="strom"][data-strom-aufbau="a"] body:not(.jarvis) #jarvis{display:flex;position:fixed;z-index:30;right:var(--gs-rand);top:calc(var(--gs-kopf) + var(--gs-rand));
    bottom:var(--gs-rand);width:var(--gs-gespraech);padding:14px;border-radius:var(--g-rund-karte)}
  :root[data-thema="strom"][data-strom-aufbau="a"] body:not(.jarvis) .main{padding-right:calc(var(--gs-gespraech) + 2 * var(--gs-rand))}
  /* unter 1600 px nur Zeichen in der Leiste (Namen stehen im Tooltip und für Vorleseprogramme im Text) */
  @media (max-width:1599px){
    :root[data-thema="strom"][data-strom-aufbau="a"]{--gs-leiste:var(--gs-leiste-schmal)}
    :root[data-thema="strom"][data-strom-aufbau="a"] body .center .tabs .tab{font-size:0;justify-content:center;padding:0;min-height:44px}
    :root[data-thema="strom"][data-strom-aufbau="a"] body .center .tabs .tab::before{width:20px;height:20px}
    :root[data-thema="strom"][data-strom-aufbau="a"] body .center .tabs .tab.tabSuche::after,:root[data-thema="strom"][data-strom-aufbau="a"] body .center .tabs #sekStat{display:none}
  }
  /* unter 1101 px: das Gespräch wird ein Fenster auf Knopfdruck */
  @media (max-width:1100px){
    :root[data-thema="strom"][data-strom-aufbau="a"] body:not(.jarvis):not(.strom-gespraech) #jarvis{display:none}
    :root[data-thema="strom"][data-strom-aufbau="a"] body:not(.jarvis) .main{padding-right:var(--gs-rand)}
    :root[data-thema="strom"][data-strom-aufbau="a"] body:not(.jarvis) .stromDavinaKnopf{display:flex}
    :root[data-thema="strom"][data-strom-aufbau="a"] body:not(.jarvis) #jarvis{width:var(--gs-fenster);bottom:calc(var(--gs-rand) + 64px);z-index:40}
  }

  /* ================= AUFBAU B: Reiter oben, Davina unten ================= */
  :root[data-thema="strom"]:not([data-strom-aufbau="a"]):not([data-strom-aufbau="c"]) body:not(.jarvis) #jarvis{display:flex;order:99;flex:0 0 auto;padding:8px;
    border-radius:22px;position:relative;width:100%;max-width:1100px;margin:0 auto}
  :root[data-thema="strom"]:not([data-strom-aufbau="a"]):not([data-strom-aufbau="c"]) body:not(.jarvis):not(.strom-gespraech) #jarvis #chat,
  :root[data-thema="strom"]:not([data-strom-aufbau="a"]):not([data-strom-aufbau="c"]) body:not(.jarvis):not(.strom-gespraech) #jarvis .chatNeu{display:none!important}
  :root[data-thema="strom"]:not([data-strom-aufbau="a"]):not([data-strom-aufbau="c"]) body.strom-gespraech:not(.jarvis) #jarvis #chat{flex:0 1 auto;max-height:min(340px,42vh);min-height:0}

  /* ================= AUFBAU C: Übersicht zuerst, Davina als Seitenfenster ================= */
  :root[data-thema="strom"][data-strom-aufbau="c"] body .center .tabs{border-bottom:0;gap:4px}
  :root[data-thema="strom"][data-strom-aufbau="c"] body .tab{border:1px solid transparent;border-radius:999px;min-height:36px;padding:0 14px}
  :root[data-thema="strom"][data-strom-aufbau="c"] body .tab:hover{background:var(--g-glas2);border-color:transparent}
  :root[data-thema="strom"][data-strom-aufbau="c"] body .tab.on{color:var(--text);background:var(--g-glas-stark);border-color:var(--g-rand);box-shadow:0 0 0 1px var(--g-kante)}
  :root[data-thema="strom"][data-strom-aufbau="c"] body .tab::before{display:none}
  :root[data-thema="strom"][data-strom-aufbau="c"] body .tab.tabSuche::before{display:block}
  :root[data-thema="strom"][data-strom-aufbau="c"] body .tab.tabSuche{border-color:var(--g-kante);background:var(--g-glas2)}
  /* Heute als Übersicht: Abschnitte als Kacheln in zwei Spalten */
  :root[data-thema="strom"][data-strom-aufbau="c"] body #heute{max-width:1280px}
  :root[data-thema="strom"][data-strom-aufbau="c"] body #heute>.card{display:block!important;column-count:2;column-gap:16px;padding:18px}
  :root[data-thema="strom"][data-strom-aufbau="c"] body #heute>.card>.ch:first-child,:root[data-thema="strom"][data-strom-aufbau="c"] body #heute>.card>#heuteLage{column-span:all}
  :root[data-thema="strom"][data-strom-aufbau="c"] body #heute>.card>.ch:first-child{font-size:22px;font-weight:750}
  :root[data-thema="strom"][data-strom-aufbau="c"] body #heute>.card>#heuteLage{font-size:15px;color:var(--text);margin-bottom:6px}
  :root[data-thema="strom"][data-strom-aufbau="c"] body #heute>.card>.ch.gross{break-after:avoid;margin:14px 0 6px!important}
  :root[data-thema="strom"][data-strom-aufbau="c"] body #heute>.card>.ch.gross+div{break-inside:avoid;background:var(--g-glas2);border:1px solid var(--g-kante);border-radius:16px;padding:10px 12px;min-height:56px}
  @media (max-width:1100px){ :root[data-thema="strom"][data-strom-aufbau="c"] body #heute>.card{column-count:1} }
  /* das Gespräch als Seitenfenster über dem Inhalt */
  :root[data-thema="strom"][data-strom-aufbau="c"] body:not(.jarvis) .stromDavinaKnopf{display:flex}
  :root[data-thema="strom"][data-strom-aufbau="c"] body:not(.jarvis):not(.strom-gespraech) #jarvis{display:none}
  :root[data-thema="strom"][data-strom-aufbau="c"] body.strom-gespraech:not(.jarvis) #jarvis{display:flex;position:fixed;z-index:40;right:var(--gs-rand);top:calc(var(--gs-kopf) + var(--gs-rand));
    bottom:calc(var(--gs-rand) + 64px);width:var(--gs-fenster);max-width:calc(100vw - 2 * var(--gs-rand));padding:16px;border-radius:var(--g-rund-blatt)}

  /* Fenster-Glas für das Gespräch (A rechts, C und schmales A als Fenster), Leiste für B */
  :root[data-thema="strom"] body:not(.jarvis) #jarvis{isolation:isolate}
  :root[data-thema="strom"] body:not(.jarvis) #jarvis::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
    background:var(--g-glas-stark);-webkit-backdrop-filter:var(--g-unschaerfe-stark);backdrop-filter:var(--g-unschaerfe-stark);border:1px solid var(--g-rand);
    box-shadow:0 0 0 1px var(--g-kante),0 18px 44px -18px rgba(10,12,25,.5)}

  /* Knopf "Davina" unten rechts (js/schreibtisch_strom.js) */
  :root[data-thema="strom"] body .stromDavinaKnopf{position:fixed;z-index:41;right:calc(var(--gs-rand) + 4px);bottom:var(--gs-rand);height:48px;padding:0 20px 0 16px;
    border:0;border-radius:24px;background:var(--akzent);color:var(--auf-akzent);font-size:15px;font-weight:700;align-items:center;gap:10px;cursor:pointer;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 26px -10px var(--akzent)}
  :root[data-thema="strom"] body .stromDavinaKnopf svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  :root[data-thema="strom"] body .stromDavinaKnopf:hover{filter:brightness(1.08)}
  :root[data-thema="strom"] body.strom-gespraech .stromDavinaKnopf{background:var(--g-glas-stark);color:var(--text);box-shadow:0 0 0 1px var(--g-kante),var(--g-schatten)}
  :root[data-thema="strom"] body.strom-gespraech .stromDavinaKnopf span{display:none}
  :root[data-thema="strom"] body.strom-gespraech .stromDavinaKnopf::after{content:"Schließen"}

  /* ---- Tablet (681 bis 1100 px, Finger): Tippflächen mindestens 44 x 44 px ---- */
  @media (pointer:coarse){
    :root[data-thema="strom"] body :is(.sbtn,.tab,.inputrow .ib,select,input:not([type=checkbox]):not([type=radio]):not([type=range])){min-height:44px}
    :root[data-thema="strom"] body .inputrow .ib{width:44px;height:44px}
  }
}

/* ohne Unschärfe (alter Browser) oder wenn das Gerät weniger Durchsicht wünscht: feste Flächen */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @media (min-width:681px){
    :root[data-thema="strom"] body .card::before,:root[data-thema="strom"] body .viz,:root[data-thema="strom"] body .masthead,:root[data-thema="strom"] body .kartMehrMenue,:root[data-thema="strom"] body .center .tabs::before,:root[data-thema="strom"] body #jarvis::before{background:var(--g-fest)}
  }
}
@media (min-width:681px) and (prefers-reduced-transparency: reduce){
  :root[data-thema="strom"] body .card::before,:root[data-thema="strom"] body .viz,:root[data-thema="strom"] body .masthead,:root[data-thema="strom"] body .kartMehrMenue,:root[data-thema="strom"] body .center .tabs::before,:root[data-thema="strom"] body #jarvis::before{background:var(--g-fest);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (min-width:681px) and (prefers-reduced-motion: reduce){
  :root[data-thema="strom"] body :is(.tickerbar .track,.newsbar .track){animation:none}
}

/* Einzige Regel ausserhalb von "ab 681 px": die eigenen Elemente des Schreibtisch-Chats - die Auswahl "Aufbau Strom"
   (web/index.html) und der Knopf "Davina" (js/schreibtisch_strom.js) - wirken am Handy nicht und erscheinen dort deshalb
   auch nicht. So ändert sich am Handy nichts (Vergleich der Lage aller Elemente bei 390 px, 10.11.2026). */
@media (max-width:680px){ #stromAufbauZeile,#stromDavinaKnopf{display:none} }