/*


 * Layout und Komponenten des StallbuchPros nach der Vorlage SF WerkstattPro


 * (workspace.tsx / globals.css / components/ui/sidebar.tsx, vom Nutzer übermittelt).


 * Farben und Vorlagenmaße ausschließlich über var(...) aus css/design-tokens.css.


 */





/* ===== 1. Grundlagen ===================================================== */


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


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


body {


  margin: 0;


  font-family: var(--font-sans);


  font-size: 15px;


  line-height: 1.5;


  background: radial-gradient(at 90% 0px, var(--body-glow), transparent 55%), var(--background);


  color: var(--foreground);


}


/* v0.2.2 dunkel: native Steuerelemente, Scrollbars, Autofill, Platzhalter */


html { color-scheme: dark; scrollbar-color: var(--field-border) var(--background); }


/* v0.2.4: Platz für die klebende Formular-Aktionsleiste – fokussierte Felder und Fehlermeldungen werden nicht verdeckt */


html { scroll-padding-bottom: 96px; }


::placeholder { color: var(--muted-foreground); opacity: 1; }


option, optgroup { background-color: var(--field-background); color: var(--field-text); }


input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, select:-webkit-autofill, textarea:-webkit-autofill {


  -webkit-text-fill-color: var(--field-text); caret-color: var(--field-text);


  box-shadow: 0 0 0 1000px var(--field-background) inset; transition: background-color 9999s ease 0s;


}


::file-selector-button { background-color: var(--card); color: var(--foreground); border-color: var(--field-border); }


::selection { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }


/* Datums-Picker: dunkles Kalendersymbol über color-scheme: dark. Breitere Ersatzschriften für Segoe UI (unter Linux z. B. Inter)


   ragten sonst aus den 154 px breiten Stallbuch-Filterfeldern; daher nur der INNERE Abstand von Datumsfeldern im Filter


   und um das Kalendersymbol verkleinert (Regel unten in Abschnitt 10) – Feldhöhe/-breite und Raster bleiben unverändert. */


input::-webkit-calendar-picker-indicator { margin-inline-start: 0; padding: 0; }


h1 { font-size: 30px; font-weight: 750; margin: 0; line-height: 1.2; }


h2 { font-size: 18px; margin: 0 0 var(--abstand-3); line-height: 1.3; }


h3 { font-size: 16px; margin: var(--abstand-4) 0 var(--abstand-2); }


a { color: var(--primary); text-underline-offset: 2px; }


:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }


[hidden] { display: none !important; }


.icon { flex: none; width: var(--icon-groesse); height: var(--icon-groesse); }


.nur-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }


.gedaempft { color: var(--muted-foreground); font-size: var(--schrift-klein); }


.grosszahl { font-size: var(--schrift-titel); margin: 0; }


.dialog-bild img { max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; }


.nur-drucken { display: none; }





.sprunglink { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--card); color: var(--foreground); padding: var(--abstand-3); }


.sprunglink:focus { left: var(--abstand-2); }





/* ===== 2. Shell: Sidebar + Hauptspalte =================================== */


.shell { display: flex; min-height: 100vh; }





.sidebar {


  flex: none; width: var(--sidebar-width);


  position: sticky; top: 0; height: 100vh; overflow-y: auto;


  display: flex; flex-direction: column;


  background: var(--sidebar); color: var(--sidebar-foreground);


  border-right: 1px solid var(--sidebar-border);


}


.brand { display: flex; align-items: center; gap: 14px; padding: 32px 24px; border-bottom: 1px solid var(--sidebar-border); }


.brand-icon {


  flex: none; display: inline-flex; align-items: center; justify-content: center;


  width: 44px; height: 44px; border-radius: var(--radius);


  background: var(--brandmark-bg); color: var(--brandmark-fg);


}


.brand-text { display: grid; gap: 4px; min-width: 0; }


.brand-name { font-size: 23px; font-weight: 750; line-height: 1.15; color: var(--sidebar-accent-foreground); }


