/* --- fonts --- */
/* Lebenspuls — lokale Schriften (DSGVO: kein Google-Request zur Laufzeit).
   Poppins, Latin-Subset. Der Browser lädt nur die Schnitte, die im Layout vorkommen. */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('../../fonts/poppins-200.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../../fonts/poppins-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../fonts/poppins-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../fonts/poppins-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../../fonts/poppins-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../../fonts/poppins-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../../fonts/poppins-900.woff2') format('woff2');
}

/* --- tokens --- */
/* Lebenspuls — Design-Tokens.
   Quelle: Figma "Lebenspuls", Frame "startseite" (17:2).
   Die Datei wächst mit jeder gebauten Section — Werte werden aus dem Design belegt,
   nicht geschätzt. Bereits belegt: Navigation (17:3), Hero (17:17). */

:root {
  /* ── Farben ───────────────────────────────────────────── */
  --color-primary:      #c50063;  /* Magenta — CTAs, Akzente, Logo */
  --color-bg:           #faf8f5;  /* warmes Off-White — Seitengrund */
  --color-border:       #e9e6e0;  /* Trennlinien */
  --color-text:         #4f4f4e;  /* Fließtext */
  --color-dark:         #0a0917;  /* Hero-Verlauf, dunkle Flächen */
  --color-white:        #ffffff;
  --color-bg-grau:      #e9e9e9;  /* Leistungs-Sections */
  --color-bg-grau-satt: #d9d9d9;  /* Ablauf-Section */
  --color-karte-rand:   #ddc6c3;  /* Rahmen der Karten */
  --color-nummer:       #c8446d;  /* Ziffern der drei Säulen */

  /* ── Schrift ──────────────────────────────────────────── */
  --font-body:          'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-headline:      var(--font-body);

  --weight-extralight:  200;
  --weight-light:       300;
  --weight-regular:     400;
  --weight-medium:      500;
  --weight-semibold:    600;
  --weight-bold:        700;
  --weight-black:       900;

  /* ── Schriftgrößen (Desktop-Werte aus dem Design) ─────── */
  --text-nav:           15px;  /* Navigation, Telefonnummer */
  --text-button:        16px;
  --text-body:          16px;
  --text-lead:          18px;  /* Hero-Fließtext */
  --text-h1:            40px;  /* Hero-Headline */

  /* ── Zeilenhöhen ──────────────────────────────────────── */
  --lh-tight:           1.18;  /* Headlines */
  --lh-normal:          1.6;   /* Fließtext */

  /* ── Layout ───────────────────────────────────────────── */
  --container-max:      1280px; /* 1920 minus 2 × 320 Seitenabstand */
  --container-pad:      clamp(20px, 5vw, 64px);

  /* ── Form ─────────────────────────────────────────────── */
  --radius:             8px;
  --transition:         250ms ease;
}

/* --- reset --- */
/* Lebenspuls — Reset. Die var()-Werte kommen aus base/tokens.css (lädt davor). */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* kein horizontaler Überlauf, bricht position:sticky nicht */
}

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

a { color: inherit; text-decoration: none; }
a:not([class]):hover { text-decoration: underline; }

ul, ol { list-style: none; }

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  line-height: var(--lh-tight);
  font-weight: var(--weight-bold);
  /* Deutsche Komposita sind lang: "Hauswirtschaftsfachkraft" misst bei 26px
     345px und passt auf einem 320px-Bildschirm in keinen Container. Weil der
     Body overflow-x: clip trägt, würde der Rest nicht überlaufen, sondern
     abgeschnitten. break-word greift nur, wenn ein Wort allein nicht passt —
     auf breiten Bildschirmen ändert sich dadurch nichts. */
  overflow-wrap: break-word;
}

/* Auf sehr schmalen Bildschirmen sieht eine saubere Silbentrennung besser aus
   als ein harter Bruch mitten im Wort. <html lang="de"> steht, der Browser
   trennt also nach deutschen Regeln. */
@media (max-width: 480px) {
  h1, h2, h3, h4, h5, h6 {
    hyphens: auto;
  }
}

/* Nur für Screenreader sichtbar */
.lp-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

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

/* --- container --- */
/* Lebenspuls — Container.
   Auf 1920px ergibt max-width 1280 genau die 320px Seitenabstand aus dem Design.
   min() sorgt dafür, dass darunter der Rand stehenbleibt, statt den Inhalt zu kleben. */

.lp-container {
  width: min(100% - 2 * var(--container-pad), var(--container-max));
  margin-inline: auto;
}

/* --- button --- */
/* Lebenspuls — Buttons.
   Zwei Größen aus dem Design: Standard (Hero, 16px) und kompakt (Header, 15px). */

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-button);
  font-weight: var(--weight-medium);
  line-height: 1;
  text-align: center;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.lp-btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.lp-btn--primary:hover,
.lp-btn--primary:focus-visible {
  background: #a80054;
}

.lp-btn--outline {
  border: 1px solid currentColor;
  color: var(--color-white);
}

.lp-btn--outline:hover,
.lp-btn--outline:focus-visible {
  background: var(--color-white);
  color: var(--color-dark);
}

.lp-btn--sm {
  padding: 14px 24px;
  font-size: var(--text-nav);
}

/* --- mail --- */
/* Lebenspuls — E-Mail-Adressen.
   Ohne JavaScript schlichter Text; mit JavaScript ein Klickziel, das die
   Adresse kopiert. Bewusst kein mailto: — solche Links werden von Spam-Bots
   gezielt ausgelesen. */

.lp-mail {
  position: relative;
  display: inline-block;
}

.lp-mail--klickbar {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(197, 0, 99, 0.45);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition);
}

.lp-mail--klickbar:hover,
.lp-mail--klickbar:focus-visible {
  text-decoration-color: currentColor;
}

/* Unterhalb statt oberhalb: über der Adresse steht in allen drei
   Verwendungen eine weitere Zeile, die sonst verdeckt würde. */
.lp-mail__hinweis {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 5;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--color-dark);
  color: var(--color-white);
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}

.lp-mail--kopiert .lp-mail__hinweis {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .lp-mail__hinweis {
    transition: none;
  }
}

/* --- header --- */
/* Lebenspuls — Kopfleiste mit Logo, Navigation, Telefon und CTA.
   Design: Frame 17:3 — 112px hoch, Grund #faf8f5, 1px Trennlinie unten. */

.lp-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.lp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 24px;
}

.lp-header__logo {
  display: block;
  flex-shrink: 0;
}

.lp-header__logo img {
  width: 232px;
  height: 64px;
  object-fit: contain;
}

.lp-header__nav {
  display: flex;
  align-items: center;
  gap: 40px;
}

.lp-menu {
  display: flex;
  align-items: center;
  gap: 28px;
}

.lp-menu a {
  font-size: var(--text-nav);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  transition: color var(--transition);
}

.lp-menu a:hover,
.lp-menu a:focus-visible,
.lp-menu .current-menu-item > a,
.lp-menu .current_page_item > a,
/* Auf einer Unterseite — etwa einer Stellenausschreibung unter /jobs/ — setzt
   WordPress am Elternpunkt nur diese Klasse. Ohne sie verliert "Jobs" dort die
   Markierung, obwohl man sich noch im Bereich befindet. */
.lp-menu .current-page-ancestor > a {
  color: var(--color-primary);
}

.lp-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-nav);
  color: var(--color-text);
  white-space: nowrap;
}

.lp-header__phone img {
  width: 18px;
  height: 18px;
}

/* Ab hier wird die Leiste zu schmal für Logo + vier Links + Telefon + Button.
   Kein Mobile-Entwurf im Design — Breakpoint aus der tatsächlichen Inhaltsbreite abgeleitet. */
@media (max-width: 1100px) {
  .lp-header__logo img {
    width: 180px;
    height: 50px;
  }

  .lp-header__nav {
    gap: 24px;
  }

  .lp-menu {
    gap: 20px;
  }
}

/* Sprungmarke für Tastatur-Nutzer — nur sichtbar, wenn sie den Fokus hat. */
.lp-skip {
  position: absolute;
  left: 50%;
  z-index: 200;
  padding: 12px 20px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 0 0 var(--radius) var(--radius);
  transform: translateX(-50%) translateY(-200%);
  transition: transform var(--transition);
}

.lp-skip:focus {
  transform: translateX(-50%) translateY(0);
}

/* --- nav-mobile --- */
/* Lebenspuls — Burger und Mobil-Menü.
   Es gibt keinen Mobile-Entwurf in Figma: Verhalten und Breakpoint sind abgeleitet.
   Ohne JavaScript (kein .lp-js am <html>) bleibt die Navigation ganz normal
   im Fluss stehen — sie verschwindet nur, wenn sie auch wieder aufklappbar ist. */

