/* ==========================================================================
   yldx — Design-System
   ==========================================================================

   Gestaltungsidee: „Feldkarte“. Die Anwendung ist ein Werkzeug für Flächen,
   also übernimmt die Oberfläche deren Sprache — Parzellen, Raster,
   Höhenlinien, Erdtöne. Kein Software-Look, sondern das Gefühl einer
   sauber gezeichneten Betriebskarte.

   Drei Träger:
   · Fraunces  — Serif mit optischer Achse, trägt Marke und Überschriften.
                 Warm und gewachsen, ohne nostalgisch zu werden.
   · Archivo   — präzise Grotesk für alles Funktionale.
   · JetBrains Mono — ausschließlich für Messwerte. Zahlen, die man
                 vergleicht, gehören in gleiche Spaltenbreiten.

   Farbe: Lehm und Sand als Grund, tiefes Waldgrün als Handlungsfarbe,
   Weizengold als einziger Akzent. Sparsam eingesetzt — die Karte selbst
   ist das farbigste Element der Seite und darf nicht überstimmt werden.
   ========================================================================== */

/* ------------------------------------------------------------- Tokens --- */
:root,
:root[data-theme="terra"] {
	/* Grundflächen */
	--bg:            #f6f3ea;
	--bg-sunk:       #efeade;
	--surface:       #fffdf8;
	--surface-2:     #f9f6ee;
	--surface-hover: #f3efe3;

	/* Schrift */
	--ink:           #1b2118;
	--ink-2:         #4a5344;
	--ink-3:         #7d8677;

	/* Handlung */
	--green:         #2f5233;
	--green-hover:   #24401f;
	--green-soft:    #e4ece0;
	--green-line:    rgba(47, 82, 51, .18);

	/* Akzent */
	--gold:          #b8862f;
	--gold-soft:     #f6edda;

	/* Signale */
	--ok:            #3f7d3f;
	--warn:          #b07d1c;
	--error:         #a33528;
	--error-soft:    #f8e9e6;

	/* Linien */
	--line:          #e0d9c8;
	--line-strong:   #cec5b0;

	--shadow-sm: 0 1px 2px rgba(27, 33, 24, .06);
	--shadow:    0 2px 8px rgba(27, 33, 24, .07), 0 1px 2px rgba(27, 33, 24, .04);
	--shadow-lg: 0 8px 28px rgba(27, 33, 24, .10);

	color-scheme: light;
}

/* Nachtacker — für Innenräume und späte Auswertung */
:root[data-theme="nacht"] {
	--bg:            #12160f;
	--bg-sunk:       #0d100b;
	--surface:       #1a2016;
	--surface-2:     #212819;
	--surface-hover: #28301f;

	--ink:           #e9ece3;
	--ink-2:         #adb5a4;
	--ink-3:         #79826f;

	--green:         #8fb46a;
	--green-hover:   #a3c67e;
	--green-soft:    #23301b;
	--green-line:    rgba(143, 180, 106, .22);

	--gold:          #d6a548;
	--gold-soft:     #2e2718;

	--ok:            #7fb069;
	--warn:          #d6a548;
	--error:         #dc7a6a;
	--error-soft:    #2e1c19;

	--line:          #2b3324;
	--line-strong:   #3c4633;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
	--shadow:    0 2px 10px rgba(0, 0, 0, .35);
	--shadow-lg: 0 10px 32px rgba(0, 0, 0, .45);

	color-scheme: dark;
}

/* Papier — maximaler Kontrast für den Einsatz bei Sonne */
:root[data-theme="papier"] {
	--bg:            #ffffff;
	--bg-sunk:       #f4f4f2;
	--surface:       #ffffff;
	--surface-2:     #fafaf8;
	--surface-hover: #f0f0ed;

	--ink:           #101210;
	--ink-2:         #3a3d38;
	--ink-3:         #6b6f68;

	--green:         #1f4021;
	--green-hover:   #142c15;
	--green-soft:    #e8efe6;
	--green-line:    rgba(31, 64, 33, .25);

	--gold:          #8a6416;
	--gold-soft:     #f5efe0;

	--ok:            #256b25;
	--warn:          #8a6416;
	--error:         #8c2a1e;
	--error-soft:    #f9eae7;

	--line:          #d9d9d4;
	--line-strong:   #b8b8b1;

	color-scheme: light;
}