.brand-unterzeile { font-size: 13px; line-height: 1.3; color: color-mix(in srgb, var(--sidebar-foreground) 70%, var(--sidebar)); }





.nav-bereich { padding: 14px 16px; flex: 1 0 auto; }


.nav-ueberschrift {


  margin: 8px 12px 10px; font-size: 12px; letter-spacing: 1.3px; text-transform: uppercase; font-weight: 700;


  color: color-mix(in srgb, var(--sidebar-foreground) 62%, var(--sidebar));


}


.nav-bereich ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }


/* v0.2.4: Bereichsgruppen mit Überschrift */


.nav-gruppe + .nav-gruppe { margin-top: 14px; }


.nav-gruppe + .nav-gruppe .nav-ueberschrift { margin-top: 0; }


.nav-knopf {


  display: flex; align-items: center; gap: 12px; height: var(--nav-hoehe); padding: 0 12px;


  border-radius: var(--radius); font-size: 15px; line-height: 1.2;


  color: var(--sidebar-foreground); text-decoration: none;


}


.nav-knopf:hover { background: var(--sidebar-accent); }


.nav-knopf[aria-current="page"] { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); font-weight: 700; }


.nav-knopf:focus-visible { outline: 3px solid var(--sidebar-accent-foreground); outline-offset: -3px; }





.arbeitsbereich {


  display: flex; align-items: center; gap: 12px; padding: 18px 24px;


  border-top: 1px solid var(--sidebar-border);


}


.arbeitsbereich-text { display: grid; gap: 2px; }


.arbeitsbereich-text strong { font-size: 14px; color: var(--sidebar-accent-foreground); }


.arbeitsbereich-text span { font-size: 12px; color: color-mix(in srgb, var(--sidebar-foreground) 70%, var(--sidebar)); }





.sidebar-hintergrund { position: fixed; inset: 0; z-index: 30; background: var(--overlay); opacity: 0.7; }





.main-spalte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }


.topbar {


  display: flex; align-items: center; gap: 16px; flex: none;


  height: var(--topbar-height); padding: 0 36px;


  background: var(--topbar-bg); color: var(--topbar-foreground); border-bottom: 1px solid var(--topbar-border);


}


.menue-knopf {


  display: inline-flex; align-items: center; justify-content: center; flex: none;


  width: var(--steuer-hoehe); height: var(--steuer-hoehe); padding: 0;


  border: 1px solid var(--panel-border); border-radius: var(--radius);


  background: var(--card); color: var(--foreground); cursor: pointer;


}


.menue-knopf:hover { background: var(--background); }


.breadcrumb { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; color: var(--topbar-foreground); }


.breadcrumb-trenner { color: var(--subtle-foreground); }


#breadcrumb-seite { color: var(--foreground); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


.versionsbadge {


  margin-left: auto; flex: none; font-size: 13px; font-weight: 700; line-height: 1;


  padding: 7px 11px; border-radius: 999px;


  color: var(--primary); background: var(--quick-bg); border: 1px solid var(--quick-border);


}





.main { flex: 1 1 auto; min-width: 0; }


.main:focus { outline: none; }


.content { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 38px 36px; }





/* ===== 3. Seitenkopf, Tabs ============================================== */


.seitenkopf { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 32px; }


.seitenkopf-text { min-width: 0; max-width: 100%; }


.seitenkopf h1 { overflow-wrap: anywhere; }


.eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--primary); }


.untertitel { margin: 8px 0 0; font-size: 15px; color: var(--muted-foreground); }


.tabs { display: flex; gap: var(--abstand-1); overflow-x: auto; margin: -12px 0 24px; border-bottom: 1px solid var(--panel-border); }


.tab { display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 14px; text-decoration: none; color: var(--muted-foreground); white-space: nowrap; border-bottom: 3px solid transparent; font-size: 15px; }


.tab[aria-current="page"], .tab[aria-current="true"] { border-bottom-color: var(--primary); font-weight: 700; color: var(--primary); }





