/* ==========================================================================
   Bildeinrahmer Rache — Stylesheet
   1:1-Nachbau der Elementor-Optik. Alle Werte stammen aus dem Original-Kit
   (post-4.css, post-46.css, post-39.css, post-129.css, post-134.css),
   dokumentiert in docs/original-struktur.md.
   ========================================================================== */

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

:root {
  --farbe-primary: #141414;
  --farbe-secondary: #000000;
  --farbe-text: #000000;
  --farbe-accent: #cf945f;
  --farbe-weiss: #ffffff;
  --farbe-grau: #757575;
  --farbe-hell: #f3f2ef;

  --farbe-header-bg: #ffffff;
  --farbe-header-hover: #9e9e9e;
  --farbe-footer-bg: #f2f2f2;
  --farbe-footer-text: #54595f;
  --farbe-footer-trenner: #9b9b9b;
  /* War #00ce1b, ein grelles Gruen aus dem alten Theme. Nick am 08.09.2026:
     "warum ist das so nen gruen". Ersetzt durch den Akzent der Seite.
     BEWUSSTE ABWEICHUNG, steht in docs/ist-analyse.md. */
  --farbe-footer-hover: #cf945f;
  --farbe-linie: #e0e0e0;
  --farbe-linie-hell: #e7e7e7;

  --schrift-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --schrift-secondary: 'Overpass', Georgia, serif;
  --schrift-nav: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

  --seitenrand: 4%;
  --hoehe-header: 125px;
}

/* --- Reset -------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hoehe-header) + 20px);
  /* Uebergabe 4.3, horizontales Wegschieben auf iPhone und iPad.
     Nick am 08.09.2026: "wenn man einmal durch ist mit der Seite, dann hat man
     das Problem nicht mehr". Das ist der Beleg: Ursache sind die noch nicht
     gefeuerten Scroll-Animationen. .anim--rechts steht auf
     translateX(60px) und ragt bis zum Ausloesen ueber den rechten Rand.
     overflow-x: hidden am body reicht auf iOS Safari nicht, wenn der Ueberlauf
     von einem transform an einem Nachfahren kommt. clip am html schon.
     NICHT auf dem echten Geraet gegengeprueft, headless nicht reproduzierbar. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--schrift-primary);
  font-size: 14px;
  font-weight: 300;
  line-height: 23px;
  color: var(--farbe-text);
  background: var(--farbe-weiss);
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--farbe-accent);
  outline-offset: 3px;
}

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

.skip-link {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--farbe-primary);
  color: var(--farbe-weiss);
  transition: top 0.2s;
}

.skip-link:focus {
  top: 12px;
}

/* --- Typografie --------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--farbe-primary);
}

/* Kit-Preset "primary": Poppins 300, uppercase, 1em */
h1 {
  font-family: var(--schrift-primary);
  font-size: 92px;
  font-weight: 300;
  line-height: 1em;
  letter-spacing: 0;
  text-transform: uppercase;
}

h2 {
  font-family: var(--schrift-primary);
  font-size: 46px;
  font-weight: 300;
  line-height: 1em;
  letter-spacing: 0;
  text-transform: uppercase;
}

/*
 * Auf der Original-Startseite kommt die Groesse 46px NICHT vor. Die
 * Sektionsueberschriften sind entweder Kit-primary (105px, "Unsere
 * Leistungen", "Kein Bild ist zu gross") oder Kit-secondary (38px,
 * "Verschaffen Sie sich einen Ueberblick"). Nachgemessen bei 1440x900.
 * Die 46px auf h2 bleiben als Fallback fuer die Unterseiten stehen,
 * die noch nicht gegengemessen sind.
 */
.titel--xl {
  font-size: 105px;
}

.titel--m {
  font-family: var(--schrift-secondary);
  font-size: 38px;
  font-weight: 300;
  line-height: 1.4em;
  letter-spacing: -2px;
  text-transform: none;
}

/* Kit-Preset "secondary": Overpass 300, 38px, -2px, 1.4em */
h3 {
  font-family: var(--schrift-secondary);
  font-size: 38px;
  font-weight: 300;
  line-height: 1.4em;
  letter-spacing: -2px;
}

h4 {
  font-family: var(--schrift-secondary);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.3em;
  letter-spacing: -0.5px;
  text-transform: capitalize;
}

p {
  margin: 0 0 1em;
}

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

/* --- Bausteine ---------------------------------------------------------- */

/* Das Original arbeitet nicht mit einem zentrierten Kasten, sondern mit
   voller Breite und 4 Prozent Seitenrand. */
/*
 * Der Inhalt ist bei 1637px gedeckelt, wie im Original. Am 08.09.2026
 * gemessen, nachdem der neue Breakpoint "breit" (1920px) 29 Abweichungen
 * gemeldet hat statt der 12 bei 1440:
 *
 *   Original 1920px:  Container l=142, Breite 1637   (zentriert, gedeckelt)
 *   Original 1440px:  Container l= 58, Breite 1325   (4 Prozent, nicht gedeckelt)
 *   Build vorher:     bei 1920 volle 1766 Breite     (129px zu breit)
 *
 * Die 129px zu viel verteilten sich auf beide Seiten und waren die Ursache
 * fuer die vielen "dl = -65" quer durch den ganzen Bericht.
 *
 * max() loest es ohne Zusatz-Element: unterhalb des Deckels gewinnen die
 * 4 Prozent, oberhalb der zentrierende Rest. Bei 1440 aendert sich dadurch
 * nichts, geprueft.
 *
 * Die 1637 sind kein geratener Wert. Nick hatte sie am Original von Hand
 * ausgemessen, die Messung am 08.09.2026 hat sie bestaetigt.
 */
.container {
  width: 100%;
  padding: 0 max(var(--seitenrand), (100% - 1637px) / 2);
}

/*
 * Vertikale Abstaende.
 *
 * Das Original setzt auf den Sektionen selbst kein Polster, sondern arbeitet
 * mit prozentualen Margins an den Widgets. Prozent heisst: die Abstaende
 * wachsen und schrumpfen mit der Fensterbreite. Deshalb hier ebenfalls
 * Prozent und nicht die 80px, die vorher pauschal auf allen Sektionen lagen
 * und die Seite gegenueber dem Original um rund 1200px gestaucht haben.
 *
 * Die Werte sind aus den gemessenen Sektionshoehen des Originals bei
 * 1440x900 zurueckgerechnet (Prozent von der Viewport-Breite):
 *   Ueber uns      1095px   Build vorher 580px
 *   Leistungen      920px   Build vorher 779px
 *   Was zeichnet    747px   Build vorher 457px
 *   Bewertungen     750px   Build vorher 528px
 *   Karte           857px   Build vorher 1008px
 */
.abschnitt {
  padding: 80px 0;
}

/* Oben und unten getrennt, seit 08.09.2026. Vorher stand hier ein einziger
   Wert fuer beide Seiten, und dadurch war der Abstand zwischen "Willkommen bei
   Bilder.Rahmen.rache" und "Unsere Leistungen" 193px zu gross. Nick hatte ihn
   als "riesig" gemeldet, die Messung gegen den gesicherten Original-Stand hat
   es bestaetigt: Original 705px, Build 898px.
   23.4% von 1440 sind 337px, 10% sind 144px, macht die fehlenden 193px. */
/*
 * SEKTIONSABSTAENDE: Prozent MIT OBERGRENZE, seit 08.09.2026.
 *
 * Vorher standen hier reine Prozentwerte. Am 08.09.2026 gemessen und damit
 * widerlegt: der Abstand im Original ist ab etwa 1440px KONSTANT, er waechst
 * nicht weiter mit. Hero zu "Willkommen bei Bilder.Rahmen.rache" liegt im
 * Original bei 1093px, sowohl bei 1440px als auch bei 1977px Fensterbreite.
 *
 * Der Grund: Elementor rechnet seine Prozent-Margins gegen den Container, und
 * der ist nach oben gedeckelt. Unsere Sektionen rechnen dagegen gegen die
 * volle Fensterbreite, die nie deckelt. Bei 1440px passte das noch (337px),
 * bei Nicks 1977px breitem Fenster waren es 462px. Er hat es im Inspector
 * gesehen und zu Recht reklamiert.
 *
 * min() loest beides: unterhalb der Deckelung bleibt es prozentual und passt
 * sich an, oberhalb steht es fest wie im Original. Die Deckel sind die bei
 * 1440px gemessenen Werte, bei denen der Abgleich aufging.
 *
 * WER HIER MISST, MISST NICHT NUR BEI 1440. Genau das war der Fehler, der
 * diese Runde ausgeloest hat.
 */
