/* ==========================================================================
   responsive.css - Layout fuer Handy (Standard) und PC (ab 900px)

   Farben: jedes Team bekommt in index.php automatisch einen eigenen Farbton
   (--farbton, 0-359). Wer ein Team gezielt faerben will, legt
   themes/team_<TEAM-ID>.css an und ueberschreibt dort einzelne Variablen,
   siehe themes/team_beispiel.css.
   ========================================================================== */

:root {
    --farbton: 220;                                          /* wird pro Team gesetzt */
    --farbe-haupt:        hsl(var(--farbton) 70% 36%);       /* Kopfzeile, Menue */
    --farbe-haupt-dunkel: hsl(var(--farbton) 70% 26%);       /* Rahmen, Hover */
    --farbe-haupt-hell:   hsl(var(--farbton) 60% 95%);       /* Flaechen, Tabellenzeilen */
    --farbe-akzent:       hsl(var(--farbton) 75% 45%);       /* Links im Inhalt, Buttons */
    --farbe-text:         #1b1b1b;
    --farbe-hintergrund:  #ffffff;
    --farbe-auf-haupt:    #ffffff;                           /* Schrift auf Hauptfarbe */
    --farbe-fehler:       #c00000;
    --abstand:            12px;
    --menue-hoehe:        48px;                              /* Mindest-Tippflaeche */
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    color: var(--farbe-text);
    background: var(--farbe-hintergrund);
    font-family: "Calibri", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.4;
}

img, video { max-width: 100%; height: auto; }

/* ---------- Kopfzeile ---------- */
.kopf { background: var(--farbe-haupt); color: var(--farbe-auf-haupt); }

.kopf-leiste {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand);
    min-height: var(--menue-hoehe);
    padding: 8px var(--abstand);
    cursor: pointer;
    user-select: none;
}
.kopf-datum  { flex: 0 0 auto; font-size: .85rem; opacity: .9; }
.kopf-titel  { flex: 1 1 auto; text-align: center; font-size: 1.15rem; font-weight: 600; }
.kopf-logo   { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }

.logo         { height: 34px; width: auto; }
.logo-gross   { display: none; }
.menue-symbol { font-size: 1.6rem; line-height: 1; }

/* ---------- Navigation (Handy: aufklappbar, ohne JavaScript) ---------- */
.menue-schalter {          /* Checkbox unsichtbar, aber fuer Screenreader/Tastatur da */
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
}
.menue-schalter:focus-visible ~ nav { outline: 3px solid var(--farbe-akzent); }

nav { display: none; background: var(--farbe-haupt-dunkel); }
.menue-schalter:checked ~ nav { display: block; }

nav ul { margin: 0; padding: 0; list-style: none; }
nav li { border-top: 1px solid rgb(255 255 255 / .25); }
nav a {
    display: block;
    padding: 14px var(--abstand);
    min-height: var(--menue-hoehe);
    color: var(--farbe-auf-haupt);
    text-decoration: none;
}
nav a:hover, nav a:focus-visible { background: var(--farbe-haupt); text-decoration: underline; }

/* ---------- Inhalt ---------- */
.inhalt {
    padding: var(--abstand);
    max-width: 1400px;
    margin: 0 auto;
    overflow-x: auto;      /* breite Tabellen scrollen im Inhalt, nicht die ganze Seite */
}
/* Innenbox: breite Tabellen scrollen von links (nichts wird links abgeschnitten),
   schmaler Inhalt bleibt zentriert, Fliesstext bricht normal um */
.inhalt-innen { width: fit-content; min-width: 100%; }
.inhalt a:link, .inhalt a:visited { color: var(--farbe-akzent); }
.inhalt a:hover, .inhalt a:active { text-decoration: underline; }
.inhalt hr { border: 0; border-top: 1px solid var(--farbe-haupt-hell); margin: 1em 0; }

.fehler { color: var(--farbe-fehler); text-align: center; font-weight: 600; }
.startfoto { width: 100%; max-width: 900px; }

/* Formularfelder: auf dem Handy volle Breite, 16px gegen automatisches Zoomen (iOS) */
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="date"], input[type="submit"], select, textarea, button {
    font: inherit;
    font-size: 16px;
    max-width: 100%;
    min-height: 40px;
    margin-bottom: 8px;
}
input[type="text"], input[type="password"], input[type="email"] { width: min(100%, 260px); display: block; }
input[type="submit"], button {
    padding: 6px 14px;
    background: var(--farbe-haupt-hell);
    color: var(--farbe-text);
    border: 1px solid var(--farbe-haupt);
    border-radius: 6px;
    cursor: pointer;
}
input[type="submit"]:hover, button:hover { background: var(--farbe-akzent); color: var(--farbe-auf-haupt); }
input[type="submit"] { width: min(100%, 266px); display: block; }

/* Tabellen: Altseiten schreiben viele Tabellen direkt - sie duerfen nie breiter als der Bildschirm werden */
.inhalt table { max-width: 100%; border-collapse: collapse; }
.inhalt td, .inhalt th { padding: 4px 6px; }

