/* ==========================================================================
   ASW Electronics GmbH
   Design-System: Farben, Schriften, Abstaende und alle Bausteine der Seite.
   ========================================================================== */

/* --- Schriften, lokal gehostet (kein externer Server, DSGVO-konform) ------ */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/plex-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/plex-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Design-Werte -------------------------------------------------------- */

:root {
  /* Farben aus dem ASW-Logo gemessen */
  --anthrazit:      #242C35;
  --anthrazit-tief: #1A2129;
  --anthrazit-weich:#39424C;
  --teal:           #2E6155;
  --teal-mittel:    #4E8B7A;
  --teal-hell:      #8ED2C0;
  --papier:         #F5F6F4;
  --weiss:          #FFFFFF;
  --grau:           #666E76;
  --grau-hell:      #9AA2A8;
  --linie:          #E1E5E1;
  --linie-dunkel:   rgba(255, 255, 255, .13);

  --schrift-titel: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --schrift-text:  'Plex Sans', 'Segoe UI', system-ui, sans-serif;

  --breite:      1180px;
  --breite-eng:   780px;
  --rand:          24px;
  --abstand:      104px;
  --radius:         4px;
  --radius-gross:  10px;

  --weich: cubic-bezier(.22, .61, .36, 1);
}

/* --- Grundlagen ---------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--weiss);
  color: var(--anthrazit);
  font-family: var(--schrift-text);
  font-size: 17px;
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--anthrazit); }

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.7rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.2rem; letter-spacing: -.005em; }

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

:focus-visible {
  outline: 3px solid var(--teal-mittel);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sprunglink fuer Tastatur- und Screenreader-Nutzung */
.sprung-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--anthrazit);
  color: var(--weiss);
  padding: 14px 22px;
  border-radius: 0 0 var(--radius) 0;
}
.sprung-link:focus { left: 0; color: var(--weiss); }

/* Nur fuer Screenreader, optisch nicht sichtbar */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Raster und Abschnitte ----------------------------------------------- */

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.block { padding-block: var(--abstand); }
.block--papier { background: var(--papier); }
.block--dunkel { background: var(--anthrazit); color: var(--papier); }
.block--dunkel h2, .block--dunkel h3 { color: var(--weiss); }

/* Stossen zwei dunkle Abschnitte aneinander, trennt sie eine feine Linie */
.block--dunkel + .block--dunkel { border-top: 1px solid rgba(142, 210, 192, .22); }

/* Dasselbe fuer zwei helle Abschnitte hintereinander (z. B. FAQ -> Kontakt) */
.block--papier + .block--papier { border-top: 1px solid var(--linie); }

/* Dunkler Abschnitt mit Foto im Hintergrund */
.block--foto {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.block__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  z-index: -2;
}
.block--foto::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(26, 33, 41, .62) 0%,
    rgba(26, 33, 41, .68) 42%,
    rgba(26, 33, 41, .82) 100%);
}

/* Kleine Ueberzeile ueber jeder Abschnittsueberschrift */
.marke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--schrift-titel);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 18px;
}
.marke::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--teal-mittel);
}
.block--dunkel .marke { color: var(--teal-hell); }
.block--dunkel .marke::before { background: var(--teal-hell); }

.kopf-text { max-width: 62ch; }
.kopf-text p {
  font-size: 1.1rem;
  color: var(--grau);
  margin-top: 20px;
}
.block--dunkel .kopf-text p { color: var(--grau-hell); }
.block--dunkel .kopf-text p.marke { color: var(--teal-hell); }

/* Kontakt-Einleitungstext: gleiche Groesse wie 'Ihre Frage war nicht dabei?' */
#kontakt .kopf-text p:not(.marke) { font-size: .98rem; }

/* --- Buttons ------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-family: var(--schrift-titel);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .005em;
  padding: 15px 28px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s var(--weich), color .3s var(--weich),
              border-color .3s var(--weich), transform .3s var(--weich);
}
.knopf svg { flex: none; transition: transform .3s var(--weich); }
.knopf:hover svg { transform: translateX(3px); }

.knopf--voll {
  background: var(--teal);
  color: var(--weiss);
}
.knopf--voll:hover { background: var(--anthrazit); color: var(--weiss); }

.knopf--hell {
  background: var(--teal-hell);
  color: var(--anthrazit-tief);
}
.knopf--hell:hover { background: var(--weiss); color: var(--anthrazit-tief); }

.knopf--rand {
  background: transparent;
  color: var(--papier);
  border-color: rgba(255, 255, 255, .38);
}
.knopf--rand:hover {
  background: rgba(255, 255, 255, .1);
  border-color: var(--papier);
  color: var(--weiss);
}

/* --- Kopfleiste ---------------------------------------------------------- */

.kopfleiste {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color .4s var(--weich), box-shadow .4s var(--weich),
              border-color .4s var(--weich);
  border-bottom: 1px solid transparent;
}
.kopfleiste__innen {
  max-width: var(--breite);
  margin-inline: auto;
  padding: 15px var(--rand);
  display: flex;
  align-items: center;
  gap: 28px;
}

.logo-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  flex: none;
  text-decoration: none;
  transition: opacity .3s var(--weich);
}
.logo-link:hover { opacity: .78; }
.logo-link img { height: 38px; width: auto; }

/* Zwei Logo-Fassungen: hell ueber dem Foto, dunkel auf weisser Leiste */
.logo--hell { display: block; }
.logo--dunkel { display: none; }
.kopfleiste.ist-fest .logo--hell { display: none; }
.kopfleiste.ist-fest .logo--dunkel { display: block; }

/* Firmenzusatz als echter Text, damit er in jeder Groesse scharf und lesbar bleibt */
.logo-slogan {
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: .6rem;
  line-height: 1.3;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #C7CFD2;
  transition: color .4s var(--weich);
}
.kopfleiste.ist-fest .logo-slogan {
  color: var(--grau);
}
/* Ab hier wird die Menuezeile eng: der Firmenzusatz weicht, das Zeichen bleibt */
@media (max-width: 1180px) {
  .logo-slogan { display: none; }
}

/* Zustand 2: noch im Kopfbereich, aber schon gescrollt. Dunkle Leiste,
   damit der Text darunter nicht durch die Navigation laeuft. */
.kopfleiste.ist-dunkel {
  background: rgba(26, 33, 41, .92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--linie-dunkel);
}

/* Zustand 3: unterhalb des Kopfbereichs, helle Leiste */
.kopfleiste.ist-fest {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--linie);
}

.navigation {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 34px);
}
.navigation ul {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 30px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.navigation a {
  position: relative;
  font-family: var(--schrift-titel);
  font-size: .97rem;
  font-weight: 500;
  color: var(--papier);
  text-decoration: none;
  padding-block: 6px;
  transition: color .3s var(--weich);
}
.navigation a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--weich);
}
.navigation a:hover::after, .navigation a:focus-visible::after { transform: scaleX(1); }
.kopfleiste.ist-fest .navigation a { color: var(--anthrazit); }
.kopfleiste.ist-fest .navigation a:hover { color: var(--teal); }

