/* ============================================================================
   bausteine.css – Bausteine und Hilfsklassen für lean1green.de
   ----------------------------------------------------------------------------
   WAS:   Hier steht, wie die wiederkehrenden Elemente aussehen (Kopfbereich, Karten,
          Buttons, Kennzahlen, Raster, Fußbereich …). Jede Seite bindet diese Datei ein.
   WARUM: Im freigegebenen Mockup stand die Gestaltung als „Inline-Style“ direkt im HTML –
          auf jeder Seite doppelt. Jetzt gibt es dafür benannte Klassen, die Optik ist
          pixelgleich geblieben.
   ABHÄNGIGKEITEN: Alle Farben, Schriften und Maße kommen aus css/standards.css
          (dort ändern, NICHT hier). Die Schriftdateien kommen aus fonts/fonts.css.
   AUFBAU (zum Suchen):
     1. Grundlagen            (Seite, Überschriften, Links, Bilder)
     2. Hilfsklassen          (Schriftgrößen, Farben, Abstände – wie „Schalter“ im HTML)
     3. Layout                (Inhaltsbreiten, Abschnitte, Raster)
     4. Kopfbereich + Menü    (Header, Navigation, ☰-Menü)
     5. Hinweisleiste/Badge   (Tag des offenen Heizungskellers – ENTFERNEN NACH: 21.11.2026)
     6. Karten, Buttons, Etiketten
     7. Bausteine der Startseite
     8. Bausteine der Unterseiten
     9. Fußbereich
   ============================================================================ */


/* ============================================================================
   1. GRUNDLAGEN
   ============================================================================ */

/* Grundeinstellung der Seite: kein Außenrand, Hintergrund, Grundschrift und -farbe */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
}

/* Äußerer Rahmen um die ganze Seite: verhindert seitliches Wackeln auf dem Handy */
.page {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Überschriften: Schrift Fraunces, Stärke 600, kein Außenabstand (Abstände kommen über mt-…) */
h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 0;
}

/* Links: dunkelgrün, ohne Unterstreichung; beim Darüberfahren grün und unterstrichen */
a {
  color: var(--green-dark);
  text-decoration: none;
}
a:hover {
  color: var(--green);
  text-decoration: underline;
}

/* Abbildungen (<figure>) ohne Standardrand – der Abstand kommt über mt-… */
figure {
  margin: 0;
}

/* Dachzeile über Überschriften: kleine Großbuchstaben in dunklem Grün */
.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green-dark);
}


/* ============================================================================
   2. HILFSKLASSEN – kleine „Schalter“, die im HTML kombiniert werden
   ============================================================================ */

/* Schriftgröße in Pixel: fs-40 = 40 px usw. */
.fs-12 { font-size: 12px; } .fs-13 { font-size: 13px; } .fs-14 { font-size: 14px; } .fs-15 { font-size: 15px; }
.fs-16 { font-size: 16px; } .fs-17 { font-size: 17px; } .fs-18 { font-size: 18px; } .fs-20 { font-size: 20px; }
.fs-21 { font-size: 21px; } .fs-22 { font-size: 22px; } .fs-24 { font-size: 24px; } .fs-26 { font-size: 26px; }
.fs-30 { font-size: 30px; } .fs-36 { font-size: 36px; } .fs-38 { font-size: 38px; } .fs-40 { font-size: 40px; }

/* Zeilenhöhe: lh-16 = 1,6-fach; lh-115 = 1,15; lh-155 = 1,55; lh-165 = 1,65 usw. */
.lh-115 { line-height: 1.15; } .lh-12 { line-height: 1.2; } .lh-155 { line-height: 1.55; }
.lh-16 { line-height: 1.6; } .lh-165 { line-height: 1.65; } .lh-17 { line-height: 1.7; }

/* Schriftfarbe (Werte siehe standards.css) */
.c-heading { color: var(--text-heading); }
.c-soft { color: var(--text-soft); }
.c-muted { color: var(--text-muted); }
.c-green-dark { color: var(--green-dark); }
.c-orange-dark { color: var(--orange-dark); }
.c-white { color: var(--white); }
.c-navy-text { color: var(--navy-text); }
.c-on-navy-link { color: var(--green-light-on-navy); }
.c-body2 { color: var(--text-body2); }

