/* ================================================================
   SABTEC — Seite „Mieten" (Containerkatalog)
   ================================================================
   Nur was diese Seite allein braucht. Alles Geteilte steht in
   assets/css/system.css und wird hier NICHT wiederholt.

   Herkunft jeder Regel: der abgenommene Prototyp
   design/22-07-2026-seitenset/mieten.html, Stand 31.07.2026.
   Keine Farb- oder Schriftliterale — alles ueber die Tokens.
   ================================================================ */

/* Einleitung ueber dem Katalog (Wortlaut der Kundin, Kommentar #71). */
.mietintro {
	max-width: 900px;
	margin: 0 auto 8px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--mut);
}

/* Zaehlzeile „Auszug aus unserem Mietpark" mit Typenzahl rechts (#69).
   Die Ueberschrift ist eine h2 — sie fuehrt die 29 Kachel-h3 an. Damit die
   Schriftgroesse trotzdem der des Frames entspricht, wird die globale
   h2-Groesse aus theme.json hier ueberschrieben. */
.app .rhead {
	margin-top: 40px;
}
.app .rhead h2 {
	font-size: 16.5px;
	font-weight: 900;
	letter-spacing: 0;
	line-height: 1.3;
}
.app .rhead > span {
	font-size: 13px;
	color: var(--mut);
}

/* Hinweis auf das noch fehlende Material der Kundin. */
.katannot {
	margin: -10px 0 22px;
}

/* Filterspalte -----------------------------------------------------
   Die Gruppenueberschriften sind h2 (Ueberschriftenfolge h1 -> h2 -> h3);
   sie sehen aus wie die .side h4 aus system.css. */
.side h2 {
	font-size: 11.5px;
	font-weight: 900;
	line-height: 1.4;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--soft);
	margin: 24px 0 12px;
}
.side h2:first-child {
	margin-top: 0;
}

/* Die Kategorie-Filter sind echte Checkboxen in einem <label>: bedienbar
   mit Tastatur, vorlesbar, und ohne JavaScript bleibt alles sichtbar.
   Das Eingabefeld selbst ist unsichtbar, die gestaltete .box tritt an seine
   Stelle — der Fokus muss deshalb an der .box sichtbar werden. */
.side .chk {
	position: relative;
}
.side .chk input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.side .chk:focus-within .box {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}
.side .gebraucht {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--blue);
	padding: 4px 0;
}

/* Dritte Verfuegbarkeitsstufe „Nur zum Kauf" (#37).
   .av und .av.anf stehen bereits in system.css. */
.card .av.kauf {
	color: var(--blue);
}

/* Platzhalter, solange die SABTEC-Typenliste fehlt ------------------
   Kachelbild (C-TEC 210, C-TEC 600 B, L-TEC 5), Bezeichnungs-Chip und
   Fakten-Chips. Gelb gestrichelt = im Kundentermin sofort als offen
   erkennbar; vor dem Go-live muss das verschwinden. */
.card .pic.ph {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--custom--ui--flaeche-bild);
	text-align: center;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--wp--custom--ui--hinweis-ink-2);
	line-height: 1.5;
}

/* Nachtrag 18.08.2026: Drei Typen haben kein Bild (C-TEC 210, C-TEC 600 B,
   L-TEC 5) — im Kundenmaterial existiert dafuer keines. Seit die gelben
   Hinweise aus sind, stand dort eine leere graue Flaeche, die wie ein
   Ladefehler aussah. Das blasse Signet macht daraus eine Flaeche, die
   gewollt wirkt. Es ist Deko und traegt keine Aussage, deshalb bewusst
   ueber CSS und nicht als <img> im Markup. */
.card .pic.ph:empty::after,
.card .pic.ph::after {
	content: "";
	width: 96px; height: 44px;
	background: url("../img/logo.svg") center/contain no-repeat;
	opacity: .17;
}
.card .pic.ph:has(span)::after { display: none; }
.card .tag.ph,
.badge.ph {
	background: var(--wp--preset--color--white);
	color: var(--wp--custom--ui--hinweis-ink-2);
	border: 1px dashed var(--wp--custom--ui--hinweis-line);
}

/* Abschlusshinweise unter dem Katalog (#68 und #70). */
.katnote {
	margin-top: 36px;
	border-top: 1px solid var(--line);
	padding-top: 28px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}
.katnote p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--mut);
}
.katnote b {
	color: var(--ink);
}
.katnote a {
	color: var(--blue);
	font-weight: 900;
}

@media (max-width: 700px) {
	.katnote {
		grid-template-columns: 1fr;
	}
}

/* Leerzustand des Filters (29.08.2026) — dieselbe Anmutung wie `.refempty`
   auf der Referenzseite, damit die Seite an beiden Stellen gleich spricht. */
.katleer {
	margin: 8px 0 0;
	padding: 26px 24px;
	background: var(--card);
	border: 1px solid var(--line);
	color: var(--mut);
	font-size: 15.5px;
	line-height: 1.6;
}
.katleer a { color: var(--blue); font-weight: 900; }
.katleer[hidden] { display: none; }