:root {
  --green-dark: #1f3a1f;
  --green-mid: #4a6a3a;
  /* Brenneke-inspired bright lime, used for the topbar to give the app
     a recognisable identity. Pairs with near-black text for the same
     high-contrast look the poster uses. */
  --green-bright: #b5d33a;
  --green-bright-edge: #97b730;
  /* Brand gradient — taken from the preye P-mark (lime green → charcoal).
     Used as the primary design element across the topbars. */
  --lime: #b5d33a;
  --charcoal: #2c2f34;
  --brand-gradient: linear-gradient(100deg, var(--lime) 0%, var(--lime) 42%, var(--charcoal) 100%);
  --steel: #8a8e92; /* metallic grey accent, like the bullet jackets */
  --steel-dark: #4a4d52;
  /* Form surfaces — switched from a warm cream to a cool light grey
     so the inputs read as 'colder' alongside the lime topbar. */
  --bg: #eef1f4;
  --card: #ffffff;
  --text: #1a1a1a;
  --muted: #6b6b6b;
  --border: #d0d5db;
  --accent: #b94a2c;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  /* visualViewport-derived browser-chrome insets (set by JS at runtime).
     iOS Chrome puts its URL bar at the bottom; Safari at the top — these
     vars let us push fixed modals above whichever bar is in the way. */
  --vv-top: 0px;
  --vv-bottom: 0px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

#topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--brand-gradient);
  color: #111;
  padding: calc(8px + var(--safe-top)) 12px 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

#topbar h1 {
  font-size: 16px;
  margin: 0;
  flex: 1;
  font-weight: 600;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.brand-pray {
  /* Anta only ships a 400 weight; keep weight default and use spacing
     + the geometric letterforms for visual weight. */
  font-family: "Anta", system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 1.2px;
  font-size: 18px;
  color: #111;
}

.brand-eye {
  /* preye P-mark. Portrait aspect ratio, so size by height to sit
     cleanly inside the topbar next to the wordmark. */
  height: 30px;
  width: auto;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.brand-place {
  font-weight: 500;
  color: #1a1a1a;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 380px) {
  .brand-place {
    font-size: 13px;
  }
}

/* Phone layout for the topbar: stack the brand h1 over the filter chips,
   and shrink the chips so all four are visible without overflow. */
@media (max-width: 600px) {
  #topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: calc(6px + var(--safe-top)) 10px 6px;
    /* stacked layout: keep the brand row on lime, the filter row on
       charcoal — so the gradient runs top-to-bottom here. */
    background: linear-gradient(180deg, var(--lime) 0%, var(--lime) 48%, var(--charcoal) 100%);
  }
  #topbar h1 {
    font-size: 14px;
    flex: none;
  }
  .brand-pray { font-size: 16px; letter-spacing: 0.5px; }
  .brand-eye { height: 26px; }
  .brand-place { font-size: 13px; }

  .filters {
    gap: 5px;
    flex-wrap: wrap;
  }
  .filters select,
  #filter-date,
  .filter-btn {
    padding: 4px 9px;
    font-size: 11.5px;
    letter-spacing: 0;
  }
}

.filters {
  display: flex;
  gap: 6px;
}

/* All four topbar chips (the two selects, the date picker, the two buttons)
   share one pill format: dark fill, lime label, bold, lime outline on hover.
   The faint light border keeps the pill crisp on the charcoal end of the
   topbar gradient as well as on the lime end. */
.filters select,
#filter-date,
.filter-btn {
  background: #1a1a1a;
  color: var(--green-bright);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.12s, border-color 0.12s, transform 0.08s;
}

.filters select:hover,
#filter-date:hover,
.filter-btn:hover {
  border-color: var(--green-bright);
}

.filters select:active,
#filter-date:active,
.filter-btn:active {
  transform: scale(0.96);
}

.filters select option {
  color: #000;
  background: #fff;
  font-weight: 400;
}

#filter-date {
  /* color-scheme dark hints the native picker to use a dark calendar
     overlay that matches the chip on iOS / macOS. */
  color-scheme: dark;
}

/* The Anschuss-Protokoll / Nachsuche trigger — same chip format but a cold
   red so it reads as the "report a wounded animal" action, not a filter. */
.filter-btn--alert {
  background: #d11f3c;
  border-color: #d11f3c;
  color: #fff;
}

.filter-btn--alert:hover {
  border-color: #fff;
}

#map {
  position: absolute;
  inset: 0;
  top: calc(48px + var(--safe-top));
}

#fab {
  position: fixed;
  /* Pulled in from the right edge so it stops overlapping Google
     Maps' native zoom +/- controls. */
  right: 60px;
  /* Extra bottom margin so the button clears Chrome's bottom-toolbar
     navigation buttons that visualViewport doesn't always inset for. */
  bottom: calc(50px + var(--safe-bottom) + var(--vv-bottom));
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: #1a1a1a;
  color: var(--green-bright);
  font-size: 34px;
  line-height: 60px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  z-index: 8;
  cursor: pointer;
}

#fab:active {
  transform: scale(0.95);
}

#leaderboard {
  position: fixed;
  left: 12px;
  bottom: calc(12px + var(--safe-bottom) + var(--vv-bottom));
  background: var(--card);
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  font-size: 13px;
  max-width: 60vw;
  z-index: 7;
  overflow: hidden;
  isolation: isolate; /* new stacking context for the ::before watermark */
}

#leaderboard::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Anchored slightly off the left edge so the boar appears to be
     stepping into the chip — body partly cropped, full head visible. */
  background: url("boar.png") -16px center / auto 85% no-repeat;
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

#leaderboard > * {
  position: relative;
  z-index: 1;
}

#leaderboard strong {
  display: block;
  margin-bottom: 4px;
  color: var(--green-dark);
}

#leaderboard ol {
  margin: 0;
  padding-left: 18px;
}

#leaderboard li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 0;
}

#leaderboard .lb-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#leaderboard .lb-count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--green-dark);
  flex-shrink: 0;
}

#sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 20;
}

#sheet {
  position: fixed;
  left: 0;
  right: 0;
  /* Sit above any bottom browser chrome (iOS Chrome's URL bar). */
  bottom: var(--vv-bottom);
  z-index: 21;
  background: var(--card);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 0 16px calc(16px + var(--safe-bottom));
  /* Visible-viewport-aware max-height so the top stays below any top
     browser chrome and bottom stays above any bottom browser chrome. */
  max-height: calc(92vh - var(--safe-top));
  max-height: calc(92svh - var(--safe-top));
  max-height: calc(100vh - var(--safe-top) - var(--vv-top) - var(--vv-bottom) - 24px);
  overflow-y: auto;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
  animation: slideUp 0.2s ease-out;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

#sheet header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card);
  margin: 0 -16px 12px;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border);
}

#sheet h2 {
  margin: 0;
  font-size: 18px;
}

#sheet-close {
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--muted);
  width: 36px;
  height: 36px;
  cursor: pointer;
}

#harvest-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mode-toggle {
  display: flex;
  gap: 4px;
  background: var(--bg);
  border-radius: 999px;
  padding: 4px;
  border: 1px solid var(--border);
}

.mode-btn {
  flex: 1;
  padding: 9px 12px;
  border-radius: 999px;
  background: transparent;
  border: none;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
}

.mode-btn.active {
  background: var(--green-bright);
  color: #111;
}

.mode-btn.active[data-mode="klettersitz"] {
  background: #03a9f4;
  color: #fff;
}

.mode-btn.active[data-mode="pirsch"] {
  background: #e2dc3a;
  color: #1f1f1f;
}