/* ---------- Uebersicht (Spieler x Termine) ---------- */
.uebersicht { margin: 0; }
.uebersicht td { padding: 6px 10px; }
.uebersicht td:first-child {          /* Namensspalte bleibt beim Scrollen stehen */
    position: sticky; left: 0; z-index: 1; white-space: nowrap;
}
.uebersicht td:first-child:not([bgcolor]) { background: #fff; }
.uebersicht select { min-width: 5.5em; margin: 0; }
input[type="image"] { width: 28px; min-height: 0; margin: 0 0 0 4px; }

/* ---------- Neue Termine: Monatskalender (KW + Mo-So = 8 Spalten) ---------- */
.kalender {
    width: 100%; max-width: 640px;
    table-layout: fixed;              /* 8 gleich schmale Spalten, nie breiter als der Bildschirm */
    margin: 12px auto;
}
.kalender td { padding: 2px; text-align: center; vertical-align: top; }
.kalender td:first-child { width: 30px; }            /* KW-Spalte schmal */
.kalender font { font-family: inherit !important; font-size: 13px !important; }
.kalender select {
    display: block; width: 100%; min-width: 0; min-height: 40px;
    margin: 2px 0 0; padding: 0;
    font-size: 16px;                  /* 16px: Handy zoomt beim Antippen nicht */
    text-align: center; text-align-last: center;
    -webkit-appearance: none; appearance: none;   /* ohne Pfeil -> mehr Platz im Feld */
    border: 1px solid var(--farbe-haupt); border-radius: 6px; background: #fff;
}
.eintragen-knopf { width: min(100%, 260px); min-height: 48px; margin: 12px auto; display: block;
    background: var(--farbe-haupt); color: var(--farbe-auf-haupt); font-weight: 600; }
.inhalt textarea { width: min(100%, 320px); }

/* ---------- Anmeldung ---------- */
.login-box {
    width: min(100%, 400px);
    margin: 16px auto;
    padding: 18px;
    border: 1px solid var(--farbe-haupt);
    border-radius: 12px;
    background: var(--farbe-haupt-hell);
}
.login-box table { width: 100%; }
.login-box td { padding: 0; }
.login-box input[type="text"], .login-box input[type="password"], .login-box input[type="submit"] {
    width: 100%; max-width: none; min-height: 48px; margin-bottom: 12px;
}
.login-box input[type="submit"] { background: var(--farbe-haupt); color: var(--farbe-auf-haupt); font-weight: 600; }

/* ---------- Anwesenheit: ein Termin = eine Karte ---------- */
.termin {
    width: 100%; max-width: 640px;
    margin: 18px auto;
    border-collapse: separate; border-spacing: 0;
    border: 1px solid var(--farbe-haupt);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 4px rgb(0 0 0 / .15);
}
.termin td { padding: 8px 14px; }
.termin-kopf {
    background: var(--farbe-haupt-hell);
    border-bottom: 1px solid var(--farbe-haupt);
    padding: 14px; text-align: center; line-height: 1.7;
}
.termin td.z1 { background: var(--farbe-haupt-hell); }
.termin td.name { width: 50%; }

.datum-knopf {
    width: auto; min-width: 10em; padding: 8px 20px;
    font-size: 1.1rem; font-weight: 700;
    background: #fff; border: 2px solid var(--farbe-haupt);
}
.datum-knopf:hover { background: var(--farbe-haupt); color: var(--farbe-auf-haupt); }

/* Zu-/Absage: Farben unabhaengig vom Teamfarbton */
.wert-knopf { width: auto; min-width: 96px; margin: 0; font-weight: 600; }
.wert-knopf.w-ja         { background: #e3f4e6; border-color: #2e7d32; color: #1b5e20; }
.wert-knopf.w-nein       { background: #fbe4e4; border-color: #c62828; color: #8e1b1b; }
.wert-knopf.w-vielleicht { background: #fff4d6; border-color: #b7860b; color: #7a5a00; }
.wert-knopf.w-offen      { background: #eee;    border-color: #888;    color: #333; }

td.zahl { padding-top: 4px; padding-bottom: 4px; font-weight: 600; }
td.zahl.w-ja   { color: #1b5e20; }
td.zahl.w-nein { color: #8e1b1b; }
td.zahl.w-vielleicht { color: #7a5a00; }

/* ---------- Tablet/PC ab 900px: Menue als Leiste, Logo gross ---------- */
@media (min-width: 900px) {
    .kopf-datum   { font-size: 1rem; }
    .kopf-titel   { font-size: 1.6rem; }
    .logo         { height: 52px; }
    .logo-gross   { display: block; }
    .logo-klein   { display: none; }
    .menue-symbol { display: none; }
    .kopf-leiste  { cursor: default; padding: 10px 20px; }

    nav, .menue-schalter:checked ~ nav { display: block; }
    nav ul { display: flex; flex-wrap: wrap; padding: 0 12px; }
    nav li { border: 0; }
    nav a  { padding: 14px 16px; }

    .inhalt { padding: 20px; }
    input[type="text"], input[type="password"], input[type="email"] { width: 260px; }
}

/* Druck: ohne Menue */
@media print {
    nav, .menue-symbol { display: none !important; }
    .kopf { background: none; color: #000; }
}