/* ===================================
   Golf Liga PWA — Design System
   =================================== */

:root {
  --green-dark:   #0d2010;
  --green-mid:    #1e3a1e;
  --green-light:  #3a6a3a;
  --green-accent: #a8d5a2;
  --green-bg:     #eef5ee;
  --green-text:   #1e5a1e;   /* grüner Text auf hellem Grund (eigene Zeile, Sieg) */
  --on-green-muted: #8fbf8f; /* Nebentext auf --green-mid: 6:1 (vorher #5a8a5a: 3,1:1) */

  --orange:       #a35f00;   /* 5:1 mit weißer Schrift (vorher #d48800: 2,8:1) */
  --orange-bg:    #fff8ee;
  --red:          #cc3333;
  --red-bg:       #fff0f0;

  --gray-0:  #ffffff;
  --gray-1:  #f8f8f5;
  --gray-2:  #f0f0eb;
  --gray-3:  #e0e0e0;
  --gray-4:  #6e6e68;   /* Meta-Text: 5,1:1 auf Weiß (vorher #bbb: 1,9:1) */
  --gray-5:  #5c5c57;   /* Sekundärtext: 6,6:1 auf Weiß (vorher #888: 3,5:1) */
  --gray-deko: #c4c4bd; /* nur Linien/Deko, nie für Text */
  --gray-6:  #555555;
  --gray-7:  #333333;
  --gray-8:  #222222;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-card: 0 1px 4px rgba(0,0,0,0.08);
  --shadow-modal: 0 8px 32px rgba(0,0,0,0.18);

  --fs-meta:  12px;   /* kleinste Textgröße (Labels, Hinweise) */
  --fs-sub:   13px;   /* Nebentext */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* Kein Doppeltipp-Zoom (iOS), z. B. bei schnellem Tippen auf +/− im Live-Scoring.
   Zoomen mit zwei Fingern bleibt möglich. */
html { touch-action: manipulation; }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* hidden-Attribut gewinnt immer — sonst überschreibt z. B. display:flex den versteckten Zustand */
[hidden] { display: none !important; }

/* iOS Safari zoomt beim Fokus auf Felder unter 16px — überschreibt bewusst auch Inline-Styles */
input, select, textarea { font-size: 16px !important; }

html, body {
  height: 100%;
  overflow: hidden;  /* verhindert Body-Scroll */
  font-family: var(--font);
  background: var(--gray-2);
  color: var(--gray-8);
  overscroll-behavior: none;
}

/* ---- App Shell ---- */
#app {
  max-width: 480px;
  margin: 0 auto;
  height: 100%;          /* feste Höhe = Viewport, nicht mitwachsen */
  background: var(--gray-0);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* ---- Screens ---- */
.screen {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.screen.active { display: flex; }

/* ---- Header ---- */
/* iOS Safe-Area-Streifen: gleiche Farbe wie Header, sitzt hinter der Statusleiste */
#ios-safe-top {
  height: env(safe-area-inset-top, 0px);
  background: var(--green-mid);
  flex-shrink: 0;
  width: 100%;
}

.app-header {
  background: var(--green-mid);
  padding: 14px 18px;   /* kein env() mehr — safe area wird über #ios-safe-top gelöst */
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.app-header .title  { color: var(--green-accent); font-size: 17px; font-weight: 700; }
.app-header .sub    { color: var(--on-green-muted); font-size: var(--fs-meta); margin-top: 1px; }
.app-header-back    { display: flex; align-items: center; gap: 10px; }
.back-btn {
  background: none; border: 0; padding: 0; font-family: inherit; line-height: 1;
  color: var(--on-green-muted); font-size: 22px; cursor: pointer;
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: -10px;
}

/* ---- Scroll content ---- */
.scroll-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--gray-2);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---- Sections ---- */
.section {
  background: var(--gray-0);
  margin-bottom: 8px;
  padding: 14px 16px;
}
.section-label {
  font-size: var(--fs-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray-4);
  margin-bottom: 10px;
}

/* ---- Cards ---- */
.card {
  background: var(--gray-1);
  border: 1px solid var(--gray-3);
  border-radius: var(--radius-md);
  padding: 13px;
  margin-bottom: 8px;
}
.card:last-child { margin-bottom: 0; }
.card.green  { background: var(--green-bg);  border-color: #3a6a3a44; }
.card.orange { background: var(--orange-bg); border-color: #d4880033; }
.card.red    { background: var(--red-bg);    border-color: #cc333333; }

.card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.card-row:last-child { margin-bottom: 0; }

.card-title { font-size: 14px; font-weight: 700; color: var(--gray-8); }
.card-sub   { font-size: var(--fs-sub); color: var(--gray-5); margin-top: 2px; line-height: 1.4; }
.card-label { font-size: var(--fs-sub); color: var(--gray-5); }
.card-value { font-size: 13px; font-weight: 600; color: var(--gray-8); }
.card-value.green  { color: var(--green-text); }
.card-value.orange { color: var(--orange); }
.card-value.red    { color: var(--red); }
.card-value.gray   { color: var(--gray-5); }

/* ---- Divider ---- */
.divider { height: 1px; background: var(--gray-3); margin: 10px 0; }

/* ---- Badges ---- */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-meta);
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 12px;
  white-space: nowrap;
}
.badge.green  { background: var(--green-mid); color: var(--green-accent); }
.badge.orange { background: var(--orange); color: #fff; }
.badge.red    { background: var(--red); color: #fff; }
.badge.gray   { background: var(--gray-3); color: var(--gray-6); }
.badge.outline { background: transparent; border: 1.5px solid var(--green-mid); color: var(--green-mid); }

.notif-dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--red);
  border-radius: 50%;
  margin-left: 5px;
  vertical-align: middle;
}

/* ---- Buttons ---- */
.btn {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: opacity .15s;
  margin-bottom: 8px;
}
.btn:last-child { margin-bottom: 0; }
.btn:active { opacity: .75; }
.btn.primary   { background: var(--green-mid); color: var(--green-accent); }
.btn.secondary { background: var(--gray-0); color: var(--green-mid); border: 1.5px solid var(--green-mid); }
.btn.danger    { background: var(--red-bg); color: var(--red); border: 1.5px solid var(--red); }
.btn.sm        { padding: 9px 14px; font-size: 13px; }

/* ---- Form fields ---- */
.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field label {
  display: block;
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--gray-5);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 6px;
}
.field input, .field select {
  width: 100%;
  background: var(--gray-1);
  border: 1.5px solid var(--gray-3);
  border-radius: var(--radius-sm);
  padding: 12px 13px;
  font-size: 15px;
  font-family: var(--font);
  color: var(--gray-8);
  outline: none;
  transition: border-color .15s;
}
.field input:focus, .field select:focus {
  border-color: var(--green-light);
  background: var(--gray-0);
}
.field .hint { font-size: var(--fs-meta); color: var(--gray-5); margin-top: 4px; }

/* ---- Match list items ---- */
.match-item {
  display: flex;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--gray-3);
  gap: 10px;
  cursor: pointer;
}
.match-item:last-child { border-bottom: none; }
.match-item:active { opacity: .7; }
.match-info { flex: 1; }
.match-players { font-size: 14px; font-weight: 600; color: var(--gray-8); }
.match-players .me { color: var(--green-text); }
.match-meta    { font-size: var(--fs-meta); color: var(--gray-5); margin-top: 2px; }
.match-hcp     { font-size: var(--fs-meta); color: var(--gray-4); font-weight: 400; }

