/* Fenstertechnik Weinhold – Stylesheet
   Alle Werte zentral als Variablen (webdesign-grundregeln, Abschnitt 10).
   Grundgerüst übernommen aus dem Projekt Renata Agler, Farben und Bausteine angepasst (26.10.2026). */

@font-face {
  font-family: "Poppins";
  src: url("../schriften/poppins-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../schriften/poppins-medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Abstände */
  --s-4: 4px; --s-8: 8px; --s-16: 16px; --s-24: 24px; --s-32: 32px;
  --s-48: 48px; --s-64: 64px; --s-96: 96px; --s-128: 128px;

  /* Schriftgrößen */
  --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-30: 30px;
  --fs-36: 36px; --fs-46: 46px; --fs-58: 58px; --fs-72: 72px;

  /* Textebenen (Desktop) */
  --fs-h1-hero: var(--fs-58);
  --fs-h1-unterseite: var(--fs-46);
  --fs-h2: var(--fs-36);
  --fs-h3: var(--fs-30);
  --fs-h4: var(--fs-24);
  --fs-text: var(--fs-20);
  --fs-menue: var(--fs-18);
  --fs-klein: var(--fs-16);

  --lh-text: 1.6;
  --lh-titel: 1.2;

  /* Schriften */
  --font-basis: "Poppins", system-ui, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --sperrung: 0.12em;

  /* Farben: Akzent ist die Firmenfarbe #0F3650 (Agenturinhaber, 26.10.2026) */
  --c-akzent: #0F3650;
  --c-akzent-hover: #1B4A6B;
  --c-akzent-text: #0F3650;
  --c-akzent-hell: #9FBCD1;      /* Akzent auf dunklen Flächen */
  --c-text: #2A3035;
  --c-text-leise: #5E6870;
  --c-hell: #FFFFFF;
  --c-zweit: #F2F4F6;
  --c-dunkel: #0E1E29;
  --c-creme: #F4F2EE;
  --c-creme-leise: #B5C0C8;
  --c-linie: #DDE2E6;
  --c-linie-dunkel: #2C3E4B;
  --c-platzhalter: #E6EAED;
  --c-fehler: #9B1C1C;
  --c-erfolg: #1F5B3A;
  --c-schleier: rgba(14, 30, 41, .85);

  /* Details */
  --radius: 4px;
  --linie: 1px;
  --akzentlinie: 2px;
  --inhalt: 1200px;
  --textbreite: 768px;
  --rand: var(--s-48);
  --sektion: var(--s-128);
  --kopf-hoehe: 96px;
  --logo-hoehe: 48px;
  --button-hoehe: 64px;
  --feld-hoehe: 64px;
  --feld-mehrzeilig: 160px;
  --auswahl: 24px;
  --hero-hoehe: min(80vh, 800px);
  --hero-hoehe-mobil: 60vh;
  --hero-hoehe-unterseite: max(50vh, 560px);
  --hero-hoehe-unterseite-mobil: 40vh;
  --textspalte: 65ch;
  --titelbox-breite: 640px;
  --dauer: 1.2s;
  --dauer-kurz: .2s;
  --dauer-menue: .3s;
  --deckkraft-leise: .6;
  --icon-social: var(--s-24);
  --galerie-format: 3 / 2;
  --untermenue-breite: 320px;
  --portraet-breite: 480px;
}

@media (max-width: 1199px) {
  :root {
    --fs-h1-hero: var(--fs-46);
    --fs-h3: var(--fs-24);
    --rand: var(--s-32);
    --sektion: var(--s-96);
  }
}
@media (max-width: 767px) {
  :root {
    --fs-h1-hero: var(--fs-36);
    --fs-h1-unterseite: var(--fs-36);
    --fs-h2: var(--fs-30);
    --fs-h4: var(--fs-20);
    --rand: var(--s-24);
    --sektion: var(--s-64);
    --kopf-hoehe: 96px;
    --logo-hoehe: 74px;   /* 2,3-mal so groß wie zuvor 32 px (Felix, 26.10.2026) */
    --galerie-format: 4 / 3;
  }
}

/* Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--kopf-hoehe); }
body {
  margin: 0;
  font-family: var(--font-basis);
  font-weight: var(--fw-regular);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  color: var(--c-text);
  background: var(--c-hell);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-weight: var(--fw-medium); line-height: var(--lh-titel); margin: 0; color: var(--c-text); }
p { margin: 0; }
p + p { margin-top: var(--s-16); }
a { color: var(--c-akzent-text); }
:focus-visible { outline: var(--akzentlinie) solid var(--c-akzent-text); outline-offset: var(--s-4); }
.sektion--dunkel :focus-visible, .fusszeile :focus-visible { outline-color: var(--c-akzent-hell); }

/* Blocksatz (Grundregeln 2.2): ab Tablet mit Silbentrennung, mobil linksbündig */
@media (min-width: 768px) {
  .blocksatz p {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
  }
}

.inhalt { max-width: calc(var(--inhalt) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }
.sektion { padding: var(--sektion) 0; }
.sektion--zweit { background: var(--c-zweit); }
.sektion--dunkel { background: var(--c-dunkel); color: var(--c-creme); }
.sektion--dunkel :is(h2, h3, h4) { color: var(--c-creme); }
.sektion--dunkel .hinweis { color: var(--c-creme-leise); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Dachzeile, Überschriften */
.dachzeile {
  display: block;
  font-size: var(--fs-klein);
  font-weight: var(--fw-medium);
  letter-spacing: var(--sperrung);
  text-transform: uppercase;
  color: var(--c-akzent-text);
  margin-bottom: var(--s-16);
}
.sektion--dunkel .dachzeile, .fusszeile .dachzeile { color: var(--c-akzent-hell); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.h4 { font-size: var(--fs-h4); }
.kopf { max-width: var(--textbreite); margin-bottom: var(--s-48); }
.kopf p { margin-top: var(--s-24); }
.kopf--mitte { margin-left: auto; margin-right: auto; text-align: center; }
.hinweis { font-size: var(--fs-klein); color: var(--c-text-leise); }
/* Sichtbare Markierung offener Angaben, vor dem Go-live entfernen */
.offen { background: var(--c-platzhalter); color: var(--c-text); padding: 0 var(--s-4); border-radius: var(--radius); }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8);
  height: var(--button-hoehe); padding: 0 var(--s-32);
  border-radius: var(--radius); border: var(--linie) solid var(--c-akzent);
  font: var(--fw-medium) var(--fs-menue)/1 var(--font-basis);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--dauer-kurz), color var(--dauer-kurz), border-color var(--dauer-kurz);
}
.button--primaer { background: var(--c-akzent); color: var(--c-creme); }
.button--primaer:hover { background: var(--c-akzent-hover); border-color: var(--c-akzent-hover); }
.button--sekundaer { background: transparent; color: var(--c-akzent-text); border-color: var(--c-akzent-text); }
.button--sekundaer:hover { background: var(--c-akzent); color: var(--c-creme); }
.sektion--dunkel .button--primaer { background: var(--c-creme); border-color: var(--c-creme); color: var(--c-dunkel); }
.sektion--dunkel .button--primaer:hover { background: var(--c-akzent-hell); border-color: var(--c-akzent-hell); }
.sektion--dunkel .button--sekundaer { color: var(--c-creme); border-color: var(--c-creme-leise); }
.sektion--dunkel .button--sekundaer:hover { background: var(--c-creme); color: var(--c-dunkel); }
.button img, .button .icon { width: var(--s-24); height: var(--s-24); }
.button .icon { color: currentColor; }
.aktionen { display: flex; flex-wrap: wrap; gap: var(--s-16); }
.textlink {
  display: inline-flex; align-items: center; gap: var(--s-8);
  font-weight: var(--fw-medium); color: var(--c-akzent-text); text-decoration: none;
}
.textlink::after { content: "→"; transition: transform var(--dauer-kurz); }
.textlink:hover::after { transform: translateX(var(--s-4)); }
.sektion--dunkel .textlink { color: var(--c-akzent-hell); }
@media (max-width: 767px) { .aktionen .button { width: 100%; } }

/* Kopfzeile */
.kopfzeile {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-hell);
  border-bottom: var(--linie) solid var(--c-linie);
}
.kopfzeile__leiste { display: flex; align-items: center; height: var(--kopf-hoehe); }
.kopfzeile__logo { flex: none; }
.kopfzeile__logo img { height: var(--logo-hoehe); width: auto; }
.menue { display: flex; align-items: center; gap: var(--s-24); margin: 0 0 0 var(--s-48); padding: 0; list-style: none; }
.menue > li { position: relative; }
.menue a, .menue__knopf {
  display: inline-flex; align-items: center; gap: var(--s-8);
  font: var(--fw-medium) var(--fs-menue)/var(--lh-text) var(--font-basis);
  color: var(--c-text); text-decoration: none;
  padding: var(--s-8) 0; border: 0; border-bottom: var(--akzentlinie) solid transparent;
  background: none; cursor: pointer;
}
.menue a:hover, .menue__knopf:hover { color: var(--c-akzent-text); }
/* Hauptpunkte beim Überfahren unterstreichen (Wunsch Felix, 26.10.2026) */
.menue > li > a, .menue__knopf { transition: color var(--dauer-kurz), border-color var(--dauer-kurz); }
.menue > li > a:hover, .menue__knopf:hover { border-bottom-color: var(--c-akzent); }
/* aria-current="page" für die Seite selbst, "true" für den Oberpunkt einer Unterseite */
.menue a[aria-current], .menue__knopf[data-aktiv] { color: var(--c-akzent-text); border-bottom-color: var(--c-akzent); }
.menue__pfeil { width: var(--s-16); height: var(--s-16); transition: transform var(--dauer-kurz); }
.untermenue {
  position: absolute; top: 100%; left: calc(-1 * var(--s-24)); z-index: 60;
  width: var(--untermenue-breite); margin: 0; padding: var(--s-16) 0; list-style: none;
  background: var(--c-hell); border: var(--linie) solid var(--c-linie); border-radius: var(--radius);
  opacity: 0; visibility: hidden; transform: translateY(var(--s-8));
  transition: opacity var(--dauer-kurz), visibility var(--dauer-kurz), transform var(--dauer-kurz);
}
.untermenue a { display: flex; padding: var(--s-8) var(--s-24); border: 0; }
.untermenue a[aria-current] { border: 0; }
.menue__punkt--unter:hover .untermenue,
.menue__punkt--unter:focus-within .untermenue,
.menue__knopf[aria-expanded="true"] + .untermenue { opacity: 1; visibility: visible; transform: none; }
.menue__punkt--unter:hover .menue__pfeil, .menue__knopf[aria-expanded="true"] .menue__pfeil { transform: rotate(180deg); }
.kopfzeile__rechts { display: flex; align-items: center; gap: var(--s-24); margin-left: auto; }
.kopfzeile__tel {
  display: inline-flex; align-items: center; gap: var(--s-8);
  font-size: var(--fs-menue); font-weight: var(--fw-medium);
  color: var(--c-text); text-decoration: none; white-space: nowrap;
}
.kopfzeile__tel:hover { color: var(--c-akzent-text); }
.icon { width: var(--s-24); height: var(--s-24); flex: none; color: var(--c-akzent-text); }
/* Social-Logos im Original (Grundregeln Abschnitt 5) */
.social { display: flex; align-items: center; gap: var(--s-16); }
.social a { display: inline-flex; }
.social img { width: var(--icon-social); height: var(--icon-social); }
.menue-knopf { display: none; }
.mobil-menue { display: none; }

