/*
Theme Name:  Prestige Paint Performance
Theme URI:   https://www.prestigepaintperformance.de/
Author:      OYMEDIA
Author URI:  https://www.oymedia.de
Description: Massgeschneidertes Theme fuer Prestige Paint Performance, Hamburg.
             Lackierung, Folierung und Smart Repair. Schriften lokal
             eingebunden, keine externen Dienste, kein Consent-Banner noetig.
Version:     1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: prestige-paint
Tags:        custom-menu, featured-images, translation-ready

Diese Datei wird erzeugt — nicht direkt bearbeiten.
Quelle: assets/css/style.css + wordpress/wordpress-zusatz.css
Neu bauen mit: wordpress/theme-css-bauen.sh
*/


/* =========================================================
   Prestige Paint Performance
   Gestaltung „Clearcoat" — die Seite als frisch lackierte
   Oberfläche: tiefes Schwarz, Glanzkanten, Orange als einzige
   Signalfarbe. Fotos tragen die Seite, das Logo bleibt Marke.

   Bewegung folgt den Animationsregeln von Emil Kowalski:
   nur transform und opacity, kein ease-in, UI unter 300 ms,
   Übergänge statt Keyframes (unterbrechbar).
   ========================================================= */

:root {
  /* --- Flächen ---------------------------------------- */
  --ink-950: #08080a;
  --ink-900: #0d0e11;
  --ink-850: #121317;
  --ink-800: #17191e;
  --ink-700: #1e2128;
  --ink-600: #2a2e37;

  --weiss: #ffffff;
  --papier: #f6f6f7;
  --papier-2: #eeeef0;

  /* --- Marke ------------------------------------------ */
  --orange: #ff920d;
  --orange-hell: #ffab42;
  --orange-tief: #d97400;

  /* Orange auf weissem Grund erreicht als Textfarbe nur 2,2:1 und
     ist damit unlesbar — auf der alten Seite standen alle Links so.
     Fuer Text auf hellem Grund deshalb der abgedunkelte Ton: 5,3:1
     auf Weiss und 4,5:1 noch auf dem dunkelsten grauen Feld
     (--papier-2), also durchgehend ueber der Schwelle. */
  --orange-text: #a85600;

  /* --- Schrift ---------------------------------------- */
  --text: #101114;
  --text-2: #55595f;
  --text-3: #83878f;

  --hell: rgba(255, 255, 255, 0.92);
  --hell-2: rgba(255, 255, 255, 0.66);

  /* 0,42 wirkte ruhiger, erreichte auf dem dunkelsten Grund aber nur
     4,03:1 — unter den geforderten 4,5:1. Daran hingen ausgerechnet die
     Brotkrumen und die Verweise auf Impressum und Datenschutz. 0,52
     ergibt 5,3:1 auf --ink-950 und 5,1:1 auf --ink-800, liegt also auf
     jeder dunklen Flaeche ueber der Schwelle und bleibt zugleich klar
     unter --hell-2, damit die Abstufung erhalten bleibt. */
  --hell-3: rgba(255, 255, 255, 0.52);

  --linie: rgba(255, 255, 255, 0.1);
  --linie-stark: rgba(255, 255, 255, 0.18);
  --linie-dunkel: rgba(16, 17, 20, 0.1);

  --font-headline: "Poppins", "Segoe UI", Arial, sans-serif;
  --font-text: "Open Sans", "Segoe UI", Arial, sans-serif;

  /* --- Raster ----------------------------------------- */
  --breite: 1240px;
  --breite-schmal: 760px;
  --rand: clamp(20px, 4vw, 40px);
  --sec-y: clamp(72px, 9vw, 128px);

  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
  --r-pille: 999px;

  /* --- Bewegung --------------------------------------- */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --t-press: 140ms;
  --t-hover: 200ms;
  --t-ui: 260ms;
  --t-reveal: 620ms;
}

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

html {
  scroll-behavior: smooth;
  /* Der klebende Kopfbereich verdeckt sonst jedes Sprungziel. */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: var(--orange-text);
  text-decoration: none;
  transition: color var(--t-hover) ease;
}

a:hover {
  color: var(--orange-tief);
}

/* Auf dunklem Grund darf das helle Orange stehen.

   Die Auswahl steht in :where() und wiegt damit nichts. Sonst
   uebertrumpft sie jede Komponente, die ihre Textfarbe selbst
   setzt — ein Knopf im Hero bekaeme oranger Text auf orangem
   Grund und waere unlesbar. */
:where(.section--dunkel, .hero, .seitenkopf, .cta, .footer, .band, .szene) a {
  color: var(--orange);
}

:where(.section--dunkel, .hero, .seitenkopf, .cta, .szene) a:hover {
  color: var(--orange-hell);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-headline);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 0.5em;
  /* „Fahrzeuglackierungen" und „Kleinschadenreparatur" laufen
     auf schmalen Displays sonst ueber den Rand hinaus.

     Die Grenze daneben haelt die Trennung kurzer Woerter ab: Ohne sie
     zerlegt der Browser auch „deine" zu „dei-ne", und ein zerhacktes
     Fuellwort faellt in einer Ueberschrift mehr auf als die Zeile, die
     es sparen soll.

     Bei acht Zeichen lag die Grenze zu tief — sie traf den Markennamen
     selbst: Auf „Ueber uns" stand am Handy „Willkommen bei Pres-tige
     Paint Performance". Ein getrennter Firmenname ist schlimmer als
     eine Zeile mehr. Ab zwoelf Zeichen bleiben „Prestige" (8),
     „Willkommen" (10) und „Performance" (11) unangetastet, waehrend
     die langen Fachwoerter weiter umbrechen duerfen. */
  hyphens: auto;
  hyphenate-limit-chars: 12 5 5;
  overflow-wrap: break-word;
}

h1 {
  font-size: clamp(2.35rem, 6.4vw, 4.6rem);
}

h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
}

h3 {
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: -0.018em;
}

p {
  margin: 0 0 1.1em;
}

strong {
  font-weight: 600;
  color: inherit;
}

::selection {
  background: var(--orange);
  color: var(--ink-950);
}

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

.container {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--rand);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--orange);
  color: var(--ink-950);
  padding: 14px 22px;
  font-family: var(--font-headline);
  font-weight: 600;
  border-radius: 0 0 var(--r-s) 0;
}

.skip-link:focus {
  left: 0;
}

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

/* Kleine Vorzeile ueber Ueberschriften. Gibt jedem Abschnitt
   eine Einordnung, ohne eine zweite Ueberschrift zu sein. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-headline);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-text);
  margin: 0 0 18px;
  line-height: 1;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}

.section--dunkel .eyebrow,
.hero .eyebrow,
.seitenkopf .eyebrow,
.cta .eyebrow {
  color: var(--orange);
}

.section {
  padding: var(--sec-y) 0;
  position: relative;
}

.section--grau {
  background: var(--papier);
}

.section--dunkel {
  background: var(--ink-900);
  color: var(--hell);
}

.section--dunkel h2,
.section--dunkel h3 {
  color: var(--weiss);
}

.section--eng {
  padding: clamp(48px, 6vw, 84px) 0;
}

.section__kopf {
  max-width: 720px;
  margin: 0 0 clamp(40px, 5vw, 66px);
}

/* Der Abschnittskopf der Startseite stand einmal geteilt:
   Ueberschrift links, Beschreibung rechts. In der Spalte daneben
   war der kurze Satz aber weder an der Ueberschrift noch an der
   Rasterkante — er hing frei im Raum und las sich als
   Ausrichtungsfehler. Mittig nimmt er dieselbe Achse wie der
   Handlungsaufruf am Seitenende. */
