/* ==========================================================================
   Neubauportal24 — Stylesheet
   Farben ausschließlich gemäß "Farbanweisung Website", GILDEPARTNER GmbH.
   Keine Hex-Werte außerhalb dieses :root-Blocks.
   ========================================================================== */

:root {
  --gp-blau-900: #0F1C2C;
  --gp-blau-700: #192E48;
  --gp-blau-500: #2A456A;
  --gp-blau-300: #7C8DA6;
  --gp-blau-100: #E3E7ED;
  --gp-blau-050: #F7F6F3;
  --gp-rot-700:  #8E1C1F;
  --gp-rot-500:  #C2272A;
  --gp-weiss:    #FFFFFF;

  /* Rückmeldefarben für den Meldungskasten nach dem Absenden. Abweichung
     von der Farbanweisung, die außer Blau und Rot keine weitere Farbe und
     kein Rot als Fläche vorsieht — auf ausdrücklichen Wunsch. Beide Töne
     sind gleich hell aufgebaut, damit die Kästen gleich ruhig wirken.
     Sie werden ausschließlich hier verwendet. */
  --gp-gruen-050: #E9F4EC;
  --gp-gruen-200: #C3DECA;
  --gp-rot-050:   #FAECEC;
  --gp-rot-200:   #E8C8C9;

  --gp-text:            var(--gp-blau-700);
  --gp-text-invers:     var(--gp-weiss);
  --gp-text-sekundaer:  #2A455A;
  --gp-text-invers-sek: #B6C0CE;
  --gp-linie:           var(--gp-blau-100);
  --gp-akzent:          var(--gp-rot-500);

  --schrift: "Helvetica Neue", Helvetica, Arial, -apple-system,
             BlinkMacSystemFont, "Segoe UI", sans-serif;

  --breite: 1140px;
  --rand: clamp(1.25rem, 5vw, 3rem);
}

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

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  margin: 0;
  background: var(--gp-weiss);
  color: var(--gp-text);
  font-family: var(--schrift);
  font-size: 1.125rem;          /* 18px — Zielgruppe 50+ */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3 {
  color: var(--gp-blau-700);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); }

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

a { color: var(--gp-akzent); overflow-wrap: anywhere; }
a:hover { color: var(--gp-rot-700); }

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

/* Auch Formularfelder ohne eigene Klasse bleiben in der Palette. */
input, select, textarea, button {
  color: var(--gp-text);
  border-color: var(--gp-linie);
  accent-color: var(--gp-blau-700);
}

:focus-visible {
  outline: 3px solid var(--gp-blau-700);
  outline-offset: 3px;
}

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

/* Verweise, die die Seite verlassen, bekommen einen Pfeil. */
.extern::after {
  content: " \2197";
  font-weight: 400;
}

.nur-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sprungmarke {
  position: absolute; left: var(--rand); top: -100px;
  z-index: 100; background: var(--gp-weiss); color: var(--gp-blau-700);
  padding: 0.75rem 1.25rem; border: 2px solid var(--gp-blau-700);
  font-weight: 600; text-decoration: none;
}
.sprungmarke:focus { top: 0.75rem; color: var(--gp-blau-700); }

/* --- Sektionen ----------------------------------------------------------- */

section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

.sektion--abgesetzt {
  background: var(--gp-blau-050);
  border-top: 1px solid var(--gp-linie);
  border-bottom: 1px solid var(--gp-linie);
}
/* Grenzt eine abgesetzte Fläche an eine dunkle, ist die Linie überflüssig. */
.sektion--abgesetzt + .sektion--dunkel { border-top: 0; }

.sektion--dunkel {
  background: var(--gp-blau-700);
  color: var(--gp-text-invers);
}
.sektion--dunkel h1,
.sektion--dunkel h2,
.sektion--dunkel h3 { color: var(--gp-text-invers); }

