/*
Theme Name: Hau & Gräf Advisory
Theme URI: https://hau-graef.com
Author: Hau & Gräf Advisory GmbH
Description: Block-Theme der Hau & Gräf Advisory GmbH, Wien. Richtung A vom 18.09.2026: durchgehend Dunkelgrün als Grund, Karten in Papierton, Haarlinien in Salbei. Schriften Spectral und IBM Plex Sans, lokal gehostet.
Version: 3.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hau-graef
*/

:root {
  --gruen:  var(--wp--preset--color--markengruen, #005348);
  --dunkel: var(--wp--preset--color--dunkelgruen, #002B2A);
  --salbei: var(--wp--preset--color--salbei, #A8C5BC);
  --weich:  var(--wp--preset--color--weiche-flaeche, #CFE2DC);
  --papier: var(--wp--preset--color--papier, #F4F1EA);
  --meta:   var(--wp--preset--color--meta, #51605B);
  --weiss:  var(--wp--preset--color--weiss, #fff);

  --text:       rgba(255, 255, 255, .86);
  --text-leise: rgba(255, 255, 255, .72);
  --linie:      rgba(168, 197, 188, .28);
  --linie-stark: rgba(168, 197, 188, .5);

  --serif: var(--wp--preset--font-family--serif, "Spectral", Georgia, serif);
  --sans:  var(--wp--preset--font-family--sans, "IBM Plex Sans", system-ui, sans-serif);

  --bahn: 1280px;
  --rand: clamp(1rem, 5vw, 5rem);

  --r1: .5rem;  --r2: 1rem;  --r3: 1.5rem; --r4: 2rem;  --r5: 3rem;
  --r6: 4rem;   --r7: 5rem;  --r8: 6rem;   --r9: 8rem;

  --sektion: clamp(6rem, 13.3vw, 12rem);
  --folge:   clamp(4.5rem, 8.9vw, 8rem);
  --eng:     clamp(3.5rem, 6.7vw, 6rem);
  --kopfhoehe: 5rem;

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

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

html { -webkit-text-size-adjust: 100%; background: var(--dunkel); }

body {
  background: transparent;
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  overflow-x: clip;
}

button, input, select, textarea { font-family: inherit; }

img, svg, video { max-width: 100%; height: auto; }

a { color: var(--weiss); }

:where(a):focus-visible,
:where(button):focus-visible,
:where(input, select, textarea):focus-visible,
:where([tabindex]):focus-visible {
  outline: 2px solid var(--salbei);
  outline-offset: 3px;
  border-radius: 1px;
}

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

.sektion { padding-block: var(--sektion); position: relative; }
.sektion--folge { padding-block: var(--folge); }
.sektion--eng { padding-block: var(--eng); }
.nw { white-space: nowrap; hyphens: none; -webkit-hyphens: none; }

.sektion--linie > .bahn { position: relative; }
.sektion--linie > .bahn::before {
  content: "";
  position: absolute;
  top: calc(var(--sektion) * -1);
  left: var(--rand);
  right: var(--rand);
  height: 1px;
  background: var(--linie);
}

.sektion--papier { background: var(--papier); color: var(--dunkel); }
.sektion--abschluss { color: var(--text); padding-block: var(--folge) var(--sektion); }

.grund {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.grund__ton {
  position: absolute;
  inset: 0;
  background: var(--dunkel);
}
.grund__aura {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--aura-b, 1000px);
  height: var(--aura-h, 1000px);
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
  transform: translate3d(-200vw, 0, 0);
}

.grund__aura--einstieg { --aura-b: 1400px; --aura-h: 1100px;
  background: radial-gradient(closest-side,
    rgba(168, 197, 188, 0.15) 0%,
    rgba(168, 197, 188, 0.108) 22%,
    rgba(168, 197, 188, 0.06) 46%,
    rgba(168, 197, 188, 0.0225) 70%,
    rgba(168, 197, 188, 0.006) 88%,
    rgba(168, 197, 188, 0) 100%); }
.grund__aura--kurs { --aura-b: 760px; --aura-h: 760px;
  background: radial-gradient(closest-side,
    rgba(168, 197, 188, 0.17) 0%,
    rgba(168, 197, 188, 0.1224) 22%,
    rgba(168, 197, 188, 0.068) 46%,
    rgba(168, 197, 188, 0.0255) 70%,
    rgba(168, 197, 188, 0.0068) 88%,
    rgba(168, 197, 188, 0) 100%); }
.grund__aura--leistungen { --aura-b: 1300px; --aura-h: 1000px;
  background: radial-gradient(closest-side,
    rgba(168, 197, 188, 0.08) 0%,
    rgba(168, 197, 188, 0.0576) 22%,
    rgba(168, 197, 188, 0.032) 46%,
    rgba(168, 197, 188, 0.012) 70%,
    rgba(168, 197, 188, 0.0032) 88%,
    rgba(168, 197, 188, 0) 100%); }
.grund__aura--partner { --aura-b: 1400px; --aura-h: 1000px;
  background: radial-gradient(closest-side,
    rgba(168, 197, 188, 0.1) 0%,
    rgba(168, 197, 188, 0.072) 22%,
    rgba(168, 197, 188, 0.04) 46%,
    rgba(168, 197, 188, 0.015) 70%,
    rgba(168, 197, 188, 0.004) 88%,
    rgba(168, 197, 188, 0) 100%); }
.grund__aura--zahlen { --aura-b: 1500px; --aura-h: 900px;
  background: radial-gradient(closest-side,
    rgba(168, 197, 188, 0.12) 0%,
    rgba(168, 197, 188, 0.0864) 22%,
    rgba(168, 197, 188, 0.048) 46%,
    rgba(168, 197, 188, 0.018) 70%,
    rgba(168, 197, 188, 0.0048) 88%,
    rgba(168, 197, 188, 0) 100%); }
.grund__aura--kontakt { --aura-b: 1300px; --aura-h: 1300px;
  background: radial-gradient(closest-side,
    rgba(168, 197, 188, 0.12) 0%,
    rgba(168, 197, 188, 0.0864) 22%,
    rgba(168, 197, 188, 0.048) 46%,
    rgba(168, 197, 188, 0.018) 70%,
    rgba(168, 197, 188, 0.0048) 88%,
    rgba(168, 197, 188, 0) 100%); }
.grund__korn {
  position: absolute;
  inset: 0;
  background: url("assets/img/korn.png") repeat;
  background-size: 256px 256px;
  opacity: .03;

  will-change: transform;
}

html:not(.js) .grund__aura--einstieg {
  opacity: 1;
  transform: translate3d(calc(100vw - 900px), -450px, 0);
}

@media (max-width: 820px) {
  .grund__aura--einstieg { --aura-b: 760px; --aura-h: 680px; }
  .grund__aura--kurs     { --aura-b: 520px; --aura-h: 520px; }
  .grund__aura--leistungen { --aura-b: 700px; --aura-h: 800px; }
  .grund__aura--zahlen   { --aura-b: 700px; --aura-h: 900px; }
  .grund__aura--partner  { --aura-b: 700px; --aura-h: 800px; }
  .grund__aura--kontakt  { --aura-b: 760px; --aura-h: 900px; }
  .grund__korn { opacity: .025; }
}

:is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.012em;
  color: var(--weiss);
  text-wrap: balance;
  margin: 0;
}
:is(h1, h2, h3, h4, h5, h6) em { font-style: italic; color: var(--salbei); }
h4, h5, h6 { font-weight: 500; letter-spacing: 0; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.fliess {
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
  -webkit-hyphens: auto;
  max-width: 34em;
  color: var(--text);
}
.leise { color: var(--text-leise); }

.fliess--ganz { hyphens: manual; -webkit-hyphens: manual; }
body { hyphenate-limit-chars: 10 4 4; }

.sek-titel {
  font-size: clamp(2rem, 3.8vw, 3.5rem);
  max-width: 17em;
  margin-bottom: var(--r6);
}
.sek-titel--breit  { max-width: 20em; }
.sek-titel--schmal { max-width: 14em; }

.vorspann {
  hyphens: manual;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.45;
  color: var(--text);
  max-width: 28em;
  margin: 0 0 var(--r6);
}

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--salbei);
  margin-bottom: var(--r4);
  padding-left: 3.5rem;
  text-indent: -3.5rem;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 2.5rem;
  height: 1px;
  background: var(--salbei);
  vertical-align: .32em;
  margin-right: 1rem;
}
.eyebrow--nackt { padding-left: 0; text-indent: 0; }
.eyebrow--nackt::before { content: none; }

.ziffer {
  font-family: var(--serif);
  font-weight: 300;
  color: var(--salbei);
  font-variant-numeric: lining-nums tabular-nums;
}

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

.wp-block-button__link,
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  background: var(--weiss);
  color: var(--dunkel);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .01em;
  padding: 1rem 1.75rem;
  border: 1px solid var(--weiss);
  border-radius: 2px;
  text-decoration: none;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  min-height: 3.25rem;
  text-align: center;
}
.wp-block-button__link:hover,
.knopf:hover { background: var(--salbei); border-color: var(--salbei); color: var(--dunkel); }

.is-style-hga-ghost .wp-block-button__link,
.knopf--ghost {
  background: transparent;
  color: var(--weiss);
  border-color: var(--linie-stark);
}
.is-style-hga-ghost .wp-block-button__link:hover,
.knopf--ghost:hover { background: var(--weiss); border-color: var(--weiss); color: var(--dunkel); }

.weiter {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--weiss);
  text-decoration: none;
  min-height: 2.75rem;
}
.weiter::after {
  content: "";
  flex: 0 0 auto;
  width: 1.5rem; height: 1px;
  background: currentColor;
  transition: transform .35s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .weiter:hover::after { transform: translateX(.375rem); }
}

.auftakt { display: none; }
html.mit-auftakt .auftakt {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  background: #002B2A;
  color: var(--weiss);
  pointer-events: none;
  animation: auftakt-weg .4s cubic-bezier(.7, 0, .2, 1) .62s forwards;
}
.auftakt__inhalt { display: inline-flex; flex-direction: column; gap: 1.25rem; }
.auftakt__marke { opacity: 0; animation: auftakt-ein .3s ease-out forwards; }
.auftakt__marke svg { display: block; width: auto; height: clamp(3.5rem, 7vw, 5rem); }
.auftakt__marke svg path { fill: currentColor; }
.auftakt__linie {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--salbei);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: auftakt-linie .45s cubic-bezier(.4, 0, .2, 1) .15s forwards;
}
@keyframes auftakt-ein { to { opacity: 1; } }
@keyframes auftakt-linie { to { transform: scaleX(1); } }
@keyframes auftakt-weg { to { transform: translateY(-100%); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { html.mit-auftakt .auftakt { display: none; } }
@media print { .auftakt { display: none !important; } }

.fortschritt {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 150;
  pointer-events: none;
}
.fortschritt__balken {
  display: block;
  height: 100%;
  background: var(--salbei);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
@media print { .fortschritt { display: none; } }

.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table :is(th, td) {
  border: 0;
  border-bottom: 1px solid var(--linie);
  padding: .75rem 1rem .75rem 0;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.wp-block-table th {
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--salbei);
  border-bottom: 1px solid var(--salbei);
}
.wp-block-table :is(th, td).zahl,
.wp-block-table :is(th, td):not(:first-child) { text-align: right; }
.wp-block-table { overflow-x: auto; }

.kopf {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.kopf.is-gescrollt {
  background: rgb(var(--grund-rgb, 0 43 42) / .97);
  border-bottom-color: var(--linie);
}

.kopf__bahn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: var(--kopfhoehe);
}

.kopf__marke { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; color: var(--weiss); }
.kopf__marke svg { display: block; width: auto; height: 3.125rem; }
.kopf__marke svg path { fill: currentColor; }

.kopf__nav { display: flex; align-items: center; gap: clamp(1.5rem, 2.5vw, 2.5rem); }
.kopf__nav a {
  font-size: .9375rem;
  color: var(--text);
  text-decoration: none;
  padding-block: .5rem;
  transition: color .2s var(--ease);
}
.kopf__nav a:hover,
.kopf__nav a[aria-current="page"] { color: var(--weiss); }
.kopf__nav .knopf {
  color: var(--weiss);
  background: transparent;
  border-color: var(--linie-stark);
  padding: .75rem 1.25rem;
  min-height: 2.75rem;
}
.kopf__nav .knopf:hover { background: var(--weiss); color: var(--dunkel); border-color: var(--weiss); }

.kopf__burger {
  display: none;
  background: none;
  border: 0;
  padding: .875rem .75rem;
  margin-right: -.75rem;
  cursor: pointer;
  color: var(--weiss);
}
.kopf__burger span {
  display: block;
  width: 24px; height: 1.5px;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.kopf__burger span + span { margin-top: 6px; }
.kopf__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.kopf__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.kopf__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 1120px) {
  .kopf__burger { display: block; }
  .kopf__nav {
    position: fixed;
    inset: var(--kopfhoehe) 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: rgb(var(--grund-rgb, 0 43 42));
    border-bottom: 1px solid var(--linie);
    padding: 1rem var(--rand) 2rem;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .kopf__nav.is-offen { opacity: 1; visibility: visible; transform: none; }
  .kopf__nav a { width: 100%; padding-block: 1rem; border-bottom: 1px solid var(--linie); font-size: 1.125rem; }
  .kopf__nav .knopf { margin-top: 1.5rem; border: 1px solid var(--linie-stark); width: auto; }
  .kopf:has(.kopf__nav.is-offen) { background: rgb(var(--grund-rgb, 0 43 42)); }
}
@media (max-width: 600px) {
  .kopf__marke svg { height: 2.625rem; }
}

.inhalt { padding-top: var(--kopfhoehe); }

#inhalt:focus { outline: none; }
body.home .inhalt { padding-top: 0; }

:target { scroll-margin-top: calc(var(--kopfhoehe) + 1rem); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.fuss {
  background: transparent;
  color: var(--text);
  padding-block: var(--r8) var(--r4);
  border-top: 1px solid var(--linie);
}
.fuss__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
  padding-bottom: var(--r6);
}
.fuss__marke { display: inline-block; color: var(--weiss); }
.fuss__marke svg { display: block; width: auto; height: 3rem; }
.fuss__marke svg path { fill: currentColor; }
.fuss__rechts { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.fuss__nav { display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.fuss a {
  color: var(--text);
  text-decoration: none;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  transition: color .2s var(--ease);
}
.fuss a:hover { color: var(--weiss); }
.fuss__social { display: flex; gap: .75rem; }
.fuss__social { gap: 1.5rem; }
.fuss .fuss__li { gap: .625rem; color: var(--text); }
.fuss__li svg { width: 1.125rem; height: 1.125rem; color: var(--salbei); }
.fuss .fuss__li:hover { color: var(--weiss); }
.fuss__unten {
  border-top: 1px solid var(--linie);
  padding-top: var(--r3);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.fuss__pflicht { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--text-leise); max-width: 58em; }
.fuss__schluss { display: flex; align-items: baseline; gap: .5rem 1.5rem; flex-wrap: wrap; }
.fuss__schluss nav { display: flex; gap: 1.5rem; }
.fuss__schluss a { font-size: .875rem; color: var(--text-leise); }
.fuss__schluss a:hover { color: var(--weiss); }
.fuss__schluss p { margin: 0; font-size: .875rem; color: var(--text-leise); white-space: nowrap; }

@media (max-width: 820px) {
  .fuss__kopf { flex-direction: column; gap: 2rem; }
  .fuss__unten { flex-direction: column; }
}

.js .rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .rv.is-da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
}

.screen-reader-text:not(.skip-link) {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link.screen-reader-text {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--weiss);
  color: var(--dunkel);
  font-size: 1rem;
  padding: .75rem 1.25rem;
  text-decoration: none;
}
.skip-link.screen-reader-text:focus { left: 0; }

.hero { position: relative; }
.hero__text {
  padding-top: calc(var(--kopfhoehe) + clamp(3rem, 9vh, 7rem));
  padding-bottom: var(--r6);
}
.hero__kenn-kurz { display: none; }
.hero__titel {
  font-size: clamp(2.5rem, 6vw, 5.25rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin-bottom: var(--r5);
  text-wrap: initial;
}
.hero__zeile { display: block; }
.hero__titel em { color: var(--salbei); }
.hero__fenster { display: none; }

.hero__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--r4) var(--r6);
}
.hero__sub {
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
  line-height: 1.55;
  color: var(--text);
  max-width: 24em;
  margin: 0;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; }

.hero__bild {
  margin: 0 auto;
  max-width: var(--bahn);
  padding-inline: var(--rand);
  position: relative;
}
.hero__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 30%;
  filter: grayscale(1);
  background: #0c3a38;
}
.hero__bildzeile {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding-top: 1rem;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--salbei);
}

.hero.is-buehne { height: 190vh; }
.hero.is-buehne .hero__buehne {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.hero.is-buehne .hero__text {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--kopfhoehe) + var(--r4));
  padding-bottom: var(--r6);
}

.hero.is-buehne .hero__titel { position: relative; }
.hero.is-buehne .hero__fenster {
  display: block;
  position: absolute;
  right: 0;
  top: 1.16em;
  width: 40%;
  aspect-ratio: 3 / 2;
}
.hero.is-buehne .hero__fuss { display: block; }
.hero.is-buehne .hero__sub { margin-bottom: var(--r4); max-width: 22em; }
.hero.is-buehne .hero__text { will-change: opacity, transform; }
.hero.is-buehne .hero__bild {
  position: absolute;
  inset: var(--kopfhoehe) 0 0 0;
  max-width: none;
  padding: 0;
  margin: 0;
  z-index: 2;
  transform-origin: 50% 50%;
  will-change: transform, clip-path;
  opacity: 0;
}
.hero.is-buehne .hero__bild.is-bereit { opacity: 1; }
.hero.is-buehne .hero__bild { transition: opacity .8s var(--ease) .35s; }

.js .hero__zeile.rv { transform: none; }
.hero.is-buehne .hero__bild picture,
.hero.is-buehne .hero__bild img { width: 100%; height: 100%; aspect-ratio: auto; }
.hero.is-buehne .hero__bildzeile {
  position: absolute;
  left: var(--rand);
  bottom: 0;
  padding: 1rem 1.5rem;
  background: rgb(var(--grund-rgb, 0 43 42));
  color: var(--weiss);
  gap: 1.5rem;
  opacity: 0;
  transition: opacity .6s var(--ease);
}
@media (min-width: 1440px) {
  .hero.is-buehne .hero__bildzeile { left: calc((100vw - var(--bahn)) / 2 + var(--rand)); }
}
.hero.is-buehne .hero__bildzeile.is-da { opacity: 1; }
.hero.is-buehne .hero__bildzeile span + span { color: var(--salbei); }

@media (max-width: 820px) {
  .hero__text { padding-top: calc(var(--kopfhoehe) + var(--r2)); padding-bottom: var(--r4); }
  .hero__titel { margin-bottom: var(--r3); }
  .hero__fuss { display: block; }
  .hero__sub { margin-bottom: var(--r3); }
  .hero__cta .knopf { flex: 1 1 auto; padding-inline: 1rem; }
  .hero__kenn { margin-bottom: var(--r2); letter-spacing: .14em; }

  .hero__kenn .nw {
    display: inline-block; max-width: 100%; text-indent: 0;
    white-space: normal; overflow-wrap: anywhere;
  }

  .hero__kenn-lang {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .hero__kenn-kurz { display: inline; }
}

.befunde__frage {
  font-size: clamp(2rem, 4.6vw, 4.25rem);
  line-height: 1.1;
  max-width: 17em;
  margin-bottom: var(--r8);
  text-wrap: initial;
}
.befunde__frage em { color: inherit; }
.js .befunde__frage.is-aktiv .wort {
  color: rgba(168, 197, 188, .22);
  transition: color .35s linear;
}
.js .befunde__frage.is-aktiv .wort.is-an { color: var(--weiss); }
.js .befunde__frage.is-aktiv em .wort.is-an { color: var(--salbei); }

.befunde__liste {
  display: grid;
  gap: var(--r5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.befund { border-top: 1px solid var(--linie-stark); padding-top: var(--r4); }
.befund .ziffer { display: block; font-size: 1.5rem; margin-bottom: var(--r4); }
.befund h3 { font-size: clamp(1.5rem, 2.1vw, 1.875rem); margin-bottom: var(--r2); }
.befund p { color: var(--text); hyphens: auto; -webkit-hyphens: auto; }

@media (max-width: 900px) {
  .befunde__liste { grid-template-columns: minmax(0, 1fr); gap: var(--r5); }
  .befunde__frage { margin-bottom: var(--r6); }
}

@media (max-width: 820px) {
  .befund { display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: baseline; padding-top: var(--r3); }
  .befund .ziffer { margin: 0; font-size: 1.25rem; }
  .befund h3 { margin-bottom: var(--r1); }
  .befund p { grid-column: 1 / -1; }
}

.kurs { position: relative; }
.kurs__buehne { padding-block: var(--folge); }
.kurs__inner {
  width: 100%;
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.kurs__kopf { margin-bottom: var(--r7); }
.kurs__titel { font-size: clamp(2rem, 3.6vw, 3.25rem); max-width: 18em; }

.kurs__raster {
  display: grid;
  grid-template-columns: minmax(0, 3.6fr) minmax(0, 8.4fr);
  gap: var(--r6);
  align-items: center;
}

.kurs__index { list-style: none; margin: 0; padding: 0; }
.etappe { border-top: 1px solid var(--linie); padding: var(--r3) 0; }
.etappe:last-child { border-bottom: 1px solid var(--linie); }
.etappe__kopf {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: baseline;
  column-gap: .5rem;
  position: relative;
}
.etappe__nr {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--salbei);
  font-variant-numeric: lining-nums tabular-nums;
}
.etappe__label { font-size: clamp(1.625rem, 2.3vw, 2.125rem); line-height: 1.15; }
.etappe__name {
  grid-column: 2;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--salbei);
  margin-top: .375rem;
}
.etappe__text { padding: var(--r2) 0 0 3.25rem; }
.etappe__satz {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.35;
  color: var(--weiss);
  margin-bottom: .75rem;
}
.etappe__sub { color: var(--text); font-size: 1.0625rem; max-width: 30em; }
.etappe__mini { display: none; }

.kurs__figur { min-width: 0; }
.kurs__svg { display: block; width: 100%; height: auto; overflow: visible; }

.kurs .grundlinie { stroke: var(--salbei); stroke-width: 1; opacity: .35; }
.kurs .plan { fill: none; stroke: var(--salbei); stroke-width: 2; stroke-dasharray: 7 6; stroke-linecap: round; }
.kurs .ist { fill: none; stroke: var(--weiss); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.kurs .vorsprung { fill: var(--salbei); opacity: .22; }
.kurs .knoten .kern { fill: var(--weiss); }
.kurs .knoten .ring { fill: var(--dunkel); stroke: var(--weiss); stroke-width: 1.4; }
.kurs .knoten .stiel { stroke: var(--salbei); stroke-width: 1; stroke-dasharray: 3 4; opacity: .7; }
.kurs .knoten .ziffer-s { font-family: var(--serif); font-weight: 300; font-size: 36px; fill: var(--salbei); text-anchor: middle; }
.kurs .knoten .name { font-family: var(--serif); font-weight: 400; font-size: 27px; fill: var(--weiss); }
.kurs .marke text { font-family: var(--sans); font-weight: 500; font-size: 21px; letter-spacing: 3px; text-transform: uppercase; }
.kurs .marke--ist text { fill: var(--weiss); }
.kurs .marke--plan text { fill: var(--salbei); }
.kurs .endpunkt .kern { fill: var(--weiss); }
.kurs .endpunkt .halo { fill: none; stroke: var(--weiss); stroke-width: 1; opacity: .45; }

.kurs__svg--mini .name { display: none; }
.kurs__svg--mini .ring { r: 14px; stroke-width: 2.4; }
.kurs__svg--mini .knoten .kern { r: 7px; }
.kurs__svg--mini .ist { stroke-width: 6; }
.kurs__svg--mini .plan { stroke-width: 3.6; stroke-dasharray: 12 10; }
.kurs__svg--mini .knoten .ziffer-s { font-size: 46px; }
.kurs__svg--mini .knoten .stiel { stroke-width: 2.2; stroke-dasharray: 6 8; }
.kurs__svg--mini .marke text { font-size: 42px; letter-spacing: 4px; }
.kurs__svg--mini .grundlinie { stroke-width: 2.2; }

.kurs.is-buehne { height: 260vh; }
.kurs.is-buehne .kurs__buehne {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding-block: calc(var(--kopfhoehe) + var(--r3)) var(--r5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.kurs.is-buehne .kurs__kopf { margin-bottom: clamp(1.5rem, 5vh, 3.5rem); }
.kurs.is-buehne .kurs__titel { font-size: clamp(1.75rem, 3vw, 2.875rem); }
.kurs.is-buehne .etappe { padding: var(--r2) 0; }
.kurs.is-buehne .etappe__label { font-size: clamp(1.5rem, 2vw, 1.875rem); }
.kurs.is-buehne .kurs__raster { grid-template-columns: 320px minmax(0, 1fr); gap: var(--r6); }

.kurs.is-buehne .kurs__figur { margin-right: calc(var(--rand) * -1); }
.kurs.is-buehne .kurs__links { padding-bottom: 14rem; }

.kurs.is-buehne .kurs__index { position: relative; }

.kurs.is-buehne .etappe__label { color: rgba(255, 255, 255, .62); transition: color .5s var(--ease); }
.kurs.is-buehne :is(.etappe__nr, .etappe__name) { color: rgba(168, 197, 188, .7); transition: color .5s var(--ease); }
.kurs.is-buehne .etappe.is-an .etappe__label { color: var(--weiss); }
.kurs.is-buehne .etappe.is-an :is(.etappe__nr, .etappe__name) { color: var(--salbei); }
.kurs.is-buehne .etappe__kopf::before {
  content: "";
  position: absolute;
  left: -1.25rem;
  top: .72em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--weiss);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.kurs.is-buehne .etappe.is-an .etappe__kopf::before { opacity: 1; transform: none; }
.kurs.is-buehne .etappe__text {
  position: absolute;
  left: 0; right: 0; top: 100%;
  padding-top: var(--r3);
  padding-left: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s ease-out, transform .25s ease-out;
  pointer-events: none;
}
.kurs.is-buehne .etappe.is-an .etappe__text {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--ease) .12s, transform .6s var(--ease) .12s;
}

.kurs.is-buehne:not(.is-ueberholt) .etappe[data-etappe="3"] .etappe__text { opacity: 0; transform: translateY(10px); }
.kurs.is-buehne .kurs__svg { max-height: 58vh; }

@media (max-width: 1100px) and (min-width: 821px) {
  .kurs__raster { grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); }
  .kurs.is-buehne .etappe__sub { font-size: 1rem; }
}

.kurs:not(.is-buehne) .kurs__raster { align-items: start; }
@media (min-width: 821px) {
  .kurs:not(.is-buehne) .kurs__figur { position: sticky; top: 120px; }
  .kurs:not(.is-buehne) .kurs__raster { align-items: stretch; }
  .kurs:not(.is-buehne) .kurs__figur { align-self: start; }
}

@media (max-width: 820px) {
  .kurs__kopf { margin-bottom: var(--r5); }
  .kurs__raster { display: block; }
  .kurs__figur { display: none; }
  .etappe { padding: var(--r4) 0 var(--r5); }
  .etappe__mini { display: block; margin: var(--r3) 0 var(--r1); }
  .etappe__text { padding-left: 0; }
  .etappe:last-child { border-bottom: 0; }
}

.leistungen__raster {
  display: grid;
  gap: var(--r3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.leistung {
  background: var(--papier);
  color: var(--dunkel);
  padding: clamp(2rem, 3.4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: var(--r2);
  min-height: 22rem;
  transition: transform .6s var(--ease), opacity .6s var(--ease);
}
.js .leistung.rv.is-da:hover { transform: translateY(-4px); }
.leistung__kopf { display: flex; flex-direction: column; gap: var(--r3); margin-bottom: var(--r1); }
.leistung__kopf .ziffer { font-size: 1.375rem; color: var(--gruen); }
.leistung h3 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 400; color: var(--dunkel); line-height: 1.1; overflow-wrap: break-word; }
.leistung p { font-size: 1.125rem; color: var(--dunkel); max-width: 26em; }
.leistung p.leistung__stichworte {
  hyphens: manual; -webkit-hyphens: manual;
  margin: 0;
  padding-top: var(--r2);
  border-top: 1px solid var(--salbei);
  font-size: .9375rem;
  color: var(--meta);
  line-height: 1.75;
}
.leistung__stichworte .trenner { color: var(--gruen); padding-inline: .15rem; }
.leistung .weiter { margin-top: auto; color: var(--gruen); }

.leistung :focus-visible { outline-color: var(--gruen); }

@media (max-width: 820px) {
  .leistungen__raster { grid-template-columns: minmax(0, 1fr); gap: var(--r2); }
  .leistung { min-height: 0; }
}

@media (max-width: 374px) {
  .leistung h3 { font-size: 1.5rem; }
}

.perspektiven__raster {
  display: grid;
  gap: var(--r6);
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: start;
}
.perspektiven__titel { margin-bottom: var(--r4); max-width: none; font-size: clamp(2rem, 3.6vw, 3.25rem); }
.perspektiven__titel .zeile { display: block; white-space: nowrap; }
@media (max-width: 420px) { .perspektiven__titel .zeile { white-space: normal; } }
.perspektiven__liste {
  list-style: none;
  margin: 0;
  padding: var(--r2) clamp(1.5rem, 3vw, 3rem);
  background: var(--papier);
  color: var(--dunkel);
}
.perspektive {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: var(--r3) 0;
  border-bottom: 1px solid var(--salbei);
}
.perspektive:last-child { border-bottom: 0; }
.perspektive .ziffer { font-size: 1.375rem; color: var(--gruen); }
.perspektive b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.2;
  color: var(--dunkel);
}
.perspektive span { display: block; font-size: 1.0625rem; color: var(--meta); margin-top: .375rem; }

.perspektiven__test { margin-top: var(--r5); padding-top: var(--r4); border-top: 1px solid var(--linie); }
.perspektiven__test .knopf { margin-top: var(--r3); }
@media (max-width: 900px) { .perspektiven__raster { grid-template-columns: minmax(0, 1fr); gap: var(--r5); } }
@media (max-width: 374px) {
  .perspektiven__liste { padding-inline: 1rem; }
  .perspektive { grid-template-columns: 2.25rem minmax(0, 1fr); }
}

.mandat + .mandat { margin-top: var(--r8); padding-top: var(--r8); border-top: 1px solid var(--linie); }
.mandat .eyebrow--nackt { margin-bottom: var(--r3); }
.mandat__lage {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.375rem, 2.1vw, 1.875rem);
  line-height: 1.35;
  color: var(--weiss);
  max-width: 28em;
  margin-bottom: var(--r5);
}
.kontakt__bild { margin: var(--r5) 0 var(--r5); overflow: hidden; }
.kontakt__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 72% 40%;
  filter: grayscale(1);
}

.partner__geschichte {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  line-height: 1.45;
  color: var(--weiss);
  max-width: 34em;
  margin: var(--r7) 0 0;
  padding-top: var(--r5);
  border-top: 1px solid rgb(168 197 188 / .35);
}
.partner__geschichte em { font-style: italic; color: var(--salbei); }

.mandat__zahlen {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--linie-stark);
  margin-bottom: var(--r6);
}
.zahl { padding: clamp(1.5rem, 3vw, 2.5rem); }
.zahl + .zahl { border-left: 1px solid var(--linie-stark); }
.zahl b {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3.5rem, 7vw, 6.25rem);
  line-height: 1;
  color: var(--weiss);
  margin-bottom: var(--r4);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.zahl b .zahl__einheit { color: var(--salbei); }
.zahl > span { display: block; font-size: 1.0625rem; line-height: 1.55; color: var(--text); max-width: 22em; hyphens: manual; -webkit-hyphens: manual; }

blockquote.zitat {
  margin: 0;
  padding: 0 0 0 var(--r4);
  border-left: 1px solid var(--salbei);
  max-width: 44rem;
}
blockquote.zitat p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.375rem, 2.1vw, 1.875rem);
  line-height: 1.4;
  color: var(--weiss);
  margin-bottom: var(--r3);
}
blockquote.zitat cite {
  display: block;
  font-style: normal;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--salbei);
}

.mandat--paar {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--r6);
  align-items: start;
}
.mandat--paar .mandat__lage { margin-bottom: 0; }
blockquote.zitat--karte {
  background: var(--papier);
  border-left: 0;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  max-width: none;
}
blockquote.zitat--karte p { color: var(--dunkel); font-size: clamp(1.25rem, 1.7vw, 1.5rem); }
blockquote.zitat--karte cite { color: var(--gruen); }
@media (max-width: 900px) { .mandat--paar { grid-template-columns: minmax(0, 1fr); gap: var(--r4); } }

@media (max-width: 820px) {
  .mandat__zahlen { grid-template-columns: minmax(0, 1fr); }

  .zahl { padding: 1.5rem; display: grid; grid-template-columns: 6.75rem minmax(0, 1fr); gap: 1rem; align-items: baseline; }
  .zahl b { margin: 0; font-size: 2.75rem; }
  .zahl > span { font-size: 1rem; overflow-wrap: break-word; }
  .zahl + .zahl { border-left: 0; border-top: 1px solid var(--linie-stark); }
}

@media (max-width: 379px) {
  .zahl { display: block; }
  .zahl b { margin-bottom: .75rem; }
}

.partner__raster {
  display: grid;
  gap: var(--r6) var(--r5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.partner__bild { margin: 0 0 var(--r4); overflow: hidden; background: #0c3a38; }
.partner__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: 50% 18%;
  filter: grayscale(1);
  transition: transform 1.2s var(--ease);
}
.js .partner.rv .partner__bild img { transform: scale(1.06); }
.js .partner.rv.is-da .partner__bild img { transform: none; }
.partner__kopf { display: flex; align-items: center; gap: 1rem; justify-content: space-between; }
.partner h3 { font-size: clamp(1.875rem, 3vw, 2.625rem); }
.li-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--salbei);
  border: 1px solid var(--linie-stark);
  border-radius: 50%;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.li-icon:hover { color: var(--weiss); border-color: var(--weiss); }
.li-icon svg { width: 1.125rem; height: 1.125rem; }
.partner__rolle {
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--salbei);
  margin: .75rem 0 var(--r3);
}
.partner__kontakt {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--r4);
  padding-block: var(--r2);
  margin-bottom: var(--r3);
  border-block: 1px solid var(--linie);
}
.partner__kontakt a {
  color: var(--weiss);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 1rem;
}
.partner__kontakt a:hover { text-decoration: underline; text-underline-offset: .2em; }
.partner p.fliess { color: var(--text); max-width: 32em; }

