/* ===============================================================
   ALPENRAND WEBDESIGN — Stylesheet (Mobile-First)
   Phase 3 — Sektion 1 (Header) + Sektion 2 (Hero)
   Spacing-Rhythmus (editorial): Pair eng · Detail mittel · Gruppe weit
   =============================================================== */

/* ---------- Tokens ---------- */
:root {
  --navy:        #1B2E54;
  --navy-dark:   #00204D;
  --bg:          #FDFDFD;
  --bg-warm:     #F7F5EF;
  --section:     #F2F1EC;
  --text:        #2A2E35;
  --grey:        #6B7280;
  --line:        #E3E1DA;
  --senf:        #C28A2C;
  --senf-hover:  #A9761F;
  --senf-link:   #9A6C1B;
  --senf-soft:   #E0B45F;

  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Mukta', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --max-w: 1200px;

  --radius: 6px;
  --shadow-sm: 0 1px 2px rgba(27,46,84,.06);
  --shadow-md: 0 8px 24px rgba(27,46,84,.10);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

p { margin: 0 0 1em; }
img, svg { display: block; max-width: 100%; height: auto; }
hgroup { margin: 0; }

::selection { background: var(--senf); color: #fff; }

/* Skip-Link (BFSG) */
.skip-link {
  position: absolute;
  left: 0; top: -42px;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  padding: 10px 18px;
  text-decoration: none;
  font-weight: 500;
  font-size: .9rem;
  transition: top .2s ease;
}
.skip-link:focus { top: 0; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--senf);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ===============================================================
   Buttons
   =============================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: .015em;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  position: relative;
  transition:
    background-color .3s var(--ease-out),
    color .3s var(--ease-out),
    border-color .3s var(--ease-out),
    box-shadow .3s var(--ease-out),
    transform .3s var(--ease-out);
}
.btn-arrow { flex-shrink: 0; transition: transform .3s var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(4px); }

.btn-primary {
  background: var(--senf);
  color: #fff;
  padding: 14px 24px;
  font-size: .95rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.btn-primary:hover {
  background: var(--senf-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-text {
  background: transparent;
  color: var(--navy);
  padding: 14px 4px;
  font-size: .95rem;
  border-radius: 0;
}
.btn-text::after {
  content: '';
  position: absolute;
  left: 4px; right: 28px;
  bottom: 10px;
  height: 1.5px;
  background: var(--navy);
  transform-origin: left;
  transition: background-color .3s var(--ease-out);
}
.btn-text:hover { color: var(--senf-link); }
.btn-text:hover::after { background: var(--senf-link); }

.btn-sm { min-height: 40px; padding: 9px 16px; font-size: .85rem; }
.btn-lg { min-height: 52px; padding: 16px 28px; font-size: 1rem; }

/* ===============================================================
   SEKTION 1 — Sticky-Header
   Logo nutzt den Header-Raum jetzt voll aus
   =============================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy);
  border-bottom: 1px solid var(--navy-dark);
}

/* Mobile (base) — Header schlank (60px), Logo zentriert, Burger rechts */
.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 18px;
  min-height: 60px;
  display: grid;
  grid-template-columns: 44px 1fr 44px;     /* linker Spacer (Burger-Breite) + Logo zentriert + Burger rechts */
  align-items: center;
  align-content: center;                     /* zentriert die gesamte Grid-Zeile im 60px-Container */
  gap: 12px;
}
.header-logo {
  grid-column: 2;
  justify-self: center;
  align-self: center;            /* vertikal zentriert auf der Header-Leiste */
  height: auto;
}
.burger-toggle {
  grid-column: 3;
  justify-self: end;
  align-self: center;            /* vertikal zentriert auf der Header-Leiste */
}

@media (min-width: 980px) {
  /* Desktop: Header über volle Breite, 3-Spalten-Grid (1fr auto 1fr) →
     Logo mittig im linken Feld (zwischen Seitenrand und „Prozess"),
     Nav exakt in der Bildschirmmitte, Actions rechts außen. */
  .header-inner {
    max-width: none;                              /* volle Breite statt 1200px-Spalte */
    padding-inline: clamp(28px, 3.5vw, 64px);     /* symmetrischer Atem links/rechts */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 28px;
  }
  .header-logo    { grid-column: 1; justify-self: center; }
  .header-nav     { grid-column: 2; }
  .header-actions { grid-column: 3; justify-self: end; margin-left: 0; }
}

.header-logo {
  display: block;
  line-height: 0;
  flex-shrink: 0;
}
/* Logo: gecroppte Off-White-Variante (480×115) — Content füllt fast die volle Höhe.
   Auch bei kleinem Header wirkt der Schriftzug groß und prominent. */
.header-logo img {
  height: 44px;       /* Mobile: 44px Logo in 60px Header → 8px Atem oben/unten */
  width: auto;
  display: block;
}

.header-nav { display: none; }

/* Mobile: WhatsApp-Icon + Anfragen-Button im Header weg —
   der schwebende Sticky-WhatsApp-Button reicht. .header-actions
   wird komplett entfernt, damit es keine Grid-Geisterzelle gibt.
   !important nötig, weil weiter unten in der Datei noch eine
   allgemeine .header-actions { display: flex } -Regel steht. */
@media (max-width: 979px) {
  .header-actions { display: none !important; }
}

/* ===============================================================
   Burger-Menu (Mobile / Tablet bis 980px)
   =============================================================== */
.burger-toggle {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 1.5px solid var(--bg);
  width: 44px; height: 44px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
  position: relative;
  z-index: 70;                /* immer über dem Mobile-Menu-Overlay (z 60) */
}
.burger-toggle:hover,
.burger-toggle:focus-visible {
  background: var(--senf);
  border-color: var(--senf);
  outline: none;
}
.burger-bars {
  position: relative;
  width: 18px; height: 14px;
  display: block;
}
.burger-bars span {
  position: absolute;
  left: 0; right: 0;
  height: 1.8px;
  background: var(--bg);
  border-radius: 2px;
  transition: transform 0.25s var(--ease-out), opacity 0.18s var(--ease-out), top 0.25s var(--ease-out);
}
.burger-bars span:nth-child(1) { top: 0; }
.burger-bars span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.burger-bars span:nth-child(3) { top: calc(100% - 1.8px); }
.burger-toggle:hover .burger-bars span,
.burger-toggle:focus-visible .burger-bars span { background: var(--navy); }

@media (min-width: 980px) {
  .burger-toggle { display: none; }
}

/* Mobile-Menu-Overlay: Drawer unterhalb des Headers (Burger bleibt sichtbar) */
.mobile-menu {
  position: fixed;
  top: 60px;                     /* Höhe Mobile-Header (siehe header-inner min-height) */
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--navy);
  padding: 32px 28px 40px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out);
  overflow-y: auto;
}
.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu nav { width: 100%; max-width: 480px; }
.mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.mobile-menu li {
  border-top: 1px solid rgba(250, 248, 242, 0.10);
}
.mobile-menu li:last-child { border-bottom: 1px solid rgba(250, 248, 242, 0.10); }
.mobile-menu a {
  display: flex;
  align-items: center;
  padding: 22px 8px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.005em;
  color: var(--bg);
  text-decoration: none;
  transition: color 0.18s var(--ease-out), padding-left 0.2s var(--ease-out);
}
.mobile-menu a::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 1.5px;
  background: var(--senf);
  margin-right: 0;
  transition: width 0.25s var(--ease-out), margin-right 0.25s var(--ease-out);
}
.mobile-menu a:hover,
.mobile-menu a:focus-visible { color: var(--senf-soft); }
.mobile-menu a:hover::before,
.mobile-menu a:focus-visible::before { width: 24px; margin-right: 14px; }

/* Zurück-Button im Mobile-Menu (statt X) */
.mobile-menu-back {
  appearance: none;
  background: transparent;
  border: 0;
  margin: 40px auto 0;
  padding: 12px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--senf-soft);
  letter-spacing: 0.02em;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s var(--ease-out), color 0.2s var(--ease-out), gap 0.2s var(--ease-out);
}
.mobile-menu-back:hover,
.mobile-menu-back:focus-visible {
  opacity: 1;
  color: var(--bg);
  gap: 18px;
  outline: none;
}
.mobile-menu-back-arrow {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1;
  transition: transform 0.2s var(--ease-out);
}
.mobile-menu-back:hover .mobile-menu-back-arrow,
.mobile-menu-back:focus-visible .mobile-menu-back-arrow {
  transform: translateX(-2px);
}
.mobile-menu-back-text {
  text-decoration: underline;
  text-decoration-color: rgba(225, 200, 165, 0.35);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* Body-Scroll-Lock wenn Menü offen */
body.menu-open { overflow: hidden; }
@media (min-width: 980px) {
  body.menu-open { overflow: visible; }
  .mobile-menu { display: none; }
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.icon-link {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--bg);                /* Weiß im Ruhezustand */
  text-decoration: none;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out);
}
.icon-link:hover {
  background: rgba(194, 138, 44, 0.18);
  color: var(--senf-soft);         /* Senf beim Hover */
}

