/* =============================================================================
   synergy-360.de — Layout und Bausteine der Landingpage
   Herausgeber: Aetheris GmbH i. G.        Stand: 13.08.2026
   -----------------------------------------------------------------------------
   Diese Datei enthaelt KEINE rohen Markenfarben. Alles Farbige kommt aus
   assets/synergy-tokens.css (Kopie aus Hetzner\synergy-brand\tokens\ — dort ist
   das Original, hier nie gegenlaeufig aendern).

   Ausnahme, bewusst: die Hero-Sektion. Sie steht auf einem Galaxienebel und
   arbeitet mit weissen Transparenzen (rgba(255,255,255,x)). Das sind keine
   Markenfarben, sondern Deckkraftstufen von Weiss auf dunklem Grund — als Token
   waeren sie nur schwerer zu lesen.

   ⚠️ GOLD IST NIE FLIESSTEXT (BRAND.md § 3.2): #DEA51C auf Weiss = 2,2:1.
   Gold traegt hier ausschliesslich Flaeche (CTA), Kante und Symbol.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   SCHRIFT — selbst ausgeliefert. Manrope ist die Hausschrift der Linie, liegt
   aber nirgends als Datei vor (BRAND.md § 6); ausgeliefert wird der dort
   dokumentierte Ersatz Inter. Google Fonts ist in dieser Linie bewusst entfernt
   worden — eine Einbindung waere ein datenschutzrechtlicher Rueckschritt.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(inter-var-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: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(inter-var-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;
}

/* -----------------------------------------------------------------------------
   GRUNDLAGE
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--s360-flaeche);
  color: var(--s360-text);
  font-family: var(--s360-schrift);
  font-size: 17px;             /* Marketingseite, nicht Anwendung: groesser als die 13px der Linie */
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
img { max-width: 100%; height: auto; }

a { color: var(--s360-navy-700); }
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--s360-fokus);
  outline-offset: 3px;
  border-radius: var(--s360-radius-sm);
}

.wrap {
  width: 100%;
  max-width: var(--s360-inhalt-breite);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

/* Sprungmarke — sichtbar, sobald sie den Fokus hat. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--s360-navy-900); color: #fff;
  padding: 12px 18px; border-radius: 0 0 var(--s360-radius-sm) 0;
}
.skip:focus { left: 0; }

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

/* -----------------------------------------------------------------------------
   KNOEPFE — Primaer ist Gold mit dunkler Schrift (#241a06 auf #DEA51C = 7,9:1,
   die CTA-Paarung aus Synergy-Time). Zweitknopf ist Navy mit Weiss.
   -------------------------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 13px 26px;
  border: 1px solid transparent; border-radius: var(--s360-radius-sm);
  background: var(--s360-knopf-grund); color: var(--s360-knopf-text);
  font: inherit; font-weight: var(--s360-fett-voll); text-decoration: none;
  cursor: pointer;
  transition: background var(--s360-dauer) var(--s360-kurve),
              transform var(--s360-dauer) var(--s360-kurve);
}
.knopf:hover { background: var(--s360-knopf-grund-hover); }
.knopf:active { transform: translateY(1px); }

.knopf--navy { background: var(--s360-knopf2-grund); color: var(--s360-knopf2-text); }
.knopf--navy:hover { background: var(--s360-knopf2-grund-hover); }

/* Auf dem Nebel: heller Rahmen statt Flaeche, damit der goldene Hauptknopf
   allein steht und nicht mit einem zweiten Vollflaechenknopf konkurriert. */
.knopf--glas {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.knopf--glas:hover { background: rgba(255, 255, 255, 0.22); }

.knopf-reihe { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.knopf-reihe--mitte { justify-content: center; }

/* =============================================================================
   KOPFLEISTE — weiss hinterlegt, ueber dem Hero (Vorgabe Sascha 13.08.2026).
   Drei Zugaenge, keine Seitennavigation: die Module stehen als Kacheln im
   Bild, der Preis steht im Modal jedes Moduls.
   ============================================================================= */
.kopfleiste {
  background: #ffffff;
  border-bottom: 1px solid var(--s360-linie);
}
.kopfleiste-innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding-block: 12px;
}
.kopf-marke {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 19px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--s360-navy-900); text-decoration: none;
}
.kopf-marke img { height: 30px; width: auto; }
/* Auf Weiss ist das Akzentgold unlesbar (2,2:1). Hier gilt gold-600 mit
   4,0:1 — dieselbe Regel wie auf den Platzhalterseiten. */
.kopf-marke b { color: var(--s360-gold-600); }

.kopf-links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); }
.kopf-links a {
  color: var(--s360-navy-900); text-decoration: none;
  font-size: 15px; font-weight: var(--s360-fett-halb);
}
.kopf-links a:hover { text-decoration: underline; }
.kopf-knopf {
  background: var(--s360-knopf-grund);
  color: var(--s360-knopf-text);
  padding: 10px 20px; border-radius: var(--s360-radius-sm);
  min-height: 42px; display: inline-flex; align-items: center;
}
.kopf-knopf:hover { background: var(--s360-knopf-grund-hover); text-decoration: none; }

