/* Offline-Erfassung: Farben und Grundgestaltung wie die Hauptseite (RAG-Auswertung/wwwroot/app.css),
   ausgelegt fuer die Bedienung am Handy (grosse Tippflaechen, volle Breite) */
:root {
    --rv-primary: #005286;
    --rv-primary-dark: #003d66;
    --rv-primary-light: #e6f0f7;
    --rv-secondary: #32373c;
    --rv-light: #f4f6f8;
    --rv-white: #ffffff;
    --rv-text: #333333;
    --rv-muted: #6c757d;
    --rv-border: #dce1e6;
    --rv-success: #1e7e34;
    --rv-danger: #c0392b;
    --rv-warning-bg: #fff3cd;
    --rv-warning-text: #664d03;
    --tippflaeche: 44px;

    /* Telerik-Theme (Kendo) auf RAG-Blau umstellen - diese Telerik-Version faerbt ueber CSS-Variablen */
    --kendo-color-primary: #005286;
    --kendo-color-primary-hover: #00446f;
    --kendo-color-primary-active: #003d66;
    --kendo-color-primary-emphasis: #6a9cc0;
    --kendo-color-primary-on-surface: #005286;
    --kendo-color-primary-on-subtle: #003d66;
    --kendo-color-primary-subtle: #e6f0f7;
    --kendo-color-primary-subtle-hover: #d3e4f0;
    --kendo-color-primary-subtle-active: #bcd5e8;
    --kendo-color-on-primary: #ffffff;
}

* { box-sizing: border-box; }

html, body {
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: var(--rv-text);
    background-color: var(--rv-light);
    font-size: 16px;
}

/* ---------- Kopfbalken ---------- */
.top-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--rv-primary) 0%, var(--rv-primary-dark) 100%);
    color: var(--rv-white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Logo wie auf der Hauptseite (images/logo.png, verkleinert), ohne weissen Kasten */
.header-logo {
    height: 56px;
    width: auto;
    border-radius: 4px;
}

.header-brand {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.header-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.header-subtitle {
    font-size: 0.8rem;
    opacity: 0.85;
    font-weight: 300;
}

.header-konto {
    font-weight: 600;
    opacity: 1;
}

/* Rechts im Kopfbalken: Verbindung oben, Version unten */
.header-rechts {
    margin-left: auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.3rem;
}

/* ---------- Verbindungsanzeige (v9.16.4) ---------- */
.verbindung {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.verbindung-punkt {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    background: #9e9e9e;
}

.verbindung.online .verbindung-punkt { background: #4caf50; }

/* Offline soll auffallen: rote Pille */
.verbindung.offline {
    background: #c0392b;
}

.verbindung.offline .verbindung-punkt { background: var(--rv-white); }

.verbindung.pruefe { opacity: 0.8; }

/* Geladene App-Version - wichtig, um haengengebliebene Updates zu erkennen */
.header-version {
    margin-left: auto;
    align-self: flex-end;
    font-size: 0.75rem;
    padding: 0.1rem 0.45rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    white-space: nowrap;
}

/* ---------- Seite und Karte ---------- */
.page-container {
    max-width: 560px;
    margin: 1rem auto;
    padding: 0 0.75rem 2rem;
}

.karte {
    background: var(--rv-white);
    border: 1px solid var(--rv-border);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    padding: 1rem 1rem 1.25rem;
}

h1 {
    color: var(--rv-primary);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--rv-primary-light);
}

h1:focus { outline: none; }

h2, h3, h4 {
    color: var(--rv-secondary);
    font-size: 1.1rem;
    margin: 1.25rem 0 0.5rem;
}

p { margin: 0.5rem 0 0.75rem; }

/* ---------- Formularelemente ---------- */
label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--rv-secondary);
    margin: 0.9rem 0 0.3rem;
}

select,
input[type="text"],
input[type="number"],
input[type="password"] {
    display: block;
    width: 100%;
    min-height: var(--tippflaeche);
    padding: 0.5rem 0.6rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--rv-text);
    background: var(--rv-white);
    border: 1px solid var(--rv-border);
    border-radius: 6px;
}