/* ===== 4. Knöpfe ========================================================= */


.knopfleiste { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }


.knopf {


  display: inline-flex; align-items: center; justify-content: center; gap: 8px;


  min-height: var(--steuer-hoehe); min-width: var(--steuer-hoehe); padding: 0 18px;


  border-radius: var(--radius); border: 1px solid var(--rand-stark); font: inherit; font-size: 15px; font-weight: 700;


  text-decoration: none; cursor: pointer; line-height: 1.2;


}


.knopf-primaer { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }


.knopf-sekundaer { background: var(--card); color: var(--foreground); border-color: var(--field-border); }


.knopf-gefahr { background: var(--card); color: var(--foreground); border: 2px solid var(--foreground); }


.knopf:disabled { opacity: 0.6; cursor: not-allowed; }


.knopf:hover:not(:disabled) { filter: brightness(1.15); }


.knopf-sekundaer:hover:not(:disabled), .knopf-gefahr:hover:not(:disabled) { filter: none; background: var(--sidebar-accent); }


/* v0.2.4: ruhige Nebenaktionen (z. B. Drucken, CSV) – vorhandene Tokens, keine neue Farbe */


.knopf-ghost { background: transparent; color: var(--primary); border-color: transparent; font-weight: 600; }


.knopf-ghost:hover:not(:disabled) { filter: none; background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }





/* ===== 5. Dashboard ====================================================== */


.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px; }


.stat-karte {


  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; min-width: 0;


  padding: 24px; border-radius: var(--panel-radius);


  background: linear-gradient(135deg, var(--stat-from), var(--stat-to)); border: 1px solid var(--stat-border); color: var(--foreground);


}


.stat-text { min-width: 0; }


.stat-label { margin: 0; font-size: 15px; color: var(--muted-foreground); }


.stat-zahl { margin: 10px 0 6px; font-size: 39px; line-height: 1.1; }


.stat-zahl strong { font-weight: 750; }


.stat-zusatz { margin: 0; font-size: 13px; color: var(--subtle-foreground); }


.stat-icon {


  flex: none; display: inline-flex; align-items: center; justify-content: center;


  width: 48px; height: 48px; border-radius: var(--radius);


  background: var(--quick-bg); color: var(--primary);


}


.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-bottom: 25px; }


.dashboard-haupt { min-width: 0; }
.dashboard-grid.dashboard-einspaltig { grid-template-columns: minmax(0, 1fr); }
.uebersicht-schnellstart { margin-bottom: 24px; }
.uebersicht-schnellstart .quick-aktionen { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }


.dashboard-haupt > .panel:last-child { margin-bottom: 0; }





.quick { padding: 26px; background: linear-gradient(135deg, var(--quick-from), var(--quick-to)); border: 1px solid var(--quick-border); border-radius: var(--panel-radius); }


.quick h2 { font-size: 23px; margin: 0 0 10px; }


.quick p { font-size: 15px; line-height: 1.7; margin: 0 0 18px; }


.quick-aktionen { display: grid; gap: 10px; }


.quick-aktionen .knopf { justify-content: flex-start; width: 100%; }





.systemhinweise { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 12px; margin-top: 8px; }


.systemhinweis {


  display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; font-size: 14px;


  color: var(--muted-foreground); background: var(--card); border: 1px solid var(--panel-border); border-radius: var(--radius);


}


.systemhinweis strong { color: var(--foreground); }


.systemhinweis .icon { color: var(--primary); }


.marke-text { font-weight: 700; color: var(--foreground); }


/* v0.2.4: kompakte Statusliste „Derzeit nichts offen“ statt mehrerer großer Leerzustände */


.statusliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }


.statusliste li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: var(--touch-min); padding: 6px 12px; border: 1px solid var(--panel-divider); border-radius: var(--radius); background: var(--background); }


.status-zeichen { color: var(--primary); font-weight: 700; }


.status-aktion { margin-left: auto; }


.status-aktion a { display: inline-flex; align-items: center; min-height: var(--touch-min); font-weight: 700; }





