/* =========================================================
   SWO Post Content Rhythm + Typography
   Scope: .wcr-post-content
   ========================================================= */

/*
.wcr-post-content = tatsächlicher Content-Scope im Frontend
Hier definieren wir Variablen für Typografie und Abstände
*/
.wcr-post-content {
  /* -------------------------
     Farben
     ------------------------- */

  --swo-color-text: #16372F;   /* Fließtext */
  --swo-color-h2: #0E756B;     /* H2 – frischer, klarer Grünton */
  --swo-color-h3: #0B5F58;     /* H3 – dunkler, ruhiger, weniger dominant */

  /* -------------------------
     Schriftfamilien
     ------------------------- */
  --swo-font-body: "IBM Plex Sans", sans-serif;
  --swo-font-heading: "Fraunces", serif;

  /* -------------------------
     Fließtext Desktop / Laptop
     ------------------------- */
  --swo-body-size: 19px;
  --swo-body-line: 1.6;
  --swo-body-letter: 0em;
  --swo-body-weight: 400;

  /* -------------------------
     H2 Desktop / Laptop
     ------------------------- */
  --swo-h2-size: 35px;
  --swo-h2-line: 1.18;
  --swo-h2-letter: -0.2px;
  --swo-h2-weight: 500;

  /* -------------------------
     H3 Desktop / Laptop
     ------------------------- */
  --swo-h3-size: 24px;
  --swo-h3-line: 1.25;
  --swo-h3-letter: -0.05px;
  --swo-h3-weight: 400;

  /* -------------------------
     Abstände Desktop / Laptop
     ------------------------- */
  --swo-space-text: 0.8rem;           /* Abstand unter normalen Textblöcken – etwas kompakter */
  --swo-space-list: 1rem;             /* Listen leicht luftiger als normaler Fließtext */
  --swo-space-media: 1.25rem;         /* Abstand nach Bild/Tabelle – bewusst etwas größer */
  --swo-space-h2-top: 2.5rem;         /* Abstand VOR einer H2 */
  --swo-space-h2-bottom: 0.7rem;      /* Abstand NACH H2 zum Fließtext – reduziert */
  --swo-space-h3-top: 2.5rem;         /* Abstand VOR einer H3 */
  --swo-space-h3-bottom: 0.7rem;      /* Abstand NACH H3 zum Fließtext */
  --swo-space-media-to-h2: 2rem;      /* Abstand von Bild/Tabelle → H2 */
  --swo-space-media-to-h3: 2rem;      /* Abstand von Bild/Tabelle → H3 */
  --swo-space-h2-to-media: 0.9rem;    /* Abstand von H2 direkt zu Bild/Tabelle */
  --swo-space-h3-to-media: 0.9rem;    /* Abstand von H3 direkt zu Bild/Tabelle */
  --swo-space-h2-to-list: 0.8rem;     /* H2 → Liste bewusst luftiger als H2 → Fließtext */
  --swo-space-h3-to-list: 0.8rem;     /* H3 → Liste */
}

/* -------------------------
   Fließtext & Standardblöcke
   ------------------------- */

/*
Alle typischen Inhalte bekommen unten Abstand
→ sorgt für gleichmäßigen Lesefluss
*/
.wcr-post-content p,
.wcr-post-content table,
.wcr-post-content blockquote,
.wcr-post-content .wcr-overview-table {
  margin-top: 0;
  margin-bottom: var(--swo-space-text);
}

/*
Listen separat, damit sie leicht anders getaktet werden können
*/
.wcr-post-content ul,
.wcr-post-content ol {
  margin-top: 0;
  margin-bottom: var(--swo-space-list);
}

/*
Medien separat, damit der Abstand NACH einem Bild etwas größer ist
als der Abstand von Text ZUM Bild darunter
*/
.wcr-post-content figure {
  margin-top: 0;
  margin-bottom: var(--swo-space-media);
}

/* -------------------------
   Typografie Fließtext
   ------------------------- */

.wcr-post-content,
.wcr-post-content p,
.wcr-post-content li,
.wcr-post-content table,
.wcr-post-content blockquote {
  font-family: var(--swo-font-body);
  color: var(--swo-color-text);
  font-size: var(--swo-body-size);
  line-height: var(--swo-body-line);
  letter-spacing: var(--swo-body-letter);
  font-weight: var(--swo-body-weight);
}

/* Optional: starke Hervorhebungen im Fließtext sauber mitziehen */
.wcr-post-content strong,
.wcr-post-content b {
  font-weight: 600;
}

/* -------------------------
   Überschriften
   ------------------------- */

