/* =====================================================================
   Baugeld 1-2-3 — Stylesheet Startseite (Redesign)
   ---------------------------------------------------------------------
   Farbwelt: Oberharzer Schieferschwarz + Markenrot aus dem Logo.
   Bewusst KEIN warmes Creme: kühles Schiefer/Kalkweiß grenzt sich von
   der Standard-Optik ab und zitiert die schiefergedeckten Fachwerk-
   häuser der Region.
   Schrift: Archivo (Display, eng gesetzt) · IBM Plex Sans (Text)
            IBM Plex Mono (alle Zahlen — Zinsen, Summen, Kennzahlen)
   Signatur: die 1—2—3-Achse. Der Markenname wird zur Seitenstruktur.
   ===================================================================== */

/* ── Tokens ────────────────────────────────────────────────────────── */
:root {
  /* Farbe */
  --ink:        #14171a;
  --ink-2:      #1f242a;
  --ink-3:      #2c333b;
  --red:        #c1272d;
  --red-deep:   #94191e;
  --red-soft:   rgba(193, 39, 45, 0.10);
  /* Aufgehelltes Rot für Text auf dunklem Grund: #c1272d erreicht auf
     Schwarz nur 3,08:1 (WCAG AA verlangt 4,5:1 für Fließtext).
     #e2555b liegt bei 4,87:1 und bleibt eindeutig als Markenrot lesbar. */
  --red-on-ink: #e2555b;
  --paper:      #ffffff;
  --paper-2:    #f1f2f3;
  --stone:      #6e757d;
  --stone-2:    #9aa1a8;
  --hair:       #dde0e3;
  --hair-dark:  rgba(255, 255, 255, 0.14);

  /* Schrift */
  --display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body:    'IBM Plex Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --figures: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluide Typo-Skala */
  --t-hero:  clamp(2.5rem, 6.4vw, 5.25rem);
  --t-h2:    clamp(1.85rem, 3.6vw, 3rem);
  --t-h3:    clamp(1.15rem, 1.7vw, 1.4rem);
  --t-lead:  clamp(1.06rem, 1.5vw, 1.3rem);
  --t-body:  1.0rem;
  --t-small: 0.875rem;
  --t-micro: 0.75rem;
  --t-num:   clamp(5rem, 15vw, 13rem);

  /* Raster — großzügig */
  --s1: 0.5rem;  --s2: 1rem;    --s3: 1.5rem;  --s4: 2rem;
  --s5: 3rem;    --s6: 4.5rem;  --s7: 7rem;    --s8: 10rem;

  --wrap: 1200px;
  --gut:  clamp(1.25rem, 4vw, 3rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

body {
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
/* Browser-Default für <svg> ohne width/height ist 300×150px. Jedes Icon
   ohne eigene Größenregel bekommt sonst diesen riesigen Platzhalter statt
   des Symbols. Spezifischere Regeln (z. B. .card__ico svg) gewinnen. */
svg { width: 1em; height: 1em; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Nur für Screenreader */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Sprunglink */
.skip {
  position: absolute; top: -100px; left: var(--gut); z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: var(--s2) var(--s3); font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip:focus { top: var(--s2); }

/* ── Typografie ────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h1 { font-size: var(--t-hero); font-weight: 800; letter-spacing: -0.042em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.02em; }

p { text-wrap: pretty; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--stone);
  max-width: 46ch;
}

/* Alle Zahlen einheitlich in Mono mit Tabellenziffern —
   auf einer Finanzierungsseite sind Zahlen das Produkt. */
.num {
  font-family: var(--figures);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Augenbraue über Überschriften */
.eyebrow {
  font-family: var(--figures);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  display: block;
  margin-bottom: var(--s2);
}
.eyebrow--light { color: var(--stone-2); }

/* ── Layout ────────────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.band { padding-block: var(--s7); }
.band--tight { padding-block: var(--s6); }
.band--ink { background: var(--ink); color: var(--paper); }
.band--ink h2, .band--ink h3 { color: var(--paper); }
.band--ink .lead { color: var(--stone-2); }
.band--ink .eyebrow { color: var(--red-on-ink); }
.band--paper2 { background: var(--paper-2); }

.head { max-width: 34ch; margin-bottom: var(--s6); }
.head .lead { margin-top: var(--s2); }

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.97rem;
  letter-spacing: -0.01em;
  padding: 0.95em 1.6em;
  border: 1.5px solid transparent;
  transition: background-color 0.22s var(--ease),
              border-color 0.22s var(--ease),
              color 0.22s var(--ease),
              transform 0.22s var(--ease);
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn--red { background: var(--red); color: var(--paper); }
.btn--red:hover { background: var(--red-deep); transform: translateY(-2px); }

.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--ink-3); transform: translateY(-2px); }

.btn--line { border-color: var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); }

.btn--line-light { border-color: var(--hair-dark); color: var(--paper); }
.btn--line-light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* Textlink mit wanderndem Pfeil */
.more {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.93rem;
  color: var(--red);
  border-bottom: 1.5px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.2s var(--ease);
}
.more:hover { border-color: var(--red); }
.more svg { width: 1em; height: 1em; transition: transform 0.22s var(--ease); }
.more:hover svg { transform: translateX(4px); }

/* ── Navigation ────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hair);
}
.nav__in {
  display: flex; align-items: center; gap: var(--s4);
  min-height: 76px;
}
.nav__logo img { width: 116px; height: auto; }

.nav__menu {
  display: flex; align-items: center; gap: 0.25rem;
  margin-left: auto;
}
.nav__li { position: relative; }

.nav__link {
  display: flex; align-items: center; gap: 0.35em;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.93rem;
  letter-spacing: -0.01em;
  padding: 0.7em 0.85em;
  color: var(--ink);
  transition: color 0.18s var(--ease);
}
.nav__link:hover { color: var(--red); }
.nav__link[aria-current="page"] { color: var(--red); }
.nav__link svg { width: 0.7em; height: 0.7em; opacity: 0.5; }

.nav__login {
  display: flex; align-items: center; gap: 0.4em;
  margin-left: var(--s3);
  padding: 0.5em 0.2em;
  font-family: var(--display); font-weight: 600; font-size: 0.86rem;
  color: var(--stone);
  transition: color 0.18s var(--ease);
}
.nav__login svg { width: 1.05em; height: 1.05em; }
.nav__login:hover, .nav__login[aria-current="page"] { color: var(--red); }
.nav__cta { margin-left: var(--s2); padding: 0.8em 1.35em; }

/* Untermenü */
.nav__sub {
  position: absolute; top: calc(100% + 2px); left: 0;
  min-width: 232px;
  background: var(--paper);
  border: 1px solid var(--hair);
  box-shadow: 0 18px 44px rgba(20, 23, 26, 0.13);
  padding: var(--s1);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.nav__li:hover .nav__sub,
.nav__li:focus-within .nav__sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__sub a {
  display: block;
  padding: 0.65em 0.9em;
  font-size: 0.9rem;
  color: var(--ink);
  border-left: 2px solid transparent;
  transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.nav__sub a:hover { background: var(--paper-2); border-left-color: var(--red); }

/* Burger */
.nav__burger { display: none; margin-left: auto; padding: var(--s2); }
.nav__burger span {
  display: block; width: 24px; height: 2px;
  background: var(--ink);
  transition: transform 0.24s var(--ease), opacity 0.18s var(--ease);
}
.nav__burger span + span { margin-top: 5px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Hero: typografisch, kein Stock-Video ─────────────────────────── */
.hero { padding-block: clamp(var(--s6), 9vw, var(--s8)) var(--s6); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.35fr 0.65fr; align-items: end; gap: var(--s6); }
}

/* Ab hier zeigt ProvenExpert seine fixen Siegel am rechten Rand (siehe
   index.html). Freiraum reservieren, damit sie nicht auf die Kennzahlen
   fallen — robuster als die Siegel-Position an den Inhalt anzupassen. */
@media (min-width: 992px) {
  .hero .wrap { padding-right: 210px; }
}

.hero h1 { margin-bottom: var(--s3); }
.hero h1 em { font-style: normal; color: var(--red); }
.hero .lead { max-width: 42ch; margin-bottom: var(--s4); }

.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* Kennzahlen als ruhige Mono-Liste statt als Kachel-Batterie */
.facts {
  display: grid;
  gap: var(--s3);
  padding-top: var(--s2);
}
.fact { border-top: 1px solid var(--hair); padding-top: var(--s2); }
.fact__n {
  font-family: var(--figures);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: block;
}
.fact__l {
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 0.2rem;
}
.fact__n b { color: var(--red); font-weight: 500; }

/* ── Foto-Band: die echten Menschen, ohne Textüberlagerung ────────── */
.people { background: var(--paper-2); }
.people img { width: 100%; height: auto; }
.people__cap {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3);
  align-items: baseline;
  padding-block: var(--s3);
  font-size: var(--t-small);
  color: var(--stone);
}
.people__cap strong { color: var(--ink); font-weight: 600; }

/* ── Leistungen ────────────────────────────────────────────────────── */
.cards { display: grid; gap: var(--s4); }
@media (min-width: 780px) { .cards { grid-template-columns: 1fr 1fr; gap: var(--s5); } }

.card {
  display: flex; flex-direction: column;
  padding: var(--s4);
  background: var(--paper);
  border: 1px solid var(--hair);
  transition: border-color 0.24s var(--ease), transform 0.24s var(--ease);
}
.card:hover { border-color: var(--ink); transform: translateY(-3px); }
.card__ico {
  width: 40px; height: 40px;
  color: var(--red);
  margin-bottom: var(--s3);
}
.card__ico svg { width: 100%; height: 100%; }
.card h3 { margin-bottom: var(--s2); }
.card p { color: var(--stone); margin-bottom: var(--s3); }
.card .more { margin-top: auto; align-self: flex-start; }

/* ── SIGNATUR: die 1—2—3-Achse ────────────────────────────────────── */
.spine__head { margin-bottom: var(--s6); max-width: 40ch; }

.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s2);
  padding-block: var(--s5);
  border-top: 1px solid var(--hair-dark);
}
.stage:last-child { border-bottom: 1px solid var(--hair-dark); }

@media (min-width: 820px) {
  .stage {
    grid-template-columns: minmax(180px, 0.9fr) minmax(0, 2.1fr);
    gap: var(--s6);
    align-items: start;
  }
}

.stage__n {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-num);
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--paper);
  transition: color 0.7s var(--ease), -webkit-text-stroke-color 0.7s var(--ease);
}

/* Animiert nur, wenn JS die Achse aktiviert — ohne JS bleiben die
   Ziffern gefüllt und damit in jedem Fall lesbar. */
.spine--anim .stage__n {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--red);
}
.spine--anim .stage.is-in .stage__n {
  color: var(--paper);
  -webkit-text-stroke-color: transparent;
}

.stage__body { padding-top: var(--s1); }
.stage__body h3 { margin-bottom: var(--s2); }
.stage__body p { color: var(--stone-2); max-width: 54ch; }
.stage__meta {
  font-family: var(--figures);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red-on-ink);
  margin-top: var(--s2);
}

/* ── Über uns ─────────────────────────────────────────────────────── */
.about { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .about { grid-template-columns: 1.1fr 0.9fr; gap: var(--s7); align-items: start; } }

.about p + p { margin-top: var(--s2); }
.about p { color: var(--stone); }

.ticks { margin-top: var(--s4); display: grid; gap: var(--s2); }
.tick {
  display: flex; align-items: flex-start; gap: 0.75em;
  font-weight: 500;
  padding-top: var(--s2);
  border-top: 1px solid var(--hair);
}
.tick svg { width: 1.1em; height: 1.1em; color: var(--red); flex: none; margin-top: 0.35em; }

/* Team */
.team { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.member img { width: 100%; height: auto; filter: grayscale(1); transition: filter 0.4s var(--ease); }
.member:hover img { filter: grayscale(0); }
.member__name {
  font-family: var(--display); font-weight: 700;
  margin-top: var(--s2);
}
.member__role { font-size: var(--t-small); color: var(--stone); }

/* Zitat */
.pull {
  margin-top: var(--s5);
  padding: var(--s4);
  background: var(--ink);
  color: var(--paper);
}
.pull blockquote {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.pull figcaption {
  margin-top: var(--s3);
  padding-top: var(--s2);
  border-top: 1px solid var(--hair-dark);
  font-family: var(--figures);
  font-size: var(--t-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--stone-2);
}
.pull figcaption b { color: var(--red-on-ink); font-weight: 500; }

/* ── Bewertungen ───────────────────────────────────────────────────── */
.rating {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s5);
  padding-bottom: var(--s4);
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--hair);
}
.rating__score {
  font-family: var(--figures);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
.rating__score span { color: var(--stone); font-size: 0.45em; }
.rating__meta { font-size: var(--t-small); color: var(--stone); }
.rating__meta b { color: var(--ink); font-weight: 600; }

/* ── CTA ───────────────────────────────────────────────────────────── */
.cta { text-align: center; }
.cta h2 { max-width: 26ch; margin-inline: auto; margin-bottom: var(--s3); }
.cta .lead { margin-inline: auto; margin-bottom: var(--s4); }
.cta__btns { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }

/* ── Footer ────────────────────────────────────────────────────────── */
.foot { background: var(--ink); color: var(--stone-2); padding-block: var(--s6) var(--s4); }
.foot__grid { display: grid; gap: var(--s5); }
@media (min-width: 760px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: var(--s4); } }

.foot__logo {
  width: 104px; background: var(--paper);
  padding: 0.55rem; margin-bottom: var(--s3);
}
.foot h4 {
  font-size: var(--t-micro);
  font-family: var(--figures);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: var(--s3);
}
.foot ul { display: grid; gap: 0.6rem; font-size: var(--t-small); }
.foot a { transition: color 0.18s var(--ease); }
.foot a:hover { color: var(--red); }
.foot p { font-size: var(--t-small); }

.foot__contact li { display: flex; gap: 0.7em; align-items: flex-start; }
.foot__contact svg { width: 1em; height: 1em; color: var(--red); flex: none; margin-top: 0.45em; }
.foot__contact .num { font-variant-numeric: tabular-nums; }

.foot__bot {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  justify-content: space-between;
  margin-top: var(--s6);
  padding-top: var(--s3);
  border-top: 1px solid var(--hair-dark);
  font-size: var(--t-micro);
}
.foot__bot nav { display: flex; gap: var(--s3); }

/* ── Schwebender Anruf-Button (nur mobil) ─────────────────────────── */
.call {
  position: fixed; bottom: 1.1rem; left: 1.1rem; z-index: 90;
  display: none;
  align-items: center; gap: 0.55em;
  padding: 0.85em 1.15em;
  background: var(--red); color: var(--paper);
  font-family: var(--display); font-weight: 600; font-size: 0.9rem;
  box-shadow: 0 10px 30px rgba(20, 23, 26, 0.3);
}
.call svg { width: 1.1em; height: 1.1em; }

/* ── Schwebendes Cookie-Symbol: öffnet die Einstellungen erneut ───── */
.cookie-toggle {
  position: fixed; bottom: 1.1rem; left: 1.1rem; z-index: 89;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper);
  box-shadow: 0 8px 24px rgba(20, 23, 26, 0.28);
  transition: transform 0.18s var(--ease);
}
.cookie-toggle:hover { transform: translateY(-2px); }
.cookie-toggle svg { width: 20px; height: 20px; }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .nav__burger { display: block; }
  .nav__menu {
    position: fixed; inset: 76px 0 auto;
    flex-direction: column; align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--hair);
    padding: var(--s2) var(--gut) var(--s4);
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
  }
  .nav__menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__link { padding: 0.85em 0; font-size: 1.02rem; border-bottom: 1px solid var(--hair); }
  .nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; padding: 0 0 var(--s2) var(--s3);
    min-width: 0;
  }
  .nav__login { margin: var(--s2) 0 0; padding: 0.6em 0; }
  .nav__cta { margin: var(--s3) 0 0; justify-content: center; }
}