:root {
	--font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
	--font-ui:      'Archivo', system-ui, -apple-system, sans-serif;
	--font-num:     'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

	--r-sm: 4px;
	--r:    8px;
	--r-lg: 14px;
	--r-xl: 20px;

	--sidebar-w: 244px;
	--header-h:  60px;

	/* Zonenskala: sequenziell von wenig zu viel Biomasse. Bewusst nicht
	   Rot–Grün allein, sondern über Sand geführt — auch bei Rotblindheit
	   bleibt die Helligkeitsstufung lesbar. */
	--zone-1: #a8452f;
	--zone-2: #c97b3c;
	--zone-3: #d9b155;
	--zone-4: #a4b061;
	--zone-5: #6a9450;
	--zone-6: #3c6b3f;
	--zone-h: #8d8b82;   /* Vorgewende */
}

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

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

body {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink);
	background: var(--bg);
	/* Feines Raster wie auf Millimeterpapier — nur zu ahnen, gibt der
	   Fläche Textur ohne vom Inhalt abzulenken. */
	background-image:
		linear-gradient(var(--line) 1px, transparent 1px),
		linear-gradient(90deg, var(--line) 1px, transparent 1px);
	background-size: 88px 88px, 88px 88px;
	background-position: -1px -1px;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	font-optical-sizing: auto;
	letter-spacing: -.015em;
	line-height: 1.2;
	margin: 0 0 .5rem;
	color: var(--ink);
}
h1 { font-size: 1.9rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; font-family: var(--font-ui); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 .75rem; }
a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 2px; }

.num    { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.muted  { color: var(--ink-3); }
.small  { font-size: .85rem; }
.tiny   { font-size: .76rem; }

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

.sidebar {
	width: var(--sidebar-w);
	flex: 0 0 var(--sidebar-w);
	background: var(--surface);
	border-right: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
	z-index: 40;
}

.brand {
	display: flex; align-items: center; gap: .6rem;
	padding: 1.1rem 1.25rem 1rem;
	text-decoration: none; color: var(--ink);
	border-bottom: 1px solid var(--line);
}
.brand-mark {
	width: 30px; height: 30px; flex: 0 0 30px;
	border-radius: 7px; background: var(--green);
	display: grid; place-items: center;
}
.brand-name {
	font-family: var(--font-display);
	font-size: 1.32rem; font-weight: 700; letter-spacing: -.03em;
}
.brand-sub { font-size: .7rem; color: var(--ink-3); letter-spacing: .09em; text-transform: uppercase; }

.nav { padding: .85rem .7rem; flex: 1; overflow-y: auto; }
.nav-label {
	font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
	color: var(--ink-3); padding: .5rem .55rem .3rem; font-weight: 600;
}
.nav-item {
	display: flex; align-items: center; gap: .65rem;
	padding: .52rem .55rem; border-radius: var(--r);
	color: var(--ink-2); text-decoration: none;
	font-size: .93rem; font-weight: 500;
	transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--surface-hover); color: var(--ink); }
.nav-item[aria-current="page"] {
	background: var(--green-soft); color: var(--green); font-weight: 600;
}
.nav-item[aria-current="page"] .ico { opacity: 1; }
.nav-item .ico { width: 18px; height: 18px; flex: 0 0 18px; opacity: .75; }
.nav-count {
	margin-left: auto; font-family: var(--font-num); font-size: .75rem;
	color: var(--ink-3); background: var(--bg-sunk);
	padding: .05rem .38rem; border-radius: 99px;
}

.sidebar-foot { padding: .8rem; border-top: 1px solid var(--line); }
.user-chip {
	display: flex; align-items: center; gap: .55rem;
	padding: .4rem .5rem; border-radius: var(--r); width: 100%;
	background: none; border: none; cursor: pointer; text-align: left;
	color: var(--ink-2); font-family: inherit; font-size: .86rem;
}
.user-chip:hover { background: var(--surface-hover); }
.avatar {
	width: 27px; height: 27px; flex: 0 0 27px; border-radius: 50%;
	background: var(--gold-soft); color: var(--gold);
	display: grid; place-items: center;
	font-weight: 700; font-size: .78rem;
}

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

.topbar {
	height: var(--header-h);
	display: flex; align-items: center; gap: 1rem;
	padding: 0 1.6rem;
	border-bottom: 1px solid var(--line);
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	backdrop-filter: blur(8px);
	position: sticky; top: 0; z-index: 30;
}
.topbar h1 { font-size: 1.22rem; margin: 0; }
.topbar-actions { margin-left: auto; display: flex; gap: .5rem; align-items: center; }

.content { padding: 1.6rem; flex: 1; }
.content-narrow { max-width: 880px; margin: 0 auto; }

