/* Labor-Oberfläche: Facettenfilter links (einstellbar), Tabelle/Ashby-Diagramm mittig, Detailbereich rechts.
   Nutzt die Farb-Tokens aus stil.css; keine externen Schriften. Dichte, ruhige Darstellung. */
:root {
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --zeile-alt: #fdf9f5;
  --auswahl: #c2410c;
  --auf-auswahl: #fffdfa;
  --hover: rgba(194, 65, 12, .07);
  --panel-schatten: 0 12px 32px rgba(40, 30, 10, .16), 0 2px 6px rgba(40, 30, 10, .08);
  --c-holz: #a85a24; --c-stroh: #9a7410; --c-schaeben: #2f7d4e; --c-agrar: #6b5bbd;
  --c-faser: #1f7fa3; --c-papier: #6f6a60; --c-zusatz: #b44670; --c-sonstiges: #4a463f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --zeile-alt: #1e1712; --auswahl: #fb923c; --auf-auswahl: #19130f; --hover: rgba(251, 146, 60, .1);
    --panel-schatten: 0 12px 32px rgba(0, 0, 0, .5);
    --c-holz: #e08a4e; --c-stroh: #e2bc45; --c-schaeben: #5dbb82; --c-agrar: #a497ef;
    --c-faser: #4fb6dc; --c-papier: #b8b0a2; --c-zusatz: #ea7aa4; --c-sonstiges: #cfc8bb;
  }
}

main.voll { max-width: none; padding: 0; }
main.voll > .meldungen { margin: 12px 20px 0; }

.labor {
  display: grid; grid-template-columns: 264px minmax(0, 1fr) 392px;
  height: calc(100dvh - var(--kopf, 57px)); min-height: 560px; font-size: .875rem;
}
.labor.ohne-seite { grid-template-columns: 0 minmax(0, 1fr) 392px; }
.labor.ohne-insp { grid-template-columns: 264px minmax(0, 1fr) 0; }
.labor.ohne-seite.ohne-insp { grid-template-columns: 0 minmax(0, 1fr) 0; }
.labor.ohne-seite .l-seite, .labor.ohne-insp .l-insp { display: none; }
.labor button, .labor input, .labor select { font: inherit; color: inherit; }
.labor input[type=checkbox] { width: auto; accent-color: var(--akzent); margin: 0; }

/* Schaltflächen */
.l-btn {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linie); background: var(--flaeche);
  color: var(--text); border-radius: 7px; padding: .3rem .7rem; cursor: pointer; font-size: .82rem; font-weight: 500;
  text-decoration: none; white-space: nowrap;
}
.l-btn:hover { border-color: var(--text-2); filter: none; }
.l-btn.klein { padding: .15rem .5rem; font-size: .76rem; }
.l-btn[aria-expanded="true"] { background: var(--flaeche-2); }
.l-icon {
  display: inline-grid; place-items: center; width: 32px; height: 30px; border: 1px solid var(--linie); border-radius: 7px;
  background: var(--flaeche); color: var(--text-2); cursor: pointer; padding: 0;
}
.l-icon svg { width: 18px; height: 18px; }
.l-icon[aria-pressed="true"] { color: var(--akzent); background: var(--akzent-hell); border-color: transparent; }
.labor .l-btn, .labor .l-icon { box-shadow: none; }

/* Filterleiste */
.l-seite { border-right: 1px solid var(--linie); overflow-y: auto; background: var(--flaeche); position: relative; }
.f-kopf {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 10px; background: var(--flaeche); border-bottom: 1px solid var(--linie);
}
.f-kopf-t { font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); }
.f-leer { padding: 16px; color: var(--text-2); }
.f-gruppe { border-bottom: 1px solid var(--linie); }
.f-titel {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 0; background: transparent;
  cursor: pointer; text-align: left; font-weight: 600; font-size: .84rem;
}
.f-titel:hover { background: var(--hover); }
.f-titel .pfeil { margin-left: auto; color: var(--text-2); transition: transform .15s; font-size: .7rem; }
.f-titel[aria-expanded="false"] .pfeil { transform: rotate(-90deg); }
.f-badge { background: var(--akzent); color: var(--flaeche); border-radius: 999px; font-size: .68rem; padding: 0 .45rem; font-weight: 600; }
.f-koerper { padding: 0 10px 10px; }
.f-such { width: 100%; padding: .28rem .55rem; font-size: .8rem; margin: 0 0 6px; border-radius: 6px; }
.f-item {
  display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 6px; cursor: pointer; line-height: 1.3;
}
.f-item:hover { background: var(--hover); }
.f-item .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-item .n { color: var(--text-2); font-variant-numeric: tabular-nums; font-size: .75rem; }
.f-item .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.f-item.aus .lbl { color: var(--text-2); }
.f-mehr { border: 0; background: none; color: var(--akzent); cursor: pointer; padding: 4px 6px; font-size: .78rem; }
.f-mehr:hover { text-decoration: underline; }

