/* =========================================================================
   seite-pruefen.css  --  Anordnung von /offerte-pruefen (m156-offerten-
   pruefen-p1 bis p5, Umbau R4, E9). Komponenten aus styles.css, hier nur,
   was es nur auf dieser Seite gibt. Nur Tokens aus theme.css.
   Desktop aus den Handy-Entwuerfen abgeleitet: Kopf einspaltig wie im
   Entwurf (der Titel ist fuer zwei Spalten zu lang), Knopf und Link
   nebeneinander; Formular, Schritte und Fragen zweispaltig; Pruefpunkte 3 x 2.
   ========================================================================= */

/* --- Kopf (p1): Lead, Knopf, Link zur Checkliste, Haekchen, Foto mit Welle -- */
.pruefen-kopf__aktion { display: grid; justify-items: center; gap: 1.25rem; }
.pruefen-kopf__aktion .knopf .icon { width: 1.5rem; height: 1.5rem; }
/* Link wie im Entwurf in Marine; inline, damit der Pfeil beim Umbruch am letzten Wort bleibt */
.pruefen-kopf__link { display: inline; color: var(--marine); font-weight: 500; text-align: center; }
.pruefen-kopf__link .icon { display: inline-block; width: 1.125rem; height: 1.125rem; margin-left: 0.375rem; vertical-align: -0.2em; }
@media (hover: hover) { .pruefen-kopf__link:hover { color: var(--gruen); } }
.pruefen-kopf__haken { margin-top: 1.75rem; }
.kopf__foto { height: clamp(20rem, 90vw, 34rem); }
.kopf__foto img { object-position: 50% 70%; }
@media (min-width: 48rem) {
  .pruefen-kopf__aktion { grid-auto-flow: column; justify-content: start; align-items: center; gap: 2rem; }
  .pruefen-kopf__link { text-align: left; }
}

/* Abstand der Sections in drei Stufen: Formular und Fragen normal, Schritte eng, Marine weit */
.pruefen-schritte { padding-block: var(--pad-eng); }
.pruefen-punkte { padding-block: clamp(4rem, 9vw, 8rem); }

/* --- Formular mit Upload (p2) -------------------------------------------- */
.pruefen-form .upload { background: var(--weiss); }
/* Tap-Ziele ab 24px: Haekchen und die Links im Satz daneben */
.pruefen-form .field--check input { width: 1.5rem; height: 1.5rem; margin-top: 0; }
.pruefen-form .field--check a { display: inline-block; padding-block: 0.1875rem; }
.pruefen-form .form-alert { margin-bottom: 1rem; }
.pruefen-form .upload + .form-reihe { margin-top: 1rem; }
.pruefen-form .field--check { margin-top: 1.25rem; }
.pruefen-form__senden { margin-top: 1.25rem; }
/* «Offerte kostenlos prüfen lassen» bleibt am Handy auf einer Zeile wie im Entwurf */
@media (max-width: 29.99rem) {
  .pruefen-form .form-karte { padding: 1rem; }
  .pruefen-form__senden { gap: 0.5rem; padding-inline: 0.75rem; font-size: 1rem; }
}
.pruefen-form__haken { margin-top: 1.75rem; color: var(--marine); }
@media (min-width: 64rem) {
  .pruefen-form__page { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-areas: "kopf karte" "haken karte"; grid-template-rows: auto 1fr; gap: 0 clamp(3rem, 6vw, 6rem); align-items: start; }
  .pruefen-form__kopf { grid-area: kopf; }
  .pruefen-form__karte { grid-area: karte; margin-top: 0 !important; }
  .pruefen-form__haken { grid-area: haken; margin-top: 2rem; }
}

/* --- So einfach geht's (p3) ------------------------------------------------ */
.pruefen-schritte__knopf { margin-top: 2.25rem; }
.pruefen-schritte__knopf .knopf .icon { width: 1.5rem; height: 1.5rem; }
@media (min-width: 64rem) {
  .pruefen-schritte__page { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "kopf liste" "knopf liste"; grid-template-rows: auto 1fr; gap: 0 clamp(3rem, 6vw, 6rem); align-items: start; }
  .pruefen-schritte__kopf { grid-area: kopf; }
  .pruefen-schritte__liste { grid-area: liste; margin-top: 0 !important; }
  .pruefen-schritte__knopf { grid-area: knopf; }
}

/* --- Unsere Pruefung auf Marine (p4): 2 x 3, ab 64rem 3 x 2 --------------- */
.pruefen-punkte__raster { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.pruefen-punkte .kachel { gap: 0.75rem; padding: 1.125rem 1rem; }
.pruefen-punkte .kachel__titel { font-size: var(--fs-h3); line-height: 1.25; }
.pruefen-punkte .kachel__text { margin-top: 0.375rem; font-size: var(--fs-klein); line-height: 1.45; }
@media (min-width: 64rem) {
  .pruefen-punkte__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pruefen-punkte .kachel { padding: 1.5rem 1.625rem; }
  .pruefen-punkte .kachel__text { font-size: var(--fs-text); }
}

/* --- Haeufige Fragen (p5) ------------------------------------------------- */
.pruefen-fragen__schluss { margin-top: 2rem; color: var(--text); text-align: center; }
.pruefen-fragen__schluss .textlink { margin-top: 0.25rem; font-weight: 500; }
@media (min-width: 64rem) {
  .pruefen-fragen__page { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .pruefen-fragen__kopf { position: sticky; top: calc(var(--header-h) + 2rem); }
  .pruefen-fragen__liste { margin-top: 0 !important; }
}