/* ==========================================================================
   FOB WEBDESIGN – STYLESHEET
   --------------------------------------------------------------------------
   Aufbau dieser Datei:
     01  Design-Token (Farben, Schrift, Abstände)
     02  Grundlagen und Zurücksetzen
     03  Hilfsklassen und Layout-Behälter
     04  Schaltflächen
     05  Kopfbereich und Navigation
     06  Hero-Bereich
     07  Abschnitte und Überschriften
     08  Kurzvorstellung
     09  Leistungskarten
     10  Vorteile
     11  Preispakete
     12  Pflege und Änderungen
     13  Ablauf (Steigleitung)
     14  Über mich und Bildbereich
     15  Häufige Fragen
     16  Kontakt und Formular
     17  Fußbereich
     18  Rechtliche Unterseiten
     19  Animationen und Barrierefreiheit

   Es werden ausschließlich System-Schriftarten verwendet.
   Dadurch entstehen keine externen Anfragen und die Seite lädt sofort.
   ========================================================================== */


/* ==========================================================================
   01  DESIGN-TOKEN
   ========================================================================== */

:root {

  /* --- Markenfarben ------------------------------------------------------
     Gold und Anthrazit stammen aus der bestehenden FOB-Bildmarke.          */
  --gold:            #C8A85F;   /* Akzent auf dunklem Grund                 */
  --gold-bright:     #D9BE80;   /* Hover-Zustand auf dunklem Grund          */
  --gold-ink:        #D6BC7E;   /* Akzenttext auf Blau (8,1:1)              */
  --gold-wash:       rgba(200, 168, 95, 0.12);   /* zarte Goldfläche        */

  /* Blaustufen von dunkel nach hell. Die ganze Website steht auf diesen
     Tönen; Abschnitte unterscheiden sich durch die Stufe, nicht durch
     einen Wechsel zwischen hell und dunkel.                               */
  --navy-950:        #09131F;   /* Fußbereich, tiefster Grund               */
  --navy-900:        #0E1B2C;   /* Standardgrund der Seite                  */
  --navy-850:        #122134;   /* leicht angehobener Abschnitt             */
  --navy-800:        #16283F;   /* Karten und erhöhte Flächen               */
  --navy-700:        #22394F;   /* Rahmen auf Dunkelblau                    */

  /* Kartenflächen. Bewusst eigene Namen: früher stand hier Weiß, und
     "weiß" heißt jetzt nur noch die Textfarbe.                            */
  --flaeche:         #16283F;
  --flaeche-hoch:    #1B3149;

  /* Überschriftenfarbe. Früher diente --ink doppelt: als Überschrift auf
     hellem Grund UND als Text auf Gold. Beim Umstellen auf Blau musste
     das getrennt werden – --ink bleibt dunkel (für Text auf Gold und den
     Fußbereich), --titel ist die Überschriftenfarbe.                      */
  --titel:           #FFFFFF;

  --ink:             #15171A;   /* Anthrazit der Bildmarke                  */
  --ink-text:        rgba(255, 255, 255, 0.87);  /* Fließtext (12,9:1)      */
  --muted:           #A8B6C8;   /* Nebentext (7,2:1 auf --flaeche)          */
  --muted-light:     #A8B6C8;   /* gleicher Ton, Name aus der hellen Zeit   */

  --white:           #FFFFFF;
  --paper:           #122134;   /* angehobener Wechselabschnitt             */
  --line:            rgba(255, 255, 255, 0.13);  /* Trennlinien             */
  --line-dark:       rgba(200, 168, 95, 0.22);   /* Linien auf Dunkelblau   */

  --error:           #B3261E;   /* Fehlermeldungen auf Hell                 */
  --error-light:     #FFB4AB;   /* Fehlermeldungen auf Dunkelblau           */
  --success:         #1B6B4C;

  /* --- Schrift -----------------------------------------------------------
     Drei Rollen aus zwei System-Stapeln:
       sans 800  = Überschriften
       sans 400  = Fließtext
       mono      = Kennungen, Preise, Kleinlabels                            */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", "Courier New", monospace;

  /* Fließende Schriftgrößen: skalieren mit der Fensterbreite               */
  --fs-display: clamp(2.1rem, 1.35rem + 3.4vw, 4.1rem);
  --fs-h2:      clamp(1.6rem, 1.22rem + 1.7vw, 2.55rem);
  --fs-h3:      clamp(1.08rem, 1.02rem + 0.28vw, 1.28rem);
  --fs-lead:    clamp(1.06rem, 1.0rem + 0.34vw, 1.24rem);
  --fs-body:    1rem;
  --fs-small:   0.9375rem;
  --fs-mono:    0.75rem;

  /* --- Abstände (8-Punkt-Raster) ---------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3.5rem;
  --space-9: 5rem;

  /* Abstand oben und unten je Abschnitt, wächst mit der Bildschirmbreite   */
  --section-y: clamp(3.5rem, 2.2rem + 5.5vw, 6.5rem);

  /* --- Form und Tiefe ---------------------------------------------------- */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(14, 27, 44, 0.06),
               0 2px 8px rgba(14, 27, 44, 0.05);
  --shadow-md: 0 4px 12px rgba(14, 27, 44, 0.08),
               0 12px 32px rgba(14, 27, 44, 0.07);
  --shadow-lg: 0 10px 24px rgba(14, 27, 44, 0.12),
               0 28px 60px rgba(14, 27, 44, 0.14);

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

  /* Breite des Inhaltsbereichs */
  --shell:        1180px;
  --shell-narrow: 780px;

  /* Höhe der Kopfleiste – wird für Sprungmarken benötigt */
  --header-h: 68px;
}


/* ==========================================================================
   02  GRUNDLAGEN
   ========================================================================== */

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

html {
  /* Sanftes Scrollen bei Sprungmarken, sofern der Nutzer es nicht abgestellt hat */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--navy-900);
  color: var(--ink-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip statt hidden: verhindert seitliches Scrollen, ohne die
     klebende Kopfleiste zu beeinträchtigen. */
  overflow-x: clip;
}

/* Sperrt das Scrollen, solange das mobile Menü geöffnet ist */
body.is-menu-open {
  overflow: hidden;
}

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

a {
  color: inherit;
}

/* Fließtext-Verlinkungen erhalten eine sichtbare Unterstreichung */
p a,
li a {
  color: var(--gold-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

p a:hover,
li a:hover {
  text-decoration-thickness: 2px;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--titel);
  text-wrap: balance;      /* verhindert einzelne Wörter in der letzten Zeile */
}

p {
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
}

/* Sprungziele nicht unter der festen Kopfleiste verstecken */
:target,
section[id] {
  scroll-margin-top: calc(var(--header-h) + 12px);
}

/* Einheitlicher, gut sichtbarer Tastaturfokus auf der gesamten Seite */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Auf dunklen Flächen bleibt Gold ebenfalls klar erkennbar */
.section--dark :focus-visible,
.hero :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--gold-bright);
}


/* ==========================================================================
   03  HILFSKLASSEN UND LAYOUT-BEHÄLTER
   ========================================================================== */

/* Sprungmarke: nur bei Tastaturbedienung sichtbar */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background-color: var(--gold);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top var(--dur) var(--ease);
}

.skip-link:focus {
  top: 0;
}

/* Inhaltsbreite mit seitlichem Sicherheitsabstand */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.shell--narrow {
  max-width: var(--shell-narrow);
}

/* Kleines Label über einer Überschrift, in der Monospace-Rolle */
.eyebrow {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.eyebrow--light {
  color: var(--gold);
}

/* Einleitungsabsatz, etwas größer als der übrige Fließtext */
.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-text);
}

/* Noch nicht ausgefüllte Angaben werden deutlich als Platzhalter markiert */
.placeholder {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--gold);
  background-color: rgba(200, 168, 95, 0.12);
  border: 1px dashed rgba(200, 168, 95, 0.5);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  display: inline-block;
  overflow-wrap: anywhere;
}

/* Platzhalter auf hellem Grund */
.section:not(.section--dark) .placeholder,
.legal .placeholder {
  color: var(--gold-ink);
  background-color: var(--gold-wash);
  border-color: rgba(138, 107, 36, 0.45);
}


/* ==========================================================================
   04  SCHALTFLÄCHEN
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;               /* komfortable Trefferfläche am Touchscreen */
  padding: var(--space-3) var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

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

/* Hauptaktion */
.btn--accent {
  background-color: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.btn--accent:hover {
  background-color: var(--gold-bright);
  border-color: var(--gold-bright);
}

/* Nebenaktion auf dunklem Grund */
.btn--ghost {
  background-color: transparent;
  border-color: var(--navy-700);
  color: var(--white);
}

.btn--ghost:hover {
  border-color: var(--gold);
  background-color: rgba(200, 168, 95, 0.1);
}

/* Nebenaktion auf hellem Grund */
.btn--outline {
  background-color: transparent;
  border-color: var(--line);
  color: var(--ink);
}

.btn--outline:hover {
  border-color: var(--ink);
}

.btn--sm {
  /* 44px ist die kleinste komfortabel treffbare Fläche am Touchscreen */
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-size: 0.875rem;
}

.btn--block {
  display: flex;
  width: 100%;
}


/* ==========================================================================
   05  KOPFBEREICH UND NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--navy-900);
  border-bottom: 1px solid var(--line-dark);
  transition: box-shadow var(--dur) var(--ease);
}

/* Wird per JavaScript ergänzt, sobald die Seite gescrollt wurde */
.site-header.is-scrolled {
  box-shadow: 0 6px 24px rgba(14, 27, 44, 0.35);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}

/* --- Logo ---------------------------------------------------------------- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}

.logo__mark {
  width: 40px;
  height: auto;
  flex-shrink: 0;
}

.logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.logo__name {
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--white);
}

.logo__role {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

/* --- Navigation: mobile Ansicht zuerst ----------------------------------- */

.nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background-color: var(--navy-900);
  padding: var(--space-6) var(--space-5) var(--space-9);
  overflow-y: auto;
  /* Standardmäßig ausgeblendet, keine Tastaturfalle */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility 0s linear var(--dur);
}

.nav.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

.nav__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: var(--shell);
  margin-inline: auto;
}

.nav__link {
  display: block;
  padding: var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--navy-800);
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--gold);
}

.nav__cta-item {
  margin-top: var(--space-5);
}

/* --- Menü-Schalter -------------------------------------------------------- */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background-color: transparent;
  border: 1px solid var(--navy-700);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}

.nav-toggle:hover {
  border-color: var(--gold);
}

.nav-toggle__bars {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 18px;
  height: 12px;
}

.nav-toggle__bars span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--gold);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
}

/* Geöffneter Zustand: Balken werden zu einem Kreuz */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}


