/* ==========================================================================
   B.I.M SECURITY — style.css
   Gestaltungsprinzip: "Perimeter" — sichtbare Grenzen (Hairlines) umschliessen
   jeden Inhaltsblock wie ein Lageplan. Die einzige Akzentfarbe markiert
   ausschliesslich Handlungspunkte (Primaer-CTA, Fokus, aktive Navigation).
   Reihenfolge: Fonts -> Tokens -> Base -> Layout -> Komponenten -> Seiten
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schriften (lokal, keine externen Requests)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-600.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/source-serif-4-700.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-400.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-500.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-600.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;
}

/* --------------------------------------------------------------------------
   2. Design-Tokens — ab hier greift alles nur noch auf Variablen zu
   -------------------------------------------------------------------------- */
:root {
  /* Farben — Grundflaeche blaustichig, kein reines Schwarz/Weiss */
  --c-bg: #0c1117;
  --c-surface: #121a22;
  --c-surface-2: #182430;
  --c-line: #24323f;        /* dekorative Hairlines (Perimeter) */
  --c-line-strong: #3a4e60; /* betonte dekorative Grenze, Ecken-Ticks */
  --c-line-ui: #6b7f92;     /* Grenzen bedienbarer Elemente — >= 3:1, WCAG 1.4.11 */

  --c-text: #e9eef3;
  --c-text-muted: #a2b0be; /* 8.7:1 auf --c-bg */

  /* Genau eine Akzentfarbe. -hi ist ein Zustand derselben Farbe. */
  --c-accent: #d9631f;     /* 5.2:1 auf --c-bg */
  --c-accent-hi: #f07e33;
  --c-on-accent: #0c1117;  /* 5.2:1 auf --c-accent */

  --c-danger: #ff9a8a;
  --c-ok: #8fd2a4;

  /* Schriften */
  --f-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --f-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Fluide Groessen */
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: clamp(1rem, 0.975rem + 0.12vw, 1.0625rem);
  --fs-lg: clamp(1.0625rem, 1rem + 0.32vw, 1.1875rem);
  --fs-h4: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-h3: clamp(1.1875rem, 1.06rem + 0.62vw, 1.5rem);
  --fs-h2: clamp(1.5rem, 1.22rem + 1.35vw, 2.375rem);
  --fs-h1: clamp(1.875rem, 1.45rem + 2vw, 3rem);
  --fs-hero: clamp(2rem, 1.42rem + 2.75vw, 3.75rem);

  /* Abstands-Raster (4px-Basis) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  /* Drei Sektionshoehen statt einer — sonst hat jede Sektion gleich viel Luft
     und die Seite wirkt laenger und monotoner, als sie ist. */
  --s-section-sm: clamp(2.5rem, 4.5vw, 4.5rem);
  --s-section: clamp(3.25rem, 6vw, 6.25rem);
  --s-section-lg: clamp(4rem, 7.5vw, 8rem);
  --s-gutter: clamp(1.25rem, 4vw, 3.5rem);

  /* Ein Radius-System */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-full: 999px;

  /* Ein Schattenstil */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 32px -18px rgba(0, 0, 0, 0.85);

  /* Layout */
  --w-page: 74rem;
  --w-prose: 40rem;
  --h-header: 3.75rem;
  --h-actionbar: 4.25rem;

  /* Bewegung */
  --t-fast: 140ms;
  --t-base: 220ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Platzhalter-Flaechen: Lageplan-Raster + Verlauf.
     Werden von echten Fotos ueberdeckt, sobald diese in /assets/ liegen. */
  --ph-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%235c7d96' stroke-width='1' opacity='0.55'%3E%3Cpath d='M0 0.5h72M0.5 0v72'/%3E%3C/g%3E%3Cg fill='none' stroke='%235c7d96' stroke-width='1' opacity='0.28'%3E%3Cpath d='M0 36.5h72M36.5 0v72'/%3E%3C/g%3E%3Cpath d='M36 32v8M32 36h8' fill='none' stroke='%23d9631f' stroke-width='1.2' opacity='0.42'/%3E%3C/svg%3E");
  --ph-gradient: radial-gradient(120% 90% at 78% 8%, #1d2b39 0%, #131c26 42%, #0c1117 100%);

  /* Sehr zurueckhaltende Variante desselben Motivs. Wird ausschliesslich hinter
     den beiden Deeskalations-Bloecken eingesetzt, damit das Lageplan-Motiv sich
     wiederholt, ohne zur Tapete zu werden. Kein zusaetzlicher Request. */
  --ph-grid-faint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%235c7d96' stroke-width='1' opacity='0.10'%3E%3Cpath d='M0 0.5h72M0.5 0v72'/%3E%3C/g%3E%3Cpath d='M36 33v6M33 36h6' fill='none' stroke='%23d9631f' stroke-width='1' opacity='0.14'/%3E%3C/svg%3E");

  /* Duenner Farbschleier ueber Fotos: zieht sie in die Blaustichigkeit der
     Grundflaeche, damit Bild und Flaeche zusammengehoeren. Bewusst schwach —
     das Foto soll ruhiger werden, nicht dunkler. */
  --ph-tint: linear-gradient(180deg, rgba(12, 17, 23, 0.26) 0%, rgba(24, 36, 48, 0.40) 100%);
}

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

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Platz fuer die mobile Aktionsleiste — verdeckt nie Inhalt.
     Der Zuschlag von --s-4 sorgt dafuer, dass der letzte Footer-Link nicht
     direkt an der Leiste klebt. */
  padding-bottom: calc(var(--h-actionbar) + var(--s-4) + env(safe-area-inset-bottom, 0px));
}

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

