:root {
  --color-primary: #2f6b2f;
  --color-primary-dark: #1f4d1f;
  --color-primary-darker: #16391a;
  --color-primary-light: #eef6ee;
  --color-primary-border: #9dbf9d;

  --color-bg: #f4f6f2;
  --color-card-bg: #ffffff;
  --color-text: #1f2a1c;
  --color-text-muted: #57604f;
  --color-border: #dfe3da;

  --color-danger: #b91c1c;
  --color-danger-bg: #fdecec;
  --color-danger-border: #f2b8b8;

  --color-warning: #92400e;
  --color-warning-bg: #fff7ed;
  --color-warning-border: #fde3b6;

  /* Für die dritte Kalender-/Fristen-Art "Eigener Bescheid" (siehe
     bescheide.js/calendar.js) — bewusst eine dritte Farbe neben Grün
     (private Termine) und Amber (offizielle Fristen), damit alle drei
     Arten auf einen Blick unterscheidbar bleiben. */
  --color-info: #1d4ed8;
  --color-info-bg: #eff4ff;
  --color-info-border: #bfd2fb;

  /* Für die vierte Kalender-/Fristen-Art "Vertragsfrist" (Versicherungs-/
     Pachtvertrags-Ablaufdaten aus den Stammdaten, siehe calendar.js) —
     eine vierte, von den drei obigen unterscheidbare Farbe. */
  --color-accent2: #7c3aed;
  --color-accent2-bg: #f5f0fe;
  --color-accent2-border: #dcc9fb;

  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;

  --shadow-card: 0 2px 10px rgba(20, 40, 20, 0.07);
  --shadow-raised: 0 4px 14px rgba(20, 40, 20, 0.12);

  --focus-ring: 0 0 0 3px rgba(47, 107, 47, 0.35);
}

* {
  box-sizing: border-box;
}

html {
  font-size: 106.25%; /* ~17px Basisgröße statt der üblichen 16px — besser lesbar */
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  line-height: 1.3;
}

a {
  color: var(--color-primary);
}

/* Deutlich sichtbarer Fokus-Rahmen für Tastatur-Navigation, unabhängig vom
   individuellen Fokus-Stil einzelner Elemente unten. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
label:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- Kopfbereich ------------------------------------------------------ */

header {
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  padding: 22px 16px;
}

.header-content {
  /* Bewusst breiter als .narrow-view (700px) darunter: die Marke allein
     (Logo + Titel + Untertitel) ist bereits gut 500px breit -- ohne mehr
     Raum würde der Warteliste-Bereich rechts (siehe
     #header-waitlist-banner) auf jeder Bildschirmbreite in eine eigene
     Zeile umbrechen, statt wie gewünscht sichtbar rechts neben der Marke
     zu stehen. */
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 8px;
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-primary);
  box-shadow: var(--shadow-raised);
}

.logo-badge img {
  display: block;
  height: 32px;
  width: auto;
}

header h1 {
  margin: 0 0 2px;
  font-size: 1.7rem;
  letter-spacing: -0.01em;
}

.subtitle {
  margin: 0;
  opacity: 0.92;
  font-size: 0.95rem;
}

.account-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.account-email {
  font-size: 0.9rem;
  opacity: 0.92;
}

.account-betrieb {
  font-size: 0.9rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.account-betrieb::before {
  content: "🏡 ";
}

.logout-button {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--radius-sm);
  background: transparent;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.logout-button:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #fff;
}

/* --- Regeländerungs-Glocke ------------------------------------------------ */

.notification-bell-wrapper {
  position: relative;
}

.notification-bell-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.notification-bell-button:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #fff;
}

.notification-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-danger);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  border: 2px solid var(--color-primary-darker);
}

.notification-bell-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(380px, 90vw);
  max-height: 420px;
  overflow-y: auto;
  background: var(--color-card-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
  padding: 18px;
  z-index: 20;
}

.notification-bell-panel h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: var(--color-primary-darker);
}

.notification-bell-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.notification-bell-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.notification-bell-item-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.notification-bell-item-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.notification-bell-item-source-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  text-decoration: none;
}

.notification-bell-item-source-link:hover {
  text-decoration: underline;
}

/* Für ältere, VOR der Quellenpflicht automatisiert gespeicherte Einträge
   ohne sourceUrl (siehe db.js: Migration "source_url", auth-ui.js:
   renderNotificationBell) -- bewusst gedämpft/kursiv statt wie ein
   klickbarer Link, damit klar ist: kein Fehler, sondern schlicht keine
   Quelle hinterlegt. */
.notification-bell-item-source-missing {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--color-text-muted);
}

.notification-bell-item-antrag-button {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  color: var(--color-primary-darker);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.notification-bell-item-antrag-button:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* --- Globale Suche (Header) ------------------------------------------------
   Persistent im Header sichtbar (siehe index.html: #global-search,
   global-search.js) — auf dem dunklen Header-Hintergrund daher ein heller,
   halbtransparenter Eingabe-Pill (ähnlich .notification-bell-button), das
   Ergebnis-Panel darunter dagegen wie .notification-bell-panel in normalen
   Kartenfarben, da es über hellem/dunklem Seiteninhalt schweben kann. */
.global-search {
  position: relative;
  flex: 1 1 260px;
  max-width: 420px;
}

.global-search-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.16);
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  padding: 9px 14px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.global-search-input-wrapper:focus-within {
  background: rgba(255, 255, 255, 0.24);
  border-color: #fff;
}

.global-search-icon {
  flex-shrink: 0;
  opacity: 0.85;
  font-size: 0.95rem;
}

.global-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 0.95rem;
  outline: none;
}

.global-search-input::placeholder {
  color: rgba(255, 255, 255, 0.78);
}

/* Browser-eigenes "x"-Icon zum Leeren eines type=search-Felds bleibt aktiv
   nutzbar, wird hier nur an die helle Schriftfarbe angeglichen. */
.global-search-input::-webkit-search-cancel-button {
  filter: invert(1);
}

.global-search-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: min(440px, 92vw);
  max-height: 480px;
  overflow-y: auto;
  background: var(--color-card-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
  padding: 16px;
  z-index: 30;
}

.global-search-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.global-search-gruppe h4 {
  margin: 0 0 8px;
  font-size: 0.9rem;
  color: var(--color-primary-darker);
}

.global-search-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.global-search-eintrag {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.global-search-eintrag:hover,
.global-search-eintrag:focus-visible {
  background: var(--color-primary-light);
  border-color: var(--color-primary-border);
  outline: none;
}

.global-search-eintrag-titel {
  font-weight: 600;
  font-size: 0.92rem;
}

.global-search-eintrag-beschreibung {
  margin-top: 3px;
  font-size: 0.85rem;
  color: var(--color-text-muted, #666);
}

.notification-bell-item-date {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.notification-bell-item-description {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text);
}

.notification-bell-empty {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  padding: 8px 0;
}

/* --- Layout ------------------------------------------------------------- */

/* .app-shell ist die Flex-Zeile aus Seitenleiste + <main> (siehe
   index.html) — <main> selbst wird dafür breiter als früher (700px), damit
   neben der Seitenleiste noch genug Platz für die Karten bleibt. Die
   öffentlichen/Auth-bezogenen Ansichten (Landingpage, Login/Registrierung,
   Abo-Gate, "Was brauche ich?") haben dagegen weiterhin die ursprüngliche,
   schmalere Formular-Breite — siehe .narrow-view unten — damit sich an
   deren Optik nichts ändert.
   Sidebar-Sichtbarkeit selbst hängt nicht an dieser Regel: sie wird separat
   über die "hidden"-Klasse gesteuert (siehe sidebar.js/auth-ui.js). */
.app-shell {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}

main {
  max-width: 1100px;
  width: 100%;
  margin: 28px auto;
  padding: 0 16px 56px;
  /* Flex-Items schrumpfen ohne dies standardmäßig nie unter die
     Inhaltsbreite ihrer Kinder (hier u. a. die Tracker-Tabelle mit
     "white-space: nowrap"-Zellen) -- ohne min-width: 0 würde <main> sich
     bei einer breiten Tabelle weigern, so weit zu schrumpfen, wie neben der
     Seitenleiste eigentlich Platz wäre, und stattdessen die GESAMTE Seite
     horizontal überlaufen lassen, statt das Scrollen wie vorgesehen auf
     .tracker-table-wrapper zu beschränken (siehe .app-shell display:flex
     oben). */
  min-width: 0;
}

/* Die geöffnete Tracker-TABELLE (Detailansicht eines Trackers) enthält
   frei konfigurierbare Spalten, die deutlich mehr Platz brauchen können als
   eine normale Formular-Karte breit ist -- die sonst überall sinnvolle,
   lesefreundliche Höchstbreite (main: 1100px, #app-view: 760px, siehe
   unten) sorgte hier dafür, dass schon bei wenigen zusätzlichen Spalten
   horizontal gescrollt werden musste, obwohl auf breiteren Bildschirmen
   neben der Seitenleiste eigentlich noch reichlich Platz gewesen wäre. Nur
   während die Detailansicht sichtbar ist (nicht die Übersicht/das
   Anlegen-Formular, deren Inhalte weiterhin von der schmaleren, lesefreund-
   licheren Breite profitieren) darf der Hauptbereich daher die volle neben
   der Seitenleiste verfügbare Breite nutzen. */
.app-shell:has(#tracker-detail-section:not(.hidden)) main {
  max-width: 1600px;
}

.narrow-view {
  max-width: 700px;
  margin: 0 auto;
}

/* --- Seitenleiste (Sidebar) ----------------------------------------------
   Persistente Navigation für den eingeloggten Bereich (siehe sidebar.js).
   Auf Desktop eine feste Spalte links neben <main>, ein-/ausklappbar auf
   Icon-Breite (.collapsed). Auf schmalen Bildschirmen (siehe Media Query
   unten) stattdessen standardmäßig unsichtbar und als Overlay über einen
   eigenen Button in der Kopfzeile erreichbar (.mobile-open), damit sie dort
   nicht permanent Platz wegnimmt. */

.sidebar {
  flex-shrink: 0;
  width: 248px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 14px;
  margin: 28px 0;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  transition: width 0.18s ease;
}

.sidebar-collapse-toggle {
  align-self: flex-end;
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.sidebar-collapse-toggle:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-border);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.sidebar-link:hover {
  background: var(--color-primary-light);
}

.sidebar-link.active {
  background: var(--color-primary);
  color: #fff;
}

.sidebar-link-icon {
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1;
}

.sidebar-link-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Eingeklappt: nur noch die Icon-Spalte, Beschriftung ausgeblendet (bleibt
   aber per title-Attribut auf dem Button als Tooltip erreichbar, siehe
   sidebar.js). */
.sidebar.collapsed {
  width: 64px;
  padding: 20px 10px;
}

.sidebar.collapsed .sidebar-link-label {
  display: none;
}

.sidebar.collapsed .sidebar-link {
  justify-content: center;
  padding: 11px 0;
}

.sidebar.collapsed .sidebar-collapse-toggle {
  align-self: center;
}

.sidebar-mobile-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--radius-sm);
  background: transparent;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.sidebar-mobile-toggle:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #fff;
}

