/* ==========================================================================
   Blankenfeldt Steuerberatung — blankenfeldt-stb.de
   Stylesheet nach Corporate Design, Ausgabe 2026 · Rev. B
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Schrift (selbst gehostet — kein externes CDN, DSGVO)
   Space Grotesk Variable, Achse wght 300–700
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-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;
}

/* --------------------------------------------------------------------------
   2 · Design-Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Farbwelt */
  --navy: #1c3552;
  --navy-deep: #16283f;
  --navy-card: #223d5c;
  --teal: #1fb2a6;
  --teal-light: #3fd0c4;
  --teal-deep: #0f5f59;
  --mist: #9fb3c8;
  --text-light: #c4d2e0;
  --muted: #8fa3b8;
  --slate: #5a708a;
  --bg-light: #f4f7fa;
  --bg-light-2: #eef2f6;
  --line-light: #e5ebf1;
  --white: #fff;

  /* Maße */
  --wrap: 1180px;
  --radius-lg: 24px;
  --radius: 20px;
  --radius-sm: 14px;
  --pill: 999px;
  --header-h: 76px;

  /* Schatten */
  --shadow-soft: 0 14px 40px rgba(28, 53, 82, 0.06);
  --shadow-card: 0 20px 60px rgba(28, 53, 82, 0.08);
  --shadow-dark: 0 22px 50px rgba(0, 0, 0, 0.32);

  /* Bewegung */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   3 · Reset & Grundlagen
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--teal); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--teal-deep); }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
  /* Deutsche Komposita wie »Buchhaltungssystem« sind länger als die Spalte
     schmaler Displays und würden die Seite seitlich schiebbar machen.
     Silbentrennung greift zuerst, break-word ist die Rückfallebene, falls
     kein Trennwörterbuch verfügbar ist. */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 28px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--teal);
  color: #fff;
  padding: 12px 22px;
  border-radius: 0 0 12px 0;
  font-weight: 500;
}
.skip-link:focus { left: 0; color: #fff; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4 · Signet & Wortmarke
   -------------------------------------------------------------------------- */
.signet {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--navy);
  line-height: 1;
}
.signet__b {
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: #fff;
}
.signet__bar {
  width: 12px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--teal);
  margin-top: 2px;
}
.signet--teal { background: var(--teal); }
.signet--teal .signet__bar { background: var(--teal-deep); }
.signet--light { background: #fff; }
.signet--light .signet__b { color: var(--navy); }

.lockup { display: flex; align-items: center; gap: 13px; }
/* Wortmarke bleibt innerhalb der Signethöhe — als Block, damit line-height
   greift und die Inline-Box der Schrift den Lockup nicht überragt. */
/* Lockup-Breiten (gemessen, Space Grotesk):
     »Blankenfeldt« 23px          → 134,2 px
     Strich 12 + Abstand 6 + »STEUERBERATUNG« 10px/0,18em ≈ 127 px
   Die Wortmarke führt damit die zweite Zeile um rund 7 px an, statt von ihr
   überragt zu werden. Der Claim ist zugleich von 9 auf 10px gewachsen. */
.lockup__name {
  display: block;
  font-weight: 700;
  font-size: 23px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--navy);
}
.lockup__sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}
.lockup__rule {
  width: 12px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--teal);
}
/* Der negative rechte Rand schluckt den Sperr-Abstand hinter dem letzten
   Buchstaben, der sonst als unsichtbare Breite mitzählen würde. */
