/* ==========================================================================
   Ordnungshalber Neuss – Design-System (helle Farbwelt)
   Visuelle Sprache nach Referenz (Hair Philosophy / Onepage.io), auf Wunsch
   der Betreiberin komplett in den hellen Cremetönen umgesetzt.
   Alle Grundwerte zentral in :root – Farben, Schriften, Abstände und Radien
   lassen sich an EINER Stelle ändern.
   ========================================================================== */

/* ---------- Schriften (lokal, DSGVO-konform – kein Google-CDN) ---------- */
@font-face {
  font-family: "Alexandria";
  src: url("../fonts/alexandria-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Red Hat Text";
  src: url("../fonts/redhattext-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Red Hat Text";
  src: url("../fonts/redhattext-italic-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Design-Tokens ---------- */
:root {
  /* Farbwelt */
  --cream: #f5debf;            /* warme Akzentfläche, Verlaufs-Endpunkt */
  --cream-light: #fbf5ea;      /* helle Grundfläche (Seiten-Hintergrund) */
  --cream-warm: #f6dfbf;       /* warme Wechselfläche */
  --paper: #fff9ef;            /* Kartenfläche, hebt sich von beiden Cremetönen ab */
  --black: #181212;            /* Überschriften, Bild-Overlays */
  --black-deep: #0f0b0b;
  --brown-dark: #523d2d;       /* Fließtext */
  --brown: #80644e;            /* Nebentext auf heller Grundfläche */
  --gold: #a99270;             /* Akzent: Linien, Verläufe, Deko */
  --gold-deep: #8a744f;        /* dunkleres Gold für Text/Icons auf Hell */
  --gold-light: #c9b393;       /* helles Gold für Verläufe */
  --overlay: rgba(32, 24, 21, 0.6);
  --line: rgba(169, 146, 112, 0.35);

  /* Typografie */
  --font-head: "Alexandria", sans-serif;
  --font-body: "Red Hat Text", system-ui, sans-serif;
  --fs-h1: clamp(2.1rem, 6vw, 3.75rem);        /* 60px Desktop */
  --fs-h2: clamp(1.6rem, 3.2vw, 2.8125rem);    /* 45px Desktop */
  --fs-h2-display: clamp(2.2rem, 5vw, 4.5rem); /* Schluss-CTA bis 72px */
  --fs-h3: 1.25rem;                            /* 20px */
  --fs-body: 1rem;
  --fs-small: 0.92rem;
  --fs-fine: 0.83rem;

  /* Layout */
  --container: 1600px;
  --container-narrow: 1250px;
  --container-text: 920px;
  --pad-x: clamp(24px, 4vw, 50px);
  --sec-pt: clamp(72px, 9vw, 120px);
  --sec-pb: clamp(72px, 9vw, 120px);
  --header-mb: clamp(44px, 5vw, 64px);

  /* Radien (Bogen-Motiv der Referenz) */
  --r-arch: 400px;
  --r-arch-stat: 300px;
  --r-base: 20px;
  --r-btn: 30px;
  --r-card: 8px;

  /* Motion */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --t-fast: 0.25s;
  --t-med: 0.38s;
  --t-reveal: 0.7s;
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--brown-dark);
  background: var(--cream-light);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--black);
  margin: 0 0 0.6em;
}
h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: 0.03em; }
h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: 0.04em; }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: 0.06em; }

p { margin: 0 0 1em; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--brown-dark);
  outline-offset: 3px;
  border-radius: 2px;
}
.tile-overlay :focus-visible { outline-color: var(--cream); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--black);
  color: var(--cream);
  padding: 12px 20px;
  font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; }

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

/* ---------- Container ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.container-narrow { max-width: var(--container-narrow); }
.container-text { max-width: var(--container-text); }

/* ---------- Sektionen ----------
   Zwei helle Wechseltöne. Die alten "dunklen" Klassen bleiben als Aliasse
   erhalten, damit kein Markup bricht. */
.section { padding-block: var(--sec-pt) var(--sec-pb); }
.section-light { background: var(--cream-light); color: var(--brown-dark); }
.section-cream,
.section-dark,
.section-deep,
.section-warm,
.section-brown { background: var(--cream-warm); color: var(--brown-dark); }

/* Sektions-Header (Eyebrow + H2, zentriert) */
.section-head { max-width: 680px; margin: 0 auto var(--header-mb); text-align: center; }
.section-head.align-left { margin-inline: 0; text-align: left; }
.section-head p { margin-bottom: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--brown);
  margin-bottom: 18px;
}
/* Auf der wärmeren Fläche reicht Braun nicht (4,2:1) → dunkles Braun */
.section-cream .eyebrow,
.section-dark .eyebrow,
.section-warm .eyebrow,
.section-brown .eyebrow,
.subhero .eyebrow { color: var(--brown-dark); }
.eyebrow::before {
  content: "";
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.section-head:not(.align-left) .eyebrow::before,
.section-head:not(.align-left) .eyebrow::after {
  content: "";
  width: 44px;
  height: 1px;
  background: linear-gradient(270deg, var(--gold), transparent);
}

.lead { font-size: clamp(1rem, 2.4vw, 1.125rem); line-height: 1.8; }
.muted { color: var(--brown); }
.section-cream .muted,
.section-dark .muted,
.section-warm .muted,
.section-brown .muted,
.subhero .muted { color: var(--brown-dark); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  border-radius: var(--r-btn);
  border: 0;
  cursor: pointer;
  min-height: 44px;
  white-space: nowrap;
  padding: 14px 36px;
  font-size: 0.9rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,
    background-color 0.3s ease, border-color 0.3s ease;
}
.btn-lg { padding: 18px 48px; font-size: 0.97rem; }
.btn-sm { padding: 11px 26px; font-size: 0.8125rem; }

.btn-gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--cream) 100%);
  color: var(--black);
  box-shadow: 0 4px 22px rgba(138, 116, 79, 0.22);
}
.btn-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(315deg, var(--gold) 0%, var(--cream) 100%);
  opacity: 0;
  transition: opacity var(--t-med) ease;
}
.btn-gold > * { position: relative; z-index: 1; }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(138, 116, 79, 0.32); }
.btn-gold:hover::after { opacity: 1; }

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--brown);
  color: var(--brown-dark);
}
.btn-outline:hover {
  background: linear-gradient(135deg, var(--gold), var(--cream));
  color: var(--black);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(138, 116, 79, 0.28);
}
/* Outline-Buttons auf Foto-Overlays (Bildkacheln) bleiben hell */
.tile-overlay .btn-outline { color: var(--cream); border-color: var(--cream); }
.tile-overlay .btn-outline:hover { color: var(--black); border-color: transparent; }

.btn-ghost {
  display: inline-block;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-decoration: none;
  color: var(--brown-dark);
  padding: 0 0 6px;
  border-bottom: 1px solid rgba(82, 61, 45, 0.35);
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.btn-ghost:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

.btn-row { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: center; }

@media (max-width: 640px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; }
  .btn-lg { padding: 16px 32px; }
}

