/* ============================================================
   Raum Traum GmbH — style.css
   CI: Navy #1a2333 · Gold dunkel #ad8741 · Gold hell #e1d599
   Verlauf #fbeda4 -> #cbaa62 · Creme #FAF8F5 · Hellgrau #E8E4DF
   Typografie: Cinzel Decorative (Headlines) · Poppins (Text)
   Mobile First
   ============================================================ */

:root {
  --navy: #1a2333;
  --gold: #ad8741;
  --gold-hell: #e1d599;
  --gold-grad: linear-gradient(135deg, #fbeda4 0%, #cbaa62 100%);
  --weiss: #FFFFFF;
  --creme: #FAF8F5;
  --hellgrau: #E8E4DF;
  --font-display: 'Cinzel Decorative', 'Century Gothic', serif;
  --font-body: Poppins, 'Century Gothic', sans-serif;
  --max-w: 1160px;
  --radius-arch: 999px 999px 0 0;
  --shadow-soft: 0 18px 50px rgba(26, 35, 51, 0.10);
  --transition: 0.35s cubic-bezier(0.25, 0.6, 0.3, 1);
  /* Goldener Pinselstrich, einmal definiert, ueberall verwendet */
  --gold-stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23fbeda4' stop-opacity='0'/%3E%3Cstop offset='.18' stop-color='%23fbeda4'/%3E%3Cstop offset='.6' stop-color='%23cbaa62'/%3E%3Cstop offset='1' stop-color='%23ad8741' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 13 C70 4 190 4 296 11 C190 10 70 11 4 13 Z' fill='url(%23g)'/%3E%3Cpath d='M26 22 C110 15 210 16 288 20 C210 19 110 19 26 22 Z' fill='url(%23g)' opacity='.6'/%3E%3C/svg%3E");
}

/* ---------- Reset & Basis ---------- */

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

html { scroll-behavior: smooth; }

/* Der Kopf klebt beim Scrollen oben und ist 128 Pixel hoch. Ohne diesen
   Abstand verschwindet ein angesprungener Titel darunter. */
:target,
section[id],
[id^="methode"], [id^="prozess"], [id^="saeulen"], [id^="rezensionen"] {
  scroll-margin-top: 150px;
}

body {
  font-family: var(--font-body);
  color: var(--navy);
  background: var(--creme);
  font-size: 20px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

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

ul { list-style: none; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 22px;
}

/* 52 statt 72: zwei benachbarte Abschnitte addieren ihre Abstaende,
   aus 72 wurden dazwischen 144 Pixel. Jetzt sind es 104. */
.section { padding: 52px 0; }

/* Bewusst zurueckgenommen, die Cinzel Decorative wirkt bei gleicher Groesse
   deutlich maechtiger als eine normale Schrift. */
.section-title {
  font-size: clamp(1.35rem, 3.2vw, 1.95rem);
  text-align: center;
  margin-bottom: 14px;
}

/* Breiter als zuvor (620px): bei 20px Schriftgroesse ergaben 620px nur rund
   55 Zeichen pro Zeile, der Text wurde dadurch unnoetig hoch. 820px liegen
   bei etwa 72 Zeichen und damit im gut lesbaren Bereich. */
.section-subtitle {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 48px;
  color: rgba(26, 35, 51, 0.78);
}

/* Goldener Schwung, Pinselstrich statt Balken.
   Die Laenge richtet sich nach dem Titel, siehe .section-title::after.
   Freistehende Striche ohne Titel darueber nutzen .gold-divider direkt. */
.gold-divider {
  width: 180px;
  height: 18px;
  margin: 0 auto;
  border: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-image: var(--gold-stroke);
}

/* Strich als Hintergrund am Titel, dadurch exakt so breit wie der Text. */
.section-title {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 34px;
  background-image: var(--gold-stroke);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 18px;
}

/* Ohne Strich, Entscheid vom 3. August 2026 */
.testimonials .section-title,
.kontrast-section .section-title {
  padding-bottom: 0;
  background-image: none;
}

/* Deutlich kleiner: der Block lebt von den beiden Spalten, nicht vom Titel */
.kontrast-section .section-title { font-size: clamp(1.15rem, 2.2vw, 1.45rem); }

/* Der Block erbte die 20px Grundschrift des Bodys, darum wirkte er wuchtig.
   Unten weniger Polster, weil die naechste Sektion ihre eigenen 52px mitbringt. */
.kontrast-section { padding-bottom: 18px; }
.kontrast-section + .section { padding-top: 24px; }

/* Der separate Strich direkt nach einem Titel entfaellt, sonst doppelt */
.section-title + .gold-divider,
.section-title + .section-subtitle + .gold-divider { display: none; }

.gold-divider--spaced { margin: 0 auto 44px; }

/* Sprunglinks im Fliesstext: unauffaellig, aber erkennbar beim Ueberfahren */
.sprunglink {
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(173, 135, 65, 0.32);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
}

.sprunglink:hover { color: var(--gold); text-decoration-color: var(--gold); }

/* Lange Absaetze bekommen statt einer Unterlinie einen Pfeil am Ende,
   eine fuenfzeilige Unterstreichung waere sonst unruhig. */
.sprunglink--lang { text-decoration: none; }

.sprunglink--lang::after {
  content: " \2192";
  color: var(--gold);
  white-space: nowrap;
}
.sprunglink:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Abschnitts-Navigation ----------
   Waagrechte Leiste statt Seitenleiste: sie kostet keine Breite,
   funktioniert auf dem Handy und doppelt das Hauptmenue nicht.
   Klebt nur am Desktop unter dem Kopf. Auf dem Handy wuerden zwei
   feste Leisten zusammen ueber ein Viertel des Bildschirms belegen,
   dort scrollt sie deshalb einfach mit. */
.seitennav {
  background: var(--weiss);
  border-bottom: 1px solid var(--hellgrau);
  font-size: 0.92rem;
}

.seitennav__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 54px;
}

.seitennav__label {
  flex: none;
  color: var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.seitennav__liste {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.seitennav__liste::-webkit-scrollbar { display: none; }

.seitennav__liste a {
  display: block;
  white-space: nowrap;
  padding: 16px 0;
  color: rgba(26, 35, 51, 0.72);
  border-bottom: 2px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.seitennav__liste a:hover { color: var(--navy); }

.seitennav__liste a.is-aktiv {
  color: var(--navy);
  border-bottom-color: var(--gold);
}

@media (max-width: 720px) {
  .seitennav__label { display: none; }
}

@media (min-width: 1180px) {
  .seitennav {
    position: sticky;
    top: 128px;
    z-index: 90;
  }
  /* Zwei feste Leisten uebereinander: Sprungziele entsprechend tiefer */
  section[id], #abschluss { scroll-margin-top: 205px; }
}

/* ---------- Vorher-Nachher-Schieber ----------
   Aufbau: Das Vorher-Bild liegt unten, das Nachher-Bild darueber in
   einem Container, dessen Breite der Regler steuert. Bedient wird ueber
   einen unsichtbaren <input type="range">, damit Maus, Finger und
   Tastatur ohne Zusatzcode funktionieren. */
.vn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  /* 900 war zu wuchtig, auch auf der Living-Seite. */
  max-width: 760px;
  margin: 0 auto;
}

.vn__spur {
  display: flex;
  overflow: hidden;
  scroll-behavior: smooth;
  flex: 1;
  min-width: 0;
}

.vn__folie { flex: 0 0 100%; min-width: 0; }

.vn__buehne {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1264 / 843;
  background: var(--navy);
  border-radius: 240px 240px 0 0;
  user-select: none;
}

.vn__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Nur der rechte Teil des Nachher-Bildes ist sichtbar */
.vn__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 50%);
  pointer-events: none;
}

.vn__griff {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--creme);
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  transform: translateX(-1px);
}