.lockup__claim {
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.18em;
  margin-right: -0.18em;
  color: var(--slate);
  text-transform: uppercase;
}
.lockup--onDark .lockup__name { color: #fff; }
.lockup--onDark .lockup__claim { color: var(--mist); }

/* --------------------------------------------------------------------------
   5 · Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1.5px solid transparent;
  border-radius: var(--pill);
  padding: 14px 28px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease), transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn--primary {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 10px 26px rgba(31, 178, 166, 0.28);
}
.btn--primary:hover { background: var(--teal-light); color: #fff; box-shadow: 0 14px 32px rgba(31, 178, 166, 0.36); }

.btn--ghost {
  border-color: #d3dee8;
  color: var(--navy);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--teal); color: var(--teal); }

.btn--ghostDark {
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  background: transparent;
}
.btn--ghostDark:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); color: #fff; }

.btn--sm { padding: 11px 22px; font-size: 15px; }
.btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   6 · Kopfleiste
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.header.is-stuck {
  border-bottom-color: var(--line-light);
  box-shadow: 0 6px 24px rgba(28, 53, 82, 0.05);
}
.header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.header__brand { display: flex; align-items: center; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 9px 15px;
  border-radius: var(--pill);
  color: var(--slate);
  font-size: 15.5px;
  font-weight: 500;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav a:hover { color: var(--navy); background: var(--bg-light); }

.header__cta { display: flex; align-items: center; gap: 14px; }

.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line-light);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.burger span {
  position: relative;
  display: block;
  width: 18px; height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: background 0.2s var(--ease);
}
.burger span::before,
.burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px; height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), top 0.25s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded='true'] span { background: transparent; }
.burger[aria-expanded='true'] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded='true'] span::after { top: 0; transform: rotate(-45deg); }

.mobileNav {
  display: none;
  border-top: 1px solid var(--line-light);
  background: #fff;
  padding: 14px 0 22px;
}
.mobileNav.is-open { display: block; }
.mobileNav a {
  display: block;
  padding: 13px 4px;
  border-bottom: 1px solid var(--bg-light-2);
  color: var(--navy);
  font-size: 17px;
  font-weight: 500;
}
.mobileNav .btn { margin-top: 18px; }

/* --------------------------------------------------------------------------
   7 · Sektionen allgemein
   -------------------------------------------------------------------------- */
.section { padding: 104px 0; }
.section--light { background: var(--bg-light); }
.section--dark { background: var(--navy); color: #fff; }
.section--dark h2, .section--dark h3 { color: #fff; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--teal);
}
.eyebrow::before {
  content: '';
  width: 34px; height: 3px;
  border-radius: 3px;
  background: var(--teal);
}

.section__head { max-width: 720px; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .eyebrow { justify-content: center; }
.section__title {
  margin-top: 22px;
  font-size: clamp(32px, 4.2vw, 46px);
}
.section__lead {
  margin-top: 20px;
  font-size: 18.5px;
  line-height: 1.6;
  color: var(--slate);
}
.section--dark .section__lead { color: var(--text-light); }

/* --------------------------------------------------------------------------
   8 · Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  padding: 108px 0 124px;
}
.hero::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 10px;
  background: var(--teal);
}
.hero__watermark {
  position: absolute;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: min(46vw, 620px);
  line-height: 0.72;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.035);
  pointer-events: none;
  user-select: none;
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 72px;
  align-items: center;
}
.hero__title {
  margin-top: 26px;
  /* Untergrenze 36px: Bei 40px passt »Steuerberatung —« auf 360-px-Geräten
     nicht mehr in die Spalte, der Gedankenstrich fiele allein auf eine Zeile. */
  font-size: clamp(36px, 5.6vw, 66px);
  line-height: 1.03;
  letter-spacing: -0.03em;
}
.hero__title em {
  font-style: normal;
  color: var(--teal);
}
/* Wechselnder Schlussbegriff.
   Alle Varianten liegen im selben Grid-Feld übereinander: Die Zeile reserviert
   dadurch immer die Höhe der längsten Variante und springt beim Wechsel nicht —
   auf schmalen Displays umbricht sonst nur ein Teil der Varianten. */
.rotator {
  display: grid;
  align-items: start;
}
.rotator__item {
  grid-area: 1 / 1;
  font-style: normal;
  color: var(--teal);
  opacity: 0;
  transform: translateY(-0.2em);
  /* visibility (nicht display) hält die Variante im Layout — die Zeile behält
     ihre Höhe —, nimmt sie aber aus Vorlesereihenfolge und gerendertem Text.
     Dadurch steht in der Überschrift immer nur die sichtbare Variante. */
  visibility: hidden;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease),
    visibility 0.4s var(--ease);
}
.rotator__item.is-active {
  opacity: 1;
  transform: none;
  visibility: visible;
}
.hero__lead {
  margin-top: 26px;
  max-width: 520px;
  font-size: 19.5px;
  line-height: 1.62;
  color: var(--text-light);
}
.hero__lead strong { color: #fff; font-weight: 500; }
.hero__actions {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.hero__note {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 14.5px;
  color: var(--mist);
}
.hero__note span { display: inline-flex; align-items: center; gap: 8px; }
.hero__note svg { width: 16px; height: 16px; color: var(--teal); flex-shrink: 0; }

/* Kennzahlen-Panel statt Portraitfoto */
.heroPanel {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--navy-card);
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 34px 34px 30px;
  box-shadow: var(--shadow-dark);
  overflow: hidden;
}
/* Key Visual »Raster · System« aus dem CD — zur Textseite hin ausgeblendet,
   damit das Punktraster die Lesbarkeit nicht stört. */
.heroPanel::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(31, 178, 166, 0.5) 2px, transparent 2px);
  background-size: 26px 26px;
  opacity: 0.38;
  -webkit-mask-image: radial-gradient(125% 105% at 100% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(125% 105% at 100% 0%, #000 0%, transparent 70%);
  pointer-events: none;
}
.heroPanel__label {
  position: relative;
  font-size: 11.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.heroPanel__list {
  position: relative;
  margin-top: 22px;
  display: grid;
  gap: 2px;
}
.heroPanel__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.heroPanel__item:last-child { border-bottom: 0; padding-bottom: 4px; }
.heroPanel__icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: rgba(31, 178, 166, 0.14);
  color: var(--teal);
}
.heroPanel__icon svg { width: 19px; height: 19px; }
.heroPanel__title { font-size: 16.5px; font-weight: 500; color: #fff; }
.heroPanel__text { margin-top: 3px; font-size: 14.5px; line-height: 1.5; color: var(--mist); }

/* --------------------------------------------------------------------------
   9 · Vertrauensbalken
   -------------------------------------------------------------------------- */
.trust {
  background: var(--white);
  border-bottom: 1px solid var(--line-light);
  padding: 34px 0;
}
.trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
}
.trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 18px;
  border-radius: var(--radius-sm);
  text-align: center;
  position: relative;
}
.trust__item + .trust__item::before {
  content: '';
  position: absolute;
  left: -8px; top: 16%; bottom: 16%;
  width: 1px;
  background: var(--line-light);
}
.trust__logo { height: 62px; width: auto; object-fit: contain; }
.trust__logo--datev { height: 66px; }
.trust__caption {
  font-size: 13px;
  line-height: 1.45;
  color: var(--slate);
}
.trust__caption strong { display: block; color: var(--navy); font-weight: 500; font-size: 14.5px; }

.stars { display: flex; gap: 3px; }
.stars svg { width: 21px; height: 21px; color: #f5a623; }

/* 10+ Jahre — die Zahl trägt die Aufmerksamkeit, der Text bleibt ruhig.
   Höhe wie die Logos daneben, damit die vier Spalten auf einer Linie liegen. */
.tenure {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 62px;
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--navy);
}
.tenure sup {
  font-size: 0.4em;
  letter-spacing: 0;
  color: var(--teal);
  vertical-align: super;
  margin-left: 1px;
}

/* --------------------------------------------------------------------------
   10 · Vorteile
   -------------------------------------------------------------------------- */
/* Bento-Raster: vier Spalten, die Leitkarte und die Beratungskarte belegen je
   zwei. Dadurch entsteht eine Hierarchie statt sechs gleichwertiger Kacheln. */
.benefits {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.benefit {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius);
  padding: 36px 32px 32px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.benefit:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.benefit::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--teal);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.32s var(--ease);
}
.benefit:hover::before { transform: scaleY(1); }
.benefit--wide { grid-column: span 2; }

