/* Farben an einer Stelle — dieselbe Umstellung wie in styles.css. Im hellen Modus behaelt jede Farbe GENAU ihren Wert; nachgemessen mit npm run optik, null abweichende Pixel. */ /* LotseDesign – Schritt 1 des Umzugs: Hülle, Navigation, Arbeitsübersicht. * * Bewusst als eigene Ebene über styles.css gelegt, nicht hineingeschrieben: * so bleibt der alte Stand unverändert und jeder Schritt ist einzeln rückgängig * zu machen. Die Bildschirme, die noch nicht umgezogen sind, sehen weiterhin aus * wie bisher – sie brechen nicht. * * Schritt 1: Seitenleiste, Kopfzeile, Arbeitsübersicht, Karten und Knöpfe. * Schritt 2: die beiden Listenbildschirme „Zu entscheiden“ und „Meine Arbeit“. * Noch nicht umgezogen: Kalender, Dialoge, Kindermitarbeit, Finanzen, Inventar, * Sicherheit, Editor. */ :root{ /* Farben */ /* ── Ein Name, eine Rolle ──────────────────────────────────────────── --lotse-ink trug bis zum 18.08.2026 ZWEI Rollen: die Schriftfarbe der Ueberschriften (18 Stellen) und zugleich die dunkle Markenflaeche der Seitenleiste und zweier Kennzeichen (3 Stellen). Im hellen Modus faellt das nicht auf — dunkle Schrift und dunkle Flaeche sind derselbe Wert. Im Dunkelmodus zerfaellt es: die Schrift muss hell werden, die Markenflaeche dunkel bleiben. Der erste Versuch, nur den Wert zu heben, machte prompt die Seitenleiste weiss und die Menuepunkte unlesbar — gesehen im Bild, nicht in einer Pruefung. Deshalb jetzt zwei Namen. 21.08.2026 · Der zweite Schritt derselben Trennung. Die Ueberschrift zeigte weiter auf --k-a01, den tiefen Markenton (#123b46, Saettigung 0,60). Damit war JEDE Ueberschrift auf JEDER Flaeche petrolfarben — nicht als Akzent gesetzt, sondern weil der Zeiger noch aus der Zeit stammte, in der Schrift und Markenflaeche EIN Wert waren. Gemessen ueber sechs Flaechen: 38-90 % aller farbigen Bildpunkte lagen im Bereich 140-210 Grad. Die Ueberschrift zeigt jetzt auf die Schriftfarbe. --lotse-marke behaelt den Markenton; Seitenleiste, Kennzeichen und Akzent sind unberuehrt. */ --lotse-ink:var(--k-t01); --lotse-marke:var(--k-a01); --lotse-teal:var(--k-a02); --lotse-teal-2:var(--k-a03); --lotse-gold:var(--k-a04); --lotse-text:var(--k-t01); --lotse-text-2:var(--k-t02); --lotse-text-3:var(--k-t03); --lotse-flaeche:var(--k-f01); --lotse-flaeche-2:var(--k-f02); --lotse-flaeche-3:var(--k-f03); --lotse-linie:var(--k-l01); --lotse-linie-2:var(--k-l02); --lotse-akzent-weich:var(--k-a05); --lotse-akzent-text:var(--k-a06); /* Radien: eigene Skala */ --r1:12px; --r2:18px; --r3:26px; --r4:34px; /* eine einzige Bewegungskurve */ --lotse-ease:cubic-bezier(.3,.7,.2,1); /* Schatten: Ebenen, keine Rahmen */ /* 21.08.2026 · Die drei Schatten waren rgba(18,59,70) — das ist #123b46, der tiefe Markenton. Jede Karte auf jeder Flaeche warf damit einen gruenen Schatten. Ein Schatten ist Abwesenheit von Licht und traegt keine Marke. Jetzt neutral, Deckkraft unveraendert. */ --sh-1:0 1px 2px rgba(23,32,38,.05); --sh-2:0 6px 20px rgba(23,32,38,.07); --sh-3:0 16px 44px rgba(23,32,38,.11); } body{ background:linear-gradient(150deg,var(--k-f04) 0%,var(--k-f05) 48%,var(--k-f06) 100%); color:var(--lotse-text); } /* Eine Regel mit `display` schlaegt das hidden-Attribut. Genau daran sind drei Stellen unbemerkt sichtbar geblieben, die verborgen sein sollten: die Serienfrage am Einzeltermin, die Blaetter-Leiste in der Listenansicht und die Terminliste in der Monatsansicht. Aufgefallen ist das im Bildbeleg, nicht im Test – die Pruefungen sahen nur das Attribut, nicht die Sichtbarkeit. Beides ist jetzt nachgezogen. */ [hidden]{ display:none !important; } /* ─── Seitenleiste ──────────────────────────────────────────────────────── * * 21.08.2026 · PO-Klarstellung zum Designrest. * * Gemessen am Stand 1b2aeae: die Leiste war 16,8 % des Bildes und davon * 95,6 % dunkler als 35 % Helligkeit — die Inhaltsflaeche daneben zu 99,2 % * hell. Der Eindruck „im Hellmodus insgesamt zu dunkel" sass praktisch * vollstaendig hier. * * Sie wird deshalb im Hellmodus eine HELLE Flaeche. Ein Mittelton war die * naheliegende Zwischenloesung und ist verworfen: eine Leiste muss sich fuer * eine Seite entscheiden, sonst reicht der Kontrast weder fuer helle noch * fuer dunkle Schrift. Die Marke bleibt — sie sitzt jetzt dort, wo sie * gelesen wird: im Wortzeichen und im aktiven Menuepunkt, statt in einer * ganzflaechigen Tapete. * * ALLE Werte kommen aus bestehenden Tokens. Weil die Tokens mit dem * Farbmodus umschlagen, waere die Leiste im Dunkelmodus sonst mit- * umgeschlagen; damit dort NICHTS kippt, sind die Dunkelwerte im NACHTRAG * von werkzeuge/farbe/dunkelsatz.mjs festgehalten — dem vorgesehenen Ort * (FM-09: eine von Hand ins Stilblatt geschriebene Farbe verliert man beim * naechsten Werkzeuglauf). * * `.sidebar` traegt in styles.css `color:white`. Ohne die Zeile unten waere * auf der hellen Leiste weisse Schrift auf weissem Grund gestanden — * genau das, was eine Aufhellung „nur am Hintergrund" kaputt macht. */ .sidebar{ background:var(--k-f07); border-right:1px solid var(--k-l05); color:var(--lotse-ink); padding:20px 14px; gap:18px; } .brand-block strong{ font-family:Georgia,"Times New Roman",serif; font-size:20px; letter-spacing:-.01em; color:var(--lotse-teal-2); } .brand-block span{ color:var(--k-t25); } .brand-logo-frame{ border-radius:15px; background:var(--k-f08); box-shadow:inset 0 0 0 1px var(--lotse-linie); } .nav-group-title{ color:var(--k-t25); } .nav-list{ gap:4px; } .nav-item{ border-radius:var(--r1); padding:10px 12px; gap:12px; font-size:14px; font-weight:600; color:var(--lotse-ink); transition:background .18s var(--lotse-ease),color .18s var(--lotse-ease); } .nav-item:hover{ background:var(--lotse-flaeche); color:var(--lotse-ink); } /* Der aktive Punkt traegt die Marke: weiche Akzentflaeche, Akzentschrift. Er unterscheidet sich damit nicht nur in der Helligkeit vom Hover, sondern in der Farbe — auf eine Stufe Helligkeit allein waere kein Verlass. Fettung bleibt als zweites, farbunabhaengiges Merkmal. */ .nav-item.active{ background:var(--lotse-akzent-weich); color:var(--lotse-akzent-text); font-weight:700; } .nav-glyph{ width:26px; height:26px; border-radius:9px; background:var(--lotse-linie-2); color:var(--lotse-text-2); font-size:10px; font-weight:800; letter-spacing:.02em; } .nav-item.active .nav-glyph{ background:var(--lotse-gold); color:var(--k-t06); } .sidebar-fuss{ color:var(--k-t25); } /* Arbeitsbereich gehört in die Seitenleiste, nicht in den Arbeitsbildschirm */ .bereichswahl{ background:var(--k-f01); border:1px solid var(--lotse-linie); border-radius:var(--r1); padding:10px 12px; } .bereichswahl > label{ display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--lotse-text-3); font-weight:800; margin-bottom:5px; } .bereichswahl select{ width:100%; border:0; background:transparent; color:var(--lotse-ink); font-size:14px; font-weight:650; padding:2px 0; cursor:pointer; } .bereichswahl select option{ color:var(--k-t01); } .bereichswahl .nurfeld{ display:block; gap:0; } .bereichswahl-knopf{ color:var(--lotse-ink); border-color:var(--k-l05); } .bereichswahl-knopf:hover{ background:var(--lotse-flaeche-2); color:var(--lotse-ink); } .sidebar-note{ border-radius:var(--r2); background:var(--k-f01); border-color:var(--lotse-linie); } .sidebar-note p{ color:var(--lotse-text-2); } /* ─── Kopfzeile ─── */ .topbar{ gap:14px; margin-bottom:18px; } .eyebrow{ color:var(--lotse-text-3); letter-spacing:.1em; } .context-path{ font-size:14.5px; font-weight:700; color:var(--lotse-ink); } .primary-button,.secondary-button,.ghost-button,.danger-button{ border-radius:999px; padding:10px 17px; font-weight:650; font-size:14px; transition:transform .15s var(--lotse-ease), box-shadow .15s var(--lotse-ease); } .primary-button{ background:var(--lotse-teal); box-shadow:0 6px 16px rgba(13,119,107,.24); } .primary-button:active,.secondary-button:active,.ghost-button:active{ transform:scale(.96); } .secondary-button{ background:var(--lotse-akzent-weich); color:var(--lotse-akzent-text); border-color:transparent; } .ghost-button{ border:1px solid var(--lotse-linie); color:var(--lotse-text-2); background:transparent; } .angemeldet{ background:var(--lotse-akzent-weich); border-color:transparent; color:var(--lotse-akzent-text); } /* ─── Flächen ─── */ .panel,.context-panel,.metric,.dashboard-card,.diagnostics-panel{ border-radius:var(--r3); border:0; box-shadow:var(--sh-2); background:var(--lotse-flaeche); } .context-panel{ padding:22px 26px; margin-bottom:18px; } .context-panel h1{ font-family:Georgia,"Times New Roman",serif; font-size:30px; color:var(--lotse-ink); letter-spacing:-.3px; } .context-panel p{ color:var(--lotse-text-2); font-size:14.5px; max-width:760px; } .panel h2{ font-family:Georgia,"Times New Roman",serif; font-size:22px; color:var(--lotse-ink); } /* Die Leitkarte trägt die Frage, um die es geht */ .dashboard-hero{ position:relative; overflow:hidden; box-shadow:var(--sh-3); border-radius:var(--r4); } .dashboard-hero::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg,var(--lotse-teal),var(--lotse-gold)); } .dashboard-hero h2{ font-size:25px; } .dashboard-card{ background:var(--lotse-flaeche-2); border:1px solid var(--lotse-linie-2); border-radius:var(--r2); transition:transform .16s var(--lotse-ease), box-shadow .16s var(--lotse-ease); } .dashboard-card:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); } .dashboard-kicker{ font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--lotse-text-3); } .metric{ border-radius:var(--r3); border:0; box-shadow:var(--sh-1); } .metric strong{ font-family:Georgia,"Times New Roman",serif; color:var(--lotse-teal-2); } /* Zustände über Farbe *und* Form, nie über Farbe allein */ .status-chip{ border-radius:999px; font-weight:800; font-size:11px; } .status-chip.allow{ background:var(--k-f09); color:var(--k-t08); } .status-chip.deny{ background:var(--k-f10); color:var(--k-t09); } .class-chip{ border-radius:999px; } /* ═══════════════════════════════════════════════════════════════════ Schritt 2 des Umzugs: die beiden Listenbildschirme „Zu entscheiden“ (.ac-shell) und „Meine Arbeit“ (#myWorkSurface). Leitgedanke: eine Liste ist kein Formular. Jede Zeile beantwortet in dieser Reihenfolge drei Fragen – Was ist es? Worum geht es? Was tue ich jetzt? Der Zustand steht nie nur in der Farbe, sondern immer zusätzlich in einer Form: Randbalken links, Wortmarke im Chip. ═══════════════════════════════════════════════════════════════════ */ /* ─── Gemeinsame Zeilengestalt ─── */ .action-card,.work-item{ position:relative; border:0; border-radius:var(--r2); background:var(--lotse-flaeche); box-shadow:var(--sh-1); padding:14px 16px 14px 20px; transition:box-shadow .18s var(--lotse-ease), transform .18s var(--lotse-ease); } .action-card:hover,.work-item:hover{ box-shadow:var(--sh-2); } /* Der Balken ist die Form, die den Zustand trägt. Ohne Zustand: ruhig. */ .action-card::before,.work-item::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:4px; border-radius:0 4px 4px 0; background:var(--lotse-linie); } .action-card-list,.task-rail-list,.work-list{ gap:9px; } /* ─── Zustände: Farbe *und* Balkenhöhe *und* Wort ─── */ .action-card[data-need="OVERDUE"]::before,.work-item.overdue::before{ background:var(--k-f11); top:0; bottom:0; /* voller Balken = dringend */ } .action-card[data-need="DECISION_REQUIRED"]::before{ background:var(--lotse-gold); top:6px; bottom:6px; } .action-card[data-need="WORK_REQUIRED"]::before{ background:var(--lotse-teal); } .action-card[data-need="UPCOMING"]::before{ background:var(--lotse-linie); top:20px; bottom:20px; } .action-need{ border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.01em; padding:6px 11px; background:var(--lotse-flaeche-3); color:var(--lotse-text-2); } .action-card[data-need="OVERDUE"] .action-need{ background:var(--k-f10); color:var(--k-t09); } .action-card[data-need="DECISION_REQUIRED"] .action-need{ background:var(--k-f12); color:var(--k-t10); } .action-card[data-need="WORK_REQUIRED"] .action-need{ background:var(--lotse-akzent-weich); color:var(--lotse-akzent-text); } /* ─── Textspalte ─── */ .action-main strong,.work-main strong{ font-size:15px; font-weight:700; color:var(--lotse-ink); line-height:1.35; } .action-main span,.work-main span{ font-size:12.5px; color:var(--lotse-text-2); } /* ─── Typmarke in „Meine Arbeit“ ─── */ .work-item{ padding-left:18px; } .work-type{ width:38px; height:38px; border-radius:var(--r1); border:0; background:var(--lotse-akzent-weich); color:var(--lotse-akzent-text); font-size:11px; font-weight:850; box-shadow:none; } .work-item.overdue{ background:var(--k-f13); } .work-item.overdue .work-type{ background:var(--k-f10); color:var(--k-t09); } /* ─── Knöpfe in der Zeile ─── */ .quick-actions{ display:flex; gap:8px; flex-wrap:wrap; } .quick-action{ border:0; border-radius:999px; padding:9px 14px; cursor:pointer; background:var(--lotse-akzent-weich); color:var(--lotse-akzent-text); font-size:12.5px; font-weight:750; transition:background .15s var(--lotse-ease), transform .15s var(--lotse-ease); } .quick-action:hover{ background:var(--k-f14); } .quick-action:active{ transform:scale(.96); } /* ─── „Zu entscheiden“: Hauptliste und Prioritätsspalte ─── */ .ac-shell{ gap:18px; } .compact-filter{ color:var(--lotse-text-3); } .compact-filter select{ border-radius:999px; padding:8px 14px; background:var(--lotse-flaeche-2); } .projection-note{ color:var(--lotse-text-2); font-size:13px; margin:-2px 0 16px; max-width:70ch; } .task-rail{ background:var(--lotse-flaeche-2); box-shadow:none; } .task-rail .action-card{ background:var(--lotse-flaeche); box-shadow:var(--sh-1); } /* ─── „Meine Arbeit“: Gruppen ─── */ .my-work-groups{ gap:22px; } .my-work-group h3{ font-family:Georgia,"Times New Roman",serif; font-size:15px; font-weight:400; color:var(--lotse-teal-2); margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid var(--lotse-linie-2); } .my-work-resume{ margin-bottom:18px; } .dialog-note{ border-radius:var(--r2); border:0; background:var(--lotse-flaeche-2); color:var(--lotse-text-2); padding:14px 16px; font-size:13px; } /* ─── Kleine Bildschirme: die Zeile bricht um, sie schrumpft nicht ─── */ @media(max-width:720px){ .action-card,.work-item{ padding:14px 14px 14px 18px; gap:10px; } .action-card .action-need{ justify-self:start; } .work-item .secondary-button,.quick-action{ min-height:44px; } /* Daumenziel */ .quick-actions{ width:100%; } .quick-action{ flex:1 1 auto; text-align:center; } .my-work-group h3{ font-size:14px; } } /* ═══════════════════════════════════════════════════════════════════ Schritt 3 des Umzugs: der Kalender. Ein Kalender wird über das Datum gelesen. Deshalb trägt jede Zeile links eine Datumsmarke – Wochentag, Tag, Monat – und erst danach den Titel. Vergangene Termine treten zurück, ohne zu verschwinden. ═══════════════════════════════════════════════════════════════════ */ .calendar-surface .panel-head{ margin-bottom:16px; } .calendar-list{ gap:9px; } .calendar-item{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; border:0; border-radius:var(--r2); background:var(--lotse-flaeche); box-shadow:var(--sh-1); padding:12px 16px 12px 12px; transition:box-shadow .18s var(--lotse-ease); } .calendar-item:hover{ box-shadow:var(--sh-2); } .kal-datum{ display:grid; justify-items:center; align-content:center; gap:0; width:58px; min-height:58px; padding:7px 6px; border-radius:var(--r1); background:var(--lotse-akzent-weich); color:var(--lotse-akzent-text); line-height:1.1; } .kal-wochentag{ font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; opacity:.8; } .kal-tag{ font-family:Georgia,"Times New Roman",serif; font-size:23px; font-weight:400; } .kal-monat{ font-size:10.5px; font-weight:750; letter-spacing:.04em; } /* ─── K-1: Tagesgruppen ─── Die Zwischenüberschrift ist ein Datum, kein Titel: leise gesetzt, aber klar abgegrenzt. Beim Scrollen bleibt sie stehen, damit man nie raten muss, welchen Tag man gerade liest. */ .kal-tagesgruppe{ position:sticky; top:0; z-index:2; margin:20px 0 9px; padding:7px 2px 7px 0; font-family:Georgia,"Times New Roman",serif; font-size:14.5px; font-weight:400; color:var(--lotse-teal-2); letter-spacing:.01em; background:linear-gradient(var(--lotse-flaeche) 78%, rgba(255,255,255,0)); } .kal-tagesgruppe:first-child{ margin-top:0; } /* ─── K-1: Überschneidung ─── Warnung, kein Verbot. Sie steht in Farbe, in Form (Randbalken) und im Wort – wer Farben nicht unterscheidet, verliert nichts. */ .calendar-item[data-ueberschneidung]{ padding-left:16px; box-shadow:var(--sh-1), inset 4px 0 0 var(--k-a07); } .kal-warnung{ display:block; margin-top:5px; font-size:12px; font-weight:650; color:var(--k-t10); } .status-chip.warnung{ background:var(--k-f12); color:var(--k-t10); } .calendar-item[data-vergangen][data-ueberschneidung]{ box-shadow:inset 4px 0 0 var(--k-a08); } .calendar-item[data-vergangen] .kal-warnung{ color:var(--lotse-text-2); font-weight:600; } /* ═══ K-5: Woche und Monat ═══ Dieselben Termine, andere Leserichtung. Auf dem Desktop steht in jeder Zelle, was los ist; auf dem Telefon nur die Anzahl – ein Monatsraster mit Titeln wäre dort die „Mega-Tabelle", die es nicht geben soll. */ .kal-ansicht{ display:inline-flex; padding:3px; gap:2px; border-radius:999px; background:var(--lotse-flaeche-3); } .kal-ansicht-knopf{ border:0; background:transparent; cursor:pointer; border-radius:999px; padding:8px 15px; font-size:13px; font-weight:700; color:var(--lotse-text-2); min-height:40px; transition:background .15s var(--lotse-ease), color .15s var(--lotse-ease); } .kal-ansicht-knopf.active{ background:var(--lotse-flaeche); color:var(--lotse-akzent-text); box-shadow:var(--sh-1); } .kal-steuerung{ display:flex; align-items:center; gap:10px; margin:0 0 14px; } .kal-steuerung strong{ font-family:Georgia,"Times New Roman",serif; font-size:18px; font-weight:400; color:var(--lotse-ink); min-width:190px; } .kal-steuerung .ghost-button{ min-width:44px; min-height:44px; font-size:20px; line-height:1; padding:0 12px; } .kal-raster{ border-radius:var(--r2); overflow:hidden; background:var(--lotse-flaeche); box-shadow:var(--sh-1); } .kal-kopfzeile,.kal-felder{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); } .kal-kopf{ padding:10px 8px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--lotse-text-3); text-align:center; background:var(--lotse-flaeche-2); } .kal-zelle{ position:relative; min-height:112px; padding:8px 8px 10px; cursor:pointer; border-top:1px solid var(--lotse-linie-2); border-right:1px solid var(--lotse-linie-2); transition:background .15s var(--lotse-ease); } .kal-zelle:nth-child(7n){ border-right:0; } .kal-zelle:hover{ background:var(--lotse-flaeche-2); } .kal-zelle.fremd{ background:var(--lotse-flaeche-2); } .kal-zelle.fremd .kal-zelle-tag{ color:var(--lotse-text-3); } .kal-zelle-tag{ font-family:Georgia,"Times New Roman",serif; font-size:15px; color:var(--lotse-ink); } .kal-zelle[data-heute] .kal-zelle-tag{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--lotse-teal); color:var(--k-t05); font-size:13px; } .kal-zelle-zahl{ display:none; } .kal-zelle-liste{ display:grid; gap:3px; margin-top:6px; } .kal-zelle-termin{ /* 19.08.2026 · war --lotse-text-2 und traf auf der weichen Akzentflaeche nur 4,46:1. Die Foundationwerte selbst bleiben unangetastet; hier steht die kraeftigere Textrolle, weil der Eintrag im Kalender gelesen werden muss und keine Nebenbemerkung ist. */ display:block; font-size:11.5px; line-height:1.35; color:var(--lotse-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:3px 6px; border-radius:7px; background:var(--lotse-akzent-weich); } .kal-zelle-termin b{ color:var(--lotse-akzent-text); font-weight:800; } .kal-zelle-termin.entfaellt{ background:var(--lotse-flaeche-3); color:var(--lotse-text-3); text-decoration:line-through; } .kal-zelle-mehr{ font-size:11px; font-weight:750; color:var(--lotse-text-3); padding-left:6px; } @media(max-width:900px){ .kal-zelle{ min-height:92px; } .kal-zelle-termin{ font-size:11px; } } @media(max-width:720px){ /* Mobil: nur Tag und Anzahl. Antippen führt in die Liste des Tages. */ .kal-zelle{ min-height:60px; padding:7px 4px; text-align:center; } .kal-zelle-liste{ display:none; } .kal-zelle-zahl{ display:inline-grid; place-items:center; min-width:20px; height:20px; margin-top:5px; border-radius:999px; background:var(--lotse-akzent-weich); color:var(--lotse-akzent-text); font-size:11px; font-weight:800; padding:0 6px; } .kal-zelle-zahl:empty{ display:none; } .kal-steuerung{ flex-wrap:wrap; } .kal-steuerung strong{ order:-1; flex:1 1 100%; min-width:0; font-size:17px; } .kal-ansicht{ width:100%; } .kal-ansicht-knopf{ flex:1; } .panel-actions{ width:100%; } } /* ─── K-2/K-3: Serien im Kalender ─── Ein Serientermin sagt, dass er zu einer Serie gehört, und in welchem Rhythmus. Ein abgesagter Termin verschwindet nicht – er wird durchgestrichen und nennt den Grund. Sonst ruft am Sonntag jemand an. */ .kal-serie{ display:inline-block; justify-self:start; margin-top:2px; font-size:11.5px; font-weight:750; padding:3px 9px; border-radius:999px; background:var(--lotse-flaeche-3); color:var(--lotse-text-2); } .kal-entfaellt{ display:block; margin-top:5px; font-size:12px; font-weight:700; color:var(--k-t09); } .calendar-item[data-entfaellt] .kal-text strong{ text-decoration:line-through; text-decoration-thickness:1.5px; color:var(--lotse-text-2); } .calendar-item[data-entfaellt]{ background:var(--lotse-flaeche-2); box-shadow:none; } .calendar-item[data-entfaellt] .kal-datum{ background:var(--lotse-flaeche-3); color:var(--lotse-text-3); } .kal-serienknopf{ white-space:nowrap; border-radius:999px; padding:9px 14px; min-height:40px; } /* Das Serienfenster: eine Liste zum Ankreuzen, darunter drei klare Wege. */ .serien-panel{ margin-top:18px; padding:20px; border-radius:var(--r3); background:var(--lotse-flaeche-2); box-shadow:var(--sh-1); } .serien-panel h3{ font-family:Georgia,"Times New Roman",serif; font-size:19px; color:var(--lotse-ink); margin:0; font-weight:400; } .serien-liste{ display:grid; gap:2px; margin:12px 0 16px; max-height:340px; overflow:auto; } .serien-zeile{ display:flex; align-items:center; gap:11px; padding:10px 12px; min-height:44px; border-radius:var(--r1); background:var(--lotse-flaeche); font-size:14px; font-weight:500; color:var(--lotse-text); cursor:pointer; } .serien-zeile:hover{ background:var(--k-t05); box-shadow:var(--sh-1); } .serien-zeile input{ width:19px; height:19px; flex:0 0 19px; accent-color:var(--lotse-teal); } .serien-zeile.entfaellt{ color:var(--lotse-text-3); text-decoration:line-through; } .serien-grund{ display:block; margin-bottom:14px; } .serien-grund span{ display:block; margin-bottom:6px; } .serien-aktionen{ display:flex; gap:10px; flex-wrap:wrap; } .serien-aktionen button{ min-height:44px; } @media(max-width:720px){ .serien-aktionen{ display:grid; } .serien-aktionen button{ width:100%; } .kal-serienknopf{ grid-column:2; justify-self:start; } } /* Vergangenes tritt zurück, ohne zu verschwinden: gedämpfte Marke, ruhigerer Titel – aber weiterhin voll lesbar und anklickbar. */ .calendar-item[data-vergangen]{ background:var(--lotse-flaeche-2); box-shadow:none; } .calendar-item[data-vergangen] .kal-datum{ background:var(--lotse-flaeche-3); color:var(--lotse-text-2); } .calendar-item[data-vergangen] .kal-text strong{ color:var(--lotse-text-2); font-weight:600; } .kal-text{ min-width:0; display:grid; gap:3px; } .kal-text strong{ font-size:15px; font-weight:700; color:var(--lotse-ink); } .kal-text span{ font-size:12.5px; color:var(--lotse-text-2); } /* Kleine Bildschirme: die Datumsmarke bleibt, der Rest bricht darunter um. */ @media(max-width:720px){ .calendar-item{ grid-template-columns:auto minmax(0,1fr); gap:6px 13px; align-items:start; padding:12px; } .kal-datum{ grid-row:1 / span 2; } /* Marke trägt beide Zeilen */ .calendar-item .status-chip{ grid-column:2; justify-self:start; } .kal-datum{ width:52px; min-height:52px; } .kal-tag{ font-size:21px; } .calendar-surface .panel-head{ flex-wrap:wrap; } .calendar-surface .panel-head button{ width:100%; min-height:44px; } } /* Felder */ select,input,textarea{ border-radius:var(--r1); border:1px solid var(--lotse-linie); background:var(--lotse-flaeche-2); transition:border-color .15s var(--lotse-ease), box-shadow .15s var(--lotse-ease); } select:focus,input:focus,textarea:focus{ border-color:var(--lotse-teal); box-shadow:0 0 0 4px rgba(13,119,107,.14); } label{ color:var(--lotse-text-2); } :focus-visible{ outline:3px solid rgba(13,119,107,.45); outline-offset:2px; } /* Bewegung nur, wo sie hilft – und gar nicht, wenn sie stört */ @media (prefers-reduced-motion:reduce){ *{ transition-duration:.01ms !important; animation-duration:.01ms !important; } } /* ─── Kleine Bildschirme: echte Anpassung, keine Verkleinerung ─── */ @media(max-width:900px){ .bereichswahl{ order:-1; } } @media(max-width:720px){ /* Dieselbe Aufhellung auf dem Telefon: die untere Leiste ist dieselbe Navigation, nur gedreht. Sie bekommt die Flaeche der Foundation und eine Kante nach oben statt eines dunklen Balkens. */ .sidebar{ background:var(--k-f07); backdrop-filter:blur(18px); border-right:0; border-top:1px solid var(--k-l05); height:auto; padding:9px 10px 10px; } /* Korrektur zu Schritt 1: der Arbeitsbereich war auf dem Smartphone ausgeblendet – und damit gar nicht mehr wählbar. Er steht jetzt als erste Zeile über der unteren Leiste, in Daumenreichweite. */ .bereichswahl{ display:block; margin:0 0 8px; padding:0; border:0; background:transparent; } .bereichswahl > label{ display:none; } .bereichswahl select{ min-height:42px; font-size:14px; } .main-content{ padding-bottom:170px; } /* Die untere Leiste ist eine Spalte: Bereich oben, dann die Wege. Neun Wege passen nicht nebeneinander auf ein Telefon – also stehen sie in einer wischbaren Zeile statt in einem Raster, in dem die Wörter mittendrin umbrechen. */ .sidebar{ display:flex; flex-direction:column; gap:0; } .bereichswahl{ order:-1; } .nav-list{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:2px 0 4px; scroll-snap-type:x proximity; } .nav-list::-webkit-scrollbar{ display:none; } .nav-item,.nav-item.active{ flex:0 0 auto; display:flex; flex-direction:row; align-items:center; gap:0; white-space:nowrap; padding:10px 14px; min-height:44px; font-size:12.5px; border-radius:999px; justify-items:start; scroll-snap-align:start; } .nav-glyph{ display:none; } /* die laufende Nummer hilft mobil nicht */ /* E-11 · die Gruppen aus der Seitenleiste haben in der wischbaren Zeile keinen Platz. `display:contents` laesst die Knoepfe wieder direkte Kinder der Zeile werden, damit sie sich verhalten wie vorher — die Reihenfolge bleibt dieselbe, nur die Ueberschriften fallen weg. `[hidden]` ausdruecklich: `display:contents` schlaegt sonst das Ausblenden des Browsers, und eine ausgeblendete Gruppe stuende hier weiter da. */ .nav-group{ display:contents; } .nav-group[hidden]{ display:none; } .nav-group-title{ display:none; } /* BEFUND vom 20.08.2026 (V-6, PO-Frage 6 D): die untere Leiste war rechts abgeschnitten. Nachgezaehlt ist es schlimmer als es aussah: SECHZEHN Navigationspunkte in einem Raster mit sechs Spalten ergeben drei Zeilen — und die Leiste ist 70 px hoch. Sichtbar war die erste Zeile. ZEHN Ziele waren auf dem Telefon nicht erreichbar, nicht nur unschoen beschnitten. Statt Ziele zu verstecken oder die Leiste wachsen zu lassen: eine Zeile, die man schiebt. Alles bleibt erreichbar, die Hoehe bleibt, und die Beschriftung wird nicht mehr mitten im Wort abgeschnitten. */ .nav-list{ display:flex; grid-template-columns:none; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .nav-list::-webkit-scrollbar{ display:none; } .nav-item, .nav-item.active{ flex:0 0 auto; min-width:76px; scroll-snap-align:start; white-space:nowrap; } /* Kopfzeile: der Pfad bleibt einzeilig, die Knöpfe rutschen darunter, statt sich zu überlagern. */ .topbar{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; margin-bottom:14px; } .topbar-context{ min-width:0; } .context-path{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .topbar-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .topbar-actions .angemeldet{ order:-1; flex:1 1 100%; font-size:12px; } .topbar-actions button{ flex:1 1 auto; min-height:44px; padding:10px 12px; font-size:13px; } .context-panel{ padding:18px; } .context-panel h1{ font-size:24px; } } /* ─── Quellen (U-1) ─────────────────────────────────────────────────────── Die Reihenfolge im Bild ist die Reihenfolge im Kopf: erst die Datei, dann was die Anwendung vermutet, dann die Entscheidung des Menschen. Der Zustand steht als Wort da, nicht nur als Farbe. */ .quellen-ablage{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto; gap:12px; align-items:end; margin-bottom:18px; } .quellen-ablage .subtle-status{ grid-column:1/-1; margin:0; } .quellen-feld{ display:block; min-width:0; } .quellen-feld span{ display:block; margin-bottom:6px; } .quellen-ablage button{ min-height:44px; } .quellen-datei{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; cursor:pointer; } /* Das echte Feld bleibt bedienbar, es sieht nur nicht mehr englisch aus. */ .quellen-datei input[type=file]{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0); } .quellen-datei-knopf{ display:inline-flex; align-items:center; min-height:44px; padding:10px 16px; border-radius:var(--r1); background:var(--lotse-akzent-weich); color:var(--lotse-akzent-text); font-size:13.5px; font-weight:700; white-space:nowrap; } .quellen-datei input[type=file]:focus-visible + .quellen-datei-knopf{ outline:2px solid var(--lotse-teal); outline-offset:2px; } .quellen-datei-name{ font-size:13px; font-weight:500; color:var(--lotse-text-2); min-width:0; overflow:hidden; text-overflow:ellipsis; } .quellen-liste{ display:grid; gap:8px; } .quellen-zeile{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; padding:14px 16px; border-radius:var(--r2); background:var(--lotse-flaeche); box-shadow:var(--sh-1); } /* Zustand über Form UND Wort, nicht über Farbe allein. */ .quellen-zeile.offen{ border-left:4px solid var(--k-t10); } /* wie .status-chip.warnung */ .quellen-zeile.frei{ border-left:4px solid var(--lotse-teal); } .quellen-zeile.gesperrt{ border-left:4px solid var(--k-t09); background:var(--lotse-flaeche-2); } /* wie .status-chip.deny */ .quellen-haupt{ min-width:0; } .quellen-haupt strong{ display:block; font-size:15px; color:var(--lotse-ink); overflow:hidden; text-overflow:ellipsis; } .quellen-haupt span{ display:block; font-size:12.5px; color:var(--lotse-text-2); margin-top:3px; } .quellen-recht{ font-weight:600; } .quellen-zustand{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; } .quellen-zustand .zustand-wort{ font-size:12.5px; font-weight:650; color:var(--lotse-text-2); } .quellen-zustand button{ min-height:44px; } .quellen-freigabe{ margin-top:18px; padding:20px; border-radius:var(--r3); background:var(--lotse-flaeche-2); box-shadow:var(--sh-1); } .quellen-freigabe h3{ font-family:Georgia,"Times New Roman",serif; font-size:19px; color:var(--lotse-ink); margin:0; font-weight:400; } .quellen-formular{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:14px 0 16px; } .quellen-aktionen{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .quellen-aktionen button{ min-height:44px; } /* Tablet: die Ablage darf nicht dreispaltig zerbrechen. */ @media(max-width:1050px){ .quellen-ablage{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .quellen-ablage button{ grid-column:1/-1; } } /* Telefon: alles untereinander, Knöpfe in Daumenbreite. */ @media(max-width:720px){ .quellen-ablage{ grid-template-columns:1fr; } .quellen-ablage button{ width:100%; } .quellen-formular{ grid-template-columns:1fr; } .quellen-zeile{ grid-template-columns:1fr; } .quellen-zustand{ justify-content:flex-start; } .quellen-zustand button{ width:100%; } .quellen-aktionen{ display:grid; } .quellen-aktionen button{ width:100%; } } @media(max-width:430px){ .quellen-freigabe{ padding:16px; } .quellen-freigabe .panel-head{ display:grid; grid-template-columns:1fr; } .quellen-freigabe .panel-head button{ width:100%; } } /* ─── Räume am Termin (K-4) ──────────────────────────────────────────────── Der Raum steht als Wort in der Terminzeile, die Doppelbelegung ebenfalls. Farbe allein trägt hier nichts – wer sie nicht unterscheidet, muss die Warnung trotzdem lesen können. */ .kal-raum{ display:block; font-size:12.5px; color:var(--lotse-text-2); margin-top:3px; } .kal-raum-konflikt{ font-weight:700; color:var(--k-t10); } .calendar-item[data-raumkonflikt] .kal-datum{ box-shadow:inset 0 0 0 2px var(--k-t10); } .kal-knoepfe{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .kal-knoepfe button{ min-height:44px; } .raum-panel{ margin-top:18px; padding:20px; border-radius:var(--r3); background:var(--lotse-flaeche-2); box-shadow:var(--sh-1); } .raum-panel h3{ font-family:Georgia,"Times New Roman",serif; font-size:19px; color:var(--lotse-ink); margin:0; font-weight:400; } .raum-feld{ display:block; margin:14px 0; } .raum-feld span{ display:block; margin-bottom:6px; } .raum-umfang{ border:0; margin:0 0 14px; padding:0; display:grid; gap:8px; } .raum-umfang legend{ padding:0; margin-bottom:6px; font-size:12px; font-weight:750; color:var(--lotse-text-2); } .raum-umfang label{ display:flex; align-items:center; gap:10px; min-height:44px; padding:0 12px; border-radius:var(--r1); background:var(--lotse-flaeche); font-size:14px; font-weight:500; cursor:pointer; } .raum-umfang input{ width:19px; height:19px; flex:0 0 19px; accent-color:var(--lotse-teal); } .raum-aktionen{ display:flex; gap:10px; flex-wrap:wrap; } .raum-aktionen button{ min-height:44px; } @media(max-width:1050px){ .kal-knoepfe{ justify-content:flex-start; } } @media(max-width:720px){ /* Nebeneinander statt untereinander: die Terminzeile darf durch die Knöpfe nicht in die Höhe wachsen. Mit Raum UND Veröffentlichung sind es drei Bedienstellen – die brechen sonst auf drei Zeilen um. Deshalb eine einzige, wischbare Reihe. */ .kal-knoepfe{ grid-column:2; justify-content:flex-start; gap:6px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; max-width:100%; } .kal-knoepfe::-webkit-scrollbar{ display:none; } .kal-knoepfe>*{ flex:0 0 auto; } .kal-knoepfe button{ padding:8px 12px; font-size:12.5px; min-height:40px; white-space:nowrap; } .raum-aktionen{ display:grid; } .raum-aktionen button{ width:100%; } } @media(max-width:430px){ .raum-panel{ padding:16px; } .raum-panel .panel-head{ display:grid; grid-template-columns:1fr; } .raum-panel .panel-head button{ width:100%; } } /* ─── Änderungsverlauf (R-12 / A-43) ─────────────────────────────────────── Arbeit und Sicherheit sind zwei verschiedene Dinge – das steht als Wort daneben, nicht nur als Farbe. */ .verlauf-titel{ font-family:Georgia,"Times New Roman",serif; font-size:18px; color:var(--lotse-ink); font-weight:400; margin:20px 0 6px; } .verlauf-liste{ display:grid; gap:6px; margin:12px 0 16px; } .verlauf-zeile{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:11px 14px; border-radius:var(--r1); background:var(--lotse-flaeche); box-shadow:var(--sh-1); } .verlauf-zeile.sicherheit{ border-left:3px solid var(--lotse-marke); } .verlauf-zeile.arbeit{ border-left:3px solid var(--lotse-teal); } .verlauf-haupt{ min-width:0; } .verlauf-haupt strong{ display:block; font-size:14px; color:var(--lotse-ink); } .verlauf-haupt span{ display:block; font-size:12.5px; color:var(--lotse-text-2); margin-top:2px; } .verlauf-ohne-namen{ font-style:italic; } .verlauf-art{ font-size:11px; font-weight:750; letter-spacing:.04em; color:var(--lotse-text-3); white-space:nowrap; } @media(max-width:720px){ .verlauf-zeile{ grid-template-columns:1fr; } .verlauf-art{ justify-self:start; } } @media(max-width:430px){ .verlauf-zeile{ padding:10px 12px; } } /* ─── Wiederholung im Dialog (A-33) ──────────────────────────────────────── Was gleich entsteht, steht vorher im Klartext da. */ .wiederholung{ border:0; margin:0 0 12px; padding:14px; border-radius:var(--r2); background:var(--lotse-flaeche-2); display:grid; gap:10px; } .wiederholung[hidden]{ display:none; } .wiederholung legend{ padding:0 0 4px; font-size:12px; font-weight:750; color:var(--lotse-text-2); } .wiederholung .dialog-note{ margin:0; } @media(max-width:430px){ .wiederholung{ padding:12px; } .wiederholung .form-grid{ grid-template-columns:1fr; } } /* ─── Veröffentlichung (R-8) ─────────────────────────────────────────────── Was nach außen ginge, steht vorher da – nicht erst danach. */ .veroeff-panel{ margin-top:18px; padding:20px; border-radius:var(--r3); background:var(--lotse-flaeche-2); box-shadow:var(--sh-1); } .veroeff-panel h3{ font-family:Georgia,"Times New Roman",serif; font-size:19px; color:var(--lotse-ink); margin:0; font-weight:400; } .veroeff-zustand{ margin:12px 0 14px; padding:12px 14px; border-radius:var(--r1); background:var(--lotse-flaeche); font-size:14px; font-weight:600; color:var(--lotse-ink); } .veroeff-aktionen{ display:flex; gap:10px; flex-wrap:wrap; } .veroeff-aktionen button{ min-height:44px; } @media(max-width:720px){ .veroeff-aktionen{ display:grid; } .veroeff-aktionen button{ width:100%; } } @media(max-width:430px){ .veroeff-panel{ padding:16px; } .veroeff-panel .panel-head{ display:grid; grid-template-columns:1fr; } .veroeff-panel .panel-head button{ width:100%; } } /* ─── Befehlszeile (A-30) ────────────────────────────────────────────────── Erst zeigen, dann tun. Der Ausführen-Knopf sieht aus wie das, was er ist. */ .befehl-zeile{ display:grid; gap:10px; padding:16px; margin:0 0 16px; border-radius:var(--r2); background:var(--lotse-flaeche-2); } .befehl-feld{ display:block; } .befehl-feld span{ display:block; margin-bottom:6px; font-size:12px; font-weight:750; color:var(--lotse-text-2); } .befehl-zeile .dialog-note{ margin:0; } .befehl-zeile button{ min-height:44px; justify-self:start; } .befehl-ergebnis{ padding:14px; border-radius:var(--r1); background:var(--lotse-flaeche); box-shadow:var(--sh-1); display:grid; gap:12px; } .befehl-ergebnis[hidden]{ display:none; } .befehl-ergebnis p{ margin:0; font-size:14.5px; font-weight:600; color:var(--lotse-ink); } .befehl-aktionen{ display:flex; gap:10px; flex-wrap:wrap; } .befehl-aktionen button{ min-height:44px; } @media(max-width:720px){ .befehl-zeile button{ width:100%; justify-self:stretch; } .befehl-aktionen{ display:grid; } } /* Der Dialog „Neu erstellen" schloss sich auch dann, wenn der Server abgelehnt hatte – die Ablehnung kam mit HTTP 200 im Rumpf und ging unter. Deshalb eine eigene, deutlich sichtbare Zeile im Dialog selbst. */ .create-fehler{ margin:0 0 var(--s3);padding:var(--s3) var(--s4); border-radius:var(--r2); background:var(--warn-weich,var(--k-f15)); border-left:4px solid var(--warn,var(--k-l03)); color:var(--warn-text,var(--k-t11)); font-size:.94rem;line-height:1.45; } /* ── A-44 Etappe 6 · Teilnehmende am Termin ────────────────────────────── Die Liste haengt am Fachobjekt, nicht in einem eigenen Menuepunkt. Sie nutzt dieselbe Panel-Form wie Raum und Veroeffentlichung, damit am Termin nicht drei verschiedene Formensprachen stehen. */ .teiln-liste{ display:grid; gap:12px; margin:14px 0; } .teiln-eintrag{ padding:14px 16px; border-radius:var(--r2); background:var(--lotse-flaeche); box-shadow:var(--sh-1); display:grid; gap:8px; } .teiln-kopf{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; } .teiln-kopf strong{ font-size:15.5px; } .teiln-kopf span{ font-size:13px; color:var(--lotse-text-2); } .teiln-notfall{ font-size:13px; color:var(--lotse-text-2); } .teiln-marken{ display:flex; gap:8px; flex-wrap:wrap; } .teiln-knoepfe{ display:flex; gap:8px; flex-wrap:wrap; } .teiln-knoepfe button{ min-height:44px; } /* Gesundheitsangaben sind auch optisch nicht dasselbe wie ein Name. Der Rand ist keine Dekoration: er ist die dritte Kennzeichnung neben Farbe und Wort, damit der Unterschied nicht allein an der Farbe haengt. */ .teiln-gesundheit{ margin:0; padding:10px 14px 10px 30px; border-radius:var(--r1); border-left:4px solid var(--warn,var(--k-l03)); background:var(--warn-weich,var(--k-f15)); display:grid; gap:6px; font-size:14px; line-height:1.45; } .teiln-klasse{ font-size:11.5px; font-weight:750; color:var(--lotse-text-2); letter-spacing:.04em; } .teiln-gesundheit-schalter{ display:grid; gap:8px; margin:14px 0; } .teiln-gesundheit-schalter button{ min-height:44px; justify-self:start; } .teiln-neu{ border:0; margin:14px 0 0; padding:0; display:grid; gap:10px; } .teiln-neu[hidden]{ display:none; } .teiln-neu legend{ padding:0; margin-bottom:4px; font-size:12px; font-weight:750; color:var(--lotse-text-2); } .teiln-neu label{ display:block; } .teiln-neu label span{ display:block; margin-bottom:6px; font-size:13px; } .teiln-neu input[type=text]{ width:100%; min-height:44px; } .teiln-einwilligung{ display:flex !important; align-items:center; gap:10px; min-height:44px; padding:0 12px; border-radius:var(--r1); background:var(--lotse-flaeche); font-size:14px; cursor:pointer; } .teiln-einwilligung input{ width:19px; height:19px; flex:0 0 19px; accent-color:var(--lotse-teal); } .teiln-neu .primary-button{ min-height:44px; justify-self:start; } @media(max-width:720px){ .teiln-knoepfe{ display:grid; } .teiln-knoepfe button{ width:100%; } .teiln-neu .primary-button{ width:100%; justify-self:stretch; } } /* ── A-44 Etappe 5 · Einwilligungsblatt ────────────────────────────────── C-3: Druckansicht, die PDF erzeugt der Browser. Auf dem Bildschirm liegt das Blatt ausserhalb des Sichtfelds, damit beim Drucken nichts aufblitzt; im Druck ist es das einzige, was uebrig bleibt. */ #druckEinwilligung{ position:absolute; left:-10000px; top:0; width:180mm; color:var(--k-t12); background:var(--k-t05); font-size:11pt; line-height:1.5; } #druckEinwilligung[hidden]{ display:none; } .druck-blatt h1{ font-family:Georgia,"Times New Roman",serif; font-size:17pt; font-weight:400; margin:0 0 4mm; } .druck-gemeinde{ margin:0 0 8mm; font-weight:700; } .druck-daten{ display:grid; grid-template-columns:55mm 1fr; gap:2mm 4mm; margin:0 0 8mm; } .druck-daten dt{ font-weight:700; } .druck-daten dd{ margin:0; } .druck-blatt ul{ margin:0 0 6mm; padding-left:6mm; } .druck-unterschrift{ margin-top:18mm; display:grid; grid-template-columns:1fr 1fr; gap:10mm; } .druck-unterschrift p{ margin:0; padding-top:2mm; border-top:1px solid var(--k-t12); font-size:9.5pt; } @media print{ body.drucken > *:not(#druckEinwilligung){ display:none !important; } body.drucken #druckEinwilligung{ position:static; left:0; width:auto; display:block; } @page{ margin:20mm; } } .teiln-ges-neu{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:4px; } .teiln-ges-neu select,.teiln-ges-neu input{ min-height:44px; } .teiln-ges-neu input{ flex:1 1 180px; } @media(max-width:720px){ .teiln-ges-neu{ display:grid; } .teiln-ges-neu button{ width:100%; } } /* ═══════════════════════════════════════════════════════════════════════════ * WS01 · Die Vorgangsleiste * * Sie liegt unten und über allem, weil sie zu keiner Ansicht gehört, sondern * zur Person. Auf dem Telefon ist sie eine wischbare Zeile — nicht eine * verkleinerte Zeile, sondern eine, die auch mit dem Daumen zu treffen ist: * jede Fläche mindestens 44px hoch. * * Der Zustand steht nie nur in der Farbe. Angeheftet trägt zusätzlich ein * Zeichen und ein Wort im Titel; ein maskierter Vorgang trägt das Wort * „Geschützter Vorgang" — kein graues Feld, das man deuten müsste. * * Der Inhalt bekommt unten Platz, damit die Leiste nichts verdeckt. Das * greift nur, wenn sie wirklich da ist. * ═══════════════════════════════════════════════════════════════════════════ */ .vorgangsleiste{ position:fixed; left:0; right:0; bottom:0; z-index:40; background:rgba(255,255,255,.93); backdrop-filter:blur(10px); border-top:1px solid var(--lotse-linie); box-shadow:var(--sh-3); padding:8px max(10px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-right)); } .vorgangsleiste[hidden]{ display:none !important; } /* Die Leiste traegt seit dem 20.08.2026 bis zu zwei Zeilen je Chip und eine Zeile „Zuletzt geschlossen" darunter. Der Platz darunter waechst mit — zu wenig Platz waere eine Ueberlagerung, zu viel nur Luft. */ body.hat-vorgangsleiste .main-content{ padding-bottom:124px; } /* ── BEFUND vom 20.08.2026, gefunden im Browserlauf ─────────────────────── * * Der Inhalt bekam Platz, die SEITENLEISTE nicht. Sobald ein Arbeitstisch * offen war, lag die Vorgangsleiste ueber ihrem unteren Ende — und damit * ueber „Arbeitsbereiche verwalten". Der Knopf war sichtbar, nicht verdeckt * grau, nicht ausgeblendet: er nahm nur keinen Klick mehr an. * * Gemessen: `elementFromPoint` in der Mitte des Knopfes lieferte * `NAV#vorgangsleiste`. Das ist derselbe Fehlertyp wie die zwei * uebereinanderliegenden Programmpunkte — und ein Mensch haette hier * dreimal getippt und dann aufgehoert. */ /* Die Seitenleiste ist auf dem Schreibtisch selbst eine Spalte mit eigenem Rollbereich (`height:calc(100vh - 22px); overflow-y:auto`). Ein Polster unten half deshalb NICHT: es machte den Rollbereich laenger, aber das, was gerade sichtbar war, blieb an derselben Stelle — unter der Leiste. Gemessen im Browserlauf, nachdem genau dieser erste Versuch fehlschlug. Richtig ist, die SICHTBARE Hoehe zu kuerzen: dann endet die Seitenleiste ueber der Leiste, und ihr Rollbereich reicht bis dorthin. Die Hoehe der Leiste wird gemessen (`app.js`) und nicht geschrieben — sie traegt mal eine Zeile, mal zwei, mal eine Hinweiszeile dazu. */ @media(min-width:721px){ body.hat-vorgangsleiste .sidebar{ height:calc(100vh - 22px - var(--vorgangsleiste-hoehe, 124px)); padding-bottom:16px; } } .vorgangsleiste-rolle{ display:flex; gap:8px; align-items:stretch; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } .vorgang-chip{ display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; min-height:44px; padding:0 6px 0 12px; border-radius:var(--r3); background:var(--lotse-flaeche-2); border:1px solid var(--lotse-linie); scroll-snap-align:start; transition:background .18s var(--lotse-ease),border-color .18s var(--lotse-ease); } .vorgang-chip:hover{ background:var(--lotse-akzent-weich); border-color:var(--k-l04); } .vorgang-chip.aktiv{ background:var(--lotse-akzent-weich); border-color:var(--lotse-teal); } .vorgang-chip.fest{ background:var(--lotse-marke); border-color:var(--lotse-marke); } .vorgang-chip.fest .vorgang-name{ color:var(--k-t13); } .vorgang-chip.maskiert{ border-style:dashed; } .vorgang-name{ display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 2px; border:0; background:none; cursor:pointer; font:inherit; font-size:13.5px; font-weight:650; color:var(--lotse-text); max-width:46vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .vorgang-zeichen{ font-size:12px; line-height:1; opacity:.85; } /* §15 · „Gruppe + Arbeitsobjekt verstaendlich im Titel" und „sichtbarer letzter Arbeitsstand". Zwei Zeilen im Chip: oben Bereich und Name, darunter klein der Stand. Auf dem Telefon entfaellt die zweite Zeile — dort ist die Leiste eine Bedienzeile und kein Bericht; die Angabe bleibt im Titel des Knopfes und damit fuer Vorlesewerkzeuge erhalten. */ .vorgang-text{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:1px; min-width:0; max-width:100%; } .vorgang-zeile{ display:block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .vorgang-bereich{ font-weight:600; color:var(--lotse-text-3); } .vorgang-stand{ display:block; max-width:100%; font-size:11px; font-weight:500; line-height:1.15; color:var(--lotse-text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Zuletzt geschlossen · der Einstieg zu „wieder oeffnen" (§15). */ .vorgangsleiste-archiv{ display:flex; gap:6px; align-items:center; flex-wrap:nowrap; overflow-x:auto; margin-top:6px; } .vorgangsleiste-archiv[hidden]{ display:none !important; } .vorgang-archiv-marke{ flex:0 0 auto; font-size:11px; font-weight:650; color:var(--lotse-text-3); text-transform:uppercase; letter-spacing:.04em; } .vorgang-wieder{ flex:0 0 auto; min-height:32px; padding:0 10px; border-radius:var(--r1); border:1px dashed var(--lotse-linie); background:none; cursor:pointer; font:inherit; font-size:12px; font-weight:600; color:var(--lotse-text-2); max-width:40vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .vorgang-wieder:hover{ background:var(--lotse-akzent-weich); border-style:solid; } .vorgang-weg{ display:inline-flex; align-items:center; justify-content:center; width:32px; min-height:44px; border:0; background:none; cursor:pointer; font-size:16px; line-height:1; color:var(--lotse-text-2); border-radius:var(--r1); } .vorgang-weg:hover{ color:var(--k-t14); background:rgba(163,52,43,.08); } .vorgangsleiste-hinweis{ flex:0 0 auto; align-self:center; padding:0 10px; font-size:12px; font-weight:600; color:var(--lotse-text-3); } /* Auf dem Telefon wird die Seitenleiste selbst zur festen Leiste am unteren Rand (styles.css, 70px; lotse.css setzt 78px). Im Browserlauf am 13.08.2026 lag die Vorgangsleiste darueber und verdeckte die Wege — man kam aus einem Vorgang nicht mehr heraus. Sie steht deshalb UEBER der Navigation, nicht auf ihr: die Wege bleiben immer erreichbar. Das ist keine Verkleinerung, sondern eine andere Anordnung. */ @media(max-width:720px){ /* BEFUND vom 20.08.2026 (Browserlauf „Arbeitstisch"): die 78px waren eine GESCHRIEBENE Zahl, die untere Wegeleiste ist auf einem 390px-Geraet tatsaechlich 126px hoch. Die Leiste lag damit 48px zu tief und ueber den Wegen. Genau derselbe Fehler wie am 20.08.2026 bei RP-5: eine gezaehlte Zahl war nie die Regel. `--untere-leiste` wird in `app.js` aus der wirklichen Hoehe gesetzt. */ .vorgangsleiste{ bottom:var(--untere-leiste, 78px); box-shadow:var(--sh-2); padding-bottom:8px; padding-top:8px; } body.hat-vorgangsleiste .main-content{ padding-bottom:196px; } /* Auf dem Telefon bekommt die Seitenleiste ausdruecklich KEINEN Platz nach unten: sie IST hier die untere Leiste. Jeder Abstand zieht sie in die Hoehe, und die Vorgangsleiste steht ueber ihr — sie waere damit selbst nach oben gewandert, bis sie wieder etwas verdeckt. Gemessen im Browserlauf, unmittelbar nachdem die Regel fuer den Schreibtisch entstand: die Regel gilt nur ab 721px (siehe oben). */ .vorgang-name{ max-width:52vw; } .vorgang-stand{ display:none; } .vorgang-wieder{ max-width:55vw; } } @media(max-width:430px){ .vorgang-name{ max-width:58vw; font-size:13px; } .vorgangsleiste{ padding-left:8px; padding-right:8px; } } @media print{ .vorgangsleiste{ display:none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ * WS02 · Übersicht anpassen (Paket §6) * * Zwei Dinge, die hier bewusst so aussehen: * * Ein Pflichtabschnitt bekommt kein ausgegrautes Kästchen ohne Erklärung. * Er trägt ein Wort („immer sichtbar") und den Grund darunter. Ein * gesperrter Schalter ohne Begründung wirkt wie ein Fehler und man klickt * dagegen. * * Der Zustand steht nie nur in der Farbe: ausgeblendet heißt blasser UND * der Schalter ist aus UND es steht „ausgeblendet" dabei. * ═══════════════════════════════════════════════════════════════════════════ */ .abschnitte-panel{ margin-top:14px; border-radius:var(--r2); border:1px solid var(--lotse-linie); background:var(--lotse-flaeche); box-shadow:var(--sh-1); padding:0; } .abschnitte-panel > summary{ cursor:pointer; list-style:none; min-height:44px; display:flex; align-items:center; padding:0 18px; font-size:13.5px; font-weight:750; color:var(--lotse-text-2); border-radius:var(--r2); } .abschnitte-panel > summary::-webkit-details-marker{ display:none; } .abschnitte-panel > summary::before{ content:'⚙'; margin-right:9px; opacity:.7; } .abschnitte-panel[open] > summary{ border-bottom:1px solid var(--lotse-linie-2); border-radius:var(--r2) var(--r2) 0 0; } .abschnitte-panel > *:not(summary){ margin:0 18px; } .abschnitte-panel > .projection-note{ margin-top:14px; } .abschnitte-liste{ display:grid; gap:8px; margin-top:12px; } .abschnitt-zeile{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:10px; min-height:44px; padding:9px 12px; border-radius:var(--r1); background:var(--lotse-flaeche-2); border:1px solid var(--lotse-linie-2); } .abschnitt-zeile.aus{ opacity:.62; border-style:dashed; } .abschnitt-kopf{ min-width:0; } .abschnitt-kopf strong{ display:block; font-size:13.5px; font-weight:700; } .abschnitt-kopf span{ display:block; font-size:11.5px; color:var(--lotse-text-3); line-height:1.45; margin-top:2px; } .abschnitt-marke{ flex:0 0 auto; font-size:10.5px; font-weight:800; letter-spacing:.04em; border-radius:999px; padding:5px 9px; background:var(--lotse-akzent-weich); color:var(--lotse-akzent-text); } .abschnitt-marke.aus{ background:var(--k-f16); color:var(--k-t15); } .abschnitt-schalter{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 10px; border:1px solid var(--lotse-linie); border-radius:var(--r1); background:var(--lotse-flaeche); cursor:pointer; font-size:12.5px; font-weight:700; } .abschnitt-schalter[aria-disabled="true"]{ cursor:not-allowed; opacity:.75; background:var(--lotse-flaeche-3); } .abschnitt-ordnen{ display:inline-flex; gap:4px; } .abschnitt-ordnen button{ width:38px; min-height:44px; border:1px solid var(--lotse-linie); border-radius:var(--r1); background:var(--lotse-flaeche); cursor:pointer; font-size:14px; color:var(--lotse-text-2); } .abschnitt-ordnen button:disabled{ opacity:.35; cursor:not-allowed; } .abschnitte-fuss{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:14px 18px 16px; } .abschnitte-fuss .ghost-button{ min-height:44px; } @media(max-width:720px){ .abschnitt-zeile{ grid-template-columns:minmax(0,1fr); } .abschnitt-schalter,.abschnitt-ordnen{ width:100%; justify-content:center; } .abschnitt-ordnen button{ flex:1 1 auto; width:auto; } .abschnitte-fuss{ display:grid; } .abschnitte-fuss .ghost-button{ width:100%; } } @media print{ .abschnitte-panel{ display:none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ * Kalender · Zeitraster für Tag und Woche, Jahresansicht * * Aufbau nach der Vorlage des Product Owners vom 13.08.2026. Die Farben * bleiben LotseDesign: der Balken trägt Petrol, nicht das Rot einer fremden * Anwendung. Ein abgesagter Termin ist nicht nur blasser, er ist auch * durchgestrichen — Zustand nie allein über die Farbe. * * Auf dem Telefon wird die Woche waagerecht gewischt statt gequetscht: * sieben Stundenspalten auf 390px trifft niemand mit dem Daumen. Der * Tageskopf führt in den Tag, und dort ist alles wieder lesbar. * ═══════════════════════════════════════════════════════════════════════════ */ .kal-steuerung{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:4px 0 14px; } .kal-periode{ font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:29px; line-height:1.15; margin:0; color:var(--lotse-ink); letter-spacing:-.015em; } .kal-blaettern{ display:inline-flex; align-items:center; gap:6px; } .kal-blaettern button{ min-height:44px; } .kal-blaettern .ghost-button{ width:44px; padding:0; font-size:19px; line-height:1; } .kal-zeitraster{ border:1px solid var(--lotse-linie); border-radius:var(--r2); overflow:hidden; background:var(--lotse-flaeche); } .kal-zeitkopf{ display:grid; grid-template-columns:58px minmax(0,1fr); border-bottom:1px solid var(--lotse-linie); background:var(--lotse-flaeche-2); } .kal-eckfeld{ border-right:1px solid var(--lotse-linie-2); } .kal-tagkoepfe{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); } .kal-tagkopf{ display:grid; justify-items:center; gap:2px; padding:9px 4px; min-height:44px; border-left:1px solid var(--lotse-linie-2); cursor:pointer; background:none; } .kal-tagkopf-wt{ font-size:11px; font-weight:750; color:var(--lotse-text-3); text-transform:uppercase; letter-spacing:.05em; } .kal-tagkopf-zahl{ font-family:Georgia,serif; font-size:19px; color:var(--lotse-text); } .kal-tagkopf.heute .kal-tagkopf-zahl{ background:var(--lotse-teal); color:var(--k-t05); border-radius:999px; min-width:30px; height:30px; display:grid; place-items:center; font-size:16px; } .kal-ganztag{ display:grid; grid-template-columns:58px minmax(0,1fr); border-bottom:1px solid var(--lotse-linie); background:var(--lotse-flaeche-2); } .kal-ganztag-marke-links{ font-size:10.5px; font-weight:750; color:var(--lotse-text-3); padding:8px 6px; text-align:right; border-right:1px solid var(--lotse-linie-2); } .kal-ganztag-zellen{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); } .kal-ganztag-zelle{ display:grid; gap:3px; padding:5px 4px; align-content:start; border-left:1px solid var(--lotse-linie-2); min-height:34px; } .kal-ganztag-marke{ border:0; border-radius:7px; background:var(--lotse-akzent-weich); color:var(--lotse-akzent-text); font-size:11.5px; font-weight:700; text-align:left; padding:5px 7px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .kal-ganztag-marke.entfaellt{ text-decoration:line-through; opacity:.6; } .kal-zeitkoerper{ display:grid; grid-template-columns:58px minmax(0,1fr); max-height:min(62vh,640px); overflow-y:auto; overflow-x:hidden; } .kal-stundenleiste{ border-right:1px solid var(--lotse-linie-2); background:var(--lotse-flaeche-2); } .kal-stunde{ position:relative; } /* Die Uhrzeit steht UNTER ihrer Linie, nicht auf ihr. Im ersten Bildbeleg war die oberste Beschriftung halb abgeschnitten, weil sie über den Rand des Scrollbereichs ragte. Unter der Linie heißt außerdem das Richtige: „hier beginnt diese Stunde". */ .kal-stunde span{ position:absolute; top:3px; right:7px; font-size:10.5px; font-weight:700; color:var(--lotse-text-3); } .kal-spalten{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); } .kal-spalte{ position:relative; border-left:1px solid var(--lotse-linie-2); } .kal-stundenlinie{ position:absolute; left:0; right:0; height:1px; background:var(--lotse-linie-2); } .kal-balken{ position:absolute; border:0; border-left:3px solid var(--lotse-teal); border-radius:6px; background:var(--lotse-akzent-weich); color:var(--lotse-akzent-text); padding:4px 6px; text-align:left; cursor:pointer; overflow:hidden; display:grid; align-content:start; gap:1px; min-height:26px; transition:box-shadow .18s var(--lotse-ease); } .kal-balken:hover{ box-shadow:var(--sh-2); } .kal-balken-titel{ font-size:12px; font-weight:750; line-height:1.25; overflow:hidden; text-overflow:ellipsis; } .kal-balken-zeit{ font-size:10.5px; font-weight:650; opacity:.8; } .kal-balken.entfaellt{ background:var(--k-f17); color:var(--k-t15); border-left-color:var(--k-l05); } .kal-balken.entfaellt .kal-balken-titel{ text-decoration:line-through; } /* Jahresansicht: zwölf kleine Monate, ohne Titel. Auf zwölf Monaten wäre jeder Titel unlesbar – und ein unlesbarer Titel eines geschützten Termins ist trotzdem einer. Sie zeigt, WO etwas ist, nicht WAS. */ .kal-jahr{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } .kal-jahr-monat{ border:1px solid var(--lotse-linie); border-radius:var(--r2); background:var(--lotse-flaeche); padding:11px 10px 12px; cursor:pointer; text-align:left; display:grid; gap:7px; transition:box-shadow .18s var(--lotse-ease); } .kal-jahr-monat:hover{ box-shadow:var(--sh-2); } .kal-jahr-monat strong{ font-family:Georgia,serif; font-weight:400; font-size:15px; color:var(--lotse-ink); } .kal-jahr-raster{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; } .kal-jahr-tag{ font-size:10px; text-align:center; padding:2px 0; border-radius:5px; color:var(--lotse-text-2); } .kal-jahr-tag.fremd{ color:var(--k-t16); } .kal-jahr-tag.belegt{ background:var(--lotse-akzent-weich); color:var(--lotse-akzent-text); font-weight:800; } .kal-jahr-tag.heute{ background:var(--lotse-teal); color:var(--k-t05); font-weight:800; } @media(max-width:1050px){ .kal-jahr{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media(max-width:720px){ .kal-periode{ font-size:24px; } .kal-steuerung{ gap:10px; } .kal-blaettern{ width:100%; justify-content:space-between; } .kal-jahr{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } /* Die Woche wird gewischt, nicht gequetscht: jede Spalte behält eine Breite, die man treffen kann. Der Tag bleibt einspaltig. GEWISCHT WIRD DAS GANZE RASTER, nicht jede Zeile für sich. Im ersten Bildbeleg auf 390px scrollten Tagesköpfe und Raster unabhängig voneinander — man konnte zu Donnerstag wischen und las darüber „Montag". Deshalb liegt der waagerechte Lauf jetzt auf dem Raster selbst, und die Stundenleiste bleibt mit `sticky` an ihrem Platz. */ .kal-zeitkopf,.kal-ganztag,.kal-zeitkoerper{ grid-template-columns:46px minmax(0,1fr); } .kal-zeitraster[data-spalten="7"]{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .kal-zeitraster[data-spalten="7"] .kal-zeitkopf, .kal-zeitraster[data-spalten="7"] .kal-ganztag, .kal-zeitraster[data-spalten="7"] .kal-zeitkoerper{ min-width:calc(46px + 7 * 96px); } .kal-zeitraster[data-spalten="7"] .kal-tagkoepfe, .kal-zeitraster[data-spalten="7"] .kal-ganztag-zellen, .kal-zeitraster[data-spalten="7"] .kal-spalten{ grid-auto-columns:minmax(96px,1fr); } /* Damit die Stundenleiste beim Wischen stehen bleibt, muss der waagerechte Lauf ihr NAECHSTER Scrollbereich sein. Solange der Zeitkoerper selbst senkrecht scrollt, ist er es — und `sticky` bleibt wirkungslos. Auf dem Telefon scrollt deshalb die Seite senkrecht, das Raster waagerecht. Gemessen im Bildbeleg: vorher lief die Leiste auf -265px hinaus. */ .kal-zeitkoerper{ max-height:none; overflow:visible; } .kal-zeitraster[data-spalten="7"] .kal-eckfeld, .kal-zeitraster[data-spalten="7"] .kal-ganztag-marke-links, .kal-zeitraster[data-spalten="7"] .kal-stundenleiste{ position:sticky; left:0; z-index:2; background:var(--lotse-flaeche-2); } .kal-ganztag-marke-links{ font-size:9.5px; } } @media(max-width:430px){ .kal-periode{ font-size:21px; } .kal-jahr{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media print{ .kal-zeitkoerper{ max-height:none; overflow:visible; } } /* Der Knopf für die frühen Stunden. Er sitzt zwischen Ganztagszeile und Raster – dort, wo die fehlende Zeit tatsächlich fehlt. Steht statt seiner ein Grund, ist das kein Knopf, sondern ein Satz: dann ist das Raster von selbst aufgeklappt, weil dort etwas liegt. */ .kal-nachtzeile{ display:flex; align-items:center; justify-content:flex-start; border-bottom:1px solid var(--lotse-linie-2); background:var(--lotse-flaeche-2); padding:0 0 0 4px; min-height:34px; } .kal-nacht{ min-height:34px; padding:0 12px; border:0; background:none; cursor:pointer; font-size:11.5px; font-weight:750; color:var(--lotse-akzent-text); border-radius:var(--r1); } .kal-nacht:hover{ background:var(--lotse-akzent-weich); } .kal-nacht-grund{ padding:8px 12px; font-size:11px; font-weight:650; color:var(--lotse-text-3); } @media(max-width:720px){ .kal-zeitraster[data-spalten="7"] .kal-nachtzeile{ min-width:calc(46px + 7 * 96px); } .kal-nacht{ position:sticky; left:0; background:var(--lotse-flaeche-2); } } /* ── Predigtdienst · Zustand über Farbe UND Form UND Wort ──────────────── * * Die Farbe allein trägt hier nichts: an einem Dienstplan hängt eine * Verabredung, und wer rot und grün nicht unterscheidet, muss trotzdem * sehen, ob er zugesagt hat. Deshalb steht das Wort immer daneben, und die * FORM (Rahmenstärke, Linienart) unterscheidet zusätzlich. */ .dienst-zustand{display:inline-flex;align-items:center;gap:.4em; padding:.15em .6em;border-radius:999px;font-size:.85em; border:1px solid var(--lotse-linie,var(--k-l06));width:fit-content} .dienst-zustand[data-zustand="CONFIRMED"]{border-width:2px;border-style:solid; border-color:var(--k-l07);color:var(--k-t17)} .dienst-zustand[data-zustand="PROPOSED"]{border-style:dashed;color:var(--k-t18)} .dienst-zustand[data-zustand="RECONFIRMATION_REQUIRED"]{border-width:2px; border-style:double;color:var(--k-t19)} .dienst-zustand[data-zustand="SWAP_PENDING"]{border-style:dotted;color:var(--k-t20)} .dienst-zustand[data-zustand="UNBESETZT"]{border-style:solid;color:var(--k-t21)} .dienst-warnung:not([hidden]){display:block;margin-top:.4em;font-size:.85em; color:var(--k-t19)} @media (prefers-reduced-motion: reduce){.dienst-zustand{transition:none}} /* Der Ausschnitt einer Quelle in der Werkbank. Er steht eingerückt und in anderer Schrift, damit auf einen Blick klar ist: das ist fremder Text, nicht der eigene. */ .werkbank-inhalt{display:block;margin:.5em 0;padding:.5em .8em; border-left:3px solid var(--lotse-linie,var(--k-l06)); font-family:Georgia,serif;line-height:1.5;color:var(--k-t22)} /* G-3/G-6: der Satz zur Erwartung. Kleiner als der Inhalt, aber nicht versteckt. */ .gruppe-hinweis{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--k-t23);border-left:2px solid var(--k-l08);padding-left:10px} /* B-2: der Knopf und der Zeitpunkt daneben. Der Zeitpunkt ist der eigentliche Inhalt. */ /* BEFUND vom 20.08.2026 (V-1, PO-Frage 6 C): „Meine Arbeit" hatte eine grosse leere linke Spalte, und der Inhalt stand in einer 290 px schmalen rechten — so schmal, dass Eintraege ZEICHENWEISE untereinander umbrachen. Gemessen im Browser bei 900 px: `#myWorkSurface` ist ein zweispaltiges Raster, und diese Leiste wird per JS als ERSTES Kind eingehaengt. Damit war sie kein Streifen ueber der Arbeit, sondern eine eigene 342 px breite Spalte — und schob die eigentliche Arbeit in die schmale daneben. Die Leiste gehoert ueber die Arbeit, nicht neben sie. `grid-column:1/-1` sagt genau das und gilt fuer JEDES Raster, in das sie kuenftig eingehaengt wird — auch fuer das naechste, an das heute niemand denkt. Ausserhalb eines Rasters ist die Zeile wirkungslos. */ .neuladen-leiste{display:flex;align-items:center;gap:10px;margin:0 0 12px;flex-wrap:wrap;grid-column:1/-1} .neuladen-stand{font-size:12px;color:var(--k-t24)} /* Gemessen am 17.08.2026, Tablet (820 px): „Meine Arbeit" ließ sich um 14 px seitlich schieben. Ursache ist keine Entscheidung, sondern ein fehlendes `min-width:0` — ein Rasterfeld ist von Haus aus mindestens so breit wie sein breitester unteilbarer Inhalt und wächst dann über seinen Anteil hinaus. Das ist ein Fehler, keine Gestaltungsfrage, und wird deshalb unabhängig von E-4 behoben. */ .my-work-groups, .my-work-group, .my-work-group .work-list { min-width: 0; } .my-work-group .work-item { min-width: 0; } .my-work-group .work-main { min-width: 0; overflow-wrap: anywhere; } /* E-4, zweiter Teil: Stellen, die eine eigene Höhe setzen. * * Eine Klassenregel schlägt eine Elementregel, unabhängig von der Reihenfolge. * Diese vier setzen ausdrücklich 40 bis 42 px und blieben deshalb beim ersten * Durchgang flach — gemessen, nicht vermutet. */ @media (pointer: coarse) { .kal-ansicht-knopf, .kal-serienknopf, .kal-knoepfe button, .bereichswahl select { min-height: 44px; } } /* Und eine Grenze, die ausdrücklich gezogen wird, damit sie niemand später * für ein Versehen hält: die MARKEN IM KALENDERRASTER bleiben klein. * `.kal-ganztag-marke`, `.kal-nacht` und die Zellen sind keine Bedienleiste, * sondern dichte Darstellung von Inhalt — ein Termin unter vielen in einer * Wochenansicht. Auf 44 px gezwungen, würde die Woche nicht mehr auf den * Bildschirm passen, und aus einer besseren Bedienbarkeit würde eine * schlechtere Übersicht. Wer einen Termin genauer treffen will, zoomt oder * wechselt in die Tagesansicht; das ist der vorgesehene Weg. */ /* ── Aus dem