/* ==========================================================================
   Elektro P. Lemberger – Designsystem v4
   Marke: Rot #AE0F09 · Gold #F5C244 · warmes Tiefschwarz #16130F

   WARUM v4 (verbindlich – vor jeder Änderung lesen)
   v3 hat die Regel „Weiß ist die einzige Flächenfarbe, Abgrenzung nur über
   Haarlinien" konsequent durchgezogen. Das Ergebnis war eine Seite mit acht
   optisch identischen weißen Abschnitten, 36–48 px Polsterung, 3-px-Radien und
   kalten Blaugrautönen (#f4f5f6). Kundenurteil: „sieht hart nach Krankenhaus
   aus". Das ist kein Detailfehler, sondern die Regel selbst: ohne Flächen-
   wechsel, ohne Tiefe und mit kaltem Grau entsteht ein Formular, keine Website.

   v4 ersetzt sie durch drei Flächen mit festem Rhythmus:

   · WEISS (--paper) bleibt die Grundfläche für Inhalt.
   · SAND (--sand, #f7f4ef) ist die zweite Flächenfarbe und darf ganze
     Abschnitte tragen. Sand ist WARM. Kaltes Blaugrau ist im ganzen Projekt
     verboten – es ist der eigentliche Grund für den Klinik-Eindruck.
   · TINTE (--ink) trägt pro Seite genau EINEN inhaltlichen Abschnitt plus
     Seitenkopf und Footer. Nicht mehr: zwei dunkle Blöcke im Fließtext machen
     die Seite schwer.

   Damit ergibt sich als Muster: Kopf → Weiß → Sand → Weiß → Tinte → Weiß →
   Footer. Ein Wechsel alle zwei bis drei Abschnitte, nachzählbar per Skript
   (Set über getComputedStyle(...).backgroundColor aller Sektionen).

   Weiterhin gilt aus v3:
   · ROT bleibt Akzent (Text, Icons, Buttons, schmale Balken) und wird nie zur
     Flächenfarbe einer ganzen Sektion – das ergäbe eine Flaggenwirkung.
   · Fotos tragen die Wirkung, nicht Verläufe, Glow oder Raster.
   · Kein rhetorischer Gedankenstrich im Fließtext (" – "). Er ist das
     auffälligste KI-Text-Signal; echte Satzzeichen verwenden.

   Neu in v4:
   · Abstände 52–96 px statt 36–48 px. Nach oben ist das begrenzt: 115 px waren
     in der allerersten Fassung als „KI-Landingpage" angestrichen worden. Der
     Korridor zwischen beiden Fehlern liegt bei rund 52–96 px.
   · Flächenwechsel: 5–6 Abschnitte pro Seite, nicht mehr. Neun Wechsel waren
     schon einmal das Problem. Innerhalb einer Farbfläche trennen Haarlinien.
   · Radien 8/16 px statt 3 px, weiche WARME Schatten statt reiner Haarlinien.
     Karten dürfen wieder Karten sein.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (selbst gehostet – kein externer Request, DSGVO-konform)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/oswald-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/oswald-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  --red: #ae0f09;
  --red-dark: #8b0c07;
  /* Auf Tinte ist das Marken-Rot zu dunkel für Text; diese Aufhellung behält
     den Farbton und erreicht 4,6:1 gegen #16130f. */
  --red-on-ink: #e8564a;
  --gold: #f5c244;

  /* Warmes statt kaltes Schwarz: bei #0a0b0d wirkt der Footer blaustichig und
     die Fotos (Staub, Holz, Kupfer) beißen sich damit. */
  --ink: #16130f;
  --ink-soft: #211c16;
  --ink-2: #262019;
  --ink-line: rgba(255, 250, 240, 0.13);
  --ink-line-strong: rgba(255, 250, 240, 0.26);
  --on-ink: #f6f2ec;
  --on-ink-dim: #b6ada1;

  --paper: #ffffff;
  /* Warme Sandtöne. --paper-2 bleibt als Alias bestehen, weil ältere
     Komponenten (Formularfelder, .map-frame) darauf verweisen. */
  --sand: #f7f4ef;
  --sand-2: #efe9e0;
  --paper-2: var(--sand);

  --text: #1a1714;
  --text-2: #5e574e; /* 7,0:1 auf Weiß · 6,6:1 auf Sand */
  /* 5,6:1 auf Weiß · 5,1:1 auf Sand · 4,6:1 auf Sand-2. Bildunterschriften
     stehen auch auf den beiden Sandtönen, deshalb wird gegen den dunkelsten
     davon geprüft, nicht nur gegen Weiß. */
  --text-3: #6f675d;
  --line: #e6dfd5;
  --line-strong: #d3c9bb;

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.6rem, 5.2vw, 4.4rem);
  --fs-h1: clamp(2rem, 3.7vw, 3rem);
  --fs-h2: clamp(1.65rem, 2.8vw, 2.35rem);
  --fs-h3: clamp(1.1rem, 1.5vw, 1.28rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.75rem;

  --container: 1220px;
  --container-narrow: 780px;
  --gutter: clamp(1.25rem, 3.5vw, 2.25rem);

  /* Vertikalrhythmik v4: großzügig. Die knappen Werte aus v3 (36–48 px) waren
     der zweite Grund für den Formular-Eindruck. */
  --section-y: clamp(3.25rem, 5vw, 4.75rem);
  --section-y-lg: clamp(4rem, 6.2vw, 6rem);
  --section-y-tight: clamp(2.25rem, 3.5vw, 3rem);

  /* Abstandsskala – jeder vertikale Abstand kommt aus diesen Werten.
     Keine freihändigen Margins mehr im Markup. */
  --sp-xs: 0.5rem;
  --sp-s: 0.75rem;
  --sp-m: 1.25rem;
  --sp-l: 1.75rem;
  --sp-xl: 2.75rem;
  --sp-2xl: 4rem;

  --radius-sm: 5px;
  --radius: 8px;
  --radius-lg: 16px;

  /* Warme Schatten. Ein neutralgrauer Schatten auf Sand wirkt schmutzig. */
  --shadow-sm: 0 1px 2px rgba(38, 28, 14, 0.06);
  --shadow-md: 0 4px 16px rgba(38, 28, 14, 0.08), 0 1px 3px rgba(38, 28, 14, 0.06);
  --shadow-lg: 0 18px 44px rgba(38, 28, 14, 0.13), 0 3px 10px rgba(38, 28, 14, 0.07);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --header-h: 76px;
}
@media (max-width: 900px) {
  :root {
    --header-h: 64px;
  }
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.nav-open {
  overflow: hidden;
}
img,
svg,
video {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
  overflow-wrap: break-word;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  background: none;
  border: 0;
  cursor: pointer;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
/* Überschriften in gemischter Schreibung. Durchgehende Versalien in einer
   Schmalschrift lesen sich wie eine Handwerksbroschüre der 90er; Großbuchstaben
   bleiben den kleinen Auszeichnungen vorbehalten (Eyebrow, Buttons, Labels). */
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.005em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Große Schlagzeilen ohne Silbentrennung – „Gewer-be" liest sich schlecht.
   overflow-wrap bleibt als Notbremse, damit auf 320 px nichts abgeschnitten wird. */
h1,
.h1,
.display {
  letter-spacing: -0.015em;
  line-height: 1.08;
  hyphens: manual;
}
p,
li,
dd,
address {
  overflow-wrap: break-word;
}
/* text-wrap: pretty erst ab mittlerer Breite – in schmalen Spalten erzeugt es
   stark unterschiedlich lange Zeilen. */
@media (min-width: 700px) {
  p,
  li,
  dd {
    text-wrap: pretty;
  }
}
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
::selection {
  background: var(--gold);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow {
  max-width: var(--container-narrow);
}
.section {
  padding-block: var(--section-y);
  position: relative;
}
.section--lg {
  padding-block: var(--section-y-lg);
}
.section--tight {
  padding-block: clamp(1.75rem, 2.6vw, 2.5rem);
}
.section--paper {
  background: var(--paper);
}
/* Zweite Flächenfarbe. Warm, nicht kalt: das ist der Unterschied zwischen
   „Werkstatt" und „Wartezimmer". */
.section--sand,
.section--paper-2 {
  background: var(--sand);
}
/* Pro Seite genau EIN inhaltlicher Tinte-Abschnitt (plus Kopf und Footer). */
.section--ink {
  background: var(--ink);
  color: var(--on-ink);
}
.section--ink h1,
.section--ink h2,
.section--ink h3,
.section--ink h4 {
  color: #fff;
}
.section--ink p {
  color: var(--on-ink-dim);
}
.section--ink .lead {
  color: #ccc3b6;
}

/* Haarlinie trennt gleichfarbige Sektionen, ohne die Fläche zu wechseln.
   Nur noch dort nötig, wo zwei gleiche Flächen aufeinandertreffen. */
.rule-top {
  border-top: 1px solid var(--line);
}
.section--ink.rule-top {
  border-top-color: var(--ink-line);
}
/* Weicher Übergang Weiß -> Sand: eine Haarlinie zwischen zwei verschiedenen
   Flächen ist überflüssig und sieht nach Tabellenrahmen aus. */
.section--sand.rule-top,
.section--sand + .section--paper.rule-top {
  border-top-color: transparent;
}

.grid {
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.5rem);
}
.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--gold);
  color: var(--ink);
  padding: 0.8rem 1.3rem;
  font-weight: 700;
}
.skip-link:focus {
  left: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   5. Typo-Bausteine
   -------------------------------------------------------------------------- */
.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.7rem;
}
.section--ink .eyebrow,
.page-head .eyebrow {
  color: var(--gold);
}
.display {
  font-size: var(--fs-display);
  font-weight: 700;
}
.h1 {
  font-size: var(--fs-h1);
}
.h2 {
  font-size: var(--fs-h2);
}
.h3 {
  font-size: var(--fs-h3);
}
.lead {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--text-2);
}
.section--ink .lead,
.page-head .lead {
  color: var(--on-ink-dim);
}
/* Kleiner Zusatztext (Hinweise unter einer Karte, Randbemerkungen). */
.note-sm {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-2);
}
.text-red {
  color: var(--red);
}
.stack > * + * {
  margin-top: var(--sp-m);
}
/* Vertikale Abstände ausschließlich über diese Klassen – nicht per style-Attribut */
.mt-xs {
  margin-top: var(--sp-xs);
}
.mt-s {
  margin-top: var(--sp-s);
}
.mt-m {
  margin-top: var(--sp-m);
}
.mt-l {
  margin-top: var(--sp-l);
}
.mt-xl {
  margin-top: var(--sp-xl);
}
.mb-s {
  margin-bottom: var(--sp-s);
}
.mb-m {
  margin-bottom: var(--sp-m);
}
.mb-l {
  margin-bottom: var(--sp-l);
}
.center-block {
  margin-inline: auto;
}

