@charset "UTF-8";

/* =========================================================================
   raumkonzept müller — Rebuild
   Reines CSS, keine Frameworks. Tokens 1:1 aus dem Original übernommen.
   ========================================================================= */


/* -------------------------------------------------------------- 1. FONTS */

@font-face {
  font-family: "Rajdhani";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/rajdhani-v15-latin-300.woff2") format("woff2");
}
@font-face {
  font-family: "Rajdhani";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/rajdhani-v15-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Rajdhani";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/rajdhani-v15-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "icomoon";
  font-weight: normal;
  font-style: normal;
  font-display: block;
  /* Auf dem Server liegt nur die woff-Variante, keine woff2. */
  src: url("../fonts/icomoon.woff") format("woff");
}


/* ------------------------------------------------------------- 2. TOKENS */

:root {
  /* Typografie */
  --percent-font-size: 100%;
  --base-font-size:    1rem;        /* 18px */
  --base-line-height:  1.66667rem;  /* 30px */
  --main-font:    Rajdhani, sans-serif;
  --display-font: Rajdhani, sans-serif;
  --icon-font:    icomoon;

  /* Farben — als HSL-Komponenten, damit Hover/Active/Focus
     mit calc() auf der Lightness rechnen können (wie im Original) */
  --primary-h:  87.88732;  --primary-s:  62.83186%;  --primary-l:  44.31373%;  --primary-a:  1;
  --secondary-h: 352.32;   --secondary-s: 64.10256%; --secondary-l: 38.23529%; --secondary-a: 1;
  --light-h:    0;         --light-s:    0%;         --light-l:    100%;       --light-a:    1;
  --medium-h:   0;         --medium-s:   0%;         --medium-l:   94.90196%;  --medium-a:   1;
  --dark-h:     60;        --dark-s:     0.49751%;   --dark-l:     39.41176%;  --dark-a:     1;
  --darker-h:   60;        --darker-s:   3.79747%;   --darker-l:   15.4902%;   --darker-a:   1;
  --border-h:   0;         --border-s:   0%;         --border-l:   45.4902%;   --border-a:   1;
  --alert-h:    25.83333;  --alert-s:    100%;       --alert-l:    42.35294%;  --alert-a:    1;

  --primary:   hsla(var(--primary-h),   var(--primary-s),   var(--primary-l),   var(--primary-a));   /* #76b82a */
  --secondary: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), var(--secondary-a)); /* #a02333 */
  --light:     hsla(var(--light-h),     var(--light-s),     var(--light-l),     var(--light-a));     /* #ffffff */
  --medium:    hsla(var(--medium-h),    var(--medium-s),    var(--medium-l),    var(--medium-a));    /* #f2f2f2 */
  --dark:      hsla(var(--dark-h),      var(--dark-s),      var(--dark-l),      var(--dark-a));      /* #656564 */
  --darker:    hsla(var(--darker-h),    var(--darker-s),    var(--darker-l),    var(--darker-a));    /* #292926 */
  --border:    hsla(var(--border-h),    var(--border-s),    var(--border-l),    var(--border-a));    /* #747474 */
  --alert:     hsla(var(--alert-h),     var(--alert-s),     var(--alert-l),     var(--alert-a));     /* #d85d00 */

  /* Raster */
  --base-gap:       1rem;
  --row-max-width:  90rem;   /* 1620px */
  --column-count:   12;
  --scrollbar-width: calc(100vw - 100%);
  --viewport-without-scrollbar: calc(100vw - var(--scrollbar-width));
  --row-max-width-dynamic: calc(min(90rem, var(--viewport-without-scrollbar)));

  /* Abstände */
  --space-sm-min:  30px;  --space-sm-max:  60px;
  --space-md-min:  60px;  --space-md-max:  90px;
  --space-lg-min:  90px;  --space-lg-max: 120px;
  --space-xl-min: 120px;  --space-xl-max: 150px;

  /* Rahmen, Radien, Schatten */
  --base-border-radius: 0;
  --base-border:  1px solid var(--border);
  --base-outline: 1px solid var(--border);
  --outline:      3px solid var(--alert);
  --base-box-shadow: 0 5px 10px 0 hsla(var(--dark-h), var(--dark-s), var(--dark-l), .2);

  /* Layout-Konstanten */
  --quickbar-height: 2.77778rem;
}


/* --------------------------------------------------------- 3. RESET/BASE */

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

html {
  background: var(--light);
  color: var(--dark);
  font-family: var(--main-font);
  font-size: calc(var(--percent-font-size) * 1.125);  /* 18px */
  line-height: var(--base-line-height);
  hyphens: manual;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  margin: 0;
  overflow-x: hidden;
}

/* Der gesamte Inhaltsbereich ist auf 1920px begrenzt und zentriert.
   Ohne das läuft der Header randlos über den Viewport. */
#page-wrap {
  max-width: 106.66667rem;
  background: var(--light);
  margin: 0 auto;
  overflow-x: hidden;
}

img, picture, svg, iframe { max-width: 100%; }
img { height: auto; border: 0; }
img.non-fluid { width: auto; max-width: 100%; }

figure { margin: 0; }

/* Verweise sind durchgängig fett — eine globale Regel im Original,
   nicht nur in Aufzählungen. */
a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
  word-wrap: break-word;
  transition: .3s ease-in-out;
}
a:hover, a:focus-visible { color: var(--secondary); }

:focus-visible {
  outline: var(--outline);
  outline-offset: .16667rem;
}

button { font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}


/* --------------------------------------------------------- 4. TYPOGRAFIE */

/* Überschriften. Die Werte stammen aus getComputedStyle der Live-Seite.
   Alle Ebenen sind linksbündig und fett — keine Rahmen, keine Zentrierung.
   Die Klassen .h2 bis .h5 bilden die OPTIK der Originalebenen ab, während
   das Markup durchgängig h2 verwendet; so bleibt die Dokumentstruktur
   korrekt, ohne dass sich das Erscheinungsbild ändert. */
h1, h2, h3, h4, h5, h6,
.h2, .h3, .h4, .h5, .h6 {
  display: block;
  font-family: var(--display-font);
  font-weight: 700;
  line-height: 1.2em;
  margin: 0 0 var(--base-line-height);
  text-rendering: optimizeLegibility;
  hyphens: auto;
}

h1 { font-size: clamp(1.88889rem, 1.39766rem + 1.84211vw, 3.05556rem); }   /* 34 → 55px */
@media (min-width: 75em) { h1 { line-height: 1.35em; } }

h2, .h2 { font-size: clamp(1.66667rem, 1.31579rem + 1.31579vw, 2.5rem); }  /* 30 → 45px */
.h3     { font-size: clamp(1.77778rem, 1.59064rem + .70175vw, 2.22222rem); line-height: 1.2em; }  /* 32 → 40px */
.h4     { font-size: clamp(1.66667rem, 1.31579rem + 1.31579vw, 2.5rem); line-height: 1.4em; }     /* 30 → 45px */
.h5     { font-size: clamp(1.88889rem, 1.39766rem + 1.84211vw, 3.05556rem); line-height: 1.4em; margin-bottom: 2px; }

/* Blanke h3 bis h6 ohne Optik-Klasse: statische Token-Größen mit der
   Grundzeilenhöhe. So gesetzt auf der Datenschutzseite. */
h3 { font-size: 2.22222rem; }    /* 40px */
h4 { font-size: 1.88889rem; }    /* 34px */
h5 { font-size: 1rem; }          /* 18px */
h6 { font-size: .88889rem; }     /* 16px */
h3, h4, h5, h6 { line-height: var(--base-line-height); }

