/*
 * polaris1.dev — Stylesheet der ausgelieferten Seite, seit dem 27.10.2026
 * ════════════════════════════════════════════════════════════════════════
 *
 * Entstanden als dritte Demo-Variante („Kombi", 25.10.2026: „jetzt füge
 * beide zusammen und mach eine variante") und am 27.10.2026 zur echten Seite
 * gemacht („Ja das letzte demo will ich deployen, bereite alles vor"). Ab da
 * ist diese Datei die Quelle; demo-kombi/kombi.css bleibt als Stand der Demo
 * stehen und ändert sich nicht mehr mit. Was woher kommt und warum:
 * DEMO-KOMBI.md im Wurzelverzeichnis.
 *
 * Das Gerüst ist pd.css aus der projectdiscovery-Variante (Rahmen, Raster,
 * Attrappen, Seitenaufbau). Dazu kommen aus der mailcheap-Variante: die
 * wechselnde Überschrift mit den Icon-Kacheln, das helle Thema mit Schalter,
 * die dunkle API-Tafel, die Preis-Karte mit Balken und die Fragen in zwei
 * Spalten. Neu ist nur das Zusammenspiel: Der wechselnde Begriff steht
 * kursiv in der Serife -- projectdiscoverys Akzent -- hinter mailcheaps
 * Kachel, und der Pixel-Hintergrund rechnet in beiden Themen.
 *
 * Schriften: die der vorherigen Fassung (Systemschrift, ui-monospace,
 * Orbitron für die Wortmarke, aus brand/fonts/), für Akzente die Serife des
 * Systems. Nichts kommt von fremden Servern.
 *
 * Der Einwilligungsbanner hat seine Farben in consent.css; die Seiten laden
 * sie nach dieser Datei.
 */

:root {
  /* Schriften der echten Seite (site.css) plus Systemserife für Akzente. */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --logo: 'Orbitron', ui-monospace, monospace;

  /* Marke */
  --logo-o: #5ceda3;
  --brand: #5ceda3;
  --brand-h: #8af8c1;
  --brand-ink: #04180f;
  --accent: #57e59d;
  --accent-t: rgba(87, 229, 157, .12);
  --navy: #061321;
  --teal: rgba(22, 150, 168, .22);
  --glow: rgba(87, 229, 157, .22);

  /* Flächen: unser Blauschwarz statt projectdiscoverys #111 / #171717 */
  --bg: #05080f;
  --panel: #0a0e17;
  --panel-2: #0e131e;
  --panel-3: #121a28;
  --card: rgba(255, 255, 255, .035);
  --fill: rgba(255, 255, 255, .06);
  --fill-2: rgba(255, 255, 255, .1);
  --border: rgba(255, 255, 255, .07);
  --border-2: rgba(255, 255, 255, .12);

  /* Schrift-Abstufung nach projectdiscovery: 93 / 69 % Weiß. Die dritte Stufe
     war dort 39 % und gab 3,6:1. Am 26.10.2026 lagen damit 55 von 282
     Textstellen der Startseite unter WCAG AA (4,5:1), alle kleine Etiketten.
     52 % gibt auf jedem Grund der Seite mindestens 5:1, auch auf einer
     Karte mit Füllung. Hell ebenso: #5f6a77 statt #7c8794 (3,3:1 bis 3,7:1). */
  --fg: rgba(255, 255, 255, .93);
  --fg-2: rgba(255, 255, 255, .686);
  --fg-3: rgba(255, 255, 255, .52);

  /* Schweregrade dunkel, app.css */
  --red: #ff5d6c;   --red-t: rgba(255, 93, 108, .13);
  --high: #fb923c;  --high-t: rgba(251, 146, 60, .13);
  --amber: #e7b04c; --amber-t: rgba(231, 176, 76, .13);
  --green: #4fd493; --green-t: rgba(79, 212, 147, .13);

  /* Was in pd.css fest verdrahtet war, ist hier ein Token -- sonst gäbe es
     kein helles Thema. */
  --fg-strong: #fff;
  --accent-word: #5ceda3;
  --code-bg: #070b12;
  /* Browserfenster der Startseite (mailcheap.ai): Rahmen und Karten, Grund
     darin, aktiver Reiter. Wie dort folgt das Fenster dem Thema. */
  --w-card: #0e131e;
  --w-body: #0a0e17;
  --w-pill: #1a2130;
  --hi-bg: #0f1a26;
  --mark: rgba(92, 237, 163, .05);
  --announce-bg:
    radial-gradient(40% 180% at 50% 0%, rgba(92, 237, 163, .16), transparent 70%),
    linear-gradient(90deg, #050b14 0%, #0a1f22 50%, #050b14 100%);
  --sel-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  --w: 1184px;
  --e: cubic-bezier(.2, .7, .3, 1);
  color-scheme: dark;
}

/* Hell: Werte aus app.css. Ausgangswert ist Dunkel wie bei projectdiscovery;
   Hell gibt es nur über den Schalter im Footer. Bis zum 28.10.2026 kam es
   auch aus der Systemeinstellung, wie bei der mailcheap-Variante, und dieser
   Block stand ein zweites Mal in `@media (prefers-color-scheme: light)`.
   Seither gilt: ohne Wahl dunkel, auch bei hellem System.
   Ausnahme seit dem 27.10.2026: --accent ist #097249 statt #0b8f5c aus
   app.css, gleicher Farbton, 6 Punkte dunkler. Mit #0b8f5c hatten kleine
   grüne Texte (READ-ONLY, finding closed, audit log) nur 3,2:1 bis 3,9:1.
   #097249 hält auf jeder hellen Fläche mindestens 4,7:1, auch auf der
   doppelten Tönung (Chip in einer getönten Zeile). Die Tönung --accent-t und
   das große Akzentwort --accent-word bleiben #0b8f5c: Schrift ab 24 px
   braucht 3:1, und das Wort hat auf jeder hellen Fläche mindestens 3,6:1. */
:root[data-theme="light"] {
  --bg: #f6f8fa; --panel: #ffffff; --panel-2: #f8fafc; --panel-3: #eef2f7;
  --card: rgba(12, 21, 36, .025); --fill: rgba(12, 21, 36, .05); --fill-2: rgba(12, 21, 36, .09);
  --border: rgba(12, 21, 36, .09); --border-2: rgba(12, 21, 36, .15);
  --fg: #0c1524; --fg-strong: #0c1524; --fg-2: #55606d; --fg-3: #5f6a77;
  --accent: #097249; --accent-t: rgba(11, 143, 92, .1);
  --code-bg: #f3f6f9; --hi-bg: #eefaf3; --mark: rgba(11, 143, 92, .07); --accent-word: #0b8f5c;
  --w-card: #ffffff; --w-body: #fafbfc; --w-pill: #ffffff;
  --announce-bg:
    radial-gradient(40% 180% at 50% 0%, rgba(92, 237, 163, .32), transparent 70%),
    linear-gradient(90deg, #eef6f2 0%, #e1f4e9 50%, #eef6f2 100%);
  --sel-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c8794' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --red: #b0182a;   --red-t: #fceaec;
  --high: #c2410c;  --high-t: #fdeee4;
  --amber: #a1690b; --amber-t: #fdf4e6;
  --green: #12864c; --green-t: #e9f6ef;
  color-scheme: light;
}

/* Inseln, die in beiden Themen dunkel bleiben -- wie mailcheaps Agenten-
   Tafel: die API-Tafel und der Aufruf im Artikel. Die dunklen Werte noch
   einmal, damit alles darin dunkel rechnet. (Bis zum 26.10.2026 gehörte die
   Bühne mit dem App-Fenster dazu; das Browserfenster an ihrer Stelle folgt
   dem Thema, wie bei mailcheap.ai.) */
.navy, .post-cta {
  --bg: #05080f; --panel: #0a0e17; --panel-2: #0e131e; --panel-3: #121a28;
  --card: rgba(255, 255, 255, .035); --fill: rgba(255, 255, 255, .06); --fill-2: rgba(255, 255, 255, .1);
  --border: rgba(255, 255, 255, .07); --border-2: rgba(255, 255, 255, .12);
  --fg: rgba(255, 255, 255, .93); --fg-strong: #fff; --fg-2: rgba(255, 255, 255, .686); --fg-3: rgba(255, 255, 255, .52);
  --accent: #57e59d; --accent-t: rgba(87, 229, 157, .12); --code-bg: #070b12; --accent-word: #5ceda3;
  --red: #ff5d6c;   --red-t: rgba(255, 93, 108, .13);
  --high: #fb923c;  --high-t: rgba(251, 146, 60, .13);
  --amber: #e7b04c; --amber-t: rgba(231, 176, 76, .13);
  --green: #4fd493; --green-t: rgba(79, 212, 147, .13);
  color: var(--fg); color-scheme: dark;
}

/* ── Grundlagen ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--fg);
  font: 400 14px/1.6 var(--sans); letter-spacing: 0;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::selection { background: rgba(92, 237, 163, .3); color: var(--fg-strong); }
.i { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -.125em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { max-width: calc(var(--w) + 48px); margin-inline: auto; padding-inline: 24px; }
.mono { font-family: var(--mono); }

/* ── Ankündigung und Kopfzeile ──────────────────────────────────────────── */
.announce {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 44px; padding: 8px 48px; font-size: 13px; color: var(--fg); text-align: center;
  background:
    var(--announce-bg);
  border-bottom: 1px solid var(--border);
}
.announce a { display: inline-flex; align-items: center; gap: 8px; }
.announce a:hover span:last-of-type { text-decoration: underline; text-underline-offset: 3px; }
.announce .tag { padding: 2px 8px; border-radius: 999px; font: 500 12px var(--mono); letter-spacing: 0; color: var(--brand-ink); background: var(--brand); }
.announce .i { width: 14px; height: 14px; color: var(--fg-2); }
.announce-x { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; color: var(--fg-2); }
.announce-x:hover { background: var(--fill); color: var(--fg); }
.announce[hidden] { display: none; }

.top {
  position: sticky; top: 0; z-index: 50; height: 64px; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
}
.top-in { height: 100%; display: flex; align-items: center; gap: 20px; }
.logo {
  font-family: var(--logo); font-weight: 500; font-size: 16px; letter-spacing: 0; line-height: 1;
  text-transform: none; color: var(--fg-strong); display: inline-flex; align-items: baseline;
}
.logo .ostar { display: block; width: 1.28cap; height: 1cap; margin: 0 .09em; fill: var(--logo-o); }
.nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.nav a, .top-r a:not(.btn) {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 6px;
  font-size: 13px; color: var(--fg-2); transition: background-color .15s var(--e), color .15s var(--e);
}
.nav a:hover, .top-r a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--fg); background: var(--fill); }
.top-r { display: flex; align-items: center; gap: 8px; }
.top .btn { height: 28px; padding: 0 12px; border-radius: 6px; font-size: 13px; }
.menu-btn { display: none; width: 34px; height: 34px; border-radius: 8px; place-items: center; color: var(--fg); }
.menu-btn .i { width: 18px; height: 18px; }
.menu { display: none; padding-top: 8px; padding-bottom: 16px; border-top: 1px solid var(--border); background: var(--bg); }
.menu a { display: block; padding: 12px 0; font-size: 14px; color: var(--fg-2); border-bottom: 1px solid var(--border); }
.menu a:last-child { border-bottom: 0; }
@media (max-width: 860px) {
  /* `a.login`, sonst gewinnt `.top-r a:not(.btn)` mit gleicher Gewichtung nicht. */
  .nav, .top-r a.login { display: none; }
  .top-r { margin-left: auto; }
  .menu-btn { display: inline-grid; }
  .top.open { background: var(--bg); }
  .top.open .menu { display: block; }
}