/* ===== 6. Panels, Karten, Raster ========================================= */


.panel { background: var(--card); border: 1px solid var(--panel-border); border-radius: var(--panel-radius); overflow: hidden; margin-bottom: 25px; }


.panel-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 23px 25px; border-bottom: 1px solid var(--panel-divider); }


.panel-titel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }


.panel-titel h2 { margin: 0; font-size: 18px; }


.panel-anzahl { font-size: 13px; color: var(--muted-foreground); background: var(--background); border: 1px solid var(--panel-divider); border-radius: 999px; padding: 3px 10px; }


.panel-body { padding: 22px 25px; min-width: 0; }


.panel-body > :first-child { margin-top: 0; }


.panel-body > :last-child { margin-bottom: 0; }


.panel-body-tabelle { padding: 0; }


.panel-toolbar { padding: 18px 25px; border-bottom: 1px solid var(--panel-divider); }


.panel-toolbar.filterleiste, .panel-toolbar .filterleiste { margin: 0; }


.raster { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 25px; }


.raster > * { min-width: 0; }


.raster > .panel { margin-bottom: 0; }





/* ===== 7. Hinweise (Zustand über Symbol, Text und Rahmen – nicht über Farbe) */


.hinweis { display: flex; gap: var(--abstand-3); align-items: flex-start; padding: 14px 16px; border-radius: var(--radius); background: var(--card); color: var(--foreground); border: 1px solid var(--panel-border); margin: var(--abstand-3) 0; font-size: 14px; }


.hinweis-icon { font-size: var(--schrift-gross); line-height: 1.2; font-weight: bold; }


.hinweis-text { min-width: 0; overflow-wrap: anywhere; }


.hinweis-text ul { margin: var(--abstand-2) 0 0; padding-left: var(--abstand-5); }


.hinweis-info { border-left: 4px solid var(--primary); }


.hinweis-erfolg { border-left: 4px solid var(--primary); }


.hinweis-warnung { border: 2px dashed var(--warnung-rand); }


.hinweis-fehler { border: 3px double var(--fehler-rand); }


.marke { font-weight: bold; border-bottom: 2px dashed var(--foreground); }


.export-hinweis { margin: -16px 0 20px; font-size: 14px; }





/* ===== 8. Listen, Leerzustand ============================================ */


.datenliste, .mehr-liste { list-style: none; margin: 0; padding: 0; }


ul.datenliste, .mehr-liste { display: grid; gap: var(--abstand-2); }


.eintrag { display: flex; flex-direction: column; gap: var(--abstand-1); min-height: var(--touch-min); padding: 12px 14px; background: var(--card); border: 1px solid var(--panel-border); border-radius: var(--radius); color: var(--foreground); text-decoration: none; }


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


.eintrag-titel { font-weight: bold; color: var(--primary); overflow-wrap: anywhere; }


.eintrag-details { display: flex; flex-wrap: wrap; gap: var(--abstand-1) var(--abstand-3); font-size: var(--schrift-klein); color: var(--muted-foreground); }


.leer { padding: 22px 25px; margin: 0; }


.liste-einfach { margin: 0; padding-left: var(--abstand-5); }


.liste-einfach li { margin: var(--abstand-1) 0; }


.zahlenliste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 10px; }


.zahlenliste li { display: flex; justify-content: space-between; gap: var(--abstand-2); padding: 10px 12px; border: 1px solid var(--panel-divider); border-radius: var(--radius); background: var(--background); }





.empty, .leer-zustand { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 44px 24px; }


.empty-icon { color: var(--primary); display: inline-flex; }


.empty-icon .icon { width: 30px; height: 30px; }


.empty h3, .leer-zustand h3 { margin: 0; font-size: 17px; }


.empty p, .leer-zustand p { margin: 0; font-size: 14px; color: var(--muted-foreground); max-width: 34rem; }


.empty .hinweis { text-align: left; }





.feldliste { margin: 0; display: grid; gap: var(--abstand-2); }