.vn__knopf {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--creme);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.vn__tag {
  position: absolute;
  bottom: 18px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 14px;
  pointer-events: none;
}

.vn__tag--l { left: 18px; background: rgba(26, 35, 51, 0.8); color: var(--creme); }
.vn__tag--r { right: 18px; background: rgba(250, 248, 245, 0.9); color: var(--navy); }

/* Der Regler liegt unsichtbar ueber dem Bild und bedient den Vergleich */
.vn__regler {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.vn__regler::-webkit-slider-thumb { -webkit-appearance: none; width: 60px; height: 100%; }
.vn__regler::-moz-range-thumb { width: 60px; height: 100%; border: 0; }
.vn__regler:focus-visible { opacity: 1; outline: 3px solid var(--gold); }

.vn__nav {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--hellgrau);
  background: var(--weiss);
  color: var(--navy);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(26, 35, 51, 0.10);
  transition: var(--transition);
}

.vn__nav:hover { background: var(--gold); border-color: var(--gold); }

.vn__raum {
  text-align: center;
  margin-top: 14px;
  font-family: 'Cinzel Decorative', serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
}

.vn__punkte {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 26px;
}

.vn__punkt {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--hellgrau);
  cursor: pointer;
  transition: var(--transition);
}

.vn__punkt.is-aktiv { background: var(--gold); transform: scale(1.3); }

/* Einzelnes Bildpaar, etwa auf der Startseite: ohne Pfeile und Punkte,
   dafuer etwas schmaler, damit es den Seitenfluss nicht dominiert. */
/* Deutlich kleiner am 5. August 2026: der Schieber war auf der Startseite
   zu dominant. Auf der Living-Seite ist er der Hauptinhalt und bleibt
   gross, hier ist er nur ein Beleg. */
.vn--einzeln { max-width: 560px; margin-top: 32px; }

/* Sprungziel sitzt auf dem Schieber, nicht auf der Sektion. Wer von der
   Verkaufsseite herkommt, soll die Bilder sehen, nicht nur die Ueberschrift.
   200px halten den Schieber frei von Kopf und Abschnittsleiste. */
#galerie { scroll-margin-top: 200px; }

/* Wie bei #galerie: das Sprungziel sitzt auf dem Inhalt, nicht auf der
   Sektion. Wer auf Aktuell im Verkauf klickt, soll das Objekt sehen,
   nicht die Ueberschrift darueber. */
#aktuell { scroll-margin-top: 200px; }

.vn-teaser__cta { text-align: center; margin-top: 34px; }

@media (max-width: 720px) {
  .vn__buehne { border-radius: 160px 160px 0 0; }
  .vn__knopf { width: 40px; height: 40px; }
}


/* ---------- Wofuer ich stehe / nicht ---------- */
.kontrast__grid {
  display: grid;
  gap: 22px;
  max-width: 820px;
  margin: 0 auto;
}

@media (min-width: 720px) {
  .kontrast__grid { grid-template-columns: 1fr 1fr; }
}

.kontrast__spalte {
  padding: 24px 26px 26px;
  border: 1px solid var(--hellgrau);
}

.kontrast__spalte--ja {
  background: var(--creme);
  border-top: 3px solid;
  border-image: linear-gradient(90deg, #fbeda4, #cbaa62) 1;
}

.kontrast__spalte--nein {
  background: var(--weiss);
}

.kontrast__titel {
  font-family: 'Cinzel Decorative', serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy);
  margin-bottom: 14px;
}

.kontrast__liste {
  list-style: none;
  display: grid;
  gap: 9px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(26, 35, 51, 0.85);
}

.kontrast__liste li {
  position: relative;
  padding-left: 22px;
}

.kontrast__spalte--ja .kontrast__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 12px;
  height: 2px;
  background: var(--gold-grad);
}

.kontrast__spalte--nein .kontrast__liste li {
  color: rgba(26, 35, 51, 0.6);
}

.kontrast__spalte--nein .kontrast__liste li::before {
  content: "\00d7";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(26, 35, 51, 0.4);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 15px 32px;
  border-radius: 3px;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  border: none;
  letter-spacing: 0.02em;
}

.btn--gold {
  background: var(--gold-grad);
  color: var(--navy);
  box-shadow: 0 8px 24px rgba(203, 170, 98, 0.35);
}

.btn--gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(203, 170, 98, 0.5);
}

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

.btn--outline:hover { background: rgba(173, 135, 65, 0.08); }

.btn--navy {
  background: var(--navy);
  color: var(--weiss);
}

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

.btn--outline-light {
  background: transparent;
  color: var(--weiss);
  border: 1px solid var(--gold-hell);
}

.btn--outline-light:hover { background: rgba(225, 213, 153, 0.12); }

/* ---------- Platzhalter für fehlende Fotos ---------- */

.placeholder {
  background: var(--navy);
  border: 2px solid var(--gold);
  color: var(--gold-hell);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  font-size: 0.85rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

/* ---------- Header / Navigation ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hellgrau);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 128px;
  gap: 10px;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.nav__logo { width: 100px; height: 100px; }

.nav__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  white-space: nowrap;
}

.nav__list {
  display: none;
}

.nav__cta { display: none; }

.nav__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  align-items: center;
}

.nav__toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--navy);
  transition: var(--transition);
}

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

/* Mobile-Menü */
.mobile-menu {
  display: none;
  background: var(--navy);
  padding: 26px 22px 34px;
}

.mobile-menu.is-open { display: block; }

.mobile-menu a {
  display: block;
  color: var(--weiss);
  padding: 13px 0;
  border-bottom: 1px solid rgba(225, 213, 153, 0.15);
  letter-spacing: 0.04em;
}

.mobile-menu a:hover { color: var(--gold-hell); }

.mobile-menu .btn { margin-top: 22px; width: 100%; }

@media (min-width: 1180px) {
  .nav__toggle, .mobile-menu { display: none !important; }

  /* Menue mittig zwischen Logo und CTA */
  .nav__list {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
  }

  .nav > nav { flex: 1; display: flex; justify-content: center; }

  .nav__list li { flex-shrink: 0; }

  .nav__list a {
    font-size: 0.98rem;
    letter-spacing: 0.03em;
    position: relative;
    padding: 6px 0;
    white-space: nowrap;
  }

  .nav__list a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--gold-grad);
    transition: var(--transition);
  }

  .nav__list a:hover::after { width: 100%; }

  .nav__cta {
    display: inline-block;
    padding: 12px 24px;
    font-size: 0.95rem;
  }
}

/* ---------- 1. Hero ---------- */

/* Angedeutetes Haus hinter dem Text.
   PFLEGE: Bild austauschen ueber img/index-hero-hintergrund.jpg.
   Die Transparenz steuert --hero-bg-staerke, nicht die Bilddatei.
   Der Verlauf darueber haelt die linke Seite hell, damit der Text
   lesbar bleibt. Auf schmalen Bildschirmen ganz aus, dort liegt der
   Text sonst direkt auf dem Motiv. */
/* Der Hero muss auf einem Laptop mit 768 Pixel Hoehe komplett ins Bild
   passen, die Kopfzeile mitgerechnet. Darum knappe Abstaende. */
.hero {
  position: relative;
  background: var(--creme);
  padding: 30px 0 24px;
  overflow: hidden;
}

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

