/* Bricolage Grotesque war bis 2026-09-22 der Fließtext-Font -- auf Wunsch entfernt
   (Redesign-Wunsch Runde 2), da es die einzige Stelle im gesamten Erscheinungsbild war,
   die nicht Gramatika nutzte. @font-face bewusst entfernt (kein Verweis mehr im CSS),
   Datei fonts/bricolage-grotesque-variable.woff2 liegt zur Sicherheit noch unangetastet
   im Ordner, wird aber von keiner Seite mehr geladen. */
/* Font Gramatika fuer Titles + Text-Wortmarke (Redesign-Wunsch GFs, 2026-09-16) --
   Dateien bereits fuer leef.bio lizenziert/im Einsatz (uebernommen aus
   kunden/leef/umzugzuionos/zeichnen/fonts/), hier ebenfalls selbstgehostet (kein Live-Import). */
@font-face {
  font-family: 'Gramatika';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("../fonts/Gramatika-Light.woff2") format('woff2');
}
@font-face {
  font-family: 'Gramatika';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("../fonts/Gramatika-Regular.woff2") format('woff2');
}
@font-face {
  font-family: 'Gramatika';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Gramatika-Medium.woff2") format('woff2');
}
@font-face {
  font-family: 'Gramatika';
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: url("../fonts/Gramatika-Bold.woff2") format('woff2');
}
@font-face {
  font-family: 'Gramatika';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/Gramatika-Black.woff2") format('woff2');
}
/* Alle Titles (h1-h6 + .h1-.h6) auf Gramatika, Fallback auf den bisherigen alt-font */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-family: 'Gramatika', var(--alt-font);
}
/* Text-Wortmarke "Leef Holding GmbH" ersetzt das Bild-Logo in Header + Footer (Redesign-Wunsch GFs, 2026-09-16).
   Font-Weight 900 = Gramatika Black (Redesign-Wunsch Runde 2, 2026-09-22) -- analog zum
   Leef-Blattwerk-Logo, statt vorher Medium (500). */
.brand-wordmark {
  font-family: 'Gramatika', var(--alt-font);
  font-weight: 900;
  color: var(--medium-gray);
  letter-spacing: -0.3px;
  line-height: 1;
  white-space: nowrap;
}
header .navbar-brand .brand-wordmark {
  font-size: 25px;
}
footer .footer-logo .brand-wordmark {
  font-size: 21px;
}
/* Header wie leef.bio (Feedback 2026-09-22 Nachmittag, mit Screenshot + konkreten Hex-Werten):
   weisser Hintergrund statt des bisherigen "transparenten" Headers (der de facto nur den
   hellgruenen Body-Hintergrund durchscheinen liess -- ".header-transparent" hatte gar keine
   eigene CSS-Regel), Wortmarke in #5a5a5a (nur im Header -- Footer-Wortmarke bleibt bewusst
   beim bisherigen var(--medium-gray), das war nicht Teil des Wunsches), Menuepunkte in
   #69422c, bei Hover #5D772F. */
header .navbar {
  background-color: #ffffff;
}
header .navbar-brand .brand-wordmark {
  color: #5a5a5a;
}
/* Hauptmenue (Firmen/Finanzen/Kontakt) etwas praesenter -- Redesign-Wunsch Runde 2 (2026-09-22),
   "Menuepunkte besser sichtbar" -- Theme-Default war 16px/500, hier auf 18px/700 angehoben
   (Groessenordnung angelehnt an leef.bio, 18px/500 dort). */
.navbar .navbar-nav .nav-link {
  font-size: 18px;
  font-weight: 500;
  color: #69422c;
}
/* Theme-Default daempft Hover/Active nur per opacity (siehe css/style.css,
   ".navbar .navbar-nav .nav-item:hover .nav-link { opacity: 0.6; }") -- hier stattdessen
   echter Farbwechsel wie bei leef.bio, daher opacity wieder auf 1 gesetzt. */
.navbar .navbar-nav .nav-item:hover .nav-link,
.navbar .navbar-nav .nav-link:hover {
  color: #5D772F;
  opacity: 1;
}
/* variable */
:root {
  --base-color: #384337;
  --primary-font: 'Gramatika', sans-serif;
  --dark-gray: #111111;
  --medium-gray: #818084;
  --light-green: #e2ede1;
  --sage-Green:  #899a87;
}
/* reset */
body {
  font-size: 16px;
  line-height: 26px; 
  color: var(--dark-gray);
}
a, a:hover, a:visited {
  color: var(--dark-gray);
}
/* overflow */
.overflow-x-clip {
  overflow-x: clip;
}
/* button */
.btn {
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--primary-font);
}
.btn.btn-rounded.btn-extra-large {
  padding: 18px 36px;
}
.btn.with-rounded.btn-extra-large {
  padding-right: 70px;
}
/* Fix fuer die Hero-Buttons "leef.bio"/"wisefood.eu" (Feedback 2026-09-17): vorher
   "me-15px sm-mb-15px" nur auf dem ERSTEN Button -- das macht bei "flex-wrap: wrap" nur einen
   der beiden Flex-Items hoeher (Margin-Box), wodurch die zeilenweite Cross-Achsen-Zentrierung
   ("align-items") beide Buttons bei bestimmten Fensterbreiten (Ein-Zeilen-Layout, aber nahe am
   Umbruch-Punkt) unterschiedlich hoch positioniert -- sichtbarer Versatz. "gap" statt Margin
   betrifft dagegen nie die Item-Groesse selbst, daher kein Versatz, egal ob 1 oder 2 Zeilen. */
.gap-15px {
  gap: 15px;
}
/* ===========================================================================
   Hero-Produktbild (index.html, .hero-product-box/.hero-product-img) -- Fix 2026-09-17
   ("neues Firmenbild schwebt am unteren Rand", Details siehe Kommentar in index.html).
   Ab 768px (Bootstrap-Breakpoint, wo main.js' Parallax-Effekt aktiv ist -- unterhalb bleiben
   die urspruenglichen Theme-Werte unangetastet, Mobil sah schon vorher gut aus).

   WICHTIGSTE ERKENNTNIS (per Live-Messung via Chrome-DevTools-Protokoll ermittelt, nicht nur
   theoretisch): main.js wendet auf dieses Bild praktisch DAUERHAFT "transform: translate3d(0,
   -80px, 0)" an (data-bottom-top="...-80px..." auf dem <img>) -- das ist NICHT nur ein
   seltener Scroll-Extremfall, sondern in normaler Scroll-Position bereits der Standardzustand
   fuer dieses (nah am Seitenanfang liegende) Element. Eine reine Verschiebung (translateY)
   bewegt Ober- UND Unterkante des Bildes GLEICHERMASSEN nach oben -- wie viel das Bild die Box
   an sich ueberragt (Bildhoehe minus Boxhoehe) spielt fuer die Verschiebung selbst keine Rolle,
   das war ein Denkfehler im ersten Versuch (der nur Bild breiter/Box niedriger gemacht hat,
   ohne die -80px-Verschiebung einzupreisen -- Live-Test zeigte danach weiterhin exakt 80px
   Luecke unten, unabhaengig von der Boxhoehe).

   ECHTER FIX: "bottom: -80px" auf dem Bild -- verankert es 80px UNTERHALB der Boxkante (statt
   exakt buendig wie es "align-items-end" allein taete). main.js' Parallax-Transform (-80px bis
   +80px) kommt danach oben drauf: im Extremfall -80px landet die Bildunterkante dadurch GENAU
   auf der Boxkante (buendig, keine Luecke) -- bei jedem anderen Transform-Wert (0 bis +80px)
   ragt das Bild NOCH WEITER unten heraus (von overflow:hidden sauber abgeschnitten, nie
   sichtbar). Funktioniert unabhaengig von der Bildgroesse. Breite pro Stufe trotzdem angehoben
   (siehe Werte unten) -- rein damit auch OBEN noch genug Bild da ist und nicht der Hintergrund
   durchscheint, wenn der Parallax-Effekt das Bild stattdessen nach unten schiebt (+80px).
   WICHTIG: Alle Regeln hier brauchen "!important" -- die Theme-eigenen Klassen
   ".md-h-450px"/".lg-h-500px"/".lg-w-550px"/".md-w-450px" (in responsive.css) sind selbst
   schon mit "!important" definiert, ohne eigenes "!important" wuerden sie trotz gleicher
   Selector-Spezifitaet UND spaeterer Ladereihenfolge weiterhin gewinnen.

   Nachbesserung 2026-09-17 (Screenshot-Feedback, Mobil): Die urspruengliche Boxhoehe (450px) war
   fuer die Bildbreite (450px -> ~285px hohes Bild) zu grosszuegig -- oberhalb des Produktbilds
   blieb sichtbar viel leerer Hintergrund uebrig (siehe Kreis im Screenshot). Auf ausdruecklichen
   Wunsch ("kann ruhig halb so hoch sein") Boxhoehe fuer Mobil (<768px, neue eigene Stufe, siehe
   unten) und Tablet-Hochformat (768-991px) jeweils halbiert -- das Bild ist an beiden Stufen
   ohnehin schon hoeher als die neue Boxhoehe, wird also weiterhin sauber unten verankert
   angezeigt (kein erneutes "schweben"), nur der leere Freiraum oben verschwindet. Mobil braucht
   dabei bewusst KEIN "bottom: -80px" (kein bestaetigter Parallax-Effekt unterhalb 768px, siehe
   Kommentar oben) -- das wuerde dort nur unnoetig die Produkt-Unterkante abschneiden. */
@media (max-width: 767px) {
  .hero-product-box {
    height: 225px !important; /* vorher (Theme-Default) 450px */
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-product-box {
    height: 150px !important; /* vorher 300px */
  }
  .hero-product-img {
    width: 680px !important;
    bottom: -80px !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-product-box {
    height: 340px !important;
  }
  .hero-product-img {
    width: 750px !important;
    bottom: -80px !important;
  }
}
@media (min-width: 1200px) {
  .hero-product-box {
    height: 400px !important;
  }
  .hero-product-img {
    width: 850px !important; /* Bewusst fix statt weiter 100%-Breite der Box zu skalieren (das
                     verschaerfte den Bug bei sehr breiten Boxen kurz oberhalb 1199px zusaetzlich)
                     -- bleibt dadurch bei jeder noch so breiten Box (auch 4K-Monitore) gleich. */
    bottom: -80px !important;
  }
}
/* heading */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    letter-spacing: 0;
}
/* header */
header .navbar-brand img {
  max-height: 48px;
}
.header-push-button .push-button {
  height: 8px;
}
.header-push-button .push-button span:first-child {
  width: 15px;
  margin-right: 0;
}
.show-menu .header-push-button .push-button span:nth-child(1) {
  width: 15px;
  top: 0;
}
.header-push-button .push-button span {
  background: var(--dark-gray);
}
.show-menu .header-push-button .push-button span:nth-child(2) {
  top: 6px;
  -webkit-transform: rotate(0deg); 
  transform: rotate(0deg);
}
.hamburger-logo img {
  max-height: 48px;
}
.hamburger-nav {
  width: 30%;
}
.menu-item-list .nav-link {
  font-size: 45px;
  line-height: 40px;
}
/* accordion */
.accordion-style-02 .accordion-item .accordion-header {
  padding: 25px 0;
}
.accordion-style-02 .accordion-item .accordion-body {
  padding-bottom: 40px;
}
.stack-card .stack-card-item {
  box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.15);
}
/* background color */
.bg-light-green {
  background-color: var(--light-green);
}
.bg-medium-green {
  background-color: #bbcbb9;
}
.bg-transperent-sage-Green {
  background-color: rgba(137, 154, 135, 0.1);
}
.bg-base-color-transparent {
  background-color: rgba(56, 67, 55, 0.6);
}
.bg-bright-green-transparent {
  background-color: rgba(118, 168, 74, 0.8)
}
/* heading */
.h1, h1 {
  line-height: 4rem;
}
/* line height */
.lh-150 {
  line-height: 9.4rem;
}
/* line height */
.p-8px{
  padding: 8px;
}
/* blur box */
.blur-box-medium {
  backdrop-filter: blur(45px);
  -webkit-backdrop-filter: blur(45px);
}
/* blur effect */
.blur-200 {
  filter: blur(200px);
}
.blur-120 {
  filter: blur(120px);
}
/* right */
.right-minus-250px {
  right: -250px;
}
/* bottom */
.bottom-minus-270px {
  bottom: -270px;
}
.h-1125px {
    height: 1125px;
}
/* swiper pagination style 02 */
.swiper-pagination-style-2 .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0 8px !important;
}
@media (min-width: 768px) {
    .swiper-pagination-style-2.text-md-start .swiper-pagination-bullet:first-child {
      margin-left: 0 !important;
    }
    .swiper-pagination-style-2.text-md-start .swiper-pagination-bullet:last-child {
       margin-right: 0 !important;
    }
}
/* social icon style 11 */
.social-icon-style-11 ul li a {
  padding: 2.315rem 1rem;
}
/* stack card */
.stack-card .stack-card-item {
  transform-origin: center center;
  -webkit-transform-origin: center center;
}
/* .company-divider (Kopfleiste "hier beginnt eine neue Firma" fuer die alten
   Stack-Effekt-Boxen auf index.html) wurde beim Finanzen-Umbau (2026-09-17, Punkt 6)
   entfernt -- auf finanzen.html hat jede Firma ohnehin ihre eigene, klar abgegrenzte weisse
   Box mit Firmennamen-Ueberschrift, kein zusaetzlicher Trenner mehr noetig. */