.sidebar-backdrop {
  display: none;
}

@media (max-width: 860px) {
  .app-shell {
    display: block;
  }

  main {
    margin: 20px auto;
  }

  .sidebar-mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Auf schmalen Bildschirmen ist die Sidebar IMMER ein Overlay (auch im
     "collapsed"-Zustand vom Desktop, falls der Nutzer zwischen
     Bildschirmgrößen wechselt) — off-canvas per transform, keine
     sticky-Positionierung/kein Platz in der Spalte. */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 40;
    width: min(280px, 82vw);
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }

  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: var(--shadow-raised);
  }

  .sidebar.collapsed {
    width: min(280px, 82vw);
    padding: 20px 14px;
  }

  .sidebar.collapsed .sidebar-link-label {
    display: inline;
  }

  .sidebar.collapsed .sidebar-link {
    justify-content: flex-start;
    padding: 11px 12px;
  }

  .sidebar-collapse-toggle {
    display: none;
  }

  .sidebar-backdrop:not(.hidden) {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 25, 15, 0.45);
    z-index: 35;
  }
}

/* Der eingeloggte App-Bereich (mit Seitenleiste) darf die volle main-Breite
   nutzen, aber Karten sollen trotzdem nicht unangenehm breit/gestreckt
   wirken — daher eine eigene, etwas großzügigere (aber immer noch
   begrenzte) Höchstbreite für den Seiteninhalt neben der Sidebar. */
#app-view {
  max-width: 760px;
}

/* Siehe Kommentar bei "main" oben: die Tracker-Tabelle braucht mehr Breite
   als die sonst überall passende, lesefreundliche 760px-Grenze. */
#app-view:has(#tracker-detail-section:not(.hidden)) {
  max-width: 1600px;
}

.card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-card);
  margin-bottom: 22px;
}

/* Hebt die "Konto löschen"-Karte optisch als unwiderrufliche/gefährliche
   Aktion ab (roter Rahmen statt des normalen Karten-Rahmens). */
.danger-card {
  border-color: var(--color-danger-border);
}

.card h2 {
  margin-top: 0;
  margin-bottom: 14px;
  font-size: 1.28rem;
  color: var(--color-primary-darker);
  display: flex;
  align-items: center;
  gap: 12px;
}

.step-number {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}

.card h3 {
  font-size: 1.08rem;
  margin-bottom: 6px;
  color: var(--color-text);
}

.hint {
  margin-top: 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* Hebt den Trial-Hinweis auf der Checkout-/Abo-Gate-Seite deutlich sichtbar
   hervor ("3 Tage kostenlos testen, danach X €/Monat, jederzeit kündbar")
   — niemand soll den Checkout starten, ohne das gesehen zu haben. */
.subscribe-trial-highlight {
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 1rem;
}

/* "Erkunden"-Modus: erscheint oben in #app-view, sobald eine echte Aktion
   ohne aktives Abo/Trial an der Abo-Sperre scheitert (siehe net.js/auth-ui.js:
   showSubscriptionRequiredBanner). Sticky statt fixed, damit er innerhalb der
   jeweiligen Seite nach oben rutscht statt über der Seitenleiste zu schweben,
   aber beim Scrollen der Seite sichtbar bleibt. */
.subscription-required-banner {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding: 14px 18px;
  background: var(--color-primary-darker);
  color: #fff;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.subscription-required-banner-icon {
  font-size: 1.2rem;
}

.subscription-required-banner-text {
  flex: 1 1 320px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.subscription-required-banner-checkout-button {
  flex-shrink: 0;
  padding: 10px 20px;
  background: #fff;
  color: var(--color-primary-darker);
}

.subscription-required-banner-dismiss {
  flex-shrink: 0;
  border: none;
  background: none;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  opacity: 0.8;
}

.subscription-required-banner-dismiss:hover {
  opacity: 1;
}

/* Freundliche Erscheinungsform während einer noch laufenden kostenlosen
   Testphase (siehe auth-ui.js: renderGlobalAccessBanner) -- dieselbe
   helle Farbgebung wie .subscribe-trial-highlight, bewusst OHNE das
   dunkle "gesperrt"-Erscheinungsbild darüber, da hier ja gerade nichts
   gesperrt ist. */
.subscription-required-banner--info {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  box-shadow: none;
  border: 1px solid var(--color-primary-border);
}

.subscription-required-banner--info .subscription-required-banner-checkout-button {
  background: var(--color-primary-dark);
  color: #fff;
}

.subscription-required-banner--info .subscription-required-banner-dismiss {
  color: var(--color-primary-dark);
}

/* --- Öffentliche Startseite (Landingpage) --------------------------------- */

/* Identitäts-Botschaft ganz oben auf der Landingpage -- bewusst VOR dem
   funktionalen Hero ("Förderanträge ausfüllen...") und der Feature-Übersicht,
   weil sie nicht beschreibt, WAS Agrado tut, sondern WOFÜR: der Nutzen für
   den Menschen hinter dem Betrieb. Größer als .hero-title, weil das hier die
   eigentliche erste Botschaft der Seite ist. */
.hero-identity-card {
  text-align: center;
  padding: 40px 28px 32px;
}

/* ".card h2.hero-identity-title" statt nur ".hero-identity-title", weil die
   generische Regel ".card h2" weiter oben (font-size: 1.28rem) durch den
   zusätzlichen Element-Selektor eine höhere Spezifität hat als eine einzelne
   Klasse und sie sonst überschreiben würde. */
.card h2.hero-identity-title {
  margin: 0 0 14px;
  font-size: 2.1rem;
  line-height: 1.25;
  font-weight: 800;
  color: var(--color-primary-darker);
}

.hero-identity-subtext {
  margin: 0 auto;
  max-width: 520px;
  color: var(--color-text);
  font-size: 1.1rem;
  line-height: 1.5;
}

.hero-card {
  text-align: center;
  padding: 36px 28px;
}

.hero-title {
  margin: 0 0 14px;
  font-size: 1.7rem;
  line-height: 1.35;
  color: var(--color-primary-darker);
}

.hero-lead {
  margin: 0 auto 26px;
  max-width: 480px;
  color: var(--color-text);
  font-size: 1.05rem;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.hero-cta {
  width: auto;
  min-width: 240px;
  padding-left: 32px;
  padding-right: 32px;
}

/* Kartenfreier 3-Tage-Test direkt unterm Haupt-CTA -- dieselbe Optik wie
   .subscribe-trial-highlight auf dem Registrierungsformular (siehe
   index.html), hier nur mit etwas kompakterem Innenabstand, da sie
   zwischen zwei Buttons sitzt statt allein am Anfang eines Formulars. */
.hero-trial-hint {
  margin: 0;
  padding: 8px 16px;
  font-size: 0.92rem;
}

/* Vertrauens-Signale (kein Amtsportal, Verschlüsselung) direkt beim
   Haupt-CTA -- bewusst als kurze, pillenförmige Badges statt langer
   Absätze, damit der Hero-Bereich trotz der zusätzlichen Information
   kompakt bleibt. flex-wrap sorgt dafür, dass sie auf schmalen
   Bildschirmen sauber untereinander fallen statt abgeschnitten zu werden. */
.hero-trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.hero-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 7px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

/* Echte Nutzer-Zitate (siehe index.html: .hero-testimonials-card) --
   auto-fit/minmax lässt sie auf Desktop nebeneinander, auf schmalen
   Bildschirmen sauber untereinander fallen, ganz ohne eigene Media Query
   (gleiches Prinzip wie .landing-benefits-grid weiter unten). */
.hero-testimonials-card {
  padding: 24px 28px;
}

.hero-testimonials-heading {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.hero-testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.hero-testimonial {
  margin: 0;
  padding: 16px 18px;
  background: var(--color-primary-light);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
}

.hero-testimonial p {
  margin: 0 0 8px;
  color: var(--color-text);
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.5;
}

.hero-testimonial cite {
  color: var(--color-primary-dark);
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 600;
}

/* Vorteils-Kacheln auf der Landingpage ("Mehr als nur Formulare
   ausfüllen") — bewusst knapp gehalten (Icon + Titel + ein Satz), damit
   die Breite von Agrado auf einen Blick überzeugt statt mit einer
   vollständigen Feature-Liste zu überwältigen. auto-fit/minmax sorgt
   dafür, dass die Kacheln auf schmalen Bildschirmen sauber untereinander
   fallen, statt gequetscht zu wirken — ganz ohne eigene Media Query. */
.landing-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin: 20px 0 24px;
}

.landing-benefit-tile {
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-md);
  padding: 18px 16px;
}

.landing-benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #fff;
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.landing-benefit-tile h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--color-primary-darker);
}

.landing-benefit-tile p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--color-text);
}

.landing-benefits-cta {
  margin-top: 4px;
}

.landing-steps {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 24px;
}

.landing-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.landing-step h3 {
  margin: 0 0 4px;
}

.landing-step p {
  margin: 0;
}

/* Österreich-Warteliste als schmaler Bereich rechts im Header (siehe
   index.html: #header-waitlist-banner) -- bewusst kompakt/zurückhaltend
   gestaltet, da es sich um ein Nebenangebot handelt, nicht um das
   Kernprodukt. Sitzt als weiteres Flex-Kind neben .brand in
   .header-content; .header-content hat bereits flex-wrap: wrap, daher
   rutscht der Bereich auf schmalen Bildschirmen automatisch in eine
   eigene Zeile unter die Marke, statt sie zu verdrängen oder abgeschnitten
   zu werden. */
