/* ============================================================
   STYLE.CSS — Layout & Komponenten.
   Diese Datei bleibt bei jedem Kunden gleich. Nicht anfassen.
   Alle Farben/Schriften/Maße kommen aus brand.css.
   ============================================================ */

/* ---------- Schriften (lokal, kein CDN) ---------- */

@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}
/* Alternative Überschriften-Schriften. Umgeschaltet wird in brand.css
   über --f-display. Ungenutzte Schriften werden vom Browser gar nicht
   erst geladen, kosten also nichts. */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}


/* ---------- Reset / Basis ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;   /* damit Ankerlinks nicht unter dem Header landen */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-plaster);
  color: var(--c-ink);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 600);
  line-height: 1.12;
  letter-spacing: var(--display-tracking, -0.015em);
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}

/* Skip-Link für Tastatur/Screenreader */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-ink);
  color: var(--c-plaster);
  padding: 12px 18px;
  z-index: 999;
}
.skip:focus { left: 0; }


/* ---------- Layout-Bausteine ---------- */

.wrap {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: var(--gap-sec); }

.section--dark {
  background: var(--c-ink);
  color: var(--c-plaster);
}

.section--tint { background: var(--c-plaster-2); }

/* @ in E-Mail-Adressen (14.09.2026, Adian: „das @ ist komisch").
   Archivo zeichnet ein sehr großes, breites @, das aus der Zeile fällt.
   In den sichtbaren Adressen steht es deshalb in einem <span class="at">
   und nimmt die Systemschrift des Geräts — das @, das jeder kennt.
   Keine Schrift wird nachgeladen (DSGVO): Arial, Helvetica, Segoe UI und
   Roboto sind auf den Geräten schon installiert. */
.at { font-family: Arial, Helvetica, "Segoe UI", Roboto, sans-serif; }

/* Kleines Label über Überschriften */
.eyebrow {
  font-family: var(--f-text);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-gold-dim);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}
.section--dark .eyebrow { color: var(--c-gold); }

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.section-head h2 { font-size: var(--t-h2); max-width: 20ch; }

.section-head .lead {
  margin-top: 1.5rem;
  max-width: var(--w-text);
  font-size: var(--t-lead);
  color: var(--c-stone);
  line-height: 1.6;
}
.section--dark .section-head .lead { color: #a9a29a; }


/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--f-text);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 2rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}

.btn--gold {
  background: var(--c-gold);
  color: var(--c-ink);
  border-color: var(--c-gold);
}
.btn--gold:hover { background: var(--c-gold-hi); border-color: var(--c-gold-hi); }

.btn--ghost {
  background: transparent;
  color: currentColor;
  border-color: currentColor;
  opacity: .85;
}
.btn--ghost:hover { opacity: 1; background: rgba(183,145,63,.1); }

.btn:active { transform: translateY(1px); }


/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header.is-stuck,
.site-header--fest {
  background: rgba(16, 17, 18, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--c-line-dark);
}

/* Rechtsseiten: heller Grund, deshalb muss die Leiste dauerhaft
   dunkel bleiben — sonst steht weiße Schrift auf hellem Grund. */
.site-header--fest { background: rgba(16, 17, 18, .97); }

/* Handy: kein Weichzeichner hinter der Kopfleiste. Er rechnet bei jedem
   Bild neu, sobald darunter etwas in Bewegung ist (Staub im Hero) — ein
   Grund fürs Ruckeln. Fast deckender Grund sieht praktisch gleich aus. */