select:focus,
input:focus {
    outline: none;
    border-color: var(--rv-primary);
    box-shadow: 0 0 0 3px rgba(0, 82, 134, 0.15);
}

/* Telerik-Eingabefelder genauso hoch wie die nativen */
.k-textbox,
.k-input {
    width: 100%;
    min-height: var(--tippflaeche);
    font-size: 1rem;
    border-radius: 6px;
}

.k-checkbox {
    width: 22px;
    height: 22px;
    vertical-align: middle;
    margin-right: 0.4rem;
}

/* Checkbox mit nachfolgendem Label in einer Zeile */
.k-checkbox-wrap + label,
.k-checkbox + label {
    display: inline-block;
    margin: 0.9rem 0 0.3rem;
}

/* ---------- Knoepfe ---------- */
.k-button {
    min-height: var(--tippflaeche);
    padding: 0.45rem 1rem;
    margin: 0.5rem 0.4rem 0 0;
    font-size: 0.95rem;
    border-radius: 6px;
}

/* Normale Knoepfe: weiss mit blauer Schrift, Hauptaktion (ThemeColor Primary) blau gefuellt */
.k-button:not(.k-button-primary) {
    background: var(--rv-white);
    border-color: var(--rv-border);
    color: var(--rv-primary);
}

.k-button:not(.k-button-primary):hover {
    background: var(--rv-primary-light);
}

.k-button-primary {
    font-weight: 600;
}

.k-button:disabled,
.k-button.k-disabled {
    opacity: 0.5;
}

/* Native Knoepfe (z. B. + / - beim Zaehlen, x beim Entfernen) */
button:not(.k-button) {
    min-width: var(--tippflaeche);
    min-height: var(--tippflaeche);
    font-size: 1.25rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--rv-primary);
    background: var(--rv-white);
    border: 1px solid var(--rv-border);
    border-radius: 8px;
    cursor: pointer;
    touch-action: manipulation;
}

button:not(.k-button):active {
    background: var(--rv-primary-light);
}

/* ---------- Schuss-Zaehler ("Noch X Schuss"), bleibt unter dem Kopfbalken stehen ---------- */
.schuss-zaehler {
    position: sticky;
    top: var(--kopf-hoehe, 80px);
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    margin: 0.75rem 0;
    padding: 0.6rem 0.9rem;
    border: 2px solid;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.schuss-zaehler-haupt {
    font-size: 1.35rem;
    font-weight: 700;
}

.schuss-zaehler-neben {
    font-size: 0.95rem;
}

.schuss-zaehler.offen {
    background: var(--rv-warning-bg);
    color: var(--rv-warning-text);
    border-color: #ffc107;
}

.schuss-zaehler.vollstaendig {
    background: #e8f5e9;
    color: var(--rv-success);
    border-color: #4caf50;
}

.schuss-zaehler.zu-viel {
    background: #ffebee;
    color: var(--rv-danger);
    border-color: #ef5350;
}

/* ---------- Ringzahlen (Zaehler) ---------- */
.ringzahlen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.ringzahl-feld {
    display: grid;
    grid-template-columns: 2.6rem var(--tippflaeche) 1fr var(--tippflaeche);
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.4rem;
    background: var(--rv-light);
    border: 1px solid var(--rv-border);
    border-radius: 8px;
}

.ringzahl-feld label {
    margin: 0;
    font-size: 0.95rem;
    color: var(--rv-primary);
}

.ringzahl-feld span {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
}

/* Schmale Handys (z. B. 360 px): zwei Spalten passen nicht mehr -> eine Spalte, Knoepfe rechts */
@media (max-width: 380px) {
    .page-container { padding: 0 0.5rem 2rem; }
    .karte { padding: 0.85rem 0.75rem 1rem; }
    .ringzahlen { grid-template-columns: 1fr; }
    .ringzahl-feld { grid-template-columns: 1fr var(--tippflaeche) 3rem var(--tippflaeche); }
}

/* Handys 381-430 px (z. B. 390/412): zwei Spalten passen nur knapp -> Felder etwas enger, sonst ragt die
   rechte Spalte ueber die Karte (v9.27.0) */
@media (min-width: 381px) and (max-width: 430px) {
    .ringzahl-feld {
        grid-template-columns: 2.2rem var(--tippflaeche) minmax(0, 1fr) var(--tippflaeche);
        gap: 0.2rem;
        padding: 0.3rem;
    }
}

/* Einzelschuss-Werte */
.wert-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin: 0.25rem 0.3rem 0 0;
    padding: 0.15rem 0.2rem 0.15rem 0.6rem;
    background: var(--rv-primary-light);
    color: var(--rv-primary-dark);
    border-radius: 999px;
    font-weight: 600;
}

