/* Herdbuch – Gestaltung angelehnt an den Shop (Grün/Creme), hell & dunkel */
:root {
  --green-dark: #2f5d1e; --green: #4f8a1f; --green-light: #8bbf2c;
  --bg: #faf7f0; --panel: #fff; --sand: #efe8d8; --ink: #2b2b26; --muted: #6b6a5f; --line: #e2dccd;
  --warn: #9a6212; --warn-bg: #fdf3e1; --bad: #b23a2a; --bad-bg: #fbe9e6; --info: #2b6cb0; --info-bg: #e6f0fa; --ok: #2f6b1a; --ok-bg: #e8f3dc;
  --radius: 12px; --shadow: 0 1px 6px rgba(40, 40, 20, .07);
  --c1: #4f8a1f; --c2: #2b6cb0; --c3: #b7791f; --c4: #8a3fa0; --c5: #b23a2a; --c6: #2a8a83;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --green-dark: #a8d47a; --green: #8bc34a; --bg: #171a14; --panel: #21251c; --sand: #2b3024; --ink: #e9ead9; --muted: #a3a592; --line: #383d30;
    --warn: #f0b860; --warn-bg: #3a2f17; --bad: #f08a78; --bad-bg: #3d211b; --info: #8ab8ec; --info-bg: #1b2a3b; --ok: #a8d47a; --ok-bg: #233019;
    --c1: #8bc34a; --c2: #6fa8e8; --c3: #e0a64a; --c4: #c690d8; --c5: #f08a78; --c6: #5cc7bd; color-scheme: dark;
  }
}
:root[data-theme="dark"] { --green-dark: #a8d47a; --green: #8bc34a; --bg: #171a14; --panel: #21251c; --sand: #2b3024; --ink: #e9ead9; --muted: #a3a592; --line: #383d30; color-scheme: dark; }

* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; color: var(--green-dark); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.7rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; margin-top: 1em; }
h1 small { font: 400 1rem system-ui, sans-serif; color: var(--muted); }
a { color: var(--green); }
code { font-size: .9em; background: var(--sand); padding: 1px 5px; border-radius: 4px; }
.muted { color: var(--muted); } .small { font-size: .85rem; } .r { text-align: right; }
.ok-t { color: var(--ok); } .warn-t { color: var(--warn); } .bad-t { color: var(--bad); font-weight: 600; }