.feldliste > div { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; gap: var(--abstand-3); padding-bottom: var(--abstand-2); border-bottom: 1px solid var(--panel-divider); }


.feldliste dt { font-weight: bold; }


.feldliste dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }





/* ===== 9. Tabellen ======================================================= */


.tabelle-rahmen { overflow-x: auto; max-width: 100%; }


table { border-collapse: collapse; width: 100%; background: var(--card); }


th, td { text-align: left; vertical-align: top; padding: 14px 25px; border-bottom: 1px solid var(--panel-divider); overflow-wrap: break-word; font-size: 14px; }


th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted-foreground); background: var(--background); padding-top: 12px; padding-bottom: 12px; }


tbody tr:last-child td { border-bottom: 0; }


.zelle-titel a { font-weight: 700; }


.panel-body:not(.panel-body-tabelle) table th, .panel-body:not(.panel-body-tabelle) table td { padding-left: 12px; padding-right: 12px; }


table.stallbuch { min-width: 52rem; }





/* ===== 10. Formulare ===================================================== */


.formular {


  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; align-items: start;


  background: var(--card); border: 1px solid var(--panel-border); border-radius: var(--panel-radius); padding: 25px;


}


.formular > :not(.feld), .formular > .feld-voll, .formular > fieldset,


.weitere-angaben-inhalt > .feld-voll, .weitere-angaben-inhalt > fieldset { grid-column: 1 / -1; }


.feld { display: grid; gap: 6px; min-width: 0; }


.feld > label, .feld legend { font-weight: bold; font-size: 14px; }


.feld input:not([type="checkbox"]), .feld select, .feld textarea, .filterleiste input, .filterleiste select, .suchfeld input {


  width: 100%; min-height: var(--steuer-hoehe); height: var(--steuer-hoehe); padding: 0 12px;


  font: inherit; font-size: 15px; color: var(--field-text); background: var(--field-background);


  border: 1px solid var(--field-border); border-radius: var(--radius);


}


.feld input[type="file"] { padding: 8px 12px; height: auto; }


.feld textarea { height: auto; min-height: 6rem; padding: 10px 12px; resize: vertical; }


.feld [aria-invalid="true"] { border: 2px solid var(--foreground); }


.feldhinweis { margin: 0; font-size: 13px; color: var(--muted-foreground); }


.feldfehler { margin: 0; font-weight: bold; font-size: 14px; }


.feldfehler:empty { display: none; }


fieldset.feld { border: 1px solid var(--field-border); border-radius: var(--radius); padding: var(--abstand-3); margin: 0; }


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


.weitere-angaben { border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 0 16px; }


.weitere-angaben > summary { min-height: var(--touch-min); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; cursor: pointer; font-weight: bold; color: var(--primary); padding: 6px 0; }


.weitere-angaben-zusatz { font-weight: normal; font-size: 13px; color: var(--muted-foreground); }


.weitere-angaben > summary::before, .listen-filter > summary::before { content: "▸"; margin-right: 8px; font-size: 13px; }


.weitere-angaben[open] > summary::before, .listen-filter[open] > summary::before { content: "▾"; }


/* v0.2.4: Listen – kompakte Suche, aufklappbare Filter, ruhige Export-Aktionen */


.listen-werkzeuge { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-start; }


.listen-werkzeuge > .suchfeld { flex: 1 1 16rem; }


.listen-filter { flex: 0 1 auto; min-width: 0; }


.listen-filter > summary { display: inline-flex; align-items: center; min-height: var(--steuer-hoehe); padding: 0 14px; cursor: pointer; font-weight: 700;


  border: 1px solid var(--field-border); border-radius: var(--radius); background: var(--card); color: var(--foreground); }


.listen-filter[open] { flex: 1 1 100%; order: 3; }


.listen-filter[open] > summary { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }


.listen-filter .listen-filter-inhalt { margin: 14px 0 0; }


.filter-anzahl { font-weight: normal; margin-left: 4px; }