.sektion__kopf { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sektion__kopf p {
  margin-top: 1rem;
  font-size: 1.15rem;
  color: var(--gp-text-sekundaer);
}
.sektion--dunkel .sektion__kopf p { color: var(--gp-text-invers-sek); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.85rem 1.9rem;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* auf hellem Grund */
.btn--primaer {
  background: var(--gp-blau-700);
  border-color: var(--gp-blau-700);
  color: var(--gp-weiss);
}
.btn--primaer:hover {
  background: var(--gp-blau-500);
  border-color: var(--gp-blau-500);
  color: var(--gp-weiss);
}

.btn--sekundaer {
  background: transparent;
  border-color: var(--gp-blau-700);
  color: var(--gp-blau-700);
}
.btn--sekundaer:hover {
  background: var(--gp-blau-700);
  color: var(--gp-weiss);
}

/* auf dunklem Grund */
.auf-dunkel .btn--primaer {
  background: var(--gp-weiss);
  border-color: var(--gp-weiss);
  color: var(--gp-blau-700);
}
.auf-dunkel .btn--primaer:hover {
  background: var(--gp-blau-050);
  border-color: var(--gp-blau-050);
  color: var(--gp-blau-700);
}
.auf-dunkel .btn--sekundaer {
  background: transparent;
  border-color: var(--gp-weiss);
  color: var(--gp-weiss);
}
.auf-dunkel .btn--sekundaer:hover {
  background: var(--gp-weiss);
  color: var(--gp-blau-700);
}
.auf-dunkel :focus-visible { outline-color: var(--gp-weiss); }

.btn-gruppe {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* --- Kopfbereich --------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--gp-weiss);
  border-bottom: 1px solid var(--gp-linie);
}

.kopf__zeile {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 5rem;
  padding-block: 0.85rem;
}

/* --- Marke --------------------------------------------------------------- */

.kopf__marke {
  color: var(--gp-blau-700);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-decoration: none;
  flex: 0 0 auto;
}
.kopf__marke img { width: clamp(210px, 24vw, 240px); }

/* Der Zusatz bleibt deutlich schmaler als die Wortmarke darüber. */
.kopf__zusatz {
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gp-text-sekundaer);
  white-space: nowrap;
}

/* --- Menü, ab 860 px offen in der Zeile ---------------------------------- */

.kopf__menue {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin-left: auto;
}