/* Kleiner Textblock: Zwischentitel plus Fließtext, wie in Spalten mehrfach
   verwendet. Ersetzt wiederholte style-Attribute im Markup. */
.txt > h3,
.txt > .h3 {
  margin-bottom: var(--sp-xs);
}
.txt > p {
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.txt > p + h3,
.txt > p + .h3 {
  margin-top: var(--sp-m);
}
.section--ink .txt > p {
  color: var(--on-ink-dim);
}

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(1.75rem, 2.6vw, 2.25rem);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head p {
  margin-top: 0.8rem;
}
/* Titel mit Zählung rechts – ordnet ohne zusätzliches Label */
.section-head--row {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.section-head--row > div:first-child {
  max-width: 46rem;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1.5px solid var(--red);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}
.btn:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
}
.btn svg {
  flex: none;
}
.btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.btn--gold:hover {
  background: #e2ad2c;
  border-color: #e2ad2c;
}
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn--ghost:hover {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
}
.section--ink .btn--ghost,
.page-head .btn--ghost,
.hero .btn--ghost {
  color: #fff;
  border-color: rgba(255, 250, 240, 0.42);
  background: rgba(255, 250, 240, 0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.section--ink .btn--ghost:hover,
.page-head .btn--ghost:hover,
.hero .btn--ghost:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}
.btn--lg {
  padding: 1rem 1.75rem;
}
.btn--block {
  width: 100%;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
@media (max-width: 520px) {
  /* Die Reihe muss selbst die volle Breite bekommen – sonst bleibt sie
     inhaltsbreit und ragt trotz width:100% der Buttons heraus. */
  .btn-row {
    width: 100%;
    flex: 1 1 100%;
  }
  .btn-row .btn {
    width: 100%;
  }
  .btn {
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
  }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
}
.link-arrow:hover {
  color: var(--red-dark);
}
.section--ink .link-arrow,
.page-head .link-arrow,
.map-consent .link-arrow {
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   7. Logo
   -------------------------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.logo__plate {
  display: block;
  background: var(--red-dark);
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.9rem, 2vw, 1.2rem);
  line-height: 1;
  padding: 0.5em 0.6em 0.44em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   8. Topbar + Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.header.is-stuck {
  box-shadow: 0 2px 10px rgba(10, 11, 13, 0.07);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}
.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.15rem, 0.9vw, 0.7rem);
}
.nav__link {
  position: relative;
  display: block;
  white-space: nowrap;
  padding: 0.55rem 0.4rem;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0.4rem;
  right: 0.4rem;
  bottom: 0.25rem;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease-out);
}
.nav__link:hover {
  color: var(--red);
}
.nav__link:hover::after,
.nav__link.is-active::after {
  transform: scaleX(1);
}
.nav__link.is-active {
  color: var(--red);
  font-weight: 600;
}
.nav__item {
  position: relative;
}
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.nav__panel {
  position: absolute;
  top: 100%;
  left: -0.5rem;
  width: 290px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  padding: 0.4rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s var(--ease), visibility 0.18s;
}
.nav__item:hover .nav__panel,
.nav__item:focus-within .nav__panel {
  opacity: 1;
  visibility: visible;
}
.nav__panel a {
  display: block;
  padding: 0.55rem 0.65rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.3;
}
.nav__panel a:hover {
  background: var(--paper-2);
  color: var(--red);
}
@media (max-width: 1199px) {
  .nav__panel {
    display: none;
  }
}

.header__cta {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex: none;
}
/* Telefonnummer direkt neben dem Symbol, einzeilig.
   Die Bürozeiten stehen im Fußbereich und auf der Kontaktseite – im Header
   waren sie als zweite Zeile zu gedrängt. */
.header__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
  white-space: nowrap;
}
.header__phone svg {
  color: var(--red);
  flex: none;
}
.header__phone:hover {
  color: var(--red);
}
.burger {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  flex: none;
}
.burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.burger[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1199px) {
  .burger {
    display: flex;
  }
  .header__phone {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
  }
  .header__phone span {
    display: none;
  }
  .header__cta .btn {
    display: none;
  }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    padding: 1.25rem var(--gutter) 2.5rem;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.25s var(--ease), transform 0.3s var(--ease-out),
      visibility 0s linear 0.25s;
  }
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.25s var(--ease), transform 0.3s var(--ease-out),
      visibility 0s linear 0s;
  }
  .nav__link {
    color: #fff;
    font-size: 1.3rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--ink-line);
  }
  .nav__toggle {
    display: flex;
  }
  .nav__link::after {
    display: none;
  }
  .nav__link.is-active {
    color: var(--gold);
  }
  .nav__toggle svg {
    display: none;
  }
  .nav__mobile-extra {
    margin-top: 1.75rem;
    display: grid;
    gap: 0.7rem;
  }
  .nav__mobile-extra .btn--ghost {
    color: #fff;
    border-color: var(--ink-line-strong);
  }
  .nav__mobile-extra .btn--ghost:hover {
    background: #fff;
    color: var(--ink);
  }
}
@media (min-width: 1200px) {
  .nav__mobile-extra {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   9. Hero: randloses Foto mit Text darauf.

   Frühere Fassungen mit Foto sind zweimal durchgefallen ("hängt da einfach
   drin", "Bild matschig"). Ursache war aber nicht das Prinzip, sondern das
   Material: die alten Fotos waren durchweg hell, flau und kontraktarm
   (Mittelwert 180–200 von 255), unter einem Verlaufsschleier wird daraus
   zwangsläufig grauer Matsch.

   Das Kopfbild von v4 ist eigens dafür erzeugt: dunkler Technikraum,
   gerichtetes Bauscheinwerferlicht, freie dunkle Fläche links für den Text.
   Damit trägt das Foto den Schleier, statt von ihm zerstört zu werden. Wird das
   Bild je gegen ein helles getauscht, muss dieser Abschnitt neu bewertet
   werden – die Regel ist "Bild für den Schleier auswählen", nicht umgekehrt.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink);
  min-height: clamp(30rem, 76vh, 46rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
}
.hero__media img,
.hero__media picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 55%;
}
/* Zwei Verläufe statt einem: der senkrechte hält den Text unten lesbar, der
   waagerechte dunkelt die Textseite ab, ohne den hellen Lichtkegel rechts
   im Bild zuzukleistern. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(22, 19, 15, 0.94) 0%, rgba(22, 19, 15, 0.72) 34%,
                    rgba(22, 19, 15, 0.24) 66%, rgba(22, 19, 15, 0.18) 100%),
    linear-gradient(to right, rgba(22, 19, 15, 0.8) 0%, rgba(22, 19, 15, 0.35) 46%,
                    rgba(22, 19, 15, 0) 78%);
}
.hero__inner {
  position: relative;
  width: 100%;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.hero__text {
  max-width: 38rem;
}
.hero h1 {
  font-size: var(--fs-display);
  font-weight: 600;
  color: #fff;
  max-width: 16ch;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}
.hero .eyebrow {
  color: var(--gold);
}
.hero__claim {
  margin-top: var(--sp-m);
  max-width: 46ch;
  font-size: 1.1rem;
  line-height: 1.62;
  color: #ddd5c9;
}
.hero .btn-row {
  margin-top: var(--sp-l);
}
.hero__status {
  margin-top: var(--sp-m);
}
.hero__status .badge-open {
  margin-top: 0;
  color: #ddd5c9;
}
@media (max-width: 720px) {
  .hero {
    min-height: 0;
  }
  .hero__inner {
    padding-block: clamp(2.5rem, 12vw, 4rem);
  }
  .hero__media img,
  .hero__media picture {
    object-position: 66% 50%;
  }
  /* Auf schmalen Geräten bleibt vom Bild zu wenig übrig, um Kontrast zu
     liefern: dann trägt die Fläche, nicht das Motiv. */
  .hero__media::after {
    background: linear-gradient(to top, rgba(22, 19, 15, 0.96) 0%,
                                rgba(22, 19, 15, 0.86) 45%, rgba(22, 19, 15, 0.55) 100%);
  }
}

