/* ==========================================================================
   Frachtfox — Design-System
   Richtung „Klare Logistik": hell, warm, sachlich. Strukturierte Raster,
   Fox-Orange als praeziser Akzent, ruhige Tiefe. Soll wie etablierte deutsche
   B2B-Software lesen, nicht wie ein Template.

   Uebernommen aus dem WordPress-Theme und dabei ueberarbeitet. Die Aenderungen
   sind an Ort und Stelle begruendet; die groesseren sind:
     · semantisches Markup (Listen sind Listen, Ueberschriften haben Rang)
     · ein Icon-Sprite statt dreissigmal derselbe Pfad
     · EIN zweispaltiger Abschnitt (.split) statt drei fast gleicher
     · Ziffern laufen tabellarisch, damit Preisspalten nicht zappeln
     · Ankersprünge landen nicht mehr unter dem klebenden Kopf
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design-Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Flaechen — warme Neutraltoene */
  --paper:   #FBF8F3;
  --paper-2: #F4EFE6;
  --white:   #FFFFFF;

  /* Schrift-Schwarz — warme Skala, nie reines Schwarz */
  --ink:     #1F1B15;
  --ink-2:   #3A352B;
  --body:    #554F43;
  --mute:    #8A8273;
  --faint:   #A9A192;

  /* Linien */
  --line:    #ECE5D7;
  --line-2:  #E1D8C6;
  --line-3:  #D4C9B3;

  /* Fox-Orange — die Signaturfarbe */
  --fox:       #E5571F;
  --fox-600:   #CB4715;
  --fox-text:  #B5400F;   /* erst dieser Ton erreicht AA auf hellem Grund */
  --fox-tint:  #FCEDE3;
  --fox-tint2: #F8DFCE;

  /* Dunkler Anker (nur Abschluss-CTA und Fussbereich) */
  --ink-900: #1A1610;
  --ink-850: #231E16;
  --on-dark:      #F7F2E8;
  --on-dark-2:    #D8CFBD;
  --on-dark-mute: #ABA088;
  --line-dark:    rgba(247, 242, 232, 0.12);

  /* Typografie */
  --f-display: "Schibsted Grotesk", "Hanken Grotesk", system-ui, sans-serif;
  --f-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;

  --fs-eyebrow: 0.78rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.12rem, 1.02rem + 0.4vw, 1.32rem);
  --fs-h4: clamp(1.12rem, 1.02rem + 0.4vw, 1.3rem);
  --fs-h3: clamp(1.3rem, 1.12rem + 0.8vw, 1.7rem);
  --fs-h2: clamp(1.95rem, 1.45rem + 2.1vw, 3.05rem);
  --fs-h1: clamp(2.6rem, 1.85rem + 3.4vw, 4.5rem);

  /* Layout */
  --container: 1200px;
  --container-wide: 1320px;
  --container-narrow: 760px;   /* enger als zuvor: ~75 Zeichen lesen sich besser */
  --gutter: clamp(1.15rem, 0.7rem + 2.2vw, 2.5rem);
  --section-y: clamp(4rem, 3rem + 5vw, 7.5rem);
  --header-h: 74px;

  /* Radien */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Schatten — weich und warm, nie leuchtend */
  --sh-xs: 0 1px 2px rgba(31,27,21,0.05);
  --sh-sm: 0 2px 8px -2px rgba(31,27,21,0.08);
  --sh-md: 0 12px 30px -14px rgba(31,27,21,0.16);
  --sh-lg: 0 30px 64px -28px rgba(31,27,21,0.24);
  --sh-orange: 0 10px 22px -10px rgba(229,87,31,0.42);

  /* Bewegung */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.16s;
  --t: 0.28s;
}

/* --------------------------------------------------------------------------
   2. Reset & Grundlagen
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Ankersprünge (auch von anderen Seiten, auch ohne JavaScript) enden sonst
     unter dem klebenden Kopf — die Ueberschrift des Ziels ist dann unsichtbar. */
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
picture { display: block; }

/* Feines Korn unter dem gesamten Dokument — es nimmt der flachen Creme-Flaeche
   das Digitale, ohne als Textur aufzufallen.

   Bewusst als erzeugtes Rauschen (SVG-Filter, Data-URI) und NICHT als Foto von
   Papier: ein fotografiertes Blatt hat Lichtrichtung und Knickschatten und
   zeigt beim Kacheln eine sichtbare Naht. Das Rauschen kachelt nahtlos, ist
   richtungslos, kostet keine HTTP-Anfrage und wiegt ein paar hundert Byte.

   `fixed` haelt das Korn beim Scrollen still — wanderte es mit, wuerde es als
   Bewegung wahrgenommen. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.028;
  mix-blend-mode: multiply;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; padding: 0; }
dl, dd { margin: 0; }

h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  /* Verteilt die Zeilen einer Ueberschrift gleichmaessig statt ein einzelnes
     Wort in die letzte Zeile zu schieben. */
  text-wrap: balance;
}
p { text-wrap: pretty; }

