/* ==========================================================================
   gc-article.css — Magazin-Layout für die Entrepreneur-Diary-Serie
   --------------------------------------------------------------------------
   Aktiviert via [data-section="entrepreneur-diary"] auf <main>.
   Ziel: Lesefreundliches Magazin-Layout für längere Artikel.
   - Gefälligerer White-Space zwischen Header und Main
   - Klarere Trennung zwischen hN-Abschnitten (ohne unangenehm groß zu werden)
   - 2-Spalten-Layout für Fließtext auf Tablet/Desktop (≥768px)
   - Vollbreit für Tabellen, Listen, Code, Mermaid, Blockquotes, Headings
   - Smartphone: einspaltig, kompakte Abstände
   ========================================================================== */

/* --- White-Space Header → Main (Artikel-Seiten) --- */
main[data-section="entrepreneur-diary"] > .container {
  padding-top: var(--sp-12);   /* 3rem — gefälliger als die 0 der Landingpage */
  padding-bottom: var(--sp-16);
}

/* --- Absatz- und Heading-Rhythmus (Magazin-Feel) --- */
main[data-section="entrepreneur-diary"] h1 {
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-6);
  font-size: clamp(1.4rem, 1.8vw + 0.8rem, 1.9rem);
  line-height: 1.2;
}

main[data-section="entrepreneur-diary"] h2 {
  margin-top: var(--sp-12);    /* 3rem — klare Abschnittstrennung */
  margin-bottom: var(--sp-4);
  padding-top: var(--sp-2);    /* subtiler Anker-Offset */
  border-top: 1px solid var(--c-line);
  padding-top: var(--sp-6);
}

main[data-section="entrepreneur-diary"] h3 {
  margin-top: var(--sp-8);     /* 2rem — Unterabschnitt */
  margin-bottom: var(--sp-3);
}

main[data-section="entrepreneur-diary"] h4,
main[data-section="entrepreneur-diary"] h5,
main[data-section="entrepreneur-diary"] h6 {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
}

main[data-section="entrepreneur-diary"] p {
  margin-bottom: var(--sp-5);  /* 1.25rem — klarer Absatzabstand */
  line-height: 1.7;            /* etwas luftiger als Basis (1.6) */
}

/* Erster Absatz nach einem Heading: kein extra Top-Margin */
main[data-section="entrepreneur-diary"] h1 + p,
main[data-section="entrepreneur-diary"] h2 + p,
main[data-section="entrepreneur-diary"] h3 + p,
main[data-section="entrepreneur-diary"] h4 + p {
  margin-top: 0;
}

/* --- Bullet-Listen als grüne Infobox (abgehoben vom blockquote-Style) ---
   Rahmen + leichter grüner Hintergrund + innerer Rand (padding).
   Hebt sich vom amber-orangen blockquote ab und visualisiert
   "geordnete Aufzählung / Checkliste" als eigene Content-Kategorie. */
main[data-section="entrepreneur-diary"] ul,
main[data-section="entrepreneur-diary"] ol {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-6);
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-8);
  border: 1px solid var(--c-green-deep);
  border-left: 4px solid var(--c-green-deep);
  border-radius: var(--radius);
  background: rgba(16, 169, 135, 0.05);   /* sehr leichtes Grün */
  color: var(--text-body);
  break-inside: avoid;
}

/* Listenpunkte: etwas mehr Zeilenabstand für Lesbarkeit in der Box */
main[data-section="entrepreneur-diary"] ul li,
main[data-section="entrepreneur-diary"] ol li {
  margin-bottom: var(--sp-2);
  line-height: 1.65;
}

main[data-section="entrepreneur-diary"] ul li:last-child,
main[data-section="entrepreneur-diary"] ol li:last-child {
  margin-bottom: 0;
}

/* Marker (Bullets / Zahlen) in Grün-Deep für konsistente Akzentierung */
main[data-section="entrepreneur-diary"] ul::marker,
main[data-section="entrepreneur-diary"] ol::marker,
main[data-section="entrepreneur-diary"] li::marker {
  color: var(--c-green-deep);
}

/* Dark-Mode: grüne Infobox mit dunkel-tauglichen Farben */
:root[data-theme="dark"] main[data-section="entrepreneur-diary"] ul,
:root[data-theme="dark"] main[data-section="entrepreneur-diary"] ol {
  border-color: var(--c-green);
  border-left-color: var(--c-green);
  background: rgba(16, 169, 135, 0.10);
}