.section__kopf--mitte {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Der Strich vor der Vorzeile sitzt links am Text. In einem
   zentrierten Block zieht er die Zeile aus der Mitte — dort
   entfaellt er. */
.section__kopf--mitte .eyebrow::before,
.cta .eyebrow::before {
  display: none;
}

.section__kopf h2 {
  margin-bottom: 0.35em;
}

.section__kopf p {
  color: var(--text-2);
  font-size: 1.1rem;
  margin: 0;
  max-width: 62ch;
}

.section--dunkel .section__kopf p {
  color: var(--hell-2);
}

.section__kopf--mitte p {
  margin-left: auto;
  margin-right: auto;
}

/* Feine Trennlinie, die aus der Mitte heraus aufgebaut wird. */
.trennlinie {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--linie-dunkel);
}

.section--dunkel .trennlinie {
  background: var(--linie);
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 0.97rem;
  letter-spacing: -0.01em;
  padding: 16px 30px;
  border: 1px solid var(--orange);
  border-radius: var(--r-pille);
  background: var(--orange);
  color: var(--ink-950);
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-press) var(--ease),
    box-shadow var(--t-hover) var(--ease),
    background-color var(--t-hover) ease,
    border-color var(--t-hover) ease,
    color var(--t-hover) ease;
}

.btn:hover {
  color: var(--ink-950);
}

/* Der Glanz laeuft beim Ueberfahren einmal ueber die Flaeche —
   wie Licht ueber frischen Klarlack. Rein dekorativ, deshalb
   nur auf Zeigergeraeten. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 620ms var(--ease-io);
}

.btn--pfeil::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  order: 2;
  transition: transform var(--t-hover) var(--ease);
}

.btn:active {
  transform: scale(0.975);
}

.btn--outline {
  background: transparent;
  color: var(--orange);
  border-color: rgba(255, 146, 13, 0.42);
}

.btn--outline:hover {
  background: rgba(255, 146, 13, 0.1);
  border-color: var(--orange);
  color: var(--orange-hell);
}

/* Auf hellem Grund braucht die Umriss-Variante dunkleren Text. */
.section:not(.section--dunkel) .btn--outline,
.inhalt .btn--outline {
  color: var(--orange-text);
  border-color: rgba(178, 92, 0, 0.38);
}

.section:not(.section--dunkel) .btn--outline:hover,
.inhalt .btn--outline:hover {
  color: var(--orange-tief);
  border-color: var(--orange-tief);
  background: rgba(255, 146, 13, 0.08);
}

.btn--geist {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--linie-stark);
  color: var(--weiss);
}

.btn--geist:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.34);
  color: var(--weiss);
}

.btn--klein {
  font-size: 0.9rem;
  padding: 12px 22px;
}

.btn-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* Textlink mit wanderndem Pfeil. */
.pfeil-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.pfeil-link svg {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform var(--t-hover) var(--ease);
}

/* =========================================================
   Kopfbereich und Navigation
   ========================================================= */

/* Der Kopfbereich liegt ueber dem Bild, nicht davor: oben schwebt er
   ohne eigene Flaeche im Hero, beim Scrollen legt er sich eine
   dunkle Scheibe unter. Als `sticky` waere er ein eigener Streifen
   ueber dem Bild — und seine halbdurchsichtige Flaeche staende
   ueber dem weissen Seitengrund, also grau statt schwarz. */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-ui) ease,
    border-color var(--t-ui) ease,
    backdrop-filter var(--t-ui) ease;
}

/* Ohne eigene Flaeche braucht die Schrift oben einen Schattenrand,
   sonst verschwindet sie in hellen Bildstellen. */
.header::before {
  content: "";
  position: absolute;
  inset: 0 0 -40px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(8, 8, 10, 0.72) 0%,
    rgba(8, 8, 10, 0.32) 55%,
    transparent 100%
  );
  transition: opacity var(--t-ui) ease;
}

.header.ist-gescrollt {
  background: rgba(8, 8, 10, 0.86);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--linie);
}

.header.ist-gescrollt::before {
  opacity: 0;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 84px;
  transition: min-height var(--t-ui) var(--ease);
}

.header.ist-gescrollt .header__inner {
  min-height: 68px;
}

.header__logo {
  display: block;
  flex: none;
  line-height: 0;
}

.header__logo img {
  height: 60px;
  width: auto;
  display: block;
  transform-origin: left center;
  transition: transform var(--t-ui) var(--ease);
}

.header.ist-gescrollt .header__logo img {
  transform: scale(0.82);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  position: relative;
  display: block;
  font-family: var(--font-headline);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hell);
  padding: 8px 0;
  transition: color var(--t-hover) ease;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-ui) var(--ease);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--orange);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Anruf-Knopf rechts in der Kopfzeile — auf einer Werkstattseite
   ist der Anruf die haeufigste Handlung. */
.header__aktion {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-950);
  background: var(--orange);
  border-radius: var(--r-pille);
  padding: 11px 20px;
  white-space: nowrap;
  transition: transform var(--t-press) var(--ease),
    background-color var(--t-hover) ease;
}

.header__aktion:hover {
  background: var(--orange-hell);
  color: var(--ink-950);
}

.header__aktion:active {
  transform: scale(0.97);
}

.header__aktion svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.nav__toggle {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav__toggle span {
  position: absolute;
  left: 11px;
  display: block;
  height: 2px;
  width: 24px;
  border-radius: 2px;
  background: var(--weiss);
  transition: transform var(--t-ui) var(--ease),
    opacity 120ms ease;
}

.nav__toggle span:nth-child(1) {
  top: 16px;
}

.nav__toggle span:nth-child(2) {
  top: 22px;
}

.nav__toggle span:nth-child(3) {
  top: 28px;
}

.nav__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Duenner Fortschrittsbalken am oberen Rand. */
.fortschritt {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 200;
  background: var(--orange);
  transform: scaleX(var(--fortschritt, 0));
  transform-origin: left center;
  pointer-events: none;
}

/* =========================================================
   Hero
   ========================================================= */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(94vh, 900px);
  padding: clamp(120px, 18vh, 200px) 0 clamp(56px, 8vh, 96px);
  color: var(--weiss);
  background: var(--ink-950);
  overflow: hidden;
  isolation: isolate;
}

/* Das Hintergrundbild sitzt in einer eigenen Ebene, damit es sich
   beim Scrollen langsamer bewegen kann als der Text. */
.hero__medium {
  position: absolute;
  inset: -8% 0 -8%;
  z-index: -2;
  background: var(--ink-950) center / cover no-repeat;
  transform: translate3d(0, var(--parallax, 0px), 0) scale(1.06);
  will-change: transform;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Oben darf das Bild atmen, unten traegt die Abdunklung den Text.
     Das Motiv ist selbst schon dunkel — eine gleichmaessige Decke
     darueber macht daraus eine schwarze Flaeche. */
  background: linear-gradient(
      180deg,
      rgba(8, 8, 10, 0.42) 0%,
      rgba(8, 8, 10, 0.3) 34%,
      rgba(8, 8, 10, 0.82) 78%,
      rgba(8, 8, 10, 0.95) 100%
    ),
    radial-gradient(
      120% 80% at 12% 100%,
      rgba(255, 146, 13, 0.18) 0%,
      transparent 62%
    );
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1000px;
}

.hero h1 {
  margin: 0 0 22px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
  /* Silbentrennung erst dort, wo sie gebraucht wird. Auf breiten
     Schirmen ist Platz genug — „Fahrzeuglackie-rungen" mitten im
     Wort zu trennen sieht dort nach Fehler aus. */
  hyphens: manual;
}

