/* AirOps PWA – modernes UI (Light & Dark) --------------------------------------------------------------------------- THEME-KONTRAKT: Alle Farb-/Schatten-/Radius-Konstanten liegen als Custom Properties ("Token") am -Element. Belegungen: - :root + html[data-theme="klassik"] -> heutiges Erscheinungsbild (hell + prefers-color-scheme-Dunkelmodus), Pixel-treu zum Ist. - html[data-theme="instrument"] -> theme.css (AirKit-Instrument-Token). White-Label: applyBranding() (config.js) schreibt --brand/--brand-2/ --brand-grad INLINE auf und gewinnt damit in BEIDEN Themes; --marke/--marke-2/--marke-verlauf sind reine Ableitungen davon. */ :root, html[data-theme="klassik"] { /* VORLAGE-REGEL SEIT 23.09.2026: Die App ist das Vorführgerät. Wo Swift (Klassik) und diese Datei auseinanderlaufen, gilt der Swift-Wert, und scripts/vorlage-pruefen.js prüft das bei jedem ./scripts/sichern.sh. Angeglichen am 23.09.2026: Marke, Status, Radien, Kartenschatten; neu: --status-inaktiv, --radius-knopf, --radius-chip, --abstand-*. Marke (White-Label-überschreibbar via applyBranding). WERTEQUELLE SEIT 23.09.2026: Color.brandTeal = defaultBrandTeal in AirOps/Core/DesignSystem/Theme.swift (0.055/0.486/0.525 = #0E7C86), der Wert, den AppTheme.marke im Klassik-Stil wirklich zeigt. Das AirKit- #12A5A0 (airOpsHex) ist die Instrument-Marke, nicht Klassik. --brand-2 = Marke x 0,86 je Kanal (#0C6B73), wie der Klassik-Verlauf der App (AirKitKlassik.verlaufDeckend: Marke -> Marke auf Schwarz mit 86 %). Weiß auf #0E7C86 4,95:1, auf #0C6B73 6,24:1. Vom 17.08. bis 23.09.2026 stand hier #12A5A0/#4ED3CB aus AirKit (AppAkzent.airOpsHex / airOpsHell) - das ist die Instrument-Marke, im Klassik-Stil zeigt die App sie nicht. Davor #0e7c86 (richtig) mit #15a3a3 und einem Verlauf ab #0b6e99 - das ist kein fremdes Blau, sondern Theme.brandGradient (Theme.swift:76-84), der Klassik- Kopfkarten-Verlauf #0B6E99 -> #0E8C86 der StilKopf-Kopfkarte. */ --brand: #0E7C86; /* medizinisches Teal (Swift Color.brandTeal) */ --brand-2: #0C6B73; /* Marke x 0,86 */ --brand-grad: linear-gradient(135deg, #0E7C86 0%, #0C6B73 100%); /* Kopfkarte wie Theme.brandGradient in der App, 23.09.2026: eigener Verlauf fuer die Kopfflaeche (.hero), getrennt von --brand-grad (Knoepfe/aktive Tabs/Chips/Fortschrittsbalken bleiben bei --brand-grad, das zu PrimaryCTA passt). Weiss-Label ueberschreibt beides parallel in applyBranding (config.js). scripts/vorlage-pruefen.js prueft die beiden Farbstopps gegen Theme.brandGradient (Theme.swift:76-84). */ --kopf-verlauf: linear-gradient(135deg, #0B6E99 0%, #0E8C86 100%); /* Akzent (Notfall-Rot) */ --akzent: #e23b2e; --akzent-verlauf: linear-gradient(135deg, #e23b2e 0%, #ff5a4d 100%); /* Flächen */ --flaeche: #f2f4f6; --flaeche-erhoeht: #ffffff; --karte: rgba(255, 255, 255, 0.78); --karte-voll: #ffffff; --kontroll: #ffffff; --hairline: rgba(0, 0, 0, 0.07); /* Text */ --text-1: #11141a; --text-2: #6b7280; --text-3: #6b7280; --label: #6b7280; --auf-marke: #ffffff; /* Text auf Marken-/Statusflächen */ /* Status */ /* Status = Theme.Klassik (Theme.swift), seit 23.09.2026 */ --status-go: #33a854; --status-warnung: #f29912; --status-kritisch: #e23b2e; --status-live: #007aff; --status-inaktiv: #8f8f94; /* Töne (getönte Flächen/Ränder – Klassik: fixe Teal-/Status-Töne wie im Ist) */ --marke-ton-schwach: rgba(14, 124, 134, 0.05); --marke-ton: rgba(14, 124, 134, 0.12); --marke-ton-stark: rgba(14, 124, 134, 0.14); --marke-fokus: rgba(14, 124, 134, 0.18); --status-live-ton: rgba(14, 124, 134, 0.10); --status-live-ton-stark: rgba(14, 124, 134, 0.14); --status-live-rand: rgba(14, 124, 134, 0.20); --status-go-ton: rgba(51, 168, 84, 0.12); --status-go-ton-stark: rgba(51, 168, 84, 0.14); --status-go-ton-kraeftig: rgba(51, 168, 84, 0.16); --status-go-rand: rgba(51, 168, 84, 0.22); --status-go-rand-stark: rgba(51, 168, 84, 0.3); --status-go-rand-voll: rgba(51, 168, 84, 0.5); --status-warnung-ton: rgba(242, 153, 18, 0.16); --status-kritisch-ton: rgba(226, 59, 46, 0.10); --status-kritisch-ton-mittel: rgba(226, 59, 46, 0.12); --status-kritisch-ton-stark: rgba(226, 59, 46, 0.14); --status-kritisch-rand: rgba(226, 59, 46, 0.22); --neutral-ton: rgba(120, 120, 128, 0.18); --verlauf-spur: rgba(127, 127, 127, 0.18); /* Sonstiges */ --stern: #f5b301; --abdunkelung: rgba(0, 0, 0, 0.45); --hintergrund-dekor: radial-gradient(1200px 600px at 100% -10%, rgba(226, 59, 46, 0.07), transparent 60%), radial-gradient(1000px 500px at -10% 0%, rgba(14, 124, 134, 0.10), transparent 55%); --hero-glanz: radial-gradient(700px 300px at 80% -20%, rgba(255, 255, 255, 0.22), transparent 60%); /* Radien = Theme.Klassik kartenRadius / knopfRadius / chipRadius */ --radius-karte: 18px; --radius-kontroll: 12px; /* Eingabefelder (AirKit FeldStil Radius 12) */ --radius-knopf: 16px; --radius-chip: 14px; /* Abstände = Theme.Spacing (nur Werte, noch nirgends verwendet) */ --abstand-xs: 4px; --abstand-sm: 8px; --abstand-md: 16px; --abstand-lg: 24px; --abstand-xl: 32px; /* Schriftstufen = Dynamic Type der App (Spec 2026-09-25): .title 28, .title2 22, .headline 17, .subheadline 15, .footnote 13, .caption2 11. Genutzt von huelle.css; scripts/vorlage-pruefen.js prüft die Werte und dass huelle.css keine anderen Größen setzt. */ --schrift-titel: 28px; --schrift-abschnitt: 22px; --schrift-kopf: 17px; --schrift-text: 15px; --schrift-fuss: 13px; --schrift-klein: 11px; /* Rollenfarben = UserRole.tint (AirOps/Models/Enums.swift), iOS-System- farben hell; die Dunkelwerte stehen im Dunkelblock. Geprüft von scripts/vorlage-pruefen.js. */ --rolle-superadmin: #FF2D55; --rolle-admin: #AF52DE; --rolle-chef: #5856D6; --rolle-planer: #FF9500; --rolle-trainer: #34C759; /* Schatten */ --schatten-karte: 0 3px 9px rgba(0, 0, 0, 0.07); /* Theme.Klassik schattenFarbe/-Radius/-Y */ --schatten-klein: 0 2px 10px rgba(17, 20, 26, 0.06); --schatten-marke: 0 6px 18px rgba(14, 124, 134, 0.35); --schatten-marke-klein: 0 4px 14px rgba(14, 124, 134, 0.35); --schatten-akzent: 0 6px 18px rgba(226, 59, 46, 0.35); --schatten-dialog: 0 30px 80px rgba(0, 0, 0, 0.35); --schatten-leiste: 0 -4px 20px rgba(0, 0, 0, 0.08); --schatten-logo: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25)); } @media (prefers-color-scheme: dark) { :root, html[data-theme="klassik"] { --flaeche: #0b0d12; --flaeche-erhoeht: #1b2330; --kontroll: #1b2330; --karte: rgba(34, 41, 54, 0.95); /* deckender -> Kacheln klar sichtbar */ --karte-voll: #1e2533; --hairline: rgba(255, 255, 255, 0.16); /* kräftigerer Rahmen */ --text-1: #f4f6fb; --text-2: #aab2c0; --schatten-karte: 0 10px 34px rgba(0, 0, 0, 0.55); --schatten-klein: 0 2px 12px rgba(0, 0, 0, 0.45); /* Kacheln im Dunkelmodus zusätzlich abheben (Instrument: Token = none) */ --schatten-karte-dunkel: var(--schatten-klein), inset 0 0 0 1px rgba(255, 255, 255, 0.04); /* Rollenfarben dunkel (iOS-Systemfarben im Dunkelmodus). */ --rolle-superadmin: #FF375F; --rolle-admin: #BF5AF2; --rolle-chef: #5E5CE6; --rolle-planer: #FF9F0A; --rolle-trainer: #30D158; } .card, .kpi, .addcard, .syncbar { box-shadow: var(--schatten-karte-dunkel); } } /* Alt-Namen -> Kontrakt: Kompatibilität für Inline-Styles in HTML/JS (szenario/unterweisung, admin.js/start.js/betreiber.js). NICHT entfernen. */ :root { --marke: var(--brand); --marke-2: var(--brand-2); --marke-verlauf: var(--brand-grad); --accent: var(--akzent); --accent-grad: var(--akzent-verlauf); --bg: var(--flaeche); --bg-elev: var(--flaeche-erhoeht); --card: var(--karte); --card-solid: var(--karte-voll); --stroke: var(--hairline); --text: var(--text-1); --muted: var(--text-2); --ok: var(--status-go); --warn: var(--status-warnung); --err: var(--status-kritisch); --info: var(--status-live); --radius: var(--radius-karte); --radius-sm: var(--radius-kontroll); --shadow: var(--schatten-karte); --shadow-sm: var(--schatten-klein); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* `hidden`-Attribut muss IMMER verstecken – sonst überschreibt z. B. `.card { display:flex }` das UA-`[hidden]{display:none}` (Spezifität). */ [hidden] { display: none !important; } body { margin: 0; background: var(--hintergrund-dekor), var(--flaeche); color: var(--text-1); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.5; min-height: 100vh; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; } /* --- Hero --- */ .hero { position: relative; background: var(--kopf-verlauf); color: var(--auf-marke); /* Seit 24.09.2026 reicht der Kopf bis an die obere Kante, in der installierten Web-App auch unter die Statusleiste (black-translucent). Die Luft oben waechst um genau die Schutzzone, der Text bleibt auf derselben Hoehe wie vorher. Oben keine Rundung, unten wie bisher. Die Akzentlinie sitzt seit 24.09.2026 nachmittags wieder UNTEN (Betreiber: „das rote band war immer unten und soll auch so bleiben“), innerhalb der Rundung, wie StilKopf in der App. */ padding: calc(48px + env(safe-area-inset-top, 0px)) 0 56px; text-align: center; overflow: hidden; border-bottom-left-radius: 32px; border-bottom-right-radius: 32px; box-shadow: inset 0 -5px 0 var(--akzent); /* Notfall-Akzentlinie, UNTEN (seit 24.09.2026 nachmittags wieder) */ } .hero::after { content: ""; position: absolute; inset: 0; background: var(--hero-glanz); pointer-events: none; } /* Kunden-Logo (White-Label, applyBranding in config.js). ------------------------------------------------------------------------- Das Kundenlogo wird in die Kopffläche HINEINGEZEICHNET, nicht als Kachel danebengesetzt: rechts, über die Kante hinaus, mit weichem Verlauf nach innen ausgeblendet. Der Kopf behält seine Ruhe, das Logo wirkt eingebettet statt aufgeklebt. Das AirOps-Zeichen (svg.logo) bleibt die Hauptmarke vorn, der Firmenname ersetzt die Wortmarke (applyBranding schreibt .brand-name). Gleiche Sprache wie in den nativen Apps (BrandWatermark, Components.swift). Warum height in Prozent + width:auto statt fester Box mit object-fit: so ist die Bildfläche IMMER genau das Logo – nie verzerrt, nie mit Leerraum ringsum. Die 138 % beziehen sich auf die Kopfhöhe (der Kopf ist der umgebende Block), das Logo ragt also bei JEDEM Seitenverhältnis und auf JEDEM Kopf – hoher Startkopf wie flacher .hero.compact – oben und unten heraus und wird von overflow:hidden abgeschnitten. Dadurch entsteht nie eine harte Ober-/ Unterkante, auch nicht bei Logos mit deckend weißem Grund (der Normalfall). Warum ein elliptischer statt eines seitlichen Verlaufs: greift bei einem sehr breiten Banner-Logo die max-width-Bremse, passt das Logo doch ganz in den Kopf – dann weicht der Verlauf auch nach oben und unten auf. */ /* PLATZIERBAR UND BIS OBEN (Build 25, 24.09.2026): Der Chef/Admin setzt in der App unter Firmen-Branding Lage, Größe und Deckkraft des Logos (organizations.brand_logo_layout). applyBranding (config.js) legt die Werte als CSS-Variablen auf das Bild; ohne Einstellung gelten die Rückfallwerte unten. --logo-x / --logo-y Anteil der Kopfbreite bzw. Kopfhöhe (-1 … 1), wie in Swift (LogoLayout.versatz): right/top rechnen in Prozent des Kopfes, also sitzt das Logo auf jeder Breite gleich. --logo-scale Faktor auf die Vorgabe-Höhe (0,5 … 2,5) --logo-opacity-faktor Deckkraft als FAKTOR auf die eigene Stufe des Webs (App-Deckkraft ÷ 0,16, der Vorgabe der App). Das Web hat hellere Stufen (.5 / .58, schmal .24 / .34); ein absoluter Wert hätte schon beim bloßen Verschieben in der App (Deckkraft bleibt 0,16) das Web auf 0,16 gedrückt (Review Task 1d). Obergrenze 0,6 wie in der App. Die Kopffläche .hero reicht bis zur oberen Kante (Polster mit safe-area-inset-top), min-height sorgt dafür, dass das Logo sie ganz ausfüllt und oben wie unten herausragt, auch wenn max-height auf schmalen Fenstern greift. */ .brand-watermark { position: absolute; /* KEIN display hier: sonst greift [hidden] nicht */ right: calc(-14px - var(--logo-x, 0) * 100%); top: calc(50% + var(--logo-y, 0) * 100%); transform: translateY(-50%); height: calc(138% * var(--logo-scale, 1)); /* bezogen auf die Kopfhöhe – ragt oben/unten heraus */ min-height: calc(112% * var(--logo-scale, 1)); /* bis zur oberen Kante, auch wenn max-height bremst */ max-height: calc(320px * var(--logo-scale, 1)); /* sehr hohe Köpfe: das Logo bleibt Beiwerk */ width: auto; /* Seitenverhältnis bleibt unangetastet */ max-width: 78%; /* Notbremse für Banner-Logos (4:1 und breiter) */ object-fit: contain; /* greift nur, wenn max-width bremst: nie verzerren */ object-position: right center; opacity: min(calc(.5 * var(--logo-opacity-faktor, 1)), .6); pointer-events: none; /* Radien bewusst 100%/62%: so ist der Verlauf an JEDER Kante des Bildes bei Null angekommen. Ragt das Logo heraus, sieht man davon nichts (der Kopf schneidet vorher ab); passt es ausnahmsweise ganz hinein, verschwindet es zu allen Seiten weich – nie eine sichtbare Bildkante. */ -webkit-mask-image: radial-gradient(100% 62% at 100% 50%, #000 40%, rgba(0, 0, 0, .5) 72%, transparent 100%); mask-image: radial-gradient(100% 62% at 100% 50%, #000 40%, rgba(0, 0, 0, .5) 72%, transparent 100%); } /* Flacher Kopf (.hero.compact, alle Innenseiten): sichtbar ist nur ein schmaler Streifen des Logos – etwas größer und einen Tick kräftiger, damit die Firma erkennbar bleibt, statt nur zu schimmern. */ .hero.compact .brand-watermark { height: calc(158% * var(--logo-scale, 1)); opacity: min(calc(.58 * var(--logo-opacity-faktor, 1)), .6); } /* Nach links verschoben (config.js setzt .logo-links bei --logo-x < 0): das Bild endet sichtbar im Kopf, also auch rechts weich auslaufen statt harter Kante. Zweite Maske, mit der ersten geschnitten. */ .brand-watermark.logo-links { -webkit-mask-image: radial-gradient(100% 62% at 100% 50%, #000 40%, rgba(0, 0, 0, .5) 72%, transparent 100%), linear-gradient(to left, transparent 0, #000 10%); -webkit-mask-composite: source-in; mask-image: radial-gradient(100% 62% at 100% 50%, #000 40%, rgba(0, 0, 0, .5) 72%, transparent 100%), linear-gradient(to left, transparent 0, #000 10%); mask-composite: intersect; } @media (max-width: 640px) { /* Schmales Fenster: kleiner und leiser. Der Kopftext ist hier mittig und bricht um – ein breites Logo darf ihm nicht in die Zeile laufen, deshalb hält es sich über max-width/max-height auf der rechten Seite. */ .brand-watermark { opacity: min(calc(.24 * var(--logo-opacity-faktor, 1)), .6); max-width: 56%; max-height: calc(150px * var(--logo-scale, 1)); } .hero.compact .brand-watermark { opacity: min(calc(.34 * var(--logo-opacity-faktor, 1)), .6); max-height: calc(120px * var(--logo-scale, 1)); } } .hero h1 { margin: 0 0 8px; font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; } .hero p { margin: 0; opacity: .92; font-size: 1.02rem; } /* Marken-Lockup (Logo + Wortmarke) */ .brand-lockup { display: inline-flex; align-items: center; gap: 14px; } .logo { width: 52px; height: 52px; flex: none; filter: var(--schatten-logo); } /* Kopfkarte ohne Logo seit 24.09.2026, wie StilKopf in der App. Das Zeichen bleibt im Markup der 17 Seiten stehen (kein Eingriff in jede Datei), wird im Kopf aber nicht gezeigt. Das Firmenlogo kommt weiter als .brand-watermark. */ .hero .logo { display: none; } .hero .brand-lockup { gap: 0; } .brand-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; } .brand-name { font-size: clamp(1.8rem, 4.5vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; } .brand-sub { font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; opacity: .85; margin-top: 2px; } h2 { margin: 32px 0 16px; font-weight: 700; letter-spacing: -0.01em; } a { color: var(--marke); text-decoration: none; } a:hover { text-decoration: underline; } /* --- Karten-Grid (Buchungsportal) --- */ .grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .card { background: var(--karte); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--hairline); border-radius: var(--radius-karte); padding: 20px; box-shadow: var(--schatten-klein); display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; } .card:hover { transform: translateY(-3px); box-shadow: var(--schatten-karte); } .card h3 { margin: 10px 0 6px; font-size: 1.15rem; font-weight: 700; } .badge { align-self: flex-start; background: var(--marke-ton); color: var(--marke); font-size: .72rem; font-weight: 700; letter-spacing: .02em; padding: 5px 11px; border-radius: 999px; text-transform: uppercase; } .meta { margin: 2px 0; color: var(--text-2); font-size: .9rem; } .seats { margin: 10px 0; font-weight: 700; color: var(--status-go); } /* --- Buttons --- */ button, .filelabel { font: inherit; cursor: pointer; border: none; border-radius: var(--radius-kontroll); padding: 11px 18px; font-weight: 600; transition: transform .12s ease, filter .15s ease, background .15s ease, box-shadow .15s ease; } button:active, .filelabel:active { transform: scale(.97); } .primary { border-radius: var(--radius-knopf); background: var(--marke-verlauf); color: var(--auf-marke); box-shadow: var(--schatten-marke); } .primary:hover { filter: brightness(1.06); } /* Notfall-Akzent-Button (z. B. „Buchen") */ .accent { background: var(--akzent-verlauf); color: var(--auf-marke); box-shadow: var(--schatten-akzent); } .accent:hover { filter: brightness(1.05); } .bordered { border-radius: var(--radius-knopf); background: var(--kontroll); border: 1px solid var(--hairline); color: var(--text-1); } .bordered:hover { border-color: var(--marke); color: var(--marke); } .bordered:disabled { opacity: .5; cursor: not-allowed; } .ghost { background: transparent; color: var(--text-2); } .full { width: 100%; margin-top: auto; } /* --- Status-Banner --- */ .status { margin: 20px 0; padding: 14px 18px; border-radius: var(--radius-kontroll); font-weight: 500; border: 1px solid transparent; } .status.info { background: var(--status-live-ton); color: var(--status-live); border-color: var(--status-live-rand); } .status.success { background: var(--status-go-ton); color: var(--status-go); border-color: var(--status-go-rand); } .status.error { background: var(--status-kritisch-ton); color: var(--status-kritisch); border-color: var(--status-kritisch-rand); } .muted { color: var(--text-2); } /* --- Dialog --- */ dialog { border: 1px solid var(--hairline); border-radius: var(--radius-karte); padding: 26px; max-width: 440px; width: 92%; background: var(--karte-voll); color: var(--text-1); box-shadow: var(--schatten-dialog); } dialog::backdrop { background: var(--abdunkelung); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } dialog h3 { margin: 0 0 18px; font-size: 1.25rem; } dialog label { display: block; margin-bottom: 12px; font-size: .85rem; color: var(--text-2); font-weight: 600; } input, textarea, select { width: 100%; margin-top: 5px; padding: 11px 13px; border: 1px solid var(--hairline); border-radius: var(--radius-kontroll); font: inherit; color: var(--text-1); background: var(--kontroll); transition: border-color .15s ease, box-shadow .15s ease; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--marke); box-shadow: 0 0 0 3px var(--marke-fokus); } /* Sterne-Bewertung (Teilnehmer-Feedback) */ .stars { display: flex; gap: 6px; margin: 8px 0 14px; } .stars button { font-size: 2rem; line-height: 1; background: none; border: none; cursor: pointer; color: var(--hairline); padding: 0; width: auto; } .stars button.on { color: var(--stern); } .actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; } footer { padding: 36px 0; text-align: center; font-size: .85rem; } /* --- Verwaltung (admin.html) --- */ .syncbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0 8px; padding: 14px; background: var(--karte); border: 1px solid var(--hairline); border-radius: var(--radius-karte); box-shadow: var(--schatten-klein); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .filelabel { display: inline-block; background: var(--marke-verlauf); color: var(--auf-marke); box-shadow: var(--schatten-marke); } .tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0; padding: 6px; background: var(--karte); border: 1px solid var(--hairline); border-radius: 999px; width: fit-content; max-width: 100%; } .tabs button { background: transparent; color: var(--text-2); border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: .92rem; } .tabs button:hover { color: var(--text-1); } .tabs button.active { background: var(--marke-verlauf); color: var(--auf-marke); box-shadow: var(--schatten-marke-klein); } table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--karte-voll); border: 1px solid var(--hairline); border-radius: var(--radius-karte); overflow: hidden; box-shadow: var(--schatten-klein); } th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--hairline); font-size: .92rem; vertical-align: middle; } th { background: color-mix(in srgb, var(--karte-voll) 92%, var(--text-2)); color: var(--text-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; } tbody tr { transition: background .12s ease; } tbody tr:hover { background: var(--marke-ton-schwach); } tr:last-child td { border-bottom: none; } /* Status-Pills in Tabellen */ .pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; } .pill-ok { background: var(--status-go-ton-stark); color: var(--status-go); } .pill-warn { background: var(--status-warnung-ton); color: var(--status-warnung); } .pill-info { background: var(--status-live-ton-stark); color: var(--status-live); } .pill-err { background: var(--status-kritisch-ton-stark); color: var(--status-kritisch); } .pill-gray { background: var(--neutral-ton); color: var(--text-2); } .addcard { /* WICHTIG: flex-direction:row explizit – sonst erbt `.addcard` das `column` von `.card`, wodurch flex-basis (170px) zur HÖHE wird → riesige, hohe Kästen. */ display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; padding: 16px; background: var(--karte); border: 1px solid var(--hairline); border-radius: var(--radius-karte); box-shadow: var(--schatten-klein); } .addcard:hover { transform: none; box-shadow: var(--schatten-klein); } /* Formular nicht „springen" lassen */ .addcard h3 { width: 100%; margin: 0 0 4px; font-size: 1rem; } .addcard input, .addcard select { width: auto; flex: 1 1 200px; min-width: 160px; max-width: 260px; margin-top: 0; padding: 10px 12px; font-size: .95rem; min-height: 40px; box-sizing: border-box; } .addcard input.wide { flex: 2 1 260px; max-width: none; } @media (max-width: 640px) { /* Am Handy jedes Feld volle Breite – bequem tippen. */ .addcard input, .addcard select, .addcard input.wide { flex: 1 1 100%; max-width: none; } } .addcard button { flex: 0 0 auto; } /* Tabellen horizontal scrollbar auf schmalen Fenstern */ .tablewrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .iconbtn { background: transparent; padding: 4px 8px; color: var(--status-kritisch); font-weight: 700; } .iconbtn:hover { background: var(--status-kritisch-ton); } /* Suchleiste */ .searchbox { width: 100%; margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--karte-voll); font-size: .95rem; } /* KPI-Kacheln (Übersicht) */ .kpis { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .kpi { gap: 6px; } .kpi-label { color: var(--text-2); font-size: .85rem; font-weight: 600; } .kpi-value { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; } .kpi-ok { border-left: 4px solid var(--status-go); } .kpi-warn { border-left: 4px solid var(--status-warnung); } .kpi-err { border-left: 4px solid var(--status-kritisch); } /* Lernportal */ .progresswrap { background: var(--verlauf-spur); border-radius: 999px; height: 10px; overflow: hidden; margin: 10px 0; } .progressbar { height: 100%; background: var(--marke-verlauf); border-radius: 999px; transition: width .3s ease; } .lesson { background: var(--karte-voll); border: 1px solid var(--hairline); border-radius: var(--radius-karte); box-shadow: var(--schatten-klein); margin: 14px 0; overflow: hidden; } .lesson.done { border-color: var(--status-go-rand-voll); } .lesson-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; background: transparent; width: 100%; text-align: left; border: none; } .lesson-num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--marke-ton-stark); color: var(--marke); font-weight: 800; display: grid; place-items: center; font-size: .85rem; } .lesson.done .lesson-num { background: var(--status-go); color: var(--auf-marke); } .lesson-title { flex: 1; font-weight: 700; } .lesson-meta { color: var(--text-2); font-size: .8rem; } .lesson-body { padding: 0 18px 18px 60px; } .lesson-body h4 { margin: 12px 0 6px; } .lesson-body ul { margin: 8px 0; padding-left: 18px; } .lesson-body li { margin: 4px 0; } .lesson-body p { margin: 8px 0; } .lesson-actions { padding: 0 18px 18px 60px; } .done-banner { background: var(--status-go-ton); color: var(--status-go); border: 1px solid var(--status-go-rand-stark); border-radius: var(--radius-karte); padding: 16px 18px; font-weight: 700; margin: 16px 0; } .phase-pill { display: inline-block; background: var(--marke-ton); color: var(--marke); font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-top: 18px; } /* Sanftes Einblenden des Inhalts */ #content { animation: fade .25s ease; } @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* --- Portal-Navigation --- */ .portalnav { display: flex; gap: 8px; margin: 14px auto 0; } .portalnav a { padding: 8px 14px; border-radius: 999px; text-decoration: none; color: var(--text-1); background: var(--karte-voll); border: 1px solid var(--hairline); font-weight: 600; font-size: .92rem; } .portalnav a.active { background: var(--marke); color: var(--auf-marke); border-color: var(--marke); } /* --- Monatskalender (Buchungsportal) --- */ .calendar { background: var(--karte-voll); border: 1px solid var(--hairline); border-radius: var(--radius-kontroll, 12px); padding: 12px; margin-bottom: 18px; } .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 1.05rem; } /* minmax(0, 1fr) statt 1fr: `1fr` ist eine Untergrenze von `auto`, eine Spalte schrumpft also nie unter ihren Inhalt. Bei schmalem Fenster schob der Kalender deshalb Samstag und Sonntag aus dem Bild (gemessen: 471 px Inhalt bei 306 px Sichtbreite). Trifft jeden Handy-Besucher, nicht nur den eingebetteten. */ .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .cal-dow { text-align: center; font-size: .72rem; color: var(--label); font-weight: 700; padding-bottom: 4px; } .cal-cell { position: relative; aspect-ratio: 1 / 1; border: 1px solid var(--hairline); border-radius: 10px; background: var(--kontroll); cursor: pointer; font: inherit; color: var(--text-1); display: flex; align-items: center; justify-content: center; } .cal-cell.empty { border: none; background: transparent; cursor: default; } .cal-cell.has { border-color: var(--marke); font-weight: 700; } .cal-cell.sel { background: var(--marke); color: var(--auf-marke); border-color: var(--marke); } .cal-cell .dot { position: absolute; bottom: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--akzent); } .cal-cell.sel .dot { background: var(--auf-marke); } /* --- Trainer-Portal-Zeilen --- */ .trow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hairline); } .trow:first-of-type { border-top: none; } /* --- Quiz / Wissensabfrage (Lernportal) --- */ .quiz { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--hairline); } .quiz h4 { margin: 0 0 10px; } .quiz-q { margin-bottom: 14px; } .quiz-prompt { font-weight: 600; margin: 0 0 8px; } .quiz-opt { display: block; width: 100%; text-align: left; margin: 6px 0; padding: 10px 14px; border-radius: var(--radius-kontroll); background: var(--kontroll); border: 1px solid var(--hairline); color: var(--text-1); font-weight: 500; } .quiz-opt:hover:not(:disabled) { border-color: var(--marke); } .quiz-opt:disabled { cursor: default; opacity: 1; } .quiz-opt.correct { background: var(--status-go-ton-kraeftig); border-color: var(--status-go); color: var(--status-go); font-weight: 700; } .quiz-opt.wrong { background: var(--status-kritisch-ton-mittel); border-color: var(--status-kritisch); color: var(--status-kritisch); } .quiz-fb { margin: 6px 0 0; font-size: .9rem; font-weight: 600; } .quiz-fb.ok { color: var(--status-go); } .quiz-fb.no { color: var(--status-kritisch); } /* --- Safe-Area (Notch / abgerundete Displays) --- */ @supports (padding: max(0px)) { .wrap { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); } footer { padding-bottom: max(36px, calc(env(safe-area-inset-bottom) + 20px)); } } /* --- Mobile-Feinschliff (einheitlich über alle Portale) --- */ @media (max-width: 640px) { .hero { padding: calc(30px + env(safe-area-inset-top, 0px)) 0 36px; border-bottom-left-radius: 22px; border-bottom-right-radius: 22px; } .logo { width: 44px; height: 44px; } h2 { margin: 24px 0 12px; } .grid { gap: 14px; grid-template-columns: 1fr; } .kpis { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .kpi-value { font-size: 1.7rem; } /* Tabs: horizontal scrollbar statt mehrzeilig */ .tabs { width: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-kontroll); } .tabs button { flex: 0 0 auto; } /* Dialog-/Formular-Aktionen: volle Breite, gut tippbar */ dialog { padding: 20px; } .actions { flex-direction: column-reverse; align-items: stretch; } .actions button { width: 100%; } .syncbar { gap: 8px; } .syncbar button, .syncbar .filelabel { flex: 1 1 auto; text-align: center; } } /* --- Buchungsportal: "So funktioniert's" Schritte-Erklärung --- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; padding: 0; } .step { display: flex; align-items: flex-start; gap: 12px; } .step-num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--marke-verlauf); color: var(--auf-marke); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: .95rem; } .step strong { display: block; font-size: .95rem; } .step span.step-text { color: var(--text-2); font-size: .85rem; } @media (max-width: 640px) { .steps { grid-template-columns: 1fr; gap: 12px; } } /* --- Kategorie-Filter-Chips --- */ .filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; } .chip { background: var(--karte); border: 1px solid var(--hairline); color: var(--text-1); padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: .88rem; } .chip.active { background: var(--marke-verlauf); color: var(--auf-marke); border-color: transparent; } /* --- Kurskarte: Preis/BG-Badge, Beschreibung, Dringlichkeit --- */ .price-badge { font-weight: 800; font-size: 1.15rem; color: var(--marke); } .price-badge.na { font-size: .85rem; font-weight: 600; color: var(--text-2); } .bg-badge { display: inline-block; margin-left: 6px; font-size: .68rem; font-weight: 700; color: var(--status-go); background: var(--status-go-ton); padding: 3px 8px; border-radius: 999px; vertical-align: middle; } .seats.low { color: var(--status-warnung); } .seats.full { color: var(--status-kritisch); } .course-desc { color: var(--text-2); font-size: .88rem; margin: 4px 0 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .course-desc.expanded { -webkit-line-clamp: unset; } .desc-toggle { background: none; border: none; padding: 0; color: var(--marke); font-weight: 600; font-size: .85rem; width: auto; } /* --- Bestätigungsseite nach dem Absenden --- */ .confirm-box { text-align: center; padding: 10px 4px; } .confirm-box .checkmark { width: 56px; height: 56px; border-radius: 50%; background: var(--status-go-ton-stark); color: var(--status-go); font-size: 1.8rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .confirm-ref { display: inline-block; margin-top: 8px; font-family: ui-monospace, monospace; background: var(--kontroll); border: 1px solid var(--hairline); border-radius: var(--radius-kontroll); padding: 6px 12px; font-size: .85rem; } /* --- Mitarbeiter-App (start.html): App-Shell mit Tab-Leiste --- */ /* Oben 12 px wie StilKopf in der App (`.padding(.top, 12)` unter der Statusleiste, 24.09.2026 nachmittags; vorher 16 px). Das Web hat kein Leisten-Band, darum nur das Polster, sonst nichts. */ .hero.compact { padding: calc(12px + env(safe-area-inset-top, 0px)) 0 18px; } .hero.compact .logo { width: 38px; height: 38px; } .hero.compact .brand-name { font-size: 1.3rem; } .hero.compact .brand-sub { font-size: .62rem; } .hero.compact p { font-size: .88rem; margin-top: 6px; } .appmain { padding-bottom: 88px; min-height: 60vh; } .appbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: space-around; align-items: stretch; background: var(--karte-voll); border-top: 1px solid var(--hairline); padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--schatten-leiste); } .appbar button { flex: 1 1 0; background: none; border: none; border-radius: 14px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; color: var(--text-2); font-size: .68rem; font-weight: 600; position: relative; transition: transform .1s ease, color .15s ease; } .appbar button .ic { font-size: 1.35rem; line-height: 1; } .appbar button.active { color: var(--marke); } .appbar button:active { transform: scale(.88); } .appbar .dot-badge { position: absolute; top: 2px; right: calc(50% - 20px); min-width: 17px; height: 17px; border-radius: 999px; background: var(--akzent); color: var(--auf-marke); font-size: .62rem; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 4px; } .appview { display: none; } .appview.active { display: block; animation: viewin .18s ease; } @keyframes viewin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Tages-Statistik-Chips */ .statrow { display: flex; gap: 10px; margin: 14px 0; flex-wrap: wrap; } .statchip { flex: 1 1 120px; background: var(--karte); border: 1px solid var(--hairline); border-radius: var(--radius-kontroll); padding: 12px 14px; text-align: center; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .statchip b { display: block; font-size: 1.5rem; letter-spacing: -.02em; } .statchip span { color: var(--text-2); font-size: .76rem; font-weight: 600; } /* Haptik: Karten reagieren sichtbar auf Druck */ .tapcard { transition: transform .12s ease; } .tapcard:active { transform: scale(.985); } .rowbtns { display: flex; gap: 8px; flex-wrap: wrap; } .rowbtns button { padding: 9px 14px; font-size: .85rem; } .viewtitle { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .viewtitle h2 { margin: 24px 0 14px; } .refreshbtn { background: none; border: 1px solid var(--hairline); border-radius: 999px; padding: 7px 14px; color: var(--text-2); font-size: .82rem; font-weight: 600; } .refreshbtn:active { transform: rotate(180deg) scale(.9); transition: transform .25s ease; } /* Desktop: Tab-Leiste OBEN (professionelle Topbar) statt unten. Wichtig: Die Nav steht im DOM VOR dem Inhalt – sonst landet "sticky" unter dem Inhalt und wirkt wie eine (deplatzierte) Bottom-Bar. */ @media (min-width: 900px) { .appbar { position: sticky; top: 0; bottom: auto; z-index: 60; border-top: none; border-bottom: 1px solid var(--hairline); box-shadow: var(--schatten-klein); justify-content: center; gap: 8px; padding: 10px 16px; } .appbar button { flex: 0 0 auto; flex-direction: row; gap: 8px; font-size: .9rem; padding: 10px 22px; border-radius: 999px; } .appbar button.active { background: var(--marke-verlauf); color: var(--auf-marke); box-shadow: var(--schatten-marke-klein); } .appbar button .ic { font-size: 1.05rem; } .appbar .dot-badge { top: 2px; right: 6px; } .appmain { padding-bottom: 24px; } } /* --- FAQ-Akkordeon --- */ .faq { margin: 40px 0; } .faqitem { background: var(--karte); border: 1px solid var(--hairline); border-radius: var(--radius-kontroll); padding: 14px 18px; margin-bottom: 10px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .faqitem summary { cursor: pointer; font-weight: 700; list-style: none; } .faqitem summary::-webkit-details-marker { display: none; } .faqitem summary::after { content: "+"; float: right; font-weight: 400; color: var(--text-2); } .faqitem[open] summary::after { content: "–"; } .faqitem p { margin: 10px 0 0; color: var(--text-2); font-size: .92rem; } /* --------------------------------------------------------------------------- Datenschutzerklaerung: ein Abschnitt = ein Klappblock. Vorher standen dort rund 11.000 Zeichen am Stueck - Text, den nachweislich niemand liest, und der genau deshalb seinen Zweck verfehlt. Der Inhalt ist unveraendert und vollstaendig da (nachgemessen: 0 Zeichen Verlust), nur abschnittsweise zugeklappt. Abschnitt 1 (Verantwortlicher) steht offen - das ist die Angabe, wegen der die meisten die Seite ueberhaupt aufrufen. --------------------------------------------------------------------------- */ .ds-klapp { margin-top: 12px; } .ds-klapp > summary { list-style: none; cursor: pointer; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 10px; padding: 2px 0; } .ds-klapp > summary::-webkit-details-marker { display: none; } .ds-klapp > summary::after { content: "⌄"; margin-left: auto; opacity: .55; transition: transform .15s ease; } .ds-klapp:not([open]) > summary::after { transform: rotate(-90deg); } .ds-klapp > summary:hover::after { opacity: 1; } .ds-klapp > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; } .ds-klapp[open] > summary { margin-bottom: 8px; } @media (prefers-reduced-motion: reduce) { .ds-klapp > summary::after { transition: none; } } /* „Mehr dazu" – der zweite Teil eines langen Absatzes. Sichtbar bleibt der erste Satz; er trägt die Aussage. Der Rest erklärt, begründet oder nennt Voraussetzungen – wichtig, aber nicht beim ersten Blick. Gemessen am 28.07.2026: 13 Absätze über 200 Zeichen auf vier Seiten, der längste 488. Nichts davon ist gelöscht, es steht nur nicht mehr im Weg. */ .mehr-klapp { margin: -4px 0 12px; } .mehr-klapp > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--marke, #D85A30); padding: 2px 0; } .mehr-klapp > summary::-webkit-details-marker { display: none; } .mehr-klapp > summary::after { content: "⌄"; transition: transform .15s ease; } .mehr-klapp[open] > summary::after { transform: rotate(180deg); } .mehr-klapp[open] > summary { margin-bottom: 4px; } .mehr-klapp > summary:focus-visible { outline: 2px solid var(--marke, #D85A30); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .mehr-klapp > summary::after { transition: none; } }