/* Desktop bis 1439 px: Telefon nur als Symbol, damit Logo und sechs Menüpunkte in eine Zeile passen */
@media (max-width: 1439px) {
  .kopfzeile__tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* Tablet: Hamburger-Menü, Telefon und Social-Logos bleiben sichtbar */
@media (max-width: 1199px) {
  .kopfzeile__rechts { gap: var(--s-16); }
}
/* Tablet und mobil: Hamburger-Menü */
@media (max-width: 1199px) {
  .menue { display: none; }
  .menue-knopf {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: var(--s-16); width: var(--s-48); height: var(--s-48);
    background: none; border: 0; padding: 0; color: var(--c-text); cursor: pointer;
  }
  .mobil-menue {
    display: block; position: fixed; inset: var(--kopf-hoehe) 0 0 0; overflow-y: auto;
    background: var(--c-hell); padding: var(--s-24) var(--rand) var(--s-48);
    transform: translateX(100%); visibility: hidden;
    transition: transform var(--dauer-menue), visibility var(--dauer-menue);
  }
  .mobil-menue.offen { transform: none; visibility: visible; }
  .mobil-menue ul { list-style: none; margin: 0 0 var(--s-32); padding: 0; }
  .mobil-menue li a {
    display: block; padding: var(--s-16) 0; border-bottom: var(--linie) solid var(--c-linie);
    font-size: var(--fs-h4); font-weight: var(--fw-medium); color: var(--c-text); text-decoration: none;
  }
  .mobil-menue .mobil-menue__unter a { padding-left: var(--s-24); font-size: var(--fs-text); }
  .mobil-menue li a[aria-current] { color: var(--c-akzent-text); }
  .mobil-menue .social { margin-bottom: var(--s-32); }
  .mobil-menue .button { width: 100%; }
}
@media (max-width: 767px) {
  .kopfzeile__rechts { display: none; }
  .menue-knopf { margin-left: auto; }
}

/* Titelbereich */
.titel { position: relative; height: var(--hero-hoehe); overflow: hidden; background: var(--c-zweit); }
.titel__folie {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity var(--dauer) ease-in-out;
}
.titel__folie.aktiv { opacity: 1; }
.titel__folie picture, .titel__bilder picture { display: block; height: 100%; }
.titel__folie img, .titel__bild { width: 100%; height: 100%; object-fit: cover; }
.titel__inhalt { position: absolute; inset: auto 0 var(--s-64) 0; }
.titel__box {
  max-width: var(--titelbox-breite); background: var(--c-hell); border-radius: var(--radius);
  padding: var(--s-48);
}
.titel__box h1 { font-size: var(--fs-h1-hero); }
.titel__satz { margin: var(--s-24) 0 var(--s-32); }
.titel__punkte {
  position: absolute; right: var(--rand); bottom: var(--s-64);
  display: flex; gap: var(--s-8);
}
.titel__punkt {
  width: var(--s-48); height: var(--s-24); padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center;
}
.titel__punkt::before {
  content: ""; display: block; width: 100%; height: var(--akzentlinie);
  background: var(--c-hell); opacity: var(--deckkraft-leise);
}
.titel__punkt[aria-current="true"]::before { opacity: 1; }
@media (min-width: 768px) { .titel__bilder { position: absolute; inset: 0; } }
@media (max-width: 767px) {
  .titel { height: auto; overflow: visible; background: none; }
  .titel__bilder { position: relative; height: var(--hero-hoehe-mobil); overflow: hidden; }
  .titel__inhalt { position: relative; inset: auto; margin-top: calc(-1 * var(--s-48)); }
  .titel__box { padding: var(--s-24); }
  .titel__box .button { width: 100%; }
  .titel__punkte { bottom: auto; top: calc(var(--hero-hoehe-mobil) - var(--s-96)); }
}

/* Titelbereich Unterseite: festes Titelbild, ca. halbe Bildschirmhöhe */
.titel--unterseite { height: var(--hero-hoehe-unterseite); }
.titel--unterseite .titel__box h1 { font-size: var(--fs-h1-unterseite); }
@media (max-width: 767px) {
  .titel--unterseite { height: auto; }
  .titel--unterseite .titel__bilder { height: var(--hero-hoehe-unterseite-mobil); }
}

/* Seitenkopf ohne Bild (Rechtstexte, Kontakt, Seiten ohne Foto) */
.seitenkopf { padding: var(--s-96) 0 var(--s-64); background: var(--c-zweit); border-bottom: var(--linie) solid var(--c-linie); }
.seitenkopf h1 { font-size: var(--fs-h1-unterseite); }
.seitenkopf p { max-width: var(--textbreite); margin-top: var(--s-24); }
.seitenkopf .aktionen { margin-top: var(--s-32); }
@media (max-width: 767px) { .seitenkopf { padding: var(--s-64) 0 var(--s-48); } }

/* Text und Bild */
.text-bild { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-96); align-items: center; }
.text-bild__bild img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }
.text-bild__text { max-width: var(--textspalte); }
.text-bild__text .h2 { margin-bottom: var(--s-24); }
.text-bild__text .h3 { margin: var(--s-32) 0 var(--s-16); }
.text-bild__text .aktionen, .text-bild__text > .textlink { margin-top: var(--s-32); }
@media (min-width: 1200px) {
  .text-bild--umgekehrt { grid-template-columns: 7fr 5fr; }
  .text-bild--umgekehrt .text-bild__bild { order: 2; }
}
@media (max-width: 1199px) {
  .text-bild { grid-template-columns: 1fr; gap: var(--s-48); }
  .text-bild__bild img { aspect-ratio: 4 / 3; }
}
@media (max-width: 767px) {
  .text-bild { gap: var(--s-32); }
  .text-bild__bild img { aspect-ratio: 3 / 4; }
}

