/* =============================================================
   check.css – Google-Ads-Check (/google-ads-check)
   Baut auf rechner.css (quiz_card, quiz_option, quiz_progress …) und
   home.css (pain_grid, kontakt_success-icon) auf.
   Ampel-Töne: Rot = --status-fehler, Grün und Gelb als eigene Ampel-Töne (nur für die Ampel).
   ============================================================= */
:root{
  --ampel-rot:var(--status-fehler);
  --ampel-gelb:#D49A2A;
  --ampel-gruen:#5FA83A;
  --ampel-rot-hell:#F8E2DC;
  --ampel-gelb-hell:#FBEBCB;
  --ampel-gruen-hell:var(--himmel);
}

/* ---------- Aufbau: Intro links, Check rechts ---------- */
.check_component{display:grid;grid-template-columns:1fr 1.15fr;gap:4rem;align-items:start}
.check_intro{position:sticky;top:calc(var(--navbar-height) + 2rem)}
.check_component.is-result{display:block}
.check_component.is-result .check_intro{display:none}
.check_card{position:relative;box-shadow:0 1px 0 var(--line),0 24px 48px -32px rgba(24,40,72,.25)}
.check_pain-cta{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}
.check_pain-icon{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:var(--radius-small);background:var(--himmel);color:var(--marine)}
.check_pain-icon svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.check_progress-fill{width:0}

/* ---------- Fragen ---------- */
.check_stage{min-height:19rem;transition:opacity .14s ease,transform .14s ease}
.check_stage.is-leaving{opacity:0;transform:translateY(-6px)}
.check_q{animation:quiz-in .3s ease}
.check_q.is-back{animation-name:check-in-back}
@keyframes check-in-back{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.check_question:focus{outline:none}
.check_options{display:grid;gap:1rem}
.check_option{min-height:4rem;padding:1rem;font-size:1rem;line-height:1.4;-webkit-tap-highlight-color:transparent;transition:border-color .15s ease,background-color .15s ease,transform .1s ease}
.check_option:active{transform:scale(.99)}
.check_option{gap:1rem;font-weight:500}
.check_radio{position:relative;flex:none;width:1.375rem;height:1.375rem;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--weiss);transition:border-color .15s ease,background-color .15s ease}
.check_option:hover .check_radio{border-color:var(--marine)}
.check_option.is-selected .check_radio{border-color:var(--marine);background:var(--marine)}
.check_option.is-selected .check_radio::after{content:"";position:absolute;left:50%;top:45%;width:.375rem;height:.625rem;border:solid var(--weiss);border-width:0 2px 2px 0;transform:translate(-50%,-50%) rotate(45deg)}
.check_next{margin-left:auto}
.check_next[hidden]{display:none}

/* Auswertung lädt: Bildmarke wächst */
.check_loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:20rem;text-align:center}
.check_loading-mark{width:3rem;height:3rem}
.check_loading-mark .brand_mark-plane{animation:check-fly 1.1s ease-in-out infinite}
@keyframes check-fly{0%,100%{transform:translate(-1.5px,1.5px)}50%{transform:translate(1.5px,-1.5px)}}

