/* Terrassenplaner: Editor. Alle Selektoren beginnen mit .tp, damit nichts im Shop mitverändert wird. */

.tp {
	--tp-accent: var(--link-color, #4b849a);
	--tp-accent-dark: #345f70;
	--tp-border: var(--border-color, #dbdbdb);
	--tp-bg: #fff;
	--tp-soft: #f6f8f9;
	--tp-warn-bg: #fff5e0;
	--tp-warn-border: #e2a93b;
	--tp-error: #b3261e;
	--tp-ground: #e9e4d9;
	color: #333;
	margin: 1rem auto 2rem;
	padding: 0 16px;
	max-width: var(--max-page-width, 1500px);
}

.tp *, .tp *::before, .tp *::after { box-sizing: border-box; }

.tp-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 20px;
	align-items: start;
}

@media (max-width: 960px) {
	.tp-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Schritte */

.tp-steps { margin-bottom: 14px; }
.tp-steps ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.tp-steps li { flex: 1 1 150px; min-width: 0; }

.tp-stepbtn {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	font: inherit;
	padding: 8px 12px;
	min-height: 44px;
	border: 1px solid var(--tp-border);
	border-bottom: 3px solid var(--tp-border);
	border-radius: 6px;
	background: #fff;
	color: #555;
	cursor: pointer;
	text-align: left;
}
.tp-stepbtn .tp-num { background: #9aa7ad; flex: none; }
.tp-stepbtn:hover { border-color: var(--tp-accent); }
.tp-stepbtn[aria-current="step"] { border-bottom-color: var(--tp-accent); color: #222; font-weight: 600; background: var(--tp-soft); }
.tp-stepbtn[aria-current="step"] .tp-num { background: var(--tp-accent); }
.tp-stepbtn.is-done .tp-num { background: #4f8a4f; }
.tp-stepbtn:focus-visible { outline: 3px solid #9ec5d3; outline-offset: 1px; }

@media (max-width: 560px) {
	.tp-steplabel { font-size: .8rem; }
	.tp-stepbtn { padding: 6px 8px; gap: 6px; }
}

.tp-step[hidden], .tp-toolbar[hidden] { display: none; }
.tp-step h2:focus { outline: none; }
.tp-step h3 { font-size: .95rem; margin: 0 0 6px; }
.tp-help { margin: 6px 0 0; font-size: .8rem; color: #666; }
.tp-bom tr.is-linkable { cursor: pointer; }
.tp-bom tr.is-linkable:hover, .tp-bom tr.is-linkable:focus-visible { background: rgba(255, 162, 31, .16); outline: none; }
.tp-bom tr.is-pinned { background: rgba(255, 162, 31, .28); }

.tp-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tp-preset {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font: inherit;
	font-size: .8rem;
	padding: 8px 4px 6px;
	border: 1px solid var(--tp-border);
	border-radius: 6px;
	background: #fff;
	color: #444;
	cursor: pointer;
	min-height: 64px;
}
.tp-preset svg { width: 40px; height: 28px; fill: #e4ecef; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.tp-preset:hover { border-color: var(--tp-accent); }
.tp-preset[aria-pressed="true"] { border-color: var(--tp-accent); box-shadow: inset 0 0 0 1px var(--tp-accent); background: var(--tp-soft); color: #222; }
.tp-preset[aria-pressed="true"] svg { fill: #b9d3dd; }
.tp-preset:focus-visible { outline: 3px solid #9ec5d3; outline-offset: 1px; }
@media (max-width: 420px) { .tp-presets { grid-template-columns: repeat(2, 1fr); } }

#tp-house-clear[hidden] { display: none; }
.tp-btn[aria-pressed="true"] { background: var(--tp-accent); border-color: var(--tp-accent); color: #fff; }
.tp-btn[aria-pressed="true"]:hover:not(:disabled) { background: var(--tp-accent-dark); color: #fff; }

.tp-edge-hint { margin: 8px 0 0; font-size: .85rem; color: #444; }
.tp-edge-hint.is-warn { padding: 8px 10px; background: var(--tp-warn-bg); border-left: 4px solid var(--tp-warn-border); }
.tp-edge-hint.is-good { color: #2f6b34; }
#tp-edge-suggest { margin-top: 8px; }
#tp-edge-suggest[hidden] { display: none; }

/* Umschalter 2D/3D */
.tp-viewbar { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-viewbar[hidden], .tp-seg[hidden], .tp-view3d[hidden] { display: none; }
.tp-seg { display: inline-flex; border: 1px solid var(--tp-border); border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.tp-seg button {
	font: inherit;
	font-size: .85rem;
	min-height: 34px;
	padding: 4px 12px;
	border: 0;
	border-right: 1px solid var(--tp-border);
	background: #fff;
	color: #333;
	cursor: pointer;
}
.tp-seg button:last-child { border-right: 0; }
.tp-seg button[aria-pressed="true"] { background: var(--tp-accent); color: #fff; }
.tp-seg button:focus-visible { outline: 3px solid #9ec5d3; outline-offset: -3px; }
.tp-seg button#tp-snapshot, .tp-seg button#tp-info-toggle { white-space: nowrap; }

/* Info-Feld der 3D-Ansicht */
.tp-infopanel {
	position: absolute;
	left: 10px;
	top: 54px;
	z-index: 4;
	width: min(270px, calc(100% - 20px));
	padding: 12px 14px;
	background: rgba(255, 255, 255, .97);
	border: 1px solid var(--tp-border);
	border-radius: 8px;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
	font-size: .9rem;
}
.tp-infopanel[hidden] { display: none; }
.tp-infopanel-title { margin: 0 0 6px; font-weight: 600; font-size: .85rem; color: #555; }
.tp-infopanel .tp-check { min-height: 30px; }
.tp-build { position: absolute; z-index: 2; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; width: 190px; padding: 4px 12px 4px 4px; background: rgba(255, 255, 255, .92); border: 1px solid var(--tp-border); border-radius: 999px; }
.tp-build[hidden] { display: none; }
.tp-build button { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--tp-accent); cursor: pointer; }
.tp-build svg { width: 12px; height: 12px; fill: #fff; }
.tp-build .tp-i-pause, .tp-build button.is-playing .tp-i-play { display: none; }
.tp-build button.is-playing .tp-i-pause { display: inline; }
.tp-build input[type="range"] { flex: 1; min-width: 0; margin: 0; accent-color: var(--tp-accent); }
.tp-slider { display: block; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--tp-border); }
.tp-slider span { display: block; margin-bottom: 4px; font-size: .85rem; color: #555; }
.tp-slider input[type="range"] { width: 100%; accent-color: var(--tp-accent); }

/* Beschriftungen in der 3D-Ansicht (Maße, Pfeile): sie folgen der Kamera */
.tp-3d-labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.tp-dim {
	position: absolute;
	left: 0;
	top: 0;
	padding: 1px 7px;
	border: 1px solid rgba(0, 0, 0, .25);
	border-radius: 11px;
	background: rgba(255, 255, 255, .94);
	color: #222;
	font: 600 12.5px/19px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	white-space: nowrap;
	will-change: transform;
}
.tp-dim[hidden] { display: none; }
.tp-dim--small { font-size: 10.5px; line-height: 15px; padding: 0 5px; }
.tp-dim--total { border-color: var(--tp-accent); }
.tp-dim--arrow { background: rgba(47, 127, 157, .95); color: #fff; border-color: transparent; }
.tp-dim--note { background: rgba(255, 255, 255, .97); font-weight: 500; }

.tp-view3d { position: absolute; inset: 0; z-index: 1; }
.tp-view3d canvas { cursor: grab; }
.tp-view3d canvas:active { cursor: grabbing; }
.tp-canvas-wrap canvas.is-hidden { display: none; }

.tp-edge-switch { display: flex; align-items: center; gap: 12px; }
.tp-edge-switch span { flex: 1; text-align: center; font-weight: 600; }

.tp-nav { display: flex; gap: 8px; margin-top: 12px; }
.tp-nav .tp-btn-primary { width: auto; flex: 1; }

.tp-live:empty, .tp-warnings:empty { display: none; }
.tp-live > .tp-status:empty { display: none; }
/* Die Hinweiszeile steht unter der Zeichnung, damit sie nichts verdeckt. */
.tp-canvas-tip {
	margin: 6px 2px 0;
	font-size: .85rem;
	color: #555;
}
.tp-canvas-tip:empty { display: none; }
.tp-busy { z-index: 2; }

/* Rückfrage */

.tp-dialog {
	width: min(92vw, 420px);
	padding: 20px 22px;
	border: 0;
	border-radius: 8px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
	color: #333;
}
.tp-dialog::backdrop { background: rgba(20, 30, 36, .5); }
/* Das Shop-CSS kann <dialog> sichtbar schalten: geschlossen bleibt geschlossen. */
.tp-dialog:not([open]) { display: none; }
.tp-dialog h2 { margin: 0 0 8px; font-size: 1.15rem; }
.tp-dialog p { margin: 0 0 18px; font-size: .95rem; line-height: 1.45; }
.tp-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
.tp-btn-danger { background: #c62828; border-color: #c62828; color: #fff; font-weight: 600; }
.tp-btn-danger:hover:not(:disabled) { background: #a51f1f; border-color: #a51f1f; color: #fff; }

/* Zeichenfläche */

.tp-stage { min-width: 0; }

/* Rückgängig / Einpassen: kleine Symbolknöpfe oben links in der Zeichnung, an derselben Stelle wie der 2D/3D-Umschalter der anderen Schritte */
/* Eine Zeile oben links in der Zeichnung: Einpassen (in jeder 2D-Ansicht), Rückgängig (Schritt 1), dann der 2D/3D-Umschalter. */
.tp-canvas-bar { position: absolute; left: 10px; top: 10px; z-index: 3; display: flex; align-items: flex-start; gap: 8px; }
.tp-toolbar { display: flex; gap: 8px; }
.tp-icon-btn[hidden] { display: none; }
.tp-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--tp-border);
	border-radius: 8px;
	background: rgba(255, 255, 255, .94);
	color: #444;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
	cursor: pointer;
}
.tp-icon-btn svg { width: 20px; height: 20px; }
.tp-icon-btn:hover:not(:disabled) { border-color: var(--tp-accent); color: var(--tp-accent-dark); }
.tp-icon-btn:disabled { opacity: .4; cursor: default; box-shadow: none; }
.tp-icon-btn:focus-visible { outline: 3px solid #9ec5d3; outline-offset: 1px; }

.tp-field { display: flex; flex-direction: column; gap: 2px; font-size: .85rem; }
.tp-field > span { color: #666; }

.tp select, .tp-edge-input {
	font: inherit;
	padding: 6px 8px;
	border: 1px solid var(--tp-border);
	border-radius: 4px;
	background: #fff;
	min-height: 36px;
}

.tp-check { display: flex; align-items: center; gap: 6px; font-size: .9rem; min-height: 36px; }

.tp-btn {
	font: inherit;
	font-size: .9rem;
	padding: 6px 12px;
	min-height: 36px;
	border: 1px solid var(--tp-border);
	border-radius: 4px;
	background: #fff;
	color: #333;
	cursor: pointer;
}
.tp-btn:hover:not(:disabled) { border-color: var(--tp-accent); color: var(--tp-accent-dark); }
.tp-btn:disabled { opacity: .5; cursor: not-allowed; }
.tp-btn:focus-visible, .tp select:focus-visible, .tp-edge-input:focus-visible, .tp-canvas-wrap canvas:focus-visible {
	outline: 3px solid #9ec5d3;
	outline-offset: 1px;
}

.tp-btn-primary {
	width: 100%;
	background: var(--tp-accent);
	border-color: var(--tp-accent);
	color: #fff;
	font-weight: 600;
	min-height: 44px;
}
.tp-btn-primary:hover:not(:disabled) { background: var(--tp-accent-dark); border-color: var(--tp-accent-dark); color: #fff; }

.tp-canvas-wrap {
	position: relative;
	width: 100%;
	height: min(62vh, 640px);
	min-height: 320px;
	border: 1px solid var(--tp-border);
	border-radius: 6px;
	background: var(--tp-ground);
	overflow: hidden;
}

/* Vollbild (3D-Ansicht): die Zeichenfläche füllt den Bildschirm; die Knöpfe bleiben darin. */
.tp-canvas-wrap.is-fullscreen { position: fixed; inset: 0; z-index: 100000; width: 100vw; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
html.tp-noscroll { overflow: hidden; }

/* Zweitrangiger Knopf unter „In den Warenkorb": die 3D-Vorschau soll auffallen, ohne mit dem Kauf zu konkurrieren. */
.tp-btn-preview { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 8px; background: #fff; border-color: var(--tp-accent); color: var(--tp-accent-dark); font-weight: 600; }
.tp-btn-preview:hover:not(:disabled) { background: var(--tp-soft); }
.tp-btn-preview[hidden] { display: none; }
.tp-btn-preview svg { flex: none; width: 20px; height: 20px; }

/* Im Vollbild: „Zurück zur Planung" am unteren Rand. */
/* Mittig unten: rechts und links liegen die festen Shop-Widgets (Käuferschutz, WhatsApp/Telefon). */
.tp-fsbar { display: none; position: absolute; z-index: 5; left: 50%; bottom: 16px; transform: translateX(-50%); gap: 10px; white-space: nowrap; }
.tp-fsbar:not([hidden]) { display: flex; }
.tp-fsbar .tp-btn { width: auto; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
@media (max-width: 560px) { .tp-fsbar { left: 12px; right: 12px; transform: none; } .tp-fsbar .tp-btn { flex: 1; } }
#tp-fullscreen .tp-fs-exit, #tp-fullscreen[aria-pressed="true"] .tp-fs-enter { display: none; }
#tp-fullscreen[aria-pressed="true"] .tp-fs-exit { display: inline; }

.tp-canvas-wrap canvas {
	display: block;
	width: 100%;
	height: 100%;
	touch-action: none;
	cursor: default;
}

.tp-edge-input {
	position: absolute;
	width: 88px;
	text-align: center;
	z-index: 2;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.tp-edge-input[hidden], .tp-busy[hidden], .tp-bom[hidden], .tp-price[hidden] { display: none; }

.tp-busy {
	position: absolute;
	right: 10px;
	top: 10px;
	padding: 4px 10px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .92);
	border: 1px solid var(--tp-border);
	font-size: .85rem;
}


/* Panel */

.tp-panel { display: flex; flex-direction: column; gap: 14px; }

.tp-step {
	border: 1px solid var(--tp-border);
	border-radius: 6px;
	padding: 12px 14px;
	background: var(--tp-bg);
}
.tp-step h2 { font-size: 1.05rem; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.tp-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--tp-accent);
	color: #fff;
	font-size: .85rem;
}

.tp-row { display: flex; gap: 12px; margin-top: 10px; }
.tp-row .tp-field { flex: 1; }
.tp-row select { width: 100%; }

/* Gewählte Diele als Karte */
.tp-boardcard { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--tp-border); border-radius: 6px; background: #fff; }
.tp-bc-media { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 4px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .12); }
.tp-bc-media { position: relative; overflow: visible; }
.tp-bc-media > img:first-child { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.tp-bc-zoom { display: none; position: absolute; z-index: 20; left: 0; top: calc(100% + 6px); width: min(280px, 70vw); height: auto; border: 1px solid var(--tp-border); border-radius: 6px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); pointer-events: none; }
@media (hover: hover) {
	.tp-bc-media:hover .tp-bc-zoom { display: block; }
	.tp-bc-media:has(.tp-bc-zoom) { cursor: zoom-in; }
}
.tp-bc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.tp-bc-text strong { font-size: .95rem; overflow-wrap: anywhere; }
.tp-bc-text small { color: #666; font-size: .8rem; }
.tp-bc-change { flex: 0 0 auto; }

/* Auswahlfenster für die Diele */
.tp-picker { width: min(96vw, 1040px); max-height: 92vh; padding: 0; overflow: hidden; }
.tp-picker[open] { display: flex; flex-direction: column; }
.tp-pk-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; }
.tp-pk-head h2 { margin: 0; flex: 0 0 auto; }
.tp-pk-search { flex: 1; min-width: 0; font: inherit; padding: 7px 10px; border: 1px solid var(--tp-border); border-radius: 6px; }
.tp-pk-close { flex: 0 0 auto; width: 36px; height: 36px; padding: 6px; border: 0; border-radius: 50%; background: transparent; color: #444; cursor: pointer; outline: none; }
.tp-pk-close:hover { background: var(--tp-soft); }
.tp-pk-close:focus-visible, .tp-pk-chip:focus-visible, .tp-pk-tile:focus-visible, .tp-pk-search:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 2px; }
.tp-pk-close svg { display: block; width: 100%; height: 100%; }
.tp-pk-filters { display: flex; flex-direction: column; gap: 6px; padding: 0 16px 8px; max-height: 32vh; overflow-y: auto; border-bottom: 1px solid var(--tp-border); }
.tp-pk-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tp-pk-label { flex: 0 0 96px; font-size: .8rem; font-weight: 600; color: #555; }
.tp-pk-chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .85rem; min-height: 30px; padding: 2px 12px; border: 1px solid var(--tp-border); border-radius: 16px; background: #fff; cursor: pointer; }
.tp-pk-chip:hover { border-color: var(--tp-accent); }
.tp-pk-chip[aria-pressed="true"] { background: var(--tp-accent); border-color: var(--tp-accent); color: #fff; }
.tp-pk-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .25); }
.tp-pk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 16px; font-size: .85rem; }
.tp-pk-count { color: #555; }
.tp-pk-reset { font: inherit; padding: 0; border: 0; background: none; color: var(--tp-accent-dark); text-decoration: underline; cursor: pointer; }
.tp-pk-sort { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.tp-pk-grid { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; align-content: start; }
.tp-pk-tile { display: flex; flex-direction: column; min-width: 0; gap: 3px; font: inherit; text-align: left; padding: 6px 6px 8px; border: 1px solid var(--tp-border); border-radius: 6px; background: #fff; cursor: pointer; }
.tp-pk-tile:hover { border-color: var(--tp-accent); }
.tp-pk-tile[aria-pressed="true"] { border-color: var(--tp-accent); box-shadow: inset 0 0 0 2px var(--tp-accent); background: var(--tp-soft); }
.tp-pk-cell { position: relative; display: flex; min-width: 0; }
.tp-pk-cell .tp-pk-tile { flex: 1; }
.tp-pk-info { position: absolute; right: 10px; bottom: 8px; font-size: .78rem; color: var(--tp-accent-dark); text-decoration: underline; }
.tp-pk-info:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 2px; }
.tp-pk-media { display: block; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
.tp-pk-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tp-pk-title { font-size: .9rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.tp-pk-meta { font-size: .78rem; color: #666; line-height: 1.3; }
.tp-pk-price { font-size: .9rem; font-weight: 600; color: #222; }
.tp-pk-empty { grid-column: 1 / -1; padding: 28px 8px; text-align: center; color: #555; }
@media (max-width: 560px) {
	.tp-picker { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
	.tp-pk-head { flex-wrap: wrap; }
	.tp-pk-search { order: 3; flex: 1 0 100%; }
	.tp-pk-label { flex-basis: 100%; }
	.tp-pk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}


/* Ergebnis */

.tp-status { margin: 0 0 8px; font-size: .9rem; min-height: 1.2em; }
.tp-status.is-error { color: var(--tp-error); font-weight: 600; }

.tp-warnings { list-style: none; margin: 0 0 10px; padding: 0; }
.tp-warnings li {
	padding: 8px 10px;
	margin-bottom: 6px;
	background: var(--tp-warn-bg);
	border-left: 4px solid var(--tp-warn-border);
	font-size: .88rem;
}

.tp-stats { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0 0 12px; font-size: .92rem; }
.tp-stats dt { color: #555; }
.tp-stats dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.tp-bom { width: 100%; border-collapse: collapse; font-size: .88rem; margin-bottom: 10px; }
.tp-bom caption { text-align: left; font-weight: 600; padding-bottom: 4px; }
.tp-bom th, .tp-bom td { padding: 5px 4px; border-bottom: 1px solid var(--tp-border); text-align: left; }
.tp-bom .tp-num-col { text-align: right; font-variant-numeric: tabular-nums; }

.tp-price { font-size: 1.4rem; font-weight: 700; margin: 8px 0; text-align: right; }
.tp-order-note { margin: 6px 0 0; font-size: .82rem; color: #666; }

.tp-notice { padding: 12px; background: var(--tp-warn-bg); border-left: 4px solid var(--tp-warn-border); }

@media (prefers-reduced-motion: no-preference) {
	.tp-btn, .tp-pk-chip, .tp-pk-tile { transition: border-color .12s, background-color .12s; }
}


/* Aussparungen */
.tp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tp-chips[hidden], .tp-hole-panel[hidden] { display: none; }
.tp-chip {
	font: inherit;
	font-size: .85rem;
	padding: 4px 12px;
	min-height: 32px;
	border: 1px solid var(--tp-border);
	border-radius: 16px;
	background: #fff;
	color: #333;
	cursor: pointer;
}
.tp-chip[aria-pressed="true"] { background: var(--tp-accent); border-color: var(--tp-accent); color: #fff; }
.tp-chip.is-invalid { border-color: #b3261e; color: #b3261e; }
.tp-chip.is-invalid[aria-pressed="true"] { background: #b3261e; border-color: #b3261e; color: #fff; }
.tp-chip:focus-visible { outline: 3px solid #9ec5d3; outline-offset: 1px; }
.tp-hole-panel { margin-top: 10px; display: grid; gap: 8px; justify-items: start; }
.tp-hole-panel input { width: 110px; padding: 6px 8px; border: 1px solid var(--tp-border); border-radius: 6px; font: inherit; }
.tp-hole-panel input[aria-invalid="true"] { border-color: #b3261e; }
.tp-hole-panel .tp-help { color: #b3261e; margin: 0; }
.tp-hole-panel .tp-help:empty { display: none; }

/* Runde Pfeilknöpfe (Startkante durchschalten): dieselben Linienpfeile wie die Filmstreifen der Produktseiten. */
.tp-arrow {
	flex: none;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--tp-border);
	border-radius: 50%;
	background: #fff;
	color: #333;
	cursor: pointer;
}
.tp-arrow svg { display: block; width: 20px; height: 20px; margin: 0 auto; }
.tp-arrow:hover:not(:disabled) { border-color: var(--tp-accent); color: var(--tp-accent); }
.tp-arrow:focus-visible { outline: 3px solid #9ec5d3; outline-offset: 1px; }
.tp-arrow:disabled { opacity: .35; cursor: default; }

/* ---------------------------------------------------------------------------------------------------------------
   Seitenleiste: schlank, ruhig, gleichmäßig. Wenig Text; Erklärungen stehen in Info-Blasen (.tp-i).
   --------------------------------------------------------------------------------------------------------------- */

.tp-panel { gap: 12px; }
.tp-step { padding: 16px 18px 18px; border-radius: 10px; }
.tp-step h2 { font-size: 1.05rem; font-weight: 600; margin: 0 0 18px; gap: 10px; }
.tp-num { width: 26px; height: 26px; font-size: .82rem; font-weight: 600; }

.tp-sec { margin: 0 0 18px; }
.tp-sec[hidden], .tp-field[hidden], .tp-heights[hidden] { display: none; }
.tp-label { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: .8rem; font-weight: 600; color: #5f6b73; }
.tp-ground .tp-field, .tp-heights { margin-top: 12px; }

.tp-field { gap: 4px; }
.tp-field > span { display: flex; align-items: center; gap: 6px; color: #5f6b73; }
.tp-field input, .tp-hole-panel input {
	font: inherit;
	padding: 6px 10px;
	min-height: 36px;
	border: 1px solid var(--tp-border);
	border-radius: 6px;
	background: #fff;
}
.tp-field input[aria-invalid="true"] { border-color: var(--tp-error); }
.tp-field--inline { flex-direction: row; align-items: center; gap: 8px; }
.tp-field--inline input { width: 84px; }

.tp-stats--inline { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 18px; padding: 10px 12px; background: var(--tp-soft); border-radius: 8px; font-size: .92rem; }
.tp-stats--inline dd { font-weight: 600; }

.tp-help { margin: 6px 0 0; font-size: .8rem; color: #6b7780; }
.tp-help--error { color: var(--tp-error); }
.tp-help:empty { display: none; }
.tp-brief { margin: 0 0 4px; font-size: .85rem; color: #5f6b73; min-height: 1.3em; }
.tp-brief:empty { display: none; }

/* Werkzeuge in Schritt 1 */
.tp-tools { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.tp-tool { display: inline-flex; align-items: center; gap: 6px; }
#tp-house-clear[hidden] { display: none; }
.tp-chips { margin-top: 12px; }
.tp-hole-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; justify-items: initial; }
.tp-hole-panel .tp-help { flex-basis: 100%; margin: 0; }

/* Auswahlkarten (Untergrund, Unterkonstruktion): eine Zeile, Name, Info-Blase bei Bedarf */
.tp-opts { display: grid; gap: 8px; }
.tp-opts label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--tp-border); border-radius: 8px; cursor: pointer; }
.tp-opts label:has(input:checked) { border-color: var(--tp-accent); box-shadow: inset 0 0 0 1px var(--tp-accent); background: var(--tp-soft); }
.tp-opts label.is-disabled { opacity: .5; cursor: not-allowed; }
.tp-opts input { flex: none; margin: 0; accent-color: var(--tp-accent); }
.tp-opts .tp-opt-name { flex: 1; min-width: 0; font-weight: 500; }
.tp-opts .tp-opt-thumb { position: relative; flex: none; width: 48px; height: 48px; border-radius: 6px; border: 1px solid var(--tp-border); background: #fff; }
.tp-opts .tp-opt-thumb > img:first-child { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
@media (hover: hover) {
	.tp-opt-thumb:hover .tp-bc-zoom { display: block; }
	.tp-opt-thumb:has(.tp-bc-zoom) { cursor: zoom-in; }
}
.tp-badge { display: inline-block; margin: 0 6px 0 0; padding: 1px 7px; border-radius: 10px; background: var(--tp-accent); color: #fff; font-size: .72rem; font-weight: 600; line-height: 1.4; vertical-align: 1px; }
.tp-opts .tp-opt-name small { display: block; margin-top: 1px; font-size: .78rem; font-weight: 400; color: #6b7780; }
.tp-check { gap: 8px; }
.tp-check .tp-i { margin-left: auto; }

/* Info-Blasen */
.tp-i { display: inline-flex; vertical-align: middle; }
.tp-i[hidden] { display: none; }
.tp-i-btn {
	flex: none;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 1px solid #b4bec4;
	border-radius: 50%;
	background: #fff;
	color: #6b7780;
	font: italic 700 12px/18px Georgia, "Times New Roman", serif;
	text-align: center;
	cursor: pointer;
}
.tp-i-btn::before { content: "i"; }
.tp-i-btn:hover, .tp-i-btn[aria-expanded="true"] { border-color: var(--tp-accent); color: var(--tp-accent); }
.tp-i-btn:focus-visible { outline: 3px solid #9ec5d3; outline-offset: 1px; }
.tp-i-pop {
	position: fixed;
	z-index: 50;
	box-sizing: border-box;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid var(--tp-border);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
	font-family: inherit;
	font-size: .82rem;
	line-height: 1.45;
	color: #3c464c;
	text-transform: none;
	letter-spacing: 0;
}
.tp-i-pop[hidden] { display: none; }

/* Weiter / Zurück */
.tp-nav { gap: 8px; margin-top: 22px; }
.tp-nav .tp-btn-primary { min-height: 42px; }
.tp-nav--end { margin-top: 12px; align-items: center; justify-content: space-between; }
.tp-btn { border-radius: 6px; }
.tp-btn-primary { border-radius: 8px; }
.tp-btn-link { display: inline-flex; align-items: center; border-color: transparent; background: transparent; color: var(--tp-accent-dark); text-decoration: none; }
.tp-btn-link:hover { border-color: transparent; text-decoration: underline; }
.tp-btn-link[hidden] { display: none; }

/* Zusammenfassung */
.tp-stats { margin: 0 0 14px; }
.tp-result .tp-check { margin-bottom: 8px; }
.tp-result .tp-bom { margin-top: 4px; }
.tp-bom caption { caption-side: top; margin-bottom: 2px; font-size: .8rem; color: #5f6b73; }

/* Hinweise des Servers: ein schmaler Streifen, aufklappbar */
.tp-notes { margin: 0 0 10px; background: var(--tp-warn-bg); border-left: 4px solid var(--tp-warn-border); border-radius: 6px; }
.tp-notes[hidden], .tp-warnings[hidden] { display: none; }
.tp-notes-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	background: transparent;
	color: #5a4310;
	font: inherit;
	font-size: .85rem;
	text-align: left;
	cursor: pointer;
}
.tp-notes-btn:focus-visible { outline: 3px solid #9ec5d3; outline-offset: -3px; }
.tp-notes-icon { flex: none; width: 18px; height: 18px; color: #b8860b; }
.tp-notes-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-notes-chevron { flex: none; width: 16px; height: 16px; transition: transform .15s; }
.tp-notes-btn[aria-expanded="true"] .tp-notes-chevron { transform: rotate(180deg); }
.tp-notes .tp-warnings { margin: 0; padding: 0 12px 10px 36px; list-style: disc; }
.tp-notes .tp-warnings li { margin: 0 0 6px; padding: 0; background: transparent; border: 0; font-size: .82rem; color: #5a4310; }

/* Symbolknöpfe in der Kopfleiste der Zeichnung (3D: Kamera, Person, Info, Bild) */
.tp-seg button.tp-ico { display: inline-flex; align-items: center; justify-content: center; width: 36px; padding: 0; }
.tp-seg button.tp-ico svg { width: 20px; height: 20px; }

/* Knöpfe in der Zeichnung: kein Fokusrahmen (auch nicht nach dem Klick); die Tastaturmarkierung ist ein feiner Innenrand statt des Rahmens. */
.tp-canvas-wrap button, .tp-canvas-wrap button:focus, .tp-canvas-wrap button:focus-visible { outline: none; }
.tp-canvas-wrap button:focus-visible { box-shadow: inset 0 0 0 2px var(--tp-accent); }
.tp-canvas-wrap .tp-seg button:focus-visible { box-shadow: inset 0 0 0 2px var(--tp-accent); }
.tp-btn-link svg { flex: none; width: 18px; height: 18px; margin-right: 6px; }

/* Meldungen und Hinweise sitzen in der Karte über dem Weiter-Knopf (der Rest der Spalte beginnt bündig mit der Zeichnung). */
.tp-live .tp-status:empty { display: none; }
.tp-live .tp-status, .tp-live .tp-notes { margin: 16px 0 0; }
.tp-notes .tp-warnings li.is-locatable { cursor: pointer; border-radius: 4px; margin-left: -4px; padding: 2px 4px; }
.tp-notes .tp-warnings li.is-locatable:hover, .tp-notes .tp-warnings li.is-locatable:focus-visible { background: rgba(255, 140, 0, .16); outline: none; }

/* Untergrund beschreiben: eine Frage mit kompakten Karten, darunter Maße, Ergebnis und Zusatzangaben */
.tp-opts--compact { gap: 6px; }
.tp-opts--compact label { padding: 5px 10px; gap: 8px; font-size: .95rem; }
.tp-slope { margin-top: 8px; }
.tp-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; font-size: .9rem; }
/* Auswahl und Eingabe in einer Zeile gleich hoch, sonst wirkt die Zeile unruhig. */
.tp .tp-inline select, .tp .tp-inline input { width: auto; height: 34px; min-height: 34px; max-height: 34px; box-sizing: border-box; padding: 0 8px; margin: 0; font: inherit; line-height: 1.2; }
.tp-inline .tp-inline-lead { flex-basis: 100%; }
.tp .tp-inline input.tp-short { width: 4.2em; text-align: right; }
.tp-slope-result { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--tp-border); border-radius: 8px; background: #fff; }
.tp-slope-result svg { display: block; width: 100%; height: auto; max-height: 84px; }
.tp-slope-result p { margin: 4px 0 0; font-size: .8rem; line-height: 1.35; }
.tp-more { margin-top: 8px; font-size: .9rem; }
.tp-more summary { cursor: pointer; color: var(--tp-accent-dark); }
.tp-more[open] { padding-bottom: 2px; }
.tp-slope-result[hidden], .tp-slope[hidden], .tp-inline[hidden] { display: none; }