/* ==========================================================================
   06  HERO-BEREICH
   ========================================================================== */

.hero {
  position: relative;
  background-color: var(--navy-900);
  color: var(--white);
  padding-block: clamp(3.5rem, 2rem + 7vw, 7rem) clamp(3rem, 2rem + 4vw, 5rem);
  overflow: hidden;
}

/* Sehr dezenter Lichtschein oben rechts – erzeugt Tiefe ohne Effekthascherei */
.hero::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -20%;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle,
              rgba(200, 168, 95, 0.13) 0%,
              rgba(200, 168, 95, 0) 62%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
}

.hero__title {
  /* Eigene Staffelung statt --fs-display: In der zweispaltigen Fassung steht
     die Überschrift in einer schmaleren Spalte und zerfiele sonst in zu
     viele kurze Zeilen. */
  font-size: clamp(2.05rem, 1.35rem + 2.5vw, 3.45rem);
  color: var(--white);
  margin-bottom: var(--space-5);
}

/* Zweite Zeile der Überschrift in Gold – trägt die eigentliche Aussage */
.hero__title-accent {
  display: block;
  color: var(--gold);
}

.hero__subtitle {
  max-width: 58ch;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--muted-light);
  margin-bottom: var(--space-7);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

/* --- Faktenleiste --------------------------------------------------------- */

.factbar {
  list-style: none;
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line-dark);
}

.factbar__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.factbar__key {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.factbar__value {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--white);
}


/* ==========================================================================
   07  ABSCHNITTE UND ÜBERSCHRIFTEN
   ========================================================================== */

.section {
  padding-block: var(--section-y);
  /* Einblendungen, die von links oder rechts hereinfahren, stehen kurzzeitig
     außerhalb des Abschnitts. Ohne diese Kante entstünde dabei eine
     waagerechte Bildlaufleiste. */
  overflow-x: clip;
}

.section--paper {
  background-color: var(--paper);
}

.section--dark {
  background-color: var(--navy-900);
  color: var(--muted-light);
}

.section--dark .section__title,
.section--dark h3 {
  color: var(--white);
}

.section__head {
  max-width: 62ch;
  margin-bottom: var(--space-8);
}

.section__title {
  font-size: var(--fs-h2);
}

.section__intro {
  margin-top: var(--space-4);
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 0;
}

.section--dark .section__intro {
  color: var(--muted-light);
}


/* ==========================================================================
   08  KURZVORSTELLUNG
   ========================================================================== */

.intro-grid {
  display: grid;
  gap: var(--space-6);
}

.intro-grid__head .section__title {
  max-width: 22ch;
}

.intro-grid__body p {
  color: var(--muted);
}

.intro-grid__body .lead {
  color: var(--ink-text);
  font-weight: 500;
}


/* ==========================================================================
   09  LEISTUNGSKARTEN
   ========================================================================== */

.cards {
  list-style: none;
  display: grid;
  gap: var(--space-4);
}

.card {
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.card:hover {
  border-color: rgba(200, 168, 95, 0.55);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-4);
  background-color: var(--navy-900);
  border-radius: var(--radius);
  color: var(--gold);
}

.card__icon svg {
  width: 22px;
  height: 22px;
}

.card__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-2);
}

.card__text {
  color: var(--muted);
  font-size: var(--fs-small);
  margin-bottom: 0;
}


/* ==========================================================================
   10  VORTEILE
   ========================================================================== */

.benefits {
  list-style: none;
  display: grid;
  gap: var(--space-5);
}

.benefit {
  padding-top: var(--space-4);
  border-top: 2px solid var(--line-dark);
}

.benefit__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-2);
  color: var(--white);
}

.benefit__text {
  color: var(--muted-light);
  font-size: var(--fs-small);
  margin-bottom: 0;
}


/* ==========================================================================
   11  PREISPAKETE
   ========================================================================== */

.pricing {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Mittleres Paket: hervorgehoben durch Goldrahmen und dunkle Kopfzeile */
.price-card--featured {
  border: 2px solid var(--gold);
  box-shadow: var(--shadow-lg);
}

.price-card__badge {
  position: absolute;
  top: 0;
  left: var(--space-6);
  transform: translateY(-50%);
  margin: 0;
  padding: 6px 14px;
  background-color: var(--gold);
  color: var(--ink);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.price-card--featured {
  margin-top: var(--space-3);
}

.price-card__id {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.price-card__name {
  font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.6rem);
  margin-bottom: var(--space-2);
}

.price-card__for {
  font-size: var(--fs-small);
  color: var(--muted);
  margin-bottom: var(--space-5);
  /* Vier Zeilen reservieren (Zeilenhöhe 1,65 x 4 = 6,6em), damit die
     Preiszeilen aller drei Karten auf gleicher Höhe stehen. */
  min-height: 6.6em;
}

/* Betrag oben, Einheit darunter.
   Nebeneinander würde der längste Preis („1.250–1.999 €") in mittleren
   Fensterbreiten umbrechen und die drei Karten gegeneinander verschieben. */
.price-card__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding-bottom: var(--space-2);
}

.price-card__amount {
  font-size: clamp(1.6rem, 1.15rem + 1.4vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.price-card__unit {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.price-card__gross {
  /* Zwei Textzeilen reservieren, damit die Häkchenlisten aller drei Karten
     auf gleicher Höhe beginnen. Wegen box-sizing: border-box zählt das
     padding-bottom in die min-height hinein und muss aufgeschlagen werden. */
  min-height: calc(3.3em + var(--space-5));
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--muted);
}

.price-card__list {
  list-style: none;
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  font-size: var(--fs-small);
  color: var(--ink-text);
  flex-grow: 1;               /* schiebt die Schaltfläche an den unteren Rand */
}

/* Häkchen als CSS-Form – kein zusätzliches Bild nötig */
.price-card__list li {
  position: relative;
  padding-left: 1.85rem;
}

.price-card__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--gold-ink);
  border-bottom: 2px solid var(--gold-ink);
  transform: rotate(-45deg);
}

.pricing__note {
  max-width: 72ch;
  margin-top: var(--space-7);
  padding: var(--space-5);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fs-small);
  color: var(--muted);
}

.pricing__note strong {
  color: var(--ink);
}


/* ==========================================================================
   12  PFLEGE UND ÄNDERUNGEN
   --------------------------------------------------------------------------
   Bewusst schlanker gehalten als die drei Hauptpakete: flache Karten mit
   goldener Oberkante statt Schatten. So bleibt klar, was das Hauptangebot
   ist und was die laufende Betreuung danach.
   ========================================================================== */

.care {
  display: grid;
  gap: var(--space-4);
  align-items: stretch;
}

.care-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.care-card:hover {
  border-color: rgba(200, 168, 95, 0.55);
  border-top-color: var(--gold);
  box-shadow: var(--shadow-sm);
}

.care-card__id {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.care-card__name {
  font-size: 1.15rem;
  margin-bottom: var(--space-4);
}

/* Betrag oben, Einheit darunter – wie bei den Hauptpaketen */
.care-card__price {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.care-card__amount {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.care-card__unit {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.care-card__gross {
  /* Zwei Zeilen reservieren, damit die Listen aller vier Karten auf
     gleicher Höhe beginnen. Das padding-bottom zählt wegen
     box-sizing: border-box in die min-height hinein. */
  min-height: calc(3.3em + var(--space-4));
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--muted);
}

.care-card__list {
  list-style: none;
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  font-size: 0.875rem;
  color: var(--ink-text);
  flex-grow: 1;              /* schiebt die Schaltfläche an den unteren Rand */
}

/* Häkchen als CSS-Form, gleiche Gestaltung wie bei den Hauptpaketen */
.care-card__list li {
  position: relative;
  padding-left: 1.6rem;
}

.care-card__list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.42em;
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--gold-ink);
  border-bottom: 2px solid var(--gold-ink);
  transform: rotate(-45deg);
}


/* ==========================================================================
   13  ABLAUF – „STEIGLEITUNG"
   --------------------------------------------------------------------------
   Die fünf Schritte sind durch eine senkrechte Leitung verbunden.
   Die Nummerierung steht hier bewusst, weil die Reihenfolge eine echte
   Information ist und nicht bloß Dekoration.
   ========================================================================== */

.steps {
  --node: 3.25rem;              /* Durchmesser eines Knotenpunkts */
  list-style: none;
  display: grid;
  gap: var(--space-7);
  max-width: 760px;
}

.step {
  position: relative;
  padding-left: calc(var(--node) + var(--space-5));
  min-height: var(--node);
}

/* Leitungsabschnitt zwischen zwei Knoten */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--node) / 2 - 1px);
  top: var(--node);
  height: calc(100% - var(--node) + var(--space-7));
  width: 2px;
  background-color: rgba(138, 107, 36, 0.28);
}

/* Knotenpunkt mit Schrittnummer */
.step__num {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  background-color: var(--navy-900);
  border: 2px solid var(--gold);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gold);
}

.step__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-2);
  padding-top: 0.55rem;         /* richtet die Zeile am Knoten aus */
}

.step__text {
  color: var(--muted);
  font-size: var(--fs-small);
  margin-bottom: 0;
}


/* ==========================================================================
   14  ÜBER MICH UND BILDBEREICH
   ========================================================================== */

.about {
  display: grid;
  gap: var(--space-7);
}

.about__media {
  margin: 0;
}

/* Rahmen für das Porträtfoto.
   Der Platzhalter liegt dahinter und wird vom Foto verdeckt,
   sobald images/fatih-bulut.jpg vorhanden ist. */
.photo-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 420px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Dezente Goldkante an der unteren rechten Ecke – greift die Bildmarke auf */
.photo-frame::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 44%;
  height: 3px;
  background-color: var(--gold);
  pointer-events: none;
}

.photo-frame__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Wird per JavaScript gesetzt, wenn die Bilddatei noch fehlt */
.photo-frame__img.is-missing {
  display: none;
}

.photo-frame__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  text-align: center;
  color: var(--muted);
}

.photo-frame__placeholder svg {
  width: 56px;
  height: 56px;
  color: var(--line);
}

.photo-frame__hint {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.9;
}

.photo-frame__hint code {
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold-ink);
  background-color: var(--gold-wash);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
}

