/* ==========================================================================
   Design-Tokens – Farben, Schrift und Abstände zentral hier anpassen
   ========================================================================== */
:root {
  /* ZAP-Farben wie im Mail-Design (Performance Marketing/mail-design/zap-mail-kern.js).
     Orange nur als Akzent, nie als große Fläche mit weißer Schrift (Kontrast 3,9:1, nötig sind 4,5:1). */
  --c-accent: #e24e1f;               /* ZAP-Orange (wie im Logo): Punktraster, Markierungen */
  --c-link: #e24e1f;                 /* Unterstreichung der Text-Links */
  --c-funke: #f4f7ff;                /* Lichtbogen: fast weißer Kern */
  --c-funke-schein: #4f78ff;         /* Lichtbogen: bläulicher Schein (hält den Bogen auf Weiß sichtbar) */
  --c-text: #0e0e0e;                 /* Tinte: Text */
  --c-bg: #fff;
  --c-paper: #faf7f1;                /* Flächen: helle Abschnitte, heller Kasten, Fußzeile */
  --c-line: #e4dfd6;                 /* Trennlinien, Rahmen */
  --c-dark: #0e0e0e;                 /* dunkler Kasten */
  --c-muted: #6b6b6b;                /* Nebentext */
  --c-fehler: #b3261e;               /* Fehlermeldungen in Formularen */

  --font: Helvetica, Arial, sans-serif;
  --font-mark: Georgia, "Times New Roman", serif;   /* Wortmarke „ZAP Prüfstelle“ */

  --pad-x: 20px;                     /* Seitenrand */
  --max-w: 1440px;                   /* größte Inhaltsbreite samt Seitenrand, mittig (Wunsch Firas 02.11., wie eppowergrit.com) */
  --gap: 24px;                       /* Spaltenabstand */
  --module-gap: 48px;                /* Abstand zwischen Abschnitten */
  --header-h: 64px;
  --fs-text: 17px;                   /* Fließtext (Wunsch Firas 02.11.: größer, vorher 16 px) */
  --lh-text: 26px;
}

@media (min-width: 768px) {
  :root { --pad-x: 32px; }
}

@media (min-width: 992px) {
  :root { --module-gap: 104px; --header-h: 96px; --fs-text: 19px; --lh-text: 30px; }
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.5;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, figure, address { margin: 0; }
address { font-style: normal; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; }

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

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

.skip-link {
  position: absolute; left: var(--pad-x); top: -100px; z-index: 100;
  padding: 8px 12px; background: var(--c-text); color: #fff; font-size: 16px;
}
.skip-link:focus { top: 8px; }

/* Alle Abschnitte teilen dieselbe linke und rechte Kante; auf breiten Bildschirmen mittig */
.container { max-width: var(--max-w); margin-inline: auto; padding: 0 var(--pad-x); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}
.grid > * { grid-column: 1 / -1; min-width: 0; }

.icon { width: 20px; height: 20px; flex: 0 0 auto; }
.icon--small { width: 16px; height: 16px; }

/* Jedes Sprungziel, jeder Tab-Fokus und jedes scrollIntoView endet unter der festen Kopfzeile, nicht dahinter */
html { scroll-padding-top: calc(var(--header-h) + 16px); }

/* ==========================================================================
   Typografie
   ========================================================================== */
.display-xxl {
  font-size: clamp(40px, 29.44px + 2.817vw, 70px);
  line-height: 1.1;
  font-weight: 700;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
h1 { text-wrap: balance; }
h2, h3 { text-wrap: pretty; }   /* keine Einzelwörter in der letzten Zeile, Gedankenstrich bleibt am Zeilenende */
@media (min-width: 768px) {
  .display-xxl, .legal__section h2 { hyphens: manual; -webkit-hyphens: manual; }
}

.display-l {
  font-size: clamp(23px, 19.83px + .845vw, 32px);
  line-height: 1.2;
  font-weight: 700;
}

.richtext p,
.stage__text p,
.teaser p {
  font-size: var(--fs-text);
  line-height: var(--lh-text);
}

.richtext h2 + p { margin-top: 24px; }
.richtext p + p { margin-top: 16px; }

/* Aufzählung mit Punkten; jeder Punkt ist ein eigener <p>, damit der Editor ihn bearbeiten kann */
.richtext .liste { margin: 16px 0 0; padding-left: 20px; font-size: var(--fs-text); line-height: var(--lh-text); }
.richtext .liste li + li { margin-top: 8px; }
.richtext .liste li::marker { color: var(--c-accent); }
.richtext .liste + p { margin-top: 16px; }

/* Textlink mit Unterstreichung, die beim Überfahren dicker wird */
.txt-btn {
  display: inline-flex;
  align-items: center;
  font-size: 17px;
  line-height: 26px;
  font-weight: 700;
  color: var(--c-text);
  text-decoration: none;
  vertical-align: top;
  transition: transform .2s;
}
.txt-btn span {
  padding: 5px 0 3px;
  background: linear-gradient(var(--c-link), var(--c-link)) 0 100% / 100% 1px no-repeat;
  transition: background-size .2s;
}
.richtext .txt-btn span { padding: 0; }
.txt-btn .icon--after { margin-left: 6px; transition: transform .2s; }
.txt-btn:hover { transform: translateY(-2px); }
.txt-btn:hover span { background-size: 100% 3px; }
.txt-btn:hover .icon--after { transform: scale(1.15); }

@media (min-width: 992px) {
  .txt-btn--large { font-size: 19px; line-height: 28px; }
}

.link {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .2s;
}
.link:hover { background-size: 100% 2px; }

/* ==========================================================================
   Bilder
   ========================================================================== */
.media { position: relative; overflow: hidden; background: #e2e1dd; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--plain { background: none; overflow: visible; }
.media--plain img { height: auto; object-fit: contain; }
.media--teaser { aspect-ratio: 14 / 9; }
/* Pflicht-Hinweis für KI-erzeugte oder KI-bearbeitete Bilder (Regel Firas): klein unten rechts, als CSS, damit der
   Bearbeitungsmodus keine neuen Text-Elemente zählt */
.media--ki::after { content: 'Mit KI generiert'; position: absolute; right: 8px; bottom: 6px; padding: 2px 6px; border-radius: 3px; background: rgba(14, 14, 14, .55); color: #fff; font-size: 11px; line-height: 1.4; pointer-events: none; }
.media--quer { aspect-ratio: 4 / 3; }
/* Herausgezoomt (Bearbeitungsmodus, Zoom unter 100 %): Das Seitenverhältnis am Bild bestimmt die Rahmenhöhe */
.media:has(> img[style*="aspect-ratio"]) { aspect-ratio: auto; }
.media > img[style*="aspect-ratio"] { height: auto; }

/* ==========================================================================
   Kopfzeile
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-bg);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

/* Logo: echtes ZAP-Logo (Schild, ohne ®) + Wortmarke; Seitenverhältnis des Logos 168,6 : 140,17 */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  text-decoration: none;
}
.brand__logo {
  flex: 0 0 auto;
  width: 48px;
  height: 40px;
  background: url("../img/zap-logo.svg") center / contain no-repeat;
}
.brand__name { font-family: var(--font-mark); font-size: 19px; line-height: 1.2; color: var(--c-text); }

@media (min-width: 992px) {
  .brand__logo { width: 63px; height: 52px; }
  .brand__name { font-size: 23px; }
}

.main-nav { display: none; }

.main-nav ul {
  display: flex;
  margin: 0 -2px 0 0;
  padding: 0;
  list-style: none;
}
.main-nav li { padding: 0 2px; }

.main-nav a {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--header-h);
  padding: 0 16px;
  font-size: 17px;
  text-decoration: none;
}
.main-nav a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--c-accent);
  opacity: 0;
}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after { opacity: 1; }