/* Gerüst */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 8px 16px; background: var(--green-dark); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .top { background: #2a3a1d; } }
.brand { color: #fff; text-decoration: none; font: 700 1.1rem Georgia, serif; white-space: nowrap; }
.brand small { font: 400 .8rem system-ui; opacity: .8; margin-left: 6px; }
.quick { flex: 1; max-width: 420px; }
.quick input { width: 100%; padding: 7px 10px; border-radius: 8px; border: 0; font-size: 15px; }
.logout { color: #fff; margin-left: auto; font-size: .9rem; }
.nav-toggle { display: none; background: none; border: 0; color: #fff; font-size: 1.4rem; }
.side { position: fixed; top: 48px; left: 0; bottom: 0; width: 220px; overflow: auto; background: var(--panel); border-right: 1px solid var(--line); padding: 10px 0 30px; }
.side a { display: block; padding: 5px 18px; color: var(--ink); text-decoration: none; font-size: .93rem; }
.side a:hover { background: var(--sand); }
.side a.active { background: var(--ok-bg); color: var(--green-dark); font-weight: 600; border-left: 3px solid var(--green); padding-left: 15px; }
.nav-group { margin: 12px 18px 3px; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.nav-foot { margin: 20px 18px 0; font-size: .75rem; color: var(--muted); }
.main { margin-left: 220px; padding: 20px 26px 60px; max-width: 1500px; }
.is-login .main { margin: 0; max-width: none; }
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .side { transform: translateX(-100%); transition: transform .2s; z-index: 30; width: 260px; box-shadow: var(--shadow); }
  .nav-open .side { transform: none; }
  .main { margin-left: 0; padding: 14px 16px 50px; }
  .brand small { display: none; }
}

.page-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Karten & Raster */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); margin-bottom: 16px; min-width: 0; }
.card.alert { border-color: var(--bad); box-shadow: 0 0 0 2px var(--bad-bg); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; align-items: start; }
.grid2 > .card { margin: 0; }
.grid2 > .wide { grid-column: 1 / -1; }
@media (max-width: 520px) { .grid2 { grid-template-columns: 1fr; } }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 16px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; text-decoration: none; color: var(--ink); }
.kpi b { display: block; font: 700 1.6rem Georgia, serif; color: var(--green-dark); }
.kpi span { font-size: .82rem; color: var(--muted); }

/* Hinweise */
.flash { padding: 9px 13px; border-radius: 9px; margin: 0 0 10px; background: var(--ok-bg); color: var(--ok); }
.flash.warn { background: var(--warn-bg); color: var(--warn); } .flash.bad { background: var(--bad-bg); color: var(--bad); font-weight: 600; } .flash.info { background: var(--info-bg); color: var(--info); }
.badge { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: .78rem; background: var(--sand); color: var(--ink); white-space: nowrap; vertical-align: 1px; }
.badge.ok { background: var(--ok-bg); color: var(--ok); } .badge.ok2 { background: var(--ok-bg); color: var(--ok); opacity: .8; }
.badge.warn { background: var(--warn-bg); color: var(--warn); } .badge.bad { background: var(--bad-bg); color: var(--bad); } .badge.info { background: var(--info-bg); color: var(--info); }
.todo { margin: 0; padding-left: 18px; } .todo li { margin-bottom: 5px; }

/* Tabellen */
.tbl { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
.list th, .list td, .mini th, .mini td, .tbl table th, .tbl table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.list th, .tbl th, .mini th { font-size: .78rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.list tbody tr:hover { background: var(--sand); }
.mini td, .mini th { padding: 4px 6px; font-size: .9rem; }
th.r, td.r { text-align: right; }
th.sort { cursor: pointer; } th.sort[data-dir=asc]::after { content: " ▲"; } th.sort[data-dir=desc]::after { content: " ▼"; }
.thumb { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; display: block; }
.thumbcell { width: 50px; }
.pager { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; } .pager a, .pager b, .pager span { padding: 3px 9px; border-radius: 6px; border: 1px solid var(--line); text-decoration: none; } .pager b { background: var(--green); color: #fff; }
table.entry input { width: 100%; min-width: 60px; padding: 4px 6px; }
table.entry td { padding: 2px 4px; }

/* Formulare */
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--green-light); outline-offset: 0; }
.fld { display: flex; flex-direction: column; gap: 3px; font-size: .85rem; color: var(--muted); }
.fld input, .fld select, .fld textarea { color: var(--ink); font-size: 15px; }
.fld.check { flex-direction: row; align-items: center; gap: 8px; grid-column: 1 / -1; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 14px; align-items: end; }
.grid-form > p { grid-column: 1 / -1; margin: 0; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px 16px; margin: 0 0 14px; background: var(--panel); }
legend { font: 700 1rem Georgia, serif; color: var(--green-dark); padding: 0 6px; }
.form-actions { display: flex; gap: 10px; justify-content: space-between; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-top: 10px; }
form.inline { display: inline; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.filters input[type=search] { flex: 1; min-width: 220px; }
.upload { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.btn { display: inline-block; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--green); background: var(--green); color: #fff; text-decoration: none; cursor: pointer; font-size: .92rem; white-space: nowrap; }
.btn:hover { filter: brightness(1.08); }
.btn.primary { background: var(--green-dark); border-color: var(--green-dark); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn, :root:not([data-theme="light"]) .btn.primary { color: #111; } }
.btn.light { background: transparent; color: var(--green-dark); }
.btn.danger { background: transparent; border-color: var(--bad); color: var(--bad); }
.btn.small { padding: 4px 9px; font-size: .82rem; }
.btn.wide { width: 100%; }
button.link { background: none; border: 0; color: var(--green); text-decoration: underline; cursor: pointer; padding: 0 4px; font-size: .85rem; }
.bulkbar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; margin-top: 10px; box-shadow: var(--shadow); }

/* Mehrfachauswahl */
.copy { display: inline-block; padding: 1px 7px; margin: 1px 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: inherit; font: inherit; font-size: .85em; cursor: pointer; }
.copy:hover { border-color: var(--green); } .copy.ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.vis-ereignis { padding: 10px 0; border-top: 1px solid var(--line); } .vis-ereignis h3 { margin: 0 0 4px; }
.nowrap { white-space: nowrap; }
.ac-box { position: absolute; z-index: 60; max-height: min(60vh, 520px); overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); padding: 4px 0; }
.ac-head { padding: 4px 10px 6px; font-size: .8rem; color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.ac-item { padding: 5px 10px; cursor: pointer; white-space: nowrap; }
.ac-item span { margin-left: 4px; } .ac-item small { color: var(--muted); margin-left: 8px; }
.ac-item.on { background: var(--ok-bg); }
.multi { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; }
.multi-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.multi-list { max-height: 280px; overflow: auto; columns: 3 230px; column-gap: 12px; }
.multi-list label { display: block; padding: 2px 4px; break-inside: avoid; border-radius: 4px; }
.multi-list label:has(input:checked) { background: var(--ok-bg); }
.flash-hit { outline: 2px solid var(--green); }
input.err { outline: 2px solid var(--bad); }

/* Tierkarte */
.tier-head { display: grid; grid-template-columns: 170px 1fr auto; gap: 18px; align-items: start; margin-bottom: 12px; }
.tier-foto img, .nofoto { width: 170px; height: 170px; object-fit: cover; border-radius: var(--radius); display: grid; place-items: center; background: var(--sand); color: var(--muted); text-decoration: none; text-align: center; font-size: .85rem; }
.tier-actions { display: flex; flex-wrap: wrap; gap: 6px; max-width: 360px; justify-content: flex-end; }
.big-loc { font-size: 1.05rem; font-weight: 600; }
@media (max-width: 800px) { .tier-head { grid-template-columns: 110px 1fr; } .tier-foto img, .nofoto { width: 110px; height: 110px; } .tier-actions { grid-column: 1 / -1; justify-content: flex-start; max-width: none; } }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px; position: sticky; top: 48px; background: var(--bg); padding: 6px 0; z-index: 5; }
.tabs a { padding: 4px 10px; border-radius: 99px; background: var(--sand); text-decoration: none; color: var(--ink); font-size: .85rem; }
.facts { display: grid; grid-template-columns: 170px 1fr; gap: 4px 12px; margin: 0; }
.facts dt { color: var(--muted); font-size: .88rem; } .facts dd { margin: 0; }
@media (max-width: 520px) { .facts { grid-template-columns: 1fr; } .facts dd { margin-bottom: 6px; } }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.gallery figure { margin: 0; } .gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; }
.gallery figcaption { font-size: .8rem; color: var(--muted); }
.traits { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 16px; }
.trait { display: grid; grid-template-columns: 1fr 90px 20px; gap: 8px; align-items: center; font-size: .9rem; }
.trait i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--green) calc(var(--v) / 9 * 100%), var(--sand) 0); }