.header-waitlist-banner {
  flex: 0 1 300px;
  max-width: 300px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-md);
}

.header-waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.header-waitlist-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}

.header-waitlist-input-row {
  display: flex;
  gap: 6px;
}

.header-waitlist-input-row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  background: #fff;
}

.header-waitlist-button {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-primary-dark);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s;
}

.header-waitlist-button:hover {
  background: rgba(255, 255, 255, 0.85);
}

.header-waitlist-button:disabled {
  opacity: 0.6;
  cursor: default;
}

.header-waitlist-success,
.header-waitlist-error {
  margin: 6px 0 0;
  font-size: 0.76rem;
}

.header-waitlist-success {
  color: #fff;
  font-weight: 600;
}

.header-waitlist-error {
  color: #ffd9d9;
}

.header-waitlist-privacy-hint {
  margin: 6px 0 0;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.85);
}

.header-waitlist-privacy-hint a {
  color: #fff;
}

@media (max-width: 480px) {
  .header-waitlist-banner {
    flex: 1 1 100%;
    max-width: none;
  }

  .header-waitlist-input-row {
    flex-wrap: wrap;
  }

  .header-waitlist-button {
    flex: 1 1 auto;
  }
}

@media (max-width: 480px) {
  .hero-identity-card {
    padding: 30px 18px 24px;
  }

  .card h2.hero-identity-title {
    font-size: 1.6rem;
  }

  .hero-identity-subtext {
    font-size: 1rem;
  }

  .hero-card {
    padding: 28px 18px;
  }

  .hero-title {
    font-size: 1.4rem;
  }

  .hero-cta {
    width: 100%;
  }
}

/* --- Upload / Drop-Zone --------------------------------------------------- */

.drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2.5px dashed var(--color-primary-border);
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
  padding: 40px 20px;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}

.drop-zone:hover,
.drop-zone.drag-over {
  background: #e3f0e3;
  border-color: var(--color-primary);
}

/* Solange eine bereits hochgeladene Vorschau noch auf "Übernehmen"/
   "Abbrechen" wartet, ist der zugehörige Datei-Input deaktiviert (siehe
   dokument-erkennung.js: triggerEl) -- sichtbar machen, statt einer
   optisch weiter normal wirkenden, aber inaktiven Fläche. */
.drop-zone:has(input:disabled),
.betrieb-stammdaten-upload-label:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}

.drop-zone-icon {
  font-size: 2.4rem;
}

.drop-zone-text {
  color: var(--color-text);
  font-size: 1.02rem;
  line-height: 1.5;
}

.file-name {
  text-align: center;
  font-weight: 600;
  color: var(--color-primary);
  min-height: 1.3em;
  margin-top: 12px;
  font-size: 1rem;
}

.upload-error {
  font-size: 0.92rem;
  color: var(--color-danger);
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 12px 0 0;
}

.file-preview {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.file-preview img {
  max-width: 100%;
  max-height: 260px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.file-preview .preview-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px;
  background: var(--color-danger-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-danger-border);
  color: var(--color-danger);
  text-align: center;
  font-size: 0.95rem;
}

.file-preview .pdf-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* --- Antragstyp-Auswahl --------------------------------------------------- */

.type-selector {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.type-option {
  text-align: left;
  padding: 16px 18px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  min-height: 56px;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.type-option:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-border);
}

.type-option.selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--shadow-raised);
}

/* --- Förderantrag (AFP/EIF-Investitionsförderung) -------------------------- */

.foerder-context-banner {
  background: var(--color-primary-light);
  border: 1.5px solid var(--color-primary-border);
}

.foerder-context-banner p {
  margin: 0;
}

.foerderantrag-bundesland-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.foerderantrag-bundesland-tile {
  text-align: center;
  padding: 14px 10px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.foerderantrag-bundesland-tile:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-border);
}

.foerderantrag-bundesland-tile.foerderantrag-bundesland-demnaechst {
  cursor: default;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border-style: dashed;
}

.foerderantrag-bundesland-tile.foerderantrag-bundesland-demnaechst:hover {
  background: var(--color-bg);
  border-color: var(--color-border);
}

.foerderantrag-bundesland-tile-badge {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.foerderantrag-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.foerderantrag-header h2 {
  margin: 0;
}

.foerderantrag-kategorie {
  margin-top: 22px;
}

.foerderantrag-kategorie:first-child {
  margin-top: 14px;
}

.foerderantrag-kategorie h3 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin: 0 0 10px;
}

.foerderantrag-zuschussart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.foerderantrag-zuschussart-card {
  text-align: left;
  padding: 14px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.foerderantrag-zuschussart-card:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-card);
}

.foerderantrag-zuschussart-titel {
  font-weight: 700;
  color: var(--color-text);
  font-size: 1rem;
}

.foerderantrag-foerdersatz-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-border);
  color: var(--color-primary-dark);
  font-size: 0.78rem;
  font-weight: 700;
}

.foerderantrag-zuschussart-beschreibung {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .foerderantrag-bundesland-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
  .foerderantrag-zuschussart-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Formularfelder ------------------------------------------------------- */

.field {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field label {
  font-weight: 600;
  font-size: 0.95rem;
}

.field input,
.field select,
.field textarea {
  padding: 13px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 1.05rem;
  font-family: inherit;
  color: var(--color-text);
  min-height: 48px;
  background: var(--color-surface, #fff);
}

.field textarea {
  resize: vertical;
}

/* Zwei Felder nebeneinander (z. B. PLZ + Ort bei den Rechnungsdaten) — auf
   schmalen Bildschirmen fällt es auf eine Spalte zurück. */
.field-row {
  display: flex;
  gap: 14px;
}

.field-row .field {
  flex: 1;
  min-width: 0;
}

@media (max-width: 480px) {
  .field-row {
    flex-direction: column;
    gap: 0;
  }
}

/* Filter-/Suchleiste bei "Meine gespeicherten Anträge" — bis zu vier Felder
   nebeneinander, fällt auf schmalen Bildschirmen automatisch um. */
.applications-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}

.applications-filter-bar .field {
  flex: 1 1 180px;
  margin-bottom: 0;
}

/* PSM-Dokumentation-Export -- nur sichtbar, wenn applications-filter-type
   auf "psm_dokumentation" steht (siehe script.js: updatePsmExportVisibility).
   Eigenständige Karte statt einer weiteren Zeile in der generischen
   Filterleiste, damit Zeitraum/Fläche eindeutig als "wirkt nur auf diesen
   Export" statt als allgemeiner Listenfilter erkennbar bleiben. */
.psm-export-section {
  margin-bottom: 18px;
  background: var(--color-bg);
}

.psm-export-section h3 {
  margin-top: 0;
  margin-bottom: 6px;
}

.psm-export-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 14px 0;
}

.psm-export-filters .field {
  flex: 1 1 160px;
  margin-bottom: 0;
}

.psm-export-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.psm-export-buttons .export-option-button {
  flex: 0 1 260px;
}

/* Aufklappbarer Rechnungsdaten-Block auf der Abo-Gate-Seite — optional, muss
   also nicht permanent Platz beanspruchen, bevor jemand ihn nutzen will. */
.billing-details-block {
  margin: 18px 0;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.billing-details-block summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.billing-details-block[open] summary {
  margin-bottom: 12px;
}

.billing-details-block form {
  margin-top: 14px;
}

/* DATEV-Export-Bereich (Rechnungen-Sektion) — wiederverwendet
   .billing-details-block-Optik für die einklappbaren Stammdaten sowie
   .legal-disclaimer-strong für den Pflicht-Disclaimer. */
.datev-export-panel {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1.5px solid var(--color-border);
}

.datev-export-panel h3 {
  margin-bottom: 6px;
}

.datev-export-panel #datev-stammdaten-details {
  margin: 16px 0;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.datev-export-panel #datev-stammdaten-details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.datev-export-panel #datev-stammdaten-details[open] summary {
  margin-bottom: 12px;
}

.datev-export-panel .legal-disclaimer-strong {
  margin: 16px 0;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.fristen-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}

.fristen-item {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}

/* Trennt die eine bekannte bundesweite Frist (Mehrfachantrag) optisch von
   den übrigen Antragsarten, für die wir nur zur Eigenrecherche raten
   können — macht sichtbar, dass es sich um zwei unterschiedliche Arten von
   Hinweis handelt. */
.fristen-subheading {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin: 4px 0 -2px;
}

.fristen-item-title {
  font-weight: 700;
  font-size: 0.95rem;
}

.fristen-item-date {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.fristen-item-countdown {
  font-weight: 600;
  font-size: 0.92rem;
  margin-top: 6px;
}

.fristen-gruen {
  background: var(--color-primary-light);
  border-color: var(--color-primary-border);
}

.fristen-gruen .fristen-item-countdown {
  color: var(--color-primary-dark);
}

.fristen-gelb {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
}

.fristen-gelb .fristen-item-countdown {
  color: var(--color-warning);
}

.fristen-rot {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
}

.fristen-rot .fristen-item-countdown {
  color: var(--color-danger);
}

.error-helper-result {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
}

.error-helper-result h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
}

.error-helper-result p {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.5;
}

.field-warning {
  color: var(--color-warning);
  font-size: 0.86rem;
}

/* Bestätigung, dass der EPPO-Code automatisch aus der festen, lokalen
   Tabelle (eppoCodes.js) stammt -- bewusst NICHT dieselbe Farbe wie die
   "KI-Vorschlag"-Badges (siehe .psm-vorschlag-badge), da es sich hier um
   einen amtlich genormten, deterministischen Wert handelt statt um einen
   unverbindlichen Websuche-Vorschlag. */
.field-hint-auto {
  display: block;
  color: var(--color-primary-dark);
  font-size: 0.86rem;
  margin-top: 4px;
}

/* Schreibgeschützte Anzeige für Array-Felder (mehrere Zeilen, z. B.
   "flaechennachweis" beim Mehrfachantrag) -- ersetzt das normale <input>,
   das für diese Felder nur noch als versteckter JSON-Wertträger dient. */
.field-array-display {
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface-alt, #f5f7f2);
  white-space: pre-wrap;
}

.checkbox-field {
  margin-bottom: 20px;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-text);
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.checkbox-label a {
  color: var(--color-primary);
  font-weight: 600;
}

/* --- Erkennungs-Transparenz (dokument-erkennung.js) -----------------------
   Zusammenfassungs-Banner nach jedem Upload ("X von Y Angaben erkannt")
   und die Vorschau-dann-Bestätigen-Ansicht für Bescheide/Stammdaten-
   Dokumente/Rechnungen. Wiederverwendet .checkbox-label (siehe oben) für
   die Bestätigungs-Checkbox. */

.upload-reliability-hint {
  margin-top: 8px;
}

/* Sprach-Eingabe für die Düngeverordnung-Dokumentation (sprach-eingabe.js) —
   Alternative zum Datei-Upload, nur beim Antragstyp "duengeverordnung"
   sichtbar (siehe updateSprachEingabeSichtbarkeit). */
.sprach-eingabe-bereich {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}

.sprach-eingabe-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-primary);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.sprach-eingabe-button:hover {
  background: var(--color-primary-light);
}

