/* ViehOS: für das Smartphone im Stall – große Schaltflächen, wenige Felder je Schritt (KERN-17).
   Erscheinungsbild „Kurierblau“: Leitfarbe nach dem Eicher-Lack 1965–1976, Beton und Blech als Flächen,
   Ohrmarkengelb nur für Warnungen. Schriften liegen in /fonts (CSP: nur 'self', offline im Service Worker). */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-next-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Farben ------------------------------------------------------------------------------------ */

:root,
[data-bs-theme] {
  --fp-blau: #1f4e8c;          /* Kurierblau: Kopf, Hauptknöpfe, Auswahl */
  --fp-blau-tief: #173d6e;     /* gedrückt, Hover */
  --fp-blau-text: #1f4e8c;     /* Links und blaue Schrift auf Fläche */
  --fp-blau-hell: #e1e9f4;     /* ausgewählte Zeilen, Hinweise */
  --fp-auf-blau: #ffffff;
  --fp-beton: #e9ecea;         /* Seitenhintergrund */
  --fp-flaeche: #fbfcfb;       /* Blech: Karten, Listen, Felder */
  --fp-flaeche-2: #f1f3f2;     /* eingelassene Bereiche */
  --fp-schiefer: #1f2a2e;      /* Text */
  --fp-grau: #566265;          /* Nebentext */
  --fp-linie: #cfd5d2;
  --fp-linie-stark: #8e999b;   /* Feldränder */
  --fp-gelb: #f5c400;          /* Ohrmarke: braucht Aufmerksamkeit */
  --fp-gelb-hell: #fdf3c4;
  --fp-auf-gelb: #1f2a2e;
  --fp-rot: #b3261e;           /* Verlust, Fehler, überbelegt */
  --fp-rot-hell: #f8e1df;
  --fp-gruen: #2c6b45;         /* nur „erledigt“ */
  --fp-gruen-hell: #e0efe5;
  --fp-fokus: #f5c400;
  --fp-schraffur: #b9c1bf;

  --fp-schrift: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fp-schild: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;

  --fp-tabhoehe: 4.25rem;
  --fp-leiste: 15rem;

  --bs-body-font-family: var(--fp-schrift);
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.55;
  --bs-body-bg: var(--fp-beton);
  --bs-body-color: var(--fp-schiefer);
  --bs-emphasis-color: var(--fp-schiefer);
  --bs-secondary-color: var(--fp-grau);
  --bs-secondary-bg: var(--fp-flaeche-2);
  --bs-tertiary-bg: var(--fp-flaeche-2);
  --bs-border-color: var(--fp-linie);
  --bs-border-radius: 0.375rem;
  --bs-heading-color: var(--fp-schiefer);
  --bs-link-color: var(--fp-blau-text);
  --bs-link-color-rgb: 31, 78, 140;
  --bs-link-hover-color: var(--fp-blau-tief);
  --bs-link-hover-color-rgb: 23, 61, 110;
  --bs-primary-rgb: 31, 78, 140;
  --bs-success-rgb: 31, 78, 140;
  --bs-danger-rgb: 179, 38, 30;
  --bs-warning-rgb: 245, 196, 0;
  --bs-danger: var(--fp-rot);
  --bs-danger-text-emphasis: var(--fp-rot);
  --bs-success-text-emphasis: var(--fp-gruen);
  --bs-form-invalid-color: var(--fp-rot);
  --bs-form-invalid-border-color: var(--fp-rot);
  --bs-form-valid-border-color: var(--fp-linie-stark);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root,
  [data-bs-theme] {
    --fp-blau: #3a6fb3;
    --fp-blau-tief: #2f5d98;
    --fp-blau-text: #8db6ea;
    --fp-blau-hell: #1d3352;
    --fp-beton: #121a21;
    --fp-flaeche: #1a242d;
    --fp-flaeche-2: #151e26;
    --fp-schiefer: #e5eaee;
    --fp-grau: #a3afb8;
    --fp-linie: #2f3c47;
    --fp-linie-stark: #66737e;
    --fp-gelb: #f5c400;
    --fp-gelb-hell: #3a3210;
    --fp-rot: #f08a80;
    --fp-rot-hell: #3d1d1b;
    --fp-gruen: #84c9a0;
    --fp-gruen-hell: #18301f;
    --fp-schraffur: #3b4955;

    --bs-link-color-rgb: 141, 182, 234;
    --bs-link-hover-color: #b5d0f2;
    --bs-link-hover-color-rgb: 181, 208, 242;
    --bs-primary-rgb: 58, 111, 179;
    --bs-success-rgb: 58, 111, 179;
    --bs-danger-rgb: 240, 138, 128;
    color-scheme: dark;
  }
}