@media (max-width: 560px) {
  .call { display: inline-flex; }
  .cookie-toggle { bottom: calc(1.1rem + 56px); }
  .foot__bot { flex-direction: column; }
  .team { grid-template-columns: 1fr; }
  .btn { width: 100%; justify-content: center; }
  .hero__ctas { flex-direction: column; align-items: stretch; }
}

/* Größere Ziffern der Achse dürfen auf sehr kleinen Displays nicht
   die Zeile sprengen */
@media (max-width: 480px) {
  :root { --t-num: 4.5rem; }
}

/* ── Bewegung nur mit Zustimmung ──────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

/* ── Hero-Einstieg: einmaliger, orchestrierter Auftritt beim Laden ──
   Reines CSS (kein JS nötig, kein FOUC-Risiko, funktioniert auch ohne
   JS). Läuft nur einmal, oberhalb des Folds — deshalb kein Scroll-
   Trigger wie bei .reveal, sondern direkt beim Malen der Seite. */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero .eyebrow    { animation: heroRise 0.7s var(--ease) both; }
.hero h1          { animation: heroRise 0.7s var(--ease) 0.10s both; }
.hero .lead       { animation: heroRise 0.7s var(--ease) 0.20s both; }
.hero .hero__ctas { animation: heroRise 0.7s var(--ease) 0.30s both; }
.facts .fact:nth-child(1) { animation: heroRise 0.6s var(--ease) 0.38s both; }
.facts .fact:nth-child(2) { animation: heroRise 0.6s var(--ease) 0.46s both; }
.facts .fact:nth-child(3) { animation: heroRise 0.6s var(--ease) 0.54s both; }
.facts .fact:nth-child(4) { animation: heroRise 0.6s var(--ease) 0.62s both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .spine--anim .stage__n { color: var(--paper); -webkit-text-stroke-color: transparent; }
}

