/* ============================================================
   main.css – zgs consult GmbH
   Eigene Styles auf Basis von Bootstrap 5.3
   Struktur:
     1. Design-Tokens (CSS Custom Properties)
     2. Basis / Typografie
     3. Header & Navigation
     4. Hero
     5. Leistungs-Teaser (farbige Karten)
     6. Aktuelles (News-Karten)
     7. Leistungen von zgs (grüne Sektion)
     8. Footer
     9. Utilities & Responsive-Anpassungen
   ============================================================ */

/* ---------- 1. Design-Tokens ---------- */
:root {
  /* Markenfarben aus dem Figma-Design */
  --zgs-green: #61ac86;        /* Primärgrün */
  --zgs-green-dark: #4e9573;   /* Hover-Variante */
  --zgs-olive: #97b115;        /* Karte "Aufträge" */
  --zgs-teal: #268088;         /* Karte "Förderinstrumente" */
  --zgs-navy: #0d3c4c;         /* dunkle Textfarbe (Teaser/News) */
  --zgs-dark: #323232;         /* dunkler Button */
  --zgs-gray: #b8b8b8;         /* Datumsangaben */
  --zgs-mint: #dfeee2;         /* Kreis-Button News-Karte */
  --zgs-mint-band: #d6e7e6;    /* helles Hero-Band (Aktuelles), "Zum Archiv" */
  --zgs-blue: #154859;         /* dunkelblauer Block hinter Hero-Bildern */
  --zgs-navy-deep: #051435;    /* Karten-Überschriften Unterseiten */
  --zgs-border: #eceef0;       /* Kartenrahmen Unterseiten */
  --zgs-footer-bg: #fafafa;

  /* Schriften – einheitlich auf allen Seiten:
     Montserrat für Überschriften/Buttons/Labels, Inter für Fließtext */
  --zgs-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  --zgs-font-heading: 'Montserrat', var(--zgs-font-body);

  /* Typo-Skala – EINE Größenordnung für alle Seiten.
     Neue Komponenten binden immer diese Tokens ein, nie eigene px/rem-Werte. */
  --zgs-fs-h1: clamp(2.25rem, 4.5vw, 3.25rem);  /* Seitentitel (Hero) */
  --zgs-fs-h2: clamp(1.75rem, 3vw, 2.3rem);     /* Sektions-/Artikeltitel */
  --zgs-fs-h3: 1.5rem;                          /* Kartentitel */
  --zgs-fs-h4: 1.25rem;                         /* Untertitel, Sidebar, Footer */
  --zgs-fs-h5: 1.125rem;                        /* kleine Titel, Zwischenüberschriften */
  --zgs-fs-h6: 1rem;
  --zgs-fs-body: 1.0625rem;                     /* Fließtext */
  --zgs-fs-small: 0.9375rem;                    /* Nebentexte, Meta-Angaben */
  --zgs-fs-meta: 0.8125rem;                     /* Datum, Labels, Buttons */

  /* Bootstrap-Variablen überschreiben */
  --bs-primary: var(--zgs-green);
  --bs-link-color: #000;
  --bs-link-hover-color: var(--zgs-green);
  --bs-body-font-family: var(--zgs-font-body);
}

/* ---------- 2. Basis / Typografie ---------- */
body {
  font-family: var(--zgs-font-body);
  color: #000;
  background: #fff;
}

/* Gerahmter Seitencontainer: gesamte Seite (Hero, Teaser, Footer)
   bleibt innerhalb von max. 1518px und erhält einen leichten Schatten */
.page {
  max-width: 1518px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.08);
}

/* Alle Überschriften-Ebenen: Montserrat, ein Gewicht, eine Skala */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6, .heading {
  font-family: var(--zgs-font-heading);
  font-weight: 600;
}
h1, .h1 { font-size: var(--zgs-fs-h1); }
h2, .h2 { font-size: var(--zgs-fs-h2); }
h3, .h3 { font-size: var(--zgs-fs-h3); }
h4, .h4 { font-size: var(--zgs-fs-h4); }
h5, .h5 { font-size: var(--zgs-fs-h5); }
h6, .h6 { font-size: var(--zgs-fs-h6); }

.section-title {
  font-size: var(--zgs-fs-h2);
  line-height: 1.25;
}

a {
  color: #000;
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}
a:hover { color: var(--zgs-green); }