/* ---- Grundlagen -------------------------------------------------------------------------------- */

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

body {
  background: var(--fp-beton);
  color: var(--fp-schiefer);
  font-family: var(--fp-schrift);
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--fp-schild);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.005em;
  color: var(--fp-schiefer);
  text-wrap: balance;
}

/* Seitentitel sind h1.h3, Abschnitte h2.h5/h2.h6 */
.h1, h1 { font-size: 2.625rem; }
.h2, h2 { font-size: 2rem; }
.h3 { font-size: 2.25rem; margin-bottom: 0.75rem; }
.h4 { font-size: 1.625rem; }
.h5 { font-size: 1.5rem; }
.h6 { font-size: 1.25rem; font-weight: 600; }

p, li, dd { max-width: 70ch; }

a { text-underline-offset: 0.18em; }

small, .small { font-size: 0.875rem; }

.text-body-secondary { color: var(--fp-grau) !important; }
.text-danger { color: var(--fp-rot) !important; }
.text-success { color: var(--fp-gruen) !important; }

:focus-visible {
  outline: 3px solid var(--fp-fokus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--fp-schiefer) !important;
}

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

/* Zahlen sehen aus wie auf dem Stallschild */
.fp-zahl,
.fs-2,
.fs-3,
.fp-bestand {
  font-family: var(--fp-schild);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.fp-zahl { font-size: 1.1875rem; text-align: right; }
.fs-2 { font-size: 2.5rem !important; line-height: 1; }
.fs-3 { font-size: 2rem !important; line-height: 1; }

.fp-zahl input,
input.fp-zahl {
  font-family: var(--fp-schild);
  font-size: 1.375rem;
}

/* ---- Rahmen der App: Kopf, Tab-Leiste, Blatt „Mehr“ ---------------------------------------------- */

.fp-kopf {
  background: var(--fp-blau);
  color: var(--fp-auf-blau);
  padding-top: env(safe-area-inset-top);
}

@media (prefers-color-scheme: dark) {
  .fp-kopf { background: #163a68; }
}

.fp-kopf-inhalt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding-block: 0.5rem;
}

.fp-marke {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
  font-family: var(--fp-schild);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: 0.01em;
}

.fp-marke { margin-right: auto; }

.fp-marke img { flex-shrink: 0; border-radius: 50%; background: #fff; }

.fp-kopf-betrieb {
  text-align: right;
  line-height: 1.2;
  min-width: 0;
}

.fp-kopf-betrieb strong {
  display: block;
  font-family: var(--fp-schild);
  font-size: 1.25rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fp-kopf-betrieb span {
  font-size: 0.8125rem;
  opacity: 0.85;
}

/* Als Wechsler: Name und Unternehmen stehen in einem Wrapper neben dem Pfeil */
summary.fp-kopf-betrieb { min-width: 0; }

summary.fp-kopf-betrieb > span {
  min-width: 0;
  font-size: inherit;
  opacity: 1;
}

.fp-kopf a:focus-visible,
.fp-kopf summary:focus-visible { box-shadow: 0 0 0 5px var(--fp-blau-tief) !important; }

.fp-inhalt {
  max-width: 60rem;
  padding-top: 1.25rem;
  padding-bottom: 2.5rem;
}

.fp-mit-tabs .fp-inhalt {
  padding-bottom: calc(var(--fp-tabhoehe) + env(safe-area-inset-bottom) + 2rem);
}

.fp-tabs {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1030;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--fp-flaeche);
  border-top: 1px solid var(--fp-linie);
  padding-bottom: env(safe-area-inset-bottom);
}

.fp-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: var(--fp-tabhoehe);
  padding: 0.375rem 0.25rem;
  border: 0;
  background: none;
  color: var(--fp-grau);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.1;
}

.fp-tab svg {
  width: 1.75rem;
  height: 1.75rem;
}

.fp-tab[aria-current="page"] {
  color: var(--fp-blau-text);
}

.fp-tab[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset: 0 22% auto 22%;
  height: 0.25rem;
  border-radius: 0 0 0.25rem 0.25rem;
  background: var(--fp-blau);
}

.fp-tab:hover { color: var(--fp-schiefer); }

/* Am Handy stehen nur die Tabs unten, alles Weitere im Blatt „Mehr“ */
.fp-tab-weitere,
.fp-tab-trenner,
.fp-ab-leiste { display: none; }

/* Ab Tablet quer: Seitenleiste mit allen Zielen, Konto und Betrieb oben rechts im Kopf */
@media (min-width: 992px) {
  .fp-mit-tabs { padding-left: var(--fp-leiste); }

  .fp-mit-tabs .fp-inhalt { padding-bottom: 3rem; }

  .fp-tabs {
    inset: 0 auto 0 0;
    width: var(--fp-leiste);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: calc(4.75rem + env(safe-area-inset-top)) 0.75rem 1rem;
    overflow-y: auto;
    border-top: 0;
    border-right: 1px solid var(--fp-linie);
  }

  .fp-tab {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.75rem;
    min-height: 3rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 1rem;
  }

  .fp-tab svg {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
  }

  .fp-tab:hover { background: var(--fp-flaeche-2); }

  .fp-tab[aria-current="page"] { background: var(--fp-blau-hell); }

  .fp-tab[aria-current="page"]::before {
    inset: 20% auto 20% -0.75rem;
    width: 0.25rem;
    height: auto;
    border-radius: 0 0.25rem 0.25rem 0;
  }

  .fp-tab-weitere { display: flex; }

  .fp-tab-trenner {
    display: block;
    margin: 0.5rem 0.75rem;
    border-top: 1px solid var(--fp-linie);
  }

  .fp-tab-fuss { margin-top: auto; }

  .fp-tab-mehr,
  .fp-bis-leiste,
  .fp-blatt { display: none !important; }

  .fp-ab-leiste { display: block; }

  .fp-kopf { margin-left: calc(-1 * var(--fp-leiste)); padding-left: 0; }
  .fp-kopf .container { padding-left: calc(var(--fp-leiste) + 0.75rem); max-width: none; }
}

/* Blatt „Mehr“: von unten, auf großen Bildschirmen mittig */
.fp-blatt.offcanvas-bottom {
  height: auto;
  max-height: 85vh;
  background: var(--fp-flaeche);
  color: var(--fp-schiefer);
  border-radius: 1rem 1rem 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}

@media (min-width: 576px) {
  .fp-blatt.offcanvas-bottom {
    left: 50%;
    right: auto;
    width: 30rem;
    margin-left: -15rem;
  }
}

.fp-blatt .offcanvas-header {
  padding: 1rem 1.25rem 0.5rem;
}

.fp-blatt .offcanvas-header::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: 50%;
  width: 2.5rem;
  height: 0.3rem;
  margin-left: -1.25rem;
  border-radius: 1rem;
  background: var(--fp-linie-stark);
}

