/*
 * PushGrounding – Minimalstyling für die eingebettete Grounding Page.
 *
 * GRUNDSATZ: Diese Datei bringt KEIN Design mit.
 *
 * Die Grounding Page liegt als Unterseite auf der Website des Kunden und soll
 * dazugehören. Schriftart, Textfarbe, Linkfarbe und Hintergrund werden deshalb
 * ausdrücklich vom Theme geerbt – hier wird nur repariert, was Themes
 * erfahrungsgemäß nicht abdecken:
 *
 *   1. <dl> – Definitionslisten stylt praktisch kein WordPress-Theme. Genau die
 *      strukturierten Fakten, also das Herzstück der Seite, fallen dadurch als
 *      unformatierte linksbündige Textwüste heraus. Das ist der eigentliche
 *      Grund für diese Datei.
 *   2. Vertikaler Rhythmus zwischen den Abschnitten.
 *   3. Lange Inhalte, die sonst horizontal aus dem Layout laufen.
 *
 * Alle Regeln sind auf .pushgrounding gescopt und können damit nicht in das
 * übrige Theme lecken.
 *
 * Farben werden aus currentColor abgeleitet, nie fest gesetzt: So funktionieren
 * die Trennlinien in einem hellen wie in einem dunklen Theme. Die rgba-Zeile
 * davor ist der Rückfall für Browser ohne color-mix().
 */

.pushgrounding {
    /* Erbt bewusst: font-family, font-size, color, background. */
    line-height: 1.65;
    overflow-wrap: break-word;
}

/* ---------- Abschnitte ---------- */

.pushgrounding h1,
.pushgrounding h2,
.pushgrounding h3 {
    /* Größe und Farbe kommen vom Theme, nur der Abstand wird gesetzt. */
    margin: 2.25em 0 0.6em;
    line-height: 1.25;
}

.pushgrounding > *:first-child,
.pushgrounding article > *:first-child {
    margin-top: 0;
}

.pushgrounding p {
    margin: 0 0 1em;
}

.pushgrounding ul,
.pushgrounding ol {
    margin: 0 0 1.25em;
    padding-left: 1.4em;
}

.pushgrounding li {
    margin-bottom: 0.35em;
}

/* ---------- Faktenlisten (der Hauptgrund für diese Datei) ---------- */

.pushgrounding dl {
    display: grid;
    /* Linke Spalte wächst mit dem längsten Begriff, aber nur bis 20rem –
       sonst zerreißt eine lange FAQ-Frage das Layout. */
    grid-template-columns: minmax(10rem, 20rem) 1fr;
    gap: 0;
    margin: 0 0 1.75em;
}

.pushgrounding dt,
.pushgrounding dd {
    padding: 0.6em 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

.pushgrounding dt {
    font-weight: 600;
    padding-right: 1.5em;
}

.pushgrounding dd {
    margin: 0;
}

/* Erste Zeile bekommt oben eine Linie, damit die Tabelle abgeschlossen wirkt. */
.pushgrounding dt:first-of-type,
.pushgrounding dt:first-of-type + dd {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

/* Mehrere <dd> zu einem <dt>: die Linie gehört nur unter das letzte. */
.pushgrounding dd + dd {
    grid-column: 2;
}

/* ---------- Links ---------- */

.pushgrounding a {
    /* Farbe vom Theme. Nur sicherstellen, dass Links erkennbar bleiben –
       manche Themes entfernen die Unterstreichung im Content-Bereich. */
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Referenz- und Nachweislinks am Ende einer Definition etwas zurücknehmen. */
.pushgrounding dd a {
    overflow-wrap: anywhere;
}

/* ---------- Lange Inhalte bändigen ---------- */

.pushgrounding pre,
.pushgrounding table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* ---------- Fußhinweis ---------- */

.pushgrounding footer,
.pushgrounding > article > p:last-child {
    margin-top: 2.5em;
    padding-top: 1em;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
    font-size: 0.875em;
    opacity: 0.75;
}

/* ---------- Schmale Viewports ---------- */

@media (max-width: 640px) {
    .pushgrounding dl {
        /* Zweispaltig ist auf dem Telefon nicht lesbar: Begriff über Wert. */
        grid-template-columns: 1fr;
    }

    .pushgrounding dt {
        padding: 0.6em 0 0;
        border-bottom: 0;
    }

    .pushgrounding dt:first-of-type + dd {
        border-top: 0;
    }

    .pushgrounding dd {
        padding-top: 0.15em;
    }

    .pushgrounding dd + dd {
        grid-column: 1;
    }
}