/* Theme-Overrides — wird NACH app.css geladen (überschreibt nur Tokens).
   app.css bleibt unangetastet.

   Dark Mode: weg vom warmen Espresso/Braun (das sich mit dem blauen Akzent
   beißt) → kühles, stimmiges Slate + markentreuer Navy/Gold-Akzent. */
[data-bs-theme="dark"] {
  --wm-bg: #12151c;
  --wm-bg-card: #1a1f29;
  --wm-bg-sub: #232a36;

  --wm-ink: #eceff4;
  --wm-ink-soft: #c6cdd9;
  --wm-muted: #8b94a4;
  --wm-muted-light: #6e7686;

  --wm-line: #2c3340;
  --wm-line-strong: #3a4352;

  --wm-navy: #6ba6de;
  --wm-navy-dark: #4e86b5;
  --wm-gold: #d4b25e;
  --wm-wine: #d27c7c;
  --wm-success: #6bb07f;
  --wm-warn: #d6a24e;

  --wm-navy-rgb: 107, 166, 222;
  --wm-gold-rgb: 212, 178, 94;
  --wm-success-rgb: 107, 176, 127;
  --wm-wine-rgb: 210, 124, 124;
}

/* Willkommen-Traktor-SVG im Dark-Mode umfärben (inline → per fill/stroke-Attribut
   adressierbar). Im Light-Mode bleibt das Original. Ziele:
   - Weißflächen (BG-Rechteck, Glanzlichter) → Card-Hintergrund, damit kein weißes
     Panel hinter dem Traktor glänzt;
   - weißer Reifen-Border-Stroke → dezente Linie statt grell;
   - Fensterscheibe/Himmel-Blau → gedämpftes Slate (Nachtstimmung);
   - Bodenschatten → kaum sichtbar;
   - fast-schwarze Outlines → aufgehellt, sonst unsichtbar auf dunklem Grund. */
