/* Bienendokumentation: Oberfläche im Stil der Apple Human Interface Guidelines */

:root {
  color-scheme: light dark;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", system-ui, Roboto, sans-serif;

  --bg: #f2f2f7;
  --bg-elev: #ffffff;
  --label: #000000;
  --label-2: rgba(60, 60, 67, 0.6);
  --label-3: rgba(60, 60, 67, 0.3);
  --sep: rgba(60, 60, 67, 0.29);
  --sep-soft: rgba(60, 60, 67, 0.12);
  --fill: rgba(120, 120, 128, 0.12);
  --fill-strong: rgba(120, 120, 128, 0.2);

  /* Corporate Design: Honiggold #E3A21D, Schwarz #060606 */
  --brand: #e3a21d;
  --brand-ink: #060606;
  --logo-ink: #060606;
  --tint: #9a6200;
  --tint-ink: #060606;
  --tint-soft: rgba(227, 162, 29, 0.16);
  --red: #d70015;
  --red-soft: rgba(255, 59, 48, 0.12);
  --green-soft: rgba(52, 199, 89, 0.16);
  --blue-soft: rgba(0, 122, 255, 0.1);
  --switch-on: #34c759;

  --bar-bg: rgba(242, 242, 247, 0.78);
  --sidebar-bg: rgba(246, 246, 250, 0.9);
  --seg-selected: #ffffff;
  --shadow-seg: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);

  --radius: 12px;
  --radius-lg: 14px;
  --nav-h: 52px;
  --tab-h: 49px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-elev: #1c1c1e;
    --label: #ffffff;
    --label-2: rgba(235, 235, 245, 0.6);
    --label-3: rgba(235, 235, 245, 0.3);
    --sep: rgba(84, 84, 88, 0.65);
    --sep-soft: rgba(84, 84, 88, 0.4);
    --fill: rgba(120, 120, 128, 0.24);
    --fill-strong: rgba(120, 120, 128, 0.36);

    --logo-ink: #ffffff;
    --tint: #e3a21d;
    --tint-ink: #060606;
    --tint-soft: rgba(227, 162, 29, 0.2);
    --red: #ff453a;
    --red-soft: rgba(255, 69, 58, 0.18);
    --green-soft: rgba(48, 209, 88, 0.18);
    --blue-soft: rgba(10, 132, 255, 0.18);

    --bar-bg: rgba(0, 0, 0, 0.72);
    --sidebar-bg: rgba(28, 28, 30, 0.85);
    --seg-selected: #636366;
    --shadow-seg: 0 3px 8px rgba(0, 0, 0, 0.4);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--label);
  font: 400 17px/1.35 var(--font);
  letter-spacing: -0.016em;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--tint); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; border-radius: 6px; }

