/* ========================================================================== AS Marketing – CI für interne Software Abgeleitet aus as-marketing-allgaeu.de (Live-Messung vom 28.10.2026) -------------------------------------------------------------------------- Aufbau 1. Schrift 5. Grundstil 9. Formulare 2. Primitive Farben 6. Typografie-Klassen 10. Tabelle, KPI, Fortschritt 3. Semantik hell 7. Buttons 11. App-Rahmen (Topbar, Sidebar) 4. Semantik dunkel 8. Eyebrow, Pills, 12. Dunkle Bühne (Glow + Raster) Badges, Karten Alle Klassen beginnen mit .as-, alle Variablen mit --as-. Dunkelmodus: data-theme="dark" auf , oder automatisch per System, solange nicht data-theme="light" gesetzt ist. ========================================================================== */ /* 1. Schrift ------------------------------------------------------------- */ @font-face { font-family: "Satoshi"; src: url("./fonts/Satoshi-Variable.woff2") format("woff2-variations"), url("./fonts/Satoshi-Variable.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; } :root { /* 2. Primitive Farben (Website-Variablen --color-kit-*) ----------------- */ --as-red-500: #E5282C; /* key1 – CTA, Fokus-Daten, Akzent */ --as-red-600: #C81E22; /* Rot als Text auf Hell (AA), Pressed */ --as-red-300: #FF8A8C; /* Rot als Text auf Dunkel */ --as-red-200: #FFB3B4; --as-teal-500: #42757B; /* key2 – Sekundär, Links, Fokusring */ --as-teal-400: #5E9299; /* Sekundär-Button auf Dunkel */ --as-teal-300: #7FB2B8; /* Teal auf Dunkel, Balken, Chips */ --as-petrol-700: #24484C; /* dark – Footer, tiefe Flächen */ --as-night-800: #132528; /* Hero- und Bühnengrund */ --as-night-900: #0B1416; /* Bild-Overlays, Vignette */ --as-ink-900: #14201F; /* black – Text, Headlines */ --as-ink-700: #56635F; /* Fließtext */ --as-ink-600: #5F6A69; /* Sekundärtext klein (AA auch auf Sand, 4,8:1) */ --as-ink-500: #889291; /* Labels in Versalien (Website-Original) */ --as-ink-400: #A2ABAA; /* nur dekorativ, nie für Lesetext */ --as-sand-100: #ECEEEE; /* light – Sektionsgrund „Sand“ */ --as-mist-50: #F2F4F4; /* Eingabefelder, ruhige Flächen */ --as-mist-100: #EAF0F0; --as-line-200: #E0E5E4; /* Feldrand */ --as-line-300: #D2D7D6; /* Kartenrand */ --as-line-400: #C6CDCC; /* Feldrand Hover */ --as-line-500: #AEB8B7; /* heller Button Hover */ --as-white: #FFFFFF; /* Status – auf der Website nicht vorhanden, passend zur Palette abgeleitet */ --as-green-600: #2E7A5B; --as-amber-600: #94600A; /* RGB-Tripel für Transparenzen */ --as-ink-rgb: 20, 32, 31; --as-red-rgb: 229, 40, 44; --as-teal-rgb: 66, 117, 123; --as-white-rgb: 255, 255, 255; /* 3. Semantik – heller Modus (Standard) -------------------------------- */ --as-bg: var(--as-white); /* Seite */ --as-bg-sand: var(--as-sand-100); /* Bereich absetzen */ --as-surface: var(--as-white); /* Karte */ --as-surface-sunken: var(--as-mist-50); /* Feld, Well */ --as-surface-hover: rgba(var(--as-ink-rgb), .035); --as-text: var(--as-ink-900); --as-text-body: var(--as-ink-700); --as-text-muted: var(--as-ink-600); --as-text-label: var(--as-ink-500); --as-text-on-accent: var(--as-white); --as-border: rgba(var(--as-ink-rgb), .12); --as-border-subtle: rgba(var(--as-ink-rgb), .08); --as-border-card: var(--as-line-300); --as-border-field: var(--as-line-200); --as-border-strong: var(--as-line-400); --as-accent: var(--as-red-500); --as-accent-text: var(--as-red-600); --as-secondary: var(--as-teal-500); --as-secondary-text: var(--as-teal-500); --as-focus: var(--as-teal-500); --as-chip-neutral: rgba(var(--as-ink-rgb), .04); --as-chip-neutral-border: rgba(var(--as-ink-rgb), .16); --as-data-muted: rgba(var(--as-ink-rgb), .12); /* Nicht-Fokus-Balken */ --as-success: var(--as-green-600); --as-warning: var(--as-amber-600); --as-danger: var(--as-red-600); --as-info: var(--as-teal-500); /* Typografie ------------------------------------------------------------ */ --as-font: "Satoshi", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --as-fw-light: 400; /* Headline-Grundschnitt */ --as-fw-regular: 400; --as-fw-medium: 500; --as-fw-bold: 700; /* Buttons, kleine Titel */ --as-fw-black: 800; /* Betonung in Headlines, Eyebrows, Kartentitel */ /* Größe Zeilenhöhe Laufweite */ --as-fs-hero: 4.8rem; --as-lh-hero: 1.04; --as-ls-hero: -0.032em; /* 76,8 px – nur Marketing */ --as-fs-display: 3.25rem;--as-lh-display: 1.08;--as-ls-display: -0.03em;/* 52 px – Website-H2 */ --as-fs-h1: 2rem; --as-lh-h1: 1.1; --as-ls-h1: -0.026em; /* 32 px – Seitentitel */ --as-fs-h2: 1.5rem; --as-lh-h2: 1.2; --as-ls-h2: -0.02em; /* 24 px – Bereich */ --as-fs-h3: 1.0625rem; --as-lh-h3: 1.4; --as-ls-h3: -0.02em; /* 17 px – Kartentitel */ --as-fs-lead: 1.125rem; --as-lh-lead: 1.6; /* 18 px */ --as-fs-body: 0.9375rem; --as-lh-body: 1.6; /* 15 px */ --as-fs-small: 0.8125rem;--as-lh-small: 1.5; /* 13 px */ --as-fs-caption: 0.6875rem; --as-lh-caption: 1.45; /* 11 px */ --as-fs-eyebrow: 0.6875rem; --as-ls-eyebrow: 0.18em; /* 11 px, VERSAL */ --as-fs-label: 0.6875rem; --as-ls-label: 0.14em; /* Feldlabel, VERSAL */ --as-fs-kpi: 3.4rem; --as-lh-kpi: 1; --as-ls-kpi: -0.045em; /* 54,4 px Kennzahl */ --as-ls-button: -0.012em; /* Abstände (4er-Raster; Website nutzt 12 als häufigsten Gap) ------------ */ --as-space-1: 4px; --as-space-2: 8px; --as-space-3: 12px; --as-space-4: 16px; --as-space-5: 20px; --as-space-6: 24px; --as-space-7: 32px; --as-space-8: 40px; --as-space-9: 48px; --as-space-10: 64px; --as-space-11: 72px; --as-space-12: 112px; --as-card-pad: 26px; /* Website-Karten */ --as-card-pad-lg: 32px; --as-section-pad: 112px; /* Sektionen vertikal (Desktop) */ --as-container: 1240px; /* + 64 px Seitenrand */ --as-gutter: 64px; /* Radien ----------------------------------------------------------------- */ --as-radius-xs: 3px; /* Datenbalken */ --as-radius-sm: 7px; /* Nummern-Chip, kleine Tags */ --as-radius-md: 11px; /* Buttons, Eingabefelder */ --as-radius-lg: 14px; /* kleine Karten, Panels */ --as-radius-xl: 18px; /* Standardkarte */ --as-radius-2xl: 22px; /* große Karte */ --as-radius-3xl: 26px; /* Bühnen-Panel */ --as-radius-pill: 999px; /* Schatten – immer zweilagig, Tinte statt Schwarz ------------------------- */ --as-shadow-xs: 0 1px 2px rgba(var(--as-ink-rgb), .06), 0 12px 24px -20px rgba(var(--as-ink-rgb), .55); --as-shadow-card: 0 1px 2px rgba(var(--as-ink-rgb), .08), 0 14px 30px -22px rgba(var(--as-ink-rgb), .48); --as-shadow-md: 0 10px 30px rgba(var(--as-ink-rgb), .06), 0 2px 6px rgba(var(--as-ink-rgb), .04); --as-shadow-lg: 0 18px 44px rgba(var(--as-ink-rgb), .12), 0 2px 8px rgba(var(--as-ink-rgb), .08); --as-shadow-xl: 0 44px 88px rgba(var(--as-ink-rgb), .19), 0 8px 20px rgba(var(--as-ink-rgb), .10); --as-shadow-red: 0 10px 24px -12px rgba(var(--as-red-rgb), .70); --as-shadow-red-hover: 0 14px 30px -12px rgba(var(--as-red-rgb), .80); --as-ring: 0 0 0 3px rgba(var(--as-teal-rgb), .16); --as-ring-danger: 0 0 0 3px rgba(var(--as-red-rgb), .18); /* Bewegung ---------------------------------------------------------------- */ --as-ease: cubic-bezier(0.22, 1, 0.36, 1); --as-dur-fast: 220ms; --as-dur: 300ms; --as-dur-slow: 400ms; } /* 4. Semantik – dunkler Modus (Website: Hero, „Versprechen“, Footer) ------ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --as-bg: var(--as-night-800); --as-bg-sand: #0F1E21; --as-surface: #192D30; --as-surface-sunken: rgba(var(--as-white-rgb), .06); --as-surface-hover: rgba(var(--as-white-rgb), .05); --as-text: var(--as-white); --as-text-body: rgba(var(--as-white-rgb), .77); --as-text-muted: rgba(var(--as-white-rgb), .64); --as-text-label: rgba(var(--as-white-rgb), .55); --as-border: rgba(var(--as-white-rgb), .13); --as-border-subtle: rgba(var(--as-white-rgb), .08); --as-border-card: rgba(var(--as-white-rgb), .13); --as-border-field: rgba(var(--as-white-rgb), .16); --as-border-strong: rgba(var(--as-white-rgb), .28); --as-accent-text: var(--as-red-300); --as-secondary: var(--as-teal-400); --as-secondary-text: var(--as-teal-300); --as-focus: var(--as-teal-300); --as-chip-neutral: rgba(var(--as-white-rgb), .04); --as-chip-neutral-border: rgba(var(--as-white-rgb), .16); --as-data-muted: rgba(var(--as-white-rgb), .14); --as-success: #6FC39D; --as-warning: #E8B45C; --as-danger: var(--as-red-300); --as-info: var(--as-teal-300); --as-shadow-card: 0 1px 2px rgba(0,0,0,.24), 0 18px 36px -26px rgba(0,0,0,.77); --as-shadow-md: 0 10px 30px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.20); --as-shadow-lg: 0 2px 6px rgba(0,0,0,.24), 0 34px 64px -34px rgba(0,0,0,.77); color-scheme: dark; } } :root[data-theme="dark"], .as-on-dark { --as-bg: var(--as-night-800); --as-bg-sand: #0F1E21; --as-surface: #192D30; --as-surface-sunken: rgba(var(--as-white-rgb), .06); --as-surface-hover: rgba(var(--as-white-rgb), .05); --as-text: var(--as-white); --as-text-body: rgba(var(--as-white-rgb), .77); --as-text-muted: rgba(var(--as-white-rgb), .64); --as-text-label: rgba(var(--as-white-rgb), .55); --as-border: rgba(var(--as-white-rgb), .13); --as-border-subtle: rgba(var(--as-white-rgb), .08); --as-border-card: rgba(var(--as-white-rgb), .13); --as-border-field: rgba(var(--as-white-rgb), .16); --as-border-strong: rgba(var(--as-white-rgb), .28); --as-accent-text: var(--as-red-300); --as-secondary: var(--as-teal-400); --as-secondary-text: var(--as-teal-300); --as-focus: var(--as-teal-300); --as-chip-neutral: rgba(var(--as-white-rgb), .04); --as-chip-neutral-border: rgba(var(--as-white-rgb), .16); --as-data-muted: rgba(var(--as-white-rgb), .14); --as-success: #6FC39D; --as-warning: #E8B45C; --as-danger: var(--as-red-300); --as-info: var(--as-teal-300); --as-shadow-card: 0 1px 2px rgba(0,0,0,.24), 0 18px 36px -26px rgba(0,0,0,.77); --as-shadow-md: 0 10px 30px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.20); --as-shadow-lg: 0 2px 6px rgba(0,0,0,.24), 0 34px 64px -34px rgba(0,0,0,.77); color-scheme: dark; } .as-on-dark { background: var(--as-bg); color: var(--as-text); } .as-on-petrol { --as-bg: var(--as-petrol-700); --as-surface: rgba(var(--as-white-rgb), .06); } /* 5. Grundstil ------------------------------------------------------------- */ .as-app, .as-root { font-family: var(--as-font); font-size: var(--as-fs-body); line-height: var(--as-lh-body); color: var(--as-text); background: var(--as-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .as-app *, .as-root * { box-sizing: border-box; } .as-app :focus-visible, .as-root :focus-visible { outline: 2px solid var(--as-focus); outline-offset: 3px; } .as-tabular { font-variant-numeric: tabular-nums; } /* 6. Typografie-Klassen ------------------------------------------------------ Signatur: Headlines im leichten Grundschnitt (400), einzelne Kernwörter in ExtraBold (800) über oder .as-em. Nie die ganze Zeile fett, nie zwei Betonungen in einer Zeile. */ .as-hero, .as-display, .as-h1, .as-h2 { margin: 0; color: var(--as-text); font-weight: var(--as-fw-light); text-wrap: balance; } .as-hero { font-size: var(--as-fs-hero); line-height: var(--as-lh-hero); letter-spacing: var(--as-ls-hero); } .as-display { font-size: var(--as-fs-display); line-height: var(--as-lh-display); letter-spacing: var(--as-ls-display); } .as-h1 { font-size: var(--as-fs-h1); line-height: var(--as-lh-h1); letter-spacing: var(--as-ls-h1); } .as-h2 { font-size: var(--as-fs-h2); line-height: var(--as-lh-h2); letter-spacing: var(--as-ls-h2); } .as-hero strong, .as-display strong, .as-h1 strong, .as-h2 strong, .as-em { font-weight: var(--as-fw-black); } .as-h3 { margin: 0; color: var(--as-text); font-size: var(--as-fs-h3); line-height: var(--as-lh-h3); letter-spacing: var(--as-ls-h3); font-weight: var(--as-fw-black); } .as-lead { margin: 0; font-size: var(--as-fs-lead); line-height: var(--as-lh-lead); color: var(--as-text-body); max-width: 34em; } .as-body { margin: 0; font-size: var(--as-fs-body); line-height: var(--as-lh-body); color: var(--as-text-body); } .as-small { margin: 0; font-size: var(--as-fs-small); line-height: var(--as-lh-small); color: var(--as-text-body); } .as-caption { margin: 0; font-size: var(--as-fs-caption); line-height: var(--as-lh-caption); color: var(--as-text-muted); } .as-label-caps { font-size: var(--as-fs-label); line-height: 1.4; font-weight: var(--as-fw-black); letter-spacing: var(--as-ls-label); text-transform: uppercase; color: var(--as-text-label); } .as-link { color: var(--as-accent-text); font-weight: var(--as-fw-bold); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color var(--as-dur) var(--as-ease); } .as-link svg { transition: transform var(--as-dur) var(--as-ease); } .as-link:hover svg { transform: translateX(4px); } /* 7. Buttons ------------------------------------------------------------------ Rot = genau eine Hauptaktion pro Ansicht. Teal = zweite Aktion. Hover: 2 px anheben, innerer Lichtschein unten, Pfeil 4 px nach rechts. */ .as-btn { --btn-bg: var(--as-red-500); --btn-fg: var(--as-white); --btn-border: rgba(var(--as-white-rgb), .13); --btn-shadow: rgba(var(--as-red-rgb), .5); --btn-glow: rgba(var(--as-white-rgb), .28); position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; font-family: var(--as-font); font-size: 0.8125rem; font-weight: var(--as-fw-bold); letter-spacing: var(--as-ls-button); line-height: 1; white-space: nowrap; color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: var(--as-radius-md); cursor: pointer; text-decoration: none; transition: transform var(--as-dur-slow) var(--as-ease), box-shadow var(--as-dur-slow) var(--as-ease), background-color var(--as-dur) var(--as-ease), border-color var(--as-dur) var(--as-ease), color var(--as-dur) var(--as-ease); } .as-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 transparent; pointer-events: none; transition: box-shadow var(--as-dur-slow) var(--as-ease); } .as-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -16px var(--btn-shadow); } .as-btn:hover::after { box-shadow: inset 0 -6px 10px var(--btn-glow); } .as-btn:active { transform: translateY(0); } .as-btn:focus-visible { outline: 2px solid var(--as-focus); outline-offset: 3px; } .as-btn:disabled, .as-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; } .as-btn svg { width: 14px; height: 14px; flex: none; transition: transform var(--as-dur-slow) var(--as-ease); } .as-btn:hover svg.as-arrow { transform: translateX(4px); } .as-btn--md { height: 47px; padding: 0 23px; font-size: 0.9375rem; } .as-btn--lg { height: 52px; padding: 0 27px; font-size: 1rem; } .as-btn--sm { height: 32px; padding: 0 12px; font-size: 0.75rem; border-radius: 9px; } .as-btn--block { width: 100%; } .as-btn--secondary { --btn-bg: var(--as-secondary); --btn-shadow: rgba(var(--as-teal-rgb), .55); } .as-btn--light { --btn-bg: var(--as-surface); --btn-fg: var(--as-text); --btn-border: var(--as-border-card); --btn-shadow: rgba(var(--as-ink-rgb), .35); --btn-glow: rgba(var(--as-ink-rgb), .10); } .as-btn--light:hover { border-color: var(--as-line-500); } .as-btn--glass { --btn-bg: rgba(var(--as-white-rgb), .08); --btn-fg: var(--as-white); --btn-border: rgba(var(--as-white-rgb), .16); --btn-shadow: rgba(0,0,0,.5); backdrop-filter: blur(10px); } .as-btn--glass:hover { background: rgba(var(--as-white-rgb), .15); border-color: rgba(var(--as-white-rgb), .28); } .as-btn--ghost { --btn-bg: transparent; --btn-fg: var(--as-text-body); --btn-border: transparent; --btn-shadow: transparent; --btn-glow: transparent; } .as-btn--ghost:hover { background: var(--as-surface-hover); color: var(--as-text); transform: none; } .as-btn--danger { --btn-bg: transparent; --btn-fg: var(--as-danger); --btn-border: rgba(var(--as-red-rgb), .30); --btn-shadow: transparent; --btn-glow: transparent; } .as-btn--danger:hover { background: rgba(var(--as-red-rgb), .08); transform: none; } .as-icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--as-border); background: var(--as-surface); color: var(--as-text); cursor: pointer; box-shadow: var(--as-shadow-md); transition: transform var(--as-dur) var(--as-ease), background-color var(--as-dur) var(--as-ease); } .as-icon-btn:hover { transform: translateY(-1px); } /* 8. Eyebrow, Pills, Badges, Karten ---------------------------------------- */ /* Eyebrow: Nummern-Chip + VERSAL-Label + Haarlinie darunter. Chipfarbe wechselt Rot/Teal und ist der Textton auf 10 % Fläche. */ .as-eyebrow { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--as-border); } .as-eyebrow--plain { border-bottom: 0; padding-bottom: 0; } .as-eyebrow__num { position: relative; display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 8px; border-radius: var(--as-radius-sm); font-size: 0.78rem; font-weight: var(--as-fw-black); letter-spacing: 0.02em; line-height: 1; color: var(--as-accent); font-variant-numeric: tabular-nums; } .as-eyebrow__num::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: .1; } .as-eyebrow__num--teal { color: var(--as-secondary-text); } .as-eyebrow__label { font-size: var(--as-fs-eyebrow); font-weight: var(--as-fw-black); letter-spacing: var(--as-ls-eyebrow); text-transform: uppercase; line-height: 1.6; color: var(--as-text-label); } /* Pill mit Punkt (Hero-Kennzeichnung, Filter, Bewertungsplakette) */ .as-pill { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 10px; border-radius: var(--as-radius-pill); white-space: nowrap; font-size: 0.6875rem; font-weight: var(--as-fw-black); letter-spacing: 0.16em; text-transform: uppercase; color: var(--as-text-muted); background: var(--as-chip-neutral); border: 1px solid var(--as-chip-neutral-border); } .as-pill--plain { text-transform: none; letter-spacing: 0; font-weight: var(--as-fw-bold); font-size: 0.8125rem; color: var(--as-text); } .as-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--as-accent); flex: none; } .as-dot--teal { background: var(--as-teal-300); } /* Status-Badge (für Software abgeleitet: Fläche = Ton 10 %, Text = Ton) */ .as-badge { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--as-radius-sm); font-size: 0.75rem; font-weight: var(--as-fw-bold); line-height: 1; color: var(--as-text-muted); white-space: nowrap; } .as-badge::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: .1; } .as-badge--accent { color: var(--as-accent-text); } .as-badge--info { color: var(--as-info); } .as-badge--success { color: var(--as-success); } .as-badge--warning { color: var(--as-warning); } .as-badge--danger { color: var(--as-danger); } .as-badge--solid { color: var(--as-white); } .as-badge--solid::before { background: var(--as-red-500); opacity: 1; } /* Karten */ .as-card { background: var(--as-surface); border: 1px solid var(--as-border-card); border-radius: var(--as-radius-xl); padding: var(--as-card-pad); box-shadow: var(--as-shadow-card); } .as-card--flat { box-shadow: none; border-color: var(--as-border); } .as-card--lg { border-radius: var(--as-radius-2xl); padding: var(--as-card-pad-lg); border-color: var(--as-border); box-shadow: var(--as-shadow-xs); } .as-card--interactive { cursor: pointer; transition: transform var(--as-dur-slow) var(--as-ease), box-shadow var(--as-dur-slow) var(--as-ease); } .as-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--as-shadow-lg); } /* Wahlkarte mit Akzentstrich + Buchstabe (Website „A Auftragsgewinnung“) */ .as-card__mark { display: flex; align-items: center; gap: 12px; font-size: 0.6875rem; font-weight: var(--as-fw-black); color: var(--as-accent-text); } .as-card__mark::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: currentColor; } .as-card__mark--teal { color: var(--as-secondary-text); } /* Hauch-Verlauf der Wahlkarten */ .as-card--tint-red { background-image: radial-gradient(120% 100% at 100% 0%, rgba(var(--as-red-rgb), .07) 0%, transparent 62%); } .as-card--tint-teal { background-image: radial-gradient(120% 100% at 100% 0%, rgba(var(--as-teal-rgb), .08) 0%, transparent 62%); } .as-divider { height: 1px; border: 0; background: var(--as-border); margin: 0; } /* 9. Formulare -------------------------------------------------------------- */ .as-field { display: grid; gap: 8px; min-width: 0; } .as-field__label { font-size: var(--as-fs-label); font-weight: var(--as-fw-black); letter-spacing: var(--as-ls-label); text-transform: uppercase; line-height: 1.4; color: var(--as-text-label); } .as-field__hint { font-size: 0.75rem; color: var(--as-text-muted); } .as-field__error { font-size: 0.75rem; font-weight: var(--as-fw-bold); color: var(--as-danger); } .as-input, .as-select, .as-textarea { width: 100%; min-height: 48px; padding: 12px 14px; font-family: var(--as-font); font-size: var(--as-fs-body); line-height: 1.5; color: var(--as-text); background: var(--as-surface-sunken); border: 1px solid var(--as-border-field); border-radius: var(--as-radius-md); outline: none; appearance: none; transition: background-color var(--as-dur-fast), border-color var(--as-dur-fast), box-shadow var(--as-dur-fast); } .as-textarea { min-height: 112px; resize: vertical; } .as-input::placeholder, .as-textarea::placeholder { color: var(--as-ink-400); } .as-input:hover, .as-select:hover, .as-textarea:hover { border-color: var(--as-border-strong); } .as-input:focus, .as-select:focus, .as-textarea:focus { background: var(--as-surface); border-color: var(--as-focus); box-shadow: var(--as-ring); } .as-input[aria-invalid="true"] { border-color: var(--as-danger); } .as-input[aria-invalid="true"]:focus { box-shadow: var(--as-ring-danger); } .as-select { padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23889291' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; } /* Auswahl-Chips (Mehrfachauswahl, Filter) */ .as-choice { display: inline-flex; } .as-choice input { position: absolute; opacity: 0; pointer-events: none; } .as-choice span { display: inline-flex; align-items: center; height: 38px; padding: 0 15px; font-size: 0.875rem; font-weight: var(--as-fw-bold); letter-spacing: -0.006em; color: var(--as-text); background: var(--as-surface-sunken); border: 1px solid var(--as-border-field); border-radius: var(--as-radius-pill); cursor: pointer; transition: background-color var(--as-dur-fast), border-color var(--as-dur-fast), color var(--as-dur-fast); } .as-choice span:hover { border-color: var(--as-border-strong); } .as-choice input:checked + span { background: var(--as-ink-900); border-color: var(--as-ink-900); color: var(--as-white); } :root[data-theme="dark"] .as-choice input:checked + span, .as-on-dark .as-choice input:checked + span { background: var(--as-white); border-color: var(--as-white); color: var(--as-ink-900); } .as-choice input:focus-visible + span { outline: 2px solid var(--as-focus); outline-offset: 2px; } /* Segment-Umschalter (Website: „Alle / Auftragsgewinnung / Mitarbeitergewinnung“) */ .as-segment { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--as-radius-pill); background: var(--as-surface-sunken); border: 1px solid var(--as-border-subtle); } .as-segment button { height: 30px; padding: 0 14px; border: 0; border-radius: var(--as-radius-pill); font: var(--as-fw-bold) 0.8125rem/1 var(--as-font); color: var(--as-text-muted); background: transparent; cursor: pointer; transition: background-color var(--as-dur) var(--as-ease), color var(--as-dur) var(--as-ease), box-shadow var(--as-dur) var(--as-ease); } .as-segment button[aria-pressed="true"] { background: var(--as-surface); color: var(--as-text); box-shadow: 0 2px 8px rgba(var(--as-ink-rgb), .12), 0 0 0 1px rgba(var(--as-ink-rgb), .06); } /* 10. Tabelle, KPI, Fortschritt -------------------------------------------- */ .as-table-wrap { overflow-x: auto; border: 1px solid var(--as-border-card); border-radius: var(--as-radius-xl); background: var(--as-surface); } .as-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; } .as-table th { text-align: left; padding: 12px 16px; white-space: nowrap; font-size: var(--as-fs-label); font-weight: var(--as-fw-black); letter-spacing: var(--as-ls-label); text-transform: uppercase; color: var(--as-text-label); border-bottom: 1px solid var(--as-border); } .as-table td { padding: 14px 16px; color: var(--as-text-body); border-bottom: 1px solid var(--as-border-subtle); } .as-table tr:last-child td { border-bottom: 0; } .as-table tbody tr { transition: background-color var(--as-dur-fast); } .as-table tbody tr:hover { background: var(--as-surface-hover); } .as-table td.as-num, .as-table th.as-num { text-align: right; } .as-table td strong { color: var(--as-text); font-weight: var(--as-fw-bold); } .as-kpi { display: grid; gap: 8px; } .as-kpi__value { font-size: var(--as-fs-kpi); line-height: var(--as-lh-kpi); letter-spacing: var(--as-ls-kpi); font-weight: var(--as-fw-black); color: var(--as-text); font-variant-numeric: tabular-nums; } .as-kpi__label { font-size: 0.625rem; font-weight: var(--as-fw-black); letter-spacing: 0.16em; text-transform: uppercase; color: var(--as-accent-text); } .as-kpi--sm .as-kpi__value { font-size: 2rem; letter-spacing: -0.04em; } .as-progress { height: 8px; border-radius: var(--as-radius-xs); background: var(--as-data-muted); overflow: hidden; } .as-progress__bar { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--as-teal-300) 0%, var(--as-teal-300) 72%, rgba(var(--as-white-rgb), .18) 100%); transition: width .35s var(--as-ease); } .as-progress__bar--accent { background: linear-gradient(90deg, var(--as-red-500) 0%, var(--as-red-500) 72%, rgba(var(--as-white-rgb), .18) 100%); } /* 11. App-Rahmen ------------------------------------------------------------ */ /* Topbar: dunkles Milchglas wie die Website-Kopfleiste (77 px) */ .as-topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 24px; height: 64px; padding: 0 24px; background: rgba(var(--as-ink-rgb), .62); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); color: var(--as-white); border-bottom: 1px solid rgba(var(--as-white-rgb), .08); } .as-topbar a { color: rgba(var(--as-white-rgb), .82); text-decoration: none; font-weight: var(--as-fw-medium); font-size: 0.875rem; } .as-topbar a:hover, .as-topbar a[aria-current="page"] { color: var(--as-white); } /* Sidebar: Night-Fläche, aktiver Punkt mit rotem Dot */ .as-sidebar { background: var(--as-night-800); color: rgba(var(--as-white-rgb), .72); padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; } .as-sidebar__group { margin: 18px 10px 6px; font-size: 0.625rem; font-weight: var(--as-fw-black); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(var(--as-white-rgb), .5); } .as-sidebar__item { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border-radius: var(--as-radius-md); color: inherit; text-decoration: none; font-size: 0.875rem; font-weight: var(--as-fw-medium); transition: background-color var(--as-dur-fast), color var(--as-dur-fast); } .as-sidebar__item:hover { background: rgba(var(--as-white-rgb), .06); color: var(--as-white); } .as-sidebar__item[aria-current="page"] { background: rgba(var(--as-white-rgb), .10); color: var(--as-white); font-weight: var(--as-fw-bold); } .as-sidebar__item[aria-current="page"]::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--as-red-500); } /* 12. Dunkle Bühne: Night-Grund + Teal-/Rot-Glow + 56-px-Raster -------------- */ .as-stage { position: relative; isolation: isolate; overflow: hidden; background: var(--as-night-800); color: var(--as-white); } .as-stage::before { /* Glows: Teal links oben, Rot rechts unten */ content: ""; position: absolute; inset: -20%; z-index: -2; pointer-events: none; background: radial-gradient(38% 46% at 18% 18%, rgba(var(--as-teal-rgb), .55) 0%, transparent 70%), radial-gradient(34% 40% at 92% 92%, rgba(var(--as-red-rgb), .20) 0%, transparent 70%); filter: blur(40px); } .as-stage::after { /* Raster 56 px, weiß 4 %, radial ausgeblendet */ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(var(--as-white-rgb), .04) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--as-white-rgb), .04) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(70% 70% at 60% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 70% at 60% 50%, #000 30%, transparent 100%); } /* Foto-Overlay für Bildkarten */ .as-photo-shade { background-image: linear-gradient(to top, rgba(var(--as-ink-rgb), .82) 0%, rgba(var(--as-ink-rgb), 0) 100%); } @media (prefers-reduced-motion: reduce) { .as-app *, .as-root * { transition-duration: 1ms !important; animation-duration: 1ms !important; } .as-btn:hover, .as-card--interactive:hover { transform: none; } }