@import url("../fonts/fonts.css");

/* Symbolschrift – Font Awesome 6, zugeschnitten auf die benutzten Zeichen:
   plus, arrow-right, angle-left, angle-right, chevron-down. 756 Byte statt
   157 KB. Wer ein weiteres Symbol braucht, muss die Teilmenge neu erzeugen
   (pyftsubset, siehe .ai/referenzen/stil.md). */
@font-face {
  font-family: "Font Awesome 6 Free"; font-style: normal; font-weight: 900;
  font-display: block; src: url(../webfonts/fa-teil.woff2) format("woff2");
}
.fa, .fas {
  font-family: "Font Awesome 6 Free"; font-weight: 900; font-style: normal;
  display: inline-block; line-height: 1; -webkit-font-smoothing: antialiased;
}
.fa-plus:before { content: "\2b"; }
.fa-arrow-right:before { content: "\f061"; }
.fa-angle-left:before { content: "\f104"; }
.fa-angle-right:before { content: "\f105"; }

/* ==========================================================================
   Mauz Bau – Design-System
   Farben und Typografie aus dem bestehenden Auftritt (Template "magnin")
   ========================================================================== */

:root {
  /* Marke */
  --gelb:        #f6d523;
  --gelb-hell:   #ffed00;
  --gelb-dunkel: #d9ba0a;
  --blau:        #242e47;
  --blau-tief:   #151a25;

  /* Flächen */
  --weiss:       #ffffff;
  --grau-hell:   #f9f9f9;
  --grau-linie:  #e6e6e8;
  --grau-text:   #525252;

  /* Typografie */
  --font-headline: "Prompt", "Trebuchet MS", sans-serif;
  --font-text:     "Rubik", "Helvetica Neue", Arial, sans-serif;

  /* Maße */
  --breite:      1140px;   /* wie das Raster des Originals */
  --breite-text: 68ch;
  --header-h:    100px;
  --radius:      2px;

  /* Rhythmus */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: 4rem;
  --s6: 6rem;
}

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

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

body {
  margin: 0;
  background: var(--weiss);
  color: var(--blau);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.75;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--s2);
  color: var(--blau);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.25rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.625rem); }
h4 { font-size: 1.125rem; }

p { margin: 0 0 var(--s2); max-width: var(--breite-text); }

a { color: var(--blau); text-decoration-color: var(--gelb); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover, a:focus-visible { color: var(--blau-tief); text-decoration-color: var(--blau); }

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

strong, b { font-weight: 600; }

ul, ol { padding-left: 1.25em; margin: 0 0 var(--s2); max-width: var(--breite-text); }
li { margin-bottom: 0.35em; }

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

hr { border: 0; border-top: 1px solid var(--grau-linie); margin: var(--s4) 0; }

/* Kicker – die kleine Zeile über einer Überschrift */
.kicker {
  font-family: var(--font-headline);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grau-text);
  margin: 0 0 var(--s1);
  display: block;
}
.kicker--auf-dunkel { color: var(--gelb); }

/* Der gelbe Balken unter Abschnittsüberschriften */
.balken::after {
  content: "";
  display: block;
  width: 68px;
  height: 5px;
  background: var(--gelb);
  margin-top: var(--s2);
}
.balken--zentriert::after { margin-left: auto; margin-right: auto; }

.lead { font-size: clamp(1.125rem, 1.8vw, 1.375rem); line-height: 1.55; font-weight: 300; }

/* --- Layout -------------------------------------------------------------- */

.container {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
}

.abschnitt { padding-block: var(--s6); }
.abschnitt--schmal { padding-block: var(--s5); }
.abschnitt--grau { background: var(--grau-hell); }
.abschnitt--dunkel { background: var(--blau-tief); color: var(--weiss); }
.abschnitt--dunkel h1, .abschnitt--dunkel h2, .abschnitt--dunkel h3 { color: var(--weiss); }
/* Schaltflächen ausnehmen – sonst überschreibt die Linkfarbe die Knopfschrift
   und Gelb steht auf Gelb. */
.abschnitt--dunkel a:not(.knopf) { color: var(--gelb); text-decoration-color: var(--gelb); }

.raster { display: grid; gap: var(--s4); }
@media (min-width: 700px)  { .raster--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .raster--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .raster--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px)  { .raster--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .raster--4 { grid-template-columns: repeat(4, 1fr); } }

.zwei-spalten { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 900px) { .zwei-spalten { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .zwei-spalten--bild-rechts > :first-child { order: -1; } }

.mittig { text-align: center; }
.mittig p, .mittig ul { margin-inline: auto; }

/* --- Sprungmarke für Tastatur -------------------------------------------- */

.skip-link {
  position: absolute; left: -9999px;
  background: var(--gelb); color: var(--blau);
  padding: var(--s2) var(--s3); z-index: 200; font-weight: 600;
}
.skip-link:focus { left: var(--s2); top: var(--s2); }

/* --- Kopfbereich --------------------------------------------------------- */

.kopf {
  position: sticky; top: 0; z-index: 100;
  background: var(--blau-tief);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);   /* wie im Original, ohne Trennlinie */
}
.kopf__inner {
  display: flex; align-items: center; justify-content: flex-start;
  min-height: var(--header-h);
  padding-inline: 15px;   /* wie im Original: Inhalt beginnt 15px im Raster */
}
/* Im Original hat das Menü einen festen Abstand von 90px zum Logo und der
   Burger sitzt am rechten Rand – nicht gleichmässig verteilt. */
.kopf__inner .nav { margin-left: 90px; margin-right: auto; }
/* Logo immer 55px hoch; unter 992px liefert <picture> wie im Original die
   PNG-Fassung (schmaler, 185px), darueber das SVG (192px). */
.kopf__logo { display: block; }
.kopf__logo img { display: block; height: 55px; width: auto; }

/* Rasterbreite der Kopfleiste wie im Original: Bootstrap-Container-Stufen,
   darunter volle Breite. Das Menue gibt es erst ab 1200px, sonst Burger. */