/* Scoped to #harvest-form so we win the specificity battle against
   `#harvest-form label { display: flex }` — without this, post-mode and
   free-mode <label>s were always visible regardless of toggle state. */
#harvest-form [data-mode-show] {
  display: none;
}

#harvest-form [data-mode-show].visible {
  display: flex;
}

.row {
  display: flex;
  gap: 12px;
}

.row > label {
  flex: 1;
}

.species-extras {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.gender-buttons {
  display: flex;
  gap: 4px;
  align-self: flex-end;
}

.gender-btn {
  width: 50px;
  height: 44px;
  font-size: 22px;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 8px;
  cursor: pointer;
  color: var(--muted);
  font-weight: 600;
}

.gender-btn[data-gender="m"].active {
  background: #1565c0;
  color: #fff;
  border-color: #1565c0;
}

.gender-btn[data-gender="w"].active {
  background: #c2185b;
  color: #fff;
  border-color: #c2185b;
}

.ak-select {
  flex: 1;
}

#harvest-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

#harvest-form select,
#harvest-form input[type="number"],
#harvest-form input[type="text"],
#harvest-form input[type="datetime-local"],
#harvest-form input:not([type]),
#harvest-form textarea {
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

/* Slightly darker grey than the other form inputs so the date/time
   field stands out and reminds the hunter to set it explicitly. */
#harvest-form input[type="datetime-local"] {
  background: #c8cdd5;
  border-color: #aab0b9;
}

#harvest-form textarea {
  resize: vertical;
}

.counter {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.counter button {
  width: 48px;
  font-size: 24px;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 8px;
  cursor: pointer;
}

.counter input {
  flex: 1;
  text-align: center;
}

.ghost {
  background: #c8cdd5;
  color: var(--green-dark);
  border: 1px solid #aab0b9;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 4px;
  align-self: flex-start;
}

.ghost:active {
  background: #b8bec7;
}

#f-submit {
  margin-top: 4px;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: var(--green-bright);
  color: #111;
  border: 1px solid var(--green-bright-edge);
  border-radius: 10px;
  cursor: pointer;
}

#f-submit:disabled {
  opacity: 0.5;
}

.cancel-btn {
  margin-top: 8px;
  padding: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
}

.cancel-btn:active {
  background: var(--bg);
}

.muted {
  color: var(--muted);
  font-weight: normal;
}

#history {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 8px;
}

#history h3 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

#history ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#history li {
  padding: 3px 0;
  font-size: 12.5px;
  color: var(--text);
  border-top: 1px solid var(--border);
}

#history li:first-child {
  border-top: none;
}

#history li .when {
  color: var(--muted);
  margin-right: 6px;
}

#history li .who {
  color: var(--muted);
  font-style: italic;
}

#history li .hist-sub {
  margin-top: 2px;
  margin-left: 8px;
  font-size: 11px;
  color: var(--muted);
}

#history li .wind {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

#history li .wind svg {
  width: 12px;
  height: 12px;
  display: inline-block;
}

#history .empty {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
}

#strecke-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 20;
}

#strecke-modal {
  position: fixed;
  z-index: 21;
  background: var(--card);
  border-radius: 16px;
  /* Lime accent strip across the top edge — same Brenneke green used
     in the topbar, ties the modal to the brand. */
  border-top: 4px solid var(--green-bright);
  padding: 0 20px calc(20px + var(--safe-bottom));
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
  left: 12px;
  right: 12px;
  /* Sit above bottom browser chrome too. */
  bottom: calc(12px + var(--safe-bottom) + var(--vv-bottom));
  max-height: calc(85vh - var(--safe-top));
  max-height: calc(85svh - var(--safe-top));
  max-height: calc(100vh - var(--safe-top) - var(--vv-top) - var(--vv-bottom) - 36px);
  overflow-y: auto;
  animation: slideUp 0.2s ease-out;
  isolation: isolate;
}

/* Roebuck silhouette anchored at the right edge — body extends past
   the right, head and antlers face into the modal. Same faint
   watermark treatment as the boar in the leaderboard. */
#strecke-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("roebuck.png") no-repeat;
  /* Image faces left (head on the left). Anchored toward the middle of
     the modal so the head sits around horizontal center; body extends
     past the right edge and gets cropped — that's fine. Vertical anchor
     puts the head around the modal's middle; whatever falls past the
     bottom edge is also cropped. */
  background-position: 30% 130px;
  background-size: auto 400px;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

#strecke-modal > * {
  position: relative;
  z-index: 1;
}

@media (min-width: 720px) {
  #strecke-modal {
    left: 50%;
    right: auto;
    bottom: 24px;
    width: 380px;
    transform: translateX(-50%);
  }
}

#strecke-modal header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card);
  margin: 0 -20px 8px;
  padding: 14px 20px 10px;
  border-bottom: 1px solid var(--border);
}

#strecke-modal h2 {
  margin: 0;
  font-size: 18px;
}

#strecke-close {
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--muted);
  width: 36px;
  height: 36px;
  cursor: pointer;
}

.strecke-range {
  font-size: 12px;
  margin-bottom: 12px;
}

.strecke-total {
  text-align: center;
  margin: 4px 0 16px;
}

.strecke-total .big-number {
  font-size: 56px;
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.strecke-total .muted {
  font-size: 13px;
  margin-top: 4px;
}

#strecke-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#strecke-list li {
  display: block;
  padding: 9px 4px;
  border-top: 1px solid var(--border);
  font-size: 15px;
}

#strecke-list .strecke-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

#strecke-list .strecke-sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
}

#strecke-list li:first-child {
  border-top: none;
}

#strecke-list li .count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #111;
  background: var(--green-bright);
  border: 1px solid var(--green-bright-edge);
  border-radius: 999px;
  padding: 2px 12px;
  min-width: 36px;
  text-align: center;
}

#strecke-list .empty {
  text-align: center;
  color: var(--muted);
  padding: 16px 0;
  border-top: none;
  display: block;
}

.timeline {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--steel);
}

.timeline h3 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--steel-dark);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.timeline-axis {
  color: var(--steel-dark);
}

.timeline svg {
  width: 100%;
  height: 60px;
  display: block;
}

.timeline-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}

#gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #0e0e0e;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* Higher specificity than #gate alone so the [hidden] attribute actually
   hides the overlay — without this rule #gate { display: flex } wins
   against the UA's [hidden] { display: none } and the gate is always
   visible even in public mode. */
#gate[hidden] {
  display: none;
}

.gate-card {
  background: var(--card);
  padding: 28px 24px;
  border-radius: 14px;
  width: 100%;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  border: 2px solid var(--green-bright);
}

.gate-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #111;
  font-size: 22px;
}

.gate-brand .brand-eye {
  height: 44px;
  width: auto;
}

.gate-sub {
  color: var(--muted);
  margin: 6px 0 18px;
  font-size: 13px;
}

#gate-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#gate-pw {
  font: inherit;
  font-size: 16px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  text-align: center;
}

#gate-form button {
  padding: 13px;
  background: var(--green-bright);
  color: #111;
  border: 1px solid var(--green-bright-edge);
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  font-size: 15px;
  cursor: pointer;
}

.gate-error {
  margin: 10px 0 0;
  color: var(--accent);
  font-size: 13px;
}

/* ---------------- Anschuss-Protokoll modal ---------------- */
#protocol-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.45);
}

#protocol-modal {
  position: fixed;
  z-index: 41;
  background: var(--card);
  border-top: 4px solid var(--green-bright);
  border-radius: 14px;
  left: 8px;
  right: 8px;
  top: calc(8px + var(--safe-top) + var(--vv-top));
  bottom: calc(8px + var(--safe-bottom) + var(--vv-bottom));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
}