@media print {
  .nav, .call, .news { display: none; }
  body { color: #000; background: #fff; }
}

/* =====================================================================
   Unterseiten — gemeinsame Bausteine
   ===================================================================== */

/* ── Breadcrumb ────────────────────────────────────────────────────── */
.crumb {
  display: flex; align-items: center; gap: 0.5em;
  font-size: var(--t-small);
  color: var(--stone-2);
  margin-bottom: var(--s3);
}
.crumb a { color: var(--stone-2); transition: color 0.18s var(--ease); }
.crumb a:hover { color: var(--paper); }
.crumb span[aria-current] { color: var(--paper); }

/* ── Seiten-Kopf (kompakter als der Startseiten-Hero) ─────────────── */
.pagehero {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--s6) var(--s5);
}
.pagehero h1 { color: var(--paper); font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
.pagehero .lead { color: var(--stone-2); max-width: 52ch; margin-top: var(--s2); }

/* ── Zwei-Spalten-Intro mit Zitat-Box ─────────────────────────────── */
.intro { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .intro { grid-template-columns: 1.2fr 0.8fr; gap: var(--s7); align-items: start; } }
.intro p { color: var(--stone); margin-top: var(--s2); }
.intro .btnrow { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }

.quotebox {
  padding: var(--s4);
  background: var(--paper-2);
  border-left: 3px solid var(--red);
}
.quotebox p {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

/* ── Merkmal-Liste: Icon links, Text rechts (Leistungsdetails) ────── */
.flist { display: grid; gap: var(--s4); }
@media (min-width: 700px) { .flist { grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s5); } }

.fitem { display: flex; gap: var(--s3); }
.fitem__ico {
  width: 30px; height: 30px; flex: none;
  color: var(--red);
  margin-top: 0.15em;
}
.fitem__ico svg { width: 100%; height: 100%; }
.fitem h4 { font-size: 1.05rem; margin-bottom: 0.4em; }
.fitem p { color: var(--stone); font-size: 0.95rem; }

/* ── Team-Karten (ausführlich, mit Bio + Kontakt) ─────────────────── */
.teamgrid { display: grid; gap: var(--s5); max-width: 900px; margin-inline: auto; }
@media (min-width: 700px) { .teamgrid { grid-template-columns: 1fr 1fr; } }

.teamcard { border: 1px solid var(--hair); }
/* Quellfotos sind Hochkant-Portraits (823x1200, Verhältnis ~0,69). Ein
   4:3-Querformat hätte sie brutal beschnitten (fast nur noch das Gesicht
   sichtbar) und wirkte dadurch "verzerrt". 3:4 passt zum Ausgangsmaterial. */
.teamcard__photo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: 50% 15%; filter: grayscale(1); }
.teamcard__body { padding: var(--s4); }
.teamcard__role {
  font-family: var(--figures);
  font-size: var(--t-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--red);
  margin-top: 0.2em;
}
.teamcard p { color: var(--stone); margin-top: var(--s2); }
.teamcard__links { display: flex; gap: var(--s3); margin-top: var(--s3); }
.teamcard__links a {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--display); font-weight: 600; font-size: 0.85rem;
  color: var(--ink); border-bottom: 1.5px solid var(--hair);
  padding-bottom: 2px; transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.teamcard__links a:hover { color: var(--red); border-color: var(--red); }
