/* =========================================================================
   seite-checkliste.css  --  Anordnung von /checkliste (m156-checkliste-
   landingpage-p1 bis p4, 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: links Titel und Broschuere,
   rechts das Formular; Inhalt 3 x 2; Vergleich mit Text links und Karten
   rechts; Ansprechpartner mit Foto links und Text rechts.
   ========================================================================= */

/* --- Kopf (p1): Broschuere vor dem Kreis, Plakette, Formular-Karte ------- */
.checkliste-kopf .kopf__extra { margin-top: 1.25rem; }
.checkliste-broschuere { position: relative; width: 100%; max-width: 30rem; aspect-ratio: 1; margin: 0 auto; }
.checkliste-broschuere__kreis { position: absolute; left: 50%; top: 52%; width: 88%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--mint); }
/* R6: Solardach im Kreis statt nur Mint (Rida 2026-10-27 «die heros in desktop ansich mit passenden bildern») */
.checkliste-broschuere__kreis { overflow: hidden; box-shadow: 0 0 0 6px var(--mint); }
/* vergroessert auf die Modulflaeche, damit oben nicht nur ein Streifen Ziegel steht */
.checkliste-broschuere__foto { width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; transform: scale(1.3); transform-origin: 50% 80%; }
.checkliste-broschuere__seite { position: absolute; height: auto; border-radius: 6px; background: var(--weiss); box-shadow: var(--schatten-hoch); }
.checkliste-broschuere__seite--titel { left: 5%; top: 14%; z-index: 2; width: 51%; rotate: -5deg; }
.checkliste-broschuere__seite--innen { right: 5%; top: 7%; z-index: 1; width: 45%; rotate: 5deg; }
.checkliste-broschuere__plakette {
  position: absolute; right: 2%; top: 1%; z-index: 3;
  display: grid; place-items: center; width: 5.25rem; height: 5.25rem; padding: 0.5rem;
  border-radius: 50%; background: var(--gruen); color: var(--weiss); box-shadow: var(--schatten-hoch);
  font: 800 0.875rem/1.2 var(--font-titel); text-align: center;
}
.checkliste-form .form-alert { margin-bottom: 1rem; }
.checkliste-form .field--check { margin-top: 1.25rem; }
/* Tap-Ziele ab 24px: Haekchen und der Link im Satz daneben */
.checkliste-form .field--check input { width: 1.5rem; height: 1.5rem; margin-top: 0; }
.checkliste-form .field--check a { display: inline-block; padding-block: 0.1875rem; }
.checkliste-form__senden { margin-top: 1.25rem; }
.checkliste-form__senden .icon { width: 1.5rem; height: 1.5rem; }
.checkliste-form .form-klein { margin-top: 0.875rem; font-size: var(--fs-klein); }
.checkliste-kopf__haken { margin-top: 1.5rem; }
/* englisch ist der Text laenger: kleinere Stufe, damit die Zeile wie deutsch einzeilig bleibt */
@media (max-width: 47.99rem) { .checkliste-kopf__haken:lang(en) { font-size: clamp(0.625rem, 2.6vw, var(--fs-klein)); } }
@media (max-width: 63.99rem) {
  .checkliste-kopf .kopf__inner { gap: 0; }
  .checkliste-form { position: relative; z-index: 1; margin-top: -1.5rem; }
}
@media (min-width: 48rem) { .checkliste-broschuere__plakette { width: 6.25rem; height: 6.25rem; font-size: var(--fs-text); } }
@media (min-width: 64rem) {
  .checkliste-kopf .kopf__inner--seite { align-items: start; }
  .checkliste-broschuere { margin: 0; }
}

/* Abstand der Sections in drei Stufen: Inhalt normal, Vergleich eng, Ansprechpartner weit */
.checkliste-vergleich { padding-block: var(--pad-eng); }
.checkliste-person { padding-block: clamp(4rem, 9vw, 8rem); }