/* Anfragen-Button im Navy-Header: Weiß-Outline → Senf beim Hover */
.site-header .btn-primary {
  background: transparent;
  color: var(--bg);
  border: 1.5px solid var(--bg);
}
.site-header .btn-primary:hover {
  background: var(--senf);
  border-color: var(--senf);
  color: var(--navy);
}

/* Tablet (≥760) — Header 68px, Logo 52px */
@media (min-width: 760px) {
  .header-inner {
    padding: 0 28px;
    min-height: 68px;
    gap: 28px;
  }
  .header-logo img { height: 52px; }     /* 52px Logo in 68px Header → 8px Atem */
  .header-actions { gap: 12px; }
}
/* Desktop (≥980) — Header 76px, Logo 60px */
@media (min-width: 980px) {
  .header-inner { min-height: 76px; }
  .header-logo img { height: 60px; }     /* 60px Logo in 76px Header → 8px Atem */
}

/* Desktop (≥980) — Nav erscheint */
@media (min-width: 980px) {
  .header-nav { display: block; margin: 0 auto; }
  .header-nav ul {
    display: flex;
    gap: 22px;
    list-style: none;
    margin: 0; padding: 0;
  }
  .header-nav a {
    color: rgba(253, 253, 253, 0.85);
    text-decoration: none;
    font-weight: 400;
    font-size: .94rem;
    letter-spacing: 0.005em;
    padding: 6px 0;
    position: relative;
    transition: color .25s var(--ease-out);
    white-space: nowrap;
  }
  .header-nav a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1.5px;
    background: var(--senf);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ease-out);
  }
  .header-nav a:hover,
  .header-nav a:focus-visible { color: var(--bg); }
  .header-nav a:hover::after,
  .header-nav a:focus-visible::after { transform: scaleX(1); }
}

/* Großer Desktop (≥1200) — mehr Atem zwischen Nav-Items */
@media (min-width: 1200px) {
  .header-nav ul { gap: 32px; }
  .header-nav a { font-size: .95rem; }
}

/* Mini-Mobile: nur Pfeil im Anfragen-Button */
@media (max-width: 380px) {
  .header-actions .btn span { display: none; }
  .header-actions .btn { padding: 9px 11px; min-height: 40px; }
}

/* ===============================================================
   SEKTION 2 — Hero (Mobile-First)
   Spacing-Hierarchie:
     · H1 → Subheading: ENG (Pair-Atem: 6/8/10px)
     · Subheading → Divider: MITTEL (24/30/36px)
     · Divider → Sub: MITTEL (24/30/36px)
     · Sub → CTAs: WEIT (40/48/56px)
   =============================================================== */
.hero {
  position: relative;
  padding: 40px 22px 56px;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%,
      var(--bg) 0%,
      var(--bg-warm) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* Mobile-only: Headline-Block klebt OBEN, CTA-Buttons werden ans HERO-Ende
   gepusht (margin-top: auto) — kleiner Atem zum Trust-Strip via padding-bottom. */
@media (max-width: 559px) {
  .hero {
    justify-content: flex-start;
    min-height: clamp(580px, 88svh, 820px);
    padding: 36px 22px 28px;
  }
  .hero-inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }
  .hero-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }
}

/* Mountains — Mobile: nur Front-Layer, dezent */
.hero-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
.hero-mountains {
  position: absolute;
  left: -3%; right: -3%;
  width: 106%;
  height: 120px;
  color: var(--navy);
}
.hero-mountains-back  { display: none; }
.hero-mountains-front { bottom: 0; opacity: 0.08; }

.hero-inner {
  max-width: 1080px;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* ───────────────────────────────────────────────────────────────
   CINEMATIC HERO — Bild als Full-Bleed-Background + Off-White-Gradient
   Mobile: Gradient von oben nach unten (Text oben, Bild unten)
   Desktop ≥980px: Gradient von links nach rechts (Text links, Bild rechts)
   ─────────────────────────────────────────────────────────────── */
.hero--cinematic { background: var(--bg); }
.hero--cinematic .cine-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.hero--cinematic .cine-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  filter: saturate(1.05) contrast(1.02);
}
.hero--cinematic .cine-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Mobile-Default: Off-White-Schleier von oben (Text steht oben drüber) */
  background:
    linear-gradient(180deg,
      rgba(253,253,253,0.96) 0%,
      rgba(253,253,253,0.88) 38%,
      rgba(253,253,253,0.55) 62%,
      rgba(253,253,253,0.18) 85%,
      rgba(253,253,253,0.00) 100%);
}


/* H1 + Subheading als enger Pair (hgroup) */
.hero-heading { margin: 0 0 24px; }     /* Pair zu Divider: MITTEL */

.hero-title {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--navy);
  font-size: clamp(2.2rem, 10vw, 3rem);
  line-height: 1.08;                     /* Cormorant: Atem für Descender (g/p) zur 2. Zeile */
  letter-spacing: -0.012em;
  margin: 0 0 6px;                       /* H1 → Subheading: ENG */
  text-wrap: balance;
}
.hero-title-line {
  display: block;
  animation: fade-up 1.1s var(--ease-out) both;
}
.hero-title-line:nth-of-type(1) { animation-delay: 0.08s; }
.hero-title-line:nth-of-type(2) { animation-delay: 0.20s; }
.title-dot {
  color: var(--senf-link);
  font-weight: 600;
}

.hero-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(1.2rem, 5vw, 1.55rem);
  line-height: 1.28;
  letter-spacing: -0.003em;
  margin: 0;
  opacity: 0.92;
  text-wrap: balance;
  animation: fade-up 1s var(--ease-out) both;
  animation-delay: 0.38s;
}

.hero-divider {
  width: 44px;
  height: 1.5px;
  background: var(--senf);
  margin: 0 auto 24px;                   /* Divider → Sub: MITTEL */
  transform-origin: center;
  animation: divider-in 1s var(--ease-out) both;
  animation-delay: 0.55s;
}

.hero-sub {
  max-width: 56ch;
  margin: 0 auto 40px;                   /* Sub → CTAs: WEIT */
  color: var(--grey);
  font-weight: 400;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
  line-height: 1.65;
  text-wrap: pretty;
  animation: fade-up 1s var(--ease-out) both;
  animation-delay: 0.7s;
}

.hero-cta {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  gap: 12px;
  animation: fade-up 1s var(--ease-out) both;
  animation-delay: 0.84s;
}
.hero-cta .btn { width: 100%; }

/* Mobile-only: CTA-Block wird im Flex-Parent (.hero-content) ans Ende gepusht.
   Außerdem: Kontaktformular-Button (btn-text) bekommt hellen Text + voll-breiten
   Streifen für bessere Lesbarkeit über dem Hero-Bild und gleiche Breite wie der
   Senf-Button darüber. */
@media (max-width: 559px) {
  .hero-cta { margin-top: auto; }
  .hero-cta .btn-text { color: var(--bg); }
  .hero-cta .btn-text::after {
    background: var(--bg);
    left: 0;
    right: 0;
  }
  .hero-cta .btn-text:hover,
  .hero-cta .btn-text:focus-visible { color: var(--senf-soft); }
  .hero-cta .btn-text:hover::after,
  .hero-cta .btn-text:focus-visible::after { background: var(--senf-soft); }
}

