/* Info-Sites und Lotto-Ratgeber – ergänzend zum bestehenden lottobay-Layout.
   Das Stylesheet wird nur bei action=infosite_* oder action=ratgeber_* geladen.
   Alle Selektoren sind auf .lb-infosite beschränkt; Shop und Account bleiben unverändert. */

.lb-infosite,
.lb-infosite * { box-sizing: border-box; }

/* Bestehende graue Titel-Leiste samt abgerundeter Ecken weiterverwenden. */
.lb-infosite > .bg_header h1.title_weiss {
    font-size: 19px;
    line-height: 1.35;
    font-weight: 600;
    margin: 0;
}

/* Ruhige Absatzbreite und Innenabstände wie im bisherigen Infosite-Aufbau. */
.lb-infosite > .lb-info-body {
    padding: 19px 18px 22px;
    line-height: 1.6;
    overflow-wrap: break-word;
}
.lb-infosite > .lb-info-body > :first-child { margin-top: 0; }
.lb-infosite > .lb-info-body > :last-child { margin-bottom: 0; }
.lb-infosite > .lb-info-body p {
    line-height: 1.65;
    margin: 0 0 16px;
}

/* Typografie: sinnvolle Abstände statt dicht aneinandergedrängter H2/Listen. */
.lb-infosite > .lb-info-body h2 {
    font-size: 19px;
    line-height: 1.35;
    font-weight: 700;
    margin: 28px 0 12px;
    padding: 0;
}
.lb-infosite > .lb-info-body h3 {
    font-size: 17px;
    line-height: 1.4;
    font-weight: 700;
    margin: 22px 0 10px;
}
.lb-infosite > .lb-info-body h2:first-child { margin-top: 0; }

/* Die bisherigen globalen Styles setzen Listen teils auf margin/padding:0.
   Deshalb Einzug und Abstand hier bewusst explizit wiederherstellen. */
.lb-infosite > .lb-info-body ul,
.lb-infosite > .lb-info-body ol {
    display: block;
    margin: 7px 0 22px !important;
    padding: 0 0 0 27px !important;
    list-style-position: outside !important;
}
.lb-infosite > .lb-info-body ul { list-style-type: disc !important; }
.lb-infosite > .lb-info-body ol { list-style-type: decimal !important; }
.lb-infosite > .lb-info-body li {
    display: list-item !important;
    list-style: inherit;
    margin: 0 0 8px !important;
    padding-left: 3px;
    line-height: 1.55;
}
.lb-infosite > .lb-info-body li:last-child { margin-bottom: 0 !important; }
.lb-infosite > .lb-info-body li strong { font-weight: 700; }
.lb-infosite > .lb-info-body a { overflow-wrap: anywhere; }
.lb-infosite > .lb-info-body a:hover,
.lb-infosite > .lb-info-body a:focus-visible { text-decoration: underline; }

/* Tabellen aus Ratgebern: sauber lesbar auch in schmalen Browserfenstern. */
.lb-infosite > .lb-info-body table {
    border-collapse: collapse;
    max-width: 100%;
    width: 100%;
    margin: 12px 0 22px;
    font-size: 0.95em;
}
.lb-infosite > .lb-info-body th,
.lb-infosite > .lb-info-body td {
    padding: 9px 10px;
    border-bottom: 1px solid #d5d5d5;
    vertical-align: top;
}
.lb-infosite > .lb-info-body th { font-weight: 700; text-align: left; }
.lb-infosite > .lb-info-body tr:first-child th { border-bottom: 2px solid #bababa; }
.lb-infosite > .lb-info-body small { line-height: 1.5; }

/* Abstand zwischen eigentlichem Textblock und der vorhandenen Menü-Navigation. */
.lb-infosite > .lb-info-body + br { line-height: 22px; }

@media (max-width: 700px) {
    .lb-infosite > .bg_header h1.title_weiss { font-size: 17px; }
    .lb-infosite > .lb-info-body { padding: 15px 13px 19px; }
    .lb-infosite > .lb-info-body h2 { font-size: 18px; margin-top: 22px; }
    .lb-infosite > .lb-info-body ul,
    .lb-infosite > .lb-info-body ol { padding-left: 23px !important; }
    .lb-infosite > .lb-info-body th,
    .lb-infosite > .lb-info-body td { padding: 6px 5px; font-size: 0.95em; }
}