/* =============================================================================
   hoeperundkleiboldt.de · Seitenblatt, seit 29.09.2026
   Uebernommen aus src/app/hoeperundkleiboldt/gemini/gemini.css (Gemini-Entwurf
   auf kleiboldt.de). Redaktionelles Dossier: Monochrom Reinweiss, offene
   typografische Kolumnen, klebende Marginalien.

   Neu beim Umzug: der Grundsatz unten (auf kleiboldt.de kam er aus Tailwinds
   Preflight), das Verzeichnis im Kopf zeilenweise 01 bis 06, die Linkzeile
   unter den Personen, die Adressen im Kontaktkapitel, und die frueheren
   Inline-Stile als Klassen. „← Ursprung“ ist gefallen.
   ========================================================================== */

/* Grundsatz. Auf kleiboldt.de lag unter diesem Blatt das ganze System der
   Site (Tailwinds Preflight, system.css, bestand.css, dossier.css) in
   Kaskadenschichten, und was davon durchschlug, gehoerte zum Bild, das
   freigegeben ist: Grundgrad 19 px, Berührungsziele von 44 px, Grundwerte
   der Überschriften. Das steht jetzt hier, ebenfalls als Schicht, damit
   jede Regel des Blattes darunter es ohne Spezifitaetsrechnung schlaegt.
   Was aus dossier.css durchschlug, ist direkt in die Regeln unten gewandert
   und dort vermerkt. Gemessen gegen die Live-Seite am 29.09.2026 bei 1.440
   und 390 px. */
@layer grund {
  *, ::before, ::after, ::backdrop { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; line-height: 1.5; }
  body { font-size: 19px; line-height: 1.65; min-height: 100vh; }
  a { color: inherit; text-decoration: inherit; }
  ol, ul { list-style: none; }
  img, svg, iframe { display: block; vertical-align: middle; }
  img { max-width: 100%; height: auto; }
  button { font: inherit; color: inherit; background-color: transparent; border-radius: 0; cursor: pointer; }
  b, strong { font-weight: bolder; }
  h1, h2, h3, h4 { font-size: inherit; font-weight: 700; letter-spacing: -.03em; line-height: 1.02; hyphens: auto; }
  h2 { line-height: 1.14; }
  h3 { line-height: 1.3; letter-spacing: -.012em; }
  /* Berührungsziele, nach bestand.css: jeder Link ausserhalb des Fliesstextes
     und jeder Knopf mindestens 44 px hoch. */
  a:not(p a, li a), button { min-height: 44px; }
  a:not(p a, li a):not(:has(p, div, h1, h2, h3, h4, ul, ol)) { display: inline-flex; align-items: center; }
  :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
  @media (max-width: 951px) { body { font-size: 18px; } }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
}