/* ── Knöpfe ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px;
  font-size: 14px; letter-spacing: 0; white-space: nowrap;
  transition: gap .3s var(--e), background-color .2s var(--e), color .2s var(--e);
}
.btn:hover { gap: 8px; }
.btn .i { width: 15px; height: 15px; }
.btn-primary { background: var(--brand); color: var(--brand-ink); font-weight: 500; }
.btn-primary:hover { background: var(--brand-h); }
.btn-ghost { background: var(--fill); color: var(--fg); }
.btn-ghost:hover { background: var(--fill-2); }
.btn-lg { height: 48px; padding: 0 24px; font-size: 14px; }
.btn-block { width: 100%; justify-content: center; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ── Seitenkopf mit Pixel-Hintergrund ───────────────────────────────────── */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.pixels { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; image-rendering: pixelated; }
/* Gitter über den Pixeln: macht aus der Fläche ein Mosaik wie im Video der Vorlage. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--bg) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(0deg, var(--bg) 0 2px, transparent 2px 9px);
  opacity: .9;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 78%, transparent) 32%, color-mix(in srgb, var(--bg) 15%, transparent) 62%, color-mix(in srgb, var(--bg) 35%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 20%, transparent) 0%, transparent 30%, transparent 62%, var(--bg) 100%);
}
.hero-in { padding-top: 112px; padding-bottom: 88px; }
.hero-in.center { text-align: center; }
.hero-in.center .lead { margin-inline: auto; }
.hero-in.center .btn-row, .hero-in.center .points { justify-content: center; }
.hero-short .hero-in { padding-top: 96px; padding-bottom: 72px; }
.h1 {
  max-width: 13em; font-size: clamp(2.4rem, 1.55rem + 3.4vw, 3.5rem); line-height: 1.02; font-weight: 500;
  letter-spacing: -.012em; color: var(--fg); text-wrap: balance;
}
.hero-in.center .h1 { margin-inline: auto; }
.accent { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.06em; letter-spacing: -.01em; color: var(--accent-word); }
.lead { margin-top: 20px; max-width: 35rem; font-size: 14px; line-height: 24px; color: var(--fg-2); }
.hero-in .btn-row { margin-top: 28px; }
.eyebrow { font: 500 12px/16px var(--mono); letter-spacing: 0; text-transform: none; color: var(--fg-3); }
.hero-in .eyebrow { margin-bottom: 20px; }
.points { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--fg-2); }
.points li { display: inline-flex; align-items: center; gap: 8px; }
.points .i { width: 14px; height: 14px; color: var(--accent); }

/* ── Raster mit Etiketten (bei der Vorlage die Logo-Tabelle) ───────────── */
.facts { position: relative; z-index: 2; border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: color-mix(in srgb, var(--panel) 88%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.facts-row { display: grid; grid-template-columns: 235px repeat(4, minmax(0, 1fr)); }
.facts-row + .facts-row { border-top: 1px solid var(--border); }
.facts-row > * { padding: 20px 20px; }
.facts-row > * + * { border-left: 1px solid var(--border); }
.facts-label { display: flex; flex-direction: column; justify-content: center; gap: 8px;
  font-size: 12px; line-height: 16px; letter-spacing: 0; text-transform: none; color: var(--fg-2); }
.facts-label p { text-transform: none; letter-spacing: 0; font-size: 13px; line-height: 20px; color: var(--fg); }
.fcell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; min-height: 72px; }
.fcell .tool { display: inline-flex; align-items: center; gap: 8px; font: 13px var(--mono); color: var(--fg); }
.fcell .tool .i { width: 14px; height: 14px; color: var(--accent); }
.fcell b { font-size: 24px; line-height: 1.1; font-weight: 500; letter-spacing: -.02em; color: var(--fg); }
.fcell small { font-size: 12px; line-height: 15px; letter-spacing: 0; text-transform: none; color: var(--fg-2); max-width: 15rem; }
.fcell.txt b { font-size: 14px; font-weight: 500; letter-spacing: 0; }
.fcell.txt small { text-transform: none; letter-spacing: 0; font-size: 12px; }
.fcell a { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-2); transition: color .15s var(--e); }
.fcell a:hover { color: var(--fg); }
.fcell a .i { width: 13px; height: 13px; }
@media (max-width: 900px) {
  .facts-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts-label { grid-column: 1 / -1; }
  .facts-row > * + * { border-left: 0; }
  .facts-row > .fcell { border-top: 1px solid var(--border); }
  .facts-row > .fcell:nth-child(odd) { border-left: 1px solid var(--border); }
}

/* ── Abschnitte, zweifarbige Überschriften ─────────────────────────────── */
.sec { padding-top: 140px; }
@media (max-width: 700px) { .sec { padding-top: 96px; } }
.h2 { max-width: 900px; font-size: clamp(1.55rem, 1.25rem + 1.1vw, 1.875rem); line-height: 1.2; font-weight: 500; letter-spacing: -.022em; color: var(--fg); text-wrap: balance; }
.h2 span { color: var(--fg-2); }
.h2-sm { font-size: 16px; font-weight: 400; color: var(--fg); }
.sec-more { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg-2); transition: color .15s var(--e), gap .3s var(--e); }
.sec-more:hover { color: var(--fg); gap: 8px; }
.sec-more .i { width: 14px; height: 14px; }