/* Animationen */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes divider-in {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

/* ===============================================================
   Hero — Tablet (≥ 560px)
   =============================================================== */
@media (min-width: 560px) {
  .hero {
    padding: 64px 28px 72px;
  }
  .hero-heading { margin-bottom: 30px; }
  .hero-title {
    font-size: clamp(3rem, 7.5vw, 4.2rem);
    margin-bottom: 8px;
  }
  .hero-tagline {
    font-size: clamp(1.4rem, 3.6vw, 1.85rem);
  }
  .hero-divider {
    width: 52px;
    margin-bottom: 30px;
  }
  .hero-sub {
    font-size: clamp(1rem, 1.7vw, 1.1rem);
    margin-bottom: 48px;
  }
  .hero-cta {
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    max-width: none;
    justify-content: center;
    gap: 16px;
  }
  .hero-cta .btn { width: auto; }

  .hero-mountains-back {
    display: block;
    bottom: 28px;
    opacity: 0.06;
    height: 180px;
  }
  .hero-mountains-front {
    height: 200px;
    opacity: 0.09;
  }
}

/* ===============================================================
   Hero — Desktop (≥ 980px) · Cinematic Side Gradient
   Bild bleibt full-bleed, Off-White-Schleier verläuft von links nach rechts,
   Text sitzt linksbündig auf der hellen Seite, Bild rechts unverdeckt.
   =============================================================== */
@media (min-width: 980px) {
  .hero {
    min-height: clamp(620px, 88svh, 880px);
    padding: 88px 32px 96px;
  }
  /* Cinematic-Overlay: seitlicher Gradient (links 96 % → rechts 0 %) */
  .hero--cinematic .cine-overlay {
    background:
      linear-gradient(100deg,
        rgba(253,253,253,0.98) 0%,
        rgba(253,253,253,0.92) 22%,
        rgba(253,253,253,0.55) 50%,
        rgba(253,253,253,0.12) 82%,
        rgba(253,253,253,0.00) 100%);
  }
  /* Inhalt linksbündig in der hellen Zone */
  .hero-inner {
    max-width: 1320px;
    text-align: left;
  }
  .hero-content { max-width: 54ch; }
  .hero-heading { margin-bottom: 36px; }
  .hero-title {
    font-size: clamp(3.4rem, 5.6vw, 5rem);
    letter-spacing: -0.018em;
    margin-bottom: 10px;
    line-height: 1.05;
  }
  .hero-tagline {
    font-size: clamp(1.5rem, 2.2vw, 2rem);
  }
  .hero-divider {
    width: 56px;
    margin: 0 0 36px;                    /* linksbündig */
  }
  .hero-sub {
    font-size: clamp(1.05rem, 1.3vw, 1.15rem);
    margin: 0 0 48px;
    max-width: 50ch;
  }
  .hero-cta {
    justify-content: flex-start;
    margin: 0;
    gap: 18px;
  }

  .hero-mountains-back {
    bottom: 32px;
    opacity: 0.07;
    height: 240px;
  }
  .hero-mountains-front {
    height: 260px;
    opacity: 0.10;
  }
}

/* ===============================================================
   SEKTION 3 — Trust-Strip
   Schmale, ruhige Vertrauenszeile direkt unter dem Hero
   Mobile: 2×2 Grid · Tablet+: einzeilig mit Senf-Dots zwischen Items
   =============================================================== */
.trust-strip {
  background: var(--navy);
  border-top: 1px solid var(--navy-dark);
  border-bottom: 1px solid var(--navy-dark);
  padding: 22px 22px;
}

.trust-list {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;                         /* Mobile: 2×2 */
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
  text-align: center;
}

.trust-item {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bg);                  /* Off-White auf Navy */
  line-height: 1.3;
  padding: 2px 0;
  position: relative;
}

/* Tablet (≥ 560px): bleibt 2×2 Grid, nur etwas mehr Atemraum */
@media (min-width: 560px) {
  .trust-strip { padding: 26px 28px; }
  .trust-list { gap: 16px 24px; }
  .trust-item {
    font-size: 0.78rem;
    letter-spacing: 0.22em;
  }
}

/* Großer Desktop (≥ 1100px): einzeilig mit Senf-Dots — erst hier garantiert genug Platz für „Persönlicher Ansprechpartner" */
@media (min-width: 1100px) {
  .trust-strip { padding: 30px 32px; }
  .trust-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px 48px;
  }
  .trust-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -26px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 3px;
    background: var(--senf-soft);   /* heller Senf-Dot auf Navy */
    border-radius: 50%;
  }
}

/* Trust-Item als Link (Empfohlen-Item mit Stern, klickbar zur Referenz) */
.trust-item-link a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.18s var(--ease-out);
}
.trust-item-link a:hover,
.trust-item-link a:focus-visible { color: var(--senf-soft); outline: none; }
.trust-star {
  color: var(--senf-soft);           /* heller Senf, leuchtet auf Navy */
  flex: none;
  transition: transform 0.2s var(--ease-out);
}
.trust-item-link a:hover .trust-star { transform: rotate(72deg); }

/* ===============================================================
   SEKTION 4 — Findability („Damit Sie gefunden werden")
   3 nummerierte Tiles für die Sichtbarkeits-Disziplinen + UWG-Disclaimer
   Mobile-First, editorial linksbündig
   =============================================================== */
.findability {
  background: var(--bg);
  padding: 72px 22px;
}

.findability-inner {
  max-width: 1180px;
  margin: 0 auto;
}

/* Section-Header (Title + Intro) — wiederverwendbar für alle folgenden Sektionen */
.section-header {
  margin-bottom: 48px;
  max-width: 64ch;
}

.section-title {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--navy);
  font-size: clamp(2rem, 6.5vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.012em;
  margin: 0 0 18px;
  text-wrap: balance;
}

.section-intro {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  line-height: 1.4;
  margin: 0;
  opacity: 0.88;
  max-width: 56ch;
  text-wrap: pretty;
}

/* Tiles-Grid */
.findability-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  margin-bottom: 56px;
}

.findability-tile {
  border-top: 1px solid var(--line);
  padding-top: 26px;
}

.tile-number {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--senf-link);          /* BFSG-konformer Senf-Ton */
  margin-bottom: 10px;
  line-height: 1;
}

.tile-title {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--navy);
  font-size: 1.4rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
}

.tile-body {
  color: var(--text);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
  max-width: 50ch;
}

/* UWG-Disclaimer — italic Cormorant, mittig, dezenter Abschluss */
.findability-disclaimer {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--grey);
  font-size: clamp(0.95rem, 1.6vw, 1.08rem);
  line-height: 1.5;
  margin: 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  text-align: center;
  text-wrap: balance;
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
}

/* Tablet (≥ 760px) — 3-Spalten-Grid */
@media (min-width: 760px) {
  .findability { padding: 96px 32px; }
  .section-header { margin-bottom: 64px; }
  .findability-tiles {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 64px;
  }
  .findability-tile { padding-top: 30px; }
  .tile-number {
    font-size: 1.75rem;
    margin-bottom: 14px;
  }
  .tile-title {
    font-size: 1.5rem;
    margin-bottom: 16px;
  }
}

/* Desktop (≥ 1024px) */
@media (min-width: 1024px) {
  .findability { padding: 112px 32px; }
  .section-header { margin-bottom: 80px; }
  .findability-tiles {
    gap: 40px;
    margin-bottom: 80px;
  }
  .tile-number { font-size: 2rem; }
  .tile-title { font-size: 1.65rem; }
}

/* ===============================================================
   SEKTION 5 — Pain ↔ Lösung (Light Editorial Spread)
   Light Background · Pain links · Lösung rechts · Senf-Vertikal-Divider mittig
   Beide Spalten TOP-aligned · kompaktere Spacings als die Navy-Version
   Mobile: gestapelt mit kurzer Senf-Hairline zwischen Pain und Lösung
   =============================================================== */
/* SEKTION 5 — Klingt das vertraut? (Sprechblasen-Magazin-Layout) */
.pain-solution {
  background: var(--bg);
  padding: 80px 22px;
}
.ps-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.ps-header {
  margin-bottom: 56px;
  text-align: center;
}
.ps-eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--senf-link);
  margin: 0 0 14px;
}
.ps-section-title {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--navy);
  font-size: clamp(2.2rem, 7vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.014em;
  margin: 0;
  text-wrap: balance;
}
.ps-section-title em {
  font-style: italic;
  color: var(--senf-link);
}

.ps-pairs {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* Ein Paar = Pain-Sprechblase + Lösung mit Senf-Verbindung */
.ps-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  position: relative;
}

/* Sprechblase um den Pain-Quote */
.ps-pain-wrap {
  position: relative;
  background: var(--bg-warm);
  border-radius: 18px 18px 18px 4px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  max-width: 540px;
  width: fit-content;
}
/* Sprechblasen-Pfeil unten links */
.ps-pain-wrap::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 22px;
  width: 18px;
  height: 18px;
  background: var(--bg-warm);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
  border-radius: 0 0 4px 0;
}
.ps-pain {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(1.2rem, 2.8vw, 1.55rem);
  line-height: 1.4;
  margin: 0;
  text-wrap: pretty;
  position: relative;
}

/* Lösung darunter, mit Einrückung und Senf-Markierung */
.ps-solution {
  position: relative;
  padding: 4px 0 4px 28px;
  border-left: 2px solid var(--senf);
  max-width: 540px;
  margin-left: 24px;
}
.ps-solution-title {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--navy);
  font-size: clamp(1.2rem, 2.6vw, 1.45rem);
  line-height: 1.2;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.ps-solution-body {
  color: var(--text);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
}

/* Desktop (≥ 880px) — Magazin-Layout: links/rechts alternierend */
@media (min-width: 880px) {
  .pain-solution { padding: 112px 32px; }
  .ps-pairs { gap: 72px; }
  .ps-pair {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
  }
  .ps-pair-left .ps-pain-wrap { grid-column: 1; justify-self: start; }
  .ps-pair-left .ps-solution  { grid-column: 2; justify-self: start; }
  .ps-pair-right .ps-pain-wrap { grid-column: 2; justify-self: end; border-radius: 18px 18px 4px 18px; }
  .ps-pair-right .ps-pain-wrap::after {
    left: auto; right: 22px;
    border-right: none; border-bottom: 1px solid var(--line);
    border-left: 1px solid var(--line);
    border-radius: 0 0 0 4px;
  }
  .ps-pair-right .ps-solution {
    grid-column: 1; grid-row: 1;
    justify-self: end;
    text-align: right;
    border-left: none;
    border-right: 2px solid var(--senf);
    padding: 4px 28px 4px 0;
    margin-left: 0;
    margin-right: 24px;
  }
}
@media (min-width: 1024px) {
  .pain-solution { padding: 128px 32px; }
}