::selection { background: var(--fox); color: #fff; }
:focus-visible { outline: 2px solid var(--fox); outline-offset: 3px; border-radius: 4px; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: 999px; border: 3px solid var(--paper-2); }
::-webkit-scrollbar-thumb:hover { background: var(--fox); }

/* Nur fuer Screenreader — z.B. der Hinweis, dass eine Karte ein Beispiel ist. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Unsichtbarer Zweit-Anker fuer die alten deutschen Sprungziele der
   WordPress-Seite (#funktionen, #prozess …). Geteilte Links landen damit
   weiter an der richtigen Stelle. */
.anchor-legacy { display: block; height: 0; scroll-margin-top: calc(var(--header-h) + 1rem); }

/* Icons aus dem Sprite. Groesse haengt an der Schriftgroesse des Kontexts,
   damit ein Icon neben Text immer mitwaechst. */
.i { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.i--tick { width: 1.05em; height: 1.05em; color: var(--fox); margin-top: 0.18em; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   3. Layout-Primitive
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

.section { position: relative; padding-block: var(--section-y); scroll-margin-top: var(--header-h); }

/* Dekorative Hintergrundflaeche eines Abschnitts (Zeichnung oder Foto).
   Deckkraft kommt aus dem Frontmatter, damit sie sich je Motiv einstellen
   laesst, ohne das Stylesheet anzufassen. */
.section-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-repeat: no-repeat; background-size: cover;
}
.section.has-bg > .container { position: relative; z-index: 1; }
.section--paper2 { background: var(--paper-2); }
.section--white { background: var(--white); }
.section--line-top { border-top: 1px solid var(--line); }
.section--line-bottom { border-bottom: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   4. Gemeinsame Bausteine
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fox-text);
}
.eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--fox); border-radius: 2px; }
.eyebrow--center { justify-content: center; }

.section-head { max-width: 680px; margin-bottom: clamp(2.5rem, 1.8rem + 2.5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: 1rem; font-size: var(--fs-h2); }
.section-head p { margin-top: 1.15rem; font-size: var(--fs-lead); color: var(--body); line-height: 1.55; }
.section-head--center p { margin-inline: auto; max-width: 56ch; }

.lead { font-size: var(--fs-lead); color: var(--body); line-height: 1.55; }
.fox { color: var(--fox-text); }

/* --------------------------------------------------------------------------
   5. Schaltflaechen & Links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.9em 1.5em;
  font-weight: 700; font-size: 0.98rem; letter-spacing: -0.01em;
  border-radius: var(--r-pill); border: 1.5px solid transparent;
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease),
              background var(--t), color var(--t), border-color var(--t);
  white-space: nowrap;
}
.btn .i { width: 1.05em; height: 1.05em; transition: transform var(--t) var(--ease-out); }
.btn:hover .i { transform: translateX(3px); }
/* Attrappe in der Produktkarte: sieht aus wie ein Knopf, ist aber keiner. */
.btn.is-static { pointer-events: none; }

.btn--primary { background: var(--fox); color: #fff; box-shadow: var(--sh-orange); }
.btn--primary:hover { background: var(--fox-600); transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(229,87,31,0.5); }
.btn--primary:active { transform: translateY(0); }

.btn--secondary { background: var(--white); color: var(--ink); border-color: var(--line-2); box-shadow: var(--sh-xs); }
.btn--secondary:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--sh-sm); }

.btn--ghost-dark { background: rgba(247,242,232,0.06); color: var(--on-dark); border-color: var(--line-dark); }
.btn--ghost-dark:hover { background: rgba(247,242,232,0.12); border-color: rgba(247,242,232,0.4); transform: translateY(-2px); }

.btn--lg { padding: 1.05em 1.9em; font-size: 1.05rem; }
.btn--sm { padding: 0.65em 1.15em; font-size: 0.9rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-weight: 600; color: var(--fox-text);
  transition: gap var(--t) var(--ease-out);
}
.link-arrow .i { width: 1em; height: 1em; transition: transform var(--t) var(--ease-out); }
.link-arrow:hover { gap: 0.65em; }
.link-arrow:hover .i { transform: translateX(2px); }

.pill {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.4em 0.85em; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--white);
  font-size: 0.82rem; font-weight: 500; color: var(--ink-2);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fox); }

/* --------------------------------------------------------------------------
   6. Kopfbereich
   -------------------------------------------------------------------------- */