/* =============================================================================
   HERO — flach, Nebelfoto, Logo als Ring, Kachelreihe darunter, Text rechts

   ⚠️ Festes Seitenverhaeltnis 1600:380. Nur so fallen die Prozentwerte der
   Kacheln (CSS) und die Koordinaten der Linien (SVG) auf denselben Punkt.
   Alle Zahlen stammen aus `python tools/ring.py`.
   ============================================================================= */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background-color: #01081a;

  /* ⚠️ Mittelpunkt des Emblems — derselbe Wert steht in tools/ring.py. */
  --marke-x: 8.75%;
  --marke-y: 36.8%;

  aspect-ratio: 1600 / 380;
  container-type: inline-size;
}

/* Das Foto. `cover`, weil ein Foto nicht gestreckt werden darf; die Breite
   geht dabei auf, also bleibt die waagerechte Lage exakt.
   `--hero-bild` ist die Naht fuer ein anderes Bild. */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -3;
  background-image: var(--hero-bild, url(hero-nebel.webp));
  background-size: cover;
  background-position: center 38%;
}

/* Schleier — bewusst zurueckhaltend. Er nimmt die Spitzen des Nebels und
   rahmt oben und unten; der Nebel selbst soll sichtbar bleiben (Messreihe
   mittlere Leuchtdichte im rechten Drittel: ohne Schleier 0,126 · so 0,041 ·
   zu stark 0,016 — dann ist das Bild praktisch weg).
   ⚠️ Solange Ueberschrift UND Kacheln im linken, dunklen Bildteil stehen,
   darf er mild bleiben. Wandert eines davon nach rechts, muss entweder der
   Schleier dort anziehen oder das Element seine eigene Flaeche mitbringen. */
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(1, 8, 26, 0.34) 0%,
      rgba(1, 8, 26, 0.16) 24%,
      rgba(1, 8, 26, 0.30) 62%,
      rgba(1, 8, 26, 0.46) 74%,
      rgba(1, 8, 26, 0.54) 100%),
    linear-gradient(180deg,
      rgba(1, 8, 26, 0.30) 0%,
      rgba(1, 8, 26, 0) 30%,
      rgba(1, 8, 26, 0) 66%,
      rgba(1, 8, 26, 0.45) 100%);
}

.ringlinien {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1;
}

/* -----------------------------------------------------------------------------
   DIE MARKE — Emblem und Wortmarke im selben Rasterfeld uebereinander.
   Der Ring des Logos ersetzt den frueher gezeichneten Kreis.
   -------------------------------------------------------------------------- */