/* Schrift und Stil: Überschriftenschrift, halbfett, kursiv */
.ff-heading { font-family: var(--font-heading); }
.fw-600 { font-weight: 600; }
.kursiv { font-style: italic; }

/* Abstand nach oben in Pixel: mt-14 = 14 px */
.mt-4 { margin-top: 4px; } .mt-6 { margin-top: 6px; } .mt-8 { margin-top: 8px; } .mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; } .mt-14 { margin-top: 14px; } .mt-16 { margin-top: 16px; } .mt-18 { margin-top: 18px; }
.mt-20 { margin-top: 20px; } .mt-22 { margin-top: 22px; } .mt-24 { margin-top: 24px; } .mt-28 { margin-top: 28px; }
.mt-32 { margin-top: 32px; } .mt-36 { margin-top: 36px; }

/* Innenabstand von Karten in Pixel: p-22 = 22 px rundum; p-22-26 = oben/unten 22, links/rechts 26 */
.p-16 { padding: 16px; } .p-20 { padding: 20px; } .p-22 { padding: 22px; } .p-24 { padding: 24px; }
.p-26 { padding: 26px; } .p-28 { padding: 28px; } .p-30 { padding: 30px; } .p-36 { padding: 36px; }
.p-40 { padding: 40px; }
.p-22-26 { padding: 22px 26px; } .p-26-30 { padding: 26px 30px; } .p-16-20 { padding: 16px 20px; }

/* Abstand zwischen Rasterspalten bzw. Flex-Elementen: gap-20 = 20 px */
.gap-10 { gap: 10px; } .gap-14 { gap: 14px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; }

/* Bildhöhen (Logos): h-20 = 20 px hoch, Breite automatisch */
.h-20 { height: 20px; width: auto; } .h-22 { height: 22px; width: auto; } .h-26 { height: 26px; width: auto; }
.h-44 { height: 44px; width: auto; } .h-48 { height: 48px; width: auto; } .h-54 { height: 54px; width: auto; display: block; }

/* Maximale Bildbreite (Grafiken): w-600 = höchstens 600 px */
.w-480 { max-width: 480px; } .w-520 { max-width: 520px; } .w-600 { max-width: 600px; }
.w-640 { max-width: 640px; } .w-700 { max-width: 700px; }

/* Sonstiges: Zeilenlänge begrenzen, Text zentrieren, als Block darstellen, nicht schrumpfen, Karten gleich hoch, Flex mittig */
.maxw-56ch { max-width: 56ch; }
.ta-center { text-align: center; }
.block { display: block; }
.no-shrink { flex: 0 0 auto; }
.align-stretch { align-items: stretch; }
.flex-mitte { display: flex; align-items: center; }


/* ============================================================================
   3. LAYOUT – Inhaltsbreiten, Abschnitte, Raster
   ============================================================================ */

/* Inhaltsbreite 1200 px (Startseite), zentriert. Seitenrand über .px */
.container { max-width: var(--width-start); margin: 0 auto; }

/* Inhaltsbreite 900 px (Unterseiten), zentriert. Seitenrand über .px */
.container-schmal { max-width: var(--width-page); margin: 0 auto; }

/* Seitenrand links und rechts (24 px) */
.px { padding-left: var(--gutter); padding-right: var(--gutter); }

/* Innenhülle INNERHALB eines vollbreiten Abschnitts (grauer/dunkler Hintergrund läuft bis zum Rand) */
.container-inner { max-width: var(--width-start); margin: 0 auto; }
.container-inner--schmal { max-width: var(--width-page); }