/* ── Reiter mit Browserfenster (mailcheap.ai, Startseite) ────────────────
 * Bis zum 26.10.2026 stand hier die Bühne von projectdiscovery: Textreiter
 * mit grünem Strich, ein kleines Fenster auf Farbverlauf, der Text daneben.
 * Dann der Wunsch: „nimm die mailcheap.ai als beispiel … ich will außerdem,
 * dass sie automatisch weitergehen". Dort abgelesen am 26.10.2026 mit
 * getComputedStyle: Reiter als Pillen, 36 px hoch, in einer Leiste mit 4 px
 * Innenabstand und 1-px-Ring; Fenster bis 62rem breit, Radius 16 px,
 * Kopfleiste 40 px, Adresse mittig in Mono 11 px; Seitenleiste 192 px erst
 * ab 1024 px; darunter Text in 15 px. Im aktiven Reiter läuft unten ein 1 px
 * feiner Strich in der Zeit des Reiters voll, dann kommt der nächste. Takt
 * und Anhalten: kombi.js.
 *
 * Abweichung: mailcheap gibt dem Fenster eine feste Höhe (32/34/36rem) und
 * baut den Inhalt darauf. Hier liegen alle sechs Tafeln im selben
 * Grid-Feld, unsichtbare mit `visibility: hidden`. Das Fenster ist so hoch
 * wie die höchste Tafel, bei jeder Breite: Nichts wird abgeschnitten, und
 * die Seite springt beim Wechsel nicht. Für die Sätze darunter gilt dasselbe.
 */
.walk { display: flex; flex-direction: column; align-items: center; text-align: center; }
.walk .h2 { margin-inline: auto; }
/* Seit dem 27.10.2026 steht der Bereich direkt unter dem Kopf, wie bei
   mailcheap.ai unter dem Knopf: 64 px von den Knöpfen bis zu den Reitern.
   Die Überschrift bleibt nur für Screenreader; dahinter eine Zeile Fakten. */
.hero-walk .hero-in { padding-bottom: 64px; }
.sec-first { padding-top: 0; }
.sec-first .pills { margin-top: 0; }
.sec-first .facts { margin-top: 72px; }
/* Ohne die Faktentabelle ist der Kopf kürzer, und das Pixelband lief durch
   die Unterzeile. Darum liegt es hier tiefer (data-band .92 statt .6), und
   das Oval hinter dem Text ist größer und dunkler als auf den Unterseiten. */
.hero.hero-walk:has(.hero-in.center)::after {
  background:
    radial-gradient(52% 64% at 50% 40%, color-mix(in srgb, var(--bg) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 60%, transparent) 64%, transparent 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 25%, transparent) 0%, transparent 28%, transparent 72%, var(--bg) 100%);
}
.pills {
  position: relative; /* Bezug für offsetLeft in kombi.js */
  margin-top: 32px; max-width: 100%; display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px;
  background: var(--fill); box-shadow: 0 0 0 1px var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.pills::-webkit-scrollbar { display: none; }
.pill {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
  border-radius: 999px; overflow: hidden; font-size: 13px; font-weight: 500; color: var(--fg-2); white-space: nowrap;
  transition: color .15s var(--e), background-color .15s var(--e), box-shadow .15s var(--e), transform .15s var(--e);
}
.pill .i { display: none; width: 16px; height: 16px; }
.pill:hover { color: var(--fg); }
.pill:active { transform: scale(.97); }
.pill:focus-visible { outline-offset: -2px; border-radius: 999px; }
.pill[aria-selected="true"] { color: var(--fg); background: var(--w-pill); box-shadow: 0 0 0 1px var(--border-2), 0 1px 2px rgba(0, 0, 0, .1); }
.prog {
  position: absolute; left: 12px; right: 12px; bottom: 2px; height: 1px; border-radius: 1px;
  background: currentColor; opacity: 0; transform: scaleX(0); transform-origin: 0 50%; transition: transform .1s linear;
}
.walk.auto .pill[aria-selected="true"] .prog { opacity: .4; }
@media (min-width: 640px) {
  .pills { gap: 4px; }
  .pill { padding: 0 20px; font-size: 14px; }
  .pill .i { display: block; }
  .prog { left: 16px; right: 16px; }
}

.browser {
  margin-top: 24px; width: 100%; max-width: 62rem; overflow: hidden; text-align: left;
  border-radius: 12px; background: var(--w-card);
  box-shadow: 0 0 0 1px var(--border-2), 0 2px 4px rgba(0, 0, 0, .04), 0 32px 64px -24px rgba(0, 0, 0, .18);
}
@media (min-width: 640px) { .browser { margin-top: 32px; } }
.bbar { height: 40px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--border); }
/* Links drei Punkte, rechts ein gleich breiter leerer Platz: so steht die Adresse genau in der Mitte. */
.bdots, .bbar-end { flex: none; width: 42px; }
.bdots { display: flex; gap: 8px; }
.bdots i { width: 10px; height: 10px; border-radius: 50%; background: var(--fill-2); }
.url {
  margin-inline: auto; min-width: 0; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 6px;
  background: var(--fill); color: var(--fg-2); font: 12px/16px var(--mono);
}
.url .i { width: 12px; height: 12px; }
.url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bmain { display: flex; }

/* Seitenleiste wie in der echten App (frontend/app/dashboard/index.html,
   NAV): dieselben Punkte und Zeichen, ohne die als „Soon" markierten. */
.bside { display: none; }
@media (min-width: 1024px) { .bside { display: block; width: 192px; flex: none; padding: 16px 12px; border-right: 1px solid var(--border); } }
.bside-logo { height: 28px; display: flex; align-items: center; padding: 0 8px; margin-bottom: 20px; }
.bside-logo .logo { font-size: 12px; }
.bside ul { display: grid; gap: 2px; }
.bside li {
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border-radius: 6px;
  font-size: 12px; font-weight: 500; color: var(--fg-2); transition: background-color .2s var(--e), color .2s var(--e);
}
.bside li .i { width: 15px; height: 15px; }
.bside li.on { color: var(--fg); background: var(--fill); }
.bside li.on .i { color: var(--accent); }
.bside li.bside-g { height: auto; margin-top: 12px; padding: 8px 8px 4px; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fg-3); }
/* Zähler wie in der App: grau, nur die offenen Funde in Markengrün. */
.bside-n { margin-left: auto; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 17px; font-variant-numeric: tabular-nums; color: var(--fg-2); background: var(--fill); }
.bside-n.on { color: var(--brand-ink); background: var(--brand); }

.bbody { flex: 1; min-width: 0; display: grid; padding: 16px; background: var(--w-body); container-type: inline-size; }
@media (min-width: 640px) { .bbody { padding: 24px; } }
@media (min-width: 1024px) { .bbody { padding: 28px; } }
.panel { grid-area: 1 / 1; min-width: 0; visibility: hidden; }
.panel.on { visibility: visible; }
.panel.p-mid { align-self: center; }

.walk-caps { margin-top: 36px; display: grid; max-width: 40rem; }
@media (min-width: 640px) { .walk-caps { margin-top: 44px; } }
.walk-cap { grid-area: 1 / 1; visibility: hidden; font-size: 14px; line-height: 24px; color: var(--fg-2); text-wrap: balance; }
.walk-cap.on { visibility: visible; }
.walk-cap b { color: var(--fg); font-weight: 500; }
.walk-cap a {
  color: var(--fg); font-weight: 500; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--fg) 30%, transparent); transition: text-decoration-color .15s var(--e);
}
.walk-cap a:hover { text-decoration-color: var(--fg); }

/* Im Fenster sitzen die Attrappen größer und weicher, wie mailcheaps App:
   Karten mit 12 px Radius und Ring statt Rahmen, Text 12,5 bis 13 px. Ob
   zwei Spalten passen, entscheidet die Breite des Fensters, nicht die der
   Seite (Container-Abfrage). */
