/* Contorreinigung Pentz - Stylesheet
   Token-basiert, hell, ohne externe Abhaengigkeiten. Kein Dark-Mode (Onboarding). */

/* ------------------------------------------------------------------ Schriften */

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/source-sans-3-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------- Tokens */

:root {
  --marke: #56696b;
  --marke-dunkel: #3d4c4e;
  --marke-tief: #2b3739;
  --marke-hell: #7d8f90;
  --marke-blass: #eef1f1;
  --marke-rand: #d9e0e0;

  --grund: #ffffff;
  --grund-2: #f7f8f7;
  --grund-3: #f0f2f1;

  --text: #1d2626;
  --text-2: #55625f;
  --text-invers: #ffffff;
  --text-invers-2: #ccd6d6;

  /* Aktionsfarbe fuer die schwebende Blase. In Markenfarbe verschwand sie ueber
     dem dunklen Fuss - weiss mit dunkler Schrift steht dort am deutlichsten.
     Auf weissem Grund traegt sie die feine Kante und der Schatten. */
  --aktion: #ffffff;
  --aktion-dunkel: #f0f2f1;
  --aktion-text: #1d2626;

  --signal: #a8621f;          /* nur fuer Warn-/Notfallhinweise */
  --signal-blass: #fbf3ec;
  --fehler: #a32c2c;
  --erfolg: #2f6b45;

  --breite: 1200px;
  --rand: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 10px;
  --radius-gross: 16px;

  --kopf-hoehe: 76px;
  --logo-hoehe: 46px;
  --hero-min: 600px;

  --schatten-1: 0 1px 2px rgba(29, 38, 38, .06), 0 2px 8px rgba(29, 38, 38, .05);
  --schatten-2: 0 2px 6px rgba(29, 38, 38, .08), 0 12px 32px rgba(29, 38, 38, .09);
  --schatten-3: 0 8px 24px rgba(29, 38, 38, .14), 0 30px 70px rgba(29, 38, 38, .18);

  --raster-abstand: 24px;
  --tempo: .22s;
}

/* Gemeinsame Mindesthoehe der Unterseiten-Heros je Stufe. Ab 640 px sind alle
   Heros exakt gleich hoch; darunter unterscheiden sich die H1-Laengen zu stark,
   um das ohne uebergrosse Heros auf dem Telefon zu erzwingen. */
@media (max-width: 1100px) { :root { --hero-min: 620px; } }
@media (max-width: 900px)  { :root { --hero-min: 640px; } }
@media (max-width: 720px) {
  :root { --kopf-hoehe: 64px; --logo-hoehe: 38px; --hero-min: 640px; --raster-abstand: 16px; }
}
@media (max-width: 640px)  { :root { --hero-min: 710px; } }
@media (max-width: 480px)  { :root { --hero-min: 760px; } }
@media (max-width: 380px)  { :root { --hero-min: 820px; } }
@media (max-width: 340px)  { :root { --hero-min: 840px; } }

/* ------------------------------------------------------------------ Grundlage */

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

html {
  scroll-behavior: smooth;
  /* Kein overflow-x:hidden - das wuerde position:sticky im Kopf ausser Kraft setzen.
     Ueberstand wird an der Quelle begrenzt. */
  scroll-padding-top: calc(var(--kopf-hoehe) + 16px);
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  margin: 0 0 .6em;
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -.011em;
  color: var(--text);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.7vw, 3.05rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.3rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); }
h4 { font-size: 1.05rem; }

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

a { color: var(--marke-dunkel); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--marke-tief); }

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

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

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

.sprung-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 200; background: var(--marke-tief); color: #fff;
  padding: .7rem 1.2rem; border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none; transition: transform var(--tempo);
}
.sprung-link:focus { transform: translate(-50%, 0); color: #fff; }

/* ------------------------------------------------------------------ Kopfleiste */

.kopf {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--marke-rand);
  transition: box-shadow var(--tempo);
}
.kopf.ist-gescrollt { box-shadow: var(--schatten-1); }

.kopf__innen {
  height: var(--kopf-hoehe);
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 2rem);
}

.marke {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: .7rem;
  text-decoration: none;
  color: var(--text);
  flex: 0 0 auto;
}
/* Feste Hoehe ueber Variable statt height:100% - sonst skaliert das Logo im Flex-Element. */
.marke__zeichen { width: var(--logo-hoehe); height: var(--logo-hoehe); flex: 0 0 auto; }
.marke__wort { display: flex; flex-direction: column; line-height: 1.1; }
.marke__name { font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; white-space: nowrap; }
.marke__zusatz {
  font-size: .72rem; color: var(--text-2); letter-spacing: .07em;
  text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 400px) { .marke__zusatz { display: none; } }

.navi { margin-left: auto; }
.navi__liste {
  display: flex; align-items: center; gap: clamp(.35rem, 1.4vw, 1.35rem);
  list-style: none; margin: 0; padding: 0;
}
.navi__link {
  display: flex; align-items: center; min-height: 44px;
  padding: .5rem .3rem; text-decoration: none; color: var(--text);
  font-weight: 500; font-size: .98rem; border-bottom: 2px solid transparent;
  transition: color var(--tempo), border-color var(--tempo);
  white-space: nowrap;
}
.navi__link:hover { color: var(--marke-dunkel); border-bottom-color: var(--marke-rand); }
.navi__link[aria-current="page"] { color: var(--marke-dunkel); border-bottom-color: var(--marke); }

.kopf__aktionen { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }

/* min-height 44px: sichere Tippflaeche auf dem Telefon. */
.kopf__tel {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 44px; min-width: 44px;
  font-weight: 600; text-decoration: none; color: var(--marke-tief);
  padding: .5rem .7rem; border-radius: var(--radius); white-space: nowrap;
}
.kopf__tel:hover { background: var(--marke-blass); color: var(--marke-tief); }
.kopf__tel svg { width: 18px; height: 18px; flex: 0 0 auto; }

.navi-schalter {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--marke-rand);
  background: #fff; border-radius: var(--radius); cursor: pointer; color: var(--text);
}
.navi-schalter svg { width: 20px; height: 20px; }

@media (max-width: 1000px) {
  .navi-schalter { display: inline-flex; }
  .kopf__tel span { display: none; }
  .navi {
    position: fixed; inset: var(--kopf-hoehe) 0 auto 0; margin: 0;
    background: #fff; border-bottom: 1px solid var(--marke-rand);
    box-shadow: var(--schatten-2); padding: .5rem var(--rand) 1.25rem;
    display: none;
  }
  .navi.ist-offen { display: block; }
  .navi__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .navi__link {
    padding: .85rem .25rem; border-bottom: 1px solid var(--grund-3);
    font-size: 1.05rem;
  }
  .navi__link[aria-current="page"] { border-bottom-color: var(--marke); }
}

/* ---------------------------------------------------------------------- Knopf */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .82rem 1.35rem; border-radius: var(--radius); border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background var(--tempo), border-color var(--tempo),
              color var(--tempo), transform var(--tempo), box-shadow var(--tempo);
}
.knopf svg { width: 18px; height: 18px; flex: 0 0 auto; }
.knopf:active { transform: translateY(1px); }