h1 span, h2 span, h3 span, h4 span, h5 span, h6 span,
.h2 span, .h3 span, .h4 span, .h5 span {
  display: block;
  font-weight: 300;
  line-height: 1.2em;
  font-size: clamp(1.05556rem, .84503rem + .78947vw, 1.55556rem);          /* 19 → 28px */
}
.h3 span { font-size: clamp(1.05556rem, .9386rem + .4386vw, 1.33333rem); }

/* Absatzabstand entspricht der Grundzeilenhöhe (30px). Der letzte Absatz
   behält ihn — das Original hebt ihn nur an einzelnen Stellen gezielt auf,
   siehe .box--inner der Intro-Sektion und .grey-sec. */
p { margin: 0 0 var(--base-line-height); }

/* Aufzählungen: kein Punkt, sondern das Chevron \ea2a aus icomoon,
   eingefärbt in --dark. Werte aus der Live-Seite gemessen. */
.article ul {
  list-style: none;
  margin: 0 0 1.66667rem;   /* 30px */
  padding: 0;
}
.article li {
  padding-left: .83333rem;  /* 15px */
  margin-bottom: .38889rem; /* 7px */
}
.article li::before {
  font-family: var(--icon-font);
  content: "\ea2a";
  color: var(--dark);
  display: inline-block;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

strong { font-weight: 700; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0; left: 0;
  z-index: 1000;
  transform: translateY(-150%);
  background: var(--primary);
  color: var(--light);
  padding: .75rem 1.25rem;
  text-decoration: none;
  transition: transform .2s ease-in-out;
}
.skip-link:focus { transform: translateY(0); color: var(--light); }


/* ----------------------------------------------------- 5. ICON-FONT */

.icon::before {
  font-family: var(--icon-font);
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-angle-left::before  { content: "\ea24"; }
.icon-angle-right::before { content: "\ea2a"; }
.icon-arrow-up::before    { content: "\ea21"; }
.icon-smartphone::before  { content: "\e902"; }
.icon-map::before         { content: "\e900"; }
.icon-phone::before       { content: "\ea81"; }
.icon-envelope::before    { content: "\e9b0"; }


/* -------------------------------------------------------------- 6. GRID

   Breakpoints (em, Kontext 16px):
     tiny 30 (480) · small 40 (640) · medium 47.5 (760) · large 62 (992)
     giant 75 (1200) · huge 85.25 (1364) · full 95 (1520) · cut 101.25 (1620)
     highest 120 (1920)

   Es sind ausschliesslich die 43 Klassen enthalten, die auf der Startseite
   tatsächlich verwendet werden.
   ------------------------------------------------------------------------ */

.row {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--row-max-width);
  width: 100%;
  position: relative;
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
}
.row.full-width { max-width: none; }

.col {
  padding-left: var(--base-gap);
  padding-right: var(--base-gap);
  max-width: 100%;
  width: 100%;
  flex: 1 0 100%;
}
.no-gutter, .no-gutter > .col { padding-left: 0; padding-right: 0; }

/* Reihenfolge */
.default-last { order: 1; }
.order1 { order: 1; }
.order2 { order: 2; }

/* --- tiny --- */
@media (min-width: 30em) {
  .col.tiny-10 { max-width: calc(0.8333333 * min(var(--row-max-width), 100% + 0px)); flex-basis: 83.33333%; }
  .col.tiny-12 { max-width: 100%;      flex-basis: 100%; }
}

/* --- small --- */
@media (min-width: 40em) {
  .col.small-6 { max-width: calc(0.5000000 * min(var(--row-max-width), 100% + 0px));      flex-basis: 50%; }
  .col.small-7 { max-width: calc(0.5833333 * min(var(--row-max-width), 100% + 0px)); flex-basis: 58.33333%; }
}

/* --- medium --- */
@media (min-width: 47.5em) {
  .col.medium-6  { max-width: calc(0.5000000 * min(var(--row-max-width), 100% + 0px));      flex-basis: 50%; }
  .col.medium-8  { max-width: calc(0.6666667 * min(var(--row-max-width), 100% + 0px)); flex-basis: 66.66667%; }
  .col.medium-9  { max-width: calc(0.7500000 * min(var(--row-max-width), 100% + 0px));      flex-basis: 75%; }
  .col.medium-10 { max-width: calc(0.8333333 * min(var(--row-max-width), 100% + 0px)); flex-basis: 83.33333%; }

  .col.medium-prefix-1 { margin-left: 8.33333%; }
  .col.medium-suffix-1 { margin-right: 8.33333%; }

  .col.medium-last  { order: 2; }
  .col.medium-unset { order: 0; }
  .col.medium-vstretch { display: flex; align-items: stretch; }

  .medium-center  { justify-content: center; }
  .medium-reverse { flex-direction: row-reverse; }
}

/* --- large --- */
@media (min-width: 62em) {
  .col.large-6  { max-width: calc(0.5000000 * min(var(--row-max-width), 100% + 0px));      flex-basis: 50%; }
  .col.large-7  { max-width: calc(0.5833333 * min(var(--row-max-width), 100% + 0px)); flex-basis: 58.33333%; }
  .col.large-9  { max-width: calc(0.7500000 * min(var(--row-max-width), 100% + 0px));      flex-basis: 75%; }
  .col.large-12 { max-width: 100%;     flex-basis: 100%; }
  .col.large-auto { max-width: 100%;   flex-basis: 0; }

  .col.large-prefix-0 { margin-left: 0; }
}

/* --- giant --- */
@media (min-width: 75em) {
  .col.giant-3  { max-width: calc(0.2500000 * min(var(--row-max-width), 100% + 0px));       flex-basis: 25%; }
  .col.giant-4  { max-width: calc(0.3333333 * min(var(--row-max-width), 100% + 0px)); flex-basis: 33.33333%; }
  .col.giant-5  { max-width: calc(0.4166667 * min(var(--row-max-width), 100% + 0px)); flex-basis: 41.66667%; }
  .col.giant-9  { max-width: calc(0.7500000 * min(var(--row-max-width), 100% + 0px));       flex-basis: 75%; }
  .col.giant-10 { max-width: calc(0.8333333 * min(var(--row-max-width), 100% + 0px)); flex-basis: 83.33333%; }
}

/* --- huge --- */
@media (min-width: 85.25em) {
  .col.huge-5 { max-width: calc(0.4166667 * min(var(--row-max-width), 100% + 0px)); flex-basis: 41.66667%; }
  .col.huge-6 { max-width: calc(0.5000000 * min(var(--row-max-width), 100% + 0px));       flex-basis: 50%; }
  .col.huge-9 { max-width: calc(0.7500000 * min(var(--row-max-width), 100% + 0px));       flex-basis: 75%; }
  .huge-stretch { align-items: stretch; }
}

/* --- cut: ab hier brechen break-left/right aus der Maximalbreite aus --- */
@media (min-width: 101.25em) {
  .col.cut-2 { max-width: calc(0.1666667 * min(var(--row-max-width), 100% + 0px)); flex-basis: 16.66667%; }
  .col.cut-4 { max-width: calc(0.3333333 * min(var(--row-max-width), 100% + 0px)); flex-basis: 33.33333%; }
  .col.cut-8 { max-width: calc(0.6666667 * min(var(--row-max-width), 100% + 0px)); flex-basis: 66.66667%; }
  .col.cut-9 { max-width: calc(0.7500000 * min(var(--row-max-width), 100% + 0px));       flex-basis: 75%; }
  .col.cut-auto { max-width: 100%;   flex-basis: 0; }
  .col.cut-prefix-1 { margin-left: 8.33333%; }

  /* Die Zeile bricht aus der Maximalbreite aus: halbe Elternbreite plus
     halbe Rasterbreite. Entscheidend ist 50% (vom 1920px breiten
     Seitenbereich), nicht 50vw — sonst wächst sie mit dem Fenster. */
  .row.break-right,
  .row.break-left {
    max-width: calc(50% + 0px + (0.5 * min(var(--row-max-width), 100% + 0px)));
  }
  .row.break-right { margin-left: auto;  margin-right: 0; justify-content: flex-start; }
  .row.break-left  { margin-right: auto; margin-left: 0;  justify-content: flex-end; }
}

/* Negative Spaltenverschiebung (reverse-prefix).
   Diese Klassen stehen bewusst NACH den Breakpoint-Blöcken. Im Original
   liegen sie weit hinten im Stylesheet und gewinnen damit gegen
   .large-prefix-0, das margin-left zurücksetzt. In Breakpoint-Reihenfolge
   notiert würde large-prefix-0 gewinnen und die Spalte nicht mehr
   überlappen. */
@media (min-width: 47.5em) {
  .col.medium-reverse-prefix-2 { margin-left: -16.66667%; }
  .col.medium-reverse-prefix-3 { margin-left: -25%; }
}
@media (min-width: 62em) {
  .col.large-reverse-prefix-4 { margin-left: -33.33333%; }
}
@media (min-width: 85.25em) {
  .col.huge-reverse-prefix-2 { margin-left: -16.66667%; }
}

/* Ausrichtungs-Hilfsklassen. Sie stehen bewusst NACH den Breakpoint-Blöcken:
   im Original liegt .middle weit hinter .huge-stretch, gewinnt also bei
   Gleichstand. Andernfalls würde die Logo-Spalte auf die Höhe der
   Navigationsspalte gestreckt. */
.start   { justify-content: flex-start; }
.center  { justify-content: center; }
.end     { justify-content: flex-end; }
.between { justify-content: space-between; }
.middle  { align-items: center; }
.stretch { align-items: stretch; }

/* Sektionsabstand */
.distance { margin-bottom: 2.77778rem; }
@media (min-width: 30em)   { .distance { margin-bottom: 3.22222rem; } }
@media (min-width: 40em)   { .distance { margin-bottom: 4rem; } }
@media (min-width: 47.5em) { .distance { margin-bottom: 5rem; } }
@media (min-width: 62em)   { .distance { margin-bottom: 6rem; } }
@media (min-width: 75em)   { .distance { margin-bottom: 6.94444rem; } }


/* -----------------------------------------------------------------------
   AB HIER: Komponenten.

   Das Original ist in weiten Teilen DESKTOP-FIRST aufgebaut. Die Basis-
   Regel gilt für große Viewports, die Abstufungen laufen über max-width
   nach unten. Grenzen jeweils 1px unter dem Breakpoint:

     max-width: 29.9375em (479px)   unterhalb tiny
     max-width: 39.9375em (639px)   unterhalb small
     max-width: 47.4375em (759px)   unterhalb medium
     max-width: 61.9375em (991px)   unterhalb large   ← Hauptumbruch
     max-width: 74.9375em (1199px)  unterhalb giant
     max-width: 85.1875em (1363px)  unterhalb huge

   Der Hauptumbruch liegt bei 62em / 992px: darunter Quickbar plus
   Off-Canvas-Schublade, darüber eine fixierte Navigationsleiste.
   ----------------------------------------------------------------------- */


/* ----------------------------------------------------------- 7. QUICKBAR

   Nur unterhalb 992px vorhanden. Grüne Leiste, Kontakt-Icons links,
   Menü-Schalter rechts. */

#quickbar {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2.77778rem;
  z-index: 1000000;
  background-color: var(--primary);
  color: var(--light);
  fill: var(--light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  transition: .3s;
}

#quickbar, #quickbar ul { list-style: none; margin: 0; padding: 0; }
#quickbar > li { display: flex; align-items: center; }
#quickbar .accessibility-bar { display: flex; align-items: center; }

#quickbar .contact-items { gap: .66667rem; }
#quickbar .contact-items a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 0;          /* Text nur für Screenreader, sichtbar ist das Icon */
  color: inherit;
  border-radius: 0;
}
#quickbar .contact-items a::before {
  font-family: var(--icon-font);
  font-size: 1.25rem;
  font-style: normal;
  line-height: 1;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#quickbar .contact-items a.phone::before { content: "\ea81"; }
