/* ── App shell ─────────────────────────────────────────── */
#app { min-height: 100dvh; display: flex; flex-direction: column; }
.screen { flex: 1; display: flex; flex-direction: column; }

/* ── Loading overlay ────────────────────────────────────── */
#loading-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: #111a12;
  display: flex; align-items: center; justify-content: center;
}
.loading-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
#loading-text { font-size: 0.9rem; color: var(--color-text-muted); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Login ──────────────────────────────────────────────── */
.login-container {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px;
  background: var(--color-bg);
}
.login-logo { text-align: center; margin-bottom: 32px; }
.login-logo .app-icon { font-size: 3.5rem; display: block; margin-bottom: 10px; }
.login-logo h1 { color: var(--color-primary); font-size: 1.7rem; }
.login-subtitle { color: var(--color-text-muted); font-size: 0.9rem; margin-top: 4px; }
.login-logo-img { width: 180px; height: auto; display: block; margin: 0 auto 12px; }
#login-form-area { width: 100%; max-width: 340px; }
.btn-login {
  width: 100%;
  background: var(--color-primary); color: #fff;
  font-weight: 600; font-size: 1.05rem;
  padding: 14px; border-radius: var(--radius);
  margin-top: 4px;
}
.btn-login:hover:not(:disabled) { background: var(--color-primary-dark); }
#login-message {
  margin-top: 16px; padding: 12px; border-radius: var(--radius);
  font-size: 0.9rem; text-align: center;
}
#login-message.success { background: #d4edda; color: #155724; }
#login-message.error   { background: #f8d7da; color: #721c24; }
.login-footer { margin-top: 32px; }
.login-magic-link { margin-top: 14px; text-align: center; }
.btn-text-link {
  background: none; border: none; padding: 6px;
  color: var(--color-primary); font-size: 0.88rem;
  text-decoration: underline; cursor: pointer;
  border-radius: 0;
}
.btn-text-link:hover { color: var(--color-primary-dark); }

/* ── Nav ────────────────────────────────────────────────── */
#app-nav {
  height: var(--nav-h);
  background: var(--color-primary);
  color: #fff;
  display: flex; align-items: center;
  padding: 0 12px;
  gap: 8px;
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow);
  flex-shrink: 0;
}
/* Sub-page: hide global nav to avoid double title */
#app-nav.nav-subpage { display: none; }
.nav-left { flex: 1; min-width: 0; }
.nav-title-btn {
  background: transparent; color: #fff;
  font-size: 1.05rem; font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 4px; border-radius: var(--radius-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 200px;
}
.nav-title-btn:hover { background: rgba(255,255,255,0.12); }
.nav-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
#nav-user-info { font-size: 0.8rem; opacity: 0.9; white-space: nowrap; }
.icon-btn {
  background: transparent; color: #fff;
  font-size: 1.3rem; padding: 7px; border-radius: var(--radius-sm); line-height: 1;
}
.icon-btn:hover { background: rgba(255,255,255,0.15); }

/* ── Page content ───────────────────────────────────────── */
#page-content {
  flex: 1;
  padding: 16px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

/* ── Home tiles ─────────────────────────────────────────── */
.home-header { margin-bottom: 18px; }
.home-user-line { font-size: 0.9rem; color: var(--color-text-muted); }
.home-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 400px) { .home-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .home-tiles { grid-template-columns: repeat(4, 1fr); } }