/* ---- Table ---- */
.liga-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.liga-table th {
  background: var(--green-mid);
  color: var(--green-accent);
  padding: 8px 5px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
}
.liga-table th:nth-child(2) { text-align: left; padding-left: 10px; }
.liga-table td {
  padding: 9px 5px;
  text-align: center;
  border-bottom: 1px solid var(--gray-3);
  color: var(--gray-7);
}
.liga-table td:nth-child(2) { text-align: left; padding-left: 10px; font-weight: 600; }
.liga-table tr:last-child td { border-bottom: none; }
.liga-table tr.me { background: var(--green-bg); }
.liga-table tr.me td { font-weight: 700; color: var(--green-mid); }
.liga-table tr.warning td:nth-child(1) { color: var(--red); }
.liga-table .hcp { font-weight: 400; color: var(--gray-4); font-size: 11px; }
.liga-table .pts { font-weight: 800; font-size: 14px; }

/* ---- Avatar ---- */
.avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--green-accent);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---- Stats row ---- */
.stat-row { display: flex; gap: 8px; margin-bottom: 8px; }
.stat-chip {
  flex: 1;
  background: var(--gray-1);
  border: 1px solid var(--gray-3);
  border-radius: var(--radius-sm);
  padding: 10px 6px;
  text-align: center;
}
.stat-num  { font-size: 22px; font-weight: 800; color: var(--gray-8); line-height: 1; }
.stat-lbl  { font-size: 11px; color: var(--gray-5); text-transform: uppercase; margin-top: 4px; }

/* ---- Progress bar ---- */
.progress-bar {
  height: 5px;
  background: var(--gray-3);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 7px;
}
.progress-fill { height: 100%; background: var(--green-mid); border-radius: 3px; transition: width .4s; }

/* ---- Radio options ---- */
.radio-group { display: flex; flex-direction: column; gap: 8px; }
.radio-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  background: var(--gray-1);
  border: 2px solid var(--gray-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all .15s;
}
.radio-option.selected { background: var(--green-bg); border-color: var(--green-light); }
.radio-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--gray-deko);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.radio-option.selected .radio-dot { background: var(--green-mid); border-color: var(--green-mid); }
.radio-option.selected .radio-dot::after {
  content: '';
  width: 7px; height: 7px;
  background: var(--green-accent);
  border-radius: 50%;
}
.radio-text { font-size: 14px; font-weight: 600; color: var(--gray-8); }
.radio-sub  { font-size: var(--fs-meta); color: var(--gray-5); margin-top: 1px; }

