/* ============================================================
   F. Brahmst GmbH — Website Stylesheet
   Variante: Craft-Layer nach Apple Human Interface / Fluid Interfaces
   ============================================================ */

:root {
  --terracotta: #C15F4E;
  --terracotta-dark: #A84E3F;
  --blue-gray: #7E8798;
  --blue-gray-light: #9199A6;
  --sage: #CCDDDA;
  --sage-dark: #A9C2BD;
  --ink: #2B2B2C;
  --ink-soft: #55575C;
  --paper: #FAF9F7;
  --white: #FFFFFF;
  --line: #E4E2DE;
  --maxw: 1180px;

  /* ── Motion ──────────────────────────────────────────────
     Kritisch gedämpfte Feder (damping 1.0) als CSS-Kurve.
     Kein Überschwingen, weil hier keine Geste Impuls mitbringt. */
  --ease-spring: cubic-bezier(.32,.72,0,1);
  --ease-calm: cubic-bezier(.4,0,.2,1);
  --press: 90ms;          /* Druck-Feedback, so nah an sofort wie sinnvoll */
  --response: .34s;       /* Apple response 0.3–0.4s */
  --response-slow: .52s;

  /* ── Materialien ─────────────────────────────────────────
     Chrome ist eine durchscheinende Ebene, unter der Inhalt läuft. */
  --chrome: rgba(255,255,255,.72);
  --chrome-strong: rgba(255,255,255,.80);
  --chrome-filter: saturate(180%) blur(20px);
}

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

html { scroll-behavior: smooth; }

/* Ziele von Sprungmarken dürfen nicht unter der Leiste liegen */
[id] { scroll-margin-top: 6.5rem; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--white);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  color: var(--ink);
  font-optical-sizing: auto;
  text-wrap: balance;
}

/* Laufweite und Zeilenabstand laufen der Schriftgröße entgegen:
   große Typo enger und dichter, kleine Typo offener. Ein fester
   letter-spacing-Wert für alle Größen ist immer irgendwo falsch. */
h1 { font-size: 2.625rem; letter-spacing: -0.022em; line-height: 1.08; margin-bottom: 1.25rem; }
h2 { font-size: 1.875rem; letter-spacing: -0.016em; line-height: 1.16; margin-bottom: 1.125rem; }
h3 { font-size: 1.375rem; letter-spacing: -0.011em; line-height: 1.28; margin-bottom: .625rem; }
h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.006em;
  line-height: 1.38;
  margin-bottom: .375rem;
}

p { margin-bottom: 1rem; color: var(--ink-soft); font-size: 1rem; letter-spacing: 0; }

a { color: var(--terracotta); text-decoration: none; }
a:hover { text-decoration: underline; }

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

ul { list-style: none; }

/* Tastatur-Fokus sichtbar, Maus-Fokus nicht */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.tile-link:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 5px;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow {
  font-size: .8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin-bottom: .875rem;
  display: block;
}

/* ── Header / Nav ─────────────────────────────────────────── */
/* Durchscheinende Ebene, Inhalt läuft darunter durch,
   statt einer opaken Leiste, die einen Streifen belegt. */
header.site-header {
  background: transparent;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Das Material liegt auf einer eigenen Ebene, nicht auf der Leiste
   selbst. Sonst würde die Leiste zum Backdrop-Root und das Menü
   darin könnte die Seite dahinter nicht mehr aufnehmen. */
header.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--chrome);
  -webkit-backdrop-filter: var(--chrome-filter);
  backdrop-filter: var(--chrome-filter);
  transition: background var(--response) var(--ease-spring);
}

/* Scroll-Edge statt harter 1px-Linie: die Kante entsteht erst,
   wenn Inhalt tatsächlich unter die Leiste läuft. */
header.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 16px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(43,43,44,.075), rgba(43,43,44,0));
  opacity: 0;
  transition: opacity var(--response) var(--ease-spring);
}
header.site-header.scrolled::before { background: var(--chrome-strong); }
header.site-header.scrolled::after { opacity: 1; }

.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px 32px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo img { height: 110px; width: auto; max-width: none; display: block; }

.nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
}

.nav-links a {
  color: var(--ink);
  font-size: .9375rem;
  white-space: nowrap;
  /* Vibrancy: über durchscheinendem Material bekommt Text etwas mehr
     Laufweite, sonst franst er über wechselndem Grund aus. */
  font-weight: 500;
  letter-spacing: .006em;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color var(--response) var(--ease-spring), opacity var(--press) linear;
}

.nav-links a:hover { color: var(--terracotta); text-decoration: none; }
.nav-links a:not(.nav-cta):active { opacity: .55; }

