/* WinDesk — gebuendeltes Stylesheet
 *
 * ERZEUGT von pruefen/stylesheet-bauen.mjs aus resources/stil/.
 * Nicht von Hand aendern: eine Aenderung hier waere beim naechsten Lauf
 * weg. Die Quellen liegen in resources/stil/ und resources/stil/komponenten/.
 */
@import url('/schriften/schriften.css');

/* ===== 00-tokens.css ===== */
/* ERZEUGT — nicht von Hand ändern.
   Quelle:  design-system/tokens/windesk-tokens.css
   Erzeugt: scripts/sync-design-tokens.mjs (läuft bei jedem Build)
   Änderungen hier gehen beim nächsten Build verloren. */

/* =====================================================================
   WinDesk Design Tokens — SINGLE SOURCE OF TRUTH
   =====================================================================

   Diese Datei ist die einzige Quelle für Farben, Typografie, Abstände,
   Radien und Motion in allen WinDesk-Oberflächen: Client-App, Host-App,
   Kundenportal und Marketing-Site.

   WARUM PLAIN CSS UND NICHT TAILWIND @theme
   Die Apps nutzen Tailwind 4, das Portal Filament/Blade, die
   Marketing-Site Astro. Ein `@theme`-Block wäre nur für Tailwind
   lesbar. `:root`-Custom-Properties versteht jede dieser Umgebungen —
   inklusive der reinen HTML-Previews im Design-System-Projekt, die
   damit dieselben Werte zeigen, die die App tatsächlich rendert.
   Die Tailwind-Bindung ist ein reines Mapping in windesk-theme.css:
       --color-brand: var(--wd-brand);

   ROLLENFARBE — DER WICHTIGSTE MECHANISMUS HIER
   WinDesk hat zwei Rollen mit eigener Markenfarbe: der Client (blau,
   die helfende Seite) und der Host (rot, die Seite, die Zugriff
   gewährt). Komponenten greifen NIE direkt auf Blau oder Rot zu,
   sondern immer auf `--wd-accent`. Die Rolle wird einmal am
   <html>-Element gesetzt:
       <html data-wd-role="host">
   und färbt damit den gesamten Baum um. Vorher existierte die
   Trennung nur als zwei handgepflegte Kopien derselben Datei — die
   bereits auseinandergelaufen waren (dem Host fehlten sämtliche
   Glassmorph-Tokens und die Overlay-Animationen).

   HERKUNFT DER WERTE
   Marke v2 "Fusion-Window", aus dem Markenkonzept im Design-Projekt
   "Windesk.ch modernes Design". Die Werte der Bildmarke stammen
   1:1 aus assets/windesk-appicon-{client,host}.svg.
   ===================================================================== */

:root {
  /* ---------------------------------------------------------------
     MARKE
     Blau ist die Dachfarbe des Produkts. `brand-deep` ist die Füllung
     der Bildmarke, `brand` ihre Kontur — beide zusammen ergeben den
     Fusion-Window-Effekt und dürfen nicht getauscht werden.
     --------------------------------------------------------------- */
  --wd-brand:              #2563EB;
  --wd-brand-strong:       #1D4ED8;
  --wd-brand-deep:         #1E40AF;
  --wd-brand-light:        #60A5FA;
  --wd-brand-soft:         #EFF6FF;
  --wd-brand-disabled:     #93C5FD;

  /* Die Marke, eine Stufe angehoben — ausschliesslich als ANFANG eines
     blauen Verlaufs, nie als Text und nie allein. Sie steht zwischen
     `brand` (#2563EB) und `brand-light` (#60A5FA); `brand-light` ist
     dafuer bereits eine Stufe zu hell und anderweitig belegt.

     Es ist der FRUEHERE Markenblau: als die Marke 2026 auf #2563EB
     wechselte, blieb dieser Ton als Verlaufspartner in Gebrauch und
     stand seither hartcodiert in der Marketing-Site. Heisst bewusst
     nicht `gradient-from`: `--wd-gradient-to` ist das Violett am ENDE
     eines Markenverlaufs, und die beiden gehoeren nicht zum selben
     Verlauf. Ein Namenspaar wuerde genau das behaupten. */
  --wd-brand-lift:         #3B82F6;

  /* Zweite Farbe fuer Markenverlaeufe. Heisst bewusst NICHT
     `accent-2`: `--wd-accent` ist die ROLLENfarbe (Client blau, Host
     rot) und dreht sich beim Rollenwechsel mit. Diese hier tut das
     nicht — sie ist an die Marke gebunden, nicht an die Rolle. Ein
     Name mit "accent" darin wuerde genau diese Erwartung wecken. */
  --wd-gradient-to:        #8B5CF6;

  /* ---------------------------------------------------------------
     ROLLEN
     Client = blau, Host = rot (Schweizer Rot). `--wd-accent` ist die
     Variable, die Komponenten benutzen; sie zeigt per Default auf die
     Client-Rolle und wird unten für den Host umgehängt.
     --------------------------------------------------------------- */
  --wd-role-client:        #2563EB;
  --wd-role-client-deep:   #1E40AF;
  --wd-role-host:          #EF3340;
  --wd-role-host-deep:     #B91C1C;

  --wd-accent:             var(--wd-role-client);
  --wd-accent-deep:        var(--wd-role-client-deep);
  --wd-accent-strong:      #1D4ED8;
  --wd-accent-soft:        #EFF6FF;
  --wd-accent-on:          #FFFFFF;

  /* ---------------------------------------------------------------
     FLÄCHEN
     `surface` ist der Fensterhintergrund, `surface-2` hebt Panels
     leicht ab, `surface-3` trägt eingelassene Bereiche (Listen,
     Eingabefelder-Hintergründe).
     --------------------------------------------------------------- */
  --wd-surface:            #FFFFFF;
  --wd-surface-2:          #F8FAFC;
  --wd-surface-3:          #F1F5F9;
  --wd-surface-raised:     #FFFFFF;

  /* Dunkler Marken-Grund: Splash, Session-Ende, OG-Grafiken.
     Kein flaches Dunkelblau, sondern der Radialverlauf aus dem
     Markenkonzept — er ist ein wiedererkennbares Markenelement. */
  --wd-canvas-deep:        radial-gradient(115% 100% at 76% 4%, #132340 0%, #0C1526 46%, #080D18 100%);
  --wd-canvas-deep-flat:   #0C1526;
  --wd-canvas-glow:        rgba(46, 110, 240, 0.40);

  /* ---------------------------------------------------------------
     RAHMEN UND TEXT
     --------------------------------------------------------------- */
  --wd-border:             #E2E8F0;
  --wd-border-strong:      #CBD5E1;
  --wd-divider:            #E2E8F0;

  --wd-fg:                 #0B1220;
  --wd-fg-emphasis:        #1E293B;
  --wd-fg-body:            #334155;
  --wd-fg-secondary:       #475569;
  --wd-fg-muted:           #64748B;
  --wd-fg-subtle:          #94A3B8;
  --wd-fg-disabled:        #A1A1AA;
  --wd-fg-on-accent:       #FFFFFF;
  --wd-fg-on-deep:         #EDF1F8;
  --wd-fg-on-deep-muted:   #97A1B6;

  /* ---------------------------------------------------------------
     SEMANTIK
     Bewusst getrennt von der Rollenfarbe: ein Fehler ist rot, auch
     wenn die Host-Rolle ohnehin rot ist. Deshalb ist `danger` ein
     anderes Rot als `role-host` — sonst wäre auf dem Host nicht
     unterscheidbar, ob eine Fläche "Host" oder "Fehler" bedeutet.
     --------------------------------------------------------------- */
  --wd-success:            #16A34A;
  --wd-success-soft:       #DCFCE7;
  --wd-warning:            #F59E0B;
  --wd-warning-soft:       #FEF3C7;
  /* Warntext AUF warning-soft. Notwendig, weil `warning` selbst als
     Text auf `warning-soft` nur 1.93:1 erreicht und die Anforderung
     von 4.5:1 klar verfehlt. #B45309 ist der dunkelste Bernsteinton,
     der sie noch besteht (4.51:1) — errechnet, nicht gewaehlt. */
  --wd-warning-on-soft:    #B45309;
  --wd-danger:             #DC2626;
  --wd-danger-soft:        #FEE2E2;
  --wd-info:               #2563EB;
  --wd-info-soft:          #EFF6FF;

  /* Verbindungszustände — eigene Semantik, weil "verbunden" nicht
     dasselbe ist wie "erfolgreich" und im UI dauerhaft steht. */
  --wd-state-live:         #16A34A;
  --wd-state-connecting:   #F59E0B;
  --wd-state-offline:      #94A3B8;

  /* ---------------------------------------------------------------
     OVERLAY UND GLASSMORPH
     --------------------------------------------------------------- */
  --wd-overlay:            rgba(0, 0, 0, 0.40);
  --wd-glass-bg:           rgba(255, 255, 255, 0.35);
  --wd-glass-pill:         rgba(255, 255, 255, 0.75);
  --wd-glass-pill-border:  rgba(0, 0, 0, 0.08);
  --wd-glass-blur:         blur(8px) saturate(140%);

  /* ---------------------------------------------------------------
     TYPOGRAFIE
     Space Grotesk trägt Titel und Wortmarke, Inter den Fliesstext,
     JetBrains Mono alles Technische: Session-ID, PIN, Auflösungen,
     Zeitangaben, Log-Zeilen, Eyebrow-Label.

     Die Fallback-Ketten sind nicht Dekoration: die Apps laufen
     offline und unter CSP, die Schriften werden per @fontsource
     lokal gebündelt. Fehlt eine Datei, landet die App auf einer
     brauchbaren Systemschrift statt auf einer Serifenschrift.
     --------------------------------------------------------------- */
  --wd-font-display:       "Space Grotesk", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --wd-font-sans:          "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --wd-font-mono:          "JetBrains Mono", "Cascadia Code", Consolas, "SF Mono", monospace;

  /* Schriftgrade — Desktop-UI, daher kompakter als eine Website.
     Basis 14px entspricht der Windows-UI-Konvention. */
  --wd-text-xs:            0.6875rem;  /* 11 — Statusleiste, Fusszeilen */
  --wd-text-sm:            0.75rem;    /* 12 — Label, Sekundärtext */
  --wd-text-base:          0.875rem;   /* 14 — Fliesstext, Bedienelemente */
  --wd-text-lg:            1rem;       /* 16 — hervorgehobener Text */
  --wd-text-xl:            1.25rem;    /* 20 — Abschnittstitel */
  --wd-text-2xl:           1.5rem;     /* 24 — Ansichtstitel */
  --wd-text-3xl:           1.75rem;    /* 28 — Splash, Session-Ende */
  --wd-text-4xl:           2.25rem;    /* 36 — Wortmarke gross */

  /* -----------------------------------------------------------------
     WEB-RAMPE

     Die Skala darueber ist fuer Client und Host gebaut: Fliesstext 14px,
     weil dort auf kurze Distanz gelesen wird und jede Zeile Platz kostet.
     Auf einer Website ist das zu klein. Deshalb eine eigene Rampe mit
     16px Grundgroesse und derselben Systematik.

     Gemessen vor ihrer Einfuehrung: die Marketing-Site rendert 31
     verschiedene Schriftgroessen und 43 Zeilenhoehen. Werte wie 11.04px
     oder 15.6px sind niemandes Entscheidung -- sie entstehen, wenn
     irgendwo 0.69rem hingeschrieben wird. Diese Rampe hat neun Stufen;
     was nicht darauf liegt, gehoert nicht auf die Seite.

     Verhaeltnis 1.25 im Textbereich, groessere Spruenge im Anzeigebereich,
     wo Zwischenstufen ohnehin nicht unterscheidbar waeren.
  ----------------------------------------------------------------- */
  --wd-web-text-xs:        0.75rem;    /* 12 — Eyebrow, Fussnote, Meta */
  --wd-web-text-sm:        0.875rem;   /* 14 — Bildunterschrift, Label */
  --wd-web-text-base:      1rem;       /* 16 — Fliesstext */
  --wd-web-text-md:        1.125rem;   /* 18 — Lead, hervorgehobener Absatz */
  --wd-web-text-lg:        1.25rem;    /* 20 — H4, Kartentitel */
  --wd-web-text-xl:        1.5rem;     /* 24 — H3 */
  --wd-web-text-2xl:       1.875rem;   /* 30 — H2 */
  --wd-web-text-3xl:       2.5rem;     /* 40 — H1 */
  --wd-web-text-4xl:       3.5rem;     /* 56 — Hero-Anzeige */

  /* Zeilenhoehen: drei, nicht dreiundvierzig. Anzeigetext braucht enge
     Fuehrung, Fliesstext Luft zum Lesen, Ueberschriften etwas dazwischen. */
  --wd-leading-display:    1.08;
  --wd-leading-heading:    1.25;
  --wd-leading-body:       1.6;

  /* Zeilenlaenge. 65 bis 75 Zeichen sind die lesbare Spanne; bei 16px
     Grundgroesse sind das rund 640px. Breiter wird Fliesstext muehsam,
     weil das Auge den Zeilenanfang verliert. */
  --wd-web-measure:        40rem;      /* 640 — Fliesstext */
  --wd-web-measure-wide:   52rem;      /* 832 — Tabellen, Karten, Listen */

  --wd-tracking-display:  -0.03em;     /* Space Grotesk läuft weit; Titel enger setzen */
  --wd-tracking-eyebrow:   0.18em;     /* Mono-Label in Versalien */

  /* ---------------------------------------------------------------
     ABSTÄNDE — 8px-Raster
     --------------------------------------------------------------- */
  --wd-space-xs:           0.25rem;    /*  4 */
  --wd-space-sm:           0.5rem;     /*  8 */
  --wd-space-md:           1rem;       /* 16 */
  --wd-space-lg:           1.5rem;     /* 24 */
  --wd-space-xl:           2rem;       /* 32 */
  --wd-space-2xl:          3rem;       /* 48 */

  /* ---------------------------------------------------------------
     RADIEN
     --------------------------------------------------------------- */
  --wd-radius-xs:          2px;
  --wd-radius-sm:          4px;
  --wd-radius-md:          8px;
  --wd-radius-lg:          12px;
  --wd-radius-xl:          16px;
  --wd-radius-pill:        9999px;

  /* ---------------------------------------------------------------
     BEDIENELEMENT-HÖHE
     Eingabefelder und Buttons müssen exakt gleich hoch sein, sonst
     franst jede Formularzeile aus. Deshalb eine feste Höhe statt
     vertikalem Padding — Padding ergibt je nach Schriftgrad und
     Zeilenhöhe unterschiedliche Ergebnisse.
     --------------------------------------------------------------- */
  --wd-control-h:          42px;
  --wd-control-h-sm:       32px;

  /* ---------------------------------------------------------------
     ERHEBUNG
     --------------------------------------------------------------- */
  --wd-shadow-sm:          0 1px 2px rgba(11, 18, 32, 0.06);
  --wd-shadow-md:          0 4px 12px rgba(11, 18, 32, 0.08);
  --wd-shadow-lg:          0 12px 32px rgba(11, 18, 32, 0.12);
  --wd-shadow-accent:      0 8px 24px rgba(37, 99, 235, 0.28);

  /* ---------------------------------------------------------------
     MOTION
     Eine gemeinsame Kurve für alles, was einblendet. Die Dauern sind
     kurz gehalten: das hier ist ein Werkzeug, das mehrmals täglich
     bedient wird, keine Präsentationsseite.
     --------------------------------------------------------------- */
  --wd-ease:               cubic-bezier(0.215, 0.61, 0.355, 1);
  --wd-duration-fast:      120ms;
  --wd-duration-base:      180ms;
  --wd-duration-slow:      300ms;
}

/* =====================================================================
   ROLLE: HOST
   Ein Attribut am Wurzelelement färbt den gesamten Baum um.
   ===================================================================== */
[data-wd-role="host"] {
  --wd-accent:             var(--wd-role-host);
  --wd-accent-deep:        var(--wd-role-host-deep);
  --wd-accent-strong:      #DC2626;
  --wd-accent-soft:        #FEF2F2;
  --wd-shadow-accent:      0 8px 24px rgba(239, 51, 64, 0.28);
}

/* =====================================================================
   DUNKLES THEMA
   Aktiviert über `class="dark"` am <html>-Element (so macht es die
   App heute). Nur Tokens werden neu belegt, nie Komponenten.
   ===================================================================== */
.dark {
  --wd-brand:              #60A5FA;
  --wd-brand-strong:       #3B82F6;
  --wd-brand-deep:         #2563EB;
  --wd-brand-soft:         #1E3A8A;
  --wd-brand-disabled:     #1E3A8A;

  /* Eine Stufe heller als `brand`, damit der Verlaufsanfang auf dunklem
     Grund nicht mit der Marke selbst zusammenfaellt — derselbe Schritt
     wie bei gradient-to. */
  --wd-brand-lift:         #93C5FD;

  --wd-role-client:        #60A5FA;
  --wd-role-client-deep:   #2563EB;
  --wd-role-host:          #F87171;
  --wd-role-host-deep:     #DC2626;

  --wd-accent:             var(--wd-role-client);
  --wd-accent-deep:        var(--wd-role-client-deep);
  --wd-accent-strong:      #3B82F6;
  --wd-accent-soft:        #1E3A8A;

  --wd-surface:            #0B1220;
  --wd-surface-2:          #111827;
  --wd-surface-3:          #1E293B;
  --wd-surface-raised:     #1E293B;

  --wd-border:             #1F2937;
  --wd-border-strong:      #334155;
  --wd-divider:            #1F2937;

  --wd-fg:                 #F1F5F9;
  --wd-fg-emphasis:        #E2E8F0;
  --wd-fg-body:            #CBD5E1;
  --wd-fg-secondary:       #B2BECF;
  --wd-fg-muted:           #94A3B8;
  --wd-fg-subtle:          #64748B;
  --wd-fg-disabled:        #475569;

  --wd-success:            #22C55E;
  --wd-success-soft:       #14532D;
  --wd-warning:            #FBBF24;
  --wd-warning-soft:       #78350F;
  /* Im Dunklen genuegt der normale Warnton als Text: #FBBF24 auf
     #78350F ergibt 5.43:1. Eine Sonderfarbe braucht nur das helle
     Thema. */
  --wd-warning-on-soft:    var(--wd-warning);
  --wd-danger:             #F87171;
  --wd-danger-soft:        #7F1D1D;
  --wd-info:               #60A5FA;
  --wd-info-soft:          #1E3A8A;

  /* Eine Stufe heller, damit der Verlauf auf dunklem Grund nicht
     absaeuft — derselbe Schritt wie bei success, danger und warning. */
  --wd-gradient-to:        #A78BFA;

  --wd-state-live:         #22C55E;
  --wd-state-connecting:   #FBBF24;
  --wd-state-offline:      #64748B;

  --wd-overlay:            rgba(2, 6, 23, 0.667);
  --wd-glass-bg:           rgba(15, 23, 42, 0.35);
  --wd-glass-pill:         rgba(15, 23, 42, 0.70);
  --wd-glass-pill-border:  rgba(255, 255, 255, 0.15);

  --wd-shadow-sm:          0 1px 2px rgba(0, 0, 0, 0.40);
  --wd-shadow-md:          0 4px 12px rgba(0, 0, 0, 0.45);
  --wd-shadow-lg:          0 12px 32px rgba(0, 0, 0, 0.55);
}

.dark[data-wd-role="host"] {
  --wd-accent:             var(--wd-role-host);
  --wd-accent-deep:        var(--wd-role-host-deep);
  --wd-accent-strong:      #EF4444;
  --wd-accent-soft:        #7F1D1D;
}


/* ===== 01-base.css ===== */
/* ===================================
   WinDesk Landing Page Styles
   =================================== */

/* WARUM DIESE DATEI SO VIEL KLEINER IST (29.08.2026)
   astro.config.mjs setzt build.inlineStylesheets: 'always'. Das gesamte
   Stylesheet steht damit im <head> JEDER der 244 Seiten -- tote Regeln
   werden also nicht einmal geladen und gecacht, sondern bei jedem
   Seitenaufruf neu übertragen.

   Gestrichen wurde, was im gebauten dist/ auf keiner Seite ein Element
   trifft. Geprüft wurde gegen das GEBAUTE Markup, nicht gegen den
   Quelltext, plus gegen jede Klassenmanipulation in den Skripten
   (public/js/main.js und die Inline-Skripte). Nur drei Klassen werden
   zur Laufzeit gesetzt und stehen deshalb in keinem HTML: .is-revealed
   (main.js, ohne sie blieben 178 Seiten unsichtbar), .open (Nav-Drawer
   und FAQ-Aufklapper) und .is-active (Plattform-Reiter auf /download).
   Sie sind selbstverständlich geblieben.

   Die grossen Blöcke, die hier verschwunden sind:
   - die animierte Verbindungsgrafik der alten Startseite
     (.connection-visual, .device, .network-node, .connection-line samt
     13 @keyframes). Die heutige Startseite baut ihre Grafik in
     src/pages/index.astro mit eigenen, dort definierten Animationen.
   - die alte Navigation (.navbar, .nav-links, .nav-actions,
     .mobile-menu-toggle samt .active-Zuständen). Nav.astro liefert
     seit dem Umbau .wnav-* und bringt seine Styles selbst mit.
   - die alten Download-Karten (.download-card & Co.) und die Fassung
     .dl-* bis 13.10.2026; die Seite rendert .dlx-* (22-download-2026.css).
   Wer eines dieser Muster wieder braucht: es steht in der Git-Historie,
   nicht hier. */

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Bedienelemente erben die Schrift NICHT von sich aus -- Browser setzen fuer
   button, input, select und textarea eigene Werte. Auf der Kontaktseite hiess
   das: das Auswahlfeld und seine sieben Optionen standen auf 13.3333px,
   waehrend jeder Text daneben auf der Leiter lag. Niemand hat diese Groesse
   gewaehlt, sie ist schlicht die Voreinstellung des Browsers. */
button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

:root {
    /* Brand colors (Claude Design handoff, 2026-04-21 — "Insert Badge" finale) */
    --primary: var(--wd-brand); /* #2563EB */        /* was #3B82F6 — aligned with logo + design-brief */
    --primary-dark: var(--wd-brand-strong); /* #1D4ED8 */
    --primary-light: var(--wd-brand-light); /* #60A5FA */  /* dark-mode accent */
    --brand-ink: var(--wd-fg); /* war #0C1A3C */      /* wordmark "Win" half — brand ink (Markenkonzept v2) */
    /* --brand-muted und --brand-border liest zurzeit niemand. Sie bleiben,
       weil die Marken-Aliasse als vollständiger Satz gedacht sind: eine
       Lücke mittendrin lädt dazu ein, den Rohwert wieder hart zu setzen. */
    --brand-muted: var(--wd-fg-muted); /* #64748B */
    --brand-border: var(--wd-border); /* #E2E8F0 */
    --secondary: var(--wd-gradient-to); /* war #8B5CF6 */
    --success: var(--wd-success); /* #16A34A */
    /* Dasselbe Gruen, dunkler, fuer TEXT. --success erreicht als Schrift auf
       Weiss nur 3.2:1 und verfehlt damit WCAG AA (4.5:1); #15803D erreicht
       4.7:1. Als Flaeche hinter weisser Schrift bleibt --success richtig --
       dort ist es der Grund, nicht der Text.

       Der Wert stand bereits einmal hartcodiert im Preis-Abzeichen, mit
       derselben Begruendung im Kommentar. Beim zweiten Bedarf (die
       Vergleichstabelle der Startseite) bekommt er einen Namen. */
    --success-text: #15803D;          /* redesign handoff: greens in check-icons/PIN align to #16A34A */
    --danger: var(--wd-danger); /* #DC2626 */
    --warning: var(--wd-warning-on-soft); /* war #B45309 */
    --warning-soft: var(--wd-warning-soft); /* #FEF3C7 */

    /* Slate scale (redesign token system) */
    --slate-50: var(--wd-surface-2); /* #F8FAFC */
    --slate-100: var(--wd-surface-3); /* #F1F5F9 */
    --slate-200: var(--wd-border); /* #E2E8F0 */
    --slate-300: var(--wd-border-strong); /* #CBD5E1 */
    --slate-400: var(--wd-fg-subtle); /* #94A3B8 */
    --slate-500: var(--wd-fg-muted); /* #64748B */
    --slate-600: var(--wd-fg-secondary); /* Nebentext */
    --slate-700: var(--wd-fg-body);      /* Fliesstext */
    --slate-800: var(--wd-fg-emphasis);  /* Hervorhebung */
    --slate-900: var(--wd-fg); /* war #0F172A */
    --surface-subtle: var(--wd-surface-2); /* war #FAFBFC */   /* used for key-diff cards + related-blog band */
    --on-dark: var(--wd-border); /* #E2E8F0 */          /* foreground on dark surfaces */

    /* Neutrale Grautöne — nur noch Aliasse auf die Slate-Rampe.
       Die Site führte zwei Rampen parallel: Tailwinds neutrales "gray" und
       das bläuliche "slate", das auch die Tokens verwenden. Bis zu ΔE2000 4.1
       Unterschied bei gleicher Aufgabe. Neue Regeln bitte direkt --slate-*. */
    --gray-50: var(--slate-50);
    --gray-100: var(--slate-100);
    --gray-200: var(--slate-200);
    --gray-300: var(--slate-300);
    --gray-400: var(--slate-400);
    --gray-500: var(--slate-500);
    --gray-600: var(--slate-600);
    --gray-700: var(--slate-700);
    --gray-800: var(--slate-800);
    --gray-900: var(--slate-900);

    /* ---------------------------------------------------------------
       DAS RASTER — eine Breite, eine Rinne, für die ganze Site

       Vorher hatten wir vier konkurrierende linke Kanten auf demselben
       Bildschirm (gemessen bei 1440px): Navigation 44, Inhalt 144,
       Fliesstext im schmalen Container 314, Startseiten-Hero 104. Der
       Besitzer sah das sofort — "es ist keine Einheit".

       Deshalb steht die Rasterdefinition ab jetzt hier und nur hier.
       Wer eine andere Breite braucht, nimmt einen Modifikator (siehe
       .container-narrow), nicht ein zweites Raster.

       --wd-gutter kommt aus der Design-Token-Skala (--wd-space-lg =
       1.5rem = 24px) und entspricht exakt dem bisherigen Wert von
       --spacing-md; die Kante bleibt also dort, wo die 240 Unterseiten
       sie schon haben. Der Fallback greift nur, falls 00-tokens.css
       einmal nicht mitgeladen wird. */
    --wd-container: 1200px;                        /* Rasterbreite (Aussenmass inkl. Rinne) */
    --wd-gutter: var(--wd-space-lg, 1.5rem);       /* Rinne links/rechts = 24px */
    /* Schmale Masse — wie --wd-container Aussenmasse inklusive Rinne,
       damit die bestehenden Zeilenlängen unverändert bleiben. */
    --wd-measure: 860px;                           /* Fliesstext */
    --wd-measure-wide: 1100px;                     /* schmales Mass mit Kartenraster darin */

    /* Aussenabstand für randlose (full-bleed) Elemente — Navigation,
       Bänder mit eigener Fläche —, damit ihr Inhalt auf derselben Kante
       sitzt wie der eines .container. Prozentwerte lösen sich am
       Einsatzort auf: die Variable gehört deshalb ausschliesslich auf
       Elemente, die über die volle Seitenbreite laufen. 100vw wäre hier
       falsch — das rechnet die Scrollbar mit und verschöbe die Kante um
       ein paar Pixel gegenüber dem .container. */
    --wd-rail: max(var(--wd-gutter), calc((100% - var(--wd-container)) / 2 + var(--wd-gutter)));

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;

    /* ---------------------------------------------------------------
       DIE TEXTLEITER — neun Stufen, drei Zeilenhöhen, eine Site

       Hier standen bis zum 29.08.2026 zwei Leitern nebeneinander
       (--font-size-* und --fs-*), und keine von beiden wurde
       durchgehalten: gemessen über zwölf Seiten bei 1440px und 390px
       lieferte die Site 47 verschiedene Schriftgrössen aus, darunter
       11.04px, 13.44px und 14.4px. Solche Zahlen entscheidet niemand —
       sie entstehen, wenn jemand 0.69rem, 0.84rem oder 0.9rem schreibt.
       Nachzumessen mit
       `node scripts/check-typography.mjs --report --dir <alter-build>`.

       Ab hier gilt nur noch die Leiter aus dem Design-System
       (--wd-web-text-*, --wd-leading-*, siehe 00-tokens.css). Die
       beiden alten Leitern sind ersatzlos weg, damit niemand
       versehentlich die falsche greift; ihre knapp dreissig
       Fundstellen zeigen jetzt direkt auf ein Token.

       Warum das Design-System einen eigenen Web-Zweig führt: die
       Programme lesen mit 14px Grundtext, eine Website darf das nicht.
       Deshalb --wd-web-text-* NEBEN --wd-text-*, nicht statt dessen.

       Rollen (die Zuordnung, gegen die scripts/check-typography.mjs
       prüft):
         xs   12  Eyebrow, Meta, Fussnote, Chip, Mono-Etikett
         sm   14  Label, Bildunterschrift, dichte Tabellenzelle
         base 16  Fliesstext, Kartentext, Listenpunkt, Formularfeld
         md   18  Lead — der eine Absatz unter einer Überschrift
         lg   20  H4, Kartentitel, Wortmarke
         xl   24  H3
         2xl  30  H2
         3xl  40  H1
         4xl  56  Hero-Anzeige (Startseite, Download)
       --------------------------------------------------------------- */
    --font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Space Grotesk Variable', 'Space Grotesk', 'Inter Variable', system-ui, sans-serif;

    /* Vierte, benannte Zeilenhöhe — die einzige Abweichung von den drei
       Stufen des Design-Systems, und sie ist Absicht. Eine Kennzahl,
       die Wortmarke oder ein einzelnes Glyph hat keinen Lesefluss:
       --wd-leading-body setzt unter eine 40px-Zahl eine halbe
       Leerzeile, die optisch als Fehler liest. Ausdrücklich nicht für
       Sätze — wer sie an einen Absatz schreibt, macht ihn unlesbar. */
    --wd-leading-none: 1;

    /* ---------------------------------------------------------------
       DIE ROLLEN — welche Stufe eine Überschrift bekommt

       Das ist KEIN zweiter Massstab. Jede dieser Variablen enthält
       ausschliesslich eine Stufe der Leiter darüber, nie eine Zahl.
       Sie existieren aus einem einzigen Grund: der Sprung auf schmalen
       Schirmen darf nicht an der Spezifität scheitern.

       Vorher stand er als Typselektor in einer 720px-Abfrage. Eine
       Regel wie `.legal-section h2` (0,1,1) schlägt aber `h2` (0,0,1),
       und die AGB-Überschrift blieb auf dem Telefon 30px stehen —
       "Nutzungseinschränkungen" ist bei 30px 391px breit und lief auf
       einem 390px-Schirm aus dem Bild. Über eine Variable gibt es die
       Frage nicht mehr: wer `var(--fs-h2)` schreibt, bekommt den
       Sprung mitgeliefert, egal wie spezifisch seine Regel ist.

       Kartentitel stehen bewusst NICHT hier. Sie sind eine eigene
       Rolle (immer --wd-web-text-lg, auch auf dem Telefon): ein <h2>
       in einer Preiskarte ist eine Ebene für die Gliederung, keine
       Ansage im Text.
       --------------------------------------------------------------- */
    --fs-hero: var(--wd-web-text-4xl);   /* Hero-Anzeige */
    --fs-h1:   var(--wd-web-text-3xl);
    --fs-h2:   var(--wd-web-text-2xl);
    --fs-h3:   var(--wd-web-text-xl);
    --fs-h4:   var(--wd-web-text-lg);

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-btn: 10px;           /* redesign — buttons */
    --radius-card: 16px;          /* redesign — feature/pricing/blog cards */

    /* Die zweite Leiter (--fs-hero-desktop 60px, --fs-h2-desktop 40px,
       --fs-h2-mobile 26px, --fs-section-label 12px) ist weg. Sie war
       der Grund, warum eine H2 auf der Preisseite 40px mass und eine im
       Blog 25.6px: zwei Leitern, zwei Antworten auf dieselbe Frage.
       Die Sprünge auf schmalen Schirmen macht jetzt die
       Überschriften-Regel weiter unten, eine Stufe pro Überschrift.
       Die Laufweiten bleiben — sie hängen an der Grösse, nicht an
       einer eigenen Leiter. */
    --ls-hero: -2px;
    --ls-hero-mobile: -1.4px;
    --ls-h2: -1px;
    --ls-h2-mobile: -0.7px;
    --font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);   /* aktuell ungenutzt — Stufe der Rampe */
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* Transitions */
    --transition: all 0.3s ease;
}

