/* =========================================================
   WM-Tipprunde – Styling (Scoreboard-Look)
   ========================================================= */

:root {
    --rasen:      #d40000;   /* Akzent: Rot (Buttons, Links) */
    --rasen-dunkel:#a30000;  /* dunkleres Rot (Hover) */
    --schwarz:    #1c1c1c;   /* Schwarz (Kopf, Topf) */
    --gold:       #ffcc00;   /* Gold (Topf-Summe, aktiver Menüpunkt) */
    --tinte:      #1c1c1c;   /* Text */
    --grau:       #6b6b6b;   /* gedämpfter Text */
    --linie:      #e5e3dc;   /* Trennlinien */
    --papier:     #f6f5f1;   /* Hintergrund */
    --karte:      #ffffff;
    --geld:       #b91c1c;   /* Kosten (rot) */
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--tinte);
    background:
        radial-gradient(circle at 50% -10%, rgba(255,204,0,.16), transparent 60%),
        var(--papier);
    line-height: 1.5;
}

.score, .score-input, .topf-summe, .spieler-summe-zahl, .betrag {
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

/* ---------- Kopf ---------- */
.kopf {
    background: var(--schwarz);
    color: #fff;
    position: relative;
}
.kopf::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: linear-gradient(90deg, #000 0 33.33%, #d40000 33.33% 66.66%, #ffcc00 66.66% 100%);
}
.kopf-inner {
    max-width: 880px; margin: 0 auto; padding: 14px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap;
}
.kopf-titel { font-weight: 800; font-size: 1.1rem; letter-spacing: .2px; display: flex; align-items: center; gap: 8px; }
.kopf-flagge { width: 28px; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.3); }
.ball { font-size: 1.2rem; }
.nav { display: flex; gap: 6px; }
.nav a {
    color: #ffffffcc; text-decoration: none; padding: 6px 12px;
    border-radius: 999px; font-weight: 600; font-size: .92rem;
}
.nav a:hover { background: #ffffff22; color: #fff; }
.nav a.aktiv { background: var(--gold); color: var(--schwarz); }

/* ---------- Layout ---------- */
.inhalt { max-width: 880px; margin: 0 auto; padding: 26px 20px 60px; }
.fuss { max-width: 880px; margin: 0 auto; padding: 0 20px 40px; color: var(--grau); font-size: .85rem; text-align: center; }

/* ---------- Topf (Signature-Element) ---------- */
.topf {
    background: var(--tinte);
    color: #fff;
    border-radius: 16px;
    padding: 26px 24px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(15,23,42,.18);
    position: relative; overflow: hidden;
}
.topf::before {
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(90deg, #ffffff05 0 40px, #ffffff00 40px 80px);
}
.topf-label { text-transform: uppercase; letter-spacing: 2px; font-size: .72rem; color: #ffffff99; }
.topf-summe { font-size: 3rem; font-weight: 800; line-height: 1.1; margin: 4px 0; color: var(--gold); }
.topf-meta { color: #ffffffaa; font-size: .85rem; }

/* ---------- Deutschland-Flagge auf der Startseite ---------- */
.flagge-hero { text-align: center; margin: 4px 0 22px; }
.flagge-hero img { width: 116px; height: auto; border-radius: 8px; box-shadow: 0 6px 18px rgba(28,28,28,.18), 0 0 0 1px rgba(28,28,28,.10); }
.flagge-hero .untertitel { margin: 10px 0 0; font-weight: 800; letter-spacing: .5px; color: var(--schwarz); font-size: 1.05rem; }

/* ---------- Tabelle ---------- */
.tabelle { width: 100%; border-collapse: collapse; background: var(--karte); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.tabelle th, .tabelle td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--linie); }
.tabelle thead th { background: #f8fafc; font-size: .74rem; text-transform: uppercase; letter-spacing: .6px; color: var(--grau); }
.tabelle tbody tr:last-child td { border-bottom: none; }
.tabelle tbody tr:hover { background: #f8fafc; }
.zahl { text-align: right; white-space: nowrap; }
.rang { width: 2.4rem; color: var(--grau); font-weight: 700; }
.name { font-weight: 600; }
.betrag { font-weight: 700; color: var(--geld); }
.score { font-weight: 600; }
.detail-spalte { text-align: right; width: 1%; }
.detail-link { color: var(--rasen); text-decoration: none; font-weight: 600; white-space: nowrap; }
.detail-link:hover { text-decoration: underline; }
.kein-tipp { display: inline-block; margin-left: 6px; font-size: .68rem; color: var(--gold); border: 1px solid var(--gold); border-radius: 6px; padding: 0 5px; vertical-align: middle; }

/* ---------- Kosten-Legende ---------- */
.legende { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; }
.legende-titel { font-size: .8rem; font-weight: 700; color: var(--grau); text-transform: uppercase; letter-spacing: .5px; margin-right: 2px; }
.staffel { display: inline-block; background: var(--karte); border: 1px solid var(--linie); border-radius: 999px; padding: 4px 11px; font-size: .82rem; font-weight: 600; color: var(--tinte); }
.wertung { display: inline-block; background: #f1f5f9; border-radius: 6px; padding: 2px 8px; font-size: .8rem; font-weight: 600; color: var(--grau); }

/* ---------- Balkendiagramm (Kosten im Vergleich, waagerecht) ---------- */
.diagramm-karte { background: var(--karte); border-radius: 14px; box-shadow: 0 1px 3px rgba(28,28,28,.06); padding: 20px 18px; margin-top: 24px; }
.diagramm-titel { font-size: .95rem; font-weight: 800; margin: 0 0 16px; }
.balken-liste { display: flex; flex-direction: column; gap: 9px; }
.balken-zeile { display: flex; align-items: center; gap: 10px; }
.balken-name { flex: 0 0 76px; font-size: .82rem; font-weight: 600; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.balken-spur { flex: 1 1 auto; height: 18px; background: #f0eee7; border-radius: 6px; overflow: hidden; }
.balken-fuell { height: 100%; min-width: 3px; background: var(--rasen); border-radius: 6px; }
.balken-wert { flex: 0 0 58px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; font-size: .76rem; font-weight: 700; color: var(--geld); text-align: right; white-space: nowrap; }
.flagge { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; vertical-align: -3px; margin-right: 5px; box-shadow: 0 0 0 1px rgba(28,28,28,.12); }

/* Team zweizeilig: Kürzel oben, Flagge darunter */
.team { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; vertical-align: middle; line-height: 1.1; }
.team-abk { font-weight: 700; font-size: .9rem; }
.team .flagge { margin: 0; width: 30px; height: 21px; }
.spiel-paar { display: inline-flex; align-items: center; gap: 10px; }
.spiel-paar .vs { color: var(--grau); font-weight: 700; }
.tabelle tr.gruppe td { background: #faf9f5; font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .6px; color: var(--grau); }

/* Ausklappbare Wertung (auf dem Handy) */
.aufklapp { display: none; float: right; color: var(--grau); font-weight: 700; transition: transform .15s ease; }
.posten-zeile.auf .aufklapp { transform: rotate(90deg); }
.wertung-zeile td { background: #faf9f5; color: var(--grau); font-size: .85rem; }
.tipp-hinweis { display: none; color: var(--grau); font-size: .82rem; margin: 10px 2px 0; }
@media (min-width: 561px) { .wertung-zeile { display: none !important; } }

/* Dezente Zeilenfarben nach Wertung (Detailseite) */
.posten-zeile.wert-exakt     td { background: #e8f6ec; }
.posten-zeile.wert-differenz td { background: #fbf3d6; }
.posten-zeile.wert-tendenz   td { background: #fbeacf; }
.posten-zeile.wert-falsch    td { background: #f8e1e1; }
.posten-zeile.wert-kein_tipp td { background: #ececec; }
.offen-text { color: var(--grau); font-size: .82rem; }
.posten-zeile.offen td { background: #fff; }
@media (max-width: 560px) { .posten-zeile.offen { cursor: default; } }

/* Reaktionen (Emojis auf Tipps) */
.reaktion-zeile td { background: #fbfbf9; padding-top: 8px; padding-bottom: 8px; }
.reaktionen { display: flex; gap: 8px; flex-wrap: wrap; }
.reaktion-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linie); background: #fff; border-radius: 999px; padding: 5px 11px; cursor: pointer; font: inherit; font-size: .9rem; line-height: 1; transition: background .12s ease, border-color .12s ease, transform .05s ease; }
.reaktion-btn:hover { background: #f3f1ea; }
.reaktion-btn:active { transform: scale(.96); }
.reaktion-btn .re-emoji { font-size: 1.1rem; }
.reaktion-btn .re-zahl { font-weight: 700; color: var(--grau); min-width: 8px; text-align: center; }
.reaktion-btn.aktiv { background: #fff7df; border-color: var(--gold); }
.reaktion-btn.aktiv .re-zahl { color: var(--tinte); }

/* Kopf-Knöpfe (Bild ändern / Statistik) */
.kopf-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }

/* Statistik-Diagramm: Kosten nach Wertung (waagerecht) */
.stat-zeile { margin-bottom: 12px; }
.stat-kopf { display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; margin-bottom: 5px; }
.stat-label { font-weight: 600; }
.stat-wert { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--geld); white-space: nowrap; }
.stat-spur { height: 16px; background: #f0eee7; border-radius: 6px; overflow: hidden; }
.stat-fuell { height: 100%; min-width: 3px; border-radius: 6px; }
.kat-exakt     { background: #4caf7d; }
.kat-differenz { background: #d9a800; }
.kat-tendenz   { background: #e08e3c; }
.kat-falsch    { background: #cf5757; }
.kat-kein_tipp { background: #9aa0a6; }

/* ---------- Spieler-Detail ---------- */
.zurueck { display: inline-block; margin-bottom: 16px; color: var(--rasen); text-decoration: none; font-weight: 600; }
.zurueck:hover { text-decoration: underline; }
.spieler-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.spieler-kopf h1 { margin: 0; font-size: 1.7rem; }
.spieler-summe { text-align: right; }
.spieler-summe-zahl { display: block; font-size: 1.8rem; font-weight: 800; color: var(--geld); }
.spieler-summe-label { font-size: .82rem; color: var(--grau); }

/* ---------- Profilbilder ---------- */
.spieler-kopf-links { display: flex; align-items: center; gap: 14px; }
.spieler-kopf-links h1 { margin: 0 0 6px; }
.spieler-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--gold); }
.spieler-avatar.platzhalter { display: flex; align-items: center; justify-content: center; background: var(--schwarz); color: #fff; font-weight: 800; font-size: 2.1rem; }
.zelle-spieler { display: flex; align-items: center; gap: 9px; }
.mini-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: 0 0 28px; box-shadow: 0 0 0 1px var(--linie); }
.mini-avatar.platzhalter { display: flex; align-items: center; justify-content: center; background: var(--schwarz); color: #fff; font-weight: 700; font-size: .8rem; }

.bild-panel .card-text { margin-top: 0; }
.crop-bereich { margin: 12px 0; }
.crop-buehne { max-width: 320px; margin: 0 auto; }
#crop-bild { display: block; max-width: 100%; }
.crop-zoom { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.crop-zoom .btn-klein { min-width: 40px; font-size: 1.1rem; line-height: 1; }
.crop-hinweis { color: var(--grau); font-size: .82rem; }
.bild-panel .cropper-view-box, .bild-panel .cropper-face { border-radius: 50%; }
.form-knoepfe { margin-top: 6px; }

/* ---------- PayPal-Bezahlen-Button ---------- */
.bezahlen-box { margin: 0 0 22px; }
.paypal-btn { display: inline-flex; align-items: center; gap: 10px; background: #ffc439; color: #253b80; font-weight: 700; text-decoration: none; padding: 12px 22px; border-radius: 999px; box-shadow: 0 2px 6px rgba(28,28,28,.18); transition: background .15s ease, transform .05s ease; }
.paypal-btn:hover { background: #f0b72e; }
.paypal-btn:active { transform: translateY(1px); }
.pp-wort { font-family: Arial, Helvetica, sans-serif; font-style: italic; font-weight: 800; font-size: 1.12rem; letter-spacing: -.5px; }
.pp-wort .pp1 { color: #253b80; }
.pp-wort .pp2 { color: #179bd7; }
.pp-text { font-size: .98rem; }
.bezahlen-hinweis { color: var(--grau); font-size: .82rem; margin: 8px 2px 0; }

/* ---------- Ergebnis-Eingabe (Liste, zwei Torfelder) ---------- */
.ergebnis-liste { display: flex; flex-direction: column; gap: 8px; }
.ergebnis-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid var(--linie); border-radius: 9px; }
.tor-eingabe { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.tor-doppel { font-weight: 800; color: var(--grau); }
.tor-input { width: 52px; height: 44px; text-align: center; font: inherit; font-weight: 700; font-size: 1.1rem; border: 1px solid var(--linie); border-radius: 9px; }
.tor-input:focus { outline: 2px solid var(--rasen); outline-offset: 1px; border-color: var(--rasen); }

/* Aufklappbare Spieltag-Gruppen (Ergebnis-Seite) */
.spieltag-block { border: 1px solid var(--linie); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.spieltag-kopf { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #faf9f5; font-weight: 700; }
.spieltag-kopf::-webkit-details-marker { display: none; }
.spieltag-kopf::after { content: "▸"; color: var(--grau); transition: transform .15s ease; margin-left: 4px; }
.spieltag-block[open] .spieltag-kopf::after { transform: rotate(90deg); }
.spieltag-name { flex: 1; }
.spieltag-zahl { font-weight: 600; color: var(--grau); font-size: .82rem; }
.spieltag-block .ergebnis-liste { padding: 10px 12px 12px; }
.spieltag-block .tabelle { box-shadow: none; border-radius: 0; }
.spieltag-block .tabelle thead th { background: #fff; }

/* ---------- "Als App speichern"-Banner (unten, wegklickbar) ---------- */
.app-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--schwarz); color: #fff; padding: 12px 16px; box-shadow: 0 -4px 16px rgba(0,0,0,.18); border-top: 3px solid var(--gold); }
.app-banner-text { font-size: .9rem; font-weight: 600; }
.app-banner-aktion { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.app-banner-btn { background: var(--gold); color: var(--schwarz); border: none; border-radius: 999px; font: inherit; font-weight: 700; padding: 8px 16px; cursor: pointer; }
.app-banner-zu { background: transparent; color: #ffffffaa; border: none; font-size: 1.05rem; cursor: pointer; padding: 4px 8px; line-height: 1; }
body.hat-app-banner { padding-bottom: 64px; }

/* ---------- Hinweise / Meldungen ---------- */
.hinweis { background: var(--karte); border: 1px dashed var(--linie); border-radius: 12px; padding: 24px; color: var(--grau); }
.hinweis a { color: var(--rasen); }
.meldung { padding: 12px 16px; border-radius: 10px; margin: 0 0 18px; font-weight: 600; }
.meldung.fehler { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.meldung.erfolg { background: #fff8e1; color: #8a6500; border: 1px solid #ffe08a; }

/* ---------- Karten / Formulare (Verwaltung) ---------- */
.card { background: var(--karte); border-radius: 14px; padding: 22px 24px; box-shadow: 0 1px 3px rgba(15,23,42,.06); margin-bottom: 20px; }
.card h1 { margin: 0 0 6px; font-size: 1.3rem; }
.card-text { color: var(--grau); margin: 0 0 14px; }
.card-text code { background: #f1f5f9; padding: 1px 6px; border-radius: 5px; font-size: .9em; }
.login-card { max-width: 420px; margin: 30px auto; }

.form { display: flex; flex-direction: column; gap: 14px; }
.form label { font-weight: 600; font-size: .9rem; display: flex; flex-direction: column; gap: 6px; }
.form input[type=text], .form input[type=password], .form input[type=file], .form select {
    font: inherit; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 9px; background: #fff;
}
.form input:focus, .form select:focus, .score-input:focus { outline: 2px solid var(--rasen); outline-offset: 1px; border-color: var(--rasen); }

.btn { display: inline-block; font: inherit; font-weight: 700; border: none; border-radius: 9px; padding: 10px 18px; cursor: pointer; text-decoration: none; text-align: center; }
.btn-haupt { background: var(--rasen); color: #fff; align-self: flex-start; }
.btn-haupt:hover { background: var(--rasen-dunkel); }
.btn-klein { background: #f1f5f9; color: var(--tinte); padding: 7px 12px; font-size: .85rem; font-weight: 600; }
.btn-klein:hover { background: #e2e8f0; }
.btn-loeschen { background: #fef2f2; color: #b91c1c; }
.btn-loeschen:hover { background: #fee2e2; }

.admin-leiste { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.admin-status { color: var(--rasen); font-weight: 700; font-size: .85rem; }

.aktionen { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.inline-form { display: inline; margin: 0; }
.form-knoepfe { display: flex; gap: 10px; align-items: center; }

/* Ergebnis-Eingabe */
.preise-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.preise-grid input { width: 100%; }
.regel-box { display: flex; gap: 24px; flex-wrap: wrap; padding: 14px; background: #f8fafc; border-radius: 10px; }
.regel-box label { font-size: .9rem; }
.check { flex-direction: row !important; align-items: center; gap: 8px !important; }
.spiele-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.spiel-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid var(--linie); border-radius: 9px; }
.spiel-name { font-weight: 600; font-size: .92rem; }
.score-input { width: 78px; text-align: center; font: inherit; font-weight: 700; padding: 8px; border: 1px solid var(--linie); border-radius: 8px; }

/* ---------- Mobil ---------- */
@media (max-width: 560px) {
    .topf-summe { font-size: 2.3rem; }
    .spiele-grid { grid-template-columns: 1fr; }
    .preise-grid { grid-template-columns: 1fr; }
    .tabelle th, .tabelle td { padding: 10px 8px; }
    .kopf-titel { font-size: 1rem; }
    .kopf-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
    .spalte-wertung { display: none; }
    .spalte-fehltipps { display: none; }
    .aufklapp { display: inline-block; }
    .posten-zeile { cursor: pointer; }
    .tipp-hinweis { display: block; }
    .aktionen { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }