/*
  Rahmen der Pflegeseiten (MasterPage.master). Neu gestaltet am 10.11.2026:
  Kopf mit Verlauf und Wappen, dunkle Seitenleiste mit SVG-Symbolen
  (clsGlobalFunctions.AddMenu), Inhalt als Karten, Eingabefelder und Knöpfe
  mit Rundungen. Die jQuery-UI-Dialoge sind seit 11.11.2026 native <dialog>
  (Pflege.css), ihre Gestaltung hier ist entfallen.

  Alle Klassennamen der Seiten sind geblieben (panelHeader, panelContent,
  TableCellInput…, tablerow …) - die Seiten selbst sind unverändert.

  Die Höhen: Kopf 76 px (72 + 4 px Linie), Leiste 240 px breit. ListSpiele,
  ListVereine und die Anmeldeseiten rechnen ihre Listenhöhe aus innerHeight
  minus einem festen Wert; mit dem neuen Kopf bleibt dabei etwas mehr Platz als
  vorher, nie weniger.

  Die öffentlichen Anzeigeseiten (IFrames auf www.wilsdruffer-fussball.de)
  benutzen ShowData.css und sind hiervon nicht betroffen.
*/

:root {
    --rot: #9D0500;
    --dunkelrot: #550000;
    --hellrot: #DD3A36;
    --rosa: #fbe9e8;
    --linie: #e3e7ec;
    --flaeche: #f3f5f8;
    --grau: #5b6470;
    --text: #1b1f24;
    --kopf: 76px;
    --leiste: 240px;
}

html {
    height: 100%;
    width: 100%;
}

body {
    margin: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    font-size: 14px;
    line-height: 1.45;
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    color: var(--text);
    background: var(--flaeche);
    overflow-x: hidden;
}

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

.page {
    padding: 0;
    margin: 0;
    width: 100%;
}

/* ---------------------------------------------------------------- Kopf */

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: var(--kopf);
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(90deg, var(--dunkelrot), var(--rot));
    border-bottom: 4px solid var(--hellrot);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}

.headerMarke {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    text-decoration: none;
    min-width: 0;
}

.headerLogo { height: 54px; width: auto; }

.headerText {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    white-space: nowrap;
}
.headerText small {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 400;
    color: #f6c9c7;
}

.headerLogin {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    font-size: 13px;
    color: #f6c9c7;
    text-align: right;
}
.headerLinks { display: flex; gap: 6px; }

a.linkHeader:link, a.linkHeader:visited {
    display: inline-block;
    padding: 3px 12px;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
}
a.linkHeader:hover, a.linkHeader:focus-visible {
    color: var(--rot);
    background: #fff;
    text-decoration: none;
}
a.linkHeader:active { color: var(--rot); }

/* ---------------------------------------------------------------- Seitenleiste */

.menu {
    position: fixed;
    top: var(--kopf);
    left: 0;
    bottom: 0;
    width: var(--leiste);
    padding: 16px 12px;
    /* Hell statt dunkelrot (Augustin, 10.11.2026: „wirkt ganz schön aggressiv“).
       Rot bleibt dem Kopf und dem aktiven Eintrag vorbehalten. */
    background: #fff;
    border-right: 1px solid var(--linie);
    overflow-y: auto;
}

