/* =========================================================================
   PS Produktion-Service GmbH – Haupt-Stylesheet
   Reines CSS, keine Frameworks, keine Build-Tools.
   Struktur:
     01 Design-Tokens (:root)
     02 Reset & Basis
     03 Typografie
     04 Layout & Raster
     05 Buttons & Links
     06 Dekorative Elemente (Quadrate, Linien)
     07 Header / Navigation / Mega-Menue / Sprachumschalter
     08 Hero
     09 Vertrauensleiste
     10 Karten (Leistungen, Standorte, Bewertungen, Video)
     11 Prozess & Systemanbindungen
     12 Kennzahlen
     13 FAQ (Accordion)
     14 Karte / Consent
     15 Mehrstufiges Formular
     16 CTA-Band & Footer
     17 Breadcrumb, 404, Rechtstexte
     18 Cookie-Hinweis
     19 Animationen / Scroll-Reveal
     20 Utilities
     21 Media Queries
     22 Print
   ========================================================================= */

/* -------------------------------------------------------------------------
   01 Design-Tokens
   Alle Farben zentral aenderbar. Werte abgeleitet aus Logo (#E1321E / #9C9E9F)
   und Referenzentwurf (Blaugrau #859CA3, Hellgrau #F6F7F8).
   ------------------------------------------------------------------------- */
:root {
  /* --- Markenfarben ---------------------------------------------------- */
  --c-accent:            #e1321e;  /* Logo-Orange, primaere Akzentfarbe      */
  --c-accent-600:        #d22c17;  /* Buttonflaeche (Kontrast 5.1:1 zu Weiss)*/
  --c-accent-700:        #b8240f;  /* Hover / Text auf Weiss (6.4:1)         */
  --c-accent-800:        #94190a;  /* aktiv / gedrueckt                      */
  --c-accent-tint:       #fdeeeb;  /* sehr helle Akzentflaeche               */
  --c-accent-tint-2:     #fbdcd7;

  --c-anthracite:        #202b30;  /* Ueberschriften, dunkle Flaechen        */
  --c-anthracite-800:    #2b393f;
  --c-anthracite-700:    #34474e;  /* dunkles Band, Weiss darauf 9.7:1       */

  --c-bluegray:          #859ca3;  /* gedecktes Blaugrau (Sekundaerfarbe)    */
  --c-bluegray-600:      #6d868e;
  --c-bluegray-700:      #5c7078;  /* Weiss darauf 5.1:1                     */
  --c-bluegray-tint:     #eef1f3;

  --c-gray-050:          #f6f7f8;  /* abgesetzte Sektionen                   */
  --c-gray-100:          #eceff1;
  --c-gray-200:          #dde2e5;
  --c-gray-300:          #c6ced2;
  --c-gray-500:          #9c9e9f;  /* Logo-Grau                              */

  --c-white:             #ffffff;
  --c-text:              #3f4e55;  /* Fliesstext, 8.6:1 auf Weiss            */
  --c-text-muted:        #5d6e76;
  --c-text-invert:       #ffffff;

  --c-success:           #1d7a4d;
  --c-error:             #b3261e;
  --c-error-tint:        #fdecea;

  /* --- Flaechen --------------------------------------------------------- */
  --surface:             var(--c-white);
  --surface-alt:         var(--c-gray-050);
  --surface-dark:        var(--c-anthracite);
  --border:              var(--c-gray-200);
  --border-strong:       var(--c-gray-300);

  /* --- Typografie ------------------------------------------------------- */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;
  --font-head: "Inter Tight", "Segoe UI Semibold", system-ui, -apple-system,
               "Helvetica Neue", Arial, sans-serif;

  --fs-xs:    0.75rem;    /* 12 */
  --fs-sm:    0.875rem;   /* 14 */
  --fs-base:  1rem;       /* 16 */
  --fs-md:    1.0625rem;  /* 17 */
  --fs-lg:    1.25rem;    /* 20 */
  --fs-xl:    1.5rem;     /* 24 */
  --fs-2xl:   clamp(1.5rem, 1.15rem + 1.6vw, 2.125rem);
  --fs-3xl:   clamp(1.875rem, 1.35rem + 2.4vw, 2.875rem);
  --fs-4xl:   clamp(2.25rem, 1.4rem + 3.9vw, 4.25rem);

  --lh-tight: 1.1;
  --lh-head:  1.18;
  --lh-body:  1.65;

  --ls-tight: -0.02em;
  --ls-wide:  0.08em;
  --ls-xwide: 0.16em;

  /* --- Raster & Abstaende ----------------------------------------------- */
  --wrap:        1240px;
  --wrap-narrow: 880px;
  --gutter:      clamp(1.125rem, 0.6rem + 2.2vw, 2.5rem);

  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  2.5rem;
  --s-8:  3rem;
  --s-9:  4rem;
  --s-10: 5rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);

  /* --- Form & Effekte --------------------------------------------------- */
  --radius-xs: 2px;
  --radius:    4px;   /* nur dezente Rundungen                              */
  --radius-lg: 6px;

  --shadow-xs: 0 1px 2px rgba(32, 43, 48, 0.06);
  --shadow-sm: 0 2px 6px rgba(32, 43, 48, 0.07);
  --shadow-md: 0 8px 24px rgba(32, 43, 48, 0.09);
  --shadow-lg: 0 18px 48px rgba(32, 43, 48, 0.14);

  --ring: 0 0 0 3px var(--c-white), 0 0 0 6px var(--c-accent-700);

  --dur-fast: 140ms;
  --dur:      260ms;
  --dur-slow: 620ms;
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);

  --header-h: 76px;
  --header-border: 1px;                                   /* untere Linie des Headers */
  --header-total: calc(var(--header-h) + var(--header-border));
  --topbar-h: 40px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  overflow-x: hidden;   /* Fallback fuer aeltere Browser */
  overflow-x: clip;     /* verhindert Scroll-Container, clippt dennoch */
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

/* Kein globales fill auf <svg>: die Kontur-Icons setzen fill="none" als
   Praesentationsattribut, das von CSS ueberschrieben wuerde. */

/* Standardgroesse aller Inline-Icons. Spezifischere Regeln (z. B. .mega__ico svg)
   ueberschreiben diesen Wert gezielt. */
.ico {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  vertical-align: -0.22em;
}
.loc__badge .ico { width: .95em; height: .95em; fill: currentColor; }
.btn > .ico { width: 1.15em; height: 1.15em; }
.mnav__contact .ico { width: 1.1em; height: 1.1em; color: var(--c-accent); }
.loc__meta .ico { color: var(--c-accent-700); }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

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

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

/* Fokus: immer sichtbar, nie ausschliesslich durch Farbe */
:focus-visible {
  outline: 3px solid var(--c-accent-700);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.js-focus-ring :focus:not(:focus-visible) { outline: none; }

/* Skip-Link */
.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 999;
  background: var(--c-anthracite);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  font-weight: 600;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--s-4); }

/* -------------------------------------------------------------------------
   03 Typografie
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--c-anthracite);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--s-4);
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

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

a { color: var(--c-accent-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-accent-800); }

strong, b { font-weight: 650; color: var(--c-anthracite-800); }

abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
}

.lead {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  color: var(--c-text-muted);
  max-width: 62ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color: var(--c-accent-700);
  margin-bottom: var(--s-3);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--c-accent);
  flex: none;
}
.eyebrow--center::before { display: none; }

.section-head { max-width: 720px; margin-bottom: var(--s-8); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow::before { display: none; }
.section-head p { color: var(--c-text-muted); }

/* Aufzaehlung mit Haken */
.ticks { display: grid; gap: 0.625rem; }
.ticks li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--fs-base);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.75rem;
  height: 0.45rem;
  border-left: 2px solid var(--c-accent);
  border-bottom: 2px solid var(--c-accent);
  transform: rotate(-45deg);
}
.ticks--2 { grid-template-columns: minmax(0, 1fr); }

/* -------------------------------------------------------------------------
   04 Layout & Raster
   ------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--surface-alt); }
.section--tint { background: var(--c-bluegray-tint); }
.section--dark { background: var(--surface-dark); color: #d7dee1; }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--flush-top { padding-top: 0; }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

/* Diagonale/versetzte Flaechentrennung – dezent, ohne Layout-Shift */
.section--stepped { position: relative; }
.section--stepped::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 96px;
  background: var(--surface);
  z-index: 0;
}
.section--stepped > * { position: relative; z-index: 1; }

.grid { display: grid; gap: var(--s-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.split--wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.split--form { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }

/* -------------------------------------------------------------------------
   05 Buttons & Links
   ------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--c-accent-600);
  --btn-fg: #fff;
  --btn-bd: var(--c-accent-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.875rem 1.5rem;
  min-height: 48px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bd);
  border-radius: var(--radius);
  font-family: var(--font-head);
  font-size: var(--fs-base);
  font-weight: 650;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-align: center;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover {
  --btn-bg: var(--c-accent-700);
  --btn-bd: var(--c-accent-700);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn:active { transform: translateY(0); --btn-bg: var(--c-accent-800); }

.btn .btn__ico {
  width: 1em; height: 1em; flex: none;
  transition: transform var(--dur) var(--ease);
}
.btn:hover .btn__ico { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-anthracite);
  --btn-bd: var(--border-strong);
}
.btn--ghost:hover {
  --btn-bg: var(--c-anthracite);
  --btn-bd: var(--c-anthracite);
  color: #fff;
}
.btn--on-dark {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, 0.55);
}
.btn--on-dark:hover { --btn-bg: #fff; --btn-bd: #fff; color: var(--c-anthracite); }

.btn--sm { padding: 0.5rem 1rem; min-height: 40px; font-size: var(--fs-sm); }
.btn--lg { padding: 1.0625rem 2rem; min-height: 56px; font-size: var(--fs-lg); }
.btn--block { display: flex; width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* Textlink mit Pfeil */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 650;
  font-size: var(--fs-base);
  color: var(--c-accent-700);
  text-decoration: none;
  padding-block: 0.25rem;
}
.arrow-link::after {
  content: "";
  width: 1.125rem; height: 0.5rem;
  background: currentColor;
  -webkit-mask: var(--arrow-mask) center / contain no-repeat;
  mask: var(--arrow-mask) center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
:root {
  --arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8'%3E%3Cpath d='M0 3.2h14.2L11 .8 11.8 0 16.6 3.6v.8L11.8 8 11 7.2l3.2-2.4H0z'/%3E%3C/svg%3E");
}
.arrow-link:hover { color: var(--c-accent-800); }
.arrow-link:hover::after { transform: translateX(5px); }
.arrow-link--invert { color: #fff; }
.arrow-link--invert:hover { color: var(--c-accent-tint-2); }

/* -------------------------------------------------------------------------
   06 Dekorative Elemente (Quadrate-Motiv aus dem Logo)
   ------------------------------------------------------------------------- */
.deco-squares {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  pointer-events: none;
  z-index: 1;
}
.deco-squares i {
  display: block;
  width: 46px; height: 46px;
  background: var(--c-bluegray);
  opacity: 0.85;
}
.deco-squares i:nth-child(2) { background: var(--c-accent); }
.deco-squares i:nth-child(3) { background: var(--c-bluegray-600); }
.deco-squares i:nth-child(4) { background: transparent; border: 2px solid var(--c-bluegray); }
.deco-squares--sm i { width: 26px; height: 26px; }
.deco-squares--muted i { opacity: 0.35; }

.rule {
  width: 56px; height: 3px;
  background: var(--c-accent);
  margin-bottom: var(--s-4);
}

/* Feine Linienanimation als Sektionstrenner */
.hairline {
  height: 1px;
  background: var(--border);
  position: relative;
  overflow: hidden;
}
.hairline::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 0;
  background: var(--c-accent);
  transition: width 1.2s var(--ease);
}
.hairline.is-visible::after { width: 100%; }

/* -------------------------------------------------------------------------
   07 Header / Navigation
   ------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
  will-change: transform;
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.site-header.is-hidden { transform: translateY(-100%); }

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}
.brand img { width: 132px; height: 61px; object-fit: contain; }
.site-header.is-scrolled .brand img { transition: width var(--dur) var(--ease); }

/* Hauptnavigation */
/* margin-inline: auto verteilt den freien Platz gleichmaessig links und
   rechts - das Menue steht damit mittig zwischen Logo und Sprachwahl.
   Unterhalb von 1080 px ist das Menue ausgeblendet, dort schiebt wie
   bisher das Logo den Rest nach rechts (siehe Media Query). */
.nav { display: flex; align-items: center; gap: 0.25rem; margin-inline: auto; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.875rem;
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--c-anthracite);
  text-decoration: none;
  border-radius: var(--radius-xs);
  position: relative;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0.875rem; right: 0.875rem;
  bottom: 0.3rem;
  height: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover { color: var(--c-accent-700); }
.nav__link:hover::after,
.nav__item--open > .nav__link::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--c-accent-700); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__item { position: relative; }
.nav__caret {
  width: 10px; height: 6px;
  transition: transform var(--dur) var(--ease);
}
.nav__item--open .nav__caret { transform: rotate(180deg); }

/* Mega-Menue */
.mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, -8px);
  width: min(860px, calc(100vw - 3rem));
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--c-accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--s-5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur) var(--ease);
}
.nav__item--open > .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.mega__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem;
}
.mega__link {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0.875rem;
  align-items: start;
  padding: 0.75rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.mega__link:hover, .mega__link:focus-visible {
  background: var(--c-gray-050);
  border-color: var(--border);
  color: inherit;
}
.mega__ico {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--c-accent-tint);
  color: var(--c-accent-700);
  border-radius: var(--radius);
  flex: none;
}
.mega__ico svg { width: 21px; height: 21px; }
.mega__t {
  display: block;
  font-family: var(--font-head);
  font-weight: 650;
  font-size: 0.9375rem;
  color: var(--c-anthracite);
  margin-bottom: 0.15rem;
}
.mega__d { display: block; font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.45; }
.mega__foot {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  align-items: center;
}