.about__caption {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Im Über-mich- und Kontaktbereich folgt direkt auf die Überschrift ein
   Absatz. Ohne diesen Abstand kleben beide aneinander. */
.about__content .section__title,
.contact__aside .section__title {
  margin-bottom: var(--space-5);
}

.about__content p {
  color: var(--muted);
}

.about__content .lead {
  color: var(--ink-text);
  font-weight: 500;
}

.about__facts {
  list-style: none;
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.about__fact {
  display: grid;
  gap: 2px;
}

.about__fact-key {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.about__fact-value {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
}


/* ==========================================================================
   15  HÄUFIG GESTELLTE FRAGEN
   --------------------------------------------------------------------------
   Umsetzung mit <details>/<summary>: funktioniert auch ohne JavaScript.
   ========================================================================== */

.faq {
  display: grid;
  gap: var(--space-3);
}

.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease);
}

.faq__item[open] {
  border-color: rgba(200, 168, 95, 0.6);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  list-style: none;             /* eigenes Symbol statt Standarddreieck */
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question:hover {
  color: var(--gold-ink);
}

/* Plus-/Minus-Symbol aus zwei Linien */
.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: var(--gold-ink);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease);
}

.faq__icon::before {
  width: 16px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.faq__icon::after {
  width: 2px;
  height: 16px;
  transform: translate(-50%, -50%);
}

/* Geöffnet: senkrechte Linie verschwindet, es bleibt ein Minus */
.faq__item[open] .faq__icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.faq__answer {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--muted);
  font-size: var(--fs-small);
}


/* ==========================================================================
   16  KONTAKT UND FORMULAR
   ========================================================================== */

.contact {
  display: grid;
  gap: var(--space-8);
}

.contact__text {
  color: var(--muted-light);
  margin-top: var(--space-4);
  max-width: 46ch;
}

.contact__details {
  list-style: none;
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line-dark);
}

.contact__detail {
  display: grid;
  gap: var(--space-2);
}

.contact__detail-key {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.contact__detail-value {
  font-size: var(--fs-small);
  color: var(--white);
}

/* --- Formularbereich ------------------------------------------------------ */

.contact__form-wrap {
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
  color: var(--ink-text);
}

.form-notice {
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background-color: var(--gold-wash);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-small);
  color: var(--ink-text);
}

.form-notice strong {
  color: var(--gold-ink);
}

.form {
  display: grid;
  gap: var(--space-5);
}

.form__row {
  display: grid;
  gap: var(--space-2);
}

.form__grid {
  display: grid;
  gap: var(--space-5);
}

.form__label {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink);
}

.form__req {
  color: var(--gold-ink);
}

.form__optional {
  font-weight: 400;
  color: var(--muted);
}

.form__input {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 1rem;              /* 16px verhindert das Zoomen unter iOS */
  color: var(--ink-text);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.form__input:hover {
  border-color: var(--muted);
}

.form__input:focus {
  outline: none;
  border-color: var(--gold-ink);
  box-shadow: 0 0 0 3px rgba(200, 168, 95, 0.3);
}

/* Feld mit Fehler: Farbe plus Text, nicht Farbe allein */
.form__input[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.14);
}

.form__select {
  appearance: none;
  padding-right: var(--space-8);
  /* Pfeil als eingebettete SVG-Grafik, keine zusätzliche Datei */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A6472' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 12px 8px;
  cursor: pointer;
}

.form__textarea {
  min-height: 140px;
  padding-top: var(--space-3);
  line-height: 1.6;
  resize: vertical;
}

.form__hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Fehlermeldung: nimmt erst Platz ein, wenn sie tatsächlich Text enthält */
.form__error {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--error);
}

.form__error:empty {
  display: none;
}

/* --- Datenschutz-Kontrollkästchen ---------------------------------------- */

.form__row--check {
  gap: var(--space-2);
}

.checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
}

/* Das echte Kontrollkästchen bleibt bedienbar, wird aber optisch ersetzt */
.checkbox__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.checkbox__box {
  position: relative;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: var(--radius-sm);
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.checkbox:hover .checkbox__box {
  border-color: var(--muted);
}

.checkbox__input:checked + .checkbox__box {
  background-color: var(--gold-ink);
  border-color: var(--gold-ink);
}

/* Häkchen */
.checkbox__input:checked + .checkbox__box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 7px;
  height: 12px;
  border: solid var(--white);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* Tastaturfokus wird auf das sichtbare Kästchen übertragen */
.checkbox__input:focus-visible + .checkbox__box {
  outline: 3px solid var(--gold-ink);
  outline-offset: 3px;
}

.checkbox__input[aria-invalid="true"] + .checkbox__box {
  border-color: var(--error);
}

/* --- Rückmeldung nach dem Absenden ---------------------------------------- */

.form__status {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 600;
}

.form__status:empty {
  display: none;
}

.form__status.is-success {
  padding: var(--space-4);
  border-left: 3px solid var(--success);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--success);
}

.form__status.is-error {
  padding: var(--space-4);
  border-left: 3px solid var(--error);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--error);
}

.form__legal {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted);
}


/* ==========================================================================
   17  FUSSBEREICH
   ========================================================================== */

.site-footer {
  background-color: var(--ink);
  color: var(--muted-light);
  padding-block: var(--space-8) var(--space-6);
}

.site-footer__top {
  display: grid;
  gap: var(--space-7);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer__claim {
  margin-top: var(--space-4);
  max-width: 40ch;
  font-size: var(--fs-small);
  color: var(--muted-light);
}

.site-footer__heading {
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.site-footer__list {
  list-style: none;
  display: grid;
  gap: var(--space-3);
  font-size: var(--fs-small);
}

.site-footer__list a {
  color: var(--muted-light);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.site-footer__list a:hover {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  justify-content: space-between;
  padding-top: var(--space-5);
  font-size: 0.8125rem;
}

.site-footer__bottom p {
  margin: 0;
}

.site-footer__meta {
  color: var(--muted);
}


/* ==========================================================================
   18  RECHTLICHE UNTERSEITEN (Impressum, Datenschutz)
   ========================================================================== */

.legal {
  padding-block: var(--section-y);
  overflow-x: clip;
}

.legal__head {
  margin-bottom: var(--space-7);
}

.legal__title {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-3);
}

/* Deutlich sichtbarer Warnhinweis: Seite ist noch nicht rechtsverbindlich */
.legal__warning {
  margin-bottom: var(--space-8);
  padding: var(--space-5);
  border-radius: var(--radius);
  font-size: var(--fs-small);
}

.legal__warning strong {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 1rem;
}

.legal__block {
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
}

.legal__block:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

.legal__block h2 {
  font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  margin-bottom: var(--space-4);
}

.legal__block h3 {
  font-size: 1.06rem;
  margin: var(--space-5) 0 var(--space-2);
}

.legal__block p,
.legal__block li {
  color: var(--muted);
  font-size: var(--fs-small);
}

.legal__list {
  list-style: disc;
  display: grid;
  gap: var(--space-2);
  padding-left: 1.4rem;
  margin-bottom: var(--space-4);
}

/* Zurück-Verweis oben auf den rechtlichen Seiten */
.legal__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-ink);
  text-decoration: none;
}

.legal__back:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* ==========================================================================
   19  ANIMATIONEN UND BARRIEREFREIHEIT
   ========================================================================== */

/* Sanftes Einblenden beim Scrollen.
   Die Klasse .reveal wird per JavaScript um .is-visible ergänzt.
   Ohne JavaScript bleibt der Inhalt sichtbar (siehe .no-js weiter unten). */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease),
              transform 500ms var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Fallback: Ist JavaScript deaktiviert, wird nichts versteckt. */
html.no-js .reveal {
  opacity: 1;
  transform: none;
}

/* Nutzer, die reduzierte Bewegung eingestellt haben, bekommen keine
   Bewegungseffekte – Inhalte erscheinen sofort in ihrem Endzustand. */
@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}


/* ==========================================================================
   BILDSCHIRMBREITEN
   Mobile First: Die Regeln oben gelten für Smartphones.
   Ab hier folgen die Erweiterungen für größere Bildschirme.
   ========================================================================== */

/* --- Ab 560px: zweispaltige Raster für kleine Karten --------------------- */
@media (min-width: 35em) {

  .factbar {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .care {
    grid-template-columns: repeat(2, 1fr);
  }

  .benefits {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6) var(--space-7);
  }

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

  .contact__details {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
}


/* --- Ab 768px: Tablet ----------------------------------------------------- */
@media (min-width: 48em) {

  .contact__form-wrap {
    padding: var(--space-7);
  }

  .pricing {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Das hervorgehobene Paket bleibt in der zweispaltigen Ansicht oben */
  .price-card--featured {
    margin-top: var(--space-3);
  }

  .about {
    grid-template-columns: minmax(260px, 0.85fr) 1.15fr;
    gap: var(--space-8);
    align-items: start;
  }

  .site-footer__top {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-7) var(--space-6);
  }

  .site-footer__contact {
    grid-column: 2 / -1;
  }
}


/* --- Ab 960px: Desktop ---------------------------------------------------- */
@media (min-width: 60em) {

  :root {
    --header-h: 76px;
  }

  .logo__mark {
    width: 46px;
  }

  /* Kurzvorstellung: Überschrift links, Text rechts */
  .intro-grid {
    grid-template-columns: 1fr 1.15fr;
    gap: var(--space-8);
    align-items: start;
  }

  .cards {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }

  .benefits {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Drei Pakete nebeneinander, das mittlere optisch angehoben */
  .pricing {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    align-items: stretch;
  }


  .price-card {
    padding: var(--space-7) var(--space-6);
  }

  .price-card--featured {
    margin-top: 0;
    transform: translateY(-12px);
  }

  /* Kontakt: Ansprache links, Formular rechts */
  .contact {
    grid-template-columns: 1fr 1.1fr;
    gap: var(--space-9);
    align-items: start;
  }

  .site-footer__top {
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  }

  .site-footer__contact {
    grid-column: auto;
  }
}


/* --- Ab 1088px: waagerechte Hauptnavigation -------------------------------
   Erst ab dieser Breite haben sechs Menüpunkte und die Kontakt-Schaltfläche
   nebeneinander Platz, ohne zu gedrängt zu wirken. Darunter bleibt es beim
   Menü-Schalter.
   ------------------------------------------------------------------------ */
@media (min-width: 68em) {

  .nav-toggle {
    display: none;
  }

  .nav {
    position: static;
    inset: auto;
    padding: 0;
    background-color: transparent;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-1);
  }

  .nav__link {
    /* Auch am Desktop bleibt die Trefferfläche mindestens 44px hoch */
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border-bottom: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
  }

  .nav__cta-item {
    margin-top: 0;
    margin-left: var(--space-3);
  }
}


/* --- Ab 1200px: großzügigere Abstände ------------------------------------- */
@media (min-width: 75em) {

  .hero__title {
    max-width: 16ch;
  }

  .steps {
    --node: 3.5rem;
  }

  /* Vier Pflegeangebote nebeneinander. Erst ab dieser Breite sind die
     Spalten breit genug, dass Namen und Einheiten einzeilig bleiben. */
  .care {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ==========================================================================
   DRUCKANSICHT
   Reduziert die Seite auf den lesbaren Inhalt.
   ========================================================================== */
@media print {

  .site-header,
  .nav-toggle,
  .hero__actions,
  .contact__form-wrap,
  .skip-link {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  .hero,
  .section--dark,
  .site-footer {
    background: #fff !important;
    color: #000 !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ==========================================================================
   20  BAUSTEINE FÜR DIE UNTERSEITEN
   --------------------------------------------------------------------------
   Ab hier stehen die Bestandteile, die es erst seit der mehrseitigen
   Fassung gibt: Seitenkopf, Kennzahlen, Handlungsband, Vergleichstabelle,
   Zeitstrahl, Grundsätze und die Teaser auf der Startseite.
   ========================================================================== */


/* --- Seitenkopf der Unterseiten ------------------------------------------ */

.page-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--navy-900);
  color: var(--muted-light);
  padding-block: clamp(2.75rem, 1.8rem + 4vw, 5rem);
}

.page-hero::before {
  content: "";
  position: absolute;
  top: -60%;
  right: -15%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle,
              rgba(200, 168, 95, 0.13) 0%,
              rgba(200, 168, 95, 0) 62%);
  pointer-events: none;
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.page-hero__title {
  font-size: clamp(1.9rem, 1.35rem + 2.4vw, 3.2rem);
  color: var(--white);
  margin-bottom: var(--space-4);
}

.page-hero__text {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--muted-light);
  max-width: 58ch;
  margin-bottom: 0;
}

/* Pfad zur aktuellen Seite */
.brotkrumen {
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-light);
}

.brotkrumen ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
}

.brotkrumen li + li::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--gold);
}