.fp-blatt .offcanvas-body { padding: 0 1.25rem 1.25rem; }

.fp-blatt-liste {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  border: 1px solid var(--fp-linie);
  border-radius: 0.5rem;
  overflow: hidden;
}

.fp-blatt-liste li + li { border-top: 1px solid var(--fp-linie); }

.fp-blatt-liste a,
.fp-blatt-liste button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.5rem 1rem;
  border: 0;
  background: none;
  color: var(--fp-schiefer);
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
}

.fp-blatt-liste a:hover,
.fp-blatt-liste button:hover { background: var(--fp-blau-hell); }

.fp-blatt-liste a[aria-current="page"] {
  color: var(--fp-blau-text);
  box-shadow: inset 0.25rem 0 0 var(--fp-blau);
}

.fp-blatt-liste .fp-abmelden { color: var(--fp-rot); }

/* Aufklappmenüs im Kopf (Desktop): <details>, damit sie ohne JavaScript gehen */
.fp-menue { position: relative; }

.fp-menue > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  cursor: pointer;
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
}

.fp-menue > summary::-webkit-details-marker { display: none; }

/* Der allgemeine Aufklapp-Pfeil (details > summary::before) gehört nicht in den Kopf */
.fp-menue > summary::before { content: none; }

.fp-menue > summary:hover,
.fp-menue[open] > summary { background: rgb(255 255 255 / 0.14); }

.fp-menue-pfeil {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  transition: transform 0.15s;
}

.fp-menue[open] .fp-menue-pfeil { transform: rotate(180deg); }

.fp-initialen {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--fp-auf-blau);
  color: var(--fp-blau);
  font-family: var(--fp-schild);
  font-size: 1.125rem;
  font-weight: 700;
}

.fp-menue-blatt {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 1050;
  min-width: 17rem;
  padding: 0.375rem;
  background: var(--fp-flaeche);
  color: var(--fp-schiefer);
  border: 1px solid var(--fp-linie);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.18);
  text-align: left;
}

