/* ==========================================================================
   TIMOments – Design-System
   Farben, Schriftgrößen und Abstände entsprechen der Vorlage timoments.de
   ========================================================================== */

@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/Merriweather-300.woff2') format('woff2');
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/Merriweather-300i.woff2') format('woff2');
  font-weight: 300 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --navy: #192c4a;
  --navy-deep: #12213a;
  --gold: #d6ad35;
  --gold-dark: #b8912a;
  --gold-light: #e8c968;
  /* Gold als Textfarbe auf hellem Grund – erfüllt 4.5:1 (WCAG AA) */
  --gold-text: #7a601a;
  --black: #0a0a0a;
  --ink: #1c2431;
  --muted: #5a6478;
  --line: #dde3f0;
  --white: #fff;
  --surface: #f4f6fc;
  --surface-2: #dee5fc;
  --grad-light: linear-gradient(#f4f6fc, #dee5fc);

  --font-head: 'Merriweather', Georgia, serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --wrap: 1304px;
  --pad-x: 2rem;
  --pad-y: 7.5rem;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;

  --sh-sm: 0 2px 8px rgba(25, 44, 74, .08);
  --sh-md: 0 8px 30px rgba(25, 44, 74, .12);
  --sh-lg: 0 20px 60px rgba(25, 44, 74, .18);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .24s;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 300;
  color: var(--navy);
  margin: 0 0 .5em;
  line-height: 1.15;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.5rem, 1.7rem + 3.4vw, 4rem); color: var(--white); }