/* ===============================================================
   SEKTION 7 — DEMO-PHASE: Drei Prozess-Varianten
   =============================================================== */

/* Demo-Strip aus Sektion-5-Demo wiederverwenden */
.demo-strip {
  background: var(--senf);
  color: #fff;
  padding: 11px 22px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────────
   SEKTION 7 — Horizontale Roadmap auf Dark Navy
   5 Stationen mit Senf-soft Verbindungslinie
   Mobile: vertikale Timeline mit Senf-soft Vertikalstrich
   ───────────────────────────────────────────────────────────────── */
.pv2n-section {
  background: var(--navy);
  color: #FAF8F2;
  padding: 72px 22px;
}
.pv2n-inner {
  max-width: 1180px;
  margin: 0 auto;
}
.pv2n-header {
  margin-bottom: 48px;
  max-width: 60ch;
}
.pv2n-section-title {
  font-family: var(--serif);
  font-weight: 500;
  color: #FAF8F2;
  font-size: clamp(2rem, 6.5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.012em;
  margin: 0 0 14px;
  text-wrap: balance;
}
.pv2n-dot {
  color: var(--senf-soft);
  font-weight: 600;
}
.pv2n-section-intro {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--senf-soft);
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  margin: 0;
  opacity: 0.95;
}
.pv2n-roadmap {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.pv2n-station {
  position: relative;
  padding: 22px 0 22px 60px;
}
.pv2n-station::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 32px;
  bottom: -22px;
  width: 1px;
  background: var(--senf-soft);
  opacity: 0.45;
}
.pv2n-station:last-child::before { display: none; }
.pv2n-marker {
  position: absolute;
  left: 0;
  top: 12px;
  width: 42px;
  height: 42px;
  background: var(--navy);
  border: 1.5px solid var(--senf-soft);
  border-radius: 50%;
  display: grid;
  place-items: center;
  z-index: 1;
}
.pv2n-marker-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--senf-soft);
}
.pv2n-title {
  font-family: var(--serif);
  font-weight: 500;
  color: #FAF8F2;
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 0 0 6px;
  text-wrap: balance;
}
.pv2n-body {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 400;
  font-size: 0.97rem;
  line-height: 1.6;
  margin: 0;
}

@media (min-width: 900px) {
  .pv2n-section { padding: 104px 32px; }
  .pv2n-roadmap {
    flex-direction: row;
    justify-content: space-between;
    gap: 24px;
    margin-top: 16px;
  }
  .pv2n-roadmap::before {
    content: '';
    position: absolute;
    top: 21px;
    left: 8%;
    right: 8%;
    height: 1px;
    background: var(--senf-soft);
    opacity: 0.45;
  }
  .pv2n-station {
    flex: 1;
    padding: 0;
    text-align: center;
  }
  .pv2n-station::before { display: none; }
  .pv2n-marker {
    position: relative;
    margin: 0 auto 18px;
    top: 0;
    left: 0;
  }
  .pv2n-title { font-size: 1.15rem; margin-bottom: 8px; }
  .pv2n-body { font-size: 0.92rem; max-width: 22ch; margin: 0 auto; }
}

@media (min-width: 1100px) {
  .pv2n-title { font-size: 1.25rem; }
  .pv2n-body { font-size: 0.97rem; max-width: 24ch; }
}

/* ===============================================================
   SEKTION 8 — Pakete & Wartung (Drei Wandel)
   3 Karten · Decoy/Empfohlen/Anker · Senf-Akzent auf Empfohlen
   Mobile: gestapelt · Tablet+: 3 Spalten side-by-side
   =============================================================== */
.packages {
  background: var(--bg);
  padding: 64px 22px;
}

.packages-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.packages-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 8px;
}

/* Einzelne Paket-Karte */
.package {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 32px 28px 36px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}

.package:hover {
  border-color: rgba(194, 138, 44, 0.35);
  box-shadow: 0 8px 28px rgba(27, 46, 84, 0.06);
}

/* Empfohlen-Karte */
.package-featured {
  border: 1.5px solid var(--senf);
  box-shadow: 0 12px 36px rgba(27, 46, 84, 0.08);
}

.package-featured:hover {
  border-color: var(--senf-hover);
  box-shadow: 0 16px 44px rgba(27, 46, 84, 0.10);
}

/* Empfohlen-Badge */
.package-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--senf);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: 100px;
  white-space: nowrap;
}

/* Kicker (Nummer + Kategorie) */
.package-kicker {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}

.package-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  color: var(--senf-link);
}

.package-cat {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey);
}

/* Paket-Name */
.package-name {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--navy);
  font-size: 1.55rem;
  line-height: 1.15;
  letter-spacing: -0.008em;
  margin: 0 0 18px;
}

/* Einmalig-Label */
.package-label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0 0 4px;
}

/* Preis */
.package-price {
  font-family: var(--serif);
  color: var(--navy);
  margin: 0 0 26px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.price-num {
  font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 3rem);
  line-height: 1;
  letter-spacing: -0.015em;
}

.price-unit {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--grey);
  letter-spacing: 0.02em;
}

/* Feature-Liste */
.package-features {
  list-style: none;
  margin: 0;
  padding: 0;
}

.package-features li {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
  padding: 6px 0 6px 22px;
  position: relative;
}

.package-features li::before {
  content: '›';
  position: absolute;
  left: 0;
  top: 5px;
  color: var(--senf-link);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1;
}

/* Wartung-Block (innerhalb der Karte) */
.package-wartung {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px dashed var(--line);
}

.package-wartung-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
}

.package-wartung-label {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey);
}

.package-wartung-incl {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--senf-link);
  background: rgba(194, 138, 44, 0.10);
  padding: 4px 9px;
  border-radius: 100px;
  border: 1px solid rgba(194, 138, 44, 0.35);
}

.package-wartung-price {
  font-family: var(--serif);
  color: var(--navy);
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.package-wartung-price .price-num {
  font-size: 1.5rem;
}

.package-wartung-price .price-unit {
  font-size: 0.82rem;
}

/* Geeignet-für-Block (am Boden) */
.package-target {
  margin-top: auto;
  padding-top: 26px;
  border-top: 1px dashed var(--line);
}

.package-target-label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0 0 6px;
}

.package-target-text {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.5;
  margin: 0;
}

/* Tablet (≥ 760px) — bleibt bewusst 1-spaltig gestapelt, bis 3 Karten nebeneinander passen (≥ 980px) */
@media (min-width: 760px) {
  .packages { padding: 88px 32px; }
  .packages-grid {
    gap: 32px;
    margin-top: 20px;
  }
}

/* Desktop (≥ 980px) — 3 Spalten side-by-side */
@media (min-width: 980px) {
  .packages { padding: 104px 32px; }
  .packages-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 28px;
    align-items: start;
    max-width: none;
  }
  .packages-grid .package:nth-child(3) {
    grid-column: auto;
    max-width: none;
    justify-self: stretch;
  }
  .package { padding: 36px 30px 38px; }
  .package-featured {
    transform: translateY(-12px);
  }
  .package-name { font-size: 1.65rem; }
}

/* ─────────────────────────────────────────────────────────────────
   VERSION B — Senf-Tinted Fill + größere Elevation + Scale
   Modifier-Klasse, baut auf .package-featured auf.
   Box-Shadow ist Navy-getönt (NICHT Senf), damit der Senf-Ton strikt
   innerhalb der Border bleibt und nicht in den Spalt zwischen den
   Karten blutet.
   ───────────────────────────────────────────────────────────────── */
.package-featured-fill {
  background: linear-gradient(180deg,
    rgba(194, 138, 44, 0.08) 0%,
    rgba(194, 138, 44, 0.025) 100%);
  border-width: 2px;
  box-shadow: 0 20px 56px rgba(27, 46, 84, 0.12);
}
.package-featured-fill:hover {
  box-shadow: 0 24px 64px rgba(27, 46, 84, 0.16);
}
@media (min-width: 980px) {
  .package-featured-fill {
    transform: translateY(-20px) scale(1.03);
    transform-origin: center top;
  }
}

/* (Version C — Navy-Inversion — wurde verworfen und entfernt) */

/* ===============================================================
   SEKTION 9 — Über mich (Founder Story)
   Editorial 2-Spalten: Foto links (sticky), Text rechts
   Hintergrund Section-Beige (Alternation gegen helles Pakete-Bg)
   =============================================================== */
.founder {
  background: var(--section);
  padding: 64px 22px;
}

