/* ── Farbschemata ──────────────────────────────────────────────────────────── Alle Farben laufen über Variablen, damit ein Wechsel nur das Attribut data-theme am umsetzen muss. Die Vorauswahl setzt ein kurzes Skript im , bevor etwas gezeichnet wird — sonst blitzte beim Laden kurz das falsche Schema auf. */ :root { /* Die beiden Schleier: aus welcher Farbe die aufgelegten Flächen, Kanten und Lichtkanten gemischt werden. In der dunklen App ist das Weiss, in der hellen ein Dunkelgrau — sonst müsste jede der rund neunzig Stellen, die rgba(255,255,255,…) trugen, einzeln umgeschaltet werden. Als Zahlentripel und nicht als Farbe: nur so lässt sich die Deckung je Stelle weiterhin frei wählen. */ --schleier: 255, 255, 255; --tiefe: 0, 0, 0; /* Rückfall für die vier Farben der Zeitleiste. Jede Fassung setzt sie neu; ohne diese Zeilen bliebe eine Fläche farblos, wenn eine vergessen wird. */ --akzent: var(--brand); /* Die Farbe von Zeichen und Wortmarke. Weiss als Rückfall: sie trägt auf jedem Grund, und eine Fassung, die den Wert vergisst, bekommt kein unsichtbares Logo. */ --zeichen: #ffffff; --symbol: var(--brand); --datum: var(--symbol); --voll: var(--ring-color); --voll-ink: #ffffff; --voll-strich: 1; /* Steel ist der Grundzustand und braucht deshalb kein eigenes Attribut: wer nichts gewählt hat, bekommt ihn. */ --grad-from: #3A4A58; --grad-mid: #252D36; --grad-to: #1A1F26; --text: #ffffff; --label: rgba(var(--schleier), 0.64); --brand: #c283e6; --primary: #3E5568; --on-primary: #ffffff; --soft: #55697C; --on-soft: #ffffff; --nav-bg: #222A33; --nav-ink: rgba(var(--schleier), 0.76); --nav-active: #ffffff; --card-from: #4C5866; --card-to: #38424D; --ms-glass: rgba(var(--schleier), 0.10); --ms-glass-border: rgba(var(--schleier), 0.18); --ms-glass-ink: #ffffff; --ms-glass-line: rgba(var(--schleier), 0.45); --ring-color: #E2C4F5; --ms-ink: #ffffff; --card-line: rgba(var(--schleier), 0.45); --card-placeholder: rgba(var(--schleier), 0.45); --card-soft: rgba(var(--schleier), 0.14); --field-line: rgba(var(--schleier), 0.5); --field-focus: #ffffff; --glass: rgba(var(--schleier), 0.06); --glass-border: rgba(var(--schleier), 0.16); --glass-soft: rgba(var(--schleier), 0.1); --divider: rgba(var(--schleier), 0.14); --toast-bg: #3E5568; --toast-ok: #2F6B45; --autofill-bg: #c283e6; --autofill-ink: #ffffff; /* Masse und Bedeutungsfarben gelten für alle Schemata. */ --danger: #B82A2A; --error: #FFD9D5; --ok: #D9F2DE; --radius-card: 20px; --radius-btn: 25px; --radius-input: 12px; --padding-input: 14px 18px; --logo-width: 128px; --identity-gap: 7px; } /* Rosa: dieselbe Helligkeitsstaffelung wie Steel, nur warm statt kühl. Die Kontraste sind nachgerechnet — Marke auf Karte 5,5:1, Ring 7,3:1, Weiss auf primary 7,0:1, also durchweg über den 4,5:1 für Fliesstext. */ [data-theme="rosa"] { --grad-from: #5A3A47; --grad-mid: #3A2530; --grad-to: #261A20; --text: #ffffff; --label: rgba(var(--schleier), 0.64); --brand: #F2A0BE; --primary: #7A4B5C; --on-primary: #ffffff; --soft: #976274; --on-soft: #ffffff; --nav-bg: #33222A; --nav-ink: rgba(var(--schleier), 0.76); --nav-active: #ffffff; --card-from: #6B4A57; --card-to: #4E3540; --ms-glass: rgba(var(--schleier), 0.10); --ms-glass-border: rgba(var(--schleier), 0.18); --ms-glass-ink: #ffffff; --ms-glass-line: rgba(var(--schleier), 0.45); --ring-color: #F7C4D6; --ms-ink: #ffffff; --card-line: rgba(var(--schleier), 0.45); --card-placeholder: rgba(var(--schleier), 0.45); --card-soft: rgba(var(--schleier), 0.14); --field-line: rgba(var(--schleier), 0.5); --field-focus: #ffffff; --glass: rgba(var(--schleier), 0.06); --glass-border: rgba(var(--schleier), 0.16); --glass-soft: rgba(var(--schleier), 0.1); --divider: rgba(var(--schleier), 0.14); --toast-bg: #7A4B5C; --toast-ok: #2F6B45; --autofill-bg: #F2A0BE; --autofill-ink: #3A2530; } * { box-sizing: border-box; } /* Nach einem Antippen behält ein Bedienelement den Fokus und sieht dadurch weiter "aktiv" aus. Sichtbar soll der Fokus nur bei Tastaturbedienung sein — das Logo zählt dazu, es trägt role="button". */ button:focus, [role="button"]:focus { outline: none; } button:focus-visible, [role="button"]:focus-visible { outline: 2px solid rgba(var(--schleier), 0.7); outline-offset: 3px; border-radius: 6px; } button, [role="button"] { -webkit-tap-highlight-color: transparent; } /* hidden verliert gegen jede Regel, die display setzt (Flex-Elemente). Ohne diese Zeile bleiben ausgeblendete Elemente sichtbar. */ [hidden] { display: none !important; } html { /* Volle Höhe, nicht nur Mindesthöhe: der Rumpf misst sich seit dem Umbau an ihr, und eine Mindesthöhe gibt ihm keinen Bezug. */ height: 100%; /* Seitwärts wird nie gerollt. Die App ist eine Spalte; was breiter ist als der Bildschirm, ist ein Fehler und kein Inhalt, den man erreichen soll. Am Rumpf steht schon overflow: hidden — auf iOS reicht das aber nicht verlässlich: ein einzelnes zu breites Element kann die Seite trotzdem verschiebbar machen. Die Angabe gehört ans Wurzelelement. */ overflow-x: hidden; /* Kein Gummiband am ganzen Dokument. Die Regel steht auch am body — auf iOS greift sie dort nicht: Safari liest sie nur am Wurzelelement. Und das Gummiband ist es, das fixierte Elemente mitzieht: die Fussleiste löste sich beim Überziehen vom unteren Rand. */ overscroll-behavior-y: none; } /* Der Verlauf liegt als eigene, fixierte Ebene hinter dem Inhalt. background-attachment: fixed wäre einfacher, ist auf iOS aber fehlerhaft: Safari schiebt den Hintergrund in eine separate Ebene, wonach Berührungen an falschen Stellen ankommen und Eingabefelder den Fokus nicht mehr annehmen — die Tastatur geht dann nicht auf. */ /* ── Der Verlauf liegt am Wurzelelement ────────────────────────────────────── Er lag auf body::before, fixiert mit inset: 0. Das war richtig, solange der Rumpf ein gewöhnlicher Block war — seit er selbst position: fixed trägt, ist er der Bezugsrahmen für alles Fixierte darin. inset: 0 meint dann nicht mehr das Sichtfeld, sondern den Polsterkasten des Rumpfes: der Verlauf begann unter dem oberen Innenabstand von 24 px plus Safe-Area und endete über dem unteren. Sichtbar wurde das als schwarzer Streifen am Rand. Am Wurzelelement stellt sich die Frage nicht mehr. Dessen Hintergrund malt nach Vorschrift die ganze Leinwand aus — den gesamten Bildschirm, unabhängig davon, wie hoch das Element selbst ist. Ein Streifen kann dort nicht entstehen, auch nicht, wenn sich am Aufbau darüber noch etwas ändert. */ /* Farbe und Verlauf getrennt, und das mit Absicht. Die Vorschrift sagt zwar, der Hintergrund des Wurzelelements male die ganze Leinwand aus — WebKit dehnt dabei aber nur die *Farbe* zuverlässig über den Kasten hinaus. Ein Verlauf blieb am iPhone im Kasten stehen, und was darunter lag, war die nackte Leinwand: weiss. Genau das war der helle Streifen unten. Die Farbe darunter ist das Ende des Verlaufs. Selbst wenn der Verlauf wieder kurz greift, ist der Streifen dann in der Grundfarbe und nicht sichtbar — ein Fehler, den man nicht sieht, ist einer weniger. */ html { background-color: var(--grad-to); background-image: linear-gradient(135deg, var(--grad-from) 0%, var(--grad-mid) 50%, var(--grad-to) 100%); } body { margin: 0; /* Hier stand min-height: 100vh (und darunter 100dvh). Beides ist entfallen, und zwar nicht als Aufräumen: min-height schlägt height. index.html setzt seit dem Umbau height: 100dvh, damit der Rumpf genau ins Sichtfeld passt — die 100vh von hier zwangen ihn trotzdem auf die Höhe des *grössten* Sichtfelds, also des ohne Browserleiste. Der Rumpf war damit höher als der Bildschirm, und weil er nicht mehr rollt, wurde der Überstand unten abgeschnitten: die Fussleiste lag ausserhalb. Die Höhe steht jetzt an einer Stelle, in index.html, und nur dort. */ display: flex; flex-direction: column; align-items: center; justify-content: center; /* Safe-Area: im Standalone-Modus reicht der Inhalt sonst unter Notch und Home-Indicator. Braucht viewport-fit=cover im Meta-Tag. */ /* Seitlich nur noch 6 px: die anderen 14 sind an .card gewandert, damit dort Schatten Platz haben. Zusammen ergibt es denselben Rand wie vorher — siehe die Rechnung bei .card. */ padding: calc(24px + env(safe-area-inset-top)) calc(6px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left)); background: transparent; color: var(--text); font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; font-weight: 400; -webkit-text-size-adjust: 100%; /* Ohne diese beiden rendert Safari helle Schrift auf farbigem Grund mit Subpixel-Glättung — sie wirkt dann dick und unscharf. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Kein Gummiband-Scrollen der ganzen Seite in der Home-Screen-App. */ overscroll-behavior-y: none; /* Ohne dies wartet iOS auf einen möglichen Doppeltipp, bevor es den Klick zustellt. */ touch-action: manipulation; } /* ── Die Karte ist der Roller ──────────────────────────────────────────────── Nicht mehr die Seite scrollt, sondern dieser Behälter. Der Rumpf steht still und ist genau so hoch wie das Sichtfeld; darin liegen zwei Dinge untereinander: dieser Roller und die Fussleiste. Der Grund ist die Fussleiste. Sie war position: fixed, und auf dem iPhone hielt sie sich dreimal nacheinander nicht am unteren Rand — erst als Element mit Transformation und Filter, dann ohne beides, dann mit bottom: 0. Jede Reparatur war begründet, keine hat es behoben. In dieser Aufteilung braucht es kein fixed mehr: die Leiste ist ein gewöhnliches Geschwister des Rollers und steht unten, weil nichts sie woandershin bringen könnte. Was nicht gerechnet wird, kann nicht falsch gerechnet werden. min-height: 0 ist dabei nicht Zierrat: ein Flex-Kind bekommt von sich aus die Mindesthöhe seines Inhalts und wächst über den Behälter hinaus, statt zu rollen. */ .card { width: 100%; /* ── Der Roller ist breiter als sein Inhalt ──────────────────────────── Beschnitten wird am Polsterkasten, und der liegt *ausserhalb* der Polsterung. Vierzehn Pixel Polster auf jeder Seite geben damit jedem Schatten darin Raum, ohne dass eine Karte schmaler wird. Dass sich am Inhalt nichts ändert, ist gerechnet und nicht gehofft: die 28 px, die hier dazukommen, nimmt der Rumpf gleichzeitig weg (20 → 6 px je Seite), und die Obergrenze wächst um denselben Betrag. iPhone 390 Rumpf 6+6 → 378 verfügbar, Karte 378, Inhalt 350 Schreibtisch Karte 408 (Obergrenze), Inhalt 380 Beides ist genau so breit wie vorher. Die Fussleiste bleibt ebenfalls, wo sie war: sie steht ausserhalb der Karte und ist über min-width auf 350 festgenagelt. Der Weg dorthin ging vorher zweimal daneben — eine Einrückung der offenen Karte hat sie beim Öffnen schmaler gemacht als die der Liste (das Rucken), eine negative Streuung hat nur den Schatten geschrumpft statt ihm Platz zu geben. Der Beschnitt selbst muss weiter weg. */ padding: 0 14px; max-width: 408px; flex: 1; min-height: 0; overflow-y: auto; /* Ausdrücklich, und nicht überflüssig: steht nur eine der beiden Achsen auf auto, rechnet die andere von visible auf auto um. .card wäre damit ohne diese Zeile seitlich rollbar, sobald irgendetwas darin zu breit ist — ein langes Wort im Titel genügt. Die Karte ist ein senkrechter Roller, in keiner Ansicht ein waagrechter. */ overflow-x: hidden; -webkit-overflow-scrolling: touch; /* Das Gummiband bleibt im Roller, statt die ganze Seite mitzunehmen. */ overscroll-behavior-y: contain; /* Keine Rollleiste. Die Karte ist der einzige Roller der App und füllt den Bildschirm — eine Leiste an ihrer Kante läge mitten im Bild und nicht am Rand eines Fensters, wo man sie erwartet. Zwei Angaben, weil sie sich nicht überschneiden: scrollbar-width ist der Standard und gilt in Firefox und Chrome, ::-webkit-scrollbar ist der ältere Weg und der einzige, den Safari kennt — und Safari ist hier das Gerät, um das es geht. Nur die erste zu setzen hiesse, sie am iPhone nicht zu setzen. */ scrollbar-width: none; } .card::-webkit-scrollbar { display: none; } /* ── Kopf ───────────────────────────────────────────────────────────────── */ .brand-block { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 10px; } /* Logo links, daneben Wortmarke und darunter die beiden Namen. */ .identity { display: flex; /* Ohne das schiebt die nicht umbrechende Wortmarke den Kopf über den Bildschirm: Logo 128 + Abstand 7 + Wortmarke rund 190 sind 325 px, ein iPhone SE hat dafür nur 280. */ min-width: 0; /* Oben bündig: der viewBox des Logos ist eng um die Herzen gelegt, dadurch beginnt die Zeichnung genau an der Oberkante. */ align-items: flex-start; gap: var(--identity-gap); width: 100%; } .identity .logo { flex-shrink: 0; cursor: pointer; /* 150 % der bisherigen 85 px. Das Seitenverhältnis liegt im viewBox, die Höhe wächst also mit. */ width: var(--logo-width); height: auto; color: var(--text); } /* Umriss der Herzen. Steht als Regel hier statt als Attribut im SVG, damit Logo und Profilvorschau dieselbe Linie benutzen — und damit ein Avatar dahinter die Linie nicht überdeckt. Der Rahmen ist nicht Zierde: ohne ihn verschwimmen die beiden Bilder dort ineinander, wo die Herzen einander überlappen, und man sieht eine Fläche statt zweier Gesichter. */ /* Ein sehr feiner Strich, überall gleich: die Zeichnung lebt von der Verwacklung der Führung, nicht von der Stärke. non-scaling-stroke: die Strichstärke zählt in Bildschirmpunkten und nicht in Einheiten des viewBox. Ohne das wäre derselbe Wert im Kopf der App (128 px breit) und auf der Anmeldeseite (bis 356 px) unterschiedlich dick. */ .heart-line { fill: none; stroke: currentColor; stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } /* ── Profilbild ──────────────────────────────────────────────────────────── */ .avatar-row { display: flex; align-items: center; gap: 18px; } .avatar-preview { flex-shrink: 0; color: var(--text); } /* Nebeneinander statt untereinander: beide Knöpfe gehören zu derselben Entscheidung und sind kurz genug. */ .avatar-actions { display: flex; gap: 8px; min-width: 0; } .avatar-actions .btn { margin-top: 0; } /* Während der Upload läuft, ist das Bild noch nicht da — ein halbdurchsichtiges Herz sagt das deutlicher als ein Text daneben. */ .avatar-preview.busy { opacity: 0.45; } .titles { min-width: 0; flex: 1; } /* Auf schmalen Geräten schrumpfen Logo und Wortmarke, statt anzustossen. Die Wortmarke steht auf nowrap und kann nicht umbrechen — sie muss also kleiner werden. */ @media (max-width: 360px) { .identity .logo { width: 96px; } .brand { font-size: 15pt; } } .brand { margin: 0; white-space: nowrap; font-size: 18pt; font-weight: 500; letter-spacing: 0.05em; color: var(--brand); /* Enge Zeile: Wortmarke und Namen sollen als ein Block gelesen werden, die Namen nur als zweite Zeile davon — nicht als eigener Absatz. */ line-height: 1; } /* Beide Namen in einer Zeile, Partner zuerst. */ .names { margin: 2px 0 0; font-size: 14px; font-weight: 300; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .who-name.partner { color: var(--label); } .who-name.me { color: var(--label); margin-left: 5px; } .brand-sub { /* Poppins ausdrücklich: die Anmeldeseite trägt dasselbe data-layout wie die App, und in Layout 2 und 3 steht der body auf Lora. Ohne diese Zeile wechselte die Schrift hier mit dem gewählten Layout mit — auf einer Seite, auf der von Layouts noch gar keine Rede ist. Eine Angabe am Element schlägt jedes Erben, gleich wie das body-Selektor gewichtet ist. */ font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; /* Negativer Abstand nach oben: die Zeile soll direkt an der Wortmarke hängen, während das Logo darüber seinen Abstand behält. */ margin: -6px 0 0; text-align: center; font-size: 14px; font-weight: 300; letter-spacing: 0.34em; color: var(--label); } /* ── Bildschirme ────────────────────────────────────────────────────────── */ /* Ohne diese beiden Zeilen stehen auf der Login-Seite alle Formulare gleichzeitig untereinander. */ .screen { display: none; } .screen.active { display: block; } /* ── Typografie ─────────────────────────────────────────────────────────── */ .screen-title { margin: 0 0 20px; font-size: 9.6px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--label); text-align: center; } /* ── Felder ─────────────────────────────────────────────────────────────── */ .field { margin-bottom: 12px; position: relative; } input, textarea { width: 100%; /* iOS verweigert sonst gelegentlich die Textauswahl in Feldern, die in Containern mit eigenen Zeigern liegen. */ -webkit-user-select: text; user-select: text; padding: var(--padding-input); /* Helle Fläche mit dunkler Schrift. Weisse Schrift auf halbtransparentem Weiss kam auf dem hellen Verlaufsanfang auf 1,6:1 — getippter Text war schlicht unsichtbar. So sind es rund 10:1, egal wo das Feld steht. */ background: rgba(var(--schleier), 0.88); border: 1px solid rgba(var(--schleier), 0.6); border-radius: var(--radius-input); color: #1a3d45; /* 16px verhindert, dass iOS beim Fokus in das Feld hineinzoomt — dieser eine Wert ist von der Verkleinerung ausgenommen. */ font-size: 16px; font-weight: 400; font-family: inherit; } input:focus, textarea:focus { outline: none; border-color: #1a3d45; background: #ffffff; } input::placeholder, textarea::placeholder { color: rgba(26, 61, 69, 0.55); } /* Automatisch ausgefüllte Felder färbt der Browser eigenmächtig ein. Abschalten lässt sich das nicht, es lässt sich nur überdecken. Zwei Mittel greifen zusammen: der praktisch endlose Übergang lässt die Browserfläche nie sichtbar werden, der inset-Schatten legt unsere eigene darüber. Geometrie kommt aus denselben Variablen wie das leere Feld. Login-Felder belegen die beiden Variablen für sich neu (siehe login.html) — dadurch behält dort ein ausgefülltes Feld die Form eines leeren, ohne dass die Regel hier den Sonderfall kennen muss. Beide Schreibweisen in getrennten Blöcken: :autofill ist der Standard, älteres Safari kennt nur :-webkit-autofill. Stünden sie zusammen, verwürfe der ältere Browser die ganze Regel wegen des unbekannten Selektors. -webkit-text-fill-color statt color: color wird hier ignoriert. !important, weil Safari seine Autofill-Darstellung intern als wichtig markiert. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, .screen input:-webkit-autofill, .view input:-webkit-autofill, #profileForm input:-webkit-autofill, #milestoneForm input:-webkit-autofill { transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s; -webkit-box-shadow: 0 0 0 10000px var(--autofill-bg) inset !important; box-shadow: 0 0 0 10000px var(--autofill-bg) inset !important; -webkit-text-fill-color: var(--autofill-ink) !important; caret-color: var(--autofill-ink) !important; /* Und das Gelb selbst wegschneiden. Der inset-Schatten deckt es zu, solange er eine Farbe hat — die Anmeldeseite setzt --autofill-bg aber auf transparent, damit ein ausgefülltes Feld wie ein leeres aussieht. Dort deckte nichts, und Safari malte sein Gelb durch. background-clip: text beschneidet den Hintergrund, den der Browser eigenmächtig setzt, auf die Buchstaben — sichtbar bleibt davon nichts. Den inset-Schatten trifft es nicht: der ist ein Schatten und kein Hintergrund, die Felder in der App behalten ihre Fläche also. */ -webkit-background-clip: text; background-clip: text; border-radius: var(--radius-input); padding: var(--padding-input); } input:autofill, input:autofill:hover, input:autofill:focus, input:autofill:active, textarea:autofill, .screen input:autofill, .view input:autofill, #profileForm input:autofill, #milestoneForm input:autofill { transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s; -webkit-box-shadow: 0 0 0 10000px var(--autofill-bg) inset !important; box-shadow: 0 0 0 10000px var(--autofill-bg) inset !important; -webkit-text-fill-color: var(--autofill-ink) !important; caret-color: var(--autofill-ink) !important; /* Und das Gelb selbst wegschneiden. Der inset-Schatten deckt es zu, solange er eine Farbe hat — die Anmeldeseite setzt --autofill-bg aber auf transparent, damit ein ausgefülltes Feld wie ein leeres aussieht. Dort deckte nichts, und Safari malte sein Gelb durch. background-clip: text beschneidet den Hintergrund, den der Browser eigenmächtig setzt, auf die Buchstaben — sichtbar bleibt davon nichts. Den inset-Schatten trifft es nicht: der ist ein Schatten und kein Hintergrund, die Felder in der App behalten ihre Fläche also. */ -webkit-background-clip: text; background-clip: text; border-radius: var(--radius-input); padding: var(--padding-input); } textarea { resize: vertical; min-height: 76px; line-height: 1.45; } /* Das native Kalender-/Uhrensymbol ist dunkel — auf Glas invertiert sichtbar. */ input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { opacity: 0.7; cursor: pointer; } input[type="date"], input[type="time"] { min-height: 51px; } .code-input { text-align: center; font-size: 20.8px; font-weight: 300; letter-spacing: 0.4em; text-indent: 0.4em; } /* Platz für den Schalter, damit ein ausgefülltes Passwort nicht darunter durchläuft. Der Schalter sitzt hier 16 px vom Rand und ist mit Polsterung 36 px breit — 60 lassen genug Luft. Auf der Anmeldeseite steht er näher am Rand und braucht weniger; die Zahl steht dort. */ .field:has(.pw-toggle) input { padding-right: 60px; } .pw-toggle { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); padding: 4px 8px; background: none; border: 0; color: rgba(26, 61, 69, 0.7); font-size: 9.6px; font-family: inherit; cursor: pointer; } /* ── Knöpfe ─────────────────────────────────────────────────────────────── */ .btn { width: 100%; margin-top: 8px; padding: 12px 16px; background: var(--primary); border: 1px solid transparent; border-radius: var(--radius-btn); color: var(--on-primary); font-size: 14px; font-weight: 400; font-family: inherit; cursor: pointer; } /* Löschen im Milestone-Formular: auffindbar, aber ohne Knopffläche. Es soll nicht mit "Speichern" um Aufmerksamkeit streiten. */ .link-danger { display: block; width: 100%; margin-top: 14px; padding: 6px 0; background: none; border: 0; color: var(--danger); font-size: 14px; font-weight: 400; font-family: inherit; text-align: center; cursor: pointer; } .btn:disabled { opacity: 0.5; cursor: default; } .btn-secondary { background: rgba(var(--schleier), 0.18); border: 1px solid var(--glass-border); color: var(--text); } /* Weicher Grünton für unkritische Nebenaktionen. */ .btn-soft { background: var(--soft); border-color: var(--soft); color: var(--on-soft); } .btn-danger { background: var(--danger); border-color: var(--danger); color: #ffffff; } .link-btn { display: block; width: 100%; margin-top: 16px; padding: 8px; background: none; border: 0; color: var(--label); font-size: 10.4px; font-family: inherit; cursor: pointer; } .link-btn:hover { color: var(--text); } /* ── Meldungen ──────────────────────────────────────────────────────────── */ .msg { margin: 12px 0 0; min-height: 18px; font-size: 10.4px; line-height: 1.5; text-align: center; color: var(--label); } .msg.error { color: var(--error); } .msg.info { color: var(--label); } .msg.ok { color: var(--ok); } /* ── Overlay für Rechtstexte ─────────────────────────────────────────────── */ .overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); background: rgba(25, 38, 30, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .overlay-card { position: relative; width: 100%; max-width: 420px; max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 22px 20px 26px; /* Über Variablen statt fester Farben — sonst trüge das Overlay in jedem Schema die Salbei-Karte. */ background: linear-gradient(135deg, var(--card-from) 0%, var(--card-to) 100%); border-radius: var(--radius-card); color: var(--ms-ink); box-shadow: 0 18px 44px rgba(var(--tiefe), 0.42); } /* ── Einzelansicht in der Liste ───────────────────────────────────────────── Kein Overlay und kein zweites Element: die angetippte Karte selbst wird zur Einzelansicht und wandert an den Anfang. Die Liste bleibt dabei sichtbar und bedienbar. Der Flex-Container ist die Voraussetzung dafür — nur dort lässt sich die Reihenfolge über order ändern, ohne das Markup umzuhängen. */ #milestoneList { display: flex; flex-direction: column; /* Ohne dies gibt ein Flex-Element seine Mindestbreite nicht unter den Inhalt preis: ein langes, ungetrenntes Wort in einem Titel macht die ganze Liste breiter als die Karte. */ min-width: 0; } #milestoneList > .ms-wrap { min-width: 0; max-width: 100%; } /* Die offene Karte steht in beiden Betriebsarten oben. Über order und nicht über Umhängen im Markup: dadurch verschwindet sie zugleich von ihrem Platz in der Liste — es gibt sie nur einmal, und zwar vorne. Die Aktionen folgen ihr unmittelbar. */ .ms-wrap.open { order: -2; } .ms-actions { order: -1; } /* ── Betriebsart 'dim' ────────────────────────────────────────────────────── Die offene Karte steht vorne, die übrige Liste tritt zurück. Kein dunkler Schleier darüber, sondern die Karten selbst werden blass — dadurch bleibt der Verlauf sichtbar und die Seite wirkt nicht zugedeckt. Die zurückgetretenen Karten bleiben antippbar: so springt man direkt zur nächsten, ohne vorher zu schliessen. */ /* Wie blass die übrige Liste steht, während eine Karte offen ist. Der Wert liegt am Container und nicht an den Karten — eine Zuweisung statt zehn. Und als eigener Name, weil ihn zwei lesen: die Regel darunter und die Wischgeste in app.js, die von hier bis 1 hochzieht. Stünde die Zahl an beiden Stellen, liefe sie beim nächsten Nachstellen auseinander. 0,10 statt der früheren 0,22: die offene Karte soll allein dastehen. Bei 0,22 waren die Nachbarn noch als Karten zu lesen und nahmen ihr die Ruhe; jetzt sind sie ein Hinweis darauf, dass die Liste weitergeht, mehr nicht. Ganz auf null nicht — dann verlöre man, wo man sich befindet. */ #milestoneList.dimmed { --dim-ruhe: 0.1; } #milestoneList.dimmed .ms-wrap { /* --dim setzt die Wischgeste, solange sie läuft; sonst gilt die Ruhelage. */ opacity: var(--dim, var(--dim-ruhe)); transition: opacity 0.16s ease; } /* Während die Geste läuft, folgt die Deckkraft dem Finger und darf keinen eigenen Übergang haben — sonst hinkt sie ihm nach und kommt erst an, wenn längst losgelassen ist. */ #milestoneList.wischt .ms-wrap { transition: none; } /* Luft über der offenen Karte, damit sie nicht am oberen Rand klebt. In rem statt Prozent: ein senkrechter Abstand in Prozent bezöge sich auf die Breite des Containers und wüchse mit dem Fenster. rem hängt an der Grundschriftgrösse — der Abstand bleibt auf jedem Gerät gleich und wächst mit, wenn jemand die Schrift grösser stellt. 1,5 rem waren 24 px, jetzt sind es 4: die Karte rückt damit 20 px nach oben. Der Platz darüber wird nicht mehr gebraucht, seit Rückweg und Stift dort stehen — die beiden halten den Abstand zum Kopf, und die Karte schliesst direkt an sie an. */ #milestoneList.dimmed .ms-wrap.open { opacity: 1; margin-top: 0.25rem; } /* Die offene Karte liegt über den anderen. Hervorgehoben wird sie allein dadurch, dass die übrigen blass werden — ohne Schatten, ohne Rahmen. */ .ms-wrap.open { position: relative; z-index: 5; } .ms-actions { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; } .ms-actions .btn { flex: 1; margin-top: 0; } .ms-actions .icon-btn { width: 44px; height: 44px; } /* Die Lupe heisst "lässt sich öffnen" — an der offenen Karte hat sie nichts mehr zu sagen. */ .ms-wrap.open .ms-icon { display: none; } /* ── Verzeichnis: eingeklappte Karten ─────────────────────────────────────── Sobald eine Karte offen ist, schrumpft die übrige Liste auf Titel und Lupe. Die Höhe wird über max-height bewegt und nicht über height: auto — letzteres lässt sich nicht animieren. Der Wert liegt bewusst über jeder vorkommenden Kartenhöhe; dadurch läuft der erste Teil der Bewegung etwas schneller, was bei 280 ms nicht auffällt. grid-template-rows wäre sauberer, wird aber erst ab Safari 16 animiert — iPhones mit älterem System fielen dann auf einen harten Sprung zurück. */ .ms-body { max-height: 400px; opacity: 1; overflow: hidden; transition: max-height 0.28s ease, opacity 0.18s ease 0.06s; } .ms-wrap.collapsed .ms-body { max-height: 0; opacity: 0; transition: max-height 0.28s ease, opacity 0.14s ease; } .ms-wrap.collapsed .ms { padding: 13px 16px; border-radius: 999px; } .ms-wrap.collapsed .ms-date { display: none; } /* Im Verzeichnis steht die Lupe neben dem Titel statt in der unteren Ecke. */ .ms-wrap.collapsed .ms-icon { top: 50%; bottom: auto; transform: translateY(-50%); } /* Die Karte bewegt sich mit: Polsterung, Rundung und Schatten wandern weich. */ .ms { transition: padding 0.28s ease, border-radius 0.28s ease; } /* Karten tragen keinen Schatten mehr — im Verzeichnis also auch keinen. */ /* Wer Bewegung im System abbestellt hat, bekommt den Wechsel ohne Animation. Die Wanderung wird im JavaScript übersprungen, hier fallen die Übergänge der Grössen weg. */ @media (prefers-reduced-motion: reduce) { .ms-body, .ms, .ms-wrap { transition: none; } } /* Dasselbe über den Schalter CARD_MOTION in app.js. */ .no-card-motion .ms-body, .no-card-motion .ms, .no-card-motion .ms-wrap { transition: none; } /* ── Ein/Aus-Schalter ─────────────────────────────────────────────────────── Ersetzt das runde Symbol beim Jährlich-Feld. Ein Symbol zeigt nur einen Zustand und lässt offen, ob es an oder aus ist; ein Schieber zeigt beide Lagen zugleich. Fläche und Tinte wie bei den Eingabefeldern daneben — auf --glass-soft kam das Symbol im Salbei-Schema auf 1,77:1. */ .switch { position: relative; display: inline-flex; align-items: center; /* Auf Feldhöhe, damit der Schalter mit Datum und Uhrzeit auf einer Linie sitzt. */ height: 51px; cursor: pointer; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch-track { position: relative; width: 52px; height: 30px; background: rgba(var(--schleier), 0.88); border: 1px solid rgba(var(--schleier), 0.6); border-radius: 999px; transition: background 0.18s ease, border-color 0.18s ease; } .switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: #1a3d45; border-radius: 50%; opacity: 0.32; transition: transform 0.18s ease, opacity 0.18s ease, background 0.18s ease; } .switch input:checked + .switch-track { background: var(--primary); border-color: var(--primary); } .switch input:checked + .switch-track::after { transform: translateX(22px); background: var(--on-primary); opacity: 1; } .switch input:focus-visible + .switch-track { outline: 2px solid rgba(var(--schleier), 0.7); outline-offset: 3px; } .overlay-close { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: rgba(var(--schleier), 0.25); border: 0; border-radius: 50%; color: var(--ms-ink); font-size: 22px; line-height: 1; font-family: inherit; cursor: pointer; } .overlay-body { padding-right: 30px; } .overlay-body h2 { margin: 0 0 18px; font-size: 18px; font-weight: 500; letter-spacing: 0.04em; } .overlay-body h3 { margin: 18px 0 0; font-size: 14px; font-weight: 500; opacity: 0.85; } .overlay-body p { margin: 6px 0 0; font-size: 13px; font-weight: 300; line-height: 1.5; } /* ── Rückfrage-Dialog ────────────────────────────────────────────────────── */ .overlay-card.confirm { max-width: 320px; } .confirm-text { margin: 4px 0 18px; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--ms-ink); } .overlay-card.confirm .row .btn { flex: 1; width: auto; margin-top: 0; } /* ── Hinweisstreifen ─────────────────────────────────────────────────────── */ .toast { position: fixed; left: 16px; right: 16px; /* Über der Tab-Leiste. Die Masse stehen in index.html; die Ausweichwerte greifen nur, falls dieses Blatt einmal ohne sie geladen wird. */ bottom: calc(var(--nav-hoehe, 76px) + var(--nav-lueft, 12px) + 12px); z-index: 60; padding: 13px 18px; background: #1a3d45; border-radius: var(--radius-btn); box-shadow: 0 10px 26px rgba(var(--tiefe), 0.34); color: #ffffff; font-size: 14px; font-weight: 500; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity 0.18s ease, transform 0.18s ease; } .toast.show { opacity: 1; transform: none; } .toast.ok { background: #2F6B45; } .toast.error { background: var(--danger); } /* ── Verweise auf die Rechtstexte ────────────────────────────────────────── */ .legal-links { display: block; margin: 0; } .legal-links button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 0; background: none; border: 0; border-bottom: 1px solid rgba(var(--schleier), 0.14); color: var(--label); font-size: 16px; font-weight: 300; font-family: inherit; text-align: left; cursor: pointer; } .legal-links button:last-child { border-bottom: 0; } /* Pfeil rechts — zeigt an, dass sich etwas öffnet. */ .legal-links button::after { content: '›'; flex-shrink: 0; margin-left: 12px; font-size: 20px; line-height: 1; opacity: 0.7; } .legal-links button:hover { color: var(--text); } /* ══ Layout VB001: Zeitleiste ══════════════════════════════════════════════ Eigene Farbwelt, siehe den Hinweis in index.html. */ /* ── Layout VB001: Goldfassung ─────────────────────────────────────────────── Zweite Gestaltung, umschaltbar im Profil. Steht NACH den Farbschemata und überschreibt sie deshalb — in dieser Fassung hat die Schema-Auswahl keine Wirkung mehr. Gold braucht einen eigenen Untergrund. Auf Salbei kam #D4AF37 auf 1,22:1, auf Mauve auf 1,74:1 — beides unlesbar. Erst auf dem warmen Dunkel unten trägt es: 6,1:1 am hellen und 8,9:1 am dunklen Ende des Verlaufs. */ [data-layout="VB001"] { --grad-from: #3A3026; --grad-mid: #271F18; --grad-to: #17120D; --text: #ffffff; --label: rgba(var(--schleier), 0.68); --brand: #b89937; /* Symbole, Ring und volle Scheibe getrennt von der Marke — vier Dinge, vier Farben. Der Block in index.html erklärt, warum. */ /* Die Farbe, aus der ausgewählte Flächen gemischt werden — der aktive Reiter in der Fussleiste. Sie fehlte hier: gesetzt war sie nur in den beiden Blöcken in index.html, und color-mix mit einer undefinierten Variablen ist ungültig. Die ganze Zeile fiel damit weg, und der aktive Reiter hatte in Sunrise überhaupt keine Fläche. */ --akzent: #b89937; --symbol: #b89937; --datum: #b89937; --voll: #b89937; --voll-ink: #ffffff; --voll-strich: 1; --primary: #6B5522; --on-primary: #ffffff; --soft: #8A7038; --on-soft: #ffffff; --nav-bg: #1F1913; --nav-ink: rgba(var(--schleier), 0.78); --nav-active: #D4AF37; --card-from: #4C433A; --card-to: #332C25; /* Glas hellt auf dunklem Grund auf, sonst verschwände die Karte. Weisse Schrift darauf: 9,7:1. */ --ms-glass: rgba(var(--schleier), 0.09); --ms-glass-border: rgba(212, 175, 55, 0.30); --ms-glass-ink: #ffffff; --ms-glass-line: rgba(var(--schleier), 0.42); /* Aufgehelltes Gold für den Ring: 6,1:1 auf dem Glas. */ --ring-color: #E8CC74; --ms-ink: #ffffff; --card-line: rgba(var(--schleier), 0.42); --card-placeholder: rgba(var(--schleier), 0.45); --card-soft: rgba(212, 175, 55, 0.16); --field-line: rgba(212, 175, 55, 0.55); /* Die Farbe der Fokuslinie. Sie war seit jeher da und wurde von keiner Regel benutzt — die Fokusregeln griffen zu var(--brand). Solange die Marke je Fassung wechselte, fiel das nicht auf; seit sie überall Gold ist, leuchtete in Ocean und Rose eine goldene Linie unter dem Feld. */ --field-focus: #b89937; --glass: rgba(var(--schleier), 0.06); --glass-border: rgba(212, 175, 55, 0.22); --glass-soft: rgba(var(--schleier), 0.08); --divider: rgba(212, 175, 55, 0.20); --toast-bg: #6B5522; --toast-ok: #4E7A4A; --autofill-bg: #6B5522; --autofill-ink: #ffffff; } /* ── Schriften in VB001 ────────────────────────────────────────────────────── Durchgehend Poppins, also die Grundschrift aus dem body — die Zeitleiste braucht hier gar keine eigene Angabe mehr. Sie stand einmal auf Lora für den Inhalt und Poppins nur für den Kopf. Das hatte eine Nebenwirkung: Lora hat keinen leichten Schnitt, 300 gibt es dort nicht, und der Browser zeichnete stattdessen 400. Titel und Zähler wirkten dadurch kräftiger als beabsichtigt. Mit Poppins greift die 300 wieder. Die Serifenschrift bleibt dem romantischen Layout — dort ist sie Absicht und nicht Beiwerk. */ /* Engere Wortmarke, nur hier. */ [data-layout="VB001"] .brand { letter-spacing: -0.05em; } /* Das Doppelherz ist in beiden Layouts dasselbe: Form, Schnitt und Linie kommen aus derselben Regel, die Linie folgt der Schriftfarbe. Der Goldrand und die Kreisfassung sind wieder entfallen. */ /* ── Der Grund: ein Verlauf, sonst nichts ────────────────────────────────── Hier stand ein gerechneter Nachthimmel: 46 Sterne als radial-gradient und ein Band, das die Milchstrasse andeutete. Darüber lag ein Foto, das beides ohnehin verdeckte. Erst das Foto ist gegangen, jetzt auch die Sterne. Der Grund einer App ist kein Bild. Er trägt Karten mit Zahlen, die sich im Sekundentakt ändern, und alles, was dahinter blinkt, funkelt oder Struktur hat, streitet mit ihnen. Ein Verlauf tut das nicht: er gibt der Fläche Tiefe, ohne etwas zu zeigen. Die Töne kommen aus denselben Variablen wie die Karten — der Grund folgt damit der Farbfassung von selbst, auch der nächsten, die dazukommt. Von oben nach unten und nicht diagonal: die Kopfzeile bekommt dabei den dunkelsten Teil, und der Blick läuft mit der Liste nach unten ins Hellere. */ [data-layout="VB001"] { /* Hier läuft der Verlauf nach unten, das Ende ist also --grad-from. Die Farbe darunter ist dieselbe — warum, steht oben bei html. */ /* ── Der helle Streifen oben war dieser Wert ────────────────────────── Er stand auf --grad-from, dem *hellsten* Ton des Verlaufs, weil der 180-Grad-Verlauf dort unten endet. Gedacht war er als Rückfall für die Leinwand unterhalb der Seite. Nur liegt die freie Fläche nicht unten, sondern oben. Das Wurzelelement ist 797 px hoch, die Leinwand aber 844 — der Bildschirm. Das Verlaufsbild malt nur den Kasten des Elements aus, die Farbe darunter die ganze Leinwand. Die 47 px, die übrig bleiben, trugen also #3A3026, während die App darunter bei #17120D anfing. Das war der Rand. Jetzt derselbe Ton, mit dem der Verlauf oben beginnt. Zwei Flächen desselben Wertes, und die Kante ist weg — ohne Statusleiste, ohne theme-color, ohne Neuanlegen des Symbols. Deine Probe im Inspektor hat genau das gezeigt: eine Farbe am , und es passte. */ background-color: var(--grad-to); /* Beginnt bei --grad-to — und genau diesen Ton trägt auch das Band der Statusleiste darüber, weil theme-color aus derselben Quelle gesetzt wird (Ocean #17120D, Rose #F5E8E6). Zwei Flächen desselben Tons, also keine Kante. Hier stand kurz ein schwarzer Anlauf: --band #000000 auf den ersten 14 px, gebaut in der Annahme, iOS male das Band zwingend schwarz. Der Abzug aus Rose hat gezeigt, dass das falsch war — das Band war rosa, und der schwarze Anlauf lag als Streifen darunter. Er hat den Rand nicht verhindert, sondern war er. */ background-image: linear-gradient(180deg, var(--grad-to) 0%, var(--grad-mid) 48%, var(--grad-from) 100%); } /* ── Aufklapper für die selten gelesenen Rechtstexte ───────────────────── Sieht aus wie eine Zeile der Liste darüber, verhält sich aber wie ein Schalter: derselbe Pfeil, dieselbe Schrift, dieselbe Trennlinie — nur dreht sich der Pfeil beim Öffnen nach unten, statt nach rechts zu zeigen. details/summary vom Browser und nicht nachgebaut: Zustand, Tastatur und die Ansage "eingeklappt/ausgeklappt" für Vorlesegeräte kommen mit. */ .legal-fold { margin: 0; } .legal-fold > summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid rgba(var(--schleier), 0.14); color: var(--label); font-size: 16px; font-weight: 300; cursor: pointer; list-style: none; /* das eigene Dreieck des Browsers weg */ } .legal-fold > summary::-webkit-details-marker { display: none; } .legal-fold > summary::after { content: '›'; flex-shrink: 0; margin-left: 12px; font-size: 20px; line-height: 1; opacity: 0.7; transition: transform 160ms ease; } .legal-fold[open] > summary::after { transform: rotate(90deg); } .legal-fold > summary:hover { color: var(--text); } /* Die Einträge darin rücken ein — sie gehören zur Klappe, nicht zur Liste. */ .legal-fold .legal-links { padding-left: 14px; } .legal-fold .legal-links button:last-child { border-bottom: 0; } @media (prefers-reduced-motion: reduce) { .legal-fold > summary::after { transition: none; } } /* Rechtstexte oben bündig statt senkrecht mittig. .overlay zentriert seine Karte — richtig für die Rückfrage, die aus drei Zeilen besteht. Ein Rechtstext füllt die Höhe dagegen ganz aus, und dann zentriert sich nichts mehr: die Karte sitzt am oberen Anschlag, aber der Text beginnt trotzdem erst nach einer halben Bildschirmhöhe Leerraum, sobald er kürzer ist als der Bildschirm. Nur die Rechtstexte umstellen, die Rückfrage bleibt mittig. */ #legalOverlay { align-items: flex-start; }