@media (max-width: 860px) {
  .site-header.is-stuck,
  .site-header--fest {
    background: rgba(16, 17, 18, .97);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
}

/* Rücklink rechts in der Kopfleiste der Rechtsseiten — an derselben
   Stelle wie der Kontakt-Knopf auf der Startseite. */
.zurueck {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-gold);
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.zurueck span {
  font-size: 1.15em;
  /* Der Pfeil säße sonst 1,55 px zu tief. Grund: Sein Strich liegt auf
     der Mathematik-Achse der Schrift, das Wort daneben steht in Versalien
     und hat seine optische Mitte auf halber Versalhöhe. Dazu kommt, dass
     der Pfeil 1,15-mal größer ist und seine Grundlinie damit tiefer liegt.
     In Archivo gemessen: 0,11 em Unterschied.
     Wird die Schrift getauscht, diesen Wert neu bestimmen. */
  transform: translateY(-0.1em);
  transition: transform .2s var(--ease);
}
.zurueck:hover { color: var(--c-gold-hi); }
/* Die Höhenkorrektur muss hier mit, sonst wirft der Hover sie weg */
.zurueck:hover span { transform: translate(-4px, -0.1em); }

@media (max-width: 560px) {
  /* Auf schmalen Schirmen nur der Pfeil, sonst wird es zu eng.
     Ohne Wort daneben gibt es nichts auszurichten — Korrektur zurück. */
  .zurueck { font-size: 0; gap: 0; }
  .zurueck span { font-size: 1.5rem; transform: none; }
  .zurueck:hover span { transform: translateX(-4px); }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 82px;
}

/* Bildmarke + Schriftzug nebeneinander */
.wordmark {
  display: flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  color: var(--c-plaster);
  line-height: 1;
}

.wordmark__marke {
  width: auto;
  height: 50px;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .wordmark__marke { height: 42px; }
  .wordmark { gap: .6rem; }
}

.wordmark__text {
  display: flex;
  flex-direction: column;
}
.wordmark__name {
  font-family: var(--f-display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.wordmark__sub {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-top: 5px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}
.nav a {
  font-size: var(--t-small);
  text-decoration: none;
  color: var(--c-plaster);
  opacity: .82;
  position: relative;
  padding-block: 4px;
  transition: opacity .2s var(--ease);
}
/* Die goldene Unterstreichung beim Darüberfahren gilt nur für die
   Textlinks. Der Kontakt-Knopf ist ausgenommen (:not(.btn)) — bei ihm
   sah die Linie aus wie ein Strich unter dem Knopf, nicht wie eine
   Hervorhebung. */
.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav a:hover { opacity: 1; }
.nav a:not(.btn):hover::after { transform: scaleX(1); }

.nav .btn { padding: .8rem 1.4rem; }

/* Mobile-Menü */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
  color: var(--c-plaster);
}
.nav-toggle span {
  display: block;
  width: 24px; height: 1.5px;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span + span { margin-top: 6px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed;
    inset: 82px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--c-ink);
    border-bottom: 1px solid var(--c-line-dark);
    padding: 1rem var(--pad-x) 2rem;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .4s var(--ease);
  }
  .nav.is-open { clip-path: inset(0 0 0 0); }
  .nav a {
    padding-block: 1rem;
    border-bottom: 1px solid var(--c-line-dark);
    font-size: 1.05rem;
  }
  .nav a::after { display: none; }
  .nav .btn { margin-top: 1.5rem; border-bottom: 0; }
}


/* ---------- Hero ---------- */

/* Der Hero füllt immer genau den ersten Bildschirm — kein heller
   Streifen darunter, keine abgeschnittene Kennzahlen-Leiste
   (Wunsch von Adian, 14.09.2026).

   svh = Höhe bei eingeblendeter Adressleiste. Mit vh wäre der Hero auf
   dem Handy genau um die Adressleiste zu hoch und unten abgeschnitten.
   Die vh-Zeile davor ist die Rückfallebene für alte Browser.

   Die Abstände rechnen mit der Fensterhöhe (vh), nicht nur mit der
   Breite. Sonst passt der Inhalt auf einem Notebook (Fenster rund
   1366 × 650) nicht in den Bildschirm. Gemessen mit
   intern/skripte/handy_screenshots.py messen. */
.hero {
  position: relative;
  background: var(--c-ink);
  color: var(--c-plaster);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  /* stretch statt flex-end (14.09.2026): Überschrift und Knöpfe stehen
     oben direkt unter der Kopfleiste, die Kennzahlen unten am Rand.
     Wunsch Adian — vorher saß alles unten und oben blieb eine Lücke. */
  align-items: stretch;
  padding-top: clamp(96px, 14vh, 122px);
  padding-bottom: clamp(1.75rem, 4.5vh, 3.25rem);
  overflow: hidden;
}

/* Hintergrundbild — solange keins da ist, greift der Verlauf darunter */
.hero__media {
  position: absolute;
  inset: 0;
  /* background-image wird direkt im HTML gesetzt (siehe Kommentar dort) */
  background-size: cover;
  /* 40 % rückt die Person nach rechts, weg von der Überschrift.
     Bei einem neuen Foto diesen Wert neu einstellen. */
  background-position: 40% center;
  opacity: .9;
  filter: grayscale(.2) contrast(1.03);
}

/* Zwei übereinanderliegende Verläufe:
   1. waagerecht — dunkel links, wo die Überschrift steht; rechts bleibt
      das Foto sichtbar. So ist der Text lesbar, ohne das Bild zuzudecken.
   2. senkrecht — blendet nach unten ins Schwarz aus, damit die
      Kennzahlen-Leiste ruhig sitzt.                                     */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      var(--c-ink) 0%,
      rgba(16,17,18,.94) 26%,
      rgba(16,17,18,.62) 52%,
      rgba(16,17,18,.34) 78%,
      rgba(16,17,18,.30) 100%),
    linear-gradient(to top,
      var(--c-ink) 0%,
      rgba(16,17,18,.55) 26%,
      rgba(16,17,18,.15) 60%,
      rgba(16,17,18,.45) 100%);
}

/* HANDY UND TABLET (Stand 14.09.2026, Wunsch Adian): Überschrift und
   Knöpfe oben, darunter soll man im Hintergrundbild den Vater und das
   Logo auf dem Transporter sehen.

   Das Hintergrundbild füllt deshalb nicht mehr die ganze Fläche (dann lag
   auf dem Handy nur die Windschutzscheibe hinter dem Text), sondern sitzt
   unten im ersten Bildschirm, genau so hoch wie der Platz unter den
   Knöpfen. Darüber, hinter dem Text, geht der Verlauf in Schwarz über.
   Datei: hero-handy.* (im <style> in index.html gesetzt), Kopf des Vaters
   bei 23 % der Bildhöhe.

   Bildhöhe = Fensterhöhe − 500 px, mindestens 200 px. Nachgemessen: Die
   Knöpfe enden auf den üblichen Handys zwischen 480 und 555 px, das
   Gesicht liegt damit immer darunter (Prüfung mit handy_screenshots.py).
   Nebeneffekt: Das Bild wird nur rund zweifach vergrößert statt wie
   vorher über die volle Höhe gezogen — das war das "Verpixelte".

   filter: none und opacity: 1 — die Farbanpassung ist ins Bild gerechnet.
   Ein Filter unter der Staub-Animation kostet auf dem Handy Leistung. */