/* Stammbaum */
.pedigree { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 6px; overflow-x: auto; margin-bottom: 10px; }
.ped-col { display: flex; flex-direction: column; justify-content: space-around; gap: 4px; }
.ped-cell { border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; background: var(--panel); font-size: .85rem; display: flex; flex-direction: column; min-height: 46px; justify-content: center; position: relative; }
.ped-cell.m { border-left: 4px solid var(--c2); } .ped-cell.w { border-left: 4px solid var(--c4); } .ped-cell.leer { opacity: .5; border-style: dashed; }
.ped-role { position: absolute; top: 2px; right: 6px; font-size: .7rem; color: var(--muted); }
.pedigree.g4 .ped-cell, .pedigree.g5 .ped-cell { min-height: 36px; padding: 2px 6px; font-size: .78rem; }

/* Diagramme */
.chart { width: 100%; height: auto; max-height: 280px; }
.chart .grid { stroke: var(--line); } .chart .hline { stroke: var(--bad); stroke-dasharray: 4 3; }
.chart .ax { fill: var(--muted); font-size: 11px; }
.chart .line { fill: none; stroke-width: 2.2; } .chart .dot { stroke: var(--panel); stroke-width: 1.5; }
.chart .s0, .chart .l1 { stroke: var(--c1); } .chart .s1, .chart .l2 { stroke: var(--c2); } .chart .s2, .chart .l3 { stroke: var(--c3); } .chart .s3, .chart .l4 { stroke: var(--c4); } .chart .l5 { stroke: var(--c5); } .chart .l0 { stroke: var(--c6); }
.chart .dot.s0, .chart .dot.l1 { fill: var(--c1); } .chart .dot.s1, .chart .dot.l2 { fill: var(--c2); } .chart .dot.s2, .chart .dot.l3 { fill: var(--c3); } .chart .dot.s3, .chart .dot.l4 { fill: var(--c4); } .chart .dot.l5 { fill: var(--c5); } .chart .dot.l0 { fill: var(--c6); }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: .82rem; color: var(--muted); }
.legend i { display: inline-block; width: 14px; height: 3px; margin-right: 5px; vertical-align: 3px; background: currentColor; }
.legend i.s0, .legend i.l1 { background: var(--c1); } .legend i.s1, .legend i.l2 { background: var(--c2); } .legend i.s2, .legend i.l3 { background: var(--c3); } .legend i.s3, .legend i.l4 { background: var(--c4); } .legend i.l5 { background: var(--c5); } .legend i.l0 { background: var(--c6); }
.bars { display: flex; gap: 6px; align-items: flex-end; height: 110px; margin: 6px 0 12px; }
.bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: .75rem; }
.bar span { width: 100%; max-width: 40px; background: var(--green-light); border-radius: 4px 4px 0 0; }
.bar small { color: var(--muted); white-space: nowrap; }