/* ---- Tab bar ---- */
.tab-bar {
  background: var(--gray-0);
  border-top: 1px solid var(--gray-3);
  display: flex;
  justify-content: space-around;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  flex-shrink: 0;
}
.tab-item { background: none; border: 0; font-family: inherit; color: inherit; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; padding: 2px 12px; }
.tab-icon { font-size: 21px; opacity: .45; }
.tab-item.active .tab-icon { opacity: 1; }
.tab-lbl { font-size: var(--fs-meta); color: var(--gray-5); font-weight: 500; }
.tab-item.active .tab-lbl { color: var(--green-mid); font-weight: 700; }

/* ---- Login screen (auch Startseite) ---- */
#screen-login, #screen-start {
  background: linear-gradient(160deg, var(--green-dark) 0%, var(--green-mid) 55%, #2a5a2a 100%);
  justify-content: center;
  align-items: center;
  padding: 40px 28px;
  min-height: 100vh;
}
.login-logo  { font-size: 52px; margin-bottom: 10px; text-align: center; }
.login-title { color: var(--green-accent); font-size: 24px; font-weight: 800; letter-spacing: .5px; text-align: center; }
.login-sub   { color: var(--on-green-muted); font-size: 14px; text-align: center; margin-bottom: 36px; }
.login-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  width: 100%;
  backdrop-filter: blur(10px);
}
.login-card .field label { color: var(--green-accent); }
.login-card .field input {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.15);
  color: #e8f5e8;
}
.login-card .field input::placeholder { color: #9cbf9c; }
.login-card .field select {
  background-color: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.15);
  color: #e8f5e8;
}
.login-card .field select:focus { border-color: var(--green-accent); }
.login-card .field select option { color: var(--gray-8); background: var(--gray-0); } /* Desktop-Dropdown lesbar */
.login-btn:disabled { opacity: .6; }
.login-card .field input:focus { border-color: var(--green-accent); background: rgba(255,255,255,.13); }
.login-btn {
  width: 100%;
  padding: 15px;
  background: var(--green-accent);
  color: var(--green-dark);
  border: none;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 4px;
  transition: opacity .15s;
}
.login-btn:active { opacity: .8; }
/* Startseite: Einladungslink einfügen / Liga anlegen */
.start-text { color: #e8f5e8; font-size: 15px; line-height: 1.5; margin: 0 0 14px; }
.start-oder { color: var(--on-green-muted); text-align: center; margin: 18px 0; font-size: 13px; }
.login-btn.zweit { background: transparent; color: var(--green-accent); border: 1.5px solid var(--green-accent); }
.login-pin2[hidden] { display: none; }
.einladung-link { font-family: ui-monospace, Menlo, monospace; font-size: 13px; word-break: break-all; background: var(--gray-0); border: 1px solid var(--gray-3); border-radius: var(--radius-sm, 6px); padding: 8px 10px; user-select: all; }
.login-hint { color: var(--green-accent); font-size: var(--fs-meta); text-align: center; margin-top: 18px; }
.login-error {
  background: rgba(204,51,51,.15);
  border: 1px solid rgba(204,51,51,.3);
  border-radius: var(--radius-sm);
  color: #ff8888;
  font-size: 12px;
  padding: 8px 12px;
  margin-bottom: 12px;
  display: none;
}

/* ---- VS card (Match-Detail) ---- */
.vs-card {
  background: var(--green-mid);
  padding: 22px 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.vs-player { text-align: center; }
.vs-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--green-accent);
  font-size: 20px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 8px;
}
.vs-name { color: var(--green-accent); font-size: 14px; font-weight: 700; }
.vs-hcp  { color: var(--on-green-muted); font-size: var(--fs-meta); margin-top: 2px; }
.vs-sep  { color: #3a5a3a; font-size: 22px; font-weight: 200; }

/* ---- Annotation ---- */
.annotation { font-size: var(--fs-meta); color: var(--gray-4); font-style: italic; margin-top: 5px; line-height: 1.4; }

/* ---- Toast ---- */
#toast {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  background: var(--gray-8);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 20px;
  width: max-content;
  max-width: min(440px, calc(100vw - 32px));
  text-align: center;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  z-index: 9999;
}
#toast.show { opacity: 1; }
#toast.show.error { pointer-events: auto; }
#toast.error { background: #7a1f1f; border-radius: 14px; padding: 12px 16px; }
.toast-retry {
  display: block; width: 100%; margin-top: 8px; min-height: 44px;
  background: #fff; color: #7a1f1f; border: none; border-radius: 10px;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.btn:disabled, .login-btn:disabled { opacity: .5; cursor: default; }

/* Sync-Status im Live-Scoring */
.badge.sync-ok      { background: var(--green-light); color: #fff; }
.badge.sync-pending { background: var(--orange); color: #fff; }

/* ---- Empty state ---- */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--gray-5);
}
.empty-state .icon { font-size: 36px; margin-bottom: 10px; }
.empty-state p { font-size: 14px; }

/* ---- Scorekarte (OUT/IN, je 9 Spalten — kein horizontales Scrollen) ---- */
.sc-wrap { padding: 0 12px 4px; display: flex; flex-direction: column; gap: 10px; }
.sc-tabelle { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 13px;
  font-variant-numeric: tabular-nums; border: 1px solid var(--gray-3); border-radius: var(--radius-sm); overflow: hidden; }
.sc-tabelle th { background: var(--green-mid); color: var(--green-accent); font-size: 12px; font-weight: 700; padding: 0; height: 30px; text-align: center; }
.sc-tabelle td { text-align: center; padding: 6px 0; border-top: 1px solid var(--gray-3); font-weight: 600; color: var(--gray-8); white-space: nowrap; }
.sc-tabelle .sc-kopf { width: 68px; text-align: left; padding-left: 8px; font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.sc-tabelle .sc-sum { width: 34px; font-weight: 800; background: var(--gray-1); }
.sc-tabelle th.sc-sum { background: var(--green-mid); }
.sc-par td { color: var(--gray-5); font-weight: 400; font-size: 12px; padding: 4px 0; }
.sc-stand td { font-size: 11px; font-weight: 700; color: var(--green-mid); background: var(--green-bg); }
.sc-tabelle .sc-gewonnen { background: #d6ead6; }
.sc-tabelle .sc-aktuell { box-shadow: inset 2px 0 0 var(--orange), inset -2px 0 0 var(--orange); }
.sc-tabelle th.sc-aktuell { background: var(--orange); color: #fff; }
.sc-loch { width: 100%; height: 30px; border: none; background: none; color: inherit; font: inherit; cursor: pointer; }
.sc-vg { color: var(--orange); font-size: 10px; vertical-align: super; margin-left: 1px; letter-spacing: -1px; }
.sc-legende { font-size: var(--fs-meta); color: var(--gray-5); line-height: 1.5; padding: 0 2px; }

/* ---- Live Scoring Buttons ---- */
.score-adj-btn {
  width: 48px; height: 48px;   /* häufigste Taste auf dem Platz, oft mit Handschuh */
  border-radius: 50%;
  border: 2px solid var(--green-mid);
  background: var(--gray-0);
  color: var(--green-mid);
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
}
.score-adj-btn:active { background: var(--green-mid); color: var(--green-accent); }

/* ---- Live Badge ---- */
.badge.live { background: var(--red); color: #fff; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.6; } }

/* ---- Utilities ---- */
.mt-8  { margin-top: 8px !important; }
.mt-12 { margin-top: 12px !important; }
.mt-16 { margin-top: 16px; }
.flex-row  { display: flex; align-items: center; justify-content: space-between; }
.gap-8     { gap: 8px; }
.text-gray { color: var(--gray-5); }
.text-sm   { font-size: 12px; }
.bold      { font-weight: 700; }

/* ---- Admin-Entscheidung (Match-Detail) ---- */
.admin-entscheid > summary { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; margin-bottom: 0; }
.admin-entscheid > summary::-webkit-details-marker { display: none; }
.admin-entscheid > summary::after { content: '▸'; margin-left: auto; font-size: 14px; }
.admin-entscheid[open] > summary::after { content: '▾'; }
.admin-entscheid[open] > summary { margin-bottom: 10px; }
.admin-entscheid .radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.admin-entscheid .radio-option { padding: 11px; }
.admin-entscheid .radio-text { font-size: 13px; }

/* ---- Kompakte Listenzeilen & Steuerelemente (Admin) ---- */
.pl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--gray-3); }
.pl-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-actions { display: flex; gap: 6px; }
.pl-fields { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; }
.pl-fields label { font-size: var(--fs-meta); color: var(--gray-5); font-weight: 600; }
.input-sm { min-height: 44px; padding: 8px 10px; background: var(--gray-0); border: 1.5px solid var(--gray-3); border-radius: var(--radius-sm); color: var(--gray-8); font-family: var(--font); }
.input-sm:focus { border-color: var(--green-light); outline: none; }
.icon-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--gray-2); color: var(--gray-6); border: 1px solid var(--gray-3); border-radius: var(--radius-sm); font-size: 16px; cursor: pointer; }
.icon-btn.danger { background: var(--red-bg); color: var(--red); border-color: var(--red); }

/* ---- Screenshot-Vorschau & Lightbox ---- */
.bild-btn { display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center;
  padding: calc(16px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom)); }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox-zu { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px;
  border-radius: 50%; border: none; background: rgba(255,255,255,.18); color: #fff; font-size: 18px; cursor: pointer; }

/* ---- Tabelle: Tiebreak-Kürzel & Regeln ---- */
.tb-grund { display: inline-block; margin-left: 4px; padding: 0 4px; font-size: 10px; font-weight: 700; color: var(--gray-5);
  border: 1px solid var(--gray-deko); border-radius: 4px; vertical-align: 1px; }
.regeln { margin-top: 10px; font-size: var(--fs-sub); color: var(--gray-6); }
.regeln summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; color: var(--green-mid); }
.regeln ul { padding-left: 18px; display: flex; flex-direction: column; gap: 6px; line-height: 1.45; }