h2 { font-size: clamp(2.1rem, 1.5rem + 2.5vw, 3.25rem); }
h3 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.75rem); }
p { margin: 0 0 1rem; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* Fokus sichtbar lassen — nie entfernen */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible { outline-color: var(--gold-light); }

.skip-link {
  position: absolute; left: 0; top: -100px;
  background: var(--gold); color: var(--navy);
  padding: 14px 24px; z-index: 999;
  font-weight: 600; text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.section { padding-block: clamp(3.5rem, 2rem + 6vw, 7.5rem); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.section--grad { background: var(--grad-light); }
.section--navy { background: var(--navy); color: #fff; }
.section--navy h2, .section--navy h3 { color: #fff; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 .75rem;
}
.section--navy .eyebrow, .on-dark .eyebrow, .hero .eyebrow,
.contact-band .eyebrow, .page-head .eyebrow { color: var(--gold); }
.lead { font-size: clamp(1rem, .95rem + .25vw, 1.125rem); color: var(--muted); }
.section--navy .lead, .on-dark .lead, .contact-band .lead, .hero .lead { color: rgba(255, 255, 255, .86); }

/* -------------------------------------------------------------- Buttons  */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 48px;
  padding: 13px 26px;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--gold); color: var(--navy); border-color: var(--gold); font-weight: 400; }
.btn--primary:hover { background: var(--gold-light); border-color: var(--gold-light); box-shadow: var(--sh-md); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; }
.btn--lg { min-height: 56px; padding: 16px 32px; font-size: 1.0625rem; }
.btn__icon { width: 20px; height: 20px; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active { transform: none; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* -------------------------------------------------------------- Kopfzeile */
/* Angesprungene Abschnitte halten Abstand zum klebenden Kopf, sonst
   verschwindet ihre Überschrift darunter. */
section[id] { scroll-margin-top: 88px; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  /* Bezugspunkt für das ausgeklappte Menü */
  isolation: isolate;
  background: var(--navy);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: .875rem;
}
.brand { display: flex; align-items: center; min-height: 48px; }
.brand img { width: 200px; height: auto; }
.nav { display: flex; align-items: center; gap: .25rem; }
.nav a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 10px 16px;
  color: rgba(255, 255, 255, .88);
  font-size: .9375rem; text-decoration: none;
  position: relative;
  transition: color var(--dur) var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: 6px;
  height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav a:hover { color: #fff; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav-cta { margin-left: .75rem; }
/* schlägt die weiße Linkfarbe der Navigation – Gold trägt dunklen Text */
.nav a.btn--primary { color: var(--navy); }

.nav-toggle {
  display: none; width: 48px; height: 48px;
  background: none; border: 0; cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; background: #fff;
  position: relative; transition: background var(--dur) var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ''; position: absolute; left: 0; width: 24px; height: 2px; background: #fff;
  transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}
.nav-toggle span::before { top: -8px; }
.nav-toggle span::after { top: 8px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    /* hängt unter der Kopfzeile, ohne dass eine Höhe gemessen werden muss */
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: var(--navy); padding: 1rem var(--pad-x) 2rem;
    gap: .25rem; max-height: calc(100dvh - 100%); overflow-y: auto;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .25);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .nav[data-open="true"] { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav a { min-height: 52px; font-size: 1.0625rem; border-bottom: 1px solid rgba(255,255,255,.1); }
  .nav a::after { display: none; }
  .nav-cta { margin: 1rem 0 0; }
  .brand img { width: 168px; }
}

/* -------------------------------------------------------------- Hero      */
.hero {
  position: relative;
  min-height: clamp(560px, 62vh, 820px);
  display: flex; align-items: center;
  background: var(--navy);
  isolation: isolate;
  overflow: hidden;
}
.hero__media {
  position: absolute; inset: 0; z-index: -2;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(25,44,74,.97) 0%, rgba(25,44,74,.92) 38%, rgba(25,44,74,.35) 68%, rgba(25,44,74,.15) 100%);
}
.hero__inner { padding-block: clamp(3rem, 2rem + 5vw, 6rem); width: 100%; }
.hero__body { max-width: 640px; }
.hero h1 { margin-bottom: 1.25rem; }
.hero h1 em { font-style: italic; color: var(--gold); }
.hero__text { color: rgba(255, 255, 255, .9); font-size: clamp(1rem, .95rem + .3vw, 1.125rem); max-width: 34em; }
.hero .btn-row { margin-top: 2rem; }
.hero__note {
  display: flex; align-items: center; gap: .5rem;
  margin-top: 1.5rem; font-size: .875rem; color: rgba(255,255,255,.75);
}
.hero__note svg { width: 18px; height: 18px; flex: none; color: var(--gold); }

@media (max-width: 720px) {
  /* Auf schmalen Geräten steht das Foto als eigener Block über dem Text,
     statt hinter ihm zu liegen. Als Hintergrund brauchte es einen Verlauf
     mit 72 bis 97 Prozent Deckkraft, damit der weiße Text lesbar blieb —
     vom Motiv war dann nichts mehr zu erkennen. */
  .hero { display: block; min-height: auto; }
  .hero__media {
    position: relative; inset: auto; z-index: 0;
    height: clamp(230px, 64vw, 330px);
  }
  /* Timo steht im Bild rechts; der Ausschnitt folgt ihm. */
  .hero__media img { object-position: 74% top; }
  /* Nur der untere Rand läuft ins Navy aus, damit Bild und Textblock
     ineinander übergehen. Das Gesicht bleibt unberührt. */
  .hero__media::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
    height: 38%; pointer-events: none;
    background: linear-gradient(180deg, rgba(25,44,74,0) 0%, rgba(25,44,74,.55) 52%, var(--navy) 100%);
  }
  .hero__scrim { display: none; }
  .hero__inner { padding-block: 1.75rem 3.5rem; }
}

/* -------------------------------------------------------------- Fakten    */
.facts { background: var(--navy-deep); color: #fff; }
.facts__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: rgba(255,255,255,.12);
}
.fact { background: var(--navy-deep); padding: 1.75rem 1.25rem; text-align: center; }
.fact__num {
  font-family: var(--font-head); font-size: clamp(1.125rem, .85rem + 1.2vw, 2rem);
  color: var(--gold); display: block; line-height: 1.15;
  overflow-wrap: anywhere; hyphens: auto;
}
.fact__label { font-size: .8125rem; color: rgba(255,255,255,.72); margin: .5rem 0 0; line-height: 1.35; }
@media (max-width: 900px) { .facts__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .facts__grid { grid-template-columns: 1fr; }
  .fact { display: flex; align-items: baseline; gap: .75rem; text-align: left; padding: 1rem 1.25rem; }
  .fact__num { flex: none; }
  .fact__label { margin: 0; }
}

/* -------------------------------------------------------------- Logoband  */
.logos { background: var(--grad-light); padding-block: 2.5rem; overflow: hidden; }
.logos__label {
  text-align: center; font-size: .8125rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 1.5rem;
}
/* Ohne weiche Kante: Sie blendete die äußeren Einträge teilweise aus, was
   wie ein Anschnitt aussah. Es rückt ohnehin immer genau ein ganzer Eintrag
   nach, harte Kanten fallen dabei nicht auf. */
.marquee { position: relative; overflow: hidden; }
.marquee__track {
  display: flex; gap: 1.5rem; width: max-content;
  transition: transform 1.2s cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { transition: none; transform: none; flex-wrap: wrap; width: 100%; justify-content: center; gap: 2rem 3rem; }
  .marquee { overflow: visible; }
}
.logo-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; flex: none; width: var(--logo-breite, auto);
}
.logo-item img { height: 44px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .62; transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.logo-item:hover img { filter: grayscale(0); opacity: 1; }
.logo-item span { font-size: .75rem; color: var(--muted); text-align: center; max-width: 15ch; line-height: 1.25; }
/* Einträge ohne Logo treten als Wortmarke auf und übernehmen den Aufbau der
   Bild-Logos: Marke oben in Merriweather, Ort klein darunter. Dieselbe
   Zurückhaltung wie die entsättigten Logos, damit sie nicht kräftiger
   wirken als die Häuser, für die es ein Logo gibt. */
.logo-item--wort .wortmarke {
  /* Raster statt Flexbox: Als Flex-Element schrumpft der Text auf seine
     kleinstmögliche Breite und bricht dann mitten in den Wörtern um. */
  display: grid; align-content: center;
  width: 100%; min-height: 44px; max-width: none; text-align: center;
  font-family: var(--font-head); font-weight: 300;
  font-size: clamp(.875rem, .8rem + .3vw, 1.0625rem); line-height: 1.15;
  color: var(--navy); opacity: .62;
  /* Nur an Silben- und Bindestrichgrenzen trennen — 'anywhere' zerlegte
     die Namen mitten im Wort. */
  hyphens: auto;
  transition: opacity var(--dur) var(--ease);
}
.logo-item--wort:hover .wortmarke { opacity: 1; }

/* -------------------------------------------------------------- Split     */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__media img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh-lg); }
.split__body p strong { font-weight: 600; color: var(--navy); }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
}