.gemini-root {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #16161A;
  background-color: #F8F9FA;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.gemini-root h1,
.gemini-root h2,
.gemini-root h3,
.gemini-root h4 {
  font-family: 'Space Grotesk', sans-serif;
  color: inherit;
  margin: 0;
}

.gemini-root p {
  font-family: 'Source Serif 4', Georgia, serif;
  margin: 0;
}

.g-mono {
  font-family: 'Space Mono', monospace;
}

/* Layout container */
.g-bahn {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 36px;
}

@media (max-width: 768px) {
  .g-bahn {
    padding: 0 20px;
  }
}

/* =============================================================================
   1. HERO / UMSCHLAG (100svh VOLLBILD IN ROYALBLAU MIT MONOCHROMEM WEISS)
   ========================================================================== */
.g-hero {
  background: #14248A;
  color: #FFFFFF;
  height: 100svh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(32px, 5vh, 52px) 0 clamp(36px, 5vh, 56px);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

@media (max-height: 680px) {
  .g-hero {
    height: auto;
    min-height: 100svh;
    padding: 40px 0;
    overflow: visible;
  }
}

.g-hero-inhalt {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.g-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 44 px wie auf kleiboldt.de, wo der Verweis „← Ursprung“ die Zeile trug. */
  min-height: 44px;
  margin-bottom: clamp(16px, 2.5vh, 28px);
}

.g-hero-signet {
  height: 28px;
  width: auto;
  display: block;
  opacity: 0.95;
}


.g-hero-haupt {
  max-width: 860px;
  margin: auto 0;
}

.g-hero h1 {
  font-size: clamp(46px, 7.8vw, 100px);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin-bottom: 18px;
  color: #FFFFFF;
}

.g-hero h1 b {
  font-weight: 700;
}

.g-hero-untertitel {
  font-size: clamp(18px, 2vw, 25px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.015em;
  line-height: 1.35 !important;
  color: #B5C4F8;
  max-width: 46ch;
  margin-bottom: clamp(24px, 3.5vh, 34px) !important;
}

.g-hero-tatzeile {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Monochromer Reinweiß-Button */
.g-btn {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 30px;
  transition: all 0.15s ease;
  cursor: pointer;
  border: none;
}

.g-btn--prim {
  background: #FFFFFF;
  color: #14248A;
}

.g-btn--prim:hover {
  background: #E8EDFB;
  color: #0B1647;
}

/* 2-spaltiges, kompaktes Inhaltsregister.
   Spaltenweise gefuellt, links 01 bis 03, rechts 04 bis 06; mobil einspaltig
   01 bis 06. Auf kleiboldt.de stand das Markup in der Folge 01 04 02 05 03
   06 fuer einen zeilenweisen Fluss, dossier.css hat den Fluss aber auf
   Spalten gestellt, und im Bild stand 01 05 / 04 03 / 02 06. Jetzt ist die
   Folge im Markup die Lesefolge, fuer Auge, Tab-Taste und Vorleser gleich.
   Haarlinie, Obergrenze 680 px und die drei Zeilen kamen aus dossier.css. */
.g-kapitelverzeichnis {
  font-family: 'Space Grotesk', sans-serif;
  margin-top: clamp(24px, 3.5vh, 44px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 24px;
  max-width: 680px;
}

.g-kapitelverzeichnis ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(2, minmax(220px, 340px));
  gap: 6px clamp(32px, 5vw, 64px);
}

@media (max-width: 560px) {
  .g-kapitelverzeichnis ol {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: 1fr;
    gap: 6px 0;
  }
}

.g-kapitelverzeichnis li {
  margin: 0;
}

.g-kapitelverzeichnis a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  text-decoration: none;
  padding: 3px 0;
  width: max-content;
  min-height: 44px;
  transition: transform 0.18s cubic-bezier(0.2, 0, 0, 1);
}

.g-kapitelverzeichnis a:hover {
  transform: translateX(5px);
}

.g-kapitelverzeichnis .nr {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.045em;
  display: inline-block;
  min-width: 1.3em;
  color: #D8DEEE;
  transition: color 0.15s ease;
}

.g-kapitelverzeichnis .marke {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(11.5px, 1.05vw, 13px);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #A3B4EB;
  line-height: 1;
  white-space: nowrap;
  /* 34 px Hoehe ergeben den Zeilenabstand von 51 px, wie er auf kleiboldt.de
     stand; dort kam die Hoehe ueber die Klasse .marke aus system.css. */
  height: 34px;
  transition: color 0.15s ease;
}

.g-kapitelverzeichnis a:hover .nr,
.g-kapitelverzeichnis a:focus-visible .nr {
  color: #FFFFFF;
}

.g-kapitelverzeichnis a:hover .marke,
.g-kapitelverzeichnis a:focus-visible .marke {
  color: #FFFFFF;
}

/* =============================================================================
   2. KAPITEL-LAYOUT & KLEBENDE MARGINALIEN
   ========================================================================== */
.g-kapitel {
  padding: 104px 0 120px;
  position: relative;
}

.g-kapitel-gitter {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 0 48px;
  align-items: start;
}

@media (max-width: 860px) {
  .g-kapitel {
    padding: 72px 0 80px;
  }
  .g-kapitel-gitter {
    grid-template-columns: 1fr;
    gap: 24px 0;
  }
}

/* Sticky Marginal Column */
.g-marginal {
  position: sticky;
  top: 36px;
}


.g-marginal-ziffer {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(52px, 6vw, 88px);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.05em;
  display: block;
  margin-bottom: 8px;
}

.g-marginal-marke {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  line-height: 1.15;
  margin-top: 8px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: block;
}

/* Mobil liegen Ziffer und Kennung nebeneinander, aus dossier.css. */
@media (max-width: 860px) {
  .g-marginal {
    position: static;
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 20px;
  }
  .g-marginal-ziffer {
    font-size: 48px;
    margin-bottom: 0;
    line-height: 1;
  }
  .g-marginal-marke {
    margin-top: 0;
  }
}

/* Hauptspalte */
.g-hauptspalte h2 {
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.06;
  margin-bottom: 18px;
  color: #12162A;
}

.g-hauptspalte h2 b {
  font-weight: 700;
}

.g-kapitel-lead {
  font-size: clamp(18px, 1.8vw, 21px) !important;
  line-height: 1.52 !important;
  color: #373A44;
  max-width: 62ch;
  margin-bottom: 48px !important;
}

/* =============================================================================
   3. KAPITEL 01: PERSONEN (FREISTEHEND, KEINE KACHEL-KISTEN)
   ========================================================================== */
.g-kapitel-01 .g-marginal-ziffer,
.g-kapitel-01 .g-marginal-marke {
  color: #0B6E72;
}

.g-personen-liste {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.g-person-eintrag {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0 44px;
  align-items: start;
}

@media (max-width: 860px) {
  .g-person-eintrag {
    grid-template-columns: 1fr;
    gap: 20px 0;
  }
}

.g-person-bildrahmen {
  width: 100%;
  aspect-ratio: 4/5;
  background: #E8E9EC;
  overflow: hidden;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.12);
}

.g-person-bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  display: block;
}

.g-person-kirsten .g-person-bild {
  object-position: 49% 22%;
}

.g-person-daniel .g-person-bild {
  object-position: 50% 25%;
}

.g-person-rolle-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 10px;
}

.g-person-kirsten .g-person-rolle-tag {
  color: #0B6E72;
}

.g-person-daniel .g-person-rolle-tag {
  color: #1B2FA8;
}

.g-person-name {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  color: #12162A;
}

.g-person-titel {
  font-size: 14px !important;
  color: #63687A;
  margin-bottom: 16px !important;
}

.g-person-text {
  font-size: 17.5px !important;
  line-height: 1.58 !important;
  color: #2D3039;
  margin-bottom: 18px !important;
  max-width: 64ch;
}

.g-link-mehr {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
}

.g-link-mehr:hover {
  text-decoration: underline;
}

.g-person-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}

