/* ==========================================================================
   GUT NaturForum — Hausregeln
   Gestaltung der Seite /hausregeln/. Farben und Schriften kommen aus
   tokens.css; hier steht nur der Aufbau dieser einen Seite.

   ZUR LESEBREITE
   Bewusst 820px statt der 1200px der Rechtstext-Seiten. Das hier ist ein Text
   zum Lesen, kein Formular: Bei 1200px laufen Zeilen auf ueber 140 Zeichen,
   und das Auge findet den Zeilenanfang nicht mehr zuverlaessig wieder.
   ========================================================================== */

.gut-hr {
    max-width: 820px;
    margin: 0 auto;
    padding: 8px 20px 72px;
    box-sizing: border-box;
    font-family: 'DM Sans', sans-serif;
    color: var(--text, #2a2a2a);
    font-size: 16px;
    line-height: 1.72;
}

.gut-hr-kopf { text-align: center; margin-bottom: 44px; }
.gut-hr h1 {
    font-family: 'Lora', Georgia, serif;
    font-size: 34px;
    font-weight: 500;
    color: var(--dunkel, #2d4a1e);
    line-height: 1.25;
    margin: 0 0 10px;
}
.gut-hr-stand {
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gruen-text, #5c7a3e);
    margin: 0;
}

.gut-hr h2 {
    font-family: 'Lora', Georgia, serif;
    font-size: 23px;
    font-weight: 500;
    color: var(--dunkel, #2d4a1e);
    line-height: 1.3;
    margin: 48px 0 12px;
}
.gut-hr h3 {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--dunkel, #2d4a1e);
    margin: 26px 0 6px;
}
.gut-hr p { margin: 0 0 14px; }

/* Der Satz, auf den die ganze Seite hinauslaeuft. Kein Kasten, keine Farbe —
   nur groesser, in der Serifenschrift und mit Luft. Wer die Seite ueberfliegt,
   soll genau hier haengen bleiben. */
.gut-hr-kernsatz {
    font-family: 'Lora', Georgia, serif;
    font-size: 21px;
    line-height: 1.5;
    color: var(--dunkel, #2d4a1e);
    border-left: 3px solid var(--gruen-mid, #c0d4a0);
    padding: 2px 0 2px 22px;
    margin: 26px 0 32px;
}

/* ── Die drei Formen der Naturverbundenheit ─────────────────────────────── */
.gut-hr-formen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 18px 0 26px;
    padding: 0;
    list-style: none;
}
.gut-hr-form {
    background: var(--weiss, #fff);
    border: 1px solid var(--gruen-mid, #c0d4a0);
    border-radius: 12px;
    padding: 18px 18px 16px;
}
.gut-hr-form b {
    display: block;
    font-family: 'Lora', Georgia, serif;
    font-size: 17px;
    font-weight: 500;
    color: var(--gruen-text, #5c7a3e);
    margin-bottom: 4px;
}
.gut-hr-form span { font-size: 14.5px; line-height: 1.6; color: var(--text-soft, #6a7060); }

/* ── Selbsttest ─────────────────────────────────────────────────────────── */
.gut-hr-test {
    background: var(--bg, #f6f8f0);
    border: 1px solid var(--gruen-mid, #c0d4a0);
    border-radius: 14px;
    padding: 24px 26px 20px;
    margin: 22px 0 30px;
}
.gut-hr-test p:first-child { font-weight: 600; color: var(--dunkel, #2d4a1e); margin-bottom: 12px; }
.gut-hr-test ol { margin: 0; padding-left: 22px; }
.gut-hr-test li { margin: 0 0 9px; }
.gut-hr-test li:last-child { margin-bottom: 0; }

/* ── Passt / passt nicht ────────────────────────────────────────────────────
   Bewusst KEINE Tabelle. Eine Tabelle mit zwei Spalten wird auf dem Handy
   entweder unlesbar schmal oder schiebt sich seitlich aus dem Bild. Hier
   stehen die Paare als Karten: nebeneinander, wo Platz ist, sonst
   untereinander — und weil jede Haelfte ihr eigenes Zeichen traegt, bleibt
   auch gestapelt klar, welche Seite welche ist.                            */
.gut-hr-paare { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 8px; }
.gut-hr-paar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.gut-hr-ja, .gut-hr-nein {
    border-radius: 12px;
    padding: 15px 17px;
    font-size: 15px;
    line-height: 1.55;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.gut-hr-ja   { background: #f0f7e8; border: 1px solid var(--gruen-mid, #c0d4a0); color: var(--dunkel, #2d4a1e); }
.gut-hr-nein { background: var(--weiss, #fff); border: 1px solid #e3e6dd; color: var(--text-soft, #6a7060); }
.gut-hr-zeichen { flex: 0 0 auto; font-weight: 700; line-height: 1.5; }
.gut-hr-ja   .gut-hr-zeichen { color: var(--gruen-text, #5c7a3e); }
.gut-hr-nein .gut-hr-zeichen { color: #b9a08d; }

/* ── Regeln ─────────────────────────────────────────────────────────────── */
.gut-hr-regeln { margin: 14px 0 0; padding: 0; list-style: none; }
.gut-hr-regeln li {
    padding: 14px 0;
    border-bottom: 1px solid #e8ece1;
}
.gut-hr-regeln li:last-child { border-bottom: none; }
.gut-hr-regeln b { color: var(--dunkel, #2d4a1e); font-weight: 600; }

.gut-hr-schluss {
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid var(--gruen-mid, #c0d4a0);
    text-align: center;
    font-size: 13.5px;
    color: var(--text-soft, #6a7060);
}

/* ── Schmale Bildschirme ────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .gut-hr { font-size: 15.5px; padding-bottom: 56px; }
    .gut-hr h1 { font-size: 27px; }
    .gut-hr h2 { font-size: 20px; margin-top: 38px; }
    .gut-hr-kernsatz { font-size: 18px; padding-left: 16px; }
    .gut-hr-formen { grid-template-columns: 1fr; gap: 10px; }
    .gut-hr-paar   { grid-template-columns: 1fr; gap: 8px; }
    .gut-hr-test   { padding: 20px 18px 16px; }
}