/* Sprachumschalter */
.langsw {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  flex: none;
}
.langsw a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 62px;
  min-height: 40px;
  padding-inline: 0.625rem;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-text-muted);
  text-decoration: none;
  background: #fff;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.langsw a + a { border-left: 1px solid var(--border-strong); }
.langsw a:hover { background: var(--c-gray-050); color: var(--c-anthracite); }

/* Flagge: nur Beiwerk – die Sprache steht immer auch als Kuerzel daneben. */
.langsw .flag {
  width: 20px;
  height: 14px;
  flex: none;
  border: 1px solid rgba(32, 43, 48, 0.22);
  border-radius: 1px;
  object-fit: cover;
  filter: saturate(0.85);
  transition: filter var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  opacity: 0.7;
}
.langsw a:hover .flag { opacity: 1; filter: none; }
.langsw__code { line-height: 1; }

.langsw a[aria-current="true"] {
  background: var(--c-anthracite);
  color: #fff;
}
.langsw a[aria-current="true"] .flag {
  opacity: 1;
  filter: none;
  border-color: rgba(255, 255, 255, 0.35);
}
.langsw a[aria-current="true"] .langsw__code { position: relative; }
/* Aktive Sprache zusaetzlich durch einen Akzentbalken markieren,
   damit die Kennzeichnung nicht allein ueber Farbe erfolgt. */
.langsw a[aria-current="true"] .langsw__code::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 2px;
  background: var(--c-accent);
}

.header-cta { flex: none; }

/* Hamburger */
.burger {
  display: none;
  width: 48px; height: 48px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  place-items: center;
  flex: none;
  background: #fff;
}
.burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--c-anthracite);
  position: relative;
  transition: background var(--dur-fast) var(--ease);
}
.burger span::before, .burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px; height: 2px;
  background: var(--c-anthracite);
  transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}
.burger span::before { top: -7px; }
.burger span::after  { top: 7px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* Mobiles Menue */
.mnav {
  position: fixed;
  inset: var(--header-total) 0 0;
  z-index: 99;
  background: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-5) 0 var(--s-9);
  /* Bewegung bewusst senkrecht: jede waagerechte Verschiebung vergroessert
     die Dokumentbreite und kann auf schmalen Geraeten Querscrollen ausloesen. */
  transform: translateY(-14px);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease),
              opacity var(--dur) var(--ease),
              visibility var(--dur-slow) var(--ease);
}
.mnav.is-open { transform: none; opacity: 1; visibility: visible; }
.mnav__list { display: grid; }
.mnav__list > li { border-bottom: 1px solid var(--border); }
.mnav__link, .mnav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  padding: 1rem 0;
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 650;
  color: var(--c-anthracite);
  text-decoration: none;
  text-align: left;
}
.mnav__toggle svg { width: 12px; height: 8px; transition: transform var(--dur) var(--ease); flex: none; }
.mnav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mnav__sub {
  display: grid;
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur-slow) var(--ease);
}
.mnav__sub.is-open { max-height: 640px; }
.mnav__sub a {
  display: block;
  padding: 0.75rem 0 0.75rem 1.125rem;
  border-left: 2px solid var(--c-accent-tint-2);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--c-text);
  text-decoration: none;
}
.mnav__sub a:hover { color: var(--c-accent-700); border-left-color: var(--c-accent); }
.mnav__sub li:last-child a { padding-bottom: 1rem; }

.mnav__lang {
  margin-top: var(--s-6);
  padding: var(--s-5);
  background: var(--c-gray-050);
  border-radius: var(--radius);
}
.mnav__lang .langsw { width: 100%; }
.mnav__lang .langsw a { flex: 1; min-height: 52px; font-size: var(--fs-base); }
.mnav__lang .langsw .flag { width: 26px; height: 18px; }
.mnav__lang h2 {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--s-3);
}
.mnav__contact { margin-top: var(--s-6); display: grid; gap: var(--s-3); }
.mnav__contact a { text-decoration: none; color: var(--c-anthracite); font-weight: 600; }

/* -------------------------------------------------------------------------
   08 Hero
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  margin-top: var(--header-total);
  /* Header und Hero ergeben zusammen genau eine Bildschirmhoehe.
     dvh beruecksichtigt ein- und ausblendende Browserleisten auf Mobilgeraeten;
     die vh-Zeile davor ist der Rueckfall fuer aeltere Browser.
     min-height statt height: bei viel Inhalt darf der Bereich wachsen. */
  min-height: calc(100vh - var(--header-total));
  /* svh = kleinste Viewporthoehe (mit eingeblendeter Browserleiste).
     Damit springt nichts, wenn die Leiste beim Scrollen ein- oder ausblendet -
     das waere sonst ein Layout-Shift und schlecht fuer die Core Web Vitals. */
  min-height: calc(100svh - var(--header-total));
  display: grid;
  /* Der Textblock sitzt unten links, damit oben und rechts moeglichst viel
     vom Hintergrundvideo sichtbar bleibt (Aenderung vom 01.09.2026,
     vorher: center). Den Abstand nach unten bringt .hero__inner mit - dort
     muessen die Videoleiste und der Scroll-Hinweis Platz behalten. */
  align-items: end;
  overflow: hidden;
  /* Sofort sichtbare Grundgestaltung, auch ohne Video/Bild */
  background: linear-gradient(112deg, #1b2529 0%, #2b393f 46%, #4a5f67 100%);
  color: #fff;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img, .hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 700ms var(--ease);
}
.hero__media img.is-ready, .hero__media video.is-ready { opacity: 1; }
.hero__media video { position: absolute; inset: 0; }

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Angepasst am 01.09.2026: Seit der Text unten sitzt, darf die linke Seite
     heller werden - dort steht nichts mehr, und mehr vom Video wird sichtbar.
     Dafuer ist der untere Verlauf kraeftiger, damit die Schrift an ihrer
     neuen Stelle sicher lesbar bleibt. */
  background:
    linear-gradient(100deg, rgba(24, 33, 37, 0.86) 0%, rgba(24, 33, 37, 0.64) 36%,
                    rgba(24, 33, 37, 0.22) 66%, rgba(24, 33, 37, 0.10) 100%),
    linear-gradient(0deg, rgba(24, 33, 37, 0.80) 0%, rgba(24, 33, 37, 0.38) 34%,
                    rgba(24, 33, 37, 0) 62%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  /* Das Polster richtet sich nach der Bildschirmhoehe, damit der Hero auf
     flachen Bildschirmen (Laptops mit 720 oder 768 Pixeln) nicht ueber die
     Bildschirmhoehe hinauswaechst. */
  padding-block: clamp(1rem, 3.5vh, 4rem);
  /* Unten mehr Luft: darunter liegen die Videoleiste (etwa 2,6 rem hoch) und
     der Scroll-Hinweis. Ohne diesen Abstand liefe der Text hinein. */
  padding-bottom: clamp(4rem, 9vh, 6.5rem);
  /* 940 statt 760: damit "Dynamische Konzepte" auf grossen Bildschirmen in
     eine Zeile passt. Der Fliesstext darunter bleibt durch sein eigenes
     max-width: 60ch trotzdem gut lesbar breit. */
  max-width: 940px;
}
.hero h1 {
  color: #fff;
  /* Zusaetzlich zur Breite auch an die Hoehe gekoppelt: min() waehlt den
     kleineren der beiden Werte. Diese Groesse gilt fuer die grosse Zeile;
     die kleinere Zeile darunter rechnet in em davon ab und skaliert damit
     automatisch mit - auch in allen Media Queries weiter unten. */
  font-size: clamp(1.75rem, min(1.4rem + 4.4vw, 8.6vh), 5rem);
  margin-bottom: clamp(0.5rem, 1.5vh, 1.5rem);
}
/* Grosse Zeile: der Unternehmensanspruch */
.hero__claim {
  display: block;
  text-wrap: balance;
}
/* Zweite Zeile: kleiner, in der Akzentfarbe. Bleibt Teil der H1, damit die
   Suchbegriffe der Startseite in der wichtigsten Ueberschrift stehen. */