.knopf--voll { background: var(--marke-tief); color: #fff; }
.knopf--voll:hover { background: #1f2a2b; color: #fff; box-shadow: var(--schatten-2); }

.knopf--rand { background: #fff; color: var(--marke-tief); border-color: var(--marke-rand); }
.knopf--rand:hover { background: var(--marke-blass); border-color: var(--marke-hell); color: var(--marke-tief); }

.knopf--hell { background: #fff; color: var(--marke-tief); }
.knopf--hell:hover { background: var(--marke-blass); color: var(--marke-tief); box-shadow: var(--schatten-2); }

.knopf--geist {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5);
}
.knopf--geist:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }

.knopf--klein { padding: .6rem 1rem; font-size: .94rem; min-height: 44px; }
.knopf--breit { width: 100%; }

@media (max-width: 1000px) { .kopf__aktionen .knopf { display: none; } }

/* ---------------------------------------------------------------------- Heros */

.hero, .seiten-hero {
  position: relative;
  color: var(--text-invers);
  background:
    radial-gradient(120% 130% at 88% 8%, rgba(125, 143, 144, .55) 0%, rgba(125, 143, 144, 0) 58%),
    linear-gradient(152deg, #2b3739 0%, #3d4c4e 52%, #4d5e60 100%);
  overflow: hidden;
}
.hero h1, .seiten-hero h1 { color: #fff; }

/* Flex-Hero: der Container braucht volle Breite, sonst rutscht der Inhalt
   durch margin:auto aus dem Raster. */
.hero > .container, .seiten-hero > .container { width: 100%; position: relative; z-index: 3; }

.hero__muster, .seiten-hero__muster {
  position: absolute; inset: 0; z-index: 2; opacity: .16; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .35) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 70%);
}

.hero { display: flex; align-items: center; min-height: 620px; padding: 3.5rem 0; }

/* ---- Start-Hero: Verlauf plus freigestelltes Inhaberfoto -----------------
   Der Kunde wollte sich selbst im Hero. Ein Freigestellter vor einem zweiten
   Foto wird unruhig, deshalb traegt der Hero wieder denselben Verlauf wie die
   Unterseiten und das Portraet steht rechts darauf - unten am Heroabschluss
   aufsitzend, der Master laeuft dort ohnehin weich aus. */
.start-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: 560px;
  padding: 3rem 0 3.25rem;
  color: var(--text-invers);
  background:
    radial-gradient(120% 130% at 88% 8%, rgba(125, 143, 144, .55) 0%, rgba(125, 143, 144, 0) 58%),
    linear-gradient(152deg, #2b3739 0%, #3d4c4e 52%, #4d5e60 100%);
}
.start-hero h1 { color: #fff; }
.start-hero > .container { position: relative; z-index: 3; width: 100%; }
.start-hero__text { min-width: 0; max-width: 38rem; }

.start-hero__muster {
  position: absolute; inset: 0; z-index: 1; opacity: .16; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .35) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 70%);
}

/* Unter 1100 px steht der Text ueber die ganze Breite - dort wuerde das
   Portraet dahinter liegen. Also erst ab da einblenden. */
.start-hero__person { display: none; }
@media (min-width: 1100px) {
  .start-hero__person {
    display: block; position: absolute; z-index: 2;
    /* Ein Stueck naeher an den Text als die Containerkante. */
    right: max(2rem, calc((100vw - var(--breite)) / 2 + 3.5rem));
    bottom: 0; height: 100%;
    pointer-events: none;
  }
  /* Zwei Selektoren, weil die Einzeldatei-Vorschau das <picture> aufloest und
     die Klasse dabei auf das <img> wandert. Ohne den zweiten behielt das Bild
     dort seine Eigenbreite und wurde verzerrt. */
  .start-hero__person img,
  img.start-hero__person {
    display: block; height: 100%; width: auto;
    object-fit: contain; object-position: bottom;
    /* Freigestellt und ungedaempft wirkt das Motiv aufgeklebt: das weisse Hemd
       ist deutlich heller als alles andere im Hero. Der Filter nimmt Helligkeit
       und Saettigung etwas zurueck und legt einen weichen Schatten nach links
       unten - der folgt der Silhouette, ein Verlauf darueber wuerde als
       Rechteck ueber der transparenten Flaeche stehen. */
    filter:
      brightness(.86) saturate(.9) contrast(1.02)
      drop-shadow(-20px 14px 34px rgba(14, 21, 22, .72))
      drop-shadow(-6px 5px 12px rgba(14, 21, 22, .5));
  }
}
@media (min-width: 1500px) {
  .start-hero { min-height: 600px; }
}

.seiten-hero {
  position: relative;
  color: var(--text-invers);
  background:
    radial-gradient(120% 130% at 88% 8%, rgba(125, 143, 144, .55) 0%, rgba(125, 143, 144, 0) 58%),
    linear-gradient(152deg, #2b3739 0%, #3d4c4e 52%, #4d5e60 100%);
  overflow: hidden;
}
.hero h1, .seiten-hero h1 { color: #fff; }

/* Flex-Hero: der Container braucht volle Breite, sonst rutscht der Inhalt
   durch margin:auto aus dem Raster. */
.hero > .container, .seiten-hero > .container { width: 100%; position: relative; z-index: 3; }

.hero__muster, .seiten-hero__muster {
  position: absolute; inset: 0; z-index: 2; opacity: .16; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .35) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 70%);
}

.hero { display: flex; align-items: center; min-height: 620px; padding: 3.5rem 0; }

/* ---- Start-Hero: Foto im Hintergrund ------------------------------------
   Das Motiv liegt hinter dem ganzen Hero, darueber ein Schleier, der links
   deckt und nach rechts aufklart. Die Kennzahlen stehen bewusst nicht mehr
   im Hero, sondern im Band darunter: als Spalte brauchten sie eine eigene
   dunkle Scheibe mitten auf dem Foto, um lesbar zu bleiben - und genau die
   hat den Hero unruhig gemacht. Jetzt liegt Text nur links, wo der Schleier
   deckt, und die rechte Bildhaelfte bleibt frei. */
.start-hero {
  position: relative; isolation: isolate;
  display: flex; align-items: center;
  min-height: 560px;
  padding: 3rem 0 3.25rem;
  background: var(--marke-tief);
  color: var(--text-invers);
  overflow: hidden;
}
.start-hero h1 { color: #fff; }
.start-hero > .container { position: relative; z-index: 3; width: 100%; }
.start-hero__text { max-width: 34rem; }

.start-hero__bild { position: absolute; inset: 0; z-index: 0; display: block; }
.start-hero__bild img {
  /* Die Person steht im Bild rechts der Mitte - der Anker haelt sie bei
     schmalen Fenstern im Bild und den Text frei von ihr. */
  width: 100%; height: 100%; object-fit: cover; object-position: 68% 28%;
  display: block;
}

/* z-index 1, nicht 0: das Bild steht spaeter im Quelltext und wuerde einen
   Verlauf auf derselben Ebene sonst ueberdecken. */
.start-hero__schleier {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Schmales Fenster: der Text nimmt die ganze Breite ein, also senkrecht. */
  /* Derselbe Ton wie --marke-tief und wie die Baender darunter. Vorher lief der
     Schleier gegen #1d2626 - also gegen die Textfarbe, nicht gegen die
     Markenfarbe. Am unteren Hero-Rand stand dadurch ein dunklerer Grauton
     direkt ueber dem helleren Band: genau die Stufe, die dort zu sehen war. */
  background:
    linear-gradient(to top,
      #2b3739 0%,
      rgba(43, 55, 57, .92) 7%,
      rgba(43, 55, 57, 0) 34%),
    linear-gradient(to bottom,
      rgba(43, 55, 57, .93) 0%,
      rgba(43, 55, 57, .90) 52%,
      rgba(43, 55, 57, .84) 82%,
      rgba(43, 55, 57, .80) 100%);
}
/* Schmales Fenster: der Ausschnitt zeigt nur ein Viertel der Bildbreite. Bei
   68 % landet die H1 auf den Augen - bei 80 % sitzt die Person links oben und
   der Text laeuft ueber Weste und Wand. Bei 90 % waere das Gesicht halbiert. */
@media (max-width: 899px) {
  .start-hero__bild img { object-position: 80% 24%; }
}

@media (min-width: 900px) {
  .start-hero__schleier {
    background:
      /* Unten laeuft das Bild in die Farbe der Baender aus, statt hart
         abzubrechen - deshalb der volle Ton auf den ersten Prozenten. */
      linear-gradient(to top,
        #2b3739 0%,
        rgba(43, 55, 57, .92) 6%,
        rgba(43, 55, 57, .30) 22%,
        rgba(43, 55, 57, 0) 38%),
      linear-gradient(96deg,
        rgba(43, 55, 57, .95) 0%,
        rgba(43, 55, 57, .93) 40%,
        rgba(43, 55, 57, .70) 62%,
        rgba(43, 55, 57, .32) 86%,
        rgba(43, 55, 57, .20) 100%);
  }
}

.start-hero__muster {
  position: absolute; inset: 0; z-index: 2; opacity: .07; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .35) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(120% 90% at 82% 12%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 82% 12%, #000 0%, transparent 72%);
}

@media (max-width: 899px) { .start-hero { min-height: 620px; } }
@media (max-width: 480px) { .start-hero { min-height: 660px; } }

/* ---- Kennzahlen-Band unter dem Start-Hero */
/* Hell zwischen zwei dunklen Flaechen. Hero, Kennzahlen und Claim waren drei
   dunkle Bloecke in Folge: in gleichen Toenen verschwimmen sie zu einer Flaeche
   ohne Kontrast, in leicht verschiedenen sieht man eine Stufe. Nicht die Farbe
   war das Problem, sondern die Abfolge - deshalb setzt das Kennzahlen-Band
   jetzt hell dagegen (Flaechenkontrast 10,8:1 an beiden Kanten). */
.kennzahlen-band {
  background: var(--marke-blass); color: var(--text);
}
/* Auf hellem Grund tragen Wert und Beschriftung die dunklen Textfarben. Die
   Trennlinien brauchen dort mehr Kraft: --marke-rand kam auf 1,18:1 gegen die
   Flaeche und war praktisch unsichtbar, 45 % der Markenfarbe ergeben 1,87:1. */
.kennzahlen-band .kennzahl__wert { color: var(--marke-tief); }
.kennzahlen-band .kennzahl__text { color: var(--text-2); }
.kennzahlen-band .kennzahlen {
  border-left: 0; padding-left: 0;
  grid-auto-flow: row; gap: 0;
}
@media (min-width: 640px) {
  .kennzahlen-band .kennzahlen {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
  .kennzahlen-band .kennzahl { padding: 24px 0 24px 24px; }
  .kennzahlen-band .kennzahl + .kennzahl { border-left: 1px solid rgba(86, 105, 107, .45); }
  .kennzahlen-band .kennzahl:first-child { padding-left: 0; }
}
@media (max-width: 639px) {
  .kennzahlen-band .kennzahl { padding: 16px 0; }
  .kennzahlen-band .kennzahl + .kennzahl { border-top: 1px solid rgba(86, 105, 107, .45); }
}
.seiten-hero {
  display: flex; align-items: center;
  min-height: var(--hero-min);
  /* 40/40 statt 40/44: 2.75rem sind 44 px und liegen neben der Skala. */
  padding: 40px 0;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-invers-2); margin-bottom: 1rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: currentColor; opacity: .75;
}

.lead {
  font-size: clamp(1.05rem, .98rem + .4vw, 1.2rem);
  color: var(--text-invers-2);
  max-width: 62ch;
  margin-bottom: 1.9rem;
}

/* stretch statt center: die Kennzahlen-Linie laeuft dann ueber die ganze
   Hoehe des Heros, statt als kurzer Strich in der Mitte zu schweben. */
.hero__raster, .seiten-hero__raster {
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: stretch;
}
@media (max-width: 900px) {
  .hero__raster, .seiten-hero__raster { grid-template-columns: minmax(0, 1fr); }
}
/* Impressum und Datenschutz tragen keine Kennzahlen mehr. Ohne diese Regel
   bliebe die zweite Spalte als Leerraum stehen und der Lead waere unnoetig
   schmal. */
.seiten-hero__raster--einspaltig { grid-template-columns: minmax(0, 1fr); }
.seiten-hero__raster--einspaltig > div { max-width: 62ch; }

.aktionszeile {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
}

.kennzahlen {
  display: grid; gap: .75rem;
  border-left: 2px solid rgba(255, 255, 255, .28); padding-left: 1.4rem;
}
/* Ab Tablet drei gleich hohe Baender mit Trennlinien statt drei Zahlen, die
   in der Mitte klumpen: die Spalte fuellt sich, ohne dass es verstreut wirkt. */
@media (min-width: 901px) {
  .kennzahlen { gap: 0; align-content: stretch; grid-auto-rows: 1fr; }
  .kennzahl { display: flex; flex-direction: column; justify-content: center; padding: 1rem 0; }
  .kennzahl + .kennzahl { border-top: 1px solid rgba(255, 255, 255, .18); }
}
@media (max-width: 900px) {
  .kennzahlen {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-left: 0; border-top: 1px solid rgba(255, 255, 255, .22);
    padding-left: 0; padding-top: 1.25rem; gap: 1rem;
  }
}
@media (max-width: 560px) { .kennzahlen { grid-template-columns: minmax(0, 1fr); gap: .6rem; } }

.kennzahl__wert {
  font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); font-weight: 600;
  color: #fff; line-height: 1.1; display: block;
}
.kennzahl__text { font-size: .92rem; color: var(--text-invers-2); }

.brotkrumen { margin-bottom: 1.1rem; font-size: .88rem; }
.brotkrumen ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  color: var(--text-invers-2);
}
.brotkrumen li { display: flex; align-items: center; gap: .45rem; }
.brotkrumen li + li::before { content: "›"; opacity: .6; }
/* Padding plus negativer Rand: 44 px Trefferflaeche, gleiche Optik. */
.brotkrumen a {
  color: var(--text-invers-2); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
  margin-block: -.65rem;
}
.brotkrumen a:hover { color: #fff; text-decoration: underline; }
.brotkrumen [aria-current="page"] { color: #fff; }

/* -------------------------------------------------------------------- Bereiche */

.bereich { padding: 56px 0; }
@media (min-width: 768px)  { .bereich { padding: 80px 0; } }
@media (min-width: 1200px) { .bereich { padding: 96px 0; } }
.bereich--blass { background: var(--grund-2); }
.bereich--rand { border-top: 1px solid var(--marke-rand); }
.bereich--eng { padding: 40px 0; }
@media (min-width: 768px)  { .bereich--eng { padding: 56px 0; } }

.bereich__kopf { max-width: 68ch; margin-bottom: 32px; }
/* Ohne die Zeilenbreite von 68ch bricht eine kurze Ueberschrift nicht in
   zwei Zeilen. Nur fuer Koepfe ohne Fliesstext darunter. */
.bereich__kopf--weit { max-width: none; }
.bereich__kopf--weit h2 { text-wrap: nowrap; }
@media (max-width: 900px) { .bereich__kopf--weit h2 { text-wrap: balance; } }
/* Mittig gesetzter Abschnittskopf - fuer Bloecke, die selbst mittig stehen. */
.bereich__kopf--mittig { margin-inline: auto; text-align: center; }
.bereich__kopf--mittig .eyebrow { justify-content: center; }
.bereich__kopf--mittig p { margin-inline: auto; }
@media (min-width: 768px) { .bereich__kopf { margin-bottom: 48px; } }
.bereich__kopf .eyebrow { color: var(--marke); }
.bereich__kopf p { color: var(--text-2); font-size: 1.08rem; margin-bottom: 0; }

.claim-band {
  background: var(--marke-tief); color: #fff;
  padding: 40px 0;
}
@media (min-width: 768px)  { .claim-band { padding: 56px 0; } }
@media (min-width: 1200px) { .claim-band { padding: 64px 0; } }
/* stretch + innen zentriert: beide Spalten sind gleich hoch, die Trennlinie
   läuft über die volle Höhe des Bandes statt nur über den Textblock. */
.claim-band__innen {
  /* Gerastert statt fluid - bei 1100 px ergab 3vw sonst 33 px. */
  display: grid; align-items: stretch;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
}
@media (min-width: 768px)  { .claim-band__innen { gap: 32px; } }
@media (min-width: 1200px) { .claim-band__innen { gap: 48px; } }
.claim-band__innen > * { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 820px) {
  .claim-band__innen { grid-template-columns: minmax(0, 1fr); }
}
.claim-band p {
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem); font-weight: 600;
  margin: 0; line-height: 1.25; color: #fff; text-wrap: balance;
}
.claim-band__text {
  color: var(--text-invers-2); font-size: 1.02rem; line-height: 1.65;
  border-left: 2px solid rgba(255, 255, 255, .25); padding-left: 1.4rem;
}
@media (max-width: 820px) {
  .claim-band__text { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .2);
    padding-left: 0; padding-top: 1.1rem; }
}

