/* ==========================================================================
   Schriftarten – lokal eingebunden (kein Google-Fonts-CDN)
   Verbindungen zu externen Google-Servern übertragen bei jedem Seitenaufruf
   die IP-Adresse der Besucher:innen ohne Einwilligung an ein US-Unternehmen –
   deshalb werden die Variable-Font-Dateien selbst gehostet.
   ========================================================================== */

@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   mondbüro.de – Design Tokens
   ========================================================================== */

:root {
  /* Marken-Farben */
  --color-indigo-dark: #332B4D;
  --color-indigo: #4B3F72;
  --color-gold: #F2C879;
  --color-gold-dark: #C9903F;
  --color-cream: #FBF7F0;
  --color-grey: #6B6875;

  /* ------------------------------------------------------------------
     Durchgehende Nachtwelt

     Die Seite lief früher nach dem Hero auf hellem Creme weiter: edler
     Einstieg, dann gewöhnliche Marketingseite. Jetzt trägt das Nachtbild
     des Heros über die ganze Seite – der Name der Marke ist Programm.

     Die vier Marken-Grundfarben oben bleiben unverändert; hier drehen
     sich nur die abgeleiteten Flächen- und Textfarben um. Wer die Seite
     wieder hell haben will, muss allein diesen Block zurücksetzen.
     ------------------------------------------------------------------ */

  /* Grundflächen, von tief nach weniger tief. Alle drei sind entsättigte
     Verwandte von --color-indigo-dark, damit die Seite eine Farbfamilie
     bleibt und nicht in Grau kippt. */
  --color-night: #1D1830;
  --color-night-alt: #241E3A;
  --color-night-deep: #151124;

  /* Gold auf dunklem Grund. Auf hellem Grund brauchte Gold eine
     abgedunkelte Variante (#8B6227), weil es sonst unter 4,5:1 blieb.
     Auf der Nachtfläche ist es umgekehrt: der helle Markenton erreicht
     hier 11,4:1 und ist die lesbare Wahl. */
  --color-gold-text: #F2C879;

  /* Text. Kontrast auf --color-night: 14,1:1 (Fließtext) und 7,6:1
     (Sekundärtext); auf den etwas helleren Glasflächen 12,4:1 und 6,6:1.
     Alle vier Werte liegen über den 4,5:1 nach WCAG AA. */
  --color-text: #EFEBF7;
  --color-text-muted: #B3ACC7;
  --color-text-on-dark: #F5F1E8;
  --color-text-on-dark-muted: #C7C1D9;

  /* Text auf goldener Fläche (Knöpfe, Abzeichen, aktiver Reiter) bleibt
     dunkel – 9,8:1. Nur dort, sonst verschwindet er im Nachtgrund. */
  --color-text-on-gold: #2A2238;

  /* Überschriften. Vorher übernahm --color-indigo-dark diese Rolle: dunkel
     auf hellem Grund. Auf der Nachtfläche braucht es das Gegenstück – ein
     Weiß mit einem Hauch Violett, damit es nicht kalt aus der Farbfamilie
     fällt. Kontrast auf --color-night: 15,2:1. */
  --color-heading: #F3EFFA;

  /* Flächen sind jetzt Glas: eine dünne helle Schicht über dem
     Nachtgrund, nicht deckendes Weiß. Die Unschärfe dahinter setzen die
     Komponenten selbst per backdrop-filter. */
  --color-surface: rgba(255, 255, 255, 0.055);
  --color-surface-strong: rgba(255, 255, 255, 0.085);
  --color-surface-alt: rgba(255, 255, 255, 0.03);
  --color-border: rgba(242, 200, 121, 0.16);
  --color-border-soft: rgba(255, 255, 255, 0.10);

  /* Typografie */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Abstände & Radien */
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 28px;
  --space-section: clamp(4rem, 8vw, 7.5rem);
  --container-width: 1160px;

  /* Schatten. Auf dunklem Grund tragen graue Schatten nicht – Tiefe
     entsteht hier über fast schwarze Schlagschatten plus eine helle
     Kante oben, die wie Licht auf einer Glasfläche wirkt. */
  --shadow-soft: 0 24px 70px -24px rgba(0, 0, 0, 0.75);
  --shadow-card: 0 16px 40px -16px rgba(0, 0, 0, 0.6);
  --shadow-lift: 0 40px 80px -28px rgba(0, 0, 0, 0.85);
  --bevel:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --perspective: 1100px;
}

/* ==========================================================================
   Reset & Grundlagen
   ========================================================================== */

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

/* Abstand für Sprungziele unter der mitlaufenden Kopfzeile. */
[id] { scroll-margin-top: 6rem; }

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

@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;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  /* Kein flacher Farbwert: zwei sehr weite, sehr schwache Lichtscheine
     über dem Nachtgrund. Sie sorgen dafür, dass die Seite beim Scrollen
     nicht als eine tote schwarze Fläche wirkt, sondern Raum bekommt.
     background-attachment: fixed hält sie beim Scrollen stehen, sodass
     die Abschnitte durch das Licht hindurchwandern. */
  background:
    radial-gradient(70% 45% at 82% 8%, rgba(242, 200, 121, 0.10) 0%, transparent 60%),
    radial-gradient(60% 50% at 10% 55%, rgba(107, 88, 168, 0.16) 0%, transparent 65%),
    var(--color-night);
  background-attachment: fixed;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.6em;
  color: var(--color-heading);
}

p { margin: 0 0 1em; }