.kopf__nav {
  display: flex;
  align-items: center;
  gap: 1.15rem;
}
.kopf__nav a {
  padding-block: 0.35rem;
  color: var(--gp-blau-700);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.kopf__nav a:hover { color: var(--gp-blau-500); }
.kopf__nav a[aria-current="page"] {
  border-bottom-color: var(--gp-akzent);   /* aktiver Punkt, Schrift bleibt blau */
}

.kopf__aktionen {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.kopf__aktionen .btn {
  min-height: 2.4rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.88rem;
  white-space: nowrap;   /* Beschriftung darf nie umbrechen */
  flex: 0 0 auto;
}

/* --- Sprachwahl ----------------------------------------------------------- */

.sprachwahl {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex: 0 0 auto;
}
.sprachwahl a {
  display: inline-flex;
  align-items: center;
  min-height: 2.4rem;
  padding: 0.2rem 0.55rem;
  color: var(--gp-blau-700);
  border: 1px solid var(--gp-linie);
  border-radius: 2px;
  text-decoration: none;
}
.sprachwahl a:hover {
  background: var(--gp-blau-050);
  color: var(--gp-blau-700);
}

/* Zwischen 1100 und 1180 px reicht der Platz neben vier Menüpunkten nur für
   eine Schaltfläche. Dann bleibt „Investment suchen“ stehen und übernimmt
   die volle Fläche. Im aufgeklappten Menü stehen weiterhin beide. */
@media (min-width: 1100px) and (max-width: 1180px) {
  .kopf__aktionen .btn--primaer { display: none; }
  .kopf__aktionen .btn--sekundaer {
    background: var(--gp-blau-700);
    border-color: var(--gp-blau-700);
    color: var(--gp-weiss);
  }
  .kopf__aktionen .btn--sekundaer:hover {
    background: var(--gp-blau-500);
    border-color: var(--gp-blau-500);
    color: var(--gp-weiss);
  }
}

/* --- Schaltfläche für das Menü ------------------------------------------- */

.kopf__schalter {
  display: none;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 1px solid var(--gp-linie);
  border-radius: 2px;
  cursor: pointer;
}
.kopf__schalter:hover { background: var(--gp-blau-050); }

/* Drei Striche, die sich beim Öffnen zum Kreuz drehen. */
.kopf__balken,
.kopf__balken::before,
.kopf__balken::after {
  position: absolute;
  left: 50%;
  width: 1.25rem;
  height: 2px;
  margin-left: -0.625rem;
  background: var(--gp-blau-700);
  transition: transform .2s ease, opacity .2s ease;
}
.kopf__balken { top: 50%; margin-top: -1px; }
.kopf__balken::before { content: ""; margin-left: -0.625rem; top: -6px; }
.kopf__balken::after  { content: ""; margin-left: -0.625rem; top:  6px; }

.kopf__schalter[aria-expanded="true"] .kopf__balken { background: transparent; }
.kopf__schalter[aria-expanded="true"] .kopf__balken::before {
  top: 0; transform: rotate(45deg);
}
.kopf__schalter[aria-expanded="true"] .kopf__balken::after {
  top: 0; transform: rotate(-45deg);
}

/* --- Zwischenbreiten ----------------------------------------------------- */



/* --- Schmale Geräte: kompakte Leiste mit aufklappbarem Menü -------------- */

@media (max-width: 1099px) {
  .kopf__zeile {
    flex-wrap: wrap;
    min-height: 0;
    padding-block: 0.9rem;
    gap: 0.75rem;
  }

  .kopf__schalter { display: block; }

  .kopf__marke img { width: min(270px, calc(100vw - 7.5rem)); }
  .kopf__zusatz { font-size: 0.62rem; letter-spacing: 0.09em; }

  /* Ohne JavaScript bleibt das Menü sichtbar. Das Skript klappt es zu. */
  .kopf__menue {
    order: 3;
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--gp-linie);
  }
  .kopf__menue[hidden] { display: none; }

  .kopf__nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .kopf__nav a {
    padding: 0.9rem 0.25rem;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--gp-linie);
  }
  .kopf__nav a[aria-current="page"] {
    border-bottom-color: var(--gp-linie);
    box-shadow: inset 3px 0 0 0 var(--gp-akzent);
    padding-left: 0.85rem;
  }

  .kopf__aktionen {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    padding-block: 1rem 0.35rem;
  }
  .kopf__aktionen .btn {
    display: flex;
    width: 100%;
    min-height: 3.1rem;
    font-size: 1rem;
  }
  .kopf__aktionen .btn--sekundaer { display: flex; }

  /* Im aufgeklappten Menü steht die Sprachwahl zwischen den Menüpunkten
     und den Schaltflächen — die Reihenfolge im Quelltext genügt dafür. */
  .sprachwahl {
    justify-content: flex-start;
    padding: 1rem 0.25rem;
    font-size: 0.95rem;
  }
  .sprachwahl a {
    min-height: 2.75rem;
    padding-inline: 0.9rem;
    font-size: 1rem;
  }

  html { scroll-padding-top: 5.5rem; }
}

@media (max-width: 360px) {
  .kopf__zusatz { font-size: 0.58rem; letter-spacing: 0.07em; }
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  background: var(--gp-blau-700);
  color: var(--gp-text-invers);
  padding-block: clamp(4rem, 11vw, 8rem);
}
.hero__inhalt { max-width: 54rem; }
.hero h1 { color: var(--gp-weiss); }
.hero__vorspann {
  margin: 0 0 1.25rem;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gp-text-invers-sek);
}
.hero__lead {
  margin: 1.75rem 0 0;
  font-size: clamp(1.15rem, 2.1vw, 1.35rem);
  color: var(--gp-text-invers-sek);
  max-width: 44rem;
}
.hero .btn-gruppe { margin-top: 2.75rem; }
.hero__marke {
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--gp-blau-500);
  font-size: 0.95rem;
  color: var(--gp-text-invers-sek);
}

/* --- Fokus-Liste --------------------------------------------------------- */