/* Textspalte (Leistungsseiten) */
.textspalte { max-width: var(--textbreite); }
.textspalte .h2 { margin-bottom: var(--s-24); }
.textspalte .h3 { margin: var(--s-48) 0 var(--s-16); }
.textspalte .h3:first-child { margin-top: 0; }

/* Feine Linienlisten */
.liste-fein { list-style: none; margin: var(--s-24) 0 0; padding: 0; border-top: var(--linie) solid var(--c-linie); }
.liste-fein li { padding: var(--s-16) 0; border-bottom: var(--linie) solid var(--c-linie); }
.liste-fein strong { font-weight: var(--fw-medium); }
.sektion--dunkel .liste-fein, .sektion--dunkel .liste-fein li { border-color: var(--c-linie-dunkel); }
@media (min-width: 768px) {
  .liste-fein--zweispaltig { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-32); border-top: 0; }
  .liste-fein--zweispaltig li:nth-child(-n+2) { border-top: var(--linie) solid var(--c-linie); }
}
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-96); }
@media (max-width: 1199px) { .zwei-spalten { gap: var(--s-48); } }
@media (max-width: 767px) { .zwei-spalten { grid-template-columns: 1fr; } }

/* Merkmale: kurze Punkte mit Titel und Satz, Linie oben */
.merkmale { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-48) var(--s-32); }
.merkmale--vier { grid-template-columns: repeat(4, 1fr); }
.merkmal { border-top: var(--akzentlinie) solid var(--c-akzent); padding-top: var(--s-24); }
.sektion--dunkel .merkmal { border-top-color: var(--c-akzent-hell); }
.merkmal h3 { font-size: var(--fs-h4); margin-bottom: var(--s-16); }
@media (max-width: 1199px) { .merkmale, .merkmale--vier { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .merkmale, .merkmale--vier { grid-template-columns: 1fr; gap: var(--s-32); } }

/* Kennzahlen-Reihe (nur belegte Zahlen) */
.kennzahlen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-32); }
.kennzahl { border-top: var(--linie) solid var(--c-linie); padding-top: var(--s-24); }
.kennzahl__zahl { display: block; font-size: var(--fs-h2); font-weight: var(--fw-medium); line-height: var(--lh-titel); color: var(--c-akzent-text); }
.kennzahl__label { display: block; margin-top: var(--s-8); font-size: var(--fs-klein); color: var(--c-text-leise); }
@media (max-width: 767px) { .kennzahlen { grid-template-columns: 1fr; gap: var(--s-24); } }