.founder-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.founder-header {
  margin-bottom: 40px;
  max-width: 64ch;
}

.founder-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}

/* Foto-Block */
.founder-portrait {
  margin: 0;
}

.founder-portrait-frame {
  aspect-ratio: 4 / 5;
  background: var(--bg);
  border: 1.5px solid var(--senf);
  border-radius: 8px;
  display: grid;
  place-items: center;
  max-width: 380px;
  margin: 0 auto;
  overflow: hidden;                 /* Bild folgt Border-Radius */
}
.founder-portrait-frame picture,
.founder-portrait-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.founder-portrait-text {
  font-family: var(--serif);
  font-style: italic;
  color: var(--grey);
  font-size: 1.1rem;
}

.founder-caption {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 16px 0 0;
  text-align: center;
}

/* Text-Block */
.founder-text {
  /* Grid-Item */
}

.founder-intro {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  line-height: 1.5;
  color: var(--navy);
  margin: 0 0 18px;
  opacity: 0.92;
  text-wrap: pretty;
}

.founder-bridge {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  color: var(--navy);
  margin: 0 0 32px;
  line-height: 1.4;
}

.founder-principles {
  display: flex;
  flex-direction: column;
}

.founder-principle {
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.founder-principle:first-child {
  padding-top: 4px;
  border-top: 0;
}

.founder-principle-title {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--navy);
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0 0 8px;
  text-wrap: balance;
}

.founder-principle-body {
  color: var(--text);
  font-weight: 400;
  font-size: 0.97rem;
  line-height: 1.6;
  margin: 0;
}

/* Schwäbisches Sprichwort am Ende */
.founder-quote {
  margin: 38px 0 0;
  padding: 26px 0 0;
  border-top: 1.5px solid var(--senf);
}

.founder-quote-text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  line-height: 1.3;
  color: var(--navy);
  margin: 0 0 10px;
  text-wrap: balance;
}

.founder-quote-source {
  font-family: var(--sans);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--grey);
  margin: 0;
}

/* Tablet (≥ 760px) — 2-Spalten editorial */
@media (min-width: 760px) {
  .founder { padding: 88px 32px; }
  .founder-header { margin-bottom: 56px; }
  .founder-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 56px;
    align-items: start;
  }
  .founder-portrait-frame { max-width: none; }
  .founder-principle-title { font-size: 1.3rem; }
  .founder-principle-body { font-size: 1rem; }
}

/* Desktop (≥ 1024px) — Foto sticky beim Scrollen */
@media (min-width: 1024px) {
  .founder { padding: 112px 32px; }
  .founder-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 80px;
  }
  .founder-portrait {
    position: sticky;
    top: 110px;
  }
  .founder-principle-title { font-size: 1.4rem; }
}

/* ===============================================================
   SEKTION 10 — Referenzen
   4 Karten 2×2: 1 real + 3 Beispielprojekte
   Echte Karte: Screenshot + Zitat · Demo-Karten: Placeholder + Note
   =============================================================== */
.refs {
  background: var(--bg);
  padding: 64px 22px;
}

.refs-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.refs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 8px;
  align-items: start;
}

/* Einzelkarte */
.ref-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}

.ref-card-real:hover {
  border-color: rgba(194, 138, 44, 0.45);
  box-shadow: 0 12px 32px rgba(27, 46, 84, 0.08);
  transform: translateY(-2px);
}

/* Screenshot-Container */
.ref-screenshot {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--section);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.ref-screenshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .6s var(--ease-out);
}

.ref-card-real .ref-screenshot:hover img {
  transform: scale(1.02);
}

/* Demo-Placeholder (Browser-Frame-Hint) */
.ref-screenshot-placeholder {
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, var(--section) 0%, var(--bg-warm) 100%);
}
.ref-screenshot-placeholder::before {
  /* Drei Senf-Dots oben links als Browser-Hint */
  content: '';
  position: absolute;
  top: 16px;
  left: 16px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--senf);
  opacity: 0.4;
  box-shadow:
    18px 0 0 rgba(194, 138, 44, 0.25),
    36px 0 0 rgba(194, 138, 44, 0.15);
}
.ref-placeholder-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--grey);
  letter-spacing: 0.01em;
}

/* Meta-Block */
.ref-meta {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ref-tag {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 10px;
}

.ref-tag-real {
  color: var(--senf-link);
}

.ref-name {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--navy);
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 0 0 6px;
  text-wrap: balance;
}

.ref-url {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--grey);
  margin: 0 0 14px;
  font-weight: 400;
}
.ref-url a {
  color: var(--senf-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.ref-url a:hover { border-bottom-color: var(--senf-link); }

.ref-note {
  font-family: var(--sans);
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--grey);
  margin: 0;
}

/* Zitat (nur bei Caglar) */
.ref-quote {
  margin: 14px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
}
.ref-quote-text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--navy);
  font-size: 1.02rem;
  line-height: 1.5;
  margin: 0 0 8px;
  text-wrap: pretty;
}
.ref-quote-source {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--grey);
}

/* Tablet (≥ 760px) — 2×2 Grid */
@media (min-width: 760px) {
  .refs { padding: 88px 32px; }
  .refs-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 20px;
  }
  .ref-meta { padding: 24px 28px 28px; }
  .ref-name { font-size: 1.4rem; }
  .ref-quote-text { font-size: 1.05rem; }
}

/* Desktop (≥ 1024px) */
@media (min-width: 1024px) {
  .refs { padding: 112px 32px; }
  .refs-grid {
    gap: 32px;
    margin-top: 28px;
  }
  .ref-meta { padding: 26px 30px 30px; }
  .ref-name { font-size: 1.5rem; }
}

/* ===============================================================
   Platzhalter-Markierung — sichtbar für den User wo er ergänzen muss
   =============================================================== */
.todo {
  background: rgba(194, 138, 44, 0.12);
  border-bottom: 1px dashed var(--senf);
  padding: 0 4px;
  color: var(--senf-link);
  font-style: normal;
  border-radius: 2px;
}

/* ===============================================================
   SEKTION 11 — Handschlag-Versprechen (Manifest-Stil)
   Senf-Häkchen + Versprechen-Liste + Signatur am Ende
   =============================================================== */
/* SEKTION 11 — Mein Handschlag (Manifest-Layout, Navy-Sektion) */
.promise {
  background: var(--navy);
  color: #FAF8F2;
  padding: 80px 22px;
}
.promise-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
.promise-eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--senf-soft);
  margin: 0 0 14px;
}
.promise-h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 7vw, 3rem);
  line-height: 1.05;
  color: #FAF8F2;
  margin: 0 0 28px;
  letter-spacing: -0.01em;
}
.promise-lead {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  line-height: 1.5;
  color: var(--senf-soft);
  margin: 0 0 40px;
  max-width: 32ch;
}

.promise-trio {
  list-style: none;
  padding: 0;
  margin: 0 0 48px;
  display: grid;
  gap: 32px;
  counter-reset: promise-counter;
}
.promise-trio li {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 18px;
  align-items: start;
}
.promise-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1;
  color: var(--senf-soft);
  padding-top: 4px;
}
.promise-trio h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
  line-height: 1.25;
  color: #FAF8F2;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.promise-trio p {
  font-size: 0.97rem;
  line-height: 1.65;
  color: rgba(250, 248, 242, 0.78);
  margin: 0;
  max-width: 56ch;
}

.promise-signature-block {
  padding-top: 24px;
  border-top: 1.5px solid var(--senf);
}
.promise-signature-hand {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.2rem;
  color: rgba(250, 248, 242, 0.70);
  margin: 0 0 6px;
}
.promise-signature-name {
  font-family: var(--serif);
  font-weight: 600;
  font-style: normal;
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--senf-soft);
  margin: 0 0 4px;
  letter-spacing: -0.005em;
}
.promise-signature-sub {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 248, 242, 0.55);
  margin: 8px 0 0;
}

/* Rechts: Foto-Spalte (auf Desktop) */
.promise-photo {
  position: relative;
}
.promise-photo-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid rgba(250, 248, 242, 0.18);
}
.promise-photo-frame picture,
.promise-photo-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 40%;
}
.promise-photo-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 60%, rgba(194, 138, 44, 0.12) 100%);
  border: 1px solid rgba(250, 248, 242, 0.18);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.promise-photo-placeholder::before {
  content: '';
  position: absolute;
  inset: 16px;
  border: 1px dashed var(--senf-soft);
  opacity: 0.45;
  pointer-events: none;
}
.promise-photo-caption {
  font-family: var(--serif);
  font-style: italic;
  color: var(--senf-soft);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  opacity: 0.85;
}
/* Senf-Akzent-Box hinter dem Foto */
.promise-photo::before {
  content: '';
  position: absolute;
  bottom: -16px;
  right: -16px;
  width: 60%;
  height: 50%;
  background: var(--senf);
  opacity: 0.92;
  z-index: 0;
}
.promise-mountains {
  position: absolute;
  bottom: -64px;
  left: -16px;
  width: 220px;
  height: 46px;
  color: var(--senf-soft);
  opacity: 0.40;
  pointer-events: none;
}