img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--f-serif);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); line-height: 1.3; }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--c-text);
  text-decoration-color: var(--c-line-strong);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color var(--t-fast) var(--ease),
              text-decoration-color var(--t-fast) var(--ease);
}

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.15rem; }
li { margin-bottom: var(--s-2); }
li:last-child { margin-bottom: 0; }

strong { font-weight: 600; color: var(--c-text); }

hr {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin: var(--s-6) 0;
}

::selection { background: var(--c-accent); color: var(--c-on-accent); }

/* Sichtbarer Fokus — Akzent markiert den Handlungspunkt */
:focus-visible {
  outline: 2px solid var(--c-accent-hi);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute;
  left: var(--s-3);
  top: var(--s-3);
  z-index: 200;
  transform: translateY(-200%);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: transform var(--t-base) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

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

/* --------------------------------------------------------------------------
   4. Layout — der Perimeter
   Die durchgehenden Seitenlinien von .wrap bilden die vertikale Grenze,
   die Oberkante jeder Sektion die horizontale. Zusammen: ein Lageplan.
   -------------------------------------------------------------------------- */
.wrap {
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--s-gutter);
  border-inline: 1px solid var(--c-line);
}

.section > .wrap {
  padding-block: var(--s-section);
  border-top: 1px solid var(--c-line);
}

.section--flush > .wrap { border-top: 0; }
.section--alt { background: var(--c-surface); }

/* Rhythmus: tragende Sektionen bekommen mehr Raum, reine Abfolgen weniger. */
.section--roomy > .wrap { padding-block: var(--s-section-lg); }
.section--tight > .wrap { padding-block: var(--s-section-sm); }

/* Ecken-Ticks: Planzeichnungs-Detail an den Sektionsgrenzen */
.section > .wrap { position: relative; }
.section > .wrap::before,
.section > .wrap::after {
  content: '';
  position: absolute;
  top: -1px;
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--c-line-strong);
  pointer-events: none;
}
.section > .wrap::before { left: -1px; border-left: 1px solid var(--c-line-strong); }
.section > .wrap::after { right: -1px; border-right: 1px solid var(--c-line-strong); }
.section--flush > .wrap::before,
.section--flush > .wrap::after { display: none; }

.section-head { margin-bottom: var(--s-7); max-width: 46rem; }
.section-head p { color: var(--c-text-muted); font-size: var(--fs-lg); margin-bottom: 0; }
.section-head h2 { margin-bottom: var(--s-3); }

/* Eyebrow — der einzige zugelassene Versalien-Einsatz neben Buttons */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0 0 var(--s-4);
}
.eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: var(--c-line-strong);
  flex: none;
}