/* Ablauf in Schritten */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-32); }
.schritt { border-top: var(--linie) solid var(--c-linie); padding-top: var(--s-32); }
.sektion--dunkel .schritt { border-top-color: var(--c-linie-dunkel); }
.schritt__nr { display: block; margin-bottom: var(--s-24); font-size: var(--fs-h2); font-weight: var(--fw-medium); line-height: var(--lh-titel); color: var(--c-akzent-text); }
.sektion--dunkel .schritt__nr { color: var(--c-akzent-hell); }
.schritt h3 { font-size: var(--fs-h4); margin-bottom: var(--s-16); }
@media (max-width: 1199px) { .schritte { grid-template-columns: repeat(2, 1fr); gap: var(--s-48) var(--s-32); } }
@media (max-width: 767px) { .schritte { grid-template-columns: 1fr; gap: var(--s-32); } }

/* Karten */
.karten { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-32); }
.karten--drei { grid-template-columns: repeat(3, 1fr); }
.karte { position: relative; background: var(--c-hell); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.sektion:not(.sektion--zweit) .karte { border: var(--linie) solid var(--c-linie); }
.karte__bild { aspect-ratio: 3 / 4; background: var(--c-platzhalter); display: flex; align-items: center; justify-content: center; }
.karte__bild img { width: 100%; height: 100%; object-fit: cover; }
.karte__platzhalter { font-size: var(--fs-klein); color: var(--c-text-leise); }
.karte__text { padding: var(--s-32) var(--s-24); display: flex; flex-direction: column; gap: var(--s-16); flex: 1; }
.karte__text h3 { font-size: var(--fs-h4); }
.karte__text .textlink { margin-top: auto; padding-top: var(--s-8); }
/* Ganze Karte klickbar (eine Aktion pro Karte) */
.karte__link::before { content: ""; position: absolute; inset: 0; }
.karte:hover .textlink::after { transform: translateX(var(--s-4)); }
.karte:hover h3 { color: var(--c-akzent-text); }
@media (max-width: 1199px) { .karten { grid-template-columns: repeat(2, 1fr); gap: var(--s-24); } .karten--drei { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .karten, .karten--drei { grid-template-columns: 1fr; } .karte__bild { aspect-ratio: 4 / 3; } }

/* Bildergalerie innerhalb der Seite (Slider auf ausdrücklichen Wunsch, 26.10.2026) */
.galerie { outline: none; }
.galerie__buehne { display: grid; }
.galerie__folie {
  grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden;
  transition: opacity var(--dauer) ease-in-out, visibility var(--dauer);
}
.galerie__folie.aktiv { opacity: 1; visibility: visible; }
.galerie__folie img { width: 100%; aspect-ratio: var(--galerie-format); object-fit: cover; border-radius: var(--radius); }
.galerie__folie figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-8) var(--s-24); margin-top: var(--s-24); }
.galerie__titel { font-size: var(--fs-klein); font-weight: var(--fw-medium); letter-spacing: var(--sperrung); text-transform: uppercase; color: var(--c-akzent-text); }
.galerie__text { font-size: var(--fs-klein); color: var(--c-text-leise); }
.sektion--dunkel .galerie__titel { color: var(--c-akzent-hell); }
.sektion--dunkel .galerie__text { color: var(--c-creme-leise); }
.galerie__steuerung {
  display: flex; align-items: center; gap: var(--s-32);
  margin-top: var(--s-32); padding-top: var(--s-24); border-top: var(--linie) solid var(--c-linie);
}
.sektion--dunkel .galerie__steuerung { border-top-color: var(--c-linie-dunkel); }
.galerie__zaehler { font-size: var(--fs-klein); color: var(--c-text-leise); font-variant-numeric: tabular-nums; }
.galerie__zaehler span { color: var(--c-text); font-weight: var(--fw-medium); }
.sektion--dunkel .galerie__zaehler { color: var(--c-creme-leise); }
.sektion--dunkel .galerie__zaehler span { color: var(--c-creme); }
.galerie__punkte { display: flex; gap: var(--s-8); }
.galerie__punkt { width: var(--s-48); height: var(--s-24); padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.galerie__punkt::before {
  content: ""; display: block; width: 100%; height: var(--akzentlinie);
  background: var(--c-linie); transition: background-color var(--dauer-kurz);
}
.sektion--dunkel .galerie__punkt::before { background: var(--c-linie-dunkel); }
.galerie__punkt:hover::before { background: var(--c-text-leise); }
.galerie__punkt[aria-current="true"]::before { background: var(--c-akzent); }
.sektion--dunkel .galerie__punkt[aria-current="true"]::before { background: var(--c-akzent-hell); }
.galerie__pfeile { display: flex; gap: var(--s-8); margin-left: auto; }
.galerie__pfeil {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--s-48); height: var(--s-48); padding: 0; cursor: pointer;
  background: none; border: var(--linie) solid var(--c-linie); border-radius: var(--radius);
  transition: border-color var(--dauer-kurz);
}
.galerie__pfeil:hover { border-color: var(--c-akzent); }
.sektion--dunkel .galerie__pfeil { border-color: var(--c-linie-dunkel); }
.sektion--dunkel .galerie__pfeil .icon { color: var(--c-creme); }
.sektion--dunkel .galerie__pfeil:hover { border-color: var(--c-akzent-hell); }
@media (max-width: 767px) {
  .galerie__steuerung { gap: var(--s-16); }
  .galerie__punkte { display: none; }
  .galerie__folie figcaption { flex-direction: column; gap: var(--s-4); margin-top: var(--s-16); }
}