/* Drei gleichwertige Karten ohne Hierarchie — für die Dankeseite.
   Das Bento-Raster ist auf sechs Karten mit zwei breiten ausgelegt und ließe
   bei dreien eine Spalte leer. */
.benefits--drei { grid-template-columns: repeat(3, 1fr); }

/* Leitkarte — der eine Vorteil, auf den alles einzahlt */
.benefit--featured {
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-card) 100%);
  color: #fff;
  box-shadow: 0 24px 54px rgba(28, 53, 82, 0.26);
}
.benefit--featured::after {
  content: 'B';
  position: absolute;
  right: -36px; bottom: -104px;
  font-size: 280px;
  font-weight: 700;
  line-height: 0.7;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.045);
  pointer-events: none;
}
.benefit--featured .benefit__icon { background: rgba(31, 178, 166, 0.2); color: var(--teal-light); }
.benefit--featured .benefit__title { color: #fff; font-size: 26px; font-weight: 700; }
.benefit--featured .benefit__text { color: var(--text-light); font-size: 16.5px; }
.benefit--featured .benefit__text strong { color: #fff; }

/* Akzentkarte — ruhiger Gegenpol zur dunklen Leitkarte */
.benefit--accent { background: var(--bg-light-2); box-shadow: none; }
.benefit--accent .benefit__icon { background: #fff; }

.benefit__icon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 15px;
  background: rgba(31, 178, 166, 0.1);
  color: var(--teal);
}
.benefit__icon svg { width: 26px; height: 26px; }
.benefit__title {
  position: relative;
  margin-top: 24px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.benefit__text {
  position: relative;
  margin-top: 11px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--slate);
}
.benefit__text strong { color: var(--navy); font-weight: 500; }

/* --------------------------------------------------------------------------
   11 · Leistungen mit Umschalter
   -------------------------------------------------------------------------- */
.switch {
  margin: 40px auto 0;
  display: inline-flex;
  position: relative;
  padding: 5px;
  border-radius: var(--pill);
  background: var(--bg-light);
  border: 1px solid var(--line-light);
}
.section--dark .switch { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.12); }
.switch__thumb {
  position: absolute;
  top: 5px; left: 5px;
  height: calc(100% - 10px);
  border-radius: var(--pill);
  background: var(--navy);
  box-shadow: 0 6px 18px rgba(28, 53, 82, 0.2);
  transition: transform 0.34s var(--ease), width 0.34s var(--ease);
}
.switch__btn {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  border-radius: var(--pill);
  padding: 12px 30px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--slate);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}