/* `display: flex` above outranks the UA's `[hidden] { display: none }`, so
   without this the modal can never be closed via the hidden attribute. */
#protocol-modal[hidden] { display: none; }

#protocol-modal > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

#protocol-modal > header h2 {
  margin: 0;
  font-size: 17px;
}

#protocol-close {
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--muted);
  width: 36px;
  height: 36px;
  cursor: pointer;
}

.protocol-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text);
}

.proto-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-bright);
  border: 1px solid var(--green-bright-edge);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 10px;
}

.proto-banner-title {
  font-weight: 700;
  letter-spacing: 1px;
  color: #111;
  font-size: 16px;
}

/* Location picker — mirrors the harvest form's Kanzel/Klettersitz/Pirsch toggle */
.proto-loc { margin-bottom: 10px; }

.proto-mode-toggle {
  display: flex;
  gap: 4px;
  background: var(--bg);
  border-radius: 999px;
  padding: 4px;
  border: 1px solid var(--border);
  margin-bottom: 8px;
}

.proto-mode-btn {
  flex: 1;
  padding: 8px 10px;
  border-radius: 999px;
  background: transparent;
  border: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
}

.proto-mode-btn.active { background: var(--green-bright); color: #111; }
.proto-mode-btn.active[data-pmode="klettersitz"] { background: #03a9f4; color: #fff; }
.proto-mode-btn.active[data-pmode="pirsch"] { background: #e2dc3a; color: #1f1f1f; }

.proto-loc-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 8px;
}

.proto-loc-row.proto-loc-coords { flex-direction: row; gap: 10px; }
.proto-loc-coords > label { flex: 1; display: flex; flex-direction: column; gap: 5px; }

[data-pmode-show]:not(.visible) { display: none !important; }

.protocol-body select {
  font: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.proto-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
  align-items: center;
}

.proto-line label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
}

.proto-line label.grow { flex: 1; min-width: 140px; }
.proto-line label.grow input,
.proto-line label.grow select { flex: 1; }

.proto-chk { font-weight: 500; }
.proto-chk input { width: auto; }

.protocol-body input[type="text"],
.protocol-body input:not([type]) {
  font: inherit;
  font-size: 13px;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
}

.proto-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 11px;
}

.proto-table th,
.proto-table td {
  border: 1px solid var(--border);
  padding: 3px 4px;
  text-align: center;
  vertical-align: middle;
}

.proto-table th {
  background: var(--green-bright);
  font-weight: 700;
  font-size: 10px;
  color: #111;
  line-height: 1.1;
}

.proto-table td:first-child { font-weight: 600; white-space: nowrap; background: var(--bg); }
.proto-table td input { padding: 4px 3px; }

/* Table cells are tiny — keep the dropdowns/time pickers compact and let
   the <select>s show their native arrow so they read as pickable. */
.proto-table td select,
.proto-table td input[type="time"] {
  width: 100%;
  font: inherit;
  font-size: 11px;
  padding: 3px 2px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  min-width: 0;
  -webkit-appearance: auto;
  appearance: auto;
}

/* The "Wildart / gesch. kg" cell holds two stacked controls. */
.proto-cell-stack { padding: 3px; }
.proto-cell-stack > * { display: block; width: 100%; }
.proto-cell-stack > *:first-child { margin-bottom: 3px; }

.proto-label {
  margin: 12px 0 4px;
  font-size: 11px;
  color: var(--steel-dark);
  text-align: center;
  line-height: 1.3;
}

.proto-figure {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

.proto-figure img,
.proto-figure svg {
  display: block;
  width: 100%;
  height: auto;
}

.proto-figure canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: manipulation;
}

/* The animal-pose chart is shifted right so the row selectors (left edge)
   don't overlap the first sketches. Canvas tracks the image. */
.proto-figure[data-fig="animals"] img {
  margin-left: 58px;
  width: calc(100% - 58px);
}
.proto-figure[data-fig="animals"] canvas {
  left: 58px;
  right: 0;
  width: auto;
}

/* Per-row Stück selector overlaid on the left edge of the animal-pose chart
   (top select → top row, bottom select → bottom row). */
.proto-figure .proto-fig-row {
  position: absolute;
  left: 16px;
  z-index: 3;
  width: 36px;
  height: auto;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 0;
  text-align: center;
  border: 1px solid var(--steel-dark);
  border-radius: 4px;
  background: var(--steel);
  color: #fff;
  -webkit-appearance: none;
  appearance: none;
}
.proto-figure .proto-fig-row1 { top: calc(50% - 27px); }
.proto-figure .proto-fig-row2 { bottom: 4px; }

.proto-bottom {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.proto-pirsch {
  flex: 1;
  min-width: 220px;
}

.proto-pirsch-head {
  background: var(--green-bright);
  font-weight: 700;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 5px;
  color: #111;
  text-align: center;
  margin-bottom: 6px;
}

.proto-pirsch-block {
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px 8px;
  margin-bottom: 8px;
}

.proto-pirsch-block > strong { font-size: 12px; display: block; margin-bottom: 4px; }

.proto-pirsch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 10px;
  margin-bottom: 6px;
}

.proto-pirsch-grid label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
}

.proto-pirsch-grid input { width: auto; }

.proto-bem {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
}

.proto-range {
  flex: 0 0 240px;
  max-width: 240px;
  align-self: flex-start;
}

.proto-meldung {
  margin-top: 10px;
}

.proto-meldung label {
  display: flex;
  align-items: stretch;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
}

.proto-meldung label > span {
  background: var(--steel-dark);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  flex: 0 0 150px;
}

.proto-meldung label > input {
  border: none !important;
  border-radius: 0 !important;
}

.proto-email {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
}

.proto-actions {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--card);
  flex-wrap: wrap;
}

#proto-submit {
  flex: 1 1 100%;
  padding: 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: var(--green-bright);
  color: #111;
  border: 1px solid var(--green-bright-edge);
  border-radius: 10px;
  cursor: pointer;
}

#proto-submit:disabled { opacity: 0.5; }

.proto-actions .cancel-btn { flex: 1; margin-top: 0; }

/* Flashing skull marker for an open Nachsuche */
.ns-marker {
  width: 30px;
  height: 30px;
  margin-left: -15px;
  margin-top: -15px;
  border-radius: 50%;
  background: #ffd400;
  border: 2px solid #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  animation: ns-pulse 1.1s ease-in-out infinite;
}

@keyframes ns-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 212, 0, 0.75); transform: scale(1); }
  70%  { box-shadow: 0 0 0 16px rgba(255, 212, 0, 0); transform: scale(1.18); }
  100% { box-shadow: 0 0 0 0 rgba(255, 212, 0, 0); transform: scale(1); }
}

.ns-popup {
  font-size: 13px;
  max-width: 230px;
  line-height: 1.4;
}