/* --------------------------------------------------------------- Karten - */
.panel {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
}
.panel-head {
	display: flex; align-items: center; gap: .75rem;
	padding: .95rem 1.1rem;
	border-bottom: 1px solid var(--line);
}
.panel-head h2, .panel-head h3 { margin: 0; }
.panel-head .spacer { margin-left: auto; }
.panel-body { padding: 1.1rem; }
.panel-body.flush { padding: 0; }

.grid { display: grid; gap: 1.1rem; }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* Kennzahl */
.metric { padding: .95rem 1.1rem; }
.metric-value {
	font-family: var(--font-num); font-size: 1.62rem; font-weight: 500;
	letter-spacing: -.02em; color: var(--ink); line-height: 1.1;
}
.metric-value .unit { font-size: .78rem; color: var(--ink-3); margin-left: .2rem; }
.metric-label {
	font-size: .76rem; letter-spacing: .07em; text-transform: uppercase;
	color: var(--ink-3); margin-top: .3rem; font-weight: 600;
}

/* ------------------------------------------------------------ Buttons --- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
	font-family: var(--font-ui); font-size: .9rem; font-weight: 600;
	padding: .55rem 1rem; border-radius: var(--r);
	border: 1px solid transparent; cursor: pointer;
	background: var(--green); color: #fff; text-decoration: none;
	transition: background .12s, border-color .12s, transform .08s;
	white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--green-hover); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-secondary {
	background: var(--surface); color: var(--ink); border-color: var(--line-strong);
}
.btn-secondary:hover:not(:disabled) { background: var(--surface-hover); }

.btn-quiet { background: transparent; color: var(--ink-2); }
.btn-quiet:hover:not(:disabled) { background: var(--surface-hover); color: var(--ink); }

.btn-danger { background: var(--error); }
.btn-danger:hover:not(:disabled) { filter: brightness(.92); }

.btn-sm { padding: .32rem .65rem; font-size: .82rem; }
.btn-lg { padding: .72rem 1.4rem; font-size: .98rem; }
.btn-icon { padding: .4rem; width: 32px; height: 32px; }

/* ----------------------------------------------------------- Formulare -- */
.field { margin-bottom: 1.05rem; }
.field > label, .label {
	display: block; font-size: .84rem; font-weight: 600;
	color: var(--ink-2); margin-bottom: .3rem;
}
.hint { font-size: .8rem; color: var(--ink-3); margin-top: .3rem; }

input[type=text], input[type=email], input[type=password],
input[type=number], select, textarea {
	width: 100%; padding: .55rem .7rem;
	font-family: var(--font-ui); font-size: .93rem;
	color: var(--ink); background: var(--surface);
	border: 1px solid var(--line-strong); border-radius: var(--r);
	transition: border-color .12s, box-shadow .12s;
}
input[type=number] { font-family: var(--font-num); }
input:focus, select:focus, textarea:focus {
	outline: none; border-color: var(--green);
	box-shadow: 0 0 0 3px var(--green-line);
}
input:disabled, select:disabled { background: var(--bg-sunk); color: var(--ink-3); }

.input-suffix { position: relative; }
.input-suffix .suffix {
	position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
	font-size: .82rem; color: var(--ink-3); pointer-events: none;
}
.input-suffix input { padding-right: 4.2rem; }

/* Auswahl in Kachelform statt Radiobuttons */
.choice-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.choice {
	text-align: left; padding: .8rem .9rem;
	background: var(--surface); border: 1.5px solid var(--line);
	border-radius: var(--r); cursor: pointer;
	font-family: inherit; color: var(--ink);
	transition: border-color .12s, background .12s;
}
.choice:hover { border-color: var(--line-strong); background: var(--surface-hover); }
.choice[aria-pressed="true"] {
	border-color: var(--green); background: var(--green-soft);
}
.choice-title { font-weight: 600; font-size: .93rem; display: block; }
.choice-desc  { font-size: .8rem; color: var(--ink-3); margin-top: .15rem; display: block; }