#quickbar .contact-items a.email::before { content: "\e9b0"; }

.accessibility-bar { gap: .5rem; }
.accessibility-bar button {
  background: none;
  border: 0;
  padding: .25rem;
  color: var(--light);
  cursor: pointer;
  display: flex;
  align-items: center;
}
.accessibility-bar button[aria-pressed="true"] { opacity: .6; }

/* Menü-Schalter: liegt rechts, verwandelt sich beim Öffnen ins Kreuz */
.navi-toggle {
  background: none;
  border: 0;
  padding: 0;
  color: var(--light);
  cursor: pointer;
  display: block;
  position: relative;
  width: 1.11111rem;
  height: 1.11111rem;
}
.navi-toggle__label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.navi-toggle__bars { position: absolute; inset: 0; }
.navi-toggle__bars > span,
.navi-toggle__bars::before,
.navi-toggle__bars::after {
  content: "";
  position: absolute;
  display: block;
  height: 2px;
  width: 1.11111rem;
  background: var(--light);
  left: 50%;
  transform-origin: center;
  transition: top .3s ease-in-out, transform .3s .2s linear;
}
.navi-toggle__bars::before { top: .16667rem; transform: translateX(-50%); }
.navi-toggle__bars > span  { top: 50%; transform: translate(-50%, -50%); }
.navi-toggle__bars::after  { top: .83333rem; transform: translateX(-50%); }

.navi-toggle[aria-expanded="true"] .navi-toggle__bars::before { top: 50%; transform: translate(-50%, -50%) rotate(45deg); }
.navi-toggle[aria-expanded="true"] .navi-toggle__bars::after  { top: 50%; transform: translate(-50%, -50%) rotate(-45deg); }
.navi-toggle[aria-expanded="true"] .navi-toggle__bars > span  { opacity: 0; }

/* Abdunkelung hinter der geöffneten Schublade */
.navi-backdrop {
  position: fixed;
  top: 2.77778rem; left: 0;
  width: 200vw; height: 200vh;
  background-color: var(--dark);
  opacity: 0;
  visibility: hidden;
  z-index: 999997;
  transition: opacity .3s ease-in-out;
}
.navi-backdrop.is-visible { opacity: .9; visibility: visible; }

@media (min-width: 62em) {
  #quickbar { display: none; }
  .navi-backdrop { display: none; }
}


/* --------------------------------------------------------- 8. NAVIGATION */

#navigation {
  position: fixed;
  right: 0;
  max-width: 100%;
  background-color: var(--medium);
  z-index: 999998;
  transition: transform .3s ease, opacity .3s ease;
}

#navigation .branding { display: block; }
#navigation .branding img { display: block; }

#navigation nav ul { list-style: none; margin: 0; padding: 0; width: 100%; }

#navigation nav ul.navi li a,
#navigation nav ul.navi li .sub-toggler,
#navigation nav ul.navi li.nav-back .nav-back-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  color: var(--dark);
  font-weight: 700;
  transition: background-color .3s, color .3s;
}

#navigation nav ul.navi li.has-sub > .sub-toggler {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#navigation nav ul.navi li.has-sub > .sub-toggler::after {
  font-family: var(--icon-font);
  content: "\ea1f";
  margin-left: .5em;
  display: inline-block;
  line-height: 1;
}

#navigation nav ul.navi li.has-sub .sub {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  background: var(--medium);
  visibility: hidden;
  z-index: 1;
}
#navigation nav ul.navi li.has-sub .sub.is-open { visibility: visible; }