/* Sprachwahl DE / EN, ganz rechts in der Kopfleiste */
.sprachwahl {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  font-family: var(--schrift-titel);
  font-size: .9rem;
  font-weight: 500;
}
.sprachwahl__aktiv,
.sprachwahl__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border-radius: 7px;
  color: var(--papier);
  text-decoration: none;
  transition: color .3s var(--weich), background-color .3s var(--weich), opacity .3s var(--weich);
}
.sprachwahl__aktiv { background: rgba(255, 255, 255, .16); }
.sprachwahl__link { opacity: .7; }
.sprachwahl__link:hover,
.sprachwahl__link:focus-visible { opacity: 1; background: rgba(255, 255, 255, .1); }
.sprachwahl__fahne {
  width: 21px;
  height: 15px;
  border-radius: 2px;
  display: block;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}
.kopfleiste.ist-fest .sprachwahl__aktiv,
.kopfleiste.ist-fest .sprachwahl__link { color: var(--anthrazit); }
.kopfleiste.ist-fest .sprachwahl__aktiv { background: var(--papier); }
.kopfleiste.ist-fest .sprachwahl__link:hover,
.kopfleiste.ist-fest .sprachwahl__link:focus-visible { background: var(--papier); color: var(--teal); }

/* Aufklappmenue unter "Leistungen" */
.hat-menue { position: relative; }
.hat-menue > a { display: inline-flex; align-items: center; gap: 6px; }
.hat-menue > a svg { transition: transform .3s var(--weich); }
.hat-menue:hover > a svg, .hat-menue:focus-within > a svg { transform: rotate(180deg); }
.unter-schalter { display: none; }

.unter-menue {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 232px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(10px);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: 0 20px 44px -20px rgba(26, 33, 41, .4);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--weich), transform .25s var(--weich), visibility .25s;
  z-index: 30;
}
.hat-menue:hover .unter-menue,
.hat-menue:focus-within .unter-menue {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(4px);
}
.navigation .unter-menue a {
  display: block;
  padding: 10px 14px;
  border-radius: 3px;
  font-size: .94rem;
  color: var(--anthrazit);
  white-space: nowrap;
}
.navigation .unter-menue a::after { display: none; }
.navigation .unter-menue a:hover,
.navigation .unter-menue a:focus-visible { background: var(--papier); color: var(--teal); }

.kopf-knopf {
  padding: 11px 21px;
  font-size: .95rem;
  background: var(--teal-hell);
  color: var(--anthrazit-tief);
}
.kopfleiste.ist-fest .kopf-knopf { background: var(--teal); color: var(--weiss); }
.kopfleiste.ist-fest .kopf-knopf:hover { background: var(--anthrazit); }

/* Menue-Schalter, nur auf dem Handy sichtbar */
.menue-schalter {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
}
.menue-schalter span {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 1.8px;
  background: var(--papier);
  transform: translateX(-50%);
  transition: transform .35s var(--weich), opacity .25s var(--weich);
}
.menue-schalter span:nth-child(1) { top: 16px; }
.menue-schalter span:nth-child(2) { top: 22px; }
.menue-schalter span:nth-child(3) { top: 28px; }
.kopfleiste.ist-fest .menue-schalter { border-color: var(--linie); }
.kopfleiste.ist-fest .menue-schalter span { background: var(--anthrazit); }

.menue-schalter[aria-expanded='true'] span:nth-child(1) { transform: translateX(-50%) translateY(6px) rotate(45deg); }
.menue-schalter[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.menue-schalter[aria-expanded='true'] span:nth-child(3) { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }

/* --- Kopfbereich mit Ortsansicht ----------------------------------------- */

.kopfbereich {
  position: relative;
  /* Fuellt am Rechner eine volle Bildschirmhoehe (auf sehr grossen
     Monitoren bei 1040px gedeckelt), damit der Scroll-Effekt zu Box 2
     auf jeder Bildschirmgroesse gleich wirkt. */
  min-height: min(100svh, 1040px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-block: 132px 40px;
  overflow: hidden;
  isolation: isolate;
}
/* Der Textblock sitzt mittig, die Leistungszeile darunter am unteren Rand. */
.kopfbereich > .huelle:first-of-type { margin-block: auto; }
.hero-leisten-huelle { position: relative; margin-top: 44px; }

/* Scroll-Effekt: der Hero bleibt stehen, "Auf Dauer gedacht" schiebt sich
   darueber. Nur am Rechner, und nicht bei reduzierter Bewegung. */
@media (min-width: 1001px) and (prefers-reduced-motion: no-preference) {
  .hero-stapel { position: relative; }

  .hero-stapel > .kopfbereich {
    position: sticky;
    top: 0;
    /* --hero-fortschritt (0 bis 1) wird beim Scrollen per Skript gesetzt.
       Apple-Stil: der Hero rueckt in die Tiefe (leicht kleiner, weicher,
       blasser), waehrend Box 2 nach vorn kommt. */
    transform-origin: center 30%;
    opacity: calc(1 - var(--hero-fortschritt, 0) * .55);
    transform: scale(calc(1 - var(--hero-fortschritt, 0) * .06));
    filter: blur(calc(var(--hero-fortschritt, 0) * 4px));
  }

  .hero-stapel > #unterschied {
    position: relative;
    z-index: 1;
    background: var(--weiss);
    /* Oberkante ist zuerst leicht gerundet und glaettet sich, waehrend
       Box 2 ueber den Hero faehrt. Ohne Skript: Standard 1, also flach. */
    --box2-kante: calc((1 - min(var(--hero-fortschritt, 1) * 3.5, 1)) * 24px);
    border-top-left-radius: var(--box2-kante);
    border-top-right-radius: var(--box2-kante);
  }
}

.kopfbereich__bild {
  position: absolute;
  inset: -2%;
  width: 104%;
  height: 104%;
  object-fit: cover;
  object-position: right center;
  z-index: -2;
  filter: saturate(.92) contrast(1.02);
  transform: scale(1.02);
}

/* Anthrazit-Schleier: links dichter, damit der Text sitzt, rechts durchscheinend */
.kopfbereich::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(26, 33, 41, .94) 0%,
      rgba(26, 33, 41, .82) 38%,
      rgba(26, 33, 41, .55) 72%,
      rgba(26, 33, 41, .42) 100%),
    linear-gradient(180deg,
      rgba(26, 33, 41, .25) 0%,
      rgba(26, 33, 41, 0) 30%,
      rgba(26, 33, 41, .55) 100%);
}

.hero-innen {
  position: relative;
  max-width: 760px;
}