.abschnitt--ueberuns {
  padding: min(23.4%, 337px) 0 min(10%, 144px) 0;
}

/* Unten von 10.5% auf 19.8% erhoeht: der Abstand "Unsere Leistungen" zu
   "Was zeichnet uns aus?" war 134px zu KLEIN (Original 1158, Build 1024). */
.abschnitt--leistungen {
  padding: min(10.5%, 151px) 0 min(19.8%, 285px) 0;
}

.abschnitt--merkmale {
  padding: min(15.6%, 225px) 0;
}

.abschnitt--bewertungen {
  padding: 13.3% 0;
}

.abschnitt--karte {
  padding: 0.3% 0;
}

/* Kopfbereich einer Unterseite. Original 385px hoch, Build vorher 325px. */
.abschnitt--seitenkopf {
  padding: 4.03% 0;
}

/* Jede Unterseite hat im Original ihre eigene H1-Groesse, gesetzt als
   Widget-Override. Der Build hatte ueberall die globalen 92px.
   Nachgemessen: Leistungen 144px, Kontakt 115.2px. */
/* Original: l=46 r=1392, also EINE Zeile, die links und rechts aus dem
   Container laeuft. Ohne die negativen Margins bricht sie auf zwei Zeilen. */
.abschnitt--seitenkopf h1 {
  margin: 0 -30px 0 -12px;
  font-size: 144px;
}

/* Der Einleitungssatz der Leistungsseite ist im Original 16px gross und
   steht in EINER Zeile von 353px Breite. 353 ist die Textbreite, nicht die
   Kastenbreite: bei genau 353px Kasten bricht die Zeile knapp um. */
.abschnitt--seitenkopf > .container > p {
  max-width: 420px;
  font-size: 16px;
}

/* Original: H1 endet bei 313, der Absatz beginnt bei 416, macht 103px
   Luft um die Trennlinie. Der Build hatte dort nur 50px. */
.abschnitt--seitenkopf .trenner {
  margin: 50px 0;
}

.abschnitt--kontaktkopf h1 {
  font-size: 115.2px;
}

/* Kontaktseite. Original: Kopfbereich 1087px hoch, danach die Karten-Sektion
   mit 250px Abstand darueber und 730px Hoehe. Build vorher: 650 und 764
   ohne Abstand. */
/* 7.4 Prozent = 107px bei 1440. Sektion damit 1087px hoch wie im Original.
   Vorher 17.95 Prozent, das war auf die alte dreispaltige Kartenreihe
   gerechnet und danach 303px zu viel. */
.abschnitt--kontaktkopf {
  padding: 7.4% 0;
}

/* Die Kartensektion ist im Original 730px hoch und besteht praktisch nur
   aus der Karte (777x730), ohne Polster. Bei uns kommt die
   OpenStreetMap-Quellenangabe darunter, deshalb das Bild etwas flacher. */
/* margin-top war 17.4% (250px bei 1440) und stammte aus der Messung, als die
   drei Kontaktkarten noch UNTEREINANDER standen. Seit sie am 08.09.2026 auf
   Nicks Wunsch nebeneinander stehen, ist der Block rund 350px kuerzer und der
   Abstand stand frei: gemessen 456px Luecke zwischen Karten und Karte.
   Nick: "warum beim Kontakt so ein Riesenabstand bei der Karte".
   Folgeaenderung der Nebeneinander-Entscheidung, steht in ist-analyse.md. */
.abschnitt--kontaktkarte {
  margin-top: 0;
  padding: 0;
}

.abschnitt--kontaktkarte .karte img {
  height: 690px;
  object-fit: cover;
}

/*
 * Kartensektion der Kontaktseite. Am Original gemessen (1440x900):
 *   Karte  l=0    r=777   also randlos bis zum linken Seitenrand
 *   Text   l=880  r=1279  Breite 400
 * Der Build hatte die Karte im Container (58) und den Text 627 breit
 * direkt daneben. Deshalb hier kein Container-Polster und ein eigener
 * Spaltenschnitt.
 */
.abschnitt--kontaktkarte .container {
  padding: 0;
}

.abschnitt--kontaktkarte .duo {
  grid-template-columns: 54% 46%;
  gap: 0;
}

.abschnitt--kontaktkarte .duo__inhalt {
  width: 60.4%;
  margin-left: 15.4%;
}

/* Einleitungstext der Kontaktseite: Original 358px breit, der Build lief
   ueber die volle Containerbreite von 1325px. */
/* Original: l=58 r=412 bei 16px. Der Build hatte 14px. */
.abschnitt--kontaktkopf > .container > p {
  max-width: 370px;
  font-size: 16px;
}

/* Optische Randkorrektur wie bei den anderen grossen Ueberschriften:
   Original l=46, Container beginnt bei 58. */
.abschnitt--kontaktkopf h1 {
  margin-left: -12px;
}

/* Impressum und Datenschutz: Seitenrand 10px statt 4 Prozent, so laeuft der
   Text ueber die volle Breite wie im Original (l=10 w=1420). */
.abschnitt--recht {
  /* Auf das Impressum eingestellt: Original 1160px hoch. */
  padding: 1.8% 0;
}

/* Der Impressum-Titel ist im Original 105px gross (dort als h2 ausgezeichnet).
   Wir behalten das h1 fuer die Dokumentstruktur, gleichen aber die Optik an. */
.abschnitt--recht h1 {
  font-size: 105px;
}

/* Rechtstexte laufen fast randlos, aber ebenfalls GEDECKELT, bei 1555px.
   Am 08.09.2026 gemessen, nachdem der Breakpoint "breit" auf der
   Datenschutzseite 250 von 255 Messpunkten als abweichend meldete:

     Original 1920px:  Box l=183, Breite 1555   (zentriert, gedeckelt)
     Original 1440px:  Box l= 10, Breite 1420   (randlos, nicht gedeckelt)
     Build vorher:     bei 1920 volle 1900      (345px zu breit)

   Jede Textzeile lief dadurch anders um, daher die 250. Es war ein Fehler,
   nicht 250. Gleiches Muster wie beim Hauptcontainer weiter oben. */
.abschnitt--recht .container {
  padding: 0 max(10px, (100% - 1555px) / 2);
}

.band--hell {
  background: var(--farbe-hell);
}

.zentriert {
  text-align: center;
}

/* Die Trennlinien sind im Original durchgehend 168px breit, nicht 60px.
   Nachgemessen an allen Vorkommen der Startseite; einzige Ausnahme ist
   die Linie unter "Unsere Kunden" mit 232px. */
.trenner {
  width: 168px;
  height: 2px;
  margin: 24px 0;
  background: var(--farbe-secondary);
  border: 0;
}

.trenner--breit {
  width: 232px;
}

.trenner--zentriert {
  margin-left: auto;
  margin-right: auto;
}

.knopf {
  display: inline-block;
  padding: 17px 40px;
  font-family: var(--schrift-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 1em;
  text-transform: uppercase;
  color: var(--farbe-primary);
  background: transparent;
  border: 2px solid var(--farbe-primary);
  border-radius: 0;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s;
}

.knopf:hover,
.knopf:focus {
  color: var(--farbe-accent);
  border-color: var(--farbe-accent);
}

.knopf--pille {
  padding: 14px 19px 11px;
  font-family: var(--schrift-secondary);
  font-size: 16px;
  text-transform: none;
  color: var(--farbe-weiss);
  background: var(--farbe-accent);
  border: 2px solid var(--farbe-accent);
  border-radius: 100px;
}

.knopf--pille:hover,
.knopf--pille:focus {
  color: var(--farbe-primary);
  background: transparent;
  border-color: var(--farbe-primary);
}

/* Leeres Sprungziel fuer die zweite Schreibweise eines Ankers */
/* scroll-margin-top ist wegen des sticky Headers noetig: ohne das landet
   die angesprungene Sektion hinter der Kopfzeile. Gilt fuer die Anker der
   Leistungsseite und fuer #about auf der Startseite. */
.ankerziel {
  height: 0;
  overflow: hidden;
  scroll-margin-top: var(--hoehe-header);
}

[id]:target,
.leistung[id],
#about {
  scroll-margin-top: var(--hoehe-header);
}

/* --- Kopfzeile ---------------------------------------------------------- */