.brotkrumen a {
  color: var(--muted-light);
  text-decoration: none;
}

.brotkrumen a:hover {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brotkrumen [aria-current="page"] {
  color: var(--gold);
}


/* --- Kennzahlen ----------------------------------------------------------- */

.kennzahlen {
  list-style: none;
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-7);
  border-block: 1px solid var(--line);
}

.kennzahl {
  text-align: center;
}

.kennzahl__wert {
  display: block;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}

.kennzahl__einheit {
  color: var(--gold-ink);
}

.kennzahl__label {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}


/* --- Handlungsband am Seitenende ----------------------------------------- */

.cta-band {
  position: relative;
  overflow: hidden;
  background-color: var(--navy-900);
  color: var(--muted-light);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
  text-align: center;
}

.cta-band__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin-inline: auto;
}

.cta-band__title {
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  color: var(--white);
  margin-bottom: var(--space-4);
}

.cta-band__text {
  color: var(--muted-light);
  margin-bottom: var(--space-6);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}


/* --- Ausführliche Leistungsblöcke ---------------------------------------- */

.leistung {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-7);
  border-bottom: 1px solid var(--line);
}

.leistung:last-child {
  border-bottom: 0;
}

.leistung__nr {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--gold-ink);
}

.leistung__title {
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.7rem);
  margin-block: var(--space-2) var(--space-4);
}

.leistung__text {
  color: var(--muted);
}

.leistung__list {
  list-style: none;
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
  font-size: var(--fs-small);
}

.leistung__list li {
  position: relative;
  padding-left: 1.7rem;
}

.leistung__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--gold-ink);
  border-bottom: 2px solid var(--gold-ink);
  transform: rotate(-45deg);
}


/* --- Vergleichstabelle ---------------------------------------------------- */

/* Auf schmalen Bildschirmen scrollt die Tabelle in sich selbst,
   damit die Seite nicht seitlich verrutscht. */
.vergleich-huelle {
  overflow-x: auto;
  margin-top: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  -webkit-overflow-scrolling: touch;
}

.vergleich {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.vergleich caption {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-size: var(--fs-mono);
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.vergleich th,
.vergleich td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.vergleich thead th {
  font-size: var(--fs-mono);
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.vergleich tbody th {
  font-weight: 600;
  color: var(--ink-text);
}

.vergleich tbody tr:last-child th,
.vergleich tbody tr:last-child td {
  border-bottom: 0;
}

/* Hervorgehobene Spalte des mittleren Pakets */
.vergleich .ist-empfohlen {
  background-color: var(--gold-wash);
}

.vergleich .ja::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--gold-ink);
  border-bottom: 2px solid var(--gold-ink);
  transform: rotate(-45deg) translateY(-2px);
}

.vergleich .nein {
  color: var(--muted);
}

.vergleich .nein::before {
  content: "–";
}

/* Für Screenreader: Ja und Nein zusätzlich als Text */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* --- Zeitstrahl im Werdegang --------------------------------------------- */

.zeitstrahl {
  list-style: none;
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-6);
  padding-left: var(--space-6);
  border-left: 2px solid var(--line);
}

.zeitstrahl__punkt {
  position: relative;
}

.zeitstrahl__punkt::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-6) - 7px);
  top: 0.45em;
  width: 12px;
  height: 12px;
  background-color: var(--gold);
  border: 2px solid var(--white);
  border-radius: 50%;
}

.zeitstrahl__jahr {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold-ink);
}

.zeitstrahl__titel {
  font-size: var(--fs-h3);
  margin-block: var(--space-2);
}

.zeitstrahl__text {
  color: var(--muted);
  font-size: var(--fs-small);
  margin-bottom: 0;
}


/* --- Grundsätze der Arbeitsweise ------------------------------------------ */

.grundsaetze {
  list-style: none;
  display: grid;
  gap: var(--space-5);
  counter-reset: grundsatz;
}

.grundsatz {
  position: relative;
  padding-left: 3.25rem;
}

.grundsatz::before {
  counter-increment: grundsatz;
  content: counter(grundsatz, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gold-ink);
}

.grundsatz__titel {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-2);
}

.grundsatz__text {
  color: var(--muted);
  font-size: var(--fs-small);
  margin-bottom: 0;
}


/* --- Teaser auf der Startseite -------------------------------------------- */

.teaser {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.teaser__media .photo-frame {
  max-width: 340px;
}

.teaser__mehr {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--gold-ink);
  text-decoration: none;
}

.teaser__mehr::after {
  content: "→";
  transition: transform var(--dur) var(--ease);
}

.teaser__mehr:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.teaser__mehr:hover::after {
  transform: translateX(4px);
}

/* Auf dunklem Grund heller Akzent */
.section--dark .teaser__mehr,
.cta-band .teaser__mehr {
  color: var(--gold);
}


/* --- Rasterstufen für die neuen Bausteine --------------------------------- */

@media (min-width: 35em) {

  .kennzahlen {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 48em) {

  .kennzahlen {
    grid-template-columns: repeat(4, 1fr);
  }

  .grundsaetze {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6) var(--space-7);
  }
}

@media (min-width: 60em) {

  /* Leistungsblöcke: Nummer und Titel links, Beschreibung rechts */
  .leistung {
    grid-template-columns: minmax(220px, 0.8fr) 1.2fr;
    gap: var(--space-8);
    padding-block: var(--space-8);
  }

  .teaser {
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-8);
  }

  .teaser--umgekehrt .teaser__media {
    order: 2;
  }
}


/* ==========================================================================
   21  HINTERGRÜNDE UND VISUELLE EBENE
   --------------------------------------------------------------------------
   Statt einfarbiger Flächen bekommt jeder Abschnitt eine eigene Tiefe:
   wandernde Lichtschleier, ein feines Raster und eine Körnung, die dem
   Bildschirm die "digitale Flachheit" nimmt.

   Steuerung über ein Attribut am Abschnitt:
     data-hg="aurora"    farbige Lichtschleier auf dunklem Grund
     data-hg="raster"    feines Linienraster auf hellem Grund
     data-hg="punkte"    Punktraster auf hellem Grund
     data-hg="strahlen"  weicher Lichtkegel von oben
   ========================================================================== */

:root {
  /* Lichtfarben für die Schleier. Gold ist die Leitfarbe, das kühle Blau
     erzeugt den Kontrast, ohne die Marke zu verlassen. */
  --schein-gold:  rgba(200, 168, 95, 0.34);
  --schein-blau:  rgba(64, 124, 196, 0.30);
  --schein-tief:  rgba(24, 60, 108, 0.72);

  /* Feine Körnung als eingebettete Grafik – keine zusätzliche Datei */
  --rauschen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='0.55'/%3E%3C/svg%3E");
}

/* Grundgerüst: jeder Hintergrund liegt hinter dem Inhalt */
[data-hg] {
  position: relative;
  isolation: isolate;
}

[data-hg] > * {
  position: relative;
  z-index: 2;
}

[data-hg]::before,
[data-hg]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}


/* --- Lichtschleier auf dunklem Grund -------------------------------------- */

[data-hg="aurora"] {
  background-color: var(--navy-900);
  overflow: hidden;
}

/* Drei überlagerte Lichtkegel. Bewegt werden sie in animations.css. */
[data-hg="aurora"]::before {
  background:
    radial-gradient(58% 44% at 18% 8%,  var(--schein-gold) 0%, transparent 62%),
    radial-gradient(52% 40% at 88% 22%, var(--schein-blau) 0%, transparent 66%),
    radial-gradient(70% 55% at 62% 96%, var(--schein-tief) 0%, transparent 70%);
}

/* Feines Raster darüber: gibt der Fläche Struktur, ohne aufzufallen */
[data-hg="aurora"]::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  /* Nach außen ausblenden, damit das Raster nicht abrupt endet */
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}


/* --- Linienraster auf hellem Grund ---------------------------------------- */

[data-hg="raster"] {
}