/* ---------- Header / Navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background 0.45s ease, box-shadow 0.45s ease, padding 0.4s ease;
  background: transparent;
}
.site-header.is-scrolled,
.site-header.header-solid {
  background: rgba(251, 245, 234, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(169, 146, 112, 0.25), 0 8px 40px rgba(82, 61, 45, 0.08);
}
.header-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 22px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: padding 0.4s ease;
}
.site-header.is-scrolled .header-inner { padding-block: 14px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--black);
  line-height: 1.1;
  letter-spacing: 0.12em;
  font-size: 1.05rem;
}
.brand-icon {
  height: 48px;
  width: auto;
  flex: 0 0 auto;
  transition: height 0.4s ease;
}
.site-header.is-scrolled .brand-icon { height: 38px; }
@media (max-width: 600px) { .brand-icon { height: 40px; } }
.brand small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  color: var(--brown);
  margin-top: 3px;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  font-size: 0.87rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  color: var(--brown-dark);
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
  transition: color var(--t-fast) ease;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--black); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav-cta { display: inline-flex; }

@media (max-width: 1460px) {
  .site-nav ul { gap: 22px; }
  .site-nav a { font-size: 0.8rem; letter-spacing: 0.12em; }
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(82, 61, 45, 0.3);
  background: transparent;
  color: var(--black);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast) ease;
}
.nav-toggle:hover { background: rgba(169, 146, 112, 0.15); }
.nav-toggle .bars { display: block; width: 18px; }
.nav-toggle .bars,
.nav-toggle .bars::before,
.nav-toggle .bars::after {
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t-fast) ease, opacity var(--t-fast) ease;
}
.nav-toggle .bars { position: relative; }
.nav-toggle .bars::before,
.nav-toggle .bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
}
.nav-toggle .bars::before { top: -6px; }
.nav-toggle .bars::after { top: 6px; }
.nav-open .nav-toggle .bars { background: transparent; }
.nav-open .nav-toggle .bars::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle .bars::after { transform: translateY(-6px) rotate(-45deg); }

/* backdrop-filter macht den Header zum Containing Block für position:fixed –
   bei offenem Menü deshalb abschalten, sonst klebt das Overlay im Header */
body.nav-open .site-header.is-scrolled,
body.nav-open .site-header.header-solid,
body.nav-open .site-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Kontakt-Link nur im mobilen Menü (Desktop hat den CTA-Button) */
@media (min-width: 1101px) {
  .nav-kontakt { display: none; }
}

@media (max-width: 1100px) {
  html.js .site-nav, .nav-cta { display: none; }
  html:not(.js) .site-nav ul { flex-wrap: wrap; gap: 14px 20px; justify-content: flex-end; }
  html:not(.js) .nav-toggle { display: none; }
  .nav-toggle { display: inline-flex; }
  body.nav-open .site-nav {
    display: flex;
    position: fixed;
    inset: 0;
    background: rgba(251, 245, 234, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    align-items: center;
    justify-content: center;
    z-index: 90;
  }
  .nav-open .site-nav ul {
    flex-direction: column;
    gap: 28px;
    text-align: center;
  }
  .nav-open .site-nav a {
    font-family: var(--font-head);
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--black);
  }
  .nav-open .nav-toggle { position: relative; z-index: 95; }
}

/* ---------- Hero (Startseite) ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--cream-light);
  overflow: hidden;
  /* zieht sich unter den sticky Header */
  margin-top: calc(-1 * var(--header-h, 96px));
  padding-top: var(--header-h, 96px);
}
.hero-bg {
  position: absolute;
  inset: 0;
  /* Foto beginnt unterhalb des Menüs, damit der Kopf nie angeschnitten wird */
  top: calc(var(--header-h, 96px) - 16px);
  z-index: 0;
  /* weiche Oberkante statt hartem Bildrand */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 90px);
  mask-image: linear-gradient(180deg, transparent, #000 90px);
}
.hero-bg img,
.hero-bg picture { width: 100%; height: 100%; }
.hero-bg img { object-fit: cover; object-position: 70% 0; height: 100%; }
@media (max-width: 900px) {
  /* Mobil: Foto als eigener Block ueber dem Text - das Gesicht bleibt
     immer sichtbar, der Text steht darunter auf der Flaeche */
  .hero { display: block; min-height: 0; }
  .hero-bg {
    position: relative;
    top: 0;
    height: clamp(320px, 108vw, 470px);
  }
  .hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, var(--cream-light) 96%);
  }
  .hero-bg img { object-position: 62% 0; }
  .hero-overlay, .hero-fade { display: none; }
  .hero-inner { padding-block: 0 72px; }
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(251, 245, 234, 0.85), transparent 180px),
    linear-gradient(100deg, var(--cream-light) 8%, rgba(251, 245, 234, 0.88) 34%, rgba(246, 223, 191, 0.35) 64%, rgba(251, 245, 234, 0.05) 100%);
}
.hero-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34%;
  z-index: 1;
  background: linear-gradient(180deg, transparent, var(--cream-light));
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: 80px 100px;
}
.hero-content { max-width: 660px; }
.hero-content .sub { max-width: 540px; color: var(--brown-dark); }
.hero .btn-row { margin-top: 34px; }

/* Sub-Hero (Unterseiten) */
.subhero {
  position: relative;
  background: var(--cream-warm);
  color: var(--brown-dark);
  padding-block: clamp(56px, 8vw, 110px) clamp(40px, 6vw, 80px);
}
.subhero .eyebrow { margin-bottom: 14px; }
.subhero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.subhero-grid .arch-img { max-width: 440px; justify-self: center; }
@media (max-width: 900px) {
  .subhero-grid { grid-template-columns: 1fr; }
  .subhero-grid .arch-img { max-width: 360px; }
}

/* ---------- Bogen-Bilder (Arch-Motiv) ---------- */
.arch-img {
  border-radius: var(--r-arch) var(--r-arch) var(--r-base) var(--r-base);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
}
.arch-img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Kennzahlen / Schritt-Karten ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  max-width: var(--container-narrow);
  margin-inline: auto;
}
.stat-card {
  border-radius: var(--r-arch-stat) var(--r-arch-stat) var(--r-base) var(--r-base);
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 14px 36px rgba(82, 61, 45, 0.07);
  padding: 56px 40px 44px;
  text-align: center;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: transform 0.3s ease;
}
.stat-card:hover { transform: translateY(-6px); }
.stat-number {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(2.4rem, 3.6vw, 3.3rem);
  line-height: 1;
  color: var(--gold-deep);
}
.stat-card .marker {
  width: 34px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
.stat-card h3 { margin: 0; font-size: 1.05rem; }
.stat-card p { margin: 0; font-size: var(--fs-small); color: var(--brown-dark); line-height: 1.7; }
@media (max-width: 980px) { .stat-grid { grid-template-columns: 1fr; max-width: 420px; gap: 24px; } .stat-card { min-height: 0; padding: 44px 32px 36px; } }

/* ---------- Leistungs-Karten ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: var(--container);
  margin-inline: auto;
}
.service-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-arch) var(--r-arch) var(--r-base) var(--r-base);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(82, 61, 45, 0.14); }
.service-card .card-img { aspect-ratio: 1 / 1.05; overflow: hidden; }
.service-card .card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.service-card:hover .card-img img { transform: scale(1.06); }
.service-card .card-body {
  padding: 26px 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  text-align: center;
}
.service-card h3 { margin: 0; font-size: 1.05rem; }
.service-card .card-tag {
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--brown-dark);
}
.service-card p { margin: 0; font-size: var(--fs-small); line-height: 1.72; color: var(--brown-dark); flex: 1; }
.service-card .btn-ghost { align-self: center; margin-top: 14px; }
@media (max-width: 1100px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .card-grid { grid-template-columns: 1fr; max-width: 400px; } }

/* ---------- Checkliste (Häkchen-Muster) ---------- */
.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.checklist li {
  position: relative;
  padding-left: 34px;
  line-height: 1.6;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.22em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-deep), var(--gold));
}
.checklist li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: calc(0.22em + 4px);
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--cream-light);
  border-bottom: 2px solid var(--cream-light);
  transform: rotate(-45deg);
}
.checklist-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  max-width: var(--container-narrow);
  margin-inline: auto;
}
@media (max-width: 800px) { .checklist-cols { grid-template-columns: 1fr; } }