.wert-badge button:not(.k-button) {
    min-width: 32px;
    min-height: 32px;
    font-size: 1rem;
    border-radius: 999px;
}

/* ---------- Foto-Vorschau (gespeicherte und neue Fotos) ---------- */
.foto-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.foto-kachel {
    position: relative;
    aspect-ratio: 1;
    border: 1px solid var(--rv-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--rv-white);
}

.foto-kachel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}

.foto-neu {
    position: absolute;
    left: 4px;
    bottom: 4px;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--rv-success);
    color: var(--rv-white);
    font-size: 0.8rem;
    font-weight: 600;
}

button.foto-entfernen:not(.k-button) {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 36px;
    min-height: 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 2px solid var(--rv-white);
    border-radius: 999px;
    background: var(--rv-danger);
    color: var(--rv-white);
    font-size: 1.2rem;
    line-height: 1;
}

button.link-button:not(.k-button) {
    min-width: 0;
    min-height: 0;
    font-weight: 400;
    padding: 0;
    border: none;
    background: none;
    color: var(--rv-primary);
    text-decoration: underline;
    font-size: inherit;
}

.foto-vorgemerkt {
    font-size: 0.9rem;
    color: var(--rv-muted);
}

.unterschrift-vorhanden {
    display: block;
    max-width: 220px;
    max-height: 90px;
    margin: 0.25rem 0 0.5rem;
    background: var(--rv-white);
    border: 1px solid var(--rv-border);
    border-radius: 6px;
}

.foto-gross {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
}

.foto-gross img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

button.foto-gross-schliessen:not(.k-button) {
    position: absolute;
    top: 12px;
    right: 12px;
    width: var(--tippflaeche);
    height: var(--tippflaeche);
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 1.5rem;
}

/* ---------- Unterschrift ---------- */
.k-signature {
    max-width: 100%;
    border-radius: 8px;
}

/* ---------- Listen (Wettkaempfe, Serien) ---------- */
.k-listview {
    border: none;
    background: transparent;
}

.wettkampf-eintrag,
.serie-eintrag {
    display: block;
    padding: 0.85rem 1rem;
    margin-bottom: 0.5rem;
    background: var(--rv-white);
    border: 1px solid var(--rv-border);
    border-left: 4px solid var(--rv-primary);
    border-radius: 8px;
    cursor: pointer;
    min-height: var(--tippflaeche);
}

.wettkampf-eintrag:active,
.serie-eintrag:active {
    background: var(--rv-primary-light);
}

.wettkampf-eintrag strong {
    color: var(--rv-primary);
}

/* ---------- Tabelle ---------- */
.k-grid {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.k-grid .k-table-thead,
.k-grid .k-grid-header,
.k-grid .k-header {
    background-color: var(--rv-primary);
    color: var(--rv-white);
}

.k-grid .k-header .k-column-title,
.k-grid .k-header .k-link {
    color: var(--rv-white);
    font-weight: 600;
}

/* ---------- Status, Hinweise, Meldungen ---------- */
.sync-status-badge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.75rem;
    background: var(--rv-light);
    border: 1px solid var(--rv-border);
    border-radius: 8px;
    font-size: 0.9rem;
}

