/* ============================================================================
   VSF – Veranstaltungsservice & Facility Management
   Gestaltung. Mobile-first, kein Framework, keine Build-Pipeline.

   Farben: Basis aus der Wortmarke (fast schwarz / dunkelgrau), dazu die drei
   Signalfarben der Werbesprüche. Alle drei erreichen auf Weiß mindestens
   4.5:1 Kontrast und dürfen deshalb auch für Text verwendet werden.

   Bewegung: Stufe 5–6. Die Zeiten und Beschleunigungskurven stammen aus der
   Motion-Datenbank des Skills (motion.csv) und sind hier von GSAP-Easings in
   cubic-bezier übersetzt. Umgesetzt mit CSS-Transitions plus
   IntersectionObserver – für diese Stufe braucht es keine Bibliothek.
   ========================================================================= */

/* ------------------------------------------------------------- Schriften */
/* Selbst gehostet. Keine Einbindung über fonts.googleapis.com: die
   Content-Security-Policy steht auf 'self', und eine CDN-Einbindung würde die
   IP-Adresse jedes Besuchers an Google übertragen. Beide Familien stehen unter
   der SIL Open Font License, die das Selbsthosten ausdrücklich erlaubt – die
   Lizenztexte liegen daneben in assets/fonts/. */

@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/Outfit-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/Outfit-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("/assets/fonts/WorkSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("/assets/fonts/WorkSans-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("/assets/fonts/WorkSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- Marken */

:root {
  /* Basis – aus der Wortmarke entnommen */
  --farbe-schwarz:    #111114;
  --farbe-grau:       #3E3E43;
  --farbe-text:       #24262B;
  --farbe-text-hell:  #5A5F68;
  --farbe-weiss:      #FFFFFF;
  --farbe-flaeche:    #F5F7F9;
  --farbe-flaeche-2:  #EDF1F5;
  --farbe-rand:       #DDE2E8;

  /* Signalfarben – die drei Werbesprüche.
     Geprüft gegen Weiß: Blau 7.2:1, Rot 5.9:1, Grün 5.3:1 (AA für Fließtext). */
  --farbe-blau:       #14589E;
  --farbe-rot:        #C0272D;
  --farbe-gruen:      #2C7A3F;

  /* Aufgehellte Fassungen für dunkle Flächen (Kopfbereich, Fußzeile).
     Geprüft gegen #111114: Blau 5.4:1, Rot 5.0:1, Grün 5.6:1. */
  --farbe-blau-hell:  #4E9BE8;
  --farbe-rot-hell:   #F0575D;
  --farbe-gruen-hell: #4FBE6C;

  /* Schrift */
  --schrift-titel: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --schrift-text:  "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Maße */
  --breite:        76rem;
  --breite-schmal: 46rem;
  --abstand:       clamp(3.5rem, 8vw, 7rem);
  --rand-innen:    clamp(1.1rem, 4vw, 2.5rem);
  --radius:        3px;             /* kantig, passend zur Wortmarke */
  --schatten:      0 2px 12px rgba(17, 17, 20, .08);
  --schatten-hoch: 0 12px 28px rgba(17, 17, 20, .16);
  --kopf-hoehe:    4.5rem;

  /* Beschleunigungskurven, übersetzt aus den GSAP-Angaben der Motion-Datenbank */
  --e-power1: cubic-bezier(.5, 1, .89, 1);      /* power1.out   */
  --e-power2: cubic-bezier(.33, 1, .68, 1);     /* power2.out   */
  --e-expo:   cubic-bezier(.16, 1, .3, 1);      /* expo.out     */
  --e-back:   cubic-bezier(.34, 1.4, .64, 1);   /* back.out(1.4)*/
}

/* ------------------------------------------------------------ Grundlagen */

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

html {
  scroll-behavior: smooth;
  /* Damit Ankersprünge nicht unter der klebenden Kopfzeile landen */
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}

body {
  margin: 0;
  background: var(--farbe-weiss);
  color: var(--farbe-text);
  font-family: var(--schrift-text);
  font-size: clamp(1rem, .96rem + .2vw, 1.09rem);
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;   /* die angeschnittenen Farbflächen ragen bewusst hinaus */
}

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

h1, h2, h3 {
  font-family: var(--schrift-titel);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--farbe-schwarz);
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.4rem, 1.5rem + 4.4vw, 4.4rem); }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--farbe-blau); }
a:hover { color: var(--farbe-schwarz); }

/* Sichtbarer Fokusring auf allem, was bedienbar ist. Nicht wegnehmen –
   ohne ihn ist die Seite mit der Tastatur nicht benutzbar. */