.sprach-eingabe-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Während der Aufnahme (siehe sprach-eingabe.js) deutlich sichtbar von der
   Ruhe-Darstellung unterschieden, damit klar ist, dass gerade zugehört
   wird. */
.sprach-eingabe-button.sprach-eingabe-aktiv {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger);
}

.sprach-eingabe-transkript {
  margin-top: 10px;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--color-text-secondary, #5b6555);
}

.erkennung-banner {
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin: 12px 0;
  border: 1.5px solid var(--color-border);
}

.erkennung-banner-vollstaendig {
  background: var(--color-primary-light);
  border-color: var(--color-primary-border);
}

.erkennung-banner-unvollstaendig {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
}

/* "Erkunden"-Modus: bewusst weder Erfolg (grün) noch Fehler (amber) — ein
   Beispiel-Ergebnis ist beides nicht. Nutzt dieselbe neutrale Info-Farbe
   wie "Eigener Bescheid" im Kalender (siehe --color-info oben). */
.erkennung-banner-demo {
  background: var(--color-info-bg);
  border-color: var(--color-info-border);
}

.erkennung-banner-headline {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
}

.erkennung-banner-missing {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.erkennung-felder-liste {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.92rem;
}

.erkennung-feld-fehlt {
  color: var(--color-warning);
  font-style: italic;
}

.erkennung-feld-beispiel {
  color: var(--color-info);
  font-style: italic;
}

.erkennung-bestaetigung {
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 1.5px dashed var(--color-warning-border);
  border-radius: var(--radius-sm);
  background: var(--color-warning-bg);
}

.erkennung-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.erkennung-review-actions .submit-button {
  width: auto;
  margin: 0;
  padding: 10px 20px;
}

.erkennung-review-actions .submit-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.extraction-status {
  font-size: 0.92rem;
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 10px 0 18px;
}

.extraction-status.extraction-error {
  color: var(--color-danger);
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
}

/* "Bitte warten" während Hochladen/Analyse noch läuft — bewusst in Rot/fett,
   damit unmissverständlich klar ist, dass hier noch etwas passiert und man
   nicht schon weiterklicken sollte, bis die Analysedaten da sind. Eigene,
   von .extraction-error getrennte Klasse (keine Fehlermeldung, nur dieselbe
   auffällige Farbe zur Aufmerksamkeitslenkung). */
.extraction-status.extraction-warten {
  color: var(--color-danger);
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  font-weight: 600;
}

/* Sichtbarer Lade-Spinner, solange ein Dokument von der KI analysiert wird
   (extraction-status bekommt zusätzlich die Klasse extraction-loading) —
   damit die Seite während der Wartezeit nicht eingefroren wirkt. */
.extraction-status.extraction-loading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.extraction-status.extraction-loading::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--color-primary-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .extraction-status.extraction-loading::before {
    animation: none;
  }
}

/* Deutlich sichtbare Bestätigung nach "Angaben übernehmen" — bewusst
   auffälliger als extraction-status (größere Schrift, fetter, kurze
   Eintritts-Animation), damit ein Speichervorgang nie als "stille
   Statusänderung" untergeht. */
.save-success-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  border: 1.5px solid var(--color-primary-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-top: 14px;
  animation: save-success-in 0.25s ease-out;
}

@keyframes save-success-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .save-success-banner {
    animation: none;
  }
}

/* Kurzes Aufblitzen für ein Feld, das gerade per "Ausgewählte Vorschläge
   übernehmen" (PSM-Formular) befüllt wurde -- die Felder liegen im DOM weit
   oberhalb dieses Buttons, ohne diese Hervorhebung wäre die Änderung nach
   dem automatischen Hinscrollen kaum als "hier hat sich etwas geändert"
   erkennbar (siehe script.js: hebeFeldKurzHervor). */
.feld-uebernommen-hervorhebung {
  animation: feld-uebernommen-blitz 2s ease-out;
}

@keyframes feld-uebernommen-blitz {
  0% {
    background-color: var(--color-primary-light);
    box-shadow: 0 0 0 2px var(--color-primary-border);
  }
  100% {
    background-color: transparent;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feld-uebernommen-hervorhebung {
    animation: none;
    outline: 2px solid var(--color-primary-border);
  }
}

/* Einladender Leerzustand für "Meine gespeicherten Anträge" (statt einer
   nüchternen Textzeile) — mit direktem CTA-Button zum Upload, sofern die
   aktuelle Rolle überhaupt hochladen darf (siehe script.js). */
.empty-state {
  text-align: center;
  padding: 32px 20px;
}

.empty-state-icon {
  font-size: 2.2rem;
  margin: 0 0 8px;
}

.empty-state-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 6px;
}

.empty-state-text {
  color: var(--color-text-muted);
  margin: 0 0 18px;
}

.empty-state-button {
  display: inline-block;
  width: auto;
}

/* --- Buttons --------------------------------------------------------------- */

.submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 6px;
  padding: 14px 18px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  min-height: 52px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-raised);
  transition: background 0.15s, transform 0.05s;
}

.submit-button:hover {
  background: var(--color-primary-dark);
}

.submit-button:active {
  transform: translateY(1px);
}

.submit-button:disabled {
  background: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.submit-button:disabled:hover {
  background: var(--color-border);
}

/* Für unwiderrufliche Aktionen (z. B. "Konto endgültig löschen") — dieselbe
   Form wie .submit-button, aber in Warnfarbe statt der normalen Primärfarbe. */
.danger-submit-button {
  background: var(--color-danger);
}

.danger-submit-button:hover {
  background: #9a1c1c;
}

/* Gedämpfte Variante für den ersten Klick (öffnet erst die
   Sicherheitsabfrage) — sticht weniger hervor als .danger-submit-button,
   das erst für den tatsächlich bestätigenden Klick reserviert bleibt. */
.danger-outline-button {
  color: var(--color-danger);
  border-color: var(--color-danger-border);
}

.danger-outline-button:hover {
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
}

.export-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.export-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-primary);
  font-size: 1.05rem;
  font-weight: 700;
  min-height: 52px;
  cursor: pointer;
  transition: background 0.15s;
}

.export-button:hover {
  background: var(--color-primary-light);
}

.export-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.export-option-button {
  display: inline-block;
  flex: 1 1 200px;
  padding: 12px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-text);
  font-size: 0.98rem;
  font-weight: 600;
  min-height: 46px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-decoration: none;
}

.export-option-button:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-border);
}

.export-status {
  font-size: 0.92rem;
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 14px 0 0;
}

.export-status.export-error {
  color: var(--color-danger);
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
}

/* --- Anmeldung / Registrierung / Passwort vergessen --------------------- */

.auth-card {
  max-width: 460px;
  margin: 0 auto;
}

.auth-form h2 {
  margin-top: 0;
  color: var(--color-primary-darker);
  font-size: 1.35rem;
}

.auth-error {
  font-size: 0.92rem;
  color: var(--color-danger);
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 6px 0 18px;
}

.auth-success {
  font-size: 0.92rem;
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 6px 0 18px;
  word-break: break-word;
}

.auth-success a {
  color: var(--color-primary-dark);
  font-weight: 600;
}

/* Kurzer, dezenter Zusatzhinweis ("...sollte in wenigen Minuten
   ankommen, Spam-Ordner prüfen") direkt unter einer echten
   Versand-Bestätigung -- bewusst kleiner/blasser als der umgebende
   .auth-success-Text, um nicht mit der eigentlichen Bestätigung zu
   konkurrieren. */
.auth-success-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-weight: 400;
}

.auth-links {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.link-button {
  background: none;
  border: none;
  padding: 4px 0;
  color: var(--color-primary);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}

.link-button:hover {
  color: var(--color-primary-dark);
}

/* --- Team verwalten -------------------------------------------------------- */

.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.checkbox-list .checkbox-label {
  font-size: 0.95rem;
}

.role-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: 0.78rem;
  font-weight: 700;
}

/* --- Meine gespeicherten Anträge ----------------------------------------- */

.applications-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.application-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Hebt in der Mehrfach-Upload-Warteschlange hervor, welches Dokument gerade
   in der Vorschau (Schritt 3) geöffnet ist. */
.application-item-active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.application-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.application-info strong {
  font-size: 1.02rem;
}

/* Ein Satz pro Aktivitätsprotokoll-Eintrag — bewusst schlichter als
   .application-item (keine Aktions-Buttons nötig, reiner Lesetext). */
.activity-entry {
  padding: 12px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  line-height: 1.5;
}

.application-info span {
  font-size: 0.86rem;
  color: var(--color-text-muted);
}

.application-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.application-action-button {
  padding: 9px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-text);
  font-size: 0.88rem;
  font-weight: 600;
  min-height: 40px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.application-action-button:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-border);
}

.application-delete-button {
  color: var(--color-danger);
  border-color: var(--color-danger-border);
}

.application-delete-button:hover {
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
}