/* ---------- Kundenstimmen-Marquee ---------- */
.testimonial-section { position: relative; overflow: hidden; }
.testimonial-photo {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 48%;
  z-index: 0;
  opacity: 0.85;
}
.testimonial-photo img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, var(--cream-warm) 0%, rgba(246, 223, 191, 0.4) 55%, rgba(246, 223, 191, 0.55) 100%);
}
.testimonial-inner { position: relative; z-index: 2; }
.testimonial-col { max-width: 520px; }

.marquee {
  position: relative;
  height: 540px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
}
.marquee-track { display: flex; flex-direction: column; gap: 20px; }
.marquee-running .marquee-track {
  animation: marquee-up var(--marquee-dur, 40s) linear infinite;
}
.marquee-paused .marquee-track,
.marquee-running:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-up {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}
.marquee-static { height: auto; max-height: 560px; overflow-y: auto; -webkit-mask-image: none; mask-image: none; }

.marquee-toggle {
  margin-top: 16px;
  border: 1px solid rgba(82, 61, 45, 0.4);
  background: transparent;
  color: var(--brown-dark);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 22px;
  padding: 11px 20px;
  min-height: 44px;
  cursor: pointer;
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.marquee-toggle:hover { color: var(--black); border-color: var(--brown-dark); }

.quote-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 10px 28px rgba(82, 61, 45, 0.07);
  padding: 26px 28px;
}
.quote-card blockquote {
  margin: 0 0 16px;
  font-size: 0.85rem;
  line-height: 1.7;
  font-style: italic;
  color: var(--brown-dark);
}
.quote-card figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8rem;
}
.quote-card figcaption img {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}
.quote-card cite {
  font-style: normal;
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  color: var(--black);
}
.quote-card .quote-place { display: block; margin-top: 3px; color: var(--gold-deep); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; }
@media (max-width: 960px) {
  .testimonial-photo { display: none; }
  .testimonial-col { max-width: none; }
  .marquee { height: 520px; }
}

/* ---------- Zwei-Spalten-Feature (Bild + Text) ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  max-width: var(--container-narrow);
  margin-inline: auto;
}
.feature-grid.img-left { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.feature-media { position: relative; }
.feature-media .frame {
  border-radius: var(--r-base);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  background: var(--paper);
}
.feature-media .frame.arch { border-radius: var(--r-arch) var(--r-arch) var(--r-base) var(--r-base); }
.feature-media .frame img { width: 100%; height: 100%; object-fit: cover; }
.feature-media .nametag {
  position: absolute;
  left: 20px;
  bottom: 20px;
  background: rgba(24, 18, 18, 0.82);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(169, 146, 112, 0.35);
  border-radius: var(--r-card);
  padding: 12px 18px;
  color: var(--cream);
  font-size: 0.8rem;
  line-height: 1.5;
}
.feature-media .nametag strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
}
.feature-media .nametag span { color: var(--gold-light); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
blockquote.pull {
  margin: 26px 0;
  padding-left: 22px;
  border-left: 3px solid var(--gold);
  font-style: italic;
  line-height: 1.8;
}
@media (max-width: 900px) {
  .feature-grid, .feature-grid.img-left { grid-template-columns: 1fr; }
  .feature-grid .feature-media { order: -1; max-width: 440px; }
}

/* ---------- Bildkacheln (Heldinnen / Auswahl) ---------- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 500px));
  gap: clamp(24px, 4vw, 48px);
  justify-content: center;
}
.tile {
  position: relative;
  border-radius: var(--r-arch) var(--r-arch) var(--r-base) var(--r-base);
  overflow: hidden;
  aspect-ratio: 5 / 7;
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--line);
}
.tile > img,
.tile > picture {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}
.tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.tile:hover img { transform: scale(1.08); }
.tile-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(24px, 4vw, 40px);
  background: linear-gradient(180deg, transparent, rgba(15, 11, 11, 0.88) 55%);
  color: var(--cream);
  text-align: center;
}
.tile-overlay h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); margin-bottom: 8px; color: var(--cream); }
.tile-overlay p { font-size: var(--fs-small); color: rgba(245, 222, 191, 0.88); }
@media (max-width: 800px) { .tile-grid { grid-template-columns: minmax(0, 500px); } }

/* ---------- Vorher/Nachher-Slider ---------- */
.ba-wrap { max-width: 560px; margin-inline: auto; text-align: center; }
.ba-slider {
  position: relative;
  border-radius: var(--r-arch-stat) var(--r-arch-stat) var(--r-base) var(--r-base);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
  aspect-ratio: var(--ba-aspect, 3 / 4);
  touch-action: pan-y; /* vertikales Scrollen bleibt frei, Ziehen läuft über Pointer-Events */
  --ba-pos: 50%;
}
.ba-slider img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.ba-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--ba-pos)); }
.ba-divider {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ba-pos);
  width: 2px;
  background: var(--cream-light);
  transform: translateX(-1px);
  z-index: 2;
}
.ba-handle {
  position: absolute;
  top: 50%;
  left: var(--ba-pos);
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(24, 18, 18, 0.75);
  border: 1.5px solid var(--cream);
  backdrop-filter: blur(6px);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .ba-handle { animation: ba-pulse 1.9s ease-in-out infinite; }
}
@keyframes ba-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(138, 116, 79, 0.35); }
  50% { box-shadow: 0 0 0 12px rgba(138, 116, 79, 0); }
}
.ba-tag {
  position: absolute;
  bottom: 14px;
  z-index: 2;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: rgba(24, 18, 18, 0.72);
  border: 1px solid rgba(245, 222, 191, 0.25);
  color: var(--cream);
  border-radius: 20px;
  padding: 6px 14px;
}
.ba-tag-before { left: 14px; }
.ba-tag-after { right: 14px; }
.ba-range {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 44px;
  opacity: 0;
  z-index: 4;
  cursor: ew-resize;
  margin: 0;
}
/* Tastaturfokus des unsichtbaren Reglers sichtbar am Griff spiegeln */
.ba-slider:has(.ba-range:focus-visible) .ba-handle {
  outline: 2px solid var(--cream-light);
  outline-offset: 4px;
}
.ba-title { margin-top: 26px; }
.ba-title .num {
  font-family: var(--font-head);
  color: var(--gold-deep);
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-right: 10px;
}
.ba-title .label { color: var(--black); font-weight: 600; }
.ba-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 22px;
}
.ba-thumbs button {
  border: 1px solid rgba(82, 61, 45, 0.4);
  background: transparent;
  color: var(--brown-dark);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 22px;
  padding: 11px 16px;
  min-height: 44px;
  cursor: pointer;
  transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.ba-thumbs button:hover { color: var(--black); border-color: var(--brown-dark); }
.ba-thumbs button[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--gold), var(--cream));
  color: var(--black);
  border-color: transparent;
}

/* ---------- Akkordeon ---------- */
.accordion { border-top: 1px solid var(--line); }
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-item > h3 { margin: 0; font-size: 1rem; }
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--black);
  transition: color var(--t-fast) ease;
}
.accordion-trigger:hover { color: var(--gold-deep); }
.accordion-icon { position: relative; flex: 0 0 20px; height: 20px; }
.accordion-icon::before,
.accordion-icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 1.5px;
  background: var(--gold-deep);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--t-fast) ease, opacity var(--t-fast) ease;
}
.accordion-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordion-item.is-open .accordion-icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleX(0); opacity: 0; }
.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease);
}
.accordion-item.is-open .accordion-panel { grid-template-rows: 1fr; }
.accordion-panel > div { overflow: hidden; }
.accordion-panel p { font-size: 0.93rem; line-height: 1.8; padding: 0 48px 26px 0; margin: 0; }
@media (max-width: 700px) { .accordion-panel p { padding-right: 12px; } }

/* ---------- Hinweisblock (Kleingedrucktes) ---------- */
.policy-block {
  margin-top: 56px;
  border-top: 1px solid var(--line);
  padding-top: 40px;
  text-align: center;
}
.policy-block h4 {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  color: var(--brown-dark);
  margin-bottom: 14px;
}
.policy-block p {
  font-size: var(--fs-fine);
  line-height: 1.95;
  max-width: 640px;
  margin-inline: auto;
}