.hero-titel {
  color: var(--weiss);
  margin: 0;
}
.hero-titel__auftakt {
  display: block;
  font-size: clamp(.8rem, 1.5vw, 1rem);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal-hell);
  margin-bottom: clamp(14px, 2vw, 22px);
}
.hero-titel__haupt {
  display: block;
  font-size: clamp(2rem, 4.6vw, 3.625rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
  text-wrap: balance;
}
/* Zweite Zeile der Hauptaussage: gleiche Groesse, im ASW-Tuerkis */
.hero-titel__akzent {
  display: block;
  margin-top: .04em;
  font-size: clamp(2rem, 4.6vw, 3.625rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--teal-hell);
  text-wrap: balance;
}

.hero-sub {
  margin-top: clamp(22px, 3vw, 30px);
  font-size: clamp(1rem, 1.7vw, 1.14rem);
  line-height: 1.6;
  color: #C7CFD2;
  max-width: 60ch;
  text-wrap: pretty;
}

.hero-knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
}

/* Leistungszeile am unteren Rand des Heros */
.hero-leisten {
  margin: 0;
  padding: clamp(16px, 2.2vw, 24px) 0 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-family: var(--schrift-titel);
}
.hero-leisten li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-right: clamp(12px, 2vw, 24px);
  font-size: clamp(.68rem, .95vw, .8rem);
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.hero-leisten li + li {
  padding-left: clamp(16px, 2.6vw, 32px);
  border-left: 1px solid rgba(255, 255, 255, .16);
}
.hero-leisten__nr { color: var(--teal-hell); font-weight: 600; }
.hero-leisten a {
  color: var(--papier);
  text-decoration: none;
  transition: color .25s var(--weich);
}
.hero-leisten a:hover,
.hero-leisten a:focus-visible { color: var(--teal-hell); }

/* --- Box 2: Auf Dauer gedacht -------------------------------------- */

.dauer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: clamp(32px, 6vw, 84px);
  align-items: center;
}

.dauer__haupt h2 {
  margin: 16px 0 0;
  max-width: 24ch;
}
.dauer__text {
  margin: 22px 0 0;
  font-size: 1.1rem;
  color: var(--grau);
  max-width: 50ch;
}
.dauer__zitat {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(142, 210, 192, .16);
  border-radius: var(--radius-gross);
  padding: clamp(28px, 3.6vw, 46px);
}
.dauer__zitat::before {
  content: '\201C';
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: .5;
  color: var(--teal-mittel);
  margin-bottom: 20px;
}
.dauer__spruch {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.5vw, 1.42rem);
  line-height: 1.46;
  letter-spacing: -.005em;
  color: var(--anthrazit);
  text-wrap: balance;
}
.dauer__quelle {
  margin: 22px 0 0;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grau);
}

@media (max-width: 860px) {
  .dauer {
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
  }
  .dauer__zitat { align-self: start; }
}

/* --- Dezenter Abschnitts-CTA ------------------------------------------------ */
.abschnitt-cta {
  margin-top: clamp(28px, 4vw, 40px);
  font-size: .98rem;
  color: var(--grau);
}
.abschnitt-cta a {
  color: var(--teal);
  font-family: var(--schrift-titel);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color .2s var(--weich);
}
.abschnitt-cta a:hover { color: var(--anthrazit); }
.block--dunkel .abschnitt-cta { color: var(--grau-hell); }
.block--dunkel .abschnitt-cta a { color: var(--teal-hell); }
.block--dunkel .abschnitt-cta a:hover { color: var(--weiss); }
.kopf-text--mitte + .abschnitt-cta,
.abschnitt-cta--mitte { text-align: center; }
.block--leistungen .abschnitt-cta { margin-top: clamp(48px, 7vw, 80px); }

/* Auffaelligerer Abschnitts-CTA mit tuerkisem Knopf */
.cta-block {
  margin-top: clamp(30px, 4vw, 44px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
}
.cta-block__frage {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: 1.06rem;
  color: var(--anthrazit);
}
.block--dunkel .cta-block__frage { color: var(--papier); }

/* --- Fuehrungspfeil: leiser Hinweis zum naechsten Abschnitt ------------- */
.weiter-pfeil {
  display: block;
  width: max-content;
  margin: clamp(34px, 5vw, 58px) auto 0;
  padding: 6px;
  color: var(--grau-hell);
  transition: color .25s var(--weich), transform .25s var(--weich);
}
.weiter-pfeil svg { display: block; }
.weiter-pfeil:hover,
.weiter-pfeil:focus-visible { color: var(--teal-mittel); transform: translateY(4px); }
.block--dunkel .weiter-pfeil:hover,
.block--dunkel .weiter-pfeil:focus-visible,
.kopfbereich .weiter-pfeil:hover,
.kopfbereich .weiter-pfeil:focus-visible { color: var(--teal-hell); }
/* Im Hero etwas Abstand nach unten, damit er nicht am Rand klebt */
.kopfbereich .weiter-pfeil { margin-bottom: 4px; }

@media (prefers-reduced-motion: reduce) {
  .weiter-pfeil { transition: none; }
  .weiter-pfeil:hover,
  .weiter-pfeil:focus-visible { transform: none; }
}
@media print { .weiter-pfeil { display: none !important; } }

/* --- FAQ: vier Themenspalten mit Fragen zum Aufklappen ----------------- */
.faq-liste {
  margin: clamp(40px, 5vw, 60px) 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.faq-block { min-width: 0; }
.faq-block__titel {
  margin: 0 0 2px;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: clamp(.95rem, 1.3vw, 1.1rem);
  line-height: 1.25;
  letter-spacing: -.005em;
  color: var(--anthrazit);
}
.faq-block__nr {
  color: var(--teal-mittel);
  font-variant-numeric: tabular-nums;
  margin-right: 7px;
}
.faq-block__titel::after {
  content: '';
  display: block;
  margin-top: 6px;
  width: 100%;
  height: 2px;
  background: var(--linie);
}

/* Einspaltige FAQ-Liste (Startseite und Leistungsseiten) */
.faq-liste--einfach {
  display: block;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.faq-liste--einfach .faq-item:first-of-type { border-top: 0; }
.faq-liste--einfach .faq-item:last-child { border-bottom: 1px solid var(--linie); }

.faq-item { border-top: 1px solid var(--linie); }
.faq-block .faq-item:first-of-type { border-top: 0; }
.faq-block .faq-item:last-child { border-bottom: 1px solid var(--linie); }

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 1px;
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: .95rem;
  line-height: 1.34;
  color: var(--anthrazit);
  transition: color .2s var(--weich);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--teal); }
.faq-item summary:focus-visible {
  outline: 3px solid var(--teal-mittel);
  outline-offset: 2px;
  border-radius: 2px;
}
.faq-item summary::after {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-right: 2px solid var(--teal-mittel);
  border-bottom: 2px solid var(--teal-mittel);
  transform: rotate(45deg);
  transition: transform .25s var(--weich);
}
.faq-item[open] summary { color: var(--teal); }
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: 8px; }