[data-hg="raster"]::before {
  background-image:
    linear-gradient(rgba(14, 27, 44, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 27, 44, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(100% 70% at 50% 40%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(100% 70% at 50% 40%, #000 20%, transparent 80%);
}

/* Warmer Schimmer, damit die helle Fläche nicht steril wirkt */
[data-hg="raster"]::after {
  background:
    radial-gradient(46% 38% at 88% 6%, rgba(200, 168, 95, 0.13) 0%, transparent 68%),
    radial-gradient(40% 34% at 4% 94%, rgba(64, 124, 196, 0.09) 0%, transparent 70%);
}


/* --- Punktraster ---------------------------------------------------------- */

[data-hg="punkte"] {
}

[data-hg="punkte"]::before {
  background-image: radial-gradient(rgba(14, 27, 44, 0.10) 1.15px, transparent 1.15px);
  background-size: 26px 26px;
  mask-image: radial-gradient(90% 65% at 50% 50%, #000 10%, transparent 76%);
  -webkit-mask-image: radial-gradient(90% 65% at 50% 50%, #000 10%, transparent 76%);
}

[data-hg="punkte"]::after {
  background: radial-gradient(52% 42% at 96% 50%, rgba(200, 168, 95, 0.11) 0%, transparent 70%);
}


/* --- Lichtkegel von oben --------------------------------------------------- */

[data-hg="strahlen"] {
  background-color: var(--navy-900);
  overflow: hidden;
}

[data-hg="strahlen"]::before {
  background:
    conic-gradient(from 210deg at 50% -18%,
      transparent 0deg,
      rgba(200, 168, 95, 0.30) 24deg,
      transparent 52deg,
      rgba(64, 124, 196, 0.26) 78deg,
      transparent 108deg),
    radial-gradient(85% 65% at 50% 118%, rgba(26, 64, 116, 0.85) 0%, transparent 74%);
}

[data-hg="strahlen"]::after {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 100%;
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}


/* --- Körnung über allen dunklen Flächen ------------------------------------ */

[data-hg="aurora"] > .koernung,
[data-hg="strahlen"] > .koernung {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--rauschen);
  opacity: 0.16;
  mix-blend-mode: overlay;
  pointer-events: none;
}


/* --- Trennkante zwischen Abschnitten --------------------------------------- */

/* Dünne Goldlinie, die zu den Rändern hin ausläuft */
.kante {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg,
              transparent 0%,
              rgba(200, 168, 95, 0.55) 50%,
              transparent 100%);
}


/* --- Verlaufstext ----------------------------------------------------------- */

/* Für einzelne hervorgehobene Wörter in großen Überschriften */
.verlaufstext {
  background: linear-gradient(102deg, var(--gold-bright) 0%, var(--gold) 45%, #E8D5A8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Rückfallebene, falls der Browser den Zuschnitt nicht kennt */
  -webkit-text-fill-color: transparent;
}

@supports not (background-clip: text) {
  .verlaufstext {
    color: var(--gold);
    -webkit-text-fill-color: var(--gold);
  }
}


/* --- Glasflächen auf dunklem Grund ------------------------------------------ */

.glas {
  background: linear-gradient(160deg,
              rgba(255, 255, 255, 0.075) 0%,
              rgba(255, 255, 255, 0.025) 100%);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}


/* ==========================================================================
   22  PREISKARTEN – AUFGEWERTETE FASSUNG
   --------------------------------------------------------------------------
   Das empfohlene Paket bekommt einen laufenden Lichtrahmen und ein
   deutlich sichtbares Abzeichen. Die beiden anderen Karten bleiben ruhig,
   damit die Empfehlung wirkt.
   ========================================================================== */

.pricing {
  /* Platz für den überstehenden Lichtrahmen der mittleren Karte */
  padding-top: var(--space-5);
}

.price-card {
  position: relative;
  overflow: visible;
}

/* Sanfter Goldschimmer am oberen Rand jeder Karte */
.price-card::after {
  content: "";
  position: absolute;
  inset-inline: 12%;
  top: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(200, 168, 95, 0.75), transparent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}

.price-card:hover::after {
  opacity: 1;
}

/* --- Das empfohlene Paket -------------------------------------------------- */

.price-card--featured {
  border-color: transparent;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(135deg, var(--gold) 0%, #F0DCAE 30%, var(--gold-ink) 55%, var(--gold) 100%) border-box;
  border: 2px solid transparent;
  box-shadow:
    0 10px 30px rgba(200, 168, 95, 0.20),
    0 30px 70px rgba(14, 27, 44, 0.16);
}

.price-card--featured::after {
  display: none;
}

/* Lichtschein hinter der Karte */
.price-card--featured::before {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: calc(var(--radius-lg) + 12px);
  background: radial-gradient(60% 50% at 50% 0%, rgba(200, 168, 95, 0.35), transparent 72%);
  opacity: 0.9;
  pointer-events: none;
}

/* --- Das Abzeichen --------------------------------------------------------- */

.price-card__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -52%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 9px 20px;
  background: linear-gradient(135deg, #E4C77E 0%, var(--gold) 45%, #B9924A 100%);
  color: var(--ink);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(200, 168, 95, 0.45);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Kleiner Stern vor dem Text */
.price-card__badge::before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: currentColor;
  /* Vierzackiger Funkel-Stern als Maske */
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
}

/* Preis der Empfehlung darf etwas größer sein */
.price-card--featured .price-card__amount {
  font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.35rem);
}

/* Kleine Vorsilbe im Betrag, etwa "ab". Bewusst innerhalb der Zeile,
   damit die Karte dadurch nicht höher wird als die anderen beiden. */
.price-card__ab {
  font-family: var(--font-mono);
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  vertical-align: 0.95em;
  margin-right: 0.32em;
  color: var(--muted);
}

/* Zeile mit dem Nutzenversprechen unter dem Titel */
.price-card__nutzen {
  /* Die Karte ist ein Flex-Container in Spaltenrichtung. Ohne align-self
     würde die Kennzeichnung auf volle Kartenbreite gezogen. */
  display: inline-block;
  align-self: flex-start;
  margin-bottom: var(--space-4);
  padding: 5px 12px;
  background-color: var(--gold-wash);
  border: 1px solid rgba(138, 107, 36, 0.28);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold-ink);
}


/* ==========================================================================
   23  VERGLEICHSTABELLE – JEDES PAKET MIT EIGENEM WERT
   --------------------------------------------------------------------------
   Bewusst keine Striche für "nicht enthalten": Jede Zelle beschreibt, was
   das jeweilige Paket kann. So steht auch das kleinste Paket für sich,
   statt nur als Mangelliste zu erscheinen.
   ========================================================================== */

.vergleich td {
  color: var(--ink-text);
}

/* Wert, der in diesem Paket besonders stark ist */
.vergleich .stark {
  font-weight: 700;
  color: var(--ink);
}

.vergleich .stark::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 6px;
  margin-right: 8px;
  border-left: 2px solid var(--gold-ink);
  border-bottom: 2px solid var(--gold-ink);
  transform: rotate(-45deg) translateY(-2px);
}

.vergleich thead th.ist-empfohlen {
  background: linear-gradient(180deg, rgba(200, 168, 95, 0.28), rgba(200, 168, 95, 0.12));
  color: var(--ink);
  position: relative;
}

.vergleich tbody tr:hover th,
.vergleich tbody tr:hover td {
  background-color: rgba(14, 27, 44, 0.028);
}

.vergleich tbody tr:hover td.ist-empfohlen {
  background-color: rgba(200, 168, 95, 0.20);
}

/* Preiszeile am Fuß der Tabelle */
.vergleich .preiszeile th,
.vergleich .preiszeile td {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}

.vergleich .preiszeile td.ist-empfohlen {
  background-color: rgba(200, 168, 95, 0.22);
}

/* Hinweis, dass die Tabelle seitlich verschiebbar ist */
.vergleich-hinweis {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 48em) {
  .vergleich-hinweis { display: none; }
}


/* ==========================================================================
   24  TERMINKALENDER
   --------------------------------------------------------------------------
   Auswahl von Tag und Uhrzeit für ein kostenloses Telefongespräch.
   Montag bis Sonntag, 16:00 bis 20:00 Uhr.
   ========================================================================== */

.termin {
  display: grid;
  gap: var(--space-6);
}

/* WICHTIG: Raster- und Flex-Elemente schrumpfen standardmäßig nicht unter
   die Breite ihres Inhalts. Die Tagesleiste enthält 21 Einträge à 74px und
   erzwang dadurch eine Spaltenbreite von über 1600px – der Abschnitt wurde
   rechts abgeschnitten, die Zusammenfassung war nicht mehr im Bild.
   min-width: 0 hebt diese Mindestbreite auf; das seitliche Scrollen
   übernimmt die Leiste selbst über overflow-x. */
.termin > *,
.termin__block,
.termin__tage-huelle {
  min-width: 0;
}

.termin__block {
  display: grid;
  gap: var(--space-4);
}

.termin__schritt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.termin__schritt::before {
  content: attr(data-schritt);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background-color: rgba(200, 168, 95, 0.16);
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  font-size: 0.7rem;
}

/* --- Tagesauswahl ---------------------------------------------------------- */

/* Waagerecht scrollbare Leiste, damit auch 14 Tage auf das Handy passen */
/* Die Tagesleiste geht seitlich weiter. Der weiche Rand rechts zeigt das an. */
.termin__tage-huelle {
  position: relative;
}

.termin__tage-huelle::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: var(--space-3);
  width: 56px;
  background: linear-gradient(90deg, transparent, var(--navy-900));
  pointer-events: none;
}

.termin__tage {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-3);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.termin__tag {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: grid;
  gap: 2px;
  min-width: 74px;
  padding: var(--space-3) var(--space-2);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  color: var(--white);
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.termin__tag:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.termin__tag[aria-pressed="true"] {
  background: linear-gradient(160deg, var(--gold), #B9924A);
  border-color: var(--gold);
  color: var(--ink);
}

.termin__tag-wochentag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}

.termin__tag-zahl {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.termin__tag-monat {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* --- Uhrzeiten -------------------------------------------------------------- */

.termin__zeiten {
  display: grid;
  /* Zwei Spalten am Handy, vier ab Tablet: acht Zeitfenster ergeben so
     zwei volle Reihen statt einer angebrochenen. */
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

@media (min-width: 30em) {
  .termin__zeiten { grid-template-columns: repeat(4, 1fr); }
}

.termin__zeit {
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.termin__zeit:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.termin__zeit[aria-pressed="true"] {
  background: linear-gradient(160deg, var(--gold), #B9924A);
  border-color: var(--gold);
  color: var(--ink);
}

/* Zeiten erscheinen erst, wenn ein Tag gewählt wurde */
.termin__block[hidden] {
  display: none;
}

/* --- Zusammenfassung und Absenden -------------------------------------------- */

.termin__zusammenfassung {
  padding: var(--space-5);
}

.termin__gewaehlt {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
}

.termin__gewaehlt-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.termin__gewaehlt-wert {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--white);
}

.termin__aktionen {
  display: grid;
  gap: var(--space-3);
}

.termin__hinweis {
  margin-top: var(--space-4);
  margin-bottom: 0;
  font-size: 0.82rem;
  color: var(--muted-light);
}

@media (min-width: 48em) {
  .termin__aktionen {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 60em) {
  .termin {
    grid-template-columns: 1.35fr 1fr;
    gap: var(--space-8);
    align-items: start;
  }

  .termin__auswahl {
    display: grid;
    gap: var(--space-6);
  }

  /* Die Zusammenfassung bleibt beim Scrollen im Blick */
  .termin__zusammenfassung {
    position: sticky;
    top: calc(var(--header-h) + var(--space-5));
  }
}

/* Direktkontakt unter dem Handlungsband */
.cta-band__direkt {
  margin-top: var(--space-5);
  margin-bottom: 0;
  font-size: var(--fs-small);
  color: var(--muted-light);
}

.cta-band__direkt a {
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 168, 95, 0.45);
}

.cta-band__direkt a:hover {
  border-bottom-color: var(--gold);
}


/* ==========================================================================
   25  PREISKARTEN AUF DUNKLEM GRUND
   --------------------------------------------------------------------------
   Der Paketbereich steht jetzt auf Dunkelblau. Die Karten wechseln dafür von
   weiß auf Glasoptik: eine leicht aufgehellte, durchscheinende Fläche mit
   feiner Kante. Inhalte, Reihenfolge, Preise und Schaltflächen bleiben
   unverändert – nur die Darstellung wechselt.

   Alle Textfarben sind auf Kontrast geprüft (Grundfläche #16283F):
     Weiß              14,9:1
     Nebentext hell     7,2:1
     Gold               6,5:1
   Damit liegt jede Angabe deutlich über den geforderten 4,5:1.
   ========================================================================== */

.section--dark .price-card {
  background:
    linear-gradient(158deg,
      rgba(255, 255, 255, 0.085) 0%,
      rgba(255, 255, 255, 0.028) 100%);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* --- Textfarben umstellen -------------------------------------------------- */

.section--dark .price-card__id      { color: var(--muted-light); }
.section--dark .price-card__name    { color: var(--white); }
.section--dark .price-card__for     { color: var(--muted-light); }
.section--dark .price-card__amount  { color: var(--white); }
.section--dark .price-card__unit    { color: var(--gold); }
.section--dark .price-card__ab      { color: var(--muted-light); }

.section--dark .price-card__gross {
  color: var(--muted-light);
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.section--dark .price-card__list {
  color: rgba(255, 255, 255, 0.88);
}

/* Häkchen in Gold statt im dunklen Goldton */
.section--dark .price-card__list li::before {
  border-left-color: var(--gold);
  border-bottom-color: var(--gold);
}

/* Nutzen-Kennzeichnung: durchscheinendes Gold statt heller Fläche */
.section--dark .price-card__nutzen {
  background-color: rgba(200, 168, 95, 0.14);
  border-color: rgba(200, 168, 95, 0.45);
  color: var(--gold);
}

/* --- Schaltflächen auf dunklem Grund --------------------------------------- */

.section--dark .price-card .btn--outline {
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--white);
}

.section--dark .price-card .btn--outline:hover {
  border-color: var(--gold);
  background-color: rgba(200, 168, 95, 0.12);
}

/* Das Abzeichen bekommt auf dunklem Grund einen dunklen Trennring, damit es
   sich klar vom goldenen Kartenrand löst und nicht mit ihm verschwimmt. */
.section--dark .price-card__badge {
  box-shadow:
    0 0 0 4px var(--navy-900),
    0 8px 22px rgba(0, 0, 0, 0.55);
}


/* --- Das empfohlene Paket -------------------------------------------------- */

/* Die Füllung wechselt von Weiß auf eine hellere Glasfläche, damit sich die
   Karte vom Umfeld abhebt. Der laufende Rahmen bleibt unverändert. */
.section--dark .price-card--featured {
  /* Drei Ebenen, von oben nach unten:
       1. Glasschimmer, durchscheinend
       2. DECKENDE Grundfläche – ohne sie schlägt der Goldverlauf des
          Rahmens durch die gesamte Karte und der Text wird unlesbar
       3. Goldverlauf, nur im Rahmenbereich sichtbar                      */
  background:
    linear-gradient(158deg,
      rgba(255, 255, 255, 0.13) 0%,
      rgba(255, 255, 255, 0.05) 100%) padding-box,
    linear-gradient(var(--navy-800), var(--navy-800)) padding-box,
    linear-gradient(135deg, var(--gold) 0%, #F0DCAE 30%,
      var(--gold-ink) 55%, var(--gold) 100%) border-box;
  box-shadow:
    0 10px 34px rgba(200, 168, 95, 0.26),
    0 34px 80px rgba(0, 0, 0, 0.45);
}

/* Der Lichtschein hinter der Karte darf auf Dunkelblau kräftiger sein */
.section--dark .price-card--featured::before {
  background: radial-gradient(64% 54% at 50% 0%,
              rgba(200, 168, 95, 0.55), transparent 74%);
}

/* --- Lichtpunkt folgt dem Zeiger ------------------------------------------- */

/* Beim empfohlenen Paket ist ::before durch den Lichtschein belegt, deshalb
   bekommen nur die beiden anderen Karten den Punkt. Position setzt script.js
   über --zx und --zy, dieselbe Steuerung wie bei den Leistungskarten. */
.section--dark .price-card:not(.price-card--featured)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--zx, 50%) var(--zy, 50%),
              rgba(200, 168, 95, 0.20), transparent 64%);
  opacity: 0;
  transition: opacity 320ms var(--ease);
  pointer-events: none;
}

.section--dark .price-card:not(.price-card--featured):hover::before {
  opacity: 1;
}

/* Der Karteninhalt bleibt über dem Lichtpunkt.
   Das Abzeichen ist ausgenommen: Es ist absolut positioniert und würde
   durch ein erzwungenes position: relative aus seiner Lage springen. */
.section--dark .price-card > *:not(.price-card__badge) {
  position: relative;
  z-index: 1;
}

@media (hover: none) {
  .section--dark .price-card:not(.price-card--featured)::before { display: none; }
}


/* ==========================================================================
   26  VERGLEICHSTABELLE UND HINWEIS AUF DUNKLEM GRUND
   --------------------------------------------------------------------------
   Die Tabelle steht im selben Abschnitt wie die Karten und wechselt deshalb
   mit. Inhalte und Spaltenaufteilung bleiben unverändert.
   ========================================================================== */

.section--dark .vergleich-huelle {
  background: linear-gradient(158deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.022) 100%);
  border-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.section--dark .vergleich caption {
  color: var(--muted-light);
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.section--dark .vergleich th,
.section--dark .vergleich td {
  border-bottom-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.88);
}

.section--dark .vergleich thead th {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--white);
}

.section--dark .vergleich thead th.ist-empfohlen {
  background: linear-gradient(180deg,
    rgba(200, 168, 95, 0.32), rgba(200, 168, 95, 0.14));
  color: var(--white);
}

.section--dark .vergleich tbody th {
  color: var(--white);
}

.section--dark .vergleich .ist-empfohlen {
  background-color: rgba(200, 168, 95, 0.12);
}

.section--dark .vergleich .stark {
  color: var(--white);
}

.section--dark .vergleich .stark::before {
  border-left-color: var(--gold);
  border-bottom-color: var(--gold);
}

.section--dark .vergleich tbody tr:hover th,
.section--dark .vergleich tbody tr:hover td {
  background-color: rgba(255, 255, 255, 0.045);
}

.section--dark .vergleich tbody tr:hover td.ist-empfohlen {
  background-color: rgba(200, 168, 95, 0.2);
}

.section--dark .vergleich .preiszeile th,
.section--dark .vergleich .preiszeile td {
  background-color: rgba(255, 255, 255, 0.07);
  color: var(--white);
}

.section--dark .vergleich .preiszeile td.ist-empfohlen {
  background-color: rgba(200, 168, 95, 0.24);
}

.section--dark .vergleich-hinweis {
  color: var(--muted-light);
}

/* Hinweiskasten unter den Karten */
.section--dark .pricing__note {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--muted-light);
}

.section--dark .pricing__note strong {
  color: var(--white);
}


/* ==========================================================================
   27  HERO-BEREICH – ZWEISPALTIGE FASSUNG MIT LAPTOP
   --------------------------------------------------------------------------
   Links die Aussage, rechts eine Bühne mit einem Laptop. Der Laptop ist
   vollständig in CSS gebaut – kein zusätzliches Bild. Dadurch bleibt er bei
   jeder Auflösung scharf, kostet keine Ladezeit und lässt sich über die
   Farbvariablen mitpflegen.
   ========================================================================== */

/* Die Inhaltsgruppe darf jetzt die volle Breite nutzen */
.hero__inner {
  max-width: var(--shell);
  display: grid;
  gap: var(--space-8);
}

.hero__text {
  --tiefe: 0px;
}


/* --- Merkmalsleiste unter den Schaltflächen -------------------------------- */

.hero__merkmale {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
  --tiefe: 8px;
}

.hero__merkmal {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--muted-light);
}

/* Häkchen als CSS-Form, gleiche Handschrift wie in den Preiskarten */
.hero__merkmal::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.5em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}


/* --- Pfeil in der Hauptschaltfläche ---------------------------------------- */

.btn__pfeil {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}

.btn:hover .btn__pfeil {
  transform: translateX(4px);
}

/* Das Kalendersymbol in der zweiten Schaltfläche */
.hero__actions .btn--ghost svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}