@media (max-width: 860px) {
  .hero__media {
    bottom: auto;
    height: 100vh;
    height: 100svh;
    opacity: 1;
    filter: none;
    background-color: var(--c-ink);
    background-repeat: no-repeat;
    background-position: 52% bottom;
    background-size: auto max(200px, calc(100vh - 500px));
    background-size: auto max(200px, calc(100svh - 500px));
  }
  /* Die Oberkante des Bildes (Dach des Transporters) kann hinter dem
     unteren Knopf liegen — dort bleibt es deshalb die ersten 50 px
     kräftig abgedunkelt, das Gesicht darunter nur noch leicht. */
  .hero__media::after {
    background: linear-gradient(to bottom,
      var(--c-ink) 0,
      var(--c-ink) calc(100% - max(200px, calc(100vh - 500px))),
      rgba(16,17,18,.6) calc(100% - max(200px, calc(100vh - 500px)) + 50px),
      rgba(16,17,18,.12) calc(100% - max(200px, calc(100vh - 500px)) + 120px),
      rgba(16,17,18,.10) 84%,
      var(--c-ink) 100%);
    background: linear-gradient(to bottom,
      var(--c-ink) 0,
      var(--c-ink) calc(100% - max(200px, calc(100svh - 500px))),
      rgba(16,17,18,.6) calc(100% - max(200px, calc(100svh - 500px)) + 50px),
      rgba(16,17,18,.12) calc(100% - max(200px, calc(100svh - 500px)) + 120px),
      rgba(16,17,18,.10) 84%,
      var(--c-ink) 100%);
  }
}

/* Staubfläche: liegt zwischen Foto (z-index auto) und Text (z-index 2).
   pointer-events: none, damit sie keine Klicks abfängt. */