.lead {
  font-size: var(--fs-lg);
  color: var(--c-text-muted);
  max-width: 42rem;
}

.grid { display: grid; gap: 1px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }

@media (min-width: 40rem) {
  .grid--2, .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60rem) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   5. Buttons — Akzent ausschliesslich fuer die Primaeraktion
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 2.875rem;
  padding: var(--s-3) var(--s-5);
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.btn--primary {
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-color: var(--c-accent);
}

.btn--secondary {
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-line-ui);
}

.btn--block { display: flex; width: 100%; }

@media (hover: hover) {
  .btn--primary:hover { background: var(--c-accent-hi); border-color: var(--c-accent-hi); }
  .btn--secondary:hover { border-color: var(--c-text-muted); background: rgba(255, 255, 255, 0.04); }
}

/* Textlink mit Pfeil — kein Akzent, die Bewegung traegt */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-text);
  text-decoration: none;
  min-height: 2.75rem;
}
.arrow-link span:last-child {
  transition: transform var(--t-base) var(--ease);
  color: var(--c-text-muted);
}
@media (hover: hover) {
  .arrow-link:hover span:last-child { transform: translateX(4px); color: var(--c-accent-hi); }
}

/* --------------------------------------------------------------------------
   6. Header
   Drei Navigationspunkte passen ab 320px nebeneinander — kein Hamburger,
   damit die Navigation ohne JavaScript vollstaendig bedienbar bleibt.
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(12, 17, 23, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-line);
}

.header > .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--h-header);
  border-inline-color: transparent;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  color: var(--c-text);
  flex: none;
  padding-block: var(--s-3);
  min-height: 2.75rem;
}

/* Logo: Hoehe skaliert mit Viewport, Breite folgt Seitenverhaeltnis.
   Bleibt kompakt genug fuer schmale Kopfzeilen. */
.brand__mark {
  height: clamp(3.24rem, 8.64vw, 4.32rem);
  width: auto;
  flex: none;
}

.brand__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.brand__name {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1;
  letter-spacing: 0.01em;
}
.brand__sub {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  line-height: 1;
  color: var(--c-text-muted);
}

.nav { display: flex; align-items: center; gap: clamp(0.6rem, 2.6vw, 1.5rem); }

.nav__link {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  text-decoration: none;
  padding: var(--s-3) 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav__link[aria-current='page'] {
  color: var(--c-text);
  border-bottom-color: var(--c-accent);
}
@media (hover: hover) {
  .nav__link:hover { color: var(--c-text); }
}

.header .btn { display: none; }

/* Unter 360px reicht der Platz neben der Navigation nicht mehr —
   dort traegt die Wortmarke allein. Im Footer bleibt die Marke sichtbar. */
@media (max-width: 22.5rem) {
  .header .brand__mark { display: none; }
}

@media (min-width: 56rem) {
  :root { --h-header: 4.5rem; }
  .header .btn { display: inline-flex; }
  .brand__name { font-size: 1.25rem; }
  .brand__sub { font-size: 0.625rem; }
}

/* --------------------------------------------------------------------------
   7. Mobile Aktionsleiste — Primaeraktion dauerhaft erreichbar
   -------------------------------------------------------------------------- */
.actionbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 110;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  background: rgba(12, 17, 23, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--c-line);
}
.actionbar .btn { min-height: 2.75rem; padding-inline: var(--s-3); font-size: var(--fs-xs); }

@media (min-width: 56rem) {
  .actionbar { display: none; }
  body { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   8. Hero — Buehne aus CSS. Sobald /assets/hero.jpg existiert, legt sich das
   Foto als oberste Schicht darueber. Fehlt es, faellt der Browser lautlos auf
   Raster + Verlauf zurueck: kein kaputtes Bildsymbol, kein Layout-Shift.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  border-bottom: 1px solid var(--c-line);
  background-color: var(--c-bg);
  background-image: url('../assets/hero.jpg'), var(--ph-grid), var(--ph-gradient);
  background-size: cover, 72px 72px, cover;
  /* 60 % statt Bildmitte: haelt bei einem himmellastigen Motiv das Gelaende
     im Bild, statt eine leere Flaeche zu zeigen. */
  background-position: center 60%, center, center;
  background-repeat: no-repeat, repeat, no-repeat;
}

/* Scrim: haelt den Text lesbar, egal welches Foto spaeter kommt */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(12, 17, 23, 0.86) 0%, rgba(12, 17, 23, 0.62) 45%, rgba(12, 17, 23, 0.88) 100%),
    linear-gradient(90deg, rgba(12, 17, 23, 0.88) 0%, rgba(12, 17, 23, 0.28) 72%, rgba(12, 17, 23, 0.55) 100%);
}