/* Das Raster entsteht aus den Rahmen der Zellen, nicht aus einer
   durchscheinenden Hintergrundfarbe. Bleibt die letzte Zeile unvollständig,
   bleiben die leeren Felder so einfach leer. */
.fokus-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--gp-linie);
  border-left: 1px solid var(--gp-linie);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.fokus-liste li {
  background: var(--gp-weiss);
  border-right: 1px solid var(--gp-linie);
  border-bottom: 1px solid var(--gp-linie);
  padding: 1.6rem 1.75rem;
  font-size: 1.0625rem;
}
.fokus-liste li strong {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.fokus-liste li span { color: var(--gp-text-sekundaer); font-size: 0.98rem; }

.fokus-hinweis {
  margin-top: 2rem;
  font-size: 1.0625rem;
  color: var(--gp-text-sekundaer);
  max-width: 46rem;
}

/* --- Zwei Wege ----------------------------------------------------------- */

.wege {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}
.weg {
  display: flex;
  flex-direction: column;
  background: var(--gp-weiss);
  border: 1px solid var(--gp-linie);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
.weg h3 { margin-bottom: 0.9rem; }
.weg p { color: var(--gp-text-sekundaer); }
.weg .btn { margin-top: auto; align-self: flex-start; }
.weg__frage {
  font-weight: 600;
  color: var(--gp-blau-700) !important;
}

/* --- Vertrauen ----------------------------------------------------------- */

.vertrauen__text { max-width: 48rem; }
.vertrauen__text p { color: var(--gp-text-invers-sek); font-size: 1.1rem; }
.vertrauen__text p:first-of-type { color: var(--gp-weiss); }

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

.kontakt__raster {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 62rem) {
  .kontakt__raster { grid-template-columns: 20rem minmax(0, 1fr); }
}

.kontakt__direkt h2 { font-size: clamp(1.55rem, 2.9vw, 2.05rem); }
.kontakt__direkt p { color: var(--gp-text-sekundaer); }
.kontakt__daten {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
}
.kontakt__daten li {
  padding: 0.85rem 0;
  border-top: 1px solid var(--gp-linie);
}
.kontakt__daten li:last-child { border-bottom: 1px solid var(--gp-linie); }
.kontakt__label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gp-text-sekundaer);
  margin-bottom: 0.15rem;
}
.kontakt__daten a {
  font-weight: 600;
  color: var(--gp-blau-700);
  text-decoration-color: var(--gp-blau-300);
  text-underline-offset: 3px;
}
.kontakt__daten a:hover { color: var(--gp-blau-500); }

/* Umschalter der beiden Wege */
.umschalter {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--gp-linie);
  background: var(--gp-weiss);
  margin-bottom: 2rem;
}
.umschalter__feld { position: absolute; opacity: 0; pointer-events: none; }
.umschalter__label {
  flex: 1 1 14rem;
  padding: 1rem 1.25rem;
  text-align: center;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--gp-text-sekundaer);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: background-color .18s ease, color .18s ease;
}
.umschalter__label:hover { background: var(--gp-blau-050); }
.umschalter__feld:checked + .umschalter__label {
  color: var(--gp-blau-700);
  border-bottom-color: var(--gp-akzent);   /* aktiver Punkt: roter Unterstrich */
}
.umschalter__feld:focus-visible + .umschalter__label {
  outline: 3px solid var(--gp-blau-700);
  outline-offset: -3px;
}

.formular { background: var(--gp-weiss); }
.formular__titel { margin-bottom: 0.75rem; }
.formular__vorspann {
  color: var(--gp-text-sekundaer);
  margin-bottom: 2rem;
  max-width: 40rem;
}

.feldpaar {
  display: grid;
  gap: 1.25rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  margin-bottom: 1.25rem;
}

.feld { display: flex; flex-direction: column; }
.feld--voll { margin-bottom: 1.25rem; }