@media (max-width: 820px) { .partner__raster { grid-template-columns: minmax(0, 1fr); } }

#fuer-wen .sek-titel { font-size: clamp(1.75rem, 3.2vw, 2.875rem); line-height: 1.2; }
.fuerwen__liste {
  list-style: none;
  margin: var(--r6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--r5);
}
.fuerwen__liste li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  padding: var(--r3) 0;
  border-top: 1px solid var(--linie);
  font-size: 1.1875rem;
  color: var(--weiss);
}
.fuerwen__liste li::before { content: "—"; color: var(--salbei); }

@media (max-width: 820px) { .fuerwen__liste { grid-template-columns: minmax(0, 1fr); } }

.kontakt__raster {
  display: grid;
  gap: var(--r6);
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: start;
}
.kontakt__satz {
  font-size: clamp(3rem, 6.4vw, 5.75rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin-bottom: var(--r5);
}
.kontakt__daten {
  display: grid;
  gap: var(--r3);
  margin: var(--r6) 0 0;
  padding-top: var(--r4);
  border-top: 1px solid var(--linie);
}
.kontakt__daten dt {
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--salbei);
  margin-bottom: .25rem;
}
.kontakt__daten dd { margin: 0; font-size: 1.125rem; color: var(--weiss); }
.kontakt__daten a {
  color: var(--weiss);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}
