/* FC Viktoria Heiden e.V. – Kino-Anmeldung
   Gestaltung in den Vereinsfarben Schwarz und Weiß.
   Das Schrägband des Wappens taucht als Trennelement wieder auf.
   Keine externen Schriften oder CDNs (DSGVO-freundlich, alles vom eigenen Webspace). */

:root {
    /* Vereinsfarben */
    --schwarz:     #0e0e0e;
    --schwarz-2:   #171717;
    --schwarz-3:   #1f1f1f;
    --weiss:       #ffffff;
    --grau:        #d8d8d8;
    --grau-2:      #9b9b9b;
    --linie:       rgba(255,255,255,.14);

    /* Status – bewusst zurückhaltend, damit Schwarz-Weiß führend bleibt */
    --gruen:       #3fa66c;
    --gelb:        #d2a03a;
    --rot:         #b8362a;

    --radius:      10px;
    --schrift:     "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--schrift);
    font-size: 17px;
    line-height: 1.6;
    color: var(--weiss);
    background: var(--schwarz);
    background-image: linear-gradient(180deg, #141414 0%, #0b0b0b 100%);
    background-attachment: fixed;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 20px 18px 64px; }

/* ---------- Vereinskopf ---------- */
.marke {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 2px 18px;
}
.marke img { height: 54px; width: auto; }
.marke span {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-size: 15px;
}

/* Schrägband nach dem Vorbild des Wappens */
.band {
    height: 8px;
    border-radius: 2px;
    background: repeating-linear-gradient(
        -45deg,
        var(--weiss) 0 10px,
        var(--schwarz) 10px 20px
    );
}

/* ---------- Kopfbereich ---------- */
.plakat {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: 0 18px 48px rgba(0,0,0,.7);
}

.hero { text-align: center; margin: 30px 0 8px; }

.hero h1 {
    margin: 0 0 6px;
    font-size: clamp(28px, 6vw, 42px);
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 800;
}

.hero p { margin: 0; color: var(--grau); }

.fakten {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 22px 0 6px;
}

.fakt {
    background: var(--weiss);
    color: var(--schwarz);
    border-radius: 999px;
    padding: 8px 18px;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .4px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------- Karten ---------- */
.karte {
    background: var(--schwarz-2);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 26px;
    margin-top: 26px;
}

.karte h2 {
    margin: 0 0 4px;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.karte .hinweis { margin: 0 0 22px; color: var(--grau-2); font-size: 15px; }

/* Links im Fließtext bleiben in den Vereinsfarben – Schaltflächen ausgenommen */
.karte a:not(.btn) {
    color: var(--weiss);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.karte a:not(.btn):hover { color: var(--grau); }

/* ---------- Formular ---------- */
.feld { margin-bottom: 18px; }
.reihe { display: flex; gap: 16px; flex-wrap: wrap; }
.reihe > .feld { flex: 1 1 220px; }

label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--grau);
}

input[type=text], input[type=email], input[type=tel], input[type=password],
select, textarea {
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    color: var(--weiss);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px;
    transition: border-color .15s, background .15s;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--weiss);
    background: rgba(255,255,255,.1);
}

textarea { min-height: 96px; resize: vertical; }

select option { color: #111; }

.checkbox {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 15px;
    color: var(--grau);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.checkbox input { margin-top: 5px; width: 18px; height: 18px; flex: none; accent-color: #fff; }

.hp { position: absolute; left: -9999px; }

/* ---------- Schaltflächen: weiß auf schwarz, wie das Wappen ---------- */
button, .btn {
    display: inline-block;
    padding: 14px 28px;
    font: inherit;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--schwarz);
    background: var(--weiss);
    border: 1px solid var(--weiss);
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s, transform .05s;
}

button:hover, .btn:hover { background: var(--grau); border-color: var(--grau); }
button:active { transform: translateY(1px); }

.btn-klein { padding: 7px 14px; font-size: 13px; letter-spacing: .4px; }

.btn-grau {
    background: transparent;
    color: var(--weiss);
    border-color: rgba(255,255,255,.35);
}
.btn-grau:hover { background: rgba(255,255,255,.12); border-color: var(--weiss); }

.btn-rot { background: var(--rot); border-color: var(--rot); color: var(--weiss); }
.btn-rot:hover { background: #cf3d2f; border-color: #cf3d2f; }

/* ---------- Meldungen ---------- */
.meldung {
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 16px;
    border-left: 5px solid;
    background: rgba(255,255,255,.06);
}
.meldung ul { margin: 8px 0 0; padding-left: 20px; }
.m-fehler  { border-color: var(--rot);   background: rgba(184,54,42,.14); }
.m-ok      { border-color: var(--gruen); background: rgba(63,166,108,.14); }
.m-info    { border-color: var(--weiss); }
.m-warn    { border-color: var(--gelb);  background: rgba(210,160,58,.14); }

/* ---------- Status / Zähler ---------- */
.plaetze {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    color: var(--grau);
    font-size: 15px;
}
.plaetze strong { color: var(--weiss); font-size: 19px; }

.balken {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    overflow: hidden;
    margin-top: 4px;
}
.balken span { display: block; height: 100%; background: var(--weiss); }

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
    border: 1px solid transparent;
}
.b-ok     { background: var(--weiss); color: var(--schwarz); }
.b-offen  { background: transparent; color: var(--weiss); border-color: rgba(255,255,255,.55); }
.b-warte  { background: rgba(255,255,255,.16); color: var(--grau); }
.b-storno { background: transparent; color: #f0a49a; border-color: rgba(184,54,42,.8); }

.code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: 1px;
}

/* ---------- Fußzeile ---------- */
footer {
    margin-top: 34px;
    text-align: center;
    font-size: 14px;
    color: var(--grau-2);
}
footer a { color: var(--grau); }
footer .band { margin-bottom: 18px; }

/* ---------- Verwaltung ---------- */
.admin-wrap { max-width: 1180px; }

.admin-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 0 14px;
    border-bottom: 1px solid var(--linie);
    margin-bottom: 24px;
}
.admin-kopf h1 {
    font-size: 21px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.admin-kopf h1 img { height: 38px; width: auto; }

.kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.kachel {
    background: var(--schwarz-2);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 16px 18px;
}
.kachel b { display: block; font-size: 28px; line-height: 1.2; white-space: nowrap; }
.kachel span { font-size: 12px; text-transform: uppercase; letter-spacing: .7px; color: var(--grau-2); }

.werkzeuge {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 18px;
}
.werkzeuge input[type=text] { width: auto; flex: 1 1 220px; }
.werkzeuge select { width: auto; }

.tabelle-scroll { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--linie); }

table { width: 100%; border-collapse: collapse; background: var(--schwarz-2); font-size: 15px; }
th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.08); vertical-align: top; }
th {
    background: var(--schwarz-3);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--grau-2);
    white-space: nowrap;
}
tbody tr:hover { background: rgba(255,255,255,.04); }
td a { color: var(--weiss); }
td.zahl { text-align: right; font-variant-numeric: tabular-nums; }
td.aktionen form {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: 170px;
}
td.aktionen .btn-klein { padding: 5px 8px; font-size: 11px; letter-spacing: .2px; }
/* E-Mail-Adressen dürfen umbrechen, damit die Tabelle nicht auseinanderläuft */
td.mail { word-break: break-word; max-width: 190px; }
.leer { padding: 40px; text-align: center; color: var(--grau-2); }