body {
    font-family: var(--font-family);
    font-size: var(--wd-web-text-base);
    line-height: var(--wd-leading-body);
    background: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===================================
   ÜBERSCHRIFTEN — eine Stufe je Ebene, auf der ganzen Site

   Vorher war die Grösse einer Überschrift eine Frage des Ortes: eine H2
   mass auf der Preisseite 40px, im Blog 25.6px, auf der Startseite 42px
   und im CTA-Band 28px. Vier Antworten auf dieselbe Frage, und keine
   davon las man als System.

   Ab hier hängt die Grösse an der Ebene, nicht an der Seite. Die Regeln
   stehen bewusst hier ganz oben und mit der schwächsten denkbaren
   Spezifität (ein Typselektor). Wer weiter unten eine Ausnahme braucht,
   nimmt dieselbe Rollenvariable — dann trägt seine Regel den Sprung auf
   schmalen Schirmen automatisch mit.
   =================================== */
h1 {
    font-size: var(--fs-h1);
    line-height: var(--wd-leading-display);
}

h2 {
    font-size: var(--fs-h2);
    line-height: var(--wd-leading-heading);
}

h3 {
    font-size: var(--fs-h3);
    line-height: var(--wd-leading-heading);
}

h4 {
    font-size: var(--fs-h4);
    line-height: var(--wd-leading-heading);
}

/* Fliesstext-Träger erben die Zeilenhöhe vom body. Tabellenzellen und
   Definitionslisten tun das nicht zuverlässig, sobald eine Regel weiter
   unten am Elternteil dreht — deshalb hier ausdrücklich. */
p,
li,
dt,
dd,
td,
th,
figcaption,
blockquote {
    line-height: var(--wd-leading-body);
}

/* Auf schmalen Schirmen rückt jede Überschrift genau eine Stufe
   hinunter. Das ist die ganze Regel — vorher hatte fast jede
   Überschrift ihren eigenen Sonderwert unter 720px (36px, 34px, 28px,
   26px, 22px), und die Sprünge waren untereinander nicht vergleichbar.

   Der Sprung sitzt auf den Rollenvariablen, nicht auf den Selektoren:
   so gilt er auch für `.legal-section h2` oder `.page-hero h1`, ohne
   dass jede dieser Regeln ihre eigene 720px-Abfrage mitbringen muss.
   Genau daran war es vorher gescheitert.

   H4 bleibt auf 20px: eine Stufe tiefer wäre die Grösse des
   Fliesstextes daneben, und dann ist es keine Überschrift mehr. */
@media (max-width: 720px) {
    :root {
        --fs-hero: var(--wd-web-text-3xl);
        --fs-h1:   var(--wd-web-text-2xl);
        --fs-h2:   var(--wd-web-text-xl);
        --fs-h3:   var(--wd-web-text-lg);
    }
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--wd-web-text-lg);
    color: var(--brand-ink);
    text-decoration: none;
    letter-spacing: -0.03em;
    line-height: var(--wd-leading-none);
}

.logo-mark { flex: 0 0 auto; }

.logo-text {
    color: var(--brand-ink);
    background: none;
    -webkit-text-fill-color: currentColor;
}

.logo-text-accent {
    color: var(--primary);
}
/* ---- hero -------------------------------------------------
   Zusammengefuehrt aus 01-base (3), 04-additions (1).
   Reihenfolge unveraendert; die Regeln standen vorher in genau dieser
   Abfolge, nur ueber die Dateien verteilt. */
/* ---- hero -------------------------------------------------
   Zusammengefuehrt aus 01-base (2), 02-redesign (1).
   Reihenfolge unveraendert; die Regeln standen vorher in genau dieser
   Abfolge, nur ueber die Dateien verteilt. */


/* ===================================
   Hero Section - Modern Two-Column Layout
   =================================== */

/* Der Hero ist ein .container wie jeder andere: Breite und Rinne kommen
   aus dem Raster. Vorher setzte er max-width: 1400px und eine 2rem-Rinne
   und begann damit 92px weiter links als der Text darunter — genau der
   Sprung, den man auf /en zwischen H1 und Abschnitten sah. Nur der
   vertikale Abstand ist heroeigen. */

/* Mobile Responsive */
@media (max-width: 1024px) {

    .hero-actions {
        justify-content: center;
    }

}


@media (max-width: 768px) {

    /* Der eigene Sonderwert für .hero-title ist weg: die Stufe kommt aus
       --fs-hero (01-base.css, 720px-Abfrage). Zwei Schwellen für dieselbe
       Überschrift — 768 hier, 720 und 960 in 02-redesign.css — hiessen,
       dass der Hero zwischen 721 und 768px eine Grösse hatte, die sonst
       nirgends vorkam. */

    .hero-actions {
        flex-direction: column;
    }

    /* Die Fusszeile bringt ihre eigenen Schwellen mit (02-redesign.css).
       Eine dritte Meinung bei 768px hat sie hier nur überstimmt. */
}


/* ----------------------------------------------------------------
   Hero — BOLD dark redesign (per WinDesk Redesign.html)
   Deep blue/black gradient, white headline with cyan-blue accent,
   light slate body, white pill primary + ghost-outlined secondary.
   Trust bar continues seamlessly underneath.
   ---------------------------------------------------------------- */

.hero-actions {
  display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.25rem;
}


/* Hero-eyebrow (uppercase mono blue label above page-hero h1) */
.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--primary, var(--primary));
  margin-bottom: 0.875rem;
}



/* Die 480px-Abfrage stand nur noch für zwei Überschriftengrössen, die
   jetzt aus den Rollenvariablen kommen. Eine dritte Schwelle für dieselbe
   Frage macht die Leiter nicht feiner, sondern unvorhersehbar. */

/* Newsletter styling now lives in redesign.css (light card on slate-50). */


/* ===== 02-redesign.css ===== */
/* ================================================================
   WinDesk Redesign — 2026-04-22 (Claude Design Handoff cf7cG...)
   Implements the marketing-site redesign: hero with P2P visual,
   dark trust bar, section labels, new cards, dark footer, glass nav,
   comparison cells, blog covers, pull-quotes, scroll-reveals.
   Loaded AFTER seo-extensions.css — rules here override where needed.
   ================================================================ */

/* ----------------------------------------------------------------
   Global typography rhythm on body
   ---------------------------------------------------------------- */
body { color: var(--slate-900); }
h1, h2, h3, h4 { color: var(--slate-900); font-family: var(--font-display); }
/* ---- section -------------------------------------------------
   Zusammengefuehrt aus 01-base (1), 02-redesign (3).
   Reihenfolge unveraendert; die Regeln standen vorher in genau dieser
   Abfolge, nur ueber die Dateien verteilt. */


/* ===================================
   Features Section
   =================================== */

/* Abschnittskopf linksbündig. Die überwiegende Mehrheit der Seiten setzt
   ihre H2 über .section-title direkt in den .container — also links. Die
   fünf zentrierten .section-header waren die Ausnahme und liessen auf
   derselben Seite zwei Leserichtungen entstehen. Zentriert bleiben nur
   Bänder, die als geschlossene Fläche gedacht sind (.cta-band). */
.section-title {
    margin-bottom: var(--spacing-md);
}


/* ----------------------------------------------------------------
   Section label (mono blue, uppercase tag above H2)
   ---------------------------------------------------------------- */
.section-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.75rem;
}


.section-header { margin-bottom: 2.5rem; }

.section-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--ls-h2);
  color: var(--slate-900);
  line-height: var(--wd-leading-heading);
  margin: 0;
}

/* ---- btn -------------------------------------------------
   Zusammengefuehrt aus 01-base (2), 02-redesign (7), 04-additions (3).
   Reihenfolge unveraendert; die Regeln standen vorher in genau dieser
   Abfolge, nur ueber die Dateien verteilt. */


/* ===================================
   Buttons
   =================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: 0.625rem 1.25rem;
    font-size: var(--wd-web-text-base);
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}


/* .btn-primary:hover { transform: translateY(-2px) } stand hier und war
   wirkungslos: 02-redesign.css setzt danach .btn:hover { transform:
   translateY(-1px) }, gleiche Spezifitaet, spaetere Quelle. Solche Faelle
   findet die automatische Pruefung nicht -- sie vergleicht gleiche
   Selektoren, und hier heissen sie verschieden. */

/* Der sekundaere Knopf bekam beim Ueberfahren eine graue Fuellung aus dem
   Entwurf vor dem Redesign -- var(--gray-200) ist var(--slate-200), exakt die Farbe
   seines eigenen Ruherahmens. Der Knopf wurde damit zum flachen grauen Block
   und las sich eher deaktiviert als anklickbar. Das Redesign sieht fuer ihn
   einen Umriss vor, dessen Hover Rahmenfarbe und Schatten anzieht (Zeile
   weiter unten); die Fuellung stand dem entgegen und ist entfernt.

   Auf dunklem Grund bleibt sie: dort ist die Fuellung
   rgba(255,255,255,0.08) und der einzige verfuegbare Hinweis (.cta-band,
   .pricing-card-featured, .page-hero). */


/* Primary CTA rounded-btn radius */
.btn {
  transition: transform 180ms ease-out, box-shadow 180ms ease-out, background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out;
  will-change: transform;
}

.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--slate-900);
  color: #fff;
  border: 1px solid var(--slate-900);
}

/* --slate-900 statt #000: der Ruhezustand des Knopfes ist var(--slate-900),
   und beim Ueberfahren sprang er auf reines Schwarz -- den einzigen #000 in
   der ganzen Palette. Die Rampe endet bei #0B1220; ein Ton darunter gehoert
   ihr nicht an. Der Hover unterscheidet sich jetzt ueber den Schatten, nicht
   ueber eine Farbe, die es sonst nirgends gibt. */
.btn-primary:hover { box-shadow: 0 10px 24px -8px rgba(15,23,42,0.35); }

.btn-secondary {
  background: #fff;
  color: var(--slate-900);
  border: 1px solid var(--slate-200);
}

.btn-secondary:hover { border-color: var(--slate-300); box-shadow: 0 6px 16px -6px rgba(15,23,42,0.18); }

.btn-large { padding: 0.85rem 1.4rem; font-size: var(--wd-web-text-base); font-weight: 600; }


/* Buttons: ensure consistent radius */
.btn {
  border-radius: 10px;
}

.btn-large {
  border-radius: 12px;
}

.btn-block {
  width: 100%;
  justify-content: center;
}


/* Hero CTAs on dark bg — invert primary (white pill) + ghost secondary.
   The site-wide .btn-primary / .btn-secondary stay unchanged for
   on-light contexts (download cards, etc); this only scopes to .hero. */

/* ----------------------------------------------------------------
   P2P Visual — Host/Client mini-windows with gradient line + flowing dots
   ---------------------------------------------------------------- */

/* Dark-hero scoping for the P2P visual — small color tweaks so the
   chrome reads on the new deep-blue background. The white window
   bodies and dashed "Keine Cloud" pill stay light (intentional
   contrast); only the bottom labels go lighter. */

/* "Keine Cloud" badge: very subtle breathing */

@keyframes p2p-line-drift {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -40; }
}
@keyframes p2p-win-glow {
  0%, 100% { box-shadow: 0 20px 40px -20px rgba(15,23,42,0.12), 0 2px 4px rgba(15,23,42,0.04); }
  50%      { box-shadow: 0 20px 48px -18px rgba(37,99,235,0.22), 0 2px 4px rgba(15,23,42,0.04); }
}
@keyframes p2p-nocloud-breath {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.95; }
  50%      { transform: translate(-50%, -50%) scale(1.03); opacity: 1;    }
}
@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(2.2); opacity: 0;    }
}

/* Honor reduced motion — kill anything that moves */
@media (prefers-reduced-motion: reduce) {

   /* SMIL can't be paused via CSS; hide instead */
}
/* ---- price -------------------------------------------------
   Zusammengefuehrt aus 01-base (2), 02-redesign (3).
   Reihenfolge unveraendert; die Regeln standen vorher in genau dieser
   Abfolge, nur ueber die Dateien verteilt. */


.price-currency {
    margin-right: 4px;
}


.price-period {
    margin-left: 4px;
}

.price-currency { font-size: var(--wd-web-text-sm); color: var(--slate-500); font-weight: 600; }

.price-amount { font-size: var(--wd-web-text-3xl); font-weight: 700; color: var(--slate-900); letter-spacing: -1px; line-height: var(--wd-leading-none); }

.price-period { font-size: var(--wd-web-text-sm); color: var(--slate-500); }

/* ----------------------------------------------------------------
   Pricing add-ons — modern marketing cards. Replaces the old
   text-heavy paragraph layout. Two-column grid (collapses on mobile),
   each card shows: icon → price-badge → title → one tagline.
   ---------------------------------------------------------------- */
/* Kopf über dem Erweiterungs-Raster: linksbündig wie jeder andere
   Abschnittskopf. Die Zeilenlänge bleibt begrenzt, der Block steht aber
   auf der Rasterkante. */
.addons-header { max-width: var(--wd-web-measure); margin: 0 auto 2.5rem 0; }
.addons-eyebrow {
  display: inline-block;
  font-size: var(--wd-web-text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  /* darker blue for WCAG AA on the soft-blue badge bg —
     was var(--primary) on rgba(37,99,235,0.1) ≈ 4.3:1 (just under 4.5:1).
     #1e40af on the same bg scores ~7.2:1. */
  color: #1e40af;
  background: var(--accent-soft, rgba(37,99,235,0.1));
  padding: 0.3rem 0.75rem; border-radius: 999px;
  margin-bottom: 0.75rem;
}
.addons-header h2 { font-size: var(--fs-h2); font-weight: 700; color: var(--slate-900); margin: 0 0 0.5rem; letter-spacing: -0.5px; }
.addons-header p { font-size: var(--wd-web-text-base); color: var(--slate-600); margin: 0; line-height: var(--wd-leading-body); }

.addon-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--accent-soft, rgba(37,99,235,0.1));
  color: var(--accent-strong, var(--primary));
  margin-bottom: 1rem;
}
/* ---- footer -------------------------------------------------
   Zusammengefuehrt aus 01-base (3), 02-redesign (45).
   Reihenfolge unveraendert; die Regeln standen vorher in genau dieser
   Abfolge, nur ueber die Dateien verteilt. */


/* Dark-on-dark usage (footer) */
.footer .logo-text { color: var(--slate-50); }

.footer .logo-text-accent { color: var(--primary-light); }

/* Das #ffffff hier ist ein SELEKTOR, keine Farbe: es trifft die Rechtecke
   der eingebetteten Bildmarke, die im SVG weiss gefuellt sind. Wer es durch
   einen Token ersetzt, trifft nichts mehr. */
.footer .logo-mark rect[fill="#ffffff"] { fill: var(--slate-50); }


/* ----------------------------------------------------------------
   Dark Footer (redesign — mirrors design-bundle/site.jsx Footer)
   Background var(--slate-900) (deeper than slate-900) + top-edge glow +
   6-column grid (brand + 5 link cols) + status box + social icons
   + inline lang switcher in bottom bar.
   ---------------------------------------------------------------- */
.footer {
  background: var(--slate-900);
  color: var(--slate-300);
  padding: 4rem 0 1.75rem;
  margin-top: 0;
  border-top: 1px solid var(--slate-800);
  position: relative;
  overflow: hidden;
}

.footer-top-glow {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 480px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.5), transparent);
  pointer-events: none;
}

.footer-content {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
}

.footer-brand { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }

.footer-brand .logo { color: #fff; }

.footer-brand .logo-text { color: #fff; }

.footer-brand .logo-text-accent { color: var(--primary-light); }

.footer-description {
  font-size: var(--wd-web-text-sm); color: var(--slate-400); line-height: var(--wd-leading-body);
  margin: 0; max-width: 280px;
}

.footer-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.15rem; }

.footer-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 8px;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  font-size: var(--wd-web-text-xs); font-weight: 500; color: var(--slate-300);
}

.footer-chip svg { flex-shrink: 0; }


/* Live status box — Alle Systeme online + version + uptime */
.footer-status {
  margin-top: 0.35rem;
  padding: 10px 12px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 8px;
  font-size: var(--wd-web-text-xs);
  color: var(--slate-300);
  line-height: var(--wd-leading-body);
  max-width: 280px;
}

.footer-status-row {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 2px;
}

.footer-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  flex-shrink: 0;
}

.footer-status-label {
  font-size: var(--wd-web-text-xs); font-weight: 600; color: #fff;
  text-transform: uppercase; letter-spacing: 1px;
}

.footer-status-meta {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* --slate-400 statt --slate-500: die Fusszeile steht auf #0B1220, und
     dort erreicht --slate-500 nur 3.93:1 -- WCAG AA verlangt 4.5:1 fuer
     12px. Auf hellem Grund waere --slate-500 richtig; auf dunklem ist es
     zu dunkel. --slate-400 erreicht 7.30:1. */
  font-size: var(--wd-web-text-xs); color: var(--slate-400);
}


/* Eine Linkgruppe ist ein <details class="footer-column">. Auf dem
   Schreibtisch ist es eine Spalte wie bisher; auf dem Telefon klappt sie
   zu (siehe die 720px-Abfrage weiter unten und das Skript in
   Footer.astro).

   Die Masse hier bilden die bisherige Schreibtischansicht exakt nach:
   Überschrift-Unterkante zum ersten Verweis 16px, Verweis zu Verweis
   26.4px. Dieselben 26.4px entstanden vorher aus 0.65rem Rasterlücke
   plus 1rem margin-bottom aus 01-base.css -- zwei Dateien, die sich
   addierten. Jetzt steht die Summe an einer Stelle. */
.footer-column { display: flex; flex-direction: column; min-width: 0; }

.footer-group {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  cursor: default;
  list-style: none;             /* Dreieck des Browsers weg */
}

.footer-group::-webkit-details-marker { display: none; }

.footer-column h2 {
  font-size: var(--wd-web-text-xs); color: #fff;
  font-weight: 700; margin: 0;
  letter-spacing: 1.6px; text-transform: uppercase;
  padding-bottom: 4px;
}

/* Der Pfeil ist eine Telefon-Angelegenheit -- auf dem Schreibtisch ist
   nichts zum Aufklappen da. */
.footer-group-chevron { display: none; flex-shrink: 0; color: var(--slate-500); }

.footer-links { display: flex; flex-direction: column; gap: 1.65rem; margin-top: 1rem; }

.footer-column a {
  font-size: var(--wd-web-text-sm);
  color: var(--slate-400);
  line-height: var(--wd-leading-body);
  text-decoration: none;
  padding: 0;
  transition: color 150ms ease-out;
}

.footer-column a:hover { color: #fff; }


/* Divider between grid + bottom bar (faded ends) */
.footer-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--slate-800) 12%, var(--slate-800) 88%, transparent);
  margin: 0;
}


.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 1.25rem;
  gap: 1rem; flex-wrap: wrap;
}

.footer-bottom-left {
  display: flex; align-items: center; gap: 1.15rem; flex-wrap: wrap;
}

.footer-copyright {
  font-size: var(--wd-web-text-xs); color: var(--slate-400);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.footer-legal {
  display: flex; align-items: center; gap: 0.875rem;
}

.footer-legal a {
  font-size: var(--wd-web-text-xs); color: var(--slate-400); text-decoration: none;
  transition: color 150ms ease-out;
}

.footer-legal a:hover { color: #fff; }


.footer-bottom-right {
  display: flex; align-items: center; gap: 0.875rem;
}

.footer-socials { display: flex; gap: 6px; }

.footer-social {
  width: 32px; height: 32px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: var(--slate-400); text-decoration: none;
  transition: background 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}

.footer-social:hover {
  background: var(--slate-800);
  color: #fff;
  border-color: rgba(148, 163, 184, 0.4);
}

.footer-bottom-sep {
  width: 1px; height: 18px; background: var(--slate-800);
}


.footer-lang {
  display: inline-flex; align-items: center; gap: 0.625rem;
}

.footer-lang-label { font-size: var(--wd-web-text-xs); color: var(--slate-400); }

.footer-lang-list { display: flex; gap: 2px; }

.footer-lang-link {
  font-size: var(--wd-web-text-xs); padding: 4px 8px; border-radius: 6px;
  color: var(--slate-400); text-decoration: none;
  transition: color 150ms ease-out, background 150ms ease-out;
}

.footer-lang-link:hover { color: #fff; }

.footer-lang-link.is-active {
  color: #fff;
  background: rgba(96, 165, 250, 0.12);
  font-weight: 600;
}


/* ---- Fusszeile auf schmalen Schirmen -------------------------------
   Vorher lagen die Schwellen der Fusszeile in vier Blöcken in drei
   Dateien und widersprachen sich: die 1024er-Abfrage blendete die
   Gruppe "Unternehmen" aus, die 960er weiter unten in dieser Datei
   stellte auf zwei Spalten um -- und weil `display: none` aus der
   1024er weitergalt, war "Über uns / Kontakt / Presse" zwischen 721px
   und 1024px überhaupt nicht erreichbar. Ab hier steht alles an einer
   Stelle, und keine Gruppe verschwindet mehr. */

/* Grosses Tablet: sechs Spalten passen hier sehr wohl -- 1024px minus
   Rinne sind 976px, bei 1.5rem Rinnenabstand bleiben pro Spalte rund
   126px. Die alte Regel hat stattdessen den Rinnenabstand bei 3rem
   gelassen und dafür eine Spalte ausgeblendet. Erst schmaler machen,
   dann umbrechen. */
@media (max-width: 1024px) {
  .footer-content { gap: 1.5rem; }
}


/* Kleines Tablet: jetzt werden die sechs Spalten wirklich zu schmal
   ("Vergleichstabelle" braucht rund 110px). Drei Reihen statt sechs
   Spalten -- und weiterhin keine versteckte Gruppe. */
@media (max-width: 960px) {
  .footer-content {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.25rem 2rem;
  }
  .footer-brand { grid-column: 1 / -1; }
}


/* Telefon: die Gruppen klappen zu. Zugeklappt ist die Fusszeile eine
   Liste aus fünf beschrifteten Zeilen statt einer Rolle aus 24
   Verweisen. Die Trennlinien machen sichtbar, dass es Zeilen sind. */
@media (max-width: 720px) {
  .footer { padding: 2.5rem 0 1.5rem; }
  .footer-content {
    grid-template-columns: 1fr;
    gap: 0;
    padding-bottom: 1.5rem;
  }
  .footer-brand { grid-column: auto; margin-bottom: 1.75rem; gap: 0.9rem; }
  .footer-description { max-width: none; }
  .footer-status { max-width: none; }

  .footer-column { border-top: 1px solid rgba(148, 163, 184, 0.14); }
  .footer-column:last-of-type { border-bottom: 1px solid rgba(148, 163, 184, 0.14); }
  /* Die Gruppenlinien schliessen den Block schon ab. Die eigene
     Trennlinie darüber wäre die zweite Haarlinie auf 30px Abstand --
     genau der Fehler, der auf dem Schreibtisch gerade weggeräumt
     wurde. */
  .footer-divider { display: none; }
  .footer-group {
    /* 48px: der Kopf ist hier ein Schalter, kein Etikett. Vorher waren
       die Verweise 19px hoch -- zu wenig, um sie sicher zu treffen. */
    min-height: 48px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .footer-column h2 { font-size: var(--wd-web-text-xs); padding-bottom: 0; }
  .footer-group-chevron { display: block; transition: transform 180ms ease-out; }
  .footer-column[open] .footer-group-chevron { transform: rotate(180deg); }

  .footer-links {
    gap: 0;
    margin-top: 0;
    padding-bottom: 0.5rem;
  }
  .footer-links a {
    display: flex; align-items: center;
    min-height: 44px;
    font-size: var(--wd-web-text-sm);
    padding-left: 2px;
  }

  /* Untere Leiste: aus vier gestapelten Zeilen werden drei, und jede
     davon trägt Tippziele, die man auch trifft. */
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.75rem; padding-top: 1.25rem; }
  .footer-bottom-left { flex-direction: column-reverse; align-items: flex-start; gap: 0.35rem; }
  .footer-legal { gap: 0.25rem; margin-left: -0.5rem; flex-wrap: wrap; }
  .footer-legal a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 0.5rem; font-size: var(--wd-web-text-sm); }
  .footer-bottom-right { flex-wrap: wrap; gap: 0.75rem 1rem; width: 100%; justify-content: space-between; }
  .footer-bottom-sep { display: none; }
  .footer-social { width: 40px; height: 40px; }
  .footer-lang { flex-wrap: wrap; gap: 0.4rem; }
  .footer-lang-link { min-height: 36px; display: inline-flex; align-items: center; }
}
/* ---- cell -------------------------------------------------
   Zusammengefuehrt aus 02-redesign (5), 03-seo-extensions (4).
   Reihenfolge unveraendert; die Regeln standen vorher in genau dieser
   Abfolge, nur ueber die Dateien verteilt. */

/* Round badge cells */
.cell-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-weight: 700;
}

.cell-badge.cell-yes { background: var(--success); color: #fff; font-size: var(--wd-web-text-base); }

.cell-badge.cell-no  { background: var(--slate-100); color: var(--slate-300); font-size: var(--wd-web-text-base); }

.cell-badge.cell-partial { background: var(--warning-soft); color: var(--warning); font-size: var(--wd-web-text-base); }

.cell-badge.cell-unknown { background: var(--slate-100); color: var(--slate-400); font-size: var(--wd-web-text-base); }

.cell-yes { color: var(--success); font-weight: 700; font-size: var(--wd-web-text-base); }

.cell-no { color: var(--gray-400); font-weight: 700; }

.cell-partial { color: var(--warning); font-weight: 700; }

.cell-unknown { color: var(--gray-400); font-weight: 700; }
/* ---- blog -------------------------------------------------
   Zusammengefuehrt aus 02-redesign (32), 03-seo-extensions (10), 04-additions (1).
   Reihenfolge unveraendert; die Regeln standen vorher in genau dieser
   Abfolge, nur ueber die Dateien verteilt. */


/* ----------------------------------------------------------------
   Blog — redesign
   ---------------------------------------------------------------- */
.blog-filters {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-bottom: 2rem;
}

.blog-filter {
  display: inline-flex; align-items: center;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  font-size: var(--wd-web-text-sm); color: var(--slate-600);
  text-decoration: none;
  transition: all 160ms ease-out;
}

.blog-filter:hover { border-color: var(--primary); color: var(--primary); }

.blog-filter.is-active { background: var(--slate-900); color: #fff; border-color: var(--slate-900); }


.blog-card {
  overflow: hidden;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out;
}

.blog-card:hover { transform: translateY(-2px); border-color: var(--slate-200); box-shadow: 0 20px 40px -22px rgba(15,23,42,0.12); }

.blog-card-featured { grid-column: span 2; }

.blog-cover {
  position: relative;
  height: 170px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

.blog-card-featured .blog-cover { height: 260px; }

.blog-cover svg.bg-shapes { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.18; }

.blog-cover-emoji { font-size: var(--wd-web-text-3xl); line-height: var(--wd-leading-none); position: relative; z-index: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08)); }

.blog-card-featured .blog-cover-emoji { font-size: var(--wd-web-text-4xl); }


.blog-card-body { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }

.blog-card-body .blog-meta { font-size: var(--wd-web-text-xs); color: var(--slate-500); }

.blog-card-body .blog-category { font-family: var(--font-mono); color: var(--primary); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--wd-web-text-xs); }

.blog-card h2 {
  color: var(--slate-900);
  font-weight: 600;
}

.blog-card-featured h2 { font-size: var(--fs-h3); line-height: var(--wd-leading-heading); letter-spacing: -0.4px; }

.blog-card .read-more { margin-top: auto; font-size: var(--wd-web-text-sm); font-weight: 600; color: var(--primary); text-decoration: none; }

.blog-card .read-more:hover { text-decoration: underline; }


/* Blog article detail */
.blog-post-hero {
  background: linear-gradient(180deg, var(--slate-50) 0%, #fff 100%);
  border-bottom: 1px solid var(--slate-100);
  padding: 3rem 0 2rem;
}

.blog-post-hero .blog-meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
  font-size: var(--wd-web-text-sm); color: var(--slate-500);
  margin-bottom: 1rem;
}

.blog-post-hero .blog-category { font-family: var(--font-mono); color: var(--primary); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--wd-web-text-xs); }

.blog-post-hero h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: -0.7px;
  line-height: var(--wd-leading-display);
  color: var(--slate-900);
  margin: 0;
  max-width: var(--wd-web-measure-wide);
}

.blog-post-hero .lead {
  font-size: var(--wd-web-text-md); color: var(--slate-600); line-height: var(--wd-leading-body); margin: 1rem 0 0;
  max-width: var(--wd-web-measure);
}


.blog-newsletter {
  background: var(--slate-900);
  color: var(--on-dark);
  padding: 3.5rem 0;
}

.blog-newsletter h2 { color: #fff; font-size: var(--fs-h2); margin-bottom: 0.5rem; }

.blog-newsletter p { color: var(--slate-400); margin-bottom: 1.25rem; }

.blog-newsletter .newsletter-form {
  display: flex; gap: 0.5rem; max-width: 440px;
}

.blog-newsletter input[type="email"] {
  flex: 1;
  background: var(--slate-800);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-btn);
  color: #fff;
  padding: 0.7rem 0.9rem;
  font-size: var(--wd-web-text-base);
}

.blog-newsletter input[type="email"]::placeholder { color: var(--slate-400); }

.blog-newsletter button { background: var(--primary); color: #fff; border: 0; }

.blog-newsletter button:hover { background: var(--primary-dark); }


/* ---- Blog ---- */
.blog-list { padding: var(--spacing-2xl) 0; }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }

.blog-card {
  background: white; border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  padding: 1.75rem; display: flex; flex-direction: column; gap: 0.75rem;
}

.blog-card h2 { font-size: var(--wd-web-text-lg); line-height: var(--wd-leading-heading); margin: 0; }

.blog-card h2 a { color: var(--gray-900); text-decoration: none; }

.blog-card h2 a:hover { color: var(--primary); }

.blog-card p { color: var(--gray-700); margin: 0; font-size: var(--wd-web-text-sm); line-height: var(--wd-leading-body); }

.blog-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: var(--wd-web-text-sm); color: var(--gray-500); }

.blog-meta .blog-category { color: var(--primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--wd-web-text-xs); }


.blog-post-hero { padding-bottom: var(--spacing-lg); }

.blog-post-content table th,
.blog-post-content table td {
  white-space: normal;
}
/* ---- cta -------------------------------------------------
   Zusammengefuehrt aus 02-redesign (6), 03-seo-extensions (4), 04-additions (1).
   Reihenfolge unveraendert; die Regeln standen vorher in genau dieser
   Abfolge, nur ueber die Dateien verteilt. */


/* Breadcrumbs above page-hero need to switch colors too if rendered
   ON TOP of dark hero. The .breadcrumbs default is light; we leave
   that as-is since Breadcrumbs.astro is structurally OUTSIDE the
   .page-hero section. */

/* ----------------------------------------------------------------
   CTA band + newsletter (landing)
   ---------------------------------------------------------------- */
