/* Gang-Sheet-Builder — Etappe 1
   Farben aus dem Theme, damit die Flaeche nicht wie ein Fremdkoerper wirkt. */

.kd-gs {
	--gs-brand: var(--brand, #D51D43);
	--gs-brand-2: var(--brand-2, #FF6C8E);
	--gs-fg: var(--fg, #1b1c1f);
	--gs-muted: var(--muted, #5b5f6b);
	--gs-card-2: var(--card-2, #fff7f9);
	--gs-border: var(--border, #f0c8d2);
	--gs-ok: var(--ok, #15803d);
	--gs-warn: var(--warn, #b45309);
	--gs-fail: var(--fail, #b91c1c);

	display: flex;
	flex-direction: column;
	border: 1px solid var(--gs-border);
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	color: var(--gs-fg);
	font-size: 15px;
	line-height: 1.45;
	height: min(90vh, 1250px);
	min-height: 620px;
}

/* Muss nach den Layout-Regeln stehen: sonst gewinnt display:flex gegen [hidden]. */
.kd-gs [hidden] { display: none !important; }

/* ── Werkzeugleiste ─────────────────────────────────────────── */

.kd-gs-leiste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	padding: 10px 14px;
	background: var(--gs-card-2);
	border-bottom: 1px solid var(--gs-border);
}

.kd-gs-gruppe {
	display: flex;
	align-items: center;
	gap: 8px;
}

.kd-gs-rechts { margin-left: auto; }

.kd-gs-knopf {
	appearance: none;
	border: 1px solid var(--gs-border);
	background: #fff;
	color: var(--gs-fg);
	border-radius: 9px;
	padding: 7px 13px;
	font: inherit;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: background .12s, border-color .12s;
}

.kd-gs-knopf:hover { background: var(--gs-card-2); border-color: var(--gs-brand-2); }
.kd-gs-knopf:active { transform: translateY(1px); }

.kd-gs-primaer {
	background: var(--gs-brand);
	border-color: var(--gs-brand);
	color: #fff;
	font-weight: 600;
}
.kd-gs-primaer:hover { background: #bd1a3b; border-color: #bd1a3b; }

.kd-gs-zoomwert {
	min-width: 62px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	color: var(--gs-muted);
	font-size: 14px;
}

.kd-gs-schalter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--gs-muted);
	cursor: pointer;
}

.kd-gs-bogenmass {
	font-size: 14px;
	color: var(--gs-muted);
	font-variant-numeric: tabular-nums;
}

/* ── Buehne und Seitenleiste ────────────────────────────────── */

.kd-gs-koerper {
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
}

.kd-gs-buehne {
	position: relative;
	flex: 1 1 auto;
	background: #f4f5f7;
	overflow: hidden;
	touch-action: none;
}

.kd-gs-buehne canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.kd-gs-buehne.kd-gs-greift { cursor: grabbing; }
.kd-gs-buehne.kd-gs-greifbar { cursor: grab; }

.kd-gs-ablage {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(213, 29, 67, .07);
	border: 3px dashed var(--gs-brand);
	pointer-events: none;
}

.kd-gs-ablage-inner {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
	background: #fff;
	padding: 18px 26px;
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(0,0,0,.12);
}
.kd-gs-ablage-inner strong { color: var(--gs-brand); }
.kd-gs-ablage-inner span { color: var(--gs-muted); font-size: 14px; }

.kd-gs-leer {
	position: absolute;
	left: 50%;
	top: 46%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: center;
	text-align: center;
	pointer-events: none;
	max-width: 320px;
}
.kd-gs-leer strong { font-size: 17px; }
.kd-gs-leer span { color: var(--gs-muted); font-size: 14px; }
.kd-gs-leer-klein { font-size: 13px !important; opacity: .8; }

/* ── Seitenleiste ───────────────────────────────────────────── */

.kd-gs-seitenleiste {
	width: 290px;
	flex: 0 0 290px;
	border-left: 1px solid var(--gs-border);
	padding: 14px;
	overflow-y: auto;
	background: #fff;
}

.kd-gs-h {
	margin: 0 0 10px;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--gs-muted);
	font-weight: 700;
}

.kd-gs-hinweis-leer {
	color: var(--gs-muted);
	font-size: 14px;
	margin: 0;
}

.kd-gs-eintrag {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 8px;
	border: 1px solid var(--gs-border);
	border-radius: 10px;
	margin-bottom: 8px;
	cursor: pointer;
	background: #fff;
}
.kd-gs-eintrag:hover { background: var(--gs-card-2); }
.kd-gs-eintrag.kd-gs-aktiv {
	border-color: var(--gs-brand);
	box-shadow: 0 0 0 2px rgba(213,29,67,.14);
}

.kd-gs-mini {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	border-radius: 7px;
	background: #fff
		repeating-conic-gradient(#eceef1 0% 25%, #fff 0% 50%) 50% / 12px 12px;
	object-fit: contain;
	border: 1px solid #e6e8ec;
}

.kd-gs-eintrag-text {
	min-width: 0;
	flex: 1 1 auto;
}

.kd-gs-name {
	display: block;
	font-size: 13.5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kd-gs-mass {
	display: block;
	font-size: 12.5px;
	color: var(--gs-muted);
	font-variant-numeric: tabular-nums;
}

.kd-gs-ampel {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	border-radius: 999px;
	padding: 2px 8px;
	white-space: nowrap;
}
.kd-gs-ampel.ok   { background: #e7f6ec; color: var(--gs-ok); }
.kd-gs-ampel.warn { background: #fdf1e0; color: var(--gs-warn); }
.kd-gs-ampel.fail { background: #fdeaea; color: var(--gs-fail); }

.kd-gs-loeschen {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--gs-muted);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 2px 4px;
	border-radius: 6px;
}
.kd-gs-loeschen:hover { color: var(--gs-fail); background: #fdeaea; }

/* ── Eigenschaften ──────────────────────────────────────────── */

.kd-gs-eigenschaften {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--gs-border);
}

.kd-gs-felder {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px;
}

.kd-gs-felder label {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 12.5px;
	color: var(--gs-muted);
}

.kd-gs-einheit { opacity: .7; }

.kd-gs-felder input {
	width: 100%;
	padding: 6px 8px;
	border: 1px solid var(--gs-border);
	border-radius: 8px;
	font: inherit;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	color: var(--gs-fg);
	background: #fff;
}
.kd-gs-felder input:focus {
	outline: none;
	border-color: var(--gs-brand);
	box-shadow: 0 0 0 2px rgba(213,29,67,.14);
}

.kd-gs-befund {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.kd-gs-befund-block {
	border-left: 3px solid var(--gs-border);
	padding: 6px 0 6px 10px;
	font-size: 13px;
	color: var(--gs-muted);
}
.kd-gs-befund-block strong {
	display: block;
	font-size: 13.5px;
	color: var(--gs-fg);
	margin-bottom: 2px;
}
.kd-gs-befund-block.ok   { border-left-color: var(--gs-ok); }
.kd-gs-befund-block.warn { border-left-color: var(--gs-warn); }
.kd-gs-befund-block.fail { border-left-color: var(--gs-fail); }

/* ── Fussleiste ─────────────────────────────────────────────── */

.kd-gs-fuss {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px 14px;
	border-top: 1px solid var(--gs-border);
	background: var(--gs-card-2);
}

.kd-gs-status {
	flex: 1 1 auto;
	font-size: 13.5px;
	color: var(--gs-muted);
	min-height: 20px;
}

.kd-gs-preis {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-variant-numeric: tabular-nums;
}
.kd-gs-preis span { font-size: 13.5px; color: var(--gs-muted); }
.kd-gs-preis strong { font-size: 19px; color: var(--gs-brand); }

/* ── Etappe 2 ───────────────────────────────────────────────── */

.kd-gs-knopf[disabled] {
	opacity: .38;
	cursor: default;
	pointer-events: none;
}

#kd-gs-werkzeuge .kd-gs-knopf {
	min-width: 34px;
	padding: 6px 8px;
	font-size: 15px;
	line-height: 1.1;
}

.kd-gs-trenner {
	width: 1px;
	align-self: stretch;
	background: var(--gs-border);
	margin: 0 2px;
}

.kd-gs-sperrfeld {
	grid-column: 1 / -1;
	flex-direction: row !important;
	align-items: center;
}

.kd-gs-kette {
	display: inline-block;
	cursor: pointer;
	border: 1px solid var(--gs-border);
	border-radius: 8px;
	padding: 5px 10px;
	font-size: 13px;
	user-select: none;
	background: #fff;
}
.kd-gs-kette[data-an="1"] {
	border-color: var(--gs-brand);
	background: var(--gs-card-2);
	color: var(--gs-brand);
	font-weight: 600;
}

.kd-gs-sperrbalken {
	padding: 9px 14px;
	background: #fdeaea;
	border-top: 1px solid #f3c2c2;
	color: var(--gs-fail);
	font-size: 13.5px;
	font-weight: 600;
}

/* ── Zweite Werkzeugzeile, Auswahlfelder ────────────────────── */

.kd-gs-leiste-zwei {
	padding-top: 6px;
	padding-bottom: 6px;
	background: #fff;
}

.kd-gs-mini-wahl {
	font: inherit;
	font-size: 13px;
	padding: 3px 6px;
	border: 1px solid var(--gs-border);
	border-radius: 7px;
	background: #fff;
	color: var(--gs-fg);
}

/* ── Vollbild und eingeklappte Seitenleiste ─────────────────── */

.kd-gs.kd-gs-vollbild,
.kd-gs.kd-gs-gross {
	height: 100vh;
	max-height: 100vh;
	border-radius: 0;
	border: 0;
}

.kd-gs.kd-gs-gross {
	position: fixed;
	inset: 0;
	z-index: 9999;
}

.kd-gs.kd-gs-ohne-leiste .kd-gs-seitenleiste { display: none; }

/* ── Reiter ─────────────────────────────────────────────────── */

.kd-gs-reiter {
	display: flex;
	gap: 4px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--gs-border);
}

.kd-gs-reiter-knopf {
	appearance: none;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--gs-muted);
	padding: 7px 11px;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.kd-gs-reiter-knopf:hover { color: var(--gs-fg); }
.kd-gs-reiter-knopf.kd-gs-aktiv {
	color: var(--gs-brand);
	border-bottom-color: var(--gs-brand);
}

.kd-gs-tafel-text {
	font-size: 13px;
	color: var(--gs-muted);
	margin: 0 0 12px;
	line-height: 1.5;
}

/* ── Formenbibliothek ───────────────────────────────────────── */

.kd-gs-formen {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.kd-gs-form-knopf {
	appearance: none;
	border: 1px solid var(--gs-border);
	background: #fff;
	border-radius: 10px;
	padding: 9px 5px 6px;
	cursor: pointer;
	color: var(--gs-brand);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	transition: background .12s, border-color .12s;
}
.kd-gs-form-knopf:hover {
	background: var(--gs-card-2);
	border-color: var(--gs-brand);
}
.kd-gs-form-knopf svg {
	width: 34px;
	height: 34px;
	display: block;
}
.kd-gs-form-knopf span {
	font-size: 11px;
	color: var(--gs-muted);
	line-height: 1.2;
	text-align: center;
}

/* ── Farbpalette ────────────────────────────────────────────── */

.kd-gs-palette {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 10px;
}

.kd-gs-farbtupfer {
	appearance: none;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	border: 1px solid rgba(0,0,0,.18);
	cursor: pointer;
	padding: 0;
}
.kd-gs-farbtupfer:hover { transform: scale(1.12); }

.kd-gs-formstil,
.kd-gs-svgstil { margin-top: 14px; }

.kd-gs-eigenschaften {
	background: var(--gs-card-2);
	border: 1px solid var(--gs-border);
	border-radius: 12px;
	padding: 12px;
	margin: 0 0 14px;
}

.kd-gs-eigen-kopf {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}
.kd-gs-eigen-kopf .kd-gs-h {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
	text-transform: none;
	letter-spacing: 0;
	font-size: 14px;
	color: var(--gs-fg);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.kd-gs-eigen-knoepfe { display: flex; gap: 5px; flex: 0 0 auto; }
.kd-gs-eigen-knoepfe .kd-gs-knopf { padding: 4px 8px; font-size: 14px; }
.kd-gs-weg:hover { border-color: var(--gs-fail); color: var(--gs-fail); }

/* ── Ebenenbaum einer SVG ───────────────────────────────────── */

.kd-gs-svgbaum {
	border: 1px solid var(--gs-border);
	border-radius: 10px;
	overflow: hidden auto;
	max-height: 260px;
	background: #fff;
}

.kd-gs-svgzeile {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 4px 6px;
	border-bottom: 1px solid #f4f5f7;
	cursor: pointer;
	font-size: 13px;
}
.kd-gs-svgzeile:last-child { border-bottom: 0; }
.kd-gs-svgzeile:hover { background: var(--gs-card-2); }
.kd-gs-svgzeile.kd-gs-aktiv {
	background: #eef2ff;
	box-shadow: inset 2px 0 0 #1d4ed8;
}

.kd-gs-svg-name {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--gs-fg);
}

.kd-gs-svg-auge,
.kd-gs-svg-knopf {
	appearance: none;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-size: 12px;
	line-height: 1;
	padding: 3px 4px;
	border-radius: 5px;
	color: var(--gs-muted);
	flex: 0 0 auto;
}
.kd-gs-svg-auge:hover,
.kd-gs-svg-knopf:hover { background: #eceef1; color: var(--gs-fg); }
.kd-gs-svg-knopf.kd-gs-weg:hover { background: #fdeaea; color: var(--gs-fail); }

input.kd-gs-svg-farbe {
	width: 22px;
	height: 22px;
	padding: 1px;
	border: 1px solid rgba(0,0,0,.18);
	border-radius: 5px;
	background: #fff;
	cursor: pointer;
	flex: 0 0 auto;
}

span.kd-gs-svg-farbe.kd-gs-svg-ohne {
	width: 22px;
	height: 22px;
	border-radius: 5px;
	border: 1px dashed var(--gs-border);
	flex: 0 0 auto;
	background:
		linear-gradient(45deg, transparent 45%, #d7dae0 45%, #d7dae0 55%, transparent 55%);
}

.kd-gs-felder input[type="color"] {
	padding: 2px;
	height: 32px;
	cursor: pointer;
}

/* ── Texttafel ──────────────────────────────────────────────── */

.kd-gs-block {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12.5px;
	color: var(--gs-muted);
	margin-bottom: 10px;
}

.kd-gs-block textarea,
.kd-gs-block select,
.kd-gs-block input[type="range"] {
	width: 100%;
	font: inherit;
	font-size: 14px;
	color: var(--gs-fg);
	border: 1px solid var(--gs-border);
	border-radius: 8px;
	padding: 7px 9px;
	background: #fff;
	resize: vertical;
}
.kd-gs-block input[type="range"] { padding: 0; border: 0; }

.kd-gs-textstil { margin: 4px 0 12px; flex-wrap: wrap; }
.kd-gs-textstil .kd-gs-knopf.kd-gs-aktiv,
.kd-gs-textstil .kd-gs-knopf[data-an="1"] {
	border-color: var(--gs-brand);
	background: var(--gs-card-2);
	color: var(--gs-brand);
}

.kd-gs-breit { width: 100%; justify-content: center; }

/* ── Freistellen-Dialog ─────────────────────────────────────── */

.kd-gs-dialog {
	position: absolute;
	inset: 0;
	background: rgba(27, 28, 31, .55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 60;
	padding: 20px;
}

.kd-gs-dialog-kasten {
	background: #fff;
	border-radius: 14px;
	max-width: 900px;
	width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,.3);
}

.kd-gs-dialog-kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--gs-border);
	background: var(--gs-card-2);
}

.kd-gs-dialog-koerper {
	display: flex;
	gap: 16px;
	padding: 16px;
	overflow: auto;
	min-height: 0;
}

.kd-gs-frei-bild {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.kd-gs-frei-bild canvas {
	max-width: 100%;
	max-height: 52vh;
	object-fit: contain;
	align-self: center;
	border: 1px solid var(--gs-border);
	border-radius: 8px;
	cursor: crosshair;
	background: #fff
		repeating-conic-gradient(#eceef1 0% 25%, #fff 0% 50%) 50% / 18px 18px;
}

.kd-gs-frei-hilfe {
	font-size: 13px;
	color: var(--gs-muted);
	margin: 0;
	text-align: center;
}

.kd-gs-frei-steuer {
	width: 260px;
	flex: 0 0 260px;
}

.kd-gs-frei-farben {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 12px;
	min-height: 26px;
}

.kd-gs-dialog-fuss {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

/* ── Schmale Fenster ────────────────────────────────────────── */

@media (max-width: 900px) {
	.kd-gs-koerper { flex-direction: column; }
	.kd-gs-seitenleiste {
		width: auto;
		flex: 0 0 auto;
		border-left: 0;
		border-top: 1px solid var(--gs-border);
		max-height: 300px;
	}
	.kd-gs-buehne { min-height: 420px; }
}

/* ── Mehrfachauswahl ────────────────────────────────────────── */

.kd-gs-knopf.kd-gs-aktiv {
	border-color: var(--gs-brand);
	background: var(--gs-card-2);
	color: var(--gs-brand);
	font-weight: 600;
}

.kd-gs-eintrag.kd-gs-haupt {
	border-color: var(--gs-brand);
	box-shadow: 0 0 0 2px rgba(213,29,67,.14);
}

/* ── Entwürfe ───────────────────────────────────────────────── */

.kd-gs-dialog-kasten.kd-gs-schmal { max-width: 520px; }
.kd-gs-dialog-koerper.kd-gs-senkrecht { flex-direction: column; }

.kd-gs-linkfeld {
	width: 100%;
	font: inherit;
	font-size: 13px;
	padding: 8px 10px;
	border: 1px solid var(--gs-border);
	border-radius: 8px;
	background: var(--gs-card-2);
	color: var(--gs-fg);
}

.kd-gs-entwurfzeile {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--gs-border);
	border-radius: 10px;
	margin-bottom: 8px;
	padding: 4px 8px 4px 4px;
}
.kd-gs-entwurfzeile:hover { background: var(--gs-card-2); }

.kd-gs-entwurf-oeffnen {
	appearance: none;
	border: 0;
	background: transparent;
	text-align: left;
	flex: 1 1 auto;
	min-width: 0;
	cursor: pointer;
	padding: 7px 8px;
	font: inherit;
}
.kd-gs-entwurf-oeffnen strong {
	display: block;
	font-size: 14px;
	color: var(--gs-fg);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.kd-gs-entwurf-oeffnen span {
	display: block;
	font-size: 12.5px;
	color: var(--gs-muted);
}

/* ── Beschriftete Werkzeuggruppen ───────────────────────────── */

.kd-gs-mit-titel {
	position: relative;
	padding-top: 13px;
}
.kd-gs-mit-titel::before {
	content: attr(data-titel);
	position: absolute;
	top: 0;
	left: 1px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gs-muted);
	opacity: .75;
	pointer-events: none;
}

.kd-gs-hilfeknopf { font-weight: 600; }

/* ── Werkzeugübersicht ──────────────────────────────────────── */

.kd-gs-hilfe-h {
	margin: 16px 0 6px;
	color: var(--gs-brand);
}
.kd-gs-hilfe-h:first-child { margin-top: 0; }

dl.kd-gs-hilfe {
	margin: 0;
	display: grid;
	grid-template-columns: minmax(120px, 32%) 1fr;
	gap: 4px 14px;
	align-items: baseline;
}
dl.kd-gs-hilfe dt {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--gs-fg);
}
dl.kd-gs-hilfe dd {
	margin: 0;
	font-size: 13px;
	color: var(--gs-muted);
	line-height: 1.45;
}

@media (max-width: 620px) {
	dl.kd-gs-hilfe { grid-template-columns: 1fr; gap: 2px; }
	dl.kd-gs-hilfe dd { margin-bottom: 8px; }
}

/* ── Freistellen: Klickmodus ────────────────────────────────── */

.kd-gs-frei-modus {
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}
.kd-gs-frei-modus .kd-gs-knopf {
	padding: 6px 10px;
	font-size: 13px;
}

.kd-gs-frei-marke {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 9px;
	border-radius: 999px;
	background: var(--gs-card-2);
	border: 1px solid var(--gs-border);
	color: var(--gs-brand);
	font-size: 12px;
	font-weight: 700;
}

/* Beschriftete Werkzeugknöpfe: kompakter, damit die Zeile nicht ausufert */
#kd-gs-werkzeuge .kd-gs-knopf {
	min-width: 0;
	padding: 6px 9px;
	font-size: 13px;
}

.kd-gs-zerlegen {
	margin-bottom: 10px;
	font-size: 13px;
	border-color: var(--gs-brand);
	color: var(--gs-brand);
	font-weight: 600;
}

.kd-gs-bogenwahl {
	font-weight: 600;
	color: var(--gs-fg);
}
.kd-gs-bogenwahl .kd-gs-mini-wahl { font-weight: 400; }

.kd-gs-fest { cursor: default; }

/* ── Bestellen ──────────────────────────────────────────────── */

.kd-gs-menge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	color: var(--gs-muted);
	white-space: nowrap;
}
.kd-gs-menge input {
	width: 72px;
	padding: 6px 8px;
	border: 1px solid var(--gs-border);
	border-radius: 8px;
	font: inherit;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	text-align: right;
	background: #fff;
	color: var(--gs-fg);
}

.kd-gs-bestellen { white-space: nowrap; }
.kd-gs-bestellen[disabled] { opacity: .45; pointer-events: none; }


/* ── Schmale Bildschirme ────────────────────────────────────
   Auf dem Handy hat die umbrechende Werkzeugleiste 604 von 717
   Pixeln gefressen; Arbeitsflaeche und Fussleiste waren komplett
   weggeschnitten. Darum: Karte waechst mit, Werkzeuge wandern in
   eine wischbare Zeile, die Flaeche bekommt eine feste Hoehe. */

@media (max-width: 760px) {
	.kd-gs { height: auto; min-height: 0; }

	.kd-gs-leiste {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		gap: 14px;
		padding: 8px 10px;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}
	.kd-gs-gruppe { flex: 0 0 auto; flex-wrap: nowrap; gap: 6px; }
	.kd-gs-rechts { margin-left: 0; }
	.kd-gs-knopf { padding: 9px 11px; font-size: 13px; white-space: nowrap; }
	#kd-gs-werkzeuge .kd-gs-knopf { padding: 9px 10px; }
	.kd-gs-trenner { display: none; }
	.kd-gs-schalter { white-space: nowrap; }

	.kd-gs-koerper { flex-direction: column; }
	.kd-gs-buehne { height: 58vh; min-height: 320px; flex: 0 0 auto; }
	.kd-gs-seitenleiste { max-height: 44vh; }

	.kd-gs-fuss { flex-wrap: wrap; gap: 10px 14px; }
	.kd-gs-status { flex: 1 1 100%; order: -1; }
	.kd-gs-bestellen { flex: 1 1 auto; }

	/* Eingeklappt: nur die Werkzeuge, die man dauernd braucht. */
	.kd-gs:not(.kd-gs-offen) .kd-gs-leiste .kd-gs-knopf:not(.kd-gs-immer),
	.kd-gs:not(.kd-gs-offen) .kd-gs-leiste .kd-gs-zoomwert,
	.kd-gs:not(.kd-gs-offen) .kd-gs-leiste .kd-gs-bogenmass,
	.kd-gs:not(.kd-gs-offen) .kd-gs-leiste-zwei .kd-gs-schalter:not(.kd-gs-bogenwahl) { display: none; }
	.kd-gs:not(.kd-gs-offen) .kd-gs-mit-titel::before { display: none; }
	.kd-gs:not(.kd-gs-offen) .kd-gs-mit-titel { padding-top: 0; }
	.kd-gs-mehr { font-weight: 600; }

	/* Freistellen-Dialog: Bild ueber die Steuerung statt daneben.
	   Nebeneinander blieben vom Vorschaubild 27 von 375 Pixeln uebrig —
	   damit liess sich kein Hintergrund mehr anklicken. */
	.kd-gs-dialog { padding: 8px; }
	.kd-gs-dialog-koerper { flex-direction: column; gap: 12px; padding: 12px; }
	.kd-gs-frei-bild { order: -1; }
	.kd-gs-frei-steuer { width: auto; flex: 0 0 auto; }
	.kd-gs-frei-bild canvas { max-height: 42vh; min-height: 180px; }
	.kd-gs-frei-modus { flex-wrap: wrap; }
	.kd-gs-dialog-fuss .kd-gs-knopf { flex: 1 1 auto; }
	.kd-gs-dialog-kopf { padding: 10px 12px; }
}


/* Der Umschalter für die Werkzeugleiste betrifft nur schmale Schirme. */
.kd-gs-mehr { display: none; }
@media (max-width: 760px) { .kd-gs-mehr { display: inline-block; } }

/* ══════════════════════════════════════════════════════════════
   Der Builder braucht Breite.

   Er steht im normalen Inhaltscontainer (820 px). Bei dieser Breite
   umbricht die Werkzeugleiste in sechs Zeilen und frisst die Bühne auf:
   übrig blieben 197 px Zeichenfläche, der Einpass-Zoom landete bei 4 %,
   und ein Bogen von 420 × 1000 mm war noch 12 × 30 px gross. In dem
   Zustand skaliert ein Mausweg von zwei Pixeln ein Motiv um 70 mm —
   daher die Rechtecke mit 698 mm Breite ausserhalb des Bogens.

   Darum: auf grossen Schirmen aus dem Container ausbrechen, und in
   jedem Fall eine Mindesthöhe für die Bühne.
   ══════════════════════════════════════════════════════════════ */

/* Kein 100vw-Ausbruch mehr: 100vw zaehlt die Scrollleiste mit, darum
   ragte der Editor auf schmalen Fenstern links aus dem Bild und die
   Werkzeugleiste war angeschnitten. Der Editor bleibt jetzt in der
   normalen Seitenbreite — wer mehr Platz braucht, nimmt „Vollbild“.
   Dafuer eine deutlich hoehere Buehne, damit ein 420 × 1000er Bogen
   nicht auf Briefmarkengroesse zusammenfaellt. */
/* Der Textcontainer hat overflow-x: clip — ohne das hier wird der
   ausgebrochene Editor links und rechts einfach abgeschnitten,
   samt halber Werkzeugleiste. Die Klasse setzt gs.js. */
.kd-gs-eltern { overflow: visible; }

@media (min-width: 1100px) {
	/* --kd-vw setzt gs.js auf documentElement.clientWidth — anders als
	   100vw ist die Scrollleiste da nicht mitgezaehlt. Ohne JS bleibt es
	   bei 100%, also kein Ausbruch statt eines Ueberlaufs nach links. */
	.kd-gs {
		width: min(1600px, calc(var(--kd-vw, 100%) - 48px));
		max-width: none;
		margin-left: calc((100% - min(1600px, var(--kd-vw, 100%) - 48px)) / 2);
	}
}

@media (min-width: 901px) {
	.kd-gs-buehne { min-height: 560px; }
}

/* Innerhalb der Werkzeuggruppen umbrechen statt abschneiden.
   Bei knapp 1000 px ist eine Gruppe 1055 px breit — ohne Umbruch
   verschwinden Knöpfe wie „Direktauswahl" und „Spiegeln" am Rand. */
.kd-gs-gruppe { flex-wrap: wrap; }

/* Reihe anlegen: drei schmale Felder in der Werkzeugleiste */
.kd-gs-reihe{display:inline-flex;align-items:center;gap:6px}
.kd-gs-reihe label{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:#5b5f6b;margin:0}
.kd-gs-reihe input{width:52px;padding:5px 6px;font-size:12.5px;border:1px solid #d9dce3;border-radius:7px}