/* easyKaufmann Solutions, Designsystem
   ==================================================================
   Layout und Darstellung nach dem Vorbild magplan.de, Farben aus der
   Logodatei gemessen. Die Vorlage wurde nicht per CSS ausgelesen,
   sondern ueber die berechneten Stile im Browser vermessen. Die
   Messwerte stehen im README unter "Designsystem".

   Vier Radien, die Pille eingerechnet. Das ersetzt die frueher hier
   dokumentierte Regel "zwei Radien, keine weiteren": die Vorlage lebt
   von der Pille als Rubrikkennzeichen, ohne sie faellt der Charakter weg.

   Kein Gedankenstrich in sichtbaren Texten, check.py warnt.

   Die vorige Fassung, an Haufe X360 angeglichen, liegt als
   _build/styles-haufe-fassung.css.bak daneben. */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- Marke, aus dem Logo gemessen. Unveraendert. ------------------- */
  --brand-a: #bc5497;          /* Magenta, linke Verlaufsseite */
  --brand-b: #2494d2;          /* Blau, rechte Verlaufsseite */
  --brand-grey: #626360;       /* Grau der Wortmarke, nur zum Nachschlagen */

  --grad: linear-gradient(100deg, var(--brand-a), var(--brand-b));
  /* Dunklere Fassung, damit weisse Schrift auf dem Verlauf lesbar bleibt */
  --grad-deep: linear-gradient(100deg, #a63c82, #1c6fa8);
  --grad-soft: linear-gradient(100deg, #fbf1f7, #eff6fc);
  /* Aufgehellt, fuer Verlaufsschrift auf dunklem Grund */
  --grad-light: linear-gradient(100deg, #e58fc4, #7cc6f0);

  /* --- die beiden Rollen, die magplan.de mit Marineblau #013052 und
     Cyan #028EC0 besetzt. Statt deren Toenen wird unser Markenblau
     abgedunkelt: gleicher Farbwinkel 203 Grad, nur dunkler. Damit
     stammt auch der Dunkelton aus der eigenen Marke. ---------------- */
  --ink: #0b2f4d;              /* Ueberschriften, dunkle Flaechen */
  --ink-2: rgba(11, 47, 77, .78);   /* Fliesstext */
  --ink-3: rgba(11, 47, 77, .68);   /* Nebenangaben */

  /* Das Markenblau erreicht als Textfarbe auf Weiss nur 3,36:1. Fuer
     Icons genuegt das, dort liegt die Grenze bei 3:1, fuer Schrift
     nicht. --accent ist deshalb der blaue Endpunkt des dunklen
     Verlaufs mit 5,40:1. --accent-flat bleibt fuer grosse Flaechen. */
  --accent: #1c6fa8;
  --accent-flat: #2494d2;
  --accent-tint: #eef7fd;

  --bg: #ffffff;
  --bg-soft: #f5f7f9;          /* helles Band */
  --bg-deep: #0b2f4d;          /* dunkles Band, CTA, Fussbereich */
  --bg-deep-2: #143f63;        /* Karten auf dunklem Grund */
  --line: #dee6ec;
  --line-strong: #c3d0da;

  /* --- Radien. Vier, wie bei der Vorlage. ---------------------------- */
  --r-1: 10px;                 /* Schaltflaechen, Felder, Tags */
  --r-2: 14px;                 /* Karten */
  --r-3: 16px;                 /* Tarife, Medien, CTA */
  --r-pill: 999px;             /* Pille */

  /* --- Schatten. Einlagig und mit dem Dunkelton getoent. ------------- */
  --shadow-1: 0 4px 24px rgba(11, 47, 77, .08);
  --shadow-2: 0 10px 30px -12px rgba(11, 47, 77, .16);
  /* Das Gluehen unter dem hervorgehobenen Tarif. Bei magplan.de ihr
     Cyan, hier unser Magenta. */
  --glow: 0 20px 50px -20px rgba(188, 84, 151, .42);

  --wrap: 1260px;
  --head-h: 88px;
}

/* ---------------------------------------------------------------- Grundlage */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Grosse, leicht gesetzte Displaytitel mit engem Buchstabenabstand. Das ist
   der praegende Zug der Vorlage: h1 64 Pixel bei Gewicht 600 und -0,032em. */
h1, h2, h3, h4 {
  margin: 0 0 .5em;
  color: var(--ink);
  text-wrap: balance;
  /* Notbremse fuer lange Komposita. Deutsche Woerter wie
     "Datenschutzerklaerung" sind bei 38 Pixel breiter als eine
     Telefonbahn von 331 Pixel und wuerden die Seite waagerecht
     ueberlaufen lassen. Greift nur, wenn ein Wort wirklich nicht passt. */
  overflow-wrap: break-word;
}
h1 {
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.032em;
}
h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.031em;
}
h3 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.018em;
}
h4 { font-size: 1.08rem; font-weight: 700; letter-spacing: -.012em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 700; }

