/* ===================================================
   Rheinland Immobilien Makler OHG – Website Stylesheet
   Farbpalette (Kundenvorgabe, Stand 16.08.2026):
   Flächen und Zweitfarbe: #324158
   Dunkle Bänder und Schrift: #182d45
   Akzent: #c5b353 (Gold), helle Fläche: #f3f1ef

   Beide Werte sind gegen die hellen Flächen nachgerechnet:
   #182d45 auf #f3f1ef = 12,4:1, #324158 auf #f3f1ef = 9,2:1,
   Gold auf #182d45 = 6,6:1 – alle deutlich über den 4,5:1,
   die WCAG AA für Fließtext verlangt.
=================================================== */

/* ---------- Schriften: liegen auf dem eigenen Server ----------
   Bewusst NICHT über fonts.googleapis.com eingebunden. Ein solcher
   Aufruf würde die IP-Adresse jedes Besuchers an Google in die USA
   übertragen – ohne Einwilligung ein Datenschutzverstoß, der in
   Deutschland regelmäßig abgemahnt wird.
   Beide Schriften stehen unter der SIL Open Font License; die
   Lizenztexte liegen im Ordner "fonts". */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/raleway-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/raleway-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/raleway-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/raleway-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/playfair-display-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/playfair-display-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-warmgrey: #324158;
  --color-slate: #324158;
  --color-navy: #182d45;
  --color-white: #ffffff;
  --color-gold: #c5b353;
  --color-light-bg: #f3f1ef;
  --color-text-on-dark: #e7e2df;
  /* Lesbare Varianten für helle Hintergründe (WCAG AA geprüft):
     Gold hat auf Hellgrau nur 1,9:1 und ist als Text unlesbar. */
  --color-gold-ink: #7a6c26;
  --color-body-ink: #182d45;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  /* Tatsächliche Höhe der Kopfzeile. Sie ist konstant – auch beim
     Scrollen – damit Sprungmarken immer an derselben Stelle landen. */
  --header-h: 96px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* verhindert, dass Sprungmarken unter den sticky Header rutschen */
  scroll-padding-top: var(--header-h);
}

body {
  font-family: var(--font-body);
  color: var(--color-navy);
  background: var(--color-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

/* Sichtbarer Fokus für Tastatur-Navigation (Accessibility) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
}

/* Skip-Link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-gold);
  color: var(--color-navy);
  padding: 12px 20px;
  z-index: 999;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-navy);
  overflow-wrap: break-word;
}

/* Auf hellem Grund der dunklere Goldton, auf dunklem Grund das helle Gold.
   Reines #c5b353 erreicht auf Weiß nur ca. 2:1 und ist als Text unlesbar. */
.eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-ink);
  font-weight: 600;
  margin-bottom: 10px;
}
.section-navy .eyebrow,
.hero .eyebrow,
.pillar .eyebrow { color: var(--color-gold); }

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

.divider {
  width: 60px;
  height: 3px;
  background: var(--color-gold);
  margin: 16px 0 24px;
  border: none;
}

.divider.center { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ----------
   Standard: goldgefüllt. Beim Hover wechselt er zur Umriss-Variante
   (transparent mit Goldrahmen) – für Buttons auf dunklen Flächen. */
.btn {
  display: inline-block;
  padding: 14px 32px;
  border: 1px solid var(--color-gold);
  color: var(--color-navy);
  background: var(--color-gold);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: 2px;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease,
              transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.25s ease;
  cursor: pointer;
  font-size: 0.95rem;
  text-align: center;
}

/* Der Anhebe-Effekt beim Zeigen steht weiter unten im Abschnitt
   "Bewegung" – er muss nach den Einblend-Regeln kommen, sonst
   gewinnt deren "transform: none" gegen den Hover. */

/* Grundregel (helle Flächen): Hover füllt mit Navy.
   Weißer Text auf transparentem Grund wäre hier unsichtbar. */
.btn:hover,
.btn-gold-solid:hover {
  background: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-navy);
}

.btn-gold-solid {
  background: var(--color-gold);
  color: var(--color-navy);
  border-color: var(--color-gold);
}

/* Auf dunklen Flächen: Hover wechselt zur Umriss-Variante
   (transparent mit Goldrahmen, weiße Schrift). */
.section-navy .btn:hover,
.cta-band .btn:hover,
.hero .btn:hover,
.pillar .btn:hover {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-gold);
}

/* Ausnahme innerhalb dunkler Sektionen: Buttons in weißen Karten
   (Formulare) füllen wieder mit Navy – sonst weiß auf weiß. */
.card .btn:hover,
.card .btn-gold-solid:hover {
  background: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-navy);
}

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

/* ---------- Header ---------- */
.site-header {
  background: var(--color-navy);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  transition: box-shadow 0.35s ease, background-color 0.35s ease;
}

/* Sobald man scrollt, rückt das Logo zusammen und die Leiste legt sich
   mit etwas mehr Tiefe über den Inhalt.

   WICHTIG – warum hier nichts an der HÖHE verändert wird:
   Die Leiste steht im Textfluss. Ändert sich ihre Höhe, muss der Browser
   die gesamte Seite darunter neu berechnen – und zwar in jedem einzelnen
   Bild der 0,35 Sekunden langen Überblendung. Genau das war das kurze
   Hängen beim Herunterscrollen. Die Leiste behält deshalb ihre Höhe;
   das Logo schrumpft über "transform", was den Fluss nicht anfasst. */
.site-header.is-scrolled {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
}
.site-header.is-scrolled .logo img { transform: scale(0.82); }

/* ---------- Lesefortschritt (nur Handy) ----------
   Ein schmaler Balken direkt unter der Kopfzeile. Er wächst beim
   Herunterscrollen, ist am Seitenende voll und schrumpft beim
   Zurückscrollen wieder.

   Umgesetzt über eine scrollgesteuerte CSS-Animation. Der Vorteil
   gegenüber der naheliegenden Lösung mit einem Scroll-Horcher: Der
   Browser rechnet das außerhalb des Hauptstrangs aus. Es kann also
   nicht ruckeln, egal wie viel sonst auf der Seite passiert – und die
   Regel "keine Scroll-Horcher" bleibt gewahrt. Für ältere Browser
   springt eine kleine Ersatzlösung in main.js ein. */
.lesefortschritt {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 2;
}