.feld label {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.pflicht { color: var(--gp-akzent); }

.feld input,
.feld select,
.feld textarea {
  font: inherit;
  font-size: 1.0625rem;
  color: var(--gp-text);
  background: var(--gp-weiss);
  border: 1px solid var(--gp-linie);
  border-radius: 2px;
  padding: 0.8rem 0.9rem;
  min-height: 3.1rem;
  width: 100%;
  transition: border-color .18s ease;
}
.feld textarea { min-height: 8rem; resize: vertical; line-height: 1.55; }

.feld ::placeholder {
  color: var(--gp-blau-500);
  opacity: 1;
}

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  border-color: var(--gp-blau-700);
  outline: 1px solid var(--gp-blau-700);
  outline-offset: 0;
}
.feld input[aria-invalid="true"],
.feld textarea[aria-invalid="true"],
.feld select[aria-invalid="true"] { border-color: var(--gp-akzent); }

.feld__fehler {
  display: none;
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: var(--gp-akzent);
}
.feld__fehler[data-sichtbar="ja"] { display: block; }

.einwilligung {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin: 1.75rem 0 1.5rem;
  font-size: 0.98rem;
  color: var(--gp-text-sekundaer);
}
.einwilligung input {
  width: 1.35rem; height: 1.35rem;
  margin: 0.2rem 0 0;
  flex: 0 0 auto;
  accent-color: var(--gp-blau-700);
}

.formular__hinweis {
  margin-top: 1.25rem;
  font-size: 0.92rem;
  color: var(--gp-text-sekundaer);
}

.meldung {
  display: none;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--gp-linie);
  background: var(--gp-blau-050);
  font-size: 1rem;
}
.meldung[data-sichtbar="ja"] { display: block; }

/* Hat es geklappt, ist der Kasten grün. */
.meldung[data-art="erfolg"] {
  background: var(--gp-gruen-050);
  border-color: var(--gp-gruen-200);
}

/* Ging etwas schief, ist er hellrot. */
.meldung[data-art="fehler"] {
  background: var(--gp-rot-050);
  border-color: var(--gp-rot-200);
}

/* Zweite Bestätigung unterhalb der Schaltfläche. */
.meldung--unten { margin: 1.5rem 0 0; }

/* --- Abschluss ----------------------------------------------------------- */

.abschluss { text-align: center; }
.abschluss h2 { color: var(--gp-weiss); max-width: 22ch; margin-inline: auto; }
.abschluss__lead {
  margin: 1.5rem auto 0;
  max-width: 40rem;
  color: var(--gp-text-invers-sek);
  font-size: 1.15rem;
}
.abschluss .btn-gruppe { justify-content: center; margin-top: 2.5rem; }
.abschluss__kontakt {
  margin-top: 2.75rem;
  font-size: 1.05rem;
  color: var(--gp-text-invers-sek);
}
.abschluss__kontakt a { color: var(--gp-weiss); font-weight: 600; }
.abschluss__kontakt a:hover { color: var(--gp-blau-050); }
.abschluss__kontakt span { padding-inline: 0.6rem; color: var(--gp-blau-300); }

/* --- Fußbereich ---------------------------------------------------------- */

.fuss {
  background: var(--gp-blau-900);
  color: var(--gp-text-invers-sek);
  padding-block: clamp(2.75rem, 6vw, 4rem);
  font-size: 0.98rem;
}
.fuss__oben {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--gp-blau-500);
}
.fuss__marke img { width: 220px; }
.fuss__marke p { margin: 1rem 0 0; max-width: 26rem; }
.fuss__mutter a {
  color: var(--gp-text-invers-sek);
  text-decoration: none;
}
.fuss__mutter a:hover { color: var(--gp-weiss); text-decoration: underline; }
.fuss__adresse { font-style: normal; }
.fuss__adresse a { color: var(--gp-weiss); }
.fuss__adresse a:hover { color: var(--gp-blau-050); }
.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  padding-top: 1.75rem;
}
.fuss__unten p { margin: 0; }

/* Rechtslinks: eine Zeile, gleiche Schriftgröße, gemeinsame Grundlinie. */
.fuss__links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.98rem;
  line-height: 1.5;
}
.fuss__links li { display: block; margin: 0; }
.fuss__links a {
  display: inline-block;
  color: var(--gp-weiss);
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  text-decoration: none;
  vertical-align: baseline;
}
.fuss__links a:hover { text-decoration: underline; }