.hero > .wrap {
  padding-block: clamp(2.5rem, 7vw, 6rem) clamp(3rem, 7vw, 6.5rem);
  border-top: 0;
}

.hero__inner { max-width: 44rem; }

.hero h1 {
  font-size: var(--fs-hero);
  line-height: 1.06;
  margin-bottom: var(--s-5);
}

.hero__lead {
  font-size: var(--fs-lg);
  color: var(--c-text-muted);
  max-width: 36rem;
  margin-bottom: var(--s-6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}

.hero__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.75rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-text-muted);
  text-decoration: none;
}
.hero__phone strong { font-weight: 600; letter-spacing: 0.01em; }
@media (hover: hover) { .hero__phone:hover { color: var(--c-text); } }

/* Faktenzeile — nur belegte Angaben, keine erfundenen Kennzahlen */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
  margin: 0;
  list-style: none;
  padding-left: 0;
}
.hero__facts li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  margin: 0;
}
.hero__facts li::before {
  content: '';
  width: 6px; height: 6px;
  border: 1px solid var(--c-line-strong);
  transform: rotate(45deg);
  flex: none;
}

/* Seitenkopf der Unterseiten — dieselbe Buehne, ruhiger dosiert */
.pagehead {
  position: relative;
  isolation: isolate;
  border-bottom: 1px solid var(--c-line);
  background-color: var(--c-bg);
  background-image: var(--ph-grid), var(--ph-gradient);
  background-size: 72px 72px, cover;
  background-position: center, center;
}
.pagehead::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(12, 17, 23, 0.86) 0%, rgba(12, 17, 23, 0.6) 55%, rgba(12, 17, 23, 0.94) 100%);
}
.pagehead > .wrap {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 0;
}
.pagehead__inner { max-width: 44rem; }
.pagehead p { color: var(--c-text-muted); font-size: var(--fs-lg); margin-bottom: 0; }

/* --------------------------------------------------------------------------
   9. Platzhalter-Flaechen fuer Fotos
   Dateinamen und Seitenverhaeltnisse stehen final fest. Robin legt die echte
   Datei unter gleichem Namen ab — kein Layout-Shift, keine Code-Aenderung.
   -------------------------------------------------------------------------- */
.ph {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background-color: var(--c-surface-2);
  background-image: var(--ph-grid), var(--ph-gradient);
  background-size: 72px 72px, cover;
  background-position: center, center;
  background-repeat: repeat, no-repeat;
  overflow: hidden;
}

/* Fotoebene. Liegt per z-index UEBER dem Motiv-Hinweis: sobald die Datei in
   /assets/ existiert, verdeckt das Foto den Hinweis von selbst. Fehlt sie,
   bleibt diese Ebene transparent und der Hinweis ist zu sehen.
   Dadurch ist der Austausch wirklich reine Dateiablage — kein Code, kein
   Auskommentieren, kein Layout-Shift. */
.ph::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Farbabstimmung: leicht entsaettigt und minimal angehoben im Kontrast, dazu
   der Blauschleier. Zusammen naehern sich die Fotos der Palette der Seite an,
   ohne dass sie flau werden. */
.ph--team::before,
.ph--objekt::before {
  filter: saturate(0.86) contrast(1.04);
}

.ph--team { aspect-ratio: 4 / 3; }
.ph--team::before {
  background-image: var(--ph-tint), url('../assets/team.jpg');
  background-size: cover, cover;
  background-position: center, center 30%; /* haelt die Koepfe im Bild */
}

.ph--objekt { aspect-ratio: 16 / 9; }
.ph--objekt::before {
  /* Anderer Bildausschnitt als im Hero, damit es nicht wie eine
     Wiederholung desselben Bildes wirkt. */
  background-image: var(--ph-tint), url('../assets/hero.jpg');
  background-size: cover, cover;
  background-position: center, center 40%;
}

