/* 01-login-register-content.css — Teil der Aufteilung von style.css (2026-08-10).
   Urspruenglich Zeilen 782-1225 der einen Datei. Login/Register, Haupt-Content, Profil-Content-Box, Tabellen allgemein.
   Diese und alle anderen css/*.css-Dateien werden auf JEDER Seite
   gemeinsam geladen, in fester Reihenfolge - die Kaskade ist exakt
   dieselbe wie vorher, nur auf mehrere Dateien verteilt. */

/* === Login & Register === */
.login, .register {
    width: min(100%, 420px);
    background: var(--bg-flaeche);
    color: var(--text-color);
    box-shadow: var(--card-shadow);
    margin: 24px auto;
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
    overflow: hidden;
}

.loginHeader {
    height: var(--navbar-height);
    background: var(--background-color);
    display: flex;
    align-items: center;
    padding: 0 1rem;
    justify-content: flex-start;
}

a.logoLogin, a.TigersLogoLogin {
    text-decoration: none;
    color: var(--text-color);
}

a.logoLogin {
    font-size: 1.5rem;
}

a.TigersLogoLogin {
    margin-left: 0;
    max-height: var(--navbar-height);
}

.TigersLogoLogin img {
    max-height: var(--navbar-height);
}

.login h1, .register h1 {
    text-align: center;
    color: var(--border-color);
    font-size: 22px;
    padding: 16px 0;
    margin: 0;
    border-bottom: 1px solid var(--border-light);
}

.login form, .register form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 16px;
}

.login form label, .register form label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--primary-blue);
    color: var(--white);
    border-radius: var(--radius-small);
}

.login form input[type="password"],
.login form input[type="text"],
.register form input[type="password"],
.register form input[type="text"],
.register form input[type="email"] {
    width: 100%;
    height: 48px;
    border: 1px solid var(--border-light);
    padding: 0 14px;
    background: var(--bg-flaeche);
    color: var(--text-input);
    border-radius: var(--radius-small);
}

.login form input[type="submit"],
.register form input[type="submit"] {
    width: 100%;
    padding: 14px;
    margin-top: 10px;
    background: var(--primary-blue);
    border: 0;
    cursor: pointer;
    font-weight: 700;
    color: var(--white);
    transition: background-color .2s;
    border-radius: 10px;
}

.login form input[type="submit"]:hover,
.register form input[type="submit"] {
    background: var(--primary-blue-hover);
}


/* =========================
   Layout: Content
   ========================= */

/* HINWEIS: Diese alte Definition (50%) wurde auskommentiert, da sie 
   unten durch die 90%-Definition überschrieben wurde. */
/* .content {
    width: 50%;
    margin: 0 auto;
    padding: 0 1rem 1.25rem;
    background: var(--background-color); 
    color: var(--text-color);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    box-shadow: var(--shadow-strong);
}
*/

.content h2 {
    margin: 0;
    padding: 1.25rem 0;
    font-size: clamp(1.25rem, 2.5vw + .5rem, 2rem);
    border-bottom: 1px solid var(--border-color);
    color: var(--border-color);
}

/* Innere Boxen in .content */
.content>p, .content>div {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--darker-background);
    border-radius: .75em;
    border: 1px solid var(--border-light);
    box-shadow: none;
}


/* === Haupt-Content Definition (Aktiv: 90%) === */
.content {
    width: 90%;
    margin: 30px auto;
    background-color: var(--background-color);
    border-radius: 10px;
    padding: 20px;
    box-shadow: var(--shadow-strong);
    border: 1px solid var(--border-light);
    box-sizing: border-box; /* Doppelt hält besser (auch global gesetzt) */
}

.content h1 {
    text-align: center;
    color: var(--border-color); 
    margin-bottom: 25px;
    letter-spacing: 1px;
    font-size: 1.8em;
}


/* === Profil Content Box (User bestätigt Nutzung) === */
.contentprofil {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto 1.4rem;
    background-color: var(--background-color);
    border-radius: 10px;
    padding: 20px;
    box-shadow: var(--shadow-strong);
    border: 1px solid var(--border-light);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    box-sizing: border-box;
}

.contentprofil h2 {
    margin: 0;
    padding: 1.25rem 0;
    font-size: clamp(1.25rem, 2.5vw + .5rem, 2rem);
    border-bottom: 1px solid var(--border-color);
    color: var(--border-color);
}

.contentprofil>p, .contentprofil>div {
    margin: 0;
    padding: 1rem;
    background: var(--darker-background);
    border-radius: .75em;
    border: 1px solid var(--border-light);
    flex: 1 1 calc(30% - 0.5rem);
    min-width: 260px;
    box-sizing: border-box;
}

.profil {
    overflow: hidden;
}

.profil table {
    width: 100%;
    table-layout: fixed;
}

.profil td {
    color: var(--text-color);
    padding: 3px 6px 3px 0;
    word-break: break-word;
}

.profil td:first-child {
    width: 40%;
    white-space: nowrap;
}

.profil td:last-child {
    width: 60%;
}

.profil input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Links */
a {
    color: var(--text-color);
    text-decoration: none;
}

a:visited {
    color: var(--text-color);
}

a:hover,
a:focus-visible {
    color: var(--primary-blue);
    text-decoration: none;
}

/* Listen neutralisieren */
.content li {
    list-style: none;
}