#navigation nav ul.navi li.nav-back {
  position: relative;
  padding: 0 !important;
}
#navigation nav ul.navi li.nav-back .nav-back-btn { padding: 1em 1rem; }
#navigation nav ul.navi li.nav-back .nav-back-btn::before {
  font-family: var(--icon-font);
  content: "\ea1e";
  margin-right: .3em;
  vertical-align: -2px;
  display: inline-block;
  line-height: 1;
}

/* --- Mobil: Schublade von rechts, maximal 400px breit --------------- */
@media (max-width: 61.9375em) {
  #navigation {
    width: clamp(13.33333rem, 50%, 22.22222rem);
    top: 2.77778rem;
    bottom: 0;
    overflow: hidden;
    transform: translateX(100%);
    visibility: hidden;
  }
  #navigation.is-open { transform: translateX(0); visibility: visible; }

  #navigation .branding-col { display: none; }

  #navigation nav {
    height: calc(100dvh - 2.77778rem);
    overflow: hidden;
    overflow-y: auto;
  }

  #navigation nav ul.navi li a,
  #navigation nav ul.navi li .sub-toggler { padding: 1em 1rem; }

  #navigation nav ul.navi li:hover > a,
  #navigation nav ul.navi li > a:focus-visible,
  #navigation nav ul.navi li:hover > .sub-toggler,
  #navigation nav ul.navi li > .sub-toggler:focus-visible,
  #navigation nav ul.navi li.nav-back:hover .nav-back-btn {
    color: var(--light);
    background-color: hsla(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 15%), 1);
  }
  #navigation nav ul.navi li.active > a {
    color: var(--light);
    background-color: var(--primary);
  }

  #navigation nav ul.navi li.has-sub .sub {
    height: calc(100dvh - 2.77778rem);
  }
  #navigation nav ul.navi li.has-sub .sub.is-open {
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Überschrift der Unterebene, gespeist aus data-parent-name */
  #navigation nav ul.navi li.has-sub .sub::before {
    content: attr(data-parent-name);
    display: block;
    padding: 1em 1rem;
    font-weight: 700;
    background-color: hsla(var(--medium-h), var(--medium-s), calc(var(--medium-l) - 6%), 1);
  }
}

/* --- Desktop: fixierte Leiste über die volle Breite ----------------- */
@media (min-width: 62em) {
  #navigation {
    top: 0;
    width: 100%;
    overflow: visible;
  }
  #navigation .branding-col {
    position: relative;
    background-color: var(--light);
    /* Spalte füllt immer die volle Leistenhöhe, auch wenn die
       Navigationsspalte daneben höher ausfällt. Sonst bliebe oben und
       unten ein grauer Rand. */
    align-self: stretch;
    display: flex;
    align-items: center;
  }
  #navigation .branding img {
    margin: 1.11111rem 0 1.11111rem 1rem;
    transition: .3s ease-in-out;
  }
  #navigation .no-gutter { padding-left: 1rem !important; padding-right: 1rem !important; }

  #navigation nav ul.navi {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.66667rem;
  }
  #navigation nav ul.navi li a,
  #navigation nav ul.navi li .sub-toggler { white-space: nowrap; width: auto; }

  #navigation nav ul.navi li:hover > a,
  #navigation nav ul.navi li > a:focus-visible,
  #navigation nav ul.navi li:hover > .sub-toggler,
  #navigation nav ul.navi li > .sub-toggler:focus-visible {
    color: hsla(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 15%), 1);
    background: unset;
  }
  #navigation nav ul.navi li.active > a { color: var(--primary); }

  #navigation nav ul.navi li.has-sub { position: relative; }
  #navigation nav ul.navi li.has-sub > .sub-toggler::after { transform: rotate(90deg); }

  #navigation nav ul.navi li.has-sub .sub {
    top: 100%;
    width: auto;
    opacity: 0;
    visibility: hidden;
    box-shadow: var(--base-box-shadow);
  }
  #navigation nav ul.navi li.has-sub:hover > .sub,
  #navigation nav ul.navi li.has-sub:focus-within > .sub,
  #navigation nav ul.navi li.has-sub .sub.is-open { opacity: 1; visibility: visible; }

  #navigation nav ul.navi li.has-sub .sub .sub { left: 100%; top: 0; }
  #navigation nav ul.navi li.has-sub .sub li { padding: 1em; }
  #navigation nav ul.navi li.has-sub .sub li:not(:last-of-type) {
    border-bottom: 1px solid hsla(var(--medium-h), var(--medium-s), calc(var(--medium-l) - 10%), 1);
  }
  #navigation nav ul.navi li.has-sub .sub::before { content: none; }
  #navigation nav ul.navi li.nav-back { display: none; }
}

@media (min-width: 62em) and (max-width: 74.9375em) {
  #navigation .branding { display: none; }
}

/* Weiße Fläche links neben der Logo-Spalte.
   Das Original rechnet hier mit festen Werten (8vw bzw. 27vw Breite,
   9rem Höhe, left: calc(45rem - 50vw)) und blendet den Block unterhalb
   1620px aus. Ich binde ihn stattdessen an die Spalte: er beginnt an
   deren linker Kante, läuft bis zum Fensterrand und übernimmt ihre Höhe.
   Das Ergebnis ist dasselbe, hält aber bei jeder Fensterbreite und jeder
   Leistenhöhe. */
@media (min-width: 62em) {
  #navigation .branding-col::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 100vw;
    background-color: var(--light);
    z-index: -1;
  }
}

/* Beim Scrollen schrumpft die Leiste: Logo von 122px auf 90px,
   Leistenhöhe von 162px auf 130px. Die Klasse setzt das Skript. */
@media (min-width: 62em) {
  #navigation.full .branding img { height: 5rem !important; transition: .3s !important; }
}
/* Das Original blendet den Block bei vergrößerter Schrift aus, weil seine
   feste Höhe dann nicht mehr passt. Da er hier der Spaltenhöhe folgt,
   kann er stehen bleiben. */
@media (min-width: 75em) {
  #navigation .branding-col { padding-left: 0; }
}
@media (min-width: 85.25em) {
  #navigation .branding-col + .col { padding-left: 4rem; }
}


/* ------------------------------------------------------- 8b. QUICK-INFO

   Liegt im Original in der Navigationsspalte über dem Menü. Unterhalb
   992px erscheint sie am Ende der Schublade, darüber als Zeile über der
   Navigation. Wird dort vom CMS zur Laufzeit befüllt — hier statisch. */

#navigation .quick-info {
  background-color: var(--medium);
  padding: 1.33333rem;
  list-style: none;
  margin: 0;
}
#navigation .quick-info li {
  display: flex;
  align-items: center;
  gap: 4px;
}
#navigation .quick-info li:nth-of-type(2) dl {
  display: flex;
  gap: 4px;
  margin: 0;
}
#navigation .quick-info dt, #navigation .quick-info dd { margin: 0; }
#navigation .quick-info address { display: inline-block; font-style: normal; }
#navigation .quick-info p { margin: 0; }
#navigation .quick-info svg.icon {
  flex-shrink: 0;
  vertical-align: middle;
  /* Die Glyphen sitzen im Em-Quadrat auf der Grundlinie, optisch
     wirken sie dadurch leicht hochgesetzt — 1px gleicht das aus. */
  position: relative;
  top: 1px;
}

.btn.translate { color: var(--light) !important; padding: .75rem; }

@media (max-width: 61.9375em) {
  #navigation .accessibility-bar { display: none; }
  #navigation .quick-info { flex-wrap: wrap; }
  #navigation .quick-info li { margin-bottom: .41667rem; }
}

@media (min-width: 62em) {
  #navigation .quick-info {
    background-color: var(--medium);
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin-top: 1.33333rem;
    margin-bottom: .83333rem;
  }
  #navigation .quick-info a { color: var(--dark); text-decoration: none; }
  #navigation .quick-info a:hover { color: var(--primary); }
  #navigation .quick-info li { font-size: .88889rem; }
  #navigation .accessibility-bar { display: flex; align-items: center; gap: .5rem; list-style: none; margin: 0; padding: 0; }
  #navigation .accessibility-bar__item button {
    background: none;
    border: 0;
    padding: .25rem;
    cursor: pointer;
    color: var(--dark);
    fill: var(--dark);
    display: flex;
    align-items: center;
  }
}
@media (min-width: 75em) {
  #navigation .quick-info li { font-size: .77778rem; }
  /* Zwischen 1200 und 1363px weichen die Icons dem Text */
  #navigation .quick-info .icon-map,
  #navigation .quick-info .icon-phone,
  #navigation .quick-info .icon-envelope { display: none; }
}
@media (min-width: 85.25em) {
  #navigation .quick-info li { font-size: .94444rem; }
  #navigation .quick-info li:last-child,
  #navigation .quick-info li:nth-last-child(2) { font-size: 1.11111rem; }
  #navigation .quick-info .icon-map,
  #navigation .quick-info .icon-phone,
  #navigation .quick-info .icon-envelope { display: inline-block; }
}


/* ------------------------------------------------------------- 9. BUTTON */

.btn {
  display: table;
  background-color: var(--primary);
  color: var(--light);
  border: none;
  cursor: pointer;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.3;
  padding: 1.11111rem 1.77778rem;
  text-align: center;
  text-decoration: none;
  position: relative;
  transition: 300ms all ease-in-out;
}
@media (min-width: 47.5em) { .btn { font-size: 1.05556em; } }
@media (min-width: 75em)   { .btn { font-size: 1.11111em; } }

.btn:hover  { background: hsla(var(--dark-h), var(--dark-s), calc(var(--dark-l) + 5%),  1); color: var(--light); }
.btn:active { background: hsla(var(--dark-h), var(--dark-s), calc(var(--dark-l) + 10%), 1); color: var(--light); }
.btn:focus-visible { background: hsla(var(--dark-h), var(--dark-s), calc(var(--dark-l) + 15%), 1); color: var(--light); }

.btn.has-arrow {
  padding: 0;
  display: inline-flex;
  align-items: stretch;
  transition: .9s ease-in-out;
}
.btn.has-arrow::before {
  content: "";
  background-color: var(--secondary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1126 1024'%3E%3Cpath transform='translate(0,960) scale(1,-1)' fill='%23ffffff' d='M87 327h519c12 0 23-4 31-13s13-18 13-30v-203l366 366-366 366v-203c0-11-4-22-13-30s-19-13-31-13h-519v-240zM563 242h-521c-11 0-21 4-30 13s-13 18-13 30v326c0 11 4 21 13 30s18 13 30 13h521v264c0 6 1 11 4 16 2 5 5 10 9 15 9 8 19 11 30 11s22-4 30-11l469-469v-1c9-8 13-17 13-30 0-12-4-22-13-30l-468-468c-4-5-9-8-14-11-6-2-12-4-18-4-11 0-21 4-30 13s-13 18-13 30v264z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.1em auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.66667rem;
  flex-shrink: 0;
  font-weight: 300;
  line-height: 1;
  transition: background-color 366ms ease-in-out;
}
@media (min-width: 47.5em) { .btn.has-arrow::before { width: 2.8em; } }
@media (min-width: 75em)   { .btn.has-arrow::before { width: 3.2em; } }

.btn.has-arrow .btn--inner {
  padding: 1.11111rem 1.77778rem;
  flex-grow: 1;
  text-align: center;
  transition: .3s ease-in-out;
}

/* Volle Breite der Spalte statt Breite nach Inhalt */
.wide { width: 100%; display: block; }
.btn.has-arrow.wide { display: flex; }
.btn.has-arrow:hover,
.btn.has-arrow:active,
.btn.has-arrow:focus-visible { background-color: var(--secondary); }


/* ------------------------------------------------------------ 10. HEADER

   Hintergrundbild desktop-first: bg-header.jpg ist die Basis, darunter
   greifen die kleineren Varianten. Das grüne Overlay liegt NUR unterhalb
   992px über dem ganzen Header — darüber sitzt es als .bg-col::after
   hinter der Textspalte und verschwindet ab 1200px ganz. */

.header {
  position: relative;
  background-color: var(--medium);
  color: var(--light);
  padding: 2.11111rem 0;
  margin-top: 2.77778rem;
  z-index: 1;
}
.header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("../images/layout/bg-header.jpg");
  background-repeat: no-repeat;
  background-position: 0 0;
  /* Originalgröße, nicht skaliert: bg-header.jpg ist 1347x686 */
  background-size: auto;
}
.header > .row { position: relative; z-index: 2; }
.header .bg-col { position: relative; }
.header .bg-col::after { position: absolute; }

@media (max-width: 85.1875em) { .header::before { background-image: url("../images/layout/huge-bg-header.jpg"); } }
@media (max-width: 61.9375em) {
  .header::before { background-image: url("../images/layout/large-bg-header.jpg"); z-index: -2; }
  .header::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(118, 184, 42, .5);
    z-index: 1;
  }
}
@media (max-width: 47.4375em) { .header::before { background-image: url("../images/layout/medium-bg-header.jpg"); } }
@media (max-width: 39.9375em) { .header::before { background-image: url("../images/layout/small-bg-header.jpg"); } }
@media (max-width: 29.9375em) { .header::before { background-image: url("../images/layout/tiny-bg-header.jpg"); } }

@media (min-width: 40em)   { .header { padding: 1.77778rem 0; } }
@media (min-width: 47.5em) { .header { padding: 5.55556rem 0; } }
@media (min-width: 62em) {
  .header { padding: 0; margin-top: 8.11111rem; height: 38.11111rem; }
  .header .bg-col::after {
    content: "";
    height: 38.11111rem;
    width: 100%;
    top: 0; left: 0;
    background-color: rgba(118, 184, 42, .5);
  }
}
@media (min-width: 75em) {
  .header > .row .col:nth-of-type(2) .header--inner { margin-top: 160px; }
  .header .bg-col::after { display: none; }
}
@media (min-width: 85.25em) {
  .header .bg-col::after { width: 74.83333rem !important; max-width: 74.83333rem !important; }
}
@media (min-width: 101.25em) {
  .header { margin-top: 8.88889rem; height: 686px; }
  .header .bg-col::after { height: 38.11111rem; }
}

.header--inner .branding {
  margin: 0 auto 1rem;
  display: table;
}
/* Ab 1200px steckt das Logo in der Navigationsleiste, nicht im Header.
   Diese Regel muss nach der obigen stehen, sonst gewinnt sie nicht. */
@media (min-width: 75em) {
  .header .branding,
  .header--inner .branding { display: none; }
}
.header--inner .branding img {
  background-color: var(--light);
  padding: .83333rem 1rem;
}
.header .inner { display: flex; flex-direction: column; }

/* Weiße Textbox */
.box--inner {
  background: var(--light);
  padding: 1.33333rem;
}
/* Muss NACH der Grundregel stehen: @media erhöht die Spezifität nicht,
   bei Gleichstand gewinnt die spätere Regel. */
@media (min-width: 85.25em) {
  .box--inner { padding: 4.66667rem 2.77778rem 3.83333rem; }
}
.box--inner .headline {
  color: var(--dark);
  font-weight: 700;
  letter-spacing: .025em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
  font-size: clamp(1.66667rem, 1.03509rem + 2.36842vw, 3.16667rem);
}
.box--inner .headline span {
  display: block;
  font-weight: 300;
  text-transform: none;
  line-height: 1.6;
  letter-spacing: .025em;
  font-size: .49123em;
}
@media (max-width: 74.9375em) { .box--inner .headline { text-align: center; } }
@media (min-width: 40em) { .box--inner .headline span { font-size: .42105em; } }
@media (min-width: 62em) { .box--inner .headline span { font-size: .35088em; } }