.hero__sub {
  display: block;
  font-size: 0.46em;
  line-height: 1.22;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--c-accent);
  margin-top: 0.5em;
  text-wrap: balance;
}
.hero__lead {
  font-size: clamp(0.9375rem, min(1rem + 0.5vw, 2vh), 1.3125rem);
  color: #e2e7e9;
  max-width: 60ch;
  margin-bottom: clamp(0.75rem, 2.2vh, 2.5rem);
}
.hero .btn-row { margin-bottom: clamp(0.75rem, 2.2vh, 2.5rem); }
.hero .btn--ghost {
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, 0.6);
}
.hero .btn--ghost:hover { --btn-bg: #fff; --btn-bd: #fff; color: var(--c-anthracite); }

/* .hero__trust - Vertrauenszeile im Startbereich. Am 01.09.2026 aus dem
   Startbereich entfernt; die Regeln bleiben stehen, damit die Zeile ohne
   Gestaltungsarbeit wieder eingesetzt werden kann. Siehe build_home. */
.hero__trust {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem 0.625rem 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  color: #eef1f2;
  max-width: 100%;
}
.hero__trust svg { width: 20px; height: 20px; color: var(--c-accent); flex: none; }

/* Bildmarke aus dem Logo als Gestaltungselement im Startbereich */
.hero__mark {
  position: absolute;
  right: 6%;
  bottom: 8%;
  z-index: 1;
  /* Seitenverhaeltnis der Bildmarke: 96 x 93 */
  width: clamp(72px, 7vw, 104px);
  aspect-ratio: 96 / 93;
  display: block;
  background-image: var(--mark);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.9;
  pointer-events: none;
}

/* Scroll-Hinweis */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 3;
  width: 26px; height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 14px;
}
.hero__scroll::after {
  content: "";
  position: absolute;
  left: 50%; top: 7px;
  width: 3px; height: 8px;
  background: #fff;
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scrollDot 2s var(--ease) infinite;
}
@keyframes scrollDot {
  0%, 100% { opacity: 0; transform: translate(-50%, 0); }
  35%      { opacity: 1; }
  70%      { opacity: 0; transform: translate(-50%, 12px); }
}

/* -------------------------------------------------------------------------
   09  Seitenkopf der Unterseiten
   ------------------------------------------------------------------------- */
.pagehead {
  margin-top: var(--header-total);
  position: relative;
  background: linear-gradient(112deg, #1b2529 0%, #2b393f 52%, #45585f 100%);
  color: #fff;
  padding-block: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  overflow: hidden;
}
.pagehead::after {
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 320px; height: 320px;
  background:
    linear-gradient(var(--c-accent), var(--c-accent)) 0 0 / 46% 46% no-repeat,
    linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08)) 54% 54% / 46% 46% no-repeat;
  opacity: 0.5;
  transform: rotate(0deg);
  pointer-events: none;
}
.pagehead h1 { color: #fff; font-size: var(--fs-3xl); margin-bottom: var(--s-4); }
.pagehead .lead { color: #dbe2e5; }
.pagehead__inner { position: relative; z-index: 1; max-width: 780px; }

/* -------------------------------------------------------------------------
   Hintergrundfoto im Seitenkopf
   Das Foto liegt hinter dem bisherigen Farbverlauf und wird kraeftig
   abgedunkelt. Dadurch bleibt das Bild als Stimmungstraeger erkennbar,
   waehrend Ueberschrift, Fliesstext und der helle Videokasten jederzeit gut
   lesbar bleiben. Die Staerke laesst sich ueber --ph-dim nachjustieren.
   Die Bildadresse setzt der Seitengenerator als kleiner Stilblock in den
   Kopfbereich der jeweiligen Seite - schmale Bildschirme laden die
   kleinere Datei.
   ------------------------------------------------------------------------- */
.pagehead--img { --ph-dim: 0.86; }
.pagehead__bg {
  position: absolute;
  inset: 0;
  background-position: 50% 45%;
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(0.7);
  pointer-events: none;
}
.pagehead__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg,
    rgba(20, 28, 32, var(--ph-dim)) 0%,
    rgba(30, 41, 46, calc(var(--ph-dim) - 0.06)) 52%,
    rgba(62, 80, 87, calc(var(--ph-dim) - 0.22)) 100%);
}
@media (max-width: 700px) {
  /* Schmale Bildschirme: kleinere Datei, und der Text laeuft ueber die
     ganze Breite - dort darf das Bild nicht durchschlagen. */
  .pagehead--img { --ph-dim: 0.9; }
  .pagehead__bg { background-position: 50% 50%; }
}
@media (prefers-contrast: more) {
  .pagehead--img { --ph-dim: 0.96; }
}

/* -------------------------------------------------------------------------
   Kopfbereich mit Erklaervideo
   Sobald die Videodatei vorliegt, steht das Video direkt neben der
   Ueberschrift - ohne Scrollen sichtbar. Zweispaltig ab 900 px, darunter
   untereinander.
   ------------------------------------------------------------------------- */
.pagehead--video > .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 3.5rem);
  /* Telefon: Text, dann Video, dann Schaltflaechen. So steht die Erklaerung
     direkt unter der Einleitung und nicht hinter den Schaltflaechen.
     minmax(0, 1fr) statt der voreingestellten auto-Spalte: sonst richtet sich
     die Spaltenbreite nach dem breitesten Inhalt und der Videokasten laeuft
     rechts aus dem Bildschirm. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "text" "video" "cta";
}
.pagehead--video .pagehead__inner { max-width: none; grid-area: text; }
.pagehead__video { position: relative; z-index: 1; grid-area: video; }
.pagehead__cta { grid-area: cta; margin: 0; }
/* Der Videokasten ist hell - auf dem dunklen Band wirkt er als Karte. */
.pagehead__video .videobox {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 255, 255, 0.16);
}
@media (min-width: 900px) {
  .pagehead--video > .wrap {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-areas:
      "text  video"
      "cta   video";
    align-items: start;
    row-gap: clamp(1.25rem, 1rem + 1vw, 2rem);
  }
  /* Video ueber beide Zeilen, senkrecht mittig zum Textblock */
  .pagehead__video { align-self: center; }
}
@media (max-width: 899px) {
  /* Untereinander: erst Text, dann Video. Der Abstand nach unten wird
     kleiner, damit der Kopfbereich auf dem Telefon nicht ausufert. */
  .pagehead--video { padding-bottom: clamp(2rem, 1.4rem + 2vw, 3rem); }
}

/* -------------------------------------------------------------------------
   Blaetternavigation zwischen den Leistungsseiten
   Sitzt im dunklen Kopfbereich. Ab 1360 px stehen die Pfeile links und
   rechts am Rand des Kopfbereichs - dort ist genug Platz neben dem
   Inhaltsbereich (--wrap 1240 px), sodass sie keinen Text ueberdecken.
   Darunter ruecken sie in eine Reihe unter den Inhalt: Pfeil, Punkte und
   Zaehler nebeneinander. Es sind echte Verweise, keine Schaltflaechen -
   die Navigation funktioniert daher auch ohne JavaScript.
   ------------------------------------------------------------------------- */
.svcpager {
  /* Steht als direktes Kind des Kopfbereichs ausserhalb von .wrap, damit die
     Pfeile am Rand des Kopfbereichs verankert werden koennen und nicht am
     Inhaltsbereich. Den Seitenabstand bringt die Navigation deshalb selbst
     mit. */
  padding-inline: var(--gutter);
  margin-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 0.3rem + 1vw, 1rem);
  flex-wrap: wrap;
}

/* --- Pfeile --- */
.svcpager__arrow {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease,
              transform 0.2s ease;
}
.svcpager__arrow .ico { width: 22px; height: 22px; }
.svcpager__arrow:hover,
.svcpager__arrow:focus-visible {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}
.svcpager__arrow--prev:hover { transform: translateX(-3px); }
.svcpager__arrow--next:hover { transform: translateX(3px); }

/* --- Punkte und Zaehler --- */
.svcpager__bar {
  position: relative;
  z-index: 2;
  /* Punkte oben, Zaehler darunter - beides mittig unter dem Kopfbereich. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.svcpager__dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.svcpager__dot {
  display: block;
  width: 26px; height: 26px;      /* Klickflaeche, der Punkt selbst ist kleiner */
  position: relative;
  border-radius: 50%;
}
.svcpager__dot::before {
  content: "";
  position: absolute;
  inset: 9px;                     /* ergibt einen Punkt von 8 px */
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
  transition: background-color 0.2s ease, inset 0.2s ease;
}
.svcpager__dot:hover::before,
.svcpager__dot:focus-visible::before {
  background: #fff;
  inset: 7px;
}
.svcpager__dot.is-current::before {
  background: var(--c-accent);
  inset: 6px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
}
/* Hinweis auf die Wischgeste.
   Steht immer im Quelltext, wird aber nur angezeigt, wenn beides zutrifft:
   ein Touchgeraet (pointer: coarse) unterhalb von 1360 px UND laufendes
   JavaScript (Klasse js-swipe, gesetzt von Modul P in main.js). Ohne
   JavaScript gaebe es nichts zu wischen - dann bleibt der Hinweis weg. */