/* --- Goldene Lichtbögen im Hintergrund ------------------------------------- */

/* Zwei weit aufgezogene Ringe, oben links und unten rechts. Sie liegen hinter
   dem Inhalt und geben der Fläche Richtung, ohne Text zu überlagern. */
.hero__boegen {
  position: absolute;
  inset: -30% -10%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(closest-side circle at 6% 12%,
      transparent 0 62%,
      rgba(200, 168, 95, 0.85) 63%,
      rgba(200, 168, 95, 0.18) 66%,
      transparent 70%),
    radial-gradient(closest-side circle at 96% 92%,
      transparent 0 64%,
      rgba(200, 168, 95, 0.70) 65%,
      rgba(200, 168, 95, 0.14) 68%,
      transparent 72%);
  /* Zu den Rändern hin auslaufen lassen */
  mask-image: radial-gradient(75% 75% at 50% 50%, transparent 30%, #000 100%);
  -webkit-mask-image: radial-gradient(75% 75% at 50% 50%, transparent 30%, #000 100%);
}


/* ==========================================================================
   28  DIE BÜHNE MIT DEM LAPTOP
   ========================================================================== */

.hero__buehne {
  position: relative;
  display: grid;
  /* Seitliche Luft für den Überstand des Unterteils */
  padding-inline: clamp(10px, 3vw, 36px);
  /* Drei Zeilen: Kennzeichnung, Gerät, Kennzeichnung */
  gap: var(--space-4);
  justify-items: center;
  /* Geringere Tiefe: bei 46px vergrößerte die Perspektive die Bühne um
     4,4 Prozent, was den Überstand zusätzlich nach außen schob. */
  --tiefe: 28px;
}

/* --- Der Laptop ------------------------------------------------------------ */

.laptop {
  position: relative;
  width: min(100%, 460px);
  transform-style: preserve-3d;
  /* Die Neigung steht als Variable hier, damit sie je Bildschirmbreite
     angepasst werden kann. Gesetzt wird sie von der Schwebe-Animation in
     animations.css Abschnitt 22 – so beschreibt nur eine Stelle das
     transform und die beiden geraten sich nicht ins Gehege. */
  --neigung: -9deg;
  --kippung: 5deg;
  transform: rotateY(var(--neigung)) rotateX(var(--kippung));
}

/* Lichtschein hinter dem Gerät */
.laptop::before {
  content: "";
  position: absolute;
  inset: -18% -14% -26%;
  z-index: -1;
  background:
    radial-gradient(58% 50% at 50% 45%, rgba(64, 124, 196, 0.42), transparent 70%),
    radial-gradient(46% 40% at 72% 68%, rgba(200, 168, 95, 0.30), transparent 72%);
  pointer-events: none;
}

.laptop__deckel {
  padding: 9px 9px 10px;
  background: linear-gradient(158deg, #35455f 0%, #1b2537 55%, #121a27 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.laptop__schirm {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(155deg, #1a2f4a 0%, #101c2c 55%, #0a121c 100%);
  display: grid;
  place-items: center;
}

/* Angedeutete Browserleiste – macht aus der Fläche erkennbar eine Website */
.laptop__leiste {
  position: absolute;
  inset: 0 0 auto 0;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 11px;
  background: rgba(255, 255, 255, 0.055);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.laptop__leiste span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.22);
}

.laptop__leiste span:first-child {
  background-color: rgba(200, 168, 95, 0.75);
}

.laptop__inhalt {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  text-align: center;
}

.laptop__logo {
  width: 62px;
  height: auto;
}

.laptop__marke {
  margin: 0;
  font-size: clamp(1.3rem, 0.9rem + 1.4vw, 1.85rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--white);
}

.laptop__marke-zusatz {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.42em;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}

.laptop__slogan {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* Lichtreflex, der über den Bildschirm wandert */
.laptop__glanz {
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg,
    transparent 34%,
    rgba(255, 255, 255, 0.10) 47%,
    rgba(255, 255, 255, 0.02) 54%,
    transparent 64%);
  pointer-events: none;
}

/* Das Unterteil: nach unten schmaler, dadurch wirkt es perspektivisch */
.laptop__fuss {
  width: 110%;
  height: 13px;
  margin-left: -5%;
  background: linear-gradient(180deg, #3b4c68 0%, #23304a 45%, #131c2b 100%);
  border-radius: 0 0 10px 10px;
  clip-path: polygon(1.6% 0, 98.4% 0, 100% 100%, 0 100%);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.5);
}

/* Vertiefung für die Öffnung */
.laptop__fuss::after {
  content: "";
  display: block;
  width: 13%;
  height: 3px;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 0 0 4px 4px;
}


/* --- Schwebende Kennzeichnungen -------------------------------------------- */

/* Deckend statt durchscheinend: Als Glasfläche schien der Laptop hindurch
   und die Kennzeichnung wirkte, als läge sie dahinter. */
.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 16px;
  background: linear-gradient(158deg, #223452 0%, #16233A 100%);
  border: 1px solid rgba(200, 168, 95, 0.38);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
}

.hero__chip svg {
  width: 17px;
  height: 17px;
  color: var(--gold);
}

/* Diagonal versetzt: oben rechts, unten links – so umrahmen sie das Gerät,
   ohne es zu berühren. */
.hero__chip--oben  { justify-self: end; }
.hero__chip--unten { justify-self: start; }

.hero__geraet {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
}


/* --- Persönliche Notiz ------------------------------------------------------ */

/* Ohne externe Schriftarten gibt es keine Handschrift. Die kursive
   Serifenschrift mit leichter Drehung kommt dem am nächsten und bleibt
   auf jedem System verfügbar. */
.hero__notiz {
  position: absolute;
  left: -13%;
  top: 34%;
  z-index: 3;
  margin: 0;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--white);
  transform: rotate(-7deg);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* Geschwungener Pfeil zum Bildschirm */
.hero__notiz::after {
  content: "";
  position: absolute;
  left: 90%;
  top: 78%;
  width: 62px;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 40'%3E%3Cpath d='M2 4c14 20 34 28 52 28' fill='none' stroke='%23C8A85F' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M46 26l9 6-10 5' fill='none' stroke='%23C8A85F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}


/* ==========================================================================
   29  RASTERSTUFEN DES HERO-BEREICHS
   ========================================================================== */

/* Bis 992px steht die Bühne unter dem Text und tritt zurück */
@media (max-width: 61.99em) {

  .hero__buehne {
    margin-top: var(--space-6);
  }

  .laptop {
    width: min(100%, 340px);
    --neigung: -6deg;
    --kippung: 4deg;
  }

  /* Einspaltig ist der Bildschirm flacher. Inhalt entsprechend kompakter,
     sonst ragt er über den Bildschirm hinaus und wird beschnitten. */
  .laptop__logo {
    width: 50px;
  }

  .laptop__inhalt {
    gap: var(--space-2);
    padding: var(--space-4);
  }

  .laptop__marke {
    font-size: 1.3rem;
  }

  /* Auf schmalen Bildschirmen ist für die Notiz kein Platz */
  .hero__notiz {
    display: none;
  }

}

@media (max-width: 30em) {

  .laptop {
    width: min(94%, 296px);
    --neigung: -3.5deg;
    --kippung: 2.5deg;
  }

  .hero__chip {
    padding: 8px 12px;
    font-size: 0.72rem;
  }

}

/* Ab 992px zwei Spalten. Darunter wäre die rechte Spalte so schmal, dass
   der Laptop mitsamt Überstand nicht mehr hineinpasst. */
@media (min-width: 62em) {

  .hero__inner {
    grid-template-columns: 1.12fr 0.88fr;
    align-items: center;
    gap: var(--space-7);
  }
}

/* Zwischen 992 und 1200px ist der Laptop am kleinsten. Dort werden
   Bildschirminhalt und Kennzeichnungen mitverkleinert, sonst passt der
   Inhalt nicht mehr in den Bildschirm und das freie Band unter dem
   Slogan wird kleiner als die Kennzeichnung. */
@media (min-width: 62em) and (max-width: 74.99em) {

  .laptop__logo {
    width: 48px;
  }

  .laptop__inhalt {
    gap: var(--space-2);
    padding: var(--space-4);
  }

  .laptop__marke {
    font-size: 1.25rem;
  }

  .hero__chip {
    padding: 7px 13px;
    font-size: 0.73rem;
  }

  .hero__chip svg {
    width: 15px;
    height: 15px;
  }

  /* Für die Notiz ist links kein Platz – sie würde in den Fließtext
     hineinragen. Erst ab 1200px wird sie wieder eingeblendet. */
  .hero__notiz {
    display: none;
  }
}

@media (min-width: 75em) {

  .hero__inner {
    grid-template-columns: 1.12fr 0.88fr;
    gap: var(--space-8);
  }

  .laptop {
    width: min(100%, 500px);
  }
}


/* ==========================================================================
   27  TREFFERFLÄCHEN UND LESBARKEIT
   --------------------------------------------------------------------------
   Ergebnis einer Prüfung über neun Seiten und acht Fensterbreiten. Behoben
   werden hier alleinstehende Verweise, die zu flach waren, und Schriften
   unter 11 Pixeln, die echte Information tragen.

   Nicht angetastet: Verweise mitten im Satz (Fließtext, FAQ-Antworten,
   Rechtstexte). Für die gilt die Ausnahme aus WCAG 2.5.8 – sie dürfen so
   hoch sein wie die Textzeile, in der sie stehen.
   ========================================================================== */

/* Logo in Kopf- und Fußbereich: war 33px hoch */
.logo {
  min-height: 44px;
}

/* Verweise im Fußbereich stehen einzeln in einer Liste und brauchen
   deshalb die volle Trefferfläche. Der Abstand der Liste wird dafür
   kleiner, damit der Fußbereich nicht höher wird. */
.site-footer__list {
  gap: 0;
}

.site-footer__list a,
.site-footer__list > li {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.site-footer__list a {
  width: fit-content;
}

/* "Mehr erfahren"-Verweise: waren 25px hoch */
.teaser__mehr {
  min-height: 44px;
}

/* Pfad zur aktuellen Seite. Die Schrift bleibt klein, die Trefferfläche
   wächst über Innenabstand – das Aussehen ändert sich dadurch kaum. */
.brotkrumen a,
.brotkrumen li > span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

/* Telefon- und E-Mail-Verweise, die allein in ihrer Zeile stehen:
   waren 18px hoch und damit unter der Mindestgröße nach WCAG 2.5.8. */
.contact__detail-value a,
.about__fact-value a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --- Schriftgrößen, die echte Information tragen -------------------------- */

/* Wochentag und Monat in der Tagesauswahl: waren 10,9 und 9,9 Pixel.
   Beide müssen gelesen werden, um einen Termin zu wählen. */
.termin__tag-wochentag {
  font-size: 0.75rem;
}

.termin__tag-monat {
  font-size: 0.7rem;
}

.termin__tag {
  min-width: 82px;
}

/* Das "ab" vor dem Premium-Preis war 10,8 Pixel klein */
.price-card__ab {
  font-size: 0.48em;
}

/* Schrift auf dem Laptop-Bildschirm. Reine Gestaltung, aber 8,7 Pixel
   sind auch dafür zu wenig. */
.laptop__marke-zusatz {
  font-size: 0.42em;
  letter-spacing: 0.28em;
}

.laptop__slogan {
  font-size: 0.68rem;
}


/* ==========================================================================
   28  BLAUTON-EBENE
   --------------------------------------------------------------------------
   Die ganze Website steht jetzt auf Blautönen. Abschnitt 01 hat dafür die
   Farb-Token umgestellt. Hier folgen die Bauteile, die vorher ausdrücklich
   eine helle Fläche vorausgesetzt haben – Karten, Formularfelder,
   Tabellenköpfe und alle Stellen, an denen --ink doppelt gedient hat:
   einmal als Überschrift auf Hell, einmal als Text auf Gold.

   Unterschieden werden die Abschnitte nicht mehr durch hell gegen dunkel,
   sondern durch die Blaustufe: --navy-900 als Grundton, --navy-850 für
   angehobene Abschnitte, --flaeche für Karten darauf.
   ========================================================================== */

/* --- Kartenflächen --------------------------------------------------------- */

.card,
.care-card,
.faq__item,
.vergleich-huelle,
.contact__form-wrap {
  background:
    linear-gradient(158deg,
      rgba(255, 255, 255, 0.075) 0%,
      rgba(255, 255, 255, 0.025) 100%),
    var(--flaeche);
  border-color: var(--line);
}

/* Der Formularkasten hatte auf weißem Grund keinen Rahmen und brauchte
   auch keinen. Als Glasfläche auf Blau braucht er eine Kante, sonst
   verschwimmt er mit dem Abschnitt. */
.contact__form-wrap {
  border: 1px solid var(--line);
}

.card:hover,
.care-card:hover {
  border-color: rgba(200, 168, 95, 0.5);
}

.price-card {
  background:
    linear-gradient(158deg,
      rgba(255, 255, 255, 0.085) 0%,
      rgba(255, 255, 255, 0.028) 100%),
    var(--flaeche);
}

/* Das empfohlene Paket: deckende Grundfläche unter dem Goldrahmen, sonst
   schlägt der Verlauf durch die ganze Karte (siehe Abschnitt 25). */
.price-card--featured {
  background:
    linear-gradient(158deg,
      rgba(255, 255, 255, 0.13) 0%,
      rgba(255, 255, 255, 0.05) 100%) padding-box,
    linear-gradient(var(--flaeche), var(--flaeche)) padding-box,
    linear-gradient(135deg, var(--gold) 0%, #F0DCAE 30%,
      var(--gold-ink) 55%, var(--gold) 100%) border-box;
}

.pricing__note {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--muted);
}

.pricing__note strong {
  color: var(--titel);
}

.photo-frame {
  background-color: var(--navy-850);
  border-color: var(--line);
}

/* --- Texte, die vorher die dunkle Schrift auf Hell waren ------------------- */

.btn--outline {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.26);
}

.btn--outline:hover {
  background-color: rgba(200, 168, 95, 0.12);
  border-color: var(--gold);
}

.price-card__amount,
.care-card__amount,
.kennzahl__wert,
.about__fact-value,
.faq__question,
.form__label {
  color: var(--titel);
}

.faq__question:hover {
  color: var(--gold);
}

.card__text,
.step__text,
.leistung__text,
.grundsatz__text,
.zeitstrahl__text,
.section__intro,
.intro-grid__body p,
.about__content p {
  color: var(--muted);
}

/* --- Formular -------------------------------------------------------------- */

/* Vollständige Kurzschreibweise: Die Breite stand vorher in der hellen
   Fassung und wurde dort entfernt. Nur border-color zu setzen ergäbe
   gar keinen Rahmen. */
.form__input {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--ink-text);
}

.form__input::placeholder {
  color: rgba(168, 182, 200, 0.75);
}

.form__input:hover {
  border-color: rgba(255, 255, 255, 0.36);
}

.form__input:focus {
  border-color: var(--gold);
  background-color: rgba(255, 255, 255, 0.08);
}

.form__input[aria-invalid="true"] {
  border-color: var(--error-light);
  box-shadow: 0 0 0 3px rgba(255, 180, 171, 0.18);
}

/* Der Pfeil im Auswahlfeld war dunkelgrau und auf Blau unsichtbar */
.form__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A8B6C8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.form__select option,
.form__select optgroup {
  /* Aufklappliste wird vom Betriebssystem gezeichnet – dunkle Schrift
     auf hellem Grund ist dort die verlässliche Wahl. */
  background-color: var(--navy-800);
  color: var(--white);
}

.checkbox {
  color: var(--muted);
}

.checkbox__box {
  background-color: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.28);
}