/* Unaufdringlicher Motiv-Hinweis, nur sichtbar solange das Foto fehlt. */
.ph::after {
  content: attr(data-hint);
  position: absolute;
  z-index: 0;
  left: var(--s-4);
  bottom: var(--s-4);
  max-width: calc(100% - 2 * var(--s-4));
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  /* Kraeftiger gesetzt als der uebrige Sekundaertext: Der Farbschleier der
     Fotoebene liegt darueber und wuerde einen gedaempften Ton schlucken. */
  color: var(--c-text);
  background: rgba(12, 17, 23, 0.92);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   10. Karten & Raster (Perimeter: 1px-Grenzen statt Schatten)
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (min-width: 40rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--c-bg);
  text-decoration: none;
  color: var(--c-text);
  transition: background-color var(--t-base) var(--ease);
}
.section--alt .card { background: var(--c-surface); }

.card__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.card h3 { margin: 0; font-size: var(--fs-h4); }
.card p { color: var(--c-text-muted); font-size: var(--fs-sm); margin: 0; flex: 1; }

.card__go {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-top: var(--s-2);
}
.card__go span:last-child { transition: transform var(--t-base) var(--ease); }

@media (hover: hover) {
  a.card:hover { background: var(--c-surface-2); }
  a.card:hover .card__go { color: var(--c-text); }
  a.card:hover .card__go span:last-child { transform: translateX(4px); }
}

/* Leitkarte: der Schwerpunkt des Betriebs bekommt sichtbar mehr Gewicht.
   Fuellt zugleich die 3-Spalten-Reihe sauber auf (2 + 1 / 3). */
@media (min-width: 40rem) {
  .card--lead { grid-column: span 2; }
  .card--lead h3 { font-size: var(--fs-h3); }
}
@media (min-width: 64rem) {
  .card--lead { padding: var(--s-6); }
}

/* Weitere Bereiche: bewusst leichter gesetzt als die Kernbereiche —
   keine Kaesten, nur Linien. Das ist das Hierarchie-Signal. */
.cards-more { margin-top: var(--s-6); }

/* Gruppentitel ueber den Kernbereichen — nimmt den Karten die fuenffache
   Wiederholung desselben Labels ab. */
.cards-group-title,
.cards-more__title {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--s-2);
}

.cards-more__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--c-line);
}
@media (min-width: 48rem) {
  .cards-more__list { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-7); }
}

.cards-more__list li { margin: 0; }

.cards-more__list a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block: var(--s-3);
  min-height: 2.75rem;
  border-bottom: 1px solid var(--c-line);
  text-decoration: none;
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.cards-more__list small { color: var(--c-text-muted); font-size: var(--fs-xs); }
@media (hover: hover) {
  .cards-more__list a:hover { color: var(--c-accent-hi); }
  .cards-more__list a:hover small { color: var(--c-text-muted); }
}

/* Merkmal-Liste (Warum B.I.M) */
.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--c-line);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 48rem) { .features { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-7); } }

.features li {
  border-bottom: 1px solid var(--c-line);
  padding-block: var(--s-5);
  margin: 0;
}
.features h3 { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.features p { color: var(--c-text-muted); font-size: var(--fs-sm); margin: 0; }

/* Das Leitargument — die eine Stelle, an der die Serife gross auftritt.
   Bewusst genau einmal auf der ganzen Seite, sonst nutzt sich der Effekt ab. */
.features__lead {
  padding: var(--s-6) var(--s-5);
  margin-bottom: var(--s-5);
  border: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background-color: var(--c-surface-2);
  background-image: var(--ph-grid-faint);
  background-size: 72px 72px;
  background-position: center;
}
@media (min-width: 48rem) {
  .features__lead { grid-column: 1 / -1; padding: var(--s-7) var(--s-6); }
}

/* Alle drei Selektoren sind bewusst mit .features vorangestellt: sonst gewinnt
   die allgemeine Regel ".features p" (gleiche Spezifitaet, aber weiter oben). */
.features .eyebrow {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  margin-bottom: var(--s-4);
}

.features .features__claim {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.05rem + 2.1vw, 2.75rem);
  line-height: 1.14;
  letter-spacing: -0.018em;
  color: var(--c-text);
  text-wrap: balance;
  max-width: 22ch;
  margin-bottom: var(--s-4);
}

