:root{ --paper:#fbfaf8; --ink:#1a1a1a; --muted:#6b6b66; --line:#e4e1da; --green:#0d6e5f; --green-soft:#e7f1ee; --red:#b3402a; --tab:#f1eee7; /* Farbrollen fuer die dunkle Darstellung (03.11.2026). Im Hellen genau die Werte, die vorher fest im Code standen -- hell aendert sich nichts. --karte: Karten, Felder, Masken (vorher #fff). --gruen-fill: gruene FLAECHE mit weisser Schrift; --green bleibt Text, Symbol, Rand -- im Dunkeln braucht Schrift ein helleres Gruen als ein Knopf. */ --karte:#fff; --karte-klar:rgba(255,255,255,0); --gruen-fill:#0d6e5f; --rot-flaeche:#fdecea; --rot-rand:#e8b3a7; /* --auf-tinte: Schrift auf einer Flaeche in Schriftfarbe (Hinweis unten, gewaehlte Belegart, Zahl am Papierkorb) -- im Dunkeln wird die Flaeche hell, die Schrift dunkel. --rot-fill: rote FLAECHE mit weisser Schrift, in beiden gleich kraeftig; --red ist im Dunkeln hell und taugt dort nur als Schrift. */ --auf-tinte:#fff; --rot-fill:#b3402a; /* ---------- Bearbeitungsstand: drei Farben, ueberall dieselben ---------- grau = noch nichts passiert (neu gemeldet, leer stehend, nichts angeboten) beige = in Arbeit (gekuendigt, laeuft aus, unbestaetigt, offen) gruen = erledigt (vermietet, abgeschlossen, bezahlt) Gruen ist das Zetaro-Gruen, nicht irgendein Gruen -- dieselbe Farbe wie Marke und Knoepfe. Vorher erfand jede Stelle ihren eigenen Beige-Ton (sieben verschiedene Hex-Werte fuer dieselbe Aussage), und die Mieteranliegen waren sogar andersherum eingefaerbt als die Vorgaenge: dort hiess gruen "in Arbeit" und gelb "neu". Rot gehoert bewusst NICHT in diese Skala. Es ist eine andere Aussage -- Fehler, ueberfaelliges Geld, ablaufende Frist -- und verliert seine Warnwirkung, sobald es als vierter Bearbeitungsstand mitlaeuft. Wer eine neue Kennzeichnung baut, nimmt eine der drei. */ --st-grau-flaeche:#f1eee7; --st-grau-rand:#d9d2c0; --st-grau-text:#6b6b66; --st-grau-punkt:#b4b0a6; /* Der beige Text war bis zum 07.10.2026 #8a6d1f: auf der beigen Fläche 4,27:1, auf dem Seitengrund 4,30:1 -- knapp unter den 4,5:1, die WCAG 2.2 (1.4.3) für normale Schrift verlangt. Gemessen am Bildschirm, nicht geschätzt. #80651c ergibt 4,82:1 und 4,86:1 und sieht aus wie vorher. Wer die Fläche ändert, misst den Text dazu. */ --st-beige-flaeche:#faeeda; --st-beige-rand:#e8d3a8; --st-beige-text:#80651c; --st-beige-punkt:#c98a12; --st-gruen-flaeche:#e7f1ee; --st-gruen-rand:#bcd8d0; --st-gruen-text:#0d6e5f; --st-gruen-punkt:#0d6e5f; } *{ box-sizing:border-box; } html,body{ margin:0; } html{ font-size:16px; } /* Die Seite selbst scrollt niemals seitwärts. Auf dem Handy hat sich bisher beim Schieben der Reiterleiste die ganze Seite mitbewegt — Überschrift, Karten, alles — statt nur der Leiste. `clip` und nicht `hidden`: `hidden` macht aus dem Element einen Scroll-Container, und damit hört `position:sticky` weiter innen auf zu funktionieren (die erste Tabellenspalte bliebe nicht mehr stehen). `clip` schneidet ab, ohne das zu tun. Damit dabei nichts unerreichbar wird, muss jeder wirklich breite Inhalt seinen eigenen Scroll-Kasten haben — siehe die Liste bei #docList weiter unten und .ptabs. */ html, body{ overflow-x:clip; } body{ font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background:var(--paper); color:var(--ink); line-height:1.55; min-height:100vh; min-height:100dvh; } a{ color:var(--green); } button{ font:inherit; cursor:pointer; } input, select{ font:inherit; } textarea{ font:inherit; resize:vertical; box-sizing:border-box; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--green); outline-offset:2px; } /* `hidden` muss immer stärker sein als jede Klassenregel. Der Browser setzt das Attribut nur mit der Priorität einer Element-Regel auf `display:none` -- **jede Klasse mit eigenem `display` gewinnt dagegen.** Genau daran hing der leere gelbe Balken, den der Inhaber am 13.08.2026 auf jeder Seite sah: `.avv-bar` steht auf `display:flex`, `bar.hidden = true` blieb dadurch wirkungslos, und übrig blieb ein Kasten ohne Inhalt. Deshalb hier einmal zentral statt je Klasse. Ein `!important` ist hier richtig: `hidden` bedeutet „nicht anzeigen", und dagegen soll sich nichts durchsetzen können. */ [hidden]{ display:none !important; } /* ---------- Bausteine ---------- */ .btn{ border:1px solid var(--gruen-fill); background:var(--gruen-fill); color:#fff; border-radius:8px; padding:10px 18px; font-weight:600; } a.btn{ text-decoration:none; } .btn:hover{ filter:brightness(1.06); } .btn:disabled{ opacity:0.55; cursor:default; } /* Ein Druck antwortet sofort, auch bevor die Maske oder Antwort da ist. */ .btn, .linkbtn, .chip-btn{ touch-action:manipulation; } @media (prefers-reduced-motion: no-preference){ .btn, .chip-btn{ transition:transform .08s ease, filter .12s ease; } .btn:active:not(:disabled), .chip-btn:active{ transform:scale(0.97); } } .btn.ghost{ background:transparent; color:var(--green); } .btn.quiet{ border-color:var(--line); background:var(--karte); color:var(--ink); font-weight:500; } .btn.danger{ border-color:var(--red); background:transparent; color:var(--red); } /* Die zweite Stufe neben der Hauptaktion: heller Grund, kein Rahmen. */ .btn.ton{ border-color:transparent; background:var(--green-soft); color:var(--green); } .btn.ton:hover{ filter:none; background:color-mix(in srgb, var(--green) 14%, var(--karte)); } .field{ display:block; margin-bottom:14px; } .field span{ display:block; font-size:0.85rem; color:var(--muted); margin-bottom:4px; } .field input, .field select, .field textarea{ width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--karte); font:inherit; box-sizing:border-box; } .field textarea{ resize:vertical; min-height:70px; } .search-input{ display:block; width:100%; max-width:320px; padding:9px 12px; margin:0 0 12px; border:1px solid var(--line); border-radius:8px; background:var(--karte); font:inherit; } .msg{ border-radius:8px; padding:10px 14px; font-size:1rem; margin:12px 0; display:none; } .msg.err{ background:var(--rot-flaeche); color:var(--red); border:1px solid var(--rot-rand); } .msg.ok{ background:var(--green-soft); color:var(--green); border:1px solid var(--st-gruen-rand); } .chip{ display:inline-block; font-size:0.75rem; font-weight:600; letter-spacing:0.02em; background:var(--green-soft); color:var(--green); border-radius:999px; padding:2px 10px; } /* ---------- Der dritte Zustand: „weiss noch nicht" ---------- ⚠️ Bis zum 22.08.2026 gab es nur zwei Zustaende: Anmeldemaske oder App. Beim Laden war die ANMELDEMASKE sichtbar, und erst wenn supabase-js vom CDN da war UND getSession() geantwortet hatte, wurde umgeschaltet. Wer angemeldet war, sah also bei JEDEM Neuladen erst das Anmeldeformular aufblitzen -- gemeldet als „es haengt kurz und dann laedt die Seite". Der Ladezustand ist bewusst fast leer: nur die Wortmarke. Ein Spinner behauptet Arbeit, wo meist nur ein Lesevorgang aus dem localStorage stattfindet; sichtbar wird er nur, wenn es wirklich dauert (Einblendung mit Verzoegerung). */ #bootView{ min-height:100vh; display:grid; place-items:center; background:var(--bg); gap:10px; align-content:center; } #bootView .wordmark{ font-size:1.6rem; } #bootView .boot-hinweis{ color:var(--muted); font-size:0.9rem; opacity:0; animation:bootEin .3s ease 1.2s forwards; } @keyframes bootEin{ to{ opacity:1; } } @media (prefers-reduced-motion: reduce){ #bootView .boot-hinweis{ animation:none; opacity:1; } } /* Die Anmeldemaske startet versteckt und wird von render() gezeigt. Ohne JavaScript bliebe sonst nur der Ladezustand stehen -- dagegen das