/* Einträge aus clsGlobalFunctions.AddMenuItem: Symbol + Text */
a.menuLink {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
    padding: 10px 14px;
    color: #3a414b;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s;
}
a.menuLink .menuSymbol { color: #7a838f; }
a.menuLink:hover, a.menuLink:focus-visible {
    background: var(--flaeche);
    color: var(--rot);
}
a.menuLink:hover .menuSymbol, a.menuLink:focus-visible .menuSymbol { color: var(--rot); }
a.menuLink.aktiv {
    background: var(--rosa);
    color: var(--rot);
    border-left-color: var(--rot);
}
a.menuLink.aktiv .menuSymbol { color: var(--rot); }
.menuSymbol { display: inline-flex; }
.menuSymbol svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* frühere Menüklassen - nicht mehr erzeugt, für alte zwischengespeicherte Seiten */
a.linkMenu:link, a.linkMenu:visited, a.linkMenu:hover, a.linkMenu:active { color: #fff; text-decoration: none; }

/* ---------------------------------------------------------------- Inhalt */

.content {
    display: block;
    margin-top: var(--kopf);
    margin-left: var(--leiste);
    padding: 18px 24px 10px;
    min-width: 16em;
    overflow-y: auto;
}

a.linkInvisible { color: var(--rot); text-decoration: none; }
a.linkInvisibleRed { color: #c00000; text-decoration: none; }
a.linkInvisibleGreen { color: #1d7a36; text-decoration: none; }

/* Kästen: roter Kopf (Titel, weißes Plus-Symbol) und weißer Inhalt, zusammen eine Karte */
div.panelHeader {
    width: 100%;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(90deg, var(--rot), var(--hellrot));
}
div.panelHeader table { border-collapse: collapse; }

div.panelContent {
    width: 100%;
    background: #fff;
    border: 1px solid var(--linie);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .06);
}

td.panelHeaderTableCellImage,
td.panelHeaderTableCellText,
td.panelHeaderTableCellTextLower,
td.panelHeaderTableCellButtons {
    background: transparent;
    height: 40px;
    padding: 8px 12px;
    vertical-align: middle !important;
}
td.panelHeaderTableCellText {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}
td.panelHeaderTableCellTextLower { font-size: 16px; color: #fff; }
td.panelHeaderTableCellImage { width: 30px; }
td.panelHeaderTableCellText input[type=image] { display: block; cursor: pointer; }
td.panelHeaderTableCellText input[type=image]:hover { transform: scale(1.12); }

/* ---------------------------------------------------------------- Tabellen */

table.TableInput { width: 100%; }
tr.TableRowInput { width: auto; }
td.TableCellInputLabel { width: 150px; color: var(--grau); font-weight: 600; }
td.TableCellInputValue { width: auto; }

tr.tablerow, tr.alttablerow { transition: background .1s; }
tr.tablerow { background-color: #fff; }
tr.alttablerow { background-color: #f7f9fb; }
tr.tablerow:hover, tr.alttablerow:hover { background-color: var(--rosa); }
tr.tablerow td, tr.alttablerow td { border-bottom: 1px solid #eef1f4; }

td.TableCellWithBottomBorder,
td.TableCellWithBottomBorderRed,
td.TableCellWithBottomBorderGreen {
    border-bottom: 1px solid var(--linie);
}
td.TableCellWithBottomBorderRed { color: #c00000; }
td.TableCellWithBottomBorderGreen { color: #1d7a36; }

/* ---------------------------------------------------------------- Eingaben und Knöpfe */

input, select, textarea { box-sizing: border-box; font: inherit; }

input[type=text], input[type=password], input[type=email], input[type=search],
input[type=number], input[type=date], input[type=datetime-local], select, textarea {
    padding: 7px 10px;
    border: 1px solid #c9ced6;
    border-radius: 8px;
    background: #fff;
    color: var(--text);
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=search]:focus,
input[type=number]:focus, input[type=date]:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--hellrot);
    box-shadow: 0 0 0 3px rgba(221, 58, 54, .2);
}

select option { background-color: #fff; text-shadow: none; }

/* Filter in ListSpiele und ListVereine: Die Kästen haben dort eine feste Höhe
   (97 bzw. 48 px), und die Seite errechnet daraus die Höhe der Liste darunter.
   Mit den größeren Feldern oben passten die drei Filterzeilen nicht mehr hinein -
   „Mannschaft“ ragte in den nächsten Kasten (gesehen 10.11.2026). Hier deshalb
   kompakt; die feste Höhe bleibt, damit die Listenrechnung weiter stimmt. */
#cphContent_tblFilter td { padding: 1px 3px; line-height: 1.25; }
#cphContent_tblFilter input[type=text], #cphContent_tblFilter select {
    padding: 2px 8px;
    font-size: 13px;
    line-height: 1.25;
    border-radius: 6px;
}

input[type=submit], input[type=button] {
    min-height: 36px;
    padding: 6px 18px;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--rot);
    border: 1px solid var(--rot);
    border-radius: 8px;
    cursor: pointer;
}
input[type=submit]:hover, input[type=button]:hover {
    background: var(--dunkelrot);
    border-color: var(--dunkelrot);
}

hr { border: 0; border-top: 1px solid var(--linie); }

/* ---------------------------------------------------------------- Hinweise in Zellen */

.CellWithComment { position: relative; }
.CellComment {
    display: none;
    position: absolute;
    z-index: 100;
    top: 20px;
    left: 20px;
    padding: 6px 10px;
    font-size: 12px;
    font-style: normal;
    background: #fff;
    border: 1px solid var(--linie);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
}
.CellWithComment:hover span.CellComment { display: block; }

/* ---------------------------------------------------------------- Telefon und schmale Fenster
   Die Seitenleiste wird zur Leiste unter dem Kopf; der Inhalt darf dann im
   Ganzen scrollen (der Rahmen sperrt das sonst, siehe body im Master). */

@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) {
    :root { --kopf: 64px; }
    body { overflow-y: auto !important; }
    .header { padding: 0 12px; }
    .headerLogo { height: 44px; }
    .headerText { font-size: 17px; }
    .headerText small { display: none; }
    .headerName { display: none; }
    a.linkHeader:link, a.linkHeader:visited { padding: 2px 8px; font-size: 12px; white-space: nowrap; }
    .headerText { white-space: normal; }
    .menu {
        top: var(--kopf);
        bottom: auto;
        width: 100%;
        height: 56px;
        padding: 6px 8px;
        display: flex;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        z-index: 40;
    }
    .menu { border-right: 0; border-bottom: 1px solid var(--linie); }
    a.menuLink { margin: 0; padding: 8px 12px; font-size: 14px; white-space: nowrap;
                 border-left: 0; border-bottom: 3px solid transparent; border-radius: 8px 8px 0 0; }
    a.menuLink.aktiv { border-bottom-color: var(--rot); }
    .content { margin-left: 0; margin-top: calc(var(--kopf) + 56px); padding: 12px; }
}

/* Sehr schmal (11.11.2026): Beide Links bleiben - „Kennwort ändern“ war hier
   ausgeblendet, und die Anmeldeseite verlinkt es entgegen dem früheren Hinweis
   nicht. Untereinander, jeweils groß genug zum Antippen. */
@media (max-width: 480px) {
    .headerLinks { flex-direction: column; align-items: flex-end; gap: 2px; }
    a.linkHeader:link, a.linkHeader:visited { display: inline-flex; align-items: center; min-height: 28px; }
}

/* Telefon (11.11.2026): Kopf und Menü scrollen mit der Seite weg, statt 120 px
   des Bildschirms dauerhaft zu belegen - mit offener Tastatur blieb sonst kaum
   Platz. Das Menü zeigt am rechten Rand einen Verlauf: Es lässt sich seitwärts
   schieben, sobald nicht alle Einträge passen. */
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) {
    .header, .menu { position: absolute; }
    .menu {
        padding-right: 40px;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    }
    a.menuLink { display: inline-flex; align-items: center; min-height: 44px; }
    a.linkHeader:link, a.linkHeader:visited { min-height: 32px; display: inline-flex; align-items: center; }
}