[data-bs-theme="dark"] .welcome-farm [fill="#ffffff"],
[data-bs-theme="dark"] .welcome-farm [fill="#fafbfd"] { fill: #1a1f29; }
[data-bs-theme="dark"] .welcome-farm [stroke="#ffffff"] { stroke: #3a4352; }
[data-bs-theme="dark"] .welcome-farm [fill="#d9e2e2"],
[data-bs-theme="dark"] .welcome-farm [fill="#e2ecf5"],
[data-bs-theme="dark"] .welcome-farm [fill="#dfe8ef"] { fill: #3a4656; }
[data-bs-theme="dark"] .welcome-farm [fill="#aaa59b"] { fill: #232a36; }
[data-bs-theme="dark"] .welcome-farm [fill="#343833"] { fill: #aab2c0; }

/* Nahtloser Zaun-Loop (WelcomeFence) unten an der Willkommen-Card.
   Verschiebung um GENAU eine Periode (--fence-w) → kein Sprung beim Neustart. */
.welcome-fence { position: absolute; left: 0; right: 0; bottom: 15px; overflow: hidden; pointer-events: none; z-index: 1; line-height: 0; }
.welcome-fence-scroll { animation-name: welcome-fence-scroll; animation-timing-function: linear; animation-iteration-count: infinite; will-change: transform; }
@keyframes welcome-fence-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--fence-w, 1040px))); } }
@media (prefers-reduced-motion: reduce) { .welcome-fence-scroll { animation: none; } }
/* Dark-Mode: Zaun ins Slate dimmen, neutrale Kontur für Definition. */
[data-bs-theme="dark"] .welcome-fence [fill="#f2eada"] { fill: #2e343b; }
[data-bs-theme="dark"] .welcome-fence [stroke="#443a2e"] { stroke: #4a4d52; }

/* Opaker Button-Hintergrund (Zaun scheint sonst durch den transparenten Outline-
   Button). Als Klasse statt Inline-Style → der :hover des Outline-Buttons (höhere
   Spezifität) überschreibt im Hover wieder, der Rest-Zustand bleibt deckend. */
.welcome-btn-opaque { background-color: var(--wm-bg-card, #fff); }

/* Tabellen-Header IMMER Sans UND einheitliche Größe: app.css setzt für th.text-end
   Mono + 0.8rem (für Zahlen-Datenzellen gedacht), wodurch numerische Spaltentitel
   in Mono/größer, Text-Titel in Sans/0.7rem erscheinen — gemischte Schrift UND
   Schriftgröße im Header. Hier auf den Standard-Header-Stil vereinheitlicht. */
.table thead th.text-end,
.table > thead > tr > th.text-end {
  font-family: var(--wm-sans);
  font-size: 0.7rem;
}

/* Geldbeträge/Zahlen in Tabellenzellen nie umbrechen (z. B. „254.411 €" in der
   €/ha-Spalte sonst zweizeilig). Bei Bedarf scrollt der .table-responsive-Wrapper. */
.table td.text-end { white-space: nowrap; }

/* Marketing-Nav-Dropdown (Lösungen/Über uns) auf Desktop ein paar px höher öffnen
   — „top: 100%" wirkt zu tief. Negativer margin-top greift unabhängig vom
   Popper-Modus (Bootstrap setzt sonst inline transform und „top" verliert). */
.navbar .dropdown-menu { margin-top: -0.35rem; }

/* Marketing-Hamburger (<xl): Menü als Overlay öffnen, statt den Seiteninhalt nach
   unten/oben zu verschieben (sonst „springt" beim Auf-/Zuklappen alles). Außerdem
   Untermenüs (Lösungen/Über uns) mit Rundung statt eckig. */
@media (max-width: 1199.98px) {
  header.navbar.sticky-top .navbar-collapse {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 1031;
    background: var(--wm-bg-card);
    border-top: 1px solid var(--wm-line);
    border-bottom: 1px solid var(--wm-line);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .14);
    padding: .5rem 1rem 1rem;
    max-height: calc(100vh - var(--fw-beta-h) - 3.75rem);
    overflow-y: auto;
  }
  /* Hover-Hintergrund der Unterpunkte abrunden (war eckig). */
  header.navbar .navbar-collapse .dropdown-item { border-radius: 6px; }

  /* Marke mittig OHNE Überlappung: Grid mit drei Spalten (1fr auto 1fr) →
     Toggler links, Logo in der Mitte-Spalte zentriert, Aktionen (Theme + Login/
     Registrieren bzw. „Zum Cockpit") rechts. Eigene Spalten = kein Überdecken.
     Feste Min-Höhe verhindert den Vertikal-Sprung beim Login-Status-Wechsel. Das
     offene Menü ist absolut (s. o.) → kein Grid-Item. */
  header.navbar.sticky-top > .container-xl {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 3rem;
    column-gap: .5rem;
  }
  header.navbar.sticky-top > .container-xl > .navbar-toggler { justify-self: start; }
  header.navbar.sticky-top > .container-xl > .navbar-brand { justify-self: center; margin: 0 !important; }
  header.navbar.sticky-top > .container-xl > .navbar-nav { justify-self: end; }
}

/* Cockpit-Sidebar „Über uns": IMMER inline aufklappen (Accordion, schiebt die
   Punkte darunter nach unten) — auf Desktop UND Mobil. app.css macht das Dropdown
   teils absolut (schwebendes Popup über dem Content / „springt" auf); hier auf
   inline/statisch zwingen. Der transparente Inline-Stil aus app.css passt dazu. */
.navbar-vertical #sidebar-menu .dropdown-menu {
  position: static !important;
  z-index: auto !important;
  transform: none !important;
}

@media (max-width: 991.98px) {
  /* User-Block-Trenner: die überstehende Absolut-Linie (left/right:-2rem) ist nur
     fürs Desktop-Sidebar — mobil verursacht sie horizontales Überlaufen. Dort
     stattdessen eine normale Border am Block (Linie selbst ist mobil ausgeblendet). */
  #sidebar-menu > .mt-auto { border-top: 1px solid var(--tblr-border-color); }

  /* Cockpit-Topbar wie die Marketing-Nav: Hamburger links, Marke ECHT mittig
     (absolut → unabhängig), feste Bar-Höhe, und das Menü öffnet als Overlay (kein
     Schieben/Springen des Inhalts). */
  /* Bar (container-fluid) NICHT als Positionierungs-Anker → Overlay hängt an der
     Aside und startet damit UNTER der ganzen Bar inkl. ihrer (bereits vorhandenen)
     unteren Linie. Keine eigene Border hier — sonst Doppellinie. */
  .navbar-vertical.navbar-expand-lg .container-fluid {
    min-height: 3rem; align-items: center; flex-wrap: nowrap;
  }
  .navbar-vertical.navbar-expand-lg .navbar-brand {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    margin: 0 !important;
  }
  .navbar-vertical.navbar-expand-lg .navbar-collapse {
    position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 1030;
    background: var(--wm-bg-sub);   /* gleiche Farbe wie die Sidebar selbst */
    box-shadow: 0 14px 30px rgba(0, 0, 0, .14);
    padding: .5rem 1rem 1rem;
    max-height: calc(100vh - var(--fw-beta-h) - 3.75rem);
    overflow-y: auto;
  }
  /* Dark-Mode: die Sidebar ist #15110E (app.css) — Overlay daran angleichen. */
  [data-bs-theme="dark"] .navbar-vertical.navbar-expand-lg .navbar-collapse { background: #15110E; }
}

/* Feature-Liste in der hohen „Banken"-Segmentkarte (füllt den Whitespace).
   .go ans Kartenende schieben, damit die Karte sauber unten abschließt. */
.seg-feats { list-style: none; margin: 1.1rem 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.seg-feats li { display: flex; align-items: flex-start; gap: .5rem; font-size: .9rem; color: var(--wm-ink-soft); line-height: 1.35; }
.seg-feats li i { color: var(--wm-success); margin-top: .12rem; flex-shrink: 0; }
.seg-card { display: flex; flex-direction: column; }
.seg-card .go { margin-top: auto; }

/* Startseiten-Hero-Suche: 3 Felder + „Bewerten" in einer Zeile, Autocomplete-Liste. */
.hero-search { max-width: 40rem; }
.hsearch-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: stretch; }
.hsearch-row .hs-gemarkung { position: relative; flex: 1 1 11rem; min-width: 9rem; }
.hsearch-row .hs-gemarkung input { width: 100%; }
.hsearch-row .hs-flur { width: 5rem; flex: 0 0 auto; }
.hsearch-row .hs-nr { width: 8rem; flex: 0 0 auto; }
.hsearch-row .hs-btn { flex: 0 0 auto; white-space: nowrap; }
.hero-suggest { position: absolute; z-index: 20; top: calc(100% + 2px); left: 0; right: 0;
  background: var(--wm-bg-card); border: 1px solid var(--wm-line); border-radius: var(--tblr-border-radius);
  box-shadow: var(--tblr-box-shadow); overflow: hidden; }
.hero-suggest-item { display: block; width: 100%; text-align: left; padding: .45rem .75rem;
  background: none; border: 0; font-size: .9rem; color: var(--wm-ink); cursor: pointer; }
.hero-suggest-item:hover { background: var(--wm-bg-sub); }

/* Scrollbar-Sprung verhindern: Platz für die vertikale Scrollbar IMMER reservieren,
   damit kurze Seiten (Login/Registrieren) nicht gegenüber langen Seiten (Marketing)
   horizontal verspringen. */
html { scrollbar-gutter: stable; }

/* form-select-sm wieder wirklich „small": app.css setzt .form-select-Padding mit
   !important und überschreibt damit die -sm-Variante → das Dropdown wirkte höher
   als ein danebenstehendes form-control-sm (z. B. Filter-Bar im Audit-Log). */
.form-select-sm {
  padding: .25rem 1.75rem .25rem .5rem !important;
  font-size: .875rem !important;
}
/* Native <select> erben die Schrift nicht automatisch (System-Font) → an die
   App-/Input-Schrift angleichen, sonst sieht der Dropdown-Text anders aus. */
.form-select { font-family: inherit !important; }

/* Dark-Mode-Tabellenkopf: app.css nutzt background:var(--wm-ink) — im Dark-Mode ist
   --wm-ink hell, der Header wird also weiß und beißt sich mit der dunklen Card.
   Stattdessen eine dunkle, leicht erhöhte Fläche mit heller Schrift. */
[data-bs-theme="dark"] .table thead th,
[data-bs-theme="dark"] .table > thead > tr > th {
  background: var(--wm-bg-sub) !important;
  color: var(--wm-ink-soft) !important;
}
[data-bs-theme="dark"] .table thead th.sortable:hover {
  background: #2d3644 !important;
}

/* Erste Header-Zelle ohne linken Border: app.css rahmt den Header mit border-left
   am :first-child — der stößt gegen die Card-Kante und wirkt wie ein Fehler. */
.table thead th:first-child,
.table > thead > tr > th:first-child {
  border-left: 0 !important;
}

/* KPI-Cards mit demselben border-radius wie alle anderen Cards: app.css setzt für
   .card.wm-kpi border-radius:0 (eckig), das bricht visuell mit den runden Cards. */
.card.wm-kpi { border-radius: 4px; }

/* Flächenart-Umschalter als Card-Header-Tabs (Pacht/Kauf, FlaechenartExplorer).
   app.css tönt den Tab-Streifen (--wm-bg-sub) und Tablers Default macht aus .active
   einen „Ordnerreiter" (Rahmen + Card-Hintergrund); zusammen mit dem Button-Default-
   Hintergrund wirkten die Tabs wie graue Blöcke. Hier sauber als Unterstrich-Tabs —
   Akzent UND Trennlinie analog zur Navigation: aktiv = --tblr-primary (wie Sidebar-
   Aktiv/Fokus/TomSelect, NICHT das abweichende --wm-navy), Baseline = --wm-line. */
.nav-tabs.card-header-tabs {
  background: transparent !important;
  border-bottom: 0 !important;
  gap: .15rem;
  /* Streifen um das Card-Header-Padding (0.85rem) runterziehen, damit der aktive
     Gold-Unterstrich BÜNDIG auf der unteren Card-Header-Linie sitzt (wie die Nav),
     nicht darüber schwebt. .card-header bringt die Baseline (--wm-line) schon mit. */
  margin-bottom: -0.85rem !important;
  /* Mobil: horizontal scrollen statt umbrechen/stapeln (lange Flächenart-Labels). */
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox: Scrollleiste ausblenden */
}
.nav-tabs.card-header-tabs::-webkit-scrollbar { display: none; } /* WebKit: ausblenden */
.nav-tabs.card-header-tabs .nav-link {
  white-space: nowrap;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--wm-muted);
  font-family: var(--wm-sans);
  font-size: .85rem;
  font-weight: 500;
  padding: .5rem .85rem;
}
.nav-tabs.card-header-tabs .nav-link:hover {
  color: var(--wm-ink);
  border-bottom-color: var(--wm-line-strong) !important;
}
/* Aktiv = GOLD-Unterstrich + dunkler Text — analog zur Navigation (nicht Tabler-Blau). */
.nav-tabs.card-header-tabs .nav-link.active {
  color: var(--wm-ink);
  border-bottom-color: var(--wm-gold) !important;
  background: transparent !important;
}
.nav-tabs.card-header-tabs .nav-link:focus-visible {
  outline: 2px solid var(--wm-gold);
  outline-offset: -2px;
}

/* ====================================================================
   BETA-/HAFTUNGSBANNER (BetaBanner.tsx) — global im Root-Layout
   --------------------------------------------------------------------
   Nicht ausblendbarer Pflichthinweis ganz oben im <body>, VOR {children}.
   Als sticky-Leiste belegt er Flow-Platz (schiebt alle Bereiche nach
   unten) UND bleibt beim Scrollen oben ("dauerhaft sichtbar"). Da der
   Banner IMMER rendert, werden Marketing-Nav (sticky-top) und Cockpit-
   Sidebar (fixed ab lg) global um die Banner-Höhe versetzt.
   ==================================================================== */
:root { --fw-beta-h: 2.6rem; }

.fw-beta {
  position: fixed;               /* fixed statt sticky: viewport-relativ → bleibt
                                    auch bei breiten Tabellen / Horizontal-Scroll
                                    oben und ist immun gegen Eltern-overflow.
                                    Body bekommt dafür padding-top (s. u.). */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1031;                 /* über sticky-top (1020) und fixed-top (1030) */
  min-height: var(--fw-beta-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  flex-wrap: wrap;
  padding: .4rem 1.25rem;
  background: var(--wm-navy);
  color: rgba(250, 246, 239, .92);
  border-bottom: 2px solid var(--wm-gold);
  font-family: var(--wm-sans);
  font-size: .82rem;
  line-height: 1.35;
  text-align: center;
}
.fw-beta b { color: #fff; font-weight: 600; }
.fw-beta a { color: #fff; text-decoration: underline; }
.fw-beta .fw-beta-ico {
  flex-shrink: 0;
  color: var(--wm-gold);         /* Gold-Info-Icon auf Navy */
  font-size: 1.05rem;
  line-height: 1;
}
/* Einheitlicher Beta-Text (mobil = desktop). --fw-beta-h auf schmalen Screens als
   No-JS-Fallback (2 Zeilen); mit JS misst BetaBannerFit die echte Höhe und
   überschreibt --fw-beta-h exakt. */
@media (max-width: 1199.98px) {
  :root { --fw-beta-h: 3.5rem; }
}

/* Auf dem Handy zusätzlich kleinere Schrift. */
@media (max-width: 600px) { .fw-beta { font-size: .74rem; } }

/* Im Dark-Mode ist --wm-navy ein helles Blau → dunkle Schrift im Tag bliebe
   lesbar, aber der Banner-Hintergrund würde hell. Banner bewusst dunkel halten. */
[data-bs-theme="dark"] .fw-beta {
  background: #161b24;
  color: rgba(236, 239, 244, .92);
}
[data-bs-theme="dark"] .fw-beta b { color: #fff; }
/* Dark-Mode-Gold ist heller (#C9A654) → dunkle Badge-Schrift liest sich besser. */
[data-bs-theme="dark"] .fw-beta .fw-beta-tag { color: #1b2027; }

/* Fixed-Banner ist aus dem Fluss → Inhalt um Banner-Höhe nach unten schieben. */
body { padding-top: var(--fw-beta-h); }
/* min-height-Shells nachziehen, damit kurze Seiten nicht um die Banner-Höhe
   überlaufen (Marketing/Auth: .mkt-shell, Cockpit: Tabler .page). */
.mkt-shell { min-height: calc(100vh - var(--fw-beta-h)); }
.page { min-height: calc(100vh - var(--fw-beta-h)); }

/* Marketing-Nav (header.navbar.sticky-top) stapelt sich unter den Banner. */
.navbar.sticky-top { top: var(--fw-beta-h); }

/* Cockpit-Sidebar ist erst ab lg fixed (Tabler) → dort um Banner-Höhe nach unten. */
@media (min-width: 992px) {
  .navbar-vertical.navbar-expand-lg { top: var(--fw-beta-h); }
}

/* ====================================================================
   SCREENSHOT-GALERIE + LIGHTBOX (Screenshots.tsx)
   ==================================================================== */
.shot-thumb {
  display: block; width: 100%; padding: 0;
  border: 1px solid var(--wm-line); border-radius: 8px; overflow: hidden;
  background: var(--wm-bg-card); cursor: zoom-in; position: relative;
  transition: box-shadow .15s ease, transform .15s ease;
}
.shot-thumb:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, .10); transform: translateY(-2px); }
/* Alle Thumbnails gleich hoch: festes Seitenverhältnis + Crop, oben verankert. */
.shot-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
/* Immer exakt zweizeilig (Feature + Nutzen) → alle Kästchen gleich hoch. */
.shot-cap {
  display: block; padding: .5rem .75rem; text-align: left;
  border-top: 1px solid var(--wm-line);
}
.shot-cap-t, .shot-cap-s {
  display: block; line-height: 1.32;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shot-cap-t { font-size: .85rem; font-weight: 600; color: var(--wm-ink); }
.shot-cap-s { font-size: .78rem; color: var(--wm-ink-soft); }
.shot-lightbox {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0, 0, 0, .85); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  padding: 2rem; cursor: zoom-out;
}
.shot-lightbox img { max-width: 95vw; max-height: 88vh; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); cursor: default; }
.shot-lightbox-cap { color: #fff; margin-top: .8rem; font-size: .9rem; }
.shot-close {
  position: fixed; top: 1rem; right: 1.25rem; width: 42px; height: 42px;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.shot-close:hover { background: rgba(0, 0, 0, .78); }
.shot-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.6rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.shot-nav:hover { background: rgba(0, 0, 0, .78); }
.shot-prev { left: 1.25rem; }
.shot-next { right: 1.25rem; }

/* ── Exposé (Makler) — Lightbox-Vorschau + Druck/PDF-Ansicht (A4) ────────── */
/* Vorschau-Breite = A4-Portrait-Inhaltsbreite (210 − 2×12 mm Rand), damit Charts/
   Karten im Vorschau-SVG genauso breit gerendert werden wie später im Druck. */
.expose-sheet { width: 186mm; max-width: 100%; margin: 0 auto; background: #fff; }
.expose-page { background: #fff; }
.expose-cover { min-height: 60vh; }

/* Lightbox-Vorschau (Vollbild-Overlay) */
.expose-lightbox { position: fixed; inset: 0; z-index: 1080; background: rgba(18, 20, 26, .88); display: flex; flex-direction: column; }
.expose-lightbox-bar { display: flex; align-items: center; gap: .5rem; padding: .6rem 1rem; background: var(--wm-navy, #1c2434); color: #fff; }
.expose-lightbox-scroll { flex: 1; overflow: auto; padding: 1.5rem; }
.expose-lightbox-overlay { position: fixed; inset: 0; z-index: 1090; display: flex; align-items: center; justify-content: center; background: rgba(18, 20, 26, .6); backdrop-filter: blur(1px); }
.expose-lightbox-scroll .expose-sheet { box-shadow: 0 6px 36px rgba(0, 0, 0, .45); }
.expose-lightbox-scroll .expose-page + .expose-page { border-top: 1px dashed #c9c9c9; }

/* Exposé-Optik: Markenfarben (mit print-color-adjust, damit sie auch im PDF drucken). */
.expose-sheet { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.expose-h2 { color: var(--wm-navy); border-bottom: 2px solid var(--wm-gold); padding-bottom: .2rem; margin-bottom: .5rem; font-size: 1.3rem; }
/* Kompakte Abstände im Exposé, damit eine Flurstück-Seite (Karte+Kennzahlen+
   Teilflächen+Wertentwicklung) auf EINE Seite passt. */
.expose-sheet .card-header { padding: .45rem .85rem; }
.expose-sheet .row-cards { --tblr-gutter-y: .65rem; --tblr-gutter-x: .65rem; }
.expose-sheet .mt-3 { margin-top: .65rem !important; }
.expose-sheet .mb-3 { margin-bottom: .55rem !important; }
.expose-sheet .h1 { font-size: 1.5rem; }
.expose-sheet dl.row { margin-bottom: 0; }
.expose-sheet dl.row dt, .expose-sheet dl.row dd { margin-bottom: .2rem !important; }
.expose-sheet hr { margin: .5rem 0 !important; }
/* KPI-Cards mit dezentem Navy-Ton + Gold-Akzentkante (auch im Druck). */
.expose-kpi { background: rgba(var(--wm-navy-rgb, 28, 36, 52), .04); border-left: 3px solid var(--wm-gold); }
.expose-kpi .h2 { color: var(--wm-navy); }
.expose-sheet thead th { background: var(--wm-navy) !important; color: #faf6ef !important; border-bottom-color: var(--wm-navy) !important; }
.expose-sheet tfoot td { background: rgba(var(--wm-gold-rgb), .14) !important; border-top: 2px solid var(--wm-gold); }
.expose-table { font-size: .82rem; }
.expose-table td, .expose-table th { padding-top: .35rem; padding-bottom: .35rem; }
/* Card-Padding im Exposé verlässlich, aber kompakt (außer der randlosen Karte p-0). */
.expose-sheet .card-body:not(.p-0) { padding: .7rem .9rem; }

@media print {
  @page { size: A4 portrait; margin: 12mm 12mm 12mm; }
  @page expose-quer { size: A4 landscape; margin: 12mm; }
  body { background: #fff !important; }
  /* Nur das Exposé drucken: alle direkten Body-Kinder außer der Lightbox ausblenden. */
  body.expose-open > *:not(.expose-lightbox) { display: none !important; }
  .expose-lightbox { position: static !important; inset: auto !important; background: #fff !important; display: block !important; overflow: visible !important; }
  .expose-lightbox-scroll { overflow: visible !important; padding: 0 !important; }
  .expose-lightbox-scroll .expose-sheet { box-shadow: none !important; width: auto !important; max-width: none; }
  /* Jede Sektion beginnt auf einer neuen Seite (break-before vermeidet Leerseiten). */
  .expose-page { break-before: page; }
  .expose-page-first { break-before: auto; }
  .expose-page + .expose-page { border-top: 0 !important; }
  .expose-page-quer { page: expose-quer; }
  .expose-no-break { break-inside: avoid; }
  /* Karten im Druck begrenzen, damit eine Flurstück-Seite auf EINE Seite passt. */
  .expose-cover-map { height: 84mm !important; }
  .expose-detail-map { height: 58mm !important; min-height: 0 !important; }
}

/* ── Animierte Bildmarke (Willkommens-Karte, Nicht-Landwirt-Rollen) ──────── */
.welcome-mark { overflow: visible; }
.welcome-mark .wm-mark-poly {
  fill: rgba(var(--wm-gold-rgb), .06);
  stroke: var(--wm-navy); stroke-width: 4; stroke-linejoin: round;
  stroke-dasharray: 240; stroke-dashoffset: 240;
  animation: wm-draw 2s ease forwards .3s;
}
.welcome-mark .wm-mark-corner { fill: var(--wm-navy); opacity: 0; animation: wm-dot-in .4s ease forwards; }
.welcome-mark .wm-mark-pt {
  fill: var(--wm-gold); transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: wm-dot-in .5s ease forwards 2.5s, wm-pulse 2.6s ease-in-out 3.1s infinite;
}
@keyframes wm-draw { to { stroke-dashoffset: 0; } }
@keyframes wm-dot-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes wm-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
@media (prefers-reduced-motion: reduce) {
  .welcome-mark .wm-mark-poly { animation: none; stroke-dashoffset: 0; }
  .welcome-mark .wm-mark-corner, .welcome-mark .wm-mark-pt { animation: none; opacity: 1; }
}

/* ── Cockpit-Karte: mobile Werkzeugleiste + Overlay-Steuerung ───────────────
   Desktop (≥lg): Such-/Filter-/Mess-Panels sitzen in den Ecken (wie gehabt).
   Mobil (<lg): Werkzeugleiste mit Icons; pro Icon genau EIN Panel, Detail als
   Bottom-Sheet — so liegt nichts mehr übereinander. */
.km-toolbar { display: flex; flex-direction: column; gap: .4rem; }
.km-toolbar .btn { box-shadow: var(--tblr-box-shadow-sm); }
.km-toolbar .btn.active {
  background: var(--wm-navy, #1b2a4a); border-color: var(--wm-navy, #1b2a4a); color: #fff;
}
@media (max-width: 991.98px) {
  /* Such-/Filter-Panel standardmäßig aus, nur per Icon (km-open) sichtbar */
  .km-ov { display: none !important; }
  .km-ov.km-open { display: block !important; }
  /* Geöffnetes Panel oben einblenden, Platz rechts für die Werkzeugleiste lassen */
  .km-suche.km-open, .km-filter.km-open {
    top: 12px !important; left: 12px !important; right: 60px !important;
    bottom: auto !important; width: auto !important; max-width: none !important;
  }
  /* Detail als echtes Bottom-Sheet: viewport-fix, feste Maximalhöhe. Die Karte
     selbst clippt (overflow hidden); gescrollt wird NUR der .card-body (mit
     min-height:0, sonst greift in Flexbox der Scroll nicht). Header bleibt oben
     fix → weißer Hintergrund deckt immer den ganzen Inhalt, X immer erreichbar. */
  .km-detail {
    position: fixed !important;
    top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    width: auto !important; max-width: none !important;
    max-height: 82vh !important;
    display: flex !important; flex-direction: column !important; overflow: hidden !important;
    border-radius: 14px 14px 0 0 !important;
    z-index: 1045 !important;
  }
  .km-detail > .card-header { flex: 0 0 auto; touch-action: none; }
  .km-detail > .card-body {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    /* Wisch bleibt im Sheet (scrollt), wird NICHT an die Karte/Seite weitergereicht. */
    touch-action: pan-y; overscroll-behavior: contain;
    padding-bottom: 1rem;
  }
  /* Detail-Modal: Backdrop über ALLEM (auch Navigation, z 2000), Sheet unten angedockt.
     ENTSCHEIDEND: Der card-body bekommt eine EXPLIZITE max-height (70vh) + overflow-y:auto
     — das ist das bombensichere Scroll-Muster und hängt NICHT an einer Flex-Höhenkette
     (die mobil nie „definit" wurde, weshalb vorher nichts scrollte). Header bleibt sticky
     oben sichtbar, X immer erreichbar. Tap auf den Backdrop schließt. */
  .km-sheet-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(15, 23, 42, .45);
    -webkit-tap-highlight-color: transparent;
    display: flex; flex-direction: column; justify-content: flex-end;
  }
  .km-sheet-overlay .km-sheet-stop { width: 100%; }
  .km-sheet-overlay .km-detail {
    position: static !important; inset: auto !important;
    width: 100% !important; max-width: none !important; max-height: none !important;
    margin: 0 !important; display: block !important; overflow: hidden !important;
    border-radius: 14px 14px 0 0 !important;
  }
  .km-sheet-overlay .km-detail > .card-header {
    position: sticky; top: 0; z-index: 2; background: var(--tblr-card-bg, var(--tblr-bg-surface, #fff));
  }
  .km-sheet-overlay .km-detail > .card-body {
    max-height: 70vh !important;
    overflow-y: auto !important; -webkit-overflow-scrolling: touch;
    touch-action: pan-y; overscroll-behavior: contain;
    padding-bottom: 1rem;
  }
}