.marke {
  position: absolute;
  left: var(--marke-x); top: var(--marke-y);
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  z-index: 2;
}
.marke-emblem {
  grid-area: 1 / 1;
  width: 12.6cqw; height: auto;    /* Ringradius 90 Einheiten + etwas Luft fuer die Schrift */
  /* „Leichter Glow": zwei weiche Hoefe — der innere gibt dem Gold Waerme,
     der aeussere loest den Ring vom Bild. */
  filter: drop-shadow(0 0 8px rgba(222, 165, 28, 0.45))
          drop-shadow(0 0 26px rgba(150, 196, 245, 0.35));
  /* ⚠️ Nicht voll deckend: die weisse Wortmarke laeuft ueber die goldenen
     Striche des S, und Weiss auf vollem Gold sind 2,1:1. Bei 0.78 liegen
     gemessen noch rund 6 % der Textflaeche unter 3:1 — genau die Striche;
     der dreistufige dunkle Schriftschein faengt sie ab. */
  opacity: 0.78;
}
.wortmarke {
  grid-area: 1 / 1;
  position: relative;
  /* ⚠️ Obergrenze gerechnet, nicht geschaetzt: innen ist bis 0,408 der
     Emblembreite Platz, das sind 9,88cqw. Bei 1.75cqw Schriftgroesse bleibt
     die Wortmarke darunter; groesser stiess sie auf das helle Ringband und
     fiel dort auf 2:1. */
  font-size: 1.65cqw;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 0 3px rgba(1, 8, 26, 0.95),
               0 1px 6px rgba(1, 8, 26, 0.95),
               0 0 20px rgba(1, 8, 26, 0.9);
}
/* Der Goldanteil steht auf tiefem Navy — dort erreicht #DEA51C 6,9:1 und ist
   als Schrift zugelassen (BRAND.md § 3.2). */
.wortmarke b { font-weight: 800; color: var(--s360-gold-500); }

/* -----------------------------------------------------------------------------
   HERO-TEXT rechts
   -------------------------------------------------------------------------- */
.hero-text {
  position: absolute;
  /* Neben dem Logo, mit Luft dazwischen: das Emblem endet bei 15,1 % der
     Breite (Mitte 8,75 % + halbe Bildbreite 6,3 %). Der Text stand zuerst bei
     17 % und ist auf Wunsch um rund 30 % seiner eigenen Breite nach rechts
     gerueckt (jetzt 27,5 %).
     Senkrecht auf der Achse des Logos, nicht der Buehne — sonst stehen Marke
     und Ueberschrift auf zwei verschiedenen Hoehen. */
  left: 27.5%; right: 6%; top: var(--marke-y);
  transform: translateY(-50%);
  z-index: 2;
}
.hero-text h1 {
  /* Ganz in Gold (Vorgabe Sascha). Zulaessig, weil der Schleier den Grund
     darunter unter 0,11 Leuchtdichte haelt — nachgemessen. */
  color: var(--s360-gold-500);
  font-size: clamp(22px, 3.1cqw, 52px);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 14px rgba(1, 8, 26, 0.95), 0 0 34px rgba(1, 8, 26, 0.85);
}
.hero-text p {
  margin-top: 0.7cqw;
  font-size: clamp(13px, 1.15cqw, 20px);
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 8px rgba(1, 8, 26, 0.95);
}

.hero-ohne-js {
  position: absolute; left: 3%; right: 3%; bottom: 4%;
  z-index: 3; font-size: 14px; color: #fff;
  text-shadow: 0 1px 6px rgba(1, 8, 26, 0.95);
}

/* -----------------------------------------------------------------------------
   MODULKACHELN — eine Reihe unter dem Logo, glasig und durchsichtig.
   ⚠️ Kein Zustandstext mehr auf der Kachel (Vorgabe Sascha). „im Bau" und
   „in Planung" stehen weiterhin im Modal, wo sie vor einer Buchung zaehlen.
   -------------------------------------------------------------------------- */
.kacheln { list-style: none; margin: 0; padding: 0; }