.teamcard__links svg { width: 1em; height: 1em; }

/* ── Externe Rechner/Vergleichs-Widgets: responsiver Rahmen ───────── */
.embed {
  border: 1px solid var(--hair);
  background: var(--paper-2);
  overflow: hidden;
}
.embed iframe { width: 100%; border: 0; display: block; }
.embed + .embed { margin-top: var(--s5); }
.embed__label {
  font-family: var(--figures);
  font-size: var(--t-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--stone);
  padding: var(--s3) var(--s3) 0;
}

.embeds { display: grid; gap: var(--s5); }

/* ── Rechtstext (Impressum, Datenschutz) ──────────────────────────── */
.prose { max-width: 68ch; }
.prose h2 { font-size: 1.4rem; margin-top: var(--s6); margin-bottom: var(--s2); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.1rem; margin-top: var(--s4); margin-bottom: 0.5em; }
.prose p { color: var(--stone); margin-bottom: var(--s2); }
.prose a { color: var(--red); border-bottom: 1px solid transparent; transition: border-color 0.18s var(--ease); }
.prose a:hover { border-bottom-color: var(--red); }
.prose ul { margin: var(--s2) 0 var(--s3) 0; }
.prose li { color: var(--stone); padding-left: 1.2em; position: relative; margin-bottom: 0.4em; }
.prose li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 5px; height: 5px; background: var(--red); }
.prose strong { color: var(--ink); font-weight: 600; }