@supports (animation-timeline: scroll()) {
  .lesefortschritt {
    animation: lesefortschritt linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes lesefortschritt {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* feste Höhe statt Innenabstand – siehe Hinweis oben */
  height: 96px;
  padding: 0 24px;
  max-width: 1200px;
  margin: 0 auto;
}

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

/* Das Logo (weiße Skyline mit Schriftzug) skaliert über die Höhe;
   width:auto erhält die Proportionen von 154x129.
   Es sitzt mittig in der 96 px hohen Leiste.

   Beim Scrollen wird es über "transform" verkleinert, nicht über die
   Höhe: transform läuft auf der Grafikkarte und löst keine Neuberechnung
   der Seite aus. Der Ankerpunkt liegt links, damit es zur Kante hin
   zusammenläuft statt zur Mitte zu wandern. */
.logo img {
  height: 84px;
  width: auto;
  display: block;
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

nav.main-nav ul {
  list-style: none;
  display: flex;
  gap: 32px;
}

nav.main-nav a {
  position: relative;
  display: inline-block;
  color: var(--color-white);
  font-size: 0.92rem;
  font-weight: 500;
  padding-bottom: 8px;
  transition: color 0.25s ease;
}

/* Der Strich wächst aus der Mitte heraus, statt einfach aufzublinken. */
nav.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

nav.main-nav a:hover,
nav.main-nav a.active { color: var(--color-gold); }

nav.main-nav a:hover::after,
nav.main-nav a.active::after { transform: scaleX(1); }

/* Burger-Button: nur mobil sichtbar */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 3px;
  color: var(--color-white);
  width: 44px;
  height: 44px;
  cursor: pointer;
  padding: 0;
  position: relative;
  flex-shrink: 0;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: var(--color-white);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle span { top: 50%; margin-top: -1px; }
.nav-toggle span::before { top: -7px; left: 0; transform: none; }
.nav-toggle span::after  { top:  7px; left: 0; transform: none; }

.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ----------
   WICHTIG: .hero-inner / .hero-content müssen position:relative + z-index
   haben, sonst liegt der Inhalt HINTER dem ::before-Overlay. */
.hero {
  position: relative;
  /* Gemeinsame Mindesthöhe für alle Seiten. Sie liegt bewusst über
     dem höchsten Inhalt (Startseite mit Bewertungsformular), damit
     alle Kopfbereiche exakt gleich hoch sind. */
  min-height: 720px;
  display: flex;
  align-items: center;
  background: var(--color-navy);
  color: var(--color-white);
  padding: 70px 0;
  /* nötig, damit der langsame Bildzoom nicht über die Kanten läuft */
  overflow: hidden;
}

/* Das Foto liegt in einer eigenen Ebene, damit es sich bewegen kann,
   ohne Text oder Farbverlauf mitzunehmen.
   EIN gemeinsames Motiv für alle fünf Seiten: Nur so sind Ausschnitt und
   Maßstab überall identisch – ein Hochformat-Bild müsste bei "cover" stark
   vergrößert werden und wirkte dadurch näher herangezoomt.

   >>> HIER das Kopfbild austauschen: images/hero.jpg (und hero.avif).
   Ideal ist eine Querformat-Aufnahme mit mindestens 1920 px Breite. <<< */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('images/hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1);
  animation: heroZoom 26s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@supports (background-image: image-set(url('a.avif') type('image/avif'))) {
  .hero::after {
    background-image: image-set(url('images/hero.avif') type('image/avif'),
                                url('images/hero.jpg') type('image/jpeg'));
  }
}

/* Eigener Zuschnitt für schmale Bildschirme.
   Grund: Das Querformat muss auf dem Telefon in einen hochkant stehenden
   Ausschnitt gepresst werden – der Browser vergrößert es dann um das
   1,6-fache der echten Bildpunkte, und genau das sieht matschig aus.
   Der Hochformat-Zuschnitt passt zur Fläche und braucht nur noch das
   1,2-fache. Er stammt aus derselben Aufnahme, ist also nicht
   hochgerechnet, sondern anders beschnitten. */
@media (max-width: 700px) {
  .hero::after { background-image: url('images/hero-mobil.jpg'); }
}
@supports (background-image: image-set(url('a.avif') type('image/avif'))) {
  @media (max-width: 700px) {
    .hero::after {
      background-image: image-set(url('images/hero-mobil.avif') type('image/avif'),
                                  url('images/hero-mobil.jpg') type('image/jpeg'));
    }
  }
}

/* Sehr langsame Annäherung – bewusst so träge, dass sie eher gespürt
   als gesehen wird. Einmalig, kein Zurückspringen. */
@keyframes heroZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(24, 45, 69,0.88) 0%, rgba(24, 45, 69,0.55) 55%, rgba(24, 45, 69,0.35) 100%);
  z-index: 1;
}

.hero-inner,
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

/* Einheitlicher Textblock in ALLEN Kopfbereichen: gleiche Breite,
   gleiche Abstände, gleiche Schriftgrößen. */
.hero-text { max-width: 760px; }

.hero h1 {
  color: var(--color-white);
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.12;
  margin-bottom: 8px;
}

.hero h1 .gold { display: block; }

.hero p.lead {
  margin-top: 16px;
  max-width: 560px;
  min-height: 3.15em; /* zwei bis drei Zeilen – hält die Blockhöhe stabil */
  color: var(--color-text-on-dark);
  font-size: 1.05rem;
}

/* Buttonzeile – auf jeder Seite identisch aufgebaut und gleich breit. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}
.hero-actions .btn {
  min-width: 232px;
  padding-left: 24px;
  padding-right: 24px;
}


.hero .hero-body { color: var(--color-text-on-dark); max-width: 640px; margin-top: 12px; }

/* ---------- Card / Formular ---------- */
.card {
  background: var(--color-white);
  color: var(--color-navy);
  border-radius: 6px;
  padding: 32px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.card h1 { font-size: 2rem; margin-bottom: 4px; }
.card h3 { font-size: 1.3rem; margin-bottom: 4px; }
.card p  { color: var(--color-slate); }

.sub-gold {
  color: var(--color-gold-ink);
  font-weight: 700;
  margin-bottom: 18px;
  display: block;
}

form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
form .field { min-width: 0; }

form label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-slate);
  display: block;
  margin-bottom: 4px;
}

form input, form textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #cfcfcd;
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-navy);
  background: var(--color-white);
}

form textarea { min-height: 90px; resize: vertical; margin-bottom: 16px; }
form input:focus, form textarea:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(197,179,83,0.25); }

/* Honeypot-Feld gegen Spam – für Menschen unsichtbar */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-note { font-size: 0.75rem; color: var(--color-warmgrey); margin-top: 12px; }
.form-note a { text-decoration: underline; }

.form-status {
  padding: 12px 14px;
  border-radius: 3px;
  font-size: 0.88rem;
  margin-bottom: 16px;
  font-weight: 600;
}
.form-status.ok    { background: #e8f3e8; color: #2c5c2e; border: 1px solid #b8d8b9; }
.form-status.error { background: #fdeaea; color: #8c2b2b; border: 1px solid #eebcbc; }

.social-row { display: flex; gap: 10px; margin-top: 18px; }
.social-row a {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-white);
  transition: background-color 0.2s, color 0.2s;
}
.social-row a:hover { background: var(--color-gold); color: var(--color-navy); }
.social-row svg { width: 17px; height: 17px; fill: currentColor; }

/* ---------- Trust bar ---------- */
.trust-bar {
  background: var(--color-white);
  padding: 18px 24px;
  text-align: center;
  color: var(--color-slate);
  font-weight: 600;
  border-bottom: 1px solid #ececea;
  font-size: 0.95rem;
}
.trust-bar .stars { color: var(--color-gold-ink); margin-right: 8px; letter-spacing: 2px; }

/* ---------- Sections ---------- */
.section { padding: 90px 0; }
.section-navy { background: var(--color-navy); color: var(--color-white); }
.section-navy h2, .section-navy h3, .section-navy h4 { color: var(--color-white); }
.section-navy p { color: var(--color-text-on-dark); }
.section-navy .card p { color: var(--color-slate); }
.section-navy .card h1,
.section-navy .card h2,
.section-navy .card h3,
.section-navy .card h4 { color: var(--color-navy); }
.section-light { background: var(--color-light-bg); }

.section-head { text-align: center; max-width: 760px; margin: 0 auto 64px; }
.section-head h2 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); letter-spacing: -0.015em; }
.section-head .eyebrow { letter-spacing: 0.24em; font-size: 0.78rem; margin-bottom: 14px; }
.section-head p { color: var(--color-slate); margin-top: 10px; }
.section-navy .section-head p { color: var(--color-text-on-dark); }

/* ---------- Feature-Grid ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* Reihenfolge tauschen – greift auf die direkten Kinder,
   nicht auf eine bestimmte Klasse */