/*
 * ABWEICHUNG VOM 1:1, bewusst und auf Kundenwunsch (Nick, 07.09.2026).
 *
 * Das Original ist NICHT sticky: "sticky" kommt in post-129.css 0 mal vor,
 * und getComputedStyle auf der Live-Seite liefert position: static. Der
 * Header bleibt hier trotzdem oben stehen, weil die Seite lang ist und man
 * sonst zum Navigieren ganz nach oben scrollen muesste.
 *
 * z-index 100 liegt ueber dem Hero-Bild (0) und dem Scrollpfeil (6), aber
 * unter dem Einwilligungs-Banner (200).
 */
.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--farbe-header-bg);
}

.kopf__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--hoehe-header);
  padding: 0 5%;
}

/* Am Original gemessen: 103x103, nicht 114. Die 114 stehen zwar als
   width/height im Original-HTML, per CSS wird es aber kleiner gezeichnet. */
.kopf__logo img {
  width: 103px;
  height: 103px;
}

/* Das Original loest die Navigationsabstaende ueber Innenabstand an den
   Links (je 20px) plus 5px Luecke zwischen den Punkten. Ergebnis: 45px
   zwischen den Texten, und zwar gleichmaessig. Der Build hatte 34px Luecke
   ohne Polster, dadurch standen die Punkte ungleich (34 und 47) und die
   Klickflaeche war unnoetig klein. */
.nav__liste {
  display: flex;
  align-items: center;
  gap: 5px;
}

.nav__link {
  padding: 0 20px;
  font-family: var(--schrift-nav);
  font-size: 16px;
  font-weight: 300;
  text-transform: uppercase;
  color: var(--farbe-secondary);
  transition: color 0.2s;
}

.nav__link:hover,
.nav__link:focus,
.nav__link[aria-current='page'] {
  color: var(--farbe-header-hover);
}

.nav__eintrag {
  position: relative;
}

.nav__eintrag--untermenue > .nav__link::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 8px;
  vertical-align: 3px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}

.untermenue {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 10;
  min-width: 240px;
  padding: 8px 0;
  background: var(--farbe-weiss);
  border: 1px solid var(--farbe-linie);
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.nav__eintrag--untermenue:hover .untermenue,
.nav__eintrag--untermenue:focus-within .untermenue {
  opacity: 1;
  visibility: visible;
}

.untermenue a {
  display: block;
  padding: 10px 22px;
  font-family: var(--schrift-primary);
  font-size: 14px;
  text-transform: uppercase;
  color: var(--farbe-secondary);
  transition: color 0.2s, background 0.2s;
}

.untermenue a:hover,
.untermenue a:focus {
  color: var(--farbe-accent);
  background: var(--farbe-hell);
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
}

.burger span:not(.sr-only) {
  display: block;
  height: 2px;
  margin: 5px 0;
  background: var(--farbe-secondary);
  transition: transform 0.25s, opacity 0.2s;
}

.burger[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Hero --------------------------------------------------------------- */
/*
 * Alle Werte hier sind 1:1 aus der Original-Elementor-CSS uebernommen, nicht
 * geschaetzt. Quellen:
 *   assets-original/wp-content/uploads/elementor/css/post-46.css
 *     Sektion 68d3c367 (Hero), Spacer 4d1c8d1b, H1 48c7cb2a,
 *     Trenner 56a2ab36, Untertitel 71308b23, Bild 2c822aa6,
 *     Scrollpfeil-Sektion 6788a4fa
 *   assets-original/wp-content/uploads/elementor/css/post-4.css (Kit)
 * Wer hier Zahlen aendert, prueft sie vorher gegen diese Dateien.
 */

.hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 93.35vh;
  padding: 0 var(--seitenrand);
  overflow: hidden;
}

.hero__text {
  position: relative;
  z-index: 5;
  width: 100%;
  /* Elementor-Spacer 4d1c8d1b (8vh) plus die 20px Widget-Abstand, die
     Elementor unter jedes Widget setzt. Zusammen ergibt das im Original
     H1-Oberkante bei 217px, nachgemessen bei 1440x900. */
  padding-top: calc(8vh + 20px);
}

/* Hero-H1 ueberschreibt das Kit-Preset: 129px statt 105px, und die
   negative rechte Margin laesst die Zeile aus der Spalte laufen, damit
   "BILDER RAHMEN RACHE" einzeilig ueber die volle Breite steht. */
.hero__titel {
  margin: 0 -200px -18px -12px;
  font-size: 129px;
}

.hero .trenner {
  width: 168px;
  margin: 40px 0;
  background: var(--farbe-secondary);
}

.hero__untertitel {
  margin: 0 0 17px -4px;
  padding-right: 70%;
  font-family: var(--schrift-secondary);
  font-size: 38px;
  font-weight: 300;
  line-height: 1.4em;
  letter-spacing: -2px;
  color: var(--farbe-primary);
}

.hero__bild {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: 58.5%;
}

.hero__bild img {
  width: 100%;
  height: 93.35vh;
  object-fit: cover;
  object-position: center center;
}

/* position/z-index sind noetig, nicht kosmetisch: die Sektion ragt per
   margin-top -100px in den Hero hinein, und das Hero-Bild ist absolut mit
   z-index 0. Ohne eigene Positionierung liegt der Pfeil dahinter und ist
   schlicht unsichtbar. */
.scrollpfeil {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 10.5vh;
  margin-top: -100px;
  padding: 0 var(--seitenrand);
}

/*
 * Der Scrollpfeil ist im Original KEIN nackter Pfeil, sondern der goldene
 * Pill-Knopf aus dem Design-System. Am Live-DOM gemessen: 58x53,
 * Hintergrund rgb(207,148,95) = #CF945F, weisses Icon 16x20,
 * border-radius 100px, Rahmen 2px in derselben Farbe, Padding 14px 19px 11px.
 * Der Build hatte hier einen dunklen Pfeil 46x46 ohne Hintergrund.
 */
.scrollpfeil a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 19px 11px;
  color: var(--farbe-weiss);
  background: var(--farbe-accent);
  border: 2px solid var(--farbe-accent);
  border-radius: 100px;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.scrollpfeil svg {
  width: 16px;
  height: 20px;
}

/* Hover wie bei den uebrigen Pill-Knoepfen: Fuellung raus, Text und Rahmen
   auf Primary. Siehe docs/original-struktur.md, Abschnitt Buttons. */
.scrollpfeil a:hover,
.scrollpfeil a:focus {
  color: var(--farbe-primary);
  background: transparent;
  border-color: var(--farbe-primary);
}

/* --- Zweispaltige Sektionen --------------------------------------------- */

/*
 * Spaltenbreiten je Sektion. Das Original arbeitet NICHT mit 50/50 und
 * nicht mit einer einheitlichen Inhaltsbreite, sondern je Sektion anders.
 * Alle Werte unten sind an der Live-Seite bei 1440x900 nachgemessen
 * (Container-Box l/w, Spalten in Prozent) und decken sich mit den
 * Spaltenprozenten in post-46.css.
 */

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
}

.duo--gedreht .duo__bild {
  order: 2;
}

/* "Ueber uns": Original-Container l=158 w=1125, Spalten 50/50 (563/563),
   kein Gap. Der Text sitzt 95px vom linken Spaltenrand ein. */
.duo--schmal {
  max-width: 1125px;
  margin-inline: auto;
  gap: 0;
}

.duo--schmal .duo__inhalt {
  padding-left: 95px;
}

/* Karten-Sektion: Original-Container l=58 w=1382 (rechts randlos),
   Spalten 35% / 64.994%. */
/* Die Ueberschrift sitzt im Original 8px links vom Fliesstext
   (post-46.css, Widget 4397938: margin:20px 0px 0px -8px).
   Nachgemessen: Original Ueberschrift l=50, Fliesstext l=57. */
.duo--karte .titel--m {
  margin-left: -8px;
}

.duo--karte {
  grid-template-columns: 35% 64.994%;
  gap: 0;
  /* -4vw statt -4%: eine Prozent-Margin wuerde gegen die Container-Breite
     (1325) rechnen und waere 4px zu kurz, der Seitenrand ist aber 4% des
     Viewports (57.6 bei 1440). Nachgemessen. */
  margin-right: -4vw;
}

/* --- Leistungs-Kacheln -------------------------------------------------- */

/* Original: vier Spalten a 331px ohne Luecke, bei l=58, 389, 720 und 1051.
   Der Build hatte 306px mit 34px Luecke, dadurch brachen die Kacheltexte
   anders um und die Kachelhoehen wichen ab. */
