/* ============================================================= Kaufnebenkostenrechner – ein einziges Stylesheet für alle Seiten Aufbau: Token → Reset → Layout → Header → Hero → Formular → Ergebnis → Artikel → FAQ → Footer → Toast Das Farbschema steuert das Attribut data-theme am -Element: beim ersten Besuch setzt es die Systemeinstellung, danach gilt die Wahl, die über den Schalter getroffen wurde. ============================================================= */ /* ---------- 1. Design-Token (helles Thema) ---------- */ :root { /* Farben */ --ink: #0b1220; --ink-soft: #364152; --ink-mute: #5b6779; --line: #e4e8f0; --line-strong: #c6cfe0; --surface: #ffffff; --surface-sunk: #f6f8fc; --canvas: #fbfcfe; --sheen: rgba(255, 255, 255, .85); --accent: #15803d; --accent-hi: #1eb355; --accent-deep: #0f5c2c; --accent-wash: #e8f8ee; /* Text, der auf einer vollflächig eingefärbten Akzentfläche lesbar bleibt. Im dunklen Thema ist der Akzent hell, dort entsteht der Kontrast durch dunklen Text. */ --on-accent: #ffffff; --ok: #0f7a4f; --ok-wash: #e8f6ef; --danger: #c02434; --danger-wash: #fdeef0; --warn: #8a6100; --warn-wash: #fdf3e0; /* Form */ --r-sm: 10px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px; /* gestufte Schatten */ --sh-1: 0 1px 2px rgba(11, 18, 32, .05); --sh-2: 0 2px 6px rgba(11, 18, 32, .05), 0 10px 24px -12px rgba(11, 18, 32, .12); --sh-3: 0 1px 3px rgba(11, 18, 32, .05), 0 12px 28px -10px rgba(11, 18, 32, .14), 0 40px 80px -32px rgba(17, 36, 92, .22); /* Schatten der Hauptkarte: gerade wahrnehmbar, ohne harte Kante */ --sh-soft: 0 1px 2px rgba(11, 18, 32, .04), 0 6px 18px -10px rgba(11, 18, 32, .1); --sh-focus: 0 0 0 3px var(--accent-wash), 0 0 0 4.5px var(--accent); /* Rhythmus */ --gap: 18px; --pad-x: clamp(20px, 5vw, 40px); --sec-y: clamp(64px, 9vw, 108px); /* Typografie */ --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace; --ease: cubic-bezier(.22, .68, .32, 1); } /* ---------- 2. Dunkles Thema ---------- */ :root[data-theme="dark"] { --ink: #eef2f9; --ink-soft: #b3bdcf; --ink-mute: #8e9ab0; --line: #1e2941; --line-strong: #2c3a58; --surface: #101828; --surface-sunk: #0c1322; --canvas: #080c15; --sheen: rgba(255, 255, 255, .12); --accent: #4ecf86; --accent-hi: #7fdca4; --accent-deep: #2fb96a; --accent-wash: #0e391e; --on-accent: #0b1220; --ok: #4bd39a; --ok-wash: #10291f; --danger: #ff8a95; --danger-wash: #2a1219; --warn: #ffc65c; --warn-wash: #2c2109; --sh-1: 0 1px 2px rgba(0, 0, 0, .4); --sh-2: 0 2px 6px rgba(0, 0, 0, .35), 0 10px 24px -12px rgba(0, 0, 0, .6); --sh-3: 0 1px 3px rgba(0, 0, 0, .4), 0 14px 32px -10px rgba(0, 0, 0, .6), 0 44px 90px -34px rgba(0, 0, 0, .8); --sh-soft: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px -10px rgba(0, 0, 0, .5); --sh-focus: 0 0 0 3px rgba(78, 207, 134, .24), 0 0 0 4.5px var(--accent); } /* Auf schmalen Bildschirmen schrumpfen die Seitenränder auf ein Minimum: jeder gewonnene Pixel geht an den Inhalt. Gilt für die ganze Seite, damit die Abschnitte untereinander bündig bleiben. */ @media (max-width: 560px) { :root { --pad-x: 10px; } } /* ---------- 3. Nötiger Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.6; letter-spacing: -.006em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; overflow-x: hidden; } h1, h2, h3 { margin: 0; line-height: 1.16; letter-spacing: -.028em; font-weight: 650; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } svg { display: block; width: 100%; height: 100%; } [hidden] { display: none !important; } button, input { font: inherit; color: inherit; letter-spacing: inherit; } :focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--accent); color: var(--canvas); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ---------- 4. Layout ---------- */ .wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--pad-x); } .skip-link { position: absolute; left: 12px; top: -100px; z-index: 100; padding: 12px 20px; border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); font-weight: 600; transition: top .18s var(--ease); } .skip-link:focus { top: 12px; } /* ---------- 5. Header ---------- */ .site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid transparent; background: color-mix(in srgb, var(--canvas) 82%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); transition: border-color .2s var(--ease); } .site-header.is-stuck { border-bottom-color: var(--line); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 68px; } .header-right { display: flex; align-items: center; gap: clamp(14px, 3vw, 28px); } .brand { display: inline-flex; align-items: center; gap: 11px; } /* Das Sprite der Wortmarke darf weder Platz brauchen noch erreichbar sein. */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* Die Marke ist dieselbe Zeichnung wie das App-Symbol: sie reicht bis an den Rand, die runde Ecke macht deshalb der Container. */ .brand-mark { flex: none; width: 34px; height: 34px; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 12px -3px color-mix(in srgb, var(--accent) 55%, transparent); } .brand-name { font-size: 1.03rem; font-weight: 500; letter-spacing: -.02em; } .brand-name strong { font-weight: 700; } .site-nav { display: flex; gap: clamp(16px, 3vw, 28px); font-size: .95rem; color: var(--ink-soft); } .site-nav a { position: relative; padding: 6px 0; transition: color .16s var(--ease); } .site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease); } .site-nav a:hover { color: var(--ink); } .site-nav a:hover::after { transform: scaleX(1); } /* Die aktuelle Seite bleibt markiert: der Strich ist bereits gezeichnet. */ .site-nav a[aria-current="page"] { color: var(--ink); font-weight: 560; } .site-nav a[aria-current="page"]::after { transform: scaleX(1); } /* --- Schalter für das Farbschema --- */ .theme-toggle { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink-soft); cursor: pointer; transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease), transform .14s var(--ease); } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } .theme-toggle:active { transform: scale(.94); } .theme-icon { grid-area: 1 / 1; width: 20px; height: 20px; transition: opacity .2s var(--ease), transform .3s var(--ease); } /* Im hellen Thema bietet der Schalter den Mond an, im dunklen die Sonne. */ .theme-icon--sun { opacity: 0; transform: rotate(-70deg) scale(.6); } .theme-icon--moon { opacity: 1; transform: none; } :root[data-theme="dark"] .theme-icon--sun { opacity: 1; transform: none; } :root[data-theme="dark"] .theme-icon--moon { opacity: 0; transform: rotate(70deg) scale(.6); } /* Der Teilen-Knopf im Kopf übernimmt die Form des Farbschalters, hat aber nur ein Bild statt zweier übereinanderliegender. */ .share-toggle > svg { width: 20px; height: 20px; } /* * Mit dem dritten Knopf wird die Kopfzeile auf schmalen Geräten zu breit. Statt * ihn dort wegzulassen – gerade auf dem Telefon ist Teilen am nützlichsten – * rücken die Schalter enger zusammen und werden etwas kleiner. Die 40 Pixel * Mindestgröße für den Finger bleiben erhalten, es fällt nur der Luftraum weg. */ @media (max-width: 420px) { .header-inner { gap: 10px; } .header-right { gap: 8px; } .brand { gap: 8px; } .brand-name { font-size: .95rem; } } /* --- Menü auf dem Telefon --- */ /* Der Knopf übernimmt die Form des Themenschalters: zwei Bedienelemente nebeneinander im Kopf müssen gleich viel Platz einnehmen. */ .menu-toggle { display: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink-soft); cursor: pointer; transition: color .16s var(--ease), border-color .16s var(--ease); } .menu-toggle:hover { color: var(--accent); border-color: var(--accent); } /* Drei Striche: der mittlere ist das Element, die anderen beiden seine Pseudos. */ .menu-bars, .menu-bars::before, .menu-bars::after { display: block; width: 18px; height: 1.9px; border-radius: 2px; background: currentColor; transition: transform .24s var(--ease), opacity .16s var(--ease); } .menu-bars { position: relative; } .menu-bars::before, .menu-bars::after { content: ""; position: absolute; } .menu-bars::before { transform: translateY(-6px); } .menu-bars::after { transform: translateY(6px); } /* Bei geöffnetem Menü werden die Striche zum Kreuz. */ .nav-open .menu-bars { background: transparent; } .nav-open .menu-bars::before { transform: rotate(45deg); } .nav-open .menu-bars::after { transform: rotate(-45deg); } /* Die Schwelle liegt bei 900 statt 760: mit dem dritten Kopfknopf passen Marke, fünf Verweise und die Schalter auf einem Tablet nicht mehr in eine Zeile, und umgebrochene Verweise sehen schlechter aus als das Klappmenü, das dort ohnehin gewohnt ist. */ @media (max-width: 900px) { .menu-toggle { display: grid; } /* Dasselbe