/* Referenzen: Raster nach Kategorien */
.filter { list-style: none; margin: 0 0 var(--s-48); padding: var(--s-24) 0 0; border-top: var(--linie) solid var(--c-linie); display: flex; flex-wrap: wrap; gap: var(--s-16) var(--s-32); }
.raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-32) var(--s-24); }
.raster figure { margin: 0; }
.raster img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }
.raster figcaption { margin-top: var(--s-16); font-size: var(--fs-klein); color: var(--c-text-leise); }
.raster-gruppe + .raster-gruppe { margin-top: var(--s-96); }
.raster-gruppe .kopf { margin-bottom: var(--s-32); }
@media (max-width: 1199px) { .raster { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .raster { grid-template-columns: repeat(2, 1fr); gap: var(--s-24) var(--s-16); } .raster-gruppe + .raster-gruppe { margin-top: var(--s-64); } }

/* Vorher / Nachher */
.vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-32); }
.vergleich figure { margin: 0; }
.vergleich img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.vergleich figcaption { margin-top: var(--s-16); }
@media (max-width: 767px) { .vergleich { grid-template-columns: 1fr; gap: var(--s-24); } }

/* Häufige Fragen (details/summary, ohne JavaScript) */
.fragen { max-width: var(--textbreite); display: grid; gap: var(--s-16); }
.frage {
  border: var(--linie) solid var(--c-linie); border-radius: var(--radius); padding: 0 var(--s-24); background: var(--c-hell);
  transition: border-color var(--dauer-kurz);
}
.frage summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-16);
  min-height: var(--button-hoehe); padding: var(--s-16) 0;
  font-weight: var(--fw-medium); cursor: pointer; list-style: none;
  transition: color var(--dauer-kurz);
}
.frage:hover, .frage[open] { border-color: var(--c-akzent); }
.frage:hover summary, .frage[open] summary { color: var(--c-akzent-text); }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: "+"; flex: none; font-size: var(--fs-h4); font-weight: var(--fw-regular); color: var(--c-akzent-text); }
.frage[open] summary::after { content: "−"; }
.frage p { padding-bottom: var(--s-24); }