/* --- Rechtstexte --------------------------------------------------------- */

.rechtstext { padding-block: clamp(3rem, 7vw, 5rem); }
.rechtstext .inhalt { max-width: 48rem; }
.rechtstext h1 { margin-bottom: 2rem; }
.rechtstext h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  margin: 2.75rem 0 0.9rem;
}
.rechtstext h3 { font-size: 1.1rem; margin: 1.75rem 0 0.6rem; }
.rechtstext p, .rechtstext li { color: var(--gp-text-sekundaer); }
.rechtstext ul { padding-left: 1.25rem; }
.rechtstext li { margin-bottom: 0.4rem; }
.rechtstext .platzhalter {
  color: var(--gp-akzent);
  font-weight: 600;
}
.rechtstext__zurueck { display: inline-block; margin-top: 3rem; }


/* --- Hero mit Bild ------------------------------------------------------- */
/* Der Text steht auf einem eigenen Farbblock neben dem Bild, nicht darauf.
   Keine Abdunklung, kein Filter, keine Tonung (Farbanweisung, Abschnitt 6). */

.hero--bild .inhalt {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 62rem) {
  .hero--bild .inhalt { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
}
.hero--bild .hero__inhalt { max-width: 34rem; }
.hero__bild img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* --- Bildband ------------------------------------------------------------ */

.bildband { padding-block: 0; }
.bildband img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 58%;
}
.bildband__text {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  justify-content: space-between;
  margin-top: 0.9rem;
  font-size: 0.98rem;
  color: var(--gp-text-sekundaer);
}
@media (max-width: 40rem) {
  .bildband img { aspect-ratio: 4 / 3; }
}

/* --- Bild in den Wege-Karten --------------------------------------------- */

.weg { padding: 0; overflow: hidden; }
.weg__bild {
  margin: 0;
  border-bottom: 1px solid var(--gp-linie);
}
.weg__bild img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.weg__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
}
.weg__text > .btn { margin-top: auto; align-self: flex-start; }

/* --- Team ----------------------------------------------------------------
   Die Personen stehen untereinander, Bild links, Text rechts. So dürfen die
   Texte unterschiedlich lang sein, ohne dass Leerflächen entstehen.
   -------------------------------------------------------------------------- */

.team {
  display: flex;
  flex-direction: column;
}

.person {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  padding-block: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--gp-linie);
}
.person:first-child { border-top: 0; padding-top: 0; }
.person:last-child { padding-bottom: 0; }

@media (min-width: 40rem) {
  .person {
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3rem);
    align-items: start;
  }
}

.person img {
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}

.person__name {
  margin: 0 0 0.15rem;
  font-size: clamp(1.3rem, 2.2vw, 1.55rem);
  font-weight: 600;
  color: var(--gp-blau-700);
}
.person__rolle {
  display: block;
  margin-bottom: 1.1rem;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gp-text-sekundaer);
}
.person__text p {
  margin: 0 0 1em;
  font-size: 1.0625rem;
  color: var(--gp-text-sekundaer);
  max-width: 42rem;
}
.person__text p:last-child { margin-bottom: 0; }

/* --- Textblock mit Bild daneben ------------------------------------------ */