/* Desktop: 2-Spalten-Layout */
@media (min-width: 880px) {
  .promise { padding: 112px 32px; }
  .promise-grid {
    grid-template-columns: 1.15fr 1fr;
    gap: 80px;
    align-items: start;
  }
  .promise-photo { position: sticky; top: 120px; }
}
@media (min-width: 1024px) {
  .promise { padding: 128px 32px 144px; }
}

/* ===============================================================
   SEKTION 12 — Scarcity (subtil)
   Einzeiler in editorial-italic, mit Senf-Highlight auf der Schlüsselzahl
   =============================================================== */
.scarcity {
  background: var(--bg);
  padding: 40px 22px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.scarcity-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.scarcity-text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.5;
  margin: 0;
  opacity: 0.92;
  text-wrap: balance;
}
.scarcity-highlight {
  font-style: normal;
  font-weight: 500;
  color: var(--senf-link);
  border-bottom: 1.5px solid var(--senf);
  padding-bottom: 1px;
}
@media (min-width: 760px) {
  .scarcity { padding: 56px 32px; }
}

/* ===============================================================
   SEKTION 13 — Final CTA (Peak-End)
   Großer, warmer Schluss · Berg-SVG als Bogen zum Hero
   =============================================================== */
/* SEKTION 13 — Final CTA (Peak-End, emotional) */
.final-cta {
  background:
    radial-gradient(ellipse 90% 80% at 50% 100%, var(--bg-warm) 0%, var(--bg) 60%);
  padding: 96px 22px 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta-inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.final-cta-eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--senf-link);
  margin: 0 0 18px;
}
.final-cta-title {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--navy);
  font-size: clamp(2.4rem, 7vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 0 0 24px;
  text-wrap: balance;
}
.final-cta-title em {
  font-style: italic;
  color: var(--senf-link);
}
.final-cta-text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.55;
  margin: 0 auto 48px;
  opacity: 0.92;
  max-width: 48ch;
  text-wrap: balance;
}

.final-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}
.btn-xl {
  font-size: 1.05rem;
  padding: 18px 36px;
  gap: 12px;
}
.btn-xl .btn-icon { width: 22px; height: 22px; }

.final-cta-phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 8px;
  transition: background 0.18s ease;
}
.final-cta-phone:hover { background: rgba(194, 138, 44, 0.08); }
.final-cta-phone .phone-label {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.final-cta-phone .phone-number {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--navy);
  letter-spacing: 0.005em;
}

/* Berg-Silhouette als Hintergrund-Wasserzeichen unten */
.final-cta-mountains {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: var(--navy);
  opacity: 0.10;
  pointer-events: none;
  width: clamp(320px, 50vw, 540px);
  height: auto;
}

@media (min-width: 760px) {
  .final-cta { padding: 128px 32px 96px; }
  .final-cta-actions { gap: 20px; }
}
@media (min-width: 1024px) {
  .final-cta { padding: 144px 32px 112px; }
}

/* ===============================================================
   SEKTION 14 — FAQ (details/summary native accordion)
   =============================================================== */
.faq {
  background: var(--bg);
  padding: 64px 22px;
}
.faq-inner {
  max-width: 880px;
  margin: 0 auto;
}
/* FAQ-Gruppierung (3 Cluster: Kosten · Ablauf · Region/Technik) */
.faq-group {
  margin-top: 48px;
}
.faq-group:first-of-type { margin-top: 16px; }
.faq-group-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--navy);
  margin: 0 0 8px;
  letter-spacing: -0.005em;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--senf);
}
.faq-group-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--senf-link);
  letter-spacing: 0.02em;
}

.faq-list {
  margin-top: 0;
}
.faq-item {
  border-top: 1px solid var(--line);
}
.faq-group .faq-item:first-child { border-top: 0; }
.faq-group .faq-item:last-child {
  border-bottom: 0;
}
.faq-item + .faq-item {}
.faq-question {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--navy);
  font-size: 1.15rem;
  line-height: 1.35;
  padding: 22px 44px 22px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: color .25s var(--ease-out);
  text-wrap: balance;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--senf-link);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  transition: transform .3s var(--ease-out), color .25s var(--ease-out);
}
.faq-item[open] .faq-question::after {
  transform: translateY(-50%) rotate(45deg);
}
.faq-question:hover {
  color: var(--senf-link);
}
.faq-answer {
  padding: 0 44px 24px 0;
}
.faq-answer p {
  color: var(--text);
  font-weight: 400;
  font-size: 0.98rem;
  line-height: 1.7;
  margin: 0;
  max-width: 64ch;
}
.faq-answer p + p { margin-top: 12px; }
.faq-answer strong {
  color: var(--navy);
  font-weight: 600;
}
.faq-bullets {
  list-style: none;
  margin: 14px 0;
  padding: 0;
  max-width: 64ch;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-bullets li {
  color: var(--text);
  font-weight: 400;
  font-size: 0.98rem;
  line-height: 1.7;
  padding-left: 22px;
  position: relative;
}
.faq-bullets li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.75em;
  width: 8px;
  height: 1px;
  background: var(--senf-link);
}
@media (min-width: 760px) {
  .faq-bullets li { font-size: 1rem; }
}
@media (min-width: 760px) {
  .faq { padding: 96px 32px; }
  .faq-question { font-size: 1.3rem; padding: 28px 56px 28px 0; }
  .faq-answer { padding: 0 56px 28px 0; }
  .faq-answer p { font-size: 1rem; }
}

/* ===============================================================
   SEKTION 15 — Kontakt (3 Karten + Formular)
   =============================================================== */
.contact {
  background: var(--section);
  padding: 64px 22px;
}
.contact-inner {
  max-width: 1180px;
  margin: 0 auto;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 8px 0 40px;
}

/* Kontakt-Karte */
.contact-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}
.contact-card:hover {
  border-color: rgba(194, 138, 44, 0.45);
  box-shadow: 0 8px 24px rgba(27, 46, 84, 0.08);
  transform: translateY(-2px);
}
.contact-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(194, 138, 44, 0.10);
  color: var(--senf-link);
  margin-bottom: 6px;
}
.contact-card-title {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--navy);
  font-size: 1.3rem;
  margin: 0;
  letter-spacing: -0.005em;
}
.contact-card-number {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--navy);
  margin: 0;
}
.contact-card-text {
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
.contact-card-cta {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  color: var(--senf-link);
  margin-top: 8px;
}

/* WhatsApp-Karte (Brand-bevorzugter Kanal — größer, prominenter) */
.contact-card-wa {
  background:
    linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  border-color: var(--navy);
  color: var(--bg);
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
}
.contact-card-wa::after {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 50%; height: 100%;
  background: radial-gradient(ellipse, rgba(194, 138, 44, 0.20) 0%, transparent 60%);
  pointer-events: none;
}
.contact-card-wa:hover {
  border-color: var(--senf);
  box-shadow: 0 16px 40px rgba(27, 46, 84, 0.25);
  transform: translateY(-3px);
}
.contact-card-wa-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
.contact-card-wa .contact-icon-wa {
  background: rgba(255, 255, 255, 0.12);
  color: var(--senf-soft);
  width: 56px;
  height: 56px;
  margin: 0;
}
.contact-card-recommended {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--senf-soft);
  background: rgba(194, 138, 44, 0.18);
  padding: 5px 12px;
  border-radius: 999px;
  flex: none;
  white-space: nowrap;
}
.contact-card-wa .contact-card-title {
  color: var(--bg);
  font-size: 2rem;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}
.contact-card-wa .contact-card-text {
  color: rgba(253, 253, 253, 0.80);
  font-size: 1rem;
  max-width: 40ch;
  position: relative;
  z-index: 1;
}
.contact-card-wa .contact-card-cta {
  color: var(--senf-soft);
  font-size: 0.95rem;
  position: relative;
  z-index: 1;
}

/* Sekundär-Stack: Telefon + Formular */
.contact-secondary {
  display: grid;
  gap: 14px;
}
.contact-card-sm {
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 22px;
}
.contact-card-sm .contact-icon {
  width: 40px;
  height: 40px;
  flex: none;
  margin: 4px 0 0;
}
.contact-card-sm > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.contact-card-sm .contact-card-title {
  font-size: 1.1rem;
}
.contact-card-sm .contact-card-number {
  font-size: 1.05rem;
  margin: 2px 0 4px;
}
.contact-card-sm .contact-card-text {
  font-size: 0.88rem;
}
.contact-card-sm .contact-card-cta {
  font-size: 0.82rem;
  margin-top: 4px;
}