.kacheln {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 50px;
}

/* Original: jede Kachelspalte polstert 0 62px.
   Beleg: post-46.css, Spalten 638f3bd0 / 59c86c5f / 474020b9 / 71283247,
   Selektor "> .elementor-element-populated". Das ist die Einrueckung, die
   frueher als bewusste Abweichung stummgeschaltet war. */
.kachel {
  display: block;
  padding: 0 62px;
  color: inherit;
}

/* Original-Bildbox: 207 x 150 auf Desktop, 300 x 150 auf Tablet und Mobil.
   Die Hoehe steht ueberall fest bei 150, die Breite laeuft gegen die
   Naturbreite 300 der Bilddatei und wird von max-width gedeckelt. Gemessen
   mit "node vergleich.js home <bp> --werte bild".

   BEWUSSTE ABWEICHUNG vom Original, von Nick am 08.09.2026 angeordnet:
   quadratische Bilder. Das Original zeigt 300x150 und quetscht die Datei auf
   Desktop in eine 207x150-Box (object-fit: fill), also sichtbar gestaucht.
   Nick hatte das am 07.09.2026 zunaechst als 1:1 bestaetigt und am 08.09.2026
   widerrufen: "kannst du doch quadratisch machen, das macht mehr Sinn".
   Umgesetzt als volle Spaltenbreite bei Seitenverhaeltnis 1:1, unverzerrt.
   Steht in docs/ist-analyse.md unter "Bewusste Abweichungen vom 1:1". */
.kachel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: opacity 0.25s;
}

.kachel:hover img {
  opacity: 0.85;
}

/* Kit-Preset 6f7a759: Poppins 22px, uppercase */
.kachel h4 {
  margin: 20px 0 10px;
  font-family: var(--schrift-primary);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3em;
  letter-spacing: 0;
  text-transform: uppercase;
}

.kachel p {
  color: var(--farbe-grau);
}

.kacheln__mehr {
  margin-top: 50px;
  text-align: center;
}

/* --- Icon-Boxen --------------------------------------------------------- */

/* Original: Sektion 45b6da50 polstert links 5em = 80px, die drei Spalten
   1e3ca8a6 / 276a881e / 7126d493 je 0 30px, Luecke 0. Gemessen im Original
   Spaltenkanten 138 / 553 / 967 bei 415 Breite, Text folglich bei 168.
   Beleg: post-46.css und "node vergleich.js home desktop --werte raster". */
.merkmale {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 50px;
  padding-left: 80px;
}

.merkmal {
  padding: 0 30px;
}

.merkmal svg {
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  fill: var(--farbe-accent);
}

.merkmal h4 {
  margin-bottom: 12px;
}

.merkmal p {
  color: var(--farbe-grau);
}

/* --- Listen mit Icon ---------------------------------------------------- */

.iconliste {
  margin: 20px 0;
}

.iconliste li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
}

.iconliste svg {
  flex: none;
  width: 13px;
  height: 13px;
  fill: var(--farbe-primary);
  transform: translateY(2px);
}

/* --- Leistungssektionen, randlos ---------------------------------------- */

/* Am Original gemessen (1440x900): jeder Leistungsblock ist 677px hoch und
   hat 180px Abstand nach unten, kein Abstand nach oben. Der Build hatte
   520px Hoehe und 90px oben wie unten, dadurch lagen die Bloecke 610px
   statt 857px auseinander. */
.leistung {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  margin: 0 0 180px;
}

.leistung__bild img {
  width: 100%;
  height: 100%;
  min-height: 677px;
  object-fit: cover;
}

/*
 * Textblock der Leistungsbloecke, am Original nachgemessen (1440x900):
 *   Bild links, Text rechts:  Text 889 bis 1281
 *   Bild rechts, Text links:  Text 159 bis  551
 * Der Block ist also immer 392px breit und sitzt symmetrisch: 159px vom
 * aeusseren Seitenrand, 169px von der Mittelachse. Der Build hatte 405px
 * Breite und klebte mit 58px viel zu dicht am Bild.
 * Prozent statt Pixel, damit es mit der Spaltenbreite mitwaechst
 * (Spalte = 720px bei 1440, also 392/720 = 54.4 Prozent).
 */
.leistung__inhalt {
  width: 54.4%;
  max-width: none;
  margin-left: 23.5%;
  padding: 0;
}

.leistung--rechts .leistung__bild {
  order: 2;
}

.leistung--rechts .leistung__inhalt {
  margin-left: 22.1%;
}

/* Auf der Leistungsseite steht die Trennlinie ueber der Ueberschrift */
.leistung__inhalt .trenner {
  margin: 0 0 22px;
}

/* --- Slideshow ---------------------------------------------------------- */

.slideshow {
  position: relative;
  min-height: 520px;
  overflow: hidden;
}

.slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.slideshow img.ist-aktiv {
  opacity: 1;
}

/* --- Bewertungen -------------------------------------------------------- */

.bewertungen {
  position: relative;
  margin-top: 45px;
}

.bewertungen__spur {
  display: flex;
  gap: 24px;
  padding: 6px 2px 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

/* Kartenoptik am Original nachgemessen (1440x900):
   Hintergrund #FAFAFA gefuellt, KEIN Rahmen, Breite 295px.
   Der Build hatte weiss mit 1px Rahmen und 320px. */
.bewertung {
  position: relative;
  flex: 0 0 295px;
  /* Feste Hoehe wie im Original (218px nachgemessen). Lange Bewertungen
     werden dort beschnitten, nicht umgebrochen, damit alle Karten gleich
     hoch sind. */
  height: 218px;
  padding: 22px;
  overflow: hidden;
  background: #fafafa;
  border: 0;
  scroll-snap-align: start;
}

.bewertung__kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.bewertung__avatar {
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

/* Google-Blau und fett, wie im Original: rgb(21, 79, 193), weight 700. */
.bewertung__name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #154fc1;
}

.bewertung__name:hover {
  color: var(--farbe-accent);
}

.bewertung__zeit {
  font-size: 12px;
  color: var(--farbe-grau);
}

.bewertung__google {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 20px;
  height: 20px;
}

.bewertung__sterne {
  display: flex;
  gap: 2px;
  margin-bottom: 10px;
}

.bewertung__sterne svg {
  width: 17px;
  height: 17px;
  fill: #fbbc04;
}

.bewertung__sterne svg.ist-leer {
  fill: #dadce0;
}

.bewertung__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-line;
}

.bewertungen__pfeil {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--farbe-grau);
  transform: translateY(-50%);
  transition: color 0.2s;
}

.bewertungen__pfeil:hover {
  color: var(--farbe-primary);
}

.bewertungen__pfeil--zurueck {
  left: -30px;
}

.bewertungen__pfeil--vor {
  right: -30px;
}

/* --- Banner ------------------------------------------------------------- */

.banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

/* "Kein Bild ist zu gross": Original l=58 w=1382, Text 39.641%, Bild 60.353%. */
.banner--text-links {
  grid-template-columns: 39.641% 60.353%;
  padding-left: var(--seitenrand);
}

/* Der Text steht buendig am Seitenrand, ohne zusaetzliches Innenpolster.
   Original: Flisstext l=57, Ueberschrift l=49. Build vorher: beide l=90. */
.banner--text-links .banner__inhalt {
  padding-left: 0;
  /* 71 statt 80: die Sektion war sonst 881px hoch, das Original ist 864px. */
  padding-block: 71px;
}

/* Die Ueberschrift laeuft im Original 554px nach rechts aus der Spalte
   heraus ueber die Slideshow, mit z-index 10 darueber. Beleg:
   post-46.css, Widget 422648d7: margin:20px -554px 0px -9px; z-index:10.
   Original-Kanten l=49 r=812, die Spalte endet bei 606. */
.banner--text-links .titel--xl {
  position: relative;
  z-index: 10;
  margin: 20px -554px 0 -9px;
}

/* Der Textblock ist im Original rechts stark eingerueckt, dadurch bricht
   der Fliesstext frueher um. Beleg: post-46.css, Widget 788c666d:
   padding 0% 36% 8% 0% (Desktop), 0% 8% 14% 0% (Tablet),
   0% 0% 12% 0% (Mobil). Nachgemessen: Original-Textkante r=395. */
.banner__text {
  padding: 0 36% 8% 0;
  margin-left: -1px;
}