h1, h2, h3, p { margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Rahmen ---------- */

.app { min-height: 100vh; min-height: 100dvh; }

.main { min-width: 0; }

.sidebar { display: none; }

.navbar {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: calc(var(--nav-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) calc(8px + env(safe-area-inset-right)) 0 calc(8px + env(safe-area-inset-left));
  background: var(--bar-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 0.5px 0 transparent;
  transition: box-shadow 0.2s;
}
body.scrolled .navbar { box-shadow: 0 0.5px 0 var(--sep); }

.nav-slot { display: flex; align-items: center; min-width: 0; }
.nav-slot-end { justify-content: flex-end; }

.nav-title {
  font-weight: 600; font-size: 17px; text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 55vw;
  opacity: 0; transition: opacity 0.2s;
}
body.title-collapsed .nav-title { opacity: 1; }

.nav-back, .nav-link {
  display: inline-flex; align-items: center; gap: 2px;
  min-height: 44px; padding: 0 8px; font-size: 17px; color: var(--tint);
}
.nav-back .icon { width: 22px; height: 22px; stroke-width: 2.2; margin-left: -6px; }
.nav-link { font-weight: 600; }

.content {
  width: 100%; max-width: 680px; margin: 0 auto;
  padding: 0 calc(16px + env(safe-area-inset-right)) calc(var(--tab-h) + env(safe-area-inset-bottom) + 32px) calc(16px + env(safe-area-inset-left));
}

.large-title {
  font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -0.022em;
  padding: 4px 4px 14px; overflow-wrap: anywhere;
}

.lede { color: var(--label-2); padding: 0 4px 8px; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: space-around;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  min-height: calc(var(--tab-h) + env(safe-area-inset-bottom));
  background: var(--bar-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 -0.5px 0 var(--sep);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--tab-h); color: var(--label-2); font-size: 11px; font-weight: 500; letter-spacing: 0;
}
.tab:hover { text-decoration: none; }
.tab.is-active { color: var(--tint); }
.tab .icon { width: 25px; height: 25px; }

@media (min-width: 880px) {
  .app { display: grid; grid-template-columns: 264px minmax(0, 1fr); }
  .tabbar { display: none; }
  .sidebar {
    display: flex; flex-direction: column; gap: 4px;
    position: sticky; top: 0; height: 100vh; height: 100dvh;
    padding: 20px 12px 16px;
    background: var(--sidebar-bg);
    -webkit-backdrop-filter: saturate(180%) blur(30px);
    backdrop-filter: saturate(180%) blur(30px);
    box-shadow: 0.5px 0 0 var(--sep);
  }
  .content { padding-bottom: 48px; }
  .navbar { --nav-h: 56px; }
  .nav-title { max-width: 40vw; }
}

.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; font-weight: 600; font-size: 17px; }
.brand-mark { height: 34px; width: auto; flex: none; }
.logo-gold { fill: var(--brand); }
.logo-ink { fill: var(--logo-ink); }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-link {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px;
  border-radius: 9px; color: var(--label); font-size: 15px; font-weight: 500;
}
.side-link .icon { width: 22px; height: 22px; color: var(--tint); }
.side-link:hover { background: var(--fill); text-decoration: none; }
.side-link.is-active { background: var(--tint-soft); color: var(--tint); }
.side-user {
  margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 8px;
  border-radius: 10px; color: var(--label);
}
.side-user:hover { background: var(--fill); text-decoration: none; }
.side-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.side-user-text strong { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user-text small { font-size: 13px; color: var(--label-2); }
.side-version { padding: 8px 8px 0; font-size: 12px; color: var(--label-3); }

.avatar {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--fill-strong); color: var(--label-2);
  font-size: 14px; font-weight: 600; letter-spacing: 0;
}

/* ---------- Gruppierte Listen ---------- */

.section { margin-top: 20px; }
.section:first-of-type { margin-top: 8px; }

.group-header {
  padding: 0 16px 6px; font-size: 13px; font-weight: 400; letter-spacing: -0.004em;
  color: var(--label-2); text-transform: none;
}
.group-footer { padding: 8px 16px 0; font-size: 13px; line-height: 1.38; color: var(--label-2); }
.group-footer + .group-footer { padding-top: 4px; }
.group-footer .mono { color: var(--label); }

.group { background: var(--bg-elev); border-radius: var(--radius); overflow: hidden; }

.row {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 8px 16px; color: var(--label);
}
.row + .row::before {
  content: ""; position: absolute; top: 0; right: 0; left: 16px; height: 0.5px; background: var(--sep);
}
.row-label { flex: none; min-width: 7.2em; }
.row-value { flex: 1; min-width: 0; text-align: right; color: var(--label-2); overflow-wrap: anywhere; }
.row-readonly .row-value { color: var(--label-2); }

a.row-link:hover { text-decoration: none; background: var(--fill); }
a.row-link:active { background: var(--fill-strong); }
.row-link .avatar { width: 40px; height: 40px; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.row-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { font-size: 14px; color: var(--label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-trailing { color: var(--label-2); font-size: 15px; white-space: nowrap; }
.row-link .chevron { width: 16px; height: 16px; color: var(--label-3); stroke-width: 2.4; }
.is-inactive .row-title, .is-inactive .avatar { opacity: 0.55; }

.badge {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--fill); color: var(--label-2); font-size: 12px; font-weight: 500; vertical-align: 1px;
}

.field {
  flex: 1; min-width: 0; width: 100%; padding: 10px 0; border: 0; background: transparent;
  color: var(--label); font: inherit; letter-spacing: inherit; outline: none;
}
.field::placeholder { color: var(--label-3); }
.field:focus-visible { outline: none; }
.row:focus-within { background: var(--fill); }
.row:has(.switch):focus-within { background: transparent; }

/* Schalter (wie iOS) */
.switch {
  -webkit-appearance: none; appearance: none; flex: none; margin: 0;
  position: relative; width: 51px; height: 31px; border-radius: 999px;
  background: var(--fill-strong); cursor: pointer; transition: background 0.25s;
}
.switch::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s;
}
.switch:checked { background: var(--switch-on); }
.switch:checked::before { transform: translateX(20px); }
.switch:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }
.row:has(.switch) { justify-content: space-between; }

/* Segmentierte Auswahl */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.segmented { display: flex; padding: 2px; border-radius: 9px; background: var(--fill); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
  flex: 1; text-align: center; padding: 6px 4px; border-radius: 7px;
  font-size: 15px; font-weight: 500; letter-spacing: -0.01em; cursor: pointer;
  transition: background 0.2s;
}
.segmented input:checked + label { background: var(--seg-selected); box-shadow: var(--shadow-seg); font-weight: 600; }
.segmented input:focus-visible + label { outline: 2px solid var(--tint); outline-offset: 1px; }
.segmented input:disabled + label { opacity: 0.4; cursor: default; }

/* ---------- Schaltflächen ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 20px; border: 0; border-radius: var(--radius-lg);
  font: 600 17px/1 var(--font); letter-spacing: -0.016em; cursor: pointer;
  background: var(--fill); color: var(--tint);
  transition: opacity 0.15s, transform 0.15s;
}
.btn:hover { text-decoration: none; }
.btn:active { opacity: 0.7; transform: scale(0.985); }
.btn-primary { background: var(--brand); color: var(--brand-ink); }
.btn-secondary { background: var(--fill); color: var(--tint); }
.btn-danger { background: var(--fill); color: var(--red); }
.btn-block { display: flex; width: 100%; }
.btn[aria-busy="true"] { opacity: 0.5; pointer-events: none; }
.btn[disabled] { opacity: 0.4; pointer-events: none; }

.actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }

/* ---------- Hinweise ---------- */

.banner {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px;
  padding: 12px 14px; border-radius: var(--radius); font-size: 15px; line-height: 1.35;
}
.banner .icon { width: 22px; height: 22px; margin-top: -1px; }
.banner-success { background: var(--green-soft); }
.banner-success .icon { color: #248a3d; }
.banner-error { background: var(--red-soft); }
.banner-error .icon { color: var(--red); }
.banner-info { background: var(--blue-soft); }
.banner-info .icon { color: #0066d6; }
@media (prefers-color-scheme: dark) {
  .banner-success .icon { color: #30d158; }
  .banner-info .icon { color: #0a84ff; }
}

.mono { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.94em; letter-spacing: 0; user-select: all; }
.muted { color: var(--label-2); }

/* ---------- Anmeldung, Installation, Fehlerseiten ---------- */

.auth { width: 100%; max-width: 420px; margin: 0 auto; padding: calc(8vh + env(safe-area-inset-top)) 20px calc(40px + env(safe-area-inset-bottom)); }
.auth-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; margin-bottom: 28px; }
.auth-head .brand-mark { height: 96px; width: auto; margin-bottom: 8px; }
.auth-title { font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: 0.01em; }
.auth-sub { color: var(--label-2); max-width: 32em; }
.auth-actions { margin-top: 24px; }
.auth .section:first-of-type { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Stände und Karte */
.map-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--fill); }
.map { position: relative; width: 100%; height: 300px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; background: #e8e4da; cursor: grab; outline: none; }
.map:focus-visible { outline: 2px solid var(--tint); outline-offset: -2px; }
.map-tall { height: 360px; }
.map-small { height: 220px; }
.map-tiles, .map-pins { position: absolute; inset: 0; }
.map-pins { pointer-events: none; }
.map-tile { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
@media (prefers-color-scheme: dark) { .map-tile { filter: brightness(0.78) contrast(1.05); } .map { background: #2a2a2c; } }
.map-pin { position: absolute; left: -15px; top: -38px; width: 30px; height: 38px; padding: 0; border: 0; background: none; pointer-events: auto; cursor: pointer; }
.map-pin::before {
  content: ""; position: absolute; left: 2px; top: 4px; width: 26px; height: 26px;
  background: var(--brand); border: 3px solid #060606; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); transform-origin: 50% 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.map-pin::after { content: ""; position: absolute; left: 11px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: #060606; }
.map-pin.is-inactive::before { background: #b9b9be; }
.map-pin-pick { pointer-events: none; }
.map-controls { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: var(--bar-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); }
.map-btn { width: 40px; height: 40px; border: 0; background: none; font: 400 24px/1 var(--font); color: var(--label); cursor: pointer; }
.map-btn + .map-btn { border-top: 0.5px solid var(--sep); }
.map-btn:active { background: var(--fill-strong); }
.map-attr { position: absolute; left: 0; bottom: 0; padding: 2px 8px; font-size: 11px; background: rgba(255, 255, 255, 0.78); color: #333; border-top-right-radius: 8px; }
.map-attr a { color: #1a5fb4; }
.map-callout { position: absolute; left: 0; top: 0; min-width: 130px; max-width: 220px; padding: 10px 34px 10px 14px; background: var(--bg-elev); color: var(--label); border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; gap: 2px; pointer-events: auto; font-size: 15px; }
.map-callout a { font-size: 15px; }
.map-callout-close { position: absolute; right: 2px; top: 2px; width: 32px; height: 32px; border: 0; background: none; color: var(--label-2); font-size: 22px; line-height: 1; cursor: pointer; }
.map-empty { display: grid; place-items: center; height: 160px; color: var(--label-2); text-align: center; padding: 0 24px; font-size: 15px; }

.row-pin { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--tint-soft); color: var(--tint); }
.row-pin .icon { width: 20px; height: 20px; }
.row-wrap .row-sub { white-space: normal; }
.note-text { padding: 12px 16px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; }
textarea.field { display: block; width: 100%; min-height: 110px; padding: 12px 16px; text-align: left; resize: vertical; font: inherit; color: var(--label); background: none; border: 0; }
.row-stack { flex-direction: column; align-items: stretch; gap: 4px; }
.search { margin: 0 0 14px; }
.search input { width: 100%; height: 38px; border: 0; border-radius: 10px; padding: 0 12px; background: var(--fill); color: var(--label); font: inherit; }
.search input::placeholder { color: var(--label-2); }
.btn-inline { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.check-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; min-height: 52px; position: relative; }
.check-row + .check-row::before { content: ""; position: absolute; left: 16px; right: 0; top: 0; height: 0.5px; background: var(--sep); }
.check-row input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--tint); flex: none; }
.check-row .row-main { flex: 1; min-width: 0; }
.link-row { color: var(--tint); }
.file-input { width: 100%; padding: 14px 16px; font: inherit; color: var(--label); }
[hidden] { display: none !important; }
.group-footer + .group { margin-top: 12px; }

/* Tätigkeiten und Fotos */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }
.foto-pick { cursor: pointer; }
.foto-pick:focus-within { background: var(--fill); }
.foto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-bottom: 12px; }
.foto { position: relative; margin: 0; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--fill); }
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto-del { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.foto-count { display: inline-flex; align-items: center; gap: 4px; }
.foto-count .icon { width: 16px; height: 16px; }
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 14px; padding: 2px 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 7px 14px; border-radius: 999px; background: var(--fill); color: var(--label); font-size: 15px; white-space: nowrap; }
.chip:hover { text-decoration: none; }
.chip.is-active { background: var(--brand); color: var(--brand-ink); font-weight: 600; }
select.select { text-align: right; text-align-last: right; appearance: none; -webkit-appearance: none; color: var(--label-2); }
select.select option { text-align: left; }
.row .field[type=date] { text-align: right; min-height: 44px; }
.segmented + .group, fieldset + .group { margin-top: 12px; }

/* Wanderungen: Stand-Zeilen */
.stand-zeile { gap: 8px; }
.stand-zeile .select { text-align: left; text-align-last: left; color: var(--label); }
.field.num { flex: 0 0 5.2em; width: 5.2em; text-align: right; }

/* Export und Druck */
.nav-button { background: none; border: 0; font: inherit; cursor: pointer; }
.print-head h1 { font-size: 20px; margin: 0 0 4px; }
.print-head p { margin: 0 0 18px; color: var(--label-2); font-size: 14px; }
.print-block { margin-bottom: 26px; }
.print-block h2 { font-size: 17px; margin: 0 0 8px; }
.print-block .count { color: var(--label-2); font-weight: 400; }
.muted { color: var(--label-2); }
.table-wrap { overflow-x: auto; border-radius: 12px; background: var(--bg-elev); }
.export-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.export-table th, .export-table td { padding: 8px 10px; text-align: left; border-bottom: 0.5px solid var(--sep); vertical-align: top; }
.export-table th { font-weight: 600; white-space: nowrap; background: var(--fill); }
.export-table td { overflow-wrap: anywhere; }
@page { size: A4 landscape; margin: 12mm; }
@media print {
  :root { color-scheme: light; --bg: #fff; --bg-elev: #fff; --label: #000; --label-2: #444; --sep: #999; --fill: #eee; }
  body { background: #fff !important; color: #000; }
  .sidebar, .navbar, .tabbar, .no-print, .banner { display: none !important; }
  .app { display: block !important; }
  .main, .content { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .table-wrap { overflow: visible; border-radius: 0; }
  .export-table { font-size: 10pt; }
  .export-table th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .export-table tr { break-inside: avoid; }
  .print-block { break-inside: auto; }
  .print-block h2 { break-after: avoid; }
}
.content:has(.print-head) { max-width: 1100px; }
fieldset + fieldset { margin-top: 18px; }
.segmented + .group, fieldset + .group { margin-top: 18px; }
.export-table td:first-child { white-space: nowrap; }

/* Version 0.7: Aufgaben, Umschalter, Zuordnung */
.scope-switch { display: flex; padding: 2px; border-radius: 9px; background: var(--fill); margin: 0 0 14px; max-width: 420px; }
.scope-switch button { flex: 1; border: 0; background: transparent; color: var(--label); font: inherit; font-size: 14px; padding: 7px 10px; border-radius: 7px; cursor: pointer; }
.scope-switch button.is-active { background: var(--seg-selected); box-shadow: var(--shadow-seg); font-weight: 600; }
.frist { font-size: 13px; text-align: right; max-width: 11em; }
.frist-ueberfaellig { color: var(--red); font-weight: 600; }
.frist-bald { color: #b25000; font-weight: 600; }
@media (prefers-color-scheme: dark) { .frist-bald { color: #ff9f0a; } }
.chips-inline { margin-top: 10px; }
.chips-inline .chip { border: 0; font: inherit; font-size: 15px; cursor: pointer; }
.actions-gap { margin: 10px 0 0; }
.check-list .row { cursor: pointer; }
.check-list input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--brand); flex: none; }
.sum-row td { border-top: 2px solid var(--separator, rgba(0,0,0,.2)); }
.export-table meter { width: 90px; height: 10px; }
@media (max-width: 700px) { .export-table .no-print { display: none; } }

/* Version 0.8: Briefkopf mit Logo für Druck und PDF */
.brand-head { display: flex; align-items: center; gap: 24px; margin: 0 0 10px; }
.brand-logo { display: block; width: 230px; height: auto; flex: none; }
.brand-head-text { min-width: 0; }
.brand-firma { margin: 0 0 2px !important; font-size: 13px !important; letter-spacing: 0.04em; text-transform: uppercase; color: var(--label-2); }
.brand-head h1 { font-size: 24px; margin: 0 0 4px; }
.brand-head p { margin: 0 0 2px; }
.brand-rule { height: 4px; border-radius: 2px; background: #E3A21D; margin: 0 0 22px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.print-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 2px solid #E3A21D; margin-top: 24px; padding-top: 8px; font-size: 12px; color: var(--label-2); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.print-note { font-size: 12px; color: var(--label-2); margin: 0 0 8px; }
@media (max-width: 560px) { .brand-head { flex-direction: column; align-items: flex-start; gap: 10px; } .brand-logo { width: 170px; } }
@media print {
  .brand-head h1 { font-size: 18pt; }
  .brand-logo { width: 55mm; }
  .print-foot, .print-note { color: #333; }
  .export-table th { border-bottom: 2px solid #E3A21D; }
}
.print-only { display: none; }
@media print { .print-only { display: block; } }
@media print { .large-title { display: none !important; } }


/* ---------- Corporate Design: Logo mit Slogan, Goldlinie ---------- */
.logo-voll { display: block; height: auto; max-width: 100%; }
.logo-panel { display: flex; justify-content: center; border-radius: 16px; }
.logo-auth { width: 260px; }
.logo-home { width: 190px; }
.logo-side { width: 100%; max-width: 200px; margin: 0 auto; }
.brand-rule { height: 4px; border-radius: 2px; background: var(--brand); }
.brand-rule-auth { width: 120px; margin: 4px auto 14px; }
.auth-title { font-size: 20px !important; letter-spacing: 0.04em; text-transform: uppercase; color: var(--label-2); }
.auth-foot { margin: 36px 0 0; text-align: center; font-size: 12px; line-height: 1.5; color: var(--label-2); letter-spacing: 0.03em; }
.auth-foot::before { content: ""; display: block; width: 40px; height: 2px; margin: 0 auto 10px; background: var(--brand); }
.side-app { margin: 10px 8px 12px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--label-2); }
.sidebar .brand { padding: 4px 6px 12px; }
.home-brand { margin: 4px 0 14px; }
.home-brand .brand-rule { max-width: 120px; margin: 10px auto 0; }
@media (min-width: 880px) { .home-brand { display: none; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-panel { background: #fff; padding: 12px 18px; }
}
:root[data-theme="dark"] .logo-panel { background: #fff; padding: 12px 18px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand { background: #fff; border-radius: 12px; margin-bottom: 8px; }
}
@media print { .home-brand { display: none; } }

/* Kleines Logo in der Kopfleiste (Handy): führt zur Übersicht */
.nav-logo { display: none; }
@media (max-width: 879px) {
  .navbar { position: sticky; }
  .nav-logo { display: flex; align-items: center; justify-content: center; grid-column: 2; grid-row: 1; min-width: 44px; min-height: 44px; }
  .nav-logo .brand-mark { height: 34px; }
  .nav-title.has-logo { display: none; }
}
@media print { .nav-logo { display: none !important; } }


/* ---------- Themenfarben (Icons, Menü) ---------- */
:root {
  --c-gold: #9a6200;   --c-gold-soft: rgba(227,162,29,.16);
  --c-gruen: #2f7d4f;  --c-gruen-soft: rgba(47,125,79,.14);
  --c-blau: #2f6fb5;   --c-blau-soft: rgba(47,111,181,.14);
  --c-rot: #c2491d;    --c-rot-soft: rgba(194,73,29,.14);
  --c-teal: #1b8a8a;   --c-teal-soft: rgba(27,138,138,.14);
  --c-lila: #6b52a8;   --c-lila-soft: rgba(107,82,168,.14);
  --c-grau: #5b6b7e;   --c-grau-soft: rgba(91,107,126,.14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-gold: #e3a21d;  --c-gold-soft: rgba(227,162,29,.2);
    --c-gruen: #4cc27a; --c-gruen-soft: rgba(76,194,122,.2);
    --c-blau: #5aa2ee;  --c-blau-soft: rgba(90,162,238,.2);
    --c-rot: #ff8a5c;   --c-rot-soft: rgba(255,138,92,.2);
    --c-teal: #3cc4c4;  --c-teal-soft: rgba(60,196,196,.2);
    --c-lila: #a98cf0;  --c-lila-soft: rgba(169,140,240,.2);
    --c-grau: #9aa9bb;  --c-grau-soft: rgba(154,169,187,.2);
  }
}
:root[data-theme="dark"] {
  --c-gold: #e3a21d;  --c-gold-soft: rgba(227,162,29,.2);
  --c-gruen: #4cc27a; --c-gruen-soft: rgba(76,194,122,.2);
  --c-blau: #5aa2ee;  --c-blau-soft: rgba(90,162,238,.2);
  --c-rot: #ff8a5c;   --c-rot-soft: rgba(255,138,92,.2);
  --c-teal: #3cc4c4;  --c-teal-soft: rgba(60,196,196,.2);
  --c-lila: #a98cf0;  --c-lila-soft: rgba(169,140,240,.2);
  --c-grau: #9aa9bb;  --c-grau-soft: rgba(154,169,187,.2);
}
/* Bereiche: Gruppen/Wanderungen = Gold, Stände = Grün, Tätigkeiten/Erfassen = Blau,
   Aufgaben = Rot, Fütterung/Behandlung/Ernte = Türkis, Bestandsbuch/Export = Lila, Benutzer/Profil = Grau */
.row-pin:has(.icon-pin), .th-staende { --tc: var(--c-gruen); --tcs: var(--c-gruen-soft); }
.row-pin:has(.icon-list), .row-pin:has(.icon-camera), .th-taetigkeiten { --tc: var(--c-blau); --tcs: var(--c-blau-soft); }
.row-pin:has(.icon-check), .th-aufgaben { --tc: var(--c-rot); --tcs: var(--c-rot-soft); }
.row-pin:has(.icon-drop) { --tc: var(--c-teal); --tcs: var(--c-teal-soft); }
.row-pin:has(.icon-doc), .th-bestandsbuch, .th-export { --tc: var(--c-lila); --tcs: var(--c-lila-soft); }
.row-pin:has(.icon-users), .row-pin:has(.icon-person), .th-benutzer, .th-profil { --tc: var(--c-grau); --tcs: var(--c-grau-soft); }
.row-pin:has(.icon-hex), .row-pin:has(.icon-beuten), .row-pin:has(.icon-route), .th-gruppen, .th-home { --tc: var(--c-gold); --tcs: var(--c-gold-soft); }
.row-pin:has(.icon) { background: var(--tcs, var(--tint-soft)); color: var(--tc, var(--tint)); }
.side-link .icon { color: var(--tc, var(--tint)); }
.side-link.is-active { background: var(--tcs, var(--tint-soft)); color: var(--tc, var(--tint)); }
.tab.is-active { color: var(--tc, var(--tint)); }
.tab:not(.is-active) .icon { color: var(--tc, var(--label-2)); opacity: .75; }

/* ---------- Apple-Design-Feinschliff ---------- */
/* Typografie: große Schrift enger, kleine Beschriftungen leicht weiter, Überschriften mit Gewicht */
.auth-title, .side-app, .group-header { font-feature-settings: "tnum" 0; }
.group-header { letter-spacing: 0.01em; }
.row-title { letter-spacing: -0.014em; }
.row-sub, .row-value { letter-spacing: -0.006em; }
.tab { letter-spacing: 0.01em; }

/* Direktes Feedback: Eindrücken sofort beim Berühren, weiches Zurückfedern beim Loslassen */
.btn, .row-link, .tab, .side-link, .chip, .nav-logo, .scope-switch button {
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1), background-color 0.2s, opacity 0.2s;
}
.btn:active, .tab:active, .chip:active, .nav-logo:active, .scope-switch button:active { transition-duration: 0.08s; }
.btn:active { transform: scale(0.97); opacity: 0.85; }
.tab:active { transform: scale(0.92); }
.chip:active, .nav-logo:active { transform: scale(0.94); }
a.row-link:active { transition-duration: 0.05s; }
.side-link:active { transform: scale(0.98); transition-duration: 0.08s; }

/* Karten: feine Tiefe statt harter Linien */
.group { box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.04); }
.row-pin { box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.05); }

/* Materialien: Kopf- und Tabbar als durchscheinende Ebenen mit heller Oberkante */
.tabbar { border-top: 0.5px solid rgba(255, 255, 255, 0.5); }
.sidebar { -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tabbar { border-top-color: rgba(255, 255, 255, 0.08); }
  :root:not([data-theme="light"]) .group { box-shadow: none; }
}

/* Seiten kommen sanft herein (nur Deckkraft und minimale Bewegung) */
@keyframes seite-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.content { animation: seite-ein 0.28s cubic-bezier(0.2, 0.9, 0.3, 1) both; }

/* Barrierefreiheit: weniger Bewegung, weniger Transparenz, mehr Kontrast */
@media (prefers-reduced-motion: reduce) {
  .content { animation: none !important; }
  .btn:active, .tab:active, .chip:active, .nav-logo:active, .side-link:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --bar-bg: #f2f2f7; --sidebar-bg: #f6f6fa; }
  .navbar, .tabbar, .sidebar, .map-controls { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-transparency: reduce) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bar-bg: #1c1c1e; --sidebar-bg: #1c1c1e; }
}
@media (prefers-contrast: more) {
  .group { box-shadow: 0 0 0 1px var(--sep); }
  .row-sub, .row-value, .lede { color: var(--label); }
}

/* Karte: Ebenenwechsel (Karte/Satellit) und Teilen */
.map-layer { position: absolute; right: 10px; top: 100px; z-index: 5; height: 32px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--bar-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); color: var(--label); font: 600 13px/1 var(--font); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); cursor: pointer; }
.map-layer:active { transform: scale(0.95); }
.map-callout-links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.map-callout-links a, .map-callout-share { font: 500 14px/1.4 var(--font); color: var(--tint); background: none; border: 0; padding: 0; cursor: pointer; }
.row-button { width: 100%; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.map[data-ebene="satellit"] .map-attr { background: rgba(0, 0, 0, 0.55); color: #fff; }
.map[data-ebene="satellit"] .map-attr a { color: #fff; }

/* Aufgaben übertragen */
.row-stack { flex-direction: column; align-items: stretch; gap: 10px; }
.row-stack .row-main { color: inherit; }
.inline-actions { display: flex; gap: 8px; margin-top: 8px; }
.inline-actions .btn { flex: 1; }
.btn-small { min-height: 36px; padding: 0 14px; font-size: 15px; }
.scope-switch-form { margin: 0 0 8px; }
.verantw-row .row-value { text-align: right; }
.row-segment { padding: 10px 16px 2px; display: block; } .row-segment .scope-switch { margin: 0; max-width: none; }
.map-tile-overlay { z-index: 1; }

/* Speichern-Haken in der Kopfleiste */
.nav-save { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; color: var(--tint); cursor: pointer; border-radius: 22px; transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1); }
.nav-save .icon { width: 26px; height: 26px; stroke-width: 2.6; }
.nav-save:active { transform: scale(0.88); transition-duration: 0.08s; }
@media print { .nav-save { display: none !important; } }

/* Siegel Bioland und EU-Bio im Briefkopf */
.brand-siegel { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }
.brand-siegel img { display: block; height: 56px; width: auto; }
@media (max-width: 560px) { .brand-siegel { margin-left: 0; } .brand-siegel img { height: 44px; } }
@media print { .brand-siegel img { height: 17mm; } .brand-siegel { gap: 4mm; } }

/* Demo-Ansicht */
.demo-banner { align-items: center; }
.demo-ende { margin-left: auto; font: inherit; font-weight: 600; background: none; border: 0; color: inherit; cursor: pointer; padding: 4px 8px; }

/* Standliste: Hochformat, schlichte Tabelle */
.standliste-table { border: 1px solid #999; }
.standliste-table th { background: #bdbfbf !important; border: 1px solid #999; border-bottom: 1px solid #999 !important; }
.standliste-table td { border: 1px solid #999; border-bottom: 1px solid #999; }
.standliste-table td:first-child { font-weight: 600; background: #dcdcdc; white-space: normal; }
.standliste-table tbody tr:nth-child(even) td:not(:first-child) { background: #f5f5f5; }
.standliste-table td:nth-child(2) { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media print { .standliste-table td:first-child, .standliste-table th { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .standliste-table tbody tr:nth-child(even) td:not(:first-child) { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Trachtfilter (Karte der Stände) */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; margin: 0 -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; font: inherit; font-size: 14px; line-height: 1; padding: 9px 14px; border-radius: 999px; border: 0; cursor: pointer; background: var(--bg-elev); color: var(--label); box-shadow: inset 0 0 0 0.5px var(--sep); }
.chip.is-on { background: #E3A21D; color: #060606; font-weight: 600; box-shadow: none; }
.chip-n { opacity: .6; font-weight: 400; margin-left: 2px; }
.chip:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }
@media print { .chips { display: none; } }

/* Dokumente (Druck- und PDF-Ansichten): Hausschrift Bodoni 72 wie im Logo, damit alles Externe im Design bleibt.
   Die App selbst bleibt bei der gut lesbaren Systemschrift. */
:root { --font-doc: "Bodoni 72", "Bodoni 72 Book", "Bodoni 72 Oldstyle", "Bodoni MT", "Bodoni Moda", "Libre Bodoni", Didot, "Didot LT STD", "Playfair Display", Georgia, "Times New Roman", serif; }
.print-head, .print-block, .print-foot, .print-note, .brand-head { font-family: var(--font-doc); }
.print-head *, .print-block *, .print-foot *, .print-note * { font-family: inherit; }
@media print { body, body * { font-family: var(--font-doc) !important; } }

/* Neuer Bereich Produktion: Türkis; Unterpunkte in der Seitenleiste */
.th-produktion { --tc: var(--c-teal); --tcs: var(--c-teal-soft); }
.row-pin:has(.icon-box) { --tc: var(--c-teal); --tcs: var(--c-teal-soft); }
.side-nav { overflow-y: auto; min-height: 0; }
.side-sub { margin-left: 18px; padding-top: 6px; padding-bottom: 6px; font-size: 15px; }
.side-sub .icon { width: 18px; height: 18px; }

/* Umschalter Aufgaben | Tätigkeiten (nur Handy) */
.seg-links { display: flex; padding: 2px; border-radius: 9px; background: var(--fill); margin: 0 0 14px; }
.seg-links a { flex: 1; text-align: center; padding: 7px 10px; border-radius: 7px; color: var(--label); font-size: 15px; font-weight: 500; }
.seg-links a:hover { text-decoration: none; }
.seg-links a.is-on { background: var(--seg-selected); box-shadow: var(--shadow-seg); font-weight: 600; }
@media (min-width: 880px) { .only-mobile { display: none; } }
@media print { .seg-links { display: none; } }

/* Produktion: QR-Karte und Beleg */
.qr-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 16px; background: var(--card, #fff); border-radius: 14px; }
.qr-box { background: #fff; padding: 10px; border-radius: 8px; line-height: 0; }
.qr-box svg { width: 170px; height: 170px; display: block; }
.qr-code { font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.beleg { text-align: center; }
.beleg-qr { display: inline-block; line-height: 0; padding: 8px; background: #fff; }
.beleg-qr svg { width: 62mm; height: 62mm; }
.beleg-code { font-size: 20pt; font-weight: 600; margin: 8px 0 14px; letter-spacing: .05em; }
.beleg-tabelle { margin: 0 auto 12px; border-collapse: collapse; text-align: left; min-width: 60%; }
.beleg-tabelle th, .beleg-tabelle td { padding: 4px 12px; border-bottom: 1px solid #ddd; }
.beleg-tabelle th { font-weight: 500; color: #555; }

/* Lieferschein */
.ls-empfaenger { font-size: 15pt; line-height: 1.4; margin: 0 0 18px; }
.ls-unterschrift { margin-top: 48px; font-size: 11pt; }
.banner-form { margin: -8px 0 16px; }