/* ------------------------------------------------------------------ Karten */

.raster { display: grid; gap: var(--raster-abstand); grid-template-columns: minmax(0, 1fr); }

/* Feste Spaltenzahl statt auto-fit: nur so laesst sich eine allein stehende
   Karte in der letzten Reihe gezielt mittig setzen, statt sie ausfransen zu lassen. */
@media (min-width: 640px) {
  .raster--3, .raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Bleibt eine Karte in der letzten Reihe allein, laeuft sie ueber die ganze
     Breite - statt links auszufransen oder mittig zu schweben. */
  .raster--3 > :last-child:nth-child(odd),
  .raster--2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Laenglich anrichten: Zeichen links, Text mittig, Nebenblock rechts. */
  .raster--3 > .karte:last-child:nth-child(odd),
  .raster--2 > .karte:last-child:nth-child(odd) {
    display: grid;
    grid-template-columns: auto minmax(0, 1.5fr) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
  }
  .raster--3 > .karte:last-child:nth-child(odd) > .karte__zeichen,
  .raster--2 > .karte:last-child:nth-child(odd) > /* --- Karte mit Illustration statt Symbol --- */
.karte__bild { background: var(--marke-blass); }
/* szene() liefert <figure><picture><img>. figure hat vom Browser 1em/40px
   Rand - genau der erzeugte den grauen Rahmen um die Bilder. */
.karte__bild figure, .gruppe-band__bild figure { margin: 0; }
.karte__bild picture, .gruppe-band__bild picture { display: block; }
/* Zwei Selektoren je Stelle: die Einzeldatei-Vorschau loest <picture> auf
   und haengt eine Klasse ans <img>, der Wrapper bleibt aber bestehen. */
.karte__bild img, .gruppe-band__bild img {
  display: block; width: 100%; height: auto;
}
.karte__inhalt {
  padding: clamp(1.35rem, 2.4vw, 1.9rem);
  display: flex; flex-direction: column; flex: 1;
}
.karte__inhalt h3 { margin-bottom: .35rem; }
.karte__inhalt p { color: var(--text-2); }

.karte__zeichen {
    grid-column: 1; grid-row: 1 / span 4; margin-bottom: 0;
  }
  .raster--3 > .karte:last-child:nth-child(odd) > .leistung__marker,
  .raster--2 > .karte:last-child:nth-child(odd) > .leistung__marker,
  .raster--3 > .karte:last-child:nth-child(odd) > h3,
  .raster--2 > .karte:last-child:nth-child(odd) > h3,
  .raster--3 > .karte:last-child:nth-child(odd) > p,
  .raster--2 > .karte:last-child:nth-child(odd) > p { grid-column: 2; max-width: 62ch; }
  .raster--3 > .karte:last-child:nth-child(odd) > h3,
  .raster--2 > .karte:last-child:nth-child(odd) > h3 { margin-bottom: .35rem; }
  .raster--3 > .karte:last-child:nth-child(odd) > .leistung__zielkunde,
  .raster--2 > .karte:last-child:nth-child(odd) > .leistung__zielkunde,
  .raster--3 > .karte:last-child:nth-child(odd) > .karte__liste,
  .raster--2 > .karte:last-child:nth-child(odd) > .karte__liste,
  .raster--3 > .karte:last-child:nth-child(odd) > .karte__antwort,
  .raster--2 > .karte:last-child:nth-child(odd) > .karte__antwort {
    grid-column: 3; grid-row: 1 / span 4;
    margin-top: 0; padding-top: 0;
    border-top: 0; border-left: 1px solid var(--marke-rand);
    padding-left: clamp(1.25rem, 2.5vw, 1.75rem);
  }
  .raster--3 > .karte:last-child:nth-child(odd) > .leistung__zielkunde::before,
  .raster--2 > .karte:last-child:nth-child(odd) > .leistung__zielkunde::before,
  .raster--3 > .karte:last-child:nth-child(odd) > .karte__antwort::before,
  .raster--2 > .karte:last-child:nth-child(odd) > .karte__antwort::before { content: none; }
  /* Ohne Nebenblock reichen zwei Zonen. */
  .raster--3 > .karte:last-child:nth-child(odd):not(:has(.leistung__zielkunde, .karte__liste, .karte__antwort)),
  .raster--2 > .karte:last-child:nth-child(odd):not(:has(.leistung__zielkunde, .karte__liste, .karte__antwort)) {
    grid-template-columns: auto minmax(0, 1fr);
  }
  /* Ohne Zeichen genuegt eine Zone - sonst bleibt links eine leere Spalte
     samt Spaltenabstand stehen und der Text ist eingerueckt. */
  .raster--3 > .karte:last-child:nth-child(odd):not(:has(.karte__zeichen)),
  .raster--2 > .karte:last-child:nth-child(odd):not(:has(.karte__zeichen)) {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Die Kinder tragen sonst noch grid-column:2 aus der Drei-Zonen-Regel und
     erzeugen damit eine implizite zweite Spalte. */
  .raster--3 > .karte:last-child:nth-child(odd):not(:has(.karte__zeichen)) > *,
  .raster--2 > .karte:last-child:nth-child(odd):not(:has(.karte__zeichen)) > * {
    grid-column: 1;
  }
}

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

  /* Bei drei Spalten steht die Karte allein, wenn ihre Position 3n+1 ist -
     das kann auch eine gerade Zahl sein (4, 10, ...). Die Regel der
     2-Spalten-Stufe wird deshalb erst vollstaendig zurueckgenommen. */
  .raster--3 > .karte:last-child:nth-child(odd) {
    grid-column: auto; display: flex; grid-template-columns: none;
  }
  .raster--3 > .karte:last-child:nth-child(odd) > * {
    grid-column: auto; grid-row: auto; max-width: none;
  }
  .raster--3 > .karte:last-child:nth-child(odd) > .karte__zeichen { margin-bottom: .9rem; }
  .raster--3 > .karte:last-child:nth-child(odd) > .leistung__zielkunde,
  .raster--3 > .karte:last-child:nth-child(odd) > .karte__liste,
  .raster--3 > .karte:last-child:nth-child(odd) > .karte__antwort {
    margin-top: auto; padding-top: .95rem;
    border-top: 1px solid var(--marke-rand); border-left: 0; padding-left: 0;
  }

  /* .karte im Selektor, damit die Regel dieselbe Spezifitaet hat wie die
     Zuruecknahme darueber - sonst gewinnt bei 7 Karten (ungerade UND 3n+1)
     die Zuruecknahme und die Karte bleibt schmal. */
  .raster--3 > .karte:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }

  /* Bleiben ZWEI Karten in der letzten Reihe, stehen sie links und lassen
     rechts eine Luecke. Beide um eine halbe Spalte plus halben Abstand nach
     rechts schieben - dann steht das Paar mittig. Transform statt anderer
     Spaltenzahl, damit die Abnahme weiter drei Spalten misst. */
  .raster--3 > :nth-last-child(2):nth-child(3n + 1),
  .raster--3 > :last-child:nth-child(3n + 2) {
    transform: translateX(calc(50% + var(--raster-abstand) / 2));
  }

  /* Laenglich anrichten: Zeichen links, Text mittig, Nebenblock rechts. */
  .raster--3 > .karte:last-child:nth-child(3n + 1) {
    display: grid;
    grid-template-columns: auto minmax(0, 1.5fr) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
  }
  .raster--3 > .karte:last-child:nth-child(3n + 1) > .karte__zeichen {
    grid-column: 1; grid-row: 1 / span 4; margin-bottom: 0;
  }
  .raster--3 > .karte:last-child:nth-child(3n + 1) > .leistung__marker,
  .raster--3 > .karte:last-child:nth-child(3n + 1) > h3,
  .raster--3 > .karte:last-child:nth-child(3n + 1) > p { grid-column: 2; max-width: 62ch; }
  .raster--3 > .karte:last-child:nth-child(3n + 1) > h3 { margin-bottom: .35rem; }
  .raster--3 > .karte:last-child:nth-child(3n + 1) > .leistung__zielkunde,
  .raster--3 > .karte:last-child:nth-child(3n + 1) > .karte__liste,
  .raster--3 > .karte:last-child:nth-child(3n + 1) > .karte__antwort {
    grid-column: 3; grid-row: 1 / span 4;
    margin-top: 0; padding-top: 0;
    border-top: 0; border-left: 1px solid var(--marke-rand);
    padding-left: clamp(1.25rem, 2.5vw, 1.75rem);
  }
  .raster--3 > .karte:last-child:nth-child(3n + 1) > .leistung__zielkunde::before,
  .raster--3 > .karte:last-child:nth-child(3n + 1) > .karte__antwort::before { content: none; }
  /* Ohne Nebenblock reichen zwei Zonen. */
  .raster--3 > .karte:last-child:nth-child(3n + 1):not(:has(.leistung__zielkunde, .karte__liste, .karte__antwort)) {
    grid-template-columns: auto minmax(0, 1fr);
  }
  /* Ohne Zeichen genuegt eine Zone - sonst bleibt links eine leere
     Spalte samt Spaltenabstand stehen und der Text ist eingerueckt. */
  .raster--3 > .karte:last-child:nth-child(3n + 1):not(:has(.karte__zeichen)) {
    grid-template-columns: minmax(0, 1fr);
  }
  .raster--3 > .karte:last-child:nth-child(3n + 1):not(:has(.karte__zeichen)) > * {
    grid-column: 1;
  }
}