.tags { display: flex; flex-wrap: wrap; gap: .625rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.tags li {
  max-width: 100%; overflow-wrap: break-word;
  font-size: .875rem; font-weight: 500; color: var(--navy);
  background: rgba(214, 173, 53, .14);
  border: 1px solid rgba(214, 173, 53, .4);
  padding: 7px 14px;
}

/* -------------------------------------------------------------- Leistungen */
.services { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); margin-top: 3rem; }
@media (max-width: 860px) { .services { grid-template-columns: 1fr; } }
.service {
  /* Lange Einzelwörter (Kulturveranstaltungen) dürfen die Karte nicht
     über die Schirmbreite hinausdrücken */
  min-width: 0;
  background: #fff; padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  border: 1px solid var(--line); border-top: 3px solid var(--gold);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  display: flex; flex-direction: column;
}
.service:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.service__icon {
  width: 56px; height: 56px; margin-bottom: 1.25rem;
  display: grid; place-items: center;
  /* Die Icons sind weiß gezeichnet und brauchen einen dunklen Grund */
  background: var(--navy);
  transition: background var(--dur) var(--ease);
}
.service:hover .service__icon { background: var(--gold); }
.service__icon img { width: 30px; height: 30px; }
.service h3 { margin-bottom: .75rem; overflow-wrap: break-word; hyphens: auto; }
.service p { color: var(--muted); font-size: 1rem; flex: 1; }
.service .tags { margin-top: 1.25rem; }
.service .tags li { background: var(--surface); border-color: var(--line); color: var(--muted); }

/* -------------------------------------------------------------- Video     */
.video-frame {
  position: relative; margin-top: 2.5rem;
  aspect-ratio: 16 / 9; background: var(--navy);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg);
}
.video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-frame__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 1rem; text-align: center; padding: 1.5rem;
  background: linear-gradient(rgba(25,44,74,.1) 45%, rgba(25,44,74,.85));
}
.video-frame__play { position: absolute; top: 50%; left: 50%; translate: -50% -50%; }
.video-frame__play {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--gold); color: var(--navy); border: 0; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 0 0 0 rgba(214,173,53,.55);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
  animation: pulse 2.6s infinite;
}
.video-frame__play:hover { scale: 1.07; background: var(--gold-dark); }
.video-frame__play svg { width: 32px; height: 32px; margin-left: 4px; }
@keyframes pulse {
  70% { box-shadow: 0 0 0 22px rgba(214,173,53,0); }
  100% { box-shadow: 0 0 0 0 rgba(214,173,53,0); }
}
.video-frame__caption {
  margin: 1rem auto 0; text-align: center;
  font-size: .9375rem; color: var(--muted); max-width: 46ch;
}