/* === Tabellen Allgemein === */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.Tabelle, .TabelleFK {
    min-width: 640px;
    width: 100%;
    border-collapse: collapse;
}

.Tabelle tr, .TabelleFK tr {
    height: 1rem;
}

.Tabelle td, .Tabelle th,
.TabelleFK td, .TabelleFK th {
    padding: 12px;
}

/* Einfache Content-Tabellen */
.content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 25px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.content th {
    background-color: var(--tigers-yellow);
    color: var(--tigers-black);
    text-align: left;
    padding: 10px;
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
}

.content td {
    padding: 10px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-color);
}

.content tr:last-child td {
    border-bottom: none;
}

/* Input Fields inside Content */
.content input[type="text"],
.content input[type="number"],
.content input[type="date"],
.content select {
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background-color: var(--bg-flaeche);
    color: var(--text-input);
    box-sizing: border-box;
}

.content input[type="text"]:read-only {
    background-color: var(--bg-input-readonly);
    color: var(--text-placeholder);
    border-color: var(--border-light);
}

.content select option {
    background-color: var(--background-color);
    color: var(--text-color);
}

.content input[type="submit"] {
    background-color: var(--tigers-yellow);
    color: var(--tigers-black);
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.content input[type="submit"]:hover {
    background-color: var(--tigers-yellow-hover);
}

.content hr {
    border: none;
    border-top: 2px solid var(--tigers-yellow);
    margin: 20px 0;
}

p, em {
    color: var(--text-color);
}

/* Responsive Table Simple (Breakpoint an Menue-Umbruch <=1024px angeglichen) */
@media (max-width: 1024px) {
    .content table, .content tr, .content td, .content th {
        display: block;
        width: 100%;
    }

    .content tr {
        margin-bottom: 15px;
        border: 1px solid var(--border-light);
        border-radius: 8px;
        background-color: var(--background-color);
        padding: 10px;
    }

    .content th {
        display: none;
    }

    .content td {
        border: none;
        padding: 6px 0;
    }

    .content td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-weight: bold;
        color: var(--border-color);
        margin-bottom: 3px;
    }

    .content td[data-label=""]::before {
        display: none;
    }
}

/* Wochensicht: Datumszeile ("11.08.") in den Tages-Koepfen steht im <th> auf
   gelbem Grund. Der <th> selbst bekommt oben (.hb-grid th) fest
   --tigers-black, aber das `<span>` mit dem Datum (hb-shared.php,
   hb_render_halle_woche) hat keine eigene Farbregel und faellt auf die
   globale `* { color: var(--text-color) }` zurueck - im Dunkelmodus (dort
   ist --text-color hell) weiss auf Gelb, praktisch unlesbar. Fest
   verdrahtet statt inherit/--text-color, damit das Datum auch bei
   kuenftigen Farbaenderungen sicher dunkel bleibt. */
.content.hb .hb-grid th span {
    color: var(--tigers-black);
}

/* Legende unter den Rastern: <s>Entfaellt</s> steht in einem <p>, nicht in
   der Tabelle. */
/* Dashboard: Namens-Chips der Trainer-Zuordnung, eigene Farbe statt der
   geerbten Tabellenfarbe. */
.content.hb .hb-grid td span.hb-chip,
.content.hb .hb-chips span.hb-chip {
    color: rgb(var(--ink));
}

.content.hb .hb-card label {
    color: rgb(var(--ink));
}

/* Hallenbelegung-Dashboard: Hinweistext der Import-Karte (Format-Beispiel mit
   <code>/<strong>/<em> darin). Bewusst auf .hb-dashboard begrenzt - ohne das
   trifft die Regel auch die Datumszeile im <th> der Wochensicht und faerbt
   sie weiss auf Gelb. */
.content.hb .hb-dashboard .hb-card span:not([class]) {
    color: rgb(var(--ink));
}

/* AdminNews: Rollen-Checkboxen unter "Sichtbar fuer" (klassenlose <label>).
   .ad-rolle-chk im dauerhaft dunklen Rollen-Panel behaelt sein var(--white). */
.content.ad .ad-field label:not([class]) {
    color: rgb(var(--ink));
}

/* Admin-Einstellungen: Ueberschrift der Freibetrags-Bloecke. */
.content.ad .frb-titel {
    color: rgb(var(--ink));
}

/* Profil: Prozentwert im Fortschritts-Ring. Der Ring/Badge ist in BEIDEN
   Themes dunkel, deshalb fest helle Schrift statt --ink. */
.content.pf .progress-badge span {
    color: var(--white);
}

/* Profil: Dateigroesse unter dem Profilbild steht auf der weissen
   Upload-Flaeche - dort braucht es dunkle Schrift, nicht die helle
   Glasschrift. */
.content.pf .pb-filesize {
    color: var(--text-placeholder);
}

/* Zu schwache Sekundaerfarben aus der hellen Fassung anheben. */
/* --ink statt festem Weiss (2026-08-23): diese Regel schlug per hoeherer
   Spezifitaet die korrekte Token-Regel in 10-abrechnung.css und erzwang im
   Hellmodus weisse Schrift auf heller Flaeche - 1,19:1. */
.content.abr-glass .km-unit { color: rgba(var(--ink) / 0.75); }   /* 0,60 ergab nur 4,13:1 (2026-08-23) */
.content.abr-glass .fk2-wd,
.content.abr-glass .sn2-wd { color: rgba(var(--ink) / 0.70); }