/* Die sieben Bereiche als eigenes Band unter dem Kopfbild. Im Hero standen sie
   dem Bild im Weg und machten den ersten Bildschirm voll. */
.areabar {
  background: var(--ink);
  border-top: 1px solid var(--ink-line);
  padding-block: var(--sp-m);
}
.areabar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-m) var(--sp-l);
  flex-wrap: wrap;
}
.areabar__label {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
  flex: none;
}
.areabar .tags {
  gap: 0.5rem;
}
.areabar a.tag {
  border-color: var(--ink-line-strong);
  color: #e7e0d6;
  background: rgba(255, 250, 240, 0.05);
}
.areabar a.tag:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(245, 194, 68, 0.1);
}
/* Nur die anklickbare Variante wird größer: als Link braucht der Chip eine
   vernünftige Tippfläche (25 px waren zu flach), als reine Auszeichnung auf den
   Leistungsseiten soll er schlank bleiben. */
a.tag {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.4rem 0.85rem;
}
a.tag:hover {
  border-color: var(--red);
  color: var(--red);
}

/* Projekt-Karten: Foto trägt, Text bleibt kurz. Bewusst kein Icon in getönter
   Kachel und keine Rahmen-Box – das Bild ist der Inhalt. */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.5rem, 2.6vw, 2.25rem);
}
.proj figure {
  margin: 0;
}
.proj img,
.proj picture {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--sand-2);
  border-radius: var(--radius-lg);
}
.proj__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin-top: var(--sp-m);
}
.proj__cat {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}
.proj__where {
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.proj h3 {
  margin-top: 0.35rem;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
}
.proj p {
  margin-top: 0.5rem;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-2);
}