/* --- Meine Betriebe ------------------------------------------------------
   Wiederverwendet .applications-list/.application-item/.application-info/
   .application-actions/.application-action-button/.role-badge (siehe oben)
   für den einheitlichen Look mit Team/Rechnungen/Aktivitätsverlauf — nur
   die folgenden, betriebsspezifischen Ergänzungen sind neu. */

.betriebe-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.betrieb-active-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}

.betrieb-rename-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  width: 100%;
}

.betrieb-rename-form input[type="text"] {
  flex: 1;
  min-width: 160px;
  padding: 9px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}

/* --- Betriebsprofil -------------------------------------------------------
   Wiederverwendet .fristen-subheading (siehe oben) für die Zwischen-
   überschriften "Bereits genutzte Antragstypen"/"Das könnte noch fehlen". */

.betrieb-profil-facts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.betrieb-profil-fact {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 11px 16px;
  background: var(--color-card-bg);
}

.betrieb-profil-fact:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}

.betrieb-profil-fact-label {
  font-weight: 600;
  color: var(--color-text-muted);
}

.betrieb-profil-fact-value {
  text-align: right;
}

.betrieb-profil-used-list {
  margin: 0 0 18px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.betrieb-profil-missing-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.betrieb-profil-missing-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  border: 1.5px solid var(--color-warning-border);
  background: var(--color-warning-bg);
  border-radius: var(--radius-md);
  padding: 11px 16px;
}

/* --- Betriebsprofil: manuelle Stammdaten ----------------------------------
   Maschinenbestand (buildMaschinenListe), Versicherungen
   (buildVersicherungenListe) und Pachtverträge (buildPachtvertraegeList) —
   bewusst optisch neutraler als .betrieb-profil-missing-item (kein
   Warnton), da dies reine Nutzerangaben ohne Handlungsaufforderung sind. */

.betrieb-stammdaten-list {
  margin-bottom: 20px;
}

.betrieb-stammdaten-list h4 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.betrieb-stammdaten-remove {
  color: var(--color-danger);
  white-space: nowrap;
}

.betrieb-stammdaten-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.betrieb-stammdaten-add-row input[type="text"],
.betrieb-stammdaten-add-row input[type="date"] {
  flex: 1;
  min-width: 160px;
  padding: 9px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}

.betrieb-stammdaten-pacht-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.betrieb-stammdaten-pacht-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  background: var(--color-card-bg);
}

.betrieb-stammdaten-pacht-add-row input[type="text"],
.betrieb-stammdaten-pacht-add-row input[type="date"] {
  flex: 1 1 140px;
}

.betrieb-stammdaten-status {
  margin-top: 8px;
}

/* Reiter auf "Meine Betriebe" (siehe index.html: .betriebe-tab-panel,
   betrieb-profil.js: showBetriebeTab) — dieselbe Umschalter-Optik wie
   .bescheid-eingabe-umschalter/.bescheid-modus-button, nur unter eigenem
   Namen, da sie jetzt an einer dritten Stelle im Einsatz ist. */
.betriebe-tab-umschalter {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.betriebe-tab-button {
  padding: 8px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card-bg);
  color: var(--color-text-muted);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.betriebe-tab-button[aria-selected="true"] {
  background: var(--color-primary-light);
  border-color: var(--color-primary-border);
  color: var(--color-primary-dark);
}

@media (max-width: 480px) {
  .betriebe-tab-button {
    flex: 1 1 auto;
  }
}

/* Der "Dokument hochladen statt manuell eintragen"-Button je Liste (siehe
   buildDokumentUploadButton in betrieb-profil.js) — bewusst zurückhaltender
   als der große .drop-zone-Upload bei Bescheiden/Rechnungen, da er nur eine
   von zwei gleichwertigen Eingabemöglichkeiten ist, nicht der Hauptweg. */
.betrieb-stammdaten-upload {
  margin-top: 10px;
}

.betrieb-stammdaten-upload-label {
  display: inline-block;
  cursor: pointer;
}

.betrieb-stammdaten-upload-status {
  margin: 6px 0 0;
}

/* --- Bescheide & Schreiben --------------------------------------------
   Wiederverwendet .drop-zone (siehe Dokument-Upload weiter oben),
   .application-action-button/.application-delete-button/.link-button
   (siehe .applications-list oben) und .legal-disclaimer für den
   einheitlichen Look — nur die folgenden Ergänzungen sind neu. */

#bescheid-drop-zone {
  margin-bottom: 12px;
}

.bescheid-eingabe-umschalter {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.bescheid-modus-button {
  padding: 8px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card-bg);
  color: var(--color-text-muted);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.bescheid-modus-button[aria-selected="true"] {
  background: var(--color-primary-light);
  border-color: var(--color-primary-border);
  color: var(--color-primary-dark);
}

.bescheid-item-abschnitt {
  margin: 10px 0 0;
  line-height: 1.5;
}

.bescheid-item-abschnitt-label {
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
}

.bescheide-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.bescheide-item {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}

.bescheide-item-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.bescheide-item-header strong {
  font-size: 1.02rem;
  margin-right: 4px;
}

.bescheide-status-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.bescheide-status-offen {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.bescheide-status-erledigt {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.bescheide-art-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.bescheide-item-meta {
  margin-top: 4px;
  font-size: 0.86rem;
  color: var(--color-text-muted);
}

.bescheide-item-summary {
  margin: 8px 0 0;
  line-height: 1.5;
}

.bescheide-item-frist {
  margin: 8px 0 0;
  font-weight: 600;
  color: var(--color-info);
}

.bescheide-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.bescheide-frist-edit-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border);
}

.bescheid-disclaimer {
  font-style: italic;
}

/* "Antwort-Entwurf erstellen": Stichpunkte-Formular + Ergebnis
   (bescheide.js: showAntwortEntwurfForm/renderAntwortEntwurfErgebnis) —
   dieselbe eingerückte Trenner-Optik wie .bescheide-frist-edit-form oben. */
.bescheid-entwurf-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border);
}

.bescheid-entwurf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bescheid-entwurf-ergebnis {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border);
}

.bescheid-entwurf-titel {
  font-weight: 600;
  margin: 0;
}

.bescheid-entwurf-textarea {
  min-height: 220px;
  font-family: inherit;
}

/* --- Posteingang -----------------------------------------------------------
   Wiederverwendet .drop-zone/.extraction-status/.hint/.legal-disclaimer und
   für die "Unsortiert"-Übersicht .bescheide-list/.bescheide-item/-header/
   -meta/-actions/.application-action-button/.application-delete-button
   (siehe oben) für den einheitlichen Look — nur die folgenden Ergänzungen
   sind neu. */

#posteingang-drop-zone {
  margin-bottom: 12px;
}

#posteingang-review-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.posteingang-card {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}

.posteingang-card-filename {
  font-weight: 700;
  margin: 0 0 8px;
}

/* Durchsuchbares, gruppiertes Kategorie-Auswahl-Widget (ersetzt das frühere
   flache <select> mit 40+ Einträgen — siehe posteingang.js:
   buildPosteingangKategorieSelect). */

.posteingang-kategorie-picker {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 10px 0;
}

.posteingang-kategorie-trigger {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  text-align: left;
  background: var(--color-card-bg);
  color: var(--color-text);
  cursor: pointer;
}

.posteingang-kategorie-trigger-leer {
  color: var(--color-text-muted);
}

.posteingang-kategorie-trigger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.posteingang-kategorie-panel {
  position: relative;
  margin-top: 6px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card-bg);
  max-height: 340px;
  overflow-y: auto;
}

.posteingang-kategorie-panel.hidden {
  display: none;
}

.posteingang-kategorie-suche {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-bottom: 1.5px solid var(--color-border);
  font: inherit;
  background: var(--color-card-bg);
  color: var(--color-text);
  position: sticky;
  top: 0;
}

.posteingang-kategorie-gruppenliste {
  padding: 4px;
}

.posteingang-kategorie-gruppe {
  border-bottom: 1px solid var(--color-border);
}

.posteingang-kategorie-gruppe:last-child {
  border-bottom: none;
}

.posteingang-kategorie-gruppe.hidden {
  display: none;
}

.posteingang-kategorie-gruppe summary {
  padding: 8px 6px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-primary-dark);
  cursor: pointer;
}

.posteingang-kategorie-gruppe-items {
  display: flex;
  flex-direction: column;
}

.posteingang-kategorie-item {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  text-align: left;
  font-size: 0.92rem;
  cursor: pointer;
}

.posteingang-kategorie-item:hover,
.posteingang-kategorie-item:focus-visible {
  background: var(--color-bg);
}

.posteingang-kategorie-item.hidden {
  display: none;
}

.posteingang-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.posteingang-cancel-button {
  color: var(--color-danger);
}

.posteingang-cancel-button:hover {
  color: var(--color-danger);
  text-decoration-thickness: 2px;
}

/* --- Frag deinen Betrieb ---------------------------------------------------
   Einfaches Chat-Layout: Frage-Sprechblasen rechtsbündig, Antworten
   linksbündig, wie ein gewöhnlicher Messenger. Wiederverwendet
   .extraction-status/.hint/.legal-disclaimer/.submit-button für den
   einheitlichen Look. */

.betrieb-chat-verlauf {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 60vh;
  overflow-y: auto;
  margin: 14px 0;
  padding-right: 4px;
}