/* Aufklapp-Panels (Filter anpassen, Spalten) */
.f-panel {
  position: absolute; z-index: 20; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px;
  box-shadow: var(--panel-schatten); padding: 12px; width: 300px; max-height: 70vh; overflow-y: auto;
}
#fPanel { left: 10px; top: 48px; width: 244px; }
.l-pop { position: relative; }
.f-panel.rechts { right: 0; top: calc(100% + 6px); width: 320px; }
.f-panel h4 { margin: 4px 0 6px; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); }
.f-panel h4:not(:first-child) { margin-top: 12px; }
.f-panel p { margin: 0 0 8px; color: var(--text-2); font-size: .78rem; }
.p-zeile { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 6px; }
.p-zeile:hover { background: var(--hover); }
.p-zeile label { flex: 1; display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0; }
.p-zeile label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-zeile .n { color: var(--text-2); font-size: .72rem; font-variant-numeric: tabular-nums; }
.p-zeile button { border: 0; background: none; cursor: pointer; color: var(--text-2); padding: 0 4px; font-size: .8rem; }
.p-zeile button:disabled { opacity: .25; cursor: default; }
.p-fuss { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linie); }

/* Inhalt */
.l-inhalt { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
.l-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 16px; border-bottom: 1px solid var(--linie); background: var(--flaeche); }
.l-titel { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex-wrap: wrap; }
.l-titel h1 { font: 600 1.15rem/1.2 var(--serif); margin: 0; }
.l-titel .status { color: var(--text-2); font-size: .8rem; font-variant-numeric: tabular-nums; }
.l-kopf .spacer { flex: 1; }
.seg { display: inline-flex; border: 1px solid var(--linie); border-radius: 7px; overflow: hidden; background: var(--flaeche); }
.seg button { border: 0; background: transparent; padding: .28rem .8rem; cursor: pointer; font-size: .82rem; color: var(--text-2); }
.seg button + button { border-left: 1px solid var(--linie); }
.seg button[aria-pressed="true"] { background: var(--akzent); color: var(--flaeche); }
.l-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--linie); background: var(--flaeche); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linie); background: var(--bg);
  border-radius: 999px; padding: .12rem .3rem .12rem .65rem; font-size: .78rem;
}
.chip .k { color: var(--text-2); }
.chip button { border: 0; background: none; cursor: pointer; color: var(--text-2); width: 18px; height: 18px; border-radius: 50%; padding: 0; line-height: 1; }
.chip button:hover { background: var(--flaeche-2); color: var(--text); }
.chips-reset { border: 0; background: none; color: var(--akzent); cursor: pointer; font-size: .78rem; padding: 2px 6px; }
.l-tb { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 8px 16px; color: var(--text-2); font-size: .8rem; border-bottom: 1px solid var(--linie); background: var(--flaeche); }
.l-tb label { display: inline-flex; align-items: center; gap: 6px; }
.l-tb select { width: auto; max-width: 300px; padding: .2rem .4rem; font-size: .8rem; }
.l-scroll { overflow: auto; min-height: 0; flex: 1; background: var(--flaeche); }