@media (max-width: 620px) {
  .hero h1 {
    hyphens: auto;
  }
}

/* Der Zeilenumbruch wird animiert, indem jede Zeile hinter ihrer
   eigenen Kante hervorkommt. */
.zeile {
  display: block;
  padding-bottom: 0.06em;
}

.js .zeile {
  overflow: hidden;
}

.js .zeile > span {
  display: block;
  transform: translateY(102%);
  transition: transform 820ms var(--ease);
}

.js.ist-bereit .zeile > span {
  transform: translateY(0);
}

/* Der Hero baut sich der Reihe nach auf: erst die Vorzeile, dann die
   Ueberschrift, dann alles darunter. 90 ms Abstand — gerade genug,
   dass die Reihenfolge lesbar wird. */
.js .hero .eyebrow {
  transition-delay: 60ms;
}

.js .hero .zeile > span {
  transition-delay: 120ms;
}

.js .hero__text {
  transition-delay: 260ms;
}

.js .hero .btn-reihe {
  transition-delay: 340ms;
}

.js .hero__social {
  transition-delay: 400ms;
}

.js .hero__merkmale {
  transition-delay: 460ms;
}

.hero__text {
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  max-width: 56ch;
  margin: 0 0 34px;
  color: var(--hell-2);
}

.hero__social {
  margin: 26px 0 0;
  font-size: 0.95rem;
  color: var(--hell-3);
}

.hero__social a {
  font-weight: 600;
}

/* Merkmalzeile unten im Hero: knappe Belege statt Fliesstext. */
.hero__merkmale {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  list-style: none;
  margin: 38px 0 0;
  padding: 30px 0 0;
  border-top: 1px solid var(--linie);
}

.hero__merkmale li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-headline);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--hell-2);
}

.hero__merkmale li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}

/* Scrollhinweis: eine Linie, die dauerhaft nach unten laeuft. */
.hero__scroll {
  position: absolute;
  right: clamp(20px, 3.5vw, 52px);
  bottom: clamp(56px, 8vh, 96px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--font-headline);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hell-3);
  writing-mode: vertical-rl;
}

.hero__scroll span {
  display: block;
  width: 1px;
  height: 56px;
  background: var(--linie-stark);
  overflow: hidden;
  position: relative;
}

.hero__scroll span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--orange);
  animation: scroll-lauf 2.1s var(--ease-io) infinite;
}

@keyframes scroll-lauf {
  0% {
    transform: translateY(-100%);
  }
  60%,
  100% {
    transform: translateY(100%);
  }
}

/* =========================================================
   Seitenkopf der Unterseiten
   ========================================================= */

.seitenkopf {
  position: relative;
  padding: clamp(120px, 16vh, 190px) 0 clamp(56px, 7vw, 92px);
  color: var(--weiss);
  background: var(--ink-950);
  overflow: hidden;
  isolation: isolate;
}

.seitenkopf__medium {
  position: absolute;
  inset: -6% 0 -6%;
  z-index: -2;
  background: var(--ink-950) center / cover no-repeat;
  transform: translate3d(0, var(--parallax, 0px), 0) scale(1.04);
  will-change: transform;
}

.seitenkopf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      180deg,
      rgba(8, 8, 10, 0.74) 0%,
      rgba(8, 8, 10, 0.62) 45%,
      rgba(8, 8, 10, 0.92) 100%
    ),
    radial-gradient(
      100% 70% at 0% 100%,
      rgba(255, 146, 13, 0.14) 0%,
      transparent 60%
    );
}

/* Ohne Beitragsbild bleibt der Kopf einfarbig — dann traegt ihn
   ein feiner Verlauf statt einer toten schwarzen Flaeche. */
.seitenkopf--leer::before {
  background: radial-gradient(
      120% 90% at 8% 0%,
      rgba(255, 146, 13, 0.14) 0%,
      transparent 58%
    ),
    linear-gradient(180deg, var(--ink-850) 0%, var(--ink-950) 100%);
}

.seitenkopf__inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
}

.seitenkopf h1 {
  margin: 0 0 0.35em;
}

.seitenkopf p {
  margin: 0;
  color: var(--hell-2);
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  max-width: 58ch;
}

/* Brotkrumen: kurze Ortsangabe ueber der Ueberschrift. */
.krumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  font-family: var(--font-headline);
  /* 0,78rem waren 12,5 px — an der Grenze des Lesbaren, und die Krumen
     sind der einzige Weg zurueck zur Ebene darueber. */
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--hell-3);
}

.krumen li::after {
  content: "/";
  margin-left: 10px;
  opacity: 0.5;
}

.krumen li:last-child::after {
  display: none;
}

.krumen a {
  color: var(--hell-3);
}

.krumen a:hover {
  color: var(--orange);
}

/* =========================================================
   Laufband
   ========================================================= */

.band {
  background: var(--ink-950);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  padding: 20px 0;
  overflow: hidden;
  position: relative;
}

/* Die Schrift laeuft an beiden Raendern weich aus, statt hart
   abzuschneiden. Zwei Verlaufsstreifen in der Bandfarbe statt einer
   Maske: Eine Maske am Band macht auch dessen dunkle Flaeche
   durchsichtig und legt den weissen Seitengrund frei — und eine
   Maske an der Spur wandert mit der Bewegung mit. */
.band::before,
.band::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(48px, 10%, 160px);
  z-index: 1;
  pointer-events: none;
}

.band::before {
  left: 0;
  background: linear-gradient(90deg, var(--ink-950) 12%, transparent);
}

.band::after {
  right: 0;
  background: linear-gradient(270deg, var(--ink-950) 12%, transparent);
}

.band__spur {
  display: flex;
  width: max-content;
  animation: band-lauf 46s linear infinite;
}

.band:hover .band__spur {
  animation-play-state: paused;
}

.band__gruppe {
  display: flex;
  align-items: center;
  flex: none;
}

.band__gruppe span {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
  font-family: var(--font-headline);
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hell-2);
  white-space: nowrap;
}

.band__gruppe span::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}

@keyframes band-lauf {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* =========================================================
   Randbrechender Text-Bild-Block

   Die Grundform der Seite: ein Bild, das nicht an der
   Containerkante endet, sondern bis zum Fensterrand laeuft, und
   ein Text, der in der Containerspalte daneben sitzt. Ersetzt den
   fruehen gerahmten Block, bei dem beide Spalten im Container
   standen — der sah auf jeder Seite gleich aus.

   Gebaut ist das ueber ein Raster mit benannten Linien statt
   ueber negative Aussenabstaende und `100vw` — `100vw` schliesst
   die Bildlaufleiste mit ein und schiebt die Seite dann seitlich
   auf. Die vier Spalten sind: linker Aussenrand, linke
   Containerhaelfte, rechte Containerhaelfte, rechter Aussenrand.
   Die Linien `inhalt-*` liegen damit genau dort, wo auch der
   Container beginnt und endet.
   ========================================================= */

.split {
  display: grid;
  grid-template-columns:
    [voll-links] minmax(var(--rand), 1fr)
    [inhalt-links] minmax(0, calc((var(--breite) - 2 * var(--rand)) / 2))
    [mitte] minmax(0, calc((var(--breite) - 2 * var(--rand)) / 2))
    [inhalt-rechts] minmax(var(--rand), 1fr) [voll-rechts];
  align-items: stretch;
  min-height: clamp(400px, 44vw, 620px);
}

.split + .split {
  margin-top: clamp(56px, 7vw, 104px);
}

/* Der Rahmen liegt vor dem Bild da, solange es aufgedeckt wird.
   Seine Farbe richtet sich deshalb nach dem Untergrund: Ein
   tiefschwarzer Kasten auf weisser Flaeche liest sich in dieser
   knappen Sekunde wie ein Bild, das nicht geladen hat. */
.split__bild {
  position: relative;
  grid-column: voll-links / mitte;
  grid-row: 1;
  overflow: hidden;
  border-radius: 0 var(--r-l) var(--r-l) 0;
  background: var(--papier-2);
}

.section--dunkel .split__bild {
  background: var(--ink-800);
}

/* Aus dem Fluss genommen, damit die Zeilenhoehe allein am Text und
   an `min-height` haengt. Im Fluss haette ein Hochformatfoto ueber
   eine halbe Fensterbreite seine eigene Hoehe durchgesetzt — der
   Abschnitt waere doppelt so hoch geworden wie sein Inhalt. */
.split__bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease);
}