.staub {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;

  /* Der Staub soll nur auf der schwarzen Fläche links schweben, nicht über
     dem Fahrzeug und nicht über der Person (Wunsch von Adian, 12.08.2026).
     Die Grenze ist nicht geschätzt, sondern gemessen: Die Helligkeit des
     fertig abgedunkelten Heros liegt bis 25 % der Breite bei 16-22 (also
     praktisch schwarz) und steigt ab 27 % an — dort taucht das Fahrzeug
     auf. Bei 40 % sind es schon 40, bei 71 % rund 70.
     Deshalb voll bis 20 %, ab 34 % nichts mehr. Weicher Übergang statt
     harter Kante, sonst sieht man die Grenze.
     Wird das Hero-Foto getauscht, diese Werte neu bestimmen. */
  -webkit-mask-image: linear-gradient(to right,
      #000 0%, #000 20%, rgba(0,0,0,.5) 27%, transparent 34%);
          mask-image: linear-gradient(to right,
      #000 0%, #000 20%, rgba(0,0,0,.5) 27%, transparent 34%);
}

/* Auf schmalen Schirmen liegt der Text über dem Bild und der Verlauf
   dunkelt senkrecht ab statt seitlich (siehe .hero__media::after weiter
   oben). Eine seitliche Maske wäre dort falsch: Sie würde den Staub in die
   linke Hälfte drängen, obwohl die ganze Fläche dunkel ist. */
/* HANDY: Staub als CSS-Animation (.staub-css, von main.js angelegt) statt
   Zeichenfläche — die ruckelte auf dem Handy (Begründung in main.js).
   Die Fläche reicht nur über den Textbereich; darunter steht seit
   14.09.2026 das Foto, und wie auf dem Desktop soll kein Staub über der
   Person liegen.
   Zwei verschachtelte Elemente je Körnchen: <i> steigt, <b> schwankt.
   Die Bewegung selbst setzt main.js per Web Animations API mit festen
   Pixelwerten — nur transform und opacity, das rechnet die Grafikkarte.
   Hier steht nur das Aussehen. */
.staub-css { display: none; }

@media (max-width: 860px) {
  .staub { display: none; }

  .staub-css {
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 58vh;
    height: 58svh;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
  }
  .staub-css i {
    position: absolute;
    bottom: -6px;
    opacity: 0;
    will-change: transform, opacity;
  }
  .staub-css b {
    display: block;
    border-radius: 50%;
    background: rgba(var(--f), var(--a));
    /* der schwache Hof um das Körnchen, wie auf der Zeichenfläche */
    box-shadow: 0 0 0 var(--h) rgba(var(--f), calc(var(--a) * .22));
    will-change: transform;
  }
}

.hero__inner {
  position: relative; z-index: 2; width: 100%;
  display: flex;
  flex-direction: column;
}
/* Schiebt die Kennzahlen an den unteren Rand, der obere Block bleibt oben */
.hero__haupt { margin-bottom: auto; }

/* Die Goldlinie: zieht sich beim Laden auf — Anspielung auf ein Stuckprofil */
.hero__rule {
  height: 1px;
  background: linear-gradient(to right, var(--c-gold), var(--c-gold-hi) 55%, transparent);
  margin-bottom: clamp(1.25rem, 4vh, 2.5rem);
  transform: scaleX(0);
  transform-origin: left;
  animation: ruleDraw 1.4s var(--ease) .15s forwards;
}
@keyframes ruleDraw { to { transform: scaleX(1); } }

/* Die Überschrift wird auf niedrigen Fenstern kleiner (11,5 % der Höhe),
   sonst schiebt sie auf einem Notebook die Kennzahlen aus dem Bild.
   Auf hohen Fenstern greift wie bisher --t-hero aus brand.css. */
.hero h1 {
  font-size: var(--t-hero);
  font-size: min(var(--t-hero), 11.5vh);
  font-size: min(var(--t-hero), 11.5svh);
  max-width: 16ch;
}
/* Bewusst nicht kursiv: Für die Überschriften-Schriften liegt nur der
   aufrechte Schnitt lokal vor. Der Browser würde sonst eine schräg
   gestellte Fälschung erzeugen, die schlechter lesbar ist.
   Die Hervorhebung trägt die Goldfarbe. */
.hero h1 em {
  font-style: normal;
  color: var(--c-gold-hi);
}

.hero__lead {
  margin-top: clamp(1rem, 3vh, 2rem);
  max-width: 48ch;
  font-size: var(--t-lead);
  color: #b8b1a8;
}

.hero__actions {
  margin-top: clamp(1.25rem, 4.5vh, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Kennzahlen-Leiste am unteren Hero-Rand */
.hero__facts {
  margin-top: clamp(1.25rem, 4vh, 3rem);
  padding-top: clamp(1rem, 2.5vh, 1.75rem);
  border-top: 1px solid var(--c-line-dark);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem;
}

/* HANDY UND TABLET: Überschrift, Text und beide Knöpfe füllen genau den
   ersten Bildschirm, die Kennzahlen folgen beim Scrollen darunter.
   Warum nicht alles in den ersten Bildschirm: Auf einem iPhone bleiben
   bei eingeblendeter Adressleiste nur rund 660 px Höhe. Die Kennzahlen
   stehen dort zweispaltig mit drei Zeilen Text und brauchen allein
   gut 250 px — sie würden immer halb abgeschnitten, das war genau der
   Fehler.
   Die Kennzahlen stehen weiterhin auf dunklem Grund direkt unter dem
   Knopf, der Übergang bleibt ohne Bruch. */
@media (max-width: 860px) {
  .hero {
    display: block;
    padding-top: 0;
    padding-bottom: clamp(2.5rem, 6vh, 3.5rem);
  }
  .hero__haupt {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;       /* oben unter der Kopfleiste */
    margin-bottom: 0;
    padding-top: 96px;                 /* Kopfleiste 82 px + Luft */
    padding-bottom: 0;
  }
  /* Beide Knöpfe gleich breit untereinander — nebeneinander passt die
     Telefonnummer nicht, und zwei unterschiedlich lange Knöpfe
     untereinander sahen unfertig aus. */
  .hero__actions { flex-direction: column; gap: .75rem; }
  .hero__actions .btn { width: 100%; }
  .hero__facts { margin-top: 0; }
}

/* Niedrige Handyschirme (iPhone mit eingeblendeter Adressleiste, rund
   660 px): Abstände enger, damit unter den Knöpfen genug Platz für Vater
   und Logo im Hintergrundbild bleibt (Bildhöhe siehe .hero__media oben). */
@media (max-width: 860px) and (max-height: 760px) {
  .hero__haupt { padding-top: 88px; }
  .hero__rule { margin-bottom: 1rem; }
  .hero__lead { margin-top: .75rem; }
  .hero__actions { margin-top: 1.1rem; gap: .6rem; }
  .hero__actions .btn { padding-block: .85rem; }
}
.fact__num {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  color: var(--c-gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fact__label {
  margin-top: .6rem;
  font-size: var(--t-small);
  color: #8f8880;
  line-height: 1.4;
}

/* Elemente, die beim Laden nacheinander einblenden */
.hero .reveal-up { opacity: 0; transform: translateY(18px); animation: heroUp .9s var(--ease) forwards; }
.hero h1.reveal-up          { animation-delay: .35s; }
.hero .hero__lead.reveal-up { animation-delay: .5s; }
.hero .hero__actions.reveal-up { animation-delay: .62s; }
.hero .hero__facts.reveal-up   { animation-delay: .74s; }
@keyframes heroUp { to { opacity: 1; transform: none; } }


/* ---------- Leistungen ----------
   Bewusst als Liste mit Haarlinien, nicht als Karten-Raster:
   liest sich wie ein Leistungsverzeichnis.                  */

.services { border-top: 1px solid var(--c-line); }

.service {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1rem, 4vw, 3.5rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--c-line);
  align-items: start;
  transition: background-color .3s var(--ease);
}
.service:hover { background: rgba(183,145,63,.045); }

.service__title {
  font-size: var(--t-h2);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.service__body { color: var(--c-stone); max-width: 54ch; }

/* Leistungsbegriffe im Fließtext hervorheben, statt sie in Kästchen
   darunter zu stellen. <b> ist hier richtig: laut HTML-Standard für
   Schlüsselbegriffe ohne besondere Gewichtung gedacht. */
.service__body b {
  font-weight: 500;
  color: var(--c-gold-dim);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(183, 145, 63, .45);
  transition: text-decoration-color .2s var(--ease);
}
.service:hover .service__body b { text-decoration-color: var(--c-gold); }

@media (max-width: 760px) {
  .service { grid-template-columns: 1fr; gap: 1rem; }
}


/* ---------- Über uns ---------- */

/* Links Überschrift und Text, rechts das Portraitfoto. */
.about {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .about { grid-template-columns: 1fr; gap: 2.5rem; }
}

.about__titel {
  font-size: var(--t-h2);
  max-width: 18ch;
  margin-bottom: 2rem;
}

.about__text p + p { margin-top: 1.25rem; }
.about__text p { color: #a9a29a; max-width: var(--w-text); }
.about__text strong { color: var(--c-plaster); font-weight: 600; }

/* Bildspalte rechts. Bildpfad kommt als background-image direkt ins HTML —
   nicht als CSS-Variable, sonst wird der Pfad relativ zur CSS-Datei
   aufgelöst und läuft ins Leere. */
.about__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background-color: var(--c-ink-soft);
  border: 1px solid var(--c-line-dark);
  overflow: hidden;
}

/* Das Foto füllt den Rahmen vollständig aus, ohne sich zu verzerren.
   Der Rahmen gibt 4:5 vor, object-fit beschneidet den Überstand. */
.about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Platzhalter, solange kein Foto vorliegt. Fällt weg, sobald am
   Element ein background-image gesetzt ist. */
.platzhalter-media {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: .5rem;
  padding: 1.5rem;
  text-align: center;
  font-size: var(--t-small);
  line-height: 1.5;
  color: #6e6960;
}
.platzhalter-media b {
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--c-plaster);
}

/* Zitat/Signatur */
.quote {
  margin-top: 2.5rem;
  padding-left: 1.5rem;
  border-left: 1px solid var(--c-gold);
}
.quote p {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 400;
  color: var(--c-plaster);
  line-height: 1.45;
}
.quote cite {
  display: block;
  margin-top: 1rem;
  font-family: var(--f-text);
  font-style: normal;
  font-size: var(--t-small);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-gold);
}


/* ---------- Galerie / Vorher-Nachher ---------- */

/* auto-fill statt auto-fit (14.09.2026): Mit nur einem Projekt zog
   auto-fit die Karte über die ganze Seitenbreite. auto-fill hält die
   Spaltenbreite, auch wenn Spalten leer bleiben. */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.project { position: relative; }

/* 4 : 5 hochkant (vorher 4 : 3 quer): Die ersten echten Fotos sind
   hochkant (765 × 944). Quer hätte das Dach oder den Sockel abgeschnitten. */
.project__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-plaster-2);
  border: 1px solid var(--c-line);
}

.project__frame img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Nachher liegt oben und wird beim Hover/Fokus weggeblendet */
.project__after {
  z-index: 2;
  transition: opacity .5s var(--ease);
}
.project:hover .project__after,
.project:focus-within .project__after { opacity: 0; }

.project__tag {
  position: absolute;
  z-index: 3;
  left: 0; bottom: 0;
  background: var(--c-ink);
  color: var(--c-gold);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .5rem .9rem;
}
/* Das Schild nennt immer, was gerade zu sehen ist. Bis 14.09.2026 wurde
   „ — vorher“ angehängt, dann stand dort „Nachher — Vorher“. */
.project__tag-vorher { display: none; }
.project:hover .project__tag-nachher,
.project:focus-within .project__tag-nachher { display: none; }
.project:hover .project__tag-vorher,
.project:focus-within .project__tag-vorher { display: inline; }

/* Untereinander statt nebeneinander — nebeneinander laufen lange
   Projektnamen und Leistungsart ineinander. */
.project__meta {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding-top: 1rem;
}
.project__meta h3 { font-size: var(--t-h3); }
.project__meta span {
  font-size: var(--t-small);
  color: var(--c-stone);
  letter-spacing: .04em;
}

/* Platzhalter, solange keine Fotos vorliegen */
.placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: .5rem;
  text-align: center;
  background: repeating-linear-gradient(
    45deg, var(--c-plaster-2), var(--c-plaster-2) 12px,
    var(--c-plaster) 12px, var(--c-plaster) 24px);
  color: var(--c-stone);
  font-size: var(--t-small);
  padding: 1rem;
}
.placeholder b {
  font-family: var(--f-display);
  font-size: 1.1rem;
  color: var(--c-ink);
  font-weight: 600;
}


/* ---------- Einsatzgebiet: links Text, rechts Karte ---------- */

.einsatz {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .einsatz { grid-template-columns: 1fr; gap: 2.5rem; }
}

.einsatz__titel {
  font-size: var(--t-h2);
  max-width: 14ch;
  margin-bottom: 1.5rem;
}

.einsatz__hinweis {
  margin-top: 1.5rem;
  font-size: var(--t-small);
  color: var(--c-stone);
  max-width: 42ch;
}

/* Ortsliste ohne Kästchen: Namen im Fluss, durch Punkte getrennt */
/* Ortsliste im Einsatzgebiet. Am 12.08.2026 aus dem HTML entfernt (Wunsch
   von Adian). Die Regeln bleiben stehen, damit die Liste ohne Nacharbeit
   zurückkann und weil das Grundgerüst für den nächsten Kunden gedacht ist. */
.places {
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  column-gap: 0;
  row-gap: .35rem;
  max-width: 44ch;
}
.places li { font-size: var(--t-body); color: var(--c-ink); }
.places li + li::before {
  content: "·";
  color: var(--c-gold-dim);
  margin: 0 .6rem;
}

.einsatz__karte { max-width: 560px; width: 100%; justify-self: center; }

.karte {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}

.karte__quelle {
  display: block;
  margin-top: .35rem;
  font-size: .72rem;
  color: #948d84;
}

.karte__legende {
  margin-top: 1rem;
  font-size: var(--t-small);
  color: var(--c-stone);
  line-height: 1.5;
}


/* ---------- Referenzen ---------- */

.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}