.nav-links a:not(.nav-cta) { position: relative; padding-bottom: 3px; }
.nav-links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--response) var(--ease-spring);
}
.nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); transform-origin: left; }

.nav-cta {
  background: var(--terracotta);
  color: var(--white) !important;
  padding: 11px 22px;
  border-radius: 4px;
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--response) var(--ease-spring), transform var(--response) var(--ease-spring);
}

.nav-cta:hover { background: var(--terracotta-dark); text-decoration: none; }
/* Feedback beim Drücken, nicht erst beim Loslassen */
.nav-cta:active { transform: scale(.97); opacity: 1; transition-duration: var(--press); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.625rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--response) var(--ease-spring), opacity var(--press) linear;
}
.nav-toggle:active { transform: scale(.9); opacity: .6; transition-duration: var(--press); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 4px;
  font-size: .9375rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  border: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;   /* kein 300ms-Tap-Delay */
}

.btn-primary { background: var(--terracotta); color: var(--white) !important; }
.btn-primary:hover { background: var(--terracotta-dark); text-decoration: none; }

.btn-secondary { background: transparent; color: var(--ink) !important; border: 1.5px solid var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--white) !important; text-decoration: none; }

.btn {
  transition: transform var(--response) var(--ease-spring),
              box-shadow var(--response) var(--ease-spring),
              background var(--response) var(--ease-spring);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(193,95,78,.5); }
.btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(43,43,44,.35); }

/* Der Druck quittiert sofort und hält den Hover-Zustand nicht auf */
.btn:active,
.btn-primary:hover:active,
.btn-secondary:hover:active {
  transform: scale(.97);
  box-shadow: 0 4px 10px -6px rgba(43,43,44,.4);
  transition-duration: var(--press);
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 600px;
  padding: 150px 32px;
  text-align: center;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('../img/hero.jpg');
  background-size: cover;
  background-position: center 65%;
  transform: scale(1.1);
  will-change: transform, opacity;
  animation: heroSettle 1.9s var(--ease-spring) forwards;
  z-index: -2;
}
/* Große Fläche kommt gedimmt herein und blendet erst beim
   Zur-Ruhe-Kommen voll auf, statt in voller Deckung zu wandern. */
@keyframes heroSettle {
  from { transform: scale(1.1); opacity: .5; }
  to   { transform: scale(1); opacity: 1; }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30,30,31,.72) 0%, rgba(30,30,31,.55) 45%, rgba(30,30,31,.88) 100%);
  z-index: -1;
}

/* Hero variant: neutral colour field instead of photo */
.hero-neutral::before { content: none; }
.hero-neutral {
  background:
    radial-gradient(1100px 620px at 18% 12%, rgba(126,135,152,.20), transparent 60%),
    radial-gradient(900px 520px at 88% 92%, rgba(193,95,78,.14), transparent 55%),
    var(--ink);
}
.hero-neutral::after {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 3px solid var(--terracotta);
  z-index: 1;
  pointer-events: none;
}

.hero .eyebrow { color: var(--sage); }
.hero h1 {
  max-width: 760px;
  margin: 0 auto 1.375rem;
  font-size: 3rem;
  letter-spacing: -0.026em;   /* je größer, desto enger */
  line-height: 1.06;
  color: var(--white);
}
.hero p.lead {
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.125rem;
  line-height: 1.6;
  letter-spacing: .002em;
  color: #E7E5E1;
}

/* ── Stats strip ──────────────────────────────────────────── */
.stats {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 54px;
  flex-wrap: wrap;
}
.stat {
  padding: 0 52px;
  border-left: 1px solid rgba(255,255,255,.22);
  text-align: left;
}
.stat:first-child { border-left: none; }
.stat-num {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 3.5rem;
  font-weight: 600;
  font-optical-sizing: auto;
  letter-spacing: -0.03em;
  color: var(--white);
  line-height: 1;
  margin-bottom: .625rem;
}
.stat-label {
  font-size: .875rem;
  color: #E7E5E1;
  text-transform: uppercase;
  letter-spacing: 0.08em;   /* klein und in Versalien: offener setzen */
  font-weight: 500;
}