.svcpager__hint {
  display: none;
  margin: 0.35rem 0 0;
  /* Das Symbol steht an der ERSTEN Zeile, nicht senkrecht mittig - sonst
     schwebt es bei zweizeiligem Text neben dem Zeilenzwischenraum. */
  align-items: flex-start;
  gap: 0.45rem;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
  text-align: left;
}
.svcpager__hint .ico {
  width: 19px; height: 19px;
  flex: 0 0 auto;
  opacity: 0.85;
  margin-top: 0.1em;
}
.svcpager__hint span { max-width: 42ch; }
@media (pointer: coarse) and (max-width: 1359px) {
  .js-swipe .svcpager__hint { display: inline-flex; }
  /* Genau dort, wo die Wischgeste wirklich greift, werden die Pfeile
     ueberfluessig - die Geste tritt an ihre Stelle. Die Bedingung ist
     absichtlich dieselbe wie beim Hinweis: Auf einem schmalen Fenster mit
     Maus oder bei abgeschaltetem JavaScript bleiben die Pfeile stehen, sonst
     gaebe es dort gar keinen Weg mehr zur naechsten Leistung. Im Quelltext
     bleiben sie in jedem Fall - die Wischgeste liest ihre Adressen aus. */
  .js-swipe .svcpager__arrow { display: none; }
  .js-swipe .svcpager__bar { margin-bottom: 0; }
}
@media (prefers-contrast: more) {
  .svcpager__hint { color: #fff; }
}

.svcpager__count {
  margin: 0;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.78);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Schmale Bildschirme: zwei Zeilen statt Umbruch mitten in der Reihe ---
   Unter etwa 560 px passen Pfeil, sechs Punkte, Zaehler und Pfeil nicht mehr
   nebeneinander. Statt eines unkontrollierten Umbruchs stehen dann oben die
   Punkte mit dem Zaehler und darunter mittig die beiden Pfeile. */
@media (max-width: 560px) {
  .svcpager__bar {
    order: -1;
    flex: 1 0 100%;
    margin-bottom: 0.35rem;
  }
  .svcpager { gap: 1rem; }
}

/* --- Ab 1360 px: Pfeile bleiben beim Scrollen stehen ---
   Sie sind dann am Bildschirmrand verankert (position: fixed) und senkrecht
   mittig. Dadurch laesst sich aus jeder Scrollposition zur vorherigen oder
   naechsten Leistung wechseln, nicht nur oben im Kopfbereich.

   Weil sie dabei ueber helle Abschnitte laufen, wechselt die Gestaltung von
   "hell auf dunklem Band" zu einer eigenstaendigen weissen Schaltflaeche mit
   Rahmen und Schatten. Die wirkt sowohl auf dem dunklen Kopfbereich als auch
   auf weissem Grund und in der dunklen Fusszeile.

   Erst ab 1360 px, weil nur dort neben dem Inhaltsbereich (--wrap 1240 px)
   genug Platz bleibt. Darunter und auf Telefonen stehen die Pfeile weiterhin
   fest unter dem Kopfbereich. */
@media (min-width: 1360px) {
  .svcpager__arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 56px; height: 56px;
    z-index: 90;
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(32, 43, 48, 0.14);
    color: var(--c-anthracite);
    box-shadow: 0 4px 16px rgba(32, 43, 48, 0.16);
  }
  .svcpager__arrow:hover,
  .svcpager__arrow:focus-visible {
    background: var(--c-accent-600);
    border-color: var(--c-accent-600);
    color: #fff;
  }
  .svcpager__arrow--prev { left: clamp(0.75rem, 1.4vw, 1.75rem); }
  .svcpager__arrow--next { right: clamp(0.75rem, 1.4vw, 1.75rem); }
  .svcpager__arrow--prev:hover { transform: translateY(-50%) translateX(-3px); }
  .svcpager__arrow--next:hover { transform: translateY(-50%) translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .svcpager__arrow,
  .svcpager__dot::before { transition: none; }
  .svcpager__arrow--prev:hover,
  .svcpager__arrow--next:hover { transform: none; }
  @media (min-width: 1360px) {
    .svcpager__arrow--prev:hover,
    .svcpager__arrow--next:hover { transform: translateY(-50%); }
  }
}

@media (prefers-contrast: more) {
  .svcpager__arrow { border-color: #fff; background: rgba(0, 0, 0, 0.45); }
  .svcpager__dot::before { background: #fff; }
  .svcpager__count { color: #fff; }
}

/* -------------------------------------------------------------------------
   Seitenwechsel als Schiebebewegung (View Transitions)

   Beim Wechsel zwischen zwei Leistungsseiten schiebt sich die alte Seite aus
   dem Bild, waehrend die neue von der anderen Seite hereinkommt - wie bei
   einem Schieberegler. Umgesetzt mit der View-Transitions-Schnittstelle des
   Browsers; es wird nichts nachgeladen und kein Zwischenzustand gebaut.

   Die Freischaltung steht bewusst NICHT hier, sondern als kurzer Stilblock im
   Kopf der Leistungsseiten (@view-transition, gesetzt in build_service).
   Grund: Die Regel gilt immer fuer das ganze Dokument. Stuende sie hier,
   wuerde jede Seite der Website so wechseln - gewollt ist der Effekt nur
   zwischen den sechs Leistungsseiten.

   Die Richtung merkt sich Modul Q in main.js: data-vt="zurueck" dreht die
   Bewegung um. Ohne Angabe wird vorwaerts geschoben.

   Browser ohne Unterstuetzung wechseln einfach wie bisher - es geht nichts
   verloren.
   ------------------------------------------------------------------------- */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 340ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: both;
  /* Ohne diese Zeile ueberblendet der Browser zusaetzlich additiv - beim
     Schieben sieht das nach einem hellen Schleier aus. */
  mix-blend-mode: normal;
}
::view-transition-old(root) { animation-name: vt-raus-links; }
::view-transition-new(root) { animation-name: vt-rein-rechts; }
:root[data-vt="zurueck"]::view-transition-old(root) { animation-name: vt-raus-rechts; }
:root[data-vt="zurueck"]::view-transition-new(root) { animation-name: vt-rein-links; }

@keyframes vt-raus-links  { from { transform: translateX(0);      } to { transform: translateX(-100%); } }
@keyframes vt-rein-rechts { from { transform: translateX(100%);   } to { transform: translateX(0);     } }
@keyframes vt-raus-rechts { from { transform: translateX(0);      } to { transform: translateX(100%);  } }
@keyframes vt-rein-links  { from { transform: translateX(-100%);  } to { transform: translateX(0);     } }

/* Wer Bewegung reduziert haben moechte, bekommt den harten Wechsel. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* -------------------------------------------------------------------------
   Einleitungsabsatz der Startseite
   Steht unmittelbar hinter dem Startbereich und ist damit der erste
   Fliesstext im Hauptbereich - die fuer Suchmaschinen stärkste Position
   ausserhalb der Ueberschrift. Bewusst etwas groesser als normaler
   Fliesstext und in kraeftiger Schriftfarbe: Er ist eine Aussage, keine
   Randnotiz.
   ------------------------------------------------------------------------- */
.intro { padding-block: clamp(2.75rem, 2rem + 2.5vw, 4.5rem); }
/* .rule ist ein <span> und damit von Haus aus inline - ohne diese Zeile
   bliebe der rote Balken unsichtbar. In .section-head sorgt das dortige
   Raster dafuer; hier steht er allein. */
.intro .rule { display: block; }
.intro__text {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.4375rem);
  line-height: 1.55;
  color: var(--c-anthracite);
  max-width: 62ch;
  margin: 0;
  text-wrap: pretty;
}
/* Die Vertrauensleiste hielt bisher grossen Abstand zum Startbereich. Jetzt
   steht der Einleitungsabsatz dazwischen - der Abstand darf kleiner sein. */
.intro + .trustbar { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.75rem); }

/* Querverweise zwischen den Regionsseiten. Bewusst schlicht: eine Zeile mit
   Beschriftung und drei Verweisen, kein zweites Menue. */
.regionslinks {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.25rem;
  margin: 0;
  font-size: var(--fs-sm);
}
.regionslinks > span { color: var(--c-text-muted); }
.regionslinks a { color: var(--c-accent-700); text-decoration: none; font-weight: 600; }
.regionslinks a:hover { text-decoration: underline; }


/* -------------------------------------------------------------------------
   09 Vertrauens-/Vorteilsleiste
   ------------------------------------------------------------------------- */
/* Die Leiste setzt bewusst ab: erst ein Abstand zum Herobereich, dann eine
   Linie oben und unten. Dadurch wirkt sie als geschlossenes Band und klebt
   nicht mehr am Video. */
.trustbar {
  margin-top: clamp(5.3125rem, 5.0625rem + 1vw, 5.9375rem);
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.trustbar__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.trustbar__item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--s-4);
  padding: var(--s-6) var(--s-5);
  border-left: 1px solid var(--border);
}
.trustbar__item:first-child { border-left: 0; padding-left: 0; }
.trustbar__item:last-child { padding-right: 0; }
.trustbar__ico {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--c-accent-700);
  background: var(--c-accent-tint);
  border-radius: var(--radius);
}
.trustbar__ico svg { width: 23px; height: 23px; }
.trustbar__t {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-anthracite);
  margin-bottom: 0.25rem;
}
.trustbar__d { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.5; }

/* -------------------------------------------------------------------------
   10 Karten
   ------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--c-gray-300); }

.card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--c-gray-100);
  overflow: hidden;
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}
.card:hover .card__media img { transform: scale(1.045); }
.card__media::after {
  content: "";
  position: absolute;
  inset-inline: 0; bottom: 0;
  height: 3px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}
.card:hover .card__media::after { transform: scaleX(1); }

/* Das Icon liegt im Textbereich und ragt nach oben ueber die Bildkante.
   Es darf NICHT in .card__media stehen – dort wuerde es von overflow:hidden
   abgeschnitten. */
.card__ico {
  position: absolute;
  left: var(--s-5);
  top: -28px;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: #fff;
  color: var(--c-accent-700);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  z-index: 2;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.card__ico svg { width: 27px; height: 27px; }
.card:hover .card__ico { background: var(--c-accent-600); color: #fff; border-color: var(--c-accent-600); }

.card__body {
  position: relative;
  padding: var(--s-7) var(--s-5) var(--s-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card__body > .arrow-link { margin-top: auto; padding-top: var(--s-4); }
.card__title { font-size: var(--fs-lg); margin-bottom: var(--s-3); }

/* Die ganze Karte ist ein Verweis (siehe service_card in _dev/components.py).
   Der Verweis uebernimmt das Spaltenlayout, damit .card__body wie bisher den
   restlichen Platz fuellt.

   Der Fokusrahmen liegt bewusst INNEN (outline-offset negativ): .card hat
   overflow: hidden, ein aussen liegender Rahmen wuerde abgeschnitten. */
.card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
  text-decoration: none;
}
.card__link:focus-visible {
  outline: 3px solid var(--c-accent-700);
  outline-offset: -3px;
}
.card__text { font-size: var(--fs-base); color: var(--c-text-muted); margin-bottom: var(--s-4); }
.card__list { margin-bottom: var(--s-5); }
.card__list li { font-size: var(--fs-sm); }

/* Kompakte Karte ohne Bild */
.tile {
  padding: var(--s-6);
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--c-bluegray);
  border-radius: var(--radius);
  transition: border-top-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.tile:hover { border-top-color: var(--c-accent); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.tile__ico {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  color: var(--c-accent-700);
  background: var(--c-accent-tint);
  border-radius: var(--radius);
  margin-bottom: var(--s-4);
}
.tile__ico svg { width: 23px; height: 23px; }
.tile h3 { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.tile p { font-size: var(--fs-base); color: var(--c-text-muted); margin: 0; }

/* Bewertungen */
.rating-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-6);
  align-items: center;
  padding: var(--s-6);
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--radius);
}
.rating-summary__score {
  font-family: var(--font-head);
  font-size: 3.25rem;
  min-width: 4.5ch;
  font-weight: 700;
  line-height: 1;
  color: var(--c-anthracite);
}
.rating-summary__max { font-size: 1.25rem; font-weight: 600; color: var(--c-text-muted); }
.rating-summary__meta { margin: .5rem 0 0; font-size: var(--fs-base); color: var(--c-text-muted); }
.rating-summary__meta strong { color: var(--c-anthracite); }
.rating-summary__stand { font-size: var(--fs-sm); }

/* Google-Kennzeichnung ---------------------------------------------------- */
.google-g { width: 18px; height: 18px; flex: none; }
.rating-summary__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--c-anthracite);
}
.review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.review__source {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
}
.review__source .google-g { width: 14px; height: 14px; }
.btn--google { gap: 0.625rem; }
.btn--google .google-g { width: 20px; height: 20px; }
.btn--google:hover .google-g { filter: brightness(1.15); }
.rating-note {
  max-width: 78ch;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  padding-left: var(--s-4);
  border-left: 3px solid var(--border-strong);
}
.review__text { font-size: var(--fs-lg); line-height: 1.5; color: var(--c-anthracite); }
.review__text p { margin: 0; }
blockquote.review__text { margin: 0; }
.review__translation { font-size: var(--fs-sm); color: var(--c-text-muted); margin: 0; }
.stars { display: inline-flex; gap: 3px; }
.stars svg { width: 20px; height: 20px; color: var(--c-accent); fill: currentColor; }
/* Platzhalter-Sterne bleiben Kontur, bis echte Bewertungen vorliegen. */
.stars svg.is-empty { color: var(--c-gray-300); fill: none; }