.g-person-kirsten .g-link-mehr {
  color: #0B6E72;
}

.g-person-daniel .g-link-mehr {
  color: #1B2FA8;
}

/* =============================================================================
   4. HORIZONTALES DOSSIER-REGISTER (KEINE SPALTEN, KEINE KASTEN-BOXEN)
   Gilt für Kapitel 02 (Formate), Kapitel 03 (Förderung), Kapitel 04 (Ergebnis) & Belege
   ========================================================================== */
.g-dossier-liste {
  display: flex;
  flex-direction: column;
  gap: 38px;
  margin-top: 48px;
}

.g-dossier-zeile {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 12px 40px;
  align-items: baseline;
  padding: 32px 0;
  border-top: 1px solid #EAEAEE;
}

.g-dossier-zeile:last-child {
  border-bottom: 1px solid #EAEAEE;
}

@media (max-width: 820px) {
  .g-dossier-zeile {
    grid-template-columns: 1fr;
    gap: 8px 0;
    padding: 24px 0;
  }
}

.g-dossier-kopf {
  display: flex;
  flex-direction: column;
}

.g-dossier-nr {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 6px;
  opacity: 0.85;
}

.g-dossier-titel {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(20px, 1.8vw, 23px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0;
  color: #12162A;
}

.g-dossier-text p {
  font-family: 'Source Serif 4', Georgia, serif !important;
  font-size: 17.5px !important;
  line-height: 1.58 !important;
  color: #373A44;
  margin: 0 !important;
  max-width: 65ch;
}

/* Spezifische Akzentfarben für die Ziffern/Kennungen */
.g-kapitel-02 .g-marginal-ziffer,
.g-kapitel-02 .g-marginal-marke,
.g-kapitel-02 .g-dossier-nr {
  color: #1B2FA8;
}

.g-kapitel-03 .g-marginal-ziffer,
.g-kapitel-03 .g-marginal-marke,
.g-kapitel-03 .g-dossier-nr {
  color: #2A3B5C;
}

.g-kapitel-04 .g-marginal-ziffer,
.g-kapitel-04 .g-marginal-marke,
.g-kapitel-04 .g-dossier-nr {
  color: #5A2FC2;
}

.g-kapitel-05 .g-marginal-ziffer,
.g-kapitel-05 .g-marginal-marke,
.g-kapitel-05 .g-dossier-nr {
  color: #A9450F;
}

.g-dossier-liste--belege {
  margin-top: 32px;
}

.g-nachsatz-dezent {
  font-family: 'Source Serif 4', Georgia, serif !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  color: #4B5263;
  margin-top: 40px !important;
  max-width: 68ch;
}

/* =============================================================================
   5. KAPITEL 05: ERPROBT (RHEUMATOLOGIE, BELEGE & HEFTKACHEL)
   ========================================================================== */
.g-kapitel-05 .g-marginal-ziffer,
.g-kapitel-05 .g-marginal-marke {
  color: #A9450F;
}

.g-partner-leiste {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-bottom: 36px;
}

.g-partner-logo {
  height: 32px;
  width: auto;
  display: block;
  opacity: 0.8;
  filter: grayscale(1);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.g-partner-logo:hover {
  opacity: 1;
  filter: grayscale(0);
}

/* Interaktive Heftkachel (Physisches Blatt) */
.g-heft-kachel {
  background: #FFFFFF;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.08);
  padding: 34px;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0 38px;
  align-items: start;
  margin-bottom: 40px;
}

@media (max-width: 860px) {
  .g-heft-kachel {
    grid-template-columns: 1fr;
    gap: 22px 0;
    padding: 26px;
  }
}

.g-heft-blatt {
  width: 100%;
  display: block;
  cursor: pointer;
}

.g-heft-blatt img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.g-heft-blatt:hover img {
  transform: translateY(-5px);
  box-shadow: 0 22px 40px -14px rgba(0, 0, 0, 0.45);
}

.g-heft-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #A9450F;
  margin-bottom: 10px;
  display: block;
}

.g-heft-kachel h3 {
  font-size: clamp(21px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 12px;
  color: #12162A;
}

.g-heft-text {
  font-size: 17.5px !important;
  line-height: 1.5 !important;
  color: #343740;
  margin-bottom: 22px !important;
}

.g-heft-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}

.g-btn-heft {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 11px 20px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.g-btn-heft--prim {
  background: #A9450F;
  color: #FFFFFF;
}

.g-btn-heft--prim:hover {
  background: #8A360B;
}

.g-btn-heft--sek {
  background: transparent;
  color: #A9450F;
  text-decoration: underline;
  padding: 11px 0;
}

.g-btn-heft--sek:hover {
  color: #6C2B0A;
}

/* Offene Belege (2 Spalten, keine Boxen) */
.g-belege-offen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 56px);
}