.switch__btn[aria-selected='true'] { color: #fff; }

.services {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.services[hidden] { display: none; }
.service {
  background: #fff;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 32px 30px;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.service:hover {
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.service__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--bg-light);
  color: var(--teal);
}
.service__icon svg { width: 23px; height: 23px; }
.service__title { margin-top: 22px; font-size: 19px; font-weight: 500; }
.service__text { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--slate); }
.service__list { margin-top: 16px; display: grid; gap: 8px; }
.service__list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--slate);
}
.service__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal);
}

.servicesFoot {
  margin-top: 42px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  color: var(--slate);
  font-size: 16px;
}

/* --------------------------------------------------------------------------
   12 · Mandant werden — 3 Schritte
   -------------------------------------------------------------------------- */
/* Vier Schritte im 2×2-Raster. Die frühere gepunktete Verbindungslinie ist
   entfallen — sie ergibt nur in einer durchgehenden Reihe Sinn. Die Reihenfolge
   tragen jetzt die Ziffern. */
.steps {
  position: relative;
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: 34px 32px 32px;
  backdrop-filter: blur(2px);
}
.step__num {
  position: relative;
  z-index: 1;
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: 17px;
  background: var(--teal);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  box-shadow: 0 12px 28px rgba(31, 178, 166, 0.32);
}
.step:not(:first-child) .step__num {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}
.step__badge {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: var(--pill);
  background: rgba(31, 178, 166, 0.16);
  color: var(--teal-light);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.step__badge svg { width: 14px; height: 14px; }
.step__title { margin-top: 16px; font-size: 22px; font-weight: 500; color: #fff; }
.step__text { margin-top: 12px; font-size: 15.5px; line-height: 1.62; color: var(--text-light); }
.step__text strong { color: #fff; font-weight: 500; }

/* Checkliste je Schritt — macht das Versprechen greifbar */
.step__list {
  margin-top: 22px;
  /* Mindestabstand zum Kleingedruckten; dessen margin-top:auto kann sonst
     auf null zusammenfallen, wenn die Karte knapp gefüllt ist. */
  margin-bottom: 24px;
  display: grid;
  gap: 11px;
}
.step__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-light);
}
.step__list svg {
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 1px;
  color: var(--teal);
}

.step__meta {
  /* schiebt das Kleingedruckte an den Kartenfuß, damit die Trennlinien
     benachbarter Karten auf einer Höhe liegen */
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
  line-height: 1.55;
  color: var(--mist);
}
.step__meta strong { color: var(--teal-light); font-weight: 500; }
.stepsCta { margin-top: 46px; text-align: center; }

/* --------------------------------------------------------------------------
   13 · Vergleich
   -------------------------------------------------------------------------- */
.compare {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
.compareCol {
  border-radius: var(--radius);
  padding: 38px 34px 34px;
}
.compareCol--old {
  background: #fff;
  border: 1px solid var(--line-light);
}
.compareCol--new {
  position: relative;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 26px 60px rgba(28, 53, 82, 0.22);
  overflow: hidden;
}
.compareCol--new::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--teal);
}
.compareCol--new::after {
  content: 'B';
  position: absolute;
  right: -50px; bottom: -110px;
  font-size: 300px;
  font-weight: 700;
  line-height: 0.7;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}
.compareCol__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-light);
}
.compareCol--new .compareCol__head { border-bottom-color: rgba(255, 255, 255, 0.14); }
.compareCol__tag {
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.compareCol__title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.compareCol--old .compareCol__title { color: var(--slate); }
.compareCol__chip {
  margin-left: auto;
  padding: 6px 14px;
  border-radius: var(--pill);
  background: rgba(31, 178, 166, 0.16);
  color: var(--teal-light);
  font-size: 12.5px;
  font-weight: 500;
}
.compareList { position: relative; margin-top: 8px; }
.compareList li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 17px 0;
  border-bottom: 1px solid var(--bg-light-2);
  font-size: 15.5px;
  line-height: 1.55;
}
.compareCol--new .compareList li { border-bottom-color: rgba(255, 255, 255, 0.09); color: var(--text-light); }
.compareList li:last-child { border-bottom: 0; }
.compareList svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.compareCol--old .compareList { color: var(--slate); }
.compareCol--old .compareList svg { color: #c2ceda; }
.compareCol--new .compareList svg { color: var(--teal); }

/* --------------------------------------------------------------------------
   13b · Buchhaltungssysteme & Schnittstellen
   Die Logowand liegt in einer hellen Karte, damit sich die Sektion trotz weißem
   Hintergrund von der Vergleichssektion darüber absetzt. Die Marken stehen als
   Wortmarken in der Hausschrift — einheitlich in Marineblau, damit zehn fremde
   Farbwelten das Layout nicht zerreißen. Werden später Original-Logos ergänzt,
   genügt es, den <span> je Kachel durch ein <img> zu ersetzen (Regel unten).
   -------------------------------------------------------------------------- */
.systems {
  margin-top: 52px;
  padding: 38px 38px 32px;
  background: var(--bg-light);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
}
.systems__label {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.systems__label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line-light);
}