.review {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  height: 100%;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.review:hover { box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.review__text { font-size: var(--fs-base); color: var(--c-text); flex: 1; }
.review__meta { display: flex; align-items: center; gap: var(--s-3); border-top: 1px solid var(--border); padding-top: var(--s-4); }
.review__avatar {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--c-bluegray-tint);
  color: var(--c-bluegray-700);
  font-family: var(--font-head);
  font-weight: 700;
  border-radius: var(--radius);
  flex: none;
}
.review__name { font-family: var(--font-head); font-weight: 650; color: var(--c-anthracite); font-size: var(--fs-base); }
.review__date { font-size: var(--fs-sm); color: var(--c-text-muted); }

/* Platzhalter-Auszeichnung */
.ph {
  display: inline-block;
  padding: 0.1em 0.45em;
  background: repeating-linear-gradient(135deg, #fff4e0, #fff4e0 6px, #ffe9c7 6px, #ffe9c7 12px);
  border: 1px dashed #c98a1a;
  border-radius: var(--radius-xs);
  color: #7a5209;
  font-size: 0.92em;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
}
.ph-note {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: #fff9ef;
  border: 1px solid #f0d9ac;
  border-left: 4px solid #d99a24;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  color: #6b4c10;
}
.ph-note svg { width: 20px; height: 20px; flex: none; color: #c98a1a; margin-top: 2px; }
.ph-note p { margin: 0; }

/* Video-Platzhalter */
/* Ueberschrift ueber dem Videokasten - ersetzt den frueheren Inline-Stil */
.videobox__h {
  font-size: 1.5rem;
  margin-bottom: var(--s-4);
}
.videobox {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  /* In der zweispaltigen Ansicht wird die Videospalte schmal - ein reiner
     16:9-Kasten waere dann zu flach fuer Abspielknopf und mehrzeiligen
     Titel. Die Mindesthoehe faengt das ab.
     width: 100% ist dabei Pflicht: ohne feste Breite wuerde der Browser den
     Kasten breiter machen, um trotz Mindesthoehe bei 16:9 zu bleiben - er
     liefe dann aus seiner Spalte heraus. */
  width: 100%;
  min-height: 290px;
  background: var(--c-anthracite);
  overflow: hidden;
}
/* Das Vorschaubild bleibt weitgehend hell - bei hellen Motiven (etwa
   Zeichentrick auf Weiss) wurde es bei 72 % zu einem grauen Brei. Fuer die
   Lesbarkeit der Beschriftung sorgt stattdessen ein Verlauf, der nur unten
   und oben abdunkelt. */
.video-embed img { width: 100%; height: 100%; object-fit: cover; opacity: 0.95; }
.video-embed::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(24, 33, 37, 0.82) 0%, rgba(24, 33, 37, 0.24) 42%,
                    rgba(24, 33, 37, 0) 68%);
}
/* Sobald das Video laeuft, muss der Verlauf weg. Er ist allein dafuer da, dass
   Kennzeichnung und Titel auf dem Standbild lesbar sind. Bleibt er liegen,
   legt er sich unten ueber das Bild - und damit genau ueber die Untertitel,
   die dort eingeblendet werden. */
.video-embed.is-playing::after { content: none; }
/* Beschriftung und Knopf liegen ueber dem Verlauf */
.video-embed__btn, .video-embed__ph-in { z-index: 1; }
.video-embed__btn {
  position: absolute;
  inset: 0;
  /* Abspielknopf und Beschriftung stehen untereinander im Fluss - so koennen
     sie sich auf keiner Bildschirmbreite ueberlagern, egal wie viele Zeilen
     der Titel braucht. Der Knopf sitzt mittig im freien Raum darueber. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.75rem;
  padding: var(--s-5);
  width: 100%;
  text-align: left;
  color: #fff;
  background: linear-gradient(0deg, rgba(24,33,37,.65), rgba(24,33,37,.15));
  transition: background var(--dur) var(--ease);
}
.video-embed__btn:hover { background: linear-gradient(0deg, rgba(24,33,37,.75), rgba(24,33,37,.3)); }
.video-embed__play {
  flex: none;
  margin: auto auto 0;          /* mittig im Raum oberhalb der Beschriftung */
  width: 78px; height: 78px;
  display: grid; place-items: center;
  background: var(--c-accent-600);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(225, 50, 30, 0.5);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.video-embed__play svg { width: 26px; height: 30px; margin-left: 5px; }
.video-embed__btn:hover .video-embed__play { transform: scale(1.08); background: var(--c-accent-700); }
/* -------------------------------------------------------------------------
   Platzhalter, solange die Videodatei noch nicht vorliegt
   Bewusst ohne Abspielknopf: nichts, was zum Klicken einlaedt und dann ins
   Leere fuehrt. Der Bereich zeigt, wo das Video spaeter steht.
   ------------------------------------------------------------------------- */
.video-embed--ph img { opacity: 0.5; filter: grayscale(0.3); }
.video-embed__ph-in {
  position: absolute;
  inset: 0;
  /* Kennzeichnung und Titel stehen im Fluss untereinander am unteren Rand -
     so koennen sie sich auf keiner Bildschirmbreite ueberlagern. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.7rem;
  padding: var(--s-5);
  color: #fff;
  background: linear-gradient(0deg, rgba(24, 33, 37, 0.78), rgba(24, 33, 37, 0.3));
}
/* Gestrichelter Kreis: Hinweis auf ein Video, bewusst ohne Fuellung und ohne
   Klickflaeche. Auf schmalen Geraeten fehlt der Platz - dort entfaellt er. */
.video-embed__ph-ico {
  /* Steht wie der Abspielknopf im Fluss, mittig im Raum oberhalb der
     Beschriftung - sonst legt er sich auf schmalen Spalten ueber den Titel. */
  flex: none;
  margin: auto auto 0;
  width: 74px; height: 74px;
  display: grid; place-items: center;
  border: 2px dashed rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  opacity: 0.7;
}
.video-embed__ph-ico svg { width: 22px; height: 26px; margin-left: 5px; }

/* Deutlich lesbare Kennzeichnung - kein stiller Platzhalter */
.video-embed__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px dashed rgba(255, 255, 255, 0.55);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}
.video-embed--ph .video-embed__label {
  position: static;
  left: auto; bottom: auto;
  max-width: 100%;
}
@media (max-width: 560px) {
  .video-embed__ph-ico { display: none; }
  .video-embed__badge { font-size: 0.6875rem; }
}

.video-embed__label {
  text-align: left;
  max-width: min(560px, 100%);
}
.video-embed__label span {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  background: var(--c-accent-600);
  color: #fff;
  padding: 0.2rem 0.5rem;
  margin-bottom: 0.5rem;
}
.video-embed__label strong {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  color: #fff;
  line-height: 1.25;
}
/* Auf dem Telefon ist ein 16:9-Kasten zu flach: Abspielknopf und ein
   dreizeiliger Titel passen nicht ohne Gedraenge hinein. Der Kasten wird
   deshalb hoeher, der Knopf kleiner. */
@media (max-width: 700px) {
  .video-embed { aspect-ratio: 4 / 3; }
  .video-embed__btn { padding: var(--s-4); gap: 0.5rem; }
  .video-embed__play { width: 58px; height: 58px; }
  .video-embed__play svg { width: 20px; height: 23px; margin-left: 4px; }
  .video-embed__label strong { font-size: var(--fs-base); }
}

.videobox__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  align-items: center;
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.videobox__foot p { margin: 0; max-width: 62ch; }
.videobox__len {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-weight: 650; color: var(--c-anthracite); white-space: nowrap;
}
/* Auf schmalen Telefonen darf die Angabe umbrechen - sonst schiebt sie
   ueber den rechten Bildschirmrand hinaus. */
@media (max-width: 520px) {
  .videobox__len { white-space: normal; }
}
.videobox__len svg { width: 16px; height: 16px; color: var(--c-accent-700); }

/* Standortkarten */
.loc {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.loc:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.loc--hq { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
.loc__media { aspect-ratio: 16 / 9; background: var(--c-gray-100); }
.loc__media img { width: 100%; height: 100%; object-fit: cover; }
.loc__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; gap: var(--s-3); }
.loc__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  padding: 0.2rem 0.6rem;
  background: var(--c-accent-600);
  color: #fff;
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-radius: var(--radius-xs);
}
.loc__badge--alt { background: var(--c-bluegray-700); }
.loc__title { font-size: var(--fs-lg); margin: 0; }
.loc address { font-style: normal; color: var(--c-text-muted); font-size: var(--fs-base); }
.loc__meta { display: grid; gap: 0.375rem; font-size: var(--fs-sm); }
.loc__meta a { color: var(--c-anthracite); text-decoration: none; font-weight: 600; }
.loc__meta a:hover { color: var(--c-accent-700); text-decoration: underline; }
.loc__actions { margin-top: auto; padding-top: var(--s-3); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.loc__focus { font-size: var(--fs-sm); color: var(--c-text-muted); }
.loc__facts { font-size: var(--fs-sm); color: var(--c-anthracite); font-weight: 600; }
:target > .loc, .loc:target { scroll-margin-top: calc(var(--header-h) + 2rem); }

/* -------------------------------------------------------------------------
   11 Prozess & Systemanbindungen
   ------------------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: var(--s-5); }
.step {
  position: relative;
  counter-increment: step;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: var(--s-5);
  padding: var(--s-5);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  background: var(--c-anthracite);
  color: #fff;
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: 700;
  border-radius: var(--radius);
  transition: background var(--dur) var(--ease);
}
.step:hover::before { background: var(--c-accent-600); }
.step h3 { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.step p { font-size: var(--fs-base); color: var(--c-text-muted); margin: 0; }

.steps--flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.steps--flow .step { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.steps--flow .step::before { width: 48px; height: 48px; font-size: var(--fs-base); }

/* Systemanbindungen */
.sysgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.sys {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-5);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.section--dark .sys:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.25); }
.sys__ico {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: rgba(225, 50, 30, 0.16);
  color: #ff8f7d;
  border-radius: var(--radius);
}
.sys__ico svg { width: 22px; height: 22px; }
.sys h3 { font-size: var(--fs-base); margin-bottom: 0.25rem; letter-spacing: 0; }
.sys p { font-size: var(--fs-sm); color: #b7c2c6; margin: 0; }

/* -------------------------------------------------------------------------
   12 Kennzahlen
   ------------------------------------------------------------------------- */
/* Zwei Spalten: die Kennzahlen stehen in der rechten Haelfte eines
   zweispaltigen Abschnitts - vier nebeneinander wurde dort zu eng, lange
   Zahlen sind aus ihrer Spalte gelaufen. */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
/* Die Kennzahl in Worten schliesst die Reihe ab und steht deshalb immer
   allein in einer eigenen Zeile. */
.kpi--word { grid-column: 1 / -1; }
/* Bei ungerader Anzahl Zahlen fuellt die letzte die angebrochene Reihe aus,
   damit rechts daneben keine Luecke bleibt. Die Kennzahl in Worten ist
   immer das letzte Kind, die letzte Zahl also das vorletzte. */
.kpis > .kpi:nth-child(odd):nth-last-child(2) { grid-column: 1 / -1; }
.kpi { padding: var(--s-5) 0; border-top: 3px solid var(--c-accent); }
.kpi__num {
  white-space: nowrap;
  font-family: var(--font-head);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  color: var(--c-anthracite);
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
}
/* Kennzahl als Wort statt als Zahl: muss umbrechen duerfen, sonst schiebt
   sie auf schmalen Telefonen aus ihrer Spalte heraus. */
.kpi__num--word {
  white-space: normal;
  font-size: clamp(1.125rem, 0.9rem + 1.6vw, 1.5rem);
  line-height: 1.3;
  hyphens: auto;
}
.section--dark .kpi__num { color: #fff; }
.kpi__label { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--c-text-muted); }
.section--dark .kpi__label { color: #b7c2c6; }

/* -------------------------------------------------------------------------
   13 FAQ
   ------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--s-3); }
.faq__item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faq__item:has(.faq__q[aria-expanded="true"]) { border-color: var(--c-accent); box-shadow: var(--shadow-sm); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  padding: 1.125rem var(--s-5);
  font-family: var(--font-head);
  font-size: var(--fs-md);
  font-weight: 650;
  color: var(--c-anthracite);
  text-align: left;
}
.faq__q:hover { color: var(--c-accent-700); }
.faq__sign {
  position: relative;
  width: 22px; height: 22px;
  flex: none;
  border: 2px solid var(--c-accent);
  border-radius: var(--radius-xs);
}
.faq__sign::before, .faq__sign::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--c-accent);
  transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.faq__sign::before { width: 10px; height: 2px; }
.faq__sign::after  { width: 2px; height: 10px; }
.faq__q[aria-expanded="true"] .faq__sign::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease);
}
.faq__a > div { overflow: hidden; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a p {
  padding: 0 var(--s-5) var(--s-5);
  font-size: var(--fs-base);
  color: var(--c-text-muted);
  margin: 0;
}

/* -------------------------------------------------------------------------
   14 Karte / Consent
   ------------------------------------------------------------------------- */
.mapbox {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-bluegray-tint);
  min-height: 380px;
}
.mapbox__ph { position: relative; display: block; }
.mapbox__ph img { width: 100%; height: 100%; object-fit: cover; min-height: 380px; }
.mapbox__consent {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--s-5);
  background: linear-gradient(180deg, rgba(32, 43, 48, 0.42), rgba(32, 43, 48, 0.72));
}
.mapbox__panel {
  max-width: 480px;
  text-align: center;
  background: #fff;
  border-radius: var(--radius);
  padding: var(--s-6);
  box-shadow: var(--shadow-lg);
}
.mapbox__panel h3 { font-size: var(--fs-lg); margin-bottom: var(--s-3); }
.mapbox__panel p { font-size: var(--fs-sm); color: var(--c-text-muted); margin-bottom: var(--s-5); }
.mapbox iframe { display: block; width: 100%; height: 100%; min-height: 460px; border: 0; }
.mapbox.is-loaded .mapbox__ph { display: none; }

/* Lokaler Kartenplatzhalter mit Markern */
.staticmap { position: relative; }
.staticmap__pin {
  position: absolute;
  width: 26px; height: 26px;
  transform: translate(-50%, -100%);
  color: var(--c-accent);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
}

/* -------------------------------------------------------------------------
   15 Mehrstufiges Formular
   ------------------------------------------------------------------------- */
.formwrap {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.formwrap__head {
  padding: var(--s-6) var(--s-6) var(--s-5);
  border-bottom: 1px solid var(--border);
  background: var(--c-gray-050);
}
.formwrap__body { padding: var(--s-6); }

/* Zweistufige Fortschrittsanzeige --------------------------------------- */
.steps2 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-top: var(--s-5);
}
.steps2__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-muted);
}
.steps2__item b {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border: 2px solid var(--c-gray-300);
  border-radius: var(--radius-xs);
  background: #fff;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.steps2__item[data-state="current"] { color: var(--c-anthracite); }
.steps2__item[data-state="current"] b { border-color: var(--c-accent); color: var(--c-accent-700); }
.steps2__item[data-state="done"] b {
  background: var(--c-accent-600);
  border-color: var(--c-accent-600);
  color: #fff;
  font-size: 0;
}
.steps2__item[data-state="done"] b::after { content: "\2713"; font-size: 0.85rem; }

.progress2 {
  position: relative;
  height: 4px;
  margin-top: var(--s-4);
  background: var(--c-gray-200);
  border-radius: 2px;
  overflow: hidden;
}
.progress2__bar {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 50%;
  background: linear-gradient(90deg, var(--c-accent-600), var(--c-accent));
  border-radius: 2px;
  transition: width var(--dur-slow) var(--ease);
}

/* Schritte ---------------------------------------------------------------
   Nur wenn JavaScript aktiv ist (Klasse "js" am html-Element), wird jeweils
   ein Schritt angezeigt. Ohne JavaScript stehen beide untereinander und das
   Formular bleibt vollstaendig ausfuellbar und absendbar. */
.js .fstep { display: none; }
.js .fstep.is-active {
  display: block;
  animation: fstepIn var(--dur-slow) var(--ease) both;
}
@keyframes fstepIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
html:not(.js) .steps2,
html:not(.js) .progress2,
html:not(.js) [data-form-next],
html:not(.js) [data-form-prev],
html:not(.js) [data-chosen] { display: none; }

/* Rueckblick auf die Auswahl aus Schritt 1 */
.chosen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.75rem var(--s-4);
  margin-bottom: var(--s-5);
  background: var(--c-accent-tint);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  color: var(--c-anthracite);
}
.chosen[hidden] { display: none; }
.chosen__label { font-weight: 650; }
.chosen__edit {
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--c-accent-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.chosen__edit:hover { color: var(--c-accent-800); }

/* Kompaktere Auswahlkacheln im schlanken Formular */
.choices--compact .choice__box { min-height: 58px; padding: 0.75rem 0.875rem; }

/* Felder */
.field { margin-bottom: var(--s-5); }
.field > label, .fieldset__legend {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--c-anthracite);
  margin-bottom: 0.4rem;
}
.field .req { color: var(--c-accent-700); }
.field__help { font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: 0.35rem; }

