/*
 * Muster „Unterseite: Wege mit Tabelle und Karte“ (patterns/seite-13-wege.php, Gruppe .ps-frage.ps-wege).
 * Nur Core-Blöcke: Überschrift und Zitierabsatz wie „Frage ohne Bild“ (muster.css), dazu
 *  - Tabelle der Wege (core/table .ps-wege__tabelle): Nummer als goldene Marke wie auf der Wanderkarte,
 *    Weg und Ziel kräftig, Gehzeit in Tanne. Mobil (bis 700 px) wird jede Zeile zu einer Karte: Marke links,
 *    Weg, Gehzeit und Besonderheit untereinander; kein seitliches Scrollen (überschreibt bestand.css).
 *  - Texttabelle (.ps-wege__tabelle--text, 22.10.2026): erste Spalte Text statt Nummer, z. B. Preise je Saison.
 *  - Karte (core/image .ps-wege__karte, WordPress-Lightbox): Papier-Rahmen, Bildunterschrift.
 *  - PDF-Link (core/buttons .ps-wege__pdf, Stil „Umriss“, Icon über die Klasse ps-icon-route).
 * Bewegung nur mit .ps-bw (seite.js): Zeilen erscheinen gestaffelt, wenn die Tabelle ins Bild kommt; Zeile und
 * Marke reagieren auf Zeiger und Fokus. Ohne JavaScript und bei reduzierter Bewegung steht alles sofort da.
 * Geladen von inc/assets.php, wenn der Inhalt „ps-wege“ enthält; im Editor über add_editor_style (inc/setup.php).
 */

.ps-frage.ps-wege.wp-block-group { gap: 20px; }
/* Tabelle, Karte und PDF-Link dürfen breiter sein als der Text (.ps-frage > * = 760 px) */
.ps-frage.ps-wege > :is(.ps-wege__tabelle, .ps-wege__karte, .ps-wege__pdf) { max-width: 1040px; }

/* ---------- Tabelle ---------- */
.ps-wege .ps-wege__tabelle.wp-block-table { margin: 8px 0 0; overflow: visible; }
.ps-wege .ps-wege__tabelle table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: var(--fs-small);
	line-height: 1.5;
	background: var(--weiss);
	border-top: 2px solid var(--tanne-600);
	border-bottom: 1px solid var(--border-default);
}
.ps-wege .ps-wege__tabelle :is(th, td) {
	padding: 13px 14px;
	border: 0;
	border-bottom: 1px solid var(--border-subtle);
	text-align: left;
	vertical-align: top;
}
.ps-wege .ps-wege__tabelle thead { border: 0; }
.ps-wege .ps-wege__tabelle thead th {
	padding-block: 11px;
	background: var(--tanne-50);
	color: var(--tanne-800);
	font-family: var(--font-sans);
	font-size: var(--fs-caption);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	white-space: nowrap;
}
.ps-wege .ps-wege__tabelle tbody tr:last-child td { border-bottom: 0; }
.ps-wege .ps-wege__tabelle :is(th, td):first-child { width: 1%; padding-right: 6px; text-align: center; }
/* Nummer als Marke (wie die Wegnummern der Karte): Kreis hinter der Zahl, dunkle Zahl auf Sonne */
.ps-wege .ps-wege__tabelle td:first-child {
	position: relative;
	z-index: 0;
	min-width: 34px;
	color: var(--text-strong);
	font-weight: 700;
	font-variant-numeric: tabular-nums lining-nums;
	line-height: 32px;
	padding-top: 7px;
	padding-bottom: 7px;
}
.ps-wege .ps-wege__tabelle td:first-child::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 7px;
	left: 50%;
	width: 32px;
	height: 32px;
	margin-left: calc(-16px + 4px);
	border-radius: 50%;
	background: var(--sonne-400);
	box-shadow: inset 0 0 0 1.5px var(--sonne-600);
	transition: transform 300ms var(--ease-out), background-color 300ms var(--ease-out);
}
.ps-wege .ps-wege__tabelle td:nth-child(2) { color: var(--text-strong); font-weight: 600; }
.ps-wege .ps-wege__tabelle td:nth-child(3) { min-width: 9.5em; color: var(--tanne-700); }
.ps-wege .ps-wege__tabelle td:nth-child(4) { color: var(--text-muted); }
.ps-wege .ps-wege__tabelle tbody tr { transition: background-color 250ms var(--ease-out); }
.ps-wege .ps-wege__tabelle tbody tr:hover { background: var(--leinen); }
.ps-wege .ps-wege__tabelle tbody tr:hover td:first-child::before { transform: scale(1.1); background: var(--sonne-300); }