/* Persönliche Trennzeile zwischen Karten und Formular */
.contact-personal {
  text-align: center;
  margin: 0 auto 56px;
  max-width: 560px;
  padding: 0 12px;
}
.contact-personal-text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  line-height: 1.5;
  color: var(--navy);
  margin: 0 0 10px;
  text-wrap: balance;
}
.contact-personal-text em {
  color: var(--senf-link);
  font-weight: 500;
}
.contact-personal-sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink-soft);
  margin: 0;
  letter-spacing: 0.02em;
}

/* Anschrift als Visitenkarte mit Regions-Skizze */
.contact-card-address {
  margin: 32px auto 0;
  max-width: 720px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 4px solid var(--senf);
  padding: 24px 28px;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
}
.contact-address-name {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--navy);
  margin: 0 0 4px;
}
.contact-address-line {
  font-size: 0.95rem;
  color: var(--text);
  margin: 0 0 10px;
}
.contact-address-radius {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}
.contact-address-region {
  color: var(--navy);
  opacity: 0.85;
  width: 100%;
  max-width: 220px;
  justify-self: center;
}

@media (min-width: 760px) {
  .contact-card-address {
    grid-template-columns: 1fr auto;
    gap: 36px;
  }
}

/* Kontaktformular */
.contact-form-wrap {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 32px 24px;
  max-width: 720px;
  margin: 0 auto;
}
.contact-form-header {
  margin-bottom: 28px;
}
.contact-form-title {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--navy);
  font-size: 1.45rem;
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}
.contact-form-intro {
  font-family: var(--serif);
  font-style: italic;
  color: var(--navy);
  font-size: 1rem;
  margin: 0;
  opacity: 0.85;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-row-check {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
}
.form-label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--navy);
  letter-spacing: 0.02em;
}
.form-optional {
  font-weight: 400;
  color: var(--grey);
  font-size: 0.78rem;
}
.form-input {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.97rem;
  line-height: 1.4;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
  min-height: 48px;     /* Touch-Target */
}
.form-input:focus {
  outline: none;
  border-color: var(--senf);
  box-shadow: 0 0 0 3px rgba(194, 138, 44, 0.15);
}
.form-textarea {
  font-family: var(--sans);
  resize: vertical;
  min-height: 140px;
}
.form-row-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--senf);
  flex-shrink: 0;
}
.form-row-check label {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.5;
}
.form-row-check a {
  color: var(--senf-link);
  text-decoration: none;
  border-bottom: 1px solid var(--senf);
}
.form-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.form-submit {
  margin-top: 6px;
  align-self: flex-start;
}
.contact-form-note {
  margin-top: 22px;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--grey);
  line-height: 1.55;
  text-align: center;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.contact-form-note strong { color: var(--navy); }

@media (min-width: 760px) {
  .contact { padding: 96px 32px; }
  .contact-grid {
    grid-template-columns: 1.4fr 1fr;     /* WhatsApp dominant, sekundär kompakt */
    gap: 18px;
    margin-bottom: 56px;
  }
  .contact-form-wrap { padding: 40px 36px; }
  .contact-form-title { font-size: 1.6rem; }
}
@media (min-width: 1024px) {
  .contact { padding: 120px 32px; }
  .contact-form-wrap { padding: 48px 44px; }
}

/* ===============================================================
   SEKTION 16 — Footer (Navy)
   =============================================================== */
.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.75);
  padding: 56px 22px 36px;
}
.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-logo {
  display: inline-block;
  line-height: 0;
}
.footer-logo img {
  height: 60px;          /* gleiche Größe wie im Desktop-Header */
  width: auto;
  display: block;
}
.footer-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 20px;
}
.footer-nav-col h4.footer-nav-heading {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--senf-soft);
  margin: 0 0 14px;
}
.footer-nav-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-nav-col a {
  font-family: var(--sans);
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color .2s ease;
}
.footer-nav-col a:hover {
  color: var(--senf-soft);
}
.footer-nav-col a .todo {
  background: rgba(224, 180, 95, 0.15);
  border-bottom-color: var(--senf-soft);
  color: var(--senf-soft);
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-copyright {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}
.footer-meta {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

@media (min-width: 760px) {
  .site-footer { padding: 72px 32px 40px; }
  .footer-inner {
    grid-template-columns: 1fr 2fr;
    gap: 48px;
  }
  .footer-nav {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer-bottom {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
  }
}

/* ===============================================================
   LEGAL PAGES — Impressum & Datenschutz (Long-Form-Text)
   Schmale Lesespalte, klare Hierarchie, editorial-ruhig
   =============================================================== */
.legal {
  background: var(--bg);
  padding: 48px 22px 88px;
}
.legal-inner {
  max-width: 720px;
  margin: 0 auto;
}
.legal-header {
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.legal-eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--senf-link);
  margin: 0 0 14px;
}
.legal-h1 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--navy);
  font-size: clamp(2.2rem, 6vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -0.014em;
  margin: 0 0 10px;
}
.legal-meta {
  font-family: var(--serif);
  font-style: italic;
  color: var(--navy);
  font-size: 1.05rem;
  margin: 0;
  opacity: 0.8;
}
.legal-section {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.legal-section:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.legal-h2 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--navy);
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
}
.legal-body {
  color: var(--text);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 14px;
}
.legal-body:last-child { margin-bottom: 0; }
.legal-body strong {
  color: var(--navy);
  font-weight: 600;
}
.legal-body a {
  color: var(--senf-link);
  text-decoration: none;
  border-bottom: 1px solid rgba(194, 138, 44, 0.4);
  transition: border-color .2s ease;
}
.legal-body a:hover { border-bottom-color: var(--senf-link); }
.legal-trade {
  font-family: var(--serif);
  font-style: italic;
  color: var(--navy);
  opacity: 0.85;
}
.legal-list {
  margin: 12px 0 14px;
  padding: 0 0 0 22px;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.7;
}
.legal-list li {
  margin: 6px 0;
  position: relative;
}
.legal-list li::marker {
  color: var(--senf);
}
.legal-note {
  font-family: var(--sans);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--grey);
  background: var(--section);
  padding: 14px 18px;
  border-left: 3px solid var(--senf);
  border-radius: 0 4px 4px 0;
  line-height: 1.55;
  margin: 14px 0;
}
.legal-stand {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--grey);
  margin: 48px 0 24px;
  padding-top: 28px;
  border-top: 1.5px solid var(--senf);
  text-align: center;
}
.legal-back {
  text-align: center;
  margin: 32px 0 0;
}
.legal-back a {
  font-family: var(--sans);
  font-weight: 500;
  color: var(--senf-link);
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .2s ease;
}
.legal-back a:hover { border-bottom-color: var(--senf-link); }

@media (min-width: 760px) {
  .legal { padding: 72px 32px 112px; }
  .legal-inner { max-width: 760px; }
  .legal-header { margin-bottom: 56px; padding-bottom: 40px; }
  .legal-section { margin-top: 44px; padding-top: 36px; }
  .legal-body { font-size: 1.05rem; }
  .legal-list { font-size: 1.05rem; }
}

/* ===============================================================
   THANK-YOU PAGE — /danke.html
   Zentriert, warm, mit Berg-Echo zum Hero
   =============================================================== */
