/*
 * doc.css — Lesbarer Rahmen für Anleitungsseiten (`.gh-doc`).
 *
 * Warum es das gibt (07.09.2026):
 *
 * Die Zoom-Anleitung klebte auf dem Handy am Bildschirmrand und war auf dem
 * Schreibtisch 1440 px breit — rund 180 Zeichen pro Zeile. Gemessen, nicht
 * geschätzt:
 *
 *   - `.inside-article` (GeneratePress) hat auf geldhelden.org `padding: 0`.
 *   - `.grid-container` hat `max-width: 100%` — es gibt gar keinen
 *     Inhaltsrahmen.
 *   - Der einzige waagerechte Abstand auf der ganzen Seite kommt aus einer
 *     Regel, die **nur `<p>`** mit 16 px Innenabstand versieht.
 *
 * Deshalb sitzen Überschriften, Listen und Code-Blöcke bündig am Rand, während
 * Fließtext passabel aussieht. Auf normalen Textseiten fällt das kaum auf, weil
 * dort fast nur Absätze stehen. Eine Anleitung besteht aber überwiegend aus
 * Überschriften, Listen und Code — und genau dort bricht es auf.
 *
 * Das ist **kein Problem dieser einen Seite**: `club-bedingungen` und die
 * übrigen einfachen Inhaltsseiten sehen genauso aus. Der saubere Weg wäre, den
 * Inhaltsrahmen im Theme zu setzen. Das ändert aber jede Seite der Website und
 * ist keine Entscheidung, die nebenbei getroffen wird — deshalb hier zunächst
 * ein benannter Rahmen, den jede Anleitungsseite anziehen kann.
 *
 * Geladen nur, wenn der Inhalt `gh-doc` enthält (siehe Frontend\DocStyles).
 */

.gh-doc {
    /* Zeilenlänge: die Grenze, ab der Augen beim Zeilenwechsel die Spur
       verlieren, liegt bei etwa 75 Zeichen.
       Nachgemessen statt geschätzt: Die Seite setzt 16px "Plus Jakarta Sans",
       ein Zeichen ist im Schnitt 7,99px breit. 46rem ergaben 672px Textbreite
       und damit 84 Zeichen — zu viel. 40rem ergeben 576px und rund 72 Zeichen. */
    max-width: 40rem;
    margin-inline: auto;
    /* Waagerechter Abstand wächst mit dem Bildschirm, bleibt aber auf dem
       Handy bei 20px - genug, dass der Text nicht am Glas klebt. */
    padding-inline: clamp(20px, 5vw, 32px);
    padding-block: 8px 48px;
    line-height: 1.65;
}

/* WordPress legt um einen Gruppen-Block zusätzlich einen
   `.wp-block-group__inner-container`, und der trägt hier eigene 30px. Ohne
   diese Zeile addieren sich beide Abstände: gemessen 48px auf einem 390px
   breiten Gerät, also ein Viertel der Bildschirmbreite für nichts. Der Abstand
   gehört genau einmal an den Rahmen.

   Der Selektor ist bewusst dreiteilig: GeneratePress liefert im Kopf ein
   Inline-Stylesheet mit `.site-main .wp-block-group__inner-container` und
   40px. Das ist dieselbe Spezifität wie ein zweiteiliger Selektor — dann
   entscheidet die Reihenfolge, und die Inline-Regel steht hinter uns. Mit dem
   dritten Teil gewinnen wir sauber, ohne `!important`. */
.entry-content .gh-doc > .wp-block-group__inner-container {
    padding-inline: 0;
    max-width: none;
}

/* Die 16px, die das Theme jedem Absatz mitgibt, würden sich hier ebenfalls mit
   dem Rahmen addieren. Innerhalb von .gh-doc kommt der Abstand vom Rahmen. */
.gh-doc p,
.gh-doc h1, .gh-doc h2, .gh-doc h3, .gh-doc h4 {
    padding-inline: 0;
}

/* Ausnahme: die farbigen Kästen tragen ihren Innenabstand aus dem Editor als
   Inline-Stil. Der bleibt — sonst klebt ihr Text an der eigenen Kante. */