.lp-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
}

.lp-burger__strich {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

@media (max-width: 900px) {
  .lp-burger {
    display: flex;
  }

  .lp-js .lp-header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    padding: 24px var(--container-pad) 32px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }

  .lp-js .lp-nav-offen .lp-header__nav {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .lp-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .lp-menu a {
    display: block;
    padding-block: 10px;
    font-size: 17px;
  }

  .lp-header__cta {
    align-self: flex-start;
  }

  /* Burger wird zum X */
  .lp-nav-offen .lp-burger__strich:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .lp-nav-offen .lp-burger__strich:nth-child(2) {
    opacity: 0;
  }

  .lp-nav-offen .lp-burger__strich:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-js .lp-header__nav,
  .lp-burger__strich {
    transition: none;
  }
}

/* --- hero --- */
/* Lebenspuls — Hero der Startseite.
   Design: Figma, Frame 17:17 (1920 × 732).
   Foto füllt die Fläche, darüber ein dunkler Verlauf nach rechts auslaufend,
   rechts das Ornament und der gedrehte Anfrage-Button. */

.lp-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 732px;
  padding-block: 120px;
  overflow: hidden;
  color: var(--color-white);
}

.lp-hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Figma beschneidet oben nur rund 14 % des Überschusses (top -12,84 % bei 193 %
     Bildhöhe) — mit der Standardmitte verlöre man die Köpfe. */
  object-position: center 15%;
}

/* Der Verlauf dunkelt nur die linke Hälfte ab, damit der Text lesbar bleibt;
   rechts läuft er auf Alpha 0 aus und lässt das Foto unberührt. */
.lp-hero__verlauf {
  position: absolute;
  inset: 0;
  background: linear-gradient(86.13deg, rgb(10, 9, 23) 11.7%, rgba(190, 65, 104, 0) 54.54%);
  mix-blend-mode: multiply;
}

/* Das SVG bringt 48 % Deckkraft mit, Figma legt zusätzlich einen multiplizierenden
   Modus darüber — ohne den leuchtet das Ornament über der hellen Fassade zu grell. */
.lp-hero__ornament {
  position: absolute;
  top: 5.6%;
  left: 75.89%;
  width: 29.48%;
  height: auto;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.lp-hero__inhalt {
  position: relative;
  z-index: 2;
}

.lp-hero__headline {
  max-width: 460px;
  margin-bottom: 24px;
  font-size: var(--text-h1);
  line-height: var(--lh-tight);
  font-weight: var(--weight-light);
  color: var(--color-white);
}

.lp-hero__headline strong {
  font-weight: var(--weight-black);
}

.lp-hero__text {
  max-width: 367px;
  margin-bottom: 48px;
  font-size: var(--text-lead);
  line-height: var(--lh-normal);
}

.lp-hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Gedrehter Anfrage-Button. Mittelpunkt aus dem Design abgeleitet:
   Kreismitte liegt bei 77,1 % der Breite und 73,5 % der Höhe. */
.lp-hero__badge {
  position: absolute;
  top: 73.5%;
  left: 77.1%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 278px;
  height: 278px;
  padding: 10px;
  background: url('../../bilder/grafiken/hero-badge-kreis.svg') center / contain no-repeat;
  text-align: center;
  font-size: 32px;
  line-height: 1.3;
  font-weight: var(--weight-medium);
  color: var(--color-white);
  transform: translate(-50%, -50%) rotate(-22.04deg);
  transition: transform var(--transition);
}

.lp-hero__badge strong {
  display: block;
  font-weight: var(--weight-black);
  text-transform: uppercase;
  white-space: nowrap;
}

.lp-hero__badge:hover,
.lp-hero__badge:focus-visible {
  transform: translate(-50%, -50%) rotate(-22.04deg) scale(1.04);
}

/* Ab hier wird es eng: Foto, Ornament und Badge konkurrieren mit dem Text.
   Kein Mobile-Entwurf im Design — Abstufung abgeleitet. */
@media (max-width: 1200px) {
  .lp-hero__badge {
    width: 220px;
    height: 220px;
    font-size: 27px;
  }
}

@media (max-width: 900px) {
  .lp-hero {
    min-height: 0;
    padding-block: 80px 260px;
  }

  /* Der Verlauf aus dem Design läuft nach rechts aus — auf schmalen Bildschirmen
     steht der Text dann über der hellen Jacke. Hier dunkelt er stattdessen von
     oben ab, wo der Text sitzt. */
  .lp-hero__verlauf {
    background: linear-gradient(
      180deg,
      rgba(10, 9, 23, 0.80) 0%,
      rgba(10, 9, 23, 0.62) 55%,
      rgba(10, 9, 23, 0.38) 100%
    );
    mix-blend-mode: normal;
  }

  .lp-hero__ornament {
    top: auto;
    bottom: -4%;
    left: auto;
    right: -12%;
    width: 46%;
  }

  .lp-hero__badge {
    top: auto;
    bottom: 40px;
    left: auto;
    right: var(--container-pad);
    width: 170px;
    height: 170px;
    padding: 16px;
    font-size: 21px;
    transform: rotate(-22.04deg);
  }

  .lp-hero__badge:hover,
  .lp-hero__badge:focus-visible {
    transform: rotate(-22.04deg) scale(1.04);
  }

  .lp-hero__headline {
    font-size: 32px;
  }

  .lp-hero__text {
    margin-bottom: 32px;
    font-size: 16px;
  }
}

@media (max-width: 560px) {
  .lp-hero__aktionen .lp-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-hero__badge {
    transition: none;
  }
}

/* --- philosophie --- */
/* Lebenspuls — Philosophie-Section ("Ani-Bloom").
   Design: Figma, Frame 110:24804 (1920 × 662).
   Links das Foto mit weichem Schein und gestreuten Blüten, rechts der Text.
   Hintergrund ist ein Verlauf von Weiß nach #EAEAEA (aus dem Entwurf gemessen). */

.lp-philosophie {
  padding-block: 66px;
  background: linear-gradient(180deg, #ffffff 0%, #fdfdfd 55%, #eaeaea 100%);
}

.lp-philosophie__raster {
  display: grid;
  grid-template-columns: 1fr 600px;
  gap: 96px;
  align-items: center;
}

/* Raster-Kinder tragen von Haus aus min-width: auto und können damit nicht
   schmaler werden als ihr breitestes Wort. Auf schmalen Bildschirmen schob das
   die Spalte über den Rand hinaus. */
.lp-philosophie__raster > * {
  min-width: 0;
}

/* ── Illustration ─────────────────────────────────────── */

.lp-philosophie__illu {
  position: relative;
  aspect-ratio: 763 / 530;
}

.lp-philosophie__foto {
  position: absolute;
  top: 9.4%;
  left: 21.4%;
  width: 78.6%;
  height: 90.6%;
  object-fit: cover;
  border-radius: 24px;
  /* Der weiche rosa Schein rund um das Bild aus dem Entwurf */
  box-shadow: 0 0 64px 24px rgba(255, 160, 167, 0.38);
}

/* Auf "Über uns" steht an der Stelle des Fotos noch ein leerer Bildplatz —
   gleiche Position und Größe, nur ohne Motiv. */
.lp-philosophie__platz {
  position: absolute;
  top: 9.4%;
  left: 21.4%;
  width: 78.6%;
  height: 90.6%;
}

.lp-philosophie__bluete {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--s);
  /* Luft zu den Nachbar-Blüten: schrumpft die Grafik konzentrisch in ihrer
     Box, statt die x/y-Koordinaten aus dem Entwurf zu verschieben. */
  padding: 3px;
  box-sizing: border-box;
  animation: lp-bluete-fade 7s ease-in-out infinite;
  animation-delay: var(--verzoegerung, 0s);
}

.lp-philosophie__bluete img {
  width: 100%;
  height: auto;
}

/* "Random fade" aus dem Design: die Blüten atmen versetzt auf und ab. */
@keyframes lp-bluete-fade {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1); }
}

/* Auf der Leistungsseite wechseln sich die Blöcke ab: mal Foto links,
   mal rechts. Die Reihenfolge im Markup bleibt gleich, damit Vorlesegeräte
   immer erst das Bild und dann den Text bekommen. */
/* Die Blöcke der Leistungsseite folgen direkt aufeinander und tragen
   deshalb weniger Innenabstand als die einzelne Section auf der Startseite. */
.lp-philosophie--leistung {
  padding-block: 40px;
}