.switch-row {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: .7rem 0; border-bottom: 1px solid var(--line);
}
.switch-row:last-child { border-bottom: none; }
.switch { position: relative; width: 40px; height: 23px; flex: 0 0 40px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span {
	position: absolute; inset: 0; cursor: pointer;
	background: var(--line-strong); border-radius: 99px; transition: background .15s;
}
.switch span::before {
	content: ""; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px;
	background: #fff; border-radius: 50%; transition: transform .15s;
	box-shadow: var(--shadow-sm);
}
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::before { transform: translateX(17px); }

/* -------------------------------------------------------------- Ablauf -- */
.steps { display: flex; gap: 0; margin-bottom: 1.4rem; }
.step {
	flex: 1; display: flex; align-items: center; gap: .5rem;
	padding: .6rem .3rem; border-top: 3px solid var(--line);
	font-size: .85rem; color: var(--ink-3);
}
.step-num {
	width: 21px; height: 21px; flex: 0 0 21px; border-radius: 50%;
	background: var(--bg-sunk); color: var(--ink-3);
	display: grid; place-items: center;
	font-size: .72rem; font-weight: 700; font-family: var(--font-num);
}
.step[data-state="active"] { border-top-color: var(--green); color: var(--ink); font-weight: 600; }
.step[data-state="active"] .step-num { background: var(--green); color: #fff; }
.step[data-state="done"] { border-top-color: var(--green); color: var(--ink-2); }
.step[data-state="done"] .step-num { background: var(--green-soft); color: var(--green); }

/* ------------------------------------------------------------- Tabelle -- */
table { width: 100%; border-collapse: collapse; font-size: .89rem; }
thead th {
	text-align: left; font-weight: 600; font-size: .76rem;
	letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
	padding: .6rem 1.1rem; border-bottom: 1px solid var(--line);
	background: var(--surface-2);
}
tbody td { padding: .68rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- Status -- */
.tag {
	display: inline-flex; align-items: center; gap: .3rem;
	font-size: .76rem; font-weight: 600; padding: .16rem .55rem;
	border-radius: 99px; background: var(--bg-sunk); color: var(--ink-2);
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag-ok      { background: var(--green-soft); color: var(--ok); }
.tag-run     { background: var(--gold-soft);  color: var(--gold); }
.tag-error   { background: var(--error-soft); color: var(--error); }
.tag-neutral { background: var(--bg-sunk);    color: var(--ink-3); }

.note {
	padding: .8rem 1rem; border-radius: var(--r);
	border: 1px solid var(--line); background: var(--surface-2);
	font-size: .88rem; display: flex; gap: .6rem; align-items: flex-start;
}
.note-error { border-color: var(--error); background: var(--error-soft); color: var(--error); }
.note-ok    { border-color: var(--ok);    background: var(--green-soft); color: var(--ok); }
.note-info  { border-color: var(--green-line); background: var(--green-soft); color: var(--ink-2); }

.progress { height: 6px; border-radius: 99px; background: var(--bg-sunk); overflow: hidden; }
.progress > span {
	display: block; height: 100%; background: var(--green);
	transition: width .4s ease; border-radius: 99px;
}

/* --------------------------------------------------------------- Karte -- */
.map { width: 100%; border-radius: var(--r-lg); background: var(--bg-sunk); }
.map-lg { height: min(62vh, 620px); }
.map-sm { height: 260px; }
.leaflet-container { font-family: var(--font-ui); border-radius: var(--r-lg); }
.leaflet-popup-content-wrapper { border-radius: var(--r); }

.legend { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; font-size: .82rem; }
.legend-item { display: flex; align-items: center; gap: .35rem; color: var(--ink-2); }
.legend-swatch { width: 13px; height: 13px; border-radius: 3px; border: 1px solid rgba(0,0,0,.12); }

/* ------------------------------------------------------------- Leerlauf - */
.empty { text-align: center; padding: 2.6rem 1.2rem; color: var(--ink-3); }
.empty-title { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink-2); margin-bottom: .3rem; }

.spinner {
	width: 15px; height: 15px; display: inline-block;
	border: 2px solid var(--line-strong); border-top-color: var(--green);
	border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
	background: linear-gradient(90deg, var(--bg-sunk) 25%, var(--surface-hover) 50%, var(--bg-sunk) 75%);
	background-size: 200% 100%; animation: shimmer 1.4s infinite;
	border-radius: var(--r-sm);
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* Einblenden beim Laden — einmalig und gestaffelt, nicht überall. */
.rise { animation: rise .45s cubic-bezier(.2, .7, .3, 1) backwards; }
.rise:nth-child(2) { animation-delay: .05s; }
.rise:nth-child(3) { animation-delay: .1s; }
.rise:nth-child(4) { animation-delay: .15s; }
@keyframes rise { from { opacity: 0; transform: translateY(7px); } }

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

.hidden { display: none !important; }

/* ---------------------------------------------------------------- Klein - */
@media (max-width: 900px) {
	.sidebar {
		position: fixed; left: 0; top: 0; transform: translateX(-100%);
		transition: transform .2s; box-shadow: var(--shadow-lg);
	}
	.sidebar[data-open="true"] { transform: none; }
	.content { padding: 1rem; }
	.topbar { padding: 0 1rem; }
	.map-lg { height: 46vh; }
}
.nav-toggle { display: none; }
@media (max-width: 900px) { .nav-toggle { display: inline-flex; } }