.kontakt__daten a:hover { text-decoration: underline; text-underline-offset: .2em; }

.kontakt__formular {
  border: 1px solid var(--linie-stark);
  padding: clamp(1.5rem, 4vw, 3.5rem);
}

@media (max-width: 900px) { .kontakt__raster { grid-template-columns: minmax(0, 1fr); } }

.page-hero .wrap,
.content-area .content-wrap {
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.page-hero { padding: calc(var(--kopfhoehe) + var(--r7)) 0 var(--r5); }
.page-hero .legal-back { color: var(--salbei); text-decoration: none; font-size: 1rem; display: inline-flex; align-items: center; min-height: 2.75rem; }
.page-hero .index {
  font-size: .8125rem; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--salbei); margin: var(--r4) 0 var(--r2);
}
.page-hero__title { font-size: clamp(2.5rem, 5vw, 4.5rem); }
.content-area { padding-bottom: var(--r9); }

.content-area .is-layout-constrained > * { max-width: 44rem; margin-left: 0 !important; }
.content-area h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: var(--r6) 0 var(--r2); }
.content-area h3 { font-size: 1.375rem; margin: var(--r4) 0 var(--r1); }
.content-area a { color: var(--weiss); text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }
.content-area dl { margin: var(--r3) 0 var(--r3); }
.content-area dd { margin: 0 0 var(--r2); color: var(--weiss); }
.content-area dt { color: var(--salbei); font-size: .9375rem; }