.checkbox:hover .checkbox__box {
  border-color: rgba(255, 255, 255, 0.5);
}

.checkbox__input:checked + .checkbox__box {
  background-color: var(--gold);
  border-color: var(--gold);
}

.checkbox__input:checked + .checkbox__box::after {
  border-color: var(--ink);
}

.checkbox__input:focus-visible + .checkbox__box {
  outline-color: var(--gold);
}

.form__error {
  color: var(--error-light);
}

.form__status.is-success {
  background-color: rgba(43, 160, 112, 0.14);
  border-left-color: #4FD1A0;
  color: #9BE8C8;
}

.form__status.is-error {
  background-color: rgba(255, 180, 171, 0.12);
  border-left-color: var(--error-light);
  color: var(--error-light);
}

/* --- Vergleichstabelle ----------------------------------------------------- */

.vergleich th,
.vergleich td {
  border-bottom-color: var(--line);
  color: var(--ink-text);
}

.vergleich thead th {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--titel);
}

.vergleich thead th.ist-empfohlen,
.vergleich tbody th,
.vergleich .stark {
  color: var(--titel);
}

.vergleich caption {
  color: var(--muted);
  border-bottom-color: var(--line);
}

.vergleich tbody tr:hover th,
.vergleich tbody tr:hover td {
  background-color: rgba(255, 255, 255, 0.045);
}