.ns-popup .ns-close-btn {
  margin-top: 8px;
  padding: 7px 12px;
  background: var(--green-bright);
  color: #111;
  border: 1px solid var(--green-bright-edge);
  border-radius: 7px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

/* Phone layout for the Anschuss-Protokoll — the 7-column table is unusable
   below ~600px, so each Stück row becomes its own labelled card. iOS won't
   zoom on focus when input font-size ≥ 16px, so all fields here get bumped.
   The PDF export passes windowWidth: 800 to html2canvas, so this block does
   NOT match in the cloned document — the PDF still uses the desktop table. */
@media (max-width: 600px) {
  /* Bump every protocol field to 16px so iOS doesn't zoom in on focus.
     #protocol-modal beats the desktop .proto-table td input[type=...] rules. */
  #protocol-modal input,
  #protocol-modal select {
    font-size: 16px;
  }

  /* Name / Telefon / Kaliber — one input per row on a phone. */
  .proto-line label.grow { flex: 1 1 100%; min-width: 0; }

  /* Table → labelled cards. */
  .proto-table { display: block; font-size: 13px; margin: 8px 0 14px; }
  .proto-table thead { display: none; }
  .proto-table tbody { display: block; }
  .proto-table tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: 7px;
    overflow: hidden;
    margin-bottom: 10px;
    background: #fff;
  }
  .proto-table td {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: none;
    border-top: 1px solid var(--border);
    text-align: left;
    background: #fff;
  }
  .proto-table td:first-of-type { border-top: none; }
  .proto-table td::before {
    content: attr(data-label);
    flex: 0 0 130px;
    font-size: 12px;
    font-weight: 600;
    color: var(--steel-dark);
    line-height: 1.2;
  }
  .proto-table td.proto-row-head {
    display: block;
    background: var(--green-bright);
    color: #111;
    font-weight: 700;
    text-align: center;
    padding: 8px;
    border-top: none;
    font-size: 14px;
    letter-spacing: 0.5px;
    white-space: normal;
  }
  .proto-table td.proto-row-head::before { content: none; }

  .proto-table td > input,
  .proto-table td > select {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 7px 9px;
    border-radius: 5px;
  }

  /* The "Wildart / gesch. kg" cell becomes a column inside the card so the
     two controls each get a full-width line. */
  .proto-table td.proto-cell-stack {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px 10px;
  }
  .proto-table td.proto-cell-stack::before {
    flex: 0 0 auto;
    margin-bottom: 2px;
  }
  .proto-table td.proto-cell-stack > input,
  .proto-table td.proto-cell-stack > select {
    width: 100%;
    margin: 0;
  }
}

@media print {
  body > *:not(#protocol-modal) { display: none !important; }
  #protocol-modal {
    position: static;
    inset: auto;
    box-shadow: none;
    border: none;
    border-radius: 0;
    height: auto;
  }
  #protocol-modal > header,
  .proto-actions { display: none !important; }
  .protocol-body { overflow: visible; }
}

/* Off-screen, un-clipped layout used while rendering the e-mail PDF so the
   capture is the whole form (laid out at a fixed page-ish width), matching
   what you get from Drucken — not a clipped screenshot of the scroll area. */
#protocol-modal.exporting {
  position: fixed;
  left: -10000px;
  top: 0;
  right: auto;
  bottom: auto;
  width: 800px;
  height: auto;
  max-height: none;
  display: block;
  overflow: visible;
  box-shadow: none;
  border: none;
  border-radius: 0;
}
#protocol-modal.exporting > header,
#protocol-modal.exporting .proto-actions { display: none !important; }
#protocol-modal.exporting .protocol-body { overflow: visible; height: auto; }

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(80px + var(--safe-bottom) + var(--vv-bottom));
  transform: translateX(-50%);
  background: var(--green-bright);
  color: #111;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  z-index: 30;
  max-width: 80vw;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: toastIn 0.2s ease-out;
}

#toast.error {
  background: var(--accent);
}

@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (min-width: 720px) {
  #sheet {
    left: 50%;
    right: auto;
    bottom: 24px;
    width: 420px;
    transform: translateX(-50%);
    border-radius: 16px;
  }
}

/* ===========================================================================
   Drückjagd organisation page (events.html) + invitation page (rsvp.html).
   Reuses the brand palette but flows like a normal scrolling document instead
   of the map's fixed-overlay layout.
   =========================================================================== */

body.events-page,
body.rsvp-page {
  overflow: auto;
  background: var(--bg);
}

body.events-page #topbar,
body.rsvp-page #rsvp-topbar {
  position: static;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
}

#events-main {
  padding: 16px 14px 32px;
  max-width: 720px;
  margin: 0 auto;
}

.ev-view-title {
  margin: 4px 0 12px;
  font-size: 20px;
  font-weight: 700;
}

.ev-loading,
.empty-msg {
  color: var(--muted);
  font-size: 14px;
  margin: 12px 0;
}

/* Running-boar loading indicator. Uses a horizontal sprite + steps() so the
   browser only needs to shift background-position (compositor-only, no
   per-frame image decoding) and stays cheap on CPU. */
.boar-loader {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}
.boar-loader::before {
  content: "";
  display: inline-block;
  width: 64px;
  height: 40px;
  background: url("boar-sprite.png") 0 0 / 768px 40px no-repeat;
  animation: boar-run 0.9s steps(12) infinite;
  flex-shrink: 0;
  /* Hint the renderer this is a long-running animation so it stays on its
     own GPU layer. */
  will-change: background-position;
}
.boar-loader--center {
  display: flex;
  justify-content: center;
  width: 100%;
}
.boar-loader--small::before { transform: scale(0.65); transform-origin: left center; width: 42px; height: 26px; }

@keyframes boar-run {
  from { background-position: 0 0; }
  to   { background-position: -768px 0; }
}

.ev-error {
  color: var(--accent);
  font-size: 14px;
}

/* List view ---------------------------------------------------------------- */

#events-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.event-card-wrap { position: relative; }

/* Year header that separates Drückjagden into calendar-year groups. */
.year-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 4px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--steel-dark);
  text-transform: none;
}
.year-divider::before,
.year-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.year-divider span {
  background: var(--green-bright);
  color: #111;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.6px;
}
.year-divider:first-child { margin-top: 4px; }

.event-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 44px 12px 14px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: border-color 0.12s, transform 0.08s;
}
.event-card:hover { border-color: var(--green-bright-edge); }
.event-card:active { transform: scale(0.99); }

.event-card-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.88;
  align-self: center;
}

.event-card-content { flex: 1; min-width: 0; }
.event-card-content .event-card-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .event-card { gap: 10px; padding: 10px 40px 10px 10px; }
  .event-card-icon { width: 52px; height: 52px; }
}

.event-delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.1s, color 0.1s;
}
.event-delete-btn:hover {
  background: #fbe9e7;
  color: #c0392b;
}

.event-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.event-card-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.event-date {
  font-size: 13px;
  color: var(--steel-dark);
  white-space: nowrap;
}

.event-meta {
  margin: 4px 0 6px;
  font-size: 13px;
  color: var(--muted);
}

.event-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 4px;
  font-size: 12px;
}
.event-stats .stat { color: var(--steel-dark); }
.event-stats .stat-accepted { color: #1f7a31; font-weight: 600; }
.event-stats .stat-declined { color: #c0392b; font-weight: 600; }
.event-stats .stat-pending  { color: #8a6d00; font-weight: 600; }

/* New event form ----------------------------------------------------------- */

.ev-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}

.ev-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--steel-dark);
}

.ev-form input,
.ev-form textarea {
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
}
.ev-form textarea { resize: vertical; min-height: 80px; }

.ev-form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ev-form-row > label { flex: 1 1 100px; }

.ev-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

/* Fieldsets group related fields (Teilgebiete, Kontakte). */
.ev-fieldset {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 12px 12px;
  margin: 4px 0 0;
}
.ev-fieldset legend {
  font-size: 13px;
  font-weight: 600;
  color: var(--steel-dark);
  padding: 0 6px;
}
.ev-checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  margin-top: 6px;
}
.ev-checkbox-grid--single { grid-template-columns: 1fr; }