@media (min-width: 900px) {
  .hero {
    --hero-bg-staerke: 0.3;
  }

  /* Das Haus liegt links hinter dem Text und wird nach rechts ausgeblendet,
     damit es nicht hinter dem Portraet steht. Die Maske erledigt das
     Ausblenden, dadurch bleibt links die volle Zeichnung erhalten. */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/index-hero-hintergrund.jpg");
    background-size: cover;
    background-position: left center;
    opacity: var(--hero-bg-staerke);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 44%, transparent 66%);
    mask-image: linear-gradient(90deg, #000 0%, #000 44%, transparent 66%);
    z-index: 0;
    pointer-events: none;
  }

  /* Nur noch ein leichter Schleier. Frueher lag er links am dichtesten,
     dadurch war das Haus genau dort unsichtbar, wo es zu sehen sein soll. */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
      rgba(250, 248, 245, 0.42) 0%,
      rgba(250, 248, 245, 0.28) 45%,
      rgba(250, 248, 245, 0) 66%);
    z-index: 0;
    pointer-events: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .hero::before { display: none; }
}

.hero__grid {
  display: grid;
  gap: 48px;
  align-items: center;
}

.hero__eyebrow {
  font-size: 1.05rem;
  letter-spacing: 0.28em;
  color: var(--gold);
  margin-bottom: 18px;
}

.hero__title {
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  margin-bottom: 18px;
}

.hero__slogan {
  font-style: italic;
  color: var(--gold);
  font-size: 1.35rem;
  margin-bottom: 22px;
}

.hero__text {
  max-width: 520px;
  margin-bottom: 32px;
  color: rgba(26, 35, 51, 0.85);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
}

.hero__note {
  font-size: 1.05rem;
  color: rgba(26, 35, 51, 0.6);
}

/* Bogen-Element ums Porträt */
.hero__figure { text-align: center; }

.hero__arch {
  position: relative;
  width: min(320px, 86vw);
  margin: 0 auto 12px;
}

.hero__arch::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-arch);
  pointer-events: none;
}

/* Festes Seitenverhaeltnis: ausgetauschte Bilder verzerren nie.
   height: auto ist noetig, sonst gewinnt das height-Attribut am <img>. */
.hero__arch .placeholder,
/* Das Bild ist 900 x 1600, der Bogen 3:4. Bei mittiger Ausrichtung wird
   oben so viel weggeschnitten, dass der Rundbogen den Kopf anschneidet.
   Oben ausgerichtet bleibt darueber Luft, beschnitten wird unten. */
.hero__arch img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-arch);
}

.hero__name {
  font-size: 1.3rem;
  margin-bottom: 8px;
}

.hero__role {
  display: inline-block;
  background: var(--navy);
  color: var(--weiss);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  padding: 6px 16px;
  margin-bottom: 12px;
}

.hero__values {
  color: var(--gold);
  font-size: 1.05rem;
  letter-spacing: 0.14em;
}

@media (min-width: 900px) {
  .hero { padding: 40px 0 40px; }
  .hero__grid { grid-template-columns: 1.15fr 1fr; }
  .hero__figure { text-align: center; }

  /* Die Logo-Datei hat 26 Pixel leeren Rand, die sichtbare Kreiskante
     liegt darum weiter rechts als die Kastenkante. Ohne diesen Einzug
     beginnt der Text links vom Logo, auch wenn beide Kaesten buendig
     sind. */
  .hero__content { padding-left: 34px; }
}

/* ---------- 2. Trust-Leiste ---------- */

.trustbar {
  background: var(--navy);
  color: var(--weiss);
  padding: 18px 0;
}

/* ---------- Laufband ----------
   Die Spur enthaelt die Angaben mehrfach, erzeugt vom Skript in main.js.
   Verschoben wird um genau die Haelfte, dadurch ist der Uebergang nahtlos
   und es entsteht nie eine Luecke. Tempo ueber --laufband-dauer. */
.trustbar__laufband {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.trustbar__spur {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
}

.trustbar__spur.laeuft {
  animation: trustbandLauf var(--laufband-dauer, 40s) linear infinite;
}

/* Beim Ueberfahren anhalten, damit man in Ruhe lesen kann */
.trustbar__laufband:hover .trustbar__spur { animation-play-state: paused; }

.trustbar__spur li {
  white-space: nowrap;
  padding: 0 26px;
  display: flex;
  align-items: center;
}

/* Trennzeichen zwischen den Angaben, kein eigenes Markup noetig */
.trustbar__spur li::after {
  content: "·";
  color: var(--gold);
  margin-left: 26px;
}

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

@media (prefers-reduced-motion: reduce) {
  .trustbar__spur.laeuft { animation: none; }
}

.trustbar__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 18px;
  text-align: center;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
}

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

.trustbar .stars { color: var(--gold-hell); letter-spacing: 0.15em; }

/* ---------- 3. Persönlicher Brief ---------- */

.letter-section { background: var(--creme); }

/* Etwas kleiner am 5. August 2026, damit auf der Startseite Platz fuer
   die Kreisgrafik bleibt. */
.letter {
  max-width: 640px;
  margin: 0 auto;
  background: var(--weiss);
  border: 1px solid var(--hellgrau);
  border-top: 3px solid;
  border-image: linear-gradient(90deg, #fbeda4, #cbaa62) 1;
  padding: 36px 28px;
  box-shadow: var(--shadow-soft);
  font-size: 0.96rem;
}

.letter p { margin-bottom: 20px; }

.letter p:first-of-type {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
}

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

/* Unterschrift im Hero, bewusst nicht groesser als die im Brief (280px) */
.hero__signatur { margin: 2px 0 0; }

.hero__signatur img {
  width: 165px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.letter__signature { margin: 30px 0 8px; }

/* Freigestellte Unterschrift, kein Hintergrund. */
.letter__signature img {
  width: 280px;
  height: auto;
}

.letter__signature .placeholder {
  width: 220px;
  height: 70px;
  font-size: 0.75rem;
}

.letter__sender { font-size: 1.1rem; color: rgba(26, 35, 51, 0.7); }

.letter__cta { text-align: center; margin-top: 44px; }

@media (min-width: 720px) {
  .letter { padding: 60px 72px; }
}

/* ---------- 4. Kundenstimmen ---------- */

.testimonials { background: var(--weiss); }

/* ---------- Kundenstimmen, dreispaltig ---------- */

/* ---------- Rezensions-Karussell ----------
   PFLEGE: Eine Rezension ergaenzen oder loeschen, indem ein
   <article class="stimme"> im Markup kopiert bzw. entfernt wird.
   Pfeile, Punkte und automatischer Wechsel passen sich selbst an. */
.stimmen-slider {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.stimmen__nav {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--hellgrau);
  background: var(--weiss);
  color: var(--navy);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(26, 35, 51, 0.10);
  transition: var(--transition);
}

.stimmen__nav:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.stimmen__nav:disabled { opacity: 0.35; cursor: default; }

.stimmen__punkte {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 26px;
}

.stimmen__punkt {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--hellgrau);
  cursor: pointer;
  transition: var(--transition);
}

.stimmen__punkt.is-aktiv { background: var(--gold); transform: scale(1.3); }

.stimmen {
  display: flex;
  gap: 26px;
  max-width: 1100px;
  margin: 0 auto;
  overflow: hidden;
  scroll-behavior: smooth;
}

/* Eine Karte auf dem Handy, zwei auf dem Tablet, drei auf dem Desktop */
.stimmen .stimme { flex: 0 0 100%; }

@media (min-width: 720px) {
  .stimmen .stimme { flex: 0 0 calc((100% - 26px) / 2); }
}

@media (min-width: 1000px) {
  .stimmen .stimme { flex: 0 0 calc((100% - 52px) / 3); }
}

@media (prefers-reduced-motion: reduce) {
  .stimmen { scroll-behavior: auto; }
}

.stimme {
  background: var(--creme);
  border: 1px solid var(--hellgrau);
  border-top: 3px solid;
  border-image: linear-gradient(90deg, #fbeda4, #cbaa62) 1;
  padding: 32px 26px 28px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: break-word;
}

.stimme__zitat {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(26, 35, 51, 0.9);
  margin-bottom: 20px;
  flex: 1;
}

.stimme__stars {
  color: var(--gold);
  letter-spacing: 0.2em;
  margin-bottom: 6px;
}

.stimme__meta {
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--gold);
}
.testimonials__cta { text-align: center; margin-top: 34px; }

.link-gold {
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  transition: var(--transition);
}

.link-gold:hover { color: var(--navy); border-color: var(--navy); }

/* ---------- 5. Opening Statement ---------- */

.statement { background: var(--creme); }

.statement__text {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  line-height: 1.7;
}

.statement__text strong { color: var(--gold); font-weight: 700; }

/* ---------- 6. Methode (Dreischritt) ---------- */

.methode { background: var(--weiss); }

.methode__grid {
  display: grid;
  gap: 26px;
  margin-bottom: 46px;
  /* Zentriert, damit zwei Karten nicht linksbuendig haengen */
  justify-content: center;
}

/* Mittelpunkt in Fliesstextschrift, Cinzel Decorative hat kein Glyph dafuer */
.mp {
  font-family: var(--font-body);
  font-weight: 400;
  padding: 0 0.15em;
}

.methode__card {
  background: var(--creme);
  border: 1px solid var(--hellgrau);
  padding: 40px 28px 34px;
  text-align: center;
  position: relative;
  transition: var(--transition);
  /* Grid-Elemente duerfen unter ihre Inhaltsbreite schrumpfen,
     sonst sprengen lange Woerter das Raster */
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

.methode__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
  border-color: var(--gold);
}

.methode__emblem {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--navy);
  border: 2px solid;
  border-color: var(--gold);
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px rgba(203, 170, 98, 0.15);
}