.listen-export { gap: 4px; }


.weitere-angaben-inhalt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; padding-bottom: 16px; }


.auswahlbox { max-height: 16rem; overflow-y: auto; display: grid; gap: var(--abstand-1); }


.checkzeile { display: flex; align-items: center; gap: var(--abstand-3); min-height: var(--touch-min); cursor: pointer; font-weight: normal; }


.checkzeile input { width: 1.4rem; height: 1.4rem; flex: none; accent-color: var(--primary); }


.feld input.datei-versteckt, .datei-versteckt { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; border: 0; opacity: 0; overflow: hidden; clip-path: inset(50%); }


.dateiauswahl { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--abstand-2); }


.dateiauswahl li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--abstand-2); overflow-wrap: anywhere; }


.formular-aktionen { position: sticky; bottom: 0; z-index: 1; background: var(--card); padding: 12px 0; border-top: 1px solid var(--panel-divider); }


#pflicht-legende { margin: -16px 0 16px; }


.filterleiste { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-bottom: var(--abstand-4); align-items: flex-end; }


.filterleiste > .suchfeld { flex: 1 1 14rem; }


.feld-kompakt { flex: 1 1 9rem; }


.feld-breit { flex: 2 1 14rem; }


.feld-kompakt label { font-weight: bold; font-size: 13px; }


.suchfeld { position: relative; min-width: 0; }


.suchfeld-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--subtle-foreground); pointer-events: none; width: 20px; height: 20px; }


.suchfeld input, .filterleiste .suchfeld input { padding-left: 40px; }


/* v0.2.2: Innenabstand der Datums-Filterfelder (siehe Kommentar „Datums-Picker“ oben) */


.filterleiste .feld input[type="date"] { padding-left: 8px; padding-right: 8px; }


.karte .feld + .feld, .karte .feld + .knopf, .karte fieldset + .feld { margin-top: 14px; }


.karte > .panel-body > .knopf { margin-top: 14px; }


/* v0.2.3: Abschnitte „Stall“ / „Voliere (freiwillig)“ im Stallformular, Live-Fläche, Maße-Karte */


.formular-abschnitt { border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 16px; margin: 0; min-width: 0; }


.formular-abschnitt > legend { padding: 0 8px; font-weight: bold; font-size: 16px; color: var(--primary); }


.abschnitt-inhalt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }


.abschnitt-inhalt > .feld-voll, .abschnitt-inhalt > .flaeche-live { grid-column: 1 / -1; }


.flaeche-live { display: grid; gap: 4px; }


.flaeche-live p { margin: 0; }


.masse-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-5); }


.masse-bereich h3 { margin: 0 0 var(--abstand-3); font-size: 16px; }





/* ===== 11. Bilder, Abstammung ============================================ */


.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--abstand-3); }


.tier-name-mit-foto { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }


.tier-name-eingabe { display: flex; align-items: center; gap: 12px; }


.tier-name-eingabe input { min-width: 0; flex: 1; }


.tier-form-foto { flex: 0 0 56px; }


.tier-foto-platzhalter { display: grid; place-items: center; width: 56px; height: 56px; border: 1px dashed var(--primary); border-radius: 10px; cursor: pointer; font-size: 12px; }


.tier-foto-knopf { flex: 0 0 56px; width: 56px; height: 56px; border: 1px solid var(--panel-border); padding: 0; border-radius: 10px; overflow: hidden; background: var(--card); cursor: zoom-in; }


.tier-foto-knopf img { width: 100%; height: 100%; object-fit: cover; display: block; }


.tier-fotos .galerie { grid-template-columns: repeat(auto-fill, minmax(72px, 96px)); }


.tier-foto-knopf:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }


.anhang { margin: 0; display: grid; gap: var(--abstand-1); }


.anhang img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--panel-border); background: var(--background); }


.anhang figcaption { display: grid; font-size: var(--schrift-klein); overflow-wrap: anywhere; }