.feature-grid.reverse > :first-child { order: 2; }
.feature-grid.reverse > :nth-child(2) { order: 1; }

.feature-media img {
  border-radius: 6px;
  box-shadow: 0 20px 40px rgba(24, 45, 69,0.18);
  width: 100%;
  height: auto;
}

/* Hochformat-Fotos nicht auf Spaltenbreite aufblasen,
   sondern in natürlicher Proportion mittig setzen */
.feature-media-portrait { display: flex; justify-content: center; }
.feature-media-portrait img {
  width: auto;
  max-width: min(380px, 100%);
  max-height: 540px;
}

.feature-text h3,
.feature-text h4 { font-size: 1.45rem; margin-bottom: 14px; }
.feature-text p { color: var(--color-slate); margin-bottom: 14px; }
.feature-text p:last-child { margin-bottom: 0; }
.feature-text strong { color: var(--color-navy); }
.section-navy .feature-text p { color: var(--color-text-on-dark); }
.section-navy .feature-text strong { color: var(--color-gold); }

/* ---------- Stärken (Lokal / innovativ / auf Augenhöhe) ----------
   Die Spalten liegen in einem Container, damit der Text an derselben
   Kante beginnt wie der restliche Seiteninhalt. Als Grid-Elemente sind
   alle Panels gleich hoch und die Überschriften stehen auf einer Linie. */
/* Großflächige Foto-Panels mit dunklem Overlay (wie Original-Website).
   Inhalt braucht z-index über dem ::before-Overlay. */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  align-items: stretch;
}

.pillar {
  position: relative;
  min-height: 480px;
  padding: 56px 44px;
  display: flex;
  flex-direction: column;
  /* Inhalt oben ausrichten. Vorher stand er unten – dadurch begannen die
     drei Kacheln bei unterschiedlich langen Texten auf unterschiedlicher
     Höhe. Oben ausgerichtet stehen die Überschriften auf einer Linie,
     unabhängig davon, wie viel darunter folgt. */
  justify-content: flex-start;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.pillar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
              rgba(24, 45, 69, 0.94) 0%,
              rgba(24, 45, 69, 0.84) 38%,
              rgba(24, 45, 69, 0.74) 100%);
  /* Aufgehellt wird beim Überfahren über die Deckkraft dieser Ebene,
     nicht durch Austausch des Verlaufs. Zwei Gründe: Ein Farbverlauf
     lässt sich nicht weich überblenden, er würde springen. Und der
     Schleier bleibt so in jedem Fall erhalten – er wird nur schwächer.
     Die Regel dazu steht im Abschnitt "Bewegung" ganz unten. */
  opacity: 1;
  transition: opacity 0.35s ease;
}

.pillar > * { position: relative; z-index: 1; }

/* Hintergrundbilder: JPEG als Basis, AVIF für moderne Browser */
.pillar-lokal { background-image: url('images/pillar-lokal.jpg'); }
/* Handschlag liegt im oberen Bilddrittel – Ausschnitt entsprechend anheben */
.pillar-augenhoehe {
  background-image: url('images/pillar-augenhoehe.jpg');
  background-position: center 12%;
}
/* 3D-Kamera bei der Aufnahme – passt zum Text über Grundrisse,
   virtuelle Rundgänge und Home Staging. */
.pillar-innovativ {
  background-image: url('images/pillar-innovativ.jpg');
  /* Die Aufnahme ist hochkant angelegt und zeigt die Kamera vollständig –
     deshalb genügt der mittige Ausschnitt. */
  background-position: center;
}

@supports (background-image: image-set(url('a.avif') type('image/avif'))) {
  .pillar-lokal {
    background-image: image-set(url('images/pillar-lokal.avif') type('image/avif'),
                                url('images/pillar-lokal.jpg') type('image/jpeg'));
  }
  .pillar-augenhoehe {
    background-image: image-set(url('images/pillar-augenhoehe.avif') type('image/avif'),
                                url('images/pillar-augenhoehe.jpg') type('image/jpeg'));
  }
  .pillar-innovativ {
    background-image: image-set(url('images/pillar-innovativ.avif') type('image/avif'),
                                url('images/pillar-innovativ.jpg') type('image/jpeg'));
  }
}

.pillar h3 {
  color: var(--color-white);
  font-size: 1.8rem;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.pillar h3::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  background: var(--color-gold);
  margin-top: 14px;
}

.pillar p {
  color: var(--color-text-on-dark);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: 12px;
}
.pillar p:last-child { margin-bottom: 0; }
.pillar p strong { color: var(--color-gold); font-weight: 600; }

/* ---------- CTA-Band: eigenes Navy-Band als Blickfang ---------- */
.cta-band {
  padding: 84px 0;
  text-align: center;
}
.cta-band h2 {
  color: var(--color-white);
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  letter-spacing: -0.015em;
  margin: 0 0 30px;
  font-weight: 700;
}
.cta-band .btn {
  padding: 16px 46px;
  font-size: 1rem;
}

/* ---------- Team: Einzelvorstellung ---------- */
.team-duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 70px;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.member img {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto 26px;
  border-radius: 6px;
  box-shadow: 0 18px 38px rgba(24, 45, 69,0.16);
}

.member h3 { font-size: 1.45rem; margin-bottom: 4px; }
.member .role {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-ink);
  margin-bottom: 16px;
}
.member p { margin: 3px 0; color: var(--color-slate); font-size: 0.97rem; }
.member a { overflow-wrap: anywhere; }
.member a:hover { color: var(--color-gold-ink); text-decoration: underline; }

/* ---------- Herausforderung (Vermietung) ----------
   Die drei Problemsätze aus dem Hero, dreispaltig und knapp. */
.challenge { padding: 64px 0; }

/* Eigene Spalte für die Pfeile: so sitzt jeder Pfeil exakt mittig
   zwischen zwei Textspalten – unabhängig davon, wie lang die
   einzelnen Textzeilen sind. */
.challenge-grid {
  display: grid;
  grid-template-columns: 1fr 76px 1fr 76px 1fr;
  gap: 0;
  align-items: stretch;
}
.challenge-grid p {
  color: #111111;
  font-size: 0.97rem;
  line-height: 1.78;
  margin: 0;
}

.challenge-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}
.challenge-arrow::before {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  border-top: 2px solid var(--color-gold);
  border-right: 2px solid var(--color-gold);
  transform: rotate(45deg);
  animation: pfeil-nach-rechts 1.9s ease-in-out infinite;
}

@keyframes pfeil-nach-rechts {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.55; }
  50%      { transform: rotate(45deg) translate(4px, -4px); opacity: 1; }
}

@keyframes pfeil-nach-unten {
  0%, 100% { transform: rotate(135deg) translate(0, 0); opacity: 0.55; }
  50%      { transform: rotate(135deg) translate(4px, -4px); opacity: 1; }
}

/* Bei reduzierter Bewegung steht der Pfeil still */
@media (prefers-reduced-motion: reduce) {
  .challenge-arrow::before { animation: none; opacity: 1; }
}

/* ---------- Roadmap / Schatzkarte (Vermietung) ----------
   Geschwungener Pfad durch alle Stationen. Der Pfad wird per
   JavaScript aus den tatsächlichen Positionen der Punkte berechnet –
   dadurch stimmt er bei jeder Bildschirmbreite und jeder Textlänge. */
.map-inner {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  --map-gap: 92px;   /* Breite der Gasse zwischen den Kartenspalten */
  --map-dot: 46px;
  --map-swing: 58px; /* Ausschlag der Punkte nach links bzw. rechts */
}