.features .features__claim-sub {
  font-size: var(--fs-base);
  color: var(--c-text-muted);
  max-width: 46ch;
}

/* Prozessschritte */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
@media (min-width: 40rem) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .steps { grid-template-columns: repeat(4, 1fr); } }

.steps li {
  counter-increment: step;
  background: var(--c-bg);
  padding: var(--s-5);
  margin: 0;
}
.section--alt .steps li { background: var(--c-surface); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--f-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c-text-muted);
  line-height: 1;
  margin-bottom: var(--s-4);
}
.steps h3 { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.steps p { color: var(--c-text-muted); font-size: var(--fs-sm); margin: 0; }

/* --------------------------------------------------------------------------
   Fortschrittslinie im Ablauf-Block

   Sie liegt auf der Kante, die das Raster ohnehin schon zeichnet, statt eine
   zweite Linie danebenzusetzen — so belebt sie eine vorhandene Linie, statt
   mit ihr zu konkurrieren.

   Grundzustand ist --seg: 1, also vollstaendig gezogen. Ohne JavaScript und
   bei prefers-reduced-motion bleibt es genau dabei. Kein Element wird je
   unsichtbar gesetzt, nichts verschiebt sich: Der Balken liegt absolut
   positioniert auf der Kante und belegt keinen Platz im Fluss.
   -------------------------------------------------------------------------- */
/* --seg gehoert auf das li, nicht auf ::after: eine Deklaration am
   Pseudo-Element wuerde den vom li geerbten Wert ueberschreiben, den
   JavaScript setzt. Der Grundwert 1 = Linie vollstaendig gezogen. */
.steps li {
  position: relative;
  --seg: 1;
}

.steps li::after {
  content: '';
  position: absolute;
  background: var(--c-accent);
  pointer-events: none;
  /* scale statt width/height: laeuft im Compositor, loest kein Re-Layout aus */
  will-change: transform;
}

/* Mobil (1 Spalte): senkrechte Zeitachse an der linken Kante */
@media (max-width: 39.999rem) {
  .steps li::after {
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: scaleY(var(--seg));
    transform-origin: center top;
  }
}

/* 2x2-Raster: keine Linie. Weder waagerecht noch senkrecht wuerde hier dem
   Lesefluss folgen (rechts, dann Umbruch nach links unten) — eine Linie waere
   an dieser Stelle eine Behauptung, die das Layout nicht einloest. */
@media (min-width: 40rem) and (max-width: 63.999rem) {
  .steps li::after { display: none; }
}

/* Desktop (4 Spalten): waagerecht auf der Oberkante, links nach rechts */
@media (min-width: 64rem) {
  .steps li::after {
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    transform: scaleX(var(--seg));
    transform-origin: left center;
  }
}

/* Die eine Reaktion: die erreichte Ziffer wechselt in die Akzentfarbe.
   Bewusst nur diese — kein zusaetzlicher Punkt, kein Skalieren, kein Glow. */
.steps li::before { transition: color var(--t-base) var(--ease); }
.steps li.is-reached::before { color: var(--c-accent); }

/* Zweispaltiges Textbild-Layout */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: start;
}
@media (min-width: 52rem) {
  .split { grid-template-columns: 1.15fr 1fr; gap: var(--s-8); align-items: center; }
  .split--reverse > *:first-child { order: 2; }
}

/* Hervorgehobener Block — Deeskalation */
/* Zweiter — und letzter — Auftritt des Lageplan-Motivs. Beide Auftritte sitzen
   auf einem Deeskalations-Block, damit das Motiv etwas markiert statt zu dekorieren. */
.highlight {
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-md);
  background-color: var(--c-surface-2);
  background-image: var(--ph-grid-faint);
  background-size: 72px 72px;
  background-position: center;
  padding: var(--s-5);
  margin-block: var(--s-6);
}
.highlight h3 { font-size: var(--fs-h4); margin-bottom: var(--s-3); }
.highlight p { color: var(--c-text-muted); margin-bottom: 0; }