.wrap { width: min(100% - 44px, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 44px, 800px); margin-inline: auto; }

/* Sektionsabstand 100 Pixel, bei der Vorlage der haeufigste Wert */
.section { padding: clamp(56px, 8vw, 100px) 0; }
.section--soft { background: var(--bg-soft); }
.section--tight { padding: clamp(40px, 5vw, 68px) 0; }

/* Dunkles Band. Bei der Vorlage genau einmal je Seite als Rhythmuswechsel. */
.section--deep { background: var(--bg-deep); color: rgba(255, 255, 255, .76); }
.section--deep h1, .section--deep h2,
.section--deep h3, .section--deep h4 { color: #fff; }
.section--deep .lead { color: rgba(255, 255, 255, .8); }
.section--deep .muted { color: rgba(255, 255, 255, .62); }

/* Rasterelemente muessen unter ihre Inhaltsbreite schrumpfen duerfen.
   Ohne min-width: 0 setzt ein Grid-Element seine automatische Mindestgroesse
   auf min-content. Eine Tabelle mit min-width: 560px sprengt dann die Spur,
   und die Seite laeuft waagerecht ueber, obwohl .table-scroll scrollen soll.
   Aufgefallen bei /erfolgsstories-F&P/ auf 375 Pixel: die Hero-Spur war
   562 statt 331 Pixel breit. */
.hero__grid > *, .split > *, .grid > *, .plans > *,
.stats > *, .steps > *, .contact > *, .people > * { min-width: 0; }

.icon { width: 1em; height: 1em; flex: none; fill: currentColor; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 18px;
  border-radius: 0 0 var(--r-1) 0;
}
.skip:focus { left: 0; }

:where(a, button, summary, input, textarea, select):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------- Textbausteine */

/* Die Pille. Kennzeichen der Vorlage: eine umrandete Pille ueber jeder
   Sektionsueberschrift, dort 12 Pixel bei Gewicht 500 und Innenabstand
   6 auf 12. Der Punkt davor traegt unseren Markenverlauf. */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55em;
  margin: 0 0 20px;
  padding: 7px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: #fff;
  font-size: .78rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow::before {
  content: ''; flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--grad);
}
.section--soft .eyebrow { background: #fff; }
.section--deep .eyebrow {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .84);
}

.lead { font-size: clamp(1.06rem, 1rem + .4vw, 1.24rem); line-height: 1.55; }
.muted { color: var(--ink-3); }
.grad-text {
  background: var(--grad-deep);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section--deep .grad-text { background: var(--grad-light);
  -webkit-background-clip: text; background-clip: text; }

.section-head { max-width: 780px; margin-bottom: clamp(36px, 4.5vw, 60px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }
.section-head p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- Schaltflaeche
   Bei der Vorlage klein und breit: 14 Pixel bei Gewicht 600, oben nur 8 bis
   10 Pixel Innenabstand, seitlich 24 bis 32, ohne Schatten. */

.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: 12px 28px;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  font: inherit; font-weight: 600; font-size: .94rem;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease,
              background-color .18s ease, border-color .18s ease;
}
.btn .icon { width: 1.05em; height: 1.05em; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--grad-deep); color: #fff; }
.btn--primary:hover { box-shadow: var(--glow); }

.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--accent); }