.gh-doc > *:first-child { margin-top: 0; }
.gh-doc > *:last-child  { margin-bottom: 0; }

/* --- Überschriften: klare Stufen statt springender Größen --------------- */
.gh-doc h2 {
    font-size: clamp(1.45rem, 1.2rem + 1.1vw, 1.8rem);
    line-height: 1.25;
    margin: 2.2em 0 0.6em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.gh-doc h3 {
    font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.3rem);
    line-height: 1.3;
    margin: 1.9em 0 0.5em;
}

.gh-doc p { margin: 0 0 1.1em; }

/* --- Listen: Einzug links, aber auch Luft rechts ------------------------ */
.gh-doc ul,
.gh-doc ol {
    margin: 0 0 1.2em;
    padding-inline-start: 1.5em;
}

.gh-doc li { margin-bottom: 0.45em; }
.gh-doc li:last-child { margin-bottom: 0; }

/* --- Code: darf niemals über den Rand hinauslaufen ---------------------- */
.gh-doc pre {
    margin: 0 0 1.3em;
    padding: 14px 16px;
    background: #f4f5f6;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    /* Beides zusammen: lange Scope-Namen brechen um, und falls doch etwas zu
       breit ist, wird gescrollt statt die Seite zu sprengen. */
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.95em;
    line-height: 1.6;
}

.gh-doc code {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: 0.1em 0.35em;
    font-size: 0.92em;
    overflow-wrap: anywhere;
}

.gh-doc pre code {
    background: none;
    padding: 0;
    font-size: 1em;
}

/* --- Farbige Hinweiskästen ---------------------------------------------
   Sie tragen ihren Innenabstand als Inline-Stil aus dem Editor. Was ihnen
   fehlte, war die Form: ohne Radius und Akzent sahen sie aus wie
   randlose Farbbänder quer über den Bildschirm. */
.gh-doc p[style*="background-color"] {
    border-radius: 8px;
    border-left: 4px solid rgba(0, 0, 0, 0.14);
    margin: 1.4em 0;
}

/* --- Links sichtbar, aber nicht laut ------------------------------------ */
.gh-doc a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- Schwebende Elemente auf Anleitungsseiten ausblenden -----------------
 *
 * Auf dem Handy überlagern die Kauf-Benachrichtigung (`#gh-sp-widget`) und der
 * schwebende Aktionsknopf (`#gh-fab`) den unteren Bildschirmrand — zusammen gut
 * 340px, also 40 % der sichtbaren Höhe eines iPhones. Auf einer Verkaufsseite
 * ist das gewollt. Auf einer Anleitung, die man Schritt für Schritt abarbeitet,
 * verdecken sie genau die Zeile, die man gerade liest.
 *
 * Beide sind `position: fixed` und stehen damit ausserhalb des Textflusses —
 * `display: none` hinterlässt keinen leeren Platz, es rückt auch nichts nach.
 * Der Body bekommt für sie keinen Reserve-Abstand, das ist geprüft.
 *
 * Die Klasse `gh-doc-page` setzt DocStyles serverseitig.
 *
 * `body` davor ist kein Zierrat: Die Kauf-Benachrichtigung erscheint erst nach
 * einigen Sekunden und schaltet sich dann per `#gh-sp-widget.gh-sp-visible`
 * auf `display: flex`. Das ist dieselbe Spezifität wie `.gh-doc-page #id` —
 * bei Gleichstand gewinnt die spätere Regel, und die steht im Inline-Block des
 * Kopfes. Direkt nach dem Laden sah alles richtig aus, nach acht Sekunden war
 * der Kasten wieder da. Mit `body` davor gewinnen wir eindeutig. */
body.gh-doc-page #gh-sp-widget,
body.gh-doc-page #gh-fab {
    display: none;
}

/* Auf schmalen Geräten den Code-Block etwas enger fassen — der Rahmen selbst
   bleibt bei 20px, sonst wird die Zeile unnötig kurz. */
@media (max-width: 400px) {
    .gh-doc pre { padding: 12px 13px; }
}