.bbody .m-top { margin-bottom: 16px; font-size: 13px; }
.bbody .m-card, .bbody .count, .bbody .step {
  border: 0; border-radius: 12px; background: var(--w-card);
  box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(0, 0, 0, .04);
}
.bbody .m-card { padding: 16px; }
.bbody .m-card + .m-card { margin-top: 12px; }
.bbody .m-grid { gap: 12px; }
.bbody .m-grid > .m-card + .m-card { margin-top: 0; }
.bbody .m-grid.two, .bbody .m-grid.wide { grid-template-columns: minmax(0, 1fr); }
@container (min-width: 600px) {
  .bbody .m-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bbody .m-grid.wide { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
/* Schmales Fenster: Nebensätze und die Erklärungen unter den Schritten
   fallen weg, so wie mailcheap auf dem Handy Teile des Fensters weglässt.
   Sonst gibt die längste Tafel (die Schritte) dem Fenster gut 650 px Höhe,
   und kurze Tafeln schwimmen in Leerraum. Der Satz unter dem Fenster trägt
   die Aussage weiter. */
@container (max-width: 599px) {
  .bbody .wide-only, .bbody .step div > span { display: none; }
}
.bbody .m-label { font-size: 12px; }
.bbody .m-row { padding: 8px 0; font-size: 12px; }
.bbody .m-k, .bbody .m-v { font-size: 12px; }
.bbody .m-text { font-size: 12px; line-height: 19px; }
.bbody .code { border-radius: 12px; }
.m-card.solo { width: 100%; max-width: 34rem; margin-inline: auto; }
.m-title { margin-top: 8px; font-size: 16px; line-height: 22px; font-weight: 500; letter-spacing: -.01em; }
.m-live { display: inline-flex; align-items: center; gap: 8px; }
.m-gap-l { margin-top: 16px; }
.m-flush { margin-top: 0; }
.free .fg { color: var(--fg); }

/* Aufbau beim Wechsel, wie bei mailcheap.ai: Teile kommen gestaffelt 6 px
   von unten herein (0,4 s, cubic-bezier(.23, 1, .32, 1)), die Domain wird
   getippt, ein Knopf wird gedrückt, Balken laufen voll. Die Verzögerung
   steht je Teil als --d im Markup. Bewegt wird nur in `.panel.play`, und das
   setzt kombi.js. Ohne Skript und bei reduzierter Bewegung steht alles
   fertig da. */
@keyframes step-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes type-w { from { width: 0; } }
@keyframes press { 40% { transform: scale(.92); } }
@keyframes fill-x { from { transform: scaleX(0); } }
/* Mono, also ist jedes Zeichen 1ch breit: Die Breite wächst Zeichen für
   Zeichen, und der Cursor dahinter wandert mit. */
.typed { display: inline-block; overflow: hidden; white-space: nowrap; width: calc(var(--n) * 1ch); }
.panel.play [data-st] { animation: step-in .4s cubic-bezier(.23, 1, .32, 1) var(--d, 0ms) both; }
.panel.play .typed { animation: type-w calc(var(--n) * 70ms) steps(var(--n), end) .45s both; }
.panel.play [data-press] { animation: press .32s ease var(--d, 0ms) both; }
.panel.play .track > i { transform-origin: 0 50%; animation: fill-x 1.2s cubic-bezier(.77, 0, .175, 1) calc(var(--d, 0ms) + 150ms) both; }

/* ── Bausteine der Attrappen ─────────────────────────────────────────────── */
.m-label { font: 500 12px/14px var(--mono); letter-spacing: 0; text-transform: none; color: var(--fg-3); }
.m-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; font-size: 12px; color: var(--fg-2); flex-wrap: wrap; }
.m-top b { color: var(--fg); font-weight: 500; }
.m-top .sep { color: var(--fg-3); margin: 0 8px; }
.m-card { border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); padding: 12px; }
.m-card + .m-card { margin-top: 12px; }
.m-grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .m-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .m-grid.wide { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.m-grid > .m-card + .m-card { margin-top: 0; }
.m-rows { margin-top: 8px; }
.m-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 12px; }
.m-row:first-child { border-top: 0; }
.m-k { font: 12px var(--mono); color: var(--fg-3); }
.m-v { font: 12px var(--mono); color: var(--fg); text-align: right; overflow-wrap: anywhere; }
.m-text { font-size: 12px; line-height: 18px; color: var(--fg-2); }
.m-gap { margin-top: 12px; }
.chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 6px; white-space: nowrap;
  font: 500 12px/1 var(--mono); letter-spacing: 0; text-transform: none; color: var(--fg-2); background: var(--fill); }
.chip .i { width: 11px; height: 11px; }
.chip-ok { color: var(--accent); background: var(--accent-t); }
.chip-crit { color: var(--red); background: var(--red-t); }
.chip-high { color: var(--high); background: var(--high-t); }
.chip-med { color: var(--amber); background: var(--amber-t); }
.chip-low { color: var(--green); background: var(--green-t); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.dot.live { animation: pulse 1.6s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(87, 229, 157, .5); } 100% { box-shadow: 0 0 0 7px transparent; } }
.t-crit { color: var(--red); } .t-high { color: var(--high); } .t-med { color: var(--amber); } .t-low { color: var(--green); } .t-ok { color: var(--accent); }

.field { display: flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 8px; font: 13px var(--mono);
  background: var(--panel); border: 1px solid rgba(92, 237, 163, .45); box-shadow: 0 0 0 3px rgba(92, 237, 163, .12); }
.field .proto { color: var(--fg-3); }
.caret { width: 1.5px; height: 16px; margin-left: 2px; background: var(--accent); animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.opts { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.opt { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 12px; border-radius: 6px; font-size: 12px; color: var(--fg-3);
  background: var(--fill); text-decoration: line-through; text-decoration-color: rgba(255, 93, 108, .7); }
.opt .i { width: 11px; height: 11px; color: var(--red); }
.m-foot { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.m-btn { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--brand-ink); background: var(--brand); }
.m-btn .i { width: 13px; height: 13px; }
.check { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px; background: var(--fill); font-size: 12px; }
.check + .check { margin-top: 8px; }
.check .tick { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: var(--accent-t); flex: none; }
.check .tick .i { width: 10px; height: 10px; stroke-width: 3; }
.check.final { background: var(--accent-t); }
.check.final .tick { color: var(--brand-ink); background: var(--brand); }
.check .chip { margin-left: auto; }
.phase { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); font: 12px var(--mono); }
.phase:first-child { border-top: 0; }
.phase .n { color: var(--fg-2); }
.phase .v { color: var(--fg-3); text-align: right; }
.phase.skip .n { color: var(--fg-3); }
.track { height: 5px; border-radius: 999px; background: var(--fill); overflow: hidden; }
.track > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.track.dash { background: repeating-linear-gradient(90deg, var(--fill-2) 0 5px, transparent 5px 9px); }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 8px; background: var(--fill); }
.seg > span { display: grid; justify-items: center; gap: 1px; padding: 8px 2px; border-radius: 6px; font-size: 12px; color: var(--fg-2); }
.seg small { font: 12px var(--mono); color: var(--fg-3); }
.seg .on { background: var(--panel-3); color: var(--fg); box-shadow: inset 0 0 0 1px var(--border-2); }
.seg .on small { color: var(--accent); }
.stop { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; height: 32px; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--red); background: var(--red-t); }
.stop i { width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 520px) { .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.count { padding: 12px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); }
.count .k { font: 500 12px var(--mono); letter-spacing: 0; text-transform: none; }
.count .v { margin-top: 4px; font-size: 24px; line-height: 1; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.count.zero .v { color: var(--fg-3); }
.locked { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 14px; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
.locked:first-child { border-top: 0; }
.locked .blur { height: 8px; border-radius: 999px; background: var(--fill-2); }
.locked .i { width: 13px; height: 13px; color: var(--fg-3); }
.free { display: flex; align-items: center; gap: 12px; }
.free b { font-size: 32px; line-height: 1; font-weight: 500; letter-spacing: -.03em; color: var(--accent); }
.req { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px; background: var(--fill); font: 12px var(--mono); overflow: hidden; }
.req .m { color: var(--accent); font-weight: 500; }
.req .p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req .s { margin-left: auto; color: var(--fg-3); white-space: nowrap; }
.code { border-radius: 8px; border: 1px solid var(--border); background: var(--code-bg); padding: 8px 0; overflow-x: auto; font: 12px/1.75 var(--mono); color: var(--fg-2); }
.code > div { white-space: pre; padding-right: 12px; }
.code .ln { display: inline-block; width: 44px; padding-right: 12px; text-align: right; color: var(--fg-3); user-select: none; }
.code .hot { background: var(--red-t); box-shadow: inset 2px 0 0 var(--red); color: var(--fg); }
.code .kw { color: var(--accent); } .code .str { color: var(--red); } .code .note { color: var(--red); }
.code .g { color: var(--accent); } .code .dim { color: var(--fg-3); }
.cand { margin-top: 12px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-2); }
.cand .i { width: 12px; height: 12px; color: var(--red); }
.steps { display: grid; gap: 8px; }
.step { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); }
.step .nb { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font: 500 12px var(--mono); background: var(--fill); }
.step b { display: block; font-size: 12px; font-weight: 500; }
.step span { display: block; margin-top: 2px; font-size: 12px; line-height: 17px; color: var(--fg-2); }
.step code { font: 12px var(--mono); color: var(--fg); }
.ro { font: 500 12px var(--mono); letter-spacing: 0; padding: 4px 8px; border-radius: 6px; color: var(--accent); background: var(--accent-t); }

