/* HTN-Pro - Seitenfuss, Cookie-Hinweis, Rechtsseiten und mobile Darstellung.
   Laedt nach reloaded.css und benutzt dieselben Farbvariablen. Das alte
   Spiel-Layout (absolut positionierte Navigation rechts, Inhalt mit
   200px Rand) bleibt auf dem Desktop unangetastet - ab 900px Breite wird
   es fuer Touchbedienung umgebaut. */

/* ---------- Sprungmarke ---------- */
.rl-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 8px 14px;
    background: var(--rl-accent);
    color: #ffffff;
    font: bold 13px Verdana, Arial, sans-serif;
    text-decoration: none;
}
.rl-skip:focus {
    left: 6px;
    top: 6px;
}

/* ---------- sichtbarer Tastaturfokus ueberall ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #ffb400;
    outline-offset: 1px;
}

/* ---------- Schaltflaechen ---------- */
.rl-btn {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 9px 14px;
    min-height: 24px;
    background: var(--rl-head);
    color: var(--rl-ink);
    border: 1px solid var(--rl-line);
    font: bold 12px Verdana, Arial, sans-serif;
    text-decoration: none;
    cursor: pointer;
}
.rl-btn:hover { background: var(--rl-surface-alt); }
.rl-btn-primary {
    background: var(--rl-accent);
    border-color: var(--rl-accent-dark);
    color: #ffffff;
}
.rl-btn-primary:hover { background: var(--rl-accent-dark); }

/* ---------- Rechtsseiten ---------- */
.legal-doc { line-height: 1.55; }
.legal-doc p, .legal-doc li { font-size: 12px; }
.legal-doc h3 { margin-top: 18px; }
.legal-doc ul { padding-left: 20px; }
.legal-nav p { margin: 0; }
.legal-meta { color: var(--rl-ink-soft); font-style: italic; }

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 14px 0;
    border: 1px solid var(--rl-line);
}
.legal-table th,
.legal-table td {
    padding: 6px 8px;
    border: 1px solid var(--rl-line);
    font-size: 12px;
    text-align: left;
    vertical-align: top;
}
.legal-table th { background: var(--rl-head); }
.legal-table td { background: var(--rl-surface); }

/* ---------- Seitenfuss ---------- */
.rl-footer {
    clear: both;
    margin: 24px 200px 0 0;
    padding: 12px 10px 18px 10px;
    background: var(--rl-head);
    border-top: 2px solid var(--rl-accent);
    font-size: 11px;
}
.rl-footer-links a {
    display: inline-block;
    padding: 6px 4px;
    color: var(--rl-accent);
    text-decoration: none;
}
.rl-footer-links a:hover { text-decoration: underline; }
.rl-footer-meta {
    margin: 6px 0 0 0;
    color: var(--rl-ink-soft);
}

/* ---------- Cookie-Hinweis ---------- */
.rl-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    max-height: 80vh;
    overflow-y: auto;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)) 16px;
    background: var(--rl-surface-alt);
    border-top: 3px solid var(--rl-accent);
    box-shadow: 0 -2px 6px rgba(0, 0, 0, .35);
}
.rl-consent[hidden] { display: none; }
.rl-consent h2 {
    margin: 0 0 6px 0;
    padding: 0;
    background: none;
    height: auto;
    color: var(--rl-accent);
    font: bold 15px Verdana, Arial, sans-serif;
}
.rl-consent p { margin: 0 0 10px 0; font-size: 12px; line-height: 1.5; }
.rl-consent a { color: var(--rl-accent); }
.rl-consent-opt {
    display: block;
    margin: 0 0 8px 0;
    font-size: 12px;
    line-height: 1.45;
    cursor: pointer;
}
.rl-consent-opt input {
    margin-right: 8px;
    width: 18px;
    height: 18px;
    vertical-align: -3px;
}
.rl-consent-actions { margin-top: 6px; }

/* ---------- Menue-Schalter (nur mobil sichtbar) ---------- */
.rl-navtoggle { display: none; }
.rl-navtoggle-icon {
    display: inline-block;
    width: 16px;
    height: 2px;
    margin-right: 8px;
    vertical-align: 3px;
    background: currentColor;
    box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
}