ul { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

@media (min-width: 640px) {
  .container { padding-inline: 2rem; }
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--color-indigo-dark);
  color: var(--color-text-on-dark);
  padding: 0.75em 1.25em;
  border-radius: var(--radius-s);
  z-index: 1000;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

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

/* Fokusrahmen: Gold auf allen Flächen (10,9:1). Solange die Seite hell war,
   musste er indigo sein – Gold erreichte auf Weiß nur 2,6:1 und verfehlte
   die 3:1, die WCAG 1.4.11 für Fokusindikatoren verlangt. Auf der
   Nachtfläche kehrt sich das um: Indigo käme hier auf 1,8:1, Gold ist die
   sichtbare Wahl. Damit entfällt auch die frühere Sonderregel für Kopf,
   Hero und Fuß – der Rahmen ist jetzt überall derselbe. */
:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 3px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.95em 1.7em;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color .25s ease;
  cursor: pointer;
  text-align: center;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
  /* Auf der goldenen Fläche muss die Schrift dunkel bleiben – hier gilt
     die umgekehrte Logik als auf dem Rest der Seite. */
  color: var(--color-text-on-gold);
  box-shadow: 0 10px 30px -10px rgba(201, 144, 63, 0.55);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -12px rgba(201, 144, 63, 0.65);
}

.btn-ghost {
  background: transparent;
  border-color: rgba(245, 241, 232, 0.4);
  color: var(--color-text-on-dark);
}

.btn-ghost:hover {
  background: rgba(245, 241, 232, 0.1);
  border-color: rgba(245, 241, 232, 0.7);
  transform: translateY(-2px);
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 500;
  border-bottom: 1px solid rgba(245, 241, 232, 0.08);
}

/* Der Weichzeichner sitzt bewusst auf einem Pseudo-Element: legt man
   backdrop-filter direkt auf .site-header, erzeugt das einen neuen
   Containing Block, wodurch position:fixed-Nachfahren (das mobile Menü)
   sich am Header statt am Viewport ausrichten würden. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(51, 43, 77, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Inhaltsseiten ohne großen Hero (z. B. Datenschutz): dort beginnt der
   Text direkt unter der Kopfleiste. Ein dichterer Hintergrund trennt die
   beiden sauber, während auf der Startseite der Hero darunter liegt und
   ein durchscheinender Balken besser wirkt. */
.light-page .site-header::before {
  background: rgba(51, 43, 77, 0.94);
}

.site-header.is-scrolled::before {
  background: rgba(51, 43, 77, 0.92);
  box-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.4);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 76px;
}

.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.logo-image {
  height: 42px;
  width: auto;
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(245, 241, 232, 0.25);
  border-radius: var(--radius-s);
  z-index: 20;
}

.nav-toggle-bar {
  width: 20px;
  height: 2px;
  background: var(--color-text-on-dark);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.primary-nav {
  position: fixed;
  inset: 76px 0 0 0;
  background: var(--color-indigo-dark);
  padding: 2rem 1.5rem;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

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

.primary-nav ul {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.primary-nav a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1.15rem;
  color: var(--color-text-on-dark);
  font-weight: 500;
}

.primary-nav a:not(.btn):hover { color: var(--color-gold); }

.nav-cta { width: 100%; }

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

  .primary-nav {
    position: static;
    inset: auto;
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 2.25rem;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .primary-nav ul {
    flex-direction: row;
    gap: 2rem;
    margin-bottom: 0;
  }

  .primary-nav a:not(.btn) { font-size: 0.98rem; }

  .nav-cta { width: auto; padding: 0.7em 1.4em; font-size: 0.92rem; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 30% 20%, #453A69 0%, var(--color-indigo-dark) 55%, #241E37 100%);
  padding: calc(76px + 5rem) 0 5rem;
  isolation: isolate;
}

@media (min-width: 900px) {
  .hero { padding: calc(76px + 7rem) 0 7rem; }
}

.hero-glow {
  position: absolute;
  top: -18%;
  right: -10%;
  width: min(620px, 75vw);
  height: min(620px, 75vw);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(252, 230, 184, 0.55) 0%, rgba(242, 200, 121, 0.28) 30%, rgba(75, 63, 114, 0.18) 55%, rgba(75, 63, 114, 0) 72%);
  filter: blur(2px);
  z-index: -2;
  animation: moon-breathe 9s ease-in-out infinite;
}

.hero-stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(245,241,232,0.5), transparent),
    radial-gradient(1px 1px at 60% 15%, rgba(245,241,232,0.35), transparent),
    radial-gradient(1.5px 1.5px at 80% 55%, rgba(245,241,232,0.4), transparent),
    radial-gradient(1px 1px at 35% 70%, rgba(245,241,232,0.3), transparent),
    radial-gradient(1.5px 1.5px at 92% 25%, rgba(245,241,232,0.4), transparent),
    radial-gradient(1px 1px at 10% 85%, rgba(245,241,232,0.3), transparent);
  opacity: 0.8;
}

@keyframes moon-breathe {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.9; }
  50% { transform: scale(1.08) translate(-1%, 2%); opacity: 1; }
}

.hero-inner {
  max-width: 760px;
  animation: fade-up 0.9s ease both;
}

/* Der Kopf beginnt oben etwas hoeher, damit die Karte auf dem Handy fast
   vollstaendig in den ersten Bildschirm passt. */
.hero { padding-top: calc(76px + 3.5rem); }