.kopf__inner.container { width: 100%; }
@media (min-width: 576px)  { .kopf__inner.container { max-width: 540px; } }
@media (min-width: 768px)  { .kopf__inner.container { max-width: 720px; } }
@media (min-width: 992px)  { .kopf__inner.container { max-width: 960px; } }
@media (min-width: 1200px) { .kopf__inner.container { max-width: 1140px; } }

/* Menü – Werte am Original gemessen: Rubik 16px/500, ohne Sperrung,
   34px Abstand, bei Punkten mit Untermenü zusätzlich Platz für den Pfeil. */
.nav ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.nav > ul { display: flex; gap: 34px; align-items: center; }
.nav li { margin: 0; position: relative; }
.nav a {
  color: var(--weiss); text-decoration: none;
  font-family: var(--font-text); font-weight: 500;
  font-size: 1rem; letter-spacing: normal; text-transform: uppercase;
  padding: var(--s2) 0; display: block; white-space: nowrap;
}
/* Der aktuelle Menuepunkt bleibt wie im Original weiss – gelb nur beim Zeigen. */
.nav a:hover, .nav a:focus-visible { color: var(--gelb); }

/* Aufklapp-Pfeil, rein aus Rahmen gezeichnet – keine Symbolschrift nötig.
   Der Pfeil hängt am <li>, nicht am <a>: im Original zählt er nicht zur
   Linkbreite, sonst verschieben sich alle folgenden Menüpunkte. */
.nav > ul > li.hat-unter { padding-right: 18px; }
.nav > ul > li.hat-unter::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 12px;
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  color: var(--weiss); line-height: 1; pointer-events: none;
}
.nav > ul > li.hat-unter:hover::after { color: var(--gelb); }

/* Ausklappmenü – öffnet nach unten unter dem jeweiligen Menüpunkt */
.nav ul.nav__unter {
  display: none;
  position: absolute; top: 100%; left: calc(-1 * var(--s2)); min-width: 260px;
  background: var(--blau); padding: var(--s2) 0;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
}
.nav__unter li { display: block; }
.nav__unter a { padding: 0.55rem var(--s3); letter-spacing: 0.06em; font-size: 0.8125rem; }
.nav li:hover > ul.nav__unter,
.nav li:focus-within > ul.nav__unter { display: block; }

/* Burger rechts – zwei Balken, 25 x 15, wie im Original */
.burger {
  background: none; border: 0; cursor: pointer; padding: 0;
  width: 37px; height: 15px; display: flex; flex-direction: column;
  justify-content: space-between; flex: none;
  margin-right: -12px;   /* Original: Balken bei x=1330, 37px breit */
}
.burger span { display: block; height: 5px; width: 100%; background: var(--weiss); transition: transform 0.22s, opacity 0.18s; }
.burger:hover span, .burger:focus-visible span { background: var(--gelb); }
.burger.ist-offen span:first-child { transform: translateY(5px) rotate(45deg); }
.burger.ist-offen span:last-child { transform: translateY(-5px) rotate(-45deg); }

/* Schubfach hinter dem Burger */
.panel { position: fixed; inset: 0; z-index: 150; background: rgba(11, 14, 20, 0.75); }
.panel[hidden] { display: none; }
.panel__innen {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 88vw); background: var(--blau-tief); color: var(--weiss);
  padding: calc(var(--header-h) + var(--s3)) var(--s4) var(--s4);
  overflow-y: auto;
}
body.panel-offen { overflow: hidden; }

.panel__menue { list-style: none; padding: 0; margin: 0; max-width: none; }
.panel__menue > li { margin-bottom: var(--s2); }
.panel__menue a {
  color: var(--weiss); text-decoration: none; display: block;
  font-family: var(--font-headline); font-weight: 600;
  font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.35rem 0;
}
.panel__menue a:hover, .panel__menue a:focus-visible { color: var(--gelb); }
.panel__menue ul { list-style: none; padding: 0 0 0 var(--s2); margin: 0.25rem 0 0; max-width: none; }
.panel__menue ul a { font-size: 0.9375rem; font-weight: 400; text-transform: none; letter-spacing: normal; color: rgba(255, 255, 255, 0.8); }

.panel__kontakt { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid rgba(255, 255, 255, 0.15); }
.panel__kontakt h2 { color: var(--gelb); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; }
.panel__kontakt a { color: var(--weiss); }

@media (max-width: 1199.98px) {
  .nav { display: none; }
  /* Ohne Menue fehlt der Abstandshalter – sonst klebt der Burger am Logo. */
  .burger { margin-left: auto; }
}
/* Unter 576px sitzt der Burger im Original 15px weiter innen. */
@media (max-width: 575.98px) {
  .burger { margin-right: 3px; }
}

/* --- Bühne (Hero) -------------------------------------------------------- */

.buehne { position: relative; background: var(--blau-tief); color: var(--weiss); overflow: hidden; }
.buehne__bild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.5;
}
.buehne__inner { position: relative; padding-block: clamp(5rem, 14vw, 10rem); }
.buehne h1 { color: var(--weiss); max-width: 20ch; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); }
.buehne p { color: rgba(255, 255, 255, 0.92); max-width: 56ch; }
.buehne--klein .buehne__inner { padding-block: clamp(3.5rem, 9vw, 6rem); }

/* --- Schaltflächen ------------------------------------------------------- */