/* Senkrechte Abstände eines Abschnitts: py = oben+unten, pt = oben, pb = unten (Pixel) */
.py-36 { padding-top: 36px; padding-bottom: 36px; } .py-40 { padding-top: 40px; padding-bottom: 40px; }
.py-48 { padding-top: 48px; padding-bottom: 48px; } .py-56 { padding-top: 56px; padding-bottom: 56px; }
.py-64 { padding-top: 64px; padding-bottom: 64px; }
.pt-32 { padding-top: 32px; } .pt-40 { padding-top: 40px; } .pt-48 { padding-top: 48px; }
.pb-12 { padding-bottom: 12px; } .pb-24 { padding-bottom: 24px; } .pb-64 { padding-bottom: 64px; }

/* Grauer Vollbreiten-Abschnitt (Hintergrund --bg-section). Standard 64 px oben/unten, Varianten 48 und 40 */
.abschnitt-grau { background: var(--bg-section); padding: 64px var(--gutter); }
.abschnitt-grau--48 { padding-top: 48px; padding-bottom: 48px; }
.abschnitt-grau--40 { padding-top: 40px; padding-bottom: 40px; }

/* Raster mit 2, 3 oder 4 gleich breiten Spalten – auf dem Handy (unter 680 px) einspaltig */
.respgrid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.respgrid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.respgrid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 680px) {
  .respgrid-2, .respgrid-3, .respgrid-4 { grid-template-columns: 1fr; }
}

/* Mobil (unter 680 px): Hauptüberschriften 30 px, Silbentrennung gegen zu lange Wörter */
@media (max-width: 680px) {
  h1 { font-size: 30px !important; }
  h1, h2 { hyphens: auto; overflow-wrap: break-word; }
}


/* ============================================================================
   4. KOPFBEREICH + NAVIGATION
   ============================================================================ */

/* Kopfbereich: Navy-Band; "relative", damit das ☰-Menü darunter aufklappen kann */
.site-header { background: var(--navy); position: relative; }

/* Innenleiste des Kopfbereichs: Logo links, Navigation Mitte, Button rechts; umbrechend */
.site-header__inner {
  max-width: var(--width-start);
  margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Logo als Link zur Startseite (im Kopf und im Fuß) */
.logo-link { display: flex; align-items: center; gap: 10px; }

/* Weiße, abgerundete Box hinter dem Logo (Header: .logo-box, Footer: zusätzlich --inline) */
.logo-box {
  background: var(--white);
  border-radius: var(--radius-logo-box);
  padding: 5px 10px;
  display: flex;
  align-items: center;
}
.logo-box--inline { display: inline-flex; }

/* Logo-Höhen: Header 64 px, Footer 56 px – nie kleiner! */
.logo-header { height: var(--logo-height-header); width: auto; display: block; }
.logo-footer { height: var(--logo-height-footer); width: auto; display: block; }

/* Desktop-Navigation (am Handy ausgeblendet, siehe unten) */
.desktop-nav { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }

/* Navigationslink im Header (hell auf Navy); aktuelle Seite zusätzlich unterstrichen */
.navlink { color: var(--navy-nav); font-weight: 600; font-size: 14px; letter-spacing: .02em; }
.navlink:hover { color: var(--white); text-decoration: underline; }
.navlink--aktiv { text-decoration: underline; }

/* MOBIL-MENÜ: Auf dem Handy erscheint statt der Linkleiste ein „☰ Menü“-Button (HTML-Element <details>, ohne JavaScript) */
.mobile-menu { display: none; }
.mobile-menu summary {
  list-style: none;
  cursor: pointer;
  color: var(--white);
  font-weight: 600;
  font-size: 15px;
  padding: 11px 20px;
  border: 1.5px solid rgba(255, 255, 255, .55);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu .mm-close { display: none; }
.mobile-menu[open] .mm-open { display: none; }
.mobile-menu[open] .mm-close { display: inline; }
.mobile-menu[open] summary { background: rgba(255, 255, 255, .12); }
/* Das aufgeklappte Menü: volle Breite direkt unter dem Kopfbereich */
.mobile-menu .mm-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 4px 24px 16px;
  box-shadow: 0 10px 18px rgba(0, 0, 0, .22);
  background: var(--navy);
}
.mobile-menu .mm-panel a { color: var(--navy-nav); font-weight: 600; font-size: 16px; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.mobile-menu .mm-panel a:last-child { border-bottom: none; }
.mobile-menu .mm-panel a:hover { color: var(--white); }
@media (max-width: 680px) {
  .desktop-nav { display: none !important; }
  .mobile-menu { display: block; }
}


/* ============================================================================
   5. HINWEISLEISTE + BADGE – Tag des offenen Heizungskellers
   ENTFERNEN NACH: 21.11.2026 (zusammen mit den HTML-Teilen, die so markiert sind)
   ============================================================================ */

/* Orange Leiste ganz oben auf jeder Seite */
.event-bar { display: block; background: var(--orange-dark); color: var(--white); text-align: center; font-size: 14px; line-height: 1.4; padding: 9px 16px; }
.event-bar:hover { color: var(--white); text-decoration: none; background: var(--orange-darker); }
.event-bar strong { font-weight: 700; }
.event-bar .cta { text-decoration: underline; white-space: nowrap; }
/* Mobil: Mittelteil der Leiste ausblenden, damit sie in eine Zeile passt */
@media (max-width: 680px) {
  .event-bar .bar-mid { display: none; }
  .event-bar .cta { margin-left: 6px; }
}

/* Badge unter dem Hero-Foto der Startseite */
.event-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--orange-bg); color: var(--orange-dark); border: 1px solid var(--orange-border); border-radius: var(--radius-pill); padding: 6px 14px; font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.event-badge:hover { color: var(--orange-darker); text-decoration: none; border-color: var(--orange); }
.event-badge--unter-foto { margin: 14px 0 0; }
/* Kleiner orangefarbener Punkt im Badge */
.event-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex: 0 0 auto; }