/* auto-fit statt fester Spaltenzahl: Bei `1fr` bestimmt die längste Wortmarke
   (»BuchhaltungsButler«, 140 px) die Mindestbreite ihrer Spalte — das Raster
   wird ungleichmäßig. Die feste Mindestbreite von 176 px hält alle Spuren
   gleich breit und ergibt von selbst 5 · 4 · 3 · 2 Spalten. Untergrenze ist die
   längste Wortmarke plus Innenabstand (140 + 32 px). */
.logoWall {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  gap: 14px;
}
.logoTile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-sm);
  text-align: center;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    border-color 0.25s var(--ease);
}
.logoTile:hover {
  transform: translateY(-3px);
  border-color: rgba(31, 178, 166, 0.45);
  box-shadow: var(--shadow-soft);
}
/* Die Originaldateien reichen von 1:1 (DATEV-Label) bis 7:1
   (BuchhaltungsButler). Eine einheitliche Höhe würde die breiten Wortmarken
   riesig und das quadratische Label winzig erscheinen lassen — deshalb steht
   je Logo eine eigene Höhe, die auf gleiche *optische* Schwere eingestellt
   ist. Die Werte sind so gewählt, dass keins breiter als 140 px wird und
   damit auch in die schmalste Kachel (176 − 32 px) passt. */
.logoTile img {
  height: var(--logo-h, 26px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.logoTile--datev    img { --logo-h: 46px; }
.logoTile--lexware  img { --logo-h: 34px; }
.logoTile--butler   img { --logo-h: 20px; }
.logoTile--sevdesk  img { --logo-h: 27px; }
.logoTile--pathway  img { --logo-h: 26px; }
.logoTile--stripe   img { --logo-h: 26px; }
.logoTile--easybill img { --logo-h: 26px; }
.logoTile--qonto    img { --logo-h: 25px; }
.logoTile--pleo     img { --logo-h: 22px; }
/* GetMyInvoices ist mit 7,6:1 die breiteste Wortmarke der Wand — bei 18 px
   Höhe wird sie 138 px breit und bleibt damit knapp unter der Grenze. */
.logoTile--getmyinvoices img { --logo-h: 18px; }

.systems__note {
  margin-top: 22px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--slate);
}

.systemsPoints {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.systemsPoint { display: flex; gap: 16px; }
.systemsPoint__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(31, 178, 166, 0.12);
  color: var(--teal);
}
.systemsPoint__icon svg { width: 23px; height: 23px; }
.systemsPoint__title {
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.systemsPoint__text {
  margin-top: 7px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate);
}

/* --------------------------------------------------------------------------
   14 · FAQ
   -------------------------------------------------------------------------- */
.faq {
  margin-top: 52px;
  max-width: 860px;
  margin-inline: auto;
  display: grid;
  gap: 14px;
}
.faqItem {
  background: #fff;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.faqItem.is-open { border-color: rgba(31, 178, 166, 0.45); box-shadow: var(--shadow-soft); }
.faqItem__btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 26px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
}
.faqItem__icon {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-light);
  transition: background 0.25s var(--ease), transform 0.3s var(--ease);
}
.faqItem__icon::before,
.faqItem__icon::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 13px; height: 2px;
  border-radius: 2px;
  background: var(--navy);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease), background 0.25s var(--ease);
}
.faqItem__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faqItem.is-open .faqItem__icon { background: var(--teal); }
.faqItem.is-open .faqItem__icon::before,
.faqItem.is-open .faqItem__icon::after { background: #fff; }
.faqItem.is-open .faqItem__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faqItem__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.34s var(--ease);
}
.faqItem.is-open .faqItem__panel { grid-template-rows: 1fr; }
.faqItem__inner { overflow: hidden; }
.faqItem__inner > div {
  padding: 0 26px 26px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--slate);
}
.faqItem__inner p + p { margin-top: 14px; }
.faqItem__inner em { font-style: italic; color: var(--navy); }