.testimonial { border-top: 1px solid var(--c-line); padding-top: 1.75rem; }

.testimonial blockquote {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.2rem;
  line-height: 1.45;
}

.testimonial footer {
  margin-top: 1.25rem;
  font-size: var(--t-small);
  color: var(--c-stone);
}
.testimonial footer b { color: var(--c-ink); font-weight: 600; }


/* ---------- Bewertungen ---------- */

/* Nur für Screenreader, optisch nicht sichtbar */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.bewertungen-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.bewertung { margin: 0; border-top: 1px solid var(--c-line); padding-top: 1.5rem; }
.bewertung blockquote {
  margin: .9rem 0 0;
  font-family: var(--f-display);
  font-size: 1.15rem;
  line-height: 1.5;
}
.bewertung figcaption {
  margin-top: 1.1rem;
  font-size: var(--t-small);
  color: var(--c-stone);
}
.bewertung figcaption b { color: var(--c-ink); font-weight: 600; }

/* Sterne einer veröffentlichten Bewertung. Anzahl kommt aus data-sterne. */
.sterne-anzeige { display: flex; gap: .15rem; color: var(--c-line); }
.sterne-anzeige::before {
  content: "★★★★★";
  letter-spacing: .12em;
  color: var(--c-line);
}
.sterne-anzeige[data-sterne="5"]::before { content: "★★★★★"; color: var(--c-gold-dim); }
.sterne-anzeige[data-sterne="4"]::before { content: "★★★★"; color: var(--c-gold-dim); }
.sterne-anzeige[data-sterne="3"]::before { content: "★★★"; color: var(--c-gold-dim); }
.sterne-anzeige[data-sterne="2"]::before { content: "★★"; color: var(--c-gold-dim); }
.sterne-anzeige[data-sterne="1"]::before { content: "★"; color: var(--c-gold-dim); }