.betrieb-chat-message {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.betrieb-chat-message-frage {
  align-self: flex-end;
  background: var(--color-primary);
  color: #ffffff;
}

.betrieb-chat-message-antwort {
  align-self: flex-start;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.betrieb-chat-message-wartend {
  color: var(--color-text-muted);
  font-style: italic;
}

.betrieb-chat-message-text {
  margin: 0;
}

.betrieb-chat-quellen {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border);
}

.betrieb-chat-quelle-link {
  font-size: 0.9rem;
}

.betrieb-chat-form {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.betrieb-chat-input {
  flex: 1;
  min-width: 0;
  min-height: 130px;
  padding: 14px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  line-height: 1.4;
  resize: vertical;
  background: var(--color-card-bg);
  color: var(--color-text);
}

/* .submit-button setzt normalerweise width:100% (siehe oben) — das ist hier
   fehl am Platz, da der Button in dieser Form NEBEN dem Eingabefeld sitzt
   (flex-row), nicht darunter. Ohne diese Korrektur wird width:100% als
   Flex-Basis interpretiert und drängt das Eingabefeld auf wenige Pixel
   Breite zusammen, obwohl rows/min-height korrekt gesetzt sind. */
.betrieb-chat-form .submit-button {
  width: auto;
  flex: 0 0 auto;
  align-self: flex-end;
}

@media (max-width: 640px) {
  .betrieb-chat-message {
    max-width: 92%;
  }

  .betrieb-chat-form {
    flex-direction: column;
    align-items: stretch;
  }
}

/* --- Mögliche Förderungen ------------------------------------------------
   Wiederverwendet .bescheide-list/.bescheide-item/-header/-meta/-summary/
   -actions/.bescheide-art-badge/.bescheide-status-badge (siehe oben) für
   den einheitlichen Look — nur die folgenden Ergänzungen sind neu. */

.foerderung-begruendung {
  font-style: italic;
}

.foerderung-potenzial {
  display: inline-block;
  margin: 8px 0 0;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 700;
}

.foerderung-potenzial-gering {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.foerderung-potenzial-mittel {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.foerderung-potenzial-hoch {
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-border);
  color: var(--color-primary-dark);
}

#foerderungen-hidden-toggle {
  margin-top: 12px;
}

/* --- Betriebsgesundheit-Dashboard (dashboard.js) --------------------------
   Kompakte Ampel-Liste — jede Karte ist klickbar (Navigation zur
   zuständigen Seite/Abschnitt, siehe dashboard.js) und per Tastatur
   erreichbar (role="button"/tabindex, daher hier auch ein sichtbarer
   Fokus-Zustand). */

.dashboard-alles-ok {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--color-primary-light);
  border: 1.5px solid var(--color-primary-border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 18px;
}

.dashboard-alles-ok.hidden {
  display: none;
}

.dashboard-alles-ok-icon {
  font-size: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
}

.dashboard-alles-ok-titel {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary-darker);
  margin-bottom: 4px;
}

.dashboard-alles-ok-text {
  color: var(--color-primary-dark);
  margin: 0;
}

.dashboard-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dashboard-eintrag {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: #fff;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.1s;
}

.dashboard-eintrag:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.dashboard-eintrag:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.dashboard-eintrag-rot {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
}

.dashboard-eintrag-gelb {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
}

.dashboard-eintrag-gruen {
  background: var(--color-primary-light);
  border-color: var(--color-primary-border);
}

.dashboard-eintrag-ampel {
  font-size: 1.3rem;
  line-height: 1.3;
  flex-shrink: 0;
}

.dashboard-eintrag-text {
  flex: 1;
  min-width: 0;
}

.dashboard-eintrag-titel {
  font-weight: 700;
  color: var(--color-text);
}

.dashboard-eintrag-beschreibung {
  margin-top: 4px;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

.dashboard-eintrag-cta {
  margin-top: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

/* --- Betriebschronik (chronik.js) -----------------------------------------
   Filter-Leiste (Umschalter, gleiches Muster wie .bescheid-modus-button)
   + aufklappbare Jahr-Gruppen + einzelne, klickbare Zeitleisten-Einträge. */

.chronik-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.chronik-filter-bar.hidden {
  display: none;
}

.chronik-filter-button {
  padding: 8px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-card-bg);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.chronik-filter-button[aria-pressed="true"] {
  background: var(--color-primary-light);
  border-color: var(--color-primary-border);
  color: var(--color-primary-dark);
}

.chronik-jahr-gruppe {
  margin-bottom: 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.chronik-jahr-gruppe.hidden {
  display: none;
}

.chronik-jahr-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: none;
  background: var(--color-primary-light);
  cursor: pointer;
  text-align: left;
}

.chronik-jahr-titel {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary-darker);
}

.chronik-jahr-anzahl {
  flex: 1;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.chronik-jahr-pfeil {
  font-size: 1.1rem;
  color: var(--color-primary-dark);
}

.chronik-jahr-inhalt {
  display: flex;
  flex-direction: column;
}

.chronik-jahr-inhalt.hidden {
  display: none;
}

.chronik-eintrag {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.15s;
}

.chronik-eintrag:hover {
  background: var(--color-bg);
}

.chronik-eintrag:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.chronik-eintrag.hidden {
  display: none;
}

.chronik-eintrag-icon {
  font-size: 1.2rem;
  line-height: 1.4;
  flex-shrink: 0;
}

.chronik-eintrag-text {
  flex: 1;
  min-width: 0;
}

.chronik-eintrag-titel {
  font-weight: 700;
  color: var(--color-text);
}

.chronik-eintrag-beschreibung {
  margin-top: 2px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.chronik-eintrag-datum {
  flex-shrink: 0;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .chronik-eintrag {
    flex-wrap: wrap;
  }

  .chronik-eintrag-datum {
    margin-left: calc(1.2rem + 14px);
  }
}

/* !important ist hier bewusst gesetzt: ".hidden" ist die einzige im
   gesamten Projekt genutzte Sichtbarkeits-Utility (kein Element wird je
   über inline style.display gesteuert -- siehe check-hidden-overrides.js).
   Ohne !important gewinnt bei gleicher Selektor-Spezifität (0,1,0) die
   Regel, die weiter UNTEN im Stylesheet steht -- unabhängig davon, welche
   Klasse zuletzt im DOM hinzugefügt wurde. Da viele Bausteine ihr eigenes
   "display: flex/grid/..." setzen und im Stylesheet nach dieser Regel
   stehen (siehe check-hidden-overrides.js für die vollständige Liste),
   blieb "hidden" bei ihnen bislang wirkungslos, sobald sie NACH dieser
   Zeile ergänzt wurden -- zweimal reaktiv gefunden (Tracker-"Berechnet"-
   Spalte, Commit 0b251b3). !important macht ".hidden" strukturell
   unabhängig von der Position im Stylesheet und verhindert diese
   Fehlerklasse dauerhaft, statt sie Fall für Fall nachzuflicken. */
.hidden {
  display: none !important;
}

/* --- Admin-Bereich -------------------------------------------------------- */

.admin-main {
  max-width: 960px;
  margin: 28px auto;
  padding: 0 16px 56px;
}

.admin-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.admin-stat-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  min-width: 180px;
  background: var(--color-bg);
}

.admin-stat-value {
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--color-primary);
}

.admin-stat-label {
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.admin-table th {
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.admin-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}

.admin-badge-active {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.admin-badge-inactive {
  background: #f0f0ee;
  color: var(--color-text-muted);
}

.admin-section-hint {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: -6px 0 16px;
}

/* Für die Regeländerungs-Glocke-Quellen-Diagnose (admin.js: renderDiagnose)
   -- warnt sichtbar, falls Meldungen NACH der Quellenpflicht-Einführung
   trotzdem ohne Quelle gespeichert wurden (strukturell sollte das nicht
   vorkommen, siehe server.js: GET /api/admin/discovered-notifications-diagnose). */
.admin-diagnose-warning {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--color-danger-bg);
  border: 1.5px solid var(--color-danger-border);
  color: var(--color-danger);
  font-size: 0.9rem;
  margin: 16px 0;
}

.admin-diagnose-row-verdaechtig {
  background: var(--color-danger-bg);
}

.admin-diagnose-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 4px 0 16px;
}

.admin-diagnose-actions .export-option-button {
  flex: 0 0 auto;
}

.admin-diagnose-delete-result {
  font-size: 0.9rem;
  color: var(--color-primary-dark);
}

/* --- Mobile ---------------------------------------------------------------- */

@media (max-width: 480px) {
  html {
    font-size: 104%;
  }

  header {
    padding: 18px 14px;
  }

  header h1 {
    font-size: 1.4rem;
  }

  .logo-badge {
    height: 42px;
    padding: 0 6px;
  }

  .logo-badge img {
    height: 28px;
  }

  main,
  .admin-main {
    margin: 18px auto;
    padding: 0 12px 40px;
  }

  .card {
    padding: 18px;
    border-radius: var(--radius-md);
  }

  .export-options {
    flex-direction: column;
  }

  .export-option-button {
    flex: 1 1 auto;
    width: 100%;
  }

  .application-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .application-actions {
    width: 100%;
  }

  .application-action-button {
    flex: 1 1 auto;
  }

  /* Gleiches Prinzip wie .application-item/-actions oben: Bescheide/
     Rechnungen/Förderungen teilen sich dieselbe Listen-Struktur
     (.bescheide-item-header/-actions, siehe Kommentar bei
     .foerderung-begruendung), hatten aber bislang keine eigene 480px-
     Feinjustierung — Badges/Buttons brachen zwar dank flex-wrap schon um,
     wirkten auf sehr schmalen Bildschirmen aber gedrängt. */
  .bescheide-item-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .bescheide-item-actions {
    width: 100%;
  }

  .bescheide-item-actions .application-action-button {
    flex: 1 1 auto;
  }

  .bescheid-entwurf-actions .application-action-button,
  .bescheid-entwurf-actions .submit-button {
    flex: 1 1 auto;
  }

  /* Erkennungs-Banner/-Bestätigung (dokument-erkennung.js): Übernehmen-/
     Abbrechen-Button je volle Breite statt nebeneinander gequetscht. */
  .erkennung-review-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .erkennung-review-actions .submit-button,
  .erkennung-review-actions .link-button {
    width: 100%;
    text-align: center;
  }
}

/* --- Footer ---------------------------------------------------------------- */

.site-footer {
  max-width: 700px;
  margin: 8px auto 0;
  padding: 24px 16px 48px;
  text-align: center;
}

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-bottom: 10px;
  padding: 0;
  list-style: none;
}

.footer-links a {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.footer-copy {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

/* --- 404-Seite -------------------------------------------------------------- */

.error-code {
  margin: 0 0 6px;
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--color-primary-border);
  letter-spacing: 2px;
}

/* --- Rechtstexte (Impressum, Datenschutz, AGB) ----------------------------- */

.legal-main {
  max-width: 760px;
}

.legal-disclaimer {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--color-warning-bg);
  border: 1.5px solid var(--color-warning-border);
  color: var(--color-warning);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  font-size: 0.94rem;
  line-height: 1.5;
  margin-bottom: 26px;
}

.legal-disclaimer-icon {
  flex-shrink: 0;
  font-size: 1.3rem;
  line-height: 1;
}

/* Verstärkte Variante für besonders deutlich sichtbare Hinweise (z. B.
   Bescheide & Schreiben: NIEMALS als Rechtsberatung missverstehen) —
   dieselbe Struktur wie .legal-disclaimer, nur mit den kräftigeren
   Warnfarben statt der neutraleren Hinweisfarbe. */
.legal-disclaimer-strong {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger);
}