.zweispalt {
  display: grid;
  gap: clamp(2rem, 4.5vw, 3.5rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 56rem) {
  .zweispalt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .zweispalt--bild-links .zweispalt__bild { order: -1; }
}
.zweispalt__bild img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.zweispalt__text p { color: var(--gp-text-sekundaer); }
.zweispalt__text h2 + p { margin-top: 1.25rem; }

/* --- Kontaktkarte --------------------------------------------------------
   Steht in einer schmalen Spalte. Deshalb durchgehend eine Stufe kleiner
   als der Fließtext, und Bezeichnung über dem Wert statt daneben — sonst
   bricht die E-Mail-Adresse mitten im Wort um.
   -------------------------------------------------------------------------- */

.firmenkontakt {
  background: var(--gp-blau-050);
  border: 1px solid var(--gp-linie);
  padding: clamp(1.5rem, 3vw, 2rem);
  font-size: 1rem;
  line-height: 1.55;
}
.firmenkontakt h3 {
  font-size: 1.2rem;
  margin-bottom: 0.9rem;
}
.firmenkontakt address {
  font-style: normal;
  font-size: 1rem;
  color: var(--gp-text-sekundaer);
}
.firmenkontakt dl {
  margin: 1.4rem 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.firmenkontakt dt {
  margin-top: 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gp-text-sekundaer);
}
.firmenkontakt dl > dt:first-of-type { margin-top: 0; }
.firmenkontakt dd {
  margin: 0.1rem 0 0;
  font-size: 1rem;
  color: var(--gp-text-sekundaer);
}
.firmenkontakt dd a {
  color: var(--gp-blau-700);
  font-weight: 600;
  text-decoration-color: var(--gp-blau-300);
  text-underline-offset: 3px;
}
.firmenkontakt dd a:hover { color: var(--gp-blau-500); }
.firmenkontakt__hinweis {
  margin-top: 1.4rem;
  font-size: 0.92rem;
  color: var(--gp-text-sekundaer);
}


/* --- Verweis auf die Hauptseite ------------------------------------------ */

.mutterhinweis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  justify-content: space-between;
  padding: 1.5rem 0;
  border-top: 1px solid var(--gp-linie);
  border-bottom: 1px solid var(--gp-linie);
  font-size: 1.0625rem;
  color: var(--gp-text-sekundaer);
}

/* --- Rechtstexte, Ergänzungen -------------------------------------------- */

.rechtstext__einleitung {
  font-size: 1.15rem;
  color: var(--gp-text-sekundaer);
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--gp-linie);
}
.rechtstext .markenzusatz {
  margin: 0 0 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--gp-blau-050);
  border-left: 3px solid var(--gp-akzent);
  color: var(--gp-text);
}
.rechtstext .markenzusatz strong {
  display: block;
  letter-spacing: 0.06em;
}
.rechtstext address { font-style: normal; }
.tabelle {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 1rem;
  background: var(--gp-weiss);
}
.tabelle th,
.tabelle td {
  border: 1px solid var(--gp-linie);
  padding: 0.7rem 0.9rem;
  text-align: left;
  vertical-align: top;
  color: var(--gp-text-sekundaer);
}
.tabelle th {
  background: var(--gp-blau-050);
  color: var(--gp-blau-700);
  font-weight: 600;
}
.tabelle td:last-child { text-align: right; white-space: nowrap; }
.tabelle .hervor td {
  background: var(--gp-blau-050);
  color: var(--gp-blau-700);
  font-weight: 600;
}
.tabelle caption {
  caption-side: bottom;
  padding-top: 0.75rem;
  font-size: 0.92rem;
  color: var(--gp-text-sekundaer);
  text-align: left;
}
.tabelle-rahmen { overflow-x: auto; }

/* --- Hinweiskasten -------------------------------------------------------
   Für Wichtiges im Fließtext und für den rechtlichen Hinweis am Seitenende.
   -------------------------------------------------------------------------- */

.hinweis {
  margin: 1.75rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--gp-blau-050);
  border-left: 3px solid var(--gp-blau-300);
}
.hinweis p { color: var(--gp-text-sekundaer); }
.hinweis__titel {
  margin: 0 0 0.4rem;
  font-weight: 600;
  color: var(--gp-blau-700);
}

.rechtshinweis {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--gp-linie);
}
.rechtshinweis h2 {
  font-size: 1.1rem;
  margin-bottom: 0.85rem;
}
.rechtshinweis p {
  max-width: 52rem;
  font-size: 0.98rem;
  color: var(--gp-text-sekundaer);
}

/* Fließtextblock mit angenehmer Zeilenlänge */
.textblock { max-width: 46rem; }
.textblock p { color: var(--gp-text-sekundaer); }
.textblock h2 { margin-bottom: 1rem; }
.textblock h3 {
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
}
.textblock .betont {
  font-size: 1.15rem;
  color: var(--gp-blau-700);
  font-weight: 600;
}

/* --- Bestätigungsseite --------------------------------------------------- */