@media (max-width: 760px) {
  .g-belege-offen {
    grid-template-columns: 1fr;
    gap: 32px 0;
  }
}

.g-beleg-kolumne {
  display: flex;
  flex-direction: column;
}

.g-beleg-kolumne .g-kolumne-nr {
  color: #A9450F;
}

.g-beleg-kolumne h3 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  color: #12162A;
}

.g-beleg-kolumne p {
  font-size: 16.5px !important;
  line-height: 1.55 !important;
  color: #373A44;
}

/* =============================================================================
   6. KAPITEL 06: KONTAKT (TERMIN ABSTIMMEN - BEREINIGT)
   ========================================================================== */
.g-kapitel-06 {
  background: #14248A;
  color: #FFFFFF;
  padding: 104px 0 120px;
}

.g-kapitel-06 .g-marginal-ziffer,
.g-kapitel-06 .g-marginal-marke {
  color: #BAC7FB;
}

.g-kapitel-06 h2 {
  color: #FFFFFF;
  margin-bottom: 36px;
}

.g-kontakt-offen {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 680px;
}

.g-kontakt-tatzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

.g-kontakt-adresse {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: #FFFFFF;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.15s ease;
}

.g-kontakt-adresse:hover {
  text-decoration-color: #FFFFFF;
}