.btn--quiet { padding-inline: 0; background: none; color: var(--accent); }
.btn--quiet:hover { transform: none; text-decoration: underline; text-underline-offset: 4px; }

.btn--onDark { background: #fff; color: var(--ink); }
.btn--onDarkGhost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.btn--onDarkGhost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* -------------------------------------------------------------------- Header */

.head-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }

.head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.head.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-1); }

.head__bar {
  display: flex; align-items: center; gap: 20px;
  height: var(--head-h);
  min-width: 0;
}
.head__logo { display: flex; align-items: center; flex: none; }
.head__logo img { height: 42px; width: auto; }

.head__spacer { flex: 1 1 auto; }

.head__tools { display: flex; align-items: center; gap: 14px; flex: none; }
.head__tel {
  display: inline-flex; align-items: center; gap: .45em;
  font-weight: 600; font-size: .92rem; text-decoration: none; color: var(--ink-2);
  white-space: nowrap;
}
.head__tel:hover { color: var(--accent); }

.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-1);
  cursor: pointer; color: var(--ink);
}
.burger .icon { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- Navigation */

/* flex: none ist Absicht. Duerfte die Navigation schrumpfen, stauchte sie ihre
   Menuepunkte lautlos zusammen statt sichtbar ueberzulaufen, und die Schwellen
   unten liessen sich nicht messen. */
.nav { display: flex; align-items: center; gap: 0; flex: none; }
.nav__item { position: relative; }

.nav__link {
  display: inline-flex; align-items: center; gap: .3em;
  padding: 9px 11px;
  border-radius: var(--r-1);
  font-size: .93rem; font-weight: 600; text-decoration: none; color: var(--ink-2);
  white-space: nowrap;
  background: none; border: 0; font-family: inherit; cursor: pointer;
}
.nav__link:hover { color: var(--ink); background: var(--bg-soft); }
.nav__link[aria-current='page'],
.nav__item.is-active > .nav__link { color: var(--ink); }
.nav__link .icon { width: 12px; height: 12px; opacity: .55; transition: transform .2s ease; }
.nav__item[data-open='true'] .nav__link .icon { transform: rotate(180deg); }

.nav__panel {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translate(-50%, 8px);
  min-width: 272px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden;
  transition: opacity .17s ease, transform .17s ease, visibility .17s;
}
.nav__item[data-open='true'] .nav__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.nav__panel a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-1);
  font-size: .93rem; font-weight: 600; text-decoration: none; color: var(--ink-2);
}
.nav__panel a:hover { background: var(--bg-soft); color: var(--ink); }
.nav__panel a small { display: block; font-weight: 400; font-size: .8rem; color: var(--ink-3); }
.nav__panel hr { margin: 8px 12px; border: 0; border-top: 1px solid var(--line); }

/* Mobiles Menue */
.mnav {
  position: fixed; inset: var(--head-h) 0 0; z-index: 55;
  background: #fff;
  padding: 8px 0 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: none;
}
.mnav.is-open { display: block; }
body.is-locked { overflow: hidden; }