.thanks {
  background: var(--bg);
  padding: 80px 22px 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 250px);
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%,
      var(--bg) 0%,
      var(--bg-warm) 100%);
}
.thanks-inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.thanks-mountains {
  margin: 0 auto 28px;
  color: var(--navy);
  opacity: 0.7;
}
.thanks-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--senf-link);
  margin: 0 0 28px;
}
.thanks-title {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--navy);
  font-size: clamp(3rem, 9vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.018em;
  margin: 0 0 22px;
}
.thanks-lead {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  line-height: 1.4;
  margin: 0 0 56px;
  opacity: 0.9;
  text-wrap: balance;
}
.thanks-next {
  background: var(--section);
  border-radius: 10px;
  padding: 32px 28px;
  margin: 0 0 48px;
  text-align: left;
}
.thanks-next-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--senf-link);
  margin: 0 0 18px;
  text-align: center;
}
.thanks-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
.thanks-steps li {
  padding: 12px 0 12px 44px;
  position: relative;
  color: var(--text);
  font-size: 0.97rem;
  line-height: 1.55;
  counter-increment: step;
  border-top: 1px solid var(--line);
}
.thanks-steps li:first-child {
  border-top: 0;
  padding-top: 6px;
}
.thanks-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--senf-link);
  line-height: 1;
}
.thanks-steps li:first-child::before { top: 8px; }
.thanks-steps strong {
  color: var(--navy);
  font-weight: 600;
}
.thanks-cta {
  margin: 0 0 56px;
}
.thanks-cta .btn { margin: 0 auto; }
.thanks-quote {
  font-family: var(--serif);
  color: var(--grey);
  font-size: 1rem;
  margin: 0;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

@media (min-width: 760px) {
  .thanks { padding: 112px 32px 128px; }
  .thanks-next { padding: 40px 44px; }
  .thanks-steps li { padding: 14px 0 14px 56px; font-size: 1rem; }
  .thanks-steps li::before { font-size: 1.3rem; }
}

/* ===============================================================
   Sticky WhatsApp-FAB (Floating Action Button) — nur auf Mobile
   =============================================================== */
.wa-fab {
  display: none;                       /* Default: versteckt (Desktop) */
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  align-items: center;
  justify-content: center;
  width: 46px;                          /* kompakter — weniger aufdringlich */
  height: 46px;
  border-radius: 50%;
  background: var(--navy);             /* Brand-Navy statt WhatsApp-Grün */
  color: var(--bg);                    /* Off-White Icon */
  text-decoration: none;
  border: 1.5px solid var(--bg);
  box-shadow: 0 4px 12px rgba(27, 46, 84, 0.20), 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: background 0.20s ease, color 0.20s ease, border-color 0.20s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.wa-fab svg { width: 22px; height: 22px; }
.wa-fab:hover,
.wa-fab:focus-visible {
  background: var(--senf);             /* Senf-Hover wie Anfragen-Button im Header */
  color: var(--navy);
  border-color: var(--senf);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(194, 138, 44, 0.30), 0 3px 6px rgba(0, 0, 0, 0.12);
  outline: none;
}
.wa-fab:focus-visible {
  outline: 3px solid var(--senf-hover);
  outline-offset: 3px;
}
.wa-fab-label {
  position: absolute;                  /* nur für Screenreader sichtbar */
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Auf Smartphones einblenden (unter 720px) */
@media (max-width: 720px) {
  .wa-fab { display: inline-flex; }
}

/* Beim Drucken niemals zeigen */
@media print {
  .wa-fab { display: none !important; }
}

/* ===============================================================
   Reduced Motion (BFSG / a11y)
   =============================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =================================================================
   HEADER-VERGLEICH (temporäre Designauswahl)
   ================================================================= */
.header-showcase {
  background: var(--section);
  padding: 56px 22px 64px;
  border-top: 1px solid var(--line);
  border-bottom: 4px double var(--senf);
}
.showcase-intro {
  max-width: 760px;
  margin: 0 auto 40px;
}
.showcase-eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--senf-link);
  margin: 0 0 12px;
}
.showcase-h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: 1.1;
  color: var(--navy);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.showcase-h2 em { font-style: italic; color: var(--senf-link); }
.showcase-lead {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin: 0;
}

.showcase-item {
  max-width: 1280px;
  margin: 0 auto 56px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.showcase-tag {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 28px 20px;
  background: var(--bg-warm);
  border-bottom: 1px solid var(--line);
}
.showcase-letter {
  font-family: var(--serif);
  font-weight: 600;
  font-style: italic;
  font-size: 1.8rem;
  color: var(--senf-link);
  line-height: 1;
  flex: none;
  width: 38px;
  text-align: center;
}
.showcase-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--navy);
  margin: 0 0 4px;
  letter-spacing: -0.005em;
}
.showcase-desc {
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 70ch;
}

.alt-mock {
  background: var(--bg);
  padding: 20px 28px 24px;
  position: relative;
}
.alt-brand img {
  height: 44px;
  width: auto;
  display: block;
  mix-blend-mode: multiply;
}
.alt-brand-compact img { height: 32px; }

.alt-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 22px;
}
.alt-nav li {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.alt-nav-pill ul { gap: 4px; }
.alt-nav-pill li {
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.88rem;
}

.alt-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.alt-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(194, 138, 44, 0.10);
  color: var(--senf-link);
}
.alt-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--senf);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.alt-cta-pill {
  background: var(--senf);
  color: #fff;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* --- A · Klassisch (zur Erinnerung) --- */
.alt-mock-classic .alt-mock-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 14px 0;
}
.alt-mock-classic { background: var(--bg); }

/* --- B · Floating Glass-Pill --- */
.alt-mock-pill {
  background:
    linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%);
  padding: 60px 28px;
  display: flex;
  justify-content: center;
}
.alt-pill-floating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 22px;
  background: rgba(253, 253, 253, 0.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid rgba(27, 46, 84, 0.08);
  border-radius: 999px;
  box-shadow:
    0 4px 14px rgba(27, 46, 84, 0.06),
    0 14px 36px rgba(27, 46, 84, 0.08);
}
.alt-pill-divider {
  width: 1px;
  height: 20px;
  background: rgba(27, 46, 84, 0.14);
  margin: 0 6px;
  flex: none;
}

/* --- C · Editorial · zweizeilig --- */
.alt-mock-editorial { padding: 0; background: var(--bg); }
.alt-utility {
  background: var(--navy);
  color: rgba(253, 253, 253, 0.85);
  padding: 8px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 0.80rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.alt-utility-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.alt-utility-item svg { color: var(--senf-soft); flex: none; }
.alt-utility-sep { color: rgba(253, 253, 253, 0.35); }
.alt-utility-tel { color: var(--senf-soft); font-weight: 600; margin-left: auto; }
.alt-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 20px 28px;
  background: var(--bg);
}

/* --- D · Asymmetrisch (Logo links + Pille rechts) --- */
.alt-mock-asymmetric {
  background:
    linear-gradient(180deg, var(--bg) 0%, var(--bg-warm) 100%);
  padding: 24px 28px;
}
.alt-asym-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.alt-pill-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  background: rgba(253, 253, 253, 0.95);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border: 1px solid rgba(27, 46, 84, 0.10);
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(27, 46, 84, 0.06);
}

/* --- Footer-Hinweis --- */
.showcase-footer {
  max-width: 760px;
  margin: 24px auto 0;
  padding: 18px 24px;
  background: var(--bg-warm);
  border: 1px dashed var(--senf);
  border-radius: 8px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--navy);
  text-align: center;
}
.showcase-footer strong {
  font-weight: 600;
  color: var(--senf-link);
  font-style: normal;
}

/* --- E · Pure Minimal · Reading-Mode --- */
.alt-mock-minimal {
  background: var(--bg);
  padding: 22px 28px;
}
.alt-min-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.alt-brand-tiny img {
  height: 26px;
  width: auto;
}
.alt-min-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.alt-min-menu {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.alt-min-menu span { color: var(--line); margin-left: 6px; }
.alt-min-cta {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--senf-link);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* --- F · Topographic · Berg-Edge --- */
.alt-mock-berghoehe {
  background: var(--bg);
  padding: 14px 28px 28px;       /* extra Bottom-Raum für Berg-Linie */
  position: relative;
}
.alt-mock-berghoehe .alt-mock-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.alt-berg-edge {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 28px;
  color: var(--senf);
  pointer-events: none;
}

/* --- G · Brand-Centered · Logo zentral --- */
.alt-mock-centered {
  background: var(--bg);
  padding: 18px 28px;
}
.alt-mock-centered .alt-mock-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
}
.alt-nav-half ul {
  gap: 20px;
}
.alt-nav-half:first-of-type ul {
  justify-content: flex-end;
}
.alt-nav-half:last-of-type ul {
  justify-content: flex-start;
}
.alt-brand-center img {
  height: 52px;
}
.alt-brand-center {
  display: flex;
  justify-content: center;
}

/* --- H · Solid Navy Block · Statement --- */
.alt-mock-navy {
  background: var(--navy);
  padding: 18px 28px;
}
.alt-mock-navy .alt-mock-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.alt-brand-svg {
  display: flex;
  align-items: center;
  color: var(--bg);
}
.alt-brand-svg svg {
  width: 200px;
  height: 46px;
}
.alt-nav-light li {
  color: rgba(253, 253, 253, 0.85);
}
.alt-icon-light {
  background: rgba(194, 138, 44, 0.20);
  color: var(--senf-soft);
}
.alt-mock-navy .alt-cta-btn {
  background: var(--senf);
  color: var(--navy);
}

/* Mobile-Anpassungen */
@media (max-width: 980px) {
  .alt-mock-classic .alt-mock-inner,
  .alt-asym-inner,
  .alt-mock-berghoehe .alt-mock-inner,
  .alt-mock-navy .alt-mock-inner { flex-wrap: wrap; row-gap: 16px; }
  .alt-mock-classic .alt-nav,
  .alt-mock-editorial .alt-nav,
  .alt-mock-asymmetric .alt-nav,
  .alt-mock-berghoehe .alt-nav,
  .alt-mock-navy .alt-nav { display: none; }
  .alt-nav-pill { display: flex; }
  .alt-pill-floating .alt-nav-pill { display: none; }
  .alt-mock-centered .alt-mock-inner { grid-template-columns: 1fr; gap: 16px; justify-items: center; }
  .alt-nav-half ul { justify-content: center !important; }
}
@media (max-width: 720px) {
  .alt-utility { flex-direction: column; align-items: flex-start; gap: 6px; }
  .alt-utility-sep { display: none; }
  .alt-utility-tel { margin-left: 0; }
  .alt-main-row { flex-wrap: wrap; row-gap: 14px; }
}