/* Dieselbe Glanzkante wie am gerahmten Block. */
.split__bild::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.split__text {
  grid-column: mitte / inhalt-rechts;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(36px, 4vw, 64px) 0 clamp(36px, 4vw, 64px)
    clamp(28px, 4.5vw, 76px);
}

.split--gedreht .split__bild {
  grid-column: mitte / voll-rechts;
  border-radius: var(--r-l) 0 0 var(--r-l);
}

.split--gedreht .split__text {
  grid-column: inhalt-links / mitte;
  padding-left: 0;
  padding-right: clamp(28px, 4.5vw, 76px);
}

.split__text > *:last-child {
  margin-bottom: 0;
}

.split__text h2 {
  margin-bottom: 0.5em;
}

.split__text p {
  color: var(--text-2);
}

.section--dunkel .split__text p {
  color: var(--hell-2);
}

.split__text ul {
  padding-left: 0;
  list-style: none;
  margin: 0 0 1.6em;
}

.split__text li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 13px;
  color: var(--text-2);
}

.section--dunkel .split__text li {
  color: var(--hell-2);
}

.split__text li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 15px;
  height: 8px;
  border-left: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(-45deg);
}

.split__text .btn {
  margin-top: 6px;
  align-self: flex-start;
}

/* Anrisstext im Kopf eines Splits — groesser gesetzt als der
   Fliesstext darunter, damit der Einstieg traegt. */
.lead {
  font-size: clamp(1.1rem, 1.6vw, 1.32rem);
  line-height: 1.6;
  color: var(--text-2);
}

.section--dunkel .lead,
.split__text .lead {
  color: inherit;
}

.split__text .lead {
  color: var(--text);
}

.section--dunkel .split__text .lead {
  color: var(--hell);
}

/* =========================================================
   Bildszene ueber die volle Breite

   Ein Bildmoment zwischen zwei Abschnitten. Bricht die Folge aus
   weissen Textflaechen auf und gibt dem Auge eine Pause.
   ========================================================= */

.szene {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(340px, 44vw, 540px);
  background: var(--ink-950);
  color: var(--weiss);
  overflow: hidden;
  isolation: isolate;
}

/* Wie im Hero laeuft das Bild langsamer mit als der Text. Der
   Ueberstand oben und unten gibt der Verschiebung den Weg. */
.szene__bild {
  position: absolute;
  inset: -7% 0;
  z-index: -2;
  width: 100%;
  height: 114%;
  object-fit: cover;
  transform: translate3d(0, var(--parallax, 0px), 0);
  will-change: transform;
}

.szene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      180deg,
      rgba(8, 8, 10, 0.3) 0%,
      rgba(8, 8, 10, 0.52) 46%,
      rgba(8, 8, 10, 0.93) 100%
    ),
    radial-gradient(
      100% 80% at 4% 100%,
      rgba(255, 146, 13, 0.2) 0%,
      transparent 62%
    );
}

/* Die Breite kommt aus `.container` — eine eigene, engere Angabe
   wuerde den Satz gegenueber allen anderen Abschnitten einruecken.
   Begrenzt wird stattdessen die Zeilenlaenge am Satz selbst. */
.szene__inner {
  position: relative;
  z-index: 1;
  padding-top: clamp(44px, 6vw, 84px);
  padding-bottom: clamp(44px, 6vw, 84px);
}

.szene__satz {
  font-family: var(--font-headline);
  font-size: clamp(1.55rem, 3.4vw, 2.85rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 22ch;
}

.szene__satz strong {
  font-weight: 700;
  color: var(--orange);
}

/* Ohne Text ist die Szene ein reines Bildband zwischen zwei
   Abschnitten. Es traegt dann keine Schrift, also darf der
   Verlauf zurueckgehen — er hat nur noch die Aufgabe, die Kanten
   an die angrenzenden dunklen Flaechen anzuschliessen. */
.szene--still {
  min-height: clamp(220px, 26vw, 360px);
}

.szene--still::before {
  background: linear-gradient(
    180deg,
    rgba(8, 8, 10, 0.55) 0%,
    rgba(8, 8, 10, 0.12) 34%,
    rgba(8, 8, 10, 0.12) 66%,
    rgba(8, 8, 10, 0.55) 100%
  );
}

/* =========================================================
   Bento — Leistungen als Bildkacheln

   Statt fuenf gleich grosser weisser Karten liegen hier
   unterschiedlich breite Kacheln auf dunklem Grund, das Foto
   traegt die Flaeche. Die Spannweiten stehen an `:nth-child`,
   damit das Markup pro Kachel gleich bleibt.
   ========================================================= */

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.kachel {
  position: relative;
  grid-column: span 4;
  display: flex;
  min-height: clamp(380px, 33vw, 480px);
  border-radius: var(--r-l);
  overflow: hidden;
  isolation: isolate;
  background: var(--ink-850);
  transition: transform var(--t-ui) var(--ease),
    box-shadow var(--t-ui) var(--ease);
}

.bento .kachel:nth-child(1) {
  grid-column: span 7;
}

.bento .kachel:nth-child(2) {
  grid-column: span 5;
}

/* Bei drei Kacheln legt sich die letzte quer ueber die ganze
   Breite. Ein Drittelraster waere wieder die Reihe gleich grosser
   Karten, aus der dieses Raster herausfuehren soll. */
.bento--drei .kachel:nth-child(3) {
  grid-column: span 12;
  min-height: clamp(280px, 25vw, 360px);
}

.bento--drei .kachel:nth-child(3) .kachel__inhalt {
  max-width: 620px;
}

.kachel__bild {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

/* Der Verlauf traegt die Schrift und muss deshalb auf das hellste
   Motiv ausgelegt sein, nicht auf das dunkelste: Ab der Haelfte
   der Kachelhoehe — dort beginnt der laengste Beschreibungstext —
   deckt er zu rund vier Fuenfteln, weisser Text kommt damit auch
   ueber einer hellen Bildstelle noch auf gut 9:1.

   Der Knick liegt bei 40 %, nicht tiefer: Dort beginnt bei der
   groessten Kachel mit dem laengsten Text die Ziffer. Ueber einem
   weissen Bildpunkt kommt Orange darauf noch auf 5,2:1 — tiefer
   angesetzt waeren es 2,9:1 und damit unlesbar. */
.kachel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(8, 8, 10, 0.1) 0%,
    rgba(8, 8, 10, 0.34) 18%,
    rgba(8, 8, 10, 0.8) 40%,
    rgba(8, 8, 10, 0.95) 64%,
    rgba(8, 8, 10, 0.97) 100%
  );
  transition: opacity var(--t-ui) ease;
}

/* Lichtpunkt am Zeiger, wie auf den Karten. */
.kachel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 146, 13, 0.18),
    transparent 62%
  );
  transition: opacity var(--t-ui) ease;
}

