/* main.css – einzige Wahrheit für Farben, Typografie, Seitenstruktur (frontend.md Sektion 3, ADR 79). Hell-only zum Launch. */ /* Figtree variable, self-hosted (OFL, s. static/fonts/OFL.txt) – Gewichte 400/600, 800 ausschließlich in der Logo-Zeichnung. Kein externer Font-Request (DSGVO). */ @font-face { font-family: "Figtree"; src: url("../fonts/Figtree-Variable.202cfb54d4e6.woff2") format("woff2-variations"); font-weight: 300 900; font-style: normal; font-display: swap; } :root { /* Neutrale (warm, „Stein/Sand") */ --surface-page: #FAF8F5; --surface-card: #FFFFFF; --surface-section: #F0EBE3; --surface-filter: #F5F1EA; --text-primary: #26221E; --text-secondary: #5C554D; /* A59/ADR 313: von #8A8378 auf #6F6960 gezogen - der alte Wert riss 4,5:1 auf JEDEM Grund (3,16-3,75) und traegt echten Text an elf Stellen, u. a. im geteilten Positions-Baustein und der Nachrichtenzeile. Neuer Wert: 4,58 (Sektion) bis 5,43 (Karte). */ --text-muted: #6F6960; --border: #E4DED4; --border-strong: #D9D2C7; --border-input: #B7AFA3; /* Feld-Rahmen AUF getoenten Flaechen (Tableview-Kopf-Zone, ADR-123- Nachtrag): --border-input haelt auf --surface-filter nur 1,93:1 - eigener Token (Wert = Grau der text-muted-Stufe, bewusst ENTKOPPELT wie die state-Tokens, damit Gate/Rebranding ihn eigenstaendig justieren; 3,33:1 auf filter - im Kontrast-Gate) */ --border-input-tinted: #8A8378; --row-alt: #FAF8F5; --neutral-badge-bg: #E8E4DC; --neutral-badge-text: #444441; /* Lageplan-Zustandsflaechen (A69/ADR 323, Variante B: Muster UND Helligkeit, nicht allein Farbe - Graustufen-/Farbfehlsichtigkeits- tauglich). EIN Pflegeort: Plan-Rects, Schraffur-Pattern (defs im Lageplan-Baustein) UND Legenden-Chips konsumieren diese Tokens. Vermietet-Ton seit A70 (ADR-323-Nachtrag, Prod-Sichtung: #998D7A dominierte bei 11 belegten Kacheln die Flaeche): der Hover-/Aktiv-Ton der Tarif-Kacheln (--surface-filter) - die frei/vermietet-Trennung tragen Rahmen + Ton, die reserviert/vermietet-Trennung traegt die SCHRAFFUR. Kennung auf vermietet: text-primary, 14,0:1. */ --plan-free: #FFFFFF; --plan-hatch: #8A8378; --plan-rented: var(--surface-filter); /* Orange (Logo-Familie, Rebranding 24.07.) – NUR Handlung, ZWEI Stufen: --accent = Flächen/Markierungen OHNE Text (UI-Schwelle 3:1), --accent-strong = Text und text-tragende Füllungen (Schwelle 4,5:1 – Wert vom Kontrast-Gate justiert, Start #B24E10 riss 4,44:1 auf section) */ /* Marken-Akzent - bleibt unveraendert (A59/ADR 313): er traegt an 14 von 15 Stellen KEINEN Text, sondern Rahmen, Flaechen und Outlines. Als UI-Komponentenfarbe gilt 3:1, und das haelt er auf allen Gruenden (3,12-3,70). Die EINE Textverwendung ist auf --accent-strong umgestellt, statt die Marke global zu verschieben. */ --accent: #D5641C; --accent-strong: #AC4B0F; --focus-ring: #26221E; /* EIN neutraler Fokus (Zustands-Standard): nie rot/grün/Orange */ /* Mindestgrößen-Gesetz (ADR 136): DIE eine Definition der Bedienelement- Mindestmaße – Feld-Basis, Buttons und Varianten zitieren die Tokens (Wache test_control_minimum_sizes); einzige dokumentierte Ausnahme ist die Tableview-Filterstufe (ADR-123-Nachtrag). */ --control-font-min: 1rem; /* 16 px – verhindert auch den iOS-Fokus-Zoom */ --control-height-min: 2.75rem; /* 44-px-Touch-Ziel */ --accent-badge-bg: #F9E4D4; --accent-badge-text: #7C360B; --accent-hover: #8F3E0D; /* Blau (Logo-Familie, Rebranding 24.07., ersetzt Seegrün) – Elde/See- Zweitstimme: Links, Info-Badges, Welle */ --sea: #0C5F95; --sea-badge-bg: #DCE9F3; --sea-badge-text: #0A4A75; --sea-light: #7FB3D5; /* nur dekorativ (Welle) */ /* Zustandsfarben der Formulare – UNVERÄNDERTE Werte (Rebranding-Entscheid: Rot/Grün bleiben stehen); vormals Aliasse auf --accent-strong/--sea, als eigene Tokens entkoppelt, damit das Rebranding sie nicht mitzieht */ --state-error: #9A3412; --state-error-bg: #F6E3D7; --state-error-text: #7C2D12; --state-success: #0F766E; --state-success-bg: #D8EEE9; --state-success-text: #0B4F49; /* Amber – Hinweis-Status, Strom-Symbolik */ --amber-badge-bg: #FAEEDA; --amber-badge-text: #633806; --amber-icon: #BA7517; /* Overlay-Standard (ADR 114): Bedienelemente AUF Bildern stehen IMMER auf eigener Kontrastflaeche - halbtransparentes Stein-Schwarz (#26221E). Deckkraft 0.55 statt 0.45: das Gate rechnet den Worst-Case ueber Reinweiss (Komposit #888583) - Weiss haelt dort 3,67:1 (0.45 risse 2,74:1); Hover 0.7 (Komposit #676462, 5,87:1) */ --overlay-scrim: rgba(38, 34, 30, 0.55); --overlay-scrim-hover: rgba(38, 34, 30, 0.7); } /* [data-theme="dark"] { } Dunkelmodus ist dokumentierte Nachrüst-Option (ADR 79): Token-Architektur unverändert, später eine Wertedatei an diesem Hook – kein Toggle zum Launch. */ /* Basis */ * { box-sizing: border-box; } body { margin: 0; font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 1rem; line-height: 1.5; color: var(--text-primary); background: var(--surface-page); } h1 { font-size: 1.75rem; font-weight: 600; } h2 { font-size: 1.375rem; font-weight: 600; } h3 { font-size: 1.125rem; font-weight: 600; } a { color: var(--sea); } @media (hover: hover) { /* globaler Link-Hover NIE auf Buttons UND NIE auf Filter-Chips: auf Anker-Buttons faerbte er die Schrift auf den Hover-Fuellton (Schrift unsichtbar); dasselbe traf die gewaehlten Filter-Chips der Tableview (Runde-2-Nachbefund "rot auf rot": a:not(.button):hover schlug .filter-chip:hover per Spezifitaet und setzte accent-hover-Schrift AUF accent-hover-Flaeche) - Komponenten mit eigener Hover-Flaeche behalten ihre Komponenten-Farben */ a:not(.button):not(.filter-chip):hover { color: var(--accent-hover); } } /* Hover-Standard (frontend.md Abschnitt 9): NUR Interaktives hovert – dezente Token-Anhebung ohne Layout-Verschiebung; :focus-within zieht als gleichwertiges Feedback zusätzlich zum neutralen Fokusring mit */ .interactive { cursor: pointer; transition: border-color 140ms ease-out, box-shadow 140ms ease-out, background-color 140ms ease-out; } /* Hover NUR auf echten Hover-Geräten – iOS konsumiert sonst den ersten Tap (Mobile-Standard) */ @media (hover: hover) { .interactive:hover { border-color: var(--border-strong); background: var(--surface-filter); box-shadow: 0 1px 4px rgb(0 0 0 / 0.08); } /* FAQ-Karte: Hover nur auf der Klickfläche (Füllton) + dezente Anhebung */ .faq-group summary:hover { background: var(--surface-filter); } .board-message-chip:hover { background: var(--surface-filter); } summary.board-message-head:hover { background: var(--surface-filter); } .faq-group details:has(> summary:hover) { box-shadow: 0 1px 4px rgb(0 0 0 / 0.08); } /* Pfeil-Link-Hover (Regel-18-Ausnahme, ADR 102): Unterstreichung + Pfeil-Schub; der Schub NUR ohne reduced-motion (verschachtelte Query - :hover bleibt im (hover: hover)-Block, Mobile-Wache) */ .arrow-link:hover { text-decoration: underline; } @media (prefers-reduced-motion: no-preference) { .arrow-link:hover svg { transform: translateX(2px); } } .site-plan a:hover g:not(.spot-selected) rect { stroke: var(--border-strong); } .site-plan a:hover .spot-free rect { fill: var(--surface-filter); } } /* Tastatur-Feedback geräteunabhängig; Touch bekommt :active statt Hover */ .interactive:focus-within { border-color: var(--border-strong); background: var(--surface-filter); box-shadow: 0 1px 4px rgb(0 0 0 / 0.08); } .interactive:active { border-color: var(--border-strong); background: var(--surface-filter); } .site-plan a:active g:not(.spot-selected) rect { stroke: var(--border-strong); } a, button { -webkit-tap-highlight-color: rgb(213 100 28 / 0.12); } /* Orange --accent, dezent */ @media (prefers-reduced-motion: reduce) { .interactive, .site-plan rect { transition: none; } .arrow-link svg { transition: none; } .faq-group summary::after, summary.board-message-head::after { transition: none; } /* Chevron dreht ohne Bewegung */ .village-carousel { scroll-behavior: auto; } /* Carousel springt statt gleitet (ADR 108) */ /* Spinner-Standard (ADR 115): statisches Icon mit Puls-Opacity statt Drehung */ .brand-spinner svg { animation: brand-pulse 1.5s ease-in-out infinite; } } /* Skip-Link: erstes fokussierbares Element – unsichtbar bis Fokus (frontend.md Abschnitt 9) */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 10; background: var(--surface-card); color: var(--text-primary); padding: 0.5rem 1rem; border: 1px solid var(--border-strong); border-radius: 0 0 6px 0; } .skip-link:focus { left: 0; } /* Fokus: sichtbar, EIN neutrales Token überall (WCAG 2.2 – Fokus nie verdeckt); der Ring überlagert Zustandsfarben (outline getrennt von border) */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* Board-Tabellen: Ziffern in Tabellenläufen bündig (frontend.md Typografie) */ .tabular-nums { font-variant-numeric: tabular-nums; } /* Header-Muster: Logo 40 px links (Stufe B 27.07.2026, vorher 32 px; davor 26 px) · Linkgruppe · "Mein Konto" rechts; mobil Burger statt Linkzeile (revidiert PR 38); Board behaelt die Linkzeile bis zur Board-Etappe */ /* Layout-Grundsatz (ADR 112): EIN zentrierter Inhalts-Container fuer Header, Main und Footer - die Baender bleiben vollbreit (Hintergrund + Hairline), ihr INHALT buendelt sich auf derselben Kante wie der Seiteninhalt. Dies ist die EINZIGE Breiten-/Seitenpadding-Definition (Grep-Wache T-DSN-057). */ .content-container { max-width: 60rem; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; } /* Vollbreiten-Utility (hero-full-bleed 27.07.2026, ADR-112-Nachtrag; wiederverwendbares Muster fuer kuenftige vollbreite Sektionen): zieht eine Sektion INNERHALB des content-containers auf die volle Viewport-Breite - die FLAECHE randlos, ihr INHALT buendelt sich per verschachteltem content-container auf der Inhalts-Kante. 50vw rechnet die Scrollbar mit (100vw-Falle, sonst Querscroll um die Scrollbar-Breite): den ueberstehenden halben Streifen schluckt overflow-x: clip am html - clip statt hidden (kein neuer Scroll-Container, Anker-Sprungziele unberuehrt). */ /* scrollbar-gutter: stable (Fix Logo-Sprung 27.07.2026): der Platz der vertikalen Scrollleiste ist IMMER reserviert - Seiten mit und ohne Scrollleiste zentrieren identisch, Logo/Inhalt springen beim Seitenwechsel nicht mehr (vorher 7,5 px bei klassischer Scrollbar). Evergreen-Baseline; ohne Support gilt der bisherige Zustand (kein Schaden). Beide Regeln bewusst am selben html-Element - clip schluckt den full-bleed-Ueberstand, stable haelt die Zentrierung scrollbar-unabhaengig. */ html { overflow-x: clip; scrollbar-gutter: stable; } .full-bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* Unzertrennlich-Utility (A78): haelt zusammengehoerige Kurz-Einheiten wie die H1-Preisangabe "ab X Eur*" in EINER Zeile - der Umbruch rueckt vor die Einheit (Hurenkind-Fix der EK-Sichtung 01.09., 390px) */ .nowrap { white-space: nowrap; } .site-header { display: flex; flex-wrap: wrap; /* Board/Fallback; die Website schaltet mobil auf Burger + Drawer */ align-items: center; gap: 0.75rem 1.5rem; padding: 0.875rem 0; /* horizontal uebernimmt der content-container (ADR 112); vertikal Stufe B (vorher 0.75rem) */ background: var(--surface-card); border-bottom: 1px solid var(--border); /* Hairline, keine Akzentlinie (ADR 79) */ /* Kopf-Typo Stufe B: EINE Stufen-Definition fuer Nav-Links, Dropdown-Eintraege und "Mein Konto" (Bestand-Stufe 1.0625rem = 17 px, vorher Basis-1rem); die Icons folgen proportional ueber ihre em-Breiten, Buttons (Board) behalten ihre Komponenten-Groesse */ font-size: 1.0625rem; } /* Board-Kopf entfaellt seit dem Sidebar-Layout (ADR 124) - die Website behaelt den site-header, das Board rendert die board-shell */ /* Innerer Header-Container: uebernimmt die Flex-Zeile des Bandes */ .site-header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; width: 100%; } /* Logo-Einbau Stufe B: 40 px (vorher 32 px), Breite folgt der viewBox (width:auto stellt das Seitenverhaeltnis sicher). EINE Groessen-Definition fuer Website-Header, Login-Koepfe, Board-Kopf UND die Styleguide-Demo (kombinierte Selektoren statt Zweit-Definition - Paritaet per Struktur) */ .site-header .logo img, .site-header .logo svg, .logo-demo svg { display: block; height: 40px; width: auto; } .site-header nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; } .site-header nav a { color: var(--text-primary); text-decoration: none; } .site-header nav a[aria-current="page"] { color: var(--accent-strong); border-bottom: 2px solid var(--accent); } .site-header .header-right { margin-left: auto; } .nav-account { color: var(--sea); display: inline-flex; align-items: center; gap: 0.375rem; text-decoration: none; font-weight: 600; } .nav-account svg { width: 1.25em; height: 1.25em; } /* Desktop-Dropdown "Container und Tarife" (Betreiber-Entscheid 20./21.07.; revidiert ADR 109): der Ausloeser ist ein ECHTER LINK auf /container/privat (Klick/Enter navigieren, Hover/Pfeil-runter oeffnen das Dropdown, erster Touch-Tap oeffnet - nav.js); ohne JS oeffnet CSS per hover/focus-within (html ohne js-nav) und der Klick navigiert. Die Karte ist die EINZIGE Schwebe-Flaeche der Website - dokumentierte Schatten-Ausnahme. */ .nav-dropdown { position: relative; display: inline-block; } .nav-dropdown-trigger { background: none; border: 0; padding: 0; font: inherit; color: var(--text-primary); cursor: pointer; } .nav-dropdown-trigger.nav-trigger-active { color: var(--accent-strong); border-bottom: 2px solid var(--accent); } .nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; margin: 0.5rem 0 0; padding: 0.25rem; list-style: none; background: var(--surface-card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px rgb(0 0 0 / 0.10); min-width: 13rem; z-index: 40; } .nav-dropdown.open .nav-dropdown-menu { display: block; } html:not(.js-nav) .nav-dropdown:focus-within .nav-dropdown-menu { display: block; } .nav-dropdown-menu a { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; border-radius: 6px; color: var(--text-primary); text-decoration: none; white-space: nowrap; } @media (hover: hover) { /* No-JS-Fallback: CSS oeffnet per Hover (mit JS steuert die Insel inkl. Absichts-Verzoegerung; focus-within-Fallback oben ist hover-unabhaengig) */ html:not(.js-nav) .nav-dropdown:hover .nav-dropdown-menu { display: block; } .nav-dropdown-menu a:hover { background: var(--surface-filter); } } /* lt. Draft: Toenung + Haekchen - KEINE geerbte Header-Unterstreichung */ .site-header .nav-dropdown-menu a[aria-current="page"] { background: var(--surface-filter); color: var(--accent-strong); border-bottom: 0; } .nav-dropdown-menu a svg { width: 1em; height: 1em; } /* Konto-Menue (O7, ADR 223): zweites Dropdown am rechten Rand - die Karte klappt buendig zur rechten Kante (DIESELBE dokumentierte Schwebe-Flaeche wie das Tarif-Dropdown, keine neue Schatten-Sprache); der Abmelden- Eintrag ist ein POST-Formular im Menue-Eintrags-Kleid (EINE Optik je Eintrag, die POST-Semantik bleibt) */ .nav-dropdown-account .nav-dropdown-menu { left: auto; right: 0; } .nav-dropdown-account form { margin: 0; } .nav-dropdown-menu button { display: flex; width: 100%; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; border-radius: 6px; border: 0; background: none; font: inherit; color: var(--text-primary); cursor: pointer; white-space: nowrap; text-align: left; } @media (hover: hover) { .nav-dropdown-menu button:hover { background: var(--surface-filter); } } /* Burger + Drawer (unterhalb des Tablet-Breakpoints; revidiert die PR-38-Zwischenloesung "umbrechende Linkzeile" - ADR-Nachtrag). Der Drawer ist die dokumentierte AUSNAHME der "keine Modals"-Regel. */ .nav-burger { display: none; } .footer-nav { display: none; } @media (max-width: 767px) { .site-header, .site-header-inner { flex-wrap: nowrap; justify-content: space-between; } /* Kopfhoehe mobil nur so weit wie noetig (Stufe B): das 44-px-Burger-Touchziel dominiert die Zeile weiter (Logo 40 px < 44 px) - Padding bleibt 0.75rem, der Kopf waechst mobil NICHT mit dem Desktop-Padding mit */ .site-header { padding: 0.75rem 0; } .site-header .site-nav, .site-header .header-right { display: none; } .nav-burger { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; color: var(--text-primary); } .footer-nav { display: block; margin-bottom: 0.75rem; } } .nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 80%; max-width: 20rem; display: flex; flex-direction: column; padding: 0.75rem 1rem 1rem; background: var(--surface-card); border-left: 1px solid var(--border); z-index: 60; transform: translateX(100%); visibility: hidden; transition: transform 200ms ease-out, visibility 0s linear 200ms; } .nav-drawer.open { transform: none; visibility: visible; transition: transform 200ms ease-out; } .nav-drawer-scrim { position: fixed; inset: 0; background: rgb(0 0 0 / 0.4); opacity: 0; visibility: hidden; transition: opacity 200ms ease-out, visibility 0s linear 200ms; z-index: 50; } .nav-drawer-scrim.open { opacity: 1; visibility: visible; transition: opacity 200ms ease-out; } @media (prefers-reduced-motion: reduce) { .nav-drawer, .nav-drawer.open, .nav-drawer-scrim, .nav-drawer-scrim.open { transition: none; } } .nav-drawer-close { align-self: flex-end; display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; background: none; border: 0; cursor: pointer; color: var(--text-primary); } .nav-drawer nav { flex: 1; overflow-y: auto; } .drawer-link { display: flex; align-items: center; min-height: 2.75rem; padding: 0.5rem; border-bottom: 1px solid var(--border); color: var(--text-primary); text-decoration: none; } /* Drawer-Typo-Regel: der Gruppen-Titel erbt die Groesse der Haupteintraege (Basis-1rem, kein Einzelwert) und markiert die Hierarchie per Gewicht - Titel >= Untereintraege (die bleiben in der Basisgroesse) */ .drawer-group-title { margin: 0; padding: 0.75rem 0.5rem 0.25rem; color: var(--text-primary); font-weight: 600; } .drawer-sublink { padding-left: 1.25rem; } .drawer-active { border-left: 3px solid var(--accent); background: var(--surface-filter); } .drawer-account { margin-top: auto; display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 1rem 0.5rem 0; border-top: 1px solid var(--border); color: var(--sea); font-weight: 600; text-decoration: none; } .drawer-account svg, .nav-drawer-close svg { width: 1.25em; height: 1.25em; } /* Burger eine Stufe groesser (Betreiber-Feinschliff 25.07.2026: 20 -> 28 px); Touch-Ziel bleibt 44 px (min-width/-height am .nav-burger) */ .nav-burger svg { width: 1.75rem; height: 1.75rem; } /* Login-Anzeige der Kopfzeile (O11, ADR 234): die Zugangs-E-Mail steht dauerhaft klein und im Sekundaerton unter "Mein Konto", rechtsbuendig auf der Link-Kante; sehr lange Adressen enden mit Ellipse, gekuerzt wird sonst nichts. Der Kopf-Block bleibt die Stufe-B-Groesse (die Zeile ist bewusst KEIN Nav-Link und traegt eine eigene Stufe). */ /* Der Konto-Bereich stapelt: Link oben, E-Mail-Zeile darunter, beide auf der rechten Kante. Noetig, weil `.site-header nav` alle Kopf-Navs als Flex-ZEILE fuehrt - hier gewinnt die Komponente ueber die Spezifitaet. Die enge Zeilenhoehe haelt den zweizeiligen Block unter der Logo-Hoehe - die Kopfzeile ist damit GLEICH HOCH wie im anonymen Zustand (gemessen: kein Hoehen-Sprung beim An-/Abmelden) */ .site-header .nav-dropdown-account { flex-direction: column; align-items: flex-end; gap: 0; line-height: 1.25; } .nav-account-mail { display: block; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); font-size: 0.75rem; text-align: right; } /* Drawer-Konto-Zeile (O11, ADR 234; seit O13 selbst das Konto-ZIEL): sie eroeffnet die Konto-Gruppe (Kante oben) und ist ein normaler Drawer-Eintrag - nur zweizeilig: Titel in der Eintrags-Sprache, darunter die E-Mail klein im Sekundaerton. Weil der ganze Anker das Ziel ist, traegt er die Bestands-Aktiv-Sprache (drawer-active) wie die drei folgenden Ziele. Die Tarif-Gruppe behaelt ihren .drawer-group-title unveraendert (Drawer-Typo-Regel). */ .drawer-account-row { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.125rem; padding-top: 0.75rem; padding-bottom: 0.75rem; border-top: 1px solid var(--border); } .drawer-account-title { font-weight: 600; } .drawer-user { max-width: 100%; color: var(--text-secondary); font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; } /* Abmelden im Drawer: Schaltflaeche ueber die volle Breite, unten verankert wie der Konto-Link des anonymen Zustands */ .drawer-logout { margin-top: auto; padding-top: 1rem; } .drawer-logout .button { display: block; width: 100%; text-align: center; } /* Portal-Tab-Leiste (O11, ADR 234; ersetzt die "Ihr Kundenbereich"-Zeile aus P9b/O7 ersatzlos): eigenes Band DIREKT unter der Kopfzeile - dieselbe Band-Mechanik wie der site-header (vollbreites Band, Inhalt buendelt sich auf der content-container-Kante, ADR 112) und dieselbe Aktiv-Sprache wie die Hauptnavigation (halbfett + Akzent-Unterstrich, accent-strong). Abmelden steht raeumlich getrennt am rechten Leistenende und bleibt ein POST-Formular. Mobil bricht die Leiste nach Bestandsmuster um (flex-wrap wie der Kopf) - Abmelden landet am Leistenende. */ .portal-bar { background: var(--surface-card); border-bottom: 1px solid var(--border); } .portal-bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1.5rem; } .portal-tabs { display: flex; flex-wrap: wrap; gap: 0 0.25rem; } .portal-tab { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.75rem; border-bottom: 3px solid transparent; color: var(--text-secondary); text-decoration: none; } .portal-tab-active { color: var(--accent-strong); font-weight: 600; border-bottom-color: var(--accent); } /* Abmelden mobil NICHT in der Leiste (O13, Praezisierung zu ADR 234): der Knopf erscheint erst ab dem Bestands-Breakpoint (Tablet, 768 px) - unterhalb traegt ihn der Drawer, und zwar als EINZIGER Abmelde-Weg. EIN Baustein, zwei Zustaende: dasselbe Partial rendert beide Faelle, ueber die Sichtbarkeit entscheidet die Breite - kein zweites Partial, keine Geraete-Verzweigung im Server. */ .portal-bar-logout { display: none; margin: 0.25rem 0; } @media (min-width: 768px) { .portal-bar-logout { display: block; } } @media (hover: hover) { /* eigene Hover-Farbe (Komponenten-Regel wie .filter-chip, ADR 139a): der Reiter DUNKELT den Text, statt auf den globalen Link-Hover-Ton umzufaerben. Der globale Selektor bleibt unangetastet (eine Wache fuehrt ihn woertlich) - die Komponenten-Regel gewinnt ueber die Eltern-Klasse an Spezifitaet */ .portal-bar .portal-tab:hover { color: var(--text-primary); } } @media (max-width: 767px) { /* Mobil (Sichtpruefung 390 px): die Leiste traegt NUR die vier Reiter (der Abmelden-Knopf beginnt erst oberhalb, s. o.) - sie bekommen damit die volle Bandbreite. Gemessen bei 390 px: drei Reiter je Zeile, der vierte bricht nach Bestandsmuster um (flex-wrap wie der Kopf). Bewusst kein waagerechtes Scrollen: dort laege der aktive Reiter je nach Seite ausserhalb des Sichtfelds - der Umbruch zeigt ihn immer. Touch-Ziele bleiben 44 px hoch und deutlich getrennt */ .portal-tabs { width: 100%; } .portal-tab { padding: 0 0.5rem; } } /* Breite + Seitenpadding kommen aus dem content-container (ADR 112) */ main { padding-top: 1.5rem; padding-bottom: 1.5rem; } /* Board-Layout (ADR 124, Strapi-Muster in der hellen Marken-Variante): feste Sidebar links (Toenung --surface-section, eigene Flaechen-Sprache), Arbeitsflaeche rechts - die Tableview gewinnt die volle Restbreite. Aktiver Eintrag = bestehende Aktiv-Sprache (Toenungs-Flaeche + Seitenstrich, Muster drawer-active). */ .board-shell { display: flex; align-items: stretch; min-height: 100vh; } .board-sidebar { display: flex; flex-direction: column; gap: 1rem; width: 240px; flex-shrink: 0; padding: 1rem 0.75rem; background: var(--surface-section); border-right: 1px solid var(--border); } /* Sidebar-/Topbar-Logo kompakt: EINE eigene Groessen-Definition der Board-Stufe (die Kopf-Stufe B der Website bleibt unberuehrt) */ .board-sidebar-logo svg, .board-topbar .logo svg { display: block; height: 32px; width: auto; } .board-sidebar-nav { flex: 1; display: grid; align-content: start; gap: 0.375rem; } /* Klappbare Sidebar-Gruppen (ADR-124-Nachtrag 29.07.): Gruppenkopf als getoenter Balken - dieselbe Toenungs-Logik wie der Tableview-Kopf ("getoent = Steuerung"); der GANZE Balken ist der native summary-Toggle (44-px-Ziel), Chevron rotiert im open-Zustand (reduced-motion: ohne) */ .board-nav-group { display: grid; gap: 0.125rem; } .board-group-header { display: flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; padding: 0.375rem 0.625rem; border-radius: 8px; background: var(--surface-filter); cursor: pointer; list-style: none; } .board-group-header::-webkit-details-marker { display: none; } .board-group-title { margin: 0; color: var(--text-secondary); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .board-group-count { margin-left: auto; } .board-group-chevron { display: flex; color: var(--text-secondary); transition: transform 150ms ease; } .board-group-chevron svg { width: 18px; height: 18px; } .board-nav-group[open] .board-group-chevron { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .board-group-chevron { transition: none; } } /* Eintraege der Gruppe unter dem Balken eingerueckt */ .board-nav-group .board-nav-link { margin-left: 0.5rem; } .board-nav-link { display: flex; align-items: center; min-height: 2.75rem; padding: 0.375rem 0.625rem; border-radius: 6px; color: var(--text-primary); text-decoration: none; } .board-nav-link[aria-current="page"] { background: var(--surface-filter); border-left: 3px solid var(--accent); padding-left: calc(0.625rem - 3px); color: var(--accent-strong); } /* Sidebar-Schnellfilter (ADR-160-Nachtrag): reines JS-Enhancement - ohne JS erscheint das Feld nicht (volle Liste, dokumentierter Degradationspfad); ausgefilterte Eintraege verschwinden per hidden (display:flex der Links muss dem hidden-Attribut weichen). Input-Paar Karte/Border wie die Formular-Inputs, Hinweis in --text-secondary auf --surface-section. */ .board-nav-filter { margin: 0.25rem 0 0.25rem 0.5rem; } .board-nav-filter input { width: 100%; min-height: 2rem; padding: 0.25rem 0.5rem; border: 1px solid var(--border-input); border-radius: 6px; background: var(--surface-card); color: var(--text-primary); font: inherit; font-size: 0.875rem; } .board-nav-filter-empty { margin: 0.375rem 0 0 0.125rem; color: var(--text-secondary); font-size: 0.875rem; } .board-nav-link[hidden] { display: none; } html.no-js .board-nav-filter { display: none; } .board-sidebar-footer { margin-top: auto; display: grid; gap: 0.5rem; padding: 0.75rem 0.625rem 0; border-top: 1px solid var(--border); color: var(--text-secondary); } .board-sidebar-user { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .board-logout button { width: 100%; } .board-topbar { display: none; } /* Board: kompakte Dichte, Arbeitsflaeche nutzt die Restbreite */ .board main { flex: 1; min-width: 0; max-width: none; padding: 1rem 1.5rem; } @media (max-width: 767px) { /* Mobil: Topbar (Logo + Burger) + Drawer nach Website-Muster; MIT JS ist die Sidebar zu, OHNE JS bleibt sie gestapelt sichtbar (Fallback) */ .board-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; background: var(--surface-card); border-bottom: 1px solid var(--border); } html.js .board-sidebar { display: none; } html.no-js .board-topbar .nav-burger { display: none; } .board-shell { display: block; min-height: 0; } } /* Board-Masken (Board-Etappe, ADR 123): Tabellen-/Formular-Bausteine der Tarif-Verwaltung - nur Bestands-Tokens, keine neuen Farbpaare */ .board-table { width: 100%; border-collapse: collapse; background: var(--surface-card); border: 1px solid var(--border); } .board-table th { text-align: left; font-weight: 600; padding: 0.5rem 0.75rem; } .board-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); } .board-table tbody tr:nth-child(even) { background: var(--row-alt); } /* Zeilen-Klick = Flaechen-Link-Muster: der Anker traegt die Bearbeitung */ /* Referenz-Bausteine (ADR 161): Kunden-/Container-/Vorgangs-Links in Zellen und Sektionen sprechen die Erstspalten-Link-Sprache */ .board-row-link, .board-ref { font-weight: 600; text-decoration: none; } /* Netto/Brutto-Rechner (ADR 164): Klappbalken-Innenleben - Eingabe in Feldbreite, Richtungs-Knoepfe daneben, Ergebnis als Hinweis-Zeile */ .board-price-calc { margin: 1rem 0 0; } .board-price-calc-body { display: grid; gap: 0.5rem; padding: 0.75rem 0; } .board-price-calc-directions { display: flex; gap: 0.5rem; } /* Gedrueckter Toggle (ADR 170): Zustands-PAAR Flaeche+Schrift - Ruhe auf accent-strong (Text-Schwelle, --accent traegt nie Text), Hover/Active unten als Varianten-Regel ALLER .button[aria-pressed="true"] */ .board-price-calc-directions .button[aria-pressed="true"] { background: var(--accent-strong); border-color: var(--accent-strong); color: #FFFFFF; } /* Verfuegbarkeits-Sektion (ADR 164): "Heute:"-Kopfzeile + gedaempfte tote Vorgaenge (board-muted baut detail.py - Render-Beleg im Sektions-Drehbuch) */ .board-section-head { font-weight: 600; margin: 0 0 0.25rem; } .board-muted { opacity: 0.6; } /* Kosten-Sektion des Vorgangs (ADR 163): abgeleitete Uebersicht unter dem Fakten-Kopf; Zwischentitel kompakt ueber den Fakten-Listen */ .board-costs { margin: 1rem 0; } .board-costs h3 { margin: 0.75rem 0 0.25rem; font-size: 1rem; } /* Kosten-Tabelle der Betreiber-Sicht (A10, ADR 257): netto, USt und brutto nebeneinander - Kundendokumente zeigen weiterhin den einen massgeblichen Wert. Schmale Fenster scrollen die Tabelle in ihrem eigenen Kasten, die Seite bleibt ruhig (Muster tableview-scroller) */ .board-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 40rem; } /* DAS eine Tabellendesign (A25/ADR 276): Kosten- und Container-Tabellen aller Orte kommen aus den zwei Komponenten (cost_table, contract_facts/ positions) - kein Orts-Styling mehr. Ruhige Optik: weisse Zeilen, feine Trennlinien, Kopfzeilen-Balken, Summenzeilen fett mit Sea-Linie. */ /* Der EINE Kosten-Baustein (A19/ADR 271): Summenzeilen betont mit Abschluss-Linie; alle übrigen Zeilen - ausdrücklich auch "ab " - in Normal-Optik (A20 Teil 2: EINE Optik an allen Orten, die Abhebung leistet die Position unter der Summenzeile); gilt fuer die Board-Spaltenwahl UND die Kunden-Tabelle darunter */ .cost-block { background: var(--surface-card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .cost-block + .cost-block { margin-top: 1.1rem; } /* Rahmen-Entfall als PARAMETER (frameless - nur die VZF nutzt ihn; ihr PDF-Stylesheet definiert die Klassen selbst, diese Web-Regel haelt den Parameter auch webseitig ehrlich) */ .cost-block-frameless { border: none; border-radius: 0; } .cost-block-head { padding: 0.5rem 0.875rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--sea); background: var(--surface-filter); border-bottom: 1px solid var(--border); } table.cost-table { width: 100%; border-collapse: collapse; } .cost-table th, .cost-table td { padding: 0.5rem 0.875rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); } .cost-table tbody tr:last-child th, .cost-table tbody tr:last-child td { border-bottom: 0; } .cost-table td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .cost-table-three td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .cost-table-three thead th { color: var(--text-secondary); font-weight: 400; } /* Massgebliche Spalte je Segment (A26/ADR 277, erlaubte gewachte Fett-Ausnahme): Gewerbe Netto, Privat Brutto - Kopf und alle Werte */ .cost-table-three .cost-col-key { font-weight: 600; } .cost-table-three thead th + th { text-align: right; } /* Fett-Regel (A23/ADR 274): NUR Summenzeilen fett - expliziter th-Reset schliesst den Browser-Default-Weg; Sea-Linie der Summenzeile (A25) */ .cost-table tbody th { font-weight: 400; } .cost-table .cost-row-total th, .cost-table .cost-row-total td { border-top: 2px solid var(--sea); font-weight: 600; } /* Container-Tabelle des Portals (A19 Teil 2, analog VZF): drei schmale Spalten, Kennung fett, Tarifname im Akzent - bricht auch mobil nicht */ /* Mietbeginn-Zeile (A27 Teil 2): deutlicher Abstand zur Tabelle - gleiche Groessenordnung wie Ueberschrift->Zeile (Paritaets-Wache) */ .positions-start { margin: 0 0 1rem; } .positions-table { width: 100%; border-collapse: collapse; background: var(--surface-card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .positions-table th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 600; padding: 0.5rem 0.875rem; border-bottom: 1px solid var(--border); } .positions-table td { padding: 0.55rem 0.875rem; border-bottom: 1px solid var(--border); } .positions-table tbody tr:last-child td { border-bottom: 0; } /* letzte Spalte rechtsbündig wie im VZF-Vorbild (A20 Teil 3, Mockup portal-vertrag-kompakt: th/td:last-child rechts) - Datumswerte mit Tabellenziffern (Bestandsmuster der Betrags-Spalten) */ .positions-table th:last-child, .positions-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; } .positions-table .positions-pair { font-weight: 700; } /* Tarifname im Positions-Baustein: --accent-strong statt --accent (A59/ADR 313) - hier traegt die Akzentfarbe TEXT, und zwar im geteilten Vertragsbaustein, der auf Angebotsseite UND im Portal laeuft. --accent haelt dort nur 3,12-3,70:1, --accent-strong 4,70-5,57. */ .positions-table .positions-tariff { color: var(--accent-strong); } /* 390-px-Grundsatz (A33/ADR 281, Mobile-Ueberlauf-Wache): die Container- Tabelle war der einzige Seiten-Ueberlaeufer der Kundenstrecke - mobil kompaktere Zellen und umbrechbare Kopfzeilen statt Scrollkasten (Regel 25: kein horizontales Scrolling ausser Plan-Scroller) */ @media (max-width: 430px) { .positions-table { font-size: 0.85rem; } .positions-table th { font-size: 0.66rem; padding: 0.4rem 0.45rem; white-space: normal; } .positions-table td { padding: 0.45rem 0.45rem; } } .board-row-key { display: block; color: var(--text-muted); font-size: 0.8125rem; } /* nicht klickbar = nicht klickbar-aussehend (ADR 125): Titelzelle ohne Maske */ .board-row-title { font-weight: 600; } .board-static-facts { color: var(--text-secondary); } .board-static-hint { display: block; color: var(--text-muted); font-size: 0.875rem; } /* Warn-Zeile im Board-Kopf (ADR 139, Rechts-Wache Seitentexte): Amber- Hinweis-Paar des Token-Katalogs (Paar im Kontrast-Gate) */ .board-warn-hint { display: inline-block; margin: 0.25rem 0 0; padding: 0.375rem 0.75rem; border-radius: 6px; background: var(--amber-badge-bg); color: var(--amber-badge-text); font-size: 0.875rem; } /* Umrahmter Gruppen-Block: EINE Deklaration fuer die M2M-Zuweisung UND die Konfigurations-Sektionen der Betriebseinstellungen (ADR-171/174-Nachtrag) - kein zweiter Rahmen-Stil, keine neuen Tokens; die legend traegt den Gruppen-Namen */ .board-assignment, .board-form-group { border: 1px solid var(--border-strong); border-radius: 6px; padding: 0.75rem 1rem 1rem; margin: 1rem 0; } .board-form-group > legend { font-weight: 600; } .board-assignment legend { font-weight: 600; padding: 0 0.25rem; } .board-assignment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.375rem 1rem; } .board-assignment-option { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; } /* board-tariff-form ist in der einen board-create-form aufgegangen (ADR 128: Tarif-Maske = Erst-Konfiguration der Detail-View) */ /* Create-Standard (ADR 127): Listen-Kopf mit Anlegen-Button rechts, die eine Create-Maske in Formular-Lesebreite */ .board-page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .board-create-button { white-space: nowrap; } /* EINE Detail-Huelle fuer alle Modi (ADR 147): Edit-Formular UND Sicht-only-Detailview teilen dieselbe Definition - zwei Namen, eine Regel (board-create-form bleibt der JS-/Test-Anker des Formular-Modus, board-detail-hull traegt die Sicht ohne Input-Felder) */ .board-create-form, .board-detail-hull { max-width: 40rem; } /* Sicht-Aktion (ADR 167): reversibler Fakt-Setzer der Sicht-View */ .board-view-actions { margin: 1rem 0 0; display: flex; gap: 0.75rem; } /* Konflikt-Marker (ADR 169): Warnzeichen in Amber - NICHT Rot (Rot = Destruktiv-Ton); Erklaerung via title + sr-only, nie Icon allein */ .board-conflict { color: var(--amber-icon); margin-left: 0.25rem; cursor: help; } /* Status-Badge (ADR 170): Titelzeile der Detail-Koepfe, visuelle Hoehe = Aktions-Buttons; GRUEN = positiver Status (state-success-Paar helle Flaeche + dunkle Schrift), alle uebrigen neutral (Rahmen/Text ohne Hintergrund) - Ton-Katalog: board/derivations.POSITIVE_BADGE_STATUS */ .board-title-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 1.17rem 0; } /* Listen-Navigation der Detail-Kopfzeile (O9, ADR 228): Ruecksprung + Blaetter-Pfeile mit Position; Rand-Pfeil bleibt sichtbar-inaktiv (aria-disabled, Disabled-Standard-Optik) */ .board-list-nav { display: inline-flex; align-items: center; gap: 0.375rem; margin: 0.25rem 0 1rem; } .board-list-nav-back { color: var(--sea); font-weight: 600; text-decoration: none; margin-right: 0.625rem; } .board-list-nav-arrow { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-card); color: var(--text-primary); text-decoration: none; font-size: 1.25rem; line-height: 1; } .board-list-nav-arrow[aria-disabled="true"] { opacity: 0.45; } @media (hover: hover) { .board-list-nav-back:hover { text-decoration: underline; } a.board-list-nav-arrow:hover { background: var(--surface-filter); } } .board-list-nav-position { color: var(--text-secondary); font-variant-numeric: tabular-nums; padding: 0 0.25rem; } .board-title-row h1 { margin: 0; } .status-badge { display: inline-flex; align-items: center; border-radius: 6px; padding: 0 0.875rem; min-height: var(--control-height-min); font-size: var(--control-font-min); font-weight: 600; } .status-badge-positive { background: var(--state-success-bg); color: var(--state-success-text); } .status-badge-neutral { background: transparent; border: 1px solid var(--text-secondary); color: var(--text-secondary); } /* Detail-Standard (ADR 128): Read-only-Fakten-Kopf + Aktionszeile */ /* Sicht-Umschalter der Listen (ADR 160, Erst-Nutzer Tickets): aktive Sicht als Badge-Zustand (accent-Badge-Paar im Kontrast-Gate), andere Sichten als Pill-Links - 44-px-Zeilenziel */ .board-view-switch { display: flex; gap: 0.5rem; margin: 0 0 1rem; } .board-view-current { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.125rem 0.875rem; border-radius: 999px; background: var(--accent-badge-bg); color: var(--accent-badge-text); font-weight: 600; } .board-view-link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.125rem 0.875rem; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-primary); text-decoration: none; } /* Kachel-Live-Vorschau der Tarif-Maske (ADR-159-Nachtrag): rendert die ECHTE Website-Kachel im Vorschau-Rahmen - Interaktion neutralisiert, die Verfuegbarkeits-Zeile entfaellt (Live-Bestand ist keine Formular-Wahrheit) */ .tariff-preview { max-width: 26rem; pointer-events: none; } .tariff-preview .tariff-counter { display: none; } .board-detail-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1.5rem; margin: 0 0 1rem; max-width: 40rem; } .board-detail-facts dt { color: var(--text-secondary); } .board-detail-facts dd { margin: 0; overflow-wrap: anywhere; } /* Aktions-Leiste (ADR 145): rechtsbuendig [Abbrechen][Speichern], Loeschen ganz links - margin-right:auto schafft die Luecke; Dialog-Zeilen (ADR 137) behalten ihre eigene Klasse (Bestaetigungs-Muster, destruktiv rechts) */ .board-form-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; justify-content: flex-end; } .board-form-delete { margin-right: auto; } .board-dialog-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; justify-content: flex-end; } .board-delete-dialog { border: 1px solid var(--border-strong); border-radius: 8px; padding: 1.5rem; max-width: 28rem; } .board-delete-dialog::backdrop { background: rgba(38, 34, 30, 0.55); } /* Dialog-Regel (ADR 137): Dialoge rendern NIE open - die ?delete=...-Seite zeigt den geschlossenen Dialog ohne JS als Inline-Block (No-JS-Wahrheit; mit JS oeffnet AUSSCHLIESSLICH der Klick via showModal) */ html.no-js dialog[data-noscript-open] { display: block; position: static; margin: 1rem 0; } /* Beziehungs-Sektionen (ADR 129) */ /* scroll-margin (ADR 147): Ruecksprung-Anker der Beziehungs-Sektionen */ .board-relation-section { margin-top: 2rem; max-width: 40rem; scroll-margin-top: 1rem; } /* Gruppen-Spalten-Variante (ADR 149): auto-fit-Raster mit ~110px-Mindest- breite - schmale Viewports brechen auf 2-3 Spalten um, nie Querscroll; Spaltenkopf "Reihe X (Anzahl)" mit Trennlinie */ .board-relation-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0 1.25rem; } .board-relation-column h3 { font-size: 1rem; margin: 0.5rem 0 0.25rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--border); } /* Grid-Track darf schrumpfen (A49): der Default min-width:auto laesst die Spur nicht unter die min-content-Breite ihrer Zeile - bei 390 px schob die Nachrichten-Zeile die Liste dadurch ueber den Rand des Inhaltsbereichs (EK-Befund 30.08.; die Zeile selbst kappte korrekt, ihr Container gab die Breite nicht her). Gilt fuer ALLE Beziehungs-Sektionen - dieselbe Klasse, dieselbe Ursache. */ .board-relation-rows { list-style: none; margin: 0.5rem 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem; } .board-relation-rows > li { min-width: 0; } .board-relation-rows a { color: var(--sea); } .board-relation-empty { color: var(--text-secondary); } /* Versand-Maske (ADR 183): Info-Kasten (Statuswechsel + Reservierungs-Ende) und Ablehnungs-Banner der Wiederbelebung - Rahmen aus bestehenden Tokens, das Amber ist der etablierte Warn-Ton (ADR 169, nie Rot = Destruktiv) */ .board-offer-info { border: 1px solid var(--border-strong); border-radius: 8px; padding: 0.75rem 1rem; margin: 0.5rem 0 1rem; } .board-offer-info p { margin: 0; } .board-offer-info p + p { margin-top: 0.4rem; } .board-offer-banner { border: 1px solid var(--amber-icon); border-radius: 8px; padding: 0.75rem 1rem; margin: 0.5rem 0 1rem; } /* Nachrichten-Historie (ADR 181; Anatomie A14/ADR 263): Karten-Accordion nach FAQ-Bestandsmuster - alles startet zugeklappt, mehrere duerfen offen sein, offene Zeile mit --sea-Akzentkante. Feste Zeilen-Anatomie: [Icon] Art fett · Betreff grau (einzeilig gekuerzt) | rechts Chip + Datum · Uhrzeit; zweite Zeile Empfaenger. Koerperlose Arten rendern dieselbe Anatomie ohne Aufklapper (board-message-flat). */ .board-message { background: var(--surface-card); border: 1px solid var(--border); border-left: 3px solid transparent; border-radius: 10px; margin-bottom: 0.5rem; overflow: hidden; } details.board-message[open] { border-left-color: var(--sea); } /* koerperlose Zeile: dieselbe Karte ohne Aufklapp-Verhalten */ .board-message-flat { border-left-color: transparent; } .board-message-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; min-height: 2.75rem; padding: 0.5rem 1rem; } summary.board-message-head { cursor: pointer; list-style: none; } /* Aufklapp-Symbol (A14a): DERSELBE Chevron wie das FAQ - die drei FAQ-Regeln (Masken-Chevron, Dreh-Zustand offen, reduced-motion) tragen beide Accordions per geteiltem Selektor (eine Quelle, kein zweites Symbol). Position rechts aussen, Datum davor (der Meta-Block bleibt links vom Chevron). Koerperlose Zeilen (div statt details) haben kein ::after aus diesen Regeln und bleiben symbolfrei. */ /* Chevron OBEN an der ersten Zeile (A16, FAQ-Referenz): nicht ueber beide Zeilen zentrieren - flex-start + Ausgleich auf die Mitte der ersten Zeile (Zeilenhoehe 1.5rem, Symbol 18px -> 3px). */ summary.board-message-head::after { align-self: flex-start; margin-top: 0.1875rem; } summary.board-message-head::-webkit-details-marker { display: none; } .board-message-main { display: flex; align-items: flex-start; gap: 0.5rem; min-width: 0; } .board-message-icon { color: var(--sea); display: inline-flex; flex-shrink: 0; margin-top: 0.15rem; } .board-message-icon svg { width: 1.1em; height: 1.1em; } .board-message-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .board-message-title { display: flex; gap: 0.4rem; min-width: 0; } .board-message-title strong { white-space: nowrap; } .board-message-subject { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .board-message-recipient { color: var(--text-muted); font-size: 0.875rem; } .board-message-meta { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; color: var(--text-secondary); font-size: 0.875rem; } .board-message-chip { display: inline-flex; align-items: center; padding: 0.1rem 0.5rem; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--sea); font-weight: 600; text-decoration: none; } .board-message-body { margin: 0 1rem 0.75rem 2.6rem; color: var(--text-secondary); white-space: pre-line; } /* Mobile Verdichtung der Nachrichten-Zeile (A49/ADR 297, EK-Befund 30.08.: die A14-Anatomie lief bei 390 px ueber den Rand). Mobile-first = der verdichtete Zustand ist der DEFAULT, ab Tablet stellt der Breakpoint unten die volle Anatomie wieder her. Zugeklappt bleiben nur Icon, Art, Chip und DATUM; Betreff, Empfaenger und Uhrzeit wandern in den Aufklapp-Bereich. Nur Board - das Portal hat seit A33 keine Nachrichten-Sektion. */ .board-message-subject { display: none; } details.board-message .board-message-recipient { display: none; } .board-message-time { display: none; } /* Koerperlose Zeilen haben keinen Aufklapper (div statt details): ihr Hinweis bleibt mobil stehen, nur die Adresse davor entfaellt. */ .board-message-to { display: none; } /* Der Art-Name darf mobil umbrechen (A49): nowrap + nicht schrumpfender Meta-Block liessen ihn sonst unter Chip und Datum laufen - zugeklappt hat die Zeile dank der Verdichtung Platz dafuer. Ab Tablet bleibt der Bestand (nowrap, eine Zeile). */ .board-message-title { flex-wrap: wrap; } .board-message-title strong { white-space: normal; } /* Der Hinweis selbst bleibt in JEDER Breite sichtbar - er ist bei koerperlosen Arten die einzige Erklaerung (kein Aufklapper). */ .board-message-hint { display: inline; } .board-message-mobile-facts { margin: 0 1rem 0.5rem 2.6rem; color: var(--text-muted); font-size: 0.875rem; } .board-position-card { border: 1px solid var(--border-strong); border-radius: 8px; padding: 1rem; margin: 1rem 0; } /* Aktions-Block des Vertragsdetails (A9): jede ERLAUBTE Aktion ist ein nativer Aufklapper (details/summary wie „Position hinzufügen"). Das name-Attribut macht die Gruppe exklusiv - oeffnet man einen, schliesst der vorige, ohne eine Zeile JS. Die Hauptaktion des Zustands traegt den Akzentrahmen; die Folgen-Angabe steht rechts in der Kopfzeile. */ .board-action { border: 1px solid var(--border); border-radius: 8px; background: var(--surface-card); padding: 0.25rem 1rem; margin: 0.5rem 0; } .board-action-primary { border-color: var(--sea); } .board-action-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; min-height: 2.75rem; cursor: pointer; } .board-action-label { font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; } /* Kopf-Icon der Aktions-Aufklapper (A12, ADR 261): dekorativ, Groesse und Farbe nach dem Bestandsmuster der Tarif-Kachel-Icons (.tariff-icon) */ .board-action-icon { color: var(--sea); display: inline-flex; } .board-action-icon svg { width: 1.25em; height: 1.25em; } .board-action-consequence { color: var(--text-muted); font-size: 0.875rem; } .board-action-body { margin: 0.25rem 0 0.75rem; } /* Absende-Zeile eines Aktions-Aufklappers (A10): bewusst NICHT .board-form-actions - die Leiste des Haupt-Formulars bleibt der eine Speichern-Anker (Sicht-Smoke, Tests) */ .board-action-submit { display: flex; justify-content: flex-end; margin-top: 0.75rem; } /* Verweis-Eintrag statt Aufklapper (A10): „Weiterer Container?" oeffnet nichts, er fuehrt weg - Folgen-Angabe rechts wie bei den Aufklappern */ .board-action-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; min-height: 2.75rem; padding: 0.25rem 1rem; } /* Cue-Zeile (A9): EIN Satz ueber den Aktionen - was ist hier gerade los und wodurch wird es beantwortet (abgeleitet, nicht gepflegt) */ .board-action-cue { margin: 0 0 0.75rem; } /* Zustandszeile der Positions-Karte (A9): Laufzeit-Achse + Mietbeginn */ .board-position-state { margin: 0 0 0.5rem; color: var(--text-secondary); } /* Konflikt im Klartext (A9): der Marker erklaerte sich bisher nur ueber title und sr-only - auf Beruehrung war beides stumm */ .board-conflict-note { margin: 0 0 0.75rem; color: var(--text-secondary); font-size: 0.875rem; } /* Kunden-Karte (A9): der Vertrag zeigt den Kunden, gepflegt wird er an seiner eigenen Maske */ .board-customer-card-name { font-weight: 600; margin: 0 0 0.25rem; } /* Bild-Assets (ADR 130): Listen-Thumbnail; die Masken-Vorschau lebt seit Runde 3 (ADR 142) in der file-Variante der Feld-Komponente (field-file-preview, 240-px-Kante) */ .board-thumb { display: block; width: 4.5rem; height: 2.5rem; object-fit: cover; border-radius: 4px; margin-bottom: 0.25rem; } /* Tableview v2 (ADR 138, Betreiber-Vorlage django-filterbare-tabelle): DIE eine Board-Tabellen-Komponente. Panel-Muster: Filterbereich als getoente Steuer-Flaeche ("getoent = Steuerung, hell = Daten"), Facetten als Checkbox-Chips, aktive Filter als entfernbare Chips, Sortier-Koepfe; Tabellen-Optik (Kopf-Toenung, Zebra) = abgenommene Referenz. Die fruehere Kopfzeilen-Filterstufe (kompakte Inputs, Dropdown-Schwebe-Panel) ist ersatzlos entfallen - ALLE Eingaben stehen in Standard-Massen, die Tableview-Ausnahme des Mindestgroessen-Gesetzes ist GESTRICHEN. */ .tableview { margin-top: 1rem; } /* htmx-Ladeanzeige (Vendor-Kontrakt): unsichtbar, htmx blendet sie waehrend eines Requests ueber .htmx-request ein - hier definiert, damit die Klassen-Paritaets-Wache greift und nichts vor htmx-Load aufblitzt */ .htmx-indicator { opacity: 0; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; transition: opacity 200ms ease-in; } /* ^ seit A90/ADR 339 die EINZIGE Quelle dieser Regeln: htmx injiziert seinen