/* ========================================================================= Indizio — Oberfläche Bewusst ohne Build-Schritt und ohne externe Abhängigkeiten: ein Klon des Repos ist mit `composer install` sofort lauffähig, kein npm nötig. Farbsystem seit dem 24.09.2026: Aqua Mist als Markenfarbe (ruhig, strukturell), Peach Ice als warmer Gegenspieler für Hervorhebung und Wärme — statt des Cyan/Violett, das „gefühlt alle haben". Statusfarben bewusst deutlich davon getrennt (Grün/Amber/Rose), damit ein „ok" nie mit der Markenfarbe verwechselt wird. Hell und dunkel sind gleichwertig gepflegt, und die Farbwelt ist austauschbar — siehe „Farbwelten" direkt unten. ========================================================================= */ /* ========================================================================= Farbwelten (24.09.2026) Eine Farbwelt ist ein Block `:root[data-palette="…"]` mit Rohpaaren je Token: `--l-…` für hell, `--d-…` für dunkel. Der Hell/Dunkel-Umschalter weiter unten bildet die eigentlichen Tokens (`--bg`, `--accent`, …) nur noch darauf ab — er kennt keine Farbe. Eine neue Farbwelt ist deshalb ein Block hier, ein Eintrag in `config/indizio.php` → `palettes`, sonst nichts. Welche Welt gilt, sagt `data-palette` auf — festgelegt unter Verwaltung → Darstellung, sonst aus der Konfiguration (`INDIZIO_PALETTE`). Ohne Attribut gilt die erste. Die Selektoren sind bewusst `[data-palette]` ohne `:root`: So trägt auch eine Karte im Verwaltungsbereich eine Welt zur Ansicht, mit denselben Rohfarben. Ein Test hält Konfiguration und CSS gegeneinander (LandingLayoutTest). Die Terminalfarben (`--term-*`) gehören zur Farbwelt, aber nicht zum Modus: Das Terminal ist ein Zitat aus der Werkzeugwelt und in beiden Modi dunkel. ========================================================================= */ /* --- Aqua & Pfirsich — die Vorgabe ---------------------------------------- Peach Ice #FFD2C2 und Aqua Mist #789A99. Beide sind zu hell für Fließtext auf Weiss (Aqua 3,05 : 1, Pfirsich 1,4 : 1) — deshalb tragen sie Flächen, Ränder, Hervorhebungen und im Dunkelmodus die Schrift; für Text im hellen Modus gibt es je eine dunklere Verwandte (Aqua → #48706f, Pfirsich → Terrakotta #a8634b). Der Dunkelmodus ist ein tiefes Aqua-Anthrazit, in dem Pfirsich zur Schrift- und Knopffarbe wird (10,9 : 1). */ :root, [data-palette="aqua-peach"] { --brand-1: #789a99; /* Aqua Mist — für Verläufe und Marken-Zeichen */ --brand-2: #ffd2c2; /* Peach Ice */ --l-bg: #fbf7f4; --d-bg: #1b2525; --l-bg-elevated: #fffdfb; --d-bg-elevated: #212d2d; --l-surface: #ffffff; --d-surface: #253131; --l-surface-2: #f5efeb; --d-surface-2: #2e3c3c; --l-border: #e9dfd8; --d-border: #3c4c4c; --l-border-strong: #d2c4bb; --d-border-strong: #536666; --l-text: #1d2828; --d-text: #f2ede9; --l-text-dim: #566464; --d-text-dim: #b4bebc; /* 5,6 : 1 auf --bg */ --l-text-faint: #7f8c8a; --d-text-faint: #8e9a98; --l-accent: #48706f; --d-accent: #9fc0bf; /* Links, Text */ --l-accent-hover: #375c5b; --d-accent-hover: #bfd8d7; --l-on-accent: #ffffff; --d-on-accent: #142020; /* Schrift auf --accent */ --l-accent-bright: #789a99; --d-accent-bright: #789a99; /* Ränder, Punkte */ --l-accent-soft: rgba(120, 154, 153, 0.14); --d-accent-soft: rgba(120, 154, 153, 0.16); --l-accent-2: #a8634b; --d-accent-2: #ffd2c2; /* Zweitakzent als Text */ --l-accent-2-soft: rgba(255, 210, 194, 0.42); --d-accent-2-soft: rgba(255, 210, 194, 0.18); /* Der eine satte Knopf je Bildschirm (Startseite). */ --l-cta-bg: #1d2828; --d-cta-bg: #ffd2c2; --l-cta-fg: #ffffff; --d-cta-fg: #1b2525; /* Die Wolke hinter dem Einstieg der Startseite. */ --l-cloud-top: color-mix(in srgb, #ffd2c2 62%, #fbf7f4); --d-cloud-top: color-mix(in srgb, #789a99 24%, #1b2525); --l-cloud-glow: rgba(120, 154, 153, 0.22); --d-cloud-glow: rgba(255, 210, 194, 0.12); --l-ring: 0 0 0 3px rgba(120, 154, 153, 0.30); --d-ring: 0 0 0 3px rgba(159, 192, 191, 0.30); --l-shadow: 0 1px 2px rgba(61, 45, 38, 0.04), 0 4px 16px rgba(61, 45, 38, 0.06); --l-shadow-lift: 0 2px 4px rgba(61, 45, 38, 0.06), 0 12px 28px rgba(61, 45, 38, 0.10); --term-bg: #141f1f; --term-head: #1a2626; --term-border: #2a3a3a; --term-text: #d5dedc; --term-muted: #8a9c9b; --term-dot: #3a4a4a; --term-cmd: #9fc0bf; --term-key: #b9cccb; --term-str: #c8d8d6; --term-num: #ffd2c2; --term-punc: #6e807f; /* Der Beleg leuchtet in der Zweitfarbe — dieselbe wie der Knopf im Dunkelmodus: Pfirsich heisst „das, worauf es ankommt". */ --term-hl: #ffd2c2; --term-hl-soft: rgba(255, 210, 194, 0.10); } /* --- Lemon & Ultraviolett --------------------------------------------------- Lemon Chiffon #FEFACD und Ultra Violet #5F4A8B — der grösste Kontrast der sechs Welten. Violett ist dunkel genug für Text (7,4 : 1), Zitrone nicht (1,1 : 1): Sie wird hell zur Wolke und Fläche, als Text zum Goldoliv #7a6a1a, und im Dunkelmodus zur Schrift- und Knopffarbe. */ [data-palette="lemon-violet"] { --brand-1: #5f4a8b; --brand-2: #fefacd; --l-bg: #fdfbee; --d-bg: #1e1a2b; --l-bg-elevated: #fffef8; --d-bg-elevated: #262137; --l-surface: #ffffff; --d-surface: #2a2540; --l-surface-2: #f7f4e3; --d-surface-2: #342e4c; --l-border: #e6e2c9; --d-border: #45405e; --l-border-strong: #cfcaa8; --d-border-strong: #5c5678; --l-text: #1f1a2e; --d-text: #f4f1e6; --l-text-dim: #5a556b; --d-text-dim: #bdb8cc; --l-text-faint: #85809a; --d-text-faint: #9691a8; --l-accent: #5f4a8b; --d-accent: #b9a6e6; --l-accent-hover: #4a3872; --d-accent-hover: #d0c3f2; --l-on-accent: #ffffff; --d-on-accent: #1e1a2b; --l-accent-bright: #7c66ac; --d-accent-bright: #7c66ac; --l-accent-soft: rgba(95, 74, 139, 0.12); --d-accent-soft: rgba(124, 102, 172, 0.18); --l-accent-2: #7a6a1a; --d-accent-2: #fefacd; --l-accent-2-soft: rgba(254, 250, 205, 0.75); --d-accent-2-soft: rgba(254, 250, 205, 0.14); --l-cta-bg: #1f1a2e; --d-cta-bg: #fefacd; --l-cta-fg: #ffffff; --d-cta-fg: #1e1a2b; --l-cloud-top: color-mix(in srgb, #fefacd 80%, #fdfbee); --d-cloud-top: color-mix(in srgb, #5f4a8b 30%, #1e1a2b); --l-cloud-glow: rgba(95, 74, 139, 0.16); --d-cloud-glow: rgba(254, 250, 205, 0.10); --l-ring: 0 0 0 3px rgba(95, 74, 139, 0.25); --d-ring: 0 0 0 3px rgba(185, 166, 230, 0.30); --l-shadow: 0 1px 2px rgba(31, 26, 46, 0.04), 0 4px 16px rgba(31, 26, 46, 0.06); --l-shadow-lift: 0 2px 4px rgba(31, 26, 46, 0.06), 0 12px 28px rgba(31, 26, 46, 0.10); --term-bg: #171426; --term-head: #1d1930; --term-border: #2f2a45; --term-text: #d9d5e6; --term-muted: #8d88a4; --term-dot: #3d3855; --term-cmd: #b9a6e6; --term-key: #c8c1dc; --term-str: #d9d5e6; --term-num: #fefacd; --term-punc: #6f6a86; --term-hl: #fefacd; --term-hl-soft: rgba(254, 250, 205, 0.10); } /* --- Wolkenhimmel & Ozean -------------------------------------------------- Cloudy Sky #CBDDE9 und Ocean Blue #2872A1 — einfarbig blau in fünf Helligkeiten, die Bauart von api.skael.de. Ozean trägt Text (5,3 : 1), Wolkenhimmel Flächen; der Zweitakzent ist ein Schiefer #365f7a, keine Gegenfarbe. */ [data-palette="sky-ocean"] { --brand-1: #2872a1; --brand-2: #cbdde9; --l-bg: #f4f8fb; --d-bg: #16232d; --l-bg-elevated: #ffffff; --d-bg-elevated: #1c2b37; --l-surface: #ffffff; --d-surface: #203040; --l-surface-2: #e9f0f5; --d-surface-2: #293b4c; --l-border: #d3e0ea; --d-border: #3a4e60; --l-border-strong: #b9cbd9; --d-border-strong: #52697c; --l-text: #12283a; --d-text: #eef3f7; --l-text-dim: #4d6478; --d-text-dim: #b3c2ce; --l-text-faint: #7b8fa1; --d-text-faint: #8a9cac; --l-accent: #2872a1; --d-accent: #7fb6dc; --l-accent-hover: #1f5c83; --d-accent-hover: #a3cbe8; --l-on-accent: #ffffff; --d-on-accent: #10202c; --l-accent-bright: #4f93bf; --d-accent-bright: #4f93bf; --l-accent-soft: rgba(40, 114, 161, 0.12); --d-accent-soft: rgba(79, 147, 191, 0.18); --l-accent-2: #365f7a; --d-accent-2: #cbdde9; --l-accent-2-soft: rgba(203, 221, 233, 0.6); --d-accent-2-soft: rgba(203, 221, 233, 0.14); --l-cta-bg: #12283a; --d-cta-bg: #cbdde9; --l-cta-fg: #ffffff; --d-cta-fg: #12283a; --l-cloud-top: color-mix(in srgb, #cbdde9 85%, #f4f8fb); --d-cloud-top: color-mix(in srgb, #2872a1 32%, #16232d); --l-cloud-glow: rgba(40, 114, 161, 0.18); --d-cloud-glow: rgba(203, 221, 233, 0.10); --l-ring: 0 0 0 3px rgba(40, 114, 161, 0.25); --d-ring: 0 0 0 3px rgba(127, 182, 220, 0.30); --l-shadow: 0 1px 2px rgba(18, 40, 58, 0.04), 0 4px 16px rgba(18, 40, 58, 0.06); --l-shadow-lift: 0 2px 4px rgba(18, 40, 58, 0.06), 0 12px 28px rgba(18, 40, 58, 0.10); --term-bg: #0f1c26; --term-head: #14232f; --term-border: #26394a; --term-text: #d4e0ea; --term-muted: #7f95a8; --term-dot: #33475a; --term-cmd: #7fb6dc; --term-key: #b8cbdb; --term-str: #d4e0ea; --term-num: #9fd0f0; --term-punc: #5f7588; --term-hl: #e2eef6; --term-hl-soft: rgba(203, 221, 233, 0.12); } /* --- Zypresse & Sand --------------------------------------------------------- Cyprus #004741 und Sand #F0EDE4 — die einzige Welt, deren Hauptfarbe dunkel genug für Text ist (9,3 : 1 auf Sand). Sand ist hier die Seitenfarbe, Zypresse der Knopf. Im Dunkelmodus kehrt es sich um: tiefes Zypressengrün als Fläche, Sand als Schrift. Der Zweitakzent ist eine Bronze #7d5f34, die Textform von Sand. */ [data-palette="cyprus-sand"] { --brand-1: #004741; --brand-2: #f0ede4; --l-bg: #f0ede4; --d-bg: #0e2320; --l-bg-elevated: #f7f5ee; --d-bg-elevated: #12302c; --l-surface: #faf8f3; --d-surface: #153632; --l-surface-2: #e7e3d7; --d-surface-2: #1d423d; --l-border: #d9d3c3; --d-border: #2c5550; --l-border-strong: #c1b9a4; --d-border-strong: #3f6b65; --l-text: #0f2a27; --d-text: #f0ede4; --l-text-dim: #4d5f5b; --d-text-dim: #bfc9c2; --l-text-faint: #7c8a86; --d-text-faint: #8fa19b; --l-accent: #004741; --d-accent: #7fc3b7; --l-accent-hover: #00332f; --d-accent-hover: #a4d8cf; --l-on-accent: #ffffff; --d-on-accent: #0e2320; --l-accent-bright: #2d7a71; --d-accent-bright: #2d7a71; --l-accent-soft: rgba(0, 71, 65, 0.10); --d-accent-soft: rgba(127, 195, 183, 0.14); --l-accent-2: #7d5f34; --d-accent-2: #e6d9bf; --l-accent-2-soft: rgba(199, 170, 120, 0.22); --d-accent-2-soft: rgba(240, 237, 228, 0.12); --l-cta-bg: #004741; --d-cta-bg: #f0ede4; --l-cta-fg: #f0ede4; --d-cta-fg: #0e2320; --l-cloud-top: color-mix(in srgb, #004741 10%, #f0ede4); --d-cloud-top: color-mix(in srgb, #2d7a71 28%, #0e2320); --l-cloud-glow: rgba(0, 71, 65, 0.12); --d-cloud-glow: rgba(240, 237, 228, 0.08); --l-ring: 0 0 0 3px rgba(0, 71, 65, 0.25); --d-ring: 0 0 0 3px rgba(127, 195, 183, 0.30); --l-shadow: 0 1px 2px rgba(15, 42, 39, 0.05), 0 4px 16px rgba(15, 42, 39, 0.07); --l-shadow-lift: 0 2px 4px rgba(15, 42, 39, 0.07), 0 12px 28px rgba(15, 42, 39, 0.11); --term-bg: #0a1c1a; --term-head: #0f2522; --term-border: #214540; --term-text: #d9dcd3; --term-muted: #7f9a94; --term-dot: #2f504a; --term-cmd: #7fc3b7; --term-key: #b9cdc7; --term-str: #d9dcd3; --term-num: #f0ede4; --term-punc: #5f7a74; --term-hl: #f0ede4; --term-hl-soft: rgba(240, 237, 228, 0.10); } /* --- Cyber Grape & Acid Lime ------------------------------------------------ Cyber Grape #6D28D9 und Acid Lime #D7FF00 — die lauteste Welt. Traube trägt Text (7,1 : 1); Limone leuchtet nur auf Dunkel und wird hell als Text zum Olivton #5a6b00. Der Knopf ist Nachtviolett mit limonener Schrift (15 : 1) — das ist die Paarung, die man von den beiden erwartet. */ [data-palette="grape-lime"] { --brand-1: #6d28d9; --brand-2: #d7ff00; --l-bg: #f8f7fc; --d-bg: #150f24; --l-bg-elevated: #ffffff; --d-bg-elevated: #1c1530; --l-surface: #ffffff; --d-surface: #211a38; --l-surface-2: #f1eefa; --d-surface-2: #2b2347; --l-border: #e2dcf3; --d-border: #3c3360; --l-border-strong: #c8bfe6; --d-border-strong: #55497e; --l-text: #17102b; --d-text: #f3f0fa; --l-text-dim: #524a68; --d-text-dim: #bcb4d0; --l-text-faint: #7e7695; --d-text-faint: #8f87a8; --l-accent: #6d28d9; --d-accent: #b794f6; --l-accent-hover: #5b21b6; --d-accent-hover: #cdb4fb; --l-on-accent: #ffffff; --d-on-accent: #150f24; --l-accent-bright: #8b5cf6; --d-accent-bright: #8b5cf6; --l-accent-soft: rgba(109, 40, 217, 0.10); --d-accent-soft: rgba(139, 92, 246, 0.18); --l-accent-2: #5a6b00; --d-accent-2: #d7ff00; --l-accent-2-soft: rgba(215, 255, 0, 0.28); --d-accent-2-soft: rgba(215, 255, 0, 0.12); --l-cta-bg: #17102b; --d-cta-bg: #d7ff00; --l-cta-fg: #d7ff00; --d-cta-fg: #150f24; --l-cloud-top: color-mix(in srgb, #6d28d9 10%, #f8f7fc); --d-cloud-top: color-mix(in srgb, #6d28d9 32%, #150f24); --l-cloud-glow: rgba(215, 255, 0, 0.28); --d-cloud-glow: rgba(215, 255, 0, 0.10); --l-ring: 0 0 0 3px rgba(109, 40, 217, 0.25); --d-ring: 0 0 0 3px rgba(183, 148, 246, 0.30); --l-shadow: 0 1px 2px rgba(23, 16, 43, 0.04), 0 4px 16px rgba(23, 16, 43, 0.06); --l-shadow-lift: 0 2px 4px rgba(23, 16, 43, 0.06), 0 12px 28px rgba(23, 16, 43, 0.10); --term-bg: #100b1c; --term-head: #160f27; --term-border: #2b2245; --term-text: #d9d3ea; --term-muted: #8b82a6; --term-dot: #3a3058; --term-cmd: #b794f6; --term-key: #c7bde0; --term-str: #d9d3ea; --term-num: #d7ff00; --term-punc: #6b6286; --term-hl: #d7ff00; --term-hl-soft: rgba(215, 255, 0, 0.09); } /* --- REXAGO Rot & Gold ------------------------------------------------------- Die Farben des REXAGO Data Shops: Rot #B70E0C und Gold #CBA241 (aus dessen template.main.css, 25.09.2026). Rot trägt Text (6,8 : 1) und ist der Knopf; Gold nur als Fläche und Wolke, als Text ein Ocker #7d5f16 (5,9 : 1). Dunkel: warmes Anthrazit, Rot aufgehellt, Gold als Knopf. */ [data-palette="rexago"] { --brand-1: #b70e0c; --brand-2: #cba241; --l-bg: #f7f5f2; --d-bg: #1c1a19; --l-bg-elevated: #fdfcfb; --d-bg-elevated: #242120; --l-surface: #ffffff; --d-surface: #282524; --l-surface-2: #f0ece6; --d-surface-2: #322e2c; --l-border: #e3ddd4; --d-border: #45403d; --l-border-strong: #c9c1b6; --d-border-strong: #5c5652; --l-text: #212121; --d-text: #f4f1ed; --l-text-dim: #5b5652; --d-text-dim: #bfb8b2; --l-text-faint: #86807a; --d-text-faint: #8f8883; --l-accent: #b70e0c; --d-accent: #f28b86; --l-accent-hover: #8e0b09; --d-accent-hover: #f7a8a4; --l-on-accent: #ffffff; --d-on-accent: #1c1a19; --l-accent-bright: #d9302d; --d-accent-bright: #d9302d; --l-accent-soft: rgba(183, 14, 12, 0.08); --d-accent-soft: rgba(217, 48, 45, 0.16); --l-accent-2: #7d5f16; --d-accent-2: #e0c26a; --l-accent-2-soft: rgba(203, 162, 65, 0.22); --d-accent-2-soft: rgba(203, 162, 65, 0.14); --l-cta-bg: #b70e0c; --d-cta-bg: #cba241; --l-cta-fg: #ffffff; --d-cta-fg: #1c1a19; --l-cloud-top: color-mix(in srgb, #cba241 18%, #f7f5f2); --d-cloud-top: color-mix(in srgb, #b70e0c 22%, #1c1a19); --l-cloud-glow: rgba(183, 14, 12, 0.10); --d-cloud-glow: rgba(203, 162, 65, 0.10); --l-ring: 0 0 0 3px rgba(183, 14, 12, 0.22); --d-ring: 0 0 0 3px rgba(242, 139, 134, 0.30); --l-shadow: 0 1px 2px rgba(33, 33, 33, 0.04), 0 4px 16px rgba(33, 33, 33, 0.06); --l-shadow-lift: 0 2px 4px rgba(33, 33, 33, 0.06), 0 12px 28px rgba(33, 33, 33, 0.10); --term-bg: #141212; --term-head: #1a1817; --term-border: #2e2a28; --term-text: #ddd8d2; --term-muted: #8f8883; --term-dot: #3c3735; --term-cmd: #f28b86; --term-key: #cdc5bd; --term-str: #ddd8d2; --term-num: #e0c26a; --term-punc: #6f6863; --term-hl: #e0c26a; --term-hl-soft: rgba(203, 162, 65, 0.10); } /* --- Cyan & Violett — die Farbwelt bis zum 24.09.2026 --------------------- Bleibt als zweite Welt erhalten, damit sich umschalten und vergleichen lässt. Cyan-Teal als Marke („Signal"), Violett als Zweitakzent. */ [data-palette="cyan-violet"] { --brand-1: #06b6d4; --brand-2: #6d5ae0; --l-bg: #f7f9fb; --d-bg: #1b2330; --l-bg-elevated: #ffffff; --d-bg-elevated: #232d3d; --l-surface: #ffffff; --d-surface: #263041; --l-surface-2: #f2f5f8; --d-surface-2: #303c50; --l-border: #e1e7ee; --d-border: #3e4d64; --l-border-strong: #cbd5e1; --d-border-strong: #546882; --l-text: #0b1220; --d-text: #edf2f8; --l-text-dim: #566578; --d-text-dim: #aebdd0; --l-text-faint: #8494a6; --d-text-faint: #8a9bb0; --l-accent: #0e7490; --d-accent: #22d3ee; --l-accent-hover: #155e75; --d-accent-hover: #67e8f9; --l-on-accent: #ffffff; --d-on-accent: #0b1220; --l-accent-bright: #06b6d4; --d-accent-bright: #22d3ee; --l-accent-soft: rgba(6, 182, 212, 0.10); --d-accent-soft: rgba(34, 211, 238, 0.12); --l-accent-2: #6d5ae0; --d-accent-2: #a78bfa; --l-accent-2-soft: rgba(109, 90, 224, 0.10); --d-accent-2-soft: rgba(167, 139, 250, 0.13); --l-cta-bg: #0b1220; --d-cta-bg: #22d3ee; --l-cta-fg: #ffffff; --d-cta-fg: #0b1220; --l-cloud-top: color-mix(in srgb, #06b6d4 14%, #f7f9fb); --d-cloud-top: color-mix(in srgb, #22d3ee 14%, #1b2330); --l-cloud-glow: rgba(109, 90, 224, 0.14); --d-cloud-glow: rgba(167, 139, 250, 0.12); --l-ring: 0 0 0 3px rgba(6, 182, 212, 0.22); --d-ring: 0 0 0 3px rgba(34, 211, 238, 0.25); --l-shadow: 0 1px 2px rgba(11, 18, 32, 0.04), 0 4px 16px rgba(11, 18, 32, 0.05); --l-shadow-lift: 0 2px 4px rgba(11, 18, 32, 0.06), 0 12px 28px rgba(11, 18, 32, 0.09); --term-bg: #0d1524; --term-head: #111c30; --term-border: #24334b; --term-text: #c9d6e8; --term-muted: #7d90ab; --term-dot: #33445f; --term-cmd: #7dd3fc; --term-key: #93c5fd; --term-str: #86efac; --term-num: #fbbf24; --term-punc: #64748b; --term-hl: #f0abfc; --term-hl-soft: rgba(240, 171, 252, 0.10); } /* ========================================================================= Modus: hell oder dunkel. Kennt keine Farbe — bildet nur ab. Hell ist die Vorgabe. Dunkel kommt entweder vom System (`prefers-color-scheme`) oder aus dem Umschalter im Kopf, der `data-theme` auf setzt und damit gewinnt. Die beiden Dunkel-Blöcke sind absichtlich identisch — CSS kann eine Regel nicht für zwei Bedingungen teilen, ohne dass eine die andere überstimmt. ========================================================================= */ :root { --bg: var(--l-bg); --bg-elevated: var(--l-bg-elevated); --surface: var(--l-surface); --surface-2: var(--l-surface-2); --border: var(--l-border); --border-strong: var(--l-border-strong); --text: var(--l-text); --text-dim: var(--l-text-dim); --text-faint: var(--l-text-faint); --accent: var(--l-accent); --accent-hover: var(--l-accent-hover); --on-accent: var(--l-on-accent); --accent-bright: var(--l-accent-bright); --accent-soft: var(--l-accent-soft); --accent-2: var(--l-accent-2); --accent-2-soft: var(--l-accent-2-soft); --cta-bg: var(--l-cta-bg); --cta-fg: var(--l-cta-fg); --cloud-top: var(--l-cloud-top); --cloud-glow: var(--l-cloud-glow); --ring: var(--l-ring); --shadow: var(--l-shadow); --shadow-lift: var(--l-shadow-lift); /* --- Status — in jeder Farbwelt gleich, damit „ok" nie nach Marke aussieht ------------------------------------------------------------ */ --ok: #2f7a5c; --ok-soft: rgba(47, 122, 92, 0.12); --warn: #b1651f; --warn-soft: rgba(177, 101, 31, 0.12); --bad: #b8404f; --bad-soft: rgba(184, 64, 79, 0.10); /* --- Form ------------------------------------------------------------ */ --radius: 12px; --radius-sm: 8px; /* Grosse Flächen der Startseite. Innen gilt: innerer Radius = äusserer − Abstand (Auftrag 017, D11). */ --radius-lg: 16px; /* Eine Bewegungskurve für die Startseite (D12). */ --ease-out: cubic-bezier(.22, 1, .36, 1); --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: var(--d-bg); --bg-elevated: var(--d-bg-elevated); --surface: var(--d-surface); --surface-2: var(--d-surface-2); --border: var(--d-border); --border-strong: var(--d-border-strong); --text: var(--d-text); --text-dim: var(--d-text-dim); --text-faint: var(--d-text-faint); --accent: var(--d-accent); --accent-hover: var(--d-accent-hover); --on-accent: var(--d-on-accent); --accent-bright: var(--d-accent-bright); --accent-soft: var(--d-accent-soft); --accent-2: var(--d-accent-2); --accent-2-soft: var(--d-accent-2-soft); --cta-bg: var(--d-cta-bg); --cta-fg: var(--d-cta-fg); --cloud-top: var(--d-cloud-top); --cloud-glow: var(--d-cloud-glow); --ring: var(--d-ring); --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 18px rgba(0, 0, 0, 0.22); --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.3), 0 14px 30px rgba(0, 0, 0, 0.28); --ok: #5fc59c; --ok-soft: rgba(95, 197, 156, 0.13); --warn: #f0b458; --warn-soft: rgba(240, 180, 88, 0.13); --bad: #f08a96; --bad-soft: rgba(240, 138, 150, 0.13); color-scheme: dark; } } /* Explizite Wahl im Umschalter — muss den Systemwert überschreiben. */ :root[data-theme="dark"] { /* Werte identisch zum prefers-color-scheme-Block oben halten. */ --bg: var(--d-bg); --bg-elevated: var(--d-bg-elevated); --surface: var(--d-surface); --surface-2: var(--d-surface-2); --border: var(--d-border); --border-strong: var(--d-border-strong); --text: var(--d-text); --text-dim: var(--d-text-dim); --text-faint: var(--d-text-faint); --accent: var(--d-accent); --accent-hover: var(--d-accent-hover); --on-accent: var(--d-on-accent); --accent-bright: var(--d-accent-bright); --accent-soft: var(--d-accent-soft); --accent-2: var(--d-accent-2); --accent-2-soft: var(--d-accent-2-soft); --cta-bg: var(--d-cta-bg); --cta-fg: var(--d-cta-fg); --cloud-top: var(--d-cloud-top); --cloud-glow: var(--d-cloud-glow); --ring: var(--d-ring); --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 18px rgba(0, 0, 0, 0.22); --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.3), 0 14px 30px rgba(0, 0, 0, 0.28); --ok: #5fc59c; --ok-soft: rgba(95, 197, 156, 0.13); --warn: #f0b458; --warn-soft: rgba(240, 180, 88, 0.13); --bad: #f08a96; --bad-soft: rgba(240, 138, 150, 0.13); color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Sanfter Farbwechsel beim Umschalten — aber nicht bei jedem Hover. */ body, header.site, .card, .result-item, pre, input, select, textarea { transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto; } } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; } /* Die eine Breite für Kopfzeile, Inhalt und Fusszeile (15.09.2026). 1140 war auf eine reine Verkaufsseite zugeschnitten. Der Kundenbereich und die Entscheidungsvorlage tragen aber Tabellen, Boards und Protokolle — die standen darin schmal und wirkten aus der Mitte gerückt. Die Vorlage hatte sich deshalb ihre eigene Breite gesetzt, und dann war der Kopf schmaler als der Inhalt darunter. Eine Klasse für alle drei Bereiche heisst: Es gibt genau eine Stelle, an der sich das ändern lässt. Lesbarkeit regeln die Textspalten selbst (`p.lead`, `.oq-info p`) über `ch` — nicht der Rahmen. Am 15.09.2026 auf 1400 verbreitert, am 21.09.2026 wieder auf 1140 zurück: „jetzt wirkt es ziemlich unharmonisch". Der übliche Wert hat einen Grund — auf einem breiten Schirm laufen Kopfzeile, Text und Fusszeile sonst auseinander, und nichts hat mehr eine gemeinsame Kante. */ .wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; } /* --- Kopfzeile ----------------------------------------------------------- */ header.site { border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg-elevated) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); position: sticky; top: 0; z-index: 20; } header.site .wrap { display: flex; align-items: center; gap: 24px; height: 62px; } .logo { font-weight: 700; font-size: 18px; letter-spacing: -0.45px; color: var(--text); display: inline-flex; align-items: center; gap: 8px; } .logo:hover { text-decoration: none; } .logo .mark { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); display: inline-block; position: relative; flex: none; } .logo .mark::after { content: ""; position: absolute; inset: 7px; border-radius: 3px; background: var(--bg-elevated); } nav.site { display: flex; gap: 4px; margin-left: auto; align-items: center; flex-wrap: wrap; } nav.site a { color: var(--text-dim); font-size: 14px; font-weight: 500; padding: 6px 11px; border-radius: var(--radius-sm); } nav.site a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; } nav.site a.active { color: var(--accent); background: var(--accent-soft); } /* Der „Konto anlegen"-Knopf im Kopf: nav.site a ist spezifischer als .btn und würde die weiße Knopfschrift auf dem Farbverlauf überstimmen. */ nav.site a.btn, nav.site a.btn:hover { color: var(--on-accent); background: var(--accent); } .theme-toggle { margin-left: 6px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dim); cursor: pointer; padding: 0; font-size: 15px; line-height: 1; } .theme-toggle:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); filter: none; } /* Sprachwahl: Globus plus Kürzel-Paar, als ein zusammenhängendes Element. Keine Flaggen — eine Flagge steht für ein Land, nicht für eine Sprache. */ .lang-switch { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; padding: 2px 3px 2px 7px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); } .lang-switch .globe { display: inline-flex; color: var(--text-faint); margin-right: 3px; } .lang-switch .globe svg { width: 14px; height: 14px; } nav.site .lang-switch a { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; padding: 3px 8px; border-radius: 999px; color: var(--text-faint); background: transparent; } nav.site .lang-switch a:hover { color: var(--text); background: var(--surface-2); } nav.site .lang-switch a.current { color: var(--on-accent); background: var(--accent); } /* --- Bausteine ----------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .card.flat { box-shadow: none; } .grid { display: grid; gap: 16px; } .grid.c2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } /* Höchstens zwei Spalten — für Kartenpaare, die paarweise bleiben sollen (die „Wege hinein" der Startseite liefen sonst 3+1). */ .grid.halves { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); } .grid.c3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .grid.c4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } h1 { font-size: clamp(30px, 4.2vw, 42px); line-height: 1.12; letter-spacing: -1.1px; font-weight: 700; margin: 0 0 14px; } h2 { font-size: 21px; letter-spacing: -0.45px; font-weight: 650; margin: 44px 0 16px; } h3 { font-size: 15px; font-weight: 650; margin: 0 0 8px; letter-spacing: -0.1px; } h4 { font-size: 15px; font-weight: 650; margin: 0 0 6px; } p.lead { font-size: 17.5px; color: var(--text-dim); max-width: 72ch; margin: 0 0 22px; } .muted { color: var(--text-dim); } .faint { color: var(--text-faint); } .small { font-size: 13.5px; } code, pre, .mono { font-family: var(--mono); font-size: 13px; } pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 16px; overflow-x: auto; margin: 0; line-height: 1.6; } code.inline { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 1.5px 6px; font-size: 12.5px; color: var(--text); } /* Kennzahlen — mit Verlaufs-Ziffern, damit Zahlen die Blickführung tragen. */ .metric { font-size: 28px; font-weight: 680; letter-spacing: -1px; line-height: 1.15; font-variant-numeric: tabular-nums; background: linear-gradient(135deg, var(--accent), var(--accent-bright)); -webkit-background-clip: text; background-clip: text; color: transparent; } .metric-label { font-size: 11.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.7px; font-weight: 600; margin-top: 3px; } .badge { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2.5px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim); background: var(--surface-2); text-transform: uppercase; letter-spacing: 0.6px; vertical-align: 2px; } .badge.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 32%, transparent); background: var(--ok-soft); } .badge.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 32%, transparent); background: var(--warn-soft); } .badge.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 32%, transparent); background: var(--bad-soft); } .badge.accent { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 32%, transparent); background: var(--accent-2-soft); } .notice { border: 1px solid color-mix(in srgb, var(--warn) 26%, var(--border)); border-left: 3px solid var(--warn); background: var(--warn-soft); padding: 13px 17px; border-radius: var(--radius-sm); font-size: 14px; margin: 0 0 26px; } .notice.info { border-color: color-mix(in srgb, var(--accent-bright) 26%, var(--border)); border-left-color: var(--accent-bright); background: var(--accent-soft); } /* --- Formular ------------------------------------------------------------ */ label { display: block; font-size: 12px; color: var(--text-dim); margin: 0 0 5px; font-weight: 600; letter-spacing: 0.1px; } input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], select, textarea { width: 100%; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 8px 11px; font-size: 14px; font-family: inherit; } select[multiple] { min-height: 112px; padding: 4px; } select[multiple] option { padding: 4px 7px; border-radius: 5px; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-bright); box-shadow: var(--ring); } .field { margin: 0 0 14px; } .checkline { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text); margin: 0 0 9px; cursor: pointer; } .checkline input { width: auto; accent-color: var(--accent-bright); } button, .btn { background: var(--accent); color: var(--on-accent); border: 0; border-radius: var(--radius-sm); padding: 10px 19px; font-size: 14px; font-weight: 650; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 8px; letter-spacing: -0.1px; } .btn:hover { text-decoration: none; } button:hover, .btn:hover { background: var(--accent-hover); box-shadow: var(--shadow-lift); } button:active, .btn:active { box-shadow: none; } button:focus-visible, .btn:focus-visible, a:focus-visible { outline: none; box-shadow: var(--ring); } button.ghost, .btn.ghost { background: var(--surface); color: var(--text-dim); border: 1px solid var(--border); font-weight: 600; box-shadow: none; } button.ghost:hover, .btn.ghost:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); filter: none; box-shadow: none; } button:disabled { opacity: 0.45; cursor: not-allowed; filter: none; box-shadow: none; } /* --- Rechtsseiten --------------------------------------------------------- */ nav.legal { margin-top: 14px; display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; } nav.legal a { color: var(--text-dim); } nav.legal a:hover { color: var(--accent); } /* --- Anmeldung ----------------------------------------------------------- */ .auth { max-width: 420px; margin: 6vh auto 0; } .auth .card { padding: 30px 30px 26px; } .auth h1 { font-size: 26px; margin-bottom: 12px; } .auth code { font-size: 12.5px; } /* Der Abmelden-Knopf sitzt in der Navigation und darf sie nicht auseinander- ziehen — deshalb kleiner als ein normaler Knopf und ohne Formularabstand. */ .logout-form { display: inline-flex; margin: 0; } .logout-form button { padding: 5px 12px; font-size: 13px; } /* --- Tabellen ------------------------------------------------------------ */ table { width: 100%; border-collapse: collapse; font-size: 14px; } th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; } th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.65px; color: var(--text-faint); font-weight: 700; background: var(--surface-2); } th:first-child { border-top-left-radius: var(--radius-sm); } th:last-child { border-top-right-radius: var(--radius-sm); } tbody tr:hover { background: var(--surface-2); } tr:last-child td { border-bottom: 0; } .table-scroll { overflow-x: auto; } td { font-variant-numeric: tabular-nums; } /* --- Playground ---------------------------------------------------------- */ .pg { display: grid; grid-template-columns: 340px 1fr; gap: 22px; align-items: start; } @media (max-width: 940px) { .pg { grid-template-columns: 1fr; } } .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 0 0 20px; flex-wrap: wrap; } .tabs button { background: transparent; color: var(--text-dim); border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 9px 13px; font-weight: 600; font-size: 14px; box-shadow: none; margin-bottom: -1px; } .tabs button:hover { color: var(--text); filter: none; box-shadow: none; background: transparent; } .tabs button.active { color: var(--accent); border-bottom-color: var(--accent-bright); } .result-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin: 0 0 12px; background: var(--surface); box-shadow: var(--shadow); } .result-item h4 { margin: 0 0 6px; font-size: 15.5px; } .kv { display: grid; grid-template-columns: 158px 1fr; gap: 4px 14px; font-size: 13.5px; } .kv dt { color: var(--text-dim); font-weight: 500; } .kv dd { margin: 0; } .evidence { font-size: 12.5px; color: var(--text-dim); border-left: 2px solid color-mix(in srgb, var(--accent-bright) 45%, var(--border)); padding-left: 11px; margin-top: 10px; } .pill { display: inline-block; background: var(--accent-2-soft); color: var(--accent-2); border-radius: 6px; padding: 1.5px 8px; font-size: 12px; font-weight: 550; margin: 0 4px 4px 0; } /* --- Beispiele ----------------------------------------------------------- */ .example { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); margin: 0 0 18px; overflow: hidden; } .example > header { padding: 18px 20px 0; } .example h3 { font-size: 17px; letter-spacing: -0.3px; margin: 8px 0 6px; } .example .who { font-size: 13.5px; color: var(--text-dim); margin: 0 0 14px; } .example .body { padding: 0 20px 18px; } .example .actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-top: 14px; } .example .out { border-top: 1px solid var(--border); background: var(--surface-2); padding: 16px 20px; } .example .out:empty { display: none; } .cat-filter { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 22px; } .cat-filter button { background: var(--surface); color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: 6px 15px; font-size: 13.5px; font-weight: 600; box-shadow: none; } .cat-filter button:hover { color: var(--text); border-color: var(--border-strong); filter: none; box-shadow: none; } .cat-filter button.active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent-bright) 40%, transparent); color: var(--accent); } .hint { font-size: 13px; color: var(--text-dim); background: var(--accent-soft); border-radius: var(--radius-sm); padding: 10px 13px; margin-top: 13px; border-left: 2px solid var(--accent-bright); } /* --- Startseite (Auftrag 003) -------------------------------------------- Die Verkaufsfläche darf dichter gestaltet sein als die Werkzeugseiten: Hero mit Terminal, Schritte-Leiste, Preiskarten, Zahlen-Band. Alles ohne Bilder und ohne Fremd-Assets — nur CSS und Inline-SVG. */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; } .eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--brand-1), var(--brand-2)); } .grad { background: linear-gradient(120deg, var(--accent), var(--accent-bright)); -webkit-background-clip: text; background-clip: text; color: transparent; } .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; } .chip { font-size: 12.5px; font-weight: 600; color: var(--text-dim); border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 4.5px 12px; } /* Das Terminal-Fenster ist in beiden Modi dunkel — es ist ein Zitat aus der Werkzeugwelt, kein Teil des Farbschemas. */ .term { background: var(--term-bg); border: 1px solid var(--term-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); overflow: hidden; min-width: 0; } .term > header { display: flex; align-items: center; gap: 7px; padding: 11px 15px; background: var(--term-head); border-bottom: 1px solid var(--term-border); } .term .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--term-dot); } .term .dot:nth-child(1) { background: #f87171; } .term .dot:nth-child(2) { background: #fbbf24; } .term .dot:nth-child(3) { background: #34d399; } .term .title { margin-left: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--term-muted); letter-spacing: 0.2px; } .term pre { background: transparent; border: 0; border-radius: 0; padding: 15px 17px 17px; color: var(--term-text); font-size: 12.5px; line-height: 1.7; } .t-cmd { color: var(--term-cmd); } .t-flag { color: var(--term-muted); } .t-str { color: var(--term-str); } .t-key { color: var(--term-key); } .t-num { color: var(--term-num); } .t-punc { color: var(--term-punc); } .t-hl { color: var(--term-hl); font-weight: 600; } .way-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; } .way-icon.alt { background: var(--accent-2-soft); color: var(--accent-2); } .way-icon svg { width: 20px; height: 20px; } /* --- Startseite (Auftrag 017, zweite Fassung 24.09.2026) ------------------ Form nach dem Vorbild api.skael.de, Farbwelt unsere: zentrierte Überschriftenblöcke (Pillen-Eyebrow → Überschrift → ein Satz → Inhalt), verschachtelte Karten mit konzentrischen Radien, eine warme Kartenvariante für den Schmerz und eine kühle für die Lösung, die dunkle API-Karte als Bühne, viel Luft zwischen den Sektionen. Alles auf `main.landing` gescoped — der Kundenbereich merkt von der Typografie nichts. */ main.wrap { padding-top: 34px; } main.landing { padding-top: 0; } /* Die Wolke: oben Pfirsich (dunkel: Aqua), nach unten die Seitenfarbe, dazu eine Aqua-Insel (dunkel: Pfirsich) rechts. Am `body`, damit sie die volle Breite bekommt, ohne `100vw` — das ergäbe mit Bildlaufleiste einen waagerechten Überlauf. */ body:has(main.landing)::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: min(90vh, 860px); z-index: -1; pointer-events: none; background: radial-gradient(640px 420px at 80% 10%, var(--cloud-glow), transparent 70%), linear-gradient(180deg, var(--cloud-top) 0%, var(--bg) 100%); } /* Kopfzeile auf der Startseite: Pillen-Navigation in der Mitte. */ header.site .wrap { position: relative; } .nav-pill { position: absolute; left: 50%; transform: translateX(-50%); display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--surface) 72%, transparent); } nav.site .nav-pill a { padding: 6px 13px; border-radius: 999px; font-size: 13.5px; } nav.site .nav-pill a:hover { background: var(--surface-2); } @media (max-width: 960px) { .nav-pill { display: none; } } /* Der Beta-Hinweis (seit 24.09.2026 in der Kopfzeile statt als Banner): eine Pille an der Stelle, an der später der Knopf „Konto anlegen" steht. Nur für Besucher, nur solange die Registrierung ruht — dieselbe Bedingung wie der Abschnitt #beta, auf den sie zeigt. */ nav.site a.beta-pill { display: inline-flex; align-items: center; gap: 9px; padding: 5px 13px 5px 6px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent-2) 42%, var(--border)); background: var(--accent-2-soft); color: var(--text); font-size: 13.5px; font-weight: 600; } nav.site a.beta-pill:hover { text-decoration: none; border-color: var(--accent-2); background: var(--accent-2-soft); } nav.site a.beta-pill .badge { vertical-align: 0; } @media (max-width: 560px) { nav.site a.beta-pill .txt { display: none; } nav.site a.beta-pill { padding-right: 6px; } } /* Typografie */ main.landing h1 { font-size: clamp(42px, 7vw, 84px); line-height: 0.98; /* Nicht enger: Systemschriften kleben bei -0.05em. */ letter-spacing: -0.035em; font-weight: 700; margin: 0 0 22px; text-wrap: balance; } main.landing h2 { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 700; margin: 0 0 16px; text-wrap: balance; } main.landing .grad { /* background-clip:text schneidet bei enger Zeilenhöhe die Unterlängen ab — ein Hauch Innenabstand hält das g in „geliefert" ganz. */ padding-bottom: 0.06em; } main.landing p.lead { font-size: clamp(17px, 1.6vw, 20px); max-width: 62ch; margin: 0 auto 26px; } /* Eyebrow als Pille mit Punkt (Skaels Badge), warm oder kühl. */ main.landing .eyebrow { padding: 6px 14px 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 78%, transparent); font-size: 11.5px; letter-spacing: 0.16em; margin: 0 0 22px; } main.landing .eyebrow::before { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 0 4px var(--accent-soft); } /* Auf dem Telefon in einer Zeile halten: weniger Spationierung statt Umbruch — eine zweizeilige Pille sieht aus wie ein Fehler. */ @media (max-width: 480px) { main.landing .eyebrow { font-size: 10.5px; letter-spacing: 0.09em; padding: 5px 12px 5px 9px; } } main.landing .eyebrow.warm { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 32%, var(--border)); } main.landing .eyebrow.warm::before { background: var(--accent-2); box-shadow: 0 0 0 4px var(--accent-2-soft); } /* Knöpfe: der eine satte Knopf je Bildschirm — hell Anthrazit, dunkel Pfirsich. Die Zweitaktion ist ein Textlink mit Pfeil, kein zweiter Knopf. */ main.landing .btn { background: var(--cta-bg); color: var(--cta-fg); border-radius: 999px; padding: 12px 22px; font-size: 15px; box-shadow: 0 10px 28px -14px color-mix(in srgb, var(--cta-bg) 70%, transparent); transition: filter 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), transform 0.22s var(--ease-out); } main.landing .btn:hover { background: var(--cta-bg); color: var(--cta-fg); filter: brightness(1.14); transform: translateY(-1px); box-shadow: 0 14px 32px -14px color-mix(in srgb, var(--cta-bg) 80%, transparent); } main.landing .btn.link { background: transparent; color: var(--accent); padding: 12px 8px; box-shadow: none; } main.landing .btn.link::after { content: "→"; transition: transform 0.22s var(--ease-out); } main.landing .btn.link:hover { background: transparent; color: var(--accent-hover); box-shadow: none; filter: none; transform: none; } main.landing .btn.link:hover::after { transform: translateX(3px); } .cta-row { display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: center; justify-content: center; margin: 0; } /* Hero: zentriert, einspaltig. */ main.landing .hero { text-align: center; max-width: 920px; margin: 0 auto; padding: 92px 0 52px; } main.landing .hero .chips { justify-content: center; margin: 0 0 30px; } main.landing .chip { background: color-mix(in srgb, var(--surface) 78%, transparent); } @media (max-width: 720px) { main.landing .hero { padding: 56px 0 36px; } } /* Sektionen: viel Luft, keine Linien — der Rhythmus ist die Gliederung. */ .block { padding: 96px 0 0; } .block.flush { padding-top: 0; } .block-head { text-align: center; max-width: 820px; margin: 0 auto 44px; } .block-head .lead { margin-bottom: 0; } @media (max-width: 720px) { .block { padding: 64px 0 0; } .block-head { margin-bottom: 30px; } } /* Verschachtelte Karte: aussen 28 px Radius und 10 px Abstand, innen 18 — konzentrisch, deshalb wirken die Ecken sauber. `warm` (Pfirsich) für den Schmerz, `cool` (Aqua) für die Lösung, ohne Zusatz neutral. */ .shell { border: 1px solid var(--border); border-radius: 28px; padding: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--bg-elevated) 100%, transparent), color-mix(in srgb, var(--surface-2) 55%, var(--bg-elevated))), var(--surface); box-shadow: var(--shadow); transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out); } .shell:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); } .shell-inner { border-radius: 18px; padding: 28px; height: 100%; background: var(--surface-2); border: 1px solid var(--border); } .shell.warm .shell-inner { background: var(--accent-2-soft); border-color: color-mix(in srgb, var(--accent-2) 22%, var(--border)); } .shell.cool .shell-inner { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent-bright) 38%, var(--border)); } .shell h3 { font-size: clamp(19px, 2vw, 23px); letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 10px; } .shell p { margin: 0 0 10px; color: var(--text-dim); font-size: 15px; line-height: 1.55; } .shell p:last-child { margin-bottom: 0; } .shell .way-icon { margin-bottom: 16px; } /* Die Schrittnummer als Kreis in der Zweitfarbe. */ .shell .num { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13.5px; margin-bottom: 14px; } .shell ul { margin: 0; padding-left: 20px; } .shell li { font-size: 15px; line-height: 1.55; color: var(--text-dim); margin: 0 0 9px; } .shell li:last-child { margin-bottom: 0; } .shell-grid { display: grid; gap: 20px; } .shell-grid.halves { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); } .shell-grid.thirds { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } @media (max-width: 720px) { .shell { border-radius: 22px; padding: 8px; } .shell-inner { border-radius: 14px; padding: 22px; } } /* Die Bühne (D3): Anfrage links, Antwort rechts, in voller Breite. */ .term.stage { border-radius: 24px; box-shadow: 0 34px 80px -44px color-mix(in srgb, var(--brand-1) 80%, transparent), var(--shadow-lift); } .term.stage .stage-cols { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); } .term.stage .stage-pane + .stage-pane { border-left: 1px solid var(--term-border); } .term.stage .stage-label { display: block; padding: 14px 19px 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--term-muted); } .term.stage pre { font-size: 13px; padding: 8px 19px 20px; } .term.stage .t-prov { display: inline-block; margin: 2px -8px; padding: 1px 8px; border-radius: 6px; background: var(--term-hl-soft); box-shadow: inset 2px 0 0 var(--term-hl); } .stage-caption { margin: 14px 2px 0; font-size: 14.5px; color: var(--text-dim); text-align: center; } @media (max-width: 820px) { .term.stage .stage-cols { grid-template-columns: minmax(0, 1fr); } .term.stage .stage-pane + .stage-pane { border-left: 0; border-top: 1px solid var(--term-border); } } /* Problem gegen Lösung (25.09.2026): links warm, rechts kühl, paarweise. Die Lösung hebt sich ab — kräftigerer Rand, Schatten, das belegende Feld als dunkler Code-Chip in der Terminalfarbe. Auf dem Telefon stapeln sich die Paare: erst das Problem, direkt darunter die Lösung. */ .duel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 22px; } .duel-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; margin: 0 0 8px; } .duel .shell.warm .duel-label { color: var(--accent-2); } .duel .shell.cool .duel-label { color: var(--accent); } .duel .shell.warm:hover { transform: none; box-shadow: var(--shadow); } .duel .shell.cool { border-color: color-mix(in srgb, var(--accent-bright) 45%, var(--border)); box-shadow: var(--shadow-lift); } .duel-code { display: inline-block; margin-top: 14px; padding: 5px 10px; border-radius: 7px; font-family: var(--mono); font-size: 12.5px; background: var(--term-bg); color: var(--term-hl); border: 1px solid var(--term-border); } @media (max-width: 820px) { .duel { grid-template-columns: minmax(0, 1fr); gap: 10px; } .duel .shell.cool { margin-bottom: 18px; } } /* Die Umlaufbahn unter den zwei Türen (25.09.2026): zwei Ringe um das Indizio-Zeichen, Speichen zur Mitte, Pillen mit Symbol je Gattung. Die Position einer Pille kommt aus `--a` (Winkel, in der View gesetzt) und dem Radius der Bahn: erst zur Mitte, drehen, hinausschieben, zurückdrehen — so bleibt die Pille waagerecht. Kein JavaScript, keine Fremdlogos. Unter 820 px passt keine Bahn auf den Schirm: Dann wird es ein Raster. */ .tools { margin-top: 34px; display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; } .tools-heading { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; margin: 0; } .orbit { --a: 0deg; position: relative; width: 100%; max-width: 860px; aspect-ratio: 860 / 680; border: 1px solid var(--border); border-radius: 32px; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent-bright) 18%, transparent) 0, transparent 34%), linear-gradient(180deg, var(--bg-elevated), var(--surface-2)); box-shadow: var(--shadow); overflow: hidden; } /* Speichen: 24 hauchdünne Linien, radial maskiert, damit sie weder in die Mitte noch bis an den Rand laufen. */ .orbit::before { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 50% 50%, var(--border-strong) 0 0.5deg, transparent 0.5deg 15deg); -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 60px, #000 62px, #000 300px, transparent 320px); mask: radial-gradient(circle at 50% 50%, transparent 0 60px, #000 62px, #000 300px, transparent 320px); opacity: 0.7; } .orbit-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent-bright) 35%, var(--border)); } .orbit-ring.inner { width: 340px; height: 340px; } .orbit-ring.outer { width: 580px; height: 580px; border-style: dashed; } .orbit-core { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; transform: translate(-50%, -50%); border-radius: 28px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent-bright) 12%, transparent), var(--shadow-lift); display: grid; place-items: center; } .orbit-core .mark { width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); position: relative; } .orbit-core .mark::after { content: ""; position: absolute; inset: 14px; border-radius: 5px; background: var(--surface); } .orbit-pill { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a))); display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); white-space: nowrap; font-size: 13.5px; font-weight: 650; color: var(--text); transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out); } .orbit-pill.inner { --r: 170px; } .orbit-pill.outer { --r: 290px; } .orbit-pill:hover { box-shadow: var(--shadow-lift); z-index: 2; } .orbit-icon { width: 26px; height: 26px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); } .orbit-icon svg { width: 15px; height: 15px; } /* Markenzeichen: immer auf Weiss, in beiden Modi — die Zeichen tragen ihre eigene Farbe, und Schwarz (Cursor, curl) verschwände sonst im Dunkeln. */ .orbit-icon.brand { background: #ffffff; border: 1px solid var(--border); } .orbit-icon.brand img { width: 16px; height: 16px; display: block; } .orbit-pill.inner .orbit-icon { background: var(--accent-2-soft); color: var(--accent-2); } .orbit-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; } .orbit-text small { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); } .tools-caption { max-width: 64ch; margin: 4px 0 0; } @media (max-width: 820px) { .orbit { aspect-ratio: auto; padding: 18px 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; border-radius: 22px; } .orbit::before, .orbit-ring, .orbit-core { display: none; } .orbit-pill { position: static; transform: none; } } /* Warum Indizio: die gemessenen Zahlen als Kacheln, darunter die Zitate. */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; } .stat { text-align: center; padding: 24px 12px 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); } .stat .metric { font-size: clamp(30px, 3.4vw, 44px); } .stats-note { text-align: center; margin: 12px 0 28px; } .quotes-heading { text-align: center; font-size: clamp(19px, 2vw, 23px); letter-spacing: -0.02em; margin: 40px 0 18px; } .quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; } .quote { position: relative; margin: 0; padding: 18px 24px 22px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); } .quote-mark { display: block; height: 34px; margin: 0 0 6px -2px; font-size: 56px; line-height: 0.6; font-weight: 700; color: var(--accent-2); opacity: 0.6; } .quote p { font-size: 15.5px; line-height: 1.55; margin: 0 0 14px; color: var(--text); } .quote footer { font-size: 13px; color: var(--text-dim); line-height: 1.45; } .quotes-note { text-align: center; margin: 14px 0 0; } /* Schluss-Karte (D9): das letzte Element, ein einziger Knopf. */ .closing { margin-top: 96px; text-align: center; border: 1px solid var(--border); border-radius: 32px; padding: 64px 40px; background: radial-gradient(520px 260px at 50% 0%, var(--accent-2-soft), transparent 70%), var(--surface); box-shadow: var(--shadow); } .closing h2 { margin-bottom: 12px; } .closing p.lead { margin-bottom: 28px; } @media (max-width: 720px) { .closing { margin-top: 64px; padding: 40px 22px; border-radius: 24px; } } /* --- Verwaltung → Darstellung: die Farbwelten zur Auswahl ------------------ Jede Karte trägt `data-palette` und damit die Rohfarben ihrer Welt. Die Demo darin greift bewusst auf `--l-…` und `--d-…` zu, nicht auf `--bg` und `--text`: Die sind auf aufgelöst und würden die Welt der Seite zeigen, nicht die der Karte. */ .palette-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 18px; } .palette-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; } .palette-card.current { border-color: var(--accent-bright); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); } .palette-card.previewing { border-color: var(--ok); } .palette-demo { display: grid; grid-template-columns: 1fr 1fr; } .demo { position: relative; padding: 18px 16px 16px; overflow: hidden; min-height: 150px; } .demo::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 70%; z-index: 0; } .demo > * { position: relative; z-index: 1; } .demo.light { background: var(--l-bg); color: var(--l-text); } .demo.light::before { background: linear-gradient(180deg, var(--l-cloud-top), var(--l-bg)); } .demo.dark { background: var(--d-bg); color: var(--d-text); } .demo.dark::before { background: linear-gradient(180deg, var(--d-cloud-top), var(--d-bg)); } .demo-eyebrow { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid; } .demo.light .demo-eyebrow { color: var(--l-accent); border-color: var(--l-border); background: var(--l-surface); } .demo.dark .demo-eyebrow { color: var(--d-accent); border-color: var(--d-border); background: var(--d-surface); } .demo-h { font-size: 17px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin: 10px 0 12px; } .demo-h em { font-style: normal; } .demo.light .demo-h em { color: var(--l-accent); } .demo.dark .demo-h em { color: var(--d-accent); } .demo-btn { display: inline-block; font-size: 11px; font-weight: 650; padding: 6px 11px; border-radius: 999px; } .demo.light .demo-btn { background: var(--l-cta-bg); color: var(--l-cta-fg); } .demo.dark .demo-btn { background: var(--d-cta-bg); color: var(--d-cta-fg); } .demo-chip { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; border: 1px solid; margin-left: 6px; } .demo.light .demo-chip { color: var(--l-accent-2); border-color: var(--l-border); background: var(--l-accent-2-soft); } .demo.dark .demo-chip { color: var(--d-accent-2); border-color: var(--d-border); background: var(--d-accent-2-soft); } .palette-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .palette-body h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; } .palette-body p { margin: 0; } .palette-swatches { display: flex; gap: 6px; margin: 4px 0 2px; } .swatch { width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.12); } .swatch.added { width: 18px; height: 18px; border-radius: 5px; align-self: center; } .palette-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; } .palette-actions form { margin: 0; } /* Anmerkungen zur Website (Verwaltung → Darstellung): das Formular als Karte, darunter die Liste — Offenes oben, Erledigtes gedämpft. */ .notes-form { margin: 0 0 22px; } .notes-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; } @media (max-width: 620px) { .notes-grid { grid-template-columns: minmax(0, 1fr); } } .notes-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .notes-empty { margin: 0 0 8px; } .notes { display: flex; flex-direction: column; gap: 10px; } .note { border: 1px solid var(--border); border-left: 3px solid var(--accent-bright); border-radius: var(--radius); background: var(--surface); padding: 14px 16px 12px; } .note.done { border-left-color: var(--border-strong); opacity: 0.72; } .note-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; } .note-body { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; } .note.done .note-body { text-decoration: line-through; text-decoration-color: var(--border-strong); } .note-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-faint); } .note-meta form { margin: 0 0 0 auto; } .note-meta button { padding: 4px 10px; font-size: 12px; } /* Die Leiste, solange eine Vorschau läuft — auf jeder Seite. */ .preview-bar { position: sticky; top: 62px; z-index: 19; display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 8px 16px; font-size: 13.5px; font-weight: 600; color: var(--text); background: var(--warn-soft); border-bottom: 1px solid color-mix(in srgb, var(--warn) 40%, var(--border)); } .preview-bar-links { display: inline-flex; gap: 2px; align-items: center; padding: 0 4px; border-left: 1px solid color-mix(in srgb, var(--warn) 30%, var(--border)); border-right: 1px solid color-mix(in srgb, var(--warn) 30%, var(--border)); } .preview-bar-links a { padding: 4px 9px; border-radius: 999px; color: var(--text-dim); font-weight: 600; } .preview-bar-links a:hover { color: var(--text); background: var(--surface); text-decoration: none; } .preview-bar-links a.current { color: var(--accent); background: var(--surface); } .preview-bar-links a.preview-bar-note { color: var(--accent-2); } .preview-bar-links .theme-toggle { margin-left: 4px; width: 30px; height: 30px; background: var(--surface); } .preview-bar-actions { display: inline-flex; gap: 8px; } .preview-bar form { margin: 0; } .preview-bar button { padding: 5px 12px; font-size: 12.5px; } /* --- Fußzeile ------------------------------------------------------------ Vier Spalten statt einer linken Textsäule: Marke, Produkt, Rechtliches, Sprache. Darunter eine Zeile mit Datenschutz-Kurzfassung und Copyright. */ footer.site { border-top: 1px solid var(--border); margin-top: 72px; padding: 38px 0 44px; color: var(--text-dim); font-size: 13.5px; background: var(--bg-elevated); } .foot-cols { display: grid; grid-template-columns: minmax(240px, 2fr) repeat(3, minmax(130px, 1fr)); gap: 32px; align-items: start; } @media (max-width: 780px) { .foot-cols { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 26px; } .foot-brand { grid-column: 1 / -1; } } .foot-brand .claim { margin: 12px 0 0; max-width: 34ch; color: var(--text-dim); } .foot-brand .presented { font-style: italic; color: var(--text-faint); margin: 6px 0 0; } .foot-col { display: flex; flex-direction: column; gap: 8px; } /* h2, weil die Spalten die einzige Gliederung der Fußzeile sind — optisch ist es ein Spaltentitel, nicht eine Überschrift im Seitensinn. */ .foot-col h2 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700; color: var(--text-faint); margin: 0 0 2px; } .foot-col a { color: var(--text-dim); } .foot-col a:hover { color: var(--accent); } .foot-col a.current { color: var(--text); font-weight: 600; } .foot-bottom { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; align-items: baseline; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 12.5px; } .foot-bottom p { margin: 0; max-width: 78ch; } .spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--border-strong); border-top-color: var(--accent-bright); border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: -2px; } @keyframes spin { to { transform: rotate(360deg); } } details > summary { cursor: pointer; list-style: none; } details > summary::-webkit-details-marker { display: none; } details > summary::before { content: "▸ "; color: var(--text-faint); } details[open] > summary::before { content: "▾ "; } /* --- Kundenbereich (Auftrag 004) ----------------------------------------- Kopfzeile mit Kontostand, Unternavigation, Verlaufsgrafik, Schlüssel- Anzeige. Handgeschrieben wie der Rest der Datei — das Projekt hat keinen Build-Schritt (02-architektur.md). Alle Farben kommen aus den vorhandenen Variablen, damit Hell und Dunkel ohne Zweitpflege stimmen. */ .account-head { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-end; justify-content: space-between; margin: 0 0 18px; } .account-head h1 { margin: 0; } .account-head .eyebrow { margin: 0 0 4px; } /* „Angemeldet als …" unter dem Kontonamen (16.09.2026, ADR-017). Klein und ruhig: Das Konto ist die Überschrift, der Zugang die Fussnote dazu — und nicht umgekehrt. */ .account-signed-in { margin: 6px 0 0; font-size: 13px; color: var(--text-dim); } .account-signed-in strong { color: var(--text); font-weight: 600; } .account-balance { text-align: right; } .account-balance .metric { margin: 0; } .account-tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin: 0 0 26px; } .account-tabs a { padding: 9px 14px; font-size: 14px; font-weight: 600; color: var(--text-dim); border-bottom: 2px solid transparent; margin-bottom: -1px; } .account-tabs a:hover { color: var(--text); text-decoration: none; } .account-tabs a.active { color: var(--accent); border-bottom-color: var(--accent-bright); } .account-periods { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 20px; } .account-periods a:hover { text-decoration: none; color: var(--text); } .account-periods a.current { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 38%, transparent); background: var(--accent-2-soft); } /* Balkendiagramm ohne Bibliothek. `align-items: flex-end`, damit die Balken auf der Grundlinie stehen; die Höhe kommt als Prozentwert aus der View. */ .usage-chart { display: flex; align-items: flex-end; gap: 2px; height: 132px; padding: 0; } .usage-bar { flex: 1 1 0; min-width: 2px; height: 100%; display: flex; align-items: flex-end; border-radius: 2px; } .usage-bar:hover { background: var(--surface-2); } .usage-bar > span { display: block; width: 100%; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--accent-bright), var(--accent-2)); } .usage-axis { display: flex; justify-content: space-between; margin-top: 7px; } .delta-plus { color: var(--ok); } .delta-minus { color: var(--text-dim); } /* Die einmalige Anzeige des Klartext-Schlüssels. Umbruch erzwungen, damit ein 49 Zeichen langer Schlüssel auf dem Telefon nicht seitlich hinausläuft — abgeschnitten kopiert ihn niemand vollständig. */ .key-reveal { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; } .key-reveal code { flex: 1 1 320px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13px; word-break: break-all; } .key-revoked td { opacity: 0.55; } .plan-current td { background: var(--accent-soft); } .pager { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; } .pager-step { display: inline-block; min-width: 34px; text-align: center; padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dim); font-weight: 600; } .pager-step:hover { color: var(--text); text-decoration: none; background: var(--surface-2); } .pager-step.disabled { opacity: 0.4; } @media (max-width: 620px) { .account-head { align-items: flex-start; } .account-balance { text-align: left; } } /* --- Kundenbereich: Ausbau (Auftrag 014) --------------------------------- Begrüßung, zweigeteilte Tab-Leiste, Testabfrage, Hinweis auf die Schwesterprodukte. */ .account-welcome { margin: 0 0 20px; } .account-welcome .hello { font-size: 19px; font-weight: 650; margin: 0 0 2px; /* Etwas wärmer als die Überschriften darüber — aber nicht lauter als der Kontostand im Kopf. Die Zahlen bleiben die Hauptsache. */ color: var(--text); } .account-welcome p:last-child { margin: 0; } /* Zwei Gruppen in der Tab-Leiste: links das Konto, rechts das Bauen. */ .account-tabgroup { display: inline-flex; flex-wrap: wrap; } .account-tabsep { width: 1px; align-self: stretch; margin: 6px 11px; background: var(--border); } @media (max-width: 720px) { /* Auf schmalen Schirmen bricht die Leiste ohnehin um — ein senkrechter Strich mitten im Umbruch sähe aus wie ein Fehler. */ .account-tabsep { display: none; } .account-tabgroup { width: 100%; } } /* --- Testabfrage --------------------------------------------------------- */ .wb-key { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .wb-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; } .wb-result-head { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin: 0 0 12px; } .wb-out { margin: 0; max-height: 460px; overflow: auto; font-size: 12.5px; line-height: 1.5; } /* Der Hinweis auf Webshop und REXAGO360. Freundlich abgesetzt, nicht als Werbebanner — er steht am Ende einer Werkzeugseite, nicht davor. */ .sister { margin-top: 34px; padding: 20px 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--accent-soft); } .sister h3 { margin: 0 0 6px; font-size: 17px; } .sister > p { margin: 0 0 14px; font-size: 14px; max-width: 74ch; } .sister .card { background: var(--surface); } .sister h4 { margin: 0 0 4px; font-size: 15px; } /* --- Administrationsbereich (Auftrag 013) --------------------------------- */ .admin-roles { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; margin-bottom: 4px; } .role-own td { background: var(--accent-soft); } @media (max-width: 620px) { .admin-roles { justify-content: flex-start; } } /* Die Entscheidungsvorlage sitzt seit Auftrag 013 im Administrationsbereich und trägt deshalb die Seitennavigation darüber. Ihr eigener Kopf braucht dadurch weniger Abstand nach oben. */ .oq { margin-top: 4px; } /* Link-Karten auf der Übersicht des Kundenbereichs („Integrieren", 18.09.2026): die ganze Karte ist der Link. */ a.link-card { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; } a.link-card strong { color: var(--accent); } a.link-card:hover { border-color: var(--accent-bright); box-shadow: var(--shadow-lift); text-decoration: none; } /* --- Kundenbereich, schlank (19.09.2026) --------------------------------- „Kurz, knackig, informativ, freundlich": fünf Reiter, ein Hinweis pro Seite, Zahlen in einer Zeile statt in Kacheln. */ .account-head { margin-bottom: 12px; align-items: center; } .account-head h1 { font-size: 24px; } a.account-balance { display: flex; flex-direction: column; align-items: flex-end; color: inherit; padding: 6px 14px; border-radius: var(--radius); background: var(--accent-soft); } a.account-balance:hover { text-decoration: none; background: color-mix(in srgb, var(--accent-bright) 16%, transparent); } a.account-balance .metric { font-size: 22px; line-height: 1.2; } .account-tabs a.account-tabs-extern { margin-left: auto; font-weight: 500; } .start-hello { margin: 4px 0 16px; } .start-hello .hello { font-size: 20px; font-weight: 650; margin: 0 0 2px; } .start-hello p:last-child { margin: 0; } .start-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 14px 18px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); background: var(--warn-soft); margin: 0 0 8px; } .start-next.ok { border-color: color-mix(in srgb, var(--ok) 30%, transparent); background: var(--ok-soft); } .start-next .btn { white-space: nowrap; } .start-stats { display: flex; flex-wrap: wrap; gap: 12px 40px; padding: 4px 0 2px; } .start-stats > div { display: flex; flex-direction: column; } .start-stats .metric { font-size: 26px; line-height: 1.2; } .start-stats .metric-label { margin-top: 2px; } .start-recent table td { padding-top: 9px; padding-bottom: 9px; } .start-recent td:first-child { white-space: nowrap; width: 1%; } td.num { text-align: right; white-space: nowrap; } .start-foot { margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--border); } .start-sep { margin: 0 8px; color: var(--border-strong); } .list-switch { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-top: 28px; } .list-switch h2 { margin: 0; } .list-switch nav { display: flex; gap: 7px; } .list-switch a.current { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 38%, transparent); background: var(--accent-2-soft); } .list-switch + * { margin-top: 12px; } details.key-new { margin-top: 18px; } details.key-new > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; } details.key-new > summary::-webkit-details-marker { display: none; } details.key-new[open] > summary { margin-bottom: 14px; } details.key-new[open] > summary .btn { display: none; } .konto-paket { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 40px; } .konto-paket .metric { font-size: 26px; line-height: 1.2; } details.konto-preise { margin: 4px 0 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; background: var(--surface); } details.konto-preise summary { cursor: pointer; font-weight: 600; font-size: 14px; } details.konto-preise table { margin-top: 8px; } .konto-zugang { display: flex; flex-wrap: wrap; gap: 10px 48px; } .sister-strip { margin-top: 26px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--text-dim); } @media (max-width: 620px) { a.account-balance { align-items: flex-start; } .account-tabs a.account-tabs-extern { margin-left: 0; } } /* `display:flex` schlägt das hidden-Attribut — ohne diese Zeile stand die leere Kopfzeile der Antwort schon vor dem ersten Abschicken da. */ .wb-result-head[hidden] { display: none; } /* Das „▸" setzt `details > summary::before` für jede aufklappbare Zeile. Beim Knopf „Neuen Schlüssel ausstellen" ist der Knopf selbst das Zeichen. */ details.key-new > summary::before { content: none; } /* --- Kundenbereich: Segmente und Kacheln (21.09.2026) --------------------- „Tabs finde ich altbacken" — die Unternavigation ist jetzt eine Leiste aus Schaltflächen, die Startseite eine Übersicht aus Karten. Jede Karte ist selbst der Link: alles auf einen Blick, alles einen Klick entfernt. */ .account-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 26px; } .account-nav a { padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text-dim); border: 1px solid transparent; } .account-nav a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; } .account-nav a.active { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent-bright) 30%, transparent); } .account-nav a.account-nav-extern { margin-left: auto; font-weight: 500; } .start-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 18px 0 8px; } .start-card { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; } .start-card:hover { text-decoration: none; border-color: var(--accent-bright); box-shadow: var(--shadow-lift); transform: translateY(-1px); } .start-card .metric { font-size: 30px; line-height: 1.15; } .start-card-label { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); } .start-card-text { margin: 6px 0 8px; color: var(--text-dim); font-size: 14px; line-height: 1.5; } .start-card.accent { background: linear-gradient(140deg, var(--accent-soft), transparent 70%); } .start-card.accent .small { color: var(--accent); font-weight: 600; } .start-card-plan { font-size: 20px; font-weight: 650; line-height: 1.3; margin: 2px 0; } /* Keine Reste am Zeilenende (21.09.2026): Rückmeldung „beim Text ist ganz seltsam umgebrochen, obwohl da noch Platz ist". Ursache war die Lesebreite (`72ch` bei `p.lead`) — die bleibt, aber der Browser verteilt die Wörter jetzt so, dass keine einsame Silbe in der letzten Zeile steht. `balance` für Überschriften (wenige Zeilen, gleichmässig), `pretty` für Fliesstext (nur das Zeilenende wird geglättet). Browser ohne diese Eigenschaften ignorieren sie — kein Ersatz nötig. */ h1, h2, h3, h4, .hello, .start-card-plan { text-wrap: balance; } p, li, dd, dt, summary, label, figcaption, .metric-label { text-wrap: pretty; } /* Ein Link, der zur Einleitung gehört, aber nicht in ihr hängen soll. */ .lead-action { margin: -14px 0 22px; } /* Einmalige Schlüsselanzeige mit Bestätigung, Ersetzen neben Widerrufen (21.09.2026). */ .key-once .key-confirm { margin: 14px 0 8px; font-weight: 600; } .key-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; } .key-actions form { margin: 0; } /* Kontostand oben rechts: grösser und auffälliger (21.09.2026), mit einem kurzen Aufleuchten, wenn die Testabfrage ihn aktualisiert. */ a.account-balance { padding: 12px 22px; min-width: 150px; border: 1px solid color-mix(in srgb, var(--accent-bright) 35%, transparent); background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent-2) 10%, transparent)); box-shadow: var(--shadow); } a.account-balance .metric { font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; } a.account-balance .metric-label { margin-top: 4px; } @keyframes balance-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-bright) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } } a.account-balance.pulse { animation: balance-pulse .9s ease-out; } /* Verlauf der Testabfrage (21.09.2026). */ .tests-table td { vertical-align: middle; } .tests-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; } .tests-actions .btn, .tests-actions button { padding: 5px 12px; font-size: 13px; } .key-list { margin-top: 26px; } .key-list-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; } .key-list-head h2 { margin: 0; } .key-dot { display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 999px; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); vertical-align: middle; } .key-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border: 1px dashed var(--border-strong); border-radius: var(--radius); } .key-empty p { margin: 0; color: var(--text-dim); } button.ghost.danger { color: var(--bad); } .key-legend { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 10px 0 0; color: var(--text-dim); } .key-legend div { display: flex; gap: 6px; } .key-legend dt { font-weight: 600; color: var(--text); } .key-legend dd { margin: 0; } /* --- Zustimmungsseite von OAuth (Auftrag 007, 23.09.2026) ---------------- Beim Bauen waren `.scope-list` und `.oauth-actions` benutzt, aber nie definiert — die Formulare stapelten sich als Bloecke, die Liste bekam Standard-Aufzaehlungspunkte. CSS meldet einen erfundenen Klassennamen nicht, genauso wenig wie eine erfundene Variable (siehe CssTokensTest). Diese Seite ist fuer einen Kunden, der aus HubSpot oder Claude kommt, oft die ERSTE Indizio-Seite ueberhaupt. Sie darf nicht wie ein Rohentwurf aussehen. */ .scope-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; } .scope-list li { display: flex; align-items: baseline; gap: 10px; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } /* Der Haken traegt die Bedeutung, nicht bloss Zierde: Er macht aus einer Aufzaehlung sichtbar eine Liste von Erlaubnissen. */ .scope-list li::before { content: "✓"; color: var(--ok); font-weight: 700; line-height: 1.4; } .scope-list strong { font-weight: 500; line-height: 1.45; } .oauth-actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--border); } .oauth-actions form { margin: 0; } /* „Verbinden" ist die Entscheidung, „Abbrechen" der Ausweg — der Ausweg draengt sich nicht an den Rand, sondern steht daneben und bleibt ruhig. */ .oauth-actions button { margin: 0; } @media (max-width: 520px) { .oauth-actions { flex-direction: column; align-items: stretch; } .oauth-actions form, .oauth-actions button { width: 100%; } } details.key-revoked-list { margin-top: 20px; } details.key-revoked-list summary { font-size: 14px; font-weight: 600; color: var(--text-dim); } details.key-revoked-list table { margin-top: 8px; } /* --- Dashboard / Mein Konto / Menü (21.09.2026) -------------------------- Kopfzeile: nur „Dashboard"; Mein Konto, Administration und Abmelden im Menü hinter dem Anmeldenamen (
, ohne Skript). */ .user-menu { position: relative; } .user-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); font-size: 14px; color: var(--text-dim); max-width: 260px; } .user-menu > summary::-webkit-details-marker { display: none; } .user-menu > summary::before { content: none; } .user-menu > summary:hover, .user-menu[open] > summary { color: var(--text); background: var(--surface-2); } .user-menu > summary.active { color: var(--accent); border-color: color-mix(in srgb, var(--accent-bright) 35%, transparent); } .user-menu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-menu-caret { font-size: 11px; color: var(--text-faint); } .user-menu-list { position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; padding: 6px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lift); z-index: 30; display: flex; flex-direction: column; } .user-menu-list a, .user-menu-list button { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text); background: none; border: 0; font: inherit; font-weight: 500; cursor: pointer; } .user-menu-list a:hover, .user-menu-list button:hover { background: var(--surface-2); text-decoration: none; } .user-menu-list .logout-form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--border); } .user-menu-list .logout-form button { color: var(--text-dim); } /* Mein Konto: Liste links, Inhalt rechts. */ .konto-head { margin: 0 0 18px; } .konto-head h1 { margin: 0; font-size: 24px; } .konto-rahmen { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; align-items: start; } .konto-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 16px; } .konto-nav a { padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-dim); font-weight: 500; } .konto-nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .konto-nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .konto-inhalt > h2:first-child { margin-top: 0; } .konto-inhalt h3 { margin-top: 26px; } @media (max-width: 720px) { .konto-rahmen { grid-template-columns: minmax(0, 1fr); gap: 16px; } .konto-nav { position: static; flex-direction: row; flex-wrap: wrap; } } /* Verbrauchstabelle: Zeitraum und Liste als Formular. */ .usage-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 0 0 8px; } .usage-filter label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; } .usage-filter input[type="date"] { min-width: 150px; } .usage-switch { display: flex; gap: 6px; } .usage-switch label.chip { flex-direction: row; cursor: pointer; } .usage-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .usage-switch label.chip.current { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 38%, transparent); background: var(--accent-2-soft); } th.num { text-align: right; } /* Dashboard → Verbrauch: Aufteilung als Balken. */ .usage-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 16px; } .usage-head .account-periods { margin: 0; } .usage-bars { display: flex; flex-direction: column; gap: 10px; } .usage-row { display: grid; grid-template-columns: minmax(180px, 1fr) 2fr auto; align-items: center; gap: 14px; } .usage-track { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .usage-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand-1), var(--brand-2)); } .usage-value { white-space: nowrap; text-align: right; } @media (max-width: 620px) { .usage-row { grid-template-columns: 1fr; gap: 4px; } } .usage-filter .btn { margin-left: auto; } /* --- Avatar, Menü ganz rechts, Dashboard-Onepager (21.09.2026) ----------- */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .user-menu > summary { padding: 3px; border-radius: 999px; } .avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0.02em; } .user-menu > summary.active .avatar, .user-menu[open] > summary .avatar { box-shadow: 0 0 0 3px var(--accent-soft); } .user-menu-head { padding: 8px 8px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .user-menu-who { display: flex; flex-direction: column; min-width: 0; } .user-menu-who strong { font-size: 14px; } .user-menu-who span { font-size: 12.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; } /* Die Menü-Regel für Knöpfe (Block, volle Breite, linksbündig) ist spezifischer als .theme-toggle — das Symbol rutschte sonst nach links unten. */ .user-menu-list .theme-toggle { display: inline-flex; flex: none; width: 34px; height: 34px; margin: 0; padding: 0; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--border); color: var(--text-dim); } .user-menu-list { min-width: 240px; } /* details[open] > summary::before ist spezifischer als die Menü-Regel — das „▾" stand sonst neben dem Kreis, sobald das Menü offen war. */ .user-menu[open] > summary::before, .user-menu > summary::before { content: none; } /* --- Feinschliff Dashboard + Menü (21.09.2026, zehn Punkte) -------------- */ /* Menü: aktueller Bereich markiert. */ .user-menu-list a.current { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .user-menu-primary { font-weight: 600 !important; color: var(--accent) !important; } .user-menu-list .logout-form, .user-menu-list .user-menu-primary { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); } .user-menu > summary.burger { padding: 8px 10px; border: 1px solid var(--border); } .burger-lines { display: flex; flex-direction: column; gap: 4px; width: 18px; } .burger-lines i { display: block; height: 2px; border-radius: 2px; background: var(--text); } .user-menu-list { min-width: 260px; } /* --- Dashboard (21.09.2026) ---------------------------------------------- Willkommen + Credits, Mosaik in vier gleich hohen Zeilen, Services, darunter Demo/Testen. Die Kacheln sind die Navigation; kein Segment-Menü. Das Ganze ist so bemessen, dass die erste Seite auf einem gewöhnlichen Schirm (ca. 1000 px hoch) mit Services endet. */ .dash-top { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: stretch; margin: 0 0 16px; } .dash-welcome-block { display: flex; flex-direction: column; justify-content: center; padding: 6px 0; } .dash-title { font-size: 32px; line-height: 1.15; margin: 0 0 6px; letter-spacing: -0.02em; text-wrap: balance; } .dash-welcome-block p { margin: 0; } .tile { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); color: var(--text); min-width: 0; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .tile:hover { text-decoration: none; border-color: var(--accent-bright); box-shadow: var(--shadow-lift); transform: translateY(-1px); } .tile-label { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); } .tile-title { font-size: 19px; font-weight: 650; line-height: 1.3; } .tile-big { font-size: 32px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--accent); } .tile-unit { font-size: 14px; font-weight: 500; color: var(--text-dim); letter-spacing: 0; } .tile-sub { font-size: 13.5px; color: var(--text-dim); line-height: 1.5; } .tile-line { font-size: 15px; color: var(--text); font-weight: 600; } /* Beschriftung oben links; der Inhalt (.tile-body) füllt den Rest der Kachel und steht darin mittig. */ .tile-body { display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 4px; min-height: 0; } .tile-body > * { max-width: 100%; } .tile-credits { justify-content: center; align-items: center; text-align: center; background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent-2) 12%, transparent)); border-color: color-mix(in srgb, var(--accent-bright) 35%, transparent); } .tile-credits .tile-big { font-size: 42px; } .tile-credits.pulse { animation: balance-pulse .9s ease-out; } .dash-mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(98px, auto); grid-template-areas: "plan plan billing billing" "plan plan billing billing" "usage usage billing billing" "usage usage docs keys"; gap: 12px; } .tile-plan { grid-area: plan; } .tile-billing { grid-area: billing; } .tile-usage { grid-area: usage; } .tile-docs { grid-area: docs; } .tile-keys { grid-area: keys; } .tile-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; text-align: left; font-size: 14px; } .tile-kv > :nth-child(even) { text-align: right; } .tile-list { display: flex; flex-direction: column; gap: 5px; width: 100%; max-width: 380px; margin: 4px 0 6px; font-size: 13.5px; } .tile-list-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; text-align: left; } .tile-list-row strong { text-align: right; } .tile-chart { display: flex; flex-direction: column; flex: 1; width: 100%; margin-top: 6px; min-height: 0; } .tile-chart .usage-chart { flex: 1; height: auto; min-height: 60px; } .tile-chart .usage-axis { flex: none; } .dash-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; } .tile-svc { gap: 6px; align-items: center; text-align: center; padding: 14px 16px; } .svc-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 17px; } /* Bereiche mit Trenner: gleich viel Luft darüber wie darunter. */ .dash-section { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--border); scroll-margin-top: 16px; } .dash-section > h2 { margin: 0 0 14px; } .dash-testen > .lead { margin-top: 0; } /* Im Testbereich sind „Die Antwort" und „Ihre letzten Tests" Unterpunkte, keine eigenen Bereiche — kleiner, ohne Trenner davor. */ .dash-testen h2 { font-size: 16px; margin: 26px 0 8px; color: var(--text-dim); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } .dash-testen .sister-strip { margin-top: 18px; } @media (max-width: 820px) { .dash-top { grid-template-columns: 1fr; } .dash-mosaic { grid-template-columns: 1fr; grid-template-areas: "plan" "usage" "billing" "docs" "keys"; } } /* --- Mein Konto, ruhig und funktional (22.09.2026) ----------------------- Überschrift ist die Person; Schlüssel ohne Führung; Anschrift mit Name und Firma; Profil mit dem Kreis zum Einstellen; Archiv als Platzhalter. */ .konto-nav-soon { padding: 9px 12px; color: var(--text-faint); cursor: default; } .key-new { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: end; } .key-new .field { margin: 0; } .key-new-note { grid-column: 1 / -1; margin: 10px 0 0; } .avatar-editor { display: flex; align-items: flex-start; gap: 22px; margin-top: 4px; } .avatar-preview { width: 72px; height: 72px; font-size: 26px; flex: none; margin-top: 4px; } .avatar-initials-input { width: 5em; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; } .avatar-colors { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; } .avatar-colors legend { padding: 0; margin-bottom: 8px; color: var(--text-dim); } .avatar-swatch { position: relative; width: 30px; height: 30px; border-radius: 999px; cursor: pointer; box-shadow: 0 0 0 2px var(--surface); } .avatar-swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .avatar-swatch:has(input:checked) { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); } .avatar-swatch:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; } .konto-disabled { opacity: .55; } .konto-disabled input { background: var(--surface-2); } @media (max-width: 560px) { .key-new { grid-template-columns: 1fr; } .key-new button { justify-self: start; } }