/* --------------------------------------------------------- 11. FIRST-SEC */

main .first-sec {
  margin-top: 4.16667rem;
  margin-bottom: 4.16667rem;
}
main .first-sec .bg-img {
  height: 22.22222rem;
  width: inherit;
  background-image: url("../images/layout/giant-showroom.jpg");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
  margin-bottom: 2rem;
}
main .first-sec .btn { margin-top: 1.88889rem; }

/* --------------------------------------------------------- Formulare */
/* Begriff und Angabe bilden zusammen einen grauen Kasten: dt trägt den
   oberen Innenabstand, dd den unteren, beide denselben Hintergrund.
   Werte aus der Live-Seite gemessen. */
.kontakt-daten { margin: 0 0 var(--base-line-height); }
.kontakt-daten dt,
.kontakt-daten dd {
  background: rgba(242, 242, 242, .8);
  margin: 0;
}
.kontakt-daten dt {
  font-weight: 700;
  padding: .83333rem .83333rem 0;   /* 15px */
}
.kontakt-daten dd {
  padding: 0 .83333rem .83333rem;
}
/* Abstand zwischen zwei Blöcken */
.kontakt-daten dd + dt { margin-top: .55556rem; }   /* 10px */

/* Impressum: gleiche grauen Kästen, aber die Verweise stehen dort
   leichter als der Fließtext, und die Telefonnummer bleibt in der
   Textfarbe statt in Grün. Beides aus der Live-Seite gemessen. */
.imprint-list { margin: 0 0 var(--base-line-height); }
.imprint-list dt,
.imprint-list dd {
  background: rgba(242, 242, 242, .8);
  margin: 0;
}
.imprint-list dt {
  font-weight: 700;
  padding: .83333rem .83333rem 0;
}
.imprint-list dd {
  padding: 0 .83333rem .83333rem;
}
.imprint-list dd + dt { margin-top: .55556rem; }
.imprint-list a { font-weight: 300; }
.imprint-list a.phone { color: var(--dark); }
.imprint-list a.phone:hover,
.imprint-list a.phone:focus-visible { color: var(--primary); }