/* ---------- Preis-Sektion ---------- */
.price-tag {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}
.price-tag .amount {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(3rem, 6vw, 4.2rem);
  color: var(--gold-deep);
  line-height: 1;
}
.price-tag .unit {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--brown-dark);
}
.price-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  max-width: var(--container-narrow);
  margin-inline: auto;
  align-items: start;
}
.price-cols h3 { font-size: 1rem; margin-bottom: 20px; }
.price-cols .plain-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.price-cols .plain-list li {
  padding-left: 24px;
  position: relative;
  font-size: var(--fs-small);
  line-height: 1.7;
}
.price-cols .plain-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-deep), var(--gold));
}
@media (max-width: 800px) { .price-cols { grid-template-columns: 1fr; } }

/* ---------- Badges / Qualifikationen ---------- */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
  max-width: var(--container-narrow);
  margin-inline: auto;
  align-items: center;
}
.badge-grid figure { margin: 0; text-align: center; }
.badge-grid a { display: block; transition: transform var(--t-fast) ease; }
.badge-grid a:hover { transform: translateY(-4px); }
.badge-grid img {
  margin-inline: auto;
  border-radius: var(--r-card);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 10px;
  max-height: 260px;
  width: auto;
}
.badge-grid figcaption {
  margin-top: 14px;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brown-dark);
}
@media (max-width: 900px) { .badge-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .badge-grid { grid-template-columns: 1fr; max-width: 300px; } }

/* ---------- Partner-Karten ---------- */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 40px);
  max-width: var(--container-narrow);
  margin-inline: auto;
}
.partner-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-base);
  box-shadow: 0 10px 28px rgba(82, 61, 45, 0.06);
  padding: clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}
.partner-card .partner-media img {
  border-radius: var(--r-card);
  width: 100%;
  object-fit: contain;
  background: var(--cream-light);
}
.partner-card h2, .partner-card h3 { font-size: 1.05rem; letter-spacing: 0.06em; line-height: 1.25; }
.partner-card p { font-size: var(--fs-small); line-height: 1.75; }
.partner-code {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 0.1em;
  background: var(--cream-light);
  border: 1px dashed var(--brown);
  border-radius: 6px;
  padding: 4px 12px;
  margin: 4px 0 14px;
  font-size: 0.85rem;
  color: var(--black);
}
@media (max-width: 1000px) { .partner-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .partner-card { grid-template-columns: 1fr; } .partner-card .partner-media { max-width: 220px; } }

/* ---------- Presse / Medienblöcke ---------- */
.press-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 40px);
  max-width: var(--container-narrow);
  margin-inline: auto;
}
.press-card {
  border: 1px solid var(--line);
  border-radius: var(--r-base);
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 10px 28px rgba(82, 61, 45, 0.06);
  display: flex;
  flex-direction: column;
}
.press-card .press-img { aspect-ratio: 16 / 10; overflow: hidden; }
.press-card .press-img img { width: 100%; height: 100%; object-fit: cover; }
.press-card .press-body { padding: 28px 30px 32px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.press-card h3 { margin: 0; font-size: 1rem; }
.press-card p { font-size: var(--fs-small); line-height: 1.75; margin: 0; flex: 1; }
.press-card .btn-ghost { align-self: flex-start; margin-top: 12px; }
@media (max-width: 800px) { .press-grid { grid-template-columns: 1fr; } }

/* Galerie (Magazinseiten) */
.gallery-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  max-width: var(--container-narrow);
  margin-inline: auto;
}
.gallery-row img {
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--paper);
  width: 100%;
  height: auto;
}
@media (max-width: 800px) { .gallery-row { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 2-Klick-Video ---------- */
.video-consent {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-base);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.video-consent .consent-inner { max-width: 480px; position: relative; z-index: 1; }
.video-consent p { font-size: var(--fs-fine); line-height: 1.8; color: var(--brown-dark); }
.video-consent iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Schluss-CTA ---------- */
.cta-final {
  position: relative;
  text-align: center;
  overflow: hidden;
}
.cta-final::before,
.cta-final::after {
  content: "";
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.3;
  pointer-events: none;
}
.cta-final::before { background: var(--gold); top: -160px; left: -120px; }
.cta-final::after { background: var(--gold-light); bottom: -180px; right: -100px; }
.cta-final .container { position: relative; z-index: 1; }
.cta-final h2 { font-size: var(--fs-h2-display); line-height: 1.08; }
.cta-final .sub { max-width: 560px; margin: 0 auto 36px; color: var(--brown-dark); }
.cta-final .btn-row { justify-content: center; }

/* ---------- Formular ---------- */
.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(40px, 5vw, 72px);
  max-width: var(--container-narrow);
  margin-inline: auto;
  align-items: start;
}
@media (max-width: 900px) { .form-grid { grid-template-columns: 1fr; } }

.form-field { margin-bottom: 22px; }
.form-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 8px;
  color: var(--brown-dark);
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--black);
  background: var(--paper);
  border: 1px solid rgba(128, 100, 78, 0.45);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--brown);
  box-shadow: 0 0 0 3px rgba(128, 100, 78, 0.18);
}
.form-consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: var(--fs-fine);
  line-height: 1.7;
  margin-bottom: 26px;
}
.form-consent input {
  width: 20px; height: 20px;
  margin-top: 2px;
  accent-color: var(--brown);
  flex: 0 0 auto;
}
.form-note { font-size: var(--fs-fine); color: var(--brown); }
.form-note-sent {
  margin-top: 18px;
  padding: 14px 18px;
  border: 1px solid var(--brown);
  border-radius: 10px;
  font-size: var(--fs-small);
  background: var(--paper);
}

.contact-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-base);
  box-shadow: 0 10px 28px rgba(82, 61, 45, 0.06);
  padding: clamp(28px, 4vw, 40px);
}
.contact-card h2, .contact-card h3 { font-size: 1rem; }
.contact-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 14px; }
.contact-list a { text-decoration: none; font-weight: 500; }
.contact-list a:hover { color: var(--gold-deep); text-decoration: underline; }
.contact-list .label {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--brown-dark);
  margin-bottom: 2px;
}
.contact-card .brand-logo { max-width: 240px; margin-top: 18px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--cream-warm);
  color: var(--brown-dark);
  border-top: 1px solid var(--line);
  padding-top: clamp(56px, 7vw, 80px);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: clamp(44px, 6vw, 64px);
}
.footer-brand .brand { font-size: 1.15rem; }
.footer-brand p { font-size: var(--fs-small); color: var(--brown-dark); max-width: 320px; margin-top: 18px; }
.footer-rule {
  width: 40px; height: 1px;
  background: linear-gradient(90deg, var(--gold-deep), transparent);
  margin-top: 22px;
}
.site-footer .footer-h {
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  color: var(--brown-dark);
  margin: 0 0 18px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.site-footer li a {
  color: var(--brown-dark);
  text-decoration: none;
  transition: color var(--t-fast) ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.site-footer li a:hover { color: var(--gold-deep); text-decoration: underline; }
.site-footer li a svg { flex: 0 0 auto; color: var(--gold-deep); }
.footer-bottom {
  border-top: 1px solid rgba(169, 146, 112, 0.25);
  padding: 24px 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--brown-dark);
}
.footer-bottom p { margin: 0; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Rechtstexte ---------- */
.legal-content { max-width: var(--container-text); margin-inline: auto; }
.legal-content h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-top: 1.8em; }
.legal-content h3 { font-size: 1.05rem; margin-top: 1.6em; }
.legal-content p, .legal-content li { font-size: var(--fs-small); line-height: 1.85; }
.legal-content a { color: var(--gold-deep); word-break: break-word; }
.legal-content ul { padding-left: 22px; }

/* ---------- Scroll-Reveal ----------
   Nur aktiv, wenn JS läuft (html.js) – ohne JS bleibt alles sichtbar. */
html.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
html.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-running .marquee-track { animation: none; }
  .service-card:hover .card-img img, .tile:hover img { transform: none; }
  .btn:hover { transform: none; }
  * { scroll-behavior: auto; }
}