.kachel__inhalt {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: clamp(22px, 2.4vw, 32px);
  width: 100%;
}

.kachel__nummer {
  display: block;
  font-family: var(--font-headline);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--orange);
  margin-bottom: 12px;
  line-height: 1;
}

.kachel__inhalt h3 {
  color: var(--weiss);
  margin-bottom: 0.5em;
}

.kachel__inhalt p {
  color: var(--hell-2);
  font-size: 1rem;
  margin-bottom: 1.2em;
  max-width: 46ch;
}

.kachel__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--orange);
}

.kachel__link svg {
  width: 15px;
  height: 15px;
  flex: none;
  transition: transform var(--t-hover) var(--ease);
}

/* Die ganze Kachel ist anklickbar. */
.kachel__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* =========================================================
   Punkteraster

   Aufzaehlungen, die fuer sich stehen sollen: nicht als Liste im
   Fliesstext, sondern als eigene Flaeche. Die Trennlinien
   entstehen aus dem 1px-Abstand vor dem Untergrund — so bleibt
   das Raster auch bei Umbruch geschlossen.
   ========================================================= */

.punkte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1px;
  list-style: none;
  margin: 0 0 clamp(32px, 4vw, 52px);
  padding: 0;
  background: var(--linie-dunkel);
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--r-m);
  overflow: hidden;
}

.punkte li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: clamp(22px, 2.4vw, 30px);
  background: var(--weiss);
  color: var(--text);
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.35;
  letter-spacing: -0.012em;
}

.punkte li::before {
  display: none;
}

.punkte__nr {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--orange-text);
  line-height: 1;
}

.section--grau .punkte li {
  background: var(--papier);
}

.section--dunkel .punkte {
  background: var(--linie);
  border-color: var(--linie);
}

.section--dunkel .punkte li {
  background: var(--ink-850);
  color: var(--weiss);
}

.section--dunkel .punkte__nr {
  color: var(--orange);
}

/* =========================================================
   Stehende Spalte

   Der Text bleibt beim Scrollen stehen, waehrend die Bilder
   daneben durchlaufen. `position: sticky` braucht dafuer eine
   Spalte, die nicht gestreckt wird — deshalb `align-items:
   start` am Raster.
   ========================================================= */

.stapel {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}

.stapel__text {
  position: sticky;
  /* Kopfbereich (68 px im gescrollten Zustand) plus Luft. */
  top: 108px;
}

.stapel__text > *:last-child {
  margin-bottom: 0;
}

.stapel__bilder {
  display: grid;
  gap: clamp(16px, 2vw, 26px);
}

/* In der stehenden Spalte schliesst das Punkteraster unten ab. */
.stapel__text .punkte {
  margin-bottom: 0;
}

.stapel__bilder figure {
  position: relative;
  margin: 0;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--papier-2);
  aspect-ratio: 16 / 11;
}

.section--dunkel .stapel__bilder figure {
  background: var(--ink-800);
}

/* Das zweite Bild steht eingerueckt — zwei gleich breite Bilder
   uebereinander waeren nur eine Spalte mit Fuge. */
.stapel__bilder figure:nth-child(even) {
  margin-left: clamp(24px, 6vw, 90px);
}

.stapel__bilder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease);
}

.stapel__bilder figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* =========================================================
   Fliesstext-Seiten
   ========================================================= */

.inhalt {
  max-width: var(--breite-schmal);
  margin: 0 auto;
  /* Lange URLs und E-Mail-Adressen im Impressum schieben die
     Seite auf schmalen Displays sonst seitlich auf. */
  overflow-wrap: anywhere;
}

.inhalt > *:first-child {
  margin-top: 0;
}

.inhalt > *:last-child {
  margin-bottom: 0;
}

.inhalt h2 {
  margin-top: 1.9em;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
}

.inhalt h2:first-child {
  margin-top: 0;
}

.inhalt h3 {
  margin-top: 1.6em;
}

.inhalt p {
  color: var(--text-2);
}

.section--dunkel .inhalt p {
  color: var(--hell-2);
}

.inhalt ul {
  padding-left: 0;
  list-style: none;
  margin: 0 0 1.5em;
}

.inhalt li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  color: var(--text-2);
}

.inhalt li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

.inhalt__box {
  background: var(--papier);
  border: 1px solid var(--linie-dunkel);
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  padding: 26px 30px;
  margin: 0 0 1.7em;
  /* In der Box stehen E-Mail-Adresse und Instagram-Name — beide
     ohne natuerliche Trennstelle und laenger als ein schmales
     Display. */
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .inhalt__box {
    padding: 20px 18px;
  }
}

.section--grau .inhalt__box {
  background: var(--weiss);
}

.inhalt__box p:last-child {
  margin-bottom: 0;
}

.inhalt dl {
  margin: 0;
}

.inhalt dt {
  font-family: var(--font-headline);
  font-weight: 600;
  color: var(--text);
  margin-top: 1.4em;
}

.inhalt dd {
  margin: 4px 0 0;
  color: var(--text-2);
}

/* =========================================================
   Kontakt
   ========================================================= */

.kontakt-raster {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

/* Die Datenspalte endete frueher als das Formular daneben und
   liess darunter eine leere Flaeche stehen. Ein Foto schliesst
   sie jetzt ab. Bleibt sie trotzdem die kuerzere — etwa wenn
   Contact Form 7 Fehlermeldungen einblendet und das Formular
   waechst —, haelt `sticky` Telefonnummer und Adresse im Bild. */
.kontakt-spalte {
  position: sticky;
  top: 108px;
}

.kontakt-bild {
  position: relative;
  margin: clamp(28px, 3vw, 40px) 0 0;
  border-radius: var(--r-l);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--papier-2);
}

.kontakt-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kontakt-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.kontakt-daten {
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
}

.kontakt-daten li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid var(--linie-dunkel);
}

.kontakt-daten li:first-child {
  padding-top: 0;
}

.kontakt-daten__icon {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--r-m);
  background: rgba(255, 146, 13, 0.12);
  color: var(--orange-text);
  transition: transform var(--t-hover) var(--ease),
    background-color var(--t-hover) ease;
}

.kontakt-daten li:hover .kontakt-daten__icon {
  background: rgba(255, 146, 13, 0.2);
}

.kontakt-daten__icon svg {
  width: 19px;
  height: 19px;
}

.kontakt-daten strong {
  display: block;
  font-family: var(--font-headline);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 3px;
}

.kontakt-daten a,
.kontakt-daten span {
  font-size: 1.05rem;
  color: var(--text);
  /* E-Mail-Adresse und Instagram-Name haben keine natuerlichen
     Trennstellen. */
  overflow-wrap: anywhere;
}

.kontakt-daten a {
  display: inline-block;
  padding: 4px 0;
  transition: color var(--t-hover) ease;
}

.kontakt-daten a:hover {
  color: var(--orange-text);
}

/* Anfahrt

   Die Anfahrt stand vorher als dunkler Kasten in der Datenspalte.
   Sie ist jetzt ein eigener Abschnitt mit Bild — von der alten
   Fassung bleibt nur die Adresszeile, und die steht groesser als
   der Text daneben: Sie ist die Angabe, wegen der jemand hier
   liest. Die Auswahl nennt `.split__text` mit, weil dessen Regel
   fuer Absaetze sonst schwerer wiegt und die Farbe zurueckholt. */

.split__text .anfahrt__adresse {
  margin: 0 0 16px;
  font-family: var(--font-headline);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--text);
}

.section--dunkel .split__text .anfahrt__adresse {
  color: var(--weiss);
}

/* Formular */

