/* ================= NEUE HANDY-BEDIENUNG: DAS AUSSEHEN DER BISHERIGEN SEITEN (10.11.2026) ================= David, 10.11.2026, 17:12, mit vier Bildschirmfotos (Davina, Planen, Kalender, Eingang): "In den unteren Ebenen ist das Design noch nicht umgesetzt. Setze das Design fuer alle Ansichten, Ebenen und Dialoge um. Auf der Dialog Seite sind die Knoepfe zu gross es muss harmonisch zusammenpassen." Solange die neue Bedienung an ist (js/handy_strom.js, hsNeu), traegt die Anwendung das Design "strom" (). Die Farben, die Schrift und die Rundungen stehen in css/strom_tokens.css - hier steht, wie die Bauteile der bisherigen Seiten damit aussehen: Karten aus Glas, ruhige Knoepfe mit einem deckenden Hauptknopf, runde Felder, Fenster als Blatt von unten. Alles in @media (max-width:680px); am Schreibtisch tut diese Datei nichts (dort: css/schreibtisch_strom.css, siehe docs/design/strom/VERTRAG.md). Zwei Dinge, die man wissen muss: - Schrift unter 16 px steht hier in rem, nicht in px: handy_rahmen.js (handySchriftAnheben) hebt jede px-Angabe unter 16 auf 16 an. Was hier kleiner sein soll (Nebenzeilen, Plaketten), ist so gewollt. - Das Glas einer Karte liegt auf ihrem ::before, nicht auf der Karte selbst. backdrop-filter an der Karte machte sie zum Bezugsrahmen fuer position:fixed und zu einer eigenen Ebene - Menues und Fenster, die in einer Karte stehen, saessen dann falsch oder unter der naechsten Karte. */ @media (max-width:680px){ /* ---- Grund: weiche Farbflaechen wie in der neuen Schicht (css/handy_strom.css, .boden) ---- */ :root[data-thema="strom"]{--gh-boden: radial-gradient(circle at 84% 56%, var(--g-klecks1) 0 64px, transparent 68px), radial-gradient(circle at 12% 80%, var(--g-klecks2) 0 84px, transparent 88px), radial-gradient(58% 42% at 6% 2%, var(--g-klecks1), transparent 72%), radial-gradient(54% 40% at 104% 24%, var(--g-klecks2), transparent 72%), radial-gradient(72% 42% at 44% 106%, var(--g-klecks3), transparent 72%), var(--g-grund)} :root[data-thema="strom"] body{background:var(--g-grund);color:var(--text);font-family:var(--g-schrift);font-size:16px;line-height:1.45} :root[data-thema="strom"] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--gh-boden)} :root[data-thema="strom"] body *{text-shadow: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:6px;height:6px} :root[data-thema="strom"] body ::-webkit-scrollbar-thumb{background:var(--g-strich);border-radius:3px} :root[data-thema="strom"] body ::-webkit-scrollbar-track{background:transparent} /* Partikel hinter Text: aus (die Figur auf der Buehne bleibt) */ :root[data-thema="strom"] #partikelBuehne{display:none!important} /* ---- Kopfzeile: Glas, bleibt oben stehen ---- */ :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)} :root[data-thema="strom"] #kopfTitel{font-size:22px;font-weight:700;color:var(--text)} :root[data-thema="strom"] body .kopfStatus{font-size:.875rem;color:var(--g-leise)} :root[data-thema="strom"] body .app{padding-bottom:calc(108px + env(safe-area-inset-bottom,0px))} :root[data-thema="strom"] .main{padding:12px} :root[data-thema="strom"] .col,:root[data-thema="strom"] .center{gap:12px} /* ---- Karte: Glas auf dem ::before (siehe oben) ---- */ :root[data-thema="strom"] .card{background:none;border:0;border-radius:var(--g-rund-karte);box-shadow:none;padding:14px 16px 16px} :root[data-thema="strom"] .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"] .card .card{padding:12px 14px 14px;border-radius:18px} :root[data-thema="strom"] .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 .card .ch{font-family:inherit;font-size:1.125rem;font-weight:650;color:var(--text);gap:8px;margin-bottom:8px;min-height:44px} :root[data-thema="strom"] .ch::before{display:none} :root[data-thema="strom"] .ch em{font-size:.875rem;font-weight:500;color:var(--g-leise)} :root[data-thema="strom"] .ch em.sim{color:var(--g-gelb)} :root[data-thema="strom"] body .gruppe{font-family:inherit;font-size:.8125rem;font-weight:600;letter-spacing:.06em!important;text-transform:uppercase!important; color:var(--g-leise);border:0;padding:10px 4px 2px;margin-top:6px} :root[data-thema="strom"] .klapp{color:var(--g-leise);font-size:1rem} /* ---- Knoepfe: ruhig; genau der Hauptknopf ist deckend ---- */ :root[data-thema="strom"] body :is(button,.sbtn,.ib,select,summary,[role=button]){min-height:44px!important} :root[data-thema="strom"] body :is(button,.sbtn,.ib,select,[role=button]){min-width:44px!important} :root[data-thema="strom"] body :is(.sbtn,.ib){font-family:inherit;font-size:.9375rem;font-weight:600;line-height:1.3;color:var(--text);background:var(--g-glas2); border:1px solid var(--g-kante);border-radius:var(--g-rund-knopf);padding:10px 14px;box-shadow:none;width:auto;height:auto} :root[data-thema="strom"] body :is(.sbtn,.ib):hover{color:var(--text);border-color:var(--g-strich)} :root[data-thema="strom"] body :is(.sbtn,.ib).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); box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 22px -12px var(--akzent)} :root[data-thema="strom"] body .sbtn.primary:hover{background:var(--akzent);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 :is(.sbtn,.ib):disabled{opacity:.45} :root[data-thema="strom"] body .ib.live{background:var(--warn);border-color:var(--warn);color:var(--grund)} :root[data-thema="strom"] .ch .sbtn+.sbtn{margin-left:0} :root[data-thema="strom"] .kartMehrBtn{font-size:1.125rem;padding:0 10px} :root[data-thema="strom"] .kartChip{border-radius:999px} :root[data-thema="strom"] a{color:var(--akzent);text-underline-offset:3px} /* ---- 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){ font-family:inherit;font-size:16px;color:var(--text);background:var(--g-feld);border:1px solid var(--g-strich); border-radius:var(--g-rund-feld);padding:10px 14px;min-height:48px!important;box-shadow:none} :root[data-thema="strom"] body :is(input,textarea,select):focus{outline:3px solid var(--akzent);outline-offset:2px;border-color:transparent;box-shadow:none} :root[data-thema="strom"] body ::placeholder{color:var(--g-leise);opacity:.85} :root[data-thema="strom"] body select{padding-right:8px} /* Haken und Wahlpunkt: 48 x 48 Tippflaeche (durchsichtiger Rand), sichtbar 24 px */ :root[data-thema="strom"] body input[type=checkbox]{background:transparent;background-clip:padding-box;border:12px solid transparent;border-radius:19px; box-shadow:inset 0 0 0 2px var(--g-strich)} :root[data-thema="strom"] body input[type=checkbox]:checked{background:var(--akzent);background-clip:padding-box;box-shadow:inset 0 0 0 2px var(--akzent)} :root[data-thema="strom"] body input[type=checkbox]:checked::after{left:8px;top:3px;width:6px;height:12px;border-color:var(--auf-akzent)} :root[data-thema="strom"] body input[type=radio]{background:transparent;background-clip:padding-box;border:12px solid transparent;border-radius:50%; box-shadow:inset 0 0 0 2px var(--g-strich)} :root[data-thema="strom"] body input[type=radio]:checked{background:radial-gradient(circle,var(--akzent) 0 5px,transparent 5.5px);background-clip:padding-box; box-shadow:inset 0 0 0 2px var(--akzent)} /* Schieber: duenne Spur, runder Griff (die Tippflaeche bleibt 48 px hoch) */ :root[data-thema="strom"] body input[type=range]{-webkit-appearance:none;appearance:none;background:none;height:48px;accent-color:var(--akzent)} :root[data-thema="strom"] body input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--g-strich)} :root[data-thema="strom"] body input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-10px;border-radius:50%; background:var(--akzent);border:2px solid var(--g-fest);box-shadow:0 2px 6px rgba(10,12,25,.3)} :root[data-thema="strom"] body input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--g-strich)} :root[data-thema="strom"] body input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--akzent);border:2px solid var(--g-fest)} /* Zeile "Beschriftung + Feld": die Beschriftung steht ueber dem Feld */ :root[data-thema="strom"] .ctl{flex-wrap:wrap;gap:4px 10px;margin:10px 0;font-size:16px;color:var(--text)} :root[data-thema="strom"] .ctl label{width:100%;flex:1 1 100%;font-size:.875rem;font-weight:600;color:var(--g-leise)} :root[data-thema="strom"] .ctl .val{width:auto;min-width:44px;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums} :root[data-thema="strom"] .addrow{gap:8px} /* ---- Eintraege, Hinweise, Werte ---- */ :root[data-thema="strom"] .item{padding:12px 0;gap:12px;border-top:1px solid var(--line);font-size:16px} :root[data-thema="strom"] .item .txt{color:var(--text)} :root[data-thema="strom"] body :is(.due,.item .due,.item .fristHerleitung,.note.fristHerleitung){font-size:.875rem;color:var(--g-leise)} /* Kaestchen: 24 px sichtbar, die Tippflaeche reicht mit ::after auf 44 px */ :root[data-thema="strom"] .item .box{position:relative;width:24px;height:24px;border:2px solid var(--g-strich);border-radius:7px;margin-top:0;background:none;font-size:.875rem} :root[data-thema="strom"] .item .box::after{content:"";position:absolute;inset:-12px} :root[data-thema="strom"] .item .box.on{background:var(--akzent);border-color:var(--akzent);color:var(--auf-akzent)} :root[data-thema="strom"] .item.done{opacity:.55} :root[data-thema="strom"] .item.gewaehlt{background:var(--g-akzent-zart);border-radius:12px} :root[data-thema="strom"] .item.soon .due{color:var(--g-gelb)} :root[data-thema="strom"] .item.over .due{color:var(--warn)} :root[data-thema="strom"] .item.vorgemerkt{background:var(--g-gelb-zart);border-left:3px solid var(--g-gelb);border-radius:0 12px 12px 0;padding-left:10px} :root[data-thema="strom"] .item:is(.f-gruen,.f-gelb,.f-rot,.f-ueber,.f-blink,.kat){padding-left:10px} :root[data-thema="strom"] .item.f-gruen{border-left-color:var(--g-gruen)} :root[data-thema="strom"] .item.f-gruen .due{color:var(--g-gruen)} :root[data-thema="strom"] .item.f-gelb{border-left-color:var(--g-gelb)} :root[data-thema="strom"] .item.f-gelb .due{color:var(--g-gelb)} :root[data-thema="strom"] .item:is(.f-rot,.f-ueber,.f-blink){border-left-color:var(--warn)} :root[data-thema="strom"] .item:is(.f-rot,.f-ueber,.f-blink) .due{color:var(--warn)} :root[data-thema="strom"] .item.treffer{margin-left:0;padding:10px 12px;background:var(--g-gruen-zart);border-left:4px solid var(--g-gruen);border-radius:14px} :root[data-thema="strom"] body :is(.note,.bankAutoInfo){font-size:.9375rem;line-height:1.45;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"] .kv{font-size:16px;color:var(--g-leise);margin:8px 0;gap:12px} :root[data-thema="strom"] .kv b{color:var(--text);font-weight:600;text-align:right} :root[data-thema="strom"] .meter{height:6px;border-radius:3px;background:var(--g-glas2);margin:4px 0 10px} :root[data-thema="strom"] .meter i{background:var(--akzent);box-shadow:none;border-radius:3px} /* ---- Menue einer Karte, Ansichtszeile ---- */ :root[data-thema="strom"] .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:18px;box-shadow:0 0 0 1px var(--g-kante),0 18px 40px -16px rgba(10,12,25,.55);padding:6px;gap:2px;min-width:220px} :root[data-thema="strom"] body .kartMehrMenue .sbtn{background:none;border-color:transparent;border-radius:12px;padding:12px;font-size:16px;font-weight:500;min-height:48px!important} :root[data-thema="strom"] body .kartMehrMenue .sbtn:hover{background:var(--g-glas2);border-color:transparent} :root[data-thema="strom"] .kartMehrMenue .mTrenner{background:var(--line);margin:4px 8px} :root[data-thema="strom"] body .kartMehrMenue .mGruppe{font-size:.75rem;font-weight:600;letter-spacing:.06em!important;text-transform:uppercase!important;color:var(--g-leise);padding:8px 12px 2px} :root[data-thema="strom"] .kartAnsicht{border:0;border-radius:16px;background:var(--g-glas2);padding:10px;gap:8px} :root[data-thema="strom"] .kartAnsicht label{font-size:.875rem;color:var(--g-leise)} :root[data-thema="strom"] .kartEingabe{border-top:1px solid var(--line);margin-top:10px;padding-top:10px} /* ---- Start und Anmeldung ---- */ /* Start: statt der Zeilen des Terminals der Name und ein Wort. Bei einem Startfehler (data-f, index.html) stehen die Zeilen da - lesbar, nicht versteckt. */ :root[data-thema="strom"] #boot{background:var(--gh-boden);color:var(--g-leise);font-family:var(--g-schrift);font-size:16px;letter-spacing:0;align-items:center;text-align:center;gap:6px;padding:0 24px} :root[data-thema="strom"] #boot:not([data-f]) .ln{display:none} :root[data-thema="strom"] #boot:not([data-f])::before{content:"Davina";font-size:34px;font-weight:700;color:var(--text)} :root[data-thema="strom"] #boot:not([data-f])::after{content:"startet …";font-size:16px;color:var(--g-leise)} :root[data-thema="strom"] #boot .hl{color:var(--text);font-weight:600} :root[data-thema="strom"] #gate{background:var(--gh-boden)!important;padding:16px} :root[data-thema="strom"] #gate>div{width:100%;max-width:400px!important;padding:24px 20px!important;border:1px solid var(--g-rand)!important;border-radius:var(--g-rund-karte); background:var(--g-glas)!important;-webkit-backdrop-filter:var(--g-unschaerfe);backdrop-filter:var(--g-unschaerfe);box-shadow:0 0 0 1px var(--g-kante),var(--g-schatten)} :root[data-thema="strom"] #gate [style*="Chakra"]{font-family:inherit!important;font-size:26px!important;font-weight:700;color:var(--text)!important} :root[data-thema="strom"] #gatePw{background:var(--g-feld)!important;border:1px solid var(--g-strich)!important;border-radius:var(--g-rund-feld);padding:10px 14px!important;color:var(--text)!important} :root[data-thema="strom"] body #gateBtn{min-height:52px!important;margin-top:14px!important;border-radius:16px;background:var(--akzent);border-color:transparent;color:var(--auf-akzent); box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 22px -12px var(--akzent)} :root[data-thema="strom"] #gateMsg{color:var(--warn)!important} /* ---- Fenster: Schleier, darauf ein Blatt von unten (starkes Glas) ---- */ :root[data-thema="strom"] .weckerAlarm{background:var(--g-schleier);align-items:flex-end} :root[data-thema="strom"] .weckerKasten{width:100%;max-width:none;min-width:0;max-height:92vh;overflow-y:auto;text-align:left;border:1px solid var(--g-rand);border-bottom:0; border-radius:var(--g-rund-blatt) var(--g-rund-blatt) 0 0;background:var(--g-glas-stark);-webkit-backdrop-filter:var(--g-unschaerfe-stark);backdrop-filter:var(--g-unschaerfe-stark); box-shadow:0 0 0 1px var(--g-kante),0 -6px 30px -16px rgba(10,12,25,.5);padding:16px 16px calc(20px + env(safe-area-inset-bottom,0px))} :root[data-thema="strom"] .heimKasten{min-height:82vh;max-height:94vh} :root[data-thema="strom"] body .weckerKasten>.ch{font-family:inherit;font-size:20px;font-weight:700;color:var(--text);min-height:48px;margin-bottom:8px} /* Wecker und Frist: eine Meldung, mittig */ :root[data-thema="strom"] :is(#weckerAlarm,#fristAlarm){align-items:center;padding:16px} :root[data-thema="strom"] :is(#weckerAlarm,#fristAlarm) .weckerKasten{width:100%;max-width:420px;text-align:center;border:1px solid var(--g-rand);border-radius:var(--g-rund-blatt); box-shadow:0 0 0 2px rgba(var(--warn-rgb),.55),var(--g-schatten);padding:24px 20px} :root[data-thema="strom"] .weckerZeit{font-family:inherit;font-size:40px;font-weight:700;color:var(--warn)} :root[data-thema="strom"] #treffPopup{background:var(--g-schleier)!important;align-items:flex-end!important} :root[data-thema="strom"] #treffPopup>div{width:100%;max-width:none!important;border:1px solid var(--g-rand)!important;border-bottom:0!important;border-radius:var(--g-rund-blatt) var(--g-rund-blatt) 0 0; 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)!important;padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px))!important} :root[data-thema="strom"] #treffPopup [style*="Chakra"]{font-family:inherit!important;font-size:20px!important;font-weight:700;color:var(--g-gruen)!important} /* Fenster, die das Skript an eine Stelle setzt (Termin, Adresse, Nachricht, Tastenkuerzel): am Handy ein Blatt von unten */ :root[data-thema="strom"] :is(.kalPop,.adressWahl,.kalHilfe){left:0!important;right:0!important;top:auto!important;bottom:0!important;width:auto!important;max-width:none;transform:none; max-height:88vh;overflow-y:auto;border:1px solid var(--g-rand);border-bottom:0;border-radius:var(--g-rund-blatt) var(--g-rund-blatt) 0 0; background:var(--g-glas-stark);-webkit-backdrop-filter:var(--g-unschaerfe-stark);backdrop-filter:var(--g-unschaerfe-stark); box-shadow:0 0 0 1px var(--g-kante),0 0 0 100vmax var(--g-schleier);padding:12px 16px calc(18px + env(safe-area-inset-bottom,0px))} :root[data-thema="strom"] :is(.kalPop,.adressWahl,.kalHilfe,.wsFeld) .kalPopKopf{min-height:48px;margin-bottom:8px} :root[data-thema="strom"] :is(.kalPop,.adressWahl,.kalHilfe,.wsFeld) .kalPopKopf b{font-family:inherit;font-size:20px;font-weight:700;color:var(--text)} :root[data-thema="strom"] body :is(.kalPop,.adressWahl,.kalHilfe,.wsFeld) .kalPopKopf .sbtn{width:48px;min-height:48px!important;padding:0;border-radius:24px;font-size:1.25rem;font-weight:400} :root[data-thema="strom"] :is(.kalPop,.item.bearbeiten) :is(.tform,.tformzeile){gap:8px} :root[data-thema="strom"] .kalPop .acts{gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)} :root[data-thema="strom"] .kalHilfeTab{font-size:16px} :root[data-thema="strom"] .kalHilfeTab kbd{font-size:.875rem;border-radius:6px;background:var(--g-glas2);border:1px solid var(--g-kante);padding:2px 6px} :root[data-thema="strom"] .mailLeserText{font-size:16px;line-height:1.5} :root[data-thema="strom"] .kontaktLupe{left:10px!important;right:10px!important;top:auto!important;bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;max-width:none;min-width:0; border:1px solid var(--g-rand);border-radius:var(--g-rund-karte);background:var(--g-glas-stark);-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);padding:14px 16px} :root[data-thema="strom"] .kontaktLupe h4{font-family:inherit;font-size:18px;font-weight:650;color:var(--text)} :root[data-thema="strom"] .kontaktLupe .kFeld{font-size:16px} :root[data-thema="strom"] .kontaktLupe .kFeld b{font-size:.875rem;font-weight:600;color:var(--g-leise)} /* Suche: Blatt von oben, das Feld gleich unter dem Daumen der anderen Hand */ :root[data-thema="strom"] .weltSuche{padding:0;background:var(--g-schleier)} :root[data-thema="strom"] .wsFeld{width:100%;max-height:92vh;border:1px solid var(--g-rand);border-top:0;border-radius:0 0 var(--g-rund-blatt) var(--g-rund-blatt); background:var(--g-glas-stark);-webkit-backdrop-filter:var(--g-unschaerfe-stark);backdrop-filter:var(--g-unschaerfe-stark); box-shadow:0 0 0 1px var(--g-kante),0 10px 30px -16px rgba(10,12,25,.5);padding:calc(8px + env(safe-area-inset-top,0px)) 16px 16px} :root[data-thema="strom"] #weltSucheFeld{min-height:56px!important;border-radius:18px;padding:10px 16px;font-size:16px;background:var(--g-feld);border:1px solid var(--g-strich);color:var(--text)} :root[data-thema="strom"] body .wsGruppe{font-size:.75rem;font-weight:600;letter-spacing:.06em!important;text-transform:uppercase!important;color:var(--g-leise);border-top:1px solid var(--line);margin:12px 2px 4px;padding-top:10px} /* Auswahl-Leiste (mehrere Eintraege gewaehlt): ueber der schwebenden Leiste */ :root[data-thema="strom"] .sammelLeiste{bottom:calc(96px + env(safe-area-inset-bottom,0px));border:1px solid var(--g-rand);border-radius:22px;background:var(--g-glas-stark); -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);max-width:calc(100vw - 20px)} :root[data-thema="strom"] .suit{display:none!important} /* ---- Kalender (die bisherige Seite; die neue Seite "Planen" steht in handy_strom.css) ---- */ /* In der bisherigen Bedienung (das Design kann dort ueber "Design" gelten): */ /* Leiste in drei Zeilen: Zeitraum mit Blaettern - Ansicht - Suche und der Hauptknopf. ::before und ::after der Leiste sind leere Zeilen von voller Breite: sie erzwingen den Umbruch zwischen den Gruppen. */ :root[data-thema="strom"] body:not(.hs-an) .kalLeiste{background:none;gap:6px 8px;padding:0 0 8px;align-items:center} :root[data-thema="strom"] body:not(.hs-an) .kalLeiste::before,:root[data-thema="strom"] body:not(.hs-an) .kalLeiste::after{content:"";flex:0 0 100%;height:0} :root[data-thema="strom"] body:not(.hs-an) .kalLeiste::before{order:4} :root[data-thema="strom"] body:not(.hs-an) .kalLeiste::after{order:6} :root[data-thema="strom"] body:not(.hs-an) .kalLeiste #kalZeitraum{order:1;flex:1 1 0;min-width:0;margin:0;font-family:inherit;font-size:1.125rem;font-weight:700;color:var(--text)} :root[data-thema="strom"] body:not(.hs-an) .kalLeiste #kalZurueckBtn{order:2} :root[data-thema="strom"] body:not(.hs-an) .kalLeiste #kalVorBtn{order:3} :root[data-thema="strom"] body:not(.hs-an) .kalLeiste #kalHeuteBtn{order:3} :root[data-thema="strom"] body:not(.hs-an) .kalLeiste :is(#kalZurueckBtn,#kalVorBtn){width:44px;padding:0;border-radius:22px;font-size:1.25rem;background:none;border-color:transparent} :root[data-thema="strom"] body:not(.hs-an) .kalLeiste #kalHeuteBtn{border-radius:22px;background:var(--g-akzent-zart);border-color:transparent;color:var(--akzent)} :root[data-thema="strom"] body:not(.hs-an) .kalLeiste [data-kalansicht]{order:5;flex:1 1 auto;padding:10px 8px;border-radius:22px;font-size:.875rem} :root[data-thema="strom"] body:not(.hs-an) .kalLeiste #kalSuche{order:7;flex:1 1 0;min-width:0} :root[data-thema="strom"] body:not(.hs-an) .kalLeiste #kalNeuBtn{order:8} :root[data-thema="strom"] body:not(.hs-an) .kalLeiste :is(.kalTrenner,.sp,#kalHilfeBtn){display:none} :root[data-thema="strom"] .kalHaupt{border:1px solid var(--g-rand);border-radius:18px;background:var(--g-glas);box-shadow:0 0 0 1px var(--g-kante)} :root[data-thema="strom"] :is(.kalEcke,.kalGanzLabel,.kalTagKopf,.kalGanz){background:var(--g-fest)} :root[data-thema="strom"] :is(.kalEcke,.kalGanzLabel,.kalStunde){font-size:.6875rem;color:var(--g-leise)} :root[data-thema="strom"] .kalEcke b{font-size:.75rem;color:var(--akzent)} :root[data-thema="strom"] .kalTagKopf{border-left:1px solid var(--line)} :root[data-thema="strom"] .kalTagKopf b{font-family:inherit;font-size:18px;font-weight:700} :root[data-thema="strom"] .kalTagKopf span{font-family:inherit;font-size:.8125rem;font-weight:600;color:var(--g-leise)} :root[data-thema="strom"] .kalGanz{border-left:1px solid var(--line);border-bottom:1px solid var(--line)} :root[data-thema="strom"] :is(.kalStunde,.kalZelle){border-top:1px solid var(--line)} :root[data-thema="strom"] .kalZelle{border-left:1px solid var(--line)} :root[data-thema="strom"] .kalZelle.heute{background:var(--g-akzent-zart)} :root[data-thema="strom"] .kalZelle.rand{background:var(--g-glas2)} :root[data-thema="strom"] .kalTermin{border-radius:8px;border-left:4px solid var(--akzent);background:var(--g-akzent-zart);box-shadow:none;font-size:.8125rem;padding:3px 6px} :root[data-thema="strom"] .kalTermin b{color:var(--text);font-weight:600} :root[data-thema="strom"] .kalTermin span{font-size:.75rem;color:var(--g-leise)} :root[data-thema="strom"] .kalTermin.gewaehlt{background:var(--g-gelb-zart);border-left-color:var(--g-gelb)} :root[data-thema="strom"] .kalChip{border-radius:8px;background:var(--g-akzent-zart);font-size:.8125rem;padding:3px 6px} :root[data-thema="strom"] .kalSeiteBlock{border:1px solid var(--line);border-radius:16px;padding:12px} :root[data-thema="strom"] .kalMiniTag{font-size:.875rem;border-radius:8px;padding:6px 0} :root[data-thema="strom"] .kalMiniKopfTag,:root[data-thema="strom"] .kalMiniKW{font-size:.75rem} :root[data-thema="strom"] :is(.kModusLeiste,.kalModusLeiste){border-radius:14px;background:var(--g-gelb-zart);border:1px solid var(--g-gelb);color:var(--text)} /* ---- Kalender in der neuen Bedienung (js/handy_kalender.js) - David, 10.11.2026, 22:14: "die unterste Kalenderansicht ist ungeeignet zum ansehen und bearbeiten. Alles Plump." Gemessen bei 320 px (so breit zeigt Davids Handy die Seite): zwei schmale Zeilen statt fuenf, das Raster fuellt den Bildschirm, "Neuer Termin" schwebt unten rechts. ::before und ::after der Leiste sind leere Zeilen voller Breite (Umbruch). ---- */ :root[data-thema="strom"] body.hs-an .kalLeiste{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;padding:0 0 4px;background:none} :root[data-thema="strom"] body.hs-an .kalLeiste::before,:root[data-thema="strom"] body.hs-an .kalLeiste::after{content:"";flex:0 0 100%;height:0} :root[data-thema="strom"] body.hs-an .kalLeiste::before{order:5} :root[data-thema="strom"] body.hs-an .kalLeiste::after{order:8} :root[data-thema="strom"] body.hs-an .kalLeiste :is(.kalTrenner,.sp,#kalHilfeBtn){display:none} /* Zeile 1: zurueck - Datum (darunter klein die Kalenderwoche) - vor - Heute */ :root[data-thema="strom"] body.hs-an .kalLeiste #kalZurueckBtn{order:1} :root[data-thema="strom"] body.hs-an .kalLeiste #kalZeitraum{order:2;flex:1 1 0;width:auto;min-width:0;min-height:44px;margin:0 2px;display:flex;flex-direction:column;justify-content:center; text-align:center;font-family:inherit;color:var(--text)} :root[data-thema="strom"] .hkHaupt{font-size:clamp(1rem,5vw,1.0625rem);font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :root[data-thema="strom"] .hkNeben{font-size:.75rem;font-weight:500;line-height:1.2;color:var(--g-leise);white-space:nowrap} :root[data-thema="strom"] body.hs-an .kalLeiste #kalVorBtn{order:3} :root[data-thema="strom"] body.hs-an .kalLeiste :is(#kalZurueckBtn,#kalVorBtn){flex:0 0 44px;width:44px;padding:0;border-radius:22px;background:none;border-color:transparent; font-size:1.375rem;font-weight:400;line-height:1;color:var(--text)} /* "Heute": 44 px Tippflaeche, sichtbar 36 px (durchsichtiger Rand) */ :root[data-thema="strom"] body.hs-an .kalLeiste #kalHeuteBtn{order:4;margin-left:6px;height:44px;padding:0 14px;border:4px solid transparent;border-radius:22px; background:var(--g-akzent-zart) padding-box;color:var(--akzent);font-size:.875rem} :root[data-thema="strom"] body.hs-an .kalLeiste #kalHeuteBtn.hkIst{background:var(--g-glas2) padding-box;color:var(--g-leise)} /* Zeile 2: die fuenf Ansichten als ein Schalter, daneben die Lupe. Die Grundbreite darf nicht 0 sein: ein Teil ohne Breite passt immer noch in die Zeile des Umbruchs (::before) und bliebe dort mit Breite 0 haengen. */ :root[data-thema="strom"] body.hs-an .kalLeiste [data-kalansicht]{order:6;position:relative;isolation:isolate;flex:1 1 40px;min-width:0!important;height:44px;padding:4px 0; border:0;border-radius:0;background:var(--g-glas2) content-box;font-size:clamp(.75rem,3.6vw,.875rem);font-weight:600;color:var(--g-leise);white-space:nowrap} :root[data-thema="strom"] body.hs-an .kalLeiste [data-kalansicht="tag"]{border-radius:12px 0 0 12px} :root[data-thema="strom"] body.hs-an .kalLeiste [data-kalansicht="agenda"]{border-radius:0 12px 12px 0} :root[data-thema="strom"] body.hs-an .kalLeiste [data-kalansicht].on{background:var(--g-glas2) content-box;color:var(--auf-akzent)} :root[data-thema="strom"] body.hs-an .kalLeiste [data-kalansicht].on::before{content:"";position:absolute;inset:7px 1px;z-index:-1;border-radius:9px;background:var(--akzent)} :root[data-thema="strom"] body.hs-an .kalLeiste [data-kalansicht="arbeitswoche"]{font-size:0!important} :root[data-thema="strom"] body.hs-an .kalLeiste [data-kalansicht="arbeitswoche"]::after{content:"Mo–Fr";font-size:clamp(.75rem,3.6vw,.875rem)} :root[data-thema="strom"] body.hs-an #hkSucheKnopf{order:7;display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;margin-left:4px;padding:0; border:4px solid transparent;border-radius:16px;background:var(--g-glas2) padding-box} :root[data-thema="strom"] body.hs-an #hkSucheKnopf[aria-expanded="true"]{background:var(--g-akzent-zart) padding-box;color:var(--akzent)} :root[data-thema="strom"] body.hs-an #hkSucheKnopf svg.hkI{margin:0;color:inherit} /* Zeile 3 nur auf Wunsch (Lupe): Suchfeld und der Weg zu den Kategorien */ :root[data-thema="strom"] body.hs-an #kalender:not(.hk-suche) :is(#kalSuche,#hkKatKnopf){display:none} :root[data-thema="strom"] body.hs-an #kalender.hk-suche #kalSuche{order:9;flex:1 1 120px;min-width:0} :root[data-thema="strom"] body.hs-an #kalender.hk-suche #hkKatKnopf{order:10;display:inline-flex;align-items:center;margin-left:8px} /* "Neuer Termin": runder Knopf unten rechts ueber der schwebenden Leiste (--hk-unten setzt handy_kalender.js) */ :root[data-thema="strom"] body.hs-an #kalNeuBtn{position:fixed;right:16px;bottom:calc(var(--hk-unten,96px) + 8px + env(safe-area-inset-bottom,0px));z-index:40;width:56px;height:56px; min-width:56px!important;min-height:56px!important;padding:0;border-radius:18px;font-size:0!important; background:linear-gradient(currentColor,currentColor) center/22px 2.5px no-repeat,linear-gradient(currentColor,currentColor) center/2.5px 22px no-repeat,var(--akzent); box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 24px -8px rgba(0,0,0,.55)} :root[data-thema="strom"] body.hs-an.tastatur #kalNeuBtn,:root[data-thema="strom"] body.hs-an #kalender[data-hkansicht="monat"] #kalNeuBtn{display:none} /* Aufbau: Treffer der Suche - Kalender - Kategorien. "Ausgewaehlt" entfaellt: der Termin steht im Blatt. */ :root[data-thema="strom"] body.hs-an .kalRaum{display:flex;flex-direction:column;gap:12px} :root[data-thema="strom"] body.hs-an .kalSeite{display:contents} :root[data-thema="strom"] body.hs-an #kalTrefferBlock{order:0} :root[data-thema="strom"] body.hs-an .kalHaupt{order:1;max-height:none} :root[data-thema="strom"] body.hs-an .kalSeiteBlock{order:2} :root[data-thema="strom"] body.hs-an .kalSeiteBlock:has(>#kalDetail){display:none} :root[data-thema="strom"] body.hs-an #kalender:is([data-hkansicht="tag"],[data-hkansicht="woche"],[data-hkansicht="arbeitswoche"]) .kalHaupt{height:var(--hk-raster,60vh);overflow:auto} :root[data-thema="strom"] body.hs-an #kalender:is([data-hkansicht="monat"],[data-hkansicht="agenda"]) .kalHaupt{overflow:visible;border:0;border-radius:0;background:none;box-shadow:none} /* Leisten ueber dem Kalender ("verschoben - Rückgängig", Verschiebe-Modus): eine Zeile, Text hoechstens zweizeilig - bei 320 px war die Leiste des Verschiebe-Modus 153 px hoch und nahm dem Raster ein Drittel */ :root[data-thema="strom"] body.hs-an :is(.kalModusLeiste,.kalHinweis){align-items:center;gap:8px;padding:4px 4px 4px 12px} :root[data-thema="strom"] body.hs-an .kalModusLeiste b,:root[data-thema="strom"] body.hs-an .kalHinweis .sp{display:none} :root[data-thema="strom"] body.hs-an :is(#kalModusText,#kalHinweisText){flex:1;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:.875rem;line-height:1.3} :root[data-thema="strom"] body.hs-an :is(.kalModusLeiste,.kalHinweis) .sbtn{flex:none} /* Stundenraster: alle Tage passen in die Breite - kein seitliches Schieben */ :root[data-thema="strom"] body.hs-an .kalGitter{grid-template-columns:40px repeat(var(--spalten),minmax(0,1fr));min-width:0} :root[data-thema="strom"] body.hs-an .kalStunde{padding:2px 5px 0 0} :root[data-thema="strom"] body.hs-an .kalGanzLabel{z-index:5;font-size:0!important} :root[data-thema="strom"] body.hs-an .kalEcke{z-index:6} :root[data-thema="strom"] body.hs-an .kalGanzLabel::after{content:"ganz";font-size:.6875rem} :root[data-thema="strom"] body.hs-an .kalTagKopf{padding:4px 0} :root[data-thema="strom"] body.hs-an .kalTagKopf b{font-size:1rem;line-height:1.2} :root[data-thema="strom"] body.hs-an .kalTagKopf span{font-size:.6875rem;line-height:1.2} :root[data-thema="strom"] body.hs-an #kalender[data-hkansicht="tag"] :is(.kalEcke,.kalTagKopf){display:none} :root[data-thema="strom"] body.hs-an .kalTermin{line-height:1.25;overflow:hidden} :root[data-thema="strom"] body.hs-an .kalTermin b{font-size:.875rem} :root[data-thema="strom"] body.hs-an .kalBalken{font-size:.6875rem} :root[data-thema="strom"] body.hs-an .kalGriff{display:none} :root[data-thema="strom"] body.hs-an #kalender:is([data-hkansicht="woche"],[data-hkansicht="arbeitswoche"]) .kalTermin{padding:2px 3px;border-left-width:3px;border-radius:6px} :root[data-thema="strom"] body.hs-an #kalender:is([data-hkansicht="woche"],[data-hkansicht="arbeitswoche"]) .kalTermin b{font-size:.6875rem;line-height:1.2;white-space:nowrap;text-overflow:clip} :root[data-thema="strom"] body.hs-an #kalender:is([data-hkansicht="woche"],[data-hkansicht="arbeitswoche"]) .kalTermin span{display:none} /* Monat: Zahl und Punkte; der gewaehlte Tag traegt die Akzentfarbe, seine Termine stehen darunter (.hkTagListe) */ :root[data-thema="strom"] body.hs-an .kalMonat{grid-template-columns:24px repeat(7,minmax(0,1fr));grid-auto-rows:auto;padding:4px 6px 8px 2px;border:1px solid var(--g-rand);border-radius:18px; background:var(--g-glas);box-shadow:0 0 0 1px var(--g-kante)} :root[data-thema="strom"] body.hs-an .kalMonatKopf{position:static;padding:6px 0 4px;border:0;background:none;font-size:.6875rem;font-weight:600;color:var(--g-leise)} :root[data-thema="strom"] body.hs-an .kalMonatKopf:first-child{font-size:0!important} :root[data-thema="strom"] body.hs-an .kalMonatKW{align-items:center;padding:0;border:0;background:none;font-size:.6875rem;color:var(--g-leise)} :root[data-thema="strom"] body.hs-an .kalMonatTag{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:2px;min-height:46px;padding:3px 0 2px;border:0;background:none;overflow:hidden} :root[data-thema="strom"] body.hs-an .kalMonatTag.fremd{opacity:.4} :root[data-thema="strom"] body.hs-an .kalMonatZahl{flex:0 0 28px;width:28px;height:28px;margin:0 calc(50% - 14px) 1px;border-radius:14px;font-size:.9375rem;font-weight:500;line-height:28px; text-align:center;color:var(--text)} :root[data-thema="strom"] body.hs-an .kalMonatTag.heute .kalMonatZahl{color:var(--akzent);font-weight:700;box-shadow:inset 0 0 0 2px var(--akzent)} :root[data-thema="strom"] body.hs-an .kalMonatTag.hkGewaehlt .kalMonatZahl{background:var(--akzent);color:var(--auf-akzent);font-weight:700;box-shadow:none} :root[data-thema="strom"] body.hs-an .kalMonatTag .kalChip{flex:0 0 6px;width:6px;height:6px;min-height:0;margin:0;padding:0;border:0;border-radius:3px;background:var(--kat,var(--akzent)); font-size:0!important;overflow:hidden} :root[data-thema="strom"] body.hs-an .kalMonatTag .kalMehr{display:none} :root[data-thema="strom"] .hkTagListe{margin-top:12px;padding:4px 12px 8px;border:1px solid var(--g-rand);border-radius:18px;background:var(--g-glas);box-shadow:0 0 0 1px var(--g-kante)} :root[data-thema="strom"] .hkTagKopf{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px} :root[data-thema="strom"] .hkTagKopf b{min-width:0;font-size:1rem;font-weight:700;line-height:1.25;color:var(--text)} :root[data-thema="strom"] body .hkTagKopf .sbtn{position:relative;flex:none;min-height:36px!important;padding:0 12px;border-radius:18px;border-color:transparent;background:var(--g-akzent-zart); color:var(--akzent);font-size:.875rem;white-space:nowrap} :root[data-thema="strom"] body .hkTagKopf .sbtn::after{content:"";position:absolute;inset:-6px 0} :root[data-thema="strom"] .hkLeer{padding:6px 0 8px;font-size:.9375rem;color:var(--g-leise)} /* Agenda und die Tagesliste unter dem Monat: Uhrzeit links, Titel und Ort rechts - nichts liegt uebereinander */ :root[data-thema="strom"] body.hs-an .kalAgenda{display:flex;flex-direction:column;gap:12px;padding:0} :root[data-thema="strom"] body.hs-an .kalAgendaTag{display:block;padding:8px 12px;border:1px solid var(--g-rand);border-radius:18px;background:var(--g-glas);box-shadow:0 0 0 1px var(--g-kante)} :root[data-thema="strom"] body.hs-an .kalAgendaTag.heute{background:var(--g-glas)} :root[data-thema="strom"] body.hs-an .kalAgendaDatum{display:flex;align-items:baseline;gap:8px;min-height:32px;font-size:.8125rem;color:var(--g-leise)} :root[data-thema="strom"] body.hs-an .kalAgendaDatum b{display:inline;font-family:inherit;font-size:1rem;font-weight:700;color:var(--text)} :root[data-thema="strom"] body.hs-an .kalAgendaTag.heute .kalAgendaDatum b{color:var(--akzent)} :root[data-thema="strom"] body.hs-an .kalAgendaZeile{display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px;align-items:baseline;min-height:44px;margin:0;padding:10px 0 10px 10px; border-top:1px solid var(--line);border-left:3px solid var(--akzent);border-radius:0;background:none} :root[data-thema="strom"] body.hs-an .kalAgendaZeile.kat{border-left-color:var(--kat)} :root[data-thema="strom"] body.hs-an .kalAgendaZeile.gewaehlt{background:none} :root[data-thema="strom"] body.hs-an .kalAgendaZeit{font-size:.8125rem;font-variant-numeric:tabular-nums;color:var(--g-leise);white-space:nowrap} :root[data-thema="strom"] body.hs-an .kalAgendaTitel{font-size:1rem;font-weight:600;color:var(--text);overflow-wrap:anywhere} :root[data-thema="strom"] body.hs-an .kalAgendaOrt{font-size:.875rem;color:var(--g-leise)} /* Treffer der Suche: Datum und Uhrzeit klein ueber dem Titel statt daneben (bei 320 px lagen sie uebereinander) */ :root[data-thema="strom"] body.hs-an .kalTrefferZeile{display:block;min-height:44px;padding:8px 10px;border-radius:12px} :root[data-thema="strom"] body.hs-an .kalTrefferZeile span{display:block;font-size:.8125rem;color:var(--g-leise);white-space:nowrap} :root[data-thema="strom"] body.hs-an .kalTrefferZeile b{display:block;font-size:1rem;font-weight:600;white-space:normal;overflow-wrap:anywhere} /* Blatt eines Termins: erst ansehen (Zeit, Ort, Notiz), darunter die vier Dinge, die man damit tut */ :root[data-thema="strom"] body.hs-an .kalPop .kalPopKopf{align-items:flex-start} :root[data-thema="strom"] body.hs-an .kalPop .kalPopKopf b{padding-top:10px;white-space:normal;overflow-wrap:anywhere} :root[data-thema="strom"] .hkAnsicht{display:flex;flex-direction:column;margin:0 0 14px} :root[data-thema="strom"] .hkZeile{display:flex;align-items:flex-start;gap:12px;padding:8px 0;font-size:1rem;color:var(--text)} :root[data-thema="strom"] .hkZeile>div{flex:1;min-width:0;overflow-wrap:anywhere} :root[data-thema="strom"] .hkZeile b{display:block;font-weight:600} :root[data-thema="strom"] .hkZeile span{display:block;font-size:.9375rem;color:var(--g-leise)} :root[data-thema="strom"] svg.hkI{flex:none;width:22px;height:22px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--g-leise)} :root[data-thema="strom"] .hkPunkt{flex:none;width:14px;height:14px;margin:5px 4px 0;border-radius:7px;background:var(--kat)} :root[data-thema="strom"] .hkTaten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} :root[data-thema="strom"] body .hkTaten .sbtn{padding:10px 2px;font-size:.875rem;text-align:center} :root[data-thema="strom"] body .hkTaten .sbtn.primary{grid-column:1/-1;min-height:52px!important;border-radius:16px;font-size:1rem} :root[data-thema="strom"] body .hkTaten .sbtn.hkRot{color:var(--warn);border-color:rgba(var(--warn-rgb),.45);background:var(--g-rot-zart)} /* Formular (bearbeiten, neu): jedes Feld mit Beschriftung darueber, Beginn und Ende nebeneinander */ :root[data-thema="strom"] .kalPop.hkForm .tform{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 10px;width:100%} :root[data-thema="strom"] .kalPop.hkForm .tformzeile{display:contents} :root[data-thema="strom"] .kalPop.hkForm :is(.tformbis,[data-evdel],.acts){display:none} :root[data-thema="strom"] .hkFeld{display:flex;flex-direction:column;gap:4px;min-width:0;grid-column:1/-1} :root[data-thema="strom"] .hkFeld>span{font-size:.8125rem;font-weight:600;color:var(--g-leise)} :root[data-thema="strom"] body .hkFeld :is(input,select){flex:none;width:100%;min-width:0;max-width:none} :root[data-thema="strom"] .hkFeld[data-hkf="titel"]{order:1} :root[data-thema="strom"] .hkFeld[data-hkf="datum"]{order:2} :root[data-thema="strom"] .hkFeld[data-hkf="zeit"]{order:3;grid-column:1} :root[data-thema="strom"] .hkFeld[data-hkf="ende"]{order:4;grid-column:2} :root[data-thema="strom"] .hkFeld[data-hkf="ort"]{order:5} :root[data-thema="strom"] .hkFeld[data-hkf="notiz"]{order:6} :root[data-thema="strom"] .hkFeld[data-hkf="datumBis"]{order:7} :root[data-thema="strom"] .hkFeld[data-hkf="kategorie"]{order:8} :root[data-thema="strom"] .hkFeld[data-hkf="erinnerungMin"]{order:9} :root[data-thema="strom"] body .kalPop.hkForm :is([data-esave],[data-eneu]){order:10;grid-column:1/-1;min-height:52px!important;margin-top:4px;border-radius:16px;font-size:1rem} :root[data-thema="strom"] body .kalPop.hkForm [data-eabbruch]{order:11;grid-column:1/-1} :root[data-thema="strom"] .hkMeldung{order:0;grid-column:1/-1;padding:10px 12px;border-radius:12px;background:var(--g-rot-zart);color:var(--warn);font-size:.9375rem;font-weight:600} /* ---- Davina: das Gespraech (js/handy_gespraech.js, body.hg) ---- */ :root[data-thema="strom"] body.hg #chat .msg{font-size:16px;padding:10px 14px;border-radius:20px} :root[data-thema="strom"] body.hg #chat .msg.me{background:var(--akzent);color:var(--auf-akzent);border-bottom-right-radius:6px} :root[data-thema="strom"] body.hg #chat .msg.ai{background:var(--g-glas-stark);color:var(--text);border:1px solid var(--g-rand);box-shadow:0 0 0 1px var(--g-kante);border-bottom-left-radius:6px} :root[data-thema="strom"] body.hg #chat .msg.sys{font-size:.875rem;line-height:1.4;color:var(--g-leise);padding:2px 12px;opacity:1} :root[data-thema="strom"] body.hg #chat .msg.sys a{color:var(--akzent)} /* Eingabe: eine Zeile aus Glas - Feld, Mikrofon, "...". Die fuenf Schalter dahinter sind kleine Plaketten in einer Reihe (36 px hoch, die Tippflaeche reicht mit ::after auf 48 px). David 17:12: "die Knoepfe zu gross". */ :root[data-thema="strom"] body.hg #jarvis>.inputrow{min-height:56px;padding:6px 6px 6px 18px;gap:6px;border:1px solid var(--g-rand);border-radius:28px;background:var(--g-glas-stark); -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)} :root[data-thema="strom"] body.hg #jarvis>.inputrow #field{font-size:16px;color:var(--text);min-height:44px!important;background:none;border:0;border-radius:0;padding:0} :root[data-thema="strom"] body.hg #jarvis>.inputrow #field:focus{outline:none} :root[data-thema="strom"] body.hg #jarvis>.inputrow:focus-within{box-shadow:0 0 0 3px var(--akzent),var(--g-schatten)} :root[data-thema="strom"] body.hg #jarvis>.inputrow :is(#micBtn,#hgKnoepfe,#hgStopp){flex:0 0 44px;width:44px;height:44px;min-width:44px!important;min-height:44px!important;padding:0;border-radius:22px; background:var(--g-glas2);border-color:transparent;color:var(--text)} /* Mikrofon: das Zeichen der Leiste statt des Worts (das Wort bleibt fuer Vorlese-Programme im Knopf) */ /* !important: handySchriftAnheben liest "0px" und hoebe es sonst auf 16 px */ :root[data-thema="strom"] body.hg #micBtn{font-size:0!important} :root[data-thema="strom"] body.hg #micBtn::before{content:"";width:22px;height:22px;background:currentColor; -webkit-mask: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 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center/contain no-repeat; mask: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 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center/contain no-repeat} :root[data-thema="strom"] body.hg #micBtn.on{background:var(--akzent);color:var(--auf-akzent)} :root[data-thema="strom"] body.hg #micBtn.live{background:var(--warn);color:var(--grund)} :root[data-thema="strom"] body.hg.hg-knoepfe #hgKnoepfe{background:var(--g-akzent-zart);color:var(--akzent)} :root[data-thema="strom"] body.hg.hg-ton #hgStopp{background:var(--warn);color:var(--grund)} :root[data-thema="strom"] body.hg.hg-knoepfe #jarvis>.inputrow{border-radius:26px;padding-bottom:10px;row-gap:8px} :root[data-thema="strom"] body.hg.hg-knoepfe #jarvis>.inputrow :is(#recBtn,#ttsBtn,#netBtn,#sndBtn,#hilfeBtn){position:relative;flex:1 1 auto;width:auto;height:36px;min-height:36px!important;min-width:0!important; padding:0 10px;border-radius:18px;font-size:.8125rem;font-weight:600;background:none;border:1px solid var(--g-strich);color:var(--g-leise)} :root[data-thema="strom"] body.hg.hg-knoepfe #jarvis>.inputrow :is(#recBtn,#ttsBtn,#netBtn,#sndBtn,#hilfeBtn)::after{content:"";position:absolute;inset:-6px -3px} :root[data-thema="strom"] body.hg.hg-knoepfe #jarvis>.inputrow :is(#recBtn,#ttsBtn,#netBtn,#sndBtn,#hilfeBtn).on{background:var(--g-akzent-zart);border-color:transparent;color:var(--akzent)} :root[data-thema="strom"] body.hg.hg-knoepfe #jarvis>.inputrow #hilfeBtn.on{background:none;border-color:var(--g-strich);color:var(--g-leise)} :root[data-thema="strom"] body.hg.hg-knoepfe #jarvis>.inputrow #recBtn.live{background:var(--warn);border-color:transparent;color:var(--grund)} :root[data-thema="strom"] body.hg.hg-knoepfe #jarvis>.inputrow{column-gap:6px} :root[data-thema="strom"] body.hg-karten #hgZurueck{border-radius:22px;background:var(--g-akzent-zart);border-color:transparent;color:var(--akzent);font-weight:600} :root[data-thema="strom"] .chatNeu{border-radius:22px} } /* schmale Handys (bis 380 px): die fuenf Schalter bleiben in einer Reihe */ @media (max-width:380px){ :root[data-thema="strom"] body.hg.hg-knoepfe #jarvis>.inputrow{padding-left:12px;column-gap:4px} :root[data-thema="strom"] body.hg.hg-knoepfe #jarvis>.inputrow :is(#recBtn,#ttsBtn,#netBtn,#sndBtn,#hilfeBtn){padding:0 7px;font-size:.75rem} } @media (max-width:680px){ /* die Figur gehoert auf die Buehne im Gespraech - nicht hinter die durchscheinenden Karten der anderen Seiten */ :root[data-thema="strom"] body:not(.hg) #humanoidBuehne{visibility:hidden} /* ---- einzelne Tafeln ---- */ /* Eintrag mit Knoepfen: ein einzelner kleiner Knopf bleibt neben dem Text, alles Breitere rutscht darunter (rechts). Daneben blieben dem Text in "Aufgaben :root[data-thema="strom"] Fristen" und "Bank" rund 90 px. */ :root[data-thema="strom"] .item:has(>.txt~.sbtn){flex-wrap:wrap} :root[data-thema="strom"] .item:has(>.txt~.sbtn)>.txt{flex:1 1 calc(100% - 120px)} :root[data-thema="strom"] .item>.txt+.sbtn{margin-left:auto} :root[data-thema="strom"] .warteMarke{display:inline-block;margin-right:6px;padding:2px 8px;border:0;border-radius:8px;background:var(--g-gelb-zart);color:var(--g-gelb); font-size:.75rem;font-weight:700;white-space:normal;vertical-align:1px} :root[data-thema="strom"] .quelleLink{color:var(--akzent);border-bottom:1px solid rgba(var(--akzent-rgb),.4)} :root[data-thema="strom"] .risiko{font-family:inherit;font-size:.75rem;font-weight:700;border-radius:8px;padding:3px 8px} :root[data-thema="strom"] .risiko.hoch{background:var(--g-rot-zart);color:var(--warn)} :root[data-thema="strom"] .risiko.mittel{background:var(--g-gelb-zart);color:var(--g-gelb)} :root[data-thema="strom"] .risiko.niedrig{background:var(--g-glas2);color:var(--g-leise)} /* Eingang */ :root[data-thema="strom"] .drop{border:1.5px dashed var(--g-strich);border-radius:18px;background:var(--g-glas2);color:var(--g-leise);padding:18px 14px} :root[data-thema="strom"] .drop:hover,:root[data-thema="strom"] .drop.hot{background:var(--g-akzent-zart);border-color:var(--akzent);color:var(--text)} :root[data-thema="strom"] .drop b{font-family:inherit;font-size:1.0625rem;font-weight:650;color:var(--text)} :root[data-thema="strom"] .dokGruppeKopf{border:0;border-radius:14px;background:var(--g-glas2);color:var(--text);font-weight:600;padding:12px 14px} :root[data-thema="strom"] .archivItem .archivGrund{color:var(--akzent);font-size:.875rem} :root[data-thema="strom"] .archivItem .archivFund{color:var(--g-leise);font-size:.875rem} :root[data-thema="strom"] .nachricht{font-size:16px;padding:10px 0} :root[data-thema="strom"] .nachricht .nWer,:root[data-thema="strom"] .nachricht.ungelesen .nWer{color:var(--text);font-weight:650} :root[data-thema="strom"] .nachricht.ungelesen .nWer::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--akzent);vertical-align:1px} :root[data-thema="strom"] body .nKanalKopf{font-family:inherit;font-size:.8125rem;font-weight:600;letter-spacing:.06em!important;text-transform:uppercase!important;color:var(--g-leise)} :root[data-thema="strom"] .nachricht .nFehler{color:var(--g-gelb);font-size:.875rem} :root[data-thema="strom"] .nachricht .nAnhang{font-size:.875rem;color:var(--g-gruen)} :root[data-thema="strom"] .nKanalKopf{flex-wrap:wrap;align-items:center} :root[data-thema="strom"] .nKanalKopf em{font-size:.8125rem;white-space:nowrap} /* Schaubilder und Magic */ :root[data-thema="strom"] .viz{border:1px solid var(--line);border-radius:18px;background:var(--g-glas2)} :root[data-thema="strom"] .viz .tag,:root[data-thema="strom"] .viz .rb{font-family:inherit;font-size:.75rem;color:var(--g-leise)} /* Fernseh-Kacheln: der Rahmen ist kein schwarzer Kasten mehr (hell lag ein grauer Schleier darauf) */ :root[data-thema="strom"] .stream .frame{background:var(--g-glas2);border:0;border-radius:14px} /* Kalender, Kategorien: der Sicht-Schalter als Haken (24 px sichtbar, 44 px Tippflaeche) */ :root[data-thema="strom"] body .kalKatSicht{position:relative;width:44px;height:44px;border:10px solid transparent;border-radius:17px;background:var(--akzent);background-clip:padding-box; box-shadow:inset 0 0 0 2px var(--akzent)} :root[data-thema="strom"] body .kalKatSicht[aria-pressed="false"]{background:transparent;box-shadow:inset 0 0 0 2px var(--g-strich)} :root[data-thema="strom"] body .kalKatSicht[aria-pressed="true"]::after{content:"";position:absolute;left:8px;top:3px;width:6px;height:12px;border:solid var(--auf-akzent);border-width:0 3px 3px 0;transform:rotate(45deg)} :root[data-thema="strom"] .kalKatZeile{gap:8px;padding:0} :root[data-thema="strom"] .kalKatText{font-size:16px} :root[data-thema="strom"] .kalKatPunkt.on{border-color:var(--g-fest);box-shadow:0 0 0 2px var(--kat)} :root[data-thema="strom"] body .kalKatWeg{background:none;border-color:transparent;color:var(--g-leise)} /* Kaesten in einer Karte (Dubletten, Vorschlaege, Herkunft, Hilfe, Aufraeumen): ruhige Flaeche statt farbigem Rand */ :root[data-thema="strom"] :is(.kDubl,.vwahl,.quelleBox,.archivHilfe,.stForm,.archivStamm,.aufnahmeLoeschBox,.aufraeumBox,.aufnahmeArchivBox){border:1px solid var(--line);border-radius:16px; background:var(--g-glas2);padding:12px 14px} :root[data-thema="strom"] .kDubl h5{font-family:inherit;font-size:1rem;font-weight:650;color:var(--text)} :root[data-thema="strom"] .kalHinweis{border-radius:14px} /* Post, Suche, Adressen: Zeilen */ :root[data-thema="strom"] .mailrow{font-size:16px;padding:10px 0;gap:10px;border-top:1px solid var(--line)} :root[data-thema="strom"] .mailrow .u{width:24px;height:24px;border-radius:8px;font-size:.8125rem} :root[data-thema="strom"] .mailrow .f{font-size:.875rem;color:var(--g-leise)} :root[data-thema="strom"] .mailrow .a{font-size:.875rem;color:var(--g-gelb)} :root[data-thema="strom"] .wsZeile,:root[data-thema="strom"] .awZeile{padding:10px;border-radius:14px;font-size:16px} :root[data-thema="strom"] .awZeile .note{font-size:.875rem} /* Wheel of Life */ :root[data-thema="strom"] .lrText{font-size:16px;line-height:1.5} :root[data-thema="strom"] .lrText h4{font-family:inherit;font-size:1rem;font-weight:650;color:var(--text)} :root[data-thema="strom"] .lrText em{color:var(--akzent)} :root[data-thema="strom"] .lrdName{font-family:inherit;font-size:24px;font-weight:700} :root[data-thema="strom"] .lrdWert{font-family:inherit;font-weight:700} :root[data-thema="strom"] .lrdWertZiel{color:var(--g-gelb)} /* Haus */ :root[data-thema="strom"] .heimReiterLeiste{gap:8px;margin-bottom:12px} :root[data-thema="strom"] body .heimReiter{border-radius:22px;padding:10px 14px} :root[data-thema="strom"] body .heimReiter.on{background:var(--g-akzent-zart);border-color:var(--akzent);color:var(--akzent)} :root[data-thema="strom"] .heimBlock{border:0;border-radius:18px;background:var(--g-glas2);padding:12px 14px;margin-bottom:12px} :root[data-thema="strom"] .heimZeile{border-top:1px solid var(--line);padding:10px 0;gap:8px 12px} :root[data-thema="strom"] .heimUnter{font-size:.875rem;color:var(--g-leise)} :root[data-thema="strom"] .heimMeldung{border-radius:14px;font-size:.9375rem} :root[data-thema="strom"] .heimWarn{color:var(--g-gelb);font-size:.875rem} :root[data-thema="strom"] body #treffPopupOk{min-height:52px!important;border-radius:16px;background:var(--akzent);border-color:transparent;color:var(--auf-akzent)} /* Einstellungen: Hinweis zur Wahl des Designs - nur in der neuen Bedienung (das Design "strom" kann am Schreibtisch gewaehlt sein und gilt dann auch in der bisherigen Bedienung am Handy; dort stimmt der Satz nicht) */ :root[data-thema="strom"] body.hs-an .hsNur{display:block;margin:10px 0 4px;padding:10px 12px;border-radius:14px;background:var(--g-akzent-zart);color:var(--text);font-size:.9375rem;line-height:1.4} } /* ohne Unschaerfe (alter Browser) oder wenn das Geraet weniger Durchsicht wuenscht: feste Flaechen */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ @media (max-width:680px){ :root[data-thema="strom"] .card::before,:root[data-thema="strom"] body .masthead,:root[data-thema="strom"] .kartMehrMenue,:root[data-thema="strom"] .weckerKasten,:root[data-thema="strom"] #treffPopup>div,:root[data-thema="strom"] #gate>div,:root[data-thema="strom"] .kalPop,:root[data-thema="strom"] .adressWahl,:root[data-thema="strom"] .kalHilfe,:root[data-thema="strom"] .kontaktLupe,:root[data-thema="strom"] .wsFeld,:root[data-thema="strom"] .sammelLeiste,:root[data-thema="strom"] .kalHaupt,:root[data-thema="strom"] body.hg #jarvis>.inputrow{background:var(--g-fest)!important} } } @media (max-width:680px) and (prefers-reduced-transparency: reduce){ :root[data-thema="strom"] .card::before,:root[data-thema="strom"] body .masthead,:root[data-thema="strom"] .kartMehrMenue,:root[data-thema="strom"] .weckerKasten,:root[data-thema="strom"] #treffPopup>div,:root[data-thema="strom"] #gate>div,:root[data-thema="strom"] .kalPop,:root[data-thema="strom"] .adressWahl,:root[data-thema="strom"] .kalHilfe,:root[data-thema="strom"] .kontaktLupe,:root[data-thema="strom"] .wsFeld,:root[data-thema="strom"] .sammelLeiste,:root[data-thema="strom"] .kalHaupt,:root[data-thema="strom"] body.hg #jarvis>.inputrow{background:var(--g-fest)!important;-webkit-backdrop-filter:none;backdrop-filter:none} }