@media (max-width: 700px) {
	.ps-inhalt .ps-wege .ps-wege__tabelle.wp-block-table,
	.ps-inhalt .ps-wege .ps-wege__tabelle table { display: block; overflow: visible; }
	/* Kopfzeile nur für Screenreader (die Zellen erklären sich mobil selbst: Weg, Gehzeit, Besonderheit) */
	.ps-wege .ps-wege__tabelle thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.ps-wege .ps-wege__tabelle tbody { display: block; }
	.ps-wege .ps-wege__tabelle tr {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		column-gap: 12px;
		row-gap: 3px;
		padding: 14px 12px 14px 8px;
		border-bottom: 1px solid var(--border-subtle);
	}
	.ps-wege .ps-wege__tabelle tbody tr:last-child { border-bottom: 0; }
	.ps-wege .ps-wege__tabelle :is(th, td) { display: block; padding: 0; border: 0; }
	.ps-wege .ps-wege__tabelle td:first-child { grid-row: 1 / span 3; width: auto; padding: 0; line-height: 32px; }
	.ps-wege .ps-wege__tabelle td:first-child::before { top: 0; margin-left: -16px; }
	.ps-wege .ps-wege__tabelle td:nth-child(3) { min-width: 0; }
}

/* ---------- Texttabelle (22.10.2026: Preise je Saison auf den Unterkunftsseiten DE/EN/IT) ----------
 * seite_bauen.py setzt .ps-wege__tabelle--text, wenn die erste Spalte keine Wegnummer ist. Erste Spalte: Saison fett
 * (strong) mit dem Zeitraum darunter, ohne Marke, links. Übrige Spalten: Werte mit tabellarischen Ziffern, ohne Umbruch.
 * Mobil bleibt sie eine echte Tabelle mit sichtbarer Kopfzeile (die Spalten brauchen ihren Kopf), engere Abstände;
 * bei 360 px kein seitliches Scrollen. Die Wege-Tabelle oben bleibt unverändert. */
/* Kopf ohne Versalien: Einheiten wie „m²“ bleiben richtig geschrieben */
.ps-wege .ps-wege__tabelle--text thead th { white-space: normal; letter-spacing: 0; text-transform: none; }
.ps-wege .ps-wege__tabelle--text :is(th, td):first-child { width: auto; padding-right: 14px; text-align: left; }
.ps-wege .ps-wege__tabelle--text td:first-child {
	min-width: 0;
	padding-top: 13px;
	padding-bottom: 13px;
	color: var(--text-muted);
	font-weight: 400;
	line-height: 1.5;
}
.ps-wege .ps-wege__tabelle--text td:first-child strong { display: block; color: var(--text-strong); font-weight: 600; }
.ps-wege .ps-wege__tabelle--text td:first-child::before { content: none; }
.ps-wege .ps-wege__tabelle--text td:nth-child(n+2) {
	min-width: 0;
	color: var(--text-strong);
	font-weight: 400;
	font-variant-numeric: tabular-nums lining-nums;
	white-space: nowrap;
}

/* Mobil: jede Zeile ein Raster mit drei Wertespalten; die erste Zelle (Saison mit Zeitraum) steht darüber über die
   ganze Breite. Die Kopfzeile bleibt sichtbar und steht über den drei Spalten; ihre erste Zelle („Saison“) ist nur für
   Screenreader da, weil jede Zeile ihre Saison selbst nennt. Ausgelegt für drei Wertespalten (Ferienwohnungen 1–3);
   Tabellen mit zwei Wertespalten (Hotel- und Familienzimmer: je Zimmer „Frühstück / Halbpension“, 22.10.2026 abends)
   teilen die Zeile in zwei Spalten. Ohne :has() bleiben es drei Spalten, die dritte leer (lesbar, kein Überlauf). */