/* Capture-Modus: Ganzseiten-Screenshots ohne vh-Hero und Animationen */
.capture-mode .hero { min-height: 0; }
.capture-mode .hero-inner { padding-block: 160px 140px; }
html.capture-mode .reveal, html.capture-mode.js .reveal { opacity: 1; transform: none; transition: none; }
.capture-mode .marquee { height: auto; -webkit-mask-image: none; mask-image: none; }

/* ---------- Kleinkram ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-lg { margin-bottom: clamp(32px, 4vw, 56px); }
.divider-gold {
  width: 64px; height: 1px;
  margin: clamp(28px, 4vw, 44px) auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ==========================================================================
   VARIANTE 3 – "Version 1 auf Greige" (Branch variante-3)
   Identisch zu Version 1 (Alexandria, Gold-Akzente), aber mit den
   Hintergrundtönen aus Variante 2: #FBF8F3 Grundfläche, #E8DED3
   Wechselfläche, #FFFEFB Kartenfläche.
   ========================================================================== */

:root {
  --cream-light: #fbf8f3;
  --cream-warm: #e8ded3;
  --paper: #fffefb;
}

/* Hartkodierte Creme-Schleier auf die neue Grundfarbe umgestimmt */
.site-header.is-scrolled,
.site-header.header-solid { background: rgba(251, 248, 243, 0.92); }
@media (max-width: 1100px) {
  body.nav-open .site-nav { background: rgba(251, 248, 243, 0.97); }
}
.hero-overlay {
  background:
    linear-gradient(180deg, rgba(251, 248, 243, 0.85), transparent 180px),
    linear-gradient(100deg, var(--cream-light) 8%, rgba(251, 248, 243, 0.88) 34%, rgba(232, 222, 211, 0.35) 64%, rgba(251, 248, 243, 0.05) 100%);
}

/* ==========================================================================
   VARIANTE 3 – Typografie-Layer: Newsreader + Libre Franklin
   (Schriften aus Variante 2, Farben bleiben Greige + Gold)
   ========================================================================== */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-italic-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("../fonts/librefranklin-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-head: "Newsreader", Georgia, serif;
  --font-body: "Libre Franklin", system-ui, sans-serif;
}

/* Serif-Headlines, keine Versalien */
h1, h2, h3, h4 {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
h1 { line-height: 1.08; letter-spacing: -0.01em; }
h2 { line-height: 1.16; }
h3 { line-height: 1.3; font-size: 1.3rem; }

.partner-card h2, .partner-card h3 { letter-spacing: 0; font-size: 1.35rem; }
.stat-card h3, .service-card h3, .press-card h3, .price-cols h3,
.contact-card h2, .contact-card h3 { font-size: 1.25rem; }
.tile-overlay h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }

.accordion-trigger {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 1.15rem;
}
.quote-card cite {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 0.95rem;
}
blockquote.pull { font-family: var(--font-head); font-size: 1.12rem; line-height: 1.7; }
.quote-card blockquote { font-family: var(--font-head); font-size: 0.95rem; }

.brand { text-transform: none; letter-spacing: 0.01em; font-size: 1.3rem; }
.site-footer .footer-h {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
}

/* ==========================================================================
   KUNDENFEEDBACK RUNDE 2 (31.08.2026, Variante 3)
   Weiche Sektionsübergänge, kompaktes Bild-Duo, prominente Social-Buttons,
   Kontaktkarten-Signatur im neuen Design.
   ========================================================================== */

/* Weicher Farbverlauf am Übergang zwischen den Wechselflächen.
   Die Folgesektion startet in der Farbe der Vorgängerfläche und blendet
   über ~240px in ihre eigene Farbe über. */
.section-light + .section-cream {
  background: linear-gradient(180deg, var(--cream-light) 0, var(--cream-warm) clamp(180px, 24vw, 300px));
}
.section-cream + .section-light,
.subhero + .section-light {
  background: linear-gradient(180deg, var(--cream-warm) 0, var(--cream-light) clamp(180px, 24vw, 300px));
}

/* Social-Media-Buttons (Footer-Brand-Spalte + Kontaktkarte) */
.social-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--paper);
  color: var(--brown-dark);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.social-btn svg { color: var(--gold-deep); transition: color var(--t-fast) ease; flex: 0 0 auto; }
.social-btn:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--paper); text-decoration: none; }
.social-btn:hover svg { color: var(--paper); }
.contact-card .social-row { margin-top: 8px; }
/* .contact-list a:hover (Gold auf Gold) darf die Buttons nicht überstimmen */
.contact-list a.social-btn:hover { color: var(--paper); text-decoration: none; }

/* Kontaktkarte: Häuschen + Namenszug statt altem Rot-Logo */
.card-signature {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
}
.card-signature img { width: 46px; height: auto; }
/* Namenszug wie die Header-Wortmarke */
.card-signature span {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--black);
}

/* Kundenstimmen: weiche Masken statt des Creme-Schleiers aus Version 1.
   Der alte ::before-Verlauf (hartkodiertes #F6DFBF) traf auf das Greige
   von Variante 3 und erzeugte eine sichtbare Kante am Fotorand. */
.testimonial-photo::before { display: none; }
.testimonial-photo {
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 55%);
  mask-image: linear-gradient(90deg, transparent 0, #000 55%);
}
.testimonial-photo img {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 clamp(160px, 20vw, 260px), #000 calc(100% - 140px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 clamp(160px, 20vw, 260px), #000 calc(100% - 140px), transparent);
}

/* Header: Namenszug immer einzeilig, Logo + Name + Navigation auf einer Höhe */
.brand-text { white-space: nowrap; }
@media (max-width: 1360px) {
  .brand { font-size: 1.1rem; gap: 10px; }
  .header-inner { gap: 16px; }
  .site-nav ul { gap: 16px; }
  .site-nav a { font-size: 0.76rem; letter-spacing: 0.1em; }
}
@media (max-width: 1200px) {
  .site-nav ul { gap: 12px; }
  .site-nav a { letter-spacing: 0.06em; }
  .nav-cta { padding: 10px 18px; }
}

/* ==========================================================================
   KUNDENFEEDBACK RUNDE 3 (01.09.2026)
   ========================================================================== */

/* Hero: Adina bleibt rechts neben dem Text.
   Je schmaler das Fenster, desto staerker beschneidet "cover" das Foto
   seitlich - dabei wandert sie nach links hinter die Ueberschrift. Ein
   kleinerer Wert schiebt den sichtbaren Ausschnitt nach links und sie
   damit nach rechts. Die Stufen sind an echten Fensterbreiten gemessen. */
.hero-bg img { object-position: 26% 0; }
@media (max-width: 1400px) {
  .hero-bg img { object-position: 12% 0; }
}
@media (max-width: 1200px) {
  .hero-bg img { object-position: 0 0; }
}

/* Header: Haeuschen und Namenszug schliessen unten buendig ab
   (ausdruecklicher Kundenwunsch). Der Ausgleich haengt die Schrift auf
   die Grundlinie, sonst sitzt sie durch die Zeilenhoehe zu hoch. */
.site-header .brand { align-items: flex-end; }
/* Optisch bündig: die Grundlinie liegt etwas über der Haus-Unterkante,
   damit die Unterlänge des „j" genau auf ihr endet - so liest das Auge
   den Abschluss als eine Linie. */
.site-header .brand-text { transform: translateY(0.14em); }

/* Pressekarten: Bildausschnitt steuerbar.
   Die Magazinseiten sind hochformatig, der Rahmen ist quer - ohne
   Steuerung schneidet "cover" mittig und damit Adinas Kopf ab.
   Der Fokuswert kommt je Karte aus dem Markup. */
.press-card .press-img img { object-position: 50% var(--bild-fokus, 50%); }

/* Bildausschnitt auch waagerecht steuerbar (Kacheln der Strukturheldinnen).
   Die Portraits sind quadratisch, die Kachel ist hochformatig - ohne
   Steuerung schneidet "cover" links und rechts gleich viel ab. */
.tile img { object-position: var(--bild-fokus-x, 50%) var(--bild-fokus, 50%); }

/* Kontaktkarte: Häuschen und Namenszug schließen unten bündig ab -
   genau wie im Seitenkopf. */
.card-signature { align-items: flex-end; }
.card-signature span { transform: translateY(0.38em); }

/* Kacheln auf dem Handy: mehr Bildfläche über dem Text.
   Die Beschreibung bricht auf schmalen Schirmen in viele Zeilen um und
   schob sich dadurch bis auf Kinnhöhe. Eine höhere Kachel und ein etwas
   kompakterer Textblock geben beiden Gesichtern Luft. */
@media (max-width: 640px) {
  .tile { aspect-ratio: 3 / 5; }
  .tile-overlay { padding: 20px 22px 26px; }
  .tile-overlay p { font-size: 0.86rem; line-height: 1.62; }
}

/* ==========================================================================
   STRUKTURHELDINNEN – eigene Farbwelt (Entwurf)
   Abgeleitet aus dem Logo: Pink #F6A7D8 und die fast schwarzen
   Silhouetten #141414. Das Pink des Logos ist fuer Flaechen zu grell,
   deshalb in Saettigung und Helligkeit gedaempft zu einem Altrosa.
   Ueberschriften bleiben nahezu schwarz - das greift die Silhouetten auf.
   Umgesetzt als Token-Tausch: das Markup bleibt unveraendert, nur die
   Werte werden innerhalb der Seite ueberschrieben.
   ========================================================================== */

body.page-heldinnen main,
body.page-heldinnen .site-footer {
  --cream-light: #fdf8fb;   /* Grundflaeche, sehr blasses Rose */
  --cream-warm:  #f2e3ec;   /* Wechselflaeche, weiches Rose */
  --paper:       #fffdfe;   /* Kartenflaeche */
  --cream:       #f0d5e4;   /* heller Verlaufsendpunkt der Buttons */
  --gold:        #ce96b6;   /* Akzent: Linien, Verlaeufe, Deko */
  --gold-deep:   #8c4f72;   /* textsicheres Rose (5,8:1 auf Hell) */
  --gold-light:  #e6bcd4;
  --brown-dark:  #4e3242;   /* Fliesstext, Pflaume statt Braun */
  --brown:       #7a5a6c;   /* Nebentext (5,7:1 auf Hell) */
  --line:        rgba(206, 150, 182, 0.42);
}

/* Auch die Flaeche unter dem Footer mitfaerben, damit auf hohen
   Bildschirmen kein Greige-Rest durchscheint. */
body.page-heldinnen { background: #f2e3ec; }

/* Das Logo bringt einen weissen Hintergrund mit - als Karte gefasst
   wirkt das gewollt statt wie ein ausgeschnittenes Rechteck. */
body.page-heldinnen .heldinnen-logo { min-width: 0; }
body.page-heldinnen .heldinnen-logo img { width: 100%; height: auto; }
body.page-heldinnen .heldinnen-logo picture {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-base);
  padding: clamp(18px, 3vw, 30px);
  box-shadow: 0 12px 32px rgba(140, 79, 114, 0.09);
  max-width: min(440px, 100%);
  margin-inline: auto;
}

/* Strukturheldinnen: Schrift der Wortmarke aus dem Logo.
   Die Logo-Wortmarke ist eine kontrastreiche klassische Serifenschrift.
   Playfair Display trifft Strichstaerke, Kontrast und Serifenform und
   liegt bei gleicher Versalhoehe auf 1,3% an der Vorlage.
   Der Flieusstext bleibt in der Groteske - genau wie die Unterzeile
   "ORDNUNG ON TOUR" im Logo selbst. */
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfairdisplay-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfairdisplay-italic-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

body.page-heldinnen main {
  --font-head: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* ---------- Hörproben (Radiointerviews) ----------
   Eigener Abspieler im Stil der Seite. Ohne JavaScript bleibt der
   eingebaute Browser-Player stehen, die Aufnahmen sind also immer
   erreichbar. Geladen wird erst beim Klick auf Abspielen. */
.hoerprobe {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.hoerprobe-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.hoerprobe-kopf img { width: 104px; height: auto; }
.hoerprobe-kopf span {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold-deep);
}
.hoerprobe-track + .hoerprobe-track { margin-top: 14px; }
.hoerprobe-titel {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--black);
  margin-bottom: 8px;
}
.hoerprobe-bedienung {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hoerprobe-play {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold) 0%, var(--cream) 100%);
  color: var(--black);
  box-shadow: 0 4px 16px rgba(138, 116, 79, 0.25);
  transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.hoerprobe-play:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(138, 116, 79, 0.3); }
.hoerprobe-track.laeuft .hoerprobe-play { background: var(--gold-deep); color: var(--paper); }

/* Fortschrittsleiste: Füllung über die Variable --fortschritt */
.hoerprobe-leiste {
  flex: 1 1 auto;
  min-width: 0;
  height: 22px;
  margin: 0;
  cursor: pointer;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.hoerprobe-leiste::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-deep) var(--fortschritt, 0%), rgba(169, 146, 112, 0.3) var(--fortschritt, 0%));
}
.hoerprobe-leiste::-moz-range-track {
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-deep) var(--fortschritt, 0%), rgba(169, 146, 112, 0.3) var(--fortschritt, 0%));
}
.hoerprobe-leiste::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--gold-deep);
  border: 2px solid var(--paper);
  box-shadow: 0 1px 4px rgba(82, 61, 45, 0.3);
}
.hoerprobe-leiste::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold-deep);
  border: 2px solid var(--paper);
}
.hoerprobe-leiste:focus-visible { outline: 2px solid var(--brown-dark); outline-offset: 3px; border-radius: 4px; }

.hoerprobe-zeit {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: var(--brown);
  font-variant-numeric: tabular-nums;
}
.hoerprobe-hinweis {
  margin: 14px 0 0;
  font-size: var(--fs-fine);
  color: var(--brown);
}

/* Ohne JavaScript: eingebauter Player, damit nichts verloren geht */
.hoerprobe-track audio { width: 100%; margin-top: 4px; }

@media (max-width: 420px) {
  .hoerprobe-bedienung { gap: 10px; }
  .hoerprobe-play { width: 38px; height: 38px; }
  .hoerprobe-zeit { font-size: 0.72rem; }
}

/* Stundensatz etwas zurücknehmen - er dominierte die Sektion. */
.price-tag .amount { font-size: clamp(2.4rem, 4.6vw, 3.2rem); }

/* Kopfbereich: Häuschen rechts neben dem Namen (Kundenwunsch).
   Die Reihenfolge im Quelltext bleibt unverändert - das Bild ist rein
   dekorativ und für Vorlesewerkzeuge ohnehin ausgeblendet. */
.site-header .brand { flex-direction: row-reverse; }

/* ==========================================================================
   KUNDENFEEDBACK RUNDE 7 (03.09.2026)
   ========================================================================== */