.input, .select, .textarea {
  display: block;
  width: 100%;
  padding: 0.8125rem 0.9375rem;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  color: var(--c-text);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  min-height: 48px;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-bluegray); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(225, 50, 30, 0.18);
}
.textarea { min-height: 128px; resize: vertical; line-height: 1.55; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235d6e76' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
  padding-right: 2.75rem;
}

.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea { border-color: var(--c-error); background: var(--c-error-tint); }

.error-msg {
  display: none;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-error);
}
.error-msg::before {
  content: "!";
  display: grid; place-items: center;
  width: 16px; height: 16px;
  background: var(--c-error);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  flex: none;
}
.field.has-error .error-msg { display: flex; }

/* Auswahlkacheln (Leistungen) */
.choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: var(--s-3);
}
.choice { position: relative; }
.choice input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.choice__box {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 0.875rem;
  align-items: center;
  padding: 1rem;
  min-height: 68px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.choice__mark {
  position: relative;
  width: 24px; height: 24px;
  border: 2px solid var(--c-gray-300);
  border-radius: var(--radius-xs);
  background: #fff;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.choice__mark::after {
  content: "";
  position: absolute;
  left: 50%; top: 46%;
  width: 11px; height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(-45deg) scale(0.4);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.choice__label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--c-anthracite);
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
.choice input:hover + .choice__box { border-color: var(--c-bluegray); }
.choice input:focus-visible + .choice__box {
  outline: 3px solid var(--c-accent-700);
  outline-offset: 2px;
}
.choice input:checked + .choice__box {
  border-color: var(--c-accent);
  background: var(--c-accent-tint);
  box-shadow: inset 0 0 0 1px var(--c-accent);
}
.choice input:checked + .choice__box .choice__mark {
  background: var(--c-accent-600);
  border-color: var(--c-accent-600);
}
.choice input:checked + .choice__box .choice__mark::after {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-45deg) scale(1);
}

/* Checkbox einzeln (Datenschutz) */
.check { display: grid; grid-template-columns: 24px 1fr; gap: 0.875rem; align-items: start; }
.check input { width: 24px; height: 24px; margin: 0; accent-color: var(--c-accent-600); flex: none; }
.check label { font-size: var(--fs-sm); color: var(--c-text); line-height: 1.55; }

.fieldset { border: 0; margin: 0 0 var(--s-5); padding: 0; }

/* Absendebereich */
.fnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}
.fnav .field__help { max-width: 34ch; }
.field__opt { font-weight: 400; color: var(--c-text-muted); }
.fieldset__legend { padding: 0; }