.vergleich .preiszeile th,
.vergleich .preiszeile td {
  background-color: rgba(255, 255, 255, 0.07);
  color: var(--titel);
}

/* --- Fußbereich: blauschwarz statt neutralschwarz -------------------------- */

.site-footer {
  background-color: var(--navy-950);
}

/* --- Rechtlicher Warnkasten ------------------------------------------------ */

.legal__warning {
  background-color: rgba(224, 163, 46, 0.12);
  border: 2px solid rgba(224, 163, 46, 0.55);
  color: #F0D9A8;
}

.legal__warning strong {
  color: #F7E4BC;
}

/* --- Hintergrundmuster: helle Linien statt dunkler ------------------------- */

[data-hg="raster"] {
  background-color: var(--navy-850);
}

[data-hg="raster"]::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
}

[data-hg="punkte"] {
  background-color: var(--navy-900);
}

[data-hg="punkte"]::before {
  background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1.15px, transparent 1.15px);
}


/* ==========================================================================
   29  DRUCKANSICHT NACH DER UMSTELLUNG
   --------------------------------------------------------------------------
   Auf Papier wäre Blau auf Blau unlesbar. Für den Druck wird deshalb auf
   dunkle Schrift auf weißem Grund zurückgeschaltet.
   ========================================================================== */

@media print {

  body,
  .section,
  .page-hero,
  .legal,
  [data-hg] {
    background: #fff !important;
    color: #1a1a1a !important;
  }

  h1, h2, h3, h4,
  .price-card__amount,
  .care-card__amount,
  .kennzahl__wert,
  .faq__question,
  .form__label,
  .vergleich thead th,
  .vergleich tbody th,
  .vergleich .preiszeile th,
  .vergleich .preiszeile td {
    color: #000 !important;
  }

  p, li, td, .card__text, .step__text, .leistung__text,
  .grundsatz__text, .zeitstrahl__text, .section__intro {
    color: #333 !important;
  }

  .card, .price-card, .care-card, .faq__item,
  .vergleich-huelle, .pricing__note, .photo-frame {
    background: #fff !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }

  [data-hg]::before,
  [data-hg]::after,
  .koernung {
    display: none !important;
  }

  .eyebrow, .price-card__unit, .care-card__unit,
  .termin__schritt, .site-footer__heading {
    color: #6b5518 !important;
  }
}


/* ==========================================================================
   30  LEISTUNGSBLÖCKE ALS KARTEN
   --------------------------------------------------------------------------
   Vorher: Textblöcke, nur durch Haarlinien getrennt, mit viel Leerraum in
   der linken Spalte. Jetzt trägt jeder Block eine eigene Glasfläche mit
   Symbol und Nummer – die Seite bekommt damit dieselbe Bauweise wie die
   Karten auf der Startseite.
   ========================================================================== */

.leistung {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  /* Der Innenabstand ersetzt den früheren Außenabstand */
  padding-block: var(--space-6);
  background:
    linear-gradient(158deg,
      rgba(255, 255, 255, 0.07) 0%,
      rgba(255, 255, 255, 0.022) 100%),
    var(--flaeche);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  /* Die Haarlinie von früher entfällt */
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease),
              transform 320ms var(--ease),
              box-shadow 320ms var(--ease);
}

.leistung + .leistung {
  margin-top: var(--space-5);
}

/* Goldene Oberkante, die beim Überfahren aufleuchtet */
.leistung::after {
  content: "";
  position: absolute;
  inset-inline: 8%;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .leistung:hover {
    border-color: rgba(200, 168, 95, 0.45);
    transform: translateY(-3px);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.32);
  }

  .leistung:hover::after {
    opacity: 1;
  }
}

.leistung__kopf {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
}

/* Symbol im goldgerahmten Quadrat, wie auf der Startseite */
.leistung__symbol {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background-color: rgba(200, 168, 95, 0.1);
  border: 1px solid rgba(200, 168, 95, 0.4);
  border-radius: var(--radius);
  color: var(--gold);
  transition: transform 420ms var(--ease-back, cubic-bezier(0.34, 1.56, 0.64, 1)),
              background-color var(--dur) var(--ease);
}

.leistung__symbol svg {
  width: 24px;
  height: 24px;
}

.leistung:hover .leistung__symbol {
  transform: rotate(-8deg) scale(1.08);
  background-color: rgba(200, 168, 95, 0.18);
}

.leistung__nr {
  margin: 0;
}

.leistung__title {
  margin-block: 0;
}

.leistung__koerper > .leistung__text {
  margin-bottom: 0;
}

.leistung__list {
  margin-top: var(--space-5);
}


/* ==========================================================================
   31  ABLAUFSCHRITTE ALS KARTEN AN DER STEIGLEITUNG
   --------------------------------------------------------------------------
   Die senkrechte Leitung und die Knotenpunkte bleiben. Neu ist, dass der
   Text jedes Schritts auf einer eigenen Fläche sitzt – dadurch wird die
   Abfolge deutlich ablesbarer.
   ========================================================================== */

.step__body {
  padding: var(--space-5);
  background:
    linear-gradient(158deg,
      rgba(255, 255, 255, 0.065) 0%,
      rgba(255, 255, 255, 0.02) 100%),
    var(--flaeche);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease),
              transform 320ms var(--ease),
              box-shadow 320ms var(--ease);
}

/* Die Ausrichtung am Knoten übernimmt jetzt der Innenabstand der Karte */
.step__title {
  padding-top: 0;
}

@media (hover: hover) and (pointer: fine) {
  .step:hover .step__body {
    border-color: rgba(200, 168, 95, 0.45);
    transform: translateX(5px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
  }
}

/* Etwas mehr Abstand zwischen Knoten und Karte */
.step {
  padding-left: calc(var(--node) + var(--space-6));
}

/* Die Leitung endet jetzt an der Unterkante der Karte */
.step:not(:last-child)::before {
  top: calc(var(--node) + 6px);
}

@media (min-width: 60em) {

  /* Auf großen Bildschirmen laufen Kopf und Körper nebeneinander */
  .leistung {
    grid-template-columns: minmax(220px, 0.78fr) 1.22fr;
    gap: var(--space-8);
    padding: var(--space-7);
  }

  .leistung__kopf {
    align-content: start;
  }
}