/* Formular + Echtheitshinweis nebeneinander */
.bewertung-abgeben {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  border-top: 1px solid var(--c-line);
  padding-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 860px) {
  .bewertung-abgeben { grid-template-columns: 1fr; gap: 2.5rem; }
}

.bewertung-abgeben__titel { font-size: var(--t-h3); margin-bottom: .5rem; }

/* --- Sterne-Auswahl ---
   Die Eingabefelder stehen von 5 nach 1 im Quelltext, die Reihe wird
   umgekehrt dargestellt. Dadurch lassen sich mit "nachfolgende
   Geschwister" alle Sterne links des gewählten mitfärben. */
.sterne { border: 0; padding: 0; margin: 0; }
.sterne legend {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-stone);
  margin-bottom: .5rem;
  padding: 0;
}
.sterne__reihe {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: .25rem;
}
.sterne__reihe input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.sterne__reihe label {
  cursor: pointer;
  line-height: 1;
  font-size: 2rem;
  color: var(--c-line);
  transition: color .15s var(--ease), transform .15s var(--ease);
}
.sterne__reihe label::before { content: "★"; }
.sterne__reihe label:hover { transform: scale(1.12); }

/* gewählter Stern und alle links davon */
.sterne__reihe input:checked + label,
.sterne__reihe input:checked + label ~ label { color: var(--c-gold); }

/* Vorschau beim Überfahren */
.sterne__reihe:hover label { color: var(--c-line); }
.sterne__reihe label:hover,
.sterne__reihe label:hover ~ label { color: var(--c-gold-hi); }