.cta-band h2 {
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0 0 0.5rem;
}

.cta-band p {
  max-width: var(--wd-web-measure);
  margin: 0 auto 1.25rem;
}

.cta-band .btn-primary { background: #fff; color: var(--slate-900); border-color: #fff; }

.cta-band .btn-primary:hover { background: var(--slate-50); }

.cta-band .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); }

.cta-band .btn-secondary:hover { background: rgba(255,255,255,0.08); border-color: #fff; }


/* ---- CTA Band ---- */
.cta-band {
  padding: var(--spacing-2xl) 0; background: linear-gradient(135deg, #1E3A8A 0%, #4338CA 100%); color: white;
  text-align: center;
}

.cta-band h2 { color: white; font-size: var(--fs-h2); margin-bottom: 0.5rem; }

.cta-band p { color: rgba(255,255,255,0.88); margin-bottom: 1.5rem; }

.cta-band-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }


/* CTA-band: slightly more elegant rounded edges + spacing */
.cta-band {
  border-radius: 0;
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}


.newsletter-form { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.newsletter-form input[type="email"] {
  flex: 1 1 240px; max-width: 320px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-btn);
  font-size: var(--wd-web-text-base); color: var(--slate-900); background: #fff;
}
.newsletter-form input[type="email"]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }

/* ----------------------------------------------------------------
   Scroll reveal
   ---------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
  will-change: opacity, transform;
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}
/* ---- pricing -------------------------------------------------
   Zusammengefuehrt aus 01-base (13), 02-redesign (34), 03-seo-extensions (4), 04-additions (12).
   Reihenfolge unveraendert; die Regeln standen vorher in genau dieser
   Abfolge, nur ueber die Dateien verteilt. */


/* ===================================
   Pricing Section
   =================================== */

.pricing {
    background: var(--gray-50);
}


/* Das Preisraster füllt den Container. Die alte Kappung auf 1100px mit
   margin:auto rückte die Karten 26px nach innen — die erste Karte stand
   damit weder auf der Kante des H1 darüber noch auf der der Fusszeile
   darunter. */
.pricing-card {
    transition: var(--transition);
}


.pricing-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-xl);
    transform: translateY(-4px);
}


.pricing-badge {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}


.pricing-header {
    text-align: center;
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: var(--spacing-lg);
}


.pricing-name {
    margin-bottom: var(--spacing-sm);
}


.pricing-price {
    justify-content: center;
}


.pricing-description {
    margin-bottom: var(--spacing-sm);
}


.pricing-ideal {
    background: var(--gray-50);
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
}


.pricing-features {
    margin-bottom: var(--spacing-lg);
}


.pricing-features li > div {
    flex: 1;
}


.pricing-features li strong {
    display: block;
    color: var(--gray-900);
    margin-bottom: 2px;
}


/* ===================================
   Footer

   Die Fusszeile stand bis hierher in drei Dateien gleichzeitig: hier der
   Block aus der Zeit vor dem Redesign, in 02-redesign.css der heutige
   dunkle Entwurf, in 03-seo-extensions.css noch ein paar Nachträge. Die
   alten Regeln waren nicht tot, sie wirkten mit -- und zwar falsch:

     · `.footer-column a { margin-bottom: 1rem }` addierte sich zur
       Rasterlücke von 0.65rem aus dem Redesign. Jeder Verweis trug also
       26.4px Abstand statt der entworfenen 10.4px. Auf 390px wurde die
       Fusszeile dadurch 1904px hoch -- mehr als zwei Bildschirme.
     · `.footer-content { margin-bottom: 4rem; border-bottom: 1px … }`
       zog eine zweite Haarlinie 64px über die `.footer-divider` des
       Redesigns. Zwei Trennlinien mit Leerraum dazwischen.
     · `.footer-column h4` traf nie etwas -- das Markup nutzte h3 und
       seit der Ueberschriftenpruefung h2.

   Der Block ist deshalb ersatzlos weg. Die Fusszeile wird ab jetzt an
   genau einer Stelle definiert: 02-redesign.css.
   =================================== */

/* ===================================
   Responsive Design
   =================================== */

@media (max-width: 1024px) {

    .pricing-grid {
        grid-template-columns: 1fr;
        /* Kein zweites Polster: die Rinne kommt vom .container. Die
           zusätzlichen 24px machten die Karten auf Tablets schmaler als
           jede Überschrift daneben. */
    }

}


/* ----------------------------------------------------------------
   Trust Bar — dark full-width band, sits flush under the dark hero.
   Three-line item: big white value, white label, small sub-label.
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   Features — new card design
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   Pricing — redesigned
   ---------------------------------------------------------------- */
.pricing { padding: 5rem 0; }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}

.pricing-card {
  background: #fff;
  border: 1px solid var(--slate-100);
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: none;
}

/* Featured tier = dark card with white text (per design spec).
   IMPORTANT: keep this block AFTER the .pricing-features base rules
   below — equal-specificity selectors (e.g. `.pricing-card-featured
   .pricing-features .feature-included` vs `.pricing-features
   .feature-included`) tie at (0,3,0), so source order decides which
   wins. We had a regression where the Light tier's feature labels
   inherited slate-800 (dark) on a slate-900 background and rendered
   invisible. Order here is now: base rules first (lines below), then
   the featured override (also moved below) — see end of file. */
.pricing-card-featured {
  background: var(--slate-900);
  border-color: var(--slate-900);
  color: #fff;
  box-shadow: 0 30px 60px -30px rgba(15,23,42,0.45);
}


.pricing-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  /* Dunkleres Gruen fuer WCAG AA gegen weisse Schrift; die Begruendung
     steht bei --success-text in 01-base.css. */
  background: var(--success-text);
  color: #fff;
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  font-size: var(--wd-web-text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 6px 14px -4px rgba(22,163,74,0.45);
  white-space: nowrap;
}

.pricing-name {
  font-size: var(--wd-web-text-lg); font-weight: 700; color: var(--slate-900); margin: 0 0 0.5rem;
}

.pricing-price { display: flex; align-items: baseline; gap: 0.25rem; margin-bottom: 0.5rem; }

.pricing-description { font-size: var(--wd-web-text-sm); color: var(--slate-600); margin: 0 0 0.5rem; }

.pricing-ideal {
  margin: 0 0 1rem;
}

.pricing-features {
  list-style: none; padding: 0; margin: 0.5rem 0 1.5rem;
  display: flex; flex-direction: column; gap: 0.55rem;
}

.pricing-features li {
  font-size: var(--wd-web-text-sm);
  color: var(--slate-700);
  line-height: var(--wd-leading-body);
}

.pricing-features .feature-included { color: var(--slate-800); }

.pricing-features .feature-excluded { color: var(--slate-400); text-decoration: line-through; text-decoration-color: var(--slate-300); }

.pricing-features li svg { flex: 0 0 auto; margin-top: 2px; }

.pricing-features .feature-included svg { color: var(--success); }

.pricing-features .feature-excluded svg { color: var(--slate-300); }

.pricing-features .feature-label { display: inline; }

.pricing-features li strong { font-weight: 600; }

.pricing-features .feature-sub { font-weight: 400; color: var(--slate-500); }

.pricing-card .btn-block { margin-top: auto; }


/* Featured-card colour overrides — MUST come after the .pricing-features
   base rules above. Equal specificity ((0,3,0)) means whichever appears
   later wins, and the base "feature-included → slate-800" rule was
   nuking our white text on the dark Light card. */
.pricing-card-featured .pricing-name,
.pricing-card-featured .price-amount { color: #fff; }

.pricing-card-featured .price-currency,
.pricing-card-featured .price-period,
.pricing-card-featured .pricing-description,
.pricing-card-featured .pricing-ideal { color: var(--slate-300); }

.pricing-card-featured .pricing-ideal strong { color: #fff; }

/* style.css line ~1476 paints `.pricing-ideal` with a LIGHT bg
   (var(--gray-50)) — fine on Free / Pro (light cards), invisible on
   featured (dark card) where the white text on light bg vanishes.
   Re-tint the bg to a translucent white that lifts gently above the
   slate-900 card surface without losing the text. */
.pricing-card-featured .pricing-ideal { background: rgba(255,255,255,0.06); }

.pricing-card-featured .pricing-features li { color: var(--slate-200); }

.pricing-card-featured .pricing-features .feature-included { color: #fff; }

.pricing-card-featured .pricing-features .feature-sub { color: var(--slate-400); }

/* slate-500 on the dark featured card scored ~3.2:1 (WCAG AA needs
   4.5:1). slate-300 (var(--slate-300)) on slate-900 scores ~10.5:1. */
.pricing-card-featured .pricing-features .feature-excluded { color: var(--slate-300); text-decoration-color: var(--slate-500); }

.pricing-card-featured .pricing-features .feature-excluded svg { color: var(--slate-400); }

/* style.css carries `.pricing-features li strong { color: var(--gray-900); }`
   which targets the <strong> element directly. Inheritance from the <li>'s
   color doesn't beat a direct rule, so on the featured (dark) card the
   strong text rendered slate-900 on slate-900 = invisible. We restore
   visibility by re-asserting `color: inherit` on strong inside featured —
   the parent <li> already has the right white/grey from the rules above
   (white for included, slate-500 for excluded), and inherit pulls that
   down without us having to duplicate the colour fork twice. */
.pricing-card-featured .pricing-features li strong { color: inherit; }

.pricing-card-featured .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.35); }

.pricing-card-featured .btn-secondary:hover { background: rgba(255,255,255,0.08); border-color: #fff; }


.pricing-addons-grid {
  max-width: 760px;
  margin: 0 auto;
}


/* ----------------------------------------------------------------
   Mobile-specific overrides
   ---------------------------------------------------------------- */
@media (max-width: 960px) {
  /* When the hero grid collapses to a single column, the p2p animation
     would inherit justify-self:end from the desktop rule and stick to
     the right edge of the container. Re-center it here so the cards
     sit visually under the headline / CTAs. */

  .pricing-grid { grid-template-columns: 1fr; }
}


/* ---- Pricing addons + billing-dl ---- */
.pricing-addons { padding: var(--spacing-2xl) 0; background: var(--gray-50); }

.pricing-addons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.pricing-ideal { font-size: var(--wd-web-text-sm); color: var(--gray-600); margin-top: 0.5rem; }


/* ---- Footer additions ----

   Ersatzlos entfernt. Diese Datei wird nach 02-redesign.css geladen und
   hat den Sprachumschalter des Redesigns überstimmt: `.footer-lang a`
   setzte `padding: 0 0.35rem` und schlug damit die 4px/8px der
   `.footer-lang-link`. Die Sprachknöpfe waren dadurch 19px hoch --
   deutlich unter jedem brauchbaren Tippziel. `.footer-column a {
   display: block }` hätte zusätzlich die Telefonansicht blockiert, in
   der die Verweise als Flex-Zeile eine Mindesthöhe tragen.
   Die Fusszeile steht jetzt vollständig in 02-redesign.css. */

/* ---- Pricing features pills that are just <li><svg/>text</li> without wrapper div ---- */
.pricing-features li { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.4rem 0; }


/* ----------------------------------------------------------------
   Visual polish — addresses "klotzig und eckig" feedback.
   The legacy CSS aims for design tokens but a few cards/sections
   shipped with sharp edges and tight gaps. These overrides soften
   the visual rhythm without touching the legacy CSS files (which
   we plan to retire as Astro grows).
   ---------------------------------------------------------------- */

/* Card-shaped surfaces: bigger radius, generous interior, softer shadow */
.pricing-card {
  border-radius: 16px;
}


/* Pricing cards: bigger radius, generous interior, separation from CTA */
.pricing-card {
  padding: 2.25rem 2rem 2rem;
  border-radius: 18px;
}

.pricing-card .pricing-features {
  margin-bottom: 1.75rem;
}

.pricing-card .pricing-features li {
  padding: 0.625rem 0;
}

.pricing-card .pricing-features li + li {
  border-top: 1px solid var(--slate-100, var(--slate-100));
}

.pricing-card-featured .pricing-features li + li {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.pricing-card .pricing-header {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--slate-100, var(--slate-100));
  margin-bottom: 1.5rem;
}

.pricing-card-featured .pricing-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}


/* Add-on cards under pricing */
.pricing-addons-grid {
  gap: 1.25rem;
}
.pricing {
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
}
.pricing-addons {
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
}
@media (max-width: 768px) {
  .pricing {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
  .pricing-addons {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

@media (max-width: 960px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-card-featured { grid-column: span 2; }
}
/* ---- key -------------------------------------------------
   Zusammengefuehrt aus 02-redesign (7), 04-additions (1).
   Reihenfolge unveraendert; die Regeln standen vorher in genau dieser
   Abfolge, nur ueber die Dateien verteilt. */


/* Key differences */
.key-diffs { padding: 3rem 0 5rem; background: #fff; }

.key-diffs-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}

.key-diff-card {
  background: var(--surface-subtle);
  border: 1px solid var(--slate-100);
  border-radius: var(--radius-card);
  padding: 1.5rem;
}

.key-diff-num {
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-sm);
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  display: block;
}

/* :is(h2, h3), nicht nur h3: die Kartenueberschrift richtet sich seit der
   Ueberschriftenpruefung danach, ob ihr Block eine eigene <h2> traegt. Ohne
   Blockueberschrift sind die Karten selbst die oberste Ebene unter der
   Seiten-<h1> und rendern als h2. */
.key-diff-card :is(h2, h3) { font-size: var(--wd-web-text-lg); color: var(--slate-900); margin: 0 0 0.5rem; font-weight: 600; }

.key-diff-card p { font-size: var(--wd-web-text-sm); color: var(--slate-600); line-height: var(--wd-leading-body); margin: 0; }
@media (max-width: 960px) {
  .key-diffs-grid { grid-template-columns: 1fr; gap: 1rem; }
}
.key-diff-card {
  border-radius: 16px;
}

@media (max-width: 720px) {
  /* Nur noch die Laufweite: die Stufe kommt aus --fs-hero. */

  .section-title { letter-spacing: var(--ls-h2-mobile); }
}
/* ---- page -------------------------------------------------
   Zusammengefuehrt aus 02-redesign (11), 03-seo-extensions (2), 04-additions (3).
   Reihenfolge unveraendert; die Regeln standen vorher in genau dieser
   Abfolge, nur ueber die Dateien verteilt. */


/* ----------------------------------------------------------------
   Page hero (sub-pages) — BOLD dark redesign matching landing.
   Same deep-blue gradient + white headline as .hero so /mac, /linux,
   /pi, /blog, /faq, /preise etc. carry the same brand weight.
   ---------------------------------------------------------------- */
.page-hero {
  padding: 4rem 0 3rem;
  background:
    radial-gradient(720px 360px at 80% 20%, rgba(37, 99, 235, 0.2), transparent 70%),
    linear-gradient(180deg, var(--slate-900) 0%, #060a17 100%);
  color: var(--slate-200);
  border-bottom: 0;
  position: relative;
}

.page-hero h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  color: #ffffff;
  margin: 0.5rem 0 0.75rem;
}

.page-hero .eyebrow,
.page-hero .hero-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-light);
  margin-bottom: 0.5rem;
}

.page-hero .lead {
  color: var(--slate-300);
}

/* :not(.btn) ist tragend, nicht kosmetisch.
   
   Diese beiden Regeln faerben Textlinks im dunklen Seitenkopf. Ohne die
   Ausnahme trafen sie auch die Schaltflaechen darin -- und weil
   `.page-hero a:hover` dieselbe Spezifitaet hat wie
   `.cta-band .btn-primary` (beide 0,2,0), aber spaeter in der Datei steht,
   gewann sie beim Ueberfahren: weisse Schrift auf hellem Grund, 1.1:1, auf
   17 Seiten. Der Knopf verschwand unter dem Mauszeiger.
   
   Gefunden hat es die Kontrastpruefung, als sie um erzwungene
   Hover-Zustaende erweitert wurde -- im Ruhezustand ist der Knopf
   einwandfrei. */
.page-hero a:not(.btn) {
  color: #93c5fd;
  text-decoration: underline;
  text-decoration-color: rgba(96, 165, 250, 0.4);
}

.page-hero a:not(.btn):hover { color: #ffffff; text-decoration-color: #93c5fd; }


/* Page-hero CTAs inverted like landing hero */
.page-hero .btn-primary {
  background: #ffffff;
  color: var(--slate-900);
  border-color: #ffffff;
}

.page-hero .btn-primary:hover {
  background: var(--slate-100);
  border-color: var(--slate-100);
}

.page-hero .btn-secondary {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.page-hero .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(148, 163, 184, 0.6);
}
@media (max-width: 720px) {
  .page-hero h1 { letter-spacing: -0.7px; }
}


/* ---- Page hero (sub-pages): structural rules only.
   Colors + background live in 02-redesign.css (.page-hero block,
   bold dark redesign matching landing hero). Keep .hero-actions
   layout + .hero-sub muted caption here so they aren't redefined
   downstream. */
.page-hero .hero-actions { margin-top: 1.5rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }


/* ---- Responsive tweaks ---- */
@media (max-width: 720px) {
  .page-hero .lead { font-size: var(--wd-web-text-md); }
}


/* Page-hero: structural padding/typography only. Color tokens live
   in 02-redesign.css for the bold dark redesign. */
.page-hero {
  padding-top: 4.5rem;
  padding-bottom: 3rem;
}

.page-hero h1 {
  letter-spacing: -1.5px;
  line-height: var(--wd-leading-display);
}

.page-hero .lead {
  margin-top: 0.75rem;
  font-size: var(--wd-web-text-md);
  line-height: var(--wd-leading-body);
  max-width: var(--wd-web-measure);
}

@media (max-width: 720px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card-featured { grid-column: auto; }
  .blog-card-featured .blog-cover { height: 200px; }
}
@media (max-width: 720px) {
  .cell-badge { width: 24px; height: 24px; }
}

/* ----------------------------------------------------------------
   Mobile navigation drawer (<=960px)

   Stacks .nav-links above .nav-actions in a single full-width drawer
   below the navbar, instead of the old style.css behaviour where both
   used position:absolute at top:100% and overlapped each other (which
   caused the Login/Register bars to hide the real nav links).
   ---------------------------------------------------------------- */



/* ===== 03-seo-extensions.css ===== */


/* ---- Breadcrumbs ---- */
.breadcrumbs { background: var(--gray-50); border-bottom: 1px solid var(--gray-200); padding: 0.6rem 0; font-size: var(--wd-web-text-sm); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0; margin: 0; align-items: center; }
.breadcrumbs li { color: var(--gray-600); }
.breadcrumbs a { color: var(--gray-700); text-decoration: none; }
.breadcrumbs a:hover { color: var(--primary); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--gray-900); font-weight: 600; }
.breadcrumb-sep { color: var(--gray-400); }
/* ---- faq -------------------------------------------------
   Zusammengefuehrt aus 03-seo-extensions (14), 04-additions (1).
   Reihenfolge unveraendert; die Regeln standen vorher in genau dieser
   Abfolge, nur ueber die Dateien verteilt. */
/* ---- faq -------------------------------------------------
   Zusammengefuehrt aus 03-seo-extensions (9), 04-additions (5).
   Reihenfolge unveraendert; die Regeln standen vorher in genau dieser
   Abfolge, nur ueber die Dateien verteilt. */


/* ---- FAQ sections + TOC ---- */
.faq-section { padding: var(--spacing-2xl) 0; }

/* Die Liste füllt die Bahn ihres Abschnitts.
 *
 * Vorher stand hier eine Kappung auf --wd-measure (860px). Die Absicht war
 * richtig — eine Textzeile über die ganze Rasterbreite liest sich schlecht —,
 * das Mittel war es nicht: der FAQ-Block sprang dadurch 192px gegenüber den
 * Karten unmittelbar darüber ein, und weil .faq-answer nochmals auf 640px
 * kappte, entstand eine Treppe aus vier Breiten in einem einzigen Abschnitt
 * (1152 -> 1052 -> 860 -> 640). Das war der Grund, warum die Seiten unruhig
 * wirkten und Text mitten in seiner eigenen Karte umbrach.
 *
 * Die Zeilenlänge wird jetzt über die Spaltenzahl geregelt statt über einen
 * immer engeren Kasten: zwei Spalten, sobald Platz für zwei ist. Bei 1152px
 * Bahn ergibt das rund 570px je Spalte — dieselbe angenehme Zeilenlänge wie
 * vorher, aber ohne dass der Block aus der Flucht fällt.
 */
.faq-list {
  margin: var(--spacing-lg) 0 0;
}

.faq-item {
  overflow: hidden;
}

.faq-question {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.faq-question::-webkit-details-marker { display: none; }

.faq-question svg { transition: transform 0.2s ease; flex: 0 0 auto; color: var(--gray-500); }

.faq-item[open] .faq-question svg { transform: rotate(180deg); color: var(--primary); }

.faq-answer p { margin-bottom: 0.5rem; }

.faq-answer a { color: var(--primary); }


/* Trust bar: a hair more vertical room so the dark band reads as a
   distinct, calm strip rather than a tight bar */

/* FAQ items: more vertical separation */
.faq-list {
  display: grid;
  /* min(420px, 100%) statt 420px: ohne das kann die Spalte auf einem 390px
     breiten Telefon nicht unter ihre Untergrenze schrumpfen, und die Liste
     schiebt die ganze Seite 54px ueber den rechten Rand hinaus. */
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  align-items: start;   /* jede Karte so hoch wie ihr Inhalt, nicht wie die Nachbarin */
  gap: 0.625rem;
}

/* Bei ungerader Anzahl bliebe unten rechts ein Loch. Das trifft keine
   Ausnahme: 69 der Seiten mit FAQ haben eine ungerade Zahl an Fragen, allein
   28 davon genau drei. Der letzte Eintrag nimmt deshalb beide Spalten — die
   Liste schliesst mit einer geraden Kante ab.

   Seine Antwort behaelt dabei die Zeilenlaenge der uebrigen: ueber die ganze
   Bahn gelesen waere sie doppelt so lang wie die der Karte daneben, und genau
   solche Spruenge sollen hier ja verschwinden. */
.faq-item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.faq-item:last-child:nth-child(odd) .faq-answer {
  max-width: 68ch;
}

.faq-item {
  border-radius: 12px;
  border: 1px solid var(--slate-100, var(--slate-100));
  background: #fff;
}

.faq-item[open] {
  border-color: var(--slate-200, var(--slate-200));
  box-shadow: 0 8px 20px -12px rgba(15, 23, 42, 0.08);
}

.faq-question {
  padding: 1.125rem 1.25rem;
}

.faq-answer {
  padding: 0 1.25rem 1.25rem;
  color: var(--slate-600, var(--slate-600));
  line-height: var(--wd-leading-body);
}
/* Keine zweite Kappung: die Karte begrenzt die Zeile bereits. Vorher endete
   der Antworttext 220px vor dem rechten Rand seiner eigenen Karte, waehrend
   die Frage darueber bis zur Kante lief — in derselben Karte zwei Breiten. */

.read-more { color: var(--primary); font-weight: 600; font-size: var(--wd-web-text-sm); text-decoration: none; margin-top: auto; }
.read-more:hover { text-decoration: underline; }
/* ---- legal -------------------------------------------------
   Zusammengefuehrt aus 03-seo-extensions (5), 04-additions (3).
   Reihenfolge unveraendert; die Regeln standen vorher in genau dieser
   Abfolge, nur ueber die Dateien verteilt. */

.legal-content { padding: var(--spacing-lg) 0 var(--spacing-3xl); }

.legal-section { margin-bottom: var(--spacing-xl); }

.legal-section h2 { font-size: var(--fs-h2); margin-bottom: 0.75rem; color: var(--gray-900); }

.legal-section p, .legal-section li { color: var(--gray-800); line-height: var(--wd-leading-body); margin-bottom: 0.75rem; }

.legal-section address { font-style: normal; color: var(--gray-800); line-height: var(--wd-leading-body); }


/* --------------------------------------------------------------------------
   DIE ZEILENLÄNGE — ein Mass für Fliesstext

   Gemessen über zwölf Seiten bei 1440px hatte die Site 28 verschiedene
   Absatzbreiten. Die längste kam aus .container-narrow: 860px Aussenmass
   minus Rinne sind 812px Textbreite, bei 16px Grundtext rund 115 Zeichen
   pro Zeile. Lesbar ist etwa die Hälfte — ab ~75 Zeichen findet das Auge
   den Zeilenanfang nicht mehr zuverlässig wieder.

   Wichtig: das Mass ist KEIN zweites Raster. Das Raster (--wd-container,
   --wd-gutter) bleibt, wo es ist, und die linke Kante ändert sich durch
   diese Regeln nirgends. Begrenzt wird nur nach rechts, und nur bei
   Absätzen — Überschriften, Tabellen, Codeblöcke und Kartenraster
   behalten die Breite ihres Containers. Sonst stünde eine Tabelle
   plötzlich schmaler als die Überschrift darüber.

   Zwei Stufen, mehr braucht es nicht:
     --wd-web-measure       640  laufender Text
     --wd-web-measure-wide  832  Karten, Tabellen, mehrspaltige Listen
   -------------------------------------------------------------------------- */
.legal-section p {
  max-width: var(--wd-web-measure);
}
.legal-section li {
  max-width: var(--wd-web-measure);
}
.legal-section address {
  max-width: var(--wd-web-measure);
}

/* ---- billing -------------------------------------------------
   Zusammengefuehrt aus 03-seo-extensions (5), 04-additions (2).
   Reihenfolge unveraendert; die Regeln standen vorher in genau dieser
   Abfolge, nur ueber die Dateien verteilt. */


.billing-info { padding: var(--spacing-2xl) 0; }

.billing-dl { display: grid; grid-template-columns: 1fr 2fr; gap: 0.5rem 1.5rem; max-width: var(--wd-web-measure-wide); }

.billing-dl dt { font-weight: 600; color: var(--gray-900); }

.billing-dl dd { margin: 0; color: var(--gray-700); }
@media (max-width: 720px) {
  .billing-dl { grid-template-columns: 1fr; gap: 0.25rem; }
  .billing-dl dd { margin-bottom: 0.75rem; }
}
.billing-info {
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
}
@media (max-width: 768px) {
  .billing-info {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

/* ---- comparison -------------------------------------------------
   Zusammengefuehrt aus 02-redesign (12), 03-seo-extensions (20), 04-additions (3).
   Reihenfolge unveraendert; die Regeln standen vorher in genau dieser
   Abfolge, nur ueber die Dateien verteilt. */


/* ----------------------------------------------------------------
   Comparison table — redesign (3 cols, round badges, WinDesk highlighted)
   ---------------------------------------------------------------- */
.comparison-table thead th {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--slate-100);
  font-size: var(--wd-web-text-sm);
}

.comparison-table thead .col-windesk {
  position: relative;
  border-bottom: 2px solid var(--primary);
}

.comparison-table tbody .col-windesk {
  background: #EFF6FF;
  border-left: 2px solid var(--primary);
  border-right: 2px solid var(--primary);
}

.comparison-table tbody tr:last-child .col-windesk { border-bottom: 2px solid var(--primary); border-radius: 0 0 8px 8px; }


.comparison-table .table-group-row th {
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--slate-100);
  padding: 0.8rem 1rem;
}


.comparison-legend { background: transparent; padding: 0 0 1rem; }

.comparison-legend .cell-yes,
.comparison-legend .cell-no,
.comparison-legend .cell-partial,
.comparison-legend .cell-unknown {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; margin-right: 4px;
  font-size: var(--wd-web-text-xs);
}

.comparison-legend .cell-yes {
  background: var(--success);
}

.comparison-legend .cell-no {
  background: var(--slate-100);
}

.comparison-legend .cell-partial {
  background: var(--warning-soft);
}

.comparison-legend .cell-unknown {
  background: var(--slate-100);
}
@media (max-width: 720px) {
  .comparison-table { font-size: var(--wd-web-text-sm); }
  .comparison-table th, .comparison-table td { padding: 0.65rem 0.5rem; }
}

/* ---- Comparison teaser on home ---- */
.comparison-teaser { padding: var(--spacing-2xl) 0; }

.comparison-teaser-inner {
  background: linear-gradient(135deg, #1E3A8A 0%, #4338CA 100%);
  color: white;
  text-align: center;
}

.comparison-teaser-inner h2 { color: white; margin-bottom: 0.75rem; }

.comparison-teaser-inner p { color: rgba(255,255,255,0.85); margin-bottom: 1.5rem; }


/* ---- Comparison table ---- */
.comparison-table-section { padding: var(--spacing-2xl) 0; }

.comparison-legend { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1rem; color: var(--gray-700); font-size: var(--wd-web-text-sm); }

.comparison-legend .cell-yes { color: var(--success); font-weight: 700; margin-right: 3px; }

.comparison-legend .cell-no { color: var(--gray-400); font-weight: 700; margin-right: 3px; }

.comparison-legend .cell-partial { color: var(--warning); font-weight: 700; margin-right: 3px; }

.comparison-legend .cell-unknown { color: var(--gray-400); font-weight: 700; margin-right: 3px; }

.comparison-table-scroll { overflow-x: auto; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); }

.comparison-table { width: 100%; border-collapse: collapse; background: white; font-size: var(--wd-web-text-sm); min-width: 720px; }

.comparison-table th, .comparison-table td { padding: 0.85rem 1rem; text-align: center; border-bottom: 1px solid var(--gray-100); }

.comparison-table thead th { background: var(--gray-50); font-weight: 700; color: var(--gray-900); white-space: nowrap; }

.comparison-table th[scope="row"] { text-align: left; font-weight: 500; color: var(--gray-700); background: var(--gray-50); }

.comparison-table .table-group-row th { background: var(--primary); color: white; text-align: left; }

.comparison-table .col-windesk { background: rgba(59,130,246,0.06); font-weight: 700; color: var(--primary-dark); }

.comparison-table thead .col-windesk { background: var(--primary); color: white; }

.comparison-disclaimer { font-size: var(--wd-web-text-sm); color: var(--gray-500); margin-top: 1.5rem; line-height: var(--wd-leading-body); }
@media (max-width: 720px) {
  .comparison-table { font-size: var(--wd-web-text-sm); }
}


/* Section-rhythm: a touch more breathing room between major sections */
.comparison-teaser {
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
}

@media (max-width: 768px) {
  .comparison-teaser {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}


/* Comparison-teaser inner card: more breathing room */
.comparison-teaser-inner {
  border-radius: 18px;
  padding: 2.5rem;
}



/* ===== 04-additions.css ===== */
/* Astro-era additions to the legacy WinDesk styles. Kept separate so
   future ports stay diff-clean. */

/* ----------------------------------------------------------------
   Skip-link for keyboard accessibility
   ---------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary, var(--primary));
  color: #fff;
  padding: 8px 16px;
  z-index: 100;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus {
  top: 0;
}
.features-section {
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
}
@media (max-width: 768px) {
  .features-section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}
/* ---- feature -------------------------------------------------
   Zusammengefuehrt aus 01-base (5), 03-seo-extensions (4), 04-additions (8).
   Reihenfolge unveraendert; die Regeln standen vorher in genau dieser
   Abfolge, nur ueber die Dateien verteilt. */


.feature-detail {
    display: block;
    font-size: var(--wd-web-text-xs);
    color: var(--gray-600);
    line-height: var(--wd-leading-body);
}


.feature-included {
    color: var(--gray-700);
}


.feature-included svg {
    color: var(--success);
    flex-shrink: 0;
}


.feature-excluded {
    color: var(--gray-400);
}


.feature-excluded svg {
    color: var(--gray-300);
    flex-shrink: 0;
}

/* grid columns driven by inline --cols var so build picks a count that avoids
   orphan cards (e.g. 5 items -> 3 cols = 3+2, not 4+1). */
.feature-section-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}

@media (max-width: 960px) { .feature-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 600px) { .feature-section-grid { grid-template-columns: 1fr; } }

.feature-detail :is(h2, h3) {
  margin-bottom: 0.5rem;
}


/* Feature-detail cards: three stacked editorial cues, each kept very
   gentle so the cumulative effect reads as "considered" not "decorated".
   1. Small monospace index 01..NN, top-right corner.
   2. Large faded watermark digit, bottom-right of the card — visual scale
      so each card has a different presence by virtue of its own counter
      value (01 vs 12 look distinctly different at large size).
   3. Hairline below the heading separating it from the body copy.
   No coloured borders, no fills, no glow effects. */
.feature-section-grid {
  counter-reset: feature-card;
  gap: 1.5rem;
  row-gap: 1.75rem;
}

.feature-detail {
  counter-increment: feature-card;
  position: relative;
  overflow: hidden;
  padding: 2rem 1.75rem 1.5rem;
  border-radius: 14px;
  border: 1px solid var(--slate-100, var(--slate-100));
  background: #fff;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-detail:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -14px rgba(15, 23, 42, 0.12);
}

/* Small editorial index, top-right. Brand-blue at full saturation so the
   tag-sized mark reads as a discrete brand element, not as decorative
   grey filler. Size + monospace keep it subtle even at full colour. */
.feature-detail::before {
  content: counter(feature-card, decimal-leading-zero);
  position: absolute;
  top: 1.15rem;
  right: 1.5rem;
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: var(--wd-web-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--primary, var(--primary));
  z-index: 2;
  pointer-events: none;
}

/* Large watermark digit, bottom-right. Blue-100 (#dbeafe) instead of the
   former slate-50: now clearly visible against white, but soft enough to
   stay behind the heading + body copy. The numeral value differs per
   card, so each card carries its own visual presence by virtue of its
   counter (01 vs 12 read distinctly different at this scale). */
.feature-detail::after {
  content: counter(feature-card, decimal-leading-zero);
  position: absolute;
  bottom: -1.5rem;
  right: -0.4rem;
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  /* Bewusst nicht auf der Textleiter: die Ziffer ist hier eine Zeichnung,
     kein Text — ein Wasserzeichen hinter dem Inhalt, das niemand liest.
     Die grösste Stufe der Leiter (56px) ist die Hero-Anzeige; sie hier zu
     nehmen hiesse, das Wasserzeichen so gross wie eine Überschrift zu
     machen. Es steht in einem ::after mit `content`, wird von
     scripts/check-typography.mjs deshalb gar nicht erst gemessen. */
  font-size: 6rem;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: var(--wd-leading-none);
  color: #dbeafe;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.feature-detail > * { position: relative; z-index: 1; }

.feature-detail :is(h2, h3) {
  color: var(--slate-900);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: -0.2px;
  margin: 0 0 0.625rem;
  padding-right: 2.5rem; /* reserve space for the corner index */
  padding-bottom: 0.625rem;
  /* Brand-tinted hairline as a typographic separator between heading and
     body. Same blue-100 as the watermark — keeps the three brand touches
     visually coordinated. */
  border-bottom: 1px solid #dbeafe;
}

.feature-detail p {
  color: var(--slate-600, var(--slate-600));
  line-height: var(--wd-leading-body);
  font-size: var(--wd-web-text-base);
  margin: 0;
}

/* ---- container -------------------------------------------------
   Zusammengefuehrt aus 01-base (1), 03-seo-extensions (1), 04-additions (1).
   Reihenfolge unveraendert; die Regeln standen vorher in genau dieser
   Abfolge, nur ueber die Dateien verteilt. */


/* Der eine Container. Alles andere ist ein Modifikator davon. */
.container {
    max-width: var(--wd-container);
    margin-inline: auto;
    padding-inline: var(--wd-gutter);
}
/* ================================================================
   WinDesk SEO expansion — additional components
   Loaded after style.css. Targets new templates (nav dropdowns,
   breadcrumbs, FAQ, comparison table, blog, legal pages, etc.)
   ================================================================ */

/* Schmales Mass — als Modifikator des einen Rasters, nicht als zweites
   Raster.

   Lange Fliesstextzeilen lesen sich schlecht, deshalb bleibt die
   Begrenzung auf ~860px. Zentriert war sie aber falsch: auf /agb stand
   die Brotkrume bei 144px und alles darunter bei 314px — der Sprung,
   den der Besitzer als "Breadcrumb ist zu weit links" beschrieben hat.
   Zu weit links war nicht die Brotkrume, sondern der Rest zu weit
   rechts.

   Der Block behält deshalb den linken Rasterrand und verkürzt nur nach
   rechts. Der Prozentwert bezieht sich auf das Elternelement (den
   Abschnitt in voller Seitenbreite); unterhalb der Rasterbreite wird er
   0 und der Container verhält sich wie jeder andere. */
.container-narrow {
  max-width: var(--wd-measure);
  margin-inline: max(0px, calc((100% - var(--wd-container)) / 2)) auto;
}


/* Unterseiten packen ihre Kartenraster in .container-narrow. Das schmale
   Mass ist für Fliesstext gedacht; Karten brauchen mehr Platz, sonst
   bleibt rechts zu viel Weissraum. Das stand hier schon — nur auf halbem
   Weg, mit --wd-measure-wide (1100px).

   Halb gelöst war schlechter als gar nicht: die Karten sassen damit auf
   1052px, der FAQ-Abschnitt derselben Seite auf 1152px, und die Kante
   sprang zwischen zwei Abschnitten um 100px. Sichtbar wird so etwas nicht
   als "hier fehlen 100px", sondern als Unruhe über die ganze Seite.

   Karten bekommen deshalb die volle Rasterbreite. Die Zeilenlänge des
   Fliesstextes leidet nicht darunter — der steht in Karten und Spalten,
   nicht über die ganze Bahn.
   :has() wird von allen Evergreen-Browsern seit 2022 unterstützt. */
.container-narrow:has(.feature-section-grid),
.container-narrow:has(.key-diffs-grid) {
  max-width: var(--wd-container);
}

/* ---- glossary -------------------------------------------------
   Zusammengefuehrt aus 02-redesign (4), 04-additions (7).
   Reihenfolge unveraendert; die Regeln standen vorher in genau dieser
   Abfolge, nur ueber die Dateien verteilt. */


/* ----------------------------------------------------------------
   Glossary
   ---------------------------------------------------------------- */
.glossary-toc {
  position: sticky;
  top: 72px;
  z-index: 40;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.65rem 0;
}

.glossary-toc ul {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  list-style: none; padding: 0; margin: 0;
  justify-content: center;
}

.glossary-toc a {
  transition: all 160ms ease-out;
}

.glossary-toc a:hover {
  background: var(--primary);
}


/* Glossary list: breathing room between dt/dd pairs */
.glossary-list dt {
  margin-top: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--slate-900);
  font-size: var(--wd-web-text-base);
}

.glossary-list dt:first-child {
  margin-top: 0;
}

.glossary-list dd {
  margin: 0.375rem 0 0;
  color: var(--slate-600, var(--slate-600));
  line-height: var(--wd-leading-body);
}

.glossary-toc {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-top: 1px solid var(--slate-100, var(--slate-100));
  border-bottom: 1px solid var(--slate-100, var(--slate-100));
  background: var(--slate-50, var(--slate-50));
}

.glossary-toc .container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.glossary-toc a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--slate-200, var(--slate-200));
  background: #fff;
  color: var(--slate-700, var(--slate-700));
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-sm);
  font-weight: 600;
  text-decoration: none;
}