/* Two reviere side-by-side, each with its own column of checkboxes. */
.ev-revier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 6px;
}
.ev-revier-col { display: flex; flex-direction: column; gap: 6px; }
.ev-revier-title {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--steel-dark);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}

@media (max-width: 480px) {
  .ev-revier-grid { grid-template-columns: 1fr; gap: 10px; }
}
.ev-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #111;
  cursor: pointer;
}
.ev-checkbox input[type="checkbox"] { transform: scale(1.1); }

.ev-fieldset-contacts { margin-top: 4px; }
.ev-fieldset-contacts .contact-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.ev-fieldset-contacts .contact-row > label {
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--steel-dark);
}
.ev-fieldset-contacts .contact-row input {
  font: inherit;
  font-size: 14px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
}

.nsf-block { margin-top: 10px; }
.nsf-label { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--steel-dark); }
.nsf-rows { display: flex; flex-direction: column; gap: 6px; }
.nsf-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.nsf-row .nsf-name {
  flex: 1 1 120px;
  font: inherit;
  font-size: 14px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  min-width: 0;
}
.nsf-row .nsf-phone {
  flex: 1 1 100px;
  font: inherit;
  font-size: 14px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  min-width: 0;
}
.nsf-row .nsf-remove {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 20px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
}
.nsf-row .nsf-remove:hover { background: var(--bg); color: var(--accent); }
.nsf-add { margin-top: 8px; }

/* Contacts panel on the event detail page. */
.ev-contacts {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green-bright);
  border-radius: 7px;
  padding: 10px 14px;
  margin: 6px 0 14px;
  font-size: 13px;
}
.ev-contacts-title { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--steel-dark); }
.ev-contacts p { margin: 2px 0; }
.ev-contact-label { font-weight: 600; color: var(--steel-dark); margin-right: 4px; }
.ev-nsf-list { margin: 2px 0 4px 18px; padding: 0; }
.ev-nsf-list li { margin: 1px 0; }

.primary-btn {
  background: var(--green-bright);
  color: #111;
  border: 1px solid var(--green-bright-edge);
  border-radius: 6px;
  padding: 10px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
}
.primary-btn:disabled { opacity: 0.55; }
.primary-btn.small { padding: 7px 12px; font-size: 13px; }

.ev-form-actions .cancel-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--steel-dark);
  padding: 10px 14px;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

/* Detail view -------------------------------------------------------------- */

.back-btn {
  background: transparent;
  border: none;
  color: var(--steel-dark);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 8px;
}
.back-btn:hover { color: #111; }

#event-header { margin-bottom: 14px; }

/* "Landing page" hero for the event detail view. */
.ev-hero {
  background: linear-gradient(135deg, var(--green-bright) 0%, #c1dc59 100%);
  border: 1px solid var(--green-bright-edge);
  border-radius: 12px;
  padding: 18px 18px 16px;
  color: #111;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.ev-hero-title {
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.ev-hero-date {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 600;
  opacity: 0.85;
}

/* Labelled info list (Treffpunkt / Teilgebiet / Anmeldeschluss). */
.ev-info-list {
  margin-top: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.ev-info-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.ev-info-row:first-child { border-top: none; }
.ev-info-row .ev-info-label {
  flex: 0 0 130px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
}
.ev-info-row .ev-info-value { color: #111; font-weight: 500; }
.ev-map-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--steel-dark);
  font-size: 12px;
  text-decoration: none;
  font-weight: 500;
}
.ev-map-link:hover { background: var(--card); border-color: var(--green-bright-edge); color: #111; }

.treffpunkt-coords-row { gap: 8px; }
.treffpunkt-here-btn { align-self: end; padding: 7px 10px; flex: 0 0 auto; }

/* Stats strip for Treff / Beginn / Ende. */
.ev-times-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.ev-time {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}
.ev-time-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  margin-bottom: 2px;
}
.ev-time-value {
  display: block;
  font-size: 19px;
  font-weight: 700;
  color: #111;
  font-variant-numeric: tabular-nums;
}

.ev-briefing {
  margin: 10px 0 0;
  padding: 8px 12px;
  background: var(--bg);
  border-left: 3px solid var(--green-bright);
  border-radius: 4px;
  white-space: pre-wrap;
  font-size: 13px;
  color: var(--steel-dark);
}

@media (max-width: 480px) {
  .ev-hero { padding: 16px 16px 14px; }
  .ev-hero-title { font-size: 22px; }
  .ev-hero-date { font-size: 14px; }
  .ev-info-row .ev-info-label { flex: 0 0 110px; }
}

.ev-tabs {
  display: flex;
  gap: 4px;
  margin: 12px 0 10px;
  border-bottom: 1px solid var(--border);
}
.ev-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: -1px;
}
.ev-tab.active {
  color: #111;
  font-weight: 600;
  border-bottom-color: var(--green-bright);
}

.ev-section {
  margin-top: 22px;
}
.ev-section-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.ev-section--squads .ev-section-title { border-bottom-color: var(--green-bright); }

.ev-placeholder { color: var(--muted); font-size: 14px; padding: 12px 0; }

/* Revierkarte (plan map) ---------------------------------------------------- */

.ev-section--map .ev-section-title { border-bottom-color: #e8650e; }

.plan-map-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}
#plan-map {
  width: 100%;
  height: clamp(260px, 44vh, 380px);
  background: #1a1a1a;
}
.plan-map-placeholder {
  margin: 0;
  padding: 22px 14px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  background: #fff;
  border: 1px dashed var(--border);
  border-radius: 12px;
}

/* Round white control, bottom-right — mirrors Google's own map buttons. */
.plan-locate-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 5;
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #5f6368;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plan-locate-btn svg { width: 22px; height: 22px; }
.plan-locate-btn.active { color: #1a73e8; }
.plan-locate-btn.locating { animation: plan-locate-pulse 1s ease-in-out infinite; }
@keyframes plan-locate-pulse { 50% { opacity: 0.45; } }

.plan-map-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 13px;
  color: #444;
}
.plan-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.plan-legend-count { color: var(--muted); }
.plan-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  flex: none;
}

.plan-info { font-size: 13px; line-height: 1.45; min-width: 150px; }
.plan-info strong { font-size: 14px; }
.plan-info-sub { color: #666; margin: 1px 0 5px; }
.plan-info-free { font-style: italic; }

/* Ansteller Runden ---------------------------------------------------------- */

.squads-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.squads-toolbar .muted { font-size: 12px; }

/* 3-up grid of compact tiles — like a parade roster of the Runden. */
.squads-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 720px) { .squads-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .squads-grid { grid-template-columns: 1fr; } }