.formular-karte {
  background: var(--weiss);
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--r-l);
  padding: clamp(24px, 3vw, 40px);
  box-shadow: 0 22px 60px -32px rgba(16, 17, 20, 0.35);
}

.section--grau .formular-karte {
  background: var(--weiss);
}

.formular__feld {
  margin-bottom: 18px;
}

.formular__reihe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.formular label {
  display: block;
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
  color: var(--text);
}

.formular input[type="text"],
.formular input[type="email"],
.formular input[type="tel"],
.formular textarea {
  width: 100%;
  font-family: var(--font-text);
  font-size: 1rem;
  padding: 14px 16px;
  border: 1px solid rgba(16, 17, 20, 0.16);
  border-radius: var(--r-m);
  background: var(--papier);
  color: var(--text);
  transition: border-color var(--t-hover) ease,
    box-shadow var(--t-hover) ease, background-color var(--t-hover) ease;
}

.formular input::placeholder,
.formular textarea::placeholder {
  color: var(--text-3);
}

.formular input:hover,
.formular textarea:hover {
  border-color: rgba(16, 17, 20, 0.28);
}

.formular input:focus,
.formular textarea:focus {
  outline: none;
  background: var(--weiss);
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 146, 13, 0.16);
}

.formular textarea {
  min-height: 160px;
  resize: vertical;
}

.formular__pflicht {
  color: var(--orange-text);
}

.formular__zustimmung {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.formular__zustimmung input {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--orange);
}

.formular__zustimmung label {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0;
}

.formular__hinweis {
  font-size: 0.86rem;
  color: var(--text-3);
  margin-top: 16px;
}

.formular .btn {
  width: 100%;
}

/* Contact Form 7
   CF7 umschliesst jedes Feld mit <span class="wpcf7-form-control-wrap">.
   Diese Regeln machen das Plugin-Markup deckungsgleich mit dem
   statischen Formular. Das Theme schaltet das mitgelieferte
   Stylesheet ab (Filter wpcf7_load_css), deshalb stehen dessen
   Ausblendregeln hier mit. */

.formular .hidden-fields-container {
  display: none;
}

.formular .wpcf7-form-control-wrap {
  display: block;
}

.formular .wpcf7-form-control-wrap input[type="text"],
.formular .wpcf7-form-control-wrap input[type="email"],
.formular .wpcf7-form-control-wrap input[type="tel"],
.formular .wpcf7-form-control-wrap textarea {
  width: 100%;
}

.formular .wpcf7-not-valid-tip {
  display: block;
  margin-top: 7px;
  font-size: 0.84rem;
  color: #c0392b;
}

.formular input.wpcf7-not-valid,
.formular textarea.wpcf7-not-valid {
  border-color: #c0392b;
  background: rgba(192, 57, 43, 0.04);
}

.formular__zustimmung .wpcf7-form-control-wrap,
.formular__zustimmung .wpcf7-acceptance,
.formular__zustimmung .wpcf7-list-item {
  display: block;
  margin: 0;
}

.formular__zustimmung .wpcf7-list-item label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
}

.formular__zustimmung .wpcf7-list-item-label {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--text-2);
  line-height: 1.6;
}

/* Statusmeldung nach dem Absenden. CF7 setzt die Statusklasse am
   <form>: init/resetting/submitting solange nichts vorliegt,
   danach sent, invalid, unaccepted, failed oder aborted. */
.formular .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 15px 18px;
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--r-m);
  font-size: 0.94rem;
}

.formular.init .wpcf7-response-output,
.formular.resetting .wpcf7-response-output,
.formular.submitting .wpcf7-response-output {
  display: none;
}

.formular.sent .wpcf7-response-output {
  border-color: #2e7d32;
  background: rgba(46, 125, 50, 0.08);
  color: #256428;
}

.formular.invalid .wpcf7-response-output,
.formular.unaccepted .wpcf7-response-output,
.formular.payment-required .wpcf7-response-output,
.formular.spam .wpcf7-response-output,
.formular.failed .wpcf7-response-output,
.formular.aborted .wpcf7-response-output {
  border-color: #c0392b;
  background: rgba(192, 57, 43, 0.07);
  color: #a5301f;
}

.formular .wpcf7-spinner {
  visibility: hidden;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0 0 0 12px;
  border-radius: 50%;
  background: var(--text-3);
  opacity: 0.7;
  vertical-align: middle;
}

.formular.submitting .wpcf7-spinner {
  visibility: visible;
  animation: formular-puls 1s ease-in-out infinite;
}

@keyframes formular-puls {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.8;
  }
}

/* =========================================================
   Handlungsaufruf
   ========================================================= */

.cta {
  position: relative;
  padding: clamp(72px, 9vw, 120px) 0;
  background: var(--ink-950);
  color: var(--weiss);
  overflow: hidden;
  isolation: isolate;
}

/* Zwei sich langsam bewegende Farbwolken — der Nebel einer
   Lackierkabine, stark abstrahiert. */
.cta::before,
.cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  pointer-events: none;
}

.cta::before {
  width: 46vw;
  height: 46vw;
  max-width: 620px;
  max-height: 620px;
  top: -22%;
  left: -8%;
  background: rgba(255, 146, 13, 0.34);
  animation: wolke-a 22s var(--ease-io) infinite alternate;
}

.cta::after {
  width: 38vw;
  height: 38vw;
  max-width: 520px;
  max-height: 520px;
  bottom: -26%;
  right: -6%;
  background: rgba(255, 146, 13, 0.18);
  animation: wolke-b 27s var(--ease-io) infinite alternate;
}

@keyframes wolke-a {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(9%, 12%, 0) scale(1.16);
  }
}

@keyframes wolke-b {
  from {
    transform: translate3d(0, 0, 0) scale(1.1);
  }
  to {
    transform: translate3d(-11%, -9%, 0) scale(1);
  }
}

.cta__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.cta h2 {
  color: var(--weiss);
  margin-bottom: 0.4em;
}

.cta p {
  max-width: 52ch;
  margin: 0 auto 32px;
  color: var(--hell-2);
  font-size: 1.08rem;
}

.cta .btn-reihe {
  justify-content: center;
}

/* =========================================================
   Fussbereich
   ========================================================= */

.footer {
  background: var(--ink-950);
  color: var(--hell-2);
  padding: clamp(56px, 7vw, 84px) 0 26px;
  font-size: 0.95rem;
  border-top: 1px solid var(--linie);
}

.footer__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  padding-bottom: 44px;
}

.footer h3 {
  color: var(--weiss);
  font-family: var(--font-headline);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.4em;
}

.footer__logo {
  height: 84px;
  width: auto;
  margin-bottom: 20px;
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer li {
  margin-bottom: 2px;
}

.footer a {
  color: var(--hell-2);
}

/* Links im Fussbereich sind auf dem Handy Tippziele. Eine
   Textzeile allein ist rund 20 px hoch — zu wenig. */
.footer li a {
  display: inline-block;
  padding: 7px 0;
}

.footer a:hover {
  color: var(--orange);
}

.footer__raster p {
  color: var(--hell-3);
  max-width: 38ch;
}

.footer__raster p a {
  display: inline-block;
  padding: 4px 0;
}

.footer__unten {
  border-top: 1px solid var(--linie);
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--hell-3);
}

.footer__unten a {
  color: var(--hell-3);
  display: inline-block;
  padding: 5px 2px;
}

/* =========================================================
   Bewegung beim Scrollen

   Die Uebergaenge stehen dauerhaft am Element, nicht erst in der
   Sichtbar-Klasse — so sind sie unterbrechbar und springen nicht,
   wenn beim schnellen Scrollen mehrere Zustaende zusammenfallen.
   ========================================================= */