.glossary-toc a:hover {
  border-color: var(--primary, var(--primary));
  color: var(--primary, var(--primary));
}
.glossary-list dd {
  max-width: var(--wd-web-measure);
}
.features-section > .container-narrow > p {
  max-width: var(--wd-web-measure);
}

/* Economics-table on use-case pages */
.economics-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
}
.economics-table th,
.economics-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--slate-100, var(--slate-100));
  text-align: left;
}
.economics-table th {
  font-weight: 500;
  color: var(--slate-700, var(--slate-700));
  width: 60%;
}
.economics-table td {
  color: var(--slate-900);
  font-variant-numeric: tabular-nums;
}
/* ---- contact -------------------------------------------------
   Zusammengefuehrt aus 03-seo-extensions (7), 04-additions (10).
   Reihenfolge unveraendert; die Regeln standen vorher in genau dieser
   Abfolge, nur ueber die Dateien verteilt. */


/* ---- Contact ---- */
.contact-cards { padding: var(--spacing-2xl) 0; }

.contact-card {
  text-align: center;
}

.contact-icon { color: var(--primary); margin-bottom: 0.5rem; display: flex; justify-content: center; }

.contact-card h2 {
  margin-bottom: 0.25rem;
}

.contact-address { padding: var(--spacing-xl) 0; }

.contact-form-section { padding: var(--spacing-2xl) 0; background: var(--gray-50); }

.contact-form {
  max-width: var(--wd-web-measure);
}


/* Contact form polish */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: var(--wd-web-text-sm);
  color: var(--slate-700, var(--slate-700));
  font-weight: 500;
}

.contact-form input,
.contact-form textarea {
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--slate-200, var(--slate-200));
  font-family: inherit;
  font-size: var(--wd-web-text-base);
  color: var(--slate-900);
  background: #fff;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--primary, var(--primary));
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}


/* Contact cards */
.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.contact-card {
  padding: 1.5rem;
  border-radius: 14px;
  border: 1px solid var(--slate-100, var(--slate-100));
  background: #fff;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out;
}

.contact-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary, var(--primary));
  box-shadow: 0 12px 28px -16px rgba(15, 23, 42, 0.12);
}

.contact-card .contact-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--slate-50, var(--slate-50));
  color: var(--primary, var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-card h2 {
  margin: 0;
  font-size: var(--wd-web-text-lg);
  color: var(--slate-900);
}

.contact-card p {
  margin: 0;
  color: var(--slate-600, var(--slate-600));
  font-size: var(--wd-web-text-sm);
}
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--primary, var(--primary));
  margin-bottom: 0.875rem;
}

/* --------------------------------------------------------------------------
   Listenmuster: Häkchenliste und nummerierte Schritte

   Beide standen wortgleich als scoped <style> in zwölf Seiten — dieselben
   44 Zeilen, zwölfmal ausgeliefert. Hier stehen sie einmal. Das spart nicht
   nur Bytes: solange die Regeln in den Seiten lagen, konnten diese Seiten
   nicht auf die gemeinsame Vorlage umgestellt werden, weil Astro scoped CSS
   an die jeweilige Komponente bindet.

   Die Klassennamen kommen ausschliesslich auf diesen Seiten vor, die
   Kaskade ändert sich dadurch nicht.
   -------------------------------------------------------------------------- */
.tldr-list {
  list-style: none;
  margin: 1.5rem 0 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.5rem 1.5rem;
  max-width: var(--wd-web-measure-wide);
}
.tldr-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--wd-web-text-base);
  line-height: var(--wd-leading-body);
}
.tldr-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand-blue, var(--primary));
  font-weight: 700;
}
.numbered-steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}
.numbered-steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: 1rem;
  line-height: var(--wd-leading-body);
}
.numbered-steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--brand-blue, var(--primary));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--wd-web-text-sm);
}

/* ----------------------------------------------------------------
   Prepaid-Guthaben auf der Preisseite

   Nutzt die vorhandenen .addon-card-Bausteine, braucht aber vier
   Spalten statt zwei — .pricing-addons-grid ist auf 760px begrenzt.
   ---------------------------------------------------------------- */

/* Der Satz, der die Erwartung geraderueckt: die Minuten sind reine
   Verbindungszeit, die Bereitstellung kommt dazu. */

/* ----------------------------------------------------------------
   Breite Tabellen auf schmalen Schirmen

   Gemessen auf allen 244 Seiten bei 390px: 18 Seiten schoben das
   Dokument waagerecht über den Bildschirmrand hinaus -- die
   schlimmste um 474px, also mehr als eine ganze Telefonbreite. In
   jedem einzelnen Fall war die Ursache dieselbe: eine Tabelle.

   Die Vergleichstabelle der Seite /vergleich hat dafür längst einen
   Rahmen mit `overflow-x: auto` (.comparison-table-scroll). Die
   Tabellen aus dem Blog kommen dagegen direkt aus Markdown -- bare
   <table>, kein Wrapper, keine Klasse, an die man sich hängen
   könnte. Sieben Spalten "Tool | Hosted | P2P | Schweizer Option |
   ..." brauchen rund 860px und nehmen die ganze Seite mit nach
   rechts.

   `display: block` macht aus der Tabelle einen Kasten, der selber
   scrollen kann; die Zeilen und Zellen behalten dabei ihre
   Tabellenrollen. `-webkit-overflow-scrolling` hält den Schwung auf
   iOS. Das gilt bewusst für jede Breite: auch auf dem Tablet ist eine
   Tabelle mit sieben Spalten breiter als der Textkörper, und
   scrollen ist dort ebenso richtig wie abschneiden falsch.

   Die Tabellen der Wirtschaftlichkeitsrechnung auf den Presseseiten
   (+51px) bekommen dieselbe Behandlung. */
.blog-post-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.economics-table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Der Kasten scrollt nur, wenn sein Inhalt sich nicht kleinrechnen
   lässt -- ohne das hier zieht sich die Tabelle auf die Kastenbreite
   zusammen und bricht jede Zelle in Buchstabenkolonnen um. */
.blog-post-content table > thead {
  min-width: max-content;
}
.blog-post-content table > tbody {
  min-width: max-content;
}
.economics-table > thead {
  min-width: max-content;
}
.economics-table > tbody {
  min-width: max-content;
}


/* ---- Fliesstext auf Inhaltsseiten -----------------------------------
 *
 * Die Leitfaden- und Ratgeberseiten (/fernwartung, /glossar, die
 * Vergleichstexte) sahen aus wie eine Textwand mit einem Loch daneben.
 * Gemessen am 31.08.2026 auf /fernwartung, 1440px:
 *
 *   Ueberschrift  812px breit
 *   Liste         812px breit
 *   Absatz        640px breit      <- im selben Textfluss
 *   Abstaende     h2 0/0, h3 0/0, p 0/0, ul 0/0
 *
 * Zwei Ursachen, beide unscheinbar:
 *
 * 1. Ein globales `* { margin: 0 }` nimmt jedem Element seinen Abstand.
 *    Auf gestalteten Seiten faellt das nicht auf, weil dort Raster- und
 *    Flex-Abstaende die Arbeit machen. Wo Text einfach untereinander
 *    steht, klebt danach alles aneinander — Ueberschrift an Absatz,
 *    Absatz an Liste, ohne eine einzige Atempause.
 *
 * 2. Der Absatz trug zusaetzlich eine eigene Kappung auf --wd-web-measure,
 *    waehrend Ueberschrift und Liste die Spalte fuellten. Drei Kanten
 *    uebereinander, wo eine sein sollte.
 *
 * Beides wird hier fuer den Textfluss geradegezogen — bewusst nur fuer
 * direkte Kinder von .container-narrow. Karten und Raster verschachteln
 * ihren Text tiefer und behalten ihre eigenen Abstaende.
 */
.container-narrow > h2 {
  margin-top: 2.75rem;
  margin-bottom: 0.75rem;
}
.container-narrow > h3 {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}
.container-narrow > h4 {
  margin-top: 1.5rem;
  margin-bottom: 0.375rem;
}
/* Der erste Titel eines Abschnitts braucht keinen Vorlauf — der Abschnitt
   bringt seine eigene Polsterung mit. */
.container-narrow > :is(h2, h3, h4):first-child {
  margin-top: 0;
}
/* Eine Kante fuer den ganzen Textfluss.
 *
 * Die Kappung auf Lesebreite ist richtig — 812px sind bei 16px Grundtext
 * rund 115 Zeichen pro Zeile, und ab etwa 75 findet das Auge den
 * Zeilenanfang nicht mehr zuverlaessig wieder. Falsch war, dass sie nur den
 * Absatz traf: die Ueberschrift darueber lief bis 812px, die Liste darunter
 * ebenso, der Absatz dazwischen endete bei 640px. Drei Kanten in einer
 * Spalte, und die mittlere sah aus wie ein Versehen.
 *
 * Jetzt richten sich alle Textelemente nach derselben Lesebreite. Was
 * wirklich mehr Platz braucht — Tabellen, Kartenraster, Codebloecke —
 * behaelt die volle Breite seines Containers und bricht damit sichtbar
 * bewusst aus, statt zufaellig breiter zu sein. */
.container-narrow > :is(h2, h3, h4, p, ul, ol, blockquote, dl) {
  max-width: var(--wd-web-measure);
}
.container-narrow > p {
  margin-bottom: 1rem;
}
.container-narrow > :is(ul, ol) {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}
.container-narrow > :is(ul, ol) > li {
  margin-bottom: 0.375rem;
}
.container-narrow > :is(ul, ol) > li:last-child {
  margin-bottom: 0;
}
.container-narrow > p:last-child,
.container-narrow > :is(ul, ol):last-child {
  margin-bottom: 0;
}


/* ---- Gegenueberstellung ---------------------------------------------
 *
 * Die Leitfaeden erklaeren viermal dasselbe Muster: zwei Begriffe, die man
 * auseinanderhalten muss. Attended gegen Unattended, Cloud-Relay gegen P2P,
 * Browser gegen Native, permanent gegen portabel.
 *
 * Im Fliesstext stand das als ein Absatz mit zwei fetten Einleitungen, und
 * man musste ihn ganz lesen, um zu merken, dass es ein Vergleich ist. Als
 * zwei Karten nebeneinander ist es auf einen Blick einer — und beide Seiten
 * lassen sich direkt vergleichen, statt sie im Kopf zu behalten.
 *
 * Die Gegenueberstellung darf breiter sein als die Lesebreite: sie ist keine
 * laufende Zeile, sondern zwei kurze Spalten. Genau dafuer ist das breitere
 * Mass da.
 */
.gegenueber {
  display: grid;
  /* min() statt starrer Untergrenze — sonst laeuft das Raster auf schmalen
     Geraeten ueber den Rand (siehe scripts/check-ueberlauf.mjs). */
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1rem;
  margin: 0 0 1.5rem;
  max-width: var(--wd-web-measure-wide);
}

.container-narrow > .gegenueber {
  max-width: var(--wd-web-measure-wide);
}

.gegenueber-teil {
  padding: 1.25rem 1.375rem;
  border: 1px solid var(--slate-100, #f1f5f9);
  border-radius: 12px;
  background: #fff;
}

.gegenueber-titel {
  margin: 0 0 0.5rem;
  font-weight: 700;
  font-size: var(--wd-web-text-base);
  color: var(--slate-900, #0f172a);
  line-height: var(--wd-leading-heading);
}

/* Der Punkt links ist der einzige Schmuck: er markiert die beiden Seiten als
   Paar, ohne dass eine davon wichtiger aussieht. */
.gegenueber-titel::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--primary, #2563eb);
  vertical-align: middle;
}

.gegenueber-teil p:not(.gegenueber-titel) {
  margin: 0;
  color: var(--slate-600, #475569);
  font-size: var(--wd-web-text-sm);
  line-height: var(--wd-leading-body);
}

/* Auf getoenten Abschnitten steht Weiss auf Hellgrau — sonst verschwindet
   die Karte in ihrem Untergrund. */
.gegenueber-teil {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Lange Zeichenfolgen in <code> duerfen umbrechen.
   
   Auf /windesk-erfahrungen steht ein Zertifikats-Fingerprint mit vierzig
   Hex-Zeichen. Er ist 352px breit und passt damit auf einem 360px-Schirm
   nicht in den Textbereich: die Seite bekam einen waagerechten Bildlauf, und
   zwar die ganze Seite, nicht nur die eine Zeile.
   
   `anywhere` statt `break-word`, weil ein Hash keine Wortgrenzen hat, an
   denen sich brechen liesse. Das Kopieren bleibt unberuehrt — der Umbruch
   ist Darstellung, kein Zeichen im Text. */
code {
  overflow-wrap: anywhere;
}


/* ===== 05-vorgabe.css ===== */
/* =====================================================================
   05-vorgabe.css — die Designvorgabe vom 02.09.2026

   Quelle sind die fuenf Seitenvorlagen im Design-Projekt "WinDesk —
   Design-System" (templates/*.dc.html): Startseite-Hero, Feature-Seite,
   Vergleichstabelle, Download-Seite, Fernwartung-Seite. Sie sind als
   Inline-Stile geschrieben; hier stehen dieselben Werte als Regeln auf den
   Klassen, die die Site bereits traegt.

   WAS SICH AENDERT, IN EINEM SATZ: der Seitenkopf wird dunkel und
   bekommt ein Punkteraster, Abschnitte tragen eine Nummer und eine
   auslaufende Linie, Karten einen Verlaufsstrich und eine Anhebung beim
   Ueberfahren, und ueberall, wo etwas technisch ist, steht es in Mono
   mit Laufweite.

   Dieses Blatt kommt NACH den vier Grundblaettern und ueberschreibt sie
   gezielt. Es tut das mit derselben Spezifitaet, nicht mit !important —
   eine Regel, die sich nur mit Gewalt durchsetzt, ist beim naechsten
   Umbau die, die niemand mehr wegbekommt.
   ===================================================================== */


/* ---------------------------------------------------------------
   1 · SEITENKOPF
   Der Radialverlauf ist --wd-canvas-deep aus den Tokens: kein flaches
   Dunkelblau, sondern das Markenelement, das auch Splash und
   Session-Ende der Apps tragen. Darueber ein Punkteraster, das nach
   rechts unten ausblendet, und ein Lichtfleck, der langsam atmet.
   --------------------------------------------------------------- */
.page-hero {
  padding: 5.5rem 0 4.5rem;
  background: var(--wd-canvas-deep);
  color: var(--wd-fg-on-deep, #EDF1F8);
  position: relative;
  overflow: hidden;
}

/* Das Punkteraster. Ein Pseudoelement statt eines zusaetzlichen <div>:
   der Kopf ist in 179 Inhaltsdateien derselbe Block, und Markup dort
   anzufassen hiesse, 179 Dateien anzufassen. */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(110% 80% at 15% 0%, #000, transparent 70%);
          mask-image: radial-gradient(110% 80% at 15% 0%, #000, transparent 70%);
}

/* Der atmende Lichtfleck oben rechts. */
.page-hero::after {
  content: "";
  position: absolute;
  top: -160px;
  right: -80px;
  width: 900px;
  height: 700px;
  pointer-events: none;
  background: radial-gradient(closest-side, var(--wd-canvas-glow, rgba(46, 110, 240, 0.40)), transparent);
  opacity: 0.55;
  animation: wd-puls 7s ease-in-out infinite;
}
@keyframes wd-puls { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.85; } }
@media (prefers-reduced-motion: reduce) { .page-hero::after { animation: none; } }

/* Der Inhalt liegt ueber den beiden Pseudoelementen. */
.page-hero > .container,
.page-hero > .container-narrow { position: relative; z-index: 1; }

.page-hero .eyebrow,
.page-hero .hero-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #60A5FA;
  margin-bottom: 0.875rem;
}

.page-hero h1 {
  margin: 0 0 1.125rem;
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-hero);   /* die Leiter, nicht clamp(): 4xl am Schreibtisch, 3xl am Handy */
  line-height: var(--wd-leading-display);
  letter-spacing: -0.028em;
  color: #fff;
  text-wrap: balance;
}
.page-hero h1 em,
.page-hero h1 .akzent { font-style: normal; color: #60A5FA; }

.page-hero .lead {
  margin: 0;
  max-width: 56ch;
  font-size: var(--wd-web-text-md);
  line-height: var(--wd-leading-body);
  color: #A9B6CE;
  text-wrap: pretty;
}
.page-hero .lead strong { color: #fff; font-weight: 600; }

/* Die Vertrauenspille: "+" in Schweizer Rot, Text daneben. Sie steht ueber
   dem Eyebrow und sagt in einer Zeile, woher das Produkt kommt. */
.hero-pille {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.125rem;
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--wd-web-text-sm);
  color: #C7D2E8;
  -webkit-backdrop-filter: blur(8px) saturate(140%);
          backdrop-filter: blur(8px) saturate(140%);
}
.hero-pille-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: #EF3340;
  color: #fff;
  font-size: var(--wd-web-text-sm);
  font-weight: 700;
  line-height: 1;
}
.hero-pille-punkt {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16A34A;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
}

/* Textlinks im dunklen Kopf — die Regel aus 02-redesign bleibt gueltig,
   nur der Ton ist neu. */
.page-hero a:not(.btn):not(.pricing-route):not(.hero-pille) { color: #93C5FD; }
.page-hero a:not(.btn):not(.pricing-route):not(.hero-pille):hover { color: #fff; }

/* Knoepfe im dunklen Kopf: der erste weiss, der zweite ein Glasrand. */
.page-hero .btn-primary {
  background: #fff;
  color: #0C1526;
  border-color: #fff;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.6);
}
.page-hero .btn-primary:hover { background: #F1F5F9; color: #0C1526; transform: translateY(-1px); }
.page-hero .btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}
.page-hero .btn-secondary:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.34); color: #fff; }

/* Die Vertrauenszeile unter dem Kopf: Mono, gesperrt, gedaempft. */
.hero-fuss {
  position: relative;
  z-index: 1;
  max-width: var(--wd-container);
  margin: 3.5rem auto 0;
  padding: 1.375rem var(--wd-gutter) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  letter-spacing: 0.16em;
  color: #64748B;
}

@media (max-width: 768px) {
  .page-hero { padding: 3.5rem 0 3rem; }
}


/* ---------------------------------------------------------------
   2 · ABSCHNITTSKOPF
   Nummer in Mono und Blau, daneben die Ueberschrift, dann eine Linie,
   die nach rechts auslaeuft. Die Nummer ist dieselbe wie im
   Inhaltsverzeichnis — beide kommen aus derselben Liste.
   --------------------------------------------------------------- */
.abschnitt-kopf {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.625rem;
}
.abschnitt-nr {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-sm);
  color: var(--primary);
}
.abschnitt-kopf > h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--wd-web-text-2xl);
  letter-spacing: -0.028em;
  line-height: var(--wd-leading-heading);
  color: var(--slate-900);
}
.abschnitt-linie {
  flex: 1;
  min-width: 2rem;
  height: 1px;
  background: linear-gradient(90deg, var(--slate-200), transparent);
}
@media (max-width: 600px) {
  .abschnitt-kopf { flex-wrap: wrap; gap: 0.5rem 0.75rem; }
  .abschnitt-linie { flex-basis: 100%; }
}

/* Abschnitte ruecken weiter auseinander: der Rhythmus der Vorlage ist
   96px, nicht 88. */
.features-section { padding-top: 4rem; padding-bottom: 4rem; }
@media (max-width: 768px) { .features-section { padding-top: 3rem; padding-bottom: 3rem; } }


/* ---------------------------------------------------------------
   3 · KARTEN
   Weiss, Rand #EEF2F7, Radius 16, ein Verlaufsstrich oben, die Nummer
   in Mono oben links, Anhebung beim Ueberfahren. Das Wasserzeichen aus
   04-additions faellt weg — die Vorlage kennt es nicht.
   --------------------------------------------------------------- */
.feature-detail,
.key-diff-card {
  position: relative;
  overflow: visible;
  padding: 1.5rem 1.5rem 1.625rem;
  border: 1px solid #EEF2F7;
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
  transition: transform 200ms cubic-bezier(0.215, 0.61, 0.355, 1),
              box-shadow 200ms ease-out,
              border-color 200ms ease-out;
}
.feature-detail:hover,
.key-diff-card:hover {
  transform: translateY(-3px);
  border-color: #DBE3EE;
  box-shadow: 0 24px 44px -26px rgba(15, 23, 42, 0.22);
}

/* Der Verlaufsstrich: 2px, von der Marke ins Nichts, mit 24px Luft
   links und rechts. Ueber ::after, weil ::before die Nummer traegt. */
.feature-detail::after,
.key-diff-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 1.5rem;
  right: 1.5rem;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), transparent);
  /* Das Wasserzeichen aus 04-additions sass ebenfalls auf ::after —
     alles davon zuruecksetzen, sonst steht eine 96px-Ziffer unter dem
     Strich. */
  font-size: 0;
  line-height: 0;
  opacity: 1;
  transform: none;
  color: transparent;
  width: auto;
  bottom: auto;
  pointer-events: none;
}

/* Die Nummer: klein, Mono, oben LINKS (04-additions setzte sie rechts). */
.feature-detail::before {
  position: static;
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--slate-400);
  opacity: 1;
}
.key-diff-num {
  display: block;
  margin-bottom: 0.5rem;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #64748B;
}

.feature-detail :is(h2, h3),
.key-diff-card :is(h2, h3) {
  margin: 0 0 0.625rem;
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--wd-web-text-lg);
  letter-spacing: -0.015em;
  line-height: var(--wd-leading-heading);
  color: var(--slate-900);
}
.feature-detail :is(h2, h3)::after { content: none; }
.feature-detail p,
.key-diff-card p {
  margin: 0;
  font-size: var(--wd-web-text-sm);
  line-height: var(--wd-leading-body);
  color: var(--slate-600);
  text-wrap: pretty;
}
.feature-section-grid,
.key-diffs-grid { gap: 1.125rem; }


/* ---------------------------------------------------------------
   4 · KENNZAHLENBAND
   Vier Zahlen auf dunklem Grund, mit einem Lichtfleck oben links.
   --------------------------------------------------------------- */
.kennzahlen-band {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: var(--wd-canvas-deep-flat, #0C1526);
  color: #fff;
  padding: 2.125rem 2.25rem;
}
.kennzahlen-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(80% 120% at 12% 0%, rgba(46, 110, 240, 0.35), transparent);
}
.kennzahlen-raster {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.625rem;
}
.kennzahl-wert {
  font-family: var(--font-display);
  font-size: var(--wd-web-text-3xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
}
.kennzahl-label {
  margin-top: 0.375rem;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94A3B8;
}


/* ---------------------------------------------------------------
   6 · VERGLEICHSTABELLE
   Klebende Koepfe, Gruppenzeilen auf dunklem Grund, die eigene Spalte
   auf zartem Blau, runde Marken zu 22px. Punktestand und Filter
   stehen im Kopf und werden von vergleich.js gefuellt.
   --------------------------------------------------------------- */
.comparison-table-section .section-header { margin-bottom: 1.125rem; }

.comparison-kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.125rem;
  margin-bottom: 1.125rem;
}
.comparison-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.125rem;
  margin: 0;
  padding: 0;
  font-size: var(--wd-web-text-sm);
  color: var(--slate-600);
}
.comparison-legend > span { display: inline-flex; align-items: center; gap: 0.5rem; }