/* Einsatzgebiet */
.area-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  padding: 0;
  margin: var(--s-5) 0 0;
}
.area-list li {
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
  padding: var(--s-2) var(--s-4);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  margin: 0;
}

/* "+ direktes Umland" ist keine benannte Ortsangabe wie die Stadtbezirke,
   sondern eine Erweiterung — deshalb ohne Rahmen abgesetzt. */
.area-list .area-list__more {
  border-color: transparent;
  padding-inline: var(--s-2);
  font-style: italic;
}

.area-note {
  border-left: 2px solid var(--c-line-strong);
  padding-left: var(--s-4);
  margin-top: var(--s-5);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.area-note strong { display: block; color: var(--c-text); margin-bottom: var(--s-1); }

/* --------------------------------------------------------------------------
   11. Leistungen — Detailbereiche
   -------------------------------------------------------------------------- */
.service {
  border-top: 1px solid var(--c-line);
  padding-block: var(--s-7);
  scroll-margin-top: calc(var(--h-header) + var(--s-4));
}
.service:first-of-type { border-top: 0; padding-top: 0; }

.service__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 52rem) {
  /* align-items: start — sonst dehnt sich der Aside-Kasten auf die volle
     Hoehe der Textspalte und wirkt als halbleere Flaeche. */
  .service__grid { grid-template-columns: 1.2fr 1fr; gap: var(--s-8); align-items: start; }
}

.service h2 { margin-bottom: var(--s-3); }
.service__intro { color: var(--c-text-muted); margin-bottom: var(--s-5); }

.service__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-5);
  border-top: 1px solid var(--c-line);
}
.service__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  margin: 0;
}
.service__list li::before {
  content: '';
  width: 6px; height: 6px;
  margin-top: 0.55em;
  border: 1px solid var(--c-line-strong);
  transform: rotate(45deg);
  flex: none;
}

.service__aside {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  padding: var(--s-5);
}
.service__aside h3 { font-size: var(--fs-h4); }
.service__aside p { color: var(--c-text-muted); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */
.faq {
  border-top: 1px solid var(--c-line);
  max-width: 52rem;
}
.faq details {
  border-bottom: 1px solid var(--c-line);
}
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-4);
  min-height: 2.75rem;
  cursor: pointer;
  font-family: var(--f-serif);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: var(--f-sans);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  color: var(--c-text-muted);
  flex: none;
  margin-top: 0.15em;
  transition: transform var(--t-base) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__answer { padding-bottom: var(--s-5); color: var(--c-text-muted); max-width: 44rem; }
@media (hover: hover) { .faq summary:hover { color: var(--c-text); } }

/* --------------------------------------------------------------------------
   13. Formular
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}
@media (min-width: 56rem) {
  .contact-grid { grid-template-columns: 1fr 0.75fr; gap: var(--s-8); align-items: start; }
}

.form { display: grid; gap: var(--s-4); }

.field { display: grid; gap: var(--s-2); }

.field--row { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 32rem) { .field--row { grid-template-columns: 1fr 1fr; } }

.label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.label .req { color: var(--c-accent-hi); margin-left: 2px; }

.input,
.select,
.textarea {
  width: 100%;
  min-height: 2.875rem;
  padding: var(--s-3) var(--s-4);
  font-family: var(--f-sans);
  font-size: var(--fs-base);
  color: var(--c-text);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-ui);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease);
}
.textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }

.select {
  appearance: none;
  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' fill='none' stroke='%23a2b0be' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  padding-right: var(--s-7);
}
.select option { background: var(--c-surface-2); color: var(--c-text); }

.input:focus,
.select:focus,
.textarea:focus { border-color: var(--c-text-muted); }

.input::placeholder,
.textarea::placeholder { color: #7d8b99; }

/* Honeypot — fuer Menschen unsichtbar, fuer Bots ein ausfuellbares Feld */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: start;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  cursor: pointer;
  padding-block: var(--s-2);
}
.check input {
  width: 1.25rem; height: 1.25rem;
  margin: 0.15rem 0 0;
  accent-color: var(--c-accent);
  flex: none;
}
.check a { color: var(--c-text); }