/* Einsatzgebiet: zwei Spalten, links die Orte als Liste mit Haarlinien,
   rechts der Direktkontakt im .panel – dieselbe Bauform wie überall. */
.area-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 860px) {
  .area-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-l);
  }
}
.area-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
  margin-top: var(--sp-m);
  padding: 0;
  list-style: none;
}
.area-list li {
  font-size: var(--fs-sm);
  color: var(--text);
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 100px;
}

/* Kennzahlen als Sockel des Hero: gleichmäßiges Raster mit Trennlinien,
   Zahl über Beschriftung. Da Hero und Inhalt beide weiß sind, grenzen zwei
   Haarlinien den Sockel ab – nicht eine Farbfläche.
   Die Zahlen stehen in Tinte, nicht in Rot: Rot bleibt den Handlungen
   (Buttons, Links) vorbehalten, sonst wird der Seitenanfang unruhig. */
/* Sand statt Weiß: der Sockel führt vom dunklen Kopfbild in den hellen Inhalt
   über, statt hart auf Weiß zu schneiden. */
.keyfacts {
  background: var(--sand);
  border-bottom: 1px solid var(--line);
}
.keyfacts__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.keyfacts__list > div {
  padding: var(--sp-xl) var(--sp-m);
  border-left: 1px solid var(--line-strong);
  min-width: 0;
}
.keyfacts__list > div:first-child {
  border-left: 0;
  padding-left: 0;
}
.keyfacts__list > div:last-child {
  padding-right: 0;
}
.keyfacts dt {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.9vw, 2.35rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.keyfacts dd {
  margin: 0.5rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-2);
  max-width: 24ch;
}
@media (max-width: 720px) {
  .keyfacts__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .keyfacts__list > div {
    padding: var(--sp-m) var(--sp-m);
  }
  .keyfacts__list > div:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
  .keyfacts__list > div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
  .keyfacts__list > div:nth-child(even) {
    padding-right: 0;
  }
}

/* --------------------------------------------------------------------------
   10. Fotobausteine
   -------------------------------------------------------------------------- */
.figure {
  position: relative;
  margin: 0;
}
/* Bewusst ohne border-radius: eine abgerundete Foto-Karte in einer eckigen
   Text/Bild-Spalte wirkt wie eine UI-Komponente statt wie ein gerichtetes
   Bild. Die scharfe Kante liest sich redaktioneller, ruhiger. */
.figure img {
  width: 100%;
  background: var(--sand-2);
  border-radius: var(--radius-lg);
}
/* Randlose Fotos (Seitenkopf, Hero) behalten die scharfe Kante. */
.page-head__media img,
.hero__media img,
.figure--flush img {
  border-radius: 0;
}
.figure figcaption {
  margin-top: 0.6rem;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* Text/Bild nebeneinander */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: center;
}
.split--text-right > .figure {
  order: -1;
}
@media (max-width: 800px) {
  .split--text-right > .figure {
    order: 0;
  }
}