@media (min-width: 900px) {
  .hero { padding-top: calc(76px + 5rem); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-eyebrow {
  color: var(--color-gold);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 1.25rem;
}

.hero-headline {
  color: var(--color-text-on-dark);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  margin-bottom: 1.1rem;
}

.hero-headline span {
  color: var(--color-text-on-dark-muted);
  font-weight: 400;
  display: block;
}

.hero-subline {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  color: var(--color-gold);
  font-style: italic;
  margin-bottom: 1.25rem;
}

.hero-copy {
  color: var(--color-text-on-dark-muted);
  font-size: 1.05rem;
  max-width: 58ch;
  margin-bottom: 2.25rem;
}

.hero-copy a {
  color: var(--color-gold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.75rem;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
}

.hero-trust li {
  position: relative;
  padding-left: 1.4em;
  color: var(--color-text-on-dark-muted);
  font-size: 0.92rem;
}

.hero-trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-gold);
}

/* ==========================================================================
   Probier-Block im Hero

   Der Assistent laesst sich nicht erklaeren, nur vorfuehren. Deshalb sitzt
   dieser Block VOR dem Erklaertext und traegt die einzige Handlung, auf die
   es auf dieser Seite ankommt.

   Die Karte liegt als hellere Flaeche auf dem Nachtverlauf des Hero, mit
   goldener Haarlinie -- dieselbe Rolle, die Gold auf der ganzen Seite hat.
   Der Grünton kommt ausschliesslich am Knopf vor: Er sagt "WhatsApp", ohne
   dass die Karte wie ein Bildschirmfoto von WhatsApp aussieht.
   ========================================================================== */

.probe {
  display: grid;
  gap: 1.75rem;
  margin-bottom: 2.5rem;
  padding: 1.5rem;
  border-radius: var(--radius-l);
  background: rgba(245, 241, 232, 0.06);
  border: 1px solid rgba(242, 200, 121, 0.35);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(245, 241, 232, 0.08);
  backdrop-filter: blur(2px);
}

@media (min-width: 860px) {
  .probe {
    grid-template-columns: 1.15fr 1fr;
    gap: 2rem;
    padding: 2rem;
    align-items: center;
  }
}

.probe-eyebrow {
  color: var(--color-gold);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}

.probe-headline {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  line-height: 1.15;
  color: var(--color-text-on-dark);
  margin-bottom: 0.75rem;
}

.probe-copy {
  color: var(--color-text-on-dark-muted);
  font-size: 0.98rem;
  max-width: 46ch;
  margin-bottom: 1.35rem;
}

/* Unterhalb des zweispaltigen Kopfes steht der Knopf DIREKT unter der
   Schlagzeile, die Erklaerung darunter. Gemessen: einspaltig endete er sonst
   bei y=899 auf einem 844px hohen Schirm -- also knapp ausserhalb. Wer die
   Aufforderung liest, soll den Knopf im selben Blick haben; lesen kann er
   danach immer noch. Ab 1100px kehrt die natuerliche Reihenfolge zurueck,
   dort ist ohnehin alles gleichzeitig sichtbar. */
.probe-text {
  display: flex;
  flex-direction: column;
}

.probe-eyebrow  { order: 1; }
.probe-headline { order: 2; }
.probe-btn      { order: 3; }
.probe-copy     { order: 4; margin: 1.35rem 0 0; }
.probe-nummer   { order: 5; }
.probe-hinweis  { order: 6; }

.probe-btn {
  width: auto;
  align-self: flex-start;
  font-size: 1.05rem;
  padding: 1em 1.9em;
}

/* Ein einzelner, ruhiger Puls. Er zieht den Blick auf die eine Handlung und
   hoert nach drei Durchlaeufen auf -- eine dauerhaft pulsierende Flaeche
   waere Zappeln, kein Hinweis. */
@media (prefers-reduced-motion: no-preference) {
  .probe-btn { animation: probe-puls 2.4s ease-out 1.2s 3; }
}

@keyframes probe-puls {
  0%, 100% { box-shadow: 0 10px 26px -10px rgba(37, 211, 102, 0.55); }
  50%      { box-shadow: 0 10px 26px -10px rgba(37, 211, 102, 0.55), 0 0 0 10px rgba(37, 211, 102, 0.14); }
}

.probe-nummer {
  margin: 0.9rem 0 0;
  font-size: 0.92rem;
  color: var(--color-text-on-dark-muted);
}

.probe-nummer a {
  color: var(--color-text-on-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.probe-hinweis {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-on-dark-muted);
  opacity: 0.85;
  max-width: 42ch;
}

.probe-vorschau {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Der Beispielverlauf nimmt die Unsicherheit "was passiert, wenn ich
   schreibe?". Genau die haelt Leute vom Ausprobieren ab. */
.probe-chat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: var(--radius-m);
  background: rgba(29, 24, 48, 0.55);
  border: 1px solid rgba(245, 241, 232, 0.1);
}

.blase {
  margin: 0;
  padding: 0.6em 0.9em;
  border-radius: var(--radius-m);
  font-size: 0.88rem;
  line-height: 1.45;
  max-width: 85%;
}

.blase-aus {
  align-self: flex-end;
  background: rgba(37, 211, 102, 0.22);
  border: 1px solid rgba(37, 211, 102, 0.35);
  color: var(--color-text-on-dark);
  border-bottom-right-radius: var(--radius-s);
}

.blase-ein {
  align-self: flex-start;
  background: rgba(245, 241, 232, 0.1);
  border: 1px solid rgba(245, 241, 232, 0.14);
  color: var(--color-text-on-dark-muted);
  border-bottom-left-radius: var(--radius-s);
}

.blase-menue {
  overflow-wrap: anywhere;
  display: block;
  margin-top: 0.35rem;
  color: var(--color-gold);
  font-weight: 600;
  font-size: 0.82rem;
}

/* Auf dem Handy hat ein QR-Code keinen Zweck -- dort tippt man den Knopf.
   Er erscheint erst, wo er gebraucht wird. */
.probe-qr { display: none; }

@media (min-width: 860px) {
  .probe-qr {
    display: flex;
    align-items: center;
    gap: 0.9rem;
  }

  /* 29 Module auf 150 px sind gut 5 px je Modul. Bei den 84 px davor waren es
     knapp 3 -- das liest eine Handykamera vom Bildschirm nur mit Muehe. */
  .probe-qr img {
    width: 150px;
    height: 150px;
    border-radius: var(--radius-s);
    flex: none;
  }

  .probe-qr p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--color-text-on-dark-muted);
  }
}