/* Abschluss-Aufruf */
.abschluss { max-width: var(--textbreite); margin: 0 auto; text-align: center; }
.abschluss p { margin: var(--s-24) 0 var(--s-48); }
.abschluss .aktionen { justify-content: center; }

/* Porträt */
.portraet { max-width: var(--portraet-breite); }
.portraet img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }
.portraet figcaption { margin-top: var(--s-16); }
.platzhalter-bild {
  aspect-ratio: 3 / 4; border-radius: var(--radius); background: var(--c-platzhalter);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-8);
  color: var(--c-text-leise); font-size: var(--fs-klein); text-align: center; padding: var(--s-24);
}
.platzhalter-bild strong { font-size: var(--fs-h4); font-weight: var(--fw-medium); color: var(--c-text); }
.platzhalter-bild--quer { aspect-ratio: 3 / 2; }

/* Kontakt */
.kontaktwege { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-32); }
.kontaktweg { position: relative; display: flex; flex-direction: column; gap: var(--s-16); padding: var(--s-32); border: var(--linie) solid var(--c-linie); border-radius: var(--radius); background: var(--c-hell); transition: border-color var(--dauer-kurz); }
.kontaktweg:hover { border-color: var(--c-akzent); }
.kontaktweg img, .kontaktweg .icon { width: var(--s-32); height: var(--s-32); }
.kontaktweg :is(h2, h3) { font-size: var(--fs-h4); }
.kontaktweg a { font-weight: var(--fw-medium); text-decoration: none; overflow-wrap: anywhere; }
.kontaktweg a::before { content: ""; position: absolute; inset: 0; }
@media (max-width: 1199px) { .kontaktwege { grid-template-columns: 1fr; gap: var(--s-16); max-width: var(--textbreite); } }

.kontakt { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-96); align-items: start; }
.kontakt address { font-style: normal; margin: var(--s-24) 0 var(--s-32); }
.kontakt address a { color: var(--c-text); text-decoration: none; font-weight: var(--fw-medium); }
.zeiten { list-style: none; margin: 0 0 var(--s-32); padding: 0; border-top: var(--linie) solid var(--c-linie); }
.zeiten li { display: flex; justify-content: space-between; gap: var(--s-16); padding: var(--s-16) 0; border-bottom: var(--linie) solid var(--c-linie); }
.zeiten .zu { color: var(--c-text-leise); }
.kontakt__seite .h3 { font-size: var(--fs-h4); margin: var(--s-48) 0 var(--s-16); }
.kontakt__seite .h3:first-child { margin-top: 0; }
@media (max-width: 1199px) { .kontakt { grid-template-columns: 1fr; gap: var(--s-64); } }