.topbar { background: var(--ink-900); color: var(--on-dark-2); font-size: 0.82rem; text-align: center; padding: 0.55rem 1rem; }
.topbar a { color: var(--on-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.topbar b { color: #fff; }

.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(251, 248, 243, 0.85);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: var(--sh-sm); }

.nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 0.65rem; flex-shrink: 0; }
.brand > svg { width: 36px; height: 36px; }
.brand__name { font-family: var(--f-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.03em; color: var(--ink); }
.brand__name b { color: var(--fox); font-weight: 800; }

.nav__links { display: flex; align-items: center; gap: 0.2rem; }
.nav__links a {
  padding: 0.5em 0.85em; font-size: 0.94rem; font-weight: 500; color: var(--ink-2);
  border-radius: var(--r-sm); transition: color var(--t), background var(--t);
}
.nav__links a:hover { color: var(--fox-text); background: var(--fox-tint); }
.nav__actions { display: flex; align-items: center; gap: 0.7rem; }
.nav__login { font-weight: 600; font-size: 0.94rem; color: var(--ink-2); padding: 0.5em; transition: color var(--t); }
.nav__login:hover { color: var(--fox-text); }

.nav__toggle {
  display: none; width: 44px; height: 44px; border-radius: var(--r-sm);
  align-items: center; justify-content: center;
  border: 1px solid var(--line-2); background: var(--white);
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ""; display: block; width: 20px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform var(--t), opacity var(--t);
}
.nav__toggle span { position: relative; }
.nav__toggle span::before { position: absolute; top: -6px; }
.nav__toggle span::after { position: absolute; top: 6px; }
body.nav-open .nav__toggle span { background: transparent; }
body.nav-open .nav__toggle span::before { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav__toggle span::after { transform: translateY(-6px) rotate(-45deg); }

/* Sprachumschalter — bewusst klein und ruhig. Er ist eine Notausgangstuer,
   kein Angebot: die meisten Besucher brauchen ihn nie. */
.langswitch { display: inline-flex; align-items: center; gap: 1px; background: var(--line-2); border-radius: var(--r-pill); padding: 1px; }
.langswitch__item {
  font-family: var(--f-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em;
  padding: 0.42em 0.72em; border-radius: var(--r-pill);
  background: var(--paper); color: var(--mute); transition: color var(--t), background var(--t);
}
.langswitch__item:hover { color: var(--ink); background: var(--white); }
.langswitch__item.is-active { background: var(--white); color: var(--ink); box-shadow: var(--sh-xs); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.hero__copy { max-width: 600px; }
.hero h1 { font-size: var(--fs-h1); font-weight: 800; margin-top: 1.4rem; letter-spacing: -0.03em; }
.hero h1 em { font-style: normal; color: var(--fox); }
.hero__sub { margin-top: 1.5rem; font-size: var(--fs-lead); color: var(--body); max-width: 50ch; line-height: 1.55; }
.hero__sub b, .hero__sub strong { color: var(--ink-2); font-weight: 600; }
.hero__cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.85rem; }
.hero__assure { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.hero__assure li { display: inline-flex; align-items: center; gap: 0.45em; font-size: 0.86rem; color: var(--mute); font-weight: 500; }
.hero__assure .i { width: 16px; height: 16px; color: var(--fox); margin-top: 0; }

.hero__visual { position: relative; }
.hero__visual::before {
  content: ""; position: absolute; inset: -8% -6% -8% 6%;
  background: radial-gradient(60% 60% at 70% 30%, var(--fox-tint), transparent 70%);
  z-index: -1; border-radius: 50%;
}

/* Tarifkarte — helle Produktoberflaeche, in HTML nachgebaut statt Screenshot */
.ratecard { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); overflow: hidden; margin: 0; }
.ratecard__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line); }
.ratecard__head .t { font-weight: 700; font-size: 1rem; color: var(--ink); font-family: var(--f-display); }
.ratecard__head .m { font-size: 0.8rem; color: var(--mute); font-family: var(--f-mono); }
.ratecard__list { padding: 0.5rem; }
.raterow { display: grid; grid-template-columns: 1.4fr 0.9fr 1fr auto; align-items: center; gap: 0.75rem; padding: 0.85rem 0.75rem; border-radius: var(--r-md); position: relative; }
.raterow + .raterow { border-top: 1px solid var(--line); }
.raterow.is-best { background: var(--fox-tint); border-top: 1px solid transparent; }
.raterow.is-best + .raterow { border-top: 1px solid transparent; }
.raterow__carrier .name { font-weight: 700; font-size: 0.98rem; color: var(--ink); }
.raterow__carrier .svc { font-size: 0.72rem; color: var(--mute); letter-spacing: 0.02em; }
.raterow__eta { font-size: 0.82rem; color: var(--body); }
.raterow__eta b { display: block; color: var(--ink); font-weight: 600; font-size: 0.86rem; }
.raterel { display: flex; align-items: center; gap: 0.5rem; }
.raterel__bar { flex: 1; min-width: 38px; height: 6px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.raterel__bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--fox); transition: width 1s var(--ease-out); }
.raterel__bar i.is-mid { background: var(--fox-tint2); }
/* Tabellarische Ziffern: ohne sie tanzen Score und Preis beim Hochzaehlen
   und die Spalte wirkt unruhig. */
.raterel .score { font-size: 0.78rem; font-weight: 600; color: var(--ink-2); font-family: var(--f-mono); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.raterow__price { text-align: right; font-weight: 700; font-size: 1.1rem; color: var(--ink); font-family: var(--f-display); font-variant-numeric: tabular-nums; }
.raterow__price .cur { color: var(--mute); font-size: 0.72em; font-weight: 600; }
.raterow .best-flag { position: absolute; top: -8px; right: 12px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--fox); color: #fff; padding: 0.2em 0.6em; border-radius: var(--r-pill); }
/* --------------------------------------------------------------------------
   Artikel- und Landingpages (templates/article.html.twig)
   -------------------------------------------------------------------------- */

/* Antwort-Box. Steht vor dem Fliesstext und ist der Abschnitt, den eine
   Suchmaschine als Snippet und eine Antwortmaschine als Zitat nimmt. Optisch
   abgesetzt, damit die Leserin sie auch als Antwort erkennt und nicht als
   Zusammenfassung ueberliest. */
.answerbox { margin-top: 2rem; padding: 1.4rem 1.6rem; background: var(--fox-tint); border-radius: var(--r-lg); border: 1px solid var(--line); }
.answerbox__k { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fox-text); }
.answerbox ul { margin-top: 0.8rem; display: grid; gap: 0.55rem; }
.answerbox li { position: relative; padding-left: 1.2rem; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.answerbox li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--fox); }
.answerbox b, .answerbox strong { color: var(--ink); font-weight: 700; }

/* Aufmacher eines Artikels. Fester Seitenverhaeltnis-Rahmen, damit beim Laden
   nichts springt (Layout Shift), und leicht entsaettigt, damit das Foto die
   Antwort-Box darunter nicht ueberstrahlt. */
.articlefig { margin: 2rem 0 0; }
.articlefig img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); border: 1px solid var(--line); filter: saturate(0.9); }
.articlefig figcaption { margin-top: 0.6rem; font-size: 0.82rem; color: var(--mute); line-height: 1.5; }

/* Sprungziele aus dem Inhaltsverzeichnis duerfen nicht unter dem fixierten
   Kopf landen. Gleicher Wert wie bei .section. */
.prose h2[id] { scroll-margin-top: var(--header-h); }