/* ── Sections ─────────────────────────────────────────────── */
section.block { padding: 84px 0; }
section.block.alt { background: var(--paper); }
section.block.dark { background: var(--ink); color: var(--white); }
section.block.dark h1, section.block.dark h2, section.block.dark h3 { color: var(--white); }
section.block.dark p { color: #C7C6C3; }

.section-intro { max-width: 680px; margin-bottom: 44px; font-size: 1.0625rem; line-height: 1.62; }

/* ── Split media/text layout (Wer wir sind, etc.) ─────────── */
.split {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 64px;
  align-items: center;
}
.split.reverse { grid-template-columns: 1.05fr 0.95fr; }
.split.reverse .split-media { order: 2; }
.split-media {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 34px 64px -28px rgba(43,43,44,.32);
}
.split-media img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 1.2s var(--ease-spring);
}
.split-media.is-visible img { transform: scale(1); }
.split-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  pointer-events: none;
}
.split-body p:last-child { margin-bottom: 0; }

/* ── Scroll reveal utilities ──────────────────────────────── */
/* Kürzere Wege, Federkurve statt ease. Das Element soll ankommen,
   nicht auftreten: Deckung führt, Bewegung ist nur die Andeutung
   der Richtung, aus der es kommt. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity var(--response-slow) var(--ease-calm),
              transform var(--response-slow) var(--ease-spring);
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal-left {
  opacity: 0;
  transform: translate3d(-20px, 0, 0);
  transition: opacity .58s var(--ease-calm), transform .58s var(--ease-spring);
}
.reveal-left.is-visible { opacity: 1; transform: none; }

.reveal-right {
  opacity: 0;
  transform: translate3d(20px, 0, 0);
  transition: opacity .58s var(--ease-calm), transform .58s var(--ease-spring);
}
.reveal-right.is-visible { opacity: 1; transform: none; }

.reveal-group.is-visible .reveal-item:nth-child(1) { transition-delay: .02s; }
.reveal-group.is-visible .reveal-item:nth-child(2) { transition-delay: .06s; }
.reveal-group.is-visible .reveal-item:nth-child(3) { transition-delay: .10s; }
.reveal-group.is-visible .reveal-item:nth-child(4) { transition-delay: .14s; }
.reveal-group.is-visible .reveal-item:nth-child(5) { transition-delay: .18s; }
.reveal-group.is-visible .reveal-item:nth-child(6) { transition-delay: .22s; }
.reveal-group .reveal-item {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity .44s var(--ease-calm), transform .44s var(--ease-spring);
}
.reveal-group.is-visible .reveal-item { opacity: 1; transform: none; }

/* ── Versprechen / Werte cards ────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

/* Die Karte ist nicht klickbar, also hebt sie sich beim Hover auch
   nicht an. Anheben ist ein Versprechen auf eine Aktion. Sie bekommt
   nur mehr Präsenz. */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 30px 28px;
  transition: box-shadow var(--response) var(--ease-spring),
              border-color var(--response) var(--ease-spring);
}
.card:hover {
  box-shadow: 0 22px 40px -30px rgba(43,43,44,.22);
  border-color: var(--sage-dark);
}

.card .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--ink);
  font-weight: 700;
  font-size: .9375rem;
  margin-bottom: 18px;
}

.card p { margin-bottom: 0; font-size: .9375rem; line-height: 1.62; }

/* ── Leistungen Kacheln (Startseite) ──────────────────────── */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  /* Alle Kacheln einer Reihe gleich hoch, unabhängig von der Textlänge */
  grid-auto-rows: 1fr;
}

.tile {
  position: relative;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 30px 26px 28px;
  overflow: hidden;
  transition: border-color var(--response) var(--ease-spring),
              transform var(--response) var(--ease-spring),
              box-shadow var(--response) var(--ease-spring);
}

.tile::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--response) var(--ease-spring);
}

.tile:hover {
  border-color: var(--terracotta);
  transform: translateY(-3px);
  box-shadow: 0 22px 40px -26px rgba(43,43,44,.22);
}
.tile:hover::before { transform: scaleX(1); }

.tile p { font-size: .875rem; line-height: 1.55; margin-bottom: 0; }
.tile a { color: var(--ink); }
.tile a:hover { text-decoration: none; }

.tile-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tile-link:hover { text-decoration: none; }
/* Die Kachel ist klickbar, also quittiert sie den Druck sofort */
.tile-link:active .tile {
  transform: scale(.985);
  box-shadow: 0 6px 14px -10px rgba(43,43,44,.3);
  transition-duration: var(--press);
}

/* ── Leistungen (Detailseite) ─────────────────────────────── */
.leistung {
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
}
.leistung:last-of-type { border-bottom: none; }

.leistung .sub {
  font-style: italic;
  color: var(--terracotta);
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 18px;
  display: block;
}

.leistung-body {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: start;
}