.sync-status-badge .k-button {
    margin: 0 0 0 auto;
    min-height: 36px;
}

.zaehlhinweis,
.hinweis {
    padding: 0.6rem 0.75rem;
    background: var(--rv-primary-light);
    border-left: 4px solid var(--rv-primary);
    border-radius: 6px;
    font-size: 0.92rem;
}

/* Zaehlregel ausblendbar (v9.29.1): x im Kasten blendet ihn aus, "Zaehlregel" holt ihn zurueck; gemerkt pro Geraet */
.zaehlhinweis .zaehlhinweis-aus {
    float: right;
    min-width: 36px;
    min-height: 36px;
    margin: -0.35rem -0.4rem 0 0.5rem;
    font-size: 1rem;
    background: transparent;
    border: none;
}

.zaehlregel-zeigen {
    display: none;
}

html.zaehlregel-aus .zaehlhinweis {
    display: none;
}

html.zaehlregel-aus button.zaehlregel-zeigen {
    display: inline-block;
    min-height: 32px;
    margin: 0 0 0.25rem;
    padding: 0.1rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 400;
    background: transparent;
    border: none;
}

.hinweis {
    background: var(--rv-warning-bg);
    border-left-color: #ffc107;
    color: var(--rv-warning-text);
}

.text-danger { color: var(--rv-danger); font-weight: 600; }
.text-success { color: var(--rv-success); font-weight: 600; }
.text-muted { color: var(--rv-muted); }
.mb-3 { margin-bottom: 1rem; }

.konflikt-liste,
.outbox-fehler-liste {
    margin: 1rem 0;
}

.konflikt-eintrag,
.outbox-fehler-eintrag {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--rv-white);
    border: 1px solid var(--rv-border);
    border-left: 4px solid var(--rv-danger);
    border-radius: 8px;
}

/* ---------- Laden und Fehlerbalken ---------- */
.loading-indicator {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--rv-muted);
}

#blazor-error-ui {
    background: var(--rv-warning-bg);
    color: var(--rv-warning-text);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ---------- Teilnehmerwahl per Startnummer (wie Hauptseite) ---------- */
.startnummer-auswahl {
    margin: 0.5rem 0 1rem;
}

.startnummer-stepper {
    display: grid;
    grid-template-columns: var(--tippflaeche) 6rem var(--tippflaeche);
    gap: 0.4rem;
    align-items: center;
}

.startnummer-stepper button {
    height: var(--tippflaeche);
    font-size: 1.4rem;
    font-weight: 700;
}

.startnummer-eingabe {
    height: var(--tippflaeche);
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    border: 1px solid var(--rv-border);
    border-radius: 8px;
}

.startnummer-treffer {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--rv-primary-light);
    color: var(--rv-primary-dark);
    border-radius: 8px;
    font-size: 1.15rem;
    font-weight: 700;
}

.startnummer-kein-treffer {
    margin-top: 0.5rem;
    color: #c0392b;
    font-weight: 600;
}

/* "Teilnehmerliste von hh:mm" - App frischt die Liste selbst auf (v9.39.0) */
.startnummer-stand {
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: var(--rv-muted);
}

.startnummer-stand-warnung {
    color: #c0392b;
    font-weight: 600;
}


/* ---------- Disziplin-Liste nach der Startnummer (v9.15.0) ---------- */
.disziplin-liste {
    display: grid;
    gap: 0.5rem;
    margin: 0.5rem 0 1rem;
}

.disziplin-zeile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.disziplin-waehlen {
    flex: 1;
    min-height: var(--tippflaeche);
    text-align: left;
    font-weight: 600;
}

/* Gewaehlte Disziplin als Kopfleiste, "Andere Disziplin" deutlich als Knopf (v9.28.3) */
.disziplin-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0.5rem 0 0.6rem;
    padding: 0.5rem 0.75rem;
    background: var(--rv-primary-light);
    border-left: 5px solid var(--rv-primary);
    border-radius: 8px;
}