.kontakt-form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
.kontakt-form legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 1.66667rem;
}
.kontakt-form label {
  display: block;
  font-weight: 700;
  margin-bottom: .27778rem;
}
.kontakt-form input[type="text"],
.kontakt-form input[type="email"],
.kontakt-form input[type="tel"],
.kontakt-form textarea {
  width: 100%;
  padding: .66667rem .83333rem;
  margin-bottom: 1.66667rem;
  font: inherit;
  color: var(--dark);
  background: var(--light);
  border: 1px solid var(--medium);
  border-radius: var(--base-border-radius);
}
.kontakt-form input:focus-visible,
.kontakt-form textarea:focus-visible {
  border-color: var(--primary);
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.kontakt-form input[aria-invalid="true"],
.kontakt-form textarea[aria-invalid="true"] { border-color: var(--secondary); }
.kontakt-form textarea { resize: vertical; min-height: 10rem; }

.kontrollkaestchen { display: flex; align-items: flex-start; gap: .55556rem; }
.kontrollkaestchen label { font-weight: 400; margin: 0; }
.kontrollkaestchen input { margin-top: .44444rem; flex-shrink: 0; }

.routenplaner label {
  display: block;
  font-weight: 700;
  margin-bottom: .27778rem;
}
.routenplaner input[type="text"] {
  width: 100%;
  padding: .66667rem .83333rem;
  font: inherit;
  color: var(--dark);
  background: var(--light);
  border: 1px solid var(--medium);
  border-radius: var(--base-border-radius);
}
.routenplaner input[type="text"]:focus-visible {
  border-color: var(--primary);
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.routenplaner-hinweis { margin: .83333rem 0 1.66667rem; }
.routenplaner-hinweis small { font-size: .88889rem; color: var(--border); }

.pflicht { color: var(--secondary); }
.formular-hinweis { font-size: .88889rem; }
.recaptcha-hinweis { font-size: .77778rem; color: var(--border); margin-top: 1.11111rem; }
.recaptcha-hinweis a { font-size: inherit; }
/* Googles eingeblendetes Abzeichen; der Hinweis im Formular ersetzt es */
.grecaptcha-badge { visibility: hidden; }
.feldfehler { display: block; color: var(--secondary); font-size: .88889rem; margin: -1.11111rem 0 1.66667rem; }

/* ABWEICHUNG vom Original: dort folgen nach dem Absende-Knopf nur 30px
   bis zum nächsten Abschnitt. Greift nur, wenn dem Formular noch etwas
   folgt — auf der Kontaktseite steht es am Ende. */
.kontakt-form + .row { margin-top: 3.33333rem; }   /* 60px */

.formular-meldung { padding: 1rem 1.33333rem; margin-bottom: 1.66667rem; font-weight: 700; }
.formular-meldung.erfolg { background: var(--primary); color: var(--light); }
.formular-meldung.fehler { background: var(--secondary); color: var(--light); }

/* Spamfalle: unsichtbar, aber nicht display:none — sonst ignorieren Bots sie */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ----------------------------------------------- Stellenangebote-Modul
   Übersicht und Detailansicht liegen in derselben Datei; das Skript
   blendet anhand des Parameters ?job= um, damit die Adressen aus dem
   Original weiter funktionieren. */
.job {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  padding: 1rem 0;
  margin-bottom: .55556rem;
  border-bottom: 1px solid #f2f2f0;
}
.jobTitle {
  display: block;
  font-family: var(--display-font);
  font-size: 1.88889rem;     /* 34px */
  line-height: 1.66667rem;
  margin-bottom: 1.66667rem;
  color: var(--dark);
}
.jobTitle strong { font-weight: 900; }
.jobExcerpt { display: block; line-height: 1.66667rem; }
.job .btn { flex-shrink: 1; }
.jobBackLink { margin-bottom: 1.66667rem; }

@media (max-width: 47.4375em) {
  .job { flex-direction: column; align-items: flex-start; }
  .job .btn { margin-top: 1.66667rem; }
}

/* Hersteller-Logos */
.cms-image { margin: 0; }
.cms-image img { display: block; max-width: 100%; height: auto; }

/* ------------------------------------------- Leistungs-Teaser (Kacheln)
   Fünf verlinkte Kacheln im Raster. Werte aus der Live-Seite gemessen. */
.margin-bottom { margin-bottom: 1.66667rem; }   /* 30px */

.leistungen-teaser a {
  display: block;
  text-decoration: none;
  color: var(--dark);
  background: var(--light);
  box-shadow: 0 0 1.11111rem rgba(0, 0, 0, .1);
  padding: 1.66667rem;
  transition: .3s all;
  font-weight: 300;
}
.leistungen-teaser a p { transition: .3s all; }
.leistungen-teaser a:hover .cms-article p { color: var(--primary); }
.leistungen-teaser a:hover .btn { background: var(--secondary); }

/* Vollbreites Bild der Team-Seite: unskaliert eingepasst, oben links.
   Im Original eine feste Höhe, das Bild selbst ist 1620x644. */
.bg-contain {
  height: 40.55556rem;   /* 730px */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
}
body.Team .bg-contain {
  background-image: url("../images/upload/team.jpg");
}
@media (min-width: 62em) { .bg-contain { height: 36.11111rem; } }   /* 650px */

/* ABWEICHUNG vom Original: dort stößt das Bild ohne Abstand an den
   Fließtext. Auf Wunsch ergänzt, Werte aus dem Abstandssystem. */
.bg-contain { margin-top: 1.66667rem; }                             /* 30px */
@media (min-width: 62em) { .bg-contain { margin-top: 2.22222rem; } } /* 40px */

/* Die Team-Seite hat einen größeren Abstand unter dem ersten Abschnitt */
@media (min-width: 85.25em) {
  body.Team main .first-sec { margin-bottom: 9.72222rem; }   /* 175px */
}

/* Bild der Intro-Sektion je Seite */
body:not(.index) main .first-sec .bg-img {
  background-image: url("../images/upload/raumkonzept-mueller-gmbh.jpg");
}
body.Malerarbeiten main .first-sec .bg-img {
  background-image: url("../images/upload/leistung-malerarbeiten.jpg");
}
body.Bodenarbeiten main .first-sec .bg-img {
  background-image: url("../images/upload/leistung-bodenarbeiten.jpg");
}
body.Sanierungsarbeiten main .first-sec .bg-img {
  background-image: url("../images/upload/leistung-sanierungsarbeiten.jpg");
}
body.Fassadenarbeiten main .first-sec .bg-img {
  background-image: url("../images/upload/leistung-fassadenarbeiten.jpg");
}
body.Sonnenschutz main .first-sec .bg-img {
  background-image: url("../images/upload/leistung-sonnenschutz.jpg");
}
body.Insektenschutz main .first-sec .bg-img {
  background-image: url("../images/upload/leistung-insektenschutz.jpg");
}
body.Markisen main .first-sec .bg-img {
  background-image: url("../images/upload/leistung-markisen.jpg");
}

/* Die weiße Textbox der Intro-Sektion hängt an .medium-reverse,
   nicht an .first-sec — Schatten und Innenabstand kommen von dort. */
main .medium-reverse > .box--inner {
  box-shadow: 0 0 7.55556em rgba(0, 0, 0, .2);
}
main .medium-reverse > .box--inner p:last-of-type { margin-bottom: 0; }

@media (min-width: 47.5em) {
  main .medium-reverse > .box--inner { padding: 2.77778rem !important; }
}
@media (min-width: 62em) { main .first-sec .bg-img { margin-bottom: 0; } }
@media (min-width: 75em) {
  main .first-sec .bg-img { height: 37.33333rem; }
  main .first-sec h1 { margin-bottom: 3.05556rem; }
}
@media (min-width: 85.25em) {
  /* Nur die Startseite. Unterseiten bekommen deutlich kleinere Abstände,
     siehe .distance:first-child weiter unten. */
  body.index main .first-sec { margin-top: 10rem; margin-bottom: 15.27778rem; }
  main .medium-reverse > .box--inner { padding: 4.16667rem 5.33333rem !important; }
}

/* Erster Abschnitt auf Unterseiten: 65px oben und unten */
@media (min-width: 62em) { .distance:first-child { margin-top: 3.61111rem; } }
@media (min-width: 75em) { .distance:first-child { margin-bottom: 3.61111rem; } }

/* Kopfstreifen der Unterseiten: eine Datei für alle Breiten (1920x400),
   unskaliert und oben links verankert wie auf der Startseite. Sichtbar
   ist dadurch die obere Hälfte des Bildes. Kein grünes Overlay. */
body:not(.index) .header { height: 12.22222rem; }          /* 220px */
body:not(.index) .header::before {
  height: 100%;
  width: 100%;
  background-image: url("../images/layout/bg-header-unterseiten.jpg");
}
body:not(.index) .header::after { content: none; }
@media (min-width: 62em) {
  body:not(.index) .header { width: 100%; height: 11.11111rem; }   /* 200px */
}


/* -------------------------------------------------- 12. TEASER / SLIDER */

main .teaser {
  display: flex;
  margin-bottom: 100px;
}
@media (min-width: 62em) { main .teaser { margin-bottom: 200px; } }

.headline-bg { position: relative; }
@media (max-width: 61.9375em) { .headline-bg { order: 1; } }

/* Der graue Block hinter der Überschrift existiert erst ab 1620px */
@media (min-width: 101.25em) {
  .headline-bg::before {
    content: "";
    position: absolute;
    top: -4.16667rem;
    right: 0;
    width: 52.5rem;
    height: 46.66667rem;
    background-color: var(--medium);
    z-index: 0;
  }
}

.main-headline {
  position: relative;
  z-index: 99;
  font-family: var(--display-font);
  font-size: clamp(1.88889rem, 1.23392rem + 2.45614vw, 3.44444rem);
  font-weight: 700;
  line-height: 1.1em;
  color: var(--dark);
  margin: 0;
}
.main-headline br { display: none; }
@media (min-width: 101.25em) { .main-headline br { display: block; } }

@media (min-width: 47.5em) {
  main .teaser .bgc-col {
    display: flex;
    align-items: center;
    align-self: stretch;
    position: relative;
  }
}

.slider-col { position: relative; z-index: 2; }
.slider { position: relative; width: 100%; }

/* Swiper-Konfiguration des Originals, aus der laufenden Instanz ausgelesen:
     < 640px   1 Slide,  Abstand   0
     ≥ 640px   2 Slides, Abstand  18px
     ≥ 1200px  2 Slides, Abstand 108px
   loop = true, speed = 1500ms, autoplay = aus */
.slider__track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  align-items: flex-start;
}
.slider__track::-webkit-scrollbar { display: none; }

/* Slide-Breite wie bei Swiper: Containerbreite / Slides - Abstand.
   Bei 1080px Spalte, 2 Slides und 108px Abstand sind das 432px. */
.slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  /* Ohne min-width: 0 kann das Flex-Element nicht schmaler werden als
     sein Inhalt. Das überstehende Bild (441px + 2x63px Innenabstand)
     würde die Kachel auf 567px aufblähen. */
  min-width: 0;
}

@media (min-width: 40em) {
  .slider__track { gap: 1rem; }                /* 18px */
  .slide { flex-basis: calc(50% - 1rem); }
}
@media (min-width: 75em) {
  .slider__track { gap: 6rem; }                /* 108px */
  .slide { flex-basis: calc(50% - 6rem); }
}

.teaser-box {
  display: block;
  background: var(--darker);
  color: var(--light);
  padding: 2.77778rem 1.33333rem;
  text-decoration: none;
  font-weight: 400;
  /* Bild und Schaltfläche ragen rechts aus der Kachel heraus */
  overflow: visible;
}
@media (max-width: 61.9375em) { .teaser-box { margin-bottom: 3rem; } }
@media (min-width: 75em)      { .teaser-box { padding: 3.33333rem 3.5rem; } }

.teaser-box .box--inner { padding: 0 !important; background: var(--darker) !important; color: var(--light); }

.teaser-box .teaser-headline {
  font-family: var(--display-font);
  font-size: 1.66667rem;      /* 30px */
  line-height: 1em;
  font-weight: 700;
  margin-bottom: 1.66667rem;  /* 30px */
}
.teaser-box p:nth-of-type(2) { min-height: 6.66667rem; }   /* 120px */
.teaser-box p:last-of-type   { margin-bottom: 2.33333rem; } /* 42px */

.pull-out figure { margin: 0; }
.pull-out figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}
@media (min-width: 75em) {
  /* 24.5rem = 441px, die natürliche Bildbreite. Die Kachel ist 432px
     breit, Bild und Schaltfläche stehen also rechts über. */
  .pull-out figure { width: 24.5rem; }
  .pull-out .btn   { width: 24.5rem; }
}

main .teaser a:hover .btn,
main .teaser a:focus-visible .btn { background: var(--secondary); }

/* Der Hinweis unter dem Slider. Im Original ist das KEINE Navigation —
   Swiper läuft dort ohne gebundene Buttons, die Pfeile sind reine Grafik
   mit Pulsier-Animation. Ab 1364px ist der Hinweis ausgeblendet.
   Abweichung: Ich lasse sie als echte Schaltflächen funktionieren, sonst
   wäre der Slider per Tastatur nicht bedienbar. */