.faq-antwort {
  padding: 0 1px 16px;
}
.faq-antwort p { margin: 0; color: var(--grau); font-size: .94rem; line-height: 1.62; }

@media (max-width: 1080px) {
  .faq-liste { grid-template-columns: repeat(2, 1fr); gap: 30px 40px; }
  .faq-item summary { font-size: 1rem; }
  .faq-antwort p { font-size: .95rem; }
}
@media (max-width: 620px) {
  .faq-liste { grid-template-columns: 1fr; gap: 0; }
  .faq-block:not(:first-child) { margin-top: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after { transition: none; }
}

/* Bildrahmen mit festem Seitenverhaeltnis, per Klasse steuerbar */
.bildrahmen {
  margin: 0;
  border-radius: var(--radius-gross);
  overflow: hidden;
  background: var(--anthrazit);
}
.bildrahmen img {
  width: 100%;
  aspect-ratio: var(--seiten, 4 / 3);
  object-fit: cover;
  transition: transform 1.1s var(--weich);
}
.bildrahmen:hover img { transform: scale(1.03); }
.bildrahmen--16-10 { --seiten: 16 / 10; }
.bildrahmen--3-2   { --seiten: 3 / 2; }

.bildrahmen figcaption {
  padding: 14px 18px 16px;
  font-size: .89rem;
  line-height: 1.5;
  color: var(--grau);
  background: var(--weiss);
}
.block--papier .bildrahmen figcaption { background: var(--weiss); }

/* --- Leistungen: vier Fotokacheln mit Teal-Eckwinkeln ------------------- */
/* Zweierraster aus vier anklickbaren Kacheln, jede mit Foto und Namen. */

.block--leistungen { background: #1b2128; }

.kopf-text--mitte {
  max-width: none;
  margin-inline: auto;
  margin-bottom: clamp(44px, 6vw, 72px);
  text-align: center;
}
.kopf-text--mitte .marke { justify-content: center; }

/* Kopf der Leistungen */
.leistungen__kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px 48px;
  margin-bottom: clamp(38px, 5vw, 58px);
}
.leistungen__titel { min-width: 0; }
.leistungen__titel h2 { margin: 0; }

.rad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.2vw, 26px);
}

.rad-kachel {
  --kachel-grund: #151A20;
  position: relative;
  width: 100%;
  align-self: stretch;
}
.rad-kachel__kopf {
  position: relative;
  display: flex;
  overflow: hidden;
  min-height: clamp(266px, 22vw, 320px);
  border-radius: 14px;
  background: var(--kachel-grund);
  list-style: none;
  cursor: pointer;
  transition: transform .3s var(--weich), box-shadow .3s var(--weich);
}
.rad-kachel__kopf:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px -28px rgba(0, 0, 0, .85);
}
@media (prefers-reduced-motion: reduce) {
  .rad-kachel__kopf { transition: none; }
  .rad-kachel__kopf:hover { transform: none; }
}
.rad-kachel__kopf::-webkit-details-marker { display: none; }
.rad-kachel__kopf:focus-visible {
  outline: 3px solid var(--teal-hell);
  outline-offset: 4px;
}

/* Das Foto sitzt rechts in der Kachel und laeuft nach links aus */
.rad-kachel__bild {
  position: absolute;
  inset: 0 0 0 auto;
  width: 62%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  transition: transform 1.1s var(--weich);
}
.rad-kachel__kopf:hover .rad-kachel__bild { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .rad-kachel__bild { transition: none; }
  .rad-kachel__kopf:hover .rad-kachel__bild { transform: none; }
}

/* Verlauf in der Kachelfarbe, damit der Text links klar lesbar bleibt */
.rad-kachel__kopf::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--kachel-grund) 0%,
    var(--kachel-grund) 46%,
    rgba(21, 26, 32, .62) 68%,
    rgba(21, 26, 32, 0) 92%);
  pointer-events: none;
}

.rad-kachel__innen {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(22px, 2.1vw, 30px);
}

.rad-kachel__nr {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--schrift-titel);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--grau-hell);
}
.rad-kachel__nr::after {
  content: '';
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, .3);
}

.rad-kachel__name {
  margin: 18px 0 0;
  max-width: 11ch;
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: clamp(1.22rem, 1.5vw, 1.5rem);
  line-height: 1.2;
  color: var(--weiss);
  transition: color .3s var(--weich);
}
.rad-kachel__kopf:hover .rad-kachel__name,
.rad-kachel[open] .rad-kachel__name { color: var(--teal-hell); }

.rad-kachel__mehr {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 28px;
  font-size: .95rem;
  color: var(--papier);
  transition: color .3s var(--weich);
}
.rad-kachel__mehr-text {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--teal-hell);
}
.rad-kachel__mehr svg { transition: transform .3s var(--weich); }
.rad-kachel__kopf:hover .rad-kachel__mehr,
.rad-kachel[open] .rad-kachel__mehr { color: var(--teal-hell); }
.rad-kachel[open] .rad-kachel__mehr svg { transform: rotate(90deg); }

/* Aufklappbarer Text je Leistung, wie bei den FAQ */
.rad-kachel__text {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(142, 210, 192, .22);
}
.rad-kachel__text p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.62;
  color: var(--grau-hell);
}
.rad-kachel__text p + p {
  margin-top: 12px;
}

/* Einleitungszeile ueber den Hersteller-Gruppen */
.rad-kachel__text .marken__einleitung {
  margin-top: 18px;
  color: var(--weiss);
  font-weight: 600;
}

/* Hersteller-Namen als kleine Marken-Chips im ASW-Farbton */
.marken {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.marken__titel {
  margin: 0 0 9px;
  font-family: var(--schrift-titel);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--teal-hell);
}
.marken__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.marken__liste li {
  padding: 5px 11px;
  font-family: var(--schrift-titel);
  font-size: .8rem;
  font-weight: 500;
  line-height: 1;
  color: var(--weiss);
  background: rgba(142, 210, 192, .1);
  border: 1px solid rgba(142, 210, 192, .28);
  border-radius: 999px;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .rad-kachel__mehr svg { transition: none; }
}

/* Ab hier steht das Foto oben und der Text darunter */
@media (max-width: 900px) {
  .leistungen__kopf { flex-direction: column; align-items: flex-start; }


  .rad { grid-template-columns: 1fr; gap: 20px; }

  .rad-kachel__kopf { display: block; min-height: 0; }
  .rad-kachel__kopf::after { display: none; }
  .rad-kachel__bild {
    position: static;
    width: 100%;
    height: clamp(160px, 34vw, 230px);
    object-position: center;
  }
  .rad-kachel__innen { padding: 22px clamp(20px, 4vw, 26px) 26px; }
  .rad-kachel__name { max-width: none; }
  .rad-kachel__mehr { padding-top: 22px; }

}