/* ── Board (bei der Vorlage die Issue-Spalten) ─────────────────────────── */
.appwin { margin-top: 40px; display: grid; grid-template-columns: 44px minmax(0, 1fr); border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--panel); }
.rail { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px 0; border-right: 1px solid var(--border); color: var(--fg-3); }
.rail .i { width: 16px; height: 16px; }
.rail .on { color: var(--fg); }
.appwin-main { min-width: 0; }
.appwin-head { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
.appwin-head .i { width: 14px; height: 14px; color: var(--fg-3); }
.appwin-head .r { margin-left: auto; font-size: 12px; color: var(--fg-3); }
.appwin-head b, .ro { white-space: nowrap; }
/* Auf dem Handy kostet die Icon-Leiste mehr Platz, als sie erzählt. */
@media (max-width: 600px) {
  .appwin { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
}
.board { display: grid; gap: 12px; padding: 16px; overflow-x: auto; }
@media (min-width: 760px) { .board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.col { border-radius: 12px; background: rgba(255, 255, 255, .02); padding: 8px; min-width: 0; }
.col-h { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 12px; font: 500 12px var(--mono); letter-spacing: 0; text-transform: none; color: var(--fg-3); }
.col-h b { font-weight: 500; padding: 1px 8px; border-radius: 4px; background: var(--fill); color: var(--fg-2); }
.icard { border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); padding: 12px 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.icard + .icard { margin-top: 8px; }
.icard .id { display: flex; align-items: center; justify-content: space-between; font: 12px var(--mono); color: var(--fg-3); }
.icard .t { margin-top: 8px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--fg); }
.icard .meta { margin-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--fg-2); }
.icard .meta .m { font-family: var(--mono); color: var(--fg-3); }
.icard.sum .t { font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.icard.sum p { margin-top: 8px; font-size: 12px; line-height: 18px; color: var(--fg-2); }

/* ── Kacheln für Grenzen und Kontrollen ─────────────────────────────────── */
.ctl-grid { margin-top: 40px; display: grid; gap: 12px; }
@media (min-width: 700px) { .ctl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .w2 { grid-column: span 2; } }
@media (min-width: 1040px) { .ctl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .w2 { grid-column: span 2; } }
.ctl { display: flex; flex-direction: column; gap: 16px; min-height: 220px; padding: 24px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); }
.ctl .ctl-viz { flex: 1; display: flex; align-items: center; }
.ctl-grid + .sec-more { margin-top: 24px; }
.ctl .ctl-viz > * { width: 100%; }
.ctl h3 { font-size: 14px; line-height: 22px; font-weight: 500; }
.ctl p { margin-top: 4px; font-size: 13px; line-height: 21px; color: var(--fg-2); }
.ctl .eyebrow { margin-bottom: 2px; }
.ctl.text { min-height: 0; }
.mchips { display: flex; flex-wrap: wrap; gap: 8px; }
.mchips span { padding: 4px 8px; border-radius: 6px; font: 12px var(--mono); color: var(--fg); background: var(--fill); box-shadow: inset 0 0 0 1px var(--border); }

/* Pipeline-Leiste der Startseite, seit dem 28.10.2026: die Faktenzeile von
   „What you get", unter dem Preisvergleich. Neu ist nur der Abstand zur Notiz
   darüber und der Umbruch der Endpunkte. „GET /v1/tests/:id/summary" ist in
   Monoschrift breiter als eine Zelle; im HTML stehen deshalb <wbr> nach den
   Schrägstrichen, und `anywhere` greift nur, wenn auch das nicht reicht. */
.facts-pipe { margin-top: 32px; }
.facts-pipe .tool { max-width: 100%; overflow-wrap: anywhere; justify-content: center; text-align: center; }

/* Die drei Punkte im Kopf der Startseite (seit 28.10.2026) berühren den
   oberen Rand des Pixelbands; „Run it again the day you ship" lag ohne
   Hintergrund auf hellen Feldern. Eine Kapsel in der Grundfarbe hält sie in
   beiden Themen lesbar, wie die Reiterleiste darunter. */
.hero-walk .points { width: fit-content; max-width: 100%; margin-inline: auto; padding: 8px 16px;
  border-radius: 12px; background: color-mix(in srgb, var(--bg) 84%, transparent); }

/* ── Leiste unter dem Kopf (bei der Konkurrenz die Kundenlogos) ─────────
 * Seit dem 28.10.2026 auf der Startseite, zwischen Kopf und Reitern: dort,
 * wo fünf von neun Wettbewerbern ihre Kundenlogos zeigen. Gebaut wie deren
 * Leisten: eine leise Zeile darüber, darunter eine Reihe Namen, grau statt
 * farbig, ohne Rahmen. Statt Logos stehen Wortmarken in der Seitenschrift,
 * darunter der Anfang des Schlüssels in Mono. Warum keine Logos: Kommentar
 * über der Leiste in index.html. Den Abstand zu den Reitern hält die Leiste
 * selbst, weil `.sec-first` oben keinen hat.
 */
.logos { padding-top: 8px; padding-bottom: 72px; text-align: center; }
.logos-h { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--fg-2); text-wrap: balance; }
/* `space-evenly`, nicht `space-between`: Sonst stehen Stripe und JWT bei
   schmalem Fenster genau an den Rändern, die Zeile darüber aber mittig. */
.logos-row { max-width: 920px; margin: 24px auto 0; display: flex; flex-wrap: wrap; justify-content: space-evenly;
  align-items: flex-start; gap: 20px 40px; }
.logos-row li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.logos-row b { font-size: 18px; line-height: 24px; font-weight: 500; letter-spacing: -.015em; color: var(--fg-2); }
.logos-row .pfx { font: 12px/14px var(--mono); letter-spacing: 0; color: var(--fg-3); }
@media (max-width: 700px) {
  .logos { padding-bottom: 56px; }
  .logos-row { justify-content: center; gap: 20px 32px; }
  .logos-row b { font-size: 18px; line-height: 22px; }
}

/* ── Satz als Zitat ─────────────────────────────────────────────────────── */
.quote { max-width: 880px; margin-inline: auto; text-align: center; }
.quote .big { font-family: var(--serif); font-style: italic; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); line-height: 1.2; letter-spacing: -.01em; color: var(--fg); text-wrap: balance; }
.quote .big s { text-decoration: none; color: var(--red); }
.quote .sub { margin: 20px auto 0; max-width: 36rem; font-size: 14px; line-height: 24px; color: var(--fg-2); }
.quote .sub em { font-style: normal; color: var(--fg); font-weight: 500; }

/* ── Tabellen ───────────────────────────────────────────────────────────── */
.tpanel { margin-top: 40px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); overflow-x: auto; }
.tbl { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: 14px; line-height: 21px; }
.tbl th, .tbl td { padding: 16px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--border); }
.tbl thead th { border-top: 0; padding-top: 16px; padding-bottom: 12px; font: 500 12px/16px var(--mono); letter-spacing: 0; text-transform: none; color: var(--fg-3); vertical-align: bottom; }
.tbl tbody th { font-weight: 500; color: var(--fg); width: 30%; }
.tbl .them { color: var(--fg-2); }
.tbl .us { color: var(--fg); background: rgba(92, 237, 163, .045); }
.tbl td.us .i { width: 14px; height: 14px; margin-right: 8px; color: var(--accent); vertical-align: -2px; }
.tbl thead .us { background: rgba(92, 237, 163, .045); }
.tbl .logo { font-size: 13px; }
.note { margin-top: 20px; max-width: 46rem; font-size: 14px; line-height: 22px; color: var(--fg-2); }

