/* LernPuls Dashboard — Design "hell" (Variante A, 2026-07-07) Marke: lernpuls.de (Sora + Inter, Orange/Coral auf warmem Hell) Status-Farben folgen Solmaz' Excel-Semantik: Orange/Amber = offen, Gruen = bezahlt. */ @font-face { font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/sora-600-latin-latinext.41126530349d.woff2") format("woff2"); } @font-face { font-family: "Sora"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/sora-700-latin-latinext.535034c3df79.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-400-latin.260c81a4759b.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-400-latin-ext.1ad231aac0a8.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-500-latin.260c81a4759b.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-500-latin-ext.1ad231aac0a8.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-600-latin.260c81a4759b.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-600-latin-ext.1ad231aac0a8.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF; } :root { --bg: #FAF8F6; --surface: #FFFFFF; --text: #2F2B29; --muted: #6E6560; --border: #EAE3DC; /* Rand eines EINGABEFELDS -- bewusst ein zweites Token und nicht ein dunkleres --border. --border zieht jede Trennlinie zwischen zwei Flaechen (Tabellenzeile, Kartenkante, Topbar); dafuer ist 1.27:1 auf Weiss richtig und soll ruhig bleiben. Die KONTUR EINES BEDIENELEMENTS ist etwas anderes: sie ist das einzige Signal, dass dort etwas eingetippt werden kann, und WCAG 2.2 (1.4.11 Non-text Contrast) verlangt dafuer 3:1. Nachgerechnet (relative Luminanz nach WCAG): #EAE3DC auf --surface #FFFFFF = 1.27:1 (durchgefallen) #EAE3DC auf --bg #FAF8F6 = 1.20:1 (durchgefallen) #928E87 auf --surface #FFFFFF = 3.26:1 #928E87 auf --bg #FAF8F6 = 3.08:1 Beide Nachbarflaechen kommen wirklich vor: das Formularfeld steht auf Weiss, das Feld im Auftrags-Register auf --bg. Der Ton bleibt in der warmen Familie von --border (R = G+7, B = G-7) -- ein neutrales Grau faellt auf dem Creme-Grund als Fremdkoerper auf, siehe Schatten-Leiter. */ --border-field: #928E87; --brand: #F26716; --brand-ink: #BC3F06; /* Schrift AUF der Brand-Flaeche. Weiss ergibt auf #F26716 nur 3.12:1 und faellt als Text durch -- dieses Braun kommt auf 4.93:1. Gilt fuer jeden gefuellten Orange-Grund; Icons duerfen weiss bleiben (UI-Schwelle 3:1). */ --brand-on: #3B1D06; --danger: #B91C1C; /* Dieselben zwei Farben als Zahlentripel, fuer rgba(...) mit Deckkraft. Ohne sie stand "242, 103, 22" 39x und "47, 43, 41" 13x im Bestand -- ein Markenwechsel waere eine Suchen-und-Ersetzen-Aktion ueber 17 Dateien gewesen, bei der genau eine Stelle uebrig bleibt. */ --brand-rgb: 242, 103, 22; --text-rgb: 47, 43, 41; /* ── Deckkraft-Leiter (DESIGN.md Regel 1a) ────────────────────────────── Vorher standen 14 Alpha-Werte im Code (.06 .1 .12 .13 .15 .18 .25 .28 .3 .35 .4 .45 .5 .55) fuer eine Handvoll wiederkehrender Aufgaben: der Rahmen einer Karte unter dem Zeiger war im Chat .35, im Kalender .45, in der Chat-Liste .5. Denselben Unterschied sieht kein Mensch -- aber jeder neue Screen hat sich wieder einen eigenen Wert ausgedacht. Benannt ist nach AUFGABE, nicht nach Zahl. Zwei Paare tragen heute denselben Wert und sind trotzdem getrennt, weil sie getrennt regelbar sein muessen: */ /* Rueckmeldung auf eine Bedienhandlung -- Icon-Knopf unter dem Zeiger. */ --brand-a-hover: .06; /* Reine Deko: Verlauf, der nach transparent auslaeuft. Wer den Hover-Effekt kraeftiger macht, soll nicht jede Verlaufsecke der App mitverdunkeln. */ --brand-a-schleier: .06; /* Fokus-Ring am Eingabefeld. Die Felder setzen outline:none -- dieser Ring IST die Tastatur-Rueckmeldung, kein Schmuck. */ --brand-a-fokus: .18; /* Zierlinie am runden Avatar. Getrennt vom Fokus-Ring, damit ein "der Ring am Avatar ist mir zu hart" nicht stillschweigend die Tastaturbedienung der ganzen App schwaecht. */ --brand-a-kontur: .18; /* Sichtbare Umrandung eines Bedienelements, ruhend oder unter dem Zeiger. */ --brand-a-rahmen: .35; /* Rahmen, der einen ZUSTAND meldet: ungelesen, aktiv, laeuft gerade. .5 und nicht .4: bei .4 waere der Abstand zu --brand-a-rahmen nur .05, und das ist auf einem 1px-Rand nicht zu unterscheiden -- die Stufe haette ihren eigenen Zweck verfehlt. */ --brand-a-signal: .5; /* Neutrale, entsaettigte Flaeche aus der Textfarbe (erledigt, abgesagt). */ --text-a-toenung: .08; /* OBERGRENZE: ueber --brand-a-signal gibt es keine Alpha-Stufe. Wer eine kraeftige Markenkontur oder -flaeche braucht, nimmt var(--brand) bzw. var(--brand-ink) DECKEND -- so macht es der Bestand an jeder Stelle, an der es kraeftig sein muss (.cal-cell--today, .top-bell-dot, .auftrag-check:hover). Ohne diese Zeile schreibt der naechste Screen .6, weil die Leiter aufhoert. Die Stufen sind fuer 1px-Striche kalibriert. Ab 1.5px handeln Alpha und Strichstaerke gegeneinander (2px bei .25 wiegt etwa wie 1px bei .5) -- dort einzeln pruefen, nicht die Stufe einsetzen. */ /* Markenschatten MIT Geometrie, nicht nur als Alpha: Tiefe wird in diesem Projekt ueber die --shadow-Leiter geregelt. Ein reines Alpha-Token haette eine zweite Leiter fuer dieselbe Sache aufgemacht -- und die Geometrie waere 9x dupliziert geblieben. */ --shadow-brand: 0 2px 8px rgba(var(--brand-rgb), .28); --shadow-brand-flat: 0 1px 2px rgba(var(--brand-rgb), .28); /* Weiche Markenflaeche: Zaehler-Pillen, aktive Chips, Hinweisstreifen. Stand 11x als #FCEADD direkt im Code. */ --brand-bg: #FCEADD; /* Zwei getoente Weiss-Stufen, die in Chat-Liste und Startkarten dieselbe Aufgabe hatten und trotzdem doppelt im Code standen: --surface-hover = Karte unter dem Zeiger --surface-akzent = Karte, die etwas will (ungelesen, Hinweis, heute) */ --surface-hover: #FFFCFA; --surface-akzent: #FFF7F1; --status-open-ink: #9A4508; --status-open-bg: #FBEEDF; --status-paid-ink: #166534; --status-paid-bg: #E8F5EC; --status-covered-ink: #44546A; --status-covered-bg: #ECF1F7; --status-credited-ink: #0F766E; --status-credited-bg: #E7F4F2; /* Bestaetigung OHNE Zahlungsbezug (Push aktiv, Notiz erledigt, Erfolgs-Toast). Teilt heute die Werte mit --status-paid, ist aber bewusst ein eigenes Token: die vier Status-Farben sind Solmaz' Excel-Semantik und duerfen nicht als allgemeine Deko mitwandern. Aendert sich die Zahlungs-Semantik, bleibt die Bestaetigung, wo sie ist. */ --ok-ink: #166534; --ok-bg: #E8F5EC; /* Flaechen ohne eigene Bedeutung: aktiver Nav-Tab, aktive Glocke. Frueher lieh sich der Tab --status-open-bg ("offen"-Gelb) -- eine Zahlungsfarbe als Navigations-Deko. */ --nav-active-bg: #F3EDE7; /* Gesperrt heisst grau, nie gruen: --status-paid-bg liess einen toten Button wie eine Erfolgsmeldung aussehen. */ --disabled-ink: #665D57; --disabled-bg: #F0EBE6; --font-display: "Sora", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; /* Tiefe als Leiter, nicht ad hoc. Alle Toene warm (47,43,41 = --text); kaltes rgba(0,0,0) faellt auf dem Creme-Grund als Fremdkoerper auf. */ --shadow-card: 0 1px 2px rgba(var(--text-rgb), .05), 0 4px 14px rgba(var(--text-rgb), .06); --shadow-flat: 0 1px 2px rgba(var(--text-rgb), .05); --shadow-raised: 0 8px 24px rgba(var(--text-rgb), .10); --shadow-overlay: 0 12px 34px rgba(var(--text-rgb), .18); /* Touch-Mindestmasse. LernPuls laeuft primaer als iPhone-PWA; die Buttons lagen bei 28.8px (primaer) und 27.6px (sekundaer) -- unter jeder Touch-Empfehlung (Apple HIG 44pt, Material 48dp). */ --tap-primary: 42px; --tap-secondary: 36px; --tap-icon: 40px; /* Mindest-TREFFERFLAECHE, unsichtbar. Streng getrennt von den drei Massen darueber: die messen die SICHTBARE Knopfgroesse und sind damit eine Gestaltungsfrage (deshalb steht --tap-primary bei 42px und nicht bei 44 -- ein groesserer Knopf kostet Platz auf jedem Screen). Diese Flaeche kostet kein Pixel Layout, weil sie ueber ein absolut positioniertes ::after gelegt wird -- unter der Empfehlung zu bleiben gaebe es hier also keinen Grund. 44px = Apple HIG 44pt (Material 48dp liegt darueber). Vorsicht bei Nachbarn: die Flaeche ragt ueber den Knopf hinaus. Stehen zwei Bedienelemente dichter beieinander als die Ueberstaende zusammen breit sind, ueberlappen die Trefferflaechen und der zuletzt gemalte Knopf gewinnt. Dort waechst der Knopf selbst (siehe .zug-auge). */ --tap-hit: 44px; /* Freiraum unter dem Seiteninhalt, damit die letzte Zeile nicht hinter der fest stehenden Tabbar verschwindet. Gehoert zu den Touch-Massen, nicht zur Abstands-Skala: es misst ein konkretes Element, es taktet keinen Rhythmus. Am 01.08. nachgemessen und als Rechnung geschrieben statt als eine Zahl: die Leiste ist 58px hoch (gemessen bei 390px, ohne den Geraeterand), dazu --sp-5 Luft und der Geraeterand selbst. Die alte 104 stammte von der hoeheren Leiste mit zwei Zeilen Innenabstand und liess seither zu viel Platz stehen -- ein festes Mass altert still mit, wenn das Element sich aendert. */ --tabbar-clearance: calc(58px + var(--sp-5) + env(safe-area-inset-bottom)); /* Eine Beschleunigung fuer alles. Nacktes "ease" startet zu traege und endet zu abrupt; diese Kurve zieht sofort an und laeuft weich aus. */ --ease: cubic-bezier(.2, .6, .3, 1); --content-max: 680px; --sidebar-w: 15rem; /* ── Skalen (DESIGN.md Regeln 3, 6, 7) ────────────────────────────────── Warum es die vorher nicht gab und was das anrichtete: fuer Farben, Schatten, Touch-Masse und Beschleunigung gab es Tokens -- fuer Schrift, Abstand und Radius NICHT. Es gab nichts zum Danach-Greifen, also hat jeder Screen eigene Werte gegriffen. Gemessen am 2026-07-18: 32 Schriftgroessen (Budget 6), 54 Abstaende (Budget 7), 17 Radien (Budget 2). Die Stufen sind aus der HAEUFIGKEIT im Bestand abgeleitet, nicht aus einem Lehrbuch -- die App soll beim Umstellen optisch stehen bleiben. ACHTUNG: der Bestand ist noch NICHT umgestellt. Neuer Code benutzt diese Tokens; die Migration laeuft in Stationen (DESIGN.md, letzter Abschnitt). */ /* Spruenge sichtbar (Faktor 1,14-1,55) statt 0,3-px-Brei wie bisher. */ --fs-xs: 0.70rem; /* Labels, Versalien-Spaltenkoepfe, Kleingedrucktes */ --fs-s: 0.80rem; /* Sekundaertext, Meta, Pillen */ --fs-base: 0.90rem; /* Fliesstext, Tabellenzellen, Formularfelder */ --fs-m: 1.00rem; /* betonter Fliesstext, Karten-Titel */ --fs-l: 1.30rem; /* Abschnitts-Ueberschriften */ --fs-xl: 2.00rem; /* Seitentitel, grosse Kennzahl */ /* Alle Vielfache von 4 -- krumme Werte wie 11.2 oder 17.6 sind Versehen. --sp-0 ist die eine begruendete Ausnahme vom 4er-Raster: Text, der INNERHALB eines Bedienelements auf Text sitzt (Tab-Icon ueber Tab-Label, Wochentag ueber Datum). Dort war der Bestand bei .05-.18rem, also 0.8-2.9px -- auf 4px gehoben reisst die Zeile sichtbar auseinander und das Element waechst ueber sein Touch-Mass hinaus. Eine Stufe fuer "haarfein gestapelt", nicht mehr. */ --sp-0: 2px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* Drei Stufen plus Pille. Die Pille ist keine Zwischengroesse, sondern eine eigene Aussage: vollrund heisst "Zustand", eckig heisst "Flaeche". --radius-xs traegt Elemente UNTER etwa 16px Kantenlaenge: Diagrammbalken (11-15px breit), Legenden-Kaestchen (10x10px), Inline-Marker. Auf 8px gehoben wird ein 10px-Kaestchen fast rund und ein 11px-Balken zur Kapsel -- der Radius wuerde die Form uebernehmen statt sie zu brechen. --radius-m ist 16px und nicht 12px: das war schon --radius-card und sitzt auf jeder Karte der App. 12px waere eine sichtbare Aenderung an jeder Flaeche gewesen -- eine Geschmacksentscheidung, die Mustafa trifft, nicht ein Nebeneffekt der Aufraeumarbeit. (DESIGN.md Regel 3, korrigiert.) */ --radius-xs: 4px; --radius-s: 8px; --radius-m: 16px; --radius-pill: 999px; } * { box-sizing: border-box; } /* background schon hier (nicht erst auf body): fuellt die Flaeche beim ersten Paint und zwischen zwei Seiten mit der App-Farbe statt Weiss -- gegen den "erst weisse Flaeche, dann App"-Blitz (Mustafa 23.07.). */ html { color-scheme: light; background: var(--bg); } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.5; -webkit-font-smoothing: antialiased; /* Standalone-PWA: der Rubber-Band-Bounce des Dokuments soll nicht die ganze App mitziehen, wenn ein innerer Scroller (Chat, Liste) am Rand ist. */ overscroll-behavior-y: contain; } /* Tap-Feedback: interaktive Flaechen reagieren sichtbar auf Beruehrung -- der auffaelligste Unterschied zwischen "fuehlt sich wie Web an" und "wie App". touch-action: manipulation nimmt den 300ms-Rest-Delay auf Touch, und tap-highlight-color: transparent ersetzt das graue iOS-Kaestchen durch unser eigenes :active-Feedback. Buttons mit eigener transition behalten sie (hoehere Spezifitaet); alle anderen bekommen das leichte Einrasten. */ button, [role="button"], a, label, summary { -webkit-tap-highlight-color: transparent; } button, [role="button"] { touch-action: manipulation; transition: transform .08s var(--ease); } button:active, [role="button"]:active { transform: scale(.97); } @media (prefers-reduced-motion: reduce) { button, [role="button"] { transition: none; } button:active, [role="button"]:active { transform: none; } } /* iOS Safari zoomt beim Fokus in ein Formularfeld mit Schriftgroesse UNTER 16px automatisch hinein und verschiebt dabei die ganze Ansicht -- danach muss man von Hand rauszoomen. Auf Touch-Geraeten heben wir jedes fokussierbare Textfeld auf 16px (--fs-m) an: der Auto-Zoom entfaellt, das Pinch-Zoom des Nutzers bleibt (kein user-scalable=no, WCAG 1.4.4 gewahrt). Desktop behaelt die dichtere --fs-base-Groesse. !important, weil die Feld-Groessen ueber viele Komponenten-Regeln verstreut sind (auch inline in Templates) -- ein zentraler Riegel trifft sie alle, auch kuenftige Felder. */ @media (pointer: coarse) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: var(--fs-m) !important; } } /* Topbar */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--sp-5) var(--sp-3); background: var(--bg); border-bottom: 1px solid var(--border); } .wordmark { display: inline-flex; align-items: center; text-decoration: none; } .wordmark .logo-img { height: 27px; width: auto; display: block; } .topbar-date { font-size: var(--fs-s); color: var(--muted); font-weight: 500; } /* Navigation: mobil unten fix, ab 768px oben. KEIN overflow-x mehr (01.08.). Die Leiste scrollte seitwaerts, weil alle Punkte hineingezwungen wurden -- Solmaz hatte am Handy zwoelf in einer Zeile. Jetzt stehen hoechstens vier plus der Drei-Striche-Knopf da (navigation.MAX_PRIMAER), der Rest liegt im Blatt. Die Punkte teilen sich den Platz gleichmaessig (flex: 1), damit die Leiste ein Raster ist und kein Haufen unterschiedlich breiter Kacheln. */ .tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: stretch; background: var(--surface); border-top: 1px solid var(--border); padding: var(--sp-1) var(--sp-1) calc(var(--sp-1) + env(safe-area-inset-bottom)); } .tab { position: relative; /* Gleiche Breite fuer alle, aber min-width: 0 -- ohne das bestimmt der laengste Text ("Meine Übersicht") die Breite ALLER Flaechen. */ flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-0); /* --tap-hit als Mindesthoehe, nicht als unsichtbare ::after-Flaeche: die Punkte stehen dicht nebeneinander, ueberstehende Trefferflaechen wuerden sich ueberlappen und der zuletzt gemalte Punkt gewaenne. */ min-height: var(--tap-hit); font-size: var(--fs-xs); font-weight: 500; color: var(--muted); text-decoration: none; padding: var(--sp-1) var(--sp-1); border-radius: var(--radius-s); } /* Die Beschriftung darf abschneiden statt die Leiste zu sprengen. */ .tab > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tab--unread { color: var(--brand-ink); } /* Der Punkt sitzt an der rechten oberen Ecke des SYMBOLS, nicht der Flaeche: die Flaechen sind seit dem 01.08. gleich breit und deutlich breiter als ihr Inhalt, ein Punkt am Flaechenrand haette frei in der Luft gestanden. */ .tab-badge { position: absolute; top: var(--sp-0); left: 50%; margin-left: var(--sp-2); width: 9px; height: 9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--surface); } /* Leucht-Punkt am Neuerungen-Tab: pulsiert sanft, solange ungesehene Eintraege da sind (has_new_patchnotes), und erlischt mit dem Seitenbesuch. */ .tab-badge--glow { animation: badge-glow 2.2s ease-in-out infinite; } @keyframes badge-glow { 0%, 100% { box-shadow: 0 0 0 2px var(--surface), 0 0 3px 0 rgba(var(--brand-rgb),.4); } 50% { box-shadow: 0 0 0 2px var(--surface), 0 0 11px 3px rgba(var(--brand-rgb),.8); } } @media (prefers-reduced-motion: reduce) { .tab-badge--glow { animation: none; } } .tab svg { width: 22px; height: 22px; flex-shrink: 0; } /* ── Der Drei-Striche-Knopf und sein Blatt ────────────────────────────────── Grundlage ist
/: ohne JavaScript klappt der Inhalt trotzdem auf. sheet.js legt Schleier, Fokus-Falle und Ziehgeste darueber. */ .sheet-halter { flex: 1 1 0; min-width: 0; display: flex; } .sheet-halter > summary { list-style: none; cursor: pointer; width: 100%; } .sheet-halter > summary::-webkit-details-marker { display: none; } /* Beim Oeffnen wird der Knopf zum aktiven Element -- sonst sieht man waehrend des offenen Blattes nicht mehr, worueber es liegt. */ .sheet-halter[open] > summary { color: var(--brand-ink); font-weight: 600; } .sheet-schleier { position: fixed; inset: 0; z-index: 55; background: rgba(var(--text-rgb), .42); opacity: 0; transition: opacity .25s var(--ease); } .sheet-schleier.is-open { opacity: 1; } .sheet-schleier[hidden] { display: none; } .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 56; /* 85 und nicht 72: bei zwoelf Bereichen plus Abmelden lag der letzte Punkt sonst unter der Kante und man musste scrollen, um ihn ueberhaupt zu entdecken (gemessen bei 390x844). Der Streifen darueber bleibt breit genug, um zu zeigen, dass die Seite darunter weiterlebt. */ max-height: 85vh; max-height: 85dvh; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-m) var(--radius-m) 0 0; box-shadow: var(--shadow-overlay); padding-bottom: env(safe-area-inset-bottom); /* Nur transform, nie height: eine Hoehen-Animation ruckelt, weil sie das Layout in jedem Bild neu rechnet. */ transform: translateY(100%); transition: transform .3s var(--ease); } .sheet-halter[open] .sheet, .sheet.is-open { transform: translateY(0); } /* Der Griff ist die Einladung zum Ziehen -- ohne ihn probiert es niemand. */ .sheet-griff { flex-shrink: 0; width: 36px; height: 4px; margin: var(--sp-3) auto var(--sp-1); border-radius: var(--radius-pill); background: var(--border); } .sheet-inhalt { overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-2) var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); } /* Im Blatt stehen die Punkte als Zeilen: Symbol links, Beschriftung daneben. In der Leiste stapeln sie (Symbol ueber Text), weil dort die Breite knapp ist -- hier ist sie es nicht, und eine Zeile liest sich schneller. */ .sheet-punkte { display: flex; flex-direction: column; gap: var(--sp-0); } .sheet .tab { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: var(--sp-3); font-size: var(--fs-base); padding: var(--sp-3); min-height: var(--tap-hit); /* Volle Textfarbe statt --muted: in der Leiste ist Grau richtig (dort traegt die Farbe den Aktiv-Zustand), hier ist es eine Liste, die man LIEST. */ color: var(--text); } .sheet .tab svg { color: var(--muted); } /* Zustand schlaegt Grundfarbe: die Regel darueber ist spezifischer als .tab--unread und haette den Ungelesen-Zustand allein dem Punkt ueberlassen (dieselbe Fehlerklasse wie bei .convo/.home-card am 19.07., wo :hover den Zustands-Modifier schlug). */ .sheet .tab--unread { color: var(--brand-ink); font-weight: 600; } .sheet .tab--unread svg { color: currentColor; } .sheet .tab > span { max-width: none; } .sheet .tab[aria-current="page"] { background: var(--nav-active-bg); } .sheet .tab:hover { background: var(--surface-hover); } .sheet .tab-badge { position: static; margin: 0 0 0 auto; box-shadow: none; } .sheet .tab-logout { margin-top: var(--sp-2); border-top: 1px solid var(--border); padding-top: var(--sp-2); } .sheet .tab-logout .tab { width: 100%; } @media (prefers-reduced-motion: reduce) { /* Kein Fahren, nur Ein- und Ausblenden: die Bewegung ist hier Deko, die Information ist "es ist offen". */ .sheet { transition: opacity .2s var(--ease); transform: none; opacity: 0; pointer-events: none; } .sheet-halter[open] .sheet, .sheet.is-open { opacity: 1; pointer-events: auto; } .sheet-schleier { transition: none; } } /* .is-tapped teilt sich die Optik mit aria-current, weil der angetippte Tab in einem Wimpernschlag GENAU der aktive Tab ist. Ein eigener Zwischenton waere ein Zustand mehr, den niemand benennen kann -- und beim Ankommen der neuen Seite ein zweiter Farbwechsel. Ohne die Rueckmeldung passiert nach dem Druck sichtbar nichts, bis der Server antwortet, und man tippt ein zweites Mal (Mustafa 24.07.: "ein Tap statt zwei"). Gesetzt und wieder abgeraeumt wird die Klasse in app.js. */ .tab[aria-current="page"], .tab.is-tapped { color: var(--brand-ink); font-weight: 600; } /* Der aktive Punkt der LEISTE bekommt zusaetzlich eine Flaeche. Farbe allein traegt die Aussage bei Rot-Gruen-Schwaeche nicht (Graustufen-Gegenprobe aus DESIGN.md) -- und seit die Flaechen gleich breit sind, ist auch Platz dafuer. */ .tabbar > .tab[aria-current="page"], .tabbar > .tab.is-tapped, .tabbar > .sheet-halter > summary[aria-current="page"] { background: var(--nav-active-bg); } /* Logout ist ein POST-Formular (Django 6 erlaubt kein GET-Logout); der Button sieht aus wie ein Tab. */ .tab-logout { margin: 0; display: flex; } button.tab { background: none; border: none; cursor: pointer; font-family: inherit; } /* Inhalt */ /* Der untere Wert ist KEINE Rhythmus-Stufe, sondern der Freiraum ueber der fest stehenden Tabbar -- eine Messung an einem konkreten Element, wie --tap-primary. Auf --sp-7 gekuerzt wuerde die letzte Zeile jeder Seite unter der Leiste liegen. */ main { max-width: var(--content-max); margin: 0 auto; padding: var(--sp-5) var(--sp-5) var(--tabbar-clearance); } h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-l); letter-spacing: -.015em; margin: var(--sp-1) 0 var(--sp-4); } h2 { font-size: var(--fs-s); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: var(--sp-5) 0 var(--sp-2); } .h-date { font-weight: 500; color: var(--muted); opacity: .75; margin-left: var(--sp-1); letter-spacing: .02em; } /* margin-left trennt die gefloateten Links voneinander UND vom H1-Text -- ohne ihn lasen sich zwei Nachbarn als ein Wort ("Ueberfaellige PostenAlle Zahlungen", Sweep-Fund 23.07.). */ .h-link { float: right; margin-left: var(--sp-3); font-weight: 600; font-size: var(--fs-xs); color: var(--brand-ink); text-decoration: none; text-transform: none; letter-spacing: 0; } .h-link:hover { text-decoration: underline; } .page-sub { color: var(--muted); font-size: var(--fs-base); margin: var(--sp-3) 0 var(--sp-4); } /* Erklaertext in Karten (unter h2) und im Chat-Kopf. */ .page-intro { color: var(--muted); font-size: var(--fs-base); margin: 0 0 var(--sp-4); } /* KPI. minmax(0,1fr) statt 1fr: ein nacktes 1fr hat min-width:auto und laesst vierstellige Betraege die Spalte sprengen statt umzubrechen. */ .kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } .kpi { background: var(--surface); border-radius: var(--radius-m); box-shadow: var(--shadow-card); padding: var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-0); border-top: 3px solid var(--brand); } .kpi-label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .kpi-value { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .kpi-sub { font-size: var(--fs-s); color: var(--muted); } /* Karten-Listen */ .card { background: var(--surface); border-radius: var(--radius-m); box-shadow: var(--shadow-card); padding: var(--sp-1) var(--sp-4); } .entry { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-4) 0; } .entry + .entry { border-top: 1px solid var(--border); } .entry-main { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; } /* Schuelernamen koennen beliebig lang sein und haben keine Umbruchstelle; ohne das hier schiebt ein langer Name die Betrags-Spalte aus der Karte. */ .entry-name { font-weight: 600; font-size: var(--fs-m); overflow-wrap: anywhere; } .entry-meta { font-size: var(--fs-s); color: var(--muted); font-variant-numeric: tabular-nums; } .entry-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); flex-shrink: 0; max-width: 54%; } /* Status-Pills (alle vier payment_status-Werte) */ .pill { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: 600; line-height: 1.25; padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-pill); text-align: right; } .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .pill--open { color: var(--status-open-ink); background: var(--status-open-bg); } .pill--paid { color: var(--status-paid-ink); background: var(--status-paid-bg); } .pill--covered_by_monthly_prepay { color: var(--status-covered-ink); background: var(--status-covered-bg); } .pill--credited { color: var(--status-credited-ink); background: var(--status-credited-bg); } /* Status-Pills Schueler (Student.Status: active/paused/ended) */ .pill--active { color: var(--status-paid-ink); background: var(--status-paid-bg); } .pill--paused { color: var(--status-covered-ink); background: var(--status-covered-bg); } /* Eigener, dunklerer Ton statt --muted: --muted auf --border ergibt nur 4.47:1. */ .pill--ended { color: #5F5650; background: var(--border); } /* Buttons. min-height statt Padding-Rechnerei: die Zeilenhoehe aus dem font-Shorthand (.8rem/1 = 12.8px) plus 2x.5rem ergab 28.8px -- zu klein zum Treffen. Die Hoehe kommt jetzt aus --tap-*, das Padding regelt nur noch die Breite. */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-primary); white-space: nowrap; text-decoration: none; font: 600 .8rem/1 var(--font-body); color: var(--brand-on); background: var(--brand); border: none; border-radius: var(--radius-s); padding: var(--sp-2) var(--sp-4); cursor: pointer; box-shadow: var(--shadow-brand-flat); } .btn-primary:hover { filter: brightness(1.05); } .btn-block { display: flex; width: 100%; padding: var(--sp-3) var(--sp-3); font-size: var(--fs-base); border-radius: var(--radius-m); } /* Termine: Kopfzeile, Wochen-Navigation, Tagesblöcke */ .page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); } .page-head h1 { margin-bottom: var(--sp-1); } .page-head .btn-primary { text-decoration: none; } .weeknav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); background: var(--surface); border-radius: var(--radius-m); box-shadow: var(--shadow-card); padding: var(--sp-2) var(--sp-2); margin: var(--sp-2) 0 var(--sp-2); } .weeknav-arrow { display: flex; align-items: center; justify-content: center; width: var(--tap-icon); height: var(--tap-icon); border-radius: var(--radius-s); font-size: var(--fs-l); line-height: 1; color: var(--brand-ink); text-decoration: none; } .weeknav-arrow:hover { background: var(--bg); } .weeknav-label { display: flex; flex-direction: column; align-items: center; gap: var(--sp-0); text-align: center; } .weeknav-label span { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); } .weeknav-today { font-size: var(--fs-s); font-weight: 600; color: var(--brand-ink); text-decoration: none; } .weeknav-today:hover { text-decoration: underline; } .weekday--today h2 { color: var(--brand-ink); } .today-chip { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; color: var(--brand-on); background: var(--brand); border-radius: var(--radius-pill); padding: var(--sp-0) var(--sp-2); margin-left: var(--sp-1); vertical-align: middle; text-transform: uppercase; } /* Schulfreier Tag in der Wochenansicht -- gleiche Form wie .today-chip, aber entsaettigt: "Heute" ist eine Ortsangabe im Kalender, "Osterferien" nur eine Randbedingung. Beide in Markenfarbe waeren zwei gleich laute Aussagen. text-transform: none gegen die Grossschreibung der h2-Zeile. "OSTERFERIEN" in Versalien schreit lauter als der Wochentag daneben -- und der ist hier die Ueberschrift. Dieselbe Ausnahme macht .h-link aus demselben Grund. */ .frei-chip { display: inline-block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; color: var(--muted); background: rgba(var(--text-rgb), var(--text-a-toenung)); border-radius: var(--radius-pill); text-transform: none; padding: var(--sp-0) var(--sp-2); margin-left: var(--sp-1); vertical-align: middle; } /* Die beiden Download-Knoepfe der Auswertung als eine Gruppe rechts. Ohne Klammer verteilt das space-between von .report-actions drei Elemente statt zwei, und "Geplante Termine" rutscht in die Mitte. */ .report-downloads { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } /* Gleiche Silhouette wie .report-pdf (Hoehe, Rundung, Polsterung), nur ungefuellt: die beiden gehoeren zusammen, und genau EINER von beiden ist der gefuellte Primaer-Knopf dieses Screens (DESIGN.md 2). btn-ghost waere die naheliegende Klasse gewesen, kommt aber eckig und niedriger daher -- neben der Pille sah das nach zwei verschiedenen Bausteinen aus statt nach einem Paar. Die Klasse aendert deshalb NUR die Geometrie, nicht btn-ghost selbst. */ .report-csv { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--tap-primary); text-decoration: none; font: 600 .84rem/1 var(--font-body); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: var(--sp-2) var(--sp-4); transition: border-color .12s var(--ease), transform .12s var(--ease); } .report-csv:hover { border-color: var(--text); } .report-csv:active { transform: scale(.97); } .report-csv svg { width: 15px; height: 15px; } /* Derselbe freie Tag im Monatskalender. Bewusst KEIN Chip und keine Farbe aus der Termin-Palette: Ferien und Feiertage sind der Hintergrund der Planung, nicht ihr Inhalt -- in der Woche vor Ostern stuenden sonst fuenf Kacheln, die wie fuenf Termine aussehen. Also entsaettigte Flaeche aus der Textfarbe (dieselbe Stufe wie ein abgesagter Termin) und eine kleine Zeile ohne Rahmen. .cal-cell.cal-cell--frei und nicht .cal-cell--frei: der Rest der Kalender-CSS steht als Inline-Block IM Template und damit spaeter im Dokument. Bei gleicher Spezifitaet gewaenne dort .cal-cell { background: var(--bg) }. */ .cal-cell.cal-cell--frei { background: rgba(var(--text-rgb), var(--text-a-toenung)); } .cal-cell.cal-cell--frei.cal-cell--today { background: var(--surface-akzent); } .cal-frei { font-size: var(--fs-xs); line-height: 1.2; color: var(--muted); padding: 0 var(--sp-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Der Feiertag traegt zusaetzlich Gewicht: an ihm ist geschlossen, in den Ferien richtet sich mancher Schueler nach Absprache. */ .cal-frei--feiertag { font-weight: 700; } .appt-weekday { font-weight: 400; color: var(--muted); font-size: var(--fs-s); margin-left: var(--sp-1); } .appt-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; margin-left: auto; } .appt:has(.appt-actions) { flex-wrap: wrap; row-gap: var(--sp-2); } @media (max-width: 560px) { .appt .appt-actions { width: 100%; justify-content: flex-end; } } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-secondary); white-space: nowrap; font: 500 .76rem/1 var(--font-body); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s); padding: var(--sp-2) var(--sp-3); cursor: pointer; text-decoration: none; } /* display: inline-flex schlaegt sonst das UA-[hidden]: der Teilen-Knopf, den app.js ohne navigator.share versteckt, blieb auf dem Desktop als toter Knopf stehen. */ .btn-ghost[hidden] { display: none; } .btn-primary[hidden] { display: none; } .btn-ghost:hover { border-color: var(--text); } .btn-ghost:disabled { color: var(--disabled-ink); background: var(--disabled-bg); border-color: var(--border); cursor: default; } .btn-ghost:disabled:hover { border-color: var(--border); } .btn-ghost--danger { color: var(--danger); } .btn-ghost--danger:hover { border-color: var(--danger); background: #FEF2F2; } /* Destruktive Aktion raus aus der Reihe der harmlosen. "Absagen" stand direkt neben "Verschieben" -- zwei Aktionen, die dasselbe Ziel meinen und gegenteilig ausgehen; ein Vertipper kostet den Termin. Bewusst KEINE GitHub-artige Danger-Zone: einen Termin abzusagen ist in einem Nachhilfebetrieb Alltag, keine Kontoloeschung. Der Abstand ist die Sicherung, den Rueckfrage-Dialog liefert data-confirm (app.js) ohnehin. :has() statt einer Extra-Klasse -- die Regel gilt fuer JEDES Formular mit destruktivem Button, auch fuer kuenftige. */ .detail-actions:has(.btn-ghost--danger), .appt-actions:has(.btn-ghost--danger) { gap: var(--sp-2); } .detail-actions > form:has(.btn-ghost--danger), .appt-actions > form:has(.btn-ghost--danger) { margin-left: auto; padding-left: var(--sp-4); } /* Formulare (Termin anlegen/verschieben, Serien) */ .form-card { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4) var(--sp-4); max-width: 420px; } .field-hint { margin: var(--sp-1) 0 0; font-size: var(--fs-s); color: var(--muted); } .form-card.is-dragover { outline: 2px dashed var(--brand); outline-offset: 3px; } .form-card input, .form-card select, .form-card textarea { font: 400 .95rem/1.3 var(--font-body); color: var(--text); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-field); border-radius: var(--radius-s); background: var(--surface); width: 100%; } .form-card textarea { resize: vertical; min-height: 4.5rem; line-height: 1.45; } .form-card input:focus, .form-card select:focus, .form-card textarea:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(var(--brand-rgb), var(--brand-a-fokus)); } .form-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); } /* Monats-Auswertung */ .report-card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-4); margin-bottom: var(--sp-3); } .report-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-m); } .report-card--total { border-top: 3px solid var(--brand); } .report-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); margin: 0; } .report-grid dt { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } /* Erstes Blickziel der Auswertung. Vorher 15.2px -- kleiner als die nachgeordnete Ueberfaelligkeits-Aufschluesselung weiter unten (18.4px). Und in der Display-Schrift: Sora ist fuer Ueberschriften, Zahlen sind Daten und laufen in Inter mit tabular-nums. */ .report-grid dd { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-l); font-variant-numeric: tabular-nums; } .report-negative { color: var(--danger); } @media (max-width: 480px) { .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-3); } } /* Dokumente */ .doc { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; flex-wrap: wrap; row-gap: var(--sp-2); } .doc + .doc { border-top: 1px solid var(--border); } .doc-main { display: flex; flex-direction: column; gap: var(--sp-0); min-width: 0; } .doc-name { font-weight: 600; font-size: var(--fs-m); color: var(--text); text-decoration: none; overflow-wrap: anywhere; } .doc-name:hover { color: var(--brand-ink); text-decoration: underline; } .doc-meta { font-size: var(--fs-s); color: var(--muted); font-variant-numeric: tabular-nums; } /* Cloud-Austausch: Filterleiste + Kategorie-/Neu-Chips */ .doc-filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: 0 0 var(--sp-3); } .doc-filter input[type="search"] { flex: 1; min-width: 10rem; font: 400 .88rem/1.3 var(--font-body); color: var(--text); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-field); border-radius: var(--radius-s); background: var(--surface); } .doc-filter select { font: 400 .88rem/1.3 var(--font-body); color: var(--text); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-field); border-radius: var(--radius-s); background: var(--surface); } .doc-filter input:focus, .doc-filter select:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(var(--brand-rgb), var(--brand-a-fokus)); } /* Neutral statt --status-covered-*: eine Dokument-Kategorie hat nichts mit dem Zahlungsstatus "verrechnet" zu tun und darf dessen Blau nicht tragen. */ .doc-cat { display: inline-block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; color: #5F5650; background: var(--nav-active-bg); border-radius: var(--radius-pill); padding: var(--sp-0) var(--sp-2); margin-right: var(--sp-0); vertical-align: middle; } .doc-new { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-on); background: var(--brand); border-radius: var(--radius-pill); padding: var(--sp-0) var(--sp-2); margin-right: var(--sp-0); vertical-align: middle; } .form-card input[type="file"] { padding: var(--sp-2); font-size: var(--fs-base); } /* Ghost, nicht gefuellt: die gefuellte Flaeche gehoert dem Hochladen-Knopf. Vorher trugen beide dieselbe Markenfarbe und der Blick fiel zuerst auf die Nebenaktion (Datei auswaehlen). */ .form-card input[type="file"]::file-selector-button { font: 600 .8rem/1 var(--font-body); color: var(--brand-ink); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-s); min-height: var(--tap-secondary); padding: var(--sp-2) var(--sp-3); margin-right: var(--sp-3); cursor: pointer; } @media (max-width: 560px) { .doc .appt-actions { width: 100%; justify-content: flex-end; } } /* Push-Aktivierung */ .push-card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-4); } .push-text { margin: 0; font-size: var(--fs-base); color: var(--muted); } .push-card .btn-primary { align-self: flex-start; } /* Pruef-Banner der Uebersicht: Text links, Aktion rechts. */ .review-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-4); flex-wrap: wrap; padding: var(--sp-4) var(--sp-4); border-left: 3px solid var(--brand); } .review-banner .push-text { color: var(--text); } .review-banner .btn-primary { flex-shrink: 0; } /* "Schon aktiv" und "gesperrt" sind zwei verschiedene Dinge und sahen bisher identisch aus (beide gruen = wie "bezahlt"). Aktiv bestaetigt (--ok-*), gesperrt ist grau und verspricht nichts. */ .btn-primary.is-active { background: var(--ok-bg); color: var(--ok-ink); cursor: default; filter: none; box-shadow: none; } .btn-primary:disabled, .btn-primary[aria-disabled="true"] { background: var(--disabled-bg); color: var(--disabled-ink); cursor: default; filter: none; box-shadow: none; } /* Laufende Aktion: der Button bleibt stehen und sagt, dass etwas passiert. Vorher hing z. B. "Benachrichtigungen aktivieren" sekundenlang ohne jede Rueckmeldung (push.js macht einen echten Netz-Roundtrip). */ .btn-primary[aria-busy="true"], .btn-ghost[aria-busy="true"] { cursor: progress; } .btn-primary[aria-busy="true"]::before, .btn-ghost[aria-busy="true"]::before { content: ""; width: .85em; height: .85em; margin-right: var(--sp-2); flex-shrink: 0; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .btn-primary[aria-busy="true"]::before, .btn-ghost[aria-busy="true"]::before { animation-duration: 2.4s; } } /* Termine */ .appt { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; } .appt + .appt { border-top: 1px solid var(--border); } .appt-time { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); font-variant-numeric: tabular-nums; color: var(--brand-ink); width: 3.1rem; flex-shrink: 0; } .appt-name { font-weight: 500; font-size: var(--fs-base); flex: 1; min-width: 0; color: var(--text); text-decoration: none; } a.appt-name:hover { color: var(--brand-ink); text-decoration: underline; } .appt-has-note { color: var(--brand); font-size: var(--fs-xs); vertical-align: middle; margin-left: var(--sp-0); } .appt-duration { font-size: var(--fs-s); font-weight: 600; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: var(--sp-1) var(--sp-2); white-space: nowrap; } /* Leere Zustaende -- EIN System. Vorher gab es sieben: .empty, .note-empty (gestrichelt, r13), .chat-empty (mit Icon), .convo-empty (r16), .auftrag-empty (r12), .home-auftrag--empty und .home-card--empty. Drei Radien, zwei Paddings, je eigene Typo -- "nichts da" sah auf jeder Seite anders aus und las sich wie fuenf verschiedene Apps. .empty Die ruhige Zeile IN einer Karte, wenn deren Liste leer ist. .empty-panel Die eigene Flaeche, wenn ein ganzer Bereich leer ist. Der gestrichelte Rahmen sagt "hier koennte etwas stehen". .empty-panel--plain Ohne Rahmen, fuer Bereiche, die schon einen haben. */ .empty { color: var(--muted); font-size: var(--fs-base); padding: var(--sp-3) 0; margin: 0; } .card > .empty { padding: var(--sp-3) 0; } .empty-panel { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); margin: 0; padding: var(--sp-5) var(--sp-4); text-align: center; border: 1px dashed var(--border); border-radius: var(--radius-m); color: var(--muted); font-size: var(--fs-base); } /* Erste Zeile = die Aussage, zweite = der Hinweis. Beide optional. */ .empty-panel > p, .empty-panel > strong { margin: 0; font-size: var(--fs-base); font-weight: 600; color: var(--text); } .empty-panel span { font-weight: 400; font-size: var(--fs-base); color: var(--muted); } .empty-panel--plain { border: none; padding: var(--sp-6) var(--sp-4); } /* Dekorativ (aria-hidden, der Text daneben sagt dasselbe), also ohne Kontrast-Pflicht -- aber sichtbar muss es trotzdem sein. --border waere mit 1.2:1 praktisch unsichtbar gewesen. */ .empty-panel-ic { color: var(--muted); opacity: .45; margin-bottom: var(--sp-1); } .empty-panel-ic svg { display: block; width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.5; } /* Sackgassen-Karte: abgebrochene Sitzung (403) und unbekannte Adresse (404). Beide Seiten sagen dasselbe in derselben Form -- was passiert ist, was zu tun ist, ein Weg zurueck -- und muessen deshalb gleich aussehen. Sie stand bis zum 25.07. als