/* ========================================================================== mareSpa Cockpit — Oberfläche Marine = Struktur. Kupfer = einziger Akzent, und er heißt immer "hier handelst du" oder "hier bist du" — nie Dekoration. Inhalt auf cool-weiß, kein Creme-Vollflächen-Hintergrund. Gliederung kommt aus Typografie, Weißraum und Haarlinien. Nicht aus Kästen. Verboten sind deshalb: Kartensuppe, die Reihe aus vier gleich großen Kennzahl-Kacheln und gleichförmige Dichte über die ganze Seite. ARBEITSREGELN FÜR DIESE DATEI Jeder Abstand kommt aus --sp-*, jede Schriftgröße aus --t-*, jede Farbe aus einem Token. Ein neuer px-Wert im Code ist ein Fehler, kein Detail — der erste Entwurf hatte 68 verschiedene, darunter 9,5 px und 1,1 px. Die WERTE stehen in static/tokens.css, hier steht nur ihre Verwendung. Deshalb ist der Zähler hier auch aussagekräftig: grep -oE "[0-9]+(\.[0-9]+)?px" static/style.css | sort -u | wc -l → < 15 py design/kontrast.py Erlaubt sind außerhalb der Tokens nur: · 1px / 2px / 3px — Haarlinien, Rahmen, Fokusring · die vier Umbruchpunkte in @media (dort greifen keine CSS-Variablen) -------------------------------------------------------------------------- INHALT (1 Tokens steht in static/tokens.css) 2 Grundlagen Reset, Typografie, Zahlen, Fokus 3 Gerüst Navigationsspalte, Reifegrad-Band, Karte 4 Bausteine die Makros aus _bausteine.html 5 Seitentypen Karten-Seite / arbeiten / aufgabe 6 Module was nur eine einzige Seite braucht 7 Responsiv 8 Druck 9 Dark Mode (vorbereitet, NICHT Standard) ========================================================================== */ /* ========================================================================== 2 GRUNDLAGEN ========================================================================== */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0;font-family:var(--schrift); font-size:var(--t-body);line-height:var(--lh-body); color:var(--text);background:var(--fl); -webkit-font-smoothing:antialiased;overflow:hidden; } h1,h2,h3{margin:0;color:var(--ink)} a{color:var(--copper-t);text-underline-offset:2px} code{font-family:var(--mono);font-size:.92em;background:var(--fl-3); padding:0 var(--sp-2);border-radius:var(--radius-s);color:var(--ink)} /* Jede Zahl: tabellarische Ziffern, nowrap. Sonst wackeln Spalten und Live-Werte. Serifen sind hier ausdrücklich NICHT dabei. */ .z,.zr,td.zr,th.zr,tfoot td,.betrag,.zahl{ font-variant-numeric:tabular-nums lining-nums;white-space:nowrap} /* Der Fehlwert-Strich ist Inhalt, kein Zierrat: er sagt "keine Zahl vorhanden". Also --muted, die hellste erlaubte Textfarbe. */ .leer-wert{color:var(--muted)} /* Fließtext bekommt eine Zeilenlänge, sonst läuft er auf breiten Schirmen über die volle Breite. */ .fliesstext,p.lang{max-inline-size:65ch} /* Nummerierte Anleitung. Die Reihenfolge ist hier Inhalt — deshalb
    mit sichtbaren Ziffern und keine Aufzählungspunkte. */ .schritte{max-inline-size:65ch;margin:0;padding-left:var(--sp-6)} .schritte li{margin-bottom:var(--sp-3)} .schritte li::marker{color:var(--muted);font-weight:var(--fw-fett)} /* Fokus ist immer sichtbar. Niemals outline:none ohne Ersatz. */ :focus-visible{outline:2px solid var(--copper-d);outline-offset:2px; border-radius:var(--radius-s)} /* Sprungmarke: unsichtbar bis sie den Fokus bekommt. Weggeklippt statt weit nach links geschoben — ein großer Negativversatz erzeugt in manchen Browsern eine waagerechte Bildlaufleiste, und genau die soll es hier nirgends geben. */ .zum-inhalt{position:absolute;top:0;left:0;z-index:300; clip-path:inset(50%);white-space:nowrap; background:var(--fl);color:var(--ink);padding:var(--sp-3) var(--sp-5); border:1px solid var(--copper-d);border-radius:0 0 var(--radius) 0} .zum-inhalt:focus{clip-path:none} /* Formularelemente */ button{font:inherit} input[type=text],input[type=date],input[type=search],input[type=number], input[type=month],input[type=password],select,textarea{ width:100%;min-height:var(--ziel);padding:var(--sp-2) var(--sp-3); border:1px solid var(--feldrand);border-radius:var(--radius-s); font:inherit;font-size:var(--t-body);line-height:var(--lh-body); background:var(--fl);color:var(--ink); } textarea{resize:vertical} input::placeholder,textarea::placeholder{color:var(--muted)} input:hover,select:hover,textarea:hover{border-color:var(--ink)} input:focus,select:focus,textarea:focus{ outline:none;border-color:var(--copper-d); box-shadow:0 0 0 2px rgba(156,99,48,.24)} input.falsch,select.falsch,textarea.falsch{ border-color:var(--rot);box-shadow:0 0 0 2px rgba(168,50,50,.2)} /* Klickziele. Typischer Verstoß sind Icon-Knöpfe in dichten Zeilen. */ button,[role=button],.kn{min-height:var(--ziel)} @media (prefers-reduced-motion:reduce){ *{transition:none !important;animation:none !important} } /* ========================================================================== 3 GERÜST — Grundriss v4 EINE Navigationsspalte links, Gruppen als Zwischenüberschriften, darunter das Reifegrad-Band. Rechts eine klebende Kopfzeile und der Inhalt in Karten auf getöntem Grund. Der getönte Grund ist Pflicht, nicht Geschmack: die Karten trennen sich nur davon ab, wenn der Grund dunkler ist als sie. Er ist cool getönt (--fl-3), nicht cremefarben — die Zustandsfarben sind gegen kühle Flächen durchgerechnet, gegen warme wären sie es nicht. ========================================================================== */ /* ---- 3.1 Hülle ---- */ .huelle{display:flex;height:100vh;overflow:hidden;background:var(--fl-3)} /* ---- 3.2 Navigationsspalte ---- */ .navi{width:var(--unter);flex:none;background:var(--fl-4); border-right:1px solid var(--linie);display:flex;flex-direction:column; position:sticky;top:0;height:100vh} .navi .marke{display:flex;align-items:center;gap:var(--sp-3); padding:var(--sp-5) var(--sp-5) var(--sp-4);text-decoration:none;color:var(--ink)} .navi .marke .zeichen{width:var(--sp-7);height:var(--sp-7);border-radius:var(--radius); background:var(--marine);color:var(--copper);display:grid;place-items:center; font-size:var(--t-body);font-weight:var(--fw-fett);flex:none} .navi .marke .m1{display:block;font-size:var(--t-body);font-weight:var(--fw-halb)} .navi .marke small{display:block;font-size:var(--t-label);color:var(--muted); margin-top:var(--sp-1)} .navliste{flex:1;overflow-y:auto;padding:var(--sp-1) var(--sp-3) var(--sp-4)} .navgruppe{font-size:var(--t-label);font-weight:var(--fw-halb);color:var(--muted); padding:var(--sp-5) var(--sp-3) var(--sp-2)} .navpunkt{display:flex;align-items:center;gap:var(--sp-3); padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-s); font-size:var(--t-body);color:var(--text);text-decoration:none; min-height:var(--ziel); transition:background var(--zeit-schnell) var(--ease-raus), color var(--zeit-schnell) var(--ease-raus)} .navpunkt .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .navpunkt:hover{background:rgba(14,26,34,.05);color:var(--ink)} /* Aktiv trägt zwei Marker: gefüllte Fläche UND kupferner Punkt. Farbe allein reicht nicht. */ .navpunkt.an{background:var(--marine);color:#fff;font-weight:var(--fw-halb)} .navpunkt .punkt{width:var(--sp-3);height:var(--sp-3);border-radius:50%; flex:none;background:var(--muted)} .navpunkt.an .punkt{background:var(--copper)} /* NICHT ".leer" nennen: so hiess der Baustein fuer leere Zustaende, und dessen padding von 64px 32px machte aus dem 8-px-Punkt ein 66x130-Oval. Genau der Kollisionsfall, gegen den die c--Praefixregel in Konzept 6.1 steht. */ .navpunkt .punkt.ohne{background:none;border:1px solid var(--feldrand)} /* Noch nicht gebaut: lesbar, nicht weggeblasst — wegblassen liest sich als kaputt statt als "kommt noch". */ .navpunkt.bald{color:var(--muted);cursor:default} /* Zahlenbadge NUR für Handlungsbedarf. Weiß auf --gelb sind 7,09:1. */ .navpunkt .zahl{margin-left:auto;font-size:var(--t-label); font-weight:var(--fw-fett);color:#fff;background:var(--gelb); border-radius:var(--sp-3);padding:0 var(--sp-2);min-width:var(--sp-6); text-align:center;font-variant-numeric:tabular-nums} .navpunkt.an .zahl{background:var(--copper);color:var(--marine)} /* ---- 3.2b Wer angemeldet ist ---- ACHTUNG: Die Navigationsspalte ist HELL (--fl-4), nicht marineblau. Hier standen zuerst --nav-ruhe und --nav-leise — das sind die Textfarben für marineblaue Flächen und ergeben auf Hellgrau rund 1,3:1. Gemessen statt geschätzt: --muted auf --fl-4 sind 4,75:1, --copper-t 5,21:1. */ .wer-da{display:flex;align-items:center;justify-content:space-between; gap:var(--sp-3);padding:var(--sp-3) var(--sp-5); border-top:1px solid var(--linie);font-size:var(--t-label)} .wer-da .n{color:var(--muted);overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .wer-da a{color:var(--copper-t);text-decoration:none;flex:none; font-weight:var(--fw-halb);padding:var(--sp-1) var(--sp-2); border-radius:var(--radius-s)} .wer-da a:hover{background:var(--fl-2);text-decoration:underline} /* ---- 3.3 Reifegrad-Band ---- Zwölf Punkte, einer je Monat. Zeigt den REIFEGRAD, nicht das Ergebnis: die Frage ist "wo fehlt noch etwas", nicht "wo war es schön". */ .reifeband{padding:var(--sp-4) var(--sp-5) var(--sp-5); border-top:1px solid var(--linie)} .reifeband .titel{font-size:var(--t-label);color:var(--muted); margin-bottom:var(--sp-3)} .reifeband .pips{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sp-1)} .reifeband .pip{height:var(--sp-6);border-radius:var(--radius-s);display:block; background:var(--linie-s); transition:transform var(--zeit-schnell) var(--ease-raus)} .reifeband .pip:hover{transform:scaleY(1.15)} .reifeband .pip.ergebnis{background:var(--gruen)} .reifeband .pip.vorlaeufig{background:var(--copper)} .reifeband .pip.zwischenstand{background:var(--muted)} .reifeband .pip.vorausschau{background:var(--blau)} .reifeband .pip.offen{background:var(--linie-s)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} /* ---- 3.4 Bühne und Kopfleiste ---- */ .buehne{flex:1;min-width:0;display:flex;flex-direction:column} .kopfleiste{position:sticky;top:0;z-index:5;background:var(--fl-3); border-bottom:1px solid var(--linie); padding:var(--sp-3) var(--sp-7);min-height:var(--oben); display:flex;align-items:center;justify-content:space-between; gap:var(--sp-5);flex-wrap:wrap} .kopfleiste .wo{font-size:var(--t-body);font-weight:var(--fw-halb);color:var(--ink)} .kopfleiste .re{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap} .kopfleiste .re form{display:flex;align-items:center;gap:var(--sp-3);margin:0} .kopfleiste .datum{font-size:var(--t-label);color:var(--muted)} .seite{flex:1;min-height:0;display:flex;flex-direction:column} .globalmeldung{padding:var(--sp-5) var(--sp-7) 0;flex:0 0 auto} .globalmeldung .band{margin-bottom:0} /* ---- 3.5 Karte ---- Die Grundform des neuen Grundrisses. Ruhestufe --tiefe-1 statt Rahmen: eine Technik pro Element. Keine Karte bekommt zusätzlich einen Rahmen. */ .karte{background:var(--fl);border-radius:var(--radius-karte); box-shadow:var(--tiefe-1);padding:var(--sp-5) var(--sp-6) var(--sp-6); min-width:0} .karte > .kopf{display:flex;align-items:baseline;justify-content:space-between; gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-5)} .karte > .kopf h2{font-size:var(--t-stark);line-height:var(--lh-stark); font-weight:var(--fw-halb)} .karte > .kopf .neben{font-size:var(--t-label);color:var(--muted)} /* Karte ohne Innenpolster — für Listen, die bis an die Kante laufen. */ .karte.blank{padding:var(--sp-5) 0 var(--sp-2);overflow:hidden} .karte.blank > .kopf{padding:0 var(--sp-6)} .raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--karte-min),1fr)); gap:var(--sp-5);margin-top:var(--sp-5);align-items:start} /* Karten untereinander statt nebeneinander. Der Abstand haengt am Behaelter, damit er nicht als Inline-Style an jeder einzelnen Karte klebt. */ .stapel-eins{display:flex;flex-direction:column;gap:var(--sp-5); margin-top:var(--sp-6)} /* ========================================================================== 4 BAUSTEINE ========================================================================== */ /* ---- 4.1 seitenkopf ---- */ .sbalken{ display:flex;align-items:center;gap:var(--sp-4); padding:var(--sp-3) var(--sp-6);min-height:var(--oben); border-bottom:1px solid var(--linie);flex:0 0 auto;flex-wrap:wrap; } .krume{font-size:var(--t-label);line-height:var(--lh-label);color:var(--muted)} .krume b{color:var(--muted);font-weight:var(--fw-halb)} .krume a{color:var(--muted);text-decoration:none} .krume a:hover b{color:var(--copper-t);text-decoration:underline} .krume i{font-style:normal;margin:0 var(--sp-2);color:var(--linie-s)} .sbalken h1{font-size:var(--t-stark);line-height:var(--lh-stark); font-weight:var(--fw-halb)} .sbalken .re{margin-left:auto;display:flex;gap:var(--sp-3);align-items:center; flex-wrap:wrap} .sbalken .re form{display:flex;gap:var(--sp-3);align-items:center;margin:0} .sbalken .datum{font-size:var(--t-label);color:var(--muted)} /* ---- 4.2 knopf ---- Klickziele mindestens 32 px, Abstand mindestens 8 px. */ .kn{border:1px solid var(--feldrand);background:var(--fl);color:var(--ink); font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--fw-halb); padding:var(--sp-2) var(--sp-4);border-radius:var(--radius-s); cursor:pointer;display:inline-flex;align-items:center;gap:var(--sp-2); text-decoration:none;white-space:nowrap; transition:background var(--zeit-schnell) var(--ease-raus), border-color var(--zeit-schnell) var(--ease-raus)} .kn:hover{background:var(--fl-3);border-color:var(--ink)} /* Knopfgrund ist --copper-d, NICHT --copper: Weiß auf --copper wären nur 3,75:1, und das ist die Primäraktion der ganzen Oberfläche. */ .kn.pri{background:var(--copper-d);border-color:var(--copper-d);color:#fff} .kn.pri:hover{background:var(--copper-t);border-color:var(--copper-t)} /* Geist heisst wirklich unsichtbar: ohne eigene Flaeche. Mit dem weissen Grund aus .kn sass er auf getoentem Untergrund als heller Kasten da und war damit auffaelliger als der sekundaere Knopf daneben. */ .kn.geist{border-color:transparent;background:transparent;color:var(--muted); min-width:var(--ziel);justify-content:center} .kn.geist:hover{background:var(--fl-3);color:var(--ink);border-color:var(--linie-s)} .kn.mini{padding:0 var(--sp-3);font-size:var(--t-label);color:var(--muted)} .kn.gefahr{color:var(--rot);border-color:var(--rot)} .kn.gefahr:hover{background:var(--rot);border-color:var(--rot);color:#fff} .kn[disabled]{opacity:.55;cursor:default} .kn.laedt{color:var(--muted)} /* Segmentwahl (Zeitraum) — gehört in die Kopfzeile der Seite, nicht in die Navigation: sie gilt für die Seite und würde beim Bereichswechsel sonst verschwinden, obwohl sie noch gilt. */ .seg{display:flex;background:var(--fl-3);border:1px solid var(--feldrand); border-radius:var(--radius-s);padding:var(--sp-1);gap:var(--sp-1)} .seg a{text-decoration:none;font-size:var(--t-body);font-weight:var(--fw-halb); color:var(--muted);padding:0 var(--sp-4);border-radius:var(--radius-s); min-height:var(--sp-7);display:flex;align-items:center} .seg a:hover{color:var(--ink)} .seg a.an{background:var(--fl);color:var(--ink);box-shadow:var(--tiefe-1)} /* ---- 4.3 absch ---- Abstand ZWISCHEN Abschnitten (32) ist doppelt so groß wie der größte Abstand INNERHALB eines Abschnitts (16). Sonst sieht man nicht mehr, was zusammengehört. */ .absch{margin-bottom:var(--sp-7)} /* Folgt ein Abschnitt direkt auf eine Feldergruppe, braucht er den vollen Gruppenabstand nach oben — sonst laeuft seine Ueberschrift in den Hilfstext des letzten Feldes. */ .felder + .absch,.feldgruppe + .absch{margin-top:var(--sp-7)} .karte > form > .absch:first-of-type{margin-top:var(--sp-6)} .absch > h2{font-size:var(--t-label);line-height:var(--lh-label); font-weight:var(--fw-fett);letter-spacing:var(--ls-label); text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-2)} /* Quellenangabe — sie sagt, woher die Zahlen kommen. Früher kursives Georgia; jetzt kursiv in der Grundschrift, weil Georgia ausschließlich der Leitzahl gehört. Eine zweite Schrift für eine Fußnote ist Aufwand ohne Ertrag. */ .absch > .quelle{font-style:italic;color:var(--muted); font-size:var(--t-body);line-height:var(--lh-body);margin:0 0 var(--sp-4)} .absch > .sub{font-size:var(--t-body);line-height:var(--lh-body); color:var(--muted);margin:0 0 var(--sp-4);max-inline-size:65ch} /* ---- 4.4 leitzahl ---- */ .leit{display:grid;grid-template-columns:minmax(0,1.35fr) var(--leit-neb);gap:var(--sp-8); padding-bottom:var(--sp-6);margin-bottom:var(--sp-7); border-bottom:1px solid var(--linie)} .leit:has(> .leit-haupt:only-child){grid-template-columns:minmax(0,1fr)} .leit .e{font-size:var(--t-label);line-height:var(--lh-label); font-weight:var(--fw-fett);letter-spacing:var(--ls-label); text-transform:uppercase;color:var(--muted)} /* Die EINE Stelle, an der Georgia steht. */ .leit .gross{font-family:var(--serif); font-variant-numeric:tabular-nums lining-nums; font-size:var(--t-leit);line-height:var(--lh-leit);letter-spacing:var(--ls-leit); margin:var(--sp-3) 0 var(--sp-4);color:var(--ink);white-space:nowrap} .leit .gross.minus{color:var(--rot)} .leit .gross.plus{color:var(--gruen)} /* Zwischenstand: neutral, KEINE Ampel. Der August stand hier schon einmal mit +1.830,24 € in Grün — für einen Monat, der bei rund −5.000 € landet. Eine Zahl ohne Kosten ist keine gute Nachricht. */ .leit .gross.neutral{color:var(--muted)} .leit .gross.unklar{color:var(--muted);font-size:var(--t-seite); line-height:var(--lh-seite)} .leit p{margin:0;font-size:var(--t-stark);line-height:var(--lh-stark); max-inline-size:56ch} .leit p b{color:var(--ink);font-weight:var(--fw-halb)} .leit .mittel{font-size:var(--t-seite);line-height:var(--lh-seite);color:var(--ink); margin:var(--sp-3) 0 var(--sp-4);letter-spacing:var(--ls-leit); font-variant-numeric:tabular-nums lining-nums;white-space:nowrap} .leit .neben-satz{font-size:var(--t-body);line-height:var(--lh-body); color:var(--muted);margin:0} .skala{position:relative;height:2px;background:var(--linie);margin-bottom:var(--sp-6)} .skala i{position:absolute;left:0;top:-2px;height:var(--sp-2);background:var(--copper)} .skala i.ueber{background:var(--rot)} .skala .m{position:absolute;top:-var(--sp-3);height:var(--sp-5);width:1px; background:var(--ink)} .skala .m em{position:absolute;top:calc(-1 * var(--sp-5));left:50%; transform:translateX(-50%);font-style:normal;font-size:var(--t-label); letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted); white-space:nowrap;font-weight:var(--fw-fett)} /* ---- 4.5 kette ---- */ .kette{width:100%;border-collapse:collapse} .kette td{padding:var(--sp-2) 0;border:none;font-size:var(--t-body); line-height:var(--lh-body);vertical-align:baseline} .kette td.zr{text-align:right;width:1%;white-space:nowrap;color:var(--ink); padding-left:var(--sp-6);font-variant-numeric:tabular-nums lining-nums} .kette tr.ab td{color:var(--muted)} .kette tr.zw td{border-top:1px solid var(--linie);padding-top:var(--sp-3); color:var(--ink);font-weight:var(--fw-halb)} /* Endsumme: kräftige Oberlinie und doppelter Abschlussstrich wie in einer Bilanz. Die Betonung kommt aus Gewicht und Linie, nicht aus Serifen. */ .kette tr.sum td{border-top:1px solid var(--linie-x); border-bottom:3px double var(--linie-x);padding:var(--sp-3) 0; font-weight:var(--fw-fett);color:var(--ink)} .kette tr.sum td.zr{font-size:var(--t-stark)} .kette td.bal{width:var(--bal);padding:0 0 0 var(--sp-6)} /* Eine Ausgabenliste ist EINE Serie, also eine Farbe. Die Balkenlänge trägt die Größe — keine bunten Kategoriepaletten. Balken ist Fläche: --copper. */ .kette .stab{display:block;height:var(--sp-2);background:var(--fl-4)} .kette .stab i{display:block;height:var(--sp-2);background:var(--copper)} .kette small{display:block;font-size:var(--t-label);line-height:var(--lh-label); color:var(--muted);margin-top:var(--sp-1);font-weight:var(--fw-normal)} .nachsatz{font-size:var(--t-body);line-height:var(--lh-body);color:var(--muted); margin:var(--sp-4) 0 0;padding-left:var(--sp-4); border-left:2px solid var(--copper);max-inline-size:65ch} .paar{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8); margin-bottom:var(--sp-7)} /* ---- 4.6 werktabelle ---- Zebra ODER Hover, nicht beides. Das Cockpit nutzt Hover. */ .werk{width:100%;border-collapse:collapse;font-size:var(--t-body); line-height:var(--lh-body)} .werk thead th{text-align:left;font-size:var(--t-label);line-height:var(--lh-label); text-transform:uppercase;letter-spacing:var(--ls-label); font-weight:var(--fw-fett);color:var(--muted);padding:0 0 var(--sp-3); border-bottom:1px solid var(--linie-x);position:sticky;top:0; background:var(--fl);z-index:2} .werk thead th.zr{text-align:right;padding-left:var(--sp-6)} .werk tbody td{padding:var(--sp-3) 0;border-bottom:1px solid var(--linie); vertical-align:baseline} .werk tbody td.zr{text-align:right;white-space:nowrap;color:var(--ink); padding-left:var(--sp-6);font-variant-numeric:tabular-nums lining-nums} .werk tbody tr:hover td{background:var(--fl-2)} /* Der Spaltenabstand haengt am padding-left der .zr-Spalten. Folgt auf eine Spalte eine LINKSBUENDIGE, faellt er weg und beide stossen aneinander — im Nummernkreis stand deshalb "0002—" statt "0002 | —". */ .werk th:has(+ th:not(.zr)),.werk td:has(+ td:not(.zr)){padding-right:var(--sp-6)} /* Sekundärinfo als small unter dem Haupttext DERSELBEN Zelle, nicht in einer eigenen Spalte. */ .werk small{display:block;font-size:var(--t-label);line-height:var(--lh-label); color:var(--muted);margin-top:var(--sp-1);white-space:normal; max-inline-size:65ch} .werk .neg{color:var(--rot);font-weight:var(--fw-halb)} .werk .off{color:var(--muted)} .werk tr.ohne td{color:var(--muted);padding:var(--sp-5) 0} /* Summen in tfoot, abgesetzt durch kräftige Oberlinie. */ .werk tfoot td{border-bottom:none;border-top:1px solid var(--linie-x); padding-top:var(--sp-4);font-weight:var(--fw-fett);color:var(--ink)} .werk tfoot td.zr{text-align:right;padding-left:var(--sp-6); font-variant-numeric:tabular-nums lining-nums;white-space:nowrap} .zust{font-size:var(--t-label);text-transform:uppercase; letter-spacing:var(--ls-label);font-weight:var(--fw-fett);color:var(--muted)} .zust.ok{color:var(--gruen)} .tabellenhuelle{overflow-x:auto} /* ---- 4.7 band ---- */ .band{display:flex;gap:var(--sp-3);align-items:flex-start; padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-4); border-left:2px solid;font-size:var(--t-body);line-height:var(--lh-body)} .band .ic{flex:0 0 var(--ikon);margin-top:var(--sp-1)} .band b{font-weight:var(--fw-fett)} .band a{color:inherit;font-weight:var(--fw-halb)} .band.warn{background:var(--gelb-fl);border-color:var(--gelb);color:var(--gelb)} .band.info{background:var(--blau-fl);border-color:var(--blau);color:var(--blau)} .band.ok{background:var(--gruen-fl);border-color:var(--gruen);color:var(--gruen)} .band.fehler{background:var(--rot-fl);border-color:var(--rot);color:var(--rot)} .band b{color:inherit} /* ---- 4.8 pruefliste ---- */ .pruef{list-style:none;margin:0;padding:0} .pruef li{display:flex;gap:var(--sp-3);align-items:flex-start; padding:var(--sp-3) 0;border-bottom:1px solid var(--linie); font-size:var(--t-body);line-height:var(--lh-body)} .pruef li:last-child{border-bottom:none} .pruef .ic{flex:0 0 var(--ikon);margin-top:var(--sp-1)} .pruef .ja .ic{color:var(--gruen)} .pruef .nein .ic{color:var(--rot)} .pruef .nein{color:var(--rot)} .pruef b{color:var(--ink);font-weight:var(--fw-halb)} .pruef .nein b{color:var(--rot)} .pruef small{display:block;color:var(--muted);font-size:var(--t-label); line-height:var(--lh-label);margin-top:var(--sp-1);max-inline-size:65ch} .pruef .nein small{color:var(--rot)} /* 'offen' = nicht prüfbar. Blau, nicht grün und nicht rot: der Punkt ist weder erfüllt noch verletzt, das Cockpit weiß es schlicht nicht. */ .pruef .offen .ic{color:var(--blau)} .pruef .offen b{color:var(--blau)} /* ---- 4.9 rohtext ---- Quelldaten in Schreibmaschinenschrift. Damit bleibt jede Zuordnung bis zur Quelle prüfbar — Dateiname und Zeilennummer inklusive. */ .roh{background:var(--fl-3);border-left:2px solid var(--linie-s); padding:var(--sp-3) var(--sp-4);margin-top:var(--sp-4); font-family:var(--mono);font-size:var(--t-label);line-height:var(--lh-stark); color:var(--muted);white-space:pre-wrap;word-break:break-word;overflow-x:auto} .roh b{color:var(--ink);font-weight:var(--fw-halb)} /* ---- 4.10 wirkung ---- */ .wirkung{border-top:1px solid var(--linie);padding-top:var(--sp-5)} .wirkung table{width:100%;border-collapse:collapse;font-size:var(--t-body); line-height:var(--lh-body)} .wirkung td{padding:var(--sp-3) 0;border-bottom:1px solid var(--linie)} .wirkung tr:last-child td{border-bottom:none} .wirkung td.zr{text-align:right;color:var(--ink);white-space:nowrap; font-variant-numeric:tabular-nums lining-nums} .wirkung td.pf{width:var(--sp-6);text-align:center;color:var(--muted)} .wirkung td.neu{color:var(--copper-t);font-weight:var(--fw-fett)} /* Die Kontrollgröße steht gedämpft — sie soll sich NICHT bewegen. */ .wirkung .fest td,.wirkung .fest td.zr{color:var(--muted)} .wirkung-satz{font-size:var(--t-label);line-height:var(--lh-label); color:var(--muted);margin:var(--sp-3) 0 0;max-inline-size:65ch} /* Bewegt sich die Kontrollgröße doch, muss der Satz das auch sagen. */ .wirkung-satz.warnt{color:var(--gelb);background:var(--gelb-fl); border-left:2px solid var(--gelb);padding:var(--sp-3) var(--sp-4); font-size:var(--t-body);line-height:var(--lh-body)} /* ---- 4.11 leer ---- */ .leer{display:grid;place-items:center;text-align:center;flex:1; padding:var(--sp-9) var(--sp-7);color:var(--muted)} .leer .ic{color:var(--linie-s);stroke-width:1.4;margin-bottom:var(--sp-4)} .leer h3{font-size:var(--t-titel);line-height:var(--lh-titel); margin-bottom:var(--sp-3)} .leer p{margin:0 auto var(--sp-5);max-inline-size:44ch; font-size:var(--t-body);line-height:var(--lh-body)} /* ---- 4.12 feld ---- */ .felder{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5) var(--sp-6)} .feld.breit{grid-column:1/-1} .feld label{display:block;font-size:var(--t-label);line-height:var(--lh-label); font-weight:var(--fw-fett);color:var(--ink);margin-bottom:var(--sp-2)} /* Pflichtstern am Label, und zwar an ALLEN. Nur die optionalen zu markieren funktioniert nicht, weil niemand Formular-Einleitungen liest. */ .feld label em{font-style:normal;color:var(--rot);font-weight:var(--fw-fett)} .feld .hilf{font-size:var(--t-label);line-height:var(--lh-label); color:var(--muted);margin-top:var(--sp-2);max-inline-size:65ch} .feld .hilf b{color:var(--ink);font-weight:var(--fw-halb)} /* Fehler direkt am Feld, mit Icon UND Farbe — Farbe allein reicht bei Farbfehlsichtigkeit nicht. Keine Tooltips für Fehler. */ .feld .fehler{font-size:var(--t-label);line-height:var(--lh-label); color:var(--rot);margin-top:var(--sp-2);display:flex;align-items:flex-start; gap:var(--sp-2);font-weight:var(--fw-halb);max-inline-size:65ch} .feld .fehler .ic{flex:0 0 var(--ikon)} /* Kleinteile, die sonst als style="" im Template landen würden. Ein Inline-Style ist ein px-Wert, der der Skala entkommen ist. */ .knopfzeile{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap; margin-top:var(--sp-5)} .felder.abstand{margin-top:var(--sp-5)} .feldgruppe{margin-top:var(--sp-4)} .blocklabel{display:block;margin-bottom:var(--sp-2)} select.schmal,input.schmal{max-width:var(--leit-neb)} /* ---- 4.13 liste + listenzeile ---- */ .liste{border-right:1px solid var(--linie);display:flex;flex-direction:column; min-width:0;background:var(--fl-3)} .liste .lkopf{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--linie); background:var(--fl)} .liste .lkopf .z1{display:flex;align-items:baseline;gap:var(--sp-3); margin-bottom:var(--sp-3)} .liste .lkopf h1{font-size:var(--t-stark);line-height:var(--lh-stark); font-weight:var(--fw-halb)} .liste .lkopf .anz{font-size:var(--t-label);color:var(--muted);margin-left:auto; white-space:nowrap} .lsuche{display:flex;align-items:center;gap:var(--sp-3);background:var(--fl-3); border:1px solid var(--linie);border-radius:var(--radius-s); padding:0 var(--sp-3);color:var(--muted);min-height:var(--ziel)} .lsuche input{border:none;background:none;min-height:var(--sp-7);padding:0; font-size:var(--t-body)} .lsuche input:focus{outline:none;box-shadow:none} .lsuche:focus-within{outline:2px solid var(--copper-d);outline-offset:1px} /* Aktive Filter müssen sichtbar sein. Wer eine gefilterte Liste für die ganze hält, zieht bei Geldzahlen teure Fehlschlüsse. */ .filter{display:flex;padding:0 var(--sp-4);background:var(--fl); border-bottom:1px solid var(--linie);overflow-x:auto;gap:var(--sp-5)} .filter a{text-decoration:none;padding:var(--sp-3) 0;cursor:pointer; font-size:var(--t-label);line-height:var(--lh-label);font-weight:var(--fw-fett); color:var(--muted);border-bottom:2px solid transparent;display:flex; align-items:center;gap:var(--sp-2);white-space:nowrap;min-height:var(--ziel)} .filter a:hover{color:var(--ink)} .filter a.an{color:var(--ink);border-bottom-color:var(--copper)} .filter a em{font-style:normal;font-size:var(--t-label);font-weight:var(--fw-fett); background:var(--fl-4);color:var(--muted);border-radius:var(--sp-3); padding:0 var(--sp-2);min-width:var(--sp-6);text-align:center; font-variant-numeric:tabular-nums} .filter a.an em{background:var(--copper-d);color:#fff} .rollen{overflow-y:auto;flex:1} /* Klebende Zwischenüberschrift — beim Scrollen weiß man, wo man ist. */ .tag{position:sticky;top:0;background:var(--fl-3); padding:var(--sp-3) var(--sp-4) var(--sp-2);font-size:var(--t-label); line-height:var(--lh-label);font-weight:var(--fw-fett); letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted); border-bottom:1px solid var(--linie);z-index:5} .pos{display:grid;grid-template-columns:1fr auto;gap:var(--sp-1) var(--sp-3); align-items:baseline;padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--linie);cursor:pointer; border-left:3px solid transparent;background:var(--fl-3);text-decoration:none; align-content:center} .pos:hover{background:var(--fl-4)} /* Ausgewählt: weißer Hintergrund UND kupferner Balken links. */ .pos.an{background:var(--fl);border-left-color:var(--copper)} .pos .wer{font-size:var(--t-body);line-height:var(--lh-body); font-weight:var(--fw-halb);color:var(--ink);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .pos .betrag{font-size:var(--t-body);font-weight:var(--fw-halb);color:var(--ink)} .pos .betrag.plus{color:var(--gruen)} .pos .unten{grid-column:1/2;font-size:var(--t-label);line-height:var(--lh-label); color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pos .datum{grid-column:2/3;font-size:var(--t-label);color:var(--muted); font-variant-numeric:tabular-nums lining-nums} .pos .flagge{display:inline-block;font-size:var(--t-label); font-weight:var(--fw-fett);letter-spacing:var(--ls-label); text-transform:uppercase;padding:0 var(--sp-2);border-radius:var(--radius-s); margin-right:var(--sp-2)} .pos .flagge.offen{background:var(--gelb-fl);color:var(--gelb)} .pos .flagge.vor{background:var(--fl-4);color:var(--muted)} .pos .flagge.ext{background:var(--blau-fl);color:var(--blau)} .pos .flagge.storno{background:var(--rot-fl);color:var(--rot)} /* Belegte Hand-Zuordnungen müssen unter 71 Umsätzen auffindbar bleiben. */ .pos .flagge.beleg{background:var(--gruen-fl);color:var(--gruen)} .liste .lfuss{border-top:1px solid var(--linie);background:var(--fl); padding:var(--sp-3) var(--sp-4);display:flex;align-items:center;gap:var(--sp-3)} .fortschritt{flex:1;height:var(--sp-2);background:var(--fl-4); border-radius:2px;overflow:hidden} .fortschritt i{display:block;height:var(--sp-2);background:var(--copper)} .liste .lfuss span{font-size:var(--t-label);color:var(--muted); font-weight:var(--fw-halb);white-space:nowrap} /* ---- 4.14 detail + detailfuss ---- */ .detail{overflow-y:auto;min-width:0;display:flex;flex-direction:column} .dkoerper{padding:var(--sp-6);max-width:var(--detail);flex:1} .bkopf{border-bottom:1px solid var(--linie);padding-bottom:var(--sp-5); margin-bottom:var(--sp-6)} .bkopf .o{display:flex;align-items:flex-start;gap:var(--sp-5);flex-wrap:wrap} .bkopf h2{font-size:var(--t-titel);line-height:var(--lh-titel); font-weight:var(--fw-halb)} .bkopf .meta{font-size:var(--t-body);line-height:var(--lh-body); color:var(--muted);margin-top:var(--sp-1)} .bkopf .summe{margin-left:auto;text-align:right} .bkopf .summe .l{font-size:var(--t-label);font-weight:var(--fw-fett); letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)} .bkopf .summe .b{font-variant-numeric:tabular-nums lining-nums; font-size:var(--t-seite);line-height:var(--lh-seite);color:var(--ink); letter-spacing:var(--ls-leit);margin-top:var(--sp-1);white-space:nowrap} .bkopf .summe .b.minus{color:var(--rot)} .dfuss{margin-top:auto;border-top:1px solid var(--linie); padding:var(--sp-4) var(--sp-6);display:flex;align-items:center;gap:var(--sp-4); background:var(--fl-2);position:sticky;bottom:0;flex-wrap:wrap;z-index:6} .dfuss .tasten{font-size:var(--t-label);line-height:var(--lh-label); color:var(--muted);display:flex;align-items:center;gap:var(--sp-2); flex-wrap:wrap} .dfuss kbd,.tasten kbd{font:inherit;font-size:var(--t-label); font-weight:var(--fw-fett);background:var(--fl);border:1px solid var(--feldrand); border-radius:var(--radius-s);padding:0 var(--sp-2);color:var(--muted)} .dfuss .re{margin-left:auto;display:flex;gap:var(--sp-3);align-items:center} /* ---- 4.15 Toast ---- Erfolg unten rechts, 6 s, mit Schließen-Knopf. Vollseiten-Bestätigung nur dort, wo ein Dokument entsteht. Schwebende Ebene, also Schatten. */ .toasts{position:fixed;right:var(--sp-5);bottom:var(--sp-5);z-index:250; display:flex;flex-direction:column;gap:var(--sp-3); max-width:min(var(--schweber),calc(100vw - var(--sp-7)))} .toast{display:flex;align-items:flex-start;gap:var(--sp-3);background:var(--fl); border:1px solid var(--linie-s);border-left:3px solid var(--gruen); border-radius:var(--radius);padding:var(--sp-4);font-size:var(--t-body); line-height:var(--lh-body);color:var(--text);box-shadow:var(--tiefe-3); animation:toast-auf var(--zeit-normal) var(--ease-raus)} .toast.fehler{border-left-color:var(--rot)} .toast .ic{flex:0 0 var(--ikon);margin-top:var(--sp-1);color:var(--gruen)} .toast.fehler .ic{color:var(--rot)} .toast .zu{margin-left:auto;background:none;border:none;color:var(--muted); cursor:pointer;padding:0;min-width:var(--ziel);min-height:var(--ziel); display:grid;place-items:center} .toast .zu:hover{color:var(--ink)} .toast.fort{opacity:0;transform:translateY(var(--sp-1)); transition:var(--zeit-normal) var(--ease-rein)} @keyframes toast-auf{from{opacity:0;transform:translateY(var(--sp-3))} to{opacity:1;transform:none}} /* ---- 4.16 Springen zu ---- */ .palette{position:fixed;inset:0;background:rgba(14,26,34,.36);z-index:260; display:grid;place-items:start center;padding-top:14vh} /* Muss sein: eine Klassenregel mit display schlägt sonst das hidden-Attribut, und die Palette stünde beim Laden offen. */ .palette[hidden]{display:none} .palette-kasten{background:var(--fl);border:1px solid var(--linie-s); border-radius:var(--radius);box-shadow:var(--tiefe-3); width:min(var(--schweber),calc(100vw - var(--sp-7)));overflow:hidden} .palette-kasten input{border:none;border-bottom:1px solid var(--linie); border-radius:0;min-height:var(--sp-8);font-size:var(--t-stark); padding:0 var(--sp-4)} .palette-kasten input:focus{box-shadow:none;border-color:var(--linie)} .palette-liste{max-height:52vh;overflow-y:auto;padding:var(--sp-2)} .palette-liste a{display:flex;align-items:center;gap:var(--sp-3); padding:var(--sp-2) var(--sp-3);text-decoration:none;color:var(--ink); font-size:var(--t-body);border-radius:var(--radius-s);min-height:var(--ziel)} .palette-liste a .ic{color:var(--muted)} .palette-liste a em{margin-left:auto;font-style:normal;font-size:var(--t-label); color:var(--muted)} .palette-liste a:hover,.palette-liste a.an{background:var(--fl-4)} /* ========================================================================== 5 SEITENTYPEN Zwei bleiben, einer faellt weg. LESEN gibt es nicht mehr als eigenen Typ: im Grundriss v4 ist jede Seite eine Karten-Seite, der Unterschied liegt nur noch darin, WAS in den Karten steht. ========================================================================== */ /* ---- 5.1 Karten-Seite (Start, Finanzen) ---- */ .blatt{overflow-y:auto;flex:1;padding:var(--sp-6) var(--sp-7) var(--sp-9)} .spalten{max-width:var(--seite-max)} /* Seitentitel und Unterzeile gelten in beiden Rahmen — die Aufgabenseite ist dieselbe Seite, nur schmaler. */ .blatt h1,.mitte h1{font-size:var(--t-seite);line-height:var(--lh-seite); font-weight:var(--fw-fett);letter-spacing:-.02em;margin:0} .blatt .unterzeile,.mitte .unterzeile{margin:var(--sp-2) 0 0; font-size:var(--t-stark);line-height:var(--lh-stark);color:var(--muted)} /* ---- 5.1b ANMELDESEITE ---- Eigene Seite ohne Navigation: vor der Anmeldung gibt es nichts zu sehen und erst recht nichts zu rechnen. Deshalb erbt sie nicht von base.html. */ .tor-seite{overflow:auto;background:var(--fl-3)} .tor{max-width:var(--tor);margin:0 auto;padding:var(--sp-9) var(--sp-6)} .tor-marke{display:flex;align-items:center;gap:var(--sp-3); margin-bottom:var(--sp-6)} .tor-marke .zeichen{width:var(--sp-7);height:var(--sp-7);border-radius:var(--radius); background:var(--marine);color:#fff;display:grid;place-items:center; font-weight:var(--fw-fett);flex:none} .tor-marke .m1{display:block;font-size:var(--t-body);font-weight:var(--fw-halb); color:var(--ink)} .tor-marke small{display:block;font-size:var(--t-label);color:var(--muted)} .tor .karte h1{font-size:var(--t-titel);line-height:var(--lh-titel); font-weight:var(--fw-fett)} .tor .karte .unterzeile{margin:var(--sp-2) 0 0;font-size:var(--t-body); color:var(--muted)} .tor .karte > * + *{margin-top:var(--sp-5)} .tor .karte > h1 + .unterzeile{margin-top:var(--sp-2)} .torform > * + *{margin-top:var(--sp-5)} .tor-fuss{margin-top:var(--sp-6);font-size:var(--t-label);color:var(--muted); text-align:center} /* ---- 5.2 ABARBEITEN (Register, eTermin) ---- */ .arbeit{display:grid;grid-template-columns:var(--spalte) 1fr;flex:1; min-height:0;overflow:hidden} /* ---- 5.3 AUFGABE (Rechnung erstellen, Nachtragen) ---- Eine Spalte, mittig, schmal. Eine Rechnung ist ein Vorgang mit Rechtsfolgen und einer verbrauchten Nummer — wer sie schreibt, soll nur sie sehen. Der Abstand zwischen den Karten haengt am Behaelter, nicht als margin an jeder einzelnen Karte: sonst haengt er doppelt, sobald zwei Karten aufeinandertreffen. */ .aufgabe{overflow-y:auto;flex:1} .aufgabe .mitte{max-width:var(--aufgabe);width:100%;margin:0 auto; padding:var(--sp-7) var(--sp-6) var(--sp-8)} .aufgabe .mitte > * + *{margin-top:var(--sp-5)} .aufgabe .mitte > h1 + .unterzeile{margin-top:var(--sp-2)} .aufgabe form{display:flex;flex-direction:column;gap:var(--sp-5)} /* Der Abstand kommt schon aus dem gap — sonst steht er doppelt. */ .aufgabe form > .knopfzeile{margin-top:0} /* ========================================================================== 6 MODULE — was wirklich nur eine einzige Seite braucht ========================================================================== */ /* ---- 6.0a HERO ---- Die eine dominante Zahl des Monats auf marineblauer Fläche. Eine echte schwebende Ebene über dem Karten-Raster, also --tiefe-2. Textfarben darauf: #fff (11,98:1), --nav-ruhe (7,44:1), --nav-leise (5,22:1). Der Entwurf benutzte #7ba0b6 — 4,31:1, fällt durch. */ .hero{border-radius:var(--radius-karte);overflow:hidden;box-shadow:var(--tiefe-2); background:var(--marine);color:#fff;position:relative;margin-top:var(--sp-6)} .hero .kante{position:absolute;right:0;top:0;bottom:0;width:var(--sp-2); background:var(--copper)} .hero .rumpf{position:relative;padding:var(--sp-6) var(--sp-7); display:flex;flex-wrap:wrap;gap:var(--sp-7);align-items:flex-end; justify-content:space-between} .hero .e{font-size:var(--t-label);color:var(--nav-ruhe)} .hero .gross{font-size:var(--t-leit);line-height:var(--lh-leit); font-weight:var(--fw-halb);letter-spacing:-.03em;white-space:nowrap; font-variant-numeric:tabular-nums lining-nums;margin-top:var(--sp-3)} .hero .gross .waehrung{font-size:var(--t-titel);color:var(--nav-ruhe); font-weight:var(--fw-normal)} .hero .neben{display:flex;gap:var(--sp-6);flex-wrap:wrap} .hero .neben .l{font-size:var(--t-label);color:var(--nav-ruhe)} .hero .neben .w{font-size:var(--t-titel);line-height:var(--lh-titel); font-weight:var(--fw-halb);white-space:nowrap;margin-top:var(--sp-1); font-variant-numeric:tabular-nums lining-nums} /* Herkunftszeile: woher die Zahl kommt, direkt unter der Zahl. Das ist der Kern des ganzen Cockpits — eine Zahl ohne Quelle ist eine Behauptung. */ .hero .herkunft{position:relative;padding:var(--sp-3) var(--sp-7); background:rgba(0,0,0,.22);font-size:var(--t-label);color:var(--nav-leise); display:flex;gap:var(--sp-3);flex-wrap:wrap} .hero .herkunft b{color:var(--nav-ruhe);font-weight:var(--fw-normal)} /* Reifegrad-Chip. Trägt IMMER ein Wort, nie nur eine Farbe. */ .reife{display:inline-flex;align-items:center;gap:var(--sp-2); font-size:var(--t-label);font-weight:var(--fw-halb); padding:var(--sp-1) var(--sp-3);border-radius:var(--radius); white-space:nowrap} .reife i{width:var(--sp-2);height:var(--sp-2);border-radius:50%; background:currentColor;flex:none} .hero .reife.ergebnis{background:rgba(159,224,189,.18);color:#9fe0bd} .hero .reife.vorlaeufig{background:rgba(226,178,120,.2);color:#e6bd88} .hero .reife.zwischenstand{background:rgba(255,255,255,.14);color:var(--nav-ruhe)} .hero .reife.vorausschau{background:rgba(255,255,255,.14);color:var(--nav-ruhe)} .reife.ergebnis{background:var(--gruen-fl);color:var(--gruen)} .reife.vorlaeufig{background:var(--copper-fl);color:var(--copper-t)} .reife.zwischenstand{background:var(--fl-4);color:var(--muted)} .reife.vorausschau{background:var(--blau-fl);color:var(--blau)} .reife.offen{background:var(--fl-4);color:var(--muted)} /* Vergleich zum Vormonat. Grün heißt besser, nicht gut. */ .vergleich{margin-top:var(--sp-4);display:inline-flex;align-items:center; gap:var(--sp-2);font-size:var(--t-body);padding:var(--sp-2) var(--sp-4); border-radius:var(--radius);white-space:nowrap; background:rgba(255,255,255,.12);color:var(--nav-ruhe)} .vergleich.besser{background:rgba(159,224,189,.16);color:#9fe0bd} .vergleich.schlechter{background:rgba(240,169,169,.16);color:#f0b9b9} /* Kleiner Verlaufsbalken im Hero. */ .spur{display:flex;align-items:flex-end;gap:var(--sp-1);height:var(--sp-8); margin-top:var(--sp-3)} .spur i{flex:0 0 auto;width:var(--sp-3);border-radius:2px 2px 0 0; background:var(--nav-leise)} .spur i.jetzt{background:var(--copper)} /* ---- 6.0b GELDFLUSS ---- „Jede Zeile teilt die Zeile darüber." Breite = Anteil am Bruttoumsatz. Das zeigt in vier Zeilen, wohin das Geld geht — was eine Aufstellung untereinander nicht kann. Farben nach ROLLE (siehe tokens.css 1.4b), nie nach Kategorie. Die Beschriftung steht IM Segment, Farbe ist also nie der einzige Träger. */ .fluss{display:flex;flex-direction:column;gap:var(--sp-1);margin-top:var(--sp-5)} .fluss .zeile{display:flex;gap:2px;height:var(--sp-8)} .fluss .teil{display:flex;align-items:center;padding:0 var(--sp-3); border-radius:var(--radius-s);overflow:hidden;min-width:0;color:#fff; font-size:var(--t-label);white-space:nowrap} .fluss .teil.weiter{background:var(--fluss-weiter)} .fluss .teil.ab{background:var(--fluss-ab)} .fluss .teil.ab2{background:var(--fluss-ab2)} .fluss .teil.plus{background:var(--fluss-plus)} .fluss .teil.minus{background:var(--fluss-minus)} .fluss .teil span{overflow:hidden;text-overflow:ellipsis} .flusslegende{margin-top:var(--sp-4);padding-top:var(--sp-4); border-top:1px solid var(--linie)} .flusslegende .z{display:flex;align-items:center;gap:var(--sp-3); padding:var(--sp-2) 0;font-size:var(--t-body)} .flusslegende .z i{width:var(--sp-3);height:var(--sp-3);border-radius:3px;flex:none} .flusslegende .z .n{flex:1;min-width:0} .flusslegende .z .w{white-space:nowrap; font-variant-numeric:tabular-nums lining-nums;color:var(--ink)} /* ---- 6.0c LIEGENBLEIBER ---- Klickbare Zeilen statt Bänder: jede führt dorthin, wo man es erledigt. */ .liegen{display:block;text-decoration:none;color:inherit; display:flex;gap:var(--sp-4);padding:var(--sp-4) var(--sp-6); border-top:1px solid var(--linie);align-items:flex-start; transition:background var(--zeit-schnell) var(--ease-raus)} .liegen:hover{background:var(--fl-2)} .liegen .punkt{width:var(--sp-3);height:var(--sp-3);border-radius:50%; margin-top:var(--sp-1);flex:none;background:var(--muted)} .liegen.dringend .punkt{background:var(--copper); box-shadow:0 0 0 var(--sp-2) rgba(180,118,59,.16)} .liegen .txt{flex:1;min-width:0} .liegen .txt .t{font-size:var(--t-body);font-weight:var(--fw-halb);color:var(--ink)} .liegen .txt .u{font-size:var(--t-label);line-height:var(--lh-label); color:var(--muted);margin-top:var(--sp-1);max-inline-size:60ch} .liegen .pf{color:var(--muted);flex:none} /* ---- 6.0d MONATSGITTER ---- Zwölf Kacheln statt einer Auswahlliste. Der Reifegrad steht als Punkt dabei, die Balkenlänge zeigt die Größe des Ergebnisses relativ zum größten des Jahres. Damit ist die Monatswahl gleichzeitig die Übersicht. */ /* Zwölf feste Spalten, nicht auto-fit: bei auto-fit passen je nach Breite elf Kacheln in die Zeile und der Dezember steht allein darunter. Ein Jahr hat zwölf Monate, das Gitter also zwölf Spalten. */ .gitter{display:grid;grid-template-columns:repeat(12,1fr); gap:var(--sp-2);margin-top:var(--sp-6)} @media (max-width:1250px){.gitter{grid-template-columns:repeat(6,1fr)}} @media (max-width:700px){.gitter{grid-template-columns:repeat(4,1fr)}} .kachel{display:block;text-decoration:none;background:var(--fl); border-radius:var(--radius);box-shadow:var(--tiefe-1); padding:var(--sp-3) var(--sp-4) var(--sp-4);color:var(--ink);min-width:0; transition:box-shadow var(--zeit-schnell) var(--ease-raus)} .kachel:hover{box-shadow:var(--tiefe-2)} .kachel.an{background:var(--marine);color:#fff} .kachel .z1{display:flex;align-items:center;justify-content:space-between; gap:var(--sp-2)} .kachel .kurz{font-size:var(--t-label);font-weight:var(--fw-halb)} .kachel .glyph{width:var(--sp-2);height:var(--sp-2);border-radius:50%;flex:none} .kachel .glyph.ergebnis{background:var(--gruen)} .kachel .glyph.vorlaeufig{background:var(--copper)} .kachel .glyph.zwischenstand{background:var(--muted)} .kachel .glyph.vorausschau{background:var(--blau)} .kachel .glyph.offen{background:var(--linie-s)} .kachel.an .glyph.offen{background:var(--nav-leise)} .kachel .wert{font-size:var(--t-body);font-weight:var(--fw-halb); font-variant-numeric:tabular-nums lining-nums;white-space:nowrap; margin-top:var(--sp-2)} .kachel .wert.minus{color:var(--rot)} .kachel.an .wert.minus{color:#f0b9b9} .kachel .wert.ohne{color:var(--muted);font-weight:var(--fw-normal)} .kachel .balken{height:3px;border-radius:2px;background:var(--linie); margin-top:var(--sp-2);overflow:hidden} .kachel .balken i{display:block;height:3px;background:var(--copper)} .kachel.an .balken{background:rgba(255,255,255,.2)} /* ---- 6.0e KENNZAHLEN ---- Keine Reihe aus vier gleichen Kacheln: die erste ist marineblau und damit dominant, die anderen ordnen sich unter. Ohne diese Hierarchie hat die Reihe keine Aussage, nur Inhalt. */ .kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--kennz-min),1fr)); gap:var(--sp-4);margin-top:var(--sp-5)} .kennzahl{background:var(--fl);border-radius:var(--radius-karte); padding:var(--sp-5) var(--sp-6);box-shadow:var(--tiefe-1);min-width:0} .kennzahl.haupt{background:var(--marine);color:#fff;box-shadow:var(--tiefe-2)} .kennzahl .l{font-size:var(--t-label);color:var(--muted)} .kennzahl.haupt .l{color:var(--nav-ruhe)} .kennzahl .w{font-size:var(--t-seite);line-height:var(--lh-seite); font-weight:var(--fw-halb);letter-spacing:-.025em;white-space:nowrap; font-variant-numeric:tabular-nums lining-nums;margin-top:var(--sp-2)} .kennzahl .w .waehrung{font-size:var(--t-stark);color:var(--muted); font-weight:var(--fw-normal)} .kennzahl.haupt .w .waehrung{color:var(--nav-ruhe)} .kennzahl .u{font-size:var(--t-label);line-height:var(--lh-label); color:var(--muted);margin-top:var(--sp-2)} .kennzahl.haupt .u{color:var(--nav-ruhe)} .kennzahl .kopfz{display:flex;align-items:center;justify-content:space-between; gap:var(--sp-3);flex-wrap:wrap} /* ---- 6.0f AUSGABENBAND ---- */ .band-anteile{display:flex;gap:2px;height:var(--sp-4);margin-top:var(--sp-4); border-radius:3px;overflow:hidden} .band-anteile i{display:block} .ausgabenliste .z{display:flex;align-items:center;gap:var(--sp-3); padding:var(--sp-3) 0;border-bottom:1px solid var(--linie)} .ausgabenliste .z:last-child{border-bottom:none} .ausgabenliste .p{width:var(--sp-3);height:var(--sp-3);border-radius:3px;flex:none} .ausgabenliste .n{flex:1;min-width:0} .ausgabenliste .n small{display:block;font-size:var(--t-label);color:var(--muted); margin-top:var(--sp-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ausgabenliste .a{font-size:var(--t-label);color:var(--muted);white-space:nowrap} .ausgabenliste .w{white-space:nowrap; font-variant-numeric:tabular-nums lining-nums;min-width:var(--spalte-m);text-align:right} /* ---- 6.0g MONATSLISTE ---- */ .monatsliste .z{display:flex;align-items:center;gap:var(--sp-3); padding:var(--sp-3) var(--sp-6);border-top:1px solid var(--linie); text-decoration:none;color:inherit} .monatsliste .z:hover{background:var(--fl-2)} .monatsliste .z.an{background:var(--fl-3)} .monatsliste .glyph{width:var(--sp-2);height:var(--sp-2);border-radius:50%;flex:none} .monatsliste .n{width:var(--spalte-m);flex:none;font-size:var(--t-body)} .monatsliste .r{flex:1;min-width:0;font-size:var(--t-label);color:var(--muted)} .monatsliste .e{white-space:nowrap;font-variant-numeric:tabular-nums lining-nums} .monatsliste .e.minus{color:var(--rot)} /* ---- 6.0h KARTENSTAPEL (Sachkosten) ---- Eine Buchung als Karte, dahinter zwei angedeutete Kanten für den Rest des Stapels. Das ist kein Zierrat: es zeigt, dass noch etwas kommt, ohne eine Zahl dafür zu brauchen — und es macht aus einer Liste eine Aufgabe. */ .stapel{position:relative;padding-top:var(--sp-4);min-width:0} .stapel .kante1,.stapel .kante2{position:absolute;border-radius:var(--radius-karte); background:var(--fl);box-shadow:var(--tiefe-1);height:var(--sp-6)} .stapel .kante1{left:var(--sp-5);right:var(--sp-5);top:0;opacity:.5} .stapel .kante2{left:var(--sp-3);right:var(--sp-3);top:var(--sp-2);opacity:.8} .stapel .karte{position:relative;box-shadow:var(--tiefe-2)} .stapel .zaehler{font-size:var(--t-label);color:var(--copper-t); font-weight:var(--fw-halb)} .stapel .wer{font-size:var(--t-titel);line-height:var(--lh-titel); font-weight:var(--fw-halb);letter-spacing:-.02em;margin-top:var(--sp-2)} .stapel .wann{font-size:var(--t-label);color:var(--muted);margin-top:var(--sp-1)} .stapel .betrag{font-size:var(--t-seite);line-height:var(--lh-seite); font-weight:var(--fw-halb);letter-spacing:-.03em;white-space:nowrap; font-variant-numeric:tabular-nums lining-nums} .stapel .betrag.minus{color:var(--rot)} /* Kategorie-Tasten. Die Ziffer steht sichtbar auf der Taste — ein Kürzel, das man nicht sieht, benutzt niemand. */ .tasten-gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--taste-min),1fr)); gap:var(--sp-3);margin-top:var(--sp-3)} .kattaste{display:flex;align-items:center;gap:var(--sp-3); border:none;background:var(--fl-2);border-radius:var(--radius); box-shadow:var(--tiefe-1);padding:var(--sp-3) var(--sp-4);cursor:pointer; text-align:left;font:inherit;font-size:var(--t-body);color:var(--ink); transition:box-shadow var(--zeit-schnell) var(--ease-raus), background var(--zeit-schnell) var(--ease-raus)} .kattaste:hover{background:var(--fl);box-shadow:0 0 0 2px var(--copper-d)} .kattaste.an{background:var(--marine);color:#fff;box-shadow:none} .kattaste .ziffer{font-size:var(--t-label);font-weight:var(--fw-fett); color:var(--copper-t);flex:none;min-width:var(--sp-4)} .kattaste.an .ziffer{color:var(--copper)} .kattaste .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Regelkarte: kupferne Fläche. Weißer Text auf --copper-d sind 4,95:1 — auf --copper wären es 3,75 und damit zu wenig. */ .regelkarte{background:var(--copper-d);color:#fff;border-radius:var(--radius-karte); padding:var(--sp-5) var(--sp-6);box-shadow:var(--tiefe-2)} .regelkarte .l{font-size:var(--t-label);color:rgba(255,255,255,.88)} .regelkarte .satz{font-size:var(--t-body);line-height:var(--lh-stark); margin-top:var(--sp-3)} .regelkarte input[type=text]{font-family:var(--mono);font-size:var(--t-label); background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34); color:#fff;min-height:var(--sp-7);width:auto;max-width:100%; padding:0 var(--sp-3);border-radius:var(--radius-s)} .regelkarte input[type=text]::placeholder{color:rgba(255,255,255,.6)} .regelkarte input[type=text]:focus{border-color:#fff;box-shadow:none; background:rgba(255,255,255,.24)} .regelkarte .wirk{font-size:var(--t-label);line-height:var(--lh-label); margin-top:var(--sp-3);color:rgba(255,255,255,.92)} .regelkarte .kz{display:flex;align-items:center;gap:var(--sp-3); margin-top:var(--sp-4)} .regelkarte input[type=checkbox]{width:var(--ikon);height:var(--ikon); accent-color:#fff;margin:0;flex:none} .regelkarte label{font-size:var(--t-body);margin:0;color:#fff} /* Fortschritt des Stapels. */ .fortschritt-gross{min-width:var(--stapel-l)} .fortschritt-gross .z1{display:flex;justify-content:space-between; align-items:baseline;gap:var(--sp-3)} .fortschritt-gross .z1 .l{font-size:var(--t-body);color:var(--muted)} .fortschritt-gross .z1 .w{font-size:var(--t-body);font-weight:var(--fw-halb); white-space:nowrap;font-variant-numeric:tabular-nums lining-nums} .fortschritt-gross .bahn{height:var(--sp-3);border-radius:var(--sp-2); background:var(--fl-4);margin-top:var(--sp-3);overflow:hidden} .fortschritt-gross .bahn i{display:block;height:var(--sp-3);background:var(--copper)} /* Nächste Buchungen. */ .naechste .z{display:flex;align-items:center;gap:var(--sp-3); padding:var(--sp-3) var(--sp-6);border-top:1px solid var(--linie); text-decoration:none;color:inherit} .naechste .z:hover{background:var(--fl-2)} .naechste .z.an{background:var(--fl-3)} .naechste .d{font-size:var(--t-label);color:var(--muted);width:var(--spalte-s);flex:none; font-variant-numeric:tabular-nums} .naechste .e{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .naechste .b{white-space:nowrap;font-variant-numeric:tabular-nums lining-nums} .naechste .k{font-size:var(--t-label);color:var(--muted);max-width:var(--spalte-k); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none} /* ---- 6.1 Sachkosten: Vorschlag, Regel, Beleg ---- */ .vorschlag{display:flex;align-items:center;gap:var(--sp-3); background:var(--copper-fl);border:1px solid var(--copper-fl); border-left:2px solid var(--copper);border-radius:var(--radius-s); padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-5);flex-wrap:wrap} .vorschlag .ic{flex:0 0 var(--ikon);color:var(--copper-t)} .vorschlag .t{font-size:var(--t-body);line-height:var(--lh-body);color:var(--text)} .vorschlag .t b{color:var(--ink)} .vorschlag .kn{margin-left:auto} .regel{border:1px solid var(--linie);border-radius:var(--radius); padding:var(--sp-4);background:var(--fl-2)} .regel .kz{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)} .regel input[type=checkbox]{width:var(--ikon);height:var(--ikon);accent-color:var(--copper-d); margin:0;flex:0 0 auto} .regel .kz label{font-size:var(--t-body);line-height:var(--lh-body); font-weight:var(--fw-halb);color:var(--ink);margin:0} .regel .muster{font-family:var(--mono);font-size:var(--t-label); line-height:var(--lh-label);color:var(--muted);background:var(--fl); border:1px solid var(--linie);border-radius:var(--radius-s); padding:var(--sp-2) var(--sp-3);margin-top:var(--sp-2);word-break:break-word; display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap} .regel .muster b{color:var(--copper-t)} .regel .muster input{font-family:var(--mono);font-size:var(--t-label); min-height:var(--sp-7);padding:0 var(--sp-2);flex:1 1 var(--wertsp);min-width:0; color:var(--copper-t);font-weight:var(--fw-fett)} /* Reichweite VOR dem Häkchen: "trifft auf 2 weitere Buchungen zu". */ .regel .wirk{font-size:var(--t-label);line-height:var(--lh-label); color:var(--muted);margin-top:var(--sp-2);max-inline-size:65ch} .regel [data-regel-warnung]{color:var(--gelb);background:var(--gelb-fl); border-left:2px solid var(--gelb);padding:var(--sp-2) var(--sp-3); margin-top:var(--sp-2)} /* Notiz an einer Buchung — der Beleg der Hand-Zuordnung. Ohne sie weiß in drei Monaten niemand mehr, warum hier von Hand eingegriffen wurde. */ .notiz-beleg{display:flex;gap:var(--sp-3);align-items:flex-start; margin-top:var(--sp-4);padding:var(--sp-3) var(--sp-4);background:var(--blau-fl); border-left:2px solid var(--blau);font-size:var(--t-body); line-height:var(--lh-body);color:var(--blau)} .notiz-beleg .ic{flex:0 0 var(--ikon);margin-top:var(--sp-1)} .notiz-beleg b{font-weight:var(--fw-fett)} /* ---- 6.2 Rechnung erstellen: Positionstabelle ---- */ .postab{width:100%;border-collapse:collapse} .postab th{text-align:left;font-size:var(--t-label);line-height:var(--lh-label); text-transform:uppercase;letter-spacing:var(--ls-label); font-weight:var(--fw-fett);color:var(--muted);padding:0 var(--sp-3) var(--sp-3) 0} /* Rechtsbuendig gilt fuer Kopf UND Zelle. Die Klasse .zr allein setzt nur Ziffernsatz und Umbruch — die Ausrichtung gehoert an die Tabelle, die sie braucht, sonst haengt der Spaltenkopf ueber einem linksbuendigen Wert. */ .postab th.zr,.postab td.zr{text-align:right} .postab td{padding:var(--sp-2) var(--sp-3) var(--sp-2) 0;vertical-align:middle} .postab td:last-child,.postab th:last-child{padding-right:0} /* Die laufende Nummer zaehlt das Stylesheet. Wuerde JavaScript sie setzen, muesste beim Entfernen einer Zeile alles neu durchnummeriert werden — und ohne JavaScript stuende gar keine Nummer da. */ .postab tbody{counter-reset:pos} .postab tbody tr{counter-increment:pos} .postab tbody .nr::before{content:counter(pos)} .postab .nr{width:var(--sp-6);color:var(--muted);font-size:var(--t-label); text-align:center;font-variant-numeric:tabular-nums} .postab .menge{width:var(--spalte-m)} .postab .preis{width:var(--wertsp)} .postab .summe{width:var(--spalte-k);color:var(--muted); font-variant-numeric:tabular-nums lining-nums;white-space:nowrap} .postab .weg{border:none;background:none;color:var(--muted);cursor:pointer; font-size:var(--t-stark);width:var(--ziel);height:var(--ziel); border-radius:var(--radius-s);display:grid;place-items:center} .postab .weg:hover{background:var(--rot-fl);color:var(--rot)} .summezeile{display:flex;justify-content:flex-end;gap:var(--sp-7); align-items:baseline;margin-top:var(--sp-5);padding-top:var(--sp-4); border-top:1px solid var(--linie);font-size:var(--t-body);color:var(--muted); flex-wrap:wrap} .summezeile b{color:var(--ink);font-variant-numeric:tabular-nums lining-nums; white-space:nowrap} .summezeile .brutto{font-size:var(--t-titel);font-weight:var(--fw-fett)} /* ---- 6.2b Dokumentenablage ---- Eine Zeile je Eintrag: Klickziel links (Ordner oeffnen / Datei holen), Datum, und rechts die Aktionen. Umbenennen und Loeschen stehen bewusst rechts aussen und nicht auf dem Klickziel — sonst loescht man beim Oeffnen. */ /* Karte, deren Kopf eine echte Trennlinie hat und deren Zeilen bis an den Rand laufen. */ .karte.flach{padding:0;overflow:hidden} .karte.flach > .kopf{margin:0;padding:var(--sp-4) var(--sp-6); border-bottom:1px solid var(--linie)} .karte.flach > .band{margin:0} .krumen{margin-top:var(--sp-3);display:flex;align-items:center;gap:var(--sp-1); flex-wrap:wrap;font-size:var(--t-body)} .krumen a,.krumen .an{padding:var(--sp-1) var(--sp-3); border-radius:var(--radius-s);text-decoration:none} .krumen a{color:var(--copper-t)} .krumen a:hover{background:var(--fl-4);text-decoration:underline} .krumen .an{color:var(--ink);font-weight:var(--fw-halb)} .krumen i{font-style:normal;color:var(--linie-s)} /* Zwei Spalten mit einer echten Trennlinie dazwischen. Umbruch auf eine Spalte, sobald 320 px nicht mehr passen. */ .ablegen{display:grid; grid-template-columns:repeat(auto-fit,minmax(var(--ablege-min),1fr))} .ablegen > form{padding:var(--sp-5) var(--sp-6);min-width:0} .ablegen > form + form{border-left:1px solid var(--linie)} .ablegen .l{font-size:var(--t-label);font-weight:var(--fw-fett); color:var(--muted)} .ablegen input[type=text]{margin-top:var(--sp-3)} .hinweiszeile{font-size:var(--t-label);color:var(--muted)} /* Die Ablegezone ist ein