.ahnentafel, .ahnentafel ul { list-style: none; margin: 0; padding-left: var(--abstand-4); border-left: 2px solid var(--panel-border); }


.ahnentafel { padding-left: var(--abstand-3); }


.ahnentafel li { margin: var(--abstand-2) 0; }


.ahne-unsicher { border: 1px dashed var(--foreground); border-radius: var(--radius); padding: 0 var(--abstand-1); }


.paar { border-top: 1px solid var(--panel-divider); margin-top: var(--abstand-3); }





/* ===== 12. Dialog, Meldungen ============================================= */


.dialog { border: 1px solid var(--rand-stark); border-radius: var(--panel-radius); padding: var(--abstand-5); max-width: min(32rem, calc(100vw - 2rem)); background: var(--card); color: var(--foreground); }


.dialog::backdrop { background: var(--overlay); opacity: 0.7; }


.meldungen { position: fixed; left: calc(var(--sidebar-width) + 24px); right: 24px; bottom: 24px; z-index: 20; max-width: 40rem; margin: 0 auto; }


.meldungen .hinweis { box-shadow: 0 2px 8px var(--sidebar-border); }





/* ===== 13. Responsive ==================================================== */


@media (min-width: 1101px) {


  .shell[data-sidebar="zu"] .sidebar { display: none; }


  .shell[data-sidebar="zu"] ~ .meldungen { left: 24px; }


}





/* ≤ 1100 px: Sidebar als Overlay-Drawer, Dashboard einspaltig */


@media (max-width: 1100px) {


  .sidebar {


    position: fixed; left: 0; top: 0; bottom: 0; z-index: 40; height: auto;


    width: var(--sidebar-width-mobile); max-width: calc(100vw - 48px);


    transform: translateX(-100%); visibility: hidden;


    /* Schließen: erst hinausschieben, dann verbergen. Öffnen: sofort sichtbar (fokussierbar), dann hineinschieben. */


    transition: transform 0.2s ease, visibility 0s linear 0.2s;


  }


  .shell[data-drawer="offen"] .sidebar { transform: none; visibility: visible; box-shadow: 4px 0 24px var(--sidebar-border); transition: transform 0.2s ease, visibility 0s; }


  .content { padding: 28px 24px; }


  .topbar { padding: 0 24px; }


  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }


  .meldungen { left: 16px; right: 16px; }


}


@media (max-width: 1100px) and (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }


.shell[data-ohne-animation] .sidebar { transition: none !important; }





@media screen and (max-width: 760px) {


  .raster { grid-template-columns: minmax(0, 1fr); }


  /* Tabellen werden zu Cardrows */


  table.datentabelle thead, table.stallbuch thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }


  table.datentabelle, table.datentabelle tbody, table.stallbuch, table.stallbuch tbody { display: block; min-width: 0; }


  table.datentabelle tr, table.stallbuch tr { display: block; padding: 14px 16px; border-bottom: 1px solid var(--panel-divider); }


  table.datentabelle td, table.stallbuch td { display: grid; grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr); gap: 10px; padding: 4px 0; border: 0; overflow-wrap: anywhere; }


  table.datentabelle td::before, table.stallbuch td::before { content: attr(data-label); font-size: 12px; color: var(--muted-foreground); }


  table.datentabelle td:not([data-label]), table.stallbuch td:not([data-label]) { display: block; }


  table.datentabelle td:not([data-label])::before, table.stallbuch td:not([data-label])::before { content: none; }


  .feldliste > div { grid-template-columns: 1fr; gap: 0; }


}





/* ≤ 600 px: Smartphone */