.bestaetigung { text-align: center; }
.bestaetigung .inhalt { max-width: 40rem; }
.bestaetigung p {
  margin-top: 1.25rem;
  font-size: 1.15rem;
  color: var(--gp-text-sekundaer);
}
.bestaetigung .btn-gruppe { justify-content: center; margin-top: 2.5rem; }

/* --- Fußbereich, Ergänzungen --------------------------------------------- */

.fuss__spalten {
  display: grid;
  gap: 2rem clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--gp-blau-500);
}
.fuss__titel {
  margin: 0 0 0.9rem;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gp-weiss);
}
.fuss__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fuss__liste li { margin-bottom: 0.5rem; }
.fuss__liste a { color: var(--gp-text-invers-sek); text-decoration: none; }
.fuss__liste a:hover { color: var(--gp-weiss); text-decoration: underline; }



/* --- Sprungliste ----------------------------------------------------------
   Wegweiser am Anfang langer Seiten. Blau statt rot, sonst wären es zu
   viele rote Elemente in einer Ansicht.
   -------------------------------------------------------------------------- */

.sprungliste {
  margin: 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--gp-linie);
}
.sprungliste__titel {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gp-text-sekundaer);
}
.sprungliste ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: sprung;
}
.sprungliste a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--gp-linie);
  border-radius: 2px;
  color: var(--gp-blau-700);
  font-size: 0.98rem;
  font-weight: 600;
  text-decoration: none;
}
.sprungliste a::before {
  counter-increment: sprung;
  content: counter(sprung);
  font-weight: 400;
  color: var(--gp-blau-300);
}
.sprungliste a:hover {
  background: var(--gp-blau-050);
  color: var(--gp-blau-700);
}

/* --- Zwei Karten nebeneinander -------------------------------------------
   Zwei lange Textblöcke nebeneinander statt untereinander. Halbiert die
   Lauflänge und stellt die beiden Abschreibungsarten nebeneinander.
   -------------------------------------------------------------------------- */

.doppelkarte {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
}
.doppelkarte > article {
  display: flex;
  flex-direction: column;
  background: var(--gp-weiss);
  border: 1px solid var(--gp-linie);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.doppelkarte h3 {
  margin-bottom: 0.9rem;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
}
.doppelkarte p {
  color: var(--gp-text-sekundaer);
  font-size: 1.0625rem;
}
.doppelkarte .hinweis { margin-bottom: 0; margin-top: auto; }

/* --- Kennzahlen auf dunklem Grund ---------------------------------------- */

.kennzahlen {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  margin-top: clamp(2rem, 4vw, 2.75rem);
}
.kennzahl__wert {
  display: block;
  font-size: clamp(2.1rem, 5vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--gp-weiss);
}
.kennzahl__text {
  display: block;
  margin-top: 0.6rem;
  font-size: 1.0625rem;
  color: var(--gp-text-invers-sek);
}
.kennzahlen__fuss {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--gp-blau-500);
  font-size: 0.98rem;
  color: var(--gp-text-invers-sek);
  max-width: 46rem;
}

/* Aussage-Block auf dunklem Grund, ohne Kennzahlen */
.aussage { max-width: 46rem; }
.aussage p {
  font-size: clamp(1.05rem, 1.8vw, 1.15rem);
  color: var(--gp-text-invers-sek);
}
.aussage p:first-child {
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  color: var(--gp-weiss);
  font-weight: 500;
  line-height: 1.4;
}

@media print {
  .kopf, .btn-gruppe, .umschalter, .formular form { display: none; }
  body { font-size: 11pt; }
  .hero, .sektion--dunkel, .fuss { background: var(--gp-weiss) !important; color: var(--gp-text) !important; }
  .hero h1, .sektion--dunkel h2, .abschluss h2 { color: var(--gp-blau-700) !important; }
}

/* --- Umschaltung der beiden Formulare ------------------------------------ */

.umschalter { position: relative; }

@supports selector(:has(*)) {
  .wege-formulare:has(#weg-investment:checked) #formular-projekt,
  .wege-formulare:has(#weg-projekt:checked)    #formular-investment { display: none; }
}