.main-nav .icon { margin-left: 2px; }

/* Telefon in der Kopfzeile (statt Sprachauswahl, es gibt nur Deutsch): bis 1199 px nur das Symbol, ab 1200 px mit Nummer */
.main-nav__tel { margin-left: 8px; }
.main-nav__tel a { gap: 8px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.main-nav__tel .icon { margin: 0; color: var(--c-accent); }
.main-nav__tel span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
@media (min-width: 1200px) {
  .main-nav__tel span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* Mobiles Menü: Anruf-Zeile unten */
.mobile-menu .mobile-menu__tel a { margin-top: 16px; border-bottom: 0; font-variant-numeric: tabular-nums; }
.mobile-menu .mobile-menu__tel a::before {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 12px; border-radius: 50%; background: var(--c-accent); vertical-align: 2px;
}

.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-text);
  cursor: pointer;
}
.burger__icon { position: relative; width: 26px; height: 18px; }
.burger__icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform .2s, opacity .2s;
}
.burger__icon span:nth-child(1) { top: 0; }
.burger__icon span:nth-child(2) { top: 8px; }
.burger__icon span:nth-child(3) { top: 16px; }
.burger[aria-expanded="true"] .burger__icon span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__icon span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__icon span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));   /* iOS: ohne Adressleiste */
  overflow-y: auto;
  background: var(--c-bg);
}
.mobile-menu ul { margin: 0; padding-top: 16px; padding-bottom: 32px; list-style: none; }
.mobile-menu a {
  position: relative;
  display: block;
  padding: 14px 0 14px 16px;
  border-bottom: 1px solid var(--c-line);
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
}
.mobile-menu a:hover::after,
.mobile-menu a[aria-current="page"]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: var(--c-accent);
}

@media (min-width: 992px) {
  .main-nav { display: block; }
  .burger, .mobile-menu { display: none; }
}

/* ==========================================================================
   Abschnitte
   ========================================================================== */
.module { margin-top: var(--module-gap); }

.module--grey {
  padding: var(--module-gap) 0;
  background: var(--c-paper);
}

/* ---------- Funkenraster (wird per JavaScript gezeichnet, zap-funke.js) ---------- */
.lines {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  color: var(--c-accent);
}
/* Zeichenfläche liegt über dem Rahmen und bestimmt seine Größe nicht mit (sonst wächst das Raster endlos) */
.lines canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* ---------- 1 · Bühne ---------- */
.stage { margin-top: 0; padding-top: var(--module-gap); }
.stage .grid { align-items: center; }

.stage__text h1 + p { margin-top: 24px; }
.stage__text .txt-btn { margin-top: 24px; }

.stage__visual { position: relative; margin-top: 20px; padding-bottom: 6px; }
.stage__lines { top: 0; left: 0; width: 100%; aspect-ratio: 688 / 456; }
.stage__media {
  z-index: 1;
  width: 80%;
  margin: 70px 0 0 auto;
  aspect-ratio: 4 / 3;
}

@media (min-width: 576px) {
  .stage__text { grid-column: 1 / 6; }
  .stage__visual { grid-column: 6 / 13; margin-top: 0; }
  .stage__lines { width: 86%; }
  .stage__media { width: 70%; margin-top: 48px; }
}

@media (min-width: 992px) {
  .stage__text { grid-column: 1 / 5; max-width: 440px; }
  .stage__visual { grid-column: 5 / 13; padding-bottom: 7px; }
  .stage__lines { width: 72%; aspect-ratio: 655 / 434; }
  .stage__media { width: 60%; margin-top: 65px; }
}

/* ---------- 2 · Einleitung + Kacheln ---------- */
.intro__text { margin-top: 16px; }

@media (min-width: 768px) {
  .intro__title { grid-column: 1 / 7; }
  .intro__text { grid-column: 7 / 13; margin-top: 0; }
}

.teasers { margin-top: 48px; }
.module--grey .teasers { padding-bottom: 48px; }
.teasers-module .teasers { margin-top: 0; }

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

.teaser__link { display: block; height: 100%; color: inherit; text-decoration: none; }
.teaser .media { transition: transform .2s; }
.teaser__body { margin-top: 16px; }

.teaser__title {
  display: inline-flex;
  margin-bottom: 8px;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 700;
  transition: transform .2s;
}
.teaser__title span {
  padding: 5px 0 3px;
  background: linear-gradient(var(--c-link), var(--c-link)) 0 100% / 100% 1px no-repeat;
  transition: background-size .2s;
}
.teaser__title + p { margin-top: 16px; }

/* Kacheln ohne Bild (Referenzseite, Abläufe je Branche; Bilder am 02.11. auf Wunsch Firas entfernt): Linie mit orangem Strich wie „6 Gründe“ */
.teasers__list--text .teaser { position: relative; padding-top: 24px; border-top: 1px solid var(--c-line); }
.teasers__list--text .teaser::before { content: ""; position: absolute; top: -2px; left: 0; width: 40px; height: 3px; background: var(--c-accent); }
.teasers__list--text .teaser__body { margin-top: 0; }

.teaser__link:hover .media { transform: translateY(-4px); }
.teaser__link:hover .teaser__title { transform: translateY(-2px); }
.teaser__link:hover .teaser__title span { background-size: 100% 3px; }

@media (min-width: 768px) {
  .teasers__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
}

@media (min-width: 992px) {
  /* volle Breite: Bilder beginnen auf derselben Linie wie die Überschrift darüber (Wunsch Firas 02.11.) */
  .teaser__body { margin-top: 24px; }
}

/* ---------- 3–6 · Text + Bild ---------- */
.text-image .grid { align-items: center; }
.text-image__media { aspect-ratio: 3 / 2; }
.text-image__media,
.text-image__visual { order: -1; }
.text-image__text { margin-top: 32px; }

.text-image__visual { position: relative; padding-top: 29px; }
.text-image__visual .text-image__media { position: relative; z-index: 1; }
/* Erste Punktspalte 6 px links neben dem Bild (bei left: -12px lag sie genau auf der Bildkante, halb verdeckt) */
.text-image__lines { top: 0; left: -18px; width: calc(100% + 24px); height: 197px; }

@media (min-width: 768px) {
  .text-image__text { margin-top: 0; }
  .text-image--left .text-image__media,
  .text-image--left .text-image__visual { grid-column: 1 / 6; grid-row: 1; }
  .text-image--left .text-image__text { grid-column: 7 / 13; grid-row: 1; }
  .text-image--right .text-image__text { grid-column: 1 / 7; grid-row: 1; }
  .text-image--right .text-image__media,
  .text-image--right .text-image__visual { grid-column: 8 / 13; grid-row: 1; }

  /* Variante mit Funkenraster: Bild rückt Richtung Text, Raster schaut oben, unten und außen hervor */
  .text-image__visual { padding: 52px 0; }
  .text-image__lines { top: 0; bottom: 0; left: auto; width: 83.5%; height: auto; }
  .text-image--right .text-image__lines { right: 0; }
  .text-image--left .text-image__lines { left: 0; }
  .text-image--right .text-image__visual .text-image__media { transform: translateX(-52px); }
  .text-image--left .text-image__visual .text-image__media { transform: translateX(52px); }
}