.fp-menue-titel {
  margin: 0;
  padding: 0.5rem 0.75rem 0.375rem;
  color: var(--fp-grau);
  font-size: 0.875rem;
}

.fp-menue-blatt a,
.fp-menue-blatt button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-height: 2.75rem;
  justify-content: center;
  padding: 0.375rem 0.75rem;
  border: 0;
  border-radius: 0.375rem;
  background: none;
  color: var(--fp-schiefer);
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
}

.fp-menue-blatt button span {
  color: var(--fp-grau);
  font-size: 0.875rem;
  font-weight: 400;
}

.fp-menue-blatt a:hover,
.fp-menue-blatt button:hover { background: var(--fp-flaeche-2); }

.fp-menue-blatt [aria-current] {
  background: var(--fp-blau-hell);
  color: var(--fp-blau-text);
}

.fp-menue-blatt form + form,
.fp-menue-blatt a + form {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--fp-linie);
}

.fp-menue-blatt .fp-abmelden { color: var(--fp-rot); }

/* Ohne JavaScript öffnet der Link #fp-mehr das Blatt über :target */
.offcanvas:target {
  visibility: visible;
  transform: none;
}

.fp-js .fp-ohne-js { display: none; }

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

.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1.125rem;
  --bs-btn-border-width: 2px;
  --bs-btn-border-radius: 0.375rem;
  --bs-btn-focus-box-shadow: none;
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  text-align: center;
}

.btn.text-start { justify-content: flex-start; flex-wrap: wrap; column-gap: 0.75rem; }

.btn-sm {
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-font-size: 0.9375rem;
  min-height: 2.5rem;
}

.btn-lg,
.fp-gross {
  min-height: 4rem;
  font-family: var(--fp-schild);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.btn-success,
.btn-primary {
  --bs-btn-color: var(--fp-auf-blau);
  --bs-btn-bg: var(--fp-blau);
  --bs-btn-border-color: var(--fp-blau);
  --bs-btn-hover-color: var(--fp-auf-blau);
  --bs-btn-hover-bg: var(--fp-blau-tief);
  --bs-btn-hover-border-color: var(--fp-blau-tief);
  --bs-btn-active-color: var(--fp-auf-blau);
  --bs-btn-active-bg: var(--fp-blau-tief);
  --bs-btn-active-border-color: var(--fp-blau-tief);
  --bs-btn-disabled-color: var(--fp-auf-blau);
  --bs-btn-disabled-bg: var(--fp-linie-stark);
  --bs-btn-disabled-border-color: var(--fp-linie-stark);
}

.btn-outline-success,
.btn-outline-primary {
  --bs-btn-color: var(--fp-blau-text);
  --bs-btn-bg: var(--fp-flaeche);
  --bs-btn-border-color: var(--fp-blau);
  --bs-btn-hover-color: var(--fp-blau-text);
  --bs-btn-hover-bg: var(--fp-blau-hell);
  --bs-btn-hover-border-color: var(--fp-blau);
  --bs-btn-active-color: var(--fp-auf-blau);
  --bs-btn-active-bg: var(--fp-blau);
  --bs-btn-active-border-color: var(--fp-blau);
  --bs-btn-disabled-color: var(--fp-grau);
  --bs-btn-disabled-border-color: var(--fp-linie);
}

.btn-outline-secondary,
.btn-light {
  --bs-btn-color: var(--fp-schiefer);
  --bs-btn-bg: var(--fp-flaeche);
  --bs-btn-border-color: var(--fp-linie-stark);
  --bs-btn-hover-color: var(--fp-schiefer);
  --bs-btn-hover-bg: var(--fp-flaeche-2);
  --bs-btn-hover-border-color: var(--fp-schiefer);
  --bs-btn-active-color: var(--fp-schiefer);
  --bs-btn-active-bg: var(--fp-linie);
  --bs-btn-active-border-color: var(--fp-schiefer);
  --bs-btn-disabled-color: var(--fp-grau);
  --bs-btn-disabled-border-color: var(--fp-linie);
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #b3261e;
  --bs-btn-border-color: #b3261e;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #8f1d17;
  --bs-btn-hover-border-color: #8f1d17;
  --bs-btn-active-bg: #8f1d17;
}

.btn-outline-danger {
  --bs-btn-color: var(--fp-rot);
  --bs-btn-bg: var(--fp-flaeche);
  --bs-btn-border-color: var(--fp-rot);
  --bs-btn-hover-color: var(--fp-rot);
  --bs-btn-hover-bg: var(--fp-rot-hell);
  --bs-btn-hover-border-color: var(--fp-rot);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b3261e;
  --bs-btn-active-border-color: #b3261e;
}

.btn-warning,
.btn-outline-warning {
  --bs-btn-color: var(--fp-auf-gelb);
  --bs-btn-bg: var(--fp-gelb);
  --bs-btn-border-color: var(--fp-gelb);
  --bs-btn-hover-color: var(--fp-auf-gelb);
  --bs-btn-hover-bg: #e0b300;
  --bs-btn-hover-border-color: #e0b300;
  --bs-btn-active-color: var(--fp-auf-gelb);
  --bs-btn-active-bg: #e0b300;
}

.btn-link {
  --bs-btn-color: var(--fp-blau-text);
  --bs-btn-hover-color: var(--fp-blau-tief);
  --bs-btn-font-weight: 600;
}

/* ---- Formulare --------------------------------------------------------------------------------- */

.form-label {
  font-weight: 600;
  margin-bottom: 0.375rem;
}

.form-text {
  color: var(--fp-grau);
  font-size: 0.9375rem;
}

.form-control,
.form-select {
  min-height: 3rem;
  font-size: 1.0625rem;
  color: var(--fp-schiefer);
  background-color: var(--fp-flaeche);
  border: 2px solid var(--fp-linie-stark);
  border-radius: 0.375rem;
}

.form-control-sm,
.form-select-sm {
  min-height: 2.5rem;
  font-size: 1rem;
}

.form-control-lg {
  min-height: 3.75rem;
  font-size: 1.375rem;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--fp-blau);
  background-color: var(--fp-flaeche);
  color: var(--fp-schiefer);
  box-shadow: 0 0 0 3px var(--fp-fokus);
  outline: 0;
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--fp-flaeche-2);
  border-style: dashed;
  color: var(--fp-grau);
}