:focus-visible {
  outline: 3px solid var(--farbe-blau);
  outline-offset: 3px;
  border-radius: 2px;
}
.kopf :focus-visible,
.fuss :focus-visible,
.hero :focus-visible { outline-color: var(--farbe-blau-hell); }

/* ------------------------------------------------------------- Hilfsmittel */

.sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--farbe-schwarz);
  color: #fff;
  padding: .8rem 1.2rem;
  text-decoration: none;
}
.sprung:focus { left: .5rem; top: .5rem; }

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

/* Honeypot: für Menschen unsichtbar, für Bots ein ganz normales Feld.
   Bewusst nicht display:none – manche Bots erkennen das und lassen es leer. */
.koeder {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.bahn {
  width: min(100% - 2 * var(--rand-innen), var(--breite));
  margin-inline: auto;
}

.symbol { width: 1.75rem; height: 1.75rem; flex: none; }
.symbol--klein { width: 1.05rem; height: 1.05rem; }

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

/* Grundzustand vor der Einblendung. Ausschließlich unter .js – die Klasse
   setzt ein Inline-Skript ganz oben im <head>. Ohne JavaScript und für jeden
   Crawler ist damit alles von Anfang an sichtbar; nichts versteckt sich
   dauerhaft, nur weil ein Skript nicht geladen hat. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
}
.js [data-reveal].istDa {
  opacity: 1;
  transform: none;
  transition: opacity 500ms var(--e-power2), transform 500ms var(--e-power2);
}

/* Gestaffelte Liste: jedes Kind 60 ms später (Motion-Datenbank: nie mehr als
   ~8 Kinder staffeln, sonst wirken die letzten träge). */
.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(16px) scale(.96);
}
.js [data-stagger].istDa > * {
  opacity: 1;
  transform: none;
  transition: opacity 400ms var(--e-back), transform 400ms var(--e-back);
}
.js [data-stagger].istDa > *:nth-child(1) { transition-delay:   0ms; }
.js [data-stagger].istDa > *:nth-child(2) { transition-delay:  60ms; }
.js [data-stagger].istDa > *:nth-child(3) { transition-delay: 120ms; }
.js [data-stagger].istDa > *:nth-child(4) { transition-delay: 180ms; }
.js [data-stagger].istDa > *:nth-child(5) { transition-delay: 240ms; }
.js [data-stagger].istDa > *:nth-child(6) { transition-delay: 300ms; }
.js [data-stagger].istDa > *:nth-child(7) { transition-delay: 360ms; }
.js [data-stagger].istDa > *:nth-child(8) { transition-delay: 420ms; }

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt sofort den
   Endzustand – kein Aufblenden, kein Verschieben, keine gezeichneten Striche. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal],
  .js [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .js .spruch__text { opacity: 1 !important; transform: none !important; }
  .js .spruch__strich { transform: scaleX(1) !important; }
}

/* --------------------------------------------------------- Testfassungsbanner */

.testbanner {
  background: var(--farbe-rot);
  color: #fff;
  text-align: center;
  padding: .55rem 1rem;
  font-size: .9rem;
}

/* ------------------------------------------------------------- Kopfzeile */

.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(17, 17, 20, .96);
  color: #fff;
  transition: box-shadow 200ms var(--e-power2), background-color 200ms var(--e-power2);
}
@supports (backdrop-filter: blur(6px)) {
  .kopf { background: rgba(17, 17, 20, .82); backdrop-filter: blur(10px); }
}
.kopf.istGescrollt { box-shadow: 0 4px 20px rgba(0, 0, 0, .3); background: rgba(17, 17, 20, .97); }

.kopf__innen {
  width: min(100% - 2 * var(--rand-innen), var(--breite));
  margin-inline: auto;
  min-height: var(--kopf-hoehe);
  display: flex;
  align-items: center;
  gap: .5rem;          /* ab 56em 1rem */
}

.marke {
  display: flex;
  align-items: center;
  gap: .55rem;         /* ab 56em .75rem */
  text-decoration: none;
  color: inherit;
  margin-right: auto;
  padding: .4rem 0;
}
/* Das Logo darf nie schrumpfen. Es sitzt in einem <picture>, und das gab als
   Flex-Element bei Platzmangel nach: Bei 320 px Breite wurde das Bild auf
   23 x 26 px zusammengedrückt, also verzerrt. flex: none am <picture>, und
   max-width: none, damit die allgemeine max-width-Regel für Bilder nicht greift. */
.marke picture { flex: none; }
.marke__logo { width: auto; height: 1.4rem; max-width: none; }