/* Tastaturbedienung sichtbar machen */
.sterne__reihe input:focus-visible + label {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.echtheit {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.echtheit h3 {
  font-family: var(--f-text);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin-bottom: 1rem;
}
.echtheit p {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--c-stone);
}
.echtheit p + p { margin-top: .9rem; }


/* ---------- Ablauf (echte Reihenfolge → Nummern sind hier sinnvoll) ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  counter-reset: step;
}
.step { border-top: 1px solid var(--c-line-dark); padding-top: 1.5rem; }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--f-display);
  font-size: 1.5rem;
  color: var(--c-gold);
  margin-bottom: .9rem;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: var(--t-h3); margin-bottom: .6rem; }
.step p { font-size: var(--t-small); color: #a9a29a; }

.ablauf__hinweis {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line-dark);
  font-size: var(--t-small);
  color: #a9a29a;
}
.ablauf__hinweis strong { color: var(--c-plaster); font-weight: 600; }


/* ---------- Kontakt ---------- */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

.form { display: flex; flex-direction: column; gap: 1.5rem; }

.field { display: flex; flex-direction: column; gap: .5rem; }

.field label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-stone);
}
.field label .req { color: var(--c-gold-dim); }

.field input,
.field textarea,
.field select {
  font-family: var(--f-text);
  font-size: var(--t-body);
  color: var(--c-ink);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  width: 100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(183,145,63,.15);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--c-error); }

.field__error {
  font-size: var(--t-small);
  color: var(--c-error);
  min-height: 0;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

/* Einwilligung (DSGVO) */
/* .field label setzt Feldnamen in Großbuchstaben mit Sperrung. Die
   Einwilligung ist ebenfalls ein <label> in einem .field und erbte das —
   ein ganzer Satz in gesperrten Großbuchstaben ist kaum lesbar, gerade
   auf dem Handy. Deshalb hier ausdrücklich zurückgesetzt (14.09.2026). */
.field .consent,
.consent {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: var(--t-small);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--c-stone);
  line-height: 1.5;
}
.consent input {
  width: 17px; height: 17px;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--c-gold-dim);
}
.consent a { color: var(--c-gold-dim); }

/* Honeypot gegen Spam-Bots — für Menschen unsichtbar */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__status {
  font-size: var(--t-small);
  padding: .9rem 1rem;
  border-radius: var(--radius);
  display: none;
}
.form__status.is-visible { display: block; }
.form__status.is-ok   { background: #e3ebe0; color: var(--c-success); }
.form__status.is-err  { background: #f6e3e1; color: var(--c-error); }

/* Direktkontakt-Spalte */
.contact-direct {
  background: var(--c-ink);
  color: var(--c-plaster);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--radius);
}
.contact-direct h3 {
  font-size: var(--t-h3);
  color: var(--c-plaster);
  margin-bottom: 1.75rem;
}

.contact-item { padding-block: 1.1rem; border-top: 1px solid var(--c-line-dark); }
.contact-item:first-of-type { border-top: 0; padding-top: 0; }

.contact-item__label {
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-gold);
  font-weight: 600;
  margin-bottom: .35rem;
}
.contact-item a,
.contact-item p {
  color: var(--c-plaster);
  text-decoration: none;
  font-size: 1.05rem;
  line-height: 1.5;
}
.contact-item a:hover { color: var(--c-gold-hi); }


/* ---------- Footer ---------- */

.site-footer {
  background: var(--c-ink);
  color: #8f8880;
  border-top: 1px solid var(--c-line-dark);
  padding-block: 3.5rem 2.5rem;
  font-size: var(--t-small);
}

/* Drei Spalten: Marke — Rechtliches — Kontakt */
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--c-line-dark);
}
@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.footer-titel {
  font-family: var(--f-text);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-white);
  margin-bottom: 1.5rem;
}

.footer-claim {
  margin-top: 1.25rem;
  max-width: 36ch;
  line-height: 1.65;
}

.footer-links { display: flex; flex-direction: column; gap: .85rem; }
.footer-links a {
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  text-decoration: none;
  transition: color .2s var(--ease);
}
.footer-links a::before {
  content: "\2192";                 /* Pfeil nach rechts */
  color: var(--c-gold);
  transition: transform .2s var(--ease);
}
.footer-links a:hover { color: var(--c-plaster); }
.footer-links a:hover::before { transform: translateX(3px); }

/* Schlichte Fassung für den Fuß der Rechtsseiten: nebeneinander,
   ohne Pfeil. */
.footer-links--schlicht {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.6rem;
}
.footer-links--schlicht a::before { content: none; }

.footer-kontakt { display: flex; flex-direction: column; gap: 1.05rem; }
.footer-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-white);
  margin-bottom: .35rem;
}
.footer-kontakt a { text-decoration: none; transition: color .2s var(--ease); }
.footer-kontakt a:hover { color: var(--c-gold); }

.footer-bottom {
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .6rem 1.5rem;
}

/* Gestalter-Zeile: dezent, aber lesbar. Bricht auf schmalen
   Schirmen in eine eigene Zeile um. */
.footer-credit {
  flex-basis: 100%;
  margin-top: .75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--c-line-dark);
  font-size: .8rem;
  color: #6f6961;
}
.footer-credit a {
  color: inherit;
  text-decoration: none;
  /* dauerhaft unterstrichen (Wunsch von Adian, 12.08.2026) — vorher war
     die Linie durchsichtig und erschien erst beim Darüberfahren */
  border-bottom: 1px solid currentColor;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.footer-credit a:hover { color: var(--c-gold); border-bottom-color: var(--c-gold); }


/* ---------- Sticky Anruf-Leiste (nur mobil) ---------- */

.callbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: none;
  background: var(--c-ink);
  border-top: 1px solid var(--c-line-dark);
  padding: .65rem;
  gap: .65rem;
}
.callbar .btn {
  flex: 1;
  padding: .95rem .5rem;
  font-size: .72rem;
  white-space: nowrap;   /* darf nicht zweizeilig umbrechen */
}