/* --- Startseite, Handy: Adina steht mittig im Bild -----------------------
   Der Kopfbereich ist auf schmalen Schirmen ein eigener Bildstreifen
   (375 x 405). Weil "cover" das Bild nach der Hoehe skaliert, ragt es
   seitlich um gut 230 px ueber - mit dem bisherigen Wert 0 % war der linke
   Bildrand zu sehen und Adina rutschte an den rechten Rand.
   62 % setzt sie waagerecht in die Mitte des Ausschnitts. */
/* Nur bis 900 px! Ab 901 px liegt der Text WIEDER auf dem Bild, und dort
   soll Adina rechts neben der Ueberschrift stehen bleiben (Runde 3).
   Der Wert 62 % steht seit jeher im 900-px-Block weiter oben - er wurde nur
   von der Runde-3-Regel "@media (max-width: 1200px) { 0 0 }" mit ueberfahren,
   weil die spaeter in der Datei steht. Diese Zeile stellt ihn wieder her. */
@media (max-width: 900px) {
  .hero-bg img { object-position: 62% 0; }
}

/* --- Zustimmungskasten fuer das Video ------------------------------------
   Bisher galt 16:9 auch im Zustimmungszustand. Auf dem Handy ist der
   Erklaertext hoeher als der Kasten, "overflow: hidden" hat den Knopf
   dadurch mittendurch abgeschnitten. Das feste Seitenverhaeltnis gilt
   deshalb erst, wenn das Video wirklich geladen ist. */
.video-consent {
  aspect-ratio: auto;
  overflow: visible;
  padding: clamp(28px, 5vw, 44px) clamp(20px, 4vw, 40px);
}
.video-consent.is-geladen {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: block;
  padding: 0;
  border-bottom: 0;
}
/* Auf schmalen Schirmen laeuft die Videokarte von Rand zu Rand.
   Hintergrund: Der Player braucht rund 200 px Hoehe, sonst schaltet YouTube
   in eine Notansicht, die nur noch "Ansehen auf YouTube" anbietet. In der
   eingerueckten Karte waere der Rahmen bei 375 px Schirmbreite nur 184 px
   hoch. Eine Mindesthoehe waere der falsche Weg - sie verlaesst das
   Format 16:9, und YouTube fuellt den Rest mit schwarzen Balken oben und
   unten auf. Ueber die volle Breite stimmt beides: 375 px breit ergibt
   211 px Hoehe, genau 16:9 und gross genug zum Abspielen. */
@media (max-width: 640px) {
  .press-stapel .press-card-video {
    margin-inline: calc(var(--pad-x) * -1);
    border-inline: 0;
    border-radius: 0;
  }
  .press-card-video .video-consent { border-radius: 0; }
}

/* --- Stundensatz kleiner und ueber "Das gehoert dazu" --------------------
   Er stand vorher gross und mittig ueber beiden Spalten und hat die
   Sektion beherrscht. Jetzt eroeffnet er die linke Spalte. */
.price-cols .price-tag {
  justify-content: flex-start;
  margin-bottom: 20px;
}
.price-cols .price-tag .amount { font-size: clamp(1.8rem, 3.2vw, 2.3rem); }

/* --- Wortmarke: eine Anordnung fuer alle Stellen -------------------------
   Kundenwunsch: Kopfbereich und Kontaktkarte sollen den Namenszug und das
   Haeuschen immer gleich anordnen - und die Anordnung wird sich vermutlich
   noch aendern. Sie steht deshalb nur noch an dieser einen Stelle.
     --wortmarke-richtung:   row = Haeuschen links, row-reverse = rechts
     --wortmarke-ausrichtung: flex-end = unten buendig, center = mittig
     --wortmarke-versatz:    Feinausgleich der Grundlinie des Namenszugs */
:root {
  --wortmarke-richtung: row-reverse;
  --wortmarke-ausrichtung: flex-end;
  --wortmarke-versatz: 0.14em;
}
.site-header .brand,
.card-signature {
  flex-direction: var(--wortmarke-richtung);
  align-items: var(--wortmarke-ausrichtung);
}
.site-header .brand-text,
.card-signature span {
  transform: translateY(var(--wortmarke-versatz));
}
/* Das Haeuschen auf der Kontaktkarte war schmaler als im Kopfbereich. */
.card-signature img { width: auto; height: 48px; }
/* Die Signatur ist nur so breit wie ihr Inhalt und schliesst dadurch links
   mit Text und Knoepfen der Karte ab. Ohne das laege sie am rechten Rand:
   bei flex-direction: row-reverse packt der Standardwert von
   justify-content die Elemente an die RECHTE Seite. "fit-content" loest
   das unabhaengig von der Richtung - ein spaeterer Wechsel von
   --wortmarke-richtung auf "row" bleibt damit ebenfalls linksbuendig. */
.card-signature { width: fit-content; }

/* --- Seite "Ueber mich": alle Medien und Artikel untereinander ------------
   Bisher standen RTL und AIDARadio nebeneinander, das Video hatte eine
   eigene Sektion mit eigener Ueberschrift und die Zeitungsartikel noch
   eine dritte. Jetzt laufen alle Beitraege in einer Spalte unter der
   gemeinsamen Ueberschrift "Bekannt aus TV, Radio und Presse". */
.press-grid.press-stapel {
  grid-template-columns: 1fr;
  max-width: var(--container-text);
  gap: clamp(28px, 4vw, 44px);
}

/* Auf breiten Schirmen stehen Bild und Text der Foto-Beitraege
   nebeneinander - sonst waere jede Karte ueber 500 px hoch und die Seite
   endlos lang. Video und Zeitungsscan bleiben ueber die volle Breite,
   weil beide zum Ansehen da sind und Groesse brauchen. */
@media (min-width: 860px) {
  .press-stapel .press-card:not(.press-card-video):not(.press-card-dokument) {
    flex-direction: row;
    align-items: stretch;
  }
  .press-stapel .press-card:not(.press-card-video):not(.press-card-dokument) > .press-img {
    flex: 0 0 38%;
    aspect-ratio: auto;
    min-height: 100%;
  }
}

/* Videokarte: der Zustimmungskasten sitzt dort, wo die anderen Karten ihr
   Bild haben. Einen eigenen Rahmen braucht er dort nicht mehr - die Karte
   bringt ihn schon mit. */
.press-card-video .video-consent {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  background: var(--cream-light);
}

/* "Wir benoetigen Ihre Zustimmung ..." ist Bedienhinweis, keine
   Gliederungsebene - und verschwindet nach dem Klick wieder. Als
   Ueberschrift stoerte es die Dokumentstruktur, es sieht aber aus wie
   bisher. */
.video-consent .consent-titel {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--black);
  margin: 0 0 0.6em;
}

/* --- Zeitungsartikel zum Lesen statt zum Ansehen -------------------------
   Der Scan wurde bisher auf 16:10 beschnitten und stand in einer halben
   Spalte - so war er nicht zu entziffern. Jetzt wird er vollstaendig und
   ueber die ganze Kartenbreite gezeigt, und ein Klick oeffnet das Original
   in voller Aufloesung, wo sich auf dem Handy zoomen laesst. */
.press-card-dokument .press-img {
  aspect-ratio: auto;
  overflow: visible;
  background: var(--paper);
}
.press-card-dokument .press-img img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: 50% 50%;
  display: block;
}
.press-zoom {
  display: block;
  color: inherit;
  text-decoration: none;
}
.press-zoom:focus-visible {
  outline: 2px solid var(--brown-dark);
  /* nach INNEN versetzt: die Karte hat overflow: hidden und wuerde einen
     aeusseren Ring an drei Seiten abschneiden - uebrig bliebe ein
     einzelner Strich, der wie eine Trennlinie aussieht. */
  outline-offset: -3px;
}
.press-zoom-hinweis {
  display: block;
  padding: 12px 30px 0;
  font-size: var(--fs-fine);
  /* Nicht --gold-deep: das ergaebe auf der Kartenflaeche nur 4,44:1 und
     verfehlt damit die 4,5:1, die WCAG 2.2 AA fuer kleine Schrift fordert.
     --brown-dark kommt auf 10,09:1. */
  color: var(--brown-dark);
  text-align: right;
}
.press-zoom:hover .press-zoom-hinweis,
.press-zoom:focus-visible .press-zoom-hinweis { text-decoration: underline; }