/* ── FAQ-Akkordeon ─────────────────────────────────────────────────── */
.faq { max-width: 76ch; }
.faqitem { border-top: 1px solid var(--hair); }
.faqitem:last-child { border-bottom: 1px solid var(--hair); }
.faqitem summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding-block: var(--s3);
  font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  cursor: pointer; list-style: none;
}
.faqitem summary::-webkit-details-marker { display: none; }
.faqitem summary svg { width: 1.1em; height: 1.1em; flex: none; color: var(--red); transition: transform 0.24s var(--ease); }
.faqitem[open] summary svg { transform: rotate(45deg); }
.faqitem p { color: var(--stone); padding-bottom: var(--s3); max-width: 64ch; }

/* ── Blog-Karten ───────────────────────────────────────────────────── */
.postgrid { display: grid; gap: var(--s4); }
@media (min-width: 700px) { .postgrid { grid-template-columns: 1fr 1fr; } }
.post { border: 1px solid var(--hair); display: flex; flex-direction: column; }
.post__body { padding: var(--s4); display: flex; flex-direction: column; flex: 1; }
.post__meta {
  font-family: var(--figures); font-size: var(--t-micro);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--stone);
  margin-bottom: var(--s2);
}
.post__meta svg { width: 1em; height: 1em; vertical-align: -0.15em; margin-right: 0.1em; }
.post h3 { font-size: 1.15rem; margin-bottom: 0.5em; }
.post p { color: var(--stone); flex: 1; }
.post .more { margin-top: var(--s3); }

