/* ============================================================ base.css – gemeinsames Chrome (Header + Footer) für ALLE Seiten. Namespaced mit .ll- um Kollisionen mit overview.css/configurator.css zu vermeiden. Wird als erstes Stylesheet eingebunden. ============================================================ */ /* ============================================================ DESIGN-TOKENS - eine zentrale Quelle für Farbe, Typografie, Raster. ------------------------------------------------------------ Aufbau (jede Ebene überschreibt nur, was sie ändert): 1) :root .................. Skalen (Typo/Abstand/Radius) + LIGHT-Neutrale + Default-Palette „vertrauen". 2) [data-palette="…"] ..... tauscht NUR Marken-/Akzentfarben (Light). 3) [data-theme="dark"] .... tauscht Neutrale + Dark-Akzente. 4) @media (dark) .......... Erstanstrich folgt der Systemeinstellung, auch ohne JS (für die ausgelieferte Palette). Umschalten zur Laufzeit (per base.js / manuell): Palette dauerhaft festlegen: data-palette im setzen ODER in base.js die Konstante DEFAULT_PALETTE ändern. ============================================================ */ :root { color-scheme: light; /* ── Typografie-Skala (Markenschriften: Fraunces + Hanken Grotesk) ── */ --font-sans: "Hanken Grotesk", "Segoe UI", Aptos, system-ui, -apple-system, Arial, sans-serif; --font-serif: "Fraunces", Georgia, "Times New Roman", serif; --text-xs: 0.82rem; /* ~13px – Labels, Meta */ --text-sm: 0.94rem; /* ~15px – Sekundärtext */ --text-base: 1.0625rem; /* ~17px – Fließtext (gut lesbar, auch ältere Augen) */ --text-md: 1.2rem; /* ~19px – betonter Text */ --text-lg: 1.45rem; --leading-body: 1.7; --leading-tight: 1.18; /* Modulare Headline-Skala - EINZIGE Quelle für große Schrift. Alle Seiten nutzen diese vier Stufen statt eigener clamp()-Werte. */ --fs-display: clamp(2.6rem, 1.7rem + 3.2vw, 4.2rem); /* nur Hero-H1 */ --fs-h2: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem); /* Sektions-Headlines */ --fs-h3: clamp(1.28rem, 1.16rem + 0.5vw, 1.55rem); --fs-lead: clamp(1.08rem, 1rem + 0.4vw, 1.28rem); /* Einleitungs-/Subtexte */ /* ── Motion-Tokens - eine Bewegungssprache für alles ───── */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); /* Signatur-Kurve (aus Premium-Demo) */ --ease-spring: cubic-bezier(0.34, 1.3, 0.5, 1); /* leichter Überschwinger für Pops */ --dur-fast: 0.18s; /* Hover, Fokus */ --dur-med: 0.45s; /* Einblendungen, Zustandswechsel */ --dur-slow: 0.8s; /* große Reveals, Bild-Vorhänge */ /* ── Abstände ──────────────────────────────────────────── */ --space-1: 6px; --space-2: 10px; --space-3: 16px; --space-4: 24px; --space-5: 36px; --space-6: 56px; --space-7: 88px; /* ── Radien ────────────────────────────────────────────── */ --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 26px; --radius-pill: 999px; /* ── Neutrale Flächen & Text (LIGHT) ───────────────────── */ /* Marken-Papier #FAF6EE + Tinte #1B2440 (Logo-Farbwelt). */ --bg: #faf6ee; --bg-grad-top: #fdfbf5; --surface: #ffffff; --surface-2: #f0e9db; --surface-translucent: rgba(255, 255, 255, 0.85); --card: #ffffff; --card-2: #faf5ea; --text: #1b2440; /* Tinte, ~14:1 auf Weiß */ --text-muted: #475068; /* ~7:1 auf Weiß (AA/AAA) */ --text-faint: #5f6880; /* ~5.5:1 auf Weiß (AA) */ --border: rgba(27, 36, 64, 0.13); --border-strong: rgba(27, 36, 64, 0.24); --fill-subtle: rgba(27, 36, 64, 0.06); /* neutrale Chips/Tracks – kippt in Dark auf hell */ --fill: rgba(27, 36, 64, 0.10); --shadow-color: 27, 36, 64; /* ── Schatten & Fokus (aus Tokens abgeleitet) ──────────── */ --shadow-sm: 0 8px 24px rgba(var(--shadow-color), 0.08); --shadow-soft: 0 14px 38px rgba(var(--shadow-color), 0.10); --shadow-md: 0 22px 64px rgba(var(--shadow-color), 0.13); --focus: 0 0 0 4px var(--focus-ring); /* Dunkle Panels (Hero-Kästen) – Text darauf immer hell */ --panel-text: #f6f3ea; --panel-text-muted: rgba(246, 243, 234, 0.87); --panel-translucent: rgba(246, 243, 234, 0.08); --panel-border: rgba(246, 243, 234, 0.18); --success: var(--accent-green); --danger: #b8332a; /* 26.09.: von #c0362c, damit Fehlertext auf zartrotem Grund 4,5:1 schafft */ /* ════════════════════════════════════════════════════════ PALETTE „vertrauen" (Default) - Marke „Sonnenlicht & Tinte" (Lejama): gebranntes Sonnenorange als Akzent, Tinten-Navy als Panel, Amber #f0a840 als heller Zweitton. Grün existiert nur noch SEMANTISCH (Häkchen/Erfolg/Erspart). ════════════════════════════════════════════════════════ */ /* 26.09.: von #c06028 leicht abgedunkelt. #c06028 lag nur bei 4,2:1 auf Weiß und 3,9:1 auf dem Papier-Grund - weiße Schrift auf Erstgespräch-Knopf, Preise und Links auf Unterseiten verfehlten damit WCAG AA (4,5:1). Jetzt ~5:1 / 4,6:1. */ --accent: #af5824; /* lebendiges Sonnenorange, textsicher (~5:1 auf Weiß) */ --accent-strong: #9a4a1f; --accent-soft: rgba(192, 96, 40, 0.13); --on-accent: #ffffff; --accent-green: var(--accent); /* vereinheitlicht: Häkchen/Erspart in Markenfarbe */ --accent-green-strong: var(--accent-strong); --accent-green-soft: var(--accent-soft); --accent-2: #9a6410; /* Amber, textsicher auf Weiß */ --accent-2-strong: #744a03; --accent-2-soft: rgba(240, 168, 64, 0.18); --on-accent-2: #1b2440; --panel: #1b2440; --panel-2: #131a30; --panel-eyebrow: #f0a840; --panel-glow: rgba(240, 168, 64, 0.16); /* Sonnenschein auf dunklen Panels */ --border-accent: rgba(194, 84, 27, 0.40); /* Hover-/Auswahl-Border */ --focus-ring: rgba(194, 84, 27, 0.34); --meta-theme: #1b2440; /* ── Alias: alte Token-Namen zeigen auf die Semantik ───── */ --ll-ink: var(--text); --ll-ink-soft: var(--text-muted); --ll-paper: var(--bg); --ll-card: var(--surface); --ll-line: var(--border); --ll-brown: var(--text-muted); --ll-brown-deep: var(--text-muted); --ll-red: var(--accent); --ll-red-dark: var(--accent-strong); --ll-green: var(--accent-green); --ll-gold: var(--accent-2); --ll-orange: var(--accent); --ll-orange-dark: var(--accent-strong); --ll-nav-h: 68px; } /* ════════════════════════════════════════════════════════════ PALETTE-VARIANTEN (Light) - tauschen nur Marke/Akzent + Tönung. ════════════════════════════════════════════════════════════ */ /* „frisch" - modern, klar, kühl. Indigo-Blau führt, Emerald für Auswahl. */ :root[data-palette="frisch"] { --bg: #f1f4f9; --bg-grad-top: #fbfcff; --surface-2: #e6ebf3; --card-2: #f3f6fc; --text: #161b24; --text-muted: #4b525f; --text-faint: #646b78; --border: rgba(22, 27, 48, 0.12); --border-strong: rgba(22, 27, 48, 0.22); --shadow-color: 22, 27, 48; --accent: #2f5fd8; --accent-strong: #2348ac; --accent-soft: rgba(47, 95, 216, 0.10); --on-accent: #ffffff; --accent-green: #0d9488; --accent-green-strong: #0a766c; --accent-green-soft: rgba(13, 148, 136, 0.12); --accent-2: #8f660d; /* textsicher auf Weiß */ --accent-2-strong: #74520a; --accent-2-soft: rgba(194, 130, 15, 0.12); --on-accent-2: #281c04; --panel: #181d42; --panel-2: #10142f; --panel-eyebrow: #a9bcff; --panel-glow: rgba(106, 144, 255, 0.18); --border-accent: rgba(47, 95, 216, 0.34); --focus-ring: rgba(47, 95, 216, 0.32); --meta-theme: #181d42; } /* „warm" - einladend, handgemacht, zugänglich (verfeinerte Bestands-Optik). */ :root[data-palette="warm"] { --bg: #f7f5f0; --bg-grad-top: #fdfcf8; --surface-2: #efece4; --card: #fffdf8; --card-2: #fffaf2; --text: #1d201c; --text-muted: #534d44; --text-faint: #6c6359; --border: rgba(24, 22, 18, 0.13); --border-strong: rgba(24, 22, 18, 0.22); --shadow-color: 24, 22, 18; --accent: #b8521f; --accent-strong: #99421a; --accent-soft: rgba(184, 82, 31, 0.10); --on-accent: #ffffff; --accent-green: #15795c; --accent-green-strong: #0f5a45; --accent-green-soft: rgba(21, 121, 92, 0.12); --accent-2: #8d6414; /* textsicher auf Weiß */ --accent-2-strong: #715009; --accent-2-soft: rgba(184, 132, 31, 0.12); --on-accent-2: #2a1d05; --panel: #15392b; --panel-2: #0e2a20; --panel-eyebrow: #e0b878; --panel-glow: rgba(224, 184, 120, 0.18); --border-accent: rgba(184, 82, 31, 0.34); --focus-ring: rgba(184, 82, 31, 0.30); --meta-theme: #15392b; } /* ════════════════════════════════════════════════════════════ DARK THEME - Neutrale + Dark-Akzente. Vollwertig gestaltet, keine reine Invertierung: erhöhte Helligkeit der Akzente für AA-Kontrast, Schatten weichen tiefem Schwarz. ════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0f1320; --bg-grad-top: #131829; --surface: #171c2e; --surface-2: #222840; --surface-translucent: rgba(20, 24, 40, 0.85); --card: #191f33; --card-2: #222840; --text: #eef0f7; --text-muted: #c0c6d6; /* ~9:1 auf Surface */ --text-faint: #99a0b4; /* ~5.5:1 auf Surface */ --border: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.24); --fill-subtle: rgba(255, 255, 255, 0.07); --fill: rgba(255, 255, 255, 0.12); --shadow-color: 0, 0, 0; --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-soft: 0 14px 38px rgba(0, 0, 0, 0.5); --shadow-md: 0 24px 60px rgba(0, 0, 0, 0.55); --panel: #1d2742; --panel-2: #141b30; --panel-text: #eef1f8; --panel-text-muted: rgba(238, 241, 248, 0.86); --panel-translucent: rgba(255, 255, 255, 0.06); --panel-border: rgba(255, 255, 255, 0.13); --danger: #f0857c; --success: var(--accent-green); /* Default-Palette - „Sonnenlicht & Tinte" in der Nacht-Variante. Accent = helleres Gold (wie das Premium-Liga-Badge), damit Preise/ Schrift auf dunklem Grund klar lesbar sind. */ --accent: #f0a840; --accent-strong: #ffbe63; --accent-soft: rgba(240, 168, 64, 0.16); --on-accent: #241402; --accent-green: var(--accent); --accent-green-strong: var(--accent-strong); --accent-green-soft: var(--accent-soft); --accent-2: #f0a840; --accent-2-strong: #ffd47a; --accent-2-soft: rgba(240, 168, 64, 0.16); --on-accent-2: #241a07; --panel-eyebrow: #f0a840; --panel-glow: rgba(240, 168, 64, 0.13); --border-accent: rgba(240, 168, 64, 0.40); --focus-ring: rgba(232, 150, 90, 0.45); --meta-theme: #0f1320; } /* Dark + „frisch" */ :root[data-theme="dark"][data-palette="frisch"] { --bg: #0e1018; --bg-grad-top: #121524; --surface: #181c28; --surface-2: #222738; --surface-translucent: rgba(20, 24, 36, 0.82); --card: #191e2b; --card-2: #222840; --text: #eef1f7; --text-muted: #bfc6d4; --text-faint: #9aa2b2; --border: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.24); --shadow-color: 0, 0, 0; --accent: #6a90ff; --accent-strong: #88a6ff; --accent-soft: rgba(106, 144, 255, 0.18); --on-accent: #0a1230; --accent-green: #2dd4bf; --accent-green-strong: #5ce0d0; --accent-green-soft: rgba(45, 212, 191, 0.18); --accent-2: #e0b057; --accent-2-strong: #f0c372; --accent-2-soft: rgba(224, 176, 87, 0.16); --on-accent-2: #241a07; --panel: #171c3a; --panel-2: #0e1230; --panel-eyebrow: #aabfff; --panel-glow: rgba(106, 144, 255, 0.16); --border-accent: rgba(106, 144, 255, 0.40); --focus-ring: rgba(106, 144, 255, 0.50); --meta-theme: #0e1018; } /* Dark + „warm" */ :root[data-theme="dark"][data-palette="warm"] { --bg: #14110d; --bg-grad-top: #1a1610; --surface: #1e1a14; --surface-2: #2a251c; --surface-translucent: rgba(26, 22, 16, 0.82); --card: #201c15; --card-2: #2a251c; --text: #f3efe7; --text-muted: #cac1b2; --text-faint: #a59c8e; --border: rgba(255, 248, 235, 0.13); --border-strong: rgba(255, 248, 235, 0.24); --shadow-color: 0, 0, 0; --accent: #e0763a; --accent-strong: #ee8a52; --accent-soft: rgba(224, 118, 58, 0.18); --on-accent: #1a0c04; --accent-green: #3fbf95; --accent-green-strong: #57d3aa; --accent-green-soft: rgba(63, 191, 149, 0.18); --accent-2: #e0b057; --accent-2-strong: #f0c372; --accent-2-soft: rgba(224, 176, 87, 0.16); --on-accent-2: #241a07; --panel: #1c2c22; --panel-2: #0f1813; --panel-eyebrow: #e6c79a; --panel-glow: rgba(230, 199, 154, 0.16); --border-accent: rgba(224, 118, 58, 0.40); --focus-ring: rgba(224, 118, 58, 0.45); --meta-theme: #14110d; } /* ── Erstanstrich ohne JS: System-Dunkelmodus für die ausgelieferte Palette respektieren, solange kein data-theme explizit gesetzt ist. (Erbt alle Dark-Neutrale + Default-Akzente aus dem Block oben.) ── */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg: #0f1320; --bg-grad-top: #131829; --surface: #171c2e; --surface-2: #222840; --surface-translucent: rgba(20, 24, 40, 0.85); --card: #191f33; --card-2: #222840; --text: #eef0f7; --text-muted: #c0c6d6; --text-faint: #99a0b4; --border: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.24); --fill-subtle: rgba(255, 255, 255, 0.07); --fill: rgba(255, 255, 255, 0.12); --shadow-color: 0, 0, 0; --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-soft: 0 14px 38px rgba(0, 0, 0, 0.5); --shadow-md: 0 24px 60px rgba(0, 0, 0, 0.55); --panel: #1d2742; --panel-2: #141b30; --panel-text: #eef1f8; --panel-text-muted: rgba(238, 241, 248, 0.86); --panel-translucent: rgba(255, 255, 255, 0.06); --panel-border: rgba(255, 255, 255, 0.13); --danger: #f0857c; --accent: #f0a840; --accent-strong: #ffbe63; --accent-soft: rgba(240, 168, 64, 0.16); --on-accent: #241402; --accent-green: var(--accent); --accent-green-strong: var(--accent-strong); --accent-green-soft: var(--accent-soft); --accent-2: #f0a840; --accent-2-strong: #ffd47a; --accent-2-soft: rgba(240, 168, 64, 0.16); --on-accent-2: #241a07; --panel-eyebrow: #f0a840; --panel-glow: rgba(240, 168, 64, 0.13); --border-accent: rgba(240, 168, 64, 0.40); --focus-ring: rgba(232, 150, 90, 0.45); --meta-theme: #0f1320; } } /* ── Signatur-Details (alle Seiten) ─────────────────────── */ /* Feines Papier-Grain: nimmt großen Flächen die sterile Glätte. Sehr niedrige Deckkraft, reine Deko, klickt nicht. */ body::after { content: ""; position: fixed; inset: 0; z-index: 2147483646; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } :root[data-theme="dark"] body::after { opacity: 0.05; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) body::after { opacity: 0.05; } } ::selection { background: var(--accent); color: var(--on-accent); } /* ── Header (freischwebender Pill) ─────────────────────── */ .ll-nav { position: sticky; top: 12px; z-index: 100; width: min(1180px, calc(100% - 32px)); margin: 12px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 60px; padding: 9px 12px 9px 16px; background: var(--surface-translucent); -webkit-backdrop-filter: saturate(150%) blur(16px); backdrop-filter: saturate(150%) blur(16px); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow-sm); transition: box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease; } .ll-nav.is-stuck { background: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow-md); } .ll-brand { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; /* drückt Menü + Theme-Toggle nach rechts */ text-decoration: none; color: var(--ll-ink); } .ll-brand-mark { display: inline-block; width: 42px; height: 42px; flex: none; /* PNG statt SVG: die Logo-Schrift (Playfair/Figtree) ist im PNG fest eingebacken – so sieht das „G." überall exakt richtig aus, ohne Web-Font. */ background: url("./logo-icon.png?v=3") center / contain no-repeat; /* "GW"-Fallbacktext ausblenden */ font-size: 0; color: transparent; overflow: hidden; } /* Dunkelmodus: helle (Creme-)Logo-Variante, sonst geht das navy Siegel auf dunklem Grund unter (Nav + Footer folgen beide dem Theme). Deckt explizites data-theme UND System-Voreinstellung ab. */ :root[data-theme="dark"] .ll-brand-mark { background-image: url("./logo-icon-white.png?v=3"); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .ll-brand-mark { background-image: url("./logo-icon-white.png?v=3"); } } .ll-brand-text { display: flex; flex-direction: column; line-height: 1.1; font-family: var(--font-serif); font-weight: 600; font-size: 1.06rem; letter-spacing: -0.01em; } .ll-brand-text small { font-family: var(--font-sans); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.01em; color: var(--ll-ink-soft); } .ll-nav-menu { display: flex; align-items: center; gap: 6px; } .ll-nav-menu a { padding: 9px 14px; border-radius: 999px; color: var(--ll-ink-soft); text-decoration: none; font-weight: 750; font-size: 0.96rem; transition: color 0.18s ease, background 0.18s ease; } .ll-nav-menu a:hover, .ll-nav-menu a:focus-visible { color: var(--text); background: var(--accent-soft); outline: none; } .ll-nav-menu a[aria-current="page"] { color: var(--accent); } /* Mittlere Breiten (kleine Laptops, Tablet quer): sieben Punkte passen nur enger in eine Zeile. Ohne das brach „Website anfragen" im Feld um und die Leiste wurde doppelt so hoch. */ .ll-nav-menu a { white-space: nowrap; } @media (min-width: 861px) and (max-width: 1120px) { .ll-nav-menu { gap: 2px; } .ll-nav-menu a { padding: 8px 10px; font-size: 0.9rem; } .ll-nav-cta { margin-left: 2px; padding: 10px 14px !important; } .ll-brand-text small { display: none; } } /* Ganz schmale Laptops/Tablets quer: acht Punkte brauchen den Platz des Schriftzugs, das Logo-Zeichen bleibt als Startseiten-Link stehen. */ @media (min-width: 861px) and (max-width: 990px) { .ll-brand-text { display: none; } .ll-nav-menu a { padding: 7px 8px; font-size: 0.86rem; } .ll-nav-cta { padding: 9px 12px !important; } } .ll-nav-cta { margin-left: 6px; padding: 11px 20px !important; color: var(--on-accent) !important; /* Tinte auf Sonnenverlauf */ background: var(--accent); box-shadow: 0 12px 26px var(--accent-soft); white-space: nowrap; } .ll-nav-cta:hover, .ll-nav-cta:focus-visible { filter: brightness(1.05) saturate(1.05); transform: translateY(-1px); } /* „Anmelden" = abgesetzter Outline-Button (Kundenportal-Zugang sichtbarer) */ .ll-nav-menu a.ll-nav-login { color: var(--accent); border: 1.5px solid var(--border-accent); font-weight: 800; } .ll-nav-menu a.ll-nav-login:hover, .ll-nav-menu a.ll-nav-login:focus-visible { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); } .ll-nav-toggle { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--ll-line); border-radius: 999px; background: var(--ll-card); color: var(--ll-ink); font-weight: 750; cursor: pointer; } /* ── Hell/Dunkel-Umschalter (von base.js in die Nav injiziert) ── */ .ll-theme-toggle { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); cursor: pointer; transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .ll-theme-toggle:hover { color: var(--accent); background: var(--accent-soft); border-color: var(--border-strong); transform: translateY(-1px); } .ll-theme-toggle:focus-visible { outline: none; color: var(--accent); box-shadow: var(--focus); } .ll-theme-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ll-theme-toggle .ll-ico-moon { display: none; } :root[data-theme="dark"] .ll-theme-toggle .ll-ico-sun { display: none; } :root[data-theme="dark"] .ll-theme-toggle .ll-ico-moon { display: block; } /* ── Footer ────────────────────────────────────────────── */ .ll-foot { margin-top: 64px; background: linear-gradient(180deg, transparent, var(--accent-soft)); border-top: 1px solid var(--ll-line); } .ll-foot-inner { width: min(1180px, calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 32px; padding: 48px 0 30px; } .ll-foot-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ll-ink); font-weight: 800; font-size: 1.1rem; } .ll-foot-about { margin-top: 14px; max-width: 360px; color: var(--ll-ink-soft); line-height: 1.6; font-size: 0.96rem; } /* Anschrift im Footer:

kursiviert von Haus aus, das passt hier nicht. */ address.ll-foot-nap { font-style: normal; font-size: 0.9rem; } .ll-foot-nap a { color: var(--ll-ink-soft); text-decoration: none; transition: color 0.16s ease; } .ll-foot-nap a:hover { color: var(--ll-red); } .ll-foot-col h4 { margin: 0 0 12px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ll-brown); } .ll-foot-col a { display: block; padding: 5px 0; color: var(--ll-ink-soft); text-decoration: none; font-size: 0.96rem; transition: color 0.16s ease; } .ll-foot-col a:hover { color: var(--ll-red); } .ll-foot-bottom { width: min(1180px, calc(100% - 40px)); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; padding: 18px 0 30px; border-top: 1px solid var(--ll-line); color: var(--ll-ink-soft); font-size: 0.88rem; } /* ── Mobile ────────────────────────────────────────────── */ @media (max-width: 860px) { .ll-nav { top: 8px; margin-top: 8px; width: calc(100% - 20px); border-radius: 22px; gap: 10px; padding: 8px 10px 8px 12px; } .ll-nav-toggle { display: inline-flex; min-height: 40px; padding: 0 12px; } .ll-theme-toggle { width: 40px; height: 40px; } .ll-brand-mark { width: 36px; height: 36px; } .ll-brand { gap: 8px; min-width: 0; } .ll-brand-text small { display: none; } .ll-brand-text { font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ll-nav-menu { position: fixed; inset: 86px 12px auto; flex-direction: column; align-items: stretch; gap: 4px; padding: 14px; background: var(--ll-card); border: 1px solid var(--ll-line); border-radius: 20px; box-shadow: var(--shadow-md); transform-origin: top; opacity: 0; transform: translateY(-10px) scale(0.98); pointer-events: none; /* Geschlossen auch fuer Tastatur und Screenreader weg, nicht nur unsichtbar. */ visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s; /* Handy quer / kleine Displays: acht Punkte sind ~480 px hoch. Ohne Begrenzung ragten „Ihre Demo", „Anmelden" und „Erstgespräch" unten aus dem Bildschirm und waren (fixed, nicht scrollbar) gar nicht erreichbar. */ max-height: calc(100vh - 98px); max-height: calc(100dvh - 98px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Offenes Menü: Seite dahinter nicht mitscrollen lassen. NUR am sperren: overflow:hidden zusätzlich am macht den Body zum eigenen Scroll-Container, dann klebt die Sticky-Nav (samt Menü) nicht mehr und springt aus dem Bild. */ html:has(body.ll-nav-open) { overflow: hidden; } body.ll-nav-open .ll-nav-menu { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s; } .ll-nav-menu a { padding: 13px 16px; font-size: 1.02rem; } .ll-nav-cta { margin-left: 0; text-align: center; } .ll-foot-inner { grid-template-columns: 1fr; gap: 26px; } } /* ── Sticky-CTA auf dem Handy (nur Marketing-Seiten, via base.js) ── Ganz oben bleibt die Leiste weg (der Hero hat dort schon zwei CTAs, das wirkt sonst überladen). Sie fährt erst nach etwas Scrollen ein und wieder heraus, sobald man oben ankommt – gesteuert per .is-visible aus base.js. */ .ll-mobile-cta { display: none; } @media (max-width: 860px) { .ll-mobile-cta { position: fixed; inset: auto 0 0; z-index: 90; display: block; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface-translucent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--ll-line); opacity: 0; transform: translate3d(0, calc(100% + 14px), 0); pointer-events: none; visibility: hidden; will-change: transform; transition: transform 0.34s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.22s ease, visibility 0s linear 0.34s; } .ll-mobile-cta.is-visible { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: transform 0.42s cubic-bezier(0.22, 0.9, 0.28, 1), opacity 0.26s ease, visibility 0s; } .ll-mobile-cta-btn { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 800; text-decoration: none; box-shadow: 0 12px 26px var(--accent-soft); } body.has-mobile-cta { padding-bottom: 80px; } } /* [hidden] muss immer gewinnen. Sonst zeigt jede Regel mit display:flex/grid das Element trotz hidden-Attribut weiter an (z. B. „Geplanter Livegang" im Portal). */ [hidden] { display: none !important; } @media (prefers-reduced-motion: reduce) { .ll-nav, .ll-nav-menu, .ll-nav-cta { transition: none; } /* Global: keine Endlos-Animationen, keine Hover-Sprünge, keine langen Übergänge. */ *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* == Barrierefreiheit: sichtbarer Tastatur-Fokus (a11y-fokus-ring) ============ Einige :focus-visible-Regeln setzten 'outline:none' ohne Ersatz -> Tastatur- Nutzer sahen nicht mehr, wo sie stehen (WCAG 2.4.7 Focus Visible). 'outline' liegt UEBER dem Layout (kein Umbruch, keine Groessenaenderung) und ueber- schreibt die vereinzelten 'outline:none' via !important zuverlaessig. Nur bei Tastatur-/Programm-Fokus sichtbar -> fuer Maus-Nutzer aendert sich nichts. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .button:focus-visible, .ll-nav-menu a:focus-visible, .ll-nav-cta:focus-visible, .ll-theme-toggle:focus-visible, .demo-card-large:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px !important; } /* Skip-Link: lag mit z-index 100 gleichauf mit der Sticky-Nav und wurde von ihr verdeckt (nur „Zu" sichtbar). Beim Fokus klar darüber legen. */ .skip-link:focus, .skip-link:focus-visible { z-index: 1000; } /* Leicht gerundeter Ring nur für Elemente OHNE eigenen Radius (Fließtext-Links). Stand vorher mit in der Regel oben und gewann dort gegen die Pillen-Radien: „Erstgespräch", „Website anfragen" usw. wurden beim Tabben eckig. :where() hat Spezifität 0, jeder Komponenten-Radius geht also vor. */ :where(a, button, summary, [tabindex]):focus-visible:where(:not([class])) { border-radius: 4px; }