/* ratgeber.css — Styles für die Wissens-/Ratgeberstrecke (Lesetext).
   ------------------------------------------------------------------
   Baut auf style.css auf (nutzt dessen CSS-Variablen, Hero-, Section-
   und Container-Klassen). Hier stehen NUR die ratgeber-spezifischen
   Bausteine: Lesespalte, sticky Inhaltsverzeichnis, Phänomen-Baustein
   (Stimme / Mechanik / Merkmale), Hinweisblöcke und das Druck-Layout.
   Alles theme-aware (Dark/Light) über var(--…). */

/* ---- Lesespalte (Raster + Inhaltsverzeichnis: inhaltsverzeichnis.css) ---- */

.rg-article {
  max-width: 70ch;
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--color-text);
}

.rg-article p {
  margin: 0 0 1.15rem;
}

.rg-article h2 {
  font-size: 1.65rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  scroll-margin-top: 7rem;
}

.rg-article h3 {
  font-size: 1.28rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 0.9rem;
  scroll-margin-top: 7rem;
}

.rg-article section[id] {
  scroll-margin-top: 7rem;
}

.teil {
  margin-top: 4rem;
}

.teil > h2 {
  padding-top: 1.25rem;
  border-top: 2px solid var(--color-accent);
}

.teil-intro {
  color: var(--color-muted);
}

/* ---- Kopfbereich der Lesespalte ---- */

.rg-tools {
  margin: 0 0 2.5rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--color-border);
}

.drucken {
  appearance: none;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1;
  color: var(--color-text);
  background: var(--bg-ghost);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 0.7rem 1.15rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.drucken:hover {
  background: var(--bg-ghost-hover);
  border-color: var(--color-accent-border);
  color: var(--color-accent);
}

/* ---- Wiederkehrender Phänomen-Baustein ---- */

.phaenomen {
  margin: 0 0 3.5rem;
}

.phaenomen + .phaenomen {
  border-top: 1px solid var(--color-border);
  padding-top: 2.75rem;
}

.definition {
  color: var(--color-text);
}

.stimme {
  margin: 1.9rem 0 2.1rem;
  padding: 0 0 0 1.7rem;
  border-left: 3px solid var(--color-accent);
  font-size: 1.38rem;
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--color-text);
  hyphens: none;
}

/* Das öffnende Anführungszeichen hängt in den Rand (hängende Interpunktion) */
.stimme p {
  margin: 0;
  text-indent: -0.42em;
}

.mechanik,
.merkmale {
  margin: 0 0 1.5rem;
}

.merkmale {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  padding: 1.3rem 1.5rem 0.15rem;
}

.block-label {
  display: block;
  margin: 0 0 0.5rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ---- Teil 4: Praxis-Absätze ---- */

.praxis {
  margin: 0 0 1.7rem;
}

/* ---- Zum Weiterlesen ---- */

.weiterlesen {
  margin-top: 4rem;
}

.weiterlesen ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.weiterlesen li {
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.weiterlesen li:first-child {
  border-top: 1px solid var(--color-border);
}

/* Quellenverzeichnis: hängender Einzug wie in wissenschaftlichen
   Literaturverzeichnissen; die Einordnung steht abgesetzt darunter. */
.quellen li {
  padding-left: 1.7rem;
  text-indent: -1.7rem;
  font-size: 0.99rem;
  line-height: 1.6;
}

.quelle-notiz {
  display: block;
  margin-top: 0.3rem;
  text-indent: 0;
  color: var(--color-muted);
  font-size: 0.93rem;
}

.quellen a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}

/* ---- Rechtliche Hinweisblöcke ---- */

.hinweis {
  margin: 2.5rem 0;
  padding: 1.35rem 1.55rem;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-muted);
  border-radius: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-muted);
}

.hinweis strong {
  color: var(--color-text);
}

.hinweis p:last-child {
  margin-bottom: 0;
}

.hinweis--schluss {
  margin-top: 3.5rem;
}

.nur-druck {
  display: none;
}

/* ==================================================================
   Druck — die Seite wird als PDF an Interessenten verschickt.
   ================================================================== */

@page {
  margin: 18mm 16mm 20mm;

  @bottom-left {
    content: "www.atse-system.com/tradingpsychologie.html";
    font-size: 8pt;
    color: #555;
  }

  @bottom-right {
    content: "Seite " counter(page);
    font-size: 8pt;
    color: #555;
  }
}

@media print {
  /* Navigation, Inhaltsverzeichnis, Buttons und Zierflächen entfallen */
  .topbar,
  footer,
  .toc,
  .drucken,
  .hero-bg,
  .hero-overlay-grid,
  .hero-kicker-dot {
    display: none !important;
  }

  html,
  body,
  .page-wrapper,
  main,
  .section,
  .hero {
    background: #fff !important;
    color: #000 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
  }

  .container {
    max-width: none !important;
    padding: 0 !important;
  }

  .lese-layout {
    display: block;
    max-width: none;
  }

  .rg-article {
    max-width: none;
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    font-size: 10.5pt;
    line-height: 1.5;
    color: #000;
  }

  .hero-inner,
  .hero-left {
    text-align: left !important;
  }

  .hero-title {
    font-size: 22pt !important;
    color: #000 !important;
  }

  .hero-subtitle,
  .hero-kicker {
    color: #000 !important;
    font-size: 10pt !important;
  }

  .rg-tools {
    border-bottom: 1px solid #000;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
  }

  a {
    color: #000 !important;
    text-decoration: none;
  }

  .rg-article h2 {
    font-size: 15pt;
  }

  .rg-article h3 {
    font-size: 12pt;
  }

  .rg-article h2,
  .rg-article h3 {
    color: #000;
    page-break-after: avoid;
    break-after: avoid-page;
  }

  /* Seitenumbruch vor jedem Teil (1–4) */
  .teil {
    margin-top: 0;
    page-break-before: always;
    break-before: page;
  }

  .teil > h2 {
    border-top: 0;
    padding-top: 0;
  }

  .teil-intro {
    color: #000;
  }

  .phaenomen,
  .stimme,
  .hinweis,
  .mechanik,
  .merkmale,
  .weiterlesen li {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .phaenomen {
    margin-bottom: 1.5rem;
  }

  .phaenomen + .phaenomen {
    border-top: 0;
    padding-top: 0;
  }

  .stimme {
    font-size: 11.5pt;
    font-style: italic;
    color: #000;
    border-left: 1.5pt solid #000;
    margin: 0.9rem 0 1rem;
    padding-left: 0.9rem;
  }

  .merkmale {
    background: none;
    border: 0;
    padding: 0;
  }

  .block-label {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 7.5pt;
    color: #000;
  }

  /* Die beiden Hinweisblöcke bleiben im Druck vollständig erhalten */
  .hinweis {
    background: none;
    border: 1pt solid #000;
    color: #000;
    font-size: 9pt;
  }

  .weiterlesen li {
    color: #000;
    border-color: #999;
  }

  .nur-druck {
    display: block;
    margin-top: 1.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #999;
    font-size: 8.5pt;
    color: #333;
  }
}