.toc { margin-top: 2rem; padding: 1.1rem 1.4rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.toc__k { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.toc ol { margin-top: 0.6rem; padding-left: 1.2rem; display: grid; gap: 0.35rem; list-style: decimal; }
.toc a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.toc a:hover { color: var(--fox-text); border-bottom-color: var(--fox); }

/* FAQ als Definitionsliste, nicht als Akkordeon: aufgeklappter Text wird
   indexiert und zitiert, zugeklappter nicht zuverlaessig. */
.faq { margin-top: 3rem; }
.faq h2 { font-size: var(--fs-h2); }
.faq dl { margin-top: 1.2rem; display: grid; gap: 1.4rem; }
.faq dt { font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.faq dd { margin-top: 0.4rem; margin-left: 0; color: var(--body); line-height: 1.65; }

.sources { margin-top: 3rem; }
.sources h2 { font-size: 1.1rem; }
.sources ul { margin-top: 0.8rem; display: grid; gap: 0.4rem; list-style: disc; padding-left: 1.2rem; }
.sources li { font-size: 0.88rem; color: var(--body); }
.sources__date { color: var(--mute); font-size: 0.82em; }

/* Soll-Ist-Karte im Hero. Teilt sich Rahmen, Kopf und Fuss mit .ratecard;
   eigen sind nur die Zeilen, weil hier kein Carrier-Vergleich steht, sondern
   drei Zahlen zu EINER Rechnung. Die letzte Zeile ist der Betrag, um den es
   geht, und deshalb als einzige farblich abgesetzt. */
.auditcard__list { padding: 0.5rem; }
.auditrow { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0.75rem; padding: 0.85rem 0.75rem; border-radius: var(--r-md); }
.auditrow + .auditrow { border-top: 1px solid var(--line); }
.auditrow__label .name { font-weight: 600; font-size: 0.95rem; color: var(--ink-2); }
.auditrow__label .svc { margin-top: 0.15rem; font-size: 0.72rem; color: var(--mute); line-height: 1.4; }
.auditrow__value { text-align: right; font-weight: 700; font-size: 1.1rem; color: var(--ink); font-family: var(--f-display); font-variant-numeric: tabular-nums; }
.auditrow__value .cur { color: var(--mute); font-size: 0.72em; font-weight: 600; }
.auditrow.is-accent { background: var(--fox-tint); border-top: 1px solid transparent; }
.auditrow.is-accent .auditrow__label .name { color: var(--fox-text); font-weight: 700; }
.auditrow.is-accent .auditrow__value { color: var(--fox-text); font-size: 1.35rem; }
.ratecard__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.25rem; border-top: 1px solid var(--line); background: var(--paper); }
.ratecard__foot .note { font-size: 0.78rem; color: var(--mute); }

.hero__badge {
  position: absolute; right: -10px; bottom: -18px; max-width: 230px;
  background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--sh-md); padding: 0.85rem 1rem;
}
.hero__badge .k { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fox-text); }
.hero__badge p { margin-top: 0.3rem; font-size: 0.82rem; color: var(--body); line-height: 1.45; }
.hero__badge b { color: var(--ink); }

/* --------------------------------------------------------------------------
   8. Carrier-Leiste
   -------------------------------------------------------------------------- */
.carriers { padding-block: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.carriers__label { text-align: center; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.carriers__row { margin-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1.2rem, 0.5rem + 3vw, 3.6rem); }
.carrier-logo { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.15rem, 0.9rem + 1vw, 1.7rem); letter-spacing: -0.02em; color: var(--ink); opacity: 0.55; transition: opacity var(--t); }
.carrier-logo:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   9. Kennzahlen
   -------------------------------------------------------------------------- */
.promise { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.promise__lead h2 { font-size: var(--fs-h2); }
.promise__lead p { margin-top: 1.25rem; font-size: var(--fs-lead); color: var(--body); }
.promise__lead .tags { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.55rem; }

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); }
.stat { background: var(--white); padding: clamp(1.4rem, 1rem + 1.5vw, 2rem); }
.stat__num { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.1rem, 1.6rem + 2.2vw, 3rem); line-height: 1; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat__num .u { color: var(--fox); }
.stat__label { margin-top: 0.6rem; font-size: 0.92rem; color: var(--body); line-height: 1.45; }
.stat__tag { margin-top: 0.7rem; display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }

/* --------------------------------------------------------------------------
   10. Argument-Karten
   -------------------------------------------------------------------------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 0.6rem + 1vw, 1.5rem); }
.fcard {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); box-shadow: var(--sh-xs);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t), border-color var(--t);
  display: flex; flex-direction: column;
}
.fcard:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--line-2); }
.fcard__top { display: flex; align-items: center; justify-content: space-between; }
.fcard__icon { width: 48px; height: 48px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--fox-tint); color: var(--fox); }
.fcard__icon .i { width: 25px; height: 25px; }
.fcard__num { font-family: var(--f-mono); font-size: 0.8rem; font-weight: 500; color: var(--faint); font-variant-numeric: tabular-nums; }
.fcard h3 { margin-top: 1.2rem; font-size: var(--fs-h4); }
.fcard p { margin-top: 0.6rem; color: var(--body); font-size: 0.96rem; line-height: 1.55; }
.fcard__list { margin-top: 1.1rem; display: flex; flex-direction: column; gap: 0.55rem; }
.fcard__list li { display: flex; gap: 0.55em; align-items: flex-start; font-size: 0.9rem; color: var(--ink-2); }
.fcard__spacer { flex: 1; }

/* Kleine Kennzahlen-Tabelle in einer Karte (Soll/Ist/Differenz) */
.marginviz { margin-top: 1.2rem; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; font-size: 0.9rem; }
.marginviz__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.85rem; }
.marginviz__row + .marginviz__row { border-top: 1px solid var(--line); }
.marginviz__row dt { color: var(--body); }
.marginviz__row .n { font-family: var(--f-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.marginviz__row.total { background: var(--fox-tint); }
.marginviz__row.total dt { color: var(--fox-text); font-weight: 600; }
.marginviz__row.total .n { color: var(--fox-text); font-weight: 700; }

.fcard--cta { background: var(--ink-900); color: var(--on-dark); border-color: var(--ink-900); justify-content: center; }
.fcard--cta:hover { border-color: var(--ink-850); }
.fcard--cta h3 { color: #fff; }
.fcard--cta p { color: var(--on-dark-2); }
.fcard--cta .link-arrow { color: var(--fox); margin-top: 1.2rem; }

/* --------------------------------------------------------------------------
   11. Prozesskette
   -------------------------------------------------------------------------- */
.process-section { position: relative; overflow: hidden; }
.process__track { position: relative; margin-top: 3rem; }
.process__line { position: absolute; left: 28px; right: 28px; top: 28px; height: 2px; background: var(--line-2); }
.process__line::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--fox); transition: width 1.5s var(--ease-out); }
/* auto-fit statt fester Spaltenzahl: die Kette hatte sieben Spalten fest
   verdrahtet, waehrend die Prosa von acht Schritten sprach. Jetzt richtet sich
   das Raster nach der Zahl der Schritte, die wirklich gepflegt sind. */
.process__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 1.4rem 0.6rem; position: relative; }
.pstep { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.65rem; }
.pstep__node {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1;
  background: var(--white); border: 2px solid var(--line-2); color: var(--mute);
  transition: border-color var(--t), color var(--t), transform var(--t), box-shadow var(--t);
}
.pstep__node .i { width: 24px; height: 24px; }
.pstep.is-on .pstep__node { border-color: var(--fox); color: var(--fox); box-shadow: var(--sh-sm); transform: translateY(-2px); }
.pstep__n { position: absolute; top: -7px; right: -7px; width: 21px; height: 21px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--f-mono); font-size: 0.64rem; display: grid; place-items: center; transition: background var(--t); }
.pstep.is-on .pstep__n { background: var(--fox); }
.pstep__label { font-family: var(--f-display); font-weight: 700; font-size: 0.94rem; color: var(--ink); }
.pstep__desc { font-size: 0.78rem; color: var(--mute); line-height: 1.35; max-width: 16ch; }

