/* =========================================================
   Seite „Preise“ (/preise/) – nur Klassen mit Präfix .preise-,
   Farben und Größen ausschließlich aus den Tokens in theme.css.
   Mobile-first, Breakpoints 600 / 900 / 1100.
   ========================================================= */

/* ---------- Tarife: drei Karten nebeneinander (≥ 900 px), Schüler/Studenten als Zeile ---------- */
.preise-raster { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: stretch; }
.preise-raster > * { min-width: 0; }

.preise-karte {
	display: flex; flex-direction: column;
	background: var(--weiss); border: 1px solid var(--grau-linie); border-radius: var(--radius);
	overflow: hidden;
}
.preise-karte--empfohlen { border-color: var(--orange-tief); }

/* Hervorgehobene Karte: orangefarbener Rand und gefüllter Button – ohne Behauptung („Beliebt“) */
.preise-karte--empfohlen { border-width: 2px; }

.preise-karte-innen { display: flex; flex-direction: column; flex: 1 1 auto; padding: 28px 24px 24px; }
.preise-karte-titel { margin-bottom: 0.2em; }
.preise-karte-unter { color: var(--grau-text); margin-bottom: 20px; }

/* Günstigster Wochenpreis groß: Outfit 800, 40 px (Sektionsgröße), Cent klein */
.preise-preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 22px; }
.preise-ab { font-family: var(--schrift-titel); font-weight: 600; font-size: var(--schrift-fliess); color: var(--grau-text); }
.preise-betrag { font-family: var(--schrift-titel); font-weight: 800; font-size: var(--schrift-sektion); line-height: 1; letter-spacing: -0.02em; color: var(--anthrazit); white-space: nowrap; }
.preise-cent { font-size: var(--schrift-zwischen); font-weight: 700; letter-spacing: 0; }
.preise-einheit { flex-basis: 100%; font-size: var(--schrift-klein); color: var(--grau-text); }

/* Laufzeiten als Tabelle: Laufzeit links (th), Preis rechts */
.preise-tabelle { margin: 0 0 24px; font-size: var(--schrift-fliess); }
.preise-tabelle th, .preise-tabelle td { padding: 11px 0; border-top: 1px solid var(--grau-linie); vertical-align: baseline; }
.preise-tabelle th { text-align: left; font-family: var(--schrift-text); font-weight: 600; color: var(--anthrazit); }
.preise-tabelle td { text-align: right; white-space: nowrap; }
.preise-tabelle tr:last-child th, .preise-tabelle tr:last-child td { border-bottom: 1px solid var(--grau-linie); }
.preise-zelle-preis { font-family: var(--schrift-titel); font-weight: 700; }
.preise-zelle-einheit { font-size: var(--schrift-klein); color: var(--grau-text); }

/* Tarif mit nur einer Laufzeit (Best Friends): Hinweis als Notiz statt Tabelle, füllt die Karte bis zum Button */
.preise-karte-notiz {
	display: flex; gap: 10px; align-items: flex-start;
	margin: 0 0 24px; padding: 14px 16px;
	background: var(--hellgrau); border-radius: var(--radius-button);
	font-size: var(--schrift-klein); color: var(--grau-text);
}
.preise-karte-notiz .icon { width: 20px; height: 20px; flex: none; margin-top: 0.1em; color: var(--orange-tief); }

.preise-karte .button { margin-top: auto; }

/* Schüler/Studenten: Zeile mit Name/Hinweis links, Preis rechts */
.preise-karte--zeile { padding: 24px; gap: 12px; }
.preise-zeile-text > :last-child { margin-bottom: 0; }
.preise-preis--zeile { margin: 0; }

@media (min-width: 600px) {
	.preise-raster { grid-template-columns: repeat(2, 1fr); }
	.preise-karte-innen { padding: 32px 28px 28px; }
	/* 600–899 px: vierte Zelle im 2×2-Raster, Preis unten auf Höhe der Buttons der Nachbarkarte */
	.preise-karte--zeile { justify-content: space-between; padding: 32px 28px 28px; }
}
@media (min-width: 900px) {
	.preise-raster { grid-template-columns: repeat(3, 1fr); }
	/* ab 900 px: Zeile unter den drei Karten – Name/Hinweis links, Preis rechts */
	.preise-karte--zeile { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px 40px; padding: 28px; }
	.preise-preis--zeile { text-align: right; justify-content: flex-end; }
}

/* 900–1099 px: drei Karten auf ~270 px – kompakter, damit Laufzeit, Preis und Button nicht umbrechen */
@media (min-width: 900px) and (max-width: 1099px) {
	.preise-karte-innen { padding: 28px 22px 22px; }
	.preise-tabelle th { white-space: nowrap; }
	.preise-zelle-einheit { display: block; }
	.preise-karte .button { padding-inline: 16px; }
	.preise-karte .button .icon { display: none; }
}