.map-trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
/* Noch nicht zurückgelegter Weg: gestrichelt und blass */
.map-trail .trail-bg {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 2.5;
  stroke-dasharray: 9 11;
  stroke-linecap: round;
  opacity: 0.42;
}
/* Der zurückgelegte Weg besteht aus einzelnen Teilstücken – je eines
   zwischen zwei Stationen. Jedes zeichnet sich, wenn seine Station ins
   Bild kommt. Die Transition übernimmt der Browser, deshalb ruckelt
   beim Scrollen nichts. */
.map-trail .trail-fg { display: none; }

.map-trail .trail-seg {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.33, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .map-trail .trail-seg { transition: none; }
}

.map-stations {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 1;
}

.station {
  position: relative;
  width: calc(50% - var(--map-gap));
  padding-bottom: 46px;
}
.station:last-child { padding-bottom: 0; }
.station:nth-child(even) { margin-left: calc(50% + var(--map-gap)); }

/* Die Punkte schlagen abwechselnd nach links und rechts aus –
   erst dadurch wird aus dem Weg eine Schlangenlinie. */
.station-dot {
  position: absolute;
  top: 4px;
  right: calc((var(--map-gap) + var(--map-dot) / 2 - var(--map-swing)) * -1);
  width: var(--map-dot);
  height: var(--map-dot);
  border-radius: 50%;
  background: var(--color-light-bg);
  border: 2px solid var(--color-gold);
  color: var(--color-navy);
  /* Serifenziffern sitzen im Kreis optisch tief und die geerbte
     Zeilenhöhe von 1,65 verschiebt sie zusätzlich. Serifenlose
     Ziffern mit line-height 1 stehen sauber in der Mitte. */
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
  transition: background-color 0.4s ease, color 0.4s ease, transform 0.4s ease;
}
.station:nth-child(even) .station-dot {
  right: auto;
  left: calc((var(--map-gap) + var(--map-dot) / 2 - var(--map-swing)) * -1);
}

/* Erreichte Station: Punkt füllt sich */
.station.is-reached .station-dot {
  background: var(--color-gold);
  color: var(--color-navy);
  transform: scale(1.08);
}

.station-card {
  background: var(--color-white);
  border: 1px solid #e4e2dc;
  padding: 22px 26px;
}

/* Einblenden beim Scrollen. Der unsichtbare Startzustand hängt an
   ".js-anim" – bleibt das Skript aus, stehen die Karten sofort da.
   Vorher hing "opacity: 0" an der Karte selbst, abgesichert nur durch
   eine Klasse ".no-js", die nirgends gesetzt wurde. */
.js-anim .station-card {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js-anim .station.is-reached .station-card { opacity: 1; transform: none; }

.station-card h3 {
  font-size: 1.05rem;
  color: var(--color-navy);
  margin-bottom: 10px;
}
.station-card p {
  color: #111111;
  font-size: 0.94rem;
  line-height: 1.7;
}

/* ---------- Zeitstrahl (Verkaufen) ----------
   Senkrechte Linie in der Mitte, Punkte markieren die Schritte,
   Inhalte wechseln links/rechts und gleiten beim Scrollen herein. */
.timeline {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 8px 0;
  /* Abstand zwischen Spaltenkante und Linie, sowie halbe Punktgröße.
     In Pixeln, damit der Punkt exakt auf der Linie sitzt – mit
     Prozentwerten saß er um die halbe Punktbreite daneben. */
  --tl-gap: 44px;
  --tl-dot: 14px;
}

/* Die Linie selbst */
.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #dcdad3;
  transform: translateX(-50%);
}

.tl-item {
  position: relative;
  width: calc(50% - var(--tl-gap));
  padding: 4px 0 46px;
}
.tl-item:last-child { padding-bottom: 4px; }
.tl-item:nth-child(even) { margin-left: calc(50% + var(--tl-gap)); }

/* Punkt exakt mittig auf der Linie:
   Spaltenkante + Abstand + halbe Punktbreite */
.tl-item::after {
  content: "";
  position: absolute;
  top: 12px;
  right: calc((var(--tl-gap) + var(--tl-dot) / 2) * -1);
  width: var(--tl-dot);
  height: var(--tl-dot);
  border-radius: 50%;
  background: var(--color-gold);
  box-shadow: 0 0 0 5px var(--color-light-bg);
}
.tl-item:nth-child(even)::after {
  right: auto;
  left: calc((var(--tl-gap) + var(--tl-dot) / 2) * -1);
}

/* Rechtsbündig auf der linken Seite, damit der Text zur Linie zeigt */
.tl-item:nth-child(odd) { text-align: right; }

.tl-item .step-no {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  color: var(--color-gold-ink);
  margin-bottom: 8px;
}