/* Auffälligkeits-Hinweis bei Düngemengen — bewusst in einem freundlichen,
   nicht alarmierenden Ton gehalten (keine Warnfarbe wie .legal-disclaimer),
   da es sich um eine unverbindliche Rückfrage handelt, keinen Vorwurf. */
.duengung-hint {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--color-primary-light);
  border: 1.5px solid var(--color-primary-border);
  color: var(--color-primary-darker);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 18px;
}

/* .duengung-hint setzt "display: flex" und steht im Stylesheet NACH der
   allgemeinen ".hidden"-Utility-Klasse (display: none) — bei gleicher
   Spezifität (je ein Klassen-Selektor) gewinnt sonst die später stehende
   Regel, unabhängig davon, welche Klasse im DOM zuletzt hinzugefügt wurde.
   Diese kombinierte Regel hat höhere Spezifität und stellt sicher, dass
   ".hidden" auf diesem Element zuverlässig greift. */
.duengung-hint.hidden {
  display: none;
}

.duengung-hint-icon {
  flex-shrink: 0;
  font-size: 1.2rem;
  line-height: 1;
}

/* --- PSM-Dokumentation: KI-Vorschlag-Panel ------------------------------- */

.psm-vorschlag-panel {
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 18px;
}

.psm-vorschlag-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.psm-vorschlag-preview.hidden {
  display: none;
}

.psm-vorschlag-zeile {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--color-card-bg);
}

/* --- Schädlingsbekämpfung/Rodentizid-Dokumentation: manuelle Zeilen-Eingabe --- */

.sbk-eintrag-panel {
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 18px;
}

.sbk-eintrag-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 16px;
}

.sbk-eintrag-form .field {
  margin-bottom: 12px;
}

.sbk-bestaetigung-field {
  grid-column: 1 / -1;
}

.sbk-bestaetigung-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 500;
  font-size: 0.92rem;
  cursor: pointer;
}

.sbk-bestaetigung-label input[type="checkbox"] {
  min-height: 0;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.sbk-status-uebersicht {
  background: var(--color-primary-light);
  border: 1.5px solid var(--color-primary-border);
  color: var(--color-primary-darker);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 0.92rem;
  font-weight: 600;
  margin-top: 14px;
}

.sbk-status-uebersicht.hidden {
  display: none;
}

.sbk-eintraege-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.sbk-eintrag-zeile {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--color-card-bg);
}

.sbk-eintrag-zeile-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

@media (max-width: 640px) {
  .sbk-eintrag-form {
    grid-template-columns: 1fr;
  }
}

.psm-vorschlag-zeile-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.psm-vorschlag-wert {
  font-weight: 600;
}

.psm-vorschlag-badge {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.psm-vorschlag-unsicher {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Anklickbarer Link zur konkreten Websuche-Quelle eines KI-Vorschlags (siehe
   psmCheck.js: sanitizeQuelleUrl) bzw. transparente "keine Quelle
   gefunden"-Angabe, falls die KI dafür keine belegbare URL geliefert hat --
   bewusst klein/unaufdringlich, direkt unter dem jeweiligen Badge. */
.psm-vorschlag-quelle-zeile {
  margin-top: 4px;
  font-size: 0.82rem;
}

.psm-vorschlag-quelle-zeile a {
  color: var(--color-primary-dark);
}

.psm-vorschlag-keine-quelle {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Kennzeichnet einen Wert, der strukturiert aus der amtlichen BVL-PSM-API
   stammt (siehe bvlPsmApi.js), statt aus einer unverbindlichen KI-Websuche
   -- bewusst NICHT dieselbe gedämpft-kursive Optik wie .psm-vorschlag-badge,
   da es sich um eine amtlich gesicherte statt einer unverbindlichen Angabe
   handelt (dieselbe Unterscheidung wie .field-hint-auto beim EPPO-Code). */
.psm-vorschlag-badge-amtlich {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--color-primary-dark);
  font-weight: 600;
}

.psm-vorschlag-kulturen-bvl {
  margin-top: 4px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.legal-content h2 {
  color: var(--color-primary-darker);
  font-size: 1.18rem;
  margin-top: 32px;
  margin-bottom: 12px;
}

.legal-content h2:first-of-type {
  margin-top: 0;
}

.legal-content h3 {
  font-size: 1.02rem;
  margin-top: 22px;
  margin-bottom: 8px;
  color: var(--color-text);
}

.legal-content p {
  margin: 0 0 14px;
}

.legal-content ul {
  margin: 0 0 14px;
  padding-left: 22px;
}

.legal-content li {
  margin-bottom: 6px;
}

.legal-content a {
  color: var(--color-primary);
}

.placeholder {
  background: #fff3cd;
  color: #7a4a00;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.95em;
}

@media (max-width: 480px) {
  .legal-content h2 {
    font-size: 1.08rem;
  }
}

/* --- Cookie-Hinweis -------------------------------------------------------- */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 18px 24px;
  background: var(--color-primary-darker);
  color: #fff;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
}

.cookie-banner-text {
  margin: 0;
  flex: 1 1 420px;
  max-width: 640px;
  font-size: 0.92rem;
  line-height: 1.5;
}

.cookie-banner-text a {
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
}

.cookie-banner-button {
  flex-shrink: 0;
  padding: 11px 24px;
  border: none;
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-primary-darker);
  font-weight: 700;
  font-size: 0.95rem;
  min-height: 44px;
  cursor: pointer;
  transition: background 0.15s;
}

.cookie-banner-button:hover {
  background: var(--color-primary-light);
}

@media (max-width: 480px) {
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 16px 18px;
  }

  .cookie-banner-button {
    width: 100%;
  }
}

/* ===================== "Was brauche ich?"-Checkliste ===================== */

.checklist-entry-button {
  width: 100%;
  margin-top: 14px;
  text-align: center;
  font-size: 1rem;
}

.checklist-back-button {
  padding: 0;
  margin-bottom: 10px;
}

.checklist-portal-info {
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 0.94rem;
  color: var(--color-primary-darker);
  margin-bottom: 16px;
}

.checklist-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
}

.checklist-progress-bar {
  flex: 1 1 auto;
  height: 10px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}

.checklist-progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 999px;
  transition: width 0.2s ease;
}

.checklist-progress-text {
  flex-shrink: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.checklist-items {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checklist-item {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  transition: background 0.15s, border-color 0.15s;
}

.checklist-item-done {
  background: var(--color-primary-light);
  border-color: var(--color-primary-border);
}

.checklist-item-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.5;
}

.checklist-item-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.checklist-item-done .checklist-item-label {
  color: var(--color-primary-darker);
}

.checklist-item-uncertain {
  margin: 8px 0 0 32px;
  padding: 8px 12px;
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning);
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  line-height: 1.5;
}

/* Kompakte Alternative zu .checklist-item-uncertain: erscheint statt des
   ausgeschriebenen Warnhinweises, wenn für den Punkt konkret recherchierte
   Bundesländer vorliegen (siehe antragstypen.js: bundeslandBestaetigt,
   checklist.js: buildBundeslandBadge). */
.checklist-bundesland-badge-wrapper {
  position: relative;
  margin: 8px 0 0 32px;
  display: inline-block;
}

.checklist-bundesland-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-card-bg);
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.checklist-bundesland-badge:hover {
  border-color: var(--color-primary-border);
}

.checklist-bundesland-badge-bestaetigt {
  background: var(--color-primary-light);
  border-color: var(--color-primary-border);
  color: var(--color-primary-dark);
}

.checklist-bundesland-popup {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: 300px;
  max-width: 80vw;
  padding: 10px 12px;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text);
}

.checklist-cta {
  text-align: center;
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
}

/* ===================== Kalender ===================== */

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 4px 0 18px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.calendar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.calendar-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.calendar-dot-official {
  background: var(--color-warning);
}

.calendar-dot-private {
  background: var(--color-primary);
}

.calendar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.calendar-month-label {
  flex: 1;
  text-align: center;
  margin: 0;
  color: var(--color-primary-darker);
  text-transform: capitalize;
}

.calendar-today-button {
  width: auto;
  padding: 8px 14px;
  margin: 0;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.calendar-weekday {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 4px 0;
}

.calendar-day {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  min-height: 76px;
  padding: 6px;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}

.calendar-day:hover {
  border-color: var(--color-primary-border);
}

.calendar-day-outside {
  visibility: hidden;
  cursor: default;
}

.calendar-day-number {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}

.calendar-day-today .calendar-day-number {
  color: var(--color-primary);
}

.calendar-day-today {
  border-color: var(--color-primary);
}

.calendar-day-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: 0 0 0 2px var(--color-primary-border) inset;
}

.calendar-event-chip {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-event-chip-official {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning);
}

.calendar-event-chip-private {
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-border);
  color: var(--color-primary-darker);
}

.calendar-event-chip-bescheid {
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  color: var(--color-info);
}

.calendar-event-chip-vertrag {
  background: var(--color-accent2-bg);
  border: 1px solid var(--color-accent2-border);
  color: var(--color-accent2);
}