/* Ambient-Loop: reine Textur hinter dem Abschnitt, stark abgeblendet und
   ins Warme gezogen, damit er sich der Papier-Anmutung unterordnet. */
.ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ambient::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--white) 0%, rgba(255,255,255,0.86) 40%, var(--white) 100%); }
.ambient__video { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.35) sepia(0.18) contrast(0.95); opacity: 0.5; }
.process-section > .container { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   12. Funktionsmatrix
   -------------------------------------------------------------------------- */
.legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.4rem; }
.legend li { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.82rem; color: var(--body); }

.marker { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.marker--live  { background: var(--fox); }
.marker--build { background: var(--line-3); }
.marker--later { background: var(--line-2); border: 1px solid var(--line-3); }

.fmatrix { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 0.6rem + 1vw, 1.4rem); }
.fgroup { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.3rem, 1rem + 1vw, 1.7rem); box-shadow: var(--sh-xs); }
.fgroup__head { display: flex; align-items: center; gap: 0.8rem; padding-bottom: 1rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--line); }
.fgroup__icon { width: 42px; height: 42px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--paper-2); color: var(--fox); flex-shrink: 0; }
.fgroup__icon .i { width: 22px; height: 22px; }
.fgroup__head h3 { font-size: 1.1rem; }
.fgroup__head .k { display: block; margin-top: 0.15rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.flist li { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.7rem 0; }
.flist li + li { border-top: 1px solid var(--line); }
.flist .marker { margin-top: 0.42rem; width: 7px; height: 7px; }
.flist .ft b { display: block; font-weight: 600; font-size: 0.94rem; color: var(--ink); }
.flist .ft span { font-size: 0.82rem; color: var(--mute); line-height: 1.4; }

/* --------------------------------------------------------------------------
   13. Zweispaltiger Abschnitt (.split)
   Ein Raster fuer Tarif-Team, KI-Agenten und Daten/ROI. Vorher drei fast
   identische Definitionen — Layoutkorrekturen mussten dreimal gemacht werden.
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
/* Raster-Kinder haben von Haus aus `min-width: auto` und werden daher so breit
   wie ihr breitester Inhalt — die Code-Karte mit `white-space: pre` sprengte
   damit auf dem Telefon die Spalte, obwohl sie selbst scrollbar ist. `min-width: 0`
   gibt der Spalte die Erlaubnis, schmaler zu sein als ihr Inhalt. */
.split > *, .hero__inner > *, .promise > * { min-width: 0; }
.split--reverse .split__copy { order: 2; }
.split__copy h2 { font-size: var(--fs-h2); }
.split__copy > p { margin-top: 1.2rem; font-size: var(--fs-lead); color: var(--body); }
.split__copy .link-arrow { margin-top: 1.4rem; }
.split__after { margin-top: 1rem; font-size: 0.84rem; color: var(--mute); }

.pointlist { margin-top: 1.7rem; display: flex; flex-direction: column; gap: 1.1rem; }
.pointlist__item { display: flex; gap: 0.9rem; }
.pointlist__ic { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--fox-tint); color: var(--fox); display: grid; place-items: center; flex-shrink: 0; }
.pointlist__ic .i { width: 21px; height: 21px; }
.pointlist__item b { font-family: var(--f-display); font-weight: 700; color: var(--ink); }
.pointlist__item b + span { display: block; margin-top: 0.15rem; color: var(--body); font-size: 0.92rem; }