/* Der Imagefilm liegt im Hochformat vor und laeuft deshalb nur auf schmalen
   Geraeten. Am Rechner bleibt das Standbild stehen, bis eine Fassung im
   Querformat vorliegt — ein hochkantes Video auf breitem Schirm laesst zwei
   Drittel der Flaeche leer. */
.video-mobil, .video-mobil__caption { display: none; }

@media (max-width: 720px) {
  /* Der Rahmen für das Querformat entfällt auf schmalen Geräten — seine
     Bildunterschrift steht im Markup daneben und muss mit verschwinden,
     sonst steht der Satz zweimal auf der Seite. */
  .video-frame, .video-frame__caption { display: none; }
  .video-mobil {
    display: block; position: relative; margin-top: 2.5rem;
    aspect-ratio: 9 / 16; background: var(--navy);
    border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg);
  }
  .video-mobil video { display: block; width: 100%; height: 100%; object-fit: cover; }
  .video-mobil__caption {
    display: block; margin: 1rem 0 0; text-align: center;
    font-size: .9375rem; color: var(--muted);
  }
}

/* -------------------------------------------------------------- Referenzen */
/* Quotes – Carousel (alle Breakpoints) */
/* Die Reihe wird verschoben, nicht gescrollt — dieselbe Technik wie beim
   Logoband. Nativer Bildlauf mit Rastung ließ sich nicht zuverlässig
   endlos schließen: Der Rücksprung musste aufs Pixel sitzen und die
   Rastung zog ihn zurück. */
.quotes-outer { position: relative; margin-top: 3rem; overflow: hidden; padding: 8px; margin-inline: -8px; }
.quotes {
  display: flex; gap: 1.5rem; width: max-content;
  /* Auf schmalen Geräten enger, damit neben der mittigen Karte noch ein
     erkennbarer Streifen der Nachbarn Platz findet. */
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
  touch-action: pan-y;
}
@media (max-width: 620px) { .quotes { gap: .75rem; } }
.quote {
  /* <figure> bringt vom Browser 40 px Außenabstand mit. Ohne diese Zeile
     brauchte jede Karte 104 px Zwischenraum statt der eingestellten 24 —
     die dritte Karte passte dadurch nicht mehr ins Bild. */
  margin: 0;
  flex: 0 0 var(--karten-breite, 380px);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-sm);
  padding: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.quote:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.quote__mark { font-family: var(--font-head); font-size: 3rem; color: var(--gold); line-height: .8; margin-bottom: .5rem; }
.quote blockquote { margin: 0 0 1.5rem; font-size: 1rem; line-height: 1.6; color: var(--ink); flex: 1; }
.quote__person { display: flex; align-items: center; gap: .875rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }
.quote__person img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
/* Steht kein Portraet zur Verfuegung, tritt ein Monogramm an seine Stelle —
   gleiche Groesse, damit die Karten buendig bleiben. */
.quote__initialen {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--navy); color: var(--gold);
  font-family: var(--font-head); font-size: 1.125rem;
}
.quote__name { font-weight: 600; font-size: .9375rem; color: var(--navy); display: block; }
.quote__role { font-size: .8125rem; color: var(--muted); line-height: 1.35; display: block; }
/* Carousel Pfeile */
.quotes-nav { display: flex; justify-content: center; gap: .75rem; margin-top: 1.25rem; }
.quotes-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--navy); transition: background var(--dur), border-color var(--dur), color var(--dur);
}
.quotes-btn svg { width: 20px; height: 20px; pointer-events: none; }
.quotes-btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.swipe-hint { display: none; }

/* -------------------------------------------------------------- Zitat     */
.pullquote { text-align: center; }
.pullquote blockquote {
  margin: 0 auto; max-width: 24ch;
  font-family: var(--font-head); font-weight: 300;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem); line-height: 1.25; color: #fff;
}
.pullquote__author { margin-top: 1.5rem; color: var(--gold); font-weight: 500; }

