/* ══════════════════════════════════════════════════
   Förderer Gebäudereinigung – Theme-Stile
   Übernommen aus der HTML-Vorlage. Helle, warme Flächen,
   stark gerundete Karten, Pill-Buttons, zentrierte Inhalte,
   wenige dunkle Ankerflächen. Orange und Navy stammen aus dem Logo.
══════════════════════════════════════════════════ */

/* ── Schrift: Source Sans 3 (Variable Font), SIL Open Font License 1.1.
   Lokal ausgeliefert, keine Verbindung zu Google. Hier eingebettet statt
   als eigene CSS-Datei, das spart zwei blockierende Requests. ── */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/source-sans-3-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/source-sans-3-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Icons: Boxicons 2.1.4, MIT-Lizenz, reduziert auf die verwendeten Symbole. ── */
@font-face{font-family:boxicons;font-weight:400;font-style:normal;src:url(../icons/boxicons.woff2) format('woff2')}
.bx{font-family:boxicons!important;font-weight:400;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto;display:inline-block;text-transform:none;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.bx-book-open:before{content:"\e9ef"}
.bx-building-house:before{content:"\ea0b"}
.bx-buildings:before{content:"\ea0c"}
.bx-calendar-check:before{content:"\ea17"}
.bx-check:before{content:"\ea41"}
.bx-check-circle:before{content:"\ea46"}
.bx-clipboard:before{content:"\ea5e"}
.bx-coffee:before{content:"\ea6c"}
.bx-cube:before{content:"\ea8d"}
.bx-droplet:before{content:"\eabc"}
.bx-envelope:before{content:"\eac1"}
.bx-euro:before{content:"\eac8"}
.bx-home:before{content:"\eb12"}
.bx-info-circle:before{content:"\eb21"}
.bx-leaf:before{content:"\e99a"}
.bx-map:before{content:"\eb56"}
.bx-mobile:before{content:"\eb8f"}
.bx-phone:before{content:"\ebb2"}
.bx-phone-call:before{content:"\ebb3"}
.bx-plus:before{content:"\ebc0"}
.bx-plus-medical:before{content:"\ebc2"}
.bx-printer:before{content:"\ebc9"}
.bx-recycle:before{content:"\ebd7"}
.bx-right-arrow-alt:before{content:"\ebe6"}
.bx-shield-quarter:before{content:"\ec08"}
.bx-shopping-bag:before{content:"\ec0b"}
.bx-spa:before{content:"\ec20"}
.bx-spray-can:before{content:"\ec23"}
.bx-time:before{content:"\ec45"}
.bx-user-check:before{content:"\ec64"}
.bx-window:before{content:"\ec82"}
.bx-wrench:before{content:"\ec8c"}
.bx-x:before{content:"\ec8d"}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
  --orange:      #f07e22;
  --orange-tief: #d96d14;
  --orange-text: #b45a08;   /* dunkler für lesbaren Text auf hellem Grund */
  --orange-hauch: rgba(240,126,34,0.10);
  --navy:        #172A3A;
  --navy-tief:   #10202e;
  --sand:        #faf7f2;   /* warmer Seitenhintergrund */
  --sand-tief:   #f1ebe1;   /* abgesetzte Abschnitte */
  --weiss:       #ffffff;
  --tinte:       #22303d;   /* Fließtext */
  --tinte-sanft: #5b6875;   /* Nebentext, AA-tauglich auf Sand */
  --linie:       rgba(23,42,58,0.10);

  --schrift: 'Source Sans 3', system-ui, -apple-system, sans-serif;

  --r-s: 12px;
  --r-m: 20px;
  --r-l: 30px;
  --pille: 999px;
  --schatten-s: 0 2px 12px rgba(23,42,58,0.06);
  --schatten-m: 0 12px 36px rgba(23,42,58,0.10);
  --schatten-g: 0 24px 64px rgba(23,42,58,0.16);
  --weich: cubic-bezier(0.22, 1, 0.36, 1);
  --fokus: 0 0 0 3px rgba(240,126,34,0.5);

  --inhalt: 1320px;
  --rand: clamp(1.25rem, 4vw, 2.5rem);

  /* Startwerte fuer die Kopfgeometrie. Beide ersetzt theme.js durch die
     tatsaechlich gemessenen Werte, sobald es laeuft – die Navigationshoehe
     haengt von Logo, Breakpoint und Schriftgroesse ab und laesst sich
     deshalb nicht sinnvoll fest eintragen. */
  --nav-platz: 6.9rem;   /* Hoehe der sticky Navigation samt Abstand */
  --leiste: 0px;         /* Hoehe der WordPress-Adminleiste, siehe unten */
  --schirm: 100vh;       /* volle Bildschirmhoehe */
}

/* svh statt vh, solange das Skript nicht gemessen hat: lieber etwas zu kurz
   als unter der mobilen Browserleiste abgeschnitten. */
@supports (height: 100svh) {
  :root { --schirm: 100svh; }
}

/* Eingeloggt schiebt WordPress die Seite unter der Adminleiste hindurch nach
   unten. Diese Hoehe fehlt dem Bildschirm und wird unten abgezogen. */
body.admin-bar { --leiste: 32px; }
@media (max-width: 782px) {
  body.admin-bar { --leiste: 46px; }
}

html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  font-family: var(--schrift);
  color: var(--tinte);
  background: var(--sand);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a:focus-visible, button:focus-visible {
  outline: none;
  box-shadow: var(--fokus);
  border-radius: var(--r-s);
}

