/**
 * Preistabelle je Groesse auf den Produktseiten (class-price-table.php).
 *
 * Eigene Datei, nur auf den Seiten geladen, auf denen die Tabelle steht --
 * Profile laden configurator.css, Blech laedt plate-configurator.css, und die
 * Tabelle gehoert zu keinem der beiden Konfiguratoren.
 *
 * Farben ueber die --stbk-Tokens aus dem Theme-:root (storefront-child/
 * style.css), jeweils mit dem Literalwert als Rueckfall -- die Tabelle sitzt
 * ausserhalb von .stbk-configurator, wo configurator.css die Tokens ein
 * zweites Mal setzt.
 *
 * Die Tabelle traegt die Klasse has-background (siehe PHP): damit greifen
 * Storefronts Customizer-Regeln "table:not(.has-background) th/td" nicht, die
 * sonst halbtransparente Grautoene setzen. Halbtransparent vertraegt sich
 * nicht mit der festen ersten Spalte -- beim seitlichen Scrollen schiene der
 * Inhalt durch.
 */

.stbk-pt {
	clear: both;
	margin: 8px 0 40px;
	color: var(--stbk-text, #3e4a52);
}

.stbk-pt-titel {
	margin: 0 0 10px;
	font-size: 26px;
	line-height: 1.25;
	font-weight: 600;
	color: var(--stbk-text, #3e4a52);
}

.stbk-pt-intro {
	max-width: 78ch;
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--stbk-text-muted, #6b747a);
}

.stbk-pt-intro a {
	color: inherit;
	text-decoration: underline;
}

/* Hinweis auf die Bearbeitungspauschale (nur Blech). Farbig abgesetzt wie der
   Akzent, aber ohne Warnton: es ist eine Preisangabe, kein Fehler. */
.stbk-pt-hinweis {
	max-width: 78ch;
	margin: 0 0 16px;
	padding: 10px 14px;
	border-left: 3px solid var(--stbk-accent, #e8622c);
	border-radius: 0 8px 8px 0;
	background: var(--stbk-accent-bg, #fdece3);
	font-size: 14px;
	line-height: 1.5;
	color: var(--stbk-text, #3e4a52);
}

/* ---- Scroll-Rahmen ----
   Die Tabelle ist breiter als ein Telefon. Gescrollt wird NUR dieser Rahmen,
   nie die Seite (html hat overflow-x:hidden, eine zu breite Tabelle waere
   dort einfach abgeschnitten). tabindex=0 im HTML macht ihn per Tastatur
   scrollbar, deshalb der sichtbare Fokusrahmen. */
.stbk-pt-scroll {
	/* position:relative ist kein Beiwerk: die screen-reader-text-Spans in den
	   Zellen sind absolut positioniert. Ohne positionierten Rahmen beziehen
	   sie sich auf einen Vorfahren AUSSERHALB des Scrollbereichs, werden vom
	   overflow nicht erfasst und machen die ganze Seite breiter -- bei 375 px
	   Fensterbreite gemessen 815 px Dokumentbreite. */
	position: relative;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--stbk-border, #e2e5e7);
	border-radius: 10px;
	background: var(--stbk-surface, #fff);
}

.stbk-pt-scroll:focus {
	outline: none;
}

.stbk-pt-scroll:focus-visible {
	outline: 2px solid var(--stbk-accent, #e8622c);
	outline-offset: 2px;
}

.stbk-pt .stbk-pt-table {
	width: 100%;
	min-width: 760px;
	margin: 0;
	border-collapse: separate; /* collapse vertraegt sich nicht mit position:sticky */
	border-spacing: 0;
	font-size: 14px;
	line-height: 1.35;
	background: transparent;
}

.stbk-pt-blech .stbk-pt-table {
	min-width: 680px;
}

.stbk-pt .stbk-pt-table th,
.stbk-pt .stbk-pt-table td {
	padding: 10px 14px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--stbk-border-faint, #ececec);
	background: var(--stbk-surface, #fff);
	font-weight: 400;
}

.stbk-pt .stbk-pt-table tbody:last-child tr:last-child > * {
	border-bottom: 0;
}

/* ---- Kopf ---- */
.stbk-pt .stbk-pt-table thead th {
	padding-top: 9px;
	padding-bottom: 9px;
	background: var(--stbk-surface-alt, #f7f6f3);
	border-bottom-color: var(--stbk-border, #e2e5e7);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--stbk-text-muted, #6b747a);
	white-space: nowrap;
}

.stbk-pt .stbk-pt-table thead .stbk-pt-kopfgruppe {
	text-align: center;
	border-bottom-color: var(--stbk-border-faint, #ececec);
}

.stbk-pt-einheit {
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--stbk-text-faint, #9aa3a8);
}

/* ---- Zwischenzeile je Gruppe (HEA/HEB/HEM, Quadrat-/Rechteckrohr) ----
   Die Zelle spannt ueber alle Spalten; die Beschriftung klebt links, damit sie
   beim seitlichen Scrollen nicht aus dem Bild wandert. */
.stbk-pt .stbk-pt-table .stbk-pt-gruppe th {
	padding-top: 14px;
	padding-bottom: 6px;
	background: var(--stbk-surface, #fff);
	border-bottom-color: var(--stbk-border, #e2e5e7);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--stbk-accent-text, #c94f1e);
}

.stbk-pt-gruppe th span {
	position: sticky;
	left: 14px;
}

/* ---- Erste Spalte (Groesse) bleibt beim seitlichen Scrollen stehen ----
   Deckender Hintergrund ist Pflicht, sonst laeuft der Inhalt darunter durch.
   Die Schattenkante zeigt, dass rechts davon etwas verschoben ist. */
.stbk-pt .stbk-pt-table .stbk-pt-size {
	position: sticky;
	left: 0;
	z-index: 1;
	box-shadow: 1px 0 0 var(--stbk-border, #e2e5e7);
	white-space: nowrap;
}

.stbk-pt .stbk-pt-table tbody .stbk-pt-size {
	font-weight: 700;
	color: var(--stbk-text, #3e4a52);
}

.stbk-pt .stbk-pt-table thead .stbk-pt-size {
	z-index: 2;
}

/* Sprung ueber #ipe-160 o.ae.: nicht unter der klebenden Kopfleiste landen
   -- und die Zeile kurz kenntlich machen. Die Kopfleiste ist im gescrollten
   Zustand gemessen 253 px hoch (ab 768 px Breite, 244 px bei 768-1024 px)
   und 105 px auf dem Telefon (Messung 24.09.2026). Feste Werte, weil CSS die
   Hoehe nicht kennt; der Sprung zum Konfigurator wird zusaetzlich per
   price-table.js nachgemessen. */
.stbk-pt-table th[id] {
	scroll-margin-top: 270px;
}

.stbk-pt .stbk-pt-table tr:has(> th:target) > * {
	background: var(--stbk-accent-bg, #fdece3);
}

.stbk-pt .stbk-pt-table tbody tr:not(.stbk-pt-gruppe):hover > * {
	background: #fbfaf8;
}

/* ---- Zahlen ----
   Rechtsbuendig und gleich breite Ziffern, damit Preise untereinander stehen
   -- dieselbe Monospace wie die Preise im Produktraster (--stbk-font-mono). */
.stbk-pt .stbk-pt-table .stbk-pt-num {
	text-align: right;
	white-space: nowrap;
	font-family: var(--stbk-font-mono, ui-monospace, monospace);
	font-variant-numeric: tabular-nums;
}

.stbk-pt .stbk-pt-table thead .stbk-pt-num {
	font-family: inherit;
}

.stbk-pt-masse {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--stbk-text-muted, #6b747a);
}

.stbk-pt-preis {
	display: block;
	font-weight: 700;
	color: var(--stbk-text, #3e4a52);
}

.stbk-pt-meter {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--stbk-text-muted, #6b747a);
}

/* ---- Konfigurieren ---- */
.stbk-pt .stbk-pt-table .stbk-pt-aktion {
	text-align: right;
	white-space: nowrap;
}

.stbk-pt-link {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 6px 14px;
	border: 1.5px solid var(--stbk-accent, #e8622c);
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--stbk-accent-text, #c94f1e);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.stbk-pt-link:hover,
.stbk-pt-link:focus-visible {
	background: var(--stbk-accent, #e8622c);
	color: #fff;
	text-decoration: none;
}

.stbk-pt-link:focus-visible {
	outline: 2px solid var(--stbk-accent-dark, #c94f1e);
	outline-offset: 2px;
}

/* Die Sprungmarke selbst ist leer; der Abstand sorgt dafuer, dass der
   Konfigurator nach dem Sprung nicht unter der Kopfleiste beginnt. */
.stbk-pt-anker {
	display: block;
	height: 0;
	scroll-margin-top: 270px;
}

@media (max-width: 767px) {
	.stbk-pt-table th[id],
	.stbk-pt-anker {
		scroll-margin-top: 120px;
	}
}

@media (max-width: 768px) {
	.stbk-pt-titel {
		font-size: 22px;
	}

	.stbk-pt .stbk-pt-table {
		font-size: 13px;
	}

	.stbk-pt .stbk-pt-table th,
	.stbk-pt .stbk-pt-table td {
		padding: 8px 10px;
	}

	/* 44 px: dieselbe Mindestgroesse fuer Tippziele wie im Konfigurator und
	   in der Versandauskunft. */
	.stbk-pt-link {
		min-height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.stbk-pt-link {
		transition: none;
	}
}