/* --- Schmales weisses Band mit Zitat ----------------------------------- */

.zitat-band {
  background: var(--weiss);
  padding-block: clamp(34px, 5vw, 54px);
}
.zitat-band blockquote {
  margin: 0;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.zitat-band blockquote::before {
  content: '\201C';
  display: block;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: clamp(3rem, 6vw, 4.2rem);
  line-height: .8;
  color: var(--teal-mittel);
  margin: 0 auto 6px;
}
.zitat-band p {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: clamp(1.06rem, 1.9vw, 1.42rem);
  line-height: 1.44;
  letter-spacing: -.005em;
  color: var(--anthrazit);
  text-wrap: balance;
}

/* --- Ablauf -------------------------------------------------------------- */

.schritte {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 60px;
}

.schritt { position: relative; }
.schritt__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(142, 210, 192, .38);
  border-radius: 50%;
  color: var(--teal-hell);
}
.schritt__icon svg { width: 21px; height: 21px; }
.schritt__nr {
  display: block;
  margin-top: 16px;
  font-family: var(--schrift-titel);
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--teal-hell);
}
.schritt::after {
  content: '';
  position: absolute;
  top: 23px;
  left: 60px;
  right: -34px;
  height: 1px;
  background: rgba(142, 210, 192, .3);
}
.schritt:last-child::after { display: none; }

.schritt h3 { margin: 12px 0 10px; }
.schritt p {
  color: var(--grau-hell);
  font-size: .98rem;
  margin: 0;
}

.ablauf-cta {
  margin-top: clamp(40px, 6vw, 60px);
  text-align: center;
}

/* --- Ueber uns ----------------------------------------------------------- */

.ueber__raster {
  display: grid;
  grid-template-columns: minmax(260px, 52%) 1fr;
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
  margin-top: clamp(24px, 4vw, 44px);
}
.ueber__bild {
  margin: 0;
  max-width: 640px;
}
.ueber__bild img {
  width: 100%;
  height: auto;
  display: block;
}

.ueber__text p {
  font-size: 1.12rem;
  line-height: 1.62;
  color: var(--grau);
  margin: 0;
}
.ueber__text p + p { margin-top: 16px; }
.ueber__text p strong {
  font-weight: 600;
  color: var(--anthrazit);
}
.ueber__trenner {
  width: 40px;
  height: 2px;
  margin: 24px 0;
  border: 0;
  background: var(--teal-mittel);
}

@media (max-width: 880px) {
  .ueber__raster {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }
  .ueber__bild { max-width: 480px; }
}
.ueber__text p:first-of-type {
  font-size: 1.34rem;
  font-weight: 600;
  color: var(--anthrazit);
  line-height: 1.5;
}

/* --- Erfahrung: Aufbau wie der Ablauf-Abschnitt --------------------- */

/* Hintergrundbild hier weniger stark abdecken: links dunkel fuer die
   Schrift, nach rechts heller, damit das Motiv erkennbar bleibt. */
#erfahrung.block--foto::before {
  background:
    linear-gradient(90deg,
      rgba(26, 33, 41, .92) 0%,
      rgba(26, 33, 41, .72) 45%,
      rgba(26, 33, 41, .42) 100%),
    linear-gradient(180deg,
      rgba(26, 33, 41, .32) 0%,
      rgba(26, 33, 41, .58) 100%);
}

.erfahrung__kopf { max-width: 66ch; }
.erfahrung__akzent { display: block; color: var(--teal-hell); }

/* Einzelnes Wort in einer Ueberschrift im ASW-Tuerkis */
.akzent-teal { color: var(--teal-hell); }
.block--papier .akzent-teal { color: var(--teal); }
.erfahrung__intro {
  margin: 18px 0 0;
  max-width: 58ch;
  font-size: 1.02rem;
  color: var(--grau-hell);
}
.erfahrung__intro strong {
  font-weight: 600;
  color: var(--weiss);
}

.erfahrung__zahlen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(38px, 5vw, 58px);
  padding-block: clamp(26px, 3.6vw, 38px);
  border-top: 1px solid var(--linie-dunkel);
  border-bottom: 1px solid var(--linie-dunkel);
}
.erfahrung__zahl { padding-right: clamp(22px, 4vw, 48px); }
.erfahrung__zahl + .erfahrung__zahl {
  border-left: 1px solid var(--linie-dunkel);
  padding-left: clamp(22px, 4vw, 48px);
}
.erfahrung__wert {
  display: block;
  font-family: var(--schrift-titel);
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--teal-hell);
}
.erfahrung__marke {
  display: block;
  margin: 12px 0 8px;
  font-family: var(--schrift-titel);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--weiss);
}
.erfahrung__note {
  margin: 0;
  font-size: .98rem;
  line-height: 1.55;
  color: var(--grau-hell);
}
.erfahrung__abschluss {
  margin: 22px 0 0;
  font-size: .92rem;
  color: var(--grau-hell);
}

@media (min-width: 761px) and (max-width: 1080px) {
  .erfahrung__zahlen { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .erfahrung__zahl { border-left: none; padding-left: 0; }
  .erfahrung__zahl:nth-child(even) {
    border-left: 1px solid var(--linie-dunkel);
    padding-left: clamp(22px, 4vw, 48px);
  }
  .erfahrung__zahl:nth-child(n+3) {
    border-top: 1px solid var(--linie-dunkel);
    padding-top: 20px;
  }
}

@media (max-width: 760px) {
  .erfahrung__zahlen { grid-template-columns: 1fr; padding-block: 4px; }
  .erfahrung__zahl { padding: 20px 0; border-top: 1px solid var(--linie-dunkel); }
  .erfahrung__zahl:first-child { border-top: 0; }
  .erfahrung__zahl + .erfahrung__zahl { border-left: 0; padding-left: 0; }
}

/* --- Naht zwischen FAQ und Kontakt ------------------------------------ */
/* Beide Abschnitte stehen auf demselben hellen Grund und gehen direkt
   ineinander ueber, deshalb reicht hier ein knapper Abstand. */
#faq { padding-bottom: clamp(18px, 2.2vw, 26px); }
#kontakt { padding-top: clamp(18px, 2.2vw, 26px); }

/* --- Kontakt ------------------------------------------------------------- */

.kontakt__raster {
  max-width: 640px;
  margin: 56px auto 0;
}

.formular {
  display: grid;
  gap: 20px;
  background: var(--anthrazit);
  border: 1px solid rgba(154, 162, 168, .25);
  border-radius: var(--radius-gross);
  padding: clamp(22px, 3.4vw, 38px);
}

.feld { display: grid; gap: 7px; }
.feld label {
  font-family: var(--schrift-titel);
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--weiss);
}
.feld label span { color: var(--teal-hell); }