/* Matrix (Anpaarung) */
.matrix td, .matrix th { text-align: center; font-size: .82rem; padding: 4px; border: 1px solid var(--line); }
.matrix td.best { outline: 2px solid var(--green); }
.cell-ok { background: var(--ok-bg); } .cell-warn { background: var(--warn-bg); } .cell-bad { background: var(--bad-bg); }

/* Stallmodus */
.stall { max-width: 760px; }
.stall-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; margin-bottom: 10px; }
.stall-modes button { padding: 12px 6px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-size: .95rem; cursor: pointer; }
.stall-modes button.on { background: var(--green); color: #fff; border-color: var(--green); }
#st-form { display: flex; gap: 8px; margin-bottom: 8px; }
.scan-input { flex: 1; font-size: 1.3rem !important; padding: 14px !important; }
.stall-reader { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.stall-opts { margin-bottom: 10px; }
.st-top { display: grid; grid-template-columns: 120px 1fr; gap: 14px; }
.st-foto img, .st-foto .nofoto { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; font-size: 2rem; }
.st-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.st-actions .st-wiegen, .st-actions .st-notiz { display: inline-flex; gap: 4px; }
.scanlog { max-height: 260px; overflow: auto; padding-left: 22px; }

/* Anmeldung */
.login { min-height: calc(100vh - 80px); display: grid; place-items: center; padding: 16px; }
.login-box { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 30px; width: 100%; max-width: 380px; text-align: center; box-shadow: var(--shadow); }
.login-box form { text-align: left; display: grid; gap: 12px; margin-top: 12px; }
.login-logo { font-size: 3rem; }

/* Druck */
.print-only { display: none; }
@media print {
  .top, .side, .tabs, .no-print, .bulkbar, form, .actions, .tier-actions { display: none !important; }
  .main { margin: 0; padding: 0; max-width: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .card { box-shadow: none; border: 0; padding: 0; break-inside: avoid; }
  .print-only { display: block; }
  a { color: #000; text-decoration: none; }
}
.price-big { font-size: 1.2rem; } .price-big b { font: 700 1.6rem Georgia, serif; color: var(--green-dark); }
.tabs a.on { background: var(--green); color: #fff; }
.traits-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px 18px; margin: 10px 0 14px; }
.scale { display: flex; gap: 3px; }
.scale label { flex: 1; text-align: center; cursor: pointer; }
.scale input { position: absolute; opacity: 0; pointer-events: none; }
.scale b { display: block; padding: 6px 0; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font-weight: 600; }
.scale input:checked + b { background: var(--green); color: #fff; border-color: var(--green); }
.scale input:focus-visible + b { outline: 2px solid var(--green-light); }
.rasse-row { display: grid; grid-template-columns: 220px 1fr; gap: 8px; margin-bottom: 8px; }
.rasse-row textarea { font: 13px/1.4 ui-monospace, monospace; }
@media (max-width: 600px) { .rasse-row { grid-template-columns: 1fr; } }
.bar-h{display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--green) var(--w),var(--sand) 0)}

/* Öffentliche Startseite einer Rasse-Instanz: Anmeldung plus Rasseprofil */
.login-seite { display: block; max-width: 920px; margin: 0 auto; min-height: 0; }
.login-seite .login-box { margin: 24px auto; }
.rasse-info { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; margin: 0 auto 24px; box-shadow: var(--shadow); }
.rasse-info h2 { font-size: 1.15rem; margin: 22px 0 8px; }
.rasse-info h2:first-child { margin-top: 0; }
.rasse-info details { border-top: 1px solid var(--line); padding: 8px 0; }
.rasse-info summary { cursor: pointer; font-weight: 600; }
.beispiele { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.beispiel { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.beispiel ul { margin: 6px 0 0; padding-left: 18px; }
@media (max-width: 600px) { .rasse-info { padding: 16px; border-radius: 12px; } }
.steckbrief { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.steckbrief dt { font-weight: 600; } .steckbrief dd { margin: 0; }
@media (max-width: 600px) { .steckbrief { grid-template-columns: 1fr; } .steckbrief dd { margin-bottom: 6px; } }
.rasse-kopf { max-width: 920px; margin: 24px auto 0; padding: 0 4px; }
.rasse-kopf h1 { margin: 0 0 8px; font-size: clamp(1.5rem, 4vw, 2.1rem); }
.probier { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.probier form { margin: 0; }