/*
H2 = große Abschnittsüberschrift
→ viel Abstand nach oben, reduzierter Abstand nach unten zum Fließtext
*/
.wcr-post-content h2 {
  margin-top: var(--swo-space-h2-top);
  margin-bottom: var(--swo-space-h2-bottom);
  font-family: var(--swo-font-heading);
  color: var(--swo-color-h2);
  font-size: var(--swo-h2-size);
  line-height: var(--swo-h2-line);
  letter-spacing: var(--swo-h2-letter);
  font-weight: var(--swo-h2-weight);
}

/*
H3 = kleinere Zwischenüberschrift
*/
.wcr-post-content h3 {
  margin-top: var(--swo-space-h3-top);
  margin-bottom: var(--swo-space-h3-bottom);
  font-family: var(--swo-font-heading);
  color: var(--swo-color-h3);
  font-size: var(--swo-h3-size);
  line-height: var(--swo-h3-line);
  letter-spacing: var(--swo-h3-letter);
  font-weight: var(--swo-h3-weight);
}

/*
   H3 Feinschliff (visuelle Abgrenzung)
*/
.wcr-post-content h3 {
  position: relative; /* notwendig für das Pseudo-Element */
}

.wcr-post-content h3::before {
  content: "";
  display: block;
  width: 2rem;                        /* Länge der Linie */
  height: 1px;                        /* dünne Linie */
  background: rgba(11, 95, 88, 0.25); /* Farbe passend zu H3, leicht transparent */
  margin-bottom: 0.45rem;             /* Abstand zwischen Linie und Text */
}

/* -------------------------
   Erstes Element oben
   ------------------------- */

/*
Elementor packt alles in einen extra Container
→ das erste echte Element bekommt sonst evtl. Abstand nach oben
→ wir entfernen ihn hier gezielt
*/
.wcr-post-content .elementor-widget-container > :first-child {
  margin-top: 0;
}

/* -------------------------
   H2 / H3 vor Listen
   ------------------------- */

/*
Wenn nach H2 direkt eine Liste kommt,
darf es etwas luftiger sein als bei normalem Fließtext
*/
.wcr-post-content h2 + ul,
.wcr-post-content h2 + ol {
  margin-top: var(--swo-space-h2-to-list);
}

/*
Dasselbe für H3
*/
.wcr-post-content h3 + ul,
.wcr-post-content h3 + ol {
  margin-top: var(--swo-space-h3-to-list);
}

/* -------------------------
   H2 / H3 vor Medien
   ------------------------- */

/*
Wenn nach H2 oder H3 direkt ein Bild oder eine Tabelle kommt,
kann der Abstand separat vom normalen Fließtext gesteuert werden
*/
.wcr-post-content h2 + figure,
.wcr-post-content h2 + table,
.wcr-post-content h2 + .wcr-overview-table {
  margin-top: var(--swo-space-h2-to-media);
}

.wcr-post-content h3 + figure,
.wcr-post-content h3 + table,
.wcr-post-content h3 + .wcr-overview-table {
  margin-top: var(--swo-space-h3-to-media);
}

.wcr-post-content h2 + .elementor-menu-anchor + figure,
.wcr-post-content h2 + .elementor-menu-anchor + table,
.wcr-post-content h2 + .elementor-menu-anchor + .wcr-overview-table {
  margin-top: var(--swo-space-h2-to-media);
}

.wcr-post-content h3 + .elementor-menu-anchor + figure,
.wcr-post-content h3 + .elementor-menu-anchor + table,
.wcr-post-content h3 + .elementor-menu-anchor + .wcr-overview-table {
  margin-top: var(--swo-space-h3-to-media);
}

/* -------------------------
   Übergänge nach Medien
   ------------------------- */

/*
Wenn nach einem Bild / einer Tabelle direkt eine H2 kommt,
reduzieren wir den Abstand etwas gegenüber dem Standard-H2-Abstand
*/
.wcr-post-content figure + h2,
.wcr-post-content table + h2,
.wcr-post-content .wcr-overview-table + h2 {
  margin-top: var(--swo-space-media-to-h2);
}

/*
Gleiches für H3 nach Bildern/Tabellen
*/
.wcr-post-content figure + h3,
.wcr-post-content table + h3,
.wcr-post-content .wcr-overview-table + h3 {
  margin-top: var(--swo-space-media-to-h3);
}

.wcr-post-content figure + .elementor-menu-anchor + h2,
.wcr-post-content table + .elementor-menu-anchor + h2,
.wcr-post-content .wcr-overview-table + .elementor-menu-anchor + h2 {
  margin-top: var(--swo-space-media-to-h2);
}

.wcr-post-content figure + .elementor-menu-anchor + h3,
.wcr-post-content table + .elementor-menu-anchor + h3,
.wcr-post-content .wcr-overview-table + .elementor-menu-anchor + h3 {
  margin-top: var(--swo-space-media-to-h3);
}