/* --------------------------------------------------------------------------
   14b · Standort & Einzugsgebiet
   -------------------------------------------------------------------------- */
.localGrid {
  margin-top: 54px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 26px;
  align-items: stretch;
}
.localCard {
  background: #fff;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 36px 34px 32px;
}
.localCard--adresse {
  background: var(--navy);
  border-color: transparent;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.localCard--adresse::after {
  content: 'B';
  position: absolute;
  right: -40px; bottom: -96px;
  font-size: 260px;
  font-weight: 700;
  line-height: 0.7;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.045);
  pointer-events: none;
}
.localCard__label {
  position: relative;
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.localCard__adresse {
  position: relative;
  margin-top: 18px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  font-style: normal;
}
.localCard__zeilen { position: relative; margin-top: 24px; display: grid; gap: 16px; }
.localCard__zeile { display: flex; gap: 13px; align-items: flex-start; }
.localCard__zeile svg {
  flex-shrink: 0;
  width: 19px; height: 19px;
  margin-top: 2px;
  color: var(--teal);
}
.localCard__zeile span { font-size: 15.5px; line-height: 1.55; color: var(--text-light); }
.localCard__zeile a { color: #fff; border-bottom: 1px solid rgba(31, 178, 166, 0.6); }
.localCard__zeile a:hover { color: var(--teal-light); }

.localCard__title { font-size: 21px; font-weight: 500; letter-spacing: -0.01em; }
.localCard__text { margin-top: 12px; font-size: 15.5px; line-height: 1.65; color: var(--slate); }
.orte {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.orte li {
  padding: 7px 15px;
  border-radius: var(--pill);
  background: var(--bg-light);
  border: 1px solid var(--line-light);
  font-size: 14.5px;
  color: var(--navy);
}
.orte li:first-child {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-weight: 500;
}
.localCard__fuss {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line-light);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   15 · Kontakt
   -------------------------------------------------------------------------- */
.contactGrid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 32px;
  align-items: start;
}
/* Rasterelemente schrumpfen von Haus aus nicht unter ihre Mindestinhaltsbreite.
   Ein <select> bringt die Breite seiner längsten Option mit — ohne min-width:0
   drückt es auf schmalen Displays die ganze Karte über die Spalte hinaus. */
.contactGrid > *,
.formGrid > * { min-width: 0; }
.formCard {
  background: #fff;
  color: var(--navy);
  border-radius: var(--radius-lg);
  padding: 42px 44px 38px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.28);
}
.formGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 22px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
}
.field label .req { color: var(--teal); }
.field .hint { font-size: 12.5px; color: var(--muted); font-weight: 400; }

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1.5px solid var(--line-light);
  border-radius: 12px;
  background: var(--bg-light);
  padding: 13px 15px;
  font-family: inherit;
  font-size: 16px;
  color: var(--navy);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { resize: vertical; min-height: 118px; line-height: 1.55; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a708a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 44px;
  cursor: pointer;
}
.field input::placeholder,
.field textarea::placeholder { color: #a9b8c7; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  background: #fff;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(31, 178, 166, 0.14);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #d9534f; background: #fdf5f5; }
.field .error {
  display: none;
  font-size: 13px;
  color: #c9403c;
}
.field.has-error .error { display: block; }

.consent {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--bg-light);
  border: 1.5px solid var(--line-light);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.consent.has-error { border-color: #d9534f; background: #fdf5f5; }
.consent input[type='checkbox'] {
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin: 2px 0 0;
  accent-color: var(--teal);
  cursor: pointer;
}
.consent label { font-size: 14px; line-height: 1.55; color: var(--slate); font-weight: 400; }

.formFoot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  margin-top: 4px;
}
.formFoot .note { font-size: 13.5px; color: var(--muted); }

.formStatus {
  grid-column: 1 / -1;
  display: none;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.55;
}
.formStatus.is-visible { display: flex; }
.formStatus--ok { background: rgba(31, 178, 166, 0.1); color: var(--teal-deep); border: 1px solid rgba(31, 178, 166, 0.35); }
.formStatus--err { background: #fdf5f5; color: #c9403c; border: 1px solid rgba(217, 83, 79, 0.4); }
.formStatus svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }

/* Direkter Draht */
.direct {
  border-radius: var(--radius-lg);
  background: var(--navy-card);
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 36px 32px;
}
/* Person hinter dem Mandat */
.person {
  text-align: center;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.person__photo {
  width: 132px;
  height: 132px;
  margin: 0 auto 20px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px rgba(31, 178, 166, 0.55), 0 18px 38px rgba(0, 0, 0, 0.38);
}
.person__name {
  font-size: 19.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
}
.person__role {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--teal);
}

.direct__title { font-size: 21px; font-weight: 500; color: #fff; }
.direct__lead { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--mist); }
.direct__list { margin-top: 26px; display: grid; gap: 22px; }
.direct__row { display: flex; gap: 15px; align-items: flex-start; }
.direct__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(31, 178, 166, 0.14);
  color: var(--teal);
}
.direct__icon svg { width: 19px; height: 19px; }
.direct__k { font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.direct__v { margin-top: 4px; font-size: 16px; line-height: 1.5; color: #fff; }
.direct__v a { color: #fff; border-bottom: 1px solid rgba(31, 178, 166, 0.6); }
.direct__v a:hover { color: var(--teal-light); }
.direct__foot {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
  line-height: 1.6;
  color: var(--mist);
}

/* --------------------------------------------------------------------------
   16 · Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--navy-deep);
  color: var(--text-light);
  padding: 72px 0 34px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 44px;
}
.footer__about { max-width: 320px; }
.footer__text { margin-top: 22px; font-size: 15px; line-height: 1.65; color: var(--mist); }
.footer h3 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer__list { margin-top: 20px; display: grid; gap: 12px; }
.footer__list a, .footer__list span { font-size: 15.5px; color: var(--text-light); }
.footer__list a:hover { color: var(--teal-light); }
.footer__bottom {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--muted);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 22px; }
.footer__legal a { color: var(--mist); }
.footer__legal a:hover { color: var(--teal-light); }

/* --------------------------------------------------------------------------
   17 · Rechtsseiten (Impressum / Datenschutz)
   -------------------------------------------------------------------------- */
.pageHero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  padding: 76px 0 84px;
}
.pageHero::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 10px;
  background: var(--teal);
}
.pageHero::after {
  content: 'B';
  position: absolute;
  right: -3%; top: 50%;
  transform: translateY(-50%);
  font-size: 340px;
  font-weight: 700;
  line-height: 0.72;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.035);
  pointer-events: none;
}
.pageHero__title { position: relative; margin-top: 22px; font-size: clamp(34px, 5vw, 52px); }
.pageHero__lead { position: relative; margin-top: 18px; max-width: 620px; font-size: 17.5px; color: var(--text-light); }