/* ==========================================================================
   Scroll-Reveal (respektiert prefers-reduced-motion)
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

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

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Leistungen – gemeinsame Bausteine
   ========================================================================== */

.leistungen {
  padding: var(--space-section) 0;
}

.section-head {
  max-width: 62ch;
  margin-bottom: 3.5rem;
}

.eyebrow {
  color: var(--color-gold);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 0.9rem;
}

.section-head h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  margin-bottom: 0.85rem;
}

.section-intro {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  margin-bottom: 0;
}

.leistungen-block {
  margin-bottom: 5rem;
}

.block-title {
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  margin-bottom: 0.5rem;
}

.block-intro {
  color: var(--color-text-muted);
  max-width: 60ch;
  margin-bottom: 2.5rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.4em 0.9em;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.badge-gold {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
  color: var(--color-text-on-gold);
}

/* ==========================================================================
   Pricing-Cards
   ========================================================================== */

.pricing-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
  margin-bottom: 1.5rem;
}

@media (min-width: 780px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  padding: 2.25rem 2rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -16px rgba(51, 43, 77, 0.22);
}

/* Die meistgewählte Stufe. Auf hellem Grund war sie ein Hauch heller als
   die Nachbarn; auf der Nachtfläche übernimmt das ein warmer Goldschimmer,
   der von oben in die Karte läuft. */
.price-card.is-featured {
  border-color: rgba(242, 200, 121, 0.45);
  background:
    linear-gradient(180deg, rgba(242, 200, 121, 0.14) 0%, rgba(242, 200, 121, 0.02) 55%),
    var(--color-surface-strong);
}

@media (min-width: 780px) {
  .price-card.is-featured {
    transform: translateY(-0.75rem);
  }
  .price-card.is-featured:hover {
    transform: translateY(-1.25rem);
  }
}

.price-card .badge-gold {
  position: absolute;
  top: -0.85rem;
  left: 2rem;
}

.price-card-head h4 {
  font-size: 1.3rem;
  margin-bottom: 0.3rem;
}

.price-card-price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 0;
}

.price-card-price .amount {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 600;
  /* Der Preis ist die wichtigste Zahl der Seite – auf dunklem Grund wäre
     Indigo unlesbar, deshalb trägt sie hier den Goldton der Marke. */
  color: var(--color-gold);
}

.price-card-price .period {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.price-card-features {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex-grow: 1;
}

.price-card-features li {
  position: relative;
  padding-left: 1.5em;
  font-size: 0.95rem;
  color: var(--color-text);
}

.price-card-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold-dark);
}

.price-card .btn { width: 100%; }

/* Der zweite Knopf der Seite, zehnmal verwendet. Früher indigo auf hellem
   Grund; auf der Nachtfläche wäre er praktisch unsichtbar gewesen. Jetzt
   goldene Kante auf Glas, beim Überfahren füllt sich die Fläche. */
.btn-outline {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(242, 200, 121, 0.55);
  color: var(--color-gold);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.btn-outline:hover {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
  border-color: var(--color-gold);
  color: var(--color-text-on-gold);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -12px rgba(201, 144, 63, 0.6);
}

/* ==========================================================================
   Preis-Tabs (Website / Digitaler Assistent)
   ========================================================================== */

.pricing-tabs {
  display: inline-flex;
  background: var(--color-surface-alt);
  border-radius: 999px;
  padding: 0.35rem;
  gap: 0.35rem;
  margin-bottom: 2.5rem;
}

.pricing-tab {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.7em 1.4em;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.pricing-tab:hover:not(.is-active) {
  color: var(--color-heading);
}

.pricing-tab.is-active {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
  color: var(--color-text-on-gold);
}

.pricing-panel { margin-bottom: 3rem; }

.pricing-footnote {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: -0.5rem 0 1.5rem;
}

/* ==========================================================================
   Fremdkosten (Transparenz-Kasten, nur im Assistent-Panel)
   ========================================================================== */

.fremdkosten-box {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: 1.75rem 2rem;
  margin-top: 0.5rem;
}

.fremdkosten-box h4 {
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
}

.fremdkosten-intro {
  color: var(--color-text);
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}

.fremdkosten-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0 0 1.5rem;
}

.fremdkosten-list li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--color-border);
}

.fremdkosten-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

@media (min-width: 480px) {
  .fremdkosten-list li {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }
}

.fremdkosten-item {
  color: var(--color-text);
  font-size: 0.92rem;
}

.fremdkosten-price {
  color: var(--color-heading);
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
}

.fremdkosten-reasoning {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  margin-bottom: 1.5rem;
}

.fremdkosten-facts {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.fremdkosten-facts li {
  position: relative;
  padding-left: 1.5em;
  color: var(--color-text);
  font-size: 0.92rem;
}

.fremdkosten-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold-dark);
}

.price-card-price-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.price-card-vat {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  margin: 0;
}

/* Auf Mobile steht die hervorgehobene Karte zuerst, ohne sie im HTML zu
   duplizieren; ab 780px übernimmt wieder die natürliche Reihenfolge
   (niedrigste/hervorgehobene/höchste Stufe von links nach rechts). */
@media (max-width: 779px) {
  .pricing-grid .price-card.is-featured {
    order: -1;
  }
}

/* ==========================================================================
   Bündel
   ========================================================================== */

.bundle-section {
  max-width: 920px;
  margin: 0 auto 3rem;
}