/* Hilfe & FAQ */
.hilfe { line-height: 1.5; color: var(--gray-7); }
.hilfe h2 { font-size: 18px; color: var(--green-mid); margin: 26px 0 10px; scroll-margin-top: 12px; }
.hilfe h2:first-of-type { margin-top: 18px; }
.hilfe h3 { font-size: 15px; color: var(--gray-8); margin: 14px 0 4px; }
.hilfe p { margin: 0 0 8px; font-size: 14px; }
.hilfe-inhalt { display: flex; flex-wrap: wrap; gap: 6px; }
.hilfe-inhalt a { font-size: var(--fs-sub); font-weight: 600; color: var(--green-mid); background: var(--green-bg);
  border-radius: 999px; padding: 8px 12px; text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; }
.hilfe-schritte, .hilfe-liste { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.hilfe-karten { display: flex; flex-direction: column; gap: 8px; }
.hilfe-karten .card { margin: 0; }
.hilfe-karten .card-sub { margin-top: 4px; line-height: 1.45; }
.hilfe-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 10px; background: var(--gray-0);
  border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); }
.hilfe-tabelle td { padding: 9px 12px; border-bottom: 1px solid var(--gray-2); }
.hilfe-tabelle tr:last-child td { border-bottom: 0; }
.hilfe-tabelle td:last-child { font-weight: 700; text-align: right; color: var(--green-text); }
.hilfe-faq { display: flex; flex-direction: column; gap: 8px; }
.hilfe-faq details { background: var(--gray-0); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 0 14px; }
.hilfe-faq summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font-weight: 600; font-size: 14px;
  color: var(--gray-8); list-style: none; gap: 10px; }