.form__note { font-size: var(--fs-xs); color: var(--c-text-muted); margin: 0; }

.form__fallback {
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-line-strong);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  padding: var(--s-4) var(--s-5);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.form__fallback a { color: var(--c-text); }

/* Clientseitige Validierungshinweise (nur mit JS, rein additiv) */
.field__error {
  font-size: var(--fs-xs);
  color: var(--c-danger);
  min-height: 1rem;
}
.input[aria-invalid='true'],
.select[aria-invalid='true'],
.textarea[aria-invalid='true'] { border-color: var(--c-danger); }

/* Direkte Kontaktdaten */
.contact-info {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  padding: var(--s-5);
}
.contact-info dl { margin: 0; display: grid; gap: var(--s-5); }
.contact-info dt {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--s-1);
}
.contact-info dd { margin: 0; font-size: var(--fs-base); }
.contact-info dd > a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--c-text);
  font-weight: 500;
}
.contact-info dd small { display: block; color: var(--c-text-muted); font-size: var(--fs-sm); margin-top: var(--s-1); }
.contact-info address { font-style: normal; }

/* --------------------------------------------------------------------------
   14. CTA-Band
   -------------------------------------------------------------------------- */
.cta-band > .wrap {
  display: grid;
  gap: var(--s-5);
  align-items: center;
}
@media (min-width: 52rem) {
  .cta-band > .wrap { grid-template-columns: 1fr auto; gap: var(--s-7); }
}
.cta-band h2 { margin-bottom: var(--s-2); }
.cta-band p { color: var(--c-text-muted); margin: 0; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
}
.footer > .wrap { padding-block: var(--s-7); }

.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
@media (min-width: 48rem) {
  .footer__top { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-7); }
}

.footer__tagline {
  font-family: var(--f-serif);
  font-size: var(--fs-lg);
  color: var(--c-text);
  margin: var(--s-4) 0 var(--s-2);
}
.footer__desc { color: var(--c-text-muted); font-size: var(--fs-sm); max-width: 28rem; }

.footer h2 {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--s-4);
}

.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.footer li { margin: 0; }

/* Eigenstaendige Links brauchen ein Touch-Ziel von mindestens 44px */
.footer li a,
.footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--c-text-muted);
  text-decoration: none;
  font-size: var(--fs-sm);
}
.footer a { color: var(--c-text-muted); text-decoration: none; font-size: var(--fs-sm); }
@media (hover: hover) { .footer a:hover { color: var(--c-text); } }
.footer address { font-style: normal; color: var(--c-text-muted); font-size: var(--fs-sm); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-5); }

/* --------------------------------------------------------------------------
   16. Fliesstext-Seiten (Impressum, Datenschutz, Danke, 404)
   -------------------------------------------------------------------------- */
.prose { max-width: var(--w-prose); }
.prose h2 {
  font-size: var(--fs-h3);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
}
.prose h2:first-of-type { margin-top: 0; }
.prose h3 { font-size: var(--fs-h4); margin-top: var(--s-5); }
.prose p, .prose li { color: var(--c-text-muted); }
.prose a { color: var(--c-text); }
.prose address { font-style: normal; color: var(--c-text-muted); }
.prose strong { color: var(--c-text); }

.status {
  max-width: 40rem;
  text-align: left;
}
.status .btn { margin-top: var(--s-2); }
.status__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* --------------------------------------------------------------------------
   17. Bewegung — rein additiv.
   Kein Element wird per CSS initial unsichtbar gesetzt. Die Klasse
   .reveal-armed vergibt ausschliesslich JavaScript, und nur an Elemente,
   die beim Laden unterhalb des Viewports liegen.
   -------------------------------------------------------------------------- */
.reveal-armed {
  opacity: 0;
  transform: translateY(14px);
}
.reveal-armed.is-in {
  animation: rise 0.55s var(--ease) forwards;
}
@keyframes rise {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-armed {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* Anker unter dem klebenden Header */
[id] { scroll-margin-top: calc(var(--h-header) + var(--s-4)); }

@media print {
  .header, .actionbar, .cta-band, .form { display: none; }
  body { background: #fff; color: #000; padding-bottom: 0; }
}