/* =======================================================================
   Mobil: Navigation aus der absoluten Position holen, Inhalt volle Breite
   ======================================================================= */
@media screen and (max-width: 900px) {

    html { -webkit-text-size-adjust: 100%; }

    body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    .header {
        position: relative;
        height: auto !important;
        min-height: 60px;
        padding: 10px 12px;
        background-size: cover !important;
    }
    /* Die Kopfgrafik haengt als Hintergrund an der h1 und ist 145px hoch -
       das frisst auf einem Handy ein Viertel des Bildschirms. */
    .header h1 {
        position: static !important;
        height: 72px !important;
        margin: 0;
        padding: 0;
        background-size: auto 52px !important;
        background-repeat: no-repeat !important;
        background-position: right center !important;
        color: var(--rl-accent);
        font-size: 16px;
        line-height: 72px;
        text-align: left !important;
        overflow: hidden;
    }

    /* Sieht aus wie ein Menueeintrag des Spiels, nicht wie ein Fremdkoerper */
    .rl-navtoggle {
        display: block;
        width: calc(100% - 24px);
        margin: 10px 12px;
        padding: 12px 14px;
        background: var(--rl-surface);
        color: var(--rl-ink);
        border: 1px solid var(--rl-line);
        font: bold 14px Verdana, Arial, sans-serif;
        text-align: left;
        cursor: pointer;
    }
    .rl-navtoggle[aria-expanded="true"] { background: var(--rl-head); }
    .rl-navtoggle .rl-navtoggle-icon { color: var(--rl-accent); }

    /* Reiterleisten stehen im Quelltext ohne Leerzeichen aneinander und hatten
       damit keine Umbruchstelle - der letzte Reiter ragte aus dem Bild. */
    .category-tabs, .nav-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }
    .category-tabs .tab, .nav-bar .btn { flex: 0 0 auto; }

    ul.navigation {
        position: static !important;
        float: none !important;
        display: block;
        width: auto;
        margin: 0 12px 12px 12px;
        padding: 0;
        top: auto !important;
        right: auto !important;
    }
    ul.navigation.rl-nav-collapsed { display: none; }
    ul.navigation li { margin: 0 0 3px 0; }
    ul.navigation a {
        width: auto !important;
        display: block;
        padding: 12px 12px;      /* Fingergroesse statt 7px */
        font-size: 14px;
    }
    ul.navigation em { font-size: 12px; }

    div.content, .content {
        margin: 10px 12px !important;
        padding: 10px !important;
    }

    /* h2 traegt das Seiten-Icon als Hintergrund und hat dafuer 80px Einzug bei
       24px Schrift - lange Ueberschriften liefen damit aus dem Bild.
       Icon bleibt, nur kleiner und mit umbrechendem Text. */
    .content h2 {
        padding: 8px 0 8px 42px !important;
        margin: 0 0 12px 0 !important;
        font-size: 15px;
        line-height: 1.35;
        background-size: 32px auto !important;
        background-position: left center !important;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .content h3, .content h4 {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* Breite Spieltabellen scrollen in sich statt die Seite zu sprengen */
    .content table,
    .rl-table {
        display: block;
        width: 100% !important;
        margin-left: 0 !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Tabellen mit echter Kopfzeile und mehr als zwei Spalten werden zu Karten
       gestapelt. Seitliches Scrollen taugt hier nicht: die wichtigste Spalte
       (z.B. der Kaufen-Knopf) lag ausserhalb des Bildschirms und war nicht
       auffindbar. Die Kopfzeile wandert als Beschriftung vor jeden Wert.
       Markiert werden die Tabellen per JavaScript (siehe footer_lib.php). */
    .content table.rl-stack {
        display: block;
        overflow: visible;
        border: 0;
    }
    .content table.rl-stack thead,
    .content table.rl-stack tr.rl-stack-head {
        display: none;
    }
    .content table.rl-stack tbody,
    .content table.rl-stack tr,
    .content table.rl-stack td {
        display: block;
        width: auto;
    }
    .content table.rl-stack tr {
        margin: 0 0 10px 0;
        border: 1px solid var(--rl-line);
        background: var(--rl-surface);
    }
    .content table.rl-stack td {
        padding: 7px 9px;
        border: 0;
        border-bottom: 1px solid var(--rl-line);
        text-align: left;
        overflow-wrap: anywhere;
    }
    .content table.rl-stack tr td:last-child { border-bottom: 0; }
    .content table.rl-stack td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        color: var(--rl-ink-soft);
        font-size: 10px;
        font-weight: bold;
        text-transform: uppercase;
    }
    .content table.rl-stack td[data-label=""]::before { display: none; }
    /* Die erste Zelle ist die Ueberschrift der Karte */
    .content table.rl-stack tr td:first-child {
        background: var(--rl-head);
        font-weight: bold;
    }
    .content table.rl-stack tr td:first-child::before { display: none; }

    /* Einstellungs- und Formulartabellen (Beschriftung links, Feld rechts):
       Beschriftung nach oben, Feld darunter ueber die volle Breite. Vorher
       wurde die rechte Spalte samt Eingabefeld einfach abgeschnitten. */
    .content table.rl-form-stack,
    .content table.rl-form-stack tbody,
    .content table.rl-form-stack tr,
    .content table.rl-form-stack th,
    .content table.rl-form-stack td {
        display: block;
        width: auto !important;
        overflow: visible;
    }
    .content table.rl-form-stack {
        border: 0;
        margin-left: 0 !important;
    }
    .content table.rl-form-stack tr {
        margin: 0 0 10px 0;
        border: 1px solid var(--rl-line);
        background: var(--rl-surface);
    }
    .content table.rl-form-stack th {
        padding: 6px 9px;
        border: 0;
        border-bottom: 1px solid var(--rl-line);
        background: var(--rl-head);
        font-size: 12px;
        text-align: left;
    }
    .content table.rl-form-stack td {
        padding: 8px 9px;
        border: 0;
        font-size: 12px;
        overflow-wrap: anywhere;
    }
    .content table.rl-form-stack td input[type="text"],
    .content table.rl-form-stack td input[type="password"],
    .content table.rl-form-stack td input[type="email"],
    .content table.rl-form-stack td input[type="number"],
    .content table.rl-form-stack td select,
    .content table.rl-form-stack td textarea {
        width: 100%;
        box-sizing: border-box;
    }
    /* Kurze Zahlenfelder muessen nicht die ganze Breite einnehmen */
    .content table.rl-form-stack td input[size="1"],
    .content table.rl-form-stack td input[size="2"],
    .content table.rl-form-stack td input[size="3"],
    .content table.rl-form-stack td input[size="4"],
    .content table.rl-form-stack td input[size="5"] { width: auto; max-width: 100%; }

    /* Textfelder und Textbereiche haben feste cols/size-Angaben aus der
       Urfassung (teils 80 Zeichen) - die sprengen jedes Handy-Display. */
    .content textarea {
        width: 100% !important;
        box-sizing: border-box;
    }
    .content table.rl-form-stack { table-layout: fixed; width: 100% !important; }

    /* Schmale Hinweis- und Textkaesten: Inhalt umbrechen, kein Seitwaertsscrollen */
    .content table.rl-wrap {
        display: table;
        table-layout: fixed;
        width: 100% !important;
        margin-left: 0 !important;
        overflow: visible;
    }
    .content table.rl-wrap th,
    .content table.rl-wrap td {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Formulare in den Karten: Auswahlfelder und Knopf untereinander statt in
       einer Zeile - lange Optionstexte sprengten sonst die Karte. */
    .content table.rl-stack td form {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }
    .content table.rl-stack td form select {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
    }
    .content table.rl-stack td form input[type="submit"],
    .content table.rl-stack td form button { flex: 0 0 auto; }

    /* Guthaben-Leiste: Text und Knopf nebeneinander, umbrechend */
    .content .balance-bar, .rl-balance {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        height: auto !important;
    }

    /* Die Rechtstabellen enthalten Fliesstext - der bricht besser um, als dass
       man seitwaerts scrollen muss. display:block wuerde hier nichts bringen:
       die Zeilen laufen dabei aus dem Scrollrahmen heraus. */
    .content .legal-table {
        display: table;
        table-layout: fixed;
        width: 100% !important;
        margin-left: 0 !important;
        overflow: visible;
    }
    .legal-table th, .legal-table td {
        padding: 5px 6px;
        font-size: 11px;
        word-break: break-word;
        overflow-wrap: anywhere;
        hyphens: auto;
    }

    .content img { max-width: 100%; height: auto; }

    input[type="text"], input[type="password"], input[type="email"],
    select, textarea {
        max-width: 100%;
        box-sizing: border-box;
        padding: 10px 8px;
        font-size: 16px;         /* unter 16px zoomt iOS beim Fokus hinein */
    }
    input[type="submit"], button {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 14px;
    }

    /* Die beiden absolut gesetzten Statusanzeigen kollidieren mobil mit dem Kopf */
    #generation-time, #server-time {
        position: static !important;
        display: block;
        margin: 4px 12px;
        text-align: right;
    }

    .rl-footer { margin: 18px 0 0 0; }
    .rl-footer-links a { padding: 8px 6px; }

    .help { display: none; }   /* Tooltip-Kaesten haben mobil keinen Platz */
}

@media screen and (max-width: 520px) {
    .header h1 { font-size: 16px; }
    .legal-doc p, .legal-doc li { font-size: 13px; }
    .rl-consent-actions .rl-btn { display: block; width: 100%; margin-right: 0; }
}

/* ---------- Rueckfallebenen ---------- */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media print {
    ul.navigation, .rl-navtoggle, .rl-consent, .help { display: none !important; }
    div.content, .content { margin: 0 !important; color: #000; background: #fff; }
}

/* ---------- Installations-Knopf ---------- */
.rl-install {
    display: none;          /* wird per JS eingeblendet, wenn Installation moeglich ist */
    margin: 0 0 12px 0;
}
.rl-install-row {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}
.rl-install .rl-btn { margin: 0; }
.rl-install-note {
    color: var(--rl-ink-soft);
    font-size: 11px;
}
.rl-install-help {
    margin: 8px 0 0 0;
    padding: 8px 10px;
    background: var(--rl-surface-alt);
    border: 1px solid var(--rl-line);
    font-size: 12px;
    line-height: 1.5;
}
.rl-install-help[hidden] { display: none; }
.rl-install-help ol { margin: 6px 0 0 0; padding-left: 20px; }
.rl-install-help li { margin-bottom: 4px; }
.rl-install-help p { margin: 8px 0 0 0; color: var(--rl-ink-soft); }
.rl-install-help:focus-visible { outline: 3px solid #ffb400; outline-offset: 1px; }

/* ---------- Herkunftshinweis im Fuss ---------- */
.rl-footer-credits {
    margin: 8px 0 0 0;
    color: var(--rl-ink-soft);
    font-size: 11px;
    line-height: 1.5;
}
.rl-footer-credits a { color: var(--rl-accent); }
/* Der ausfuehrliche Text haengt am title-Attribut - die gepunktete Linie
   zeigt an, dass es dort mehr zu lesen gibt. */
.rl-credits {
    border-bottom: 1px dotted var(--rl-ink-soft);
    cursor: help;
}
.rl-credits:focus-visible { outline: 3px solid #ffb400; outline-offset: 2px; }

/* --- Neuigkeiten ------------------------------------------------------- */
.news-item { margin: 0 0 1.1em 0; }
.news-item h3, .news-item h4 { margin: 0 0 .15em 0; }
.news-date { margin: 0 0 .4em 0; font-size: .85em; opacity: .75; }
#news-box .news-item { padding-bottom: .6em; border-bottom: 1px solid rgba(128,128,128,.25); }
#news-box .news-item:last-of-type { border-bottom: 0; }
#news-list .news-item + .news-item { padding-top: .9em; border-top: 1px solid rgba(128,128,128,.25); }