.chips { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* Beschriftung ueber den Chips — gleiche Optik wie .mcp__scopes .k, damit
   „Fuer Ihre IT" und die Werkzeugliste darunter als ein Block gelesen werden. */
.chips__label { display: block; margin-top: 1.5rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.chips__label + .chips { margin-top: 0.6rem; }
.mcp__scopes { margin-top: 1.5rem; }
.mcp__scopes .k { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.mcp__scopes .row { margin-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.scope { font-family: var(--f-mono); font-size: 0.76rem; padding: 0.3em 0.65em; border-radius: var(--r-sm); border: 1px solid var(--line-2); color: var(--ink-2); background: var(--white); }
.scope b { color: var(--fox-text); }

/* Ereignisliste (Tarif-Team) */
.insightcard { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md); overflow: hidden; margin: 0; }
.insightcard__head { display: flex; align-items: center; gap: 0.7rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.insightcard__head .t { font-family: var(--f-display); font-weight: 700; color: var(--ink); font-size: 0.96rem; }
.insightcard__head .live { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.74rem; font-weight: 600; color: var(--fox-text); }
.insightcard__head .live i { width: 7px; height: 7px; border-radius: 50%; background: var(--fox); }
.insightrow { display: grid; grid-template-columns: auto 1fr auto; gap: 0.85rem; align-items: center; padding: 0.95rem 1.25rem; }
.insightrow + .insightrow { border-top: 1px solid var(--line); }
.insightrow__ic { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--paper-2); color: var(--fox); flex-shrink: 0; }
.insightrow__ic .i { width: 18px; height: 18px; }
.insightrow__tx b { display: block; font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.insightrow__tx span { font-size: 0.8rem; color: var(--mute); }
.insightrow__time { font-size: 0.72rem; color: var(--faint); font-family: var(--f-mono); white-space: nowrap; }
.insightcard__foot { padding: 0.8rem 1.25rem; border-top: 1px solid var(--line); background: var(--paper); font-size: 0.78rem; color: var(--mute); }

/* Code-Karte (KI-Agenten) — helle API-Dokumentation, kein dunkles Terminal */
.codecard { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md); overflow: hidden; margin: 0; }
.codecard__tabs { display: flex; gap: 0.3rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); background: var(--paper); }
.codecard__tab { font-family: var(--f-mono); font-size: 0.76rem; padding: 0.35em 0.7em; border-radius: var(--r-sm); color: var(--mute); }
.codecard__tab.is-active { background: var(--white); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--sh-xs); }
.codecard__body { padding: 1.1rem 1.25rem; overflow-x: auto; font-family: var(--f-mono); font-size: 0.82rem; line-height: 1.75; }
.codecard__body pre { margin: 0; white-space: pre; color: var(--ink-2); }
.codecard__body code { font: inherit; }
.c-com { color: var(--faint); }
.c-cmd { color: var(--fox-text); font-weight: 600; }
.c-key { color: var(--ink); font-weight: 600; }
.c-str, .c-num { color: #2F7D57; }
.c-ok  { color: var(--fox-text); font-weight: 600; }
.c-dim { color: var(--mute); }

/* Balkendiagramm (Daten & ROI) */
.roi__big { font-family: var(--f-display); font-weight: 800; font-size: clamp(3.5rem, 2.2rem + 7vw, 7rem); line-height: 0.92; letter-spacing: -0.05em; color: var(--fox); font-variant-numeric: tabular-nums; }
.chartcard { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); box-shadow: var(--sh-md); margin: 0; }
.chartcard__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.chartcard__title { font-family: var(--f-display); font-weight: 700; font-size: 1rem; color: var(--ink); }
.chartcard__head .k { font-size: 0.72rem; color: var(--mute); font-family: var(--f-mono); }
.bars { margin-top: 1.5rem; display: flex; align-items: flex-end; gap: 0.7rem; height: 150px; }
.bars .b { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; height: 100%; justify-content: flex-end; }
.bars .b i { width: 100%; border-radius: 6px 6px 0 0; height: 0; background: var(--fox); transition: height 1.1s var(--ease-out); }
.bars .b.alt i { background: var(--line-3); }
.b__label { font-size: 0.7rem; color: var(--mute); font-family: var(--f-mono); }
.chartcard__legend { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 1.3rem; font-size: 0.78rem; color: var(--body); }
.chartcard__legend li { display: inline-flex; align-items: center; gap: 0.45em; }
.chartcard__legend i { width: 11px; height: 11px; border-radius: 3px; }
.chartcard__legend i.f { background: var(--fox); }
.chartcard__legend i.d { background: var(--line-3); }

/* Redaktionelles Foto — warm eingefaerbt, damit die kuehle Reportage-Optik
   nicht gegen die warme Papier-Palette der Seite arbeitet. */
.editorial { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-md); background: var(--paper-2); }
.editorial img { width: 100%; filter: saturate(0.68) sepia(0.14) contrast(1.02) brightness(1.02); }
.editorial figcaption { padding: 0.75rem 1rem; font-size: 0.78rem; color: var(--mute); background: var(--white); border-top: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   14. Vertrags-Abschnitt (BYO)
   -------------------------------------------------------------------------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 0.6rem + 1vw, 1.6rem); }
.pillar { position: relative; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--fox); border-radius: var(--r-lg); padding: clamp(1.6rem, 1.1rem + 1.5vw, 2.1rem); box-shadow: var(--sh-xs); display: flex; flex-direction: column; }
.pillar__k { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fox-text); }
.pillar h3 { margin-top: 0.7rem; font-size: var(--fs-h3); }
.pillar > p { margin-top: 0.8rem; color: var(--body); }
.pillar ul { margin-top: 1.3rem; display: flex; flex-direction: column; gap: 0.75rem; }
.pillar li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.94rem; color: var(--ink-2); }

.dual-note { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.2rem); text-align: center; font-size: 0.9rem; color: var(--mute); max-width: 70ch; margin-inline: auto; }
.dual-note b { color: var(--ink-2); }

.revmodel { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xs); }
.revcell { background: var(--white); padding: 1.3rem 1.1rem; }
.revcell .k { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fox-text); }
.revcell b { display: block; margin-top: 0.5rem; font-family: var(--f-display); font-size: 1rem; color: var(--ink); }
.revcell span { display: block; margin-top: 0.3rem; font-size: 0.8rem; color: var(--mute); line-height: 1.4; }