:root[data-theme="dark"] main[data-section="entrepreneur-diary"] ul::marker,
:root[data-theme="dark"] main[data-section="entrepreneur-diary"] ol::marker,
:root[data-theme="dark"] main[data-section="entrepreneur-diary"] li::marker {
  color: #6EE7B7;
}

/* --- 2-Spalten-Layout für Fließtext (Tablet/Desktop ≥768px) ---
   Umsetzung via CSS Columns (Magazin-Style):
   - Container ist 2-spaltig, p-Elemente fließen in den Spalten
   - Listen (p + ul/ol) fließen mit im äußeren Layout (column-span: none)
     und sind intern 2-spaltig mit grüner Trennlinie
   - Alleinstehende Listen (nach h2/div/etc.) sind vollbreit (column-span: all)
     und einspaltig (kein 4-Spalten-Effekt)
   - Headings, Tabellen, Code, Mermaid, Blockquotes: vollbreit (column-span: all)
   - list-style-position: inside - Trennlinie liegt VOR dem Bullet der 2. Spalte
   Smartphone (<768px): einspaltig, normale Abstände

   WICHTIG: Das 2-Spalten-Layout gilt nur für Artikel, nicht für SeriesIndex-
   Seiten (data-page-type="series-index"). Diese rendern vollbreit wie die
   Landing-Page, damit der Banner und die Auslöser-Tabelle korrekt dargestellt
   werden. */
@media (min-width: 768px) {
  main[data-section="entrepreneur-diary"]:not([data-page-type="series-index"]) .container {
    column-count: 2;
    column-gap: var(--sp-8);     /* 2rem Spaltenabstand */
    column-rule: 1px solid var(--c-line);  /* feine Trennlinie */
  }

  /* Vollbreit-Elemente (nicht in Spalten fließen) */
  main[data-section="entrepreneur-diary"] h1,
  main[data-section="entrepreneur-diary"] h2,
  main[data-section="entrepreneur-diary"] h3,
  main[data-section="entrepreneur-diary"] h4,
  main[data-section="entrepreneur-diary"] h5,
  main[data-section="entrepreneur-diary"] h6,
  main[data-section="entrepreneur-diary"] table,
  main[data-section="entrepreneur-diary"] .gc-table-scroll,
  main[data-section="entrepreneur-diary"] pre,
  main[data-section="entrepreneur-diary"] .gc-mermaid,
  main[data-section="entrepreneur-diary"] blockquote,
  main[data-section="entrepreneur-diary"] .gc-callout,
  main[data-section="entrepreneur-diary"] .page-nav,
  main[data-section="entrepreneur-diary"] hr {
    column-span: all;
  }

  /* Listen nach einem Fließtext-Absatz (p + ul / p + ol): fließen im
     äußeren 2-Spalten-Layout (column-span: none) und sind intern
     2-spaltig mit grüner Trennlinie. list-style-position: inside
     sorgt dafür, dass die Trennlinie VOR dem Bullet der 2. Spalte liegt. */
  main[data-section="entrepreneur-diary"] p + ul,
  main[data-section="entrepreneur-diary"] p + ol {
    column-span: none;
    column-count: 2;
    column-gap: var(--sp-6);
    column-rule: 1px solid var(--c-green-deep);
    padding: var(--sp-5) var(--sp-5);
    list-style-position: inside;
    break-inside: avoid;
  }

  /* Alleinstehende Listen (nicht nach p): vollbreit (column-span: all),
     aber intern 2-spaltig mit grüner Trennlinie - wie die p + ul/ol.
     Das verhindert den 4-Spalten-Effekt (außen 2 × innen 2), weil die
     Liste vollbreit ist und nur intern 2-spaltig. */
  main[data-section="entrepreneur-diary"] h1 + ul,
  main[data-section="entrepreneur-diary"] h1 + ol,
  main[data-section="entrepreneur-diary"] h2 + ul,
  main[data-section="entrepreneur-diary"] h2 + ol,
  main[data-section="entrepreneur-diary"] h3 + ul,
  main[data-section="entrepreneur-diary"] h3 + ol,
  main[data-section="entrepreneur-diary"] h4 + ul,
  main[data-section="entrepreneur-diary"] h4 + ol,
  main[data-section="entrepreneur-diary"] .gc-mermaid + ul,
  main[data-section="entrepreneur-diary"] .gc-mermaid + ol,
  main[data-section="entrepreneur-diary"] blockquote + ul,
  main[data-section="entrepreneur-diary"] blockquote + ol,
  main[data-section="entrepreneur-diary"] .gc-table-scroll + ul,
  main[data-section="entrepreneur-diary"] .gc-table-scroll + ol,
  main[data-section="entrepreneur-diary"] pre + ul,
  main[data-section="entrepreneur-diary"] pre + ol {
    column-span: all;
    column-count: 2;
    column-gap: var(--sp-6);
    column-rule: 1px solid var(--c-green-deep);
    padding: var(--sp-5) var(--sp-5);
    list-style-position: inside;
    break-inside: avoid;
  }

  /* Tabellen und Code-Blöcke brauchen vollen Margin in Spalten-Layout */
  main[data-section="entrepreneur-diary"] table,
  main[data-section="entrepreneur-diary"] .gc-table-scroll,
  main[data-section="entrepreneur-diary"] pre,
  main[data-section="entrepreneur-diary"] .gc-mermaid {
    margin-top: var(--sp-6);
    margin-bottom: var(--sp-6);
    break-inside: avoid;
  }

  /* Listenpunkte nicht innerhalb einer Spalte abbrechen */
  main[data-section="entrepreneur-diary"] p + ul li,
  main[data-section="entrepreneur-diary"] p + ol li {
    break-inside: avoid;
    margin-bottom: var(--sp-2);
  }

  /* Blockquotes vollbreit mit klarer Trennung */
  main[data-section="entrepreneur-diary"] blockquote,
  main[data-section="entrepreneur-diary"] .gc-callout {
    margin-top: var(--sp-6);
    margin-bottom: var(--sp-6);
    break-inside: avoid;
  }

  /* Headings nicht innerhalb einer Spalte abbrechen */
  main[data-section="entrepreneur-diary"] h1,
  main[data-section="entrepreneur-diary"] h2,
  main[data-section="entrepreneur-diary"] h3,
  main[data-section="entrepreneur-diary"] h4 {
    break-after: avoid;
  }

  /* hr als klarer Spalten-Trenner */
  main[data-section="entrepreneur-diary"] hr {
    margin-top: var(--sp-12);
    margin-bottom: var(--sp-12);
  }
}