.form-control::placeholder { color: var(--fp-grau); opacity: 1; }

.form-check { min-height: 2.25rem; padding-left: 2.25rem; display: flex; align-items: center; }
.form-check-inline { display: inline-flex; margin-right: 1.5rem; }

.form-check .form-check-input {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 0 0 -2.25rem;
  flex-shrink: 0;
  border: 2px solid var(--fp-linie-stark);
  background-color: var(--fp-flaeche);
}

.form-check-input:checked {
  background-color: var(--fp-blau);
  border-color: var(--fp-blau);
}

.form-check-label { padding-left: 0.25rem; }

.input-group > .btn { min-height: 3rem; }

/* Feld mit Knopf daneben: auf dem Handy umbrechen statt quetschen */
.d-flex:has(> .form-control + .btn),
.d-flex:has(> .form-select + .btn) { flex-wrap: wrap; }

.d-flex > .form-control,
.d-flex > .form-select { flex: 1 1 10rem; min-width: 0; }

/* Große Knöpfe: auf dem Handy füllt der Absende-Knopf eines Formulars die Breite */
@media (max-width: 575.98px) {
  .fp-karte form > .btn:not(.btn-sm):not(.btn-link),
  .fp-karte > form > .btn:not(.btn-sm):not(.btn-link) { width: 100%; }
}

.is-invalid,
.input-validation-error {
  border-color: var(--fp-rot) !important;
}

.field-validation-error,
.text-danger.small,
span.text-danger {
  font-weight: 600;
}

/* Fehlerbox nur zeigen, wenn es Fehler gibt */
.validation-summary-valid { display: none; }

details > summary {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
}

details > summary::-webkit-details-marker { display: none; }

details > summary::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s;
  flex-shrink: 0;
}

details[open] > summary::before { transform: rotate(45deg); }

/* ---- Flächen und Listen ------------------------------------------------------------------------ */