.karte {
  background: #fff; border: 1px solid var(--marke-rand); border-radius: var(--radius-gross);
  padding: clamp(1.35rem, 2.4vw, 1.9rem);
  display: flex; flex-direction: column; gap: .35rem;
  transition: border-color var(--tempo), box-shadow var(--tempo), transform var(--tempo);
}

/* Bildkarten tragen die Polsterung im Inhaltsteil, nicht in der Karte - das
   Bild soll bis an die Kante laufen. Die Regel steht bewusst NACH .karte und
   nicht im @media-Block weiter oben: dort verlor sie gegen die Grundregel und
   um die Fotos stand ein grauer Rahmen. */
.karte--bild { padding: 0; overflow: hidden; }
.karte--hebt:hover { border-color: var(--marke-hell); box-shadow: var(--schatten-2); transform: translateY(-2px); }
.karte h3 { margin-bottom: .35rem; }
.karte p { color: var(--text-2); margin-bottom: 0; }

.karte__zeichen {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: .9rem;
  background: var(--marke-blass); color: var(--marke-dunkel);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.karte__zeichen svg { width: 24px; height: 24px; }

.karte__liste { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .45rem; }
.karte__liste li {
  position: relative; padding-left: 1.5rem; font-size: .96rem; color: var(--text-2);
}
.karte__liste li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--marke-hell);
}