.bundle-title {
  font-size: 1.3rem;
  text-align: center;
  margin-bottom: 0.5rem;
}

.bundle-intro {
  text-align: center;
  color: var(--color-text-muted);
  max-width: 60ch;
  margin: 0 auto 2rem;
}

.bundle-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 780px) {
  .bundle-grid { grid-template-columns: repeat(3, 1fr); }
}

.bundle-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: 1.75rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.bundle-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-heading);
  margin-bottom: 0;
}

.bundle-combo {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  margin-bottom: 0.5rem;
}

.bundle-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0;
}

.bundle-price-old {
  text-decoration: line-through;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.bundle-price-new {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--color-heading);
}

.bundle-price-new .period {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.bundle-save {
  color: var(--color-gold-text);
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0.25rem 0 0.75rem;
}

.bundle-card .btn { margin-top: auto; }

/* ==========================================================================
   Was in jedem Paket gilt
   ========================================================================== */

.paket-gilt {
  background: var(--color-surface);
  border-left: 3px solid var(--color-gold-dark);
  border-radius: var(--radius-s);
  padding: 1.75rem 2rem;
  box-shadow: var(--shadow-card);
}

.paket-gilt h4 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.paket-gilt ul {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.paket-gilt li {
  position: relative;
  padding-left: 1.5em;
  color: var(--color-text);
  font-size: 0.95rem;
}

.paket-gilt li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold-dark);
}

/* ==========================================================================
   Digitaler Assistent – Erklär-Block
   ========================================================================== */

.assistant-explainer {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow: var(--shadow-card);
  margin-bottom: 5rem;
}

.assistant-explainer h3 {
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  margin-bottom: 1rem;
  max-width: 32ch;
}

.explainer-lede {
  color: var(--color-text);
  font-size: 1.05rem;
  margin-bottom: 1.25rem;
}

.explainer-traits {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0 0 1.75rem;
}

.explainer-traits li {
  position: relative;
  padding-left: 1.6em;
  color: var(--color-text);
  font-size: 0.98rem;
}

.explainer-traits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold-dark);
}

.explainer-body {
  color: var(--color-text-muted);
  font-size: 1rem;
  max-width: 68ch;
  margin-bottom: 1.75rem;
}

.explainer-transition {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-heading);
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.explainer-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
}

.explainer-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

.explainer-table th,
.explainer-table td {
  padding: 0.95rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.88rem;
  vertical-align: top;
}

.explainer-table tr:last-child th,
.explainer-table tr:last-child td {
  border-bottom: none;
}

.explainer-table thead th {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-heading);
  font-size: 0.92rem;
  background: var(--color-surface-alt);
  white-space: normal;
}

.explainer-table tbody th[scope="row"] {
  font-weight: 600;
  color: var(--color-text);
  white-space: normal;
}

.explainer-table tbody td:nth-of-type(1) {
  color: var(--color-text-muted);
}

.explainer-table tbody td:nth-of-type(2) {
  color: var(--color-text);
}

.explainer-table .check {
  width: 20px;
  height: 20px;
  font-size: 0.75rem;
  margin-right: 0.3em;
  vertical-align: -4px;
}

.explainer-summary {
  background: var(--color-surface-alt);
  border-left: 3px solid var(--color-gold-dark);
  border-radius: var(--radius-s);
  padding: 1.2rem 1.5rem;
  color: var(--color-text);
  font-size: 0.98rem;
  margin-bottom: 0;
}

.explainer-summary strong { color: var(--color-heading); }

/* ==========================================================================
   Tarifrechner (digitaler Assistent)
   ========================================================================== */

.assistant-calculator {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow: var(--shadow-card);
  margin-bottom: 5rem;
}

.assistant-calculator h3 {
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  margin: 1rem 0 0.75rem;
  max-width: 34ch;
}

.calculator-lede {
  color: var(--color-text-muted);
  font-size: 1rem;
  max-width: 62ch;
  margin-bottom: 2rem;
}

.calculator-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  margin-bottom: 2rem;
}

@media (min-width: 900px) {
  .calculator-grid {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: stretch;
  }
}

.calculator-inputs {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  justify-content: center;
}

.calculator-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

.calculator-field label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text);
}

.calculator-value {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-heading);
  font-size: 1.05rem;
  white-space: nowrap;
}

.calculator-field input[type="range"] {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  accent-color: var(--color-gold-dark);
  cursor: pointer;
}

.calculator-result {
  background: var(--color-surface-alt);
  border-radius: var(--radius-m);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.calculator-result-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 0;
}

.calculator-result-value {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 0.75rem;
}

.calculator-result-value-gold { color: var(--color-gold-text); }

.calculator-verdict {
  background: var(--color-surface);
  border-left: 3px solid var(--color-gold-dark);
  border-radius: var(--radius-s);
  padding: 0.9rem 1.1rem;
  font-size: 0.92rem;
  color: var(--color-text);
  margin: 0.5rem 0 1.1rem;
}

.calculator-verdict.is-neutral {
  border-left-color: var(--color-gold);
}