/* --------------------------------------------------------------------------
   15. Sicherheit & Compliance
   -------------------------------------------------------------------------- */
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 0.6rem + 1vw, 1.4rem); }
.trustcard { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem 1.4rem; box-shadow: var(--sh-xs); transition: transform var(--t) var(--ease-out), box-shadow var(--t); }
.trustcard:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.trustcard__ic { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--fox-tint); color: var(--fox); }
.trustcard__ic .i { width: 23px; height: 23px; }
.trustcard h3 { margin-top: 1rem; font-size: 1.04rem; }
.trustcard p { margin-top: 0.5rem; font-size: 0.88rem; color: var(--body); line-height: 1.5; }

/* --------------------------------------------------------------------------
   16. Abschluss-Aufforderung (dunkler Anker)
   -------------------------------------------------------------------------- */
.cta { background: var(--ink-900); color: var(--on-dark); text-align: center; position: relative; overflow: hidden; }
.cta__inner { position: relative; z-index: 1; max-width: 700px; margin-inline: auto; }
/* Foto hinter der dunklen Flaeche: entsaettigt und abgedunkelt, damit der
   Text darauf sicher lesbar bleibt — die Kontrastreserve darf nicht vom
   Bildinhalt abhaengen. */
.cta--photo .section-bg { filter: grayscale(0.55) brightness(0.55); }
.cta--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, rgba(26,22,16,0.72), var(--ink-900) 78%);
}
.cta h2 { color: #fff; font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem); font-weight: 800; }
.cta p { margin-top: 1.3rem; font-size: var(--fs-lead); color: var(--on-dark-2); max-width: 48ch; margin-inline: auto; }
.cta__btns { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; }
.cta__fine { margin-top: 1.6rem; font-size: 0.82rem; color: var(--on-dark-mute); }
/* Die Marke als grosses, sehr schwaches Wasserzeichen. Einfarbig, damit sie
   sich nicht als zweites Logo neben dem echten im Kopf aufdraengt. */
.cta > svg { position: absolute; right: -40px; bottom: -40px; width: 280px; color: var(--fox); opacity: 0.07; transform: rotate(-8deg); pointer-events: none; }

/* --------------------------------------------------------------------------
   17. Fussbereich
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink-900); color: var(--on-dark-2); padding-top: clamp(3.5rem, 2.5rem + 3vw, 5rem); }
.footer__top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 3rem); padding-bottom: 3rem; border-bottom: 1px solid var(--line-dark); }
.footer__brand .brand { margin-bottom: 1.1rem; }
.footer__brand .brand__name { color: #fff; }
.footer__brand p { color: var(--on-dark-mute); font-size: 0.9rem; max-width: 34ch; line-height: 1.6; }
.footer__brand .made { margin-top: 1.2rem; display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.78rem; color: var(--on-dark-2); }
.footer__brand .made i { width: 21px; height: 14px; border-radius: 2px; background: linear-gradient(180deg, #000 33%, #D00 33% 66%, #FC0 66%); display: inline-block; }
.fcol__title { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-mute); margin-bottom: 1.1rem; font-family: var(--f-body); }
.fcol ul { display: flex; flex-direction: column; gap: 0.7rem; }
.fcol a { color: var(--on-dark-2); font-size: 0.9rem; transition: color var(--t); }
.fcol a:hover { color: var(--fox); }
.footer__b2b { margin-top: 1.8rem; padding: 1rem 1.2rem; border: 1px solid var(--line-dark); border-radius: var(--r-md); font-size: 0.78rem; color: var(--on-dark-mute); line-height: 1.55; }
.footer__legal { padding-block: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.8rem 1.5rem; align-items: center; justify-content: space-between; }
.footer__legal p { font-size: 0.8rem; color: var(--on-dark-mute); }
.footer__legal .links { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer__legal .links a { font-size: 0.8rem; color: var(--on-dark-mute); transition: color var(--t); }
.footer__legal .links a:hover { color: var(--on-dark); }

/* --------------------------------------------------------------------------
   18. Einblenden beim Scrollen (dezent)
   -------------------------------------------------------------------------- */
/* Wichtig: der VERSTECKTE Zustand haengt an der Klasse `.js` am <html>, die ein
   winziges Inline-Script im <head> setzt. Ohne JavaScript — oder wenn main.js
   nicht laedt — ist der Inhalt schlicht sichtbar.

   Das WordPress-Theme versteckte hier bedingungslos (`opacity: 0` als
   Ausgangszustand) und liess die Einblendung von JavaScript kommen. Diese Seite
   war damit einen Script-Fehler von einer komplett leeren Seite entfernt. Eine
   Animation darf nie die Voraussetzung dafuer sein, dass der Text erscheint. */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* Notbremse: setzt das Inline-Script, wenn main.js nach drei Sekunden nicht
   gemeldet hat, dass es laeuft. */
.reveal-all [data-reveal] { opacity: 1 !important; transform: none !important; }
[data-reveal-delay="1"] { transition-delay: 0.07s; }
[data-reveal-delay="2"] { transition-delay: 0.14s; }
[data-reveal-delay="3"] { transition-delay: 0.21s; }
[data-reveal-delay="4"] { transition-delay: 0.28s; }

/* --------------------------------------------------------------------------
   19. Fliesstext-Seiten (Impressum, Datenschutz, AGB)
   -------------------------------------------------------------------------- */
.page-hero { padding-top: clamp(3rem, 2rem + 3vw, 5rem); padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.page-hero h1 { font-size: var(--fs-h2); }
.page-hero .eyebrow { margin-bottom: 1rem; }
.page-hero .lead { margin-top: 1rem; }
.prose { padding-bottom: var(--section-y); color: var(--body); }
.prose h2 { font-size: var(--fs-h3); margin-top: 2.4rem; margin-bottom: 0.7rem; }
.prose h3 { font-size: var(--fs-h4); margin-top: 1.8rem; margin-bottom: 0.5rem; }
.prose p, .prose li { margin-bottom: 1rem; }
.prose ul { list-style: disc; padding-left: 1.3rem; }
.prose ol { list-style: decimal; padding-left: 1.4rem; }
.prose a { color: var(--fox-text); text-decoration: underline; text-underline-offset: 3px; }
.prose img { border-radius: var(--r-md); margin-block: 1.5rem; }
.prose table { width: 100%; border-collapse: collapse; margin-block: 1.5rem; font-size: 0.94rem; }
.prose th, .prose td { text-align: left; padding: 0.6rem 0.8rem; border: 1px solid var(--line); }
.prose th { background: var(--paper-2); font-weight: 600; color: var(--ink); }
.prose__meta { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--faint); }
/* Der Handlungsaufruf braucht Abstand nach oben. Ohne ihn klebt er direkt unter
   dem Stand-Hinweis und liest sich, als gehoere er zur Datumszeile. Auf den
   Rechtsseiten faellt das nicht auf, weil dort `cta: none` gilt. */
.page__cta { padding-top: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); padding-bottom: var(--section-y); }