/* ---------- Ergebnis: Kopf ---------- */
.check_result:focus{outline:none}
.check_result[hidden]{display:none}
.check_summary{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"ampel text score" "ampel bar bar";gap:2rem 3rem;align-items:center;padding:3rem;border-radius:var(--radius-large);background:var(--weiss);border:1px solid var(--line);animation:quiz-in .4s ease}
.check_ampel{grid-area:ampel;align-self:start;display:flex;flex-direction:column;gap:.5rem;padding:.5rem;border-radius:10rem;background:var(--marine)}
.check_ampel span{display:block;width:2rem;height:2rem;border-radius:50%;background:rgba(255,255,255,.1)}
.check_ampel[data-level="rot"] .is-rot{background:var(--ampel-rot);box-shadow:0 0 0 4px rgba(168,65,46,.28)}
.check_ampel[data-level="gelb"] .is-gelb{background:var(--ampel-gelb);box-shadow:0 0 0 4px rgba(181,131,44,.3)}
.check_ampel[data-level="gruen"] .is-gruen{background:var(--limette);box-shadow:0 0 0 4px rgba(205,242,92,.3)}
.check_summary-text{grid-area:text;max-width:40rem}
.check_summary-lead{color:var(--text-muted);font-size:1.0625rem}
.check_score{grid-area:score;text-align:right}
.check_score-value{font-family:var(--font-display);letter-spacing:-.035em;font-weight:800;font-size:5rem;line-height:.9;color:var(--marine);white-space:nowrap}
.check_score-max{font-size:2rem;color:var(--text-soft)}
.check_score-label{margin-top:.5rem;font-size:.875rem;font-weight:600;;color:var(--text-soft)}
.check_summary-bar{grid-area:bar}
.check_bar{display:grid;grid-template-columns:repeat(10,1fr);gap:.25rem}
.check_bar span{height:.5rem;border-radius:var(--radius-pill);background:var(--himmel-dunkel)}
.check_bar .is-rot{background:var(--ampel-rot)}
.check_bar .is-gelb{background:var(--ampel-gelb)}
.check_bar .is-gruen{background:var(--ampel-gruen)}
.check_legend{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:.875rem;color:var(--text-muted)}
.check_legend > span{display:inline-flex;align-items:center;gap:.5rem}
.check_dot{flex:none;display:inline-block;width:.625rem;height:.625rem;border-radius:50%;background:currentColor}
.check_dot.is-rot{background:var(--ampel-rot)}
.check_dot.is-gelb{background:var(--ampel-gelb)}
.check_dot.is-gruen{background:var(--ampel-gruen)}