/* -------------------------
   Text direkt vor Bild etwas kompakter
   ------------------------- */

/*
Der Abstand von Text → Bild darunter
soll kleiner sein als der Abstand nach Bild → Text
*/
.wcr-post-content p + figure,
.wcr-post-content ul + figure,
.wcr-post-content ol + figure,
.wcr-post-content table + figure,
.wcr-post-content blockquote + figure {
  margin-top: -0.15rem;
}


/* -------------------------
   Inline-Bilder (Ecken abrunden)
   ------------------------- */

.wcr-post-content .wcr-inline-figure {
  overflow: hidden;
  border-radius: 10px;
}

.wcr-post-content .wcr-inline-media {
  display: block;
  width: 100%;
  border-radius: inherit;
}

/* -------------------------
   Listen Feinschliff
   ------------------------- */

.wcr-post-content ul,
.wcr-post-content ol {
  padding-left: 1.2rem;
}

.wcr-post-content li + li {
  margin-top: 0.25rem;
}

/* -------------------------
   Nummerierte Liste (ohne Bullet-Optik)
   ------------------------- */

/*
Nummerierte Listen visuell näher an Fließtext bringen
→ gleiche Logik wie ul, aber sauberere Darstellung
*/
.wcr-post-content ol {
  list-style-position: outside; /* Zahlen bleiben außen, nicht eingerückt im Textblock */
  padding-left: 0;              /* Einrückung entfernen */
  counter-reset: item;          /* eigener Counter für saubere Kontrolle */
}

/*
Jedes Listenelement bekommt eine eigene Nummer
*/
.wcr-post-content ol > li {
  list-style: none;             /* Standard-Zahlen entfernen */
  position: relative;
  padding-left: 1.4rem;         /* Platz für eigene Nummer schaffen */
}

/*
Eigene Nummer vor dem Text
*/
.wcr-post-content ol > li::before {
  content: counter(item) ".";
  counter-increment: item;
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 500;             /* leicht betont, aber nicht dominant */
  color: var(--swo-color-h3);   /* harmoniert mit eurer Hierarchie */
}

/* -------------------------
   Tablet
   ------------------------- */

@media (max-width: 1024px) {
  .wcr-post-content {
    --swo-body-size: 18px;
    --swo-body-line: 1.55;
    --swo-body-letter: 0em;
    --swo-body-weight: 400;

    --swo-h2-size: 30px;
    --swo-h2-line: 1.18;
    --swo-h2-letter: -0.15px;

    --swo-h3-size: 22px;
    --swo-h3-line: 1.3;
    --swo-h3-letter: -0.08px;

    --swo-space-text: 0.7rem;
    --swo-space-list: 0.9rem;
    --swo-space-media: 1.15rem;
    --swo-space-h2-top: 2.3rem;
    --swo-space-h2-bottom: 0.65rem;
    --swo-space-h3-top: 1.95rem;
    --swo-space-h3-bottom: 0.65rem;
    --swo-space-media-to-h2: 1.65rem;
    --swo-space-media-to-h3: 1.65rem;
    --swo-space-h2-to-media: 0.8rem;
    --swo-space-h3-to-media: 0.8rem;
    --swo-space-h2-to-list: 0.8rem;
    --swo-space-h3-to-list: 0.8rem;
  }
}

/* -------------------------
   Mobile
   ------------------------- */

@media (max-width: 767px) {
  .wcr-post-content {
    --swo-body-size: 16px;
    --swo-body-line: 1.5;
    --swo-body-letter: 0em;
    --swo-body-weight: 400;

    --swo-h2-size: 26px;
    --swo-h2-line: 1.15;
    --swo-h2-letter: -0.1px;

    --swo-h3-size: 21px;
    --swo-h3-line: 1.2;
    --swo-h3-letter: 0px;

    --swo-space-text: 0.65rem;
    --swo-space-list: 0.85rem;
    --swo-space-media: 1.05rem;
    --swo-space-h2-top: 2.2rem;
    --swo-space-h2-bottom: 0.6rem;   /* H2 → Fließtext auf Mobile reduziert */
    --swo-space-h3-top: 1.75rem;
    --swo-space-h3-bottom: 0.6rem;
    --swo-space-media-to-h2: 1.8rem;
    --swo-space-media-to-h3: 1.8rem;
    --swo-space-h2-to-media: 0.75rem;
    --swo-space-h3-to-media: 0.75rem;
    --swo-space-h2-to-list: 0.7rem;  /* Liste bewusst luftiger belassen */
    --swo-space-h3-to-list: 0.7rem;
  }
}