/* margin-top:auto haelt die Trennlinien ueber alle Karten einer Reihe auf einer Hoehe. */
.karte__antwort {
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--marke-rand);
  font-size: .97rem; color: var(--marke-dunkel); font-weight: 500;
}
.karte__antwort::before { content: ""; display: block; height: 1rem; margin-top: -1rem; }

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

.gruppe { scroll-margin-top: calc(var(--kopf-hoehe) + 24px); }
.gruppe + .gruppe { margin-top: clamp(3rem, 6vw, 4.5rem); }


.leistung { display: flex; flex-direction: column; gap: .3rem; }
.leistung--betont { background: var(--marke-blass); border-color: var(--marke-hell); }
.leistung__marker {
  align-self: flex-start;
  /* justify-self wirkt nur im Raster - in der laenglichen Karte sitzt der
     Marker in einer Zelle und wuerde sonst ueber die ganze Spalte laufen. */
  justify-self: start; font-size: .74rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--marke-dunkel);
  background: #fff; border: 1px solid var(--marke-rand);
  padding: .2rem .55rem; border-radius: 99px; margin-bottom: .7rem;
}
.leistung__zielkunde {
  margin-top: auto; padding-top: .95rem; border-top: 1px solid var(--marke-rand);
  font-size: .93rem; color: var(--text-2);
}
.leistung__zielkunde::before { content: ""; display: block; height: .95rem; margin-top: -.95rem; }
.leistung__zielkunde strong { color: var(--text); font-weight: 600; display: block; margin-bottom: .15rem; }

/* Eigenes Band unter dem Hero - so bleiben alle Unterseiten-Heros gleich hoch. */
.marken-band {
  background: var(--grund-2);
  border-bottom: 1px solid var(--marke-rand);
  padding: .9rem 0;
}
.sprungmarken {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
}
.sprungmarken__titel {
  font-size: .82rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-2); margin-right: .35rem;
}
.sprungmarken a {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px;
  padding: .5rem .95rem; border-radius: 99px; text-decoration: none;
  background: #fff; border: 1px solid var(--marke-rand);
  color: var(--marke-tief); font-size: .94rem; font-weight: 500;
  transition: border-color var(--tempo), background var(--tempo);
}
.sprungmarken a svg { width: 17px; height: 17px; color: var(--marke); }
.sprungmarken a:hover { border-color: var(--marke-hell); background: var(--marke-blass); color: var(--marke-tief); }

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

/* Je Gruppe ein Illustrationsband, danach eine kompakte Liste. Der Zielkunde
   steht einmal im Band - vorher stand "Hausverwaltungen" achtmal auf der Seite. */

.gruppe-band {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
@media (min-width: 860px) {
  .gruppe-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  /* Beim gespiegelten Band wandert das Bild in die zweite Spalte - ohne
     getauschte Anteile waere es dort 573 statt 499 px breit, die Baender
     haetten also unterschiedlich grosse Bilder. */
  .gruppe-band--gedreht { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .gruppe-band--gedreht .gruppe-band__bild { order: 2; }
}
/* Die Deckel von 460 bzw. 330 px waren fuer die alten Illustrationen gedacht.
   Ein Foto soll seine Spalte ausfuellen, sonst steht daneben Leerraum. */
.gruppe-band__bild { width: 100%; }
@media (max-width: 899px) { .gruppe-band__bild { max-width: 560px; } }
.gruppe-band__text h2 { margin-bottom: .5rem; }
.gruppe-band__text > p { color: var(--text-2); max-width: 56ch; }


.fuer-wen {
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid var(--marke-rand);
  font-size: .96rem; color: var(--text-2);
}
.fuer-wen strong {
  display: block; font-size: .74rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--marke-dunkel); margin-bottom: .25rem;
}

.zwischenkopf {
  display: flex; align-items: baseline; gap: 1rem;
  margin: clamp(2rem, 3.5vw, 2.75rem) 0 1rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-2);
}
.zwischenkopf::after { content: ""; flex: 1; height: 1px; background: var(--marke-rand); }

/* --- Kompakte Leistungsliste: Name fett, eine Zeile Erklaerung --- */
.leistungsliste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .1rem 2.5rem;
}
@media (min-width: 760px) {
  .leistungsliste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Ungerade Anzahl: der letzte Eintrag laeuft ueber beide Spalten,
     sonst bleibt rechts eine Luecke stehen. */
  .leistungsliste__eintrag:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .leistungsliste__eintrag:last-child:nth-child(odd) strong + span { max-width: 70ch; }
}
.leistungsliste__eintrag {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: .95rem 0; border-top: 1px solid var(--marke-rand);
}
.leistungsliste__eintrag > span:last-child { min-width: 0; }
.leistungsliste__eintrag strong { display: block; font-weight: 600; margin-bottom: .1rem; }
.leistungsliste__eintrag strong + span {
  display: block; color: var(--text-2); font-size: .95rem; max-width: 46ch;
}
.leistungsliste__zeichen {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; margin-top: .1rem;
  background: var(--marke-blass); color: var(--marke-dunkel);
  display: flex; align-items: center; justify-content: center;
}
.leistungsliste__zeichen svg { width: 18px; height: 18px; }

/* --- Zeitband fuer die Saison --- */
.zeitband { display: grid; gap: 1.5rem; }
@media (min-width: 820px) { .zeitband { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } }
.zeitband__abschnitt { position: relative; padding-top: 2.25rem; }
.zeitband__abschnitt::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--marke-hell);
}
.zeitband__abschnitt:first-child::before { border-radius: 99px 0 0 99px; }
.zeitband__abschnitt:last-child::before { border-radius: 0 99px 99px 0; }
@media (min-width: 820px) {
  .zeitband__abschnitt + .zeitband__abschnitt { padding-left: 1.75rem; }
  .zeitband__abschnitt + .zeitband__abschnitt::before { left: 1.75rem; }
}
.zeitband__zeit {
  display: block; font-weight: 600; font-size: 1.1rem; color: var(--marke-dunkel);
  margin-bottom: .3rem;
}
.zeitband__abschnitt p { color: var(--text-2); margin: 0; max-width: 52ch; }