.fp-karte {
  background: var(--fp-flaeche);
  border: 1px solid var(--fp-linie);
  border-radius: 0.5rem;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.fp-karte > :last-child { margin-bottom: 0; }

.fp-karte > h2:first-child,
.fp-karte > .h5:first-child,
.fp-karte > .h6:first-child { margin-bottom: 0.75rem; }

a.fp-karte:hover { border-color: var(--fp-blau); }

.list-group {
  --bs-list-group-bg: var(--fp-flaeche);
  --bs-list-group-color: var(--fp-schiefer);
  --bs-list-group-border-color: var(--fp-linie);
  --bs-list-group-border-radius: 0.5rem;
  --bs-list-group-action-hover-bg: var(--fp-blau-hell);
  --bs-list-group-action-hover-color: var(--fp-schiefer);
  --bs-list-group-action-active-bg: var(--fp-blau-hell);
  --bs-list-group-action-color: var(--fp-schiefer);
  --bs-list-group-active-bg: var(--fp-blau);
  --bs-list-group-active-border-color: var(--fp-blau);
  --bs-list-group-item-padding-x: 1rem;
}

.list-group-item { min-height: 3.5rem; }

.list-group-item-action {
  position: relative;
  padding-right: 2.5rem;
}

/* Pfeil statt „→“ im Text: zeigt, dass die Zeile weiterführt */
.list-group-item-action::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: -0.3rem;
  border-right: 2px solid var(--fp-linie-stark);
  border-top: 2px solid var(--fp-linie-stark);
  transform: rotate(45deg);
}

.list-group-item-action:hover::after { border-color: var(--fp-blau); }

/* Im Abschnitt einer Karte liegt die Liste ohne eigenen Kasten */
.fp-karte > .list-group,
.fp-karte > .fp-liste { margin-inline: -0.25rem; }

/* Links in Listen sehen aus wie Text; Knöpfe behalten ihre Farben */
.fp-liste a:not(.btn) {
  text-decoration: none;
  color: inherit;
}

.fp-liste strong { font-weight: 700; }

/* ---- Hinweise, Marken, Tabellen ---------------------------------------------------------------- */

.alert {
  --bs-alert-border-radius: 0.5rem;
  --bs-alert-padding-x: 1.125rem;
  --bs-alert-padding-y: 0.875rem;
  border: 1px solid var(--fp-linie);
  border-left-width: 0.375rem;
  background: var(--fp-flaeche);
  color: var(--fp-schiefer);
}

.alert-success { border-left-color: var(--fp-gruen); background: var(--fp-gruen-hell); }
.alert-info { border-left-color: var(--fp-blau); background: var(--fp-blau-hell); }
.alert-warning { border-left-color: var(--fp-gelb); background: var(--fp-gelb-hell); }
.alert-danger { border-left-color: var(--fp-rot); background: var(--fp-rot-hell); }

.alert a { color: inherit; font-weight: 600; }

.badge {
  --bs-badge-font-size: 0.8125rem;
  --bs-badge-font-weight: 700;
  --bs-badge-padding-x: 0.5em;
  --bs-badge-padding-y: 0.3em;
  --bs-badge-border-radius: 0.25rem;
  font-family: var(--fp-schrift);
  vertical-align: 0.1em;
}

.text-bg-success { background: var(--fp-blau-hell) !important; color: var(--fp-blau-text) !important; }
.text-bg-danger { background: #b3261e !important; color: #fff !important; }
.text-bg-warning { background: var(--fp-gelb) !important; color: var(--fp-auf-gelb) !important; }
.text-bg-secondary { background: var(--fp-linie) !important; color: var(--fp-schiefer) !important; }
.text-bg-light { background: var(--fp-flaeche-2) !important; color: var(--fp-grau) !important; border: 1px solid var(--fp-linie); }

.border-warning { border-color: var(--fp-gelb) !important; }
.border-danger { border-color: var(--fp-rot) !important; }

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--fp-schiefer);
  --bs-table-border-color: var(--fp-linie);
  --bs-table-striped-bg: var(--fp-flaeche-2);
  --bs-table-hover-bg: var(--fp-blau-hell);
  font-variant-numeric: tabular-nums;
}

.table th {
  font-weight: 700;
  color: var(--fp-grau);
  font-size: 0.875rem;
}

.spinner-border { --bs-spinner-border-width: 0.2em; color: var(--fp-blau-text); }

.btn-close { --bs-btn-close-focus-shadow: none; width: 2rem; height: 2rem; }

dl dt { color: var(--fp-grau); font-weight: 600; font-size: 0.9375rem; }
dl dd { margin-bottom: 0.75rem; }

hr { border-color: var(--fp-linie); opacity: 1; }

/* ---- Bausteine einzelner Seiten ---------------------------------------------------------------- */

/* Zurück-Link über dem Titel */
.fp-zurueck {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  margin-bottom: 0.25rem;
  font-weight: 600;
  text-decoration: none;
}

.fp-zurueck::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.fp-zurueck:hover { text-decoration: underline; }

/* Kopf einer Seite: Titel links, Aktion rechts */
.fp-seitenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}

.fp-seitenkopf .d-flex { flex-wrap: nowrap; }
.fp-seitenkopf .d-flex > .form-control { flex: 0 1 auto; }