.calendar-day-more {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.calendar-detail {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.calendar-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.calendar-detail-header h3 {
  margin: 0;
  text-transform: capitalize;
}

#calendar-add-button {
  width: auto;
  margin: 0;
}

.calendar-detail-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.calendar-detail-item {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.calendar-detail-item-official {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
}

.calendar-detail-item-private {
  background: var(--color-card-bg);
}

.calendar-detail-item-bescheid {
  background: var(--color-info-bg);
  border-color: var(--color-info-border);
}

.calendar-detail-item-vertrag {
  background: var(--color-accent2-bg);
  border-color: var(--color-accent2-border);
}

.calendar-detail-item-title {
  font-weight: 600;
  color: var(--color-text);
}

.calendar-detail-item-note {
  margin: 6px 0 0;
  color: var(--color-text-muted);
  white-space: pre-wrap;
}

.calendar-fill-button {
  width: auto;
  margin: 10px 0 0;
  padding: 9px 18px;
  font-size: 0.92rem;
}

.calendar-detail-item-actions {
  display: flex;
  gap: 14px;
  margin-top: 8px;
}

.calendar-delete-button {
  color: var(--color-danger);
}

.calendar-event-form {
  border-top: 1px dashed var(--color-border);
  padding-top: 16px;
}

.calendar-event-form-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

@media (max-width: 480px) {
  .calendar-day {
    min-height: 58px;
    padding: 4px;
  }

  .calendar-event-chip {
    font-size: 0.66rem;
  }
}

/* --- Eigene Tracker --------------------------------------------------------
   Frei konfigurierbare Tabellen (siehe tracker.js, server.js: /api/trackers)
   — erste Stelle in der App, die ein echtes <table>-Element für Nutzdaten
   nutzt (alles andere ist bisher eine Karten-/Listen-Optik), weil eine
   spaltenweise ausgerichtete Tabelle hier tatsächlich der Punkt ist
   ("Excel-Ersatz"). */

.tracker-list-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.tracker-list-header h2 {
  margin: 0;
}

.tracker-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.tracker-card {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  background: var(--color-card-bg);
}

.tracker-card h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.tracker-card-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.tracker-delete-button {
  color: var(--color-danger);
  border-color: var(--color-danger-border);
}

.tracker-delete-button:hover {
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
}

/* --- Tracker anlegen: Vorlagen + Spalten-Editor --- */

.tracker-template-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin: 14px 0 22px;
}

.tracker-template-option {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: var(--color-card-bg);
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.tracker-template-option:hover {
  border-color: var(--color-primary-border);
  background: var(--color-primary-light);
}

.tracker-template-option span {
  font-size: 0.84rem;
  color: var(--color-text-muted);
}

/* --- Übersicht: Vorlagen direkt sichtbar + weniger prominente Leer-Option ---
   Die Vorlagen-Kacheln sind jetzt Teil der Übersichtsseite selbst (kein
   Zwischenschritt über "+ Neuer Tracker" mehr), siehe tracker.js:
   renderTrackerQuickstart. Der "von Grund auf"-Link bleibt bewusst ein
   schlichter Link-Button statt einer eigenen Kachel, um ihn erkennbar
   nachrangig zur Vorlagenauswahl zu halten. */

.tracker-quickstart {
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin: 16px 0;
}

.tracker-quickstart h3 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.tracker-quickstart .tracker-template-list {
  margin: 12px 0 14px;
}

.tracker-list-subheading {
  margin: 20px 0 0;
  font-size: 1rem;
}

.tracker-columns-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}

.tracker-column-editor-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.tracker-column-label-input {
  flex: 2 1 200px;
  padding: 9px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}

.tracker-column-type-select {
  flex: 1 1 110px;
  padding: 9px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}

.tracker-form-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

/* --- Tracker-Detail: Tabelle --- */

.tracker-detail-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.tracker-detail-header h2 {
  margin: 0;
  flex: 1 1 auto;
}

.tracker-rename-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.tracker-rename-form input {
  flex: 1 1 260px;
  padding: 9px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
}

.tracker-rename-form .auth-error {
  flex-basis: 100%;
  margin: 0;
}

.tracker-table-wrapper {
  overflow-x: auto;
  margin: 10px 0;
}

/* Permanenter Hinweis auf den automatischen Fruchtfolge-Vorschlag (siehe
   tracker.js: openTracker/detectFruchtfolgeSpalten) -- bewusst als schlichter
   ".hint"-Absatz statt eines eigenen Kastens, damit er kurz bleibt und das
   Formular nicht zusätzlich überlädt (siehe Aufgabenbeschreibung). */
.tracker-fruchtfolge-info-hint {
  margin: 10px 0 0;
}

.tracker-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}

.tracker-add-column-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
}

.tracker-add-column-form .tracker-column-label-input {
  flex: 2 1 200px;
  padding: 9px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}

.tracker-add-column-form .tracker-column-type-select {
  flex: 1 1 110px;
  padding: 9px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}

.tracker-add-column-form .auth-error {
  flex-basis: 100%;
  margin: 0;
}

.tracker-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.tracker-table th,
.tracker-table td {
  border: 1px solid var(--color-border);
  padding: 8px 10px;
  text-align: left;
  white-space: nowrap;
}

.tracker-table th {
  background: var(--color-bg);
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.tracker-table input,
.tracker-table select {
  width: 100%;
  min-width: 110px;
  padding: 6px 8px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.tracker-sum-row td {
  font-weight: 700;
  background: var(--color-primary-light);
}

.tracker-row-actions {
  display: flex;
  gap: 8px;
  white-space: nowrap;
}

.tracker-row-actions .submit-button,
.tracker-row-actions .link-button {
  flex-shrink: 0;
  width: auto;
}

.tracker-row-form td {
  background: var(--color-info-bg);
}

/* Die Aktionen-Spalte (Bearbeiten/Löschen bzw. Speichern/Abbrechen) bleibt
   beim horizontalen Scrollen der Tabelle sichtbar am rechten Rand
   angeheftet. Ohne das rutschten diese Buttons bei Trackern mit mehreren
   Spalten (z. B. Vorlagen mit 5+ Spalten) komplett aus dem sichtbaren
   Bereich, ohne erkennbaren Hinweis, dass die Tabelle überhaupt
   scrollbar ist -- für Nutzer sah es dann so aus, als gäbe es gar keinen
   Speichern-/Bearbeiten-Button und der Tracker liefe ins Leere. */
.tracker-actions-sticky {
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--color-card-bg);
  box-shadow: -3px 0 6px rgba(0, 0, 0, 0.08);
}

.tracker-table th.tracker-actions-sticky {
  background: var(--color-bg);
  z-index: 2;
}

.tracker-sum-row .tracker-actions-sticky {
  background: var(--color-primary-light);
}

.tracker-row-form .tracker-actions-sticky {
  background: var(--color-info-bg);
}

.tracker-reminder-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  white-space: normal;
  cursor: pointer;
}

.tracker-reminder-toggle input[type="checkbox"] {
  width: auto;
  min-width: 0;
  margin: 0;
}

.tracker-reminder-column-select {
  margin-top: 6px;
}

.tracker-computed-config {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex-basis: 100%;
  padding-left: 2px;
}

.tracker-computed-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  flex-basis: 100%;
}

/* Beide Blöcke setzen ihr eigenes "display", darum reicht die allgemeine
   ".hidden"-Regel (gleiche Spezifität, aber früher im Stylesheet) nicht aus
   -- ohne diese Überschreibung würden die Dropdowns bzw. der ganze
   Berechnet-Konfigurationsblock trotz "hidden"-Klasse sichtbar bleiben. */
.tracker-computed-config.hidden,
.tracker-computed-fields.hidden {
  display: none;
}

.tracker-computed-field-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.76rem;
  color: var(--color-text-muted);
}

.tracker-computed-config select {
  padding: 7px 10px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}

.tracker-computed-hint,
.tracker-computed-missing-hint {
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: 0.78rem;
}

.tracker-computed-preview {
  display: inline-block;
  color: var(--color-text-muted);
  font-style: italic;
}

/* "Auswahl mit hinterlegtem Wert"-Spalte: Editor für die Optionsliste beim
   Anlegen einer solchen Spalte (Bezeichnung + ein oder mehrere benannte
   Zahlenwerte je Option, siehe tracker.js: buildSelectLookupOptionsEditor). */
.tracker-select-lookup-config {
  flex-basis: 100%;
  margin-top: 6px;
}

.tracker-select-lookup-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.tracker-select-lookup-option-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.tracker-select-lookup-option-label {
  flex: 2 1 180px;
  padding: 7px 10px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}

.tracker-select-lookup-option-value {
  flex: 1 1 130px;
  padding: 7px 10px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}

/* Erklärender Hinweistext unter dem Auswahl-Feld in der Zeilen-Tabelle,
   z. B. wenn eine Option (wie "Milchkuh" bei der Wirtschaftsdünger-Vorlage)
   bewusst KEINEN hinterlegten Wert hat (siehe tracker.js:
   buildTrackerRowFormRow). */
.tracker-select-lookup-note {
  flex-basis: 100%;
  margin: 4px 0 0;
  font-size: 0.78rem;
  white-space: normal;
}

/* Fruchtfolge-Vorschlag (Vorlage "Anbauplanung/Fruchtfolge", siehe
   tracker.js: detectFruchtfolgeSpalten/buildTrackerRowFormRow) -- lehnt sich
   bewusst an .duengung-hint an (gleiches "Hinweis-Kasten"-Muster), sitzt
   aber INNERHALB der Kulturart-Tabellenzelle statt als eigene Formularzeile,
   da Breite/Layout dort durch die Tabelle vorgegeben sind. */
.tracker-fruchtfolge-hint {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: var(--color-primary-light);
  border: 1.5px solid var(--color-primary-border);
  color: var(--color-primary-darker);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-top: 8px;
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: normal;
}

.tracker-fruchtfolge-hint.hidden {
  display: none;
}

.tracker-fruchtfolge-hint-icon {
  flex-shrink: 0;
  font-size: 1.05rem;
  line-height: 1;
}

.tracker-fruchtfolge-hint-body {
  min-width: 0;
}

.tracker-fruchtfolge-hint-text {
  margin: 0;
}

.tracker-fruchtfolge-hint-notes {
  margin: 6px 0 0;
  padding-left: 18px;
}

.tracker-fruchtfolge-hint-notes.hidden {
  display: none;
}

.tracker-fruchtfolge-hint-notes li {
  margin-bottom: 2px;
}

.tracker-fruchtfolge-hint-disclaimer {
  margin: 6px 0 0;
  font-size: 0.76rem;
  font-style: italic;
  opacity: 0.85;
}

.tracker-fruchtfolge-hint-apply {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.82rem;
}

.tracker-fruchtfolge-hint-apply.hidden {
  display: none;
}

@media (max-width: 640px) {
  .tracker-table th,
  .tracker-table td {
    padding: 6px 8px;
    font-size: 0.86rem;
  }
}