.knopf {
  display: inline-block; text-decoration: none;
  font-family: var(--font-headline); font-weight: 600;
  font-size: 0.875rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.95rem 2rem; border: 2px solid var(--blau); color: var(--blau);
  background: transparent; cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.knopf:hover, .knopf:focus-visible { background: var(--gelb); border-color: var(--gelb); color: var(--blau); }
.knopf--gefuellt { background: var(--gelb); border-color: var(--gelb); color: var(--blau); }
.knopf--gefuellt:hover, .knopf--gefuellt:focus-visible { background: var(--weiss); border-color: var(--weiss); color: var(--blau); }
.knopf--hell { border-color: var(--weiss); color: var(--weiss); }
.knopf--hell:hover, .knopf--hell:focus-visible { background: var(--gelb); border-color: var(--gelb); color: var(--blau); }

.knopf-reihe { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }

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

.karte {
  background: var(--weiss); border: 1px solid var(--grau-linie);
  display: flex; flex-direction: column; height: 100%;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.karte:hover { border-color: var(--gelb); transform: translateY(-4px); box-shadow: 0 14px 34px rgba(36, 46, 71, 0.1); }
.karte__bild { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.karte__text { padding: var(--s3); display: flex; flex-direction: column; flex: 1; }
.karte h3 { margin-bottom: var(--s1); }
.karte h3 a { text-decoration: none; }
.karte h3 a::after { content: ""; position: absolute; inset: 0; }
.karte p { flex: 1; font-size: 0.9375rem; }
.karte { position: relative; }
.karte__mehr { font-family: var(--font-headline); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; margin-top: var(--s2); }

/* --- Bildergalerie ------------------------------------------------------- */

.galerie { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.galerie figure { margin: 0; position: relative; background: var(--blau-tief); }
.galerie img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; transition: opacity 0.25s, transform 0.4s; }
.galerie figure:hover img { opacity: 0.72; transform: scale(1.03); }
.galerie figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(21, 26, 37, 0.92) 0%, rgba(21, 26, 37, 0) 100%);
  color: var(--weiss); padding: var(--s4) var(--s2) var(--s2);
  font-family: var(--font-headline); font-weight: 500; font-size: 0.9375rem;
}

/* --- Bildvergrößerung ---------------------------------------------------- */

.ist-vergroesserbar { cursor: zoom-in; }
.ist-vergroesserbar:focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; }

.galerie figure.ist-vergroesserbar::after {
  content: "⤢";
  position: absolute; top: var(--s2); right: var(--s2);
  width: 34px; height: 34px; display: grid; place-items: center;
  background: rgba(21, 26, 37, 0.78); color: var(--gelb);
  font-size: 1rem; opacity: 0; transition: opacity 0.18s;
}
.galerie figure.ist-vergroesserbar:hover::after,
.galerie figure.ist-vergroesserbar:focus-visible::after { opacity: 1; }

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(11, 14, 20, 0.94);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[hidden] { display: none; }

.lightbox__inhalt {
  margin: 0; max-width: 100%; max-height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
}
.lightbox__inhalt img {
  max-width: min(1400px, 92vw); max-height: 82vh;
  width: auto; height: auto; object-fit: contain;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}
.lightbox figcaption {
  color: #fff; font-family: var(--font-headline); font-size: 0.9375rem;
  text-align: center; max-width: 60ch;
}
.lightbox__zaehler { color: rgba(255, 255, 255, 0.55); margin-left: 0.5rem; }

.lightbox__zu, .lightbox__pfeil {
  position: absolute; background: rgba(255, 255, 255, 0.1); border: 0;
  color: #fff; cursor: pointer; line-height: 1;
  display: grid; place-items: center; transition: background 0.18s, color 0.18s;
}
.lightbox__zu {
  top: 1rem; right: 1rem; width: 48px; height: 48px; font-size: 2rem;
}
.lightbox__pfeil {
  top: 50%; transform: translateY(-50%); width: 54px; height: 76px; font-size: 2.5rem;
}
.lightbox__pfeil--vor { left: 1rem; }
.lightbox__pfeil--nach { right: 1rem; }
.lightbox__zu:hover, .lightbox__pfeil:hover,
.lightbox__zu:focus-visible, .lightbox__pfeil:focus-visible {
  background: var(--gelb); color: var(--blau);
}
.lightbox__pfeil[hidden] { display: none; }

@media (max-width: 600px) {
  .lightbox__pfeil { width: 42px; height: 60px; font-size: 2rem; }
  .lightbox__pfeil--vor { left: 0.25rem; }
  .lightbox__pfeil--nach { right: 0.25rem; }
}

/* --- Leistungsliste ------------------------------------------------------ */

.leistungsliste { list-style: none; padding: 0; max-width: none; column-gap: var(--s4); }
@media (min-width: 700px) { .leistungsliste { columns: 2; } }
.leistungsliste li {
  padding-left: 1.9rem; position: relative; margin-bottom: 0.6em; break-inside: avoid;
}
.leistungsliste li::before {
  content: ""; position: absolute; left: 0; top: 0.65em;
  width: 12px; height: 12px; background: var(--gelb);
}

/* --- Kennzahlen ---------------------------------------------------------- */

.kennzahlen { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); text-align: center; }
/* Gelb auf Weiss ergäbe nur 1,5:1. Zahl dunkel, gelber Strich als Akzent. */
.kennzahl__wert {
  font-family: var(--font-headline); font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 700; line-height: 1; color: var(--blau);
  padding-bottom: var(--s1); margin: 0;
}
.kennzahl__wert::after {
  content: ""; display: block; width: 44px; height: 5px;
  background: var(--gelb); margin: var(--s1) auto 0;
}
.kennzahl__text { font-size: 0.9375rem; margin: var(--s1) 0 0; }
.abschnitt--dunkel .kennzahl__wert { color: var(--gelb); }
.abschnitt--dunkel .kennzahl__wert::after { background: var(--weiss); }

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

.faq { max-width: 900px; }
.faq details { border-bottom: 1px solid var(--grau-linie); }
.faq summary {
  font-family: var(--font-headline); font-weight: 600; font-size: 1.0625rem;
  padding: var(--s3) 2.5rem var(--s3) 0; cursor: pointer; position: relative; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 1.75rem; font-weight: 300; color: var(--gelb); line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding-bottom: var(--s3); }
.faq details > div > p:last-child { margin-bottom: 0; }

/* --- Brotkrumen ---------------------------------------------------------- */

.brotkrumen { background: var(--grau-hell); border-bottom: 1px solid var(--grau-linie); font-size: 0.8125rem; }
.brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0.85rem 0; max-width: none; }
.brotkrumen li { margin: 0; }
.brotkrumen li + li::before { content: "›"; margin-right: 0.5rem; color: var(--grau-text); }
.brotkrumen a { color: var(--grau-text); text-decoration: none; }
.brotkrumen a:hover { color: var(--blau); text-decoration: underline; }
.brotkrumen [aria-current="page"] { color: var(--blau); font-weight: 500; }

/* --- Kontaktangaben ------------------------------------------------------ */