/* ── Leistung with photo ──────────────────────────────────── */
.leistung.with-media {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 52px;
  align-items: center;
}
.leistung.with-media.media-right { grid-template-columns: 1.15fr 0.85fr; }
.leistung.with-media.media-right .leistung-media { order: 2; }
.leistung-media {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 28px 54px -26px rgba(43,43,44,.28);
}
.leistung-media img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  filter: saturate(.96) contrast(1.02);
  transform: scale(1.09);
  transition: transform 1.15s var(--ease-spring);
}
.leistung-media.is-visible img { transform: scale(1); }
.leistung.with-media .leistung-content .sub { margin-bottom: 14px; }

.leistung ul.scope li {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
  padding-left: 22px;
  position: relative;
  margin-bottom: 10px;
}
.leistung ul.scope li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
}

.scope-label {
  font-weight: 600;
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-bottom: 14px;
  display: block;
}

/* ── Team grid (flach, ohne Hierarchie) ───────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.team-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px 20px;
  text-align: center;
  transition: box-shadow var(--response) var(--ease-spring),
              border-color var(--response) var(--ease-spring);
}
/* Nicht klickbar, also kein Anheben */
.team-card:hover {
  box-shadow: 0 20px 38px -30px rgba(43,43,44,.2);
  border-color: var(--sage-dark);
}
.team-avatar {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-optical-sizing: auto;
  font-size: 1.0625rem;
}
.team-card:nth-child(3n+2) .team-avatar { background: var(--blue-gray-light); color: var(--white); }
.team-card:nth-child(3n+3) .team-avatar { background: var(--terracotta); color: var(--white); }
.team-card h4 { margin-bottom: 6px; font-size: 1rem; letter-spacing: -0.004em; }
.team-role { font-size: .8125rem; letter-spacing: .004em; color: var(--ink-soft); line-height: 1.45; display: block; }

/* ── Partner logos ────────────────────────────────────────── */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px;
}
.partner-tile {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  transition: border-color var(--response) var(--ease-spring),
              box-shadow var(--response) var(--ease-spring);
}
/* Nicht klickbar, also kein Anheben */
.partner-tile:hover {
  border-color: var(--sage-dark);
  box-shadow: 0 18px 34px -30px rgba(43,43,44,.18);
}
.partner-tile img {
  max-height: 46px;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1) opacity(.72);
  transition: filter var(--response) var(--ease-calm);
}
.partner-tile:hover img { filter: grayscale(0) opacity(1); }
.partner-tile.dark { background: var(--ink); }
.partner-tile.dark img { filter: none; }

/* ── Contact ──────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.contact-info dt {
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue-gray);
  margin-top: 20px;
  margin-bottom: 4px;
}
.contact-info dt:first-child { margin-top: 0; }
.contact-info dd { font-size: 1rem; color: var(--ink); }

.map-frame {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-consent {
  text-align: center;
  padding: 40px;
  color: var(--ink-soft);
  font-size: .875rem;
  line-height: 1.6;
}
.map-consent .btn { margin-top: 16px; }

/* ── Footer ───────────────────────────────────────────────── */
footer.site-footer {
  background: var(--ink);
  color: #B9B8B5;
  padding: 50px 0 30px;
  font-size: .875rem;
  line-height: 1.7;
}
footer.site-footer .footer-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #3F3F40;
  margin-bottom: 24px;
}
footer.site-footer a {
  color: #D8D6D2;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--press) linear;
}
footer.site-footer a:active { opacity: .55; }
footer.site-footer .footer-links { display: flex; gap: 26px; flex-wrap: wrap; }
footer.site-footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  color: #8F8E8B;
  font-size: .8125rem;
}

/* ── Legal pages ──────────────────────────────────────────── */
/* .wrap und .legal-page sind hier dasselbe Element. Ohne das
   seitliche Padding klebt der Text auf schmalen Bildschirmen
   an der Kante. */
.legal-page { padding: 70px 32px 100px; }
.legal-page h2 { font-size: 1.375rem; letter-spacing: -0.011em; line-height: 1.28; margin-top: 36px; }
.legal-page p, .legal-page li { font-size: .9375rem; line-height: 1.68; }
.legal-page ul { list-style: disc; padding-left: 20px; margin-bottom: 16px; }
.legal-page ul li { margin-bottom: 8px; color: var(--ink-soft); }