/* --------------------------------------------------------------------------
   11. Leistungskarten mit Foto
   -------------------------------------------------------------------------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
}
/* Feste Dreierspalte, sobald Platz ist – so bleibt das Raster berechenbar */
@media (min-width: 960px) {
  .svc-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Die siebte Leistung füllt die letzte Reihe als breite Zeile,
     statt eine Lücke zu lassen. Zwei Klassen, damit die Regel die
     spätere .svc-Grundregel (flex-direction: column) überstimmt. */
  .svc-grid .svc--wide {
    grid-column: 1 / -1;
    flex-direction: row;
    min-height: 15.5rem;
  }
  .svc-grid .svc--wide .svc__media {
    aspect-ratio: auto;
    width: 38%;
    flex: none;
  }
  .svc-grid .svc--wide .svc__body {
    justify-content: center;
    padding: 2rem 2.5rem;
  }
  .svc-grid .svc--wide .svc__body p {
    max-width: 62ch;
    margin-bottom: 0;
  }
  /* margin-top:auto schiebt den Link in einer Spalte ans Ende – in der breiten
     Zeile hat das die Karte auseinandergezogen und ein grosses Loch erzeugt. */
  .svc-grid .svc--wide .svc__more {
    margin-top: 1.1rem;
  }
}
.svc {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.25s var(--ease), border-color 0.2s var(--ease),
    box-shadow 0.25s var(--ease);
}
.svc:hover {
  border-color: transparent;
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.svc__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sand-2);
}
.svc__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.svc:hover .svc__media img {
  transform: scale(1.04);
}
.svc__body {
  padding: 1.5rem 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.svc__body h3 {
  font-size: var(--fs-h3);
  margin-bottom: 0.5rem;
}
.svc__body p {
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-bottom: 1.1rem;
}
.svc__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--red);
}
.svc:hover .svc__more {
  color: var(--red-dark);
}
.svc__more svg {
  transition: transform 0.25s var(--ease);
}
.svc:hover .svc__more svg {
  transform: translateX(3px);
}
/* Karten auf Sandfläche brauchen keinen Rahmen, die Fläche grenzt schon ab. */
.section--sand .svc {
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

/* Nummerierte Ablaufliste – ohne Karten und ohne Umriss-Zahlen */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.steps > li {
  padding: 1.4rem 1.5rem 1.5rem 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .steps > li {
    border-bottom: 0;
    border-right: 1px solid var(--line);
    padding-left: 1.5rem;
  }
  .steps > li:first-child {
    padding-left: 0;
  }
  .steps > li:last-child {
    border-right: 0;
  }
}
/* Große rote Ziffer als Anker – gibt dem Ablauf sichtbare Struktur */
.steps__num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--red);
  margin-bottom: var(--sp-s);
}
.steps > li {
  position: relative;
}
/* Roter Balken über jeder Spalte, bündig zur Trennlinie */
.steps > li::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 34px;
  height: 3px;
  background: var(--red);
}
@media (min-width: 720px) {
  .steps > li:not(:first-child)::before {
    left: 1.5rem;
  }
}
.steps h3 {
  font-size: 1.06rem;
  margin-bottom: 0.35rem;
}
.steps p {
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.section--ink .steps {
  border-top-color: var(--ink-line);
}
.section--ink .steps > li {
  border-color: var(--ink-line);
}
.section--ink .steps p {
  color: var(--on-ink-dim);
}
/* Auf Tinte trägt Gold die Ziffern: das Marken-Rot hat gegen #16130f nur rund
   3:1 und wirkt dort stumpf statt kräftig. */
.section--ink .steps__num,
.section--ink .steps > li::before {
  color: var(--gold);
  background: var(--gold);
}
.section--ink .steps__num {
  background: none;
}
.section--ink .eyebrow {
  color: var(--gold);
}
.section--ink .link-arrow {
  color: var(--gold);
}

/* Schlichte Merkmalliste */
.checks {
  display: grid;
  gap: 0.65rem;
}
.checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.checks svg {
  flex: none;
  margin-top: 0.25em;
  color: var(--red);
}
.section--ink .checks svg {
  color: var(--gold);
}

/* Einstieg der Leistungsseiten: Fliesstext links, Leistungsumfang als Kasten
   rechts. Das Foto der Leistung steht bereits im Seitenkopf und kommt hier
   bewusst nicht ein zweites Mal vor. */
.svc-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 880px) {
  .svc-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-xl);
  }
}

/* Leistungsumfang als nummerierte Phasenkarten.

   v3 war hier eine Definitionsliste mit Haarlinien und Versalien-Begriffen in
   der linken Spalte. Inhaltlich richtig, optisch ein Datenblatt: genau das
   Element, das die Leistungsseiten nach Formular aussehen ließ. Die Inhalte
   sind ohnehin ein Ablauf (Neubau -> Umbau -> Sanierung, Prüfen -> Installieren
   -> Anmelden), also werden sie auch als Ablauf gezeigt. */