.squad-tile {
  background: var(--green-bright);
  border: 1px solid var(--green-bright-edge);
  border-radius: 12px;
  padding: 14px 14px 12px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: #111;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 92px;
  transition: transform 0.08s, box-shadow 0.12s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.squad-tile:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  transform: translateY(-1px);
}
.squad-tile:active { transform: scale(0.98); }
.squad-tile-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.squad-tile-ansteller { font-size: 13px; }
.squad-tile-count { font-size: 12px; color: #2d3a05; opacity: 0.8; margin-top: auto; }
.squad-tile-ansteller .muted { color: #4a4d52; }

/* Member roster inside each tile — every name visible at a glance. */
.tile-members {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  font-size: 13px;
}
.tile-member {
  display: flex;
  align-items: baseline;
  gap: 8px;
  justify-content: space-between;
}
.tile-member-name { font-weight: 500; }
.tile-member--leader .tile-member-name { font-weight: 700; }
.tile-member-role {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #2d3a05;
  opacity: 0.75;
  white-space: nowrap;
}
.treiber-tile .tile-member-role { color: #1e2a36; opacity: 0.7; }

/* Treibergruppe tiles — soft slate-blue so they read as a separate kind
   of group from the lime Ansteller Runden. */
.treiber-tile {
  background: linear-gradient(135deg, #c7d4e0 0%, #b3c4d4 100%);
  border-color: #93a7b9;
  color: #1e2a36;
}
.treiber-tile:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16); }
.treiber-tile .squad-tile-count { color: #1e2a36; }
.squad-tile-start {
  font-size: 12.5px;
  color: #1e2a36;
  opacity: 0.85;
}

.start-pos-fieldset { margin: 4px 0 12px; }
.start-pos-fieldset legend {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--steel-dark);
  padding: 0 6px;
}

.ev-section--treiber .ev-section-title { border-bottom-color: #93a7b9; }

/* Bright blue for the Treibergruppe create button so the action visibly
   belongs to the (calmer slate-blue) Treibergruppen section. */
#new-treiber-btn {
  background: #03a9f4;
  border-color: #0288d1;
  color: #fff;
}
#new-treiber-btn:hover { background: #29b6f6; }
#new-treiber-btn:disabled { opacity: 0.6; }

/* Vibrant emerald green for the Infomail action — distinct from the lime
   "+ Neue Ansteller Runde" so it's obviously a different operation. */
.infomail-btn {
  background: #16a34a;
  border-color: #15803d;
  color: #fff;
}
.infomail-btn:hover { background: #22c55e; border-color: #16a34a; }
.infomail-btn:disabled { opacity: 0.55; }

/* Infomail preview modal */
#infomail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 50;
}
#infomail-modal {
  position: fixed;
  z-index: 51;
  left: 8px;
  right: 8px;
  top: calc(8px + var(--safe-top) + var(--vv-top));
  bottom: calc(8px + var(--safe-bottom) + var(--vv-bottom));
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 4px solid #16a34a;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
}
#infomail-modal[hidden] { display: none; }
#infomail-modal > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
#infomail-modal > header h2 { margin: 0; font-size: 17px; }
#infomail-close {
  background: transparent;
  border: none;
  font-size: 26px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  color: var(--muted);
}
.infomail-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
}
.infomail-subject { margin: 6px 0 10px; }
/* Section card — one per logical group in the modal (options, meta,
 * email body, PDF). Subtle border + radius, slight tint differentiates
 * from the modal background. */