.fp-seitenkopf .h3,
.fp-seitenkopf h1 { margin-bottom: 0; }

.fp-unterzeile {
  color: var(--fp-grau);
  margin-top: -0.25rem;
  margin-bottom: 1.25rem;
}

/* Schritt im Assistenten: kleine Zeile über dem Titel */
.fp-schritt {
  color: var(--fp-grau);
  font-size: 0.9375rem;
  font-weight: 600;
}

.fp-fortschritt {
  display: block;
  width: 100%;
  height: 0.5rem;
  accent-color: var(--fp-blau);
  margin-bottom: 1rem;
}

/* Die großen Buchungsknöpfe: im Daumenbereich, Zugang füllt, Abgang umrandet, Verlust rot */
.fp-erfassen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  margin-bottom: 1.5rem;
}

.fp-erfassen .btn { width: 100%; }
.fp-erfassen .fp-verlust { grid-column: 1 / -1; min-height: 3.25rem; }

.fp-erfassen .fp-gross svg { width: 1.5rem; height: 1.5rem; }

/* Kennzahlen: Zahl groß, Bezeichnung klein darunter */
.fp-kennzahlen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--fp-linie);
  border: 1px solid var(--fp-linie);
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

@media (min-width: 576px) {
  .fp-kennzahlen { grid-template-columns: repeat(4, 1fr); }
}

.fp-kennzahlen > div {
  background: var(--fp-flaeche);
  padding: 0.875rem 1rem;
}

.fp-kennzahlen .small { color: var(--fp-grau); }

/* Der Bestand als Schild: die eine große Zahl der Startseite */
.fp-stand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.25rem;
  margin-bottom: 1rem;
  color: inherit;
  text-decoration: none;
}

.fp-stand .fp-bestand {
  font-size: clamp(4rem, 18vw, 6rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.01em;
}

.fp-stand-text {
  font-size: 1.0625rem;
  color: var(--fp-grau);
}

.fp-stand-text strong {
  display: block;
  font-family: var(--fp-schild);
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--fp-schiefer);
}

.fp-stand-text strong.fp-warn { color: var(--fp-rot); }

/* ---- Buchtenraster: jede Bucht ein Kästchen, gefüllt nach Belegung ------------------------------ */

.fp-raster {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.fp-raster-stall {
  display: grid;
  gap: 0.375rem;
  color: inherit;
  text-decoration: none;
}

.fp-raster-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.fp-raster-kopf strong {
  font-family: var(--fp-schild);
  font-size: 1.375rem;
  font-weight: 700;
}

.fp-raster-abteile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.875rem;
}

.fp-raster-abteil {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--fp-linie);
  border-radius: 0.25rem;
  background: var(--fp-flaeche);
}

.fp-bucht {
  --fp-fuellung: 0%;
  display: block;
  width: 1.125rem;
  height: 1.625rem;
  border: 1.5px solid var(--fp-blau);
  border-radius: 2px;
  background: linear-gradient(to top, var(--fp-blau) var(--fp-fuellung), transparent var(--fp-fuellung));
}

.fp-f1 { --fp-fuellung: 25%; }
.fp-f2 { --fp-fuellung: 50%; }
.fp-f3 { --fp-fuellung: 75%; }
.fp-f4 { --fp-fuellung: 100%; }

.fp-bucht.fp-ueber {
  border-color: var(--fp-rot);
  background: var(--fp-rot);
}

.fp-bucht.fp-aus {
  border-color: var(--fp-schraffur);
  background: repeating-linear-gradient(135deg, var(--fp-schraffur) 0 2px, transparent 2px 5px);
}

a.fp-raster-stall:hover .fp-raster-abteil { border-color: var(--fp-blau); }

.fp-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.875rem;
  color: var(--fp-grau);
  margin: -0.5rem 0 1.5rem;
  padding: 0;
  list-style: none;
}

.fp-legende li { display: inline-flex; align-items: center; gap: 0.375rem; }
.fp-legende .fp-bucht { width: 0.75rem; height: 1.1rem; }

/* HIT: Hinweis, der Aufmerksamkeit braucht – Ohrmarkengelb */
.fp-achtung {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  background: var(--fp-gelb-hell);
  border: 2px solid var(--fp-gelb);
  color: var(--fp-schiefer);
  text-decoration: none;
}

.fp-achtung.fp-dringend {
  background: var(--fp-rot-hell);
  border-color: var(--fp-rot);
}