/* ── Page header (non-home pages) ─────────────────────────── */
.page-header {
  padding: 64px 0 20px;
  background: var(--paper);
}
.page-header h1 { font-size: 2.375rem; letter-spacing: -0.021em; line-height: 1.1; margin-bottom: .625rem; }
.page-header p { font-size: 1.0625rem; line-height: 1.62; max-width: 640px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 860px) {
  .nav-toggle { display: block; }

  /* Das Panel kommt aus dem Button, aus dem es aufgerufen wurde,
     und verschwindet auf demselben Weg wieder dorthin. Es blendet
     nicht nur auf, sondern materialisiert: Unschärfe und Maßstab
     laufen gemeinsam, damit es sich wie eine echte Ebene anfühlt. */
  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2;
    background: rgba(255,255,255,.86);
    -webkit-backdrop-filter: saturate(180%) blur(26px);
    backdrop-filter: saturate(180%) blur(26px);
    box-shadow: 0 22px 48px -26px rgba(43,43,44,.45);
    border-top: 1px solid rgba(255,255,255,.5);
    padding: 20px 32px 26px;
    gap: 18px;

    transform-origin: top right;
    transform: scale(.96) translateY(-6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s var(--ease-calm),
                transform var(--response) var(--ease-spring),
                visibility 0s linear var(--response);
  }
  .nav-links.open {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .18s var(--ease-calm),
                transform var(--response) var(--ease-spring),
                visibility 0s linear 0s;
  }

  .card-grid { grid-template-columns: 1fr; }
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .leistung-body { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .split, .split.reverse { grid-template-columns: 1fr; gap: 36px; }
  .split.reverse .split-media { order: 0; }
  .split-media img { aspect-ratio: 16/10; }
  .leistung.with-media, .leistung.with-media.media-right { grid-template-columns: 1fr; gap: 26px; }
  .leistung.with-media.media-right .leistung-media { order: 0; }
  .stats { justify-content: flex-start; gap: 30px 0; }
  .stat { border-left: none; padding: 0 30px 0 0; }
  .stat-num { font-size: 2.5rem; letter-spacing: -0.024em; }
  .hero { min-height: 460px; padding: 110px 24px; }
  /* Kleiner gesetzt heißt: etwas weniger eng laufen lassen */
  h1 { font-size: 2.125rem; letter-spacing: -0.018em; line-height: 1.12; }
  .hero h1 { font-size: 2rem; letter-spacing: -0.018em; line-height: 1.14; }
  .page-header h1 { font-size: 2rem; letter-spacing: -0.017em; }
  section.block { padding: 56px 0; }
}

@media (max-width: 560px) {
  .tile-grid { grid-template-columns: 1fr; }
  .partner-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  footer.site-footer .footer-top { flex-direction: column; }
}

/* ── Systemeinstellungen respektieren ─────────────────────── */

/* Weniger Bewegung heißt nicht: keine Rückmeldung. Es heißt:
   überblenden statt schieben, kein Parallax, keine großen Wege. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal, .reveal-left, .reveal-right, .reveal-group .reveal-item {
    transform: none !important;
    transition: opacity .2s linear !important;
  }

  .hero-bg { animation: none; transform: none; opacity: 1; }
  .split-media img, .leistung-media img { transform: none !important; transition: none !important; }

  .btn, .btn:hover, .btn:active,
  .tile, .tile:hover, .tile-link:active .tile,
  .nav-cta, .nav-cta:active,
  .nav-toggle, .nav-toggle:active {
    transform: none !important;
  }
  /* Rückmeldung bleibt, nur ohne Bewegung */
  .btn:active, .nav-cta:active, .tile-link:active .tile { opacity: .7; }

  .nav-links {
    transform: none !important;
    transition: opacity .18s linear, visibility 0s linear .18s !important;
  }
  .nav-links.open { transition: opacity .15s linear, visibility 0s linear 0s !important; }

  .tile::before { transition: none; }
  .nav-links a:not(.nav-cta)::after { transition: none; }
}

/* Weniger Transparenz: Material wird fest, Unschärfe fällt weg */
@media (prefers-reduced-transparency: reduce) {
  header.site-header { border-bottom: 1px solid var(--line); }
  header.site-header::before,
  header.site-header.scrolled::before {
    background: var(--white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  header.site-header::after { display: none; }
  .nav-links {
    background: var(--white) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid var(--line);
  }
}

/* Mehr Kontrast: klare Kanten statt weicher Übergänge */
@media (prefers-contrast: more) {
  header.site-header { border-bottom: 1px solid var(--ink); }
  header.site-header::before,
  header.site-header.scrolled::before {
    background: var(--white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  header.site-header::after { display: none; }
  .card, .tile, .team-card, .partner-tile, .map-frame { border-color: var(--ink-soft); }
  p, .leistung ul.scope li, .team-role, .legal-page p, .legal-page li { color: var(--ink); }
  .nav-links {
    background: var(--white) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}