is hidden, and each | 's
value is preceded by the `data-col` label set in `labelTrackedTableCells`.
The original print/desktop HTML stays untouched so PDF export and the
wider tabbed views are unaffected. */
.table-wrap { overflow-x: visible; }
.table-wrap table.ct,
.table-wrap table.bdt,
.table-wrap table.bt {
min-width: 0;
display: block;
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: inherit;
}
table.ct thead, table.bdt thead, table.bt thead { display: none; }
table.ct colgroup, table.bdt colgroup, table.bt colgroup { display: none; }
table.ct tbody, table.bdt tbody, table.bt tbody { display: block; }
table.ct tbody tr,
table.bdt tbody tr,
table.bt tbody tr {
display: block;
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--leaf);
border-radius: 3px;
padding: 10px 12px 12px;
margin: 0 0 10px;
box-shadow: 0 1px 2px rgba(42, 31, 18, 0.04);
}
table.ct tbody tr.gr,
table.bdt tbody tr.gr,
table.bt tbody tr.gr {
background: var(--soil);
color: white;
border: 0;
border-radius: 3px;
padding: 0;
margin: 18px 0 8px;
box-shadow: none;
}
table.ct tbody tr.gr td,
table.bdt tbody tr.gr td,
table.bt tbody tr.gr td {
display: block;
background: transparent;
color: inherit;
font-family: 'Overpass Mono', monospace;
font-size: 0.62rem;
letter-spacing: 0.09em;
text-transform: uppercase;
padding: 8px 12px;
border: 0;
}
table.bt tbody tr.sub,
table.bt tbody tr.tot {
background: var(--aged);
border-left: 3px solid var(--soil);
}
table.ct tbody tr:not(.gr) td,
table.bdt tbody tr:not(.gr) td,
table.bt tbody tr:not(.gr):not(.sub):not(.tot) td {
display: block;
padding: 6px 0;
border-bottom: 1px dotted var(--border);
background: transparent;
white-space: normal;
font-size: 0.86rem;
line-height: 1.5;
color: var(--ink);
}
table.ct tbody tr:not(.gr) td:last-child,
table.bdt tbody tr:not(.gr) td:last-child,
table.bt tbody tr:not(.gr) td:last-child { border-bottom: 0; padding-bottom: 0; }
/* The data-col label rendered as a small uppercase tag above each value. */
table.ct tbody td[data-col]::before,
table.bdt tbody td[data-col]::before,
table.bt tbody td[data-col]::before {
content: attr(data-col);
display: block;
font-family: 'Overpass Mono', monospace;
font-size: 0.56rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 3px;
}
/* First cell = card title. Lose the label prefix, beef up the typography,
and pin a divider below so the rest of the fields read as a body. */
table.ct tbody tr:not(.gr) td:first-child,
table.bdt tbody tr:not(.gr) td:first-child {
font-family: 'Fraunces', serif;
font-size: 1.05rem;
font-weight: 700;
color: var(--soil);
border-bottom: 1px solid var(--border);
padding: 2px 0 8px;
margin-bottom: 4px;
line-height: 1.2;
white-space: normal;
}
table.ct tbody tr:not(.gr) td:first-child::before,
table.bdt tbody tr:not(.gr) td:first-child::before { content: none; }
table.ct tbody tr:not(.gr) td:first-child strong,
table.bdt tbody tr:not(.gr) td:first-child strong { font-weight: inherit; }
/* The bedplan's second column (Maße) is a discrete subtitle on the card. */
table.bdt tbody tr:not(.gr) td:nth-child(2) {
font-family: 'Overpass Mono', monospace;
font-size: 0.66rem;
letter-spacing: 0.05em;
color: var(--muted);
margin-top: -6px;
padding-top: 0;
border-bottom: 1px dashed var(--border);
}
table.bdt tbody tr:not(.gr) td:nth-child(2)::before { content: none; }
/* Last cell = controls footer. The tracker decorators stuff the status
pill, date input, water button, profile button, and notes in here, so
give them breathing room and a clear top divider. */
table.ct tbody tr:not(.gr) td:last-child,
table.bdt tbody tr:not(.gr) td:last-child {
margin-top: 6px;
padding-top: 8px;
border-top: 1px solid var(--border);
}
table.ct tbody tr:not(.gr) td:last-child .gt-meta,
table.bdt tbody tr:not(.gr) td:last-child .gt-meta {
margin-top: 6px;
gap: 8px;
flex-wrap: wrap;
}
/* Sticky first column belongs to the table layout — disable it here. */
.table-wrap table.ct th:first-child,
.table-wrap table.ct td:first-child,
.table-wrap table.bdt th:first-child,
.table-wrap table.bdt td:first-child {
position: static;
box-shadow: none;
background: transparent;
}
/* Bedplan editor row: still a separate | , but in card mode it sits
directly under the bed card. Give it a softer surface so it visibly
belongs to the bed above. */
tr.gt-bed-editor-row { display: block; }
tr.gt-bed-editor-row > td {
display: block;
padding: 10px 12px;
background: #FAF6EB;
border: 1px solid var(--border);
border-left: 3px solid var(--leaf);
border-top: 0;
border-radius: 0 0 3px 3px;
margin: -10px 0 10px;
}
/* Shopping rows: same card vibe, but the last cell is the price/Link
bundle, not tracker controls — skip the divider. */
table.bt tbody tr:not(.gr):not(.sub):not(.tot) td:first-child {
font-family: 'Fraunces', serif;
font-size: 1rem;
font-weight: 700;
color: var(--soil);
border-bottom: 1px solid var(--border);
padding: 2px 0 8px;
margin-bottom: 4px;
}
table.bt tbody tr:not(.gr):not(.sub):not(.tot) td:first-child::before { content: none; }
}
/* ── Auth gating ───────────────────────────── */
/* Default: show landing, hide everything else */
.gated { display: none; }
.gt-bar { display: none; }
body.is-authed .gt-bar { display: flex; }
body.is-authed .gated { display: block; }
body.is-authed .landing { display: none; }
/* ── Public access: Beete + Kulturen tabs without login ── */
body.is-public .gated { display: block; }
body.is-public .gt-bar { display: flex; }
body.is-public .landing { display: none; }
/* Hide private nav tabs — only Beete and Kulturen are public */
body.is-public #gt-nav a[data-view="heute"],
body.is-public #gt-nav a[data-view="einkaeufe"],
body.is-public #gt-nav a[data-view="plan"] { display: none; }
/* Hide heute-tagged sections even in beete view (Bewässerung widget lives there) */
body.is-public [data-views~="heute"] { display: none !important; }
/* Tracker controls: read-only for public */
body.is-public .gt-meta { display: none !important; }
body.is-public .gt-bed-modal-status-sel { display: none !important; }
body.is-public .gt-bed-modal-edit { display: none !important; }
body.is-public .gt-bed-editor-toggle { display: none !important; }
body.is-public .gt-bed-editor-row { display: none !important; }
body.is-public .gt-notes-toggle { display: none !important; }
/* Field assistant stays visible for public — uses free tier only */
body.is-public #fa-bar-btn { display: inline-flex !important; }
body.is-public #fa-fab { display: flex !important; }
body.is-public .gt-crop-detail { display: none !important; }
/* Plan-2026 status chips need Supabase — hide for public */
body.is-public #gt-catalog-status-chips { display: none !important; }
/* API link in catalog: auth-only */
body.is-public .gt-catalog-api-link { display: none !important; }
/* Landing page */
.landing { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 12px; background: var(--paper); }
.landing-inner { max-width: 920px; width: 100%; text-align: center; }
.landing-eyebrow { font-family: 'Overpass Mono', monospace; font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.landing-title { font-family: 'Fraunces', serif; font-size: 3.6rem; font-weight: 900; color: var(--soil); line-height: 0.95; margin-bottom: 8px; }
.landing-sub { font-family: 'Fraunces', serif; font-size: 1rem; font-weight: 300; font-style: italic; color: var(--muted); margin-bottom: 28px; }
.landing-map { background: var(--surface); border: 1px solid var(--border); padding: 14px; margin-bottom: 28px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04); }
.landing-map svg { display: block; width: 100%; height: auto; max-height: 70vh; }
.landing-cta { border-top: 1px solid var(--border); padding-top: 22px; }
.landing-cta p { font-family: 'Overpass Mono', monospace; font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.landing-actions { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.gt-primary-btn { background: var(--soil); color: white; border: 2px solid var(--soil); font-family: 'Overpass Mono', monospace; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 12px 36px; cursor: pointer; border-radius: 2px; transition: opacity 0.15s; }
.gt-primary-btn:hover { opacity: 0.85; }
.gt-secondary-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--surface); color: var(--soil); border: 2px solid var(--border); font-family: 'Overpass Mono', monospace; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 12px 24px; text-decoration: none; border-radius: 2px; transition: background 0.15s, border-color 0.15s; }
.gt-secondary-btn:hover { background: var(--aged); border-color: var(--soil); }
/* ── Pflanzen-Katalog (Section 8.2) ─────────────────────────────────── */
.gt-catalog { margin: 0 0 16px; }
.gt-catalog-toolbar { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--leaf); padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 12px; }
.gt-catalog-search { display: inline-flex; flex: 1 1 240px; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--border); background: var(--paper); }
.gt-catalog-search > span { font-size: 0.95rem; color: var(--muted); line-height: 1; }
.gt-catalog-search input { flex: 1; border: 0; outline: none; background: transparent; font-family: 'Overpass', sans-serif; font-size: 0.82rem; color: var(--ink); padding: 4px 0; min-width: 0; }
.gt-catalog-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.gt-catalog-chip-label { font-family: 'Overpass Mono', monospace; font-size: 0.55rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.gt-catalog-chip { font-family: 'Overpass Mono', monospace; font-size: 0.6rem; letter-spacing: 0.04em; padding: 4px 9px; border: 1px solid var(--border); background: var(--surface); color: var(--soil); cursor: pointer; border-radius: 999px; user-select: none; }
.gt-catalog-chip:hover { border-color: var(--soil); }
.gt-catalog-chip[aria-pressed="true"] { background: var(--soil); color: white; border-color: var(--soil); }
.gt-catalog-clear { font-family: 'Overpass Mono', monospace; font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border: 1px solid var(--border); background: var(--surface); color: var(--soil); cursor: pointer; border-radius: 2px; }
.gt-catalog-clear:hover { border-color: var(--soil); background: var(--aged); }
.gt-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.gt-catalog-card { background: var(--surface); border: 1px solid var(--border); border-radius: 3px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.gt-catalog-card.gt-catalog-hidden { display: none; }
.gt-catalog-card-head { display: flex; flex-direction: column; gap: 4px; }
.gt-catalog-card-title strong { display: block; font-family: 'Fraunces', serif; font-size: 1rem; color: var(--soil); }
.gt-catalog-card-title em { display: block; font-family: 'Fraunces', serif; font-size: 0.75rem; font-style: italic; color: var(--muted); }
.gt-catalog-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.gt-catalog-badge { font-family: 'Overpass Mono', monospace; font-size: 0.55rem; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 999px; background: var(--aged); color: var(--soil); white-space: nowrap; }
.gt-catalog-badge.gt-badge-method { background: #E0EEF5; color: #1A4D7A; }
.gt-catalog-badge.gt-badge-net { background: #FAEAE0; color: var(--alert); }
.gt-catalog-badge.gt-badge-frost { background: #DEE9F4; color: #185FA5; }
.gt-catalog-badge.gt-badge-succ { background: #FFF1D0; color: #7A4500; }
.gt-catalog-badge.gt-badge-water[data-w="niedrig"] { background: #F5EDD0; color: #633806; }
.gt-catalog-badge.gt-badge-water[data-w="mittel"] { background: #E0EEF5; color: #1A4D7A; }
.gt-catalog-badge.gt-badge-water[data-w="hoch"] { background: #D6EAF3; color: #0C447C; }
/* Plan-Status badges (Tier 1A) */
.gt-catalog-badge.gt-badge-status { font-weight: 600; padding: 2px 8px; }
.gt-catalog-badge.gt-badge-status[data-s="aktiv"] { background: var(--hedge-bg); color: var(--good); }
.gt-catalog-badge.gt-badge-status[data-s="nicht-2026"] { background: var(--aged); color: var(--muted); }
.gt-catalog-badge.gt-badge-status[data-s="kein-eintrag"] { background: var(--paper); color: var(--muted); border: 1px dashed var(--border); }
[data-plant-card][data-status="nicht-2026"] { opacity: 0.78; }
[data-plant-card][data-status="nicht-2026"] .gt-catalog-card-title strong { color: var(--muted); }
/* Dominant 2026 variety highlight (Tier 2E) */
.gt-catalog-badge.gt-badge-dominant { background: var(--straw-bg); color: #7A4500; border: 1px solid var(--gold); }
.gt-cat-variety[data-dominant="1"] { background: var(--straw-bg); border-left: 3px solid var(--gold); padding-left: 8px; }
.gt-cat-variety-dom-tag { font-family: 'Overpass Mono', monospace; font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; color: #7A4500; background: var(--surface); padding: 1px 5px; border-radius: 999px; border: 1px solid var(--gold); }
/* Bed assignments line on catalog cards (Tier 1B) */
.gt-cat-beds { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-family: 'Overpass Mono', monospace; font-size: 0.6rem; color: var(--soil); padding: 4px 0 0; }
.gt-cat-beds-label { color: var(--muted); flex: 0 0 auto; }
.gt-cat-bed-pill { display: inline-block; padding: 1px 6px; background: var(--hedge-bg); color: var(--good); border-radius: 999px; cursor: pointer; font-weight: 600; }
.gt-cat-bed-pill:hover { background: var(--good); color: white; }
.gt-cat-beds-summary { color: var(--muted); font-style: italic; }
.gt-cat-beds-none { color: var(--muted); font-style: italic; }
/* Beetplan crop names → catalog link (Tier 2D) */
.gt-bed-plant-link { color: var(--leaf); cursor: pointer; border-bottom: 1px dotted var(--leaf-l); text-decoration: none; }
.gt-bed-plant-link:hover { color: var(--good); border-bottom-color: var(--good); }
/* Card scroll-flash highlight when arriving from Beetplan */
@keyframes gtCardFlash {
0% { box-shadow: 0 0 0 0 rgba(122, 178, 122, 0); background: var(--surface); }
20% { box-shadow: 0 0 0 4px var(--leaf-l); background: var(--hedge-bg); }
100% { box-shadow: 0 0 0 0 rgba(122, 178, 122, 0); background: var(--surface); }
}
.gt-catalog-card.gt-card-flash { animation: gtCardFlash 1.8s ease-out; }
.gt-catalog-summary { font-family: 'Overpass Mono', monospace; font-size: 0.65rem; line-height: 1.55; color: var(--muted); min-height: 1em; }
.gt-catalog-toggle { align-self: flex-start; font-family: 'Overpass Mono', monospace; font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border: 1px solid var(--border); background: var(--surface); color: var(--soil); cursor: pointer; border-radius: 2px; }
.gt-catalog-toggle:hover { border-color: var(--soil); background: var(--aged); }
.gt-catalog-body { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding-top: 8px; margin-top: 4px; border-top: 1px dotted var(--border); }
.gt-catalog-body[hidden] { display: none; }
.gt-catalog-field { display: flex; flex-direction: column; gap: 2px; font-family: 'Overpass Mono', monospace; font-size: 0.6rem; }
.gt-catalog-field-label { color: var(--muted); letter-spacing: 0.04em; }
.gt-catalog-field-value { font-family: 'Overpass', sans-serif; font-size: 0.72rem; color: var(--ink); padding: 3px 5px; min-height: 1.4em; word-break: break-word; }
/* Empty fields don't contribute information — hide the row so the body stays tidy */
.gt-catalog-field[data-empty="1"] { display: none; }
/* Textareas span the full card width when there's enough room. */
.gt-catalog-field[data-field="companions_good"],
.gt-catalog-field[data-field="companions_bad"],
.gt-catalog-field[data-field="crop_rotation"],
.gt-catalog-field[data-field="pests_risks"],
.gt-catalog-field[data-field="storage"],
.gt-catalog-field[data-field="market_tips"],
.gt-catalog-field[data-field="bzvr_notes"] { grid-column: 1 / -1; }
.gt-catalog-profile-section { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 7px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px dotted var(--border); }
.gt-catalog-profile-section:empty { display: none; }
.gt-catalog-info-row { display: grid; grid-template-columns: 7em 1fr; gap: 0 6px; font-family: 'Overpass Mono', monospace; font-size: 0.6rem; line-height: 1.5; }
.gt-catalog-info-label { color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.55rem; padding-top: 1px; white-space: nowrap; }
.gt-catalog-info-value { color: var(--ink); word-break: break-word; }
/* ── KW-Timeline (Aussaat + Ernte über das Jahr) ── */
.gt-cat-tl { display: flex; flex-direction: column; gap: 3px; padding: 6px 0 4px; }
.gt-cat-tl-axis { position: relative; height: 12px; margin-left: 3.2em; }
.gt-cat-tl-axis span { position: absolute; top: 0; transform: translateX(-50%); font-family: 'Overpass Mono', monospace; font-size: 0.5rem; color: var(--muted); letter-spacing: 0.04em; }
.gt-cat-tl-axis span::after { content: ''; position: absolute; left: 50%; bottom: -3px; width: 1px; height: 3px; background: var(--border); }
.gt-cat-tl-row { display: grid; grid-template-columns: 3em 1fr; gap: 0 6px; align-items: center; }
.gt-cat-tl-label { font-family: 'Overpass Mono', monospace; font-size: 0.55rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.gt-cat-tl-track { position: relative; height: 9px; background: var(--paper); border: 1px solid var(--border); border-radius: 2px; }
.gt-cat-tl-bar { position: absolute; top: 0; bottom: 0; border-radius: 1px; }
.gt-cat-tl-sow { background: var(--leaf-l); }
.gt-cat-tl-harvest { background: var(--straw); }
/* ── Cu-Warnbanner ── */
.gt-cat-risk-banner { display: flex; gap: 6px; align-items: flex-start; background: var(--rust-bg); border-left: 3px solid var(--alert); padding: 6px 8px; font-family: 'Overpass Mono', monospace; font-size: 0.62rem; line-height: 1.45; color: var(--rust); }
.gt-cat-risk-icon { font-size: 0.9rem; line-height: 1; flex: 0 0 auto; }
.gt-cat-risk-text { font-weight: 600; }
/* ── Abstandsdiagramm (visualisiert Reihen × Pflanzabstand) ── */
.gt-cat-spacing { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
.gt-cat-spacing-cap { font-family: 'Overpass Mono', monospace; font-size: 0.55rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.gt-cat-spacing-grid { display: flex; flex-direction: column; padding: 4px 0; }
.gt-cat-spacing-row { display: flex; align-items: center; }
.gt-cat-spacing-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--leaf-l); flex: 0 0 5px; }
/* ── Companion-Pills (gut grün / schlecht rot) ── */
.gt-cat-companions { display: flex; flex-direction: column; gap: 4px; }
.gt-cat-comp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.gt-cat-comp-label { font-family: 'Overpass Mono', monospace; font-size: 0.55rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-right: 4px; flex: 0 0 auto; }
.gt-cat-pill { font-family: 'Overpass Mono', monospace; font-size: 0.58rem; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.gt-cat-pill-good { background: var(--hedge-bg); color: var(--good); border: 1px solid color-mix(in srgb, var(--good) 30%, transparent); }
.gt-cat-pill-bad { background: var(--rust-bg); color: var(--rust); border: 1px solid color-mix(in srgb, var(--rust) 30%, transparent); }
/* ── Sorten-Block ── */
.gt-cat-varieties { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; border-top: 1px dotted var(--border); }
.gt-cat-varieties-heading { font-family: 'Overpass Mono', monospace; font-size: 0.55rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.gt-cat-variety { background: var(--aged); padding: 4px 7px; border-radius: 2px; display: flex; flex-direction: column; gap: 2px; }
.gt-cat-variety-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.gt-cat-variety-name { font-family: 'Fraunces', serif; font-size: 0.78rem; font-weight: 600; color: var(--soil); }
.gt-cat-variety-supplier { font-family: 'Overpass Mono', monospace; font-size: 0.52rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 1px 5px; background: var(--surface); border-radius: 999px; }
.gt-cat-variety-note { font-family: 'Overpass', sans-serif; font-style: italic; font-size: 0.65rem; line-height: 1.4; color: var(--muted); }
/* ── Marktgarten-Tipp ── */
.gt-cat-tip { display: flex; gap: 6px; align-items: flex-start; background: var(--straw-bg); border-left: 3px solid var(--gold); padding: 5px 8px; font-family: 'Overpass', sans-serif; font-style: italic; font-size: 0.66rem; line-height: 1.45; color: var(--soil); }
.gt-cat-tip-icon { flex: 0 0 auto; font-style: normal; }
@media print { .gt-catalog, .gt-catalog-toolbar { display: none; } }
/* Harvest row inside the Feldnotiz form */
.gt-obs-harvest { background: #FFF8E8; border-left: 3px solid #C8A030; padding: 6px 8px; }
/* "Bisher geerntet" line in the per-crop profile */
.gt-cp-harvest { background: #FFF8E8; border-left: 3px solid var(--good); padding: 6px 10px; }
.gt-cp-harvest strong { color: var(--soil); font-family: 'Overpass Mono', monospace; }
@media (max-width: 720px) {
.landing-title { font-size: 2.4rem; }
.landing-sub { font-size: 0.88rem; }
.landing-map { padding: 8px; }
}
/* ── Beetplan 7.1 toolbar + per-block colour stripe ─────────────────── */
.gt-bdt-toolbar { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--leaf); padding: 10px 12px; margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
.gt-bdt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gt-bdt-chip-row { gap: 5px; }
.gt-bdt-chip-label { font-family: 'Overpass Mono', monospace; font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
/* Block + status chips are read-only badges. Each chip is permanently tinted
in its block/status colour so the toolbar reads at a glance — no toggle
state, no clicks. */
.gt-bdt-chip { font-family: 'Overpass Mono', monospace; font-size: 0.6rem; letter-spacing: 0.04em; padding: 4px 9px; border: 1px solid transparent; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; user-select: none; color: white; }
.gt-bdt-chip-count { font-size: 0.6rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); color: inherit; min-width: 18px; text-align: center; }
.gt-bdt-chip[data-block="GH"] { background: #185FA5; }
.gt-bdt-chip[data-block="AW"] { background: #6E8E3A; }
.gt-bdt-chip[data-block="AO"] { background: #B9882C; }
.gt-bdt-chip[data-block="B"] { background: #4A6E10; }
.gt-bdt-chip[data-block="C"] { background: #BA7517; }
.gt-bdt-chip[data-status="leer"] { background: #FAF5EA; color: var(--muted); border-color: var(--border); }
.gt-bdt-chip[data-status="leer"] .gt-bdt-chip-count { background: rgba(122, 110, 80, 0.18); color: var(--muted); }
.gt-bdt-chip[data-status="vorbereitet"] { background: #F5EDD0; color: #633806; border-color: #C8A030; }
.gt-bdt-chip[data-status="vorbereitet"] .gt-bdt-chip-count { background: rgba(99, 56, 6, 0.16); color: #633806; }
.gt-bdt-chip[data-status="teilbepflanzt"] { background: #FAEEDA; color: #7A4500; border-color: #BA7517; }
.gt-bdt-chip[data-status="teilbepflanzt"] .gt-bdt-chip-count { background: rgba(122, 69, 0, 0.16); color: #7A4500; }
.gt-bdt-chip[data-status="bepflanzt"] { background: #E8F4E0; color: var(--good); border-color: #80C060; }
.gt-bdt-chip[data-status="bepflanzt"] .gt-bdt-chip-count { background: rgba(46, 110, 24, 0.18); color: var(--good); }
.gt-bdt-chip[data-status="abgeerntet"] { background: #E0EEF5; color: #1A4D7A; border-color: #5090C0; }
.gt-bdt-chip[data-status="abgeerntet"] .gt-bdt-chip-count { background: rgba(26, 77, 122, 0.16); color: #1A4D7A; }
.gt-bdt-chip[data-status="entfaellt"] { background: #ECEDEF; color: #4E545C; border-color: #8C929B; }
.gt-bdt-chip[data-status="entfaellt"] .gt-bdt-chip-count { background: rgba(78, 84, 92, 0.16); color: #4E545C; }
.gt-bdt-progress { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; border-top: 1px dotted var(--border); }
.gt-bdt-progress-item { flex: 1 1 130px; min-width: 110px; display: flex; flex-direction: column; gap: 3px; }
.gt-bdt-progress-head { display: flex; justify-content: space-between; align-items: baseline; font-family: 'Overpass Mono', monospace; font-size: 0.6rem; letter-spacing: 0.05em; color: var(--muted); }
.gt-bdt-progress-head strong { color: var(--soil); font-weight: 600; }
.gt-bdt-progress-bar { position: relative; height: 6px; background: var(--aged); border-radius: 3px; overflow: hidden; }
.gt-bdt-progress-fill { position: absolute; top: 0; left: 0; bottom: 0; background: var(--leaf); border-radius: 3px; transition: width 0.25s ease; }
.gt-bdt-progress-item[data-block="GH"] .gt-bdt-progress-fill { background: #185FA5; }
.gt-bdt-progress-item[data-block="AW"] .gt-bdt-progress-fill { background: #6E8E3A; }
.gt-bdt-progress-item[data-block="AO"] .gt-bdt-progress-fill { background: #B9882C; }
.gt-bdt-progress-item[data-block="B"] .gt-bdt-progress-fill { background: #4A6E10; }
.gt-bdt-progress-item[data-block="C"] .gt-bdt-progress-fill { background: #BA7517; }
/* Per-block colour stripe on bed rows (subtle, prints as a thin line). */
table.bdt tbody tr[data-bed-block="GH"] td:first-child { box-shadow: inset 3px 0 0 #185FA5; }
table.bdt tbody tr[data-bed-block="AW"] td:first-child { box-shadow: inset 3px 0 0 #6E8E3A; }
table.bdt tbody tr[data-bed-block="AO"] td:first-child { box-shadow: inset 3px 0 0 #B9882C; }
table.bdt tbody tr[data-bed-block="B"] td:first-child { box-shadow: inset 3px 0 0 #4A6E10; }
table.bdt tbody tr[data-bed-block="C"] td:first-child { box-shadow: inset 3px 0 0 #BA7517; }
/* Sticky bed-ID column on horizontal scroll (mobile + the wrapped table). */
.table-wrap { position: relative; }
.table-wrap table.bdt td:first-child,
.table-wrap table.bdt th:first-child { position: -webkit-sticky; position: sticky; left: 0; background: var(--surface); z-index: 2; }
.table-wrap table.bdt th:first-child { background: var(--soil); }
.table-wrap table.bdt tr:hover td:first-child { background: var(--surface-hover); }
.table-wrap table.bdt .gr td:first-child { background: var(--aged); }
/* ── Pflanzen-Steckbriefe live notes (Section 8.1) ───────────────────── */
.gt-plant-row .gt-notes { margin-top: 6px; }
.gt-plant-row .gt-notes-summary { color: var(--leaf); }
.gt-plant-row .gt-notes-summary.gt-notes-has { color: var(--soil); font-weight: 600; }
@media print { .gt-plant-row .gt-notes { display: none; } }
/* ── Tagesplan review / lessons-learned surface ─────────────────────── */
.gt-tagesplan-review { margin-top: 10px; padding-top: 10px; border-top: 1px dotted var(--border); }
.gt-tagesplan-review-label { display: block; font-family: 'Overpass Mono', monospace; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--alert); margin-bottom: 4px; }
.gt-tagesplan-review-body { font-family: 'Overpass Mono', monospace; font-size: 0.74rem; line-height: 1.6; white-space: pre-wrap; background: #FBF3E8; border: 1px solid #E8C880; border-left: 3px solid var(--caution); padding: 8px 12px; color: #4A3800; }
.gt-tagesplan-review-empty { font-family: 'Overpass Mono', monospace; font-size: 0.68rem; color: var(--muted); font-style: italic; padding: 4px 0; }
.gt-tagesplan-yesterday { margin-bottom: 10px; }
.gt-tagesplan-yesterday > summary { font-family: 'Overpass Mono', monospace; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--alert); cursor: pointer; padding: 4px 0; }
.gt-tagesplan-yesterday[open] > summary { color: var(--soil); }
.gt-tagesplan-yesterday .gt-tagesplan-review-body { margin-top: 4px; }
#gt-tagesplan-review-textarea { width: 100%; box-sizing: border-box; font-family: 'Overpass Mono', monospace; font-size: 0.74rem; line-height: 1.55; padding: 8px 10px; border: 1px solid var(--border); background: var(--paper); color: #4A3800; resize: vertical; margin-top: 6px; }
@media print {
.gt-bdt-toolbar { display: none !important; }
.gt-bar, .gt-check, .gt-login, .landing, .gt-nav, .gt-workspace, .gt-dashboard,
.gt-collapse-toggle,
.gt-status, .gt-date, .gt-price, .gt-price-plan,
.gt-heute, .gt-heute-konkret, .gt-export, .gt-admin, .gt-toasts, .gt-notes,
.gt-observations { display: none !important; }
.gt-collapse-body[hidden] { display: block !important; }
.gated { display: block !important; }
body { max-width: 100%; padding: 12px; }
.field-plan-frame { overflow: visible; padding: 8px; box-shadow: none; }
.field-plan-frame svg { min-width: 0; width: 100%; }
}
/* ════════════════════════════════════════════════════════════════════════════
DARK MODE — only [data-theme="dark"] on
JS sets this attribute on load (respects system preference + localStorage).
No @media needed here — JS handles the detection.
════════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
color-scheme: dark;
/* ── Base palette ─────────────────────────────────────────────── */
--ink: #DDD5BE;
--paper: #1B1810;
--paper-3: #211E14;
--aged: #2A261A;
--deep: #ECD8B0;
--soil: #C4A46C;
--soil-2: #A88850;
--leaf: #4EA82A;
--leaf-l: #6AC040;
--leaf-bg: #0C2008;
--water: #3C96BE;
--water-l: #54AECE;
--water-bg: #081C2C;
--straw: #C0A018;
--straw-bg: #221A06;
--rust: #C84C28;
--rust-bg: #260C06;
--good: #40B050;
--caution: #B89018;
--alert: #CC3010;
--hedge: #78B020;
--hedge-bg: #141E06;
--border: #3C3828;
--border-2: #302C1E;
--dotted: #4A4636;
--muted: #887E6A;
--muted-2: #6A6255;
--gold: #C89A0C;
/* ── Surfaces ─────────────────────────────────────────────────── */
--surface: #272318;
--surface-hover: #302C20;
/* ── Semantic states ──────────────────────────────────────────── */
--state-prio: #E05020;
--state-prio-bg: #260C06;
--state-due: #3C96BE;
--state-due-bg: #081C2C;
--state-ok: #6AC040;
--state-ok-bg: #0C2008;
--state-unknown: #C0A018;
--state-unknown-bg: #221A06;
--state-paused: #54AECE;
--state-paused-bg: #081828;
--state-idle: #887E6A;
--state-idle-bg: #2A261A;
/* ── Elevation ────────────────────────────────────────────────── */
--elev-card: 0 1px 4px rgba(0,0,0,0.4);
--elev-card-2: 0 2px 8px rgba(0,0,0,0.5);
--elev-popover: 0 6px 22px rgba(0,0,0,0.65);
}
/* ── Elements that don't use variables ──────────────────────────────────── */
/* nav gradient — hardcoded rgba paper colour */
[data-theme="dark"] .gt-nav {
background: linear-gradient(180deg, var(--paper) 0%, rgba(27,24,16,0.94) 80%, rgba(27,24,16,0));
}
/* tables: row hover */
[data-theme="dark"] table.bt tr:hover td,
[data-theme="dark"] table.bdt tr:hover td,
[data-theme="dark"] table.ct tr:hover td { background: var(--surface-hover); }
/* nav pills */
[data-theme="dark"] .gt-tabs a.is-active { background: var(--soil); color: var(--paper); border-color: var(--soil); }
[data-theme="dark"] .gt-tabs a.is-active:hover { background: var(--soil); color: var(--paper); }
[data-theme="dark"] .gt-nav a { background: rgba(42,38,26,0.85); color: var(--soil); }
[data-theme="dark"] .gt-nav a:hover { background: var(--aged); border-color: var(--soil); }
/* badge tags with hardcoded light bg */
[data-theme="dark"] .free { background: #102808; color: #6AC040; border-color: #2A5A14; }
[data-theme="dark"] .cheap { background: #241A06; color: #C0A018; border-color: #5A4A10; }
[data-theme="dark"] .buy { background: #081828; color: #3C96BE; border-color: #1A4060; }
[data-theme="dark"] .b-d { background: #221A06; color: #C0A018; border-color: #5A4810; }
[data-theme="dark"] .b-diy { background: #081828; color: #3C96BE; border-color: #184060; }
[data-theme="dark"] .b-f { background: #0C2008; color: #6AC040; border-color: #2A5A14; }
[data-theme="dark"] .b-t { background: #081828; color: #4A9ECC; border-color: #1A4870; }
[data-theme="dark"] .b-z { background: #082018; color: #30B090; border-color: #0E5040; }
[data-theme="dark"] .b-n { background: #200808; color: #E06040; border-color: #6A2810; }
[data-theme="dark"] .roi-return { background: #0C2008; color: #40B050; border-color: #2A5A14; }
/* Bewässerung valve panel */
[data-theme="dark"] .gt-bw-valve-panel { background: #141E0C; }
/* settings dialog */
[data-theme="dark"] .ha-cfg-dialog { background: #1F1C12; }
/* inputs / textareas */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
background: #2A261A;
color: var(--ink);
border-color: var(--border);
color-scheme: dark;
}
/* ── Dark mode toggle button ─────────────────────────────────────────────── */
.gt-dark-toggle {
background: none !important;
border: 1px solid rgba(255,255,255,0.25) !important;
color: white !important;
font-size: 0.85rem !important;
padding: 2px 7px !important;
cursor: pointer;
border-radius: 3px;
line-height: 1.3;
letter-spacing: 0 !important;
text-transform: none !important;
}
.gt-dark-toggle:hover { background: rgba(255,255,255,0.12) !important; }
/* ════════════════════════════════════════════════════════════════════════
UI REFRESH — 25/06/2026. Appended last so equal-specificity rules win by
source order. Uses design tokens only, so dark mode adapts automatically.
Stages: (1) buttons & readability · (2) spacing & cards · (3) state polish.
════════════════════════════════════════════════════════════════════════ */
/* ─── Stage 1 · Buttons & readability ──────────────────────────────────── */
/* Legible floor for the small mono "chip" buttons scattered across the app —
they were 0.55–0.6rem (hard to read on phones). Bump to 0.68rem and relax
the tracking so the uppercase labels stay clear. */
.gt-nav a,
.gt-collapse-toggle,
.gt-price-plan,
.gt-obs-preset,
.gt-obs-item-actions button,
.gt-obs-more,
.gt-obs-collapse,
.gt-brief-adopt,
.gt-bw-quick,
.gt-tagesplan-edit-btn,
.gt-admin-section button,
.gt-crop-profile-toggle,
.gt-bed-editor-reset,
.gt-catalog-clear,
.gt-catalog-toggle,
.gt-ct-dropped-toggle,
.gt-export button,
.gt-export a[data-export] {
font-size: 0.68rem;
letter-spacing: 0.05em;
}
/* Lift low-contrast grey button labels onto readable ink. */
.gt-price-plan,
.gt-obs-item-actions button,
.gt-admin-section button { color: var(--soil); }
/* Consistent control height + centred label/icon, comfortable to tap. */
.gt-collapse-toggle,
.gt-obs-preset,
.gt-brief-adopt,
.gt-bw-quick,
.gt-tagesplan-edit-btn,
.gt-price-plan,
.gt-crop-profile-toggle,
.gt-bed-editor-reset,
.gt-catalog-clear,
.gt-catalog-toggle,
.gt-ct-dropped-toggle,
.gt-export button,
.gt-export a[data-export] {
min-height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
}
/* Bigger tap targets on phones (44px is the platform guideline). */
@media (max-width: 720px) {
.gt-nav a,
.gt-collapse-toggle,
.gt-obs-preset,
.gt-brief-adopt,
.gt-bw-quick,
.gt-bw-btn,
.gt-bed-water-btn,
.gt-tagesplan-edit-btn,
.gt-export button,
.gt-export a[data-export] {
min-height: 42px;
}
}
/* Accessible focus ring on every interactive element (keyboard navigation). */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--water);
outline-offset: 2px;
border-radius: var(--r-xs);
}
/* ─── Stage 2 · Spacing & cards ────────────────────────────────────────── */
/* Put the stacked operational cards on one elevation + radius rhythm so the
Heute column reads as a coherent set rather than mismatched panels. */
.gt-tagesplan,
.gt-brief,
.gt-heute,
.gt-heute-konkret,
.gt-bewaesserung,
.gt-observations {
border-radius: var(--r-sm);
box-shadow: var(--elev-card);
}
/* Resting elevation + smooth lift on the dashboard metric cards (they already
define the hover transform; we only add the calm state + transition). */
.gt-card {
border-radius: var(--r-sm);
box-shadow: var(--elev-card);
transition: box-shadow 0.16s ease, transform 0.16s ease;
}
/* ─── Stage 3 · State & interaction polish ─────────────────────────────── */
/* One gentle, consistent hover for the chip buttons. */
.gt-collapse-toggle:hover,
.gt-obs-preset:hover,
.gt-crop-profile-toggle:hover,
.gt-catalog-toggle:hover,
.gt-catalog-clear:hover,
.gt-ct-dropped-toggle:hover,
.gt-bed-editor-reset:hover {
border-color: var(--soil);
background: var(--surface-hover);
}
/* Smooth colour/border transitions on interactive controls. */
button,
.gt-nav a,
.gt-export a[data-export],
summary {
transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}