.disziplin-kopf .disziplin-titel {
    flex: 1 1 auto;
    margin: 0;
    color: var(--rv-primary-dark);
}

button.disziplin-zurueck:not(.k-button) {
    padding: 0 1rem;
    border: 2px solid var(--rv-primary);
    background: var(--rv-white);
    color: var(--rv-primary);
    font-size: 1rem;
    font-weight: 700;
}

button.disziplin-zurueck:not(.k-button):active { background: var(--rv-primary); color: var(--rv-white); }

/* Handy: Knopf unter dem Namen ueber die ganze Breite */
@media (max-width: 600px) {
    button.disziplin-zurueck:not(.k-button) { flex: 1 1 100%; }
}

/* Erledigte Disziplin deutlich gruen (v9.28.3) */
.disziplin-zeile.erfasst {
    padding: 0.45rem 0.6rem;
    background: #e8f5e9;
    border: 2px solid #4caf50;
    border-radius: 8px;
    color: #1b5e20;
}

.disziplin-zeile.erfasst .disziplin-name { font-weight: 700; }

.disziplin-haken {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    background: #2e7d32;
    color: #ffffff;
    font-weight: 700;
    flex: 0 0 auto;
}

.disziplin-erfasst {
    color: #1e7e34;
    font-weight: 700;
}

/* Offene Disziplin: Knopf mit Hinweis rechts */
.disziplin-waehlen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.disziplin-offen-marke {
    font-size: 0.85rem;
    font-weight: 600;
    color: #8a5a00;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
}

.disziplin-fortschritt {
    margin: 0.25rem 0 0.4rem;
    font-weight: 700;
    color: var(--rv-secondary);
}

.disziplin-fortschritt.alle { color: #1e7e34; }

.disziplin-zeile.nicht-uebertragen {
    padding: 0.4rem 0.6rem;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
}

.disziplin-problem {
    color: #664d03;
    font-weight: 700;
}

.disziplin-korrigieren {
    margin-left: auto;
    min-height: var(--tippflaeche);
}

.disziplin-titel {
    font-size: 1.15rem;
    margin: 0.5rem 0 0.25rem;
}

/* ---------- Browser zu alt (Pruefung in index.html) ---------- */
.browser-zu-alt-meldung {
    margin: 2rem 1rem;
    padding: 1rem 1.25rem;
    background: #ffebee;
    color: #c0392b; /* bewusst ohne var(): alte Browser kennen keine CSS-Variablen */
    border: 2px solid #ef5350;
    border-radius: 8px;
}

.browser-zu-alt-meldung h1 {
    margin-top: 0;
    font-size: 1.4rem;
    color: inherit;
    border: none;
}

/* Der Start der App scheitert dort ohnehin; der Fehlerbalken wuerde nur verwirren */
.browser-zu-alt #blazor-error-ui {
    display: none !important;
}

/* ---------- Hinweis "Neue Version verfügbar" (update-hinweis.js, v9.16.6) ---------- */
#update-hinweis {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: #003d66;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
}

body.update-verfuegbar {
    padding-bottom: 150px;
}

#update-hinweis button {
    min-height: 44px;
    padding: 0 1.1rem;
    border: none;
    border-radius: 8px;
    background: #ffffff;
    color: #003d66;
    font-size: 1rem;
    font-weight: 700;
}

/* Versionsanzeige als Knopf (v9.27.2): sieht aus wie bisher, Antippen sucht nach Updates */
button.header-version:not(.k-button) {
    min-width: 0;
    min-height: 28px;
    color: var(--rv-white);
    font-size: 0.75rem;
    font-weight: 400;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 4px;
}

/* Status der Update-Suche */
#update-status {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 3001;
    max-width: calc(100% - 2rem);
    padding: 0.6rem 1rem;
    background: #32373c;
    color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    font-size: 0.95rem;
    text-align: center;
}