/* Textlinks unterstreichen beim Überfahren – Buttons und Pillen bleiben ohne */
.nav-links a:hover,
.nav-tel:hover,
.mobile-menu a:hover,
a.k-punkt:hover,
.fuss-kontakt a:hover,
.fuss-unten a:hover,
.seite-text a:hover,
.stelle-text a:hover,
.form-hinweis a:hover,
.form-datenschutz a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.skip-link {
  position: absolute; left: 1rem; top: -3.5rem;
  background: var(--navy); color: #fff;
  padding: 0.65rem 1.3rem; z-index: 999;
  font-size: 0.9rem; font-weight: 700; text-decoration: none;
  border-radius: var(--pille);
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

/* Wiederkehrende Bausteine.
   Der Seitenrand liegt außerhalb der Maximalbreite, damit der sichtbare
   Inhalt exakt so breit ist wie die Navigations-Pille (beide --inhalt). */
.inhalt { max-width: calc(var(--inhalt) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }

h1, h2, h3 { color: var(--navy); letter-spacing: -0.02em; }
h2.titel, h1.titel {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 800; line-height: 1.1;
  text-wrap: balance;
}
.titel em { font-style: normal; color: var(--orange); }
.titel.hell { color: #fff; }

.lauftext {
  font-size: 1.13rem; font-weight: 400;
  color: var(--tinte); line-height: 1.7;
}
.lauftext.sanft { color: var(--tinte-sanft); }
.lauftext.hell { color: rgba(255,255,255,0.82); }

.kopfzeile { max-width: 62ch; }
.kopfzeile.mittig { margin-inline: auto; text-align: center; max-width: 82ch; }
.kopfzeile .lauftext { margin-top: 0.9rem; }

/* Buttons: Pillenform */
.knopf {
  display: inline-flex; align-items: center; gap: 0.55rem;
  border: none; cursor: pointer;
  border-radius: var(--pille);
  font-family: var(--schrift);
  font-size: 1rem; font-weight: 700; text-decoration: none;
  padding: 0.82rem 1.75rem;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.knopf:hover { transform: translateY(-2px); }
.knopf.voll { background: var(--orange); color: var(--navy-tief); }
.knopf.voll:hover { background: var(--orange-tief); }
.knopf.rahmen { background: rgba(23,42,58,0.07); color: var(--navy); }
.knopf.rahmen:hover { background: rgba(23,42,58,0.13); }
.knopf.rahmen.hell { background: rgba(255,255,255,0.14); color: #fff; }
.knopf.rahmen.hell:hover { background: rgba(255,255,255,0.24); }
.knopf.weiss { background: var(--weiss); color: var(--navy); box-shadow: var(--schatten-s); }
.knopf.weiss:hover { background: var(--sand-tief); }
.knopf i { font-size: 1.2rem; }

/* ══════════════════════════════
   KOPF: Pillen-Navigation
══════════════════════════════ */
.navhuelle {
  position: sticky; top: 0; z-index: 200;
  padding-block: 0.8rem;
  padding-inline: var(--rand);
  transition: padding 0.3s var(--weich);
}
/* Eingeloggt: Platz für die WordPress-Adminleiste */
body.admin-bar .navhuelle { top: var(--leiste); }
.navhuelle::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(var(--sand) 55%, transparent);
  opacity: 0; transition: opacity 0.3s;
  pointer-events: none;
}
.navhuelle.fest::before { opacity: 1; }
#nav {
  position: relative;
  max-width: var(--inhalt); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem;
  background: #21374c;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--pille);
  padding: 0.9rem 1rem 0.9rem 2rem;
  box-shadow: 0 10px 34px rgba(0,0,0,0.35);
  transition: box-shadow 0.3s, background 0.3s;
}
.navhuelle.fest #nav { box-shadow: var(--schatten-g); }

.nav-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
/* Begrenzung in beide Richtungen: Ein über den Customizer gesetztes Logo
   kann ein beliebiges Seitenverhältnis haben und würde die Navigation sonst
   in die Höhe treiben – und mit ihr die Rechnung für die Hero-Höhe. */
.nav-logo img {
  max-width: 168px; max-height: 46px;
  width: auto; height: auto; display: block;
  object-fit: contain;
}

.nav-links { display: flex; gap: 0.15rem; }
/* Kein Zeilenumbruch in der Navigation: Bräche hier ein Menüpunkt oder die
   Telefonnummer um, würde die Pille höher – und weil die Hero-Höhe an der
   gemessenen Navigationshöhe hängt, verschöbe sich der halbe Kopfbereich.
   Lieber läuft es eng, bis der Burger übernimmt. */
.nav-links a, .nav-tel, .nav-cta { white-space: nowrap; }
.nav-links a {
  text-decoration: none; font-size: 0.95rem; font-weight: 500;
  color: rgba(255,255,255,0.82);
  padding: 0.5rem 0.95rem; border-radius: var(--pille);
  transition: color 0.2s, background 0.2s;
}
.nav-links a:hover { color: #fff; background: rgba(255,255,255,0.08); }
.nav-links a.aktiv { color: #fff; background: rgba(255,255,255,0.12); font-weight: 700; }

.nav-r { display: flex; align-items: center; gap: 0.4rem; }
.nav-tel {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.95rem; font-weight: 600; color: rgba(255,255,255,0.85);
  text-decoration: none; padding: 0.5rem 0.9rem; border-radius: var(--pille);
  transition: color 0.2s;
}
.nav-tel:hover { color: var(--orange); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--orange); color: var(--navy-tief);
  text-decoration: none; font-size: 0.95rem; font-weight: 700;
  padding: 0.68rem 1.5rem; border-radius: var(--pille);
  transition: background 0.2s;
}
.nav-cta:hover { background: var(--orange-tief); }
.nav-cta i { font-size: 1.1rem; }

.nav-burger {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; background: none; border: none; cursor: pointer; padding: 0;
}
.nav-burger span {
  display: block; width: 22px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform 0.3s var(--weich), opacity 0.2s;
}
body.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobiles Menü: Logo oben, Punkte mittig, Kontakt unten ──
   Drei Zeilen im Raster (auto / 1fr / auto). Die mittlere Zeile nimmt den
   Rest und zentriert die Menüpunkte darin – dadurch sitzt das Logo immer
   oben und die Kontaktzeile immer unten, egal wie viele Punkte es gibt. */
.mobile-menu {
  position: fixed; inset: 0; z-index: 250;
  background:
    radial-gradient(120% 75% at 50% 0%, rgba(240,126,34,0.18) 0%, transparent 62%),
    rgba(16,32,46,0.97);
  backdrop-filter: blur(16px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center; align-items: center;
  text-align: center;
  padding: clamp(1.4rem, 4vh, 2.4rem) 1.5rem calc(clamp(1.2rem, 3vh, 2rem) + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transition: opacity 0.34s var(--weich), visibility 0.34s;
}
body.menu-open { overflow: hidden; }
body.menu-open .mobile-menu { opacity: 1; visibility: visible; }

/* Die Kopfleiste blendet sich aus, damit das Overlay die volle Fläche hat.
   Mit Übergang – ohne ihn sprang die Pille hart weg und das Öffnen wirkte
   abgehackt. Geschlossen wird über den X-Button im Menü selbst. */
.navhuelle {
  transition: padding 0.3s var(--weich), opacity 0.25s var(--weich), visibility 0.25s;
}
body.menu-open .navhuelle { opacity: 0; visibility: hidden; }

.mm-schliessen {
  position: fixed; top: clamp(0.9rem, 2.2vh, 1.3rem); right: clamp(0.9rem, 3vw, 1.5rem);
  width: 46px; height: 46px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 50%; cursor: pointer;
  color: #fff; font-size: 1.5rem; padding: 0;
  opacity: 0; transform: scale(0.7) rotate(-90deg);
  transition: opacity 0.3s var(--weich), transform 0.35s var(--weich), background 0.2s;
}
body.menu-open .mm-schliessen { opacity: 1; transform: none; transition-delay: 0.14s; }
.mm-schliessen:active { background: rgba(255,255,255,0.2); }

/* Logo ganz oben */
.mm-marke {
  display: block;
  opacity: 0; transform: translateY(-12px);
  transition: opacity 0.4s var(--weich), transform 0.4s var(--weich);
}
.mm-marke img {
  max-width: 200px; max-height: 54px;
  width: auto; height: auto; display: block;
  object-fit: contain;
}
body.menu-open .mm-marke { opacity: 1; transform: none; transition-delay: 0.06s; }

/* Menüpunkte: mittig, groß, gestaffelt eingeblendet.
   Schrift und Abstände skalieren mit der Bildschirmhöhe, damit auch acht
   Punkte auf einem kleinen Telefon ohne Scrollen passen. */
.mm-links {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(0.05rem, 0.8vh, 0.45rem);
  width: 100%; max-width: 26rem;
}
.mm-links a {
  display: block; width: 100%;
  color: rgba(255,255,255,0.9); text-decoration: none;
  font-size: clamp(1.3rem, 3.9vh, 1.95rem);
  font-weight: 800; letter-spacing: -0.015em; line-height: 1.2;
  padding: clamp(0.32rem, 1.2vh, 0.62rem) 0;
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.42s var(--weich), transform 0.42s var(--weich), color 0.2s;
}
body.menu-open .mm-links a { opacity: 1; transform: none; }
.mm-links a:active, .mm-links a.aktiv { color: var(--orange); }

/* Staffelung nur beim Öffnen. Beim Schließen fällt der body-Zustand weg,
   damit auch die Verzögerungen – alles geht gemeinsam und zügig raus. */
body.menu-open .mm-links a:nth-child(1) { transition-delay: 0.12s; }
body.menu-open .mm-links a:nth-child(2) { transition-delay: 0.17s; }
body.menu-open .mm-links a:nth-child(3) { transition-delay: 0.22s; }
body.menu-open .mm-links a:nth-child(4) { transition-delay: 0.27s; }
body.menu-open .mm-links a:nth-child(5) { transition-delay: 0.32s; }
body.menu-open .mm-links a:nth-child(6) { transition-delay: 0.37s; }
body.menu-open .mm-links a:nth-child(7) { transition-delay: 0.42s; }
body.menu-open .mm-links a:nth-child(n+8) { transition-delay: 0.47s; }

/* Kontaktzeile unten */
.mm-fuss {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.75rem; width: 100%; max-width: 22rem;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.42s var(--weich), transform 0.42s var(--weich);
}
body.menu-open .mm-fuss { opacity: 1; transform: none; transition-delay: 0.44s; }
.mm-fuss .mm-tel {
  font-size: 1rem; font-weight: 500;
  color: rgba(255,255,255,0.65); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.mm-fuss .mm-tel i { color: var(--orange); font-size: 1.15rem; }
.mm-fuss .nav-cta {
  width: 100%; justify-content: center;
  font-size: 1.05rem; padding: clamp(0.75rem, 2vh, 1rem) 1.6rem;
}

/* ══════════════════════════════
   HERO
   Läuft bis hinter die schwebende Navigation. Das Hintergrundbild
   setzt das Elementor-Widget über die Variable --hero-bild.
══════════════════════════════ */
.hero {
  margin-top: calc(-1 * var(--nav-platz));
  padding-block: calc(var(--nav-platz) + clamp(3.5rem, 8vh, 6rem)) clamp(5rem, 12vh, 8rem);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  --hero-bild: none;
  background:
    linear-gradient(180deg, rgba(13,26,37,0.93) 0%, rgba(13,26,37,0.86) 45%, rgba(16,32,46,0.76) 100%),
    var(--hero-bild) center 62% / cover no-repeat,
    var(--navy);
}
/* Volle Bildschirmhöhe ist der Standard und hängt direkt an .hero, damit sie
   auch bei zwischengespeichertem Elementor-Markup greift. Der Hero zieht sich
   um die Navigationshöhe nach oben, deshalb ist seine Höhe genau ein
   Bildschirm minus Adminleiste. Beide Werte misst theme.js, weil die
   Navigation je nach Logo und Breakpoint unterschiedlich hoch ausfällt.
   Der Schalter im Widget setzt bei Bedarf die Klasse „kompakt". */
.hero { min-height: calc(var(--schirm) - var(--leiste)); }
.hero.kompakt { min-height: 0; }
.hero .inhalt {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.hero h1 {
  font-size: clamp(3rem, 6.5vw, 5rem);
  font-weight: 900; line-height: 1.03;
  color: #fff;
  margin-bottom: 1.6rem;
  max-width: 18ch;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(13,26,37,0.4);
}
.hero h1 em { font-style: normal; color: var(--orange); }
.hero-sub {
  font-size: 1.22rem; line-height: 1.7;
  color: rgba(255,255,255,0.88); max-width: 78ch;
  margin-bottom: 2.6rem;
}
/* Absätze aus dem Elementor-Textfeld innerhalb des Untertitels */
.hero-sub p { color: inherit; margin-bottom: 1em; }
.hero-sub p:last-child { margin-bottom: 0; }
.hero-sub strong { color: #fff; }
.hero-knoepfe {
  display: flex; align-items: center; justify-content: center;
  gap: 0.9rem; flex-wrap: wrap; margin-bottom: 2.8rem;
}

.hero-merkmale {
  display: flex; justify-content: center;
  gap: 0.6rem 2rem; flex-wrap: wrap;
}
.hero-merkmale li {
  list-style: none;
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 1.02rem; color: rgba(255,255,255,0.92); font-weight: 600;
}
.hero-merkmale i {
  color: var(--orange); font-size: 1.05rem; flex-shrink: 0;
  background: rgba(255,255,255,0.14); border-radius: 50%;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ══════════════════════════════
   ABSCHNITTE, gemeinsamer Rhythmus
══════════════════════════════ */
section { padding-block: clamp(4rem, 9vh, 6.5rem); }
.abschnitt-kopf { margin-bottom: clamp(2.4rem, 5vh, 3.5rem); }

/* ── Service: Icon-Karten ── */
.service { background: var(--weiss); border-radius: var(--r-l) var(--r-l) 0 0; }
/* Sechs Spalten, jede Karte belegt zwei – ergibt drei gleich breite Karten
   je Reihe, erlaubt aber, unvollständige letzte Reihen zu zentrieren. */
.service-gitter {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.2rem;
}
.dienst { grid-column: span 2; }
/* Letzte Reihe mit zwei Karten (z. B. 5 Stück): beide mittig */
.service-gitter .dienst:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
/* Letzte Reihe mit einer Karte: mittig */
.service-gitter .dienst:nth-child(3n+1):last-child { grid-column: 3 / span 2; }
.dienst {
  background: var(--sand);
  border: 1px solid var(--linie);
  border-radius: var(--r-m);
  padding: 1.9rem 1.7rem;
  transition: transform 0.25s var(--weich), box-shadow 0.25s, border-color 0.25s;
}
.dienst:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten-m);
  border-color: rgba(240,126,34,0.4);
}
/* Hervorgehobene Karte: gleiche Färbung wie die Hinweisleiste darunter */
.dienst.hervorgehoben {
  background: var(--orange-hauch);
  border-color: rgba(240,126,34,0.28);
}
.dienst.hervorgehoben .dienst-ico { background: var(--weiss); }
.dienst-ico {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--orange-hauch); color: var(--orange-text);
  border-radius: 16px;
  font-size: 1.6rem; margin-bottom: 1.15rem;
}
.dienst h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.55rem; line-height: 1.3; }
.dienst p { font-size: 1.01rem; color: var(--tinte-sanft); line-height: 1.62; }

.service-notiz {
  margin-top: 2.2rem;
  background: var(--orange-hauch);
  border: 1px solid rgba(240,126,34,0.28);
  border-radius: var(--r-m);
  padding: 1.3rem 1.7rem;
  display: flex; align-items: center; gap: 1rem;
}
.service-notiz i { font-size: 1.4rem; color: var(--orange-text); flex-shrink: 0; }
.service-notiz p { font-size: 1.05rem; line-height: 1.6; color: var(--tinte); }
.service-notiz strong { color: var(--navy); }

/* ── Leistungen: Objektarten ── */
.leistungen { background: var(--weiss); }
.leistungen-kopf {
  display: flex; justify-content: space-between; align-items: center;
  gap: 2rem; margin-bottom: clamp(2.4rem, 5vh, 3.5rem);
}
.leistungen-kopf .knopf { flex-shrink: 0; }
.leistungen-kopf .lauftext { margin-top: 0.9rem; }
.karten { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.2rem; }
.karte { grid-column: span 2; }
/* Breite Karten: zwei je Reihe (halbe Breite) */
.karten .karte.breit { grid-column: span 3; }
/* Zentrierte Restreihen nur, wenn keine breiten Karten das Raster verschieben */
.karten:not(:has(.karte.breit)) .karte:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
.karten:not(:has(.karte.breit)) .karte:nth-child(3n+1):last-child { grid-column: 3 / span 2; }
.karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--r-m);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.25s var(--weich), box-shadow 0.25s;
}
.karte:hover { transform: translateY(-4px); box-shadow: var(--schatten-m); }
.karte-ico {
  width: 52px; height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--orange-hauch); color: var(--orange-text);
  border-radius: 16px;
  font-size: 1.6rem; margin-bottom: 1.15rem;
}
.karte-koerper { padding: 1.7rem 1.7rem 1.8rem; display: flex; flex-direction: column; flex: 1; }
.karte-koerper h3 { font-size: 1.24rem; font-weight: 700; margin-bottom: 0.6rem; line-height: 1.28; }
.karte-koerper p { font-size: 1.02rem; color: var(--tinte-sanft); line-height: 1.65; flex: 1; }

/* ── Ablauf ── */
.ablauf { background: var(--sand-tief); }
.schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.schritt {
  background: var(--weiss);
  border-radius: var(--r-m);
  padding: 2.3rem 2rem;
  box-shadow: var(--schatten-s);
  position: relative;
}
.schritt-nr {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--orange-text);
  background: var(--orange-hauch);
  border-radius: var(--pille); padding: 0.35rem 0.95rem;
  margin-bottom: 1.4rem;
}
.schritt h3 { font-size: 1.24rem; font-weight: 700; margin-bottom: 0.65rem; line-height: 1.32; }
.schritt p { font-size: 1.02rem; color: var(--tinte-sanft); line-height: 1.65; }

/* ── Ueber uns: dunkles Ankerpanel ── */
.warum { background: var(--sand); }
.warum-panel {
  background:
    radial-gradient(100% 120% at 0% 100%, rgba(240,126,34,0.10) 0%, transparent 50%),
    var(--navy);
  border-radius: var(--r-l);
  padding: clamp(2.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  box-shadow: var(--schatten-g);
  position: relative; overflow: hidden;
}
.warum-wz {
  position: absolute; left: -120px; bottom: -140px;
  width: 500px; height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.06; pointer-events: none;
}
.warum-intro { position: relative; }
.warum-intro .lauftext { margin-top: 1rem; }
.gruende { display: flex; flex-direction: column; position: relative; }
.grund {
  display: flex; gap: 1.1rem; align-items: flex-start;
  padding: 1.3rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.grund:first-child { padding-top: 0; }
.grund:last-child { border-bottom: none; padding-bottom: 0; }
.grund-ico {
  width: 42px; height: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(240,126,34,0.16); color: var(--orange);
  font-size: 1.15rem; border-radius: 14px;
}
.grund h4 { font-size: 1.14rem; font-weight: 700; color: #fff; margin-bottom: 0.35rem; }
.grund p { font-size: 1rem; color: rgba(255,255,255,0.72); line-height: 1.6; }

/* ── FAQ ── */
.faq { background: var(--sand); }
.faq-gitter {
  display: grid; grid-template-columns: 1fr 1.6fr;
  gap: clamp(2.5rem, 5vw, 5rem); align-items: start;
}
.faq-kopf .lauftext { margin-top: 0.9rem; max-width: 36ch; }
.faq-kopf .knopf { margin-top: 1.8rem; }
.faq-liste { display: flex; flex-direction: column; gap: 0.8rem; }
.faq-item {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--r-m);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.faq-item.offen { border-color: rgba(240,126,34,0.45); box-shadow: var(--schatten-s); }
.faq-frage {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; text-align: left; gap: 1rem;
  background: none; border: none; font-family: inherit;
  -webkit-appearance: none; appearance: none;
  padding: 1.25rem 1.5rem; cursor: pointer;
  font-size: 1.12rem; font-weight: 700; color: var(--navy);
  user-select: none;
}
.faq-frage i {
  font-size: 1.1rem; color: var(--orange-text); flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--orange-hauch);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.3s;
}
.faq-item.offen .faq-frage i { transform: rotate(45deg); }
.faq-antwort {
  font-size: 1.04rem; color: var(--tinte-sanft); line-height: 1.7;
  max-height: 0; overflow: hidden; visibility: hidden;
  padding-inline: 1.5rem;
  transition: max-height 0.4s ease, padding-bottom 0.3s, visibility 0.4s;
}
.faq-item.offen .faq-antwort { max-height: 40rem; padding-bottom: 1.4rem; visibility: visible; }

/* ── Kontakt: dunkles Panel mit heller Formularkarte ── */
.kontakt { background: var(--sand); padding-bottom: clamp(4rem, 9vh, 6.5rem); }
.kontakt-panel {
  background:
    radial-gradient(110% 100% at 100% 0%, rgba(240,126,34,0.12) 0%, transparent 55%),
    var(--navy);
  border-radius: var(--r-l);
  padding: clamp(2.5rem, 5vw, 4rem);
  display: flex; flex-direction: column;
  gap: clamp(1.8rem, 3.5vw, 2.6rem);
  box-shadow: var(--schatten-g);
  position: relative; overflow: hidden;
}
.kontakt-l { position: relative; z-index: 1; max-width: 68ch; }
.kontakt-l .lauftext { margin-top: 1rem; }
.k-punkte {
  display: flex; flex-wrap: wrap; gap: 0.55rem;
  position: relative; z-index: 1;
}
.k-punkt {
  display: inline-flex; align-items: center; gap: 0.5rem;
  text-decoration: none; color: rgba(255,255,255,0.85);
  font-size: 0.92rem; font-weight: 600;
  padding: 0.5rem 1rem;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--pille);
  transition: color 0.2s, background 0.2s;
}
a.k-punkt:hover { color: #fff; background: rgba(255,255,255,0.12); }
.k-punkt i { font-size: 1.05rem; color: var(--orange); flex-shrink: 0; }

.formkarte {
  position: relative; z-index: 1;
  width: 100%;
  border-radius: var(--r-m);
  padding: clamp(2rem, 4vw, 2.8rem);
  border: 2px solid transparent;
  background:
    linear-gradient(var(--weiss), var(--weiss)) padding-box,
    linear-gradient(135deg, var(--orange) 0%, rgba(240,126,34,0.25) 40%, rgba(255,255,255,0.25) 100%) border-box;
  box-shadow: 0 22px 64px rgba(240,126,34,0.22), var(--schatten-m);
}
/* Formular nutzt die volle Kartenbreite */
.formkarte form, .formkarte .wz-fortschritt, .formkarte > p { width: 100%; }
.form-badge {
  position: absolute; top: -0.95rem; left: clamp(1.5rem, 4vw, 2.8rem);
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--orange); color: var(--navy-tief);
  font-size: 0.85rem; font-weight: 700;
  padding: 0.42rem 1rem; border-radius: var(--pille);
  box-shadow: var(--schatten-s);
}
.form-badge i { font-size: 1rem; }
.formkarte h3 { font-size: 1.55rem; font-weight: 800; margin-bottom: 0.5rem; }
.formkarte h3::after {
  content: ''; display: block;
  width: 44px; height: 4px; border-radius: 2px;
  background: var(--orange); margin-top: 0.55rem;
}
.formkarte > p { font-size: 0.98rem; color: var(--tinte-sanft); margin-bottom: 1.4rem; line-height: 1.55; }
.form-zeile { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.95rem; }
.form-zeile > * { flex: 1 1 160px; }
.formkarte label {
  display: block; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tinte-sanft); margin-bottom: 0.4rem;
}
.formkarte label abbr { color: var(--orange-text); text-decoration: none; }
.form-frei { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--tinte-sanft); }
.formkarte input, .formkarte textarea, .formkarte select {
  width: 100%; font-family: var(--schrift); font-size: 1rem;
  color: var(--tinte); background: var(--sand);
  border: 1px solid var(--linie); border-radius: var(--r-s);
  padding: 0.75rem 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.formkarte input::placeholder, .formkarte textarea::placeholder { color: #9aa5af; }
.formkarte input:focus, .formkarte textarea:focus, .formkarte select:focus {
  outline: none; border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(240,126,34,0.2);
}
.formkarte textarea { resize: vertical; min-height: 72px; }
.form-senden {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  width: 100%;
  background: var(--orange); color: var(--navy-tief); cursor: pointer;
  font-family: var(--schrift); font-size: 1.05rem; font-weight: 700;
  padding: 0.9rem 1.8rem; border: none; border-radius: var(--pille);
  transition: background 0.2s, transform 0.15s, opacity 0.2s;
}
.form-senden:hover { background: var(--orange-tief); transform: translateY(-1px); }
.form-senden[disabled] { opacity: 0.6; cursor: wait; transform: none; }
.form-hinweis { font-size: 0.82rem; color: var(--tinte-sanft); margin-top: 0.9rem; line-height: 1.55; }
.form-hinweis a { color: var(--navy); }
.form-hp {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.form-datenschutz {
  display: flex; align-items: flex-start; gap: 0.7rem;
  margin-bottom: 1.1rem;
}
.form-datenschutz input {
  width: 1.15rem; height: 1.15rem; flex-shrink: 0;
  margin-top: 0.2rem; cursor: pointer;
  accent-color: var(--orange);
}
.form-datenschutz label {
  font-size: 0.92rem; font-weight: 400;
  text-transform: none; letter-spacing: 0;
  color: var(--tinte-sanft); line-height: 1.55;
  margin-bottom: 0; cursor: pointer;
}
.form-datenschutz a { color: var(--navy); font-weight: 600; }
.form-datenschutz abbr { color: var(--orange-text); text-decoration: none; }
.form-fehler {
  background: #fdecea;
  border: 1px solid #e5a099;
  color: #8c2f24; font-size: 0.95rem; font-weight: 600;
  border-radius: var(--r-s);
  padding: 0.75rem 1rem; margin-bottom: 1rem;
}
.form-ok {
  display: flex; align-items: flex-start; gap: 0.9rem;
  background: #eef7ee;
  border: 1px solid #b7dcb7;
  color: #235c26; font-size: 1.02rem; line-height: 1.6;
  border-radius: var(--r-s);
  padding: 1.1rem 1.3rem;
}
.form-ok i { font-size: 1.5rem; flex-shrink: 0; color: #2e7d32; }
.form-ok strong { display: block; margin-bottom: 0.2rem; }

/* ── Anfrage-Wizard ──
   Vier Schritte, Felder passen sich der Objektart an.
   Ohne JavaScript stehen alle Schritte untereinander. */
.formkarte fieldset { border: none; margin: 0 0 1.4rem; padding: 0; min-width: 0; }
.formkarte legend {
  font-size: 1.08rem; font-weight: 800; color: var(--navy);
  margin-bottom: 1rem; padding: 0;
}
.wz-label {
  display: block; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tinte-sanft); margin-bottom: 0.4rem;
}
.wahl { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1.5px solid var(--linie); border-radius: var(--pille);
  background: var(--sand);
  padding: 0.6rem 1.1rem; cursor: pointer;
  font-size: 0.95rem; font-weight: 600; color: var(--tinte);
  text-transform: none; letter-spacing: 0; margin-bottom: 0;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.wahl label i { color: var(--orange-text); font-size: 1.1rem; }
.wahl input:checked + label {
  background: var(--orange-hauch);
  border-color: var(--orange);
  color: var(--orange-text);
}
.wahl input:focus-visible + label { box-shadow: var(--fokus); }
.wz-fortschritt {
  display: none; align-items: center; justify-content: space-between;
  margin-bottom: 1.1rem;
}
.wz-zaehler { font-size: 0.82rem; font-weight: 700; color: var(--tinte-sanft); letter-spacing: 0.04em; }
.wz-punkte { display: flex; gap: 0.35rem; }
.wz-punkte i { width: 8px; height: 8px; border-radius: 50%; background: rgba(23,42,58,0.15); }
.wz-punkte i.an { background: var(--orange); }
.wz-hinweis { font-size: 0.9rem; font-weight: 600; color: #8c2f24; margin-top: 0.8rem; }
.wz-nav { display: none; gap: 0.7rem; justify-content: space-between; margin-top: 0.2rem; }
.wz-nav .knopf { font-size: 0.95rem; padding: 0.7rem 1.5rem; }
body.js .wz-fortschritt { display: flex; }
body.js .wz-nav { display: flex; }
body.js .wz-schritt { display: none; }
body.js .wz-schritt.aktiv { display: block; }

/* ── Footer: schlank, nur Logo, Kontakt und Rechtliches ── */
footer {
  background: var(--navy-tief);
  border-radius: var(--r-l) var(--r-l) 0 0;
  padding: 2.4rem 0 1.6rem;
}
.fuss-oben {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1.5rem 3rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 1.4rem;
}
.fuss-marke img { max-width: 180px; max-height: 52px; width: auto; height: auto; display: block; object-fit: contain; }
.fuss-kontakt {
  display: grid; grid-template-columns: repeat(2, auto);
  column-gap: 3rem; row-gap: 0.7rem;
}
.fuss-kontakt a, .fuss-kontakt span {
  display: flex; align-items: flex-start; gap: 0.55rem;
  font-size: 0.95rem; color: rgba(255,255,255,0.72);
  text-decoration: none; line-height: 1.5;
  transition: color 0.2s;
}
.fuss-kontakt a:hover { color: var(--orange); }
.fuss-kontakt i { color: var(--orange); font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
.fuss-unten {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; font-size: 0.82rem; color: rgba(255,255,255,0.6);
}
.fuss-unten a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.fuss-unten a:hover { color: #fff; }
.fuss-links { display: flex; gap: 1.5rem; }

/* ── Mobile Aktionsleiste ── */
.mobil-cta {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
  padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(250,247,242,0.96);
  border-top: 1px solid var(--linie);
  backdrop-filter: blur(10px);
  transform: translateY(120%);
  transition: transform 0.3s var(--weich);
}
.mobil-cta.sichtbar { transform: none; }
.mobil-cta a {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 52px; width: 100%;
  background: var(--orange); color: var(--navy-tief);
  font-size: 1.05rem; font-weight: 700; text-decoration: none;
  border-radius: var(--pille);
  box-shadow: var(--schatten-s);
}
.mobil-cta a i { font-size: 1.25rem; }
body.menu-open .mobil-cta { transform: translateY(120%); }

/* ── Seiten-Kopf: kompakter dunkler Kopf für Unterseiten ── */
.seiten-kopf {
  margin-top: calc(-1 * var(--nav-platz));
  padding-block: calc(var(--nav-platz) + clamp(2.5rem, 6vh, 4rem)) clamp(2.8rem, 7vh, 4.2rem);
  text-align: center;
  background:
    radial-gradient(110% 100% at 100% 0%, rgba(240,126,34,0.10) 0%, transparent 55%),
    var(--navy);
}
/* Beginnt eine Elementor-Seite mit Hero oder Seiten-Kopf, neutralisiert der
   Container sein Padding und seine Lücken oben – sonst bleibt ein heller
   Streifen zwischen Navigation und dunklem Kopf stehen, falls die
   Containerwerte nicht auf 0 gesetzt wurden, und der Hero rutscht um genau
   diesen Streifen über den unteren Bildschirmrand hinaus.
   Innencontainer mit erfasst: Elementor legt das Padding je nach
   Breitenmodus auf .e-con oder auf .e-con-inner ab. */
main .elementor > .e-con:first-child:has(.hero, .seiten-kopf),
main .elementor > .e-con:first-child:has(.hero, .seiten-kopf) > .e-con-inner {
  padding-top: 0 !important;
  row-gap: 0 !important;
}
.seiten-kopf .titel {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 900; line-height: 1.08;
  text-wrap: balance;
}
.seiten-kopf .lauftext { max-width: 68ch; margin: 0.9rem auto 0; }

/* ── Stellenanzeigen: Akkordeonliste ── */
.stellen { background: var(--weiss); border-radius: var(--r-l) var(--r-l) 0 0; }
.stellen-liste {
  display: flex; flex-direction: column; gap: 0.8rem;
  max-width: 900px; margin-inline: auto;
}
.stelle-item {
  background: var(--sand);
  border: 1px solid var(--linie);
  border-radius: var(--r-m);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.stelle-item.offen { border-color: rgba(240,126,34,0.45); box-shadow: var(--schatten-s); }
.stelle-kopf {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; text-align: left; gap: 1rem;
  background: none; border: none; font-family: inherit;
  -webkit-appearance: none; appearance: none;
  padding: 1.2rem 1.5rem; cursor: pointer;
  user-select: none;
}
.stelle-kopf-l { display: flex; flex-direction: column; gap: 0.5rem; }
.stelle-titel { font-size: 1.18rem; font-weight: 700; color: var(--navy); line-height: 1.3; }
.stelle-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.stelle-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.82rem; font-weight: 600; color: var(--tinte-sanft);
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--pille); padding: 0.28rem 0.75rem;
}
.stelle-chip i { color: var(--orange-text); font-size: 0.95rem; }
.stelle-kopf > i {
  font-size: 1.1rem; color: var(--orange-text); flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--orange-hauch);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.3s;
}
.stelle-item.offen .stelle-kopf > i { transform: rotate(45deg); }
.stelle-inhalt {
  max-height: 0; overflow: hidden; visibility: hidden;
  padding-inline: 1.5rem;
  transition: max-height 0.45s ease, padding-bottom 0.3s, visibility 0.45s;
}
.stelle-item.offen .stelle-inhalt { max-height: 120rem; padding-bottom: 1.5rem; visibility: visible; }
.stelle-text { font-size: 1.02rem; color: var(--tinte-sanft); line-height: 1.7; }
.stelle-text p, .stelle-text ul, .stelle-text ol { margin-bottom: 0.9em; }
.stelle-text ul, .stelle-text ol { padding-left: 1.3em; }
.stelle-text h3, .stelle-text h4 { margin: 1.2em 0 0.4em; font-size: 1.05rem; }
.stelle-text strong { color: var(--navy); }
.stelle-inhalt .knopf { margin-top: 0.4rem; }
.stellen-leer {
  max-width: 900px; margin-inline: auto;
  background: var(--orange-hauch);
  border: 1px solid rgba(240,126,34,0.28);
  border-radius: var(--r-m);
  padding: 1.3rem 1.7rem;
  display: flex; align-items: center; gap: 1rem;
}
.stellen-leer i { font-size: 1.4rem; color: var(--orange-text); flex-shrink: 0; }
.stellen-leer p { font-size: 1.05rem; line-height: 1.6; color: var(--tinte); }

/* ── Bewerbungsformular: Datei-Upload ── */
.bewerbung { background: var(--sand); }
.formkarte input[type="file"] { padding: 0.55rem 0.6rem; cursor: pointer; }
.formkarte input[type="file"]::file-selector-button {
  font-family: var(--schrift); font-size: 0.9rem; font-weight: 700;
  color: var(--navy); background: rgba(23,42,58,0.07);
  border: none; border-radius: var(--pille);
  padding: 0.5rem 1.1rem; margin-right: 0.8rem; cursor: pointer;
  transition: background 0.2s;
}
.formkarte input[type="file"]::file-selector-button:hover { background: rgba(23,42,58,0.13); }

/* ── Standardseiten ohne Elementor (Impressum, Datenschutz, 404) ── */
.seite-standard { padding-block: clamp(3rem, 7vh, 5rem); }
.seite-standard .titel { margin-bottom: 1.4rem; }
.seite-text { max-width: 72ch; }
.seite-text.breit { max-width: none; }
.seite-text h2, .seite-text h3, .seite-text h4 { margin: 1.8em 0 0.5em; }
.seite-text p, .seite-text ul, .seite-text ol { margin-bottom: 1em; }
.seite-text ul, .seite-text ol { padding-left: 1.3em; }
.seite-text a { color: var(--orange-text); }
.seite-text strong { color: var(--navy); }

/* ── Sanfte Einblendungen beim Scrollen ──
   Die Klasse anim-an setzt das Skript nur, wenn IntersectionObserver
   vorhanden ist und das System keine reduzierte Bewegung wuenscht. */
body.anim-an [data-anim] { opacity: 0; transform: translateY(22px); }
body.anim-an [data-anim].anim-da {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--weich), transform 0.6s var(--weich);
}
@media print {
  body.anim-an [data-anim] { opacity: 1; transform: none; }
}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    /* Ohne das Zurücksetzen der Verzögerungen tröpfelten die Menüpunkte
       trotz sofortiger Übergänge weiterhin nacheinander herein. */
    animation-delay: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* Umschaltung auf das Burger-Menü.
   Bewusst bei 1200px und nicht erst bei 1024px: Logo, fünf bis sechs Punkte,
   Telefonnummer und Button brauchen zusammen rund 1150px. Darunter brach der
   Inhalt der Navigation in mehrere Zeilen um – die Pille wurde dann statt
   102px ganze 185px hoch, und der Hero zog sich um genau diesen Betrag
   zu weit nach oben. */
@media (max-width: 1200px) {
  .nav-links, .nav-r .nav-tel, .nav-r .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .navhuelle { padding-inline: 0.9rem; }
  #nav { padding: 0.7rem 0.8rem 0.7rem 1.3rem; }
}

@media (max-width: 1024px) {
  .service-gitter { grid-template-columns: 1fr 1fr; }
  .service-gitter .dienst,
  .service-gitter .dienst:nth-child(3n+1):nth-last-child(2),
  .service-gitter .dienst:nth-child(3n+1):last-child { grid-column: auto; }
  .leistungen-kopf { flex-direction: column; align-items: flex-start; }
  .karten { grid-template-columns: 1fr; }
  .karten .karte,
  .karten .karte.breit,
  .karten:not(:has(.karte.breit)) .karte:nth-child(3n+1):nth-last-child(2),
  .karten:not(:has(.karte.breit)) .karte:nth-child(3n+1):last-child { grid-column: auto; }
  .schritte { grid-template-columns: 1fr; }
  .warum-panel { grid-template-columns: 1fr; }
  .faq-gitter { grid-template-columns: 1fr; }
  .fuss-kontakt { grid-template-columns: 1fr; }
  .fuss-unten {
    flex-direction: column; align-items: center;
    text-align: center; justify-content: center;
  }
  .fuss-links { justify-content: center; }
  .mobil-cta { display: block; }
  body { padding-bottom: 76px; }
}

@media (max-width: 640px) {
  .service-gitter { grid-template-columns: 1fr; }
  .service-gitter .dienst,
  .service-gitter .dienst:nth-child(3n+1):nth-last-child(2),
  .service-gitter .dienst:nth-child(3n+1):last-child { grid-column: auto; }
  .schritt { padding: 1.8rem 1.5rem; }
  .formkarte { padding: 1.7rem 1.4rem; }

  /* Hero auf dem Telefon: Die Mindesthöhe ist ein Bildschirm, der Inhalt
     darf sie aber nicht sprengen – sonst steht die Häkchenzeile unter der
     Kante und der Kopfbereich wirkt abgeschnitten statt bildschirmfüllend.
     Deshalb hier engere Abstände und eine kleinere Grundschrift. */
  .hero { padding-block: calc(var(--nav-platz) + 1.4rem) 1.8rem; }
  .hero h1 {
    font-size: clamp(2.1rem, 8.5vw, 2.6rem);
    line-height: 1.06;
    margin-bottom: 0.9rem;
    max-width: 100%;
  }
  .hero-sub {
    font-size: 1.02rem; line-height: 1.55;
    margin-bottom: 1.5rem;
  }
  .hero-knoepfe { gap: 0.6rem; margin-bottom: 1.5rem; }
  .hero-knoepfe .knopf { padding: 0.72rem 1.4rem; }
  .hero-merkmale { gap: 0.45rem 1.2rem; }
  .hero-merkmale li { font-size: 0.95rem; }
}

/* Quer gehaltenes Telefon: Hier ist die Höhe der Engpass, nicht die Breite.
   Ohne diese Ausnahme passt der Hero-Inhalt auf keinen Fall auf einen
   Bildschirm, weil oben und unten allein die Polsterung alles auffrisst. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding-block: calc(var(--nav-platz) + 0.6rem) 1rem; }
  .hero h1 { font-size: clamp(1.8rem, 4.5vh, 2.4rem); margin-bottom: 0.5rem; }
  .hero-sub { font-size: 0.95rem; line-height: 1.45; margin-bottom: 0.8rem; }
  .hero-knoepfe { gap: 0.5rem; margin-bottom: 0.8rem; }
  .hero-knoepfe .knopf { padding: 0.6rem 1.3rem; font-size: 0.95rem; }
  .hero-merkmale { gap: 0.3rem 1.1rem; }
  .hero-merkmale li { font-size: 0.88rem; gap: 0.4rem; }
  .hero-merkmale i { width: 22px; height: 22px; font-size: 0.9rem; }

  /* Auch das Menü muss hier ohne Scrollen auskommen: Logo, sechs Punkte und
     die Kontaktzeile brauchen zusammen mehr als die 393px eines quer
     gehaltenen Telefons. */
  .mobile-menu { padding-block: 0.8rem calc(0.8rem + env(safe-area-inset-bottom)); }
  .mm-marke img { max-height: 38px; }
  .mm-links { gap: 0.05rem; }
  .mm-links a { font-size: 1.15rem; padding: 0.22rem 0; }
  .mm-fuss { gap: 0.5rem; }
  .mm-fuss .mm-tel { font-size: 0.92rem; }
  .mm-fuss .nav-cta { font-size: 1rem; padding: 0.6rem 1.4rem; }
  .mm-schliessen { width: 40px; height: 40px; font-size: 1.3rem; }
}