/* CTA-Buttons (dunkel & hell) im Design-Stil */
.btn-cta {
  font-family: var(--zgs-font-heading);
  font-size: var(--zgs-fs-meta);
  font-weight: 700;
  letter-spacing: 0.07em;
  border-radius: 0;
  padding: 0.75rem 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.btn-cta .bi { font-size: 0.75rem; }
.btn-cta-dark {
  background-color: var(--zgs-dark);
  color: #fff;
}
.btn-cta-dark:hover,
.btn-cta-dark:focus-visible {
  background-color: #000;
  color: #fff;
}
.btn-cta-light {
  background-color: #fff;
  color: #000;
}
.btn-cta-light:hover,
.btn-cta-light:focus-visible {
  background-color: var(--zgs-navy);
  color: #fff;
}

/* ---------- 3. Header & Navigation ---------- */
.site-header {
  background: #fff;
  transition: box-shadow 0.2s ease;
}
.site-header.is-scrolled {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.site-header .navbar {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.site-header .navbar-brand img {
  height: clamp(56px, 6.5vw, 76px);
  width: auto;
}
.site-header .nav-link {
  font-size: var(--zgs-fs-body);
  color: #000;
  white-space: nowrap;
}
.site-header .nav-link:hover,
.site-header .nav-link:focus-visible,
.site-header .nav-link.active {
  color: var(--zgs-green);
}
.site-header .nav-divider {
  width: 1px;
  height: 18px;
  background-color: #d9d9d9;
  align-self: center;
}
.site-header .btn-search {
  color: #051435;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  border: 0;
  background: none;
}
.site-header .btn-search:hover { color: var(--zgs-green); }
@media (min-width: 1400px) {
  /* Design: Such-Icon ragt über die Container-Kante hinaus (~53px vom Rand) */
  .site-header .navbar { position: relative; }
  .site-header .navbar-nav > .nav-item:last-child {
    position: absolute;
    right: 2.8125rem;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* Bereichs-Schnellnavigation im Header: gleiche Farben wie die
   Teaser-Kacheln, klebt mit dem sticky Header und wird erst beim
   Scrollen eingeblendet (Toggle: .is-scrolled aus main.js). */
.section-nav {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.site-header.is-scrolled .section-nav {
  max-height: 10rem; /* Platz für 3 gestapelte Zeilen auf Mobil */
}
.section-nav__link {
  display: block;
  padding: 0.625rem 1rem;
  font-family: var(--zgs-font-heading);
  font-weight: 600;
  font-size: var(--zgs-fs-body);
  text-align: center;
  color: #fff;
  text-decoration: none;
}
.section-nav__link--green { background-color: var(--zgs-green); }
.section-nav__link--olive { background-color: var(--zgs-olive); }
.section-nav__link--teal  { background-color: var(--zgs-teal); }
.section-nav__link:hover,
.section-nav__link:focus-visible,
.section-nav__link.active {
  color: #fff;
  /* dunkelt jede Kachelfarbe ab, ohne eigene Hover-Tokens zu brauchen */
  background-image: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12));
}

/* ---------- 4. Hero ---------- */
.hero {
  position: relative;
  /* hero-clean.jpg = hero.jpg ohne eingebackenen Text; der Titel
     kommt als HTML-Overlay (einheitliche Typografie) */
  background: url('../images/hero-clean.jpg') center top / cover no-repeat;
  min-height: clamp(300px, 48vw, 700px);
  overflow: hidden;
  display: flex;
  align-items: center;
  color: #fff;
}
.hero > .container-xxl { width: 100%; }
.hero__content {
  /* Textblock sitzt wie im Design etwas oberhalb der Mitte */
  padding-bottom: clamp(2rem, 6vw, 6rem);
}
.hero__title {
  margin-bottom: 1.5rem; /* Schrift/Größe kommen aus der h1-Basisregel */
}
.hero__subtitle {
  font-family: var(--zgs-font-heading);
  font-weight: 500;
  font-size: var(--zgs-fs-h3);
  line-height: 1.45;
  margin: 0;
}
/* Dekorative diagonale Streifen (rechts unten, halbtransparent) */
.hero__stripes {
  position: absolute;
  right: 2%;
  top: 42%;
  width: clamp(90px, 13vw, 204px);
  opacity: 0.2;
  color: #fff;
}

/* ---------- 5. Leistungs-Teaser (farbige Karten) ---------- */
.teaser {
  position: relative;
  margin-top: clamp(-220px, -18vw, -60px); /* Karten überlappen den Hero */
  /* Diagonaler weißer Anschnitt an der Unterkante (links tiefer als rechts) */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - clamp(1rem, 4.5vw, 5rem)), 0 100%);
}
.teaser__card {
  color: #fff;
  /* Großes Bottom-Padding: unter dem Link bleibt auch nach dem
     diagonalen Anschnitt Luft (wie im Design, bes. Karte 3 rechts) */
  padding: clamp(1.75rem, 3vw, 2.875rem) clamp(1.5rem, 3vw, 2.75rem)
    clamp(3.5rem, 6.5vw, 6.125rem);
  min-height: 100%;
  /* Link am Kartenboden verankern → alle drei Links auf gleicher Höhe */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.teaser__card .teaser__link { margin-top: auto; }
.teaser__card--green { background-color: var(--zgs-green); }
.teaser__card--olive { background-color: var(--zgs-olive); }
.teaser__card--teal  { background-color: var(--zgs-teal); }

.teaser__head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.teaser__head .bi { font-size: 2.25rem; line-height: 1; }
.teaser__title {
  font-family: var(--zgs-font-heading);
  font-weight: 600;
  font-size: var(--zgs-fs-h3);
  margin: 0;
  color: #fff;
}
.teaser__title a { color: inherit; }
.teaser__title a:hover,
.teaser__title a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.teaser__text {
  font-size: var(--zgs-fs-body);
  line-height: 1.35;
  max-width: 20.5rem;
  margin-bottom: 1.5rem;
}
.teaser__link {
  font-family: var(--zgs-font-heading);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.055em;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: clamp(2.5rem, 6.6vw, 6.25rem); /* Pfeil weit rechts vom Text (Design) */
}
.teaser__link:hover,
.teaser__link:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.teaser__link .bi { font-size: 0.8125rem; }

/* ---------- 6. Aktuelles (News-Karten) ---------- */
.news { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 6vw, 5.5rem); }
.news__intro {
  font-family: var(--zgs-font-body);
  font-weight: 600;
  font-size: var(--zgs-fs-body);
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--zgs-navy);
  max-width: 28rem;
}
.news-card {
  border: 2px solid #f3f4f5;
  border-radius: 6px;
  background: #fff;
  height: 100%;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.news-card:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.news-card__top {
  display: flex;
  align-items: center;
  justify-content: center; /* Icon mittig in der Karte */
  gap: 1.25rem;
  margin-bottom: 1rem;
}
.news-card__icon {
  width: 76px;
  height: 73px;
  object-fit: contain;
  flex-shrink: 0;
}
.news-card__label {
  font-family: var(--zgs-font-heading);
  font-weight: 600;
  font-size: var(--zgs-fs-meta);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5dad87;
}
.news-card__title {
  font-family: var(--zgs-font-heading);
  font-weight: 600;
  font-size: var(--zgs-fs-h5);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--zgs-navy);
  margin-bottom: 1.75rem;
}
.news-card__title a { color: inherit; }
.news-card__title a:hover { color: var(--zgs-green); }
.news-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.news-card__date {
  font-family: var(--zgs-font-heading);
  font-weight: 600;
  font-size: var(--zgs-fs-meta);
  color: var(--zgs-gray);
}
.news-card__arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--zgs-mint);
  color: #2f4d57;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.news-card__arrow:hover,