.kontakt__formular .fluentform { margin: 0; }
.kontakt__formular form { margin: 0; }

.kontakt__formular .ff-el-group {
  margin: 0 0 2rem;
}
.kontakt__formular .ff-el-group:last-of-type { margin-bottom: 0; }

.kontakt__formular .ff-el-input--label label {
  display: block;
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--salbei);
  margin-bottom: .5rem;
}
.kontakt__formular .ff-el-input--label.ff-el-is-required label::after {
  content: "*";
  margin-left: .3rem;
  color: var(--weich);
}

.kontakt__formular .ff-el-is-required.asterisk-right label:not(:last-child)::after { content: none; }

.kontakt__formular .fluentform {
  --fluentform-primary: var(--weiss);
  --fluentform-secondary: var(--salbei);
  --fluentform-border-color: rgba(168, 197, 188, .45);
}

.sektion--abschluss .kontakt__formular input[type="text"],
.sektion--abschluss .kontakt__formular input[type="email"],
.sektion--abschluss .kontakt__formular input[type="tel"],
.sektion--abschluss .kontakt__formular textarea,
.sektion--abschluss .kontakt__formular select {
  width: 100%;
  background: transparent;
  border: 0;

  border-bottom: 1px solid rgba(168, 197, 188, .7);
  border-radius: 0;
  padding: .6rem 0;
  color: var(--weiss);
  font-family: var(--sans);
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.5;
  transition: border-color .25s var(--ease);
  box-shadow: none;
  min-height: 2.75rem;
}
.kontakt__formular textarea { resize: vertical; min-height: 6.5rem; }