.infomail-section {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: #fafaf6;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.infomail-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: #444;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.infomail-section-actions { display: inline-flex; gap: 6px; text-transform: none; letter-spacing: 0; }
.infomail-link-btn {
  display: inline-block;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #16a34a;
  text-decoration: none;
  transition: background 0.1s, border-color 0.1s;
}
.infomail-link-btn:hover { background: #f0fdf4; border-color: #16a34a; }

/* Toggle option card — bigger, colored when active, gray when off so
 * it's instantly clear which mode is selected. */
.infomail-opt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: #f0fdf4;
  border: 2px solid #16a34a;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, opacity 0.12s;
}
.infomail-opt:hover { background: #dcfce7; }
.infomail-opt input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  flex: none;
  cursor: pointer;
  accent-color: #16a34a;
}
.infomail-opt-text { display: flex; flex-direction: column; gap: 3px; }
.infomail-opt-title { font-size: 15px; font-weight: 700; color: #15803d; }
.infomail-opt-sub { font-size: 13px; color: #4d5a4d; line-height: 1.4; }
/* Off state — desaturated card so the user sees at a glance that
 * Schützen will be skipped. */
.infomail-opt--off { background: #f5f5f5; border-color: #cbd5d1; }
.infomail-opt--off:hover { background: #ececec; }
.infomail-opt--off .infomail-opt-title { color: #555; }
.infomail-opt--off .infomail-opt-sub { color: #6b7280; }

/* Compact label/value rows inside the meta section (Empfänger, Betreff). */
.infomail-meta-section { padding: 12px 16px; }
.infomail-meta-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  font-size: 14.5px;
}
.infomail-meta-row + .infomail-meta-row { border-top: 1px solid var(--border); }
.infomail-meta-label {
  flex: none;
  width: 90px;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.infomail-meta-value { flex: 1; color: #232323; }
.infomail-meta-value strong { color: #15803d; font-size: 16px; }

/* Legacy class kept for warning banner; section heading wraps the new
 * card-style titles instead. */
.infomail-section-title {
  margin: 18px 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.infomail-preview-iframe {
  width: 100%;
  min-height: 320px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.infomail-pdf-fallback { margin: 0; font-size: 13px; }

/* Freigaben — per-event editor on the event detail page (below
 * Kontakte). One block per species, gender rows (Hirsche/Hirschkühe/…)
 * with the AKs as clickable pill checkboxes. Auto-saves on toggle. */
.ev-freigaben {
  margin: 16px 0 0;
  padding: 14px 16px;
  background: #fafaf6;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.ev-freigaben .ev-section-title {
  margin: 0 0 4px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.freigabe-save-status {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: #16a34a;
  font-style: normal;
}
.freigabe-hint { margin: 0 0 12px; font-size: 12.5px; }
.freigabe-foot { margin: 8px 0 0; font-size: 12.5px; font-style: italic; }
.freigabe-species { margin: 0 0 12px; }
.freigabe-species:last-of-type { margin-bottom: 0; }
.freigabe-species-label {
  font-size: 13px;
  font-weight: 700;
  color: #15803d;
  margin: 0 0 4px;
}
.freigabe-group {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  flex-wrap: wrap;
}
.freigabe-group-label {
  flex: none;
  width: 100px;
  font-size: 12.5px;
  font-weight: 600;
  color: #555;
}
.freigabe-aks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.freigabe-ak {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: #f5f5f5;
  border: 1px solid #d0d0d0;
  border-radius: 999px;
  font-size: 12.5px;
  color: #888;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.freigabe-ak:hover { background: #ececec; }
.freigabe-ak input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #16a34a;
  cursor: pointer;
}
.freigabe-ak--on {
  background: #f0fdf4;
  border-color: #16a34a;
  color: #15803d;
  font-weight: 600;
}
.freigabe-ak--on:hover { background: #dcfce7; }
@media (max-width: 540px) {
  .freigabe-group { flex-direction: column; align-items: flex-start; gap: 4px; }
  .freigabe-group-label { width: auto; }
}
.infomail-preview-pdf {
  width: 100%;
  min-height: 640px;
  height: 70vh;
  background: #f2f3f5;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: block;
}
.infomail-pdf-note {
  margin: 6px 0 0;
  font-size: 12.5px;
}
.infomail-pdf-note a { color: #16a34a; font-weight: 600; }

/* Hint shown inside a Treibergruppe row when no acceptances yet. */
.sr-empty {
  margin: 4px 0 0 32px;
  font-size: 12.5px;
}

/* Squad edit modal --------------------------------------------------------- */

#squad-edit-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 50;
}
#squad-edit-modal {
  position: fixed;
  z-index: 51;
  left: 8px;
  right: 8px;
  top: calc(8px + var(--safe-top) + var(--vv-top));
  bottom: calc(8px + var(--safe-bottom) + var(--vv-bottom));
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 4px solid var(--green-bright);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
}
#squad-edit-modal[hidden] { display: none; }
#squad-edit-modal > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
#squad-edit-modal > header h2 { margin: 0; font-size: 17px; }
#squad-edit-close {
  background: transparent;
  border: none;
  font-size: 26px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  color: var(--muted);
}
.squad-edit-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
}
.squad-modal-hint {
  margin: 0 0 12px;
  padding: 8px 12px;
  background: var(--bg);
  border-left: 3px solid var(--green-bright);
  border-radius: 4px;
  font-size: 13px;
  color: var(--steel-dark);
}

.modal-danger-row { margin-top: 16px; }
.ghost-btn--danger {
  color: #c0392b;
  border-color: #f1c1bb;
}
.ghost-btn--danger:hover {
  background: #fbe9e7;
  border-color: #c0392b;
  color: #c0392b;
}

.schuetze-row--ansteller {
  border-color: var(--green-bright-edge);
  background: #f3f8df; /* very light lime */
}
.schuetze-row--ansteller .sr-num {
  color: var(--green-bright-edge);
  font-weight: 700;
  flex: 0 0 auto;
  padding-right: 6px;
  letter-spacing: 0.3px;
}
.sr-remove-placeholder { display: inline-block; width: 28px; height: 28px; }

.squad-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.squad-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 10px;
}
.squad-name { margin: 0; font-size: 16px; font-weight: 700; }
.squad-delete {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 22px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
}
.squad-delete:hover { background: #fbe9e7; color: var(--accent); }

.squad-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
}
.squad-field-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
}
.squad-schuetzen-title { margin: 12px 0 6px; }

.squad-field select,
.squad-field textarea {
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
}

.schuetzen-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }

.schuetze-row {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sr-line { display: flex; gap: 6px; align-items: center; }
.sr-hunter-line .sr-num {
  flex: 0 0 22px;
  text-align: right;
  font-weight: 700;
  color: var(--muted);
}
.sr-hunter, .sr-position {
  flex: 1;
  font: inherit;
  font-size: 14px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  min-width: 0;
}
.sr-remove {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 20px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
}
.sr-remove:hover { background: #fbe9e7; color: var(--accent); }

.sr-coords { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.sr-coords-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.sr-coords-grid:last-child { grid-template-columns: 1fr auto; }
.sr-coords input {
  font: inherit;
  font-size: 14px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  min-width: 0;
}
.sr-here { padding: 6px 10px; font-size: 14px; }

.squad-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.squad-status { font-size: 13px; }

@media (max-width: 480px) {
  .squad-card { padding: 10px 12px; }
  .sr-coords-grid:last-child { grid-template-columns: 1fr; }
}

/* Add-hunter form ---------------------------------------------------------- */

.invites-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.ghost-btn {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--steel-dark);
  cursor: pointer;
}
.ghost-btn:hover { background: var(--card); border-color: var(--green-bright-edge); color: #111; }

.add-hunter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.add-hunter-form input {
  flex: 1 1 130px;
  font: inherit;
  font-size: 14px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
}
.lang-picker {
  flex: 0 0 auto;
  font: inherit;
  font-size: 14px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.hunter-flag {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
  margin-right: 4px;
}

/* Address book modal ------------------------------------------------------- */

#address-book-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 50;
}
#address-book-modal {
  position: fixed;
  z-index: 51;
  left: 8px;
  right: 8px;
  top: calc(8px + var(--safe-top) + var(--vv-top));
  bottom: calc(8px + var(--safe-bottom) + var(--vv-bottom));
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 4px solid var(--green-bright);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
}
#address-book-modal[hidden] { display: none; }
#address-book-modal > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
#address-book-modal > header h2 { margin: 0; font-size: 17px; }
#address-book-close {
  background: transparent;
  border: none;
  font-size: 26px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  color: var(--muted);
}
.address-book-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
}
.address-book-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ab-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
}
.ab-row input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
.ab-flag { font-size: 17px; flex-shrink: 0; }
.ab-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ab-name { font-weight: 600; font-size: 14px; color: #111; }
.ab-email { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Language tabs inside the invite preview modal --------------------------- */

.invite-lang-tabs {
  display: flex;
  gap: 4px;
  margin: -4px 0 8px;
  border-bottom: 1px solid var(--border);
}
.invite-lang-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: -1px;
}
.invite-lang-tab.active {
  color: #111;
  font-weight: 600;
  border-bottom-color: var(--green-bright);
}

/* Hunter list -------------------------------------------------------------- */

#hunters-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.hunter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 7px;
}
.hunter-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.hunter-main strong { font-size: 14px; }
.hunter-email {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hunter-status {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.hunter-accepted .hunter-status { color: #1f7a31; }
.hunter-declined .hunter-status { color: #c0392b; }
.hunter-invited  .hunter-status { color: #8a6d00; }
.hunter-pending  .hunter-status { color: var(--muted); }

.hunter-remove {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
}
.hunter-remove:hover { background: var(--bg); color: var(--accent); }

.link-btn { background: transparent; border: none; cursor: pointer; }

.invite-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.invite-status { font-size: 13px; color: var(--muted); }

/* Invitation preview modal — review and amend the e-mail before sending. */
#invite-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 50;
}
#invite-modal {
  position: fixed;
  z-index: 51;
  left: 8px;
  right: 8px;
  top: calc(8px + var(--safe-top) + var(--vv-top));
  bottom: calc(8px + var(--safe-bottom) + var(--vv-bottom));
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 4px solid var(--green-bright);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
}
#invite-modal[hidden] { display: none; }
#invite-modal > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
#invite-modal > header h2 { margin: 0; font-size: 17px; }
#invite-close {
  background: transparent;
  border: none;
  font-size: 26px;
  line-height: 1;
  width: 36px;
  height: 36px;
  cursor: pointer;
  color: var(--muted);
}
.invite-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.invite-hint {
  margin: 0;
  font-size: 13px;
  color: var(--steel-dark);
}
.invite-hint code {
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.invite-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--steel-dark);
}
.invite-field input,
.invite-field textarea {
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
}
.invite-field textarea {
  resize: vertical;
  min-height: 240px;
  line-height: 1.55;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 400;
  color: #232323;
}
.invite-recipients {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--steel-dark);
  background: var(--bg);
  padding: 8px 10px;
  border-radius: 6px;
}
.invite-modal-actions {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--card);
  gap: 8px;
}

/* Edit-event modal — built dynamically in JS, same shell as the other
   modals. The warning banner appears at the top if invitations were
   already sent. */
.detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.detail-toolbar .ghost-btn { padding: 6px 12px; }

.warning-banner {
  background: #fff5d6;
  border: 1px solid #e0c068;
  border-left: 4px solid #c69400;
  border-radius: 7px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13.5px;
  color: #5b4b00;
  line-height: 1.45;
}

#event-edit-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 50;
}
#event-edit-modal {
  position: fixed;
  z-index: 51;
  left: 8px;
  right: 8px;
  top: calc(8px + var(--safe-top) + var(--vv-top));
  bottom: calc(8px + var(--safe-bottom) + var(--vv-bottom));
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 4px solid var(--green-bright);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
}
#event-edit-modal[hidden] { display: none; }
#event-edit-modal > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
#event-edit-modal > header h2 { margin: 0; font-size: 17px; }
#event-edit-close {
  background: transparent;
  border: none;
  font-size: 26px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  color: var(--muted);
}
.event-edit-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
}

/* Einladungsentwurf modal — same shell as invite-modal, separate ID so
   nothing conflicts when both modals exist in the DOM. */
#template-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 50;
}
#template-modal {
  position: fixed;
  z-index: 51;
  left: 8px;
  right: 8px;
  top: calc(8px + var(--safe-top) + var(--vv-top));
  bottom: calc(8px + var(--safe-bottom) + var(--vv-bottom));
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 4px solid var(--green-bright);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
}
#template-modal[hidden] { display: none; }
#template-modal > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
#template-modal > header h2 { margin: 0; font-size: 17px; }
#template-close {
  background: transparent;
  border: none;
  font-size: 26px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  color: var(--muted);
}