.tl-item h3 {
  font-size: 1.45rem;
  color: var(--color-navy);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.tl-item p {
  color: var(--color-body-ink);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: 12px;
}
.tl-item p:last-child { margin-bottom: 0; }
.tl-item .lead-line { color: var(--color-navy); font-weight: 600; }

/* Einblenden beim Scrollen – Startzustand

   Der unsichtbare Startzustand hängt an ".js-anim". Diese Markierung
   setzt der Browser nur, wenn er die nötige Technik hat; bleibt das
   Skript aus, ist der Zeitstrahl von vornherein sichtbar.

   Vorher hing "opacity: 0" an ".tl-item" allein. Ohne JavaScript wäre
   der komplette Ablauf auf der Verkaufsseite dauerhaft unsichtbar
   gewesen – die Sicherung dafür hing an einer Klasse ".no-js", die
   nirgends gesetzt wurde. */
.js-anim .tl-item {
  opacity: 0;
  transform: translateX(-34px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js-anim .tl-item:nth-child(even) { transform: translateX(34px); }
/* Doppelte Klasse, damit der Endzustand schwerer wiegt als das
   ":nth-child" darüber. */
.js-anim .tl-item.is-visible.is-visible { opacity: 1; transform: none; }

/* ---------- Partner: animiertes Logo-Band ----------
   Die Logo-Reihe ist im HTML doppelt vorhanden; die Animation schiebt
   die Spur um genau 50 % nach links und springt nahtlos zurück –
   dadurch entsteht eine unendliche Schleife ohne sichtbaren Sprung. */
.partner-marquee {
  overflow: hidden;
  position: relative;
  padding: 10px 0;
  /* weiche Kanten links und rechts */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.partner-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: partner-scroll 22s linear infinite;
  /* Eigene Ebene für den Browser: Das Band wird dann beim Scrollen nicht
     zusammen mit dem übrigen Seiteninhalt neu gezeichnet. Ohne diesen
     Hinweis ruckelt es auf schwächeren Geräten sichtbar. */
  will-change: transform;
  backface-visibility: hidden;
}

@keyframes partner-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.partner-set {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* margin-right statt gap: so ist die Spur exakt gleich breite
   Hälften und die -50%-Schleife läuft ohne sichtbaren Sprung */
.partner-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 90px;
}
/* Höhe UND Breite begrenzen: Ein reines Höhenmaß lässt breite
   Schriftzüge (Wüstenrot) die schmalen Logos erdrücken. Mit
   object-fit: contain schrumpft ein zu breites Logo stattdessen
   in der Höhe und alle wirken optisch gleich gewichtig. */
.partner-logo img {
  height: 110px;
  width: auto;
  max-width: 250px;
  object-fit: contain;
  transition: transform 0.35s ease;
}
.partner-logo:hover img { transform: scale(1.08); }

/* Ohne Animationswunsch: statische, zentrierte Reihe */
@media (prefers-reduced-motion: reduce) {
  .partner-track {
    animation: none;
    width: auto;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 30px;
  }
  .partner-logo { margin-right: 60px; }
  .partner-set[aria-hidden="true"] { display: none; }
  .partner-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Bewertungssiegel ----------
   Bewusst selbst gebaut statt als fertiges Widget von ProvenExpert oder
   Google eingebunden. Deren Bausteine laden von fremden Servern, setzen
   teils Cookies und würden damit die Einwilligungspflicht auslösen –
   die Seite käme dann ohne Cookie-Banner nicht mehr aus. */
.siegel-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
}

.siegel {
  flex: 0 1 218px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  background: var(--color-white);
  border: 1px solid #e4e2dc;
  border-top: 3px solid var(--color-gold);
  border-radius: 6px;
  padding: 16px 18px 18px;
  box-shadow: 0 8px 22px rgba(24, 45, 69,0.07);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.35s ease;
}
.siegel:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(24, 45, 69,0.13);
}

/* Logo statt Schriftzug. Als <img> mit alt-Text: Fehlt die Datei,
   zeigt der Browser den Namen als Text an – kein kaputtes Bildsymbol.

   Die Größen sind je Logo einzeln gesetzt, nicht über eine gemeinsame
   Höhe. Grund: Die beiden Marken sind sehr unterschiedlich geschnitten
   (Google 2,5:1, ProvenExpert 7,25:1). Bei gleicher Höhe wirkte Google
   deutlich kleiner, weil es viel weniger Fläche einnimmt. Die Werte
   unten gleichen die sichtbare Größe an, nicht das Maßband.

   Nur die Breite wird vorgegeben, die Höhe ergibt sich – so bleibt das
   Seitenverhältnis exakt erhalten. */
.siegel-logo {
  display: block;
  /* Feste Kastenhöhe, das Bild wird darin mittig eingepasst. Ohne sie
     starten Sterne und Note in beiden Karten auf unterschiedlicher Höhe,
     weil die Logos unterschiedlich hoch sind (32 gegen 19 px). */
  height: 34px;
  object-fit: contain;
  margin-bottom: 6px;
}
.siegel[data-siegel="google"] .siegel-logo       { width: 80px;  }
.siegel[data-siegel="provenexpert"] .siegel-logo { width: 138px; }

.siegel-sterne {
  color: var(--color-gold-ink);
  letter-spacing: 2px;
  font-size: 0.95rem;
  line-height: 1.2;
}

.siegel-note {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--color-navy);
  font-variant-numeric: lining-nums tabular-nums;
}
.siegel-note span {
  font-size: 0.8rem;
  color: var(--color-body-ink);
  font-family: var(--font-body);
}

.siegel-anzahl {
  font-size: 0.82rem;
  color: var(--color-slate);
  line-height: 1.35;
  /* Ziffern gleicher Breite: Beim Hochzählen springt der Text sonst
     bei jedem Stellenwechsel seitlich. */
  font-variant-numeric: tabular-nums;
}

/* Solange keine Zahlen vorliegen: Note ausblenden, stattdessen ein
   schlichter Hinweis. Sieht nach Absicht aus statt nach Fehler. */
.siegel[data-leer] .siegel-note { display: none; }
.siegel[data-leer] .siegel-anzahl { color: var(--color-gold-ink); font-weight: 600; }

/* Ein Siegel ohne Zahlen sieht kaputt aus ("–/5"). Solange keine Werte
   vorliegen, bleibt es deshalb ganz weg; das Skript blendet es ein,
   sobald es Daten hat. */
.siegel[hidden] { display: none; }

@media (max-width: 480px) {
  .siegel { flex-basis: 100%; }
}

/* ---------- Steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 30px;
}

/* Mitwachsende Variante: passt sich der Anzahl der Karten an, statt
   sie in ein festes Dreierraster zu zwingen. */
/* Feste fünf Spalten statt "so viele wie passen". Mit der mitwachsenden
   Variante rutschte auf breiten Fenstern die fünfte Karte allein in eine
   zweite Reihe – das sah aus wie ein Fehler. */
.steps.flexibel {
  grid-template-columns: repeat(5, 1fr);
  gap: 34px 20px;
}

/* Keine Mindesthöhe: In der Karte steht genau eine Zeile, also soll sie
   sich auch nur um diese eine Zeile legen. Mit fester Höhe entstand
   darunter eine leere Fläche, die nach einem vergessenen Inhalt aussah. */
.steps.flexibel .step {
  padding: 26px 14px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Schriftgröße an der echten Schriftdatei ausgemessen: Die längste
   Beschriftung ("Beratung nach dem Kauf") ist bei 0,92rem 164 px breit,
   zur Verfügung stehen 186 px. Damit passt jede Beschriftung in eine
   Zeile, ohne dass etwas umbricht oder überläuft. */
.steps.flexibel .step h3 {
  font-size: 0.92rem;
  margin-bottom: 0;
  padding-right: 0;
  white-space: nowrap;
}
.steps.flexibel .step .num {
  right: auto;
  left: 16px;
  top: -18px;
  width: 36px;
  height: 36px;
  font-size: 0.9rem;
}

/* Unter etwa 1150 px reicht der Platz für fünf Spalten nicht mehr.
   Dann drei Spalten – und das Umbruchverbot muss weg, sonst würde
   die Beschriftung aus der Karte laufen. */
@media (max-width: 1150px) {
  .steps.flexibel { grid-template-columns: repeat(3, 1fr); }
  .steps.flexibel .step h3 {
    white-space: normal;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}
/* Auf Telefonen untereinander statt nebeneinander. Zwei Spalten waren
   dort zu eng: Die Karten fielen unterschiedlich hoch aus und die
   Reihenfolge 1-2-3-4-5 war nicht mehr auf einen Blick zu lesen. */
@media (max-width: 700px) {
  .steps.flexibel { grid-template-columns: 1fr; gap: 18px; }
  .steps.flexibel .step { padding: 20px 22px 18px; }
}

/* Lange Wörter wie "Finanzierungsprüfung" passen nicht in eine schmale
   Karte. Die allgemeine Überschriftenregel bricht sie dann an
   beliebiger Stelle um – "Finanzierungsprüfu / ng". Mit Silbentrennung
   trennt der Browser stattdessen korrekt und setzt einen Bindestrich.
   Voraussetzung ist die Sprachangabe lang="de" im html-Tag. */
.steps.flexibel .step h3 {
  padding-right: 0;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: normal;
}

.step {
  background: var(--color-white);
  border-radius: 6px;
  padding: 32px 26px 28px;
  box-shadow: 0 10px 30px rgba(24, 45, 69,0.08);
  position: relative;
  border-top: 3px solid var(--color-gold);
}
.step .num {
  position: absolute;
  top: -18px;
  right: 20px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-gold);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
}
.step h3 { font-size: 1.02rem; margin-bottom: 10px; padding-right: 34px; }
.step p { color: var(--color-slate); font-size: 0.92rem; }

/* ---------- Abschluss-Kontakt ---------- */
.final-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.final-contact h2 { color: var(--color-white); font-size: 2.1rem; }
.final-contact h2 .gold { display: block; }
.final-contact p.tagline { margin-top: 10px; color: var(--color-text-on-dark); font-size: 1.1rem; }

.contact-details { margin-top: 26px; font-size: 0.95rem; color: var(--color-text-on-dark); }
.contact-details a { color: var(--color-gold); }
.contact-details a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-navy);
  color: #cfc8c4;
  padding: 26px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.85rem;
}
.footer-inner a:hover { color: var(--color-gold); text-decoration: underline; }
.footer-links { display: flex; gap: 24px; }

