/* ==========================================================================
   SolarPower Austria — Stylesheet
   Handgeschriebener Nachbau der bisherigen Website. Werte, Abstände und
   Farben stammen 1:1 aus der Vorlage; die Umsetzung ist neu und kommt ohne
   Framework, jQuery oder Utility-Klassenwust aus.

   Aufbau
     1. Grundlagen (Reset, Schrift, Farbtokens)
     2. Typografie
     3. Layout-Bausteine (Container, Abstandshalter)
     4. Schaltflächen
     5. Hilfsklassen
     6. Abschnitte in Reihenfolge der Seite
     7. Rechtstexte (Impressum, Datenschutz, AGB)
   ========================================================================== */

/* ==========================================================================
   1. Grundlagen
   ========================================================================== */

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-font: #111111;
  --color-primary: #fdb42e;
  --color-secondary: #112c4a;
  --color-white: #ffffff;
  --color-grey: #71767d;
  --color-whitesmoke: #f5f5f5;
}

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

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  background-color: var(--color-white);
  color: var(--color-font);
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 20px;
  /* Die Vorlage glättet die Schrift bewusst weicher. Ohne diese zwei Zeilen
     rastert der Text auf macOS spürbar fetter als im Original. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  border: 0;
  vertical-align: middle;
  display: inline-block;
}

svg {
  display: block;
}

/* Sichtbarer Fokusring für Tastaturbedienung — der Vorlage fehlte er.

   Dunkelblau als Grundfarbe: Auf Weiß trägt es 12,6:1, auf dem Gelb der
   Kontakt- und Abschlussflächen 7,92:1. Gelb lag dort bei 1,79:1 und 1,00:1 —
   auf dem gelben Band war der Ring schlicht unsichtbar. Auf den dunkelblauen
   Flächen ist es umgekehrt, dort bleibt der Ring gelb (siehe unten). */
:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
}

/* Die dunkelblauen Flächen der Seite: Kopfzeile, Hero, Spezialisierung,
   Kennzahlenband, Fußzeile und die aufgeklappte Rückseite einer Leistungskarte
   ist gelb — dort trägt wieder das Gelb bzw. das Dunkelblau von oben. */
.navbar :focus-visible,
.hero :focus-visible,
.intro :focus-visible,
.keyfigures :focus-visible,
.footer :focus-visible {
  outline-color: var(--color-primary);
}

/* Die Kopfzeile klebt oben und ist 90 px hoch. Ohne diesen Abstand springt
   ein beanstandetes Formularfeld dahinter, und der Besucher tippt in ein Feld,
   das er nicht sieht (WCAG 2.2, 2.4.11). */
.contact-form-input,
.contact-form-message,
.contact-form-checkbox-input {
  scroll-margin-top: 7rem;
}

/* ==========================================================================
   2. Typografie
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-weight: 700;
}

h1 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 38px;
  line-height: 44px;
}

h2 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 32px;
  line-height: 36px;
}

h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 24px;
  line-height: 30px;
}

h4 {
  margin-top: 0;
  margin-bottom: 0.5em;
  font-size: 0.9em;
  line-height: 1.2em;
}

h5 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 20px;
}

h6 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 18px;
}

p {
  margin-top: 0;
  margin-bottom: 0.5em;
  font-size: 1.25rem;
  line-height: 1.4;
}

a {
  color: var(--color-primary);
  font-weight: 400;
  text-decoration: none;
  text-transform: none;
  display: flex;
}

a:hover {
  color: var(--color-secondary);
}

strong {
  font-weight: 700;
}

figure {
  margin: 0;
}

/* Überschriften-Größen der Vorlage. Sie hängen nicht am Tag, sondern an der
   Klasse — so bleibt die Dokumentgliederung frei wählbar. */
.heading-1 {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  font-size: 4rem;
  line-height: 1.1;
}

.heading-2 {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  font-size: 3.5rem;
  line-height: 1.1;
}

.heading-3 {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  font-size: 3rem;
  line-height: 1.2;
}

.heading-4 {
  margin-top: 0;
  margin-bottom: 0.5em;
  font-size: 2.5rem;
  line-height: 1.2;
}

.heading-5 {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  font-size: 2rem;
  line-height: 1.2;
}