/* Entfernt: die Leiste wurde aus dem HTML genommen. Diese Regel würde
   sie wieder einblenden, sobald das Element zurückkehrt.
@media (max-width: 760px) {
  .callbar { display: flex; }
  body { padding-bottom: 76px; }
}
*/


/* ---------- Rechtstexte (Impressum / Datenschutz) ---------- */

.legal {
  padding-top: 160px;
  /* Ohne diesen Abstand stößt der letzte Absatz direkt an den Fußbereich */
  padding-bottom: clamp(4.5rem, 9vw, 8rem);
}
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 2.5rem; }
.legal h2 {
  font-size: 1.35rem;
  margin-top: 3rem;
  margin-bottom: .9rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line);
}
.legal p, .legal li { max-width: var(--w-text); color: var(--c-stone); }
.legal p + p { margin-top: 1rem; }
.legal ul { padding-left: 1.25rem; }
.legal li + li { margin-top: .4rem; }
.legal a { color: var(--c-gold-dim); }
.legal strong { color: var(--c-ink); }

/* Noch auszufüllende Stellen deutlich markieren */
.todo {
  background: #fdf3d8;
  border-bottom: 1px dashed var(--c-gold-dim);
  color: #6b4e12;
  padding: 1px 5px;
  font-weight: 600;
}


/* ---------- Scroll-Reveal ----------
   Wichtig: Der unsichtbare Startzustand gilt NUR, wenn JavaScript
   läuft (Klasse .js am <html>). Ohne JS ist alles sofort sichtbar —
   sonst wäre die Seite bei einem Skript-Fehler komplett leer.   */

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }


/* ---------- Bewegung reduzieren ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* .js-Präfix nötig, sonst gewinnt die spezifischere Regel oben */
  .js .reveal { opacity: 1; transform: none; }
  .hero .reveal-up { opacity: 1; transform: none; }
  .hero__rule { transform: scaleX(1); }
}


/* ---------- Druck ---------- */

@media print {
  .site-header, .callbar, .hero__media { display: none; }
  body { background: #fff; color: #000; }
}


/* ============================================================
   GROSSE BILDSCHIRME
   Die Maße dazu stehen in brand.css. Hier stehen nur die Stellen,
   die sich nicht über eine Variable regeln lassen.
   ============================================================ */

/* Hier stand bis 14.09.2026 eine eigene Hero-Höhe für große Monitore
   (min(88vh, 1060px)). Entfällt: Der Hero ist jetzt auf jedem Schirm
   genau so hoch wie der erste Bildschirm, siehe Abschnitt Hero. */


/* ============================================================
   MITTEILUNGSSEITEN — kurze Seiten mit einer einzigen Aussage.
   Zurzeit: 404.html (nicht gefunden) und danke.html (Anfrage
   angekommen). Dunkel wie der Hero, damit sie nach derselben Seite
   aussehen und nicht nach einer Meldung des Hosters.
   Die Klassen hiessen bis 08.09.2026 .fehler*, das passte nach dem
   Dazukommen der Dankeseite nicht mehr.
   ============================================================ */

/* Die ganze Seite als senkrechte Spalte über volle Fensterhöhe. Dadurch
   dockt der Fußbereich immer unten an und der Inhalt dazwischen dehnt
   sich. Der erste Versuch rechnete stattdessen mit festen Höhen
   (calc(100vh - 172px)) — dabei blieb unten ein heller Streifen stehen,
   weil der Fußbereich in Wirklichkeit niedriger ist als angenommen. */
.seite-mitteilung {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--c-ink);
}
.seite-mitteilung .site-footer { margin-top: auto; }

.mitteilung {
  flex: 1;
  background: var(--c-ink);
  color: var(--c-plaster);
  display: flex;
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem);
}

.mitteilung__inhalt { text-align: center; }

.mitteilung__zahl {
  font-family: var(--f-display);
  font-size: clamp(5rem, 16vw, 11rem);
  line-height: .9;
  font-variant-numeric: tabular-nums;
  /* Nur Umriss statt Fläche: Die Zahl soll den Blick nicht schlucken,
     die Überschrift darunter ist die eigentliche Botschaft. */
  color: transparent;
  -webkit-text-stroke: 1px var(--c-gold-dim);
  margin-bottom: 1.5rem;
}

.mitteilung h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin: 0 0 1.25rem;
}

.mitteilung__text {
  color: #a9a29a;
  max-width: 46ch;
  margin: 0 auto;
  font-size: var(--t-lead);
}

.mitteilung__aktionen {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.mitteilung__links {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--c-line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  justify-content: center;
  font-size: var(--t-small);
}
.mitteilung__links a {
  color: var(--c-stone);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.mitteilung__links a:hover {
  color: var(--c-gold);
  border-bottom-color: var(--c-gold);
}