/* --- Inhalt der Checkliste (p2): sechs weisse Karten mit gruener Nummer --- */
.checkliste-inhalt__liste { display: grid; gap: 0.75rem; margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0; padding: 0; list-style: none; }
.checkliste-inhalt__punkt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: center; padding: 1.125rem 1.25rem; border-radius: var(--r-karte); background: var(--weiss); box-shadow: var(--schatten); }
.checkliste-inhalt__nr { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--gruen); color: var(--weiss); font: 800 1.25rem/1 var(--font-titel); }
.checkliste-inhalt__punkt p { margin-top: 0.25rem; }
.checkliste-inhalt__knopf { margin-top: 1.75rem; }
.checkliste-inhalt__knopf .icon { width: 1.5rem; height: 1.5rem; }
@media (min-width: 48rem) {
  .checkliste-inhalt__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
  .checkliste-inhalt__punkt { align-items: start; padding: 1.5rem 1rem; }
  .checkliste-inhalt__knopf { display: flex; justify-content: center; margin-top: 2.5rem; }
}
@media (min-width: 64rem) { .checkliste-inhalt__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Warum vergleichen (p3): Offerte A und B nebeneinander, auch am Handy -- */
.checkliste-vergleich__paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.checkliste-offerte { padding: 1rem 0.75rem 0.5rem; }
.checkliste-offerte .status { width: 1.5rem; height: 1.5rem; font-size: var(--fs-mini); }
.checkliste-offerte__titel { display: flex; align-items: center; gap: 0.5rem; color: var(--marine); font: 800 1.125rem/1.2 var(--font-titel); }
.checkliste-offerte__titel .icon { width: 1.75rem; height: 1.75rem; color: var(--text-2); }
.checkliste-offerte__balken { display: block; width: 88%; height: 1.125rem; margin: 1rem 0 0.75rem; border-radius: var(--r-rund); background: var(--linie); }
.checkliste-offerte__zeilen { margin: 0; padding: 0; list-style: none; }
.checkliste-offerte__zeilen li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem; align-items: center; min-height: 3rem; padding-block: 0.5rem; border-top: 1px solid var(--linie); color: var(--text); font-size: var(--fs-klein); line-height: 1.35; }
.checkliste-vergleich__fussnote { font-style: italic; }
.checkliste-vergleich__box { margin-top: 1.5rem; }
.checkliste-vergleich__box > .icon { width: 2.75rem; height: 2.75rem; color: var(--gruen); }
.checkliste-vergleich__link { margin-top: 1.5rem; text-align: center; }
/* am Handy inline, damit der Pfeil beim Umbruch am letzten Wort bleibt */
@media (max-width: 47.99rem) {
  .checkliste-vergleich__link .textlink { display: inline; }
  .checkliste-vergleich__link .textlink .icon { display: inline-block; width: 1.125rem; height: 1.125rem; margin-left: 0.375rem; vertical-align: -0.2em; }
}
@media (min-width: 48rem) {
  .checkliste-offerte { padding: 1.5rem 1.5rem 0.75rem; }
  .checkliste-offerte__titel { font-size: var(--fs-h3); }
  .checkliste-offerte__zeilen li { gap: 1rem; font-size: var(--fs-text); }
  .checkliste-offerte .status { width: 1.75rem; height: 1.75rem; font-size: var(--fs-klein); }
}
@media (min-width: 64rem) {
  .checkliste-vergleich__page { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "kopf karten" "box karten" "link karten"; grid-template-rows: auto auto 1fr; gap: 0 clamp(3rem, 6vw, 6rem); align-items: start; }
  .checkliste-vergleich__kopf { grid-area: kopf; }
  .checkliste-vergleich__karten { grid-area: karten; margin-top: 0 !important; }
  .checkliste-vergleich__box { grid-area: box; margin-top: 2rem; }
  .checkliste-vergleich__link { grid-area: link; text-align: left; }
}

/* --- Ihr Ansprechpartner (p4): Karte mit Foto, Kontakt darunter ---------- */
.checkliste-person .person-karte { max-width: 62rem; }
/* R6: steven-telefon ist Hochformat (4:5); im Querformat am Handy (16:10) bleibt der Kopf im Bild */
.checkliste-person .person-karte__bild img { object-position: 50% 20%; }
.person-karte__inhalt { padding: 0 0.25rem 0.5rem; }
.checkliste-person__kontakt { margin-top: 1.5rem; }
@media (min-width: 48rem) {
  .checkliste-person .person-karte { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem; align-items: center; padding: 1.25rem; }
  .checkliste-person .person-karte__bild img, .checkliste-person .person-karte__bild .foto-platzhalter { aspect-ratio: 4 / 5; }
  .checkliste-person .person-karte__name { margin-top: 0; }
  .checkliste-person__kontakt { display: flex; flex-wrap: wrap; gap: 0.25rem 2.5rem; }
}