/* ---------- Rechtliches ---------- */
.legal-content { max-width: 820px; margin: 0 auto; padding: 60px 0 100px; }
.legal-content h1 { margin-bottom: 30px; }
.legal-content h2 { font-size: 1.25rem; margin: 34px 0 12px; }
.legal-content p, .legal-content li { color: var(--color-slate); margin-bottom: 12px; }
.legal-content ul { padding-left: 20px; }
.legal-content a { color: var(--color-gold-ink); text-decoration: underline; overflow-wrap: anywhere; }
.legal-note { font-size: 0.85rem; color: var(--color-warmgrey); margin-top: 30px; }

/* ---------- Bewertungs-Karussell ---------- */
.testimonials {
  background: var(--color-navy);
  padding: 64px 0 52px;
  overflow: hidden;
}
.testimonials:focus { outline: none; }

.testimonial-shell {
  display: flex;
  align-items: center;
  gap: 22px;
}

.t-viewport { overflow: hidden; flex: 1 1 auto; min-width: 0; }

.t-track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.t-slide {
  flex: 0 0 100%;
  min-width: 100%;
  padding: 0 6px;
  visibility: visible;
  transition: visibility 0s;
  /* Alle Karten bekommen dieselbe Höhe – sonst springt der Kasten
     bei kurzen Zitaten sichtbar zusammen. */
  display: flex;
}
/* Inaktive Folien sind nicht fokussierbar. Das Ausblenden wird um die
   Dauer der Animation verzögert, damit die Folie sauber herausgleitet. */
.t-slide[aria-hidden="true"] {
  visibility: hidden;
  transition: visibility 0s linear 0.6s;
}

.t-card {
  background: var(--color-white);
  border-radius: 6px;
  border-top: 3px solid var(--color-gold);
  padding: 40px 38px;
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
  /* Feste Grundhöhe, damit auch ein einzeiliges Zitat eine ruhige,
     hochwertige Karte ergibt statt eines flachen Streifens. */
  min-height: 250px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.t-stars { color: var(--color-gold-ink); letter-spacing: 3px; font-size: 1.05rem; }

.t-quote {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--color-navy);
  margin: 14px 0 18px;
  quotes: none;
}
.t-quote::before { content: "\201C"; }
.t-quote::after  { content: "\201D"; }

.t-author {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-slate);
}
.t-source {
  display: block;
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--color-warmgrey);
  margin-top: 5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.t-arrow {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  color: var(--color-white);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.t-arrow:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-navy);
}
.t-arrow svg { width: 18px; height: 18px; fill: currentColor; }

.t-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}
.t-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255,255,255,0.32);
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}
.t-dot:hover { background: rgba(255,255,255,0.6); }
.t-dot[aria-selected="true"] { background: var(--color-gold); transform: scale(1.4); }

/* =================== Responsive =================== */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .feature-grid { grid-template-columns: 1fr; gap: 40px; }
  /* Reihenfolge-Tausch auf Mobil zurücksetzen, damit Text zuerst kommt */
  .feature-grid.reverse > :first-child,
  .feature-grid.reverse > :nth-child(2) { order: 0; }
  .pillars { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .challenge { padding: 48px 0; }
  /* Einspaltig: die Pfeile werden zu eigenen Zeilen und zeigen nach unten */
  .challenge-grid { grid-template-columns: 1fr; gap: 20px; }
  .challenge-arrow { height: 26px; }
  .challenge-arrow::before {
    transform: rotate(135deg);
    animation-name: pfeil-nach-unten;
  }

  /* Schatzkarte: Weg an den linken Rand, Stationen einspaltig */
  .map-inner { --map-gap: 0px; }
  .station,
  .station:nth-child(even) {
    width: 100%;
    margin-left: 0;
    padding-left: 64px;
    padding-bottom: 32px;
  }
  .station-dot,
  .station:nth-child(even) .station-dot {
    left: 0;
    right: auto;
    width: 40px;
    height: 40px;
  }
  .station-card { padding: 18px 20px; }

  /* Zeitstrahl rückt nach links, alle Inhalte einspaltig.

     ":nth-child(odd)" muss mit aufgezählt werden. Weiter oben steht
     ".tl-item:nth-child(odd) { text-align: right }" – das wiegt schwerer
     als ein einfaches ".tl-item" und hätte jeden ungeraden Eintrag
     rechtsbündig gelassen, egal wie weit unten diese Regel steht. */
  .timeline::before { left: 7px; transform: none; }
  .tl-item,
  .tl-item:nth-child(odd),
  .tl-item:nth-child(even) {
    width: 100%;
    margin-left: 0;
    padding-left: 34px;
    padding-bottom: 34px;
    text-align: left;
  }
  /* Startpunkt der Einblendung: auch auf schmalen Bildschirmen von
     links, nicht von unten. Hängt an ".js-anim" – ohne aktive Effekte
     steht der Eintrag gleich an seinem Platz. */
  .js-anim .tl-item,
  .js-anim .tl-item:nth-child(odd),
  .js-anim .tl-item:nth-child(even) { transform: translateX(-28px); }
  /* Endzustand. Die doppelte Klasse gibt dieser Regel mehr Gewicht als
     dem ":nth-child" darüber – sonst blieb jeder zweite Eintrag
     dauerhaft 28 px nach links verschoben und Punkt wie Text saßen
     neben der Linie statt darauf. */
  .js-anim .tl-item.is-visible.is-visible { transform: none; }
  .tl-item::after,
  .tl-item:nth-child(even)::after { left: 1px; right: auto; top: 10px; }
  .tl-item h3 { font-size: 1.25rem; }
  .team-duo { grid-template-columns: 1fr; gap: 50px; }
  .pillar { min-height: 380px; padding: 44px 28px; }
  .final-contact { grid-template-columns: 1fr; gap: 40px; }
  .cta-band { padding: 64px 0; }

  /* Mobile Navigation */
  .nav-toggle { display: block; }
  nav.main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-navy);
    border-top: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 24px rgba(0,0,0,0.3);
    display: none;
  }
  nav.main-nav.open { display: block; }
  nav.main-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 8px 0;
  }
  nav.main-nav li { border-bottom: 1px solid rgba(255,255,255,0.07); }
  nav.main-nav li:last-child { border-bottom: none; }
  nav.main-nav a {
    display: block;
    padding: 15px 24px;
    border-bottom: none;
    border-left: 3px solid transparent;
  }
  nav.main-nav a:hover,
  nav.main-nav a.active {
    border-bottom: none;
    border-left-color: var(--color-gold);
    background: rgba(255,255,255,0.05);
  }
  /* Die Leiste bleibt auch auf dem Handy stehen und wandert beim
     Scrollen mit – so sind Menü und Logo jederzeit erreichbar, ohne
     dass man nach oben zurückscrollen muss.

     "sticky" ist hier zugleich der Bezugspunkt für das aufgeklappte
     Menü, das mit "top: 100%" darunter hängt. Vorher stand hier
     "relative"; sticky erfüllt beide Aufgaben, deshalb genügt eine
     Angabe. Die Höhe der Leiste ändert sich beim Scrollen bewusst
     NICHT – das würde die ganze Seite darunter neu berechnen lassen
     und beim Scrollen ruckeln. */
  .site-header { position: sticky; top: 0; }
  .lesefortschritt { display: block; }
}