.methode__emblem svg { width: 40px; height: 40px; stroke: var(--gold-hell); fill: none; stroke-width: 1.5; }

.methode__step {
  font-size: 1.05rem;
  letter-spacing: 0.24em;
  color: var(--gold);
  margin-bottom: 8px;
}

.methode__card h3 { font-size: 1.25rem; margin-bottom: 12px; }

.methode__short { color: rgba(26, 35, 51, 0.8); }

.methode__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

@media (min-width: 820px) {
  .methode__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Zwei Karten statt drei: breiter und damit flacher, mittig gesetzt */
@media (min-width: 760px) {
  .methode__grid:has(.methode__card:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 540px));
  }
}

/* ---------- 8. Verkaufs-Kompass Teaser ---------- */

.kompass {
  background: var(--navy);
  color: var(--weiss);
  text-align: center;
}

.kompass .section-title { color: var(--weiss); }

.kompass__text {
  max-width: 560px;
  margin: 0 auto 34px;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- 9. Ausgewählte Verkäufe ---------- */

.referenzen { background: var(--weiss); }

.referenzen__grid {
  display: grid;
  gap: 24px;
  margin-bottom: 40px;
}

.objekt-card {
  border: 1px solid var(--hellgrau);
  background: var(--weiss);
  transition: var(--transition);
  overflow: hidden;
}

.objekt-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
  border-color: var(--gold);
}

.objekt-card .placeholder { aspect-ratio: 4 / 3; font-size: 0.78rem; }

/* Festes Seitenverhaeltnis: ein ausgetauschtes Bild verzerrt nie,
   unabhaengig von seinen Originalmassen. */
.objekt-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  display: block;
}

.objekt-card__body { padding: 20px 22px 24px; position: relative; }

.objekt-card__badge {
  position: absolute;
  top: -16px;
  right: 18px;
  background: var(--gold-grad);
  color: var(--navy);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  padding: 7px 14px;
}

.objekt-card__ort {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.objekt-card__typ { font-size: 1.08rem; color: rgba(26, 35, 51, 0.7); }

.referenzen__cta { text-align: center; }

@media (min-width: 640px) { .referenzen__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .referenzen__grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 10. FAQ-Teaser ---------- */

.faq { background: var(--creme); }

.faq__list { max-width: 760px; margin: 0 auto 36px; }

.faq__item {
  background: var(--weiss);
  border: 1px solid var(--hellgrau);
  margin-bottom: 14px;
}

.faq__question {
  width: 100%;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 1.2rem;
  color: var(--navy);
  text-align: left;
  padding: 20px 54px 20px 22px;
  cursor: pointer;
  position: relative;
}

.faq__question::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 1.5rem;
  transition: var(--transition);
}

.faq__item.is-open .faq__question::after { transform: translateY(-50%) rotate(45deg); }

.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.faq__answer p {
  padding: 0 22px 22px;
  color: rgba(26, 35, 51, 0.82);
  font-size: 1.15rem;
}

.faq__cta { text-align: center; }

/* ---------- 11. Brand-Video ---------- */

.video { background: var(--weiss); }

.video__frame {
  max-width: 860px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
}

.video__frame .placeholder {
  width: 100%;
  height: 100%;
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.video__frame iframe { width: 100%; height: 100%; border: 0; }

/* ---------- 12. Abschluss-CTA ---------- */

.final-cta {
  background: var(--creme);
  text-align: center;
}

.final-cta__text { max-width: 520px; margin: 0 auto 34px; }

.final-cta .btn { font-size: 1.08rem; padding: 18px 44px; }

/* Ohne eigene Farbe: der Satz darueber steht in vollem Navy, die
   Abschwaechung auf 70 Prozent liess diese Zeile ausgegraut wirken. */
.final-cta__phone {
  margin-top: 22px;
  font-size: 1.1rem;
}

.final-cta__phone a { color: var(--gold); }

/* ---------- 13. Footer ---------- */

.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.85);
  padding: 64px 0 30px;
  text-align: center;
}

/* Logo im Footer fuehrt zurueck auf die Startseite */
.footer__brand { display: inline-block; }

.footer__logo { width: 110px; margin: 0 auto 18px; }

.footer__name {
  font-size: 1.2rem;
  color: var(--weiss);
  margin-bottom: 6px;
}

.footer__slogan {
  font-style: italic;
  color: var(--gold-hell);
  margin-bottom: 34px;
  font-size: 1.15rem;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin-bottom: 30px;
  font-size: 1.1rem;
}

.footer__nav a:hover { color: var(--gold-hell); }

/* Gleiche Machart wie der Direktkontakt auf der Kontaktseite, seit
   6. August 2026: Goldstrich unter jedem Eintrag, hier in Weiss.
   Reihenfolge E-Mail, WhatsApp, Telefon. */
.footer__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 34px;
  margin-bottom: 30px;
  font-size: 1.05rem;
}

.footer__contact a {
  color: var(--weiss);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  transition: color 0.25s ease;
}

.footer__contact a:hover { color: var(--gold-hell); }

.footer__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Helles Gold: die gefuellte Kreisflaeche wirkt auf Navy deutlich dunkler
   als die 1px-Linien, obwohl beide denselben Farbwert hatten. */
.footer__whatsapp svg {
  width: 17px;
  height: 17px;
  fill: var(--gold-hell);
  flex: none;
}

.footer__social {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 34px;
}

.footer__social a {
  width: 40px;
  height: 40px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.footer__social a:hover { background: var(--gold-grad); }

.footer__social svg { width: 17px; height: 17px; fill: var(--gold-hell); transition: var(--transition); }

.footer__social a:hover svg { fill: var(--navy); }

.footer__legal {
  border-top: 1px solid rgba(225, 213, 153, 0.2);
  padding-top: 24px;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.55);
}

.footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-bottom: 12px;
}

.footer__legal-links a:hover { color: var(--gold-hell); }

/* ---------- Scroll Reveal ---------- */

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

.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Fokus-Sichtbarkeit ---------- */

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ==========================================================
   Baustein Säulenhaus
   ========================================================== */

/* Heller Abschnitt mit dem Saeulenhaus als blasser Grafik dahinter,
   Fassung vom 5. August 2026. Die Grafik liegt hinter dem ganzen
   Abschnitt, vier Boegen, vier Werte, die Grundlinie traegt alles.
   Die vorherige Navy-Fassung steht am Ende dieses Blocks. */
/* Navy, Entscheid vom 5. August 2026. Auf Weiss verschwand die Grafik zu
   einer blassen Tapete, auf dunklem Grund traegt das Gold. Der Abschnitt
   ist damit auch der einzige dunkle Halt in der Seitenmitte.
   Fuer die helle Fassung: background auf var(--weiss), color auf
   var(--navy), und die drei Textfarben unten zuruecksetzen. */
.saeulen {
  background: var(--navy);
  color: var(--weiss);
  padding: 56px 20px 60px;
}

.saeulen__inner { max-width: 1040px; margin: 0 auto; }

.saeulen__eyebrow {
  font-family: Poppins, 'Century Gothic', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--gold-hell);
  text-align: center;
  margin: 0 0 12px;
}

.saeulen__title {
  font-family: 'Cinzel Decorative', serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  color: var(--weiss);
  text-align: center;
  margin: 0 0 28px;
  line-height: 1.25;
}

/* --- Grafik mit Klickflächen --- */

/* Breite bewusst zurueckgenommen, die Grafik soll nicht die Seite dominieren.
   Stage und Woerter muessen immer dieselbe max-width haben, sonst verrutschen
   die vier Woerter unter den Boegen. */
.saeulen__stage { position: relative; max-width: 520px; margin: 0 auto; }

/* ---------- Die vier Werte ----------
   Vier Spalten, getrennt durch feine Goldverlaufslinien. Die Nummer und
   die Trennlinien erzeugt das CSS, im Markup steht nur Titel und Text.
   Auf schmalen Bildschirmen fallen die senkrechten Linien weg. */
/* Zurueck auf den Ursprung, Entscheid vom 5. August 2026: vier Spalten
   auf Navy, Trennlinien im Goldverlauf, Kaestchen beim Draufgehen.
   Die Saeulenhaus-Grafik ist hier raus. Die dafuer erzeugten Dateien
   saeulenhaus-fenster.png, -rahmen.png, -architektur.png und
   -transparent.png liegen weiter in img/, falls sie je wieder gebraucht
   werden. */
.saeulen__werte {
  display: grid;
  gap: 40px 0;
  max-width: 1080px;
  margin: 44px auto 0;
  text-align: left;
}