.title-small {
  align-self: flex-start;
  color: var(--color-primary);
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.title-small.align-center {
  align-self: auto;
  text-align: center;
}

.text-medium {
  margin-bottom: 0.25rem;
  color: var(--color-font);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
}

.text-regular {
  flex: 1;
  margin-bottom: 0.25rem;
  color: var(--color-font);
  font-size: 1.15rem;
  line-height: 1.4;
  display: block;
}

.text-small {
  flex: 1;
  font-size: 1rem;
  line-height: 1.4;
}

@media screen and (max-width: 991px) {
  .heading-1 {
    font-size: 3rem;
  }

  .heading-2 {
    font-size: 2.5rem;
  }

  .heading-3 {
    font-size: 2rem;
  }

  .heading-4 {
    font-size: 1.75rem;
    line-height: 1.2;
  }

  .text-medium {
    align-self: flex-start;
    font-size: 1.125rem;
  }

  .text-regular {
    font-size: 1rem;
  }

  .text-small {
    font-size: 0.875rem;
  }

  p {
    font-size: 1.15rem;
  }
}

@media screen and (max-width: 767px) {
  .heading-1 {
    font-size: 2.5rem;
  }

  .heading-2 {
    font-size: 2rem;
    line-height: 1.1;
  }

  .heading-3 {
    font-size: 1.75rem;
  }

  .heading-4 {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  .text-medium {
    font-size: 1rem;
  }

  .text-regular {
    font-size: 0.875rem;
  }

  .text-small {
    font-size: 0.75rem;
  }

  p {
    font-size: 1rem;
  }
}

@media screen and (max-width: 479px) {
  .title-small.align-center {
    font-size: 0.6em;
  }
}

/* ==========================================================================
   3. Layout-Bausteine
   ========================================================================== */

.page-wrapper {
  overflow: clip;
}

.container-x-large,
.container-large,
.container-small {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.container-x-large {
  max-width: 72em; /* 1440px bei 20px Grundschrift */
}

.container-large {
  max-width: 64em;
}

.container-small {
  max-width: 38.4em;
}

.container-xx-small {
  max-width: 20em;
}

.container-xx-small.custom-xx-small {
  max-width: 22em;
}

.container-x-large.padding-global-custom,
.container-x-large.padding-xxhuge-custom {
  padding-left: 2rem;
  padding-right: 2rem;
}

.container-x-large.padding-global-custom.padding-horizontal-inner {
  padding-top: 12rem;
  padding-bottom: 12rem;
}

.container-x-large.padding-horizontal-custom {
  padding: 10rem 2rem;
}

.container-x-large.padding-xx-hugh {
  margin-left: auto;
  margin-right: auto;
  padding: 12rem 9.6rem;
}

/* Abstandshalter — leere Elemente, die in der Vorlage den vertikalen Rhythmus
   setzen. Beibehalten, weil das Markup sonst überall eigene Ränder bräuchte. */
.spacer-x-small,
.spacer-medium,
.spacer-x-large,
.spacer-hugh {
  width: 100%;
}

.spacer-x-small {
  padding-top: 0.4em;
}

.spacer-medium {
  padding-top: 1.6rem;
}

.spacer-large {
  padding-top: 2.4em;
}

.spacer-x-large {
  padding-top: 3.2em;
}

.spacer-hugh {
  padding-top: 4.8em;
}

.spacer-small {
  padding-bottom: 1.5em;
}

@media screen and (min-width: 1440px) {
  .container-x-large.padding-horizontal-custom {
    padding: 12rem 2rem;
  }
}

@media screen and (min-width: 1920px) {
  .container-x-large.padding-global-custom,
  .container-x-large.padding-xxhuge-custom {
    padding-left: 0;
    padding-right: 0;
  }

  .container-x-large.padding-horizontal-custom {
    padding: 12rem 0;
  }
}

@media screen and (max-width: 991px) {
  .container-x-large.padding-global-custom.padding-horizontal-inner,
  .container-x-large.padding-horizontal-custom {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .container-x-large.padding-xx-hugh {
    padding: 7.2em 2em;
  }

  .spacer-medium {
    padding-top: 1rem;
  }

  .spacer-x-large {
    padding-top: 2.8em;
  }

  .spacer-hugh {
    padding-top: 4em;
  }
}

@media screen and (max-width: 767px) {
  .container-x-large.padding-global-custom.padding-horizontal-inner,
  .container-x-large.padding-horizontal-custom {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .container-x-large.padding-xx-hugh {
    padding: 4.8em 1em;
  }

  .spacer-medium {
    padding-top: 1.25rem;
  }

  .spacer-large {
    padding-top: 2em;
  }

  .spacer-x-large {
    padding-top: 2.2em;
  }

  .spacer-hugh {
    padding-top: 3.6em;
  }
}

@media screen and (max-width: 479px) {
  .container-x-large.padding-global-custom,
  .container-x-large.padding-xxhuge-custom {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .container-x-large.padding-global-custom.padding-horizontal-inner {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .container-x-large.padding-global-custom.padding-bottom-custom {
    padding-bottom: 2rem;
  }

  .container-x-large.padding-horizontal-custom {
    padding: 4rem 1rem;
  }

  .container-x-large.padding-xx-hugh {
    padding: 3.6em 1em;
  }

  .spacer-medium {
    padding-top: 1.15rem;
  }

  .spacer-large {
    padding-top: 2em;
  }

  .spacer-hugh {
    padding-top: 2.8em;
  }
}

/* ==========================================================================
   4. Schaltflächen
   ========================================================================== */

.button {
  /* Ohne eigenes display würde die a-Regel (display:flex) greifen — die
     Schaltfläche streckte sich dann über die volle Spaltenbreite und
     text-align:center liefe ins Leere. Die Vorlage rendert inline-block. */
  display: inline-block;
  align-self: center;
  padding: 1.5rem 2rem;
  border: 0;
  background-color: var(--color-primary);
  /* Dunkelblau statt Weiß: Weiß auf diesem Gelb ergibt 1,79:1 und ist bei
     Sonnenlicht kaum zu lesen. Dunkelblau kommt auf 7,92:1 und bleibt in den
     Markenfarben. Gilt überall, wo Gelb der Grund oder die Schrift wäre. */
  color: var(--color-secondary);
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.button:hover {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.button.is-small {
  padding: 1.15rem 1.5rem;
  letter-spacing: 0.5px;
  text-decoration: none;
}

.button.secondary {
  background-color: var(--color-secondary);
  /* Auf dem dunklen Grund wieder Weiß — sonst stünde Dunkelblau auf
     Dunkelblau, seit .button seine Grundfarbe von Weiß auf Dunkelblau
     gewechselt hat. */
  color: var(--color-white);
}

.button.secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-secondary);
}

.button.secondary.for-submit {
  width: 100%;
}

.button.in-hero {
  align-self: flex-start;
}

.button.in-hero:hover,
.button.in-hero-reverse {
  background-color: var(--color-white);
  /* Gelb auf Weiß wären 1,79:1 — dieselbe Umkehr wie oben. */
  color: var(--color-secondary);
}

.button.in-hero-reverse:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.button.in-cta {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.button.in-cta:hover {
  background-color: var(--color-white);
  color: var(--color-secondary);
}

/* Textlink mit vorangestelltem Symbol. Die Polsterung erbt er bewusst von
   .button — die Vorlage nimmt sie ihm nicht weg, und ohne sie säße der Text
   neben den gefüllten Schaltflächen zu hoch. */
.button.is-icon {
  align-self: flex-start;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 0.5rem;
  background-color: transparent;
  color: var(--color-grey);
  text-decoration: none;
  display: flex;
}

.button.is-icon:hover {
  background-color: transparent;
}

.button-icon {
  width: 1.75em;
  height: 1.75em;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.button-icon-text {
  color: var(--color-secondary);
  line-height: 1.75em;
}

.button-group {
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
}

.button-group.align-center {
  justify-content: center;
}

@media screen and (max-width: 991px) {
  .button {
    padding: 1.375rem 1.75rem;
  }

  .button.is-small {
    padding: 1rem 1.25rem;
  }

  .button.in-hero.is-small {
    flex: 1;
  }

  .button-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}

@media screen and (max-width: 767px) {
  .button {
    padding: 1.25rem 1rem;
    font-size: 0.8rem;
  }

  .button.is-small {
    padding: 0.875rem 1rem;
  }
}

@media screen and (max-width: 479px) {
  .button {
    align-self: flex-start;
  }

  .button.is-icon {
    gap: 0.75rem;
    padding-left: 0;
  }

  .button.in-hero {
    align-self: stretch;
  }

  .button.in-cta {
    display: block;
  }

  .button-group {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .button-group.align-left {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .button-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .button-icon-text {
    line-height: 1;
  }
}

/* ==========================================================================
   5. Hilfsklassen
   ========================================================================== */

.align-left {
  justify-content: flex-start;
  text-align: left;
}

.align-center {
  justify-content: center;
  text-align: center;
}

.text-align-center {
  text-align: center;
}

.text-white,
.text-color-white {
  color: var(--color-white);
}

.text-shape-yellow {
  color: var(--color-primary);
}

.is-color-grey {
  color: var(--color-grey);
}

.padding-0 {
  align-self: center;
  margin-bottom: 0;
}

.padding-vertical-small {
  padding-left: 2em;
  padding-right: 2em;
}

.padding-vertical-medium {
  padding-left: 3em;
  padding-right: 3em;
}

.padding-xxlarge-custom {
  padding-top: 4em;
  padding-bottom: 4em;
}

.heading-1.text-white.align-center {
  text-align: center;
}

.text-medium.align-left {
  text-align: left;
}

.text-regular.text-white.in-intro {
  line-height: 1.4em;
}

/* Nur für Screenreader — trägt Sprungmarken und Formularhinweise. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media screen and (max-width: 991px) {
  .heading-1.text-white.align-center {
    font-size: 2.75em;
  }

  .padding-vertical-small,
  .padding-vertical-medium {
    padding-left: 0;
    padding-right: 0;
  }

  .padding-xxlarge-custom {
    padding-top: 2em;
    padding-bottom: 2em;
  }
}

@media screen and (max-width: 767px) {
  .heading-1.text-white.align-center {
    font-size: 1.9em;
    line-height: 1em;
  }
}

@media screen and (max-width: 479px) {
  .heading-1.text-white.align-center {
    overflow-wrap: break-word;
    font-size: 1.95rem;
    line-height: 1;
  }

  .padding-xxlarge-custom {
    padding-top: 1em;
    padding-bottom: 1em;
  }
}

/* Bewegung nur, wenn das Betriebssystem sie nicht abbestellt hat. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Aktionsbanner
   ============================================================ */

.banner {
  background-color: var(--color-primary);
}

.banner-content {
  height: 2rem;
  display: flex;
}

.banner-text {
  flex: 1;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  font-size: 1rem;
  display: flex;
}

/* ============================================================
   Kopfleiste
   ============================================================ */

.navbar {
  z-index: 1000;
  background-color: var(--color-secondary);
  position: sticky;
  inset: 0 0 auto;
}

.navbar-wrapper {
  justify-content: space-between;
  align-items: center;
  height: 90px;
  display: flex;
}

/* --- Wortmarke --- */

.navbar-brand {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  display: flex;
}

.brand-logo {
  width: 1.75em;
  height: 1.75em;
  color: var(--color-primary);
  display: block;
}

.brand-logo svg {
  width: 100%;
  height: 100%;
}

.brand-text {
  color: var(--color-white);
  align-items: center;
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1.2em;
  display: flex;
}

/* --- Linkreihe und Schaltflaeche --- */

.navbar-menu {
  color: var(--color-white);
  align-items: center;
  display: flex;
}

.navbar-menu-left {
  flex-wrap: wrap;
  margin: 0 15px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.navbar-menu-left li {
  display: flex;
}

.navbar-menu-right {
  display: flex;
}

/* .button erbt display:flex vom a-Grundstil; text-align greift dort nicht.
   Damit steht die Beschriftung auch in der vollbreiten Mobilfassung mittig. */
.navbar-menu-right .button {
  justify-content: center;
}

.nav-link {
  color: var(--color-white);
  letter-spacing: .1em;
  margin-left: 15px;
  margin-right: 15px;
  padding: 4px 0 2px;
  font-size: .8em;
  font-weight: 700;
  line-height: 1.2em;
  display: block;
  transition: all .3s cubic-bezier(1, -.034, 0, .983);
}

.nav-link:hover {
  color: var(--color-primary);
}

/* --- Hamburger: das Webflow-Icon-Glyph als drei Balken nachgebaut,
       Masse in em, damit es mit der Schriftgroesse von .icon skaliert --- */

.menu-button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  display: none;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* vergroessert nur die Trefferflaeche auf 44 px, ohne das Bild zu veraendern */
.menu-button::after {
  content: "";
  width: 2.75rem;
  height: 2.75rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.icon {
  width: 1em;
  height: 1em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .09375em;
  display: flex;
}

.icon span {
  width: .625em;
  height: .09375em;
  background-color: currentColor;
}

/* ============================================================
   Breakpoints
   ============================================================ */

@media screen and (min-width: 1920px) {
  .banner-text {
    text-transform: uppercase;
  }
}

@media screen and (max-width: 991px) {
  .banner-content {
    padding-left: 2em;
    padding-right: 2em;
  }

  .banner-text {
    font-size: .875rem;
  }

  /* Menue als Flaeche unter der Leiste; .navbar ist sticky und damit
     der Bezugsrahmen fuer die absolute Platzierung */
  .navbar-menu {
    height: 100vh;
    background-color: var(--color-secondary);
    padding-left: 3vw;
    padding-right: 3vw;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
  }

  .navbar-menu.is-open {
    display: block;
  }

  .navbar-menu-left {
    flex-direction: column;
    justify-content: space-around;
    height: 250px;
    margin: 25px 0;
  }

  .nav-link {
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .menu-button {
    display: block;
  }

  .icon {
    color: var(--color-primary);
    font-size: 3rem;
    line-height: 1;
  }
}

@media screen and (max-width: 767px) {
  .banner-content {
    padding-left: 0;
    padding-right: 0;
  }

  .banner-text {
    font-size: .75rem;
  }

  .brand-logo {
    width: 1.25em;
    height: 1.25em;
  }

  .brand-text {
    font-size: 1.25em;
  }

  .icon {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 479px) {
  .banner-content {
    height: 2rem;
    padding-top: .125rem;
  }

  .brand-text {
    font-size: 1em;
  }

  .icon {
    font-size: 2rem;
  }
}

/* Zwischen 992 und 1202 px blendet die Vorlage die Angebots-Schaltfläche aus:
   Wortmarke und Linkreihe füllen die Leiste dort bereits vollständig aus.
   (Stand im Original als eingebetteter <style>-Block auf jeder Seite.) */
@media screen and (min-width: 992px) and (max-width: 1202px) {
  .navbar-menu-right {
    display: none;
  }
}

/* ===== Hero (Kopfbereich mit Bild) ===== */

/* Der Verlauf liegt über dem Foto. Er läuft nach oben und ist ab 69 % Höhe
   vollständig deckend — das Foto scheint nur ganz unten schwach durch.
   Die Stopps (0 %, 0 %, 6 %, 69 %) stehen so in der Vorlage. */
/* Das Foto scheint nur mit 3–4 % Deckkraft durch. Deshalb genügt eine
   240 px breite Fassung (5 KB), und die steht direkt in der Stilvorlage:
   Der Browser muss sie nicht erst suchen und laden, das größte sichtbare
   Element (LCP) ist mit der Stilvorlage fertig. Pixelvergleich gegen die
   720er Datei: höchstens 4 von 255 Stufen Unterschied. Hero und Fußzeile
   teilen sich die Variable, damit die Daten nur einmal in der Datei stehen. */
:root {
  --hero-foto: url("data:image/webp;base64,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");
}

.hero {
  background-color: var(--color-secondary);
  background-image:
    linear-gradient(to top, transparent, #0f2843e6 0%, #102b48f7 0%, #102b47f5 6%, var(--color-secondary) 69%),
    var(--hero-foto);
  background-position: 0 0, 50% 0;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
}

/* ===== Intro mit Video ===== */

.intro {
  position: static;
}

.intro-wrapper {
  background-color: var(--color-secondary);
  justify-content: space-around;
  height: 30rem;
  /* -4em = -80px: der Kasten ragt in den Hero hinauf. position: relative haelt
     ihn dabei ueber dem Hero-Inhalt, nicht nur ueber dessen Hintergrund. */
  margin-top: -4em;
  display: flex;
  position: relative;
  box-shadow: 0 -17px 17px 8px rgba(0, 0, 0, .17);
}

.intro-content {
  background-color: var(--color-secondary);
  align-self: center;
  width: 50rem;
  padding: 2rem;
}

.margin-0 {
  margin: 0;
}

.text-regular.text-white.in-intro {
  margin-top: 0;
  line-height: 1.4em;
}

.intro-video {
  height: 30rem;
  overflow: hidden;
}

/* Das Video laeuft in seiner natuerlichen Groesse (1280x720) und wird vom
   Kasten beschnitten - genau wie in der Vorlage. Diese Breite ist zugleich die
   Flex-Basis der rechten Spalte und bestimmt damit das Breitenverhaeltnis
   Text zu Video (bei 1440px: 543px zu 833px). */
.intro-video video {
  display: block;
  width: 1280px;
  height: 720px;
  max-width: none;
}

@media screen and (max-width: 991px) {
  .intro-wrapper {
    height: 100%;
    box-shadow: none;
    flex-direction: column;
    margin-top: 2em;
  }

  .intro-content {
    width: 100%;
    padding-left: 2em;
    padding-right: 2em;
  }

  .intro-video {
    order: -1;
    height: 25rem;
  }
}

@media screen and (max-width: 767px) {
  .intro-content {
    padding-top: 2em;
    padding-bottom: 2em;
  }
}

@media screen and (max-width: 479px) {
  .intro-wrapper {
    margin-top: 1em;
  }

  .intro-content {
    padding: 1em;
  }

  .intro-video {
    height: 20rem;
  }
}

/* Reduzierte Bewegung: Das Skript liest --autoplay an jedem Video mit
   data-autoplay aus und haelt es an, wenn hier "none" steht. */
@media screen and (prefers-reduced-motion: reduce) {
  .intro-video video[data-autoplay] {
    --autoplay: none;
  }
}

/* ==========================================================================
   Über uns — freigestelltes Foto links, Text mit Häkchenliste rechts
   ========================================================================== */

.about-wrapper {
  display: flex;
  gap: 2rem;
}

.about-column {
  width: 50%;
  align-self: flex-start;
  position: relative;
}

.about-column.margin-top-custom-medium {
  height: 100%;
}

/* Das Bild trägt width/height im Markup (Layoutstabilität beim Laden);
   ohne height:auto bliebe die Attributhöhe stehen. */
.about-image {
  height: auto;
}

.about-content {
  height: 100%;
  flex-direction: column;
  justify-content: center;
  display: flex;
}

.about-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-item {
  column-gap: 1em;
  margin-bottom: 0.75em;
  display: flex;
}

/* Nicht schrumpfen lassen: in der Vorlage hielt das übergroße SVG den Platz
   offen, hier tut es flex-shrink. */
.about-icon {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  display: flex;
}

.about-icon svg {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 991px) {
  /* Gestapelt: der Abstand kommt jetzt vom Rand der zweiten Spalte, nicht vom gap. */
  .about-wrapper {
    flex-direction: column;
    gap: 0;
  }

  .about-column {
    width: 100%;
  }

  .about-column.margin-top-custom-medium {
    margin-top: 3em;
  }

  .about-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}

@media screen and (max-width: 767px) {
  .about-item {
    gap: 1rem;
  }
}

@media screen and (max-width: 479px) {
  .about-column.margin-top-custom-medium {
    margin-top: 2em;
  }

  .about-item {
    gap: 0.75rem;
  }

  .about-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* ===== Kennzahlenband ===== */

.keyfigures {
  margin-bottom: 12rem;
}

.keyfigures-wrapper {
  background-color: var(--color-secondary);
  display: flex;
  justify-content: space-around;
  gap: 1rem;
  margin: 0;
  /* 4em sind hier 80px, weil 1em auf Body-Ebene 20px misst. */
  padding: 4em 0;
  list-style: none;
}

.keyfigure-item {
  text-align: center;
  flex-direction: column;
  align-items: center;
  width: 15rem;
  display: flex;
}

.keyfigure-number {
  color: var(--color-white);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  /* Beim Hochzählen wechseln die Ziffern im Zehntelsekundentakt. Mit
     Tabellenziffern sind alle gleich breit, sonst zappelt die Zahl. */
  font-variant-numeric: tabular-nums;
}

.keyfigure-icon {
  width: 4.5rem;
  height: 4.5rem;
  color: var(--color-primary);
  align-items: center;
  display: flex;
}

/* Das Symbol füllt den Kasten. Ab 991px ist der höher als breit,
   dann sitzt das Zeichen darin mittig — genau wie in der Vorlage. */
.keyfigure-icon svg {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 991px) {
  .keyfigures {
    margin-bottom: 10rem;
  }

  .keyfigures-wrapper {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4rem 10rem;
  }

  .keyfigure-item {
    width: 13rem;
  }

  .keyfigure-number {
    font-size: 2rem;
  }

  /* Breite in rem, Höhe in em — der Kasten der Vorlage misst hier 56x70px. */
  .keyfigure-icon {
    width: 3.5rem;
    height: 3.5em;
  }
}

@media screen and (max-width: 767px) {
  .keyfigures {
    margin-bottom: 8rem;
  }

  .keyfigures-wrapper {
    gap: 4rem 6rem;
  }

  .keyfigure-item {
    width: 11.5rem;
  }
}

@media screen and (max-width: 479px) {
  .keyfigures {
    margin-bottom: 4rem;
  }

  .keyfigures-wrapper {
    gap: 2rem;
  }
}

/* ===================================================================
   Leistungen — Kopf, Flip-Karten, Hinweisleiste, Markenband
   =================================================================== */

.services.padding-custom {
  background-color: var(--color-whitesmoke);
  padding: 10rem 1.5rem;
  position: relative;
}

/* --- Kartenblock ------------------------------------------------- */

/* Der Kartenrost ist absichtlich höher als sein eigener Kasten (die Zeilen
   sind je 100 % der Höhe). Der große Abstand der Spalte fängt genau diesen
   Überhang wieder auf, damit die Hinweisleiste an der richtigen Stelle sitzt. */
.services-wrapper.padding-global-custom {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 83.1rem;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

.service-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Sechs Karten im Raster, darunter die siebte über die ganze Breite. Die
     braucht dort viel weniger Höhe als eine schmale Karte — deshalb eigene
     Reihenhöhen statt der 100 %, mit denen die Vorlage arbeitete. */
  grid-template-rows: 29.5rem 29.5rem 29.5rem 23.5rem;
  gap: 3px;
  width: 100%;
  height: 29.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* „Europaweit tätig" liegt als breites Band unter den sechs Karten. */
.service-item-wrapper:nth-child(7) {
  grid-column: 1 / -1;
}

.service-item-wrapper {
  display: flex;
  position: relative;
  flex-flow: column wrap;
  gap: 16px;
  width: 100%;
  height: 100%;
}

/* Die Karte selbst ist die Drehachse; Vorder- und Rückseite liegen
   deckungsgleich in ihrem 3D-Raum. */
.service-item {
  flex: 1;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .6s ease;
}

.service-item.is-flipped {
  transform: rotateX(180deg);
}

.service-item-front {
  display: flex;
  position: absolute;
  inset: 0;
  flex-direction: column;
  justify-content: space-around;
  background-color: var(--color-white);
  backface-visibility: hidden;
}

.service-item-back {
  display: flex;
  position: absolute;
  inset: 0;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 2em;
  padding-bottom: 1em;
  background-color: var(--color-primary);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transform: rotateX(180deg);
}

/* Die abgewandte Seite ist auch für Tastatur und Screenreader nicht da —
   ohne Skript bleibt die Rückseite so verborgen.
   Die zugewandte Seite wird sofort sichtbar, sonst kann der Fokus nicht auf
   sie wandern; die abgewandte verschwindet erst in der Mitte der Drehung. */
.service-item-front,
.service-item.is-flipped .service-item-back {
  visibility: visible;
  transition: visibility 0s;
}

.service-item-back,
.service-item.is-flipped .service-item-front {
  visibility: hidden;
  transition: visibility 0s linear .3s;
}

.service-item-content-front {
  display: flex;
  flex-direction: column;
  padding-left: 2rem;
  padding-right: 2rem;
}

.service-item-content-back {
  display: flex;
  flex-direction: column;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

/* Überschriftsrang bringt je nach Grundgerüst einen Vorabstand mit —
   in der Karte sitzt der Titel bündig unter dem Symbol. */
.service-item-content-front .text-medium,
.service-item-content-back .text-medium {
  margin-top: 0;
}

.service-item-heading-back {
  color: var(--color-white);
  margin-top: 0;
  margin-bottom: .5em;
  font-size: 1em;
  line-height: 1.2em;
}

.service-item-icon-front {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 3.5em;
  height: 3.5em;
  margin-bottom: .5em;
  color: var(--color-primary);
}

.service-item-icon-back {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
}

/* Die Schaltfläche ist ein <button>; die Browservorgaben müssen weg,
   die Optik trägt .button.is-icon. */
.service-flip-button {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  margin: 0;
  line-height: inherit;
}

.service-button-icon-front {
  width: 1.75em;
  height: 1.75em;
  color: var(--color-primary);
}

.service-button-text-front {
  color: var(--color-secondary);
  line-height: 1.75em;
}

.service-button-icon-back {
  width: 1.75em;
  height: 1.75em;
  color: var(--color-secondary);
}

.service-button-text-back {
  color: var(--color-secondary);
  line-height: 1.75em;
}

/* --- Hinweisleiste ----------------------------------------------- */

.service-extension {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 100%;
  padding-top: 1.5rem;
  padding-left: 1.5em;
  padding-right: 1.5em;
  background-color: var(--color-white);
  border-top: 2px solid var(--color-whitesmoke);
}

.service-extension-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  gap: 1em;
}

.service-extension-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 10rem;
}

.service-attention-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2em;
  height: 2em;
  color: var(--color-primary);
}

.link-8 {
  display: inline;
  cursor: pointer;
}

/* --- Markenband --------------------------------------------------- */

.clients-carousel {
  overflow: hidden;
}

/* Die Logoreihe steht zweimal hintereinander; die Spur wandert um genau eine
   Reihe nach links, danach beginnt die Schleife unsichtbar von vorn.
   min-width sorgt dafuer, dass beide Hälften auf schmalen Schirmen wirklich
   nebeneinander passen und sich nicht überlagern. */
.clients-carousel-wrapper {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  width: 200%;
  min-width: max-content;
  animation: marken-lauf 28s linear infinite;
}

.clients-carousel-card-wrapper {
  display: flex;
  flex: 1;
  align-items: flex-start;
  width: 50%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.clients-carousel-card {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  height: 7.5em;
}

/* height:auto, weil die Bilder ihre Pixelmaße als Attribut mitbringen —
   sonst zöge der Höhenwert das Logo in die Länge. */
.clients-image {
  width: 100%;
  height: auto;
  max-width: 9rem;
  max-height: 3rem;
  margin-left: 15px;
  margin-right: 15px;
}

/* Ohne die Logos darunter steht der Satz allein — bei .6em (12 px) sah das
   nach vergessener Zeile aus. 1.1em sind 22 px; die Sperrung wird dabei
   etwas enger, sonst zerfaellt die Zeile. */
.heading-5.is-color-grey.text-align-center {
  color: var(--color-grey);
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 1.1em;
  font-weight: 400;
}

@keyframes marken-lauf {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media screen and (min-width: 1440px) {
  .service-extension-info {
    max-width: 50rem;
  }

  .service-extension {
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
  }
}

@media screen and (min-width: 1920px) {
  .services-wrapper.padding-global-custom {
    gap: 52.4rem;
    width: 95%;
  }

  /* Die Karten sind hier am breitesten, also reicht weniger Höhe. */
  .service-items {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 30rem 30rem 22rem;
    height: 30rem;
  }

  .service-extension-info {
    max-width: 60rem;
  }

  .service-extension {
    justify-content: space-between;
  }
}

/* Ab 1440px sind drei Spalten breit genug: zweimal drei Karten, darunter das
   breite Band. */
@media screen and (min-width: 1440px) and (max-width: 1919px) {
  .services-wrapper.padding-global-custom {
    gap: 55.4rem;
  }

  .service-items {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 31.5rem 31.5rem 23.5rem;
    height: 31.5rem;
  }
}

/* Der schmalste Teil der zweispaltigen Stufe: Karten ab 439px Breite. Die
   Rückseite der Europa-Karte braucht hier mehr als die 30rem der Grundstufe;
   ab 1200px reichen sie wieder. */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .services-wrapper.padding-global-custom {
    gap: 93.1rem;
  }

  .service-items {
    grid-template-rows: 33rem 33rem 33rem 26.5rem;
    height: 33rem;
  }
}

@media screen and (max-width: 991px) {
  .services.padding-custom {
    padding: 5.2em 2em 5.2em 2rem;
    position: static;
  }

  .services-wrapper.padding-global-custom {
    gap: 91.6rem;
    padding-left: 0;
    padding-right: 0;
  }

  .service-items {
    grid-template-rows: 33rem 33rem 33rem 25rem;
    height: 33rem;
  }

  .service-item-wrapper {
    gap: 0;
  }

  .service-item-back {
    border-bottom: 2px solid var(--color-whitesmoke);
  }

  .service-extension {
    flex-direction: column;
    padding-top: 1.5em;
  }

  .service-extension-right {
    justify-content: center;
  }

  .clients-image {
    width: auto;
    max-width: 9rem;
  }
}

@media screen and (max-width: 767px) {
  .services.padding-custom {
    padding-top: 4em;
    padding-bottom: 4em;
  }

  .services-wrapper.padding-global-custom {
    gap: 162.8rem;
  }

  .service-items {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(7, 27rem);
    gap: 2px;
    height: 27rem;
  }

  .service-item-content-front {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .service-extension {
    padding-left: 1em;
    padding-right: 1em;
  }

  .clients-carousel-card {
    height: 5em;
  }
}

@media screen and (max-width: 479px) {
  .services.padding-custom {
    padding-left: 1rem;
    padding-right: 1em;
  }

  .services-wrapper.padding-global-custom {
    gap: 177.8rem;
  }

  .service-items {
    column-gap: 0;
    grid-template-rows: repeat(7, 29.5rem);
    height: 29.5rem;
  }

  .service-item-content-back {
    padding-left: 1em;
    padding-right: 1em;
  }

  .button.is-icon.is-custom {
    padding-left: 0;
  }

  .service-extension {
    padding-bottom: 1.5em;
  }

  .service-extension-info {
    gap: .5rem;
  }

  .service-extension-right {
    margin-top: .75rem;
    margin-left: -1rem;
    margin-right: -1rem;
  }

  .service-attention-icon {
    align-self: flex-start;
    width: 1.75rem;
    height: 1.75rem;
  }

  /* Die Vorlage stellt das Band hier auf ein Raster um, wodurch sich die
     Logos überlagern. Fuer die durchgehende Schleife bleibt es eine Reihe;
     der Abstand zur Überschrift ist derselbe. */
  .clients-carousel-wrapper {
    margin-top: 20px;
    margin-bottom: 0;
  }

  .clients-carousel-card {
    height: 3em;
  }
}

/* Sehr schmale Geräte (320px): Die Karte ist dort nur 284px breit, die
   Rückseite der Europa-Karte braucht 482px. */
@media screen and (max-width: 359px) {
  .services-wrapper.padding-global-custom {
    gap: 189.8rem;
  }

  .service-items {
    grid-template-rows: repeat(7, 31.5rem);
    height: 31.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clients-carousel-wrapper {
    animation: none;
  }
}

/* ===== Referenzen: Text, Pfeile, Bild-Karussell ===== */

.references.padding-horizontal-custom {
  padding-top: 10rem;
  padding-bottom: 10rem;
  overflow: hidden;
}

.references-wrapper {
  width: 100%;
  max-width: 72em;
  margin-left: auto;
  margin-right: auto;
}

.references-wrapper.padding-global-custom {
  padding-left: 2rem;
  padding-right: 2rem;
}

.references-header {
  max-width: 50rem;
}

/* ----- Galerie -----

   Zwei Gruppen untereinander, je ein Raster aus 16:9-Kacheln. Sechs sind
   sichtbar, der Rest hängt mit `hidden` im Dokument und kommt auf Knopfdruck
   dazu; die Bilder laden erst dann (`loading="lazy"`).
   Drei Spalten ab 992px, zwei ab 480px, darunter eine. */

.galerie {
  margin-top: 5rem;
}

.galerie:first-of-type {
  margin-top: 0;
}

.galerie-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.galerie-kopf h3 {
  margin: 0;
}

.galerie-zahl {
  margin: 0;
  color: var(--color-grey);
  white-space: nowrap;
}

.galerie-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.galerie-kachel {
  margin: 0;
  overflow: hidden;
}

.galerie-bild {
  display: block;
  width: 100%;
  height: auto;
  /* Alle Fotos sind 16:9 — die feste Form hält den Platz frei, bevor das Bild
     da ist, und fängt Ausreißer ab. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .45s ease;
}

.galerie-bild[role="button"] {
  cursor: zoom-in;
}

/* Die Kachel schneidet ab, was über das Bild hinausragt — der Fokusrahmen
   muss deshalb nach innen. Er liegt damit auf dem Foto, und Fotos sind mal
   hell (Schnee, Himmel), mal dunkel (Module): Der gelbe Ring allein wäre auf
   hellen unsichtbar. Die dunkle Linie unmittelbar innen macht ihn auf beiden
   erkennbar — 7,92:1 zwischen den beiden Ringfarben. */
.galerie-bild:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 6px var(--color-secondary);
}

.galerie-kachel:hover .galerie-bild {
  transform: scale(1.04);
}

.galerie-fuss {
  margin-top: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .galerie-bild {
    transition: none;
  }

  .galerie-kachel:hover .galerie-bild {
    transform: none;
  }
}

@media screen and (max-width: 991px) {
  .galerie-raster {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }

  .references.padding-horizontal-custom {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}

@media screen and (max-width: 767px) {
  .references.padding-horizontal-custom {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

@media screen and (max-width: 479px) {
  .galerie-raster {
    grid-template-columns: 1fr;
  }

  .galerie-kopf {
    flex-direction: column;
    gap: .25rem;
  }

  .references-wrapper.padding-global-custom {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ===== Kontakt ===== */

.contact {
  background-color: var(--color-primary);
  /* Fehlerfarbe des Formulars — in der Vorlage nicht vorhanden, siehe Notizen */
  --color-error: #b3261e;
}

/* Der Farbwechsel weiss/hellgrau ist ein Verlauf mit harter Kante, keine zwei Kaesten */
.contact-wrapper {
  gap: 2rem;
  background-color: var(--color-white);
  background-image: linear-gradient(to right, var(--color-white) 52%, var(--color-whitesmoke) 53%);
  padding: 3em;
  display: flex;
}

.contact-wrapper.padding-global-custom.padding-horizontal-custom {
  padding: 4rem;
}

.contact-form {
  flex: 1;
  max-width: 55%;
}

.contact-content {
  flex: 1;
  max-width: 45%;
  margin-left: 2vw;
}

/* --- Formular --- */

.contact-form-block {
  margin-bottom: 15px;
}

.contact-form-wrapper {
  display: block;
}

.contact-form-field {
  flex: 1;
  margin-bottom: 1em;
  display: block;
}

.contact-form-fields {
  gap: 1.5em;
  justify-content: space-between;
  display: flex;
}

.contact-form-label {
  margin-bottom: 5px;
  letter-spacing: .5px;
  font-size: .6em;
  font-weight: 700;
  line-height: 1em;
  display: block;
}

.contact-form-input,
.contact-form-message {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 10px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  background-color: var(--color-white);
  color: #333;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.42857;
  display: block;
}

.contact-form-input::placeholder,
.contact-form-message::placeholder {
  color: #999;
}

.contact-form-input {
  height: 4rem;
}

.contact-form-message {
  min-height: 8rem;
}

.contact-form-input.has-error,
.contact-form-message.has-error {
  border-color: var(--color-error);
}

/* --- Ankreuzfeld: echtes Bedienelement, gezeichnetes Kaestchen --- */

.contact-form-checkbox {
  position: relative;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  padding-left: 20px;
  display: block;
}

/* Das Kaestchen schwimmt in den linken Innenabstand hinein */
.contact-form-checkbox::before {
  content: "";
  float: left;
  width: 15px;
  height: 15px;
  margin: 4px 0 0 -20px;
  border: 1px solid #ccc;
  border-radius: 2px;
  background-color: var(--color-white);
}

/* Der Haken liegt genau auf dem Kaestchen und wird nur im Zustand "gewaehlt" gezeigt */
.contact-form-checkbox::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 1px;
  width: 15px;
  height: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-miterlimit='10' d='M11 2L5.5 8.5 2 5'/%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
}

.contact-form-checkbox:has(input:checked)::before {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

.contact-form-checkbox:has(input:checked)::after {
  opacity: 1;
}

.contact-form-checkbox:has(.has-error)::before,
.contact-form-checkbox.has-error::before {
  border-color: var(--color-error);
}

/* Der Fokusring, den die Vorlage abgeschaltet hatte */
.contact-form-checkbox:has(input:focus-visible)::before {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

/* Das echte Ankreuzfeld bleibt bedienbar, liegt aber unsichtbar auf dem Kaestchen */
.contact-form-checkbox-input {
  position: absolute;
  top: 4px;
  left: 0;
  width: 17px;
  height: 17px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.contact-checkbox-label {
  font-size: .8em;
  font-weight: 400;
  cursor: pointer;
  display: inline-block;
}

.link-datenschutz {
  cursor: pointer;
  display: inline-block;
}

/* Zwei Verweise stehen mitten im Fließtext auf hellem Grund. Gelb trägt dort
   1,79:1; als Bedienelemente brauchen sie 4,5:1. Dunkelblau kommt auf 12,6:1,
   die Unterstreichung macht sie unabhängig von der Farbe erkennbar. */
.link-8,
.link-datenschutz {
  color: var(--color-secondary);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.link-8:hover,
.link-datenschutz:hover {
  color: var(--color-primary);
}

/* Der Absendeknopf ist ein <input>: Rahmen und Schrift des Browsers abschalten */
.button.secondary.for-submit {
  width: 100%;
  border: 0;
  border-radius: 0;
  appearance: none;
  font-family: Roboto, sans-serif;
  line-height: 20px;
}

/* --- Rueckmeldungen (nur Aussehen, die Pruefung macht das Skript) --- */

.field-error {
  margin-top: 0;
  margin-bottom: 0;
  color: var(--color-error);
  letter-spacing: .5px;
  font-size: .6em;
  font-weight: 700;
  line-height: 1.4;
}

.form-status {
  margin-top: 1em;
  font-size: .8em;
  line-height: 1.4;
}

.form-status.is-error {
  color: var(--color-error);
}

.form-status.is-success {
  color: var(--color-secondary);
}

/* Die Meldungen von assets/js/kontaktformular.js (npm run anfrage). Nach den
   is-*-Regeln, damit nach einer Feldmeldung von main.js die Antwort des
   Servers die Farbe bestimmt. */
.form-status.error {
  color: var(--color-error);
}

.form-status.success {
  color: var(--color-secondary);
}

.field-error[hidden],
.form-status[hidden] {
  display: none;
}

/* --- Merkmale --- */

/* In der Vorlage traegt diese Ueberschrift ein h5; die Raender kommen von dort */
.contact-content-features .heading-4 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.heading-3.in-contact-form {
  margin-top: 0;
}

.feature-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-item {
  column-gap: 1em;
  align-items: stretch;
  margin-bottom: 1em;
  display: flex;
}

.feature-item-icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-primary);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.text-regular.padding-0 {
  align-self: center;
  margin-bottom: 0;
}

/* --- Kontaktangaben --- */

.divider {
  width: 100%;
  height: 2px;
  margin-top: 2em;
  margin-bottom: 2em;
  background-color: #dbdbdb;
}

.contact-content-info {
  margin: 0;
  padding: 0;
  list-style: none;
}

.info-contact-item {
  gap: 1rem;
  margin-bottom: 1.25em;
  flex-direction: row;
  cursor: pointer;
  display: flex;
}

.info-item {
  gap: 1rem;
  margin-bottom: 1.25em;
  display: flex;
}

.info-item-icon {
  width: 2rem;
  height: 2.25rem;
  color: var(--color-primary);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

/* Die Ueberschrift ist hier ein h3 statt des h4 der Vorlage — Rang statt Optik */
.info-item-content .text-regular.padding-0 {
  margin-top: 0;
}

/* Die Hoehe des Kaestchens bestimmt die Zeichnung — beim Telefon-, Post- und
   Ortssymbol ist sie damit 4 px breiter als das Kaestchen, genau wie in der
   Vorlage, wo das 512-px-SVG unsichtbar darueber hinausragte. */
.feature-item-icon svg,
.info-item-icon svg {
  width: auto;
  height: 100%;
  max-width: none;
}

@media screen and (max-width: 991px) {
  .contact-wrapper {
    gap: 0;
    background-image: linear-gradient(var(--color-white) 46%, var(--color-whitesmoke) 48%);
    flex-direction: column;
  }

  .contact-wrapper.padding-global-custom.padding-horizontal-custom {
    padding: 3rem;
  }

  .contact-form {
    max-width: none;
  }

  .contact-content {
    max-width: none;
    margin-top: 3em;
    margin-left: 0;
  }

  .contact-form-fields {
    gap: 1em;
  }

  .contact-form-message {
    min-height: 14rem;
  }

  .feature-item-icon {
    align-self: flex-start;
    width: 1.5rem;
    height: 1.5rem;
  }

  .info-item-icon {
    width: 2rem;
    height: 2rem;
  }
}

@media screen and (max-width: 767px) {
  .feature-item {
    gap: 1rem;
  }

  .info-item {
    gap: .75rem;
  }

  .info-contact-item {
    gap: .75rem;
  }
}

@media screen and (max-width: 479px) {
  .heading-3.in-contact-form {
    font-size: 1.65em;
  }

  .button.is-icon.is-custom {
    padding-left: 0;
  }

  .contact-wrapper {
    background-image: none;
  }

  .contact-wrapper.padding-global-custom.padding-horizontal-custom {
    padding: 1.5rem 1.5rem 1.5rem 1.5em;
  }

  .contact-form-fields {
    display: block;
  }

  .feature-item {
    gap: .75rem;
    align-items: flex-start;
  }

  .feature-item-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .info-item-icon {
    width: 1.75rem;
    height: 1.75rem;
  }
}

/* ===== Wartung und Pflege ===== */

.maintenance-wrapper {
  gap: 2rem;
  width: 100%;
  display: flex;
}

/* Die Textspalte ist mit 50 % angesetzt, schrumpft im Flexlayout aber bis auf
   ihre Mindestbreite (die lange Ueberschrift). Das Bild daneben nimmt den Rest. */
.maintenance-column-content {
  align-self: center;
  width: 50%;
}

.maintenance-column-image {
  align-self: flex-start;
}

/* Hier steckte der einzige Layoutsprung der Seite. Das <img> traegt
   `sizes="100vw"`, und weil das `srcset` mit w-Angaben arbeitet, bestimmt
   `sizes` die Darstellungsbreite. Solange die Datei fehlte, war die unbekannt:
   Das Bild mass 0x0, und beim Laden wuchs der Abschnitt um 387 px.

   Jetzt steht dieselbe Grundbreite (100vw) an der Spalte, das Bild fuellt sie
   mit `width: 100%`, und aus width/height am <img> folgt die Hoehe, bevor die
   Datei da ist. Gemessen bei 15 Breiten von 320 bis 2560 px: auf den Pixel
   dieselben Masse wie vorher, CLS 0 statt 0,02 bis 0,65. */
.maintenance-image {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 992px) {
  .maintenance-column-image {
    flex: 0 1 100vw;
    min-width: 0;
  }
}

/* Aus dem <div> der Vorlage wurde eine Liste; die Abstaende bleiben gleich. */
.maintenance-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.maintenance-item {
  gap: 1rem;
  margin-bottom: 1em;
  display: flex;
}

/* Das Hakensymbol teilt sich die Klasse mit dem Abschnitt "Ueber uns";
   hier auf die Sektion begrenzt, damit sich beide nicht ins Gehege kommen. */
.maintenance .about-icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-primary);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

@media screen and (max-width: 991px) {
  .maintenance-wrapper {
    flex-direction: column;
    gap: 0rem;
  }

  .maintenance-column-image {
    order: -1;
    width: 100%;
  }

  .maintenance-column-content {
    width: 100%;
  }

  /* 2em = 40px, weil hier 1em auf Body-Ebene 20px sind */
  .maintenance-content {
    margin-top: 2em;
  }

  .maintenance .about-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  }

@media screen and (max-width: 767px) {
  .maintenance-item {
    gap: .75rem;
  }

  }

@media screen and (max-width: 479px) {
  .maintenance .about-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  }

/* ============================================================
   Abschluss-Aufruf
   ============================================================ */

/* Der Verlauf steht senkrecht: obere 64 % weiß, untere 36 % dunkelblau.
   Der gelbe Kasten liegt darauf, sodass links und rechts von ihm der
   Übergang zur Fußzeile sichtbar wird. */
.cta {
  background-image: linear-gradient(to top, var(--color-secondary) 36%, var(--color-white) 36%);
}

.cta-wrapper {
  z-index: 3;
  background-color: var(--color-primary);
  justify-content: space-between;
  align-items: center;
  padding: 4em 3em;
  display: flex;
}

.cta-content {
  width: 60%;
}

/* ============================================================
   Fußzeile
   ============================================================ */

.footer {
  background-color: var(--color-secondary);
}

/* Über dem Foto liegt ein fast deckender Verlauf — das Bild scheint nur als
   schwache Struktur durch. */
.footer.padding-small {
  background-image:
    linear-gradient(to bottom, var(--color-secondary), #112b49fa 63%, #112c4afc 100%, transparent),
    var(--hero-foto);
  background-position: 0 0, 50% 50%;
  background-size: auto, cover;
  padding-top: 2em;
  padding-bottom: 1em;
}

.footer-container {
  color: var(--color-white);
  justify-content: space-between;
  display: flex;
}

/* --- Wortmarke: .brand-logo und .brand-text stehen bereits in der
       Kopfleiste und gelten hier unverändert --- */

.footer-brand {
  gap: 10px;
  display: flex;
}

.text-small.in-footer {
  margin: 0;
}

/* Die Vorlage zeigt Schaltflächen als inline-block. Ohne Angabe wäre der
   Link ein Flex-Block und würde die ganze Spaltenbreite einnehmen. */
.button.in-footer {
  display: inline-block;
}

/* --- Linkspalten --- */

.footer-menu {
  gap: 40px 70px;
  grid-template-columns: auto auto 1fr;
  display: grid;
}

.footer-column {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

/* Die Spaltentitel sind Überschriften; Maße und Abstände übernehmen sie vom
   umgebenden Text, damit die Zeile so hoch bleibt wie in der Vorlage. */
.title-small.in-footer {
  margin: 0;
  line-height: inherit;
}

/* Die Liste ist selbst eine Flex-Spalte: so bleiben die Ränder der Links
   erhalten, statt zwischen den Einträgen zusammenzufallen (12 + 6 px). */
.footer-list {
  flex-direction: column;
  /* Ohne flex-start zögen die Einträge auf Spaltenbreite — die Links wären
     dann breiter als ihre Beschriftung und ließen sich daneben anklicken. */
  align-items: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.footer-link {
  color: var(--color-white);
  margin-top: 12px;
  margin-bottom: 6px;
  font-size: .8em;
  line-height: 1.2em;
  text-decoration: none;
  text-transform: none;
}

.footer-link:hover {
  color: var(--color-primary);
}

/* --- Trennlinie und Copyright --- */

.footer-divider {
  background-color: var(--color-primary);
  width: 100%;
  height: 1px;
  margin-top: 70px;
  margin-bottom: 15px;
}

.copyright {
  justify-content: center;
  display: flex;
}

.copyright-item,
.copyright-year,
.copyright-text {
  color: var(--color-white);
  font-size: .65em;
  line-height: 1.2em;
}

.copyright-item {
  text-transform: uppercase;
  margin-right: 2px;
}

.copyright-year {
  margin-right: 4px;
}

.copyright-text {
  text-transform: uppercase;
}

.text-span-3 {
  color: var(--color-primary);
}

/* ============================================================
   Breakpoints
   ============================================================ */

@media screen and (max-width: 991px) {
  .cta-wrapper {
    padding-left: 2em;
    padding-right: 2em;
  }

  .cta-content {
    width: 65%;
  }

  .footer-container {
    flex-direction: column;
  }

  .footer-menu {
    column-gap: 60px;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    margin-top: 4em;
  }
}

@media screen and (max-width: 767px) {
  .cta-wrapper {
    flex-direction: column;
    padding: 3em 1em;
  }

  .cta-content {
    flex-direction: column;
    justify-content: space-around;
    align-items: stretch;
    width: auto;
    margin-bottom: 2rem;
    text-align: center;
  }

  .footer.padding-small {
    padding-top: 1em;
  }

  .footer-container {
    align-items: flex-start;
  }

  .footer-menu {
    grid-template-columns: 1fr;
    justify-items: start;
    margin-top: 40px;
  }

  .footer-divider {
    margin-top: 60px;
  }

  .copyright-year {
    margin-right: 5px;
  }
}

@media screen and (max-width: 479px) {
  /* Ohne Verlauf: der Kasten steht auf Weiß, die Fußzeile beginnt hart. */
  .cta {
    background-image: none;
  }

  .cta-wrapper {
    padding-top: 2em;
    padding-bottom: 2em;
  }

  .cta-contact {
    align-self: stretch;
  }
}

/* ===== Rechtstexte (Impressum, Datenschutz, AGB) ===== */

/* In der Vorlage steht jeder dieser Texte als ein einziger Absatz voller <br>.
   Hier tragen echte Ueberschriften, Absaetze und Listen die Gliederung. Das
   Schriftbild bleibt Zeile fuer Zeile dasselbe, weil ein Abstand von 1.3em
   genau eine Leerzeile hoch ist: Schriftgroesse x Zeilenhoehe 1.3. Groesse,
   Zeilenhoehe und Farbe kommen vom Rahmen (.text-medium) und werden nach
   innen weitergereicht. */
.rechtstext h2,
.rechtstext h3,
.rechtstext p,
.rechtstext ul,
.rechtstext li,
.rechtstext address {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

.rechtstext address {
  font-style: normal;
}

/* Bloecke, auf die in der Vorlage eine Leerzeile folgt. */
.rechtstext > p,
.rechtstext > address,
.rechtstext address > p,
.rechtstext section,
.rechtstext .mit-leerzeile {
  margin-bottom: 1.3em;
}

/* Am Ende klingt nichts nach — den Abstand nach unten setzt .text-medium. */
.rechtstext > :last-child,
.rechtstext > :last-child > :last-child {
  margin-bottom: 0;
}

/* Die Aufzaehlungen der Vorlage sind schlichte Textzeilen mit vorangestelltem
   Zeichen: kein Einzug, Folgezeilen beginnen wieder am linken Rand. Die zwei
   verschiedenen Zeichen stehen so in der Vorlage — Datenschutz und AGB
   benutzen nicht dasselbe. */
.rechtstext ul {
  padding-left: 0;
  list-style: none;
}

.liste-kreis > li::before {
  content: "\25cf\00a0";
}

.liste-punkt > li::before {
  content: "\2022\00a0";
}

/* Das Fundament stellt Links als Flex-Element dar; im Fliesstext bleiben sie
   Teil der Zeile. */
.link-impressum,
.link-telefon {
  display: inline;
}

.link-impressum:hover {
  color: var(--color-secondary);
}

/* Die Rufnummer war in der Vorlage einfacher Text. Sie laesst sich jetzt
   anwaehlen, sieht aber unveraendert aus. */
.link-telefon,
.link-telefon:hover {
  color: inherit;
}

/* Dunkelblau steht in der Vorlage am Firmennamen im Impressum … */
.brand-text-impressum {
  color: var(--color-secondary);
}

/* … und am gesamten AGB-Text. */
.rechtstext.rechtstext-agb {
  color: var(--color-secondary);
}

/* Die erste AGB-Ueberschrift bleibt in der Vorlage bei 1.25rem, auch wenn der
   uebrige Text auf schmalen Bildschirmen kleiner wird. */
.rechtstext h2.bold-text-2 {
  font-size: 1.25rem;
}

/* Der Klammerzusatz einer Ueberschrift steht nicht im Fettschnitt. */
.schrift-normal {
  font-weight: 400;
}

@media screen and (max-width: 479px) {
  /* Impressum und AGB behalten hier die 2em Innenabstand der Vorlage; nur der
     Datenschutz faellt auf 1em — das erledigt .padding-xxlarge-custom im
     Fundament. */
  .impressum.padding-xxlarge-custom,
  .agb.padding-xxlarge-custom {
    padding-top: 2em;
    padding-bottom: 2em;
  }
}

/* ==========================================================================
   Sprunglink — nur sichtbar, wenn er den Fokus trägt
   ========================================================================== */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 1rem 1.5rem;
  background-color: var(--color-secondary);
  color: var(--color-white);
  font-size: 0.9rem;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

/* ==========================================================================
   Bedienung mit dem Finger
   ==========================================================================
   Gemessen auf dem Handy: die Menüpunkte sind 19 px hoch, die Karussellpunkte
   8 px, die Wortmarke 25 px. Eine Fingerkuppe deckt rund 45 px ab — man trifft
   also entweder daneben oder den Nachbarn. Vergrößert wird nur die Fläche, die
   auf eine Berührung reagiert; sichtbar ändert sich nichts. Deshalb ein
   ::after-Rechteck statt Polsterung, die das Layout verschöbe.
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {
  .navbar-menu a,
  .footer-link,
  .navbar-brand,
  .service-item .button.is-icon,
  .link-impressum,
  .link-telefon {
    position: relative;
  }

  .navbar-menu a::after,
  .footer-link::after,
  .navbar-brand::after,
  .link-impressum::after,
  .link-telefon::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    /* Auf mindestens 44 px aufgefüllt, um die Textmitte herum. */
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
    /* Liegt hinter dem Text und fängt nur Berührungen ab. */
    z-index: 0;
  }
}

/* ==========================================================================
   Zeilenumbruch auf schmalen Bildschirmen
   ==========================================================================
   Ohne Silbentrennung bricht die Hero-Überschrift unter 480 px als
   „Qualitätsdienstleistunge / n!" um — ein abgetrenntes „n!" auf eigener
   Zeile. Die Vorlage macht denselben Fehler; hier trennt der Browser nach
   den Regeln der Sprache, die im <html lang="de"> steht.
   ========================================================================== */

@media screen and (max-width: 479px) {
  .hero .heading-1 {
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: normal;
  }
}

/* ===== Referenzfotos vergrößern ===== */

/* Solange die Vergrößerung offen ist, scrollt die Seite dahinter nicht mit.
   scrollbar-gutter hält den Platz des Scrollbalkens frei, sonst rückt die
   Seite beim Öffnen um seine Breite zur Seite. */
html.lupe-offen {
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* Ein modaler Dialog: Er liegt in der obersten Ebene — über der
   mitlaufenden Kopfzeile, ohne z-index —, hält den Fokus bei sich und
   schließt mit Esc. */
.lupe {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-white);
  overflow: hidden;
}

.lupe[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Die Farbe steht hier ausgeschrieben: Ältere Browser reichen
   CSS-Variablen nicht an ::backdrop weiter. #112c4a = --color-secondary. */
.lupe::backdrop {
  background-color: rgba(17, 44, 74, .98);
}

.lupe-bild {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - 10rem);
  max-height: calc(100vh - 8rem);
  max-height: calc(100dvh - 8rem);
  object-fit: contain;
  -webkit-user-select: none;
  user-select: none;
}

.lupe-knopf {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
}

.lupe-knopf svg {
  width: 2.75rem;
  height: 2.75rem;
}

.lupe-knopf:hover {
  color: var(--color-primary);
}

.lupe-zu {
  top: 1rem;
  right: 1rem;
}

.lupe-zurueck,
.lupe-vor {
  top: 50%;
  transform: translateY(-50%);
}

.lupe-zurueck {
  left: 1.5rem;
}

.lupe-vor {
  right: 1.5rem;
}

.lupe-zaehler {
  position: absolute;
  right: 0;
  bottom: 1.5rem;
  left: 0;
  margin: 0;
  font-size: .8em;
  line-height: 1;
  letter-spacing: .125em;
  text-align: center;
}

/* Auf dem Handy nimmt das Foto die volle Breite. Die Pfeile rücken nach
   unten neben den Zähler — dort erreicht sie der Daumen, und das Bild bleibt
   frei. */
@media screen and (max-width: 767px) {
  .lupe-bild {
    max-width: 100vw;
    max-height: calc(100vh - 10rem);
    max-height: calc(100dvh - 10rem);
  }

  .lupe-zurueck,
  .lupe-vor {
    top: auto;
    bottom: .75rem;
    transform: none;
  }

  .lupe-zurueck {
    left: 1rem;
  }

  .lupe-vor {
    right: 1rem;
  }

  .lupe-zaehler {
    bottom: 2rem;
  }
}