/* ---------- Ergebnis: Befunde + Seitenleiste ---------- */
.check_body{display:grid;grid-template-columns:1.6fr 1fr;gap:3rem;align-items:start;margin-top:4rem}
.check_items{display:grid;gap:1.5rem}
.check_item{padding:2rem;border-radius:var(--radius-large);background:var(--weiss);border:1px solid var(--line)}
.check_item.is-hebel{border-color:var(--marine);box-shadow:inset 0 0 0 1px var(--marine)}
.check_item-head{display:flex;flex-wrap:wrap;gap:.5rem}
.check_item-text{color:var(--text-muted)}
.check_pill{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border-radius:10rem;font-size:.8125rem;font-weight:600;line-height:1.3}
.check_pill.is-rot{background:var(--ampel-rot-hell);color:#8A3323}
.check_pill.is-rot .check_dot{background:var(--ampel-rot)}
.check_pill.is-gelb{background:var(--ampel-gelb-hell);color:#7A5517}
.check_pill.is-gelb .check_dot{background:var(--ampel-gelb)}
.check_pill.is-hebel{background:var(--limette);color:var(--marine)}

.check_fix{position:relative;margin-top:1.5rem;padding:1.5rem;border-radius:var(--radius-small);background:var(--himmel);overflow:hidden}
.check_fix-label{margin-bottom:.5rem;font-size:.875rem;font-weight:600;;color:var(--marine)}
.check_fix-text{filter:blur(6px);user-select:none;transition:filter .5s ease}
.check_fix-lock{position:absolute;left:50%;top:50%;transform:translate(-50%,-30%);display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border:0;border-radius:10rem;background:var(--marine);color:var(--weiss);font:inherit;font-size:.875rem;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .2s ease}
.check_fix-lock:hover{background:var(--marine-hover)}
.check_fix-lock svg{width:.875rem;height:.875rem;color:var(--limette)}
.check_result.is-unlocked .check_fix{background:var(--himmel-hell);box-shadow:inset 4px 0 0 var(--limette)}
.check_result.is-unlocked .check_fix-text{filter:none;user-select:auto}
.check_result.is-unlocked .check_fix-lock{display:none}
.check_result:not(.is-unlocked) .check_fix-text{pointer-events:none}

.check_good{margin-top:3rem;padding:2rem;border-radius:var(--radius-large);border:1px solid var(--line)}
.check_good-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem;color:var(--text-muted)}
.check_good-list li{display:flex;align-items:baseline;gap:1rem;margin:0;padding:0}
.check_good-list strong{font-weight:600;color:var(--marine)}
.check_restart{margin-top:2rem}

.check_aside{position:sticky;top:calc(var(--navbar-height) + 2rem);display:grid;gap:1.5rem}
.check_unlock{display:grid;gap:1.5rem}
.check_form,.check_done{padding:2rem;border-radius:var(--radius-large);background:var(--weiss);border:1px solid var(--marine);box-shadow:0 24px 48px -32px rgba(24,40,72,.3)}
.check_done{outline:none;animation:quiz-in .35s ease}
.check_unlock-text{font-size:.9375rem;color:var(--text-muted)}
.check_optional{font-weight:400;color:var(--text-soft)}
.check_next-step{padding:2rem;border-radius:var(--radius-large)}
.check_next-text{font-size:.9375rem;color:var(--muted-on-surface)}
.check_next-link{font-size:.9375rem;color:var(--weiss);text-decoration:underline;text-decoration-color:var(--limette);text-decoration-thickness:2px;text-underline-offset:4px}
.check_btn-icon{width:1rem;height:1rem}
.check_print-head,.check_print-foot{display:none}

/* ---------- Responsiv ---------- */
@media (max-width:991px){
  .check_component{grid-template-columns:1fr;gap:3rem}
  .check_intro{position:static}
  .check_body{grid-template-columns:1fr;margin-top:3rem}
  .check_aside{position:static}
}
@media (max-width:640px){
  .check_benefits-wrap,.check_contact{display:none}
  .section_check .padding-section-large.navbar-space{padding-top:6rem}
  .check_intro .hero_lead{font-size:1rem}
  .check_intro .rechner_note{gap:.5rem 1rem;padding-top:1rem;font-size:.8125rem}
  .check_items .check_aside{margin:.5rem 0}
  .check_component{gap:2rem}
  .check_stage{min-height:0}
  .check_option{min-height:3.5rem}
  .check_summary{grid-template-columns:auto 1fr;grid-template-areas:"ampel score" "text text" "bar bar";gap:1.5rem;padding:1.5rem}
  .check_ampel{flex-direction:row;align-self:center}
  .check_ampel span{width:1.5rem;height:1.5rem}
  .check_score-value{font-size:3.5rem}
  .check_score-max{font-size:1.5rem}
  .check_item,.check_good,.check_form,.check_done,.check_next-step{padding:1.5rem}
  .check_fix{padding:1rem}
}
@media (prefers-reduced-motion:reduce){
  .check_q,.check_summary,.check_done{animation:none}
  .check_stage{transition:none}
  .check_loading-mark .brand_mark-plane{animation:none}
}

/* ---------- Druck / „Als PDF speichern“ ---------- */
@media print{
  @page{margin:16mm 14mm}
  body{background:#fff}
  .navbar_component,.footer_component,.skip-link,#CybotCookiebotDialog,
  main > section:not(#check),.check_aside,.check_restart,.check_fix-lock{display:none!important}
  .padding-section-large.navbar-space{padding-top:0;padding-bottom:0}
  .padding-global{padding-left:0;padding-right:0}
  .surface-leinen{background:#fff}
  .check_print-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--line);font-size:.8125rem;color:var(--text-muted)}
  .check_print-foot{display:block;margin-top:2rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.75rem;color:var(--text-soft)}
  .check_summary,.check_item,.check_good{box-shadow:none;break-inside:avoid;page-break-inside:avoid}
  .check_summary,.check_item,.check_good,.check_fix{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .check_body{display:block;margin-top:2rem}
  html{font-size:13px}
  .check_summary{grid-template-columns:auto 1fr auto;grid-template-areas:"ampel text score" "ampel bar bar";gap:1rem 2rem;padding:1.5rem}
  .check_ampel{flex-direction:column}
  .check_ampel span{width:1.25rem;height:1.25rem}
  .check_score-value{font-size:3.5rem}
  .check_items{gap:1rem}
  .check_item{padding:1rem 1.25rem}
  .check_item .heading-style-h5{font-size:1.125rem}
  .check_item .margin-top.margin-small{margin-top:.5rem!important}
  .check_fix{margin-top:.75rem;padding:.75rem 1rem}
  .check_good{margin-top:1.5rem;padding:1.25rem}
  .check_result.is-unlocked .check_fix-text{filter:none!important}
  [data-reveal]{opacity:1!important;transform:none!important}
}

/* Touch: kein „hängender“ Hover-Zustand auf der zuletzt getippten Antwort */
@media (hover:none){.check_option:not(.is-selected):hover{background:var(--weiss);border-color:var(--line)}}