.feld input, .feld select, .feld textarea {
  font-family: var(--schrift-text);
  font-size: 1rem;
  color: var(--weiss);
  background: rgba(255, 255, 255, .04);
  padding: 13px 15px;
  border: 1px solid rgba(154, 162, 168, .3);
  border-radius: var(--radius);
  width: 100%;
  transition: border-color .3s var(--weich), box-shadow .3s var(--weich);
}
.feld input::placeholder, .feld textarea::placeholder { color: var(--grau-hell); opacity: .85; }
.feld textarea { resize: vertical; min-height: 118px; line-height: 1.6; }
.feld select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%239AA2A8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
}
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--grau-hell); }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none;
  border-color: var(--teal-hell);
  box-shadow: 0 0 0 3px rgba(142, 210, 192, .22);
}

.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Linksbuendiger Pflichtfeld-Hinweis: knapp unter dem letzten Textfeld,
   mit etwas mehr Luft zum Button darunter. Gleiche Farbe wie die
   Platzhaltertexte in den Eingabefeldern. */
.formular__pflicht {
  margin: -10px 0 0;
  font-size: .84rem;
  color: var(--grau-hell);
}

/* Optionales Anhaengen einer Datei per Klick oder Ziehen */
.feld__titel {
  font-family: var(--schrift-titel);
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--anthrazit);
}
.feld__optional {
  font-weight: 400;
  font-size: .82em;
  color: var(--grau-hell);
}
.feld__hinweis {
  margin: 0;
  font-size: .84rem;
  color: var(--grau-hell);
}

.ablage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 86px;
  padding: 16px 20px;
  text-align: center;
  border: 1.5px dashed var(--linie);
  border-radius: var(--radius);
  background: var(--weiss);
  color: var(--grau);
  font-size: .95rem;
  cursor: pointer;
  transition: border-color .2s var(--weich), background-color .2s var(--weich);
}
.ablage:hover { border-color: var(--teal-mittel); }
.ablage:focus-within {
  border-color: var(--teal-mittel);
  box-shadow: 0 0 0 3px rgba(78, 139, 122, .16);
}
.ablage.ist-drueber {
  border-color: var(--teal);
  background: rgba(78, 139, 122, .07);
}
.ablage.ist-gefuellt {
  border-style: solid;
  border-color: var(--teal-mittel);
  color: var(--anthrazit);
}
.ablage input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
}
.ablage__link {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Honeypot: unsichtbare Falle fuer Spam-Programme */
.falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.zustimmung {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .92rem;
  color: var(--grau);
  line-height: 1.55;
}
.zustimmung input {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 2px;
  accent-color: var(--teal);
  cursor: pointer;
}

.formular__fuss {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.formular__hinweis {
  font-size: .86rem;
  color: var(--grau-hell);
  margin: 0;
  text-align: center;
  line-height: 1.5;
}
.formular__hinweis a { white-space: nowrap; color: var(--teal-hell); }

/* Container fuer die optionale Turnstile-Sicherheitsabfrage. Bleibt fuer die
   allermeisten Besucher leer und unsichtbar (hidden-Attribut) und wird nur
   dann eingeblendet, wenn der Server bei einer einzelnen Anfrage eine
   zusaetzliche Bestaetigung verlangt. */
.formular__verifizierung {
  margin-top: 18px;
}
.formular__verifizierung[hidden] {
  display: none;
}
.formular__verifizierung-text {
  font-size: .86rem;
  color: var(--grau-hell);
  margin: 0 0 10px;
}

.meldung {
  padding: 15px 18px;
  border-radius: var(--radius);
  font-size: .95rem;
  border-left: 3px solid;
}
.meldung--gut  { background: #EEF6F3; border-color: var(--teal-mittel); color: #22503F; }
.meldung--fehler { background: #FBF0EE; border-color: #B4614F; color: #7C3A2C; }

/* Antwortseite von send.php (nur ohne JavaScript sichtbar) */
.formular-antwort {
  max-width: 640px;
  margin-inline: auto;
  padding-block: 120px 96px;
  text-align: center;
}
.formular-antwort__logo { width: 190px; margin: 0 auto 44px; }
.formular-antwort h1 { font-size: 2rem; color: var(--teal); }
.formular-antwort.ist-fehler h1 { color: #B4614F; }
.formular-antwort p { margin-top: 20px; color: var(--grau); font-size: 1.06rem; }
.formular-antwort__zurueck { margin-top: 40px; }

.kontakt__karte {
  background: var(--anthrazit);
  color: var(--papier);
  border-radius: var(--radius-gross);
  padding: 40px 36px;
}
.kontakt__karte h3 { color: var(--weiss); margin-bottom: 26px; }

/* Drei Hinweise in der Kontaktkarte: Symbol, fette Zeile, Erklaerung darunter */
.kontakt__hinweise {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 26px;
}
.kontakt__hinweis {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}
.kontakt__hinweis > svg {
  flex: none;
  margin-top: 2px;
  color: var(--teal-hell);
}
.kontakt__hinweis > div { flex: 1; min-width: 0; }
.kontakt__hinweis-titel {
  margin: 0 0 4px;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 1.06rem;
  color: var(--weiss);
}
.kontakt__hinweis-text {
  margin: 0;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--grau-hell);
}
.kontakt__hinweis-text a {
  color: var(--weiss);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  transition: color .3s var(--weich), border-color .3s var(--weich);
}
.kontakt__hinweis-text a:hover,
.kontakt__hinweis-text a:focus-visible {
  color: var(--teal-hell);
  border-color: var(--teal-hell);
}

/* --- Fussbereich --------------------------------------------------------- */

.fuss {
  background: var(--anthrazit-tief);
  color: var(--grau-hell);
  padding-block: 62px 0;
  font-size: .95rem;
  border-top: 1px solid rgba(142, 210, 192, .22);
}
.fuss__raster {
  display: grid;
  grid-template-columns: minmax(260px, 320px) auto 1fr;
  gap: 40px 64px;
  padding-bottom: 40px;
}
.fuss__marke .fuss__logo { width: 232px; height: auto; margin-bottom: 22px; }
.fuss p { max-width: 40ch; line-height: 1.62; }

/* Navigation und Rechtliches als zwei horizontale Link-Zeilen untereinander */
.fuss__navi-gruppe {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 5px;
}
.fuss ul.fuss__links-zeile {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}

/* Untere Abschlusszeile: Copyright links, kleiner Hinweis rechts */
.fuss__unten {
  border-top: 1px solid var(--linie-dunkel);
  margin-top: 8px;
  padding-block: 22px 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  font-size: .84rem;
  color: var(--grau-hell);
}
.fuss__unten-trenner {
  display: inline-block;
  width: 1px;
  height: 11px;
  margin: 0 10px -1px;
  background: var(--linie-dunkel);
}

/* Anschrift mit Ortsmarke, abgesetzt durch eine feine Linie */
.fuss__ort {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--linie-dunkel);
  max-width: 40ch;
}
.fuss__ort > svg { flex: none; margin-top: 2px; color: var(--grau-hell); }
.fuss__adresse {
  font-style: normal;
  line-height: 1.62;
}

.fuss h4 {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-hell);
  margin-bottom: 10px;
}
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fuss a {
  display: inline-block;
  padding-block: 5px;
  color: var(--grau-hell);
  text-decoration: none;
  transition: color .3s var(--weich);
}
.fuss a:hover { color: var(--teal-hell); }

/* --- Rechtsseiten (Impressum, Datenschutz) ------------------------------- */

.rechts-kopf {
  background: var(--anthrazit);
  color: var(--papier);
  padding-block: 158px 68px;
}
.rechts-kopf h1 { color: var(--weiss); font-size: clamp(2rem, 4.4vw, 3rem); }
.rechts-kopf p { color: var(--grau-hell); margin-top: 16px; }

/* Textbreite begrenzen, aber linksbuendig zur Ueberschrift im Kopf bleiben */
.rechts-text { padding-block: 76px 96px; }
.rechts-text > * { max-width: var(--breite-eng); }
.rechts-text h2 {
  font-size: 1.42rem;
  margin-top: 52px;
  padding-top: 26px;
  border-top: 1px solid var(--linie);
}
.rechts-text h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }

/* FAQ am Fuß einer Leistungsseite */
.leistung-faq { padding-block: 0 96px; }
.leistung-faq > * { max-width: var(--breite-eng); }
.leistung-faq h2 {
  font-size: 1.42rem;
  margin: 0 0 10px;
  padding-top: 26px;
  border-top: 1px solid var(--linie);
}
.leistung-faq .faq-liste--einfach { max-width: none; margin-left: 0; margin-right: 0; }
.leistung-faq__mehr { margin-top: 24px; font-size: .95rem; color: var(--grau); }
.rechts-text h3 { font-size: 1.06rem; margin-top: 30px; margin-bottom: 8px; }
.rechts-text p, .rechts-text li { color: var(--grau); }
.rechts-text ul { padding-left: 20px; }
.rechts-text li { margin-bottom: 8px; }

.hinweis-kasten {
  background: var(--papier);
  border-left: 3px solid var(--teal-mittel);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px 26px;
  margin-bottom: 44px;
}
.hinweis-kasten p { color: var(--anthrazit); margin: 0; font-size: .97rem; }
.hinweis-kasten strong { font-weight: 600; }

/* Noch offene Angaben sichtbar markieren */
.offen {
  background: #FDF3E4;
  border-bottom: 1px dashed #C9A263;
  padding: 1px 5px;
  border-radius: 2px;
  color: #7A5A22;
  font-size: .95em;
}

/* --- Leistungs-Unterseiten -------------------------------------------------- */

.leistung-bild { margin: 4px 0 34px; }
.leistung-bild img { object-position: center; }

.leistung-lead {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--anthrazit) !important;
}