.legal { padding: 78px 0 96px; background: var(--bg-light); }
.legal__layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.legal__toc {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  background: #fff;
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow-soft);
}
.legal__toc h2 {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.legal__toc ol { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 3px; }
.legal__toc li { counter-increment: toc; }
.legal__toc a {
  display: block;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--slate);
}
.legal__toc a::before {
  content: counter(toc) '.';
  color: var(--teal);
  font-weight: 500;
  margin-right: 8px;
}
.legal__toc a:hover { background: var(--bg-light); color: var(--navy); }

.legal__body { background: #fff; border-radius: var(--radius-lg); padding: 52px 56px; box-shadow: var(--shadow-soft); }
.legal__body section + section { margin-top: 46px; padding-top: 44px; border-top: 1px solid var(--line-light); }
.legal__body h2 {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.legal__body h3 { margin-top: 28px; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.legal__body p { margin-top: 14px; font-size: 16.5px; line-height: 1.7; color: var(--slate); }
.legal__body p strong, .legal__body li strong { color: var(--navy); font-weight: 500; }
.legal__body ul { margin-top: 14px; display: grid; gap: 9px; }
.legal__body ul li {
  position: relative;
  padding-left: 22px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--slate);
}
.legal__body ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal);
}
.legal__body dl { margin: 16px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 26px; }
.legal__body dt { font-size: 15px; color: var(--muted); }
.legal__body dd { margin: 0; font-size: 16.5px; color: var(--navy); }

.callout {
  margin-top: 22px;
  border-left: 4px solid var(--teal);
  border-radius: 0 14px 14px 0;
  background: var(--bg-light);
  padding: 20px 24px;
}
.callout p { margin-top: 0; font-size: 15.5px; }
.callout p + p { margin-top: 10px; }