body.update-verfuegbar #update-status { bottom: 5.5rem; }
html.kontrast button.header-version:not(.k-button) { color: #ffffff; border: none; }

/* ---------- Bedien-Verbesserungen v9.18.0 ---------- */
/* Bestaetigung nach dem Speichern: gross, gruen, unter dem Kopfbalken */
.erfolgs-leiste {
    position: fixed;
    top: var(--kopf-hoehe, 80px);
    left: 0;
    right: 0;
    z-index: 1500;
    padding: 0.9rem 1rem;
    background: #1e7e34;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

/* Rueckfrage im App-Stil */
.app-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5);
}

.app-dialog {
    width: 100%;
    max-width: 420px;
    padding: 1.1rem 1.2rem;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

.app-dialog h3 { margin: 0 0 0.5rem; font-size: 1.25rem; color: #c0392b; }
.app-dialog-knoepfe { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }

/* Rest = 0er */
button.rest-null:not(.k-button) {
    width: 100%;
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    background: #f4f6f8;
}

/* Speichern-Knopf mit Name: gross und gut lesbar */
.k-button.speichern-knopf {
    width: 100%;
    min-height: 52px;
    margin: 0.75rem 0;
    font-size: 1.1rem;
    font-weight: 700;
    white-space: normal;
}

/* Zuletzt erfasst */
.zuletzt-erfasst {
    margin: 1.25rem 0 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid #dce1e6;
    border-radius: 8px;
    background: #f9fafb;
}

.zuletzt-erfasst h3 { margin: 0 0 0.4rem; font-size: 1rem; color: #005286; }
.zuletzt-erfasst ul { margin: 0; padding: 0; list-style: none; }
/* Einklappbar (v9.31.0): Ueberschrift als Knopf, Zustand ueber html.zuletzt-zu */
.zuletzt-erfasst h3 { margin: 0; }
.zuletzt-erfasst button.zuletzt-umschalten {
    min-height: 36px;
    padding: 0.2rem 0.3rem;
    font-size: 1rem;
    font-weight: 600;
    color: #005286;
    background: transparent;
    border: none;
    text-align: left;
}
.zuletzt-erfasst ul { margin-top: 0.4rem; }
.zuletzt-pfeil-zu { display: none; }
html.zuletzt-zu .zuletzt-erfasst ul { display: none; }
html.zuletzt-zu .zuletzt-pfeil-auf { display: none; }
html.zuletzt-zu .zuletzt-pfeil-zu { display: inline; }
.zuletzt-erfasst li { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; border-top: 1px solid #eef0f2; }
.zuletzt-erfasst li:first-child { border-top: none; }
.zuletzt-zeit { color: #6c757d; font-size: 0.9rem; min-width: 3rem; }
.zuletzt-text { flex: 1; }
button.zuletzt-korrigieren:not(.k-button) { min-width: 0; min-height: 36px; padding: 0 0.6rem; font-size: 0.9rem; }

/* Kontrastmodus fuer draussen (Knopf im Kopfbalken) */
button.kontrast-knopf:not(.k-button) {
    min-width: 36px;
    min-height: 32px;
    padding: 0 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: transparent;
    color: #ffffff;
    font-size: 1.1rem;
}

html.kontrast body { font-size: 19px; color: #000000; background: #ffffff; }
html.kontrast .karte { border: 2px solid #000000; box-shadow: none; }
html.kontrast .ringzahl-feld { background: #ffffff; border: 2px solid #000000; }
html.kontrast .ringzahl-feld span { font-size: 1.5rem; }
html.kontrast .ringzahl-feld label { color: #000000; font-weight: 700; }
html.kontrast button:not(.k-button) { border: 2px solid #000000; color: #000000; font-weight: 700; }
html.kontrast .startnummer-eingabe { font-size: 1.8rem; border: 2px solid #000000; }
html.kontrast .schuss-zaehler { border-width: 3px; }
html.kontrast .startnummer-stand { color: #000000; }
html.kontrast .schuss-zaehler-haupt { font-size: 1.6rem; }
html.kontrast .top-header { background: #00213a; }
html.kontrast button.kontrast-knopf:not(.k-button) { background: #ffd600; color: #000000; border-color: #ffd600; }

.header-rechts-oben { display: flex; align-items: center; gap: 0.4rem; }

/* Warnung: Ergebnisse warten zu lange auf Uebertragung (v9.18.0) */
.sync-warnung {
    margin: 0.4rem 0;
    padding: 0.5rem 0.7rem;
    border: 2px solid #ffc107;
    border-radius: 6px;
    background: #fff3cd;
    color: #664d03;
    font-weight: 600;
}

/* ---------- Tablet (v9.27.0) ----------
   Erfassungsseiten auf Tablets (z. B. Galaxy Tab A9+ 11": ca. 800 x 1280) ohne Scrollen bis "Speichern".
   Die Mindesthoehe trennt Tablets von quer gehaltenen Handys (ca. 740-930 breit, aber unter 450 hoch) -
   Handys behalten hoch und quer das bisherige einspaltige Layout. */
@media (min-width: 700px) and (min-height: 600px) {
    .page-container:has(.erfassung-kopf) {
        max-width: 1240px;
        margin: 0.5rem auto;
    }

    /* Ueberschrift und Sync-Status in einer Zeile */
    .erfassung-kopf {
        display: flex;
        align-items: center;
        gap: 0.5rem 1rem;
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid var(--rv-primary-light);
    }

    .erfassung-kopf h1 {
        flex: 1 1 auto;
        margin: 0;
        padding: 0;
        border: none;
    }

    .erfassung-kopf .sync-status-badge {
        flex: 0 1 auto;
        margin: 0;
    }

    /* Startnummer: Beschriftung, Stepper und Name in einer Zeile */
    .startnummer-auswahl {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 0.75rem;
        margin: 0.25rem 0 0.75rem;
    }

    .startnummer-auswahl > label { margin: 0; }

    .startnummer-treffer,
    .startnummer-kein-treffer {
        flex: 1 1 14rem;
        margin-top: 0;
    }

    .startnummer-stand {
        flex-basis: 100%;
        margin-top: 0;
    }

    /* Disziplin-Name und "Andere Disziplin" nebeneinander */
    .disziplin-kopf {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 1rem;
    }

    .disziplin-kopf .disziplin-titel { margin: 0.25rem 0; }

    /* 10er-0er in 4 Spalten = 3 Reihen statt 6 */
    .ringzahlen { grid-template-columns: repeat(4, 1fr); }

    /* Punkte, Unterschrift und Fotos: nebeneinander, solange Platz ist */
    .erfassung-belege {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0 1.5rem;
    }

    .erfassung-belege > * { flex: 1 1 100%; }
    .erfassung-belege > .beleg-unterschrift { flex: 0 0 auto; }
    .erfassung-belege > .beleg-fotos { flex: 1 1 16rem; }

    /* Fotos: Vorschaubilder und Knopf in einer Zeile */
    .beleg-fotos {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 0.5rem;
    }

    .beleg-fotos > label,
    .beleg-fotos > p { flex: 1 1 100%; }

    /* Korrektur-Seiten: Disziplin, Teilnehmer und "laden" in einer Zeile */
    .bearbeiten-auswahl {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        gap: 0 1rem;
        align-items: end;
    }
    .beleg-fotos .foto-raster {
        flex: 1 1 8rem;
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    }
}

/* Tablet quer: Eingabe links (breit genug fuer 4 Ringzahl-Spalten), Punkte/Unterschrift/Fotos/Speichern rechts */
@media (min-width: 1000px) and (min-height: 600px) {
    .erfassung-raster {
        display: grid;
        grid-template-columns: 13fr 7fr;
        gap: 0 2rem;
        align-items: start;
    }

    .erfassung-eingabe,
    .erfassung-belege { min-width: 0; }
}

/* Wettkampfdaten neu laden / Abmelden unten auf der Erfassung (v9.28.2) */
.geraete-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rv-border);
}
.k-button.geraete-abmelden { color: var(--rv-danger); }

/* Speichern-Knopf (v9.28.1): gruen, sobald alles Noetige eingegeben ist, vorher grau - gilt fuer Erfassen und Bearbeiten */
.k-button.speichern-knopf {
    background: var(--rv-success);
    border-color: var(--rv-success);
    color: #ffffff;
}
.k-button.speichern-knopf:hover { background: #176428; }
.k-button.speichern-knopf.unvollstaendig,
.k-button.speichern-knopf.unvollstaendig:hover {
    background: #d5dade;
    border-color: #b8c0c7;
    color: #3f454b;
}
.k-button.speichern-knopf.unvollstaendig:disabled,
.k-button.speichern-knopf.unvollstaendig.k-disabled { opacity: 1; }

/* Tablet quer mit wenig Hoehe (z. B. 1280 x 626 mit Adressleiste): Kopfbalken und Abstaende kompakter */
@media (min-width: 1000px) and (min-height: 600px) and (max-height: 760px) {
    .page-container:has(.erfassung-kopf) .karte { padding-top: 0.6rem; padding-bottom: 0.6rem; }
    .top-header { padding-top: 0.3rem; padding-bottom: 0.3rem; }
    .header-logo { height: 44px; }
    .erfassung-kopf { margin-bottom: 0.5rem; padding-bottom: 0.4rem; }
    .erfassung-kopf .sync-status-badge { padding: 0.2rem 0.5rem; }
    .startnummer-auswahl { margin: 0 0 0.5rem; }
    .erfassung-eingabe .zaehlhinweis { margin: 0.25rem 0 0.4rem; padding: 0.4rem 0.75rem; }
    .erfassung-eingabe .schuss-zaehler { margin: 0.4rem 0; padding: 0.35rem 0.9rem; }
    .erfassung-eingabe .ringzahlen { margin: 0.4rem 0; }
    .erfassung-belege .erfassung-punkte { margin: 0.25rem 0 0; }
    .erfassung-belege label { margin-top: 0.5rem; }
    .k-button.speichern-knopf { margin: 0.5rem 0; }
}

/* Andere Staende (v9.43.0): nur Info, kleiner und gedaempft als die eigenen Disziplinen */
.andere-staende {
    margin-top: 0.6rem;
    padding: 0.35rem 0.6rem;
    border: 1px dashed var(--rv-border);
    border-radius: 8px;
    background: var(--rv-light);
    font-size: 0.85rem;
    color: var(--rv-muted);
}
.andere-staende-titel { font-weight: 600; margin-bottom: 0.15rem; }
.andere-zeile { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; padding: 0.15rem 0; }
.andere-zeile + .andere-zeile { border-top: 1px solid var(--rv-border); }
/* v9.43.1: Name umbricht statt abgeschnitten zu werden; Stand kurz in einer zweiten, kleineren Zeile */
.andere-text { display: flex; flex-direction: column; min-width: 0; }
.andere-zeile .andere-name { color: var(--rv-text); overflow-wrap: anywhere; }
.andere-zeile .andere-stand { font-size: 0.75rem; color: var(--rv-muted); }
.andere-zeile .andere-status { flex-shrink: 0; white-space: nowrap; }
.andere-zeile.offen .andere-status { color: var(--rv-warning-text); font-weight: 600; }
.andere-zeile.geschossen .andere-status { color: var(--rv-success); }
.andere-zeile.zaehlt-nicht .andere-name,
.andere-zeile.zaehlt-nicht .andere-status { color: var(--rv-muted); font-weight: 400; }
.andere-staende-hinweis { font-size: 0.78rem; color: var(--rv-muted); margin: 0.2rem 0 0; }
.andere-offen-info {
    font-size: 0.82rem;
    color: var(--rv-warning-text);
    background: var(--rv-warning-bg);
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    margin: 0.2rem 0 0.4rem;
}