/* ---------- 7 + 9 · Text-Kästen ---------- */
.text-box__content { background: var(--c-paper); }
.text-box--dark .text-box__content { background: var(--c-dark); color: #fff; }
.text-box--dark .txt-btn { color: #fff; }

.text-box__main { padding: 24px 16px; }
.text-box__aside { padding: 0 16px 24px; }
.text-box__aside-inner {
  display: flex;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
}
.text-box--dark .text-box__aside-inner { border-color: rgba(255, 255, 255, .25); }

.text-box__icon { flex: 0 0 40px; }
.text-box__icon:empty { display: none; }
.text-box__aside-text { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; font-size: var(--fs-text); line-height: var(--lh-text); }
.text-box__aside-text p + p { margin-top: 16px; }
.text-box__aside-text .media { max-width: 285px; margin-left: auto; }
.text-box__aside-text .media + p { margin-top: 20px; }
.media--portrait { aspect-ratio: 4 / 5; }

@media (min-width: 992px) {
  .text-box__content { display: flex; }
  .text-box__main { flex: 0 0 70%; padding: 64px; }
  .text-box__aside { flex: 0 1 auto; min-width: 0; padding: 64px 48px 64px 0; }
  .text-box__aside-inner { padding: 0 0 0 24px; border-top: 0; border-left: 1px solid var(--c-line); }
  .text-box__icon:empty { display: block; }
  .text-box__aside-text { min-width: 0; }
  .text-box__aside-text .media { width: 285px; max-width: 100%; margin-left: 0; }
}

/* ---------- Karriere · Video im Bildrahmen ---------- */
.media--video { aspect-ratio: 16 / 9; background: var(--c-dark); }
.media--video video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Karriere · nummerierte Punkte (Benefits, Bewerbungsschritte) ---------- */
.points {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px var(--gap);
  counter-reset: punkt;
}
.points > li { position: relative; padding-top: 20px; border-top: 1px solid var(--c-line); counter-increment: punkt; }
/* kurzer orangefarbener Strich auf der Linie, Nummer in Nebentext-Grau (Orange ist für kleine Schrift zu kontrastarm) */
.points > li::after { content: ""; position: absolute; top: -2px; left: 0; width: 40px; height: 3px; background: var(--c-accent); }
.points > li::before {
  content: counter(punkt, decimal-leading-zero);
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.points h3 { font-size: 21px; line-height: 1.25; font-weight: 700; }
/* Blocksatz: alle Zeilen enden bündig (Wunsch Firas 02.11.), Silbentrennung gegen große Wortlücken */
.points h3 + p { margin-top: 10px; font-size: var(--fs-text); line-height: var(--lh-text); text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.points__cta { margin-top: 40px; }

@media (min-width: 768px) {
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  /* feste Textbreite: in jeder Spalte endet der Text an derselben Stelle (Wunsch Firas 02.11., vorher 70 % der Spalte) */
  .points h3 + p { max-width: 22.5em; }
}

@media (min-width: 992px) {
  .points { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 56px; }
  .points h3 { font-size: 24px; }
}

/* ---------- Karriere · Hochkant-Video im dunklen Kasten ---------- */
.media--hochkant { aspect-ratio: 9 / 16; width: 100%; max-width: 300px; background: #262626; }
.media--hochkant video { display: block; width: 100%; height: 100%; object-fit: cover; }
.text-box--video .text-box__aside-inner { justify-content: center; }

@media (min-width: 992px) {
  .text-box--video .text-box__content { align-items: center; }
  .text-box--video .text-box__main { flex-basis: 64%; }
  .text-box--video .text-box__aside { flex: 1 1 auto; }
}

/* ---------- Karriere · Slider (Team, Büro): Streifen zum Wischen, Pfeile springen um eine Karte ---------- */
.slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: var(--gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__track:focus-visible { outline-offset: 6px; }

.slide { margin: 0; min-width: 0; scroll-snap-align: start; }
.slide__media { aspect-ratio: 4 / 5; }
.slide h3 { margin-top: 16px; font-size: 20px; line-height: 1.3; font-weight: 700; }
.slide h3 + p { margin-top: 8px; font-size: var(--fs-text); line-height: var(--lh-text); }
.slide .media + p { margin-top: 12px; font-size: 15px; line-height: 22px; color: var(--c-muted); }

.slider__nav { display: flex; gap: 8px; margin-top: 24px; }
.slider.is-static .slider__nav { display: none; }
.slider__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  color: var(--c-text);
  cursor: pointer;
  transition: border-color .2s;
}
.slider__btn:hover:not(:disabled) { border-color: var(--c-text); }
.slider__btn:disabled { opacity: .35; cursor: default; }
/* Stand „1–4 von 14“ neben den Pfeilen unten */
.slider__stand { align-self: center; margin-left: 8px; font-size: 15px; line-height: 20px; color: var(--c-muted); font-variant-numeric: tabular-nums; }

/* Große Pfeile links und rechts mittig auf den Bildern (Wunsch Firas 02.11.); nur sichtbar, wo es weitergeht */
.slider { position: relative; }
.slider__seite {
  position: absolute;
  top: var(--seite-top, 40%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-bg);
  color: var(--c-text);
  box-shadow: 0 2px 12px rgba(14, 14, 14, .2);
  cursor: pointer;
  transition: opacity .2s, background-color .2s, color .2s, transform .2s;
}
.slider__seite .icon { width: 24px; height: 24px; }
@media (hover: hover) { .slider__seite:hover { background: var(--c-accent); color: #fff; transform: scale(1.06); } }
.slider__seite--zurueck { left: 8px; }
.slider__seite--weiter { right: 8px; }
.slider__seite { opacity: 0; pointer-events: none; }
.slider.kann-zurueck .slider__seite--zurueck,
.slider.kann-weiter .slider__seite--weiter { opacity: 1; pointer-events: auto; }

.slider--team { margin-top: 40px; }
   /* Ziel von „Unser Team“ im Menü (unter der festen Kopfzeile) */
/* Karriere · Jetzt bewerben: Ziel der Stellen-Kacheln; alle Karten orange umrandet (Wunsch Firas 03.11., vorher nur die angesprungene) */
.bewerben .leistung { scroll-margin-top: 8px; border: 2px solid var(--c-accent); }
.bewerben .leistung::after { content: none; }   /* Akzentstrich läge sonst auf dem Foto */
/* Foto der Stelle oben randlos und so breit wie die Karte: es deckt den Rahmen oben ab, Orange nur um den Textteil
   (Wunsch Firas 03.11.). Rand = Kartenpolster + 2 px Rahmen (Bug 02.11.: „hier fehlen die Bilder“) */
.bewerben .bewerben__bild { position: relative; margin: -30px -26px 24px; }
@media (min-width: 768px) { .bewerben .bewerben__bild { margin: -34px -34px 24px; } }
.bewerben__weitere { margin-top: 32px; max-width: 46em; font-size: var(--fs-text); line-height: var(--lh-text); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.text-box--gallery .text-box__content { flex-wrap: wrap; }

@media (min-width: 768px) {
  .slider--team .slider__track { grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); }
}

@media (min-width: 992px) {
  .slider--team { margin-top: 56px; }
  /* Büro-Kasten der Karriereseite: Kontaktblock rechts neben dem Text (Bilderreihe am 02.11. auf Wunsch Firas entfernt) */
  .text-box--gallery .text-box__main { flex: 1 1 0; min-width: 0; max-width: 70%; }
  .text-box--gallery .text-box__aside { flex: 0 0 auto; }
}

@media (min-width: 992px) {
  /* ab Desktop halb über dem Rand, damit sie kein Gesicht verdecken (Platz im Seitenrand) */
  .slider__seite--zurueck { left: -26px; }
  .slider__seite--weiter { right: -26px; }
}

@media (min-width: 1200px) {
  .slider--team .slider__track { grid-auto-columns: calc((100% - 3 * var(--gap)) / 4); }
}

/* ==========================================================================
   Referenzseite (referenzen.html)
   ========================================================================== */
#kunden, #umkreis, #bewertungen, #zahlen, #beispiele { scroll-margin-top: 56px; }   /* + klebender Branchenfilter */

/* Google-Bewertung auf der Bühne (statt Bühnenbild) */
.google-karte {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  width: min(100%, 340px);
  margin: 56px 0 0 auto;
  padding: 28px 28px 24px;
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  box-shadow: 0 18px 40px rgba(14, 14, 14, .08);
  color: var(--c-text);
  text-decoration: none;
}
.google-karte__wert { font-size: 64px; line-height: 1; font-weight: 700; }
.google-karte__sterne { color: var(--c-accent); font-size: 22px; letter-spacing: 2px; }
.google-karte__titel { font-size: 18px; line-height: 26px; font-weight: 700; }
.google-karte__balken { display: grid; gap: 4px; margin-top: 12px; font-size: 12px; line-height: 16px; color: var(--c-muted); }
.google-karte__balken > span { display: grid; grid-template-columns: 10px 1fr 20px; align-items: center; gap: 8px; }
.google-karte__balken b { font-weight: 400; }
.google-karte__balken i { height: 6px; background: linear-gradient(var(--c-accent), var(--c-accent)) 0 0 / var(--anteil) 100% no-repeat, var(--c-line); }
.google-karte__balken em { font-style: normal; text-align: right; }
.google-karte__stand { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--c-muted); }
.google-karte:hover .google-karte__stand { color: var(--c-text); text-decoration: underline; }

@media (min-width: 992px) {
  .google-karte { margin-top: 64px; margin-right: 8%; }
}

/* Branchenfilter: bleibt beim Scrollen unter der Kopfzeile */
.branchenfilter {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  margin-top: var(--module-gap);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg);
}
.branchenfilter__inner { display: flex; align-items: center; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.branchenfilter__label { flex: 0 0 auto; font-size: 14px; line-height: 20px; font-weight: 700; }
.branchenfilter__chips { display: flex; gap: 8px; min-width: 0; padding: 2px; overflow-x: auto; scrollbar-width: none; }
.branchenfilter__chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-bg);
  color: var(--c-text);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
}
.chip small { font-size: 12px; color: var(--c-muted); }
.chip:hover { border-color: var(--c-text); }
.chip[aria-pressed="true"] { border-color: var(--c-text); background: var(--c-text); color: #fff; }
.chip[aria-pressed="true"] small { color: rgba(255, 255, 255, .75); }
/* Pfeile an der Filterleiste: nur mit Maus (Touch wischt), unsichtbar, wo es nicht weitergeht */
.chips-pfeil {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0 0 3px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-bg);
  color: var(--c-text);
  font: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.chips-pfeil:hover { border-color: var(--c-text); }
.chips-pfeil.is-aus { visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .chips-pfeil { display: inline-flex; }
  .branchenfilter__inner { gap: 8px; }
  .branchenfilter__label { margin-right: 8px; }
}

@media (max-width: 575px) {
  .branchenfilter__label { display: none; }
}

/* Logowand */
.logowand {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.logowand li { display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 20px; background: var(--c-paper); }
.logowand li[hidden] { display: none; }
@media (max-width: 767px) { .logowand li { min-height: 80px; padding: 12px 8px; } }
/* Grau etwas dunkler, damit helle Gold- und Beige-Logos (Hotels, Immobilien) lesbar bleiben */
.logowand img { width: auto; max-width: 100%; height: auto; max-height: 32px; filter: grayscale(1) brightness(.48) contrast(1.7); transition: filter .2s; }
/* fast quadratische Logos (Zeichen + kleine Schrift) dürfen höher sein, sonst ist der Name nicht lesbar */
.logowand img.quadratisch { max-height: 52px; }
.logowand li:hover img { filter: none; }
.logowand__leer, .bewertungen__leer { margin-top: 24px; font-size: var(--fs-text); line-height: var(--lh-text); color: var(--c-muted); }

@media (min-width: 768px) {
  .logowand { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
  .logowand li { min-height: 120px; }
}
@media (min-width: 1200px) {
  .logowand { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Karte + Umkreissuche */
.umkreis__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 32px; }
.umkreis__feld { display: grid; gap: 6px; }
.umkreis__feld label { font-size: 14px; line-height: 20px; font-weight: 700; }
.umkreis__feld input,
.umkreis__feld select {
  height: 44px;
  padding: 0 12px;
  border: 1px solid #9a9389;
  border-radius: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font: inherit;
  font-size: 16px;
}
.umkreis__feld input { width: 140px; }
.umkreis__knopf {
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--c-text);
  background: var(--c-text);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
@media (hover: hover) { .umkreis__knopf:hover { background: #2b2b2b; } }
.umkreis .umkreis__ergebnis { margin-top: 20px; font-size: 18px; line-height: 27px; }
.umkreis__ergebnis:empty { display: none; }
.umkreis__karte { margin: 32px 0 0; }
.karte { position: relative; border: 1px solid var(--c-line); background: #e6edf1; }
.karte img { width: 100%; height: auto; }
.karte__punkte { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Nadeln wie bei Google Maps; Orte gleichmäßig je Region verteilt, nie am echten Kundenort (Wunsch Firas 02.11.) */
.karte__punkte .nadel path { fill: var(--c-accent); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
.karte__punkte .nadel circle { fill: #fff; }
.karte__punkte .nadel.is-fern { opacity: .25; }
.karte__punkte .umkreis-kreis { fill: rgba(226, 78, 31, .08); stroke: var(--c-accent); stroke-width: 1.5; stroke-dasharray: 5 4; }
.karte__punkte .umkreis-mitte { fill: var(--c-text); stroke: #fff; stroke-width: 1.5; }
.karte { cursor: pointer; }
.karte__info {
  position: absolute; z-index: 3; margin: 0; transform: translate(-50%, calc(-100% - 18px));
  padding: 6px 10px; background: var(--c-dark); color: #fff; font-size: 14px; line-height: 20px; font-weight: 700;
  white-space: nowrap; pointer-events: none; box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.karte__info[hidden] { display: none; }
.karte__quelle { margin-top: 8px; font-size: 13px; line-height: 18px; color: var(--c-muted); }

@media (min-width: 992px) {
  .umkreis { align-items: center; }
  .umkreis__text { grid-column: 1 / 6; }
  .umkreis__karte { grid-column: 7 / 13; margin-top: 0; }
}

/* Google-Bewertungen (Spalten, Karten unterschiedlich hoch) */
.bewertungen { margin-top: 40px; column-gap: var(--gap); }
.bewertung { break-inside: avoid; margin: 0 0 var(--gap); padding: 24px; border: 1px solid var(--c-line); background: var(--c-bg); }
.bewertung[hidden] { display: none; }
.bewertung__sterne { color: var(--c-accent); font-size: 16px; line-height: 20px; letter-spacing: 2px; }
.bewertung__text { margin: 12px 0 0; }
.bewertung__text p { font-size: var(--fs-text); line-height: var(--lh-text); }
.bewertung__text p + p { margin-top: 12px; }
.bewertung__wer { margin-top: 16px; font-size: 15px; line-height: 22px; color: var(--c-muted); }
.bewertung__wer span { color: var(--c-text); font-weight: 700; }
.bewertungen__mehr { margin-top: 8px; text-align: center; }
.bewertungen__mehr[hidden] { display: none; }
.logowand + .bewertungen__mehr { margin-top: 24px; }

@media (min-width: 768px) { .bewertungen { columns: 2; } }
@media (min-width: 1200px) { .bewertungen { columns: 3; } }

/* Kennzahlen */
.kennzahlen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px var(--gap); margin: 32px 0 0; padding: 0; list-style: none; }
.kennzahlen li { position: relative; padding-top: 20px; border-top: 1px solid var(--c-line); }
.kennzahlen li::after { content: ""; position: absolute; top: -2px; left: 0; width: 40px; height: 3px; background: var(--c-accent); }
.kennzahlen__wert { font-size: clamp(40px, 30px + 2.5vw, 60px); line-height: 1; font-weight: 700; }
.kennzahlen__wert + p { max-width: 34ch; margin-top: 12px; font-size: var(--fs-text); line-height: var(--lh-text); }

@media (min-width: 768px) { .kennzahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Platzhalter-Hinweis: vor dem Livegang ersetzen oder löschen */
.richtext .platzhalter-hinweis { padding: 10px 14px; border: 1px dashed var(--c-accent); font-size: 14px; line-height: 20px; }
.text-box--dark .platzhalter-hinweis { border-color: rgba(255, 255, 255, .5); }

/* Abschluss: Angebot */
@media (min-width: 992px) {
  .abschluss__text { grid-column: 1 / 9; }
}

/* ==========================================================================
   Leistungsseite (leistungen.html)
   ========================================================================== */

/* Überschrift ohne Silbentrennung (kurze Wörter wie „einer“ nicht zerreißen) */
.kein-trennen { hyphens: manual; -webkit-hyphens: manual; }
/* Einzelnes Wort mit orangem Strich darunter, z. B. „ZAP“ in der Karriere-Überschrift (Wunsch Firas 02.11.) */
.markiert { text-decoration: underline var(--c-accent); text-decoration-thickness: .08em; text-underline-offset: .12em; text-decoration-skip-ink: none; }

/* Leistungskarten mit Nummer; Titel als h3 > span und Text als p, damit der Editor sie findet */
.leistungen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: leistung;
}
.leistung { position: relative; min-width: 0; overflow-wrap: anywhere; padding: 28px 24px; border: 1px solid var(--c-line); background: var(--c-bg); counter-increment: leistung; }
.leistung::before {
  content: counter(leistung, decimal-leading-zero);
  display: block;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.leistung::after { content: ""; position: absolute; top: -1px; left: 24px; width: 40px; height: 3px; background: var(--c-accent); }
.leistung h3 { margin-top: 12px; font-size: 22px; line-height: 1.25; font-weight: 700; }
.leistung h3 + p { margin-top: 12px; font-size: var(--fs-text); line-height: var(--lh-text); }
.leistung__marke {
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 2px 8px;
  border: 1px solid var(--c-accent);
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
}
.leistung__norm { margin-top: 16px; font-size: 15px; line-height: 22px; color: var(--c-muted); }

@media (min-width: 768px) {
  .leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leistung { padding: 32px; }
  .leistung::after { left: 32px; }
  .leistung__marke { top: 28px; right: 32px; }
}

/* „Immer inklusive“: Haken in ZAP-Orange */
.inklusive { margin: 12px 0 0; padding: 0; list-style: none; }
.inklusive li { position: relative; padding-left: 22px; }
.inklusive li + li { margin-top: 8px; }
.inklusive li::before { content: ""; position: absolute; top: 7px; left: 2px; width: 9px; height: 5px; border-left: 2px solid var(--c-accent); border-bottom: 2px solid var(--c-accent); transform: rotate(-45deg); }

/* Kasten mit großem Bild rechts statt Kontaktblock (Ladesäulen, Wunsch Firas 02.11.) */
.text-box--bild .text-box__aside-inner { padding-top: 0; border-top: 0; }
.text-box--bild .text-box__aside-text .media { max-width: none; }

/* „Immer inklusive“ allein im Kasten, links und hervorgehoben (Wunsch Firas 02.11.) */
.text-box--inklusive .inklusive { display: grid; gap: 16px var(--gap); margin-top: 24px; }
.text-box--inklusive .inklusive li { padding-left: 38px; font-size: var(--fs-text); line-height: var(--lh-text); font-weight: 700; }
.text-box--inklusive .inklusive li + li { margin-top: 0; }
.text-box--inklusive .inklusive li::before {
  top: 2px; left: 0; width: 26px; height: 26px; border: 0; border-radius: 50%; transform: none;
  background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M7.5 13.5l3.5 3.5 7.5-7.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 26px 26px no-repeat;
}

@media (min-width: 768px) {
  .text-box--inklusive .inklusive { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .text-box--bild .text-box__content { align-items: center; }
  .text-box--bild .text-box__main { flex: 0 0 55%; }
  .text-box--bild .text-box__aside { flex: 1 1 0; padding: 64px 64px 64px 0; }
  .text-box--bild .text-box__aside-inner { padding: 0; border-left: 0; }
  .text-box--bild .text-box__aside-text .media { width: 100%; }
  .text-box--inklusive .text-box__main { flex: 1 1 auto; }
  .text-box--inklusive .inklusive { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; margin-top: 40px; }
}

/* ==========================================================================
   Fußzeile
   ========================================================================== */
.site-footer {
  position: relative;
  margin-top: var(--module-gap);
  padding: 64px 0;
  border-top: 1px solid var(--c-line);
  background: var(--c-paper);
  color: var(--c-text);
  text-align: center;
}
.site-footer .brand { margin-bottom: 24px; }
.site-footer__kontakt { margin-bottom: 8px; font-size: 15px; line-height: 24px; font-variant-numeric: tabular-nums; }
.site-footer .site-footer__kontakt a:hover { text-decoration: none; }
/* Handy: Anschrift, Telefon und E-Mail je in eigener Zeile (Wunsch Firas 03.11.), sonst Trennpunkte in einer Zeile */
.site-footer__umbruch { display: none; }
.site-footer__kontakt a[href^="mailto:"] { white-space: nowrap; }   /* nie an „zap-“ trennen */
.site-footer__kontakt a { background-origin: content-box; }   /* Unterstrich am Text, nicht am Tipp-Rand */
.site-footer .brand:hover { text-decoration: none; }

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.site-footer__nav {
  gap: 6px 28px;
  margin-top: 16px !important;
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
}

.site-footer__legal {
  gap: 8px 20px;
  margin-top: 8px !important;
  font-size: 15px;
  line-height: 22px;
}

@media (min-width: 768px) {
  .site-footer__legal { margin-top: 24px !important; }
}

/* Pflicht-Hinweis zur KI-Erstellung (klein, unten rechts) */
.site-footer__ki { margin-top: 24px; font-size: 12px; line-height: 16px; color: var(--c-muted); }

@media (min-width: 768px) {
  /* rechts bündig mit der Inhaltskante, auch wenn der Inhalt auf breiten Bildschirmen mittig steht */
  .site-footer__ki { position: absolute; right: max(var(--pad-x), calc((100% - var(--max-w)) / 2 + var(--pad-x))); bottom: 16px; margin: 0; }
}

/* ==========================================================================
   Weniger Bewegung, wenn im System so eingestellt
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ==========================================================================
   Kontaktseite (kontakt.html)
   ========================================================================== */
/* Angebotsformular (Wunsch Firas 02./03.11.): Leistungen wählen, bei ortsveränderlichen Geräten die Anzahl (tippen oder schieben), dann Kontaktdaten */
.anfrage { margin-top: 32px; padding: 24px 16px; border: 1px solid var(--c-line); background: var(--c-paper); }
.anfrage fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.stage--formular .stage__text { grid-column: 1 / -1; }   /* bis 991 px: Text über dem Formular in voller Breite */
.stage--formular .stage__text p + p { margin-top: 16px; }
.stage--formular .stage__text p { max-width: 40em; }
/* Schritte: Leistungen → (nur bei ortsveränderlichen Geräten) Anzahl → Kontaktdaten, getrennt durch eine Linie */
.anfrage__klappe .anfrage__schritt,
.anfrage__klappe + .anfrage__schritt { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--c-line); }
/* Überschrift als Block über der Trennlinie (sonst sitzt sie mitten in der Linie und verdeckt sie bei zwei Zeilen) */
.anfrage__titel { float: left; width: 100%; margin-bottom: 14px; padding: 0; font-size: 20px; line-height: 1.3; font-weight: 700; }
.anfrage__titel + * { clear: both; margin-top: 0 !important; }
.anfrage__titel span { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--c-muted); }

/* Leistungen: Kacheln in zwei Spalten, echte Kontrollkästchen (unsichtbar) über der ganzen Fläche */
.anfrage__wahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.anfrage__wahl { position: relative; display: grid; }
.anfrage__wahl-hinweis { display: block; margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--c-muted); }
.anfrage__wahl-hinweis[hidden] { display: none; }
.anfrage__wahl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.anfrage__wahl span {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px;
  border: 1px solid #8a8378; background: var(--c-bg); font-size: 15px; line-height: 19px;
  hyphens: manual; transition: border-color .15s, box-shadow .15s;
}
.anfrage__wahl span::before {
  content: ""; flex: 0 0 18px; height: 18px; border: 1.5px solid #8a8378; border-radius: 3px;
  background: var(--c-bg) center / 12px no-repeat; transition: background-color .15s, border-color .15s;
}
.anfrage__wahl input:checked + span { border-color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-text); }
.anfrage__wahl input:checked + span::before {
  border-color: var(--c-accent); background-color: var(--c-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.6L10 3.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.anfrage__wahl input:focus-visible + span,
.anfrage__wahlen.ist-fehler .anfrage__wahl input:focus + span { outline: 2px solid var(--c-link); outline-offset: 2px; }   /* nach Fehler auch bei Maus/Touch */
@media (hover: hover) {
  .anfrage__wahl input:not(:checked):hover + span,
  .anfrage__wahl input:not(:checked):hover + span::before { border-color: var(--c-text); }
}
.anfrage__wahlen.ist-fehler .anfrage__wahl span { border-color: var(--c-fehler); }
/* Kontrastmodus (Windows): eigene Farben fallen weg → Auswahl über Systemfarbe kenntlich machen */
@media (forced-colors: active) {
  .anfrage__wahl input:checked + span { outline: 3px solid Highlight; outline-offset: -3px; }
  .anfrage__wahl input:checked + span::before { forced-color-adjust: none; border-color: Highlight; background-color: Highlight; }
}
.anfrage [data-leistungen] .anfrage__fehler { display: block; margin-top: 8px; }

/* Anzahl: klappt weich auf/zu (ohne Bewegung bei „weniger Animation“); zu = unsichtbar und nicht erreichbar */
.anfrage__klappe { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s ease, visibility 0s; }
.anfrage__klappe.ist-zu { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .3s ease, visibility 0s .3s; }
.anfrage__klappe-innen { min-height: 0; overflow: hidden; margin-inline: -8px; padding-inline: 8px; }   /* Rand: Fokusring am Regler bleibt sichtbar */
@media (prefers-reduced-motion: reduce) { .anfrage__klappe, .anfrage__klappe.ist-zu { transition: none; } }

/* Zahl zum Eintippen, groß wie bisher die Anzeige: „ca. [100] Geräte“ */
.anfrage__menge { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .25em; font-size: clamp(30px, 24px + 1.4vw, 42px); line-height: 1.2; font-weight: 700; }
.anfrage__zahl {
  width: 4ch; min-width: 2.6ch; max-width: 100%; padding: 0 .2em; border: 1px solid #8a8378; border-radius: 0;
  background: var(--c-bg); color: var(--c-text); font: inherit; font-variant-numeric: tabular-nums; text-align: center;
  box-sizing: content-box;
}
.anfrage__zahl:focus-visible { outline: 2px solid var(--c-link); outline-offset: 2px; }

/* Schieberegler: logarithmisch, 1.000 Schritte (gleitet statt springt); Füllung bis zum Knopf über --f (0…1) */
.anfrage__regler {
  --knopf: 28px; --f: .15;
  display: block; width: 100%; height: 44px; margin: 10px 0 0; padding: 0;
  background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: pan-y;
}
.anfrage__regler::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--c-accent) calc(var(--knopf) / 2 + var(--f) * (100% - var(--knopf))), #d6cfc3 0);
}
.anfrage__regler::-moz-range-track { height: 6px; border-radius: 3px; background: #d6cfc3; }
.anfrage__regler::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--c-accent); }
.anfrage__regler::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: var(--knopf); height: var(--knopf); margin-top: calc(3px - var(--knopf) / 2);
  border: 1px solid rgba(0, 0, 0, .14); border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
}
.anfrage__regler::-moz-range-thumb {
  width: var(--knopf); height: var(--knopf); box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, .14); border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
}
.anfrage__regler:focus-visible { outline: none; }
.anfrage__regler:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c-link); }
.anfrage__regler:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c-link); }
@media (pointer: coarse) { .anfrage__regler { --knopf: 32px; } }
.anfrage__skala { display: grid; grid-template-columns: 1fr auto 1fr; font-size: 14px; line-height: 20px; color: var(--c-muted); }
.anfrage__skala span:last-child { text-align: right; }
.anfrage .anfrage__hilfe { margin-top: 12px; font-size: 15px; line-height: 22px; color: var(--c-muted); }
.anfrage__felder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.anfrage__feld { display: grid; gap: 6px; align-content: start; }
.anfrage__feld label { font-size: 14px; line-height: 20px; font-weight: 700; }
.anfrage__feld label span { font-weight: 400; color: var(--c-muted); }
.anfrage__feld input,
.anfrage__feld textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #8a8378; border-radius: 0; background: var(--c-bg); color: var(--c-text); font: inherit; font-size: 17px; }
.anfrage__feld textarea { resize: vertical; }
.anfrage__feld [aria-invalid="true"] { border-color: var(--c-fehler); box-shadow: 0 0 0 1px var(--c-fehler); }
.anfrage__fehler { font-size: 14px; line-height: 20px; color: var(--c-fehler); }
.anfrage__falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }   /* Honigtopf für Bots */
.anfrage__knopf { width: 100%; height: 54px; margin-top: 24px; font-size: 17px; transition: background-color .2s, border-color .2s; }
/* Hover in dunklem ZAP-Orange: Weiß darauf 5 : 1 (das helle Orange hätte nur 3,9 : 1) */
@media (hover: hover) { .anfrage__knopf:hover:not(:disabled) { border-color: #b93f1a; background: #b93f1a; } }
.anfrage__knopf:disabled { opacity: .6; cursor: default; }
.anfrage .anfrage__hinweis { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--c-muted); }
.anfrage__status:not(:empty) { margin-top: 16px; padding: 12px 14px; border-left: 3px solid var(--c-accent); background: var(--c-bg); font-size: 16px; line-height: 24px; }
.anfrage__status p { margin: 0; }
/* Nach erfolgreichem Versand nur noch die Bestätigung (mit „Weitere Anfrage stellen“) */
.anfrage.ist-gesendet > :not(.anfrage__status) { display: none; }
.anfrage.ist-gesendet .anfrage__status { margin-top: 0; }
.anfrage__ausweg { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 8px !important; }
.anfrage__ausweg button.txt-btn { padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; }

@media (min-width: 576px) {
  .anfrage__felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anfrage__feld--breit { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
  .anfrage { padding: 32px; }
}
@media (min-width: 992px) {
  .stage--formular .grid { align-items: start; }
  .stage--formular .stage__text { grid-column: 1 / 6; max-width: none; padding-top: 32px; }
  .stage--formular .anfrage { grid-column: 7 / 13; margin-top: 0; }
  .leistungen--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Wege zu uns: Karten wie auf der Leistungsseite, aber ohne Nummer (die Wege haben keine Reihenfolge) */
.leistungen--wege .leistung::before { content: none; }
.leistungen--wege .leistung h3 { margin-top: 0; }
.leistungen--wege .leistung p { font-size: var(--fs-text); line-height: var(--lh-text); }
.leistungen--wege .leistung p + p { margin-top: 16px; }
/* Link (Formular, Telefon, Mail) steht in jeder Karte unten, damit die Links einer Reihe auf einer Höhe liegen */
.leistungen--wege .leistung { display: flex; flex-direction: column; }
.leistungen--wege .leistung p:has(> .txt-btn) { margin-top: auto; padding-top: 16px; }

/* ==========================================================================
   Rechtsseiten (impressum.html, datenschutz.html, agb.html) und 404
   Kopf mit Funkenraster wie die Bühne, links ein klebendes Inhaltsverzeichnis mit Nummern,
   rechts der Text: Abschnitte mit Linie und orangem Strich wie „6 Gründe“.
   ========================================================================== */
.legal-kopf { margin-top: 0; padding-top: var(--module-gap); }
.legal-kopf .grid { align-items: end; }
.legal-kopf__text p { margin-top: 24px; max-width: 34em; font-size: var(--fs-text); line-height: var(--lh-text); }
.legal-kopf__text .txt-btn { margin-top: 24px; }
.legal-kopf__visual { position: relative; height: 120px; margin-top: 32px; }
.legal-kopf__lines { inset: 0; }

@media (min-width: 768px) {
  .legal-kopf__text { grid-column: 1 / 8; }
  .legal-kopf__visual { grid-column: 8 / 13; height: 220px; margin-top: 0; }
}

.legal .grid { align-items: start; }
.legal__inhalt { display: none; }
.legal__text { max-width: 38em; }   /* ≈ 75 Zeichen je Zeile */

.legal__inhalt-titel { font-size: 15px; line-height: 22px; font-weight: 700; }
.legal__inhalt ol { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: inhalt; }
.legal__inhalt li { counter-increment: inhalt; border-top: 1px solid var(--c-line); }
.legal__inhalt li:last-child { border-bottom: 1px solid var(--c-line); }
.legal__inhalt a { position: relative; display: flex; gap: 12px; padding: 9px 0 9px 12px; font-size: 15px; line-height: 21px; text-decoration: none; color: var(--c-muted); }
.legal__inhalt a::before { content: counter(inhalt, decimal-leading-zero); flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.legal__inhalt a:hover { color: var(--c-text); }
.legal__inhalt a.ist-aktiv { color: var(--c-text); }
.legal__inhalt a.ist-aktiv::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--c-accent); }

@media (min-width: 992px) {
  .legal__inhalt {
    display: block;
    grid-column: 1 / 4;
    position: sticky;
    top: calc(var(--header-h) + 24px);
    max-height: calc(100vh - var(--header-h) - 48px);
    overflow-y: auto;
  }
  .legal__text { grid-column: 5 / 13; }
}

.legal__section { position: relative; padding-top: 24px; border-top: 1px solid var(--c-line); scroll-margin-top: 8px; }
.legal__section::before { content: ""; position: absolute; top: -2px; left: 0; width: 40px; height: 3px; background: var(--c-accent); }
.legal__section + .legal__section { margin-top: 56px; }
.legal__section h2 { font-size: clamp(22px, 19px + .6vw, 28px); line-height: 1.25; font-weight: 700; hyphens: auto; -webkit-hyphens: auto; }
.legal__section h3 { margin-top: 28px; font-size: 19px; line-height: 1.35; font-weight: 700; }
.legal__section p,
.legal__section li { font-size: var(--fs-text); line-height: var(--lh-text); }
.legal__section h2 + *,
.legal__section h3 + * { margin-top: 14px; }
.legal__section p + p,
.legal__section ul + p,
.legal__section p + ul { margin-top: 12px; }
.legal__section ul { margin-bottom: 0; padding-left: 20px; }
.legal__section li + li { margin-top: 6px; }
.legal__section li::marker { color: var(--c-accent); }
.legal__section a { color: inherit; text-decoration: underline; text-decoration-color: var(--c-link); text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal__section a:hover { text-decoration-thickness: 2px; }
.legal__section strong { font-weight: 700; }
.legal__hinweis { padding: 14px 16px; border-left: 3px solid var(--c-accent); background: var(--c-paper); }
.legal__stand { margin-top: 56px; font-size: 15px; line-height: 22px; color: var(--c-muted); }

/* AGB: Klauselnummer links, Text rechts */
.klausel { display: grid; grid-template-columns: 3.1em minmax(0, 1fr); column-gap: 12px; }
.legal__section .klausel + .klausel { margin-top: 12px; }
.klausel__nr { font-weight: 700; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.klausel__beispiel { margin-left: calc(3.1em + 12px); }

/* 404 */
.nicht-gefunden__wege { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 32px; }
.legal-kopf__text .nicht-gefunden__wege .txt-btn { margin-top: 0; }

/* Pflicht-Quellenangabe auf fremden Fotos (z. B. CC BY-SA): klein unten links im Bild */
.media__quelle {
  position: absolute; left: 0; bottom: 0; z-index: 2; max-width: 100%;
  padding: 3px 8px; background: rgba(14, 14, 14, .62); color: #fff; font-size: 11px; line-height: 16px;
}
.media__quelle a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Quellenangabe auf der Deutschlandkarte (Startseite): als kleiner Block in der freien Ecke unten links
   (die Karte selbst beginnt erst bei 28 % der Breite), damit sie weder Nadeln noch Süddeutschland verdeckt (03.11.) */
.media__quelle--karte { max-width: 27%; padding: 0 6px 5px; background: none; color: var(--c-muted); line-height: 14px; }
@media (max-width: 1199px) {
  .media__quelle--karte { padding: 0 4px 3px; font-size: 9px; line-height: 12px; }
}

/* Stern am „Bestpreis“ (Startseite, Wunsch Firas 02.11.) und Fußnote ganz unten in der Fußzeile */
.stern { font-size: .45em; line-height: 0; vertical-align: .9em; margin-left: .05em; font-weight: 700; }
.stern a { color: inherit; text-decoration: none; }
p .stern { font-size: .7em; vertical-align: .6em; }
.site-footer__fussnote { max-width: 56em; margin: 32px auto 0; font-size: 14px; line-height: 21px; color: var(--c-muted); text-align: center; }
.site-footer__fussnote a { text-decoration: underline; }

/* Rechtsseiten unter 992 px: Inhaltsverzeichnis zum Aufklappen über dem Text */
.legal__mobil { margin-bottom: 40px; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.legal__mobil summary { padding: 14px 0; font-size: 17px; font-weight: 700; cursor: pointer; }
.legal__mobil ol { margin: 0 0 16px; padding-left: 24px; font-size: 16px; line-height: 26px; }
.legal__mobil li::marker { color: var(--c-muted); font-variant-numeric: tabular-nums; }
.legal__mobil a { text-decoration: none; }
@media (min-width: 992px) { .legal__mobil { display: none; } }

/* Touch: größere Tippflächen ohne andere Optik (Abstand oben/unten, bei Textlinks mit Gegenrand) */
@media (pointer: coarse) {
  .txt-btn { padding-block: 5px; margin-block: -5px; }
  .chip { min-height: 44px; align-items: center; }
  .site-footer__nav, .site-footer__legal { row-gap: 14px; }
  .site-footer__nav a, .site-footer__legal a, .site-footer__kontakt a { padding-block: 9px; }
}

/* Handy quer (wenig Höhe): Filterleiste klebt nicht, Menü enger, damit Inhalt sichtbar bleibt */
@media (max-height: 500px) and (orientation: landscape) {
  .branchenfilter { position: static; }
  .mobile-menu a { padding-top: 8px; padding-bottom: 8px; }
}

/* Fokusrahmen am Video nicht vom Bildrahmen abschneiden lassen */
.media video:focus-visible { outline-offset: -4px; }

/* Vollbild: ganzes Bild zeigen. Das „cover“ der Videorahmen gilt sonst auch im Vollbild (die Browser-Vorgabe
   „contain“ ist schwächer) und schneidet das Hochkant-Video auf Bildschirmbreite zu. Zwei Regeln, weil ein
   unbekannter Selektor die ganze Regel ungültig macht (Safari < 16.4 kennt nur -webkit-full-screen). */
.media video:fullscreen { object-fit: contain; }
.media video:-webkit-full-screen { object-fit: contain; }

/* Karriere: graue „Jetzt bewerben“-Fläche geht direkt in die Fußzeile über (kein weißer Streifen) */
main:has(> .module--grey:last-child) + .site-footer { margin-top: 0; }

/* Druck: ohne Effekt, Menü und klebende Leisten */
@media print {
  [data-lines], .burger, .mobile-menu, .skip-link, .chips-pfeil, video { display: none !important; }
  .site-header, .branchenfilter { position: static !important; }
  body { color: #000; background: #fff; }
}

/* Kasten mit Seitenspalte bei 992–1439 px: Spalte breiter und ohne Symbol, sonst brechen Straße und Telefon mitten im Wort */
@media (min-width: 992px) and (max-width: 1439px) {
  .text-box__main { flex-basis: 60%; padding: 48px; }
  .text-box__aside { padding: 48px 32px 48px 0; }
  .text-box__aside .text-box__icon { display: none; }
}

/* ==========================================================================
   Handy bis 767 px: schlanker (Wunsch Firas 03.11.: Text einen Tick kleiner, weniger Nebentext, engere Abstände)
   ========================================================================== */
@media (max-width: 767px) {
  :root { --fs-text: 16px; --lh-text: 24px; --module-gap: 40px; }
  .display-xxl { font-size: clamp(30px, 22px + 3vw, 40px); }          /* 390 px: 34 statt 40 px */
  .display-l { font-size: 21px; }
  .stage__text h1 + p, .stage__text .txt-btn { margin-top: 16px; }
  .richtext h2 + p { margin-top: 14px; }
  .richtext p + p { margin-top: 12px; }
  .teaser__title { font-size: 18px; }
  .points h3 { font-size: 19px; }
  .points h3 + p { text-align: left; }                                   /* Blocksatz reißt am Handy große Wortlücken */
  .leistung { padding: 22px 18px; }
  .leistung::after { left: 18px; }
  .bewerben .bewerben__bild { margin: -24px -20px 20px; }   /* = Kartenpolster + Rahmen, sonst ragt das Foto über den Rahmen (03.11.) */
  .leistung h3 { font-size: 20px; }
  .text-box__main { padding: 22px 16px; }
  /* Nebentexte nur auf größeren Bildschirmen (Klasse .nur-gross im HTML) */
  .nur-gross, .anfrage .anfrage__hilfe { display: none; }
  .anfrage { padding: 20px 14px; }
  .anfrage__klappe .anfrage__schritt, .anfrage__klappe + .anfrage__schritt { margin-top: 20px; padding-top: 16px; }
  .anfrage__felder { margin-top: 10px; gap: 14px; }
  .anfrage__titel { font-size: 18px; }
  .anfrage__menge { font-size: 28px; }
  .anfrage__wahl span { font-size: 14px; line-height: 18px; padding: 8px 10px; gap: 8px; }
  .site-footer { padding: 40px 0; }
  .site-footer__nav { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; column-gap: 32px; }
  .site-footer__fussnote { font-size: 13px; line-height: 19px; }
  .site-footer__trenner { display: none; }
  .site-footer__umbruch { display: inline; }
  .site-footer__kontakt a { display: inline-block; padding-block: 6px; }   /* je Zeile eigene Tippfläche, keine Überlappung */
}
@media (max-width: 379px) {   /* iPhone SE/mini, kleine Android: Kachel-Text zweizeilig halten */
  .anfrage__wahlen { gap: 6px; }
  .anfrage__wahl span { padding: 8px; gap: 6px; }
  .anfrage__wahl span::before { flex-basis: 16px; height: 16px; background-size: 10px; }
}