/* Formular */
.formular { max-width: var(--textbreite); }
.formular__hinweis-oben { margin-bottom: var(--s-32); padding: var(--s-24); border-radius: var(--radius); border: var(--linie) solid var(--c-fehler); color: var(--c-fehler); }
.formular__erfolg { margin-bottom: var(--s-32); padding: var(--s-24); border-radius: var(--radius); border: var(--linie) solid var(--c-erfolg); color: var(--c-erfolg); }
.formular__hinweis-oben[hidden], .formular__erfolg[hidden] { display: none; }
.feld { margin: 0 0 var(--s-32); padding: 0; border: 0; min-width: 0; }
.feld--reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-24); }
.feld--reihe .feld { margin-bottom: 0; }
@media (max-width: 767px) { .feld--reihe { grid-template-columns: 1fr; gap: var(--s-32) 0; } }
.feld > label, .feld > legend, .feld__label {
  display: block; margin-bottom: var(--s-8); padding: 0;
  font-weight: var(--fw-medium); font-size: var(--fs-text);
}
.feld__hinweis { display: block; margin: calc(-1 * var(--s-4)) 0 var(--s-8); font-size: var(--fs-klein); color: var(--c-text-leise); }
.pflicht { color: var(--c-akzent-text); }
.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"], .feld select, .feld textarea {
  display: block; width: 100%; height: var(--feld-hoehe); padding: 0 var(--s-16);
  font: var(--fw-regular) var(--fs-text)/var(--lh-text) var(--font-basis); color: var(--c-text);
  background: var(--c-hell); border: var(--linie) solid var(--c-text-leise); border-radius: var(--radius);
}
.feld textarea { height: auto; min-height: var(--feld-mehrzeilig); padding: var(--s-16); resize: vertical; }
.feld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--c-text) 50%), linear-gradient(135deg, var(--c-text) 50%, transparent 50%); background-position: calc(100% - 28px) 50%, calc(100% - 22px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: var(--s-48); }
.feld :is(input, select, textarea):focus-visible { outline: var(--akzentlinie) solid var(--c-akzent-text); outline-offset: 0; border-color: var(--c-akzent); }
.feld--fehler :is(input, select, textarea) { border-color: var(--c-fehler); }
.feld__fehler { display: block; margin-top: var(--s-8); font-size: var(--fs-klein); color: var(--c-fehler); }
.feld__fehler:empty { display: none; }
.auswahl { display: grid; gap: var(--s-16); }
.auswahl--zweispaltig { grid-template-columns: 1fr 1fr; column-gap: var(--s-24); }
@media (max-width: 767px) { .auswahl--zweispaltig { grid-template-columns: 1fr; } }
.auswahl label { display: flex; align-items: flex-start; gap: var(--s-16); cursor: pointer; }
.auswahl input { flex: none; width: var(--auswahl); height: var(--auswahl); margin: var(--s-4) 0 0; accent-color: var(--c-akzent); }
.feld--zustimmung label { display: flex; align-items: flex-start; gap: var(--s-16); font-weight: var(--fw-regular); cursor: pointer; }
.feld--zustimmung input { flex: none; width: var(--auswahl); height: var(--auswahl); margin: var(--s-4) 0 0; accent-color: var(--c-akzent); }
/* Spamschutz: unsichtbares Fallenfeld */
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular .button { min-width: 50%; }
@media (max-width: 767px) { .formular .button { width: 100%; } }

/* Fußzeile */
.fusszeile { background: var(--c-dunkel); color: var(--c-creme); font-size: var(--fs-klein); padding: var(--s-96) 0 var(--s-48); border-top: var(--linie) solid var(--c-linie-dunkel); }
.fusszeile a { color: var(--c-creme); text-decoration: none; }
.fusszeile a:hover { color: var(--c-akzent-hell); }
.fusszeile__raster { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-48); }
.fusszeile__logo { display: inline-block; }
.fusszeile__logo img { height: var(--logo-hoehe); width: auto; }
/* Desktop: Logo 1,5-mal so groß (Felix, 26.10.2026): 84 px oben, 96 px unten */
@media (min-width: 1200px) { :root { --logo-hoehe: 84px; --kopf-hoehe: 112px; } .fusszeile__logo img { height: var(--s-96); } }
.fusszeile__marke p { max-width: var(--textspalte); margin: var(--s-24) 0; color: var(--c-creme-leise); }
.fusszeile ul { list-style: none; margin: 0; padding: 0; }
.fusszeile li + li { margin-top: var(--s-8); }
.fusszeile address { font-style: normal; }
.fusszeile__whatsapp { display: inline-flex; align-items: center; gap: var(--s-8); }
.fusszeile__whatsapp img { width: var(--s-24); height: var(--s-24); }
.fusszeile__unten {
  margin-top: var(--s-64); padding-top: var(--s-24); border-top: var(--linie) solid var(--c-linie-dunkel);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-16); color: var(--c-creme-leise);
}
@media (max-width: 1199px) { .fusszeile__raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .fusszeile { padding: var(--s-64) 0 var(--s-128); } .fusszeile__raster { grid-template-columns: 1fr; gap: var(--s-32); } }

/* Mobile Aktionsleiste: Anrufen und WhatsApp */
.aktionsleiste { display: none; }
@media (max-width: 767px) {
  .aktionsleiste {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: var(--s-8) var(--s-8) calc(var(--s-8) + env(safe-area-inset-bottom));
    background: var(--c-hell); border-top: var(--linie) solid var(--c-linie);
  }
  .aktionsleiste .button { padding: 0 var(--s-16); }
}