.kontaktliste { list-style: none; padding: 0; max-width: none; }
.kontaktliste li { display: flex; gap: var(--s2); margin-bottom: var(--s2); }
.kontaktliste dt, .kontaktliste .bezeichnung {
  font-family: var(--font-headline); font-weight: 600; font-size: 0.75rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--grau-text);
  min-width: 7.5rem;
}

/* --- Formulare ----------------------------------------------------------- */

.formular { max-width: 720px; }
.feld { margin-bottom: var(--s3); }
.feld label { display: block; font-family: var(--font-headline); font-weight: 500; font-size: 0.875rem; margin-bottom: 0.4rem; }
.feld input, .feld textarea, .feld select {
  width: 100%; font: inherit; color: var(--blau);
  background: var(--weiss); border: 1px solid var(--grau-text);
  padding: 0.75rem var(--s2); border-radius: var(--radius);
}
.feld input:focus, .feld textarea:focus, .feld select:focus { border-color: var(--blau); outline: 3px solid rgba(36, 46, 71, 0.15); outline-offset: 0; }
.feld--pflicht label::after { content: " *"; color: #b3261e; }
.feld__hinweis { font-size: 0.8125rem; color: var(--grau-text); margin: 0.35rem 0 0; }
.feld--check { display: flex; gap: 0.75rem; align-items: flex-start; }
.feld--check input { width: auto; margin-top: 0.35rem; }
.feld--check label { font-weight: 300; font-family: var(--font-text); font-size: 0.9375rem; }

/* --- Auszeichnung -------------------------------------------------------- */

.siegel { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.siegel img { max-height: 110px; width: auto; }

/* --- Abschlussblock vor dem Fuß ------------------------------------------ */

.cta { background: var(--weiss); padding-block: var(--s5); }
.cta__inner { display: grid; gap: var(--s4); align-items: center; }
@media (min-width: 900px) { .cta__inner { grid-template-columns: 1fr auto; } }

.cta__titel { font-size: clamp(2rem, 4.6vw, 3.5rem); font-weight: 300; margin-bottom: var(--s2); }
.cta__titel strong { font-weight: 700; }
.cta__text { font-size: clamp(1.125rem, 1.8vw, 1.375rem); color: var(--grau-text); margin: 0; }

.cta__aktion { margin: 0; display: flex; flex-direction: column; gap: var(--s1); align-items: flex-start; }
@media (min-width: 900px) { .cta__aktion { align-items: flex-end; } }

/* Im Original steht dieser Link in Gelb auf Weiss – das ergibt nur 1,9:1 und
   ist kaum lesbar. Gleiche Wirkung, aber lesbar: dunkler Text, gelber Pfeil
   und gelbe Unterstreichung. */
.cta__link {
  font-family: var(--font-headline); font-weight: 700;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.1;
  color: var(--blau); text-decoration: none; white-space: nowrap;
  border-bottom: 5px solid var(--gelb); padding-bottom: 0.15em;
}
.cta__link span { display: inline-block; transition: transform 0.2s; color: var(--gelb-dunkel); }
.cta__link:hover, .cta__link:focus-visible { color: var(--blau-tief); border-bottom-color: var(--blau); }
.cta__link:hover span { transform: translate(4px, -4px); }
.cta__tel { font-size: 0.9375rem; color: var(--grau-text); text-decoration-color: var(--gelb); }

/* --- Fußbereich wie im Original ----------------------------------------- */
/* Regeln per DevTools am alten Auftritt abgenommen (alle Breiten, Hover)    */
/* und auf .fuss-original begrenzt. Markup in _teile/fuss.php trägt dazu    */
/* die alten Kennungen – beides nur gemeinsam ändern.                        */

.fuss-original { font-family: Rubik, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.5; color: rgb(36, 46, 71); letter-spacing: normal; -webkit-font-smoothing: antialiased; text-align: start; }
.fuss-original *, .fuss-original ::after, .fuss-original ::before { box-sizing: border-box }
.fuss-original #sp-footer { font-size: 14px; padding: 0 }
.fuss-original #sp-footer, .fuss-original #sp-bottom { background: #fff; color: #242e47 }
.fuss-original #sp-footer { background-color: #FFED00 }
.fuss-original .container, .fuss-original .container-fluid, .fuss-original .container-lg, .fuss-original .container-md, .fuss-original .container-sm, .fuss-original .container-xl, .fuss-original .container-xxl { width: 100%; padding-right: var(--bs-gutter-x,.75rem); padding-left: var(--bs-gutter-x,.75rem); margin-right: auto; margin-left: auto }
@media (min-width: 576px) { .fuss-original .container, .fuss-original .container-sm { max-width: 540px } }
@media (min-width: 768px) { .fuss-original .container, .fuss-original .container-md, .fuss-original .container-sm { max-width: 720px } }
@media (min-width: 992px) { .fuss-original .container, .fuss-original .container-lg, .fuss-original .container-md, .fuss-original .container-sm { max-width: 960px } }
@media (min-width: 1200px) { .fuss-original .container, .fuss-original .container-lg, .fuss-original .container-md, .fuss-original .container-sm, .fuss-original .container-xl { max-width: 1140px } }
@media (min-width: 1400px) { .fuss-original .container, .fuss-original .container-lg, .fuss-original .container-md, .fuss-original .container-sm, .fuss-original .container-xl, .fuss-original .container-xxl { max-width: 1320px } }
.fuss-original .container { padding-left: 15px; padding-right: 15px }
@media (min-width: 1200px) { .fuss-original .container { max-width: 1140px } }
.fuss-original #sp-footer .container-inner { padding: 30px 0 }
.fuss-original .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; display: flex; flex-wrap: wrap; margin-top: calc(var(--bs-gutter-y) * -1); margin-right: calc(var(--bs-gutter-x) * -.5); margin-left: calc(var(--bs-gutter-x) * -.5) }
.fuss-original .row { --bs-gutter-x: 1.875rem }
.fuss-original .row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); margin-top: var(--bs-gutter-y) }
@media (min-width: 768px) { .fuss-original .col-md-7 { flex: 0 0 auto; width: 58.33333333% } }
@media (min-width: 992px) { .fuss-original .col-lg-5 { flex: 0 0 auto; width: 41.66666667% } }
.fuss-original #sp-page-builder .page-content .sppb-section, .fuss-original #sp-page-builder .sppb-section, .fuss-original .mod-sppagebuilder .sppb-section { z-index: 1; position: relative }
.fuss-original .sp-page-builder .page-content #section-id-1634211885929 { box-shadow: 0 0 0 0 #ffffff }
.fuss-original .sp-page-builder .page-content #section-id-1634211885929 { padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-radius: 0px }
.fuss-original .sp-pagebuilder-section-inner .sppb-row, .fuss-original .sppb-container-inner, .fuss-original .sppb-row-container { position: relative; z-index: 3 }
.fuss-original .sppb-row-container { width: 100%; margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px }
@media (min-width: 576px) { .fuss-original .sppb-row-container { max-width: 540px } }
@media (min-width: 768px) { .fuss-original .sppb-row-container { max-width: 720px } }
@media (min-width: 992px) { .fuss-original .sppb-row-container { max-width: 960px } }
@media (min-width: 1200px) { .fuss-original .sppb-row-container { max-width: 1140px } }
@media (min-width: 1400px) { .fuss-original .sppb-row-container { max-width: 1320px } }
.fuss-original .sp-pagebuilder-row, .fuss-original .sppb-row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px }
.fuss-original .sppb-col, .fuss-original .sppb-col-auto, .fuss-original .sppb-col-lg, .fuss-original .sppb-col-lg-1, .fuss-original .sppb-col-lg-10, .fuss-original .sppb-col-lg-11, .fuss-original .sppb-col-lg-12, .fuss-original .sppb-col-lg-2, .fuss-original .sppb-col-lg-3, .fuss-original .sppb-col-lg-4, .fuss-original .sppb-col-lg-5, .fuss-original .sppb-col-lg-6, .fuss-original .sppb-col-lg-7, .fuss-original .sppb-col-lg-8, .fuss-original .sppb-col-lg-9, .fuss-original .sppb-col-lg-auto, .fuss-original .sppb-col-md, .fuss-original .sppb-col-md-1, .fuss-original .sppb-col-md-10, .fuss-original .sppb-col-md-11, .fuss-original .sppb-col-md-12, .fuss-original .sppb-col-md-2, .fuss-original .sppb-col-md-3, .fuss-original .sppb-col-md-4, .fuss-original .sppb-col-md-5, .fuss-original .sppb-col-md-6, .fuss-original .sppb-col-md-7, .fuss-original .sppb-col-md-8, .fuss-original .sppb-col-md-9, .fuss-original .sppb-col-md-auto, .fuss-original .sppb-col-sm, .fuss-original .sppb-col-sm-1, .fuss-original .sppb-col-sm-10, .fuss-original .sppb-col-sm-11, .fuss-original .sppb-col-sm-12, .fuss-original .sppb-col-sm-2, .fuss-original .sppb-col-sm-3, .fuss-original .sppb-col-sm-4, .fuss-original .sppb-col-sm-5, .fuss-original .sppb-col-sm-6, .fuss-original .sppb-col-sm-7, .fuss-original .sppb-col-sm-8, .fuss-original .sppb-col-sm-9, .fuss-original .sppb-col-sm-auto, .fuss-original .sppb-col-xl, .fuss-original .sppb-col-xl-1, .fuss-original .sppb-col-xl-10, .fuss-original .sppb-col-xl-11, .fuss-original .sppb-col-xl-12, .fuss-original .sppb-col-xl-2, .fuss-original .sppb-col-xl-3, .fuss-original .sppb-col-xl-4, .fuss-original .sppb-col-xl-5, .fuss-original .sppb-col-xl-6, .fuss-original .sppb-col-xl-7, .fuss-original .sppb-col-xl-8, .fuss-original .sppb-col-xl-9, .fuss-original .sppb-col-xl-auto, .fuss-original .sppb-col-xs-1, .fuss-original .sppb-col-xs-10, .fuss-original .sppb-col-xs-11, .fuss-original .sppb-col-xs-12, .fuss-original .sppb-col-xs-2, .fuss-original .sppb-col-xs-3, .fuss-original .sppb-col-xs-4, .fuss-original .sppb-col-xs-5, .fuss-original .sppb-col-xs-6, .fuss-original .sppb-col-xs-7, .fuss-original .sppb-col-xs-8, .fuss-original .sppb-col-xs-9, .fuss-original .sppb-row-column { position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px }
@media (min-width: 992px) { .fuss-original .sppb-col-md-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } }
.fuss-original #column-wrap-id-1634211885928 { max-width: 100%; flex-basis: 100% }
.fuss-original .sppb-column, .fuss-original .sppb-column-addons { position: relative; z-index: 1; width: 100% }
.fuss-original .sppb-column { width: 100%; height: 100%; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap }
.fuss-original #column-id-1634211885928 { border-radius: 0px }
.fuss-original #sppb-addon-wrapper-1634211885932 { margin-top: 0px; margin-right: 0px; margin-bottom: 30px; margin-left: 0px }
.fuss-original #sppb-addon-1634211885932 { box-shadow: 0 0 0 0 #ffffff }
.fuss-original #sppb-addon-1634211885932 { border-radius: 0px }
.fuss-original #sppb-addon-1634211885932 { text-align: left }
.fuss-original .sppb-addon-single-image-container { display: inline-block; position: relative; transition: all .4s ease }
.fuss-original #sppb-addon-1634211885932 .sppb-addon-single-image-container { border-radius: 0px }
.fuss-original img { vertical-align: middle }
.fuss-original img, .fuss-original svg { vertical-align: middle }
.fuss-original img { display: block; max-width: 100%; height: auto }
.fuss-original .sppb-carousel-inner > .sppb-item > a > img, .fuss-original .sppb-carousel-inner > .sppb-item > img, .fuss-original .sppb-img-responsive { display: block; max-width: 100%; height: auto }
.fuss-original .sppb-addon-single-image .sppb-img-responsive, .fuss-original .sppb-text-center .sppb-img-responsive, .fuss-original .sppb-text-left .sppb-img-responsive, .fuss-original .sppb-text-right .sppb-img-responsive { display: inline-block }
.fuss-original #sppb-addon-1634211885932 img { width: 261px; max-width: 261px }
.fuss-original #sppb-addon-1634211885932 .sppb-addon-single-image-container img { border-radius: 0px }
.fuss-original p { margin-top: 0; margin-bottom: 1rem }
.fuss-original .sp-copyright { display: block; text-align: right; font-size: 16px; color: #969696; margin: 0px 0px 0px -100px; display: flex; justify-content: flex-end; flex-wrap: wrap; font-weight: normal }
@media (min-width: 768px) { .fuss-original .col-md-5 { flex: 0 0 auto; width: 41.66666667% } }
@media (min-width: 992px) { .fuss-original .col-lg-4 { flex: 0 0 auto; width: 33.33333333% } }
.fuss-original #sp-footer #sp-footer2 { text-align: right }
.fuss-original .sp-page-builder .page-content #section-id-1647867390673 { box-shadow: 0 0 0 0 #ffffff }
.fuss-original .sp-page-builder .page-content #section-id-1647867390673 { padding-top: 50px; padding-right: 0px; padding-bottom: 50px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-radius: 0px }
.fuss-original #column-wrap-id-1647867390672 { max-width: 100%; flex-basis: 100% }
.fuss-original #column-id-1647867390672 { border-radius: 0px }
.fuss-original #sppb-addon-wrapper-1647870058960 { margin-top: 0px; margin-right: 0px; margin-bottom: 30px; margin-left: 0px }
.fuss-original #sppb-addon-1647870058960 { box-shadow: 0 0 0 0 #ffffff }
.fuss-original #sppb-addon-1647870058960 { border-radius: 0px }
.fuss-original #sppb-addon-1647870058960 .sppb-addon-text-block { text-align: left }
.fuss-original b, .fuss-original strong { font-weight: bolder }
@media (min-width: 992px) { .fuss-original .col-lg-3 { flex: 0 0 auto; width: 25% } }
.fuss-original .sp-page-builder .page-content #section-id-1647938045577 { box-shadow: 0 0 0 0 #ffffff }
.fuss-original .sp-page-builder .page-content #section-id-1647938045577 { padding-top: 50px; padding-right: 0px; padding-bottom: 50px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-radius: 0px }
.fuss-original #column-wrap-id-1647938045576 { max-width: 100%; flex-basis: 100% }
.fuss-original #column-id-1647938045576 { border-radius: 0px }
.fuss-original #sppb-addon-wrapper-1647938045580 { margin-top: 0px; margin-right: 30px; margin-bottom: 0px; margin-left: 30px }
.fuss-original #sppb-addon-1647938045580 { box-shadow: 0 0 0 0 #ffffff }
.fuss-original #sppb-addon-1647938045580 { border-radius: 0px }
.fuss-original a { transition: color 400ms,background-color 400ms }
.fuss-original a, .fuss-original a:hover, .fuss-original a:focus, .fuss-original a:active { text-decoration: none }
.fuss-original a { color: #f6d523 }
.fuss-original #sp-footer a, .fuss-original #sp-bottom a { color: #242e47 }
.fuss-original a:hover, .fuss-original a:focus, .fuss-original a:active { color: #f6d523 }
.fuss-original #sp-footer a:hover, .fuss-original #sp-footer a:active, .fuss-original #sp-footer a:focus, .fuss-original #sp-bottom a:hover, .fuss-original #sp-bottom a:active, .fuss-original #sp-bottom a:focus { text-decoration: underline }
@media (max-width: 1199.98px) { .fuss-original #column-wrap-id-1634211885928 { max-width: 100%; flex-basis: 100% } }
@media (max-width: 1199.98px) { .fuss-original #column-wrap-id-1647867390672 { max-width: 100%; flex-basis: 100% } }
@media (max-width: 1199.98px) { .fuss-original #column-wrap-id-1647938045576 { max-width: 100%; flex-basis: 100% } }
@media (max-width: 991.98px) { .fuss-original #column-wrap-id-1634211885928 { max-width: 100%; flex-basis: 100% } }
@media (max-width: 991px) { .fuss-original .sp-copyright { text-align: left; margin: 0px 0px 0px 0px; justify-content: flex-start } }
@media (max-width: 991.98px) { .fuss-original #column-wrap-id-1647867390672 { max-width: 100%; flex-basis: 100% } }
@media (max-width: 991.98px) { .fuss-original #column-wrap-id-1647938045576 { max-width: 100%; flex-basis: 100% } }
@media (max-width: 767.98px) { .fuss-original #column-wrap-id-1634211885928 { max-width: 100%; flex-basis: 100% } }
@media (max-width: 767.98px) { .fuss-original #column-wrap-id-1647867390672 { max-width: 100%; flex-basis: 100% } }
@media (max-width: 767.98px) { .fuss-original #column-wrap-id-1647938045576 { max-width: 100%; flex-basis: 100% } }
@media (max-width: 575.98px) { .fuss-original #column-wrap-id-1634211885928 { max-width: 100%; flex-basis: 100% } }
@media (max-width: 575.98px) { .fuss-original #column-wrap-id-1647867390672 { max-width: 100%; flex-basis: 100% } }
@media (max-width: 575.98px) { .fuss-original #column-wrap-id-1647938045576 { max-width: 100%; flex-basis: 100% } }

/* Seiten, deren Fuß im Original in einem ungeschlossenen <strong> steckt */
.fuss-original--fett > #sp-footer { font-weight: bolder; }

/* --- Hinweisbox ---------------------------------------------------------- */

.hinweis {
  border-left: 5px solid var(--gelb); background: var(--grau-hell);
  padding: var(--s3); margin-bottom: var(--s3);
}
.hinweis > :last-child { margin-bottom: 0; }

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

.rechtstext h2 { font-size: 1.5rem; margin-top: var(--s4); }
.rechtstext h3 { font-size: 1.1875rem; margin-top: var(--s3); }
.rechtstext p, .rechtstext li { font-size: 0.9375rem; }

/* ==========================================================================
   Effekte des übernommenen Inhalts – ersetzt den jQuery-Satz des Page Builders
   ========================================================================== */

/* --- Rasterbreite des uebernommenen Markups -------------------------------- */
/* Das alte Template staffelt .sppb-row-container nach Bootstrap-Art bis
   1320px. Aus den Quelldateien kam beim Extrahieren nur die 576px-Stufe mit,
   dadurch blieben die Galerien bei 1140 statt 1320 – gemessen an den Kacheln:
   263x181 statt 330x224. Hier die vollstaendige Staffelung.                  */

.hero-original .sppb-row-container,
.hero-original .container {
  width: 100%;
  max-width: none;
  margin-inline: auto;
}
@media (min-width: 576px) {
  .hero-original .sppb-row-container,
  .hero-original .container { max-width: 540px; }
}
@media (min-width: 768px) {
  .hero-original .sppb-row-container,
  .hero-original .container { max-width: 720px; }
}
@media (min-width: 992px) {
  .hero-original .sppb-row-container,
  .hero-original .container { max-width: 960px; }
}
@media (min-width: 1200px) {
  .hero-original .sppb-row-container,
  .hero-original .container { max-width: 1140px; }
}
@media (min-width: 1400px) {
  .hero-original .sppb-row-container,
  .hero-original .container { max-width: 1320px; }
}
/* Einzelne Sektionen weichen bewusst ab – diese Vorgaben nicht ueberschreiben.
   Im Original gilt die Sonderbreite nur ab 1400px, darunter die Stufenleiter. */
@media (min-width: 1400px) {
  .hero-original #section-id-1637661020148 > .sppb-row-container { max-width: 1545px; }
}

/* --- Abschirmung des uebernommenen Bereichs --------------------------------- */
/* Stellt genau die Eigenschaften auf Browser-Standard zurueck, die meine
   Grundregeln oben setzen, das alte Template aber nie gesetzt hat. Alles,
   was das Original selbst regelt, kommt aus hero.css bzw. assets/css/seiten/
   mit hoeherer Spezifitaet. (hero.css hat fuer ihre Seiten eine eigene,
   gemessene Fassung, die spaeter geladen wird und hier vorgeht.)           */
.hero-original { overflow-x: clip; }
.hero-original h1, .hero-original h2, .hero-original h3,
.hero-original h4, .hero-original h5, .hero-original h6 { letter-spacing: normal; }
.hero-original p, .hero-original ul, .hero-original ol { max-width: none; }
.hero-original li { margin-bottom: 0; }
.hero-original img { display: inline; max-width: none; }
.hero-original a { text-decoration-color: currentcolor; text-underline-offset: auto; text-decoration-thickness: auto; }

/* --- Farbvariablen des alten Templates --------------------------------------- */
/* hero.css greift an 45 Stellen auf diese Variablen zu (Hintergruende der
   hellgrauen Abschnitte, Nebentextfarbe). Ohne Definition fallen die Regeln
   still aus – dann wird #f9f9f9 zu Weiss. Werte am Original abgenommen.     */

.hero-original {
  --bg-color: #ffffff;
  --link-color: #f6d523;
  --secondary-text-color: #525252;
  --text-color: #242E47;
  --topbar-bg-color: #f9f9f9;
}

/* --- Bootstrap-Reste im uebernommenen Markup ------------------------------ */
/* Die Startseite enthaelt Textbausteine aus dem Vorgaenger-Auftritt mit
   Bootstrap-Raster (.row, .col-md-6) und Akkordeon-Knoepfe. Im Original
   lieferte Bootstrap 5 dafuer Raster und Reboot; ohne diese Regeln wird die
   zweispaltige Reihe einspaltig und die Knopfschrift faellt auf 13px.      */

.hero-original .row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
.hero-original .row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: 15px; padding-left: 15px; }
@media (min-width: 768px) { .hero-original .col-md-6 { flex: 0 0 auto; width: 50%; } }
.hero-original button { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
/* Bootstrap ersetzt die Clearfix des Seitenbaukastens (display:table) durch
   einen leeren Block. Der Unterschied: durch den leeren Block faellt der
   Absatzabstand des letzten <p> nach aussen und verschmilzt mit der
   Baustein-Marge – mit table bleibt er innen und alles wird 16px hoeher. */
.hero-original .clearfix::after { display: block; clear: both; content: ""; }

/* --- Grundtypografie des uebernommenen Markups ----------------------------- */
/* Der Extraktor hat reine Element-Selektoren (h1..h6) bewusst verworfen –
   dadurch griff im uebernommenen Bereich die eigene Ueberschriftenregel.
   Folge: falsche Groessen und dunkle Schrift auf dunklem Grund, etwa im
   Jobs-Block der Startseite (gemessen: 44px/#242e47 statt 60px/weiss).
   Werte am Original abgenommen; die Farbe wird geerbt, damit die
   Vorgaben der einzelnen Bausteine weiter gelten.                            */

.hero-original h1, .hero-original h2, .hero-original h3,
.hero-original h4, .hero-original h5, .hero-original h6 {
  color: inherit;
  font-family: "Prompt", sans-serif;   /* Ersatzschrift wie im Original */
  line-height: 1.25;
  letter-spacing: normal;
  margin: 0 0 8px;
}
.hero-original h2 { font-size: 60px; font-weight: 300; }
/* Herabgestufte Hauptueberschriften (eine h1 je Seite) sehen aus wie h1 */
.hero-original h1, .hero-original h2.wie-h1 { font-size: 72px; font-weight: 400; }
.hero-original h3 { font-size: 40px; font-weight: 300; }
.hero-original h4 { font-size: 32px; font-weight: 400; }
.hero-original h5 { font-size: 24px; font-weight: 400; line-height: 1.2; }
.hero-original h6 {
  font-size: 16px; font-weight: 500; line-height: 1.2;
  font-family: "Rubik", sans-serif;
}
/* Fettung im uebernommenen Bereich: wie im Original relativ zur Umgebung
   ("bolder") – 400 wird zu 700, 300 nur zu 400. */
.hero-original strong, .hero-original b { font-weight: bolder; }

/* Stufen wie im Template-CSS des Originals (Inline-Stil im Kopf); die
   Grundschrift 14px dieser Stufe steht in hero.css bei .hero-original */
@media (min-width: 768px) and (max-width: 991px) {
  .hero-original h1, .hero-original h2.wie-h1 { font-size: 56px; }
  .hero-original h2 { font-size: 44px; }
}
@media (max-width: 767px) {
  .hero-original h1, .hero-original h2.wie-h1 { font-size: 40px; }
  .hero-original h2 { font-size: 30px; }
  .hero-original h3 { font-size: 24px; }
  .hero-original h4, .hero-original h5 { font-size: 18px; }
}

/* --- Einblenden beim Scrollen -------------------------------------------- */

.hero-original .sppb-wow.wartet { opacity: 0; transform: translateY(26px); }
.hero-original .sppb-wow.animated {
  opacity: 1; transform: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* --- Portfolio-Raster ----------------------------------------------------- */
/* Im Original ordnet jquery.shuffle die Kacheln als Mauerwerk: jede Kachel
   kommt in die gerade kuerzeste Spalte. Breiten liefert spsimpleportfolio.css
   (hero.css), die Positionen setzt effekte.js (mauerwerk). Ohne Skript
   bleibt die Float-Anordnung des Originals.                                 */

.hero-original .sp-simpleportfolio-items.ist-gemauert { position: relative; }
.hero-original .sp-simpleportfolio-items.ist-gemauert > .sp-simpleportfolio-item {
  position: absolute; top: 0; left: 0; float: none;
}
.hero-original .sp-simpleportfolio-img { width: 100%; height: auto; display: block; }


/* --- Karussell ------------------------------------------------------------ */

/* Die Bahn darf den Kasten nicht aufblähen – sonst wächst er auf die Summe
   aller Elemente (gemessen: 2784px statt 1110px). */
.hero-original .sppb-carousel-extended { max-width: 100%; overflow: hidden; }

/* Einzelnes Element: kein Reigen, sondern ein Textblock mit eigener Höhe. */
.hero-original .reigen-einzeln .sppb-carousel-extended-item {
  height: auto !important; float: none !important; position: static;
}
.hero-original .reigen-einzeln .sppb-carousel-extended-content-wrap { position: static; }

/* Die Bahn liegt ausserhalb des Textflusses. Sonst wächst sie auf die Summe
   aller Elemente und zieht die ganze Elternkette mit (gemessen: 2784px).
   Die Höhe des Kastens setzt das Skript nach dem Messen. */
.hero-original .reigen { position: relative; overflow: hidden; width: 100%; }
.hero-original .reigen-bahn {
  position: absolute; top: 0; left: 0;
  display: flex; align-items: flex-start;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
/* Hoehe setzt das Skript aus data-height-* (Original: 628px), das Bild fuellt
   die Kachel vollstaendig – im Original gestreckt, nicht beschnitten. */
.hero-original .reigen .sppb-carousel-extended-item { float: none !important; }
.hero-original .reigen .sppb-carousel-extended-item > img {
  display: block; width: 100%; height: 100%; max-width: none;
}

.hero-original .reigen-pfeil {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 60px; border: 0; cursor: pointer;
  background: rgba(21, 26, 37, 0.72); color: #fff; font-size: 1.75rem; line-height: 1;
}
.hero-original .reigen-pfeil:hover { background: var(--gelb); color: var(--blau); }
.hero-original .reigen-pfeil--vor { left: 0; }
.hero-original .reigen-pfeil--nach { right: 0; }

/* --- Buehne bei mittlerer Fensterbreite ------------------------------------ */
/* Der Slider-Kasten traegt prozentuale Aussenmargen (-15% links, -40% rechts),
   damit das Bild rechts ueber die Spalte hinausragt. Von 992 bis 1199px
   schiebt die linke davon den Teaser im Original aus dem Bild (gemessen
   -40px bei 1100px). Die Geometrie bleibt hier wie im Original; nur Textblock
   und Foliennummern ruecken nach rechts, auf 35px. Beide liegen in diesem
   Bereich bei 18,7px - 5,31vw (gemessen bei 992 und 1199px), daher die
   Verschiebung um 16px + 5,31vw. Bewusst nicht bis an die Logokante: dort
   (bis 134px) liefe der Text bis zu 400px weit ueber das Foto.              */

@media (max-width: 1199.98px) and (min-width: 992px) {
  .hero-original #sppb-addon-1635486050920 .sp-slider-content-align-left,
  .hero-original #sppb-addon-1635486050920 .sp-slider-custom-dot-indecators { transform: translateX(calc(16px + 5.31vw)); }
}

/* --- Steuerpfeile des Bühnen-Sliders --------------------------------------- */
/* Die Regeln, die beide Pfeile auseinanderziehen, fehlen im uebernommenen
   CSS – ohne sie liegen sie deckungsgleich uebereinander. Werte am Original
   abgenommen: Zurueck rechtsbuendig, Vorwaerts linksbuendig am nullbreiten
   Steuerkasten, dadurch stehen sie nebeneinander.                            */

.hero-original .sp-nav-control .prev-control { left: unset; right: 0; }
.hero-original .sp-nav-control .next-control { right: unset; left: 0; }
.hero-original .sp-nav-control .nav-control { cursor: pointer; }
.hero-original .sp-nav-control .nav-control:hover,
.hero-original .sp-nav-control .nav-control:focus-visible {
  background: var(--gelb-hell);
  color: var(--blau);
}

/* --- Bühnen-Slider -------------------------------------------------------- */
/* Überblendung statt Verschiebung – wie im Original (data-slider-animation).  */

.hero-original .sp-slider-outer-stage { position: relative; overflow: hidden; }
.hero-original .sp-slider .sp-item {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; visibility: hidden;
  transition: opacity 0.8s ease-out, visibility 0.8s;
}
.hero-original .sp-slider .sp-item.active { opacity: 1; visibility: visible; }

.hero-original .sp-slider-custom-dot-indecators li { cursor: pointer; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .karte:hover { transform: none; }
  .galerie figure:hover img { transform: none; }
}

/* --- Druck --------------------------------------------------------------- */

@media print {
  .kopf, .fuss-original, .knopf-reihe, .brotkrumen { display: none; }
  body { color: #000; font-size: 11pt; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; }
}