:root {
	--hintergrund: #f4f2ee;
	--flaeche: #ffffff;
	--flaeche-2: #f8f6f2;
	--rand: #ddd7cc;
	--text: #1f1d1a;
	--text-leise: #6b655b;
	--akzent: #e07a1f;
	--akzent-text: #ffffff;
	--akzent-hell: #fbe6d2;
	--warn-hg: #fff3dc;
	--warn-rand: #e9b44c;
	--kante: #9a9286;
	--kante-fluessig: #3d8fc4;
	/* Gebäudegruppen im Diagramm */
	--g-roh: #6d7a86;
	--g-schmelze: #d0632c;
	--g-konstr: #c9a227;
	--g-montage: #5c9e46;
	--g-fertiger: #2f8f8a;
	--g-raffinerie: #7a5bb8;
	--g-quanten: #c2457a;
	--g-ziel: #e07a1f;
	--g-rest: #9a9286;
	/* Item-Bilanz */
	--plus: #2e8540;
	--plus-hg: #e3f3e6;
	--minus: #c23b3b;
	--minus-hg: #fbe5e3;
	--b-erz: #2f8f8a;
	--b-verb: #e07a1f;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root {
		--hintergrund: #16181b;
		--flaeche: #1f2226;
		--flaeche-2: #262a2f;
		--rand: #363b42;
		--text: #e9e6e0;
		--text-leise: #9da3ab;
		--akzent: #f39a45;
		--akzent-text: #1b1206;
		--akzent-hell: #3a2a1a;
		--warn-hg: #3a2f17;
		--warn-rand: #a07a2a;
		--kante: #6f7680;
		--kante-fluessig: #5aa9de;
		--plus: #6cc77e;
		--plus-hg: #1d3323;
		--minus: #f07a72;
		--minus-hg: #3d1f1d;
		--b-erz: #45b5ae;
		--b-verb: #f39a45;
		color-scheme: dark;
	}
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--hintergrund);
	color: var(--text);
	font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--akzent); }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h2 { font-size: 1.05rem; margin-bottom: 0.75rem; }
h3 { font-size: 0.95rem; }

/* ---------- Kopf ---------- */
.kopf {
	position: sticky; top: 0; z-index: 10;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem;
	padding: 0.6rem 1rem;
	background: var(--flaeche);
	border-bottom: 1px solid var(--rand);
}
.marke { display: flex; align-items: center; gap: 0.6rem; }
.marke h1 { font-size: 1.1rem; }
.stand { margin: 0; font-size: 0.75rem; color: var(--text-leise); }
.reiter { display: flex; gap: 0.25rem; overflow-x: auto; max-width: 100%; }
.reiter button {
	border: 0; background: none; color: var(--text-leise);
	padding: 0.5rem 0.8rem; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.reiter button:hover { background: var(--flaeche-2); color: var(--text); }
.reiter button[aria-selected="true"] { background: var(--akzent-hell); color: var(--akzent); }
.zaehler:not(:empty) {
	display: inline-block; min-width: 1.4em; padding: 0 0.35em; margin-left: 0.2em;
	border-radius: 999px; background: var(--akzent); color: var(--akzent-text); font-size: 0.75em; text-align: center;
}

main { padding: 1rem; max-width: 1600px; margin: 0 auto; }
.raster { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 1rem; align-items: start; }
.raster-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.spalte-links { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 4.5rem; }
.spalte-rechts { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
@media (max-width: 900px) {
	.raster { grid-template-columns: minmax(0, 1fr); }
	.spalte-links { position: static; }
}

.karte {
	background: var(--flaeche);
	border: 1px solid var(--rand);
	border-radius: 10px;
	padding: 1rem;
	min-width: 0;
}
#phasen > .karte + .karte { margin-top: 1rem; }
.karten-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
.karten-kopf h2 { margin: 0; }
.werkzeuge { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary h2 { display: inline; }
details > summary::before { content: "▸ "; color: var(--text-leise); }
details[open] > summary::before { content: "▾ "; }
details[open] > summary { margin-bottom: 0.5rem; }

/* ---------- Formulare ---------- */
input, select, button { font: inherit; color: inherit; }
input[type="text"], input[type="number"], input[type="search"], select {
	background: var(--flaeche-2); border: 1px solid var(--rand); border-radius: 6px;
	padding: 0.4rem 0.5rem; min-width: 0; width: 100%;
}
input:focus, select:focus, button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
input.ungueltig { border-color: #d24b4b; }
.feld { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--text-leise); margin-bottom: 0.6rem; }
.feld > select, .feld > input, .feld > .mit-einheit { color: var(--text); font-size: 0.95rem; }
.feld.inline { flex-direction: row; align-items: center; gap: 0.5rem; margin: 0; }
.feld-check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; }
.mit-einheit { display: flex; align-items: center; gap: 0.35rem; }
.mit-einheit > span { color: var(--text-leise); font-size: 0.85rem; white-space: nowrap; }
.mit-einheit input { width: 7rem; }
.zeile-felder { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: end; margin-bottom: 0.5rem; }
.zeile-felder .feld { flex: 1 1 140px; }
.zeile-felder .feld-check { margin-bottom: 0.6rem; }
.ziel-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.4rem; align-items: center; margin-bottom: 0.5rem; }
.ziel-zeile .mit-einheit input { width: 5.5rem; }
.phase.rechnet { opacity: 0.6; min-height: 8rem; }

.knopf, .knopf-leicht, .knopf-icon {
	border-radius: 6px; cursor: pointer; padding: 0.4rem 0.75rem; border: 1px solid var(--rand); background: var(--flaeche-2);
}
.knopf { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); font-weight: 600; }
.knopf:hover { filter: brightness(1.05); }
.knopf-leicht:hover, .knopf-icon:hover { border-color: var(--akzent); }
.knopf-icon { width: 2rem; height: 2rem; padding: 0; line-height: 1; font-size: 1.1rem; }
.hinweis { font-size: 0.82rem; color: var(--text-leise); margin: 0.25rem 0 0.5rem; }
.leise { color: var(--text-leise); }