/* --- Smartphone-Anpassungen (<768px) --- */
@media (max-width: 767px) {
  main[data-section="entrepreneur-diary"] > .container {
    padding-top: var(--sp-8);   /* 2rem — kompakter auf Smartphone */
    padding-bottom: var(--sp-12);
  }

  main[data-section="entrepreneur-diary"] h2 {
    margin-top: var(--sp-8);    /* 2rem — weniger als Desktop */
    padding-top: var(--sp-4);
  }

  main[data-section="entrepreneur-diary"] h3 {
    margin-top: var(--sp-6);
  }

  main[data-section="entrepreneur-diary"] p {
    margin-bottom: var(--sp-4); /* kompakter */
    line-height: 1.65;
  }
}

/* --- Mermaid-Diagramm-Wrapper (Card-Style für bessere Lesbarkeit) --- */
.gc-mermaid {
  margin: var(--sp-8) 0;
  text-align: center;
  overflow-x: auto;
  background: #FFFFFF;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-4);
  box-shadow: 0 1px 3px rgba(15, 27, 51, 0.06);
}

:root[data-theme="dark"] .gc-mermaid {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* --- Table-Scroll-Wrapper (fehlendes Styling) --- */
.gc-table-scroll {
  overflow-x: auto;
  margin: var(--sp-6) 0;
  break-inside: avoid;
}

/* --- Sidebar Series-Label (fehlendes Styling) --- */
.sidebar__series-label {
  list-style: none;
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-soft);
}

.sidebar__series-label .sidebar__label {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-amber-deep);
  font-weight: 500;
}

:root[data-theme="dark"] .sidebar__series-label {
  border-top-color: rgba(255, 255, 255, 0.14);
}

:root[data-theme="dark"] .sidebar__series-label .sidebar__label {
  color: var(--c-amber-soft);
}