/* myblank Finanzplanung — Stylesheet Teil B (nach dem dynamischen Block), ausgelagert am 29.09.2026. */ /* Die Marke am Zeilenrand traegt die Farbe des Themenfeldes — dieselbe, die das Stueck im Kreis hat. Sie kommt als Groesse `--f-marke` von der Zeile selbst (siehe haushalt.php); hier steht nur der Rueckfall. */ /* Wer nicht zeigen kann, sieht den Ring ruhig — und wer Bewegung abbestellt hat, bekommt die Hervorhebung trotzdem, nur ohne das Fahren. */ @media (prefers-reduced-motion:reduce){ svg.kreis .stueck{transition:opacity .15s ease} svg.kreis .stueck:hover{transform:none} } .awmitte{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; pointer-events:none; text-align:center; } .awmitte span{font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--tinte3)} .awmitte b{font-size:17px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums} /* Das Loch in der Mitte waechst mit dem Ring: bei 460 px Ring misst es GEMESSEN 258 px im Durchmesser. Eine 19-px-Zahl schwimmt darin. */ @media (min-width:901px){ .awmitte b{font-size:24px} } @media (min-width:1181px){ .awmitte b{font-size:24px} .awmitte span{font-size:12px} } ol.awliste{list-style:none; margin:0; padding:0; display:grid; gap:2px} .awzeile{display:grid; gap:3px} a.awgriff{ display:grid; grid-template-columns:9px 22px minmax(0,1fr) auto auto; align-items:center; gap:9px; text-decoration:none; color:inherit; padding:6px 8px; border-radius:9px; transition:background .14s ease; } a.awgriff:hover{background:var(--markiert); box-shadow:inset 2.5px 0 0 0 var(--f-marke, var(--akzent))} /* zz483: Themenfelder ohne Ausgabe in diesem Monat – dieselbe Zeile, gedämpft, ohne Griff (feste Zeilenzahl, nichts springt) */ li.awleer{opacity:.5} li.awleer a.awgriff{cursor:default} li.awleer a.awgriff:hover{background:none; box-shadow:none} p.awhinweis.awgut .ikon{color:var(--gut)} .awfarbe{width:9px; height:9px; border-radius:3px} .awzeichen{display:grid; place-items:center; color:var(--tinte2)} .awzeichen .ikon{width:16px; height:16px; vertical-align:0} .awname{font-size:14.5px; letter-spacing:-.01em; white-space:normal; overflow-wrap:anywhere; line-height:1.3} .awanteil{font-size:12px; color:var(--tinte3); font-variant-numeric:tabular-nums; white-space:nowrap} .awbetrag{font-size:14.5px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--tinte)} .awbalken{display:block; height:3px; border-radius:2px; background:var(--flaeche2); margin:0 8px 5px; overflow:hidden} .awbalken i{display:block; height:100%; border-radius:2px; min-width:2px} /* Auf dem Telefon passt „Energie und Kommunikation" nicht neben Anteil und Betrag — gemessen 144 px Platz fuer 172 px Text. Also bekommt der Name seine eigene Zeile, statt abgeschnitten zu werden. */ @media (max-width:560px){ a.awgriff{grid-template-columns:9px 22px minmax(0,1fr) auto; row-gap:1px; padding:7px 8px} .awname{grid-column:3 / -1; white-space:normal; line-height:1.3} .awanteil{grid-column:3; grid-row:2; justify-self:start} .awbetrag{grid-column:4; grid-row:2} } ul.awdetail{ list-style:none; margin:2px 8px 8px 48px; padding:8px 0 0; border-top:1px dashed var(--linie); display:grid; gap:5px; } ul.awdetail li{display:flex; justify-content:space-between; gap:12px; font-size:12px; color:var(--tinte2)} ul.awdetail b{font-variant-numeric:tabular-nums; font-weight:500; white-space:nowrap} ul.awdetail em{ font-style:normal; font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--tinte3); border:1px solid var(--linie); border-radius:99px; padding:0 6px; margin-left:6px; } ul.awdetail em.warn{color:var(--bad); border-color:var(--bad)} p.awhinweis{ display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap; margin:14px 0 0; padding-top:13px; border-top:1px solid var(--linie); font-size:12px; line-height:1.55; color:var(--tinte2); } p.awhinweis .ikon{color:var(--bad); width:16px; height:16px; margin-top:2px; vertical-align:0} p.awhinweis a{color:var(--akzent)} .f0{background:var(--f0)} .f1{background:var(--f1)} .f2{background:var(--f2)} .f3{background:var(--f3)} .f4{background:var(--f4)} .f5{background:var(--f5)} .f6{background:var(--f6)} .f7{background:var(--f7)} .f8{background:var(--f8)} .f9{background:var(--f9)} .f10{background:var(--f10)} .f11{background:var(--f11)} svg.kreis .f0 .kst{fill:var(--f0)} svg.kreis .f1 .kst{fill:var(--f1)} svg.kreis .f2 .kst{fill:var(--f2)} svg.kreis .f3 .kst{fill:var(--f3)} svg.kreis .f4 .kst{fill:var(--f4)} svg.kreis .f5 .kst{fill:var(--f5)} svg.kreis .f6 .kst{fill:var(--f6)} svg.kreis .f7 .kst{fill:var(--f7)} svg.kreis .f8 .kst{fill:var(--f8)} svg.kreis .f9 .kst{fill:var(--f9)} svg.kreis .f10 .kst{fill:var(--f10)} svg.kreis .f11 .kst{fill:var(--f11)} /* Gemessen, nicht geschaetzt: weiss auf f1, f4, f6, f8, f9, f11 kommt nur auf 2,6:1 — dort ist die dunkle Tinte die lesbare. */ svg.kreis .f0, svg.kreis .f2, svg.kreis .f3, svg.kreis .f5, svg.kreis .f7, svg.kreis .f10{--ringtinte:var(--ringhell)} svg.kreis .f1, svg.kreis .f4, svg.kreis .f6, svg.kreis .f8, svg.kreis .f9, svg.kreis .f11{--ringtinte:var(--ringdunkel)} /* ---- Das Jahresband ---- */ .jahr{ background:var(--flaeche); border:var(--karterand); border-radius:var(--karteradius); box-shadow:var(--karteschatten); padding:18px 18px 10px; margin-bottom:20px; } .jahrkopf{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap} .jahr h2{ margin:0 0 2px; font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--tinte); } .legende{margin:0; font-size:12px; color:var(--tinte3); display:flex; gap:14px; flex-wrap:wrap} .legende span{display:inline-flex; align-items:center; gap:5px; white-space:nowrap} .legende .mk{display:inline-block; width:11px; height:11px; border-radius:3px} .legende .mk.ein{background:var(--gut)} .legende .mk.aus{background:var(--bad)} /* Bild und Beschriftung scrollen gemeinsam, damit Balken und Monat immer untereinander stehen — auch auf dem Telefon. */ .jahrband{overflow-x:auto; overflow-y:hidden; margin:0 -4px; padding:0 4px; -webkit-overflow-scrolling:touch; scrollbar-width:thin} .jahrbandinhalt{min-width:660px} @media (min-width:761px){ .jahrbandinhalt{min-width:0} } /* ZWÖLF MONATE AUF TELEFON UND TABLET (26.09.2026): Chris: „weniger Monate … übersichtlicher … sonst wird es einfach nur unstrukturiert.“ Maßgeblich ist die Breite des Bandes, nicht des Fensters: bis 460 px stehen dreieinhalb Monate nebeneinander (Telefon hochkant), bis 860 px sechseinhalb (iPad hochkant, gemessen: 12 Spalten brauchten 821 px auf 732 px). Der halbe Monat am Rand zeigt, dass es weitergeht; Wischen rastet am Monatsanfang ein. */ .jahrband{container-type:inline-size; scroll-snap-type:x proximity; scroll-padding-left:4px} .monatswahl > *{scroll-snap-align:start} @container (max-width: 460px){ .jahrbandinhalt{min-width:0; width:calc(100% * 12 / 3.5)} } @container (min-width: 461px) and (max-width: 860px){ .jahrbandinhalt{min-width:0; width:calc(100% * 12 / 6.5)} } @container (min-width: 861px){ .jahrbandinhalt{min-width:0; width:auto} } /* LUFT ZUR SKALA (04.10.2026). Chris: „die Skala kollidiert schon fast mit der Säule rechts außen … da musst du mehr Luft lassen." Gemessen bei 1440 px: zwischen dem letzten Ausgabenbalken und „5.000 €" lagen wenige Pixel — die Zahlen standen IM Bild über seinem rechten Rand. Jetzt bekommt die Skala eine eigene Spalte: Bild UND Monatsspalten werden gemeinsam 64 px schmaler (so bleiben Balken und Monat genau untereinander), die Zahlen stehen in diesem frei gewordenen Streifen. */ @container (min-width: 861px){ .jahr .jahrbandinhalt{padding-right:64px; box-sizing:border-box} .jahr p.fskala{inset:0 -64px 0 0} } /* Die Monatsspalten stehen genau unter ihren Balken: flussbild() lässt links und rechts 26 von 720 Einheiten Rand (3,6111 %); die Monatswahl bekommt denselben Rand. Vorher liefen Beschriftung und Balken bis zu eine halbe Spalte auseinander (gemessen 26.09.2026: 45 px am ersten, 45 px am letzten Monat). Inhalt mittig über der Spalte. */ .jahrbandinhalt > .monatswahl{margin-left:3.6111%; margin-right:3.6111%} .monatswahl > *{text-align:center} /* SCHMALE BREITEN (27.09.2026, Vorhaben „Gestalt an schmalen Breiten“). Gemessen in echten 360- und 390-px-Fenstern: 1. Die Karte „Eigentumswohnung Delsenbachweg“ lief 20 px über ihren Rand: article.dlkarte ist ein Raster mit einer Spalte „auto“ — die wächst mit dem breitesten Inhalt. Jetzt darf die Spalte schrumpfen. 2. Formulare (form.vmform) verlangten je Feld 210 px — breiter als eine Karte am Telefon. Jetzt höchstens 100 %. 3. „Unsere Reisen“: die Reisekette verlangt 560 px und durfte nicht rollen (overflow sichtbar für die Karte am Kreis) — die ganze Seite rollte am iPhone seitwärts, und die Karte lag links außerhalb (-113 px). Am Telefon rollt jetzt die Kette in ihrem Rahmen, und die Karte erscheint unten als Blatt über der Seite. */ article.dlkarte{grid-template-columns:minmax(0, 1fr)} form.vmform{grid-template-columns:repeat(auto-fit, minmax(min(210px, 100%), 1fr))} .rephasenliste{grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%), 1fr))} /* Rente: die Phasenkarten ragten 21 px */ .imkarte form.imlage{grid-template-columns:minmax(0, 1fr)} .imkarte .imtun, .imkarte .immarkreihe{flex-wrap:wrap} .imkarte .imtun button{flex:1 1 168px} /* TREFFERFLÄCHEN FÜR DEN FINGER (27.09.2026). Apples Maß ist 44 px. Gemessen am iPhone-Maß 360 px: Kopfknöpfe 32×36, leise Knöpfe 38, Menschen-Griffe 32, Buchungspunkte 8×8, Eingabefelder 36, Zoom-Regler 26. Wo ein Knopf ein Knopf ist, wird er sichtbar 44 px hoch; wo das Aussehen bleiben soll (Zeichen, Punkte), wächst nur die unsichtbare Trefferfläche. Gilt nur für Geräte, die mit dem Finger bedient werden. Der Gestaltwächter meldet jede Fläche darunter („treffer“). */ @media (pointer:coarse){ .knopfleise, .buneu, .bkknopf, a.nlholen, a.mblatt, a.stalle, button.ststift, nav.tabwahl a{min-height:44px} main input[type=text], main input[type=number], main input[type=date], main input[type=email], main input[type=search], main input[type=url], main select{min-height:44px} main input[type=range]{min-height:44px} .kopfknopf, button.mngriff, button.mnpfeil, button.bupunkt, main summary:not([class]){position:relative} .kopfknopf::before, button.mngriff::before, button.mnpfeil::before, main summary:not([class])::before{content:""; position:absolute; left:50%; top:50%; width:max(100%, 44px); height:max(100%, 44px); transform:translate(-50%, -50%)} /* Buchungspunkte stehen dicht an dicht — 32 px, damit der Finger nicht den Nachbarn trifft. */ button.bupunkt::before{content:""; position:absolute; left:50%; top:50%; width:32px; height:32px; transform:translate(-50%, -50%)} } /* Lange Wörter ohne Leerzeichen (Pfade, Aufzählungen mit Schrägstrich) brechen um, statt die Seite breiter zu machen — gemessen in der Verwaltung: ein Vorhabentext machte die Seite am iPhone 604 statt 360 px breit. */ main :is(p, li, dd, dt, small, em, b, strong, h2, h3, h4, summary, figcaption, label){overflow-wrap:break-word} /* WAS JETZT ANSTEHT (27.09.2026): ein Band über „Mein Stand“, nur wenn etwas ansteht. */ section.anstehend{margin:0 0 16px; padding:14px 16px 16px; border-radius:18px; background:var(--flaeche); border:1px solid var(--linie)} section.anstehend .anstehendtitel{display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:16px; font-weight:650; color:var(--tinte)} section.anstehend .anstehendtitel .ikon{color:var(--akzent)} section.anstehend .anstehendtitel span{margin-left:auto; font-size:13px; font-weight:500; color:var(--tinte3)} section.anstehend ul{list-style:none; margin:0; padding:0; display:grid; gap:6px} section.anstehend li a{display:flex; align-items:center; gap:10px; min-height:44px; box-sizing:border-box; padding:9px 12px; border-radius:12px; background:var(--flaeche2); color:var(--tinte); text-decoration:none; font-size:14.5px; line-height:1.4} section.anstehend li a .ikon{flex:0 0 auto} section.anstehend li.ja-warn a, section.anstehend li.ja-warn a .ikon{color:var(--bad)} section.anstehend li.ja-wartet a .ikon{color:var(--wartetinte, #9A6B00)} section.anstehend li a:hover span{text-decoration:underline; text-underline-offset:3px} .bmscanstand.warn{color:var(--bad)} .imkarte button.immark.aktiv, .imkarte button.imlichtsetzen.aktiv{box-shadow:inset 0 0 0 2px #fff, 0 0 0 2px var(--akzent)} .imkarte .imzoom > span{min-width:78px} /* Scan-Ordner: übernommene Datei ansehen (27.09.2026) */ li.sbzeile details.sbansehen{grid-column:1 / -1; margin:2px 0 0} li.sbzeile details.sbansehen > summary{display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:12px; border:1px solid var(--linie); background:var(--flaeche); font-size:14.5px; font-weight:600; color:var(--akzent); cursor:pointer; list-style:none} li.sbzeile details.sbansehen > summary::-webkit-details-marker{display:none} li.sbzeile details.sbansehen[open] > summary{margin-bottom:10px} li.sbzeile details.sbansehen img.sbbild{display:block; max-width:100%; height:auto; border-radius:10px} @media (max-width:560px){ html body div.ubbild.ubkettenbild{overflow-x:auto; overflow-y:hidden} .zskarte{position:fixed !important; left:12px !important; right:12px !important; top:auto !important; bottom:calc(12px + env(safe-area-inset-bottom, 0px)) !important; width:auto !important; max-width:none !important; transform:none !important; z-index:9000; box-shadow:0 8px 30px rgba(0,0,0,.22)} } /* IMMOBILIENFOTOS (27.09.2026, zweite Fassung). Chris: „Das Fotoformat ist weder Fisch noch Fleisch … unser Haus ist angeschnitten.“ Jetzt: Rahmen 3:2 (das Format der Kamera), Foto links, Eckdaten rechts; ab 900 px Fensterbreite untereinander. Ausschnitt und Markierung wählt man selbst; gespeichert wird nur die Lage, nie ein neues Bild. */ .imkarte .imoben{display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); gap:28px; align-items:start; margin-bottom:20px} .imkarte .imoben > .dlkopf{flex-direction:column; align-items:flex-start; gap:14px; margin:0} .imkarte .imoben > .dlkopf .dlzahl{text-align:left; align-items:flex-start; justify-items:start; margin-left:0} @media (max-width:900px){ .imkarte .imoben{grid-template-columns:minmax(0, 1fr); gap:16px} } .imkarte .imfoto{margin:0; min-width:0} .imkarte .imfoto.leer{border:1px dashed var(--linie); border-radius:12px; padding:16px; display:flex; justify-content:center} .imkarte .imrahmen{position:relative; aspect-ratio:3 / 2; border-radius:12px; overflow:hidden; background:var(--flaeche2)} /* Das Foto ist Hintergrund, nicht : So ragt nichts über den Rahmen hinaus, und der Gestaltwächter meldet keinen Bildlauf (gemessen 27.09.2026: 55 px). */ .imkarte .imrahmen .imbild{position:absolute; inset:0; background-repeat:no-repeat; user-select:none; -webkit-user-select:none} /* Lichtkegel relativ zum Rahmen (27.09.2026): 110 px fest waren am Telefon fast das ganze Bild — der Kegel war kaum zu sehen. */ .imkarte .imlicht{position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse var(--lr, 13%) calc(var(--lr, 13%) * 1.5) at var(--fx, 50%) var(--fy, 50%), rgba(0,0,0,0) 0, rgba(0,0,0,0) 72%, rgba(0,0,0,.58) 100%)} .imkarte .impin{position:absolute; width:0; height:0; pointer-events:none} .imkarte .impin em{position:absolute; left:-10px; top:-10px; width:14px; height:14px; border-radius:50%; background:var(--akzent); border:3px solid #fff; box-shadow:0 0 0 5px rgba(255,255,255,.35), 0 1px 4px rgba(0,0,0,.35)} .imkarte .impin i{position:absolute; left:-1px; bottom:6px; width:2px; height:26px; background:#fff; box-shadow:0 0 3px rgba(0,0,0,.45)} .imkarte .impin b{position:absolute; bottom:32px; left:0; transform:translateX(-50%); white-space:nowrap; background:#fff; color:#1d1d1f; font-size:13px; font-weight:600; line-height:1.2; padding:7px 11px; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.28)} .imkarte .imknoepfe{display:flex; flex-wrap:wrap; gap:12px; margin-top:12px} .imkarte .imfoto.leer .imknoepfe{margin:0} .imkarte .imfotoform{margin:0} .imkarte .imfotowahl, .imkarte button.imbearb, .imkarte button.immark, .imkarte button.imlichtsetzen, .imkarte .imtun button{position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--knopf); height:var(--knopf); padding:0 18px; border:0; border-radius:12px; background:var(--akzent); color:var(--aufakzent, #fff); font:inherit; font-size:14.5px; font-weight:600; cursor:pointer; width:auto} .imkarte .imfotowahl .ikon, .imkarte button .ikon{color:inherit} .imkarte .imfotowahl input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; font-size:0} .imkarte .imfotoform.laeuft .imfotowahl{opacity:.6; pointer-events:none} .imkarte .imfoto.bearbeiten .imknoepfe{display:none} .imkarte .imfoto.bearbeiten .imrahmen{cursor:grab; touch-action:none; outline:2px solid var(--akzent); outline-offset:2px} .imkarte .imfoto.bearbeiten.setzen .imrahmen{cursor:crosshair} .imkarte .imfoto.bearbeiten.setzen button.immark{box-shadow:inset 0 0 0 2px #fff, 0 0 0 2px var(--akzent)} .imkarte form.imlage{display:grid; gap:12px; margin:14px 0 0; padding:14px; border-radius:12px; background:var(--flaeche2)} .imkarte form.imlage[hidden]{display:none} .imkarte .imhinweis{margin:0; font-size:13px; color:var(--tinte2)} .imkarte .imzoom, .imkarte .imschild{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--tinte2)} .imkarte .imzoom input{flex:1 1 auto; min-height:var(--knopf); accent-color:var(--akzent)} .imkarte .immarkreihe{display:flex; flex-wrap:wrap; gap:10px; align-items:center} .imkarte .imschild{flex:1 1 220px} .imkarte .imschild input{flex:1 1 auto; min-width:0; height:var(--knopf); box-sizing:border-box; padding:0 12px; border:1px solid var(--linie); border-radius:10px; background:var(--flaeche); font:inherit; font-size:14.5px; color:var(--tinte)} .imkarte .imschalter{display:flex; flex-wrap:wrap; gap:8px 22px; font-size:14.5px; color:var(--tinte)} .imkarte .imschalter label{display:inline-flex; align-items:center; gap:8px; min-height:var(--knopf); cursor:pointer} .imkarte .imschalter input{width:20px; height:20px; accent-color:var(--akzent)} .imkarte .imtun{display:flex; justify-content:flex-end; gap:10px} /* MARKEN DER BANKEN: eine Zeile, eine Höhe (27.09.2026). Chris: „Die Buttons werden verschoben dargestellt … so nicht. Das muss ordentlich sein.“ Gemessen: Ersetzen und Entfernen 44 px, Übernehmen und Holen 38 px (.knopfleise); das Größenfeld 53 px breit, sein Pfeil lag auf „px“. Der Gestaltwächter hatte „Ersetzen / Übernehmen (6 px)“ gemeldet. */ .md-tun form.bmhoehe button, .md-tun form.bmholen button{min-height:var(--knopf)} .md-tun form.bmhoehe select{height:var(--knopf); padding:0 32px 0 12px; min-width:96px; font-size:14.5px} /* ------------------------------------------------------------------ * * Werte beim Zeigen * * Jedes der drei Bilder traegt UEBER seiner Zeichnung ein unsichtbares * Band je Monat beziehungsweise je Tag. Darin steht der genaue Wert. * * Frueher stand er als `` IM SVG — die Beschriftung, die jeder * Browser von sich aus einblendet. Christian am 12.09.2026: „Ja, die * sollten früher kommen, die Texte. Die kommen zu spät, finde ich." * GEMESSEN am 12.09.2026, Bildschirmaufnahme mit 60 Bildern/s unter * Chromium: Zeiger auf dem Band bei 0,317 s, Beschriftung des Browsers * bei 0,850 s — 533 ms Wartezeit, die dem Browser gehoert und an die * keine Zeile CSS herankommt. Also macht die Seite es selbst: * 70 ms warten, 110 ms aufblenden. NACHGEMESSEN am 12.09.2026 in der * laufenden Seite: erster sichtbarer Anflug nach 85 ms, voll lesbar * nach 185 ms — statt 533 ms, bis ueberhaupt etwas anfing. * Warum nicht 0 ms: Ein Band ist bei 1180 px Fenster GEMESSEN 83 px * breit. Wer quer ueber alle zwoelf faehrt, streift jedes rund 25 ms — * bei 0 ms flackerten zwoelf Texte auf. 70 ms trennt Streifen von * Hinsehen, ohne dass man das Warten bemerkt. * * Das Bild selbst nimmt keine Maus mehr an: es soll gesehen, nicht * angefasst werden. EINE Regel dafuer, nicht eine je Form. * ------------------------------------------------------------------ */ .mitband{position:relative} .mitband svg{pointer-events:none} .zeigen{position:absolute; inset:0; z-index:2; --w:min(264px, 100%)} .zeigen .band{ position:absolute; top:0; bottom:0; left:var(--l); width:var(--b); cursor:default; background-color:transparent; transition:background-color .12s ease; } .zeigen .band:hover{background-color:color-mix(in srgb, var(--tinte) 5.5%, transparent)} /* Der Text steht mittig ueber seinem Band — ausser am Rand, wo er sonst aus dem Bild liefe und in der Jahresleiste einen Rollbalken aufzoege. `clamp` erledigt beide Faelle mit EINER Regel: nie weiter links als 0, nie weiter rechts als bis zur rechten Kante. */ .zeigen .wink{ position:absolute; width:var(--w); left:clamp(0px, calc(var(--l) + var(--b) / 2 - var(--w) / 2), calc(100% - var(--w))); padding:8px 11px; border-radius:11px; background:var(--flaeche); border:1px solid var(--linie); box-shadow:0 8px 22px rgba(15,30,31,.16); font-size:12px; line-height:1.5; color:var(--tinte); font-variant-numeric:tabular-nums; white-space:pre-line; text-align:left; opacity:0; pointer-events:none; transition:opacity .11s ease .07s; } .zeigen.ab .wink{top:7px} .zeigen.auf .wink{bottom:calc(100% - 6px)} .zeigen .band:hover + .wink{opacity:1} /* Ohne Zeiger gibt es kein Ueberfahren — und ein Text, der beim Tippen haengen bleibt, ist schlimmer als keiner. */ @media (hover:none){ .zeigen .band:hover{background-color:transparent} .zeigen .wink{display:none} } @media (prefers-reduced-motion:reduce){ .zeigen .wink{transition:opacity .01s linear .07s} } /* ------------------------------------------------------------------ * * Die Konten bei der Bank * Zugeklappt, weil es eine Nachschlageliste ist und kein Kennwert. * Aufgeklappt getrennt nach Inhaber: wer welche Konten hat, muss auf * einen Blick erkennbar sein und darf nie geraten werden muessen. * ------------------------------------------------------------------ */ details.bankkonten{ background:var(--flaeche); border-radius:16px; margin:0 0 14px; box-shadow:0 1px 2px rgba(15,30,31,.05); } details.bankkonten > summary{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; cursor:pointer; list-style:none; border-radius:16px; } details.bankkonten > summary::-webkit-details-marker{display:none} .bkzahl{font-size:12px; color:var(--tinte3); white-space:nowrap} /* 27.09.2026: Abgleich Urlaubsmanager / Wann wird es leichter - Zustand als Satz mit Zeichen */ .abgleich{display:flex; gap:8px; align-items:flex-start; margin:12px 0 0; font-size:13px; line-height:1.5; color:var(--tinte2)} .abgleich .ikon{flex:0 0 auto; margin-top:3px} /* MELDUNGSKARTEN DER ÜBERSICHT (zz487). Chris: „Die Anordnung ist natürlich total schief und krumm … Flattert ohne Ende … solche Meldungen müssen auch sauber aufgelistet werden.“ GEMESSEN: „Vielleicht schon abgebucht“ und „Ein Preis hat sich geändert“ hatten keine eigene Gestaltung – die Satzregel .abgleich (display:flex, für p.abgleich gedacht) stellte Titel, Erklärung und Liste als drei Spalten nebeneinander, jede auf eigener Höhe. Jetzt: Kopf, Satz, Liste untereinander; jede Meldung eine Zeile mit Linie, die Knöpfe in einer Reihe darunter. */ section.abgleich{display:block; font-size:inherit; line-height:inherit; color:inherit} section.abgleich .agkopf{display:flex; align-items:center; gap:10px; margin:0 0 6px} section.abgleich .agkopf h2{margin:0} section.abgleich .agzeichen{display:grid; place-items:center; color:var(--tinte2)} section.abgleich .agzeichen .ikon{margin:0} section.abgleich .agsatz{margin:0 0 4px; font-size:14px; color:var(--tinte2); line-height:1.5} section.abgleich ul.agliste{list-style:none; margin:0; padding:0; display:grid} section.abgleich ul.agliste > li{display:grid; gap:10px; padding:14px 0 4px; border-top:1px solid var(--linie); margin-top:10px} section.abgleich ul.agliste > li.agmehr{display:block; font-size:13px; color:var(--tinte3)} section.abgleich .agplan{margin:0; font-size:14.5px; line-height:1.5; color:var(--tinte)} section.abgleich .agtun{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px} section.abgleich .agtun form{margin:0} section.abgleich button.agknopf{display:inline-flex; align-items:center; gap:8px; min-height:44px} section.abgleich button.agleise{background:none; border:0; box-shadow:none; color:var(--tinte2); min-height:44px; padding:0 4px; font-size:13.5px; cursor:pointer} section.abgleich button.agleise:hover{color:var(--tinte)} .abgleich.gut .ikon{color:var(--gut)} .abgleich.weicht{color:var(--bad)} @keyframes bkpuls{0%,100%{opacity:1}50%{opacity:.25}} button.bkknopf{ display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer; background:var(--akzent); color:var(--aufakzent); font:inherit; font-size:13px; font-weight:500; padding:9px 15px; border-radius:999px; transition:filter .14s ease; } button.bkknopf:hover{filter:brightness(1.12)} .ein-schluessel{margin:6px 0 10px} .ein-schluessel code{display:block; font-size:12px; word-break:break-all; background:var(--grund); padding:9px 11px; border-radius:9px; color:var(--tinte2); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; line-height:1.5} button.bkknopf .ikon{width:16px; height:16px} .bkname{display:flex; align-items:baseline; gap:6px; min-width:0} .bkname em{font-style:normal; font-variant-numeric:tabular-nums; color:var(--tinte3); font-size:12px} @media (max-width:560px){ .bkname{width:100%} } /* Der Abstand sitzt am Rahmen, nicht am Bild: `.zeigen` deckt mit `inset:0` genau den Rahmen ab, und der soll genau das Bild sein. */ /* Seit die Jahreslinie weg ist (Gesetz 17), haben die Balken den Platz. */ svg.fluss{display:block; width:100%; height:150px; margin:0} svg.fluss .b-ein{fill:var(--gut)} svg.fluss .b-aus{fill:var(--bad); opacity:.85} svg.fluss .boden{stroke:var(--linie); stroke-width:1; vector-effect:non-scaling-stroke} svg.fluss .hervor{fill:var(--flaeche2)} svg.fluss line.raster{stroke:var(--linie); stroke-width:1; stroke-dasharray:1 5; vector-effect:non-scaling-stroke} /* Die Zahlen zur Skala der Balken: rechts neben dem Bild, in der Spalte, die auch die Jahreslinie fuer ihre Skala nutzt (p.jskala). */ p.fskala{position:absolute; inset:0; margin:0; pointer-events:none; z-index:1} p.fskala span{ position:absolute; right:0; transform:translateY(-50%); font-size:12px; color:var(--tinte3); font-variant-numeric:tabular-nums; padding:0 3px; border-radius:4px; background:color-mix(in srgb, var(--flaeche) 85%, transparent); } .mitband.mb-fluss{position:relative} /* Im rollenden Band (unter 760 px) stuende die Zahl am rechten Ende hinter dem August — unsichtbar. Dort steht sie links, wo der Blick anfaengt. */ .legende .fstufe{display:none} @media (max-width:760px){ p.fskala{display:none} .legende .fstufe{display:inline-flex} } .legende .mk.raster{background:repeating-linear-gradient(90deg, var(--tinte3) 0 2px, transparent 2px 5px); height:1px; align-self:center; box-shadow:none} .monatswahl{display:grid; grid-template-columns:repeat(12,1fr); gap:2px; margin-top:2px} .monatswahl a{ display:flex; flex-direction:column; align-items:center; gap:1px; padding:8px 2px 10px; border-radius:var(--wahl); text-decoration:none; color:var(--tinte2); transition:background .14s ease; } .monatswahl a:hover{background:var(--flaeche2)} /* .monatswahl a.aktiv: siehe Gattung B */ /* DER MONATSNAME HEISST `mwname`, NICHT `mn` (18.09.2026). Christian: „Bei der Darstellung hier oben links, beim September — man weiß ja gar nicht, welcher Monat das ist." ER HAT RECHT, und es war eine NAMENSKOLLISION: `.mn` heisst an einer Stelle „Mobilnavigation" (das Klappmenue unter 720 px) und war dort auf `display:none` gesetzt. Dieselbe Klasse trug der Monatsname in der Monatswahl — und wurde damit auf JEDER Breite ueber 720 px mitversteckt. Gemessen am laufenden System: `.mn` in der ersten Kachel trug den Text „Sep" und stand auf `display:none`. Der Name war also immer da, nur nie sichtbar. Zwei Dinge duerfen nicht denselben Namen tragen — das ist Christians eigenes Gesetz zur irrefuehrenden Benennung, eine Ebene tiefer. */ .monatswahl .mwname{font-size:12px; font-weight:600; letter-spacing:.01em; color:var(--tinte)} .monatswahl .mj{font-size:12px; color:var(--tinte3); line-height:1} /* UNTER DEM MONAT STEHT DER STAND AM ZYKLUSENDE — AUF DEN CENT. Am Morgen des 13.09.2026 stand er hier unbeschriftet und wurde als Überschuss gelesen („156 Euro Überschuss … Das kann nicht sein"); dann stand der Überschuss gross. Am Nachmittag, mit der Zeitreise in der Hand: „189,65 ist der Kontostand, kurz bevor wieder Geld kommt … mit diesem Betrag geh ich in den nächsten Zyklus … Das ist das, was ich da sehen will." Also: der Stand gross, gruen/rot nach seinem Vorzeichen; der Überschuss klein darunter und BESCHRIFTET („+78 € im Zyklus"), damit keiner der beiden je wieder fuer den anderen gehalten wird. */ .monatswahl .ms{ font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; line-height:1.25; } .monatswahl .mstand{ font-size:12px; color:var(--tinte3); font-variant-numeric:tabular-nums; white-space:nowrap; line-height:1.2; } /* Einnahmen und Ausgaben unter dem Monat, in den Farben der Balken. Auf dem Telefon (Band 660 px, 55 px je Monat) umbrechen die beiden Zahlen untereinander, statt hinauszulaufen. */ .monatswahl .mfluss{ /* Beim Umbruch stiessen die Zeilen aneinander (gemessen 0,9 px am 20.09.2026) — eine Zeilenluft gehoert in den gap, nicht in die Zeilenhoehe. */ display:flex; flex-wrap:wrap; justify-content:center; gap:5px 7px; margin-top:4px; font-size:12px; color:var(--tinte3); font-variant-numeric:tabular-nums; line-height:1.3; } .monatswahl .mfluss > span{display:inline-flex; align-items:center; gap:3px; white-space:nowrap} .monatswahl .mfluss .mk{width:7px; height:7px; border-radius:2px; display:inline-block} .monatswahl .mfluss .mk.ein{background:var(--gut)} .monatswahl .mfluss .mk.aus{background:var(--bad)} /* Die kurze Erklaerung unter den Balken (18.09.2026) — sie ersetzt die entfernte Rechenkette und sagt in einem Satz, was das Bild zeigt. */ .monatswahl .ms.minus{color:var(--bad)} .monatswahl .ms.plus{color:var(--gut)} .legende .mk.zahl{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--tinte3); border-radius:3px; } .monatswahl a.vage .mwname{opacity:.62} /* ---- Das Raster ---- */ .raster{display:grid; grid-template-columns:1fr; gap:20px} @media (min-width:901px){ .raster{grid-template-columns:300px minmax(0,1fr); align-items:start} .raster .rechts{grid-column:1 / -1} } @media (min-width:901px){ /* DER MONAT BEKOMMT DIE GANZE BREITE. Christian am 12.09.2026: „Diese Monatsübersicht, das ist mir ganz, ganz wichtig. Das ist im Prinzip meine Excel-Tabelle. Und in der muss ich arbeiten können ... Das brauch ich ganz dominant, ja? Das muss breit sein auch. Das muss ordentlich pflegbar sein." Und: „Das ist einfach zu gedrungen. Das muss atmen können, das muss breiter sein." Er hat recht, und die alte Aufteilung stand dem im Weg: drei Spalten nebeneinander, davon eine fuer den Monat. Bei 1440 px blieben der Arbeitsflaeche 600 px — und in zwei Spalten davon brach „Ansparen Servicepauschale VW Arteon und Hyundai i10" ueber fuenf Zeilen um, mitten im Wort. Jetzt liegt der Monat OBEN ueber die volle Breite. Was ihn begleitet — die Lage links, die Tagesliste rechts — steht darunter nebeneinander. Das ist auch die richtige Rangfolge: Erst das, woran man arbeitet, dann das, was man dabei im Blick behaelt. */ .raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start} .raster .mitte {grid-column:1 / -1; order:1} .raster .lage {order:2} .raster .rechts{order:3; grid-column:auto} } @media (min-width:1181px){ /* Unter dem Monat: die Lage schmal, die Tagesliste breit — sie traegt Datum, Bezeichnung und Betrag und braucht den Platz. */ .raster{grid-template-columns:320px minmax(0,1fr)} } /* ---- Lage links ---- */ /* NUR DIE KOPFZAHL STEHT MITTIG — alles andere linksbündig. Christian am 13.09.2026: „Mittig, das geht gar nicht. Das sieht furchtbar aus, das so aufzuziehen." Und: „Ich rede von den Bezeichnungen. Die Bezeichnungen müssen linksbündig sein. Die Werte dahinter bleiben rechtsbündig, damit die Nachkommastellen untereinander sitzen." Hier stand `text-align:center` auf dem ganzen Block. In der schmalen Spalte fiel das nicht auf; sobald Chris den Block auf volle Breite zieht, schwimmen Listennamen in der Mitte, und die Augen finden keine Kante mehr. Mittig gehört genau das, was eine Schlagzeile ist: Datum, Zahl, ihre beiden Unterzeilen. Alles, was Name und Wert paart, folgt der Regel des Handbuchs — Name links, Wert rechts. */ .lage{ background:var(--flaeche); border:var(--karterand); border-radius:var(--karteradius); box-shadow:var(--karteschatten); padding:20px 20px 18px; text-align:left; } /* DER STAND — EIN MODUL, EINE ZAHL. (Klasse `meinstand`, nicht `stand`: `.stand` ist seit langem der Tagessaldo in der Tagesliste — die erste Fassung dieses Blocks hiess auch `.stand` und gab damit JEDER Saldo-Pille der Tagesliste 20 px Polsterung und eine Blockbreite von 42 px; der Betrag ragte 48–62 px heraus (gemessen live, 13.09.2026). Ein Name, ein Bauteil.) Christian am 13.09.2026: „ich will genau eine Zahl erst mal oben haben. Und zwar das Datum, die Zahl des aktuellen Kontostands und der Stand … und meinetwegen noch heute noch fällig. Das will ich als separates Modul." Datum, Zahl, Bezug, Satz — mittig, weil es eine Schlagzeile ist (Handbuch: mittig gehoert genau das, was Schlagzeile ist). Der Block ist ein Container: Die Zahl misst sich an SEINER Breite, nicht am Fenster — auf einem Viertel der Seite steht „22.402,97 €" damit in einer Zeile statt zu brechen. */ /* DIE RÜCKFRAGEN ZUM MONATSWECHSEL (17.09.2026). Christian: „Bei Unsicherheit soll das System fragen." Die Karte trägt dieselbe Fläche, denselben Rand und dieselbe Rundung wie jede andere — sie ist kein Alarm, sondern eine Arbeitsliste. Auffällig ist nur, dass sie ganz oben steht und erst verschwindet, wenn nichts mehr offen ist. Jede Zeile nennt den gemessenen Befund, damit entschieden und nicht geraten wird. */ .fskarte{ background:var(--flaeche); border:var(--karterand); border-radius:var(--karteradius); box-shadow:var(--karteschatten); padding:20px 20px 16px; } .fskarte .fsbezug{margin:2px 0 14px; font-size:13px; color:var(--tinte2)} ul.fsliste{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px} ul.fsliste > li{padding:14px 0 0; border-top:1px solid var(--linie)} ul.fsliste > li:first-child{padding-top:0; border-top:0} .fskopf{display:flex; align-items:baseline; justify-content:space-between; gap:12px} .fskopf .fstext{font-size:14.5px; font-weight:600; min-width:0} .fskopf b{font-weight:600; font-variant-numeric:tabular-nums; flex:0 0 auto} .fsgrund{margin:3px 0 0; font-size:12px; color:var(--tinte3)} .fswahl{display:flex; align-items:flex-end; flex-wrap:wrap; gap:10px; margin-top:10px} label.fsbetrag{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--tinte3); flex:0 0 auto} label.fsbetrag input{ width:120px; min-height:var(--knopf); padding:0 12px; border:1px solid var(--linie); border-radius:12px; background:var(--flaeche); color:var(--tinte); font-size:14.5px; font-variant-numeric:tabular-nums; text-align:right; } .fswahl button{ /* `width:auto` und `flex:0 0 auto` ausdruecklich: In der Seite steht eine allgemeine Regel, die Knoepfe auf volle Breite zieht — gemessen 1170 px je Knopf bei 1300 px Fenster. Ein Knopf, der die halbe Karte einnimmt, sieht aus wie ein Hauptweg; hier sind es zwei gleichrangige Entscheidungen nebeneinander. */ width:auto; flex:0 0 auto; min-height:var(--knopf); padding:0 18px; border:0; border-radius:12px; cursor:pointer; background:var(--akzent); color:var(--aufakzent); font-weight:600; font-size:14.5px; font-family:inherit; } .fswahl button.still{background:transparent; color:var(--tinte2); border:1px solid var(--linie)} .fswahl button[disabled]{opacity:.5; cursor:default} .fsfertig{margin:8px 0 0; font-size:13px; color:var(--tinte2)} @media (max-width:560px){ .fswahl{gap:8px} label.fsbetrag input{width:100%} label.fsbetrag{flex:1 1 100%} .fswahl button{flex:1 1 0} } /* ================================================================== „MEIN STAND" IST LINKSBUENDIG (18.09.2026) Christian, mit einem Bild der breit gezogenen Karte: „Es muss alles linksbündig sein, es muss die richtige Schrift haben, der Abbuchungsschrift, so wie wir es unten haben bei Einnahmen und Ausgaben, dass es sofort als Abbuchungen oder als Buchungen deutlich wird. … Linksbündigkeit bei den Bezeichnungen, Rechtsbündigkeit bei den Zahlen. Aber nicht ein Flattern. … und oben auch das Modul, oben drüber die Zahl, der Tag Freitag, das muss dann auch alles linksbündig sein, sieht doch sonst schlimm aus." ER HAT RECHT, und die Ursache stand in EINER Zeile: `text-align:center` auf der ganzen Karte. Zentriert geht gerade noch, solange die Karte schmal ist — zieht man sie breit, hat jede Zeile eine andere Mitte, und dann flattert es. GEMESSEN im Bild vom 18.09.: Fünf Posten, fünf verschieden eingerueckte Unterzeilen („zuletzt geplant für Di. 1.", „… Do. 10."), weil jede Unterzeile unter IHREM Namen zentriert stand. Es war also nicht das Auge — es war die Regel. JETZT: Die Karte ist linksbuendig wie jede Liste dieser Anwendung. Die Bezeichnungen stehen an einer Kante, die Betraege an einer zweiten, rechts; dazwischen laeuft der Platz. Und die Posten bekommen den Satz der Buchungszeilen aus Einnahmen und Ausgaben (13,5 px, dieselbe Zeilenhoehe, tabellarische Ziffern), damit man ohne Nachdenken sieht, dass es Buchungen sind. ================================================================== */ .meinstand{ background:var(--flaeche); border:var(--karterand); border-radius:var(--karteradius); box-shadow:var(--karteschatten); padding:20px 20px 18px; text-align:left; container-type:inline-size; } .meinstand .wann{margin:0 0 6px; font-size:13px; color:var(--tinte3); letter-spacing:.015em} .meinstand .zahl{ margin:0; font-size:clamp(26px, 14cqw, 40px); line-height:1.05; letter-spacing:-.035em; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; } /* Die grosse Zahl und ihr Bezugssatz: 3,5 px gemessen (20.09.2026). */ .meinstand .bezug{margin:var(--luft-satz) 0 0; font-size:13px; color:var(--tinte2)} .meinstand .dazu{margin:4px 0 0; font-size:12px; color:var(--tinte3); text-wrap:balance} /* UEBERFAELLIGES steht als eigener Satz unter dem Tagesende — nie in derselben Zeile, damit niemand es fuer „heute faellig“ haelt (16.09.2026). */ .meinstand .dazu .msunklar{display:block; margin-top:3px} /* Das blinde Konto sagt, warum es ueber den Abend schweigt (18.09.2026). Warnfarbe, eigene Zeile, Abstand — es ist kein Nachsatz, sondern der Grund dafuer, dass eine Zahl FEHLT. */ .meinstand .dazu .msblind{display:flex; align-items:flex-start; gap:6px; margin-top:8px; color:var(--bad); font-size:13px; line-height:1.45} .meinstand .dazu .msblind svg{flex:0 0 auto; margin-top:2px} /* WORAUS DIE HEUTIGE ZAHL BESTEHT (17.09.2026) — die Aufschlüsselung unter dem Satz. Christian: „Heute gehen noch 600,00 € ab — diese Aussage zweifle ich an. Weise das nach.“ Eine Zahl, die niemand nachrechnen kann, zwingt zum Fragen. Also steht sie hier aufgeteilt, in derselben Karte, ohne Aufklapper. */ /* WAS AM ZYKLUSENDE UEBRIG BLEIBT — die Antwort auf Christians eigentliche Frage (17.09.2026): „Ich will ja immer wissen, was bleibt mir noch am Zyklusende übrig.“ Sie steht direkt unter dem Tagessatz, ruhig, ohne zweite große Zahl — die große Zahl gehört dem Tag (Gesetz 21), diese Zeile dem Zyklus. */ p.mszyklus{margin:8px 0 0; font-size:13px; color:var(--tinte2); line-height:1.5} p.mszyklus b{font-weight:600; font-variant-numeric:tabular-nums; color:var(--tinte); font-size:14.5px} p.mszyklus b.minus{color:var(--bad)} /* Die Aufteilung bei „Zusammen“: sie trägt die Zahl, sie ersetzt sie nicht. Deshalb dieselbe Zeile, nur ruhiger — und der Hinweis darunter, weil er eine Fußnote ist. */ p.mszyklus .mszteile{font-variant-numeric:tabular-nums; color:var(--tinte2)} p.mszyklus .mszhinweis{display:block; margin-top:3px; font-style:normal; font-size:12px; color:var(--tinte3)} .meinstand .dazu .msdarin{display:block; margin-top:2px; color:var(--tinte3); font-size:12px} /* DIE POSTEN SIND BUCHUNGSZEILEN — also sehen sie aus wie Buchungszeilen. Zwei Spalten, keine dritte: Bezeichnung links (sie darf umbrechen), Betrag rechts an einer festen Kante (tabellarische Ziffern, damit die Kommas untereinander stehen). Die Unterzeile haengt an der Bezeichnung, nicht an der Mitte — das war das Flattern. Masse und Zeilenhoehe wie `ol.buliste li.bu` in Einnahmen und Ausgaben. */ ul.msoffenliste, ul.msunklarliste{list-style:none; margin:8px 0 0; padding:8px 0 0; border-top:1px solid var(--linie); display:grid; gap:0} /* EINE BUCHUNG SIEHT AUS WIE EINE BUCHUNG (18.09.2026, Gesetz 31). Christian: „Die Bezeichnungen, die in diesem Modul sind, die müssen die Schriftart der Einnahmen und Ausgaben tragen. Die ist genau festgelegt. Siehe unten im Modul Einnahmen- und Ausgabenübersicht. Passe es an, das ist ein Befehl. Und verankere es im Corporate Design." GEMESSEN an `ol.buliste li.bu` (Einnahmen und Ausgaben), und genau diese Maße gelten: Bezeichnung Plex Mono 13 px 400 Zeilenhöhe 1,3 Betrag Plex Mono 14 px 500 tabellarische Ziffern Beiwerk Plex Mono 12 px 400 Zeilenhöhe 1,4 Die Werte stehen in den Stellvertretern --buchschrift/--buchgrad/--buchgradwert, damit dieselbe Festlegung nicht an zwei Stellen gepflegt wird. */ ul.msoffenliste li, ul.msunklarliste li{ display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:8px; padding:7px 0; border-bottom:1px solid var(--linie); font-family:var(--buchschrift); font-size:var(--buchgradk); line-height:1.35; color:var(--tinte2); text-align:left; } ul.msoffenliste li:last-child, ul.msunklarliste li:last-child{border-bottom:0} ul.msoffenliste li > span, ul.msunklarliste li > span{ min-width:0; overflow-wrap:anywhere; color:var(--tinte); font-family:var(--buchschrift); font-size:var(--buchgradk); font-weight:400; line-height:1.35; } ul.msoffenliste li > b, ul.msunklarliste li > b{ font-family:var(--buchschrift); font-size:var(--buchgradwertk); font-weight:500; line-height:1.4; font-variant-numeric:tabular-nums; color:var(--tinte); white-space:nowrap; text-align:right; } ul.msoffenliste li > b.minus, ul.msunklarliste li > b.minus{color:var(--bad)} ul.msoffenliste .msumb, ul.msunklarliste .msumb{ font-style:normal; color:var(--tinte3); font-family:var(--buchschrift); font-size:var(--buchgradbeik); line-height:1.4; display:block; text-align:left; margin-top:1px; } /* WORAUS — die Antwort steht an der Stelle, an der die Frage entsteht (16.09.2026). Einzelheiten im Aufklapper, damit die Karte ruhig bleibt (Gesetz: Struktur statt Rauschen). */ /* Ohne den Kopf beginnt die Lage mit ihrem ersten Inhalt — kein Loch oben. Der Ziehgriff wird als erstes Kind eingefuegt, deshalb beide Faelle. */ .lage > :is(ul.befund, section.offen, section.eigenliste, section.nebenkonten, section.bankums, section.erfkarte):is(:first-child, .ziehgriff + *){margin-top:0} ul.befund{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:7px; text-align:left} ul.befund li{position:relative; padding-left:18px; font-size:14.5px; line-height:1.45; color:var(--tinte2)} ul.befund li::before{ content:""; position:absolute; left:3px; top:.58em; width:6px; height:6px; border-radius:50%; background:var(--tinte3); } ul.befund li.warn{color:var(--tinte)} ul.befund li.warn::before{background:var(--bad)} section.offen{ margin:18px -4px -2px; padding:12px 14px 11px; text-align:left; background:var(--flaeche); border:1px solid var(--bad); border-radius:14px; } section.offen h3{margin:0 0 2px; font-size:14.5px; font-weight:600; color:var(--bad); letter-spacing:-.01em} section.offen .posten:first-of-type{border-top:0; margin-top:6px; padding-top:0} /* ---- Mitte ---- */ .mitte{ background:var(--flaeche); border:var(--karterand); border-radius:var(--karteradius); box-shadow:var(--karteschatten); padding:16px 18px 14px; min-width:0; } /* Titel links, das Pfeilpaar rechts daneben — ein Paar, kein Weg ueber die ganze Breite (Christian, 13.09.2026: „kilometerweit auseinander"). */ /* ------------------------------------------------------------------ * * DIE MONATSSCHALTUNG (18.09.2026) — links verankert, feste Namensbreite * * Christian: „Ich möchte, dass Du Dir was überlegst, wie man diese * Monatsdurchschaltung so machen kann, dass zum einen das Feld nicht * springt, nur weil der Name des Monats sich verkürzt. Und zum anderen * sich nicht verändert, wenn das Modul kleiner wird. … Es muss schneller * gehen … vielleicht machst Du es in grün." * * Drei Maße, jedes begründet: * 1. `justify-content:flex-start` statt `space-between` — die Einheit * klebt links. Damit hängt ihre Lage nicht an der Modulbreite. * 2. `.mktitel` bekommt eine FESTE Breite in `ch` (12,5ch bei 19px * entspricht „September 2026" mit Luft) und `tabular-nums`. Der rechte * Pfeil wandert deshalb bei keinem Monatswechsel. * 3. Die Pfeile sind 40x40 statt 36x32 (Apples Maß für eine kleine * Trefferfläche ist 44; 40 ist das Größte, was in diese Kopfzeile passt, * ohne den Titel zu drücken). * * DIE FARBE: Akzent als KONTUR im Ruhezustand, gefüllt beim Überfahren und * bei Tastaturfokus. Christians CI-Regel „pro Karte genau EIN Element in * Markenfarbe" ist damit erfüllt und nicht verletzt: Die Monatsschaltung * IST die Haupthandlung dieser Karte. Gefüllt im Ruhezustand wäre lauter, * nimmt der Karte aber die Ruhe, wenn man nur liest. * ------------------------------------------------------------------ */ .monatskopf{display:flex; align-items:center; justify-content:flex-start; gap:6px; margin-bottom:14px; padding-right:2px} /* DER KALENDER-KNOPF WAR EIN GRAUER KASTEN STATT EINES KNOPFS (23.09.2026) Christian: "Du hast daraus einen Button gemacht. Das ist doch ein Icon... wenn es ein Button ist, dann muss es auch gruen sein... koennte auch ein schmalerer Button sein, aber mit gruenem Hintergrund." GEMESSEN: Die globale Knopf-Grundregel setzt min-width:168px und min-height:44px auf JEDES <button>. Diese Karte hier setzte nur width:30px/height:30px, nie die min-Werte - und min schlaegt width, darum blieb der Knopf 168x44 breit und beige (--flaeche2) statt grün. Jetzt: min-width/min-height explizit auf 40px gesetzt (passt zur Kreisgroesse der Pfeile a.mblatt daneben), Kreisform (radius:999px), gefuellt in --akzent mit --aufakzent-Schrift - wie jeder andere Knopf im Haus. */ .monatskopf .mkz{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; min-width:40px; min-height:40px; flex:0 0 auto; margin-right:3px; border-radius:999px; background:var(--akzent); color:var(--aufakzent)} .monatskopf .mkz:hover, .monatskopf .mkz:focus-visible{background:color-mix(in srgb, var(--akzent) 82%, black)} .monatskopf .mkz:active{transform:scale(0.94)} .monatskopf .mkz svg{width:19px; height:19px} .monatskopf{position:relative} .monatskopf button.mkz{border:0; padding:0; font:inherit; cursor:pointer} /* SCHNELLSPRUNG (19.09.2026): Das Kalendersymbol war bislang Zierde ohne Funktion. Christian: „Wir haben gesagt, das Kalendersymbol dient als Schnellsprungmoeglichkeit, um in einen der Monate in der Zukunft zu huepfen." Die Liste zeigt exakt dieselben Monate wie Vor-/Zurueck ($schluessel) — kein eigener Bereich, keine doppelte Wahrheit. */ .mksprung{position:absolute; top:100%; left:0; margin-top:6px; z-index:20; background:var(--flaeche); border:var(--karterand); border-radius:var(--karteradius); box-shadow:var(--karteschatten); padding:10px; min-width:190px} .mksprungtitel{margin:0 0 6px; padding:0 4px; font-size:12px; font-weight:600; color:var(--tinte3); text-transform:uppercase; letter-spacing:.02em} .mksprungliste{display:flex; flex-direction:column; max-height:280px; overflow-y:auto} .mksprungziel{display:block; padding:7px 10px; border-radius:8px; color:inherit; text-decoration:none; font-size:14.5px} .mksprungziel:hover{background:var(--flaeche2)} .mksprungziel.aktiv{background:var(--flaeche2); font-weight:600; color:var(--akzent)} .mksprungjahr{margin:10px 4px 2px; padding:0; font-size:12px; font-weight:600; color:var(--tinte3); text-transform:uppercase; letter-spacing:.02em} .mksprungjahr:first-child{margin-top:0} .mksprungjahrgruppe{display:contents} /* DIE RESERVIERTE BREITE IST GEMESSEN, NICHT GESCHAETZT (18.09.2026). Erster Versuch: 12,5ch. GEMESSEN am fertigen Bild: „September 2026" ist bei 19px 121 px breit, 1ch sind 9,08 px — es braucht also 13,4ch. Die Schrift lief 8 px in den rechten Pfeil. 15ch geben 136 px, also 15 px Luft; in `ch` statt in Pixeln, damit es der Schriftgroesse von selbst folgt (am Telefon 17,5px → 125 px). Der Waechter misst seit diesem Fehler auch, dass die Schrift in ihr Feld passt — die Messung fehlte, deshalb war das Bild schief und die Pfeile trotzdem „stabil". */ .monatskopf h2.mktitel{ margin:0; font-size:17px; font-weight:600; letter-spacing:-.02em; text-align:center; flex:0 0 auto; width:15ch; font-variant-numeric:tabular-nums; white-space:nowrap; } a.mblatt{ text-decoration:none; line-height:0; flex:0 0 auto; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; color:var(--akzent); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--akzent) 45%, transparent); transition:background .14s ease, color .14s ease, box-shadow .14s ease, transform .1s ease; } a.mblatt svg{width:19px; height:19px} a.mblatt.vor svg{transform:rotate(180deg)} a.mblatt:hover, a.mblatt:focus-visible{ background:var(--akzent); color:var(--aufakzent); box-shadow:none; } a.mblatt:active{transform:scale(.94)} /* Ein Rand ohne Weg: keine Kontur, kein Grün — er verspricht nichts. */ a.mblatt.aus{opacity:.3; pointer-events:none; color:var(--tinte3); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--linie) 80%, transparent)} /* Auf dem Telefon ist die Kopfzeile schmal: Der Name darf dort mitgehen, die Pfeile behalten ihre Trefferfläche. */ /* AM TELEFON STEHT DIE KAPSEL IMMER DA (sie hat dort kein „Ueberfahren"), also ist die Sperrzone dort ein Dauerzustand. GEMESSEN vom Waechter bei 390 px: zwischen Kapsel und rechtem Pfeil blieben 4 px — zu wenig, die Kapsel ist durchscheinend und verwischt, was darunter liegt. Die Kopfzeile ruecht deshalb nach unten, bis die Luft reicht. Der Name behaelt seine feste Breite: Er darf auch hier nicht springen, das war der ganze Auftrag. */ @media (max-width:400px){ .monatskopf{margin-top:12px} .monatskopf h2.mktitel{font-size:17px; width:15ch} .monatskopf .mkz{display:none} a.mblatt{width:38px; height:38px} } .kacheln{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--luft-raster); margin-bottom:var(--luft-block)} @media (min-width:561px){ .kacheln{grid-template-columns:repeat(4,1fr)} } .kachel{ background:var(--grund); border-radius:13px; padding:var(--luft-raster) 15px; display:flex; flex-direction:column; gap:2px; min-width:0; container-type:inline-size; } /* DIE ZAHL STEHT AUF EINER HÖHE (Christian 14.09.2026: „Die Bezeichnung ist zweizeilig, und schon springt die Zahl. Das darf nicht passieren — die Zahlen müssen auf der gleichen Ebene sein."). Erste Fassung: Subgrid je Reihe. GEMESSEN danach in Chrome 141 (Christian, 19:56: „Die Zahl geht jetzt über den Titel drüber"): im Subgrid meldete der Titel nur seine Mindesthöhe (13,8 px), die zweite Zeile lief unter die Zahl — ein Fehler des Browsers bei Subgrid-Zeilen mit min-height. Deshalb gilt die Regel jetzt über die Spaltenzahl (Handbuch „Die Zahl bricht nie um"): Kacheln sind Flex-Spalten, und die Breite jeder Reihe ist so gewählt, dass der längste Titel in EINER Zeile steht — Wächter pruef/skalen.js misst jede Kachel bei 390…1800 px: Titel eine Zeile, Zahl nicht umgebrochen. */ /* Gemessen: die Beschriftung war schon vor den Zeichen zu breit — bei 1180 px wurden ALLE VIER abgeschnitten, ohne dass es jemandem auffiel. Also darf sie umbrechen, statt still abzuschneiden, und das Zeichen bleibt dabei in der ersten Zeile stehen. */ .kachel .kt{min-height:1.2em; flex-wrap:wrap; align-items:flex-start; line-height:1.25} .kachel.stark{background:var(--flaeche2)} .kachel .kt{font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--tinte3)} .kachel .kz{font-size:17px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.02em; white-space:nowrap} .kachel .kz.plus{color:var(--gut)} .kachel .kz.minus{color:var(--bad)} .kachel .kf{font-size:12px; color:var(--tinte3); line-height:1.35} /* DIE LETZTE ZEILE EINER KACHEL HAT IMMER ZWEI ZEILEN PLATZ (zz483, Gesetze 3/40/59). Chris: „Wenn ich zwischen September und Oktober hin und her schalte … springt das eine Modul, weil halt da mehr Text … drin ist.“ GEMESSEN (Ines' Girokonto, 1440 px): „Tiefster Punkt … — das Zyklusende selbst“ brach im September und November auf zwei Zeilen um, im Oktober nicht – die Kachelreihe wechselte zwischen 125 und 109 px, alles darunter sprang um 16 px. Jetzt ist der Platz immer da. */ .kachel .kf:last-child{min-height:calc(2em * 1.35)} /* Auf schmalen Kacheln (iPhone, zwei je Reihe) brauchte dieselbe Zeile drei Zeilen – gemessen 141 statt 125 px. */ @container (max-width:200px){ .kachel .kf{min-height:calc(2em * 1.35)} .kachel .kf:last-child{min-height:calc(3em * 1.35)} } /* zz485: Am iPhone (zwei Kacheln je Reihe, 156 px) war auch die vorletzte Zeile mal ein-, mal zweizeilig – gemessen 157 gegen 141 px. */ p.nlsumme small.nlstand{display:block; font-size:12px; color:var(--tinte3); margin-top:2px} /* Der Monat im Modultitel steht auf dem Telefon immer in seiner eigenen Zeile – „September“ brach um, „Oktober“ nicht (zz483). */ @media (max-width:560px){ h2.modultitel .mtmonat{display:block; font-size:14.5px; font-weight:500; color:var(--tinte2)} h2.modultitel .mtpunkt{display:none} } /* Die Kachel richtet sich nach IHRER Breite, nicht nach der des Fensters: auf dem Laptop ist die mittlere Spalte schmal, obwohl das Fenster breit ist. Gemessen wurden dort 69 px Innenbreite fuer „MONATSENDE" — das passte nicht und wurde still abgeschnitten. */ /* Die Zahl bricht nie um (14.09.2026): je schmaler die Kachel, desto enger die Beschriftung — gemessen an „ERGEBNIS NACH PLAN" (18 Zeichen): 11 px/.01em passen ab 154 px, 10.5 px/0 ab 139 px. */ @container (max-width: 240px){ .kachel .kt{font-size:12px; letter-spacing:.01em} } @container (max-width: 160px){ .kachel .kt{font-size:12px; letter-spacing:0; text-transform:none} .kachel .kt > .ikon{display:none} } @container (max-width: 112px){ /* Die Kachel selbst laesst sich von hier aus nicht anfassen — ein Container kann sich nicht nach sich selbst richten. Nur die Kinder. */ .kachel .kt{font-size:12px; letter-spacing:0; text-transform:none} .kachel .kt .ikon{width:12.5px; height:12.5px} .kachel .kz{font-size:15px} } /* DER AUFKLAPPER IN DER KACHEL FAELLT HERAUS. GEMESSEN am 12.09.2026 bei 1180 px Fenster: eine Kachel ist 69 px breit innen — darin wird jede Erklaerung zu einer Buchstabensaeule. Also legt sie sich als Blatt unter die ganze Reihe, rechtsbuendig unter die Kachel, zu der sie gehoert; GEMESSEN 380 px breit ab 834 px Fenster und 328 px bei 390 px. Die Reihe ist der Bezugspunkt, nicht die Kachel; deshalb steht `position:relative` an `.kacheln`. */ .kacheln{position:relative} .kachel details.info > p{ position:absolute; right:0; top:calc(100% + 9px); z-index:3; width:min(380px, 100%); max-width:none; background:var(--flaeche); box-shadow:0 8px 24px rgba(15,30,31,.12); } /* DAS ZEICHEN SELBST DARF DIE KACHEL NICHT HOEHER MACHEN. Christian am 12.09.2026: „Hier zerstoert der Info Button das Layout. Das muss dir doch auffallen." Er hatte recht, und es war der Rest desselben Platzproblems: Die Beschriftungszeile `.kt` darf umbrechen (sonst wird „MONATSENDE" still abgeschnitten) — und dann bricht das Zeichen als letztes Flex-Teil auf eine EIGENE Zeile. GEMESSEN bei 1180 px: 69 px Innenbreite, „MONATSENDE" allein braucht sie ganz. Die Kachel wurde dadurch eine Zeile hoeher als ihre drei Nachbarn, und die Zahl rutschte nach unten. Loesung: Das Zeichen steht nicht mehr IN der Zeile, sondern in der oberen rechten Ecke der Kachel. Es hat dort immer dieselbe Stelle, egal wie lang die Beschriftung ist, und kann die Hoehe nicht mehr anfassen. Die Beschriftung bekommt rechts so viel Platz frei, dass sie nicht unter das Zeichen laeuft. */ .kachel{position:relative} .kachel .kt > details.info{ position:absolute; top:9px; right:9px; margin:0; z-index:2; } .kachel:has(.kt > details.info) .kt{padding-right:20px} /* `p.umbuchung` ist am 12.09.2026 ersatzlos entfallen — der Satz steht jetzt im Aufklapper der Kachel „Monatsende". */ p.hinweis{ margin:12px 0 14px; font-size:12px; line-height:1.5; color:var(--tinte3); background:var(--grund); border-radius:11px; padding:9px 12px; } /* BUCHUNGEN ODER GRUPPEN — der Umschalter und die Buchungsliste. Christian am 12.09.2026: „Ich brauche in der Monatsdarstellung die Gegenueberstellung der konkreten Buchungen." Der Umschalter traegt dieselbe Machart wie der Zeitfenster-Umschalter in der Zeitreise (.zrfenster): eine Pille mit gefuelltem aktiven Feld. Dieselbe Handlung sieht ueberall gleich aus. */ nav.ggsicht{ display:inline-flex; gap:3px; padding:3px; margin:0 0 12px; background:var(--flaeche2); border-radius:var(--wahlleiste); } nav.ggsicht a{ font-size:13px; font-weight:500; text-decoration:none; padding:6px 14px; border-radius:var(--wahl); color:var(--tinte2); white-space:nowrap; transition:background .16s ease, color .16s ease; } nav.ggsicht a:hover{color:var(--tinte)} /* WAS WIEDERKEHRT, SAGT EIN WORT (29.09.2026): Filterpille neben dem Blattwechsler, Wort an der Zeile. */ /* DIE STEUERLEISTE HAT RAND (04.10.2026). Chris: „Jetzt klebt das Icon direkt außen am Rand. Das hält keinen Sicherheitsabstand." Gemessen klebten auch die Schalter links fast an der Karte. Jetzt links bündig mit der Inhaltskante der Spalten (Rand des Rasters, 18 px), rechts bündig mit der Zahlenkante der Summen: Rand des Rasters 18 + Innenrand der Kopfzeile 2 + Kreuzspalte 26 + Spalt 8. */ /* MITTIG ZWISCHEN KOPFLINIE UND SPALTENKÖPFEN (04.10.2026). Chris: „zu weit oben an der Linie … so mittig vielleicht zwischen oben und unten." Gemessen bei 1440 px: über der Leiste 8 px bis zur Linie des Modulkopfs, darunter 34 px bis zur Schrift von „Was hereinkommt". Jetzt oben 22 px Abstand zur Linie (nachgemessen), der eigene Rand unten weg: unten 22 px (Rasterrand 14 + Kopfzeile 8). */ .ggsichten{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin:22px 0 0; padding:0 calc(18px + 2px + 26px + 8px) 0 18px} .ggsichten .ggneu{margin-left:auto; display:inline-flex; gap:8px} /* AUF DEM TELEFON LINKSBÜNDIG (04.10.2026). Chris: „im Smartphone … stehen diese Icons nicht gut … nicht rechts irgendwo in den luftleeren Raum, sondern das muss dann links ordentlich sein … das musst du dir merken." Regel (Gesetz 52, Zusatz): Bricht eine Steuerleiste auf dem Telefon in mehrere Zeilen, steht jede Zeile — auch die Handlungszeichen — an der linken Inhaltskante. */ @media (max-width:560px){ /* Plus und Minus gehören zu „Was hereinkommt / Was hinausgeht", nicht zu den Ansichtsschaltern (Chris, 04.10.2026: „die müssen eher nach unten rutschen … dahin gehören sie ja auch"): oben 28 px Luft zu den Schaltern, unten 22 px bis „Was hereinkommt". */ .ggsichten{padding-right:18px; margin-bottom:0} .ggsichten .ggneu{margin-left:0; flex-basis:100%; margin-top:20px} } html body .ggneu .zeichenknopf{position:relative} /* Plus für Einnahmen, Minus für Ausgaben — in den Farben der Beträge (04.10.2026). */ html body .ggsichten .ggneu .zeichenknopf.ggneuein{color:var(--gut) !important} /* gegen die Grundfarbe der Zeichenknöpfe (dort !important) */ html body .ggsichten .ggneu .zeichenknopf.ggneuaus{color:var(--bad) !important} html body .ggneu .zeichenknopf svg{stroke-width:2.2} .ggsichten > nav.ggsicht{margin:0} nav.ggsicht.burhy button{ font:inherit; font-size:13px; font-weight:500; padding:6px 14px; border-radius:var(--wahl); color:var(--tinte2); background:transparent; border:0; cursor:pointer; white-space:nowrap; --knopf-min:0; --knopf-max:none; --knopf-breit:auto; min-width:0; max-width:none; min-height:0; box-shadow:none; transition:background .16s ease, color .16s ease; } nav.ggsicht.burhy button:hover{color:var(--tinte)} nav.ggsicht.burhy button.an{background:var(--akzent); color:var(--aufakzent)} nav.ggsicht.burhy[hidden]{display:none} li.bu .buwiederkehr{flex:0 0 auto; min-width:0; width:auto; text-align:left; padding:0; font-family:var(--schrift); font-size:12px; color:var(--tinte3); white-space:nowrap; cursor:default} /* Hat der Name mit dem Wort keinen Platz (gemessen bei 375 px: „Jahresbeitrag Sportverein jährlich“ 232 px in 159 px), bricht das Wort unter den Namen — nichts wird abgeschnitten. */ li.bu.wiederkehrend .bufeld{flex-wrap:wrap; row-gap:0; justify-content:flex-start} li.bu.wiederkehrend .bufeld > .butext{flex:0 1 auto; max-width:100%} /* der Name so breit wie er ist; passt das Wort nicht daneben, rueckt es darunter */ .ggblatt[data-rhy="wiederkehrend"] li.bu.einmalig, .ggblatt[data-rhy="einmalig"] li.bu.wiederkehrend{display:none} .ggblatt[data-rhy] ol.buliste:not(:has(li.bu:not([style*="display: none"]))) li.leer{display:block} /* nav.ggsicht a.an: Farbe und Form kommen aus der Sammelregel „Gattung A" (16.09.2026) */ /* DER WECHSLER — beide Blaetter liegen in der Seite, eines ist versteckt. Die Hoehe faehrt beim Umschalten weich auf das neue Mass (das Skript in der Schale setzt sie), damit nichts aufblitzt und nichts springt. Christian am 12.09.2026: „dann springt das foermlich hin und her. Das ist also nicht sehr elegant." */ .ggwechsler{position:relative; will-change:height} .ggblatt[hidden]{display:none} ol.buliste{list-style:none; margin:0; padding:0; display:grid; gap:1px} ol.buliste li.leer{ padding:12px 2px; font-size:13px; color:var(--tinte3); } /* Die Zeile ist ein Raster, kein Fliesstext: Tag und Betrag stehen damit in JEDER Zeile an derselben Stelle, und man liest die Spalte hinunter statt jede Zeile einzeln. Gemessen: der breiteste Tag („30.") braucht 30 px, der breiteste Betrag („+4.417,80 EUR") 104 px. */ ol.buliste li.bu{ display:grid; grid-template-columns:32px 9px 1fr auto; align-items:baseline; gap:8px; padding:7px 2px; border-bottom:1px solid var(--linie); font-size:13px; line-height:1.4; } ol.buliste li.bu:last-child{border-bottom:0} .butag{font-size:12px; color:var(--tinte3); font-variant-numeric:tabular-nums; text-align:left} /* Der Punkt traegt die Gruppenfarbe aus .f0 ... .f11 — hier steht deshalb KEIN background. Genau das war der Fehler in der ersten Fassung: `background:var(--tinte3)` ueberschrieb die Farbklasse, und alle Punkte waren grau. */ .bupunkt{width:8px; height:8px; border-radius:50%; align-self:center} /* Der Punkt als Knopf (Zuordnung an Ort und Stelle): gleiche 8 px, aber mit Fanggebiet und Ring beim Ueberfahren — sonst trifft ihn niemand. */ li.bu button.bupunkt.zutun, button.bupunkt{ --knopf-min:0; --knopf-max:none; --knopf-breit:8px; width:8px; height:8px; padding:0; border:0; border-radius:50%; cursor:pointer; background-clip:padding-box; box-shadow:0 0 0 6px transparent; transition:box-shadow .14s ease, transform .14s ease; position:relative; } li.bu button.bupunkt.zutun:hover, li.bu button.bupunkt.zutun:focus-visible{box-shadow:0 0 0 4px var(--flaeche2); transform:scale(1.25); outline:none} .butext{min-width:0; overflow-wrap:anywhere; color:var(--tinte)} .butext em{ font-style:normal; font-size:12px; color:var(--tinte3); border:1px solid var(--linie); border-radius:5px; padding:1px 5px; margin-left:5px; white-space:nowrap; } .butext em.warn{color:var(--bad); border-color:var(--bad)} .buwert{ font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; } .ggseite.ein .buwert{color:var(--gut)} .ggseite.aus .buwert{color:var(--tinte)} @media (max-width:560px){ ol.buliste li.bu{grid-template-columns:var(--butag) 8px 1fr; gap:6px} .buwert{grid-column:3; justify-self:end} } svg.linie{display:block; width:100%; height:150px; margin:0} svg.linie polyline{fill:none; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke} svg.linie .fest{stroke:var(--akzent); stroke-width:2.2} svg.linie .lose{stroke:var(--akzent); stroke-width:2; stroke-dasharray:2.5 3.5; opacity:.6} /* GESETZ 28: Was unter der Nulllinie liegt, ist rot — in JEDEM Bild. */ svg.linie .unternull{stroke:var(--bad)} svg.linie .fl-plus{fill:var(--akzent); opacity:.07} svg.linie .fl-minus{fill:var(--bad); opacity:.10} svg.linie .null{stroke:var(--tinte3); stroke-width:1; opacity:.45; vector-effect:non-scaling-stroke} svg.linie .heute{stroke:var(--tinte3); stroke-width:1; stroke-dasharray:2 3; opacity:.5; vector-effect:non-scaling-stroke} svg.linie .punkt{fill:var(--akzent)} svg.linie .tief{fill:var(--bad)} p.achse{display:flex; justify-content:space-between; margin:4px 2px 0; font-size:12px; color:var(--tinte3)} /* ---- Rechts: die Tage ---- */ .rechts{min-width:0} h2.abschnitt{ margin:0 0 10px; font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--tinte3); } ol.tage{list-style:none; margin:0; padding:0} ol.tage li{ background:var(--flaeche); border:1px solid var(--linie); border-radius:15px; padding:12px 15px; margin-bottom:8px; } ol.tage li.jetzt{border-color:var(--akzent); box-shadow:0 0 0 1px var(--akzent)} /* VERGANGEN UND KOMMEND. Der Unterschied wird ueber die FLAECHE gemacht, nicht ueber die Schrift: Vergangenes bekommt den ruhigen Grund und eine blassere Kante, Kommendes bleibt weiss und klar. Die Zahlen bleiben in beiden Faellen voll lesbar — wer Vergangenes ausblasst, nimmt der Liste ihren Beleg. Gemessen: Kontrast der Betraege bleibt ueber 7:1, auch im ausgegrauten Zustand. */ ol.tage li.vorbei{ background:color-mix(in srgb, var(--flaeche2) 55%, var(--flaeche)); border-color:color-mix(in srgb, var(--linie) 55%, transparent); } ol.tage li.vorbei .datum{color:var(--tinte3)} ol.tage li.vorbei .was{color:var(--tinte2)} ol.tage li.kommt{background:var(--flaeche)} li.leerkarte{color:var(--tinte3); font-size:14.5px} .zeile{display:flex; align-items:baseline; justify-content:space-between; gap:12px} .zeile .datum{font-size:14.5px; color:var(--tinte2); font-weight:500; white-space:nowrap} .zeile .datum em{ font-style:normal; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--akzent); margin-left:6px; } .zeile .stand{font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.015em; white-space:nowrap} .zeile .stand.minus{color:var(--bad)} p.leer{margin:5px 0 0; font-size:14.5px; color:var(--tinte3)} .posten{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-top:8px; padding-top:8px; border-top:1px solid var(--flaeche2); font-size:14.5px; } .posten .was{color:var(--tinte); min-width:0; line-height:1.35} .posten .was b{ display:block; font-weight:400; font-size:12px; letter-spacing:.05em; text-transform:uppercase; margin-top:3px; color:var(--tinte3); } .posten.erwartet .was{color:var(--tinte2)} .posten.spaet .was b{color:var(--bad)} .posten.umb .was{color:var(--tinte3)} .posten .betrag{font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:500} .posten .betrag.plus{color:var(--gut)} .posten.erwartet .betrag{color:var(--tinte2)} details.rueckblick{margin-top:14px} details.rueckblick summary, details.jahrtabelle summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:13px 15px; background:var(--flaeche); border:1px solid var(--linie); border-radius:15px; font-size:14.5px; color:var(--tinte2); font-weight:500; } summary::-webkit-details-marker{display:none} .pfeil{color:var(--tinte3); transition:transform .18s ease; font-size:17px} details[open] .pfeil{transform:rotate(90deg)} details[open] summary:not(.mehrknopf){margin-bottom:8px} /* RUHE BEIM AUFKLAPPEN (zz474, Gesetze 3/40/59). Chris: „wenn ich im Steuerbereich auf Archiv klicke … springt die gesamte Konstruktion eins nach unten.“ GEMESSEN bei 393/820/1440 px: details.starchiv 54 → 62 px, alles darunter +8 px – die 8 px Abstand der Zeile darüber. Ein Klappkasten, dessen Inhalt SCHWEBT (position:absolute), bekommt keinen Abstand unter dem Titel: Archiv der Steuerjahre und der Aufklapper in der Kachel. */ details.starchiv[open] > summary, .kachel details.info[open] > summary{margin-bottom:0} /* zz476: steht man in einem archivierten Jahr, trägt der Archiv-Knopf das Jahr und die Farbe der aktiven Jahrespille */ details.starchiv summary.aktiv{background:var(--flaeche); color:var(--tinte); font-weight:600; box-shadow:0 1px 2px rgba(15,30,31,.09)} /* ---- Jahrestabelle ---- */ /* Die Jahrestabelle steht offen. Sie ist keine Fussnote, sondern die Uebersicht — und ihr eigener Umschalter erlaubt den Vergleich, ohne die ganze Seite umzustellen. */ section.jahrtabelle{margin-top:28px; scroll-margin-top:16px} .tabkopf{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:12px; } .tabkopf h2{margin:0; font-size:17px; letter-spacing:-.01em} .tabwahl{display:flex; gap:2px; background:var(--flaeche2); padding:3px} .tabwahl a{ padding:7px 14px; font-size:13px; color:var(--tinte2); text-decoration:none; white-space:nowrap; font-weight:500; } /* .tabwahl a.aktiv: siehe Gattung A */ table.vergleich th.grp, table.tabruhe th.grp{ text-align:center; border-bottom:1px solid var(--linie); color:var(--tinte); font-size:12px; letter-spacing:.02em; text-transform:none; } table.vergleich th.grp + th.grp{border-left:1px solid var(--linie)} table.vergleich th.klein, table.tabruhe th.klein{font-size:12px; padding-top:6px; padding-bottom:8px} table.vergleich td:nth-child(2n){border-left:1px solid var(--flaeche2)} p.tabfuss{margin:10px 2px 0; font-size:12px; line-height:1.5; color:var(--tinte3)} .tabellenrahmen{ overflow-x:auto; background:var(--flaeche); border:1px solid var(--linie); border-radius:15px; } table{border-collapse:collapse; width:100%; font-size:14.5px} th, td{padding:10px 14px; text-align:left; border-bottom:1px solid var(--flaeche2)} /* EINGEGRENZT (29.09.2026, Befund 20): min-width 640 px und nowrap galten fuer JEDE Tabelle der Anwendung — fuenf Tabellen mussten das einzeln aufheben, zwei weitere (vtplantab, bmwarte) rollten deshalb seitlich. Beides gehoert nur den Uebersichtstabellen im .tabellenrahmen, die dafuer gebaut sind. */ .tabellenrahmen table{min-width:640px} .tabellenrahmen th, .tabellenrahmen td{white-space:nowrap} th{font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--tinte3); font-weight:600} tbody tr:last-child td{border-bottom:0} tbody tr.aktiv{background:var(--flaeche2)} td.z, th.z{text-align:right; font-variant-numeric:tabular-nums} td.plus{color:var(--gut)} td.minus{color:var(--bad)} td.stand{font-weight:600} /* Das Datum neben dem Betrag braucht Luft — gemessen 0,0 px (20.09.2026). */ td.gr{color:var(--tinte3); font-size:13px; white-space:normal} .gr{margin-left:7px} /* ---- „ALLE ZWÖLF MONATE": Die Spalte „Grundlage" ist seit 03.10.2026 weg (Chris: Grundrauschen) — mit ihr die leise Zeile unter dem Monat und ihre Regeln. Der Satz darunter läuft über die ganze Breite des Rahmens, mit Luft zur Tabelle und eigener Trennlinie, ohne Zeichen davor. */ .tabellenrahmen p.tabfuersich{margin:0; padding:16px 14px 16px; border-top:1px solid var(--flaeche2); font-size:13px; line-height:1.55; color:var(--tinte3); max-width:none; white-space:normal} table a{color:inherit; text-decoration:none; font-weight:500} table a:hover{text-decoration:underline} p.quelle{margin:22px 0 0; text-align:center; font-size:12px; line-height:1.6; color:var(--tinte3)} p.leermeldung{padding:40px 0; text-align:center; color:var(--tinte3)} @media (max-width:560px){ .kopf{gap:10px} .umschalter{order:3; width:100%; } .umschalter a{flex:1} .jahr{padding:14px 12px 6px; border-radius:16px} svg.fluss{height:110px} .monatswahl .ms{font-size:12px} .lage{padding:18px 16px 16px} .meinstand{padding:18px 16px 16px} .mitte{padding:14px 14px 12px} } /* DUNKEL WIRD GESCHALTET, NICHT GEERBT (20.09.2026). Christian: „ich möchte trotzdem diese Webseite schalten können, die ich gerade will ... und dass ich das nicht an der Betriebssystemeinstellung orientiere." Statt einer Media-Query steht hier ein Attribut auf <html>. Wer „wie das Gerät" waehlt, bekommt es von einem winzigen Skript gesetzt, BEVOR dieses Stylesheet greift — deshalb blitzt nichts auf. Eine Quelle, drei Zustaende. */ :root[data-hell="dunkel"]{ --grundrein:#181614; --flaeche:#211F1C; --flaeche2:#2C2926; --markiert:#34322E; --karterand:1px solid rgba(255,255,255,.07); --karteschatten:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -28px rgba(0,0,0,.8); --material:rgba(22,22,24,.66); --materialrand:rgba(255,255,255,.08); --aufakzent:#14110E; /* dunkel: die farbigen Flaechen sind hell — die Schrift darauf ist dunkel */ /* Dunkel ist es umgekehrt: Die Personenfarben sind HELLER als der Grund, und die Flaeche liegt UEBER dem Grund — wer dorthin mischte, drehte die Tiefe um. Also in den Grund selbst, und schwaecher. */ --grundmisch:var(--grundrein); --ptonstark:5%; --tinte:#F3F0EB; --tinte2:#ACA79F; --tinte3:#9B968E; /* gemessen 5,59 : 1 auf der Flaeche, 4,92 : 1 auf der Kachel (vorher 3,81) */ --linie:#332F2B; --akzent:var(--pines); --bad:#F0705E; --gut:var(--akzent); /* dunkel: derselbe Weg wie hell — der Haken folgt jetzt demselben Gruen wie jeder Knopf, statt einer eigenen Stufe (#5FCB9C) daneben zu stehen. Gemessen 22.09.2026, Christian: „das beißt sich". */ --gut-tinte:#A9C877; /* dunkel: dieselbe Grünstufe wie der Akzent — auf der Fläche 8,1 : 1 */ --warte:#E6B65C; --wartetinte:#E6B65C; /* dunkel ist der Bernstein hell genug fuer Schrift (8,78 : 1) */ --pchris:#7FA8DE; --pines:#A9C877; --puna:#D6A46A; --palle:#B69CE6; --f0:#B47484; --f1:#F0B492; --f2:#B07A5A; --f3:#888A52; --f4:#B9C6A3; --f5:#4C9476; --f6:#70D1C8; --f7:#6A8B9A; --f8:#76CBF2; --f9:#8FA2C9; --f10:#977BAE; --f11:#E2B5C6; } /* Die dunkle Palette ist durchweg hell — dort traegt jede Zahl die dunkle Tinte, ohne Ausnahme. */ :root[data-hell="dunkel"] svg.kreis .stueck .kzahl{fill:var(--ringdunkel)} :root[data-hell="dunkel"] svg.linie .fl-plus{opacity:.12} :root[data-hell="dunkel"] svg.linie .fl-minus{opacity:.16} /* ---------- Plan gegen Wirklichkeit ---------------------------------- * * Alles, was Geld wegnimmt, bleibt rot. Drei Abstufungen statt drei * Farben: kraeftig der Plan, halb Deine eigenen Posten, blass der Rest, * den bisher niemand benannt hat. Eine vierte Farbe wuerde nur behaupten, * es handle sich um etwas anderes als Ausgaben. */ .legende .mk.sonder{background:var(--bad); opacity:.5} .legende .mk.rest{background:var(--bad); opacity:.24} svg.fluss .b-sonder{fill:var(--bad); opacity:.5} svg.fluss .b-rest{fill:var(--bad); opacity:.22} /* ================================================================== * * DIE RECHENKETTE unter der Jahresgrafik * * Sie ist an die Stelle der Fusszeile „… statt … nach reinem Plan" * getreten (Christian: „Das ist doch Firlefanz an der Stelle. Lasst es * weg."). Die alte Zeile nannte einen Abstand, ohne zu sagen, woher er * kommt. Die Kette zeigt jeden Schritt einzeln — und beantwortet damit * genau die Frage, an der Christian sich gestossen hat: Warum steht in * der Gegenueberstellung „+2.615,15" und unter dem Monat „69 €"? * * Die Werte fluchten auf EINER Kante (Handbuch), die Zwischenergebnisse * stehen kraeftiger und tragen eine Linie darueber — so liest man die * Kette ohne Anleitung von oben nach unten. * ================================================================== */ .kette{margin:16px 0 0; padding:14px 16px 13px; border-radius:12px; background:var(--flaeche2)} /* ---------- Erklärung auf Abruf ⓘ ------------------------------------ * * Ein kleines Zeichen hinter der Überschrift. Zugeklappt nimmt es die * Breite eines Buchstabens ein, aufgeklappt steht die Herleitung da, wo * sie hingehört: unter dem, was sie erklärt. Gebaut aus <details> — * ohne Skript, mit der Tastatur bedienbar, und der Browser findet den * Text auch im zugeklappten Zustand. * ACHTUNG: Der Pfeil des Browsers wird ENTFERNT (list-style:none plus * ::-webkit-details-marker) — sonst stehen zwei Zeichen nebeneinander. */ details.info{display:inline; margin-left:6px} details.info > summary{ display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; vertical-align:-3px; cursor:pointer; color:var(--tinte3); border-radius:50%; list-style:none; transition:color .14s ease, background .14s ease; } details.info > summary::-webkit-details-marker{display:none} details.info > summary::marker{content:''} details.info > summary svg{width:15px; height:15px; display:block} details.info > summary:hover{color:var(--akzent)} details.info[open] > summary{color:var(--akzent)} details.info > summary:focus-visible{outline:2px solid var(--akzent); outline-offset:2px} details.info > p{ display:block; margin:8px 0 0; padding:10px 13px; border-radius:10px; background:var(--flaeche2); border:1px solid var(--linie); font-size:12px; line-height:1.6; font-weight:400; letter-spacing:0; color:var(--tinte2); text-transform:none; max-width:62ch; } details.info > p strong{color:var(--tinte); font-weight:600; font-variant-numeric:tabular-nums} /* Die Rechenbruecke: vom Plan zu dem, womit ich wirklich rechne */ section.bruecke{ margin:18px 0 6px; padding:14px 16px; border:1px solid var(--linie); border-radius:12px; background:var(--flaeche2); } section.bruecke h3{ margin:0 0 10px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinte3); font-weight:600; } section.bruecke dl{margin:0; display:grid; gap:7px} section.bruecke dl > div{display:flex; justify-content:space-between; align-items:baseline; gap:12px} section.bruecke dt{color:var(--tinte2); font-size:13px; display:flex; flex-direction:column} section.bruecke dt span{font-size:12px; color:var(--tinte3)} section.bruecke dd{margin:0; font-variant-numeric:tabular-nums; font-weight:500; white-space:nowrap} section.bruecke dd.plus{color:var(--gut)} section.bruecke dd.minus{color:var(--bad)} section.bruecke .summe{ border-top:1px solid var(--linie); padding-top:8px; margin-top:2px; } section.bruecke .summe dt{color:var(--tinte); font-weight:600} section.bruecke .summe dd{font-size:17px; font-weight:600} section.bruecke p.woher{ margin:11px 0 0; font-size:12px; line-height:1.5; color:var(--tinte3); } /* ---------- Sonderausgaben und Abos ---------------------------------- */ section.sonder{ margin:28px 0 0; padding:20px clamp(16px,2.4vw,24px); border:1px solid var(--linie); border-radius:16px; background:var(--flaeche); scroll-margin-top:16px; } p.meldung{ margin:12px 0 0; padding:10px 13px; border-radius:10px; font-size:13px; line-height:1.45; border:1px solid transparent; } p.meldung.gut{background:color-mix(in srgb, var(--gut) 12%, transparent); border-color:color-mix(in srgb, var(--gut) 34%, transparent); color:var(--gut)} p.meldung.schlecht{background:color-mix(in srgb, var(--bad) 12%, transparent); border-color:color-mix(in srgb, var(--bad) 34%, transparent); color:var(--bad)} .sonderform{display:grid; grid-template-columns:1fr 1fr; gap:13px; align-content:start} .sonderform .feld.breit{grid-column:1 / -1} /* ================================================================== * DAS BAUTEIL „FELD" — GLOBAL, nicht mehr nur im Sonderposten-Formular * (20.09.2026) * * Christian: „Die Dropdowns sind nicht CI-konform … da kleben die * Dropdowns direkt am Text. Dann heisst es ‚Vonleer lassen', das ist kein * Deutsch … Die Schriftgroessen sind auch nicht CI-konform. Du musst Dich * an das Corporate Design halten, wenn Du sowas baust. Das ist jetzt wieder * ganz anders von der Anmutung als die anderen Seiten. Und das darf nicht * sein. Diese Seiten muessen doch einheitlich gebaut sein." * * ER HAT RECHT, und die Ursache war banal: Diese Regeln standen unter * `.sonderform` — die Urlaubsseite benutzt dieselbe Schreibweise * (label.feld mit span und b), lag aber ausserhalb. Also blieb jedes Feld * unformatiert: Beschriftung und Feld in einer Zeile ohne Abstand * („Vonleer lassen"), Systemschrift statt CI, Systempfeil im Auswahlfeld. * Ein Bauteil gehoert nicht in einen Bereich, sondern ins Stylesheet. * Der Bereich bestimmt nur noch das Raster. * ================================================================== */ label.feld{display:flex; flex-direction:column; gap:5px; min-width:0} .feld > span{font-size:12px; color:var(--tinte2); display:flex; flex-direction:column; gap:1px} .feld > span b{font-weight:400; font-size:12px; color:var(--tinte3); line-height:1.35} /* EINE HOEHE FUER ALLE FELDER — 46 Punkte, ohne Ausnahme. GEMESSEN am 12.09.2026 in der laufenden Anwendung: Textfeld 47, Datumsfeld 49, Auswahlfeld 44 Punkte hoch. Drei Hoehen in einer Zeile, und weil die Beschriftungen oben stehen und der Rest der Zeile unten ausgerichtet wird, stand „Konto" siebzehn Punkte tiefer als „Betrag". Christian dazu: „dann schaut ihr bitte mal den Versatz hier an in dem Formular. Das sieht nicht gut aus." Der Grund war nicht die Ausrichtung, sondern die ungleiche Hoehe: Ein Browser baut Text-, Datums- und Auswahlfeld jeweils aus eigenem Antrieb unterschiedlich hoch. Deshalb wird die Hoehe hier FESTGESETZT und die Innenabstaende oben und unten entfallen — ein einzeiliges Feld setzt seinen Inhalt von selbst mittig. Wer diese Zeile aendert, aendert den Versatz wieder herbei. */ .sonderform input[type=text], .sonderform input[type=date], .sonderform select, .feld input[type=text], .feld input[type=date], .feld input[type=month], .feld input[type=number], .feld input[type=time], .feld select{ box-sizing:border-box; width:100%; height:46px; padding:0 12px; font:inherit; font-size:15px; line-height:normal; color:var(--tinte); background:var(--flaeche); border:1px solid var(--linie); border-radius:10px; min-width:0; } .feld textarea{ box-sizing:border-box; width:100%; min-height:46px; padding:11px 12px; font:inherit; font-size:15px; line-height:1.5; color:var(--tinte); background:var(--flaeche); border:1px solid var(--linie); border-radius:10px; min-width:0; resize:vertical; } /* Das Auswahlfeld bekommt denselben Winkel wie ueberall sonst statt des Pfeils, den jedes Betriebssystem anders zeichnet — sonst traegt genau ein Feld im Formular eine fremde Handschrift. */ .sonderform select, .feld select{ appearance:none; -webkit-appearance:none; padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20width%3D'11'%20height%3D'7'%20viewBox%3D'0%200%2011%207'%20fill%3D'none'%20stroke%3D'%234C6062'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M1%201.3%205.5%205.7%2010%201.3'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; background-size:11px 7px; } /* DUNKEL WIRD GESCHALTET, NICHT GEERBT (20.09.2026). Christian: „ich möchte trotzdem diese Webseite schalten können, die ich gerade will ... und dass ich das nicht an der Betriebssystemeinstellung orientiere." Statt einer Media-Query steht hier ein Attribut auf <html>. Wer „wie das Gerät" waehlt, bekommt es von einem winzigen Skript gesetzt, BEVOR dieses Stylesheet greift — deshalb blitzt nichts auf. Eine Quelle, drei Zustaende. */ :root[data-hell="dunkel"] .sonderform select, :root[data-hell="dunkel"] .feld select{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20width%3D'11'%20height%3D'7'%20viewBox%3D'0%200%2011%207'%20fill%3D'none'%20stroke%3D'%23A2B3B4'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M1%201.3%205.5%205.7%2010%201.3'/%3E%3C/svg%3E")} .sonderform input:focus, .sonderform select:focus, .feld input:focus, .feld select:focus, .feld textarea:focus{ outline:2px solid var(--akzent); outline-offset:-1px; border-color:var(--akzent); } .sonderform fieldset.wahl{ border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; } .sonderform fieldset.wahl legend{ padding:0; font-size:12px; color:var(--tinte2); margin-bottom:5px; float:left; width:100%; } .sonderform fieldset.wahl label{ display:inline-flex; align-items:center; gap:7px; padding:9px 13px; border:1px solid var(--linie); border-radius:999px; font-size:14.5px; cursor:pointer; background:var(--flaeche); } .sonderform fieldset.wahl input{accent-color:var(--akzent); width:16px; height:16px; margin:0} .sonderform fieldset.wahl label:has(input:checked){border-color:var(--akzent); background:var(--flaeche2)} .sonderform .tun{margin-top:4px} .sonderform button{ width:100%; border:0; border-radius:12px; font:inherit; font-size:15px; font-weight:600; padding:14px 22px; background:var(--akzent); color:var(--aufakzent); cursor:pointer; } /* Kein Kursiv mehr (16.09.2026, Christian: „Ich mag kursiv nicht haben“) — der Hinweis trägt die gedämpfte Tinte statt eines anderen Schriftschnitts. */ button.weg{ border:0; background:transparent; font:inherit; font-size:13px; color:var(--tinte3); cursor:pointer; padding:4px 2px; text-decoration:underline; text-underline-offset:2px; white-space:nowrap; } button.weg:hover{color:var(--bad)} /* Eigene Posten in der Tagesliste */ .posten.eigen .was{color:var(--tinte)} .posten.eigen .was b{color:var(--akzent)} td.z.nix{color:var(--tinte3)} /* Was in diesem Monat von Chris selbst kommt — in der Lagespalte, weil es zur Frage "wie steht es gerade" gehoert und nicht zum Eintragen. */ section.eigenliste, section.erfkarte, section.nebenkonten, section.bankums{ margin-top:16px; padding:14px 16px; border:1px solid var(--linie); border-radius:12px; background:var(--flaeche); } section.eigenliste h3, section.erfkarte h3, section.nebenkonten h3, section.bankums h3{ margin:0 0 8px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinte3); font-weight:600; } section.eigenliste .posten:first-of-type{border-top:0; padding-top:0} /* ---------- Die Konten benennen --------------------------------------- * * Eine Zeile je Konto, EIN Speichern-Knopf. Am Schreibtisch ein Raster * mit fünf Spalten, auf dem Telefon untereinander mit Beschriftungen — * dieselbe Maske, zwei Haltungen. Die Spaltenköpfe verschwinden dort, * weil jede Zeile ihre eigene Beschriftung mitbringt. */ .kbform{margin-top:6px} section.kbbank{ margin:0 0 22px; padding:16px clamp(12px,2vw,20px); border:1px solid var(--linie); border-radius:16px; background:var(--flaeche); } section.kbbank h3{ display:flex; align-items:center; gap:9px; margin:0 0 14px; font-size:15px; font-weight:600; letter-spacing:-.01em; } section.kbbank h3 span{font-weight:400; font-size:12px; color:var(--tinte3); letter-spacing:0} .kbkopf{ display:grid; grid-template-columns:minmax(150px,1.1fr) minmax(120px,1.3fr) minmax(110px,.9fr) 100px 110px; gap:10px; padding:0 0 6px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinte3); font-weight:600; border-bottom:1px solid var(--linie); } .kbzeile{ display:grid; grid-template-columns:minmax(150px,1.1fr) minmax(120px,1.3fr) minmax(110px,.9fr) 100px 110px; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--linie); } /* Gesetz 18 — Buchungsnamen: Reihe · Beleg · Name · Knopf. */ .kbkopf.nr, .kbzeile.nr{grid-template-columns:minmax(160px,1.2fr) minmax(160px,1.4fr) minmax(160px,1.2fr) 110px; margin:0} .kbzeile.nr .kbwoher b{font-weight:600; font-size:14.5px} .kbzeile.nr .kbwoher span{display:block; font-size:12px; color:var(--tinte3); line-height:1.4} .kbzeile.nr .kbfeld.tun button{width:100%; padding:9px 10px; font-size:13px} section.kbbank.namen details.nr{margin-top:8px} section.kbbank.namen details.nr summary{font-size:13px; color:var(--tinte2); cursor:pointer; padding:8px 0} @media (max-width:760px){ .kbkopf.nr{display:none} .kbzeile.nr{grid-template-columns:1fr; gap:6px; padding:12px 0} } .kbzeile:last-of-type{border-bottom:0} .kbwoher{min-width:0; display:flex; flex-direction:column; gap:1px} .kbwoher b{font-size:13px; font-weight:500; color:var(--tinte); overflow:hidden; text-overflow:" …"; white-space:nowrap} .kbwoher span{font-size:12px; color:var(--tinte3); font-variant-numeric:tabular-nums} .kbfeld{display:flex; flex-direction:column; gap:3px; min-width:0} .kbfeld .nurklein{display:none} .kbfeld input[type=text], .kbfeld select{ box-sizing:border-box; width:100%; height:40px; padding:0 10px; font:inherit; font-size:14px; line-height:normal; margin:0; color:var(--tinte); background:var(--flaeche); border:1px solid var(--linie); border-radius:9px; min-width:0; } .kbfeld input:focus, .kbfeld select:focus{outline:2px solid var(--akzent); outline-offset:-1px; border-color:var(--akzent)} .kbtun{position:sticky; bottom:0; padding:10px 0 4px; background:var(--grund)} .kbtun button{width:auto; border:0; border-radius:12px; font:inherit; font-size:15px; font-weight:600; padding:14px 22px; background:var(--akzent); color:var(--aufakzent); cursor:pointer} .kbfuss{margin:10px 0 0; font-size:12px; line-height:1.6; color:var(--tinte3); max-width:70ch} @media (max-width:900px){ .kbkopf{display:none} .kbzeile{grid-template-columns:1fr 1fr; gap:8px 10px; padding:14px 0} .kbwoher{grid-column:1 / -1} .kbfeld .nurklein{display:block; font-size:12px; color:var(--tinte3)} .kbzeile > label:nth-of-type(1){grid-column:1 / -1} } /* ---------- WO EUER GELD LIEGT — die Töpfe ---------------------------- * * Eine Wand aus Kacheln, eine je Topf. Der Name steht oben und gross, * die Zahl darunter noch groesser, die Leiste sagt in einem Blick, wie * gross dieser Topf im Verhaeltnis ist — oder wie weit er zu seinem Ziel * gekommen ist, wenn eines gesetzt wurde. * Die Farbe haengt am THEMA und nicht am Rang: Dieselbe Sache traegt * ueberall dieselbe Farbe, sonst lernt man sie nie. Es sind genau die * zwoelf Farben, die schon der Kreis und die Balken benutzen. */ section.toepfe{ margin:28px 0 0; padding:20px clamp(16px,2.4vw,24px); border:var(--karterand); border-radius:var(--karteradius); box-shadow:var(--karteschatten); background:var(--flaeche); } .tpkopf{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:18px; } .tpkopf h2{margin:0; font-size:17px; letter-spacing:-.01em} p.tpzahl{ margin:4px 0 0; font-size:24px; font-weight:600; letter-spacing:-.025em; font-variant-numeric:tabular-nums; color:var(--tinte); } dl.tpteilung{display:flex; gap:26px; margin:0; flex-wrap:wrap} /* Zahl und Titel enden rechtsbündig gemeinsam (04.10.2026, Chris: „die Zahl müsste rechtsbündig enden unter verfügbar … analog denken"). Regel für jede Kennzahl mit Titel darüber, die rechts im Kopf steht. */ dl.tpteilung div{display:flex; flex-direction:column; gap:2px; align-items:flex-end; text-align:right} dl.tpteilung dt{ font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinte3); font-weight:600; } dl.tpteilung dd{ margin:0; font-size:17px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--tinte); } dl.tpteilung dd.gut{color:var(--gut)} dl.tpteilung dd.minus{color:var(--bad)} dl.tpteilung dd.offen{color:var(--tinte3)} ul.tpwand{ list-style:none; margin:0; padding:0; display:grid; gap:var(--luft-raster); grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); } li.tp{ padding:var(--luft-raster) 16px; border:1px solid var(--linie); border-radius:14px; background:var(--grund); min-width:0; display:flex; flex-direction:column; gap:7px; } /* Name, Zahl, Leiste und Fusszeile stehen auf EINER Kante — nichts rueckt ein. Christian am 13.09.2026: „Die Überschriften und die Zahlen müssen beide in einer Ebene linksbündig stehen." */ .tp-kopf{display:flex; align-items:center; min-width:0} .tp-name{ font-size:13px; font-weight:500; color:var(--tinte); min-width:0; overflow:hidden; text-overflow:" …"; white-space:nowrap; } p.tp-wert{ margin:0; font-size:24px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--tinte); } /* Leiste, Fusszeile und die zwoelf Themenfarben sind am 18.09.2026 entfallen — die Karte traegt nur noch Bezeichnung und Zahl (Begruendung in tageslinie.php). Die Regeln gehen mit: Stilregeln ohne Element im Bauteil sind Ballast, den der Naechste fuer eine Absicht haelt. */ li.tp.schuld p.tp-wert{color:var(--bad)} /* Das Alter des Depotwerts — leise, solange alles stimmt; sichtbar, wenn nicht. */ p.tp-kurs{margin:0; font-size:12px; line-height:1.45; color:var(--tinte3); display:flex; align-items:flex-start; gap:5px} p.tp-kurs svg{flex:0 0 auto; margin-top:1px} p.tp-kurs.art-warte{color:var(--wartetinte)} p.tp-kurs.art-warnung{color:var(--bad)} /* ---------- Das Depot in der Kontenverwaltung (13.09.2026) ------------ */ .kbbank.depot h3 small{display:block; font-weight:400; font-size:12px; color:var(--tinte3); margin-top:2px; text-transform:none; letter-spacing:0} .dptabelle{display:grid; gap:12px} .dpzeile{padding:14px 16px; border:1px solid var(--linie); border-radius:12px; background:var(--grund); display:grid; gap:10px} .dpkopf{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap} .dpkopf b{font-size:15px; letter-spacing:-.01em} .dpmess{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:8px 16px; margin:0} .dpmess dt{font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--tinte3)} .dpmess dd{margin:2px 0 0; font-size:14.5px; font-variant-numeric:tabular-nums} .dpmess dd small{font-size:12px; color:var(--tinte3); margin-left:4px} .dpmess dd em{font-style:normal; color:var(--tinte3)} .dpstart{display:grid; grid-template-columns:1fr; gap:10px; align-items:end; padding-top:10px; border-top:1px solid var(--linie)} @media (min-width:761px){ .dpstart{grid-template-columns:150px 160px minmax(0,1fr) auto} } .dpstart .kbfeld .nurklein{display:block; font-size:12px; color:var(--tinte3)} .dpstart .kbfeld input[type=date]{box-sizing:border-box; width:100%; height:40px; padding:0 10px; font:inherit; font-size:14.5px; color:var(--tinte); background:var(--flaeche); border:1px solid var(--linie); border-radius:9px} .dpknopf{border:0; border-radius:10px; font:inherit; font-size:14.5px; font-weight:600; padding:10px 18px; background:var(--akzent); color:var(--aufakzent); cursor:pointer; width:auto} /* ---------- Das Haushaltskonto — eigene Sicht (13.09.2026) ---------- * * Nur echte Buchungen. Baut auf den Bauteilen der Uebersicht auf * (.mitte, .kacheln, .monatskopf, .awliste, .buliste) und ergaenzt nur, * was es dort nicht gibt: den grossen Bankstand, das Monatsband, die * zweispaltige Auswertung und die Tagesgruppen in der Liste. */ .hhstand{ display:grid; justify-items:center; gap:4px; margin:0 0 20px; padding:22px 20px 20px; background:var(--flaeche); border:var(--karterand); border-radius:var(--karteradius); box-shadow:var(--karteschatten); } .hhstand .wann{font-size:13px; color:var(--tinte3); letter-spacing:.015em} /* Ein Stand, der nicht von heute ist, sagt es in der Farbe der Warnung — nicht schreiend, aber unuebersehbar. Gemessen 15.09.2026: die Anwendung zeigte 195,99 EUR und schrieb „19:00 Uhr" daran; die Bank fuehrte 795,50 EUR. Die Zahl war alt, die Uhrzeit jung. Nie wieder. */ /* Ein alter Stand ist ein Hinweis, eine Stille über Bankarbeitstage eine Störung. Nur die zweite bekommt die Signalfarbe (16.09.2026). */ .hhstand .wann.art-ruhig{color:var(--tinte3)} .hhstand .wann.art-warnung{color:var(--bad); font-weight:600} .mstand .dazu .standruhig, .dazu .standruhig{color:var(--tinte3)} .mstand .dazu .standalt, .dazu .standalt{color:var(--bad); font-weight:600} .hhstand .zahl{font-size:40px; line-height:1.05; letter-spacing:-.035em; font-weight:600; font-variant-numeric:tabular-nums} .hhstand .zahl.minus{color:var(--bad)} .hhstand .dazu{font-size:12px; color:var(--tinte3)} .hhmon{ display:grid; gap:6px; justify-items:center; align-content:end; text-decoration:none; color:inherit; padding:8px 4px 7px; border-radius:var(--wahl); transition:background .14s ease; } .hhmon:hover{background:var(--flaeche2)} /* .hhmon.aktiv: siehe Gattung B */ .hhmonat{margin-bottom:20px} /* „bis heute" steht NEBEN der Einheit, nicht in ihr — sonst waere die feste Namensbreite wieder hinfaellig (18.09.2026). */ .monatskopf .mkbis{margin-left:8px; font-size:13px; font-weight:500; color:var(--tinte3)} .hhaus{display:grid; grid-template-columns:1fr; gap:18px 28px; margin-top:4px} @media (min-width:901px){ .hhaus{grid-template-columns:1fr 1fr} } .hhseite h3{ display:flex; align-items:center; gap:6px; margin:0 0 8px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinte3); font-weight:600; } .hhseite h3 .ikon{width:13px; height:13px; opacity:.7} .hhseite h3 b{margin-left:auto; font-size:14.5px; letter-spacing:0; text-transform:none; color:var(--bad); font-variant-numeric:tabular-nums} .hhseite h3 b.plus{color:var(--gut)} .hhseite span.awgriff{ display:grid; grid-template-columns:9px minmax(0,1fr) auto auto; align-items:center; gap:9px; padding:6px 8px; border-radius:9px; color:inherit; } .hhseite .awname em{font-style:normal; color:var(--tinte3); font-size:12px; margin-left:4px} .hhseite .awbetrag.plus{color:var(--gut)} .awfarbe.frest, .awbalken i.frest{background:var(--tinte3); opacity:.45} .hhliste h2.abschnitt{display:flex; align-items:center; gap:6px} .hhliste h2.abschnitt small{margin-left:auto; font-weight:500; letter-spacing:0; text-transform:none; font-size:12px} /* BEFUND vom 13.09.2026 (Christians Bild, Haushalt „Alle Buchungen"): Namen rechts aussen, Betrag in der Zeile darunter links. Diese Regel steht VOR `ul.buliste li` (drei Spalten) und hat dieselbe Spezifitaet — die spaetere gewann, das Raster fiel auf drei Spalten zurueck. Jetzt mit beiden Klassen, damit die Reihenfolge im Stylesheet nichts mehr entscheidet. */ ul.buliste.hhbu li{grid-template-columns:var(--butag, 52px) 8px minmax(0,1fr) auto; align-items:start; padding:6px 0; border-top:0} ul.hhbu li .bupunkt{margin-top:6px; align-self:start} ul.hhbu .bu-name .zutun{margin-left:6px} ul.hhbu .bu-name .zutun.geraten{color:var(--tinte3); border-color:var(--linie); border-style:dashed} ul.hhbu .bu-name .zutun.geraten:hover, ul.hhbu .bu-name .zutun.geraten:focus-visible{background:var(--flaeche2); color:var(--tinte); border-color:var(--tinte3)} ul.hhbu .bugruppe{font-size:12px; color:var(--tinte3); margin-left:6px; white-space:nowrap} ul.hhbu .bu-name{white-space:normal; display:flex; align-items:center; gap:2px; flex-wrap:wrap} .hhgruppen{margin-bottom:20px} .hhgruppen .awname em{font-style:normal; color:var(--tinte3); font-size:12px; margin-left:4px} ul.hhbu li.tagstart{border-top:1px solid var(--linie); padding-top:9px; margin-top:3px} ul.hhbu li.tagstart:first-child{border-top:0; margin-top:0; padding-top:0} ul.hhbu .bu-tag{font-size:12px; color:var(--tinte2); font-weight:600; padding-top:1px} ul.hhbu .bu-was{display:grid; gap:1px; white-space:normal} ul.hhbu .bu-name{font-size:14.5px; color:var(--tinte); letter-spacing:-.01em; white-space:normal; overflow-wrap:anywhere} ul.hhbu .bu-neben{font-size:12px; color:var(--tinte3); white-space:normal; overflow-wrap:anywhere} ul.hhbu .bu-neben:empty{display:none} ul.hhbu .bu-betrag{font-size:14.5px; padding-top:1px} /* ---------- Wirklich gebucht ----------------------------------------- * * Die echten Umsaetze der Bank. Bewusst schlicht und bewusst KURZ: acht * Zeilen, dann ein Hinweis. Diese Karte soll zeigen, DASS die Bank * spricht — die vollstaendige Liste gehoert nicht in die Randspalte. */ section.bankums .buzeile{margin:0 0 10px; font-size:12px; color:var(--tinte3); line-height:1.5} section.bankums .buzeile b{color:var(--tinte); font-weight:600} section.bankums .buzeile .gut{color:var(--gut)} section.bankums .buzeile .bad{color:var(--bad)} ul.buliste{list-style:none; margin:0; padding:0; display:grid; gap:0} /* DAS DATUM HAT EINE FESTE SPALTE. Christian am 13.09.2026 (Bild „Wirklich gebucht"): „Flattertext … die Beschriftung nach dem Datum müsste über Tabulatoren, jedenfalls nicht über Leerzeichen, sonst springt das Bild." `auto` machte die Spalte so breit wie das laengste Datum DER SICHTBAREN Zeilen — beim Aufklappen sprang sie. Jetzt 44 px, so breit wie „31.12." in der Buchungsschrift (dieselbe Breite wie im Haushalt), die Namen stehen an einer Kante. */ ul.buliste li{ display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:8px; align-items:baseline; padding:7px 0; border-top:1px solid var(--linie); } ul.buliste li:first-child{border-top:0; padding-top:0} .bu-tag{font-size:12px; color:var(--tinte3); font-variant-numeric:tabular-nums; white-space:nowrap} /* Nichts wird abgeschnitten (Christian, 13.09.): der Name bricht um statt hinter drei Punkten zu verschwinden — gesehen an „COSMOS Lebensversicherungs- Aktiengesellscha…" unter Wirklich gebucht. */ .bu-was{font-size:13px; color:var(--tinte); min-width:0; white-space:normal; overflow-wrap:anywhere; line-height:1.35} .bu-betrag{font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap} .bu-betrag.plus{color:var(--gut)} .bu-betrag.minus{color:var(--bad)} section.eigenliste p.mehr, section.nebenkonten p.mehr{margin:10px 0 0; font-size:12px} section.eigenliste p.mehr a, section.nebenkonten p.mehr a{color:var(--akzent); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:1px} section.erfkarte .ez{ margin:0; font-size:24px; font-weight:600; color:var(--bad); font-variant-numeric:tabular-nums; letter-spacing:-.02em; } section.erfkarte .et{margin:6px 0 0; font-size:12px; line-height:1.5; color:var(--tinte3)} /* Die Nebenkonten — Tagesgeld, Kontokorrent, Depots. Christian am 12.09.2026: „nicht so dominant wie die beiden Girokonten, weil die sind der zentrale Dreh- und Angelpunkt." Also: gleiche Kartenform wie die Nachbarn, aber kein einziges Element in der Markenfarbe ausser dem Verweis am Fuss. Die Karte meldet sich nicht, sie steht bereit. */ section.nebenkonten dl{margin:0} section.nebenkonten dl > div{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:6px 0; border-top:1px solid var(--linie); } section.nebenkonten dl > div:first-child{border-top:0; padding-top:0} /* Aufbau wie in der Bruecke: Beschriftung oben, die Einordnung klein darunter. Nicht nebeneinander — bei „noch kein Stand" rechts brach die Zeile sonst um und die Karte wurde ausgefranst (gemessen 12.09.2026). */ section.nebenkonten{text-align:left} section.nebenkonten dt{ font-size:13px; color:var(--tinte2); display:flex; flex-direction:column; } section.nebenkonten dt span{font-size:12px; color:var(--tinte3)} section.nebenkonten dt b.nkname{font-weight:inherit; display:inline-flex; align-items:center; gap:7px} /* DIE MARKE DER BANK (13.09.2026): 16 px hoch, Originalzeichen als Bild, Ecken 3 px; steht hinter der Kontoart, vor dem Bankstand, in der Kontenverwaltung vor dem Banknamen. Nie skaliert ueber 16 px — sie ist Kennzeichen, nicht Schmuck. */ /* EIN LOGO IST NICHT FREIGESTELLT (17.09.2026). Christian, mit Bild vom Telefon: „Logos dürfen nicht freigestellt sein. Das VR-Logo ist nicht original. Das Weiß wurde aus dem Logo entfernt. Das darf nicht sein. Bitte Website-global darauf achten.“ GEMESSEN: bank-vrbank.png war zu 36,5 % durchsichtig, bank-consorsbank.png zu 0 % — das eine Zeichen stand also auf dem dunklen Grund der Seite, das andere auf seinem eigenen Weiß. Eine Marke gehört aber immer so gezeigt, wie ihr Eigentümer sie festgelegt hat, und das heißt: auf ihrem Papiergrund. ZWEI EBENEN, damit es nicht wiederkommt: Die Datei bekommt ihr Weiß zurück (und jede neu hochgeladene wird beim Annehmen unterlegt — markeWeissUnterlegen), UND die Darstellung legt hier global Weiß unter jede Marke. Der Schatten in Weiß ist der Papierrand: Er fügt Luft hinzu, OHNE die gemessene Bildgröße zu verändern (padding würde sie bei box-sizing:border-box verkleinern). Auch im Dunkelmodus bleibt der Grund weiß — ein Markenzeichen wird nicht umgefärbt. */ .bankmarke{height:var(--bmh,16px); width:auto; display:inline-block; vertical-align:middle; border-radius:3px; flex:0 0 auto; position:relative; top:-1px; background:#FFFFFF; box-shadow:0 0 0 3px #FFFFFF} /* Die Hoehe kommt aus der Verwaltung (bankmarke.hoehe, 12–32 px) — Christian, 13.09.: „Consors ist mir zu klein, VR hat die richtige Größe": Consors 20, VR 16. In der Ueberschrift des Haushalts eine Stufe groesser. */ .bankmarke.msbank{margin-right:6px; width:28px; height:28px; object-fit:contain; background-position:center} .bankmarke.h1bank{height:calc(var(--bmh,16px) + 4px); margin-right:9px; border-radius:4px} .kbbank h3 span .bankmarke{margin-right:6px} section.nebenkonten dd{ margin:0; font-size:14.5px; font-weight:600; color:var(--tinte); font-variant-numeric:tabular-nums; letter-spacing:-.01em; white-space:nowrap; text-align:right; } section.nebenkonten dd.leer{font-size:12px; font-weight:400; color:var(--tinte3)} section.nebenkonten dd.halb span{ display:block; font-size:12px; font-weight:400; color:var(--tinte3); letter-spacing:0; } /* Beschriftungen brechen unterschiedlich lang um — die Felder sollen trotzdem auf einer Linie stehen. */ .sonderform label.feld{justify-content:space-between} /* ---------- Verwaltung ------------------------------------------------ * * Eine eigene Seite, nicht ein Anhaengsel der Uebersicht: dort fragt man * „wo stehe ich", hier „was aendere ich". Zwei Haltungen, zwei Orte. */ /* DIE WEGE IM KOPF ACHTUNG beim Aendern: Die Klasse heisst kopfweg, NICHT weg. "weg" gibt es in dieser Anwendung schon — dort im Sinne von entfernen (.vh-tun button.weg, .md-tun button.weg), unterstrichen und grau. Zwei Bedeutungen auf einem Namen sind ein Fehler, auch wenn sie verschieden umschlossen sind. Eine Familie statt dreier Bauweisen. Alle Wege sehen gleich aus, der aktuelle ist hinterlegt wie das aktive Feld im Kontoumschalter — so spricht der Kopf EINE Sprache. Genau ein Element traegt die Markenfarbe: das Zeichen des Weges, auf dem man steht. Abmelden steht hinter einem Strich: kein Weg, sondern ein Ende. */ .kopfwege{display:flex; align-items:center; gap:8px; margin-left:auto; flex:0 0 auto} /* Im Banner: oben rechts auf dem Bild, weiss mit Schatten, damit sie sich vom Foto abheben. Ohne Banner (Markenzeile) stehen sie rechts in der Zeile. */ .markenband .kopfwege{position:absolute; top:14px; right:14px; margin:0} .markenband .kopfknopf{border-color:transparent; box-shadow:0 2px 8px rgba(15,30,31,.22)} .markenband .kopfknopf.aktiv{background:var(--flaeche); color:var(--akzent)} @media (max-width:560px){ .markenband .kopfwege{top:9px; right:9px; gap:6px} .markenband .kopfknopf{width:32px; height:32px} .markenband .kopfknopf .ikon{width:16px; height:16px} } .kopfwege form{margin:0} /* DER HELLIGKEITSSCHALTER (20.09.2026) */ .kopfhell{position:relative; flex:0 0 auto} .kopfhellknopf .hellzeichen{display:none; line-height:0} :root[data-hellwahl="hell"] .kopfhellknopf .hz-hell{display:block} :root[data-hellwahl="dunkel"] .kopfhellknopf .hz-dunkel{display:block} :root[data-hellwahl="auto"] .kopfhellknopf .hz-auto{display:block} /* EIN MENUE SCHWEBT, ES HAENGT NICHT (20.09.2026). GEMESSEN: Das Markenband traegt overflow:hidden (wegen der runden Ecken am Bild) und schnitt das aufgeklappte Menue nach zwei Zeilen ab. Ein absolut positioniertes Menue bleibt in diesem Kasten gefangen; ein fixiertes nicht. Die Lage rechnet das Skript aus der Knopfposition. */ .hellmenue{ position:fixed; z-index:9000; min-width:268px; padding:var(--luft-raster); background:var(--flaeche); border:1px solid var(--linie); border-radius:14px; box-shadow:0 18px 44px -20px rgba(15,30,31,.45); display:flex; flex-direction:column; gap:4px; } .hellmenue[hidden]{display:none} p.hellsatz{margin:0 0 8px; font-size:13px; color:var(--tinte2); line-height:1.5} p.hellsatz small{font-size:12px; color:var(--tinte3)} button.hellwahl{ --knopf-min:0; --knopf-max:none; --knopf-breit:100%; width:100%; min-height:0; display:flex; align-items:flex-start; gap:10px; padding:9px 10px; border-radius:10px; background:transparent; color:var(--tinte); font-size:14.5px; font-weight:500; text-align:left; cursor:pointer; } button.hellwahl:hover{background:var(--flaeche2)} button.hellwahl .ikon{margin-top:2px; flex:0 0 auto} button.hellwahl span{display:flex; flex-direction:column; gap:2px} button.hellwahl small{font-size:12px; color:var(--tinte2); font-weight:400; line-height:1.4} button.hellwahl[aria-pressed="true"]{background:var(--flaeche2); color:var(--akzent)} button.hellwahl[aria-pressed="true"] small{color:var(--tinte2)} @media (max-width:560px){ .hellmenue{min-width:252px; max-width:calc(100vw - 24px)} } /* OBEN RECHTS ZWEI RUNDE KNOEPFE (13.09.2026, ~19:20). Sie heben sich vom Banner ab: 36 px, Rand, helle Flaeche; das Zeichen traegt die Farbe. Der aktive (Verwaltung, wenn man dort ist) ist gefuellt und traegt das Zeichen in Akzent. Abmelden wird beim Ueberfahren rot — ein Ende. */ .kopfknopf{ display:inline-flex; align-items:center; justify-content:center; /* GEMESSEN 15.09.2026: Der Abmelden-Knopf ist ein <button> und wurde von der allgemeinen Knopfhoehe (44 px) mitgenommen — neben dem 36 px hohen Verwaltungs-Knopf sass er sichtbar schief. Zwei Knoepfe nebeneinander haben dieselbe Hoehe, ohne Wenn und Aber; deshalb hier festgeschrieben. */ /* GEMESSEN 20.09.2026, von Christian gemeldet: `min-width:168px` aus der Knopffamilie schlaegt `width:36px` — der Abmelden-Knopf (ein <button>) wurde zur Ellipse, das Zahnrad daneben (ein <a>) blieb rund. Ein Kreis braucht ALLE drei Angaben, sonst ist er keiner. */ --knopf-min:0; --knopf-max:none; --knopf-breit:36px; width:36px; height:36px; min-height:36px; max-height:36px; padding:0; border-radius:50%; flex:0 0 auto; /* EINE FAMILIE, AUCH HIER (20.09.2026, Gesetz 46): Der Kopfknopf trug als einziger Knopf der Seite graue Schrift — gemeldet vom CI-Waechter. */ background:var(--flaeche); border:1px solid var(--linie); color:var(--gut-tinte,#3C5A2A); cursor:pointer; text-decoration:none; box-shadow:0 1px 2px rgba(15,30,31,.06); transition:background .16s ease, color .16s ease, border-color .16s ease; font:inherit; } .kopfknopf .ikon{width:18px; height:18px; display:block} .kopfknopf:hover{color:var(--tinte); border-color:var(--tinte3)} .kopfknopf.aktiv{background:var(--flaeche2); border-color:transparent; color:var(--akzent); cursor:default; pointer-events:none} /* Abmelden ist ein Werkzeug, kein Graustich (20.09.2026, Gesetz 46): auch hier die Markenfarbe, rot erst beim Zeigen — dort ist es eine Handlung. */ .kopfknopf.kopfaus{color:var(--gut-tinte,#3C5A2A)} .kopfknopf.kopfaus:hover{color:var(--bad); border-color:var(--bad)} .kopfknopf:active{transform:none} .kopfweg{ display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:10px; font:inherit; font-size:14.5px; font-weight:500; letter-spacing:-.01em; color:var(--tinte2); text-decoration:none; white-space:nowrap; background:transparent; border:0; width:auto; cursor:pointer; text-decoration:none; box-shadow:none; transition:background .16s ease, color .16s ease; } .kopfweg .ikon{width:16px; height:16px; color:var(--tinte3); flex:none; vertical-align:0} .kopfweg:hover{background:var(--flaeche2); color:var(--tinte)} .kopfweg:hover .ikon{color:var(--tinte2)} .kopfweg.aktiv{ background:var(--flaeche); color:var(--tinte); cursor:default; box-shadow:0 1px 2px rgba(15,30,31,.09); } .kopfweg.aktiv .ikon{color:var(--akzent)} .kopfweg:active{transform:none} button.kopfweg.kopfaus{color:var(--tinte3)} button.kopfweg.kopfaus:hover{color:var(--bad); background:transparent} button.kopfweg.kopfaus:hover .ikon{color:var(--bad)} /* Schmal wird aus der Zeile eine Reihe von Zeichen. Die Beschriftung faellt weg, nicht der Weg — gemessen bei 390 px. */ @media (max-width:760px){ .kopfweg span{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)} .kopfweg{padding:9px 10px; gap:0} } section.vwkopf{margin:6px 0 22px} section.vwkopf h1{margin:0 0 5px; font-size:24px; letter-spacing:-.02em; text-align:left} section.vwkopf p{margin:0; font-size:14.5px; color:var(--tinte2); max-width:70ch; line-height:1.5} /* DER KOPF IST AUF JEDER SEITE GLEICH HOCH (16.09.2026). Christian: „Jetzt mal die Versicherungsseite gegen die anderen Seiten, Vermögen, Steuer, Haushalt und so weiter. Weil die Versicherungsseite springt gegenüber den anderen." GEMESSEN bei 1180 und 834 px: Haushalt, Rente und Versicherungen 54 px Kopf (einzeiliger Satz), Steuer und Vermögen 75 px (zweizeilig) — beim Wechsel sprang alles darunter um 21 px. Der Satz bekommt jetzt den Platz fuer zwei Zeilen, ob er ihn braucht oder nicht; damit beginnt die erste Karte ueberall auf derselben Hoehe. Auf dem Telefon nicht: dort brauchen die Saetze zwei bis vier Zeilen, und fester Leerraum waere dort teurer als der Sprung. Waechter: pruef/kopf-gleich.js */ @media (min-width:901px){ section.vwkopf p{min-height:42px} } .vwraster{display:grid; grid-template-columns:1fr; gap:26px} @media (min-width:901px){ .vwraster{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:34px; align-items:start} } .vwform, .vwliste{min-width:0} .vwform h3, .vwliste h3.tagtrenner{ margin:0 0 10px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinte3); font-weight:600; } .vwliste h3.tagtrenner{margin:22px 0 10px; padding-top:14px; border-top:1px solid var(--linie)} .vwliste h3.tagtrenner:first-child{margin-top:0; padding-top:0; border-top:0} .vwform form{display:grid; gap:12px} .vwform .feld{display:flex; flex-direction:column; gap:5px} .vwform .feld > span{font-size:12px; color:var(--tinte2); display:flex; flex-direction:column} .vwform .feld > span b{font-weight:400; font-size:12px; color:var(--tinte3)} .vwform input[type=text], .vwform select, .vwform textarea{ width:100%; padding:11px 12px; font:inherit; font-size:15px; color:var(--tinte); background-color:var(--flaeche); border:1px solid var(--linie); border-radius:10px; } .vwform select{padding-right:32px} /* Platz fuer das Auswahlzeichen aus der Sammelregel */ .vwform textarea{resize:vertical; line-height:1.5; font-size:14.5px} .vwform input:focus, .vwform select:focus, .vwform textarea:focus{ outline:2px solid var(--akzent); outline-offset:-1px; border-color:var(--akzent); } .vwform button{ border:0; border-radius:12px; font:inherit; font-size:15px; font-weight:600; min-height:var(--knopf); padding:0 22px; background:var(--akzent); color:var(--aufakzent); cursor:pointer; width:100%; } p.kleintext{margin:0 0 14px; font-size:12px; line-height:1.55; color:var(--tinte3)} /* Vorhaben — die Dringlichkeit traegt die Farbe, nicht der Text */ article.vorhaben{ padding:15px 17px; border:1px solid var(--linie); border-radius:13px; background:var(--flaeche); margin-bottom:10px; border-left-width:3px; } article.vorhaben.rang1{border-left-color:var(--bad)} article.vorhaben.rang2{border-left-color:#C68A2E} article.vorhaben.rang3{border-left-color:var(--akzent)} article.vorhaben.rang4, article.vorhaben.rang5{border-left-color:var(--linie)} .vh-kopf{display:flex; justify-content:space-between; align-items:baseline; gap:12px} .vh-kopf h3{margin:0; font-size:15px; letter-spacing:-.01em; text-transform:none; color:var(--tinte)} .vh-rang{font-size:12px; color:var(--tinte3); white-space:nowrap} .vh-text{margin:7px 0 0; font-size:13.5px; line-height:1.55; color:var(--tinte2)} .vh-fuss{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:12px; flex-wrap:wrap} .vh-fuss > span:first-child{font-size:12px; color:var(--tinte3)} .vh-tun{display:flex; gap:10px; align-items:center; flex-wrap:wrap} .vh-tun form{display:flex; gap:6px; align-items:center; margin:0} /* 27.09.2026: bei 360 px ragte „Erledigt“ 1 px über die Karte — Knopfleiste und Formular dürfen umbrechen und schrumpfen. */ .vh-tun, .vh-tun form{min-width:0; max-width:100%} .vh-tun form{flex-wrap:wrap} /* 27.09.2026 gemessen: Die Erklärung (i) in einer Kachel ging als 28 px schmale Säule auf (4.822 px hoch) — in jeder Breite. Die Lupe war selbst in der Kachelecke festgesteckt und wurde so zum Bezugsrahmen ihrer Erklärung. Jetzt steckt nur der Knopf in der Ecke, die Erklärung richtet sich nach der Kachel; auf Telefon und iPad erscheint sie als Blatt am unteren Rand. */ .kachel .kt > details.info{position:static} .kachel .kt > details.info > summary{position:absolute; top:9px; right:9px; z-index:2} @media (max-width:900px){ .kachel .kt > details.info > p{position:fixed; left:16px; right:16px; top:auto; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); width:auto; max-height:60vh; overflow:auto; z-index:60} } /* 27.09.2026 gemessen bei 320 px: „bis heute“ im Monatskopf ragte 58 px hinaus, der Abrufstand im Modultitel 35 px. */ nav.monatskopf{flex-wrap:wrap; row-gap:4px} h2.modultitel > span.mtzusatz{white-space:normal; min-width:0; max-width:100%} /* 27.09.2026, Chris am iPad 11" hochkant: „fehlerhafte Darstellung im Urlaubsmanager, wenn man an die einzelnen Reisen geht … das muss in jeder Auflösung responsiv sein." Gemessen: Die Reiseliste war ein Raster mit einer Spalte „auto" — sie wuchs auf die Breite ihres breitesten Inhalts (965 px bei 834 px Bildschirm), die ganze Seite wurde seitlich verschiebbar, auch am Telefon. Und die Kostentabelle schaltete nach der BILDSCHIRMbreite (800 px) um, nicht nach dem Platz, den sie wirklich hat. Jetzt hält die Liste die Breite, und die Tabelle richtet sich nach ihrer eigenen Breite: breit als Tabelle, mittel mit der Rechnung unter der Beschreibung, schmal gestapelt. */ ul.ubliste{grid-template-columns:minmax(0,1fr)} ul.ubliste > li{min-width:0} table.ubtab tr.gesamtzeile td, table.ubtab tr.gesamtzeile td > :not(b){white-space:normal} div.ubauf{container-type:inline-size} @container (max-width:760px){ table.ubtab { min-width: 0px; } table.ubtab, table.ubtab tbody, table.ubtab tr { display: block; width: 100%; } table.ubtab td { display: block; width: 100%; box-sizing: border-box; min-width: 0px; border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; padding: 0px; } table.ubtab td.ubn { padding: 0px 0px 8px; } table.ubtab td.ubr { padding: 0px 0px 4px; } table.ubtab td.ubb { padding: 0px 0px 8px !important; } table.ubtab td.ubw { padding: 0px; text-align: right; } table.ubtab tr { padding: 14px 0px; border-bottom: 1px solid var(--linie); } table.ubtab tr.gesamtzeile { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; padding-top: 16px; } table.ubtab td.ubr input.bmedit, table.ubtab td.ubb input.bmedit { width: auto; max-width: 100%; } } @container (min-width:480px) and (max-width:760px){ table.ubtab tbody tr{display:grid; grid-template-columns:minmax(0,1fr) auto auto; column-gap:16px; align-items:center} table.ubtab tbody td.ubn{grid-column:1 / -1} table.ubtab tbody td{width:auto} table.ubtab tbody td.ubr, table.ubtab tbody td.ubb{padding:0 !important} } /* 27.09.2026, Chris am iPad (Steuer › Promedia, Betriebseinnahmen): „die Eingabefelder … stoßen aneinander, es entstehen wie Leerräume dazwischen … dauerhaft." Gemessen: 1. Das Rechnungs- und das Anlagenformular hatten IMMER vier Spalten — am Telefon 63 px je Feld —, weil ihre Vierer-Regel die Umbrüche für schmale Breiten überschrieb. Jetzt richtet sich die Spaltenzahl nach dem Platz der Karte: vier, zwei oder eine. 2. Safari am iPad zeichnet ein Datumsfeld in seiner eigenen Mindestbreite und hält sich nicht an die Spalte — es schob sich über das Nachbarfeld. Für alle Datums- und Zeitfelder der Anwendung gilt jetzt: so breit wie ihr Platz, nie breiter. Der Gestaltwächter („Zwei Bedienelemente liegen übereinander") meldet es, falls es irgendwo wieder passiert. */ main input:is([type=date],[type=month],[type=time],[type=datetime-local]){-webkit-appearance:none; appearance:none; min-width:0; max-width:100%; box-sizing:border-box} main input:is([type=date],[type=month],[type=time],[type=datetime-local])::-webkit-date-and-time-value{text-align:left} main form.stbelegform > label{min-width:0} :has(> form.stbelegform.gwrechform), :has(> form.stbelegform.gwanlform){container-type:inline-size} form.stbelegform.gwrechform > button, form.stbelegform.gwanlform > button{grid-column:span 2; justify-self:start; white-space:nowrap; padding-inline:22px} @container (max-width:699px){ html body form.stbelegform.gwrechform, html body form.stbelegform.gwanlform{grid-template-columns:repeat(2, minmax(0,1fr))} form.stbelegform.gwrechform label.stnotiz, form.stbelegform.gwanlform label.stnotiz{grid-column:1 / -1} } @container (max-width:419px){ html body form.stbelegform.gwrechform, html body form.stbelegform.gwanlform{grid-template-columns:minmax(0,1fr)} form.stbelegform.gwrechform > *, form.stbelegform.gwanlform > *{grid-column:1 / -1} form.stbelegform.gwrechform > button, form.stbelegform.gwanlform > button{grid-column:1 / -1; justify-self:stretch} } /* 27.09.2026, Chris: „Jetzt taucht da plötzlich nochmal der Wert der Reise auf in so einem komischen Bild … bitte das wieder raus." Gemessen: Die Gesamtzeile ist dieselbe wie am Mac — ein Band über die volle Breite, Gesamt links, Betrag rechts. Beim Stapeln (seit zz51 auch am iPad, am Telefon schon vorher) zerfiel sie in drei Kästen übereinander, halb so breit wie die Karte. Jetzt bleibt sie in jeder Breite das eine Band. */ @container (max-width:760px){ html body table.ubtab tfoot{display:block; width:100%} html body table.ubtab tr.gesamtzeile{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px; width:100%; box-sizing:border-box; padding:var(--luft-rand, 14px) 16px; margin-top:8px; background:var(--grund,#F1F4F4); border-top:2px solid var(--tinte3,#8aa0a2); border-radius:12px} html body table.ubtab tr.gesamtzeile > td{display:block; width:auto; min-width:0; background:none; border:0; border-radius:0; padding:0 !important; text-align:left} html body table.ubtab tr.gesamtzeile > td:first-child{flex:1 1 180px} html body table.ubtab tr.gesamtzeile > td.ubb{flex:0 0 auto; margin-left:auto; text-align:right} html body table.ubtab tr.gesamtzeile > td:empty{display:none} } /* 27.09.2026, Chris zu „Die nächsten zwölf Monate": „der Leerraum oben drüber und unten drunter ist viel zu wenig … Es muss mehr atmen. Wo der Text hier drunter ist, der muss mehr Abstand haben." Gemessen: 2 px zwischen Säulen und Monatsnamen, 0 px Luft unter der letzten Zeile — und das Band schnitt unten ab (seine Höhe war genau die des Inhalts), in Safari wurde deshalb die Ausgabenzeile angeschnitten. */ html body section.jahr div.jahrband{padding-bottom:14px} html body section.jahr div.monatswahl{margin-top:16px} html body section.jahr div.monatswahl span.ms{margin-top:6px} html body section.jahr div.monatswahl span.mstand{margin-top:3px} html body section.jahr div.monatswahl span.mfluss{margin-top:12px; flex-direction:column; align-items:center; row-gap:7px} html body section.jahr{padding-bottom:28px} /* 27.09.2026: „Die Steuer im Original" — Dokumente des Steuerberaters und der Bescheid zum Lesen. */ section.storiginal details.stdok{border-top:1px solid var(--linie)} section.storiginal details.stdok > summary{display:flex; align-items:center; gap:12px; min-height:44px; padding:12px 2px; cursor:pointer; list-style:none} section.storiginal details.stdok > summary::-webkit-details-marker{display:none} section.storiginal details.stdok > summary > span{display:flex; flex-direction:column; gap:2px; min-width:0} section.storiginal details.stdok > summary small{font-size:12px; color:var(--tinte3); overflow-wrap:anywhere} section.storiginal details.stdok > summary::after{content:''; flex:0 0 auto; margin-left:auto; width:8px; height:8px; border-right:2px solid var(--tinte3); border-bottom:2px solid var(--tinte3); transform:rotate(45deg); transition:transform .2s} section.storiginal details.stdok[open] > summary::after{transform:rotate(-135deg)} section.storiginal details.stdok > .dokvorschau{margin:4px 0 18px} /* 27.09.2026: Steuerprognose — gerechnet wie der Bescheid, jede Zahl mit Herkunft. */ section.stprognose p.stpgross{margin:6px 0 10px; font-size:17px} section.stprognose p.stpgross b{font-size:24px; font-weight:700; margin-right:6px; font-variant-numeric:tabular-nums} section.stprognose p.stpgross.nach b{color:var(--bad)} section.stprognose p.stpgross.erst b{color:var(--gut, #4f7a28)} section.stprognose table.stprog{width:100%; border-collapse:collapse; margin:14px 0 6px; font-size:14.5px} section.stprognose table.stprog th{text-align:left; font-weight:400; padding:7px 12px 7px 0; color:var(--tinte2)} section.stprognose table.stprog td{text-align:right; white-space:nowrap; padding:7px 0; font-variant-numeric:tabular-nums} section.stprognose table.stprog tr.stpsum th, section.stprognose table.stprog tr.stpsum td{font-weight:600; color:var(--tinte); border-top:1px solid var(--linie)} section.stprognose table.stprog tr.stpend th, section.stprognose table.stprog tr.stpend td{font-weight:700; font-size:16px; color:var(--tinte); border-top:2px solid var(--tinte3)} /* B6 (04.10.2026): Die Schlusszeile trug unten nur unter dem Wort eine Linie, nicht unter dem Betrag — sie endet jetzt ohne. */ html body section.stprognose table.stprog tr:last-child > *{border-bottom:0} section.stprognose details.stpher{margin-top:14px; border-top:1px solid var(--linie)} section.stprognose details.stpher > summary{min-height:44px; display:flex; align-items:center; cursor:pointer; font-weight:600} section.stprognose details.stpher ul{list-style:none; margin:0; padding:0; display:grid; gap:10px} section.stprognose details.stpher li{display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:baseline; font-size:14.5px} section.stprognose details.stpher li small{grid-column:2; color:var(--tinte3); font-size:12px} section.stprognose span.stpchip{grid-row:span 2; font-size:12px; padding:2px 8px; border-radius:999px; background:var(--flaeche2); color:var(--tinte2); white-space:nowrap} section.stprognose li.h-gemessen span.stpchip{background:color-mix(in srgb, var(--gut, #4f7a28) 16%, transparent); color:var(--gut, #4f7a28)} section.stprognose p.stpruef{display:flex; gap:8px; align-items:flex-start; margin:14px 0 0; font-size:13px; color:var(--tinte2)} section.stprognose p.stpruef.ok .ikon{color:var(--gut, #4f7a28)} section.stprognose p.stpruef.fehl{color:var(--bad)} @media (max-width:560px){ section.stprognose table.stprog th{font-size:13px} section.stprognose p.stpgross b{font-size:24px} } /* Gemessen bei 360 px: die allgemeine Tabellenregel (min. 640 px, Zeilen ohne Umbruch) machte die Prognose seitlich verschiebbar — sie bricht jetzt um. */ html body section.stprognose table.stprog{min-width:0; table-layout:auto} html body section.stprognose table.stprog th{white-space:normal; min-width:0} html body section.stprognose table.stprog th{text-transform:none; letter-spacing:0; font-size:14.5px} /* 27.09.2026, Chris am iPhone hochkant: „dass die Kacheln, die vier, … Texte abgeschnitten werden. Das darf natürlich nicht passieren." Gemessen: Die Kacheln der Reise (Kosten, Stammdaten, Unterlagen, Anzahlungen) standen fest in zwei Spalten, die zweite war 413 px breit in einer Leiste von 252 px — die Leiste schnitt sie ab, und der Wert durfte nicht umbrechen. Jetzt richtet sich die Spaltenzahl nach dem Platz (vier, zwei, eine), und jeder Wert bricht um, statt abgeschnitten zu werden. Der Gestaltwächter meldet abgeschnittenen Text künftig auf jeder Seite. */ html body nav.ubkacheln{grid-template-columns:repeat(4, minmax(0,1fr))} @container (max-width:700px){ html body nav.ubkacheln{grid-template-columns:repeat(2, minmax(0,1fr))} } @container (max-width:340px){ html body nav.ubkacheln{grid-template-columns:minmax(0,1fr)} } html body a.ubkachel{min-width:0} html body span.ubkwert{white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere} /* DIE ROUTE EINER REISE (27.09.2026) — Umschalter, Tagesband, Skizze, Etappen, Ruhe-Wächter. */ form.rtwahl{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:4px; padding:4px; margin:0 0 14px; border-radius:12px; background:var(--flaeche2)} form.rtwahl button{min-height:44px; border:0; border-radius:9px; background:transparent; color:var(--tinte2); font:inherit; font-size:14.5px; font-weight:600; cursor:pointer; padding:6px 10px} form.rtwahl button.an{background:var(--akzent); color:var(--aufakzent, #fff)} p.rtsatz{margin:0 0 10px; color:var(--tinte2); font-size:14.5px} .rtruhe{display:block; margin:0 0 14px; padding:10px 12px; border-radius:12px; font-size:13px; line-height:1.5} p.rtruhe.gut{display:flex; gap:8px; align-items:flex-start; background:color-mix(in srgb, var(--gut, #4f7a28) 10%, transparent)} p.rtruhe.gut .ikon{color:var(--gut, #4f7a28); flex:0 0 auto; margin-top:2px} div.rtruhe.achtung{background:color-mix(in srgb, var(--warte-tinte, #7A5A16) 10%, transparent)} div.rtruhe.achtung p{display:flex; gap:8px; align-items:flex-start; margin:0 0 6px} div.rtruhe.achtung .ikon{color:var(--warte-tinte, #7A5A16); flex:0 0 auto; margin-top:2px} div.rtruhe.achtung ul{margin:0; padding-left:26px} ol.rtband{list-style:none; margin:0 0 6px; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(34px, 1fr)); gap:3px} ol.rtband li{position:relative; min-height:44px; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; font-size:12px; font-variant-numeric:tabular-nums; color:var(--tinte)} ol.rtband li.e0{background:color-mix(in srgb, var(--akzent, #4f7a28) 16%, var(--flaeche))} ol.rtband li.e1{background:color-mix(in srgb, var(--akzent, #4f7a28) 34%, var(--flaeche))} ol.rtband li.reist{box-shadow:inset 0 -3px 0 var(--warte-tinte, #7A5A16)} ol.rtband li .ikon{width:12px; height:12px; color:var(--warte-tinte, #7A5A16)} p.rtlegende{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 14px; font-size:12px; color:var(--tinte3)} p.rtlegende span{display:inline-block; width:14px; height:14px; border-radius:4px} p.rtlegende span.e0{background:color-mix(in srgb, var(--akzent, #4f7a28) 16%, var(--flaeche))} p.rtlegende span.e1{background:color-mix(in srgb, var(--akzent, #4f7a28) 34%, var(--flaeche))} p.rtlegende .ikon{width:13px; height:13px; color:var(--warte-tinte, #7A5A16)} svg.rtskizze{display:block; width:100%; height:auto; margin:0 0 16px; border-radius:14px; background:var(--flaeche2)} svg.rtskizze line.rtweg{stroke:var(--akzent, #4f7a28); stroke-width:3; stroke-linecap:round} svg.rtskizze line.rtweg.m-zug{stroke-dasharray:8 6} svg.rtskizze line.rtweg.m-faehre{stroke:var(--warte-tinte, #7A5A16); stroke-dasharray:2 6} svg.rtskizze line.rtweg.m-flug{stroke:var(--tinte3); stroke-dasharray:4 8} svg.rtskizze g.rtpunkt circle{fill:var(--flaeche); stroke:var(--akzent, #4f7a28); stroke-width:3} svg.rtskizze text.rtnr{font-size:11px; font-weight:700; fill:var(--tinte)} svg.rtskizze text.rtname{font-size:13px; fill:var(--tinte2); paint-order:stroke; stroke:var(--flaeche2); stroke-width:4px} ol.rtetappen{list-style:none; margin:0 0 14px; padding:0; display:grid; gap:10px} ol.rtetappen > li{padding:12px 14px; border:1px solid var(--linie); border-radius:14px; background:var(--flaeche)} ol.rtetappen .rtkopf{display:flex; align-items:center; gap:10px; flex-wrap:wrap} ol.rtetappen .rtnummer{flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; background:var(--flaeche2); color:var(--tinte)} ol.rtetappen .rtnaechte{margin-left:auto; font-size:13px; color:var(--tinte2); white-space:nowrap} ol.rtetappen p{margin:6px 0 0; font-size:13px; overflow-wrap:anywhere} ol.rtetappen p.rtan{color:var(--tinte2)} ol.rtetappen p.rtquelle{font-size:12px; color:var(--tinte3); font-style:italic} ol.rtetappen .rttun{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin-top:10px} ol.rtetappen .rttun form{display:flex; gap:6px; margin:0} ol.rtetappen button.rtpfeil{min-width:44px; min-height:44px; border:1px solid var(--linie); border-radius:10px; background:var(--flaeche); color:var(--tinte); font-size:16px; cursor:pointer} ol.rtetappen button.rtpfeil:disabled{opacity:.35; cursor:default} details.rtneu{margin:6px 0 0; border-top:1px solid var(--linie)} details.rtneu > summary{min-height:44px; display:flex; align-items:center; cursor:pointer; font-weight:600} form.rtform{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap:12px; align-items:end; margin:6px 0 10px} form.rtform label{display:grid; gap:4px; font-size:13px; color:var(--tinte2); min-width:0} form.rtform label.rtbreit{grid-column:1 / -1} form.rtform input, form.rtform select{min-height:44px; box-sizing:border-box; width:100%; min-width:0; padding:0 10px; border:1px solid var(--linie); border-radius:10px; background:var(--flaeche); color:var(--tinte); font:inherit} form.rtform button{min-height:44px} html body nav.ubkacheln{grid-template-columns:repeat(5, minmax(0,1fr))} form.rtwahl button{white-space:normal; line-height:1.2; overflow-wrap:anywhere; transform:none} ol.rtband li small{font-size:11.5px; color:var(--tinte3); line-height:1} p.rtlegende span.reist{background:var(--flaeche2); box-shadow:inset 0 -3px 0 var(--warte-tinte, #7A5A16)} svg.rtskizze{max-width:640px; margin-left:auto; margin-right:auto} svg.rtskizze text.rtnr{font-size:12px} svg.rtskizze text.rtname{font-size:12px} @container (max-width:520px){ svg.rtskizze text.rtname{display:none} } @container (max-width:700px){ html body nav.ubkacheln > a.ubkachel:last-child:nth-child(odd){grid-column:1 / -1} } @container (max-width:340px){ html body nav.ubkacheln > a.ubkachel:last-child:nth-child(odd){grid-column:auto} } @media (max-width:560px){ html body section.stprognose table.stprog th{font-size:13px} } .vh-tun input[type=text]{ padding:7px 10px; font:inherit; font-size:13px; border:1px solid var(--linie); border-radius:8px; background:var(--flaeche); color:var(--tinte); width:190px; max-width:42vw; } .vh-tun button{ border:0; background:var(--flaeche2); color:var(--tinte); font:inherit; font-size:13px; font-weight:500; padding:8px 14px; border-radius:8px; cursor:pointer; white-space:nowrap; } .vh-tun button.weg{background:transparent; color:var(--tinte3); text-decoration:underline; text-underline-offset:2px; padding:8px 2px} .vh-tun button.weg:hover{color:var(--bad)} /* 29.09.2026: „Ändern" und „Abbrechen" sind Verweise in der Machart von „Verwerfen" — dieselbe Handlung sieht überall gleich aus. */ .vh-tun a.weg{display:inline-flex; align-items:center; min-height:36px; font-size:13px; color:var(--tinte3); text-decoration:underline; text-underline-offset:2px; padding:0 2px} .vh-tun a.weg:hover{color:var(--tinte)} /* Die Karte wird an Ort und Stelle zum Formular: gleiche Felder wie „Neues Vorhaben", nur in der Karte. */ form.vh-form{display:grid; gap:10px; margin:0} form.vh-form .feld{display:flex; flex-direction:column; gap:5px; min-width:0} form.vh-form .feld > span{font-size:12px; color:var(--tinte2)} form.vh-form input[type=text], form.vh-form select, form.vh-form textarea{ width:100%; padding:10px 12px; font:inherit; font-size:14.5px; color:var(--tinte); box-sizing:border-box; background-color:var(--flaeche); border:1px solid var(--linie); border-radius:10px; } form.vh-form select{padding-right:32px} form.vh-form textarea{resize:vertical; line-height:1.5; font-size:14px} form.vh-form input:focus, form.vh-form select:focus, form.vh-form textarea:focus{outline:2px solid var(--akzent); outline-offset:-1px; border-color:var(--akzent)} form.vh-form .vh-zwei{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px} @media (max-width:560px){ form.vh-form .vh-zwei{grid-template-columns:minmax(0,1fr)} } form.vh-form .vh-fuss{margin-top:4px} /* 29.09.2026 gemessen (Prüfstand 375 px, Finger): „Erledigt“ hatte 6 px Luft zum Feld darüber, der Verweis „Ändern“ 36 px Höhe. Zeilenabstand in der Knopfleiste 12 px (Gesetz Knopfluft), Verweise auf dem Telefon 44 px hoch. Und „Eintragen“ war 100 % breit (172 px bei 1180) — jetzt Familienmaß wie jeder Textknopf. */ .vh-tun{gap:12px 10px} .vh-tun form{gap:12px 6px} @media (pointer:coarse){ .vh-tun a.weg{min-height:44px} } .vwform .feld.tun button{width:auto; align-self:flex-start; justify-self:start} /* AUFKLAPPEN AN ORT UND STELLE (Gesetz 16: keine Karotte). Eine Summe, die mehr andeutet, als sie zeigt, oeffnet sich dort, wo sie steht. Dieselbe Form wie „N erledigt" in der Verwaltung: eine Handlung, eine Form. */ details.mehrzeilen{margin-top:10px} details.mehrzeilen summary{ cursor:pointer; font-size:12px; color:var(--tinte2); padding:8px 12px; background:var(--flaeche2); border-radius:9px; list-style:none; display:flex; justify-content:space-between; align-items:center; } details.mehrzeilen summary::-webkit-details-marker{display:none} details.mehrzeilen summary .pfeil{transition:transform .18s ease; color:var(--tinte3)} details.mehrzeilen[open] summary .pfeil{transform:rotate(90deg)} details.mehrzeilen[open] summary{border-radius:9px 9px 0 0} /* Kein seitlicher Rand: die aufgeklappten Zeilen stehen auf denselben Kanten wie die acht davor (gemessen: 2 px Versatz). */ details.mehrzeilen > ul.buliste{padding:0} details.mehrzeilen > ul.buliste li:first-child{border-top:1px solid var(--linie); padding-top:7px} details.erledigte{margin-top:18px} details.erledigte summary{ cursor:pointer; font-size:13px; color:var(--tinte2); padding:11px 15px; background:var(--flaeche); border:1px solid var(--linie); border-radius:11px; display:flex; justify-content:space-between; align-items:center; list-style:none; } details.erledigte summary::-webkit-details-marker{display:none} p.vh-fertig{ display:flex; justify-content:space-between; gap:12px; margin:0; padding:9px 15px; font-size:13px; color:var(--tinte3); border-bottom:1px solid var(--flaeche2); } p.vh-fertig span{white-space:nowrap; font-size:12px} .kopierkasten{margin-top:26px; padding-top:20px; border-top:1px solid var(--linie)} .kopierkasten p{margin:0 0 10px; font-size:12px; line-height:1.55; color:var(--tinte3)} .kopierkasten textarea{ width:100%; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; line-height:1.5; padding:12px; border:1px solid var(--linie); border-radius:10px; background:var(--flaeche2); color:var(--tinte2); resize:vertical; } /* Entwicklungsprotokoll */ article.protokoll{ padding:13px 16px; border:1px solid var(--linie); border-radius:12px; background:var(--flaeche); margin-bottom:9px; } .pr-kopf{display:flex; align-items:baseline; gap:12px} .pr-zeit{font-size:12px; color:var(--tinte3); font-variant-numeric:tabular-nums; white-space:nowrap} .pr-kopf h4{margin:0; font-size:15px; font-weight:600; letter-spacing:-.01em; flex:1; min-width:0} .pr-art{ font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--tinte3); white-space:nowrap; padding:3px 9px; border-radius:999px; background:var(--flaeche2); } article.protokoll.art-befund .pr-art{color:var(--bad)} article.protokoll.art-entscheidung .pr-art{color:var(--akzent)} article.protokoll p{margin:8px 0 0; font-size:13px; line-height:1.55; color:var(--tinte2)} .pr-fuss{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:10px} .pr-fuss > span{font-size:12px; color:var(--tinte3)} .pr-fuss form{margin:0} .pr-fuss button{ border:0; background:transparent; font:inherit; font-size:12px; color:var(--tinte3); cursor:pointer; text-decoration:underline; text-underline-offset:2px; padding:2px; } .pr-fuss button:hover{color:var(--bad)} /* Marke — jede Datei zeigt sich selbst, statt ihren Namen zu nennen */ .markenliste{display:grid; gap:14px; min-width:0} @media (min-width:901px){ .markenliste{grid-template-columns:repeat(2,minmax(0,1fr))} } /* Ein `input type=file` bringt eine eigene Mindestbreite mit, die sich in einem Flexkasten nicht zusammendruecken laesst — gemessen 401 px in einem 390er Fenster. Deshalb auf dem Telefon untereinander, und das Feld darf nie breiter werden als das, worin es steht. */ .markendatei form, .markendatei .md-tun, .markendatei .md-text{min-width:0; max-width:100%} .markendatei input[type=file]{max-width:100%; min-width:0} @media (max-width:560px){ article.markendatei{flex-direction:column; align-items:stretch} .md-bild{flex:0 0 auto; height:72px} } /* ---------------------------------------------------------------- Zeichen Ein Raster, eine Strichstaerke, eine Farbe — die vom Text darueber. Groesse in `em`, damit ein Zeichen immer zu der Schrift passt, neben der es steht, und beim Zoomen mitwaechst statt stehenzubleiben. */ .zeichensatz{position:absolute;width:0;height:0;overflow:hidden} .ikon{ width:1.15em; height:1.15em; flex:0 0 auto; vertical-align:-.2em; overflow:visible; } .ikon.gross{width:1.5em;height:1.5em;vertical-align:-.32em} .ikon.klein{width:1em;height:1em;vertical-align:-.16em} .ikon.matt{opacity:.55} /* Preisstaffel eines Postens */ ol.staffel{ list-style:none; margin:8px 0 0; padding:8px 0 0; border-top:1px dashed var(--linie); display:grid; gap:4px; } ol.staffel li{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--tinte2); } ol.staffel li b{font-variant-numeric:tabular-nums; font-weight:600; min-width:5.5em; text-align:right} ol.staffel li.jetzt{color:var(--tinte)} ol.staffel li.jetzt b{color:var(--akzent)} ol.staffel li.kommt{color:var(--tinte)} ol.staffel li.kommt b{color:var(--akzent)} ol.staffel li.jetzt::after, ol.staffel li.kommt::after{ font-size:12px; letter-spacing:.03em; background:var(--flaeche2); color:var(--tinte2); border-radius:99px; padding:1px 7px; } ol.staffel li.jetzt::after{content:'gilt jetzt'} ol.staffel li.kommt::after{content:'als nächstes'} button.knopfwinzig{ font:inherit; font-size:12px; background:none; border:0; padding:0; color:var(--tinte3); text-decoration:underline; cursor:pointer; } button.knopfwinzig:hover{color:var(--bad)} /* Zeichen in den Kennzahl-Kacheln und Ueberschriften: sie stehen VOR dem Wort, in derselben Farbe wie das Wort, und nehmen sich zurueck — das Zeichen fuehrt das Auge, gelesen wird das Wort. */ .kachel .kt, section.erfkarte h3{display:flex; align-items:center; gap:5px} .kachel .kt .ikon{width:14px; height:14px; opacity:.6; vertical-align:0; margin-top:.5px} section.erfkarte h3 .ikon{width:17px; height:17px; color:var(--akzent); vertical-align:0} .pv-zeichen{ flex:0 0 auto; display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--flaeche2); color:var(--akzent); } .pv-zeichen .ikon{width:19px;height:19px;vertical-align:0} .pv .pv-preis{ margin-top:12px; padding-top:14px; border-top:1px solid var(--linie); display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px 16px; } .pv-preis .feld{flex:0 1 190px; min-width:0} .pv-preis .feld.tun{flex:0 0 auto; align-self:flex-end} .pv-preis .feld.tun button{white-space:nowrap} /* Alle Felder dieses Kastens gleich hoch — sonst stehen die Beschriftungen darueber versetzt, weil ein Monatsfeld niedriger baut als ein Textfeld. */ .pv-preis input{ font:inherit; font-size:15px; box-sizing:border-box; height:42px; width:100%; padding:0 12px; color:var(--tinte); background:var(--flaeche); border:1px solid var(--linie); border-radius:10px; min-width:0; } .pv-preis input:focus{outline:2px solid var(--akzent); outline-offset:-1px; border-color:var(--akzent)} .pv-preis-was{ flex:1 0 100%; margin:0; font-size:13px; line-height:1.5; color:var(--tinte2); display:flex; gap:8px; align-items:flex-start; } .pv-preis-was .ikon{color:var(--akzent); margin-top:2px} .pv-preis-was b{color:var(--tinte)} a.knopfleise.an{background:var(--flaeche2); color:var(--tinte2); border-color:var(--linie)} /* ZUKLAPPEN IST NACHRANGIG (26.09.2026). Chris: „Kalkulation und Änderungen“ und „Zuklappen“ waren beide gefüllte Hauptknöpfe - zu gleichförmig. Aufmachen ist die Handlung, Zuklappen nur der Rückweg: leiser Knopf, gleiche Grösse, gleiche Stelle. */ /* CI (27.09.2026): Chris — „Der Button Doch nicht dieses Jahr ist nicht CI-konform. Er müsste grün sein.“ Knöpfe sind grün gefüllt; rot ist allein dem Entfernen vorbehalten. Gilt für alle „zuklappen“-Knöpfe (Sondertilgung, Urlaub). */ .knopfleise.zuklappen{background:var(--akzent); color:var(--aufakzent, #fff); border-color:var(--akzent)} .knopfleise.zuklappen:hover{background:var(--akzent); color:var(--aufakzent, #fff); filter:brightness(1.06)} /* DIE REITER DER REISE STEHEN FEST (26.09.2026): Dauert das Holen eines Bereichs länger als 150 ms, tritt der alte Bereich leise zurück; kürzer sieht man nichts. */ .ubauf[aria-busy="true"] > nav.ubkacheln ~ *{opacity:.5; transition:opacity .2s ease .15s} /* ---------------------------------------------------------------- Zuordnung */ p.zustand{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:0 0 12px; font-size:13px; color:var(--tinte2); } p.zustand span{display:flex; align-items:center; gap:6px} p.zustand b{font-variant-numeric:tabular-nums; color:var(--tinte); font-weight:600} p.zustand .ikon{width:15px; height:15px; vertical-align:0} p.zustand .zg .ikon{color:var(--gut)} p.zustand .zr .ikon{color:var(--tinte3)} p.zustand .zo .ikon{color:var(--bad)} p.zustand .ztun{margin-left:auto; display:flex; gap:10px; align-items:center; flex-wrap:nowrap} @media (max-width:900px){ p.zustand .ztun{margin-left:0; flex-wrap:wrap} } p.zustand .ztun form{margin:0} p.zustand a{text-decoration:none} .knopfleise.stark{background:var(--akzent); color:var(--aufakzent); border-color:var(--akzent)} p.zerklaerung{margin:0 0 18px; font-size:12px; line-height:1.55; color:var(--tinte3); max-width:78ch} p.zerklaerung b{color:var(--tinte2)} p.zerklaerung em{ font-style:normal; font-size:12px; letter-spacing:.03em; text-transform:uppercase; border:1px solid var(--linie); border-radius:99px; padding:0 6px; } /* ------------------------------------------------------------------ * * DIE THEMENFELDER * * Christian am 12.09.2026: „Ich möchte bei den Zuordnungen eigene * Themenfelder anlegen können ... neu hinzufügen ... löschen ... * umbenennen, so wie mir's mal grade gefällt." * * Der Block liegt zugeklappt über der Zuordnungsliste. Zugeklappt ist * er eine Zeile; offen zeigt er je Feld eine Zeile, und erst hinter * DEREN Aufklapper stehen Eingabefelder. Zwölf offene Formulare * nebeneinander wären eine Wand — so ist immer genau eines offen. * ------------------------------------------------------------------ */ /* Der Ladestreifen des weichen Seitenwechsels. Zwei Pixel, oben, in der Akzentfarbe — das einzige, was sich waehrend des Wartens bewegt. Er erscheint erst nach 140 ms; darunter waere er ein Zucken und kein Hinweis. */ #ladebalken{ position:fixed; top:0; left:0; height:2px; width:0; z-index:9999; background:var(--akzent); border-radius:0 2px 2px 0; transition:width .9s cubic-bezier(.12,.78,.35,1), opacity .24s ease; pointer-events:none; } #ladebalken.laeuft{width:72%} #ladebalken.fertig{width:100%; opacity:0; transition:width .16s ease, opacity .22s ease .1s} @media (prefers-reduced-motion: reduce){ #ladebalken{transition:none} } /* „Wohin der Ueberschuss geht" — die Bruecke zwischen Ergebnis und Kontostand. Ruhig gehalten: Sie erklaert, sie warnt nicht. HIESS ZUERST `.toepfe` — und hat damit die Sektion „Wo unser Geld liegt" (`section.toepfe`) ueberschrieben, die daraufhin zum Flex-Kasten wurde: Ihre Kontokacheln standen in einer schmalen Spalte untereinander, waehrend rechts zwei Drittel der Flaeche leer blieben. Christian am 12.09.2026: „Was hast Du dir denn hier dabei gedacht? Das ist ja ein furchtbares Layout." Zwei Bauteile, zwei Namen — sonst stellt ein Stylesheet eine Regel auf, von der das andere Bauteil nichts weiss. */ .ueberschuss{ display:flex; gap:10px; align-items:flex-start; margin:12px 0 0; padding:12px 15px; background:var(--flaeche2); border-radius:12px; font-size:13px; line-height:1.6; color:var(--tinte2); } .ueberschuss svg{width:16px; height:16px; flex:none; margin-top:2px; color:var(--tinte3)} .ueberschuss b{color:var(--tinte); font-variant-numeric:tabular-nums} /* DIE GESETZE — ruhig gesetzt, wie ein Gesetzestext. Die Nummer traegt die Zeile, das Zitat steht eingerueckt, die Folge darunter in klein. Nichts blinkt hier, nichts ist bunt: Das hier ist der Rahmen, in dem alles andere entsteht. */ .gsvor{margin:0 0 18px; font-size:14.5px; line-height:1.65; color:var(--tinte2); max-width:74ch} .gsliste{display:grid; gap:12px} /* Die Regeln eines Handbuchkapitels: eine Liste, kein Fließtext — man liest sie im Zweifel einzeln nach und nicht am Stück (16.09.2026). */ ul.hbregeln{margin:8px 0 0; padding:0 0 0 18px; display:grid; gap:5px} ul.hbregeln li{font-size:13px; line-height:1.5; color:var(--tinte2)} article.gs{ display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start; padding:16px 18px; background:var(--flaeche); border:1px solid var(--linie); border-radius:14px; } .gsnr{ font-size:24px; font-weight:600; color:var(--tinte3); line-height:1; font-variant-numeric:tabular-nums; text-align:right; padding-top:2px; } .gstext h3{margin:0 0 8px; font-size:15px; font-weight:600; color:var(--tinte)} .gstext blockquote{ margin:0 0 10px; padding:0 0 0 14px; border-left:2px solid var(--akzent); font-size:15px; line-height:1.65; color:var(--tinte); max-width:72ch; } .gsfolge{margin:0 0 6px; font-size:13px; line-height:1.6; color:var(--tinte2); max-width:72ch} .gswann{margin:0; font-size:12px; color:var(--tinte3)} @media (max-width:560px){ article.gs{grid-template-columns:1fr; gap:6px; padding:14px 15px} .gsnr{text-align:left; font-size:17px} } /* GESETZ 5 — „ohne Gruppe" IST der Knopf, nicht nur die Beschriftung. Er sieht aus wie die Marke, die er ersetzt (dieselbe Groesse, dieselbe Farbe), traegt aber die Kennzeichen eines Knopfes: Zeigerhand, ein sichtbarer Rahmen, der auf Beruehrung kraeftiger wird. */ /* GESETZ 5 — „ohne Gruppe" IST der Knopf, nicht nur die Beschriftung. Die Regel muss SPEZIFISCHER sein als das allgemeine `button{}` weiter oben: Das gibt jedem Knopf der Anwendung volle Breite, 16 px Polsterung und die Akzentfarbe — richtig fuer den Anmeldeknopf, falsch fuer eine kleine Marke mitten in einer Zeile. Gemessen am 13.09.2026: Der Knopf war 167 x 51 px gross und dunkelgruen, mitten in der Buchungsliste. */ li.bu .zutun:not(.bupunkt), .butext .zutun, .bufeld .zutun{ font:inherit; font-size:12px; font-weight:500; font-style:normal; letter-spacing:.02em; color:var(--bad); background:transparent; cursor:pointer; width:auto; border:1px solid var(--bad); border-radius:6px; padding:2px 7px; vertical-align:1px; white-space:nowrap; flex:0 0 auto; line-height:1.4; /* 29.09.2026, gemessen bei 375 px: die Marke erbte die Familienbreite (168 px) und drueckte den Namen auf ein Zeichen je Zeile („Möbelhaus Sofa“ 236 px hoch). Die Marke bestimmt ihre Masse selbst. */ --knopf-min:0; --knopf-max:none; --knopf-breit:auto; min-width:0; max-width:none; min-height:0; transition:background .15s ease, color .15s ease; transform:none; } li.bu .zutun:not(.bupunkt):hover, li.bu .zutun:not(.bupunkt):focus-visible, .butext .zutun:hover, .butext .zutun:focus-visible{background:var(--bad); color:var(--aufakzent)} li.bu .zutun:not(.bupunkt):active{transform:none} /* SCHMAL: DER NAME GEHT VOR. GEMESSEN (16.09.2026, 360 px): In einer Zeile mit dem Wort „ohne Gruppe" (86 px) blieben dem Namen noch 75 px — „Rene Muennich Neue Medien Muennich" endete nach zehn Zeichen. Christian hatte die Kuerzung mit „…" verlangt, aber nicht auf Kosten der Lesbarkeit: Ein Name, von dem nur zehn Zeichen stehen, sagt nichts mehr. Unter 760 px traegt die Marke deshalb nur noch ihr Zeichen — einen roten Kreis mit Fragezeichen, dasselbe Zeichen, das die Anwendung fuer „nicht zugeordnet" verwendet. Antippen tut unveraendert dasselbe; die Vorlesehilfe hoert weiterhin „ohne Gruppe". */ @media (max-width:760px){ li.bu .zutun:not(.bupunkt), .bufeld .zutun{ font-size:0; padding:0; width:19px; height:19px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; } li.bu .zutun:not(.bupunkt)::before, .bufeld .zutun::before{ content:'?'; font-size:12px; font-weight:600; line-height:1; } } /* Der Chip „ab Oktober" (Fassung -u) ist wieder weg — Christian, 13.09., ~14:15: „die Chips machen eine Unruhe da hinein". Der Weg ist der Stift am Zeilenende (.bukuenftig). Alte Regeln muessen weg, nicht ueberschrieben. */ li.bu{position:relative} .zufrage{display:none} /* ---- „WOHIN GEHÖRT DAS?" ALS TAFEL (04.10.2026). Chris: „dass das Fenster dann rausfährt … in so einen Dialogbereich, so wie du das jetzt gemacht hast für die Personen, mit einer schönen Maske … für Smartphone … wieder anders." Ein Bauteil: die geheimtafel (Maske mit Unschärfe) wie bei „Person hinzufügen". Schreibtisch: das Blatt gleitet in der Mitte herein. Telefon (≤ 560 px): ein Blatt von unten über die ganze Breite, mit Griff. Kacheln statt Chips, ein Klick speichert. Keine Bewegung beim Überfahren — Rückmeldung nur über Farbe. Vorher: ein Kästchen unter der Zeile (.zuwahl), dessen Regeln hier ersatzlos weg sind. */ html.zutafeloffen{overflow:hidden} .zutafel .geheimtafelgrund{animation:zugrund .22s ease both} .zutafel .zublatt{width:min(600px,100%); padding:22px 22px 24px; animation:zublatt .26s cubic-bezier(.2,.8,.2,1) both} .zutafel.geht .geheimtafelgrund{animation:zugrundweg .2s ease both} .zutafel.geht .zublatt{animation:zublattweg .2s ease both} @keyframes zugrund{from{opacity:0} to{opacity:1}} @keyframes zugrundweg{from{opacity:1} to{opacity:0}} @keyframes zublatt{from{opacity:0; transform:translateY(18px) scale(.98)} to{opacity:1; transform:none}} @keyframes zublattweg{from{opacity:1; transform:none} to{opacity:0; transform:translateY(12px) scale(.985)}} .zublatt .formkopf{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 2px} .zublatt .formkopf h3{margin:0; font-size:21px; letter-spacing:-.01em} .zublatt .zuwas{margin:0 0 18px; font-family:var(--schrift-buchung); font-size:14px; color:var(--tinte2); overflow-wrap:anywhere} .zublatt .zuknoepfe{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap:8px} html body .zublatt .zuknoepfe button{ display:flex; align-items:center; gap:12px; width:100%; min-height:52px; height:auto; margin:0; padding:12px 14px; border:0; border-radius:14px; background:var(--flaeche2); color:var(--tinte); font:inherit; font-size:15px; font-weight:500; line-height:1.3; text-align:left; cursor:pointer; transition:background .14s ease, box-shadow .14s ease; transform:none} html body .zublatt .zuknoepfe button:hover{background:var(--linie); transform:none} html body .zublatt .zuknoepfe button:focus-visible{outline:none; box-shadow:0 0 0 2px var(--akzent)} html body .zublatt .zuknoepfe button.an{background:var(--flaeche); box-shadow:0 0 0 2px var(--akzent) inset} .zublatt .zuknoepfe button i{width:12px; height:12px; border-radius:50%; flex:none} .zublatt .zuname{flex:1 1 auto; min-width:0} .zublatt .zuhaken{flex:none; display:inline-flex; color:var(--akzent)} .zublatt .zuhaken svg{width:18px; height:18px} html body .zublatt .zuknoepfe .zuneu{background:transparent; box-shadow:0 0 0 1px var(--linie) inset; color:var(--tinte2); border:1px dashed transparent} html body .zublatt .zuknoepfe .zuneu::before{content:'+'; width:12px; text-align:center; font-weight:600; color:var(--akzent)} html body .zublatt .zuknoepfe .zuneu:hover{background:var(--flaeche2); color:var(--tinte)} .zuneuform{display:flex; gap:10px; align-items:center; margin-top:12px} .zuneuform[hidden]{display:none} /* GEMESSEN 15.09.2026: `display:flex` schlug das Attribut `hidden` */ .zuneufeld{flex:1 1 auto; min-width:0; min-height:44px; font:inherit; font-size:15px; border:1px solid var(--linie); border-radius:12px; padding:10px 12px; background:var(--flaeche); color:var(--tinte)} .zuneufeld:focus{outline:none; border-color:var(--akzent)} .zuschief{margin:12px 0 0; font-size:13px; color:var(--bad); line-height:1.45} .zublatt.laedt{pointer-events:none} .zublatt.laedt .zuknoepfe{opacity:.55; transition:opacity .14s ease} .zublatt.schief .zuknoepfe{box-shadow:0 0 0 1px var(--bad); border-radius:14px} @media (max-width:560px){ .geheimtafel.zutafel{align-items:flex-end; padding:0} /* zwei Klassen: .geheimtafel steht weiter unten im Blatt und hätte sonst gewonnen */ /* RUHIGER (04.10.2026). Chris: „das schießt förmlich nach oben … ein bisschen verlangsamen … nicht zu langsam." Vorher 0,26 s mit kräftigem Anlauf. Jetzt 0,48 s mit der weichen Kurve, mit der auch iOS seine Blätter hochzieht (schnell los, lang auslaufend) — man sieht das Blatt kommen. Die Maske blendet im selben Takt auf. Zu fährt es in 0,32 s. */ .zutafel .zublatt{width:100%; max-height:min(88dvh, calc(var(--sicht, 100dvh) - 12px)); border-radius:22px 22px 0 0; padding:10px 16px calc(20px + env(safe-area-inset-bottom)); animation:zublattunten .48s cubic-bezier(.32,.72,0,1) both} .zutafel .geheimtafelgrund{animation-duration:.48s} .zutafel.geht .zublatt{animation:zublattuntenweg .32s cubic-bezier(.4,0,1,1) both} .zutafel.geht .geheimtafelgrund{animation-duration:.32s} .zutafel .zublatt::before{content:''; display:block; width:38px; height:5px; border-radius:3px; background:var(--linie); margin:0 auto 12px} .zublatt .zuknoepfe{grid-template-columns:1fr} @keyframes zublattunten{from{transform:translateY(100%)} to{transform:none}} @keyframes zublattuntenweg{from{transform:none} to{transform:translateY(100%)}} } /* ---- DIE NEUE ZEILE IN DER TAFEL (04.10.2026): „Neue Ausgabe" / „Neue Einnahme". Dieselbe Tafel wie „Wohin gehört das?", die Felder untereinander, groß genug für den Finger; Wann und Wie oft als Segmentleisten über die ganze Breite. */ .neublatt .neufeld{display:flex; flex-direction:column; gap:6px; margin:0 0 14px} .neublatt .neufeld[hidden]{display:none} .neublatt .neufeld > span:first-child, .neublatt .brwas{font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinte3)} .neublatt .neutext, .neublatt .neuwertfeld, .neublatt .neutagfeld{width:100%; min-height:48px; font:inherit; font-size:16px; border:1px solid var(--linie); border-radius:12px; padding:11px 14px; background:var(--flaeche); color:var(--tinte); box-sizing:border-box} .neublatt .neutext{font-family:var(--schrift-buchung)} .neublatt .neutext:focus, .neublatt .neuwertfeld:focus, .neublatt .neutagfeld:focus{outline:none; border-color:var(--akzent); box-shadow:0 0 0 3px color-mix(in srgb, var(--akzent) 18%, transparent)} .neublatt .neuwert{position:relative; display:block; max-width:220px} .neublatt .neuwertfeld{padding-right:36px; text-align:right; font-variant-numeric:tabular-nums} .neublatt .neuwert i{position:absolute; right:14px; top:50%; transform:translateY(-50%); font-style:normal; color:var(--tinte3)} .neublatt .neutag{max-width:160px} .neublatt .neurhythmus .burhythmus{display:flex; flex-direction:column; align-items:stretch; gap:14px; padding:0; margin:0 0 14px} .neublatt .burhythmus .brwann, .neublatt .burhythmus .brwie{display:flex; flex-direction:column; align-items:stretch; gap:6px; margin:0; min-width:0; max-width:100%} html body .neublatt .brpillen{min-width:0; max-width:100%} /* die Familienbreite der Knöpfe (min-width 168 px) gilt hier nicht — gemessen: sonst 858 px in 556 px */ html body .neublatt .brpillen{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:3px; padding:3px; border-radius:12px; background:var(--flaeche2)} html body .neublatt .brwie .brpillen{grid-auto-flow:row; grid-template-columns:repeat(5, 1fr)} html body .neublatt .brpille{width:100%; min-width:0 !important; max-width:none !important; min-height:40px; height:auto; margin:0; padding:8px 6px; border-radius:9px; font-size:13.5px; white-space:normal; text-align:center; background:transparent; color:var(--tinte2); transform:none} html body .neublatt .brpille:hover{color:var(--tinte); background:color-mix(in srgb, var(--flaeche) 60%, transparent)} html body .neublatt .brpille.an{background:var(--flaeche); color:var(--tinte); box-shadow:0 1px 3px rgba(0,0,0,.12)} .neublatt .brbis{display:flex; align-items:center; gap:10px; font-size:13px} .neublatt .brbis[hidden]{display:none} .neublatt.laedt{pointer-events:none} .neublatt.laedt .neufeld, .neublatt.laedt .neurhythmus{opacity:.55} @media (max-width:560px){ html body .neublatt .brwie .brpillen{grid-template-columns:repeat(3, 1fr)} .neublatt .neuwert{max-width:none} } li.bu.frischzu{animation:frischzu 1.1s ease} @keyframes frischzu{0%{background:var(--flaeche2)} 100%{background:transparent}} @media (prefers-reduced-motion: reduce){ .zutafel .geheimtafelgrund, .zutafel .zublatt{animation:none !important} li.bu.frischzu{animation:none} } /* DAS ZIEHEN DES DASHBOARDS. `#blatt` wird zur Spalte, damit `order` greift — die Blocktrennung uebernehmen feste Abstaende statt zusammenfallender Aussenabstaende, sonst verdoppeln sie sich im Flex-Kontext. Alles, was keinen Block bildet (Markenband, Kopfzeile, Abrufleiste), behaelt order:0 und bleibt oben; der Quellenhinweis steht mit order:99 immer unten. */ /* DAS BLATT IST EIN RASTER AUS ZWEI SPALTEN. Christian am 13.09.2026: „Ich kann's nach oben, nach unten. Ich kann's aber auch nach links und rechts, sodass es gewisse Layouts der Seite gibt." Ein Block ueber die ganze Breite spannt beide Spalten, ein halber nur eine — zwei halbe hintereinander stehen damit nebeneinander. Kein Spaltenmodell, das man erst verstehen muesste: Man zieht einen Block zur Seite, und er wird halb. Unter 900 px gibt es nur eine Spalte. Nebeneinander waere dort nichts mehr lesbar, und ein Layout, das man auf dem Telefon nicht halten kann, ist kein Layout. */ /* FEINER: VIER SPALTEN. Christian am 13.09.2026: „Ich will da eine Rasterung auch haben, die feiner rastern kann … Ich möcht's mehr hin- und herschieben, wie ich's halt haben möchte im Design." Jeder Block spannt 1 bis 4 Viertel (`data-breite`). Bloecke fuellen die Reihe von links; was nicht mehr passt, beginnt die naechste. Ein ganzer Block (4) beginnt immer in Spalte 1. Unter 1180 px wird ein Viertel zur Haelfte (ein Viertel von 900 px sind 200 px — dort steht keine Zahl mehr lesbar); unter 900 px gibt es eine Spalte, und die Reihenfolge bleibt. */ #blatt{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:26px; align-items:start; } #blatt > *{order:0; margin-top:0; margin-bottom:0; grid-column:1 / -1} #blatt > [data-breite="1"]{grid-column:span 1} #blatt > [data-breite="2"]{grid-column:span 2} #blatt > [data-breite="3"]{grid-column:span 3} #blatt > p.quelle{order:99} /* ================================================================== DER Widget-Park (16.09.2026) Christian: „jedes Modul muss in eine Art Ansicht haben in einem Park, den ich mal rausziehen kann, weil ich ihn gerade nicht anzeigen will, oder ich möchte ihn reinziehen, weil ich ihn anzeigen möchte." Geparkt heisst Breite 0. Der Block BLEIBT in der Seite — mit allem, was er kann —, er wird nur nicht gezeigt; sein Name steht im Park, ein Knopf holt ihn zurueck. Nichts wird geloescht. ================================================================== */ #blatt > [data-breite="0"]{display:none} #blatt > .Widget-Park{grid-column:1 / -1} @media (max-width:1180px){ #blatt > [data-breite="1"]{grid-column:span 2} } @media (max-width:900px){ #blatt{grid-template-columns:minmax(0, 1fr); gap:20px} #blatt > [data-breite="1"], #blatt > [data-breite="2"], #blatt > [data-breite="3"]{grid-column:1 / -1} } [data-block]{position:relative} /* ================================================================ * * DER Widget-Park ALS SCHUBLADE VON RECHTS (16.09.2026) * * Christian: „Go für den Widget-Park Schnellzugang." * * Der Park stand bis dahin ganz unten auf dem Blatt. Das ist die * falsche Stelle: Wer ein Modul zurueckholen will, weiss gerade NICHT, * wo es ist — er muss an allen Modulen vorbei, um zu sehen, was fehlt. * Und wer ein Modul hinausstellt, sieht nicht, wohin es geht. * * Jetzt faehrt er von rechts herein, wie der Inspektor am Mac: Der Weg * steht oben rechts neben Verwaltung und Abmelden, Escape schliesst, * und wer ein Modul in den Park stellt, dem geht er von selbst auf — * damit niemand sein Modul sucht (Gesetz „Nie mit Fragezeichen * zurücklassen"). * * Er LEGT SICH DARUEBER, statt das Blatt zu verschieben: Ein Blatt, * das beim Aufziehen umbricht, waere genau das Springen, das Christian * am 15.09. abgestellt haben wollte („Es muss Ruhe haben"). Die Module * bleiben stehen, wo sie stehen — man zieht sie in die Schublade und * wieder heraus, ohne dass sich darunter etwas bewegt. * ================================================================ */ .Widget-Park{ position:fixed; top:0; right:0; z-index:70; width:min(360px, 88vw); max-width:100%; height:100dvh; margin:0; border:0; border-left:1px solid var(--materialrand); border-radius:0; background:color-mix(in srgb, var(--grund) 88%, transparent); -webkit-backdrop-filter:saturate(180%) blur(22px); backdrop-filter:saturate(180%) blur(22px); box-shadow:-24px 0 60px -30px rgba(60,45,30,.45); padding:calc(16px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:12px; overflow-y:auto; overscroll-behavior:contain; transform:translateX(101%); transition:transform .32s cubic-bezier(.32,.72,0,1), visibility 0s linear .32s; visibility:hidden; } body.parkoffen .Widget-Park{transform:none; visibility:visible; transition:transform .32s cubic-bezier(.32,.72,0,1), visibility 0s} @media (prefers-reduced-motion:reduce){ .Widget-Park{transition:none} body.parkoffen .Widget-Park{transition:none} } /* Der Kopf der Schublade traegt den Weg hinaus — ein Wort, kein Raetsel. */ .mpzu{ font:inherit; font-size:13px; font-weight:600; width:auto; margin-left:auto; border:0; border-radius:10px; padding:6px 12px; cursor:pointer; background:var(--flaeche2); color:var(--akzent); } .mpzu:hover{background:var(--akzent); color:var(--aufakzent)} .Widget-Park h2.mpkopf{width:100%} ul.mpliste{flex-direction:column; align-items:stretch} li.mpstueck{justify-content:space-between} /* Solange die Schublade offen ist, sagt der Knopf oben, dass sie offen ist. */ .kopfknopf.kopfpark[aria-expanded="true"]{background:var(--akzent); color:var(--aufakzent); border-color:var(--akzent)} .kopfknopf.kopfpark[aria-expanded="true"] .ikon{color:currentColor} .Widget-Park h2.mpkopf{ margin:0; display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--tinte2); } .Widget-Park h2.mpkopf .ikon{width:18px; height:18px; color:var(--tinte3)} .mpsatz{margin:0; font-size:12px; line-height:1.55; color:var(--tinte3); max-width:78ch} .mpwort{color:var(--tinte2); font-weight:600} ul.mpliste{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px} ul.mpliste:empty{display:none} li.mpstueck{ display:flex; align-items:center; gap:10px; background:var(--flaeche); border:1px solid var(--linie); border-radius:12px; padding:8px 8px 8px 12px; } li.mpstueck .mpname{font-size:13px; font-weight:500; color:var(--tinte)} button.mpholen{ font:inherit; font-size:12px; font-weight:500; width:auto; border:0; border-radius:9px; padding:6px 11px; cursor:pointer; background:var(--flaeche2); color:var(--akzent); transition:background .16s ease, color .16s ease; } button.mpholen:hover{background:var(--akzent); color:#fff} .mpleer{margin:0; font-size:12px; color:var(--tinte3); font-style:normal} .mpleer[hidden]{display:none} /* Waehrend ein Block gezogen wird, sagt der Park, dass er ihn nimmt. */ body.ziehtort .Widget-Park{border-color:var(--akzent); border-style:solid} .Widget-Park.mpziel{background:var(--flaeche); box-shadow:0 0 0 2px var(--akzent) inset} @media (max-width:560px){ .Widget-Park{padding:14px} } /* DER GRIFF — eine Kapsel, kein Kasten. Christian am 12.09.2026: „Das ist nicht sehr elegant ... es gibt bessere Visualisierungen." Die erste Fassung war ein eckiges Kaestchen mit Schrift-Dreiecken, das links oben in die Ecke des Blocks stiess. Jetzt: eine schwebende Kapsel oben RECHTS — dort steht keine Ueberschrift im Weg —, milchig hinterlegt, mit drei gleich gezeichneten Zeichen. Sie liegt AUF dem Block statt daneben und nimmt ihm keine Kante. */ /* DIE KAPSEL REITET AUF DER OBERKANTE — sie liegt ueber NICHTS. BEFUND vom 13.09.2026 (Christians Bild): „Die Monatsschaltung wird ueberdeckt durch diese Tabellensteuerung … kann so nicht bleiben." Bei top:10px lag die Kapsel im Block genau ueber dem Pfeil „naechster Monat". Jetzt sitzt sie zur Haelfte AUSSERHALB des Blocks, auf seiner Oberkante: 32 px hoch, 16 px ragen in den Abstand zum vorigen Block (26 px), 16 px in die eigene Polsterung (>= 18 px) — beides Flaechen ohne Bedienelement. Gemessen mit pruef/kapsel.js auf 390/834/1180/1440 px. */ .ziehgriff{ position:absolute; top:-16px; right:18px; z-index:8; display:inline-flex; align-items:center; gap:1px; padding:2px; border-radius:999px; background:color-mix(in srgb, var(--flaeche) 82%, transparent); box-shadow:0 1px 2px rgba(15,30,31,.06), 0 6px 18px rgba(15,30,31,.10), inset 0 0 0 1px color-mix(in srgb, var(--linie) 70%, transparent); backdrop-filter:blur(10px) saturate(1.3); -webkit-backdrop-filter:blur(10px) saturate(1.3); opacity:0; transform:translateY(-3px) scale(.96); transform-origin:top right; transition:opacity .18s cubic-bezier(.22,.61,.36,1), transform .18s cubic-bezier(.22,.61,.36,1); } [data-block]:hover > .ziehgriff, [data-block]:focus-within > .ziehgriff{opacity:1; transform:none} /* Auf Geraeten ohne Mauszeiger gibt es kein „darueberfahren" — dort steht der Griff immer da, nur zurueckhaltender. Sonst waere die Anordnung dort gar nicht erreichbar. */ @media (hover: none){ .ziehgriff{opacity:.7; transform:none} } .ziehgriff button, .ziehgriff .zgpunkte{ --knopf-min:0; --knopf-max:none; --knopf-breit:28px; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex:0 0 auto; border:0; border-radius:999px; background:transparent; color:var(--tinte3); cursor:pointer; padding:0; transition:background .14s ease, color .14s ease; } .ziehgriff button:hover, .ziehgriff button:focus-visible{background:var(--flaeche2); color:var(--tinte)} .ziehgriff button:active{transform:scale(.92)} .ziehgriff svg{display:block} .ziehgriff .zgpunkte svg circle{fill:currentColor} /* Der Greifpunkt braucht Flaeche: gemessen beim ersten Versuch schrumpfte er im Flex-Griff auf 4,8 px und war mit der Maus kaum, mit dem Finger gar nicht zu treffen. 28 px sind Apples Mass fuer eine kleine Trefferflaeche. */ .zgpunkte{cursor:grab; touch-action:none} /* Der Breiten-Knopf zeigt, was er tut: Bei ganzer Breite steht die Trennlinie im Kasten (er wuerde geteilt), bei halber verschwindet sie (er wuerde zusammengefuehrt). */ /* Der Breiten-Knopf zeigt die Breite, die der Block HAT: Der gefuellte Anteil im Kaestchen ist sein Anteil an der Seite (1/4 … 4/4). */ .zgbreit .zgfuell{transition:width .15s ease} .zgpunkte:hover{background:var(--flaeche2); color:var(--tinte)} body.ziehtwas{user-select:none; cursor:grabbing} body.ziehtwas .zgpunkte{cursor:grabbing} /* Die Kante zum Breiteziehen: ein schmaler Streifen an der rechten Blockkante, sichtbar beim Ueberfahren, ab 900 px (darunter gibt es nur eine Spalte). */ .zgkante{ position:absolute; top:14px; bottom:14px; right:-3px; width:10px; border-radius:5px; cursor:ew-resize; touch-action:none; opacity:0; transition:opacity .16s ease; background:linear-gradient(90deg, transparent 0 3px, var(--tinte3) 3px 5px, transparent 5px); } /* 26.09.2026 ENTFERNT (Chris: "beim Mouse-Over ... rechts aussen so ein komischer Strich ... bei allen Modulen ... macht nur Unruhe. Einheitlich draussen"). Die Breite eines Moduls stellt der Breiten-Knopf in der Werkzeugleiste ein. */ .zgkante{display:none} [data-block]:hover > .zgkante, body.ziehtbreite .zgkante{opacity:.55} .zgkante:hover, body.ziehtbreite .ziehtgerade > .zgkante{opacity:1; background:linear-gradient(90deg, transparent 0 3px, var(--akzent) 3px 5px, transparent 5px)} @media (max-width:900px){ .zgkante{display:none} } body.ziehtort .ziehtgerade{z-index:5; box-shadow:0 12px 32px rgba(15,30,31,.16)} body.ziehtwas .ziehgriff{opacity:1; transform:none} /* DIE MODULSTEUERUNG KOLLIDIERT NIE (26.09.2026). Chris am Telefon: „es überlappen hier Steuerungssymbole von den Modulen mit bestehenden Systemeinstellungen. Das geht so nicht … die musst du anderweitig aufhängen, aber nicht so, dass sie kollidieren können.“ GEMESSEN: Ohne Mauszeiger (hover:none) stand die Leiste immer da (Deckkraft .7), absolut 16 px über der Modulkante und rechts auf dem Modul - mitten auf dessen eigenen Knöpfen (Monatspfeil, Zahnrad, Plus). Am Rechner dasselbe beim Überfahren. Jetzt wie beim iPhone-Home-Bildschirm: Die Steuerung erscheint NUR im Modus „Module ordnen“ (Knopf oben, body.parkoffen) bzw. während gezogen wird - und dann nicht darüber gelegt, sondern im Fluss als eigene Zeile oben rechts im Modul, mit eigenem Platz. Nur die Modul-Griffe ([data-block] > .ziehgriff), nicht die Zeilengriffe in Listen. */ [data-block] > .ziehgriff{display:none} body.parkoffen [data-block] > .ziehgriff, body.ziehtwas [data-block] > .ziehgriff{display:flex; position:relative; top:auto; right:auto; width:max-content; margin:0 0 14px auto; opacity:1; transform:none} /* Waehrend ein Block wandert, treten die anderen zurueck: Sie bewegen sich weich an ihren neuen Platz, statt zu springen. */ body.ziehtwas #blatt > [data-block]:not(.ziehtgerade){ transition:transform .22s cubic-bezier(.22,.61,.36,1); } [data-block].ziehtgerade{ outline:2px solid var(--akzent); outline-offset:5px; border-radius:16px; opacity:.97; z-index:20; position:relative; box-shadow:0 18px 44px rgba(15,30,31,.18); } [data-block].frischhin{animation:frischhin .9s ease} @keyframes frischhin{ 0%{outline:2px solid var(--akzent); outline-offset:5px} 100%{outline:2px solid transparent; outline-offset:5px} } /* DER HINWEIS KOMMT SOFORT. Christian am 13.09.2026: „Wenn ich mit der Maus auf das Icon gehe, auf den Haken, kommt der Hinweistext viel zu spät, der muss viel früher reinkommen." Der Browser zeigt ein `title` erst nach etwa einer Sekunde, in seiner eigenen Schrift und Farbe — beides ist nicht unseres. Deshalb zeichnet die Anwendung ihre Hinweise selbst: nach 120 ms, in der Schrift der Seite, als dunkle Kapsel ueber dem Zeichen. Das `title` bleibt im Quelltext (Vorlesen, Suchen) und wird beim Zeigen nur kurz beiseitegelegt, damit der Browser nicht doch noch seins darueberlegt. */ .tipp{ position:fixed; z-index:9999; max-width:min(320px, calc(100vw - 24px)); padding:6px 10px; border-radius:9px; background:var(--tinte); color:var(--flaeche); font-size:12px; line-height:1.4; letter-spacing:.005em; text-wrap:balance; box-shadow:0 6px 18px rgba(15,30,31,.18); opacity:0; transform:translateY(3px); pointer-events:none; transition:opacity .12s ease, transform .12s ease; } .tipp.da{opacity:1; transform:none} .tipp.unten{transform:translateY(-3px)} .tipp.unten.da{transform:none} @media (prefers-reduced-motion: reduce){ .tipp{transition:none} } .ziehnote{ position:fixed; left:50%; bottom:26px; transform:translate(-50%, 12px); z-index:9998; padding:9px 16px; border-radius:999px; background:var(--tinte); color:var(--flaeche); font-size:13px; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; } .ziehnote.da{opacity:1; transform:translate(-50%, 0)} @media (prefers-reduced-motion: reduce){ .ziehgriff, .ziehnote{transition:none} [data-block].frischhin{animation:none} } /* DIE TAGESLISTE SPRENGT DAS RASTER NICHT MEHR. Christian am 12.09.2026: „Das Layout der Seite wird hier völlig gesprengt. Durch diese ganzen Buchungen rechts kann ich doch nichts anfangen ... Das sprengt mir das gesamte Dashboard." Er hat recht: Bei 31 Tagen mit Bewegung wurde die dritte Spalte dreimal so hoch wie die beiden anderen, und links stand ein Loch von ueber tausend Pixeln. Jetzt hat sie eine Hoechsthoehe, scrollt in sich selbst und klebt beim Blaettern am oberen Rand — der Monatsblock ist damit so hoch wie sein Inhalt und nicht so hoch wie seine laengste Liste. */ @media (min-width:1181px){ .raster .rechts{ position:sticky; top:14px; max-height:calc(100vh - 40px); display:flex; flex-direction:column; min-height:0; } .raster .rechts > h2.abschnitt{flex:0 0 auto} .raster .rechts > ol.tage{ overflow-y:auto; overscroll-behavior:contain; min-height:0; padding-right:4px; margin-right:-4px; /* Der Rand blendet aus, statt hart abzuschneiden — man sieht, dass es weitergeht, ohne dass eine Linie quer durch eine Zeile laeuft. */ mask-image:linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%); -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%); } .raster .rechts > ol.tage::-webkit-scrollbar{width:7px} .raster .rechts > ol.tage::-webkit-scrollbar-thumb{ background:var(--linie); border-radius:99px; } .raster .rechts > ol.tage::-webkit-scrollbar-track{background:transparent} } /* DIE GEGENUEBERSTELLUNG IM MONATSBLOCK. Sie steht jetzt dort, wo man den Monat liest — unter den vier Kacheln, offen, ueber die volle Breite des Mittelteils. */ .mitte > details.gegen{ margin:18px 0 0; border:var(--karterand); border-radius:var(--karteradius); box-shadow:var(--karteschatten); background:var(--flaeche); overflow:visible; } /* KEIN `overflow:hidden` AN DER GEGENÜBERSTELLUNG. BEFUND vom 15.09.2026 (Christians Bild, September 2026): Das Fenster „Wohin gehört …?“ an einer Zeile weit unten wurde an der Unterkante des Blocks abgeschnitten — die Knöpfe darunter waren nicht erreichbar, nichts ließ sich scrollen. Gemessen: `details.gegen` trug `overflow:hidden` (für die runden Ecken); das schneidet alles ab, was in ihm hängt und über ihn hinausragt. Die runden Ecken braucht nur die Überschrift beim Überfahren — sie bekommt ihren eigenen Radius. Dazu öffnet sich das Fenster nach OBEN, wenn unten kein Platz ist (.zuwahl.oben). */ .mitte > details.gegen > summary{border-radius:17px} .mitte > details.gegen[open] > summary{border-radius:17px 17px 0 0} .mitte > details.gegen > summary{padding:15px 18px} .mitte > details.gegen .ggraster{padding:14px 18px 4px} /* ================================================================== * * DIE ARBEITSFLÄCHE — Felder, die wie Text aussehen * * Christian am 12.09.2026: „Ich klicke einfach rein und ändere die * Bezeichnung ... Das ist die Usability, die wir haben wollen." * * Der Grundsatz: Solange man nicht hineinklickt, ist es eine Liste. Kein * Rahmen, kein Kasten, keine Andeutung von Formular. Erst die Berührung * zeigt, dass hier etwas geht — beim Darüberfahren ein heller Grund, beim * Hineinklicken ein Rahmen in der Akzentfarbe. Eine Liste aus dreißig * umrandeten Feldern wäre ein Formular, und ein Formular liest niemand. * ================================================================== */ ol.buliste li.bu{ /* Feste Spalten: Tag, Punkt, Bezeichnung, Betrag, Kreuz. Der Betrag hat IMMER dieselbe Breite — auch in gebuchten Zeilen, die kein Kreuz haben; dort steht an seiner Stelle nichts, aber der Platz bleibt. Sonst wandert die Zahlenkante von Zeile zu Zeile. */ grid-template-columns:var(--butag) 9px 14px minmax(0,1fr) 122px 26px; align-items:center; gap:8px; padding:3px 2px; min-height:34px; } li.bu input{ font:inherit; font-size:14.5px; color:var(--tinte); background:transparent; border:1px solid transparent; border-radius:7px; padding:4px 6px; margin:0; width:100%; min-width:0; transition:background .13s ease, border-color .13s ease; } li.bu input::placeholder{color:var(--tinte3)} li.bu:hover input:not(:focus){background:var(--flaeche2)} li.bu input:focus{ outline:none; background:var(--flaeche); border-color:var(--akzent); box-shadow:0 0 0 3px color-mix(in srgb, var(--akzent) 16%, transparent); } li.bu input.butag{text-align:left; font-size:12px; color:var(--tinte3); padding:4px 0 4px 3px; width:calc(100% - 6px)} /* Der Punkt hinter dem Tag steht bei offenen Zeilen genauso wie bei gebuchten („13." statt „13") — Christian: „das ist nicht logisch". */ /* 44 px: Platz fuer „26.8." — Tage aus dem Vormonat des Blatts tragen ihren Monat, in offenen Zeilen genauso wie in gebuchten (eine Regel, eine Form). */ /* DATUMSSPALTE - EINE QUELLE (26.09.2026, gemessen, nicht geschaetzt). Inhalt: Tag-Eingabe 22px + Monatszusatz in Plex Mono 12px (7,2px je Zeichen). Hoechstfall "30.12." = 22 + 28,8 = 50,8px. Frueher 44px am Schreibtisch (".12." ragte 7px heraus) und 28px am Telefon (schon "30." ragte heraus, "30.9." lag auf dem Farbpunkt - Chris, Telefonbild und verkleinertes Fenster 26.09.2026). Jetzt EINE Breite fuer Spalte und Feld, an jeder Fensterbreite: kein Datum kann je den Punkt beruehren. */ .ggseite, ol.buliste{--butag:52px} li.bu .butaghuelle{display:inline-flex; align-items:center; justify-content:flex-start; width:var(--butag, 52px); font-size:12px; color:var(--tinte3); font-family:var(--schrift-buchung)} li.bu .butaghuelle input.butag{width:2ch; margin:0; flex:0 0 auto} li.bu .butaghuelle i{font-style:normal; white-space:nowrap} /* DAS DATUM STEHT LINKSBÜNDIG — IN JEDER ZEILE AN DERSELBEN KANTE (30.09.2026). Chris: „Den Datumsbereich … das flattert. Die müssen immer untereinander stehen. Das Datum kannst du immer linksbündig setzen … global für die Webseite.“ Gemessen: Gebuchte Zeilen (Text) begannen bei 85 px, planbare Zeilen (Tagfeld + „.MM.“) bei 79 px — 6 px Versatz. Ursache: beide rechtsbündig, das Tagfeld-Paar (22 px Feld + „.10.“) war breiter als seine Hülle und lief nach links hinaus. Jetzt: beide linksbündig, erste Ziffer bei Hüllenkante + 4 px (Text: 4 px Innenabstand; Tagfeld: 1 px Rand + 3 px Innenabstand, Feld ohne Innenabstand, zwei Ziffern breit). Der Datumswächter „datumskante“ misst das auf jeder Seite. */ li.bu span.butag{text-align:left; font-size:12px; color:var(--tinte3); padding:4px 0 4px 4px} li.bu input.butag:focus{color:var(--tinte)} /* BEZEICHNUNG UND MARKE IN EINER ZEILE. Christian am 13.09.2026: „Ohne Gruppe, das muss ein kleiner Hinweis sein an der Stelle, direkt hinter Dauerauftrag, und nicht in den Rahmen so springen." `flex-wrap:nowrap` haelt die Marke neben dem Text; der Text schrumpft stattdessen und bekommt drei Punkte, wenn es eng wird. Eine Marke, die umbricht, macht aus einer 34 px hohen Zeile eine 58 px hohe — und die Liste sieht aus, als haette sie Schluckauf. */ /* DER NAME GIBT NICHT UNTER 18 ZEICHEN NACH — die Marken weichen. BEFUND vom 13.09.2026 (Christians Telefonbild „Rene Muennich Neue Medien", ein Buchstabe je Zeile, „AUTOVERSICHE-RUNG"): Zwei Marken („ohne Gruppe", „ab Oktober") standen mit dem Namen in EINER Zeile ohne Umbruch; `overflow-wrap:anywhere` machte die Mindestbreite des Namens zu einem Zeichen, und die Marken drueckten ihn dorthin. Jetzt: Der Name behaelt mindestens 18 Zeichen Breite, die Marken brechen bei Platzmangel unter ihn. Ein Wort bricht nur noch, wenn es allein breiter ist als die Zeile. */ li.bu .bufeld{display:flex; align-items:center; gap:4px 7px; min-width:0; flex-wrap:wrap} li.bu .bufeld input.butext{flex:1 1 auto; min-width:0} li.bu .bufeld{flex-wrap:nowrap; overflow:hidden} /* Die Buchungszeile in der Buchungsschrift — Tag, Name, Betrag; Marken und Knöpfe bleiben Systemschrift (sie sind Bedienung, keine Buchung). Ein halbes Pixel kleiner, weil eine Monospace bei gleicher Größe breiter läuft. */ li.bu .butag, li.bu input.butag, li.bu .butaghuelle, li.bu .butext, li.bu input.butext, li.bu .buwert, li.bu input.buwert, li.bu .buwertfeld, .ggsumme b, .ggseite h3 .buwertfeld{font-family:var(--schrift-buchung); letter-spacing:0} li.bu input.butext, li.bu .bufeld > .butext{font-size:13px} /* Die Felder der Zeile sind so hoch wie noetig, um sie zu treffen (16.09.2026 gemessen: 27 px). Sie bleiben deutlich unter der Knopfskala — die Zeile selbst ist der Griff, und eine Buchungsliste mit 44 px hohen Feldern waere keine Liste mehr (Befund „Schluckauf" vom 13.09.2026). */ li.bu input.butag, li.bu input.butext, li.bu input.buwert{min-height:30px} li.bu input.buwert, li.bu b.buwert{font-size:13px} /* Haushalt und „Wirklich gebucht": dieselbe Schrift für dieselbe Sache. */ ul.hhbu .bu-tag, ul.hhbu .bu-name, ul.hhbu .bu-betrag, ul.hhbu .bugruppe, ul.buliste .bu-tag, ul.buliste .bu-was, ul.buliste .bu-betrag, .posten .was, .posten .betrag{font-family:var(--schrift-buchung); letter-spacing:0} ul.hhbu .bu-name{font-size:13px} ul.buliste .bu-was, ul.buliste .bu-betrag{font-size:12px} /* Marken und Knoepfe in einer Buchungszeile sind Bedienung, keine Buchung: sie behalten die Systemschrift, auch wenn sie im Namen stehen. */ li.bu .zutun, ul.hhbu .bu-name .zutun, ul.hhbu .bugruppe, .zublatt{font-family:var(--schrift)} /* DER NAME ENDET VOR DER ZAHL — mit drei Punkten (16.09.2026). Christian: „Wenn eine Bezeichnung zu lang ist, dann läuft sie plötzlich in die Icons rein und in den Kostenbereich rein. Das darf nicht passieren … Es muss vorher abgebrochen werden mit Punkt, Punkt, Punkt, rechtzeitig, bevor die Zahl anfängt … Wenn ich dann Mouse-Over gehe oder reinklicke, dann sehe ich natürlich den gesamten Text." Das ersetzt die Regel vom 13.09.2026 („Alles, was abgeschnitten ist, darf nicht sein"), die den Namen umbrechen und die Zeile zweireihig werden liess. Christian hat sie an diesem Tag selbst aufgehoben: Eine Liste, in der jede lange Zeile doppelt so hoch wird, liest sich schlechter als eine, die kuerzt und den vollen Text auf Wunsch zeigt. DER VOLLE TEXT bleibt erreichbar: als Hinweis beim Darueberfahren (title, in der eigenen Kapsel) und beim Hineinklicken (das Feld scrollt dann durch den ganzen Text). */ li.bu .bufeld > .butext{ flex:1 1 auto; min-width:0; padding:4px 6px; display:block; white-space:nowrap; overflow:hidden; text-overflow:" …"; line-height:1.3; } li.bu .bufeld input.butext{ white-space:nowrap; overflow:hidden; text-overflow:" …"; } /* Im Feld selbst: beim Tippen und beim Hineinklicken kein Kuerzen — dort gehoert der ganze Text hin, und das Feld scrollt mit dem Zeiger. */ li.bu .bufeld input.butext:focus{text-overflow:clip} li.bu .bufeld > .butext > span.butextwort{min-width:0; white-space:normal} /* DAS EURO-ZEICHEN STEHT HINTER DEM FELD, nicht darin. Im Feld muesste es beim Tippen jedes Mal weggeloescht und wieder hinzugefuegt werden — und wer es stehen laesst, bekommt eine Zahl, die nicht mehr lesbar ist. Daneben gesetzt steht es immer richtig und stoert die Eingabe nie. */ li.bu{position:relative} /* ALLE BETRAEGE AUF DERSELBEN KANTE. Christian am 13.09.2026: „Die Nachkommastellen, alles muss untereinander sein. Das ist nicht in einer Ebene und das springt dann. Das darf nicht passieren." Er hat recht, und die Ursache war handwerklich: Gebuchte Zeilen zeigten den Betrag als Text mit Euro-Zeichen, Planzeilen als Eingabefeld ohne — zwei verschiedene Breiten in derselben Spalte. Jetzt tragen BEIDE dieselbe Huelle mit fester Breite, dieselbe rechtsbuendige Ausrichtung und dieselben Ziffern fester Laufweite (`tabular-nums`). Das Euro-Zeichen steht ausserhalb des Feldes und damit in jeder Zeile an derselben Stelle. */ li.bu .buwertfeld{ display:inline-flex; align-items:center; justify-content:flex-end; gap:4px; justify-self:end; width:122px; flex:0 0 auto; } li.bu .buwertfeld::after{ content:'€'; font-size:13px; color:var(--tinte3); flex:0 0 auto; width:9px; text-align:right; } li.bu input.buwert, li.bu b.buwert{ text-align:right; font-variant-numeric:tabular-nums; font-weight:500; width:100%; min-width:0; padding:4px 2px 4px 6px; } /* EINE ZIFFERNKANTE (26.09.2026, Chris: "die Centbetraege muessen uebereinander sein"). Gemessen vorher: gebucht 743, offen 746, Summe 760 px. Das Eingabefeld traegt 2px Innenabstand + 1px Rahmen = 3px bis zur letzten Ziffer; der gebuchte Betrag (ohne Rahmen) daher 3px. Und dieselbe Groesse 13px wie das Feld - bei 14px stand das Komma trotz gleicher Endkante 1,8px versetzt (Plex Mono, 0,6em je Zeichen). */ li.bu b.buwert{display:block; padding-right:3px} /* Die Spaltenregel gilt auch fuer die Eingabefelder — sie stand hier frueher entgegengesetzt (Ausgaben in Tinte statt Rot). */ .ggseite.ein li.bu input.buwert{color:var(--gut)} .ggseite.aus li.bu input.buwert{color:var(--bad)} /* Gebuchtes traegt ein feines Bankzeichen und keine Felder (Gesetz 1). */ li.bu.fest .butext{padding:4px 6px} li.bu.fest .buwert{padding:4px 3px 4px 6px} /* KEIN `opacity` AUF EINER ZEILE. BEFUND vom 13.09.2026 (Christians Bild): Das Fenster „Wohin gehört …?" war durchsichtig — die Buchungen darunter schienen hindurch, und die Zeilen darunter lagen sogar DARÜBER. Gemessen: `li.bu.fest` trug `opacity:.92`. Das dämpft nicht nur die Zeile, es dämpft alles darin — auch ein Fenster, das in ihr hängt —, und es macht aus der Zeile einen eigenen Stapelraum, in dem das `z-index:30` des Fensters wirkungslos bleibt. Ein Wert unter 1 ist deshalb an einer Zeile, die etwas enthalten kann, immer falsch. Gedämpft wird über die Schriftfarbe — die erbt nur, was sie erben soll. */ li.bu.fest .butag{color:var(--tinte3)} /* Termin vorbei, aber (noch) nicht gebucht: fest wie Gebuchtes, aber ohne Haken — und gedaempft, damit man sieht: hier fehlt die Bank noch. */ /* ERLEDIGT SIEHT ERLEDIGT AUS. Christian am 13.09.2026: „Jetzt hab ich zwar 'n kleinen grünen Haken, aber es wirkt für mich trotzdem noch nicht erledigt … Es hebt sich zu wenig ab von den Buchungen, die noch kommen … einen leichten Dimm." Gebuchte Zeilen (Haken) treten zurueck: Name und Betrag in der dritten Tintenstufe, der Betrag behaelt seine Richtung nur noch als blasser Ton. Was noch kommt, steht in voller Staerke — das Auge findet es sofort. Ohne `opacity` (siehe oben), ueber die Farbe. Eine Zeile, deren Termin vorbei ist, die die Bank aber noch nicht gebucht hat, bleibt in voller Staerke und ohne Haken: Dort fehlt noch etwas, das soll auffallen. */ /* DIE BEZEICHNUNG BLEIBT IN VOLLER STAERKE — auch bei gebuchten Zeilen (18.09.2026). Christian, mit zwei Bildern nebeneinander: „Ich finde es gut, wie du das gelöst hast im Bereich Mein Stand. Da finde ich die Buchungsfarbe besser als bei Einnahmen und Ausgaben. Da ist es so gräulich und irgendwie nicht imposant genug, nicht stark genug. Deshalb bitte ich dich, die Einnahmen- und Ausgabenübersicht, was die Buchungen angeht, in der Schriftfarbe genauso anzupassen an Mein Stand." GEMESSEN: Bezeichnung in „Mein Stand" rgb(30,27,24) = --tinte, in Einnahmen und Ausgaben rgb(110,105,99) = --tinte3. Dieselbe Sache, zwei Staerken. DAS AENDERT EINE FRUEHERE ENTSCHEIDUNG VON IHM, und sie wird nicht stillschweigend gekippt: Am 13.09.2026 wollte er, dass erledigte Zeilen zuruecktreten („Es hebt sich zu wenig ab von den Buchungen, die noch kommen … einen leichten Dimm"). Dieser Wunsch bleibt erfuellt — nur nicht mehr ueber die Bezeichnung. Was eine gebuchte Zeile als erledigt ausweist, ist weiterhin der gruene Haken (den er ausdruecklich in voller Staerke wollte), der gedaempfte Betrag und der blassere Punkt. Die BEZEICHNUNG ist das, was man liest; sie gehoert dem Buchungssatz (Gesetz 31) und nicht dem Zustand. */ .ggseite.ein li.bu.fest:has(.bubank:not(.leer)) b.buwert{color:color-mix(in srgb, var(--gut) 55%, var(--tinte3))} .ggseite.aus li.bu.fest:has(.bubank:not(.leer)) b.buwert{color:color-mix(in srgb, var(--bad) 45%, var(--tinte3))} li.bu.fest:has(.bubank:not(.leer)) .bupunkt{opacity:.55} /* DER HAKEN KOMMT NACH VORN. Christian am 13.09.2026: „Das Zurücktreten ist jetzt in Ordnung, aber der grüne Haken darf nicht zurücktreten in dem Moment. Der muss deutlich nach vorne kommen. Dann ist es die richtige Balance." Kraeftiger Strich, volle Farbe, ein Hauch groesser — das einzige Element der Zeile in voller Staerke. */ /* Christians Bild danach: „Das ist doch nicht stark." Ein duenner gruener Strich auf weiss ist kein Zeichen. Jetzt eine gefuellte gruene Marke mit weissem Haken — das einzige satte Element der Zeile. */ li.bu.fest:has(.bubank:not(.leer)) .bubank{ width:17px; height:17px; border-radius:50%; background:var(--gut); color:#fff; } li.bu.fest:has(.bubank:not(.leer)) .bubank svg{width:11px; height:11px; stroke-width:3} /* Die feste Spalte ist 14 px breit — die Marke darf sie um 3 px ueberragen, ohne dass der Text wandert: sie ist mittig gesetzt. */ li.bu.fest:has(.bubank:not(.leer)) .bubank{margin:0 -1.5px} /* (26.09.2026 entfernt: blasses Euro in gebuchten Zeilen - das Euro traegt jetzt die Farbe seines Betrags, siehe EURO IN DER FARBE DES BETRAGS) */ /* GEBUCHT = GRUENER HAKEN, vorn in der Zeile. Christian am 13.09.2026: „in meiner Excel Tabelle hab ich das immer grün angemarkert … irgendwie eine Markierung, aha, check, 'n Haken daran, irgendwas Grünes ist gebucht … was hereinkommt und was herausgeht." Der graue Punkt hinter dem Namen war kein Check. Der Haken sitzt vor der Bezeichnung, wo das Auge beim Runterlesen entlanggeht; offene Zeilen tragen nichts — sie haben stattdessen ihre Eingabefelder. */ /* DER HAKEN HAT SEINE EIGENE SPALTE — auch wenn er fehlt. Christian am 13.09.2026: „Mobilfunkverträge steht plötzlich links, weil da vorne der Haken noch nicht dran ist … es darf doch nicht springen." Deshalb eine feste 14-px-Spalte im Zeilenraster; offene Zeilen lassen sie leer. Handbuchregel: Ein Zustandszeichen hat seinen Platz auch dann, wenn es nicht da ist. */ .bubank{ display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; flex:0 0 auto; color:var(--gut); /* GEMESSEN 16.09.2026: Der 44-px-Schutzraum des Themenfeld-Punktes daneben (nur 7,5 px Abstand) lag ueber dem Haken — der Zeiger auf dem Haken traf den Punkt, der Hinweis „von der Bank gebucht am …" kam nie, und ein Klick haette das Themenfeld geaendert. Der Haken liegt jetzt oben; der Punkt behaelt seinen Schutzraum ringsum. */ position:relative; z-index:1; } .bubank.leer{visibility:hidden} /* STEHT NOCH AUS: offener Ring mit Uhr in Bernstein (--warte) — dieselbe Groesse und Lage wie der gruene Haken, damit das Auge beim Runterlesen nur die Farbe und die Form wechseln sieht: satt gruen = durch, offener Ring bernstein = wartet. Nicht rot: es warnt nicht, es sagt „noch nicht". */ li.bu .bubank.offen{ width:17px; height:17px; margin:0 -1.5px; border-radius:50%; border:1.5px solid var(--warte); color:var(--wartetinte); background:transparent; } li.bu .bubank.offen svg{width:12px; height:12px; stroke-width:2.2} .bubank svg{width:14px; height:14px; display:block} /* KEINE MARKIERUNG AN DER ZEILE (16.09.2026). Christian: „Ich will es nicht kursiv haben, weil ich gar nicht weiß, was es bedeutet. Und Ines weiß es auch nicht … Warum ist es überhaupt wichtig, das zu kennzeichnen? Ich brauche die Information nicht an dieser Stelle.“ — Und: „RAUS.“ Er hat recht. Mein Argument wäre gewesen, man könnte 700 € Haushaltsgeld für eine Ausgabe halten — aber er hat diese Zeilen SELBST benannt: „Sparen“, „Urlaubsgeld“, „Sondertilgung Haus“ sagen bereits, was sie sind. Eine Markierung, die nur wiederholt, was im Text steht, ist Rauschen. Vorher stand hier erst Kursiv, dann kurzzeitig ein Zeichen — beides war meine Entscheidung, und die stand mir nicht zu. Die Unterscheidung selbst BLEIBT, wo sie hingehört: im Datensatz (posten.umbuchung = 1), damit die Vermögensrechnung und die Auswertungen sie kennen. Sie muss nur nicht an jeder Zeile stehen. Die Klasse .umb bleibt darum am Listenelement — sie trägt nur keine Gestaltung mehr. */ .buweg{ /* GEMESSEN 22.09.2026, von Christian gemeldet: derselbe Fehler wie beim Abmelde-Knopf und den Themenfeld-Punkten (Gesetz 45/46) — ohne eigenen Rueckbau von --knopf-min/--knopf-max ueberschrieb `min-width:168px` aus der Knopffamilie dieses width:24px, und aus dem kleinen Kreuz wurde ein 168×44 px grosser Block, der das Betragsfeld daneben verdeckte. */ --knopf-min:0; --knopf-max:none; --knopf-breit:24px; width:24px; height:24px; padding:0; border:0; border-radius:999px; background:transparent; color:var(--tinte3); cursor:pointer; justify-self:end; opacity:0; transition:opacity .14s ease, background .14s ease, color .14s ease; position:relative; } .buweg::before, .buweg::after{ content:''; position:absolute; left:7px; top:11px; width:10px; height:1.5px; background:currentColor; border-radius:2px; } .buweg::before{transform:rotate(45deg)} .buweg::after{transform:rotate(-45deg)} li.bu:hover .buweg, .buweg:focus-visible{opacity:1} .buweg:hover{background:var(--flaeche2); color:var(--bad)} li.bu.fragtweg .buweg{opacity:1; background:var(--bad); color:#fff} .buwegfrage{ grid-column:1 / -1; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--tinte); padding:4px 2px 6px; } .buwegfrage button{ font:inherit; font-size:12px; font-weight:600; border-radius:8px; padding:6px 12px; cursor:pointer; border:1px solid var(--linie); background:var(--flaeche); color:var(--tinte); width:auto; } .buwegfrage .buwegja{background:var(--bad); border-color:var(--bad); color:#fff} .buwegfrage .buwegnein:hover, .buwegfrage .buwegnein:focus-visible{background:var(--flaeche2); outline:none} @media (hover: none){ .buweg{opacity:.55} } /* GEMESSEN 22.09.2026, von Christian gemeldet: Der grüne Knopf „Einnahme/ Ausgabe hinzufügen" trug zwei Klassen zugleich — `.buneu` (ein blasser, gestrichelter Text-Link mit „+"-Zeichen davor) UND `.bkknopf` (der durchgehende Markenfarb-Knopf). Beide galten fürs selbe Element, und die Kaskade traf keine saubere Wahl: `.buneu::before` fügte weiterhin ein graues „+" ein, das die Schrift aus der Mitte schob — „der Text ist übrigens nicht mittig im Button". Beim Hover wog schwerer: `.buneu:hover` (zwei Klassen Spezifität) überschrieb ausgerechnet die Hintergrundfarbe von `button.bkknopf` (Klasse+Element, aber `bkknopf:hover` fasst `background` gar nicht an) — der Knopf wurde beim Hover unsichtbar. „Wenn man hovert, verschwindet der grüne Button." Beide Symptome kamen aus derselben Ursache: zwei Bauteile an einer Stelle. Die Zeile unten entfernt `.buneu` von den beiden betroffenen Knöpfen; `.bkknopf` allein trägt jetzt Form UND Hover (`filter:brightness(1.12)`, kein Verschwinden). Die JS-Zeile, die bisher `.buneu` als Klick-Ziel abgehört hat, hört jetzt auf `.buzeile-neu` — ein reiner Namens-Haken ohne eigene Optik, „ein Bauteil, eine Quelle". Die alten `.buneu`-Regeln sind ersatzlos entfernt, weil sie sonst nirgends mehr verwendet werden. */ /* GEMESSEN 22.09.2026, Christian zu „Einnahme/Ausgabe hinzufügen": „Die kleben zu sehr an der Tabelle dran und sind auch ziemlich groß … nicht ordentlich ausgerichtet." URSACHE: Der Knopf trug `.bkknopf` weiter — die Optik des Bankkonten-Verbindungsknopfs (volle Pille, 9/15 px Innenabstand, kein eigener Abstand zur Liste darueber). Nach der Systematik dieser Anwendung ist „Einnahme/Ausgabe hinzufügen" aber genau die Nebenhandlung in einer Zeile, fuer die Gesetz 44 den LEISEN Knopf vorsieht: gefuellt ist die Haupthandlung, leise die Nebenhandlung, beide in derselben Gruenstufe. `.buzeile-neu` traegt jetzt `.knopfleise` statt `.bkknopf` (in tageslinie.php) und bekommt hier seinen eigenen Abstand zur Liste darueber sowie dieselbe 2-px-Einruckung wie jede Buchungszeile — damit der linke Rand exakt fluchtet statt nur ungefaehr. */ /* KEIN pointer-events:none WAEHREND DES SPEICHERNS. BEFUND vom 13.09.2026, zweimal gemessen: Klick auf einen Knopf in der Zeile → das Wertfeld verliert den Fokus → die Zeile speichert und wird `laedt` → mit pointer-events:none kam der Klick nie an. So verschwand das Themenfeld-Fenster, so blieb das Entfernen-Kreuz stumm. Doppeltes Senden verhindert das Skript selbst (Sperre in schicken() und anlegen()). */ li.bu.laedt{opacity:.55} li.bu.gut{animation:bugut 1.2s ease} @keyframes bugut{0%{background:color-mix(in srgb, var(--gut) 16%, transparent)} 100%{background:transparent}} li.bu.schief{animation:buschief .35s ease} @keyframes buschief{0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)}} li.bu.gehtweg{opacity:0; transform:translateX(-12px); transition:opacity .2s ease, transform .2s ease} .bumeldung{ grid-column:1 / -1; font-size:12px; color:var(--bad); padding:0 2px 4px; } .buabhier{ grid-column:1 / -1; display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:12px; color:var(--tinte2); padding:4px 2px 6px; } /* GESETZ 26, geändert 29.09.2026: Eine ungeplante Bankbuchung trägt denselben grünen Haken wie jede gebuchte Zeile. Ihr Kennzeichen ist allein die gepunktete Linie unter dem Namen (Regel darunter) und der Hinweis beim Darüberfahren. */ li.bu.ungeplant .butextwort{text-decoration:underline; text-decoration-style:dotted; text-decoration-color:var(--warte); text-underline-offset:3px} .buabhier .buabwort{color:var(--tinte2)} /* Der Rueckweg ist eine Nebenhandlung: Kontur statt Fuellung, Textgroesse statt Knopfgroesse — und er haelt Abstand zum Satz davor (17.09.2026: „Die kleben dran, die halten die Sicherheitsabstaende nicht ein"). */ .buabhier .nurhier, .buabhier .jaab{ font:inherit; font-size:12px; font-weight:600; color:var(--tinte); cursor:pointer; background:transparent; border:1px solid var(--linie); border-radius:999px; padding:5px 12px; margin-left:3px; line-height:1.2; transition:border-color .14s ease, background .14s ease; } .buabhier .nurhier:hover, .buabhier .jaab:hover{border-color:var(--akzent); background:var(--flaeche)} /* AUF DEM TELEFON ZWEI ZEILEN — aber bei JEDER Buchung. Gemessen am 13.09.2026 bei 390 px: Kurze Bezeichnungen blieben einzeilig, lange brachen um, und die Betragskante sprang zwischen 82 und 338 px hin und her — genau das, was Christian am Schreibtisch beanstandet hat, nur schlimmer. Wenn eine Zeile umbrechen MUSS, sollen es alle tun: Oben Tag und Bezeichnung, darunter rechts der Betrag. Gleiche Höhe, gleiche Kante, ruhige Liste. */ /* Zwei Reihen fuer eine Zeile, deren Name nicht in EINE passt (gemessen, siehe tlZeilenMessen) — und auf dem Telefon fuer alle. */ /* DIESELBEN SECHS SPALTEN WIE JEDE ANDERE ZEILE. BEFUND vom 13.09.2026 (Christians Bild „Abschlagszahlung Bayernwerk"): Die zweireihige Zeile hatte ein eigenes Raster ohne die 122-px-Spalte, ihr Betrag lag ueber Betrags- UND Kreuzspalte und endete 26 px weiter rechts als alle anderen — „Die Zahlen müssen natürlich untereinander sein in einer Ebene." Jetzt behaelt die Zeile das Raster der Liste; nur der Name darf oben ueber die Betragsspalte hinweg, der Betrag steht in der zweiten Reihe in SEINER Spalte. */ /* DIE ZWEIREIHIGE FORM IST AUS (16.09.2026) — der Name wird jetzt gekuerzt statt umgebrochen (Begruendung beim Namen weiter oben). Die Klasse bleibt, sie ordnet nur nichts mehr um. */ ol.buliste li.bu.lang{ grid-template-rows:auto; gap:8px; padding:3px 2px; } li.bu.lang .butaghuelle, li.bu.lang span.butag, li.bu.lang input.butag{grid-column:1; grid-row:1} li.bu.lang .bupunkt{grid-column:2; grid-row:1} li.bu.lang .bubank{grid-column:3; grid-row:1} li.bu.lang .bufeld{grid-column:4; grid-row:1} li.bu.lang .buweg{grid-column:6; grid-row:1; align-self:center} li.bu.lang .buwertfeld{grid-column:5; grid-row:1} li.bu.lang .bukuenftig{grid-column:6; grid-row:1} /* Passt ein Name selbst in die volle Reihe nicht (in der Buchungsschrift sind 50 Zeichen 390 px), wird er eine Stufe kleiner — gemessen, nicht abgeschnitten (Gesetz: nichts wird abgeschnitten). */ li.bu.lang.eng input.butext{font-size:13px} @media (max-width:560px){ /* Dieselbe Reihenfolge wie am Schreibtisch: Tag, Punkt, Haken, Name, Kreuz — der Haken stand hier ohne eigene Spalte am rechten Rand (Telefonbild vom 13.09.2026). */ ol.buliste li.bu, ol.buliste li.bu.lang{ grid-template-columns:var(--butag) 9px 14px minmax(0,1fr) 26px; grid-template-rows:auto auto; gap:4px 6px; padding:6px 2px; } /* Telefon: Spaltenabstand 6px - NUR hier definiert, nirgends als Grundwert, damit keine spaetere Regel ihn ueberschreibt (26.09.2026: genau das war passiert, der Knopf stand am Telefon 6px neben der Namenskante). */ details.gegen, .ggseite{--bugap:6px} :root{--zahlrand:53px} li.bu .bubank, li.bu.lang .bubank{grid-column:3; grid-row:1} /* (25.09.2026: hier stand width:28px - reichte nicht, siehe DATUMSSPALTE - EINE QUELLE.) */ /* Der Name bekommt die ganze Reihe bis zum Rand; Kreuz und Betrag stehen zusammen in Reihe zwei. Gemessen bei 360 px: mit dem Kreuz in Reihe eins blieben dem Namen 143 px — „Krankenversicherung" (19 Zeichen Plex Mono = 148 px) brach mitten im Wort. */ li.bu .bufeld, li.bu.lang .bufeld{grid-column:4 / -1; grid-row:1} li.bu .buweg, li.bu.lang .buweg, li.bu .bukuenftig, li.bu.lang .bukuenftig{grid-column:5; grid-row:2; align-self:center} li.bu .buwertfeld, li.bu.lang .buwertfeld{grid-column:1 / 5; grid-row:2; justify-self:end; width:auto} li.bu input.buwert, li.bu b.buwert{min-width:92px; width:auto} /* Lange Bankbezeichnungen („Rheinische Elektrizitäts- und Gasversorgungs- gesellschaft mbH") liefen auf dem Telefon ueber drei Zeilen und machten aus 76 px Zeilenhoehe 109. Zwei Zeilen, dann drei Punkte — der volle Name steht im Titel und erscheint beim Antippen. */ li.bu .bufeld > .butext{white-space:normal; line-height:1.35} .buwegfrage, .bumeldung, .buabhier{grid-row:3} } @media (prefers-reduced-motion: reduce){ li.bu.gut, li.bu.schief{animation:none} } /* Die Ueberschrift der Tageslinie — sie beantwortet die Frage, die sich sonst jeder stellt: Was sehe ich hier eigentlich? */ /* ================================================================== * * DAS CORPORATE-DESIGN-HANDBUCH — und es hält sich selbst daran * ================================================================== */ .hbteil{ margin:0 0 16px; padding:18px; background:var(--flaeche); border:var(--karterand); border-radius:var(--karteradius); box-shadow:var(--karteschatten); } .hbteil h3{margin:0 0 6px; font-size:15px; font-weight:600} .hbtext{margin:0 0 14px; font-size:13px; line-height:1.65; color:var(--tinte2); max-width:76ch} .hbfarben{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px} .hbfarbe{display:flex; align-items:center; gap:10px; min-width:0} .hbklecks{ width:30px; height:30px; border-radius:9px; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(15,30,31,.14); } .hbfname{display:flex; flex-direction:column; min-width:0; font-size:13px; color:var(--tinte)} .hbfname i{font-style:normal; font-size:12px; color:var(--tinte3)} .hbfarbe code{ margin-left:auto; font-size:12px; color:var(--tinte3); white-space:nowrap; background:var(--flaeche2); padding:2px 6px; border-radius:6px; } .hbtoene{display:flex; flex-wrap:wrap; gap:7px} .hbton{ display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--tinte2); background:var(--flaeche2); padding:5px 10px; border-radius:999px; } .hbton i{width:10px; height:10px; border-radius:50%; flex:0 0 auto} .hbmasse{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:9px; margin:0} .hbmasse > div{display:flex; gap:12px; align-items:baseline; min-width:0} .hbmasse dt{ flex:0 0 auto; min-width:58px; font-size:12px; color:var(--tinte3); font-variant-numeric:tabular-nums; text-align:right; } .hbmasse dd{margin:0; min-width:0; display:flex; flex-direction:column} .hbmasse dd b{font-size:13px; font-weight:500; color:var(--tinte)} .hbmasse dd span{font-size:12px; color:var(--tinte3)} .hbregeln{display:grid; gap:10px} .hbregel{ padding:13px 15px; background:var(--flaeche2); border-radius:12px; border-left:2px solid var(--akzent); } .hbregel h4{margin:0 0 5px; font-size:13px; font-weight:600} .hbregel p{margin:0 0 6px; font-size:13px; line-height:1.6; color:var(--tinte2); max-width:74ch} .hbwann{font-size:12px; color:var(--tinte3)} /* ================================================================== * * DIE SPALTE ENTSCHEIDET DIE FARBE — nicht die einzelne Stelle * * Christian am 13.09.2026: „Warum ist die positive Zahl nicht grün? Und * was hinausgeht, ist nicht rot. Das ist keine gute Usability. Bitte * vermerkt es im Corporate Design Handbuch. Es muss einheitlich sein." * * Zweimal hintereinander hat er dieselbe Luecke gefunden — einmal im Kopf * der Gegenueberstellung, einmal in der Gruppensicht. Beide Male war die * Farbe an der einzelnen Zahl vergessen worden. Also wird sie nicht mehr * an der einzelnen Zahl vergeben: In der Einnahmenspalte ist JEDER Wert * gruen, in der Ausgabenspalte JEDER rot — Gruppensumme, Einzelposten, * Spaltensumme, Eingabefeld. Wer kuenftig eine Zeile hinzubaut, bekommt * die richtige Farbe, ohne daran zu denken. * ================================================================== */ .ggseite.ein b, .ggseite.ein .buwert{color:var(--gut)} .ggseite.aus b, .ggseite.aus .buwert{color:var(--bad)} /* Die Bezeichnung ist kein Wert — sie bleibt Tinte. */ .ggseite .butext, .ggseite .ggname, .ggseite .ggwas{color:var(--tinte)} /* ================================================================== * * DER RHYTHMUS — fuenf Pillen statt eines Hakens * * Christian am 13.09.2026: „ob diese Position jetzt in jedem Monat * wiederkommt oder in welchen Intervallen … quartalsweise, monatsweise, * halbjährlich … und dann jährlich." * Die Reihe steht UNTER der Zeile, nicht daneben: Sie ist die zweite * Frage, und sie darf die erste (Tag, Wofuer, wie viel) nicht schmaler * machen. Ueber die ganze Breite, eingerueckt bis zur Bezeichnungsspalte, * damit sie sichtbar zu DIESER Zeile gehoert. * ================================================================== */ .burhythmus{ grid-column:1 / -1; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 0 4px 41px; } .brwas{ font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinte3); flex:0 0 auto; } .brpillen{ display:inline-flex; gap:3px; background:var(--flaeche2); padding:3px; border-radius:12px; flex-wrap:wrap; } .brpille{ /* width:auto — sonst greift `button{width:100%}` der Anmeldekarte, und die Pillen stapeln sich in einer Wurst (Christian, 13.09.2026: „überlappt den Hintergrund … unprofessionell"). Dieselbe Form wie die Zeitfenster in „Wo stehe ich wann?": eine Leiste, die gewaehlte Pille hell. */ width:auto; flex:0 0 auto; border:0; background:transparent; cursor:pointer; padding:6px 13px; border-radius:var(--wahl); font:inherit; font-size:12.5px; font-weight:500; color:var(--tinte2); white-space:nowrap; line-height:1.2; transition:background .14s ease, color .14s ease; } .brpille:hover{color:var(--tinte)} /* .brpille.an: siehe Gattung A (16.09.2026) */ .brpille:focus-visible{outline:2px solid var(--akzent); outline-offset:1px} .brbis{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--tinte3)} .brbis[hidden]{display:none} .brbisfeld{ font:inherit; font-size:12px; color:var(--tinte); border:1px solid var(--linie); border-radius:8px; padding:4px 8px; background:var(--flaeche); min-width:0; max-width:150px; } .brbisfeld:focus{outline:none; border-color:var(--akzent)} @media (max-width:560px){ .burhythmus{padding-left:0} } /* SUMMEN STEHEN RECHTSBUENDIG AUF EINER KANTE (Handbuch, 13.09.2026). Im Reiter „Gruppen" gibt es kein Entfernen-Kreuz — die 26-px-Spalte des Kopfes liess die Summe 34 px links der Gruppenbetraege stehen (Christian: „Die Summen in der Überschrift müssen alle rechtsbündig stehen. Das ist Gesetz."). Dort faellt die Spalte weg. */ .ggblatt[data-blatt="gruppen"] .ggseite h3{grid-template-columns:16px minmax(0,1fr) auto; padding-right:8px} .ggblatt[data-blatt="gruppen"] .ggseite h3 > b{justify-self:end; text-align:right; font-variant-numeric:tabular-nums} /* Tag offen: das Fragezeichen traegt die Akzentfarbe, damit man sieht, dass hier bewusst kein Tag steht. */ .butaghuelle.offen input.butag{color:var(--akzent); font-weight:600} .burhythmus .brwann, .burhythmus .brwie{display:inline-flex; align-items:center; gap:10px; margin-right:6px} .burhythmus .brwie{flex-wrap:wrap} li.bu .burhythmus.taktreihe{grid-column:1 / -1; padding:6px 0 2px 44px} li.bu .burhythmus.taktreihe .brstand{font-size:12px; color:var(--tinte3)} li.bu .burhythmus.taktreihe .brtun{padding:6px 12px; font-size:12px; width:auto} li.bu .burhythmus.taktreihe .brtun[hidden]{display:none} /* ================================================================== * * WAS KUENFTIG GILT — der Knopf an der gebuchten Zeile * * Christian am 13.09.2026: „Ich kann keine Werte anklicken. Ich kann * keine Bezeichnungen anklicken. Ich kann auch keine Zahlen löschen." * Im laufenden Zyklus ist fast jede Zeile von der Bank gebucht und damit * fest (Gesetz 1). Ohne diesen Knopf war die Arbeitsflaeche dort tot — * und es stand nirgends, WARUM. Er sitzt an derselben Stelle wie das * Entfernen-Kreuz der Planzeilen: Die Spalte bleibt, die Kanten fluchten. * ================================================================== */ /* SICHTBAR, NICHT ERST BEIM DARUEBERFAHREN. Christian am 13.09.2026: „Ich kann die Bezeichnungen nicht ändern … Das ging mal kurzfristig. Jetzt geht's wieder nicht mehr." Gemessen: Im laufenden Zyklus sind 33 von 39 Zeilen gebucht, und dieser Knopf hatte opacity:0 bis zum Hover. Was man nicht sieht, findet man nicht (Gesetz 5: Klickbares sieht klickbar aus). Jetzt steht er leise da — an derselben Stelle, an der offene Zeilen ihr Entfernen-Kreuz tragen — und die GANZE gebuchte Zeile oeffnet auf Klick dasselbe Feld (siehe Skript). */ .bukuenftig{ /* Ein 26-px-Zeichen, kein Knopf der Familie — die Familienmasse werden hier zurueckgenommen (20.09.2026, vom CI-Waechter in 40 Zeilen gemeldet: 168 × 26 px statt 26 × 26). */ --knopf-min:0; --knopf-max:none; --knopf-breit:26px; width:26px; height:26px; min-height:0; flex:0 0 auto; padding:0; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:999px; background:transparent; color:var(--tinte3); cursor:pointer; opacity:.6; transition:opacity .16s ease, background .14s ease, color .14s ease; } .bukuenftig svg{width:15px; height:15px} li.bu:hover > .bukuenftig, li.bu:focus-within > .bukuenftig, li.bu.planoffen > .bukuenftig{opacity:1} li.bu.fest{cursor:default} li.bu.fest .zutun{cursor:pointer} .bukuenftig.leer{opacity:0; pointer-events:none} .bukuenftig:hover, .bukuenftig:focus-visible{ background:var(--flaeche2); color:var(--tinte); } li.bu.planoffen > .bukuenftig:not(.leer){background:var(--flaeche2); color:var(--akzent)} /* Das Feld selbst — es faehrt unter der Zeile auf, es blitzt nicht (Gesetz 3). Deshalb Rasterzeile mit Hoehe 0fr -> 1fr statt display. */ /* WAS DER PLAN NICHT KENNT — eine Liste wie die Buchungsliste: Name links, Betrag rechts auf der 122-px-Kante, EIN Knopf je Zeile. */ section.unbenannt{ padding:18px clamp(16px,2.4vw,24px) 12px; border:var(--karterand); border-radius:var(--karteradius); box-shadow:var(--karteschatten); background:var(--flaeche); } section.unbenannt h2.abschnitt{margin:0 0 6px; display:flex; align-items:center; gap:8px} .unsatz{margin:4px 0 10px; font-size:13px; color:var(--tinte2)} .unsatz b{font-weight:600} ol.unliste{list-style:none; margin:0; padding:0} ol.unliste li.unzeile{ display:grid; grid-template-columns:minmax(0,1fr) 122px 176px; align-items:center; gap:12px; padding:8px 2px; min-height:40px; border-bottom:1px solid var(--linie); } /* Dieselbe Betragshuelle wie in der Buchungsliste: feste Breite, Zahl rechtsbuendig, Euro-Zeichen ausserhalb — die Nachkommastellen fluchten. */ ol.unliste .buwertfeld{ display:inline-flex; align-items:center; justify-content:flex-end; gap:4px; justify-self:end; width:122px; flex:0 0 auto; } ol.unliste .buwertfeld::after{content:'€'; font-size:13px; color:var(--tinte3); flex:0 0 auto; width:9px; text-align:left} ol.unliste b.buwert{display:block; font-size:14.5px; font-weight:500; text-align:right; font-variant-numeric:tabular-nums; padding:4px 2px 4px 6px} ol.unliste .unauf, ol.unliste .uneinmal{justify-self:end} ol.unliste li.unzeile:last-of-type{border-bottom:0} .unname{font-size:14.5px; color:var(--tinte); min-width:0; display:flex; flex-direction:column; gap:1px} .unname i{font-style:normal; font-size:12px; color:var(--tinte3)} .unauf{ font:inherit; font-size:12px; color:var(--tinte2); cursor:pointer; white-space:nowrap; background:transparent; border:1px dashed var(--linie); border-radius:999px; padding:6px 12px; transition:border-color .14s ease, color .14s ease, background .14s ease; } .unauf:hover, li.unzeile.planoffen .unauf{border-color:var(--akzent); color:var(--tinte); background:var(--flaeche2)} .uneinmal{font-size:12px; color:var(--tinte3); padding:0 6px; white-space:nowrap} /* Die Legende zu dieser Liste — sie beantwortet die Frage an der Stelle, an der sie entsteht: warum steht hier ein Knopf und dort das Wort „einmalig"? */ /* Der Blick in den Scan-Ordner: ein Aufklapper, der schon zugeklappt sagt, was drin liegt. Jede Zeile trägt ihren Zustand als Zeichen UND als Satz — Farbe allein sagt nichts, wenn man sie nicht unterscheiden kann. */ details.stscanblick{ margin:14px 0 0; border:1px solid var(--linie); border-radius:var(--karteradius); background:var(--flaeche); overflow:hidden; } details.stscanblick > summary{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 14px; cursor:pointer; list-style:none; min-height:44px; font-size:14.5px; color:var(--tinte2); } details.stscanblick > summary::-webkit-details-marker{display:none} details.stscanblick > summary:hover{background:var(--flaeche2)} details.stscanblick .sbtitel{font-weight:600; color:var(--tinte)} details.stscanblick .sbzahlen{margin-left:auto; font-size:12px; color:var(--tinte3); font-variant-numeric:tabular-nums} details.stscanblick > p.vwsatz{margin:0; padding:0 14px 10px} ul.sbliste{list-style:none; margin:0; padding:0 14px 14px; display:grid; gap:8px} li.sbzeile{ display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:start; gap:10px; padding:10px 12px; border:1px solid var(--linie); border-radius:12px; background:var(--grund); } li.sbzeile .sbzeichen{display:flex; align-items:center; justify-content:center; padding-top:1px} li.sbzeile .sbname{min-width:0; font-size:13px; line-height:1.45} li.sbzeile .sbname b{display:block; word-break:break-word} li.sbzeile .sbname small{display:block; margin-top:2px; font-size:12px; color:var(--tinte3)} li.sbzeile .sbname em{display:block; margin-top:3px; font-style:normal; font-size:12px; color:var(--tinte2)} li.sbzeile.art-gut .sbzeichen{color:var(--gut)} li.sbzeile.art-wartet .sbzeichen{color:var(--wartetinte)} li.sbzeile.art-weg .sbzeichen{color:var(--tinte3)} li.sbzeile.art-weg .sbname b{color:var(--tinte3)} form.sbtun{margin:0; flex:0 0 auto} @media (max-width:560px){ li.sbzeile{grid-template-columns:20px minmax(0,1fr)} form.sbtun{grid-column:2; justify-self:start; margin-top:6px} details.stscanblick .sbzahlen{margin-left:0; flex:1 1 100%} } p.unlegende{ display:flex; flex-wrap:wrap; gap:6px 20px; margin:0 0 12px; font-size:12px; line-height:1.45; color:var(--tinte3); } p.unlegende > span{display:flex; align-items:baseline; gap:5px; min-width:0} p.unlegende b{color:var(--tinte2); font-weight:600; font-variant-numeric:tabular-nums} p.unlegende em{font-style:normal; color:var(--tinte2)} @media (max-width:560px){ p.unlegende{gap:4px} p.unlegende > span{flex:1 1 100%} } ol.unliste li.planfeldzeile{border-bottom:0} @media (max-width:560px){ ol.unliste li.unzeile{grid-template-columns:minmax(0,1fr) 122px} ol.unliste li.unzeile .unauf, ol.unliste li.unzeile .uneinmal{grid-column:1 / -1; justify-self:start} } li.planfeldzeile{ list-style:none; padding:0; border-bottom:1px solid var(--linie); display:grid; grid-template-rows:0fr; transition:grid-template-rows .26s cubic-bezier(.22,.61,.36,1); } li.planfeldzeile.auf{grid-template-rows:1fr} li.planfeldzeile > .planfeld{overflow:hidden; min-height:0} .pfinhalt{ padding:14px 14px 15px; margin:0 0 10px; background:var(--flaeche2); border-radius:14px; /* minmax(0,1fr), nicht auto: Sonst misst die Spalte sich am laengsten Kind (der Kopfsatz mit 62ch) und wird breiter als die Karte — gemessen 427 px in 345 px, der Rahmen rollte beim Fokus nach links. */ display:grid; grid-template-columns:minmax(0,1fr); gap:11px; } .pfkopf{margin:0; font-size:12px; line-height:1.55; color:var(--tinte2); max-width:62ch} .pfkopf b{font-weight:600; color:var(--tinte)} .pfzeile{display:flex; align-items:center; gap:8px; flex-wrap:wrap} .pftag{ width:44px; flex:0 0 auto; text-align:right; font:inherit; font-size:13px; font-variant-numeric:tabular-nums; border:1px solid var(--linie); border-radius:9px; padding:7px 8px; background:var(--flaeche); color:var(--tinte); } .pftext{ flex:1 1 180px; min-width:0; font:inherit; font-size:13px; border:1px solid var(--linie); border-radius:9px; padding:7px 10px; background:var(--flaeche); color:var(--tinte); } .pfwerthuelle{display:inline-flex; align-items:center; gap:5px; flex:0 0 auto} .pfwert{ width:110px; text-align:right; font:inherit; font-size:13px; font-variant-numeric:tabular-nums; border:1px solid var(--linie); border-radius:9px; padding:7px 10px; background:var(--flaeche); color:var(--tinte); } .pfwerthuelle span{font-size:13px; color:var(--tinte3)} .pftag:focus, .pftext:focus, .pfwert:focus{outline:none; border-color:var(--akzent)} .pfinhalt .burhythmus{padding:0; grid-column:auto} .pfsatz{margin:0; font-size:12px; line-height:1.5; color:var(--tinte3)} .pfsatz b{color:var(--tinte); font-weight:600} /* GEGEN DIE GLOBALE ANMELDEREGEL ABGESICHERT. BEFUND vom 13.09.2026 (Christians Bild, halbe Blockbreite): Tagesfeld ueber die volle Breite, Rhythmus-Pillen untereinander und mittig, Knoepfe riesig. Ursache: `button{width:100%; padding:16px 22px}` und `input[type=text]{width:100%}` aus der Anmeldekarte gelten fuer die ganze Anwendung und schlagen `.pftag{width:44px}` (hoehere Spezifitaet des Attributselektors). Deshalb hier mit `.planfeld`-Vorsatz. */ .planfeld input.pftag{width:44px; flex:0 0 44px; padding:7px 8px} .planfeld input.pftext{width:auto; flex:1 1 160px; padding:7px 10px} .planfeld input.pfwert{width:110px; padding:7px 10px} .planfeld .burhythmus{justify-content:flex-start} .planfeld .brpille{width:auto; padding:5px 11px; background:transparent; color:var(--tinte2); font-weight:500} .planfeld .brpille.an{background:var(--akzent); color:var(--aufakzent)} /* Die Pillenreihe bleibt EINE Reihe und schiebt sich bei Enge, statt die ganze Karte zu verbreitern — sonst rollte der Rahmen beim Fokus auf das Betragsfeld nach links und schnitt den Text ab (gemessen: Inhalt bei x = −7 px). */ .planfeld .brpillen{flex:0 1 auto; min-width:0; max-width:100%; flex-wrap:wrap; justify-content:flex-start} .planfeld .pfzeile{min-width:0} li.planfeldzeile > .planfeld{overflow-x:hidden} .pfziel{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--tinte3)} .pfziel select{font:inherit; font-size:13px; color:var(--tinte); border:1px solid var(--linie); border-radius:9px; padding:6px 10px; background-color:var(--flaeche); max-width:100%; min-width:0} .pftaten{display:flex; gap:8px; justify-content:space-between; align-items:center; flex-wrap:wrap} .pfrechts{display:inline-flex; gap:8px; margin-left:auto} .planfeld .pfok, .planfeld .pfweg, .planfeld .pfstreichen{ font:inherit; font-size:13px; font-weight:500; cursor:pointer; width:auto; border:0; border-radius:999px; padding:7px 14px; line-height:1.3; } .pfstreichen{background:transparent; color:var(--bad); padding-left:0} .pfstreichen:hover{text-decoration:underline} .pfstreichen.fragt{background:var(--bad); color:#fff; padding-left:14px} .pfweg{background:transparent; color:var(--tinte3)} .pfweg:hover{color:var(--tinte)} .pfok{background:var(--akzent); color:var(--aufakzent)} .pfok:hover{filter:brightness(1.06)} .pfok:disabled{opacity:.45; cursor:default} .pfinhalt.laedt{opacity:.55; pointer-events:none} .pfschief{margin:0; font-size:12px; color:var(--bad)} .pfkopf.heiter{color:var(--tinte2)} .pfkopf.heiter b{color:var(--tinte)} /* Die Feldzeile ist keine Buchung — sie traegt keine Trennlinie und keinen Punkt, damit die Liste darueber und darunter ruhig bleibt. */ ol.buliste li.planfeldzeile{border-bottom:0} ol.buliste li.planfeldzeile::marker{content:''} /* DER ZIEHGRIFF DARF DEN KOPF NICHT ZUDECKEN (13.09.2026) — erledigt sich seit dem 05.10.2026 von selbst: Der Griff steht nur noch im Modus „Module ordnen“ und dann im Fluss als eigene Zeile. Die feste Reserve von 136 px rechts im Kopf von „Alle 12 Monate“ und im Jahreskopf ist deshalb weg (06.10.2026, Chris: „Das Gesamt muss enden, so wie die Tabelle rechtsbündig.“). */ .bumeldung.heiter{color:var(--gut)} /* Die Antwort einer gebuchten Zeile auf einen Klick: kein Fehler in Rot, sondern eine ruhige Auskunft mit dem Weg (Gesetz 16). */ .bumeldung.ruhig{color:var(--tinte2); font-size:12px; padding:2px 2px 6px; line-height:1.45} .bumeldung .buweiter{ font:inherit; font-size:12px; font-weight:500; color:var(--akzent); background:transparent; border:0; border-bottom:1px solid currentColor; padding:0 1px; cursor:pointer; width:auto; margin-left:4px; } /* GEMESSEN 22.09.2026: der „Entfernen"-Link an einer ueberfaelligen, noch nicht gebuchten Zeile (siehe wegFrage() im Skript) traegt dieselbe Form wie der Stift-Link daneben, nur in Warnfarbe statt Akzentfarbe — er loest eine loeschende Handlung aus, kein Anpassen. */ .bumeldung .buweiter.buwegtext{color:var(--bad)} /* DER SPALTENKOPF FLUCHTET MIT SEINEN ZEILEN. Christian am 13.09.2026: „Die Werte, die drunter stehen, sind nicht kongruent zu diesen Werten oben. Die sollten alle in einer Flucht stehen … Auf jeden Fall müssen die Nachkommastellen untereinander sein, sonst springt das." Die Summe traegt deshalb DIESELBE Huelle wie jede Buchungszeile — 122 px breit, Zahl rechtsbuendig, Euro-Zeichen daneben. Und weil sie keine Buchung ist, sondern deren Ergebnis, steht sie auf eigener Flaeche mit einer Linie darunter: So liest sie niemand als weitere Zeile mit (Christians zweiter Gedanke: „dann könntest Du das noch mal in so einen Rahmen setzen"). */ .ggseite h3{ /* Die VIERTE Spalte ist leer und 26 px breit — genau die Breite des Entfernen-Kreuzes in jeder Buchungszeile. Ohne sie saesse die Summe 34 px weiter rechts als die Betraege darunter (gemessen: 709 gegen 675 px), und die Nachkommastellen fluchteten wieder nicht. */ display:grid; grid-template-columns:16px minmax(0,1fr) 122px 26px; gap:8px; align-items:center; margin:0 0 8px; padding:8px 2px 10px; border-bottom:1px solid var(--linie); } .ggseite h3 .ggwas{ font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--tinte3); min-width:0; overflow:hidden; text-overflow:" …"; white-space:nowrap; } /* Die Summe traegt denselben Euro-Platz wie jede Zeile darunter (9px + 4px Abstand), leer - so endet ihre letzte Ziffer auf derselben Kante. */ .ggseite h3 .ggsumme{width:122px; justify-self:end; display:flex; justify-content:flex-end; align-items:center; gap:4px} .ggseite h3 .ggsumme::after{content:'€'; flex:0 0 9px; width:9px; font-size:13px; font-weight:400; text-align:right} /* 26.09.2026 Chris: "Es fehlt doch das Eurozeichen bei den Gesamteinnahmen und Gesamtausgaben" - jetzt sichtbar, auf demselben 9px-Platz wie in jeder Zeile: Ziffern UND Euro stehen in einer Flucht (Chris, Ines, Zusammen - eine Vorlage). */ /* EURO IN DER FARBE DES BETRAGS (26.09.2026, Chris: "Das Euro-Symbol hat immer die gleiche Farbe wie die Einnahme bzw. die Ausgabe ... einheitlich"). Vorbild: die Kopfzeile "Einnahmen und Ausgaben". Jede Farbregel eines Betrags hat hier ihr Gegenstueck fuer das Euro - gleiche Selektoren, gleiche Werte, gleiche Staerke. Gemessen: 29 von 29 Paaren Betrag/Euro gleich. Wer eine Betragsfarbe aendert, aendert diese Zeilen mit. */ .ggseite.ein li.bu .buwertfeld::after{color:var(--gut); font-weight:500} .ggseite.aus li.bu .buwertfeld::after{color:var(--bad); font-weight:500} .ggseite.ein li.bu.fest:has(.bubank:not(.leer)) .buwertfeld::after{color:color-mix(in srgb, var(--gut) 55%, var(--tinte3))} .ggseite.aus li.bu.fest:has(.bubank:not(.leer)) .buwertfeld::after{color:color-mix(in srgb, var(--bad) 45%, var(--tinte3))} .ggseite.ein h3 .ggsumme::after{color:var(--gut); font-weight:600} .ggseite.aus h3 .ggsumme::after{color:var(--bad); font-weight:600} /* "Einnahme/Ausgabe hinzufuegen" (26.09.2026, Chris: "zu dominant, zu nah dran, zu klobig"): zurueckhaltender Umrissknopf, beginnt auf der Schrift- kante der Bezeichnungen (Zeileneinzug 2px + Spalten + 3 Abstaende + 7px Feldeinzug inkl. Rahmen) - aus derselben Variable wie die Datumsspalte, springt also mit. Sichtbar 32px, Trefferflaeche per ::after 44px. Gemessen: Kante = Schriftanfang (0 px), 16px Luft zur letzten Zeile. */ .ggseite{--bueinzug:calc(2px + var(--butag) + 9px + 14px + 3 * var(--bugap, 8px) + 7px); container-type:inline-size} /* Reicht der Platz nicht fuer Einzug + Knopf (168px), beginnt der Knopf auf der Listenkante statt irgendwo dazwischen - zwei klare Kanten, nie heraus. */ /* doppelte Klasse = hoehere Spezifitaet: die Grundregel steht im Stylesheet SPAETER und haette diese Ausweichregel sonst ueberschrieben (gemessen 26.09.). */ /* EINE ABSCHLUSSKANTE (26.09.2026, Chris: "Bleibt im Oktober ... gehoert in eine Flucht ... gleiches Spiel oben drueber"). Kopfzeile und Fuss enden, wo das Euro jeder Zeile endet: eine Werkzeugspalte (26px) + Spaltenabstand + 2px Zeileneinzug vor der Listenkante. Gemessen: Spanne 0,00px bei 320, 360, 375, 390, 430, 820, 1280, 1512px. Wer die Zeilenspalten aendert, aendert --bugap mit. */ details.gegen{--flucht:calc(26px + var(--bugap, 8px) + 2px)} details.gegen p.ggfuss{padding-right:var(--flucht); flex-wrap:wrap} details.gegen p.ggfuss > b{margin-left:auto} details.gegen > summary .ggkurz{padding-right:var(--flucht); flex-wrap:wrap; justify-content:flex-end; margin-left:auto; row-gap:4px; max-width:100%} /* ZAHLENKANTE FUER ALLE MODULE (26.09.2026, Chris: "alle Module ... die Zahlen ... muessen immer in einer Ebene abschliessen ... Platz fuer ein Icon"). --zahlrand = Abstand der Ausgaben-Zahlen zur Innenkante einer Hauptkarte: 1px Rand + 18px Raster + Werkzeugspalte (26px + Spaltenabstand + 2px) = 55px, am Telefon 53px (nur im Telefonblock gesetzt, nie als Grundwert). Jede rechtsbuendige Zahlenspalte eines Moduls endet dort. Gemessen 0,0px Abweichung bei 360-1512px. Der Gestaltwaechter prueft das laufend. */ section.rechts ol.tage > li{padding-right:calc(var(--zahlrand, 55px) - 1px)} section.toepfe .tpkopf > dl.tpteilung{margin-right:var(--zahlrand, 55px)} /* LUFT IN "AB HEUTE" (26.09.2026, Chris: "Wir ragen sogar ins Icon oben links rein ... zwischen den Tagen viel zu wenig Luft"). Gemessen vorher: Titel -> erste Karte 0px, zwischen den Karten 8px. Jetzt 16px unter dem Titel und 15px zwischen den Karten - derselbe Kartenabstand wie in "Wo unser Geld liegt" (gemessen 15px). Der Gestaltwaechter meldet kuenftig jede Karte, die naeher als 12px am Titel oder an ihrer Nachbarkarte steht. */ section.rechts > h2.modultitel + ol.tage{margin-top:16px} section.rechts ol.tage > li{margin-bottom:15px} .ggseite h3 .ggsumme b{ font-size:15px; font-weight:600; text-align:right; width:100%; font-variant-numeric:tabular-nums; padding:0 3px 0 6px; display:block; } .ggseite.ein h3 .ggsumme b{color:var(--gut)} .ggseite.aus h3 .ggsumme b{color:var(--bad)} .ggseite h3 .ggsumme::after{color:var(--tinte3)} @media (max-width:560px){ /* Die Kreuz-Spalte bleibt auch schmal — sonst steht die Kopfsumme 32 px rechts der Zeilenbetraege (gemessen 390 px; Handbuch „Summen stehen rechtsbuendig auf einer Kante"). */ .ggseite h3{grid-template-columns:16px minmax(0,1fr) auto 24px} .ggblatt[data-blatt="gruppen"] .ggseite h3{grid-template-columns:16px minmax(0,1fr) auto} .ggseite h3 .ggsumme{width:auto} /* A2 (04.10.2026, Debugging): „WAS HEREINKOMMT" bekam bei 390 px 120 px und brauchte 131 — die Zeile kuerzte es zu „Was hereinko …". Jetzt: 4 px statt 8 px zwischen Zeichen, Titel und Summe (die Kreuzspalte waechst um dieselben 4 px, damit die Summe auf der Betragskante bleibt), Laufweite .03em; reicht es trotzdem nicht, bricht der Titel um, statt abgeschnitten zu werden. */ .ggseite h3{column-gap:4px; grid-template-columns:16px minmax(0,1fr) auto 28px} .ggseite h3 .ggwas{letter-spacing:.03em; white-space:normal; overflow:visible; line-height:1.25} } /* DIE TAGESLINIE BRAUCHT LUFT. Christian am 13.09.2026: „Diese Darstellung wirkt ruckelig. Die wirkt zu sehr komprimiert. Das muss großzügiger sein. Das kann auch nur halb so schmal sein. Es muss nicht auf die volle Breite gezogen werden. Aber das so ranzudocken wirkt unglücklich." Ueber 876 px Breite und 90 px Hoehe wurde aus einem Verlauf ein Strich: Das Verhaeltnis lag bei 10:1, und jede Bewegung im Kontostand verschwand. Jetzt hoechstens 720 px breit, 200 px hoch — etwa 3,5:1, das Verhaeltnis, in dem ein Mensch eine Kurve als Kurve liest. Sie steht links, nicht zentriert: Die Achsenbeschriftung darunter beginnt dort, und eine Linie, die woanders anfaengt als ihre Beschriftung, liest sich falsch. */ /* DIE BREITE GEHOERT DEM RAHMEN, NICHT DER ZEICHNUNG. BEFUND vom 13.09.2026 (Christians Bild): Der Zeigefinger stand weit rechts NEBEN der Tageslinie, der graue Balken lag im Leeren, und das Schild nannte den 19.9. an einer Stelle, an der die Linie längst zu Ende war. Gemessen: `svg.linie` war auf 720 px gedeckelt, die Bänder darüber liegen aber mit `inset:0` im Rahmen — und der Rahmen war so breit wie der ganze Block (rund 1180 px). Beide bezogen sich auf verschiedene Breiten, also konnten sie nicht übereinstimmen. Die Deckelung sitzt jetzt am Rahmen. Zeichnung und Bänder teilen sich damit EINE Breite, und zwar zwangsläufig — es gibt keine zweite mehr, die man vergessen könnte. */ .mitte .mb-tageslinie{max-width:720px} .mitte svg.linie{ display:block; width:100%; height:200px; margin:0; } .mitte .achse{max-width:720px; margin-top:6px} @media (max-width:900px){ .mitte svg.linie{height:160px} .mitte .mb-tageslinie, .mitte .achse{max-width:none} } details.tfelder{ border:1px solid var(--linie); border-radius:14px; background:var(--flaeche); margin:0 0 14px; overflow:hidden; } /* DER AUSLOESER MUSS WIE EIN KNOPF AUSSEHEN. Christian am 12.09.2026: „Es ist doch ueberhaupt nicht klar, dass ich das Wort Themenfelder anklicken kann. Nur wenn ich zufaellig drauf bin, wird es zum Cursor. Das muss doch wie ein Button aussehen ... ein entsprechender Pfeil. So wie Du das gebaut hast, erkennt man's ueberhaupt nicht. Ich hab's total uebersehen." Er hat recht: Vorher war der Kopf weisse Schrift auf weisser Karte mit einem 8-Pixel-Haekchen — die Klickbarkeit stand nirgends, sie war nur zu erraten. Jetzt traegt er eine eigene Flaeche, eine Trennlinie nach unten und rechts einen echten Knopf mit Wort UND Pfeil. Man sieht von aussen, dass sich dort etwas oeffnet, und was. */ details.tfelder > summary{ display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none; padding:13px 15px; font-weight:600; color:var(--tinte); background:var(--flaeche2); border-bottom:1px solid transparent; transition:background .16s ease; } details.tfelder[open] > summary{border-bottom-color:var(--linie)} details.tfelder > summary::-webkit-details-marker{display:none} details.tfelder > summary:hover{background:var(--linie)} .tftitel{display:inline-flex; align-items:center; gap:8px} .tftitel svg{width:17px; height:17px} .tfzahl{ font-size:12px; font-weight:600; color:var(--tinte2); background:var(--flaeche); padding:2px 8px; border-radius:9px; font-variant-numeric:tabular-nums; box-shadow:inset 0 0 0 1px var(--linie); } /* Der Knopf rechts: Wort und Pfeil, beides sichtbar, beides Teil der Klickflaeche (das ganze summary ist klickbar — der Knopf zeigt es nur an). */ .tfauf{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:500; color:var(--tinte); background:var(--flaeche); padding:6px 12px; border-radius:9px; box-shadow:inset 0 0 0 1px var(--linie); white-space:nowrap; } details.tfelder > summary:hover .tfauf{box-shadow:inset 0 0 0 1px var(--tinte3)} .tfauf::after{ content:''; width:7px; height:7px; flex:none; border-right:1.8px solid var(--tinte2); border-bottom:1.8px solid var(--tinte2); transform:rotate(45deg) translate(-1px,-1px); transition:transform .2s ease; } details.tfelder[open] > summary .tfauf::after{transform:rotate(-135deg) translate(-1px,-1px)} .tfauf .zu{display:inline} .tfauf .auf{display:none} details.tfelder[open] > summary .tfauf .zu{display:none} details.tfelder[open] > summary .tfauf .auf{display:inline} @media (max-width:560px){ .tfauf{padding:6px 10px; font-size:12px} } .tferkl{ margin:0; padding:0 15px 12px; font-size:13px; line-height:1.55; color:var(--tinte2); border-bottom:1px solid var(--linie); } .tfliste{display:grid} details.tf{border-bottom:1px solid var(--linie)} details.tf > summary{ display:grid; grid-template-columns:8px 18px 1fr auto auto; gap:10px; align-items:center; cursor:pointer; list-style:none; padding:11px 15px; font-size:14.5px; } details.tf > summary::-webkit-details-marker{display:none} details.tf > summary:hover{background:var(--flaeche2)} details.tf[open] > summary{background:var(--flaeche2)} .tfpunkt{width:8px; height:8px; border-radius:50%} .tfbild{display:inline-flex; color:var(--tinte2)} .tfbild svg{width:17px; height:17px} .tfname{min-width:0; overflow-wrap:anywhere; color:var(--tinte); font-weight:500} .tfart{font-size:12px; color:var(--tinte2); white-space:nowrap} .tfn{font-size:12px; color:var(--tinte3); font-variant-numeric:tabular-nums; white-space:nowrap} .tfform{ display:grid; gap:10px; padding:13px 15px 16px; background:var(--flaeche2); border-top:1px solid var(--linie); } .tfform h4{margin:0 0 2px; font-size:14.5px; font-weight:600} .tfl{display:grid; gap:5px; font-size:12px; color:var(--tinte2)} .tfl input[type=text], .tfl select{ font:inherit; font-size:14px; color:var(--tinte); padding:8px 10px; border:1px solid var(--linie); border-radius:9px; background:var(--flaeche); width:100%; max-width:100%; box-sizing:border-box; } .tfl input[type=text]:focus, .tfl select:focus{outline:2px solid var(--akzent); outline-offset:1px} .tffarben > span{display:block} .tffw{display:flex; flex-wrap:wrap; gap:6px} .tffarbe{display:inline-flex; cursor:pointer} .tffarbe input{position:absolute; opacity:0; width:0; height:0} .tffarbe i{ display:block; width:22px; height:22px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(15,30,31,.12); transition:transform .14s ease, box-shadow .14s ease; } .tffarbe:hover i{transform:scale(1.12)} .tffarbe input:checked + i{ box-shadow:0 0 0 2px var(--flaeche2), 0 0 0 4px var(--tinte); transform:scale(1.12); } .tffarbe input:focus-visible + i{box-shadow:0 0 0 2px var(--flaeche2), 0 0 0 4px var(--akzent)} .tfform button{justify-self:start} .knopfleise.weg{background:var(--flaeche); color:var(--bad); border-color:var(--bad)} .knopfleise.weg:hover{background:var(--bad); color:#fff; filter:none} .tfweg{border-top:1px dashed var(--linie); background:var(--flaeche)} .tfhalt{ display:flex; gap:8px; align-items:flex-start; margin:0; padding:12px 15px 15px; font-size:12px; line-height:1.55; color:var(--tinte2); background:var(--flaeche2); border-top:1px solid var(--linie); } .tfhalt svg{width:15px; height:15px; flex:none; margin-top:1px; color:var(--tinte3)} .tfneu{border-top:1px solid var(--linie)} @media (min-width:761px){ .tfform{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); align-items:end} .tfform h4, .tffarben, .tfform button{grid-column:1 / -1} .tfweg{grid-template-columns:minmax(0,1fr)} } /* 05.10.2026: Der Papierkorb stand 10 px unter der Auswahl (Wächter knopfluft, Gesetz 12 px) — jetzt daneben, mit 16 px Schutzraum. */ html body .tfweg{grid-template-columns:minmax(0,1fr) auto; align-items:end; column-gap:16px} html body .tfweg > button{grid-column:auto} html body .tfform{row-gap:12px} /* jede Themenfeld-Form: 12 px zwischen Zeilen, auch über einem Knopf (Wächter knopfluft) */ /* ================================================================== * * DIE ZUORDNUNG — EINE ZEILE, EINE ENTSCHEIDUNG (16.09.2026) * * Christian: „Diese Tabelle sieht furchtbar aus … diese Ansicht ist schlimm." * GEMESSEN an seinem Bild: Jedes Themenfeld stand in zwei Formularen * UNTEREINANDER — oben Gruppe, darunter „Wohin?" —, jedes mit eigenem Knopf * „Übernehmen"; der untere lief über die volle Breite und war weiss, sah also * aus wie ein leeres Eingabefeld. Bei 18 Feldern sind das 36 Zeilen und 36 * Knöpfe. Dazu zwei schwarze Balken über die ganze Seite (Sammelknopf, Filter). * * JETZT: eine Zeile je Themenfeld mit fester Spaltenordnung — * Zeichen · Name (mit Zahl der Planzeilen) · Summe · Thema · Wohin · Zustand * Die Auswahl IST die Entscheidung (das Formular sendet sich selbst, .zselbst), * deshalb steht in der Zeile kein Knopf mehr. Nur ein VORSCHLAG will bestätigt * werden — er trägt einen kleinen Haken „Vorschlag". Wer nichts ändert, * klickt nichts. * ================================================================== */ .zliste{display:grid; gap:6px} .zpaar{ display:grid; align-items:center; gap:4px 14px; grid-template-columns:22px minmax(150px,1.5fr) auto minmax(150px,1fr) minmax(170px,1.1fr) 112px; padding:7px 14px; border:1px solid var(--linie); border-radius:12px; background:var(--flaeche); } /* Die beiden Formulare liegen ineinander verschraenkt in EINER Zeile; ohne feste Spalten stuende „Wohin?" hinter dem Zustand, weil es im Dokument spaeter kommt. Die Ordnung der Spalten ist die Ordnung der Fragen: was ist es · wie viel · welches Thema · wohin geht es · wie sicher ist das. */ .zzeichen{grid-column:1} .ztext{grid-column:2} .zsumme{grid-column:3} .zzeile select{grid-column:4} .zzlabel{grid-column:5} button.zja, .zwoher{grid-column:6} /* Alle in DERSELBEN Rasterzeile: sonst faengt der Browser eine neue an, sobald eine Spalte zurueckspringt (das zweite Formular steht im Dokument hinter dem ersten und wuerde sonst darunter rutschen). */ .zpaar > form > *{grid-row:1} .zpaar.w-offen{border-color:var(--bad); background:color-mix(in srgb, var(--bad) 4%, var(--flaeche))} .zpaar.w-gesetzt{background:var(--flaeche2); border-color:transparent} .zpaar.w-geraten{border-color:color-mix(in srgb, var(--warte) 45%, var(--linie))} /* Beide Formulare liegen IN dieser Zeile — sie erben ihre Spalten, statt zu stapeln. */ .zpaar > form{display:contents} .zzeichen{display:grid; place-items:center; color:var(--tinte2)} .zzeichen .ikon{width:17px; height:17px; vertical-align:0} .ztext{display:flex; flex-direction:column; gap:0; min-width:0; font-size:14.5px; letter-spacing:-.01em} .ztext i{font-style:normal; font-size:12px; color:var(--tinte3)} .zsumme{font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right} .zsumme.minus{color:var(--bad)} .zsumme.plus{color:var(--gut)} .zpaar select{ width:100%; min-width:0; min-height:var(--knopf-klein); padding:0 30px 0 10px; font:inherit; font-size:13px; color:var(--tinte); background-color:var(--flaeche); border:1px solid var(--linie); border-radius:var(--wahl); } .zpaar.w-gesetzt select{background-color:var(--flaeche)} /* „Wohin?" braucht keine eigene Zeile mehr — das Wort steht als leise Vorsilbe im Feld daneben. */ .zzlabel{display:flex; align-items:center; gap:7px; min-width:0} .zzlabel > span{font-size:12px; color:var(--tinte3); white-space:nowrap} .zzwoher{display:none} .zwoher{display:inline-flex; align-items:center; gap:5px; justify-self:end; font-size:12px; color:var(--tinte3); white-space:nowrap} .zwoher .ikon{width:13px; height:13px} .zwoher.gesetzt{color:var(--gut)} .zwoher.offen{color:var(--bad)} button.zja{ justify-self:end; width:auto; min-height:var(--knopf-klein); padding:0 12px; gap:6px; font-size:13px; font-weight:600; border-radius:var(--wahl); background:color-mix(in srgb, var(--warte) 16%, var(--flaeche)); color:var(--wartetinte); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warte) 40%, transparent); } button.zja:hover{background:var(--warte); color:#fff; box-shadow:none} button.zja .ikon{width:13px; height:13px} button.zalle{ width:auto; min-height:var(--knopf-klein); padding:0 14px; gap:7px; font-size:13px; border-radius:var(--wahl); background:var(--akzent); color:var(--aufakzent); } button.zalle .ikon{width:14px; height:14px} .zfilter{flex:0 0 auto} .zfilter a{padding:0 14px; min-height:var(--knopf-klein); display:inline-flex; align-items:center; font-size:13px; text-decoration:none; color:var(--tinte2)} /* Am Telefon wird aus der Zeile eine Karte: Name und Summe oben, darunter die beiden Wahlen. */ @media (max-width:900px){ .zpaar{grid-template-columns:24px minmax(0,1fr) 118px; row-gap:8px; padding:11px 13px} /* Betrag an einer Kante, auch schmal (29.09.2026) */ /* Am Telefon gestapelt, aber in derselben Reihenfolge der Fragen wie breit: was ist es · welches Thema · wohin · wie sicher. */ .zzeichen{grid-row:1} .ztext{grid-row:1} .zsumme{grid-row:1} .zzeile select{grid-row:2; grid-column:1 / -1} .zzlabel{grid-row:3; grid-column:1 / -1} .zwoher, button.zja{grid-row:4; grid-column:1 / -1; justify-self:start} } /* ---------------------------------------------------------------- Zeitreise Die einzige Seite, die im Browser rechnet. Ohne JavaScript zeigt sie einen Satz und verweist auf die Übersicht — die kommt ganz ohne aus. */ /* ALS BLOCK DER UEBERSICHT (13.09.2026): eine Karte wie die anderen, mit eigenem Titel; das Bild darin ohne zweiten Rahmen. */ section.zr{ display:grid; gap:14px; background:var(--flaeche); border:1px solid var(--linie); border-radius:18px; padding:18px 20px 16px; min-width:0; } /* JEDES MODUL TRAEGT SEINEN TITEL (Handbuch, 13.09.2026): eine Titelzeile fuer alle Bloecke — Zeichenkachel 30 px, Titel 19 px / 600 / −0,02 em. Steht NACH allen blockeigenen h2-Regeln, damit sie ueberall gilt. */ h2.modultitel{ display:flex; align-items:center; gap:10px; margin:0; min-width:0; font-size:17px; font-weight:600; letter-spacing:-.02em; line-height:1.2; color:var(--tinte); text-align:left; text-transform:none; } h2.modultitel .mtz{ width:30px; height:30px; border-radius:9px; flex:none; display:inline-flex; align-items:center; justify-content:center; background:var(--flaeche2); color:var(--akzent); } h2.modultitel .mtz .ikon{width:17px; height:17px; display:block} h2.modultitel .mtt{min-width:0; overflow-wrap:anywhere} .meinstand h2.modultitel{margin-bottom:var(--titelabstand); align-self:flex-start} .lage h2.modultitel{margin-bottom:12px} .jahr h2.modultitel{margin-bottom:2px} @media (max-width:560px){ h2.modultitel{font-size:17px} h2.modultitel .mtz{width:27px; height:27px; border-radius:8px} } section.zr .zrbild{border:0; padding:0; border-radius:0; background:transparent} svg#zrSvg{touch-action:pan-y; cursor:crosshair} .zrkopfzeile{ /* RUHE (15.09.2026): zwei feste Spalten — links Datum, Zahl, Satz (feste Höhe), rechts die Schalter. Die Leiste wandert nie unter die Zahl, egal wie lang der Satz ist oder welche Sicht steht; erst unter 900 px steht sie in BEIDEN Sichten in einer eigenen Zeile. Christian: „Die Menüsteuerung oben bleibt statisch an der Stelle." */ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:18px 24px; } /* GEMESSEN (15.09.2026, Fassung m): Die Schalter rechts sind 635 px breit. Zwischen 900 und 1100 px Fensterbreite blieben der linken Spalte nur 190–290 px — dort brach „September 2026 · laufender Zyklus" in zwei Zeilen und der Satz darunter in drei, aber nur in der Monatssicht; im Verlauf nicht. Der Kopf wuchs um 17–36 px, Schalter und Grafik rutschten mit. Christian: „ein Text über der Zahl wird zweizeilig und dadurch verlagert sich alles nach unten. Das darf nicht passieren." Darum wandern die Schalter schon unter 1100 px in ihre eigene Zeile — die linke Spalte hat dann immer mindestens 335 px, und das reicht gemessen für jede Zeile in jeder Sicht. */ @media (max-width:1180px){ .zrkopfzeile{grid-template-columns:1fr} .zrkopfzeile .zrwahl{justify-content:flex-start} } /* LIVE GEMESSEN bei Christian (1561 px breites Fenster): der Block steht in der Übersicht neben „Mein Stand" und ist nur 906 px breit — die linke Spalte hatte 177 px, der Satz brach in drei Zeilen. Die Fensterbreite sagt also nichts; der Block selbst muss messen, wie breit ER ist. Darum ist er sein eigener Maßstab (container), und die Schalter wandern in ihre eigene Zeile, sobald der Inhalt des Blocks schmaler als 1040 px ist — egal, wie breit das Fenster ist. */ section.zr{container-type:inline-size} @container (max-width:1040px){ .zrkopfzeile{grid-template-columns:1fr} .zrkopfzeile .zrwahl{justify-content:flex-start} } /* 1040 = 335 (linke Spalte) + 24 (Lücke) + 662 (Schalter, live gemessen) + Luft */ .zrstand{display:grid; gap:2px; min-width:0} /* Die Zeile über der Zahl ist IMMER genau eine Zeile: sie bricht nie um, sondern endet notfalls mit „…". */ .zr-wann{ font-size:12px; letter-spacing:.02em; color:var(--tinte3); line-height:1.5; display:block; white-space:nowrap; overflow:hidden; text-overflow:" …"; min-width:0; } .zr-zahl{ font-size:clamp(30px, 5vw, 42px); font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1.05; } /* DIE GROSSE ZAHL TRAEGT IHR VORZEICHEN ALS FARBE — an EINER Stelle. Christian am 12.09.2026: „die schwarze positive zahl soll grün sein. Eine negative Zahl rot". Es gibt zwei solche Zahlen: den Tagesstand in der Uebersicht (.lage .zahl) und denselben Stand in der Zeitreise (.zr-zahl). Beide bedeuten dasselbe, also stehen sie hier zusammen und tragen dieselbe Regel. Die beiden alten `.minus`-Sonderregeln sind ersatzlos entfallen — sie faerbten nur das Minus und liessen das Plus schwarz. Gruen und Rot kommen aus --gut und --bad; die dunkle Palette bringt ihre eigenen Werte mit, die Regel gilt dort unveraendert. */ .meinstand .zahl, .zr-zahl{color:var(--gut)} .meinstand .zahl.minus, .zr-zahl.minus{color:var(--bad)} /* FESTE HOEHE, ZWEI ZEILEN — nicht Zierde, sondern der Grund, warum die Grafik beim Ziehen stillsteht. Christian am 12.09.2026: „je nachdem, wo man hinschiebt, springt ploetzlich die Grafik." GEMESSEN: Dieser Satz ist an einem gemessenen Tag einzeilig („Von der Bank bestaetigt.") und an einem geplanten zweizeilig („Wahrscheinlich zwischen … — gemessene Streuung, nicht geschaetzt."). Beim Ziehen ueber den heutigen Tag wechselte er die Hoehe, und ALLES darunter — Grafik, Schieber, Kacheln — rutschte um eine Zeile. Wer den Text hier aendert, prueft, dass die laengste Fassung in zwei Zeilen passt, oder zieht die Hoehe mit. */ .zr-spanne{ font-size:12px; color:var(--tinte3); line-height:1.5; max-width:62ch; min-height:calc(12.5px * 1.5 * 2); display:block; } .zr-spanne.weit b{color:var(--tinte2); font-weight:600; font-variant-numeric:tabular-nums} /* Aus demselben Grund: die Kopfzeile behaelt ihre Hoehe, egal ob der Satz eine oder zwei Zeilen braucht. */ .zrstand{min-height:calc(12.5px * 1.5 + 42px * 1.05 + 12.5px * 1.5 * 2 + 6px)} .zrfenster{ display:flex; gap:3px; padding:3px; background:var(--flaeche2); border-radius:var(--wahlleiste); flex-wrap:wrap; } .zrfenster button{ font:inherit; font-size:13px; font-weight:500; width:auto; padding:7px 13px; border:0; border-radius:var(--wahl); background:none; color:var(--tinte2); cursor:pointer; white-space:nowrap; transition:background .16s ease, color .16s ease; } /* .zrfenster button.an: Farbe und Form kommen aus der Sammelregel „Gattung A" (16.09.2026) */ .zrfenster button[hidden]{display:none} .zrfenster button.ruht, .zrfenster button:disabled{opacity:.35; cursor:default; background:none; box-shadow:none} /* GESETZ 17: zwei Sichten, ein Schalter. Die Sichtwahl steht VOR dem Zeitfenster, denn sie entscheidet, was das Fenster ueberhaupt zeigt. */ /* 8 px Lücke reichten, solange die Leisten nebeneinander standen. Sobald sie umbrechen (ab 390 px zwei Zeilen), lagen 11 px zwischen dem Knopf der einen und der Fläche der anderen Leiste — zu eng (16.09.2026, gemessen im Durchgang). Die Lücke zwischen den ZEILEN ist jetzt 16 px, die zwischen den Leisten bleibt 8 px. */ .zrwahl{display:flex; gap:16px 8px; flex-wrap:wrap; justify-content:flex-end; align-items:flex-end} /* .zrsicht button.an: siehe Gattung A — kein eigener Ton mehr */ /* Die Balken der Sicht „Monat fuer sich": gruen ueber, rot unter der Nulllinie — dieselbe Regel wie die grosse Zahl. Der gewaehlte Balken steht voll, die anderen zurueckgenommen; der laufende Zyklus traegt einen Rand, weil er noch nicht fertig ist. */ /* Rechts neben der Grafik ist Platz fuer die Skala reserviert, damit keine Zahl auf einem Balken oder der Linie liegt. Achse und Balkenzahlen enden an derselben Kante wie das Bild. */ /* GEMESSEN 26.09.2026 (Vorhaben "Umschaltreihe klebt an der Skala", seit 18.9.2026): die oberste Achsenbeschriftung in .zrwerte steht per transform:translate(-50%,-100%) direkt auf der Container-Oberkante von .zrflaeche und ragt dadurch 9px ueber die eigene Box hinaus - in den margin-bottom:12px der Umschaltreihe (.mkkopfzeile) hinein. Von den 12px blieben dadurch nur noch 3px echter Abstand. border-top:9px solid transparent auf .zrflaeche schiebt Balken UND Skala gemeinsam nach unten (die absolute .zrskala bezieht sich auf die Padding-Box, die innerhalb des Rahmens beginnt). Gemessen: 13px echter Abstand, Skala und Rasterlinien deckungsgleich. NICHT padding-top (Skala stand 9px neben ihren Linien) und NICHT margin-top (faellt mit den 12px der Kopfzeile zusammen, bringt nichts). */ .zrflaeche{position:relative; padding-right:var(--zrskala, 50px); border-top:9px solid transparent} .zrachse{margin-right:var(--zrskala, 50px)} .zrwerte{position:absolute; inset:0; right:var(--zrskala, 50px); pointer-events:none} .zrwerte span{ position:absolute; transform:translate(-50%, -100%); white-space:nowrap; font-size:12px; letter-spacing:.01em; font-variant-numeric:tabular-nums; color:var(--tinte3); } .zrwerte span.unten{transform:translate(-50%, 0)} /* Lage, nicht Vorzeichen — siehe zeitreise-block.php */ .zrwerte span.an{color:var(--tinte); font-weight:600} .zrwerte span.an.minus{color:var(--bad)} /* das Gesetz gilt auch für die hervorgehobene Zahl */ .zr-raster{stroke:var(--linie); stroke-width:1; stroke-dasharray:1 5; opacity:.9} .zrskala{position:absolute; inset:0; pointer-events:none} .zrskala span{ position:absolute; right:0; width:calc(var(--zrskala, 50px) - 6px); text-align:right; transform:translateY(-50%); white-space:nowrap; font-size:12px; letter-spacing:.01em; font-variant-numeric:tabular-nums; color:var(--tinte3); } @media (max-width:560px){ .zrbild{--zrskala:44px} } .zr-balken{fill:var(--gut); opacity:.42; transition:opacity .12s ease} .zr-balken.minus{fill:var(--bad)} .zr-balken.an{opacity:1} .zr-balken.laufend{stroke:var(--tinte2); stroke-width:1; stroke-dasharray:3 3; vector-effect:non-scaling-stroke} .zrbild{ background:var(--flaeche); border:1px solid var(--linie); border-radius:16px; padding:14px 14px 6px; } svg#zrSvg{display:block; width:100%; height:clamp(180px, 26vh, 260px)} svg#zrSvg path, svg#zrSvg circle{vector-effect:non-scaling-stroke} .zr-korridor{fill:var(--akzent); opacity:.10; stroke:none} .zr-linie{fill:none; stroke:var(--akzent); stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round} .zr-linie.unternull{stroke:var(--bad)} .zr-null{stroke:var(--linie); stroke-width:1} .zr-heute{stroke:var(--tinte3); stroke-width:1; stroke-dasharray:2 4; opacity:.7} .zr-marke{stroke:var(--tinte); stroke-width:1; opacity:.35} .zr-punkt{fill:var(--flaeche); stroke:var(--akzent); stroke-width:2.4} .zrachse{ position:relative; height:17px; margin-top:2px; font-size:12px; color:var(--tinte3); letter-spacing:.02em; } .zrachse span{position:absolute; top:0; transform:translateX(-50%); white-space:nowrap} /* DER SCHIEBER. Christian am 12.09.2026: „Der muss irgendwie einen anleuchten, das man ihn bedienen will. Momentan geht er irgendwie unter." Drei Dinge machen ihn sichtbar, ohne dass er schreit: 1. Die zurueckgelegte Strecke ist AUSGEFUELLT (--zp setzt die Zeitreise bei jeder Bewegung). Ein halb voller Balken sagt von selbst, dass man ihn ziehen kann; ein leerer Strich sagt gar nichts. 2. Der Griff traegt die Akzentfarbe FLAECHIG statt nur als Rand und hat einen eigenen Schatten — er liegt sichtbar UEBER der Bahn. 3. Beim ersten Erscheinen atmet er zweimal. Danach nie wieder: ein dauerndes Pulsieren waere genau das Rauschen, das hier raus soll. Wer „Bewegung reduzieren" eingestellt hat, sieht es gar nicht. */ /* Der Schieber ist weg (13.09.2026: "Der Schieber ist umstaendlich"); der Zeiger ueber der Linie waehlt den Tag, siehe zeitreise-block.php. */ /* Die Enden sagen, WORUEBER der Schieber laeuft. Zwei Woerter, keine Zeile Erklaertext — die Beschriftung ersetzt Prosa, sie kommt nicht dazu. */ .zr-trend{fill:none; stroke:var(--akzent); stroke-width:1; opacity:.45; stroke-dasharray:3 4} p.zrausschnitt{ margin:-6px 0 0; font-size:12px; color:var(--tinte3); letter-spacing:.01em; } p.zrausschnitt b{color:var(--tinte2); font-weight:600} /* ================================================================== „JEDER MONAT FÜR SICH" — das zweite Diagramm (16.09.2026) Christian: „Ich brauche diese Darstellung als eigenständiges Modul … wo stehe ich wann soll links sein, der Grafik soll rechts sein." Beide Kurven stehen nebeneinander und müssen deshalb DIESELBE Optik haben — Rahmen, Höhe, Schrift, Farben. Darum erbt das neue Modul die Flächen (.zrbild, .zrflaeche, .zrachse, .zrskala, .zrfenster) und bekommt hier nur das, was einen eigenen Namen braucht: Kopfzeile, Zahl und die Linien im Bild. ================================================================== */ section.mk{container-type:inline-size} section.mk .zrbild{border:0; padding:0; border-radius:0; background:transparent} .mkbild{ background:var(--flaeche); border:1px solid var(--linie); border-radius:16px; padding:14px 14px 6px; } .mkkopfzeile{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:18px 24px; margin-bottom:12px; } /* Derselbe Umbruch wie nebenan: sobald der Block selbst schmaler wird als die Kopfzeile trägt, wandern die Schalter in eine eigene Zeile. Da beide Module in der Übersicht nur eine halbe Blattbreite haben, ist das der Regelfall — gemessen, nicht geschätzt. */ @container (max-width:760px){ .mkkopfzeile{grid-template-columns:1fr} .mkkopfzeile .zrfenster{justify-content:flex-start} } @media (max-width:1180px){ .mkkopfzeile{grid-template-columns:1fr} } /* 26.09.2026, Chris (iPad): Steht die Fensterwahl allein in ihrer Zeile, ist die Leiste so breit wie das Modul - die Knöpfe teilen sich die Breite gleichmäßig. Vorher behielten sie ihre feste Breite und rechts blieb ein leeres Viertel der Leiste stehen. */ @media (max-width:1180px){ .mkkopfzeile .zrfenster > button{flex:1 1 0; min-width:0; max-width:none; --knopf-min:0; --knopf-max:none} } @container (max-width:760px){ .mkkopfzeile .zrfenster > button{flex:1 1 0; min-width:0; max-width:none; --knopf-min:0; --knopf-max:none} } /* RUHE BEIM ZIEHEN (25.10.2026). Gemessen bei 1240 px Fensterbreite: Modul 913 px, Schalter 687 px — für Zeile und Zahl blieben 156 px. Die Zeile brach bis zu viermal um, die große Zahl passte nicht mehr in die Breite, beim Ziehen sprang der Kopf um 44 px (Chris: „flattert das Fenster rauf und runter“). Die Schalter wandern darum in ihre eigene Zeile, sobald neben ihnen nicht mehr Platz für die Zahl ist: 1080 = 687 (Schalter, gemessen) + 24 (Lücke) + 369 (Zahl und Zeile). Die Zahl bricht nie um. */ @container (max-width:1080px){ .mkkopfzeile{grid-template-columns:1fr} .mkkopfzeile .zrfenster{justify-content:flex-start} .mkkopfzeile .zrfenster > button{flex:1 1 0; min-width:0; max-width:none; --knopf-min:0; --knopf-max:none} } .mk-zahl, .zr-zahl{white-space:nowrap} .mkstand{display:grid; gap:5px; min-width:0} /* Die Zeile über der Zahl ist IMMER genau eine Zeile — sonst rutscht beim Ziehen alles darunter (dasselbe Gesetz wie in „Wo stehe ich wann?"). */ .mk-wann{ font-size:12px; letter-spacing:.02em; color:var(--tinte3); line-height:1.5; display:block; white-space:nowrap; overflow:hidden; text-overflow:" …"; min-width:0; } .mk-zahl{ font-size:clamp(30px, 5vw, 42px); font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1.05; color:var(--gut); /* dasselbe Vorzeichen-Gesetz wie bei .zr-zahl */ } .mk-zahl.minus{color:var(--bad)} /* Feste Höhe: hier steht KEIN Satz unter der Zahl (Christian: „Ich will auch nicht irgendwas unten drunter"), darum nur Zeile + Zahl. */ .mkstand{min-height:calc(12.5px * 1.5 + 42px * 1.05 + 4px)} svg#mkSvg{display:block; width:100%; height:clamp(180px, 26vh, 260px); touch-action:pan-y; cursor:crosshair} svg#mkSvg path, svg#mkSvg line, svg#mkSvg circle{vector-effect:non-scaling-stroke} /* Die Nulllinie trägt hier mehr Gewicht als nebenan: Sie ist die Grenze zwischen „der Monat trägt sich" und „der Monat zehrt". */ .mknull{stroke:var(--tinte3); stroke-width:1; opacity:.55} .mklinie{fill:none; stroke:var(--akzent); stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round} /* UNTER NULL ROT (17.09.2026, Christians Gesetz vom 16.09.): Derselbe Pfad, an der Nulllinie beschnitten — oben grün, unten rot. Ein einziger grüner Strich über und unter null war ein Verstoß, den die große Zahl darüber längst nicht mehr machte. */ .mklinie.mkminus{stroke:var(--bad)} .mkheute{stroke:var(--tinte3); stroke-width:1; stroke-dasharray:2 4; opacity:.7} .mkpunkt{fill:var(--flaeche); stroke:var(--akzent); stroke-width:2.4} /* DAS ZYKLUSENDE — die Stelle, an der die grosse Zahl steht (18.09.2026). Offener Ring, damit er sich vom gefuellten „heute" unterscheidet: zwei verschiedene Aussagen, zwei verschiedene Zeichen. */ /* `.mkende` ist am 18.09.2026 wieder entfernt worden — der Ring markierte eine Zahl, die nicht auf der Linie liegt, und die Regel `.mklinie.mkminus ~ .mkende` faerbte ihn rot, sobald IRGENDWO im Bild ein rotes Stueck lag. Ergebnis: ein roter Punkt unter der Nulllinie neben einem gruenen „+1,90 €". Begruendung in monatskurve-block.php. */ .mkzeiger{stroke:var(--tinte); stroke-width:1; opacity:.35} .mkzpunkt{fill:var(--akzent); stroke:var(--flaeche); stroke-width:2} /* Der Satz unter dem Bild braucht Luft: In „Wo stehe ich wann?" zieht ihn eine negative Marge an die Achse heran, dort steht darueber aber noch die Balkenzeile. Hier stuende er sonst direkt auf den Monatsnamen der Achse (gemessen, 16.09.2026). */ .mk p.zrausschnitt{margin-top:8px} @media (max-width:560px){ .mkbild{padding:11px 10px 5px; border-radius:14px} } .zrfakten-titel{ margin:0 0 9px; font-size:12px; letter-spacing:.02em; color:var(--tinte2); } .zrfakten-titel em{font-style:normal; color:var(--tinte3)} /* In der Zeitreise sind es je nach Monat vier bis sechs Kacheln. Ein festes Vierer-Raster liesse die fuenfte allein in der zweiten Zeile stehen; auto-fit verteilt sie gleichmaessig. */ .zrfakten .kacheln{ margin-bottom:0; grid-template-columns:repeat(auto-fit, minmax(132px, 1fr)); } .zrprobe{ background:var(--flaeche); border:1px solid var(--linie); border-radius:16px; padding:17px 18px 18px; } .zrprobe-kopf h2{margin:0 0 4px; font-size:15px; font-weight:600; letter-spacing:-.01em} .zrprobe-kopf p{margin:0 0 14px; font-size:12px; line-height:1.55; color:var(--tinte3); max-width:70ch} .zrprobe-kopf p b{color:var(--tinte2)} .zrprobe-form{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px} .zrprobe-form .feld.breit{grid-column:1/-1} .zrprobe-form .feld{display:grid; gap:5px; min-width:0} .zrprobe-form .feld > span{font-size:12px; color:var(--tinte3); letter-spacing:.02em} /* background-color, NICHT background (16.09.2026): Die Kurzform loescht das Auswahlzeichen aus der Sammelregel weiter oben — gemessen an zpRichtung und zpArt, die als einzige ohne Pfeilchen dastanden. */ .zrprobe-form input, .zrprobe-form select{ width:100%; box-sizing:border-box; height:42px; padding:0 12px; font:inherit; font-size:15px; color:var(--tinte); background-color:var(--flaeche); border:1px solid var(--linie); border-radius:10px; min-width:0; } .zrprobe-form select{padding-right:32px} .zrprobe-form input:focus, .zrprobe-form select:focus{ outline:2px solid var(--akzent); outline-offset:-1px; border-color:var(--akzent); } .zrprobe-form .feld.tun{align-self:end} .zrprobe-form .feld.tun button{width:auto; justify-self:start; padding:12px 18px; border-radius:10px; font-size:14.5px} /* 29.09.2026: Familienbreite statt Spaltenbreite (Gesetz 45) */ p.zrprobe-fehler{ margin:12px 0 0; padding:10px 13px; border-radius:10px; font-size:13px; background:color-mix(in srgb, var(--bad) 10%, transparent); color:var(--bad); } ul.zrprobe-liste{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:7px} ul.zrprobe-liste li{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; padding:9px 12px; border:1px dashed var(--linie); border-radius:11px; background:var(--flaeche2); } .zp-was{font-size:14.5px; letter-spacing:-.01em} .zp-wie{font-size:12px; color:var(--tinte3)} .zp-betrag{margin-left:auto; font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap} .zp-betrag.minus{color:var(--bad)} .zp-betrag.plus{color:var(--gut)} .zp-weg{ font:inherit; font-size:17px; line-height:1; width:28px; height:28px; padding:0; border:0; border-radius:8px; background:none; color:var(--tinte3); cursor:pointer; } .zp-weg:hover{background:var(--flaeche); color:var(--bad)} @media (max-width:560px){ .zrkopfzeile{align-items:flex-start} .zrwahl{width:100%} .zrfenster{width:100%} .zrfenster button{flex:1 1 30%; padding:7px 8px; font-size:13px} .zrbild{padding:11px 10px 5px; border-radius:14px} } article.markendatei{ display:flex; gap:16px; padding:15px 17px; border:1px solid var(--linie); border-radius:14px; background:var(--flaeche); align-items:flex-start; } .md-bild{ flex:0 0 112px; height:80px; border-radius:9px; background:var(--flaeche2); display:flex; align-items:center; justify-content:center; overflow:hidden; } .md-bild img{max-width:100%; max-height:80px; display:block; object-fit:contain} .md-leer{font-size:12px; color:var(--tinte3); letter-spacing:.03em; text-transform:uppercase} .md-text{min-width:0; flex:1} .md-text h3{margin:0 0 3px; font-size:15px; letter-spacing:-.01em; text-transform:none; color:var(--tinte)} .md-hinweis{margin:0 0 6px; font-size:12px; color:var(--tinte3); line-height:1.45} .md-stand{margin:0 0 11px; font-size:12px; color:var(--tinte2); line-height:1.45} article.markendatei:not(.da) .md-stand{color:var(--tinte3)} .md-sich{display:inline-block; margin-top:3px; color:var(--tinte3); font-size:12px} .md-tun button.weg.zurueck{color:var(--akzent)} .md-tun button.weg.zurueck:hover{color:var(--akzent); opacity:.75} .md-tun{display:flex; gap:12px; align-items:center; flex-wrap:wrap} /* ALLE KNOEPFE AUF EINER LINIE (16.09.2026). Christian: „Die sind gegeneinander versetzt. Ersetzen, holen. Die sind nicht in einer Ebene. Unprofessionell." GEMESSEN: „Holen" lag 21 px tiefer als „Ersetzen" — das Adressfeld daneben war hoeher als das Dateifeld, und die Zeile zentrierte jede Gruppe fuer sich. Jetzt haben Feld, Auswahl und Knopf dieselbe Hoehe, und die Gruppen richten sich oben aus: eine Linie, ueber die ganze Zeile. */ .md-tun{align-items:center; row-gap:12px} .md-tun form{align-items:center; row-gap:12px} .md-tun input[type=url], .md-tun input[type=text], .md-tun select, .md-tun input[type=file]{min-height:var(--knopf); box-sizing:border-box} /* Das Adressfeld braucht Platz und bekommt deshalb eine eigene, volle Zeile — dann steht „Holen" mit seinem Feld auf einer Linie, und „Ersetzen", „Übernehmen" und „Entfernen" stehen darueber auf einer zweiten. Zwei klare Ebenen statt halber Versaetze. */ .md-tun form.bmholen{flex:1 1 100%; order:9; margin-top:2px} .md-tun form.bmholen input[type=url]{flex:1 1 auto; min-width:0} /* Sicherung: Hinweis in der Übersicht (nur wenn überfällig) und Artikel in den Einstellungen */ p.sicherungshinweis{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px; padding:10px 14px; border-radius:12px; background:color-mix(in srgb, var(--warte) 12%, var(--flaeche)); color:var(--tinte); font-size:13px; border:1px solid color-mix(in srgb, var(--warte) 40%, var(--linie))} p.sicherungshinweis .ikon{width:16px; height:16px; color:var(--warte); flex:none} p.sicherungshinweis span{flex:1 1 auto; min-width:0} p.sicherungshinweis a{color:var(--akzent); text-decoration:none; border-bottom:1px solid currentColor; white-space:nowrap} .eink.sicherung.ueberfaellig .ein-gemessen{color:var(--wartetinte)} .eink .ein-gemessen.klein{font-size:12px; color:var(--tinte3)} .eink details.sverlauf, .eink details.wiederher{margin:8px 0 0; font-size:12px} .eink details summary{cursor:pointer; color:var(--akzent)} .eink details.sverlauf ul{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:4px} .eink details.sverlauf li{display:flex; gap:12px; font-variant-numeric:tabular-nums} .eink details.sverlauf li span:first-child{color:var(--tinte3); flex:0 0 110px} .eink details.sverlauf li.schlecht span:last-child{color:var(--bad)} .eink details.wiederher pre{margin:8px 0 0; max-height:420px; overflow:auto; font-size:12px; line-height:1.45; white-space:pre-wrap; background:var(--flaeche2); border-radius:10px; padding:12px} .eink .feld.tun{display:flex; gap:10px; align-items:center; flex-wrap:wrap} .eink .feld.tun a.knopfleise{text-decoration:none} /* STEUER — der Kalender (13./14.09.2026) */ .stwahl{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:0 0 26px} .stwahl .umschalter a{display:inline-flex; align-items:center; gap:8px} /* Luft nach dem CD-Handbuch (Maße und Abstände): 26 px zwischen Blöcken, 24 px in großen Karten, 18 px unter dem Modultitel. Christian am 14.09.2026: „Die Texte kleben beieinander … viel zu pummelig … mehr Großzügigkeit zwischen den Bereichen.“ */ section.strechnung, section.ststamm, section.stkalender, section.stcockpit, section.stgewerbe, section.stkette{background:var(--flaeche); border:1px solid var(--linie); border-radius:16px; padding:24px; margin:0 0 26px} section.strechnung h2.modultitel, section.ststamm h2.modultitel{margin-bottom:18px} .stkacheln{grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:0} /* GEMESSEN bei 360 px: zwei Spalten à 133 px — „Homeoffice-Pauschale" brach um; unter 400 px eine Spalte. */ @media (max-width:400px){ .stkacheln{grid-template-columns:1fr} } @media (min-width:761px){ .stkacheln{grid-template-columns:repeat(3,1fr)} } /* DIE ZAHL BRICHT NIE UM (Christian 14.09.2026: „Homeoffice-Pauschale … schon bricht die Zahl um in die nächste Zeile. Das darf auch nicht sein"). GEMESSEN live bei 1561 px Fenster: sechs Spalten à 184 px, die Beschriftung HOMEOFFICE-PAUSCHALE brach auf drei Zeilen, die Zahl rutschte von 33 auf 66 px. Sechs Spalten gibt es deshalb erst, wenn jede Kachel die längste Beschriftung in EINER Zeile trägt (ab 1600 px: ≥ 190 px je Kachel); darunter drei. Handbuchregel „Die Zahl bricht nie um": Spaltenzahl folgt der längsten Beschriftung, nie umgekehrt. */ @media (min-width:1181px){ .stkacheln{grid-template-columns:repeat(6,1fr)} } @container (max-width:200px){ .stkacheln .kachel .kt{letter-spacing:.01em; font-size:12px} } .stkacheln .kachel{padding:14px 16px 16px; gap:4px} .stkachel .kz, .kachel.stgeld .kz{font-variant-numeric:tabular-nums} p.stsatz{margin:18px 0 0; font-size:13px; color:var(--tinte2); line-height:1.6; max-width:80ch} p.stsatz b{color:var(--tinte); font-variant-numeric:tabular-nums} form.ststammform{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1.6fr) minmax(0,.8fr) auto; gap:12px; align-items:end} form.ststammform label{display:grid; gap:4px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinte3)} form.ststammform input[type=text]{margin:0; height:44px} form.ststammform button{width:auto; height:44px; padding-block:0} @media (max-width:760px){ form.ststammform{grid-template-columns:1fr} } section.ststamm p.vwsatz{margin:14px 0 0} form.ststammform label.stkm{position:relative} form.ststammform label.stkm .stkmreihe{display:flex; gap:8px} form.ststammform label.stkm .stkmreihe input{flex:1 1 auto; min-width:0} form.ststammform button.stmessen{width:auto; height:44px; padding:0 14px; background:transparent; color:var(--akzent); border:1px solid var(--akzent); box-shadow:none; font-weight:600; flex:none} /* ARBEITSSTÄTTE AUF DEM IPAD HOCHKANT (26.09.2026, Chris: „Achtung, Fehler … fehlerhafte Darstellung im Steuermodul“). Gemessen: „Messen“ erbte die allgemeine Knopfbreite (min-width 168 px) und lag in einer 215-px-Spalte - das Kilometerfeld schrumpfte auf 39 px (Wert abgeschnitten), bei schmaler Seite schob sich „Speichern“ über „Messen“. Jetzt: „Messen“ so breit wie sein Wort, die Kilometerspalte mindestens 190 px, bis 1100 px Fensterbreite zwei Spalten (Arbeitgeber | Arbeitsstätte, darunter Entfernung + Messen | Speichern rechtsbündig), bis 760 px eine. */ form.ststammform button.stmessen{min-width:0} /* FELDKNOPF NACH EINER BESCHRIFTUNG (29.09.2026, Vorhaben 99). Gemessen: In den Vertragszeilen („Kündigungsfrist eintragen …“, „läuft bis …“) reichte der Hover-Saum des Feldknopfs 2,4 px in das letzte Zeichen der Beschriftung. Nach einer Beschriftung braucht der Knopf keinen linken Saum — sein Text steht ohnehin nicht an einer Spaltenkante. */ p.vttun button.bmfeld{margin-left:0} form.ststammform{grid-template-columns:minmax(0,1.2fr) minmax(0,1.6fr) minmax(190px,.9fr) auto} @media (max-width:1180px){ form.ststammform{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} form.ststammform > button{justify-self:end} } @media (max-width:760px){ form.ststammform{grid-template-columns:1fr} form.ststammform > button{justify-self:stretch} } /* Die 13 Stationen von „Unser Weg zur Steuer“: Tippfläche so breit wie die Station, nicht 168 px - vorher überlappten sich die Tippflächen je 78 px (vom Wächter „ueberdeckung“ gefunden, 26.09.2026). */ button.ckknopf{min-width:0} /* DER KALENDER (26.09.2026, Chris am iPad hochkant: „Du siehst hier an der Kalenderdarstellung, was das sein soll. Da stimmt was nicht.“). Gemessen: Jeder Tag ist ein Knopf und erbte die allgemeine Knopfbreite 168 px - in einer 36-px-Spalte. Die Tage liefen über ihre Nachbarn, die Wochen zerfielen. Jetzt füllt jeder Tag genau seine Spalte; die Höhe (44 px, Tippfläche) bleibt. */ button.sttag{min-width:0; width:100%; max-width:none} form.ststammform button.stmessen:disabled{opacity:.5} form.ststammform p.stmessung{grid-column:1 / -1; margin:2px 0 0; /* 29.09.2026: 12 px zum Knopf darüber (gemessen 10) */ font-size:12px; color:var(--tinte3); min-height:1em; line-height:1.5} form.ststammform p.stmessung.gut{color:var(--gut)} form.ststammform p.stmessung.schlecht{color:var(--bad)} /* Der Kalender ist zugeklappt (Christian 14.09.2026: „nicht so voll ausfahren … sonst erschlägt er uns; wir haben die Schnelleingabe") — offen nur, wenn er die Quelle ist und Tage trägt. */ details.stkalauf > summary{list-style:none; cursor:pointer} details.stkalauf > summary::-webkit-details-marker{display:none} details.stkalauf > summary h2.modultitel{margin-bottom:0} details.stkalauf[open] > summary h2.modultitel{margin-bottom:18px} details.stkalauf > summary .stkalhinweis::after{content:" ▾"; color:var(--tinte3)} details.stkalauf[open] > summary .stkalhinweis::after{content:" ▴"} p.stlegende{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; margin:0 0 22px; font-size:12px; color:var(--tinte2)} p.stlegende span{display:inline-flex; align-items:center; gap:6px} p.stlegende .sthinweis{color:var(--tinte3); flex-basis:100%; display:block; white-space:normal; min-width:0} i.stk{display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:6px; font-style:normal; font-size:12px; font-weight:700; background:var(--flaeche2); color:var(--tinte2)} .stmonate{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(332px,100%),1fr)); gap:30px 24px} /* B4 (04.10.2026): 7 Tage x 44 px + 6 x 4 px = 332 px — bei 260 px lagen die Tage am Schreibtisch 4 px uebereinander */ article.stmonat h3{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 10px; font-size:15px} button.stfuellen{width:auto; padding:4px 9px; font-size:12px; font-weight:500; border-radius:8px; background:var(--flaeche2); color:var(--tinte2); box-shadow:none} button.stfuellen:hover{color:var(--tinte)} .stgitter{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px} /* minmax(0,…): sonst ist die Spalte so breit wie ihr Inhalt und das Gitter laeuft aus dem Fenster (16.09.2026 gemessen: „Mo–So" bei 360 px 13 px ueber den Rand) */ .stgitter .stwt{font-size:12px; color:var(--tinte3); text-align:center; padding:2px 0 6px} .stgitter .stleer{} button.sttag{width:auto; aspect-ratio:1; padding:0; border-radius:8px; background:var(--flaeche2); color:var(--tinte); box-shadow:none; display:grid; place-items:center; gap:0; font-size:12px; line-height:1; position:relative; transition:background .12s ease} button.sttag .stz{font-variant-numeric:tabular-nums; font-weight:500} button.sttag .stk{font-size:11.5px; font-weight:700; color:var(--tinte3); min-height:12px} /* 29.09.2026: 9,5 → 11,5 px (Untergrenze der Schriftskala) */ button.sttag.we{background:transparent; color:var(--tinte3)} button.sttag.feier{background:transparent; color:var(--tinte3); outline:1px dashed var(--linie); outline-offset:-1px} button.sttag.kommt{opacity:.55} button.sttag.heute{outline:2px solid var(--akzent); outline-offset:-2px} button.sttag:hover{box-shadow:inset 0 0 0 1px var(--tinte3)} /* keine Bewegung beim Darueberfahren (Gesetz) */ button.sttag.arbeit, i.stk.arbeit{background:var(--akzent); color:var(--aufakzent)} button.sttag.arbeit .stk, i.stk.arbeit{color:var(--aufakzent)} button.sttag.home, i.stk.home{background:color-mix(in srgb, var(--akzent) 22%, var(--flaeche)); color:var(--akzent)} button.sttag.home .stk, i.stk.home{color:var(--akzent)} button.sttag.urlaub, i.stk.urlaub{background:color-mix(in srgb, var(--gut) 24%, var(--flaeche)); color:var(--gut)} button.sttag.urlaub .stk, i.stk.urlaub{color:var(--gut)} button.sttag.krank, i.stk.krank{background:color-mix(in srgb, var(--warte) 28%, var(--flaeche)); color:#7a4d0a} button.sttag.krank .stk, i.stk.krank{color:#7a4d0a} button.sttag.frei, i.stk.frei{background:var(--flaeche); color:var(--tinte3); outline:1px solid var(--linie); outline-offset:-1px} i.stk.feier{background:transparent; outline:1px dashed var(--linie); outline-offset:-1px} button.sttag.laedt{opacity:.5} .umschalter.konten a.st .ikon{width:17px; height:17px; color:var(--tinte3)} .umschalter.konten a.st.aktiv .ikon{color:currentColor} /* BELEGE und STEUERBERATER-PAKET (14.09.2026) */ section.stbelege, section.stpaket{background:var(--flaeche); border:1px solid var(--linie); border-radius:16px; padding:24px; margin:0 0 26px} section.stbelege h2.modultitel, section.stpaket h2.modultitel{margin-bottom:var(--titelabstand)} /* EIN TITELABSTAND FÜR ALLE MODULE (26.09.2026). Chris: unter „Die Kette 2026“ klebt der Text an der Überschrift - „denselben Abstand wie bei der Versandzentrale … einheitlich … Warum wird es immer noch nicht beherzigt?“ Gemessen auf allen Seiten: der Grundwert war 0, jedes Modul hatte seinen eigenen Flicken - 18 px (Steuer, Vermögen), 14 px (Belege, Versandzentrale), 8 px (Mein Stand), 0 px (Kette, „Wann wird es leichter“, alle fünf Module der Rente). Jetzt EIN Wert, --titelabstand, für jeden Modultitel; der Gestaltwächter meldet jede Abweichung (Befund „titelabstand“, Ampel in Verwaltung). Ausnahmen nur, wo der Titel in einer Kopfzeile NEBEN seinem Inhalt steht (.tabkopf, .jahr) und wo ein Raster seinen eigenen Zeilenabstand mitbringt (Freistellung: 14 px Raster + 4 px = 18 px). */ :root{--titelabstand:18px} h2.modultitel{margin-bottom:var(--titelabstand)} .tabkopf > h2.modultitel{margin-bottom:0} /* Bricht die Kopfzeile um (iPad hochkant, 834 px - vom Wächter gemeldet 26.09.2026), steht der Umschalter unter dem Titel: dann gilt auch dort der Titelabstand. */ .tabkopf{row-gap:var(--titelabstand)} section.stfrei > h2.modultitel{margin-bottom:calc(var(--titelabstand) - 14px)} section.ubreisen > h2.modultitel ~ .ubbild{margin-top:0} /* BELEGE UND KETTE: DIE EINZELBEREICHE BRAUCHEN LUFT (26.09.2026). Chris: „Die einzelnen Bereiche kleben aneinander.“ Gemessen: Leiste „Was im Scan-Ordner liegt“ → Ablage 0 px; Satz „Für 2026 ist noch nichts passiert“ → erste Station der Kette 0 px. Jetzt derselbe Takt wie zwischen Ablage und Scan-Karte daneben (.bmwege, 14 px) und wie unter jedem Einleitungssatz (p.vwsatz, 14 px). */ section.stbelege > details.stscanblick{margin-bottom:14px} section.stkette > .ktschritte{margin-top:14px} h2.modultitel .mtzusatz{margin-left:auto; font-size:13px; font-weight:500; color:var(--tinte3); font-variant-numeric:tabular-nums; white-space:nowrap} /* Am Telefon drueckte der Zusatz den Titel in vier Zeilen (gemessen 390 px, „Unser Weg zur Steuer 2026"). Dort steht er darunter, ueber die ganze Breite. */ @media (max-width:560px){ h2.modultitel{flex-wrap:wrap} h2.modultitel .mtzusatz{margin-left:0; flex-basis:100%; order:3} } /* DER BELEGMANAGER (15.09.2026): Ablagefläche, Schwung, Balken, Dateizeichen, Felder an Ort und Stelle, Auswahlleiste */ .bmablage{margin:0 0 24px} .bmwege{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:14px; align-items:stretch} @media (max-width:760px){ .bmwege{grid-template-columns:1fr} } .bmscan{display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; padding:22px 22px; border-radius:16px; border:1px solid var(--linie); background:var(--flaeche); text-decoration:none; color:var(--tinte); transition:border-color .15s, box-shadow .15s} .bmscan:hover{border-color:var(--akzent); box-shadow:0 4px 14px rgba(15,30,31,.08)} .bmscan > .ikon{width:28px; height:28px; color:var(--akzent)} .bmscan p{margin:0; font-size:15px} .bmscan small{font-size:12px; line-height:1.5; color:var(--tinte3)} .bmscanstand{display:inline-flex; align-items:center; gap:6px; margin-top:6px; padding:5px 10px; border-radius:999px; font-size:12px; font-weight:500; background:var(--flaeche2); color:var(--tinte2)} .bmscanstand .ikon{width:13px; height:13px; color:var(--gut)} .bmscanstand.wartet{background:color-mix(in srgb, var(--warte) 14%, var(--flaeche)); color:var(--tinte)} .bmscanstand.wartet .ikon{color:var(--warte)} .bmzone.klein + .bmscan{padding:12px 16px; flex-direction:row; align-items:center; gap:10px; flex-wrap:wrap} .bmzone.klein + .bmscan small{display:none} .bmzone.klein + .bmscan > .ikon{width:20px; height:20px} .bmzone.klein + .bmscan .bmscanstand{margin:0} .bmzone{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:34px 20px; border:2px dashed var(--linie); border-radius:16px; background:var(--flaeche2); text-align:center; cursor:pointer; transition:border-color .15s, background .15s, padding .15s} .bmzone:hover, .bmzone:focus-visible{border-color:var(--akzent); outline:none} .bmzone.zieht{border-color:var(--akzent); background:color-mix(in srgb, var(--akzent) 10%, var(--flaeche))} .bmzone .ikon{width:30px; height:30px; color:var(--akzent)} .bmzone p{margin:0; font-size:15px; color:var(--tinte)} .bmzone p u{color:var(--akzent); text-decoration-thickness:1px; text-underline-offset:3px} .bmzone small{font-size:12px; color:var(--tinte3)} .bmzone.klein{flex-direction:row; padding:12px 16px; gap:12px} .bmzone.klein .ikon{width:20px; height:20px} .bmzone.klein small{display:none} .bmschwung{margin-top:14px; padding:16px 18px; border:1px solid var(--linie); border-radius:16px; background:var(--flaeche)} .bmvorgabe{display:flex; gap:14px; align-items:end; flex-wrap:wrap; margin-bottom:12px} .bmvorgabetitel{font-size:13px; font-weight:600; color:var(--tinte2); padding-bottom:12px} .bmvorgabe label{display:grid; gap:4px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinte3); min-width:0} .bmvorgabe select{height:40px; padding:0 34px 0 12px; font:inherit; font-size:14.5px; border:1px solid var(--linie); border-radius:10px; background-color:var(--flaeche); color:var(--tinte); appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20width%3D'11'%20height%3D'7'%20viewBox%3D'0%200%2011%207'%20fill%3D'none'%20stroke%3D'%234C6062'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M1%201.3%205.5%205.7%2010%201.3'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; background-size:11px 7px} table.bmwarte{width:100%; border-collapse:collapse; font-size:13px} table.bmwarte th{font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinte3); text-align:left; padding:6px 8px; font-weight:500; border-bottom:1px solid var(--linie)} table.bmwarte td{padding:7px 8px; border-bottom:1px solid var(--linie); vertical-align:middle} table.bmwarte th.z, table.bmwarte td.z{text-align:right} table.bmwarte input[type=text], table.bmwarte input[type=date], table.bmwarte select{box-sizing:border-box; width:100%; height:36px; padding:0 10px; font:inherit; font-size:13.5px; border:1px solid transparent; border-radius:8px; background-color:var(--flaeche2); color:var(--tinte)} table.bmwarte input:focus, table.bmwarte select:focus{outline:none; border-color:var(--akzent); background-color:var(--flaeche)} table.bmwarte .bmzbetrag{text-align:right; font-variant-numeric:tabular-nums; width:110px} table.bmwarte .bmzdatum{width:150px} table.bmwarte .bmquelle{display:block; font-size:12px; color:var(--tinte3); margin-top:2px; overflow:hidden; text-overflow:" …"; white-space:nowrap; max-width:320px} table.bmwarte .bmgroesse{color:var(--tinte3); font-variant-numeric:tabular-nums; white-space:nowrap} table.bmwarte tr.vorgeschlagen .bmzdatum, table.bmwarte tr.vorgeschlagen .bmzbetrag{background:color-mix(in srgb, var(--warte) 12%, var(--flaeche))} table.bmwarte .bmzstand{width:150px; text-align:right} table.bmwarte .bmzweg{width:28px; height:28px; padding:0; border-radius:8px; background:transparent; color:var(--tinte3); font-size:17px; line-height:1; box-shadow:none} table.bmwarte .bmzweg:hover{color:var(--bad); background:var(--flaeche2)} table.bmwarte tr.fertig td{color:var(--tinte3)} table.bmwarte tr.fertig input, table.bmwarte tr.fertig select{opacity:.6} table.bmwarte tr.fehler .bmzfehler{color:var(--bad); font-size:12px; display:block; text-align:right} table.bmwarte .bmzsatz{display:block; font-size:12px; color:var(--tinte3); margin-top:3px} table.bmwarte tr.prueft .bmzsatz::after{content:""; display:inline-block; width:10px; height:10px; margin-left:6px; border:2px solid var(--linie); border-top-color:var(--akzent); border-radius:50%; vertical-align:-2px; animation:bmdreh .8s linear infinite} @keyframes bmdreh{to{transform:rotate(360deg)}} .bmhaken{display:inline-flex; width:22px; height:22px; border-radius:50%; background:var(--gut); color:#fff; align-items:center; justify-content:center; font-size:13px; font-weight:700} .bmbalken{height:6px; border-radius:3px; background:var(--linie); overflow:hidden} .bmbalken i{display:block; height:100%; width:0; background:var(--akzent); transition:width .2s linear} .bmbalken.klein{height:4px} .bmgesamt{margin:0 0 12px; padding:12px 14px; border-radius:12px; background:var(--flaeche2)} .bmgesamt .bmbalken{height:10px; border-radius:5px; margin-top:8px} .bmgesamtkopf{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--tinte)} .bmgesamtkopf .bmgrest{color:var(--tinte3); font-variant-numeric:tabular-nums} .bmtasten{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px} .bmtasten button{width:auto; height:42px; padding:0 16px; display:inline-flex; align-items:center; gap:8px} .bmtasten button .ikon{width:16px; height:16px} .bmstand{margin:0; font-size:13px; color:var(--tinte2); flex:1 1 100%} .bmstand.schlecht{color:var(--bad)} .bmstand.gut{color:var(--gut)} .bmablage.laeuft .bmzone{pointer-events:none; opacity:.6} /* Dateizeichen: eine Form, je Art eine Farbe — PDF rot-braun, Bild grün-blau, Word blau, sonst grau */ td.bmwahl, th.bmwahl{cursor:pointer} /* die ganze Zelle waehlt die Zeile — das Haekchen ist nur das Bild dazu (16.09.2026) */ td.bmwahl input, th.bmwahl input{width:18px; height:18px; margin:0; position:relative; z-index:1} /* GEMESSEN 16.09.2026: Der 44-px-Schutzraum des Ziehgriffs lag ueber dem Haekchen daneben — ein Klick genau auf das Haekchen traf den Griff und tat nichts. Das Haekchen liegt jetzt oben; der Griff behaelt seinen Schutzraum. (Wer das aendert: pruef/belegmanager.js misst es.) */ .bmart{display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:22px; padding:0 6px; border-radius:6px; font-size:12px; font-weight:700; letter-spacing:.04em; font-style:normal; color:#fff; background:var(--tinte3)} .bmart.pdf{background:#B5483A} .bmart.bild{background:#2F7F86} .bmart.word{background:#2B5797} .bmart.sonst{background:var(--tinte3)} .bmart.klein{min-width:auto; height:20px; padding:0 6px; font-size:11.5px; border-radius:4px; vertical-align:1px} /* Signet im farbigen Feld (wie die Marken im Cockpit), kein Fliesstext */ table.stbelegliste a.stbild .bmart{width:44px; height:44px; min-width:0; border-radius:10px; font-size:12px} /* Felder an Ort und Stelle */ /* EIN FELDKNOPF IST EIN TEXT, KEIN KNOPF DER FAMILIE (20.09.2026). GEMESSEN, nachdem Christian die überlappende Quellzeile gesehen hatte: `max-width:340px` und `white-space:nowrap` aus der Knopffamilie klemmten den Text ab — er lief sichtbar über den Nachbartext. Ein Feld trägt den Satz, der darin steht, und bricht um wie Fließtext. */ /* WAS VERSTECKT IST, IST WEG (20.09.2026). Christian hat es am iPad gefunden: Beim Klick in einen Betrag blieb der alte Wert stehen und das Eingabefeld legte sich daneben über den Entfernen-Knopf — nichts mehr lesbar, nichts mehr eingebbar. URSACHE, gemessen: `hidden` war gesetzt, aber die eigene Regel `display:inline` des Feldknopfes schlug das `display:none`, das der Browser an `[hidden]` hängt. Am Schreibtisch passte das Feld noch daneben, am iPad nicht mehr. `hidden` ist ein ZUSTAND, kein Vorschlag: Diese Regel gilt für die ganze Seite und für jedes Bauteil, das noch kommt. */ [hidden]{display:none !important} button.bmfeld{--knopf-min:0; --knopf-max:none; --knopf-breit:auto; width:auto; max-width:none; min-width:0; height:auto; min-height:0; white-space:normal; overflow-wrap:anywhere; padding:2px 5px; margin:-2px -5px; border-radius:6px; background:transparent; color:inherit; /* 5 statt 6 px (05.10.2026): zwei Werte mit „ · “ dazwischen überdeckten sich um 1 px (Wächter, Route) */ font:inherit; font-weight:inherit; text-align:inherit; box-shadow:none; cursor:text; display:inline; line-height:inherit} button.bmfeld:hover{background:var(--flaeche2)} button.bmfeld.frisch{background:color-mix(in srgb, var(--gut) 15%, transparent)} button.bmfeld.schief{background:color-mix(in srgb, var(--bad) 15%, transparent)} button.bmfeld.bmname{color:var(--tinte); font-weight:500} td.z button.bmfeld{font-variant-numeric:tabular-nums} input.bmedit{box-sizing:border-box; font:inherit; font-size:13px; height:32px; padding:0 8px; border:1px solid var(--akzent); border-radius:8px; background:var(--flaeche); color:var(--tinte); width:100%; min-width:110px} /* Ziehen */ .bmgriff{display:inline-grid; gap:3px; padding:2px 6px 2px 2px; color:var(--tinte3); cursor:grab; vertical-align:middle} .bmgriff i{display:block; width:3px; height:3px; border-radius:50%; background:currentColor; box-shadow:6px 0 0 currentColor} .bmgriff:active{cursor:grabbing} tr.zieht{opacity:.35} tr.zielo td{box-shadow:inset 0 3px 0 var(--akzent)} tr.zielu td{box-shadow:inset 0 -3px 0 var(--akzent)} tbody.gesichert tr.stzeile td{transition:background .3s} table.bmwarte td.bmzart{white-space:nowrap} p.bmordnung{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 10px; font-size:12px; color:var(--tinte3)} p.bmordnung span{display:inline-flex; align-items:center; gap:6px} p.bmordnung .ikon{width:13px; height:13px} p.bmordnung button[hidden]{display:none} table.bmliste{width:100%} p.bmordnung button{width:auto; height:32px; padding:0 12px; font-size:12px; background:var(--flaeche); color:var(--tinte); border:1px solid var(--linie); box-shadow:none} /* Auswahl */ table.bmliste th.bmwahl, table.bmliste td.bmwahl{width:52px; padding-right:0; white-space:nowrap} table.bmliste input[type=checkbox]{width:16px; height:16px; margin:0; accent-color:var(--akzent); cursor:pointer} table.bmliste tr.gewaehlt td{background:color-mix(in srgb, var(--akzent) 6%, transparent)} table.bmliste th[data-sort]{cursor:pointer; user-select:none} table.bmliste th[data-sort]:hover{color:var(--tinte)} table.bmliste th[aria-sort=ascending]::after{content:" ↑"} table.bmliste th[aria-sort=descending]::after{content:" ↓"} form.bmsammel{display:flex; gap:10px; align-items:end; flex-wrap:wrap; margin:0 0 12px; padding:12px 14px; border-radius:12px; background:color-mix(in srgb, var(--akzent) 8%, var(--flaeche)); border:1px solid color-mix(in srgb, var(--akzent) 30%, var(--linie))} form.bmsammel[hidden]{display:none} form.bmsammel .bmzahl{font-size:13px; color:var(--tinte); padding-bottom:10px} form.bmsammel .bmzahl b{color:var(--akzent)} form.bmsammel label{display:grid; gap:4px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinte3)} form.bmsammel select{height:38px; padding:0 30px 0 10px; font:inherit; font-size:13px; border:1px solid var(--linie); border-radius:9px; background-color:var(--flaeche); color:var(--tinte)} form.bmsammel button{width:auto; height:38px; padding:0 14px; font-size:13px} form.bmsammel .weg{background:transparent; color:var(--bad); border:1px solid var(--bad)} @media (max-width:760px){ .bmzone{padding:22px 14px} table.bmwarte .bmquelle{max-width:160px} .bmvorgabe label{flex:1 1 140px} } form.stbelegform{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1.4fr) minmax(0,.7fr) minmax(0,.9fr); gap:14px; align-items:end; margin:0 0 26px} form.stbelegform label{display:grid; gap:4px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinte3); min-width:0} form.stbelegform label.stnotiz{grid-column:1 / span 3} form.stbelegform input[type=text], form.stbelegform input[type=date], form.stbelegform input[type=datetime-local], form.stbelegform select, form.stbelegform input[type=file]{box-sizing:border-box; width:100%; height:var(--knopf); /* datetime-local fehlte hier und stand bei 21 px (16.09.2026 gemessen) */ padding:0 12px; margin:0; font:inherit; font-size:15px; line-height:normal; color:var(--tinte); background-color:var(--flaeche); border:1px solid var(--linie); border-radius:10px; min-width:0} form.stbelegform input[type=file]{padding:10px 12px; font-size:13px; color:var(--tinte2)} form.stbelegform select{appearance:none; -webkit-appearance:none; padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20width%3D'11'%20height%3D'7'%20viewBox%3D'0%200%2011%207'%20fill%3D'none'%20stroke%3D'%234C6062'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M1%201.3%205.5%205.7%2010%201.3'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; background-size:11px 7px} form.stbelegform input:focus, form.stbelegform select:focus{outline:2px solid var(--akzent); outline-offset:-1px; border-color:var(--akzent)} form.stbelegform button{width:auto; height:var(--knopf); display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 16px} form.stbelegform button .ikon{width:16px; height:16px} @media (max-width:900px){ form.stbelegform{grid-template-columns:1fr 1fr} form.stbelegform label.stnotiz{grid-column:1 / span 2} } @media (max-width:560px){ form.stbelegform{grid-template-columns:1fr} form.stbelegform label.stnotiz{grid-column:auto} } p.stleersatz{margin:0; font-size:13px; color:var(--tinte3)} section.stmiete{background:var(--flaeche); border:1px solid var(--linie); border-radius:16px; padding:24px; margin:0 0 26px} section.stmiete h2.modultitel{margin-bottom:18px} section.stmiete .mtkarte{margin-bottom:18px} .mtstufen{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13px; color:var(--tinte2)} .mtstufe{display:inline-flex; align-items:center; gap:8px; padding:6px 10px 6px 12px; border-radius:10px; background:var(--flaeche2)} .mtstufe b{color:var(--tinte); font-variant-numeric:tabular-nums} .mtstufe form{margin:0; display:inline-flex} .mtstufe button.weg{width:auto; padding:3px 8px; font-size:12px; background:transparent; color:var(--tinte3); border:1px solid var(--linie); box-shadow:none; border-radius:6px} .mtstufe button.weg:hover{color:var(--bad); border-color:var(--bad)} details.mteingaenge summary{cursor:pointer; font-size:13px; color:var(--akzent); list-style:none} details.mteingaenge summary::-webkit-details-marker{display:none} details.mteingaenge table.mttab{margin-top:10px} table.mttab td.abw{color:var(--wartetinte); font-weight:600} details.vmneu.mtneu{margin-top:4px} /* PS AUF KLEINEN TELEFONEN (29.09.2026) — Hülle siehe Skript „PS AUF KLEINEN TELEFONEN“. */ @media (max-width:400px){ span.pskurz{font-size:0} span.pskurz::after{content:attr(data-k); font-size:var(--psgross, 15px)} } /* PAKET SENDEN (29.09.2026): Satz über dem Knopf, Knopf nur mit der Handlung. */ form.stpaketform p.kwhinweis{margin:0 0 10px; font-size:14.5px; line-height:1.45; color:var(--tinte2); max-width:520px} /* MIETEINGÄNGE AUF DEM TELEFON (29.09.2026, gemessen vom CI-Wächter). Die Tabelle erbte das Kartenraster der Belegliste — dort gibt es EINE Zahl je Zeile. Hier sind es drei: Betrag, Soll laut Stufe, Abweichung lagen alle in derselben Rasterzelle übereinander (390 px: drei Beträge auf 252–323 px, gleiche Höhe). Jetzt: Betrag oben rechts, darunter der Monat, dann Soll und Abweichung mit Beschriftung, Zahlen rechtsbündig. */ @media (max-width:760px){ table.stbelegliste.mttab tbody tr{grid-template-areas:"datum betrag" "kat kat" "soll soll" "abw abw"} table.stbelegliste.mttab tbody td.z:nth-child(3){grid-area:betrag; text-align:right; font-weight:600} table.stbelegliste.mttab tbody td.z:nth-child(4){grid-area:soll} table.stbelegliste.mttab tbody td.z:nth-child(5){grid-area:abw} table.stbelegliste.mttab tbody td.z:nth-child(n+4){display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:13px; color:var(--tinte2); text-align:right} table.stbelegliste.mttab tbody td.z:nth-child(n+4)::before{content:attr(data-k); text-align:left; font-weight:400; color:var(--tinte2)} table.stbelegliste.mttab tbody td.z.abw{color:var(--wartetinte)} } /* SICHERUNG HERUNTERLADEN (29.09.2026): Der Knopf füllte auf breiten Fenstern die ganze Karte (511 px). Ab 561 px trägt er seine eigene Breite — darunter gilt die Familienregel (volle Breite). */ @media (min-width:561px){ article.eink .feld.tun > a.knopf{width:auto; align-self:flex-start} } section.stschnell{background:var(--flaeche); border:1px solid var(--linie); border-radius:16px; padding:24px; margin:0 0 26px} section.stschnell h2.modultitel{margin-bottom:18px} section.stschnell p.vwsatz + form{margin-top:4px} form.stschnellform{grid-template-columns:repeat(4, minmax(0,1fr)) auto} @media (max-width:900px){ form.stschnellform{grid-template-columns:1fr 1fr} } @media (max-width:560px){ form.stschnellform{grid-template-columns:1fr} } section.stschnell form + p.vwsatz{margin:14px 0 0} .stscanfrage{margin:0 0 22px; padding:16px 18px; border-radius:12px; background:color-mix(in srgb, var(--warte) 9%, var(--flaeche)); border:1px solid color-mix(in srgb, var(--warte) 35%, transparent)} .stscanfrage p.stscankopf{margin:0 0 12px; display:flex; gap:8px; align-items:flex-start; font-size:13px; line-height:1.5; color:var(--tinte)} .stscanfrage p.stscankopf .ikon{width:15px; height:15px; flex:none; margin-top:3px; color:var(--warte)} ul.stscanliste{list-style:none; margin:0; padding:0; display:grid; gap:8px} ul.stscanliste li{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 12px; border-radius:10px; background:var(--flaeche)} ul.stscanliste .stscanname{display:grid; gap:2px; font-size:13px; font-family:var(--schrift-buchung); min-width:0; overflow-wrap:anywhere} ul.stscanliste .stscanname small{font-family:var(--schrift); font-size:12px; color:var(--tinte3)} form.stscanform{display:flex; gap:8px; align-items:center; margin:0; flex-wrap:wrap} form.stscanform select{height:34px; padding:0 30px 0 10px; margin:0; font:inherit; font-size:13px; border:1px solid var(--linie); border-radius:8px; background-color:var(--flaeche); color:var(--tinte); appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20width%3D'11'%20height%3D'7'%20viewBox%3D'0%200%2011%207'%20fill%3D'none'%20stroke%3D'%234C6062'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M1%201.3%205.5%205.7%2010%201.3'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:11px 7px} form.stscanform button{width:auto; height:34px; padding:0 12px; font-size:13px; border-radius:8px} /* DIE STEUERWELT (14./15.09.2026): drei Ebenen, die Jahresleiste rechts außen, das Cockpit, Versand, Kette, Gewerbe. Christian: „Christian Blank, Ines Blank, Promedia Solutions … die Jahreszahlen abgesetzt rechts außen … nie mehr als drei Jahre, der Rest ins Archiv … das Cockpit oben drüber, nicht in einem Untermenü, jeder Punkt springbar." */ .stwahl{justify-content:space-between; align-items:flex-start; gap:14px 24px} .stwahl .stpers{flex-wrap:wrap} /* GEMESSEN bei 390 px: vier Ebenen mit Namen sind 563 px breit — auf dem Telefon zeigt nur die gewählte Ebene ihren Namen. */ @media (max-width:760px){ .stwahl .stpers a:not(.aktiv) .pname{display:none} .stwahl .stpers a:not(.aktiv){padding:6px 8px} .stjahre{margin-left:0} } /* Am Telefon bricht die Zeile: dann steht die Person ZUERST und das Jahr darunter — man waehlt erst, WESSEN Steuer man ansieht, dann WELCHES Jahr (16.09.2026 gemessen: es stand umgekehrt). */ @media (max-width:760px){ .stwahl{flex-direction:column; align-items:stretch} .stwahl .stpers{order:1} .stwahl .stjahre{order:2; justify-content:flex-start} } .stwahl .stpers a.stalle{gap:6px} .stwahl .stpers a.stalle .ikon{width:15px; height:15px; opacity:.7} /* Promedia Solutions trägt Christians offizielles Icon (Kamera-P, 14.09.2026: „nicht fantasieren … es gibt es alles schon“). */ .pbild.pgewerbe{object-fit:cover; background:#000} .stjahre{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto} .stjahre .umschalter.stjahr{align-items:center} .stjahre .stjahr a{display:inline-flex; align-items:center; gap:5px; padding:6px 14px} .stjahre .stjahr a .ikon{width:13px; height:13px; color:var(--gut)} /* Die Jahrespille mit ihrem × (16.09.2026): Die Pille bleibt, was sie war — das × sitzt dahinter in derselben Schalterleiste, klein und leise, mit 44-px-Schutzraum darum. Es erscheint nur an einem leeren, künftigen Jahr. */ .stjahrpille{display:inline-flex; align-items:center; gap:0} .stjahrpille > a{position:relative; z-index:1} form.stjahrzu{margin:0 0 0 -2px; display:inline-flex} form.stjahrzu button{ width:26px; height:26px; padding:0; margin:0 2px 0 0; border:0; border-radius:8px; cursor:pointer; background:transparent; color:var(--tinte3); font-size:17px; line-height:1; box-shadow:none; display:inline-flex; align-items:center; justify-content:center; position:relative; } form.stjahrzu button::after{content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:44px; height:44px} form.stjahrzu button:hover{background:var(--flaeche); color:var(--bad)} .stjahrpille.zumachbar > a{padding-right:6px} form.stjahrplus{margin:0; display:contents} form.stjahrplus button{width:34px; height:34px; padding:0; border-radius:10px; background:transparent; color:var(--akzent); font-size:24px; font-weight:500; box-shadow:none; line-height:1} form.stjahrplus button:hover{background:var(--flaeche)} details.starchiv{position:relative} details.starchiv summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:11px; font-size:13px; font-weight:500; color:var(--tinte2); background:var(--flaeche2)} details.starchiv summary::-webkit-details-marker{display:none} details.starchiv summary .ikon{width:14px; height:14px} details.starchiv[open] summary{background:var(--flaeche); box-shadow:0 1px 2px rgba(15,30,31,.09)} /* STEUER-LEISTE AUF EINER EBENE (26.09.2026). Chris: der Plus-Knopf neben 2026 „ist riesig“, und Jahresumschalter, „Archiv“ und der Brief der Mitteilungszentrale stehen nicht auf einer Ebene. Gemessen vorher: der Plus-Knopf erbte die allgemeine Knopfbreite (min-width 168 px, min-height 44 px); Personenwahl 54 px hoch, Jahreswahl 52 px, Archiv 36 px (oben +8 px), Brief 40 px - vier Höhen, oben ausgerichtet. Jetzt: eine Leistenhöhe (54 px, die der Personenwahl), eine Mittelachse. */ @media (min-width:761px){ .stwahl{align-items:center} } .stjahre{gap:10px} .stjahre .umschalter.stjahr{min-height:54px; box-sizing:border-box} .stjahre .stjahr a{min-height:46px; box-sizing:border-box} form.stjahrplus button{min-width:40px; width:40px; min-height:46px; height:46px} details.starchiv summary{min-height:54px; box-sizing:border-box; padding:0 16px; border-radius:14px} .stwahl a.stpost{width:54px; height:54px; box-sizing:border-box; border-radius:14px; flex:0 0 auto} .starchivliste{position:absolute; right:0; top:calc(100% + 6px); z-index:5; min-width:160px; display:grid; gap:2px; padding:6px; background:var(--flaeche); border:1px solid var(--linie); border-radius:12px; box-shadow:0 8px 24px rgba(15,30,31,.12)} .starchivliste a{display:flex; justify-content:space-between; gap:12px; align-items:baseline; padding:8px 10px; border-radius:8px; text-decoration:none; color:var(--tinte); font-size:14.5px; font-variant-numeric:tabular-nums} .starchivliste a small{font-size:12px; color:var(--tinte3)} .starchivliste a:hover, .starchivliste a.aktiv{background:var(--flaeche2)} /* Die Zeile zum Ausblenden eines leeren Jahres (16.09.2026) — ruhig, aber auffindbar: derselbe Ton wie der Archivhinweis, der Knopf leise am Ende. Sie steht nur da, solange das Jahr wirklich leer ist. */ div.stjahrleer{ margin:0 0 22px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:12px 16px; border-radius:12px; font-size:13px; color:var(--tinte2); background:var(--flaeche2); border:1px solid var(--linie); } div.stjahrleer .ikon{width:15px; height:15px; color:var(--tinte3); flex:none} div.stjahrleer > span{flex:1 1 220px; min-width:0} div.stjahrleer form{margin:0} div.stjahrleer button{ min-height:var(--knopf-klein); padding:0 14px; font:inherit; font-size:13px; font-weight:600; color:var(--tinte); background:var(--flaeche); border:1px solid var(--linie); border-radius:10px; cursor:pointer; } div.stjahrleer button:hover{border-color:var(--akzent); color:var(--akzent)} /* ================= DIE RENTE (16.09.2026) ========================= Christian: „Ich möchte umfangreiche Grafiken haben, mit denen ich sofort erkennen kann, wie unsere finanzielle Situation aussieht im Alter … Die Zahlen müssen sofort verstanden werden durchs Anschauen, allein des Layouts." Deshalb: eine einzige grosse Zahl oben, darunter erst das Bild, dann die Zerlegung, dann die Belege, dann die Stellschrauben. Nichts blinkt, nichts warnt — rot ist nur die Lücke, und die nur einmal. */ section.reantwort{ display:grid; gap:6px; justify-items:center; text-align:center; padding:34px 26px 30px; margin:0 0 26px; border:var(--karterand); border-radius:var(--karteradius); box-shadow:var(--karteschatten); background:var(--flaeche); } section.reantwort p{margin:0} section.reantwort .rewann{font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinte3)} section.reantwort .rezahl{font-size:24px; color:var(--tinte2); line-height:1.35} section.reantwort .rezahl b{display:block; font-size:clamp(34px, 7vw, 54px); font-weight:650; letter-spacing:-.025em; line-height:1.05; color:var(--tinte)} section.reantwort.fehlt .rezahl b{color:var(--bad)} section.reantwort.reicht .rezahl b{color:var(--gut)} section.reantwort.offen .rezahl b{color:var(--akzent)} section.reantwort .refuss a{color:var(--akzent)} article.rephase.ohnebedarf::before{background:var(--tinte3)} p.reluecke a{color:var(--akzent)} p.reoffenlohn{margin:0; display:flex; gap:7px; align-items:flex-start; font-size:13px; color:var(--wartetinte); line-height:1.5} p.reoffenlohn .ikon{width:14px; height:14px; margin-top:2px; flex:none} p.reoffenlohn a{color:var(--akzent)} h3.rezwischen{margin:20px 0 6px; font-size:15px} /* ================= DIE VERSICHERUNGEN (16.09.2026) ================== Christian: „einen neuen Hauptbereich auf, Versicherungen. Und dann in diesem Hauptbereich zwei Bereiche, einen Chris, einen Ines." Die Welt einer Person trägt ihre Farbe als Kante — dieselbe Sprache wie im Steuerbereich. */ section.vswelt{position:relative} nav.vswahl{margin-bottom:22px} svg.vsbild{width:100%; min-width:900px; height:auto; display:block} section.vswelt .rebildrolle{max-width:100%} /* AUF DEM TELEFON KEIN ZEITSTRAHL (16.09.2026, gemessen: 46 px Überlauf bei 390 px). Ein Zeitstrahl, der 900 px braucht, ist auf 390 px kein Bild mehr, sondern ein Rollfeld mit 8-px-Schrift. Was er sagt, steht ohnehin als Satz da: „läuft bis … · noch x Jahre" in jeder Karte und die Lücke als eigener Hinweis. Lieber weglassen als unleserlich zeigen. */ @media (max-width:760px){ section.vswelt .rebildrolle{display:none} } /* Die Achse des Zeitstrahls nutzt dieselben Klassen wie die Renten-Grafik — sie waren aber nur unter svg.rebild definiert, also stand die Schrift im Dunkelmodus schwarz auf schwarz (16.09.2026, im Durchgang gemessen). */ svg.vsbild .regitter{stroke:var(--linie); stroke-width:1} svg.vsbild .reachse{font-size:11.5px; fill:var(--tinte3)} /* Auch der Vertragsname: Er steht links, aber bei schmalen Bildern rückt das Gitter heran — dieselbe Kontur, dieselbe Regel, kein Sonderfall (16.09.2026). */ svg.vsbild .vsname{font-size:12.5px; fill:var(--tinte2); paint-order:stroke; stroke:var(--flaeche); stroke-width:3.5px; stroke-linejoin:round} svg.vsbild .vsbalken{fill:var(--pfarbe); opacity:.85} svg.vsbild .vsbalken.offen{opacity:.55} /* CI STATT ROSA UND HELLBLAU (03.10.2026). Christian: „dieses Rosa … und dieses Babyblau … Bring das bitte wieder in eine CI-konforme Darstellung. Wir haben ja viel Grüntöne und so ein Grau.“ Balken im Akzentgrün, die Lücke als graues Band mit Strichrand. */ svg.vsbild .vsluecke{fill:var(--tinte3); fill-opacity:.14; stroke:var(--tinte3); stroke-opacity:.55; stroke-width:1; stroke-dasharray:3 3} /* DIE JAHRESZAHL MUSS LESBAR BLEIBEN, WORAUF AUCH IMMER SIE LIEGT (16.09.2026). Christian: „Anzeigefehler hier. Die 2024 ist irgendwie die Zwei durchgestrichen. Das darf so nicht sein.“ GEMESSEN: Die CosmosDirekt-Police lief am 01.12.2024 ab — also VOR dem linken Rand des Zeitstrahls. Ihr Balken schrumpft dort auf drei Punkte, die Lücke bis zum Rentenbeginn füllt den Rest, und die Jahreszahl landet mitten auf der Lücke, genau auf einer Gitterlinie — die lief dann durch die Ziffer. Dasselbe Mittel wie bei den Prozentzahlen im Kreis: Die Schrift trägt eine Kontur in der Kartenfarbe und zeichnet sie ZUERST. Dann steht sie auf jedem Untergrund frei. */ svg.vsbild .vsende{font-size:11.5px; fill:var(--tinte3); paint-order:stroke; stroke:var(--flaeche); stroke-width:3.5px; stroke-linejoin:round} /* Und die Achsenjahre unten stehen ebenso auf ihren eigenen Gitterlinien. */ svg.vsbild .reachse, svg.rebild .reachse{paint-order:stroke; stroke:var(--flaeche); stroke-width:3.5px; stroke-linejoin:round} svg.vsbild .vsrente{stroke:var(--tinte2); stroke-width:1.4; stroke-dasharray:4 4} svg.vsbild .vsrentepunkt{fill:var(--tinte2)} svg.vsbild .vsrentetext{font-size:12px; fill:var(--tinte2); font-weight:600} .vsluecken{display:grid; gap:8px; margin:14px 0 22px} .vsluecken p{ margin:0; display:flex; gap:9px; align-items:flex-start; padding:12px 16px; border-radius:12px; background:var(--flaeche2); border:1px solid var(--linie); font-size:13px; line-height:1.55; color:var(--tinte2); } .vsluecken p .ikon{width:15px; height:15px; margin-top:3px; color:var(--tinte); flex:none} /* Der Satz braucht min-width:0, sonst schrumpft er in einer Flex-Zeile nicht und schiebt die Seite waagerecht (16.09.2026, bei 390 px gemessen: 46 px Überlauf). */ .vsluecken p > span{min-width:0; overflow-wrap:anywhere} /* GESETZ „Farbe bedeutet Bewertung" (16.09.2026, Christians Wahl A): Ein Bestand ist schwarz — er ist weder gut noch schlecht. Grün steht für Erreichtes, Rot für ein Minus. Das Grün an den Vorsorgeverträgen war ein Ausreisser ohne Begründung und ist weg. */ .vtkarte .dlzahl .dlgross{color:var(--tinte)} article.vskarte{ display:grid; gap:14px; align-content:start; padding:20px 22px; margin-bottom:16px; border:1px solid var(--linie); border-radius:16px; background:var(--flaeche); position:relative; overflow:hidden; } article.vskarte::before{content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--pfarbe)} /* DAS VERSICHERUNGSARCHIV (16.09.2026). Christian: „Entweder ins Archiv schieben, dass wir so eine Art Versicherungsarchiv haben für abgelaufene Versicherungen … die aktiven und die inaktiven zusammen finde ich nicht so gut.“ Es steht am Ende, zugeklappt, ohne Farbkante und ohne Schatten: Es ist kein Vertrag, der etwas tut, sondern ein Ordner, den man selten aufmacht. */ /* UNSERE IMMOBILIEN im Versicherungsbereich (16.09.2026) — je Objekt eine ruhige Karte. */ section.vsimmos{margin:28px 0 0} section.vsimmos h3{margin:0; font-size:16px; letter-spacing:-.01em} .vsimmosatz{margin:4px 0 0; font-size:13px; color:var(--tinte3)} .vsimmo{background:var(--flaeche); border:1px solid var(--linie); border-radius:14px; padding:13px 16px; margin-top:12px} .vsimmo h4{margin:0; font-size:15px; letter-spacing:-.01em} .vsimmoadr{margin:2px 0 0; font-size:12px; color:var(--tinte3)} .vsimmoliste{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px} .vsimmoliste li{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; font-size:13px} .vsimmoliste li a{color:var(--akzent); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--akzent) 35%, transparent)} .vsimmoliste li span{font-size:12px; color:var(--tinte3)} .vsimmoleer{margin:10px 0 0; display:flex; gap:8px; align-items:flex-start; font-size:12px; color:var(--tinte3); text-wrap:pretty} .vsimmoleer .ikon{width:16px; height:16px; color:var(--tinte3); flex:0 0 auto; margin-top:1px} details.vsarchiv{margin:26px 0 0; border-top:1px solid var(--linie); padding-top:16px} details.vsarchiv > summary{ cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:10px; color:var(--tinte2); padding:2px 0; } details.vsarchiv > summary::-webkit-details-marker{display:none} details.vsarchiv > summary::before{content:"\203A"; color:var(--tinte3); transition:transform .18s ease; display:inline-block} details.vsarchiv[open] > summary::before{transform:rotate(90deg)} .vsarchivtitel{font-size:15px; font-weight:600; color:var(--tinte)} .vsarchivzahl{font-size:12px; color:var(--tinte3)} .vsarchivsatz{margin:8px 0 0; font-size:13px; color:var(--tinte3); text-wrap:pretty} .vsarchivliste{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:10px} .vsarchivliste > li{background:var(--flaeche); border:1px solid var(--linie); border-radius:12px; padding:11px 14px} .vsazeile{display:flex; align-items:baseline; gap:12px; justify-content:space-between; flex-wrap:wrap} .vsaname{font-size:14.5px; font-weight:600; color:var(--tinte2)} .vsawann{font-size:12px; color:var(--tinte3); white-space:nowrap} .vsawo{margin-top:3px; font-size:12px; color:var(--tinte3); display:flex; align-items:center; gap:6px; flex-wrap:wrap} .vsanotiz{margin-top:7px} .vsanotiz > summary{cursor:pointer; font-size:12px; color:var(--akzent); list-style:none} .vsanotiz > summary::-webkit-details-marker{display:none} .vsanotiz p{margin:6px 0 0; font-size:12px; color:var(--tinte3); line-height:1.55} article.vskarte.ruht{background:var(--flaeche2)} /* AUCH VERSICHERUNGEN — SIE STEHEN IM VERMOEGEN (16.09.2026). Sie sehen aus wie die anderen Karten, sind aber leise: kein Farbstreifen, gedaempfter Grund. Damit ist auf einen Blick klar, dass hier nichts geaendert wird — der Weg dorthin steht in der Karte. */ h3.vsauchkopf{display:flex; align-items:center; gap:8px; margin:26px 0 4px; font-size:15px} h3.vsauchkopf .ikon{width:16px; height:16px; color:var(--tinte3)} .vsauchliste{margin-bottom:8px} article.vskarte.vsauch{background:var(--flaeche2)} article.vskarte.vsauch::before{background:var(--linie)} p.vsauchweg{margin:0} p.vsauchweg a{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--akzent); text-decoration:none} p.vsauchweg a:hover{text-decoration:underline; text-underline-offset:2px} p.vsauchweg .ikon{width:15px; height:15px} article.vskarte.ruht::before{background:var(--tinte3)} dl.vsleistungen{margin:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:10px 18px; padding-top:14px; border-top:1px solid var(--linie)} dl.vsleistungen > div{display:grid; gap:2px; min-width:0} dl.vsleistungen dt{font-size:12px; color:var(--tinte3)} dl.vsleistungen dd{margin:0; font-size:14.5px; font-weight:600; font-variant-numeric:tabular-nums} dl.vsleistungen dd small{display:block; font-size:12px; font-weight:400; color:var(--tinte3)} /* 18 px, nicht 14 (gemessen 16.09.2026): Zwischen dem Knopf „Leistung entfernen“ und der Farbflaeche der naechsten Leistung standen nur 14 px — unter dem Schutzraum, den jeder Knopf braucht. Gemessen von pruef/durchgang.js. */ .vsleistungneu{display:grid; gap:18px} .vsleistungneu h4, details.vsneu h4{margin:6px 0 0; font-size:14.5px; color:var(--tinte2); letter-spacing:.02em; text-transform:uppercase} form.vswform{padding:14px 16px; border-radius:12px; background:var(--flaeche2)} .vswahl .rewahlfeld{display:flex; align-items:center; gap:10px; min-height:var(--knopf); font-size:14.5px; color:var(--tinte2); text-transform:none; letter-spacing:0} /* ANKREUZFELDER SIND BEDIENELEMENTE (16.09.2026, im Durchgang gemessen: 17 × 17 px). Ein Kasten von 17 px trifft ein Finger nicht sicher. Das Feld selbst wächst auf 20 px, und weil das Wort daneben zum selben Label gehört, ist die ganze Zeile der Griff. */ .vswahl .rewahlfeld input[type=checkbox], .rewahl .rewahlfeld input[type=checkbox]{ width:20px; height:20px; flex:0 0 auto; accent-color:var(--akzent); cursor:pointer; } .vswahl .rewahlfeld, .rewahl .rewahlfeld{cursor:pointer} section.reantwort .refuss{font-size:13px; color:var(--tinte3); max-width:56ch} .rebildrolle{overflow-x:auto; -webkit-overflow-scrolling:touch; min-width:0; max-width:100%} /* Die Mindestbreite ist die Breite der Zeichnung selbst (16.09.2026): Wird das Bild kleiner gerechnet, schrumpft jede Beschriftung mit — bei 768 px standen 13-px-Texte als 10 px da. Lieber waagerecht rollen (dafür ist .rebildrolle da) als unter 11,5 px fallen. */ svg.rebild{width:100%; min-width:980px; height:auto; display:block} svg.rebild .regitter{stroke:var(--linie); stroke-width:1} svg.rebild .regrund{stroke:var(--tinte3); stroke-width:1} svg.rebild .reachse{font-size:11.5px; fill:var(--tinte3)} svg.rebild .restufe{fill:color-mix(in srgb, var(--akzent) 22%, transparent); stroke:var(--akzent); stroke-width:1.5} svg.rebild .restufe.fehlt{fill:color-mix(in srgb, var(--bad) 16%, transparent); stroke:var(--bad)} svg.rebild .restufetext{font-size:13px; font-weight:600; fill:var(--tinte)} svg.rebild .restufetext.innen{fill:var(--tinte)} svg.rebild .rebedarftext{font-size:12px; fill:var(--tinte2)} svg.rebild .rebedarf{stroke:var(--tinte2); stroke-width:1.6; stroke-dasharray:7 5} svg.rebild .rebedarftext{font-size:12px; fill:var(--tinte2)} svg.rebild .remarke{stroke-width:1.4; stroke-dasharray:3 4; opacity:.7} svg.rebild .remarketext{font-size:12px; font-weight:600} .rephasenliste{display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr))} article.rephase{ display:grid; gap:12px; align-content:start; padding:18px 20px; border:1px solid var(--linie); border-radius:16px; background:var(--flaeche); position:relative; overflow:hidden; } article.rephase::before{content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--gut)} article.rephase.fehlt::before{background:var(--bad)} article.rephase header{display:grid; gap:2px} article.rephase h3{margin:0; font-size:16px; letter-spacing:-.01em} article.rephase .rezeit{margin:0; font-size:12px; color:var(--tinte3)} .rebalken{display:grid; gap:7px} .rebalkenzeile{display:grid; grid-template-columns:78px 1fr auto; gap:10px; align-items:center} .rebalkenzeile .rebl{font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--tinte3)} .rebalkenzeile .rebs{display:flex; height:16px; border-radius:8px; overflow:hidden; background:var(--flaeche2)} .rebalkenzeile .rebs i{display:block; height:100%} .rebalkenzeile .rebs i.rebbedarf{background:repeating-linear-gradient(135deg, var(--tinte3) 0 4px, transparent 4px 8px); opacity:.55} .rebalkenzeile .rebz{font-size:13px; font-weight:600; font-variant-numeric:tabular-nums} p.reluecke{margin:0; font-size:13px; color:var(--tinte2)} article.rephase.fehlt p.reluecke b{color:var(--bad)} article.rephase:not(.fehlt) p.reluecke b{color:var(--gut)} dl.reteile{margin:0; display:grid; gap:4px} dl.reteile > div{display:flex; justify-content:space-between; gap:12px; align-items:baseline; font-size:13px} dl.reteile dt{display:flex; align-items:center; gap:7px; color:var(--tinte2)} dl.reteile dt i{width:9px; height:9px; border-radius:3px; flex:none} dl.reteile dd{margin:0; font-variant-numeric:tabular-nums} .rekarten{display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 330px), 1fr))} /* min(100%, …) statt 330px fest: Bei 390 px Fensterbreite stehen im Inhalt nur 309 px zur Verfuegung — die feste Spalte lief 4 px ueber den Rand (gemessen 16.09.2026). */ article.rekarte{ display:grid; gap:14px; align-content:start; padding:20px 22px; border:1px solid var(--linie); border-radius:16px; background:var(--flaeche); position:relative; overflow:hidden; } article.rekarte::before{content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--pfarbe)} article.rekarte > header{display:flex; gap:12px; align-items:center} article.rekarte > header h3{margin:0; font-size:16px; letter-spacing:-.01em} article.rekarte > header p{margin:2px 0 0; font-size:12px; color:var(--tinte3)} .rezwei{display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr))} .rewert{display:grid; gap:2px; padding:12px 14px; border-radius:12px; background:var(--flaeche2)} .rewert .rewt{font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--tinte3)} .rewert .rewz{font-size:24px; font-weight:650; letter-spacing:-.015em; font-variant-numeric:tabular-nums} .rewert.gross .rewz{font-size:24px; color:var(--pfarbe)} .rewert .rewf{font-size:12px; color:var(--tinte3)} /* Rente, zwei Zahlen je Brief AUF EINER EBENE (26.09.2026) - vom neuen Wächter „zahlenebene“ gefunden: „Hochgerechnet, heutige Kaufkraft“ bricht um, 2.721 € stand 15 px tiefer als 2.400 €. Dieselbe Bauart wie die Mietrendite: die Karten teilen ihre Zeilen, die Zahl steht auf einer Grundlinie. Zwischen den Karten bleiben 12 px, in der Karte 2 px. */ .rezwei{grid-template-rows:auto auto auto} .rezwei > .rewert{grid-row:span 3; grid-template-rows:subgrid; row-gap:2px} .rezwei .rewt, .rezwei .rewf{align-self:start} .rezwei .rewz{align-self:last baseline} dl.rezahlen{margin:0; display:grid; gap:8px} dl.rezahlen > div{display:flex; justify-content:space-between; gap:14px; align-items:baseline; padding-bottom:8px; border-bottom:1px solid var(--linie)} dl.rezahlen > div:last-child{border-bottom:0; padding-bottom:0} dl.rezahlen dt{font-size:13px; color:var(--tinte2)} dl.rezahlen dd{margin:0; text-align:right; font-size:14.5px; font-weight:600; font-variant-numeric:tabular-nums} dl.rezahlen dd small{display:block; font-size:12px; font-weight:400; color:var(--tinte3)} p.renotiz{margin:0; font-size:12px; color:var(--tinte3)} article.rekarte.leer{background:var(--flaeche2)} /* SCHUTZRAUM UM DEN KNOPF (16.09.2026). Christian: „Der Button Übernehmen stößt direkt an eine Farbfläche an. Das ist nicht CI-konform. Es braucht eine Schutzzone." Ursache war zweierlei: die Miete-Wahl stand in einer schmalen Rasterspalte und brach fünfzeilig um, wodurch der Knopf in einer hohen Zelle nach unten rutschte — und der Abstand zum Bedarfsblock war ohnehin knapp. Jetzt: Wahl und Tasten je in eigener Zeile, 32 px Luft. */ section.reannahmen form.vmform.reform{margin:0 0 32px} /* spezifischer als form.vmform{margin:0} weiter unten */ section.reannahmen form.reform .rewahl{grid-column:1/-1} section.reannahmen form.reform .sttasten{grid-column:1/-1; justify-self:start; margin-top:4px} .rewahl .rewahlfeld{display:flex; align-items:center; gap:10px; min-height:var(--knopf); font-size:14.5px; color:var(--tinte2); text-transform:none; letter-spacing:0} .rebedarfblock{padding:18px 20px; border-radius:16px; background:var(--flaeche2); border:1px solid var(--linie)} .rebedarfblock h3{margin:0 0 8px; font-size:15px} dl.rerechnung{margin:0; display:grid; gap:8px; max-width:520px} dl.rerechnung > div{display:flex; justify-content:space-between; gap:14px; align-items:baseline} dl.rerechnung dt{font-size:13px; color:var(--tinte2)} dl.rerechnung dd{margin:0; text-align:right; font-size:14.5px; font-variant-numeric:tabular-nums} dl.rerechnung dd small{display:block; font-size:12px; color:var(--tinte3); font-weight:400} dl.rerechnung .resumme dt, dl.rerechnung .resumme dd{font-weight:650; color:var(--tinte); border-top:1px solid var(--linie); padding-top:8px; width:100%} dl.rerechnung .resumme{align-items:stretch} p.rekleiner{margin:14px 0 0; font-size:12px; color:var(--tinte3); max-width:78ch; line-height:1.6} form.reuebernehmen{margin:14px 0 0} form.reuebernehmen button{ display:inline-flex; align-items:center; gap:8px; min-height:var(--knopf); padding:0 18px; font:inherit; font-size:14.5px; font-weight:600; color:var(--aufakzent); background:var(--akzent); border:0; border-radius:12px; cursor:pointer; } form.reuebernehmen button:hover{filter:brightness(1.08)} form.reuebernehmen button .ikon{width:16px; height:16px} .retunliste{display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))} .retunliste article{display:grid; gap:6px; align-content:start; padding:18px 20px; border:1px solid var(--linie); border-radius:16px; background:var(--flaeche)} .retunliste h3{margin:0; font-size:14.5px; color:var(--tinte2); font-weight:600} .retunliste .retunzahl{margin:0; font-size:24px; font-weight:650; letter-spacing:-.02em; color:var(--akzent); font-variant-numeric:tabular-nums} .retunliste p{margin:0; font-size:13px; color:var(--tinte2); line-height:1.55} section.reoffen p.vwsatz{margin-bottom:0} @media (max-width:560px){ section.reantwort{padding:26px 18px} .rebalkenzeile{grid-template-columns:64px 1fr auto; gap:8px} } p.starchivhinweis{margin:0 0 22px; display:flex; gap:8px; align-items:flex-start; padding:12px 16px; border-radius:12px; background:color-mix(in srgb, var(--gut) 9%, var(--flaeche)); border:1px solid color-mix(in srgb, var(--gut) 30%, transparent); font-size:13px; line-height:1.5} p.starchivhinweis .ikon{width:15px; height:15px; margin-top:3px; color:var(--gut); flex:none} /* DER WEG IN DIE MITTEILUNGSZENTRALE — aus dem Steuerbereich (15.09.2026). Christian: „wenn ich im Steuerbereich bin, möchte ich von dort aus die Mitteilungszentrale erreichen … signifikant, die muss mich anlachen … ein schönes Icon." Zwei Wege: das Briefzeichen rechts in der Kopfleiste (immer da, auf jedem Reiter) und die Karte „Versand an …" direkt unter dem Cockpit — mit Stand, Empfänger, Absender, letztem Paket, letzten Mails und den Knöpfen. */ a.stpost{position:relative; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; background:var(--flaeche); color:var(--akzent); border:1px solid var(--linie); box-shadow:0 1px 2px rgba(15,30,31,.06); text-decoration:none; transition:transform .12s ease, box-shadow .12s ease} a.stpost:hover{transform:translateY(-1px); box-shadow:0 4px 12px rgba(15,30,31,.12)} a.stpost .ikon{width:20px; height:20px} a.stpost .stpostpunkt{position:absolute; top:-3px; right:-3px; width:11px; height:11px; border-radius:50%; background:var(--warte, var(--bad)); border:2px solid var(--grund)} section.stversand{display:flex; gap:22px; align-items:flex-start; padding:22px 26px; margin-bottom:26px; border-radius:18px; border:1px solid var(--linie); background:var(--flaeche); position:relative; overflow:hidden} section.stversand::before{content:""; position:absolute; inset:0 auto 0 0; width:5px; background:var(--akzent)} .vszeichen{flex:none; width:64px; height:64px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--akzent) 12%, var(--flaeche)); color:var(--akzent)} .vszeichen .ikon{width:32px; height:32px} .vsinhalt{flex:1; min-width:0} .vsinhalt h2{margin:2px 0 6px; font-size:17px; letter-spacing:-.01em} .vssatz{margin:0 0 14px; font-size:14.5px; line-height:1.55; color:var(--tinte2)} .vssatz a{color:var(--akzent); text-decoration:underline; text-underline-offset:2px} .vssatz .ikon{width:16px; height:16px; vertical-align:-3px; margin-right:6px; color:var(--gut)} .vssatz.vsbereit{color:var(--gut); font-weight:600} dl.vsdaten{margin:0 0 16px; display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px 20px} dl.vsdaten > div{min-width:0} dl.vsdaten dt{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--tinte3); margin:0 0 3px} dl.vsdaten dd{margin:0; font-size:14.5px; line-height:1.45; color:var(--tinte); overflow-wrap:anywhere} dl.vsdaten dd small{display:block; font-size:12px; color:var(--tinte3)} dl.vsdaten .vsmail{display:block; font-size:13px} dl.vsdaten .vsmail em{font-style:normal; color:var(--tinte3)} .vstun{display:flex; gap:16px; flex-wrap:wrap} /* 16 px: Schutzraum zwischen zwei Farbflaechen (gemessen 16.09.2026, vorher 10) */ .vstun a.knopf{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:auto; min-height:var(--knopf); padding:0 18px; border-radius:12px; background:var(--akzent); color:var(--aufakzent); font-weight:600; font-size:14.5px; text-decoration:none} .vstun a.knopf.leise{background:var(--flaeche2); color:var(--tinte)} .vstun a.knopf .ikon{width:15px; height:15px} @media (max-width:560px){ section.stversand{flex-direction:column; gap:14px; padding:18px} .vszeichen{width:52px; height:52px} .vszeichen .ikon{width:26px; height:26px} .vstun a.knopf{width:100%; justify-content:center} } p.vtnotiz{margin:10px 0 0; font-size:13px; line-height:1.5; color:var(--tinte2)} form.vtform label[hidden]{display:none} a.vwzurueck{display:inline-flex; align-items:center; gap:6px; margin:0 0 14px; padding:7px 12px; border-radius:10px; background:var(--flaeche); border:1px solid var(--linie); color:var(--tinte2); font-size:13px; text-decoration:none} a.vwzurueck .ikon{width:13px; height:13px; transform:rotate(180deg)} /* Das Cockpit: eine Linie, darauf die Stationen; die Linie füllt sich bis zur letzten erledigten. */ section.stcockpit{padding:24px 26px 22px; margin-bottom:26px} ol.ckstrecke{list-style:none; margin:6px 0 0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:0; position:relative} ol.ckstrecke li.ck{position:relative; min-width:0} ol.ckstrecke li.ck::before{content:""; position:absolute; left:0; right:50%; top:15px; height:3px; background:var(--linie)} ol.ckstrecke li.ck.fertig::before, ol.ckstrecke li.ck.fertig + li.ck::before{background:var(--gut)} ol.ckstrecke li.ck:first-child::before{display:none} ol.ckstrecke li.ck::after{content:""; position:absolute; left:50%; right:0; top:15px; height:3px; background:var(--linie)} ol.ckstrecke li.ck.fertig::after{background:var(--gut)} ol.ckstrecke li.ck:last-child::after{display:none} .ckkreis{display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--flaeche); border:2.5px solid var(--linie); color:var(--tinte3); font-size:12px; font-weight:600; transition:transform .12s ease} .ckkreis .ikon{width:15px; height:15px} .ckkreis b{font-weight:600} li.ck.fertig .ckkreis{background:var(--gut); border-color:var(--gut); color:#fff} li.ck.teils .ckkreis{border-color:var(--warte); color:var(--warte); background:color-mix(in srgb, var(--warte) 12%, var(--flaeche))} li.ck.wartet .ckkreis{border-color:var(--tinte3); color:var(--tinte3); border-style:dashed} .cktitel{font-size:12px; line-height:1.25; text-align:center; color:var(--tinte2); letter-spacing:.01em; max-width:100%; hyphens:manual} li.ck.fertig .cktitel{color:var(--tinte)} .ckmarken{display:flex; gap:3px; justify-content:center; min-height:19px} .ckm{display:inline-grid; place-items:center; width:19px; height:19px; border-radius:50%; font-style:normal; font-size:11.5px; font-weight:700; color:var(--aufakzent); background:var(--tinte3)} .ckm.chris{background:var(--pchris)} .ckm.ines{background:var(--pines)} .ckm.promedia{background:color-mix(in srgb, var(--pchris) 70%, #000)} .ckm.haushalt{background:var(--tinte2)} .ckm.offen{opacity:.28} .ckm.teils{opacity:.6; box-shadow:0 0 0 2px color-mix(in srgb, var(--warte) 60%, transparent)} .ckm.wartet{opacity:.45} .ckunten{display:flex; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; margin-top:18px; padding-top:14px; border-top:1px solid var(--linie)} .ckunten p{margin:0; display:flex; align-items:center; gap:8px; font-size:14.5px; flex-wrap:wrap} .ckunten p .ikon{width:15px; height:15px; color:var(--akzent); flex:none} p.cksatz{font-weight:600} p.ckfrist{color:var(--tinte2)} p.ckfrist b{color:var(--tinte); font-variant-numeric:tabular-nums} p.ckfrist button.ststift{width:auto; display:inline-flex; align-items:center; gap:5px; padding:4px 9px; font-size:12px; font-weight:500; background:transparent; color:var(--tinte2); border:1px solid var(--linie); box-shadow:none; border-radius:8px} p.ckfrist button.ststift .ikon{width:12px; height:12px; color:inherit} form.ckfristform{display:inline-flex; gap:6px; align-items:center; margin:0} form.ckfristform[hidden]{display:none} form.ckfristform input{height:34px; padding:0 10px; font:inherit; font-size:13px; border:1px solid var(--linie); border-radius:8px; background:var(--flaeche); color:var(--tinte)} form.ckfristform button{width:auto; height:34px; padding:0 12px; font-size:13px; border-radius:8px} /* RUHE IM COCKPIT (15.09.2026): Die Station ist ein Knopf, kein Link. Ihr Blatt klappt unter der Strecke auf. */ ol.ckstrecke li.ck button.ckknopf{width:100%; position:relative; z-index:1; display:grid; justify-items:center; gap:6px; padding:0 3px; background:transparent; border:0; box-shadow:none; color:var(--tinte); font:inherit; cursor:pointer; border-radius:10px} ol.ckstrecke li.ck button.ckknopf:hover .ckkreis{transform:scale(1.08)} ol.ckstrecke li.ck.auf .ckkreis{box-shadow:0 0 0 4px color-mix(in srgb, var(--akzent) 22%, transparent); border-color:var(--akzent)} ol.ckstrecke li.ck.auf .cktitel{color:var(--tinte); font-weight:600} ol.ckstrecke li.ck button.ckknopf:focus-visible{outline:2px solid var(--akzent); outline-offset:2px} .ckblatt{margin-top:14px; padding:14px 16px; border-radius:12px; background:var(--flaeche2); border-left:3px solid var(--warte)} .ckblatt[hidden]{display:none} .ckblatt:has(.ckinfo.fertig:not([hidden])){border-left-color:var(--gut)} .ckblatt:has(.ckinfo.wartet:not([hidden])){border-left-color:var(--tinte3)} .ckinfo[hidden]{display:none} p.ckinfokopf{margin:0; font-size:14.5px; line-height:1.45; display:flex; flex-wrap:wrap; gap:4px 10px} p.ckinfokopf b{font-weight:600} p.ckinfokopf span{color:var(--tinte2)} ul.ckhaken{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:4px} ul.ckhaken li{font-size:13px; line-height:1.45; color:var(--tinte); overflow-wrap:anywhere; padding-left:14px; position:relative} ul.ckhaken li::before{content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--warte)} .ckinfo.wartet ul.ckhaken li::before{background:var(--tinte3)} p.ckinfoweg{margin:10px 0 0} a.ckweg{display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:9px; font-size:13px; font-weight:600; text-decoration:none; color:var(--aufakzent); background:var(--akzent)} a.ckweg .ikon{width:13px; height:13px} /* a.ckpost ist am 16.09.2026 entfallen — ein Briefzeichen je Seite, siehe steuer.php */ /* ================================================================== * * DIE KETTE BLEIBT EINE KETTE — AUCH AUF DEM IPAD (19.09.2026) * * Christian, vom 11-Zoll-iPad: „Die Kette, diese Cockpit-Kette, wirkt * hier natürlich nicht so wie auf einem Desktop. Man hat hier nicht das * Gefühl, dass es zusammenhängende Schritte sind, sondern es sind * irgendwelche Punkte, die aufgezählt werden. Aber es ist keine richtige * Prozesskette … Das muss genau die gleiche Wirkung haben." * * ER HAT RECHT, UND DIE URSACHE STAND HIER: Unter 900 px brach die Reihe * in ein Raster aus vier Spalten UM — und die Verbindungslinie wurde * dabei schlicht ABGESCHALTET (`display:none`). Übrig blieben dreizehn * lose Punkte. Was eine Kette ausmacht, ist nicht die Reihenfolge, es ist * die LINIE dazwischen. * * GEMESSEN: Eine Station braucht waagerecht 90 px, damit der längste * Titel („Gewerbe (EÜR)", 84 px) hineinpasst; dreizehn Stationen also * 1170 px. So breit ist die Strecke erst ab rund 1240 px Fensterbreite — * dieselbe Schwelle, ab der auch die Hauptleiste wieder in eine Zeile * passt. Eine Zahl für das ganze Haus. * * DARUNTER KIPPT DIE KETTE AUF DIE SENKRECHTE, statt zu zerfallen: eine * durchgehende Schiene von oben nach unten, die Kreise darauf, Titel und * Marken daneben. Das ist dieselbe Aussage in der anderen Richtung — * zusammenhängende Schritte, und die Schiene färbt sich bis zur letzten * erledigten Station grün, genau wie waagerecht. Kein Wort wird * abgeschnitten, keine Station verschwindet aus dem Bild, und das * Aufklappblatt bleibt, wo es war. * * Ein Schlangenlauf durch das Raster wäre die dritte Möglichkeit gewesen. * Dagegen sprach die Messung nicht, sondern die Bauweise: Er haengt an * `nth-child`-Rechnungen fuer jede Spaltenzahl und bricht, sobald eine * vierzehnte Station dazukommt. Die Senkrechte traegt jede Anzahl. * ================================================================== */ @media (max-width:1180px){ ol.ckstrecke{grid-auto-flow:row; grid-template-columns:1fr; gap:0} /* Die Schiene: senkrecht durch die Kreismitte (Kreis 32 px → Mitte 16). */ ol.ckstrecke li.ck::before{left:14.5px; right:auto; top:0; bottom:50%; width:3px; height:auto} ol.ckstrecke li.ck::after{left:14.5px; right:auto; top:50%; bottom:0; width:3px; height:auto} ol.ckstrecke li.ck button.ckknopf{ grid-template-columns:32px minmax(0,1fr) auto; justify-items:start; align-items:center; gap:0 12px; min-height:48px; padding:5px 8px 5px 0; } ol.ckstrecke li.ck button.ckknopf > *{grid-row:1} .cktitel{text-align:left; font-size:14.5px; line-height:1.3} li.ck.fertig .cktitel, li.ck.teils .cktitel{font-weight:600} .ckmarken{justify-self:end; justify-content:flex-end} /* Berührt: die ganze Zeile hebt sich, nicht nur der Kreis — auf dem Finger gibt es kein Schweben, aber beim Tippen soll die Zeile antworten, nicht ein 32-px-Kreis. */ ol.ckstrecke li.ck button.ckknopf:hover{background:var(--flaeche2)} ol.ckstrecke li.ck.auf button.ckknopf{background:color-mix(in srgb, var(--akzent) 10%, transparent)} } /* Alle Belege: drei Blöcke untereinander, jeder in seiner Farbe (Ines grün, Christian und Promedia blau) */ section.stbelege.stballe{border-left:4px solid var(--linie)} section.stbelege.stballe.eb-ines{border-left-color:var(--pines); background:color-mix(in srgb, var(--pines) 5%, var(--flaeche))} section.stbelege.stballe.eb-chris{border-left-color:var(--pchris); background:color-mix(in srgb, var(--pchris) 4%, var(--flaeche))} section.stbelege.stballe.eb-promedia{border-left-color:color-mix(in srgb, var(--pchris) 70%, #000); background:color-mix(in srgb, var(--pchris) 4%, var(--flaeche))} table.stbelegliste i.stquelle.warnt{color:var(--warte); border-color:color-mix(in srgb, var(--warte) 50%, transparent)} table.stbelegliste i.stquelle.steuer{color:var(--akzent)} table.stbelegliste td.z small.stvst{display:block; font-size:12px; color:var(--tinte3); white-space:nowrap} label.stgewerbe[hidden]{display:none} /* Gewerbe: die EÜR als Formular-Tabelle, Rechnungen, Anlageverzeichnis */ table.gwtabelle{width:100%; min-width:0; border-collapse:collapse; font-size:13px} table.gwtabelle th{text-align:left; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinte3); font-weight:500; padding:6px 8px 8px; border-bottom:1px solid var(--linie); white-space:nowrap} table.gwtabelle td{padding:8px; border-bottom:1px solid var(--linie); vertical-align:middle} table.gwtabelle th.z, table.gwtabelle td.z{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap} table.gwtabelle td small{display:block; font-size:12px; color:var(--tinte3)} table.gwtabelle tr.gwgruppe td{padding:16px 8px 6px; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--tinte2); font-weight:600; border-bottom:2px solid var(--linie)} table.gwtabelle tr.gwsumme td{font-weight:600; background:var(--flaeche2)} table.gwtabelle tr.gwleer td{color:var(--tinte3)} table.gwtabelle td.gwkz{color:var(--tinte3); font-size:12px} table.gwtabelle td.gwquelle{font-size:12px; color:var(--tinte3)} table.gwtabelle td.gwref{color:var(--tinte2)} table.gwtabelle td.stdatum{white-space:nowrap; font-variant-numeric:tabular-nums} table.gwtabelle tr.offenr td, table.gwtabelle tr.ruht td{color:var(--tinte3)} table.gwtabelle tr.stbearbeiten td{padding:6px 8px 12px; background:var(--flaeche2)} table.gwtabelle button.ststift{width:auto; display:inline-flex; align-items:center; gap:5px; padding:5px 10px; margin-right:8px; font-size:12px; font-weight:500; background:transparent; color:var(--tinte2); border:1px solid var(--linie); box-shadow:none; border-radius:8px} table.gwtabelle button.ststift .ikon{width:13px; height:13px} table.gwtabelle button.ststift[aria-expanded=true]{color:var(--akzent); border-color:var(--akzent)} table.gwtabelle tr.stgesamt td{font-weight:600; border-top:2px solid var(--linie)} .gwfuss{margin-top:16px} .gwfuss p.gwok{display:flex; gap:8px; align-items:center; color:var(--gut); font-weight:600} .gwfuss p.gwok .ikon{width:15px; height:15px} form.gwpruefform{margin:0 0 8px} form.gwpruefform button{width:auto; height:var(--knopf); display:inline-flex; gap:8px; padding:0 18px} form.gwpruefform button .ikon{width:16px; height:16px} details.gwneu{margin-top:18px} details.gwneu form.stbelegform{padding:18px; margin:0} form.stbelegform.gwrechform, form.stbelegform.gwanlform{grid-template-columns:repeat(4, minmax(0,1fr))} section.stgewerbe{margin-bottom:26px} /* Versandzentrale */ form.stpaketform label.stabsender{display:grid; gap:5px; margin:0 0 12px; max-width:420px} form.stpaketform label.stabsender > span{font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinte3)} /* `background-color:var(--flaeche)` ist die KURZFORM und loescht damit das Zeichen aus der allgemeinen select-Regel — gemessen am 16.09.2026 an genau diesem Feld: Christian sah keinen Hinweis, dass der Absender waehlbar ist („So muss ich das ja erraten, dass ich da draufklicke. Das ist doch keine gute Usability, stimmt's?"). Deshalb hier NUR die Farbe setzen, nie den ganzen Hintergrund. */ form.stpaketform label.stabsender select{min-height:var(--knopf); padding:0 32px 0 12px; font:inherit; font-size:14.5px; border:1px solid var(--linie); border-radius:var(--wahl); background-color:var(--flaeche); color:var(--tinte)} table.stpaketliste td small{display:block; font-size:12px; color:var(--tinte3)} td.stpakettun form{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0; justify-content:flex-end} td.stpakettun button.ststift{width:auto; display:inline-flex; align-items:center; gap:5px; padding:5px 10px; margin:0; font-size:12px; font-weight:500; background:transparent; color:var(--tinte2); border:1px solid var(--linie); box-shadow:none; border-radius:8px} td.stpakettun button.ststift .ikon{width:13px; height:13px} td.stpakettun button.ststift:hover{color:var(--akzent); border-color:var(--akzent)} details.stabrufe{margin-top:4px; font-size:12px} details.stabrufe summary{cursor:pointer; color:var(--akzent)} details.stabrufe ul{margin:6px 0 0; padding:0 0 0 14px; color:var(--tinte2)} /* Die Kette: Chronik mit Datum, Uhrzeit, wer, was — und die Schritte darunter */ ol.ktchronik{list-style:none; margin:0 0 20px; padding:0; display:grid; gap:0; border-top:1px solid var(--linie)} ol.ktchronik li.kt{display:grid; grid-template-columns:96px minmax(0,1fr) auto auto; gap:14px; align-items:start; padding:12px 4px; border-bottom:1px solid var(--linie)} ol.ktchronik time{font-size:13px; font-variant-numeric:tabular-nums; font-weight:600; color:var(--tinte)} ol.ktchronik time small{display:block; font-size:12px; font-weight:400; color:var(--tinte3)} ol.ktchronik .ktwas{display:grid; gap:2px; font-size:13px; min-width:0} ol.ktchronik .ktwas b{font-weight:600} ol.ktchronik .ktwas > span{color:var(--tinte2); line-height:1.45} ol.ktchronik .ktdok{display:inline-flex; align-items:center; gap:5px; margin-top:4px; font-size:12px; color:var(--akzent); text-decoration:none} ol.ktchronik .ktdok .ikon{width:13px; height:13px} ol.ktchronik .ktwer{font-size:12px; color:var(--tinte3); white-space:nowrap; padding-top:2px} ol.ktchronik form.ktweg{margin:0} ol.ktchronik form.ktweg button.weg{width:26px; height:26px; padding:0; font-size:16px; line-height:1; border-radius:7px; background:transparent; color:var(--tinte3); box-shadow:none; text-decoration:none} ol.ktchronik form.ktweg button.weg:hover{color:var(--bad); background:var(--flaeche2)} ol.ktchronik li.kt.bescheid time, ol.ktchronik li.kt.archiviert time, ol.ktchronik li.kt.abruf time{color:var(--gut)} ol.ktchronik .wegfrage{grid-column:1/-1; display:flex; gap:8px; align-items:center; font-size:13px} .ktschritte{display:grid; gap:10px} details.ktneu form.stbelegform{padding:18px; margin:0} details.ktneu form.stbelegform label.ktmail{display:flex; align-items:center; gap:8px; grid-column:1/-1; font-size:13px; text-transform:none; letter-spacing:0; color:var(--tinte)} details.ktneu form.stbelegform label.ktmail input{width:auto; height:auto} details.ktneu form.stbelegform p.vwsatz{grid-column:1/-1; margin:0} @media (max-width:760px){ ol.ktchronik li.kt{grid-template-columns:80px minmax(0,1fr) auto} ol.ktchronik .ktwer{grid-column:2; padding-top:0} } /* DAS WARTEZIMMER (14.09.2026): links die erste Seite groß genug zum Erkennen (220 px), rechts Bezeichnung, Person, Kategorie, Betrag, Datum, Notiz — dann „Übernehmen“ oder „Kein Beleg“ (mit Schranke). */ ul.stscanliste li:has(.stwarteform){display:grid; grid-template-columns:220px minmax(0,1fr); gap:16px 20px; align-items:start; padding:14px} /* SO ENTSTEHT DIE EÜR (27.09.2026): drei Quellen, ein Pfeil, ein Ergebnis — und ein Satz, ob etwas zu tun ist. */ figure.eufluss{margin:14px 0 18px; padding:18px; border-radius:16px; background:var(--flaeche2); display:grid; grid-template-columns:minmax(0, 1.5fr) 56px minmax(0, 1fr); grid-template-areas:"kopf kopf kopf" "quellen pfeil ergebnis" "satz satz satz"; gap:14px 10px; align-items:center} figure.eufluss .eukopf{grid-area:kopf; display:grid; gap:3px} figure.eufluss .eukopf b{font-size:16px; color:var(--tinte)} figure.eufluss .eukopf span{font-size:13px; color:var(--tinte2); line-height:1.45} figure.eufluss .euquellen{grid-area:quellen; list-style:none; margin:0; padding:0; display:grid; gap:10px} figure.eufluss .euquelle{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:12px; background:var(--flaeche); border:1px solid var(--linie)} figure.eufluss .abzeichen, a.eukurz .abzeichen{margin:0; vertical-align:0} figure.eufluss .eutext, a.eukurz .eutext{display:grid; gap:2px; min-width:0} figure.eufluss .eutext b, a.eukurz .eutext b{font-size:14.5px; color:var(--tinte)} figure.eufluss .eutext small, a.eukurz .eutext small{font-size:12px; color:var(--tinte2); line-height:1.4} figure.eufluss .eustand{display:inline-flex; align-items:center; gap:6px; margin-top:4px; font-style:normal; font-size:12px; font-weight:600; color:var(--gut)} figure.eufluss .eustand.warn, figure.eufluss .eusatz.warn, a.eukurz.warn small{color:var(--bad)} figure.eufluss .eupfeil{grid-area:pfeil; display:flex; justify-content:center; color:var(--akzent)} figure.eufluss .eupfeil svg{width:48px; height:24px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round} figure.eufluss .euergebnis{grid-area:ergebnis; display:grid; gap:4px; justify-items:start; padding:18px; border-radius:14px; background:var(--flaeche); border:2px solid var(--akzent)} figure.eufluss .euergebnis b{font-size:15px; color:var(--tinte); margin-top:6px} figure.eufluss .euergebnis small{font-size:12px; color:var(--tinte2); line-height:1.4} figure.eufluss .euergebnis strong{font-size:24px; font-weight:700; color:var(--tinte); font-variant-numeric:tabular-nums; margin-top:6px} figure.eufluss .eusatz{grid-area:satz; margin:0; display:flex; gap:8px; align-items:center; font-size:13px; font-weight:600; color:var(--gut)} @media (max-width:760px){ figure.eufluss{grid-template-columns:minmax(0, 1fr); grid-template-areas:"kopf" "quellen" "pfeil" "ergebnis" "satz"} figure.eufluss .eupfeil svg{transform:rotate(90deg)} } a.eukurz{display:flex; align-items:center; gap:12px; margin:10px 0 16px; padding:12px 14px; border-radius:12px; background:var(--flaeche2); color:inherit; text-decoration:none} a.eukurz em{margin-left:auto; flex:0 0 auto; font-style:normal; font-size:13px; font-weight:600; color:var(--akzent); text-decoration:underline; text-underline-offset:3px} @media (max-width:560px){ a.eukurz{flex-wrap:wrap} a.eukurz em{margin-left:46px} } ul.stscanliste .stschau{display:grid; place-items:center; width:220px; aspect-ratio:210/297; max-height:311px; border-radius:10px; overflow:hidden; background:var(--flaeche2); border:1px solid var(--linie); color:var(--tinte3); text-decoration:none; position:relative} ul.stscanliste .stschau img{width:100%; height:100%; object-fit:cover; display:block} ul.stscanliste .stschau iframe{width:100%; height:100%; border:0; display:block; pointer-events:none; background:#fff} ul.stscanliste .stschau .dokvorschau{align-self:stretch; justify-self:stretch; width:100%; height:100%; pointer-events:none; background:#fff} ul.stscanliste .stschau .dokvorschau .dvseiten, ul.stscanliste .stschau .dokvorschau .dvseite{height:100%} ul.stscanliste .stschau .dokvorschau .dvseite{aspect-ratio:auto !important; border-radius:0; box-shadow:none} ul.stscanliste .stschau .ikon{width:34px; height:34px} ul.stscanliste .stschau b{font-size:12px; letter-spacing:.08em; font-weight:700; margin-top:6px} ul.stscanliste .stschau:hover{border-color:var(--akzent)} form.stwarteform{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px 12px; align-items:end; min-width:0} form.stwarteform p.stscanname{grid-column:1/-1; margin:0 0 2px; display:grid; gap:2px; font-size:13px} form.stwarteform p.stscanname a{color:var(--akzent); font-weight:600; text-decoration:none} form.stwarteform p.stscanname a:hover{text-decoration:underline} form.stwarteform label{display:grid; gap:5px; min-width:0} form.stwarteform label > span{font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinte3)} form.stwarteform label.stname, form.stwarteform label.stnotiz{grid-column:1/-1} form.stwarteform input, form.stwarteform select{height:40px; margin:0; padding:0 12px; font:inherit; font-size:14.5px; border:1px solid var(--linie); border-radius:10px; background-color:var(--flaeche); color:var(--tinte); min-width:0; width:100%; box-sizing:border-box} form.stwarteform select{padding-right:30px; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20width%3D'11'%20height%3D'7'%20viewBox%3D'0%200%2011%207'%20fill%3D'none'%20stroke%3D'%234C6062'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M1%201.3%205.5%205.7%2010%201.3'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:11px 7px} form.stwarteform .sttasten{grid-column:1/-1; display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:4px} form.stwarteform .sttasten button{width:auto; height:44px; padding:0 18px; font-size:14.5px; border-radius:10px; gap:8px} form.stwarteform .sttasten button .ikon{width:16px; height:16px} form.stwarteform .sttasten .wegfrage{display:inline-flex; gap:8px; align-items:center; font-size:13px; color:var(--tinte2); flex-wrap:wrap} form.stwarteform .sttasten .wegfrage button{height:36px; padding:0 12px; font-size:13px} form.stwarteform .sttasten .wegfrage .wegja{background:var(--bad)} form.stwarteform .sttasten .wegfrage .wegnein{background:transparent; color:var(--tinte); border:1px solid var(--linie)} @media (max-width:760px){ ul.stscanliste li:has(.stwarteform){grid-template-columns:1fr} ul.stscanliste .stschau{width:100%; max-width:220px; margin:0 auto} form.stwarteform{grid-template-columns:repeat(2, minmax(0,1fr))} } p.stoffen{margin:0 0 18px; display:flex; align-items:center; gap:6px; font-size:13px; color:var(--wartetinte); font-weight:600} p.stoffen .ikon{width:14px; height:14px} table.stbelegliste tr.stzeile.offen td{background:color-mix(in srgb, var(--warte) 8%, transparent)} i.stquelle{display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; font-style:normal; font-size:12px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; background:var(--flaeche2); color:var(--tinte3); vertical-align:1px} table.stbelegliste button.ststift{width:auto; display:inline-flex; align-items:center; gap:5px; padding:5px 10px; margin-right:8px; font-size:12px; font-weight:500; background:transparent; color:var(--tinte2); border:1px solid var(--linie); box-shadow:none; border-radius:8px} table.stbelegliste button.ststift .ikon{width:13px; height:13px} table.stbelegliste button.ststift:hover, table.stbelegliste button.ststift[aria-expanded=true]{color:var(--akzent); border-color:var(--akzent)} table.stbelegliste tr.stbearbeiten td{padding:6px 8px 12px; background:var(--flaeche2); border-bottom:1px solid var(--linie)} form.stbelegaendern{margin:0; grid-template-columns:minmax(0,1.4fr) minmax(0,.7fr) minmax(0,.9fr) minmax(0,.8fr)} form.stbelegaendern label.stname{grid-column:1 / span 2} form.stbelegaendern label.stnotiz{grid-column:1 / span 3} form.stbelegaendern .sttasten{display:flex; gap:8px; align-items:end} form.stbelegaendern .sttasten button{width:auto; height:46px; padding-block:0} @media (max-width:900px){ form.stbelegaendern{grid-template-columns:1fr 1fr} form.stbelegaendern label.stnotiz, form.stbelegaendern label.stname{grid-column:1 / span 2} } @media (max-width:560px){ form.stbelegaendern{grid-template-columns:1fr} form.stbelegaendern label.stnotiz, form.stbelegaendern label.stname{grid-column:auto} } .tabellenrolle{overflow-x:auto; overscroll-behavior-x:contain; margin:0 -4px; padding:0 4px} table.stbelegliste, table.stpaketliste{width:100%; min-width:0; border-collapse:collapse; font-size:13px} table.stbelegliste th, table.stpaketliste th{text-align:left; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinte3); font-weight:500; padding:6px 8px 8px; border-bottom:1px solid var(--linie); white-space:nowrap} table.stbelegliste td, table.stpaketliste td{padding:8px; border-bottom:1px solid var(--linie); vertical-align:middle} table.stbelegliste th.z, table.stbelegliste td.z, table.stpaketliste th.z, table.stpaketliste td.z{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap} table.stbelegliste td.stdatum{font-variant-numeric:tabular-nums; white-space:nowrap} table.stbelegliste td.stnotizz{color:var(--tinte2)} table.stbelegliste td.stdateiz{display:flex; align-items:center; gap:12px} table.stbelegliste .stbild{flex:none; width:56px; height:56px; border-radius:8px; background:var(--flaeche2); display:grid; place-items:center; overflow:hidden; border:1px solid var(--linie)} table.stbelegliste .stbild img{width:100%; height:100%; object-fit:cover; display:block} table.stbelegliste .stbild .ikon{width:20px; height:20px; color:var(--tinte3)} /* Die Bezeichnung bricht um, statt abgeschnitten zu werden (Christian 14.09.2026: „ein Abbruch des Titels der Datei … sieht nicht gut aus"). Kein Vorschaubild (PDF, HEIC) → Zeichen mit der Endung, kein leeres Feld. */ table.stbelegliste td.stdateiz a{display:inline-flex; align-items:center; gap:6px; color:var(--akzent); text-decoration:none; overflow-wrap:anywhere; vertical-align:middle} table.stbelegliste .stbild{grid-auto-rows:min-content; align-content:center; gap:2px} table.stbelegliste .stbild b{font-size:11.5px; letter-spacing:.08em; font-weight:700; color:var(--tinte2); line-height:1} table.stbelegliste td.stdateiz a .ikon{width:14px; height:14px; flex:none} table.stbelegliste td.stdateiz a:hover{text-decoration:underline} table.stbelegliste td.stdateiz small{display:block; font-size:12px; color:var(--tinte3)} table.stbelegliste td.stdateiz > span{min-width:0} table.stbelegliste td.sttun, table.stpaketliste td.sttun{text-align:right; white-space:nowrap} table.stbelegliste td.sttun form, table.stpaketliste td.sttun form{display:inline-flex; align-items:center; gap:8px; margin:0} table.stbelegliste button.weg, table.stpaketliste button.weg{width:auto; padding:5px 10px; font-size:12px; font-weight:500; background:transparent; color:var(--tinte2); border:1px solid var(--linie); box-shadow:none; border-radius:8px} table.stbelegliste button.weg:hover, table.stpaketliste button.weg:hover{color:var(--bad); border-color:var(--bad)} table.stbelegliste tfoot td{color:var(--tinte2); font-size:13px; border-bottom:0; padding-top:6px; padding-bottom:4px} table.stbelegliste tfoot tr.stgesamt td{color:var(--tinte); font-weight:600; border-top:1px solid var(--linie); padding-top:10px} table.stpaketliste tr.tot td{color:var(--tinte3)} @media (max-width:1000px){ /* Schmal: jede Zeile eine Karte — Datum und Betrag oben, darunter Kategorie, Notiz, Datei. Kein Scrollen für die Zahl. 24.10.2026: bis 1.000 px statt 760 — GEMESSEN am iPad 11″ hochkant (834 px): Die Tabelle ließ der Beleg-Spalte 145 px, Wörter brachen mitten im Wort („Invoic-e“), der Stift ragte über den Rand (Chris: „völlig zerstört“). */ table.stbelegliste, table.stbelegliste tbody, table.stbelegliste tfoot{display:block} table.stbelegliste thead{display:none} table.stbelegliste tbody tr{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"datum betrag" "kat kat" "notiz notiz" "datei tun"; gap:2px 12px; padding:10px 0; border-bottom:1px solid var(--linie)} table.stbelegliste tbody td{display:block; padding:0; border:0} table.stbelegliste tbody td.stdatum{grid-area:datum; font-weight:600} table.stbelegliste tbody td:nth-child(2){grid-area:kat; color:var(--tinte2); font-size:13px} table.stbelegliste tbody td.stnotizz{grid-area:notiz; font-size:13px} table.stbelegliste tbody td.stdateiz{grid-area:datei; margin-top:4px} table.stbelegliste tbody td.z{grid-area:betrag; font-weight:600} table.stbelegliste tbody td.sttun{grid-area:tun; align-self:end; display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap} table.stbelegliste tbody tr.stbearbeiten{display:block} table.stbelegliste tbody tr.stbearbeiten td{display:block; padding:8px} table.stbelegliste tbody tr.stbearbeiten[hidden]{display:none} /* GEMESSEN 15.09.2026 bei 390 px: `display:block` schlug `hidden` — alle Änderungsformulare standen offen */ /* Belegmanager (15.09.2026): Griff und Auswahl in die erste Zeile, die zweite Spalte (Kategorie) ist die dritte Zelle */ table.bmliste tbody tr{grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"wahl datum betrag" "wahl kat kat" "wahl notiz notiz" "wahl datei datei" "wahl tun tun"} table.bmliste tbody td.sttun{justify-content:flex-start; margin-top:6px} form.bmsammel label, form.bmsammel select{max-width:100%; min-width:0} form.bmsammel select{width:100%; box-sizing:border-box} table.bmliste tbody td.bmwahl{grid-area:wahl; display:flex; flex-direction:column; align-items:center; gap:8px; padding-top:2px} table.bmliste tbody td:nth-child(2){grid-area:datum; color:inherit; font-size:inherit} table.bmliste tbody td:nth-child(3){grid-area:kat; color:var(--tinte2); font-size:13px} table.stbelegliste tfoot tr{display:flex; justify-content:space-between; gap:12px} table.stbelegliste tfoot td{padding:6px 0 0; border:0; flex:1 1 auto; min-width:0} table.stbelegliste tfoot td.z{flex:none} table.stbelegliste tfoot td:empty{display:none} table.stbelegliste tfoot tr.stgesamt{border-top:1px solid var(--linie); margin-top:4px} table.stbelegliste tfoot tr.stgesamt td{border-top:0} table.stpaketliste, table.stpaketliste tbody{display:block} table.stpaketliste thead{display:none} table.stpaketliste tbody tr{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; padding:10px 0; border-bottom:1px solid var(--linie)} table.stpaketliste tbody td{display:block; padding:0; border:0; font-size:13px} table.stpaketliste tbody td:nth-child(1){font-weight:600; font-size:13px} table.stpaketliste tbody td:nth-child(1)::before{content:"Erzeugt "; font-weight:400; color:var(--tinte3)} table.stpaketliste tbody td:nth-child(2)::before{content:"Gültig bis "; color:var(--tinte3)} table.stpaketliste tbody td:nth-child(4)::before{content:"Abrufe "; color:var(--tinte3)} table.stpaketliste tbody td.z{text-align:left} table.stpaketliste tbody td.sttun{grid-column:2; grid-row:1 / span 5; align-self:start} } form.stpaketform{margin:0 0 22px} /* VERMÖGEN (14.09.2026) — Gesamtblick, Darlehen, Verträge, Ziele. Maße nach Handbuch: 26 zwischen Blöcken, 24 in Karten, 18 unter dem Titel. */ section.vmblick, section.vmwichtig, section.vmdarlehen, section.vmvertraege, section.vmziele, section.vmimmobilien{background:var(--flaeche); border:1px solid var(--linie); border-radius:16px; padding:24px; margin:0 0 26px} section.vmblick h2.modultitel, section.vmwichtig h2.modultitel, section.vmdarlehen h2.modultitel, section.vmvertraege h2.modultitel, section.vmziele h2.modultitel, section.vmimmobilien h2.modultitel{margin-bottom:18px} .vmkacheln .kachel.vmgesamt{background:color-mix(in srgb, var(--gut) 10%, var(--flaeche)); outline-color:color-mix(in srgb, var(--gut) 30%, transparent)} .vmkacheln{grid-template-columns:repeat(2,1fr); gap:var(--luft-raster); margin-bottom:0} /* GEMESSEN 14.09.2026 bei 1561 px: sechs Spalten à 184 px — „SPAR- UND RÜCKLAGENKONTEN" braucht 191 px, brach um. Also höchstens vier Spalten (ab 1000 px ≥ 229 px je Kachel): vier oben, zwei unten und das Nettovermögen doppelt breit daneben — die Zahl bricht nie um. */ @media (min-width:761px){ .vmkacheln{grid-template-columns:repeat(3,1fr)} } @media (min-width:901px){ .vmkacheln{grid-template-columns:repeat(4,1fr)} } .vmkacheln .kachel{padding:14px 16px 16px; gap:4px} .vmkacheln .kachel.vmnetto, .vmkacheln .kachel.vmgesamt{background:color-mix(in srgb, var(--akzent) 9%, var(--flaeche)); outline:1px solid color-mix(in srgb, var(--akzent) 25%, transparent); outline-offset:-1px} .vmkacheln .kachel.vmnetto .kz, .vmkacheln .kachel.vmgesamt .kz{font-size:24px} .vmkacheln .kachel.vmnetto, .vmkacheln .kachel.vmgesamt{grid-column:1 / -1} @media (min-width:901px){ .vmkacheln .kachel.vmnetto, .vmkacheln .kachel.vmgesamt{grid-column:span 2} } .umschalter.konten a.vm .ikon{width:17px; height:17px; color:var(--tinte3)} .umschalter.konten a.vm.aktiv .ikon{color:currentColor} /* 02.10.2026: Karten einer Liste liegen mindestens 12 px auseinander (Gestalt-Wächter „abstand“, gemessen bei 1194 px: 10 px). */ ul.vmliste{margin:0; padding:0; list-style:none; display:grid; gap:12px} ul.vmliste li{position:relative; padding:12px 14px 12px 40px; border-radius:12px; background:var(--flaeche2); font-size:13px; line-height:1.55; color:var(--tinte)} ul.vmliste li::before{content:""; position:absolute; left:16px; top:19px; width:9px; height:9px; border-radius:50%; background:var(--warte)} ul.vmliste li a{color:var(--akzent)} ul.vmliste li b{color:var(--tinte)} form.vmfrage{display:inline-flex; gap:8px; margin:8px 0 0; flex-wrap:wrap} form.vmfrage button{width:auto; height:34px; padding:0 14px; font-size:13px; border-radius:8px} .dljahre{display:flex; flex-wrap:wrap; gap:8px; align-items:center} .dljahre .dljtitel{font-size:13px; color:var(--tinte3); margin-right:4px} form.dljahr{margin:0} form.dljahr button{width:auto; height:30px; padding:0 13px; font-size:13px; font-weight:500; border-radius:999px; box-shadow:none; background:var(--flaeche2); color:var(--tinte2); border:1px solid transparent} form.dljahr.ja button{background:color-mix(in srgb, var(--gut) 14%, var(--flaeche)); color:var(--gut); border-color:color-mix(in srgb, var(--gut) 40%, transparent)} form.dljahr.getan button{background:var(--gut); color:#fff; opacity:1} form.dljahr.nein button{background:transparent; color:var(--tinte3); border-color:var(--linie); text-decoration:line-through} form.dljahr button:hover{color:var(--tinte)} p.vmleer{margin:0 0 18px; font-size:13px; color:var(--tinte3); max-width:70ch; line-height:1.55} article.dlkarte{border:1px solid var(--linie); border-radius:14px; padding:20px 22px; margin:0 0 18px; display:grid; gap:16px} .dlkopf{display:flex; justify-content:space-between; gap:18px; align-items:flex-start; flex-wrap:wrap} .dlkopf h3{margin:0 0 4px; font-size:16px; letter-spacing:-.01em} /* Die Marke der Bank bzw. des Anbieters vor dem Namen (16.09.2026). Christian: „für alle Finanzprodukte … das Logo drin haben." Sie steht VOR dem Namen, nicht statt seiner: das Bild erkennt man schneller, der Name ist eindeutig. */ .dlkopf p.dlwo{margin:0; font-size:13px; color:var(--tinte2); display:flex; align-items:center; gap:7px; flex-wrap:wrap} .dlkopf p.dlwo .bankmarke.vmmarke{height:calc(var(--bmh,16px) * 1.15); top:0; margin-right:1px} .dlzahl{display:grid; gap:2px; text-align:right; margin-left:auto} .dlzahl .dlgross{font-size:24px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--tinte)} .vtkarte .dlzahl .dlgross{color:var(--gut)} .dlzahl .dlgross.minus{color:var(--bad)} /* eine Schuld ist rot — überall, nicht nur im Gesamtblick */ .dlzahl .dlklein{font-size:12px; color:var(--tinte3); max-width:34ch} dl.dlfakten{margin:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px 18px} dl.dlfakten div{display:grid; gap:2px; min-width:0} dl.dlfakten dt{font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinte3)} dl.dlfakten dd{margin:0; font-size:14.5px; color:var(--tinte); font-variant-numeric:tabular-nums} dl.dlfakten dd small{display:block; margin-top:2px; font-size:12px; color:var(--tinte3); font-variant-numeric:normal; line-height:1.5} dl.dlfakten dd small{color:var(--tinte3); font-size:12px} /* Die Kurve rollt, statt ihre Schrift unlesbar zu machen (gemessen 15.09.2026: 7,34 px bei 768 px Fensterbreite). 820 px ist die Breite, bei der die kleinste Beschriftung noch ueber 9 px liegt — darunter wird geschoben. */ .dlrolle{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:10px} /* ================================================================== * * WANN WIRD ES LEICHTER — die Treppe der monatlichen Belastung * (18.09.2026) * * Das Bauteil hat EINE Aufgabe: Man soll ohne Lesen sehen, wo man steht und * dass es nach unten geht. Darum traegt genau EINE Stufe die volle Farbe — * die laufende —, alle kuenftigen sind ruhige Flaechen. Zwoelf gleich bunte * Stufen waeren huebsch und nutzlos. * ================================================================== */ /* SCHRIFTGROESSE IM SVG IST NICHT GLEICH SCHRIFTGROESSE AUF DEM SCHIRM (gemessen 18.09.2026 an meiner eigenen ersten Fassung): Die viewBox ist 760 breit und die Mindestbreite war ebenfalls 760 — Massstab 1,0. Damit waren 8,5 px im SVG auch 8,5 px auf dem Schirm, unter Christians Grenze von 9 px („Eine Grafik, die nicht mehr lesbar ist, schrumpft nicht weiter"). Die Tilgungskurve daneben kommt auf 10,2 px, weil ihre Mindestbreite ueber der viewBox liegt. Statt die Grafik breiter zu machen — sie rollt dann auf dem Telefon noch mehr — waechst hier die Schrift. */ /* Die kuenftigen Stufen: erkennbar, aber nicht laut. */ /* DIE LAUFENDE STUFE MUSS SICH ABHEBEN, NICHT NUR ANDERS SEIN (18.09.2026). In der ersten Fassung lagen .17 und .46 Deckung so dicht beieinander, dass die drei Stufen im Bild fast gleich aussahen — genau das, was Christian NICHT will („dass man sofort realisiert, wo wir stehen"). Jetzt: die kuenftigen sehr ruhig, die laufende voll, dazu eine kraeftige Oberkante. Der Unterschied muss aus zwei Metern Abstand auffallen. */ /* Die Kante, an der es weniger wird. */ section.vmbelastung{margin-bottom:26px} p.bzsatz{margin:0 0 14px; font-size:15px; line-height:1.55; color:var(--tinte2); max-width:70ch} p.bzsatz b{color:var(--tinte); font-weight:650} /* Die Phasen als Aufklapper — Einzelheiten auf Abruf, nicht ausgebreitet. */ .bzphasen{margin-top:var(--luft-block); display:flex; flex-direction:column; gap:var(--luft-raster)} details.bzphase{border:1px solid var(--linie); border-radius:10px; background:var(--flaeche); overflow:hidden} details.bzphase + details.bzphase{margin-top:0} details.bzphase > summary{display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:15px 16px; cursor:pointer; list-style:none; font-size:14.5px} details.bzphase > summary::-webkit-details-marker{display:none} details.bzphase .bzpwann{color:var(--tinte2); font-variant-numeric:tabular-nums} details.bzphase .bzpzahl{font-weight:650; color:var(--tinte); font-variant-numeric:tabular-nums; white-space:nowrap} /* Die laufende Phase ist auch in der Liste die betonte. */ details.bzphase.bzphasejetzt{border-color:var(--akzent); background:var(--flaeche2)} details.bzphase.bzphasejetzt .bzpwann{color:var(--tinte); font-weight:600} ul.bzpliste{list-style:none; margin:0; padding:0 14px 12px; display:flex; flex-direction:column; gap:1px} ul.bzpliste li{display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:7px 0; border-top:1px solid var(--linie); font-size:13px} ul.bzpliste .bzpname{color:var(--tinte2); display:flex; flex-direction:column; gap:2px; min-width:0} ul.bzpliste .bzpname i{font-style:normal; font-size:12px; color:var(--tinte3)} /* Der Vorbehalt ist kein Kleingedrucktes: Wo gerechnet statt gewusst wird, sagt es das Bauteil an Ort und Stelle — mit Zeichen, damit es auch beim Ueberfliegen auffaellt. */ ul.bzpliste .bzpname i.bzpoffen{display:flex; align-items:center; gap:5px; color:var(--wartetinte); margin-top:2px} ul.bzpliste .bzpname i.bzpoffen svg{flex:0 0 auto} ul.bzpliste .bzpbetrag{font-variant-numeric:tabular-nums; color:var(--tinte); white-space:nowrap} p.bzoffen{display:flex; align-items:flex-start; gap:7px; margin:14px 0 0; font-size:12px; line-height:1.5; color:var(--tinte3); max-width:78ch} p.bzoffen svg{flex:0 0 auto; margin-top:2px} @media (max-width:560px){ details.bzphase > summary{flex-direction:column; align-items:flex-start; gap:3px} ul.bzpliste li{flex-direction:column; align-items:flex-start; gap:2px} } svg.dlkurve{width:100%; min-width:820px; height:auto; aspect-ratio:640/200; display:block; border-radius:10px; background:var(--flaeche2)} svg.dlkurve .dlraster{stroke:var(--linie); stroke-width:1; vector-effect:non-scaling-stroke} svg.dlkurve .dlmit{fill:none; stroke:var(--akzent); stroke-width:2.2; vector-effect:non-scaling-stroke; stroke-linejoin:round} svg.dlkurve .dlohne{fill:none; stroke:var(--tinte3); stroke-width:1.6; stroke-dasharray:5 4; vector-effect:non-scaling-stroke} svg.dlkurve .dljahr{font-size:9.5px; fill:var(--tinte3); font-family:var(--schrift)} svg.dlkurve .dlskala{font-size:9.5px; fill:var(--tinte3); font-family:var(--schrift); text-anchor:end; font-variant-numeric:tabular-nums} svg.dlkurve .dlraster.dlnull{stroke:var(--tinte3)} /* Das Ende jeder Linie steht dran (16.09.2026) — sonst muss man raten, in welchem Jahr sie ankommt. SCHUTZRAUM STATT KOLLISION (18.09.2026). Christian: „Dass du hier Schrift einfach so reinsetzt an die Linie. Das sieht doch nicht schön aus. Da muss doch ein Sicherheitsabstand rein. Und ‚ohne: November 2032‘ über der gestrichelten Linie. Auch nicht schön gemacht … professionelle Daten bitte aufbereiten." ER HAT RECHT: Beide Beschriftungen sassen 9 px ueber der Nulllinie — genau dort, wo die Linien einlaufen. „getilgt April 2029" stand auf der gruenen Linie, „ohne: November 2032" mitten in der gestrichelten. Abstand allein loest das NICHT: Wohin man den Text auch schiebt, an einer Stelle kreuzt ihn irgendwann eine Linie — das haengt von Laufzeit, Zins und Sondertilgung ab und aendert sich mit jeder Eingabe. Wer nur verschiebt, hat Glueck, keine Loesung. Also der Weg, den jedes gute Diagramm geht: Der Text traegt eine KONTUR in der Flaechenfarbe und wird VOR seiner eigenen Kontur gefuellt (`paint-order`). Damit schneidet er sich seinen Platz aus der Grafik frei, wo immer er steht — die Linie laeuft sichtbar dahinter weiter, wird aber am Text sauber unterbrochen. Dazu mehr Abstand nach unten, damit Text und Linie sich auch dann nicht beruehren, wenn nichts zu schneiden ist. */ svg.dlkurve .dlende{font-size:8.5px; font-weight:600; font-family:var(--schrift); paint-order:stroke fill; stroke:var(--flaeche2); stroke-width:3.5px; stroke-linejoin:round; vector-effect:non-scaling-stroke} svg.dlkurve .dlendemit{fill:var(--akzent)} svg.dlkurve .dlendeohne{fill:var(--tinte3)} /* Die Jahreszahlen an der Achse brauchen denselben Schutz: Die gestrichelte Linie laeuft bei langen Laufzeiten flach ueber sie hinweg. */ svg.dlkurve .dljahr{paint-order:stroke fill; stroke:var(--flaeche2); stroke-width:3px; stroke-linejoin:round; vector-effect:non-scaling-stroke} p.dllegende{margin:-8px 0 0; display:flex; gap:18px; flex-wrap:wrap; font-size:12px; color:var(--tinte2)} p.dllegende span{display:inline-flex; align-items:center; gap:7px} p.dllegende i{display:inline-block; width:22px; height:0; border-top:2.2px solid var(--akzent)} p.dllegende i.dlohnem{border-top:1.6px dashed var(--tinte3)} p.dlsatz{margin:0; font-size:14.5px; line-height:1.6; color:var(--tinte2); max-width:80ch} p.dlsatz b{color:var(--tinte); font-variant-numeric:tabular-nums} p.dlsatz small{display:block; margin-top:6px; font-size:12px; color:var(--tinte3)} .dltun{display:flex; gap:12px; align-items:center; justify-content:flex-end; flex-wrap:wrap} .dltun form{margin:0; display:inline-flex} .dltun button.ststift, .dltun button.weg{width:auto; display:inline-flex; align-items:center; gap:6px; padding:7px 13px; font-size:13px; font-weight:500; background:transparent; color:var(--tinte2); border:1px solid var(--linie); box-shadow:none; border-radius:8px} .dltun button.ststift .ikon{width:13px; height:13px} .dltun button.ststift:hover, .dltun button.ststift[aria-expanded=true]{color:var(--akzent); border-color:var(--akzent)} .dltun button.weg:hover{color:var(--bad); border-color:var(--bad)} .dlform{padding:18px; border-radius:12px; background:var(--flaeche2)} form.vmform{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:14px; align-items:end; margin:0} form.vmform label{display:grid; gap:4px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinte3); min-width:0} form.vmform label.breit{grid-column:1 / -1} /* ALLE EINGABEFELDER, NICHT EINE AUFZÄHLUNG (16.09.2026, im Durchgang gemessen). Die Regel zählte `text` und `date` auf — ein Feld vom Typ `number` (das Jahr im Freistellungsauftrag) fiel durch und stand mit 21 px statt 44 px da. Eine Aufzählung vergisst immer den nächsten Typ. Jetzt gilt die Regel für JEDES Eingabefeld und nimmt nur die Sonderfälle aus, die anders aussehen müssen. */ form.vmform input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]), form.vmform input[type=text], form.vmform input[type=date], form.vmform select{box-sizing:border-box; width:100%; height:44px; padding:0 12px; margin:0; font:inherit; font-size:14.5px; line-height:normal; color:var(--tinte); background-color:var(--flaeche); border:1px solid var(--linie); border-radius:10px; min-width:0} form.vmform select{appearance:none; -webkit-appearance:none; padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20width%3D'11'%20height%3D'7'%20viewBox%3D'0%200%2011%207'%20fill%3D'none'%20stroke%3D'%234C6062'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M1%201.3%205.5%205.7%2010%201.3'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; background-size:11px 7px} form.vmform input:focus, form.vmform select:focus{outline:2px solid var(--akzent); outline-offset:-1px; border-color:var(--akzent)} form.vmform label.vmhaken{display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0; font-size:13px; color:var(--tinte2); height:44px} form.vmform label.vmhaken input{width:18px; height:18px; margin:0; accent-color:var(--akzent)} form.vmform .sttasten{display:flex; gap:8px; align-items:end} form.vmform .sttasten button{width:auto; height:44px; padding-block:0} details.vmneu{border:1px dashed var(--linie); border-radius:14px; padding:0} details.vmneu summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; padding:14px 18px; font-size:14.5px; font-weight:500; color:var(--akzent)} details.vmneu summary::-webkit-details-marker{display:none} details.vmneu summary .ikon{width:15px; height:15px} details.vmneu[open]{border-style:solid; background:var(--flaeche2)} details.vmneu[open] summary{border-bottom:1px solid var(--linie)} details.vmneu form.vmform{padding:18px} /* ================================================================== ZURUECKGEFUEHRTE DARLEHEN — die stille Ecke der Seite (18.09.2026) Christian: „Ich moechte es nur der Vollstaendigkeit halber in der Finanzplanung vermerkt wissen." Genau so ist es gesetzt: Der Block traegt keine Farbe und keinen Betrag im Kopf, weil hier nichts mehr zu entscheiden ist. Er ist zugeklappt, in der ruhigen Schrift der Seite, und wird erst laut, wenn jemand ihn aufmacht. Eine Historie, die sich neben laufende Zahlen draengt, macht die laufenden Zahlen schwerer lesbar — und das waere der teurere Fehler. ================================================================== */ details.vmalt{border:1px solid var(--linie); border-radius:14px; padding:0; margin-bottom:10px} details.vmalt summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; padding:14px 18px; font-size:14.5px; font-weight:500; color:var(--tinte2)} details.vmalt summary::-webkit-details-marker{display:none} details.vmalt summary .ikon{width:15px; height:15px; color:var(--tinte3)} details.vmalt[open]{background:var(--flaeche2)} details.vmalt[open] summary{border-bottom:1px solid var(--linie); color:var(--tinte)} .vmaltvor{margin:16px 18px 4px; font-size:13px; line-height:1.55; color:var(--tinte2)} article.vmaltz{padding:14px 18px 18px; border-top:1px solid var(--linie)} article.vmaltz:first-of-type{border-top:0} article.vmaltz h3{margin:0 0 4px; font-size:15px; font-weight:600; color:var(--tinte)} .vmaltkopf{margin:0 0 12px; font-size:13px; color:var(--tinte2); font-variant-numeric:tabular-nums} dl.vmaltl{display:grid; grid-template-columns:auto 1fr; gap:6px 18px; margin:0} dl.vmaltl dt{font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--tinte3); padding-top:2px} dl.vmaltl dd{margin:0; font-size:13px; line-height:1.55; color:var(--tinte)} dl.vmaltl dd b{font-variant-numeric:tabular-nums} .vmaltwann{color:var(--tinte3); font-weight:400} .vmaltnotiz{margin:12px 0 0; font-size:12px; line-height:1.55; color:var(--tinte3)} @media (max-width:560px){ dl.vmaltl{grid-template-columns:1fr; gap:2px} dl.vmaltl dt{padding-top:8px} } .vtbalken{position:relative; height:10px; border-radius:999px; background:var(--flaeche2); overflow:visible} .vtbalken i{display:block; height:100%; border-radius:999px; background:var(--gut)} .vtbalken b{position:absolute; top:-4px; width:2px; height:18px; background:var(--tinte3); border-radius:1px} /* ================================================================== DIE FREISTELLUNGSAUFTRÄGE (16.09.2026, Steuerseite) Ein Balken zeigt, wie viel vom Auftrag verbraucht ist — grün, solange Luft ist, rot, sobald er ausgeschöpft ist. Darunter ein Satz, der sagt, woran man ist: Christians Gesetz vom 15.09.2026, nie mit einem Fragezeichen zurücklassen. ================================================================== */ section.stfrei{display:grid; gap:14px} .frsumme, .frlage{ display:flex; align-items:flex-start; gap:9px; margin:0; font-size:13px; line-height:1.55; color:var(--tinte2); } .frsumme{ padding:12px 14px; border-radius:12px; background:var(--flaeche); border:1px solid var(--linie); font-size:14.5px; font-weight:500; color:var(--tinte); } .frsumme .ikon, .frlage .ikon{flex:0 0 auto; width:17px; height:17px; margin-top:2px; color:var(--gut)} .frsumme.lage-wartet .ikon, .frlage.lage-wartet .ikon{color:var(--tinte3)} .frsumme.lage-warnung .ikon, .frlage.lage-warnung .ikon{color:var(--bad)} .frsumme.lage-warnung{background:color-mix(in srgb, var(--bad) 7%, var(--flaeche)); border-color:color-mix(in srgb, var(--bad) 35%, var(--linie))} /* GEMESSEN (16.09.2026): Die Karten standen ohne Fläche auf dem grauen Blatt der Steuerseite — auf der Vermögensseite fällt das nicht auf, weil der Abschnitt dort selbst weiß ist. Christian: „Die Hintergründe … müssen eigentlich weiß sein, die sind nicht formatiert. Das sieht nicht gut aus." Eine Karte trägt ihre eigene Fläche, unabhängig davon, worauf sie liegt. */ article.frkarte{display:grid; gap:12px; background:var(--flaeche)} .frbalken{position:relative; height:10px; border-radius:999px; background:var(--flaeche2); overflow:hidden} .frbalken i{display:block; height:100%; border-radius:999px; background:var(--gut)} article.frkarte:has(.lage-warnung) .frbalken i{background:var(--bad)} /* ================================================================== DER ANSPRECHPARTNER AM VERSICHERUNGSVERTRAG (16.09.2026) Christian: „dass man sofort weiß, wie man im Notfall anrufen könnte." Die Nummer ist deshalb das kräftigste Element im Block und groß genug für einen Daumen (44 px Schutzraum). ================================================================== */ .vsap{ display:grid; gap:5px; padding:12px 14px; border-radius:12px; background:var(--flaeche2); border:1px solid var(--linie); } b.vsbeide{font-weight:600; color:var(--akzent)} /* Die Ankreuzfelder „wer ist mitversichert“ (16.09.2026) — in einer Zeile, mit Fingerplatz. */ label.vsmitfeld > span.vsmitwahl{display:flex; flex-wrap:wrap; gap:6px 16px; padding:7px 0} /* Der Griff ist die ganze Zeile, nicht nur der Kasten (16.09.2026, gemessen: 17 × 17 px). */ /* GEMESSEN 16.09.2026: Im schmalen Formular schrumpften diese Kaestchen mit — das Feld „Unà“ war nur 26 px breit, der Name brach in zwei Zeilen um, und damit lag der Griff unter den 30 px, die jedes Bedienelement haben muss. Ein Name bricht nicht um, und ein Kaestchen schrumpft nicht: Sie weichen in die naechste Zeile aus (der Umbruch steht oben). */ form.vmform label.vsmitk, label.vsmitk{display:inline-flex; align-items:center; gap:8px; font-size:14.5px; color:var(--tinte); cursor:pointer; padding:7px 0; min-height:34px; flex:0 0 auto; white-space:nowrap} form.vmform label.vsmitk input, label.vsmitk input{width:20px; height:20px; flex:0 0 auto; accent-color:var(--akzent); margin:0; cursor:pointer} label.vsmitfeld > small{display:block; font-size:12px; color:var(--tinte3); line-height:1.5} /* Ein Zweifel an der Messung muss man SEHEN (16.09.2026): eine stille falsche Zahl ist schlimmer als gar keine. */ small.vsunklar{display:block; margin-top:.25rem; color:var(--wartetinte); font-weight:600} /* ================================================================== DIE PORTRÄTS IN DER VERWALTUNG (16.09.2026) Christian: „dann werden unsere drei Porträts dort nebeneinander angezeigt." Ein Platz je Mensch, das Bild groß genug, um es zu beurteilen, bevor man es behält. ================================================================== */ .ptprobe{display:inline-flex; vertical-align:middle; margin-left:4px} .ptprobe .pbild{width:28px; height:28px} .vsaptitel{display:flex; align-items:center; gap:7px; font-size:12px; letter-spacing:.02em; color:var(--tinte3)} .vsaptitel .ikon{width:15px; height:15px} p.vsapzeile{margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; font-size:14.5px} p.vsapzeile b{font-weight:600; color:var(--tinte)} a.vsaptel{ font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--akzent); text-decoration:none; display:inline-flex; align-items:center; min-height:32px; } a.vsaptel:hover{text-decoration:underline} a.vsapmail{font-size:13px; color:var(--tinte2); text-decoration:none; overflow-wrap:anywhere} a.vsapmail:hover{color:var(--akzent); text-decoration:underline} p.vsaport{margin:0; font-size:12px; color:var(--tinte3)} /* Die lange Leistungsbeschreibung eines Tarifs: aufgeklappt behält sie ihre Zeilen. */ /* AUCH DIESER AUFKLAPPER IST EIN BEDIENELEMENT (16.09.2026, gemessen: 19 px Griff). */ details.vsmehr > summary{cursor:pointer; font-size:12px; color:var(--tinte3); list-style:none; display:flex; align-items:center; min-height:30px} details.vsmehr > summary::-webkit-details-marker{display:none} details.vsmehr > summary::before{content:'› '} details.vsmehr[open] > summary::before{content:'⌄ '} p.vstext{margin:6px 0 0; font-size:13px; line-height:1.6; color:var(--tinte2); white-space:pre-line} .vswform textarea{ font:inherit; font-size:14.5px; line-height:1.55; width:100%; resize:vertical; padding:10px 12px; border:1px solid var(--linie); border-radius:10px; background:var(--flaeche); color:var(--tinte); } .vswform textarea:focus-visible{outline:2px solid var(--akzent); outline-offset:1px} details.frinfo, details.frneu{border:1px solid var(--linie); border-radius:12px; padding:11px 14px; background:var(--flaeche)} details.frinfo > summary, details.frneu > summary{ cursor:pointer; font-size:13px; color:var(--tinte2); white-space:normal; list-style:none; /* GRIFFHÖHE (16.09.2026, im Durchgang gemessen: 20 px). Ein Aufklapper ist ein Bedienelement — er braucht dieselbe Trefferfläche wie ein Knopf, sonst trifft ihn ein Finger nicht sicher. Die Zeile wird nicht höher gesetzt, sie bekommt Platz um sich. */ display:flex; align-items:center; min-height:34px; padding:3px 0; } details.frinfo > summary::-webkit-details-marker, details.frneu > summary::-webkit-details-marker{display:none} details.frinfo > summary::before, details.frneu > summary::before{content:'› '; color:var(--tinte3)} details.frinfo[open] > summary::before, details.frneu[open] > summary::before{content:'⌄ '} details.frinfo > p{margin:9px 0 0; font-size:13px; line-height:1.55; color:var(--tinte3)} /* SCHUTZRAUM UM DEN ENTFERNEN-KNOPF (16.09.2026, gemessen: 12 px zur nächsten Farbfläche). Das Gesetz verlangt 16 px — gerade bei einem Knopf, der etwas wegnimmt, ist der Abstand kein Schmückwerk, sondern der Schutz vor dem Vertippen. */ details.frinfo button.weg, details.frneu button.weg{margin-top:16px} /* Der Knopf „Entfernen“ stand 12 px unter dem Aufklapper darüber — gemessen im Durchgang. Das Gesetz verlangt 16 px Schutzraum zur nächsten Farbfläche; bei einem Knopf, der etwas wegnimmt, ist das kein Schmückwerk, sondern der Schutz vor dem Vertippen. */ .frkarte .dltun{margin-top:18px} /* Dasselbe im Versicherungsformular: Der Knopf, der einen Vertrag entfernt, steht frei. */ form.vswform .dltun, .vskarte .dltun{margin-top:18px} form.vswform button.weg{margin-top:4px} .frinfo ul.frkonten{margin:8px 0 0; padding-left:18px; display:grid; gap:3px; font-size:13px; color:var(--tinte2)} details.frneu > summary{font-weight:500} details.frneu > form.frform{margin-top:16px} /* B4 (04.10.2026): Haken stand 8 px unter dem Aufklapper, Gesetz 12 */ .zlliste{display:grid; gap:14px; margin:0 0 18px} article.zlkarte{border:1px solid var(--linie); border-radius:14px; padding:18px 20px; display:grid; gap:10px} article.zlkarte.erreicht{border-color:color-mix(in srgb, var(--gut) 40%, transparent)} .zlkopf{display:flex; justify-content:space-between; gap:14px; align-items:baseline; flex-wrap:wrap} .zlkopf h3{margin:0; font-size:15px} .zlzahl{font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap} .zlzahl small{font-weight:400; color:var(--tinte3)} .zlbalken{height:10px; border-radius:999px; background:var(--flaeche2); overflow:hidden} .zlbalken i{display:block; height:100%; border-radius:999px; background:var(--akzent); transition:width .3s ease} article.zlkarte.erreicht .zlbalken i{background:var(--gut)} p.zlsatz{margin:0; font-size:13px; color:var(--tinte2); line-height:1.55} p.zlsatz small{color:var(--tinte3)} @media (max-width:560px){ article.dlkarte{padding:18px} .dlzahl{text-align:left; margin-left:0} .dlzahl .dlgross{font-size:24px} } /* MITTEILUNGEN (Verwaltung, 14.09.2026) */ section.mitteilungen article.eink{margin-bottom:26px} form.mtform{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px; align-items:end} form.mtform .feld.breit{grid-column:1 / -1} form.mtform .feld.tun{grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; gap:10px} form.mtform .feld.tun button{width:auto} form.mtform .feld.tun button.weg{background:transparent; color:var(--tinte2); border:1px solid var(--linie); box-shadow:none} form.mtform .feld.tun button.weg:hover{color:var(--bad); border-color:var(--bad)} form.mtform textarea{width:100%; box-sizing:border-box; padding:10px 12px; font:inherit; font-size:14.5px; line-height:1.5; border:1px solid var(--linie); border-radius:10px; background:var(--flaeche); color:var(--tinte); resize:vertical} form.mtform textarea[name=vorlage]{font-family:var(--schrift-buchung); font-size:12px} form.mtform select{box-sizing:border-box; width:100%; height:46px; padding:0 34px 0 12px; font:inherit; font-size:15px; border:1px solid var(--linie); border-radius:10px; background-color:var(--flaeche); color:var(--tinte); appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20width%3D'11'%20height%3D'7'%20viewBox%3D'0%200%2011%207'%20fill%3D'none'%20stroke%3D'%234C6062'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M1%201.3%205.5%205.7%2010%201.3'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; background-size:11px 7px} form.mtform label.mthaken{grid-column:1 / -1; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--tinte2)} form.mtform label.mthaken input{width:18px; height:18px; margin:0; accent-color:var(--akzent)} form.mtform p.mtkw{grid-column:1 / -1; margin:0; font-size:12px} form.mtform p.mtkw a{color:var(--akzent)} form.mtform small{display:block; margin-top:6px; font-size:12px; color:var(--tinte3)} .mtabsender{display:grid; gap:18px; margin:0 0 18px} form.mtabs{padding:18px; border:1px solid var(--linie); border-radius:14px} form.mtabs.aus{opacity:.6} form.mtempf{padding:14px 0; border-bottom:1px solid var(--linie); margin-bottom:6px} .mtvorlage{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; align-items:start} @media (max-width:900px){ .mtvorlage{grid-template-columns:1fr} } /* Bausteine der Mail (15.09.2026): Karten mit Griff, Pfeilen und Schalter — kein Platzhalter, nichts zum Tippen außer den eigenen Worten */ form.mtform.mtbsform{display:grid; grid-template-columns:minmax(0,1fr); gap:0} form.mtform.mtbsform ol.mtbsliste, form.mtform.mtbsform .feld.tun{grid-column:1 / -1} ol.mtbsliste{list-style:none; margin:0 0 16px; padding:0; display:grid; gap:10px} li.mtbs{border:1px solid var(--linie); border-radius:14px; background:var(--flaeche); position:relative; transition:box-shadow .15s, opacity .15s} li.mtbs.aus{opacity:.55} li.mtbs.aus .mtbskoerper{display:none} li.mtbs.zieht{opacity:.35} li.mtbs.zielo::before, li.mtbs.zielu::after{content:""; position:absolute; left:14px; right:14px; height:3px; border-radius:2px; background:var(--akzent)} li.mtbs.zielo::before{top:-7px} li.mtbs.zielu::after{bottom:-7px} .mtbskopf{display:flex; align-items:center; gap:12px; padding:12px 14px; cursor:grab; user-select:none} .mtbskopf:active{cursor:grabbing} .mtbsgriff{display:grid; gap:3px; padding:2px 8px 2px 2px; color:var(--tinte3)} .mtbsgriff i{display:block; width:3px; height:3px; border-radius:50%; background:currentColor; box-shadow:6px 0 0 currentColor} .mtbsname{flex:1; min-width:0; font-weight:600; font-size:14.5px; display:flex; flex-direction:column; gap:2px; line-height:1.3} .mtbsname small{font-weight:400; font-size:12px; color:var(--tinte3)} .mtbspfeile{display:flex; gap:4px} .mtbspfeile button{width:30px; height:30px; padding:0; box-shadow:none; border-radius:8px; border:1px solid var(--linie); background:var(--flaeche); color:var(--tinte2); display:inline-flex; align-items:center; justify-content:center; cursor:pointer} .mtbspfeile button:disabled{opacity:.3; cursor:default} article.eink .mtbspfeile button{width:30px; padding:0; background:var(--flaeche); color:var(--tinte2); border:1px solid var(--linie); display:inline-flex} article.eink .mtbspfeile button:hover:not(:disabled){color:var(--akzent); border-color:var(--akzent)} .mtbspfeile .ikon{width:14px; height:14px} .mtbshoch .ikon{transform:rotate(-90deg)} .mtbsrunter .ikon{transform:rotate(90deg)} .mtbsan{position:relative; width:42px; height:26px; flex:none; cursor:pointer} .mtbsan input{position:absolute; opacity:0; width:0; height:0} .mtbsan span{position:absolute; inset:0; border-radius:13px; background:#C9D3D3; transition:background .15s} .mtbsan span::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s} .mtbsan input:checked + span{background:var(--gut)} .mtbsan input:checked + span::after{transform:translateX(16px)} .mtbsan input:focus-visible + span{outline:2px solid var(--akzent); outline-offset:2px} .mtbsan.fest{opacity:.6; cursor:default} .mtbskoerper{padding:2px 14px 14px 48px; border-top:1px solid var(--linie); padding-top:12px} .mtbsfelder{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 14px} .mtbsfelder .feld.breit{grid-column:1 / -1} article.eink .mtfarbe .feld > span, article.eink .feld.mtfarbe > span{display:flex; flex-direction:row; align-items:center; gap:10px} .mtfarbe input[type=color]{width:38px; height:30px; padding:2px; border:1px solid var(--linie); border-radius:8px; background:var(--flaeche); cursor:pointer} .mtfarbe code{font-size:12px; color:var(--tinte2)} .mtbsbild{display:block; width:100%; max-width:420px; border-radius:10px; border:1px solid var(--linie)} .mtmuster{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px} .mtmuster label{cursor:pointer} .mtmuster input{position:absolute; opacity:0; width:0; height:0} .mtmuster span{display:inline-block; padding:5px 12px; border-radius:999px; border:1px solid var(--linie); font-size:12px; color:var(--tinte2); background:var(--flaeche)} .mtmuster input:checked + span{background:var(--tinte); color:var(--flaeche); border-color:var(--tinte)} .mtmuster input:focus-visible + span{outline:2px solid var(--akzent); outline-offset:2px} .mttext{display:grid; gap:10px} .mttext[hidden]{display:none} .mtfix{display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:10px; background:var(--flaeche2); font-size:12px; color:var(--tinte2); border:1px dashed var(--linie)} .mtfix .ikon{width:14px; height:14px; flex:none; color:var(--gut)} .mtfix.mtknopf{background:color-mix(in srgb, var(--akzent) 8%, var(--flaeche)); border-style:solid; border-color:color-mix(in srgb, var(--akzent) 35%, var(--linie))} .mtfix.mtknopf .ikon{color:var(--akzent)} @media (max-width:560px){ .mtbsfelder{grid-template-columns:1fr} .mtbskoerper{padding-left:14px} .mtbsname small{display:none} } .mtschau{border:1px solid var(--linie); border-radius:14px; overflow:hidden; background:var(--flaeche2); position:sticky; top:12px} .mtschaukopf{padding:8px 14px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinte3); display:flex; justify-content:space-between; gap:10px} .mtschaukopf span{text-transform:none; letter-spacing:0; color:var(--tinte2)} #mtschau{display:block; width:100%; height:760px; border:0; background:#F1F4F4} table.mtpost td{font-size:13px} .mtfehler{color:var(--bad); font-size:12px} .mtfehler .ikon{width:13px; height:13px; vertical-align:-2px; margin-right:4px} /* KENNWÖRTER (Verwaltung) */ section.kennwoerter .kwnas{display:flex; align-items:center; gap:8px; font-size:13px; margin:0 0 14px; padding:8px 12px; border-radius:10px; background:var(--flaeche2)} section.kennwoerter .kwnas .ikon{width:16px; height:16px} section.kennwoerter .kwnas.gut .ikon{color:var(--gut)} section.kennwoerter .kwnas.wartet .ikon{color:var(--warte)} .kwliste{display:grid; gap:12px} article.kwzeile{background:var(--flaeche); border:1px solid var(--linie); border-radius:14px; padding:16px 18px; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:18px; position:relative; overflow:hidden} /* DER ZUSTAND AN JEDER POSITION (15.09.2026): eine farbige Kante links und ein Satz mit Zeichen oben — grün „In Ordnung", bernstein „wartet", Warnung „braucht Dich". */ article.kwzeile::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--gut)} article.kwzeile.kw-wartet::before{background:var(--warte)} article.kwzeile.kw-noetig::before{background:var(--bad)} article.kwzeile .kwzustand{margin:0 0 8px; display:inline-flex; align-items:center; gap:7px; padding:5px 11px 5px 8px; border-radius:999px; font-size:12px; font-weight:600; color:var(--gut); background:color-mix(in srgb, var(--gut) 12%, var(--flaeche))} article.kwzeile .kwzustand .ikon{width:14px; height:14px; flex:none} article.kwzeile.kw-wartet .kwzustand{color:var(--warte); background:color-mix(in srgb, var(--warte) 14%, var(--flaeche))} article.kwzeile.kw-noetig .kwzustand{color:var(--bad); background:color-mix(in srgb, var(--bad) 10%, var(--flaeche))} .kwrechts{display:grid; gap:10px; align-content:start; justify-items:end} .kwrechts form.kwform{width:100%} .kwrechts form.kwform[hidden]{display:none} button.kwaendern{width:auto; height:38px; padding:0 14px; display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:500; background:transparent; color:var(--tinte2); border:1px solid var(--linie); box-shadow:none; border-radius:10px} button.kwaendern .ikon{width:14px; height:14px} button.kwaendern:hover{color:var(--akzent); border-color:var(--akzent)} .kwsumme{display:flex; gap:14px; align-items:flex-start; padding:16px 18px; margin:0 0 16px; border-radius:14px; border:1px solid color-mix(in srgb, var(--gut) 35%, var(--linie)); background:color-mix(in srgb, var(--gut) 8%, var(--flaeche))} .kwsumme > .ikon{width:24px; height:24px; flex:none; color:var(--gut); margin-top:2px} .kwsumme b{display:block; font-size:16px; margin-bottom:3px} .kwsumme span{font-size:13px; line-height:1.5; color:var(--tinte2)} .kwsumme a{color:var(--akzent)} .kwsumme.wartet{border-color:color-mix(in srgb, var(--warte) 40%, var(--linie)); background:color-mix(in srgb, var(--warte) 10%, var(--flaeche))} .kwsumme.wartet > .ikon{color:var(--warte)} .kwsumme.noetig{border-color:color-mix(in srgb, var(--bad) 40%, var(--linie)); background:color-mix(in srgb, var(--bad) 8%, var(--flaeche))} .kwsumme.noetig > .ikon{color:var(--bad)} @media (max-width:760px){ .kwrechts{justify-items:stretch} } article.kwzeile .kwkopf h3{margin:0 0 4px; font-size:15px} article.kwzeile .kwwohin{margin:0 0 6px; font-size:13px; color:var(--tinte2)} article.kwzeile .kwstand{margin:0; font-size:12px; color:var(--tinte3)} article.kwzeile .kwstand .ikon{width:14px; height:14px; vertical-align:-2px; margin-right:4px} article.kwzeile .kwwartet{color:var(--warte)} article.kwzeile .kwda{color:var(--gut)} article.kwzeile .kwreihenfolge{margin:8px 0 0; font-size:12px; color:var(--tinte2); line-height:1.5} form.kwform{display:grid; gap:10px; align-content:start} form.kwform label{display:grid; gap:4px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinte3)} form.kwform input[type=password]{height:44px; padding:0 12px; font:inherit; font-size:15px; letter-spacing:.12em; border:1px solid var(--linie); border-radius:10px; background:var(--flaeche); margin:0} form.kwform input[type=password]:focus{outline:none; border-color:var(--akzent)} form.kwform button.kwsenden{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:auto; height:44px; padding:0 16px} form.kwform button.kwsenden .ikon{width:16px; height:16px} form.kwform button.kwsenden.weg{background:transparent; color:var(--tinte2); border:1px solid var(--linie); text-decoration:none} /* Der Paket-Knopf der Steuerseite trägt einen ganzen Satz — er darf umbrechen (steht NACH der kwform-Regel, damit height:auto gilt). */ form.stpaketform button.kwsenden{width:auto; justify-self:start; max-width:100%; box-sizing:border-box; min-width:0; white-space:normal; text-align:left; height:auto; min-height:var(--knopf); padding:10px 16px} @media (max-width:560px){ form.stpaketform button.kwsenden{width:100%; justify-self:stretch} } form.stpaketform button.kwsenden .ikon{width:16px; height:16px; flex:none} form.kwform .kwmeldung{margin:0; font-size:12px; color:var(--tinte3); min-height:1em} /* Die Schranke vor dem Versand (15.09.2026): eine Frage in Worten, „Noch nicht" vorbelegt, „Ja, jetzt senden" in der Akzentfarbe — kein Rot, es ist kein Löschen. */ form.kwform .kwfrage{display:grid; gap:12px; padding:14px 16px; border-radius:12px; background:var(--flaeche2); border:1px solid var(--linie); font-size:14.5px; line-height:1.55; color:var(--tinte)} form.kwform .kwfrage[hidden]{display:none} form.kwform .kwfragetasten{display:flex; gap:10px; flex-wrap:wrap} form.kwform .kwfragetasten button{width:auto; height:40px; padding:0 16px; border-radius:10px; font-size:14.5px; font-weight:600} form.kwform .kwfragetasten .wegja{background:var(--akzent); color:var(--aufakzent)} form.kwform .kwfragetasten .wegnein{background:var(--flaeche); color:var(--tinte); border:1px solid var(--linie)} form.kwform .kwmeldung.schlecht{color:var(--bad)} form.kwform .kwmeldung.gut{color:var(--gut)} article.kwverteil{margin-top:18px; border-style:dashed} @media (max-width:760px){ article.kwzeile{grid-template-columns:1fr} } /* DIE UEBERGABE AN CHATGPT (20.09.2026) — eine Karte je Gedanke: der Schalter, was er bekommt, was er nicht bekommt, der Block. */ /* Der Fassungswächter legt sich unten hin und schiebt nichts weg. */ .neufass{position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:60; display:flex; align-items:center; gap:14px; max-width:min(620px, calc(100vw - 32px)); padding:12px 14px 12px 16px; border-radius:14px; box-sizing:border-box; background:var(--flaeche); border:1px solid var(--akzent); box-shadow:0 8px 28px rgba(15,30,31,.22)} .neufass[hidden]{display:none} .neufass p{margin:0; display:flex; align-items:flex-start; gap:8px; font-size:13px; line-height:1.5; color:var(--tinte)} .neufass p .ikon{flex:0 0 auto; margin-top:2px} .neufass button{width:auto; min-width:0; flex:0 0 auto; height:38px; padding:0 14px; font-size:14.5px} @media (max-width:560px){ .neufass{flex-direction:column; align-items:stretch; gap:10px} .neufass button{width:100%} } section.ueber{display:grid; gap:var(--luft-block)} section.ueber article.vwkarte{background:var(--flaeche); border:1px solid var(--linie); border-radius:14px; padding:16px 18px} section.ueber article.vwkarte h3{margin:0 0 var(--luft-satz); font-size:17px} ul.uebliste{list-style:none; margin:0; padding:0; display:grid; gap:var(--luft-satz)} ul.uebliste li{display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.55; color:var(--tinte2)} ul.uebliste li .ikon{flex:0 0 auto; margin-top:3px} form.uebform{display:grid; gap:var(--luft-raster); margin:0 0 var(--luft-block)} form.uebform label{display:grid; gap:4px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinte3)} form.uebform select, form.uebform textarea{font:inherit; font-size:14.5px; padding:8px 10px; border:1px solid var(--linie); border-radius:10px; background:var(--flaeche); color:var(--tinte); width:100%; box-sizing:border-box} form.uebform select:focus, form.uebform textarea:focus{outline:none; border-color:var(--akzent)} form.uebform button{width:auto; justify-self:start} p.uebstand{display:flex; align-items:center; gap:8px; margin:0 0 var(--luft-raster)} p.uebfund{display:flex; align-items:flex-start; gap:8px; margin:-6px 0 0; font-size:13px} p.uebfund .ikon{flex:0 0 auto; margin-top:2px} form.uebform input[type=text]{font:inherit; font-size:14px; padding:8px 10px; border:1px solid var(--linie); border-radius:10px; background:var(--flaeche); color:var(--tinte); width:100%; box-sizing:border-box; margin:0} form.uebform input[type=text]:focus{outline:none; border-color:var(--akzent)} .uebaktion{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 var(--luft-satz)} .uebaktion button{width:auto} .uebmeldung{font-size:12px; color:var(--gut-tinte)} .uebmeldung.schlecht{color:var(--bad)} textarea.uebblock{width:100%; box-sizing:border-box; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; line-height:1.5; padding:12px; border:1px solid var(--linie); border-radius:12px; background:var(--flaeche2); color:var(--tinte); resize:vertical} /* Die Schranke vor dem Entfernen in der Verwaltung */ .wegfrage{display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--tinte2); background:var(--flaeche2); border-radius:10px; padding:6px 8px 6px 12px} .wegfrage button{width:auto; padding:6px 12px; font-size:12px; border-radius:8px; font-weight:600} .wegfrage .wegja{background:var(--bad); color:#fff} .wegfrage .wegnein{background:var(--flaeche); color:var(--tinte)} /* Marken der Banken (Verwaltung › Marke) */ section.bankmarken{margin-top:28px} div.bmliste{display:grid; gap:10px; margin:12px 0 16px} /* nur die Bankmarken-Liste (div) — 05.10.2026: die Klasse traf auch table.bmliste und zerlegte die Belegtabelle */ article.bmzeile{display:flex; gap:16px; align-items:flex-start; background:var(--flaeche); border:1px solid var(--linie); border-radius:14px; padding:14px 16px} .bmbild{width:72px; height:56px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--flaeche2); border-radius:10px; overflow:hidden; padding:6px; box-sizing:border-box} /* DIE MARKE BLEIBT IN IHRER KACHEL (16.09.2026). Christian: „ERGO springt den Rahmen, Wüstenrot springt den Rahmen." URSACHE, gemessen: Die Vorschau setzte nur die HOEHE (--bmh × 1,5) — eine breite Wortmarke wuchs seitlich aus der 72-px-Kachel heraus. Jetzt begrenzen Hoehe UND Breite; das Bild behaelt sein Verhaeltnis (contain). */ .bmbild .bankmarke{height:calc(var(--bmh,16px) * 1.5); max-height:100%; max-width:100%; width:auto; object-fit:contain; top:0} .bmtext{min-width:0; flex:1 1 auto} .bmtext h3{margin:0 0 2px; font-size:15px} .bmtext h3 small{font-weight:400; color:var(--tinte3); font-size:12px; margin-left:6px} .bmhoehe label{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--tinte3)} .bmhoehe select{height:34px; padding:0 8px; font:inherit; font-size:13px; border:1px solid var(--linie); border-radius:8px; background-color:var(--flaeche)} form.bmneu, form.bmneuholen{display:grid; grid-template-columns:minmax(0,1.4fr) auto minmax(0,1.4fr) auto; gap:12px; align-items:end; background:var(--flaeche); border:1px dashed var(--linie); border-radius:14px; padding:14px 16px} form.bmneu h3, form.bmneuholen h3{grid-column:1 / -1; margin:0; font-size:14.5px} form.bmneu label, form.bmneuholen label{display:grid; gap:4px; font-size:12px; color:var(--tinte3); min-width:0; align-content:end} form.bmneu input[type=file], form.bmneuholen input[type=file]{height:46px; padding:10px 0; box-sizing:border-box} form.bmneu label span, form.bmneuholen label span{letter-spacing:.04em; text-transform:uppercase; font-size:12px} form.bmneu input[type=text]{margin:0} form.bmneu select{height:46px; padding:0 10px; font:inherit; border:1px solid var(--linie); border-radius:10px; background-color:var(--flaeche)} form.bmneu button{width:auto; height:46px; padding-block:0} @media (max-width:760px){ form.bmneu{grid-template-columns:1fr} article.bmzeile{flex-direction:column} } .md-tun form{display:flex; gap:12px; align-items:center; margin:0; flex-wrap:wrap} /* Knoepfe in der Werkzeugreihe sind so breit wie ihr Wort (Handbuch: der Knopf verbreitert sich, nicht die Zeile) — sonst griff button{width:100%}. */ .md-tun button{width:auto; padding:9px 16px} .md-tun form.bmhoehe button{padding:7px 12px} .md-tun input[type=file]{font:inherit; font-size:12px; max-width:100%; color:var(--tinte2)} .md-tun input[type=file]::file-selector-button{ font:inherit; font-size:12px; padding:7px 12px; margin-right:9px; cursor:pointer; border:1px solid var(--linie); border-radius:8px; background:var(--flaeche); color:var(--tinte); } .md-tun button{ border:0; background:var(--akzent); color:var(--aufakzent); font:inherit; font-size:13px; font-weight:600; padding:8px 16px; border-radius:8px; cursor:pointer; white-space:nowrap; } .md-tun button.weg{background:transparent; color:var(--tinte3); font-weight:400; text-decoration:underline; text-underline-offset:2px; padding:8px 2px} .md-tun button.weg:hover{color:var(--bad)} /* Posten verwalten */ .postenliste{display:grid; gap:10px} article.pv{ padding:15px 17px; border:1px solid var(--linie); border-radius:13px; background:var(--flaeche); } article.pv.pausiert{background:var(--flaeche2)} article.pv.pausiert .pv-was h3, article.pv.pausiert .pv-betrag{opacity:.55} article.pv.offen{border-color:var(--akzent)} .pv-zeile{display:flex; justify-content:space-between; gap:14px; align-items:flex-start} .pv-was{min-width:0; flex:1 1 auto} .pv-was h3{margin:0; font-size:15px; letter-spacing:-.01em; text-transform:none; color:var(--tinte)} .pv-was h3 em{font-style:normal; font-size:12px; color:var(--tinte3); letter-spacing:.03em; text-transform:uppercase; margin-left:8px} .pv-was p{margin:3px 0 0; font-size:12px; color:var(--tinte3); line-height:1.45} .pv-betrag{font-variant-numeric:tabular-nums; font-weight:600; font-size:16px; white-space:nowrap} .pv-betrag.plus{color:var(--gut)} .pv-betrag.minus{color:var(--bad)} .pv-tun{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:13px} .pv-tun .abstand{margin-left:auto} .pv-tun form{display:flex; gap:7px; align-items:center; margin:0} .pv-tun input[type=date]{ font:inherit; font-size:12px; padding:6px 9px; border:1px solid var(--linie); border-radius:8px; background:var(--flaeche); color:var(--tinte); } /* EINE FAMILIE, ZWEI GEWICHTE (20.09.2026, Gesetz 44). Christian: „Der Button ist nicht CI-konform … Buttons müssen grün sein. Bitte global dafür sorgen, dass es einheitlich ist." Der gefüllte Knopf ist die Handlung, der leise Knopf die Nebenhandlung — beide tragen jetzt dieselbe Farbe. Grau war keine dritte Bedeutung, sondern ein Rest aus der Zeit vor dem Corporate Design. */ /* BEFUND DES CI-WAECHTERS (20.09.2026): „Zuklappen" mass 97 px — die Mindestbreite galt nur fuer <button>, nicht fuer den leisen Knopf. Beide Gewichte derselben Familie halten dieselben Masse. */ /* EINE FLAECHE FUER ALLE (23.09.2026, Gesetz 44 aktualisiert). Christian, zum Nebeneinander von „Reise anlegen" (gefuellt) und „Kalkulation und Änderungen" (nur Umriss): „Nach welcher Logik sind einige Buttons mit gruener Hintergrundflaeche, andere einfach nur weiss? … Buttons sind immer auf gruenem Hintergrund. Immer." Die zwei Gewichte (gefuellt fuer die Handlung, Umriss fuer die Nebenhandlung) waren Gesetz 44 vom 20.09.2026 — das gilt ab heute nicht mehr. Eine Flaeche, eine Familie, ueberall. Nur die Gefahr-Variante (.loeschen/.weg, weiter unten) bleibt bewusst anders: Rot traegt eine andere Bedeutung als Gruen und darf sich deshalb weiterhin absetzen. */ .knopfleise{ border:1px solid var(--akzent); background:var(--akzent); color:var(--aufakzent); font:inherit; font-size:13px; font-weight:600; padding:7px 18px; border-radius:8px; cursor:pointer; text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:168px; max-width:340px; min-height:38px; } /* Werkzeuge in einer Zeile — Griffe, Pfeile, Kreuze, „Entfernen" — sind keine Knoepfe der Familie und tragen deren Mindestbreite nicht. */ .sttun .knopfleise, .bltun .knopfleise, td .knopfleise, td button, .sttun button, .bltun button, .ubzliste button, ul.ubvliste button{min-width:0} @media (max-width:560px){.knopfleise{width:100%; max-width:none}} .knopfleise:hover{filter:brightness(1.08)} .knopfleise .ikon{width:14px; height:14px; flex:0 0 auto} /* Doppelwandigkeit weg (23.09.2026). Christian, zum Tastatur-Fokusring auf „Zuklappen": „Diese Buttons mit doppelten Rahmen finde ich grauselig … Mach die Doppelwandigkeit weg." Der globale Fokus-Ring (weiter unten in der Datei, 2px Abstand fuer Tastaturnutzer) legte sich als zweite, sichtbar abgesetzte Kontur um den eigenen Rahmen dieses Bauteils. Fuer die knopfleise-Familie ruecken Rahmen und Ring zusammen: kein Abstand mehr, eine Kontur statt zweier. Der Ring bleibt fuer die Tastatur da, nur ohne die Luecke, die wie ein zweiter Rahmen wirkte. */ a.knopfleise:focus-visible, button.knopfleise:focus-visible{outline-offset:0} .pv-tun button.weg{ border:0; background:transparent; color:var(--tinte3); font:inherit; font-size:12px; cursor:pointer; text-decoration:underline; text-underline-offset:2px; padding:7px 2px; } .pv-tun button.weg:hover{color:var(--bad)} .pv-aendern{margin-top:16px; padding-top:16px; border-top:1px solid var(--linie)} /* Einstellungen */ .einstellungen{display:grid; gap:14px} @media (min-width:901px){ .einstellungen{grid-template-columns:repeat(2,minmax(0,1fr))} } article.eink{ padding:17px 19px; border:1px solid var(--linie); border-radius:14px; background:var(--flaeche); } article.eink h3{margin:0 0 7px; font-size:15px; letter-spacing:-.01em; text-transform:none; color:var(--tinte)} /* DIE ZWEITE ÜBERSCHRIFT IN EINER KARTE (17.09.2026): Die zwei Adressen in Hibiscus gehören zum Bankabruf, sind aber eine eigene Sache — eine eigene Karte hätte sie auseinandergerissen, keine Überschrift hätte sie im Fließtext verschwinden lassen. Also eine Stufe leiser als h3. */ article.eink h4.ein-unter{margin:18px 0 6px; padding-top:14px; border-top:1px solid var(--linie); font-size:13.5px; font-weight:600; letter-spacing:-.005em; color:var(--tinte)} article.eink .ein-gemessen.ein-laeuft{color:var(--tinte2)} article.eink .ein-gemessen.ein-laeuft strong{color:var(--tinte)} .ein-gemessen{margin:0 0 14px; font-size:13px; line-height:1.55; color:var(--tinte2)} /* Ein Befund an den eigenen Daten steht nicht in Grau (Gesetz 22). */ .ein-gemessen.ein-schief{color:var(--bad)} .ein-gemessen.ein-schief strong{color:var(--bad)} .ein-gemessen strong{color:var(--tinte); font-variant-numeric:tabular-nums} article.eink form{display:grid; gap:11px} /* SICHERHEITSABSTAND ZWISCHEN FORMULAREN (24.09.2026, gemessen): „Jetzt sichern" und „Wiederherstellungsprobe jetzt" liegen in zwei eigenen <form>, weil sie zwei getrennte Aktionen sind — aber ohne diese Regel stoßen ihre Knöpfe direkt aneinander (0px Abstand). Eine Regel, alle Stellen: jedes Formularpaar in einer .eink-Karte bekommt denselben Mindestabstand, nicht nur die Sicherung. */ article.eink form + form{margin-top:14px} article.eink .feld{display:flex; flex-direction:column; gap:5px} article.eink .feld > span{font-size:12px; color:var(--tinte2); display:flex; flex-direction:column} article.eink .feld > span b{font-weight:400; font-size:12px; color:var(--tinte3)} article.eink input[type=text]{ width:100%; padding:11px 12px; font:inherit; font-size:15px; color:var(--tinte); background:var(--flaeche); border:1px solid var(--linie); border-radius:10px; } /* 29.09.2026, Chris: „Die Buttons sind auch zu breit“ / „zu wenig Sicherheitsabstand“. GEMESSEN: width:100% und display:inline-block hier schlugen die Knopffamilie (Gesetz 45: Textbreite plus Schutzraum, 168 bis 340 px) — jeder Knopf einer Karte war 340 px breit. Jetzt gilt die Familie; die Karte setzt nur noch Farbe und Rundung. */ article.eink button, article.eink a.knopf{ border:0; border-radius:10px; font:inherit; font-size:14.5px; font-weight:600; padding:11px 20px; background:var(--akzent); color:var(--aufakzent); cursor:pointer; width:auto; display:inline-flex; align-items:center; justify-content:center; text-align:center; text-decoration:none; box-sizing:border-box; } article.eink .feld.tun{margin-top:var(--luft-tun, 22px); margin-bottom:var(--luft-tun, 22px)} article.eink > .feld.tun:last-child, article.eink > :last-child > .feld.tun:last-child{margin-bottom:0} article.eink form.einform > button{justify-self:start} /* im Raster nicht auf Spaltenbreite dehnen (gemessen: 340 px) */ /* 29.09.2026, Chris (Konten): „Speichern-Button klebt förmlich an dem vorherigen Feld“ — gemessen 0 px zwischen Feld und Knopf. Vor dem Knopf die Knopfluft (22 px), der Begleitsatz danach mit Satzluft darunter. */ form.einform > button{margin-top:var(--luft-tun, 22px)} form.einform > button + .ein-gemessen{display:block; margin-top:12px} article.eink .feld.tun{row-gap:var(--luft-tun, 22px)} /* Feld und Knopf in einer Knopfzeile: Knopfluft, wenn der Knopf umbricht */ article.eink button.weg{background:var(--bad)} /* ------------------------------------------------------------------ * * KNOEPFE HALTEN ABSTAND — und eine Nebenhandlung sieht nicht aus wie * die Hauptsache. * * Christian am 17.09.2026: „Die Buttons sind nicht CI-konform reingesetzt. * Die kleben dran, die halten die Sicherheitsabstaende nicht ein. Du bist * wieder zurueckgefallen wie in alte Zeiten." * * GEMESSEN, und er hat recht: `button.knopfkopie` stand WEITER OBEN im * Blatt als `article.eink button` — und ist zugleich weniger spezifisch * (0,1,1 gegen 0,1,2). Meine ganze Gestaltung des Kopierknopfes war also * wirkungslos: Er erbte volle Breite, die Akzentfarbe und 11px Innenrand * und klebte ohne Aussenabstand unter dem Adresskasten. Zwei sattgruene * Balken in Reihe, die beide „Kopieren" sagen — genau das Bild im Bild. * * LEHRE (Fehlerklasse, nicht Einzelfall): Eine Ausnahme von einer * Kartenregel muss NACH der Kartenregel stehen und mindestens so * spezifisch sein. Deshalb steht sie jetzt hier, direkt hinter ihr. * * Die Gestalt folgt der Rangordnung: Der Wert ist die Sache, der Knopf * seine Nebenhandlung. Also rechts unter dem Wert, in Textbreite statt * Kartenbreite, mit Kontur statt Fuellung — und 12px Luft dazwischen. * ------------------------------------------------------------------ */ article.eink p.ein-schluessel{ display:flex; flex-direction:column; align-items:flex-end; gap:12px; margin:8px 0 20px; } article.eink p.ein-schluessel code{width:100%; box-sizing:border-box} article.eink button.knopfkopie{ width:auto; margin:0; padding:9px 17px; border-radius:999px; border:1px solid var(--linie); background:var(--flaeche); color:var(--tinte); font-size:13px; font-weight:600; line-height:1.2; display:inline-flex; align-items:center; gap:7px; transition:background .14s ease, color .14s ease, border-color .14s ease; } article.eink button.knopfkopie .ikon{width:14px; height:14px} article.eink button.knopfkopie:hover{background:var(--flaeche2)} article.eink button.knopfkopie.gut{background:var(--gut); color:var(--aufakzent); border-color:transparent} article.eink button.knopfkopie.schief{background:transparent; color:var(--bad); border-color:var(--bad)} /* Auch „Diesen Schluessel erneuern" ist eine Nebenhandlung in einer Karte aus Fliesstext — keine Kartenbreite, und mit Luft zum Absatz darueber. */ article.eink#bankabruf form.feld.tun{margin-top:var(--luft-tun, 22px); margin-bottom:var(--luft-tun, 22px)} article.eink#bankabruf form.feld.tun button{width:auto; padding:10px 19px; border-radius:999px} p.leer{margin:0; font-size:14.5px; line-height:1.6; color:var(--tinte3); max-width:60ch} /* ---- Gegenueberstellung: was herein, was hinaus ---- Zugeklappt, bis jemand sie aufzieht. Zwei Spalten auf grossem Schirm, gestapelt auf dem Telefon — nebeneinander waeren sie dort zwei Streifen von je 170 Punkten, und das ist keine Gegenueberstellung mehr. */ details.gegen{ margin-top:22px; background:var(--flaeche); border:1px solid var(--linie); border-radius:14px; overflow:visible; } details.gegen > summary{border-radius:13px} details.gegen[open] > summary{border-radius:13px 13px 0 0} details.gegen > summary{ list-style:none; cursor:pointer; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } details.gegen > summary::-webkit-details-marker{display:none} details.gegen > summary:hover{background:var(--flaeche2)} .ggtitel{display:flex; align-items:center; gap:9px; font-size:15px; font-weight:600; color:var(--tinte)} .ggtitel svg{width:18px; height:18px; color:var(--tinte3); flex:0 0 auto} .ggkurz{display:flex; align-items:baseline; gap:14px; font-variant-numeric:tabular-nums; font-size:14.5px} .ggkurz .ggdiff{padding-left:14px; border-left:1px solid var(--linie); font-size:15px} details.gegen[open] > summary{border-bottom:1px solid var(--linie)} /* minmax(0,1fr) statt 1fr (26.09.2026): 1fr heisst "mindestens so breit wie der Inhalt" - die Buchungsspalte blieb am Telefon 270px breit und ragte bei 390px 15px, bei 360px 46px ueber die Karte. Gemessen danach: 0 Ueberstand 320-1512px. */ .ggraster{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; padding:14px 18px 4px} /* Die aeltere Fassung dieser Regel (display:flex, Summe per margin-left:auto nach rechts geschoben) stand hier und gewann gegen die neue weiter oben — Reihenfolge schlaegt Absicht. Sie ist ersetzt: Der Kopf ist jetzt ein Raster mit derselben Wertspalte wie jede Buchungszeile, damit die Nachkommastellen fluchten (Christian, 13.09.2026). */ .ggseite h3 svg{width:16px; height:16px; flex:0 0 auto} ol.ggliste{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px} ol.ggliste > li{padding:0} ol.ggliste > li > details > summary{ list-style:none; cursor:pointer; padding:7px 8px; border-radius:8px; display:flex; align-items:center; gap:9px; font-size:14.5px; } ol.ggliste > li > details > summary::-webkit-details-marker{display:none} ol.ggliste > li > details > summary:hover{background:var(--flaeche2)} .ggpunkt{width:9px; height:9px; border-radius:3px; flex:0 0 auto} .ggzeichen{display:flex; color:var(--tinte3); flex:0 0 auto} .ggzeichen svg{width:15px; height:15px} .ggname{flex:1 1 auto; min-width:0; color:var(--tinte); overflow-wrap:anywhere} .ggwert{font-variant-numeric:tabular-nums; white-space:nowrap} .ggbalken{display:block; height:3px; border-radius:2px; background:var(--linie); margin:0 8px 5px; overflow:hidden} .ggbalken i{display:block; height:100%; border-radius:2px} ul.ggposten{ list-style:none; margin:2px 0 8px; padding:8px 10px 8px 26px; background:var(--flaeche2); border-radius:8px; display:flex; flex-direction:column; gap:5px; } ul.ggposten li{display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--tinte2)} ul.ggposten li b{font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--tinte)} ul.ggposten em{font-style:normal; font-size:12px; color:var(--tinte3)} ul.ggposten em.warn{color:var(--bad)} .ggfuss{ margin:6px 18px 18px; padding-top:12px; border-top:1px solid var(--linie); display:flex; align-items:baseline; justify-content:space-between; gap:16px; } .ggfuss span{font-size:13px; color:var(--tinte2)} .ggfuss b{font-size:17px; font-variant-numeric:tabular-nums} /* ZWEI SPALTEN NUR, WENN JEDE EINEN NAMEN TRAEGT. BEFUND vom 13.09.2026 (Telefon- und Tabletbilder): Bei 834 px standen „Was hereinkommt" und „Was hinausgeht" nebeneinander, jede Namensspalte hatte noch 125 px — Namen brachen Wort fuer Wort, Zeilen wurden 146 px hoch. Dasselbe passiert am Schreibtisch, sobald der Monatsblock auf halbe Breite gezogen wird. Massgebend ist deshalb die Breite des BLATTS, nicht des Fensters: unter 900 px Blattbreite eine Spalte. */ .ggblatt{container-type:inline-size} @container (max-width: 899px){ .ggraster{grid-template-columns:minmax(0,1fr)} } @media (max-width:760px){ .ggraster{grid-template-columns:minmax(0,1fr)} .ggkurz{width:100%; justify-content:space-between; gap:8px} } /* ================================================================== * * DER FOKUS IST IMMER ZU SEHEN — EINE Regel fuer die ganze Anwendung * * Gemessen im grossen Durchgang (16.09.2026): Sechs Bauteile zeigten beim * Durchtabben keinen Ring — die drei Anordnungsknoepfe der Module, die * Kalendertage, der Fuellknopf. Sie alle hatten irgendwo ein `outline:none` * mit einem eigenen, schwaecheren Ersatz (ein gefaerbter Rahmen, ein heller * Grund). Wer nicht mit der Maus arbeitet, war dort blind. * Diese Regel steht ganz am Ende und gewinnt damit gegen alle frueheren. * Sie greift nur bei :focus-visible — also bei Tastatur, nicht beim Klick. * ================================================================== */ button:focus-visible, a[href]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--akzent); outline-offset:2px; border-radius:var(--wahl); } /* Ein Datumsfeld setzt den Fokus auf sein inneres Zaehlwerk; dort greift :focus-visible nicht. Gemessen: das Feld „Ab wann" in „Was wäre, wenn …" blieb beim Durchtabben ohne Ring. */ input[type=date]:focus, input[type=time]:focus, input[type=month]:focus{ outline:2px solid var(--akzent); outline-offset:2px; } /* Was rund ist, behaelt seinen runden Ring. */ button.bupunkt:focus-visible, .ziehgriff button:focus-visible, .pbild:focus-visible, .ckkreis:focus-visible, li.ck button.ckknopf:focus-visible{border-radius:50%} li.ck button.ckknopf:focus-visible{border-radius:var(--wahl)} /* ---- PROTOKOLL: DER HINWEIS AUF WIEDERHOLUNGEN (19.09.2026) ---------- Steht ueber der Liste, weil dort die Frage entsteht. Bernstein, nicht rot: Es ist kein Schaden, nur Platzverschwendung — und ein Knopf daneben, der sagt, was er tut. */ section.prwdh{display:flex; flex-direction:column; gap:10px; margin:0 0 18px; padding:14px 16px; background:rgba(190,120,20,.08); border:1px solid rgba(190,120,20,.25); border-radius:var(--karte)} section.prwdh > p{display:flex; gap:9px; align-items:flex-start; margin:0; font-size:14.5px; color:var(--tinte2)} section.prwdh > p svg{flex:0 0 auto; color:var(--warn, #b4740f); margin-top:2px} section.prwdh form{margin:0} section.prwdh button{width:auto; min-width:240px; height:42px; padding:0 20px} section.prwdh p.kleintext{font-size:12px; color:var(--tinte3)} /* ---- NACHLASS (19.09.2026) ------------------------------------------- Drei Dokumente, drei Karten, jede mit ihrem Zustand als Satz. Das Blatt selbst bekommt so viel Hoehe, wie ein Blatt braucht — die Vorabansicht ist der Grund, warum es die Seite gibt. */ section.nlkopf{margin:0 0 18px} p.nlsatz{margin:6px 0 14px; color:var(--tinte2); max-width:62ch} p.nlsumme{display:flex; gap:9px; align-items:center; margin:0; padding:11px 14px; border-radius:var(--wahl); font-weight:600; font-size:14.5px} p.nlsumme.gut{background:var(--gutfeld, rgba(45,125,70,.10)); color:var(--good, #2d7d46)} p.nlsumme.warnung{background:rgba(190,120,20,.10); color:var(--warn, #b4740f)} p.nlsumme svg{flex:0 0 auto} section.nlliste{display:flex; flex-direction:column; gap:18px} article.nlkarte{position:relative; overflow:hidden; padding:18px 20px 20px; background:var(--blatt); border:1px solid var(--rand); border-radius:var(--karte)} article.nlkarte > header{display:flex; gap:14px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap} article.nlkarte > header h3{margin:0; font-size:17px; letter-spacing:-.01em} article.nlkarte > header p{margin:3px 0 0; font-size:13px; color:var(--tinte3)} a.nlholen{flex:0 0 auto; display:inline-block; padding:9px 16px; border-radius:var(--wahl); background:var(--akzent); color:#fff; font-weight:600; font-size:14.5px; text-decoration:none} a.nlholen:hover{filter:brightness(1.06)} p.nlstand{display:flex; gap:8px; align-items:center; margin:14px 0 0; font-size:13px} p.nlstand.gut{color:var(--good, #2d7d46)} p.nlstand.warnung{color:var(--warn, #b4740f)} /* DOKUMENTVORSCHAU (27.09.2026): ein Bauteil für jede Live-Vorschau. Die Seite füllt die Kartenbreite, auf jedem Gerät. */ .dokvorschau{display:block; width:100%; min-width:0; box-sizing:border-box} .dokvorschau{--dvhoch:calc(100vh - 150px)} @supports (height:100svh){ .dokvorschau{--dvhoch:calc(100svh - 150px)} } /* Eine Seite ist nie höher als der Bildschirm: am iPad quer steht Seite 1 ganz da, aufgeklappt zwei Seiten nebeneinander wie ein aufgeschlagenes Buch; am iPhone füllt die Seite die Breite. */ .dokvorschau .dvseiten{display:grid; gap:16px; grid-template-columns:minmax(0, 1fr); justify-items:center} .dokvorschau.offen .dvseiten{grid-template-columns:repeat(auto-fill, minmax(min(calc(var(--dvhoch) * var(--dvformat, .7071)), 100%), 1fr))} .dokvorschau .dvseite{position:relative; width:100%; max-width:max(280px, calc(var(--dvhoch) * var(--dvformat, .7071))); background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 0 0 1px var(--linie, #e3ded5), 0 2px 10px rgba(0,0,0,.06)} .dokvorschau .dvseite[hidden]{display:none} .dokvorschau .dvseite img{display:block; width:100%; height:100%} .dokvorschau .dvseite:not(.fertig)::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.03), rgba(0,0,0,.06), rgba(0,0,0,.03))} .dokvorschau button.dvmehr:not(.zeichenknopf){display:flex; align-items:center; justify-content:center; width:100%; min-height:var(--knopf, 44px); margin-top:12px; border:0; border-radius:12px; background:var(--akzent, #4f7a28); color:var(--aufakzent, #fff); font:inherit; font-size:14.5px; font-weight:600; cursor:pointer} .dokvorschau .dversatz{display:none} .dokvorschau.gestoert .dversatz{display:flex; align-items:center; justify-content:center; min-height:var(--knopf, 44px)} /* Die alten Rahmen um die Vorschau (nlblatt) tragen jetzt keine eigene Kante mehr — die Seiten haben ihren Schatten. */ div.nlblatt.nlblattdok{border:0; background:transparent; overflow:visible; border-radius:0} /* Kleine Vorschau (erste Seite) im Wartezimmer der Belege */ .dokvorschau.dvklein .dvseite{max-width:none; box-shadow:none; border-radius:0} .dokvorschau .dvknoepfe{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; justify-content:flex-end} @media (max-width:560px){ .dokvorschau .dvknoepfe{justify-content:flex-start} } /* Steuerleiste: Telefon links, Schreibtisch rechts (Gesetz 52) */ .dokvorschau .dvknoepfe button.dvmehr:not(.zeichenknopf), .dokvorschau .dvknoepfe button.dvganz:not(.zeichenknopf){flex:1 1 200px; width:auto; margin:0; display:flex; align-items:center; justify-content:center; min-height:var(--knopf, 44px); border:0; border-radius:12px; background:var(--akzent, #4f7a28); color:var(--aufakzent, #fff); font:inherit; font-size:14.5px; font-weight:600; cursor:pointer} .dokvorschau:not(.dvklein):not(.dvimvoll) .dvseite.fertig{cursor:zoom-in} .dvvoll{position:fixed; inset:0; z-index:10000; background:var(--grund, #F6F3EE); overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 8px calc(16px + env(safe-area-inset-bottom, 0px)); box-sizing:border-box} .dvvollkopf{position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:calc(8px + env(safe-area-inset-top, 0px)) 4px 8px; background:var(--grund, #F6F3EE)} .dvvollkopf b{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; color:var(--tinte)} .dvvollkopf button.dvzu{flex:0 0 auto; min-height:var(--knopf, 44px); padding:0 20px; border:0; border-radius:12px; background:var(--akzent, #4f7a28); color:var(--aufakzent, #fff); font:inherit; font-size:15px; font-weight:600; cursor:pointer} .dokvorschau.dvimvoll{max-width:900px; margin:0 auto} .dokvorschau.dvimvoll .dvseite{max-width:none} html.dvgesperrt, html.dvgesperrt body{overflow:hidden} /* iPhone: die Mieterakte schachtelt Karte in Karte — die Ränder kosteten die Vorschau 148 px. Gemessen bei 390 px: Vorschau 195 px breit. Jetzt tragen die inneren Hüllen keinen eigenen Seitenrand mehr. */ @media (max-width:560px){ .mablock{padding-left:10px; padding-right:10px} .mablock .nlkarte{padding-left:0; padding-right:0} } div.nlblatt{margin:14px 0 0; border:1px solid var(--rand); border-radius:var(--wahl); overflow:hidden; background:var(--flaeche, #f4f4f2)} /* Ein Blatt als Foto: so gross wie moeglich, aber nie beschnitten — bei einem Dokument ist der Rand oft der Teil, auf den es ankommt (Unterschrift). */ div.nlblattbild{display:flex; align-items:center; justify-content:center; padding:10px} img.nlbild{display:block; max-width:100%; max-height:78vh; object-fit:contain} p.nlfuss{display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; margin:10px 0 0; font-size:12px; color:var(--tinte3)} p.nlfuss a{font-weight:600} section.nllage{margin:0 0 18px} /* Der Zusatz in der Ueberschrift sagt, WAS dort liegt — leiser als der Satz davor, weil er ihn erlaeutert und nicht ersetzt. */ article.nlkarte > header h3 span.nlwas{font-weight:500; color:var(--tinte3); font-size:14.5px; letter-spacing:0} div.nlfoto{margin:14px 0 0; border:1px solid var(--rand); border-radius:var(--wahl); overflow:hidden; background:var(--flaeche, #f4f4f2); display:flex; align-items:center; justify-content:center} /* DER KASTEN LEGT SICH UM DAS BILD, nicht das Bild in den Kasten: Nur so liegt ein Rahmen in Prozent auch wirklich auf dem Ordner. Ein Bild mit `object-fit:contain` in einem breiteren Kasten laesst links und rechts Luft — und dieselbe Prozentzahl zeigt dann daneben. */ /* GEMESSEN am 19.09.2026, gleich nach der ersten Auslieferung: Im Formular stand die Figur als Flex-Kind in einer Spalte und wurde auf die volle Formularbreite gedehnt. Das Bild lag dann links darin, der Rahmen rechnete in Prozent der FIGUR — und sass neben dem Ordner, waehrend rechts eine graue Flaeche stand. `width:fit-content` legt die Figur wieder genau um das Bild; erst dann meinen Prozent und Bild dasselbe. */ figure.nlbildrahmen{position:relative; display:block; margin:0 auto; line-height:0; width:fit-content; max-width:100%; align-self:center; overflow:hidden} figure.nlbildrahmen img{display:block; max-width:100%; max-height:62vh; width:auto; height:auto; -webkit-user-select:none; user-select:none} /* DIE MARKIERUNG (19.09.2026). Der Rahmen sagt „dieser hier"; der Schatten nach aussen dunkelt alles andere ab, ohne dass es dafuer ein zweites Bild oder vier Hilfsflaechen braucht. `overflow:hidden` am Rahmen schneidet den riesigen Schatten am Bildrand ab. */ /* NOCH DUNKLER AUSSERHALB (19.09.2026). Christian: „Ich will, dass der Bereich außerhalb vom Rahmen noch mehr abdunkelt." Von 62 auf 80 Prozent — die Nachbarordner bleiben als Form erkennbar (man soll ja sehen, WO im Regal der richtige steht), aber lesbar ist nur noch der eine. */ span.nlmarke{position:absolute; z-index:1; pointer-events:none; border:3px solid var(--akzent); border-radius:8px; box-shadow:0 0 0 2999px rgba(6,12,14,.80), 0 0 18px rgba(0,0,0,.35) inset; transition:left .12s linear, top .12s linear, width .12s linear, height .12s linear} span.nlmarke.weg{display:none} @media (prefers-reduced-motion:reduce){ span.nlmarke{transition:none} } /* Im Formular wird gezogen — dort faengt das Bild die Zeigerereignisse ab. */ label.nlmarkwahl{gap:8px} /* `touch-action:none` haelt die Seite still, waehrend der Finger den Rahmen zieht — ohne sie wuerde stattdessen gescrollt. `-webkit-touch-callout:none` verhindert das lange Antippen, mit dem iOS sonst „Bild sichern" anbietet: Wer eine Ecke haelt, meint die Ecke, nicht das Bild. */ figure.nlziehbild{cursor:crosshair; touch-action:none; border-radius:var(--wahl); border:1px solid var(--rand); background:var(--flaeche, #f4f4f2); -webkit-touch-callout:none; -webkit-user-select:none; user-select:none} /* Beim Ziehen bleibt es heller als in der Anzeige: Hier MUSS man die Nachbarn sehen, sonst weiss man nicht, worum man den Rahmen zieht. */ figure.nlziehbild span.nlmarke{box-shadow:0 0 0 2999px rgba(6,12,14,.55); pointer-events:auto; cursor:move; transition:none} figure.nlziehbild span.nlmarke.faesst{border-color:color-mix(in srgb, var(--akzent) 70%, #fff)} figure.nlziehbild span.nlmarke.weg{display:none} /* DIE VIER GRIFFE (19.09.2026). Christian: „ich brauche an den Ecken Markierungspunkte, die muss ich ziehen können." Sichtbar ist ein Punkt von 18 px — gross genug, um ihn zu sehen, klein genug, um den Ordner darunter nicht zu verdecken. GEGRIFFEN wird aber eine Flaeche von 44 x 44 px, das Apple-Mass fuer den Finger. Deshalb sitzt der Punkt in einem unsichtbaren Quadrat, das mit negativem Rand auf der Ecke zentriert ist. */ figure.nlziehbild span.nlmarke i{ position:absolute; width:44px; height:44px; margin:-22px 0 0 -22px; display:grid; place-items:center; touch-action:none; z-index:2; } figure.nlziehbild span.nlmarke i::before{ content:""; width:18px; height:18px; border-radius:50%; background:var(--flaeche); border:3px solid var(--akzent); box-shadow:0 1px 5px rgba(0,0,0,.45); } figure.nlziehbild span.nlmarke i[data-ecke=ol]{left:0; top:0} figure.nlziehbild span.nlmarke i[data-ecke=or]{left:100%; top:0} figure.nlziehbild span.nlmarke i[data-ecke=ur]{left:100%; top:100%} figure.nlziehbild span.nlmarke i[data-ecke=ul]{left:0; top:100%} figure.nlziehbild span.nlmarke i[data-ecke=ol], figure.nlziehbild span.nlmarke i[data-ecke=ur]{cursor:nwse-resize} figure.nlziehbild span.nlmarke i[data-ecke=or], figure.nlziehbild span.nlmarke i[data-ecke=ul]{cursor:nesw-resize} /* Am Finger darf das Bild groesser sein — jeder Punkt Bildflaeche ist hier Zielflaeche. */ figure.nlziehbild img{max-height:56vh} button.nlmarkweg{width:auto; height:auto; margin-left:10px; padding:0; background:none; border:0; color:var(--tinte2); font:inherit; font-size:12px; text-decoration:underline; cursor:pointer} details.nlaendern{margin:14px 0 0} details.nlaendern > summary{cursor:pointer; font-size:13px; font-weight:600; color:var(--tinte2); list-style:none} details.nlaendern > summary::-webkit-details-marker{display:none} details.nlaendern > summary::before{content:"\203A\00a0"; color:var(--tinte3)} details.nlaendern[open] > summary::before{content:"\2039\00a0"} form.nlform{display:flex; flex-direction:column; gap:12px; margin:12px 0 0; padding:14px; background:var(--flaeche, #f4f4f2); border-radius:var(--wahl)} form.nlform label{display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--tinte2)} form.nlform button{align-self:flex-start; padding:9px 18px; border:0; border-radius:var(--wahl); background:var(--akzent); color:#fff; font-weight:600; font-size:14.5px; cursor:pointer} p.nlformhinweis{margin:0; font-size:12px; color:var(--tinte3)} form.nlform.nlknapp{gap:0} /* „Erst nur prüfen" steht neben dem Hauptknopf, nicht darüber: Es ist ein Angebot, keine Pflicht — und es aendert nichts, also traegt es auch keine Farbe, die nach Handlung aussieht. */ form.nlform button.nlprobe{width:auto; min-width:150px; height:42px; padding:0 18px; margin-top:-4px; background:transparent; color:var(--tinte2); border:1px solid var(--rand)} /* Die zerstoererische Handlung ist nie so gross wie die aufbauende. Sie steht daneben, nicht darueber — und traegt ihre eigene Farbe, damit niemand sie aus Versehen fuer den Hauptknopf haelt. */ form.nlform button.nlweg{width:auto; min-width:160px; padding:0 20px; height:42px; background:transparent; color:var(--warn, #b4740f); border:1px solid currentColor} /* ---- DIE HISTORIE. Ganz unten, wie ein Zeitstrahl: neueste Handlung oben, jede Zeile sagt was, wann und woran. Sie ist fortschreibend — es gibt hier nichts zum Anklicken, das etwas entfernt. */ section.nlhistorie{margin:26px 0 0; padding-top:22px; border-top:1px solid var(--rand)} ol.nlzeitstrahl{list-style:none; margin:14px 0 0; padding:0 0 0 20px; position:relative} ol.nlzeitstrahl::before{content:""; position:absolute; left:4px; top:6px; bottom:6px; width:1px; background:var(--rand)} ol.nlzeitstrahl > li{position:relative; padding:0 0 18px} ol.nlzeitstrahl > li::before{content:""; position:absolute; left:-20px; top:6px; width:9px; height:9px; border-radius:50%; background:var(--rand2, #c9c9c4); box-shadow:0 0 0 3px var(--blatt)} ol.nlzeitstrahl > li:first-child::before{background:var(--akzent)} p.nlhkopf{display:flex; gap:9px; align-items:baseline; flex-wrap:wrap; margin:0; font-size:14.5px} span.nlhwas{padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; background:var(--flaeche, #f4f4f2); color:var(--tinte2)} span.nlhwas.nlh-ersetzt{background:rgba(45,125,70,.12); color:var(--good, #2d7d46)} span.nlhwas.nlh-zurückgezogen{background:rgba(190,120,20,.12); color:var(--warn, #b4740f)} span.nlhzeit{font-size:12px; color:var(--tinte3)} p.nlhgrund{margin:5px 0 0; font-size:13px; color:var(--tinte2)} p.nlhdetail{margin:4px 0 0; font-size:12px; color:var(--tinte3)} span.nlhash{font-family:var(--mono, ui-monospace, monospace); font-size:12px} p.nlhwege{display:flex; gap:14px; flex-wrap:wrap; margin:6px 0 0; font-size:12px} p.nlhwege a{font-weight:600} p.nlhwege span{color:var(--tinte3)} /* Am Telefon ist ein hohes Blatt unbrauchbar — dort zaehlt der eigene Reiter. */ @media (max-width:560px){ img.nlbild{max-height:58vh} article.nlkarte > header{gap:10px} a.nlholen{width:100%; text-align:center} p.nlhkopf{gap:6px} } /* GESETZ: EINE NEGATIVE ZAHL IST ROT (16.09.2026, Christian: „Das ist Gesetz."). Ganz am Ende, damit sie jede frühere Regel schlägt — dieselbe Stellung wie der Fokusring. */ /* Mit !important, und das ausnahmsweise mit Absicht: Es ist ein GESETZ, kein Vorschlag. Jede örtliche Regel (.posten .betrag, .kachel .kz, …) ist spezifischer als eine Klasse — ohne !important müsste man sie alle einzeln kennen, und genau das war der Zustand, den Christian bemängelt hat. Wer eine negative Zahl anders färben will, muss diese Regel ändern; dann ist die Entscheidung sichtbar. */ .minus{color:var(--bad) !important} /* ================================================================== * * DER URLAUBSMANAGER (19.09.2026) * Die grosse Zahl ist der FREIE Betrag, nicht der Kontostand — deshalb * steht sie auch optisch vor den drei Einzelzahlen und nicht zwischen * ihnen. Alles andere folgt den Maszen der uebrigen Module. * ================================================================== */ section.ubkopf,section.ubstrecke,section.ufmodul,section.ubreisen{background:var(--flaeche);border:1px solid var(--linie);border-radius:18px;padding:20px 22px;margin:0 0 16px} p.ubfrei{margin:6px 0 14px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} p.ubfrei b{font-size:clamp(34px,7vw,46px);line-height:1.05;letter-spacing:-.02em} /* DER FERIENNAME IST EINE ÜBERSCHRIFT, KEINE GROSSE ZAHL (26.09.2026). Chris: „Die Schriftgröße der Bezeichnung der Ferien … ist zu groß … Vergleiche bitte mit den anderen Headlines dieser Größenordnung.“ Gemessen: „Herbstferien“ erbte 46 px - die Größe der großen Zahl (Urlaubskasse 2.200,00 €). Die größte Text-Überschrift im System ist der Seitentitel (section.vwkopf h1: 23 px, 700, -.02em). Dieselbe Stufe hier; die Urlaubskasse behält ihre 46 px. Darunter bleibt die Rangfolge: Termine 17 px, Hinweis 15 px. */ section.ufmodul p.ubfrei b{font-size:24px;line-height:1.2;letter-spacing:-.02em} p.ubfrei span{color:var(--tinte2);font-size:15px} dl.ubdrei{display:flex;flex-wrap:wrap;gap:6px 30px;margin:0 0 12px} dl.ubdrei dt{color:var(--tinte2);font-size:13px;width:100%} dl.ubdrei dd{margin:0;font-weight:600} @media (min-width:561px){dl.ubdrei{display:grid;grid-template-columns:repeat(3,auto);gap:4px 34px;justify-content:start} dl.ubdrei dt{width:auto;grid-row:1}dl.ubdrei dd{grid-row:2}} dl.ubdrei dd.gebunden{color:var(--schlecht-tinte,#8E3225)} p.ubsatz{margin:0 0 10px;color:var(--tinte2);font-size:14.5px;line-height:1.55} p.ubquelle{font-size:13px} /* Die Skala gehört zur Kurve (19.09.2026) — dieselben Maße und Farben wie der Zeitstrahl unter Vermögen: Zahl links in eigener Spalte, nie auf der Linie; die Fläche unter der Kurve macht aus einem Strich einen Bestand. */ div.ubbild{position:relative;margin:10px 0 6px;overflow-x:auto} svg.ubstrahl{width:100%;min-width:600px;height:auto;aspect-ratio:760/270;display:block} svg.ubstrahl.schmal{min-width:0} /* Telefon: die Zeitachse wird auf die echte Breite gezeichnet (urlaub.php, schmalForm) */ svg.ubstrahl .ubraster{stroke:var(--linie);stroke-width:1;vector-effect:non-scaling-stroke} svg.ubstrahl .ubraster.ubnull{stroke:var(--tinte3,#8aa0a2)} svg.ubstrahl .ubskala{font-size:12px;fill:var(--tinte3,#8aa0a2);font-family:var(--schrift,inherit);text-anchor:end} svg.ubstrahl .ubjahr{font-size:12px;fill:var(--tinte3,#8aa0a2);font-family:var(--schrift,inherit)} svg.ubstrahl .ubflaeche{fill:var(--gut,#2C7A57);fill-opacity:.12;stroke:none} svg.ubstrahl .ublinie{fill:none;stroke:var(--gut,#2C7A57);stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linejoin:round} svg.ubstrahl .ubmarke{stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:3 4} svg.ubstrahl .ubmarke.auf{stroke:color-mix(in srgb,var(--gut,#2C7A57) 60%,transparent)} svg.ubstrahl .ubmarke.ab{stroke:color-mix(in srgb,var(--schlecht-tinte,#8E3225) 60%,transparent)} /* ================================================================== * * DER KONFIGURATOR UND SEINE KREISE (20.09.2026) * Zwei Segmente, zwei Rollen: der Anteil traegt die Markenfarbe, der Rest * bleibt neutral — „uebrig" ist nichts Schlechtes und faerbt sich deshalb * auch nicht so. Beschriftet ist beides, Farbe allein traegt nie eine * Bedeutung. 2 px Luft an jeder Naht, damit die Boegen nicht verschmelzen. * ================================================================== */ div.ubkonfig{background:var(--grund,#F1F4F4);border-radius:16px;padding:16px 18px;margin:0 0 16px} div.ubkonfig h3{margin:0 0 6px;font-size:17px} /* Der Bogen faengt oben an, nicht rechts — ein Kreisdiagramm wird bei zwoelf Uhr gelesen. Das SVG traegt keine Beschriftung, deshalb darf es als Ganzes gedreht werden. */ /* ================================================================== * DAS AUFTEILUNGSBILD (20.09.2026, dritte Fassung) * Die Kreisdiagramme, der Prozentregler und die Abkoppel-Häkchen sind * ersatzlos weg — Christian: „Ich schnall es ehrlich gesagt nicht." * Geblieben ist eine Treppe über der Zeit, deren grüne Kante man zieht. * Grün trägt die Bedeutung nie allein: jeder Abschnitt ist beziffert, * und unter dem Bild steht derselbe Stand als Satz. * ================================================================== */ svg.ubteilbild{touch-action:none} svg.ubteilbild .ubsegfrei{fill:color-mix(in srgb,var(--tinte3,#8aa0a2) 20%,transparent)} svg.ubteilbild .ubseggruen{fill:color-mix(in srgb,var(--gut,#2C7A57) 24%,transparent)} svg.ubteilbild .ubsegkante{stroke:var(--gut,#2C7A57);stroke-width:3;vector-effect:non-scaling-stroke;stroke-linecap:round} svg.ubteilbild g.fest .ubsegkante{stroke:var(--tinte3,#8aa0a2);stroke-dasharray:4 4} /* KLEINSCHRIFT OHNE EIGENE REGEL (29.09.2026, live vom neuen Schrift-Wächter gemeldet): <small> ohne Regel ist 0,83 em — in 13-px-Text 10,8 px (Vermögen, „Saldo Sondertilgung Haus“); <sup> 10 px. Untergrenze der Skala gilt auch dort. */ main small{font-size:11.5px} main sup, main sub{font-size:11.5px} svg.ubteilbild .ubseggriff{fill:transparent;cursor:ns-resize} svg.ubteilbild .ubseggriff:focus{outline:none} svg.ubteilbild .ubseggriff:focus-visible+.ubsegkante, svg.ubteilbild g.ubseg:hover .ubsegkante, svg.ubteilbild g.zieht .ubsegkante{stroke-width:5} svg.ubteilbild g.zieht .ubseggruen{fill:color-mix(in srgb,var(--gut,#2C7A57) 34%,transparent)} svg.ubteilbild .ubsegwert{font-size:12.5px;font-weight:700;fill:var(--tinte);font-family:var(--schrift,inherit);pointer-events:none} svg.ubteilbild .ubheute{stroke:var(--tinte3,#8aa0a2);stroke-width:1;stroke-dasharray:2 3;vector-effect:non-scaling-stroke} svg.ubteilbild .ubheutetext{font-size:12px;fill:var(--tinte3,#8aa0a2);font-family:var(--schrift,inherit)} /* SCHRIFT IN VERKLEINERTEN GRAFIKEN (29.09.2026, Fassung D Rest). Die Urlaubsgrafiken haben 760 Einheiten Breite und werden auf dem Telefon (Stufenbild, Kurve: Mindestbreite 600 px → Faktor 0,79) und auf dem iPad hochkant (0,9) verkleinert. Gemessen am Prüfstand: Skala 7,9 px, Segmentwert 8,7 px, Störer 9,5 px. Unter 900 px wächst die Schrift in Einheiten, damit sie auf dem Bildschirm nie unter 11,5 px fällt. */ @media (max-width:900px){ svg.ubstrahl .ubskala, svg.ubstrahl .ubjahr, svg.ubteilbild .ubheutetext{font-size:15px} svg.ubteilbild .ubsegwert{font-size:15px} svg.ubkette .zsjahr, svg.ubkette .zsheute, svg.ubkette .zsabstand, svg.ubkette .zsmonat, svg.ubkette .bzweniger, svg.ubkette .bzmehr, .bzkbetrag, g.zsstoerer text{font-size:13.5px} } div.ubkonfig{background:var(--grund,#F1F4F4);border-radius:16px;padding:16px 18px;margin:0 0 16px} div.ubkonfig h3{margin:0 0 6px;font-size:17px} /* DAS ZIEL — die zweite Variable. Die Regeln hierfuer waren beim Aufraeumen des alten Konfigurators mit herausgefallen (gemessen 20.09.2026: der Block stand voellig unformatiert auf der Seite). */ div.ubteilen{margin-top:18px} div.ubteilen > .ubquelle{margin:16px 0 0;font-size:13px;line-height:1.5;color:var(--tinte3)} /* DIE HERLEITUNG, ZUGEKLAPPT (20.09.2026) — dieselbe Bauweise wie die Bankkonten-Aufklappfläche, damit nicht jede Seite ihr eigenes Aufklappfeld erfindet. */ /* ================================================================== * DIE REISEKASSE JE REISE (20.09.2026) — der Kreis, der hier richtig ist * Ein Ganzes (die Kosten dieser Reise), zwei Teile: was zusammenkommt und * was fehlt. Beide beziffert; der Bogen faengt oben an. * ================================================================== */ /* ================================================================== * DIE KETTE ALS ZEITSTRAHL (20.09.2026) * Eine Achse, darauf die Reisen als Perlen; der Abstand zwischen zwei * Perlen ist beschriftet. Farbe trägt nie allein — jede Perle hat ihren * Namen, ihren Monat und eine Legende. * ================================================================== */ div.ubkettenbild{margin:4px 0 8px} /* KEIN FESTES SEITENVERHAELTNIS MEHR (20.09.2026). Es stand auf 760/158, das Bild war inzwischen 760/210 hoch — der Browser skalierte den Inhalt auf die falsche Form und liess links und rechts Rand stehen. Christian: „Jetzt nutzt die Darstellung nicht mehr die gesamte Browserbreite." Ohne die Angabe nimmt der Browser das Verhaeltnis aus der viewBox: eine Quelle statt zweier, die auseinanderlaufen koennen. */ svg.ubkette{width:100%;min-width:560px;height:auto;display:block} svg.ubkette .zsjahrlinie{stroke:var(--linie);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:2 4} svg.ubkette .zsjahr{font-size:12.5px;fill:var(--tinte3);font-family:var(--schrift,inherit)} svg.ubkette .zsjetzt{stroke:var(--tinte2);stroke-width:2;vector-effect:non-scaling-stroke} svg.ubkette .zsstiel{stroke:var(--linie);stroke-width:1;vector-effect:non-scaling-stroke} svg.ubkette .zsachse{stroke:var(--linie);stroke-width:2;vector-effect:non-scaling-stroke} svg.ubkette .zsheute{font-size:12.5px;font-weight:600;fill:var(--tinte2);font-family:var(--schrift,inherit)} svg.ubkette .zsabstand{font-size:12.5px;fill:var(--tinte3);font-family:var(--schrift,inherit)} svg.ubkette .zsziel{font-size:13px;font-weight:600;fill:var(--tinte);font-family:var(--schrift,inherit)} svg.ubkette .zsmonat{font-size:12.5px;fill:var(--tinte2);font-family:var(--schrift,inherit)} svg.ubkette .zsperle{stroke:var(--flaeche);stroke-width:2.5} svg.ubkette .zsperle.f-gut{fill:var(--gut,#2C7A57)} svg.ubkette .zsperle.f-warte{fill:var(--warte-tinte,#7A5A16)} svg.ubkette .zsperle.f-schlecht{fill:var(--bad,#C0392B)} svg.ubkette .zsperle.f-leer{fill:var(--tinte3,#8aa0a2)} svg.ubkette .zsperle.offen{fill:var(--flaeche);stroke-width:2.6} svg.ubkette .zsperle.offen.f-gut{stroke:var(--gut,#2C7A57)} svg.ubkette .zsperle.offen.f-warte{stroke:var(--warte-tinte,#7A5A16)} svg.ubkette .zsperle.offen.f-schlecht{stroke:var(--bad,#C0392B)} svg.ubkette .zsperle.offen.f-leer{stroke:var(--tinte3,#8aa0a2)} /* WANN WIRD ES LEICHTER - Zeitstrahl (26.09.2026, vermoegen.php): dieselben Bausteine wie „Unsere Reisen“; dazu nur der heutige Punkt (dunkel) und der Betrag, der wegfällt (grün). */ svg.ubkette .bzweniger{font-size:12.5px;font-weight:600;fill:var(--gut,#2C7A57)} /* Wird es schwerer (Bauspardarlehen ab 01.12.2029), steht der Aufschlag rot - dieselbe Farbe wie der Punkt (f-schlecht). */ svg.ubkette .bzmehr{font-size:12.5px;font-weight:600;fill:var(--bad,#C0392B)} div/* WANN WIRD ES LEICHTER — Treppe und Band (27.09.2026). Gezeichnet in echten Pixeln der Karte. */ .ubbild.bzkette{position:relative; overflow:visible} .bzkette svg.ubkette{display:block; width:100%; min-width:0; height:auto; overflow:visible; font-family:var(--schrift, inherit)} .bzkgitter{stroke:var(--linie); stroke-width:1} .bzkbetrag{font-size:12px; fill:var(--tinte3); font-variant-numeric:tabular-nums} .bzkflaeche{fill:var(--flaeche2, #F1EDE6)} .bzkband{fill:var(--gut, #2C7A57); fill-opacity:.16} .bzkheutelinie{stroke:var(--tinte3); stroke-width:1; stroke-dasharray:4 4} .bzkkurve{fill:none; stroke:var(--gut, #2C7A57); stroke-width:2.5; stroke-linejoin:round} .bzkanstieg{stroke:var(--bad, #C0392B); stroke-width:2.5} .bzkstiel{stroke:var(--tinte3); stroke-width:1; opacity:.5} .bzkdatum{font-size:12px; fill:var(--tinte2)} .bzkwert{font-size:16px; font-weight:650; fill:var(--tinte); font-variant-numeric:tabular-nums} svg.ubkette .bzkwert .bzmehr, svg.ubkette .bzkwert .bzweniger{font-size:12.5px; font-weight:650} .bzkheute{fill:var(--tinte)} .bzkoffen{fill:var(--flaeche); stroke:var(--tinte3); stroke-width:2} .bzkzeiger{stroke:var(--tinte); stroke-width:1; opacity:.35} .bzkfeld{fill:transparent; cursor:crosshair} .bzktipp{position:absolute; z-index:5; pointer-events:none; display:grid; gap:2px; background:var(--tinte); color:var(--flaeche); font-size:13px; line-height:1.35; padding:8px 11px; border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.2); white-space:nowrap; font-variant-numeric:tabular-nums} .bzktipp[hidden]{display:none} .bzklegende{display:flex; flex-wrap:wrap; gap:6px 18px; margin:8px 0 0; font-size:13px; color:var(--tinte2)} .bzklegende i{display:inline-block; width:14px; height:10px; border-radius:3px; margin-right:7px; vertical-align:-1px} .bzklegende .l-kurve{background:var(--gut, #2C7A57)} .bzklegende .l-band{background:var(--gut, #2C7A57); opacity:.28} .bzklegende .l-mehr{background:var(--bad, #C0392B)} @media (max-width:560px){ .bzkwert{font-size:14.5px} .bzkdatum, svg.ubkette .bzkwert .bzmehr, svg.ubkette .bzkwert .bzweniger{font-size:11.5px} .bzkbetrag{font-size:12.5px} } .bzkhinweis{margin:6px 0 0; font-size:13px; color:var(--tinte3)} .bzkhinweis[hidden]{display:none} .bzkette svg.ubkette circle.zstreffer{fill:transparent} /* BILDER IM TABELLENUMSCHALTER (26.09.2026, tageslinie.php) - wie im Hauptmenü. Am Telefon tragen die Bilder allein, der Name bleibt für Vorleser da; so wird die Leiste nicht breiter. */ nav.tabwahl a{display:inline-flex; align-items:center; gap:7px} nav.tabwahl .pbild{width:24px; height:24px; font-size:11.5px} nav.tabwahl .pzus{width:auto; height:24px} nav.tabwahl .pzus .pbild{width:20px; height:20px} nav.tabwahl a.aktiv .pbild{box-shadow:0 0 0 2px rgba(255,255,255,.9)} nav.tabwahl a.aktiv .pbild.pzus{box-shadow:none} /* WANN UNÀ FREI HAT (26.09.2026, urlaub.php) - Karte wie „Urlaubskasse“, Band in der Bauart des Zeitstrahls, Ferienfarbe wie im Reisekalender. Gewählt: volle Akzentfarbe. */ div.ufband{margin:6px 0 4px} /* MIETRENDITE (26.09.2026, vermoegen.php) - drei Zahlen, die wichtigste groß in der Gut-Farbe; der Balken zeigt, wohin die Jahreskaltmiete geht; Beträge rechtsbündig (Gesetz 50). */ .mrblock{margin:18px 0 8px; padding:16px 18px; border-radius:14px; background:var(--flaeche2)} .mrtitel{display:flex; align-items:center; gap:8px; margin:0 0 12px; font-size:17px} .mrzahlen{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px} @media (max-width:560px){ .mrzahlen{grid-template-columns:1fr} } .mrzahl{background:var(--flaeche); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:2px; min-width:0} .mrzahl .mrwort{font-size:12px; color:var(--tinte2)} .mrzahl b{font-size:24px; line-height:1.15; font-variant-numeric:tabular-nums} .mrzahl.mrhaupt b{font-size:34px; color:var(--gut-tinte,#3C5A2A)} .mrzahl small{font-size:12px; color:var(--tinte2)} /* DIE DREI RENDITEN AUF EINER EBENE (26.09.2026). Chris am iPad hochkant: „die Zahlenwerte flattern … Die müssen … in einer Ebene sein … egal wie groß der Browser ist.“ Gemessen: „Nettomietrendite ohne eure Rücklage“ brach auf zwei Zeilen und schob 7,90 % um 19 px tiefer; selbst ohne Umbruch lagen 34-px- und 26-px-Zahl 8 px auseinander. Jetzt teilen die drei Karten ihre Zeilen (Subgrid): Bezeichnung oben, Zahl auf EINER Grundlinie, Satz darunter. Die Falle der Kacheln (Titel mit min-height meldet im Subgrid nur seine Mindesthöhe) ist hier nicht gestellt - .mrwort hat keine Mindesthöhe; gemessen bei 660-1200 px: Abstand Bezeichnung-Zahl nie unter 2 px. */ .mrzahlen{grid-template-rows:auto auto auto; gap:2px 12px} .mrzahl{display:grid; grid-row:span 3; grid-template-rows:subgrid; gap:2px} .mrzahl .mrwort, .mrzahl small{align-self:start} .mrzahl b{align-self:last baseline} @media (max-width:560px){ .mrzahlen{grid-template-rows:none; gap:12px} .mrzahl{display:flex; grid-row:auto} } .mrbalken{display:flex; gap:2px; height:14px; border-radius:7px; overflow:hidden; margin:16px 0 10px} .mrbalken i{display:block; height:100%} .mrblock .f-rein{background:var(--gut,#2C7A57)} .mrblock .f-nu{background:var(--tinte3)} .mrblock .f-st{background:var(--tinte2)} /* MIETERAKTE (26.09.2026): Zusage, Eckdaten, Mietverlauf, Unterlagen — Bausteine aus Mietrendite, Nachlass und Formularen. */ .mablock .mazusage{display:block; margin:0 0 14px; padding:12px 14px; border-radius:12px; background:var(--flaeche); font-size:14.5px; line-height:1.45; color:var(--tinte)} .mablock .mazusage .ikon{vertical-align:-2px; margin-right:2px; color:var(--akzent)} .mablock .mazusage.frei{color:var(--tinte2)} .mablock dl.mafakten{margin:0 0 12px} .mablock details.maverlauf{margin:12px 0 18px; background:var(--flaeche)} .mablock details.maverlauf[open]{background:var(--flaeche)} .mablock details.maverlauf > table{width:calc(100% - 20px); margin:0 10px 10px} table.matab{width:100%; border-collapse:collapse; font-size:13px} table.matab th{text-align:left; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinte3); font-weight:600; padding:10px 8px 6px} table.matab td{padding:9px 8px; border-top:1px solid var(--linie); vertical-align:top; color:var(--tinte)} table.matab .z{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap} table.matab td.maab{white-space:nowrap; font-variant-numeric:tabular-nums} table.matab td.magrund{color:var(--tinte2); min-width:180px} @media (max-width:560px){ table.matab thead{display:none} table.matab, table.matab tbody{display:block} table.matab tr{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; padding:12px 14px; border-top:1px solid var(--linie)} table.matab td{border:0; padding:0} table.matab td.maab{order:0; flex:1 1 auto; font-weight:600} table.matab td.z{display:inline-block; order:2; font-size:12px; color:var(--tinte2)} table.matab td.z::before{content:attr(data-l); margin-right:5px; color:var(--tinte3)} table.matab td.z[data-l=zusammen]{order:1; font-size:15px; color:var(--tinte)} table.matab td.z[data-l=zusammen]::before{content:none} table.matab td.magrund{order:3; flex:1 1 100%; min-width:0; font-size:13px} } .mablock section.maliste{margin:10px 0 16px} .mablock .nlwann{font-weight:400; color:var(--tinte3); font-size:14.5px} .mablock article.nlkarte .dltun{margin-top:14px} .mablock details.maneu{margin-top:8px} table.matab{min-width:0} /* die allgemeine Tabelle traegt 640 px Mindestbreite — hier nicht (26.09.2026 gemessen) */ table.matab th, table.matab td{white-space:normal; border-bottom:0} form.maform input[type=file]{box-sizing:border-box; width:100%; min-height:var(--knopf); padding:6px 8px; margin:0; font:inherit; font-size:13px; color:var(--tinte2); background-color:var(--flaeche); border:1px solid var(--linie); border-radius:10px; min-width:0} form.maform input[type=file]::file-selector-button{font:inherit; font-size:13px; font-weight:600; min-height:32px; padding:6px 14px; margin-right:10px; cursor:pointer; border:0; border-radius:8px; background:var(--akzent); color:var(--aufakzent, #fff)} /* BELEGLESER (26.09.2026): was aus dem Beleg gelesen wurde, als leise Zeile unter dem Namen. */ .bmgelesen{display:block; margin-top:3px; font-size:12px; line-height:1.4; color:var(--tinte2)} .bmgelesen .ikon{width:13px; height:13px; vertical-align:-2px; color:var(--warte,#C9A227)} .bmgelesen.sicher .ikon{color:var(--gut,#2C7A57)} /* KNÖPFE UNTER DEN KARTEN UND DIE GEFAHR-VARIANTE (26.09.2026). Chris: „Der Button Entfernen ist nicht rot eingefärbt. Außerdem hat er nicht die richtige Höhe gegenüber dem Ändern-Button … wieso ist er unterstrichen? … nicht gegen CI geprüft.“ GEMESSEN vorher: Ändern 32 px grau umrandet, Entfernen 44 px grau und unterstrichen — neun Karten auf „Vermögen“ (Immobilien, Darlehen, Verträge, Ziele). Gesetz 44 (23.09.): eine Familie auf grüner Fläche, nur die Gefahr-Variante ist rot. Beide 44 px. „html body“ hebt die Regel über die älteren Ortsregeln, die Entfernen grau und unterstrichen gemacht hatten. */ html body .dltun button.ststift, html body .dltun button.weg{min-height:var(--knopf); height:var(--knopf); padding:0 18px; border-radius:12px; font-size:14.5px; font-weight:600; text-decoration:none; box-shadow:none} html body .dltun button.ststift{background:var(--akzent); border:1px solid var(--akzent); color:var(--aufakzent)} html body .dltun button.ststift:hover{background:var(--akzent); color:var(--aufakzent); filter:brightness(1.08)} /* DER MASTER FÜR ENTFERNEN (26.09.2026, zweiter Befund). Chris zu den Reisebausteinen: „Die müssen einheitlich gebaut sein und … der Master ist der, den du gerade eben verwendet hast unter Vermögen.“ Jeder Entfernen-Knopf hat dieselbe Gestalt: 44 px hoch, weiße Fläche, roter Rahmen, rote Schrift, 12 px Rundung, nicht unterstrichen; beim Überfahren rot gefüllt. Die Breite bleibt, wie die Familie sie in Zeilen vorsieht (Werkzeuge in einer Zeile tragen die 168 px nicht). „:not(#nie)“ hebt die Regel über jede Ortsregel — eine Gestalt, eine Quelle. Das Eckenkreuz der Steuerkette bleibt ein Kreuz, nur in Rot. */ html body button.weg:not(.zurueck):not(form.ktweg button):not(#nie){background:var(--flaeche); border:1px solid var(--bad); color:var(--bad); min-height:var(--knopf); height:var(--knopf); padding:0 18px; border-radius:12px; font-size:14.5px; font-weight:600; line-height:1.2; text-decoration:none; box-shadow:none; filter:none} html body button.weg:not(.zurueck):not(form.ktweg button):not(#nie):hover{background:var(--bad); border-color:var(--bad); color:#fff} html body form.ktweg button.weg:not(#nie){color:var(--bad)} /* Der breitere Knopf drückte in den Reisebausteinen „125,00 €“ in eine zweite Zeile — die Rechnung bleibt beisammen. */ @media (min-width:761px){ html body table.ubtab td.ubr{white-space:nowrap} } html body .dltun button.weg, html body table.stbelegliste button.weg, html body table.stpaketliste button.weg, html body .mtstufe button.weg, html body form.bmsammel .weg{background:var(--flaeche); border:1px solid var(--bad); color:var(--bad)} html body .dltun button.weg:hover, html body table.stbelegliste button.weg:hover, html body table.stpaketliste button.weg:hover, html body .mtstufe button.weg:hover{background:var(--bad); border-color:var(--bad); color:#fff} .mrblock .f-rl{background:var(--warte,#C9A227)} .mrlegende{list-style:none; margin:0; padding:0; display:grid; gap:4px; font-size:13px} .mrlegende li{display:flex; align-items:center; gap:8px} .mrlegende li b{margin-left:auto; font-variant-numeric:tabular-nums; white-space:nowrap} .mrlegende li > i{width:10px; height:10px; border-radius:3px; flex:0 0 auto} .mrlegende li.mrsumme{border-top:1px solid var(--linie); padding-top:6px; margin-top:2px; font-weight:600} .mrsatz{margin:12px 0 0; font-size:13px; line-height:1.5; color:var(--tinte2)} .mrquelle .ikon{vertical-align:-2px} /* DIE MENÜLEISTE ÜBER DIE VOLLE BREITE (26.09.2026). Chris: „die Menüleiste ist nicht auf die volle Breite aufgezogen … muss auf die volle Breite kommen.“ Gemessen: 1169 von 1216 px, weil sie im Kopf nicht wachsen durfte. Jetzt füllt sie die Zeile, die Einträge verteilen sich gleichmäßig. */ .kopf > nav.umschalter.konten{flex:1 1 auto; justify-content:space-between} svg.ubkette .ufstreifen{fill:color-mix(in srgb, var(--akzent) 16%, transparent); transition:fill .15s} svg.ubkette g.ufabschnitt{cursor:pointer; outline:none} svg.ubkette g.ufabschnitt:hover .ufstreifen{fill:color-mix(in srgb, var(--akzent) 32%, transparent)} svg.ubkette g.ufabschnitt.gewaehlt .ufstreifen{fill:var(--akzent)} svg.ubkette g.ufabschnitt:focus-visible .ufstreifen{stroke:var(--tinte); stroke-width:2} svg.ubkette .uftreffer{fill:transparent} .ufwahl{display:flex; align-items:center; justify-content:space-between; gap:var(--luft-tun, 22px) 16px; flex-wrap:wrap; margin:6px 0 var(--luft-tun, 22px)} .ufwahl .zsreglerwert{margin:0} .ufwahl .knopfleise{width:auto} /* PAKETPREIS (26.09.2026, urlaub.php): vor der Rechnung einer Zeile steht, wie sie rechnet - „je Nacht“, „je Person“, „je Tag“ oder „Paketpreis“. Ein Klick wechselt; beim Paketpreis ist der Einzelpreis der Preis für alles, die Anzahl verschwindet. Gemessen: die allgemeine bmfeld-Regel machte daraus einen 38 px hohen Kasten - deshalb die genauere Adresse. */ table.ubtab td.ubr button.bmfeld.ubpaket{display:inline-flex; align-items:center; height:auto; min-height:26px; padding:2px 11px; border-radius:999px; border:1px solid var(--linie); background:transparent; font-size:12px; line-height:1.2; color:var(--tinte2); margin-right:10px; vertical-align:middle} /* EIN RAHMEN IM REISEARCHIV (26.09.2026). Chris: „Warum ist es doppelt eingekastelt?“ - die Karte stand mit eigenem Rahmen im Rahmen des Aufklappers. Drinnen trennt jetzt nur eine Linie. */ details.ubarchiv li.ubreise{border:0; border-radius:0; padding-left:0; padding-right:0; background:transparent} details.ubarchiv li.ubreise + li.ubreise{border-top:1px solid var(--linie)} table.ubtab td.ubr button.bmfeld.ubpaket[data-wert="1"]{color:var(--tinte); background:var(--flaeche2); font-weight:600} label.feld.ubpaketfeld > span.ubhaken{display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:10px; min-height:44px; text-align:left; font-size:14.5px; color:var(--tinte)} label.feld.ubpaketfeld > span.ubhaken input[type="checkbox"]{flex:0 0 auto; width:20px; height:20px; margin:0; padding:0; display:inline-block; appearance:auto; -webkit-appearance:checkbox; accent-color:var(--gut-tinte,#3C5A2A)} @media (max-width:560px){ nav.tabwahl a:has(.pbild) .tbname{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} } /* WAS JETZT ZÄHLT - die Sondertilgung als Karte (26.09.2026, vermoegen.php). Chris: Der Knopf „klebt da förmlich dran“, das Modul „hat keine Grafik, man muss es lesen“. Jetzt: Titel und Betrag oben, Balken „wie viel liegt schon bereit“, Überweisungsdaten als Zeilen, der Knopf leise auf eigener Zeile darunter. */ ul.vmliste li:has(> .vmkarte){padding:16px 18px} ul.vmliste li:has(> .vmkarte)::before{display:none} .vmkkopf{display:flex; align-items:baseline; justify-content:space-between; gap:6px 16px; flex-wrap:wrap} .vmktitel{font-size:17px; font-weight:700; color:var(--tinte); line-height:1.3} .vmktitel small{display:block; font-size:13px; font-weight:400; color:var(--tinte2); margin-top:2px} .vmkbetrag{font-size:24px; font-weight:700; color:var(--tinte); font-variant-numeric:tabular-nums; white-space:nowrap; margin-left:auto} .vmkzustand{display:flex; align-items:center; gap:6px; margin:6px 0 0; font-size:13px; color:var(--tinte2)} .vmk-warte .vmkzustand{color:var(--warte-tinte,#7A5A16)} .vmk-gut .vmkzustand{color:var(--gut-tinte,#3C5A2A)} .vmkbalken{height:8px; border-radius:4px; background:color-mix(in srgb, var(--tinte) 10%, transparent); overflow:hidden; margin:14px 0 6px} .vmkbalken i{display:block; height:100%; border-radius:4px; background:var(--gut,#2C7A57)} .vmkbalkensatz{margin:0; font-size:13px; color:var(--tinte2); font-variant-numeric:tabular-nums} .vmkdaten{display:grid; grid-template-columns:max-content 1fr; gap:4px 16px; margin:14px 0 0; padding:12px 0 0; border-top:1px solid var(--linie); font-size:13px} .vmkdaten dt{color:var(--tinte2)} .vmkdaten dd{margin:0; color:var(--tinte); overflow-wrap:anywhere} .vmkfuss{margin:10px 0 0; font-size:13px; color:var(--tinte2)} .vmktun{margin:14px 0 0} .vmktun form.vmfrage{margin:0} @media (max-width:560px){ .vmkdaten{grid-template-columns:1fr; gap:0} .vmkdaten dd{margin-bottom:6px} } ul.zslegende{list-style:none;padding:0;margin:0 0 16px;display:flex;gap:16px;flex-wrap:wrap; font-size:12px;color:var(--tinte2)} ul.zslegende li{display:flex;align-items:center;gap:7px} ul.zslegende i{width:11px;height:11px;border-radius:50%;flex:0 0 auto} ul.zslegende i.f-gut{background:var(--gut,#2C7A57)} ul.zslegende i.f-warte{background:var(--warte-tinte,#7A5A16)} ul.zslegende i.f-schlecht{background:var(--bad,#C0392B)} ul.zslegende i.f-leer{background:var(--tinte3,#8aa0a2)} ul.zslegende i.offen{background:var(--flaeche);box-shadow:inset 0 0 0 2px var(--tinte3,#8aa0a2)} form.ubpolster{display:flex;gap:14px;align-items:end;flex-wrap:wrap;margin:12px 0 16px; padding:14px 16px;border:1px solid var(--linie);border-radius:14px;background:var(--flaeche)} form.ubpolster .feld{flex:0 0 auto;width:190px} form.ubpolster .feld input{font-variant-numeric:tabular-nums;text-align:right} form.ubpolster button{width:auto;max-width:none;height:46px} form.ubpolster .ubsatz{flex:1 1 100%;margin:10px 0 0;font-size:13px;color:var(--tinte3)} /* POLSTER HINTER DEM WERKZEUG (26.09.2026, Chris: "die Hauptfunktion ist die Zeitmaschine ... keine Rauschen durch solche Eingabefelder ... zuschalten, wenn ich es administrieren will"). Zahnrad oben rechts im Titel, gleiche Masse wie das Titelsymbol links (gemessen: Oberkante 697 = 697, Rechts- kante = Titelkante), Trefferflaeche 44px. */ section.ubreisen{position:relative} details.ubwerkzeug > summary{position:absolute; top:20px; right:22px; width:30px; height:30px; display:grid; place-items:center; border-radius:9px; cursor:pointer; list-style:none; color:var(--tinte3); transition:background .14s ease, color .14s ease} details.ubwerkzeug > summary::-webkit-details-marker{display:none} details.ubwerkzeug > summary::after{content:''; position:absolute; inset:-7px} details.ubwerkzeug > summary:hover{background:color-mix(in srgb, var(--akzent) 8%, var(--flaeche)); color:var(--tinte)} details.ubwerkzeug[open] > summary{background:color-mix(in srgb, var(--akzent) 12%, var(--flaeche)); color:var(--akzent)} details.ubwerkzeug > summary .ikon{width:17px; height:17px; display:block} p.ubpolsterhinweis{margin:10px 0 0; font-size:13px; color:var(--tinte3)} @media (max-width:560px){ details.ubwerkzeug > summary{width:27px; height:27px; border-radius:8px} } /* HINTER DEM ZAHNRAD (26.09.2026, Chris: "Hauptansicht nur Zeitstrahl und geplante Reisen ... ist die Klappe offen, verschwinden die Reisekarten ... Regler auffaelliger, er geht im Gruen unter ... speichert beim Loslassen"). Das Feld steht unter dem Zeitstrahl und ist nur bei offenem Zahnrad sichtbar; dann treten Reisekarten, Ferienliste, Archiv und "Eine Reise dazunehmen" zurueck. */ div.ubwerkzeugfeld{margin:22px 0 0; padding:20px 0 0; border-top:1px solid var(--linie)} section.ubreisen:not(:has(> details.ubwerkzeug:not(.ubplus)[open])) > div.ubwerkzeugfeld{display:none} section.ubreisen:has(> details.ubwerkzeug:not(.ubplus)[open]) > :is(ul.ubliste, details.ubarchiv, section.ubneu, p.ubsatz){display:none} div.ubwerkzeugfeld > section.ubstrecke{border:0; border-radius:0; background:none; box-shadow:none; padding:0; margin:0} section.ubstrecke > section.ubpolsterfeld{margin:24px 0 0; padding:20px 0 0; border-top:1px solid var(--linie)} section.ubstrecke > section.ubpolsterfeld > h3{margin:0 0 4px; font-size:17px} section.ubstrecke > section.ubpolsterfeld form.ubpolster{margin-top:8px} /* Der Regler als eigenes Bauteil: weisse Karte auf dem sandfarbenen Grund, dunkle Fuellspur statt Gruen, grosser weisser Knopf mit Schatten (Apple-Schieberegler). */ div.ubkonfig .ubregler{background:var(--flaeche); border-radius:14px; padding:14px 18px 16px; box-shadow:0 1px 2px rgba(60,45,30,.08), 0 0 0 1px var(--linie)} #ubAnteil{-webkit-appearance:none; appearance:none; width:100%; height:30px; margin:0; background:transparent; cursor:pointer; --wert:0%} #ubAnteil::-webkit-slider-runnable-track{height:6px; border-radius:3px; background:linear-gradient(to right, var(--tinte) 0 var(--wert), var(--linie) var(--wert) 100%)} #ubAnteil::-moz-range-track{height:6px; border-radius:3px; background:var(--linie)} #ubAnteil::-moz-range-progress{height:6px; border-radius:3px; background:var(--tinte)} #ubAnteil::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:28px; height:28px; margin-top:-11px; border-radius:50%; background:#fff; border:0; box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.18), 0 1px 1px rgba(0,0,0,.10)} #ubAnteil::-moz-range-thumb{width:28px; height:28px; border-radius:50%; background:#fff; border:0; box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.18), 0 1px 1px rgba(0,0,0,.10)} #ubAnteil:focus{outline:none} #ubAnteil:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in srgb, var(--tinte) 22%, transparent), 0 3px 8px rgba(0,0,0,.18)} #ubAnteil:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in srgb, var(--tinte) 22%, transparent), 0 3px 8px rgba(0,0,0,.18)} p.ubspeichern{margin:12px 0 0; min-height:20px; font-size:13px; line-height:1.5; color:var(--tinte3)} p.ubspeichern.gut{color:var(--gut-tinte,#3C5A2A); font-weight:600} p.ubspeichern.schlecht{color:var(--minus,#A2412E); font-weight:600} /* REISE HINZUFÜGEN NEBEN DEM ZAHNRAD (26.09.2026): dasselbe Bauteil wie das Zahnrad, 8 px links daneben. Der Dialog öffnet direkt unter dem Titel. */ details.ubwerkzeug.ubplus > summary{right:calc(22px + 30px + 8px)} @media (max-width:560px){ details.ubwerkzeug.ubplus > summary{right:calc(22px + 27px + 8px)} } details.ubwerkzeug.ubplus > section.ubneu{margin:16px 0 4px} /* Felder einer Zeile enden unten auf einer Linie, auch wenn eine Beschriftung zweizeilig ist („Land oder Gegend / freiwillig“). */ form.ubform{align-items:end} /* DIE ABSTANDSLEITER (20.09.2026). Christian: „Der Text klebt förmlich an der anderen Grafik dran ... Das wirkt hingerotzt." Also steht die Luft ab jetzt an EINER Stelle und nicht als Einzelwert je Absatz: --luft-satz zwischen zwei Sätzen, die zusammengehören --luft-block nach einem Kasten, einer Grafik, einer Tabelle --luft-tun vor einer Knopfzeile --luft-rand zwischen Text und der Kante seines Kastens */ :root{--luft-satz:11px; --luft-raster:15px; --luft-block:22px; --luft-tun:22px; --luft-rand:18px} div.ubkasse{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin:16px 0 var(--luft-block); padding:var(--luft-rand) 20px;border:1px solid var(--linie);border-radius:14px;background:var(--grund,#F1F4F4)} div.ubkasse.leer{opacity:.75} svg.ubkkreis{width:96px;height:96px;flex:0 0 auto;transform:rotate(-90deg)} svg.ubkkreis .kkbahn{stroke:color-mix(in srgb,var(--tinte3,#8aa0a2) 26%,transparent)} svg.ubkkreis .kkteil{stroke:var(--gut,#2C7A57);transition:stroke-dasharray .18s ease} svg.ubkkreis .kkteil.l-luecke{stroke:var(--warte-tinte,#7A5A16)} svg.ubkkreis .kkteil.l-knapp{stroke:var(--warte-tinte,#7A5A16)} svg.ubkkreis .kkteil.l-fern{stroke:var(--bad,#C0392B)} svg.ubkkreis .kkmitte{font-size:19px;font-weight:700;fill:var(--tinte);font-family:var(--schrift,inherit); transform:rotate(90deg);transform-origin:60px 60px;font-variant-numeric:tabular-nums} div.ubkzahlen{flex:1 1 260px;min-width:220px} ul.ubklegende{list-style:none;padding:0;margin:12px 0 14px;display:grid;gap:5px;font-size:14.5px;color:var(--tinte2)} ul.ubklegende li{display:flex;align-items:center;gap:8px} ul.ubklegende b{margin-left:auto;color:var(--tinte);font-variant-numeric:tabular-nums} ul.ubklegende i{width:11px;height:11px;border-radius:3px;flex:0 0 auto} i.kkda{background:var(--gut,#2C7A57)} /* EINE LÜCKE IST KEIN NEBENSATZ (20.09.2026). Christian: „Fehlt noch sollte dann nicht grau sein, sondern irgendeine Signalfarbe … auf jeden Fall sichtbar, dass das die Lücke noch ist." Bernstein, nicht Rot: Eine Lücke von 200 Euro zwei Jahre vorher ist kein Notfall, sondern eine Aufgabe. Rot bleibt dem Fall vorbehalten, in dem es auch bei vollem Einsatz nicht reicht. Solange nichts fehlt, bleibt die Zeile ruhig. */ i.kkfehlt{background:color-mix(in srgb,var(--tinte3,#8aa0a2) 26%,transparent)} ul.ubklegende li.l-fehlt.offen{color:var(--warte-tinte,#7A5A16);font-weight:500} ul.ubklegende li.l-fehlt.offen b{color:var(--warte-tinte,#7A5A16)} ul.ubklegende li.l-fehlt.offen i.kkfehlt{background:var(--warte-tinte,#7A5A16)} i.kkbleibt{background:color-mix(in srgb,var(--gut,#2C7A57) 34%,transparent)} svg.ubstrahl .ubabgang{stroke:var(--bad,#C0392B);stroke-width:1.6;vector-effect:non-scaling-stroke} svg.ubstrahl .ubabgangpunkt{fill:var(--bad,#C0392B)} details.herleitung{background:var(--flaeche);border:1px solid var(--linie);border-radius:16px;margin:16px 0 0} details.herleitung > summary{display:flex;align-items:center;gap:12px; padding:14px 18px;cursor:pointer;list-style:none;border-radius:16px} details.herleitung > summary::-webkit-details-marker{display:none} details.herleitung > summary::after{content:"";width:9px;height:9px;flex:0 0 auto;margin-left:4px; border-right:1.6px solid var(--tinte3);border-bottom:1.6px solid var(--tinte3); transform:rotate(45deg) translateY(-3px);transition:transform .16s ease} details.herleitung[open] > summary::after{transform:rotate(225deg) translateY(-3px)} details.herleitung .hltitel{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;letter-spacing:-.01em} details.herleitung .hltitel .ikon{width:17px;height:17px;color:var(--tinte2)} details.herleitung .hlzahl{font-size:12px;color:var(--tinte3);white-space:nowrap;margin-left:auto} details.herleitung .hlinhalt{padding:4px 18px 18px;border-top:1px solid var(--linie)} details.herleitung .hlinhalt > h3:first-child{margin-top:16px} /* WER WIR SIND (20.09.2026) — dieselben Bauteile wie überall: Karte, Feld, Aufklappfläche. Nichts Eigenes, damit die Seite nicht wieder „ganz anders von der Anmutung" wird. */ section.mnseite{margin:0 0 20px} /* EIGENE KATEGORIEN — eine Gestalt, ueberall wo eine Liste erweiterbar ist */ .katwahl{display:block} .katwahl > select{width:100%} .katneu{ margin-top:10px; padding:14px; border:1px solid var(--linie); border-radius:12px; background:var(--flaeche2); display:flex; flex-direction:column; gap:10px; } .katneu[hidden]{display:none} .katfeld{display:flex; flex-direction:column; gap:5px} .katfeld > span{font-size:13px; color:var(--tinte2)} .katneu input[type=text], .katneu select{width:100%} .kattun{display:flex; flex-wrap:wrap; gap:10px; margin-top:2px} .katstand{margin:0; font-size:13px; color:var(--tinte2); min-height:18px} .katstand.schlecht{color:var(--bad)} option.katneuopt{font-weight:600} .katmehr{margin-top:14px; border-top:1px solid var(--linie); padding-top:12px} .katmehr > summary{cursor:pointer; font-size:14.5px; color:var(--gut-tinte,#3C5A2A); list-style:none} .katmehr > summary::-webkit-details-marker{display:none} .katmehr > summary::before{content:'＋ '; font-weight:600} /* DER VERTRAGSFAHRPLAN — was schwarz auf weiß im Vertrag steht */ details.vtplan{margin-top:var(--luft-block); border-top:1px solid var(--linie); padding-top:var(--luft-satz)} details.vtplan > summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:9px; font-size:14.5px; color:var(--gut-tinte,#3C5A2A); padding:4px 0} details.vtplan > summary::-webkit-details-marker{display:none} details.vtplan > summary:hover{color:var(--tinte)} p.vtplansatz{margin:var(--luft-satz) 0 0; font-size:13px; color:var(--tinte2); line-height:1.5} h4.vtplantitel{margin:var(--luft-block) 0 var(--luft-satz); font-size:15px} dl.vtplanliste{margin:0} table.vtplantab{width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums} table.vtplantab th, table.vtplantab td{padding:8px 14px 8px 0; text-align:left; border-bottom:1px solid var(--linie)} table.vtplantab th{font-weight:600; color:var(--tinte2); font-size:12px} table.vtplantab .zr{text-align:right; padding-right:0; padding-left:12px} /* SPARPLAN AUF DEM IPAD (29.09.2026, CI-Wächter @834 px): Die rechtsbündigen Spalten hatten links keinen Innenabstand — „Sparbeiträge“ und „Guthabenzinsen“ standen 4–6 px auseinander. Jetzt 12 px, und die langen Köpfe dürfen an der Wortfuge umbrechen (weiche Trennung im Kopf), damit die Tabelle hochkant in ihren Rahmen passt. */ table.vtplantab th{white-space:normal; vertical-align:bottom} table.vtplantab tfoot td{font-weight:600; border-bottom:none; border-top:2px solid var(--linie)} table.vtplantab tr.vtjetzt{background:var(--grund,#F1F4F4)} table.vtplantab tr.vtjetzt td{font-weight:600} .katwahl.katklein{max-width:420px} /* Das Sortierbauteil und der Belegmanager — eine Gestalt für die ganze Seite */ [data-sortieren] > [data-kennung]{position:relative} [data-sortieren] > .zieht{z-index:20;box-shadow:0 18px 42px -18px rgba(30,26,18,.5);opacity:.96} .ziehgriff, .ziehpfeil{border:0;background:transparent;padding:6px;border-radius:8px;cursor:grab; color:var(--tinte3);display:inline-flex;align-items:center;justify-content:center} .ziehgriff:hover, .ziehpfeil:hover{background:var(--flaeche2);color:var(--tinte)} .ziehgriff:active{cursor:grabbing} .ziehpfeil[data-hin="1"] .ikon{transform:rotate(180deg)} .sortstand{font-size:12px;color:var(--tinte3)} .sortstand.schlecht{color:var(--schlecht-tinte,#8E3B2F);font-weight:600} /* Der Belegmanager der Reise — dieselbe Gestalt wie im Steuerbereich (20.09.2026, Gesetz 45: keine Insellösungen). Hier stehen nur die wenigen Ergänzungen, die es dort nicht gibt: der Kameraweg und die Artenwahl. */ .bmablage.blreise{margin:14px 0 4px} .bmablage.blreise .bmzone.ueber{border-color:var(--gut-tinte,#3C5A2A); background:color-mix(in srgb,var(--gut-tinte,#3C5A2A) 8%,var(--flaeche))} .bmstand{margin:10px 0 0;font-size:13px;color:var(--tinte2)} .bmstand.schlecht{color:var(--schlecht-tinte,#8E3B2F);font-weight:600} table.blliste select.blart{font:inherit;font-size:13px;border:1px solid var(--linie,#E8E4DC); border-radius:8px;padding:4px 8px;background:var(--flaeche);color:var(--tinte2);max-width:150px} table.blliste .sttun{display:flex;gap:4px;align-items:center;justify-content:flex-end} table.blliste .sttun form{margin:0} input.bmfeldein{font:inherit;font-size:14.5px;font-weight:600;padding:4px 8px;border-radius:8px; border:1px solid var(--gut-tinte,#3C5A2A);background:var(--flaeche);color:var(--tinte);width:100%;max-width:320px} button.bltitel.schlecht{color:var(--schlecht-tinte,#8E3B2F)} /* Die Nationalflaggen — gezeichnet, nicht geladen */ svg.flagge{width:24px;height:16px;border-radius:2.5px;flex:none;display:inline-block;vertical-align:-2px; box-shadow:0 0 0 1px rgba(30,26,18,.14)} svg.flaggegross{width:30px;height:20px;margin-right:9px;vertical-align:-3px} .zskflagge{display:inline-flex;margin-right:8px;vertical-align:-2px} .zsktitel b{display:flex;align-items:center} .ubrkopf h3{display:flex;align-items:center;gap:0;flex-wrap:wrap;min-width:0} .ubrkopf h3 .ubland{margin-left:9px} /* „Was vergeben ist" — änderbar an Ort und Stelle */ details.ubvergeben{margin:2px 0 12px} details.ubvergeben > summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;list-style:none; font-size:13px;color:var(--tinte2);padding:5px 11px;border:1px solid var(--linie,#E8E4DC);border-radius:999px} details.ubvergeben > summary::-webkit-details-marker{display:none} details.ubvergeben > summary:hover{background:var(--flaeche2);color:var(--tinte)} details.ubvergeben[open] > summary{background:var(--flaeche2);color:var(--tinte)} .ubvinhalt{padding:12px 0 2px} ul.ubvliste{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:1px;max-width:640px} ul.ubvliste li{display:grid;grid-template-columns:1fr 140px auto;gap:12px;align-items:center; padding:7px 0;border-top:1px solid var(--linie,#E8E4DC)} ul.ubvliste li.ubvsumme{border-top:2px solid var(--linie,#E8E4DC);font-weight:600;grid-template-columns:1fr auto} .ubvwas{font-size:14.5px;min-width:0} input.ubvwas{height:38px;padding:0 10px} .ubvbetrag{font-variant-numeric:tabular-nums;text-align:right} input.ubvfeld{height:38px;padding:0 11px;font-size:14.5px;text-align:right;font-variant-numeric:tabular-nums; border:1px solid var(--linie,#E8E4DC);border-radius:10px;background:var(--flaeche);color:var(--tinte);width:100%} input.ubvfeld:focus{outline:2px solid var(--gut-tinte,#3C5A2A);outline-offset:1px} .ubvhin{font-size:12px;color:var(--tinte3);white-space:nowrap} .ubvhin.schlecht{color:var(--schlecht-tinte,#8E3B2F);font-weight:600} @media (max-width:560px){ul.ubvliste li{grid-template-columns:1fr 110px}.ubvhin{grid-column:1/-1}} p.mnziehsatz{display:flex;align-items:center;gap:7px;margin:10px 0 0;font-size:12px;color:var(--tinte3)} p.mnziehsatz.laeuft{color:var(--tinte2)} p.mnziehsatz.schlecht{color:var(--schlecht-tinte,#8E3B2F);font-weight:600} li.mnkarte{position:relative} li.mnkarte.zieht{z-index:20;box-shadow:0 18px 42px -18px rgba(30,26,18,.5);cursor:grabbing; transition:none;opacity:.96} .mnziehen{position:absolute;top:10px;right:10px;display:flex;gap:2px;opacity:0;transition:opacity .15s} li.mnkarte:hover .mnziehen, li.mnkarte:focus-within .mnziehen{opacity:1} /* DIE KARTEN-GRIFF- UND PFEIL-KNOEPFE WAREN 168x44 STATT KLEINER ICON-KNOEPFE (23.09.2026) Christian, zwei Screenshots: "Wenn ich Texte aendern aktiviere, passieren komische Sachen" - ein grauer Kasten mit Pfeil deckte den Namen "Christian Blank" ab, dazu ein Griff-Symbol ausserhalb der Karte links. GEMESSEN: .mngriff und .mnpfeil (der Karten-Verschieben-Griff und die beiden Vor/Zurueck-Pfeile in .mnziehen oben rechts an jeder Karte) setzten nie eine eigene Breite/Hoehe - darum erbten sie den globalen Knopf-Reset min-width:168px/min-height:44px und wurden zu drei riesigen Knoepfen, die sich ueber die Karte legten und dabei auch den Klick auf den unterstrichenen Namen abfingen - das war zugleich der Grund, warum das Antippen des Namens nicht zum Textaendern fuehrte. Jetzt: 32x32 Icon-Knoepfe, wie die uebrigen Karten-Ecken-Knoepfe im Haus (vergleiche .mnzu). */ .mngriff, .mnpfeil{border:0;background:transparent;padding:5px;border-radius:8px;cursor:grab; width:32px;height:32px;min-width:32px;min-height:32px; color:var(--tinte3);display:inline-flex;align-items:center;justify-content:center} .mngriff:hover, .mnpfeil:hover{background:var(--flaeche2);color:var(--tinte)} .mngriff:active{cursor:grabbing} .mnpfeil[data-hin="1"] .ikon{transform:rotate(180deg)} ul.mnliste{list-style:none;padding:0;margin:14px 0 18px;display:grid;gap:14px} @media (min-width:761px){ul.mnliste{grid-template-columns:repeat(2,minmax(0,1fr))}} /* Alle drei nebeneinander, sobald die Breite reicht (20.09.2026, Christian: „Christian, Ines, Una in einer Reihe, das wäre mir am allerliebsten.") */ @media (min-width:1181px){ul.mnliste{grid-template-columns:repeat(3,minmax(0,1fr))}} li.mnkarte{background:var(--flaeche);border:1px solid var(--linie);border-radius:16px;padding:16px 18px} div.mnkopf{display:flex;align-items:flex-start;gap:13px} /* 26.09.2026: oben statt mittig - bricht ein Name oder eine Rolle um, bleibt das Alter auf der Höhe der Nachbarkarten */ span.mnmarke{flex:0 0 auto;display:inline-flex} span.mnmarke .pbild{width:44px;height:44px;min-width:44px;border-radius:50%;object-fit:cover;display:flex; align-items:center;justify-content:center;background:var(--flaeche2);color:var(--tinte2);font-size:17px;font-weight:600} span.mnmarke.gross .pbild{width:72px;height:72px;min-width:72px;font-size:24px} div.mnwer{min-width:0;flex:1 1 auto} div.mnwer h3{margin:0;font-size:17px;letter-spacing:-.01em} p.mnrolle{margin:2px 0 0;font-size:13px;color:var(--tinte2)} span.mnalter{flex:0 0 auto;font-size:13px;color:var(--tinte2);text-align:right} span.mnalter b{display:block;font-size:24px;color:var(--tinte);font-variant-numeric:tabular-nums;line-height:1.1} dl.mndaten{margin:14px 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14.5px} dl.mndaten dt{color:var(--tinte2);font-size:13px} dl.mndaten dd{margin:0;color:var(--tinte)} dd.mnfehlt{display:flex;align-items:center;gap:7px;color:var(--warte-tinte,#7A5A16)} dd.mnfehlt .ikon{width:14px;height:14px} span.mnnae{color:var(--tinte3);font-size:12px;margin-left:6px} p.mnhintergrund{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:var(--tinte2)} details.mnaendern{margin-top:14px;background:transparent} details.mnaendern > summary{padding:10px 0} details.mnaendern .hltitel{font-size:14.5px;font-weight:500;color:var(--tinte2)} details.mnaendern .hlinhalt{padding:12px 0 0} h4.mnteil{margin:22px 0 10px;font-size:14.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--tinte3);font-weight:600} h4.mnteil:first-child{margin-top:8px} div.mnbild{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;padding:14px 16px; border:1px solid var(--linie);border-radius:14px;background:var(--grund,#F1F4F4)} div.mnbildtun{flex:1 1 240px;min-width:220px} p.mnstand{margin:0 0 12px;font-size:13px;line-height:1.5;color:var(--tinte2)} div.mnknoepfe{display:flex;gap:14px;align-items:end;flex-wrap:wrap} div.mnknoepfe form{display:flex;gap:14px;align-items:end;flex-wrap:wrap;margin:0} div.mnknoepfe button{width:auto;max-width:none;height:46px} /* NICHT „weg" NENNEN (20.09.2026): Es gibt schon eine globale Regel button.weg, die einen unterstrichenen Textlink daraus macht — sie hat gewonnen und der Knopf sah aus wie ein Link (gemessen). Eigener Name, kein Streit um Spezifität. */ .knopfleise.loeschen{background:var(--flaeche);color:var(--bad,#C0392B);border-color:color-mix(in srgb,var(--bad,#C0392B) 40%,var(--linie))} .knopfleise.loeschen:hover{background:var(--bad,#C0392B);color:#fff;border-color:var(--bad,#C0392B);filter:none} /* Das Bauteil „Datei wählen" — überall gleich, statt der Systemschrift. */ label.dateiwahl{display:inline-flex;align-items:center;gap:12px;cursor:pointer;min-width:0} label.dateiwahl input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)} span.dwknopf{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 16px; border:1px solid var(--linie);border-radius:10px;background:var(--flaeche);color:var(--tinte); font-size:14.5px;font-weight:500;white-space:nowrap} label.dateiwahl:hover span.dwknopf{border-color:var(--tinte3)} label.dateiwahl input[type=file]:focus-visible + span.dwknopf{outline:2px solid var(--akzent);outline-offset:1px} span.dwknopf .ikon{width:15px;height:15px;flex:0 0 auto} span.dwname{font-size:13px;color:var(--tinte3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} ul.mnmerkmale{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:12px} /* 04.10.2026: Karten untereinander 12 px (Gesetz), vorher 8 — gefunden erst, als der Wächter auch das Schubblatt maß */ ul.mnmerkmale li{position:relative;padding:11px 14px;border-radius:12px;background:var(--grund,#F1F4F4);font-size:14.5px} span.mmkopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap} span.mmkopf .ikon{width:15px;height:15px;color:var(--tinte3);flex:0 0 auto} span.mmkopf b{color:var(--tinte)} span.mmkopf em{font-style:normal;font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--tinte3); border:1px solid var(--linie);border-radius:99px;padding:1px 8px} ul.mnmerkmale p{margin:6px 0 0;color:var(--tinte2);line-height:1.55} form.mmweg{position:absolute;top:8px;right:10px;margin:0} form.mmweg button{width:auto;max-width:none;font-size:12px;padding:5px 10px} ul.mnmerkmale li:not(:hover):not(:focus-within) form.mmweg{opacity:0} form.mmweg{transition:opacity .14s ease} @media (hover:none){ ul.mnmerkmale li form.mmweg{opacity:1} } p.ubteilsatz{margin:4px 0 0;font-size:14.5px;line-height:1.6;color:var(--tinte2)} p.ubteilsatz b{color:var(--tinte)} /* SCHUTZRAUM UM BEDIENELEMENTE (20.09.2026). Christian: „Da kleben die Buttons wieder zusammen, beziehungsweise die Texte unterhalb wieder an den Buttons dran. Da ist der Sicherheitsabstand nicht eingehalten." Gemessen und festgesetzt: 14 px zwischen zwei Knöpfen, 24 px Luft über der Zeile, und der Hinweis steht auf einer EIGENEN Zeile mit 10 px Abstand — er ist eine Fußnote zum Knopf, kein Nachbar. */ div.ubkonfigtun{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:24px 0 0} div.ubkonfigtun button{width:auto;max-width:none} div.ubkonfigtun .ubsatz{flex:1 1 100%;margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--tinte3)} h3.ubspielkopf{margin:18px 0 4px;font-size:16px} p.ubablesen{margin:0 0 14px;color:var(--tinte2);font-size:13px;line-height:1.6} p.ubablesen b{color:var(--tinte);font-variant-numeric:tabular-nums} ul.ubstufen{list-style:none;padding:0;margin:0;display:grid;gap:var(--luft-raster)} /* B5: Karten untereinander 15 px (Gesetz: Karten ab 12 px) */ ul.ubstufen li{display:grid;grid-template-columns:auto 1fr;gap:3px 16px;padding:var(--luft-rand) 18px;border-radius:12px;background:var(--grund,#F1F4F4);font-size:14.5px} ul.ubstufen li b{grid-row:1;font-variant-numeric:tabular-nums} ul.ubstufen li.auf b{color:var(--gut,#2C7A57)} ul.ubstufen li.ab b{color:var(--schlecht-tinte,#8E3225)} ul.ubstufen .ubwann{grid-row:1;font-weight:600} ul.ubstufen .ubwas{grid-column:2;color:var(--tinte)} ul.ubstufen .ubgrund{grid-column:2;color:var(--tinte2);font-size:13px} ul.ubstufen li.unsicher{opacity:.82} ul.ubstufen li.leer{color:var(--tinte2)} ul.ubliste{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:var(--luft-block)} /* 26.09.2026, Chris: „links außen … so breit geworden, die Linie … mach das einfach mit einer normalen Linie.“ Der 4-px-Balken links (Zustandsfarbe) entfällt; der Zustand steht ohnehin als Plakette oben rechts in der Karte (IDEE, GEBUCHT …). */ li.ubreise{border:1px solid var(--linie);border-radius:16px;padding:var(--luft-rand) 20px} li.ubreise.z-gewesen{opacity:.7} div.ubrkopf{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap} div.ubrkopf h3{margin:0;font-size:17px} span.ubland{color:var(--tinte2);font-weight:400;font-size:15px} span.ubzustand{font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--tinte2)} p.ubwann2{margin:4px 0 8px;color:var(--tinte2);font-size:14.5px} p.ubsumme{margin:0 0 4px;display:flex;align-items:baseline;gap:10px} p.ubsumme b{font-size:24px} /* zz498 (Vorhaben 322): Die Summen der Reisekarten stehen untereinander – sie enden auf EINER Kante (Gesetze 40/50). Gemessen ±13 px, weil jede Summe linksbündig so breit war wie ihr Betrag. Jetzt: feste Breite, rechtsbündig, Ziffern gleich breit. */ ul.ubliste p.ubsumme b{display:inline-block; min-width:11ch; text-align:right; font-variant-numeric:tabular-nums} p.ubsumme span{color:var(--tinte2);font-size:13px} p.ubreicht{margin:0;display:flex;gap:9px;align-items:flex-start;font-size:14.5px;line-height:1.5} p.ubreicht svg{flex:0 0 auto;margin-top:2px} p.ubreicht.gut{color:var(--gut,#2C7A57)} p.ubreicht.wartet{color:var(--warte-tinte,#7A5A16)} p.ubreicht.mangel{color:var(--schlecht-tinte,#8E3225)} /* Beschriftung und Wert brauchen Luft (20.09.2026, Befund des eigenen Prüfstands nach der Verschärfung: 2,0 px zwischen „Nächte" und „21 Nächte"). Der Wert steht unter seiner Beschriftung, nicht an ihr. */ .ubfest > p{margin:5px 0 0;font-size:15px;color:var(--tinte);line-height:1.5} .ubfest > p a{margin-left:8px;font-size:13px} p.ubtun{margin:var(--luft-tun) 0 0} div.ubauf{margin-top:14px;padding-top:14px;border-top:1px solid var(--linie)} /* ÜBERSCHRIFT DES BEREICHS WIE DER REISENAME (26.09.2026). Chris: „Was die Reise kostet“, „Die Reise selbst“, „Reiseunterlagen“, „Anzahlungen“ waren mit 15 px zu klein - „Das hilft dem Auge zu strukturieren.“ Jetzt dieselbe Grösse wie der Reisename (div.ubrkopf h3, 19 px). */ div.ubauf h4{margin:4px 0 10px;font-size:17px;line-height:1.3} /* DIE KACHELN JE REISE (24.09.2026). Christian: „Es ist mittlerweile relativ unübersichtlich geworden ... eine Aneinanderreihung. Ich würde gerne das optisch aufbereiten, mehr mit so großen Kacheln." Und dazu, zum Entwurf: „Ich möchte keine bunten Icons haben. Die sollen so bleiben, wie sie bislang sind. Keine Farbe haben, neutral sein." Vier Kacheln, dieselbe Zeichensprache wie ueberall im Haus — Farbe kommt von currentColor, keine eigene Flaeche je Zeichen. Ein Klick wechselt nur den Inhalt darunter (Gesetz „Ruhe"); die Kachelreihe selbst bewegt sich nicht, weil sie ausserhalb jeder Bereichs-Bedingung steht. */ nav.ubkacheln{display:grid;grid-template-columns:repeat(2,1fr);gap:1px; margin:0 0 var(--luft-block);background:var(--linie); border:1px solid var(--linie);border-radius:14px;overflow:hidden} @media (min-width:561px){nav.ubkacheln{grid-template-columns:repeat(4,1fr)}} a.ubkachel{display:flex;flex-direction:column;gap:6px;padding:14px 16px; background:var(--flaeche);color:inherit;text-decoration:none} a.ubkachel:hover{background:var(--flaeche2)} a.ubkachel.aktiv{background:var(--grund,#F1F4F4)} a.ubkachel .ikonkachel{width:20px;height:20px;color:var(--tinte2)} a.ubkachel.aktiv .ikonkachel{color:var(--akzent)} span.ubkname{font-size:13px;font-weight:600;color:var(--tinte)} span.ubkwert{font-size:12px;color:var(--tinte2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} table.ubtab{width:100%;border-collapse:collapse;font-size:14.5px;margin:0 0 16px} /* BEFUND DES ABSTANDSPRUEFSTANDS (20.09.2026): Die Spalten der Bausteinliste beruehrten sich auf 0,0 px — 6 px Innenabstand links und rechts ergeben zwischen zwei Zellen zwar 12 px Luft, aber die Zellen SELBST stiessen aneinander, und bei langen Namen klebte der Text. Jetzt trennt ein Schutzraum die Spalten sichtbar. */ table.ubtab td{padding:8px 14px 8px 0;border-bottom:1px solid var(--linie);vertical-align:top} /* KLICK INS FELD, auch in der Kalkulation (20.09.2026) — dieselbe Gestalt wie im Belegmanager: unterstrichelt beim Überfahren, grün beim Speichern, rot, wenn die Datenbank ablehnt. */ p.ubtabsatz{display:flex; align-items:center; gap:8px; color:var(--tinte2); font-size:13px; margin:0 0 var(--luft-satz)} /* Das negative Hochmargin der Feldknoepfe zieht zwei Zeilen zusammen — in der Kalkulation stehen Bezeichnung und Quelle untereinander, dort darf nur seitlich gezogen werden (gemessen 0,0 px am 20.09.2026). */ /* KEIN NEGATIVES MARGIN NEBEN FLIESSTEXT (20.09.2026): Es zog die „, Stand …"-Angabe in den Knopf hinein — sichtbar als Überlappung. Der Knopf bekommt seinen Schutzraum durch Padding, nicht durch Ausleihen. */ table.ubtab button.bmfeld{cursor:text; text-align:inherit; margin:0; padding:1px 5px} table.ubtab .ubq .ubstand{margin-left:6px} /* DIE GANZE ZELLE IST DER GRIFF (20.09.2026). Christian am iPad: „Habe reingeklickt und es geht nicht … Ich musste den gesamten Eintrag löschen, um ihn neu zu ergänzen." URSACHE: Der Knopf war nur so breit wie sein Text — daneben war die Zelle tot. Wer mit dem Finger in die Zelle tippt, trifft nichts. Jetzt füllt der Griff seine Zelle, mit einer Höhe, die ein Daumen sicher trifft. */ table.ubtab td.ubr button.bmfeld, table.ubtab td.ubb button.bmfeld{ /* ZWEI VARIABLEN, ZWEI GRIFFE (20.09.2026). Seit die Anzahl und der Einzelpreis je ein eigenes Feld sind, kann keiner mehr die ganze Zelle füllen — sie stünden sonst untereinander und das Mal-Zeichen allein in einer Zeile. Jeder Griff ist so breit wie sein Wert und 38 px hoch; das trifft ein Daumen sicher, und beide bleiben nebeneinander. Kein negatives Margin — der Griff bleibt in seiner Zelle. */ display:inline-block; width:auto; text-align:right; vertical-align:middle; min-height:38px; padding:8px 6px; margin:0; border-radius:8px; touch-action:manipulation; } table.ubtab td.ubn button.ubnfeld{display:inline-block; min-height:30px; padding:4px 6px; touch-action:manipulation} /* ZAHLEN WERDEN NIE ZUSAMMENGEDRÜCKT (zz481). Chris, Kroatien: „Einzelkosten von so einer Nacht anpassen … von einem 2- auf einen 3-stelligen Betrag … dann schreibt er plötzlich in die Summe rein.“ GEMESSEN bei 1180/1440 px: Ein Knopf in einer Tabellenzelle zählt beim Verteilen der Spalten mit Breite null; die Namensspalte nahm sich den Platz, die Rechnung durfte nicht umbrechen und lief in die Betragsspalte – Abstand Preis→Betrag 12 px, nach dem Speichern 3–5 px, bei größeren Zahlen darüber. Jetzt trägt jeder Wert-Knopf in einer Zelle seine eigene Breite: die ganze Rechnung, jede Zahl und jedes Datum in allen Tabellen. Nachgemessen: 70 px Abstand auf 1180/1440, iPhone und iPad unverändert. */ html body table td.ubr button.bmfeld, html body table td button.bmfeld:is([data-typ="zahl"], [data-typ="datum"]){min-width:max-content; max-width:none} html body table tr.gesamtzeile td.ubb, html body table tr.gesamtzeile td.ubb *{white-space:nowrap} table.ubtab td.ubn .ubbez button.bmfeld, table.ubtab td.ubn .ubq button.bmfeld{ display:inline-block; min-height:26px; padding:3px 6px; touch-action:manipulation; } /* Beim Überfahren zeigt die Fläche, dass sie ein Griff ist. */ table.ubtab button.bmfeld:hover{background:var(--flaeche2)} table.ubtab button.ubnfeld{font-weight:600; color:var(--tinte); cursor:pointer} /* Ikonografie der Reisebausteine (22.09.2026), vergroessert 23.09.2026. Christian: „Das sind ja popelige kleine Grafiken … die strukturieren doch nicht wirklich." Ein duenner 15px-Strich verschwindet neben Text — jetzt derselbe Abzeichen-Kasten wie bei den Postenkarten (.pv-zeichen in Verwaltung), nur unter eigenem Namen: Kasten in der Flaechenfarbe, Zeichen in der Akzentfarbe. Ein Bauteil, eine Quelle. */ table.ubtab td.ubn .abzeichen{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; flex:0 0 auto; background:var(--flaeche2); color:var(--akzent); vertical-align:-10px; margin-right:8px; } table.ubtab td.ubn .abzeichen .ikon{width:19px; height:19px; vertical-align:0} table.ubtab .leerfeld{color:var(--tinte3); font-style:normal} table.ubtab input.bmedit, table.ubtab select.bmedit{ font:inherit; font-size:14.5px; padding:3px 7px; border-radius:7px; border:1px solid var(--akzent); background:var(--flaeche); color:var(--tinte); max-width:100%; min-width:90px; } /* Das Feld nimmt die Breite seiner Zelle — eine feste Breite sprengt sie, sobald die Tabelle auf einem schmalen Schirm enger wird (iPad, 20.09.2026). */ table.ubtab td.ubr input.bmedit, table.ubtab td.ubb input.bmedit{ text-align:right; min-width:0; width:100%; max-width:100%; box-sizing:border-box; } table.ubtab td.ubr, table.ubtab td.ubb{min-width:104px} /* EIN ERGEBNIS IST KEIN EINGABEFELD (20.09.2026). Christian: „Die Summe musst du dann gesperrt lassen … Ich muss die Parameter ändern, die Variablen." Der Betrag traegt darum keinen Griff, keinen Zeiger und keine Hover-Flaeche — er sieht aus wie das, was er ist: gerechnet. */ /* EINE ZEILE, DIE NICHT RECHNET, VERSCHWINDET NICHT — SIE MELDET SICH (20.09.2026). Weglassen ist kein Melden: Der Posten bleibt stehen, zaehlt null und sagt an seiner eigenen Zeile, warum. */ table.ubtab tr.ubschief > td{background:color-mix(in srgb, var(--bad) 7%, transparent)} span.ubgrund{display:flex; align-items:flex-start; gap:7px; margin-top:var(--luft-satz); font-size:12px; line-height:1.5; color:var(--bad)} span.ubgrund .ikon{flex:0 0 auto; margin-top:2px} tr.gesamtzeile .gzfehl{color:var(--bad)} table.ubtab td.ubb b.ubfest{font-weight:600; cursor:default} /* DIE ZAHLEN STEHEN NICHT IN EINER EBENE (23.09.2026) Christian: "die zahlen stehen nicht in einer Ebene." GEMESSEN: Anzahl und Einzelpreis sind editierbare Knoepfe mit 8px senkrechtem Innenabstand (Fingerziel, 38px hoch, siehe "ZWEI VARIABLEN, ZWEI GRIFFE" oben) - ihr Text sitzt darum sichtbar tiefer als die Zeile, in der sie stehen. Die Endsumme (dieses b.ubfest) hat keinen solchen Innenabstand und blieb am oberen Rand der Zelle stehen, waehrend die Knoepfe daneben schon eine Ebene tiefer lagen. Innenabstand auf einem inline-Element wie b.ubfest selbst verschiebt den Text NICHT, nur die Box (getestet) - darum hier auf der Zelle selbst, nicht auf dem b. Gesamtzeile bleibt aussen vor, sie hat keine Knoepfe daneben, an denen sie sich ausrichten muesste. */ table.ubtab tr:not(.gesamtzeile) td.ubb{padding-top:16px} table.ubtab .ubmal{color:var(--tinte3); padding:0 1px} table.ubtab .ubrest{color:var(--tinte2)} table.ubtab .ubb b.frisch, table.ubtab button.bmfeld.frisch{background:color-mix(in srgb, var(--gut) 16%, transparent); border-radius:6px} tr.gesamtzeile .ubb b.frisch{background:color-mix(in srgb, var(--gut) 16%, transparent); border-radius:8px; padding:0 6px} table.ubtab td:last-child{padding-right:0} /* ZWISCHEN ZWEI SPALTEN STEHT LUFT (20.09.2026) Christian mit einem Bildschirmfoto vom iPad: „Hier kommt es teilweise noch zu Überschneidungen von Beschreibungstexten, die dann in Zahlenfelder hineinragen bzw. ganz eng da beisammen sitzen. Das darf nicht sein. Corporate Design verbietet das." Ein Text endet nie am Rand seiner Spalte: Die Namensspalte gibt rechts einen ganzen Block ab, die Zahlenspalten nehmen links noch einmal Luft dazu. Der Wächter misst das ab sofort — siehe „Zwei Spalten kleben aneinander". */ table.ubtab td.ubn{padding-right:var(--luft-block)} table.ubtab td.ubr, table.ubtab td.ubb{padding-left:12px} /* DAS MAL-ZEICHEN BLEIBT BEI SEINER ZAHL (20.09.2026) Wird die Spalte eng, darf sie umbrechen — aber nur ZWISCHEN den beiden Grössen, nie mitten hinein. Sonst steht das „×" allein in einer Zeile und bedeutet nichts mehr. Jede Grösse ist darum ein eigener, unzerreissbarer Block; gebrochen wird höchstens dazwischen. */ table.ubtab td.ubr{color:var(--tinte2); white-space:normal; text-align:right} table.ubtab td.ubr .ubrteil{display:inline-block; white-space:nowrap; vertical-align:middle} /* „1 ד BLEIBT STUMM, BIS JEMAND HINEINKLICKT (20.09.2026) Christian: „Das Einmal brauchen wir da natürlich nicht. Das fängt dann nur zu rauschen an … Wenn man reinklickt, dann gerne. Ansonsten draussen lassen." `visibility` statt `display`: Der Platz bleibt reserviert, also springt beim Aufdecken keine Spalte — die Zahl ist nur unsichtbar, nicht weg. */ table.ubtab td.ubr .ubrteil.stumm{visibility:hidden} table.ubtab td.ubr.tut .ubrteil.stumm{visibility:visible} table.ubtab td.ubb{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap} table.ubtab td.ubw{text-align:right} /* ZWEI FUNDE BEIM MESSEN GEGEN CHRISTIANS SMARTPHONE-SCREENSHOT (24.09.2026). Christian: „Die Ansicht auf dem Smartphone offenbart hier ein Problem" — die Kostentabelle einer Reise lief auf schmalen Bildschirmen beidseitig aus dem Bild. Offline nachgebaut (Playwright, 390px, aus genau diesem ausgelieferten CSS und derselben Zeilen-Markup wie urlaub.php sie erzeugt) und zwei unabhaengige Ursachen gemessen: (1) table.ubtab hat eine vom Browser berechnete Mindestbreite von 640px (getrieben vom min-width:104px auf td.ubr/td.ubb plus dem Beschreibungs- text in td.ubn) — auf einem 390px-Telefon blieb kein Rand. (2) UNABHAENGIG davon: zwischen </button> und <i class="ubstand"> steht in urlaub.php kein Leerzeichen — es gibt dort keine Umbruchstelle; dazu erbt td.ubn das globale `th,td{white-space:nowrap}`, das table.ubtab nie fuer diese Spalte aufhebt (anders als td.ubr, das es ausdruecklich tut). „Stand …" haengt dadurch bis zu 32px ueber den Rand hinaus, sobald der Rest der Zeile fuer den Text nicht mehr reicht — bei JEDER Breite, nicht nur unterhalb des Grenzwerts unten. Fix (2) gilt deshalb ungeschuetzt, Fix (1) nur unterhalb 800px (bei 720px lag eine schmale Bandbreite 721–750px knapp daneben, weil main-/section-/li- Padding dort noch genug Breite fressen, dass 640px nicht mehr hineinpasst). Offline gegengeprueft: kein Ueberlauf mehr von 320px bis 1300px, „Entfernen" bleibt volles Trefferziel, Desktop-Tabellenlayout unveraendert (Fassung: siehe Entwicklungsprotokoll). */ table.ubtab .ubq{white-space:normal} table.ubtab .ubq .ubstand{display:block; margin-left:0; margin-top:2px} @media (max-width:760px){ table.ubtab{min-width:0} table.ubtab, table.ubtab tbody, table.ubtab tr{display:block; width:100%} table.ubtab td{display:block; width:100%; box-sizing:border-box; min-width:0; border-bottom:none; padding:0} table.ubtab td.ubn{padding:0 0 8px} table.ubtab td.ubr{padding:0 0 4px} table.ubtab td.ubb{padding:0 0 8px !important} table.ubtab td.ubw{padding:0; text-align:right} table.ubtab tr{padding:14px 0; border-bottom:1px solid var(--linie)} table.ubtab tr.gesamtzeile{border-bottom:none; padding-top:16px} table.ubtab td.ubr input.bmedit, table.ubtab td.ubb input.bmedit{width:auto; max-width:100%} } /* DER ABSCHLUSS — eine Gestalt fuer jede Summenzeile der Seite (Gesetz 46). Christian am 20.09.2026: „Bei der Visualisierung von so etwas muss im Prinzip klar hervorkommen, dass es sich hier gesamt handelt … das muss optisch hervorgehoben werden." Ein Abschluss ist keine weitere Zeile: er bekommt einen eigenen Grund, einen kraeftigen Strich darueber und eine groessere Zahl. */ tr.gesamtzeile > td{ border-bottom:none; border-top:2px solid var(--tinte3,#8aa0a2); padding-top:var(--luft-rand); padding-bottom:var(--luft-rand); background:var(--grund,#F1F4F4); vertical-align:middle; } tr.gesamtzeile > td:first-child{border-top-left-radius:12px; border-bottom-left-radius:12px; padding-left:16px} tr.gesamtzeile > td:last-child{border-top-right-radius:12px; border-bottom-right-radius:12px; padding-right:16px} tr.gesamtzeile .gzwort{ display:block; font-size:17px; font-weight:700; color:var(--tinte); letter-spacing:.01em; } tr.gesamtzeile small{display:block; margin-top:3px; font-size:13px; color:var(--tinte2); font-weight:400} tr.gesamtzeile .ubb b{font-size:24px; font-weight:700; color:var(--tinte); font-variant-numeric:tabular-nums} @media (max-width:560px){ tr.gesamtzeile .gzwort{font-size:15px} tr.gesamtzeile .ubb b{font-size:17px} } table.ubtab tfoot td{border-bottom:none;padding-top:10px} /* Bezeichnung und Quelle stehen untereinander — sie brauchen Zeilenluft, seit beide anklickbare Felder sind (gemessen 0,3 px am 20.09.2026). */ span.ubbez,span.ubq{display:block;color:var(--tinte2);font-size:13px;font-weight:400;line-height:1.5;margin-top:6px} table.ubtab td.leer{color:var(--tinte2);border-bottom:none} form.ubform{display:grid;gap:10px 16px;margin:0 0 18px} @media (min-width:561px){form.ubform{grid-template-columns:repeat(2,1fr)}form.ubform button{grid-column:1/-1;justify-self:start} form.ubform .feldbreit{grid-column:1/-1}} /* EINE LINIE (20.09.2026). Christian: „Es verschieben sich Felder gegeneinander. Das ist nicht gut, wenn die nicht mehr in einer Ebene sind, nur weil etwas dann zweizeilig oben drüber ist. Das darf nicht passieren." Die Beschriftung reserviert deshalb immer die Höhe von Titel UND Hinweis und sitzt unten an; damit beginnt jedes Eingabefeld einer Rasterzeile auf derselben Linie — egal ob darüber eine oder zwei Zeilen stehen. */ @media (min-width:561px){ form.ubform > .feld > span{min-height:34px; justify-content:flex-end} } /* Der EINE Regler */ .ubregler{display:flex; flex-direction:column; gap:8px; margin:0 0 12px} .ubregler > label{font-size:12px; color:var(--tinte2)} .ubregler input[type=range]{width:100%; accent-color:var(--gut-tinte,#3C5A2A); height:26px; margin:0} /* BEFUND DES ABSTANDSPRUEFSTANDS BEI 390 px (20.09.2026): Prozentzahl und Euro-Satz lagen uebereinander, weil beide in einer Zeile ohne Luecke standen. Flex mit gap und Umbruch loest beides auf einmal. */ .ubreglerwert{margin:0; font-size:15px; color:var(--tinte); display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px} .ubreglerwert b{font-size:24px; font-weight:700} /* JE STUFE EIN REGLER (29.09.2026): Monat · Regler · Prozent · Euro — Zahlen rechtsbündig, tabellarische Ziffern, Griff 44 px hoch; bei 375 px bleibt es eine Zeile (Spalten 96 + 52 + 96, der Regler nimmt den Rest). */ div.ubstufen{display:grid; grid-template-columns:minmax(96px,150px) minmax(80px,1fr) 52px minmax(96px,112px); gap:0 12px; align-items:center; margin:12px 0 4px} /* Auf dem Telefon (gemessen bei 375 px: 411 px breit, seitliches Rollen) steht der Monat auf einer eigenen Zeile, darunter Regler · Prozent · Euro — nichts ragt hinaus. */ @media (max-width:480px){ /* 04.10.2026: 400 → 480 — bei 430 px (iPhone Pro Max) ragte der Euro-Betrag 18 px hinaus */ div.ubstufen{display:block} div.ubstufen > .ubstzeile{display:grid; grid-template-columns:1fr 48px minmax(84px,104px); grid-template-areas:"l p e" "r r r"; gap:0 10px; align-items:center; margin:6px 0 0} div.ubstufen .ubstzeile > label{grid-area:l; white-space:normal; overflow:visible; text-overflow:clip; min-width:0} /* „ab Dezember 2028“ wurde bei 390 px um 4 px gekürzt — jetzt bricht es um */ .ubstzeile > input[type=range]{grid-area:r} .ubstzeile > .ubstprozent{grid-area:p} .ubstzeile > .ubsteuro{grid-area:e} } .ubstzeile{display:contents} .ubstzeile > label{font-size:13px; color:var(--tinte2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .ubstzeile > input[type=range]{width:100%; min-width:0; accent-color:var(--gut-tinte,#3C5A2A); height:44px; margin:0} .ubstzeile > .ubstprozent, .ubstzeile > .ubsteuro{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap} .ubstzeile > .ubstprozent{font-size:15px; font-weight:700; color:var(--tinte)} .ubstzeile > .ubsteuro{font-size:13px; color:var(--tinte2)} /* Die Ferienzeile — am Datumsfeld und auf der Reisekarte dieselbe Form */ p.ubferien{display:flex; align-items:flex-start; gap:8px; margin:0 0 var(--luft-satz); font-size:13px; line-height:1.5} form.ubform > p.ubferien{grid-column:1/-1; margin:2px 0 6px} p.ubferien.f-drin{color:var(--gut-tinte,#3C5A2A)} p.ubferien.f-teils, p.ubferien.f-ausserhalb{color:var(--warte-tinte,#7A5A16); font-weight:600} p.ubferien.f-unbekannt{color:var(--tinte2)} p.ubferien svg{flex:none; margin-top:2px} /* Was vorbei ist, tritt zurück — sichtbar, aber nicht mehr im Vordergrund */ g.zsr.vorbei{opacity:.42} g.zsr.vorbei circle.zstreffer{opacity:1} li.ubreise.vorbei{opacity:.62} li.ubreise.vorbei:hover, li.ubreise.vorbei:focus-within{opacity:1} /* Systemarchitektur */ .archblock{margin:0 0 26px} .archblock h3{margin:0 0 4px; font-size:17px} dl.archliste{margin:10px 0 0; display:grid; grid-template-columns:minmax(120px,190px) 1fr; gap:1px 16px} dl.archliste dt{font-size:13px; color:var(--tinte2); padding:9px 0; border-top:1px solid var(--linie,#E8E4DC)} dl.archliste dd{margin:0; font-size:14.5px; padding:9px 0; border-top:1px solid var(--linie,#E8E4DC); display:flex; align-items:flex-start; gap:8px; line-height:1.45} dl.archliste dd svg{flex:none; margin-top:2px} dl.archliste dd.l-gut svg{color:var(--gut-tinte,#3C5A2A)} dl.archliste dd.l-warte{color:var(--warte-tinte,#7A5A16)} dl.archliste dd.l-schlecht{color:var(--schlecht-tinte,#8E3B2F); font-weight:600} p.archtun{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:12px 0 0} .archsatz{font-size:13px; color:var(--tinte2)} .archwann{display:block; font-size:12px; color:var(--tinte3); font-weight:400} @media (max-width:560px){dl.archliste{grid-template-columns:1fr; gap:0} dl.archliste dt{padding:9px 0 0; border-top:1px solid var(--linie,#E8E4DC)} dl.archliste dd{padding:2px 0 9px; border-top:0}} /* Der Regler für den Blick nach vorn — eine Zeile für sich, damit weder der Balken noch der Text springt, wenn der Monatsname die Länge wechselt (20.09.2026, Gesetz 40). */ .zsregler{display:grid; grid-template-columns:1fr; gap:3px; margin:2px 0 10px} .zsregler > label{font-size:12px; color:var(--tinte2)} .zsregler input[type=range]{accent-color:var(--gut-tinte,#3C5A2A); height:26px; margin:0; width:100%; display:block} .zsreglerwert{margin:0; font-size:13px; color:var(--tinte); min-height:20px; line-height:20px; font-variant-numeric:tabular-nums; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 9px} .zsreglerwert b{font-weight:700} .zsreglerwert span{color:var(--tinte2)} /* Der Störer am Zeitstrahl: die Bewertung, nie das Datum */ p.ubherkunft{margin:-2px 0 12px; font-size:12px; color:var(--tinte3)} /* Der zweite Kreis: bezahlt gegen offen */ .ubkasse.ubbezahlt{margin-top:10px} .ubkasse .kkteil.l-bezahlt{stroke:var(--gut-tinte,#3C5A2A)} .ubklegende i.kkbezahlt{background:var(--gut-tinte,#3C5A2A)} .ubklegende i.kkoffen{background:var(--linie2,#CFC8BA)} ul.ubzliste{list-style:none;margin:8px 0 14px;padding:0;display:grid;gap:1px} ul.ubzliste li{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:baseline; padding:8px 0;border-top:1px solid var(--linie,#E8E4DC)} ul.ubzliste li.ubzsumme{border-top:2px solid var(--linie,#E8E4DC);font-weight:600; grid-template-columns:1fr auto auto} .ubzwann{font-size:13px;color:var(--tinte3);font-variant-numeric:tabular-nums;min-width:78px} .ubzwas{font-size:14.5px} .ubzbetrag{font-variant-numeric:tabular-nums;font-weight:600} ul.ubzliste form{margin:0} ul.ubzliste button.loeschen{border:0;background:transparent;padding:4px;border-radius:7px;cursor:pointer;color:var(--tinte3)} ul.ubzliste button.loeschen:hover{background:var(--flaeche2);color:var(--schlecht-tinte,#8E3B2F)} g.zsstoerer rect{fill:var(--flaeche2,#F2EFE8); stroke:var(--linie,#E8E4DC)} /* Die Grundlinie wird im Skript gesetzt (y + 3,6) — dominant-baseline zusaetzlich waere eine zweite Verschiebung, und genau davon sass der Text unten statt mittig (20.09.2026). */ g.zsstoerer text{font-size:12.5px; font-weight:600; fill:var(--tinte2)} /* 29.09.2026: 10 → 12,5 (bei 834 px auf 0,95 verkleinert: 11,9 px) */ /* Die Flagge im Zeitstrahl — klein, aber eindeutig (20.09.2026). */ svg.zsflagge{overflow:visible} g.zsr.vorbei svg.zsflagge{opacity:.45} g.zsstoerer.s-warte rect{fill:#FBF3DE; stroke:#E6D2A0} g.zsstoerer.s-warte text{fill:var(--warte-tinte,#7A5A16)} g.zsstoerer.s-schlecht rect{fill:#FBEAE6; stroke:#EEC4BA} g.zsstoerer.s-schlecht text{fill:var(--schlecht-tinte,#8E3B2F)} g.zsstoerer.s-gut rect{fill:#EAF1E4; stroke:#C9DCBC} g.zsstoerer.s-gut text{fill:var(--gut-tinte,#3C5A2A)} /* Die Finanzierungskarte am Zeitstrahl */ .ubkettenbild{position:relative} circle.zstreffer{fill:transparent; cursor:pointer; outline:none} circle.zstreffer:focus-visible{fill:rgba(60,90,42,.10)} .zskarte{position:absolute; top:-8px; transform:translate(-50%,-100%); z-index:6; width:min(330px,86vw); background:var(--papier,#fff); border:1px solid var(--linie,#E8E4DC); border-radius:14px; box-shadow:0 12px 34px rgba(30,26,18,.16); padding:14px 16px; display:flex; gap:14px; align-items:flex-start; pointer-events:none} .zskarte[hidden]{display:none} .zskkreis{flex:none; width:74px; height:74px} .zskring{fill:none; stroke:var(--linie,#E8E4DC); stroke-width:11} .zskteil{fill:none; stroke-width:11; stroke-linecap:round; stroke:var(--gut-tinte,#3C5A2A)} .zskteil.l-luecke, .zskteil.l-knapp{stroke:var(--warte-tinte,#A8811F)} .zskteil.l-fern{stroke:var(--schlecht-tinte,#8E3B2F)} .zskteil.l-offen{stroke:var(--linie2,#CFC8BA)} .zskmitte{font-size:24px; font-weight:700; fill:var(--tinte,#221E17)} .zskinhalt{min-width:0; flex:1} .zsktitel{margin:0 0 8px; display:flex; flex-direction:column; gap:1px} .zsktitel b{font-size:16px; font-weight:700; line-height:1.25} .zsktitel span{font-size:12px; color:var(--tinte2)} dl.zskwerte{margin:0; display:grid; grid-template-columns:1fr auto; gap:3px 12px; font-size:13px} dl.zskwerte dt{color:var(--tinte2)} dl.zskwerte dd{margin:0; font-variant-numeric:tabular-nums; font-weight:600; text-align:right} p.zsksatz{margin:9px 0 0; font-size:12px; line-height:1.45; color:var(--tinte2)} @media (max-width:560px){.zskarte{width:min(300px,92vw); padding:12px}} /* 26.09.2026: Die Karte sitzt am Kreis (Oberkante per Skript) und darf über den Bildrahmen hinausragen; unter dem Kreis, wenn oben kein Platz ist. */ div.ubbild.ubkettenbild{overflow:visible} .zskarte.unten{transform:translate(-50%,0)} /* 26.09.2026: der leise Satz statt des zweiten Kreises in der Reisekarte */ p.ubangezahlt{display:flex; align-items:center; gap:6px; margin:10px 0 0; font-size:13px; color:var(--tinte3)} /* DER REISEKALENDER MIT DEN SCHULFERIEN (26.09.2026) - Aufbau in urlaub.php (Skript „DER REISEKALENDER“). Klappt als Fläche unter den Feldern auf, über die ganze Breite des Formulars; nichts schwebt über anderem Inhalt. */ input.ubkalfeld{cursor:pointer; caret-color:transparent} input.ubkalfeld.aktiv{border-color:var(--tinte); box-shadow:0 0 0 3px color-mix(in srgb, var(--tinte) 12%, transparent)} div.ubkal{grid-column:1/-1; background:var(--flaeche); border:1px solid var(--linie); border-radius:16px; padding:14px 16px 12px; box-shadow:0 1px 2px rgba(60,45,30,.06), 0 8px 24px rgba(60,45,30,.08)} div.ubkal[hidden]{display:none} .ubkalkopf{display:flex; align-items:center; gap:6px; margin:0 0 6px} .ubkalhinweis{flex:1 1 auto; margin:0; font-size:13px; font-weight:600; color:var(--tinte2)} button.ubkalpfeil{width:36px; height:36px; border:0; border-radius:10px; background:transparent; color:var(--tinte); font-size:24px; line-height:1; cursor:pointer} button.ubkalpfeil:hover{background:var(--grund)} .ubkalmonate{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px} @media (max-width:560px){ .ubkalmonate{grid-template-columns:minmax(0,1fr)} .ubkalmonat.ubkalzwei{display:none} } .ubkalmname{margin:0 0 6px; font-size:15px; font-weight:700; color:var(--tinte)} .ubkalgitter{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); row-gap:4px; column-gap:0} .ubkalwk{font-size:12px; font-weight:600; text-align:center; color:var(--tinte3); padding:0 0 4px} button.ubkaltag{position:relative; height:40px; border:0; background:transparent; padding:0; cursor:pointer; font:inherit; font-size:14.5px; font-variant-numeric:tabular-nums; color:var(--tinte); border-radius:0} button.ubkaltag.vorbei{color:var(--tinte3)} /* Ferien: ein durchgehendes Band, rund an Anfang und Ende. */ button.ubkaltag.ferien{background:color-mix(in srgb, var(--akzent) 16%, transparent)} button.ubkaltag.ferien.fanfang{border-top-left-radius:20px; border-bottom-left-radius:20px} button.ubkaltag.ferien.fende{border-top-right-radius:20px; border-bottom-right-radius:20px} /* Gewählter Zeitraum: dunkle Tönung über dem Band, Von und Bis als gefüllte Kreise. */ button.ubkaltag.drin{box-shadow:inset 0 0 0 40px color-mix(in srgb, var(--tinte) 10%, transparent)} button.ubkaltag.von, button.ubkaltag.bis{color:var(--flaeche); font-weight:700; z-index:1} button.ubkaltag.von::before, button.ubkaltag.bis::before{content:''; position:absolute; z-index:-1; left:50%; top:50%; width:36px; height:36px; margin:-18px 0 0 -18px; border-radius:50%; background:var(--tinte)} button.ubkaltag.heute:not(.von):not(.bis)::before{content:''; position:absolute; left:50%; top:50%; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--tinte3)} button.ubkaltag:hover:not(.von):not(.bis)::after{content:''; position:absolute; left:50%; top:50%; width:36px; height:36px; margin:-18px 0 0 -18px; border-radius:50%; background:color-mix(in srgb, var(--tinte) 8%, transparent)} button.ubkaltag:focus-visible{outline:2px solid var(--tinte); outline-offset:-2px; border-radius:10px} .ubkalfnamen{margin:8px 0 0; font-size:12px; line-height:1.45; color:var(--tinte2); min-height:17px} .ubkalfuss{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:12px 0 0; padding:12px 0 0; border-top:1px solid var(--linie)} .ubkallegende{display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--tinte2); margin-right:auto} .ubkallegende i{display:inline-block; width:22px; height:12px; border-radius:6px; background:color-mix(in srgb, var(--akzent) 16%, transparent)} .ubkalnaechte{font-size:13px; font-weight:600; color:var(--tinte); font-variant-numeric:tabular-nums} /* Die Formular-Regeln für Knöpfe (volle Zeile, Mindestbreite, grüne Fläche) gelten im Kalender nicht - gemessen: jeder Tag war sonst 168 px breit und lag in der ersten Spalte. */ div.ubkal button.ubkaltag, div.ubkal button.ubkalpfeil, div.ubkal button.ubkalmon, div.ubkal .ubkalfuss button{grid-column:auto; justify-self:stretch; width:auto; min-width:0; max-width:none; min-height:0; margin:0; box-sizing:border-box} div.ubkal .ubkalfuss button{height:36px; padding:0 14px; border:0; border-radius:10px; background:transparent; color:var(--tinte2); font:inherit; font-size:14.5px; font-weight:500; box-shadow:none; cursor:pointer} div.ubkal .ubkalfuss button:hover{background:var(--grund); color:var(--tinte)} div.ubkal .ubkalfuss button.ubkalfertig{color:var(--akzent); font-weight:700} button.ubkaltag.rvon{background-image:linear-gradient(to right, transparent 50%, color-mix(in srgb, var(--tinte) 10%, transparent) 50%)} button.ubkaltag.rbis{background-image:linear-gradient(to left, transparent 50%, color-mix(in srgb, var(--tinte) 10%, transparent) 50%)} /* Wunschmonat: zwölf Monate eines Jahres. */ .ubkalmgitter{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:6px} @media (max-width:560px){ .ubkalmgitter{grid-template-columns:repeat(4, minmax(0,1fr))} } button.ubkalmon{height:40px; border:0; border-radius:12px; background:var(--grund); color:var(--tinte); font:inherit; font-size:14.5px; cursor:pointer} button.ubkalmon.ferien{background:color-mix(in srgb, var(--akzent) 16%, transparent)} button.ubkalmon.von{background:var(--tinte); color:var(--flaeche); font-weight:700} button.ubkalmon:hover:not(.von){box-shadow:inset 0 0 0 1.5px var(--tinte3)} /* LÖSCHEN IST DER PAPIERKORB, MITTIG ZUR ZEILE (26.09.2026). Chris: „dass die Löschfunktion mittig anordnet … ist das überhaupt das offizielle Symbol für Löschen?“ Nein: Das X heißt bei Apple „schließen/leeren“, eine Zeile löschen ist der Papierkorb (SF Symbol trash), rot beim Zeigen. GEMESSEN: Der Knopf war 24 px breit, aber 44 px hoch (Mindesthöhe der Knopffamilie), das X saß fest 11 px unter seiner Oberkante - also oben statt mittig. Jetzt 30×30 px wie die Felder der Zeile, Symbol per Maske exakt in der Mitte. */ .buweg{--knopf-breit:30px; width:30px; height:30px; min-height:30px; max-height:30px; border-radius:9px; align-self:center; margin:7px 0} /* 30 + 2×7 = 44 px: die Zeilenhöhe (51 px) bleibt wie bisher, die Liste springt nicht */ /* Trefferfläche 44×44 px (Apple), unsichtbar um den 30-px-Knopf */ .buweg::after{content:""; position:absolute; left:-7px; top:-7px; width:44px; height:44px; background:none; transform:none; border-radius:12px} .buweg::before{left:50%; top:50%; width:17px; height:17px; margin:-8.5px 0 0 -8.5px; border-radius:0; transform:none; 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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5h15'/%3E%3Cpath d='M9.5 6.5V5a1.5 1.5 0 0 1 1.5-1.5h2A1.5 1.5 0 0 1 14.5 5v1.5'/%3E%3Cpath d='M6.5 6.5l.9 12.1a1.8 1.8 0 0 0 1.8 1.7h5.6a1.8 1.8 0 0 0 1.8-1.7l.9-12.1'/%3E%3Cpath d='M10.2 10.5v6M13.8 10.5v6'/%3E%3C/svg%3E") center/17px 17px 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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5h15'/%3E%3Cpath d='M9.5 6.5V5a1.5 1.5 0 0 1 1.5-1.5h2A1.5 1.5 0 0 1 14.5 5v1.5'/%3E%3Cpath d='M6.5 6.5l.9 12.1a1.8 1.8 0 0 0 1.8 1.7h5.6a1.8 1.8 0 0 0 1.8-1.7l.9-12.1'/%3E%3Cpath d='M10.2 10.5v6M13.8 10.5v6'/%3E%3C/svg%3E") center/17px 17px no-repeat} /* DAS DATUMSFELD UMFASST DAS GANZE DATUM (26.09.2026). Gemessen: Die graue Feldfläche lag nur auf dem Eingabefeld für den Tag (22 px, „30“), „.9.“ stand daneben außerhalb. Die Fläche gehört der ganzen Hülle „30.9.“ - das Eingabefeld darin bleibt durchsichtig. */ li.bu .butaghuelle input.butag{min-height:0; padding-top:0; padding-bottom:0; padding-left:0; padding-right:0; border:0} li.bu .butaghuelle{box-sizing:border-box; height:30px; padding-right:5px; padding-left:3px; border:1px solid transparent; border-radius:7px; transition:background .13s ease, border-color .13s ease} li.bu:hover .butaghuelle:not(:focus-within){background:var(--flaeche2)} li.bu .butaghuelle:focus-within{background:var(--flaeche); border-color:var(--akzent); box-shadow:0 0 0 3px color-mix(in srgb, var(--akzent) 16%, transparent)} li.bu .butaghuelle input.butag, li.bu:hover .butaghuelle input.butag:not(:focus), li.bu .butaghuelle input.butag:focus{background:transparent; border-color:transparent; box-shadow:none} /* DIE MENÜLEISTE SO BREIT WIE KOPF UND MODULE (26.09.2026). Chris: „aus Layout- und Designgründen muss doch das Menü bis rechts rausgehen, genauso breit wie der Header.“ Gemessen: Kopf und Module 1216 px, der Kasten mit Konten und „Jetzt aktualisieren“ nur 1169 px (er nahm nur so viel Platz, wie sein Inhalt brauchte). */ .kopf > .kopfkasten{flex:1 1 auto} /* DIE NÄCHSTEN ZWÖLF MONATE (26.09.2026). Gemessen: 0 px zwischen Titelzeile und höchstem Balken - jetzt 16 px wie überall. Der Monat mit Betrag lief als eine Zeile („Okt −48,75 €“) in den Nachbarmonat, weil Name, Betrag und Stand nur zufällig umbrachen - jetzt stehen sie in jeder Spalte gleich untereinander. */ .jahrkopf + .jahrband{margin-top:16px} .monatswahl .ms, .monatswahl .mstand{display:block; white-space:nowrap} /* Der Hinweis beim Überfahren: Titel, darunter Beschriftung links und Betrag rechts (Gesetz 50). */ .zeigen .wink{white-space:normal} .zeigen .wink .wtitel{display:block; font-weight:600; margin:0 0 3px} .zeigen .wink .wzeile{display:flex; justify-content:space-between; align-items:baseline; gap:14px} .zeigen .wink .wzeile b{font-weight:600; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums} /* DER HINWEIS VERDECKT KEINEN BALKEN (29.09.2026, Chris: „Verdecke bei Hover nicht die Balken mit dem Datenfeld.“). Gemessen: Der Hinweis (93 px hoch) stand 7 px unter der Oberkante eines 150 px hohen Bildes — die Balken beginnen 43 px darunter. Innerhalb des Bandes ist kein Platz, und das Band schneidet alles ab, was darüber hinausragt (es rollt waagrecht). Jetzt: Mit Zeiger wird der Hinweis in der Karte gezeigt, mit seiner Unterkante 8 px ÜBER dem höchsten Balken aller Monate — über Titel und Legende, nie über einem Balken. Das Band behält seinen stillen Hinweis nur noch für Vorlesehilfen. */ section.jahr{position:relative} @media (hover:hover){ section.jahr .zeigen .band:hover + .wink{opacity:0} } .winkfrei{position:absolute; z-index:6; width:min(264px, calc(100% - 16px)); padding:8px 11px; border-radius:11px; background:var(--flaeche); border:1px solid var(--linie); box-shadow:0 8px 22px rgba(15,30,31,.16); font-size:12px; line-height:1.5; color:var(--tinte); font-variant-numeric:tabular-nums; text-align:left; opacity:0; pointer-events:none; transition:opacity .11s ease .04s} .winkfrei.an{opacity:1} /* HEUTE IM TAGESVERLAUF (29.09.2026, Gestalt-Wächter @375 px): Die Zeile „Di. 29. September heute“ lief nicht um und schob den Kontostand 47 px über die Zahlenkante hinaus. Das Datum darf jetzt umbrechen — „heute“ rückt auf dem Telefon in die zweite Zeile, der Stand bleibt an der Kante. */ ol.tage > li .zeile .datum{white-space:normal; min-width:0; flex:1 1 auto} .winkfrei .wtitel{display:block; font-weight:600; margin:0 0 3px} .winkfrei .wzeile{display:flex; justify-content:space-between; align-items:baseline; gap:14px} .winkfrei .wzeile b{font-weight:600; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums} @media (hover:none){ .winkfrei{display:none} } form.ubweg{margin-top:4px} section.ubneu{border:1px dashed var(--linie);border-radius:16px;padding:16px 18px} section.ubneu h3{margin:0 0 4px;font-size:17px} /* ================================================================== * * TEXTE ÄNDERN — so zurückhaltend wie möglich (19.09.2026) * Im Lesemodus ist nichts zu sehen. Erst der Schalter macht jeden * änderbaren Satz kenntlich, und auch dann nur durch eine feine Linie * darunter — kein Kasten, kein Stift, kein Rauschen. * ================================================================== */ section.txkopf p{margin:0 0 10px;color:var(--tinte2);line-height:1.6} section.txleer{background:var(--gut-flaeche,#E4F1EA);border-radius:14px;padding:14px 16px;color:var(--gut-tinte,#215C42)} section.txleer p{margin:0;display:flex;gap:9px;align-items:center;font-weight:600} ul.txliste{list-style:none;padding:0;margin:0;display:grid;gap:12px} ul.txliste li{background:var(--flaeche);border:1px solid var(--linie);border-radius:14px;padding:14px 16px} p.txneu{margin:0 0 6px;font-weight:600;line-height:1.55} p.txur{margin:0 0 6px;color:var(--tinte2);font-size:13px;line-height:1.5} p.txwer{margin:0 0 8px;color:var(--tinte2);font-size:12px} span.tx{border-radius:3px;transition:background .12s,box-shadow .12s} /* GEMESSEN 22.09.2026, Christian am Bildschirmfoto vom iPad: „Der Button Texte aendern hat auch eines, ein eigenes Theme. Das passt auch nicht zu dem bestehenden Theme. Es darf nicht einfach irgendein zweites Gruen existieren. Es gibt ein einziges Gruen und das muss durchgetrieben werden." URSACHE: "--marke" wurde hier verwendet, aber nirgends in :root definiert - jeder Aufruf fiel auf den fest verdrahteten Nothbehelf #2C7A57 zurueck, ein Gruenton ohne jede Verbindung zu "--akzent"/"--pines" (dem einen CI-Gruen, das ueberall sonst gilt, hell wie dunkel). Damit war der Text-Aendern-Knopf der einzige Ort mit einem zweiten, unkontrollierten Gruen. Auf "--akzent" umgestellt - dasselbe Token, das jeder andere Knopf und jeder Haken traegt. */ span.tx:hover,span.tx:focus{background:color-mix(in srgb,var(--akzent) 10%,transparent);outline:none;cursor:text} span.tx{box-shadow:inset 0 -1px 0 0 color-mix(in srgb,var(--akzent) 34%,transparent)} span.tx.tx-eigen{box-shadow:inset 0 -2px 0 0 color-mix(in srgb,var(--akzent) 62%,transparent)} span.tx[contenteditable="true"]{background:var(--flaeche,#fff);box-shadow:0 0 0 2px color-mix(in srgb,var(--akzent) 45%,transparent);padding:1px 3px;margin:-1px -3px} span.tx.tx-fehler{box-shadow:0 0 0 2px color-mix(in srgb,var(--schlecht-tinte,#8E3225) 55%,transparent)} details.ubbsform{margin:12px 0 0;border-top:1px solid var(--linie);padding-top:10px} details.ubbsform>summary{cursor:pointer;font-weight:600;font-size:14.5px} details.ubbsform form{margin-top:12px} div.ubbauspar{margin:14px 0 0;padding:14px 16px;border-radius:14px;background:var(--grund,#F1F4F4);border:1px solid var(--linie)} div.ubbauspar.annahme{background:var(--warte-flaeche,#FBF2DF);border-color:var(--warte-linie,#EBD9AE)} div.ubbauspar h3{margin:0 0 6px;font-size:16px;display:flex;gap:8px;align-items:center} div.ubbauspar.annahme h3{color:var(--warte-tinte,#7A5A16)} ol.ubrechnung{margin:8px 0 0;padding-left:20px;display:grid;gap:5px;font-size:14.5px;line-height:1.5} ol.ubrechnung li{color:var(--tinte)} /* DER WAECHTER (19.09.2026) — Zustand als Satz mit Zeichen, Summe oben. */ section.wsumme{display:flex;gap:12px;align-items:flex-start;border-radius:16px;padding:16px 18px;margin:0 0 18px;border:1px solid transparent} section.wsumme p{margin:0;font-weight:600;line-height:1.5} section.wsumme.gut{background:var(--gut-flaeche,#E4F1EA);border-color:var(--gut-linie,#BFDDCB);color:var(--gut-tinte,#215C42)} section.wsumme.wartet{background:var(--warte-flaeche,#FBF2DF);border-color:var(--warte-linie,#EBD9AE);color:var(--warte-tinte,#7A5A16)} section.wsumme.mangel{background:var(--schlecht-flaeche,#F7E6E3);border-color:var(--schlecht-linie,#E6C3BC);color:var(--schlecht-tinte,#8E3225)} section.wsumme .wzeichen{flex:0 0 auto;line-height:0;margin-top:2px} /* Normale Linie statt 4-px-Balken (29.09.2026, Vorhaben 118): wie bei den Reisekarten („normale Linie“). Den Zustand trägt das farbige Urteil oben rechts und das Zeichen — der Balken sagte dasselbe ein zweites Mal. */ section.wpruef{background:var(--flaeche);border:1px solid var(--linie);border-radius:16px;padding:18px 20px;margin:0 0 12px} section.wpruef h2{font-size:16px;margin:0 0 6px;display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap} section.wpruef .wurteil{font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;white-space:nowrap} section.wpruef.wartet .wurteil{color:var(--warte-tinte,#7A5A16)} section.wpruef p.wsatz{margin:0 0 12px;color:var(--tinte2)} dl.wliste{display:grid;grid-template-columns:minmax(160px,auto) 1fr;gap:6px 18px;margin:0;font-size:14.5px} ul.wgitter{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:12px} li.wkarte{background:var(--flaeche);border:1px solid var(--linie);border-radius:16px;padding:16px 18px} li.wkarte h2{font-size:16px;margin:0 0 6px;display:flex;gap:9px;align-items:baseline;flex-wrap:wrap} li.wkarte h2 .wzeichen{line-height:0;align-self:center} li.wkarte h2 .wtitel{flex:1 1 auto} li.wkarte .wurteil{font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;white-space:nowrap} li.wkarte.gut .wurteil{color:var(--gut-tinte,#215C42)} li.wkarte.wartet .wurteil{color:var(--warte-tinte,#7A5A16)} li.wkarte.mangel .wurteil{color:var(--schlecht-tinte,#8E3225)} li.wkarte p.wbewacht{margin:0 0 8px;color:var(--tinte2);font-size:14.5px} li.wkarte p.wstand{margin:0 0 10px;font-weight:600;line-height:1.5} dl.wzahlen{display:flex;flex-wrap:wrap;gap:4px 22px;margin:0;font-size:13px;color:var(--tinte2)} dl.wzahlen dt{font-weight:400} dl.wzahlen dt::after{content:":"} dl.wzahlen dd{margin:0 0 0 -16px;font-weight:600;color:var(--tinte)} li.wkarte p.wwohin{margin:10px 0 0;font-size:14.5px} section.wkopf2{margin:28px 0 12px} section.wkopf2 h2{font-size:17px;margin:0 0 4px} section.wkopf2 p{margin:0;color:var(--tinte2)} section.wpruef.gut{border-left-color:var(--gut-tinte,#215C42)} section.wpruef.mangel{border-left-color:var(--schlecht-tinte,#8E3225)} section.wpruef.gut .wurteil{color:var(--gut-tinte,#215C42)} section.wpruef.mangel .wurteil{color:var(--schlecht-tinte,#8E3225)} dl.wliste dt{color:var(--tinte2)} dl.wliste dd{margin:0;word-break:break-word} @media (max-width:560px){dl.wliste{grid-template-columns:1fr;gap:0}dl.wliste dt{margin-top:10px}} section.wtun{background:var(--flaeche);border:1px solid var(--linie);border-radius:16px;padding:18px 20px;margin:18px 0 0} section.wtun h2{font-size:16px;margin:0 0 6px} section.wtun p{margin:0 0 14px;color:var(--tinte2)} /* GESTALTWAECHTER — DIE MELDUNGEN VOM 27.09.2026 ABGEARBEITET (Fassung zz80). Gemessen mit dem Waechter selbst, auf 36 Seiten bei 440, 834 und 1194 px, Beruehrbildschirm nachgestellt: vorher 32 Befundarten, danach 11. */ /* Mietstufen (Steuer › Ines): Die Zeile mit „fest bis …“ schob „Entfernen“ 66 px aus dem Bild — die Seite lief seitlich ueber. */ html body span.mtstufe{flex-wrap:wrap; row-gap:6px; max-width:100%} /* Mitteilungen: Die Pfeile erbten die allgemeine Knopfbreite 168 px — die Karte lief 191 px ueber. Jetzt 44 x 44. */ html body .mtbspfeile button{--knopf-min:0; min-width:44px; width:44px; height:44px; min-height:44px; padding:0} html body .mtbskopf{flex-wrap:wrap} /* Zu wenig Luft zwischen Karten (10 px, Mass ist 12). */ html body :is(.scaliste, figure.eufluss .euquellen, .mtbsliste){gap:12px} @media (pointer:coarse){ /* Zuordnung: Auswahl, Vorschlag und „Alle übernehmen“ waren 34 px hoch. */ html body :is(form.zzeile select, select.zselbst, button.zja, button.zalle, a.mtzutest){min-height:44px} html body input[type=color]{min-width:44px; min-height:44px} /* Kleine Schalter, Pfeile und Verweise: Bild bleibt, Tippflaeche waechst unsichtbar auf 44 x 44. */ html body :is(span.zfilter a, button.mkz, button.bmfeld, label.mtbsan, small > a[href^="?beleg="], label.mthaken, div.mtmuster label, nav.ggsicht.burhy button, li.bu .zutun, p.sicherungshinweis a){position:relative} html body :is(span.zfilter a, button.mkz, button.bmfeld, label.mtbsan, small > a[href^="?beleg="], label.mthaken, div.mtmuster label, nav.ggsicht.burhy button, li.bu .zutun, p.sicherungshinweis a)::after{content:''; position:absolute; left:50%; top:50%; width:max(100%, 44px); height:max(100%, 44px); transform:translate(-50%, -50%)} } /* TREFFERFLAECHEN 44 PX — DER REST (27.09.2026). Apple: jede Beruehrflaeche mindestens 44 x 44. Gemessen bei 375 px mit Beruehrbildschirm auf allen zwoelf Seiten, Zierflaechen (::before/::after) mitgerechnet: 24 Bauteile lagen darunter (z. B. Abrufknopf 168x32, Reiter 98x32, Menue schliessen 38x38). Zwei Wege, dieselben wie schon im Haus: 1. Knoepfe, die Platz haben, wachsen sichtbar auf 44 px Hoehe. 2. Reiter, Pfeile, Auswahlchips und Textverweise behalten ihr Bild; nur die unsichtbare Flaeche darueber waechst auf 44 x 44 (Muster wie details.info) — nichts verschiebt sich, die Ruhe bleibt. "html body" vorn, weil spaetere Seitenregeln die Hoehe sonst wieder kleiner setzen (gemessen: .knopfleise 38). Nachgemessen vor der Auslieferung: 0 Bauteile unter 44, kein Ueberlauf bei 375 und 834. */ @media (pointer:coarse){ html body :is(button.bkknopf, .knopfleise, div.starchivliste a, li.teils > a, a.vsaptel){min-height:44px} /* 29.09.2026 (Fassung D, Rest): zwölf Knöpfe mit 30 bis 40 px, die nicht in der Liste standen — gemessen im Debugging vom 29.09. */ html body :is(form.dljahr button, .mtbspfeile button, p.bmordnung button, form.ckfristform button, form.stscanform button, form.vmfrage button, form.stwarteform .wegfrage button, form.bmsammel button, button.kwaendern, .neufass button, .kwfragetasten button){min-height:44px; min-width:44px} html body form.stjahrplus button{min-width:44px} html body :is(button.bkknopf:not(.buneu), label.vsmitk, label.ktmail, a.mblatt, a.vsapmail, .vsimmoliste a, p.nlfuss a, p.nlhwege a, nav.ggsicht a, nav.umschalter a){position:relative} html body :is(button.bkknopf:not(.buneu), label.vsmitk, label.ktmail, button.mnzu, a.mblatt, a.vsapmail, .vsimmoliste a, p.nlfuss a, p.nlhwege a, nav.ggsicht a, nav.umschalter a)::after{content:''; position:absolute; left:50%; top:50%; width:max(100%, 44px); height:max(100%, 44px); transform:translate(-50%, -50%)} } /* REISEKACHELN IN EINER EBENE (27.09.2026, Chris: „die müssen natürlich in einer Ebene stehen“). GEMESSEN: Die Regel fuer fuenf Spalten stand spaeter im Stylesheet als die fuer zwei Spalten und schlug sie — bei 700 px Behaelterbreite (iPad hochkant) standen vier Kacheln oben und „Anzahlungen“ allein darunter, daneben eine leere Flaeche; Namen wie „Mecklenburgische Seenplatte“ brachen mitten im Wort. Jetzt: ab 761 px fuenf nebeneinander, darunter zwei je Zeile (die letzte ungerade ueber die ganze Breite), unter 341 px eine; Woerter werden deutsch getrennt, nicht zerhackt. */ @container (max-width:760px){ html body nav.ubkacheln{grid-template-columns:repeat(2, minmax(0,1fr))} html body nav.ubkacheln > a.ubkachel:last-child:nth-child(odd){grid-column:1 / -1} } @container (max-width:340px){ html body nav.ubkacheln{grid-template-columns:minmax(0,1fr)} html body nav.ubkacheln > a.ubkachel:last-child:nth-child(odd){grid-column:auto} } html body span.ubkwert{overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto} /* Zeitstrahl-Karte: der fehlende Teil setzt stumpf an den gesparten an (27.09.2026). */ .zskteil.zskfehlt{stroke-linecap:butt} /* SMARTPHONE ZUERST (27.09.2026). Chris: „Die Smartphone-Ansicht ist mit die wichtigste Ansicht … elementar wichtig, dass das responsive Design dieser gesamten Finanzplanung optimal auf allen Auflösungsstufen funktioniert.“ Reisekacheln auf dem Telefon: untereinander wie eine Einstellungsliste — Zeichen links, Name und Wert rechts, eine Zeile je Kachel statt einer hohen Karte (gemessen: 501 px -> 331 px, nichts abgeschnitten, kein Wort zerhackt). */ @container (max-width:340px){ html body nav.ubkacheln > a.ubkachel{display:grid; grid-template-columns:22px minmax(0,1fr); column-gap:14px; row-gap:2px; align-items:center; padding:12px 16px; min-height:56px} html body nav.ubkacheln > a.ubkachel > svg.ikonkachel{grid-row:1 / span 2; grid-column:1; align-self:center} html body nav.ubkacheln > a.ubkachel > .ubkname{grid-column:2} html body nav.ubkacheln > a.ubkachel > .ubkwert{grid-column:2} } /* Umschalter „Stationär / Rundreise“: beide Hälften gleich breit. Vorher erbten die Knöpfe 168 px Mindest- und 340 px Höchstbreite — auf dem iPhone SE lief der aktive 10 px über den Rand, auf dem großen iPad blieb eine Lücke daneben. */ html body form.rtwahl button{--knopf-min:0; --knopf-max:none; min-width:0; max-width:none; width:100%} /* Route: ein Ort mit mehreren Etappen als Pille „3 · 11“; Etappenkarten mit 12 px Luft (27.09.2026). */ svg.rtskizze g.rtpunkt rect{fill:var(--flaeche); stroke:var(--akzent, #4f7a28); stroke-width:3} html body ol.rtetappen{gap:12px} /* STEUER AUF DEM TELEFON (27.09.2026, Chris am iPhone: „völlig daneben … nicht responsiv … für diese Auflösung optimieren“). GEMESSEN bei 430 px: Der Umschalter-Block lief als Spalte — der Brief (Mitteilungszentrale) stand allein oben links, „Archiv“ schwebte rechts über dem Jahr, das Jahr klebte rechts unten, links 180 px Leere. Jetzt zwei klare Zeilen: oben die Personen ueber die ganze Breite, darunter Jahr und Archiv links, der Brief rechts — alles 54 px hoch. */ @media (max-width:560px){ html body nav.stwahl{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"pers pers" "jahre post"; gap:12px; align-items:center} html body nav.stwahl > .stpers{grid-area:pers; margin:0} html body nav.stwahl > .stjahre{grid-area:jahre; display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:flex-start; gap:8px; width:auto; min-width:0; margin:0} html body nav.stwahl > .stjahre > .stjahr{order:1; width:auto; min-width:0; margin:0} html body nav.stwahl > .stjahre > .starchiv{order:2; margin:0} html body nav.stwahl > a.stpost{grid-area:post; margin:0; width:54px; height:54px; min-width:54px} } /* Personenwahl: auf dem kleinsten iPhone wurde „Alle Belege“ auf 35 px gedrueckt. Die Mindestbreite gilt nur fuer die Bild-Knoepfe — der aktive mit Namen behaelt seine Breite (zz88 hatte ihn mitgedrueckt, „Promedia Solutions“ lief ueber). */ html body .umschalter.stpers > a:not(.aktiv){min-width:44px} html body .umschalter.stpers > a.aktiv{flex:0 1 auto; min-width:0} html body .umschalter.stpers > a.aktiv .pname{min-width:0; overflow:hidden; text-overflow:ellipsis} /* BELEGE AUF DEM TELEFON (27.09.2026, Chris: „wie verstört das hier ankommt … Es muss auf dem Smartphone sich gut anfühlen“). GEMESSEN bei 430 px mit vier echten Rechnungen: die Seite war 751 px breit. Ursache 1 (ueberall): Ein Auswahlfeld ist so breit wie seine laengste Option — „Gewerbe — Rechnung an Kunden: …“ = 618 px. Ab jetzt nie breiter als sein Platz. Ursache 2: Die Hochladeliste ist eine 640-px-Tabelle. Auf dem Telefon wird jede Zeile eine Karte: Zeichen, Bezeichnung und × oben, Kategorie darunter, Datum und Betrag nebeneinander. Ursache 3: In der Belegliste durfte Text nicht umbrechen — „Betriebseinnahme“ und „gelesen: …“ waren rechts abgeschnitten, in der Summenzeile lag der Betrag ueber dem Text. */ html body main select, html body main input:not([type=checkbox]):not([type=radio]){max-width:100%} html body main label > select{min-width:0} @media (max-width:560px){ html body .bmvorgabe{display:grid; grid-template-columns:minmax(0,1fr); gap:12px} html body .bmvorgabe > label{display:grid; gap:6px; min-width:0; width:100%} html body .bmvorgabe select{width:100%} html body table.bmwarte, html body table.bmwarte tbody{display:block; width:100%; min-width:0} html body table.bmwarte thead{display:none} html body table.bmwarte tr{display:grid; grid-template-columns:44px minmax(0,1fr) minmax(0,1fr) 44px; grid-template-areas:"art bez bez weg" "kat kat kat kat" "datum datum betrag betrag"; gap:8px 10px; align-items:center; padding:14px 0; border-bottom:1px solid var(--linie)} html body table.bmwarte td{display:block; padding:0; min-width:0; width:auto; border:0} html body table.bmwarte td.bmzart{grid-area:art} html body table.bmwarte td.bmzbez{grid-area:bez} html body table.bmwarte td.bmzkatz{grid-area:kat} html body table.bmwarte td:has(> .bmzdatum){grid-area:datum} html body table.bmwarte td:has(> .bmzbetrag){grid-area:betrag} html body table.bmwarte td.bmgroesse{display:none} html body table.bmwarte td.bmzstand{grid-area:weg; justify-self:end} html body table.bmwarte :is(input, select){width:100%} html body .tabellenrolle:has(> table.bmwarte){overflow:visible} html body table.stbelegliste td:not(.z):not(.stdatum), html body table.stbelegliste td:not(.z):not(.stdatum) *{white-space:normal} html body table.stbelegliste td:not(.z){min-width:0; overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto} html body table.stbelegliste tr > td:first-child{flex:1 1 auto} } /* Personenwahl in einer Zeile (27.09.2026): Sie brach auf dem kleinsten iPhone in zwei Zeilen um. Jetzt nie umbrechen; unter 361 px zeigt der aktive Knopf nur den Namen, ohne Bild — so passt auch „Promedia Solutions“ ohne Abschneiden. */ html body .umschalter.stpers{flex-wrap:nowrap} @media (max-width:360px){ html body .umschalter.stpers > a.aktiv > img{display:none} html body .umschalter.stpers > a.aktiv{padding-left:9px; padding-right:9px} } /* ========================================================================== NIE SEITLICH WISCHEN AUF DEM TELEFON (27.09.2026, zz91) Chris: „auf dem Smartphone sollte es dann untereinander sein und … nicht seitlich scrollen, das sollte nie der Fall sein an einem Smartphone. Beim iPad ist das in Ordnung, aber nicht auf dem Smartphone.“ GEMESSEN vorher auf allen 36 Seiten bei 430 und 320 px: seitlich rollten die Zwölf-Monats-Leiste, die Monatstabelle, die EÜR-Tabellen, die Monatsleiste im Haushalt, die Tilgungspläne und weitere Grafiken. Telefon heißt: schmaler als 600 px, oder quer gehalten (Finger und kaum Höhe). Das iPad fällt nicht darunter. 1. Eine Tabelle, die nicht in die Breite passt, wird zu Karten — gemessen im Skript unten, nicht geraten: Tabellen, die passen, bleiben Tabellen. Jede Zelle trägt ihre Spaltenüberschrift links. 2. Die Zwölf-Monats-Leiste und die Monatsleiste im Haushalt stehen als Zeilen untereinander, die Balken liegen waagrecht — dieselbe Skala, nur gedreht. ========================================================================== */ .jahrband .mbalken{display:none} @media (max-width:560px), (pointer:coarse) and (max-height:480px){ html body table.tkarten, html body table.tkarten > tbody, html body table.tkarten > tfoot{display:block; width:100%; min-width:0; max-width:100%} html body table.tkarten > thead{display:none} html body table.tkarten tr:not([hidden]){display:block; background:var(--flaeche); border:1px solid var(--linie); border-radius:14px; padding:2px 14px; margin:0 0 10px} html body table.tkarten > tfoot > tr:not([hidden]){background:var(--flaeche2)} html body table.tkarten tr > :is(td,th):not([hidden]){display:flex; justify-content:space-between; align-items:baseline; gap:14px; width:auto; min-width:0; max-width:none; height:auto; padding:9px 0; border:0; background:none; text-align:right; white-space:normal; overflow-wrap:anywhere; position:static} html body table.tkarten tr > :is(td,th) + :is(td,th):not([hidden]){border-top:1px solid var(--linie)} html body table.tkarten tr > :is(td,th)::before{content:attr(data-k); flex:0 1 auto; text-align:left; color:var(--tinte3); font:400 13px/1.35 var(--schrift); letter-spacing:0; text-transform:none; white-space:normal} html body table.tkarten tr > :is(td,th)[data-k=""]::before{content:none} html body table.tkarten tr > :is(td,th)[data-k=""]{justify-content:flex-end} html body table.tkarten tr > :is(td,th).tkleer{display:none} html body table.tkarten tr > :is(td,th)[data-k=""] > .tkwert{display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:8px} html body table.tkarten tr > :is(td,th) > .tkwert{min-width:0; text-align:right} html body table.tkarten tr > :is(td,th).tklang{display:block; text-align:left} html body table.tkarten tr > :is(td,th).tklang::before{display:block; margin:0 0 2px} html body table.tkarten tr > :is(td,th).tklang > .tkwert{display:block; text-align:left} html body table.tkarten tr > :is(td,th).tktitel{display:block; text-align:left; font-weight:600; color:var(--tinte); font-size:15px; padding:12px 0 9px; border-top:0} html body table.tkarten tr > :is(td,th).tktitel > .tkwert{text-align:left} html body table.tkarten tr > :is(td,th).tktitel::before{content:none} html body table.tkarten tr > :is(td,th).tktitel.tkmitk::before{content:attr(data-k) '\00a0'; display:inline; font-size:15px; font-weight:500} html body table.tkarten tr > :is(td,th).tktitel + :is(td,th):not([hidden]){border-top:1px solid var(--linie)} /* Zwei Spalten statt einer langen Liste: jede Angabe klein beschriftet über ihrem Wert — eine Karte ist so etwa halb so hoch, und Zahlen, die zusammengehören, stehen nebeneinander. Die Grundlage steht schon unter dem Titel. */ html body table.tkarten tr:not(.tkgruppe):not(.tkform):not([hidden]){display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px; padding:0 14px 6px} html body table.tkarten tr:not(.tkgruppe):not(.tkform) > :is(td,th):not([hidden]){display:block; text-align:left; padding:8px 0 4px; border-top:0} html body table.tkarten tr:not(.tkgruppe):not(.tkform) > :is(td,th)::before{display:block; margin:0 0 1px; font-size:12px} html body table.tkarten tr:not(.tkgruppe):not(.tkform) > :is(td,th) > .tkwert{display:block; text-align:left; font-variant-numeric:tabular-nums} html body table.tkarten tr:not(.tkgruppe):not(.tkform) > :is(td,th).tktitel{grid-column:1 / -1; padding:12px 0 9px; margin-bottom:4px; border-bottom:1px solid var(--linie)} html body table.tkarten tr:not(.tkgruppe):not(.tkform) > :is(td,th).tktitel.tkmitk::before{display:inline; font-size:15px} html body table.tkarten tr:not(.tkgruppe):not(.tkform) > :is(td,th).tklang{grid-column:1 / -1} html body table.tkarten tr:not(.tkgruppe):not(.tkform) > :is(td,th)[data-k=""]{grid-column:1 / -1; padding:6px 0 8px} html body table.tkarten tr:not(.tkgruppe):not(.tkform) > :is(td,th)[data-k=""] > .tkwert{display:flex; justify-content:flex-end} /* Die EÜR: Die Bezeichnung ist der Titel der Karte, darunter klein Zeile und Kennziffer, dann 2026 neben 2025 — so liest sie sich wie das Formular. */ html body table.gwtabelle.tkarten:not(.gwrechnungen):not(.gwanlagen) tr:not(.tkgruppe):not(.tkform) > td:nth-child(3):not([hidden]){grid-row:1; grid-column:1 / -1; padding:12px 0 2px; font-weight:600; font-size:15px; color:var(--tinte)} html body table.gwtabelle.tkarten:not(.gwrechnungen):not(.gwanlagen) tr:not(.tkgruppe):not(.tkform) > td:nth-child(3)::before{content:none} html body table.gwtabelle.tkarten:not(.gwrechnungen):not(.gwanlagen) tr:not(.tkgruppe):not(.tkform) > td:nth-child(1):not([hidden]){grid-row:2; grid-column:1; padding:0 0 8px; margin:0; border-bottom:0; font-size:13px; font-weight:400; color:var(--tinte3)} html body table.gwtabelle.tkarten:not(.gwrechnungen):not(.gwanlagen) tr:not(.tkgruppe):not(.tkform) > td:nth-child(1)::before{display:inline; font-size:13px; font-weight:400} html body table.gwtabelle.tkarten:not(.gwrechnungen):not(.gwanlagen) tr:not(.tkgruppe):not(.tkform) > td:nth-child(1) > .tkwert{display:inline} html body table.gwtabelle.tkarten:not(.gwrechnungen):not(.gwanlagen) tr:not(.tkgruppe):not(.tkform) > td:nth-child(2):not([hidden]){grid-row:2; grid-column:2; padding:0 0 8px; font-size:13px; color:var(--tinte3)} html body table.gwtabelle.tkarten:not(.gwrechnungen):not(.gwanlagen) tr:not(.tkgruppe):not(.tkform) > td:nth-child(2)::before{display:inline; font-size:13px} html body table.gwtabelle.tkarten:not(.gwrechnungen):not(.gwanlagen) tr:not(.tkgruppe):not(.tkform) > td:nth-child(2) > .tkwert{display:inline; margin-left:4px} html body table.gwtabelle.tkarten:not(.gwrechnungen):not(.gwanlagen) tr:not(.tkgruppe):not(.tkform) > td:nth-child(5):not([hidden]){grid-column:1 / -1; order:1} html body table.gwtabelle.tkarten:not(.gwrechnungen):not(.gwanlagen) tr:not(.tkgruppe):not(.tkform) > td:nth-child(n+6):not([hidden]){order:1} html body table.gwtabelle.tkarten:not(.gwrechnungen):not(.gwanlagen) tr:not(.tkgruppe):not(.tkform) > td:nth-child(6):not([hidden]){order:0} html body table.gwtabelle.tkarten:not(.gwrechnungen):not(.gwanlagen) tr:not(.tkgruppe):not(.tkform) > td:nth-child(n+7):not([hidden]){order:2} html body table.tkarten tr.tkgruppe:not([hidden]){background:none; border:0; border-radius:0; padding:16px 2px 6px; margin:0} html body table.tkarten tr.tkgruppe > :is(td,th){display:block; padding:0; border:0; text-align:left; font-weight:700; font-size:15px; color:var(--tinte)} html body table.tkarten tr.tkform:not([hidden]){background:var(--flaeche2); margin-top:-4px} html body table.tkarten tr.tkform > :is(td,th){display:block; text-align:left; padding:10px 0; border:0; background:none} html body table.tkarten tr.tkform > :is(td,th)::before{content:none} html body table.tkarten :is(input,select,textarea){max-width:100%} html body :is(.tabellenrahmen,.tabellenrolle,.dlrolle):has(> table.tkarten){overflow:visible; background:none; border:0; border-radius:0; margin-left:0; margin-right:0; padding:0; box-shadow:none} html body .jahr div.jahrband{overflow:visible; margin:0; padding:0 0 4px} html body .jahr div.jahrbandinhalt{width:auto; min-width:0} html body .jahr div.jahrband .mitband{display:none} html body .jahr .legende .fstufe{display:none} html body .jahr div.jahrband div.monatswahl{display:block; margin:6px 0 0} html body .jahr div.jahrband div.monatswahl > span{display:grid; grid-template-columns:40px minmax(0,1fr) auto; grid-template-areas:"name balken ms" "jahr fluss stand"; column-gap:12px; row-gap:4px; align-items:center; padding:10px 8px; min-height:52px; border-radius:var(--wahl); border-top:1px solid var(--linie); text-align:left} html body .jahr div.jahrband div.monatswahl > span:first-child{border-top:0} html body .jahr div.jahrband div.monatswahl .mwname{grid-area:name; font-weight:600; color:var(--tinte); align-self:end} html body .jahr div.jahrband div.monatswahl .mj{grid-area:jahr; font-size:12px; color:var(--tinte3); align-self:start} html body .jahr div.jahrband div.monatswahl .ms{grid-area:ms; text-align:right; font-weight:600; align-self:end} html body .jahr div.jahrband div.monatswahl .mstand{grid-area:stand; text-align:right; font-size:12px; color:var(--tinte3); align-self:start} html body .jahr div.jahrband div.monatswahl .mfluss{grid-area:fluss; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; margin:0; flex-wrap:nowrap; gap:12px} html body .jahr div.jahrband div.monatswahl .mbalken{grid-area:balken; display:flex; flex-direction:column; gap:3px; min-width:0} html body .jahr div.jahrband div.monatswahl .mbalken i{display:block; height:7px; width:var(--w); min-width:2px; border-radius:1px 4px 4px 1px} html body .jahr div.jahrband div.monatswahl .mbalken i.ein{background:var(--gut)} html body .jahr div.jahrband div.monatswahl .mbalken i.aus{background:var(--bad)} html body main pre{white-space:pre-wrap; overflow-wrap:anywhere} /* Tabellen, die passen, dürfen ihren Rand behalten: Die Eingabefelder der Belegliste reichen gewollt 6 px über die Zelle (gemessen 2 px über den Rahmen). */ html body :is(.tabellenrahmen,.tabellenrolle){overflow-x:visible} } /* ========================================================================== NIE SEITLICH WISCHEN, TEIL 2 (27.09.2026, zz92): Darlehenskurve, Rententreppe, Ferienband und Reiseleiste. Nach zz91 meldete der Gestaltwächter genau diese Stellen („seitlich“). Auf dem Telefon zeigt jede ihre eigene Form untereinander; am Rechner und auf dem iPad bleibt das Bild. Die Zahlen kommen jeweils aus derselben Quelle wie das Bild. ========================================================================== */ .dltelrolle, ol.retel, p.retbedarf, ol.ufliste, ol.zstel{display:none} @media (max-width:560px), (pointer:coarse) and (max-height:480px){ html body .dlrolle:not(.dltelrolle){display:none} html body .dlrolle.dltelrolle{display:block; overflow:visible} html body svg.dlkurve.dltel{min-width:0; width:100%; aspect-ratio:340/200} html body svg.dlkurve.dltel text{font-size:12.5px} html body .rebildrolle{display:none} html body ol.retel{display:block; list-style:none; margin:14px 0 6px; padding:0} html body ol.retel > li{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"zeit wert" "balken balken"; column-gap:12px; row-gap:8px; align-items:end; padding:12px 0; border-top:1px solid var(--linie)} html body ol.retel > li:first-child{border-top:0} html body ol.retel .retzeit{grid-area:zeit; min-width:0} html body ol.retel .retzeit b{display:block; font-weight:600; color:var(--tinte)} html body ol.retel .retzeit small{display:block; font-size:13px; color:var(--tinte3)} html body ol.retel .retwert{grid-area:wert; font-weight:600; font-variant-numeric:tabular-nums; color:var(--tinte)} html body ol.retel .retbalken{grid-area:balken; position:relative; height:12px; border-radius:6px; background:var(--flaeche2)} html body ol.retel .retbalken i{position:absolute; left:0; top:0; bottom:0; width:var(--w); border-radius:6px; background:color-mix(in srgb, var(--akzent) 55%, transparent); box-shadow:inset 0 0 0 1.5px var(--akzent)} html body ol.retel > li.fehlt .retbalken i{background:color-mix(in srgb, var(--bad) 30%, transparent); box-shadow:inset 0 0 0 1.5px var(--bad)} html body ol.retel .retbalken b{position:absolute; top:-4px; bottom:-4px; left:var(--w); width:0; border-left:2px dashed var(--tinte2)} html body p.retbedarf{display:flex; align-items:center; gap:8px; margin:4px 0 0; font-size:13px; color:var(--tinte2)} html body p.retbedarf i{display:inline-block; width:0; height:14px; border-left:2px dashed var(--tinte2)} html body section.ufmodul div.ubbild.ufband, html body section.ufmodul dl.ubdrei{display:none} html body ol.ufliste{display:block; list-style:none; margin:12px 0 10px; padding:0} html body ol.ufliste > li + li{margin-top:6px} html body ol.ufliste button.ufzeile{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name tage" "wann tage"; align-items:center; column-gap:12px; width:100%; min-height:52px; padding:9px 14px; border:1px solid var(--linie); border-radius:14px; background:var(--flaeche); color:var(--tinte); font:inherit; text-align:left; cursor:pointer} html body ol.ufliste button.ufzeile b{grid-area:name; font-weight:600} html body ol.ufliste button.ufzeile span{grid-area:wann; font-size:13px; color:var(--tinte2)} html body ol.ufliste button.ufzeile small{grid-area:tage; font-size:13px; color:var(--tinte3)} html body ol.ufliste button.ufzeile.gewaehlt{background:color-mix(in srgb, var(--akzent) 10%, var(--flaeche)); border-color:var(--akzent); box-shadow:inset 0 0 0 1px var(--akzent)} html body div.ubbild.ubkettenbild, html body div.zsregler{display:none} html body ol.zstel{display:block; list-style:none; margin:10px 0 14px; padding:0 0 0 2px} html body ol.zstel > li{position:relative; padding-left:26px} html body ol.zstel > li::before{content:''; position:absolute; left:8px; top:0; bottom:0; border-left:2px solid var(--linie)} html body ol.zstel > li:first-child::before{top:50%} html body ol.zstel > li:last-child::before{bottom:50%} html body ol.zstel > li.zstheute{padding-top:4px; padding-bottom:4px; font-size:12px; font-weight:600; color:var(--tinte)} html body ol.zstel > li.zstheute::after{content:''; position:absolute; left:2px; top:50%; width:14px; height:2px; background:var(--tinte); transform:translateY(-1px)} html body ol.zstel > li.zstabstand{padding-top:2px; padding-bottom:2px; font-size:12px; color:var(--tinte3)} html body ol.zstel button.zstzeile{display:flex; align-items:center; gap:10px; width:100%; min-height:52px; margin:4px 0; padding:8px 12px 8px 0; border:0; background:none; color:var(--tinte); font:inherit; text-align:left; cursor:pointer} html body ol.zstel .zstpunkt{position:absolute; left:2px; top:50%; width:14px; height:14px; margin-top:-7px; border-radius:50%; background:var(--tinte3); box-shadow:0 0 0 3px var(--flaeche)} html body ol.zstel li.f-gut .zstpunkt{background:var(--gut,#2C7A57)} html body ol.zstel li.f-warte .zstpunkt{background:var(--warte-tinte,#7A5A16)} html body ol.zstel li.f-schlecht .zstpunkt{background:var(--bad,#C0392B)} html body ol.zstel li.vorbei{opacity:.55} html body ol.zstel .zsflagge{flex:0 0 auto; border-radius:2px} html body ol.zstel .zstziel{flex:1 1 auto; min-width:0} html body ol.zstel .zstziel b{display:block; font-weight:600} html body ol.zstel .zstziel small{display:block; font-size:13px; color:var(--tinte3)} html body ol.zstel .zststoerer{flex:0 0 auto; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:600; background:var(--flaeche2,#F2EFE8); color:var(--tinte2); box-shadow:inset 0 0 0 1px var(--linie)} html body ol.zstel .zststoerer.s-gut{background:#EAF1E4; color:var(--gut-tinte,#3C5A2A); box-shadow:inset 0 0 0 1px #C9DCBC} html body ol.zstel .zststoerer.s-warte{background:#FBF3DE; color:var(--warte-tinte,#7A5A16); box-shadow:inset 0 0 0 1px #E6D2A0} html body ol.zstel .zststoerer.s-schlecht{background:#FBEAE6; color:var(--schlecht-tinte,#8E3B2F); box-shadow:inset 0 0 0 1px #EEC4BA} html body ul.ubliste > li{scroll-margin-top:96px} } /* ========================================================================== DAS TELEFON BIS 320 PX (27.09.2026, zz93). Nach zz92 rollt bei 430 px nichts mehr seitlich. Der Gestaltwächter meldete bei 320 px (kleinstes iPhone) noch Überläufe, alle gemessen und hier behoben: Rastern mit fester Mindestbreite (Rentenabschnitte 300 px, Markenliste 296 px, Leistungen 246 px, Mietrendite 213 px) fehlte das min(…, 100 %); dreifach verschachtelte Karten ließen innen nur 180 px — dort wird die Innenkante enger; Dateiwahl, Kopfzeilen und lange Knopftexte brechen jetzt um statt hinauszuragen; „Entlassungsvereinbarung“ trennt. Tagesliste: Passt der Betrag nicht mehr neben den Text, steht er darunter an derselben Zahlenkante. ========================================================================== */ @media (max-width:560px), (pointer:coarse) and (max-height:480px){ html body .rephasenliste{grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%), 1fr))} html body ul.mrlegende{grid-template-columns:minmax(0,1fr)} html body form.bmneuholen{grid-template-columns:minmax(0,1fr)} html body form.bmneuholen > *{grid-column:1 / -1; min-width:0} html body button.kwsenden, html body button.kwsenden > span{white-space:normal; min-width:0; text-align:center} html body button.kwsenden{height:auto; min-height:44px; padding-top:10px; padding-bottom:10px} html body div.ubkasse > .ubkzahlen{flex:1 1 100%; min-width:0} html body main input[type=file]{max-width:100%; min-width:0} html body details.tfelder > summary{flex-wrap:wrap; row-gap:6px} html body div.mtschaukopf{flex-wrap:wrap; row-gap:6px} html body div.vsleistungneu{grid-template-columns:minmax(0,1fr)} html body article.nlkarte{hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word} html body div.bmliste{grid-template-columns:minmax(0,1fr)} html body ol.zstel{margin-top:0} html body article.bmzeile{flex-wrap:wrap} html body article.bmzeile > .bmtext{min-width:0; flex:1 1 180px} } @media (max-width:360px){ html body main :is(article.rekarte, article.vskarte, article.dlkarte, article.bmzeile, form.bmneu){padding-left:14px; padding-right:14px} html body main :is(section.mrblock, div.ubkasse){padding-left:12px; padding-right:12px} html body ol.tage :is(.zeile, .posten){flex-wrap:wrap; column-gap:10px} html body ol.tage :is(.zeile > .stand, .posten > .betrag){margin-left:auto} } /* zz94 (27.09.2026): letzte drei Wächter-Befunde auf dem Telefon — Reiseliste 4 px zu tief unter dem Titel (Titelabstand 18 px), Dateiwahl in der Markenliste 267 px breit bei 320 px, Mietrendite 1 px über der Kante. */ @media (max-width:560px), (pointer:coarse) and (max-height:480px){ html body ol.zstel{margin-top:-4px} html body article.bmzeile .md-tun > form{min-width:0; max-width:100%; flex:1 1 100%} html body article.bmzeile .md-tun > form > input[type=file]{width:100%} } @media (max-width:360px){ html body main section.mrblock{padding-left:10px; padding-right:10px} } /* Routenskizze (zz95): Rückt eine Marke von ihrem Ort ab, bleibt der Ort als Punkt auf der Route, eine feine Linie führt zur Marke. */ svg.rtskizze .rtleine{stroke:var(--akzent); stroke-width:1.25; opacity:.55; vector-effect:non-scaling-stroke} svg.rtskizze .rtanker{fill:var(--akzent); stroke:var(--flaeche2); stroke-width:1.5} /* zz100: Ein Tag unter 0 € trägt die Warnung selbst (Untergrenze 0 €, Entscheidung Chris 28.09.2026). */ ol.tage > li.unternull{border-color:color-mix(in srgb, var(--bad) 45%, var(--linie)); box-shadow:inset 3px 0 0 var(--bad)} ol.tage p.unternull{display:flex; gap:8px; align-items:flex-start; margin:8px 0 2px; font-size:13px; font-weight:600; color:var(--bad)} ol.tage p.unternull .ikon{flex:0 0 auto; margin-top:2px} /* zz103: Verlauf des Nettovermögens — je Monat eine Zeile, waagrechter Balken, Veränderung zum Vormonat. */ ol.vmvliste{list-style:none; margin:14px 0 0; padding:0} ol.vmvliste > li{display:grid; grid-template-columns:minmax(120px,max-content) minmax(0,1fr) auto; grid-template-areas:"monat balken wert"; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--linie)} ol.vmvliste > li:first-child{border-top:0} ol.vmvliste .vmvmonat{grid-area:monat; font-weight:600} ol.vmvliste .vmvbalken{grid-area:balken; position:relative; height:8px} /* F13 (04.10.2026): Veraenderung zum Vormonat um eine Mittellinie (0 €) */ ol.vmvliste .vmvbalken:not(.leer)::before{content:""; position:absolute; left:50%; top:-6px; bottom:-6px; width:1px; background:var(--linie)} ol.vmvliste .vmvbalken i{position:absolute; top:0; bottom:0; width:var(--w); border-radius:4px} ol.vmvliste .vmvbalken i.plus{left:50%; background:var(--gut)} ol.vmvliste .vmvbalken i.minus{right:50%; background:var(--bad)} ol.vmvliste .vmvwert b.plus{color:var(--gut)} ol.vmvliste .vmvwert b.minus{color:var(--bad)} ol.vmvliste .vmvwert small{color:var(--tinte3)} ol.vmvliste .vmvwert{grid-area:wert; text-align:right; font-variant-numeric:tabular-nums} ol.vmvliste .vmvwert small{display:block; font-size:12px} @media (max-width:560px), (pointer:coarse) and (max-height:480px){ html body ol.vmvliste > li{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"monat wert" "balken balken"; row-gap:6px} html body ol.vmvliste .vmvbalken.leer{display:none} } /* zz104 (28.09.2026, Vorhaben 198): bei 320 px — Absender-Formular der Mitteilungen 24 px über der Karte (Raster 200 px fest), Modulpark: „Fertig“ (168 px) passte nicht neben den Titel. Jetzt eine Spalte und Umbruch. */ @media (max-width:360px){ html body div.mtabsender form.mtform{grid-template-columns:minmax(0,1fr); padding-left:12px; padding-right:12px; min-width:0; max-width:100%} html body div.mtabsender form.mtform > *{min-width:0} html body div.mtabsender form.mtform :is(input,select,textarea){max-width:100%; min-width:0} html body aside.Widget-Park h2.mpkopf{flex-wrap:wrap; row-gap:8px} html body aside.Widget-Park .mpzu{margin-left:auto} } /* zz106 (28.09.2026): Gestaltwächter-Befunde auf iPad-Breite (834/1179 px), alle nachgemessen. Trefferflächen: Stationen „Unser Weg zur Steuer“ (34 px) und Zeilen „Wohin das Geld geht“ im Haushalt (33 px) — jetzt 44 px. Kennwort-Knöpfe: „Mit Passkey bestätigen …“ bricht um statt über den Knopf zu laufen (bisher nur am Telefon). Marke: Die Dateiwahl war 253 px breit in einer 223-px-Spalte und lag unter dem Knopf. */ html body ul.stgliste > li > a{min-height:44px; align-items:center} html body a.awgriff{min-height:44px; box-sizing:border-box} html body button.kwsenden, html body button.kwsenden > span{white-space:normal; min-width:0; text-align:center} html body button.kwsenden{height:auto; min-height:44px; padding-top:10px; padding-bottom:10px} html body form.bmneuholen{grid-template-columns:repeat(auto-fit, minmax(min(220px, 100%), 1fr))} html body form.bmneuholen > *{min-width:0} html body main input[type=file]{max-width:100%; min-width:0} html body main form :is(label, .feld){min-width:0} /* zz107 — iPad quer (1179): Knopfspalten so breit wie der Knopf selbst (--knopf-min), keine Überdeckung */ @media (min-width:761px){ html body .kbkopf.nr, html body .kbzeile.nr{grid-template-columns:minmax(150px,1.2fr) minmax(150px,1.4fr) minmax(150px,1.2fr) var(--knopf-min,168px)} } @media (min-width:901px){ /* KEIN FLATTERN (Chris, 29.09.2026: „Kein Flattertext! Zahlen rechtsbündig. Das ist CI-Gesetz!"). GEMESSEN: die Betragsspalte war `auto` (59 bis 88 px je Zeile) und die letzte Spalte `max-content` (60 px „gesetzt" gegen 168 px „Vorschlag") — jede Zeile ein eigenes Raster, jede Zahl an einer anderen Kante. Jetzt tragen beide Spalten feste Breiten; der Betrag steht rechtsbündig an EINER Kante, Thema und Wohin beginnen in jeder Zeile an derselben Stelle. Gesetz 50: Beträge stehen rechtsbündig — immer. */ html body .zpaar{grid-template-columns:22px minmax(150px,1.5fr) 124px minmax(150px,1fr) minmax(170px,1.1fr) var(--knopf-min,168px)} html body .zpaar .zsumme{justify-self:end} } /* Protokoll: zwei Sichten (29.09.2026, Befund 9) — dieselbe Schalterleiste wie überall, Zähler als tabellarische Ziffer */ nav.prsicht{display:inline-flex; margin:0 0 8px} nav.prsicht a{padding:6px 14px} nav.prsicht small{margin-left:6px; font-size:12px; font-variant-numeric:tabular-nums; opacity:.75} p.prsichtsatz{margin:0 0 14px} /* zz108 — Etappen direkt ändern, Unterkunft je Etappe (28.09.2026) */ html body ol.rtetappen p.rtpreis{color:var(--tinte2)} html body ol.rtetappen p.rtpreis .rtpwort{color:var(--tinte3)} html body ol.rtetappen p.rtpreis .rtpsumme{white-space:nowrap} html body .ubroute a{color:inherit; text-decoration:underline; text-underline-offset:2px} /* zz109 — Verträge und Abos (28.09.2026) */ html body p.vtsatz{margin:4px 0 16px} html body ol.vtliste{list-style:none; margin:0; padding:0; display:grid; gap:10px} html body ol.vtliste > li{background:var(--flaeche); border:1px solid var(--karterand, var(--linie)); border-radius:var(--karteradius, 12px); padding:12px 14px; min-width:0} html body ol.vtliste .vtkopf{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px} html body ol.vtliste .vtname{flex:1 1 200px; min-width:0; overflow-wrap:anywhere} html body ol.vtliste .vtbetrag{color:var(--tinte2); white-space:nowrap} html body ol.vtliste .vtjahr{font-weight:600; white-space:nowrap; margin-left:auto; font-variant-numeric:tabular-nums} html body ol.vtliste .vtfakt{font-size:13px; color:var(--tinte3); margin:4px 0 0; overflow-wrap:anywhere} html body ol.vtliste .vtpreis{display:flex; gap:6px; align-items:center; font-size:13px; margin:6px 0 0; color:var(--tinte2)} html body ol.vtliste .vtpreis.teurer{color:var(--warn, #b4740f)} html body ol.vtliste .vttun{display:flex; flex-wrap:wrap; gap:16px 18px; font-size:13px; color:var(--tinte2); margin:8px 0 14px} html body ol.vtliste li.geraten .vtart{color:var(--tinte3)} html body .vthinweis, html body p.vtfuss{font-size:13px; color:var(--tinte3)} html body p.vtfuss{display:flex; gap:6px; align-items:flex-start} html body details.vtaus > summary{cursor:pointer; min-height:44px; display:flex; align-items:center; color:var(--tinte2)} html body section.vtgruppe h2 small{font-weight:400; color:var(--tinte3); margin-left:6px} /* zz110 — Was nicht jeden Monat kommt (28.09.2026) */ html body section.zrjahres{display:grid; gap:10px; align-content:start} html body ul.zrjliste{list-style:none; margin:0; padding:0; display:grid; gap:6px} html body ul.zrjliste li{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; padding:8px 12px; border:1px solid var(--karterand, var(--linie)); border-radius:var(--wahl, 10px); background:var(--flaeche); min-width:0} html body ul.zrjliste b{flex:1 1 180px; min-width:0; overflow-wrap:anywhere} html body ul.zrjliste .zrjwann{color:var(--tinte2); white-space:nowrap} html body ul.zrjliste .zrjbetrag{white-space:nowrap; font-variant-numeric:tabular-nums} html body ul.zrjliste .zrjplan{display:inline-flex; gap:4px; align-items:center; font-size:13px; white-space:nowrap} html body ul.zrjliste .zrjplan.gut{color:var(--good, #2d7d46)} html body ul.zrjliste .zrjplan.fehlt{color:var(--warn, #b4740f)} html body p.zrjglatt{font-size:13px; color:var(--tinte2); margin:0} /* zz113 — Module ordnen: der Park verdeckt nichts mehr (28.09.2026). Breit: das Blatt rückt nach links und macht der Schublade Platz. Schmal: der Park ist eine Leiste unten, das Blatt bekommt unten gleich viel Luft. */ @media (min-width:901px){ html body.parkoffen{padding-right:min(376px, 40vw); transition:padding-right .32s cubic-bezier(.32,.72,0,1)} html body .Widget-Park{width:min(360px, 40vw)} } @media (max-width:900px){ html body .Widget-Park{top:auto; bottom:0; left:0; right:0; width:auto; height:auto; max-height:min(40dvh, 340px); overflow:auto; border-left:0; border-top:1px solid var(--materialrand); border-radius:16px 16px 0 0; transform:translateY(101%)} html body.parkoffen .Widget-Park{transform:none} html body.parkoffen{padding-bottom:min(40dvh, 340px)} } @media (prefers-reduced-motion:reduce){ html body.parkoffen{transition:none} } /* zz113 — Tiefster Punkt: Datum mit fester Breite, damit die Beträge exakt untereinander stehen. */ /* RECHTSBÜNDIG (04.10.2026). Chris: „Tiefster Punkt, die Überschrift, endet nicht mit dem Datum, muss aber rechtsbündig gemeinsam enden." Gemessen: Überschrift endet bei 1430 px, das Datum bei 1415 px — die feste Breite stand, der Text darin aber links. Jetzt rechts in derselben Breite: Datum und Überschrift enden gemeinsam, die Beträge stehen weiter exakt untereinander. */ html body td.stand .tiefdatum{display:inline-block; min-width:7.2ch; text-align:right; font-variant-numeric:tabular-nums} html body td.z.stand{font-variant-numeric:tabular-nums} /* zz114 — Wie lange reicht es? (28.09.2026) */ html body section.vmreichweite{display:grid; gap:12px} html body ul.vmrwliste{list-style:none; margin:0; padding:0; display:grid; gap:8px} html body ul.vmrwliste li{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:2px 12px; padding:10px 14px; border:1px solid var(--karterand, var(--linie)); border-radius:var(--wahl, 10px); background:var(--flaeche); min-width:0} html body ul.vmrwliste .vmrwfall{font-weight:600; min-width:0; overflow-wrap:anywhere} html body ul.vmrwliste .vmrwzahl{font-size:17px; white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums} html body ul.vmrwliste .vmrwweg{grid-column:1 / -1; font-size:13px; color:var(--tinte2); overflow-wrap:anywhere} html body p.vmrwfuss{font-size:13px; color:var(--tinte3); margin:0} /* zz115 — Rückblick auf den letzten Zyklus (28.09.2026) */ html body section.rueckblick{display:grid; gap:12px; align-content:start} html body p.rbzeit{margin:0; font-size:13px; color:var(--tinte2); font-variant-numeric:tabular-nums} html body .rbraster{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap:12px 20px} html body .rbteil{display:grid; gap:6px; align-content:start; min-width:0} html body .rbteil h3{margin:0; font-size:14.5px; font-weight:600; color:var(--tinte2)} html body ul.rbliste{list-style:none; margin:0; padding:0; display:grid; gap:0} html body ul.rbliste li{display:flex; flex-wrap:wrap; gap:2px 10px; align-items:baseline; padding:7px 0; border-bottom:1px solid var(--linie)} html body ul.rbliste .rbname{flex:1 1 140px; min-width:0; overflow-wrap:anywhere} html body ul.rbliste .rbwann{color:var(--tinte3); font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap} html body ul.rbliste .rbbetrag{white-space:nowrap; font-variant-numeric:tabular-nums; margin-left:auto} html body p.rbleer{display:flex; gap:6px; align-items:center; margin:0; font-size:13px; color:var(--good, #2d7d46)} html body p.rbmehr, html body p.rbfuss{margin:0; font-size:13px; color:var(--tinte3)} /* zz116 — Kündigungsfristen (28.09.2026) */ html body ol.vtliste .vtfrist{display:flex; gap:6px; align-items:center; font-size:13px; margin:6px 0 0; color:var(--tinte2)} html body ol.vtliste .vtfrist.bald, html body ol.vtliste .vtfrist.unklar{color:var(--warn, #b4740f)} html body p.fristleiste{display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; margin:10px 0 0; padding:6px 14px; border-radius:var(--wahl, 10px); background:rgba(190,120,20,.10); color:var(--warn, #b4740f); font-size:14.5px} html body p.fristleiste > span{flex:1 1 240px; min-width:0} html body p.fristleiste a{color:inherit; font-weight:600; min-height:44px; display:inline-flex; align-items:center} /* zz118 — Gestaltwächter abgearbeitet (28.09.2026, Vorhaben 188). Rückblick und Reichweite sind Raster mit 12 px Lücke: die Lücke kam zum Titelabstand hinzu (30 statt 18 px). Wie bei section.stfrei zieht der Titel die Lücke ab. Die Karten der Reichweite stehen mit 12 px Luft wie alle Karten. */ html body section.rueckblick > h2.modultitel, html body section.vmreichweite > h2.modultitel{margin-bottom:calc(var(--titelabstand) - 12px)} html body ul.vmrwliste{gap:12px} /* Verträge-Karten und die Bausteine im Modulpark: 10 bzw. 8 px, vom Wächter gemeldet — 12 px wie überall. */ html body ol.vtliste, html body ul.mpliste{gap:12px} /* Die Tabelle „Alle zwölf Monate“ am iPad hochkant (761–1000 px): gemessen 24 px zu breit bei 834, 93 px bei 761. Engere Zellen (8 statt 14 px) und Spaltenköpfe, die umbrechen dürfen — gemessen 0 px bei 761, 768, 800, 810, 820, 834, 900. */ @media (min-width:761px) and (max-width:900px){html body div.tabellenrahmen th, html body div.tabellenrahmen td{padding-left:8px; padding-right:8px} html body div.tabellenrahmen thead th{white-space:normal; vertical-align:bottom}} /* Steuer › Ablauf (ol.ktchronik) auf dem Telefon: Der Entfernen-Knopf (×) erbte die Mindestbreite der Knopffamilie (168 px) und schob Text und Seite 2 px über den Rand. Jetzt ein 44-px-Zeichenknopf rechts oben; Datum, Vorgang und Wer stehen untereinander, lange Dateinamen brechen um. */ @media (max-width:760px){html body ol.ktchronik li.kt{grid-template-columns:minmax(0,1fr) 44px; gap:4px 12px} html body ol.ktchronik li.kt > time{grid-column:1; grid-row:1} html body ol.ktchronik li.kt > .ktwas{grid-column:1; grid-row:2; min-width:0} html body ol.ktchronik li.kt > .ktwer{grid-column:1; grid-row:3; padding-top:0} html body ol.ktchronik li.kt > form.ktweg{grid-column:2; grid-row:1 / span 2; align-self:start}} html body ol.ktchronik .ktwas > *{min-width:0; overflow-wrap:anywhere} html body ol.ktchronik form.ktweg button.weg:not(#nie){--knopf-min:0; min-width:44px; width:44px; height:44px; padding:0} /* „Ändern“ (26 px) neben „Entfernen“ (44 px): gemeldet als ungleiches Knopfpaar, und 26 px sind keine Trefferfläche. „Ändern“ gehört zur Knopffamilie (44 px); übereinander mit 8 px Luft, gleich breit. */ html body button.ststift:not(#nie){min-height:var(--knopf); height:var(--knopf); padding:0 16px; font-size:14.5px; border-radius:12px; gap:6px; justify-content:center} html body td.sttun > form{margin:8px 0 0} html body td.sttun > button.ststift:not(#nie), html body td.sttun > form > button.weg:not(#nie){width:100%} /* Telefon 320–335 px: Betrag der Verträge (bis 18 px) und die Reisekasse (3 px) ragten aus der Karte — sie dürfen umbrechen. */ html body ol.vtliste .vtbetrag{white-space:normal; min-width:0} html body p.ubsumme{flex-wrap:wrap; column-gap:10px} /* zz121 — „Die nächsten zwölf Monate“: jeder Monat springt zu „Der gewählte Monat“ (Vorhaben 50). Die Sprungfläche liegt über der ganzen Kachel; die Kachel selbst bleibt unverändert. */ html body .jahr div.jahrband div.monatswahl > span{position:relative} html body div.monatswahl a.mwsprung{position:absolute; inset:0; display:block; padding:0; margin:0; border-radius:var(--wahl, 10px); background:transparent; box-shadow:none; z-index:1; cursor:pointer} html body div.monatswahl > span:has(> a.mwsprung:hover){background:var(--flaeche2)} html body div.monatswahl a.mwsprung:focus-visible{outline:2px solid var(--akzent); outline-offset:-2px} /* zz122 — „Was unser Leben kostet — gegenüber dem Vorjahr“ auf der Haushaltsseite (Vorhaben 209). Zahlen rechtsbündig in Spalten, auf dem Telefon Name und Veränderung oben, die drei Beträge beschriftet darunter. */ html body section.hhteuer .tgtab{display:grid; gap:0; margin-top:4px} html body section.hhteuer .tgkopf, html body section.hhteuer .tgzeile > summary, html body section.hhteuer ol.tgmonate > li{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,.8fr); column-gap:12px; align-items:baseline} html body section.hhteuer .tgkopf{font-size:12px; color:var(--tinte3); text-transform:uppercase; letter-spacing:.04em; padding:0 0 8px; border-bottom:1px solid var(--linie)} html body section.hhteuer .tgkopf > span:not(:first-child){text-align:right} html body section.hhteuer .tgzeile{border-bottom:1px solid var(--linie)} html body section.hhteuer .tgzeile > summary{list-style:none; cursor:pointer; min-height:44px; padding:11px 0; box-sizing:border-box} html body section.hhteuer .tgzeile > summary::-webkit-details-marker{display:none} html body section.hhteuer .tgzeile.tgsumme{border-bottom:0} html body section.hhteuer .tgzeile.tgsumme > summary{font-weight:600} html body section.hhteuer .tgname{min-width:0; overflow-wrap:anywhere} html body section.hhteuer .tgzahl, html body section.hhteuer .tgproz{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap} html body section.hhteuer .tgvor{color:var(--tinte2)} html body section.hhteuer .tgproz.mehr{color:var(--warn, #b4740f)} html body section.hhteuer .tgproz.weniger{color:var(--gut, #2d7d46)} html body section.hhteuer ol.tgmonate{list-style:none; margin:0 0 12px; padding:0; display:grid; gap:0; font-size:13px} html body section.hhteuer ol.tgmonate > li{padding:4px 0} html body section.hhteuer ol.tgmonate .tgmn{color:var(--tinte2)} html body section.hhteuer p.tgfuss{font-size:13px; color:var(--tinte3); margin:12px 0 0} @media (max-width:560px){ html body section.hhteuer .tgkopf{display:none} html body section.hhteuer .tgzeile > summary{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:12px; row-gap:2px} html body section.hhteuer .tgzeile > summary .tgname{flex:1 1 calc(100% - 90px); order:1} html body section.hhteuer .tgzeile > summary .tgproz:not(.tgzw){flex:0 0 auto; order:2; font-weight:600} html body section.hhteuer .tgzeile > summary .tgzahl, html body section.hhteuer .tgzeile > summary .tgzw{flex:0 0 auto; order:3; font-size:13px; color:var(--tinte2); text-align:left; font-weight:400} html body section.hhteuer .tgzeile > summary .tgzahl::before, html body section.hhteuer .tgzeile > summary .tgzw::before{content:attr(data-was) ' '; color:var(--tinte3)} html body section.hhteuer ol.tgmonate > li{grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.7fr); column-gap:8px} } /* zz126 — Steuer: „Aus den Umsätzen vorgemerkt“ (Vorhaben 210). Karten wie bei den Verträgen, Beträge rechtsbündig. */ html body section.stsammler{background:var(--flaeche); border:1px solid var(--linie); border-radius:16px; padding:24px; margin:0 0 26px} html body ul.sssummen{list-style:none; margin:0 0 16px; padding:0; display:grid; gap:0} html body ul.sssummen li{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:4px 16px; align-items:baseline; padding:8px 0; border-bottom:1px solid var(--linie)} html body ul.sssummen .ssanz{color:var(--tinte3); font-size:13px; white-space:nowrap} html body section.stsammler .sszahl{font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right} html body ol.ssliste{list-style:none; margin:0; padding:0; display:grid; gap:12px} html body ol.ssliste > li{background:var(--flaeche); border:1px solid var(--karterand, var(--linie)); border-radius:var(--karteradius, 12px); padding:12px 14px; min-width:0} html body ol.ssliste .sskopf{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px} html body ol.ssliste .ssname{flex:1 1 180px; min-width:0; overflow-wrap:anywhere} html body ol.ssliste .sszahl{margin-left:auto} html body ol.ssliste .ssfakt{font-size:13px; color:var(--tinte3); margin:4px 0 0; overflow-wrap:anywhere} html body ol.ssliste .sstun{display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; font-size:13px; color:var(--tinte2); margin:8px 0 0} html body ol.ssliste .ssbeleg{display:inline-flex; align-items:center; gap:6px; min-height:44px} html body ol.ssliste .ssbeleg.da{color:var(--gut, #2d7d46)} html body ol.ssliste .ssbeleg.fehlt{color:var(--warn, #b4740f)} html body details.ssaus{margin-top:14px} html body details.ssaus > summary{cursor:pointer; min-height:44px; display:flex; align-items:center; color:var(--tinte2)} @media (max-width:760px){ html body section.stsammler{padding:16px} } /* zz127 — Familie: „Was mit Geld auf euch zukommt“ (Vorhaben 207). Datum, Anlass, Betrag in einer Zeile; Beträge rechtsbündig. */ html body .kmblock{margin:28px 0 0} html body .kmblock h3.kmwer{margin:6px 0 10px; font-size:16px} html body .kmblock h3.kmwer small{font-weight:400; color:var(--tinte3); margin-left:6px; font-size:14.5px} html body ol.kmliste{list-style:none; margin:0 0 16px; padding:0; display:grid; gap:12px} html body ol.kmliste > li{background:var(--flaeche); border:1px solid var(--karterand, var(--linie)); border-radius:var(--karteradius, 12px); padding:12px 14px; min-width:0} html body ol.kmliste .kmkopf{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 12px; align-items:baseline} html body ol.kmliste .kmkopf time{font-variant-numeric:tabular-nums; color:var(--tinte2); white-space:nowrap; min-width:10ch} html body ol.kmliste .kmtitel{min-width:0; overflow-wrap:break-word; hyphens:auto; font-weight:600} html body ol.kmliste .kmzahl{white-space:nowrap; font-variant-numeric:tabular-nums; text-align:right} html body ol.kmliste button.kmzahl{min-height:44px} html body ol.kmliste .kmzahl small{font-weight:400; color:var(--tinte3)} html body ol.kmliste li.km-wegfall .kmzahl, html body ol.kmliste li.km-ende .kmzahl{color:var(--tinte2)} html body ol.kmliste .kmsatz{margin:6px 0 0; font-size:14.5px; color:var(--tinte2)} /* Telefon (gemessen 390 px: „Führerschei-n“ brach mitten im Wort): Datum, Anlass und Betrag stehen untereinander, der Betrag linksbündig unter dem Anlass. */ @media (max-width:560px){ html body ol.kmliste .kmkopf{grid-template-columns:minmax(0,1fr)} html body ol.kmliste .kmzahl{text-align:left; justify-self:start} } /* zz129 — Schmale Telefone bis 400 px (gemessen bei 320 px, Vorhaben 188): Rentenkarte und ihre Formulare, Vermögens-Kacheln und Mieterträge, die „Zusammen“-Bilder im Umschalter, die EÜR-Kurzlinks der Steuer und die Marken-Zeilen der Verwaltung ragten 2 bis 16 px aus ihren Karten. Jetzt: eine Spalte, Inhalte dürfen schrumpfen und umbrechen. Einzige begründete Ausnahme: „Promedia Solutions“ im Personen-Umschalter der Steuer wird bei 320 px mit … gekürzt — dafür ist neben drei 44-px-Knöpfen kein Platz. */ @media (max-width:400px){ html body .retunliste, html body form.vmform, html body form.vmform label, html body article.rekarte, html body article.rekarte .rezwei, html body article.rekarte .rewert, html body article.rekarte label, html body article.rekarte dl{grid-template-columns:minmax(0,1fr)} html body form.vmform label > *, html body article.rekarte > *, html body article.rekarte header > div, html body article.rekarte label > *, html body article.rekarte dl, html body article.rekarte dl > div{min-width:0} html body article.rekarte dl > div{flex-wrap:wrap} html body article.rekarte input{min-width:0; max-width:100%} html body article.rekarte h3, html body article.rekarte p, html body article.rekarte label span{overflow-wrap:break-word} } @media (max-width:360px){ html body .kacheln.vmkacheln{grid-template-columns:minmax(0,1fr)} html body div.umschalter a.stalle img.pbild + img.pbild{margin-left:-12px} } @media (max-width:400px){ html body section.mrblock li{flex-wrap:wrap; column-gap:12px} html body section.mrblock li > b{margin-left:auto} html body a.eukurz{flex-wrap:wrap} html body a.eukurz .eutext{flex:1 1 160px; min-width:0; grid-template-columns:minmax(0,1fr)} html body a.eukurz .eutext > *{min-width:0; overflow-wrap:break-word} html body article.bmzeile .md-tun form{flex-wrap:wrap; max-width:100%} html body article.bmzeile .md-tun input{min-width:0; width:100%; max-width:100%} html body article.bmzeile .bmtext{min-width:0; max-width:100%} } /* zz130 — Haushalt: Einnahmen gegen Ausgaben, nur der gewählte Monat (Vorhaben 18). Zwei große Balken auf gemeinsamer Skala, Beträge rechtsbündig in einer Spalte. */ html body section.hhvergleich .hvbalken{display:grid; gap:12px; margin:0 0 14px} html body section.hhvergleich .hvzeile{display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:12px; align-items:center} html body section.hhvergleich .hvwas{font-size:14.5px; color:var(--tinte2)} html body section.hhvergleich .hvspur{display:block; height:28px; background:var(--flaeche2); border-radius:8px; overflow:hidden} html body section.hhvergleich .hvspur i{display:block; height:100%; min-width:4px; border-radius:8px} html body section.hhvergleich .hvzeile.ein .hvspur i{background:var(--gut)} html body section.hhvergleich .hvzeile.aus .hvspur i{background:var(--bad)} html body section.hhvergleich .hvzahl{font-size:17px; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; min-width:11ch} @media (max-width:560px){ html body section.hhvergleich .hvzeile{grid-template-columns:minmax(0,1fr) auto; row-gap:6px} html body section.hhvergleich .hvwas{grid-row:1; grid-column:1} html body section.hhvergleich .hvzahl{grid-row:1; grid-column:2} html body section.hhvergleich .hvspur{grid-row:2; grid-column:1 / -1} } /* zz135 — Doppelt geplant? (Vorhaben 76) */ html body .geisthinweis{display:grid; gap:12px; margin:0 0 16px} html body .geistfall .geisttun{display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 0} html body .geistfall .geistfehler{color:var(--bad); font-size:13px; margin:6px 0 0} /* zz136 — Verwaltung › Kategorien (Vorhaben 94). Name als Eingabefeld in voller Breite, zwei 44-px-Knöpfe zum Ordnen, Entfernen mit der Schranke der Anwendung. */ html body section.katbereich{background:var(--flaeche); border:1px solid var(--linie); border-radius:16px; padding:24px; margin:0 0 26px} html body ol.katliste{list-style:none; margin:0; padding:0; display:grid; gap:0} html body ol.katliste > li{border-top:1px solid var(--linie); padding:8px 0} html body ol.katliste > li:first-child{border-top:0} html body ol.katliste .katzeile{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px} html body ol.katliste input.katname{flex:1 1 200px; min-width:0; min-height:44px} html body ol.katliste .katart{color:var(--tinte3); font-size:13px; white-space:nowrap} html body ol.katliste .katknoepfe{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-left:auto} html body ol.katliste button.katschieb:not(#nie){--knopf-min:0; width:44px; min-width:44px; height:44px; padding:0; display:inline-flex; align-items:center; justify-content:center} html body ol.katliste button.katschieb[data-richtung="-1"] .ikon{transform:rotate(-90deg)} /* Ruhig statt grün (gemessen 390 px: zwei gefüllte grüne Knöpfe je Zeile waren lauter als der Name). Ganz oben gibt es kein „nach oben“, ganz unten kein „nach unten“ — der Platz bleibt, damit nichts springt. */ html body ol.katliste button.katschieb:not(#nie):not(:hover){background:transparent; color:var(--tinte2); border:1px solid var(--linie); box-shadow:none} html body ol.katliste > li:first-child button.katschieb[data-richtung="-1"], html body ol.katliste > li:last-child button.katschieb[data-richtung="1"]{visibility:hidden} /* zz139 — Schriftleiter, Rest (Vorhaben 99): Die Tage im Steuerkalender sind Tabellenzellen (13 px statt 12), „Monat füllen“ ein Knopf (13 px), das „+“ für ein neues Jahr bekommt 44 px Trefferfläche, „Erst nur prüfen“ im Nachlass die Mindestbreite der Knopffamilie (168 statt 150 px). */ html body .stgitter button.sttag:not(#nie){font-size:13px} html body button.stfuellen:not(#nie){font-size:13px} html body form.stjahrplus button:not(#nie){min-width:44px; min-height:44px} html body form.nlform button.nlprobe:not(#nie){min-width:168px} html body ol.katliste button.katschieb[data-richtung="1"] .ikon{transform:rotate(90deg)} html body ol.katliste form.katwegform{margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px} html body ol.katliste .katmeldung{margin:4px 0 0; font-size:13px} html body ol.katliste .katmeldung:empty{display:none} html body ol.katliste .katmeldung.gut{color:var(--gut)} html body ol.katliste .katmeldung.schlecht{color:var(--bad)} /* SCHRIFTLEITER: SIEBEN STUFEN (29.09.2026, Vorhaben 95 und 99). Die Leiter: 12 Beiwerk und Hinweise · 13 Tabellen und Nebenzeilen · 14,5 Knöpfe und Bedienelemente · 15 Fließtext · 17 Abschnittsüberschriften · 24 Modultitel · 46 die große Zahl. In EINEM Zug im ganzen Stylesheet auf die nächste Stufe gesetzt (573 Angaben) — 11 bis 12,5 → 12, 13,5 → 13, 14 → 14,5, 15,5 und 16,5 → 15, 18 und 19 → 17, 20 bis 30 → 24. Bewusst ausgenommen: Beschriftungen in Grafiken (SVG, eigene Maßstäbe), 16 px in Eingabefeldern (darunter zoomt das iPhone beim Antippen hinein) und die große Zahl mit clamp(). Vorher gemessen 34 Größen über alle Seiten, danach 24 — der Rest sind Grafikbeschriftungen und Inline-Angaben in Vorlagen. Vorab in allen 36 Seiten × 5 Breiten simuliert: Gestaltwächter ohne neuen Befund. */ @media (max-width:560px){ html body section.katbereich{padding:16px} } /* zz131 — Tabellen als Karten auf dem Telefon: Zahlen rechtsbündig (29.09.2026, Chris: „Zahlen werden rechts … angezeigt“ — unter „Alle zwölf Monate“ standen sie linksbündig). Beschriftung und Wert jeder Zahlenzelle stehen rechts in ihrer Spalte, so liegen die Zahlen beider Spalten Karte für Karte exakt untereinander. Text (z. B. die Grundlage) bleibt links. */ @media (max-width:560px), (pointer:coarse) and (max-height:480px){ html body table.tkarten tr:not(.tkgruppe):not(.tkform) > :is(td,th).z:not(.tktitel), html body table.tkarten tr:not(.tkgruppe):not(.tkform) > :is(td,th).z:not(.tktitel) > .tkwert, html body table.tkarten tr:not(.tkgruppe):not(.tkform) > :is(td,th).z:not(.tktitel)::before{text-align:right} } /* EINSPIELEN EINER SICHERUNG (29.09.2026): Vorschau als Tabelle, Zahlen rechtsbündig in tabellarischen Ziffern, geänderte Zeilen hervorgehoben; die zwei Knöpfe (einspielen, verwerfen) in einer Zeile mit Luft. */ div.einspielen{margin-top:22px; padding-top:18px; border-top:1px solid var(--linie)} div.einspielen > h4{margin:0 0 6px; font-size:15px} div.einspielen label.feld{margin:0 0 10px} table.einspiel{min-width:0; width:100%; border-collapse:collapse; font-size:14px} table.einspiel th, table.einspiel td{padding:6px 10px; border-bottom:1px solid var(--linie); text-align:left} table.einspiel th.z, table.einspiel td.z{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap} table.einspiel tr.anders td{font-weight:600} div.einspieltun{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:var(--luft-tun, 22px)} @media (max-width:560px){ div.einspieltun form, div.einspieltun form button{width:100%} } div.einspieltun form{margin:0} /* KLEINE TELEFONE (30.09.2026, Gestalt-Wächter @320 px): Der Filter „alle / wiederkehrend / einmalig“ ragte 24 px aus der Karte. Unter 375 px rücken die Beschriftungen enger (9 statt 14 px seitlich). */ @media (max-width:360px){ details.gegen nav.ggsicht > button, details.gegen nav.ggsicht > a{padding-left:9px; padding-right:9px} } /* PROTOKOLL AUF KLEINEN TELEFONEN (30.09.2026, Gestalt-Wächter @320 px): „Entwicklung 799 / Betrieb 384 / Alles“ war 313 px breit — die Seite rollte seitlich (345 px Dokumentbreite). Unter 375 px rücken die Beschriftungen enger. */ @media (max-width:360px){ nav.umschalter.prsicht > a{padding-left:7px; padding-right:7px} } /* SCHUTZRAUM UM BEDIENELEMENTE — REST (30.09.2026, Gestalt-Wächter „knopfluft“, Gesetz: mindestens 12 px Luft um jeden Knopf). Gemessen und behoben: Verträge-Zeile (Feldknöpfe 2–4 px), Ziele (Satz über „Ändern“ 10 px), Meilenstein-Betrag (2 px unter dem Titel), Konten „Übernehmen“ (10 px), Gewerbe-Karten „Entfernen“ (6 px), Marke (10 px). Oben geändert: Abstände in .vttun, .imknoepfe, .dltun, .md-tun. */ .zlsatz + .dltun{margin-top:12px} ol.kmliste button.bmfeld.kmzahl{margin:12px -6px} html body div.dpstart{gap:12px} @media (max-width:560px), (pointer:coarse) and (max-height:480px){ html body table.gwtabelle.tkarten tr:not(.tkgruppe):not(.tkform) > td.sttun{padding-top:12px} } /* Ein Knopf im Raster trägt seine eigene Breite, nicht die der Spalte („Holen und anlegen“ war 250 px breit). */ form.bmneuholen > button{justify-self:start} /* „Weiter bei Tage“ im Steuer-Überblick: Familienbreite (CI-Wächter: 143 px statt mindestens 168 px). */ html body .vstun a.knopf{min-width:168px} /* Marke (30.09.2026, Gestalt-Wächter @834/1194 px): Zwischen der Dateizeile („bank-… · Stand“) und den Knöpfen „Ersetzen / Übernehmen / Entfernen“ standen 11 px. */ p.md-stand + .md-tun{margin-top:12px} /* DAS TAGFELD IST FÜR DEN FINGER DA (30.09.2026, Christian: „Schreinerei Herzing … ich kann nach wie vor nicht das Datum ändern. Es ist nach wie vor gesperrt.“). Gemessen @440 px: Das Tagfeld war 14 × 17 px groß — auf dem iPhone praktisch nicht zu treffen; der Finger landete auf der Zeile daneben. Jetzt ist die ganze Datumshülle (52 × 30 px, dazu 7 px Saum oben und unten) die Trefferfläche: Ein Tippen irgendwo darauf öffnet das Tagfeld. */ li.bu .butaghuelle{cursor:text; position:relative} li.bu .butaghuelle::before{content:""; position:absolute; left:50%; top:50%; width:max(100%, 44px); height:max(100%, 44px); transform:translate(-50%,-50%)} /* TREFFERFLÄCHE FÜR TEXT UND BETRAG (30.09.2026, Vorhaben 226): Die Felder sind 30 px hoch — der Finger braucht 44 px. Statt klobiger Felder liegt hinter Name und Betrag eine unsichtbare Fläche von mindestens 44 × 44 px; ein Tippen darauf öffnet das Feld (app.js). */ li.bu .bufeld, li.bu .buwertfeld{position:relative} li.bu .bufeld::before, li.bu .buwertfeld::before{content:""; position:absolute; left:50%; top:50%; width:max(100%, 44px); height:max(100%, 44px); transform:translate(-50%,-50%)} li.bu .bufeld > *, li.bu .buwertfeld > *{position:relative; z-index:1} li.bu .butaghuelle input.butag{position:relative; z-index:1} /* „MONATLICH“ STEHT IMMER UNTER DEM NAMEN, AN DERSELBEN KANTE (30.09.2026). Christian: „Diese Einstufungen monatlich … die flattern jetzt. Die stehen nicht in einer Ebene unter den Namen der Buchungen … Manchmal steht monatlich direkt dahinter, dann wieder drunter … mit Versatz. Es muss einheitlich sein.“ Gemessen @1194 px: Die Zusatzzeile stand je nach Namenslänge daneben (882/820/812 px) oder darunter — dann 6 px links vom Namen (175 statt 181 px). Jetzt: Name und Zusatz sind zwei Zeilen, immer. Der Zusatz beginnt an der ersten Buchstabenkante des Namens (Rand 1 px + Innenabstand 6 px), und ein fester Name trägt dieselbe Box wie ein Eingabefeld — gebucht und geplant stehen gleich. */ html body li.bu .bufeld{flex-direction:column; align-items:stretch; flex-wrap:nowrap; row-gap:0} html body li.bu .bufeld > .buwiederkehr{align-self:flex-start; padding-left:7px; margin:0} html body li.bu .bufeld > span.butext{box-sizing:border-box; padding:5.5px 0 5.5px 6px; border:1px solid transparent} /* KOPFLEISTE FÜR DEN FINGER (30.09.2026, Gestalt-Wächter „treffer“ @375 px): Die runden Kopfknöpfe (32 px) und „Menü schließen“ (38 px) bekommen eine unsichtbare Trefferfläche von 44 × 44 px — sichtbar ändert sich nichts. „Menü schließen“ bleibt absolut gesetzt. */ html body .kopfknopf{position:relative} html body .kopfknopf::after, html body button.mnzu::after{content:""; position:absolute; left:50%; top:50%; width:max(100%, 44px); height:max(100%, 44px); transform:translate(-50%,-50%)} /* FINGERFLÄCHEN ÜBERALL (30.09.2026, Vorhaben 226): Seitenweite Messung (12 Seiten, 375 und 1194 px, Finger) fand 30 Bauarten unter 44 px. Jede bekommt eine unsichtbare Trefferfläche von mindestens 44 × 44 px — sichtbar ändert sich nichts. Gilt für jede Bedienung (auch die Maus trifft leichter), damit Messung und Gerät dasselbe sehen. Felder (Urlaub, Nachlass) werden echte 44 px hoch, wie bei Apple; Schieberegler behalten ihren Platz. */ html body .alform .bkknopf, html body .monatskopf .mkz, html body .monatskopf a.mblatt, html body .ggsicht a, html body .ggsicht button, html body .tabwahl a, html body .umschalter:not(.konten) a, html body .starchivliste a, html body .knopfleise, html body a.nlholen, html body .vsapzeile a, html body .vsimmoliste li > a, html body .mnziehen button, html body .nlfuss a, html body .nlhwege a, html body .frinfo > summary, html body .frneu > summary, html body .stkalauf > summary, html body .vtplan > summary, html body .vsmehr > summary, html body .ubvergeben > summary, html body .nlaendern > summary{position:relative} html body .alform .bkknopf::after, html body .monatskopf .mkz::after, html body .monatskopf a.mblatt::after, html body .ggsicht a::after, html body .ggsicht button::after, html body .tabwahl a::after, html body .umschalter:not(.konten) a::after, html body .starchivliste a::after, html body .knopfleise::after, html body a.nlholen::after, html body .vsapzeile a::after, html body .vsimmoliste li > a::after, html body .mnziehen button::after, html body .nlfuss a::after, html body .nlhwege a::after, html body .frinfo > summary::after, html body .frneu > summary::after, html body .stkalauf > summary::after, html body .vtplan > summary::after, html body .vsmehr > summary::after, html body .ubvergeben > summary::after, html body .nlaendern > summary::after, html body .ubwerkzeug > summary::before{content:""; position:absolute; left:50%; top:50%; width:max(100%, 44px); height:max(100%, 44px); transform:translate(-50%,-50%)} html body .herleitung > summary{min-height:44px; box-sizing:border-box} html body input.ubvfeld, html body input.ubvwas, html body .nlform label > input[type=file], html body .nlform label > input[type=date]{min-height:44px; box-sizing:border-box} html body .zsregler input[type=range]{height:44px; margin-top:-9px; margin-bottom:-9px} /* KONTEN OHNE FRISCHEN STAND (30.09.2026, Vorhaben 227): eine ruhige Zeile unter dem Abrufsatz — dunkle Schrift, nur das Zeichen trägt die Warnfarbe. Volle Breite der Leiste, bricht um statt seitlich zu schieben. */ html body .abrufleiste .alluecke{flex:1 1 100%; margin:0; display:flex; align-items:flex-start; gap:9px; font-size:13px; line-height:1.45; color:var(--tinte); min-width:0; overflow-wrap:anywhere} html body .abrufleiste .alluecke > svg{flex:none; color:var(--bad); margin-top:2px} html body .abrufleiste .alluecke b{font-weight:600} /* UNTERSEITEN FÜR FINGER UND JEDE BREITE (02.10.2026, Vorhaben 188/11). Gemessen: 40 Seiten (12 Haupt-, 28 Unterseiten) bei 375, 440, 834, 1024 und 1194 px mit dem Gestalt-Wächter. Befunde und was hier hilft: zu kleine Fingerziele (Verwaltung, Steuer, Versicherung, Urlaub, Ansicht „Gruppen“) → unsichtbare 44-px-Fläche bzw. 44 px hohe Felder; Kreisdiagramm in „Gruppen“ ragte bis 35 px aus der Karte → nie breiter als die Karte; Haushaltsgruppe am Telefon 15 px zu breit (Rasterspur nach Inhalt) → Spur passt sich der Karte an, lange Wörter trennen; Jahrestabelle am iPad quer 26 px zu breit → etwas weniger Zellenrand zwischen 900 und 1100 px; Datum in der Steuer-Zeitleiste am iPad senkrecht Ziffer für Ziffer gebrochen → Datum bricht nicht mehr um; Abstände unter 12 px am Urlaubs-Knopf und an „Entfernen“ → 12 px. */ html body .vh-tun a.weg, html body details.vsanotiz > summary, html body li.ggzeile > details > summary, html body details.mehrzeilen > summary, html body details.mteingaenge > summary, html body details.vsarchiv > summary, html body details.gegen > summary, html body .ktwas a.ktdok, html body a.vwzurueck, html body a.mtzutest, html body p.vsauchweg a, html body main small > a[href]{position:relative} html body .vh-tun a.weg::after, html body details.vsanotiz > summary::after, html body li.ggzeile > details > summary::after, html body details.mehrzeilen > summary::after, html body details.mteingaenge > summary::after, html body details.vsarchiv > summary::after, html body details.gegen > summary::after, html body .ktwas a.ktdok::after, html body a.vwzurueck::after, html body a.mtzutest::after, html body p.vsauchweg a::after, html body main small > a[href]::after, html body button.bmfeld.bmmenge::before{content:""; position:absolute; left:50%; top:50%; width:max(100%, 44px); height:max(100%, 44px); transform:translate(-50%,-50%)} html body .vh-tun form input, html body label.kbfeld input, html body label.kbfeld select{min-height:44px; box-sizing:border-box} html body .mtfarbe input{min-width:44px; min-height:44px; box-sizing:border-box} html body .awkreis{max-width:100%} html body .awraster > *{min-width:0} html body form.ubform{row-gap:12px} @media (min-width:901px) and (max-width:1180px){ html body section.jahrtabelle div.tabellenrahmen :is(th,td){padding-left:10px; padding-right:10px} } html body ol.awliste{grid-template-columns:minmax(0,1fr)} html body table.ubtab td.ubw form{padding-top:6px} html body td.stdatum .bmfeld{white-space:nowrap} html body li.awzeile{grid-template-columns:minmax(0,1fr)} html body ul.awdetail{grid-template-columns:minmax(0,1fr)} html body ul.awdetail li > span{min-width:0; hyphens:auto; overflow-wrap:break-word} /* ZIEHGRIFFE SICHTBAR (03.10.2026, Chris: „GO“). Griff und Pfeile auf der Seite Menschen erschienen nur beim Überfahren mit der Maus — am Telefon unsichtbar, aber antippbar, und sie lagen halb unter dem Kartenkopf (gemessen bei 375 px). Jetzt: eine ruhige eigene Zeile oben rechts in der Karte, immer sichtbar, nichts überdeckt. Die Pfeile zeigen, wohin die Karte wandert: in einer Spalte (Telefon) nach oben und unten, nebeneinander (iPad, Rechner) nach links und rechts. „Nach vorn“ zeigte bisher nach rechts — das war verkehrt herum. */ html body li.mnkarte > .mnziehen{position:static; opacity:1; display:flex; justify-content:flex-end; gap:6px; margin:-10px -10px 6px 0} html body .mnpfeil[data-hin="-1"] .ikon{transform:rotate(180deg)} html body .mnpfeil[data-hin="1"] .ikon{transform:none} @media (max-width:760px){ html body .mnpfeil[data-hin="-1"] .ikon{transform:rotate(-90deg)} html body .mnpfeil[data-hin="1"] .ikon{transform:rotate(90deg)} } /* STAMMBAUM UND AHNENGALERIE (03.10.2026, Vorhaben 83/88). Generationen von oben nach unten, je Paar ein Familienblatt, sanfte Linien vom Kind zu seinem eigenen Blatt (hinter den Karten gezeichnet). Am Telefon steht alles untereinander; gewischt wird nur nach oben und unten, durch die Zeit. */ .sbbaum{position:relative; margin-top:8px} .sbbaum > svg.sblinien{position:absolute; left:0; top:0; overflow:visible; pointer-events:none; z-index:0} .sbbaum > svg.sblinien path{fill:none; stroke:var(--tinte3); stroke-opacity:.45; stroke-width:1.5} .sbstufe{position:relative; z-index:1; margin:0 0 30px} .sbstufetitel{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--tinte3); margin:0 0 10px; text-align:center} .sbstufeblatt{display:flex; flex-wrap:wrap; justify-content:center; gap:16px} .sbfam{position:relative; background:var(--flaeche); border:1px solid var(--linie); border-radius:16px; padding:14px 12px 12px; max-width:100%; box-sizing:border-box} .sbfam.getrennt{border-style:dashed} .sbpaar{display:flex; align-items:flex-start; justify-content:center; gap:4px} .sbring{display:flex; flex-direction:column; align-items:center; gap:2px; padding-top:16px; min-width:44px; color:var(--tinte3); font-size:12px; line-height:1.3; text-align:center} .sbring .sbzeichen{font-size:20px; line-height:1; color:var(--akzent); margin:0} .sbringstand{max-width:72px} .sbkinder{position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:12px; padding-top:14px; border-top:1px solid var(--linie)} .sbkinder::before{content:""; position:absolute; top:-13px; left:50%; height:12px; border-left:1px solid var(--linie)} html body a.sbperson{display:flex; flex-direction:column; align-items:center; gap:3px; width:112px; min-height:44px; padding:6px 4px; border-radius:12px; text-decoration:none; color:inherit; text-align:center; box-sizing:border-box} html body a.sbperson:hover{background:var(--flaeche2)} html body a.sbperson .mnmarke{width:52px; height:52px; flex:none} html body a.sbperson .mnmarke img{width:100%; height:100%; object-fit:cover; border-radius:50%} html body a.sbperson.tot .mnmarke{filter:grayscale(1); opacity:.85} .sbname{font-size:14px; font-weight:600; line-height:1.25} .sbgeb{font-size:12px; color:var(--tinte3)} .sbleben{font-size:12px; line-height:1.4; color:var(--tinte2); font-variant-numeric:tabular-nums} .sbleben .sbzeichen{color:var(--tinte3); margin:0 2px 0 4px} .sbleben .sbzeichen:first-child{margin-left:0} .sbfehlt{color:var(--tinte3)} .sbzeichen{font-weight:600} .sblegende{display:block; margin-top:6px; color:var(--tinte3); font-size:13px} .sblegende .sbzeichen{margin:0 3px 0 12px} .sblegende .sbzeichen:first-child{margin-left:0} .sbverwtitel{margin-top:30px} html body ul.mnverwandte li.mnkarte > .mnziehen{display:none} .sbtitel{margin-top:14px} ol.sbweg{list-style:none; margin:4px 0 0; padding:0; display:grid; gap:8px} ol.sbweg li{display:grid; grid-template-columns:96px minmax(0,1fr); gap:10px; font-size:14px; line-height:1.4} .sbzeit{color:var(--tinte3); font-variant-numeric:tabular-nums; text-align:left} .sbwas{display:flex; flex-direction:column; min-width:0} .sbort, .sbtext{font-size:13px; color:var(--tinte2)} .sbklein{font-size:13px; color:var(--tinte3); white-space:nowrap} .sbklein .sbzeichen{margin-right:3px} /* NUR DER STIFT (03.10.2026). Christian: „Ändern und ergänzen … mach das bitte weg … einfach nur ein Stiftsymbol.“ Die Karte trägt unten rechts einen runden Stift (44 px, Tooltip „Ändern“); kein Kasten, kein Pfeil, keine Bewegung beim Überfahren — nur die Farbe wechselt. Geöffnet steht der Stift in der Akzentfarbe. */ html body details.herleitung.mnaendern{background:none; border:0; border-radius:0; margin:6px 0 0} html body details.herleitung.mnaendern > summary.stiftknopf{display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin:0 -8px 0 auto; padding:0; border:0; border-radius:50%; background:transparent; color:var(--tinte3); list-style:none; cursor:pointer} html body details.herleitung.mnaendern > summary.stiftknopf::after{content:none} html body details.herleitung.mnaendern > summary.stiftknopf::-webkit-details-marker{display:none} html body details.herleitung.mnaendern > summary.stiftknopf .ikon{width:20px; height:20px} html body details.herleitung.mnaendern > summary.stiftknopf:hover{background:var(--flaeche2); color:var(--tinte)} html body details.herleitung.mnaendern[open] > summary.stiftknopf{color:var(--akzent); background:color-mix(in srgb, var(--akzent) 12%, var(--flaeche))} html body details.herleitung.mnaendern > .hlinhalt{padding:4px 0 6px} /* Gestorben: das Alter bleibt am Todestag stehen, mit Kreuz (03.10.2026). */ html body .mnalter.tot{color:var(--tinte3)} /* RUFNAME UND GESCHIEDEN (03.10.2026). Der Rufname steht in Anführungszeichen beim Namen; eine geschiedene Ehe trägt das Zeichen ⚮ in Grau statt ⚭ in der Akzentfarbe, ihr Blatt ist gestrichelt umrandet. */ .mnruf{font-weight:500; color:var(--tinte3)} .sbruf{font-size:12px; color:var(--tinte2); line-height:1.2} .sbring.getrennt .sbzeichen{color:var(--tinte3)} /* 03.10.2026: „Eine Person im Blick“ (alles andere ausblenden) ist vom Schubblatt abgelöst — Regeln entfernt. EINE PERSON IM BLICK (03.10.2026, zz200). Christian: „Wenn man eine Person öffnet … sollen alle anderen Personen ausgeblendet werden … über die gesamte Seitenbreite … nicht säulenartig bis nach unten.“ Offen ist der Stift einer Karte → alles andere auf dem Blatt tritt zurück, die Karte nimmt die ganze Breite. */ html body ul.mnliste > li.mnkarte:has(> details.mnaendern[open]) > .mnziehen{display:none} html body ul.mnliste > li.mnkarte{scroll-margin-top:16px} /* Der Stift wird zum Schließen-Kreuz und bleibt beim Blättern oben in Reichweite. */ html body details.mnaendern > summary .nuroffen{display:none} html body details.mnaendern[open] > summary .nurzu{display:none} html body details.mnaendern[open] > summary .nuroffen{display:inline-block} html body details.herleitung.mnaendern[open] > summary.stiftknopf{position:sticky; top:12px; z-index:5} /* Breite nutzen: Blöcke nebeneinander, die Kerndaten über die ganze Breite in mehreren Spalten. */ html body details.mnaendern .mnblock{min-width:0} @media (min-width:901px){ html body li.mnkarte > details.mnaendern[open] > .hlinhalt{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-flow:row dense; gap:8px 48px; align-items:start} html body li.mnkarte > details.mnaendern[open] > .hlinhalt > .mnb-kern{grid-column:1/-1} html body li.mnkarte > details.mnaendern[open] .mnb-kern form.ubform{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (min-width:1181px){ html body li.mnkarte > details.mnaendern[open] .mnb-kern form.ubform{grid-template-columns:repeat(4,minmax(0,1fr))} } /* Sterbeort erst, wenn ein Todestag eingetragen ist. */ html body label.mnsterbeort.leer{display:none} /* Am Telefon: eine Spalte, die nie breiter wird als der Bildschirm — auch nicht durch ein langes Feld in der offenen Karte. */ @media (max-width:760px){html body ul.mnliste{grid-template-columns:minmax(0,1fr)}} html body .mnbild label.dateiwahl{flex-wrap:wrap} /* EIN MENSCH, MEHRERE EHEN (03.10.2026, zz203). Christian: „das passt jetzt nicht wirklich … da mitten rein.“ Wer mehrere Ehen hatte, steht einmal oben im Blatt; darunter seine Ehen nebeneinander, in der Zeit von links nach rechts, jede mit Zeichen, Partner und Kindern. Eine geschiedene Ehe trägt einen gestrichelten Rahmen. */ html body .sbmitte{display:flex; justify-content:center} html body .sbehen{position:relative; display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:12px; margin-top:12px; padding-top:14px; border-top:1px solid var(--linie)} html body .sbehen::before{content:""; position:absolute; top:-13px; left:50%; height:12px; border-left:1px solid var(--linie)} html body .sbehe{display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 8px; border:1px solid transparent; border-radius:12px; min-width:128px; box-sizing:border-box} html body .sbehe.getrennt{border-style:dashed; border-color:var(--linie)} html body .sbehe > .sbring{padding-top:0} html body .sbehe > .sbkinder{align-self:stretch} /* Ort der Hochzeit unter dem Ring (03.10.2026). */ html body .sbringort{font-size:12px; color:var(--tinte3)} /* EINE GENERATION, EINE REIHE (03.10.2026, zz206). Christian: „die Linien, die da durchführen, da ist irgendwas nicht so, wie es sein sollte.“ Brach eine Generation in zwei Zeilen um, liefen Linien hinter Karten hindurch. Ab Tabletbreite bleibt jede Generation in einer Reihe; ist sie breiter als das Blatt, wischt man im Baum zur Seite (am iPad erlaubt). Am Telefon steht weiter alles untereinander. */ @media (min-width:761px){ html body .sbbaum{overflow-x:auto; overflow-y:hidden; padding-bottom:6px} html body .sbstufeblatt{flex-wrap:nowrap; width:max-content; min-width:100%; box-sizing:border-box; padding:0 4px} html body .sbstufeblatt > .sbfam{flex:none} } /* Am Telefon stehen die Blätter untereinander; eine Linie liefe dort hinter jeder Karte durch. Deshalb dort keine Linien — wer zu wem gehört, zeigt das Blatt selbst, und ein Tipp auf einen Menschen führt zu seiner Karte. */ @media (max-width:760px){ html body .sbbaum > svg.sblinien{display:none} } /* NIE ABGESCHNITTEN (03.10.2026, zz208). Ein Blatt mit vielen Kindern wird nicht beliebig breit — die Kinder brechen in eine zweite Reihe um. Passt eine Generation trotzdem nicht, verkleinert das Skript den Baum; nur wenn auch das nicht reicht, wird gewischt — mit sichtbarem Rollbalken und Hinweis. */ @media (min-width:761px){ html body .sbstufeblatt > .sbfam:not(.sbmehr){max-width:470px} html body .sbbaum::-webkit-scrollbar{height:10px} html body .sbbaum::-webkit-scrollbar-thumb{background:var(--linie); border-radius:5px} html body .sbbaum::-webkit-scrollbar-track{background:transparent} } html body .sbwischen{color:var(--tinte3); font-size:13px; margin:4px 0 0} /* IN EINER FLUCHT (03.10.2026, zz210). Christian: „die Einträge … Vornamen Lucien Mio … nicht in einer Flucht mit Geburtsort … flatternder Eindruck.“ Die Karte hat zwei Tabellen untereinander; jede maß ihre Beschriftung selbst. Jetzt haben alle dieselbe feste Spalte (breiteste Beschriftung gemessen: 73 px, „Geboren als“). */ html body dl.mndaten{grid-template-columns:88px minmax(0,1fr)} html body ol.sbweg li{grid-template-columns:88px minmax(0,1fr); gap:16px} /* ÜBERSICHT RUHIG HALTEN (03.10.2026). Christian: „Wenn man in die Person reingeht, reicht es, wenn man diese Informationen kriegt. Aber nicht in der Übersicht … Es wird einfach zu viel.“ In der Übersicht stehen nur Geburtstag, Geburtsort, Hobbys und — wenn es so ist — der Tod. Vornamen, Herkunft, Verwandtschaft und Lebensweg erscheinen, sobald die Person über den Stift geöffnet ist. */ html body li.mnkarte:not(:has(> details.mnaendern[open])) dl.sbdaten > :not(.sbimmer){display:none} html body li.mnkarte:not(:has(> details.mnaendern[open])) .sbtitel, html body li.mnkarte:not(:has(> details.mnaendern[open])) ol.sbweg{display:none} html body li.mnkarte:not(:has(> details.mnaendern[open])) dl.sbdaten:not(:has(> .sbimmer)){display:none} /* ANNAHME ODER BELEGT (03.10.2026, Vorhaben 89) — derselbe Wahlknopf wie „Paketpreis“, belegt in Grün. */ html body button.bmfeld.ubbeleg{margin-left:8px} /* Gleiche Wahl, gleiches Aussehen wie „Paketpreis“; beide bekommen eine Fingerfläche von 44 px, ohne größer auszusehen. */ html body button.bmfeld.ubpaket{position:relative} html body button.bmfeld.ubpaket::before{content:""; position:absolute; left:-4px; right:-4px; top:50%; height:44px; transform:translateY(-50%)} html body p.ubannahme{margin-top:10px} /* SCHNELLWAHL AUCH AM IPAD (03.10.2026, zz222) — siehe kontoleiste(). Die Personen liegen über der linken Hälfte der Menüzeile; ihr Platzhalter „wo bin ich“ tritt zurück, weil die aktive Person ohnehin markiert ist. */ @media (max-width:1180px){ html body .kopfkasten{position:relative} html body .kopf nav.umschalter.konten.personen{display:flex; position:absolute; left:8px; z-index:3; flex-wrap:nowrap; align-items:center} html body .kopf nav.umschalter.konten.personen > :not(.pers):not(.thema){display:none} html body .kopf nav.umschalter.konten.personen > .zuviel{display:none} html body .kopf nav.umschalter.konten.personen{width:auto; right:auto} html body div.kopf div.kopfkasten > nav.umschalter.konten.personen > a.pers, html body div.kopf div.kopfkasten > nav.umschalter.konten.personen > a.thema{min-height:46px; min-width:46px; white-space:nowrap; justify-content:center; box-sizing:border-box} html body .kopf nav.umschalter.konten.personen.knapp .pname{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} html body .kopfkasten:has(> nav.personen) details.mn > summary .mnhier{visibility:hidden} } /* ===== ECKDATEN AN DER REISE (03.10.2026, Vorhaben 89 Punkt 3) ===== */ dl.ubeck{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;margin:6px 0 10px} dl.ubeck>div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:8px;align-items:baseline} dl.ubeck dt{display:flex;align-items:center;gap:6px;color:var(--tinte2);font-size:.9em} dl.ubeck dd{margin:0;overflow-wrap:anywhere} fieldset.ubfluege{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px} fieldset.ubfluege legend{grid-column:1/-1;padding:0;margin-bottom:4px;font-weight:600} fieldset.ubfluege legend b{display:block;font-weight:400;font-size:12px;color:var(--tinte3)} /* ===== EHELEUTE NEBENEINANDER, LUPE, GRÖSSE (03.10.2026) ===== */ html body .sbmittezeile{flex-wrap:nowrap} html body .sbehepartner{display:flex; justify-content:center} html body .sbehepartner.getrennt{opacity:.85} html body .sbmehr .sbehen::before{display:none} html body .sbehewer{margin:0 0 6px; font-size:12px; line-height:1.3; color:var(--tinte3); text-align:center} .sbwerkzeug{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:4px 0 8px} .sbwerkzeug .knopfleise{min-height:44px; min-width:44px} .sblupehinweis{font-size:12px; color:var(--tinte3)} @media (max-width:760px){ .sbwerkzeug{display:none} } @media (hover:none), (pointer:coarse){ .sblupehinweis{display:none} } @media (hover:hover) and (pointer:fine){ .sbbaum{cursor:zoom-in} } .sblupe{position:fixed; width:260px; height:260px; border-radius:50%; overflow:hidden; pointer-events:none; display:none; z-index:60; background:var(--flaeche); border:2px solid var(--linie); box-shadow:0 10px 30px rgba(0,0,0,.22)} .sblupe.an{display:block} .sblupeinhalt{position:absolute; left:0; top:0; transform-origin:0 0} .sblupe .sbbaum.sbklon{overflow:visible; margin:0} /* Name-Spalte darf schrumpfen und umbrechen — sonst schiebt ein langer Buchungstext die Zeile am Telefon über den Rand (gemessen 03.10.2026, 390 px: +4 px). */ ul.ubzliste li{grid-template-columns:auto minmax(0,1fr) auto auto} ul.ubzliste .ubzwas{overflow-wrap:anywhere} /* DAS ZAHNRAD DER LUPE (03.10.2026): oben rechts im Stammbaum, nur mit Maus. Rückmeldung nur über Farbe. */ section.sbseite{position:relative} .sblupeeinst{position:absolute; top:14px; right:14px; z-index:62} .sbzahnrad{width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--linie); border-radius:12px; background:var(--flaeche); color:var(--tinte2); cursor:pointer; padding:0} .sbzahnrad:hover, .sbzahnrad[aria-expanded="true"]{color:var(--tinte); background:var(--flaeche2)} .sbzahnrad svg{width:20px; height:20px} .sblupetafel{position:absolute; right:0; top:52px; width:280px; box-sizing:border-box; padding:14px 16px; display:grid; gap:12px; background:var(--flaeche); border:1px solid var(--linie); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.16)} .sblupetafel[hidden]{display:none} .sblupetitel{margin:0; font-weight:600} .sblupetitel.sbleise{font-weight:400; font-size:12px; color:var(--tinte3)} .sbregler{display:grid; gap:6px; font-size:14px} .sbregler span{display:flex; justify-content:space-between; gap:8px} .sbregler output{font-variant-numeric:tabular-nums; color:var(--tinte2)} .sbregler input[type=range]{width:100%; min-height:44px; margin:0; accent-color:var(--akzent)} @media (hover:none), (pointer:coarse){ .sblupeeinst{display:none} } /* Gemessen 03.10.2026: eine allgemeine Knopfregel zog das Zahnrad auf 168 px Breite — hier gilt das Quadrat. */ html body section.sbseite .sblupeeinst > button.sbzahnrad{width:44px; min-width:44px; max-width:44px; height:44px; padding:0; flex:0 0 44px} /* LINIEN UND TEXTE BEHINDERN SICH NIE (03.10.2026). Christian: „Generation der Großeltern … ist auf der Linie … Linien und Texte dürfen sich niemals behindern.“ Der Generationstitel liegt jetzt ÜBER den Linien auf eigener, blattfarbener Fläche mit Rand: Wo eine Linie den Titel kreuzt, verschwindet sie dahinter — die Schrift bleibt frei. */ html body .sbbaum .sbstufe{position:relative} html body .sbbaum .sbstufetitel{position:relative; z-index:2; display:table; margin:0 auto 10px; padding:3px 12px; background:var(--flaeche); border-radius:999px; box-shadow:0 0 0 6px var(--flaeche)} /* STEUERZEICHEN OBEN RECHTS (03.10.2026): Zoom −, Einpassen, Zoom +, Zahnrad — alle 44 × 44, nur Farbwechsel. */ html body section.sbseite .sblupeeinst{display:flex; gap:6px} html body section.sbseite .sblupeeinst > button.sbzahnrad{width:44px; min-width:44px; max-width:44px; height:44px; padding:0; flex:0 0 44px} @media (max-width:760px){ html body section.sbseite .sblupeeinst .sbgroesse{display:none} } @media (hover:none), (pointer:coarse){ html body section.sbseite .sblupeeinst{display:flex} html body section.sbseite .sblupeeinst .sbeinst{display:none} } @media (max-width:760px) and ((hover:none) or (pointer:coarse)){ html body section.sbseite .sblupeeinst{display:none} } /* LUPE AN/AUS (03.10.2026): hinterlegt = an, schlicht = aus; vor dem Schalter ein kleiner Abstand als Gruppe „Lupe“. */ html body section.sbseite .sblupeeinst > button.sblupean{margin-left:10px} html body section.sbseite .sblupeeinst > button.sblupean[aria-pressed="true"]{background:var(--flaeche2); color:var(--akzent); border-color:var(--akzent)} html body .sbbaum.sbohnelupe{cursor:auto} /* Zwei Steuerzeichen in einer Zeile der Buchungsliste (03.10.2026): eine Spalte, nicht zwei — sonst bricht die Zeile um. */ ul.ubzliste .ubztun{display:flex; gap:4px; align-items:center} /* ================================================================== VITA IM LEBENSWEG (03.10.2026, Vorhaben 88): Station mit Stift, Unterlagen als Chips (44 px), keine Bewegung beim Überfahren. ================================================================== */ html body ul.mnmerkmale.vtstationen > li{padding:0} details.vtstation > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:4px 4px 4px 14px;cursor:pointer;list-style:none} details.vtstation > summary::-webkit-details-marker{display:none} details.vtstation > summary::after{content:none} .vtkopf{display:flex;align-items:baseline;gap:4px 12px;min-width:0;flex-wrap:wrap} .vtkopf .ikon{width:15px;height:15px;color:var(--tinte3);margin-right:6px;vertical-align:-2px} .vtzeit{color:var(--tinte3);font-variant-numeric:tabular-nums;font-size:13.5px;min-width:88px} .sbag{color:var(--tinte2)} .vtzahl{font-size:12px;color:var(--tinte3);border:1px solid var(--linie);border-radius:99px;padding:1px 8px;white-space:nowrap} .vtstift{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--tinte3);flex:0 0 auto} .vtstift .ikon{width:18px;height:18px} details.vtstation > summary:hover .vtstift, details.vtklein > summary:hover{background:var(--flaeche2);color:var(--tinte)} .vtinnen{padding:4px 14px 14px} details.vtneu{margin-top:8px;border:1px dashed var(--linie);border-radius:12px} h5.vtteil{margin:18px 0 8px;font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:var(--tinte3);font-weight:600} ul.vtliste{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px} html body ul.vtliste > li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:0;background:transparent} a.vtdok{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--linie);border-radius:12px;background:var(--flaeche);color:var(--tinte);text-decoration:none;max-width:100%;min-width:0;font-size:14px} a.vtdok .ikon{width:15px;height:15px;color:var(--tinte3);flex:0 0 auto} a.vtdok span{overflow-wrap:anywhere} a.vtdok em{font-style:normal;color:var(--tinte3);font-variant-numeric:tabular-nums} a.vtdok:hover{border-color:var(--tinte3)} .vtdoks{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} p.vtweitere{margin:10px 0 0;display:grid;gap:4px;font-size:14px} p.vtweitere > span:first-child{color:var(--tinte3);font-size:13px} details.vtklein{flex:0 0 auto} details.vtklein[open]{flex:1 0 100%} details.vtklein > summary{list-style:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--tinte3);cursor:pointer} details.vtklein > summary::-webkit-details-marker{display:none} details.vtklein > summary::after{content:none} html body .vtinnen form.mmweg, html body ul.vtliste form.mmweg{position:static;margin:12px 0 0} html body ul.mnmerkmale.vtstationen li details.vtstation .vtinnen form.mmweg, html body ul.mnmerkmale.vtstationen li ul.vtliste form.mmweg{opacity:1} form.vthoch{margin-top:6px} /* ================================================================== DAS SCHUBBLATT (03.10.2026): fährt von unten hoch, dahinter wird alles abgedunkelt und unscharf. Bewegung nur beim Öffnen und Schließen; wer weniger Bewegung eingestellt hat, bekommt keine. ================================================================== */ #mnSchub{position:fixed;inset:0;z-index:2000} #mnSchub[hidden]{display:none} .mnschubgrund{position:absolute;inset:0;background:rgba(18,18,16,.30);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;transition:opacity .3s ease} .mnschubblatt{position:absolute;left:50%;bottom:0;width:min(1040px,100%);max-height:calc(var(--sicht, 100dvh) - 32px);overflow-y:auto;overscroll-behavior:contain; background:var(--flaeche);border-radius:22px 22px 0 0;box-shadow:0 -12px 48px rgba(0,0,0,.20);transform:translate(-50%,100%); transition:transform .32s cubic-bezier(.2,.8,.2,1);padding:0 0 calc(18px + env(safe-area-inset-bottom))} #mnSchub.auf .mnschubgrund{opacity:1} #mnSchub.auf .mnschubblatt{transform:translate(-50%,0)} @media (prefers-reduced-motion:reduce){.mnschubgrund,.mnschubblatt{transition:none}} html.mnschuboffen, html.mnschuboffen body{overflow:hidden} .mnschubkopf{position:sticky;top:0;z-index:6;display:flex;align-items:center;justify-content:center;height:44px;background:var(--flaeche)} .mnschubgriff{width:40px;height:5px;border-radius:99px;background:var(--linie)} .mnschubzu{position:absolute;right:8px;top:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:transparent;color:var(--tinte2);cursor:pointer;padding:0} .mnschubzu:hover{background:var(--flaeche2);color:var(--tinte)} .mnschubzu .ikon{width:20px;height:20px} html body ul.mnliste.mnschubinhalt{display:block;margin:0;padding:0 8px} html body ul.mnschubinhalt > li.mnkarte{border:0;border-radius:0;padding:4px 14px 8px;background:transparent} html body ul.mnschubinhalt > li.mnkarte > .mnziehen{display:none} /* Im Blatt steht die ganze Person, nicht nur die Kurzfassung der Karte. */ html body #mnSchub li.mnkarte dl.sbdaten{display:grid} html body #mnSchub li.mnkarte dl.sbdaten > *{display:block} html body #mnSchub li.mnkarte .sbtitel{display:block} html body #mnSchub li.mnkarte ol.sbweg{display:grid} html body #mnSchub details.herleitung.mnaendern[open] > summary.stiftknopf{top:48px} li.mnplatzhalter{visibility:hidden} /* Die Namensliste derer, die noch nicht im Baum stehen. */ ul.sbloseliste{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px} ul.sbloseliste a{display:flex;align-items:center;gap:12px;min-height:52px;padding:4px 12px 4px 6px;border-radius:12px;color:var(--tinte);text-decoration:none} ul.sbloseliste a:hover{background:var(--flaeche2)} ul.sbloseliste .mnmarke{flex:0 0 auto} ul.sbloseliste b{font-weight:600;min-width:0;overflow-wrap:anywhere} ul.sbloseliste .sbjahre{margin-left:auto;color:var(--tinte3);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap} /* GEMESSEN 03.10.2026 (zz255): Das Kreuz des Schubblatts war 168 px breit (allgemeine Knopfbreite) — es bleibt ein Kreis. */ html body #mnSchub button.mnschubzu{width:44px; min-width:44px; max-width:44px; height:44px; padding:0; flex:none} /* GEMESSEN 03.10.2026: Die Ehezeile („⚭ 19.11.1945 – 04.12.1980 in Hürth-Hermülheim“) lief am Telefon über den Rand — sie darf umbrechen. */ html body dl.mndaten dd .sbklein{white-space:normal; overflow-wrap:anywhere} /* GEMESSEN 03.10.2026 (390 px): Wer mehrfach verheiratet war, stand mit beiden Partnern in einer Zeile — 497 px breit, das Telefon rollte seitlich. Am Telefon bricht die Zeile um, statt hinauszulaufen. */ @media (max-width:760px){ html body .sbmittezeile{flex-wrap:wrap; row-gap:8px} } /* ================================================================== DIE MASKE DES SCHUBBLATTS (03.10.2026). Christian: „So weiß und einfach nur hingeschissen … das Personenbild … muss richtig groß sein … die 50 Jahre oben rechts hingekackt … Mach da mal bitte ein richtiges Layout.“ Aufbau wie eine Kontaktkarte: oben ein Kopf auf getönter Fläche mit großem Bild, Name, Rolle und Alter als Kapsel; darunter die Gruppen als eigene Flächen (am Rechner zweispaltig), Menschen als Chips mit Bild. ================================================================== */ /* außerhalb des Blatts: Gruppen ohne Titel, alles wie bisher */ h4.mngtitel{display:none} section.mngruppe{display:block} dd.sbchips{display:flex;flex-wrap:wrap;align-items:center;gap:6px} a.sbchip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 4px;border:1px solid var(--linie);border-radius:99px;background:var(--flaeche);color:var(--tinte);text-decoration:none;font-weight:500;max-width:100%} a.sbchip:hover{border-color:var(--tinte3)} a.sbchip span:last-child{overflow-wrap:anywhere} a.sbchip .mnmarke .pbild{width:34px;height:34px;min-width:34px;font-size:14px} /* --- Kopf ------------------------------------------------------- */ html body .mnschubblatt{background:var(--flaeche)} html body .mnschubkopf{position:sticky;top:0;z-index:8;height:52px;background:transparent;pointer-events:none} html body .mnschubkopf > *{pointer-events:auto} .mnschubgriff{position:absolute;left:50%;top:10px;transform:translateX(-50%);background:color-mix(in srgb,var(--tinte3) 45%,transparent)} .mnschubtun{position:absolute;right:12px;top:8px;display:flex;gap:8px} html body #mnSchub .mnschubtun button{width:44px;min-width:44px;max-width:44px;height:44px;padding:0;border:0;border-radius:50%; display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--flaeche) 82%,transparent); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 3px rgba(0,0,0,.10);color:var(--tinte);cursor:pointer;position:static} html body #mnSchub .mnschubtun button:hover{background:var(--flaeche)} html body #mnSchub .mnschubtun button .ikon{width:19px;height:19px} html body #mnSchub .mnschubstift[aria-pressed="true"]{background:var(--akzent);color:#fff} .mnschubblatt:focus{outline:none} html body ul.mnschubinhalt > li.mnkarte > details.mnaendern > summary.stiftknopf{display:none} html body ul.mnliste.mnschubinhalt{padding:0} html body ul.mnschubinhalt > li.mnkarte{padding:0 0 8px;margin-top:-52px} html body #mnSchub li.mnkarte > .mnkopf{flex-direction:column;align-items:center;text-align:center;gap:10px; padding:56px 24px 28px;margin:0 0 20px; background:linear-gradient(180deg,color-mix(in srgb,var(--akzent) 16%,var(--flaeche)) 0%,color-mix(in srgb,var(--akzent) 6%,var(--flaeche)) 62%,var(--flaeche) 100%)} html body #mnSchub li.mnkarte > .mnkopf .mnmarke .pbild{width:176px;height:176px;min-width:176px;font-size:68px;font-weight:600; box-shadow:0 0 0 6px var(--flaeche),0 18px 44px rgba(0,0,0,.20);background:var(--flaeche2);color:var(--tinte2)} html body #mnSchub li.mnkarte > .mnkopf .mnwer{flex:none} html body #mnSchub li.mnkarte > .mnkopf h3{font-size:32px;line-height:1.15;letter-spacing:-.02em;font-weight:700;margin-top:10px} html body #mnSchub li.mnkarte > .mnkopf .mnruf{display:block;font-size:17px;font-weight:500;color:var(--tinte2);margin-top:2px} html body #mnSchub li.mnkarte > .mnkopf p.mnrolle{font-size:16px;margin-top:6px;color:var(--tinte2)} html body #mnSchub li.mnkarte > .mnkopf span.mnalter{display:inline-flex;align-items:baseline;gap:6px;text-align:center; padding:7px 16px;border-radius:99px;background:var(--flaeche);box-shadow:0 1px 3px rgba(0,0,0,.08);font-size:14px;color:var(--tinte2)} html body #mnSchub li.mnkarte > .mnkopf span.mnalter b{display:inline;font-size:17px;line-height:1.2} /* --- Gruppen ---------------------------------------------------- */ html body #mnSchub .mngruppen{padding:0 24px;columns:2 400px;column-gap:20px} html body #mnSchub section.mngruppe{break-inside:avoid;display:block;background:var(--grund);border-radius:18px;padding:4px 20px 10px;margin:0 0 20px} html body #mnSchub section.mngruppe:not(:has(dt, li, p)){display:none} html body #mnSchub h4.mngtitel{display:block;margin:14px 0 4px;font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--tinte3)} html body #mnSchub dl.mndaten{margin:0;grid-template-columns:120px minmax(0,1fr);gap:0;font-size:15.5px} html body #mnSchub dl.mndaten > dt, html body #mnSchub dl.mndaten > dd{padding:12px 0;border-top:1px solid var(--linie);margin:0} html body #mnSchub dl.mndaten > dt:first-of-type, html body #mnSchub dl.mndaten > dt:first-of-type + dd{border-top:0} html body #mnSchub dl.mndaten > dt{color:var(--tinte3);font-size:14px;align-self:start;padding-top:14px} html body #mnSchub dl.mndaten > dd.sbchips{padding:6px 0} html body #mnSchub .mnnae{display:inline-block;margin-left:6px;padding:1px 9px;border-radius:99px;background:color-mix(in srgb,var(--akzent) 12%,var(--flaeche));color:var(--tinte2);font-size:12.5px} html body #mnSchub ol.sbweg{gap:0;margin:0} html body #mnSchub ol.sbweg > li{padding:12px 0;border-top:1px solid var(--linie);font-size:15px} html body #mnSchub ol.sbweg > li:first-child{border-top:0} html body #mnSchub .sbweg .sbwas b{font-size:15.5px} html body #mnSchub p.mnhintergrund{margin:8px 0 10px;line-height:1.6;color:var(--tinte2)} html body #mnSchub ul.mnmerkmale{margin:6px 0 8px} html body #mnSchub ul.mnmerkmale > li{background:var(--flaeche)} /* Bearbeiten: die Pflegeflächen unter den Gruppen, mit Luft */ html body #mnSchub li.mnkarte > details.mnaendern{margin:4px 24px 0} html body #mnSchub li.mnkarte > details.mnaendern > .hlinhalt{padding-top:8px;border-top:1px solid var(--linie)} /* --- Telefon ---------------------------------------------------- */ @media (max-width:760px){ html body #mnSchub li.mnkarte > .mnkopf{padding:52px 16px 22px} html body #mnSchub li.mnkarte > .mnkopf .mnmarke .pbild{width:132px;height:132px;min-width:132px;font-size:52px} html body #mnSchub li.mnkarte > .mnkopf h3{font-size:26px} html body #mnSchub .mngruppen{padding:0 12px;columns:1} html body #mnSchub section.mngruppe{padding:2px 16px 8px;margin-bottom:14px} html body #mnSchub dl.mndaten{grid-template-columns:100px minmax(0,1fr)} html body #mnSchub li.mnkarte > details.mnaendern{margin:4px 12px 0} } /* MITTIG IM FENSTER (03.10.2026). Christian: „Und warum nicht mittig in den Browser hinein? Warum so am unteren Rand hinwursteln?“ Ab Tabletbreite steht das Blatt frei in der Mitte, rundum gerundet; es fährt von unten hinein und blendet dabei auf. Am Telefon bleibt es ein Blatt von unten (fast volle Höhe) — dort liegt der Daumen. */ @media (min-width:761px){ html body .mnschubblatt{top:50%;bottom:auto;width:min(1000px,calc(100% - 64px));max-height:calc(var(--sicht, 100dvh) - 64px); border-radius:26px;box-shadow:0 30px 90px rgba(0,0,0,.28);opacity:0;transform:translate(-50%,calc(-50% + 48px)); transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .24s ease;padding-bottom:12px} html body #mnSchub.auf .mnschubblatt{opacity:1;transform:translate(-50%,-50%)} html body .mnschubgriff{display:none} } @media (max-width:760px){ html body .mnschubblatt{max-height:calc(var(--sicht, 100dvh) - 12px)} } @media (prefers-reduced-motion:reduce){ html body .mnschubblatt{transition:none} } /* ================================================================== GENERATIONSTITEL IN DER RANDSPALTE (03.10.2026). Christian: „nicht schön gelöst, dass die Linie unterbrochen wird durch Generation der Großeltern … das Layout so gestalten, dass es keine Berührungspunkte an der Stelle geben kann.“ Der Titel stand IN der Lücke, durch die die Linien laufen — die Fläche dahinter verdeckte sie nur. Jetzt steht er senkrecht in einer eigenen Spalte links neben seiner Reihe. Jede Linie verbindet zwei Karten und bleibt zwischen deren Mitten; die Karten liegen alle rechts der Spalte — eine Berührung ist damit geometrisch ausgeschlossen. ================================================================== */ html body .sbbaum .sbstufe{display:grid; grid-template-columns:22px minmax(0,1fr); column-gap:12px; align-items:stretch; margin:0 0 48px} html body .sbbaum .sbstufetitel{writing-mode:vertical-rl; transform:rotate(180deg); display:flex; align-items:center; justify-content:center; margin:0; padding:0 0 0 8px; background:none; box-shadow:none; border-radius:0; white-space:nowrap; font-size:11.5px; letter-spacing:.08em; border-left:2px solid var(--linie); align-self:stretch; min-height:120px} html body .sbbaum .sbstufe:last-child{margin-bottom:0} /* SILHOUETTE STATT BUCHSTABE (03.10.2026). Christian: „nicht einfach … der Vorname als Buchstabe … eine Silhouette von einem Mann oder … einer Frau … rauscht dann auch nicht so sehr.“ Leise Fläche, die Figur sitzt unten im Kreis. */ .pbild.psil{overflow:hidden; align-items:flex-end; justify-content:center; background:color-mix(in srgb,var(--tinte3) 14%,var(--flaeche)); padding:0} .pbild.psil svg{width:86%; height:86%; display:block; fill:color-mix(in srgb,var(--tinte3) 55%,var(--flaeche))} .pbild.psil svg .sihaar{fill:color-mix(in srgb,var(--tinte3) 75%,var(--flaeche))} /* Am Telefon ist eine Generation mehrere Bildschirme hoch — der Titel steht deshalb oben an ihrem Anfang, nicht in ihrer Mitte (gemessen: bis 3.609 px hohe Reihen bei 390 px). */ @media (max-width:760px){ html body .sbbaum .sbstufetitel{justify-content:flex-end; padding-top:0} } /* ================================================================== DOKUMENTE, ENDE ZU ENDE VERSCHLÜSSELT (03.10.2026, Vorhaben 87): Schlossfeld, Tafeln, Ansicht. ================================================================== */ .geheimschloss{margin:10px 0 14px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--akzent) 8%,var(--flaeche));border:1px solid color-mix(in srgb,var(--akzent) 22%,var(--linie))} .geheimschloss:empty{display:none} .geheimzeile{margin:0 0 8px;font-size:14px;color:var(--tinte2)} .geheimmeldung{margin:8px 0 0;font-size:13.5px;color:var(--tinte2)} .geheimmeldung:empty{display:none} .geheimmeldung.schlecht, .geheimsatz.schlecht{color:var(--schlecht,#b3261e)} .geheimwartet{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 0;font-size:14px} html body .geheimschloss button, html body .geheimwartet button{width:auto;min-height:44px} a.vtdok.geheim .ikon{color:var(--akzent)} .geheimtafel{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;padding:16px} .geheimtafelgrund{position:absolute;inset:0;background:rgba(18,18,16,.40);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .geheimtafelblatt{position:relative;width:min(520px,100%);max-height:calc(var(--sicht, 100dvh) - 32px);overflow:auto;background:var(--flaeche);border-radius:22px;padding:22px 22px 20px;box-shadow:0 30px 90px rgba(0,0,0,.30)} .geheimtafelblatt h3{margin:0 0 8px;font-size:20px} .geheimtafelblatt p{line-height:1.55;color:var(--tinte2)} .geheimcode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:20px;letter-spacing:.06em;text-align:center;color:var(--tinte)!important; background:var(--grund);border-radius:12px;padding:14px 10px;overflow-wrap:anywhere;user-select:all} .geheimhaken{display:flex;align-items:center;gap:10px;min-height:44px;margin:4px 0 12px} .geheimtun{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} html body .geheimtafelblatt .knopf, html body .geheimtafelblatt .knopfleise{width:auto} .geheimtafel.gross .geheimtafelblatt{width:min(1100px,100%);height:calc(var(--sicht, 100dvh) - 32px);display:flex;flex-direction:column;padding:12px} .geheimansicht{display:flex;flex-direction:column;height:100%;min-height:0} .geheimansichtkopf{display:flex;align-items:center;gap:8px;padding:0 4px 10px} .geheimansichtkopf b{flex:1 1 auto;min-width:0;overflow-wrap:anywhere} .geheimansichtkopf .knopfleise{min-height:44px;display:inline-flex;align-items:center;text-decoration:none} .geheimansichtinhalt{flex:1 1 auto;min-height:0;width:100%;border:0;border-radius:12px;background:var(--grund);object-fit:contain} /* SPEICHERN OHNE KNOPF (03.10.2026): Formulare, die selbst speichern, zeigen keinen Speichern-Knopf mehr — nur eine leise Zeile, die „Gespeichert“ sagt oder rot, was nicht ging. Ohne Skript bleibt der Knopf (Rückfall). */ p.autostand{grid-column:1/-1; margin:2px 0 0; min-height:20px; font-size:13px; color:var(--tinte3)} p.autostand.gut{color:var(--gut,#2f7d4f)} p.autostand.gut::before{content:"✓ "} p.autostand.schlecht{color:var(--schlecht,#b3261e)} /* Gesetz 51 für die ganze Anwendung (03.10.2026): der Speichern-Knopf verschwindet, wo das Formular selbst speichert — ein Knopf mit eigener Aufgabe (Entfernen über formaction, Schranke) bleibt. */ html body form.autosichern.auto-an button[type=submit]:not([formaction]):not(.weg):not(.loeschen){display:none} /* PERSON HINZUFÜGEN ALS STEUERZEICHEN (03.10.2026): oben rechts im Modul „Familie Blank“, 44 × 44, wie die Zeichen im Stammbaum. */ section.mnseite{position:relative} .mnwerkzeug{position:absolute; top:14px; right:14px; display:flex; gap:6px; z-index:5} html body .mnwerkzeug > button.sbzahnrad{width:44px; min-width:44px; max-width:44px; height:44px; padding:0; flex:0 0 44px} .mnneublatt h3.mnneutitel{margin:0 0 12px; font-size:20px} .mnneublatt form.ubform{margin:0} html body .mnneublatt .mnneuzu{width:auto; min-height:44px; margin-top:12px} /* ==== GESETZ 52 — EIN KNOPF FÜR ALLES (03.10.2026) ==== Christian: „Die Buttons sind nicht einheitlich … oben rechts Icons haben. Eines für Eintragen, eines für Schließen.“ Ein Bauteil: 44 × 44, Rundung 12 px, Zeichen 20 px. Haupt (Eintragen) in Akzent, sonst ruhig. Keine Bewegung beim Überfahren. */ html body .zeichenknopf{box-sizing:border-box; width:44px!important; min-width:44px!important; max-width:44px!important; height:44px!important; min-height:44px!important; max-height:44px!important; padding:0!important; margin:0; flex:0 0 44px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--linie); border-radius:12px; background:var(--flaeche); color:var(--tinte2); cursor:pointer; font-size:0; line-height:0; justify-self:auto; transform:none; box-shadow:none} html body .zeichenknopf .ikon, html body .zeichenknopf svg{width:20px; height:20px; flex:0 0 auto; margin:0} html body .zeichenknopf:hover{color:var(--tinte); background:var(--flaeche2); transform:none} html body .zeichenknopf.haupt{background:var(--akzent); border-color:var(--akzent); color:var(--aufakzent, #fff)} html body .zeichenknopf.haupt:hover{background:var(--akzent); color:var(--aufakzent, #fff); filter:brightness(1.08)} html body .zeichenknopf.loeschen{color:var(--tinte3); background:var(--flaeche); border-color:var(--linie); text-decoration:none} html body .zeichenknopf.loeschen:hover{color:var(--bad); border-color:var(--bad); background:var(--flaeche)} html body .zeichenknopf:focus-visible{outline:2px solid var(--akzent); outline-offset:2px} html body .zeichenknopf:disabled{opacity:.45; cursor:default} html body label.zeichenknopf{position:relative; overflow:hidden} html body label.zeichenknopf input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; font-size:0} html body label.zeichenknopf:focus-within{outline:2px solid var(--akzent); outline-offset:2px} label.dateiwahl input[type=file]:focus-visible + .zeichenknopf{outline:2px solid var(--akzent); outline-offset:2px} label.dateiwahl:hover .zeichenknopf{background:var(--flaeche2); color:var(--tinte)} /* Kopfzeile: Titel links, Zeichen oben rechts */ .formkopf, h4.mnkopfzeile{display:flex; align-items:center; justify-content:space-between; gap:12px} .formkopf h3{margin:0; min-width:0} .formkopf{margin-bottom:14px} .formzeichen{display:inline-flex; align-items:center; gap:6px; flex:0 0 auto} p.formzeichenrechts{display:flex; justify-content:flex-end; margin:0; grid-column:1 / -1} h4.mnkopfzeile > span:first-child{min-width:0} /* Löschen-Formulare tragen nur noch das Zeichen */ form.mmweg{display:flex; justify-content:flex-end} /* Auch die Zu- und Stiftknöpfe im Blatt folgen derselben Rundung */ html body #mnSchub button.mnschubzu{border-radius:12px} .geheimkopf{display:flex; align-items:center; justify-content:space-between; gap:12px} .geheimkopf .geheimzeile{margin:0; font-weight:600; color:var(--tinte)} .geheimwartet{justify-content:space-between} p.geheimhinweis{margin:0; flex:1 1 auto; min-width:0; color:var(--tinte)} .geheimansichtkopf .formzeichen, .geheimansichtkopf{gap:6px} html body .geheimschloss button.zeichenknopf, html body .geheimwartet button.zeichenknopf{width:44px; min-height:44px} /* Der Papierkorb steht rechts in der Zeile — der Text bekommt seinen eigenen Raum (gemessen: Überdeckung bei Hobbys und Verwandtschaft). */ html body ul.mnmerkmale li:has(> form.mmweg){padding-right:66px; min-height:60px; box-sizing:border-box} html body ul.mnmerkmale li > form.mmweg{top:8px; right:8px} /* Gesetz 52, Fortsetzung (03.10.2026): Rundung und Größe gelten auch gegen ältere, spezifischere Knopfregeln. */ html body .zeichenknopf{border-radius:12px!important; font-size:0!important; gap:0!important; flex:0 0 44px!important; text-decoration:none!important} html body .zeichenknopf:not(.haupt):not(.loeschen){background:var(--flaeche)!important; color:var(--tinte2)!important; border:1px solid var(--linie)!important} html body .zeichenknopf:not(.haupt):not(.loeschen):hover{background:var(--flaeche2)!important; color:var(--tinte)!important} html body .zeichenknopf.haupt{background:var(--akzent)!important; border:1px solid var(--akzent)!important; color:var(--aufakzent, #fff)!important} html body .zeichenknopf.loeschen{background:var(--flaeche)!important; border:1px solid var(--linie)!important; color:var(--tinte3)!important} html body .zeichenknopf.loeschen:hover{color:var(--bad)!important; border-color:var(--bad)!important} html body .zeichenknopf svg, html body .zeichenknopf .ikon{width:20px!important; height:20px!important; margin:0!important} /* Die Knopfleiste eines Formulars steht oben rechts — Eintragen, dann Schließen. */ html body form .sttasten{order:-1; grid-column:1 / -1; justify-self:end; align-self:start; display:flex; gap:6px; align-items:center; justify-content:flex-end; margin:0 0 4px auto; width:auto} html body .pfrechts, html body .pftaten, html body .kattun{display:flex; gap:6px; justify-content:flex-end; align-items:center} /* Texte ändern als Werkzeug im Banner: gefüllt, solange es scharf ist. */ .kopfknopf.kopftexte.an, .markenband .kopfknopf.kopftexte.an{background:var(--akzent); color:var(--aufakzent, #fff); border-color:var(--akzent)} /* VORHABEN 36 — mehrere Fotos, ein Beleg (03.10.2026). Eine geheftete Zeile ist keine eigene Zeile mehr: ihre Felder treten zurück, sie rückt ein und sagt, wozu sie gehört. */ table.bmwarte tr.seite td.bmzbez .bmzname, table.bmwarte tr.seite select.bmzkat, table.bmwarte tr.seite .bmzdatum, table.bmwarte tr.seite .bmzbetrag{visibility:hidden} table.bmwarte tr.seite td.bmzbez{position:relative; padding-left:22px} table.bmwarte tr.seite td.bmzbez::before{content:"Seite des Belegs darüber"; position:absolute; left:22px; top:50%; transform:translateY(-50%); font-size:13px; font-weight:600; color:var(--tinte2); white-space:nowrap} table.bmwarte td.bmzstand{white-space:nowrap; text-align:right} table.bmwarte td.bmzstand .zeichenknopf + .zeichenknopf{margin-left:6px} table.bmwarte td.bmzstand .zeichenknopf[hidden]{display:none!important} a.storiginal{white-space:nowrap} /* BELEG FOTOGRAFIEREN (03.10.2026): die Tafel — Seiten als Vorschau in einer Reihe, darunter die Wahl, wem er gehört. */ .bkblatt .bkseiten{display:flex; gap:10px; overflow-x:auto; padding:2px 0 8px; align-items:flex-end} .bkblatt figure.bkseite{margin:0; flex:0 0 auto; text-align:center} .bkblatt figure.bkseite img{display:block; height:120px; width:auto; max-width:160px; object-fit:cover; border-radius:10px; border:1px solid var(--linie); background:var(--flaeche2)} .bkblatt figure.bkseite figcaption{font-size:12px; color:var(--tinte3); margin-top:4px} .bkblatt .bkmehr{flex:0 0 auto; height:120px; display:flex; align-items:center; padding:0 6px} .bkblatt .bkwerkopf{margin:14px 0 6px; font-size:12.5px; font-weight:600; color:var(--tinte2); text-transform:none} .bkblatt .bkwer{display:flex; flex-wrap:wrap; gap:8px} html body .bkblatt button.bkchip{width:auto; min-width:0; max-width:none; min-height:44px; padding:0 16px; border-radius:12px; border:1px solid var(--linie); background:var(--flaeche); color:var(--tinte); font-size:14.5px; font-weight:600; box-shadow:none} html body .bkblatt button.bkchip:hover{background:var(--flaeche2)} html body .bkblatt button.bkchip.an{background:var(--akzent); border-color:var(--akzent); color:var(--aufakzent, #fff)} .bkblatt .bkstand{margin:12px 0 0; font-size:13.5px; color:var(--tinte2)} .bkblatt .bkstand:empty{display:none} .bkblatt .bkstand.schlecht{color:var(--bad)} /* Auf dem iPhone reicht der Platz neben dem Logo für fünf Knöpfe, nicht für sechs (gemessen 03.10.2026 bei 390 px: mit Modulpark rückte der sechste bis ins Logo). „Texte ändern“ ist ein Werkzeug für den großen Bildschirm — auf dem Telefon tritt es zurück. */ @media (max-width:560px){ .kopfwege .kopfknopf.kopftexte{display:none} } /* DIE BAUAKTE (03.10.2026) */ .bauakte .baliste{margin:6px 0 14px; padding-left:18px; line-height:1.55; color:var(--tinte2)} .bauakte .baliste.klein{font-size:13px} .bauakte .baliste small, .bauakte .badetail small{color:var(--tinte3)} .bauakte .badatum{display:inline-block; min-width:84px; font-variant-numeric:tabular-nums; color:var(--tinte3)} .bauakte table.batabelle{width:100%; border-collapse:collapse; font-size:13px} .bauakte table.batabelle th, .bauakte table.batabelle td{padding:6px 8px; border-bottom:1px solid var(--linie); text-align:left; vertical-align:top} .bauakte table.batabelle .z{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap} .bauakte .badetail{border-top:1px solid var(--linie); padding:8px 0} .bauakte .badetail summary{cursor:pointer; min-height:32px; display:flex; align-items:center; gap:8px} .bauakte .baspalten{font-size:12.5px; line-height:1.7; color:var(--tinte2); overflow-wrap:anywhere} .bauakte code{font-size:12.5px} h3.bauebergabe{margin:26px 0 8px; font-size:17px} /* PROGNOSE UND ERKLÄRUNG (03.10.2026, Vorhaben 199) */ html body section.stprognose table.stprog.stvgl thead th{font-size:12px; font-weight:600; color:var(--tinte3); text-align:right; padding:0 0 6px 12px} html body section.stprognose table.stprog.stvgl thead th:first-child{text-align:left} table.stvgl td{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap} table.stvgl tr.stvab td:last-child{color:var(--tinte); font-weight:600} .stvglkopf{margin:16px 0 6px; font-size:15px} .stvglwoher{margin:0; padding-left:18px; font-size:13.5px; line-height:1.55; color:var(--tinte2)} /* VERWEISE IM CORPORATE DESIGN — ÜBERALL (03.10.2026). Christian: „Du kannst doch nicht die Links jetzt so formatieren in dem Blau, in diesem hässlichen … Du musst doch Corporate Design beachten.“ GEMESSEN: Jeder Verweis ohne eigene Klasse fiel auf das Browser-Blau zurück (besucht: Lila). Ab jetzt trägt jeder solche Verweis die Akzentfarbe mit ruhigem Strich — besucht wie unbesucht. */ /* Nur Verweise IM TEXT — Leisten (nav), Kacheln und Kopf behalten ihre eigene Gestalt (gemessen: die Reiter der Verwaltung). */ html body :is(p, li, small, td, dd, dt, label, figcaption) > a:not([class]):not(nav a), html body :is(p, li, small, td, dd, dt, label, figcaption) > a:not([class]):not(nav a):visited{color:var(--akzent); text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:color-mix(in srgb, var(--akzent) 45%, transparent); text-underline-offset:3px} html body :is(p, li, small, td, dd, dt, label, figcaption) > a:not([class]):not(nav a):hover{text-decoration-color:var(--akzent)} /* DIE TASTATUR VERDECKT NIE EIN EINGABEFELD (04.10.2026, Gesetz 55). Chris am iPhone, „Neue Einnahme“: Das Blatt fuhr hoch, die Tastatur legte sich darüber — „Wofür?“ war nicht zu sehen. Ursache: Ein Fenster mit position:fixed misst sich am Layout-Fenster; iOS schiebt die Tastatur darüber, ohne dieses Fenster kleiner zu machen. EIN Mechanismus für alle Fenster (app.js, tlSicht): --sicht-oben, --sicht und --tastatur beschreiben den Teil des Bildschirms, den man wirklich sieht. Jede Hülle eines Fensters (Tafel, Schubblatt, Ganzseiten-Vorschau, Menüblatt) liegt genau darin, jedes Blatt ist höchstens so hoch. Neue Fenster benutzen dieselbe Hülle (.geheimtafel) oder tragen diese drei Werte — der Gestaltwächter meldet sonst „tastatur“. */ html body .geheimtafel, html body #mnSchub, html body .dvvoll{top:var(--sicht-oben, 0px); bottom:var(--tastatur, 0px); height:auto} @media (max-width:760px){ html body .mnblatt{bottom:var(--tastatur, 0px); max-height:min(82vh, 640px, calc(var(--sicht, 100dvh) - 12px))} } /* Steht die Tastatur, liegt das Blatt auf ihr — der Sicherheitsrand für den Home-Balken entfällt dann. */ html.tastatur body .zutafel .zublatt{padding-bottom:16px} html.tastatur body .mnblatt{padding-bottom:12px} /* DER AKTUALISIEREN-KNOPF IN DER ABRUFZEILE (05.10.2026): Zeichenknopf rechts, Satz links, beide mittig auf einer Linie; die Zeile hält rechts denselben Innenrand wie die Menüleiste darüber. */ html body .kopfkasten > .abrufleiste{align-items:center} html body .abrufleiste .alrechts{margin-left:auto; display:flex; align-items:center} html body .abrufleiste .alform{margin:0; display:flex} /* „Schließt mit dem Mehr ab": Die Menüpunkte verteilen sich über die ganze Leiste, „Mehr" endet an ihrem Innenrand — und der Knopf darunter endet genau dort (3 px Innenrand der Leiste + 1 px Rahmen). Gemessen statt geschätzt: Vorher endete „Mehr" je nach Fensterbreite irgendwo, weil die Punkte links gepackt standen. */ @media (min-width:1181px){ html body .kopf .umschalter.konten{justify-content:space-between} html body .kopfkasten > .abrufleiste:not(.stockt):not(.veraltet){padding-right:20px} /* 4 px Leiste + 16 px Innenrand des Punkts: endet mit dem Wort „Mehr“ */ } /* EIN HOVER FÜR ALLE ZEICHENKNÖPFE (05.10.2026). Chris: „wenn ich hovere, dann wird es plötzlich so grau … das durchbricht die Logik … auf der anderen Seite steht es auf einer anderen Farbe." Grau war nur auf weißem Grund ein Hover — auf der beigen Abrufzeile nahm der Knopf die Farbe seiner Umgebung an und verschwand. Jetzt überall derselbe zarte Akzentton und das Zeichen in Grün (Corporate Design 16.09.2026: berührt = zart im Farbton, gewählt = vollflächig). Entfernen bleibt rot, Eintragen bleibt gefüllt, Plus/Minus behalten ihre Zeichenfarbe. Gilt auch für die runden Knöpfe im Banner. */ html body .zeichenknopf:not(.haupt):not(.loeschen):hover, html body .markenband .kopfknopf:hover{background:color-mix(in srgb, var(--akzent) 12%, var(--flaeche))!important; border-color:color-mix(in srgb, var(--akzent) 40%, transparent)!important; color:var(--akzent)!important} html body .ggsichten .ggneu .zeichenknopf.ggneuein:hover{color:var(--gut)!important} html body .ggsichten .ggneu .zeichenknopf.ggneuaus:hover{color:var(--bad)!important; background:color-mix(in srgb, var(--bad) 10%, var(--flaeche))!important; border-color:color-mix(in srgb, var(--bad) 40%, transparent)!important} html body .zeichenknopf.loeschen:hover{background:color-mix(in srgb, var(--bad) 10%, var(--flaeche))!important} /* ZIEHEN ZUM AKTUALISIEREN (05.10.2026) — nur als App auf dem Homescreen (dort fehlt es von Haus aus). */ #ziehfrisch{position:fixed; left:50%; top:calc(max(env(safe-area-inset-top, 0px), 44px) + 8px); z-index:4000; width:40px; height:40px; margin-left:-20px; border-radius:50%; background:var(--flaeche); border:1px solid var(--linie); box-shadow:0 4px 14px rgba(15,30,31,.14); display:grid; place-items:center; color:var(--akzent); opacity:0; pointer-events:none; transition:opacity .15s ease} #ziehfrisch .ikon{width:20px; height:20px} #ziehfrisch.bereit{background:var(--akzent); color:var(--aufakzent, #fff); border-color:var(--akzent)} #ziehfrisch.laeuft .ikon{animation:ziehdreh .8s linear infinite} @keyframes ziehdreh{to{transform:rotate(360deg)}} /* ==================================================================== NEUE MARKE UND NEUE NAVIGATION (05.10.2026) Christian hat beides freigegeben: das neue Logo (Zeichen + „myblank Finanzplanung“ in Figtree) statt des Landschaftsbanners, und den Umbau der Navigation — „das Menü dann auch nach links … für iPhone und Desktop, alles optimiert“. Zwei Formen, eine Quelle (navigation() in daten.php): ab 1181 px Seitenleiste links, wie Mail oder Finder bis 1180 px Tab-Leiste unten (iPhone, iPad), „Mehr“ öffnet das Menüblatt mit allen Bereichen und den Einstellungen Der Kopf ist eine Karte im Raster — er schließt links und rechts mit den Karten darunter ab. ==================================================================== */ /* --- Der Kopf ------------------------------------------------------- */ html body header.markenband.marke2{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:auto; min-height:0; padding:12px 16px 12px 22px; background:var(--flaeche); overflow:visible; border:1px solid var(--materialrand, rgba(60,45,30,.07)); box-shadow:0 1px 2px rgba(60,45,30,.04), 0 16px 40px -28px rgba(60,45,30,.28); } html body header.markenband.marke2 .markenlogo{display:flex; align-items:center; flex:0 1 auto; min-width:0; border-radius:10px; line-height:0} html body header.markenband.marke2 .markenlogo:focus-visible{outline:2px solid var(--akzent); outline-offset:4px} html body header.markenband.marke2 img.mlbild{display:block; height:48px; width:auto; max-width:100%; aspect-ratio:auto; object-fit:contain; border-radius:0} html body header.markenband.marke2 .kopfwege{position:static; margin:0 0 0 auto; flex:0 0 auto} html body header.markenband.marke2 .kopfknopf{box-shadow:none; border:1px solid var(--linie)} /* Hell und dunkel: zwei Fassungen, die Ansicht wählt (data-hell, nicht das Betriebssystem). */ html body img.mb-dunkel{display:none !important} html[data-hell="dunkel"] body img.mb-hell{display:none !important} html[data-hell="dunkel"] body img.mb-dunkel{display:block !important} /* Anmeldung: das Logo hoch, ruhig über der Überschrift. */ .marke.bild img.anmlogo{display:block; width:min(260px, 66vw); height:auto; margin:0 auto} /* --- Der Personenwechsel: ein Segment, wie am Mac ------------------- */ html body .kopf nav.umschalter.konten.personen2{ display:inline-flex !important; position:static; flex:0 0 auto; flex-wrap:nowrap; gap:4px; padding:4px; width:auto; max-width:100%; border-radius:14px; background:var(--flaeche2); border:0; box-shadow:none; overflow:visible; } html body .kopf nav.umschalter.konten.personen2 > a{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px 0 5px; border-radius:11px; background:transparent; color:var(--tinte); font-size:15px; font-weight:500; text-decoration:none; white-space:nowrap; box-shadow:none; } html body .kopf nav.umschalter.konten.personen2 > a.aktiv{background:var(--flaeche); color:var(--tinte); box-shadow:0 1px 3px rgba(0,0,0,.12)} html body .kopf nav.umschalter.konten.personen2 > a .pname{position:static; width:auto; height:auto; overflow:visible; clip:auto; clip-path:none} /* Der Knopf des alten Menüs bleibt im Haus (das Blatt öffnet „Mehr“), steht aber nicht mehr in der Zeile. */ html body details.mn > summary{display:none !important} html body details.mn{flex:0 0 0; min-width:0} /* --- Seitenleiste (ab 1181 px) -------------------------------------- GEMESSEN 05.10.2026: Bei 1024 px liess die Leiste der Monatstabelle 714 px — sie musste 50 px seitlich rollen (Gestaltwächter „bildlauf“). Ab 1181 px bleiben mindestens 869 px; darunter trägt die Tab-Leiste. */ nav.seitenleiste, nav.tableiste{display:none} @media (min-width:1181px){ body.app{padding-left:248px} nav.seitenleiste{ display:flex; flex-direction:column; gap:2px; position:fixed; left:0; top:0; bottom:0; width:232px; z-index:40; padding:calc(16px + env(safe-area-inset-top)) 12px 24px; box-sizing:border-box; overflow-y:auto; background:var(--flaeche); border-right:1px solid var(--linie); } nav.seitenleiste a.sl{ display:flex; align-items:center; gap:12px; min-height:44px; padding:0 12px; border-radius:10px; color:var(--tinte); text-decoration:none; font-size:15px; font-weight:500; } nav.seitenleiste a.sl .slzeichen{display:flex; align-items:center; color:var(--tinte3)} nav.seitenleiste a.sl .slzeichen .ikon{width:19px; height:19px} nav.seitenleiste a.sl:hover{background:color-mix(in srgb, var(--akzent) 9%, transparent)} nav.seitenleiste a.sl.aktiv{background:var(--akzent); color:var(--aufakzent, #fff)} nav.seitenleiste a.sl.aktiv .slzeichen{color:currentColor} nav.seitenleiste a.sl:focus-visible{outline:2px solid var(--akzent); outline-offset:-2px} } /* --- Tab-Leiste (bis 1180 px) ---------------------------------------- */ @media (max-width:1180px){ body.app{--tabhoehe:calc(58px + env(safe-area-inset-bottom, 0px)); padding-bottom:calc(var(--tabhoehe) + 24px)} nav.tableiste{ display:grid; grid-template-columns:repeat(5, 1fr); position:fixed; left:0; right:0; bottom:0; z-index:55; height:var(--tabhoehe); padding:4px 6px env(safe-area-inset-bottom, 0px); box-sizing:border-box; background:color-mix(in srgb, var(--flaeche) 86%, transparent); -webkit-backdrop-filter:saturate(1.6) blur(20px); backdrop-filter:saturate(1.6) blur(20px); border-top:1px solid var(--linie); } nav.tableiste .tab{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:50px; min-width:44px; padding:0; margin:0; border:0; background:none; border-radius:10px; color:var(--tinte3); font:inherit; font-size:12px; font-weight:500; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent; --knopf-min:0; --knopf-max:none; } nav.tableiste .tab .ikon{width:24px; height:24px} nav.tableiste .tab.aktiv, nav.tableiste .tab[aria-expanded="true"]{color:var(--akzent)} nav.tableiste .tab:focus-visible{outline:2px solid var(--akzent); outline-offset:-2px} /* Was unten schwebt, schwebt über der Tab-Leiste, nicht dahinter. */ .neufass{bottom:calc(var(--tabhoehe) + 12px)} .mnblatt{padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px))} } /* --- Das Menüblatt: Einstellungen ------------------------------------ */ .mnwerkzeuge{display:flex; flex-direction:column; gap:2px; padding-bottom:6px} .mnwerkzeuge form{margin:0} button.mnwerk{ display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:0 12px; margin:0; border:0; border-radius:14px; background:none; color:var(--tinte); font:inherit; font-size:15px; font-weight:500; text-align:left; cursor:pointer; --knopf-min:0; --knopf-max:none; } button.mnwerk .ikon{width:21px; height:21px; color:var(--tinte2)} button.mnwerk:hover{background:var(--flaeche2)} button.mnwerk[hidden]{display:none} .mnhell{display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; padding:4px; margin:6px 0; border-radius:14px; background:var(--flaeche2)} button.mnhellwahl{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:56px; padding:4px; margin:0; border:0; border-radius:11px; background:none; color:var(--tinte2); font:inherit; font-size:12px; font-weight:500; cursor:pointer; --knopf-min:0; --knopf-max:none; } button.mnhellwahl .ikon{width:20px; height:20px} button.mnhellwahl[aria-pressed="true"]{background:var(--flaeche); color:var(--akzent); box-shadow:0 1px 3px rgba(0,0,0,.12)} /* --- iPhone: der Kopf trägt das ganze Logo und zwei Knöpfe in Fingergröße --- */ @media (max-width:700px){ html body header.markenband.marke2{padding:10px 12px 10px 16px; gap:10px} html body header.markenband.marke2 img.mlbild{height:44px} html body header.markenband.marke2 #parkKnopf, html body header.markenband.marke2 .kopftexte, html body header.markenband.marke2 .kopfhell, html body header.markenband.marke2 form:has(.kopfaus){display:none !important} html body header.markenband.marke2 .kopfwege{gap:8px} html body header.markenband.marke2 .kopfknopf{width:44px; height:44px; min-width:44px; min-height:44px} html body .kopf nav.umschalter.konten.personen2 > a{font-size:14px; padding:0 12px 0 4px} } @media (max-width:389px){ html body header.markenband.marke2 img.mlbild{height:40px} html body .kopf nav.umschalter.konten.personen2 > a{gap:6px; padding:0 10px 0 4px} } /* Der Kopf hält Abstand nach oben — im Raster (#blatt > *) stand er auf 0 und klebte an der Oberkante (gemessen 05.10.2026). */ html body #blatt > header.markenband.marke2{margin-top:calc(16px + env(safe-area-inset-top, 0px))} @media (display-mode: standalone){ html body #blatt > header.markenband.marke2{margin-top:calc(max(env(safe-area-inset-top, 0px), 44px) + 12px)} nav.seitenleiste{padding-top:calc(max(env(safe-area-inset-top, 0px), 44px) + 12px)} } /* Tab und Menüzeile tragen Zeichen UND Wort (wie jede Tab-Leiste bei Apple) — das Zeichen steht in einer eigenen Hülle. */ nav.tableiste .tab .tabzeichen, .mnwerkzeichen{display:flex; align-items:center; justify-content:center; line-height:0} /* LIQUID GLASS AUF JEDEM IPHONE (05.10.2026). Chris: auf Ines' iPhone 15 Pro läuft der Kopf oben wieder in die Unschärfe. Grund: iOS 26 zeichnet unter der Statusleiste eine weiche Unschärfekante, die etwa 20 pt UNTER den Sicherheitsrand reicht — in der App vom Homescreen genauso wie in Safari (die Seite steht mit viewport-fit=cover unter der Leiste). Der Kopf hielt bisher nur 12–16 px Abstand zum Sicherheitsrand (iPhone 15/16/17 Pro und Pro Max: 59 pt; ältere Modelle 47 pt). Jetzt beginnt er auf JEDEM iPhone 24 px unter dem Sicherheitsrand, als App vom Homescreen mindestens 47 + 24 pt unter der Oberkante. Ohne Sicherheitsrand (Schreibtisch, Android ohne Aussparung) bleibt es bei 16 px. Diese Regel ersetzt die beiden Regeln weiter oben. */ @supports (padding-top: env(safe-area-inset-top)){ html body #blatt > header.markenband.marke2{margin-top:calc(16px + env(safe-area-inset-top, 0px) + min(8px, env(safe-area-inset-top, 0px)))} } @media (display-mode: standalone){ html body #blatt > header.markenband.marke2{margin-top:calc(max(env(safe-area-inset-top, 0px), 47px) + 24px)} } /* ==================================================================== BELEGLISTE, ÄNDERUNGSBLATT, BELEGANSICHT (05.10.2026) Chris: „Das ist ja sowas von aufeinander und kann es ja kaum erkennen … bitte richtig gut machen." GEMESSEN: Die Tabelle stand auf display:grid (eine fremde Regel „.bmliste“ der Bankmarken traf auch sie) und die Belegzelle auf display:flex — Kopf und Zeilen rechneten getrennt, die Spaltenköpfe standen links zusammengeschoben, Ziehgriff und Kästchen klebten aneinander (0 px). Jetzt ist die Tabelle wieder eine Tabelle. ==================================================================== */ @media (min-width:761px){ html body table.stbelegliste.bmliste{display:table; width:100%; border-collapse:collapse} html body table.stbelegliste td.stdateiz{display:table-cell; vertical-align:middle} html body table.stbelegliste td.stdateiz > a.stbild{display:inline-grid; vertical-align:middle; margin-right:14px} html body table.stbelegliste td.stdateiz > span{display:inline-block; vertical-align:middle; max-width:calc(100% - 76px)} html body table.stbelegliste th, html body table.stbelegliste td{padding:12px 14px; vertical-align:middle} html body table.stbelegliste thead th{white-space:nowrap; text-align:left} html body table.stbelegliste thead th.z, html body table.stbelegliste td.z{text-align:right} html body table.stbelegliste td.bmwahl, html body table.stbelegliste th.bmwahl{white-space:nowrap; width:1%; padding-right:6px} html body table.stbelegliste td.stnotizz{color:var(--tinte2)} html body table.stbelegliste td.sttun{width:1%} } html body table.bmliste td.bmwahl .bmgriff{margin-right:10px; padding:10px 4px; vertical-align:middle} html body table.bmliste td.bmwahl input[type=checkbox]{vertical-align:middle; width:20px; height:20px; margin:0} html body table.stbelegliste .bmname{font-weight:600} /* Das Änderungsblatt: dieselbe Tafel wie „Wohin gehört das?“ (geheimtafel zutafel), etwas breiter für Formulare. */ .aendertafel .aenderblatt{width:min(720px, 100%)} .aenderblatt .formkopf h3{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0} .aenderblatt .aenderinhalt{margin-top:14px} .aenderblatt .aenderinhalt .stzu{display:none} /* geschlossen wird oben mit dem Kreuz — ein Weg, eine Stelle */ .aenderblatt .aenderinhalt form{margin:0} html body .aenderblatt .aenderinhalt form.stbelegform{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 16px} html body .aenderblatt .aenderinhalt form.stbelegform > label.stname, html body .aenderblatt .aenderinhalt form.stbelegform > label.stnotiz{grid-column:1 / -1} html body .aenderblatt .aenderinhalt form.stbelegform .sttasten{grid-column:1 / -1; justify-self:end} @media (max-width:560px){ html body .aenderblatt .aenderinhalt form.stbelegform{grid-template-columns:minmax(0, 1fr)} } /* Belegansicht: Foto bildschirmfüllend, zoombar; geschlossen mit dem Kreuz. */ .dvvoll.dvbild{display:flex; flex-direction:column} .dvvoll.dvbild img.dvbildinhalt{display:block; max-width:100%; height:auto; margin:0 auto 12px; border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.18); touch-action:pinch-zoom} html body .dvvollkopf .dvzu{flex:0 0 auto} a.laedt{opacity:.55; pointer-events:none} html body .dvvollkopf button.dvzu{padding:0; width:44px; min-width:44px; height:44px; min-height:44px; background:var(--flaeche); color:var(--tinte); border:1px solid var(--linie); border-radius:12px; display:inline-flex; align-items:center; justify-content:center} /* ---- BELEG ERFASSEN: DAS BLATT MIT VIER ECKEN (05.10.2026) ------------------------------------------------ Das Foto groß, das gefundene Blatt hell, der Rest abgedunkelt; vier runde Griffe in Fingergröße (44 px) an den Ecken. Darunter jede Seite schon zugeschnitten und begradigt; die gewählte Seite trägt einen Akzentrand. */ .bkblatt .bkzuschnitt{margin:4px 0 12px} .bkblatt .bkbuehne{position:relative; margin:0 auto; max-width:100%; border-radius:12px; overflow:visible; touch-action:none; user-select:none; -webkit-user-select:none} .bkblatt .bkbuehne > img{display:block; width:100%; height:100%; object-fit:fill; border-radius:12px; pointer-events:none; -webkit-user-drag:none} .bkblatt .bkmaske{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none} .bkblatt .bkdunkel{fill:rgba(12,18,20,.52)} .bkblatt .bkrahmen{fill:none; stroke:var(--akzent); stroke-width:4; vector-effect:non-scaling-stroke; stroke-linejoin:round} html body .bkblatt button.bkecke{position:absolute; width:44px; height:44px; min-width:44px; min-height:44px; max-width:44px; margin:0; padding:0; transform:translate(-50%, -50%); border:0; border-radius:50%; background:transparent; box-shadow:none; cursor:grab; touch-action:none; z-index:2} html body .bkblatt button.bkecke::after{content:''; position:absolute; left:50%; top:50%; width:20px; height:20px; transform:translate(-50%, -50%); border-radius:50%; background:#fff; border:3px solid var(--akzent); box-shadow:0 2px 8px rgba(0,0,0,.35)} html body .bkblatt button.bkecke.zieht{cursor:grabbing} html body .bkblatt button.bkecke.zieht::after{background:var(--akzent)} html body .bkblatt button.bkecke:focus-visible::after{outline:2px solid var(--akzent); outline-offset:3px} .bkblatt .bksucht{margin:0; padding:40px 0; text-align:center; color:var(--tinte3); font-size:14px} html body .bkblatt button.bkseite{display:flex; flex-direction:column; align-items:center; gap:4px; flex:0 0 auto; width:auto; min-width:0; max-width:none; height:auto; margin:0; padding:4px; border:2px solid transparent; border-radius:12px; background:transparent; box-shadow:none; cursor:pointer} html body .bkblatt button.bkseite.an{border-color:var(--akzent)} .bkblatt button.bkseite canvas, .bkblatt button.bkseite img{display:block; height:96px; width:auto; max-width:140px; border-radius:8px; border:1px solid var(--linie); background:var(--flaeche2); object-fit:cover} .bkblatt button.bkseite span{font-size:12px; color:var(--tinte3)} .bkblatt .bkmehr{height:auto; align-self:center} /* Inline-Bearbeitung (05.10.2026, Apple-Maß): jedes Direktfeld ist mindestens 44 px hoch und 16 px groß — kein Zoom auf dem iPhone, sicher zu treffen. */ html body input.bmedit, html body select.bmedit{min-height:44px; height:44px; font-size:16px} /* ================================================================== RÜCKFRAGE ALS DIALOG IN DER BILDMITTE (05.10.2026, Gesetz 57) — jedes Entfernen, Schreibtisch wie iPhone. Dieselbe Maske wie jede Tafel (Unschärfe), eine kompakte Karte, zwei gleich breite Knöpfe. ================================================================== */ html.fragtnach{overflow:hidden} .geheimtafel.fragetafel{z-index:4000; align-items:center; justify-content:center; padding:16px} .fragetafel .geheimtafelgrund{animation:zugrund .2s ease both} .fragetafel .frageblatt{width:min(400px,100%); padding:24px 24px 20px; border-radius:20px; text-align:left; animation:zublatt .24s cubic-bezier(.2,.8,.2,1) both} .fragetafel.geht .geheimtafelgrund{animation:zugrundweg .18s ease both} .fragetafel.geht .frageblatt{animation:zublattweg .18s ease both} .fragetafel .frageblatt h3{margin:0 0 6px; font-size:18px; line-height:1.3; font-weight:650; color:var(--tinte); overflow-wrap:anywhere} .fragetafel .frageblatt p{margin:0 0 20px; font-size:15px; line-height:1.45; color:var(--tinte2)} .fragetafel .rftasten{display:grid; grid-template-columns:1fr 1fr; gap:10px} html body .fragetafel .rftasten button{width:100%; min-width:0; height:var(--knopf); min-height:0; margin:0; padding:0 14px; border-radius:12px; font:inherit; font-size:15px; font-weight:600; line-height:1; cursor:pointer; transition:background-color .15s, border-color .15s} html body .fragetafel .rfnein{background:var(--flaeche2); color:var(--tinte); border:1px solid var(--linie)} html body .fragetafel .rfnein:hover{background:var(--flaeche)} /* Gefahr-Variante der einen Knopffamilie (Gesetz 44): roter Text, roter Rahmen — nicht gefüllt */ html body .fragetafel .rfja{background:var(--flaeche); color:var(--bad); border:1.5px solid var(--bad)} /* zz490: Aktionsblatt – die Wahl untereinander, „Abbrechen“ zuletzt mit Abstand (Apple-Kalender-Muster) */ html body .fragetafel .rftasten.rfwahl{grid-template-columns:minmax(0,1fr)} html body .fragetafel .rftasten.rfwahl .rfabbrechen{margin-top:6px} html body .fragetafel .rftasten.rfwahl button{height:auto; min-height:var(--knopf); white-space:normal} html body .fragetafel .rfja:hover{background:color-mix(in srgb, var(--bad) 8%, var(--flaeche))} html body .fragetafel .rftasten button:focus-visible{outline:2px solid var(--akzent); outline-offset:2px} @media (prefers-reduced-motion:reduce){ .fragetafel .geheimtafelgrund, .fragetafel .frageblatt{animation:none !important} } /* KNOPFMASS EINHEITLICH (05.10.2026, Chris: „viel zu hoch im Verhältnis zur Schrift … einheitlich“): Textknöpfe sind am Schreibtisch (Maus) 40 px hoch; mit dem Finger bleiben es 44 px (Apple-Maß, Gesetz Trefferflächen). */ @media (hover:hover) and (pointer:fine){ :root{--knopf:40px} } /* ================================================================== ZEILE ÄNDERN ALS TAFEL (05.10.2026, Gesetz 56) — dieselbe Tafel wie „Neue Ausgabe“ (neublatt); dazu das Stift-Feld gebuchter Zeilen und das Feld „ohne Planzeile“ als Tafel (pftafel). Felder 16 px — kein Zoom auf dem iPhone. ================================================================== */ .zeileblatt .zuwas{margin:-4px 0 14px; font-size:13px; color:var(--tinte3); font-variant-numeric:tabular-nums} .zeileblatt.speichert{cursor:progress} .neublatt .burhythmus .brstand{font-size:13px; color:var(--tinte3); margin:0} .neublatt .burhythmus .brtun{justify-self:start; align-self:flex-start} .neublatt .burhythmus .brwie[hidden], .neublatt .burhythmus .brbis[hidden]{display:none} .neublatt .burhythmus .brbis{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--tinte3)} .neublatt .burhythmus .brbisfeld{min-height:44px; font:inherit; font-size:16px; padding:0 12px; border:1px solid var(--linie); border-radius:12px; background:var(--flaeche); color:var(--tinte)} .pftafel .pftafelliste{list-style:none; margin:14px 0 0; padding:0} .pftafel li.planfeldzeile{border:0; display:block} .pftafel li.planfeldzeile > .planfeld{overflow:visible} .pftafel .pfinhalt{background:transparent; padding:0; margin:0; gap:14px} .pftafel .pfkopf{font-size:14px; max-width:none} .pftafel .pfweg{display:none} /* geschlossen wird oben mit dem Kreuz — ein Weg, eine Stelle */ html body .pftafel .planfeld input.pftag, html body .pftafel .planfeld input.pftext, html body .pftafel .planfeld input.pfwert, html body .pftafel .pfziel select{font-size:16px; min-height:44px; border-radius:12px} html body .pftafel .planfeld input.pftag{width:64px; flex:0 0 64px} html body .pftafel .planfeld input.pfwert{width:140px} html body .pftafel .planfeld .brpille{min-height:40px; padding:8px 12px; border-radius:9px; font-size:13.5px} html body .pftafel .planfeld .pfok{min-height:var(--knopf); padding:0 18px; border-radius:12px; font-size:15px; font-weight:600} html body .pftafel .planfeld .pfstreichen{min-height:var(--knopf); font-size:14px} /* ================================================================== FELDER EINER ZEILE ALS TAFEL (05.10.2026, Gesetz 56) — Bauteil „Klick ins Feld“ (data-feldtuer): Urlaubskosten, Etappen, Verträge, Meilensteine, Steuer-Sammler. Dieselbe Tafel wie „Neue Ausgabe“ (neublatt). ================================================================== */ .feldblatt .feldliste{margin-top:14px} .feldblatt .ftfeld > label{font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinte3)} .feldblatt input.ftzahl{text-align:right; font-variant-numeric:tabular-nums; max-width:220px} .feldblatt.speichert{cursor:progress} html body .feldblatt .ftpillen{display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:3px; padding:3px; border-radius:12px; background:var(--flaeche2); min-width:0; max-width:100%} html body .feldblatt .ftpille{width:100%; min-width:0 !important; max-width:none !important; min-height:var(--knopf); height:auto; margin:0; padding:8px 8px; border:0; border-radius:9px; background:transparent; color:var(--tinte2); font:inherit; font-size:13.5px; font-weight:500; line-height:1.25; cursor:pointer; overflow-wrap:anywhere} html body .feldblatt .ftpille:hover{color:var(--tinte); background:color-mix(in srgb, var(--flaeche) 60%, transparent)} html body .feldblatt .ftpille.an{background:var(--flaeche); color:var(--tinte); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.12)} html body .feldblatt .ftpille:focus-visible{outline:2px solid var(--akzent); outline-offset:1px} /* ================================================================== SUCHEN ÜBER ALLES (06.10.2026) — Modul, Tafel (Lupe, ⌘K) und Fundstelle. Ein Bauteil, eine Gestaltung. ================================================================== */ .suchkern{display:flex; flex-direction:column; gap:12px; min-width:0} .skfeld{display:flex; align-items:center; min-width:0; height:48px; padding:0 2px 0 14px; gap:10px; box-sizing:border-box; background:var(--flaeche2); border:1px solid transparent; border-radius:14px; transition:border-color .15s, background-color .15s, box-shadow .15s} .skfeld:focus-within{background:var(--flaeche); border-color:var(--akzent); box-shadow:0 0 0 4px color-mix(in srgb, var(--akzent) 16%, transparent)} .skfeld .skz{flex:0 0 20px; width:20px; height:20px; color:var(--tinte3); display:flex} .skfeld .skz svg, .skfeld .skz .ikon{width:20px; height:20px} html body .suchkern input.skein{flex:1 1 auto; width:auto; min-width:0; height:44px; min-height:0; margin:0; padding:0; box-sizing:border-box; font:inherit; font-size:17px; color:var(--tinte); background:transparent; border:0; border-radius:0; box-shadow:none; -webkit-appearance:none; appearance:none} html body .suchkern input.skein::-webkit-search-cancel-button{-webkit-appearance:none; display:none} html body .suchkern input.skein:focus{outline:none; box-shadow:none} html body .suchkern .skweg{flex:0 0 44px; width:44px; height:44px; min-width:0; min-height:0; padding:0; margin:0; display:flex; align-items:center; justify-content:center; border:0; background:none; color:var(--tinte3); cursor:pointer; border-radius:12px} html body .suchkern .skweg[hidden]{display:none} html body .suchkern .skweg svg{width:16px; height:16px} .suchkern.sucht .skz{animation:skpuls 1s ease-in-out infinite} @keyframes skpuls{50%{opacity:.35}} .skergebnis{display:flex; flex-direction:column; gap:14px; min-width:0} .skergebnis:empty{display:none} .skleer{margin:6px 2px; color:var(--tinte3); font-size:15px} .skgruppe{min-width:0} .skgkopf{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 4px; padding:0 4px; font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--tinte3)} .skgkopf .skzahl{font-variant-numeric:tabular-nums; font-weight:500} html body .suchkern .skmehr{width:auto; min-width:0; min-height:32px; height:32px; margin:0; padding:0 10px; border:0; border-radius:8px; background:none; color:var(--akzent); font:inherit; font-size:13px; font-weight:600; letter-spacing:0; text-transform:none; cursor:pointer} .skgruppe ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column} a.sktreffer{display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:12px; min-height:52px; padding:8px 10px; border-radius:12px; color:var(--tinte); text-decoration:none; transition:background-color .12s} a.sktreffer:hover, a.sktreffer.aktiv{background:var(--flaeche2)} a.sktreffer:focus-visible{outline:2px solid var(--akzent); outline-offset:-2px} .skikon{width:32px; height:32px; border-radius:9px; background:var(--flaeche2); color:var(--tinte2); display:flex; align-items:center; justify-content:center} a.sktreffer:hover .skikon, a.sktreffer.aktiv .skikon{background:var(--flaeche)} .skikon svg, .skikon .ikon{width:17px; height:17px} .sktext{display:flex; flex-direction:column; gap:2px; min-width:0} .sktext b{font-weight:600; font-size:15px; line-height:1.3; overflow-wrap:anywhere} .sktext small{font-size:13px; line-height:1.35; color:var(--tinte3); overflow-wrap:anywhere} .sktext mark, .skwert mark{background:color-mix(in srgb, var(--akzent) 22%, transparent); color:inherit; border-radius:3px; padding:0 1px} .skwert{display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right; white-space:nowrap} .skwert b{font-weight:600; font-size:15px; font-variant-numeric:tabular-nums} .skwert b.aus{color:var(--bad)} .skwert small{font-size:12.5px; color:var(--tinte3); font-variant-numeric:tabular-nums} @media (max-width:560px){ a.sktreffer{grid-template-columns:28px minmax(0,1fr) auto; gap:10px; padding:8px 6px} .skikon{width:28px; height:28px} } /* DAS MODUL IST EINE SCHMALE LEISTE (06.10.2026, Chris: „ganz schmale Suchmodule … kostet uns zu viel Platz“). Kein Titel, keine Pillen, nur das Feld. Die Treffer schweben als Tafel unter der Leiste über der Seite — die Seite darunter rückt nicht; ein Tipp daneben legt sie weg (app.js). Eingrenzen über „Alle N“ an der Gruppe. */ /* Rundum 8 px. Die Ziehkapsel steht nur im Modus „Module ordnen“ und dann im Fluss als eigene Zeile — sie deckt nichts. */ html body .suchmodul[data-block="suche"], #blatt > section.suchmodul[data-block="suche"]{padding:8px; position:relative; overflow:visible} html body .suchmodul[data-block="suche"]:has(.suchkern.skoffen){z-index:60} .suchmodul[data-block="suche"] .suchkern{gap:0} .suchmodul[data-block="suche"] .skfeld, .suchmodul[data-block="suche"] .skfeld:focus-within{background:transparent; border-color:transparent; box-shadow:none} .suchmodul[data-block="suche"] .skergebnis{display:none} .suchmodul[data-block="suche"] .suchkern.skoffen .skergebnis:not(:empty){display:flex; position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:60; background:var(--flaeche); border-radius:18px; padding:10px 8px; box-shadow:0 24px 60px rgba(15,30,31,.18), 0 4px 12px rgba(15,30,31,.08); max-height:min(560px, calc(var(--sicht, 100dvh) - 170px)); overflow:auto; overscroll-behavior:contain; animation:skschweben .16s ease both} @keyframes skschweben{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}} @media (prefers-reduced-motion:reduce){ .suchmodul[data-block="suche"] .skergebnis{animation:none !important} } /* Die Tafel (Lupe, ⌘K): am Schreibtisch oben in der Mitte wie Spotlight, auf dem iPhone über die ganze Höhe von oben. */ .geheimtafel.suchtafel{z-index:3500; align-items:flex-start; padding:min(12vh, 110px) 16px 16px} .suchtafel .geheimtafelgrund{animation:zugrund .18s ease both} .suchtafel .suchblatt{width:min(680px, 100%); max-height:calc(var(--sicht, 100dvh) - min(12vh, 110px) - 24px); display:flex; flex-direction:column; padding:14px 14px 10px; border-radius:20px; animation:zublatt .22s cubic-bezier(.2,.8,.2,1) both; overflow:hidden} .suchtafel.geht .geheimtafelgrund{animation:zugrundweg .18s ease both} .suchtafel.geht .suchblatt{animation:zublattweg .18s ease both} .suchtafel .suchkopf{display:flex; gap:8px; align-items:flex-start; min-height:0; flex:1 1 auto} .suchtafel .suchkopf > .suchkern{flex:1 1 auto; min-height:0; max-height:100%} .suchtafel .suchkopf > .zeichenknopf{flex:0 0 auto; margin-top:2px} .suchtafel .skergebnis{overflow:auto; overscroll-behavior:contain; max-height:calc(var(--sicht, 100dvh) - min(12vh, 110px) - 170px); padding-bottom:6px} @media (max-width:700px){ .geheimtafel.suchtafel{padding:0; align-items:stretch} .suchtafel .suchblatt{width:100%; max-height:none; height:var(--sicht, 100dvh); border-radius:0; padding:calc(env(safe-area-inset-top, 0px) + 12px) 12px 8px; animation:skvonoben .26s cubic-bezier(.2,.8,.2,1) both} .suchtafel.geht .suchblatt{animation:skvonobenweg .2s ease both} .suchtafel .skergebnis{max-height:none; flex:1 1 auto} .suchtafel .suchkopf > .suchkern{height:100%} } @keyframes skvonoben{from{transform:translateY(-24px); opacity:0} to{transform:none; opacity:1}} @keyframes skvonobenweg{to{transform:translateY(-16px); opacity:0}} @media (prefers-reduced-motion:reduce){ .suchtafel .suchblatt, .suchtafel .geheimtafelgrund{animation:none !important} } /* Die Fundstelle leuchtet kurz auf — wie ein Fingerzeig, dann ist Ruhe. */ .fundstelle{animation:fundstelle 2.4s ease both; border-radius:12px} @keyframes fundstelle{0%,30%{box-shadow:0 0 0 3px var(--akzent), 0 0 0 9px color-mix(in srgb, var(--akzent) 18%, transparent); background-color:color-mix(in srgb, var(--akzent) 9%, transparent)} 100%{box-shadow:0 0 0 0 transparent}} /* ================================================================== MODULE ZIEHEN WIE AM IPHONE (06.10.2026). Chris: „orientiere dich … an der MyBlank … das muss auch so schön ineinander greifen … smooth, Apple-like.“ Das gezogene Modul hebt sich ab (etwas größer, Schatten), an seinem Platz zeigt ein Rahmen, wo es landet; die anderen gleiten weich zur Seite; beim Loslassen rastet es ein. ================================================================== */ [data-block].ziehtgerade{scale:1.015; rotate:.25deg; transition:scale .18s ease, rotate .18s ease, box-shadow .18s ease !important; box-shadow:0 28px 64px rgba(15,30,31,.22), 0 6px 16px rgba(15,30,31,.10) !important; outline:none !important; cursor:grabbing; z-index:40 !important} body.ziehtort, body.ziehtort *{cursor:grabbing !important; user-select:none; -webkit-user-select:none} .landeplatz{position:fixed; z-index:30; pointer-events:none; border-radius:18px; border:2px dashed color-mix(in srgb, var(--akzent) 70%, transparent); background:color-mix(in srgb, var(--akzent) 6%, transparent); transition:left .26s cubic-bezier(.2,.8,.2,1), top .26s cubic-bezier(.2,.8,.2,1), width .26s cubic-bezier(.2,.8,.2,1), height .26s cubic-bezier(.2,.8,.2,1), opacity .2s} .landeplatz.weg{opacity:0} /* Beim Erscheinen und beim Rollen folgt der Rahmen der Seite sofort, ohne nachzuschwimmen. */ .landeplatz.sofort{transition:opacity .2s} /* ZIEHEN WIE BEI MYBLANK (01.11.2026): Im Modus „Module ordnen“ ist der Modultitel Griff. Nur dort nimmt er die Berührung ganz (touch-action:none) — sonst muss man über einen Titel hinweg rollen können. */ body.parkoffen #blatt > [data-block] .zgtitel{cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none} /* Beim Gleiten in die Zelle bleibt das Modul über den Nachbarn. */ [data-block].landet{position:relative; z-index:20} @media (prefers-reduced-motion:reduce){ .landeplatz{transition:none} [data-block].ziehtgerade{scale:1; rotate:0deg} } /* ================================================================== KOPF UND ABRUFZEILE IM TAKT (06.10.2026) Chris: „Die Module … sind vom Abstand her immer gleich. Aber nach oben hin zu dem Chris, Ines und Zusammen, da ist es plötzlich mehr Abstand. Das sollte nicht sein.“ GEMESSEN bei 1000 px: Kasten unten 324, nächstes Modul 363 = 39 px statt der 26 px zwischen den Modulen. Ursache: Der klebende Kopf trägt unten 12 px Band (+1 px Linie) für den Zustand „oben angeheftet“; das Raster (#blatt > * {margin:0}) hatte sein -12px aufgehoben. Jetzt nimmt er das Band wieder aus dem Fluss — zwischen Kasten und erstem Modul steht derselbe Abstand wie zwischen zwei Modulen, bei jeder Breite. Chris: „Der Knopf sollte immer seine Position oben rechts haben und die Meldung sollte dann eher umbrechen, rechtzeitig vorher mit Sicherheitsabstand.“ Die Abrufzeile ist jetzt ein Raster aus zwei Spalten: links Satz und Meldung (brechen um), rechts der Aktualisieren-Knopf — oben, auf der Höhe der ersten Zeile, 16 px Sicherheitsabstand. Auch auf dem iPhone. ================================================================== */ html body #blatt > .kopf{margin-bottom:-13px} html body .abrufleiste, html body #blatt .abrufleiste{display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:16px; row-gap:6px; align-items:start} html body .abrufleiste > *{grid-column:1; min-width:0} html body .abrufleiste > .alrechts{grid-column:2; grid-row:1 / span 3; align-self:start; width:auto; margin:0; justify-content:flex-end} html body .abrufleiste > .albalken{grid-column:1 / -1} /* Die erste Textzeile steht mittig zum Knopf — auch wenn der Satz auf dem iPhone umbricht (dann wächst er nach unten). */ html body .abrufleiste > .alsatz{--alk:44px; min-height:var(--alk); box-sizing:border-box; padding-block:calc((var(--alk) - 1lh) / 2); align-items:flex-start; margin:0} html body .abrufleiste > .alsatz > .alzeichen{margin-top:calc((1lh - 15px) / 2)} @media (hover:hover) and (pointer:fine){ html body .abrufleiste > .alsatz{--alk:var(--knopf, 40px)} } /* ================================================================== KEIN WEISSBLITZ (06.10.2026). Chris: „Ich möchte, dass das Gefühl ist, einfach in der Applikation zu sein und nicht in irgendeiner Webseite.“ 1. Der Grund: Bis dieses Stylesheet da ist, trägt <html> die Grundfarbe aus dem Kopf (index.php, grundFarben()). Ab hier ist <html> wieder durchsichtig — der Grund des Körpers (Personenton) reicht wie bisher bis an jeden Rand. 2. Wo doch einmal echt geladen wird (Anmelden, Abmelden, neue Fassung): Die alte Ansicht bleibt stehen, bis die neue fertig ist, dann blendet sie in 180 ms über — wie beim Wechsel zwischen zwei Ansichten einer App. ================================================================== */ html{background-color:transparent} @view-transition{navigation:auto} ::view-transition-old(root), ::view-transition-new(root){animation-duration:.18s; animation-timing-function:ease} @media (prefers-reduced-motion:reduce){ ::view-transition-old(root), ::view-transition-new(root){animation:none} } /* ================================================================== PERSÖNLICHE ABLAGE (06.10.2026, Vorhaben 260) — Kopf mit Zeichen, Reiter je Ablage, Filter, Liste je Kategorie. Eine Zeile ist ein Knopf (öffnet das Blatt); nichts wird abgeschnitten, Titel brechen um (Gesetz: nie abschneiden). ================================================================== */ .ablage .abkopf{display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; margin-bottom:var(--titelabstand, 18px)} .ablage .abkopf h2.modultitel{margin:0} .ablage .abwerkzeug{gap:6px} .ablage nav.abwahl{display:inline-flex; flex-wrap:wrap; max-width:100%; margin:0 0 14px} .ablage .abfilter{display:flex; align-items:center; gap:10px; min-width:0; height:44px; padding:0 14px; margin:0 0 14px; box-sizing:border-box; background:var(--flaeche2); border:1px solid transparent; border-radius:14px} .ablage .abfilter:focus-within{background:var(--flaeche); border-color:var(--akzent)} .ablage .abfilter .skz{display:flex; color:var(--tinte3)} html body .ablage input.abfilterfeld{flex:1 1 auto; min-width:0; width:auto; height:42px; margin:0; padding:0; border:0; background:transparent; box-shadow:none; font:inherit; font-size:16px; color:var(--tinte); -webkit-appearance:none; appearance:none} html body .ablage input.abfilterfeld:focus{outline:none; box-shadow:none} html body .ablage input.abfilterfeld::-webkit-search-cancel-button{-webkit-appearance:none; display:none} .ablage .abstand{margin:0 0 10px; font-size:13px; color:var(--tinte2); min-height:0} .ablage .abstand:empty{display:none} .ablage .abstand.schlecht{color:var(--bad)} .ablage .ableer{margin:8px 2px; color:var(--tinte3); font-size:15px} .ablage .abgruppe{margin:0 0 16px} .ablage .abgruppe[hidden]{display:none} .ablage .abgkopf{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 4px; padding:0 4px; font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--tinte3)} .ablage .abzahl{font-variant-numeric:tabular-nums; font-weight:500} .ablage .abgruppe ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column} .ablage li.abdok[hidden]{display:none} html body .ablage button.abzeile{display:grid; grid-template-columns:32px minmax(0,1fr); align-items:center; gap:12px; width:100%; min-height:52px; height:auto; margin:0; padding:8px 10px; border:0; border-radius:12px; background:none; color:var(--tinte); text-align:left; font:inherit; cursor:pointer; box-shadow:none} html body .ablage button.abzeile:hover{background:var(--flaeche2)} html body .ablage button.abzeile:focus-visible{outline:2px solid var(--akzent); outline-offset:-2px} .ablage .abikon{width:32px; height:32px; border-radius:9px; background:var(--flaeche2); color:var(--tinte2); display:flex; align-items:center; justify-content:center} .ablage button.abzeile:hover .abikon{background:var(--flaeche)} .ablage .abtext{display:flex; flex-direction:column; gap:2px; min-width:0} .ablage .abtext b{font-weight:600; font-size:15px; line-height:1.3; overflow-wrap:anywhere} .ablage .abtext small{font-size:13px; line-height:1.35; color:var(--tinte3); overflow-wrap:anywhere} /* Das Blatt */ .abblatt .abzwei{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px} .abblatt label.feld{margin:0 0 12px} .abblatt label.abschalter{flex-direction:row; align-items:center; gap:10px; min-height:44px; margin:0 0 12px} .abblatt label.abschalter input{width:22px; height:22px; margin:0; accent-color:var(--akzent)} .abblatt label.abschalter span{font-size:15px; color:var(--tinte)} .abblatt textarea{width:100%; box-sizing:border-box; min-height:160px; max-height:40vh; resize:vertical; font:inherit; font-size:14px; line-height:1.5; padding:10px 12px; border:1px solid var(--linie); border-radius:12px; background:var(--flaeche); color:var(--tinte)} .abblatt textarea:focus{outline:none; border-color:var(--akzent)} .abblatt{max-height:min(92dvh, calc(var(--sicht, 100dvh) - 24px)); overflow:auto; overscroll-behavior:contain} .abkatliste{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:8px} .abkatliste li{display:flex; align-items:center; gap:8px} .abkatliste li input{flex:1 1 auto; min-width:0; min-height:44px; font:inherit; font-size:15px; border:1px solid var(--linie); border-radius:12px; padding:8px 12px; background:var(--flaeche); color:var(--tinte)} .abkatliste li input:focus{outline:none; border-color:var(--akzent)} @media (max-width:560px){ .abblatt .abzwei{grid-template-columns:minmax(0,1fr); gap:0} html body .ablage button.abzeile{grid-template-columns:28px minmax(0,1fr); gap:10px; padding:8px 6px} .ablage .abikon{width:28px; height:28px} } /* ================================================================== DIE EINGELASSENE FLÄCHE (06.10.2026). Chris: „Das ist sehr, sehr hell und weiß … dass es sich ein bisschen abhebt von der Rahmenfarbe … anpassen an das Look and Feel.“ Entschieden: Vorschlag B — derselbe zarte Personenton wie der Seitengrund (5 % der Personenfarbe auf der Fläche). Ein Baustein (--eingelassen), heute für „Einnahmen und Ausgaben“ (details.gegen, die einzige eingelassene Fläche der Anwendung); im Dunkelmodus mischt er auf der dunklen Fläche. ================================================================== */ body.app{--eingelassen:color-mix(in srgb, var(--pines, var(--akzent)) 5%, var(--flaeche))} html body details.gegen, html body .mitte > details.gegen{background:var(--eingelassen, var(--flaeche))} /* ABLAGE: VIER REITER MIT ZUSTAND (06.10.2026). Chris: „Wir, Chris, Ines, Una … bei Wir ein grüner Haken … bei Chris und bei Ines ein kleines Schlosssymbol … Una ist natürlich offen.“ Haken = gemeinsam (grün), Schloss = nur für eine Person. Darunter EIN Zustandssatz zum gewählten Reiter. */ .ablage nav.abwahl a{display:inline-flex; align-items:center; gap:6px} .ablage nav.abwahl .abreiterz{display:inline-flex; line-height:0} .ablage nav.abwahl .abreiterz .ikon{width:14px; height:14px} .ablage nav.abwahl a.gemeinsam:not(.aktiv) .abreiterz{color:var(--gut, #2F6B3A)} .ablage nav.abwahl a.privat:not(.aktiv) .abreiterz{color:var(--tinte3)} .ablage .abzustand{display:flex; align-items:center; gap:8px; margin:-4px 0 14px; font-size:13px; line-height:1.4; color:var(--tinte2)} .ablage .abzustand .ikon{flex:none; width:15px; height:15px} .ablage .abzustand.gemeinsam .ikon{color:var(--gut, #2F6B3A)} .ablage .abzustand.privat .ikon{color:var(--tinte3)} .ablage .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} /* „OHNE GRUPPE“ IST EINE MARKE, KEIN BALKEN (06.10.2026). Chris: „nicht schön, dass dieses ohne Gruppe so aufgezogen ist auf die gesamte Breite … eher so als Batch … und dann kann ich das anklicken.“ GEMESSEN: In der offenen Zeile steht die Marke in einer Spalte (.bufeld, flex column, align-items:stretch) und wurde 244 px breit gezogen; beim Darüberfahren füllte sie sich rot. Jetzt: so breit wie ihr Wort, zart rot hinterlegt, rund — beim Berühren nur ein Ton kräftiger (keine Bewegung). Die Trefferfläche bleibt 44 px (::after). Unter 760 px bleibt es beim runden Fragezeichen. */ html body li.bu .bufeld > .zutun:not(.bupunkt), html body li.bu .butext .zutun{ align-self:flex-start; width:auto; border:0; border-radius:999px; padding:2px 10px; margin-top:4px; background:color-mix(in srgb, var(--bad) 12%, var(--flaeche)); color:var(--bad); font-weight:600; letter-spacing:.01em; } html body li.bu .bufeld > .zutun:not(.bupunkt):hover, html body li.bu .bufeld > .zutun:not(.bupunkt):focus-visible, html body li.bu .butext .zutun:hover, html body li.bu .butext .zutun:focus-visible{ background:color-mix(in srgb, var(--bad) 22%, var(--flaeche)); color:var(--bad); outline:none; } @media (max-width:760px){ html body li.bu .bufeld > .zutun:not(.bupunkt), html body li.bu .butext .zutun{padding:0; margin-top:0; width:19px; height:19px} } /* RECHTSCHREIBUNG (06.10.2026): der Spiegel hinter dem Feld zeichnet nur die Wellenlinie (Text unsichtbar, keine Berührung), die Vorschläge stehen in einer kleinen Tafel unter dem Wort. */ .rsspiegel{position:absolute; z-index:3600; pointer-events:none; overflow:hidden; color:transparent; background:transparent; border-style:solid; border-color:transparent; white-space:pre; margin:0} .rsspiegel.mehrzeilig{white-space:pre-wrap; overflow-wrap:break-word} html body .rsspiegel mark.rsfehler{background:none; color:transparent; text-decoration-line:underline; text-decoration-style:wavy; text-decoration-color:var(--bad); text-decoration-thickness:1.5px; text-underline-offset:3px; text-decoration-skip-ink:none} .rstafel{position:absolute; z-index:3700; display:flex; align-items:center; gap:4px; width:max-content; max-width:min(calc(100vw - 16px), 420px); padding:4px; background:var(--flaeche); border:1px solid var(--linie); border-radius:12px; box-shadow:0 10px 30px rgba(15,30,31,.16), 0 2px 6px rgba(15,30,31,.08)} .rstafel .rsliste{display:flex; flex-wrap:wrap; gap:2px; min-width:0} html body .rstafel button.rsvorschlag{width:auto; min-width:0; min-height:var(--knopf, 44px); height:auto; margin:0; padding:0 12px; border:0; border-radius:9px; background:transparent; color:var(--tinte); font:inherit; font-size:15px; font-weight:500; cursor:pointer; box-shadow:none} html body .rstafel button.rsvorschlag:hover, html body .rstafel button.rsvorschlag:focus-visible{background:var(--flaeche2)} .rstafel .rssucht{padding:0 10px; color:var(--tinte3); font-size:14px} [data-rspflege] .rsliste{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column} [data-rspflege] .rsliste li{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; border-bottom:1px solid var(--linie)} [data-rspflege] .rsliste li:last-child{border-bottom:0} [data-rspflege] form.rsneu{display:flex; gap:8px; align-items:center} [data-rspflege] form.rsneu input{flex:1 1 auto; min-width:0} .rstafel.rsangebot .rsfrage{padding:0 8px 0 10px; font-size:14px; color:var(--tinte2); white-space:nowrap} /* GEPLANT ALS … (06.10.2026): Unter dem Banknamen einer abgeglichenen Zeile steht der Planname, klein und leise. */ .butext .buplan{display:block;font-size:11.5px;line-height:1.3;color:var(--tinte3,#8a8580);font-weight:400;white-space:normal;overflow-wrap:anywhere} /* 26.10.2026 zz550: .8em ergab am Telefon 10,4 px (Gestaltwächter „schrift“) – jetzt die Hausgröße für kleine Schrift */ /* DIE ZEILE ÜBER DER ZAHL WIRD NIE ABGESCHNITTEN (07.10.2026). Seit der laufende Zyklus den Übertrag nennt („mit 35,30 € aus September“), ist sie in der halben Kachel länger als eine Zeile. Statt „…“ bricht sie um — und der Platz für zwei Zeilen ist immer reserviert, damit beim Ziehen über die Linie nichts springt. */ .mk-wann{white-space:normal; overflow:visible; text-overflow:clip; min-height:3em; text-wrap:pretty} .mkstand{min-height:calc(12px * 1.5 * 2 + 42px * 1.05 + 5px)} /* VERLAUF IM ZEILENBLATT (07.10.2026): zugeklappt, leise; jeder Eintrag zweizeilig — wann · wer, darunter was. */ .zeileverlauf{margin-top:14px; border-top:1px solid var(--linie,rgba(0,0,0,.08)); padding-top:10px} .zeileverlauf > summary{min-height:44px; display:flex; align-items:center; cursor:pointer; font-size:13px; color:var(--tinte2,#5a5550); list-style:none} .zeileverlauf > summary::-webkit-details-marker{display:none} .zeileverlauf > summary::after{content:"›"; margin-left:8px; transition:transform .2s; display:inline-block} .zeileverlauf[open] > summary::after{transform:rotate(90deg)} .zeileverlauf ol{list-style:none; margin:0; padding:0; display:grid; gap:10px} .zeileverlauf li{display:grid; gap:2px; font-size:13px; line-height:1.4; overflow-wrap:anywhere} .zeileverlauf li b{font-weight:500; color:var(--tinte3,#8a8580); font-size:12px} .zeileblatt details.zeileverlauf > summary{min-height:44px; box-sizing:border-box} /* MONATSSCHALTER IN DEN ZWÖLF-MONATS-MODULEN (07.10.2026): dieselbe Einheit wie „Einnahmen und Ausgaben“, links unter dem Titel; Abstand nach unten wie dort. */ section.jahr > nav.monatskopf, section.jahrtabelle > nav.monatskopf{margin:6px 0 16px} /* Plus zum Ergänzen in der Familie einer Karte (07.10.2026) — leise, 44 px Ziel, in der Reihe der Chips. */ dd.sbchips .sbplus{width:32px; height:32px; min-width:32px; min-height:32px; border-radius:999px; position:relative; background:var(--flaeche2); color:var(--akzent); border:0} dd.sbchips .sbplus::after{content:''; position:absolute; left:50%; top:50%; width:44px; height:44px; transform:translate(-50%,-50%)} dd.sbchips .sbplus svg{width:16px; height:16px} /* Geschwister in EINER Reihe (07.10.2026) — wie in myblank Family: umbrechende Geschwister lasen sich als nächste Generation. */ @media (min-width: 761px) { .sbkinder{flex-wrap:nowrap} } /* GESETZ 60 (08.10.2026): NICHTS SIEHT AUS WIE EIN WEBLINK. Christian: „Ich möchte nicht, dass diese Jahreszahlen wie Links unterstrichen sind. Es soll sich ja wie eine Applikation anfühlen … Bitte das in der ganzen Finanzwelt auch verankern.“ EINE Regel, die letzte im Stil, für jeden Verweis und jeden Knopf — sie schlägt jede ältere Einzelregel (bewusst !important). Antippbar ist, was die Akzentfarbe trägt; beim Darüberfahren antwortet eine ruhige Fläche, kein Strich. */ html body a, html body a:visited, html body a:hover, html body a:focus, html body button, html body button:hover, html body a *:not(.butextwort), html body button *:not(.butextwort) { text-decoration-line: none !important; } html body :is(p, li, small, td, dd, dt, label, figcaption) > a:not([class]):not(nav a):hover, html body table a:hover { background: color-mix(in srgb, var(--akzent) 10%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--akzent) 10%, transparent); border-radius: 4px; } /* DAS „?“ IM RUNDEN KNOPF SITZT MITTIG (12.10.2026, Fassung zz446, Auftrag aus der Cowork-Sitzung). GEMESSEN (Headless-Chromium, 430 px, Live-CSS stil-a + stil-b): Unter 760 px ist button.zutun ein runder 19-px-Knopf (inline-flex, justify-content:center) und erbt gap:9px. Zwischen ::before („?“) und dem unsichtbaren Text „ohne Gruppe“ (font-size 0) bleibt dieser Abstand stehen und schiebt das „?“ um rund 4 px nach links (gemessen −3,5 bis −3,8 px). Mit gap:0 gemessen mittig (−0,2 / +0,1 px) — roter und „geraten“-Kreis. Die Buchungsschrift (--schrift-buchung) bleibt. */ @media (max-width:760px){ html body li.bu .zutun:not(.bupunkt), html body .bufeld .zutun, html body li.bu .butext .zutun{gap:0; column-gap:0; row-gap:0} } /* HAUSHALT › WOHIN DAS GELD GING / WOHER ES KAM: NICHTS FLATTERT (12.10.2026, Fassung zz448, Gesetze 40 und 50). Chris mit Bildschirmabzug vom iPhone: „Weiterhin flatternde Werte!“ GEMESSEN (NAS-Browser, Live-CSS stil-a + stil-b, dieselben sieben Zeilen): Unter 560 px trafen die Platzierungen für a.awgriff (Spalten Punkt · Bild · Name · Betrag) auch die Haushaltszeile span.awgriff mit ANDEREN Spalten (Punkt · Name · Anteil · Betrag): der Name rutschte in die schmalen Spalten 3–4 und stand rechts, Name und Anteil sprangen je Zeile um bis zu 118 px. Breiter sprang der Anteil um 20–26 px, weil die Betragsspalte je Zeile so breit war wie ihr Betrag. Jetzt eigene, feste Spalten für die Haushaltszeile: breit Anteil und Betrag rechtsbündig in festen Spalten; schmal der Name in eigener Zeile, darunter Anteil an der Namenskante und Betrag rechtsbündig. Nachgemessen bei 393, 560, 700 und 1000 px: jede Kante in allen Zeilen gleich. a.awgriff (Auswertung) bleibt unberührt. */ html body .hhseite span.awgriff{grid-template-columns:9px minmax(0,1fr) 4.5ch minmax(11.5ch, max-content)} html body .hhseite span.awgriff .awfarbe{grid-column:1; grid-row:1} html body .hhseite span.awgriff .awname{grid-column:2; grid-row:1} html body .hhseite span.awgriff .awanteil{grid-column:3; grid-row:1; justify-self:end; text-align:right} html body .hhseite span.awgriff .awbetrag{grid-column:4; grid-row:1; justify-self:end; text-align:right} @media (max-width:560px){ html body .hhseite span.awgriff{grid-template-columns:9px minmax(0,1fr) auto; row-gap:1px; padding:7px 8px} html body .hhseite span.awgriff .awname{grid-column:2 / -1; grid-row:1} html body .hhseite span.awgriff .awanteil{grid-column:2; grid-row:2; justify-self:start; text-align:left} html body .hhseite span.awgriff .awbetrag{grid-column:3; grid-row:2; justify-self:end} } /* HAUSHALT › BUCHUNGEN: ZEICHEN UND GRUPPE HÄNGEN AM NAMEN (12.10.2026, Fassung zz449, Gesetz 40). Chris mit iPhone-Abzug 19:49. GEMESSEN (NAS-Browser, Live-CSS, 393 px): .bu-name war ein Flex-Container — der Name füllte als ein Stück die ganze Breite, das „?“ landete allein in einer neuen Zeile („Osiander Vertriebsgesellschaft GmbH Co. KG“); und was umbrach, stand mit margin-left:6px eingerückt neben „Lastschrift“ („dm Drogeriemarkt“ → „Lebensmittel und Drogerie“). Jetzt Fließtext: das Zeichen folgt dem letzten Wort, der Abstand ist das Leerzeichen (am Zeilenanfang fällt es weg) — was nicht mehr passt, bricht bündig unter den Namen um. 1000 px unverändert. */ html body ul.hhbu .bu-name{display:block} html body ul.hhbu .bu-name .zutun, html body ul.hhbu .bu-name .bugruppe{margin-left:0} html body ul.hhbu .bu-name .zutun{vertical-align:middle} /* WANN WIR FREI HABEN (15.10.2026, Fassung zz454, Vorhaben 307). Karte wie die Ferienkarte darüber, Personenfarben --pchris/--pines/--puna, Störer im Bernstein (--warte, Gesetz 41), Konto rechtsbündig mit gleich breiten Ziffern (Gesetz 50), jedes Tippziel 44 px (Gesetz 22). */ section.wfmodul{position:relative; background:var(--flaeche); border:1px solid var(--linie); border-radius:18px; padding:20px 22px; margin:0 0 16px} @media (max-width:560px){ section.wfmodul{padding:16px} } div.wfband{margin:6px 0 4px} svg.ubkette rect.wfstreifen.wf-una{fill:color-mix(in srgb, var(--puna) 55%, transparent)} svg.ubkette rect.wfstreifen.wf-chris{fill:var(--pchris)} svg.ubkette rect.wfstreifen.wf-ines{fill:var(--pines)} svg.ubkette rect.wfstreifen.st-geplant{fill-opacity:.5} svg.ubkette rect.wfstreifen.st-beantragt{fill-opacity:.75} svg.ubkette rect.wfalle{fill:var(--akzent)} svg.ubkette rect.wfluecke{fill:var(--warte)} svg.ubkette text.wfname{font-size:12.5px; fill:var(--tinte2); font-family:var(--schrift, inherit)} svg.ubkette text.wfname.leise{fill:var(--tinte3)} .stoerer{display:inline-flex; align-items:center; padding:1px 8px; border-radius:999px; font-size:12px; font-weight:600; font-style:normal; color:var(--wartetinte); background:color-mix(in srgb, var(--warte) 16%, transparent); white-space:nowrap} .stoerer.leise{font-weight:500} ul.wffenster{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; font-size:14px; color:var(--tinte2)} ul.wffenster li{display:grid; grid-template-columns:16px minmax(0, 1fr); align-items:start; gap:8px} ul.wffenster li > .ikon{margin-top:3px} ul.wffenster li .stoerer{margin-left:4px} ul.wffenster li.wfalle .ikon{color:var(--akzent)} ul.wffenster li.wfluecke .ikon{color:var(--wartetinte)} div.wfkonten{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px 24px; margin-top:16px} div.wfkonto{border-top:3px solid var(--linie); padding-top:10px; min-width:0} div.wfkonto.wf-chris{border-top-color:var(--pchris)} div.wfkonto.wf-ines{border-top-color:var(--pines)} div.wfkonto h4{margin:0 0 6px; font-size:15px} dl.wfreihe{display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:2px 12px; margin:0 0 12px; font-size:14px} dl.wfreihe dt{color:var(--tinte2); min-width:0} dl.wfreihe dd{margin:0; justify-self:end; text-align:right; font-variant-numeric:tabular-nums} dl.wfreihe dt.wfjahr{font-weight:600; color:var(--tinte)} dl.wfreihe .wfrest{font-weight:600; color:var(--tinte); border-top:1px solid var(--linie); padding-top:3px} dl.wfreihe dd.wfrest{justify-self:stretch} dl.wfreihe dd.minus{color:var(--bad)} ul.wfzeiten{list-style:none; margin:0; padding:0; display:grid; gap:2px} ul.wfzeiten li{display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:0 8px; min-height:44px; border-top:1px solid var(--linie); padding:4px 0} ul.wfzeiten .wfwann{font-size:14px; font-variant-numeric:tabular-nums} ul.wfzeiten .wfwas{grid-column:1; font-size:12px; color:var(--tinte3)} ul.wfzeiten form.wfweg{grid-column:2; grid-row:1 / span 2; margin:0} /* zz476: Haken (Stand) und Papierkorb nebeneinander */ ul.wfzeiten .wftun{grid-column:2; grid-row:1 / span 2; display:flex; gap:6px; align-items:center} ul.wfzeiten .wftun form.wfweg{grid-column:auto; grid-row:auto} form.wfform fieldset.wfwer{border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; grid-column:1 / -1} form.wfform fieldset.wfwer legend{font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinte3); padding:0; margin-bottom:4px} label.wfperson{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border:1px solid var(--linie); border-radius:999px; cursor:pointer} label.wfperson:has(input:checked){border-color:var(--akzent); background:color-mix(in srgb, var(--akzent) 10%, var(--flaeche))} label.wfhalb{display:flex; align-items:center; gap:8px; min-height:44px; font-size:13px; color:var(--tinte2); grid-column:1 / -1} div.wfregelblock{display:grid; gap:2px; margin:0 0 16px} div.wfregelblock h4{margin:8px 0 4px; font-size:15px} div.wfregelblock form{margin:0} em.wfannahme{font-style:normal; font-size:11px; font-weight:600; color:var(--wartetinte); background:color-mix(in srgb, var(--warte) 16%, transparent); border-radius:999px; padding:0 6px; margin-left:4px; text-transform:none; letter-spacing:0} p.ubutage{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13px; color:var(--tinte2); margin:4px 0 0} a.ubutfrage{color:var(--akzent); font-weight:600; min-height:44px; display:inline-flex; align-items:center} /* WANN WIR FREI HABEN — Zoom, Blättern, Ferienzeichen, Auswahl, Legende (15.10.2026, zz459). */ div.wfsteuer{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 0 2px} /* zz497 (Vorhaben 317): Gestaltwächter „titelabstand“ – Titel zu Steuerleiste 24 px statt --titelabstand; „knopf“ – die Kalenderpfeile (36 px, nur Zeichen) erbten die Mindestbreite der Knopffamilie (72 px). */ section.wfmodul > div.wfsteuer{margin-top:0} html body button.ubkalpfeil{min-width:0; --knopf-min:0; --knopf-max:none; width:44px; height:44px; flex:0 0 44px} /* Am Finger (iPhone, iPad): jeder Kalendertag hat 44 px Trefferfläche – gemessen 42 px. */ @media (pointer:coarse){ html body button.ubkaltag{height:44px} } /* Am iPhone steckt der Kalender als Kasten (16 px innen) im Modul (16 px innen) – für sieben Tage blieben 293 px, 42 px je Tag. Mit 5 px Innenabstand im Kalenderkasten sind es 45 px (gemessen bei 393 px). */ @media (max-width:420px){ html body section.wfmodul div.ubkal{padding-left:5px; padding-right:5px} } div.wfsteuer .wfspanne{flex:1 1 auto; min-width:0; font-size:14px; font-weight:600; color:var(--tinte); font-variant-numeric:tabular-nums} div.wfsteuer button.zeichenknopf:disabled{opacity:.35; cursor:default} svg.ubkette line.wfwoche{stroke:var(--linie); stroke-width:1; stroke-dasharray:2 3} svg.ubkette rect.wfwochenende{fill:color-mix(in srgb, var(--tinte) 5%, transparent)} svg.ubkette text.wftag{font-size:10.5px; fill:var(--tinte3); font-variant-numeric:tabular-nums; font-family:var(--schrift, inherit)} svg.ubkette g.wfstueck{cursor:pointer; outline:none} svg.ubkette g.wfstueck:focus-visible rect:not(.uftreffer){stroke:var(--tinte); stroke-width:2} svg.ubkette g.wfferienzeichen path{fill:none; stroke:var(--tinte2); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round} p.wfwahl{min-height:22px; margin:2px 0 0} p.wfwahl b{font-weight:600} ul.wflegende{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--tinte3)} ul.wflegende li{display:inline-flex; align-items:center; gap:6px} ul.wflegende li::before{content:''; width:10px; height:10px; border-radius:3px; background:var(--linie)} ul.wflegende li.l-una::before{background:color-mix(in srgb, var(--puna) 55%, transparent)} ul.wflegende li.l-chris::before{background:var(--pchris)} ul.wflegende li.l-ines::before{background:var(--pines)} ul.wflegende li.l-alle::before{background:var(--akzent)} ul.wflegende li.l-luecke::before{background:var(--warte)} dl.wfreihe span.wfweiter{font-weight:500; font-size:12px; color:var(--tinte3)} /* zz462: dieses Band zeichnet sich in der echten Breite — keine Mindestbreite, kein seitliches Rollen (Gesetze 22, 49). */ html body section.wfmodul div.ubbild.wfband{overflow:visible} html body section.wfmodul div.ubbild.wfband svg.ubkette{min-width:0; width:100%} /* zz463: die Steuerleiste des Bands bleibt einzeilig — gemessen bei 393 px brach die Lupe allein in eine zweite Zeile. */ html body section.wfmodul div.wfsteuer{flex-wrap:nowrap; gap:4px} html body section.wfmodul div.wfsteuer .zeichenknopf{width:44px; min-width:44px; height:44px; flex:0 0 44px; padding:0} html body section.wfmodul div.wfsteuer .wfspanne{text-align:center; white-space:nowrap; overflow:hidden; text-overflow:clip} /* DER PLANUNGSKALENDER in „Wann wir frei haben“ (16.10.2026, zz464). Bausteine des Reisekalenders (div.ubkal, .ubkalgitter, button.ubkaltag, Ferien als Band, Von/Bis); neu nur: Feiertag (Ziffer in Rot, Name unter dem Monat), Urlaubspunkte je Person (voll = beantragt/genehmigt, Ring = geplant, halb gefüllt = halber Tag), die Rechnung des gewählten Zeitraums. 44-px-Ziele. */ html body section.wfmodul div.ubkal.wfkal{margin:14px 0 0} html body section.wfmodul div.wfkal button.ubkaltag{height:44px; min-height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px} div.wfkal button.ubkaltag .wfziffer{font-variant-numeric:tabular-nums; line-height:1} div.wfkal button.ubkaltag.wfwe:not(.von):not(.bis) .wfziffer{color:var(--tinte3)} div.wfkal button.ubkaltag.wfft:not(.von):not(.bis) .wfziffer{color:var(--bad); font-weight:700} div.wfkal .wfpunkte{display:flex; gap:3px; height:7px} div.wfkal .wfpunkte i, p.wfkallegende i{display:inline-block; width:7px; height:7px; border-radius:50%; box-sizing:border-box} div.wfkal i.wfp-chris, p.wfkallegende i.wfp-chris{background:var(--pchris); border:1.5px solid var(--pchris)} div.wfkal i.wfp-ines, p.wfkallegende i.wfp-ines{background:var(--pines); border:1.5px solid var(--pines)} div.wfkal i.st-geplant, p.wfkallegende i.st-geplant{background:transparent} div.wfkal i.halb.wfp-chris, p.wfkallegende i.halb.wfp-chris{background:linear-gradient(90deg, var(--pchris) 50%, transparent 50%)} div.wfkal i.halb.wfp-ines{background:linear-gradient(90deg, var(--pines) 50%, transparent 50%)} p.wfkallegende{display:flex; flex-wrap:wrap; gap:4px 14px; margin:10px 0 0; font-size:12px; color:var(--tinte2)} p.wfkallegende span{display:inline-flex; align-items:center; gap:6px} p.wfkallegende b.wfftmuster{color:var(--bad); font-weight:700; font-variant-numeric:tabular-nums} p.wfkallegende i.wfferienmuster{width:22px; height:12px; border-radius:6px; background:color-mix(in srgb, var(--akzent) 16%, transparent)} div.wfkal div.wfrechnung{display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:start; gap:6px 14px} div.wfkal div.wfrechnung > *{grid-column:1} div.wfkal div.wfrechnung > button.zeichenknopf{grid-column:2; grid-row:1 / span 4} div.wfkal p.wfspannwort{margin:0; font-size:14px; font-weight:600; color:var(--tinte); font-variant-numeric:tabular-nums} div.wfkal dl.wfplan{margin:0} div.wfkal dl.wfplan .leise{font-size:12px; color:var(--tinte3)} div.wfkal p.wfplansatz{margin:0; font-size:13px; color:var(--tinte2)} /* URLAUB EINFACHER (22.10.2026, zz504). Chris: „Es erschlägt einen die Fülle an Informationen … wir sehen gar nicht genau, wo wir sind … gemeinsam gerne lila … dass man da ein wenig reinzoomen kann … die Ikonografie, dass man da einen Urlaub hinzufügen kann, geht unter.“ Vorn: je Person Rest und nächster Urlaub, dann EIN Knopf mit Wort; Kalender und Formular liegen dahinter. Hinweise und Konten klappen auf (details.herleitung, derselbe Baustein wie überall). */ svg.ubkette rect.wfalle{fill:var(--palle)} ul.wflegende li.l-alle::before{background:var(--palle)} ul.wffenster li.wfalle .ikon{color:var(--palle)} svg.ubkette text.wftag.stark{fill:var(--tinte2); font-weight:600} html body section.wfmodul svg#wfBild{touch-action:pan-y} ul.wfblick{list-style:none; margin:0 0 14px; padding:0; display:grid} ul.wfblick > li{display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"name rest" "wann wann"; gap:1px 12px; padding:9px 0 9px 18px; border-top:1px solid var(--linie); position:relative; min-width:0} ul.wfblick > li:first-child{border-top:0; padding-top:0} ul.wfblick > li::before{content:''; position:absolute; left:0; top:calc(50% - 5px); width:10px; height:10px; border-radius:50%; background:var(--linie)} ul.wfblick > li:first-child::before{top:calc(50% - 9.5px)} ul.wfblick > li.wf-chris::before{background:var(--pchris)} ul.wfblick > li.wf-ines::before{background:var(--pines)} ul.wfblick > li.wf-alle::before{background:var(--palle)} ul.wfblick > li > b{grid-area:name; font-size:15px; font-weight:600} ul.wfblick .wfbrest{grid-area:rest; justify-self:end; font-size:14px; color:var(--tinte2); font-variant-numeric:tabular-nums; white-space:nowrap} ul.wfblick .wfbrest b{color:var(--tinte); font-size:15px; font-weight:600} ul.wfblick .wfbwann{grid-area:wann; font-size:13.5px; color:var(--tinte2); font-variant-numeric:tabular-nums} @media (min-width:821px){ ul.wfblick{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 24px} ul.wfblick > li, ul.wfblick > li:first-child{border-top:0; padding-top:0} ul.wfblick > li::before, ul.wfblick > li:first-child::before{top:5px} } details.plusauf{margin:0 0 16px} html body details.plusauf > summary.knopf{list-style:none; cursor:pointer; display:flex; width:max-content; min-height:var(--knopf, 44px); padding:0 20px; border-radius:12px; background:var(--akzent); color:var(--aufakzent); font-weight:600; user-select:none; -webkit-user-select:none} details.plusauf > summary::-webkit-details-marker{display:none} details.plusauf > summary .ikon{width:17px; height:17px; transition:transform .16s ease} html body details.plusauf[open] > summary.knopf{background:var(--flaeche2); color:var(--tinte); box-shadow:inset 0 0 0 1px var(--linie)} details.plusauf[open] > summary .ikon{transform:rotate(45deg)} details.plusauf > form.wfform{margin-top:14px} details.plusauf > p.ubsatz{margin:8px 0 0; font-size:13px; color:var(--tinte3)} @media (max-width:560px){ html body details.plusauf > summary.knopf{width:100%} } div.wfkonten{margin-top:12px; align-items:start} html body details.herleitung.wfkonto{margin:0; border-top:1px solid var(--linie); padding-top:0} details.wfkonto i.wfpunkt{width:10px; height:10px; border-radius:50%; flex:0 0 auto; background:var(--linie)} details.wfkonto.wf-chris i.wfpunkt{background:var(--pchris)} details.wfkonto.wf-ines i.wfpunkt{background:var(--pines)} details.wfkonto .hlinhalt dl.wfreihe:first-child{margin-top:12px} details.herleitung.wfhinweise{margin-top:12px} details.herleitung.ufalle{margin-top:14px} /* Akkordeon ohne Zahl: der Winkel steht trotzdem rechts (wie bei jedem anderen). */ details.herleitung > summary:not(:has(.hlzahl))::after{margin-left:auto} details.herleitung.ubkwas{margin:12px 0 0; background:transparent} details.herleitung.ubkwas > summary{padding:10px 14px; min-height:44px; box-sizing:border-box} details.herleitung.ubkwas .hlinhalt{padding:4px 14px 14px} /* zz506: „Reise hinzufügen“ in derselben Gestalt; das Formular darunter mit Abstand. */ details.plusauf.ubplus{margin:4px 0 18px} details.plusauf.ubplus > section.ubneu{margin:14px 0 4px} /* HAUSHALT OBEN, ZUSAMMEN UNTEN — NUR AM TELEFON (24.10.2026, Chris). Bis 700 px steht Haushalt in der Personenleiste und Zusammen in der Tab-Leiste; darüber bleibt es wie bisher. Beide Fassungen stehen im HTML, das Stylesheet wählt — nichts springt. */ .nurtelefon{display:none !important} @media (max-width:700px){ .nichttelefon{display:none !important} html body .kopf nav.umschalter.konten.personen2 > a.nurtelefon{display:inline-flex !important} html body nav.tableiste .tab.nurtelefon{display:flex !important} html body nav.tableiste .tab.nichtamtelefonaktiv{color:var(--tinte3)} html body .kopf nav.umschalter.konten.personen2 > a.nurtelefon .ikon{width:22px; height:22px; margin:0 2px 0 6px; color:var(--tinte2)} } /* DIE PERSONENLEISTE STEHT AUF JEDER SEITE AN DERSELBEN STELLE (24.10.2026). Chris: „Das Menü springt nach rechts, wenn man auf Haushalt klickt.“ GEMESSEN (393 px): Übersicht x 17 / y 115, Haushalt x 26 / y 114. Ursache: Auf Seiten ohne Abrufkasten steht das (unsichtbare) Menüblatt details.mn als erstes Kind im Kopf — der Abstand der Reihe (gap 10 px) schob die Leiste nach rechts. Das Menüblatt öffnet ohnehin fixiert; es steht jetzt außerhalb der Reihe. Der eine Pixel des Kastenrands wird nachgebildet. */ html body .kopf > details.mn{position:absolute; width:0; height:0; overflow:visible} html body .kopf > nav.umschalter.konten.personen2{margin:1px 0 0 1px} /* KEIN VERSCHENKTER PLATZ OBEN (24.10.2026). Chris (iPhone 18 Pro Max): „Die Seite verschenkt … Platz nach oben.“ GEMESSEN am Bildschirmfoto: Der Kopf begann rund 93 pt unter der Oberkante — 24 pt UNTER dem Sicherheitsrand (Regel vom 05.10. gegen die Unschärfekante von iOS 26). Wie in Apples eigenen Apps steht der Kopf jetzt 6 pt unter dem Sicherheitsrand; die Unschärfe liegt beim Ruhen nur über dem leeren Grund, beim Rollen läuft ohnehin alles darunter. Ohne Sicherheitsrand (Schreibtisch) bleiben 16 px. Diese Regel ersetzt die beiden darüber. */ @supports (padding-top: env(safe-area-inset-top)){ html body #blatt > header.markenband.marke2{margin-top:max(16px, calc(env(safe-area-inset-top, 0px) + 6px))} } @media (display-mode: standalone){ html body #blatt > header.markenband.marke2{margin-top:calc(max(env(safe-area-inset-top, 0px), 47px) + 6px)} } /* NOCH WENIGER LUFT OBEN (24.10.2026, zweiter Schritt). Chris (iPhone 18 Pro Max): „immer noch viel Luft nach oben … zu viel“. GEMESSEN an zwei Bildschirmfotos: Kopf bei 93 pt (Rand + 24) und 81 pt (Rand + 6) — der gemeldete Sicherheitsrand liegt beim 18 Pro Max rund 20 pt unter der Dynamic Island (Unterkante etwa 48 pt). Der Kopf steht jetzt 14 pt ÜBER diesem Rand: 18 Pro Max ≈ 60 pt, Insel-iPhones ab 14 Pro ≈ 50 pt (Insel endet ≈ 48), Notch-iPhones ≈ 38 pt (Notch endet ≈ 33), ohne Rand (Schreibtisch) 16 px. Ersetzt die Regel darüber. */ @supports (padding-top: env(safe-area-inset-top)){ html body #blatt > header.markenband.marke2{margin-top:max(16px, calc(env(safe-area-inset-top, 0px) - 14px))} } @media (display-mode: standalone){ html body #blatt > header.markenband.marke2{margin-top:max(16px, calc(env(safe-area-inset-top, 0px) - 14px))} } /* Haushalt steht seit 24.10.2026 auf allen Größen in der Personenleiste: das Zeichen überall so groß wie am Telefon. */ html body .kopf nav.umschalter.konten.personen2 > a.hh .ikon{width:22px; height:22px; margin:0 2px 0 6px; color:var(--tinte2)} /* RUHE IM HELLIGKEITSMENÜ (24.10.2026). Chris: „das Flattern der Texte … Hell steht weiter rechts, Dunkel weiter links.“ GEMESSEN (1440 px): Text beginnt bei 1065 / 1057 / 1033 px — die Knopffamilie setzt ihren Inhalt mittig (justify-content:center), jede Zeile rückte um die halbe Differenz ihrer Textbreite ein. Ein Knopf, der linksbündig schreibt, beginnt auch links. */ html body button.hellwahl, html body button.mnwerk{justify-content:flex-start} /* dasselbe im Menüblatt am Telefon (gemessen: Einzug 103–118 px) */ /* DIE STEUERLEISTE HAFTET OBEN (24.10.2026). Chris: „wenn ich dann runterscrolle … soll natürlich auch die Leiste Christian Blank, Ines Blank, Promedia Solutions und alle Belege oben haften bleiben … ich lande dann bei der obersten Navigation … und verlasse das Modul.“ Ebene und Jahr bleiben beim Rollen am oberen Rand stehen (unter dem Sicherheitsrand des iPhone), auf eigenem Grund, damit nichts durchscheint; ein weicher Verlauf darunter trennt sie vom Inhalt. Nichts verschiebt sich: sticky nimmt seinen Platz mit. */ html body nav.stwahl{position:sticky; top:env(safe-area-inset-top, 0px); z-index:30; background:var(--grund); margin-left:-8px; margin-right:-8px; padding:10px 8px; border-radius:0 0 14px 14px} html body nav.stwahl::after{content:""; position:absolute; left:0; right:0; top:100%; height:14px; pointer-events:none; background:linear-gradient(var(--grund), transparent)} /* GEMESSEN: Die oberste Leiste (Chris · Ines · Haushalt, .kopf) haftet selbst oben — die Steuerleiste lag darunter, ein Tipp traf „Chris“ der obersten Leiste und führte aus dem Modul. Wo eine Seite ihre eigene Leiste trägt (nav.stwahl), haftet nur diese. */ html body:has(nav.stwahl) .kopf{position:relative !important; top:auto !important} html body nav.stwahl{margin-bottom:6px} /* 26 px Abstand wie vorher: 6 + 2 × 10 px Innenrand — nichts rückt */ /* Gesetz 60 (24.10.2026): „auswählen“ in der Ablagefläche ist ein Hinweis, kein Verweis — Akzentfarbe, keine Unterstreichung. */ .bmzone .bmwahlwort{color:var(--akzent); font-weight:600; text-decoration:none} /* Dienstreise im Steuerkalender (24.10.2026): eigene, ruhige Farbe — weder Fahrt (A) noch Homeoffice (H). */ button.sttag.reise, i.stk.reise{background:color-mix(in srgb, var(--pchris) 20%, var(--flaeche)); color:var(--pchris)} button.sttag.reise .stk, i.stk.reise{color:var(--pchris)} /* REITER DER STEUERSEITE (24.10.2026, Vorhaben 342). Eine Zeile Reiter in der haftenden Steuerleiste — am Schreibtisch Zeichen und Wort nebeneinander, am Telefon Zeichen über dem Wort wie in der Tab-Leiste, damit alle in EINE Zeile passen (kein zweizeiliges Menü, nie seitlich rollen). Ein verborgener Abschnitt bleibt verborgen, auch wenn ein Stil ihn sonst zeigt. */ html body #blatt section[data-teil][hidden]{display:none !important} html body nav.stwahl > .stteile{flex:1 1 100%; order:9; display:flex; flex-wrap:nowrap; gap:4px; width:100%; box-sizing:border-box; margin:0} html body nav.stwahl > .stteile > a{flex:1 1 0; min-width:0; justify-content:center; gap:7px; min-height:44px; padding:0 10px; white-space:nowrap; text-decoration:none} html body nav.stwahl > .stteile > a .ikon{width:17px; height:17px; flex:0 0 auto} html body nav.stwahl > .stteile > a span{overflow:hidden; text-overflow:ellipsis} @media (max-width:760px){ html body nav.stwahl > .stteile{order:3} html body nav.stwahl > .stteile > a{flex-direction:column; gap:2px; padding:4px 2px; min-height:52px; font-size:11.5px; font-weight:500} /* zz559: 11 px lag unter der Hausgröße (Gestaltwächter „schrift“) */ html body nav.stwahl > .stteile > a .ikon{width:20px; height:20px} html body nav.stwahl > .stteile > a span{max-width:100%} } @media (max-width:560px){ html body nav.stwahl{grid-template-areas:"pers pers" "jahre post" "teile teile"} html body nav.stwahl > .stteile{grid-area:teile} } html body nav.stwahl > .stteile > a .stkurz{display:none} @media (max-width:760px){ html body nav.stwahl > .stteile > a .stlang{display:none} html body nav.stwahl > .stteile > a .stkurz{display:inline} } /* Gemessen (820 px): gleich breite Reiter schnitten „Kapital und Miete“ ab — am Schreibtisch und iPad richtet sich jeder Reiter nach seinem Wort. */ @media (min-width:761px){ html body nav.stwahl > .stteile > a{flex:1 1 auto} html body nav.stwahl > .stteile > a span{overflow:visible} } /* Wirtschaftsgut? (24.10.2026, Vorhaben 344) — je Anschaffung eine Karte, Vorschlag und zwei Antworten. Zahl am Reiter Anlagen. */ .gwfragen{display:grid; gap:12px; margin:6px 0 18px} .gwfrage{border:1px solid var(--linie); border-left:4px solid var(--warte); border-radius:14px; padding:14px 16px; background:color-mix(in srgb, var(--warte) 6%, var(--flaeche))} .gwfrage .gwfragekopf{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; margin:0 0 4px} .gwfrage .gwfragekopf span{color:var(--tinte2); font-size:13.5px; font-variant-numeric:tabular-nums} .gwfrage .gwfragetun{display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px} .gwfrage form.gwfrageform{flex:1 1 320px; margin:0} .gwfrage form.gwfragenein{margin:0} html body nav.stwahl > .stteile > a{position:relative} html body nav.stwahl > .stteile > a b.stteilzahl{display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--warte); color:#14110E; font-size:11px; font-weight:700; line-height:1} @media (max-width:760px){ html body nav.stwahl > .stteile > a b.stteilzahl{position:absolute; top:2px; right:calc(50% - 22px)} } /* AUFKLAPPER-PFEIL IN DERSELBEN ZEILE (24.10.2026). Chris (iPad): „der Pfeil ist in der falschen Ebene“ — in Safari stand „›“ über dem Text, in Chromium klebte er ohne Abstand daran. Der Pfeil ist jetzt ein festes Kästchen vor dem Text, in beiden Engines gleich. */ /* GEMESSEN in WebKit (Safari-Engine): ein <summary> als Flex-Kasten setzt den Pfeil mittig ÜBER den Text — darum normaler Textfluss. */ html body details.frinfo > summary, html body details.frneu > summary{display:block; line-height:28px; padding:3px 0} /* Ursache (WebKit gemessen): die Trefferflächen-Regel „main summary:not([class])::before“ (Zeile 181) setzt dieses Element absolut in die Mitte — hier trägt es aber den Pfeil. Also ausdrücklich zurück in den Textfluss. */ html body details.frinfo > summary::before, html body details.frneu > summary::before{content:'›'; position:static; left:auto; top:auto; width:10px; height:auto; transform:none; display:inline-block; margin-right:8px; text-align:center; transition:transform .15s ease} html body details.frinfo[open] > summary::before, html body details.frneu[open] > summary::before{content:'›'; transform:rotate(90deg)} /* Belegkarte (bis 1.000 px): Stift und Papierkorb nebeneinander, nicht untereinander (gemessen 834 px). */ @media (max-width:1000px){ html body table.stbelegliste tbody td.sttun{flex-direction:row; flex-wrap:nowrap; align-items:center} html body table.stbelegliste tbody td.sttun > form{display:inline-flex; margin:0} } /* Suchfeld (24.10.2026, Vorhaben 347): Safaris eigenes X ausblenden — es gibt genau ein X (.skweg), und das leert alles. */ input.skein::-webkit-search-cancel-button, input.skein::-webkit-search-decoration{-webkit-appearance:none; appearance:none; display:none} /* FÜR ELSTER (25.10.2026, Vorhaben #324): dieselbe Tabelle wie die EÜR; Herkunft als Marke wie in der Prognose */ section.stelster h3.stelstertitel{margin:22px 0 6px; font-size:15px; font-weight:600} table.stelstertabelle span.stelchip{display:inline-block; margin-right:6px; padding:1px 8px; border-radius:999px; font-size:12px; font-weight:600; background:var(--flaeche2); color:var(--tinte2); white-space:nowrap} table.stelstertabelle tr.h-gemessen span.stelchip{background:color-mix(in srgb, var(--gut, #4f7a28) 16%, transparent); color:var(--gut, #4f7a28)} table.stelstertabelle tr.h-fehlt span.stelchip, table.stelstertabelle tr.h-pruefen span.stelchip{background:color-mix(in srgb, var(--warte, #b8860b) 16%, transparent); color:var(--tinte)} /* ====================================================================== EINNAHMEN GEGEN AUSGABEN AUF EINEN BLICK (27.10.2026, zz560) Chris mit Bildschirmabzug „Was hinausgeht“ am Telefon: „die Farbkodierung … sehr schwer zu trennen … die Zwischenüberschrift fällt mir kaum auf … dass ich sofort verstehe, Einnahmen gegen Ausgaben.“ Gemessen: Beide Hälften unterschieden sich nur an der Farbe der Beträge, und gebuchte Beträge mischten sie zu 55 %/45 % mit Grau – Grün und Rot rückten zusammen. Drei Mittel, ein Bauteil (.ggseite: Übersicht, Zusammen, Haushalt): 1. jede Hälfte auf eigener, leicht getönter Fläche – der Inhalt bleibt, wo er war (gleicher Rand nach außen wie innen); 2. die Kopfzeile ist ein kräftiges Band und klebt beim Blättern unter dem Kopf (--kopfhoehe, gemessen in app.js), bis die nächste Hälfte sie ablöst; 3. Vorzeichen vor jedem Betrag (+ / −) und weniger Grau im Gebuchten – lesbar auch ohne Farbe. ====================================================================== */ html body .ggraster > .ggseite{ margin-inline:-8px; padding:0 8px 8px; border-radius:14px; background:color-mix(in srgb, var(--gut) 6%, var(--flaeche)); } html body .ggraster > .ggseite.aus{background:color-mix(in srgb, var(--bad) 6%, var(--flaeche))} /* Abstand der beiden Flächen: das Raster hat 18 px; nebeneinander kommen die 2 × 8 px der Flächen dazu, sonst berühren sie sich. */ html body .ggraster{column-gap:34px} html body .ggraster > .ggseite > h3 .ggsumme b{width:auto} /* Vorzeichen direkt vor der Summe */ html body .ggraster > .ggseite > h3{ position:sticky; top:calc(var(--kopfhoehe, 0px) - 1px); z-index:41; /* über dem weichen Verlauf unter dem Kopf (z 40) */ margin:0 -8px 8px; padding:10px 10px 10px; border-radius:14px 14px 0 0; border-bottom:0; background:color-mix(in srgb, var(--gut) 16%, var(--flaeche)); } html body .ggraster > .ggseite.aus > h3{background:color-mix(in srgb, var(--bad) 15%, var(--flaeche))} html body .ggraster > .ggseite > h3 .ggwas{font-size:13px; letter-spacing:.04em; color:var(--tinte)} html body .ggraster > .ggseite.ein > h3 svg{color:var(--gut)} html body .ggraster > .ggseite.aus > h3 svg{color:var(--bad)} /* Vorzeichen: direkt vor den Ziffern. Der Betrag ist so breit wie sein Inhalt (Eingabefelder misst app.js, mindestens ein Tippziel von 6 Zeichen), das Feld bleibt rechtsbündig – Ziffern- und Euro-Kante wie bisher. */ html body .ggseite li.bu .buwertfeld > b.buwert{width:auto; min-width:0} html body .ggseite li.bu .buwertfeld > input.buwert{min-width:6ch; width:max(6ch, calc(var(--zeichen, 8) * 1ch + 14px))} /* zz574: 4 px Luft – Safari ließ Bruchteile weniger Platz */ /* zz562: die Mindestbreite 92 px des Telefons (Feld ohne Vorzeichen) gilt hier nicht */ .ggseite .buwertfeld > i.buvz{font-style:normal; flex:0 0 auto; width:9px; text-align:right; font-weight:600; font-family:var(--schrift-buchung)} .ggseite.ein .buwertfeld > i.buvz::before{content:'+'; color:var(--gut)} .ggseite.aus .buwertfeld > i.buvz::before{content:'−'; color:var(--bad)} /* Gebuchtes bleibt gedämpft, aber nicht grau: 80 % Farbe statt 55 % / 45 %. */ html body .ggseite.ein li.bu.fest:has(.bubank:not(.leer)) b.buwert, html body .ggseite.ein li.bu.fest:has(.bubank:not(.leer)) .buwertfeld::after{color:color-mix(in srgb, var(--gut) 80%, var(--tinte3))} html body .ggseite.aus li.bu.fest:has(.bubank:not(.leer)) b.buwert, html body .ggseite.aus li.bu.fest:has(.bubank:not(.leer)) .buwertfeld::after{color:color-mix(in srgb, var(--bad) 80%, var(--tinte3))} /* ====================================================================== DIE ABRUFZEILE IN EINER ZEILE (27.10.2026, zz564) Chris mit Bildschirmabzug: „aufgebläht auf 3 Zeilen … Da braucht ein Icon … eine ganze Zeile.“ Gemessen bei 393 px: Zeichen 15 px allein in Zeile 1, der Satz (273 px Platz) in zwei Zeilen darunter – die Zeile darf umbrechen (für den Fortschritt), und der Satz war breiter als der Platz, also rutschte er als Ganzes unter das Zeichen. Jetzt: der Satz bleibt neben dem Zeichen und bricht, wenn überhaupt, in sich um; am Telefon steht die Kurzform (abrufKurzform()). ====================================================================== */ html body .abrufleiste .alsatz > .altext, html body .abrufleiste .alsatz > .altextkurz{flex:1 1 0; min-width:0} html body .abrufleiste .alsatz > .altextkurz{display:none} @media (max-width:760px){ html body .abrufleiste .alsatz > .altext{display:none} html body .abrufleiste .alsatz > .altextkurz{display:block} } /* ---- RUHE ÜBER ALLE REITER DER MONATSTABELLE (27.10.2026, zz567). Chris: „Egal welchen Reiter ich hier anspringe, es muss das Ruhegesetz gewahrt bleiben.“ Festes Spaltenraster statt automatischer Breiten: Die Spalten stehen in Chris, Ines, Zusammen und Gesamt an derselben Stelle, gleich welche Zahlen darin stehen. Monat überall 18 %, der Rest teilt sich gleich; „Tiefster Punkt“ (Betrag + Tag) bekommt etwas mehr. Kopf überall zweizeilig mit derselben Höhe; der Fuß hält Platz für den längeren Satz. */ section.jahrtabelle .tabellenrahmen table.tabruhe{table-layout:fixed; width:100%} section.jahrtabelle table.tabruhe col.tcmonat{width:18%} section.jahrtabelle table.tabruhe:not(.vergleich):not(.mitsonder) col.tcwert{width:15.5%} section.jahrtabelle table.tabruhe:not(.vergleich):not(.mitsonder) col.tctief{width:20%} section.jahrtabelle table.tabruhe.mitsonder col.tcwert{width:12.4%} section.jahrtabelle table.tabruhe.mitsonder col.tctief{width:20%} section.jahrtabelle table.tabruhe.vergleich col.tcwert{width:13.666%} /* Kein overflow:hidden an den Zellen: das machte sie für tlKuerzen „kürzbar“ – der Kopf wurde zu „Einnah …“ (gemessen). */ html body section.jahrtabelle div.tabellenrahmen table.tabruhe thead th{white-space:nowrap} section.jahrtabelle table.tabruhe thead th{height:33px; box-sizing:border-box; vertical-align:bottom} section.jahrtabelle table.tabruhe thead tr + tr th{height:39px} section.jahrtabelle p.tabfusspaar{display:grid} section.jahrtabelle p.tabfusspaar > span{grid-area:1 / 1} section.jahrtabelle p.tabfusspaar > span[aria-hidden]{visibility:hidden} html body table.tkarten.tabruhe > colgroup{display:none} /* DAS IPAD RASTET UNTER DER UNSCHÄRFE EIN (27.10.2026, zz570). Chris (iPad 11", Bildschirmfoto): „Durch das Liquid Glass in der Unschärfe verschwindet jetzt oben die My Blank, der Header … auch in der iPad-Auflösung muss das genauso einrasten.“ GEMESSEN an der Regel vom 24.10. (Rand − 14 pt): Sie ist für Insel-iPhones gebaut (Rand 59–74 pt → Kopf 45–60 pt). Das iPad meldet nur den Rand der Statusleiste (20–24 pt) → 10 pt → Untergrenze 16 px, und die Unschärfekante von iOS 26 reicht rund 20 pt unter den Rand: das Logo lag darin. Jetzt gilt bei KLEINEM Rand „Rand + 22 pt“ (iPad 24 → 46 pt, iPad mit Home-Taste 20 → 40 pt); der dritte Term (70 − Rand) lässt die Formel bei großem Rand auslaufen, darum bleiben alle iPhones (Notch 47 → 33, Insel 59 → 45, 18 Pro Max → 60) und der Schreibtisch (Rand 0 → 16 px) genau wie bisher. Ersetzt die Regel vom 24.10. */ @supports (padding-top: env(safe-area-inset-top)){ html body #blatt > header.markenband.marke2{margin-top:max(16px, calc(env(safe-area-inset-top, 0px) - 14px), min(calc(env(safe-area-inset-top, 0px) + 22px), calc(70px - env(safe-area-inset-top, 0px)), calc(env(safe-area-inset-top, 0px) * 2)))} } @media (display-mode: standalone){ html body #blatt > header.markenband.marke2{margin-top:max(16px, calc(env(safe-area-inset-top, 0px) - 14px), min(calc(env(safe-area-inset-top, 0px) + 22px), calc(70px - env(safe-area-inset-top, 0px)), calc(env(safe-area-inset-top, 0px) * 2)))} } /* NICHTS LIEGT UNTER DER UNSCHÄRFE — AUF KEINEM GERÄT (01.11.2026, zz591). Chris (iPad 11" hoch, App vom Homescreen, Bildschirmfoto): „Das Liquid Glass macht das Logo leicht unscharf … es muss auf allen Auflösungen, darf das Liquid Glass hier nicht die Webseite stören und die Logos natürlich auch nicht unscharf machen.“ GEMESSEN am Foto (1668 × 2388 px = 834 × 1194 pt): Kopfkarte ab 40 pt, Pfeil, Blatt und obere Hälfte von „myblank“ (52–75 pt) weichgezeichnet, „Finanzplanung“ (88 pt) scharf — die Unschärfekante von iPadOS 26 reicht bis rund 80 pt. Eine eigene Schicht der Seite liegt dort nicht (gesucht: nichts Festes mit Unschärfe oben). Die Regel vom 27.10. ließ den Abstand bei größerem Rand SCHRUMPFEN (Term 70 − Rand, für Insel-iPhones gebaut) — das Gegenteil. JETZT, EINE Regel für alle Geräte mit Statusleiste: Kopf mindestens 24 pt unter dem gemeldeten Rand (Unschärfe am iPhone rund 20 pt darunter, gemessen 05.10.) UND nie höher als 80 pt (iPad, gemessen heute). Ohne Statusleiste (Rand 0: Schreibtisch, Browser ohne Aussparung) bleiben 16 px — min(Rand × 100, …) ist dort 0 (geprüft für Rand 0/20/24/30/47/59/62/68). Die Seitenleiste (ab 1181 px, iPad quer) beginnt genauso. Ersetzt alle Regeln zum Abstand oben (05.10., 24.10., 27.10.). Kostet am iPhone wieder Luft gegenüber dem 24.10. — Schärfe geht vor. */ html body #blatt > header.markenband.marke2{margin-top:max(16px, min(calc(env(safe-area-inset-top, 0px) * 100), max(calc(env(safe-area-inset-top, 0px) + 24px), 80px)))} @supports (padding-top: env(safe-area-inset-top)){ html body #blatt > header.markenband.marke2{margin-top:max(16px, min(calc(env(safe-area-inset-top, 0px) * 100), max(calc(env(safe-area-inset-top, 0px) + 24px), 80px)))} } @media (display-mode: standalone){ html body #blatt > header.markenband.marke2{margin-top:max(16px, min(calc(env(safe-area-inset-top, 0px) * 100), max(calc(env(safe-area-inset-top, 0px) + 24px), 80px)))} } @media (min-width:1181px){ html body nav.seitenleiste{padding-top:max(16px, min(calc(env(safe-area-inset-top, 0px) * 100), max(calc(env(safe-area-inset-top, 0px) + 24px), 80px)))} } /* URLAUB EINTRAGEN IN DER TAFEL (28.10.2026, zz572) – dieselbe Tafel wie „Neue Ausgabe“; Von und Bis nebeneinander, auf dem schmalen Telefon untereinander, jede Pille und jedes Feld mindestens 44 px. Die Zeile „Kostet …“ hält Platz für zwei Zeilen, damit nichts springt, wenn sie erscheint (Gesetz Ruhe). */ .urlaubblatt .ubzeitraum{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px} .urlaubblatt .ubzeitraum input[type=date]{width:100%; min-width:0; min-height:44px; font-size:16px; box-sizing:border-box} .urlaubblatt .brpillen{display:flex; flex-wrap:wrap; gap:6px} html body .neublatt.urlaubblatt .brpille{min-height:44px} /* .neublatt setzt 40 px (Zeile 2603) */ .urlaubblatt .ubkostet{font-family:inherit; letter-spacing:0; text-transform:none; min-height:2.9em; margin:0 0 10px; font-size:14px; line-height:1.45; color:var(--tinte2)} .urlaubblatt .ubkostet.ubfertig{color:var(--plus, #3f6b1f); font-weight:600} .urlaubblatt .ubhalb{margin:0 0 14px; min-height:44px; display:flex; align-items:center; gap:10px} .urlaubblatt .ubhalb[hidden]{display:none} @media (max-width:360px){ .urlaubblatt .ubzeitraum{grid-template-columns:1fr} } /* DER AKTIVE TAB TRÄGT DIE GRÜNE FLÄCHE (30.10.2026, zz575). Chris (Telefon und iPad): „unten bei den Hauptmenüpunkten … erkenne ich die Symbole kaum, also die farbliche Änderung, da weiß ich gar nicht genau, wo ich bin … deutlich sichtbar mit dem grünen Bereich unterlegt … so wie das die oberen Hauptmenüpunkte sind.“ Bis hier wechselte nur die Farbe (grau → grün). Jetzt dieselbe Gestalt wie der aktive Punkt der Seitenleiste (Zeile „nav.seitenleiste a.sl.aktiv“): grüne Fläche, helle Schrift – ein abgerundetes Feld hinter Symbol und Wort, mit Luft zum Nachbarn. Gilt auch für „Mehr“, solange sein Blatt offen ist. */ @media (max-width:1180px){ html body nav.tableiste .tab{margin:3px 3px; width:min(calc(100% - 6px), 120px); justify-self:center; box-sizing:border-box; transition:background-color .18s ease, color .18s ease} html body nav.tableiste .tab.aktiv, html body nav.tableiste .tab[aria-expanded="true"]{background:var(--akzent); color:var(--aufakzent, #fff); border-radius:12px} html body nav.tableiste .tab.aktiv .ikon, html body nav.tableiste .tab[aria-expanded="true"] .ikon{color:currentColor} } @media (max-width:700px){ html body nav.tableiste .tab.aktiv.nichtamtelefonaktiv:not([aria-expanded="true"]){background:none; color:var(--tinte3)} } /* TREFFERFLÄCHE DER ZEITFENSTER-UMSCHALTER (31.10.2026, zz584). GEMESSEN: Der Gestaltwächter meldete am iPhone (440 px) einen klassenlosen Knopf mit 43 px. „Quartal | Halbjahr | Jahr | 18 Monate“ (Jeder Monat für sich, Wo stehe ich wann?) sind genau 44,00 px hoch und hatten keine unsichtbare Fläche davor – bei dreifacher Pixeldichte wird daraus 43,7. Jetzt wie bei den anderen kleinen Schaltern eine unsichtbare Trefferfläche, hier 48 px hoch; das Bild bleibt, nichts springt. */ @media (pointer:coarse){ html body nav.zrfenster > button{position:relative} html body nav.zrfenster > button::after{content:''; position:absolute; left:50%; top:50%; width:100%; height:max(100%, 48px); transform:translate(-50%, -50%)} } /* ==================================================================== GESETZ „REITER EINZEILIG“ (03.11.2026, zz595, Vorhaben 377) Chris: „Die zweite Navigationsebene bricht nie um, in keiner Fenstergröße. Reiter schrumpfen nicht.“ Jede Leiste mit „Mehr“ bleibt EINE Zeile; reiterAnpassen() (app.js) legt von hinten unter „Mehr · n“, was nicht passt. Das frühere Raster der Verwaltung (6/4/3 Spalten unter 1180 px) entfällt — es war genau der Umbruch, den das Gesetz verbietet. ==================================================================== */ html body .umschalter:has(> details.mehr){display:flex !important; flex-wrap:nowrap !important; grid-template-columns:none; overflow:visible; min-width:0} html body .umschalter:has(> details.mehr) > a{flex:0 0 auto !important; min-width:auto !important; white-space:nowrap; overflow:visible !important; text-overflow:clip !important} html body .umschalter:has(> details.mehr) > a span{overflow:visible !important; text-overflow:clip !important; white-space:nowrap} html body .umschalter.reitereinzeln{display:none !important} html body .umschalter.vw.vwreihe{justify-content:flex-start; width:100%; box-sizing:border-box} html body .umschalter > details.mehr{flex:0 0 auto; margin-left:auto; grid-column:auto; justify-self:auto} html body .umschalter > details.mehr > summary.mehrknopf{ gap:6px; min-height:40px; padding:0 14px; border-radius:10px; white-space:nowrap; box-sizing:border-box; background:var(--flaeche2); border:1px dashed color-mix(in srgb, var(--tinte3) 55%, transparent); color:var(--tinte2); font-weight:500 } html body .umschalter > details.mehr > summary.mehrknopf .mehrpunkt{color:var(--tinte3)} html body .umschalter > details.mehr > summary.mehrknopf .mehrzahl{font-variant-numeric:tabular-nums} html body .umschalter > details.mehr.aktiv > summary.mehrknopf{background:var(--akzent); color:var(--aufakzent, #fff); border-style:solid; border-color:var(--akzent)} html body .umschalter > details.mehr.aktiv > summary.mehrknopf .mehrpunkt{color:currentColor} html body .umschalter > details.mehr > .mehrblatt a.aktiv{background:color-mix(in srgb, var(--akzent) 12%, transparent); font-weight:600} html body .umschalter > details.mehr > .mehrblatt a{flex:none; min-height:44px; box-sizing:border-box} /* Steuer: die Reiter richten sich nach ihrem Wort und schrumpfen nicht. */ html body nav.stwahl > .stteile{justify-content:flex-start} html body nav.stwahl > .stteile > details.mehr > summary.mehrknopf{min-height:44px} @media (max-width:760px){ html body nav.stwahl > .stteile > details.mehr > summary.mehrknopf{min-height:52px} } /* Umschaltleiste innerhalb einer Gruppe (Segmented Control) — wie der Personenwechsel im Kopf. */ html body .umschalter.segmente{ display:flex; gap:4px; padding:4px; margin:0 0 18px; width:max-content; max-width:100%; box-sizing:border-box; border-radius:12px; background:var(--flaeche2); border:0; box-shadow:none } html body .umschalter.segmente > a{display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border-radius:9px; color:var(--tinte); font-size:14.5px; font-weight:500; text-decoration:none; background:transparent} html body .umschalter.segmente > a.aktiv{background:var(--flaeche); box-shadow:0 1px 3px rgba(0,0,0,.12)} html body .umschalter.segmente > details.mehr{margin-left:0} html body .umschalter.segmente > details.mehr > summary.mehrknopf{min-height:40px} /* ==================================================================== DIE MODULE WIE WIDGETS (04.11.2026, zz599, Vorhaben 377/371) — Chris-Prompt „Dashboard Drag and Drop“. Vier Spalten, feste Zeile, dense; bis 1100 px zwei Spalten, am Telefon niedrigere Zeilen. Spalten und Zeilen setzt window.tlWidgetRasten (index.php) an jedes Stück; ohne Skript bleibt das alte Raster stehen. ==================================================================== */ #blatt.widgets{ grid-template-columns:repeat(4, minmax(0, 1fr)); grid-auto-rows:72px; grid-auto-flow:row dense; column-gap:26px; row-gap:26px; align-items:start; position:relative } #blatt.widgets > *{align-self:start; box-sizing:border-box; margin:0} #blatt > [hidden]{display:none !important} @media (max-width:1100px){ #blatt.widgets{grid-template-columns:repeat(2, minmax(0, 1fr))} } @media (max-width:600px){ #blatt.widgets{grid-auto-rows:60px; row-gap:20px; column-gap:14px} } /* Die Anpassen-Leiste: in Ruhe nur der Knopf, im Modus dieselbe Höhe mit Titel, Modulen, Rückgängig, Fertig. Klebt unter dem Kopf. */ #blatt > .anpassleiste{position:sticky; top:calc(env(safe-area-inset-top, 0px) + 8px); z-index:25; min-height:52px; display:flex; align-items:center} .anpassleiste .alruhe{display:flex; justify-content:flex-end; width:100%} .anpassleiste .alruhe[hidden], .anpassleiste .alwerk[hidden]{display:none !important} .anpassleiste .alan{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border-radius:10px} .anpassleiste .alwerk{display:flex; align-items:center; gap:10px; width:100%; min-height:52px; box-sizing:border-box; padding:4px 6px 4px 16px; background:color-mix(in srgb, var(--flaeche) 92%, transparent); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border:1px solid var(--materialrand, var(--linie)); border-radius:14px; box-shadow:0 10px 30px -18px rgba(0,0,0,.35)} .anpassleiste .altext{flex:1 1 auto; min-width:0; display:flex; align-items:baseline; gap:10px; white-space:nowrap; overflow:hidden} .anpassleiste .altitel{font-weight:600; color:var(--tinte)} .anpassleiste .alsatz{color:var(--tinte3); font-size:13.5px; overflow:hidden; text-overflow:ellipsis} .anpassleiste .almenu{position:relative; flex:0 0 auto} .anpassleiste .almenuknopf{display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 12px; border-radius:10px; cursor:pointer; list-style:none; color:var(--tinte); background:var(--flaeche2)} .anpassleiste .almenuknopf::-webkit-details-marker{display:none} .anpassleiste .alzahl{font-variant-numeric:tabular-nums; color:var(--tinte3); font-weight:600} .anpassleiste .almenublatt{position:absolute; right:0; top:calc(100% + 8px); min-width:240px; padding:6px; display:grid; gap:2px; z-index:40; background:var(--flaeche); border:1px solid var(--materialrand, var(--linie)); border-radius:14px; box-shadow:0 18px 40px -20px rgba(0,0,0,.45)} .anpassleiste .almenupunkt{min-height:44px; padding:0 12px; border:0; border-radius:10px; background:transparent; text-align:left; color:var(--tinte); font:inherit; cursor:pointer} .anpassleiste .almenupunkt:hover{background:var(--flaeche2)} .anpassleiste .almenuleer{margin:8px 10px; color:var(--tinte3); font-size:13.5px} .anpassleiste .alzurueck[disabled]{opacity:.35} .anpassleiste .alfertig{min-height:44px; padding:0 18px; border-radius:10px} @media (max-width:600px){ .anpassleiste .alsatz, .anpassleiste .alwort, .anpassleiste .altitel{display:none} .anpassleiste .alan span{display:none} } /* Der Modus: gestrichelter Rahmen, Inhalt nimmt keine Zeiger an, keine Textauswahl, Finger rollen senkrecht weiter. */ #blatt.anpassen > [data-block]{outline:2px dashed color-mix(in srgb, var(--akzent) 50%, transparent); outline-offset:3px; -webkit-user-select:none; user-select:none; touch-action:pan-y; cursor:grab} #blatt.anpassen > [data-block] > *:not(.wgriffe):not(.wkante){pointer-events:none} [data-block] > .wgriffe{display:none} #blatt.anpassen > [data-block] > .wgriffe{display:flex; position:absolute; top:8px; right:8px; z-index:6; gap:2px; padding:2px; background:var(--flaeche); border:1px solid var(--linie); border-radius:12px; box-shadow:0 4px 14px -8px rgba(0,0,0,.35)} #blatt.anpassen > [data-block] > .wgriffe .zeichenknopf{width:44px; height:44px; min-width:44px; border-radius:10px} #blatt.anpassen > [data-block] > .wgriffe .wgriff{cursor:grab; touch-action:none} [data-block] > .wkante{display:none} #blatt.anpassen > [data-block] > .wkante{display:block; position:absolute; top:0; bottom:0; right:-14px; width:22px; cursor:ew-resize; z-index:5; touch-action:none} #blatt.anpassen > [data-block] > .wkante::after{content:""; position:absolute; left:8px; top:50%; width:5px; height:44px; margin-top:-22px; border-radius:3px; background:var(--akzent); opacity:.55} #blatt > [data-block].wgehoben{scale:1.025; z-index:30; cursor:grabbing; box-shadow:0 30px 60px -24px rgba(0,0,0,.5), 0 0 0 1px var(--linie); transition:none} body.wzieht{-webkit-user-select:none; user-select:none; cursor:grabbing} .wlandeplatz{position:fixed; z-index:20; pointer-events:none; box-sizing:border-box; border:2px dashed var(--akzent); border-radius:18px; background:color-mix(in srgb, var(--akzent) 9%, transparent); opacity:.85} .wbreitenote{position:fixed; z-index:60; pointer-events:none; padding:6px 10px; border-radius:9px; background:var(--tinte); color:var(--flaeche); font-size:13.5px; font-weight:600; white-space:nowrap} .ziehnote.schlecht{background:var(--minus, #B3261E); color:#fff} @media (prefers-reduced-motion:reduce){ #blatt > [data-block].wgehoben{scale:1} } #blatt > [data-aus]{display:none !important} /* zz602: ohne eigenen Knopf. In Ruhe nimmt die Leiste keinen Platz; im Modus liegt sie fest über dem Kopf (leisteLegen() in app.js). */ #blatt > .anpassleiste[hidden]{display:none !important} #blatt > .anpassleiste.an{position:fixed; top:calc(env(safe-area-inset-top, 0px) + 10px); z-index:70; grid-row:auto !important} /* zz605: unter 900 px derselbe Abstand wie das Raster aller anderen Seiten (20 px) — gemessen: Kopf auf Haushalt 6 px höher (Ruhe beim Seitenwechsel). */ @media (max-width:900px){ #blatt.widgets{row-gap:20px; column-gap:20px} } @media (max-width:600px){ #blatt.widgets{column-gap:14px} } /* zz608: Der Breitengriff liegt im Modul (gemessen in WebKit: 14 px über den Rand = seitliches Scrollen). */ #blatt.anpassen > [data-block] > .wkante{right:0; width:22px} #blatt.anpassen > [data-block] > .wkante::after{left:12px} /* ==================================================================== DER KOPF ALS FARBIGE FLÄCHE (05.11.2026, zz611, Vorhaben 377). Chris: „Der Kopf ist eine eigene farbige Fläche, nicht browsergrau (eigene Tokens …; hell und dunkel).“ Kopf und Seitenleiste sind EINE Fläche; der aktive Bereich steht hell darauf. ==================================================================== */ :root{--kopf-grund:#3F5C22; --kopf-text:#FFFFFF; --kopf-leise:rgba(255,255,255,.74); --kopf-hover:rgba(255,255,255,.13); --kopf-aktiv:#F3F6EC; --kopf-aktiv-text:#2C4117; --kopf-schatten:0 12px 32px -20px rgba(28,44,14,.65)} html[data-hell="dunkel"]{--kopf-grund:#28351C; --kopf-text:#EEF2E6; --kopf-leise:rgba(238,242,230,.68); --kopf-hover:rgba(255,255,255,.09); --kopf-aktiv:#DCE5CB; --kopf-aktiv-text:#22301A; --kopf-schatten:0 12px 32px -20px rgba(0,0,0,.7)} html body header.markenband.marke2{background:var(--kopf-grund); color:var(--kopf-text); border-color:transparent; box-shadow:var(--kopf-schatten); flex-wrap:wrap; row-gap:6px} /* Auf der farbigen Fläche steht immer die helle Wortmarke. */ html body header.markenband.marke2 img.mb-hell{display:none !important} html body header.markenband.marke2 img.mb-dunkel{display:block !important} html body header.markenband.marke2 .kopfknopf{background:transparent; color:var(--kopf-text); border-color:color-mix(in srgb, var(--kopf-text) 28%, transparent)} html body header.markenband.marke2 .kopfknopf:hover{background:var(--kopf-hover)} html body header.markenband.marke2 .kopfknopf[aria-pressed="true"]{background:var(--kopf-aktiv); color:var(--kopf-aktiv-text)} html body header.markenband.marke2 .kopfbereich{display:inline-flex; align-items:center; min-height:34px; padding:0 12px; border-radius:9px; background:var(--kopf-aktiv); color:var(--kopf-aktiv-text); font-weight:600; font-size:14.5px; white-space:nowrap} .brotkrumen{flex:1 0 100%; order:9; display:flex; align-items:center; gap:7px; min-height:24px; font-size:13.5px; color:var(--kopf-leise); white-space:nowrap; overflow:hidden} .brotkrumen a{color:var(--kopf-leise); text-decoration:none; border-radius:5px} .brotkrumen a:hover{color:var(--kopf-text)} .brotkrumen .bkletzt{color:var(--kopf-text); font-weight:600} .brotkrumen .bktrenner{opacity:.6} @media (max-width:700px){ html body header.markenband.marke2 .kopfbereich{display:none} } @media (min-width:1181px){ html body nav.seitenleiste{background:var(--kopf-grund); border-right-color:transparent; box-shadow:var(--kopf-schatten)} html body nav.seitenleiste a.sl{color:var(--kopf-text)} html body nav.seitenleiste a.sl .slzeichen{color:var(--kopf-leise)} html body nav.seitenleiste a.sl:hover{background:var(--kopf-hover)} html body nav.seitenleiste a.sl.aktiv{background:var(--kopf-aktiv); color:var(--kopf-aktiv-text)} html body nav.seitenleiste a.sl.aktiv .slzeichen{color:currentColor} } /* Die Schnellnavigation: eine Karte, eine Ebene. */ .navkarte{position:fixed; z-index:60; min-width:240px; max-width:320px; padding:10px; display:grid; gap:10px; box-sizing:border-box; background:var(--flaeche); border:1px solid var(--materialrand, var(--linie)); border-radius:14px; box-shadow:0 22px 50px -24px rgba(0,0,0,.5)} .navkarte[hidden]{display:none} .navkarte .nkgruppe{display:grid; gap:2px} .navkarte .nktitel{margin:0 0 2px; padding:0 10px; font-size:12.5px; font-weight:600; color:var(--tinte3)} .navkarte a{display:flex; align-items:center; min-height:38px; padding:0 10px; border-radius:9px; color:var(--tinte); text-decoration:none; font-size:14.5px} .navkarte a:hover{background:color-mix(in srgb, var(--akzent) 10%, transparent)} /* zz612: Die Seitenleiste ist fest, aber Kind des Rasters — align-self:start kürzte sie auf ihren Inhalt (gemessen 544 von 900 px). */ html body #blatt.widgets > nav.seitenleiste{align-self:stretch} /* VORLAGEN (zz613): Menü in der Anpassen-Leiste — Name, eine Zeile Beschreibung, Haken an der aktiven. */ .anpassleiste .alvorlageblatt{min-width:min(340px, calc(100vw - 32px)); max-height:min(70vh, 560px); overflow-y:auto} .anpassleiste .alvzeile{display:flex; align-items:center; gap:4px} .anpassleiste .alvpunkt{flex:1 1 auto; min-width:0; display:grid; grid-template-columns:1fr 22px; column-gap:6px; align-items:center; min-height:52px; padding:6px 10px; border:0; border-radius:10px; background:transparent; color:var(--tinte); font:inherit; text-align:left; cursor:pointer} .anpassleiste .alvpunkt:hover{background:var(--flaeche2)} .anpassleiste .alvname{font-weight:600} .anpassleiste .alvname small{font-weight:500; color:var(--tinte3); margin-left:6px; font-size:12.5px} .anpassleiste .alvsatz{grid-column:1; font-size:13px; color:var(--tinte3)} .anpassleiste .alvhaken{grid-column:2; grid-row:1 / span 2; color:var(--akzent)} .anpassleiste .alvpflege{display:flex; flex:0 0 auto} .anpassleiste .alvpflege .zeichenknopf{width:44px; height:44px; min-width:44px} .anpassleiste .alvzurueck{min-height:44px; padding:0 10px; border:0; border-radius:10px; background:transparent; color:var(--akzent); font:inherit; font-weight:600; text-align:left; cursor:pointer} .anpassleiste .alvzurueck:hover{background:var(--flaeche2)} .anpassleiste .alvneu{display:flex; gap:6px; padding:6px 4px 2px; border-top:1px solid var(--linie); margin-top:4px} .anpassleiste .alvneu input{flex:1 1 auto; min-width:0; min-height:44px; padding:0 10px; border:1px solid var(--linie); border-radius:9px; background:var(--flaeche); color:var(--tinte); font:inherit} /* zz614: „Fertig“ richtet sich nach seinem Wort (gemessen am Foto: am Telefon ragte er aus der Leiste). */ html body .anpassleiste .alfertig{flex:0 0 auto; width:auto; min-width:0; margin:0; padding:0 16px} html body .anpassleiste .alwerk > *{margin-top:0; margin-bottom:0} @media (max-width:600px){ .anpassleiste .alwerk{gap:6px; padding:4px 6px} .anpassleiste .altext{display:none} html body .anpassleiste .alfertig{margin-left:auto} } /* zz615: Am Telefon hängt das Menü an der Bildbreite, nicht am Knopf (gemessen: Vorlagen lagen links außerhalb des Bilds). */ @media (max-width:600px){ html body .anpassleiste .almenublatt{position:fixed; left:16px; right:16px; top:calc(env(safe-area-inset-top, 0px) + 72px); min-width:0; width:auto} }