.calculator-breakeven {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.calculator-breakeven strong { color: var(--color-heading); }

/* ==========================================================================
   Vergleichsübersicht
   ========================================================================== */

.vergleich {
  padding: var(--space-section) 0;
  background: var(--color-surface-alt);
}

.compare-scroll-hint {
  display: none;
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

@media (max-width: 779px) {
  .compare-scroll-hint { display: block; }
}

.compare-table-wrap {
  overflow-x: auto;
  background: var(--color-surface);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  -webkit-overflow-scrolling: touch;
}

.compare-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

.compare-table th,
.compare-table td {
  padding: 1.05rem 1.4rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.92rem;
  white-space: nowrap;
}

.compare-table thead th {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-heading);
  padding-top: 1.75rem;
  vertical-align: top;
}

.compare-table .compare-th-feature { min-width: 220px; }

.compare-table tbody th[scope="row"] {
  color: var(--color-text);
  font-weight: 600;
  white-space: normal;
}

.compare-table tbody td {
  color: var(--color-text-muted);
}

.compare-table .is-featured-col {
  background: rgba(242, 200, 121, 0.1);
}

.compare-badge {
  display: inline-flex;
  margin-top: 0.5rem;
  font-size: 0.62rem;
  padding: 0.3em 0.7em;
}

.compare-table .check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(201, 144, 63, 0.14);
  /* Das Häkchen ist für sehende Nutzer der einzige Träger der Information
     "enthalten" – deshalb die kontraststarke Textvariante des Golds. */
  color: var(--color-gold-text);
  font-weight: 700;
}

.compare-table .dash {
  color: var(--color-text-muted);
}

.compare-table .compare-note {
  text-align: center;
  font-style: italic;
  color: var(--color-text-muted);
  white-space: normal;
}

.table-vat {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: 0.2rem;
}

.compare-demo-row td {
  vertical-align: middle;
  padding-top: 1.4rem;
  padding-bottom: 1.6rem;
  text-align: center;
}

.compare-demo-link {
  white-space: nowrap;
}

.compare-footnote {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  margin: 1.5rem 0 0;
}

/* Links müssen hier sichtbar sein: a erbt global die Textfarbe und hat keine
   Unterstreichung – im Fließtext einer Fußnote wären sie sonst nicht erkennbar. */
.compare-footnote a {
  color: var(--color-gold);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.compare-footnote a:hover {
  color: var(--color-heading);
}

/* ==========================================================================
   Über uns
   ========================================================================== */

.ueber-uns {
  padding: var(--space-section) 0;
  background: var(--color-surface-alt);
}

.ueber-uns-grid {
  display: grid;
  gap: 2.75rem;
  align-items: center;
}

@media (min-width: 860px) {
  .ueber-uns-grid {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 4rem;
  }
}

.portrait-placeholder {
  position: relative;
  width: 200px;
  aspect-ratio: 1;
  border-radius: 50%;
  margin: 0 auto;
  background: radial-gradient(circle at 35% 30%, #4B3F72 0%, var(--color-indigo-dark) 75%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
}

.portrait-placeholder::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--color-gold);
  opacity: 0.4;
}

.portrait-placeholder span {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 600;
  color: var(--color-gold);
}

.ueber-uns-lede {
  font-size: 1.08rem;
  color: var(--color-text);
  max-width: 56ch;
  margin-bottom: 0;
}

.ueber-uns-content .eyebrow { margin-top: 0; }
.ueber-uns-content h2 { margin-bottom: 1.1rem; }

.value-list {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  margin: 2rem 0;
}

.value-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(201, 144, 63, 0.12);
  color: var(--color-gold-dark);
  flex-shrink: 0;
}

.value-icon svg { width: 20px; height: 20px; }

.value-list h3 {
  font-size: 1rem;
  margin-bottom: 0.3rem;
  color: var(--color-heading);
}

.value-list p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.ueber-uns-location {
  font-weight: 600;
  color: var(--color-heading);
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* ==========================================================================
   Kontakt
   ========================================================================== */

.kontakt {
  padding: var(--space-section) 0;
  background: var(--color-surface-alt);
}

.kontakt-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .kontakt-grid {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: start;
  }
}

.kontakt-form,
.kontakt-info {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-card);
}

.kontakt-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.kontakt-form-success {
  background: rgba(201, 144, 63, 0.12);
  border: 1px solid var(--color-gold-dark);
  border-radius: var(--radius-s);
  padding: 0.9rem 1.1rem;
  color: var(--color-heading);
  font-size: 0.9rem;
  margin: 0;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-field label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}

.form-field input,
.form-field textarea {
  font-family: inherit;
  font-size: 0.96rem;
  padding: 0.85em 1em;
  border-radius: var(--radius-s);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

.form-field input:focus,
.form-field textarea:focus {
  outline: 2px solid var(--color-indigo);
  outline-offset: 1px;
}

.kontakt-form-note {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: -0.5rem 0 0;
}

.kontakt-info h3 {
  font-size: 1.15rem;
  margin-bottom: 1.5rem;
}

.kontakt-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

.kontakt-list li {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.kontakt-list p { margin-bottom: 0; }

.kontakt-list a { color: var(--color-heading); font-weight: 600; }
.kontakt-list a:hover { color: var(--color-gold); }

.kontakt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(201, 144, 63, 0.12);
  color: var(--color-gold-dark);
  flex-shrink: 0;
}

.kontakt-icon svg { width: 20px; height: 20px; }

.kontakt-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.btn-whatsapp {
  width: 100%;
  background: #25D366;
  color: #0B3D22;
  box-shadow: 0 10px 26px -10px rgba(37, 211, 102, 0.55);
}

.btn-whatsapp:hover {
  background: #1FBD5A;
  transform: translateY(-2px);
}

.btn-whatsapp svg { width: 20px; height: 20px; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--color-indigo-dark);
  padding: 1.75rem 0;
}

.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-footer-copy {
  color: var(--color-text-on-dark-muted);
  font-size: 0.85rem;
  margin-bottom: 0;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer-legal a {
  color: var(--color-text-on-dark-muted);
  font-size: 0.85rem;
}

.footer-legal a:hover { color: var(--color-text-on-dark); }

/* Bitte um eine Google-Bewertung. Steht bewusst im Fuss und nicht als Kachel
   im Inhalt: Sie richtet sich an Bestandskunden, die ohnehin bis hierher
   scrollen, und nicht an Besucher, die den Betrieb noch gar nicht kennen. */
.footer-bewertung {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text-on-dark-muted);
  font-size: 0.85rem;
}