/* ── Karten: Blog, Kontakt, Hinweise ───────────────────────────────────── */
.posts { margin-top: 20px; display: grid; gap: 16px; }
@media (min-width: 760px) { .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post { display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; border: .5px solid var(--border); background: var(--card); transition: border-color .2s var(--e); }
.post:hover { border-color: var(--border-2); }
.post img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post-b { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-b h3 { font-size: 14px; line-height: 22px; font-weight: 500; }
.post-b p { font-size: 13px; line-height: 20px; color: var(--fg-2); }
.post-b time, .post-b .meta { margin-top: auto; padding-top: 12px; font: 12px var(--mono); color: var(--fg-3); }
.cards2, .cards4 { display: grid; gap: 16px; }
@media (min-width: 760px) { .cards2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .cards4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cards2 + .cards4 { margin-top: 16px; }
.ccard { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); }
.ccard > .i:first-child { width: 18px; height: 18px; color: var(--fg-2); margin-bottom: 8px; }
a.ccard { transition: border-color .2s var(--e), background-color .2s var(--e); }
a.ccard:hover { border-color: var(--border-2); background: var(--panel-2); }
a.feature:hover h2 { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: var(--border-2); }
.icard-lg .eyebrow .i { width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; }
.ccard h3 { font-size: 16px; line-height: 24px; font-weight: 500; }
.cards4 .ccard h3 { font-size: 14px; }
.ccard p { font-size: 13px; line-height: 21px; color: var(--fg-2); }
.ccard .btn { margin-top: auto; align-self: flex-start; height: 30px; padding: 0 12px; font-size: 13px; }
.ccard .mail { margin-top: auto; padding-top: 8px; font: 12px var(--mono); color: var(--accent); }
.cards3 { margin-top: 40px; display: grid; gap: 12px; }
@media (min-width: 760px) { .cards3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cards3.two { grid-template-columns: none; }
@media (min-width: 760px) { .cards3.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.icard-lg { padding: 24px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); }
.icard-lg .eyebrow { margin-bottom: 12px; }
.icard-lg h3 { font-size: 14px; line-height: 22px; font-weight: 500; }
.icard-lg p { margin-top: 8px; font-size: 13px; line-height: 21px; color: var(--fg-2); }
.icard-lg .foot-note { margin-top: 12px; font: 12px var(--mono); color: var(--fg-3); }
.icard-lg.tick { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; }
.icard-lg.tick > .i { width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }
.mid { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: 13px; color: var(--fg-3); }

/* ── Phasen als Tabelle (Features) ─────────────────────────────────────── */
.phases { margin-top: 40px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); overflow: hidden; }
.ph-row { display: grid; gap: 16px; padding: 24px; }
.ph-row + .ph-row { border-top: 1px solid var(--border); }
@media (min-width: 900px) { .ph-row { grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 20rem); gap: 28px; } }
.ph-n { font: 500 12px/18px var(--mono); letter-spacing: 0; text-transform: none; color: var(--fg-3); }
.ph-n b { display: block; font-size: 13px; color: var(--accent); letter-spacing: 0; }
.ph-row h3 { font-size: 16px; line-height: 23px; font-weight: 500; }
.ph-row p { margin-top: 8px; font-size: 14px; line-height: 22px; color: var(--fg-2); }
.ph-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.ph-tags span { padding: 4px 8px; border-radius: 6px; font: 12px var(--mono); color: var(--fg-2); background: var(--fill); }

/* ── Preise ─────────────────────────────────────────────────────────────── */
.plans { margin-top: 48px; display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan { display: flex; flex-direction: column; padding: 24px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); }
.plan.hi { background: linear-gradient(180deg, var(--hi-bg), var(--panel) 70%); border-color: rgba(92, 237, 163, .4); box-shadow: 0 0 0 1px rgba(92, 237, 163, .12), 0 40px 90px -40px rgba(92, 237, 163, .35); }
.plan h3 { font-size: 16px; font-weight: 500; }
.plan .price { margin-top: 8px; display: flex; align-items: baseline; gap: 8px; }
.plan .price b { font-size: 32px; line-height: 1.1; font-weight: 500; letter-spacing: -.02em; }
.plan .price span { font-size: 13px; color: var(--fg-2); }
.plan .desc { margin-top: 12px; font-size: 13px; line-height: 21px; color: var(--fg-2); }
.plan .inc { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); flex: 1; }
.plan .inc p { font-size: 13px; font-weight: 500; color: var(--fg); margin-bottom: 12px; }
.plan .inc li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 12px; font-size: 13px; line-height: 20px; color: var(--fg-2); }
.plan .inc li + li { margin-top: 8px; }
.plan .inc .i { width: 15px; height: 15px; margin-top: 2px; color: var(--accent); }
.plan .btn { margin-top: 24px; }
.plan .when { margin-top: 12px; font: 12px var(--mono); color: var(--fg-3); text-align: center; }
.strip { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 24px 24px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); }
.strip h3 { font-size: 16px; font-weight: 500; }
.strip p { margin-top: 4px; max-width: 46rem; font-size: 13px; line-height: 21px; color: var(--fg-2); }

/* ── Fragen ─────────────────────────────────────────────────────────────── */
.faq { margin-top: 32px; border-top: 1px solid var(--border); max-width: 900px; }
.qa { border-bottom: 1px solid var(--border); }
.qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font-size: 14px; font-weight: 500; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .i { width: 15px; height: 15px; color: var(--fg-3); transition: transform .2s var(--e); }
.qa[open] summary .i { transform: rotate(45deg); }
.qa .ans { padding: 0 40px 20px 0; font-size: 14px; line-height: 23px; color: var(--fg-2); }
.qa .ans b { color: var(--fg); }