/* ---------- Ergebnis ---------- */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; }
.kennzahlen.klein { gap: 0.5rem; margin: 0.5rem 0; }
.kennzahl { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px; padding: 0.75rem 0.9rem; }
.kennzahlen.klein .kennzahl { background: var(--flaeche-2); padding: 0.55rem 0.7rem; border-radius: 8px; }
.k-titel { font-size: 0.78rem; color: var(--text-leise); }
.k-wert { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kennzahlen.klein .k-wert { font-size: 1.15rem; }
.k-unter { font-size: 0.78rem; color: var(--text-leise); }
.leer-hinweis { padding: 2rem; text-align: center; color: var(--text-leise); grid-column: 1 / -1; }
.spalte-rechts.leer > .karte { display: none; }
.warnung {
	background: var(--warn-hg); border: 1px solid var(--warn-rand); border-radius: 8px;
	padding: 0.55rem 0.75rem; font-size: 0.9rem; margin: 0.4rem 0;
}
#warnungen:empty { display: none; }
.liste { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.liste li { margin: 0.2rem 0; }
.kette h3 { margin: 0.75rem 0 0.3rem; font-size: 0.9rem; }
.kette ul { margin: 0; padding-left: 1.2rem; font-size: 0.9rem; }

.tabelle-rahmen { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
th, td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--rand); vertical-align: top; }
th { font-size: 0.78rem; color: var(--text-leise); font-weight: 600; white-space: nowrap; }
td { font-variant-numeric: tabular-nums; }
.mengen { display: flex; flex-direction: column; }
.marke-alt {
	display: inline-block; margin-left: 0.4em; padding: 0 0.35em; border-radius: 4px;
	background: var(--akzent-hell); color: var(--akzent); font-size: 0.7rem; font-weight: 700; vertical-align: middle;
}
.marke-alt.grau { background: var(--flaeche-2); color: var(--text-leise); }

/* ---------- Diagramm ---------- */
.diagramm {
	display: block; width: 100%; height: 520px;
	background: var(--flaeche-2); border: 1px solid var(--rand); border-radius: 8px;
	touch-action: none; cursor: grab; user-select: none;
}
.diagramm:active { cursor: grabbing; }
.knoten rect:first-child { fill: var(--flaeche); stroke: var(--rand); }
.knoten .streifen { fill: var(--g-roh); }
.knoten .titel { font-size: 13px; font-weight: 700; fill: var(--text); }
.knoten .zeile { font-size: 11.5px; fill: var(--text-leise); }
.knoten .altmarke { font-size: 10px; font-weight: 700; fill: var(--akzent); text-anchor: end; }
.k-roh .streifen { fill: var(--g-roh); }
.k-vorrat .streifen { fill: var(--g-roh); }
.k-ziel rect:first-child { stroke: var(--g-ziel); stroke-width: 2; }
.k-ziel .streifen { fill: var(--g-ziel); }
.k-rest rect:first-child { stroke-dasharray: 4 3; }
.k-rest .streifen { fill: var(--g-rest); }
.g-schmelze .streifen { fill: var(--g-schmelze); }
.g-konstr .streifen { fill: var(--g-konstr); }
.g-montage .streifen { fill: var(--g-montage); }
.g-fertiger .streifen { fill: var(--g-fertiger); }
.g-raffinerie .streifen { fill: var(--g-raffinerie); }
.g-quanten .streifen { fill: var(--g-quanten); }
.kante path { fill: none; stroke: var(--kante); stroke-width: 1.6; }
.kante.fluessig path { stroke: var(--kante-fluessig); stroke-dasharray: 6 3; }
.pfeilspitze { fill: var(--kante); }
.kantenlabel { fill: var(--flaeche); stroke: var(--rand); opacity: 0.95; }
.kl1 { font-size: 10.5px; font-weight: 600; fill: var(--text); text-anchor: middle; }
.kl2 { font-size: 10px; fill: var(--text-leise); text-anchor: middle; }
.kante:hover path { stroke: var(--akzent); stroke-width: 2.4; }

/* ---------- Phasen ---------- */
.phasen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0.75rem; }
.phase { background: var(--flaeche-2); border: 1px solid var(--rand); border-radius: 10px; padding: 0.85rem; display: flex; flex-direction: column; gap: 0.4rem; }
.phase .kennzahl { background: var(--flaeche); }
.phase-kopf { display: flex; flex-direction: column; gap: 0.1rem; }
.phase-kopf .hinweis { margin: 0; }
.teile { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }
.teile li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.15rem 0; border-bottom: 1px dashed var(--rand); }
.phase details { font-size: 0.88rem; }
.phase details summary { color: var(--akzent); margin-bottom: 0.3rem; }
.phase .knopf { margin-top: auto; }