/* ── Einfaches Formular (Kontakt/Anfrage) ──────────────────────────── */
.form { display: grid; gap: var(--s3); max-width: 640px; }
.form.grid2 { grid-template-columns: 1fr 1fr; }
.form.grid2 .full { grid-column: 1 / -1; }
.field label {
  display: block; font-size: var(--t-small); font-weight: 500;
  margin-bottom: 0.4em; color: var(--ink);
}
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: 1rem;
  padding: 0.85em 1em;
  border: 1.5px solid var(--hair);
  background: var(--paper);
  transition: border-color 0.18s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--red); outline: none;
}
.field textarea { resize: vertical; min-height: 9em; }
.field__hint { font-size: var(--t-micro); color: var(--stone); margin-top: 0.35em; }
.form-ok, .form-err { display: none; padding: var(--s3); font-size: 0.9rem; }
.form-ok { background: var(--paper-2); border-left: 3px solid #2e7d46; color: var(--ink); }
.form-err { background: var(--paper-2); border-left: 3px solid var(--red); color: var(--ink); margin-top: var(--s2); }
.check { display: flex; align-items: flex-start; gap: 0.6em; cursor: pointer; font-size: 0.88rem; color: var(--stone); }
.check input { margin-top: 0.3em; accent-color: var(--red); flex: none; }
.check a { color: var(--red); }

/* ── Login-Karte (Kundenlogin) ─────────────────────────────────────── */
.loginbox {
  max-width: 420px; margin-inline: auto;
  padding: var(--s5);
  border: 1px solid var(--hair);
}
.loginbox__ico { width: 40px; height: 40px; color: var(--red); margin-bottom: var(--s3); }

/* ── Generische Zwei-/Drei-Spalten-Bildstrecke ────────────────────── */
.shots { display: grid; gap: var(--s3); }
@media (min-width: 700px) { .shots { grid-template-columns: repeat(3, 1fr); } }
.shots img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* ── Video-Vorschau (statt Autoplay im Seiten-Header) ─────────────── */
.showcase { border: 1px solid var(--hair); background: var(--ink); }
.showcase video { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.showcase__cap {
  display: flex; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s4);
  font-size: var(--t-small); color: var(--stone-2);
}
.showcase__cap a { color: var(--paper); font-weight: 600; }
.showcase__cap a:hover { color: var(--red-on-ink); }

/* ── Info-Leiste (3 kompakte Punkte) ───────────────────────────────── */
.infobar { display: grid; gap: var(--s4); text-align: center; }
@media (min-width: 700px) { .infobar { grid-template-columns: repeat(3, 1fr); } }
.infobar__item { display: flex; flex-direction: column; align-items: center; gap: 0.5em; }
.infobar__ico { width: 28px; height: 28px; color: var(--red); }
.infobar__ico svg { width: 100%; height: 100%; }
.infobar__item strong { font-family: var(--display); font-size: 1rem; }
.infobar__item span { font-size: var(--t-small); color: var(--stone); max-width: 26ch; }

/* ── Blog-Filter ───────────────────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--s5); }
.filters button {
  font-family: var(--display); font-weight: 600; font-size: 0.85rem;
  padding: 0.55em 1.1em;
  border: 1.5px solid var(--hair); color: var(--stone);
  transition: all 0.18s var(--ease);
}
.filters button:hover { border-color: var(--ink); color: var(--ink); }
.filters button.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.post[hidden] { display: none; }

/* =====================================================================
   Cookie-Zustimmung & Lade-Sperre für externe Dienste
   ===================================================================== */

/* ── Banner ────────────────────────────────────────────────────────── */
.cookiebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  border-top: 1px solid var(--hair-dark);
  padding: var(--s3) var(--gut);
  display: none;
}
.cookiebar.is-visible { display: block; }
.cookiebar__in {
  max-width: var(--wrap); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
}
.cookiebar p { font-size: 0.88rem; color: var(--stone-2); flex: 1 1 40ch; }
.cookiebar a { color: var(--paper); text-decoration: underline; text-underline-offset: 2px; }
.cookiebar__btns { display: flex; gap: var(--s2); flex: none; }
.cookiebar__btns button {
  font-family: var(--display); font-weight: 600; font-size: 0.86rem;
  padding: 0.6em 1.1em; border: 1.5px solid var(--hair-dark);
  color: var(--paper); transition: all 0.18s var(--ease);
}
.cookiebar__btns button:hover { border-color: var(--paper); }
.cookiebar__btns .btn--red { border-color: var(--red); }

/* ── Platzhalter für gesperrte Einbettungen (Karte, Rechner) ─────────── */
.gate {
  border: 1px solid var(--hair); background: var(--paper-2);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: var(--s2);
  padding: var(--s5) var(--s4);
  min-height: 260px;
}
.gate__ico { width: 32px; height: 32px; color: var(--stone-2); }
.gate p { color: var(--stone); font-size: 0.9rem; max-width: 42ch; }
.gate button { margin-top: 0.25rem; }