/* ==========================================================================
   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:        #8A6B24;   /* Akzenttext auf hellem Grund (4,9:1)      */
  --gold-wash:       #FBF7EE;   /* sehr helle Goldfläche                    */

  --navy-900:        #0E1B2C;   /* dunkelste Fläche, Hero und Kontakt       */
  --navy-800:        #16283F;   /* erhöhte Flächen auf Dunkelblau           */
  --navy-700:        #22394F;   /* Rahmen auf Dunkelblau                    */

  --ink:             #15171A;   /* Anthrazit der Bildmarke                  */
  --ink-text:        #23282F;   /* Fließtext auf Hell (13,5:1)              */
  --muted:           #5A6472;   /* Nebentext auf Hell (6,0:1)               */
  --muted-light:     #A8B6C8;   /* Nebentext auf Dunkelblau (8,7:1)         */

  --white:           #FFFFFF;
  --paper:           #F4F5F7;   /* kühles Grauweiß für Wechselabschnitte    */
  --line:            #E1E5EA;   /* Trennlinien auf Hell                     */
  --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(--white);
  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(--ink);
  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);
  background-color: var(--paper);
}

.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 {
  font-size: var(--fs-display);
  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);
  background-color: var(--white);
  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);
  background-color: var(--white);
  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);
  /* Zwei Zeilen reservieren (Zeilenhöhe 1,65 x 2 = 3,3em), damit die
     Preiszeilen aller drei Karten auf gleicher Höhe stehen. */
  min-height: 3.3em;
}

/* 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);
  background-color: var(--paper);
  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);
  background-color: var(--white);
  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;
  background-color: var(--paper);
  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 {
  background-color: var(--white);
  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 {
  background-color: var(--white);
  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);
  background-color: var(--white);
  border: 1px solid #C9CFD8;
  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;
  background-color: var(--white);
  border: 2px solid #C9CFD8;
  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);
  background-color: #EAF5EF;
  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);
  background-color: #FDECEA;
  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);
  background-color: #FFF6E6;
  border: 2px solid #E0A32E;
  border-radius: var(--radius);
  color: #5C3D00;
  font-size: var(--fs-small);
}

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

.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);
  background-color: var(--white);
  -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);
  background-color: var(--paper);
  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;
  }
}