.news-card__arrow:focus-visible {
  background-color: var(--zgs-green);
  color: #fff;
}

/* ---------- 7. Leistungen von zgs (grüne Sektion) ---------- */
.services {
  background-color: var(--zgs-green);
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5.5rem);
}
.services .section-title { color: #fff; }
.services__grid {
  margin-top: clamp(1rem, 2.5vw, 2.5rem);
}
.service-card {
  position: relative;
  display: block;
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 425 / 343;
  background-color: #d9d9d9;
}
.service-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.service-card:hover img { transform: scale(1.04); }
.service-card__caption {
  /* Halbtransparenter Streifen, schwebt etwas über dem unteren Kartenrand */
  position: absolute;
  inset-inline: 0;
  bottom: clamp(0.875rem, 1.5vw, 1.375rem);
  padding: 1.125rem 1rem;
  text-align: center;
  font-family: var(--zgs-font-heading);
  font-weight: 600;
  font-size: var(--zgs-fs-h3);
  letter-spacing: 0.04em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
}

/* ---------- 8. Footer ---------- */
.site-footer {
  background-color: var(--zgs-footer-bg);
  padding-top: clamp(3rem, 6.5vw, 6rem);
  position: relative;
  overflow: hidden;
}
.site-footer__pattern {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(42%, 580px);
  height: auto;
  opacity: 0.6;
  pointer-events: none;
}
.site-footer__logo { height: 150px; width: auto; }
.site-footer__title {
  font-family: var(--zgs-font-heading);
  font-weight: 600;
  font-size: var(--zgs-fs-h4);
  margin-bottom: 0.75rem;
}
/* Zierlinie unter den Spaltenüberschriften: kurz schwarz, danach grau */
.site-footer__rule {
  width: 144px;
  height: 1px;
  background: linear-gradient(to right, #000 50%, rgba(0, 0, 0, 0.2) 50%);
  border: 0;
  opacity: 1;
  margin: 0 0 1.5rem;
}
.site-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.site-footer__links a {
  color: rgba(0, 0, 0, 0.8);
  font-size: var(--zgs-fs-body);
}
.site-footer__links a:hover { color: var(--zgs-green); }
.site-footer__badge { width: 130px; height: auto; }
.site-footer__bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-block: 1.5rem;
  font-size: 1rem;
}

/* ---------- 9. Unterseiten: Hero-Band mit Diagonale ---------- */
.page-hero {
  position: relative;
  isolation: isolate; /* damit das Band (::before, z-index:-1) sichtbar bleibt */
  padding-top: clamp(2rem, 4vw, 4.5rem);
}
.page-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: clamp(0rem, 4.5vw, 4.25rem); /* Hero-Bild ragt unter das Band hinaus */
  background-color: var(--zgs-green);
  /* Diagonale Unterkante: links tiefer als rechts (wie im Design) */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - clamp(1rem, 3.5vw, 3.5rem)), 0 100%);
}
.page-hero--olive::before { background-color: var(--zgs-olive); }
.page-hero--teal::before  { background-color: var(--zgs-teal); }
.page-hero--mint::before  { background-color: var(--zgs-mint-band); }
.page-hero--light::before { background-color: #f4f4f4; }

/* Textfarben: farbige Bänder → weiß, helle Bänder → schwarz */
.page-hero { color: #fff; }
.page-hero--mint,
.page-hero--light { color: #000; }

.page-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  margin-bottom: 1.5rem;
}
.page-hero__breadcrumb a { color: inherit; }
.page-hero__breadcrumb a:hover { text-decoration: underline; color: inherit; }
.page-hero__breadcrumb .bi { font-size: 0.75rem; }

.page-hero__title {
  font-family: var(--zgs-font-heading);
  font-weight: 600;
  font-size: var(--zgs-fs-h1);
  margin-bottom: 1.75rem;
}
/* Zierlinie: kurzer kräftiger Abschnitt, danach transparent auslaufend */
.page-hero__rule {
  width: min(496px, 100%);
  height: 2px;
  border: 0;
  opacity: 1;
  margin: 0 0 1.75rem;
  background: linear-gradient(to right,
    currentColor 150px, rgba(255, 255, 255, 0.15) 150px);
}
.page-hero--mint .page-hero__rule,
.page-hero--light .page-hero__rule {
  background: linear-gradient(to right,
    currentColor 150px, rgba(0, 0, 0, 0.15) 150px);
}
.page-hero__intro {
  font-size: var(--zgs-fs-body);
  line-height: 1.75;
  max-width: 34.5rem;
  opacity: 0.92;
  /* Abstand zur diagonalen Bandkante, falls die Textspalte die höchste ist */
  margin: 0 0 clamp(2.5rem, 5vw, 4.5rem);
}
.page-hero--mint .page-hero__intro {
  opacity: 1;
}

/* Hero-Bild rechts */
.page-hero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 722 / 454;
  object-fit: cover;
  display: block;
}

/* Barrierefreiheits-Button: fixiert am rechten Rand, auf allen Seiten
   sichtbar (Markup zentral in inc-footer.xtpl). Auf breiten Screens
   bleibt er innerhalb des 1518px-Seitenrahmens. */
.a11y-btn {
  position: fixed;
  right: max(clamp(0.75rem, 2vw, 1.5rem), calc((100vw - 1518px) / 2 + 1.25rem));
  top: 50%;
  transform: translateY(-50%);
  z-index: 1040;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background-color: var(--zgs-olive);
  box-shadow: inset 0 0 0 3px #fff, 0 0 5px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.a11y-btn img { width: 28px; height: 28px; }

/* ---------- 10. Unterseite Leistungen: Detail-Karten ---------- */
.detail-card {
  border: 1px solid var(--zgs-border);
  border-bottom-width: 2px;
  background: #fff;
  padding: clamp(1.25rem, 2.5vw, 2rem);
}
.detail-card + .detail-card { margin-top: 2.25rem; }
.detail-card__media img {
  width: 100%;
  max-width: 215px;
  aspect-ratio: 215 / 175;
  object-fit: cover;
  display: block;
}
@media (min-width: 768px) {
  /* Bild ragt wie im Design leicht über die Kartenoberkante hinaus */
  .detail-card__media img { /*margin-top: calc(-1 * clamp(1.25rem, 2.5vw, 2rem) - 1.5rem); */ }
}
.detail-card__title {
  font-family: var(--zgs-font-heading);
  font-weight: 600;
  font-size: var(--zgs-fs-h3);
  color: #222;
  margin-bottom: 0.75rem;
}
.detail-card__text {
  font-family: var(--zgs-font-body);
  font-weight: 400;
  font-size: var(--zgs-fs-body);
  line-height: 1.65;
  color: #4c4c4c;
  margin-bottom: 1.5rem;
}
.detail-card__date {
  font-family: var(--zgs-font-heading);
  font-weight: 600;
  font-size: var(--zgs-fs-meta);
  color: #afafaf;
}
.link-more {
  font-family: var(--zgs-font-heading);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.07em;
  color: var(--zgs-navy);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
}
.link-more:hover,
.link-more:focus-visible {
  color: var(--zgs-green);
}
.link-more .bi { font-size: 0.8rem; }

/* ---------- 11. Unterseite Aktuelles: Beitragszeilen ---------- */
.section-title-serif {
  font-family: var(--zgs-font-heading);
  font-weight: 600;
  font-size: var(--zgs-fs-h2);
}
.btn-cta-mint {
  background-color: var(--zgs-mint-band);
  color: #000;
}
.btn-cta-mint:hover,
.btn-cta-mint:focus-visible {
  background-color: var(--zgs-teal);
  color: #fff;
}
.post-row {
  border: 1px solid var(--zgs-border);
  border-bottom-width: 2px;
  background: #fff;
  padding: 1.75rem 1.5rem;
}
.post-row + .post-row { margin-top: 1.75rem; }
.post-row__icon {
  width: 100px;
  height: 95px;
  object-fit: contain;
  flex-shrink: 0;
}
.post-row__title {
  font-family: var(--zgs-font-heading);
  font-weight: 600;
  font-size: var(--zgs-fs-h3);
  line-height: 1.4;
  color: #222;
  margin-bottom: 0.75rem;
}
.post-row__title a { color: inherit; }
.post-row__title a:hover { color: var(--zgs-green); }
.post-row__text {
  font-family: var(--zgs-font-body);
  font-weight: 400;
  font-size: var(--zgs-fs-body);
  line-height: 1.65;
  color: #4c4c4c;
  margin: 0;
}
.post-row__date {
  font-family: var(--zgs-font-heading);
  font-weight: 600;
  font-size: var(--zgs-fs-meta);
  color: #7a828d;
  white-space: nowrap;
}

/* ---------- 12. Unterseite Aufträge: Auftrags-Karten ---------- */
.auftrag-card {
  background-color: var(--zgs-footer-bg);
  border: 1px solid var(--zgs-olive);
  border-top-width: 3px;
  padding: 1.75rem 1.5rem;
}
.auftrag-card + .auftrag-card { margin-top: 0.75rem; }
.auftrag-card__logo {
  width: 110px;
  height: 103px;
  object-fit: contain;
  flex-shrink: 0;
}
.auftrag-card__title {
  font-family: var(--zgs-font-heading);
  font-weight: 600;
  font-size: var(--zgs-fs-h3);
  color: var(--zgs-navy-deep);
  margin-bottom: 0.5rem;
}
.auftrag-card__text {
  font-size: var(--zgs-fs-body);
  line-height: 1.5;
  color: #4c4c4c;
  margin-bottom: 0.375rem;
}
.auftrag-card__meta {
  font-size: var(--zgs-fs-small);
  color: #4c4c4c;
}
.link-auftrag {
  font-family: var(--zgs-font-heading);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.07em;
  color: var(--zgs-navy-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
}
.link-auftrag:hover,
.link-auftrag:focus-visible { color: var(--zgs-green); }

/* ---------- 13. Unterseite Förderinstrumente ---------- */
.rubrik-card {
  background-color: var(--zgs-footer-bg);
  border: 1px solid var(--zgs-teal);
  padding: 1.5rem 1.5rem 1.75rem;
}
.rubrik-card__title {
  font-family: var(--zgs-font-heading);
  font-weight: 600;
  font-size: var(--zgs-fs-h3);
  color: var(--zgs-navy-deep);
  margin-bottom: 0.75rem;
}
.rubrik-card__text {
  font-size: var(--zgs-fs-body);
  line-height: 1.75;
  color: #4c4c4c;
  margin: 0;
}
.rubrik-card .bi {
  font-size: 1.4rem;
  color: var(--zgs-navy);
}
/* Rubrik-Kopf als Accordion-Toggle (Bootstrap Collapse):
   Pfeil zeigt nach unten (zugeklappt) bzw. gedreht nach oben (offen). */
.rubrik-card--toggle { cursor: pointer; }
.rubrik-card--toggle:focus-visible {
  outline: 2px solid var(--zgs-teal);
  outline-offset: 2px;
}
.rubrik-card--toggle .rubrik-card__arrow { transition: transform 0.3s ease; }
.rubrik-card--toggle[aria-expanded="true"] .rubrik-card__arrow { transform: rotate(180deg); }
.rubrik-card--toggle:hover .rubrik-card__arrow { color: var(--zgs-teal); }
.instrument-card {
  background-color: var(--zgs-footer-bg);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.instrument-card__body { padding: 1.5rem 2rem 1.25rem; flex-grow: 1; }
.instrument-card__title {
  font-family: var(--zgs-font-heading);
  font-weight: 600;
  font-size: var(--zgs-fs-h3);
  line-height: 1.4;
  color: var(--zgs-navy-deep);
  margin-bottom: 0.75rem;
}
.instrument-card__text {
  font-size: var(--zgs-fs-body);
  line-height: 1.75;
  color: #4c4c4c;
  margin: 0;
}
.instrument-card__media {
  position: relative;
  display: block;
  border: 3px solid var(--zgs-teal);
  overflow: hidden;
}
.instrument-card__media img {
  width: 100%;
  aspect-ratio: 420 / 208;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.instrument-card__media:hover img { transform: scale(1.04); }
.instrument-card__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.52);
  color: #fff;
  font-family: var(--zgs-font-heading);
  font-weight: 600;
  font-size: var(--zgs-fs-h5);
  padding: 0.875rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* ---------- 14. Detailseiten: Artikel-Layout ---------- */
.article__title {
  font-family: var(--zgs-font-heading);
  font-weight: 600;
  font-size: var(--zgs-fs-h2);
  line-height: 1.35;
  color: var(--zgs-navy-deep);
  margin-bottom: 1.75rem;
}
.article__meta {
  font-family: var(--zgs-font-heading);
  font-weight: 700;
  font-size: var(--zgs-fs-small);
  color: #000;
  white-space: nowrap;
}
.article__meta span { font-family: var(--zgs-font-body); font-weight: 400; }
.article__body {
  font-size: var(--zgs-fs-body);
  line-height: 1.8;
  color: #4c4c4c;
}
.article__body p { margin-bottom: 1.25rem; }
.article__body h3 {
  font-family: var(--zgs-font-heading);
  font-weight: 600;
  font-size: var(--zgs-fs-h5);
  color: #222;
  margin: 1.75rem 0 0.5rem;
}
.article__body ul { padding-left: 1.25rem; margin-bottom: 1.25rem; }
.article__body li { margin-bottom: 0.5rem; }
.article__body .lead-strong { font-weight: 700; color: #333; }
.article__body a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 15. Detailseiten: Sidebar-Komponenten ---------- */
.sidebar-logo { width: 90px; height: auto; }
.sidebar-title {
  font-family: var(--zgs-font-heading);
  font-weight: 600;
  font-size: var(--zgs-fs-h4);
  margin-bottom: 1rem;
}

/* Kontakt-Box (Farbvariante folgt dem Seitenthema) */
.kontakt-box {
  padding: 1.5rem 1.5rem 1.75rem;
  color: #fff;
}
.kontakt-box--green { background-color: var(--zgs-green); }
.kontakt-box--olive { background-color: var(--zgs-olive); }
.kontakt-box--teal  { background-color: var(--zgs-teal); }
.kontakt-box--gray  { background-color: #f5f5f5; color: #000; }
.kontakt-box--mint  { background-color: var(--zgs-mint-band); color: #000; }
.kontakt-box .sidebar-title { color: inherit; }
.kontakt-box p {
  font-size: var(--zgs-fs-small);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.kontakt-box p:last-child { margin-bottom: 0; }

/* Partner-Box (Beteiligte Unternehmen) */
.partner-box {
  background-color: #f5f5f5;
  padding: 1.5rem;
}
.partner-box--mint { background-color: var(--zgs-mint-band); }
.partner-box__logo {
  background: #fff;
  border: 1px solid #000;
  padding: 0.75rem 1rem;
  display: inline-block;
}
.partner-box__logo img { max-width: 150px; height: auto; display: block; }

/* Download-Liste */
.downloads ul { list-style: none; padding: 0; margin: 0; }
.downloads li {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.875rem;
}
.downloads .bi { color: var(--zgs-green); flex-shrink: 0; margin-top: 0.1rem; }
.downloads a {
  font-family: var(--zgs-font-heading);
  font-weight: 600;
  font-size: var(--zgs-fs-small);
  line-height: 1.55;
  color: var(--zgs-green-dark);
}
.downloads a:hover { color: var(--zgs-teal); }

/* Instrumenten-Navigation (Seitenleiste Förderinstrument-Detail) */
.sidebar-nav { list-style: none; padding: 0; margin: 0; }
.sidebar-nav li { border-bottom: 1px solid var(--zgs-border); }
.sidebar-nav a {
  display: block;
  padding: 0.75rem 0.25rem;
  font-size: var(--zgs-fs-small);
  color: #333;
}
.sidebar-nav a:hover { color: var(--zgs-teal); }
.sidebar-nav .active > a {
  border-left: 3px solid var(--zgs-teal);
  padding-left: 0.75rem;
  color: var(--zgs-navy-deep);
}

/* ---------- 16. Utilities & Responsive-Anpassungen ---------- */
/* Fokus-Stile für Tastaturnutzung */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--zgs-teal);
  outline-offset: 2px;
}

/* Mobile Navigation: mehr Abstand im ausgeklappten Zustand */
@media (max-width: 991.98px) {
  .site-header .navbar-collapse {
    padding-block: 1rem;
  }
  .site-header .nav-divider { display: none; }
  .teaser { clip-path: none; } /* Diagonale auf Mobil weglassen */
  /* Bildtext im Hero-Foto sitzt links – auf Schmalbildschirmen links ausrichten */
  .hero { background-position: left top; }
}

/* Reduzierte Bewegung respektieren */
/* ---------- 17. Kontaktseite: Formular ---------- */
.kontakt-form .form-label {
  font-family: var(--zgs-font-heading);
  font-weight: 600;
  font-size: var(--zgs-fs-small);
  color: var(--zgs-navy-deep);
  margin-bottom: 0.375rem;
}
.kontakt-form .form-control,
.kontakt-form .form-select {
  border-radius: 0;
  border-color: #c9c9c9;
  font-size: var(--zgs-fs-body);
  padding: 0.625rem 0.875rem;
}
.kontakt-form .form-control:focus,
.kontakt-form .form-select:focus {
  border-color: var(--zgs-green);
  box-shadow: 0 0 0 0.2rem rgba(97, 172, 134, 0.25);
}
.kontakt-form__mandatory { color: var(--zgs-green-dark); }
.kontakt-form__hinweis {
  font-size: var(--zgs-fs-small);
  line-height: 1.7;
  color: #4c4c4c;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
  }
}