/* Nackte Punkte-Liste wie im Original: disc, 40px Einzug. */
.punkteliste {
  margin: 0 0 1em;
  padding-inline-start: 40px;
  list-style-type: disc;
}

.punkteliste li {
  margin: 0;
}

/* "Wir freuen uns auf Sie": Original-Text l=880, Spalte beginnt bei 777,
   macht 102px Innenpolster links. */
.banner--text-rechts .banner__inhalt {
  padding-left: 102px;
}

/* "Wir freuen uns auf Sie": Original l=0 w=1382, Bild 56.202%, Text 43.814%. */
.banner--text-rechts {
  grid-template-columns: 56.202% 43.814%;
  padding-right: var(--seitenrand);
  /* Original 640px hoch, Build vorher 506px. */
  padding-block: 4.7%;
}

.banner__bild {
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
}

.banner__inhalt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 6%;
}

/* --- 360-Grad-Ansicht --------------------------------------------------- */
/* Erweiterung auf Kundenwunsch, keine 1:1-Uebernahme. */

.streetview {
  position: relative;
  margin-top: 20px;
  /* 4:3 wie die Einbettung, die Google im Teilen-Dialog ausgibt (600x450). */
  aspect-ratio: 4 / 3;
  background: var(--farbe-hell);
}

.streetview.ist-geladen {
  background: none;
}

.streetview iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Knopf auf der statischen Karte, mit dem die 360-Grad-Ansicht nachgeladen
   werden kann. Liegt auf der Karte, damit optisch nur EIN Element steht. */
.karte figure {
  position: relative;
  margin: 0;
}

.karte__360 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--farbe-weiss);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
}

/* --- Einwilligungs-Banner ---------------------------------------------- */
/* Eigene Loesung, kein Fremd-Dienst. Nimmt die Schrift und die Knopfform
   der Seite auf, damit es kein Fremdkoerper ist. */

.consent {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 200;
  background: var(--farbe-weiss);
  border-top: 2px solid var(--farbe-primary);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.08);
}

.consent__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 22px var(--seitenrand);
}

.consent__titel {
  margin: 0 0 4px;
  font-family: var(--schrift-primary);
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.consent__text p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6em;
}

.consent__text a {
  text-decoration: underline;
}

.consent__knoepfe {
  display: flex;
  flex-shrink: 0;
  gap: 12px;
}

/* Beide Knoepfe gleich gross und gleich auffaellig. Ablehnen darf nicht
   schwerer zu treffen sein als Annehmen, sonst ist die Einwilligung
   nicht freiwillig. */
.consent__knopf {
  min-width: 150px;
  padding: 14px 24px;
  font-size: 14px;
  text-align: center;
}

/*
 * ACHTUNG: Dieser Mobil-Block steht VOR dem Tablet-Block weiter unten.
 * Alles, was auch eine Tablet-Regel hat, gehoert deshalb NICHT hierher,
 * sondern in den zweiten Mobil-Block ab Zeile ~1770. Sonst gewinnt die
 * Tablet-Regel auf dem Handy. Hier stehen nur Regeln ohne Tablet-Pendant.
 */
@media (max-width: 767px) {
  .consent__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 18px var(--seitenrand);
  }

  .consent__knoepfe {
    flex-direction: column;
  }

  .consent__knopf {
    width: 100%;
  }
}

/* --- Kontaktseite ------------------------------------------------------- */

/*
 * Die drei Kontaktblöcke stehen im Original UNTEREINANDER, nicht
 * nebeneinander. Am Live-DOM gemessen (1440x900), alle drei linksbuendig
 * bei l=121:
 *   Oeffnungszeiten y=623
 *   Kontakt         y=789
 *   Adresse         y=955
 * Also 166px Abstand von Ueberschrift zu Ueberschrift. Der Build hatte ein
 * dreispaltiges Raster bei y=737 mit l=58, 516 und 974.
 */
/* BEWUSSTE ABWEICHUNG vom Original, von Nick am 08.09.2026 angeordnet:
   Oeffnungszeiten, Kontakt und Adresse stehen auf Desktop NEBENEINANDER.
   Das Original stapelt sie untereinander. Tablet und Mobil bleiben gestapelt.
   Steht in docs/ist-analyse.md unter "Bewusste Abweichungen vom 1:1". */
.kontaktkarten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 50px;
  padding-left: 63px; /* 121 minus Container-Rand 58 */
}

.kontaktkarte svg {
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  fill: var(--farbe-accent);
}

/* Kit-Preset 20e8fad: Overpass 20px, capitalize */
/* Original 28px, nicht 20px. Nachgemessen an "Oeffnungszeiten". */
.kontaktkarte h3 {
  margin-bottom: 12px;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.3em;
  letter-spacing: -0.5px;
  text-transform: capitalize;
}

.kontaktkarte p {
  color: var(--farbe-grau);
}

.kontaktkarte a:hover {
  color: var(--farbe-accent);
}

.karte figure {
  margin: 0;
  height: 100%;
}

.karte img {
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
}

.karte figcaption {
  padding: 8px 2px;
  font-size: 11px;
  color: var(--farbe-grau);
}

.karte figcaption a {
  text-decoration: underline;
}

/* --- Rechtstexte -------------------------------------------------------- */

/*
 * Impressum und Datenschutz laufen im Original ueber die volle Breite:
 * gemessen l=10 w=1420 bei 1440er Fenster.
 *
 * WICHTIG: Der Rechtstext ist im Original NICHT in der Seitenschrift
 * gesetzt. Er kommt aus einem Generator und behaelt dessen Typografie,
 * naemlich die System-Schrift des Browsers. Am Live-DOM gemessen:
 *   Fliesstext  16px / 24px   / 400
 *   h3          28px / 33.6px / 500
 *   h2          32px / 38.4px / 500
 *   h1          40px / 48px   / 500
 * Der Build hatte hier Poppins und Overpass in 14/20/26/92px. Das war die
 * Ursache fuer 216 der 220 gemeldeten Abweichungen auf der Datenschutzseite,
 * also ein einziger Fehler, nicht 216.
 */
.rechtstext {
  max-width: none;
  margin-top: 30px;
}

/*
 * NUR die Datenschutzseite. Impressum und Datenschutz sind im Original
 * unterschiedlich gesetzt, am 07.09.2026 nachgemessen:
 *   Impressum    Poppins 14px / 23px / 300, also die Seitenschrift
 *   Datenschutz  System-Schrift 16px / 24px / 400, aus dem Generator
 * Eine gemeinsame Regel fuer beide war falsch.
 */
.rechtstext--generator {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.rechtstext--generator h1 {
  margin: 0 0 20px;
  font-family: inherit;
  font-size: 40px;
  font-weight: 500;
  line-height: 48px;
  letter-spacing: normal;
  text-transform: none;
}

.rechtstext--generator h2 {
  margin: 44px 0 14px;
  font-family: inherit;
  font-size: 32px;
  font-weight: 500;
  line-height: 38.4px;
  letter-spacing: normal;
  text-transform: none;
}

.rechtstext--generator h3 {
  margin: 30px 0 10px;
  font-family: inherit;
  font-size: 28px;
  font-weight: 500;
  line-height: 33.6px;
  letter-spacing: normal;
}

/* Impressum: Seitenschrift, Kit-Werte. Steht bewusst VOR der
   Generator-Regel, sonst gewinnt sie bei gleicher Spezifitaet und die
   Datenschutzseite faellt auf 14px zurueck. */
.rechtstext p,
.rechtstext li {
  font-size: 14px;
  line-height: 23px;
}

.rechtstext--generator p,
.rechtstext--generator li {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.rechtstext ul {
  margin: 0 0 1em;
  padding-left: 20px;
  list-style: disc;
}

.rechtstext a {
  color: var(--farbe-accent);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

/* --- Fußzeile ----------------------------------------------------------- */

/* Am Original gemessen (1440x900): Fusszeile 321px hoch, Inhalt von 20 bis
   1420, also 20px Seitenrand statt der 4 Prozent des uebrigen Layouts.
   Build vorher: 262px hoch, Inhalt 58 bis 1382. */
.fuss {
  padding: 59px 0;
  background: var(--farbe-footer-bg);
  color: var(--farbe-footer-text);
  border-top: 1px dotted var(--farbe-footer-trenner);
}

.fuss .container {
  padding: 0 20px;
}

.fuss__reihe {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  gap: 30px;
  padding-bottom: 26px;
}

.fuss a:hover,
.fuss a:focus {
  color: var(--farbe-footer-hover);
}

.fuss__nav ul {
  display: flex;
  gap: 26px;
}

.fuss__nav a {
  font-family: var(--schrift-primary);
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--farbe-footer-text);
}

.fuss__nav .nav__eintrag--untermenue > a::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 7px;
  vertical-align: 3px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}

.fuss__nav .untermenue {
  left: 0;
  min-width: 220px;
  background: #eaeaea;
  border: 0;
  transform: none;
}

.fuss__nav .untermenue a {
  font-size: 13px;
  font-weight: 300;
}

.fuss__nav .untermenue a:hover {
  background: #ededed;
  color: var(--farbe-footer-hover);
}

.fuss__kontakt {
  text-align: right;
}

.fuss__kontakt p {
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
}

.fuss__abschluss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 22px;
  border-top: 1px dotted var(--farbe-footer-trenner);
  font-size: 13px;
}