.kachel {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 9.27cqw;      /* = 148 Einheiten, der Wert aus tools/ring.py */
  min-width: 118px;
  padding: 0.55cqw 0.5cqw;
  font: inherit;
  font-size: 0.88cqw;
  font-weight: var(--s360-fett-halb);
  letter-spacing: 0.01em;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  /* Glasig und durchsichtig: der Nebel scheint durch. Moeglich ist das nur,
     weil die Reihe im DUNKLEN Bildteil links liegt — auf der hellen Seite
     waere weisse Schrift auf hellem Glas unlesbar. */
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 6px;                       /* kantig, keine Pille */
  -webkit-backdrop-filter: blur(7px) saturate(1.1);
  backdrop-filter: blur(7px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  text-shadow: 0 1px 5px rgba(1, 8, 26, 0.95);
  transition: transform var(--s360-dauer) var(--s360-kurve),
              background var(--s360-dauer) var(--s360-kurve),
              border-color var(--s360-dauer) var(--s360-kurve);
}
.kachel:hover,
.kachel:focus-visible {
  transform: translate(-50%, -50%) translateY(-2px);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.14));
  border-color: rgba(255, 255, 255, 0.85);
}
.kachel:focus-visible { outline: 3px solid var(--s360-gold-400); outline-offset: 3px; }
.kachel-name { display: block; }

/* Kachelplaetze der Reihe (viewBox 1600x380, y = 320).
   ⚠️ AUSGERECHNET, nicht geschaetzt — Quelle `python tools/ring.py`. Wer sie
   anfasst, laesst das Skript neu laufen und ersetzt zugleich die
   <polyline>-Koordinaten in index.html. */
.kachel[data-platz="1"] { left:  7.51%; top: 84.21%; }
.kachel[data-platz="2"] { left: 17.66%; top: 84.21%; }
.kachel[data-platz="3"] { left: 27.80%; top: 84.21%; }
.kachel[data-platz="4"] { left: 37.95%; top: 84.21%; }
.kachel[data-platz="5"] { left: 48.09%; top: 84.21%; }
.kachel[data-platz="6"] { left: 58.24%; top: 84.21%; }

/* -----------------------------------------------------------------------------
   SCHMALE SCHIRME — Linien weg, alles untereinander. Ein flacher Hero mit
   sechs Kacheln nebeneinander ist bei 375 px nicht darstellbar.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero {
    aspect-ratio: auto;
    container-type: normal;
    padding: clamp(28px, 6vw, 48px) clamp(20px, 5vw, 40px) clamp(30px, 6vw, 48px);
    text-align: center;
  }
  .hero::before { background-position: 32% center; }
  .ringlinien { display: none; }

  .marke {
    position: relative; transform: none; left: auto; top: auto;
    margin: 0 auto 22px;
  }
  .marke-emblem { width: clamp(200px, 62vw, 280px); }
  .wortmarke { font-size: clamp(26px, 7.4vw, 40px); }

  .hero-text {
    position: relative; left: auto; right: auto; top: auto; transform: none;
    margin-bottom: 26px;
  }
  .hero-text h1 { font-size: clamp(26px, 7.4vw, 40px); }
  .hero-text p { margin-top: 10px; font-size: 16px; }

  .kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    max-width: 620px; margin-inline: auto;
  }
  .kachel {
    position: static; transform: none;
    width: 100%; min-width: 0;
    font-size: 15px;
    padding: 12px 10px;
  }
  .kachel:hover, .kachel:focus-visible { transform: translateY(-2px); }
  .hero-ohne-js { position: static; margin-top: 18px; }
}

/* =============================================================================
   MODAL — derselbe Wolkenstil, ueber dem Nebel. Native <dialog>: Fokusfalle,
   Esc und Rueckgabe des Fokus kommen vom Browser und muessen nicht nachgebaut
   werden (nachgebaute Dialoge sind die haeufigste Barrierefreiheitsluecke).
   ============================================================================= */