@media (min-width: 700px) {
  .saeulen__werte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .saeulen__werte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.saeulen__wert {
  position: relative;
  z-index: 0;
  padding: 18px 26px 20px;
  border: 1px solid transparent;
  transition: transform 0.35s ease, border-color 0.35s ease,
              box-shadow 0.35s ease;
}

/* Goldbalken oben, wie bei der Spalte Dafuer stehe ich und beim
   Tragbarkeitsrechner. Liegt auf der Rahmenlinie und ueberdeckt sie
   an den Ecken, darum die minus ein Pixel. */
.saeulen__wert::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 3px;
  background: var(--gold-grad);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

/* Kaestchen mit Goldrahmen, Goldbalken und Anhebung. Die aufgehellte
   Flaeche ist am 5. August 2026 ersatzlos rausgefallen, sie wirkte als
   fremder Blauton. Der Grund bleibt jetzt einfach Navy.
   ACHTUNG, nicht zusammenlegen: kennt ein Browser einen Selektor in einer
   Komma-Liste nicht, verwirft er die komplette Regel. :focus-visible steht
   darum bewusst allein, sonst faellt mit ihm auch der Hover-Zustand weg. */
.saeulen__wert:hover,
.saeulen__wert.is-aktiv {
  z-index: 2;
  border-color: rgba(203, 170, 98, 0.55);
  transform: translateY(-8px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
  outline: none;
}

.saeulen__wert:focus-visible {
  z-index: 2;
  border-color: rgba(203, 170, 98, 0.55);
  transform: translateY(-8px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
  outline: none;
}

.saeulen__wert:hover::after,
.saeulen__wert.is-aktiv::after {
  opacity: 1;
}

.saeulen__wert:focus-visible::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .saeulen__wert:hover,
  .saeulen__wert.is-aktiv { transform: none; }
  .saeulen__wert:focus-visible { transform: none; }
}

/* AUSGEBLENDET am 5. August 2026: die senkrechten Goldlinien zwischen den
   Werten. Die Grafik im Hintergrund hat ihre eigenen Saeulen, und die
   stehen genau an denselben Stellen. Zwei Trennungen uebereinander.

@media (min-width: 700px) {
  .saeulen__wert + .saeulen__wert::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    transition: opacity 0.35s ease;
    background: linear-gradient(180deg,
      rgba(203, 170, 98, 0) 0%,
      rgba(203, 170, 98, 0.7) 22%,
      rgba(203, 170, 98, 0.7) 78%,
      rgba(203, 170, 98, 0) 100%);
  }

  .saeulen__wert:hover::before,
  .saeulen__wert.is-aktiv::before,
  .saeulen__wert:hover + .saeulen__wert::before,
  .saeulen__wert.is-aktiv + .saeulen__wert::before {
    opacity: 0;
  }

  .saeulen__wert:focus-visible::before,
  .saeulen__wert:focus-visible + .saeulen__wert::before {
    opacity: 0;
  }
}
*/

/* Nummerierung 01 bis 04 entfernt am 5. August 2026, die vier Werte
   stehen gleichwertig nebeneinander und brauchen keine Reihenfolge. */

.saeulen__wert h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.saeulen__wert p {
  font-size: 0.98rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
}
.saeulen__hotspot {
  position: absolute;
  top: 5%;
  height: 88%;
  width: 19%;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 46% 46% 6px 6px;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.saeulen__hotspot:nth-of-type(1) { left: 5.7%; }
.saeulen__hotspot:nth-of-type(2) { left: 28.9%; }
.saeulen__hotspot:nth-of-type(3) { left: 52.1%; }
.saeulen__hotspot:nth-of-type(4) { left: 75.2%; }

.saeulen__hotspot:hover { background-color: rgba(173,135,65,0.10); }
.saeulen__hotspot:focus-visible { outline: 2px solid #ad8741; outline-offset: -4px; }

/* --- Die vier Wörter --- */

.saeulen__words {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 520px;
  margin: 6px auto 0;
}

.saeulen__word {
  font-family: 'Cinzel Decorative', serif;
  font-weight: 700;
  font-size: clamp(0.95rem, 1.7vw, 1.2rem);
  letter-spacing: 0.02em;
  color: #1a2333;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 4px 8px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.saeulen__word:hover { color: #ad8741; }
.saeulen__word:focus-visible { outline: 2px solid #ad8741; outline-offset: 2px; }

.saeulen__word[aria-expanded="true"] {
  color: #ad8741;
  border-bottom-color: #ad8741;
}

/* --- Detailtext --- */

.saeulen__detail {
  max-width: 760px;
  margin: 16px auto 0;
  /* Reserve fuer den laengsten Text bei voller Schriftgroesse (1.35rem) */
  min-height: 76px;
  text-align: center;
}

.saeulen__detail p {
  font-family: Poppins, 'Century Gothic', sans-serif;
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  line-height: 1.65;
  font-weight: 300;
  color: #1a2333;
  margin: 0;
  animation: saeulenFade 0.3s ease;
}

@keyframes saeulenFade {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .saeulen__detail p { animation: none; }
  .saeulen__hotspot, .saeulen__word { transition: none; }
}

/* --- Mobil --- */

@media (max-width: 720px) {
  .saeulen { padding: 56px 16px 40px; }
  .saeulen__title { margin-bottom: 20px; }
  .saeulen__words { grid-template-columns: repeat(2, 1fr); gap: 2px 8px; margin-top: 10px; }
  .saeulen__word { font-size: 1.25rem; padding: 10px 2px 8px; }
  /* Reserve fuer den laengsten Text, damit beim Wechseln nichts springt */
  .saeulen__detail { min-height: 120px; margin-top: 14px; }
  .saeulen__detail p { font-size: 1.45rem; }
}

@media (max-width: 480px) {
  /* Unter 480px braucht der laengste Text (Empathie) 230px */
  .saeulen__detail { min-height: 165px; }
}

/* ---------- Cookie-Hinweis (reiner Info-Banner, kein Consent-Tool) ---------- */

.cookie-hinweis {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--navy);
  color: rgba(255, 255, 255, 0.9);
  border-top: 2px solid;
  border-image: linear-gradient(90deg, #fbeda4, #cbaa62) 1;
  padding: 18px 0;
  transform: translateY(100%);
  transition: transform 0.4s ease;
}

.cookie-hinweis.is-sichtbar { transform: translateY(0); }

.cookie-hinweis__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 26px;
  text-align: center;
}

.cookie-hinweis__text {
  font-size: 1rem;
  line-height: 1.55;
  max-width: 760px;
}

.cookie-hinweis__text a {
  color: var(--gold-hell);
  border-bottom: 1px solid var(--gold-hell);
}

.cookie-hinweis__btn {
  flex-shrink: 0;
  padding: 11px 28px;
  font-size: 0.95rem;
}

@media (prefers-reduced-motion: reduce) {
  .cookie-hinweis { transition: none; }
}

/* ---------- Kachelband, Sektionstrenner ----------
   Regeln laut Brand Book: nur als schmales Band zwischen Sektionen,
   nie ganzflaechig, nie mit Text darueber, nie ueber Boegen oder Rahmen.
   Die dichte Kachel ist textfreien Flaechen vorbehalten, das Band ist
   genau so eine Flaeche. Maximal drei Baender pro Seite.
   Das Muster im Saeulenhaus ist davon unberuehrt.                        */

/* Kachelband als Sektionstrenner stillgelegt, Entscheid vom 2. August 2026.
   Das dichte Muster funktioniert als Flaeche, nicht als schmaler Streifen.
   Die Kacheln liegen weiterhin unter img/ bereit. Nicht loeschen.

.kachelband {
  height: 72px;
  background-image: url("../img/kachel-dicht.png");
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: center;
  border-top: 1px solid var(--hellgrau);
  border-bottom: 1px solid var(--hellgrau);
  overflow: hidden;
}

@media (max-width: 720px) {
  .kachelband { height: 60px; }
}

@media (prefers-reduced-motion: no-preference) {
  .kachelband { will-change: auto; }
}
*/

/* ---------- Claim direkt unter dem Hero ---------- */

/* Traegt seit dem 3. August 2026 auch den Vorher-Nachher-Vergleich,
   deshalb unten mehr Luft als zuvor. */
.claim {
  background: var(--weiss);
  padding: 44px 0 72px;
}

.claim__text {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  line-height: 1.55;
  color: var(--navy);
}

/* ---------- Werkzeuge, Raumwert-Check und Tragbarkeitsrechner ---------- */

.werkzeuge { background: var(--creme); }

.werkzeuge__grid {
  display: grid;
  gap: 26px;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 720px) {
  .werkzeuge__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.werkzeug {
  background: var(--weiss);
  border: 1px solid var(--hellgrau);
  border-top: 3px solid;
  border-image: linear-gradient(90deg, #fbeda4, #cbaa62) 1;
  padding: 34px 28px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  overflow-wrap: break-word;
  text-align: center;
}

.werkzeug__label {
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 12px;
}

.werkzeug__titel {
  font-size: 1.25rem;
  margin-bottom: 12px;
}

.werkzeug__text {
  font-size: 1.15rem;
  color: rgba(26, 35, 51, 0.82);
  margin-bottom: 24px;
  flex: 1;
}

/* ---------- Brand-Clip auf der Startseite ----------
   Stummer Loop, kein Ton, keine Bedienelemente. Kein Ken-Burns-Zoom,
   der Clip bewegt sich selbst.                                          */

.video__clip {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  background: var(--navy);
}

/* Bewegung reduzieren: Schleife anhalten, Standbild zeigen */
@media (prefers-reduced-motion: reduce) {
  .video__clip { animation: none; }
}

/* ============================================================
   Kreisfoermige Leistungsgrafik
   Am 5. August 2026 aus dem Kopf von verkauf.html hierher verschoben,
   weil die Grafik jetzt auf index.html steht. Eine Quelle statt zwei.
   ============================================================ *//* ---------- Kreisförmige Leistungsgrafik ---------- */
/* Zwei Klassen, damit die Regel unabhaengig von der Ladereihenfolge
   gegen .section gewinnt. Abstaende bewusst knapper als bei den
   uebrigen Sektionen, die Grafik traegt selbst viel Weissraum. */
.section.kreis { background: var(--weiss); padding: 40px 0 44px; }
.kreis__cta { text-align: center; margin-top: 26px; }
.section.kreis .section-subtitle { margin-bottom: 24px; }

/* Auf der Startseite bewusst kleiner als die 1040px, die sie auf der
   Verkaufsseite hatte. Dort war sie der Hauptinhalt, hier ein Baustein. */
.wrtx-wrap {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 0;
}

/* Bühne im Verhältnis 1500:1200 (5:4) – extra Rand für die seitlichen Labels */
.wrtx-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1500 / 1020;
  user-select: none;
}

svg.wrtx-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Die obere Ebene liegt ueber den Icons. Frueher war sie komplett
   klickdurchlaessig, dadurch waren auch die Beschriftungen tot.
   Jetzt sind nur die dekorativen Ringe und die leere Flaeche
   durchlaessig, die Beschriftungen nehmen Klicks an. */
svg.wrtx-svg-top { pointer-events: none; }
svg.wrtx-svg-top foreignObject { pointer-events: auto; }
svg.wrtx-svg-top .wrtx-ring { pointer-events: none; }

.wrtx-arrow {
  stroke: var(--navy);
  stroke-width: 6;
  fill: none;
  stroke-linecap: round;
}

.wrtx-ring {
  fill: none;
  stroke: var(--navy);
  stroke-width: 6;
}

.wrtx-node-img {
  position: absolute;
  width: 7.4667%;
  height: auto;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  outline: none;
}

.wrtx-node-img:hover {
  filter: brightness(1.06);
  transform: translate(-50%, -50%) scale(1.05);
}

/* Tastatur-Fokus sichtbar (dezenter Gold-Glow), Maus/Touch bleibt unmarkiert */
.wrtx-node-img:focus-visible {
  box-shadow: 0 0 0 4px rgba(225, 213, 153, 0.9), 0 0 10px 4px rgba(173, 135, 65, 0.5);
}

/* Labels als foreignObject -> skalieren 1:1 mit Icons, Ringen und Pfeilen */
.wrtx-label-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.3;
  color: var(--navy);
  /* Beschriftungen stehen dauerhaft. Wer die Seite ueberfliegt, soll die
     acht Leistungen lesen koennen, ohne vorher klicken zu muessen. */
  opacity: 1;
  transform: none;
  transition: color 0.35s ease;
  padding: 4px;
}

.wrtx-link {
  /* Die Ebene darueber ist bewusst klickdurchlaessig, damit die Icons
     darunter erreichbar bleiben. Nur die Links selbst nehmen Klicks an. */
  pointer-events: auto;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(173, 135, 65, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
}

.wrtx-link:hover { color: var(--gold); text-decoration-color: var(--gold); }

.wrtx-label-box .wrtx-sub {
  display: block;
  font-weight: 400;
  font-style: italic;
  font-size: 18px;
  opacity: 0.8;
  margin-top: 6px;
}

/* Klick oder Hover hebt nur noch hervor, es blendet nichts mehr ein. */
.wrtx-label-box.is-active {
  color: var(--gold);
}

.wrtx-center-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  z-index: 2;
  width: 12.6667%;
}

.wrtx-center-label img {
  width: 100%;
  height: auto;
  display: block;
}

.wrtx-hint {
  max-width: 560px;
  margin: 14px auto 0;
  text-align: center;
  color: var(--gold);
  font-size: 0.98rem;
  border-top: 1px solid var(--hellgrau);
  padding-top: 18px;
}

/* ============================================================
   Textgroessen-Skala, festgelegt am 6. August 2026

   Ursache der bisherigen Unstimmigkeit: die Grundschrift steht auf
   20px, und jeder Absatz ohne eigene Regel erbt diese 20px. Die
   gestalteten Bloecke liegen aber bei 16 bis 17px. Dadurch waren
   ausgerechnet Einleitungen, Untertitel und Schlusstexte ueberall
   die groessten Elemente der Seite.

   Drei Stufen, mehr nicht:
     Fliesstext in Bloecken   rund 16px  (bestehende Regeln, rem-basiert)
     Einleitung und Untertitel      18px  (1.12rem)
     Hervorhebung, Claim, Statement 20px  (1.25rem)

   Diese Regeln stehen bewusst am Dateiende, damit sie gegen die
   aelteren Regeln gewinnen, ohne dass diese angefasst werden muessen.
   ============================================================ */

.section-subtitle,
.hero__text,
.kompass__text,
.final-cta__text,
.methode__short,
.kontakt-erfolg__titel,
.kontakt-erfolg__text {
  font-size: 1.12rem;
}

.hero__slogan { font-size: 1.2rem; }

.claim__text     { font-size: clamp(1.1rem, 1.8vw, 1.25rem); }
.statement__text { font-size: clamp(1.1rem, 1.8vw, 1.25rem); }
.letter p:first-of-type { font-size: 1.2rem; }

/* ---------- Ueberschriften, die keine echten Ueberschriften sind ----------
   Entscheid vom 6. August 2026. Alle Abschnittstitel lagen bei 31px.
   Bei diesen vier ist der Titel aber nur Ueberleitung, nicht Aussage:
   der Inhalt darunter traegt. Darum kleiner. */
.testimonials .section-title,
.faq .section-title,
.video .section-title {
  font-size: clamp(1.2rem, 2.3vw, 1.5rem);
}

.kompass .section-title {
  font-size: clamp(1.15rem, 2.1vw, 1.4rem);
  line-height: 1.4;
}

/* Kein Titel, sondern die Einleitung zum Statement darunter. */
.statement .section-title {
  font-size: clamp(1.05rem, 1.8vw, 1.22rem);
  padding-bottom: 0;
  background-image: none;
  margin-bottom: 20px;
}

/* ---------- Rangfolge der Titel auf der Verkaufsseite ----------
   Die Methode ist das Alleinstellungsmerkmal und bleibt der grosse Titel.
   Verkaufsprozess und Abschluss beschreiben den Ablauf und ordnen sich
   darum unter. Vorher standen alle drei gleich gross nebeneinander. */
.prozess .section-title,
.abschluss .section-title {
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
}

/* ============================================================
   Rezensionen: gekuerzt mit Aufklappen
   Die Bewertungen sind teils sehr lang, ungekuerzt fuellten sie auf
   dem Handy mehrere Bildschirme. Sechs Zeilen, dann ein Schalter.
   ============================================================ */
.stimme__zitat.is-gekuerzt {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.stimme__mehr {
  align-self: flex-start;
  margin-top: 10px;
  padding: 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--gold);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--gold);
  cursor: pointer;
}

.stimme__mehr:hover { color: var(--navy); border-bottom-color: var(--navy); }

/* ============================================================
   Handy-Feinschliff, 6. August 2026
   Alle Punkte aus dem Durchgang auf dem Telefon.
   ============================================================ */

/* Telefonnummer auf eine eigene Zeile, sonst bricht sie unschoen um */
.final-cta__phone a,
.wertfrage__phone a { display: block; margin-top: 4px; }

@media (max-width: 899px) {
  /* Das Haus stand nur ab 900px hinter dem Text. Auf dem Handy fehlte es
     ganz, obwohl gerade dort der Hero sonst sehr leer wirkt. */
  .hero { position: relative; overflow: hidden; }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/index-hero-hintergrund.jpg");
    background-size: cover;
    background-position: center;
    opacity: 0.18;
    z-index: 0;
    pointer-events: none;
  }

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

  /* Unterschrift war auf kleinen Bildschirmen zu breit */
  .letter__signature img { width: 190px; }
  .hero__signatur img { width: 140px; }

  /* Aufzaehlungskaesten der Fragen an die uebrige Schriftgroesse angleichen */
  .faq__question { font-size: 1rem; padding: 16px 46px 16px 18px; }
  .faq__answer__inner, .faq__answer p { font-size: 0.95rem; }
  .faq__question::after { right: 16px; }

  /* Die vier Werte standen mit 40px Abstand sehr weit auseinander */
  .saeulen__werte { gap: 22px 0; }
  .saeulen__wert { padding: 10px 18px 12px; }
}

/* Der Pfeil gehoert zum Text und darf nicht allein umbrechen */
.kreis__cta .btn { white-space: normal; }
.kreis__cta .btn .pfeil { white-space: nowrap; }

/* ---------- Weitere Handy-Korrekturen, 6. August 2026 ---------- */
@media (max-width: 899px) {
  /* Kreisgrafik war auf dem Handy zu klein zum Lesen. Sie bekommt eine
     Mindestbreite und darf seitlich gescrollt werden, statt auf
     Briefmarkengroesse zu schrumpfen. */
  .kreis .container { padding-left: 0; padding-right: 0; }

  .wrtx-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px 8px;
  }

  .wrtx-stage { min-width: 560px; }

  /* Vorher-Nachher: Pfeiltasten legen sich aufs Bild, damit der
     Bildausschnitt die volle Breite bekommt. */
  .vn { gap: 0; }

  .vn__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
  }

  .vn__nav--prev { left: 4px; }
  .vn__nav--next { right: 4px; }

  /* Partnerlogos waren auf dem Handy fast bildschirmbreit */
  .partner__logos img { max-width: 210px; }
}

/* Ueberschriften, die auf dem Handy auf zwei Zeilen brachen und laut
   Durchgang vom 6. August auf eine gehoeren. */
@media (max-width: 620px) {
  .about-hero__eyebrow { font-size: 0.72rem; letter-spacing: 0.14em; }
  .story__eyebrow { font-size: 0.72rem; letter-spacing: 0.12em; }
  .direkt__titel { font-size: 0.95rem; }
  .partner .section-subtitle { font-size: 0.95rem; }
}

/* ---------- Nachbesserungen Handy, zweiter Durchgang ---------- */
@media (max-width: 899px) {
  /* cover schnitt das Haus auf ein Detail zu. contain zeigt es ganz,
     so wie am Laptop, wo die Maske dasselbe bewirkt. */
  .hero::before {
    background-size: contain;
    background-position: center 38%;
    background-repeat: no-repeat;
    opacity: 0.22;
  }
}

/* Vor der Unterschrift stand zu viel Luft */
.letter__signature { margin: 14px 0 6px; }
.letter__sender { line-height: 1.5; }

/* Referenzen, die erst auf Knopfdruck erscheinen */
.objekt-card.is-versteckt { display: none; }

.referenzen__mehr {
  display: block;
  margin: 32px auto 0;
}

/* Zeilenumbrueche, die nur auf dem Handy greifen */
.br-handy { display: none; }
@media (max-width: 620px) {
  .br-handy { display: inline; }
}

/* Vier Werte auf dem Handy: Eyebrow und Titel kleiner, damit
   "Das Fundament für jeden Verkauf ·" auf die erste Zeile passt,
   und die Abstaende zwischen den vier Werten weiter herunter. */
@media (max-width: 620px) {
  .saeulen__eyebrow { font-size: 0.7rem; letter-spacing: 0.1em; }
  .saeulen__title   { font-size: 0.98rem; line-height: 1.4; }
  .saeulen__werte   { gap: 8px 0; margin-top: 26px; }
  .saeulen__wert    { padding: 6px 14px 8px; }
  .saeulen__wert h3 { font-size: 1.05rem; margin-bottom: 6px; }
  .saeulen__wert p  { font-size: 0.92rem; line-height: 1.55; }
  .saeulen          { padding: 40px 16px 44px; }
}

/* ---------- Nachbesserungen, dritter Handy-Durchgang ---------- */

/* Vor der Unterschrift blieb Luft, weil der letzte Briefabsatz 20px
   Abstand nach unten hat. :last-of-type traf die Absenderzeile, nicht
   den Absatz davor, darum zieht der negative Abstand hier. */
.letter__signature { margin: -18px 0 4px; }

@media (max-width: 620px) {
  /* Titel der Lebenslauf-Bloecke: das sind h3, nicht die Eyebrows.
     Darum haben die bisherigen Regeln nicht gegriffen. */
  .story__titel { font-size: 1.02rem; line-height: 1.3; }

  /* Knöpfe im Hero mittig und noch im Bildbereich */
  .hero__content { text-align: center; padding-left: 0; }
  .hero__text { margin-left: auto; margin-right: auto; }
  .hero__ctas { justify-content: center; }

  /* Vor dem ersten Partnerlogo stand zu viel Luft */
  .partner__logos { margin-top: 10px; }
}

/* Rollenzeile im Hero brauchte auf dem Handy drei Zeilen statt zwei */
@media (max-width: 620px) {
  .hero__role { font-size: 0.9rem; line-height: 1.45; }
}

/* ---------- Vierter Handy-Durchgang ---------- */

/* Der Mittelpunkt gehoert ans Ende der ersten Zeile, auf dem Handy
   entfaellt er, weil der Umbruch die Trennung schon leistet. */
.mp-hero { white-space: nowrap; }
@media (max-width: 620px) { .mp-hero { display: none; } }

/* Alle goldenen Kopfzeilen gleich gross, ueber alle Seiten hinweg */
@media (max-width: 620px) {
  .hero__eyebrow,
  .about-hero__eyebrow,
  .page-hero__eyebrow,
  .dubai-hero__eyebrow,
  .saeulen__eyebrow,
  .story__eyebrow { font-size: 0.78rem; letter-spacing: 0.12em; }
}

@media (max-width: 899px) {
  /* Hochformatige Fassung: das Querformat ergab bei voller Sichtbarkeit
     nur ein 210px hohes Band, die Knoepfe lagen darunter. Dieses Bild
     ist 3:4 und deckt den ganzen Textblock ab. */
  .hero::before {
    background-image: url("../img/index-hero-hintergrund-hoch.jpg");
    background-size: 100% auto;
    background-position: center top;
    opacity: 0.2;
  }
}

/* ============================================================
   Fuenfter Handy-Durchgang, 6. August 2026
   ============================================================ */

/* Hintergrundbild deckt jetzt garantiert den ganzen Hero ab.
   Vorher war die Bandhoehe an die Bildbreite gekoppelt (100% auto):
   auf einem Telefon mit etwas groesserer Schrift oder schmalerem
   Bildschirm wuchs der Text ueber das Band hinaus. cover richtet sich
   nach dem Kasten statt nach dem Bild und funktioniert damit auf jedem
   Geraet. Das Haus wird seitlich beschnitten, bleibt bei 20 Prozent
   Deckkraft aber als Flaeche erkennbar. */
@media (max-width: 899px) {
  .hero::before {
    background-image: url("../img/index-hero-hintergrund-hoch.jpg");
    background-size: cover;
    background-position: center 30%;
    opacity: 0.2;
  }
}

/* Goldene Kopfzeilen ueberall gleich gross.
   Der Zusatz body davor ist Absicht: jede Unterseite definiert diese
   Klassen in ihrem eigenen Style-Block, der nach style.css geladen wird.
   Mit der hoeheren Spezifitaet gewinnt diese Regel trotzdem, und die
   Groesse muss nur an einer Stelle gepflegt werden. */
@media (max-width: 620px) {
  body .hero__eyebrow,
  body .about-hero__eyebrow,
  body .page-hero__eyebrow,
  body .dubai-hero__eyebrow,
  body .saeulen__eyebrow,
  body .story__eyebrow,
  body .artikel__eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
  }
}