@media (max-width: 600px) {


  .feld input, .feld select, .feld textarea, .suchfeld input { font-size: 16px; max-width: 100%; }


  .checkzeile { min-height: 44px; padding-top: 10px; padding-bottom: 10px; overflow-wrap: anywhere; }


  .feld-mehrfach, .auswahlbox { min-width: 0; max-width: 100%; }


  body { font-size: 15px; }


  .content { padding: 26px 16px; }


  .topbar { height: var(--topbar-height-mobil); padding: 0 16px; gap: 12px; }


  .menue-knopf { width: var(--touch-min); height: var(--touch-min); }


  /* Breadcrumb mobil auf die aktuelle Seite verkürzt; „Arbeitsbereich /“ bleibt für Screenreader erhalten */


  .breadcrumb > span:first-child, .breadcrumb-trenner { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }


  h1 { font-size: 26px; }


  .seitenkopf { margin-bottom: 24px; }


  .stats { grid-template-columns: minmax(0, 1fr); gap: 14px; }


  .formular, .weitere-angaben-inhalt, .abschnitt-inhalt, .masse-raster { grid-template-columns: minmax(0, 1fr); }


  .formular-abschnitt { padding: 12px; }


  .formular { padding: 18px 16px; }


  .knopf { min-height: var(--touch-min); }


  .listen-filter > summary { min-height: var(--touch-min); }


  .listen-filter, .listen-export { flex: 1 1 100%; }


  .feld input:not([type="checkbox"]), .feld select, .filterleiste input, .filterleiste select, .suchfeld input { min-height: var(--touch-min); height: var(--touch-min); }


  .panel-heading { padding: 18px 16px; }


  .panel-body { padding: 18px 16px; }


  .panel-toolbar { padding: 16px; }


  .leer { padding: 18px 16px; }


  th, td { padding-left: 16px; padding-right: 16px; }


  .quick { padding: 20px 16px; }


  .systemhinweise { grid-template-columns: minmax(0, 1fr); }


}





/* Gemeinsame Begrenzungen fuer schmale Formular- und Filterspalten. */


.feld > input, .feld > select, .feld > textarea,


.filterleiste input, .filterleiste select { min-width: 0; max-width: 100%; }


.tabs { max-width: 100%; min-width: 0; }


.tab { flex: 0 0 auto; }


.knopfleiste > .knopf { max-width: 100%; overflow-wrap: anywhere; }


@media (max-width: 600px) {


  .topbar { height: auto; min-height: var(--topbar-height-mobil); padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; }


  .breadcrumb { flex: 1 1 5rem; }


  .formular-aktionen .knopf { padding-top: 10px; padding-bottom: 10px; }


}




/* Auf dem Handy stehen die Schnellaktionen vor den Vorsorgeterminen. */

@media (max-width: 600px) {

  #dashboard-grid > #schnellstart { order: -1; }

}


/* Mobile Uebersicht: Schnellaktionen, kompakter Status, danach Fachbereiche. */
@media (max-width: 600px) {
  #dashboard-grid > .dashboard-haupt { display: contents; }
  #dashboard-grid > #schnellstart { order: -2; }
  #dashboard-grid #nichts-offen { order: -1; }
}

/* Rassenauswahl mit Suchfeld im geoeffneten Auswahlbereich. */
.suchauswahl { min-width: 0; }
.suchauswahl > .knopf { width: 100%; justify-content: space-between; text-align: left; white-space: normal; overflow-wrap: anywhere; padding-top: 10px; padding-bottom: 10px; }
.suchauswahl > .knopf::after { content: '▾'; flex: none; }
.suchauswahl-panel { margin-top: 8px; padding: 12px; border: 1px solid var(--field-border); border-radius: var(--radius); background: var(--field-background); }
.suchauswahl-panel > label { display: block; margin-bottom: 6px; }
.suchauswahl-ergebnisse { display: grid; gap: 4px; max-height: 18rem; overflow-y: auto; overscroll-behavior: contain; margin-top: 8px; }
.suchauswahl-ergebnisse .knopf { text-align: left; justify-content: flex-start; white-space: normal; overflow-wrap: anywhere; padding-top: 8px; padding-bottom: 8px; }
.suchauswahl-ergebnisse [aria-pressed='true'] { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
.rassen-mehrfach > summary { min-height: var(--touch-min); display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--primary); }
.rassen-mehrfach > .auswahlbox { margin-top: 8px; }