.footer-bewertung a { color: var(--color-gold); }
.footer-bewertung a:hover { color: var(--color-text-on-dark); }

/* ==========================================================================
   Einfache Inhaltsseiten (z. B. Datenschutz) – bewusst ohne Animationen
   ========================================================================== */

/* Der Kopfbereich der Rechtsseiten war die letzte Fläche aus der hellen
   Zeit – Creme, auf der die helle Überschrift verschwand. Jetzt ein
   ruhiger Nachtstreifen mit einem Hauch Mondlicht, passend zum Hero der
   Startseite, aber ohne dessen Aufwand. */
.page-hero {
  position: relative;
  background:
    radial-gradient(80% 120% at 85% 0%, rgba(242, 200, 121, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, var(--color-indigo-dark) 0%, var(--color-night) 100%);
  border-bottom: 1px solid var(--color-border);
  padding: calc(76px + 3rem) 0 2rem;
}

.page-hero h1 {
  font-size: clamp(2rem, 4vw, 2.6rem);
  margin-bottom: 0;
}

.legal-page {
  padding: clamp(2rem, 5vw, 3.5rem) 0 var(--space-section);
}

/* Der Rechtstext liegt jetzt als Dokument auf einer Glasfläche, statt
   nackt und linksbündig auf dem Nachtgrund zu stehen. Das gibt den
   zwanzig Abschnitten der Datenschutzerklärung einen Rahmen und rückt
   die Spalte in die Mitte – vorher blieb rechts die halbe Seite leer. */
.legal-page-inner {
  max-width: 78ch;
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card), var(--bevel);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}

.legal-page h2 {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  /* Feine Trennlinie über jeder Überschrift: bei zwanzig Abschnitten
     hintereinander ist das der Unterschied zwischen einer Textwüste und
     einem gegliederten Dokument. */
  margin: 2.75rem 0 1rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--color-border-soft);
}

.legal-page h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Die Abschnittsnummer der Datenschutzerklärung. Sie steht im Text, weil
   andere Abschnitte darauf verweisen („siehe Abschnitt 13") – deshalb
   wird sie nur ausgezeichnet, nicht durch einen CSS-Zähler ersetzt, der
   beim Umsortieren stillschweigend andere Zahlen ergäbe. */
.legal-num {
  color: var(--color-gold);
  font-variant-numeric: tabular-nums;
  margin-right: 0.15em;
}

.legal-page p {
  color: var(--color-text);
  font-size: 0.98rem;
  margin-bottom: 1.1rem;
}

.legal-page ul {
  list-style: disc;
  padding-left: 1.4rem;
  margin: 0 0 1.1rem;
}

.legal-page ul li {
  color: var(--color-text);
  font-size: 0.98rem;
  margin-bottom: 0.5rem;
}

/* Die Anschrift ist im Impressum die zentrale Pflichtangabe und in der
   Datenschutzerklärung die Stelle, an der man den Verantwortlichen sucht.
   Sie steht deshalb auf einer eigenen kleinen Fläche mit goldener Kante
   links, statt als Fließtext mitzulaufen. */
.legal-page address {
  font-style: normal;
  color: var(--color-text);
  font-size: 0.98rem;
  line-height: 1.75;
  margin-bottom: 1.5rem;
  padding: 1.1rem 1.4rem;
  background: rgba(0, 0, 0, 0.18);
  border-left: 3px solid var(--color-gold-dark);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}

.legal-page address a {
  color: var(--color-gold);
  font-weight: 600;
}

.legal-date {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-top: 2rem;
  margin-bottom: 0;
}

/* Die Tabellen der Datenschutzerklärung – Empfänger und Speicherdauern.
   Sie sitzen jetzt auf einer eigenen, etwas dunkleren Fläche innerhalb
   des Dokuments und heben sich damit vom Fließtext ab. */
.legal-table-wrap {
  overflow-x: auto;
  margin: 0 0 1.5rem;
  -webkit-overflow-scrolling: touch;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-m);
}

.legal-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
}

.legal-table th,
.legal-table td {
  padding: 0.8rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border-soft);
  font-size: 0.92rem;
  color: var(--color-text);
  vertical-align: top;
}

/* Die letzte Zeile braucht keine Linie – darunter kommt die Kante der
   Fläche selbst, sonst stehen zwei Striche übereinander. */
.legal-table tr:last-child td { border-bottom: 0; }

.legal-table thead th {
  background: rgba(242, 200, 121, 0.07);
  border-bottom-color: var(--color-border);
}

.legal-table th {
  font-weight: 600;
  color: var(--color-gold);
  white-space: nowrap;
}

/* Zeilen abwechselnd tönen: bei langen Tabellen verrutscht das Auge
   sonst leicht in die falsche Zeile. */
.legal-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.022);
}

/* Köderfeld gegen automatische Einsendungen.
   Nicht display:none – manche Programme erkennen das und lassen das Feld
   dann aus. Stattdessen aus dem Sichtfeld geschoben, aber technisch
   vorhanden. aria-hidden und tabindex="-1" im HTML halten es von
   Vorleseprogrammen und der Tabulator-Reihenfolge fern. */