.leistung-cta {
  margin-top: 52px;
  padding: 30px 32px;
  border-radius: var(--radius-gross);
  background: var(--papier);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 26px;
}
.leistung-cta__text { flex: 1 1 260px; }
.leistung-cta__frage {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--anthrazit) !important;
}
.leistung-cta__alt {
  margin: 6px 0 0;
  font-size: .92rem;
  color: var(--grau) !important;
}
.leistung-cta__alt a { color: var(--teal); }
.leistung-cta .knopf { flex: none; }

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

/* Grundsatz: Ohne JavaScript ist alles sofort sichtbar. Erst wenn das
   Skript die Klasse "js" gesetzt hat, wird ein- und aufgeblendet. So bleibt
   die Seite auch lesbar, wenn ein Browser-Plugin JavaScript blockiert. */

.js .zeig {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s var(--weich), transform .75s var(--weich);
  transition-delay: var(--verzoegerung, 0ms);
}
.js .zeig.ist-da { opacity: 1; transform: none; }

/* Gestaffelte Einblendung: Klasse statt Inline-Angabe */
.zeig--2 { --verzoegerung: 80ms; }
.zeig--3 { --verzoegerung: 150ms; }
.zeig--4 { --verzoegerung: 220ms; }
.zeig--5 { --verzoegerung: 290ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
  .js .zeig { opacity: 1; transform: none; }
}

/* ==========================================================================
   Handy und Tablet: eigener Gestaltungsdurchgang
   ========================================================================== */

@media (max-width: 1000px) {
  :root { --abstand: 78px; }

  .schritte { grid-template-columns: repeat(2, 1fr); gap: 36px 32px; }
  .schritt:nth-child(2)::after { display: none; }
  .fuss__raster { grid-template-columns: 1fr; gap: 36px 32px; }
}