.login-box { max-width: 420px; margin: 10vh auto 0; }

/* ---------- Werkzeugkasten am Seitenende ---------- */
.werkzeugkasten {
    margin-top: 28px;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--schwarz-2);
    padding: 4px 18px;
}
.werkzeugkasten summary {
    cursor: pointer;
    padding: 12px 0;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-size: 13px;
    color: var(--grau-2);
}
.werkzeugkasten .werkzeuge {
    margin: 6px 0 18px;
    font-size: 14px;
    color: var(--grau);
}
.werkzeugkasten .werkzeuge span { flex: 1 1 260px; }
.werkzeugkasten input[type=text] { width: auto; flex: 0 0 150px; }
.werkzeugkasten .gefahr { border-top: 1px solid var(--linie); padding-top: 16px; }

/* ---------- Bezahlen / Girocode ---------- */
.zahlbox {
    margin: 24px 0 6px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--radius);
    background: rgba(255,255,255,.04);
}

.zahlbox h3 {
    margin: 0 0 16px;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.zahl-inhalt {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.girocode { margin: 0; flex: 0 0 auto; text-align: center; }
.girocode svg,
.girocode img {
    display: block;
    width: 220px;
    height: auto;
    border-radius: 6px;
    background: #fff;
    padding: 8px;
}
.girocode figcaption {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--grau-2);
}

.kontodaten {
    flex: 1 1 260px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    margin: 0;
    font-size: 15px;
}
.kontodaten dt {
    color: var(--grau-2);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .5px;
    padding-top: 3px;
}
.kontodaten dd { margin: 0; font-weight: 700; word-break: break-word; }

.zahl-fuss { margin: 18px 0 0; font-size: 14px; line-height: 1.5; color: var(--grau); }

.kachel-warnung { border-color: rgba(210,160,58,.6); }
.kachel-warnung b { color: var(--gelb); }
small.rueckzahlung { color: var(--gelb); }

tr.ueberfaellig td { background: rgba(210,160,58,.10); }
tr.ueberfaellig small { color: var(--gelb); }

@media (max-width: 640px) {
    body { font-size: 16px; }
    .karte { padding: 20px 16px; }
    .wrap { padding: 14px 12px 48px; }
    .marke img { height: 44px; }
}

@media (max-width: 520px) {
    .zahl-inhalt { gap: 18px; }
    .girocode { margin: 0 auto; }
}

@media print {
    body { background: #fff; color: #000; }
    .werkzeuge, .aktionen, .admin-kopf .btn, button, .band { display: none !important; }
    .karte, .kachel, table { background: #fff; border-color: #bbb; color: #000; }
    th { background: #eee; color: #000; }
    td a { color: #000; }
}