/* ============================================================================
   6. KARTEN, BUTTONS, ETIKETTEN
   ============================================================================ */

/* Weiße Karte mit 1-px-Rahmen und 14 px Rundung */
.card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); }
/* Karten-Varianten: grüner Balken links, oranger Balken links, dunkle Karte (Navy-Ton), Hinweiskarte mit kleinerem Innenabstand */
.card--gruen { border-left: 4px solid var(--green); }
.card--gruen-dunkel { border-left: 4px solid var(--green-dark); }
.card--orange { border-left: 4px solid var(--orange); }
.card--dunkel { background: var(--text-heading); border: none; }
.card--hinweis { padding: 18px 22px; }
/* Hinweis: Auf der Startseite hat der Balken das hellere Grün (--green), auf den Unterseiten das dunklere (--green-dark) – so war es im Mockup. */

/* Haupt-Button: grün, runde Pille, weiße Schrift. Beim Darüberfahren bleibt die Schrift weiß (im Mockup wurde sie unsichtbar). */
.btn-primary { display: inline-block; background: var(--green); color: var(--white); font-weight: 600; font-size: 15px; padding: 13px 26px; border-radius: var(--radius-pill); border: none; cursor: pointer; }
.btn-primary:hover { color: var(--white); text-decoration: none; }

/* Zweit-Button: nur Rahmen in Navy */
.btn-ghost { display: inline-block; color: var(--navy); font-weight: 600; font-size: 15px; padding: 12px 24px; border-radius: var(--radius-pill); border: 1.5px solid var(--navy); background: transparent; }

/* Zeile mit mehreren Buttons nebeneinander (umbrechend) */
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* Kleines Etikett (z. B. „Bundesministerium · stärkste Quelle“) */
.tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); }
.tag--gruen { background: var(--tag-green-bg); color: var(--green-dark); }
.tag--grau { background: var(--tag-grey-bg); color: var(--tag-grey-text); }

/* Textlinks in verschiedenen Größen (unter Karten) */
.textlink-klein { font-size: 14px; font-weight: 600; display: inline-block; }
.textlink-13 { font-size: 13px; font-weight: 600; display: inline-block; }
.textlink-fett { display: inline-block; font-weight: 600; }

/* Link „← Start“ oben auf Unterseiten */
.zurueck { font-size: 13px; color: var(--text-muted); }