.speclist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
  counter-reset: spec;
}
.speclist > div {
  counter-increment: spec;
  position: relative;
  padding: 1.6rem 1.6rem 1.7rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.section--sand .speclist > div {
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
.speclist > div::before {
  content: counter(spec, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--red);
  margin-bottom: 0.85rem;
}
.speclist dt {
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 0.45rem;
}
.speclist dd {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-2);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.tag {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  color: var(--text-2);
}
.page-head .tag {
  border-color: var(--ink-line-strong);
  color: #cdd2d7;
}

/* --------------------------------------------------------------------------
   12. Referenzen
   -------------------------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.75rem;
}
.filter {
  padding: 0.6rem 1.1rem;
  min-height: 2.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: var(--paper);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-2);
  transition: all 0.2s var(--ease);
}
.filter:hover {
  border-color: var(--red);
  color: var(--red);
}
.filter[aria-pressed='true'] {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
/* Vertrauens-Vitrine statt Tabelle: große Firmennamen im Fluss, kein Rahmen,
   keine Box – die Wirkung kommt aus Typografie und Weißraum, nicht aus Linien.
   Dieselbe Schriftfamilie wie das Logo (Oswald) verbindet die Namen optisch
   mit der eigenen Marke. */
.ref-grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3vw, 2.75rem) clamp(2rem, 4vw, 3.5rem);
}
.ref {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.ref__name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.1;
  color: var(--text);
  transition: color 0.2s var(--ease);
}
.ref:hover .ref__name {
  color: var(--red);
}
.ref__cat {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ref.is-hidden {
  display: none;
}
.ref-count {
  margin-top: var(--sp-l);
  font-size: var(--fs-sm);
  color: var(--text-3);
}

/* Referenzraster auf dunkler Fläche – der eine bewusst starke Auftritt
   in der Seitenmitte, weit weg vom Fußbereich. */
.section--ink .ref-grid {
  background: transparent;
  border-color: var(--ink-line-strong);
}
.section--ink .ref {
  box-shadow: 1px 1px 0 0 var(--ink-line);
  transition: background-color 0.25s var(--ease);
}
.section--ink .ref:hover {
  background: rgba(255, 255, 255, 0.05);
}
.section--ink .ref__name {
  color: #fff;
}
.section--ink .ref__cat {
  color: var(--on-ink-dim);
}
.section--ink .ref-count {
  color: var(--on-ink-dim);
}

/* FAQ: Frage-Antwort rechts, Ansprache und Telefon links */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 880px) {
  .faq-layout {
    grid-template-columns: 1fr;
  }
}
.faq-aside {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
}
@media (max-width: 880px) {
  .faq-aside {
    position: static;
  }
}
.faq-aside__call {
  margin-top: var(--sp-l);
  padding-top: var(--sp-m);
  border-top: 2px solid var(--red);
}
.faq-aside__call span {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-bottom: 0.2rem;
}
.faq-aside__call > a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.faq-aside__call > a svg {
  color: var(--red);
  flex: none;
}
.faq-aside__call > a:hover {
  color: var(--red);
}
.faq-aside__call small {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.faq-aside__call small a {
  font-family: var(--font-body);
  font-size: inherit;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.quote {
  border-left: 3px solid var(--red);
  padding-left: 1.5rem;
}
/* Zentrierter Abschluss statt Text-Spalte – z. B. als ruhiger Schlusspunkt
   unter der Referenzen-Vitrine. */
.quote--center {
  max-width: 42rem;
  margin-inline: auto;
  border-left: 0;
  border-top: 3px solid var(--red);
  padding-left: 0;
  padding-top: 1.5rem;
  text-align: center;
}
.quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  font-weight: 500;
  line-height: 1.3;
  text-transform: none;
}
.section--ink .quote {
  border-left-color: var(--gold);
}
.quote__who {
  margin-top: 0.9rem;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.quote__who strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.section--ink .quote__who strong {
  color: #fff;
}
.section--ink .quote__who {
  color: var(--on-ink-dim);
}

/* --------------------------------------------------------------------------
   13. Zeitleiste
   -------------------------------------------------------------------------- */
.timeline {
  border-top: 1px solid var(--line);
}
.timeline > li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 520px) {
  .timeline > li {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}
.timeline__year {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--red);
}
.timeline p {
  font-size: var(--fs-sm);
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   14. Accordion
   -------------------------------------------------------------------------- */
.accordion {
  border-top: 1px solid var(--line);
}
.section--ink .accordion {
  border-top-color: var(--ink-line);
}
.acc {
  border-bottom: 1px solid var(--line);
}
.acc__head {
  margin: 0;
}
.section--ink .acc {
  border-bottom-color: var(--ink-line);
}
.acc__btn {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  padding: 1.35rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
}
.section--ink .acc__btn {
  color: #fff;
}
.acc__btn:hover {
  color: var(--red);
}
.section--ink .acc__btn:hover {
  color: var(--gold);
}
.acc__ico {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.1rem;
}
.acc__ico::before,
.acc__ico::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--red);
  transition: transform 0.3s var(--ease-out);
}
.acc__ico::before {
  width: 13px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.acc__ico::after {
  width: 2px;
  height: 13px;
  transform: translate(-50%, -50%);
}
.section--ink .acc__ico::before,
.section--ink .acc__ico::after {
  background: var(--gold);
}
.acc__btn[aria-expanded='true'] .acc__ico::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease-out);
}
.acc__panel[data-open='true'] {
  grid-template-rows: 1fr;
}
.acc__panel > div {
  overflow: hidden;
}
.acc__panel p {
  font-size: var(--fs-sm);
  color: var(--text-2);
  padding-bottom: 1.1rem;
  max-width: 62ch;
}
.section--ink .acc__panel p {
  color: var(--on-ink-dim);
}
.acc__panel p + p {
  padding-top: 0.4rem;
}

/* --------------------------------------------------------------------------
   15. Formulare
   -------------------------------------------------------------------------- */