/* Stände-verwalten modal — shell mirrors the other modals, content
   inside is the add-stand form + CSV import + stats. */
#posts-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 50;
}
#posts-modal {
  position: fixed;
  z-index: 51;
  left: 8px;
  right: 8px;
  top: calc(8px + var(--safe-top) + var(--vv-top));
  bottom: calc(8px + var(--safe-bottom) + var(--vv-bottom));
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 4px solid var(--green-bright);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
}
#posts-modal[hidden] { display: none; }
#posts-modal > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
#posts-modal > header h2 { margin: 0; font-size: 17px; }
#posts-close {
  background: transparent;
  border: none;
  font-size: 26px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  color: var(--muted);
}
.post-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.post-form-actions .muted { font-size: 12.5px; }
.post-csv-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.post-csv-help {
  flex: 1 1 240px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0;
}
.post-csv-help summary {
  cursor: pointer;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--steel-dark);
  user-select: none;
}
.post-csv-help p {
  margin: 4px 12px;
  font-size: 12.5px;
  color: var(--steel-dark);
}
.post-csv-help code {
  background: #fff;
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11.5px;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.post-stats {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}

.template-placeholders {
  margin: 4px 0 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0;
}
.template-placeholders summary {
  cursor: pointer;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--steel-dark);
  user-select: none;
}
.template-placeholders[open] summary { border-bottom: 1px solid var(--border); }
.placeholder-list {
  margin: 0;
  padding: 8px 14px 10px 28px;
  list-style: disc;
}
.placeholder-list li {
  font-size: 12.5px;
  color: var(--steel-dark);
  margin: 2px 0;
}
.placeholder-list code {
  background: #fff;
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11.5px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: #111;
}

/* Toast variants used by events page (vanilla toast lives in main app). */
body.events-page #toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: #111;
  color: var(--green-bright);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
body.events-page #toast.toast-error { background: #c0392b; color: #fff; }

/* RSVP page (rsvp.html) ---------------------------------------------------- */

body.rsvp-page {
  background: linear-gradient(180deg, var(--green-bright) 0%, var(--bg) 200px);
  min-height: 100vh;
}

#rsvp-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  color: #111;
  /* brand gradient bar — the lime stretch holds the wordmark, the
     charcoal end carries the gradient across the rest of the bar. */
  background: linear-gradient(100deg, var(--lime) 0%, var(--lime) 58%, var(--charcoal) 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

#rsvp-main {
  max-width: 540px;
  margin: 0 auto;
  padding: 8px 14px 40px;
}

.rsvp-state {
  text-align: center;
  padding: 24px 12px;
  color: var(--steel-dark);
}
.rsvp-state-error { color: var(--accent); }
.rsvp-state-accepted, .rsvp-state-declined {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 24px;
  text-align: left;
  color: #111;
  margin-top: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.rsvp-state-accepted h2,
.rsvp-state-declined h2 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
}
.rsvp-state-accepted h2::before { content: "✓ "; font-weight: 700; }
.rsvp-state-declined h2::before { content: "✗ "; font-weight: 700; }
.rsvp-state-accepted h2 { color: #1f7a31; }
.rsvp-state-declined h2 { color: #c0392b; }
.rsvp-state-accepted p,
.rsvp-state-declined p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--steel-dark);
}

.rsvp-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

.rsvp-greeting { margin: 0 0 8px; font-size: 15px; color: var(--steel-dark); }
.rsvp-event-name {
  margin: 6px 0 14px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
}

.rsvp-event-meta {
  display: grid;
  gap: 6px;
  margin: 12px 0;
}
.rsvp-meta-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px;
  font-size: 14px;
}
.rsvp-meta-row dt { color: var(--muted); font-weight: 500; margin: 0; }
.rsvp-meta-row dd { margin: 0; color: #111; }

.rsvp-briefing {
  margin: 12px 0;
  padding: 10px 12px;
  background: var(--bg);
  border-left: 3px solid var(--green-bright);
  border-radius: 4px;
  font-size: 13px;
  white-space: pre-wrap;
  color: var(--steel-dark);
}

.rsvp-current {
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}
.rsvp-current-accepted { background: #e8f5e9; color: #1f7a31; }
.rsvp-current-declined { background: #fbe9e7; color: #c0392b; }

.rsvp-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.rsvp-accept {
  flex: 1;
  background: var(--green-bright);
  color: #111;
  border: 1px solid var(--green-bright-edge);
  border-radius: 7px;
  padding: 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.rsvp-decline {
  flex: 1;
  background: #fff;
  color: var(--steel-dark);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.rsvp-accept:disabled,
.rsvp-decline:disabled { opacity: 0.55; }

.rsvp-role-choice { margin-top: 16px; }
.rsvp-role-prompt { margin: 0 0 10px; font-weight: 600; }
.rsvp-role-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.role-btn {
  background: var(--card);
  border: 1px solid var(--green-bright-edge);
  border-radius: 7px;
  padding: 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #111;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.1s;
}
.role-btn:hover { background: var(--bg); }
.role-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f4f4f4;
  border-color: #d4d4d4;
  color: #888;
}

/* Confirmation checkboxes shown above the role buttons. The role
 * buttons stay disabled until both boxes are ticked. */
.rsvp-confirms {
  margin: 0 0 14px;
  padding: 12px 14px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fcfcf8;
}
.rsvp-confirms legend {
  padding: 0 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rsvp-confirm {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 14.5px;
  line-height: 1.4;
  cursor: pointer;
}
.rsvp-confirm input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--green-bright-edge);
}
.rsvp-confirm a { color: var(--green-bright-edge); font-weight: 600; }
.rsvp-confirm a:hover { text-decoration: underline; }
.rsvp-role-back {
  margin-top: 10px;
  background: transparent;
  border: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 0;
}

/* Dog form on the RSVP page (Schütze/Standschneller & Hundeführer only) ---- */
.rsvp-dog-form { margin-top: 16px; }
.dog-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.dog-row {
  display: flex;
  gap: 6px;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px;
}
.dog-row .dog-breed {
  flex: 1;
  font: inherit;
  font-size: 15px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  min-width: 0;
}
.dog-row .dog-count {
  width: 56px;
  font: inherit;
  font-size: 15px;
  padding: 6px 4px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  text-align: center;
}
.dog-row .dog-remove {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 20px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
}
.dog-row .dog-remove:hover { background: var(--card); color: var(--accent); }
.dog-add-btn {
  background: var(--card);
  border: 1px dashed var(--green-bright-edge);
  border-radius: 7px;
  padding: 10px;
  width: 100%;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--green-bright-edge);
  cursor: pointer;
  margin-bottom: 12px;
}
.dog-add-btn:hover { background: var(--bg); }
.dog-actions { margin-top: 4px; }

.hunter-dogs {
  font-size: 12px;
  color: var(--steel-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.rsvp-foot {
  margin-top: 16px;
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  font-style: italic;
}

@media (max-width: 600px) {
  body.events-page #topbar { gap: 8px; padding: calc(8px + var(--safe-top)) 12px 8px; }
  .ev-view-title { font-size: 18px; }
  .ev-title { font-size: 19px; }
  .add-hunter-form { flex-direction: column; }
  .add-hunter-form input { flex: none; width: 100%; }
  .add-hunter-form button { align-self: stretch; }
  .rsvp-event-name { font-size: 20px; }
  .rsvp-meta-row { grid-template-columns: 90px 1fr; }
}