/* ── Über uns ───────────────────────────────────────────────────────────── */
.banner { position: relative; isolation: isolate; margin-top: 0; height: 340px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.banner .pixels { z-index: 0; }
.banner::before { content: ""; position: absolute; inset: 0; z-index: 1; background:
  repeating-linear-gradient(90deg, var(--bg) 0 2px, transparent 2px 9px), repeating-linear-gradient(0deg, var(--bg) 0 2px, transparent 2px 9px); opacity: .9; }
.banner::after { content: ""; position: absolute; inset: 0; z-index: 2; background: radial-gradient(60% 80% at 50% 100%, transparent, color-mix(in srgb, var(--bg) 65%, transparent)); }
.banner .mark { position: absolute; z-index: 3; left: 50%; top: 50%; width: 76px; height: 76px; transform: translate(-50%, -50%); border-radius: 999px; box-shadow: 0 20px 60px -10px rgba(92, 237, 163, .45); }
.letter { max-width: 640px; margin-inline: auto; font-family: var(--serif); font-size: 18px; line-height: 31px; color: var(--fg-2); }
.letter .h2 { font-family: var(--sans); }
.letter p { margin-top: 24px; }
.letter .h2 + p { margin-top: 28px; }
.letter strong { color: var(--fg); font-weight: 500; }
.stats { margin-top: 40px; display: grid; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); overflow: hidden; }
@media (min-width: 700px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stats > div { padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.stats > div + div { border-top: 1px solid var(--border); }
@media (min-width: 700px) { .stats > div + div { border-top: 0; border-left: 1px solid var(--border); } }
.stats b { font-size: 32px; line-height: 1.05; font-weight: 500; letter-spacing: -.03em; }
.stats span { font-size: 13px; line-height: 20px; color: var(--fg-2); }

/* ── Formular ───────────────────────────────────────────────────────────── */
.contact-grid { display: grid; gap: 32px; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; } }
.side-note { margin-top: 24px; padding: 20px 20px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); }
.side-note h3 { font-size: 14px; font-weight: 500; }
.side-note p { margin-top: 8px; font-size: 13px; line-height: 21px; color: var(--fg-2); }
.form { position: relative; display: grid; gap: 16px; padding: 24px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); }
.frow { display: grid; gap: 16px; }
@media (min-width: 640px) { .frow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.form label { display: grid; gap: 8px; font-size: 13px; font-weight: 500; color: var(--fg); }
.input { width: 100%; height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--bg); color: var(--fg); font: 14px var(--sans); transition: border-color .15s var(--e), box-shadow .15s var(--e); }
.input::placeholder { color: var(--fg-3); }
.input:focus { outline: none; border-color: rgba(92, 237, 163, .6); box-shadow: 0 0 0 3px rgba(92, 237, 163, .14); }
textarea.input { height: 140px; padding: 12px 12px; resize: vertical; line-height: 22px; }
select.input { appearance: none; padding-right: 36px;
  background-image: var(--sel-arrow);
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fsubmit { display: grid; gap: 12px; }
@media (min-width: 640px) { .fsubmit { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; } }
.fnote { font-size: 12px; line-height: 19px; color: var(--fg-3); }
.fstatus { min-height: 20px; font-size: 13px; }
.fstatus.ok { color: var(--accent); }
.fstatus.bad { color: var(--red); }

/* ── Artikel und Rechtstexte ────────────────────────────────────────────── */
.subbar { border-bottom: 1px solid var(--border); }
.subbar-in { display: flex; align-items: center; gap: 24px; height: 52px; font-size: 13px; color: var(--fg-2); overflow-x: auto; }
.subbar-in b { color: var(--fg); font-weight: 500; }
.subbar-in a:hover, .subbar-in a[aria-current="page"] { color: var(--fg); }
.doc-head { max-width: 760px; margin-inline: auto; padding-top: 72px; text-align: center; }
.doc-head .eyebrow { margin-bottom: 20px; }
.doc-head h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); line-height: 1.1; font-weight: 500; letter-spacing: -.015em; text-wrap: balance; }
.doc-head h1.serif { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.25rem); line-height: 1.08; letter-spacing: -.012em; }
.doc-head .lead { margin: 16px auto 0; text-wrap: pretty; }
.doc-meta { margin-top: 20px; font: 12px var(--mono); letter-spacing: 0; text-transform: none; color: var(--fg-3); }
.doc-head .frame { margin-top: 36px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.doc { display: grid; gap: 40px; padding-top: 56px; padding-bottom: 40px; }
@media (min-width: 1040px) { .doc { grid-template-columns: 220px minmax(0, 640px) 220px; justify-content: center; gap: 48px; } }
.side { display: none; }
@media (min-width: 1040px) { .side { display: block; position: sticky; top: 96px; align-self: start; max-height: calc(100dvh - 120px); overflow: auto; } }
.side h4 { margin-bottom: 12px; font: 500 12px var(--mono); letter-spacing: 0; text-transform: none; color: var(--fg-3); }
.side a { display: block; padding: 4px 0; font-size: 13px; line-height: 19px; color: var(--fg-2); transition: color .15s var(--e); }
.side a:hover, .side a.on { color: var(--fg); }
.side .who { margin-top: 24px; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--fg); }
.side .who img { width: 26px; height: 26px; border-radius: 6px; }
.prose { min-width: 0; width: 100%; max-width: 720px; justify-self: center; font-size: 14px; line-height: 25px; color: var(--fg-2); }
.prose > * + * { margin-top: 16px; }
.prose h2 { margin-top: 48px; font-size: 18px; line-height: 28px; font-weight: 500; letter-spacing: -.01em; color: var(--fg); scroll-margin-top: 96px; }
.prose > h2:first-child { margin-top: 0; }
.prose h2 + * { margin-top: 12px; }
.prose h2 .num { margin-right: 12px; font: 500 12px var(--mono); color: var(--accent); }
.prose h3 { margin-top: 28px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--fg); }
.prose h3 + * { margin-top: 8px; }
.prose a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(92, 237, 163, .55); }
.prose a:hover { text-decoration-color: var(--accent); }
.prose strong, .prose b { color: var(--fg); font-weight: 500; }
.prose ul { padding-left: 1.2em; list-style: disc; }
.prose ol { padding-left: 1.4em; list-style: decimal; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--fg-3); }
.prose code { padding: 2px 8px; border-radius: 6px; font: .86em var(--mono); color: var(--fg); background: var(--fill); overflow-wrap: anywhere; }
.prose dl { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); border-top: 1px solid var(--border); }
.prose dt, .prose dd { padding: 12px 0; border-bottom: 1px solid var(--border); }
.prose dt { padding-right: 16px; font: 12px/20px var(--mono); letter-spacing: 0; text-transform: none; color: var(--fg-3); }
.prose dd { color: var(--fg); }
@media (max-width: 560px) { .prose dl { grid-template-columns: minmax(0, 1fr); } .prose dt { padding-bottom: 0; border-bottom: 0; } }
.prose .fine { margin-top: 36px; font-size: 13px; color: var(--fg-3); }
.prose .notice { padding: 16px 16px; border-radius: 12px; font-size: 14px; line-height: 22px; background: var(--amber-t); color: var(--fg); }
.prose .notice b { display: block; margin-bottom: 4px; color: var(--amber); }
.prose .fill { padding: 1px 8px; border-radius: 6px; color: var(--amber); background: var(--amber-t); }
/* Blogartikel: Serife wie bei der Vorlage */
.prose.serif { font-family: var(--serif); font-size: 18px; line-height: 31px; }
.prose.serif h2 { font-family: var(--serif); font-size: 24px; line-height: 35px; font-weight: 400; letter-spacing: -.012em; margin-top: 56px; }
.prose.serif h3 { font-family: var(--sans); font-size: 16px; }
.prose.serif h2 .num { font-family: var(--mono); font-size: 13px; vertical-align: .25em; }
.prose.serif code { font-size: 14px; }
.prose .tldr { padding: 16px 20px; border-radius: 12px; background: var(--accent-t); font-family: var(--sans); font-size: 14px; line-height: 24px; }
.prose .tldr strong { display: block; font: 500 12px/16px var(--mono); letter-spacing: 0; text-transform: none; color: var(--accent); }
.prose .tldr p { margin-top: 8px; color: var(--fg); }
.prose .tblw { overflow-x: auto; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); font-family: var(--sans); }
.prose table { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: 13px; line-height: 20px; }
.prose th { padding: 12px 16px; text-align: left; font: 500 12px/16px var(--mono); letter-spacing: 0; text-transform: none; color: var(--fg-3); }
.prose td { padding: 12px 16px; vertical-align: top; border-top: 1px solid var(--border); }
.prose td:last-child { color: var(--fg); }
.prose h3.q { margin-top: 28px; }
.prose .sources { list-style: none; padding: 0; border-top: 1px solid var(--border); font-family: var(--sans); }
.prose .sources li { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 21px; }
.prose .sources a { text-decoration: none; display: flex; justify-content: space-between; gap: 12px; }
.prose .sources a .i { width: 13px; height: 13px; margin-top: 4px; color: var(--fg-3); }
.prose .sources a:hover { color: var(--accent); }
.prose a.btn { text-decoration: none; }
.prose a.btn-primary { color: var(--brand-ink); }
.post-cta { margin-top: 40px; padding: 28px; border-radius: 12px; border: 1px solid var(--border); font-family: var(--sans);
  background: radial-gradient(70% 120% at 0% 100%, rgba(92, 237, 163, .22), transparent 60%), radial-gradient(60% 100% at 100% 0%, rgba(22, 150, 168, .28), transparent 60%), var(--navy); }
.post-cta .eyebrow { color: var(--accent); }
.post-cta p.big { margin-top: 8px; font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.2; color: var(--fg-strong); }
.post-cta .btn-row { margin-top: 20px; }
.post-cta .btn-row span { font-size: 13px; color: var(--fg-2); }
.back { margin-top: 40px; font-family: var(--sans); font-size: 14px; }

/* ── Blog-Übersicht ─────────────────────────────────────────────────────── */
.feature { margin-top: 32px; display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .feature { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; } }
.feature .img { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.feature .tagc { display: inline-flex; padding: 4px 8px; border-radius: 6px; font-size: 12px; color: var(--fg); background: var(--fill-2); }
.feature h2 { margin-top: 16px; font-size: 24px; line-height: 1.25; font-weight: 500; letter-spacing: -.015em; text-wrap: balance; }
.feature h2 em { font-family: var(--serif); font-weight: 400; }
.feature p { margin-top: 12px; font-size: 14px; line-height: 23px; color: var(--fg-2); }
.feature .meta { margin-top: 16px; font: 12px var(--mono); letter-spacing: 0; text-transform: none; color: var(--fg-3); }

/* ── Schlussband ────────────────────────────────────────────────────────── */
.cta { position: relative; isolation: isolate; margin-top: 160px; padding: 152px 24px 140px; text-align: center; overflow: hidden; border-top: 1px solid var(--border); }
.cta::before { content: ""; position: absolute; z-index: -1; left: -10%; right: -10%; top: -1px; height: 300px; filter: blur(20px);
  background:
    radial-gradient(40% 90% at 50% 0%, rgba(92, 237, 163, .32), transparent 70%),
    radial-gradient(30% 80% at 22% 0%, rgba(22, 150, 168, .32), transparent 70%),
    radial-gradient(30% 80% at 78% 0%, rgba(22, 150, 168, .26), transparent 70%); }
.cta h2 { max-width: 15em; margin-inline: auto; font-size: clamp(2.2rem, 1.5rem + 3vw, 3.5rem); line-height: 1.04; font-weight: 500; letter-spacing: -.012em; text-wrap: balance; }
.cta p { margin: 20px auto 0; max-width: 34rem; font-size: 14px; line-height: 24px; color: var(--fg-2); }
.cta .btn-row { margin-top: 32px; justify-content: center; }
@media (max-width: 700px) { .cta { margin-top: 112px; padding: 112px 24px 100px; } }

/* ── Fußzeile ───────────────────────────────────────────────────────────── */
.foot { position: relative; isolation: isolate; overflow: hidden; border-top: 1px solid var(--border); padding: 64px 0 56px; }
.foot-grid { display: grid; gap: 36px; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); } }
.foot-brand p { margin-top: 16px; max-width: 18rem; font-size: 14px; line-height: 21px; color: var(--fg-2); }
.foot h4 { font-size: 14px; font-weight: 400; color: var(--fg-3); }
.foot ul { margin-top: 16px; display: grid; gap: 12px; }
.foot ul a { font-size: 14px; color: var(--fg-2); transition: color .15s var(--e); }
.foot ul a:hover { color: var(--fg); }
.foot-bottom { margin-top: 56px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; font-size: 12px; color: var(--fg-3); }
.foot-bottom .badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--fg-2); }
.foot-bottom .badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.foot-mark { position: absolute; z-index: -1; right: -70px; bottom: -150px; width: 420px; height: 420px; fill: var(--mark); }