/* ---------- Rezepte ---------- */
#rezept-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 0.75rem; }
.rezept-gruppe { border: 1px solid var(--rand); border-radius: 8px; padding: 0.6rem 0.75rem; background: var(--flaeche-2); }
.rezept-gruppe h3 { margin-bottom: 0.35rem; }
.rezept {
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 0.5rem; padding: 0.35rem 0;
	border-top: 1px solid var(--rand); cursor: pointer; font-size: 0.86rem;
}
.rezept input { grid-row: span 3; margin-top: 0.2rem; accent-color: var(--akzent); }
.r-name { font-weight: 600; }
.r-geb { color: var(--text-leise); font-size: 0.78rem; }
.r-formel { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; color: var(--text-leise); }
.r-formel .mengen { display: inline-flex; flex-direction: row; flex-wrap: wrap; gap: 0 0.5rem; color: var(--text); }

.fuss { padding: 1.5rem 1rem 2rem; text-align: center; font-size: 0.78rem; color: var(--text-leise); }
#r-suche { width: 16rem; max-width: 100%; }

/* ---------- Bauplan ---------- */
.k-verteiler rect:first-child { fill: var(--flaeche-2); stroke: var(--akzent); stroke-dasharray: 3 2; }
.k-verteiler .streifen { fill: var(--akzent); }
.k-kraftwerk rect:first-child { stroke: #e0c030; stroke-width: 2; }
.k-kraftwerk .streifen { fill: #e0c030; }
.knoten .maschine { fill: var(--akzent); opacity: 0.8; }
.knopf-leicht.feld-check { display: inline-flex; font-size: inherit; }
.diagramm.klein { height: 360px; }

/* ---------- Karte ---------- */
.raster-karte { grid-template-columns: 300px minmax(0, 1fr); }
@media (max-width: 900px) { .raster-karte { grid-template-columns: minmax(0, 1fr); } }
.karte-rahmen { display: flex; flex-direction: column; }
.karte-flaeche { position: relative; }
#karte-canvas {
	display: block; width: 100%; height: min(78vh, 900px); min-height: 360px;
	border: 1px solid var(--rand); border-radius: 8px; touch-action: none; cursor: grab;
}
#karte-canvas:active { cursor: grabbing; }
.karte-tipp {
	position: absolute; pointer-events: none; white-space: pre-line; z-index: 2;
	background: var(--flaeche); border: 1px solid var(--rand); border-radius: 6px;
	padding: 0.35rem 0.55rem; font-size: 0.82rem; box-shadow: 0 2px 8px rgba(0,0,0,0.25); max-width: 260px;
}
.filter h3 { margin: 0.8rem 0 0.3rem; font-size: 0.85rem; color: var(--text-leise); }
.filter h3:first-child { margin-top: 0; }
.filter-zeile { display: flex; align-items: center; gap: 0.45rem; font-size: 0.88rem; padding: 0.12rem 0; cursor: pointer; }
.filter-zeile .punkt { width: 0.8rem; height: 0.8rem; border-radius: 50%; flex: none; border: 2px solid transparent; }
.filter-zeile .strich { width: 0.9rem; height: 0.25rem; border-radius: 2px; flex: none; outline: 1px solid rgba(0,0,0,0.5); }
.filter-zeile .flaeche { width: 0.8rem; height: 0.8rem; border-radius: 2px; flex: none; opacity: 0.8; }
.filter-zeile .anz { margin-left: auto; color: var(--text-leise); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.reinheiten { display: flex; gap: 0.25rem; margin-left: auto; }
.reinheiten label { display: inline-flex; align-items: center; gap: 0.15rem; font-size: 0.75rem; color: var(--text-leise); }
.filter-knoepfe { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.filter-knoepfe button { font-size: 0.78rem; padding: 0.2rem 0.5rem; }

/* ---------- Spielstand ---------- */
.ablage {
	display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center;
	border: 2px dashed var(--rand); border-radius: 10px; padding: 1.5rem 1rem; cursor: pointer;
}
.ablage.drueber, .ablage:hover { border-color: var(--akzent); }
.ablage input { position: absolute; width: 1px; height: 1px; opacity: 0; }
#save-ergebnis { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
progress { accent-color: var(--akzent); width: 12rem; }
.netto-plus { color: var(--plus); }
.netto-minus { color: var(--minus); }

/* Item-Bilanz */
.segmente { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.75rem; }
.segmente.klein { margin: 0; gap: 0; border: 1px solid var(--rand); border-radius: 7px; overflow: hidden; }
.segment {
	display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer;
	padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid var(--rand); background: var(--flaeche-2); color: var(--text-leise); font-weight: 600;
}
.segmente.klein .segment { border: 0; border-radius: 0; padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.segment:hover { color: var(--text); border-color: var(--akzent); }
.segment[aria-pressed="true"] { background: var(--akzent-hell); border-color: var(--akzent); color: var(--akzent); }
.segment.s-minus[aria-pressed="true"] { background: var(--minus-hg); border-color: var(--minus); color: var(--minus); }
.segment.s-plus[aria-pressed="true"] { background: var(--plus-hg); border-color: var(--plus); color: var(--plus); }
.segment-zahl { font-variant-numeric: tabular-nums; font-size: 0.78rem; padding: 0 0.45em; border-radius: 999px; background: var(--flaeche); min-width: 1.6em; text-align: center; }
.b-label { font-size: 0.82rem; }
.b-werkzeuge { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin-bottom: 0.4rem; }
.b-suche { flex: 1 1 220px; }
.b-werkzeuge .feld.inline { font-size: 0.85rem; }
.b-werkzeuge select { width: auto; }
.b-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; }
.b-sicht { margin-right: auto; }
.b-leg { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--text-leise); }
.b-punkt { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 2px; flex: none; margin-right: 0.3rem; }
.b-punkt.b-erz, .b-spur .b-erz { background: var(--b-erz); }
.b-punkt.b-verb, .b-spur .b-verb { background: var(--b-verb); }
.b-liste { display: flex; flex-direction: column; border: 1px solid var(--rand); border-radius: 8px; overflow: hidden; margin-top: 0.4rem; }
.b-zeile { border-top: 1px solid var(--rand); border-left: 4px solid transparent; }
.b-zeile:first-child { border-top: 0; }
.b-zeile.b-minus { border-left-color: var(--minus); }
.b-zeile.b-plus { border-left-color: var(--plus); }
.b-zeile.b-null { border-left-color: var(--rand); }
.b-zeile > summary {
	display: grid; grid-template-columns: minmax(170px, 1.3fr) minmax(90px, 1fr) 8.5rem 8rem; gap: 0.4rem 1rem; align-items: center;
	padding: 0.5rem 0.75rem; margin: 0;
}
details.b-zeile > summary::before { content: none; }
details[open].b-zeile > summary { margin: 0; background: var(--flaeche-2); }
.b-zeile > summary:hover { background: var(--flaeche-2); }
.b-item { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.b-item > span { display: flex; flex-direction: column; min-width: 0; }
.b-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-unter { font-size: 0.75rem; color: var(--text-leise); }
.b-balken { display: flex; flex-direction: column; gap: 3px; }
.b-spur { display: block; height: 7px; border-radius: 4px; background: var(--flaeche-2); overflow: hidden; }
.b-zeile[open] .b-spur { background: var(--flaeche); }
.b-spur > span { display: block; height: 100%; border-radius: 4px; }
.b-zahlen { display: flex; flex-direction: column; font-size: 0.8rem; color: var(--text-leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-zahlen > span { display: inline-flex; align-items: center; }
.b-saldo {
	justify-self: end; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
	padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--flaeche-2); color: var(--text-leise); font-size: 0.9rem;
}
.b-minus .b-saldo { background: var(--minus-hg); color: var(--minus); }
.b-plus .b-saldo { background: var(--plus-hg); color: var(--plus); }
.b-details { padding: 0.25rem 0.75rem 0.85rem 2.6rem; background: var(--flaeche-2); }
.b-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0.5rem 1.5rem; margin-bottom: 0.5rem; }
.b-quellen h3 { font-size: 0.8rem; color: var(--text-leise); margin: 0.4rem 0 0.25rem; }
.b-quellen ul { list-style: none; margin: 0; padding: 0; font-size: 0.86rem; }
.b-quellen li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; padding: 0.2rem 0; border-bottom: 1px dashed var(--rand); }
.b-anz, .b-menge { font-variant-numeric: tabular-nums; }
.b-anz { color: var(--text-leise); text-align: right; }
.b-menge { white-space: nowrap; }
.b-details .werkzeuge .hinweis { margin: 0; }
.b-karte > .knopf-leicht { margin-top: 0.25rem; }
@media (max-width: 640px) {
	.b-zeile > summary { grid-template-columns: minmax(0, 1fr) auto; padding: 0.55rem 0.6rem; }
	.b-balken { grid-column: 1 / -1; grid-row: 2; }
	.b-zahlen { grid-column: 1 / -1; grid-row: 3; flex-direction: row; gap: 1rem; }
	.b-saldo { grid-column: 2; grid-row: 1; }
	.b-details { padding-left: 0.75rem; }
	.b-werkzeuge .feld.inline { flex: 1 1 100%; }
	.b-werkzeuge select { flex: 1; }
}

/* ---------- Icons ---------- */
.ic { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; flex: none; }
.ic.gross { width: 28px; height: 28px; }
.mit-icon { display: inline-flex; align-items: center; gap: 0.35rem; }
.mengen .mit-icon .ic { width: 16px; height: 16px; }
.filter-zeile .ic { width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,0.25); }
.ziel-zeile { grid-template-columns: 28px minmax(0, 1fr) auto auto; }
.ziel-icon { display: flex; width: 28px; height: 28px; }
.rezept-gruppe h3 { gap: 0.5rem; }
.rezept.gesperrt .r-name, .rezept.gesperrt .r-formel { opacity: 0.55; }

/* ---------- Item-Vorschläge ---------- */
.combo { position: relative; min-width: 0; }
.vorschlaege {
	position: absolute; z-index: 30; top: calc(100% + 4px); left: 0;
	width: max(100%, 17rem); max-width: calc(100vw - 2rem); max-height: min(20rem, 50vh); overflow-y: auto;
	margin: 0; padding: 0.25rem; list-style: none;
	background: var(--flaeche); border: 1px solid var(--rand); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.18);
	-webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.vorschlaege li {
	display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.5rem; border-radius: 6px; cursor: pointer;
	min-height: 2.5rem;
}
.vorschlaege li:hover, .vorschlaege li[aria-selected="true"] { background: var(--akzent-hell); }
.vorschlaege li.v-leer { cursor: default; color: var(--text-leise); font-size: 0.88rem; }
.vorschlaege li.v-leer:hover { background: none; }
.v-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.v-name { font-size: 0.92rem; color: var(--text); }
.v-en { font-size: 0.75rem; color: var(--text-leise); }
.v-name mark { background: none; color: var(--akzent); font-weight: 700; }
/* iPhone zoomt bei Eingabefeldern unter 16 px hinein */
@media (pointer: coarse) {
	input[type="text"], input[type="number"], input[type="search"], select { font-size: 16px; }
}