@media (max-width: 600px) {
  .section { padding: 60px 0; }
  .testimonials { padding: 48px 0 40px; }
  .partner-logo img { height: 80px; }
  .partner-logo { margin-right: 60px; }
  .testimonial-shell { gap: 6px; }
  .t-card { padding: 26px 18px; }
  .t-quote { font-size: 1rem; }
  .t-arrow { width: 36px; height: 36px; }
  .t-arrow svg { width: 14px; height: 14px; }
  /* kompakter, damit das Foto weniger stark vergrößert wird */
  .hero { min-height: 0; padding: 44px 0; }
  .hero p.lead { min-height: 0; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; min-width: 0; }
  form .row { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .cta-band { padding: 52px 0; }
  .cta-band .btn { width: 100%; }
  .card { padding: 24px 20px; }
  .pillar h3 { font-size: 1.5rem; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  /* Gleiche Rechnung wie oben: feste Höhe, Logo mittig darin.
     Da die Leiste auf dem Handy mitwandert, muss auch der Abstand für
     Sprungmarken auf diese Höhe gesetzt werden – sonst verschwindet
     das Ziel eines Ankerlinks hinter der Leiste. */
  :root { --header-h: 84px; }
  .header-inner { height: 84px; }
  .logo img { height: 64px; }
  .final-contact h2 { font-size: 1.7rem; }
}

/* =================== Bewegung ===================
   Grundsatz: Bewegung soll den Blick führen, nicht auf sich ziehen.
   Alles hier ist kurz, weich und läuft genau einmal.

   WICHTIG: Die Startzustände hängen alle an ".js-anim". Diese Klasse
   setzt ein winziges Skript im Seitenkopf – und nur dann, wenn der
   Browser die nötige Technik hat und der Nutzer keine reduzierte
   Bewegung wünscht. Ohne die Klasse ist schlicht alles sichtbar.
   Kein Zustand, in dem Inhalt dauerhaft unsichtbar bleiben kann. */

/* ---------- Kopfbereich: Text staffelt sich herein ---------- */
.js-anim .hero-text > *,
.js-anim .hero-inner > .card {
  opacity: 0;
  animation: einschweben 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.js-anim .hero-text > *:nth-child(1) { animation-delay: 0.15s; }
.js-anim .hero-text > *:nth-child(2) { animation-delay: 0.27s; }
.js-anim .hero-text > *:nth-child(3) { animation-delay: 0.39s; }
.js-anim .hero-text > *:nth-child(4) { animation-delay: 0.51s; }
.js-anim .hero-inner > .card { animation-delay: 0.42s; animation-duration: 1s; }

@keyframes einschweben {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Abschnitte gleiten beim Scrollen herein ----------
   Die Liste unten ist zugleich die Liste, die main.js beobachtet.
   Beide müssen übereinstimmen. */
.js-anim .section-head,
.js-anim .pillar,
.js-anim .feature-text,
.js-anim .feature-media,
.js-anim .feature-media-portrait,
.js-anim .member,
.js-anim .section .card,
.js-anim .cta-band h2,
.js-anim .cta-band .btn,
.js-anim .contact-details,
.js-anim .challenge-grid > p,
.js-anim .partner-marquee,
.js-anim .trust-bar {
  opacity: 0;
  /* Bewusst "translate" und NICHT "transform": So kollidiert das
     Hereingleiten nicht mit den Hover-Effekten, die transform nutzen.
     Beide Eigenschaften laufen unabhängig voneinander.

     Die Bewegung läuft waagerecht von links herein (Kundenwunsch).
     Der Weg ist etwas länger als bei der früheren Bewegung von unten:
     Seitwärts liest sich dieselbe Strecke kürzer, weil das Auge beim
     Lesen ohnehin waagerecht wandert. Der Überlauf nach links ist
     unkritisch, body hat overflow-x: hidden. */
  translate: -34px 0;
  transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
              translate 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Die Klasse ist absichtlich doppelt notiert.
   Grund: Regeln wie ".js-anim .section .card" oder ".js-anim .cta-band .btn"
   bestehen aus drei Klassen und wiegen damit schwerer als ein schlichtes
   ".js-anim .ist-da". Genau daran sind Kontaktformular, Objekt-Button und
   die drei Vermietungs-Absätze unsichtbar hängen geblieben.
   Doppelt notiert wiegt diese Regel gleich schwer und steht später –
   damit gewinnt sie in jedem Fall. */
.js-anim .ist-da.ist-da {
  opacity: 1;
  translate: 0 0;
}

/* ---------- Ablaufkarten: eine nach der anderen von links ----------
   Beobachtet wird der Behälter ".steps", nicht die einzelnen Karten.
   Sobald er ins Bild kommt, laufen die Karten mit fest gestaffelter
   Verzögerung los – dadurch entsteht eine saubere Welle von links nach
   rechts, unabhängig davon, wie schnell gescrollt wird.

   ACHTUNG: ".steps" gehört bewusst NICHT in die Versteck-Liste oben.
   Versteckt werden nur die Karten darin. */
.js-anim .steps .step {
  opacity: 0;
  translate: -44px 0;
  transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              translate 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js-anim .steps .step:nth-child(1) { transition-delay: 0ms; }
.js-anim .steps .step:nth-child(2) { transition-delay: 120ms; }
.js-anim .steps .step:nth-child(3) { transition-delay: 240ms; }
.js-anim .steps .step:nth-child(4) { transition-delay: 360ms; }
.js-anim .steps .step:nth-child(5) { transition-delay: 480ms; }
.js-anim .steps .step:nth-child(6) { transition-delay: 600ms; }

.js-anim .steps.ist-da .step {
  opacity: 1;
  translate: 0 0;
}

/* ---------- Wanderndes Aufleuchten ----------
   Nachdem die Karten hereingelaufen sind, läuft dauerhaft eine Welle
   durch die Reihe: Jede Karte leuchtet kurz auf, dann die nächste.
   Nach dem letzten Schritt folgt eine ruhige Pause, bevor es von vorn
   beginnt – ohne diese Pause wirkt es unruhig statt hochwertig.

   Bewusst NICHT animiert: der Schlagschatten der Karte. Ein dauerhaft
   laufender box-shadow zwingt den Browser, die Fläche ständig neu zu
   zeichnen. Randfarbe und der kleine Nummernkreis sind dagegen billig.

   Ablauf: 12 Sekunden pro Runde, 0,9 s Versatz je Karte. Das Aufleuchten
   einer Karte dauert 2,4 s – knapp eine Sekunde heller werden, gut
   anderthalb Sekunden zurück. Danach lange Ruhe. */
@keyframes stufe-rand {
  0%, 100% { border-top-color: var(--color-gold); }
  8%       { border-top-color: #e2d489; }
  20%      { border-top-color: var(--color-gold); }
}

@keyframes stufe-nummer {
  0%, 100% {
    background: var(--color-navy);
    color: var(--color-gold);
    transform: scale(1);
  }
  8% {
    background: var(--color-gold);
    color: var(--color-navy);
    transform: scale(1.14);
  }
  20% {
    background: var(--color-navy);
    color: var(--color-gold);
    transform: scale(1);
  }
}

.js-anim .steps.ist-da .step {
  animation: stufe-rand 12s ease-in-out infinite;
}
.js-anim .steps.ist-da .step .num {
  animation: stufe-nummer 12s ease-in-out infinite;
}

.js-anim .steps.ist-da .step:nth-child(1),
.js-anim .steps.ist-da .step:nth-child(1) .num { animation-delay: 1.2s; }
.js-anim .steps.ist-da .step:nth-child(2),
.js-anim .steps.ist-da .step:nth-child(2) .num { animation-delay: 2.1s; }
.js-anim .steps.ist-da .step:nth-child(3),
.js-anim .steps.ist-da .step:nth-child(3) .num { animation-delay: 3.0s; }
.js-anim .steps.ist-da .step:nth-child(4),
.js-anim .steps.ist-da .step:nth-child(4) .num { animation-delay: 3.9s; }
.js-anim .steps.ist-da .step:nth-child(5),
.js-anim .steps.ist-da .step:nth-child(5) .num { animation-delay: 4.8s; }

/* ---------- Feine Reaktionen auf den Mauszeiger ----------
   Muss NACH den Einblend-Regeln stehen: Beide sind gleich stark
   gewichtet, also entscheidet die Reihenfolge. Stünde der Hover
   weiter oben, würde ihn das "transform: none" des eingeblendeten
   Zustands überschreiben und Buttons hätten keinen Effekt mehr. */

/* Beim Zeigen hebt sich der Button minimal an, beim Klicken senkt er sich.
   2 Pixel genügen – mehr wirkt schnell verspielt. */
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(24, 45, 69, 0.22); }
.btn:active { transform: translateY(0); box-shadow: none; }

.pillar { transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
.pillar:hover { transform: translateY(-6px); }
/* Beim Überfahren hebt sich die Kachel an und der Schleier wird eine
   Spur durchsichtiger – das Foto tritt hervor, verschwindet aber nicht
   hinter dem Text. Vorher wurde hier der komplette Verlauf ausgetauscht,
   noch dazu in der alten Richtung: Dadurch verschwand der Schleier oben
   fast völlig, genau dort, wo seit der Umstellung die Überschrift steht.

   0,90 ist die Untergrenze. Die hellste Stelle liegt dann bei 0,67
   Deckkraft, weißer Text hält dort 4,9:1 – noch über den 4,5:1 der
   Norm, selbst wenn darunter ein sehr helles Bilddetail liegt. */
.pillar:hover::before { opacity: 0.90; }

.member img,
.feature-media img,
.feature-media-portrait img {
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.5s ease;
}
.member:hover img,
.feature-media:hover img,
.feature-media-portrait:hover img {
  transform: scale(1.03);
  box-shadow: 0 26px 52px rgba(24, 45, 69, 0.26);
}

/* Eingabefelder: der Goldring wächst sanft, statt zu springen. */
form input, form textarea {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Reduzierte Bewegung respektieren.
   Deckt auch alle Keyframe-Animationen ab: Bildzoom, Logoband,
   Einschweben – alles springt sofort in den Endzustand. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- WhatsApp-Kurzdraht ----------
   Ein gewöhnlicher Link, mehr nicht. Das Symbol liegt als SVG direkt im
   HTML, es wird also nichts von fremden Servern nachgeladen. Solange
   niemand klickt, erfährt WhatsApp nichts von dem Besuch – deshalb
   braucht die Seite dafür kein Einwilligungsbanner.

   Liegt bewusst UNTER der Kopfzeile (z-index 100), damit das geöffnete
   Menü auf dem Handy nicht davon durchkreuzt wird. */
.wa-draht {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  height: 58px;
  padding: 0 16px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 8px 24px rgba(24, 45, 69, 0.28);
  /* translate statt transform – so kollidiert die Bewegung nicht mit
     möglichen späteren Effekten, gleiche Regel wie beim Einschweben. */
  transition: translate 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              background-color 0.3s ease;
  /* Kommt erst, wenn der Kopfbereich seinen Auftritt hatte. */
  animation: wa-auftritt 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 1.2s both;
}

.wa-draht svg {
  width: 27px;
  height: 27px;
  fill: currentColor;
  flex: none;
}

/* Die Beschriftung ist eingeklappt und fährt beim Überfahren heraus.
   Auf Geräten ohne Mauszeiger bleibt es beim reinen Symbol. */
.wa-draht span {
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
              margin-left 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.3s ease;
}

.wa-draht:hover,
.wa-draht:focus-visible {
  translate: 0 -3px;
  background: #1eb85a;
  box-shadow: 0 16px 32px rgba(24, 45, 69, 0.34);
}

.wa-draht:hover span,
.wa-draht:focus-visible span {
  max-width: 190px;
  margin-left: 10px;
  opacity: 1;
}

.wa-draht:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 3px;
}

@keyframes wa-auftritt {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: 0 0; }
}

@media (max-width: 700px) {
  .wa-draht {
    right: 16px;
    bottom: 16px;
    height: 52px;
    padding: 0 13px;
  }
  .wa-draht svg { width: 25px; height: 25px; }
  /* Auf dem Handy nie ausklappen – der Daumen soll nichts verdecken. */
  .wa-draht span { display: none; }
}

/* Bei reduzierter Bewegung soll der Knopf nicht 1,2 Sekunden lang
   unsichtbar warten – der globale Block oben kürzt nur die Dauer,
   nicht die Verzögerung. */
@media (prefers-reduced-motion: reduce) {
  .wa-draht { animation-delay: 0.01ms !important; }
  /* Der Lesefortschritt ist eine Anzeige, keine Zierde. Die pauschale
     Kürzung der Dauer weiter oben würde ihn lahmlegen. */
  .lesefortschritt { animation-duration: auto !important; }
}


/* ---------- Bewertungs-Funnel: Zwei-Klick-Kachel ----------
   Sitzt in derselben Karte wie zuvor das Formular, damit der
   Kopfbereich seine Höhe behält und alle Seiten gleich hoch bleiben. */
.funnel-vorschau p {
  color: var(--color-body-ink);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 14px 0 16px;
}

.funnel-punkte {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}

.funnel-punkte li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 9px;
  font-size: 0.92rem;
  color: var(--color-slate);
}

/* Haken aus zwei Strichen – kein Zeichensatz, keine Grafik nötig. */
.funnel-punkte li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--color-gold);
  border-bottom: 2px solid var(--color-gold);
  transform: rotate(45deg);
}

.funnel-karte .form-note { margin-top: 14px; }

/* Fläche, in die der Funnel gesetzt wird. Der Rahmen ist bewusst
   dezent – der Anbieter bringt seine eigene Gestaltung mit. */
.funnel-buehne {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10),
              0 4px 6px -4px rgba(0, 0, 0, 0.10);
}
.funnel-buehne[hidden] { display: none; }
.funnel-buehne:focus { outline: none; }

.funnel-fehler { color: var(--color-navy); }

/* Platzhalter, solange der Funnel beim Anbieter lädt.
   Er nimmt ungefähr die Höhe ein, die der Funnel später hat – so
   springt die Seite beim Wechsel nicht. Die drei Balken wandern
   langsam heller; das signalisiert Fortschritt, ohne zu blinken. */
.funnel-platzhalter {
  padding: 30px 26px 34px;
  min-height: 260px;
}

.funnel-platzhalter p {
  color: var(--color-slate);
  font-size: 0.92rem;
  margin: 0 0 22px;
}

.funnel-platzhalter span {
  display: block;
  height: 13px;
  border-radius: 3px;
  margin-bottom: 14px;
  background: linear-gradient(90deg, #e8e6e1 0%, #f6f5f3 50%, #e8e6e1 100%);
  background-size: 220% 100%;
  animation: funnel-warten 1.6s ease-in-out infinite;
}
.funnel-platzhalter span:nth-child(3) { width: 82%; animation-delay: 0.15s; }
.funnel-platzhalter span:nth-child(4) { width: 64%; animation-delay: 0.30s; }

@keyframes funnel-warten {
  0%   { background-position: 120% 0; }
  100% { background-position: -20% 0; }
}