/* input */
.placeholder-dark::-webkit-input-placeholder {
  color: var(--dark-gray) !important;
  text-overflow: ellipsis;
  opacity: 1;
}
.placeholder-dark::-moz-placeholder {
  color: var(--dark-gray) !important;
  text-overflow: ellipsis;
  opacity: 1;
}
.placeholder-dark:-ms-input-placeholder {
  color: var(--dark-gray) !important;
  text-overflow: ellipsis;
  opacity: 1;
}
/* footer */
footer .footer-logo img {
  max-height: 48px;
}
footer ul li{
  margin-bottom: 0;
}
/* responsive css */
@media (max-width: 1700px) {
    .fs-180 {
      font-size: 9.75rem;
    }
    .fs-275 {
      font-size: 15rem;
      line-height: 15rem;
    }
}
@media (max-width: 1600px) {
    .fs-275 {
      font-size: 13.5rem;
      line-height: 13.5rem;
    }
}
@media (max-width: 1399px) {
  .h1, h1 {
    font-size: 4rem;
  }
  .fs-275 {
    font-size: 12rem;
    line-height: 12rem;
  }
}
@media (max-width: 1199px) {
  .h1, h1 {
    font-size: 3.123rem;
    line-height: 3.5rem;
  }
  .fs-275 {
    font-size: 10rem;
    line-height: 10rem;
  }
  .h-1125px {
    height: 1005px;
  }
  .fs-180 {
      font-size: 8.75rem;
  }
  .stack-card .stack-item {
    position: static !important;
    padding-top: 0 !important;
    top: 0 !important;
  }
  .stack-card .stack-card-item {
    transform: scale(1) !important;
  }
  .accordion-style-02 .accordion-item .accordion-header {
    padding: 20px 0;
  }
  .sliding-box .sliding-box-img {
    border-radius: 10px !important;
  }
}
@media (max-width: 991px) {
  .fs-180 {
    font-size: 8.714rem;
  }
  .lh-150 {
    line-height: 8.857rem;
  }
  .fs-275 {
    font-size: 8.5rem;
    line-height: 8.5rem;
  }
  .social-icon-style-11 ul li a {
    padding: 1.429rem 1rem;
  }
  header .navbar-expand-lg {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (max-width: 767px) {
  .fs-180 {
    font-size: 7.167rem;
    line-height: 7.167rem;
  }
  .fs-275 {
    font-size: 7.5rem;
    line-height: 7.5rem;
  }
  .accordion-style-02 .accordion-item .accordion-header {
    padding: 15px 0;
  }
  header .navbar-brand img {
    max-height: 40px;
  }
}
@media (max-width: 575px) {
  .fs-275 {
      font-size: 4.75rem;
      line-height: 4.75rem;
  }
}

/* ===========================================================================
   Dokumenten-Downloadlisten (js/document-sync.js) -- geteilte Utility-Klassen
   =========================================================================== */
/* Hover-Farbe fuer Desktop (2026-09-03): wird auf den Downloadlisten-Links (Dateiname +
   Download-Icon) verwendet. Bewusst nur auf Geraeten mit echtem Maus-Hover (nicht bei
   Touch/Mobil, da dort ":hover" nach einem Tap haengen bleiben kann statt sich zu loesen). */
@media (hover: hover) and (pointer: fine) {
  .hover-text-base-color:hover {
    color: #76a50e !important;
  }
}
/* Spaltentrennlinie Kategorie/Datum nur ab Tablet/Desktop: Die Kategorie-Spalte ist auf
   Mobil ausgeblendet (d-none d-md-flex), Bootstraps "border-start" kennt aber keine
   Breakpoints -- der Rand wuerde dort optisch "ins Leere" haengen. Eigene Klasse ersetzt
   "border-start": kein Rand unterhalb md, ab md exakt 1px wie die uebrigen Spaltentrenner. */
.md-border-start {
  border-left: 0 !important;
}
@media (min-width: 768px) {
  .md-border-start {
    border-left: 1px solid rgba(35, 35, 35, 0.2) !important;
  }
}

/* ===========================================================================
   finanzen.html -- Redesign 2026-09-17 (Punkt 6 der Redesign-Wuensche vom 2026-09-16)
   Ausgangslage: Der bisherige Sticky-"Stack"-Effekt auf index.html kam bei den GFs schlecht
   an (Karten "kleben" beim Scrollen). Neu: eigene Unterseite, ganz normaler Seitenfluss
   (keine position:sticky-Boxen mehr, kein .stack-card/.stack-item auf dieser Seite), pro
   Firma eine schlichte weisse Box, Reiter oben statt unten, Downloads kompakter + 2-spaltig
   damit die volle Boxbreite genutzt wird statt Whitespace links vom grossen Firmennamen.
   =========================================================================== */
.finanzen-company-card {
  background-color: var(--white);
  border-radius: 20px;
  box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.finanzen-company-card + .finanzen-company-card {
  margin-top: 40px;
}
.finanzen-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 15px 30px;
  padding: 35px 40px 20px;
}
.finanzen-card-head h2 {
  margin-bottom: 0;
}
/* Tab-Leiste ganz oben in der Box (vorher unten, siehe Notiz) -- eigene schlanke
   Pill-Optik statt der bisherigen, fuer eine Social-Icon-Leiste gedachten Klasse
   ".social-icon-style-11", die fuer Tabs am oberen Kartenrand nicht passte. */
.finanzen-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.finanzen-tabs .nav-link {
  display: inline-block;
  padding: 9px 20px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  color: var(--dark-gray);
  background-color: rgba(17, 17, 17, 0.06);
  cursor: pointer;
  transition: color 0.3s, background-color 0.3s;
}
@media (hover: hover) and (pointer: fine) {
  .finanzen-tabs .nav-link:not(.active):hover {
    background-color: rgba(17, 17, 17, 0.12);
  }
}
.finanzen-tabs .nav-link.active {
  color: var(--white);
  background-color: var(--base-color);
}
.finanzen-card-body {
  padding: 10px 40px 30px;
}
/* 2-spaltige Downloadliste (Punkt 6b): erste Haelfte links, zweite Haelfte rechts. Bei nur
   1 Eintrag (v.a. Leer-Zustand "Noch keine Dokumente vorhanden") rendert document-sync.js
   stattdessen eine volle-Breite-Spalte (.finanzen-doc-col-single), damit der Hinweistext
   nicht unnoetig auf Halbbreite gequetscht wird. */
.finanzen-doc-columns {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -20px;
}
.finanzen-doc-col {
  flex: 1 1 50%;
  min-width: 260px;
  padding: 0 20px;
}
.finanzen-doc-col + .finanzen-doc-col {
  border-left: 1px solid rgba(35, 35, 35, 0.1);
}
/* Vertikales Zeilen-Padding fuer die von js/document-sync.js gerenderten Downloadzeilen sitzt
   bewusst NICHT hier auf ".document-download-row", sondern als pt-10px/pb-10px direkt auf der
   Titel-Spalte (nameCol in document-sync.js) -- siehe ausfuehrlicher Kommentar dort (Fix
   2026-09-17: "Trenner zwischen den Zellen komplett durchziehen"). Ein Padding auf der Zeile
   selbst liess die Trennlinie zwischen Datum/Kategorie und Titel nur so hoch wie den reinen
   Text erscheinen (kurzer Strich statt durchgehender Linie), weil Datum/Kategorie sich per
   "align-self-stretch" auf die (dann zu kurze) Titel-Spalten-Hoehe strecken, nicht auf die
   gepolsterte Zeilenhoehe. */
@media (max-width: 767px) {
  .finanzen-doc-col + .finanzen-doc-col {
    border-left: none;
    padding-top: 6px;
  }
  .finanzen-card-head, .finanzen-card-body {
    padding-left: 20px;
    padding-right: 20px;
  }
}
/* "Nach oben" im Footer ausgekoppelt vom zentrierten Adresse/Anfragen-Grid (Feedback
   2026-09-22 Abend, 2. Runde): rechtsbuendig am tatsaechlichen Bildschirmrand statt an der
   Container-Innenkante, waehrend Adresse/Anfragen weiterhin zum Content-Bereich zentriert
   bleiben. Bezugsrahmen ist die Footer-Zeile selbst ("position-relative" in index.html/
   finanzen.html/impressum.html/datenschutz.html) -- "right: 0" landet an deren Padding-Kante,
   die (bei border-width:0) mit der sichtbaren rechten Kante des <footer> zusammenfaellt,
   unabhaengig von dessen eigenem "pe-65px/xl-pe-45px"-Innenabstand. Nur nach oben/unten
   zentriert (vertikal mittig zur Adresse/Anfragen-Zeile). */
.footer-scroll-top {
  position: absolute;
  top: 50%;
  /* "right: 0" allein landet an der Content-Kante der Zeile, NICHT am wirklichen Bildschirmrand --
     der eigene Innenabstand von <footer> (pe-65px, unterhalb 1400px xl-pe-45px, unterhalb 1200px
     lg-pe-15px) liegt noch dazwischen. Per Chrome MCP an allen 3 Stufen gemessen + nachjustiert:
     negativer Ausgleich in genau dieser Hoehe (Rest von ~15px ist die Scrollbar, unvermeidbar). */
  right: -65px;
  transform: translateY(-50%);
  /* Ohne explizite Breite wurde die Box (Kind eines Flex-Containers, ".row") auf fast die
     komplette Zeilenbreite gestreckt statt sich nur um den Text zu legen -- per Chrome MCP
     gemessen (elRect.width ~1367px statt Content-Breite). "max-content" erzwingt Shrink-to-fit. */
  width: max-content;
}
@media (max-width: 1399px) {
  .footer-scroll-top {
    right: -45px;
  }
}
@media (max-width: 1199px) {
  .footer-scroll-top {
    right: -15px;
  }
}
/* Disclaimer-Overlay (Wertpapier-rechtlicher Hinweis) -- bis 2026-09-17 als Inline-<style> nur in
   finanzen.html, jetzt auf allen 4 Seiten im Einsatz (siehe js/disclaimer.js), daher hierher
   verschoben statt 4x dupliziert. */
body.disclaimer-open {
  overflow: hidden;
}
.disclaimer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  background-color: rgba(20, 20, 20, 0.7);
  align-items: center;
  justify-content: center;
  padding: 30px 15px;
}
.disclaimer-overlay.is-active {
  display: flex;
}
.disclaimer-box {
  width: 100%;
  max-width: 960px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding: 45px;
}
@media (max-width: 575px) {
  .disclaimer-box {
    padding: 25px;
  }
}
.disclaimer-scroll {
  overflow-y: auto;
  padding-right: 10px;
}
.disclaimer-scroll p {
  margin-bottom: 16px;
}
.disclaimer-scroll p:last-child {
  margin-bottom: 0;
}
/* Footer Adresse/Anfragen als kompaktes, zentriertes Paar statt ueber die volle Spaltenbreite
   50/50 gezogen (Feedback 2026-09-22 spaet abends) -- siehe Kommentar in den HTML-Dateien. */
.footer-address-anfragen {
  gap: 60px;
}