/* Alle Ausgangszustaende haengen an der Klasse `js` am <html>. Die
   setzt ein kurzes Skript im Kopfbereich, bevor irgendetwas
   gezeichnet wird.

   Der Umweg ist noetig, weil der Ausgangszustand `opacity: 0` ist:
   Ohne ihn waere die ganze Seite unsichtbar, sobald das Skript nicht
   laedt — bei einem Netzfehler, in einem Textbrowser, hinter einem
   Blocker. Wer kein JavaScript hat, sieht so einfach keine
   Bewegung statt gar nichts. */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity var(--t-reveal) var(--ease),
    transform var(--t-reveal) var(--ease);
}

.js [data-reveal].ist-sichtbar {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Bilder werden nicht eingeblendet, sondern aufgedeckt — die
   Maske faehrt von unten nach oben aus dem Weg.

   Geschnitten wird das Bild im Rahmen, nicht der Rahmen selbst.
   Der Unterschied ist keine Feinheit, sondern der Grund, warum
   diese Bilder eine Fassung lang unsichtbar blieben: Chromium
   rechnet die Schnittmaske in die Flaeche ein, die der
   IntersectionObserver misst. Ein Element, das sich selbst
   vollstaendig wegschneidet, hat damit die Flaeche null und wird
   nie als sichtbar gemeldet — es wartet auf ein Signal, das es
   sich selbst verbaut hat. Am inneren Bild hat die Maske diese
   Wirkung nicht: gemessen wird der Rahmen, und der bleibt ganz. */
.js [data-reveal="medium"] {
  opacity: 1;
  transform: none;
}

.js [data-reveal="medium"] img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 700ms var(--ease-io);
}

.js [data-reveal="medium"].ist-sichtbar img {
  clip-path: inset(0 0 0 0);
}

/* Versetzter Eingang fuer Gruppen. 60 ms Abstand — genug, um die
   Reihenfolge zu lesen, zu wenig, um zu warten. */
[data-stagger] > * {
  transition-delay: calc(var(--i, 0) * 60ms);
}

/* =========================================================
   Responsiv
   ========================================================= */

/* Das Bento-Raster geht zuerst auf zwei Spalten. Die erste Kachel
   behaelt ihre Sonderrolle und nimmt die volle Breite — sonst
   stuende sie neben der zweiten und beide waeren gleich gross. */