/* Ohne offene Entwürfe: HIT ruhig, ohne Ohrmarkengelb (MVP 4) */
.fp-achtung.fp-ruhig {
  background: var(--fp-flaeche);
  border-color: var(--fp-linie);
}

.fp-achtung .fp-abgleich {
  display: block;
  font-size: 0.875rem;
  color: var(--fp-grau);
}

/* ---- Dashboard (MVP 4): Bewegungen heute, Warnungen, Verlauf ---------------------------------- */

.fp-heute {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: -0.5rem 0 1rem;
  font-size: 1.0625rem;
  color: var(--fp-grau);
}

.fp-heute .fp-zahl { color: var(--fp-schiefer); font-weight: 600; }
.fp-heute .fp-warn { color: var(--fp-rot); }

.fp-warnungen {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  gap: 0.5rem;
}

.fp-warnungen li { max-width: none; }

.fp-warnung {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--fp-linie);
  border-left: 0.375rem solid var(--fp-gelb);
  background: var(--fp-flaeche);
  color: var(--fp-schiefer);
  text-decoration: none;
  font-weight: 600;
}

.fp-warnung.fp-dringend { border-left-color: var(--fp-rot); background: var(--fp-rot-hell); }
.fp-warnung:hover { color: var(--fp-schiefer); filter: brightness(0.98); }

.fp-verlauf { margin-bottom: 1.5rem; }
.fp-verlauf figcaption { margin-bottom: 0.5rem; }

.fp-verlauf-flaeche {
  position: relative;
  height: 11rem;
  margin-bottom: 0.5rem;
}

.fp-achtung strong { display: block; }
.fp-achtung:hover { color: var(--fp-schiefer); filter: brightness(0.98); }

.fp-ohrmarke {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.5rem;
}

.fp-ohrmarke path,
.fp-ohrmarke circle {
  stroke: var(--fp-schiefer);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.fp-ohrmarke path { fill: var(--fp-gelb); }
.fp-ohrmarke circle { fill: var(--fp-flaeche); }

.fp-raster-marke { justify-self: start; margin-top: -0.5rem; }

.fp-hit-kasten { border-left: 0.375rem solid var(--fp-gelb); }

.fp-gebucht { border-left: 0.375rem solid var(--fp-gruen); }

.fp-gebucht-titel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--fp-gruen);
  margin-bottom: 0.25rem;
}

.fp-gebucht-titel svg { width: 1.75rem; height: 1.75rem; flex-shrink: 0; }

.fp-gebucht-zahl {
  font-family: var(--fp-schild);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.5rem;
}

.fp-testsystem {
  background: var(--fp-gelb);
  color: var(--fp-auf-gelb);
  font-weight: 700;
}

/* Codes und Links zum Abschreiben */
.fp-codes {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.125rem;
  columns: 2;
}

.fp-link {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
}

.fp-qr img {
  width: 12rem;
  height: 12rem;
  image-rendering: pixelated;
  background: #fff;
  padding: 0.5rem;
  border-radius: 0.25rem;
}

.fp-kapazitaet input {
  max-width: 6.5rem;
  text-align: right;
}

.htmx-request .fp-laedt { display: inline-block; }
.fp-laedt { display: none; }

.fp-register th {
  font-size: 0.8rem;
  font-weight: 700;
}

/* Anmelden und Einrichten: schmale Spalte ohne Tab-Leiste */
.fp-schmal {
  max-width: 28rem;
  margin-inline: auto;
}

/* ---- Bestandsregister drucken (§ 25 ViehVerkV: Ausdruck auf Verlangen der Behörde) --------------- */
/* Nur im Druck sichtbar, etwa der Kopf des Journals */
.fp-nur-drucken { display: none; }

@media print {
  .fp-nur-drucken { display: block; }

  /* Journal: Tage zusammenhalten, Links als Text */
  .fp-journal .list-group-item { break-inside: avoid; padding-block: 0.25rem !important; min-height: 0; }
  .fp-journal .list-group-item-action::after { content: none; }
  .fp-journal-tag { break-after: avoid; }
  .fp-journal-hit { border: 1px solid #000; background: none !important; color: #000 !important; }

  .fp-kopf,
  .fp-tabs,
  .fp-blatt,
  .fp-nicht-drucken,
  .alert {
    display: none !important;
  }

  body,
  .fp-mit-tabs {
    background: #fff;
    color: #000;
    padding: 0 !important;
  }

  main.container {
    max-width: none;
    padding: 0;
  }

  .fp-register {
    font-size: 9pt;
  }
}