/* Direkt an eine Person: zwei Spalten, mobil untereinander */
.g-kontakt-direkt {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 20px 56px;
  margin: -12px 0 0;
}

@media (max-width: 560px) {
  .g-kontakt-direkt {
    grid-template-columns: 1fr;
  }
}

.g-kontakt-direkt dt {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #BAC7FB;
}

.g-kontakt-direkt dd {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
}

.g-kontakt-direkt a {
  color: #FFFFFF;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.g-kontakt-direkt a:hover {
  text-decoration-color: #FFFFFF;
}

.g-kapitel-06 .g-btn--prim {
  background: #FFFFFF;
  color: #14248A;
}

.g-kapitel-06 .g-btn--prim:hover {
  background: #E8EDFB;
}

/* Kurzfassung als physisches Blatt */
.g-kurzfassung-blatt {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 0 28px;
  align-items: center;
  background: #FFFFFF;
  padding: 24px;
  text-decoration: none;
  color: #16161A;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.g-kurzfassung-blatt:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 42px -16px rgba(0, 0, 0, 0.55);
}

.g-kurzfassung-blatt img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.3);
}

.g-kurzfassung-kicker {
  font-size: 11px;
  color: #63687A;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  display: block;
  margin-bottom: 6px;
}

.g-kurzfassung-blatt h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #12162A;
}

.g-kurzfassung-blatt p {
  font-size: 15.5px !important;
  line-height: 1.45 !important;
  color: #4A4E5C;
  margin-bottom: 12px !important;
}

.g-kurzfassung-blatt .g-laden {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #14248A;
}

/* =============================================================================
   7. MODALES LESEFENSTER (DIALOG)
   ========================================================================== */
dialog.g-schau {
  width: min(1080px, 94vw);
  height: min(88vh, 1500px);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: #FFFFFF;
  color: #17171B;
  box-shadow: 0 40px 90px -34px rgba(0, 0, 0, 0.65);
}

dialog.g-schau:not([open]) {
  display: none;
}

dialog.g-schau[open] {
  display: flex;
  flex-direction: column;
}

dialog.g-schau::backdrop {
  background: rgba(15, 20, 40, 0.75);
}

.g-schau-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.g-schau-titel {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #555866;
}

.g-schau-knoepfe {
  display: flex;
  align-items: center;
  gap: 16px;
}

.g-schau-laden {
  font-size: 12px;
  color: #A9450F;
  text-decoration: none;
  font-weight: 700;
}

.g-schau-btn-zu {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #12162A;
  color: #FFFFFF;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
}

.g-schau-btn-zu:hover {
  background: #000000;
}

.g-schau-rahmen {
  flex: 1 1 auto;
  width: 100%;
  border: none;
  background: #F2F2F4;
}

/* =============================================================================
   8. FOOTER
   ========================================================================== */
.g-fuss {
  background: #0B1438;
  color: #94A3B8;
  padding: 48px 0;
  font-size: 13px;
}

.g-fuss-bahn {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.g-fuss-hinweis {
  max-width: 720px;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #8C99B8;
  margin-bottom: 20px !important;
}

.g-fuss-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}

.g-fuss-links a {
  color: #C2CEFB;
  text-decoration: none;
}

.g-fuss-links a:hover {
  text-decoration: underline;
}

.g-fuss-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: #FFFFFF;
}

.g-fuss-brand img {
  height: 20px;
  width: auto;
}