/* Carport-Anfrage-Check — Selbsttest für Zimmereibetriebe.
   Farben, Schrift, Radien und Buttons kommen aus /landing/styles.css; hier
   stehen nur die Bausteine, die es dort noch nicht gibt. Damit läuft der
   Dunkelmodus (html.dark-theme) ohne eigene Farbtabelle mit.
   Mobile first: eine Frage pro Bildschirm, die drei Antwortflächen müssen auf
   einem Smartphone ohne Zoom mit dem Daumen erreichbar sein. */

/* Auf einer Textseite darf oben Luft sein, hier soll der Check sofort da sein —
   die Nav ist mobil 72px hoch, auf Desktop 180px. */
.cac-seite { padding-top: calc(72px + 1rem); }
@media (min-width: 901px) { .cac-seite { padding-top: calc(180px + 1.5rem); } }

.cac-lead { color: var(--landing-text-muted); margin: 0 0 0.6rem; }

/* --- Karte -------------------------------------------------------------- */
.cac-check {
  background: var(--landing-card);
  border: 1px solid var(--landing-border);
  border-radius: var(--landing-radius);
  box-shadow: var(--landing-shadow);
  padding: 1.1rem;
  margin: 1.4rem 0 2rem;
}
@media (min-width: 720px) { .cac-check { padding: 1.6rem; } }

/* Ein sichtbarer Fokus überall, mit demselben Ring wie in den Baustellenrechnern. */
.cac-check :is(a, button):focus-visible {
  outline: 3px solid var(--landing-accent);
  outline-offset: 2px;
}

/* Ohne JavaScript gibt es keinen Ablauf, den man bedienen könnte. Dann bleiben
   die sieben Fragen mit ihren Hilfetexten als lesbare Checkliste stehen und
   alles, was nur mit Skript sinnvoll ist, verschwindet. Die Klasse setzt das
   Skript, sobald es übernommen hat. */
.cac-check:not(.cac-bereit) .cac-jsonly { display: none !important; }
/* Eigene Anzeigearten (flex, block) dürfen das hidden-Attribut nicht ausstechen. */
.cac-check [hidden] { display: none !important; }

/* .legal-inner a steht in /landing/styles.css hinter den Button-Regeln und
   gewinnt bei gleicher Spezifität — die Buttons bekämen sonst die Linkfarbe,
   im Hellmodus also Akzentgrün auf dem fast schwarzen Primärknopf. */