.form {
  display: grid;
  gap: 0.9rem;
}
.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 0.9rem;
}
.field {
  display: grid;
  gap: 0.32rem;
}
.field > label,
.fieldset__legend {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}
.section--ink .field > label,
.section--ink .fieldset__legend {
  color: var(--on-ink-dim);
}
.field > label .req {
  color: var(--red);
}
.section--ink .field > label .req {
  color: var(--gold);
}
.input,
.select,
.textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  color: var(--text);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  appearance: none;
}
.textarea {
  min-height: 118px;
  resize: vertical;
}
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23545b64' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.2rem;
  cursor: pointer;
}
.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--text-3);
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(174, 15, 9, 0.13);
}
.section--ink .input,
.section--ink .select,
.section--ink .textarea {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: var(--ink-line-strong);
  color: #fff;
}
.section--ink .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23a9b0b8' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.section--ink .input::placeholder,
.section--ink .textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.section--ink .input:focus,
.section--ink .select:focus,
.section--ink .textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245, 194, 68, 0.2);
}
.input[aria-invalid='true'],
.textarea[aria-invalid='true'],
.select[aria-invalid='true'] {
  border-color: #d92b20;
}
.field__error {
  font-size: var(--fs-xs);
  color: #c2261d;
  display: none;
}
.field__error.is-visible {
  display: block;
}
.section--ink .field__error {
  color: #ff9d95;
}
.field__hint {
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.section--ink .field__hint {
  color: rgba(255, 255, 255, 0.5);
}
.check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  cursor: pointer;
}
.check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.12em;
  accent-color: var(--red);
  cursor: pointer;
}
.check a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.section--ink .check a {
  color: var(--gold);
}
.fieldset {
  border: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.chip {
  position: relative;
  display: inline-flex;
}
.chip input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.chip span {
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  font-size: var(--fs-xs);
  font-weight: 500;
  transition: all 0.18s var(--ease);
}
.chip input:hover + span {
  border-color: var(--red);
}
.chip input:checked + span {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.chip input:focus-visible + span {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
.form__status {
  display: none;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  border: 1px solid transparent;
}
.form__status.is-visible {
  display: block;
}
.form__status--ok {
  background: rgba(22, 138, 82, 0.09);
  border-color: rgba(22, 138, 82, 0.32);
  color: #0f6b40;
}
.form__status--err {
  background: rgba(217, 43, 32, 0.07);
  border-color: rgba(217, 43, 32, 0.32);
  color: #b3221a;
}
.section--ink .form__status--ok {
  color: #6ee7a8;
}
.section--ink .form__status--err {
  color: #ff9d95;
}
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
}
.btn[data-loading='true'] {
  pointer-events: none;
  opacity: 0.7;
}
.btn[data-loading='true'] .btn__spinner {
  display: block;
}
.btn__spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn--gold .btn__spinner {
  border-color: rgba(10, 11, 13, 0.3);
  border-top-color: var(--ink);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Formularkasten */
.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
}
.section--sand .panel,
.section--paper-2 .panel {
  border-color: transparent;
  box-shadow: var(--shadow-md);
}
.section--ink .panel {
  background: var(--ink-2);
  border-color: var(--ink-line);
}
.panel > h2,
.panel > h3 {
  margin-bottom: 0.4rem;
}
.panel__intro {
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-bottom: 1.25rem;
}

/* --------------------------------------------------------------------------
   16. Kontakt
   -------------------------------------------------------------------------- */
.contact-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.contact-list > div {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 0.3rem 1.25rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
@media (max-width: 560px) {
  .contact-list > div {
    grid-template-columns: 1fr;
  }
}
.contact-list dt {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-top: 0.2em;
}
.contact-list dd {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
/* Rot, damit Telefon und E-Mail als anklickbar erkennbar sind – vorher standen
   sie in Textfarbe und sahen wie reiner Text aus. */
.contact-list dd a {
  color: var(--red);
}
.contact-list dd a:hover {
  color: var(--red-dark);
}
/* Innerhalb einer .panel übernimmt der Panel-Rahmen die Abgrenzung –
   die Haarlinie oben und die Polsterung des letzten Eintrags entfallen. */
.panel .contact-list--flush {
  border-top: 0;
}
.panel .contact-list--flush > div:first-child {
  padding-top: 0;
}
.panel .contact-list--flush > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.map-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-2);
  min-height: 320px;
}
.map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
}
.map-consent {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.8rem;
  text-align: center;
  padding: 1.75rem;
  background: var(--ink);
  color: var(--on-ink-dim);
}
.map-consent[hidden] {
  display: none;
}
.map-consent p {
  font-size: var(--fs-sm);
  max-width: 40ch;
}

/* Abschluss-CTA: eigener, klar umrissener Kasten auf Weiß – NICHT dunkel.
   Vorher war er auf Ink gesetzt und ging damit optisch im schwarzen Footer auf,
   sodass die Handlungsaufforderung wie ein Teil des Fußbereichs wirkte. Auf Weiß
   ist die Trennung eindeutig: heller Abschnitt, dann dunkler Footer als
   Seitenende. Der Rahmen grenzt ihn zusätzlich von der weißen Sektion darüber ab. */
.cta {
  background: var(--paper);
}
.cta__box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-l) var(--sp-xl);
  padding: clamp(2rem, 4vw, 3.25rem);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--sand);
  box-shadow: none;
}
/* Steht der Kasten selbst schon auf Sand, kehrt er sich um: weiss mit Schatten. */
.section--sand .cta__box {
  background: var(--paper);
  box-shadow: var(--shadow-md);
}
.cta__box > div:first-child {
  max-width: 42rem;
}
.cta p {
  margin-top: var(--sp-s);
  max-width: 52ch;
  color: var(--text-2);
}
.cta .btn-row {
  flex: none;
}
/* --------------------------------------------------------------------------
   17. Seitenkopf (Unterseiten)
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  background: var(--ink);
  color: var(--on-ink);
  padding-block: clamp(2.75rem, 5vw, 4rem);
}
.page-head--media {
  padding-block: clamp(4rem, 8vw, 7rem);
}
.page-head__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.page-head__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}
/* Wie im Hero zwei Verläufe: senkrecht für die Lesbarkeit, waagerecht damit
   die rechte Bildhälfte sichtbar bleibt. Ein einzelner 93%-Schleier wie in v3
   hat das Motiv vollständig zugedeckt und nur noch grauen Matsch übrig
   gelassen. */
.page-head__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(22, 19, 15, 0.9) 0%, rgba(22, 19, 15, 0.62) 45%,
                    rgba(22, 19, 15, 0.3) 100%),
    linear-gradient(100deg, rgba(22, 19, 15, 0.86) 0%, rgba(22, 19, 15, 0.5) 45%,
                    rgba(22, 19, 15, 0.05) 100%);
}
.page-head__inner {
  position: relative;
  max-width: 46rem;
}
.page-head h1 {
  font-size: var(--fs-h1);
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}
.page-head p {
  margin-top: var(--sp-m);
  max-width: 54ch;
  color: #ddd5c9;
}
@media (max-width: 720px) {
  .page-head--media {
    padding-block: clamp(2.5rem, 10vw, 3.5rem);
  }
  .page-head__media::after {
    background: linear-gradient(to top, rgba(22, 19, 15, 0.95) 0%,
                                rgba(22, 19, 15, 0.84) 50%, rgba(22, 19, 15, 0.6) 100%);
  }
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-xs);
  color: var(--on-ink-dim);
  margin-bottom: 1rem;
}
.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.breadcrumb li + li::before {
  content: '/';
  color: rgba(255, 255, 255, 0.32);
}
.breadcrumb a:hover {
  color: var(--gold);
}
.breadcrumb [aria-current] {
  color: #fff;
}

/* Leistungs-Reiter unter dem Seitenkopf.

   v3 war hier ein 50 px hohes graues Band mit acht winzigen Versalien-Links und
   einer rot gefüllten Pille für die aktive Seite. Das las sich wie die
   Werkzeugleiste eines Redaktionssystems, nicht wie Navigation: zu eng, zu
   klein, zu laut an der falschen Stelle.

   v4: weiße Fläche wie der Inhalt darunter, klebt unter dem Header, echte
   Reiter mit Unterstrich statt gefüllter Pille, gemischte Schreibweise und
   Tippflächen ab 44 px. Die aktive Seite wird durch Rot und Unterstrich
   markiert, nicht durch eine Farbfläche. */