/* Der Untertitel steht bewusst AUCH auf dem Handy in der Kopfzeile.
   Vorher war er dort ausgeblendet – oberhalb der Falz sah man dann nur die
   Wortmarke „VSF" und drei Sprüche, aus denen sich das Gewerbe nicht
   erschließt. Da die Kopfzeile klebt, ist das die einzige Stelle, die auf
   jedem Bildschirm und in jeder Scrollposition sichtbar bleibt. */
.marke__text {
  display: block;
  font-family: var(--schrift-titel);
  font-size: .56rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #A8AEB8;
  border-left: 1px solid #3A3D45;
  padding-left: .6rem;
  /* Auf schmalen Geräten bricht der Text von selbst um; die Breite begrenzen,
     damit er dem Menüschalter und der Anrufschaltfläche nicht den Platz nimmt. */
  max-width: 10rem;
}

/* Nur auf schmalen Bildschirmen: ab 56em steht die volle Nummer in der Navigation. */
.kopf__anruf {
  width: 2.75rem; height: 2.75rem;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid #3A3D45;
  border-radius: var(--radius);
  color: #fff;
  text-decoration: none;
  transition: background-color 200ms var(--e-power2), border-color 200ms var(--e-power2);
}
.kopf__anruf:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
.kopf__anruf .symbol { width: 1.35rem; height: 1.35rem; }

/* Unter 360 px passen Logo, Untertitel und beide Schaltflächen nicht
   nebeneinander. Dann weicht die Anrufschaltfläche: Die Nummer steht direkt
   darunter im Kopfbereich als eigene Schaltfläche und im Menü. Der Untertitel
   bleibt – dass auf dem Handy sofort erkennbar ist, worum es geht, war
   ausdrücklich gewünscht. */
@media (max-width: 22.49em) {
  .kopf__anruf { display: none; }
}

.kopf__schalter {
  --strich: 2px;
  width: 2.75rem; height: 2.75rem;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid #3A3D45;
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
}
.kopf__balken,
.kopf__balken::before,
.kopf__balken::after {
  display: block;
  width: 1.15rem;
  height: var(--strich);
  background: currentColor;
  transition: transform 200ms var(--e-power2), opacity 150ms linear;
}
.kopf__balken { position: relative; }
.kopf__balken::before, .kopf__balken::after {
  content: "";
  position: absolute;
  left: 0;
}
.kopf__balken::before { top: -.4rem; }
.kopf__balken::after  { top:  .4rem; }
[aria-expanded="true"] .kopf__balken { background: transparent; }
[aria-expanded="true"] .kopf__balken::before { transform: translateY(.4rem) rotate(45deg); }
[aria-expanded="true"] .kopf__balken::after  { transform: translateY(-.4rem) rotate(-45deg); }

.nav {
  display: none;
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: #17171C;
  border-top: 1px solid #2C2F36;
  padding: .5rem var(--rand-innen) 1.25rem;
}
.nav.istOffen { display: block; }
.nav__liste { list-style: none; margin: 0 0 .9rem; padding: 0; }
.nav__link {
  display: block;
  padding: .8rem .2rem;
  color: #D7DBE1;
  text-decoration: none;
  border-bottom: 1px solid #24262C;
  font-weight: 500;
}
.nav__link:hover { color: #fff; }
.nav__link.istAktiv { color: #fff; }

/* --------------------------------------------------------------- Knöpfe */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 3rem;             /* Touch-Ziel mindestens 44 px */
  padding: .8rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: var(--farbe-blau);
  color: #fff;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 150ms var(--e-power1), background-color 200ms var(--e-power2),
              box-shadow 200ms var(--e-power2);
}
/* Verschiebung bewusst unter 2 px: das liest sich als Rückmeldung, nicht als
   Bewegung. Nur transform und Schatten – nichts, was das Layout beeinflusst. */
.knopf:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(20, 88, 158, .35);
}
.knopf:active { transform: translateY(0); }

.knopf--hell {
  background: #fff;
  color: var(--farbe-schwarz);
}
.knopf--hell:hover { color: var(--farbe-schwarz); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }

.knopf--rand {
  background: transparent;
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}
.knopf--rand:hover { border-color: #fff; background: rgba(255, 255, 255, .08); box-shadow: none; }

.knopf--klein { min-height: 2.5rem; padding: .5rem 1rem; font-size: .92rem; }

.knopf--telefon {
  background: transparent;
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
  width: 100%;
}
.knopf--telefon:hover { background: rgba(255, 255, 255, .1); border-color: #fff; box-shadow: none; }

/* ----------------------------------------------------------- Kopfbereich */

.hero {
  position: relative;
  background: var(--farbe-schwarz);
  color: #fff;
  overflow: hidden;
  /* Der untere Wert des clamp gilt nur auf schmalen Geräten. Dort zählt jeder
     Pixel: Mit 3.5rem rutschte die Telefon-Schaltfläche auf einem 812 px hohen
     Bildschirm um zwei Pixel unter den Rand. */
  padding: clamp(2.75rem, 10vw, 7rem) 0 clamp(3rem, 8vw, 6rem);
}

/* Angeschnittene Farbflächen statt eines Fotos. Die Schrägen greifen den
   diagonalen Anschnitt der Wortmarke auf. */
.hero__flaeche {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero__flaeche::before,
.hero__flaeche::after {
  content: "";
  position: absolute;
  top: -20%;
  height: 140%;
  width: 45vw;
  transform: skewX(-11deg);
}
.hero__flaeche::before {
  right: -12vw;
  background: linear-gradient(160deg, rgba(20, 88, 158, .30), rgba(20, 88, 158, 0) 65%);
}
.hero__flaeche::after {
  right: -26vw;
  background: linear-gradient(160deg, rgba(44, 122, 63, .22), rgba(44, 122, 63, 0) 60%);
}

.hero__innen {
  position: relative;
  width: min(100% - 2 * var(--rand-innen), var(--breite));
  margin-inline: auto;
}

.hero__auszeichnung {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--schrift-titel);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9AA2AE;
  margin-bottom: 1.5rem;
}
.hero__auszeichnung::before {
  content: "";
  width: 2rem; height: 2px;
  background: var(--farbe-blau-hell);
}

.hero__sprueche {
  margin: 0 0 1.75rem;
  font-family: var(--schrift-titel);
  font-size: clamp(2.3rem, 1.1rem + 6vw, 4.6rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.02em;
  color: #fff;
}

/* Ein Spruch mit seinem farbigen Unterstrich. */
.spruch {
  display: block;
  width: max-content;
  max-width: 100%;
}
.spruch__text {
  display: block;
}
.spruch__strich {
  display: block;
  height: .13em;
  margin: .06em 0 .22em;
  background: var(--strich-farbe);
  transform-origin: left center;
  /* Derselbe schräge Anschnitt wie an den Enden der Wortmarke */
  clip-path: polygon(0 0, 100% 0, calc(100% - .5em) 100%, 0 100%);
}
.spruch--blau  { --strich-farbe: var(--farbe-blau-hell);  }
.spruch--rot   { --strich-farbe: var(--farbe-rot-hell);   }
.spruch--gruen { --strich-farbe: var(--farbe-gruen-hell); }

/* Ausgangszustand der Einblendung – wieder nur mit JavaScript. */
.js .spruch__text {
  opacity: 0;
  transform: translateY(16px);
}
.js .spruch__strich { transform: scaleX(0); }

.js .spruch.istDa .spruch__text {
  opacity: 1;
  transform: none;
  transition: opacity 450ms var(--e-expo), transform 450ms var(--e-expo);
}
.js .spruch.istDa .spruch__strich {
  transform: scaleX(1);
  /* Der Strich zeichnet sich erst, wenn die Zeile fast steht */
  transition: transform 500ms var(--e-power2) 260ms;
}

.hero__vorspann {
  max-width: 34rem;
  font-size: clamp(1.05rem, .98rem + .4vw, 1.25rem);
  color: #C6CBD3;
  margin-bottom: 1.5rem;
}

.hero__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* Die vier Leistungsbereiche als Marken – das Konkrete gleich im ersten Bild.
   Die Spaltenzahl wächst mit der Breite. Auf dem schmalsten Gerät bewusst nur
   EINE Spalte: „Veranstaltungsservice" ist ein einziges Wort von rund 140 px,
   und eine Rasterzelle schrumpft nicht unter die Breite ihres längsten Wortes.
   Zwei Spalten hätten die rechte Marke deshalb abgeschnitten – sichtbar wurde
   das nur, weil body overflow-x: hidden den Balken verbirgt. */
.hero__bereiche {
  display: grid;
  grid-template-columns: 1fr;
  gap: .4rem;
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
}
.hero__bereich {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  padding: .35rem .7rem;
  border: 1px solid #33363E;
  border-left: 3px solid var(--bereich-farbe);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .04);
  font-size: .84rem;
  font-weight: 500;
  color: #D7DBE1;
}
.hero__bereich .symbol { color: var(--bereich-farbe); }
.hero__bereich--blau  { --bereich-farbe: var(--farbe-blau-hell);  }
.hero__bereich--rot   { --bereich-farbe: var(--farbe-rot-hell);   }
.hero__bereich--gruen { --bereich-farbe: var(--farbe-gruen-hell); }

/* ------------------------------------------------------------ Abschnitte */

.abschnitt { padding: var(--abstand) 0; }
.abschnitt--grau { background: var(--farbe-flaeche); }
.abschnitt--dunkel { background: var(--farbe-schwarz); color: #C6CBD3; }
.abschnitt--dunkel h2 { color: #fff; }

.abschnitt__kopf {
  max-width: var(--breite-schmal);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.abschnitt__kopf--mitte { margin-inline: auto; text-align: center; }

.auszeichnung {
  display: block;
  font-family: var(--schrift-titel);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--farbe-blau);
  margin-bottom: .7rem;
}
.abschnitt--dunkel .auszeichnung { color: var(--farbe-blau-hell); }

.abschnitt__text { color: var(--farbe-text-hell); font-size: 1.08rem; }
.abschnitt--dunkel .abschnitt__text { color: #A8AEB8; }

/* ----------------------------------------------------------- Leistungen */

.leistungen {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

.leistung {
  position: relative;
  background: #fff;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem 1.6rem;
  /* Farbkante oben – greift die Zuordnung Spruch → Farbe wieder auf */
  border-top: 4px solid var(--leistung-farbe, var(--farbe-blau));
  transition: transform 250ms var(--e-power2), box-shadow 250ms var(--e-power2),
              border-color 250ms var(--e-power2);
}
/* Der Schatten nimmt beim Überfahren die Farbe der jeweiligen Karte an –
   dieselbe Zuordnung wie Farbkante, Symbol und Aufzählungszeichen. Deshalb
   liegt neben --leistung-farbe auch der Farbwert als RGB-Tripel bereit:
   rgba() braucht Zahlen, eine fertige Farbe lässt sich darin nicht
   nachträglich durchsichtig machen. */
.leistung--blau  { --leistung-farbe: var(--farbe-blau);  --leistung-rgb: 20, 88, 158; }
.leistung--rot   { --leistung-farbe: var(--farbe-rot);   --leistung-rgb: 192, 39, 45; }
.leistung--gruen { --leistung-farbe: var(--farbe-gruen); --leistung-rgb: 44, 122, 63; }

/* Die drei Seitenkanten einzeln, nicht über die Kurzschreibweise border-color:
   die würde auch die kräftige Oberkante übermalen. */
.leistung:hover {
  transform: translateY(-4px);
  border-right-color:  rgba(var(--leistung-rgb), .35);
  border-bottom-color: rgba(var(--leistung-rgb), .35);
  border-left-color:   rgba(var(--leistung-rgb), .35);
  box-shadow: 0 12px 28px rgba(var(--leistung-rgb), .22);
}

.leistung__symbol {
  width: 3rem; height: 3rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--leistung-farbe) 10%, transparent);
  color: var(--leistung-farbe);
  margin-bottom: 1rem;
}
/* Rückfall für Browser ohne color-mix */
@supports not (background: color-mix(in srgb, red 10%, white)) {
  .leistung__symbol { background: var(--farbe-flaeche); }
}

.leistung__titel { margin-bottom: .4rem; }
.leistung__text { color: var(--farbe-text-hell); font-size: .97rem; margin-bottom: 1rem; }

.leistung__punkte { list-style: none; margin: 0; padding: 0; }
.leistung__punkte li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .5rem;
  font-size: .95rem;
  line-height: 1.5;
}
.leistung__punkte li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: .6rem; height: .6rem;
  background: var(--leistung-farbe);
  clip-path: polygon(0 0, 100% 0, 65% 100%, 0 100%);
}

/* ------------------------------------------------------------ Bildband */

/* Zwei Motive über die volle Breite, ohne Innenabstand – der Übergang vom
   hellen Leistungsteil zum dunklen Werteband. Die Bildhöhe wird über
   aspect-ratio gesetzt statt über feste Pixel: So kippt der Band nie um,
   und weil width/height am <img> stehen, springt beim Laden nichts. */
.bildband {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--farbe-schwarz);
}
.bildband__teil {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  /* clip statt hidden. Beide schneiden den gezoomten Bildrand ab, aber
     overflow: hidden macht das Element zu einem Scroll-Container – und
     animation-timeline: view() bezieht sich immer auf den NÄCHSTEN
     Scroll-Container. Mit hidden war das diese Kachel, die nie scrollt:
     Der Zoom stand still. clip schneidet ab, ohne Scroll-Container zu
     werden, und die Zeitleiste greift auf die Seite durch.
     hidden bleibt als Rückfall davor stehen. Browser ohne clip kennen
     auch keine scrollgekoppelten Animationen und bekommen den
     Ersatz-Zoom, den das nicht betrifft. */
  overflow: hidden;
  overflow: clip;
}
.bildband__teil picture,
.bildband__teil img {
  width: 100%;
  height: 100%;
  display: block;
}
.bildband__teil img { object-fit: cover; }

/* Leichtes Hineinzoomen beim Scrollen.
   Vorbild ist das Muster „Parallax Scroll · Subtle" aus der Motion-Datenbank:
   an die Scrollposition gekoppelt, linear, kleine Auslenkung, der Rahmen
   schneidet per overflow: clip ab (nicht hidden – siehe oben). Statt verschoben wird hier skaliert –
   von 1 beim Hereinkommen bis 1.25 beim Hinausscrollen. Das ist bewusst
   kräftiger, als das Muster mit seiner kleinen Auslenkung vorsieht – so
   gewünscht, weil 1.12 beim normalen Scrollen kaum wahrnehmbar war. Nie unter 1, sonst
   würden die Bildränder sichtbar. Nur das Bild bewegt sich, die Unterschrift
   steht still.
   Ohne JavaScript: Die scrollgekoppelte Variante ist reines CSS und läuft
   trotzdem; die Ersatzvariante darunter hängt an .js und entfällt dann. */
@supports (animation-timeline: view()) {
  .bildband__teil img {
    animation: bild-zoom linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
}
@keyframes bild-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.25); }
}

/* Browser ohne scrollgekoppelte Animationen bekommen stattdessen einen
   einmaligen, langsamen Zoom, sobald der Band ins Bild kommt. Die Klasse
   setzt derselbe IntersectionObserver wie bei den übrigen Einblendungen. */
@supports not (animation-timeline: view()) {
  .js .bildband__teil img { transition: transform 9s var(--e-power2); }
  .js .bildband.istDa .bildband__teil img { transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  /* Die allgemeine Regel weiter oben verkürzt nur die Dauer. Eine an die
     Scrollposition gekoppelte Animation hat aber gar keine Dauer – sie liefe
     trotzdem weiter. Deshalb hier ausdrücklich abschalten. */
  .bildband__teil img { animation: none !important; transform: none !important; }
}

/* Der Verlauf sorgt dafür, dass die Unterschrift auch auf einem hellen
   Bildbereich lesbar bleibt – bei einem Foto lässt sich die Hintergrundfarbe
   an dieser Stelle nun einmal nicht vorhersagen. */
.bildband__text {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.25rem 1.1rem;
  background: linear-gradient(to top, rgba(17, 17, 20, .88), rgba(17, 17, 20, 0));
  color: #fff;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: clamp(.95rem, .9rem + .3vw, 1.15rem);
  line-height: 1.3;
}

/* --------------------------------------------------------------- Werte */

.werte {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
}
.wert { padding-top: 1.25rem; border-top: 4px solid var(--wert-farbe); }
.wert--blau  { --wert-farbe: var(--farbe-blau-hell);  }
.wert--rot   { --wert-farbe: var(--farbe-rot-hell);   }
.wert--gruen { --wert-farbe: var(--farbe-gruen-hell); }
.wert__titel { color: #fff; margin-bottom: .5rem; }
.wert__text { color: #A8AEB8; font-size: 1rem; margin: 0; }

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

.ueber {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
.ueber__punkte { list-style: none; margin: 0; padding: 0; }
.ueber__punkte li {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--farbe-rand);
  font-size: 1rem;
}
.ueber__punkte li:first-child { padding-top: 0; }
.ueber__punkte li:last-child { border-bottom: 0; }
.ueber__punkte .symbol { color: var(--farbe-gruen); width: 1.35rem; height: 1.35rem; margin-top: .15rem; }

.karte-person {
  background: var(--farbe-schwarz);
  color: #fff;
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
}
.karte-person__name {
  font-family: var(--schrift-titel);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: .15rem;
}
.karte-person__rolle { color: #9AA2AE; font-size: .92rem; margin-bottom: 1.25rem; }
.karte-person__zeile {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem 0;
  border-top: 1px solid #2C2F36;
}
.karte-person__zeile a { color: #fff; text-decoration: none; word-break: break-word; }
.karte-person__zeile a:hover { color: var(--farbe-blau-hell); text-decoration: underline; }
.karte-person__zeile .symbol { color: var(--farbe-blau-hell); width: 1.2rem; height: 1.2rem; }

/* -------------------------------------------------------- Einsatzgebiet */

.orte {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.orte li {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: #fff;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  padding: .5rem .85rem;
  font-size: .95rem;
  transition: transform 200ms var(--e-power2), border-color 200ms var(--e-power2);
}
.orte li:hover { transform: translateY(-2px); border-color: var(--farbe-blau); }
.orte .symbol { width: .95rem; height: .95rem; color: var(--farbe-blau); }

/* ------------------------------------------------------------- Formular */

.kontakt {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}

.formular { display: grid; gap: 1.1rem; }

.feld { display: grid; gap: .35rem; }
.feld--halb { grid-column: span 1; }

.feld > label {
  font-weight: 700;
  font-size: .93rem;
  font-family: var(--schrift-titel);
}
.feld__pflicht { color: var(--farbe-rot); }
.feld__hinweis { font-size: .85rem; color: var(--farbe-text-hell); font-weight: 400; }

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld select,
.feld textarea {
  width: 100%;
  min-height: 3rem;
  padding: .7rem .85rem;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  background: #fff;
  color: var(--farbe-text);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 180ms var(--e-power2), box-shadow 180ms var(--e-power2);
}
.feld textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  border-color: var(--farbe-blau);
  box-shadow: 0 0 0 3px rgba(20, 88, 158, .15);
}
.feld input[aria-invalid="true"],
.feld textarea[aria-invalid="true"],
.feld select[aria-invalid="true"] { border-color: var(--farbe-rot); }

.feld--zustimmung {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .7rem;
}
/* 1.55rem ≈ 25 px: knapp über der Mindestgröße für Bedienelemente (24 × 24 px
   nach WCAG 2.5.8). Mit 1.3rem waren es 21 px – auf dem Handy zu fummelig. */
.feld--zustimmung input[type="checkbox"] {
  width: 1.55rem; height: 1.55rem;
  margin-top: .1rem;
  accent-color: var(--farbe-blau);
  flex: none;
}
.feld--zustimmung label { font-weight: 400; font-family: var(--schrift-text); font-size: .93rem; }

.feld__paar { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }

/* Meldungen */
.meldung {
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  border-left: 4px solid;
  margin-bottom: 1.5rem;
}
.meldung--gut    { background: #EAF6EC; border-color: var(--farbe-gruen); color: #1E5B2C; }
.meldung--fehler { background: #FBEAEB; border-color: var(--farbe-rot);   color: #8E1D22; }
.meldung--hinweis { background: var(--farbe-flaeche-2); border-color: var(--farbe-blau); }
.meldung h2 { font-size: 1.15rem; margin-bottom: .35rem; }
.meldung ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.meldung p:last-child { margin-bottom: 0; }

.kontakt__seite { display: grid; gap: 1.25rem; }

.kontakt__block {
  background: var(--farbe-flaeche);
  border-radius: var(--radius);
  padding: 1.5rem 1.35rem;
}
.kontakt__block h3 { margin-bottom: .6rem; }
.kontakt__block p { font-size: .96rem; color: var(--farbe-text-hell); }

.kontakt__direkt { display: grid; gap: .6rem; margin-top: 1rem; }
.kontakt__direkt a {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--farbe-schwarz);
  font-size: 1.05rem;
  word-break: break-word;
}
.kontakt__direkt a:hover { color: var(--farbe-blau); }
.kontakt__direkt .symbol { color: var(--farbe-blau); width: 1.25rem; height: 1.25rem; }

/* ------------------------------------------------------------- Fußzeile */

.fuss {
  background: var(--farbe-schwarz);
  color: #A8AEB8;
  padding: clamp(2.5rem, 6vw, 4rem) 0 0;
  font-size: .95rem;
}
.fuss__innen {
  width: min(100% - 2 * var(--rand-innen), var(--breite));
  margin-inline: auto;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  padding-bottom: 2.5rem;
}
.fuss__logo { height: 2.1rem; width: auto; margin-bottom: .9rem; }
.fuss__claim { font-family: var(--schrift-titel); font-weight: 700; color: #fff; }
.fuss__titel {
  font-family: var(--schrift-titel);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8A919B;   /* 5.9:1 auf #111114 – #6E757F lag mit 4.05:1 unter AA */
  margin: 0 0 .8rem;
}
.fuss__kontakt { font-style: normal; line-height: 1.9; }
.fuss a { color: #D7DBE1; text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss__liste { list-style: none; margin: 0; padding: 0; line-height: 2; }
.fuss__zeile {
  border-top: 1px solid #24262C;
  padding: 1.25rem 0;
  font-size: .85rem;
  color: #8A919B;   /* 5.9:1 auf #111114 – #6E757F lag mit 4.05:1 unter AA */
}
/* Urheberzeile links, Nachweis rechts. Reicht die Breite nicht, rutscht
   der Nachweis darunter – flex-wrap statt fester Umbruchstelle, damit es
   auch bei längeren Firmennamen nie über den Rand ragt. */
.fuss__zeile-innen {
  width: min(100% - 2 * var(--rand-innen), var(--breite));
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .35rem 1.5rem;
}
.fuss__zeile p { margin: 0; }
/* Der Link steht in hellerem Grau als die Zeile, damit er als Link
   erkennbar ist, und unterstreicht sich beim Überfahren (.fuss a:hover). */
.fuss__erstellt a { color: #D7DBE1; }

/* ----------------------------------------------------- Rechtstexte-Seiten */

.rechtstext { padding: var(--abstand) 0; }
.rechtstext .bahn { max-width: var(--breite-schmal); }
.rechtstext h2 { font-size: 1.4rem; margin-top: 2.25rem; }
.rechtstext h3 { font-size: 1.1rem; margin-top: 1.5rem; }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext li { margin-bottom: .4rem; }
.rechtstext dl { margin: 0 0 1.1em; }
.rechtstext dt { font-weight: 700; margin-top: .8rem; }
.rechtstext dd { margin: 0 0 .3rem; }

/* --------------------------------------------------------- Fehlerseite */

.fehler { text-align: center; padding: clamp(4rem, 12vw, 8rem) 0; }
.fehler__zahl {
  font-family: var(--schrift-titel);
  font-size: clamp(4rem, 15vw, 8rem);
  font-weight: 700;
  line-height: 1;
  color: var(--farbe-rand);
}

/* ============================================================ Ab 640 px */

@media (min-width: 30em) {
  /* Ab rund 480 px ist eine Zelle breit genug für „Veranstaltungsservice". */
  .hero__bereiche { grid-template-columns: 1fr 1fr; gap: .5rem; }
}

@media (min-width: 40em) {
  /* Nebeneinander wird jedes Bild halb so breit – ohne flacheres Format
     stünde sonst ein über 900 px hoher Block mitten auf der Seite. */
  .bildband { grid-template-columns: 1fr 1fr; }
  .bildband__teil { aspect-ratio: 16 / 10; }

  .feld__paar { grid-template-columns: 1fr 1fr; }
  .leistungen { grid-template-columns: repeat(2, 1fr); }
  .werte { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .fuss__innen { grid-template-columns: 1.6fr 1fr 1fr; }
}

/* ============================================================ Ab 900 px */

@media (min-width: 56em) {
  /* Auf breiten Bildschirmen noch flacher, damit der Band ein Übergang
     bleibt und nicht selbst zum Abschnitt wird. */
  .bildband__teil { aspect-ratio: 2 / 1; }
  .bildband__text { padding: 3rem 2rem 1.4rem; }

  /* Auf dem Handy ist der Untertitel klein gesetzt, damit er neben Logo und
     Menüschalter überhaupt Platz hat. Ab hier ist Raum für die volle Größe. */
  .kopf__innen { gap: 1rem; }
  .marke { gap: .75rem; }
  .marke__logo { height: 1.9rem; }
  .marke__text { font-size: .68rem; letter-spacing: .04em; padding-left: .75rem; }

  .kopf__anruf { display: none; }   /* hier steht die volle Nummer in der Navigation */
  .kopf__schalter { display: none; }

  /* Ab Tabletbreite ist Platz für eine Reihe – die Marken so breit wie ihr Text. */
  .hero__bereiche {
    display: flex;
    flex-wrap: wrap;
  }

  .nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    position: static;
    background: none;
    border: 0;
    padding: 0;
  }
  .nav__liste { display: flex; gap: .35rem; margin: 0; }
  .nav__link {
    position: relative;
    /* .62rem senkrecht bringt die anklickbare Fläche auf 44 px Höhe. */
    padding: .62rem .7rem;
    border: 0;
    font-size: .95rem;
  }
  /* Unterstrich wächst aus der Mitte – dieselbe Idee wie im Kopfbereich,
     nur klein. Nur transform, damit nichts umbricht. */
  .nav__link::after {
    content: "";
    position: absolute;
    left: .7rem; right: .7rem;
    bottom: .25rem;
    height: 2px;
    background: var(--farbe-blau-hell);
    transform: scaleX(0);
    transition: transform 200ms var(--e-power2);
  }
  .nav__link:hover::after,
  .nav__link.istAktiv::after { transform: scaleX(1); }

  .knopf--telefon { width: auto; }

  .leistungen { grid-template-columns: repeat(4, 1fr); }
  .ueber { grid-template-columns: 1.35fr 1fr; }
  .kontakt { grid-template-columns: 1.3fr 1fr; }
  .hero__vorspann { font-size: 1.25rem; }
}

/* =========================================================== Ab 1200 px */

@media (min-width: 75em) {
  .abschnitt__kopf { max-width: 42rem; }
}

/* ===================================================== Druck (Rechtstexte) */

@media print {
  .kopf, .fuss, .testbanner, .sprung, .hero__flaeche { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
}