@media (max-width: 700px) {
	.ps-wege .ps-wege__tabelle--text thead {
		position: static;
		display: block;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}
	.ps-wege .ps-wege__tabelle--text tr {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 10px;
		row-gap: 4px;
		padding: 12px 10px;
	}
	.ps-wege .ps-wege__tabelle--text tr:not(:has(> :nth-child(4))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ps-wege .ps-wege__tabelle--text thead tr { background: var(--tanne-50); }
	.ps-wege .ps-wege__tabelle--text thead th {
		background: none;
		font-size: var(--fs-caption);
		letter-spacing: 0;
		line-height: 1.35;
		text-transform: none;
	}
	.ps-wege .ps-wege__tabelle--text thead th:first-child {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.ps-wege .ps-wege__tabelle--text :is(th, td):first-child { padding: 0; }
	.ps-wege .ps-wege__tabelle--text td:first-child { grid-column: 1 / -1; grid-row: auto; margin-bottom: 4px; line-height: 1.45; }
}

/* Zeilen erscheinen gestaffelt (die Tabelle selbst blendet seite.js als Ganzes ein) */
.ps-bw .ps-wege__tabelle.ps-rv tbody tr { opacity: 0; transition: opacity 600ms var(--ease-out), background-color 250ms var(--ease-out); }
.ps-bw .ps-wege__tabelle.ps-rv.ist-sichtbar tbody tr { opacity: 1; }
.ps-bw .ps-wege__tabelle.ps-rv.ist-sichtbar tbody tr:nth-child(2) { transition-delay: 70ms, 0ms; }
.ps-bw .ps-wege__tabelle.ps-rv.ist-sichtbar tbody tr:nth-child(3) { transition-delay: 140ms, 0ms; }
.ps-bw .ps-wege__tabelle.ps-rv.ist-sichtbar tbody tr:nth-child(4) { transition-delay: 210ms, 0ms; }
.ps-bw .ps-wege__tabelle.ps-rv.ist-sichtbar tbody tr:nth-child(5) { transition-delay: 280ms, 0ms; }
.ps-bw .ps-wege__tabelle.ps-rv.ist-sichtbar tbody tr:nth-child(6) { transition-delay: 350ms, 0ms; }
.ps-bw .ps-wege__tabelle.ps-rv.ist-sichtbar tbody tr:nth-child(7) { transition-delay: 420ms, 0ms; }
.ps-bw .ps-wege__tabelle.ps-rv.ist-sichtbar tbody tr:nth-child(8) { transition-delay: 490ms, 0ms; }
.ps-bw .ps-wege__tabelle.ps-rv.ist-sichtbar tbody tr:nth-child(n+9) { transition-delay: 560ms, 0ms; }

/* ---------- Karte ---------- */
.ps-wege .ps-wege__karte.wp-block-image {
	margin: clamp(16px, 2.4vw, 28px) 0 0;
	padding: clamp(8px, 1.2vw, 14px);
	background: var(--weiss);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-sm);
}
.ps-wege .ps-wege__karte img { display: block; width: 100%; height: auto; border-radius: var(--radius-image); cursor: zoom-in; }
.ps-wege .ps-wege__karte .wp-element-caption {
	margin: 12px 4px 2px;
	color: var(--text-muted);
	font-size: var(--fs-caption);
	line-height: 1.5;
	text-align: left;
}
.ps-wege .ps-wege__karte .wp-lightbox-container button.lightbox-trigger { opacity: 1; }
.ps-wege .ps-wege__karte .wp-lightbox-container button.lightbox-trigger:focus-visible { outline: 2px solid var(--sonne-500); outline-offset: 2px; }

/* ---------- PDF-Link ---------- */
.ps-wege .ps-wege__pdf.wp-block-buttons { margin-top: 4px; }
.ps-wege .ps-wege__pdf .wp-block-button__link { gap: 10px; }
/* Umriss statt Fläche (bestand.css füllt Buttons im Inhalt): der PDF-Link ist ein Nebenweg, „Verfügbarkeit prüfen“ bleibt der stärkste Knopf */
.ps-inhalt .ps-wege .ps-wege__pdf .is-style-ps-umriss .wp-block-button__link {
	background-color: transparent;
	color: var(--tanne-700);
	border: 1.5px solid var(--tanne-600);
	transition: background-color 250ms var(--ease-out), color 250ms var(--ease-out);
}
.ps-inhalt .ps-wege .ps-wege__pdf .is-style-ps-umriss .wp-block-button__link:is(:hover, :focus-visible) { background-color: var(--tanne-600); color: var(--schnee); }