/* --- Rechtsseiten: ueberlange Woerter umbrechen lassen -------------------
   Auf dem Handy schob die Ueberschrift
   "Verbraucherstreitbeilegung/Universalschlichtungsstelle" das Impressum
   um 189 px nach rechts - die Seite liess sich seitlich wegschieben.
   Der Wortlaut bleibt unangetastet, es aendert sich nur, wo die Zeile
   umbrechen darf. Gilt fuer Impressum, AGB und Datenschutzerklaerung
   sowie fuer die Texte, die die IT-Recht Kanzlei in WordPress einspielt. */
.legal-content,
.agb_content { overflow-wrap: break-word; }
.legal-content h1, .legal-content h2, .legal-content h3, .legal-content h4,
.agb_content h1, .agb_content h2, .agb_content h3, .agb_content h4 {
  overflow-wrap: anywhere;
}

/* --- Abschnitt ohne Bild ---------------------------------------------------
   Auf "Ueber mich" ist das Magnolienfoto neben "Warum ich als Ordnungscoach
   arbeite?" auf Kundenwunsch entfallen. Ohne Bild stuende der Text sonst
   ueber die volle Containerbreite und waere kaum noch lesbar. */
.text-block {
  max-width: var(--container-text);
  margin-inline: auto;
}

/* --- Partnerseite: Karten frueher untereinander -----------------------------
   Nicht angefragt, aber ein echter Fehler: die Partnerkarte hat innen eine
   feste 180-px-Bildspalte plus eine 1fr-Textspalte. Rasterspalten duerfen von
   sich aus nicht unter ihren Inhalt schrumpfen, deshalb schob der Knopf
   "Dein WWI Ordner" die Seite zwischen 1000 und rund 1120 px um bis zu 147 px
   nach rechts - auf kleinen Notebooks und Tablets im Querformat liess sie
   sich seitlich wegschieben. Ab jetzt stehen die Karten dort untereinander,
   und die Textspalte darf notfalls schrumpfen. */
@media (max-width: 1120px) {
  .partner-grid { grid-template-columns: 1fr; }
}
.partner-card > * { min-width: 0; }

/* ==========================================================================
   KUNDENFEEDBACK RUNDE 10 (06.09.2026)
   ========================================================================== */

/* --- Kopfbild kraeftiger ---------------------------------------------------
   Der Cremeschleier lag bis 64 % Bildbreite mit 35 % Deckkraft ueber dem Foto
   und hat Adina ausgewaschen - ihr Koerperbereich war mit 231 im Mittel kaum
   heller als die Textflaeche daneben (240). Der Schleier zieht sich jetzt
   frueher zurueck: links, wo die Schrift steht, bleibt er unveraendert stark,
   ueber dem Foto laeuft er bis 64 % auf null aus.
   Gemessen ueber zwoelf Fensterbreiten von 901 bis 2560 px, jeweils Kontrast
   je Buchstabenpixel gegen den tatsaechlich darunter liegenden Bildpunkt:
   kein einziger Punkt unter der WCAG-Schwelle (Ueberschrift mindestens 6,2:1
   bei noetigen 3:1, Unterzeilen mindestens 5,3:1 bei noetigen 4,5:1).
   Die Zeichnung im Gesicht steigt dabei von Streuung 32 auf 60 (bei 1440 px).
   MERKE: nur bei einer einzigen Breite zu messen reicht hier nicht - der
   Fehler der ersten Fassung war genau bei 1440 px unsichtbar.
   Auf dem Handy greift das nicht: dort ist der Schleier ohnehin abgeschaltet
   (siehe @media max-width: 900px), das Foto steht als eigener Block. */
.hero-overlay {
  /* Ende der Textspalte, in Pixeln - sie ist 660 px breit, sitzt am linken
     Containerrand, und der Container ist ab 1600 px mittig gesetzt.
     PROZENTWERTE WAEREN HIER FALSCH: die Textspalte ist fest in Pixeln, ihr
     Anteil an der Fensterbreite schwankt zwischen 64 % (bei 1100 px) und
     36 % (bei 1920 px). Ein Schleier mit Prozent-Haltepunkten deckt den Text
     deshalb auf schmalen Schirmen nicht mehr ab - genau daran ist die erste
     Fassung dieser Aenderung gescheitert. */
  --text-ende: calc(max(0px, (100vw - 1600px) / 2) + 704px);
  background:
    linear-gradient(180deg, rgba(251, 248, 243, 0.85), transparent 180px),
    linear-gradient(100deg,
      var(--cream-light) 40px,
      rgba(251, 248, 243, 0.92) calc(var(--text-ende) - 300px),
      rgba(232, 222, 211, 0.50) var(--text-ende),
      rgba(251, 248, 243, 0) calc(var(--text-ende) + 150px));
}
/* Der untere Verlauf endet frueher, damit Adina nicht ab Bauchhoehe verblasst. */
.hero-fade { height: 24%; }

/* --- Sprungmarken nicht unter den Kopfbereich schieben --------------------
   Der Seitenkopf steht fest und ist rund 96 px hoch. Ohne Ausgleich landet
   das Ziel einer Sprungmarke genau darunter und ist unsichtbar. Aufgefallen
   beim Livegang: Nach dem Absenden des Kontaktformulars springt der Browser
   auf #formular, und die Bestaetigung "Vielen Dank! Deine Nachricht ist
   angekommen" steht als erstes Element im Formular - sie lag dadurch hinter
   dem Kopfbereich, und es sah aus, als sei gar nichts passiert. */
:where([id]) { scroll-margin-top: calc(var(--header-h, 96px) + 24px); }

/* ==========================================================================
   WORDPRESS-ERGÄNZUNGEN
   Nur für Bausteine, die es auf der statischen Seite noch nicht gab:
   Formular-Rückmeldungen, Spamschutz-Feld und die Rechtstexte, die die
   IT-Recht Kanzlei als unformatiertes HTML liefert.
   ========================================================================== */

/* Rückmeldung nach dem Absenden des Kontaktformulars */
.form-hinweis {
  border-radius: var(--r-base);
  padding: 16px 20px;
  margin-bottom: 24px;
  font-size: var(--fs-small);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--brown-dark);
}
.form-hinweis-ok { border-left: 3px solid var(--gold-deep); }
.form-hinweis-fehler { border-left: 3px solid #96593f; }

/* Spamschutz: für Menschen unsichtbar, für Screenreader ausgeblendet */
.oh-honigtopf {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Rechtstexte der IT-Recht Kanzlei (Kurzcodes [agb_imprint] usw.).
   Das Plugin liefert nacktes HTML ohne eigenes CSS – die Typografie
   kommt deshalb vollständig von hier. */
.agb_content { font-size: var(--fs-body); line-height: 1.8; }
.agb_content h1 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin-top: 0; }
.agb_content h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  margin-top: 1.8em;
  margin-bottom: 0.5em;
}
.agb_content h3 { font-size: 1.15rem; margin-top: 1.6em; margin-bottom: 0.4em; }
.agb_content h4 { font-size: 1rem; margin-top: 1.4em; margin-bottom: 0.3em; }
.agb_content p { margin: 0 0 1em; }
.agb_content ul, .agb_content ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.agb_content li { margin-bottom: 0.4em; }
.agb_content a { color: var(--gold-deep); }
.agb_content strong { color: var(--black); }
.agb_content table { width: 100%; border-collapse: collapse; margin-bottom: 1.4em; }
.agb_content th, .agb_content td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}