.error-404 { text-align: center; padding-block: clamp(5rem, 4rem + 6vw, 9rem); }
.error-404__code { display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(5rem, 3rem + 12vw, 11rem); color: var(--fox); line-height: 1; letter-spacing: -0.05em; }
.error-404 h1 { margin-top: 0.5rem; font-size: var(--fs-h2); }
.error-404 p { margin-top: 1rem; color: var(--body); }
.error-404 .btn { margin-top: 2rem; }

/* Der Sprunglink parkt ueber dem Viewport, nicht links daneben. Die alte
   Loesung (left: -9999px) liegt zwar ausserhalb des Bildes, zaehlt aber weiter
   zur Dokumentbreite und erzeugt auf schmalen Geraeten waagerechtes Scrollen. */
.skip-link {
  position: fixed; top: 0; left: 0; z-index: 1100;
  transform: translateY(-120%);
  background: var(--fox); color: #fff;
  padding: 0.7em 1.2em; border-radius: 0 0 var(--r-sm) 0; font-weight: 700;
  transition: transform var(--t-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   20. Responsiv
   -------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .features, .fmatrix, .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .pillars { grid-template-columns: 1fr; }
  .process__line { display: none; }
}

@media (max-width: 880px) {
  .nav__links, .nav__login { display: none; }
  .nav__toggle { display: inline-flex; }
  .site-header.has-menu .nav__links {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0.2rem;
    padding: 1rem var(--gutter) 1.5rem; background: var(--paper);
    border-bottom: 1px solid var(--line); box-shadow: var(--sh-md);
  }
  .site-header.has-menu .nav__links a { padding: 0.85em 1em; font-size: 1.05rem; }
  .hero__inner, .promise, .split { grid-template-columns: 1fr; }
  .hero__visual { margin-top: 1rem; }
  /* Beleg unter den Text: auf schmalen Geraeten liest man erst das Argument. */
  .split__visual { order: 2; }
  .split--reverse .split__copy { order: 0; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  /* Der Ambient-Loop ist reine Dekoration — auf kleinen Geraeten ist er
     Datenvolumen ohne Gegenwert. */
  .ambient { display: none; }
}

@media (max-width: 600px) {
  .features, .fmatrix, .trust-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
  .raterow { grid-template-columns: 1fr auto; row-gap: 0.4rem; }
  .raterow__eta, .raterel { grid-column: 1 / -1; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }
  .hero__badge { position: static; max-width: none; margin-top: 1rem; }
  .footer__legal { flex-direction: column; align-items: flex-start; }
  .nav { height: 62px; }
  :root { --header-h: 62px; }
}

@media (max-width: 480px) {
  /* Auf dem Telefon konkurrieren Wortmarke, Sprachumschalter, Aktionsknopf und
     Menuetaste um 375 px. Die Wortmarke weicht: die Bildmarke allein ist als
     Rueckweg zur Startseite eindeutig, der Aktionsknopf ist der teuerste Klick
     der Seite und bleibt. */
  .brand__name { display: none; }
  .nav__actions { gap: 0.45rem; }
  .nav__actions .btn--sm { padding: 0.6em 0.9em; font-size: 0.84rem; }
  .langswitch__item { padding: 0.4em 0.55em; font-size: 0.68rem; }
}

/* --------------------------------------------------------------------------
   21. Bewegung reduzieren
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .ambient { display: none; }
}

/* --------------------------------------------------------------------------
   22. Druck
   Ein Angebot wird im Mittelstand ausgedruckt und in die Runde gegeben.
   Dann zaehlen Inhalt und Adressen, nicht Flaechen und Schatten.
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .topbar, .nav__toggle, .langswitch, .skip-link,
  .ambient, .hero__visual, .cta__btns, .hero__cta { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1.2rem; break-inside: avoid; }
  .cta, .site-footer { background: #fff !important; color: #000 !important; }
  .cta h2, .footer__brand .brand__name { color: #000 !important; }
  .fcard, .fgroup, .trustcard, .pillar, .stat { box-shadow: none !important; border-color: #ccc !important; break-inside: avoid; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  /* Ziel eines Links im Fliesstext ausschreiben — auf Papier ist ein
     unterstrichenes Wort sonst eine Sackgasse. */
  .prose a::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; word-break: break-all; }
}

/* --------------------------------------------------------------------------
   23. Hinweis unter beispielhaften Oberflaechen
   Die Produktkarten zeigen Preise und Kennzahlen und sehen aus wie echte
   Auswertungen. Der Hinweis, dass es Platzhalter sind, muss deshalb SICHTBAR
   sein — ein nur fuer Screenreader gesetzter Text raeumt den Eindruck nicht
   aus, den ein sehender Besucher gewinnt.
   -------------------------------------------------------------------------- */
.figure-note {
  margin-top: 0.7rem;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--faint);
  text-align: right;
}
.hero__visual .figure-note { padding-inline: 0.25rem; }