@media (max-width: 1080px) {
  .bento,
  .bento--drei {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bento .kachel,
  .bento .kachel:nth-child(2),
  .bento--drei .kachel:nth-child(3) {
    grid-column: span 1;
  }

  .bento .kachel:nth-child(1) {
    grid-column: span 2;
  }
}

/* Ab hier stehen die Kacheln untereinander. Der Punkt liegt bewusst
   unter dem der Navigation: Auf einem Tablet im Hochformat (768 px)
   ist Platz fuer zwei Spalten — eine einzelne Spalte macht daraus
   eine endlose Kette. Die Abfrage muss nach der fuer 1080 px
   stehen, sonst holt deren Zweispalter den Umbruch wieder zurueck. */
@media (max-width: 700px) {
  .bento,
  .bento--drei {
    grid-template-columns: minmax(0, 1fr);
  }

  .bento .kachel,
  .bento .kachel:nth-child(1),
  .bento .kachel:nth-child(2),
  .bento--drei .kachel:nth-child(3) {
    grid-column: span 1;
  }
}

@media (max-width: 900px) {
  .kontakt-raster {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  /* Der randbrechende Split wird zur gestapelten Folge: Bild ueber
     die volle Breite, Text darunter im Containerrand. Die
     Reihenfolge im Markup ist Bild vor Text — auch die gedrehte
     Fassung stapelt deshalb Bild oben. */
  /* `minmax(0, 1fr)` statt `1fr`: Die Kurzform hat als Mindestmass
     `auto`, und `auto` ist so breit wie der laengste unteilbare
     Inhalt. Die Adresse „prestigepaintperformance.com" hat keine
     Trennstelle — sie hat das Raster auf 320 px um sieben Pixel
     ueber den Rand geschoben und die ganze Seite seitlich
     aufgezogen. Mit der Null als Mindestmass gibt die Spalte nach
     statt der Seite. */
  .split {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .split__bild,
  .split--gedreht .split__bild {
    grid-column: 1 / -1;
    grid-row: 1;
    border-radius: 0;
    aspect-ratio: 16 / 10;
  }

  .split__text,
  .split--gedreht .split__text {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: clamp(30px, 6vw, 48px) var(--rand) 0;
  }

  .stapel {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  /* Ohne zweite Spalte hat das Stehenbleiben keinen Zweck mehr —
     der Text haette nichts, woran er vorbeilaeuft. */
  .stapel__text,
  .kontakt-spalte {
    position: static;
  }

  .stapel__bilder figure:nth-child(even) {
    margin-left: 0;
  }

  .footer__raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .hero__scroll {
    display: none;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 16px;
  }

  .nav__toggle {
    display: block;
    order: 3;
  }

  /* Die Navigation ist hier aus dem Fluss genommen. Ohne diesen
     Schub verteilt `space-between` die drei verbliebenen Elemente
     gleichmaessig ueber die Zeile — Logo, Anrufknopf und Menue
     staenden dann mit grossen Luecken nebeneinander. */
  .header__aktion {
    margin-left: auto;
    padding: 11px 13px;
  }

  .header__aktion span:not(.sr-only) {
    display: none;
  }

  /* Das Menue faehrt als eigene Flaeche unter dem Kopfbereich
     hervor. Bewegt wird nur transform und opacity — max-height
     zu animieren erzwingt in jedem Bild ein neues Layout. */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(8, 8, 10, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--linie);
    transform: translate3d(0, -12px, 0);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--t-ui) var(--ease-drawer),
      opacity var(--t-ui) var(--ease-drawer),
      visibility 0s linear var(--t-ui);
  }

  .nav.ist-offen {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--rand) 20px;
  }

  /* Die Eintraege kommen versetzt herein — aber nur ueber die
     Verschiebung, nicht ueber die Deckkraft. Ein Menuepunkt, der
     erst nach Ablauf einer Verzoegerung sichtbar wird, ist bei
     stockender Darstellung gar nicht da; die Navigation haengt
     dann an einer Verzierung. Verschoben und lesbar ist besser
     als unsichtbar. */
  .nav__list li {
    border-bottom: 1px solid var(--linie);
    transform: translate3d(0, -8px, 0);
    transition: transform var(--t-ui) var(--ease-drawer);
  }

  .nav.ist-offen .nav__list li {
    transform: none;
  }

  .nav.ist-offen .nav__list li:nth-child(1) {
    transition-delay: 40ms;
  }

  .nav.ist-offen .nav__list li:nth-child(2) {
    transition-delay: 80ms;
  }

  .nav.ist-offen .nav__list li:nth-child(3) {
    transition-delay: 120ms;
  }

  .nav.ist-offen .nav__list li:nth-child(4) {
    transition-delay: 160ms;
  }

  .nav__list li:last-child {
    border-bottom: 0;
  }

  .nav__link {
    display: block;
    padding: 16px 0;
    font-size: 1.05rem;
  }

  .nav__link::after {
    display: none;
  }

  .hero {
    min-height: min(88vh, 760px);
    align-items: flex-end;
  }

  .formular__reihe {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .footer__raster {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

/* Sehr schmale Geraete (iPhone SE und aehnliche). Die E-Mail-
   Adresse ist 33 Zeichen lang; hier zaehlt jeder Pixel. */
/* Nebeneinander stehende Knoepfe passen unterhalb von 560 px nicht
   mehr in eine Zeile. Untereinander und auf volle Breite sind sie
   ausserdem die besseren Tippziele. */
@media (max-width: 560px) {
  .hero .btn-reihe,
  .cta .btn-reihe,
  .split__text .btn-reihe {
    flex-direction: column;
    align-items: stretch;
  }

  .hero .btn-reihe .btn,
  .cta .btn-reihe .btn,
  .split__text .btn-reihe .btn {
    width: 100%;
  }
}

@media (max-width: 400px) {
  .kontakt-daten li {
    gap: 13px;
  }

  .kontakt-daten__icon {
    width: 36px;
    height: 36px;
  }

  .kontakt-daten__icon svg {
    width: 17px;
    height: 17px;
  }

  .kontakt-daten a,
  .kontakt-daten span {
    font-size: 0.98rem;
  }

  .hero__merkmale {
    gap: 8px 18px;
  }
}

/* Schmale Geraete: Ueberschriften und Tippziele

   Die Ueberschrift der Startseite enthaelt „Fahrzeuglackierungen" —
   20 Zeichen ohne Fuge. Bei der bisherigen Untergrenze von 2,35 rem
   braucht das Wort 419 px und passt in keine Zeile; der Browser
   trennt es dann mitten im Wort. Die Werte hier sind so gewaehlt,
   dass es auch auf 320 px noch in eine Zeile geht. Die Obergrenze
   bleibt die alte, ab 480 px greift wieder die allgemeine Regel. */
@media (max-width: 480px) {
  h1 {
    font-size: clamp(1.55rem, 7.4vw, 2.35rem);
  }

  /* Dieselbe Rechnung eine Ebene tiefer: Bei 1,8 rem passt
     „Neue Optik für deine Felgen?" auf 320 px in keine zwei Zeilen
     mehr, und der Browser trennt dann irgendwo. */
  h2 {
    font-size: clamp(1.45rem, 6.4vw, 1.8rem);
  }
}

/* Auf den schmalsten Geraeten reicht auch das nicht mehr. Dort
   gibt lieber der Seitenrand vier Pixel ab als die Ueberschrift
   weitere Punkte: Ein zerhacktes Wort faellt staerker auf als ein
   etwas schmalerer Rand. */
@media (max-width: 340px) {
  :root {
    --rand: 16px;
  }
}

/* Tippziele unter der Schwelle von 24 px aus WCAG 2.2 bekommen den
   fehlenden Weg als Innenabstand. Sichtbar aendert sich nichts —
   der Finger trifft nur mehr Flaeche. */
@media (max-width: 768px) {
  .header__aktion {
    min-width: 44px;
    min-height: 44px;
  }

  .krumen a {
    display: inline-block;
    padding: 4px 0;
  }

  .hero__social a {
    display: inline-block;
    padding: 4px 0;
  }
}

/* =========================================================
   Bewegung nur dort, wo ein Zeiger sie ausloesen kann

   Auf Touchgeraeten bleibt ein :hover-Zustand nach dem Antippen
   haengen — Verschiebungen und Skalierungen wirken dort wie ein
   Fehler.
   ========================================================= */

@media (hover: hover) and (pointer: fine) {
  .split:hover .split__bild img,
  .stapel__bilder figure:hover img {
    transform: scale(1.03);
  }

  .kachel:hover {
    transform: translate3d(0, -5px, 0);
    box-shadow: 0 30px 70px -32px rgba(0, 0, 0, 0.85);
  }

  .kachel:hover .kachel__bild {
    transform: scale(1.05);
  }

  .kachel:hover::after {
    opacity: 1;
  }

  .kachel:hover .kachel__link svg {
    transform: translateX(4px);
  }

  .btn:hover {
    box-shadow: 0 14px 34px -12px rgba(255, 146, 13, 0.5);
  }

  .btn:hover::after {
    transform: translateX(100%);
  }

  .btn--outline:hover,
  .btn--geist:hover {
    box-shadow: none;
  }

  .btn--pfeil:hover::before {
    transform: rotate(45deg) translate3d(2px, -2px, 0);
  }

  .pfeil-link:hover svg {
    transform: translateX(4px);
  }

  .kontakt-daten li:hover .kontakt-daten__icon {
    transform: translate3d(0, -2px, 0);
  }
}

/* =========================================================
   Reduzierte Bewegung

   Nicht alles abschalten: Ein- und Ausblenden hilft beim
   Verstehen. Weg muss, was den Ort wechselt.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js [data-reveal],
  .js [data-reveal="medium"],
  .js [data-reveal="medium"] img {
    transform: none;
    clip-path: none;
    transition: opacity 260ms ease;
  }

  .js .zeile {
    overflow: visible;
  }

  .js .zeile > span {
    transform: none;
    transition: opacity 260ms ease;
  }

  .hero__medium,
  .seitenkopf__medium,
  .szene__bild {
    transform: none !important;
  }

  .band__spur,
  .cta::before,
  .cta::after,
  .hero__scroll span::after {
    animation: none;
  }

  .btn::after {
    display: none;
  }

  .kachel:hover,
  .kachel:hover .kachel__bild,
  .split:hover .split__bild img,
  .stapel__bilder figure:hover img {
    transform: none;
  }

  /* Eine stehende Spalte ist kein Ortswechsel, sie bleibt. Was
     weg muss, ist das weiche Scrollen dorthin — das steht schon
     weiter oben. */

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 160ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   Druckansicht
   ========================================================= */

@media print {
  .header,
  .footer,
  .cta,
  .band,
  .szene,
  .fortschritt,
  .hero__scroll,
  .nav__toggle {
    display: none;
  }

  /* Stehende Spalten kennt der Druck nicht — ohne diese Zeile
     landet die Kontaktspalte auf einer eigenen Seite. */
  .stapel__text,
  .kontakt-spalte {
    position: static;
  }

  body {
    color: #000;
    background: #fff;
    font-size: 12pt;
  }

  [data-reveal],
  [data-reveal="medium"] img {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .hero,
  .seitenkopf {
    color: #000;
    background: none;
    padding: 20pt 0;
    min-height: 0;
  }

  .hero__medium,
  .seitenkopf__medium,
  .hero::before,
  .seitenkopf::before {
    display: none;
  }
}

/* =========================================================
   WordPress
   Alles ab hier gibt es nur im Theme, nicht in der statischen
   Vorschau: Admin-Leiste, Block-Editor-Klassen, Barrierefreiheit.
   ========================================================= */

/* Die Admin-Leiste ist 32 px hoch (46 px auf schmalen Bildschirmen)
   und schiebt den klebenden Kopfbereich sonst unter sich. */
.admin-bar .header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .header {
    top: 46px;
  }
}

/* Von WordPress erwartete Hilfsklasse für Screenreader-Texte */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  white-space: normal;
}

/* Ausrichtungen aus dem Block-Editor */
.alignleft {
  float: left;
  margin: 0 24px 20px 0;
}

.alignright {
  float: right;
  margin: 0 0 20px 24px;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignwide,
.alignfull {
  max-width: none;
}

/* Bilder aus der Mediathek nie über den Rand hinaus */
.wp-block-image img,
.wp-caption img {
  max-width: 100%;
  height: auto;
}

.wp-block-image figcaption,
.wp-caption-text {
  font-size: 0.88rem;
  color: var(--grau);
  text-align: center;
  margin-top: 8px;
}

/* Der Block-Editor setzt eigene Abstände an Absätzen und Listen —
   im Fließtext-Bereich sollen die Theme-Abstände gelten. */
.inhalt > *:first-child {
  margin-top: 0;
}

.inhalt > *:last-child {
  margin-bottom: 0;
}