/* ════════════════════════════════════════════════════════════════════════
   Aus der mailcheap-Variante, auf die Tokens oben umgestellt
   ════════════════════════════════════════════════════════════════════════ */

/* ── Wechselnde Überschrift ──────────────────────────────────────────────
 * Takt und Bewegung wie dort, an mailcheap.ai nachgemessen: alle 3 s die
 * nächste Variante (kombi.js), rein und raus in 0,4 s mit
 * cubic-bezier(.23, 1, .32, 1), 0,3 em Weg, kaum Unschärfe. Davor die
 * Kachel in Markengrün. Der Begriff selbst steht kursiv in der Serife --
 * das ist projectdiscoverys Akzentwort, hier mit mailcheaps Bewegung.
 * Alle Varianten liegen im selben Grid-Feld, deshalb springt nichts.
 */
.rot-h { max-width: none; }
/* Der Kopf steht hier mittig (mailcheap), der Pixel-Hintergrund war für
   linksbündigen Text abgedunkelt (projectdiscovery). Mittig dunkelt ein
   Oval hinter dem Text ab, die Ränder bleiben hell. */
.hero:has(.hero-in.center)::after {
  background:
    radial-gradient(48% 46% at 50% 36%, color-mix(in srgb, var(--bg) 82%, transparent) 0%, color-mix(in srgb, var(--bg) 40%, transparent) 60%, transparent 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 25%, transparent) 0%, transparent 28%, transparent 60%, var(--bg) 100%);
}
.rot { --rot-e: cubic-bezier(.23, 1, .32, 1); display: grid; justify-items: center; align-items: center; }
.rot > span {
  grid-area: 1 / 1; opacity: 0; transform: translateY(.3em); filter: blur(.06em);
  transition: opacity .4s var(--rot-e), transform .4s var(--rot-e), filter .4s var(--rot-e);
}
.rot > .on { opacity: 1; transform: none; filter: none; }
.rot > .out { opacity: 0; transform: translateY(-.3em); filter: blur(.06em); }
.rot .lead-in { display: block; }
.rot .term { white-space: nowrap; }
@media (min-width: 1024px) { .rot .lead-in { display: inline; } }
@media (max-width: 359px) { .rot .term { white-space: normal; } }
/* Die Kachel steht mit ihrer Mitte auf halber Versalhöhe, wie bei
   mailcheap.ai: .78em hoch, `vertical-align: calc(.5cap - .39em)`. Das
   rechnet nur, wenn die Grundlinie der Kachel ihre Unterkante ist. Mit dem
   Symbol im Fluss war es dessen Unterkante, 0,15 em höher. Die Kachel saß
   deshalb 0,15 em zu tief: gemessen am 26.10.2026 Mitte 0,20 em über der
   Grundlinie statt 0,35 em. Darum steht das Symbol absolut in der Mitte. */
.rot-ic {
  position: relative; display: inline-block; width: .78em; height: .78em; margin-right: .06em; border-radius: .2em;
  background: var(--brand); color: var(--brand-ink); box-shadow: 0 .04em .08em rgba(0, 0, 0, .18);
  vertical-align: -.1em; vertical-align: calc(.5cap - .39em);
}
.rot-ic .i { position: absolute; inset: 0; margin: auto; width: .48em; height: .48em; stroke-width: 2.4; }
.rot-tail { display: block; }

/* ── Dunkle API-Tafel ─────────────────────────────────────────────────── */
.navy {
  position: relative; isolation: isolate; overflow: hidden; padding: 64px 20px; border-radius: 22px;
  background: var(--navy); text-align: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
@media (min-width: 640px) { .navy { padding: 84px 32px; } }
.navy::before, .navy::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(40px); }
.navy::before { width: 70%; height: 60%; left: 15%; bottom: -38%; background: var(--glow); }
.navy::after { width: 40%; height: 40%; left: -10%; top: -20%; background: rgba(79, 227, 154, .15); }
.navy .h2 { margin-inline: auto; }
.navy .eyebrow { margin-bottom: 16px; }
.api-icons { margin-top: 36px; display: flex; justify-content: center; gap: 12px; }
.api-ic {
  width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; color: var(--fg-2);
  background: var(--fill); box-shadow: inset 0 0 0 1px var(--border-2);
  transition: background-color .3s var(--e), color .3s var(--e), transform .3s var(--e), box-shadow .3s var(--e);
}
.api-ic .i { width: 22px; height: 22px; }
.api-ic[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); transform: translateY(-3px); box-shadow: 0 10px 30px -8px var(--glow); }
.api-say { margin-top: 32px; min-height: 13rem; }
.api-say [hidden] { display: none; }
.api-say .disp { font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem); line-height: 1.15; color: var(--fg-strong); }
.api-say code { display: inline-block; margin-top: 16px; padding: 4px 12px; border-radius: 8px; font: 12px var(--mono); color: var(--fg); background: var(--fill); }
.api-say .swap { animation: kin .5s var(--e) both; }
@keyframes kin { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.api-json {
  margin: 20px auto 0; max-width: 34rem; text-align: left; padding: 16px 16px; border-radius: 12px;
  background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px var(--border); font: 12px/1.7 var(--mono); color: var(--fg-2); white-space: pre; overflow-x: auto;
}
.api-json .k { color: var(--fg-3); }
.api-json .g { color: var(--accent); }
.navy .note { margin: 28px auto 0; max-width: 36rem; font-size: 14px; line-height: 23px; color: var(--fg-2); }
.navy .links { margin-top: 16px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; }

/* ── Preis-Karte mit Balken ───────────────────────────────────────────── */
.pcard { margin-top: 40px; display: grid; overflow: hidden; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); }
@media (min-width: 920px) { .pcard { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.pcard-l, .pcard-r { padding: 24px; }
@media (min-width: 640px) { .pcard-l, .pcard-r { padding: 32px; } }
.pcard-r { display: flex; flex-direction: column; border-top: 1px solid var(--border); background: linear-gradient(180deg, var(--hi-bg), var(--panel) 75%); }
@media (min-width: 920px) { .pcard-r { border-top: 0; border-left: 1px solid var(--border); } }
.pcard-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.price1 { margin-top: 12px; display: flex; align-items: baseline; gap: 8px; }
.price1 b { font-size: 44px; line-height: 1; font-weight: 500; letter-spacing: -.03em; }
.price1 span { font-size: 14px; color: var(--fg-2); }
.pcard-r .sub { margin-top: 8px; font-size: 13px; line-height: 21px; color: var(--fg-2); }
.incl { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.incl ul { margin-top: 12px; display: grid; gap: 8px; }
.incl li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 12px; font-size: 13px; line-height: 20px; color: var(--fg-2); }
.incl .i { width: 15px; height: 15px; margin-top: 2px; color: var(--accent); }
.pcard-r .btn { margin-top: 24px; }
.pcard-foot { margin-top: 12px; font: 12px var(--mono); color: var(--fg-3); text-align: center; }
.after { margin-top: 20px; font-size: 13px; color: var(--fg-3); }
.after a, .faq-head a { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: rgba(92, 237, 163, .55); }

/* ── Fragen in zwei Spalten ───────────────────────────────────────────── */
.faq-grid { display: grid; gap: 28px; }
@media (min-width: 1024px) { .faq-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; } }
.faq-grid .faq { margin-top: 0; max-width: none; }
.faq-head p { margin-top: 16px; max-width: 22rem; font-size: 14px; line-height: 23px; color: var(--fg-2); }

/* ── Themen-Schalter und Zeichen über dem Schluss ─────────────────────── */
.theme-btn { margin-left: auto; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--fg-2); }
.theme-btn:hover { color: var(--fg); background: var(--fill); }
.theme-btn .i { width: 16px; height: 16px; }
.theme-btn .moon { display: none; }
:root[data-theme="light"] .theme-btn .sun { display: none; }
:root[data-theme="light"] .theme-btn .moon { display: block; }
.cta-mark { width: 52px; height: 52px; margin: 0 auto 28px; border-radius: 12px; box-shadow: 0 14px 34px -12px var(--glow), 0 0 0 1px var(--border); }

/* ── Bewegung nur, wenn erwünscht ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}