/* Die Social-Icons (Facebook, Twitter, Google Plus, Pinterest) sind am
   08.09.2026 entfallen. Nick: "die Socials runternehmen, sind eh nicht
   verbunden". Im Original standen sie mit leerem href, zeigten also ins
   Nichts. BEWUSSTE ABWEICHUNG, steht in docs/ist-analyse.md. */

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

.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
}

.modal.ist-offen {
  display: flex;
}

.modal__karte {
  position: relative;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  padding: 40px;
  overflow-y: auto;
  background: var(--farbe-weiss);
}

.modal__schliessen {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  font-size: 26px;
  line-height: 1;
  color: var(--farbe-grau);
}

.modal__schliessen:hover {
  color: var(--farbe-primary);
}

.modal h2 {
  margin-bottom: 26px;
  font-family: var(--schrift-secondary);
  font-size: 30px;
  font-weight: 300;
  letter-spacing: -1px;
  text-transform: none;
}

/* --- Hinweis-Popup Startseite ------------------------------------------ */

/* Nachbau von Elementor-Popup 574, Werte aus post-574.css:
     Abdunkelung   rgba(0,0,0,.8)
     Kasten        861px breit
     Schatten      2px 8px 23px 3px rgba(0,0,0,.2)
     Ueberschrift  zentriert
   Bewusst OHNE Media-Query: max-width und clamp() tragen alle Breiten. So
   entsteht die bekannte Reihenfolge-Falle mit den zwei 767px-Bloecken gar
   nicht erst. z-index 300 liegt ueber dem Einwilligungs-Banner (200). */
.hinweis {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.8);
}

/* Noetig, weil display:flex oben sonst das hidden-Attribut aushebelt. */
.hinweis[hidden] {
  display: none;
}

.hinweis__karte {
  position: relative;
  width: 861px;
  max-width: 100%;
  max-height: 90vh;
  padding: clamp(28px, 5vw, 50px);
  overflow-y: auto;
  text-align: center;
  background: var(--farbe-weiss);
  box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, 0.2);
}

.hinweis__schliessen {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  font-size: 28px;
  line-height: 1;
  color: var(--farbe-grau);
}

.hinweis__schliessen:hover,
.hinweis__schliessen:focus {
  color: var(--farbe-primary);
}

.hinweis__logo {
  display: block;
  width: 114px;
  height: 114px;
  margin: 0 auto 16px;
}

.hinweis__titel {
  margin-bottom: 18px;
  font-family: var(--schrift-secondary);
  font-size: 30px;
  font-weight: 300;
  text-transform: none;
}

.hinweis__karte p {
  margin: 0;
}

.feld {
  margin-bottom: 16px;
}

.feld label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
}

.feld input[type='text'],
.feld input[type='email'],
.feld textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: var(--farbe-text);
  background: var(--farbe-weiss);
  border: 1px solid var(--farbe-linie);
  border-radius: 0;
}

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

.feld input:focus,
.feld textarea:focus {
  border-color: var(--farbe-accent);
  outline: none;
}

.feld--haken {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--farbe-grau);
}

.feld--haken input {
  flex: none;
  margin-top: 3px;
}

.feld--haken label {
  margin: 0;
  font-size: 12px;
}

.feld--haken a {
  color: var(--farbe-accent);
  text-decoration: underline;
}

.formular__meldung {
  margin-top: 16px;
  padding: 14px 16px;
  font-size: 13px;
}

.formular__meldung--gut {
  color: #0b6b2e;
  background: #e8f6ec;
}

.formular__meldung--schlecht {
  color: #8a1c1c;
  background: #fbeaea;
}

.honigtopf {
  position: absolute;
  left: -9999px;
}

/* --- Scroll-Animationen ------------------------------------------------- */

/* 1s entspricht der Dauer von animate.css, das Elementor im Original
   verwendet. Der Build hatte 0.7s, das lief spuerbar schneller. */