.switch {
  position: relative;
  z-index: 99;
  opacity: .7;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 1.77778rem;
  animation: switchit 6s linear infinite;
  color: var(--dark);
}
.switch button,
.switch .icon {
  background: none;
  border: 0;
  padding: .25rem;
  font-size: 1.44444rem;
  line-height: 1;
  color: inherit;
}
.switch button { cursor: pointer; }
.switch button:hover { color: var(--primary); }

@keyframes switchit {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-8px); }
  75%      { transform: translateX(8px); }
}
@media (prefers-reduced-motion: reduce) { .switch { animation: none; } }

@media (min-width: 85.25em) { .switch { display: none !important; } }


/* ---------------------------------------------------------- 13. BOXEN */

.grey-box {
  position: relative;
  background: var(--medium);
  padding: 1.33333rem;
}
.grey-box p:last-of-type { margin-bottom: 0; }
@media (min-width: 75em) { .grey-box { padding: 2.55556rem; bottom: 2.44444rem; } }

/* Aktuelles & Aktionen. Text, Trennstrich und Schaltfläche stehen ab
   1200px nebeneinander, darunter untereinander. Der Zwischenraum von
   116px kommt erst ab 1620px dazu. */
.grey-bg { background: var(--medium); padding: 2.77778rem 1rem; }
@media (min-width: 75em) { .grey-bg { padding: 4.55556rem 0; } }

main .grey-sec .inner { display: flex; flex-direction: column; }
main .grey-sec .inner p { margin-bottom: 0; }
main .grey-sec .btn { width: fit-content; }
main .grey-sec .hr {
  display: block;
  flex: 0 1 100%;
  max-width: 14.44444rem;   /* 260px */
  height: 1px;
  background: var(--dark);
  opacity: .15;
}

@media (min-width: 75em) {
  main .grey-sec .inner { flex-direction: row; align-items: center; }
}
@media (min-width: 101.25em) {
  main .grey-sec .inner { gap: 6.44444rem; }   /* 116px */
}


/* ------------------------------------------------------------ 14. FOOTER */

.footer { position: relative; background-color: var(--medium); }
.footer .full-width { background-color: var(--light); }

.footer .map-wrap { position: relative; background-color: var(--medium); }
.footer .map-wrap > .row > .col:nth-of-type(2) { z-index: 99; }
.footer .map-wrap--inner .bg { position: relative; }
.footer .map-col { position: relative; }

/* Die Karte ist 74.83333rem (1347px) breit und wird über zwei
   ineinandergreifende Formeln nach links aus dem Raster geschoben.
   Beide Werte stammen unverändert aus dem Original. */
@media (min-width: 85.25em) {
  .footer .map-wrap--inner { position: absolute; top: 0; left: 0; }
  .footer .map-wrap--inner .bg {
    width: 74.83333rem !important;
    max-width: 74.83333rem !important;
  }
}
@media (min-width: 101.25em) {
  .footer .map-wrap--inner { left: calc(45rem - 42vw); }
}
@media screen and (min-width: 2132px) {
  .footer .map-wrap--inner .bg { left: calc(45rem - 21.25vw); }
}
/* Bei vergrößerter Schrift bleibt die Karte bündig */
html.font-size-110 .footer .map-wrap--inner .bg,
html.font-size-130 .footer .map-wrap--inner .bg { left: 0; }

.map { position: relative; width: 100%; height: 30.83333rem; background: var(--medium); }
/* Klick-Zwischenschritt: Ohne ihn ginge beim Seitenaufruf ein Request
   an Google, bevor der Besucher zugestimmt hat. */
.map__consent {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--medium);
  border: 0;
  cursor: pointer;
  padding: 2rem;
  text-align: center;
}
.map__consent span { font-weight: 700; color: var(--dark); }
.map__consent small { color: var(--border); font-size: .77778rem; max-width: 24rem; }
.map__consent:hover span { color: var(--primary); }

/* Liegt unter der Karte. Lädt das iframe — etwa weil die Umgebung
   externe Einbettungen blockiert —, verdeckt die Karte diese Ebene. */
.map__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .33333rem;
  text-align: center;
  text-decoration: none;
  background: var(--medium);
}
.map__fallback span { font-weight: 700; color: var(--dark); }
.map__fallback small { color: var(--dark); font-size: .77778rem; }
.map__fallback:hover span { color: var(--primary); }

.map iframe {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 30.83333rem;
  border: 0;
  opacity: .9;
  transition: opacity 366ms ease-in-out;
  margin-bottom: 0 !important;
}
.map:hover iframe { opacity: 1; }

.footer .box--inner { pointer-events: none; }
/* Im Original schlichte Blockelemente — die Breite der Kinder ergibt
   sich aus der Spalte, nicht aus einer Flexbox. */
.footer .footer--inner,
.footer .inner { display: block; }

@media (max-width: 61.9375em) {
  .footer .footer--inner { padding: 2.77778rem 0; }
}
@media (min-width: 62em) {
  .footer .map-wrap { height: 30.83333rem; }
  .footer .map-wrap > .row > .col:nth-of-type(2) .footer--inner { margin-top: 8.33333rem; }
}
@media (min-width: 75em) {
  .footer .map-wrap > .row > .col:nth-of-type(2) .footer--inner { margin-top: 4.55556rem; }
}

.navi-add ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.navi-add li {
  padding: 2.33333rem 0;   /* 42px */
  margin-right: 3rem;      /* 54px */
}
.navi-add li:last-child { margin-right: 0; }
.navi-add a {
  color: var(--dark);
  text-decoration: none;
  font-size: .83333rem;    /* 15px */
  font-weight: 700;
}
.navi-add li.active > a { color: var(--primary); }
.navi-add a:hover, .navi-add a:focus-visible { color: var(--primary); }
@media (min-width: 62em) { .navi-add ul { justify-content: flex-end; } }

/* Abschlussbild, ebenfalls desktop-first gestuft */
.footer .outro {
  background-image: url("../images/layout/bg-outro.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 22.22222rem;
}
@media (min-width: 85.25em) { .footer .outro { height: 44.16667rem; } }
@media (max-width: 61.9375em) { .footer .outro { background-image: url("../images/layout/large-bg-outro.webp"); } }
@media (max-width: 47.4375em) { .footer .outro { background-image: url("../images/layout/medium-bg-outro.webp"); } }
@media (max-width: 39.9375em) { .footer .outro { background-image: url("../images/layout/small-bg-outro.webp"); } }


/* ------------------------------------------------------ 15. BACK-TO-TOP */

.back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 120;
  width: 2.66667rem;
  height: 2.66667rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--light);
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: .3s;
}
.back-to-top::before {
  content: "\ea21";
  font-family: var(--icon-font);
  line-height: 1;
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover { background: var(--secondary); color: var(--light); }


/* --------------------------------------- 16. ACCESSIBILITY-BAR-ZUSTÄNDE */

html.font-size-110 { --percent-font-size: 110%; }
html.font-size-130 { --percent-font-size: 130%; }

html.contrast-intensify { --dark-l: 20%; --border-l: 25%; }
html.contrast-intensify a,
html.contrast-intensify #navigation nav ul.navi li a { text-decoration: underline; }
html.contrast-intensify a:hover,
html.contrast-intensify a:focus-visible { text-decoration: none; }
html.contrast-intensify .teaser-box .box--inner p { color: var(--light); }


/* -------------------------------------------------------------- 17. PRINT */

@media print {
  #quickbar, #navigation, .back-to-top, .switch, .map, .outro, .navi-backdrop { display: none !important; }
  .header { height: auto; margin-top: 0; }
  .header::before, .header::after { display: none; }
  body { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}