/* Grauer Hinweis „Ausführliche Seite folgt“ (Karten ohne eigene Unterseite – bewusst NICHT verlinkt) */
.hinweis-folgt { font-size: 13px; color: var(--text-muted); display: inline-block; }

/* Bildunterschrift (klein, grau, zentriert) und Bild in Abbildungen */
.fig-cap { font-size: 13px; color: var(--text-muted); text-align: center; margin-top: 10px; }
.fig-cap--schmal { max-width: 60ch; margin-left: auto; margin-right: auto; }
.fig-img { width: 100%; height: auto; display: block; margin: 0 auto; }
.figure-24-8 { margin: 24px 0 8px; }

/* Logo der Landeshauptstadt München / RKU – Förderlogo, unverändert (Höhe 56 px) */
.logo-rku { height: 56px; width: auto; display: block; }


/* ============================================================================
   7. BAUSTEINE DER STARTSEITE
   ============================================================================ */

/* HERO: Text links, Foto rechts, umbrechend; Abstände wie im Mockup */
.hero { padding: 40px var(--gutter) 44px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.hero__text { flex: 1 1 480px; min-width: 0; }
.hero__media { flex: 1 1 360px; min-width: 280px; }
/* Foto-Rahmen im Format 4:3, Bild füllt aus und wird beschnitten (Ausschnitt: 31 % von oben) */
.hero__photo { aspect-ratio: 4 / 3; overflow: hidden; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 31%; display: block; }

/* LEITSATZ: zentriertes Zitat in Kursivschrift */
.burner { max-width: 820px; margin: 0 auto; padding: 0 var(--gutter) 56px; text-align: center; }
.burner__zitat { font-family: var(--font-heading); font-style: italic; font-weight: 500; font-size: 26px; line-height: 1.45; color: var(--text-heading); }
.burner__wort { color: var(--green); font-weight: 600; font-style: normal; }

/* KENNZAHLEN-LEISTE: vier Zahlen auf Navy-Hintergrund, passen sich der Breite an */
.kennzahlen { background: var(--navy); padding: 44px var(--gutter); }
.kennzahlen__grid { max-width: var(--width-start); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); column-gap: 40px; row-gap: 28px; }
.kz { color: var(--white); }
.kz__label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-label); margin-bottom: 7px; }
.kz__zahl { font-family: var(--font-heading); font-size: 34px; font-weight: 600; }
.kz__text { font-size: 14px; color: var(--navy-text); margin-top: 6px; }
/* Link innerhalb der Kennzahlen-Leiste: hellgrün auf Navy */
.link-on-navy { color: var(--green-light-on-navy); }

/* Untertitel unter „Warum ich?“ (grün, in Textschrift statt Überschriftenschrift) */
.h2-sub { display: block; font-family: var(--font-text); font-size: 17px; font-weight: 600; letter-spacing: .01em; color: var(--green-dark); margin-top: 8px; line-height: 1.5; }

/* Kennkarte mit großer grüner Zahl („25 Jahre“) */
.stat-zahl { font-family: var(--font-heading); font-size: 26px; color: var(--green-dark); }

/* Abschnitt „Leistungen“: Zeile mit Förderhinweis und RKU-Logo, mittig */
.foerder-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }

/* ABLAUF: Punktlinie und große Schrittnummern */
.ablauf-linie { width: 100%; height: 30px; display: block; }
.ablauf-linie__strich { stroke: var(--rail); }
.ablauf-linie__punkt { fill: var(--green-dark); }
.schritt-nr { font-family: var(--font-heading); font-size: 28px; color: var(--step-number); }