.cac-check a.btn-primary { color: #fff; }
html.dark-theme .cac-check a.btn-primary { color: #111111; }
.cac-check a.btn-outline { color: var(--landing-text); }
.cac-check a.btn { text-decoration: none; }

/* --- Startbereich -------------------------------------------------------- */
.cac-start p { color: var(--landing-text-muted); margin: 0 0 1rem; }
.cac-hinweis {
  display: inline-block;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--landing-accent);
  background: var(--landing-accent-subtle);
  border: 1px solid var(--landing-border);
  border-radius: 20px;
  padding: 0.35rem 0.9rem;
  margin: 0 0 1.2rem;
}
.cac-check .btn-block { min-height: 56px; }

/* --- Fortschritt --------------------------------------------------------- */
.cac-kopf { margin-bottom: 1.2rem; }
.cac-fortschritt {
  font-size: 0.85rem; font-weight: 600;
  color: var(--landing-text-muted);
  margin: 0 0 0.5rem;
  font-variant-numeric: tabular-nums;
}
.cac-balken {
  height: 6px;
  background: var(--landing-bg-alt);
  border-radius: 3px;
  overflow: hidden;
}
.cac-balken-fuellung {
  height: 100%;
  width: 0;
  background: var(--landing-accent);
  border-radius: 3px;
  transition: width 0.25s ease;
}

/* --- Frage --------------------------------------------------------------- */
.cac-frage { border: 0; padding: 0; margin: 0; min-width: 0; }
.cac-frage > legend {
  display: block; width: 100%;
  font-size: 1.15rem; font-weight: 700; line-height: 1.35;
  color: var(--landing-text);
  padding: 0;
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}
.cac-frage > legend:focus-visible { outline: 3px solid var(--landing-accent); outline-offset: 3px; }
.cac-hilfe {
  font-size: 0.88rem; line-height: 1.6;
  color: var(--landing-text-muted);
  margin: 0 0 1.1rem;
}

/* --- Antwortflächen ------------------------------------------------------ */
/* Gestapelt und volle Breite: auf dem Handy liegt damit jede Fläche im
   Daumenbereich. Erst ab Tablet-Breite nebeneinander. */
.cac-antworten { display: flex; flex-direction: column; gap: 0.6rem; }
.cac-antworten button {
  width: 100%; min-height: 64px;
  padding: 0.7rem 1rem;
  font: inherit; font-size: 1.05rem; font-weight: 600;
  text-align: center;
  color: var(--landing-accent);
  background: transparent;
  border: 1.5px solid var(--landing-accent);
  border-radius: var(--landing-radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cac-antworten button:hover:not([aria-pressed="true"]) { background: var(--landing-accent-subtle); }
.cac-antworten button[aria-pressed="true"] { background: var(--landing-accent); color: #fff; }
@media (min-width: 620px) {
  .cac-antworten { flex-direction: row; }
  .cac-antworten button { flex: 1 1 0; }
}

/* Fehler nie allein über Farbe: es steht immer ein Satz da, und der Absatz
   trägt role="alert". */
.cac-fehler {
  margin: 0.9rem 0 0;
  font-size: 0.9rem; font-weight: 600;
  color: #c0392b;
  min-height: 1.2em;
}
html.dark-theme .cac-fehler { color: #ff8a7a; }

/* --- Schrittnavigation --------------------------------------------------- */
.cac-nav {
  display: flex; gap: 0.6rem;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--landing-border);
}
.cac-nav .btn { flex: 1 1 0; min-height: 52px; }

/* --- Ergebnis ------------------------------------------------------------ */
.cac-ergebnis-kopf { text-align: center; margin-bottom: 1.4rem; }
/* Der Ring ist reine Verstärkung — die Prozentzahl steht als echter Text
   darüber, damit sie vorgelesen, markiert und gedruckt werden kann. */
.cac-ring-wrap { position: relative; width: 152px; max-width: 100%; margin: 0 auto 0.7rem; }
.cac-ring { display: block; width: 100%; height: auto; }
/* Die Spur läuft über --landing-border statt --landing-bg-alt: im Dunkelmodus
   ist bg-alt mit der Seitenfarbe identisch, der Ring wäre dann unsichtbar. */
.cac-ring-spur { fill: none; stroke: var(--landing-border); stroke-width: 10; }
.cac-ring-wert {
  fill: none; stroke: var(--cac-band, var(--landing-accent)); stroke-width: 10;
  stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.5s ease;
}
.cac-prozent {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.15rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--landing-text);
  letter-spacing: -0.03em;
}
.cac-punkte { font-size: 0.88rem; color: var(--landing-text-muted); margin: 0 0 1.1rem; }

/* Die Bandfarbe steuert nur den Ring — die Aussage steht immer als Text daneben. */
.cac-gut     { --cac-band: var(--landing-accent); }
.cac-mittel  { --cac-band: #b26a00; }
.cac-schwach { --cac-band: #c0392b; }
html.dark-theme .cac-mittel  { --cac-band: #e0a24a; }
html.dark-theme .cac-schwach { --cac-band: #ff8a7a; }

.cac-ergebnis h2 {
  font-size: 1.3rem; font-weight: 800; line-height: 1.3;
  color: var(--landing-primary);
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
  text-align: center;
}
.cac-bewertung { color: var(--landing-text-muted); line-height: 1.7; margin: 0; text-align: center; }

/* --- Persönliche Checkliste ---------------------------------------------- */
.cac-checkliste { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--landing-border); }
.cac-checkliste h3 {
  font-size: 1.02rem; font-weight: 700;
  color: var(--landing-primary);
  margin: 0 0 0.8rem;
}
.cac-liste { list-style: none; margin: 0; padding: 0; }
.cac-liste li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8rem; flex-wrap: wrap;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.5rem;
  font-size: 0.92rem; font-weight: 600;
  color: var(--landing-text);
  background: var(--landing-bg-alt);
  border-radius: var(--landing-radius-sm);
}
.cac-marke {
  flex: 0 0 auto;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  border: 1px solid currentColor;
}
.cac-marke-fehlt { color: #c0392b; }
.cac-marke-teil  { color: #b26a00; }
html.dark-theme .cac-marke-fehlt { color: #ff8a7a; }
html.dark-theme .cac-marke-teil  { color: #e0a24a; }
.cac-vollstaendig {
  padding: 0.9rem 1rem;
  font-size: 0.92rem; font-weight: 600;
  color: var(--landing-text);
  background: var(--landing-accent-subtle);
  border-left: 4px solid var(--landing-accent);
  border-radius: var(--landing-radius-sm);
  margin: 0;
}

.cac-haftung {
  margin: 1.4rem 0 0; padding: 0.8rem 1rem;
  font-size: 0.85rem; line-height: 1.6;
  color: var(--landing-text-muted);
  background: var(--landing-bg-alt);
  border-radius: var(--landing-radius-sm);
}

/* --- Produktübergang ------------------------------------------------------
   Bewusst als eigener Block mit Rahmen: der Check bleibt für sich lesbar, das
   Angebot kommt sichtbar getrennt und erst nach dem Ergebnis. */
.cac-produkt {
  margin: 2rem 0 0;
  padding: 1.3rem;
  background: var(--landing-bg-alt);
  border: 1px solid var(--landing-border);
  border-radius: var(--landing-radius);
}
.cac-produkt h3 {
  font-size: 1.15rem; font-weight: 800;
  color: var(--landing-primary);
  margin: 0 0 0.6rem;
  letter-spacing: -0.02em;
}
.cac-produkt p { font-size: 0.9rem; line-height: 1.7; color: var(--landing-text-muted); margin: 0 0 1.1rem; }
.cac-produkt-ctas { display: flex; flex-direction: column; gap: 0.6rem; }
.cac-produkt-ctas .btn { min-height: 52px; }
@media (min-width: 620px) {
  .cac-produkt-ctas { flex-direction: row; }
  .cac-produkt-ctas .btn { flex: 1 1 0; }
}
.cac-neustart { text-align: center; margin: 1.1rem 0 0; }
.cac-link {
  font: inherit; font-size: 0.88rem;
  color: var(--landing-accent);
  background: none; border: 0; padding: 0.4rem 0.2rem;
  text-decoration: underline; cursor: pointer;
}
.cac-link:hover { color: var(--landing-accent-hover); }

/* --- Fachtext ------------------------------------------------------------ */
/* .legal-inner p setzt keinen Abstand nach unten — auf einer Textstrecke wie
   dieser würden die Absätze sonst aneinanderkleben. */
.cac-seo p { margin: 0 0 1rem; }
.cac-seo h2 { margin-top: 2rem; }
.cac-seo ul { padding-left: 1.2rem; }
.cac-seo li { margin-bottom: 0.4rem; }

/* --- Druck ---------------------------------------------------------------
   Gedruckt wird die persönliche Klärungsliste. Navigation, Footer, Fachtext
   und die Überleitung zum Konfigurator bleiben draußen. */
@media print {
  body { background: #fff; color: #000; }
  .landing-nav, .landing-footer, .breadcrumb, .btn-theme-toggle,
  .nav-mobile-toggle, .cac-nav, .cac-produkt, .cac-neustart,
  .cac-seo, .cac-start, .cac-fragen { display: none !important; }
  .cac-check { border: 0; box-shadow: none; padding: 0; margin: 0; }
  .cac-liste li { break-inside: avoid; border: 1px solid #999; background: none; }
  .cac-ring-spur { stroke: #ddd; }
  a[href]::after { content: ''; }
}

/* --- Bewegungsreduktion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cac-balken-fuellung, .cac-ring-wert, .cac-antworten button { transition: none; }
}