/* Statusmeldungen */
.formstatus {
  display: none;
  gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--radius);
  margin-bottom: var(--s-5);
  font-size: var(--fs-base);
}
.formstatus.is-shown { display: flex; }
.formstatus--info { background: var(--c-bluegray-tint); border-left: 4px solid var(--c-bluegray-700); }
.formstatus--error { background: var(--c-error-tint); border-left: 4px solid var(--c-error); color: #7a1a14; }
.formstatus--ok { background: #eaf6ef; border-left: 4px solid var(--c-success); color: #14512f; }

.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   16 CTA-Band & Footer
   ------------------------------------------------------------------------- */
.ctaband {
  position: relative;
  background: var(--c-anthracite-700);
  color: #fff;
  padding-block: clamp(2.75rem, 1.8rem + 4vw, 4.5rem);
  overflow: hidden;
}
.ctaband::before {
  content: "";
  position: absolute;
  right: -56px; top: -56px;
  width: 210px; height: 210px;
  background:
    linear-gradient(var(--c-accent), var(--c-accent)) 100% 0 / 46% 46% no-repeat,
    linear-gradient(rgba(255,255,255,.09), rgba(255,255,255,.09)) 0 100% / 46% 46% no-repeat;
  opacity: 0.4;
  pointer-events: none;
}
.ctaband__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-6);
  align-items: center;
}
.ctaband h2 { color: #fff; font-size: var(--fs-2xl); margin-bottom: var(--s-2); }
.ctaband p { color: #d5dde0; margin: 0; max-width: 60ch; }

.site-footer { background: var(--c-anthracite); color: #b9c3c7; padding-block: var(--s-9) var(--s-6); }
.footer-grid {
  display: grid;
  /* Vier Spalten: Marke, Navigation, Leistungen, Kontakt.
     Die Spalte "Regionen" ist am 02.09.2026 wieder entfallen; die Werte
     entsprechen wieder dem Stand davor. */
  grid-template-columns: 1.6fr 1fr 1.2fr 1.3fr;
  gap: var(--s-7);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-brand img { width: 148px; height: 68px; object-fit: contain; margin-bottom: var(--s-4); }
.footer-brand p { font-size: var(--fs-sm); color: #a8b4b9; max-width: 38ch; }
.footer-col h2 {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--c-accent);
  display: inline-block;
}
.footer-col ul { display: grid; gap: 0.625rem; }
.footer-col a {
  color: #b9c3c7;
  text-decoration: none;
  font-size: var(--fs-sm);
  transition: color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}
.footer-col a:hover { color: #fff; padding-left: 4px; }
/* Auf Touchgeraeten bequeme Tippflaechen in der Fusszeile */
@media (pointer: coarse) {
  .footer-col a, .footer-bottom a, .footer-bottom button {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .footer-col ul { gap: 0; }
}
.footer-col address { font-style: normal; font-size: var(--fs-sm); color: #a8b4b9; margin-bottom: var(--s-4); }
.footer-contact a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 600; color: #fff;
  min-height: 40px;            /* Telefon und E-Mail sind wichtige Tippziele */
}
.footer-contact svg { width: 16px; height: 16px; color: var(--c-accent); flex: none; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-5);
  font-size: var(--fs-sm);
  color: #96a3a8;
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer-bottom a { color: #96a3a8; text-decoration: none; }
.footer-bottom a:hover { color: #fff; text-decoration: underline; }
.footer-bottom button { color: #96a3a8; font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom button:hover { color: #fff; }

/* -------------------------------------------------------------------------
   17 Breadcrumb, 404, Rechtstexte
   ------------------------------------------------------------------------- */
.crumbs { padding-block: 0.875rem; border-bottom: 1px solid var(--border); background: #fff; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); }
.crumbs li { display: flex; align-items: center; gap: 0.5rem; color: var(--c-text-muted); }
.crumbs li + li::before { content: "/"; color: var(--c-gray-300); }
/* Tippflaeche: mindestens 24 px hoch (WCAG 2.2, Zielgroesse), auf
   Touchgeraeten grosszuegiger. */
.crumbs a {
  color: var(--c-text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
@media (pointer: coarse) {
  .crumbs { padding-block: 0.5rem; }
  .crumbs a { min-height: 36px; }
}
.crumbs a:hover { color: var(--c-accent-700); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--c-anthracite); font-weight: 600; }

.prose { max-width: 76ch; }
.prose h2 { font-size: var(--fs-2xl); margin-top: var(--s-8); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-lg); margin-top: var(--s-6); }
.prose ul { margin: 0 0 var(--s-4); display: grid; gap: 0.5rem; }
.prose ul li { position: relative; padding-left: 1.25rem; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.65em;
  width: 7px; height: 7px;
  background: var(--c-accent);
}
.prose dl { margin: 0 0 var(--s-5); }
.prose dt { font-weight: 650; color: var(--c-anthracite); margin-top: var(--s-4); }
.prose dd { margin: 0.25rem 0 0; }

/* --- Rechtstexte: Impressum und Datenschutzhinweise --------------------- */
.prose p { margin: 0 0 var(--s-4); }
.prose > address { margin: 0 0 var(--s-4); line-height: var(--lh-body); }
.prose--legal { max-width: 72ch; }
.prose--legal h2 { margin-top: var(--s-8); }
.prose--legal dd { color: var(--c-text); }

/* Hinweis auf einen noch nicht freigeschalteten Seitenteil */
.legal-status {
  border-left: 3px solid var(--c-accent);
  background: var(--c-accent-tint);
  padding: var(--s-3) var(--s-4);
  font-weight: 600;
  color: var(--c-anthracite);
}

/* Standzeile am Fuss der Rechtstexte */
.legal-stand {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}
.legal-stand + .legal-stand {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.err404 { display: grid; place-items: center; text-align: center; min-height: 62vh; padding-block: var(--s-9); }
.err404__code {
  font-family: var(--font-head);
  font-size: clamp(5rem, 3rem + 12vw, 11rem);
  font-weight: 700;
  line-height: 0.9;
  color: var(--c-gray-100);
  letter-spacing: -0.04em;
}
.err404__code span { color: var(--c-accent); }

/* Related-Links */
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.related a,
.related__item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-5);
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--c-bluegray);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--c-anthracite);
  font-family: var(--font-head);
  font-weight: 650;
  font-size: var(--fs-base);
  transition: border-left-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.related a:hover,
.related__item:hover {
  border-left-color: var(--c-accent);
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
  color: var(--c-accent-700);
}
.related__ico {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--c-gray-050);
  color: var(--c-accent-700);
  border-radius: var(--radius);
}
.related__ico svg { width: 21px; height: 21px; }

/* Aktueller Bereich in der Leistungsleiste.
   Kein Verweis, sondern ein <span> - ein Link auf die Seite, auf der man
   bereits steht, waere ins Leere gelaufen. Die Flaeche nutzt --c-accent-600
   statt --c-accent: nur diese Abstufung erreicht mit weisser Schrift den
   geforderten Kontrast (5.1:1). */
.related__item.is-current {
  background: var(--c-accent-600);
  border-color: var(--c-accent-600);
  border-left-color: var(--c-accent-800);
  color: #fff;
  cursor: default;
  transform: none;
}
.related__item.is-current:hover {
  background: var(--c-accent-600);
  border-left-color: var(--c-accent-800);
  color: #fff;
  transform: none;
  box-shadow: none;
}
.related__item.is-current .related__ico {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
@media (prefers-contrast: more) {
  .related__item.is-current { background: var(--c-accent-800); border-color: var(--c-accent-800); }
}

/* Info-Box (Fachbegriff-Erklaerung) */
.infobox {
  padding: var(--s-5);
  background: var(--c-bluegray-tint);
  border-left: 4px solid var(--c-bluegray-700);
  border-radius: var(--radius);
  font-size: var(--fs-base);
}
.infobox h3 { font-size: var(--fs-base); margin-bottom: var(--s-2); }
.infobox p { margin: 0; color: var(--c-text-muted); }

/* -------------------------------------------------------------------------
   18 Cookie-Hinweis
   ------------------------------------------------------------------------- */
.cookiebar {
  position: fixed;
  left: var(--s-4);
  bottom: var(--s-4);
  z-index: 200;
  width: min(440px, calc(100vw - 2rem));
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--c-accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--s-5);
  transform: translateY(140%);
  transition: transform var(--dur-slow) var(--ease);
}
.cookiebar.is-shown { transform: translateY(0); }
.cookiebar h2 { font-size: var(--fs-base); margin-bottom: var(--s-2); }
.cookiebar p { font-size: var(--fs-sm); color: var(--c-text-muted); margin-bottom: var(--s-4); }
.cookiebar .btn-row { gap: var(--s-3); }
.cookiebar .btn { flex: 1; }

/* Google-Bewertung in der Fusszeile */
.frating {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.625rem 0.875rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.frating:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.32); }
.frating__g { flex: none; display: inline-flex; }
.frating__g svg { width: 20px; height: 20px; }
.frating__body { display: grid; gap: 0.25rem; }
.frating__stars { display: inline-flex; gap: 2px; }
.frating__stars svg { width: 15px; height: 15px; fill: currentColor; color: #f5a623; }
.frating__stars svg.is-empty { color: rgba(255, 255, 255, 0.3); fill: currentColor; }
.frating__txt { font-size: var(--fs-sm); color: #cfd7da; line-height: 1.3; }
.frating__txt strong { color: #fff; font-size: 1rem; }

/* -------------------------------------------------------------------------
   19 Animationen / Scroll-Reveal
   ------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-reveal="fade"] { transform: none; }
.reveal[data-reveal="left"]  { transform: translateX(-26px); }
.reveal[data-reveal="right"] { transform: translateX(26px); }
.reveal.is-visible[data-reveal] { transform: none; }

/* Auf schmalen Bildschirmen keine seitliche Einblendbewegung: sie
   vergroessert kurzzeitig die Dokumentbreite. Stattdessen von unten. */
@media (max-width: 860px) {
  .reveal[data-reveal="left"],
  .reveal[data-reveal="right"] { transform: translateY(22px); }
}

.stagger > * { transition-delay: calc(var(--i, 0) * 90ms); }

.parallax { will-change: transform; }

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

/* -------------------------------------------------------------------------
   20 Utilities
   ------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.nowrap { white-space: nowrap; }
.media-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.media-frame img { width: 100%; height: auto; }
.media-frame--offset::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 84px; height: 84px;
  background: var(--c-accent);
  clip-path: polygon(0 100%, 0 0, 100% 100%);
  opacity: 0.9;
}

/* Lange Komposita (z. B. "Sendungsverfolgung") passen auf schmalen Telefonen
   nicht in eine Zeile. Umbruch erlauben, auf kleinen Bildschirmen zusaetzlich
   Silbentrennung - die Sprache steht im html-Element und wird ausgewertet. */
h1, h2, h3, h4, .kpi__label, .card__t, .tile h3 { overflow-wrap: break-word; }

@media (max-width: 640px) {
  h1, h2, h3, h4 { hyphens: auto; }
}

/* -------------------------------------------------------------------------
   21 Media Queries
   ------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .steps--flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  :root { --header-h: 70px; }
  .nav, .header-cta { display: none; }
  .burger { display: grid; }
  .brand { margin-right: auto; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trustbar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trustbar__item { border-left: 0; border-top: 1px solid var(--border); padding-inline: 0; }
  .trustbar__item:nth-child(-n+2) { border-top: 0; }
  .sysgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .langsw { margin-left: auto; }
}

/* Hinweis: in den folgenden Regeln steht bewusst ueberall minmax(0, 1fr)
   statt 1fr. Ein blosses 1fr entspricht minmax(auto, 1fr) - die Spalte
   kann dann nicht schmaler werden als ihr breitester Inhalt und schiebt
   auf schmalen Telefonen ueber den Bildschirmrand hinaus. */
@media (max-width: 860px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split--wide-left, .split--form { grid-template-columns: minmax(0, 1fr); }
  .split .media-frame { order: -1; }
  .ctaband__inner { grid-template-columns: minmax(0, 1fr); }
  .rating-summary { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
}

@media (max-width: 640px) {
  :root { --header-h: 64px; }
  .brand img { width: 108px; height: 50px; }
  .footer-col ul { gap: 0; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .trustbar__grid { grid-template-columns: minmax(0, 1fr); }
  .trustbar__item:nth-child(2) { border-top: 1px solid var(--border); }
  .sysgrid { grid-template-columns: minmax(0, 1fr); }
  .kpis { gap: var(--s-5) var(--s-4); }
  /* Die Kennzahl in Worten braucht mehr Platz als eine zweistellige Zahl und
     bekommt deshalb auf dem Telefon die volle Breite. */
  .kpi--word { grid-column: 1 / -1; }

  .related { grid-template-columns: minmax(0, 1fr); }
  .choices { grid-template-columns: minmax(0, 1fr); }
  .steps--flow { grid-template-columns: minmax(0, 1fr); }
  /* Auf schmalen Bildschirmen bricht die Ueberschrift in viele Zeilen um.
     Deshalb hier eine eigene, engere Staffelung, damit Header und Hero auch
     auf dem Telefon zusammen eine Bildschirmhoehe ergeben. */
  .hero h1 { font-size: clamp(1.625rem, min(1.1rem + 3.9vw, 5.4vh), 2.75rem); }
  .hero__sub { font-size: 0.54em; margin-top: 0.42em; }
  .hero__lead { font-size: clamp(0.9375rem, 1.9vh, 1.0625rem); }
  .hero__inner { padding-block: clamp(0.75rem, 1.9vh, 2rem); padding-bottom: clamp(2.75rem, 6vh, 4rem); }
  .hero .btn-row { gap: var(--s-3); margin-bottom: clamp(0.75rem, 1.8vh, 1.5rem); }
  .hero__lead { margin-bottom: clamp(0.75rem, 1.8vh, 1.5rem); }
  .hero .btn--lg { min-height: 50px; padding-block: 0.75rem; font-size: var(--fs-base); }
  .hero__trust { font-size: var(--fs-xs); padding: 0.5rem 0.75rem; }
  .hero__mark { display: none; }
  .hero__scroll { display: none; }
  .formwrap__head, .formwrap__body { padding: var(--s-5) var(--s-4); }
  .btn-row .btn { width: 100%; }
  .fnav .btn { flex: 1 1 100%; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .mega { display: none; }
  .cookiebar { left: 0; right: 0; bottom: 0; width: 100%; border-radius: 0; }
}

/* -------------------------------------------------------------------------
   Sehr schmale Telefone (iPhone SE, aeltere Android-Geraete)
   Logo, Sprachumschalter und Menueschalter muessen zusammen in eine Zeile
   passen - sonst wird der Menueschalter abgeschnitten und die Navigation
   ist nicht mehr erreichbar.
   ------------------------------------------------------------------------- */
@media (max-width: 430px) {
  :root { --gutter: 1rem; }
  .header-inner { gap: 0.5rem; }
  .brand img { width: clamp(84px, 25vw, 108px); height: auto; }
  .langsw a {
    min-width: 0;
    padding-inline: 0.5rem;
    gap: 0.3rem;
    letter-spacing: 0.03em;
  }
  .langsw .flag { width: 17px; height: 12px; }
  .burger { width: 44px; height: 44px; }
}

@media (max-width: 340px) {
  /* Letzte Reserve: Flaggen weichen, das Sprachkuerzel bleibt immer stehen */
  .site-header .langsw .flag { display: none; }
}

/* Sehr kurze Telefone im Hochformat (z. B. iPhone SE der ersten Generation,
   568 px Hoehe): engere Staffelung, damit moeglichst wenig ueber die
   Bildschirmkante hinausragt. Inhalt wird bewusst nicht ausgeblendet. */
@media (orientation: portrait) and (max-height: 640px) {
  .hero__inner { padding-block: 0.5rem; padding-bottom: 2.5rem; }
  .hero h1 { font-size: clamp(1.375rem, 0.9rem + 3.4vh, 2.125rem); margin-bottom: 0.35rem; }
  .hero__sub { font-size: 0.56em; margin-top: 0.38em; }
  .hero__lead { font-size: 0.875rem; line-height: 1.5; margin-bottom: 0.6rem; }
  .hero .btn-row { gap: 0.5rem; margin-bottom: 0.6rem; }
  .hero .btn--lg { padding-block: 0.7rem; }
  .hero__trust { padding: 0.4rem 0.7rem; font-size: 0.75rem; }
  .hero__trust svg { width: 16px; height: 16px; }
}

/* -------------------------------------------------------------------------
   Telefon im Querformat: sehr wenig Hoehe, aber viel Breite.
   Hier wird die Startbuehne enger gestaffelt, damit Header und Hero auch
   gedreht zusammen eine Bildschirmhoehe ergeben.
   ------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 480px) {
  .hero__inner { padding-block: 0.5rem; max-width: 640px; }
  .hero h1 { font-size: clamp(1.25rem, 0.8rem + 4.4vh, 2.125rem); margin-bottom: 0.3rem; }
  .hero__sub { font-size: 0.56em; margin-top: 0.33em; }
  .hero__lead {
    font-size: 0.875rem;
    line-height: 1.45;
    margin-bottom: 0.6rem;
    max-width: 52ch;
  }
  .hero .btn-row { gap: 0.5rem; margin-bottom: 0.6rem; flex-wrap: nowrap; }
  .hero .btn--lg { padding-block: 0.6rem; font-size: 0.9375rem; }
  .hero__trust { padding: 0.4rem 0.7rem; font-size: 0.75rem; }
  .hero__trust svg { width: 16px; height: 16px; }
  .hero__scroll { display: none; }
}

/* Auf kleinen Geraeten Bewegungslast reduzieren */
@media (max-width: 860px) {
  .parallax { transform: none !important; }
  .card:hover, .tile:hover, .loc:hover, .review:hover { transform: none; }
  .card:hover .card__media img { transform: none; }
}

/* -------------------------------------------------------------------------
   22 Print
   ------------------------------------------------------------------------- */
@media print {
  .site-header, .mnav, .cookiebar, .hero__scroll, .ctaband,
  .video-embed__btn { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .hero, .pagehead { margin-top: 0; background: none; color: #000; }
  .pagehead__bg { display: none; }
  .hero h1, .pagehead h1 { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* --- Hinweis fuer Bewerbungen im Anfrageformular --------------------------
   Wird von main.js ein- und ausgeblendet. Ohne JavaScript bleibt er sichtbar:
   dort sind beide Schritte untereinander zu sehen, und der Hinweis darf dann
   nicht verlorengehen. Die zweite Regel hebt dafuer das hidden-Attribut auf. */
.formnote {
  margin: var(--s-5) 0 0;
  padding: var(--s-5) var(--s-6);
  border-left: 3px solid var(--c-accent);
  background: var(--c-grey-50, #f6f7f8);
  border-radius: 0 4px 4px 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--c-ink-700, #3f4e55);
}
.formnote a { color: inherit; text-decoration: underline; }
html:not(.js) .formnote[hidden] { display: block; }

/* --- Bewerbungsblock im Anfrageformular ----------------------------------
   Hinweis und Upload-Feld gehoeren zusammen und werden gemeinsam ein- und
   ausgeblendet. Ohne JavaScript bleiben sie sichtbar. */
.applyblock { margin-top: var(--s-5); }
.applyblock .formnote { margin-top: 0; }
.applyblock .field { margin-top: var(--s-5); }
html:not(.js) .applyblock[hidden] { display: block; }

.input--file {
  padding: var(--s-4);
  background: #fff;
  cursor: pointer;
}
.input--file::file-selector-button {
  margin-right: var(--s-4);
  padding: .5rem .9rem;
  border: 1px solid var(--c-line, #d7dde0);
  border-radius: 4px;
  background: var(--c-grey-50, #f6f7f8);
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.input--file::file-selector-button:hover { background: #eceff1; }

/* -------------------------------------------------------------------------
   Zurueck nach oben
   -------------------------------------------------------------------------
   Sitzt unten rechts. Der Cookie-Hinweis steht unten LINKS und ist 440 px
   breit - auf grossen Bildschirmen ueberschneidet sich also nichts. Auf
   schmalen Geraeten nimmt der Hinweis die volle Breite ein; dort blendet
   main.js den Knopf aus, solange der Hinweis sichtbar ist.

   z-index bewusst unter dem Cookie-Hinweis (200), damit dessen Schaltflaechen
   in jedem Fall erreichbar bleiben.
   ------------------------------------------------------------------------- */
.totop {
  position: fixed;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 150;

  display: inline-flex;
  align-items: center;
  gap: .5rem;
  /* 48 px hoch - die uebliche Mindestgroesse fuer Tippziele. */
  min-height: 48px;
  padding: 0 1rem;

  border: 1px solid rgba(32, 43, 48, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  color: var(--c-anthracite, #202b30);
  font: inherit;
  font-size: .875rem;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(32, 43, 48, 0.16);

  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, background-color .2s ease,
              color .2s ease, border-color .2s ease;
}

/* Erst wenn main.js das Attribut setzt, ist der Knopf zu sehen. */
.totop.is-visible { opacity: 1; transform: none; }

.totop:hover,
.totop:focus-visible {
  background: var(--c-accent-600, #b8240f);
  border-color: var(--c-accent-600, #b8240f);
  color: #fff;
}

.totop svg { flex: none; }

@media (max-width: 560px) {
  /* Auf Telefonen nur der Pfeil - der Text kostet dort zu viel Platz. */
  .totop { padding: 0; width: 48px; justify-content: center; }
  .totop__text {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .totop { transition: opacity .01ms linear; transform: none; }
}

/* -------------------------------------------------------------------------
   Stellenanzeigen als Aufklapp-Element (07.09.2026)
   Aufbau und Bedienung wie bei den haeufigen Fragen, damit die Website sich
   einheitlich anfuehlt. Die Zeile zeigt Titel und Ort - bei zwei gleich
   betitelten Stellen ist der Ort das Unterscheidungsmerkmal.
   ------------------------------------------------------------------------- */
.jobs { display: grid; gap: var(--s-3); }

/* Doppelte Klasse mit Absicht: Der Block .job weiter unten in dieser Datei
   stammt aus der flachen Kartenfassung und wuerde bei gleicher Gewichtung
   gewinnen, weil er spaeter steht. */
.job.job--fold {
  background: #fff;
  /* Die flache Kartenfassung (.job) bringt eigenen Innenabstand und einen
     roten Balken links mit. Beides passt hier nicht: Der Abstand gehoert an
     den inneren Behaelter, sonst bleibt im zugeklappten Zustand eine
     Leerzeile stehen; der Balken ist am Aufklapp-Element ein Fremdkoerper. */
  padding: 0;
  border: 1px solid var(--border);
  border-left-width: 1px;
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.job.job--fold + .job.job--fold { margin-top: 0; }
.job.job--fold.is-open { border-color: var(--c-accent); box-shadow: var(--shadow-sm); }

.job__head { margin: 0; }

.job__toggle {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  padding: 1.125rem var(--s-5);
  font-family: var(--font-head);
  text-align: left;
  color: var(--c-anthracite);
}
.job__toggle:hover { color: var(--c-accent-700); }

.job__t {
  font-size: var(--fs-md);
  font-weight: 650;
}
.job__meta {
  margin-inline-start: auto;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-text-muted);
  text-align: right;
}
.job__sign {
  position: relative;
  width: 22px; height: 22px;
  flex: none;
  border: 2px solid var(--c-accent);
  border-radius: var(--radius-xs);
}
.job__sign::before, .job__sign::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--c-accent);
  transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.job__sign::before { width: 10px; height: 2px; }
.job__sign::after  { width: 2px; height: 10px; }
.job__toggle[aria-expanded="true"] .job__sign::after {
  transform: translate(-50%, -50%) scaleY(0);
  opacity: 0;
}

.job__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease);
}
.job__body > div { overflow: hidden; }
.job.job--fold.is-open .job__body { grid-template-rows: 1fr; }

/* Innenabstand nur seitlich am Behaelter. Ein Abstand nach unten waere hier
   ein Fehler: Der Behaelter ist das Rasterelement, und sein Innenabstand
   zaehlt zur Hoehe, die "grid-template-rows: 0fr" gerade nicht wegrechnen
   kann. Die Zeile bliebe im zugeklappten Zustand 24 Pixel hoch und liesse
   die erste Textzeile durchscheinen. Der untere Abstand kommt deshalb als
   Aussenabstand des letzten Kindes - der zaehlt zum Inhalt und wird
   mit zusammengeklappt. */
.job__body > div { padding: 0 var(--s-5); }
.job__body > div > *:last-child { margin-bottom: var(--s-5); }
.job__body .job__lead { margin-top: 0; }

.job__docs { font-size: var(--fs-sm); color: var(--c-text-muted); }

@media (max-width: 33.75rem) {
  .job__toggle { flex-wrap: wrap; }
  .job__meta { margin-inline-start: 0; text-align: left; width: 100%; }
  .job__sign { order: -1; }
}

/* -------------------------------------------------------------------------
   Stellenanzeige auf der Karriereseite
   ------------------------------------------------------------------------- */
.job {
  background: #fff;
  border: 1px solid var(--border, #d7dde0);
  border-left: 3px solid var(--c-accent, #e1321e);
  border-radius: 0 6px 6px 0;
  padding: var(--s-7);
}
.job + .job { margin-top: var(--s-6); }
.job__title { margin: 0 0 var(--s-4); font-size: 1.375rem; line-height: 1.25; }
.job__lead  { margin: 0 0 var(--s-5); color: var(--c-text-muted, #5d6e76); }

.job__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-7);
  margin: 0 0 var(--s-6);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--border, #d7dde0);
  border-bottom: 1px solid var(--border, #d7dde0);
}
.job__facts dt {
  font-size: .8125rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text-muted, #5d6e76);
  margin-bottom: .15rem;
}
.job__facts dd { margin: 0; font-weight: 600; }

.job__h    { margin: var(--s-6) 0 var(--s-3); font-size: 1rem; }
.job__list { margin: 0; padding-left: 1.15rem; }
/* Der Grundstil setzt "li { list-style: none }". Der Einzug von 1.15rem an
   .job__list war also da, die Aufzaehlungspunkte fehlten - die Zeilen standen
   eingerueckt, aber ohne Marke. Hier ausdruecklich zurueckgeholt. */
.job__list li { margin-bottom: .3rem; list-style: disc; }
.job__list li::marker { color: var(--c-accent); }

.job__apply { margin: var(--s-7) 0 var(--s-3); }
.job__mail  { font-weight: 650; font-size: 1.0625rem; }

@media (max-width: 560px) {
  .job { padding: var(--s-6); }
  .job__facts { gap: var(--s-4); }
}

/* =======================================================================
   Bild innerhalb eines Ratgebertextes (03.09.2026)
   Sitzt in .prose und muss deshalb dessen Absatzabstaende ueberschreiben.
   ======================================================================= */
.artikelbild{
  margin:2rem 0 2.25rem;
}
.artikelbild img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.artikelbild figcaption{
  margin-top:.75rem;
  font-size:var(--fs-sm);
  line-height:1.5;
  color:var(--c-text-muted);
  border-left:3px solid var(--c-accent);
  padding-left:.75rem;
}
@media (max-width:600px){
  .artikelbild{margin:1.5rem 0 1.75rem;}
}