/* --- Einsatzgebiet --- */
.ortliste { list-style: none; margin: 0; padding: 0; display: grid; }
.ortliste__eintrag {
  display: grid; gap: .2rem 2rem; align-items: baseline;
  padding: 1.1rem 0; border-top: 1px solid var(--marke-rand);
}
.ortliste__eintrag:last-child { border-bottom: 1px solid var(--marke-rand); }
@media (min-width: 760px) {
  .ortliste__eintrag { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
.ortliste__eintrag strong { font-weight: 600; }
.ortliste__eintrag span { color: var(--text-2); max-width: 62ch; }

.ort-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.ort-chips span {
  padding: .4rem .9rem; border-radius: 99px; background: var(--grund-2);
  border: 1px solid var(--marke-rand); font-size: .93rem; color: var(--text-2);
}

/* ------------------------------------------------------------------- Ablauf */

.ablauf { counter-reset: schritt; display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .ablauf { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.ablauf__schritt { position: relative; padding-top: 2.9rem; }
.ablauf__schritt::before {
  counter-increment: schritt; content: counter(schritt);
  position: absolute; top: 0; left: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--marke-tief); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 1rem;
}
.ablauf__schritt::after {
  content: ""; position: absolute; top: 20px; left: 48px; right: -12px; height: 1px;
  background: var(--marke-rand);
}
.ablauf__schritt:last-child::after { display: none; }
@media (max-width: 859px) { .ablauf__schritt::after { display: none; } }
.ablauf__schritt h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.ablauf__schritt p { font-size: .96rem; color: var(--text-2); margin: 0; max-width: 62ch; }

/* Fliesstext in Inhaltsspalten deckeln - einspaltig laeuft er sonst ueber
   die volle Containerbreite und damit weit ueber 92 Zeichen je Zeile. */
.split > div > p,
.rechtstext > p,
.merkliste p { max-width: 68ch; }

/* --------------------------------------------------------------- Text + Bild */

.split {
  display: grid;
  /* Auf der Token-Skala, nicht fluid: 4vw ergab bei 1100 px genau 44 px und
     stand damit in jeder Abnahme als krummer Abstand. */
  gap: 28px;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 768px)  { .split { gap: 40px; } }
@media (min-width: 1200px) { .split { gap: 48px; } }

/* Erst ab 1160 px zwei Spalten. Die Grenze ist gemessen, nicht geschaetzt:
   Spaltenbalance auf "Ueber uns" bei 900/1024/1100 px = 54/60/64 %, ab 1160 px
   dann 70 bis 73 % und stabil. Darunter wird der Fliesstext zu schmal und die
   Bildspalte laeuft sichtbar hoeher aus als der Text. */
@media (min-width: 1160px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Bei Formular-Abschnitten oben ausrichten - sonst schwebt die Textspalte mittig. */
.split--oben { align-items: start; }

/* Freigestelltes Portraet: sitzt auf einer Markenflaeche statt in einem Bildrahmen. */
.portraet { margin: 0; }
/* Neben kurzem Text wirkt ein volles Portraet erschlagend - dort begrenzt. */
.portraet--schmal { max-width: 380px; }
/* Kein festes Seitenverhaeltnis: der Rahmen folgt dem Motiv, sonst steht oben
   Luft, die wie ein Fehler aussieht. */
.portraet__flaeche {
  position: relative;
  border: 1px solid var(--marke-rand);
  border-radius: var(--radius-gross);
  background:
    radial-gradient(75% 60% at 50% 100%, rgba(86, 105, 107, .16) 0%, rgba(86, 105, 107, 0) 70%),
    linear-gradient(168deg, #fdfdfd 0%, var(--marke-blass) 100%);
  overflow: hidden;
  padding: 0 clamp(1rem, 3vw, 2.25rem);
}
.portraet__flaeche img { width: 100%; height: auto; display: block; }
.portraet__text {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem;
  margin-top: .95rem;
}
.portraet__text strong { font-weight: 600; }
.portraet__text span { font-size: .93rem; color: var(--text-2); }

/* Zwei Listen nebeneinander - fuer die Stellenbeschreibung ohne Bildspalte. */
.listenpaar { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 720px) { .listenpaar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.listenpaar h3 { margin-bottom: .8rem; }

.split__bild {
  border-radius: var(--radius-gross); overflow: hidden;
  border: 1px solid var(--marke-rand); background: var(--grund-3);
}
.split__bild img { width: 100%; height: auto; display: block; }
.split__bild picture { display: block; }
.split__bildunterschrift {
  font-size: .88rem; color: var(--text-2); margin: .7rem 0 0; text-align: left;
}

.merkliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
/* Ohne das Portraet daneben laeuft die Merkliste ueber die ganze Breite -
   dreispaltig statt als schmale Saeule mit leerer Flaeche rechts. */
@media (min-width: 900px) {
  .merkliste--breit { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}
.merkliste li { display: flex; gap: .85rem; align-items: flex-start; }
.merkliste__haken {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; margin-top: .18rem;
  background: var(--marke-blass); color: var(--marke-dunkel);
  display: flex; align-items: center; justify-content: center;
}
.merkliste__haken svg { width: 14px; height: 14px; }
.merkliste strong { display: block; margin-bottom: .1rem; }
.merkliste p { margin: 0; color: var(--text-2); font-size: .98rem; }

/* --- Werte: farbiges Symbol, Farbe je Wert aus derselben Palette wie die
   Illustrationen. Kein Wechsel der Kartenflaeche - der wirkte wie ein Schachbrett. --- */
.wert { align-items: flex-start; position: relative; overflow: hidden; }
.wert__zeichen {
  width: 54px; height: 54px; border-radius: 16px; margin-bottom: 1.1rem; flex: 0 0 auto;
  align-self: center;
  background: var(--wert-farbe, var(--marke-tief)); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.wert__zeichen svg { width: 26px; height: 26px; }
/* Feiner Farbstreifen an der Oberkante - verbindet Karte und Symbol. */
.wert::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--wert-farbe, var(--marke-tief));
}
.wert:hover { border-color: var(--wert-farbe, var(--marke-hell)); }

/* ---------------------------------------------------------------------- FAQ */

.faq { display: grid; gap: .75rem; max-width: 78ch; margin-inline: auto; }
.faq__eintrag {
  border: 1px solid var(--marke-rand); border-radius: var(--radius);
  background: #fff; overflow: hidden;
}
.faq__eintrag[open] { border-color: var(--marke-hell); }
.faq__frage {
  cursor: pointer; list-style: none; padding: 1.05rem 3rem 1.05rem 1.25rem;
  font-weight: 600; position: relative; color: var(--text);
}
.faq__frage::-webkit-details-marker { display: none; }
.faq__frage::after {
  content: ""; position: absolute; right: 1.25rem; top: 50%;
  width: 10px; height: 10px; margin-top: -6px;
  border-right: 2px solid var(--marke); border-bottom: 2px solid var(--marke);
  transform: rotate(45deg); transition: transform var(--tempo);
}
.faq__eintrag[open] .faq__frage::after { transform: rotate(225deg); margin-top: -2px; }
.faq__frage:hover { background: var(--grund-2); }
.faq__antwort { padding: 0 1.25rem 1.2rem; color: var(--text-2); }

/* --------------------------------------------------------------- Qualifikation */

/* align-items:start - sonst streckt sich der kuerzere Block und laeuft unten leer. */
/* Die beiden Bloecke tragen ungleich viele Punkte (bei 1100 px gemessen: 221
   gegen 391 px). Als zwei sichtbare Kaesten mit align-items: start sieht das
   ausgefranst aus, deshalb gleiche Hoehe und der Inhalt senkrecht mittig -
   dann ist die Luft ueber und unter der kuerzeren Liste gleich gross und liest
   sich als Absicht, nicht als Rest. */
.qual { display: grid; gap: 20px; align-items: stretch; }
@media (min-width: 780px) { .qual { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.qual__block {
  border-radius: var(--radius-gross); padding: 24px;
  display: flex; flex-direction: column; justify-content: center;
}
@media (min-width: 1200px) { .qual__block { padding: 32px; } }
.qual__block--ja { background: var(--marke-blass); border: 1px solid var(--marke-hell); }
.qual__block--nein { background: var(--grund-2); border: 1px solid var(--marke-rand); }
.qual__block h3 { display: flex; align-items: center; gap: .6rem; }
.qual__block h3 svg { width: 20px; height: 20px; flex: 0 0 auto; }
.qual__block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.qual__block li { position: relative; padding-left: 1.6rem; color: var(--text-2); font-size: .98rem; }
.qual__block li::before {
  position: absolute; left: 0; top: 0; font-weight: 600;
}
.qual__block--ja li::before { content: "✓"; color: var(--marke-dunkel); }
.qual__block--nein li::before { content: "–"; color: var(--text-2); }

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

.kontaktwege { display: grid; gap: 1rem; }
.kontaktweg {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.1rem 1.25rem; border: 1px solid var(--marke-rand);
  border-radius: var(--radius); background: #fff; text-decoration: none; color: var(--text);
  transition: border-color var(--tempo), box-shadow var(--tempo);
}
.kontaktweg:hover { border-color: var(--marke-hell); box-shadow: var(--schatten-1); color: var(--text); }
.kontaktweg__zeichen {
  width: 42px; height: 42px; border-radius: 11px; flex: 0 0 auto;
  background: var(--marke-blass); color: var(--marke-dunkel);
  display: flex; align-items: center; justify-content: center;
}
.kontaktweg__zeichen svg { width: 20px; height: 20px; }
/* Lange Adressen duerfen umbrechen, sonst steht die Karte bei 320 px ueber. */
.kontaktweg > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.kontaktweg__titel { font-weight: 600; display: block; }
.kontaktweg__wert { color: var(--marke-dunkel); font-weight: 600; overflow-wrap: anywhere; }
.kontaktweg__zusatz { display: block; font-size: .9rem; color: var(--text-2); }

.anfahrt { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .9rem; }
.anfahrt__zweit {
  font-size: .93rem; color: var(--marke-dunkel); font-weight: 500;
  display: inline-flex; align-items: center; min-height: 44px;
}

.zeiten { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.zeiten li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-bottom: .4rem; border-bottom: 1px dashed var(--marke-rand); font-size: .98rem;
}
.zeiten li:last-child { border-bottom: 0; }
.zeiten span:last-child { font-weight: 600; white-space: nowrap; }

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

.formular-huelle {
  background: #fff; border: 1px solid var(--marke-rand);
  border-radius: var(--radius-gross); padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--schatten-1);
}
.formular__schritt[hidden] { display: none; }

.schritt-anzeige {
  display: flex; align-items: center; gap: .6rem; margin-bottom: 1.4rem;
  font-size: .85rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-2);
}
.schritt-anzeige__balken {
  flex: 1; height: 4px; border-radius: 99px; background: var(--grund-3); overflow: hidden;
}
.schritt-anzeige__fuellung {
  display: block; height: 100%; width: 50%; background: var(--marke);
  transition: width var(--tempo);
}

.anliegen { display: grid; gap: .7rem; margin: 0 0 1.25rem; padding: 0; border: 0; }
@media (min-width: 620px) { .anliegen__optionen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.anliegen__optionen { display: grid; gap: .7rem; }
.anliegen legend {
  padding: 0; margin-bottom: .85rem; font-weight: 600; font-size: 1.08rem; color: var(--text);
}

.kachel { position: relative; display: block; }
.kachel input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
.kachel__inhalt {
  display: flex; gap: .8rem; align-items: flex-start; height: 100%;
  padding: .95rem 1rem; border: 1px solid var(--marke-rand); border-radius: var(--radius);
  cursor: pointer; background: #fff;
  transition: border-color var(--tempo), background var(--tempo), box-shadow var(--tempo);
}
.kachel__inhalt:hover { border-color: var(--marke-hell); background: var(--grund-2); }
.kachel input:focus-visible + .kachel__inhalt { outline: 3px solid var(--marke); outline-offset: 2px; }
.kachel input:checked + .kachel__inhalt {
  border-color: var(--marke); background: var(--marke-blass); box-shadow: inset 0 0 0 1px var(--marke);
}
.kachel__zeichen {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  background: var(--marke-blass); color: var(--marke-dunkel);
  display: flex; align-items: center; justify-content: center;
}
.kachel input:checked + .kachel__inhalt .kachel__zeichen { background: #fff; }
.kachel__zeichen svg { width: 18px; height: 18px; }
.kachel__titel { font-weight: 600; display: block; font-size: .99rem; line-height: 1.3; }
.kachel__text { font-size: .89rem; color: var(--text-2); display: block; margin-top: .15rem; }

/* Der Notfall-Pfad ist kein siebtes Anliegen, sondern ein eigener Weg -
   ueber die volle Breite steht er richtig und laesst das Raster nicht ausfransen. */
@media (min-width: 620px) { .kachel--akut { grid-column: 1 / -1; } }
.kachel--akut .kachel__inhalt { border-color: #e4c9a8; background: var(--signal-blass); }
.kachel--akut .kachel__zeichen { background: #fff; color: var(--signal); }
.kachel--akut input:checked + .kachel__inhalt { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }

.notfall-hinweis {
  margin-top: 1rem; padding: 1.1rem 1.25rem; border-radius: var(--radius);
  background: var(--signal-blass); border: 1px solid #e4c9a8;
}
.notfall-hinweis p { margin: 0 0 .9rem; color: #6d4415; font-size: .97rem; }
.notfall-hinweis .knopf--voll { background: var(--signal); }
.notfall-hinweis .knopf--voll:hover { background: #8d5119; }

.feld { display: grid; gap: .35rem; margin-bottom: 1.05rem; }
.feld > label { font-weight: 600; font-size: .95rem; }
.feld__hinweis { font-size: .87rem; color: var(--text-2); }
.feld input, .feld select, .feld textarea {
  font: inherit; font-size: 1rem; color: var(--text); background: #fff;
  border: 1px solid var(--marke-rand); border-radius: var(--radius);
  padding: .72rem .85rem; width: 100%;
  transition: border-color var(--tempo), box-shadow var(--tempo);
}
.feld textarea { min-height: 118px; resize: vertical; }
.feld 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='none' stroke='%2356696b' stroke-width='1.8' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 12px 8px;
  padding-right: 2.5rem;
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--marke); box-shadow: 0 0 0 3px rgba(86, 105, 107, .18);
}
.feld[data-fehler="ja"] input,
.feld[data-fehler="ja"] select,
.feld[data-fehler="ja"] textarea { border-color: var(--fehler); }
.feld__fehler { font-size: .88rem; color: var(--fehler); font-weight: 500; }
.feld__fehler:empty { display: none; }

.feld-paar { display: grid; gap: 0 1rem; }
@media (min-width: 620px) { .feld-paar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.einwilligung { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: 1.25rem; }
.einwilligung input { width: 20px; height: 20px; margin-top: .18rem; flex: 0 0 auto; accent-color: var(--marke); }
.einwilligung label { font-size: .92rem; color: var(--text-2); }
.einwilligung[data-fehler="ja"] label { color: var(--fehler); }

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

.formular__fuss { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.formular__zurueck {
  background: none; border: 0; color: var(--text-2); font: inherit; font-size: .95rem;
  cursor: pointer; padding: .5rem .25rem; text-decoration: underline;
}
.formular__zurueck:hover { color: var(--text); }

.meldung { border-radius: var(--radius); padding: 1rem 1.15rem; font-size: .97rem; margin-top: 1rem; }
.meldung[hidden] { display: none; }
.meldung--erfolg { background: #eef5f0; border: 1px solid #b9d6c4; color: var(--erfolg); }
.meldung--fehler { background: #fbeeee; border: 1px solid #e3bcbc; color: var(--fehler); }

/* -------------------------------------------------------------------- Modal */

.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(1rem, 4vh, 3rem) var(--rand);
  overflow-y: auto;
}
.modal__grund { position: fixed; inset: 0; background: rgba(29, 38, 38, .55); border: 0; padding: 0; cursor: pointer; }
.modal__fenster {
  position: relative; z-index: 1; width: 100%; max-width: 720px;
  background: #fff; border-radius: var(--radius-gross); box-shadow: var(--schatten-3);
  padding: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: 3rem;
}
.modal__schliessen {
  position: absolute; top: .85rem; right: .85rem;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--marke-rand);
  background: #fff; cursor: pointer; color: var(--text);
  display: flex; align-items: center; justify-content: center;
}
.modal__schliessen:hover { background: var(--grund-2); }
.modal__schliessen svg { width: 18px; height: 18px; }
.modal__kopf { margin-bottom: 1.4rem; padding-right: 3rem; }
.modal__kopf h2 { font-size: 1.5rem; margin-bottom: .35rem; }
.modal__kopf p { color: var(--text-2); margin: 0; font-size: .99rem; }
/* Eigene Zeile statt unterstrichener Nummer mitten im Satz. */
.modal__tel {
  display: inline-flex; align-items: center; gap: .75rem; margin-top: 1.1rem;
  padding: .7rem 1.1rem; border: 1px solid var(--marke-rand); border-radius: 99px;
  background: var(--marke-blass); color: var(--marke-tief); text-decoration: none;
  transition: border-color var(--tempo), background var(--tempo);
}
.modal__tel:hover { border-color: var(--marke-hell); background: #fff; color: var(--marke-tief); }
.modal__tel svg { width: 20px; height: 20px; color: var(--marke); flex: 0 0 auto; }
.modal__tel span { display: flex; flex-direction: column; line-height: 1.25; }
.modal__tel span > :first-child, .modal__tel span { font-size: .88rem; color: var(--text-2); }
.modal__tel strong { font-size: 1.06rem; font-weight: 600; color: var(--marke-tief); }

body.modal-offen { overflow: hidden; }

/* ---------------------------------------------------- Schwebende Bedienelemente */

/* Genau zwei Cluster - nie gleichzeitig sichtbar:
   1) Desktop: Knopf unten rechts   2) Mobil: Leiste am unteren Rand */

.schwebe-knopf {
  position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 55;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 1.35rem; border-radius: 99px;
  border: 1px solid var(--marke-rand);
  background: var(--aktion); color: var(--aktion-text); font: inherit; font-weight: 600;
  /* Auf weissem Grund ist die Kante das Einzige, was die Blase begrenzt. */
  box-shadow: var(--schatten-3);
  cursor: pointer;
  transition: background var(--tempo), transform var(--tempo);
}
.schwebe-knopf:hover { background: var(--aktion-dunkel); transform: translateY(-2px); }
.schwebe-knopf svg { width: 20px; height: 20px; }

.mobil-leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: none; gap: .6rem; padding: .6rem var(--rand) calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(150%) blur(8px);
  border-top: 1px solid var(--marke-rand);
  box-shadow: 0 -4px 20px rgba(29, 38, 38, .1);
}
.mobil-leiste .knopf { flex: 1; padding: .8rem .5rem; font-size: .96rem; }

@media (max-width: 820px) {
  .schwebe-knopf { display: none; }
  .mobil-leiste { display: flex; }
  /* Muss ueber der tatsaechlichen Leistenhoehe liegen, sonst verdeckt sie den Fuss. */
  body { padding-bottom: 96px; }
}
@media (max-width: 430px) {
  .mobil-leiste .knopf { font-size: .9rem; padding: .75rem .4rem; }
  body { padding-bottom: 112px; }
}

/* --- Bildband: breites Szenenfoto mit einer Zeile darauf --- */
.bildband { background: var(--marke-tief); }
.bildband__raster { display: grid; }

/* Das Bild wird nie noch einmal beschnitten - der Ausschnitt entsteht in
   tools/assets.py, wo der Anker auf den Gesichtern liegt. Eine feste Hoehe
   plus object-fit wuerde ihn hier ein zweites Mal wegschneiden. */
.bildband__bild { margin: 0; }
.bildband__bild img { display: block; width: 100%; height: auto; }

.bildband__panel {
  background: var(--marke-tief); color: var(--text-invers);
  display: flex; flex-direction: column; justify-content: center;
  padding: 32px var(--rand);
}
.bildband__panel .eyebrow { margin-bottom: 12px; }
.bildband__satz {
  margin: 0; font-weight: 600; text-wrap: balance;
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.85rem); line-height: 1.3;
}
.bildband__zusatz {
  margin: 12px 0 0; color: var(--text-invers-2); max-width: 42ch;
  font-size: 1rem; line-height: 1.6;
}

@media (min-width: 900px) {
  .bildband__raster { grid-template-columns: 1fr 1fr; align-items: stretch; }
  /* Aussenkante buendig zum Container, Innenkante mit festem Abstand zum Bild. */
  .bildband__panel {
    padding: 48px;
    padding-right: max(48px, calc((100vw - var(--breite)) / 2 + var(--rand)));
  }
  .bildband--gedreht .bildband__bild { order: 2; }
  .bildband--gedreht .bildband__panel {
    padding-right: 48px;
    padding-left: max(48px, calc((100vw - var(--breite)) / 2 + var(--rand)));
  }
}

/* ------------------------------------------------------------------- CTA-Band */

.cta-band {
  background: var(--marke-tief); color: #fff;
  padding: 48px 0;
}
@media (min-width: 768px)  { .cta-band { padding: 72px 0; } }
@media (min-width: 1200px) { .cta-band { padding: 80px 0; } }
.cta-band h2 { color: #fff; max-width: 20ch; }
.cta-band p { color: var(--text-invers-2); max-width: 52ch; }
.cta-band__innen {
  /* Gerastert, nicht fluid: 4vw traf bei 1100 px genau 44 px. */
  display: grid; gap: 24px; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
@media (min-width: 768px)  { .cta-band__innen { gap: 32px; } }
@media (min-width: 1200px) { .cta-band__innen { gap: 48px; } }
.cta-band .aktionszeile { margin-top: .5rem; }

/* ----------------------------------------------------------------- Fussleiste */

.fuss {
  background: #202b2c; color: var(--text-invers-2);
  padding: clamp(2.75rem, 5vw, 4rem) 0 0;
  font-size: .96rem;
}
.fuss a { color: var(--text-invers-2); text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss h3 { color: #fff; font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; }

.fuss__raster {
  display: grid; gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.fuss__marke { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.fuss__marke img { width: 42px; height: 42px; }
.fuss__marke strong { color: #fff; font-size: 1.05rem; display: block; }
/* Gleiche Sperrschrift wie in der Kopfleiste, damit der Fuss dieselbe Marke
   zeigt und nicht nur den Namen (Partner-Vorgabe, PDF S. 11). */
.fuss__zusatz {
  display: block; font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-invers-2);
}
.fuss__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; overflow-wrap: anywhere; }
.fuss__region { line-height: 1.7; }
.fuss__unten {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding: 1.25rem 0 calc(1.5rem + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; gap: .5rem 2.5rem;
  font-size: .9rem;
}
.fuss__unten ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* Impressum und Datenschutz standen mit "justify-content: space-between" ganz
   rechts aussen - also genau unter der schwebenden Blase. Am 11.09.2026 gemessen:
   bei 1440x900 traf ein Klick auf "Datenschutz" die Blase statt den Link.
   Jetzt folgen die Links direkt auf die Copyright-Zeile, und die Zeile haelt
   zusaetzlich Abstand zum unteren Rand, damit die Blase auch bei schmalen
   Fenstern nicht darauf liegt. */
@media (min-width: 821px) {
  .fuss__unten { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
}

@media (max-width: 820px) { .fuss__unten { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); } }

/* ------------------------------------------------------------------ Rechtstext */

/* 72ch statt 78: die Aufzaehlungen im Rechtstext lagen sonst ueber 92
   Zeichen je Zeile. */
.rechtstext { max-width: 72ch; }
.rechtstext h2 { margin-top: 2.5rem; font-size: 1.45rem; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext h3 { margin-top: 1.75rem; font-size: 1.12rem; }
.rechtstext ul { padding-left: 1.25rem; color: var(--text-2); }
.rechtstext li { margin-bottom: .4rem; max-width: 68ch; }
.rechtstext dl { display: grid; gap: .3rem 1.5rem; margin: 0 0 1.25rem; }
@media (min-width: 620px) { .rechtstext dl { grid-template-columns: 15rem 1fr; } }
.rechtstext dt { font-weight: 600; }
.rechtstext dd { margin: 0 0 .5rem; color: var(--text-2); }

/* ------------------------------------------------------------------- Stellen */

.stelle__kopf {
  display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.5rem;
}
.stelle__marker {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .9rem; border-radius: 99px; font-size: .89rem; font-weight: 500;
  background: var(--marke-blass); color: var(--marke-dunkel); border: 1px solid var(--marke-rand);
}
/* Ab Tablet als eine Zeile - darunter darf der Text umbrechen, sonst steht er ueber. */
@media (min-width: 560px) { .stelle__marker { white-space: nowrap; } }

/* Spaltensatz statt Raster: Karten mit sehr unterschiedlich langen Listen
   werden im Raster auf Reihenhoehe gestreckt und laufen unten leer.
   Im Spaltensatz behaelt jede Karte ihre natuerliche Hoehe. */
/* Sechs Gruppen mit sehr unterschiedlich langen Listen (162 bis 351 Zeichen).
   Als Kachelraster streckt jede Reihe die kurze Gruppe auf die lange, als
   Spaltensatz (columns) laeuft der Lesefluss senkrecht und die Spalten enden
   auf ganz verschiedenen Hoehen - beides wirkt unsortiert. Deshalb ein
   normales Raster in Leserichtung, aber ohne Kachelrahmen: ohne Kasten faellt
   eine kuerzere Gruppe nicht als halbleere Flaeche auf. */
.benefit-raster {
  display: grid; align-items: start;
  gap: clamp(24px, 3vw, 40px) var(--raster-abstand);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .benefit-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .benefit-raster { grid-template-columns: repeat(3, 1fr); } }
.benefit-gruppe { border-top: 2px solid var(--marke-rand); padding-top: 16px; }

.benefit-gruppe h3 { display: flex; align-items: center; gap: .65rem; font-size: 1.08rem; margin: 0 0 .9rem; }
.benefit-gruppe h3 svg { width: 20px; height: 20px; color: var(--marke); flex: 0 0 auto; }
.benefit-gruppe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.benefit-gruppe li {
  position: relative; padding-left: 1.5rem; font-size: .97rem; color: var(--text-2);
}
.benefit-gruppe li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--marke-hell);
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}