/* Rechtstexte */
.sektion--rechtstext { padding-top: var(--s-64); }
.rechtstext { max-width: var(--textbreite); overflow-wrap: break-word; }
.rechtstext h2 { font-size: var(--fs-h2); margin: var(--s-64) 0 var(--s-24); }
.rechtstext h3 { font-size: var(--fs-h4); margin: var(--s-48) 0 var(--s-16); }
.rechtstext > h2:first-child { margin-top: 0; }
.rechtstext address { font-style: normal; margin: var(--s-16) 0; }
.rechtstext ul { margin: var(--s-16) 0; padding-left: var(--s-24); }
.rechtstext ul li + li { margin-top: var(--s-8); }
.rechtstext__stand { margin-top: var(--s-64); font-size: var(--fs-klein); color: var(--c-text-leise); }
@media (max-width: 767px) { .sektion--rechtstext { padding-top: var(--s-48); } .rechtstext h2 { margin-top: var(--s-48); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .titel__folie, .galerie__folie, .mobil-menue, .button, .textlink::after, .frage, .frage summary, .untermenue, .menue__pfeil, .galerie__punkt::before, .galerie__pfeil, .kontaktweg { transition: none; }
}

/* ===== Pflege-Modul: aktueller Hinweis ===== */
.meldung { padding-top: var(--s-64); }
.meldung + .sektion { padding-top: var(--s-64); }
.meldung__box { max-width: var(--textbreite); padding: var(--s-32); background: var(--c-zweit); border-left: var(--akzentlinie) solid var(--c-akzent); border-radius: var(--radius); }
.meldung__box .dachzeile { margin-bottom: var(--s-8); }
.meldung__box h2 { margin-bottom: var(--s-16); }
.meldung__box h2 + p, .meldung__box .dachzeile + p { margin-top: 0; }
.seitenkopf + .meldung { padding-bottom: 0; }
@media (max-width: 767px) { .meldung { padding-top: var(--s-48); } .meldung + .sektion { padding-top: var(--s-48); } .meldung__box { padding: var(--s-24); } }

/* ===== Stellenangebote ===== */
.stellen { display: grid; gap: var(--s-64); }
.stelle { max-width: 960px; padding-top: var(--s-32); border-top: var(--akzentlinie) solid var(--c-akzent); }
.stelle__meta { margin-top: var(--s-16); font-size: var(--fs-klein); color: var(--c-text-leise); }
.stelle__text { max-width: var(--textbreite); margin-top: var(--s-24); }
.stelle__teile { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-32); margin-top: var(--s-48); }
.stelle__teile .liste-fein { margin-top: var(--s-16); font-size: var(--fs-klein); }
.stelle .aktionen { margin-top: var(--s-48); }
@media (max-width: 1199px) { .stelle__teile { grid-template-columns: 1fr; gap: var(--s-32); } }

/* ===== Bildrahmen mit festem Seitenverhältnis =====
   Das Format sitzt am <picture>-Rahmen, das Bild füllt ihn aus. So reserviert jeder Browser
   (auch Safari auf dem iPhone) die volle Bildhöhe, und Text kann nicht über ein Bild laufen. */
main picture { display: block; }
.text-bild__bild picture { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius); }
.galerie__folie picture { aspect-ratio: var(--galerie-format); overflow: hidden; border-radius: var(--radius); }
.raster picture { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius); }
.vergleich picture { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); }
.karte__bild picture { width: 100%; height: 100%; }
.text-bild__bild img, .galerie__folie img, .raster img, .vergleich img { height: 100%; }
.text-bild__bild { align-self: start; }
@media (min-width: 1200px) { .text-bild__bild { align-self: center; } }
@media (max-width: 1199px) { .text-bild__bild picture, .text-bild__bild .platzhalter-bild { aspect-ratio: 4 / 3; } }
@media (max-width: 767px) { .text-bild__bild picture, .text-bild__bild .platzhalter-bild { aspect-ratio: 3 / 4; } }

/* ===== Bildhöhe ohne aspect-ratio (iPhone-Browser) =====
   Safari und Chrome auf dem iPhone berechnen aspect-ratio in Flex-Karten teils falsch,
   dann läuft der Kartentext über das Bild. Die Höhe kommt hier aus padding-top,
   Bild und Platzhalter liegen absolut darin. Gilt für jedes Bildformat. */
.karte__bild { position: relative; flex: none; height: 0; padding-top: 133.333%; aspect-ratio: auto; overflow: hidden; }
.karte__bild picture, .karte__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.karte__platzhalter { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.text-bild__bild picture { position: relative; height: 0; padding-top: 133.333%; aspect-ratio: auto; }
.text-bild__bild picture img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; }
@media (max-width: 1199px) { .text-bild__bild picture { padding-top: 75%; } }
@media (max-width: 767px) {
  .karte__bild { padding-top: 75%; }
  .text-bild__bild picture { padding-top: 133.333%; }
}
.galerie__folie picture, .vergleich picture { position: relative; height: 0; padding-top: 66.667%; aspect-ratio: auto; }
.galerie__folie picture img, .vergleich picture img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; }
@media (max-width: 767px) { .galerie__folie picture { padding-top: 75%; } }