.mnav details { border-bottom: 1px solid var(--line); }
.mnav summary,
.mnav > .wrap > a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 0;
  font-weight: 700; font-size: 1.02rem; color: var(--ink);
  cursor: pointer; list-style: none; text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.mnav details summary { border-bottom: 0; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary .icon { width: 14px; height: 14px; opacity: .5; transition: transform .2s ease; }
.mnav details[open] summary .icon { transform: rotate(180deg); }
.mnav details > div { padding: 0 0 14px; }
.mnav details a {
  display: block; padding: 9px 0 9px 14px;
  border-left: 2px solid var(--line);
  font-size: .95rem; font-weight: 600; color: var(--ink-2); text-decoration: none;
}
.mnav details a:hover { border-left-color: var(--brand-a); color: var(--ink); }
.mnav .btn { width: 100%; justify-content: center; margin-top: 22px; }

/* ----------------------------------------------------------------- Brotkrumen */

.crumbs { padding: 20px 0 0; font-size: .84rem; color: var(--ink-3); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .45em; margin: 0; padding: 0; list-style: none; }
.crumbs li::after { content: '/'; margin-left: .45em; opacity: .5; }
.crumbs li:last-child::after { content: none; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------------- Hero
   Die Vorlage haelt den Hero schlicht weiss: 100 Pixel oben, 120 unten,
   Titel links, Medien rechts. Kein Farbschleier im Hintergrund. */

.hero { padding: clamp(48px, 7vw, 100px) 0 clamp(56px, 8vw, 120px); }
.hero__grid { display: grid; gap: clamp(32px, 4vw, 60px); align-items: center; }
.hero__media { position: relative; }
.hero__media img { width: 100%; border-radius: var(--r-3); box-shadow: var(--shadow-2); }
.hero__media--plain img { border-radius: 0; box-shadow: none; }
.hero p.lead { max-width: 56ch; }

/* Bildband unter einem mittigen Kopf. Es nimmt die volle Inhaltsbreite, waehrend
   der Textblock darueber auf 840 Pixel begrenzt bleibt. Dadurch liest man erst
   die Ueberschrift und sieht dann das Bild, statt umgekehrt. */
.hero__band { margin-top: clamp(28px, 3.6vw, 48px); }
.hero__band img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-3); box-shadow: var(--shadow-2);
}

.hero--split .hero__grid { grid-template-columns: 1.04fr .96fr; }
.hero--center { text-align: center; }
.hero--center .hero__grid { max-width: 840px; margin-inline: auto; }
.hero--center .btn-row { justify-content: center; }
.hero--center p.lead { margin-inline: auto; }

/* --------------------------------------------------------------------- Karten */

.grid { display: grid; gap: 22px; }
.grid--1 { grid-template-columns: 1fr; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  display: flex; flex-direction: column;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card h3 { margin-bottom: .4em; font-size: clamp(1.14rem, 1.02rem + .35vw, 1.28rem); }
.card p { color: var(--ink-2); font-size: .96rem; }
.card p:last-child { margin-bottom: 0; }
a.card { text-decoration: none; }
a.card:hover, .card--hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }

.card__icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 18px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
}
.card__icon .icon { width: 22px; height: 22px; }

.card__more {
  display: inline-flex; align-items: center; gap: .4em;
  margin-top: auto; padding-top: 18px;
  font-weight: 600; font-size: .92rem; color: var(--accent);
}
.card__more .icon { width: .95em; height: .95em; transition: transform .18s ease; }
a.card:hover .card__more .icon { transform: translateX(3px); }

.card--media { padding: 0; overflow: hidden; }
.card--media img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.card--media .card__body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }

.card--num { padding-top: 30px; }
.card__num {
  display: block; margin-bottom: 10px;
  font-size: .82rem; font-weight: 700; letter-spacing: .1em;
  background: var(--grad-deep); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Dunkel gefuellte Karte. Bei der Vorlage tragen die Modulkarten den
   Dunkelton als Flaeche, das setzt den kraeftigsten Akzent der Seite. */
.card--deep {
  background: var(--bg-deep); border-color: var(--bg-deep);
  padding: 30px 30px 34px;
}
.card--deep h3 { color: #fff; }
.card--deep p { color: rgba(255, 255, 255, .74); }
.card--deep .card__icon { background: rgba(255, 255, 255, .1); color: #8fd0f5; }
.card--deep .card__more { color: #8fd0f5; }
a.card--deep:hover, .card--deep.card--hover:hover {
  background: var(--bg-deep-2); border-color: var(--bg-deep-2);
}
.card--deep .card__num { background: var(--grad-light);
  -webkit-background-clip: text; background-clip: text; }

/* Karten auf dem dunklen Band bekommen den helleren Dunkelton, damit sie
   sich abheben, ohne wie ein Fremdkoerper zu wirken. */
.section--deep .card {
  background: var(--bg-deep-2); border-color: rgba(255, 255, 255, .12);
}
.section--deep .card h3 { color: #fff; }
.section--deep .card p { color: rgba(255, 255, 255, .74); }
.section--deep .card__icon { background: rgba(255, 255, 255, .1); color: #8fd0f5; }
.section--deep .card__more { color: #8fd0f5; }

/* ---------------------------------------------------------------- Listenpunkte */

.checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.checks li { display: flex; gap: .7em; align-items: flex-start; color: var(--ink-2); }
.checks li strong { color: var(--ink); }
.checks .icon {
  width: 22px; height: 22px; margin-top: 2px;
  padding: 4px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  box-sizing: border-box;
}
.section--deep .checks li,
.card--deep .checks li { color: rgba(255, 255, 255, .78); }
.section--deep .checks li strong,
.card--deep .checks li strong { color: #fff; }
.section--deep .checks .icon,
.card--deep .checks .icon { background: rgba(255, 255, 255, .12); color: #8fd0f5; }

/* ------------------------------------------------------------------ Splitteil */

.split { display: grid; gap: clamp(32px, 4vw, 60px); align-items: center; }
.split--even { grid-template-columns: 1fr 1fr; }
.split--wide-media { grid-template-columns: .92fr 1.08fr; }
.split__media img { width: 100%; border-radius: var(--r-3); }
.split__media--plain img { border-radius: 0; }
.split--flip .split__media { order: -1; }

.media-frame {
  padding: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}
.section--soft .media-frame { background: #fff; }
.media-frame img { border-radius: var(--r-1); }

/* -------------------------------------------------------------------- Zahlen
   Die Vorlage stellt Kennzahlen gross und ohne Kartenrahmen heraus, auf dem
   dunklen Band. Auf hellem Grund bleibt der Rahmen, sonst schwimmen sie. */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 24px; }
.stat { padding: 26px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-2); }
.stat__num {
  display: block;
  font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.4rem); font-weight: 600; line-height: 1;
  letter-spacing: -.035em;
  background: var(--grad-deep); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat__label { display: block; margin-top: 10px; font-size: .95rem; color: var(--ink-2); }

.section--deep .stat { background: none; border: 0; padding: 0; }
.section--deep .stat__num { background: var(--grad-light);
  -webkit-background-clip: text; background-clip: text; }
.section--deep .stat__label { color: rgba(255, 255, 255, .7); }

/* ------------------------------------------------------------------ Logowand */

.logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 22px 30px;
  align-items: center;
}
.logos img {
  width: 100%; max-height: 50px; object-fit: contain;
  filter: grayscale(1); opacity: .5;
  transition: filter .25s ease, opacity .25s ease;
}
.logos img:hover { filter: none; opacity: 1; }

/* --------------------------------------------------------------------- Zitat */

.quote {
  position: relative;
  padding: 30px 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-1);
}
.quote p { font-size: 1.1rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.5; color: var(--ink); }
.quote cite { display: block; margin-top: 16px; font-size: .92rem; font-style: normal; color: var(--ink-3); }
.quote cite strong { display: block; color: var(--ink); font-style: normal; }
.section--soft .quote { background: #fff; }
.section--deep .quote {
  background: var(--bg-deep-2); border-color: rgba(255, 255, 255, .12); box-shadow: none;
}
.section--deep .quote p { color: #fff; }
.section--deep .quote cite { color: rgba(255, 255, 255, .66); }
.section--deep .quote cite strong { color: #fff; }

/* -------------------------------------------------------------------- Schritte
   Bei der Vorlage vier Nummern nebeneinander, jede mit einer Linie darueber.
   Unsere Seiten haben vier oder fuenf Schritte, deshalb auto-fit statt einer
   festen Spaltenzahl. Mit vier Schritten ergibt sich genau das Bild der
   Vorlage, mit fuenf laeuft nichts ueber. */

.steps {
  counter-reset: s;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 26px 24px;
}
.step { padding-top: 22px; border-top: 2px solid var(--line); }
.step::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  display: block; margin-bottom: 12px;
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em;
  background: var(--grad-deep); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.step h3 { margin-bottom: .4em; font-size: 1.12rem; }
.step p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.section--deep .step { border-top-color: rgba(255, 255, 255, .2); }
.section--deep .step::before { background: var(--grad-light);
  -webkit-background-clip: text; background-clip: text; }
.section--deep .step p { color: rgba(255, 255, 255, .74); }

/* --------------------------------------------------------------------- Preise
   Der hervorgehobene Tarif traegt bei der Vorlage ein farbiges Gluehen. Dort
   ihr Cyan, hier unser Magenta. Der Verlaufsrand entsteht aus zwei
   Hintergrundebenen, nicht aus einem ::before mit z-index -1: Letzteres
   haengt an einem Stapelkontext und verschwindet in anderem Umfeld. */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px; align-items: start;
}
.plans--2 { grid-template-columns: repeat(2, 1fr); }
.plans--1 { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; }
.plan {
  display: flex; flex-direction: column;
  padding: 32px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-3);
}
.plan--featured {
  border: 1px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
              var(--grad) border-box;
  box-shadow: var(--glow);
}
.plan__name { font-size: 1.24rem; font-weight: 700; color: var(--ink); letter-spacing: -.018em; }
.plan__kicker { margin: 6px 0 20px; font-size: .93rem; color: var(--ink-3); }
.plan__price { display: flex; align-items: baseline; gap: .3em; margin-bottom: 6px; }
.plan__price b { font-size: 2.3rem; font-weight: 600; letter-spacing: -.035em; color: var(--ink); }
.plan__price span { font-size: .92rem; color: var(--ink-3); }
.plan__note { margin: 0 0 22px; font-size: .86rem; color: var(--ink-3); }
.plan .checks { margin-bottom: 26px; font-size: .95rem; }
.plan .btn { margin-top: auto; justify-content: center; }

.plan-caption { margin-top: 20px; font-size: .86rem; color: var(--ink-3); }

/* ----------------------------------------------------------------------- FAQ
   Bei der Vorlage ist jede Frage eine eigene Karte, der Umschalter ein Kreis
   mit blasser Akzenttinte. */

.faq { display: grid; gap: 14px; }
.faq details {
  padding: 0 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.section--soft .faq details { background: #fff; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0;
  font-weight: 700; font-size: 1.04rem; color: var(--ink); letter-spacing: -.015em;
  line-height: 1.4;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon {
  width: 32px; height: 32px; flex: none;
  padding: 8px; box-sizing: border-box;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  transition: transform .2s ease;
}
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq details > div { padding: 0 52px 24px 0; }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Fliesstext
   Die grossen Displaytitel und lange Lesetexte arbeiten gegeneinander.
   Deshalb bekommt der Fliesstext eine eigene, ruhigere Skala: die
   Zwischentitel bleiben klein, die Spalte schmal. */

.prosa { max-width: 68ch; }
/* In der schmalen Bahn zentrieren. Die 68 Zeichen ergeben 705 Pixel, die Bahn
   ist 800 breit, ohne das sitzt die Lesespalte 95 Pixel links von der Mitte. */
.wrap--narrow .prosa { margin-inline: auto; }
.prosa h3 {
  margin: 2em 0 .55em;
  font-size: 1.24rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.3;
}
.prosa h3:first-child { margin-top: 0; }
.prosa p { color: var(--ink-2); }
.prosa ul { margin: 0 0 1.1em; padding-left: 1.25em; color: var(--ink-2); }
.prosa li { margin-bottom: .5em; }
.prosa li::marker { color: var(--accent-flat); }
.prosa strong { color: var(--ink); }
.prosa a { color: var(--accent); text-underline-offset: 3px; }
.prosa .hinweis {
  margin-top: 1.8em;
  padding: 18px 22px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-size: .9rem;
  color: var(--ink-3);
}
.section--soft .prosa .hinweis { background: #fff; }

/* Rechtstexte brauchen keine Displaywirkung, sie laufen lang. Ihre eigene
   Skala steht als LEGAL_CSS in _build/content_recht.py und wird als
   <style> hinter diesem Stylesheet ausgeliefert. Eine Regel .legal h2
   hier waere gleich spezifisch und wuerde von dort ueberschrieben, also
   toter Code. Aenderungen bitte in content_recht.py. */

/* -------------------------------------------------------------------- Tabelle */

.table-scroll {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
table.data { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 560px; }
table.data th, table.data td {
  padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line);
}
table.data thead th {
  background: var(--bg-soft);
  font-weight: 700; font-size: .78rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td:first-child { font-weight: 600; color: var(--ink); }

/* ------------------------------------------------------------------ Personen */

.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.person {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden;
}
.person__photo { background: var(--bg-soft); }
.person__photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; object-position: bottom; }
.person__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.person__role {
  font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.person h3 { margin: 8px 0 .5em; font-size: 1.2rem; }
.person p { font-size: .94rem; color: var(--ink-2); }
.person__contact { margin-top: auto; padding-top: 18px; display: grid; gap: 7px; font-size: .9rem; }
.person__contact a { display: inline-flex; align-items: center; gap: .5em; text-decoration: none; color: var(--ink-2); }
.person__contact a:hover { color: var(--accent); }
.person__contact .icon { width: 15px; height: 15px; color: var(--accent); }

/* -------------------------------------------------------------------- CTA-Band
   Bei der Vorlage ist der Abschluss eine dunkle Marineblau-Flaeche mit 16
   Pixel Radius, nicht eine farbige. Deshalb traegt das Band hier den
   Dunkelton, und der Markenverlauf sitzt auf der Schaltflaeche darin. */

.cta {
  position: relative;
  padding: clamp(44px, 5.5vw, 84px) clamp(28px, 4.5vw, 64px);
  border-radius: var(--r-3);
  background: var(--bg-deep);
  color: rgba(255, 255, 255, .78);
  overflow: hidden;
}
.cta::after {
  content: ''; position: absolute; right: -90px; top: -140px;
  width: 470px; height: 470px; border-radius: 50%;
  background: radial-gradient(circle, rgba(188, 84, 151, .3), rgba(36, 148, 210, .16) 55%, transparent 72%);
}
.cta > * { position: relative; }
.cta h2 { color: #fff; max-width: 22ch; }
.cta p { color: rgba(255, 255, 255, .78); max-width: 58ch; }
.cta .btn-row { margin-top: 30px; }
.cta .eyebrow {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .84);
}

/* -------------------------------------------------------------------- Kontakt */

.contact { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 4vw, 56px); align-items: start; }

.contact__card {
  padding: 30px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}
.section--soft .contact__card { background: #fff; }
.contact__person { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.contact__person img { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; flex: none; }
.contact__person b { display: block; color: var(--ink); }
.contact__person span { font-size: .88rem; color: var(--ink-3); }
.contact__list { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; font-size: .95rem; }
.contact__list a { display: inline-flex; align-items: center; gap: .6em; text-decoration: none; }
.contact__list a:hover { color: var(--accent); }
.contact__list .icon { width: 17px; height: 17px; color: var(--accent); }

.form { display: grid; gap: 16px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; }
.field > span { font-size: .87rem; font-weight: 600; color: var(--ink); }
.field input, .field textarea {
  width: 100%;
  padding: 13px 15px;
  font: inherit; font-size: .97rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent-flat);
  box-shadow: 0 0 0 3px rgba(36, 148, 210, .16);
}
.field textarea { min-height: 132px; resize: vertical; }
.field--error input, .field--error textarea { border-color: #c02f4f; }
.field__error { font-size: .82rem; color: #c02f4f; }

.consent { display: flex; gap: .7em; align-items: flex-start; font-size: .87rem; color: var(--ink-3); }
.consent input { margin-top: 4px; accent-color: var(--brand-a); width: 17px; height: 17px; flex: none; }
.consent a { color: var(--accent); }

.form__note { font-size: .82rem; color: var(--ink-3); }
.form__done {
  display: none;
  padding: 24px 26px;
  background: var(--accent-tint);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.form__done.is-visible { display: block; }
.form.is-done { display: none; }

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

.foot {
  padding: clamp(56px, 7vw, 92px) 0 30px;
  background: var(--bg-deep);
  color: rgba(255, 255, 255, .7);
  font-size: .93rem;
}
.foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; }
.foot__logo img { height: 42px; width: auto; margin-bottom: 18px; }
.foot h4 { color: #fff; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.foot a { text-decoration: none; }
.foot a:hover { color: #fff; }
.foot__contact a { display: inline-flex; align-items: center; gap: .55em; }
.foot__contact .icon { width: 16px; height: 16px; opacity: .7; }
.foot__social { display: flex; gap: 10px; margin-top: 20px; }
.foot__social a {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--r-1);
}
.foot__social a:hover { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .07); }
.foot__social .icon { width: 19px; height: 19px; }
.foot__legal {
  display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between;
  margin-top: clamp(36px, 4vw, 56px); padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .86rem;
}
.foot__legal ul { display: flex; flex-wrap: wrap; gap: 22px; }

/* ------------------------------------------------------------------ Bewegung
   Nur wenn JavaScript laeuft, wird ueberhaupt etwas versteckt. Die Klasse setzt
   ein kurzes Skript im Kopfbereich, siehe layout.py. Ohne JavaScript ist die
   Seite vollstaendig sichtbar. */

.js [data-reveal] { opacity: 0; transform: translateY(14px); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.22, .8, .3, 1); }

/* ------------------------------------------------------------------ Umbrueche
   Der Kopfbereich weicht in zwei Stufen: erst faellt die Rufnummer, dann die
   ganze Navigation. Beide Schwellen sind gemessen, die Rechnung steht im
   README unter "Umbrueche im Kopfbereich". */

/* Gemessen bei 1440 Pixel: Logo 71, Navigation 625, Rufnummer 151,
   Schaltflaeche 243, vier Abstaende 74. Mit Rufnummer zusammen 1164 Pixel,
   ohne sie 999. Die Kopfspur ist min(100% - 44px, 1260px), die 1164 sind
   also ab 1208 Pixel da, die 999 ab 1043. Mit Reserve aufgerundet: */
@media (max-width: 1219px) {
  .head__tel { display: none; }
}

@media (max-width: 1059px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .head__tools .btn { display: none; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .people { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .hero--split .hero__grid,
  .split--even, .split--wide-media,
  .contact { grid-template-columns: 1fr; }
  .hero--split .hero__media { order: -1; }
  .split--flip .split__media { order: 0; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .plans--2 { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  /* Auf schmalen Geraeten wird sauber getrennt statt hart umgebrochen.
     Das html-Element traegt lang="de", deshalb greift die deutsche
     Trennung. Ohne das reisst overflow-wrap mitten im Wort. */
  h1, h2, h3 { hyphens: auto; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .people { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; gap: 30px; }
  .btn { width: 100%; justify-content: center; }
  .btn--quiet { width: auto; }
  .head__tools .burger { display: inline-flex; }
  .faq details { padding: 0 18px; }
  .faq details > div { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .head, .mnav, .foot__social, .cta, .btn { display: none !important; }
  body { font-size: 11pt; }
}