/* My Car Agent – statische Website (Marketing + Rechtsseiten). Marken-Look: Primärrot #E4252B, helles Theme (wie die öffentliche Landing). */ /* ── Farb-Token ─────────────────────────────────────────────────────────── Helles Thema steht auf dem nackten :root — jede Farbe ist HIER definiert, damit keine nur im Dunkel-Block existiert. Der Dunkelmodus ueberschreibt weiter unten NUR diese Werte, kein einziges Bauteil kennt eine eigene Farbe. Drei Zustaende: `data-theme="dark"` / `data-theme="light"` setzt der Umschalter im Kopf (site.js), ohne Attribut entscheidet das Betriebssystem. */ :root { color-scheme: light; --primary: #E4252B; --primary-dark: #c11d22; --on-primary: #fff; --fg: #17181c; --body: #2c2f35; /* Fliesstext auf Rechts-/Ratgeberseiten */ --muted: #5a5f68; --faint: #9aa0a8; --bg: #ffffff; --surface: #ffffff; /* Karten, Eingabefelder */ --card: #f7f7f8; /* gefuellte Flaechen (Tabellenkopf, Rechtskarte) */ --border: #e8e9ec; --header-bg: rgba(255, 255, 255, .92); --badge-bg: #17181c; /* Store-Badges */ --badge-fg: #ffffff; --shadow: rgba(228, 37, 43, .18); --glow-alpha: .12; --radius: 16px; } /* Dunkel per Systemeinstellung — ausser der Nutzer hat ausdruecklich hell gewaehlt. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --on-primary: #fff; --fg: #f2f3f5; --body: #d3d7dd; --muted: #a3aab4; --faint: #7d838d; --bg: #0f1114; --surface: #171a1f; --card: #1b1f25; --border: #2a2f37; --header-bg: rgba(15, 17, 20, .92); --badge-bg: #272c34; --badge-fg: #ffffff; --shadow: rgba(228, 37, 43, .3); --glow-alpha: .16; } } /* Dunkel per Umschalter — gewinnt in beide Richtungen. */ :root[data-theme="dark"] { color-scheme: dark; --on-primary: #fff; --fg: #f2f3f5; --body: #d3d7dd; --muted: #a3aab4; --faint: #7d838d; --bg: #0f1114; --surface: #171a1f; --card: #1b1f25; --border: #2a2f37; --header-bg: rgba(15, 17, 20, .92); --badge-bg: #272c34; --badge-fg: #ffffff; --shadow: rgba(228, 37, 43, .3); --glow-alpha: .16; } * { box-sizing: border-box; margin: 0; padding: 0; } /* Seiten-Hintergrund liegt auf , der bleibt transparent — so können die fixierten Glow-Orbs (z-index -1, siehe unten) ZWISCHEN Hintergrund und Inhalt leuchten. */ html { scroll-behavior: smooth; background: var(--bg); } body { background: transparent; color: var(--fg); font-family: -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; } .container { max-width: 1080px; margin: 0 auto; padding: 0 22px; } .container.narrow { max-width: 780px; } /* ── Header ─────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .site-header .inner { display: flex; align-items: center; gap: 18px; /* 78 px am Desktop (vorher 62): Die Marke war im Verhältnis zur Navigation zu zurückhaltend. Auf schmalen Displays bleibt es bei 62 — dort zählt jeder Pixel, den die klebende Kopfzeile nicht verbraucht. */ height: 78px; } .brand { display: flex; align-items: center; gap: 10px; } .brand:hover { text-decoration: none; } /* Marken-Logo. Die Datei ist auf die Zeichnung ZUGESCHNITTEN (erzeugt von `tool/gen_web_logos.py`), die angegebene Höhe ist also die Höhe dessen, was man wirklich sieht — anders als bei den alten Dateien, die einen breiten durchsichtigen Rand mitbrachten. Breite automatisch, sonst verzerrt es. */ .brand img { height: 60px; width: auto; } .brand .brand-name { font-weight: 800; font-size: 19px; letter-spacing: -.3px; color: var(--fg); white-space: nowrap; } .brand .brand-name em { color: var(--primary); font-style: normal; } .site-nav { margin-left: auto; display: flex; align-items: center; gap: 20px; } .site-nav a { color: var(--muted); font-size: 14.5px; font-weight: 600; } .site-nav a:hover { color: var(--fg); text-decoration: none; } .site-nav a.active { color: var(--fg); } /* Anmelde-Button in der Kopfzeile: führt auf die App-Domain (mycaragent.app). Eigene Farbregel, weil `.site-nav a` sonst das Weiß des .btn überschreibt. Bleibt – anders als .nav-link – auch auf schmalen Displays sichtbar. */ .site-nav a.nav-login { color: var(--on-primary); padding: 9px 20px; } .site-nav a.nav-login:hover { color: var(--on-primary); } .btn { display: inline-block; background: var(--primary); color: var(--on-primary); font-weight: 700; font-size: 14.5px; padding: 10px 22px; border-radius: 999px; white-space: nowrap; transition: background .15s ease, transform .1s ease; } .btn:hover { background: var(--primary-dark); text-decoration: none; } .btn:active { transform: scale(.97); } .btn.big { font-size: 16px; padding: 14px 34px; } .btn.ghost { background: transparent; color: var(--fg); border: 1.5px solid var(--border); } .btn.ghost:hover { background: var(--card); } /* ── Hero ───────────────────────────────────────────────────────── */ .hero { text-align: center; padding: 72px 0 56px; } .hero .logo { width: 116px; height: 116px; border-radius: 26px; box-shadow: 0 10px 30px var(--shadow); } .hero .badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; background: rgba(228, 37, 43, .08); border: 1px solid rgba(228, 37, 43, .25); color: var(--primary); font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 999px; } .hero h1 { margin: 28px auto 14px; max-width: 780px; font-size: clamp(30px, 5vw, 48px); line-height: 1.12; letter-spacing: -.5px; } .hero h1 em { color: var(--primary); font-style: normal; } .hero p.lead { margin: 0 auto; max-width: 620px; color: var(--muted); font-size: clamp(15px, 2.2vw, 18px); } .hero .actions { margin-top: 30px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .hero .sub { margin-top: 14px; color: var(--faint); font-size: 12.5px; } /* ── Sektionen ──────────────────────────────────────────────────── */ .section { padding: 56px 0; } /* Bewusst KEIN eigener Hintergrund je Sektion — die Seite hat wie die Flutter-Landing EINEN durchgehenden Hintergrund mit Ambient-Glow; Bänder erzeugten harte Kanten. */ .section.alt { background: transparent; } .section h2 { text-align: center; font-size: clamp(24px, 3.6vw, 34px); letter-spacing: -.4px; margin-bottom: 10px; } .section .section-sub { text-align: center; color: var(--muted); max-width: 640px; margin: 0 auto 38px; font-size: 15.5px; } .grid { display: grid; gap: 18px; } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 860px) { .grid.cols-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; } } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; /* Hover-Lift wie _HoverLift in der App: -6 px + roter Schatten. */ transition: transform .2s ease-out, box-shadow .2s ease-out; } .card:hover { transform: translateY(-6px); box-shadow: 0 12px 28px var(--shadow); } .card .icon { font-size: 26px; } .card h3 { margin: 10px 0 6px; font-size: 17px; } .card p { color: var(--muted); font-size: 14px; } /* ── Preise ─────────────────────────────────────────────────────── */ .price-card { position: relative; text-align: left; display: flex; flex-direction: column; } .price-card .tier { font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); } .price-card.featured { border: 2px solid var(--primary); box-shadow: 0 14px 34px rgba(228, 37, 43, .12); } .price-card.featured .tier { color: var(--primary); } .price-card .badge { position: absolute; top: -12px; right: 16px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: 999px; } .price-card .price { margin: 10px 0 2px; font-size: 32px; font-weight: 800; } .price-card .price span { font-size: 14px; font-weight: 600; color: var(--muted); } .price-card .price-note { color: var(--faint); font-size: 12px; margin-bottom: 14px; } .price-card ul { list-style: none; margin: 0 0 18px; flex: 1; } .price-card li { padding: 5px 0 5px 24px; position: relative; font-size: 14px; color: var(--fg); } .price-card li::before { content: "✓"; position: absolute; left: 2px; color: var(--primary); font-weight: 800; } .price-card li.off { color: var(--faint); } .price-card li.off::before { content: "–"; color: var(--faint); } .price-card .btn { text-align: center; } /* ── CTA-Band ───────────────────────────────────────────────────── */ .cta-band { background: var(--primary); color: var(--on-primary); text-align: center; padding: 56px 22px; } .cta-band h2 { font-size: clamp(24px, 3.4vw, 32px); margin-bottom: 10px; } .cta-band p { opacity: .92; max-width: 560px; margin: 0 auto 24px; } .cta-band .btn { background: #fff; color: var(--primary); } .cta-band .btn:hover { background: #ececec; } /* ── Rechtsseiten / Textseiten ──────────────────────────────────── */ .page { padding: 48px 0 64px; } .page h1 { font-size: clamp(26px, 4vw, 36px); margin-bottom: 8px; letter-spacing: -.4px; } .page .doc-meta { color: var(--faint); font-size: 13px; margin-bottom: 30px; } .page h2 { font-size: 19px; margin: 30px 0 10px; } .page h3 { font-size: 15.5px; margin: 18px 0 8px; } .page p { margin-bottom: 12px; font-size: 14.5px; color: var(--body); } .page ul { margin: 0 0 12px 0; padding-left: 0; list-style: none; } .page li { position: relative; padding: 3px 0 3px 22px; font-size: 14.5px; color: var(--body); } .page li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); } .legal-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; } .legal-card h2 { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); } .legal-card p { margin-bottom: 4px; } /* ── Tabellen (Tarif-Limits) ────────────────────────────────────── */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); } table.limits { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; } table.limits th, table.limits td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); } table.limits thead th { background: var(--card); font-size: 13px; } table.limits tbody tr:last-child td { border-bottom: none; } table.limits td:not(:first-child), table.limits th:not(:first-child) { text-align: center; } /* ── Footer ─────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--border); padding: 34px 0 44px; margin-top: 30px; } .site-footer .inner { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; } .site-footer a { color: var(--muted); font-size: 13.5px; } .site-footer .copy { margin-left: auto; color: var(--faint); font-size: 12.5px; } @media (max-width: 600px) { .site-footer .copy { margin-left: 0; width: 100%; } } @media (max-width: 640px) { .site-nav a.nav-link { display: none; } .site-header .inner { height: 62px; } .brand img { height: 44px; } .hero { padding: 52px 0 44px; } } /* ── Ambient-Glow (Orbs erzeugt site.js; Layout wie die Flutter-Landing) ── */ .glow-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; } .glow-wrap { position: absolute; will-change: transform; } .glow-orb { border-radius: 50%; animation: glow-pulse 5.2s ease-in-out infinite alternate; } @keyframes glow-pulse { from { transform: scale(.85); } to { transform: scale(1.15); } } /* ── Scroll-Reveal (Klassen setzt site.js; ohne JS bleibt alles sichtbar) ── */ .reveal { opacity: 0; transform: translateY(24px); } .reveal-in { opacity: 1; transform: none; transition: opacity .55s ease-out, transform .55s ease-out; } @media (prefers-reduced-motion: reduce) { .glow-orb { animation: none; } .reveal { opacity: 1; transform: none; } .card, .btn { transition: none; } } /* ── Store-Badges (Google Play / App Store) ────────────────────────────── Vor dem Launch bewusst OHNE href (nicht klickbar); sobald die Apps live sind, nur die Links eintragen — siehe TODO(stores) im HTML. */ .stores { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .store-badge { display: inline-flex; align-items: center; gap: 12px; background: var(--badge-bg); color: var(--badge-fg); border-radius: 13px; padding: 10px 20px; min-width: 180px; text-decoration: none; } .store-badge:hover { text-decoration: none; } a.store-badge[href] { transition: transform .15s ease; } a.store-badge[href]:hover { transform: translateY(-2px); } .store-badge svg { width: 26px; height: 26px; flex: none; fill: var(--badge-fg); } .store-badge .lines { display: flex; flex-direction: column; line-height: 1.2; text-align: left; } .store-badge .small { font-size: 11px; opacity: .8; } .store-badge .big { font-size: 16.5px; font-weight: 700; } /* ── Kontaktformular ─────────────────────────────────────────────────────── */ .contact-form label { display: block; font-size: 13px; font-weight: 700; margin: 16px 0 6px; color: var(--fg); } .contact-form input, .contact-form textarea { width: 100%; font: inherit; font-size: 14.5px; color: var(--fg); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(228, 37, 43, .12); } .contact-form textarea { min-height: 160px; resize: vertical; } .contact-form .btn { border: none; cursor: pointer; margin-top: 20px; } /* ── Launch-Gate (Schalter: Firestore config/web_access, liest site.js) ── Vor dem offiziellen Launch sind alle Login-/Start-CTAs versteckt (.requires-launch); Coming-soon-Hinweise (.until-launch) verschwinden, sobald site.js `launched` aufs setzt. */ html:not(.launched) .requires-launch { display: none !important; } html.launched .until-launch { display: none !important; } /* Versteckter Team-Zugang wie auf der Flutter-Landing: Klick auf das ©-Copyright im Footer führt zum Login — bewusst nicht als Link gestylt. */ .staff-login { color: inherit; text-decoration: none; cursor: default; } .staff-login:hover { text-decoration: none; } /* ── Startaktion „Gratis-Premium" ────────────────────────────────────────── Band ganz oben, eingefügt von site.js aus config/launch_offer. Erscheint nur während der Aktion; ohne das Dokument bleibt die Seite unverändert. */ .launch-offer-bar { background: #E4252B; color: #fff; text-align: center; padding: 9px 16px; font-size: 14px; line-height: 1.35; position: relative; z-index: 60; } .launch-offer-bar strong { font-weight: 700; } .launch-offer-note { display: block; font-size: 11.5px; opacity: .85; margin-top: 2px; } @media (max-width: 560px) { .launch-offer-bar { font-size: 13px; padding: 8px 12px; } } /* ── Herkunfts-Band (QR-Plakat, Partner-Aushang) ───────────────────────────── Wird von site.js eingehängt, wenn die Adresse `?src=

` trägt. Bewusst
   ANDERS eingefärbt als das rote Aktionsband (.launch-offer-bar): Beide können
   gleichzeitig stehen, und zwei rote Bänder übereinander liest niemand mehr.
   Der Zweck ist die Bestätigung — wer scannt, soll sehen, dass sein Code
   angekommen ist, sonst gibt er ihn später nicht ein. */
.src-bar {
  background: #1D2027;
  color: #fff;
  text-align: center;
  padding: 9px 16px;
  font-size: 14px;
  line-height: 1.35;
  position: relative;
  z-index: 60;
}
.src-bar strong { font-weight: 700; }
.src-bar strong::before { content: "✓ "; color: #6FCF97; }
.src-bar span {
  display: block;
  font-size: 11.5px;
  opacity: .85;
  margin-top: 2px;
}
.src-bar em { font-style: normal; font-weight: 600; }
@media (max-width: 560px) {
  .src-bar { font-size: 13px; padding: 8px 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Ab hier: Bauteile der überarbeiteten Startseite (09/2026).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Thema-Umschalter im Kopf ─────────────────────────────────────────────
   Hängt site.js in jede .site-nav ein. Zwei Sinnbilder liegen übereinander im
   Knopf; welches sichtbar ist, entscheidet allein CSS — so stimmt der Knopf
   auch dann, wenn gar kein Attribut gesetzt ist und das System entscheidet. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  flex: none;
  transition: color .15s ease, border-color .15s ease;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--muted); }
.theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-moon { display: block; }
.theme-toggle .i-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
}
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }
:root[data-theme="light"] .theme-toggle .i-sun { display: none; }

/* ── Sprachumschalter ───────────────────────────────────────────────────── */
.lang-switch { display: inline-flex; gap: 2px; font-size: 12.5px; font-weight: 700; }
.lang-switch a { color: var(--faint); padding: 3px 6px; border-radius: 6px; }
.lang-switch a:hover { color: var(--fg); text-decoration: none; }
.lang-switch a.active { color: var(--fg); background: var(--card); }

/* ── Hero mit Gerätebild ─────────────────────────────────────────────────
   Unter 900 px fällt alles wieder in eine zentrierte Spalte zurück (das alte
   Aussehen), darüber steht der Text links und das Handy rechts. */
.hero.split { text-align: left; display: grid; grid-template-columns: 1fr minmax(240px, 340px); gap: 48px; align-items: center; }
.hero.split .hero-copy { min-width: 0; }
.hero.split .actions { justify-content: flex-start; }
.hero.split h1 { margin-left: 0; margin-right: 0; }
.hero.split p.lead { margin-left: 0; }
.hero .eyebrow { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
/* Die Handy-Aufnahme ist 600 x 1354 — in voller Höhe macht sie den Hero
   fast 1500 px hoch und der Text schwimmt in der Mitte. Angeschnitten auf
   das obere Drittel wirkt sie wie ein Gerät, das ins Bild ragt, und der
   Hero passt wieder auf einen Bildschirm. */
.hero-art .device img { aspect-ratio: 600 / 860; object-fit: cover; object-position: top center; }

@media (max-width: 900px) {
  .hero.split { grid-template-columns: 1fr; text-align: center; gap: 34px; }
  .hero.split .actions { justify-content: center; }
  .hero.split p.lead { margin-left: auto; }
  .hero .eyebrow { justify-content: center; }
  .hero-art { max-width: 250px; margin: 0 auto; }
}

/* Geräterahmen. Bewusst nur Rand plus Schatten statt einer gezeichneten
   Handy-Attrappe: Die Aufnahmen haben selbst schon runde Ecken, ein zweites
   Gehäuse darum herum wirkt doppelt. */
.device { border: 8px solid var(--badge-bg); border-radius: 32px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); background: var(--badge-bg); }
/* `height: auto` ist hier PFLICHT, nicht Kosmetik: Die  tragen
   width/height-Attribute (gegen Layout-Sprünge beim Laden). Ohne diese
   Regel gewinnt das height-Attribut und das Bild wird senkrecht gezerrt —
   der Desktop-Screenshot stand mit 649 x 900 statt 649 x 406 auf der Seite. */
.device img { display: block; width: 100%; height: auto; }
.device.flat { border-width: 6px; border-radius: 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, .22); }

/* ── Strich-Sinnbilder der Funktionskarten ──────────────────────────────── */
.feat-icon {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(228, 37, 43, .09);
}
.feat-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--primary); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ── Schrittnummern ─────────────────────────────────────────────────────── */
.step-no {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--primary); color: var(--on-primary);
  font-weight: 800; font-size: 15px;
}

/* ── KI-Scan: vorher/nachher ────────────────────────────────────────────── */
.scan-demo { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: center; }
@media (max-width: 820px) { .scan-demo { grid-template-columns: 1fr; } .scan-arrow { transform: rotate(90deg); justify-self: center; } }
.scan-arrow svg { width: 34px; height: 34px; fill: none; stroke: var(--primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scan-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.scan-panel .panel-label { font-size: 11.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
/* Beleg-Attrappe: als Text nachgebaut statt als Bild — bleibt so in beiden
   Themen und in jeder Sprache lesbar und kostet kein Kilobyte Ladezeit. */
.receipt { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 12.5px; line-height: 1.75; color: var(--body); background: var(--card); border: 1px dashed var(--border); border-radius: 10px; padding: 14px 16px; }
.receipt .r-head { text-align: center; font-weight: 700; letter-spacing: .5px; }
.receipt .r-row { display: flex; justify-content: space-between; gap: 12px; }
.receipt .r-sum { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; font-weight: 700; }
.field-list { display: grid; gap: 10px; }
.field-row { display: flex; align-items: center; gap: 10px; }
.field-row .f-label { font-size: 12px; font-weight: 700; color: var(--muted); width: 88px; flex: none; }
.field-row .f-value { flex: 1; background: var(--card); border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px; font-size: 13.5px; color: var(--fg); font-weight: 600; }
.field-row .f-check { width: 16px; height: 16px; flex: none; fill: none; stroke: #2fa860; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ── Zielgruppen ────────────────────────────────────────────────────────── */
.audience-card { display: flex; flex-direction: column; }
.audience-card .who { font-size: 11.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--primary); }
.audience-card ul { list-style: none; margin: 12px 0 16px; flex: 1; }
.audience-card li { position: relative; padding: 4px 0 4px 20px; font-size: 14px; color: var(--muted); }
.audience-card li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }

/* ── Geräte-Schaufenster ──────────────────────────────────────────────────
   Die beiden Geräte stehen auf einer Linie (`align-items: end`). Damit das
   nicht schief aussieht, müssen sie ungefähr gleich HOCH enden — und das ist
   reine Rechnerei, weil die Aufnahmen sehr verschiedene Formate haben
   (Browser 1400×880, Handy 700×1400):

     links  (1,75fr)  696 px breit  → 437 px hoch
     rechts (0,75fr)  288 px breit  → 444 px hoch (auf 700×1080 angeschnitten)

   Ohne den Anschnitt wäre das Handy 576 px hoch und über dem Browserbild
   klaffte ein Loch von anderthalb Zentimetern. */
.showcase { display: grid; grid-template-columns: 1.75fr .75fr; gap: 24px; align-items: end; }
.showcase .shot-phone .device img { aspect-ratio: 700 / 1080; object-fit: cover; object-position: top center; }
@media (max-width: 860px) { .showcase { grid-template-columns: 1fr; } .showcase .shot-phone { max-width: 270px; margin: 0 auto; } }
.shot-cap { text-align: center; color: var(--faint); font-size: 12.5px; margin-top: 10px; }

/* ── Preisraster mit vier Karten ────────────────────────────────────────── */
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid.cols-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .grid.cols-4 { grid-template-columns: 1fr; } }

/* Enterprise steht als Streifen unter den vier Karten statt als fünfte Karte
   im Raster — sonst bleibt daneben eine Lücke von drei Spalten. */
.enterprise-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 18px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; }
.enterprise-strip .es-text { flex: 1; min-width: 240px; }
.enterprise-strip h3 { font-size: 17px; margin-bottom: 4px; }
.enterprise-strip p { color: var(--muted); font-size: 14px; }

/* ── Ratgeber ───────────────────────────────────────────────────────────── */
.guide-card { display: flex; flex-direction: column; }
.guide-card .kicker { font-size: 11.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--primary); }
.guide-card h3 { margin: 8px 0 6px; font-size: 16.5px; }
.guide-card h3 a { color: var(--fg); }
.guide-card h3 a:hover { color: var(--primary); text-decoration: none; }
.guide-card p { flex: 1; }
.guide-card .more { margin-top: 12px; font-size: 13.5px; font-weight: 700; color: var(--primary); }

/* Artikelseite */
.article { max-width: 720px; }
.article .doc-meta { margin-bottom: 22px; }
.article .lede { font-size: 17px; line-height: 1.65; color: var(--muted); margin-bottom: 26px; }
.article h2 { font-size: 21px; margin: 34px 0 12px; }
.article h3 { font-size: 16.5px; margin: 22px 0 8px; }
.article p, .article li { font-size: 15.5px; line-height: 1.72; }
.article .note { background: var(--card); border-left: 3px solid var(--primary); border-radius: 0 12px 12px 0; padding: 14px 18px; margin: 22px 0; }
.article .note p:last-child { margin-bottom: 0; }
.article .note strong { color: var(--fg); }
.article table.limits { margin: 18px 0; }
.toc { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 30px; }
.toc strong { display: block; font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.toc ol { margin: 0; padding-left: 20px; }
.toc li { font-size: 14.5px; padding: 2px 0; }
.toc li::before { content: none; }
.article-cta { margin-top: 40px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; text-align: center; }
.article-cta h2 { margin: 0 0 8px; font-size: 19px; }
.article-cta p { color: var(--muted); margin-bottom: 16px; }
.crumbs { font-size: 13px; color: var(--faint); margin-bottom: 14px; }
.crumbs a { color: var(--muted); }

/* Quellen unter Fristen- und Rechtstexten. Steht klein und am Ende: Sie belegt
   die Zahlen, ohne den Lesefluss zu stören. */
.sources { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--faint); }
.sources a { color: var(--muted); }
.sources p { font-size: 12.5px; color: var(--faint); margin-bottom: 6px; }

/* ── Marken-Logo im Dunkelmodus ──────────────────────────────────────────
   logo_on_light.png trägt den Schriftzug in Schwarz — auf dunklem Grund
   verschwindet die halbe Wortmarke. logo_on_dark.png ist dieselbe Zeichnung
   mit weißer Schrift, aus derselben Quelle und mit demselben Zuschnitt
   erzeugt (`tool/gen_web_logos.py`). Weil der Zuschnitt derselbe ist, sind
   beide Fassungen bei gleicher Höhe auch gleich GROSS — genau daran hakte es
   vorher: Die alte helle Datei hatte doppelt so viel leeren Rand und wirkte
   im Dunkelmodus halb so groß.

   Getauscht wird per `content`, nicht über ein zweites : Der Kopf steht
   wortgleich in neunzehn HTML-Dateien, und ein Bauteil, das man an neunzehn
   Stellen ändern muss, wird irgendwo vergessen. Kann ein Browser `content` auf
   einem  nicht, bleibt schlicht das dunkle Logo stehen — unschön, aber
   nichts bricht. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand img { content: url("/assets/logo/logo_on_dark.png"); }
}
:root[data-theme="dark"] .brand img { content: url("/assets/logo/logo_on_dark.png"); }
:root[data-theme="light"] .brand img { content: url("/assets/logo/logo_on_light.png"); }