/* ============================================================
   Sechster Durchgang, 6. August 2026
   ============================================================ */

/* Das Bild gehoert hinter den Einstiegstext, nicht hinter das ganze
   Hero. Auf dem Handy stehen Text und Portraet untereinander, ein
   Hintergrund auf .hero lag darum auch hinter dem Portraet. Jetzt
   sitzt er auf dem Textblock selbst: dadurch deckt er ihn auf jedem
   Geraet exakt ab, unabhaengig davon, wie oft der Text umbricht. */
@media (max-width: 899px) {
  .hero::before { display: none; }

  .hero__content {
    position: relative;
    isolation: isolate;
    padding: 22px 16px 26px;
  }

  .hero__content::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/index-hero-hintergrund-hoch.jpg");
    background-size: cover;
    background-position: center 35%;
    opacity: 0.2;
    z-index: -1;
    pointer-events: none;
  }
}

/* Goldene Kopfzeilen: endgueltig gleich gross. Die Seitenstyles setzen
   diese Klassen jeweils selbst, darum hier mit Vorrang. */
@media (max-width: 620px) {
  .hero__eyebrow,
  .about-hero__eyebrow,
  .page-hero__eyebrow,
  .dubai-hero__eyebrow,
  .saeulen__eyebrow,
  .story__eyebrow { font-size: 0.7rem !important; letter-spacing: 0.14em !important; }

  /* Ueberschriften, die auf eine Zeile gehoeren */
  .about-hero h1 { font-size: 1.15rem !important; }
  .dubai-hero h1 { font-size: 1.35rem !important; }
}

/* Resolve ist ein sehr flaches Logo und wirkte bei gleicher Hoehe
   winzig. Es bekommt darum mehr Breite, auf allen Bildschirmen. */


/* Resolve: die Datei hatte rund 90px Leerraum um den Schriftzug und
   wirkte dadurch winzig. Sie ist jetzt zugeschnitten, die Sonderregel
   fuer die Breite ist damit hinfaellig. */
.partner__logos img[src*="resolve"] { max-width: 200px !important; }