/* -------------------------------------------------------------- FAQ       */
.faq { max-width: 860px; margin: 3rem auto 0; }
.faq details {
  border: 1px solid var(--line); background: #fff;
  margin-bottom: .75rem; box-shadow: var(--sh-sm);
}
.faq details[open] { border-color: var(--gold); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.125rem 1.5rem; min-height: 56px;
  font-family: var(--font-head); font-size: 1.0625rem; color: var(--navy);
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: 12px; height: 12px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq summary:hover { background: var(--surface); }
.faq__answer { padding: 0 1.5rem 1.375rem; color: var(--muted); font-size: 1rem; }
.faq__answer p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- Formular  */
.form-panel {
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start;
}
@media (max-width: 900px) { .form-panel { grid-template-columns: 1fr; } }

.steps { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: s; }
.steps li {
  position: relative; padding-left: 3.25rem; margin-bottom: 1.5rem; counter-increment: s;
}
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 0;
  width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  background: var(--gold); color: var(--navy);
  font-family: var(--font-head); font-size: 1rem;
}
.steps strong { display: block; color: #fff; font-weight: 500; margin-bottom: .125rem; }
.steps span { font-size: .9375rem; color: rgba(255,255,255,.75); }

.form-card { background: #fff; padding: clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem); box-shadow: var(--sh-lg); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .375rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .875rem; font-weight: 500; color: var(--navy); }
.field .req { color: #c02a3c; }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: 12px 14px; min-height: 48px;
  border: 1px solid var(--line); background: #fff;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #b9c4dc; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(214, 173, 53, .22);
}
.field__hint { font-size: .8125rem; color: var(--muted); }
.field__error { font-size: .8125rem; color: #c02a3c; display: none; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: #c02a3c; }
.field[data-invalid="true"] .field__error { display: block; }
.form-consent { display: flex; gap: .75rem; align-items: flex-start; font-size: .8125rem; color: var(--muted); margin-top: 1.25rem; }
.form-consent input { width: 24px; height: 24px; min-height: 24px; flex: none; margin-top: 2px; accent-color: var(--gold); }
.form-consent[data-invalid="true"] { color: #c02a3c; }
.form-consent[data-invalid="true"] input { outline: 2px solid #c02a3c; outline-offset: 2px; }
.form-card .btn { width: 100%; margin-top: 1.25rem; }
.form-status { margin-top: 1rem; font-size: .9375rem; padding: 12px 16px; display: none; }
.form-status[data-state="ok"] { display: block; background: rgba(31, 138, 82, .1); color: #1f8a52; border-left: 3px solid #1f8a52; }
.form-status[data-state="err"] { display: block; background: rgba(192, 42, 60, .08); color: #c02a3c; border-left: 3px solid #c02a3c; }

/* -------------------------------------------------------------- Kontakt   */
.contact-band { position: relative; background: var(--navy); isolation: isolate; overflow: hidden; }
.contact-band__media { position: absolute; inset: 0; z-index: -2; }
.contact-band__media img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 22%; }
.contact-band__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--navy) 0%, rgba(25,44,74,.92) 45%, rgba(25,44,74,.25) 100%);
}
@media (max-width: 860px) {
  .contact-band__scrim { background: linear-gradient(180deg, rgba(25,44,74,.85), rgba(25,44,74,.97)); }
}
.contact-band__body { max-width: 620px; }
.contact-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.contact-link {
  display: inline-flex; align-items: center; gap: .75rem;
  min-height: 52px; padding: 12px 22px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25);
  color: var(--gold); text-decoration: none; font-weight: 500; font-size: .9375rem;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.contact-link:hover { background: rgba(255,255,255,.16); border-color: #fff; transform: translateY(-2px); }
.contact-link img { width: 22px; height: 22px; }

/* -------------------------------------------------------------- Footer    */
.footer { background: var(--navy-deep); color: rgba(255,255,255,.72); padding-block: 2.5rem; font-size: .875rem; }
.footer__top { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; }
.footer__links { display: flex; gap: 1.5rem; }
.footer a { color: rgba(255,255,255,.8); text-decoration: none; padding: 12px 0; min-height: 44px; display: inline-flex; align-items: center; }
.footer a:hover { color: var(--gold); text-decoration: underline; }
.footer__geo {
  margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12);
  font-size: .8125rem; line-height: 1.6; color: rgba(255,255,255,.6);
}

/* -------------------------------------------------- Schwebende Kontakte   */
.fab-stack {
  position: fixed; right: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px);
  z-index: 90; display: flex; flex-direction: column; gap: .75rem; align-items: flex-end;
}
.fab {
  display: inline-flex; align-items: center; gap: 0;
  height: 56px; min-width: 56px; padding: 0;
  border: 0; border-radius: 28px; cursor: pointer;
  text-decoration: none; color: #fff;
  box-shadow: var(--sh-md);
  overflow: hidden;
  transition: gap var(--dur) var(--ease), padding var(--dur) var(--ease),
              background var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.fab__icon { width: 56px; height: 56px; flex: none; display: grid; place-items: center; }
.fab__icon svg { width: 24px; height: 24px; }
.fab__label--kurz { display: none; }
.fab__label {
  font-family: var(--font-head); font-size: .9375rem; white-space: nowrap;
  max-width: 0; opacity: 0;
  transition: max-width var(--dur) var(--ease), opacity var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.fab:hover, .fab:focus-visible { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.fab:hover .fab__label, .fab:focus-visible .fab__label { max-width: 14rem; opacity: 1; padding-right: 22px; }
.fab--call { background: var(--gold); color: var(--navy); }
.fab--call:hover, .fab--call:focus-visible { background: var(--gold-light); }
.fab--mail { background: var(--navy); box-shadow: var(--sh-md), inset 0 0 0 2px rgba(255, 255, 255, .35); }
.fab--mail:hover, .fab--mail:focus-visible { background: var(--navy-deep); }
/* Dritte Stufe der Rangfolge: Gold ruft an, Navy schreibt, Umriss verweist. */
.fab--linkedin { background: #fff; color: var(--navy); box-shadow: var(--sh-md), inset 0 0 0 2px var(--navy); }
.fab--linkedin:hover, .fab--linkedin:focus-visible { background: var(--navy); color: #fff; }

/* Auf Touch-Geräten bleiben die runden Knöpfe wie auf dem Schreibtisch –
   nur ohne Hover-Aufklappen: Tippen führt die Aktion direkt aus, die volle
   Bedeutung steht im aria-label. */
@media (hover: none) {
  .fab-stack {
    bottom: calc(clamp(12px, 2vw, 24px) + env(safe-area-inset-bottom));
  }
  .fab:hover, .fab:focus-visible { transform: none; }
}

/* -------------------------------------------------------------- Textseite */
.page-head { background: var(--navy); color: #fff; padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.page-head h1 { color: #fff; margin: 0; }
.prose { max-width: 68ch; margin-inline: auto; }
.prose h2 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem); margin-top: 2.5rem; }
.prose h3 { font-size: 1.125rem; font-family: var(--font-body); font-weight: 600; margin-top: 1.75rem; color: var(--navy); }
.prose p { color: var(--ink); font-size: 1rem; line-height: 1.7; }
.prose a { color: var(--gold-dark); word-break: break-word; }
.prose ul { padding-left: 1.25rem; color: var(--ink); font-size: 1rem; line-height: 1.7; }
.breadcrumb { font-size: .8125rem; color: rgba(255,255,255,.7); margin-bottom: 1rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.breadcrumb li::after { content: '›'; margin-left: .5rem; opacity: .5; }
.breadcrumb li:last-child::after { content: ''; }
.breadcrumb a { color: var(--gold); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* -------------------------------------------------------------- Reveal    */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

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

/* --------------------------------------------------- Hilfsklassen
   Ersetzen die früheren style-Attribute, damit die
   Content-Security-Policy ohne 'unsafe-inline' auskommt. */
.m-0 { margin: 0; }
.mt-175 { margin-top: 1.75rem; }
.mt-2 { margin-top: 2rem; }
.mt-25 { margin-top: 2.5rem; }
.t-navy { color: var(--navy); }
.t-muted { color: var(--muted); }
.t-ink { color: var(--ink); }
.t-white { color: #fff; }
.measure { max-width: 52ch; }
.measure-center { max-width: 52ch; margin-inline: auto; text-align: center; }
.narrow-center { max-width: 56ch; margin-inline: auto; text-align: center; }
.btn-row--center { justify-content: center; }
.lead--dark { font-size: 1.125rem; color: var(--ink); }
.page-head--tall { padding-block: clamp(4rem, 3rem + 5vw, 7rem); }
.page-head__text { color: rgba(255, 255, 255, .85); font-size: 1.125rem; }

/* Zustände, die früher per element.style gesetzt wurden – so bleibt die
   Content-Security-Policy ohne 'unsafe-inline' wirksam. */
.nav-offen { overflow: hidden; }
.video-frame__play[disabled] { opacity: .45; animation: none; cursor: default; }
.video-frame__play[disabled]:hover { scale: 1; background: var(--gold); }

/* ---------------------------------------------- Formular: Zusatzangaben */
.form-mehr { margin-top: 1.25rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.form-mehr summary {
  display: flex; align-items: center; gap: .5rem;
  min-height: 44px; cursor: pointer; list-style: none;
  font-size: .9375rem; color: var(--navy); font-weight: 500;
}
.form-mehr summary::-webkit-details-marker { display: none; }
.form-mehr summary::before {
  content: ''; flex: none; width: 9px; height: 9px;
  border-right: 2px solid var(--gold-text); border-bottom: 2px solid var(--gold-text);
  transform: rotate(45deg); transition: transform var(--dur) var(--ease);
}
.form-mehr[open] summary::before { transform: rotate(-135deg); }
.form-mehr summary:hover { color: var(--gold-text); }
.form-grid--mehr { margin-top: 1rem; }

.form-signatur {
  display: flex; align-items: center; gap: .75rem;
  margin: 1rem 0 0; font-size: .8125rem; color: var(--muted); line-height: 1.4;
}
.form-signatur img {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%; object-fit: cover; object-position: center 18%;
}

/* Wetten-Dass-Zitat im Über-mich-Text */
.wetten-quote {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem 1rem 1.5rem;
  border-left: 4px solid var(--gold);
  background: var(--surface);
  font-family: var(--font-head);
  font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem);
  font-weight: 300;
  font-style: italic;
  color: var(--navy);
  line-height: 1.4;
  border-radius: 0 4px 4px 0;
}

/* Kernaussage im Fließtext – dieselbe Behandlung wie das Wetten-dass-Zitat */
.kernsatz {
  margin: 1.5rem 0;
  padding: 1.1rem 0 1.1rem 1.5rem;
  border-left: 3px solid var(--gold-flat);
  font-family: var(--font-head);
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  line-height: 1.4;
  color: var(--navy);
}

/* ------------------------------------------------- Specular-Kante -------
   Lichtstreifen auf der Button-Kante, der zum Mauszeiger zeigt und beim
   Annähern einblendet (Portierung des Specular Button von reactbits.dev,
   ohne WebGL). Winkel und Stärke setzt das Skript als eigene Eigenschaften;
   ohne Skript oder auf Touch-Geräten bleibt der Ring schlicht unsichtbar. */
.btn, .contact-link { position: relative; --spec-rand: 2.5px; }
.contact-link { --spec-rand: 1.5px; }
.btn::after, .contact-link::after {
  content: '';
  position: absolute;
  inset: calc(var(--spec-rand) * -1);
  border-radius: inherit;
  padding: var(--spec-rand);
  background: conic-gradient(
    from calc(var(--spec-winkel, 0) * 1deg - 45deg),
    transparent 0deg,
    rgba(255, 255, 255, .95) 45deg,
    transparent 90deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: var(--spec-staerke, 0);
  /* Das weiche Leuchten um den Streifen – ohne den Rest des Rings zu färben */
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, .65));
  pointer-events: none;
}
/* Auf Gold braucht der Streifen mehr Kontrast als reines Weiß liefert */
.btn--primary::after {
  background: conic-gradient(
    from calc(var(--spec-winkel, 0) * 1deg - 45deg),
    transparent 0deg,
    #fff 36deg, #fffbe9 45deg, #fff 54deg,
    transparent 90deg
  );
  filter: drop-shadow(0 0 6px rgba(255, 248, 214, .85));
}
@media (prefers-reduced-motion: reduce) {
  .btn::after, .contact-link::after { opacity: 0 !important; }
}