/* Tabelle */
.l-tab { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .8rem; border: 0; }
.l-tab thead th {
  position: sticky; top: 0; z-index: 2; background: var(--flaeche-2); text-align: left; font-weight: 600; color: var(--text);
  padding: 7px 10px; border-bottom: 1px solid var(--linie); white-space: nowrap; cursor: pointer; user-select: none;
  text-transform: none; letter-spacing: 0; font-size: .76rem; vertical-align: bottom;
}
.l-tab thead th.num { text-align: right; }
.l-tab thead th .u { display: block; font-weight: 400; color: var(--text-2); font-size: .7rem; }
.l-tab thead th[aria-sort] .ar::after { content: " ▲"; font-size: .55rem; color: var(--akzent); }
.l-tab thead th[aria-sort="descending"] .ar::after { content: " ▼"; }
.l-tab tbody td { padding: 5px 10px; white-space: nowrap; border-bottom: 1px solid var(--linie); background: var(--flaeche); }
.l-tab tbody tr:nth-child(even) td { background: var(--zeile-alt); }
.l-tab tbody tr:hover td { background: var(--akzent-hell); }
.l-tab tbody tr[aria-selected="true"] td { background: var(--auswahl); color: var(--auf-auswahl); }
.l-tab tbody tr[aria-selected="true"] td .sub { color: var(--auf-auswahl); opacity: .8; }
.l-tab th:first-child, .l-tab td:first-child { position: sticky; left: 0; z-index: 1; border-right: 1px solid var(--linie); }
.l-tab thead th:first-child { z-index: 3; }
.l-tab td.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .76rem; }
.l-tab td.na { color: color-mix(in srgb, var(--text-2) 55%, transparent); }
.l-tab tbody tr[aria-selected="true"] td.na { color: color-mix(in srgb, var(--auf-auswahl) 60%, transparent); }
.l-tab td.probe { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.l-tab td.kurz { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.l-tab td .sub { color: var(--text-2); font-size: .72rem; }
.l-tab td i { font-style: italic; }
.l-leer { padding: 48px 24px; text-align: center; color: var(--text-2); }
.l-leer button { margin-top: 10px; }

/* Diagramm */
.l-plot { padding: 12px 20px 4px; position: relative; }
.l-plot svg { width: 100%; height: auto; display: block; max-height: 64vh; }
.l-plot .gitter line { stroke: var(--linie); }
.l-plot .achse line { stroke: var(--text-2); stroke-opacity: .6; }
.l-plot .tick text { fill: var(--text-2); font: 11px var(--mono); }
.l-plot .atitel { fill: var(--text); font: 600 12.5px var(--serif); }
.l-plot .pt { cursor: pointer; stroke: var(--flaeche); stroke-width: 1.5; }
.l-plot .pt.sel { stroke: var(--text); stroke-width: 2.5; }
.l-plot .err { stroke-width: 1.2; opacity: .5; }
.l-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0 20px 6px; color: var(--text-2); font-size: .8rem; }
.l-legende span { display: inline-flex; align-items: center; gap: 6px; }
.l-legende i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.l-hinweis { color: var(--text-2); padding: 0 20px 16px; max-width: 80ch; font-size: .8rem; margin: 0; }
.l-tip {
  position: absolute; pointer-events: none; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px;
  padding: 8px 10px; box-shadow: var(--panel-schatten); max-width: 300px; font-size: .78rem; z-index: 5;
}
.l-tip b { display: block; }
.l-tip .mono { font-family: var(--mono); }

/* Detailbereich */
.l-insp { border-left: 1px solid var(--linie); overflow-y: auto; padding: 18px 22px 32px; background: var(--flaeche); min-width: 0; position: relative; }
.l-zu { position: absolute; right: 12px; top: 10px; border: 0; background: none; font-size: 1.3rem; line-height: 1; color: var(--text-2); cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.l-zu:hover { background: var(--flaeche-2); color: var(--text); }
.l-insp .eyebrow { font-size: .7rem; font-weight: 650; color: var(--ocker); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 6px; padding-right: 30px; }
.l-insp h2 { font: 600 1.25rem/1.25 var(--serif); margin: 0 0 6px; text-wrap: balance; padding-right: 20px; }
.l-insp h3 { font-size: .68rem; font-weight: 650; color: var(--text-2); text-transform: uppercase; letter-spacing: .08em; margin: 18px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--linie); }
.l-insp p { margin: 0 0 6px; }
.l-insp .leise { color: var(--text-2); }
.l-aktionen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.l-kv { display: grid; grid-template-columns: 120px 1fr; gap: 3px 10px; margin: 0; font-size: .82rem; }
.l-kv dt { color: var(--text-2); }
.l-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.l-mix { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--flaeche-2); margin: 2px 0 8px; }
.l-mix span { height: 100%; }
.l-mixliste { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: .82rem; }
.l-mixliste li { display: flex; gap: 10px; align-items: baseline; }
.l-mixliste .pct { font-family: var(--mono); color: var(--text-2); min-width: 56px; text-align: right; font-size: .75rem; }
.l-mtab { width: 100%; border-collapse: collapse; font-size: .8rem; border: 0; }
.l-mtab td { padding: 5px 0; border-top: 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.l-mtab td.v { text-align: right; font-family: var(--mono); white-space: nowrap; padding-left: 10px; font-size: .75rem; }
.l-mtab .meta { color: var(--text-2); font-size: .7rem; display: block; font-family: inherit; }
.l-zitat { font: .86rem/1.5 var(--serif); color: var(--text-2); }
.l-stat { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.l-stat div { background: var(--bg); border: 1px solid var(--linie); border-radius: 8px; padding: 9px 12px; }
.l-stat b { display: block; font: 600 1.45rem/1.1 var(--serif); color: var(--akzent); }
.l-stat span { color: var(--text-2); font-size: .78rem; }

@media (max-width: 1280px) {
  .labor, .labor.ohne-seite, .labor.ohne-insp { grid-template-columns: 240px minmax(0, 1fr) 0; }
  .labor.ohne-seite, .labor.ohne-seite.ohne-insp { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .l-insp { position: fixed; right: 0; top: var(--kopf, 57px); bottom: 0; width: min(400px, 92vw); z-index: 30; box-shadow: var(--panel-schatten); }
}
@media (max-width: 860px) {
  .labor, .labor.ohne-insp { grid-template-columns: minmax(0, 1fr); height: auto; }
  .l-seite { border-right: 0; border-bottom: 1px solid var(--linie); max-height: 60vh; }
  .l-inhalt { height: 75vh; }
  .l-insp { top: 0; width: 100vw; }
}

/* MycoShare: Rechtslinks in der Filterleiste, Status und Bewertungen */
.f-recht { margin: 0; padding: 14px; font-size: .75rem; color: var(--text-2); }
.f-recht a { color: var(--text-2); }
.l-tab .plak, .l-insp .plak { display: inline-block; font-size: .68rem; font-weight: 650; padding: 0 .45rem; border-radius: 999px; }
.plak.reviewed { background: var(--gruen-hell); color: var(--gruen); }
.plak.community { background: var(--akzent-hell); color: var(--ocker); }
.l-tab tbody tr[aria-selected="true"] .plak { background: var(--auf-auswahl); }
.fb { font-size: .72rem; font-weight: 650; margin-left: 4px; }
.fb.ja { color: var(--gruen); } .fb.nein { color: var(--rot); }
.l-tab tbody tr[aria-selected="true"] .fb { color: var(--auf-auswahl); }

/* Anklickbare Experimente und Rezept im Detailbereich */
.l-tab tbody tr { cursor: pointer; }
.l-tab td.probe a.zu { color: inherit; text-decoration: none; font-weight: 550; }
.l-tab td.probe a.zu:hover, .l-tab td.probe a.zu:focus-visible { color: var(--akzent); text-decoration: underline; }
.l-tab tbody tr[aria-selected="true"] td.probe a.zu { color: var(--auf-auswahl); }
.l-tip .tip-hilfe { display: block; margin-top: 4px; font-size: .68rem; opacity: .7; }
.l-rezept { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.l-rezept .schritt { padding: .45rem .6rem .5rem; font-size: .76rem; box-shadow: none; }
.l-rezept .schritt:not(:last-child)::after { right: auto; left: 1.05rem; top: auto; bottom: -13px; width: 2px; height: 10px; }
.l-rezept .schritt:not(:last-child)::before { right: auto; left: calc(1.05rem - 4px); top: auto; bottom: -16px; border: 5px solid transparent; border-top: 6px solid var(--text-2); border-bottom: 0; }
.l-rezept .schritt-kopf { margin-bottom: .2rem; }
.l-rezept h4 { margin: 0; font-size: .8rem; }
.l-rezept p { margin: 0; line-height: 1.4; }