/* ════════════════════════════════════════════════════════════ adhsupport.de · Portal Design System Default: helles warmes Theme. Dark via [data-theme="dark"] (Toggle in der Nav, Persistenz in localStorage, /assets/theme.js). /cockpit (Produktseite) behält unabhängig davon ihr dunkles Theme. ════════════════════════════════════════════════════════════ */ :root { /* Palette abgeleitet aus dem Logo: A=Lavendel #e2a9f1 · D=Cyan #5ce1e6 · H=Rot #ff5757 · S=Gelb #ffde59 · Badge=Lime #dffd6e · Schrift=Grau #545454. Helles Theme: warm-neutrale Basis, die vier Logofarben als lebendige Akzente. */ --void: #FBFAF6; /* warmes Off-White, lässt die Logofarben leuchten */ --surface: #FFFFFF; /* Karten */ --surface2: #F2F0E9; /* Hover / Sekundärflächen */ --surface3: #F7F5EE; /* Inputs / Tiefe */ --border: #E9E6DB; --border-light: #DAD6C9; --t1: #2A2A2E; /* Fließtext */ --t2: #545454; /* Logo-Grau, Sekundärtext */ --t3: #8A8678; --signal: #0C7177; /* tiefes Cyan/Teal (aus dem D), Links + Lead, AA-lesbar */ --signal-glow: #0C71772E; --signal-dim: #0C71770F; /* Die vier Logofarben als vivide Akzente */ --c-lav: #A24FC2; --c-cyan: #0EA5B5; --c-coral: #E0432E; --c-yellow: #F5B301; --pink: #A24FC2; /* Lavendel (A) */ --blue: #0EA5B5; /* Cyan (D), vivider */ --green: #4DA00F; /* Lime-tief (Badge) */ --purple: #A24FC2; /* Lavendel */ --red: #E0432E; /* Coral-Rot (H) */ --grad: linear-gradient(100deg, #A24FC2, #0EA5B5 52%, #E0432E); --btn-bg: linear-gradient(100deg, #0E8A90, #0B6F75); --btn-fg: #FFFFFF; --btn-glow: rgba(12, 113, 119, 0.30); --nav-bg: rgba(251, 250, 246, 0.86); --nav-bg-solid: rgba(251, 250, 246, 0.98); --card-hover-bg: #FFFFFF; --glow-a: rgba(92, 225, 230, 0.20); /* Cyan-Hauch */ --glow-b: rgba(226, 169, 241, 0.18); /* Lavendel-Hauch */ --shadow-sm: 0 1px 2px rgba(60, 52, 30, 0.05); --shadow-lift: 0 12px 32px rgba(60, 52, 30, 0.10); --shadow-lift-sm: 0 8px 24px rgba(60, 52, 30, 0.08); --radius: 16px; --radius-sm: 10px; --font: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; --display: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; } /* ─── Tageszeit-Stimmungen (3× täglich, nur Akzent-Tokens) ─── morning 5–11 Uhr: Sonnenaufgang · day 11–18 Uhr: Default · evening 18–5 Uhr: blaue Stunde. Gesetzt von /assets/theme.js als data-daypart auf ; Test-Override: ?daypart=morning|day|evening */ [data-daypart="morning"] { --signal: #C2410C; /* warmer Rost (Gelb→Rot des Logos) */ --signal-glow: #C2410C2E; --signal-dim: #C2410C0F; --grad: linear-gradient(100deg, #FFDE59, #D62B2B 55%, #A24FC2); --btn-bg: linear-gradient(100deg, #C2410C, #9A3208); --btn-glow: rgba(194, 65, 12, 0.30); --glow-a: rgba(255, 222, 89, 0.22); --glow-b: rgba(255, 87, 87, 0.16); } [data-daypart="evening"] { --signal: #5E3AA0; /* tiefes Lavendel (A) für die blaue Stunde */ --signal-glow: #5E3AA02E; --signal-dim: #5E3AA00F; --grad: linear-gradient(100deg, #A24FC2, #0C7177); --btn-bg: linear-gradient(100deg, #5E3AA0, #0C7177); --btn-glow: rgba(94, 58, 160, 0.30); --glow-a: rgba(226, 169, 241, 0.18); --glow-b: rgba(92, 225, 230, 0.16); } [data-theme="dark"] { --void: #15151A; /* neutrales Tiefschwarz, damit die Logofarben knallen */ --surface: #1F1F26; --surface2: #28282F; --surface3: #18181E; --border: #32323C; --border-light: #40404C; --t1: #ECEAE3; --t2: #B5B2A8; --t3: #7E7B72; --signal: #5CE1E6; /* helles Cyan (D) */ --signal-glow: #5CE1E638; --signal-dim: #5CE1E615; --pink: #E2A9F1; --blue: #5CE1E6; --green: #DFFD6E; --purple: #E2A9F1; --red: #FF7A7A; --grad: linear-gradient(100deg, #E2A9F1, #5CE1E6 40%, #FFDE59 72%, #FF7A7A); --btn-bg: linear-gradient(100deg, #5CE1E6, #4ECDD3); --btn-fg: #15151A; /* dunkle Schrift auf hellem Cyan-Button */ --btn-glow: rgba(92, 225, 230, 0.28); --nav-bg: rgba(21, 21, 26, 0.82); --nav-bg-solid: rgba(21, 21, 26, 0.97); --card-hover-bg: #28282F; --glow-a: rgba(92, 225, 230, 0.14); --glow-b: rgba(226, 169, 241, 0.12); --shadow-sm: none; --shadow-lift: none; --shadow-lift-sm: none; } [data-theme="dark"][data-daypart="morning"] { --signal: #FFDE59; /* Gelb (S) */ --signal-glow: #FFDE5938; --signal-dim: #FFDE5915; --grad: linear-gradient(100deg, #FFDE59, #FF7A7A 55%, #E2A9F1); --glow-a: rgba(255, 222, 89, 0.14); --glow-b: rgba(255, 122, 122, 0.13); } [data-theme="dark"][data-daypart="evening"] { --signal: #E2A9F1; /* Lavendel (A) */ --signal-glow: #E2A9F138; --signal-dim: #E2A9F115; --grad: linear-gradient(100deg, #E2A9F1, #5CE1E6); --glow-a: rgba(226, 169, 241, 0.13); --glow-b: rgba(92, 225, 230, 0.11); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--void); color: var(--t1); font-family: var(--font); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: clip; transition: background 0.25s ease, color 0.25s ease; } /* Headlines in Bricolage Grotesque (charaktervoll), Fließtext bleibt Hanken Grotesk. */ h1, h2, h3, h4, h5, .nav-brand .domain { font-family: var(--display); letter-spacing: -0.015em; } /* Display-Zeilenhöhen: straffer als Fließtext, sonst wirken mehrzeilige Headlines luftig. */ h1 { line-height: 1.08; } h2 { line-height: 1.22; } h3, h4, h5 { line-height: 1.32; } /* Karten-Farbvarianten: Varianz statt Einheitsweiss. Sanfter Tint je Logofarbe (theme-adaptiv via color-mix mit der jeweiligen --surface) plus ein farbiger Top-Strich. */ .card-lav, .card-cyan, .card-coral, .card-yellow, .card-teal { position: relative; overflow: hidden; } .card-lav::before, .card-cyan::before, .card-coral::before, .card-yellow::before, .card-teal::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; } .card-lav { background: color-mix(in srgb, var(--surface) 84%, #A24FC2); } .card-lav::before { background: #A24FC2; height: 4px; } .card-cyan { background: color-mix(in srgb, var(--surface) 84%, #0EA5B5); } .card-cyan::before { background: #0EA5B5; height: 4px; } .card-coral { background: color-mix(in srgb, var(--surface) 84%, #E0432E); } .card-coral::before { background: #E0432E; height: 4px; } .card-yellow { background: color-mix(in srgb, var(--surface) 82%, #F5B301); } .card-yellow::before { background: #F5B301; height: 4px; } .card-teal { background: color-mix(in srgb, var(--surface) 84%, #0C7177); } .card-teal::before { background: #0C7177; height: 4px; } /* Bento: einzelne Karten breiter (2 Spalten) fuer Asymmetrie/Varianz. */ .card-feature { grid-column: span 2; } @media (max-width: 760px) { .card-feature { grid-column: auto; } } /* Vollbreit-Kontrastband hinter einer Sektion (bricht das Weiss auf, ohne Layout zu verschieben). */ .band { position: relative; } .band::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1; background: color-mix(in srgb, var(--void) 80%, #A24FC2); } .band-cyan::before { background: color-mix(in srgb, var(--void) 82%, #0EA5B5); } .band-coral::before { background: color-mix(in srgb, var(--void) 84%, #E0432E); } .band-teal::before { background: color-mix(in srgb, var(--void) 82%, #0C7177); } .band-yellow::before { background: color-mix(in srgb, var(--void) 80%, #F5B301); } ::selection { background: var(--signal-glow); } a { color: var(--signal); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; } /* ─── Navigation ─── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; color: var(--t1); letter-spacing: -0.01em; } .nav-brand:hover { text-decoration: none; } .nav-brand img { height: 26px; width: auto; display: block; } .nav-brand .domain { color: var(--t1); } .nav-brand .domain b { color: var(--signal); font-weight: 800; } .nav-center { display: flex; align-items: center; gap: 6px; } .nav-link { color: var(--t2); font-size: 14.5px; font-weight: 500; padding: 7px 12px; border-radius: 8px; transition: color 0.15s, background 0.15s; } .nav-link:hover { color: var(--t1); background: var(--surface2); text-decoration: none; } .nav-link.active { color: var(--t1); background: var(--surface2); } .nav-sos { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--t1); min-height: 42px; padding: 8px 16px; border: 1px solid var(--border-light); border-radius: 100px; background: var(--surface); transition: border-color 0.15s, background 0.15s; white-space: nowrap; } .nav-sos:hover { border-color: var(--red); background: #E11D480D; text-decoration: none; } [data-theme="dark"] .nav-sos:hover { background: #FB718514; } .nav-sos .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex-shrink: 0; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: var(--surface); border: 1px solid var(--border-light); border-radius: 100px; color: var(--t2); cursor: pointer; flex-shrink: 0; transition: border-color 0.15s, color 0.15s, background 0.15s; } .theme-toggle:hover { color: var(--t1); border-color: var(--t3); } .theme-toggle svg { display: block; } .theme-toggle .ic-sun { display: none; } [data-theme="dark"] .theme-toggle .ic-sun { display: block; } [data-theme="dark"] .theme-toggle .ic-moon { display: none; } .nav-toggle { display: none; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--t1); min-width: 42px; min-height: 42px; padding: 7px 11px; font-size: 17px; line-height: 1; cursor: pointer; } /* ─── Page scaffold ─── */ .wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; } main { padding-top: 64px; } .page-head { padding: 96px 0 36px; max-width: 760px; position: relative; } .page-head::before, .page-head::after { content: ""; position: absolute; border-radius: 50%; filter: blur(72px); pointer-events: none; z-index: -1; } .page-head::before { width: 420px; height: 420px; background: var(--glow-a); top: -70px; right: -140px; } .page-head::after { width: 360px; height: 360px; background: var(--glow-b); bottom: -150px; left: -150px; } .section-label { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal); margin-bottom: 14px; } h1 { font-size: clamp(32px, 5vw, 46px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 800; margin-bottom: 18px; } h1 .gradient, .gradient { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .lead { font-size: 18.5px; color: var(--t2); line-height: 1.7; max-width: 640px; } .section { padding: 44px 0; } .section + .section { border-top: 1px solid var(--surface2); } h2 { font-size: clamp(22px, 3vw, 28px); letter-spacing: -0.015em; font-weight: 700; margin-bottom: 12px; } h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; } p { color: var(--t2); } p + p { margin-top: 12px; } strong { color: var(--t1); font-weight: 600; } /* ─── Buttons ─── */ .btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font); font-size: 15px; font-weight: 600; padding: 13px 24px; border-radius: 100px; border: 1px solid transparent; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn-primary { background: var(--btn-bg); color: var(--btn-fg); } .btn-primary:hover { box-shadow: 0 8px 24px var(--btn-glow); } .btn-ghost { background: var(--surface); color: var(--t1); border-color: var(--border-light); } .btn-ghost:hover { border-color: var(--t3); background: var(--surface2); } .btn-danger { background: var(--surface); color: var(--red); border-color: #E11D4855; } .btn-danger:hover { background: #E11D480D; } [data-theme="dark"] .btn-danger { border-color: #FB718555; } [data-theme="dark"] .btn-danger:hover { background: #FB718514; } /* ─── Cards & Grids ─── */ .grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; color: var(--t1); box-shadow: var(--shadow-sm); transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s, background 0.18s; } a.card:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--border-light); background: var(--card-hover-bg); box-shadow: var(--shadow-lift); } .card .icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--signal-dim); color: var(--signal); margin-bottom: 16px; transition: transform 0.18s ease; } a.card:hover .icon { transform: scale(1.07); } .card h3 { margin-bottom: 8px; } .card p { font-size: 14.5px; line-height: 1.6; } .card .more { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--signal); } .icon-blue { background: #2563EB14 !important; color: var(--blue) !important; } .icon-green { background: #05966912 !important; color: var(--green) !important; } .icon-purple { background: #9333EA14 !important; color: var(--purple) !important; } .icon-red { background: #E11D4812 !important; color: var(--red) !important; } [data-theme="dark"] .icon-blue { background: #60A5FA1A !important; } [data-theme="dark"] .icon-green { background: #34D39916 !important; } [data-theme="dark"] .icon-purple { background: #C084FC1A !important; } [data-theme="dark"] .icon-red { background: #FB718516 !important; } /* ─── Listen-Einträge (Verzeichnis) ─── */ .entry { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-sm); transition: border-color 0.18s, box-shadow 0.18s, background 0.18s; } .entry + .entry { margin-top: 12px; } a.entry:hover { text-decoration: none; border-color: var(--border-light); background: var(--card-hover-bg); box-shadow: var(--shadow-lift-sm); } .entry .entry-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } .entry h3 { color: var(--t1); } .entry .host { font-family: var(--mono); font-size: 12px; color: var(--t3); } .entry p { font-size: 14.5px; } .pill { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t2); background: var(--surface2); border: 1px solid var(--border); padding: 3px 10px; border-radius: 100px; margin-right: 6px; margin-top: 10px; } /* ─── Krisen-Elemente ─── */ .crisis-line { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center; font-size: 14px; color: var(--t2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 12px 18px; } .crisis-line strong { color: var(--t1); } .crisis-line a { white-space: nowrap; } .crisis-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--red); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 24px; } .crisis-card.calm { border-left-color: var(--signal); } .crisis-card .number { font-family: var(--mono); font-size: clamp(20px, 3vw, 26px); font-weight: 500; color: var(--t1); display: block; margin: 6px 0 4px; } .crisis-card .number a { color: var(--t1); } .crisis-card .meta { font-size: 13.5px; color: var(--t3); } /* ─── Hinweis-Boxen ─── */ .note { background: var(--signal-dim); border: 1px solid var(--signal-glow); border-radius: var(--radius-sm); padding: 16px 18px; font-size: 14.5px; color: var(--t2); } .note strong { color: var(--signal); } /* ─── Footer ─── */ footer { margin-top: 64px; border-top: 1px solid var(--border); background: var(--surface2); padding: 44px 0 56px; } [data-theme="dark"] footer { background: var(--surface3); } .footer-disclaimer { font-size: 13.5px; color: var(--t3); line-height: 1.7; max-width: 720px; margin-bottom: 28px; } .footer-links { display: flex; flex-wrap: wrap; gap: 2px 22px; margin-bottom: 10px; } .footer-links a { color: var(--t2); font-size: 14px; display: inline-block; padding: 6px 0; } .footer-links a:hover { color: var(--t1); } .footer-copy { font-size: 13px; color: var(--t3); margin-top: 18px; } /* ─── Reveal (dezent, abschaltbar) ─── */ .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .btn:hover, a.card:hover, a.card:hover .icon { transform: none; } body { transition: none; } } /* ─── Responsive ─── */ @media (max-width: 980px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .nav-center { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--nav-bg-solid); border-bottom: 1px solid var(--border); padding: 10px 16px 16px; gap: 2px; } .nav-center.open { display: flex; } .nav-link { padding: 12px 14px; font-size: 16px; } .nav-toggle { display: block; } } @media (max-width: 700px) { .grid, .grid-2 { grid-template-columns: 1fr; } .page-head { padding: 76px 0 28px; } .section { padding: 36px 0; } .nav { padding: 12px 16px; gap: 10px; } .wrap { padding: 0 18px; } .nav-sos span.label { display: none; } .nav-sos::after { content: "Notfall"; } /* Touch-Targets & Daumen-Ergonomie */ .theme-toggle { width: 44px; height: 44px; } .nav-toggle { min-width: 44px; min-height: 44px; } .nav-sos { min-height: 44px; } .btn { padding: 15px 24px; width: 100%; justify-content: center; } .row .btn, .tabs .btn { width: auto; } .card .btn { padding: 14px 18px !important; } .footer-links { gap: 2px 18px; } .footer-links a { padding: 9px 0; } /* Glows kleiner und günstiger auf Mobil-GPUs */ .page-head::before { width: 260px; height: 260px; filter: blur(54px); right: -90px; top: -50px; } .page-head::after { width: 220px; height: 220px; filter: blur(54px); left: -90px; bottom: -90px; } /* Krisen-Zeile linksbündig statt zerrissen zentriert */ .crisis-line { text-align: left; justify-content: flex-start; } .lex-toc a { padding: 10px 16px; } .card { padding: 22px 18px; } .entry { padding: 20px 18px; } }