.modul-modal {
  width: min(560px, calc(100vw - 32px));
  max-height: min(84vh, 760px);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: var(--s360-radius-lg);
  background: linear-gradient(160deg, rgba(23, 44, 84, 0.86), rgba(6, 18, 44, 0.92));
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  color: #fff;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85),
              inset 0 1px 0 rgba(255, 255, 255, 0.4);
  overflow: hidden;
}
.modul-modal::backdrop {
  background: rgba(2, 11, 30, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Sanftes Auf- und Zublenden. `@starting-style` + `allow-discrete` sind noetig,
   weil <dialog> zwischen display:none und display:block springt — ohne sie
   gaebe es keinen Startzustand, von dem aus animiert werden koennte.
   Browser ohne Unterstuetzung zeigen den Dialog schlicht sofort; das ist der
   gewollte Rueckfall, kein Fehler. */
.modul-modal, .modul-modal::backdrop {
  transition: opacity 260ms var(--s360-kurve),
              transform 260ms var(--s360-kurve),
              overlay 260ms allow-discrete,
              display 260ms allow-discrete;
}
.modul-modal { opacity: 0; transform: translateY(14px) scale(0.97); }
.modul-modal[open] { opacity: 1; transform: translateY(0) scale(1); }
.modul-modal::backdrop { opacity: 0; }
.modul-modal[open]::backdrop { opacity: 1; }
@starting-style {
  .modul-modal[open] { opacity: 0; transform: translateY(14px) scale(0.97); }
  .modul-modal[open]::backdrop { opacity: 0; }
}

.modal-inhalt { padding: clamp(22px, 4vw, 34px); overflow-y: auto; max-height: inherit; }

.modal-schliessen {
  position: absolute; top: 12px; right: 12px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12); color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.modal-schliessen:hover { background: rgba(255, 255, 255, 0.24); }

/* Logo-Plaettchen: die Synergy-Logos sind fuer WEISSEN Grund freigestellt
   (BRAND.md § 3.4). Auf dem dunklen Modal brauchen sie deshalb eine weisse
   Flaeche darunter — ohne sie verschwindet das Navy im Navy. */
.modal-logo {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: var(--s360-radius-md);
  padding: 10px 16px; margin-bottom: 18px;
  max-width: 100%;
}
.modal-logo img { display: block; max-height: 46px; width: auto; }
.modal-logo .wortmarke-klein {
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--s360-navy-900);
}
/* Auf Weiss ist das Akzentgold unlesbar (2,2:1) — hier gilt Gold 600 mit
   4,0:1, dieselbe Regel wie auf den Platzhalterseiten. */
.modal-logo .wortmarke-klein b { color: var(--s360-gold-600); }

.modal-inhalt h2 { font-size: clamp(22px, 4vw, 28px); }
.modal-lead { margin-top: 10px; color: rgba(255, 255, 255, 0.82); }

.modal-status {
  display: inline-block; margin-top: 14px;
  font-size: 13px; font-weight: var(--s360-fett-halb);
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
}
.modal-status[data-status="verfuegbar"] { border-color: rgba(52, 211, 153, 0.5); }
.modal-status[data-status="im-bau"],
.modal-status[data-status="geplant"] { border-style: dashed; }

.modal-liste { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.modal-liste li {
  position: relative; padding-left: 30px;
  color: rgba(255, 255, 255, 0.9); font-size: 16px; line-height: 1.5;
}
.modal-liste li::before {
  content: ''; position: absolute; left: 4px; top: 0.55em;
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--s360-gold-500);
  box-shadow: 0 0 10px rgba(222, 165, 28, 0.7);
}

/* Preisblock — Inhalt kommt aus dem Account Service, nie aus dieser Datei. */
.modal-preis {
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.preis-zeile { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.preis-betrag {
  font-size: clamp(26px, 5vw, 34px); font-weight: 800;
  font-variant-numeric: tabular-nums; color: #fff;
}
.preis-einheit { color: rgba(255, 255, 255, 0.75); font-size: 15px; }
.preis-hinweis { margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, 0.66); }
.preis-laedt { color: rgba(255, 255, 255, 0.6); font-size: 15px; }

.modal-knoepfe { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }

/* =============================================================================
   ABSCHNITTE UNTER DEM HERO — hell, ruhig, Text in voller Breite
   ============================================================================= */
.abschnitt { padding-block: clamp(56px, 8vw, 96px); }
.abschnitt--tief { background: var(--s360-flaeche-tief); }
.abschnitt--navy {
  background: linear-gradient(160deg, var(--s360-navy-900), var(--s360-navy-950));
  color: #fff;
}
.abschnitt--navy a { color: var(--s360-gold-400); }

.abschnitt-kopf { max-width: 68ch; margin-bottom: clamp(28px, 4vw, 44px); }
.augenbraue {
  display: block; margin-bottom: 12px;
  font-size: 13px; font-weight: var(--s360-fett-halb);
  letter-spacing: var(--s360-sperrung-label); text-transform: uppercase;
  color: var(--s360-navy-600);
}
.abschnitt--navy .augenbraue { color: var(--s360-gold-500); }
.abschnitt-kopf h2 { font-size: clamp(26px, 4.4vw, 38px); }
.lead { margin-top: 16px; font-size: clamp(17px, 2.2vw, 19px); color: var(--s360-text-leise); }
.abschnitt--navy .lead { color: rgba(255, 255, 255, 0.8); }

.raster { display: grid; gap: clamp(16px, 2.4vw, 24px); }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.karte {
  background: var(--s360-flaeche-karte);
  border: 1px solid var(--s360-linie);
  border-radius: var(--s360-radius-lg);
  box-shadow: var(--s360-schatten);
  padding: clamp(20px, 3vw, 28px);
}
.abschnitt--navy .karte {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}
.karte h3 { font-size: 19px; margin-bottom: 10px; }
.karte p { color: var(--s360-text-leise); }
.abschnitt--navy .karte p { color: rgba(255, 255, 255, 0.78); }

/* Schritte — nummeriert, weil die Reihenfolge die Aussage ist. */
.schritte { list-style: none; counter-reset: schritt; margin: 0; padding: 0; }
.schritte li { counter-increment: schritt; }
.schritte h3::before {
  content: counter(schritt);
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; margin-right: 12px;
  border-radius: 999px;
  background: var(--s360-navy-900); color: #fff;
  font-size: 15px; font-weight: var(--s360-fett-voll);
}

/* Ehrlichkeitskasten — dieselbe Geste wie auf nova-klarwerk.de. */
.ehrlichkeit {
  margin-top: clamp(28px, 4vw, 40px);
  padding: clamp(20px, 3vw, 28px);
  border-left: 3px solid var(--s360-gold-500);
  border-radius: 0 var(--s360-radius-lg) var(--s360-radius-lg) 0;
  background: rgba(255, 255, 255, 0.06);
}
.ehrlichkeit p + p { margin-top: 14px; }

.faq { display: grid; gap: 12px; max-width: 80ch; }
.faq details {
  background: var(--s360-flaeche-karte);
  border: 1px solid var(--s360-linie);
  border-radius: var(--s360-radius-lg);
  padding: 4px 20px;
}
.faq summary {
  cursor: pointer; padding: 16px 0;
  font-weight: var(--s360-fett-halb); font-size: 17px;
}
.faq details[open] summary { border-bottom: 1px solid var(--s360-linie); }
.faq details p { padding: 14px 0; color: var(--s360-text-leise); }
.faq details p + p { padding-top: 0; }

.abschluss { text-align: center; }
.abschluss .abschnitt-kopf { margin-inline: auto; }
.abschluss .lead { margin-inline: auto; }
.cta-notiz { margin-top: 18px; font-size: 15px; color: rgba(255, 255, 255, 0.7); }

/* -----------------------------------------------------------------------------
   FUSSZEILE
   -------------------------------------------------------------------------- */
.seiten-fuss {
  background: var(--s360-navy-950); color: rgba(255, 255, 255, 0.72);
  padding-block: clamp(36px, 5vw, 56px);
  font-size: 15px;
  border-top: 2px solid var(--s360-gold-500);   /* die Geste der Linie */
}
.fuss-oben {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  align-items: center;
  padding-bottom: 24px; margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.fuss-links { display: flex; gap: 20px; flex-wrap: wrap; }
.seiten-fuss a { color: rgba(255, 255, 255, 0.86); }
.fuss-recht p + p { margin-top: 12px; }

/* -----------------------------------------------------------------------------
   BEWEGUNG — wer sie abbestellt hat, bekommt keine.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .kachel:hover, .kachel:focus-visible { transform: translate(-50%, -50%); }
}