/* TEASER „Referenzprojekt“: dunkle Karte, Text links, Button rechts */
.teaser { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
.teaser__text { flex: 1 1 420px; }

/* TERMIN-KARTE „Tag des offenen Heizungskellers“ – ENTFERNEN NACH: 21.11.2026 */
.termin { padding: 32px 36px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.termin__text { flex: 1 1 480px; }

/* HÄUFIGE FRAGEN: Karten untereinander */
.faq-liste { display: flex; flex-direction: column; gap: 18px; }
.faq { padding: 22px 26px; }

/* „Bekannt aus“: Linkreihe, mittig, umbrechend */
.presse-liste { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; color: var(--text-soft); font-size: 14px; font-weight: 600; }
.presse-liste a { color: inherit; }


/* ============================================================================
   8. BAUSTEINE DER UNTERSEITEN
   ============================================================================ */

/* --- Fernwärme --- */

/* Kleine Beschriftung über einer Zahlenkarte (grau = Ausgangslage, grün = Schritte) */
.kartenlabel { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.kartenlabel--grau { color: var(--text-muted); }
.kartenlabel--gruen { color: var(--green-dark); }
/* Große Zahl in der Zahlenkarte (orange = alter Wert, grün = neue Werte) */
.kartenzahl { font-family: var(--font-heading); font-size: 30px; margin-top: 8px; }
.kartenzahl--orange { color: var(--orange); }
.kartenzahl--gruen { color: var(--green-dark); }
/* Orange Hinweiskarte „Wichtig“ */
.hinweis-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-dark); }
.hinweis-text { margin: 6px 0 0; }
/* Karte mit Link auf externe Quelle (ganze Karte klickbar, nie unterstrichen) */
.quellenkarte { padding: 20px 22px; display: block; text-decoration: none; }
.quellenkarte:hover { text-decoration: none; }
/* Kontakt-Aufruf-Karte: Text links, Button rechts */
.aufruf { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }

/* --- Referenzprojekt --- */

/* Navy-Band mit der großen Gesamtzahl */
.band-navy { background: var(--navy); padding: 40px var(--gutter); margin-top: 32px; }
/* Legende zur Einsparungs-Grafik: farbiges Quadrat + Text pro Zeile */
.legende { display: flex; flex-direction: column; gap: 11px; }
.legende__zeile { display: flex; align-items: center; gap: 10px; }
.legende__farbe { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.legende__farbe--gruen-dunkel { background: var(--green-dark); }
.legende__farbe--gruen { background: var(--green); }
.legende__farbe--orange { background: var(--orange); }
.legende__farbe--navy { background: var(--navy); }
.legende__farbe--grau { background: var(--text-muted); }
.legende__text { font-size: 14px; color: var(--text-body2); }
/* Kleine Zahl in den fünf Einzelkarten */
.kartenzahl-klein { font-family: var(--font-heading); font-size: 22px; color: var(--green-dark); }
/* Aufzählung der Maßnahmen (auch in den Rechtstexten): Abstand zwischen den Punkten */
.massnahmen { margin-top: 16px; padding-left: 20px; font-size: 15px; color: var(--text-soft); }
.massnahmen li, .rechtstext li { margin-bottom: 10px; line-height: 1.55; }
/* Belege (Presse-Links als Karten) */
.belege { display: flex; flex-wrap: wrap; gap: 16px; }
.beleg { padding: 18px 22px; text-decoration: none; color: var(--text); }
.beleg:hover { text-decoration: none; }
.beleg--block { font-size: 14px; color: var(--text-soft); display: block; }
.beleg--klein { padding: 14px 18px; font-size: 13px; color: var(--text-soft); }
.presse-karten { display: flex; flex-direction: column; gap: 12px; }

/* --- Fakten + Über mich: Logo-Karten und Förderkarte --- */

/* Zeile mit Logo-Karten (dena, GIH, whispert, Zertifikate) */
.logo-zeile { display: flex; flex-wrap: wrap; align-items: center; }
.logo-karte { display: flex; align-items: center; }
.logo-karte--dena { padding: 16px 20px; gap: 12px; }
.logo-karte--gih { padding: 10px 18px; }
.logo-karte--dena-klein { padding: 14px 18px; }
.logo-karte--gih-klein { padding: 10px 16px; }
.logo-karte--whispert { padding: 12px 18px; gap: 12px; text-decoration: none; color: var(--text-soft); font-size: 13px; }
/* Förderkarte: Text links, RKU-Logo rechts */
.foerder-karte { padding: 20px 22px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.foerder-karte--22 { padding: 22px; }
.foerder-karte__text { flex: 1 1 380px; }

/* --- Über mich --- */

/* Vorstellung: rundes Foto + Text */
.vorstellung { display: flex; flex-wrap: wrap; gap: 36px; align-items: center; }
.vorstellung__foto-spalte { flex: 0 0 160px; }
.vorstellung__text { flex: 1 1 420px; }
.rundfoto { width: 160px; height: 160px; border-radius: var(--radius-pill); overflow: hidden; }
.rundfoto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }
/* Zeitstrahl „Werdegang“: Punkt + Linie links, Jahr, Beschreibung */
.tl-item { display: flex; gap: 14px; }
.tl-rail { flex: 0 0 12px; display: flex; flex-direction: column; align-items: center; }
.tl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--green-dark); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--green-dark); flex: 0 0 auto; }
.tl-seg { flex: 1 1 auto; width: 2px; background: var(--rail); margin-top: 2px; min-height: 14px; }
.tl-year { flex: 0 0 100px; font-weight: 600; color: var(--green-dark); font-size: 14px; padding-bottom: 22px; }
.tl-content { padding-bottom: 22px; font-size: 15px; color: var(--text-soft); }
.tl-item:last-child .tl-year, .tl-item:last-child .tl-content { padding-bottom: 0; }
/* „Geschichte hinter dem Logo“ */
.logo-geschichte { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.logo-geschichte__text { flex: 1 1 380px; }

/* --- Kontakt --- */

/* Kontaktkarte links, dena-Karte rechts */
.kontakt-layout { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.kontakt-karte { flex: 1 1 420px; padding: 30px; }
.kontakt-seite { flex: 1 1 260px; }
.trennlinie { height: 1px; background: var(--border); }
.trennlinie--20 { margin: 20px 0; }
.trennlinie--24-18 { margin: 24px 0 18px; }
.kontakt-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.kontakt-wert { font-size: 16px; color: var(--text); }
.kontakt-hinweis { margin: 0; }
.dena-link { display: inline-flex; margin-top: 10px; }
/* Zeile "Profile: LinkedIn, Xing, whispert" (auf Ueber mich und Kontakt): ohne Abstand nach unten */
.profil-zeile { margin-bottom: 0; }
/* Zeile „Beschriftung + Wert links, Button rechts“; mobil untereinander, Buttons volle Breite */
.kontakt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; }
@media (max-width: 680px) {
  .kontakt-row { flex-direction: column; align-items: stretch; }
  .kontakt-row .btn-primary, .kontakt-row .btn-ghost { text-align: center; }
}

/* --- Impressum + Datenschutz: Fließtext der Rechtstexte --- */
.rechtstext p, .rechtstext ul { font-size: 15px; line-height: 1.65; color: var(--text-body2); }
.rechtstext h2 { margin-top: 32px; }
.rechtstext h2 + p, .rechtstext h2 + ul { margin-top: 10px; }


/* ============================================================================
   9. FUSSBEREICH
   ============================================================================ */

/* Fußbereich: Navy-Band mit Logo, Linklisten und dena-Hinweis */
.site-footer { background: var(--navy); margin-top: 16px; }
.site-footer__inner { max-width: var(--width-start); margin: 0 auto; padding: 48px var(--gutter) 28px; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; }
.footer-brand { flex: 1 1 260px; }
.footer-brand p { font-size: 13px; color: var(--navy-text); margin-top: 14px; line-height: 1.6; }
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footlink { color: var(--navy-text); font-size: 13px; }
.footlink:hover { color: var(--white); text-decoration: underline; }
.footer-dena { flex: 0 0 auto; }
.footer-dena a { background: var(--white); border-radius: var(--radius-logo-box); padding: 10px 14px; display: inline-flex; align-items: center; }
.footer-dena img { height: 28px; width: auto; display: block; }
.footer-dena__text { font-size: 12px; color: var(--navy-footer-muted); margin-top: 8px; max-width: 220px; }
.footer-copy { border-top: 1px solid var(--navy-line); margin-top: 36px; padding-top: 20px; font-size: 12px; color: var(--text-muted); }