/* ---------- Gebühren, Zusatzleistungen, Karten ohne Vertrag: zwei Spalten mit <dl> ---------- */
/* minmax(0, 1fr) statt 1fr: sonst wächst die Spalte auf die Mindestbreite der Preiszeile (längstes Wort + Betrag)
   und läuft bei 320 px mit WCAG-Textabständen über den Viewport (Prüfrunde 2, Befund 3) */
.preise-zwei { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.preise-spalte { min-width: 0; }
.preise-spalte > h2 { margin-bottom: 0.6em; }
.preise-extras-titel { margin-top: 40px; margin-bottom: 0.4em; }

.preise-liste { margin: 0; }
.preise-liste-zeile {
	display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 24px;
	padding: 16px 0; border-top: 1px solid var(--grau-linie);
}
.preise-liste-zeile:last-child { border-bottom: 1px solid var(--grau-linie); }
.preise-liste dt { flex: 1 1 auto; min-width: 0; font-weight: 600; } /* lange Wörter tragen weiche Trennzeichen (viva_weich_trennen) */
.preise-liste-name { display: block; }
.preise-liste-text { display: block; margin-top: 2px; font-size: var(--schrift-klein); font-weight: 400; color: var(--grau-text); }
.preise-liste dd {
	flex: 0 0 auto; margin: 0; text-align: right;
	font-family: var(--schrift-titel); font-weight: 700; font-size: var(--schrift-zwischen); line-height: 1.25;
	color: var(--anthrazit); white-space: nowrap;
}
.preise-liste-zusatz { margin-top: 4px; }
.preise-spalte-hinweis { margin: 16px 0 0; font-size: var(--schrift-klein); color: var(--grau-text); }

@media (min-width: 900px) {
	.preise-zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
}
@media (min-width: 1100px) {
	.preise-zwei { gap: 96px; }
}

/* ---------- Altersregeln als Zeitstrahl 14 / 16 / 18 ---------- */
.preise-alter .sektion-kopf { margin-bottom: 48px; }
.preise-zeitstrahl { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 36px; }
/* Verbindungslinie: mobil senkrecht durch die Zahlenfelder, ab 900 px waagerecht */
.preise-zeitstrahl::before { content: ''; position: absolute; left: 39px; top: 40px; bottom: 40px; width: 2px; background: var(--grau-linie); }
/* align-content: start – sonst füllen die Auto-Zeilen den gestreckten Listenpunkt auf und der Text rutscht nach unten */
.preise-zeitstrahl-punkt { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 20px; align-items: start; align-content: start; margin: 0; }
.preise-zeitstrahl-zahl {
	position: relative; z-index: 1;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	width: 80px; height: 80px; border-radius: var(--radius);
	background: var(--weiss); border: 1px solid var(--grau-linie);
	font-family: var(--schrift-titel); font-weight: 800; font-size: var(--schrift-sektion); line-height: 1; letter-spacing: -0.02em;
	color: var(--orange); /* 3,73:1 auf Weiß – nur als große Zahl ≥ 32 px */
}
.preise-zeitstrahl-vor { font-size: var(--schrift-klein); font-weight: 600; letter-spacing: 0; color: var(--grau-text); line-height: 1; margin-bottom: 4px; }
.preise-zeitstrahl-text > :last-child { margin-bottom: 0; }
.preise-zeitstrahl-titel { margin: 0 0 0.35em; padding-top: 4px; }
.preise-zeitstrahl-text p { color: var(--anthrazit); max-width: 40rem; }

@media (min-width: 900px) {
	.preise-zeitstrahl { grid-template-columns: repeat(3, 1fr); gap: 48px; }
	.preise-zeitstrahl::before { left: 40px; right: 40px; top: 39px; bottom: auto; width: auto; height: 2px; }
	.preise-zeitstrahl-punkt { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.preise-zeitstrahl-titel { padding-top: 0; }
}

/* ---------- Hinweiszeile zum Preisstand ---------- */
.preise-stand { padding-block: 24px; }
.preise-stand p { margin: 0; }

/* ---------- Druck ---------- */
@media print {
	.preise-raster { grid-template-columns: repeat(3, 1fr); gap: 12px; }
	.preise-karte { border-color: #999; break-inside: avoid; }
	.preise-karte .button { display: none; }
	.preise-zwei { grid-template-columns: 1fr 1fr; gap: 24px; }
	.preise-zeitstrahl::before { display: none; }
	.preise-zeitstrahl-zahl { color: #000; border-color: #999; }
}