.sektion--abschluss .kontakt__formular input:focus,
.sektion--abschluss .kontakt__formular textarea:focus,
.sektion--abschluss .kontakt__formular select:focus {

  background: transparent;
  color: var(--weiss);
  border-bottom-color: var(--weiss);
  box-shadow: none;
}

.sektion--abschluss .kontakt__formular input:focus-visible,
.sektion--abschluss .kontakt__formular textarea:focus-visible,
.sektion--abschluss .kontakt__formular select:focus-visible {
  outline: 2px solid var(--salbei);
  outline-offset: 4px;
}

.kontakt__formular ::placeholder {

  color: rgba(255, 255, 255, .66);
  font-weight: 300;
}

.kontakt__formular .ff-el-form-check { display: block; }
.kontakt__formular .ff-el-form-check-label {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--text);
  cursor: pointer;
}
.sektion--abschluss .kontakt__formular input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin: .15rem 0 0;
  background: transparent;
  border: 1px solid var(--salbei);
  border-radius: 1px;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.kontakt__formular input[type="checkbox"]:checked {
  background: var(--weiss);
  border-color: var(--weiss);
}
.kontakt__formular input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  width: .32rem;
  height: .62rem;
  margin: .04rem 0 0 .3rem;
  border: solid var(--dunkel);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.kontakt__formular input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--salbei);
  outline-offset: 3px;
}
.kontakt__formular .ff-el-form-check-label a {
  color: var(--weich);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.sektion--abschluss .kontakt__formular .ff-btn-submit:not(.ff_btn_no_style),
.sektion--abschluss .kontakt__formular button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: .8rem;
  background: var(--weiss);
  color: var(--dunkel);
  border: 1px solid var(--weiss);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.2;
  padding: 1rem 2rem;
  min-height: 3.25rem;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.sektion--abschluss .kontakt__formular .ff-btn-submit:not(.ff_btn_no_style):hover,
.sektion--abschluss .kontakt__formular button[type="submit"]:hover {
  background: transparent;
  color: var(--weiss);
}

.sektion--abschluss .kontakt__formular .ff-btn-submit:focus-visible,
.sektion--abschluss .kontakt__formular button[type="submit"]:focus-visible {
  outline: 2px solid var(--salbei);
  outline-offset: 3px;
  opacity: 1;
}

.kontakt__formular .ff-message-success:focus { outline: none; }

.sektion--abschluss .kontakt__formular .ff-el-is-error input,
.sektion--abschluss .kontakt__formular .ff-el-is-error textarea { border-bottom-color: #e0a3a3; }
.kontakt__formular .error-text,
.kontakt__formular .text-danger {
  font-size: .8rem;
  color: #e8bcbc;
  margin-top: .4rem;
}
.kontakt__formular .ff-message-success {
  border: 1px solid rgba(168, 197, 188, .45);
  padding: 1.4rem 1.6rem;
  color: var(--weiss);
  font-size: .98rem;
}

.sektion--abschluss .kontakt__formular .ff-el-is-required.asterisk-right label::after { color: var(--salbei); }

.sektion--abschluss .kontakt__formular .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
  content: " *";
  content: " *" / "";
}

@media (max-width: 820px) {
  :root { --sektion: 5rem; --folge: 4rem; --eng: 3rem; }
  .sek-titel { margin-bottom: var(--r5); }
  .vorspann { margin-bottom: var(--r5); }
  .mandat + .mandat { margin-top: var(--r6); padding-top: var(--r6); }
  .partner__raster { gap: var(--r6); }
  .partner__bild { margin-bottom: var(--r3); }
  .partner__bild img { aspect-ratio: 5 / 5.4; }
  .leistung { padding: 1.75rem 1.5rem; gap: .75rem; }
  .leistung__kopf { gap: var(--r2); }
  .perspektive { padding: var(--r2) 0; }
  .kontakt__raster { gap: var(--r5); }
  .kontakt__daten { margin-top: var(--r4); }
  .fuerwen__liste { margin-top: var(--r4); }
}