.lp-philosophie--gespiegelt .lp-philosophie__raster {
  grid-template-columns: 600px 1fr;
}

.lp-philosophie--gespiegelt .lp-philosophie__illu {
  order: 2;
}

.lp-philosophie--gespiegelt .lp-philosophie__inhalt {
  order: 1;
}

@media (min-width: 1701px) {
  .lp-philosophie--gespiegelt .lp-philosophie__illu {
    margin-left: 0;
    margin-right: -179px;
  }
}

/* ── Textspalte ───────────────────────────────────────── */

.lp-philosophie__inhalt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.lp-philosophie__headline {
  font-size: 32px;
  line-height: 1.2;
  font-weight: var(--weight-light);
  color: var(--color-text);
}

.lp-philosophie__headline strong {
  font-weight: var(--weight-black);
}

/* Auf "Über uns" ist die Überschrift durchgehend fett statt gemischt. */
.lp-philosophie__headline--einfach {
  font-weight: var(--weight-bold);
}

.lp-philosophie__text {
  font-size: 17px;
  line-height: 1.7;
  font-weight: var(--weight-medium);
}

.lp-philosophie__punkte {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lp-philosophie__punkt {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
}

.lp-philosophie__punkt img {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* Im Entwurf beginnt die Illustration bei 141 px, also 179 px links vom Textrand.
   Der Überhang greift nur, wo der Seitenrand ihn auch hergibt. */
@media (min-width: 1700px) {
  .lp-philosophie__illu {
    margin-left: -179px;
  }
}

/* ── Kleinere Bildschirme ─────────────────────────────── */

@media (max-width: 1100px) {
  .lp-philosophie__raster,
  .lp-philosophie--gespiegelt .lp-philosophie__raster {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .lp-philosophie--gespiegelt .lp-philosophie__illu,
  .lp-philosophie--gespiegelt .lp-philosophie__inhalt {
    order: 0;
  }

  .lp-philosophie__illu {
    /* width braucht es ausdrücklich: mit margin-inline auto allein schrumpft das
       Grid-Element auf seine Inhaltsbreite — und die ist null, weil alle Kinder
       absolut positioniert sind. */
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
  }
}

@media (max-width: 700px) {
  .lp-philosophie {
    padding-block: 48px;
  }

  /* Auf schmalen Bildschirmen zählt jeder Pixel: das Foto rückt näher an den
     linken Rand, die Blüten sitzen dann teilweise darüber statt daneben. */
  .lp-philosophie__foto {
    left: 10%;
    width: 88%;
  }

  .lp-philosophie__headline {
    font-size: 26px;
  }

  .lp-philosophie__text {
    font-size: 16px;
  }

  .lp-philosophie__punkt {
    align-items: flex-start;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-philosophie__bluete {
    animation: none;
  }
}

/* --- leistungen --- */
/* Lebenspuls — Leistungskarten.
   Design: Figma, Frames 17:40 (mit Überschrift) und 17:65 (mit Button und Hintergrundform).
   Beide Bänder teilen sich Karten und Grundton, deshalb eine Komponente. */

.lp-leistungen {
  position: relative;
  padding-block: 42px;
  background: var(--color-bg-grau);
  overflow: hidden;
}

.lp-leistungen--fortsetzung {
  padding-block: 24px 64px;
}

.lp-leistungen__headline {
  margin-bottom: 26px;
  font-size: var(--text-h1);
  line-height: 1.3;
  font-weight: var(--weight-light);
  color: var(--color-text);
}

/* Auf "Über uns" ist die Überschrift durchgehend in der Akzentfarbe. */
.lp-leistungen__headline--voll {
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  text-align: center;
}

.lp-leistungen__headline strong {
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}

/* Organische Form aus dem Entwurf, ragt links über den Rand hinaus. */
.lp-leistungen__blob {
  position: absolute;
  top: 40.6%;
  left: -17.4%;
  width: 46.9%;
  height: auto;
  pointer-events: none;
}

.lp-leistungen__raster {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: stretch;
}

/* Raster-Kinder tragen von Haus aus min-width: auto und können damit nicht
   schmaler werden als ihr breitestes Wort. Auf schmalen Bildschirmen schob das
   die Spalte über den Rand hinaus. */
.lp-leistungen__raster > * {
  min-width: 0;
}

.lp-leistungen__aktion {
  position: relative;
  display: inline-flex;
  margin-top: 48px;
}

/* ── Einzelne Karte ───────────────────────────────────── */

.lp-karte {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border: 4px solid var(--color-karte-rand);
  border-radius: 24px;
}

.lp-karte__bild {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 16px;
}

.lp-karte__inhalt {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lp-karte__titel {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.lp-karte__titel img {
  flex-shrink: 0;
  width: 19px;
  height: 20px;
}

.lp-karte__text {
  font-size: 15px;
  line-height: 1.6;
  font-weight: var(--weight-medium);
}

/* Variante der drei Säulen: etwas mehr Innenabstand, flacheres Bild,
   Ziffer statt Icon vor dem Titel. */
.lp-karte--saeule {
  padding: 28px;
}

.lp-karte--saeule .lp-karte__bild {
  height: 200px;
}

.lp-karte--saeule .lp-karte__titel {
  gap: 8px;
  align-items: center;
}

.lp-karte__nummer {
  flex-shrink: 0;
  font-size: 32px;
  font-weight: var(--weight-bold);
  color: var(--color-nummer);
}

/* ── Kleinere Bildschirme ─────────────────────────────── */

@media (max-width: 1100px) {
  .lp-leistungen__raster {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .lp-leistungen__headline {
    font-size: 32px;
  }
}

@media (max-width: 720px) {
  .lp-leistungen__raster {
    grid-template-columns: 1fr;
  }

  .lp-leistungen__headline {
    font-size: 26px;
  }

  .lp-karte__titel {
    font-size: 23px;
  }

  .lp-leistungen__blob {
    width: 90%;
  }

  .lp-leistungen__aktion {
    display: flex;
    margin-top: 32px;
  }
}

/* --- bildbanner --- */
/* Lebenspuls — Bildbanner: Foto über die volle Breite, dunkler Verlauf, Aussage links.
   Design: Figma, Frame 17:88 (1920 × 555).
   Bewusst eigenständig gehalten, weil die Unterseiten dasselbe Muster brauchen. */

.lp-bildbanner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 555px;
  padding-block: 120px;
  overflow: hidden;
  color: var(--color-white);
}

.lp-bildbanner__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Pro Verwendung steuerbar: welcher Bildausschnitt sichtbar bleibt, hängt
     vom Motiv ab. Voreinstellung passt zum Schach-Banner. */
  object-position: center var(--lp-bildausschnitt, 40%);
}

.lp-bildbanner__verlauf {
  position: absolute;
  inset: 0;
  background: linear-gradient(84.78deg, rgb(95, 0, 48) 8.18%, rgba(190, 65, 104, 0) 77.18%);
  mix-blend-mode: multiply;
}

.lp-bildbanner__inhalt {
  position: relative;
  z-index: 2;
}

.lp-bildbanner__headline {
  max-width: 470px;
  font-size: 48px;
  line-height: 1.22;
  font-weight: var(--weight-extralight);
  color: var(--color-white);
}

.lp-bildbanner__headline strong {
  font-weight: var(--weight-black);
}

/* Das Puls-Band im Entwurf setzt den Text über 503px statt 470px. */
.lp-bildbanner__headline--breit {
  max-width: 503px;
}

/* Kopfband einer Unterseite: flacher als das Band auf der Startseite. */
.lp-bildbanner--seitenkopf {
  min-height: 445px;
  padding-block: 100px;
}

/* Die Seitenköpfe nutzen einen dunkleren Verlauf als das Band auf der
   Startseite — Ausgangsfarbe fast schwarz statt Bordeaux. */
.lp-bildbanner--seitenkopf .lp-bildbanner__verlauf {
  background: linear-gradient(85.32deg, rgb(10, 9, 23) 5.35%, rgba(190, 65, 104, 0) 59.46%);
}

/* Ornament, das links unten aus dem Band herausragt. */
.lp-bildbanner__ornament {
  position: absolute;
  left: -4%;
  /* Im Entwurf sitzt es bei 43 % der Bandhöhe und ragt unten heraus. */
  top: 43.3%;
  width: 24.8%;
  height: auto;
  /* Multiply funktioniert hier nicht: Der Verlauf darunter ist fast schwarz,
     und Schwarz mal irgendeine Farbe bleibt Schwarz — die Blüte verschwindet,
     egal welche Deckkraft man wählt. Deshalb normales Blending: eine feste,
     niedrige Deckkraft macht sie als Farbton auf dem dunklen Verlauf sichtbar,
     ohne dass sie wie ein flacher Aufkleber wirkt. Bleibt innerhalb des Bands
     (overflow: hidden an .lp-bildbanner) statt ins Weiße darunter zu ragen. */
  opacity: 0.15;
  pointer-events: none;
}

.lp-bildbanner__aktion {
  margin-top: 48px;
}

/* Reines Bildband ohne Text, zwischen den Leistungsblöcken. */
.lp-bildbanner--schmal {
  min-height: 520px;
  padding-block: 0;
}

/* Das Ornament auf dunklem Grund ist kräftiger gefärbt und darf deutlicher sein. */
.lp-bildbanner__ornament--dunkel {
  left: -6%;
  top: 30%;
  width: 26.4%;
}

/* Zitat-Kopfband der Leistungsseite: Aussage plus Urheberzeile. */
.lp-bildbanner__urheber {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: var(--text-lead);
  font-weight: var(--weight-medium);
  color: var(--color-white);
}

.lp-bildbanner__urheber::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Der Bildausschnitt steht je Kopfband einzeln, weil er vom Motiv abhängt.
   Die Werte stammen aus dem Entwurf, nicht aus dem Augenmaß. */
.lp-bildbanner--seitenkopf .lp-bildbanner__foto {
  --lp-bildausschnitt: 10%;
}

/* "Über uns": Der Figma-Code nennt hier object-bottom, das trifft aber nicht —
   damit sieht man nur Sofa und Beine. Der Wert stammt aus dem Abgleich mit dem
   Referenzbild: Gesichter vollständig, oben etwas Raum. */
.lp-bildbanner--kopf-familie .lp-bildbanner__foto {
  --lp-bildausschnitt: 30%;
}

/* "Leistungen": Bildhöhe 229,8 % bei top -55,41 % ergibt einen Ausschnitt bei
   knapp 43 %. Zusätzlich ist das Foto im Entwurf horizontal gespiegelt —
   in Figma erkennbar an der negativen Breite (w-[-99.99%]) mit left:100%. */
.lp-bildbanner--kopf-zitat .lp-bildbanner__foto {
  --lp-bildausschnitt: 43%;
  transform: scaleX(-1);
}

/* ── Jobs-Seite ───────────────────────────────────────────
   Offener Bildplatz für Stellen ohne eigenes Kopfbandfoto (z. B. die
   Ausbildungs-Detailseite). Der Bildplatz nimmt die Stelle des Fotos ein;
   die Beschriftung steht mittig und damit neben der Aussage, nicht darunter. */

.lp-bildbanner__platz {
  position: absolute;
  inset: 0;
}

/* Zwei Klassen, damit die Fläche nicht vom später geladenen .lp-bildplatz
   auf dessen helleres Grau gezogen wird. Der Wert stammt aus dem Entwurf. */
.lp-bildbanner .lp-bildbanner__platz {
  background: #c4c4c4;
}

/* Der Jobs-Kopf ist höher als die übrigen Seitenköpfe (557 statt 445 px). */
.lp-bildbanner--kopf-jobs {
  min-height: 557px;
}

/* Im Entwurf ist das Foto gespiegelt (w-[-99.99%] bei left:100%), und die
   Bildhöhe 229,8 % bei top -28,92 % ergibt einen Ausschnitt bei knapp 22 %. */
.lp-bildbanner--kopf-jobs .lp-bildbanner__foto {
  --lp-bildausschnitt: 22%;
  transform: scaleX(-1);
}

/* Gemischte Schnitte wie im Entwurf: "Werde Teil der Mission" mager,
   "Lebensfreude" fett. Die Zeile bricht im Entwurf nach "der Mission". */
.lp-bildbanner__headline--jobs {
  max-width: 367px;
  font-size: var(--text-h1);
  line-height: var(--lh-tight);
  font-weight: var(--weight-light);
}

/* Bildband "Wir freuen uns auf dich!" — flacher als die übrigen Bänder. */
.lp-bildbanner--freuen {
  min-height: 358px;
}

.lp-bildbanner--freuen .lp-bildbanner__verlauf {
  background: linear-gradient(83.95deg, rgb(95, 0, 48) 0.97%, rgba(190, 65, 104, 0) 63.69%);
}

/* Im Entwurf ist das Foto gespiegelt — erkennbar an left:100% mit negativer
   Breite (w-[-99.98%] bei left:100%).

   Zum Ausschnitt: Figma gibt das Bild mit 1920 × 970 px aus, obwohl die Quelle
   4096 × 2753 px hat. Es wird dort also um rund ein Drittel in die Breite
   gezogen — nachgemessen am Kopf der Frau: 1,66 breit zu hoch im Entwurf gegen
   1,27 im Original. Das ist ein Darstellungsfehler des Entwurfs, kein
   Gestaltungswille, und wird hier bewusst nicht nachgebaut.

   Stattdessen deckt das Foto unverzerrt ab. Bei 6 % steht der Kopf vollständig
   im Band — mehr Luft darüber gibt die Bandhöhe von 358 px nicht her. */
.lp-bildbanner--freuen .lp-bildbanner__foto {
  --lp-bildausschnitt: 6%;
  transform: scaleX(-1);
}

.lp-bildbanner__headline--schmal {
  max-width: 330px;
}

/* Die beiden Blüten rechts im Band. Maße und Positionen aus dem Entwurf,
   in Prozent der Bandbreite, damit sie auf breiteren Schirmen mitwandern. */
.lp-bildbanner__bluete {
  position: absolute;
  height: auto;
  pointer-events: none;
}

.lp-bildbanner__bluete--gross {
  left: 62.4%;
  top: 66.5%;
  width: 19.58%;
}

.lp-bildbanner__bluete--klein {
  left: 59.8%;
  top: 31.6%;
  width: 5.21%;
}

.lp-bildbanner__headline--seite {
  font-size: 40px;
  font-weight: var(--weight-black);
}

@media (max-width: 900px) {
  .lp-bildbanner--seitenkopf,
  .lp-bildbanner--kopf-jobs {
    min-height: 260px;
    padding-block: 56px;
  }

  .lp-bildbanner__headline--seite {
    font-size: 32px;
  }
}

@media (max-width: 900px) {
  .lp-bildbanner {
    /* Nicht auf 0 setzen: sonst schrumpft das Band auf Texthöhe und das Foto
       ist nur noch ein Streifen. */
    min-height: 380px;
    padding-block: 72px;
  }

  /* Wie beim Hero: der Verlauf aus dem Entwurf läuft nach rechts aus und trägt
     auf schmalen Bildschirmen nicht mehr — hier dunkelt er von oben ab.
     Die Seitenkopf-Regel muss mitgenannt werden: sie hat zwei Klassen und
     gewänne sonst auch hier, obwohl sie später im Media-Query steht. */
  .lp-bildbanner__verlauf {
    background: linear-gradient(
      180deg,
      rgba(95, 0, 48, 0.86) 0%,
      rgba(95, 0, 48, 0.72) 60%,
      rgba(95, 0, 48, 0.55) 100%
    );
    mix-blend-mode: normal;
  }

  .lp-bildbanner--seitenkopf .lp-bildbanner__verlauf {
    background: linear-gradient(
      180deg,
      rgba(10, 9, 23, 0.86) 0%,
      rgba(10, 9, 23, 0.7) 60%,
      rgba(10, 9, 23, 0.5) 100%
    );
    mix-blend-mode: normal;
  }

  /* Ebenfalls zwei Klassen — muss hier genannt werden, sonst bliebe der
     waagerechte Verlauf aus dem Entwurf aktiv und die Aussage stünde auf
     hellem Foto. */
  .lp-bildbanner--freuen .lp-bildbanner__verlauf {
    background: linear-gradient(
      180deg,
      rgba(95, 0, 48, 0.86) 0%,
      rgba(95, 0, 48, 0.72) 60%,
      rgba(95, 0, 48, 0.55) 100%
    );
    mix-blend-mode: normal;
  }

  .lp-bildbanner--freuen {
    min-height: 260px;
  }

  .lp-bildbanner__headline--jobs {
    font-size: 32px;
  }

  /* Die Blüten sitzen im Entwurf im rechten Drittel — auf schmalen Schirmen
     liegt dort der Text. Sie rücken an den Rand und werden zurückhaltender. */
  .lp-bildbanner__bluete--gross {
    left: auto;
    right: -4%;
    top: 55%;
    width: 38%;
    opacity: 0.45;
  }

  .lp-bildbanner__bluete--klein {
    left: auto;
    right: 6%;
    top: 14%;
    width: 11%;
    opacity: 0.45;
  }

  .lp-bildbanner__headline {
    font-size: 34px;
  }
}

@media (max-width: 560px) {
  .lp-bildbanner__headline {
    font-size: 28px;
  }
}
@media (max-width: 900px) {
  .lp-bildbanner__ornament {
    width: 46%;
    bottom: -8%;
  }

  .lp-bildbanner__aktion {
    margin-top: 32px;
  }
}

/* --- saeulen --- */
/* Lebenspuls — "Warum brauche ich Lebenspuls?" mit drei Säulen.
   Design: Figma, Frame 17:93 (1920 × 922), Hintergrund weiß.
   Die Karten selbst kommen aus der Karten-Komponente (Variante --saeule). */

.lp-saeulen {
  padding-block: 35px 84px;
  background: var(--color-white);
}

.lp-saeulen__kopf {
  margin-bottom: 30px;
  text-align: center;
}

.lp-saeulen__marke {
  width: 160px;
  height: auto;
  margin: 0 auto 16px;
}

.lp-saeulen__headline {
  font-size: 52px;
  line-height: 1.2;
  font-weight: var(--weight-light);
  color: var(--color-text);
}

.lp-saeulen__headline strong {
  font-weight: var(--weight-black);
  color: var(--color-primary);
}

/* Auf "Über uns" steht nur der Kopfbereich, ohne Karten darunter. */
.lp-saeulen--nurkopf {
  padding-block: 35px 0;
}

.lp-saeulen--nurkopf .lp-saeulen__kopf {
  margin-bottom: 0;
}

.lp-saeulen__raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: stretch;
}

@media (max-width: 1100px) {
  /* Auf "Über uns" steht nur der Kopfbereich, ohne Karten darunter. */
.lp-saeulen--nurkopf {
  padding-block: 35px 0;
}

.lp-saeulen--nurkopf .lp-saeulen__kopf {
  margin-bottom: 0;
}

.lp-saeulen__raster {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .lp-saeulen__headline {
    font-size: 38px;
  }
}

@media (max-width: 720px) {
  .lp-saeulen {
    padding-block: 32px 56px;
  }

  /* Auf "Über uns" steht nur der Kopfbereich, ohne Karten darunter. */
.lp-saeulen--nurkopf {
  padding-block: 35px 0;
}

.lp-saeulen--nurkopf .lp-saeulen__kopf {
  margin-bottom: 0;
}

.lp-saeulen__raster {
    grid-template-columns: 1fr;
  }

  .lp-saeulen__headline {
    font-size: 28px;
  }

  .lp-saeulen__marke {
    width: 110px;
  }
}

/* --- ablauf --- */
/* Lebenspuls — "So einfach gehts!", drei Schritte.
   Design: Figma, Frame 17:119 (1920 × 727).
   Die Linie neben der Ziffer liegt im Entwurf als SVG vor — hier eine 2px-Fläche
   in derselben Farbe, das spart eine Bilddatei für einen simplen Strich. */

.lp-ablauf {
  padding-block: 120px;
  background: var(--color-bg-grau-satt);
}

.lp-ablauf__headline {
  margin-bottom: 64px;
  font-size: 52px;
  line-height: 1.2;
  font-weight: var(--weight-black);
  color: var(--color-primary);
  text-align: center;
}

.lp-ablauf__schritte {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.lp-ablauf__aktion {
  display: inline-flex;
  margin-top: 64px;
}

/* ── Ein Schritt ──────────────────────────────────────── */

.lp-schritt {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lp-schritt__kopf {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lp-schritt__nummer {
  flex-shrink: 0;
  font-size: 64px;
  line-height: 1;
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}

.lp-schritt__linie {
  flex: 1;
  height: 2px;
  background: var(--color-primary);
}

.lp-schritt__titel {
  font-size: 24px;
  line-height: 1.2;
  font-weight: var(--weight-bold);
  color: #000; /* im Entwurf bewusst reines Schwarz, nicht das übliche Textgrau */
}

.lp-schritt__text {
  font-size: 15px;
  line-height: 1.5;
  font-weight: var(--weight-medium);
  color: #000;
}

/* ── Kleinere Bildschirme ─────────────────────────────── */

@media (max-width: 900px) {
  .lp-ablauf {
    padding-block: 72px;
  }

  .lp-ablauf__headline {
    margin-bottom: 44px;
    font-size: 36px;
  }

  .lp-ablauf__schritte {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .lp-ablauf__aktion {
    display: flex;
    margin-top: 44px;
  }

  .lp-schritt__nummer {
    font-size: 48px;
  }
}

@media (max-width: 560px) {
  .lp-ablauf__headline {
    font-size: 28px;
  }
}

/* --- team --- */
/* Lebenspuls — Team-Section.
   Design: Figma, Frame 17:145 (1920 × 1142), Grundton wie die Leistungen. */

.lp-team {
  padding-block: 120px;
  background: var(--color-bg-grau);
}

.lp-team__headline {
  margin-bottom: 64px;
  font-size: 52px;
  line-height: 1.2;
  font-weight: var(--weight-bold);
  color: var(--color-text);
  text-align: center;
}

.lp-team__raster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.lp-team__text {
  max-width: 1280px;
  margin: 64px auto 0;
  font-size: var(--text-body);
  line-height: 1.6;
  font-weight: var(--weight-medium);
  text-align: center;
}

.lp-team__aktion {
  display: inline-flex;
  margin-top: 64px;
}

/* ── Personenkarte ────────────────────────────────────── */

.lp-person {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 24px;
}

.lp-person__bild {
  width: 100%;
  height: 359px;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 16px;
}

.lp-person__name {
  margin-bottom: 6px;
  font-size: 26px;
  line-height: 1.2;
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.lp-person__rolle {
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--color-nummer);
  text-transform: uppercase;
}

/* ── Kleinere Bildschirme ─────────────────────────────── */

@media (max-width: 900px) {
  .lp-team {
    padding-block: 72px;
  }

  .lp-team__headline {
    margin-bottom: 40px;
    font-size: 36px;
  }

  .lp-team__raster {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .lp-team__text,
  .lp-team__aktion {
    margin-top: 40px;
  }

  .lp-team__aktion {
    display: flex;
  }

  .lp-person__bild {
    height: 300px;
  }
}

@media (max-width: 560px) {
  .lp-team__headline {
    font-size: 28px;
  }

  .lp-person__bild {
    height: 240px;
  }
}

/* --- kontaktbanner --- */
/* Lebenspuls — Kontakt-Banner.
   Design: Figma, Frame 17:163 / Karte 17:164.
   Wird auf den Unterseiten wiederverwendet, deshalb als eigene Komponente. */

.lp-kontaktbanner {
  padding-block: 100px;
  background: var(--color-bg-grau);
}

.lp-kontaktbanner__karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  padding: 64px;
  border-radius: 32px;
  background: linear-gradient(90deg, var(--color-primary) 0%, #5f0030 100%);
  color: var(--color-white);
  text-align: center;
}

.lp-kontaktbanner__headline {
  margin-bottom: 16px;
  font-size: 52px;
  line-height: 1.2;
  font-weight: var(--weight-bold);
  color: var(--color-white);
}

.lp-kontaktbanner__text {
  font-size: var(--text-lead);
  line-height: 1.5;
  font-weight: var(--weight-medium);
  opacity: 0.9;
}

.lp-kontaktbanner__wege {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px;
}

.lp-kontaktbanner__weg {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
  font-weight: var(--weight-medium);
  color: var(--color-white);
  white-space: nowrap;
}

.lp-kontaktbanner__weg img {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.lp-kontaktbanner__weg:hover,
.lp-kontaktbanner__weg:focus-visible {
  text-decoration: underline;
}

/* Heller Button auf dunklem Grund — Gegenstück zu .lp-btn--primary */
.lp-btn--hell {
  padding: 18px 36px;
  background: var(--color-white);
  color: var(--color-nummer);
}

.lp-btn--hell:hover,
.lp-btn--hell:focus-visible {
  background: var(--color-bg);
  color: var(--color-primary);
}

@media (max-width: 900px) {
  .lp-kontaktbanner {
    padding-block: 64px;
  }

  .lp-kontaktbanner__karte {
    gap: 28px;
    padding: 40px 24px;
    border-radius: 24px;
  }

  .lp-kontaktbanner__headline {
    font-size: 32px;
  }

  .lp-kontaktbanner__text {
    font-size: 16px;
  }

  .lp-kontaktbanner__wege {
    flex-direction: column;
    gap: 16px;
  }

  .lp-kontaktbanner__weg {
    font-size: 18px;
  }
}

@media (max-width: 560px) {
  .lp-kontaktbanner__headline {
    font-size: 26px;
  }

  /* Die E-Mail-Adresse ist zu lang für 320px — hier darf sie brechen. */
  .lp-kontaktbanner__weg {
    white-space: normal;
    font-size: 16px;
  }
}

/* --- kontaktinfo --- */
/* Lebenspuls — Kontaktangaben mit Standortkarte.
   Design: Figma, Frame 97:15724 (1920 × 583). */

.lp-kontaktinfo {
  padding-block: 92px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
}

.lp-kontaktinfo__raster {
  display: grid;
  grid-template-columns: 520px 720px;
  justify-content: space-between;
  gap: 40px;
  align-items: center;
}

.lp-kontaktinfo__headline {
  margin-bottom: 8px;
  font-size: 32px;
  line-height: 1.2;
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

/* Kurzer Strich unter der Überschrift, aus dem Entwurf */
.lp-kontaktinfo__strich {
  display: block;
  width: 96px;
  height: 4px;
  margin-bottom: 32px;
  background: var(--color-primary);
  border-radius: 2px;
}

.lp-kontaktinfo__adresse {
  font-style: normal;
  line-height: 1.6;
}

.lp-kontaktinfo__firma {
  font-weight: var(--weight-bold);
}

.lp-kontaktinfo__wege {
  margin-top: 16px;
}

.lp-kontaktinfo__wege a {
  display: block;
  color: inherit;
}

.lp-kontaktinfo__wege a:hover,
.lp-kontaktinfo__wege a:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
}

.lp-kontaktinfo__karte {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  line-height: 0;
}

.lp-kontaktinfo__karte img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  transition: transform var(--transition);
}

.lp-kontaktinfo__karte:hover img,
.lp-kontaktinfo__karte:focus-visible img {
  transform: scale(1.02);
}

.lp-kontaktinfo__kartenhinweis {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.75;
}

@media (max-width: 1320px) {
  .lp-kontaktinfo__raster {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .lp-kontaktinfo {
    padding-block: 56px;
  }

  .lp-kontaktinfo__raster {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .lp-kontaktinfo__karte img {
    height: 260px;
  }
}

/* --- formular --- */
/* Lebenspuls — Kontaktformular.
   Design: Figma, Frame 97:15747 (1920 × 694). */

.lp-formularband {
  padding-block: 39px 73px;
  background: linear-gradient(180deg, #f5f5f5 0%, #e9e9e9 100%);
}

.lp-formularband__kopf {
  margin-bottom: 48px;
  text-align: center;
}

.lp-formularband__headline {
  margin-bottom: 8px;
  font-size: 36px;
  line-height: 1.2;
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.lp-formularband__strich {
  display: block;
  width: 120px;
  height: 4px;
  margin: 0 auto;
  background: var(--color-primary);
  border-radius: 2px;
}

.lp-formular {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 20px;
  max-width: 800px;
  margin-inline: auto;
}

.lp-formular__feld--breit {
  grid-column: 1 / -1;
}

.lp-formular input,
.lp-formular textarea {
  width: 100%;
  padding: 16px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 15px;
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}

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

.lp-formular input::placeholder,
.lp-formular textarea::placeholder {
  color: #9a9a99;
}

.lp-formular input:focus-visible,
.lp-formular textarea:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(197, 0, 99, 0.16);
}

.lp-formular input[aria-invalid="true"],
.lp-formular textarea[aria-invalid="true"] {
  border-color: #b3261e;
}

/* Alle Bewerben-Knöpfe springen hierher. Ohne Abstand landet die Überschrift
   unter dem mitlaufenden Kopf — die 112 px sind dessen gemessene Höhe. */
.lp-formularband--bewerbung {
  scroll-margin-top: 120px;
}

/* Der "Termin vereinbaren"-Knopf im Kopf springt hierher, wenn man schon auf
   der Kontaktseite steht — derselbe Versatz wie beim Bewerbungsformular. */
.lp-formularband--kontakt {
  scroll-margin-top: 120px;
}

/* ── Bewerbungsformular ───────────────────────────────────
   Gleiche Felder wie oben, dazu ein Auswahlfeld, ein Dateifeld und sichtbare
   Beschriftungen — bei einer Bewerbung ist ein Platzhalter allein zu wenig. */

.lp-formular select {
  width: 100%;
  padding: 16px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.lp-formular select:focus-visible,
.lp-formular input[type="file"]:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(197, 0, 99, 0.16);
}

.lp-formular select[aria-invalid="true"],
.lp-formular input[type="file"][aria-invalid="true"] {
  border-color: #b3261e;
}

.lp-formular__label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

/* Der Dateiwähler wird von jedem Browser eigen gezeichnet; gestaltbar ist
   verlässlich nur der Rahmen und der Knopf darin. */
.lp-formular input[type="file"] {
  padding: 12px 16px;
  font-size: 15px;
  cursor: pointer;
}

.lp-formular input[type="file"]::file-selector-button {
  margin-right: 16px;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-bg-grau);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.lp-formular input[type="file"]:hover::file-selector-button {
  background: var(--color-primary);
  color: var(--color-white);
}

.lp-formular__hinweis {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: #6f6f6e;
}

.lp-formular__hinweis a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ── Datenschutz-Zustimmung ───────────────────────────────
   Pflichtfeld bei beiden Formularen: nie vorausgewählt, muss aktiv
   angeklickt werden. */

.lp-formular__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #6f6f6e;
  cursor: pointer;
}

.lp-formular__checkbox input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-primary);
}

.lp-formular__checkbox a {
  color: var(--color-primary);
  text-decoration: underline;
}

.lp-formular__checkbox--fehler {
  color: #b3261e;
}

.lp-formular__checkbox--fehler input {
  outline: 2px solid #b3261e;
  outline-offset: 2px;
}

.lp-formular__aktion {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
}

.lp-formular__senden {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Falle für Bots: sichtbar nur für Programme, nicht für Menschen. */
.lp-formular__falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lp-meldung {
  max-width: 800px;
  margin: 0 auto 24px;
  padding: 16px 20px;
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.5;
}

.lp-meldung--ok {
  background: #e7f4ec;
  border: 1px solid #b7dcc6;
  color: #1e5333;
}

.lp-meldung--fehler {
  background: #fdecea;
  border: 1px solid #f3c2bd;
  color: #8c1d18;
}

@media (max-width: 700px) {
  .lp-formularband {
    padding-block: 32px 56px;
  }

  .lp-formularband__headline {
    font-size: 26px;
  }

  .lp-formular {
    grid-template-columns: 1fr;
  }

  .lp-formular__aktion .lp-btn {
    width: 100%;
  }
}

/* --- ueberuns --- */
/* Lebenspuls — Abschnitte, die nur auf "Über uns" vorkommen.
   Design: Figma, Frame 70:2.
   Was sich mit der Startseite deckt (Karten, Personenkarten, Bildbänder),
   kommt aus den bestehenden Komponenten. */

/* ── Offene Bildplätze ────────────────────────────────────
   Im Entwurf sind mehrere Bildflächen noch leer und mit "Bild folgt"
   beschriftet. Sie werden als Fläche dargestellt, damit die Lücke
   sichtbar bleibt, statt sie mit einem fremden Motiv zu kaschieren. */

.lp-bildplatz {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ebebeb;
  color: #999;
  font-size: 24px;
  text-align: center;
}

.lp-bildplatz--gross {
  border-radius: 40px;
  box-shadow: 0 4px 27px rgba(165, 0, 63, 0.41);
}

.lp-bildplatz--karte {
  height: 220px;
  border-radius: 16px;
  background: #c4c4c4;
  font-size: 16px;
}

/* ── Zweispaltiger Textblock unter der Mission ──────────── */

.lp-zweispalten {
  padding-block: 0 70px;
  background: var(--color-white);
}

/* Auf der Leistungsseite steht der Block allein, nicht direkt unter einer
   Überschrift — er braucht deshalb oben eigenen Abstand. */
.lp-zweispalten--eigenstaendig {
  padding-block: 40px 70px;
}

.lp-zweispalten__raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.lp-zweispalten__text {
  align-self: center;
  padding-block: 54px;
  font-size: 17px;
  line-height: 1.7;
  font-weight: var(--weight-medium);
}

.lp-zweispalten__rechts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding-block: 62px 54px;
}

/* ── Teamband ────────────────────────────────────────────
   Das Foto ist freigestellt und steht unten bündig auf dem Farbverlauf.
   Die Seitenkanten laufen weich aus, weil die Personen am Bildrand
   angeschnitten sind. */

.lp-teamband {
  position: relative;
  padding-top: 90px;
  background: linear-gradient(84.43deg, rgb(95, 0, 48) 8.18%, rgb(190, 65, 104) 100%);
  overflow: hidden;
}

.lp-teamband__rahmen {
  display: flex;
  justify-content: center;
}

.lp-teamband__foto {
  display: block;
  width: min(100%, 1180px);
  height: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* ── Kleinere Bildschirme ───────────────────────────────── */

@media (max-width: 1100px) {
  /* Auf der Leistungsseite steht der Block allein, nicht direkt unter einer
   Überschrift — er braucht deshalb oben eigenen Abstand. */
.lp-zweispalten--eigenstaendig {
  padding-block: 40px 70px;
}

.lp-zweispalten__raster {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .lp-zweispalten__text {
    padding-block: 32px 0;
  }

  .lp-zweispalten__rechts {
    padding-block: 24px 32px;
  }
}

@media (max-width: 900px) {
  .lp-teamband {
    padding-top: 56px;
  }

  .lp-bildplatz {
    font-size: 18px;
  }

  .lp-bildplatz--gross {
    border-radius: 24px;
  }
}

/* --- stelle --- */
/* Lebenspuls — Stellenausschreibungen (Detailseiten unter /jobs/…).
   Für diese Seiten gibt es keinen Figma-Entwurf. Maße und Farben stammen deshalb
   aus den bestehenden Komponenten, nicht aus dem Entwurf — die Textspalte ist so
   breit wie die Textspalte der Leistungsblöcke (600 px), die drei Listen nutzen
   das Kartenraster der Leistungsabschnitte. */

.lp-stelle {
  padding-block: 72px;
  background: var(--color-white);
}

/* Fließtext bleibt lesbar schmal, statt über die volle Containerbreite zu laufen. */
.lp-stelle__schmal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 760px;
}

.lp-stelle__headline {
  font-size: 32px;
  line-height: 1.2;
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.lp-stelle__absatz {
  font-size: 17px;
  line-height: 1.7;
  font-weight: var(--weight-medium);
}

.lp-stelle__absatz + .lp-btn {
  margin-top: 8px;
}

/* Der Abschluss-Satz der alten Website — leiser als der Fließtext darüber. */
.lp-stelle__claim {
  margin-top: 8px;
  font-size: var(--text-lead);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}

/* Der Einstieg schließt direkt an das Kopfband an und trägt deshalb oben
   weniger Abstand als der Abschlussabschnitt. */
.lp-stelle--einstieg {
  padding-block: 56px 64px;
}

.lp-stelle--besonders {
  background: linear-gradient(180deg, #ffffff 0%, #fdfdfd 55%, #eaeaea 100%);
}

/* ── Die drei Listen ──────────────────────────────────── */

.lp-leistungen--stelle {
  background: var(--color-bg-grau);
  padding-block: 64px 72px;
}

/* Die Leistungskarten stehen oben bündig, weil sie unterschiedlich viel Text
   tragen dürfen. Hier sind es drei gleichrangige Listen nebeneinander — dann
   fallen ungleiche Kastenhöhen als Unsauberkeit auf. */
.lp-leistungen--stelle .lp-leistungen__raster {
  align-items: stretch;
}

/* Die Karten tragen hier kein Bild, nur Text — dann wirkt der Innenabstand
   der Leistungskarten zu knapp. */
.lp-leistungen--stelle .lp-karte {
  padding: 32px;
  background: var(--color-white);
}

.lp-karte__titel--stelle {
  align-items: flex-start;
  font-size: 22px;
}

.lp-karte__titel--stelle img {
  /* Das Lotus-Icon sitzt neben einer mehrzeiligen Überschrift und muss auf der
     ersten Zeile bleiben, statt mittig zum ganzen Block zu rutschen. */
  margin-top: 4px;
  flex-shrink: 0;
}

.lp-stelle__liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--text-body);
  line-height: 1.5;
}

.lp-stelle__liste li {
  position: relative;
  padding-left: 18px;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.lp-stelle__liste li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* ── Kopfband der Detailseite ─────────────────────────── */

.lp-bildbanner--kopf-stelle {
  min-height: 380px;
}

.lp-bildbanner--kopf-stelle .lp-bildbanner__foto {
  --lp-bildausschnitt: 40%;
}

.lp-bildbanner__headline--stelle {
  max-width: 760px;
  font-size: var(--text-h1);
  line-height: var(--lh-tight);
  font-weight: var(--weight-black);
}

/* Weg zurück zur Übersicht, über der Überschrift. */
.lp-bildbanner__rueckweg {
  margin-bottom: 16px;
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
}

.lp-bildbanner__rueckweg a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-white);
  opacity: 0.85;
}

.lp-bildbanner__rueckweg a::before {
  content: "←";
}

.lp-bildbanner__rueckweg a:hover,
.lp-bildbanner__rueckweg a:focus-visible {
  opacity: 1;
  text-decoration: underline;
}

@media (max-width: 1100px) {
  .lp-leistungen--stelle .lp-leistungen__raster {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 900px) {
  .lp-stelle {
    padding-block: 48px;
  }

  .lp-stelle--einstieg {
    padding-block: 40px 48px;
  }

  /* Zwei Klassen — muss hier stehen, sonst behielte das Kopfband seine 380 px,
     obwohl die Regel für .lp-bildbanner--seitenkopf im selben Media-Query 260 px
     setzt. */
  .lp-bildbanner--kopf-stelle {
    min-height: 260px;
  }

  .lp-stelle__headline {
    font-size: 26px;
  }

  .lp-bildbanner__headline--stelle {
    font-size: 30px;
  }

  .lp-leistungen--stelle .lp-karte {
    padding: 24px;
  }
}

@media (max-width: 560px) {
  .lp-bildbanner__headline--stelle {
    font-size: 26px;
  }

  .lp-stelle__absatz {
    font-size: 16px;
  }
}

/* --- seite --- */
/* Lebenspuls — Seiten aus dem Editor: Impressum, Datenschutz, Cookie-Richtlinie.

   Kein Figma-Entwurf. Diese Seiten werden gelesen, nicht betrachtet — deshalb eine
   schmale Spalte und großzügige Zeilenhöhe. Alles darunter gilt für Inhalte, die
   jemand im Block-Editor pflegt, also für Überschriften, Absätze, Listen, Links
   und Tabellen. Complianz erzeugt seine Dokumente im selben Format. */

.lp-seite {
  padding-block: 72px 96px;
  background: var(--color-white);
}

/* Fließtext liest sich ab etwa 75 Zeichen je Zeile schlecht; 820 px kommen bei
   17 px Schriftgröße ungefähr dort heraus. */
.lp-seite__spalte {
  max-width: 820px;
}

.lp-seite__titel {
  margin-bottom: 40px;
  font-size: var(--text-h1);
  line-height: var(--lh-tight);
  font-weight: var(--weight-black);
  color: var(--color-text);
}

.lp-seite__text {
  overflow-wrap: anywhere;
  font-size: 17px;
  line-height: 1.75;
  font-weight: var(--weight-regular);
  color: var(--color-text);
}

.lp-seite__text > * + * {
  margin-top: 20px;
}

.lp-seite__text h2 {
  margin-top: 48px;
  font-size: 24px;
  line-height: 1.3;
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}

.lp-seite__text h3 {
  margin-top: 32px;
  font-size: 19px;
  line-height: 1.35;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.lp-seite__text h4 {
  margin-top: 24px;
  font-size: 17px;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

/* Die erste Überschrift schließt an den Titel an und braucht den großen
   Vorlauf nicht. */
.lp-seite__text > :first-child {
  margin-top: 0;
}

.lp-seite__text ul,
.lp-seite__text ol {
  padding-left: 22px;
}

.lp-seite__text ul {
  list-style: disc;
}

.lp-seite__text ol {
  list-style: decimal;
}

.lp-seite__text li + li {
  margin-top: 8px;
}

.lp-seite__text li::marker {
  color: var(--color-primary);
}

.lp-seite__text a {
  color: var(--color-primary);
  text-decoration: underline;
  /* Rechtstexte enthalten lange Adressen, die sonst seitlich hinauslaufen. */
  overflow-wrap: anywhere;
}

.lp-seite__text a:hover,
.lp-seite__text a:focus-visible {
  text-decoration: none;
}

.lp-seite__text strong {
  font-weight: var(--weight-semibold);
}

/* Complianz stellt die Cookie-Liste als Tabelle dar. */
.lp-seite__text table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.lp-seite__text th,
.lp-seite__text td {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.lp-seite__text th {
  background: var(--color-bg);
  font-weight: var(--weight-semibold);
}

/* Auf schmalen Bildschirmen darf die Tabelle seitlich rollen, statt die
   ganze Seite überlaufen zu lassen. */
.lp-seite__text .wp-block-table {
  overflow-x: auto;
}

@media (max-width: 900px) {
  .lp-seite {
    padding-block: 48px 64px;
  }

  .lp-seite__titel {
    margin-bottom: 28px;
    font-size: 32px;
  }

  .lp-seite__text {
    font-size: 16px;
  }

  .lp-seite__text h2 {
    margin-top: 36px;
    font-size: 21px;
  }

  .lp-seite__text h3 {
    font-size: 18px;
  }
}

/* --- galerie --- */
/* Lebenspuls — Galerie.
   Kein Figma-Entwurf; Abstände und Radien folgen den übrigen Komponenten.

   Die Spaltenzahl wird im Backend gepflegt und kommt als Inline-Variable am
   Abschnitt an. Die Werte hinter dem Komma sind die Vorgaben und müssen mit
   lp_galerie_stufen() in inc/galerie.php übereinstimmen — stehen sie
   auseinander, springt das Layout beim ersten Speichern.

   Die Bilddateien werden nie verändert. Ein anderes Seitenverhältnis heißt
   aspect-ratio plus object-fit, nicht ein neuer Zuschnitt in der Mediathek. */

.lp-galerie {
  padding-block: 72px;
  background: var(--color-white);
}

.lp-galerie__headline {
  margin-bottom: 32px;
  font-size: var(--text-h1);
  line-height: 1.3;
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  text-align: center;
}

.lp-galerie__raster {
  /* Eine Variable, zwei Layout-Verfahren weiter unten ziehen daraus. */
  --lp-galerie-spalten: var(--lp-galerie-spalten-desktop, 3);
  --lp-galerie-abstand: 16px;

  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 900px) {
  .lp-galerie__raster {
    --lp-galerie-spalten: var(--lp-galerie-spalten-tablet, 2);
  }
}

@media (max-width: 560px) {
  .lp-galerie__raster {
    --lp-galerie-spalten: var(--lp-galerie-spalten-mobil, 1);
    --lp-galerie-abstand: 12px;
  }
}

/* ── „Wie hochgeladen": Mehrspaltensatz ──────────────────
   Jedes Bild behält seine eigenen Proportionen, hohe und breite mischen sich
   wie an einer Pinnwand. Dafür braucht es columns statt Grid — ein Grid würde
   jede Zeile auf dieselbe Höhe zwingen. */

.lp-galerie--natural .lp-galerie__raster {
  columns: var(--lp-galerie-spalten);
  column-gap: var(--lp-galerie-abstand);
}

.lp-galerie--natural .lp-galerie__kachel {
  margin-bottom: var(--lp-galerie-abstand);
  /* Ohne das reißt der Mehrspaltensatz Bilder mitten durch. */
  break-inside: avoid;
}

/* ── Feste Seitenverhältnisse: Raster ────────────────────── */

.lp-galerie:not(.lp-galerie--natural) .lp-galerie__raster {
  display: grid;
  grid-template-columns: repeat(var(--lp-galerie-spalten), 1fr);
  gap: var(--lp-galerie-abstand);
}

.lp-galerie--4-3  { --lp-galerie-verhaeltnis: 4 / 3; }
.lp-galerie--1-1  { --lp-galerie-verhaeltnis: 1 / 1; }
.lp-galerie--16-9 { --lp-galerie-verhaeltnis: 16 / 9; }
.lp-galerie--9-16 { --lp-galerie-verhaeltnis: 9 / 16; }

.lp-galerie:not(.lp-galerie--natural) .lp-galerie__link {
  aspect-ratio: var(--lp-galerie-verhaeltnis, 4 / 3);
}

.lp-galerie:not(.lp-galerie--natural) .lp-galerie__bild {
  height: 100%;
  object-fit: cover;
}

/* ── Kachel ──────────────────────────────────────────────── */

.lp-galerie__link {
  display: block;
  overflow: hidden;
  border-radius: 16px;
}

.lp-galerie__bild {
  width: 100%;
  transition: transform var(--transition);
}

.lp-galerie__link:hover .lp-galerie__bild,
.lp-galerie__link:focus-visible .lp-galerie__bild {
  transform: scale(1.04);
}

.lp-galerie__link:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .lp-galerie__bild {
    transition: none;
  }

  .lp-galerie__link:hover .lp-galerie__bild,
  .lp-galerie__link:focus-visible .lp-galerie__bild {
    transform: none;
  }
}

@media (max-width: 900px) {
  .lp-galerie {
    padding-block: 48px;
  }

  .lp-galerie__headline {
    margin-bottom: 24px;
    font-size: 32px;
  }
}

/* --- lightbox --- */
/* Lebenspuls — Lightbox der Galerie.

   Die Verdunkelung trägt der Dialog selbst, nicht ::backdrop. So liegt sie in
   derselben Ebene wie der Inhalt und wird von jedem Browser gleich gezeichnet;
   ::backdrop lässt sich in älteren Fassungen nicht zuverlässig einfärben. */

.lp-lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  padding: 0;
  border: 0;
  background: rgba(10, 9, 23, 0.92);
}

.lp-lightbox[open] {
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  gap: 8px;
}

/* Ohne diese Zeile verliert das hidden-Attribut gegen display: grid. */
.lp-lightbox[hidden] {
  display: none;
}

.lp-lightbox__bild {
  grid-column: 2;
  grid-row: 1;
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 8px;
}

.lp-lightbox__pfeil,
.lp-lightbox__zu {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: background var(--transition);
}

.lp-lightbox__pfeil:hover,
.lp-lightbox__pfeil:focus-visible,
.lp-lightbox__zu:hover,
.lp-lightbox__zu:focus-visible {
  background: var(--color-primary);
}

.lp-lightbox__pfeil {
  grid-row: 1;
  width: 48px;
  height: 48px;
  font-size: 32px;
  line-height: 1;
}

.lp-lightbox__pfeil--zurueck {
  grid-column: 1;
}

.lp-lightbox__pfeil--vor {
  grid-column: 3;
}

.lp-lightbox__zu {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  font-size: 28px;
  line-height: 1;
}

.lp-lightbox__zaehler {
  grid-column: 2;
  grid-row: 2;
  padding-bottom: 16px;
  font-size: var(--text-body);
  color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 700px) {
  .lp-lightbox[open] {
    grid-template-columns: 44px 1fr 44px;
  }

  .lp-lightbox__pfeil {
    width: 36px;
    height: 36px;
    font-size: 24px;
  }

  .lp-lightbox__bild {
    max-height: 72vh;
  }
}

/* --- footer --- */
/* Lebenspuls — Footer.
   Das Design gibt nur eine dunkle Leiste mit Trennlinie vor (Frame 17:177).
   Aufbau und Inhalte sind daraus abgeleitet; Daten stammen aus der Kontaktseite. */

.lp-footer {
  background: var(--color-dark);
  color: rgba(255, 255, 255, 0.78);
  padding-block: 64px 32px;
}

.lp-footer__oben {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
}

.lp-footer__logo img {
  width: 200px;
  height: auto;
  margin-bottom: 20px;
}

.lp-footer__titel {
  margin-bottom: 16px;
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--color-white);
}

.lp-footer address {
  font-style: normal;
  line-height: var(--lh-normal);
}

/* Das Menü kommt aus derselben Funktion wie im Header und bringt .lp-menu mit —
   dort liegt es waagerecht, hier gehört es untereinander. */
.lp-footer .lp-menu {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.lp-footer .lp-menu a {
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  color: inherit;
}

.lp-footer .lp-menu a:hover,
.lp-footer .lp-menu a:focus-visible {
  color: var(--color-white);
}

.lp-footer a {
  color: inherit;
  transition: color var(--transition);
}

.lp-footer a:hover,
.lp-footer a:focus-visible {
  color: var(--color-white);
}

.lp-footer__kontakt a {
  display: block;
  margin-bottom: 10px;
}

.lp-footer__unten {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 14px;
}

.lp-footer__rechtliches {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .lp-footer__oben {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  .lp-footer__marke {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .lp-footer__oben {
    grid-template-columns: 1fr;
  }

  .lp-footer__unten {
    flex-direction: column;
    align-items: flex-start;
  }
}