@media (max-width: 940px) {
  :root { --rand: 20px; --abstand: 64px; }

  html { scroll-padding-top: 92px; scroll-behavior: auto; }
  body { font-size: 16.5px; }
  /* Seite sperren, solange das Menue offen ist */
  body.menue-offen { overflow: hidden; }

  /* Navigation klappt als volle Flaeche unter der Kopfleiste auf */
  .menue-schalter { display: block; }
  .kopf-knopf { display: none; }

  /* Auf dem Handy wandert die Sprachwahl in das aufklappbare Menue,
     abgesetzt unter den Menuepunkten. Die Kopfleiste bleibt schmal. */
  .navigation .sprachwahl {
    margin-top: 18px;
    padding-top: 20px;
    border-top: 1px solid var(--linie-dunkel);
    gap: 10px;
  }
  .navigation .sprachwahl__aktiv,
  .navigation .sprachwahl__link {
    display: inline-flex;
    align-items: center;
    padding: 12px 14px;
    font-size: 1.02rem;
    color: var(--papier);
  }
  .navigation .sprachwahl__aktiv { background: rgba(255, 255, 255, .12); }
  .kopfleiste.ist-fest .navigation .sprachwahl__aktiv,
  .kopfleiste.ist-fest .navigation .sprachwahl__link { color: var(--papier); }
  .navigation .sprachwahl__fahne { width: 22px; height: 16px; }

  /* Kein backdrop-filter auf der Leiste: sonst wird sie zum Bezugsrahmen
     fuer das feste Menue darin, und das Menue reicht nicht bis unten. */
  .kopfleiste,
  .kopfleiste.ist-dunkel,
  .kopfleiste.ist-fest { backdrop-filter: none; }
  .kopfleiste.ist-dunkel { background: var(--anthrazit-tief); }
  .kopfleiste.ist-fest { background: var(--weiss); }

  .navigation {
    position: fixed;
    inset: 70px 0 0 0;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--anthrazit-tief);
    border-top: 1px solid var(--linie-dunkel);
    padding: 8px var(--rand) 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .3s var(--weich), transform .3s var(--weich), visibility .3s;
  }
  .navigation.ist-offen { opacity: 1; visibility: visible; transform: none; }
  .navigation > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .navigation > ul > li { border-bottom: 1px solid var(--linie-dunkel); }
  .navigation > ul > li:last-child { border-bottom: 0; }
  .navigation a { display: block; color: var(--papier); font-size: 1.08rem; padding: 16px 2px; }
  .navigation a::after { display: none; }
  .kopfleiste.ist-fest .navigation a { color: var(--papier); }

  /* Untermenue als Akkordeon */
  .hat-menue { position: relative; }
  .hat-menue > a { padding-right: 50px; }
  .hat-menue > a svg { display: none; }
  .unter-schalter {
    display: block;
    position: absolute;
    right: 0;
    top: 9px;
    width: 46px;
    height: 46px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .unter-schalter::before, .unter-schalter::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 1.7px;
    background: var(--papier);
  }
  .unter-schalter::before { transform: translate(-50%, -50%); }
  .unter-schalter::after {
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform .3s var(--weich);
  }
  .hat-menue.ist-auf .unter-schalter::after { transform: translate(-50%, -50%); }

  .navigation .unter-menue {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    display: none;
    min-width: 0;
    margin: 0;
    padding: 0 0 12px 12px;
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
  }
  .navigation .hat-menue.ist-auf .unter-menue { display: block; }
  .navigation .unter-menue a { color: var(--grau-hell); font-size: 1rem; padding: 12px 2px; }

  /* Der Rueckruf-Knopf bleibt im aufgeklappten Menue immer hell auf dunkel */
  .kopfleiste .navigation .kopf-knopf {
    display: flex;
    width: 100%;
    padding-block: 15px;
    font-size: 1rem;
    background: var(--teal-hell);
    color: var(--anthrazit-tief);
  }
  .kopfleiste .navigation .kopf-knopf:hover { background: var(--weiss); }

  .kopfleiste__innen { padding-block: 15px; }
  .logo-link img { height: 38px; }
  /* In der mobilen Ansicht steht der Firmenname wieder unter dem Logo. */
  .logo-slogan { display: block; font-size: .56rem; letter-spacing: .12em; }

  /* Kopfbereich: kompakter, Bild staerker abgedunkelt fuer klare Lesbarkeit */
  .kopfbereich { min-height: auto; padding-block: 108px 40px; }
  .hero-leisten-huelle { margin-top: 40px; }
  .hero-leisten { grid-template-columns: 1fr; }
  .hero-leisten li { padding: 12px 0; }
  .hero-leisten li + li {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .13);
  }
  .kopfbereich::before {
    background:
      linear-gradient(180deg,
        rgba(26, 33, 41, .90) 0%,
        rgba(26, 33, 41, .80) 46%,
        rgba(26, 33, 41, .95) 100%);
  }
  .kopfbereich__bild { object-position: center 38%; }

  .hero-knoepfe { margin-top: 30px; }
  .hero-knoepfe .knopf { width: 100%; }

  .bildrahmen figcaption { padding: 12px 15px 14px; font-size: .85rem; }
  .block--foto .block__bild { object-position: center 70%; }

  .schritte { grid-template-columns: 1fr; gap: 30px; }
  .schritt::after { display: none; }

  .feld-paar { grid-template-columns: 1fr; gap: 20px; }
  .formular__fuss .knopf { width: 100%; }
  .feld input, .feld select { padding-block: 15px; }
  .kontakt__hinweis { gap: 13px; }

  .platzhalter { aspect-ratio: 3 / 2; }

  .fuss__raster { grid-template-columns: 1fr; gap: 34px; padding-bottom: 38px; }

  .rechts-kopf { padding-block: 122px 52px; }
  .rechts-text { padding-block: 56px 72px; }
}

@media (max-width: 440px) {
  h1 { font-size: 2rem; }
  .hero-titel__haupt { font-size: 1.35rem; }
  .hero-titel__akzent { font-size: 1.35rem; }
  .fuss__links-zeile { gap: 6px 18px; }
}

/* ==========================================================================
   Druckansicht: wenn jemand die Seite ausdruckt oder als PDF speichert
   ========================================================================== */

@media print {
  :root { --abstand: 34px; }

  /* Farbflaechen und Fotos mitdrucken, sonst wird alles weiss */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  html { scroll-padding-top: 0; }
  body { font-size: 10.5pt; line-height: 1.5; }

  /* Eingeblendete Elemente muessen im Druck sichtbar sein */
  .zeig,
  .js .zeig { opacity: 1 !important; transform: none !important; animation: none !important; }

  /* Bedienelemente ergeben auf Papier keinen Sinn */
  .menue-schalter,
  .navigation,
  .sprung-link,
  .hero-knoepfe,
  .sprachwahl,
  .hero-leisten,
  .formular__fuss .knopf { display: none !important; }

  /* Kopfleiste einmal oben mitdrucken, nicht auf jeder Seite schweben */
  .kopfleiste {
    position: static;
    background: none !important;
    backdrop-filter: none;
    border-bottom: 1px solid var(--linie);
  }
  .kopfleiste .logo--hell { display: none; }
  .kopfleiste .logo--dunkel { display: block; }
  .logo-link img { height: 30px; }
  .logo-slogan { color: var(--grau); }

  /* Kopfbereich auf eine ruhige Hoehe bringen */
  .kopfbereich { min-height: 0; padding-block: 26px 26px; }
  .hero-titel__auftakt { font-size: 9pt; margin-bottom: 8px; }
  .hero-titel__haupt { font-size: 24pt; }
  .hero-titel__akzent { font-size: 24pt; color: var(--teal); }
  .hero-sub { font-size: 11pt; }

  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  .schritt, .dauer__zitat, .kontakt__karte,
  .hinweis-kasten, .ueber__bild, .bildrahmen,
  .rechts-text h2, .rechts-text h3 { break-inside: avoid; page-break-inside: avoid; }

  .rad { grid-template-columns: 1fr 1fr; gap: 20px; }

  .schritte { grid-template-columns: 1fr 1fr; gap: 22px 30px; }
  .schritt::after { display: none; }
  .bildrahmen figcaption { padding: 8px 12px 10px; font-size: 8.5pt; }
  .ueber__bild { max-width: 380px; }

  /* Formularfelder als leere Kaesten, damit die Struktur erkennbar bleibt */
  .feld input, .feld select, .feld textarea { border-color: var(--grau-hell); }
  .feld textarea { min-height: 60px; }

  /* Adressen der Links im Fussbereich ausschreiben */
  .fuss { padding-block: 26px 0; }

  @page { size: A4; margin: 12mm 10mm; }
}