.todo {
  margin-top: 22px;
  border-left: 4px solid #f5a623;
  border-radius: 0 14px 14px 0;
  background: #fff8ec;
  padding: 20px 24px;
}
.todo p { margin-top: 0; color: #8a5d10; font-size: 15.5px; }
.todo strong { color: #6b460a; }

.legal__meta {
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid var(--line-light);
  font-size: 14.5px;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   18 · Einblenden beim Scrollen
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

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

/* --------------------------------------------------------------------------
   19 · Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; gap: 52px; }
  .heroPanel { max-width: 560px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .contactGrid { grid-template-columns: 1fr; }
  .legal__layout { grid-template-columns: 1fr; gap: 28px; }
  .legal__toc { position: static; }
  .legal__toc ol { grid-template-columns: 1fr 1fr; display: grid; }
}

@media (max-width: 940px) {
  .nav, .header__cta .btn { display: none; }
  .burger { display: flex; }
  .benefits, .benefits--drei { grid-template-columns: 1fr 1fr; }
  .benefit--wide { grid-column: span 2; }
  .benefit--featured .benefit__title { font-size: 23px; }
  .services, .steps { grid-template-columns: 1fr 1fr; }
  .trust__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .trust__item:nth-child(odd) + .trust__item::before,
  .trust__item:nth-child(3)::before { display: none; }
  .trust__item:nth-child(3), .trust__item:nth-child(4) { border-top: 1px solid var(--line-light); padding-top: 26px; }
  .compare { grid-template-columns: 1fr; }
  .localGrid { grid-template-columns: 1fr; }
  .systems { padding: 32px 26px 28px; }
  .systemsPoints { grid-template-columns: 1fr; gap: 22px; }
  .section { padding: 82px 0; }
  .legal__body { padding: 40px 32px; }
}

@media (max-width: 700px) {
  body { font-size: 16.5px; }
  .wrap { padding-inline: 20px; }
  .hero { padding: 76px 0 88px; }
  .hero__watermark { font-size: 76vw; right: -18%; opacity: 0.8; }
  .benefits, .benefits--drei, .services, .steps { grid-template-columns: 1fr; }
  .benefit--wide { grid-column: span 1; }
  .benefit--featured::after { font-size: 200px; bottom: -74px; }
  .formGrid { grid-template-columns: 1fr; }
  .formCard { padding: 32px 26px 30px; }
  .footer__grid { grid-template-columns: 1fr; gap: 34px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .switch { width: 100%; }
  .switch__btn { flex: 1; padding: 12px 14px; font-size: 15px; }
  .section { padding: 66px 0; }
  .section__title { margin-top: 18px; }
  .legal__body { padding: 32px 22px; }
  .legal__body dl { grid-template-columns: 1fr; gap: 3px 0; }
  .legal__body dd + dt { margin-top: 14px; }
  .legal__toc ol { grid-template-columns: 1fr; }
  .compareCol { padding: 30px 24px; }
  .hero__actions .btn { width: 100%; }
  .systems { padding: 30px 22px 26px; border-radius: var(--radius); }
  .logoWall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .logoTile { min-height: 78px; padding: 12px; }
}

/* Sehr schmale Geräte (iPhone SE 1. Gen., Fold-Außendisplay): Bei 36px reicht
   die Spalte nicht für »Steuerberatung —«, der Gedankenstrich stünde allein.
   31px statt 33px, weil sonst die längste Rotationsvariante
   »proaktiv beratend.« umbricht und die Überschrift dauerhaft eine Zeile
   höher würde — sie reserviert immer die Höhe der breitesten Variante. */
@media (max-width: 340px) {
  .hero__title { font-size: 31px; }
}

/* Unter ~382 px passen »Unternehmensmandate« und »Privatmandate« nicht mehr
   nebeneinander — das Wort allein ist 170 px breit und unteilbar. Statt die
   Schrift unlesbar zu verkleinern, stehen die Schalter dann untereinander.
   Der gleitende Regler entfällt dabei; die Auswahl trägt der Button selbst. */
@media (max-width: 400px) {
  .switch { flex-direction: column; gap: 4px; border-radius: 20px; }
  .switch__thumb { display: none; }
  .switch__btn { width: 100%; white-space: normal; }
  .switch__btn[aria-selected='true'] {
    background: var(--navy);
    color: #fff;
    box-shadow: 0 6px 18px rgba(28, 53, 82, 0.2);
  }
}

@media (max-width: 460px) {
  /* Eine zweite Spalte böte hier nur noch rund 115 px — das breiteste Logo
     (BuchhaltungsButler, 7:1) würde an der max-width gestaucht. Eine Spalte
     lässt allen Logos ihre volle Größe. */
  .logoWall { grid-template-columns: 1fr; }
  .logoTile { min-height: 68px; }

  .trust__grid { grid-template-columns: 1fr; }
  .trust__item::before { display: none !important; }
  .trust__item + .trust__item { border-top: 1px solid var(--line-light); padding-top: 22px; }
}

/* --------------------------------------------------------------------------
   20 · Druck
   -------------------------------------------------------------------------- */
@media print {
  .header, .footer, .legal__toc, .burger, .mobileNav { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .pageHero { background: #fff; color: var(--navy); padding: 0 0 24px; }
  .pageHero::after { display: none; }
  .pageHero__lead { color: var(--slate); }
  .legal { background: #fff; padding: 0; }
  .legal__body { box-shadow: none; padding: 0; }
}