/* ================================================================
   SABTEC — Seite „Container kaufen" (/kaufen/)
   ================================================================
   Nur das, was ausschließlich diese Seite braucht. Alles Geteilte
   steht in assets/css/system.css und wird hier nicht wiederholt.

   Herkunft: der seiteneigene Stilblock aus
   design/22-07-2026-seitenset/kaufen.html, plus die Werte, die dort
   als inline-style am Element hingen. Farbliterale sind durch die
   Tokens aus theme.json ersetzt.

   Reihenfolge: 1. Prinzipien-Raster  2. Referenzblöcke
                3. Anfrage-Sektion und Formular  4. Teaser  5. Mobil
   ================================================================ */

/* 1. Prinzipien ---------------------------------------------------- */

/* Vier Kacheln statt der drei des System-Rasters. Die Umbrüche des
   Systems (2 Spalten ab 1120, 1 ab 700) muss diese Regel selbst
   nachziehen, weil sie spezifischer ist — siehe Abschnitt 5. */
.kaufen-prinzipien .lgrid { grid-template-columns: repeat(4, 1fr); }

/* Die Kachelüberschrift ist eine h3, damit die Gliederung nicht von
   h2 auf h4 springt. Aussehen wie die .lcell h4 des Systems. */
.kaufen-prinzipien .lcell h3 { font-size: 19px; font-weight: 900; }

/* 2. Referenzblöcke ------------------------------------------------ */

/* Hinweisbadge über einem Raster. */
.kaufen-hinweis { margin: 0 0 28px; }

/* Nachsatz unter einem Raster (auch unter der C-TEC-Serie). */
.kaufen-fussnote { margin-top: 28px; font-size: 14.5px; color: var(--mut); }
.kaufen-fussnote a { color: var(--blue); font-weight: 900; }

/* Platzhalterkachel, solange SABTEC die Projektauswahl nicht geliefert
   hat: Bildfläche ohne Bild, mit Beschriftung in der Hinweisfarbe. */
.card .pic.ph {
	display: flex; align-items: center; justify-content: center;
	background: var(--wp--custom--ui--flaeche-bild);
	text-align: center; padding: 0 18px; line-height: 1.5;
	font-size: 12px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase;
	color: var(--wp--custom--ui--hinweis-ink-2);
}

/* 3. Anfrage-Sektion ----------------------------------------------- */

/* VERSCHOBEN am 19.08.2026 nach `system.css` (Abschnitt „Anfrageformular").
   Grund: Seit dem 19.08. tragen ZWEI Seiten dieselbe Anfrage-Sektion —
   `/kaufen/` und `/mieten/` (`section-mieten-anfrage.php` uebernimmt die
   Klassen `kaufen-anfrage` und `qwrap`). Seiteneigenes CSS wird aber nur
   fuer den eigenen Slug geladen (`functions.php`, `assets/css/<slug>.css`),
   also galten diese Regeln auf `/mieten/` NICHT: das Formular stand ohne
   Karte, ohne Rahmen, ohne Innenabstand und ueber die volle Containerbreite
   von 1280 px. Genau das hat die Kundin im Termin am 19.08. mit
   „auf den ersten Blick sehr erschlagend" beschrieben.
   Wer die Regeln hierher zurueckholt, bricht `/mieten/` erneut. */

/* 4. Teaser -------------------------------------------------------- */

/* 240 px waren es bis zum 19.08.2026 — abgeleitet aus dem Frame, der
   seinerseits aus dem Prototyp gerendert wurde; eine eigenstaendige
   Figma-Messung gab es dafuer nie. Bei 240 px reicht die Kachel fuer
   Eyebrow, Ueberschrift, zwei Textzeilen UND Knopf nicht: gemessen blieben
   oben 40 px und unten 27 px, im zweiten Teaser lief der Text in den Knopf.
   Jakob hat die Stelle im Kundentermin am 19.08. benannt („hier ist zum
   Beispiel zu wenig Abstand oben und unten"). Die Kachel nimmt deshalb
   wieder das System-Masz aus `system.css` (300 px) — der Sonderfall
   entfaellt. Von Jakob abzunehmen. */

/* 5. Mobil --------------------------------------------------------- */

@media (max-width: 1120px) {
	.kaufen-prinzipien .lgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
	.kaufen-prinzipien .lgrid { grid-template-columns: 1fr; }
	/* Die schmale Fassung des Formularkastens steht seit dem 19.08.2026
	   in `system.css` — sie gilt auf beiden Anfrageseiten. */
}