.tile {
  position: relative; /* für .tile-unseen-dot (Build 106) */
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--color-border);
  padding: 20px 10px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-align: center;
  transition: box-shadow 0.15s, transform 0.1s, border-color 0.15s;
  min-height: 96px;
  user-select: none;
}
.tile:hover  { box-shadow: var(--shadow); border-color: var(--color-primary-light); transform: translateY(-1px); }
.tile:active { transform: translateY(0); }
.tile-icon  { font-size: 1.9rem; line-height: 1; }
.tile-label { font-size: 0.875rem; font-weight: 600; color: var(--color-text); }
/* Tiles mit eingeschränktem Schreibzugriff (TODO-033 / Build 103) */
.tile-readonly { opacity: 0.65; }
.tile-readonly:hover { opacity: 1; }
.tile-readonly-hint {
  font-size: 0.58rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: -2px;
  line-height: 1;
}
/* Home-Kachel: ungelesene Änderungen (Build 106 / TODO-038) */
.tile-unseen {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px rgba(196, 162, 58, 0.35), var(--shadow-sm);
}
.tile-unseen:hover { border-color: var(--color-accent); }
.tile-unseen-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  pointer-events: none;
}
.tile-private-dot {
  position: absolute;
  bottom: 5px; left: 6px;
  font-size: 0.6rem;
  opacity: 0.55;
  pointer-events: none;
  line-height: 1;
}
/* Individuelle Kachelfarben (Build 129) — subtile Farbtöne, gleiche Helligkeit */
.tile[data-route="/tagebuch"]   { background: #1c2e1e; } /* Jagdgrün (Basis)   */
.tile[data-route="/jagdzeiten"] { background: #1a2d1a; } /* Moosgrün           */
.tile[data-route="/map"]        { background: #172a2e; } /* Blau-grün (Karte)  */
.tile[data-route="/markers"]    { background: #242a17; } /* Dunkeloliv         */
.tile[data-route="/abschuss"]   { background: #2e1e1a; } /* Dunkelbraun-rot    */
.tile[data-route="/news"]       { background: #1a1e2e; } /* Dunkelblau         */
.tile[data-route="/termine"]    { background: #1e1a2e; } /* Dunkel-Indigo      */
.tile[data-route="/jagdbetrieb"]{ background: #182618; } /* Dunkel-Tanne       */
.tile[data-route="/druckjagd"]  { background: #2a1e16; } /* Dunkel-Terrakotta  */
.tile[data-route="/wiki"]           { background: #2a2416; } /* Dunkel-Goldbraun   */
.tile[data-route="/jagdstatistik"]  { background: #1e2628; } /* Dunkel-Slate       */
.tile[data-route="/aufgaben"]       { background: #182a24; } /* Dunkel-Teal        */

/* Aufgaben-Modul */
.aufgabe-card-done  { opacity: 0.55; }
.aufgabe-text-done  { text-decoration: line-through; color: var(--color-text-muted); }

/* Karte/Listeneintrag: neu seit letztem Besuch (Build 106 / TODO-038) */
.app-card-unseen {
  border-left: 4px solid var(--color-accent) !important;
  background: rgba(196, 162, 58, 0.05) !important;
}

/* ── Page header ────────────────────────────────────────── */
.page-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 20px;
  /* Ensure meta on right doesn't push title off screen */
  flex-wrap: nowrap; min-width: 0;
}
.back-btn {
  background: transparent; color: var(--color-primary);
  padding: 6px 8px; font-size: 1.2rem; border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.back-btn:hover { background: var(--color-border); }
.page-header h2 { font-size: 1.2rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Sub-page header meta (injected by router) ──────────── */
.ph-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}
.ph-meta-user {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.ph-meta-build {
  font-size: 0.6rem;
  color: var(--color-text-muted);
  opacity: 0.6;
  white-space: nowrap;
  /* Hide build number on very narrow screens to save space */
}
@media (max-width: 360px) { .ph-meta-build { display: none; } }
.ph-meta-btn {
  background: transparent;
  color: var(--color-primary);
  font-size: 1.15rem;
  padding: 5px 6px;
  border-radius: var(--radius-sm);
  line-height: 1;
  flex-shrink: 0;
}
.ph-meta-btn:hover { background: var(--color-border); }

/* Mitglieder-Ansicht (Testmodus für Admins).
   Aktiv deutlich hervorgehoben, damit niemand vergisst, dass die Oberfläche
   gerade beschnitten ist. */
.ph-view-toggle { font-size: 1rem; opacity: 0.75; }
.ph-view-toggle:hover { opacity: 1; }
.ph-view-active {
  opacity: 1;
  background: rgba(var(--color-warning-rgb), 0.22);
  box-shadow: inset 0 0 0 1px var(--color-warning);
}

/* ── Toast ──────────────────────────────────────────────── */
#toast-container {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 9998; display: flex; flex-direction: column; gap: 8px;
  align-items: center; pointer-events: none;
}
.toast {
  background: #333; color: #fff;
  padding: 10px 20px; border-radius: 20px;
  font-size: 0.9rem; box-shadow: var(--shadow);
  animation: toastIn 0.2s ease;
  pointer-events: auto;
  max-width: 320px; text-align: center;
}
.toast.success { background: var(--color-primary); }
.toast.error   { background: var(--color-danger); }
.toast.warning { background: var(--color-warning); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Settings ───────────────────────────────────────────── */
.settings-section { margin-bottom: 24px; }
.settings-section h3 {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--color-text-muted);
  margin-bottom: 8px; padding-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
}
.settings-list { display: flex; flex-direction: column; gap: 4px; }
.settings-item {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; text-align: left;
  transition: border-color 0.15s;
  /* Explicit color: <button> may not inherit from body on iOS/Android */
  color: var(--color-text);
  font-size: 1rem; width: 100%;
}
.settings-item:hover:not(:disabled) { border-color: var(--color-primary-light); }
.settings-item:disabled { opacity: 0.5; cursor: default; }
.settings-item-icon { font-size: 1.2rem; }
.settings-item-text { flex: 1; color: var(--color-text); }
.settings-item-arrow { color: var(--color-text-muted); font-size: 1.1rem; }
.settings-info-item {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  font-size: 1rem;
  color: var(--color-text);
}
.settings-hint { font-size: 0.82rem; color: var(--color-text-muted); margin-top: 2px; }
.settings-logout-btn {
  width: 100%;
  background: var(--color-danger); color: #fff;
  padding: 14px; border-radius: var(--radius);
  font-size: 1rem; font-weight: 600;
  margin-top: 4px;
}
.settings-logout-btn:hover:not(:disabled) { background: #a93226; }

/* ── Marker-Typ Vorschau ────────────────────────────────── */
.marker-prev-rect {
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 2px;
  font-weight: 700;
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  line-height: 1;
}
.marker-prev-circle {
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.builtin-badge {
  display: inline-block;
  font-size: 0.68rem;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--color-border);
  color: var(--color-text-muted);
  margin-left: 4px;
  vertical-align: middle;
}
.mt-toolbar { margin-bottom: 12px; }
.mt-form-preview {
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  margin-bottom: 20px;
  padding: 20px;
  background: #e8e4d8;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  min-height: 80px;
}
.mt-preview-box { min-height: 40px; display: flex; align-items: center; justify-content: center; }
.mt-preview-label { font-size: 0.75rem; color: var(--color-text-muted); }

/* ── Marker Import ──────────────────────────────────────── */
.import-summary { margin-bottom: 16px; }
.import-summary h3 { font-size: 1rem; margin-bottom: 10px; }
.import-info-table { border-collapse: collapse; margin-bottom: 12px; font-size: 0.9rem; }
.import-info-table td { padding: 4px 12px 4px 0; }
.import-info-table td:first-child { color: var(--color-text-muted); white-space: nowrap; }
.import-warn {
  background: #fff3cd; border: 1px solid #ffc107;
  border-radius: var(--radius); padding: 10px 14px;
  font-size: 0.88rem; margin-bottom: 12px;
}
.import-row-invalid { opacity: 0.45; }
.import-success {
  background: #d4edda; color: #155724;
  border-radius: var(--radius); padding: 12px 16px;
  font-weight: 600;
}

/* ── Stub placeholder ───────────────────────────────────── */
.stub-placeholder {
  text-align: center;
  padding: 48px 16px;
  color: var(--color-text-muted);
}
.stub-placeholder p { font-size: 0.95rem; }

/* ── Section label ──────────────────────────────────────── */
.section-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-text-muted);
  margin: 20px 0 10px;
}

/* ── News cards ─────────────────────────────────────────── */
.news-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.news-pinned { border-left: 4px solid var(--color-primary); }
.news-pin-badge { font-size: 0.78rem; color: var(--color-primary); font-weight: 600; margin-bottom: 6px; }
.news-card-title { font-weight: 700; font-size: 1.02rem; margin-bottom: 4px; }
.news-card-date  { font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: 8px; }
.news-card-body  { font-size: 0.9rem; line-height: 1.55; white-space: pre-wrap; }
.app-card-actions { display: flex; gap: 8px; margin-top: 12px; }
.btn-sm { font-size: 0.78rem !important; padding: 5px 10px !important; }

/* ── Serientermin Badge + Form (Build 102 / TODO-041) ───── */
.termin-series-badge {
  display: inline-block;
  font-size: 0.65rem; font-weight: 600;
  padding: 1px 6px; border-radius: 8px;
  background: rgba(74,138,66,0.18); color: #90d080;
  vertical-align: middle; margin-left: 4px;
  white-space: nowrap;
}
.termin-series-toggle {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.termin-series-opts {
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 12px;
}
.termin-series-preview {
  margin-top: 6px;
}

/* ── Termine cards ──────────────────────────────────────── */
.termin-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-left: 4px solid var(--color-primary-light);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}
.termin-card-date  { font-size: 0.82rem; font-weight: 600; color: var(--color-primary); margin-bottom: 4px; }
.termin-card-until { font-size: 0.78rem; color: var(--color-text-muted); font-weight: 400; }
.termin-card-title { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.termin-card-location { font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 4px; }
.termin-card-desc  { font-size: 0.88rem; margin-top: 6px; line-height: 1.5; }

/* ── Freigaben (Route /jagdbetrieb) ─────────────────────── */
/* Gruppen (Build 200): Abschnittskopf statt Rahmen — dieselbe Vorgabe wie
   Wiki, Termine und Gesellschafts-Jagd. Der Kopf trägt die Beschriftung als
   Schaltfläche, damit das Auf- und Zuklappen ein grosses Ziel hat. */
.jb-gruppe-toggle {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; text-align: left;
}
.jb-gruppe-toggle:hover { color: var(--color-text); }
.jb-gruppe-items { margin-bottom: 4px; }
/* Ausgeblendete Gruppe (Build 202): gestrichelt und blass — sie sieht nur
   der Jagdleiter im Bearbeiten-Modus und soll sie nicht mit dem verwechseln,
   was im Revier gilt. */
.jb-versteckt { opacity: 0.55; }
.app-section-head.jb-versteckt {
  border-left: 2px dashed var(--color-accent);
  padding-left: 8px;
}
.jb-auge { display: inline-flex; align-items: center; padding: 3px 6px; }
.freigabe-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-left: 4px solid #1565c0;
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}
.freigabe-header { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.freigabe-wildart { font-weight: 700; font-size: 1rem; }
.freigabe-chip {
  font-size: 0.75rem; padding: 2px 8px; border-radius: 10px;
  background: var(--color-border); color: var(--color-text-muted);
}
.freigabe-prio { font-size: 0.75rem; font-weight: 700; margin-left: auto; }
.freigabe-zeitraeume { font-size: 0.85rem; margin-bottom: 4px; }
.freigabe-meta { font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 2px; }
.freigabe-bedingungen { font-size: 0.85rem; margin-top: 6px; line-height: 1.5; }
.freigabe-notiz { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 6px; font-style: italic; }
.zeitraum-row {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px; flex-wrap: wrap;
}
.zeitraum-row input[type="text"] { flex: 1; min-width: 90px; }

/* ── Abschussmeldung ────────────────────────────────────── */
.abschuss-form-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.abschuss-entry {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}
/* Eigener Eintrag: roter Linksrand + dezenter Hintergrund (Build 107 / TODO-043) */
.abschuss-entry-own {
  border-left: 4px solid var(--color-danger);
  background: rgba(var(--color-danger-rgb), 0.04);
}
.abschuss-entry-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.abschuss-wildart { font-weight: 700; font-size: 0.95rem; flex: 1; }
.abschuss-date { font-size: 0.78rem; color: var(--color-text-muted); }
.abschuss-meta { font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 2px; }
.abschuss-bemerkung { font-size: 0.85rem; margin-top: 6px; }
.abschuss-status {
  display: inline-block;
  font-size: 0.72rem; font-weight: 600;
  padding: 2px 8px; border-radius: 10px;
  margin-top: 6px;
  background: #e3f2fd; color: #1565c0;
}
.abschuss-status.status-submitted { background: #fff8e1; color: #e65100; }

/* ── Tagebuch (v2) ──────────────────────────────────────── */
.tb-tabs {
  display: flex; gap: 0;
  border-bottom: 2px solid var(--color-border);
  background: var(--color-surface);
  padding: 0 16px;
}
.tb-tab {
  background: transparent; border: none;
  padding: 11px 18px; font-size: 0.9rem; font-weight: 600;
  color: var(--color-text-muted); cursor: pointer;
  border-bottom: 2.5px solid transparent; margin-bottom: -2px;
}
.tb-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.tb-action-bar { padding: 12px 16px 4px; }
.tb-month-group { margin-bottom: 12px; }
.tb-month-label {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--color-text-muted);
  padding: 10px 4px 6px;
}
/* compact card row — line 1 */
.tb-row-head {
  display: flex; align-items: center; gap: 5px;
  min-height: 28px; flex-wrap: nowrap;
}
.tb-head-date {
  font-size: 0.79rem; font-weight: 700;
  white-space: nowrap; flex-shrink: 0;
}
.tb-head-time {
  font-size: 0.76rem; color: var(--color-text-muted);
  white-space: nowrap; flex-shrink: 0;
}
.tb-head-ort {
  flex: 1; min-width: 0;
  font-size: 0.76rem; color: var(--color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* line 2 — weather + weapon */
.tb-row-meta2 {
  font-size: 0.73rem; color: var(--color-text-muted);
  margin-top: 2px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.tb-acts { display: flex; gap: 1px; flex-shrink: 0; margin-left: 2px; }
.tb-det-erlegt { color: #d87070; font-weight: 600; }
.tb-form-header { padding: 14px 16px 0; }
.tb-form-header h3 { font-size: 1.05rem; }
.tb-section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
}
.tb-section-title {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--color-text-muted);
  margin-bottom: 10px; display: flex; align-items: center;
}
.tb-wx-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px;
}
.tb-list-row {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px; flex-wrap: wrap;
}
.tb-list-row input[type="text"], .tb-list-row select { font-size: 0.85rem; }

/* ── News images & PDFs ──────────────────────────────────── */
.news-images { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.news-img { width: 100%; max-width: 240px; height: 150px; object-fit: contain;
  border-radius: var(--radius-sm); border: 1px solid var(--color-border); }
.news-images-edit { display: flex; flex-wrap: wrap; gap: 8px; }
.news-img-wrap { position: relative; display: inline-block; }
.news-img-del {
  position: absolute; top: 4px; right: 4px;
  background: rgba(0,0,0,0.55); color: #fff;
  border: none; border-radius: 50%;
  width: 22px; height: 22px; font-size: 0.75rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
/* PDF attachment card */
.news-pdf-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 140px; min-height: 90px; padding: 10px 8px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface2); text-decoration: none; color: var(--color-text);
  gap: 4px; text-align: center;
}
.news-pdf-card:hover { background: var(--color-primary-light, #f0f4e8); border-color: var(--color-primary); }
.news-pdf-icon  { font-size: 2rem; line-height: 1; }
.news-pdf-name  { font-size: 0.72rem; color: var(--color-text-muted); word-break: break-all; max-width: 120px; line-height: 1.3; }
.news-pdf-open  { font-size: 0.7rem; color: var(--color-primary); margin-top: 2px; }

/* ── Tagebuch Statistik ──────────────────────────────────── */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}
.stat-card {
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 14px 10px;
  text-align: center;
}
.stat-card-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.1;
}
.stat-card-label {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stat-jagd-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.83rem;
}

/* ── Tagebuch action row ─────────────────────────────────── */
.tb-action-row {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  align-items: center;
  padding: 10px 16px 6px;
}
.tb-action-row button { white-space: nowrap; flex-shrink: 0; }

/* ── Tagebuch Statistik Tabelle ──────────────────────────── */
.stat-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.stat-table {
  border-collapse: collapse;
  min-width: 100%;
  font-size: 0.85rem;
  white-space: nowrap;
}
.stat-table th,
.stat-table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--color-border);
  text-align: right;
}
.stat-th-label,
.stat-td-label {
  text-align: left;
  font-weight: 600;
  background: var(--color-surface2);
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 110px;
}
.stat-th-year {
  font-weight: 600;
  color: var(--color-text-muted);
  min-width: 72px;
}
.stat-col-current {
  background: rgba(var(--color-success-rgb), 0.08);
  font-weight: 700;
  color: var(--color-primary);
}
.stat-table thead .stat-col-current { color: var(--color-primary); }
.stat-row-main td { font-weight: 600; }
.stat-row-species td { color: var(--color-text-muted); font-size: 0.8rem; }
.stat-row-species .stat-td-label { padding-left: 20px; }
.stat-table tbody tr:last-child td { border-bottom: none; }

/* ── Wetter-Grid: kompakte Inputs ───────────────────────── */
.tb-wx-grid .form-group { margin-bottom: 6px; gap: 2px; }
.tb-wx-grid .form-group label { font-size: 0.7rem; }
.tb-wx-grid input,
.tb-wx-grid select { padding: 4px 6px; font-size: 0.82rem; line-height: 1.3; }

/* ── Anblick-Einträge: klare Trennung ───────────────────── */
#tf-anblick-list .tb-list-row {
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-bottom: 8px;
}


/* jzv-card-name ist nach components.css umgezogen (Alias von .app-card-title) */

/* ── Wiki ─────────────────────────────────────────────────── */
/* wiki-group-label/-count sind nach .app-section-head + .section-label
   umgezogen (Build 200) — sie waren eine Beinahe-Kopie der Hausvorgabe. */
.wiki-article-header:hover { background: rgba(255,255,255,0.04); }

/* ── Drückjagd Modul ────────────────────────────────────────
   CSS aus druckjagd.js MODULE_STYLE hierher verschoben
   (Build 101 / TODO-031). Globale Verfügbarkeit fixes den
   Bug, dass DJ-Klassen fehlen wenn man /termine vor
   /druckjagd öffnet.                                       */
#dj-matrix { display: block; }
#dj-mobile  { display: none;  }

.dj-badge {
  font-size: 0.68rem; padding: 2px 7px; border-radius: 8px;
  display: inline-block; line-height: 1.5; white-space: nowrap;
}
.dj-badge-green { background: rgba(74,138,66,0.18);  color: #90d080; }
.dj-badge-gold  { background: rgba(196,162,58,0.20); color: var(--color-accent); }
.dj-badge-red   { background: rgba(var(--color-danger-rgb), 0.18);  color: var(--color-danger); }

.dj-waf {
  font-size: 0.78rem; padding: 3px 5px; border-radius: 4px;
  border: 1px solid var(--color-border); background: var(--color-surface2);
  color: var(--color-text); width: 100%; box-sizing: border-box;
  cursor: pointer; margin-top: 3px;
}
.dj-name-inp {
  font-size: 0.82rem; padding: 3px 6px; border-radius: 4px;
  border: 1px solid var(--color-border); background: var(--color-surface2);
  color: var(--color-text); min-width: 90px; width: 100%; box-sizing: border-box;
}
.dj-part-chk {
  accent-color: var(--color-primary); width: 15px; height: 15px;
  cursor: pointer; vertical-align: middle; flex-shrink: 0;
}
.dj-pbem {
  width: 100%; min-height: 26px; padding: 2px 5px; border-radius: 3px;
  border: 1px solid var(--color-border); background: var(--color-surface2);
  color: var(--color-text); font-size: 0.74rem; box-sizing: border-box;
  resize: vertical; margin-top: 5px;
}
/* tables.css gibt jedem thead th einen grünen Balken. In dieser Matrix steht
   im Kopf aber mehrzeiliger Inhalt (Datum, Gebiet, Jagdart, Beginn) — auf dem
   Grün wäre davon nur die erste Zeile lesbar. Wie bei .jst-tbl deshalb
   zurückgenommen auf eine Beschriftung mit Trennlinie. */
.dj-matrix-tbl { font-size: 0.81rem; }
.dj-matrix-tbl thead th {
  background: transparent;
  color: var(--color-text-muted);
  padding: 5px 8px 6px;
  font-weight: 600;
  white-space: normal;          /* tables.css setzt nowrap — hier unerwünscht */
}

/* Spaltenbreiten: Umbruch und festes Layout kommen aus .app-table. */
.dj-matrix-tbl col.dj-c-name   { width: 160px; }
.dj-matrix-tbl col.dj-c-termin { width: 175px; }

.dj-th {
  text-align: left; padding: 5px 8px 6px; vertical-align: top;
  color: var(--color-text-muted); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: .04em; font-weight: 600; border-bottom: 1px solid var(--color-border);
}
.dj-td { padding: 5px 7px; vertical-align: top; border-bottom: 1px solid rgba(255,255,255,.04); }
.dj-termin-th {
  text-align: center; padding: 5px 10px 7px; vertical-align: top;
  border-bottom: 1px solid var(--color-border); border-left: 1px solid var(--color-border);
}
.dj-th-datum { font-weight: 700; font-size: 0.85rem; color: var(--color-text); }
.dj-th-ort   { font-size: 0.73rem; color: var(--color-text-muted); margin-top: 2px; }
.dj-termin-td {
  padding: 6px 8px; vertical-align: top;
  border-bottom: 1px solid rgba(255,255,255,.04);
  border-left: 1px solid rgba(255,255,255,.06);
}
/* ── Gesellschafts-Jagd: nur das, was diese Matrix wirklich braucht ────────
   Alles Allgemeine — Karten, Titel, Hinweise, Notizen, Leerzustände, kleine
   Aktionsknöpfe — kommt aus styles/components.css. Hier steht nur, was es
   sonst nirgends gibt. */
.dj-serie-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
/* .dj-serie-phase trägt .app-mini-btn und ist nur noch der Anfasser für den
   Klick-Handler — die Gestaltung kommt aus components.css (Build 201). */
.dj-fr select {
  width: 100%; box-sizing: border-box; padding: 5px 8px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--color-border); background: var(--color-surface2); color: var(--color-text);
  font-size: 0.76rem;
}

/* Zellinhalt der Matrix */
.dj-zelle-ja   { color: var(--color-text); font-size: 0.76rem; }
.dj-zelle-nein { color: var(--color-text); font-size: 0.76rem; }
.dj-zelle-sub  { font-size: 0.73rem; color: var(--color-text); margin-top: 2px; }
.dj-zelle-bem  { font-size: 0.73rem; color: var(--color-text); margin-top: 3px; font-style: italic; }
.dj-part-lbl   { display: flex; align-items: center; gap: 5px; cursor: pointer; font-size: 0.76rem; }

/* „Meine nächsten Jagden" (Build 179/180) — Aufbau wie die Jagdkalender-Karten:
   eine Karte je Serie, die einzelnen Jagden nur durch feine Linien getrennt.
   Eine einzige Schriftgrösse (wie .app-subitem), fett nur die Kopfzeile. */
.dj-mj-item {
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  line-height: 1.45;
}
.dj-mj-item:last-child { border-bottom: none; }
/* Alle Zeilen eines Eintrags in derselben Schrift — nur die Kopfzeile mit
   Datum und Uhrzeit ist fett. Farbe trägt die Bedeutung, nicht die Grösse. */
.dj-mj-item > div {
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--color-text);
}
.dj-mj-kopf      { font-weight: 700; }
.dj-mj-meta      { color: var(--color-text-muted); }
.dj-mj-zuteilung { color: var(--color-accent); }

/* Namensspalte trägt seit Build 184 auch Status und Abschicken-Knopf —
   ganz rechts in einer eigenen Spalte fand ihn niemand. */
.dj-name-td { /* Breite kommt aus der colgroup */ }
/* Lange Namen brechen um, statt die Spalte aufzuziehen */
.dj-person  { font-weight: 700; color: var(--color-text); overflow-wrap: anywhere; }
.dj-ich     { font-size: 0.65rem; color: var(--color-text); margin-top: 2px; }
.dj-status-block {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  margin-top: 6px;
}
.dj-status-block .btn-primary,
.dj-status-block .btn-secondary { font-size: 0.73rem; padding: 4px 10px; }
.dj-status-txt   { font-size: 0.7rem; color: var(--color-text); }
.dj-status-frage { font-size: 0.73rem; color: var(--color-text); }


/* Abgeschickt: der graue Grund sagt es — kein Schloss-Symbol nötig. */
.dj-row-locked > td { background: rgba(255,255,255,0.035); }

/* Übersicht der Matrix (Build 178) — eigene Zeile heraus, fremde zurück */

/* Kompakt heisst enger, nicht blasser: die Schriftfarbe bleibt überall
   dieselbe. Unterschiedliche Textfarben in einer Tabelle lesen sich als
   Bedeutung, die hier keine ist. */
.dj-row-kompakt > td { padding-top: 3px; padding-bottom: 3px; }
.dj-td-kompakt { text-align: center; }
.dj-ja   { color: var(--color-text); font-weight: 700; }
.dj-nein { color: var(--color-text); opacity: .55; }
.dj-gast-kurz {
  display: inline-block;
  margin-left: 4px; padding: 0 4px; border-radius: 3px;
  font-size: 0.68rem;
  background: rgba(196,162,58,0.18); color: var(--color-text);
}
/* Zuteilung — Anzeige für alle, Eingabefeld nur beim Jagdleiter */
.dj-zut-txt {
  margin-top: 4px; font-size: 0.76rem; color: var(--color-text);
}
.dj-zut {
  width: 100%; margin-top: 4px; padding: 3px 6px; box-sizing: border-box;
  font-size: 0.76rem; border-radius: 4px;
  border: 1px solid rgba(196,162,58,.45);
  background: var(--color-surface2); color: var(--color-text);
}

/* Gast je Jagd (Build 176) — hängt an der Anmeldung, nicht am Gastgeber */
.dj-gast-lbl {
  display: flex; align-items: center; gap: 5px;
  margin-top: 5px; padding-top: 5px;
  border-top: 1px dashed rgba(255,255,255,.10);
  font-size: 0.78rem; color: var(--color-text); cursor: pointer;
}
.dj-gast-lbl input[disabled] { cursor: not-allowed; }
.dj-gast-lbl:has(input[disabled]) { cursor: not-allowed; opacity: .55; }
.dj-gast-name {
  width: 100%; margin-top: 4px; padding: 3px 6px; box-sizing: border-box;
  font-size: 0.78rem; border-radius: 4px;
  border: 1px solid rgba(196,162,58,.45);
  background: var(--color-surface2); color: var(--color-text);
}
.dj-gast-waf {
  width: 100%; margin-top: 4px; padding: 3px 6px; box-sizing: border-box;
  font-size: 0.78rem; border-radius: 4px; cursor: pointer;
  border: 1px solid rgba(196,162,58,.45);
  background: var(--color-surface2); color: var(--color-text);
}
.dj-gast-fehlt { border-color: var(--color-warning); }
.dj-gast-hinweis {
  margin-top: 2px; font-size: 0.68rem; color: var(--color-warning);
}
.dj-gast-ro {
  margin-top: 4px; font-size: 0.76rem; color: var(--color-text);
}
.dj-gast-block {
  margin-top: 5px; padding-top: 5px;
  border-top: 1px dashed rgba(255,255,255,.10);
  font-size: 0.72rem; color: var(--color-text-muted); font-style: italic;
}
.dj-hinweis {
  margin-top: 10px; font-size: 0.76rem; color: var(--color-text-muted);
}

.dj-fr { margin-bottom: 9px; }
.dj-fr label { display: block; font-size: 0.77rem; color: var(--color-text-muted); margin-bottom: 2px; }
.dj-fr input[type=text],
.dj-fr input[type=date],
.dj-fr input[type=time],
.dj-fr textarea {
  width: 100%; padding: 5px 8px; border-radius: 4px; font-size: 0.84rem;
  box-sizing: border-box; border: 1px solid var(--color-border);
  background: var(--color-surface2); color: var(--color-text);
}
.dj-fr textarea { min-height: 56px; resize: vertical; }
.dj-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 479px) { .dj-form-grid { grid-template-columns: 1fr; } }
.dj-info-row { background: rgba(255,255,255,0.02); }
.dj-info-row td { padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,.025); font-size: 0.76rem; vertical-align: top; }
.dj-info-label { color: var(--color-text-muted); font-weight: 500; }
.dj-info-val   { border-left: 1px solid rgba(255,255,255,.04); text-align: center; }
.dj-frist-banner {
  background: rgba(196,162,58,0.12); color: var(--color-accent);
  border: 1px solid rgba(196,162,58,0.3); border-radius: 5px;
  padding: 7px 12px; font-size: 0.82rem; margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.dj-anmeldedatum-inp {
  padding: 2px 6px; border-radius: 4px; font-size: 0.82rem;
  border: 1px solid rgba(196,162,58,.5); background: rgba(196,162,58,0.08);
  color: var(--color-accent); cursor: pointer;
}

/* ── Drückjagd Terminlisten-Kacheln (termine.js) ─────────── */
.termin-card.termin-card-dj       { border-left: 3px solid var(--color-primary); }
.termin-card.termin-card-deadline { border-left: 3px solid var(--color-accent); }
.dj-card-head  { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.dj-card-badge {
  flex-shrink: 0; font-size: 0.68rem; padding: 2px 8px; border-radius: 8px;
  margin-top: 3px; background: rgba(74,138,66,0.18); color: #90d080; white-space: nowrap;
}
.dj-details       { margin-top: 8px; font-size: 0.82rem; line-height: 1.8; }
.dj-details-lbl   { color: var(--color-text-muted); }
.dj-note          { color: var(--color-text-muted); font-style: italic; }
.dj-anmelde-row   {
  margin-top: 8px; font-size: 0.82rem; color: var(--color-accent);
  display: flex; align-items: center; gap: 5px;
}
.dj-section       { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--color-border); }
.dj-link          { font-size: 0.79rem; color: var(--color-primary); text-decoration: none; }
.dj-link-wrap     { margin-top: 8px; font-size: 0.79rem; color: var(--color-text-muted); }
.dj-participants  { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--color-border); }
.dj-participants-lbl { font-size: 0.73rem; color: var(--color-text-muted); margin-bottom: 4px; font-weight: 600; }
.dj-participant-row  { display: flex; align-items: baseline; gap: 5px; padding: 2px 0; font-size: 0.80rem; }
.dj-ptype-member {
  font-size: 0.64rem; padding: 1px 5px; border-radius: 6px;
  background: rgba(74,138,66,0.18); color: #90d080; flex-shrink: 0;
}
.dj-ptype-guest {
  font-size: 0.64rem; padding: 1px 5px; border-radius: 6px;
  background: rgba(255,255,255,0.08); color: var(--color-text-muted); flex-shrink: 0;
}
.dj-phost         { color: var(--color-text-muted); font-size: 0.72rem; }
.dj-no-regs       { font-size: 0.78rem; color: var(--color-text-muted); font-style: italic; }
.dj-error-banner  {
  display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px;
  padding: 10px 12px; border-radius: 6px; font-size: 0.82rem;
  background: rgba(196,162,58,0.12); border: 1px solid rgba(196,162,58,0.35);
  color: var(--color-accent);
}
.dj-deadline-desc { margin-top: 8px; font-size: 0.82rem; color: var(--color-text-muted); }

/* ── Wiki-Gruppen Verwaltung (wikiGroups.js) ─────────────── */
.wg-create-form    { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.wg-fg-label       { flex: 1; min-width: 140px; margin-bottom: 0; }
.wg-fg-sort        { width: 80px; margin-bottom: 0; }
.wg-row            { display: flex; align-items: center; gap: 8px; padding: 10px 16px;
                     border-bottom: 1px solid var(--color-border); }
.wg-row-inactive   { opacity: 0.55; }
.wg-row-name       { flex: 1; font-size: 0.9rem; }
.wg-row-sort-lbl   { font-size: 0.78rem; color: var(--color-text-muted); min-width: 44px; }
.wg-inactive-badge { font-size: 0.75rem; color: var(--color-danger); margin-left: 6px; }

/* ── Abschussmeldung Utilities ───────────────────────────── */
.loc-picker-wrap   { height: 220px; border-radius: 6px; overflow: hidden; border: 1px solid var(--color-border); }
.upload-status     { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 4px; }
.abschuss-foto-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.85rem; color: var(--color-primary); }
.abschuss-foto-img  { max-width: 100%; max-height: 180px; margin-top: 6px; border-radius: 6px; object-fit: cover; }
.abschuss-loading-lbl { font-size: 0.78rem; color: var(--color-text-muted); }
.abschuss-admin-row { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.abschuss-submitter { font-size: 0.8rem; color: var(--color-text-muted); }
.abschuss-own-row  { margin-top: 6px; display: flex; align-items: center; gap: 8px; }

/* ── Jagdstatistik ───────────────────────────────────────── */
.jst-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.jst-toolbar label { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0; }
.jst-toolbar select { width: auto; min-width: 110px; }
/* Kartenkopf der Auswertungen (sitzt in .app-card-header) */
.jst-section-title {
  font-size: 0.92rem;
  font-weight: 600;
}

/* Farblegende — steht im .app-card-footer der Jäger-Auswertung */
.jst-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.76rem;
  color: var(--color-text-muted);
}
.jst-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.jst-swatch {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  flex-shrink: 0;
}