.hilfe-faq summary::-webkit-details-marker { display: none; }
.hilfe-faq summary::after { content: '+'; margin-left: auto; font-size: 20px; font-weight: 400; color: var(--green-light); }
.hilfe-faq details[open] summary::after { content: '−'; }
.hilfe-faq details p { padding-bottom: 12px; }

/* ---- Termin-Aktionen ---- */
.termin-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.termin-aktionen .btn { margin: 0; min-height: 44px; padding: 8px 10px; }
.termin-aktionen .btn:only-child, .termin-aktionen .btn:nth-child(odd):last-child { grid-column: 1 / -1; }

/* ---- Ergebnis-Format-Auswahl ---- */
.fmt-picker { display: flex; gap: 8px; }
.fmt-vorschau { margin-top: 8px; font-size: var(--fs-sub); color: var(--gray-6); }
.fmt-vorschau b { color: var(--green-mid); font-size: 15px; }

/* Dezente Textaktion (z. B. No-Show melden) — bewusst kein großer roter Button */
.link-btn { display: block; width: 100%; min-height: 44px; margin-top: 4px; background: none; border: none; color: var(--gray-5);
  font: 500 var(--fs-sub) var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:active { color: var(--red); }

/* ---- Archiv-Modus (beendete Saison, nur lesbar) ---- */
.archiv .nur-aktiv { display: none !important; }
.archiv-banner { background: var(--green-mid); color: var(--green-accent); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.archiv-banner .titel { font-size: 15px; font-weight: 800; }
.archiv-banner .text { font-size: var(--fs-sub); color: var(--on-green-muted); line-height: 1.45; }
.archiv-banner .btn { margin: 0; }
.archiv-banner .btn.secondary { background: transparent; color: var(--green-accent); border-color: var(--green-accent); }

/* Gesperrte Felder sichtbar machen (z. B. Archiv, Loch-Modus nach Spielbeginn) */
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
.btn:disabled, .icon-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---- Update-Banner (neue App-Version) ---- */
#update-banner {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 9998;
  bottom: calc(76px + env(safe-area-inset-bottom)); width: min(440px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px;
  background: var(--green-dark); color: var(--green-accent); border-radius: var(--radius-md); box-shadow: var(--shadow-modal);
  font-size: var(--fs-sub); font-weight: 600;
}
#update-banner span { flex: 1; }
#update-banner button { min-height: 44px; padding: 0 16px; border: none; border-radius: var(--radius-sm);
  background: var(--green-accent); color: var(--green-dark); font: 800 14px var(--font); cursor: pointer; }

/* ---- Ladezustände (M11) ---- */
@keyframes spin { to { transform: rotate(360deg); } }
.lade-spinner { width: 40px; height: 40px; border: 3px solid var(--green-light); border-top-color: var(--green-accent); border-radius: 50%; animation: spin 1s linear infinite; }
/* Button während des Speicherns: Spinner vor dem Text, in der Textfarbe des Buttons */
.laedt::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.btn.laedt:disabled, .icon-btn.laedt:disabled, .login-btn.laedt:disabled { opacity: .8; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .laedt::before, .lade-spinner { animation-duration: 3s; } }

/* ---- Offline-Leiste ---- */
#offline-bar { position: fixed; left: 0; right: 0; top: 0; z-index: 9997; padding: calc(6px + env(safe-area-inset-top)) 16px 6px;
  background: #5c3a00; color: #fff3dc; font-size: var(--fs-meta); font-weight: 600; text-align: center; line-height: 1.4; }

/* ---- Barrierefreiheit (Audit N1) ---- */
/* Sichtbarer Fokusrahmen nur bei Tastaturbedienung — beim Tippen auf dem Handy erscheint er nicht */
:focus-visible { outline: 3px solid var(--green-light); outline-offset: 2px; }
.field input:focus-visible, .field select:focus-visible, .input-sm:focus-visible { outline: 2px solid var(--green-light); outline-offset: 1px; }
.radio-option:focus-visible, .match-item:focus-visible, .card:focus-visible { outline-offset: 0; }
/* Unsichtbar, aber per Tastatur und Screenreader erreichbar (z. B. Datei-Feld hinter dem Screenshot-Label) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#hcp-screenshot-lbl:has(+ #hcp-screenshot:focus-visible) { outline: 3px solid var(--green-light); outline-offset: 2px; }

/* ---- Live-Scoring: Loch schenken (Audit N6) ---- */
.ls-schenken { display: flex; gap: 8px; margin: -6px 0 12px; }
.ls-schenken .btn { flex: 1; min-width: 0; margin: 0; min-height: 44px; padding: 8px 6px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-schenken .btn[aria-pressed="true"] { background: var(--green-mid); color: var(--green-accent); }

/* ---- Dashboard „Zu erledigen“ + Zähler am Home-Tab (Audit N5) ---- */
.aufgaben { padding: 0 14px; }
.aufgabe { display: flex; align-items: center; gap: 12px; padding: 12px 0; min-height: 44px; border-bottom: 1px solid #d4880026; cursor: pointer; }
.aufgabe:last-child { border-bottom: none; }
.aufgabe.aufgabe-entscheiden { cursor: default; align-items: flex-start; }
.aufgabe-icon { font-size: 20px; flex-shrink: 0; width: 26px; text-align: center; }
.aufgabe-text { flex: 1; min-width: 0; }
.aufgabe-titel { font-size: 14px; font-weight: 700; color: var(--gray-8); }
.aufgabe-sub { font-size: var(--fs-sub); color: var(--gray-6); margin-top: 2px; }
.aufgabe-pfeil { font-size: 22px; color: var(--gray-5); flex-shrink: 0; }
.aufgabe-link { background: none; border: 0; padding: 0; font: inherit; color: var(--green-mid); font-weight: 700; text-decoration: underline; cursor: pointer; min-height: 0; }
.aufgabe-knoepfe { display: flex; gap: 8px; margin-top: 10px; }
.aufgabe-knoepfe .btn { flex: 1; margin: 0; min-height: 44px; }
.tab-item { position: relative; }
.tab-badge { position: absolute; top: -2px; left: calc(50% + 4px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--red); color: #fff; font: 800 11px/17px var(--font); text-align: center; }

/* ---- Spielplan (N4) ---- */
.sp-filter { background: var(--gray-0); padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 6px 8px; border-bottom: 1px solid var(--gray-2); flex-shrink: 0; }
.sp-filter-btn { background: var(--gray-2); color: var(--gray-6); border: none; padding: 6px 12px; min-height: 32px; border-radius: 16px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.sp-filter-btn.active { background: var(--green-mid); color: var(--green-accent); }
.sp-filter-btn .sp-anz { font-weight: 400; opacity: .75; margin-left: 2px; }
.sp-meine { margin-left: auto; }
.sp-vs { color: var(--gray-4); font-weight: 400; }
.sp-termin { color: var(--green-mid); font-weight: 600; }
.sp-vorschlag { color: var(--orange); }
.me-match { box-shadow: inset 3px 0 0 var(--green-light); padding-left: 10px; }
.sp-runde { border-bottom: 1px solid var(--gray-3); }
.sp-runde:last-child { border-bottom: none; }
.sp-runde > summary { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--gray-8); text-transform: uppercase; letter-spacing: .04em; }
.sp-runde > summary::-webkit-details-marker { display: none; }
.sp-runde > summary::before { content: '▸'; font-size: 12px; color: var(--gray-5); }
.sp-runde[open] > summary::before { content: '▾'; }
.sp-runde-stand { margin-left: auto; font-size: var(--fs-meta); font-weight: 400; color: var(--gray-5); text-transform: none; letter-spacing: 0; }
.sp-runde[open] { padding-bottom: 6px; }

/* ===================================
   Komponenten statt Inline-Styles (Audit N9)
   =================================== */

/* Inhaltsbereich mit Rand / randlos */
.pad   { padding: 16px; }
.flush { padding: 0; }
.pb-8  { padding-bottom: 8px; }
.p-10  { padding: 10px; }
.clip  { overflow: hidden; }
.sc-block { padding: 12px 0 8px; }
.section-label.eingerueckt { padding: 10px 16px 6px; margin-bottom: 10px; }
.empty-state.kompakt { padding: 20px; }
.lade-hinweis { padding: 20px; text-align: center; color: var(--gray-5); }
.login-hilfe { color: var(--green-accent); max-width: 320px; margin: 10px auto 0; font-size: var(--fs-sub); }
.login-hint.version { margin-top: 8px; opacity: .7; font-size: var(--fs-meta); }

/* Kleine Überschrift (Großbuchstaben) innerhalb von Karten und Listen */
.kicker { font-size: var(--fs-meta); font-weight: 700; color: var(--gray-5); text-transform: uppercase; letter-spacing: .6px; }
.sub-title { font-size: var(--fs-meta); font-weight: 700; color: var(--green-mid); margin-bottom: 6px; }
.hint-text { font-size: var(--fs-meta); color: var(--gray-5); }
.hint-text.error { color: var(--red); }

/* Getönte Fläche (Formularblock, Live-Scoring) */
.panel { background: var(--gray-1); border: 1.5px solid var(--gray-3); border-radius: var(--radius-md); padding: 13px; }
.panel.green { background: var(--green-bg); border-color: #3a6a3a44; }

/* Tabellenartige Listen im Admin-Bereich: Kasten, Kopfzeile, Zeilen */
.list-box  { background: var(--gray-1); border: 1.5px solid var(--gray-3); border-radius: var(--radius-md); overflow: hidden; }
.list-head { background: var(--green-mid); color: var(--green-accent); font-size: var(--fs-meta); font-weight: 700; padding: 7px 12px; display: flex; gap: 8px; }
.list-band { background: var(--green-mid); color: var(--green-accent); font-size: var(--fs-meta); font-weight: 700; padding: 5px 12px; letter-spacing: .6px; }
.list-row  { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--gray-2); }
.list-row.lg { padding: 8px 12px; }
.list-row.split { justify-content: space-between; font-size: 13px; }
.list-row.aus { color: var(--gray-5); }
.list-label { font-size: var(--fs-meta); font-weight: 700; color: var(--gray-6); }
.list-caption { padding: 8px 12px 4px; }
.list-leer { padding: 10px 12px; color: var(--gray-5); font-size: var(--fs-meta); }
.input-cell { width: 100%; font-size: var(--fs-meta); border: 1.5px solid var(--gray-3); border-radius: 6px; padding: 4px 6px; text-align: center; }
.input-cell.text { font-size: 13px; padding: 5px 8px; text-align: left; }

/* Unsichtbares Benutzername-Feld für Passwort-Manager */
.field input.pm-feld { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Kleiner getönter Aktionsknopf neben Eingabefeldern */
.chip-btn { background: var(--green-bg); color: var(--green-mid); border: 1px solid var(--green-light); border-radius: var(--radius-sm); padding: 8px 14px; font-size: var(--fs-meta); font-weight: 600; cursor: pointer; white-space: nowrap; }

/* Kompakte Knöpfe im PIN-Formular */
.mini-btn { background: var(--gray-0); color: var(--gray-5); border: 1px solid var(--gray-3); border-radius: 6px; font-size: var(--fs-meta); padding: 7px 10px; cursor: pointer; }
.mini-btn.primary { background: var(--green-mid); color: var(--green-accent); border: none; font-weight: 700; padding: 7px 12px; }
.mini-input { flex: 1; min-width: 0; font-size: 14px; border: 1.5px solid var(--gray-3); border-radius: 6px; padding: 7px 10px; }
.input-hcp { width: 76px; text-align: center; }
.btn.kompakt { width: auto; margin: 0; min-height: 36px; }
.icon-btn.green { background: var(--green-bg); color: var(--green-mid); border-color: var(--green-light); }
.pin-form { padding: 8px 12px 10px; background: var(--gray-1); border-top: 1px solid var(--gray-2); }

/* Großer Kennwert rechts in einer Karte (Punkte, Course HCP) */
.kennwert { font-size: 30px; font-weight: 900; color: var(--green-mid); }
.kennwert.sm { font-size: 28px; }
.kennwert-label { font-size: var(--fs-meta); color: var(--gray-5); font-weight: 600; text-transform: uppercase; }

/* Stand-Leiste oben in Live-Scoring und Scorekarte */
.stand-bar   { background: var(--green-mid); padding: 10px 16px; text-align: center; }
.stand-label { color: var(--green-accent); font-size: 16px; font-weight: 800; }
.stand-label.gross { font-size: 18px; }
.stand-sub   { color: var(--on-green-muted); font-size: var(--fs-meta); margin-top: 2px; }

/* Live-Scoring: Loch-Kopf, Spieler-Felder, Ergebnis-Meldung */
.ls-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ls-loch { font-size: 20px; font-weight: 900; color: var(--green-mid); }
.ls-feld { flex: 1; min-width: 0; padding: 10px 6px; text-align: center; }
.ls-name { font-size: var(--fs-meta); font-weight: 700; color: var(--gray-5); margin-bottom: 8px; }
.ls-zaehler { display: flex; align-items: center; justify-content: center; gap: 6px; }
.ls-score { font-size: 32px; font-weight: 900; color: var(--gray-8); min-width: 40px; text-align: center; }
.panel.green .ls-score { color: var(--green-mid); }
.ls-meldung { text-align: center; padding: 8px; border-radius: var(--radius-sm); margin-bottom: 12px; font-weight: 700; font-size: 14px; }
.ls-meldung.geteilt  { background: var(--gray-2); color: var(--gray-6); }
.ls-meldung.gut      { background: var(--green-bg); color: var(--green-text); }
.ls-meldung.schlecht { background: var(--orange-bg); color: var(--orange); }
.btn.secondary.gewaehlt { background: var(--green-mid); color: var(--green-accent); border-color: var(--green-mid); }
.ls-zurueck { flex: 0 0 auto; width: 48px; padding: 14px 0; font-size: 18px; }

/* Datei-Auswahl (HCP-Screenshot) und Vorschaubilder */
.field label.datei-wahl { display: flex; align-items: center; gap: 10px; background: var(--gray-1); border: 1.5px dashed var(--gray-3); border-radius: var(--radius-sm); padding: 14px 13px; cursor: pointer; transition: border-color .15s; }
/* nicht die Großbuchstaben-Optik der Feld-Überschriften (.field label) erben */
.field label.datei-wahl { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--gray-5); }
.field label.datei-wahl.hat-datei { border-color: var(--green-light); }
.bild { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--gray-3); display: block; }

/* Erledigter Schritt (Einrichtungs-Checkliste) */
.erledigt { color: var(--gray-5); text-decoration: line-through; }

/* Vollbild-Hinweise auf dunklem Grund (Laden, Verbindungsfehler) */
.lade-overlay { position: fixed; inset: 0; background: rgba(13,32,16,.96); z-index: 9999; align-items: center; justify-content: center; flex-direction: column; gap: 16px; padding: 0 28px; text-align: center; }
.lade-text { color: var(--green-accent); font-size: 15px; line-height: 1.4; }
.lade-text.sub { color: var(--on-green-muted); font-size: 13px; }
.fehler-voll { color: #fff; text-align: center; padding: 0 28px; }

/* Hilfsklassen — mit !important, damit sie wie die früheren Inline-Styles
   auch Regeln wie .btn:last-child oder .field:last-child schlagen */
.row    { display: flex; gap: 8px; }
.row-c  { display: flex; align-items: center; gap: 8px; }
.grow   { flex: 1 !important; min-width: 0 !important; }
.f1 { flex: 1 !important; } .f2 { flex: 2 !important; } .f3 { flex: 3 !important; } .f4 { flex: 4 !important; }
.f-auto { flex: 0 0 auto !important; }
.w-full { width: 100% !important; }
.text-right  { text-align: right !important; }
.text-center { text-align: center !important; }
.text-none   { text-transform: none !important; }
.lh-15 { line-height: 1.5 !important; }
.lh-16 { line-height: 1.6 !important; }
.clickable { cursor: pointer !important; }
.mh-44 { min-height: 44px !important; }
.w-64  { width: 64px !important; }
.mw-260 { max-width: 260px !important; }
.px-eng { padding: 4px 2px !important; }
.min-0  { min-width: 0 !important; }
.gap-6  { gap: 6px !important; }
.gap-10 { gap: 10px !important; }
.fs-12  { font-size: var(--fs-meta) !important; }
.fs-13  { font-size: 13px !important; }
.fs-22  { font-size: 22px !important; }
.fs-32  { font-size: 32px !important; }
.fw-400 { font-weight: 400 !important; }
.mb-20  { margin-bottom: 20px !important; }
.fw-600 { font-weight: 600 !important; }
.strike { text-decoration: line-through !important; }
.c-gray6 { color: var(--gray-6) !important; }
.list-name { font-size: 13px !important; font-weight: 600 !important; }
.aktuell-hinweis { font-size: var(--fs-meta) !important; color: var(--green-mid) !important; margin-top: 6px !important; padding-top: 6px !important; border-top: 1px solid var(--gray-2) !important; }
.c-red    { color: var(--red) !important; }
.c-orange { color: var(--orange) !important; }
.c-gray   { color: var(--gray-5) !important; }
.c-meta   { color: var(--gray-4) !important; }
.m-0   { margin: 0 !important; }
.mt-0  { margin-top: 0 !important; }
.mt-4  { margin-top: 4px !important; }
.mt-6  { margin-top: 6px !important; }
.mt-10 { margin-top: 10px !important; }
.mb-0  { margin-bottom: 0 !important; }
.mb-6  { margin-bottom: 6px !important; }
.mb-8  { margin-bottom: 8px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-12 { margin-bottom: 12px !important; }
.mb-14 { margin-bottom: 14px !important; }
.mb-16 { margin-bottom: 16px !important; }
.ml-4  { margin-left: 4px !important; }
.ml-6  { margin-left: 6px !important; }
.my-8  { margin-top: 8px !important; margin-bottom: 8px !important; }
.my-16 { margin-top: 16px !important; margin-bottom: 16px !important; }
.mz-12 { margin-top: 12px !important; margin-bottom: 8px !important; }   /* Abschnitt im Formular */
.py-8  { padding-top: 8px !important; padding-bottom: 8px !important; }