.form-koeder {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Rückmeldung nach dem Absenden. Trägt role="status", damit
   Vorleseprogramme den Text ansagen, sobald er erscheint. */
.kontakt-form-success.is-erfolg {
  background: rgba(242, 200, 121, 0.12);
  border: 1px solid var(--color-gold);
  color: var(--color-heading);
}

.kontakt-form-success.is-fehler {
  background: rgba(214, 108, 92, 0.14);
  border: 1px solid #D66C5C;
  color: var(--color-heading);
}

/* Während des Sendens: Knopf gesperrt, damit nicht doppelt abgeschickt wird. */
.kontakt-form button[disabled] {
  opacity: 0.65;
  cursor: progress;
  transform: none;
}

/* Ortsverweise im Fuß der Startseite. Sitzen über der Copyright-Zeile und
   sind bewusst zurückhaltend gesetzt – sie sollen auffindbar sein, aber den
   Abschluss der Seite nicht dominieren. */
.footer-orte {
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid rgba(245, 241, 232, 0.10);
}

.footer-orte-titel {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.75rem;
}

.footer-orte ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.footer-orte a {
  color: var(--color-text-on-dark-muted);
  font-size: 0.92rem;
}

.footer-orte a:hover {
  color: var(--color-gold);
  text-decoration: underline;
}

/* ==========================================================================
   Ortsseiten (Gardelegen, Salzwedel, Stendal, Klötze, Kalbe)

   Bewusst schlichter als die Startseite: Diese Seiten sind ein Einstieg aus
   der Suche, kein Verkaufsprospekt. Wer hier landet, will in zehn Sekunden
   wissen, ob der Anbieter zu ihm passt – und dann klicken.
   ========================================================================== */

.ort-page {
  padding: clamp(2rem, 5vw, 3.5rem) 0 var(--space-section);
}

.ort-inner {
  max-width: 72ch;
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card), var(--bevel);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}

.ort-inner p {
  color: var(--color-text);
  margin-bottom: 1.2rem;
}

/* Der Einstiegssatz trägt den örtlichen Bezug und steht deshalb größer. */
.ort-lead {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  line-height: 1.45;
  color: var(--color-heading);
  margin-bottom: 1.75rem;
}

.ort-leistungen {
  margin-top: 2.5rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--color-border-soft);
}

.ort-leistungen h2,
.ort-cta h2 {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  margin-bottom: 1rem;
}

.ort-liste {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.ort-liste li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--color-text);
  font-size: 0.98rem;
}

.ort-liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-gold);
}

.ort-liste strong { color: var(--color-heading); }

.ort-hinweis {
  padding: 1rem 1.3rem;
  background: rgba(0, 0, 0, 0.18);
  border-left: 3px solid var(--color-gold-dark);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size: 0.95rem;
  margin-bottom: 0;
}

.ort-cta {
  margin-top: 2.5rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--color-border-soft);
}

.ort-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* Querverweise auf die übrigen Orte: hält die Seiten untereinander
   verbunden, ohne wie eine Linkliste zum Zweck der Suchmaschine zu wirken. */
.ort-weitere {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-border-soft);
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.ort-weitere a {
  color: var(--color-gold);
  font-weight: 500;
}

.ort-weitere a:hover { text-decoration: underline; }

/* ==========================================================================
   Glasflächen und Tiefe

   Alles darüber setzt Farben und Maße je Baustein. Dieser Block gibt den
   Flächen ihre gemeinsame Materialität: eine leichte Unschärfe, eine
   Lichtkante oben, eine dunkle Kante unten. Er steht am Ende und nicht bei
   den einzelnen Regeln, weil es eine Eigenschaft ist, die alle Flächen
   teilen – so gibt es dafür eine Stelle statt zwanzig.
   ========================================================================== */

.price-card,
.bundle-card,
.assistant-explainer,
.assistant-calculator,
.paket-gilt,
.kontakt-info,
.kontakt-form,
.compare-table-wrap,
.fremdkosten-box,
.calculator-result,
.calculator-verdict,
.explainer-summary {
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-card), var(--bevel);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}

/* Die großen Karten heben sich beim Überfahren deutlicher heraus als
   zuvor: mehr Weg, ein tieferer Schatten und eine goldene Kante. */
.price-card,
.bundle-card {
  transition:
    transform 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out),
    border-color 0.4s var(--ease-out);
}

.price-card:hover,
.bundle-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lift), var(--bevel);
  border-color: rgba(242, 200, 121, 0.42);
}

/* Die hervorgehobene Karte steht schon angehoben – ihr Hover muss von
   dort aus weitergehen, sonst fällt sie beim Überfahren nach unten. */
@media (min-width: 780px) {
  .price-card.is-featured:hover {
    transform: translateY(-1.5rem);
  }
}

/* Eingabefelder wirken eingelassen statt aufgesetzt: dunkler als die
   Fläche darüber, mit einem feinen Innenschatten. */
.form-field input,
.form-field textarea {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--color-border-soft);
  color: var(--color-text);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-text-muted);
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--color-gold);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.3),
    0 0 0 4px rgba(242, 200, 121, 0.16);
}

/* Der Mond im Kopfbereich bekommt einen echten Schein statt einer
   flachen Scheibe. */
.site-header .logo-mark,
.logo-mark {
  filter: drop-shadow(0 0 12px rgba(242, 200, 121, 0.45));
}

/* ==========================================================================
   Karten neigen sich zum Zeiger

   Die Bühne (.deck) gibt die Perspektive vor, ohne sie bleibt jede
   3D-Drehung flach. main.js schreibt --rx und --ry, solange der Zeiger
   über der Karte ist; auf dem Handy und bei reduzierter Bewegung bleiben
   beide Werte 0 und die Karte liegt still.
   ========================================================================== */

.deck { perspective: var(--perspective); perspective-origin: 50% 30%; }

.tilt {
  transform:
    perspective(var(--perspective))
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translateY(var(--ty, 0px));
  transform-style: preserve-3d;
}

@media (prefers-reduced-motion: reduce) {
  .tilt { transform: none; }
}