.comparison-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--slate-200);
  background: #fff;
  font-family: inherit;
  font-size: var(--wd-web-text-sm);
  font-weight: 600;
  color: var(--slate-700);
  cursor: pointer;
  transition: border-color 180ms ease-out, background 180ms ease-out;
}
.comparison-filter:hover { border-color: #BFDBFE; background: #F8FBFF; }
.comparison-filter-marke {
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  color: var(--primary);
}

.comparison-table-scroll {
  border: 1px solid #EEF2F7;
  border-radius: 16px;
  overflow: visible;   /* sonst kleben die Koepfe nicht */
}
.comparison-table { border-collapse: separate; border-spacing: 0; }

.comparison-table thead th {
  position: sticky;
  top: 61px;   /* unter der Navigation */
  z-index: 4;
  padding: 0.875rem 0.625rem;
  background: #fff;
  border-bottom: 1px solid #EEF2F7;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--wd-web-text-base);
  font-weight: 600;
  color: var(--slate-900);
}
.comparison-table thead th:first-child {
  padding: 1.125rem 1.375rem;
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-400);
  border-radius: 16px 0 0 0;
}
.comparison-table thead th:last-child { border-radius: 0 16px 0 0; }
.comparison-table thead .col-windesk {
  /* 03-seo-extensions setzt hier `position: relative` mit hoeherer
     Spezifitaet als `thead th`. Zusammen mit dem `top: 61px` des klebenden
     Kopfes rutschte die WinDesk-Zelle damit 61px nach unten — mitten in die
     erste Gruppenzeile. Sticky muss deshalb HIER stehen, nicht nur oben. */
  position: sticky;
  background: #F3F8FF;
  border-bottom: 1px solid #EEF2F7;
  color: var(--primary-dark);
}
.comparison-punkte {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  font-weight: 500;
  color: var(--slate-400);
}
.col-windesk .comparison-punkte { color: #60A5FA; }

.comparison-table .table-group-row th {
  position: sticky;
  top: calc(61px + 3.75rem);
  z-index: 3;
  padding: 0.6875rem 1.375rem;
  background: var(--wd-canvas-deep-flat, #0C1526);
  border-bottom: 0;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #93C5FD;
  text-align: left;
}

.comparison-table tbody th[scope="row"] {
  padding: 0.9375rem 1.375rem;
  font-size: var(--wd-web-text-sm);
  font-weight: 400;
  color: var(--slate-700);
  border-bottom: 1px solid #F5F8FC;
  transition: color 180ms ease-out;
}
.comparison-table tbody td {
  padding: 0.75rem 0;
  text-align: center;
  border-bottom: 1px solid #F5F8FC;
}
.comparison-table tbody .col-windesk {
  background: #F8FBFF;
  border-left: 0;
  border-right: 0;
}
.comparison-table tbody tr:last-child .col-windesk { border-bottom: 0; border-radius: 0; }
.comparison-table tbody tr:last-child :is(th, td) { border-bottom: 0; }

.cell-badge {
  width: 22px;
  height: 22px;
  font-size: var(--wd-web-text-xs);
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cell-badge.cell-yes { background: #16A34A; color: #fff; }
.cell-badge.cell-no { background: transparent; border: 1.5px solid var(--slate-200); color: var(--slate-300); }
.cell-badge.cell-partial { background: #FEF3C7; color: var(--wd-warning-on-soft, #B45309); }
.cell-badge.cell-unknown { background: transparent; border: 1.5px dashed var(--slate-200); color: var(--slate-400); }

/* Zeilen, die vergleich.js gerade hervorhebt. */
.comparison-table tbody tr.ist-fokus > th,
.comparison-table tbody tr.ist-fokus > td { background: #FBFDFF; }
.comparison-table tbody tr.ist-fokus > th { color: var(--slate-900); font-weight: 500; }
.comparison-table tbody tr.ist-fokus .col-windesk { background: #F3F8FF; }
.comparison-table tbody tr.ist-fokus .cell-badge { transform: scale(1.1); }
.comparison-table tbody tr.ist-fokus .col-windesk .cell-badge { transform: scale(1.22); }
.comparison-table tbody tr:hover > th,
.comparison-table tbody tr:hover > td { background: #F3F8FF; }

@keyframes wd-ring {
  0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45); }
  100% { box-shadow: 0 0 0 12px rgba(22, 163, 74, 0); }
}
/* Die Marken poppen nacheinander, wenn eine Zeile ins Bild kommt. */
@keyframes wd-pop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.cell-badge.ring { animation: wd-ring 900ms ease-out; }

.comparison-disclaimer {
  margin: 1.25rem 0 0;
  font-size: var(--wd-web-text-sm);
  color: var(--slate-400);
}

@media (max-width: 768px) {
  .comparison-table-scroll { overflow-x: auto; border-radius: 12px; }
  .comparison-table thead th,
  .comparison-table .table-group-row th { position: static; }
}


/* ---------------------------------------------------------------
   8 · DEFINITIONSLISTE (Rechtsrahmen, Abrechnung)
   Begriff links gross, Erklaerung rechts, Trennlinien.
   --------------------------------------------------------------- */
.definitionen { display: flex; flex-direction: column; border-bottom: 1px solid var(--slate-200); }
.definition {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 36px;
  padding: 24px 0;
  border-top: 1px solid var(--slate-200);
}
.definition-begriff {
  font-family: var(--font-display);
  font-size: var(--wd-web-text-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--slate-900);
}
.definition-kicker {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}
.definition > p { margin: 0; font-size: var(--wd-web-text-base); line-height: var(--wd-leading-body); color: var(--slate-600); text-wrap: pretty; }
@media (max-width: 600px) { .definition { grid-template-columns: 1fr; gap: 8px; } }


/* ---------------------------------------------------------------
   9 · SCHICHTEN (senkrechte Liste, `variant: list` im steps-Block)
   Von dunkel nach hell: die aeusseren Schichten sind Kryptografie, die
   inneren Organisation — der Verlauf ist die Aussage.
   --------------------------------------------------------------- */
.step-list { gap: 6px; }
.step-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  border-radius: 10px;
  background: #F8FAFC;
  border: 1px solid #EEF2F7;
  color: var(--slate-900);
}
.step-item .step-num {
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  font-weight: 500;
  color: var(--slate-600);
  min-width: 0;
}
.step-item :is(h2, h3) { margin: 0 0 2px; font-size: var(--wd-web-text-base); font-weight: 500; color: inherit; }
.step-item p { margin: 0; font-size: var(--wd-web-text-sm); color: var(--slate-600); }
/* Die ersten vier dunkel, absteigend — NUR in der Schichtenliste (Block
   `schichten`). Auf jede Schrittliste angewandt, stand auf /pi ein <code>
   in Schiefer auf Nachtblau: 2.45:1. */
.step-list-schichten .step-item:nth-child(1) { background: #0C1526; border-color: #0C1526; color: #fff; }
.step-list-schichten .step-item:nth-child(2) { background: #12213C; border-color: #12213C; color: #fff; }
.step-list-schichten .step-item:nth-child(3) { background: #1C3157; border-color: #1C3157; color: #fff; }
.step-list-schichten .step-item:nth-child(4) { background: #2A4574; border-color: #2A4574; color: #fff; }
.step-list-schichten .step-item:nth-child(-n+4) .step-num { color: #93C5FD; }
.step-list-schichten .step-item:nth-child(-n+4) p { color: #CBD5E1; }
.step-list-schichten .step-item:nth-child(5) { background: #DBEAFE; border-color: #DBEAFE; }
.step-list-schichten .step-item:nth-child(5) .step-num { color: var(--primary-dark); }
.step-list-schichten .step-item:nth-child(6) { background: #EFF6FF; border-color: #EFF6FF; }
.step-list-schichten .step-item:nth-child(6) .step-num { color: var(--primary); }


/* ---------------------------------------------------------------
   10 · TECHNISCHE ZEILE (Mono, gesperrt) — fuer Bildunterschriften wie
   "AUSSEN: KRYPTOGRAFIE · INNEN: ORGANISATION".
   --------------------------------------------------------------- */
.mono-zeile {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748B   /* nicht --slate-400: 2.45:1 auf #F8FAFC */;
}


/* ===== komponenten/10-nav.css ===== */
/* 10-nav.css — aus dem <style>-Block von Nav.astro.
 *
 * Einmalig herausgeschnitten beim Rueckbau der Astro-Fassung (war komponentengebunden,
 * die Selektoren tragen deshalb :not(.wd-nie) als Klassenstufe).
 *
 * Ab hier von Hand gepflegt — es gibt keine Quelle mehr, aus der es
 * neu erzeugt werden koennte.
 */
.wnav:not(.wd-nie) {
    position: sticky; top: 0; z-index: 80;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    /* Die Leiste läuft über die volle Breite (Blur + Trennlinie sollen
       das auch), ihr Inhalt sitzt aber auf der Rasterkante: Logo links
       exakt über der Brotkrume und dem H1, die Schaltfläche rechts über
       der Gegenkante. Vorher waren es feste 44px — bei 1440px also 44
       gegenüber 144 im Inhalt, der auffälligste der drei Versätze. */
    padding: 15px var(--wd-rail);
    background: rgba(255,255,255,0.78);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(12,26,60,0.08);
    font-family: var(--font-family);
  }
  .wnav-brand:not(.wd-nie) { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: 0 0 auto; }
  .wnav-brand:not(.wd-nie) svg:not(.wd-nie) { border-radius: 9px; box-shadow: 0 6px 16px rgba(37,99,235,0.28); }
  .wnav-word:not(.wd-nie) { font-family: var(--font-display); font-weight: 700; font-size: var(--wd-web-text-lg); letter-spacing: -0.01em; color: #0C1A3C; }
  .wnav-word:not(.wd-nie) span:not(.wd-nie) { color: #2563EB; }
  .wnav-links:not(.wd-nie) { display: flex; align-items: center; gap: 28px; }
  .wnav-link:not(.wd-nie) { color: #46536E; font-weight: 500; font-size: var(--wd-web-text-sm); text-decoration: none; transition: color .2s; white-space: nowrap; }
  .wnav-link:hover:not(.wd-nie) { color: #0C1A3C; }
  .wnav-actions:not(.wd-nie) { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
  .wnav-lang:not(.wd-nie) { display: flex; gap: 2px; padding: 3px; border: 1px solid rgba(12,26,60,0.1); border-radius: 8px; background: #fff; font-family: var(--font-mono); font-size: var(--wd-web-text-xs); letter-spacing: 0.5px; }
  .wnav-lang-a:not(.wd-nie) { padding: 3px 6px; border-radius: 5px; color: #64708A; text-decoration: none; transition: background .2s, color .2s; }
  .wnav-lang-a:hover:not(.wd-nie) { color: #0C1A3C; }
  .wnav-lang-a.is-active:not(.wd-nie) { background: #2563EB; color: #fff; font-weight: 700; }
  .wnav-login:not(.wd-nie) { color: #46536E; font-weight: 500; font-size: var(--wd-web-text-sm); text-decoration: none; transition: color .2s; }
  .wnav-login:hover:not(.wd-nie) { color: #0C1A3C; }
  .wnav-cta:not(.wd-nie) { display: inline-flex; padding: 9px 18px; background: linear-gradient(135deg,#3B82F6,#1D4ED8); color: #fff; border-radius: 9px; font-size: var(--wd-web-text-sm); font-weight: 600; text-decoration: none; box-shadow: 0 8px 20px rgba(37,99,235,0.26); white-space: nowrap; }
  .wnav-cta:hover:not(.wd-nie) { color: #fff; }
  .wnav-burger:not(.wd-nie) { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
  .wnav-burger:not(.wd-nie) span:not(.wd-nie) { width: 22px; height: 2px; background: #0C1A3C; border-radius: 2px; transition: transform .25s, opacity .25s; }
  .wnav-burger.open:not(.wd-nie) span:nth-child(1):not(.wd-nie) { transform: translateY(7px) rotate(45deg); }
  .wnav-burger.open:not(.wd-nie) span:nth-child(2):not(.wd-nie) { opacity: 0; }
  .wnav-burger.open:not(.wd-nie) span:nth-child(3):not(.wd-nie) { transform: translateY(-7px) rotate(-45deg); }

  .wnav-drawer:not(.wd-nie) { display: none; }
  .wnav-drawer.open:not(.wd-nie) { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 61px; z-index: 79; padding: 14px var(--wd-rail) 22px; background: rgba(255,255,255,0.98); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(12,26,60,0.08); font-family: var(--font-family); }
  .wnav-drawer:not(.wd-nie) a:not(.wd-nie) { color: #0C1A3C; font-weight: 500; font-size: var(--wd-web-text-base); text-decoration: none; padding: 11px 4px; border-bottom: 1px solid rgba(12,26,60,0.05); }
  .wnav-drawer-cta:not(.wd-nie) { color: #fff !important; background: linear-gradient(135deg,#3B82F6,#1D4ED8); border-radius: 10px; text-align: center; margin-top: 8px; border-bottom: none !important; font-weight: 600 !important; }
  .wnav-drawer-lang:not(.wd-nie) { display: flex; gap: 8px; margin-top: 12px; font-family: var(--font-mono); font-size: var(--wd-web-text-sm); }
  .wnav-drawer-lang:not(.wd-nie) a:not(.wd-nie) { padding: 4px 0; border: none; color: #64708A; }
  .wnav-drawer-lang:not(.wd-nie) a.is-active:not(.wd-nie) { color: #2563EB; font-weight: 700; }

  @media (max-width: 1040px) {
    /* Schmale Schirme: nur die Höhe wird knapper, die Rinne bleibt die
       des Rasters (--wd-rail fällt dort ohnehin auf die Rinne zurück). */
    .wnav:not(.wd-nie) { padding-block: 13px; }
    .wnav-links:not(.wd-nie), .wnav-login:not(.wd-nie), .wnav-cta:not(.wd-nie), .wnav-lang:not(.wd-nie) { display: none; }
    .wnav-burger:not(.wd-nie) { display: flex; }
  }


/* ===== komponenten/11-inhaltsverzeichnis.css ===== */
/* 11-inhaltsverzeichnis.css — aus dem <style>-Block von SeitenToc.astro.
 *
 * Einmalig herausgeschnitten beim Rueckbau der Astro-Fassung (war is:global,
 * die Regeln gelten deshalb unveraendert).
 *
 * Ab hier von Hand gepflegt — es gibt keine Quelle mehr, aus der es
 * neu erzeugt werden koennte.
 */
/* Die Buehne umschliesst alle Bloecke und traegt das Verzeichnis, damit es
     ueber die ganze Seitenlaenge kleben kann. Das absolute Element gibt ihm
     die volle Hoehe, das sticky darin die Bewegung — sticky allein wuerde am
     Ende des ersten Abschnitts stehenbleiben. */
  .toc-buehne {
    position: relative;
  }

  .seiten-toc {
    display: none;
  }

  @media (min-width: 1180px) {
    .seiten-toc {
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      /* An der rechten Rasterkante, damit es mit dem uebrigen Raster fluchtet. */
      right: max(var(--wd-gutter), calc((100% - var(--wd-container)) / 2 + var(--wd-gutter)));
      width: 240px;
      pointer-events: none;   /* die Buehne selbst faengt keine Klicks ab */
      z-index: 3;
    }

    .seiten-toc-haft {
      position: sticky;
      top: 96px;
      pointer-events: auto;
      padding-left: 1.25rem;
      border-left: 1px solid var(--wd-border-subtle, #e2e8f0);
    }
  }

  .seiten-toc-titel {
    margin: 0 0 0.75rem;
    font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
    font-size: var(--wd-web-text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wd-fg-secondary, #475569);
  }

  .seiten-toc-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .seiten-toc-liste a {
    display: grid;
    grid-template-columns: 1.75rem 1fr;
    gap: 0.25rem;
    align-items: baseline;
    text-decoration: none;
    font-size: var(--wd-web-text-sm);
    line-height: var(--wd-leading-heading);   /* Stufe der Leiter, kein Zwischenwert */
    color: var(--wd-fg-secondary, #475569);
    transition: color 160ms ease;
  }

  .seiten-toc-nr {
    font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
    font-size: var(--wd-web-text-xs);
    font-weight: 700;
    color: var(--wd-fg-subtle, #94a3b8);
    transition: color 160ms ease;
  }

  .seiten-toc-liste a:hover {
    color: var(--wd-fg-primary, #0b1220);
  }
  .seiten-toc-liste a:hover .seiten-toc-nr {
    color: var(--primary, #2563eb);
  }

  /* Der Abschnitt, in dem gerade gelesen wird. */
  .seiten-toc-liste a[aria-current="true"] {
    color: var(--wd-fg-primary, #0b1220);
    font-weight: 600;
  }
  .seiten-toc-liste a[aria-current="true"] .seiten-toc-nr {
    color: var(--primary, #2563eb);
  }

  /* Ein angesprungener Abschnitt darf nicht unter der Navigationsleiste
     landen. */
  [data-toc-abschnitt] {
    scroll-margin-top: 88px;
  }


/* ===== komponenten/12-wechselangebot.css ===== */
/* 12-wechselangebot.css — aus dem <style>-Block von SwitchOffer.astro.
 *
 * Einmalig herausgeschnitten beim Rueckbau der Astro-Fassung (war komponentengebunden,
 * die Selektoren tragen deshalb :not(.wd-nie) als Klassenstufe).
 *
 * Ab hier von Hand gepflegt — es gibt keine Quelle mehr, aus der es
 * neu erzeugt werden koennte.
 */
.switch-offer:not(.wd-nie) {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    color: #fff;
    padding: 2.5rem 0;
  }
  .switch-offer:not(.wd-nie) .container:not(.wd-nie) {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .switch-offer-badge:not(.wd-nie) {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: var(--wd-web-text-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    margin-bottom: 0.75rem;
  }
  .switch-offer-body:not(.wd-nie) { flex: 1 1 22rem; }
  .switch-offer:not(.wd-nie) h2:not(.wd-nie) { color: #fff; margin: 0 0 0.4rem; font-size: var(--fs-h2); }
  .switch-offer:not(.wd-nie) p:not(.wd-nie) { color: rgba(255, 255, 255, 0.9); margin: 0; max-width: var(--wd-web-measure); }
  .switch-offer:not(.wd-nie) .btn-primary:not(.wd-nie) {
    background: #fff;
    color: #1e40af;
    white-space: nowrap;
  }
  .switch-offer:not(.wd-nie) .btn-primary:hover:not(.wd-nie) { background: #f1f5f9; }
  @media (max-width: 640px) {
    .switch-offer:not(.wd-nie) .container:not(.wd-nie) { flex-direction: column; align-items: flex-start; }
  }


/* ===== komponenten/14-preise.css ===== */
/* 14-preise.css — aus dem <style>-Block von PricingPage.astro.
 *
 * Einmalig herausgeschnitten beim Rueckbau der Astro-Fassung (war is:global,
 * die Regeln gelten deshalb unveraendert).
 *
 * Ab hier von Hand gepflegt — es gibt keine Quelle mehr, aus der es
 * neu erzeugt werden koennte.
 */
/* ----------------------------------------------------------------
     Preisseite — nur, was der Umbau neu braucht.

     Die Regeln stehen hier und nicht in src/styles/, weil dort parallel
     das Container-System vereinheitlicht wird; jede Zeile, die ich dort
     hineinschriebe, waere ein Konflikt in fremder Arbeit. Sie sind
     deshalb eng benannt und fassen von den bestehenden Klassen genau
     eine an: .pricing-grid, und die nur unter .pricing-compare.
     ---------------------------------------------------------------- */

  /* --- Wegweiser im Hero: die einzige Stelle, die auf 390x844 ohne
         Scrollen sagt, dass es einen Weg ohne Abo gibt. --- */
  .pricing-routes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1.5rem;
    max-width: var(--wd-web-measure-wide);
  }
  /* .page-hero faerbt und unterstreicht jedes <a> — die Kacheln sind
     Flaechen, keine Fliesstext-Links, und muessen das zuruecknehmen.
     Zwei Klassen schlagen die eine Klasse plus Typ des Hero-Selektors. */
  .page-hero .pricing-route {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.45);
    color: #e2e8f0;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease;
  }
  .page-hero .pricing-route:hover,
  .page-hero .pricing-route:focus-visible {
    border-color: #60a5fa;
    background: rgba(37, 99, 235, 0.2);
    color: #fff;
  }
  .pricing-route .route-label {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--wd-web-text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #93c5fd;
  }
  /* Der Weg ohne Abo bekommt eine eigene Farbe: gleiche Form, sichtbar
     andere Sache — sonst liest sich die zweite Kachel als Variante der
     ersten. */
  .pricing-route-prepaid .route-label { color: #fcd34d; }
  .pricing-route .route-price {
    font-family: var(--font-display, inherit);
    font-size: var(--wd-web-text-lg);
    font-weight: 700;
    line-height: var(--wd-leading-heading);
    color: #fff;
  }
  .pricing-route .route-price small {
    font-size: var(--wd-web-text-xs);
    font-weight: 500;
    color: #cbd5e1;
    margin-left: 0.15rem;
  }
  .pricing-route .route-text {
    font-size: var(--wd-web-text-sm);
    line-height: var(--wd-leading-body);
    color: #cbd5e1;
  }
  @media (max-width: 720px) {
    .pricing-routes { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; margin-top: 1.1rem; }
    .page-hero .pricing-route { padding: 0.7rem 0.9rem; }
    .pricing-route .route-text { font-size: var(--wd-web-text-xs); }
  }

  /* --- Vier Antworten auf eine Frage: eine Reihe, vier gleich breite
         Karten. `max-width: none` steht hier bewusst, obwohl der Raster
         gerade keine eigene Breitenbegrenzung mehr hat: die alte von
         1100px war auf drei Spalten gerechnet und liesse bei vier je
         Karte rund 260px — zu wenig fuer die deutschen Merkmalszeilen.
         Kaeme sie zurueck, faellt es sonst erst im Layout auf. Die
         Breite kommt jetzt vom .container, wie bei jedem anderen
         Raster der Site. --- */
  .pricing-compare .pricing-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: none;
    gap: 1rem;
  }
  .pricing-compare .pricing-card { padding: 1.75rem 1.25rem 1.5rem; }
  /* Unter 1180px wird aus vier Spalten 2x2 statt vier Streifen. Die
     bestehende Regel bei 1024px springt direkt auf eine Spalte — fuer
     drei Karten richtig, fuer vier zu frueh und zu grob. */
  @media (max-width: 1180px) {
    .pricing-compare .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 720px) {
    .pricing-compare .pricing-grid { grid-template-columns: minmax(0, 1fr); }
  }

  /* --- Die Prepaid-Karte: gleiche Bausteine wie eine Plankarte, damit
         sie auf derselben Ebene liest; gestrichelter Rand, damit sie
         nicht als vierter Plan missverstanden wird. --- */
  .pricing-card-prepaid {
    border: 1px dashed var(--accent-strong, #2563eb);
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.06), #fff 42%);
  }
  .pricing-badge-alt {
    background: #1e40af;
    box-shadow: 0 6px 14px -4px rgba(30, 64, 175, 0.45);
  }
  /* "/Verbindungsminute" ist laenger als "/Monat" und passt neben dem
     Betrag nicht mehr in eine 270px-Karte — also eigene Zeile. */
  .pricing-card-prepaid .pricing-price { flex-wrap: wrap; }
  .pricing-card-prepaid .price-period { flex: 0 0 100%; }

  .prepaid-packages-label {
    margin: 0 0 0.5rem;
    font-size: var(--wd-web-text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--slate-500, #64748b);
  }
  .prepaid-packages {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
  }
  .prepaid-pack {
    display: flex;
    flex-direction: column;
    padding: 0.45rem 0.6rem;
    border-radius: 10px;
    background: rgba(37, 99, 235, 0.07);
    line-height: var(--wd-leading-heading);
  }
  .prepaid-pack strong {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--wd-web-text-sm);
    color: var(--slate-900, #0f172a);
  }
  .prepaid-pack span { font-size: var(--wd-web-text-xs); color: var(--slate-500, #64748b); }
  .prepaid-fine {
    margin: 0 0 0.6rem;
    font-size: var(--wd-web-text-xs);
    line-height: var(--wd-leading-body);
    color: var(--slate-500, #64748b);
  }
  .prepaid-faq-link { margin: 0 0 1rem; font-size: var(--wd-web-text-xs); }
  .prepaid-faq-link a {
    color: var(--accent-strong, #2563eb);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(37, 99, 235, 0.35);
  }
  .prepaid-faq-link a:hover { border-bottom-color: currentColor; }

  /* --- Zubuchbare Optionen: zwei Produkte auf demselben Raster.

         Der Kopf des Abschnitts sass auf der Rasterkante (x=144 bei
         1440px), der Raster darunter bei x=340. Der Grund stand in
         .pricing-addons-grid: `max-width: 760px` plus `margin: 0 auto`
         zentrierte ihn in einem Container, der 1152px breit ist. Zwei
         Elemente desselben Abschnitts auf zwei verschiedenen Kanten —
         als Stufe im Bild sofort sichtbar.

         Der Raster liegt jetzt auf dem einen Container der Site und
         teilt ihn so, wie der Planraster darueber ihn teilt: dessen
         vier Spalten mit 1rem Rinne, je Karte zwei davon. Die linke
         Kante der linken Karte trifft damit die der Free-Karte, die
         rechte Kante der rechten die der Pro-Karte. --- */
  .pricing-addons .pricing-addons-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
    margin-inline: 0;
    gap: 1rem;
  }
  @media (max-width: 720px) {
    .pricing-addons .pricing-addons-grid { grid-template-columns: minmax(0, 1fr); }
  }

  /* Die Karte selbst traegt .pricing-card und damit Flaeche, Radius,
     Rand und die Merkmalsliste einer Plankarte. Hier steht nur, was eine
     Option von einem Plan unterscheidet. */
  .pricing-card-addon { padding: 1.75rem; }

  /* Kopf: links die Kennung (Symbol, Label, Name, Einheit), rechts der
     Betrag. Nicht .pricing-header, denn der zentriert — richtig auf einer
     schmalen Plankarte, falsch auf einer doppelt so breiten. */
  .addon-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--slate-100, #f1f5f9);
    margin-bottom: 1.25rem;
  }
  .addon-ident { display: flex; align-items: flex-start; gap: 0.9rem; }
  /* Das Symbol stand in der Kachel ueber dem Namen und hatte deshalb
     1rem Abstand nach unten; hier steht es daneben. */
  .pricing-card-addon .addon-icon { flex: 0 0 auto; margin-bottom: 0; }
  .addon-kicker {
    display: block;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--wd-web-text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-strong, #2563eb);
    margin-bottom: 0.3rem;
  }
  .pricing-card-addon .pricing-name { margin: 0 0 0.15rem; }
  .addon-unit {
    margin: 0;
    font-size: var(--wd-web-text-xs);
    line-height: var(--wd-leading-body);
    color: var(--slate-500, #64748b);
  }
  .addon-amount {
    margin: 0;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .addon-amount .price-plus {
    font-size: var(--wd-web-text-base);
    font-weight: 600;
    color: var(--accent-strong, #2563eb);
  }
  .pricing-card-addon .pricing-description {
    font-size: var(--wd-web-text-sm);
    margin-bottom: 0.75rem;
  }
  /* Die Fusszeile sitzt, wo die Plankarte ihren Knopf hat: `margin-top:
     auto` haelt beide Karten unten auf einer Linie, unabhaengig davon,
     wie lang die Merkmale in der jeweiligen Sprache ausfallen. */
  .addon-note {
    margin: auto 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--slate-100, #f1f5f9);
    font-size: var(--wd-web-text-xs);
    line-height: var(--wd-leading-body);
    color: var(--slate-500, #64748b);
  }
  /* Unter 560px stapelt der Kopf: Betrag unter die Kennung statt neben
     eine dann zweizeilige Ueberschrift. */
  @media (max-width: 560px) {
    .addon-head { flex-direction: column; gap: 0.75rem; }
    .addon-amount { justify-content: flex-start; }
  }

  /* --- Weiterfuehrende Links: die Seite als Knotenpunkt statt als
         Sackgasse. --- */
  .pricing-next { padding: 0 0 4rem; }
  .pricing-next .container {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1.5rem;
  }
  .pricing-next-label {
    margin: 0;
    font-size: var(--wd-web-text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--slate-500, #64748b);
  }
  .pricing-next-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    margin: 0;
    padding: 0;
  }
  .pricing-next-list a {
    font-size: var(--wd-web-text-base);
    font-weight: 600;
    color: var(--accent-strong, #2563eb);
    text-decoration: none;
    border-bottom: 1px solid rgba(37, 99, 235, 0.3);
  }
  .pricing-next-list a:hover { border-bottom-color: currentColor; }


/* ===== komponenten/15-blogbeitrag.css ===== */
/* 15-blogbeitrag.css — aus dem <style>-Block von BlogPostPage.astro.
 *
 * Einmalig herausgeschnitten beim Rueckbau der Astro-Fassung (war komponentengebunden,
 * die Selektoren tragen deshalb :not(.wd-nie) als Klassenstufe).
 *
 * Ab hier von Hand gepflegt — es gibt keine Quelle mehr, aus der es
 * neu erzeugt werden koennte.
 */
.blog-post-hero:not(.wd-nie) {
    padding-top: 3.5rem;
    padding-bottom: 2.5rem;
    background: linear-gradient(180deg, var(--slate-50, #f8fafc) 0%, #fff 100%);
    border-bottom: 1px solid var(--slate-100, #f1f5f9);
  }
  .blog-post-hero:not(.wd-nie) h1:not(.wd-nie) {
    font-size: var(--fs-h1);
    line-height: var(--wd-leading-display);
    letter-spacing: -1px;
    margin: 0.75rem 0 1rem;
    color: var(--slate-900, #0f172a);
  }
  /* Die Abfrage, die hier stand, setzte die H1 ab 768px von 2.25rem auf
     2.75rem. Beides sind keine Stufen der Textleiter, und der Sprung war
     der einzige seiner Art auf der Site. Eine H1 ist jetzt eine H1 —
     40px, auf schmalen Schirmen eine Stufe tiefer (siehe 01-base.css). */
  .blog-post-hero:not(.wd-nie) .lead:not(.wd-nie) {
    font-size: var(--wd-web-text-md);
    color: var(--slate-600, #475569);
    line-height: var(--wd-leading-body);
    max-width: var(--wd-web-measure);
  }
  .blog-post-content:not(.wd-nie) {
    /* padding-block statt der Kurzform: diese Regel steht auf einem .container,
       und ein padding mit vier Werten setzt dessen Rinne auf null. Der Text
       stand dadurch auf dem Handy bei x=0, direkt an der Bildschirmkante. */
    padding-block: 3rem 4rem;
    color: var(--slate-700, #334155);
    line-height: var(--wd-leading-body);
    font-size: var(--wd-web-text-base);
  }
  .blog-post-content:not(.wd-nie) h2 {
    font-size: var(--fs-h2);
    margin: 2.5rem 0 1rem;
    color: var(--slate-900, #0f172a);
    letter-spacing: -0.4px;
  }
  .blog-post-content:not(.wd-nie) h3 {
    font-size: var(--fs-h3);
    margin: 2rem 0 0.75rem;
    color: var(--slate-900, #0f172a);
    letter-spacing: -0.2px;
  }
  /* Zeilenlänge. Der Beitrag steht in .container-narrow, das sind 812px
     Textbreite — bei 16px Grundtext rund 115 Zeichen pro Zeile. Lesbar
     ist die Hälfte davon. Das Mass begrenzt deshalb den Absatz, nicht
     den Container: Überschriften, Tabellen und Codeblöcke behalten die
     volle Breite, der Fliesstext bekommt --wd-web-measure. */
  .blog-post-content:not(.wd-nie) p, .blog-post-content:not(.wd-nie) ul, .blog-post-content:not(.wd-nie) ol, .blog-post-content:not(.wd-nie) blockquote {
    max-width: var(--wd-web-measure);
  }
  .blog-post-content:not(.wd-nie) p {
    margin: 0 0 1rem;
  }
  .blog-post-content:not(.wd-nie) ul, .blog-post-content:not(.wd-nie) ol {
    margin: 0 0 1rem 1.25rem;
    padding-left: 0.5rem;
  }
  .blog-post-content:not(.wd-nie) li {
    margin-bottom: 0.5rem;
  }
  .blog-post-content:not(.wd-nie) a {
    color: var(--primary, #2563eb);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  .blog-post-content:not(.wd-nie) code {
    font-family: var(--font-mono);
    background: var(--slate-100, #f1f5f9);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: var(--wd-web-text-sm);
  }
  .blog-post-content:not(.wd-nie) pre {
    background: var(--slate-900, #0f172a);
    color: var(--slate-100, #f1f5f9);
    padding: 1rem 1.25rem;
    border-radius: 12px;
    overflow-x: auto;
    margin: 1.25rem 0;
    font-family: var(--font-mono);
    font-size: var(--wd-web-text-sm);
    line-height: var(--wd-leading-body);
  }
  .blog-post-content:not(.wd-nie) pre code:not(.wd-nie) {
    background: transparent;
    padding: 0;
    color: inherit;
  }
  .blog-post-content:not(.wd-nie) table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
  }
  .blog-post-content:not(.wd-nie) th, .blog-post-content:not(.wd-nie) td {
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--slate-100, #f1f5f9);
    text-align: left;
  }
  .blog-post-content:not(.wd-nie) th {
    font-weight: 600;
    color: var(--slate-900, #0f172a);
    background: var(--slate-50, #f8fafc);
  }
  .blog-post-content:not(.wd-nie) blockquote {
    border-left: 3px solid var(--primary, #2563eb);
    margin: 1.25rem 0;
    padding: 0.5rem 0 0.5rem 1.25rem;
    color: var(--slate-700, #334155);
    font-style: italic;
  }


/* ===== komponenten/20-vorgabe-komponenten.css ===== */
/* =====================================================================
   20-vorgabe-komponenten.css — Designvorgabe vom 02.09.2026, Teil 2

   Dieselbe Quelle wie 05-vorgabe.css. Diese Regeln stehen HIER und nicht
   dort, weil die Komponentenblaetter (10- bis 15-) NACH den Grundblaettern
   geladen werden: eine Regel in 05- fuer `.dl-head` oder `.seiten-toc`
   verliert gegen dieselbe Regel in 13-download.css, ganz ohne
   Spezifitaetsfrage — sie steht schlicht frueher.

   Sichtbar wurde das an der Download-Seite: ihr Kopf blieb hell, obwohl
   die dunkle Regel im Blatt stand. Die Nummer 20 sorgt dafuer, dass dieses
   Blatt als letztes kommt.
   ===================================================================== */

/* ---------------------------------------------------------------
   5 · INHALTSVERZEICHNIS
   "AUF DIESER SEITE" in Mono, Eintraege mit Nummer, der aktive mit
   blauem Balken links.
   --------------------------------------------------------------- */
/* Das Verzeichnis bekommt eine eigene Spalte.

   Bisher lag es absolut am rechten Rand UEBER dem Inhalt und verliess sich
   darauf, dass der schmal genug ist. Kartenraster sind es nicht: sie
   nehmen die volle Rasterbreite, und das Verzeichnis stand mitten auf der
   dritten Karte. Die Vorlage loest das mit zwei Spalten — Inhalt links,
   210px Verzeichnis rechts. Hier: der Inhalt eines Verzeichnis-Abschnitts
   endet 296px vor dem rechten Rasterrand (240px Spalte + 56px Luft), und
   er bleibt am linken Rand stehen statt sich in der Restbreite zu
   zentrieren. */
@media (min-width: 1180px) {
  .toc-buehne:has(.seiten-toc) .container,
  .toc-buehne:has(.seiten-toc) .container-narrow,
  .toc-buehne:has(.seiten-toc) .container-narrow:has(.feature-section-grid),
  .toc-buehne:has(.seiten-toc) .container-narrow:has(.key-diffs-grid) {
    max-width: calc(var(--wd-container) - 296px);
    margin-inline: max(0px, calc((100% - var(--wd-container)) / 2)) auto;
  }
  /* Drei Karten passen in die schmalere Bahn nicht mehr nebeneinander. */
  .toc-buehne:has(.seiten-toc) .feature-section-grid,
  .toc-buehne:has(.seiten-toc) .key-diffs-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  }
}

.seiten-toc-titel {
  margin-bottom: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--slate-400);
}
@media (min-width: 1180px) {
  .seiten-toc-haft { padding-left: 0; border-left: 1px solid #EEF2F7; }
}
.seiten-toc-liste { gap: 2px; }
.seiten-toc-liste a {
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  padding: 0.5rem 0 0.5rem 0.875rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: var(--wd-web-text-sm);
  color: var(--slate-600);
  transition: color 150ms ease-out, border-color 150ms ease-out;
}
.seiten-toc-liste a:hover { color: var(--slate-900); border-left-color: var(--slate-300); }
.seiten-toc-nr { font-weight: 500; letter-spacing: 0; color: var(--slate-400); }
.seiten-toc-liste a[aria-current="true"] {
  color: var(--slate-900);
  font-weight: 600;
  border-left-color: var(--primary);
}
.seiten-toc-liste a[aria-current="true"] .seiten-toc-nr { color: var(--primary); }




/* Die Preis-Kacheln im Seitenkopf sind Flaechen, keine Fliesstext-Links.
   14-preise.css nimmt die Unterstreichung mit `.page-hero .pricing-route`
   zurueck (0,2,0) — und verliert gegen `.page-hero a:not(.btn)` aus
   02-redesign (0,2,1): das :not() zaehlt wie eine Klasse. Gleiche
   Spezifitaet, spaeter im Blatt: hier gewinnt die Kachel. */
.page-hero a.pricing-route { color: #E2E8F0; text-decoration: none; }
.page-hero a.pricing-route:hover,
.page-hero a.pricing-route:focus-visible { color: #fff; text-decoration: none; }

/* Vier Stellen, an denen die Vorlage #94A3B8 (--wd-fg-subtle) auf Weiss
   setzt: 2.56:1, gemeldet vom Kontrast-Waechter am 02.09.2026 auf 51
   Seiten. #64748B kommt auf 4.76:1 — derselbe Ton, eine Stufe dunkler.
   Der Punktestand der WinDesk-Spalte steht auf hellem Blau (#F3F8FF) und
   braucht deshalb das tiefe Blau, nicht das helle. */
.seiten-toc-titel,
.comparison-table thead th:not(.col-windesk),
.comparison-disclaimer,
.comparison-punkte { color: #64748B; }
.comparison-table thead .col-windesk .comparison-punkte { color: var(--primary-dark); }


/* ===== komponenten/21-fernwartung.css ===== */
/* =====================================================================
   21-fernwartung.css — die Inhaltsformen der Vorlage "Fernwartung-Seite"
   (Design-System, 02.09.2026)

   Sechs Blockarten, die aus derselben Vorlage stammen: faelle (Karten),
   rechtsrahmen (Begriffsliste + Hinweiskasten), entscheid (Zweispalter),
   schichten (die Stufenliste aus 05-vorgabe, hier nur der Text),
   plattformen (vier Karten, eine dunkel), migration (Strecke + Wege).
   Ihre Ansichten liegen in resources/views/bloecke/.

   Die Vorlage nennt Schriften in Pixeln (10, 13, 14, 15); hier stehen die
   Stufen der Leiter, die ihnen entsprechen — der Typografie-Waechter
   kennt nur die Leiter. Ebenso sind die hellsten Grautoene der Vorlage
   (#94A3B8) auf #64748B gehoben: 2.5:1 auf Weiss ist kein Text.
   ===================================================================== */

/* Ein Satz unter dem Abschnittskopf, ueber dem Inhalt. */
.abschnitt-lead {
  margin: -0.375rem 0 1.5rem;
  max-width: 70ch;
  font-size: var(--wd-web-text-base);
  line-height: var(--wd-leading-body);
  color: var(--slate-600);
  text-wrap: pretty;
}
.abschnitt-lead a { color: var(--primary); font-weight: 600; }


/* ---------------------------------------------------------------
   Anwendungsfaelle: sechs Karten auf einem Sechserraster.
   --------------------------------------------------------------- */
.fall-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.fall {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid #EEF2F7;
  border-radius: 16px;
  background: #fff;
  transition: transform 200ms cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 200ms ease-out, border-color 200ms ease-out;
}
.fall:hover { transform: translateY(-3px); border-color: #DBE3EE; box-shadow: 0 22px 40px -26px rgba(15, 23, 42, 0.2); }
.fall-normal { grid-column: span 2; }
/* Die zweite Reihe: Sysadmin und Bildung teilen sich die sechs Spalten,
   sonst blieben rechts zwei leer. */
.fall-raster > .fall-terminal, .fall-raster > .fall-terminal + .fall-normal { grid-column: span 3; }
.fall-breit {
  grid-column: span 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 18px;
  align-items: center;
  background: linear-gradient(180deg, #F8FAFC, #fff);
}
.fall-dunkel {
  grid-column: span 4;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 20px;
  align-items: center;
  padding: 26px 28px;
  overflow: hidden;
  border-color: #DBE3EE;
  background: linear-gradient(120deg, #0C1526 0%, #132340 100%);
  color: #fff;
}
.fall-dunkel:hover { transform: none; box-shadow: none; }
.fall-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fall-kicker {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 9px;
  border-radius: 6px;
  background: #F1F5F9;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  line-height: var(--wd-leading-body);
  letter-spacing: 0.1em;
  color: var(--slate-600);
}
.fall-dunkel .fall-kicker { background: rgba(96, 165, 250, 0.16); color: #BFDBFE; }
.fall h3 { margin: 12px 0 8px; font-size: var(--wd-web-text-base); font-weight: 600; line-height: var(--wd-leading-heading); color: var(--slate-900); }
.fall-dunkel h3 { margin: 14px 0 8px; font-family: var(--font-display); font-size: var(--wd-web-text-lg); color: #fff; }
.fall p { margin: 0 0 14px; font-size: var(--wd-web-text-sm); line-height: var(--wd-leading-body); color: var(--slate-600); text-wrap: pretty; }
.fall-dunkel p { color: #A9B6CE; }
.fall-link { margin-top: auto; font-size: var(--wd-web-text-sm); font-weight: 600; color: var(--primary); text-decoration: none; }
.fall-link:hover { text-decoration: underline; }
.fall-dunkel .fall-link { color: #93C5FD; }
.fall-bild { width: 100%; height: auto; }
.fall-bild-klein { width: 96px; margin-bottom: 14px; }
.fall-konsole {
  margin-bottom: 14px;
  padding: 9px 11px;
  border-radius: 8px;
  background: #0B1220;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  line-height: var(--wd-leading-body);
  color: #86EFAC;
}
.fall-konsole span { color: #BFDBFE; }
@media (max-width: 900px) {
  .fall-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fall-raster > .fall-dunkel, .fall-raster > .fall-breit { grid-column: span 2; }
  .fall-raster > .fall-normal, .fall-raster > .fall-terminal,
  .fall-raster > .fall-terminal + .fall-normal { grid-column: span 1; }
}
@media (max-width: 560px) {
  .fall-raster { grid-template-columns: minmax(0, 1fr); }
  /* Auch die span-3-Regel (drei Klassen, 0,3,0) muss hier weichen: sonst
     legt sie in der einen Spalte zwei implizite dazu, und die Seite
     scrollt seitlich — gemessen auf 360px. */
  .fall-raster > .fall,
  .fall-raster > .fall-terminal + .fall-normal { grid-column: auto; }
  .fall-breit { grid-template-columns: minmax(0, 1fr); }
  .fall-breit .fall-bild { width: 92px; }
}


/* ---------------------------------------------------------------
   Rechtsrahmen: der Hinweiskasten unter der Begriffsliste.
   (Die Liste selbst: .definitionen in 05-vorgabe.css.)
   --------------------------------------------------------------- */
.hinweis-kasten {
  margin-top: 22px;
  padding: 24px 26px;
  border-radius: 14px;
  background: linear-gradient(180deg, #FFF7ED, #FFFBF5);
  border: 1px solid #FED7AA;
}
.hinweis-kasten-titel {
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  line-height: var(--wd-leading-body);
  letter-spacing: 0.14em;
  color: #C2410C;
}
.hinweis-kasten p { margin: 0; font-size: var(--wd-web-text-base); line-height: var(--wd-leading-body); color: #7C2D12; text-wrap: pretty; }
.hinweis-kasten a { color: #9A3412; font-weight: 600; }


/* ---------------------------------------------------------------
   Entscheid: Situation links, Empfehlung rechts.
   --------------------------------------------------------------- */
.entscheid { border: 1px solid #EEF2F7; border-radius: 14px; overflow: hidden; }
.entscheid-kopf,
.entscheid-zeile { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; }
.entscheid-kopf {
  padding: 11px 22px;
  background: #F8FAFC;
  border-bottom: 1px solid #EEF2F7;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  line-height: var(--wd-leading-body);
  letter-spacing: 0.14em;
  color: #64748B;
}
.entscheid-zeile { padding: 20px 22px; border-bottom: 1px solid #EEF2F7; align-items: start; }
.entscheid-zeile:last-child { border-bottom: 0; }
.entscheid-zeile.ist-hervor { background: #EFF6FF; }
.entscheid-situation { font-size: var(--wd-web-text-base); font-weight: 600; line-height: var(--wd-leading-heading); color: var(--slate-900); }
.entscheid-empfehlung { font-size: var(--wd-web-text-sm); line-height: var(--wd-leading-body); color: var(--slate-600); }
.entscheid-empfehlung a { color: var(--primary); font-weight: 600; }
.ist-hervor .entscheid-empfehlung > a:first-child { color: var(--primary-dark); font-weight: 700; text-decoration: none; }
@media (max-width: 640px) {
  .entscheid-kopf { display: none; }
  .entscheid-zeile { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}


/* ---------------------------------------------------------------
   Schichten: der Text in der Stufenliste.
   --------------------------------------------------------------- */
.step-item .step-text { font-size: var(--wd-web-text-base); font-weight: 500; line-height: var(--wd-leading-body); }


/* ---------------------------------------------------------------
   Plattformen: vier Karten, die letzte dunkel.
   --------------------------------------------------------------- */
.plattformen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 960px) { .plattformen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .plattformen { grid-template-columns: minmax(0, 1fr); } }
.plattform {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 22px;
  border: 1px solid #EEF2F7;
  border-radius: 16px;
  background: #fff;
  transition: background 200ms ease-out, border-color 200ms ease-out;
}
.plattform:hover { background: #F8FBFF; border-color: #DBE3EE; }
.plattform-bild { width: 56px; height: auto; color: #CBD5E1; }
.plattform-name {
  margin: 22px 0 6px;
  font-family: var(--font-display);
  font-size: var(--wd-web-text-lg);
  font-weight: 600;
  line-height: var(--wd-leading-heading);
  letter-spacing: -0.02em;
  color: var(--slate-900);
}
.plattform-name span { color: #64748B; }
.plattform-tag {
  padding-bottom: 14px;
  border-bottom: 1px solid #EEF2F7;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  line-height: var(--wd-leading-body);
  letter-spacing: 0.12em;
  color: #64748B;
}
.plattform p { margin: 14px 0 16px; font-size: var(--wd-web-text-sm); line-height: var(--wd-leading-body); color: var(--slate-600); text-wrap: pretty; }
/* Kein inline-flex: in einer 200px-Spalte bricht "WinDesk fuer Windows"
   um, und ein Flex-Pfeil stuende dann allein am rechten Rand. Als Text
   folgt der Pfeil dem letzten Wort. */
.plattform-link {
  display: block;
  margin-top: auto;
  font-size: var(--wd-web-text-sm);
  font-weight: 600;
  line-height: var(--wd-leading-body);
  color: var(--primary);
  text-decoration: none;
}
.plattform-link span { display: inline-block; margin-left: 7px; transition: margin-left 150ms ease-out; }
.plattform-link:hover span { margin-left: 12px; }
.plattform-vermerk {
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  line-height: var(--wd-leading-body);
  letter-spacing: 0.1em;
  color: #93C5FD;
}
.plattform-dunkel,
.plattform-dunkel:hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: radial-gradient(130% 120% at 82% 6%, #1B2E52 0%, #0E1930 55%, #0A1120 100%);
  color: #fff;
}
.plattform-dunkel:hover { border-color: rgba(255, 255, 255, 0.26); }
.plattform-dunkel .plattform-bild { color: rgba(147, 197, 253, 0.7); }
.plattform-dunkel .plattform-name { color: #fff; }
.plattform-dunkel .plattform-name span { color: #93C5FD; }
.plattform-dunkel .plattform-tag { border-color: rgba(255, 255, 255, 0.12); color: #60A5FA; }
.plattform-dunkel p { color: #A9B6CE; }
.plattform-dunkel .plattform-link { color: #fff; font-weight: 700; }


/* ---------------------------------------------------------------
   Migration: die Strecke und die Wege.
   --------------------------------------------------------------- */
.migration { padding: 26px 28px; border: 1px solid #EEF2F7; border-radius: 14px; background: #FCFDFE; }
.migration-strecke {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.migration-strecke::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 9px;
  height: 2px;
  background: linear-gradient(90deg, #CBD5E1, #2563EB);
}
.migration-schritt { position: relative; padding-top: 30px; }
.migration-punkt {
  position: absolute;
  top: 3px;
  left: 0;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #CBD5E1;
}
.ist-mitte .migration-punkt { border-color: #60A5FA; }
.ist-ziel .migration-punkt { background: #2563EB; border-color: #2563EB; }
.migration-titel { font-size: var(--wd-web-text-sm); font-weight: 600; line-height: var(--wd-leading-heading); color: var(--slate-900); }
.migration-text { margin-top: 4px; font-size: var(--wd-web-text-sm); line-height: var(--wd-leading-body); color: var(--slate-600); }
.migration-wege { margin-top: 24px; padding-top: 20px; border-top: 1px solid #EEF2F7; display: flex; flex-wrap: wrap; gap: 10px; }
.migration-weg {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border-radius: 999px;
  border: 1px solid var(--slate-200);
  background: #fff;
  font-size: var(--wd-web-text-sm);
  font-weight: 600;
  line-height: var(--wd-leading-none);
  color: var(--slate-900);
  text-decoration: none;
  transition: border-color 150ms ease-out, background 150ms ease-out;
}
.migration-weg span { color: #64748B; }
.migration-weg:hover { border-color: #BFDBFE; background: #F8FBFF; color: var(--slate-900); }
@media (max-width: 560px) {
  .migration { padding: 20px; }
  .migration-strecke { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .migration-strecke::before { display: none; }
  .migration-schritt { padding-top: 0; padding-left: 26px; }
}


/* ---------------------------------------------------------------
   Verweise: Listen von Links als Karten (Blockart `verweise`).
   Zwei Formen — `artikel` (Blogbeitraege mit Rubrik, Datum, Lesezeit)
   und `karten` (Seitenverweise mit Pfeil). Abschnitte 09 und 10 der
   Fernwartungsseite; vorher nackte Listen unter einer Vorlagen-Seite.
   --------------------------------------------------------------- */
.verweise { display: flex; flex-direction: column; gap: 28px; }
.verweis-gruppe-titel {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  font-weight: 500;
  line-height: var(--wd-leading-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748B;
}
.verweis-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
/* Auch die Seitenverweise zu zweit je Reihe: vier Regionen als drei plus eine
   sahen aus wie ein Rest. */
.verweis {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid #EEF2F7;
  border-radius: 14px;
  background: #fff;
  color: var(--slate-900);
  text-decoration: none;
  transition: transform 200ms cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 200ms ease-out, border-color 200ms ease-out;
}
.verweis:hover { transform: translateY(-2px); border-color: #DBE3EE; box-shadow: 0 18px 32px -24px rgba(15, 23, 42, 0.22); color: var(--slate-900); }
.verweis-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.verweis-titel { font-size: var(--wd-web-text-sm); font-weight: 600; line-height: var(--wd-leading-heading); text-wrap: pretty; }
.verweis-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: var(--wd-web-text-xs);
  line-height: var(--wd-leading-body);
  color: #64748B;
}
.verweis-kicker { font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); }
.verweis-pfeil { flex: none; color: var(--primary); transition: transform 150ms ease-out; }
.verweis:hover .verweis-pfeil { transform: translateX(4px); }
.verweis-nr { flex: none; font-family: var(--font-mono); font-size: var(--wd-web-text-xs); color: #64748B; }
@media (max-width: 640px) { .verweis-raster { grid-template-columns: minmax(0, 1fr); } }


/* Ein Nachsatz unter einer Schrittliste — die Folgerung aus dem, was
   darueber steht. Kein Fliesstext im Raster, sondern ein abgesetzter Absatz
   mit Abstand nach oben. */
.abschnitt-nachsatz {
  margin: 1.75rem 0 0;
  max-width: 70ch;
  font-size: var(--wd-web-text-base);
  line-height: var(--wd-leading-body);
  color: var(--slate-600);
  text-wrap: pretty;
}
.abschnitt-nachsatz strong { color: var(--slate-900); }


/* ===== komponenten/22-download-2026.css ===== */
/*
 * Download-Seite, Gestaltung vom 14.10.2026 (Entwurf).
 *
 * Eigene Klassen (dlx-) statt der alten dl-: die Regeln in 13-download.css
 * und 20-vorgabe-komponenten.css gelten fuer die alte Fassung und sollen
 * diese hier nicht still verbiegen. Laedt als letztes Komponentenblatt.
 *
 * Schriftgroessen nur aus der Leiter (--wd-web-text-*, --fs-hero), Farben
 * mit mindestens 4.5:1 fuer Fliesstext - beides pruefen die Waechter.
 */

/* ---------- Kopf ---------- */
.dlx-head {
  position: relative;
  overflow: hidden;
  background: var(--wd-canvas-deep, #0C1526);
  color: #fff;
  isolation: isolate;
}
.dlx-head-dots {
  position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 20%, #000 0%, transparent 75%);
          mask-image: radial-gradient(120% 90% at 70% 20%, #000 0%, transparent 75%);
}
.dlx-head-glow {
  position: absolute; z-index: -1;
  width: 620px; height: 620px; right: -120px; top: -220px;
  background: radial-gradient(closest-side, rgba(46, 110, 240, 0.45), transparent 70%);
  animation: dlx-atmen 9s ease-in-out infinite;
}
@keyframes dlx-atmen { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }

.dlx-head-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 84px var(--wd-gutter) 76px;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px; align-items: center;
}

.dlx-version {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 10px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05);
  color: #C9D4E8; text-decoration: none;
  font-family: var(--font-mono); font-size: var(--wd-web-text-xs); letter-spacing: 0.04em;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.dlx-version:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.24); color: #fff; }
.dlx-version-dot { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); animation: dlx-puls 2.4s ease-out infinite; }
@keyframes dlx-puls { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } }
.dlx-version-trenner { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.2); }
.dlx-version-neu { color: #8DBBFF; }
.dlx-version-pfeil { width: 13px; height: 13px; color: #8DBBFF; transition: transform 0.2s ease; }
.dlx-version:hover .dlx-version-pfeil { transform: translateX(2px); }

.dlx-h1 {
  margin: 22px 0 16px;
  font-family: var(--font-display); font-size: var(--fs-hero); font-weight: 700;
  line-height: var(--wd-leading-display); letter-spacing: -0.03em; color: #fff;
  text-wrap: balance;
}
.dlx-h1-akzent { color: #7DB3FF; }
.dlx-sub { margin: 0; max-width: 50ch; color: #A9B6CE; font-size: var(--wd-web-text-md); line-height: var(--wd-leading-body); }
/* Die Rollenfarben im Text stehen inline (download-texte.json) und sind fuer
   den hellen Grund gewaehlt; auf dem dunklen Kopf brauchen sie die hellere Stufe. */
.dlx-sub strong:first-of-type { color: #8DBBFF !important; }
.dlx-sub strong:last-of-type { color: #FF9AA2 !important; }

.dlx-plattformen {
  margin-top: 32px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.dlx-plattform {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "ico" "name";
  justify-items: start; row-gap: 12px;
  padding: 16px 14px 14px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04);
  color: #DCE4F2; cursor: pointer; text-align: left;
  font-family: var(--font-sans, inherit); font-size: var(--wd-web-text-sm); font-weight: 600;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.dlx-plattform .dlx-ico { grid-area: ico; width: 24px; height: 24px; }
.dlx-plattform-name { grid-area: name; }
.dlx-plattform:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); transform: translateY(-1px); }
.dlx-plattform:focus-visible { outline: 2px solid #7DB3FF; outline-offset: 2px; }
.dlx-plattform.is-active {
  background: #fff; color: #0C1526; border-color: transparent;
  box-shadow: 0 18px 36px -18px rgba(96, 165, 250, 0.7);
}
.dlx-erkannt {
  position: absolute; top: -9px; right: 10px;
  padding: 2px 8px; border-radius: 999px;
  background: #15803D; color: #fff; white-space: nowrap;
  box-shadow: 0 4px 10px -4px rgba(21, 128, 61, 0.6);
  font-family: var(--font-mono); font-size: var(--wd-web-text-xs); font-weight: 500; letter-spacing: 0.02em;
}
.dlx-hint {
  margin-top: 14px; color: #8794AD;
  font-family: var(--font-mono); font-size: var(--wd-web-text-xs); letter-spacing: 0.05em;
}

/* Szene: zwei App-Fenster nebeneinander, dazwischen die laufende Leitung
   mit Schloss, die Beschriftung darunter. */
.dlx-szene {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: start;
}
.dlx-strecke { position: relative; z-index: 2; align-self: center; height: 40px; margin-top: 40px; }
.dlx-strecke > svg { position: absolute; left: -6px; right: -6px; top: 50%; width: calc(100% + 12px); height: 4px; transform: translateY(-50%); overflow: visible; }
.dlx-strecke-linie {
  fill: none; stroke: #7DB3FF; stroke-width: 2;
  stroke-dasharray: 6 7; vector-effect: non-scaling-stroke; opacity: 0.9;
  animation: dlx-fluss 1.6s linear infinite;
}
@keyframes dlx-fluss { to { stroke-dashoffset: -26; } }
.dlx-strecke-schloss {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: #0C1526; border: 1px solid rgba(125, 179, 255, 0.5); color: #8DBBFF;
  box-shadow: 0 0 0 6px rgba(46, 110, 240, 0.14);
}
.dlx-strecke-schloss .dlx-ico { width: 17px; height: 17px; }
.dlx-strecke-text {
  grid-column: 1 / -1; justify-self: center; margin-top: 22px;
  white-space: nowrap; padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(125, 179, 255, 0.25); background: rgba(12, 21, 38, 0.7); color: #C9D4E8;
  font-family: var(--font-mono); font-size: var(--wd-web-text-xs); letter-spacing: 0.03em;
}
.dlx-app {
  position: relative; z-index: 1;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #17243F 0%, #101A2F 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 34px 60px -30px rgba(0, 0, 0, 0.75);
}
.dlx-app-host { border-top: 2px solid #EF3340; }
.dlx-app-client { margin-top: 56px; border-top: 2px solid #2563EB; }
.dlx-app-leiste {
  display: flex; align-items: center; gap: 6px; padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.dlx-app-leiste span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.dlx-app-leiste b {
  margin-left: 6px; color: #A9B6CE; font-weight: 500;
  font-family: var(--font-mono); font-size: var(--wd-web-text-xs); letter-spacing: 0.04em;
}
.dlx-app-rumpf { padding: 16px 16px 18px; display: grid; gap: 12px; }
.dlx-feld { display: grid; gap: 3px; }
.dlx-feld small { color: #8794AD; font-family: var(--font-mono); font-size: var(--wd-web-text-xs); letter-spacing: 0.06em; text-transform: uppercase; }
.dlx-feld strong { color: #fff; font-family: var(--font-display); font-size: var(--wd-web-text-lg); font-weight: 600; letter-spacing: 0.06em; }
.dlx-pin { color: #FF9AA2 !important; }
.dlx-feld-eingabe { padding: 9px 11px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(125, 179, 255, 0.35); }
.dlx-verbinden {
  padding: 9px 12px; border-radius: 10px; text-align: center;
  background: #2563EB; color: #fff; font-size: var(--wd-web-text-sm); font-weight: 600;
}
.dlx-verbunden { display: flex; align-items: center; gap: 7px; color: #86EFAC; font-family: var(--font-mono); font-size: var(--wd-web-text-xs); letter-spacing: 0.04em; }
.dlx-verbunden span { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; animation: dlx-puls 2.4s ease-out infinite; }

/* ---------- Karten ---------- */
.dlx-karten { max-width: 1200px; margin: 0 auto; padding: 64px var(--wd-gutter) 8px; }
.dlx-karten-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.dlx-karte {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 30px; border-radius: 22px;
  background: #fff; border: 1px solid var(--slate-200, #E2E8F0);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 26px 50px -34px rgba(15, 23, 42, 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dlx-karte:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 34px 60px -34px rgba(15, 23, 42, 0.34); }
.dlx-karte::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; }
.dlx-karte::after { content: ""; position: absolute; right: -90px; top: -90px; width: 260px; height: 260px; border-radius: 50%; pointer-events: none; }
.dlx-karte-client::before { background: linear-gradient(90deg, #2563EB, #60A5FA); }
.dlx-karte-host::before { background: linear-gradient(90deg, #D8232F, #FF6B76); }
.dlx-karte-client::after { background: radial-gradient(closest-side, rgba(37, 99, 235, 0.09), transparent); }
.dlx-karte-host::after { background: radial-gradient(closest-side, rgba(239, 51, 64, 0.08), transparent); }
.dlx-karte > * { position: relative; z-index: 1; }

.dlx-karte-kopf { display: flex; align-items: center; gap: 16px; }
.dlx-karte-symbol svg { width: 56px !important; height: 56px !important; border-radius: 15px !important; display: block; }
.dlx-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-family: var(--font-mono); font-size: var(--wd-web-text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.dlx-pill-client { background: #EFF6FF; color: #1D4ED8; }
.dlx-pill-host { background: #FEE2E2; color: #B91C1C; }
.dlx-karte-name { margin: 6px 0 0; font-family: var(--font-display); font-size: var(--wd-web-text-xl); font-weight: 700; letter-spacing: -0.015em; color: var(--slate-900, #0F172A); }
.dlx-karte-text { margin: 16px 0 20px; color: var(--slate-600, #475569); font-size: var(--wd-web-text-base); line-height: var(--wd-leading-body); }

.dlx-merkmale { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dlx-merkmale li {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--slate-50, #F8FAFC); border: 1px solid var(--slate-100, #F1F5F9);
  color: var(--slate-700, #334155); font-size: var(--wd-web-text-sm); font-weight: 500; line-height: var(--wd-leading-heading);
}
.dlx-merkmale .dlx-ico { flex: none; width: 20px; height: 20px; }
.dlx-karte-client .dlx-merkmale .dlx-ico { color: #2563EB; }
.dlx-karte-host .dlx-merkmale .dlx-ico { color: #D8232F; }

.dlx-dateien { margin-top: auto; padding-top: 26px; }
.dlx-haupt {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 14px 16px 14px 14px; border-radius: 16px;
  color: #fff; text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.dlx-haupt-client { background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%); box-shadow: 0 18px 34px -18px rgba(37, 99, 235, 0.8); }
.dlx-haupt-host { background: linear-gradient(135deg, #D8232F 0%, #B91C1C 100%); box-shadow: 0 18px 34px -18px rgba(216, 35, 47, 0.75); }
.dlx-haupt:hover { transform: translateY(-1px); filter: brightness(1.06); color: #fff; }
.dlx-haupt:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.45); outline-offset: 3px; }
.dlx-haupt-os { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.16); }
.dlx-haupt-os .dlx-ico { width: 24px; height: 24px; }
.dlx-haupt-text { display: grid; gap: 2px; min-width: 0; }
.dlx-haupt-titel { font-family: var(--font-display); font-size: var(--wd-web-text-md); font-weight: 600; letter-spacing: -0.005em; }
.dlx-haupt-meta { color: rgba(255, 255, 255, 0.9); font-family: var(--font-mono); font-size: var(--wd-web-text-xs); letter-spacing: 0.02em; overflow-wrap: anywhere; }
.dlx-haupt-pfeil { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.18); transition: transform 0.2s ease; }
.dlx-haupt-pfeil .dlx-ico { width: 18px; height: 18px; }
.dlx-haupt:hover .dlx-haupt-pfeil { transform: translateY(2px); }

.dlx-weitere { margin-top: 10px; display: grid; gap: 8px; }
.dlx-weitere-datei {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 12px;
  border: 1px solid var(--slate-200, #E2E8F0); background: #fff;
  color: var(--slate-700, #334155); text-decoration: none;
  font-size: var(--wd-web-text-sm); font-weight: 500;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.dlx-weitere-datei .dlx-ico { width: 18px; height: 18px; color: var(--slate-500, #64748B); }
.dlx-weitere-groesse { color: var(--slate-500, #64748B); font-family: var(--font-mono); font-size: var(--wd-web-text-xs); }
.dlx-weitere-client:hover { border-color: #93C5FD; background: #F8FBFF; color: #1D4ED8; }
.dlx-weitere-host:hover { border-color: #FCA5A5; background: #FFF8F8; color: #B91C1C; }

.dlx-karte-fuss {
  margin-top: 18px; display: flex; align-items: center; gap: 8px;
  color: var(--slate-500, #64748B); font-family: var(--font-mono); font-size: var(--wd-web-text-xs); letter-spacing: 0.03em;
}
.dlx-karte-fuss .dlx-ico { width: 15px; height: 15px; color: #16A34A; }
.dlx-karte-fuss a { color: var(--slate-600, #475569); text-decoration: underline; text-underline-offset: 3px; }
.dlx-karte-fuss a:hover { color: var(--slate-900, #0F172A); }

.dlx-hinweis {
  max-width: 760px; margin: 28px auto 0;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 20px; border-radius: 14px;
  background: var(--slate-50, #F8FAFC); border: 1px solid var(--slate-200, #E2E8F0);
}
.dlx-hinweis .dlx-ico { flex: none; width: 20px; height: 20px; color: #2563EB; margin-top: 1px; }
.dlx-hinweis p { margin: 0; color: var(--slate-700, #334155); font-size: var(--wd-web-text-sm); line-height: var(--wd-leading-body); }

/* ---------- Ablauf ---------- */
.dlx-schritte { padding: 80px var(--wd-gutter); }
.dlx-schritte-inner { max-width: 1200px; margin: 0 auto; }
.dlx-abschnitt-titel {
  margin: 0 0 28px; font-family: var(--font-display); font-size: var(--wd-web-text-2xl); font-weight: 700;
  letter-spacing: -0.02em; color: var(--slate-900, #0F172A); text-wrap: balance;
}
.dlx-schritte-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dlx-schritt {
  position: relative; padding: 24px; border-radius: 18px;
  background: #fff; border: 1px solid var(--slate-200, #E2E8F0);
}
.dlx-schritt:not(:last-child)::after {
  content: ""; position: absolute; top: 46px; right: -21px; width: 22px; height: 2px;
  background: repeating-linear-gradient(90deg, #94A3B8 0 4px, transparent 4px 8px);
}
.dlx-schritt-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; }
.dlx-schritt-ico .dlx-ico { width: 22px; height: 22px; }
.dlx-schritt-1 .dlx-schritt-ico { background: #FEE2E2; color: #B91C1C; }
.dlx-schritt-2 .dlx-schritt-ico { background: var(--slate-100, #F1F5F9); color: var(--slate-700, #334155); }
.dlx-schritt-3 .dlx-schritt-ico { background: #DBEAFE; color: #1D4ED8; }
.dlx-schritt-nr { position: absolute; top: 24px; right: 24px; color: var(--slate-500, #64748B); font-family: var(--font-mono); font-size: var(--wd-web-text-xs); letter-spacing: 0.08em; }
.dlx-schritt h3 { margin: 18px 0 8px; font-family: var(--font-display); font-size: var(--wd-web-text-lg); font-weight: 600; color: var(--slate-900, #0F172A); }
.dlx-schritt p { margin: 0; color: var(--slate-600, #475569); font-size: var(--wd-web-text-sm); line-height: var(--wd-leading-body); }

/* ---------- Echtheit ---------- */
.dlx-echtheit { padding: 8px var(--wd-gutter) 96px; }
.dlx-echtheit-inner { max-width: 1200px; margin: 0 auto; }
.dlx-echtheit-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dlx-echtheit-zelle {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--slate-200, #E2E8F0);
}
.dlx-echtheit-zelle .dlx-ico { flex: none; width: 26px; height: 26px; color: var(--slate-800, #1E293B); }
.dlx-echtheit-zelle strong { display: block; font-family: var(--font-display); font-size: var(--wd-web-text-base); color: var(--slate-900, #0F172A); }
.dlx-echtheit-zelle span { display: block; margin-top: 2px; color: var(--slate-600, #475569); font-size: var(--wd-web-text-sm); line-height: var(--wd-leading-body); }

.dlx-summen-box { margin-top: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--slate-200, #E2E8F0); }
.dlx-summen-box summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px; padding: 16px 20px;
  color: var(--slate-800, #1E293B); font-size: var(--wd-web-text-sm); font-weight: 600;
}
.dlx-summen-box summary::-webkit-details-marker { display: none; }
.dlx-summen-box summary .dlx-ico { width: 18px; height: 18px; color: var(--slate-500, #64748B); }
.dlx-summen-box summary::after { content: "+"; margin-left: auto; color: var(--slate-500, #64748B); font-size: var(--wd-web-text-lg); line-height: var(--wd-leading-none); transition: transform 0.2s ease; }
.dlx-summen-box[open] summary::after { transform: rotate(45deg); }
.dlx-summen-box summary:focus-visible { outline: 2px solid #2563EB; outline-offset: -2px; border-radius: 16px; }
.dlx-summen-box > :not(summary) { margin-left: 20px; margin-right: 20px; }
.dlx-summen-titel { margin-top: 4px; margin-bottom: 12px; font-family: var(--font-display); font-size: var(--wd-web-text-base); color: var(--slate-900, #0F172A); }
.dlx-summen { margin-top: 0; display: grid; gap: 10px; }
.dlx-summe dt { color: var(--slate-700, #334155); font-size: var(--wd-web-text-sm); font-weight: 600; }
.dlx-summe dd { margin: 4px 0 0; }
.dlx-summe code {
  display: block; padding: 8px 10px; border-radius: 8px; overflow-wrap: anywhere;
  background: var(--slate-50, #F8FAFC); color: var(--slate-700, #334155);
  font-family: var(--font-mono); font-size: var(--wd-web-text-xs);
}
.dlx-summen-wie { margin-top: 18px; margin-bottom: 8px; color: var(--slate-600, #475569); font-size: var(--wd-web-text-sm); }
.dlx-summen-befehl {
  margin-top: 0; margin-bottom: 20px; padding: 14px 16px; border-radius: 12px; overflow-x: auto;
  background: #0C1526; color: #DCE4F2; font-family: var(--font-mono); font-size: var(--wd-web-text-xs); line-height: var(--wd-leading-body);
}
.dlx-echtheit-notiz { margin-top: 16px; color: var(--slate-600, #475569); font-size: var(--wd-web-text-sm); line-height: var(--wd-leading-body); }
.dlx-echtheit-notiz a { color: #1D4ED8; }

.dlx-ico { display: block; }

/* ---------- Schmale Fenster ---------- */
@media (max-width: 1020px) {
  .dlx-head-inner { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-top: 64px; }
  .dlx-szene { max-width: 520px; width: 100%; margin: 0 auto; }
}
@media (max-width: 900px) {
  .dlx-karten-raster, .dlx-schritte-liste, .dlx-echtheit-raster { grid-template-columns: minmax(0, 1fr); }
  .dlx-schritt:not(:last-child)::after { display: none; }
}
@media (max-width: 560px) {
  .dlx-plattformen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dlx-merkmale { grid-template-columns: minmax(0, 1fr); }
  .dlx-szene { display: none; }
  .dlx-karte { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .dlx-head-glow, .dlx-version-dot, .dlx-strecke-linie, .dlx-verbunden span { animation: none; }
  .dlx-karte, .dlx-haupt, .dlx-plattform, .dlx-haupt-pfeil { transition: none; }
}


/* ===== komponenten/23-seiten-2026.css ===== */
/*
 * Inhaltsseiten im Stil der Download-Seite (Entwurf 20.10.2026).
 *
 * Wirkt auf die gemeinsamen Bausteine aller Inhaltsseiten (seite.blade.php):
 * Seitenkopf, Karten, Schritte, Fragen und Abschlussband. Kein Umbau des
 * Inhalts: dieselben Klassen, nur die Gestaltung der Download-Seite
 * (22-download-2026.css) – Punkteraster und Lichtschein im Kopf, ruhige
 * Flächen mit klarer Kante, dunkles Abschlussband statt Lila-Verlauf.
 * Laedt als letztes Komponentenblatt; Schriftgroessen nur aus der Leiter,
 * Fliesstext mit mindestens 4.5:1 (Waechter).
 */

/* ---------- Seitenkopf ---------- */
.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--wd-canvas-deep, #0C1526);
  padding-top: 5rem;
  padding-bottom: 4.25rem;
}
/* Punkteraster, nach links unten ausblendend – wie .dlx-head-dots. */
.page-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 90% at 75% 15%, #000 0%, transparent 72%);
          mask-image: radial-gradient(120% 90% at 75% 15%, #000 0%, transparent 72%);
  pointer-events: none;
}
/* Lichtschein oben rechts, atmet langsam – wie .dlx-head-glow. */
.page-hero::after {
  content: "";
  position: absolute; z-index: -1;
  width: 640px; height: 640px; right: -140px; top: -260px;
  background: radial-gradient(closest-side, rgba(46, 110, 240, 0.42), transparent 70%);
  animation: seite-atmen 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes seite-atmen { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }

.page-hero h1 {
  font-size: var(--fs-hero);
  letter-spacing: -0.03em;
  text-wrap: balance;
  max-width: 20ch;
  overflow-wrap: break-word;
}
/* Lange Einzelwörter («Systemadministratoren») sprengen auf dem Handy den
   Rand; dort trennt der Browser nach Seitensprache (html lang). Breiter
   nicht: da trennte er sonst «Alter-native» und Marken wie «Team-Viewer». */
@media (max-width: 560px) {
  .page-hero h1 { hyphens: auto; hyphenate-limit-chars: 14 6 6; }
}
.page-hero .lead {
  color: #A9B6CE;
  max-width: 58ch;
}

/* Vertrauenspille wie die Versionspille der Download-Seite. */
.page-hero .hero-pille {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: #C9D4E8;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.page-hero .hero-eyebrow { color: #8DBBFF; }

/* ---------- Karten ---------- */
.feature-detail,
.key-diff-card {
  overflow: hidden;
  padding: 1.75rem 1.75rem 1.875rem;
  border: 1px solid var(--slate-200, #E2E8F0);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 26px 50px -36px rgba(15, 23, 42, 0.26);
}
.feature-detail:hover,
.key-diff-card:hover {
  transform: translateY(-2px);
  border-color: var(--slate-300, #CBD5E1);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 34px 60px -34px rgba(15, 23, 42, 0.32);
}
/* Kante oben über die volle Breite, kräftiger als der bisherige Strich. */
.feature-detail::after,
.key-diff-card::after {
  left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #2563EB, #60A5FA 55%, transparent);
}
/* Nummer als Mono-Pille statt loser Ziffer. */
.feature-detail::before {
  display: inline-block;
  width: max-content;
  margin-bottom: 0.875rem;
  padding: 3px 10px;
  border-radius: 999px;
  background: #EFF6FF;
  color: #1D4ED8;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.key-diff-num {
  display: inline-block;
  width: max-content;
  margin-bottom: 0.875rem;
  padding: 3px 10px;
  border-radius: 999px;
  background: #EFF6FF;
  color: #1D4ED8;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.feature-section-grid,
.key-diffs-grid { gap: 1.25rem; }

/* ---------- Schritte ---------- */
.step-item {
  border: 1px solid var(--slate-200, #E2E8F0);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.step-num {
  display: inline-grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 13px;
  background: #EFF6FF;
  color: #1D4ED8;
  font-family: var(--font-mono);
  font-weight: 600;
}

/* ---------- Fragen ---------- */
.faq-item {
  border: 1px solid var(--slate-200, #E2E8F0);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-item:hover { border-color: var(--slate-300, #CBD5E1); }
.faq-item[open],
.faq-item.is-open,
.faq-item.active {
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: 0 18px 40px -30px rgba(37, 99, 235, 0.45);
}

/* ---------- Abschlussband: dunkle Fläche auf hellem Grund ----------
   Als abgerundete Fläche statt Vollbreite: so verschmilzt es nicht mit der
   ebenfalls dunklen Fussleiste und liest sich wie die Karten der
   Download-Seite. */
.cta-band {
  background: transparent;
  color: inherit;
  padding-top: 1.5rem;
  padding-bottom: 5rem;
}
.cta-band > .container {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 3.5rem 2rem;
  border-radius: 28px;
  background: var(--wd-canvas-deep, #0C1526);
  color: #fff;
  box-shadow: 0 40px 80px -48px rgba(12, 21, 38, 0.7);
}
.cta-band > .container::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(80% 100% at 50% 0%, #000 0%, transparent 75%);
          mask-image: radial-gradient(80% 100% at 50% 0%, #000 0%, transparent 75%);
  pointer-events: none;
}
.cta-band > .container::after {
  content: "";
  position: absolute; z-index: -1;
  width: 720px; height: 420px; left: 50%; top: -230px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(46, 110, 240, 0.42), transparent 70%);
  pointer-events: none;
}
.cta-band h2 { color: #fff; letter-spacing: -0.02em; text-wrap: balance; }
.cta-band p { color: #A9B6CE; }

@media (prefers-reduced-motion: reduce) {
  .page-hero::after { animation: none; }
}
@media (max-width: 640px) {
  .page-hero { padding-top: 3.5rem; padding-bottom: 3rem; }
  .cta-band > .container { padding: 2.5rem 1.25rem; border-radius: 22px; }
  .page-hero::after { width: 420px; height: 420px; right: -160px; top: -200px; }
}


/* ===== komponenten/24-grafiken-2026.css ===== */
/*
 * Icons und Grafiken der Inhaltsseiten (21.10.2026, zuerst /features).
 *
 * - Karten mit `icon`: Motiv in einer Kachel statt der laufenden Nummer.
 * - Kennzahlen mit `icon`: Motiv ueber der Zahl.
 * - Seitenkopf mit `visual`: Text links, Grafik rechts (wie Download-Seite).
 * - Grafik p2p: Client und Host direkt, Vermittlung in der Schweiz gestrichelt.
 * Bildsprache, Farben und Fenster wie 22-download-2026.css; Client blau,
 * Host rot. Schriftgroessen nur aus der Leiter.
 */

/* ---------- Karten mit Motiv ---------- */
.feature-detail--ico::before { display: none; }
.karte-ico {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 1.125rem;
  border-radius: 13px;
  background: linear-gradient(180deg, #EFF6FF 0%, #E0ECFF 100%);
  color: #1D4ED8;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.karte-ico .dlx-ico { width: 22px; height: 22px; }
.feature-detail--ico:hover .karte-ico {
  transform: translateY(-1px) scale(1.04);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.2), 0 10px 20px -12px rgba(37, 99, 235, 0.55);
}

/* ---------- Kennzahlen mit Motiv ---------- */
.kennzahl-ico {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; margin-bottom: 0.875rem;
  border-radius: 11px;
  background: rgba(125, 179, 255, 0.12);
  border: 1px solid rgba(125, 179, 255, 0.22);
  color: #8DBBFF;
}
.kennzahl-ico .dlx-ico { width: 19px; height: 19px; }

/* ---------- Seitenkopf mit Grafik ---------- */
.page-hero-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 3.5rem;
}
.page-hero--grafik .page-hero-text .lead { max-width: 52ch; }

/* ---------- Grafik p2p ---------- */
.p2p-szene {
  position: relative;
  margin: 0;
  width: 100%; max-width: 540px; justify-self: end;
  aspect-ratio: 520 / 360;
}
.p2p-linien { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.p2p-vermittlung {
  fill: none; stroke: rgba(169, 182, 206, 0.55); stroke-width: 1.5;
  stroke-dasharray: 3 6; vector-effect: non-scaling-stroke;
}
.p2p-direkt-grund {
  fill: none; stroke: rgba(46, 110, 240, 0.35); stroke-width: 10;
  stroke-linecap: round; vector-effect: non-scaling-stroke; filter: blur(4px);
}
.p2p-direkt {
  fill: none; stroke: #7DB3FF; stroke-width: 2.5;
  stroke-dasharray: 7 7; vector-effect: non-scaling-stroke;
  animation: p2p-fluss 1.4s linear infinite;
}
@keyframes p2p-fluss { to { stroke-dashoffset: -28; } }

.p2p-server {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 52%; height: 16%;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px dashed rgba(169, 182, 206, 0.45);
  background: rgba(12, 21, 38, 0.75);
  color: #A9B6CE;
}
.p2p-server .dlx-ico { flex: none; width: 20px; height: 20px; color: #8794AD; }
.p2p-server div { display: grid; min-width: 0; }
.p2p-server strong {
  color: #DCE4F2; font-weight: 600; font-size: var(--wd-web-text-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p2p-server span {
  font-family: var(--font-mono); font-size: var(--wd-web-text-xs); letter-spacing: 0.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.p2p-app {
  position: absolute; top: 35.5%; width: 38.5%; height: 50%;
  display: flex; flex-direction: column;
  border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, #17243F 0%, #101A2F 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 56px -28px rgba(0, 0, 0, 0.8);
}
.p2p-app-client { left: 0; border-top: 2px solid #2563EB; }
.p2p-app-host { right: 0; border-top: 2px solid #EF3340; }
.p2p-leiste {
  flex: none; display: flex; align-items: center; gap: 5px; padding: 8px 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.p2p-leiste > span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.p2p-leiste b {
  margin-left: 5px; color: #A9B6CE; font-weight: 500; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--wd-web-text-xs); letter-spacing: 0.04em;
}
/* Derselbe Bildschirm auf beiden Seiten: der Client zeigt, was der Host zeigt. */
.p2p-bild {
  position: relative; flex: 1; margin: 9px; border-radius: 8px; overflow: hidden;
  background: linear-gradient(135deg, #1E3A6E 0%, #26407A 45%, #3B2F6B 100%);
}
.p2p-fenster {
  position: absolute; border-radius: 4px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 0.5);
}
.p2p-fenster::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18%;
  border-radius: 4px 4px 0 0; background: #CBD5E1;
}
.p2p-fenster-a { left: 9%; top: 12%; width: 52%; height: 50%; }
.p2p-fenster-b { left: 42%; top: 34%; width: 48%; height: 42%; background: rgba(226, 236, 255, 0.95); }
.p2p-fenster-b::before { background: #93C5FD; }
.p2p-taskleiste {
  position: absolute; left: 0; right: 0; bottom: 0; height: 11%;
  background: rgba(8, 14, 28, 0.7);
}
.p2p-zeiger {
  position: absolute; left: 62%; top: 52%; width: 12px; height: 16px;
  background: #fff;
  clip-path: polygon(0 0, 100% 62%, 56% 66%, 74% 100%, 58% 100%, 42% 70%, 0 92%);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
  animation: p2p-zeiger 6s ease-in-out infinite;
}
@keyframes p2p-zeiger {
  0%, 100% { transform: translate(0, 0); }
  35% { transform: translate(-26px, -14px); }
  65% { transform: translate(10px, -6px); }
}

.p2p-schloss {
  position: absolute; left: 50%; top: 60.5%; transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: #0C1526; border: 1px solid rgba(125, 179, 255, 0.55); color: #8DBBFF;
  box-shadow: 0 0 0 7px rgba(46, 110, 240, 0.14);
}
.p2p-schloss .dlx-ico { width: 18px; height: 18px; }
.p2p-text {
  position: absolute; left: 50%; top: 92%; transform: translate(-50%, -50%);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(125, 179, 255, 0.25); background: rgba(12, 21, 38, 0.8); color: #C9D4E8;
  font-family: var(--font-mono); font-size: var(--wd-web-text-xs); letter-spacing: 0.03em;
}

@media (max-width: 960px) {
  .page-hero-raster { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .p2p-szene { justify-self: center; }
}
@media (max-width: 560px) {
  .p2p-app { height: 45%; }
  .p2p-marke { display: none; }
  .p2p-leiste { padding: 6px 8px; }
  .p2p-leiste > span { width: 5px; height: 5px; }
  .p2p-bild { margin: 6px; }
  .p2p-server { gap: 8px; padding: 0 10px; width: 64%; }
  .p2p-server .dlx-ico { width: 17px; height: 17px; }
  .p2p-schloss { width: 34px; height: 34px; box-shadow: 0 0 0 5px rgba(46, 110, 240, 0.14); }
  .p2p-schloss .dlx-ico { width: 15px; height: 15px; }
  .p2p-text { padding: 5px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .p2p-direkt, .p2p-zeiger { animation: none; }
  .karte-ico { transition: none; }
}

/* ---------- Grafik schichten (Sicherheit) ----------
   Verschachtelte Rahmen, nach innen heller; jede Schicht leuchtet
   nacheinander kurz auf (von aussen nach innen). */
.sch-szene { margin: 0; width: 100%; max-width: 520px; justify-self: end; }
.sch {
  position: relative;
  padding: 48px 14px 14px;
  border-radius: calc(24px - var(--i) * 3px);
  border: 1px solid rgba(125, 179, 255, calc(0.16 + var(--i) * 0.09));
  background: rgba(46, 110, 240, calc(0.035 + var(--i) * 0.025));
}
.sch-1 { padding-left: 16px; padding-right: 16px; box-shadow: 0 40px 80px -48px rgba(0, 0, 0, 0.8); }
.sch::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(141, 187, 255, 0.85), 0 0 24px -4px rgba(46, 110, 240, 0.6);
  opacity: 0;
  animation: sch-puls 4.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.55s);
}
@keyframes sch-puls { 0%, 30%, 100% { opacity: 0; } 12% { opacity: 1; } }
.sch-tab {
  position: absolute; left: 14px; right: 14px; top: 14px;
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.sch-tab .dlx-ico { flex: none; width: 17px; height: 17px; color: #8DBBFF; }
.sch-tab strong { flex: none; color: #E2E8F5; font-weight: 600; font-size: var(--wd-web-text-sm); }
.sch-tab span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #A9B6CE; font-family: var(--font-mono); font-size: var(--wd-web-text-xs); letter-spacing: 0.02em;
}
.sch-kern {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 84px; border-radius: 12px;
  background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 60%, #3B82F6 100%);
  box-shadow: 0 18px 36px -18px rgba(37, 99, 235, 0.9);
  color: #fff;
}
.sch-kern strong { font-family: var(--font-display); font-size: var(--wd-web-text-lg); font-weight: 600; letter-spacing: -0.01em; }
.sch-kern-ico {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.3);
}
.sch-kern-ico .dlx-ico { width: 18px; height: 18px; }

/* ---------- Grafik sitzung (Fernwartung) ---------- */
.sz-szene { position: relative; margin: 0; width: 100%; max-width: 540px; justify-self: end; aspect-ratio: 520 / 380; }
.sz-app {
  position: absolute; left: 0; right: 5%; top: 7%; bottom: 11%;
  display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #17243F 0%, #101A2F 100%);
  border: 1px solid rgba(255, 255, 255, 0.1); border-top: 2px solid #2563EB;
  box-shadow: 0 34px 60px -30px rgba(0, 0, 0, 0.8);
}
.sz-leiste {
  flex: none; display: flex; align-items: center; gap: 6px; padding: 9px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.sz-leiste > span:not(.sz-werkzeuge) { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.sz-leiste b {
  margin-left: 5px; color: #A9B6CE; font-weight: 500; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--wd-web-text-xs); letter-spacing: 0.04em;
}
.sz-tab {
  margin-left: 6px; padding: 3px 9px; border-radius: 7px; font-style: normal; white-space: nowrap;
  background: rgba(37, 99, 235, 0.22); border: 1px solid rgba(125, 179, 255, 0.3); color: #D6E5FF;
  font-family: var(--font-mono); font-size: var(--wd-web-text-xs);
}
.sz-werkzeuge { margin-left: auto; display: flex; gap: 10px; color: #8794AD; }
.sz-werkzeuge .dlx-ico { width: 15px; height: 15px; }
.sz-bild {
  position: relative; flex: 1; margin: 10px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(135deg, #1E3A6E 0%, #26407A 45%, #3B2F6B 100%);
}
/* Der Hinweis, den der Kunde auf seinem Bildschirm immer sieht (Host = rot). */
.sz-banner {
  position: absolute; left: 50%; top: 7%; transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 4px 11px; border-radius: 999px;
  background: #DC2626; color: #fff; box-shadow: 0 6px 16px -6px rgba(220, 38, 38, 0.8);
  font-size: var(--wd-web-text-xs); font-weight: 600;
}
.sz-banner i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: sz-blinken 1.6s ease-in-out infinite; }
@keyframes sz-blinken { 50% { opacity: 0.35; } }
.sz-fenster-a { left: 9%; top: 24%; width: 46%; height: 46%; }
.sz-fenster-b { left: 41%; top: 40%; width: 47%; height: 40%; background: rgba(226, 236, 255, 0.95); }
.sz-fenster-b::before { background: #93C5FD; }
.sz-zeiger { left: 60%; top: 58%; }

.sz-karte { position: absolute; z-index: 3; }
.sz-datei {
  left: 5%; bottom: 0; width: 54%;
  display: flex; align-items: center; gap: 11px; padding: 11px 13px;
  border-radius: 14px; background: #fff; color: #0F172A;
  box-shadow: 0 24px 44px -20px rgba(0, 0, 0, 0.7);
}
.sz-karte-ico {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: #EFF6FF; color: #1D4ED8;
}
.sz-karte-ico .dlx-ico { width: 18px; height: 18px; }
.sz-datei > div { display: grid; gap: 2px; min-width: 0; flex: 1; }
.sz-datei strong { font-size: var(--wd-web-text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sz-datei span { color: #64748B; font-size: var(--wd-web-text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sz-balken { display: block; height: 5px; margin-top: 5px; border-radius: 999px; background: #E2E8F0; overflow: hidden; }
.sz-balken i { display: block; height: 100%; width: 68%; border-radius: inherit; background: #2563EB; animation: sz-laden 5s ease-in-out infinite; }
@keyframes sz-laden { 0% { width: 8%; } 80%, 100% { width: 100%; } }
.sz-sicher {
  right: 0; top: 0;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px;
  background: #0C1526; border: 1px solid rgba(125, 179, 255, 0.4); color: #C9D4E8;
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.8);
  font-family: var(--font-mono); font-size: var(--wd-web-text-xs); letter-spacing: 0.03em;
}
.sz-sicher .dlx-ico { width: 14px; height: 14px; color: #8DBBFF; }

@media (max-width: 560px) {
  .sch { padding: 44px 10px 10px; }
  .sch-1 { padding-left: 12px; padding-right: 12px; }
  .sch-tab { left: 12px; right: 12px; top: 13px; }
  .sch-kern { min-height: 70px; }
  .sz-werkzeuge { display: none; }
  .sz-app { top: 13%; bottom: 13%; }
  .sz-leiste { padding: 7px 9px; }
  .sz-bild { margin: 7px; }
  .sz-datei { width: 70%; padding: 9px 11px; }
  .sz-banner { padding: 3px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .sch::after, .sz-banner i, .sz-balken i { animation: none; }
}

/* ---------- Gemeinsam: App-Fenster der Anwendungsfall-Grafiken ---------- */
.hl-app, .an-host {
  position: relative; z-index: 1;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #17243F 0%, #101A2F 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 34px 60px -30px rgba(0, 0, 0, 0.8);
}

/* ---------- Grafik hostliste (KMU, Sysadmins, IT-Dienstleister) ---------- */
.hl-szene { position: relative; margin: 0; width: 100%; max-width: 520px; justify-self: end; }
.hl-szene--log { padding-bottom: 96px; }
.hl-app { border-top: 2px solid #2563EB; }
.hl-szene--log .hl-app { width: 92%; }
.hl-liste { list-style: none; margin: 0; padding: 10px; display: grid; gap: 7px; }
.hl-zeile {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 10px 12px; border-radius: 11px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.06);
}
.hl-zeile:first-child { background: rgba(46, 110, 240, 0.14); border-color: rgba(125, 179, 255, 0.35); }
.hl-ico {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: rgba(125, 179, 255, 0.12); color: #C9D9F5;
}
.hl-ico .dlx-ico { width: 18px; height: 18px; }
.hl-text { display: grid; min-width: 0; flex: 1; }
.hl-text strong { color: #E2E8F5; font-weight: 600; font-size: var(--wd-web-text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-text small { color: #A9B6CE; font-family: var(--font-mono); font-size: var(--wd-web-text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-badge {
  flex: none; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: rgba(37, 99, 235, 0.22); border: 1px solid rgba(125, 179, 255, 0.3); color: #D6E5FF;
  font-family: var(--font-mono); font-size: var(--wd-web-text-xs);
}
.hl-status { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.hl-status--online { background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
.hl-status--offline { background: rgba(255, 255, 255, 0.28); }
.hl-fuss { padding: 2px 16px 13px; color: #A9B6CE; font-family: var(--font-mono); font-size: var(--wd-web-text-xs); letter-spacing: 0.03em; }
.hl-log {
  position: absolute; right: 0; bottom: 0; z-index: 2; width: 62%;
  padding: 12px 14px; border-radius: 14px; background: #fff; color: #0F172A;
  box-shadow: 0 24px 44px -20px rgba(0, 0, 0, 0.75);
}
.hl-log-kopf { display: flex; align-items: center; gap: 8px; }
.hl-log-kopf .dlx-ico { width: 16px; height: 16px; color: #1D4ED8; }
.hl-log-kopf strong { font-size: var(--wd-web-text-sm); font-weight: 600; }
.hl-log-zeile {
  margin-top: 7px; padding-top: 7px; border-top: 1px solid #EEF2F7;
  color: #475569; font-family: var(--font-mono); font-size: var(--wd-web-text-xs);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Grafik labor (Bildung) ---------- */
.lab-szene {
  margin: 0; width: 100%; max-width: 500px; justify-self: end;
  padding: 18px; border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(23, 36, 63, 0.92) 0%, rgba(16, 26, 47, 0.92) 100%);
  box-shadow: 0 34px 60px -30px rgba(0, 0, 0, 0.8);
}
.lab-kopf { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; }
.lab-kopf .dlx-ico { width: 18px; height: 18px; color: #8DBBFF; }
.lab-kopf strong { color: #E2E8F5; font-weight: 600; font-size: var(--wd-web-text-sm); }
.lab-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lab-geraet {
  position: relative; aspect-ratio: 4 / 3; padding: 4px; border-radius: 8px;
  background: #0C1526; border: 1px solid rgba(255, 255, 255, 0.12);
}
.lab-bild { display: block; height: 100%; border-radius: 5px; background: linear-gradient(135deg, #1E3A6E 0%, #3B2F6B 100%); opacity: 0.5; }
.lab-geraet--aktiv {
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35), 0 0 26px rgba(59, 130, 246, 0.5);
  animation: lab-glimmen 3.2s ease-in-out infinite;
}
@keyframes lab-glimmen { 50% { box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.22), 0 0 34px rgba(59, 130, 246, 0.65); } }
.lab-geraet--aktiv .lab-bild { opacity: 1; }
/* Hinweis auf dem Schuelergeraet (Host = rot): transparent, nicht heimlich. */
.lab-banner {
  position: absolute; left: 50%; top: -13px; transform: translateX(-50%); z-index: 2;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  background: #DC2626; color: #fff; box-shadow: 0 6px 14px -6px rgba(220, 38, 38, 0.8);
  font-size: var(--wd-web-text-xs); font-weight: 600;
}
.lab-zeiger { left: 46%; top: 42%; }

/* ---------- Grafik anruf (Familie & Freunde) ---------- */
.an-szene { position: relative; margin: 0; width: 100%; max-width: 480px; justify-self: end; padding-bottom: 76px; }
.an-host { width: 80%; border-top: 2px solid #EF3340; }
.an-rumpf { padding: 16px 18px 20px; display: grid; gap: 12px; }
.an-feld { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); }
.an-feld small { display: block; color: #A9B6CE; font-family: var(--font-mono); font-size: var(--wd-web-text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.an-feld strong {
  display: block; margin-top: 4px; color: #fff; font-family: var(--font-display);
  font-size: var(--wd-web-text-2xl); font-weight: 600; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.an-pin { color: #FF9AA2 !important; letter-spacing: 0.12em !important; }
.an-blase {
  position: absolute; right: 0; bottom: 0; z-index: 2; width: 66%;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 18px 18px 4px 18px;
  background: #fff; color: #0F172A;
  box-shadow: 0 24px 44px -20px rgba(0, 0, 0, 0.75);
  animation: an-schweben 5s ease-in-out infinite;
}
@keyframes an-schweben { 50% { transform: translateY(-4px); } }
.an-blase-ico {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: #EFF6FF; color: #1D4ED8;
}
.an-blase-ico .dlx-ico { width: 19px; height: 19px; }
.an-blase > div { display: grid; gap: 2px; min-width: 0; }
.an-blase small { color: #64748B; font-size: var(--wd-web-text-xs); }
.an-blase strong { font-size: var(--wd-web-text-sm); font-weight: 600; line-height: var(--wd-leading-body); }

@media (max-width: 560px) {
  .hl-liste { padding: 8px; gap: 6px; }
  .hl-zeile { gap: 10px; padding: 8px 10px; }
  .hl-ico { width: 30px; height: 30px; }
  .hl-badge { display: none; }
  .hl-szene--log .hl-app { width: 100%; }
  .hl-log { width: 78%; }
  .lab-szene { padding: 14px; }
  .lab-raster { gap: 9px; }
  .an-host { width: 90%; }
  .an-feld strong { font-size: var(--wd-web-text-xl); }
  .an-blase { width: 82%; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-geraet--aktiv, .an-blase { animation: none; }
}

/* ---------- Grafik vergleich (Alternativ- und Vergleichsseiten) ----------
   Auszug aus der Vergleichstabelle derselben Seite; WinDesk als blaues Band. */
.vg-szene { margin: 0; width: 100%; max-width: 500px; justify-self: end; }
.vg-karte {
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #17243F 0%, #101A2F 100%);
  border: 1px solid rgba(255, 255, 255, 0.1); border-top: 2px solid #2563EB;
  box-shadow: 0 34px 60px -30px rgba(0, 0, 0, 0.8);
}
.vg-kopf { padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.vg-kopf strong { color: #E2E8F5; font-weight: 600; font-size: var(--wd-web-text-sm); }
.vg-raster {
  display: grid; align-items: stretch;
  grid-template-columns: minmax(0, 1fr) repeat(var(--n), 84px) 92px;
}
.vg-spalte {
  display: flex; align-items: flex-end; justify-content: center; text-align: center;
  padding: 12px 6px 10px; color: #A9B6CE;
  font-family: var(--font-mono); font-size: var(--wd-web-text-xs); letter-spacing: 0.02em;
}
.vg-spalte-wd { color: #fff; font-weight: 600; background: rgba(37, 99, 235, 0.22); }
.vg-merkmal {
  display: flex; align-items: center;
  padding: 11px 10px 11px 18px; border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: #DCE4F2; font-size: var(--wd-web-text-sm);
}
.vg-zelle {
  display: flex; align-items: center; justify-content: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: var(--wd-web-text-base); font-weight: 700;
}
.vg-zelle--no { color: #F87171; }
.vg-zelle--partial { color: #FBBF24; }
.vg-zelle--unknown { color: #A9B6CE; }
.vg-zelle--wd { color: #4ADE80; background: rgba(37, 99, 235, 0.16); }
.vg-fuss {
  padding: 11px 18px; border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: #A9B6CE; font-family: var(--font-mono); font-size: var(--wd-web-text-xs); letter-spacing: 0.03em;
}
@media (max-width: 560px) {
  .vg-raster { grid-template-columns: minmax(0, 1fr) repeat(var(--n), 80px) 68px; }
  .vg-spalte { padding-left: 2px; padding-right: 2px; }
  .vg-merkmal { padding-left: 14px; font-size: var(--wd-web-text-xs); }
  .vg-kopf, .vg-fuss { padding-left: 14px; padding-right: 14px; }
}


/* ===== komponenten/25-aktionen.css ===== */
/* 25-aktionen.css — zeitlich begrenzte Aktionen (docs/AKTIONEN.md).
 *
 * Vier Orte: der Banner ueber der Navigation (teile/aktion-banner), der
 * Block oben auf der Startseite (teile/aktion-start), die Aktionsseite
 * (aktion.blade.php) und die Aktionspreise auf /preise (teile/aktion-preis,
 * Prepaid-Pakete).
 *
 * Alles startet versteckt (`hidden`) und wird nach Datum eingeblendet
 * (public/js/aktionen.js). Weil die Regeln hier `display` setzen, muss
 * `[hidden]` ausdruecklich gewinnen — sonst stuende jede Aktion immer da.
 *
 * Zwei Farbvarianten, sonst dieselbe Form:
 *   halloween   sattes Kuerbisorange, Tinte darauf
 *   black-week  Schwarz, Gelb als Signal, Akzent im Markenverlauf
 * Die Site kennt kein dunkles Farbschema; die Flaechen sind deshalb fest.
 */

.aktion-banner[hidden],
.start-aktion[hidden],
.aktion-uhr-feld[hidden],
.aktion-preis[hidden],
.prepaid-pack-bonus[hidden] { display: none !important; }

/* ---------------------------------------------------------------
   1 · BANNER
   Laut, aber ruhig: satte Flaeche der Aktion, die Zahl gross vorne,
   Enddatum, ein knapper Countdown und ein echter Knopf. 58px hoch am
   Schreibtisch; auf dem Telefon bricht er in zwei Zeilen um.
   --------------------------------------------------------------- */
.aktion-banner {
  position: relative;
  overflow: hidden;
  font-family: var(--font-family);
  background-color: #05070D;
  color: #F8FAFC;
}
/* Das Muster liegt auf einem Pseudoelement: die Flaeche selbst bleibt
   einfarbig, damit der Kontrast-Waechter sie messen kann. */
.aktion-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.aktion-banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  pointer-events: none;
}

/* Halloween: Kuerbisorange, Tinte darauf, ein feines Punkteraster. */
.aktion-banner--halloween { background-color: #F97316; color: #1C0F03; }
.aktion-banner--halloween::before {
  background-image:
    radial-gradient(circle at 12% 50%, rgba(255, 237, 213, 0.45), transparent 38%),
    radial-gradient(rgba(124, 45, 18, 0.22) 1.2px, transparent 1.4px);
  background-size: auto, 16px 16px;
}
.aktion-banner--halloween::after { background: #9A3412; }

/* Black Week: Schwarz, Schraegstreifen, Gelb als Signal. */
.aktion-banner--black-week { background-color: #05070D; color: #F8FAFC; }
.aktion-banner--black-week::before {
  background-image: repeating-linear-gradient(135deg, rgba(250, 204, 21, 0.07) 0 10px, transparent 10px 22px);
}
.aktion-banner--black-week::after { background: linear-gradient(90deg, #FACC15, #3B82F6 60%, #8B5CF6); }
.aktion-banner--teaser::after { opacity: 0.7; }

.aktion-banner-innen {
  position: relative;
  z-index: 1;
  max-width: var(--wd-container);
  margin-inline: auto;
  padding: 0.5rem var(--wd-gutter) 0.625rem;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.25rem;
}
.aktion-banner-text {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  font-size: var(--wd-web-text-base);
  font-weight: 600;
  line-height: var(--wd-leading-heading);
}
.aktion-banner-marke {
  align-self: center;
  padding: 5px 8px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.aktion-banner--halloween .aktion-banner-marke { background: #1C0F03; color: #FED7AA; }
.aktion-banner--black-week .aktion-banner-marke { background: #FACC15; color: #05070D; }
.aktion-banner--teaser .aktion-banner-marke {
  background: transparent;
  color: #FACC15;
  box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.7);
}
.aktion-banner-zahl {
  font-family: var(--font-display);
  font-size: var(--wd-web-text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--wd-leading-none, 1);
  white-space: nowrap;
}
.aktion-banner--halloween .aktion-banner-zahl,
.aktion-banner--halloween .aktion-banner-satz { color: #1C0F03; }
.aktion-banner--black-week .aktion-banner-zahl { color: #FACC15; }
.aktion-banner--black-week .aktion-banner-satz { color: #FFFFFF; }
.aktion-banner-ende {
  font-size: var(--wd-web-text-sm);
  font-weight: 500;
  white-space: nowrap;
}
.aktion-banner--halloween .aktion-banner-ende { color: #431407; }
.aktion-banner--black-week .aktion-banner-ende { color: #CBD5E1; }

/* Der knappe Countdown: eine Pille in Mono. */
.aktion-uhr-kurz {
  flex: none;
  margin: 0;
  padding: 6px 11px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-sm);
  line-height: var(--wd-leading-heading);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.aktion-uhr-kurz-zahl { font-weight: 700; }
.aktion-banner--halloween .aktion-uhr-kurz { background: #1C0F03; color: #FFEDD5; }
.aktion-banner--halloween .aktion-uhr-kurz-label { color: #FDBA74; }
.aktion-banner--halloween .aktion-uhr-kurz-zahl { color: #FFFFFF; }
.aktion-banner--black-week .aktion-uhr-kurz {
  background: #161A24;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  color: #E2E8F0;
}
.aktion-banner--black-week .aktion-uhr-kurz-label { color: #CBD5E1; }
.aktion-banner--black-week .aktion-uhr-kurz-zahl { color: #FFFFFF; }

/* Der Knopf: eine echte Flaeche, nicht ein unterstrichener Link. */
.aktion-banner-knopf {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0 1rem;
  border-radius: 10px;
  font-size: var(--wd-web-text-sm);
  font-weight: 700;
  line-height: var(--wd-leading-heading);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.aktion-banner--halloween .aktion-banner-knopf { background: #1C0F03; color: #FFFFFF; }
.aktion-banner--halloween .aktion-banner-knopf:hover { background: #431407; color: #FFFFFF; }
.aktion-banner--black-week .aktion-banner-knopf { background: #FACC15; color: #05070D; }
.aktion-banner--black-week .aktion-banner-knopf:hover { background: #FDE047; color: #05070D; }
.aktion-banner--teaser .aktion-banner-knopf {
  background: transparent;
  color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.aktion-banner--teaser .aktion-banner-knopf:hover { background: rgba(255, 255, 255, 0.1); color: #FFFFFF; }
.aktion-banner-knopf:hover { transform: translateY(-1px); }
.aktion-banner-knopf svg { transition: transform 0.2s ease; }
.aktion-banner-knopf:hover svg { transform: translateX(2px); }

.aktion-banner-zu {
  flex: none;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.aktion-banner-zu:hover { background: rgba(0, 0, 0, 0.12); }
.aktion-banner--black-week .aktion-banner-zu:hover { background: rgba(255, 255, 255, 0.1); }
.aktion-banner-knopf:focus-visible,
.aktion-banner-zu:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.aktion-banner--halloween .aktion-banner-knopf:focus-visible { outline-color: #1C0F03; }

/* Mittlere Breite: das Schild faellt weg, die Zahl traegt die Aktion. */
@media (max-width: 1100px) {
  .aktion-banner:not(.aktion-banner--teaser) .aktion-banner-marke { display: none; }
}
/* Schmal: der Satz oben neben dem Schliessknopf, darunter Countdown und
   Knopf in einer Reihe. Ab 860px, nicht erst ab 720px: dazwischen
   drueckten Countdown und Knopf den Satz auf vier Zeilen. */
@media (max-width: 860px) {
  .aktion-banner-innen {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5rem 0.75rem;
    padding: 0.625rem calc(var(--wd-gutter) - 8px) 0.75rem var(--wd-gutter);
  }
  .aktion-banner-text { flex: 1 1 calc(100% - 52px); order: 1; }
  .aktion-banner-zu { order: 2; align-self: flex-start; margin: -2px 0 0 auto; }
  .aktion-uhr-kurz { order: 3; padding: 8px 10px; }
  .aktion-uhr-kurz-label { display: none; }
  .aktion-banner-knopf { order: 4; min-height: 36px; padding: 0 0.875rem; }
  .aktion-banner-zahl { font-size: var(--wd-web-text-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .aktion-banner-knopf,
  .aktion-banner-knopf svg { transition: none; }
  .aktion-banner-knopf:hover,
  .aktion-banner-knopf:hover svg { transform: none; }
}

/* ---------------------------------------------------------------
   2 · AKTIONSSEITE
   --------------------------------------------------------------- */
.aktion-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.aktion-anmelden {
  margin: 1rem 0 0;
  font-size: var(--wd-web-text-sm);
}

/* Der Kopf mit Countdown: links Text, rechts die Uhr. */
.aktion-hero-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2.5rem;
}
@media (max-width: 960px) {
  .aktion-hero-raster { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

/* Saisonaler Ton: nur Akzentfarbe und Lichtfleck, die Form bleibt die
   des Seitenkopfs. */
.aktion-hero--halloween h1 .akzent { color: #FDBA74; }
.aktion-hero--halloween .hero-eyebrow { color: #FDBA74; }
.aktion-hero--halloween::after {
  background: radial-gradient(closest-side, rgba(249, 115, 22, 0.32), transparent);
}
.aktion-hero--black-week {
  background: radial-gradient(115% 100% at 76% 4%, #111827 0%, #070A12 50%, #030408 100%);
}
.aktion-hero--black-week h1 .akzent {
  color: #93C5FD;
}
.aktion-hero--black-week::after {
  background: radial-gradient(closest-side, rgba(139, 92, 246, 0.30), transparent);
}

.aktion-countdown {
  padding: 1.25rem 1.375rem 1.125rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.aktion-countdown-label {
  margin: 0 0 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: var(--wd-leading-heading);
  text-transform: uppercase;
  color: #A9B6CE;
}
.aktion-countdown-felder { display: flex; gap: 0.5rem; }
.aktion-countdown-feld {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4.25rem;
  padding: 0.75rem 0.5rem 0.625rem;
  border-radius: 12px;
  background: rgba(8, 13, 24, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.aktion-countdown-feld[hidden] { display: none; }
.aktion-countdown-zahl {
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-2xl);
  font-weight: 600;
  line-height: var(--wd-leading-none, 1);
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
.aktion-countdown-einheit {
  margin-top: 0.375rem;
  font-size: var(--wd-web-text-xs);
  line-height: var(--wd-leading-heading);
  color: #A9B6CE;
}
.aktion-countdown-ende {
  margin: 0.75rem 0 0;
  font-size: var(--wd-web-text-xs);
  line-height: var(--wd-leading-body);
  color: #A9B6CE;
}
.aktion-hero--halloween .aktion-countdown { border-color: rgba(251, 146, 60, 0.35); }
.aktion-hero--black-week .aktion-countdown { border-color: rgba(96, 165, 250, 0.35); }
@media (max-width: 420px) {
  .aktion-countdown-felder { gap: 0.375rem; }
  .aktion-countdown-feld { min-width: 0; flex: 1 1 0; }
}

/* Preistabelle */
.aktion-abschnitt + .aktion-abschnitt { padding-top: 0; }
.aktion-tabelle {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--slate-200, #E2E8F0);
  border-radius: 16px;
  overflow: hidden;
  background: #FFFFFF;
}
.aktion-tabelle--bonus { max-width: 560px; }
.aktion-tabelle th,
.aktion-tabelle td {
  padding: 0.875rem 1.125rem;
  text-align: left;
  font-size: var(--wd-web-text-base);
  border-bottom: 1px solid var(--slate-100, #F1F5F9);
}
.aktion-tabelle tbody tr:last-child > * { border-bottom: 0; }
.aktion-tabelle thead th {
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-600, #475569);
  background: var(--slate-50, #F8FAFC);
}
.aktion-tabelle tbody th { font-weight: 600; color: var(--slate-900, #0F172A); }
.aktion-tabelle td { color: var(--slate-700, #334155); font-variant-numeric: tabular-nums; }
.aktion-tabelle s { color: var(--slate-500, #64748B); text-decoration-thickness: 1.5px; }
.aktion-tabelle strong { color: var(--slate-900, #0F172A); }
.aktion-tabelle--bonus td strong { color: #9A3412; }
.aktion-tabelle--jahr td:nth-child(3) { background: #EFF6FF; }
.aktion-tabelle--jahr td:nth-child(3) strong { color: #1E40AF; }
.aktion-tabelle-hinweis {
  margin: 0.875rem 0 0;
  font-size: var(--wd-web-text-sm);
  color: var(--slate-500, #64748B);
}

/* Schmal: jede Zeile wird eine Karte, die Spaltenkoepfe stehen als
   Beschriftung vor dem Wert (aus data-label). */
@media (max-width: 720px) {
  .aktion-tabelle,
  .aktion-tabelle tbody,
  .aktion-tabelle tr,
  .aktion-tabelle th,
  .aktion-tabelle td { display: block; width: 100%; }
  .aktion-tabelle { border: 0; border-radius: 0; background: transparent; overflow: visible; }
  .aktion-tabelle thead { display: none; }
  .aktion-tabelle tbody tr {
    margin-bottom: 0.75rem;
    border: 1px solid var(--slate-200, #E2E8F0);
    border-radius: 14px;
    background: #FFFFFF;
    overflow: hidden;
  }
  .aktion-tabelle th,
  .aktion-tabelle td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.625rem 1rem;
  }
  .aktion-tabelle th::before,
  .aktion-tabelle td::before {
    content: attr(data-label);
    font-size: var(--wd-web-text-sm);
    font-weight: 500;
    color: var(--slate-500, #64748B);
  }
  /* Die Zeilenkoepfe (Paket bzw. Plan) brauchen keine Beschriftung: der
     Plan steht als Titel der Karte, der bezahlte Betrag fuer sich. */
  .aktion-tabelle--jahr tbody th { background: var(--slate-50, #F8FAFC); font-size: var(--wd-web-text-md); }
  .aktion-tabelle--jahr tbody th::before { content: none; }
  .aktion-tabelle tbody tr:last-child > * { border-bottom: 1px solid var(--slate-100, #F1F5F9); }
  .aktion-tabelle tbody tr > :last-child { border-bottom: 0; }
}

/* Aktionsbedingungen */
.aktion-bedingungen-rumpf { max-width: var(--wd-web-measure-wide, 760px); }
.aktion-zeitraum {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0 0 1.25rem;
  padding: 0.875rem 1.125rem;
  border-radius: 12px;
  background: var(--slate-50, #F8FAFC);
  border: 1px solid var(--slate-100, #F1F5F9);
}
.aktion-zeitraum dt {
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-600, #475569);
  align-self: center;
}
.aktion-zeitraum dd { margin: 0; font-size: var(--wd-web-text-base); color: var(--slate-900, #0F172A); }
.aktion-bedingungen {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}
.aktion-bedingungen li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--wd-web-text-base);
  color: var(--slate-700, #334155);
}
.aktion-bedingungen li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--primary, #2563EB);
  transform: rotate(45deg);
}
.aktion-automatisch {
  margin: 1.25rem 0 0;
  font-size: var(--wd-web-text-base);
  color: var(--slate-700, #334155);
}
.aktion-weiter { margin: 1rem 0 0; }
.aktion-weiter a {
  font-weight: 600;
  color: var(--accent-strong, #2563EB);
  text-decoration: none;
  border-bottom: 1px solid rgba(37, 99, 235, 0.3);
}
.aktion-weiter a:hover { border-bottom-color: currentColor; }

/* Hinweis auf die naechste Aktion */
.aktion-vorab { padding: 2.5rem 0 3.5rem; }
.aktion-vorab-karte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem 1rem;
  margin: 0;
  padding: 1.125rem 1.375rem;
  border-radius: 16px;
  border: 1px solid var(--slate-200, #E2E8F0);
  background: var(--slate-50, #F8FAFC);
}
.aktion-vorab-marke {
  flex: none;
  padding: 5px 9px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  background: #0C1526;
  color: #FFFFFF;
}
.aktion-vorab--halloween .aktion-vorab-marke { background: #9A3412; }
.aktion-vorab-text {
  flex: 1 1 18rem;
  font-size: var(--wd-web-text-base);
  color: var(--slate-800, #1E293B);
}

/* ---------------------------------------------------------------
   3 · AKTIONSPREISE AUF /preise
   Ein Kasten zwischen Kopf und Merkmalen der Karte.
   --------------------------------------------------------------- */
.aktion-preis {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0 0 1.25rem;
  padding: 0.75rem 0.875rem;
  border-radius: 12px;
  text-align: left;
}
.aktion-preis-marke {
  align-self: flex-start;
  padding: 4px 7px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.aktion-preis-zeile {
  font-size: var(--wd-web-text-sm);
  line-height: var(--wd-leading-heading);
  font-weight: 500;
}
.aktion-preis-zeile strong { font-weight: 700; }
.aktion-preis-zeile s { text-decoration-thickness: 1.5px; }
.aktion-preis-fein {
  font-size: var(--wd-web-text-xs);
  line-height: var(--wd-leading-body);
}

/* Black Week auf hellen Karten */
.aktion-preis--black-week {
  background: #05070D;
  color: #E2E8F0;
  box-shadow: inset 0 -2px 0 #3B82F6;
}
.aktion-preis--black-week .aktion-preis-marke { background: #FFFFFF; color: #05070D; }
.aktion-preis--black-week .aktion-preis-zeile { color: #FFFFFF; }
.aktion-preis--black-week .aktion-preis-zeile s,
.aktion-preis--black-week .aktion-preis-fein { color: #A9B6CE; }
/* ... und auf der dunklen Light-Karte: Rand statt Flaeche. */
.pricing-card-featured .aktion-preis--black-week {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.45);
}

/* Halloween auf der Prepaid-Karte */
.aktion-preis--halloween {
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  color: #7C2D12;
}
.aktion-preis--halloween .aktion-preis-marke { background: #9A3412; color: #FFFFFF; }
.aktion-preis--halloween .aktion-preis-zeile { color: #7C2D12; font-weight: 600; }
.aktion-preis--halloween .aktion-preis-fein { color: #9A3412; }

/* Je Paket das gutgeschriebene Guthaben. Zwei Klassen, damit die Regel
   `.prepaid-pack span` (grau) verliert. */
.prepaid-pack .prepaid-pack-bonus {
  margin-top: 0.125rem;
  font-size: var(--wd-web-text-xs);
  font-weight: 700;
  color: #9A3412;
}

/* Die Option "Zusaetzliche Benutzer" ist doppelt so breit wie eine
   Plankarte; der Kasten soll dort nicht ueber die ganze Breite laufen. */
.pricing-card-addon .aktion-preis { align-self: flex-start; max-width: 100%; }

/* ---------------------------------------------------------------
   4 · STARTSEITE
   Der grosse Block oben im Hero, ueber der H1. Die Zahl dominiert, daneben
   ein Satz, rechts Countdown und Knopf. Er steht auf 1440x900 vollstaendig
   ueber dem Falz.
   --------------------------------------------------------------- */
/* Mit Block rueckt der Hero naeher an die Navigation: der Abstand von
   104px oben war fuer die H1 gedacht, nicht fuer eine Karte davor. */
.sh-hero:has(> .start-aktion:not([hidden])) { padding-top: 2.25rem; }

.start-aktion {
  position: relative;
  z-index: 2;
  max-width: var(--wd-container);
  margin: 0 auto 3rem;
}
.start-aktion-karte {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(17rem, auto);
  align-items: center;
  gap: 1.5rem 2.5rem;
  padding: 2rem 2.25rem;
  border-radius: 24px;
}
.start-aktion-karte::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.start-aktion-karte > * { position: relative; z-index: 1; }

/* Halloween: Orange, Tinte, ein warmer Schein links hinter dem Kuerbis. */
.start-aktion--halloween .start-aktion-karte {
  background-color: #F97316;
  color: #1C0F03;
  box-shadow: 0 30px 80px -34px rgba(249, 115, 22, 0.75);
}
.start-aktion--halloween .start-aktion-karte::before {
  background-image:
    radial-gradient(circle at 10% 50%, rgba(255, 237, 213, 0.55), transparent 32%),
    radial-gradient(rgba(124, 45, 18, 0.2) 1.3px, transparent 1.5px);
  background-size: auto, 18px 18px;
}
/* Black Week: Schwarz mit gelbem Rand, feine Schraegstreifen. */
.start-aktion--black-week .start-aktion-karte {
  background-color: #000000;
  color: #FFFFFF;
  box-shadow: inset 0 0 0 2px #FACC15, 0 30px 80px -34px rgba(250, 204, 21, 0.45);
}
.start-aktion--black-week .start-aktion-karte::before {
  background-image: repeating-linear-gradient(135deg, rgba(250, 204, 21, 0.06) 0 12px, transparent 12px 26px);
}

.start-aktion-kopf { display: flex; align-items: center; gap: 0.75rem; }
.start-aktion-kuerbis { flex: none; width: 112px; height: 112px; }
.start-aktion-schein { animation: wd-kuerbis 4.5s ease-in-out infinite; transform-origin: center; }
@keyframes wd-kuerbis { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }

/* Die Zahl ist eine Anzeige, kein Satz: sie steht ausserhalb der
   Typografie-Leiter (Ausnahme .aktion-zahl in check-typography.mjs). */
.start-aktion-zahl {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 7.5vw, 7.5rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.045em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.start-aktion--halloween .start-aktion-zahl { color: #1C0F03; }
.start-aktion--black-week .start-aktion-zahl { color: #FACC15; }

.start-aktion-eyebrow {
  margin: 0 0 0.375rem;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: var(--wd-leading-heading);
  text-transform: uppercase;
}
.start-aktion--halloween .start-aktion-eyebrow { color: #431407; }
.start-aktion--black-week .start-aktion-eyebrow { color: #FACC15; }
.start-aktion-titel {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: var(--wd-web-text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--wd-leading-heading);
  text-wrap: balance;
}
.start-aktion--halloween .start-aktion-titel { color: #1C0F03; }
.start-aktion--black-week .start-aktion-titel { color: #FFFFFF; }
.start-aktion-text {
  margin: 0;
  max-width: 40ch;
  font-size: var(--wd-web-text-md);
  line-height: var(--wd-leading-body);
}
.start-aktion--halloween .start-aktion-text { color: #2A1405; }
.start-aktion--halloween .start-aktion-text strong { color: #1C0F03; }
.start-aktion--black-week .start-aktion-text { color: #CBD5E1; }

/* Der Preisvergleich der Black Week. */
.start-aktion-preise {
  list-style: none;
  margin: 0.875rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.start-aktion-preise li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.125rem 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  line-height: var(--wd-leading-heading);
}
.start-aktion-plan { font-size: var(--wd-web-text-base); font-weight: 700; color: #FFFFFF; }
.start-aktion-betrag {
  font-family: var(--font-display);
  font-size: var(--wd-web-text-xl);
  font-weight: 700;
  color: #FACC15;
  white-space: nowrap;
}
.start-aktion-statt { font-size: var(--wd-web-text-sm); color: #CBD5E1; }
.start-aktion-statt s { color: #CBD5E1; text-decoration-thickness: 1.5px; }
.start-aktion-folge { font-size: var(--wd-web-text-xs); color: #CBD5E1; }

/* Rechts: Countdown, Enddatum, Knopf. */
.start-aktion-handeln { display: flex; flex-direction: column; gap: 0.625rem; }
.start-aktion-uhr-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: var(--wd-leading-heading);
  text-transform: uppercase;
}
.start-aktion--halloween .start-aktion-uhr-label { color: #431407; }
.start-aktion--black-week .start-aktion-uhr-label { color: #CBD5E1; }
.aktion-uhr-gross { display: flex; gap: 0.5rem; }
.aktion-uhr-feld {
  flex: 1 1 0;
  min-width: 3.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.625rem 0.25rem 0.5rem;
  border-radius: 12px;
}
.start-aktion--halloween .aktion-uhr-feld { background: #1C0F03; }
.start-aktion--black-week .aktion-uhr-feld { background: #141821; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.aktion-uhr-zahl {
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-2xl);
  font-weight: 700;
  line-height: var(--wd-leading-none, 1);
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
.aktion-uhr-einheit {
  margin-top: 0.3rem;
  font-size: var(--wd-web-text-xs);
  line-height: var(--wd-leading-heading);
}
.start-aktion--halloween .aktion-uhr-einheit { color: #FED7AA; }
.start-aktion--black-week .aktion-uhr-einheit { color: #CBD5E1; }
.start-aktion-ende {
  margin: 0;
  font-size: var(--wd-web-text-xs);
  line-height: var(--wd-leading-body);
}
.start-aktion--halloween .start-aktion-ende { color: #431407; }
.start-aktion--black-week .start-aktion-ende { color: #CBD5E1; }
.start-aktion-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 54px;
  margin-top: 0.25rem;
  padding: 0 1.25rem;
  border-radius: 12px;
  font-size: var(--wd-web-text-base);
  font-weight: 700;
  line-height: var(--wd-leading-heading);
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.start-aktion--halloween .start-aktion-knopf { background: #1C0F03; color: #FFFFFF; }
.start-aktion--halloween .start-aktion-knopf:hover { background: #431407; color: #FFFFFF; }
.start-aktion--black-week .start-aktion-knopf { background: #FACC15; color: #000000; }
.start-aktion--black-week .start-aktion-knopf:hover { background: #FDE047; color: #000000; }
.start-aktion-knopf:hover { transform: translateY(-1px); }
.start-aktion-knopf:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.start-aktion--halloween .start-aktion-knopf:focus-visible { outline-color: #1C0F03; }
.start-aktion-details {
  align-self: center;
  font-size: var(--wd-web-text-sm);
  font-weight: 600;
  line-height: var(--wd-leading-heading);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.start-aktion--halloween .start-aktion-details,
.start-aktion--halloween .start-aktion-details:hover { color: #1C0F03; }
.start-aktion--black-week .start-aktion-details,
.start-aktion--black-week .start-aktion-details:hover { color: #E2E8F0; }

/* Vor dem Start: ein schmaler, aber deutlicher Hinweis. */
.start-aktion-vorab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 1rem 1.25rem;
  border-radius: 16px;
  background-color: #05070D;
  box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.6), 0 0 0 4px rgba(250, 204, 21, 0.08);
}
.start-aktion-vorab-marke {
  flex: none;
  padding: 5px 9px;
  border-radius: 6px;
  background: #FACC15;
  color: #05070D;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}
.start-aktion-vorab-text {
  flex: 1 1 20rem;
  margin: 0;
  font-size: var(--wd-web-text-md);
  font-weight: 600;
  line-height: var(--wd-leading-heading);
  color: #FFFFFF;
}
.start-aktion-vorab-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0 1rem;
  border-radius: 10px;
  background: #FACC15;
  color: #05070D;
  font-size: var(--wd-web-text-sm);
  font-weight: 700;
  line-height: var(--wd-leading-heading);
  text-decoration: none;
  white-space: nowrap;
}
.start-aktion-vorab-link:hover { background: #FDE047; color: #05070D; }

@media (max-width: 1100px) {
  .start-aktion-karte { grid-template-columns: auto minmax(0, 1fr); }
  .start-aktion-handeln {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "label knopf" "uhr knopf" "ende details";
    align-items: center;
    gap: 0.5rem 1.5rem;
  }
  .start-aktion-uhr-label { grid-area: label; }
  .start-aktion-handeln .aktion-uhr-gross { grid-area: uhr; }
  .start-aktion-ende { grid-area: ende; }
  .start-aktion-knopf { grid-area: knopf; margin-top: 0; }
  .start-aktion-details { grid-area: details; }
}
@media (max-width: 720px) {
  .sh-hero:has(> .start-aktion:not([hidden])) { padding-top: 1.25rem; }
  .start-aktion { margin-bottom: 2rem; }
  .start-aktion-karte {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: 1.5rem 1.25rem 1.25rem;
    border-radius: 20px;
  }
  .start-aktion-kuerbis { width: 76px; height: 76px; }
  .start-aktion-zahl { font-size: clamp(4rem, 19vw, 5.5rem); }
  .start-aktion-titel { font-size: var(--wd-web-text-xl); }
  .start-aktion-text { font-size: var(--wd-web-text-base); }
  .start-aktion-handeln { display: flex; flex-direction: column; gap: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .start-aktion-schein { animation: none; }
  .start-aktion-knopf { transition: none; }
  .start-aktion-knopf:hover { transform: none; }
}