.anim {
  opacity: 0;
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.anim--fade {
  transform: none;
}

.anim--rechts {
  transform: translateX(60px);
}

.anim--links {
  transform: translateX(-60px);
}

.anim--runter {
  transform: translateY(-40px);
}

.anim.ist-sichtbar {
  opacity: 1;
  transform: none;
}

/* Ohne JavaScript darf nichts unsichtbar bleiben */
.kein-js .anim {
  opacity: 1;
  transform: none;
}

/* --- Breakpoint Tablet (Elementor: 1024px) ------------------------------ */

@media (max-width: 1024px) {
  :root {
    /* Der Original-Header behaelt auf Tablet seine 125px, er schrumpft nicht.
       Nachgemessen bei 834x1112: Original 125px, Build vorher 114px. */
    --hoehe-header: 125px;
  }

  /* Kit-Body bleibt auf Tablet bei 14px, nur die Zeilenhoehe wechselt auf
     1.6em. Der Build hatte hier 15px, das gibt es im Original nicht. */
  body {
    font-size: 14px;
    line-height: 1.6em;
  }

  /* Das Original tauscht auf Tablet die Spaltenverhaeltnisse:
     "Kein Bild"      39.641/60.353  ->  47/53   (3f8b708b / 4d7f64a4)
     "Wir freuen uns" 56.202/43.814  ->  60/40   (61f51dcf / 14b1ee1a)
     Karte            35/64.994      ->  47/53   (25c2bb0  / 4516ba1) */
  /* Auf Tablet hat die Sektion beidseitig Rand, dadurch ist die Spalte
     schmaler. Ohne das rechte Polster von .banner__inhalt bricht die
     Ueberschrift zu frueh um: Original r=539, Build davor r=437. */
  .banner--text-links {
    grid-template-columns: 47% 53%;
    padding-right: var(--seitenrand);
  }

  .banner--text-links .banner__inhalt {
    padding-right: 0;
  }

  .banner--text-rechts {
    grid-template-columns: 60% 40%;
  }

  .duo--karte {
    grid-template-columns: 47% 53%;
  }

  h1 {
    font-size: 70px;
  }

  h2 {
    font-size: 36px;
  }

  h3 {
    font-size: 30px;
    line-height: 1.3em;
  }

  h4 {
    font-size: 24px;
  }

  .hero {
    min-height: 70vh;
  }

  .hero__titel {
    margin: 0 0 0 -6px;
    font-size: 92px;
  }

  /* Kit-primary faellt auf Tablet auf 70px, Kit-secondary auf 30px. */
  .titel--xl {
    font-size: 70px;
  }

  .titel--m {
    font-size: 30px;
    line-height: 1.3em;
  }

  /* Ueberlappung schrumpft von -554px auf -150px (Widget 422648d7). */
  .banner--text-links .titel--xl {
    margin: 40px -150px 0 -3px;
  }

  /* Textblock 788c666d: padding 0% 8% 14% 0% auf Tablet. */
  .banner__text {
    padding: 0 8% 14% 0;
  }

  .hero__untertitel {
    padding-right: 50%;
    font-size: 30px;
    line-height: 1.3em;
  }

  .hero__bild {
    width: 58vw;
  }

  .hero__bild img {
    height: 70vh;
  }

  .scrollpfeil {
    min-height: 8vh;
    margin-top: -80px;
  }

  .knopf {
    font-size: 15px;
    padding: 15px 32px;
  }

  .nav__link {
    font-size: 14px;
  }

  .nav__liste {
    gap: 22px;
  }

  .kacheln {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Original bei <=1024px: je Spalte width:50%, dazu ungleiche Polster in
     Prozent. Beleg: post-46.css, @media(max-width:1024px), Spalten
     638f3bd0 / 59c86c5f / 474020b9 / 71283247. Prozente rechnen gegen die
     Breite des Rasterfeldes, Probe: 14 % von 383,64 = 53,71 gegen gemessene
     53,7031. Das 16 % unten erzeugt den Abstand zur zweiten Reihe. */
  .kachel:nth-child(1) { padding: 0 14% 16% 0; }
  .kachel:nth-child(2) { padding: 0 0 16% 14%; }
  .kachel:nth-child(3) { padding: 0 14% 0 0; }
  .kachel:nth-child(4) { padding: 0 0 0 14%; }

  /* Original: die 5em Sektionspolster gelten nur auf Desktop, ab 1024px
     steht bei 45b6da50 padding:0em 0em 0em 0em. Die drei Spalten stehen
     dort auf width:50%, ergeben also zwei nebeneinander und die dritte
     darunter. Gemessen im Original bei 834px: "Qualitätsware" bei l=79,
     "Zertifiziert & Erfahren" bei l=417, beide auf y=3216.
     Polster laut post-46.css: 0% 0% 16% 12% / 0% 12% 0% 0% / 0% 0% 0% 12%. */
  .merkmale {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    padding-left: 0;
  }

  .merkmal:nth-child(1) { padding: 0 0 16% 12%; }
  .merkmal:nth-child(2) { padding: 0 12% 0 0; }
  .merkmal:nth-child(3) { padding: 0 0 0 12%; }

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

  .duo {
    gap: 40px;
  }

  /* Original bei 834: Bloecke 525px hoch, Abstand 0 oben / 180px unten.
     Build vorher: 380px und 60/60. */
  .leistung {
    min-height: 525px;
    margin: 0 0 180px;
  }

  .leistung__bild img {
    min-height: 525px;
  }

  .slideshow,
  .banner__bild,
  .karte img {
    min-height: 380px;
  }

  /* Am Original bei 834x1000 gemessen: Text rechts l=512 r=789 (Breite 277),
     Text links l=33. Spalte ist 417 breit, macht 66.4% Breite und
     22.8% bzw. 7.9% Einzug. */
  .leistung__inhalt {
    width: 66.4%;
    margin-left: 22.8%;
    padding: 0;
  }

  .leistung--rechts .leistung__inhalt {
    margin-left: 7.9%;
  }

  /* H1 der Unterseiten faellt auf Tablet auf 92px, wie im Hero. */
  .abschnitt--seitenkopf h1 {
    margin: 0 0 0 -6px;
    font-size: 92px;
  }
}

/* --- Breakpoint Mobil (Elementor: 767px) -------------------------------- */

@media (max-width: 767px) {
  :root {
    --hoehe-header: 80px;
    /* 23px, nachgemessen am Original bei 390x844: Inhaltsboxen l=23 w=343. */
    --seitenrand: 23px;
  }

  /*
   * Auf Mobil steht im Original ALLES linksbuendig bei l=23. Der Build hat
   * die Sektionsueberschriften auch mobil zentriert, dadurch standen sie
   * bei 67, 86 und 120 statt bei 23. Nachgemessen bei 390x844.
   */
  .zentriert {
    text-align: left;
  }

  .trenner--zentriert {
    margin-left: 0;
    margin-right: 0;
  }

  /* Kit-secondary faellt auf Mobil auf 22px. */
  .titel--m {
    font-size: 22px;
    line-height: 1.5em;
    letter-spacing: 0;
  }

  /* Das 95px-Polster ist eine reine Desktop-Sache (zweispaltig). Mobil
     steht der Text buendig am Seitenrand. */
  .duo--schmal .duo__inhalt {
    padding-left: 0;
  }

  /* Mobil laufen die Banner-Sektionen anders als auf Desktop:
     "Kein Bild ist zu gross" hat l=23 w=343 (kein Vollrand),
     "Wir freuen uns auf Sie" hat l=0 w=390 (Vollrand). Nachgemessen. */
  .banner--text-links {
    grid-template-columns: 1fr;
    padding: 0 var(--seitenrand);
  }

  .banner--text-rechts {
    grid-template-columns: 1fr;
    padding-right: 0;
  }

  /* Mobil endet die Ueberlappung, die Ueberschrift steht wieder in der
     Spalte (Widget 422648d7: margin 0px 0px 0px -3px), und der Textblock
     verliert sein rechtes Polster (788c666d: padding 0% 0% 12% 0%). */
  .banner--text-links .titel--xl {
    margin: 0 0 0 -3px;
  }

  .banner__text {
    padding: 0 0 12% 0;
  }

  /* Die Sektion laeuft mobil randlos, der TEXT darin steht aber wie
     ueberall bei l=23. Vorher stand er bei l=0. */
  .banner--text-rechts .banner__inhalt {
    padding-inline: var(--seitenrand);
  }

  /* Kit-primary faellt auf Mobil auf 46px. */
  .titel--xl {
    font-size: 46px;
  }

  .duo--karte {
    margin-right: 0;
  }

  body {
    font-size: 13px;
    line-height: 1.5em;
  }

  h1 {
    font-size: 46px;
  }

  h2 {
    font-size: 30px;
  }

  h3 {
    font-size: 22px;
    letter-spacing: 0;
  }

  h4 {
    font-size: 19px;
    letter-spacing: 0;
  }

  .hero__untertitel {
    padding-right: 0;
    font-size: 22px;
    letter-spacing: 0;
  }

  .knopf {
    font-size: 14px;
    padding: 14px 28px;
  }

  .kachel h4 {
    font-size: 19px;
  }

  .kopf {
    border-bottom: 1px solid var(--farbe-linie-hell);
  }

  .kopf__inner {
    padding: 0 20px;
  }

  .kopf__logo img {
    width: 64px;
    height: 64px;
  }

  .burger {
    display: block;
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    padding: 10px 20px 24px;
    background: var(--farbe-weiss);
    border-bottom: 1px solid var(--farbe-linie-hell);
  }

  .nav.ist-offen {
    display: block;
  }

  .nav__liste {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link {
    display: block;
    padding: 13px 0;
    border-bottom: 1px solid var(--farbe-linie-hell);
  }

  .nav__eintrag--untermenue > .nav__link::after {
    float: right;
    margin-top: 6px;
  }

  .untermenue {
    position: static;
    min-width: 0;
    padding: 0 0 8px 16px;
    border: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .untermenue a {
    padding: 9px 0;
    font-size: 13px;
  }

  /*
   * ACHTUNG: Diese pauschale Regel steht NACH den Sektions-Modifiern oben
   * und hat gleiche Spezifitaet. Sie hat deshalb auf Mobil saemtliche
   * gemessenen Polster ueberschrieben und alles auf 45px gesetzt, wodurch
   * die Startseite mobil 1117px zu kurz war. Die Modifier stehen direkt
   * darunter noch einmal, mit den mobil gemessenen Werten.
   */
  /* BEWUSSTE ABWEICHUNG vom Original, von Nick am 08.09.2026 angeordnet.
     Die Werte darunter waren aus den Prozent-Margins des Originals
     zurueckgerechnet und fielen auf 390px auseinander: 45 / 207 / 133 / 74 /
     156 / 117. Nick: "die Abstaende sind total random, mal ist das viel, mal
     wenig" und "von Bilder Rahmen Rache bis zum ersten Bild ein bisschen
     weniger". Deshalb ein einheitlicher Rhythmus von 64px auf Mobil.
     Eine Zahl aendern reicht, wenn es enger oder weiter soll.
     Steht in docs/ist-analyse.md unter "Bewusste Abweichungen vom 1:1". */
  .abschnitt {
    padding: 64px 0;
  }

  /* Mobil gemessen am Original bei 390x844, Sektionshoehen:
     Ueber uns 1053, Leistungen 2320, Was zeichnet 747,
     Unsere Kunden 695, Verschaffen 1087. */
  .abschnitt--ueberuns {
    padding: 64px 0;
  }

  .abschnitt--leistungen {
    margin-top: 0;
    padding: 0 0 64px;
  }

  .abschnitt--merkmale {
    padding: 64px 0;
  }

  .abschnitt--bewertungen {
    padding: 64px 0;
  }

  .abschnitt--karte {
    padding: 0;
  }

  /* Mobil bleibt das Bild absolut oben stehen (46vh hoch), der Text startet
     per 52vh-Spacer darunter. Genau so macht es das Original. */
  .hero {
    min-height: 90vh;
    padding: 0 6%;
  }

  .hero__text {
    /* Spacer 52vh plus 20px Elementor-Widget-Abstand, wie auf Desktop. */
    padding-top: calc(52vh + 20px);
  }

  .hero__titel {
    margin: 0 0 0 -3px;
    font-size: 14vw;
  }

  .hero .trenner {
    margin: 15px 0;
  }

  .hero__bild {
    width: 100%;
  }

  .hero__bild img {
    height: 46vh;
  }

  .scrollpfeil {
    display: none;
  }

  .duo,
  .banner,
  .leistung {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  /* Die Kartensektion der Kontaktseite hatte einen eigenen Spaltenschnitt
     (54% / 46%) fuer Desktop, der mobil NIE zurueckgesetzt wurde. Wegen der
     hoeheren Spezifitaet hat er die Regel darueber geschlagen: die Karte war
     auf 390px nur 211px breit, gemessen am 08.09.2026. Betraf schon die
     statische Karte, faellt jetzt mit der Maps-Einbettung nur staerker auf. */
  .abschnitt--kontaktkarte .duo {
    grid-template-columns: 1fr;
  }

  .abschnitt--kontaktkarte .container {
    padding: 0 var(--seitenrand);
  }

  .abschnitt--kontaktkarte .duo__inhalt {
    width: auto;
    margin-left: 0;
  }

  .abschnitt--kontaktkarte .karte img {
    height: auto;
    min-height: 260px;
  }

  .duo--gedreht .duo__bild {
    order: 0;
  }

  /* Uebergabe 4.2: In .leistung--rechts steht im DOM erst der Text, dann das
     Bild (auf Desktop dreht order:2 das Bild nach rechts). Mit order:0 kam
     mobil die DOM-Reihenfolge durch, also Text zuerst bei jedem zweiten
     Block. Erwartet ist Bild zuerst in ALLEN Bloecken. */
  .leistung--rechts .leistung__bild {
    order: -1;
  }

  /* Am Original gemessen (390px, 08.09.2026):
       Bildoberkante zu Bildoberkante   823 (Regelfall)
       Bildunterkante zu Ueberschrift   133 (konstant ueber alle acht Bloecke)
     Der Build hatte 50px Abstand Bild zu Ueberschrift und 660px hohe Bilder.
     gap steuert hier den Abstand Bild zu Text, margin-bottom den zum
     naechsten Block. */
  .leistung {
    margin: 0 0 130px;
    /* 109 statt 133, weil die Ueberschrift im Inhaltsblock noch eigene
       Margin mitbringt. Gemessen ergibt das die 133 des Originals. */
    gap: 109px;
  }

  /* Mobil stapelt alles, der Text steht buendig bei l=23 ueber die volle
     Breite. Ohne das Zuruecksetzen von width und margin-left wirkten hier
     weiter die Desktop-Prozente und der Text sass bei l=112. */
  .leistung__inhalt {
    width: auto;
    max-width: none;
    margin-left: 0;
    padding: 0 var(--seitenrand);
  }

  .leistung--rechts .leistung__inhalt {
    margin-left: 0;
  }

  /* H1 der Unterseiten mobil 14vw, wie im Hero.
     ACHTUNG, hier fehlten am 08.09.2026 zwei Seiten: die Regel griff nur auf
     .abschnitt--seitenkopf, also nur auf /services/. Die Kontaktseite nutzt
     .abschnitt--kontaktkopf, Impressum und Datenschutz .abschnitt--recht.
     Dort fiel die Ueberschrift mobil auf die Desktop-Groesse zurueck:
     Kontakt 115.2px statt 54.6 und die Textkante lag bei 507 auf einem
     390px breiten Bildschirm, lief also 117px ueber den Rand. Impressum
     105px statt 46. Nick: "die ist viel zu breit, warum ist die so gross".
     Der Ueberlauf ist ausserdem ein zweiter Verursacher des horizontalen
     Wegschiebens aus Abschnitt 4.3, neben den Scroll-Animationen. */
  .abschnitt--seitenkopf h1,
  .abschnitt--kontaktkopf h1 {
    margin: 0 0 0 -3px;
    font-size: 14vw;
  }

  /* Original auf /impressum/ bei 390 gemessen: 46px.
     NUR der direkte Kind-h1, sonst trifft die Regel auch die
     Datenschutzerklaerung. Deren h1 steckt in .rechtstext--generator und holt
     seine 40px aus einer frueheren Regel; bei gleicher Spezifitaet haette die
     spaetere hier gewonnen und 40 auf 46 gezogen. Genau so passiert. */
  .abschnitt--recht > .container > h1 {
    font-size: 46px;
  }

  /* Am Original gemessen (390px, 08.09.2026): alle acht Leistungsbilder sind
     EXAKT 390 x 414. Es ist eine feste Kachelhoehe, nicht das Seitenverhaeltnis
     der jeweiligen Datei. Das Original loest sie als Hintergrundbild an
     .elementor-widget-wrap, deshalb findet ein img-Vergleich sie nicht.
     Der Build hatte 660, also 246px zu hoch je Block. */
  .leistung__bild img {
    height: 414px;
    min-height: 0;
    object-fit: cover;
  }

  .slideshow,
  .banner__bild,
  .karte img {
    min-height: 260px;
  }

  /* Original bei <=767px: eine Spalte, und die senkrechten Abstaende sind
     NICHT gleich. Beleg: post-46.css, @media(max-width:767px):
     25 % / 20 % / 20 % / 0 unten. Der Build hatte pauschal gap:34px, das hat
     das alte Werkzeug nie gesehen, weil es keine Raster gemessen hat.
     Steht bewusst im ZWEITEN Mobil-Block, sonst gewinnt der Tablet-Block. */
  .kacheln {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .kachel:nth-child(1) { padding: 0 0 25%; }
  .kachel:nth-child(2) { padding: 0 0 20%; }
  .kachel:nth-child(3) { padding: 0 0 20%; }
  .kachel:nth-child(4) { padding: 0; }

  /* Unter 768px faellt im Original das width:50% der Icon-Spalten weg, es
     bleibt eine Spalte. Polster laut post-46.css @media(max-width:767px):
     0% 0% 20% 0% / 0% 0% 20% 0% / 0. Muss hier im ZWEITEN Mobil-Block
     stehen, sonst gewinnt das repeat(2, 1fr) aus dem Tablet-Block. */
  .merkmale {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .merkmal:nth-child(1) { padding: 0 0 20%; }
  .merkmal:nth-child(2) { padding: 0 0 20%; }
  .merkmal:nth-child(3) { padding: 0; }

  .banner__inhalt {
    padding: 40px 20px;
  }

  .bewertung {
    flex-basis: 84%;
  }

  .bewertungen__pfeil {
    display: none;
  }

  /* Fusszeile mobil aufgeraeumt, 08.09.2026. Nick: "auch in mobil schlimm".
     Vorher lief alles in einer Spalte mit 22px Abstand ineinander, die
     Kontaktzeilen standen in 15px Versalien direkt unter der Navigation und
     der leere Rasterplatz aus dem Desktop-Layout riss eine Luecke.
     BEWUSSTE ABWEICHUNG, steht in docs/ist-analyse.md. */
  .fuss {
    padding: 44px 0 36px;
  }

  .fuss__reihe {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-bottom: 22px;
  }

  /* Der leere Platzhalter aus dem Desktop-Raster erzeugt mobil nur eine
     Leerzeile. */
  .fuss__reihe > div:empty {
    display: none;
  }

  /* Am Original gemessen (390px, 08.09.2026): die Fusszeilen-Navigation ist
     dort mobil GAR NICHT sichtbar. Sichtbar sind nur Impressum, Datenschutz,
     die Cookie-Links und das Copyright. Der Build zeigte alle zehn Menuepunkte
     samt Untermenue und war dadurch 701px hoch statt 461. Das war Nicks
     "in mobil schlimm". Die Navigation steht im Kopfbereich zur Verfuegung. */
  .fuss__nav {
    display: none;
  }

  .fuss__nav ul {
    flex-direction: column;
    gap: 10px;
  }

  .fuss__kontakt {
    text-align: left;
  }

  .fuss__kontakt p {
    margin-bottom: 10px;
    font-size: 13px;
  }

  .fuss__abschluss {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: 18px;
    font-size: 12px;
    line-height: 1.6;
  }

  .modal__karte {
    padding: 30px 20px;
  }
}

/* --- Rücksicht auf reduzierte Bewegung ---------------------------------- */

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

  .anim {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .slideshow img {
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}