.subnav {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* Rechts ausblenden, damit erkennbar bleibt, dass die Leiste weiterläuft */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .subnav {
    background: #fff;
  }
}
.subnav::-webkit-scrollbar {
  display: none;
}
.subnav__list {
  display: flex;
  gap: 0.35rem;
  align-items: stretch;
  white-space: nowrap;
}
.subnav__list a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex: none;
  min-height: 3.5rem;
  padding: 0 0.95rem;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--text-2);
  border-bottom: 2px solid transparent;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.subnav__list a:hover {
  color: var(--text);
  border-bottom-color: var(--line-strong);
}
.subnav__list a.is-active {
  color: var(--red);
  font-weight: 600;
  border-bottom-color: var(--red);
}
@media (max-width: 900px) {
  .subnav__list a {
    min-height: 3.25rem;
    padding: 0 0.8rem;
    font-size: 0.9rem;
  }
}

/* Prose */
.prose {
  max-width: 70ch;
}
.prose h2 {
  font-size: 1.3rem;
  margin-top: 2.1rem;
  margin-bottom: 0.7rem;
}
.prose h3 {
  font-size: 1.05rem;
  margin-top: 1.6rem;
  margin-bottom: 0.5rem;
}
.prose > :first-child {
  margin-top: 0;
}
.prose p,
.prose ul,
.prose ol {
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-bottom: 0.9rem;
}
.prose ul,
.prose ol {
  padding-left: 1.15rem;
  list-style: disc;
}
.prose ol {
  list-style: decimal;
}
.prose li {
  margin-bottom: 0.35rem;
}
.prose a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose strong {
  color: var(--text);
}
.prose address {
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-bottom: 0.9rem;
}
.notice {
  padding: 1.15rem 1.4rem;
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--sand-2);
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.notice strong {
  color: var(--text);
}
.section--ink .notice {
  background: rgba(255, 255, 255, 0.05);
  color: var(--on-ink-dim);
}
.section--ink .notice strong {
  color: #fff;
}

/* Linkliste (Fehlerseite) */
.linklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 0 2rem;
}
.linklist a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.68rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.linklist a svg {
  color: var(--red);
  flex: none;
}
.linklist a:hover {
  color: var(--red);
}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--ink);
  color: var(--on-ink-dim);
  padding-top: clamp(3rem, 5vw, 4.5rem);
  font-size: var(--fs-sm);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
  gap: clamp(2rem, 3.5vw, 3.25rem);
  padding-bottom: clamp(2.5rem, 3.5vw, 3.25rem);
}
@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  }
}
.footer h3 {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0.9rem;
}
.footer__links {
  display: grid;
}
.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
}
.footer__links a:hover {
  color: var(--gold);
}
.footer__about p {
  margin-top: 0.9rem;
  max-width: 32ch;
}
.footer__bar {
  border-top: 1px solid var(--ink-line);
  padding-block: 1.15rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  font-size: var(--fs-xs);
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
}
.footer__legal a:hover {
  color: var(--gold);
}
.footer address {
  font-style: normal;
  line-height: 1.7;
}
.footer__hours {
  display: grid;
  gap: 0.35rem;
  padding-top: var(--sp-s);
  border-top: 1px solid var(--ink-line);
}
.footer__hours div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: 15rem;
}
.footer__hours span:last-child {
  color: #fff;
}
/* Öffnungsstatus: schlichte Zeile mit Punkt, kein Pillen-Etikett.
   Grundfarbe für hellen Grund – der Baustein steht inzwischen an mehreren
   Stellen auf Weiß (Hero, Einsatzgebiet, Kontakt), nicht nur im Footer.
   Auf dunklem Grund schaltet die Regel darunter um. */
.badge-open {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: var(--sp-s);
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.footer .badge-open,
.section--ink .badge-open,
.page-head .badge-open,
.map-consent .badge-open {
  color: var(--on-ink-dim);
}
.badge-open::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: #35c47a;
}
.badge-open[data-open='false']::before {
  background: var(--gold);
}

/* --------------------------------------------------------------------------
   19. Mobile CTA + nach oben
   -------------------------------------------------------------------------- */
.mobile-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: none;
  border-top: 1px solid var(--ink-line);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(110%);
  transition: transform 0.3s var(--ease-out);
}
.mobile-bar.is-visible {
  transform: translateY(0);
}
.mobile-bar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.95rem 0.5rem;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mobile-bar a:first-child {
  background: var(--red);
  color: #fff;
}
.mobile-bar a:last-child {
  background: var(--gold);
  color: var(--ink);
}
@media (max-width: 767px) {
  .mobile-bar {
    display: flex;
  }
  .footer__bar {
    margin-bottom: 3.4rem;
  }
}
.to-top {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 89;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink-line-strong);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0.25s;
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
}
.to-top:hover {
  background: var(--red);
  border-color: var(--red);
}
@media (max-width: 767px) {
  .to-top {
    bottom: calc(3.7rem + env(safe-area-inset-bottom));
  }
}

/* --------------------------------------------------------------------------
   20. Einblenden – dezent
   -------------------------------------------------------------------------- */
/* Dezentes Einblenden, ohne Staffelung: gestaffelte Verzögerungen lassen
   Inhalte spürbar später erscheinen, ohne gestalterischen Gewinn. */
[data-reveal] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
.no-js [data-reveal] {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   21. Print
   -------------------------------------------------------------------------- */
@media print {
  .header,
  .topbar,
  .mobile-bar,
  .to-top,
  .cta,
  .subnav,
  .hero__media,
  .page-head__media {
    display: none !important;
  }
  body {
    color: #000;
    background: #fff;
  }
  .section--ink,
  .hero,
  .page-head,
  .footer {
    background: #fff !important;
    color: #000 !important;
  }
  .section--ink h1,
  .section--ink h2,
  .page-head h1,
  .hero h1 {
    color: #000 !important;
  }
  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.75em;
  }
}