/* ============================================================
   Regressradar – Oberfläche
   Angelehnt an den Auftritt von therapiefreiheit.org:
   kräftiges Rot, runde Formen, weiche Kreise, viel Luft.
   ============================================================ */

.rr-hero,.rr-rahmen,.rr-abschluss{
  --rr-rot:#C31736;
  --rr-rot-tief:#8E0F26;
  --rr-rot-hell:#E8556E;
  --rr-rosa:#FBF0F2;
  --rr-rosa-tief:#F5DDE2;
  --rr-tinte:#241F20;
  --rr-grau:#6E6A6B;
  --rr-linie:#EDE9EA;
  --rr-gruen:#1F8A52;
  --rr-gelb:#D99000;
  --rr-schatten:0 18px 50px -22px rgba(60,10,22,.35);
}
.rr-hero *,.rr-rahmen *,.rr-abschluss *{box-sizing:border-box}

/* ---------- Hero: rote Fläche als Blickfang ---------- */
.rr-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--rr-rot) 0%,var(--rr-rot-tief) 100%);
  color:#fff;padding:64px 24px 78px;border-radius:0 0 34px 34px;
}
.rr-hero:before,.rr-hero:after{
  content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none;
}
.rr-hero:before{width:420px;height:420px;top:-170px;right:-110px}
.rr-hero:after{width:260px;height:260px;bottom:-130px;left:-80px}
.rr-hero-innen{
  max-width:820px;margin:0 auto;position:relative;z-index:1;
  display:flex;align-items:center;gap:44px;
}
.rr-hero-text{flex:1 1 auto;min-width:0}
@media(max-width:820px){.rr-hero-innen{display:block}}
.rr-logo{max-width:190px;height:auto;display:block;margin:0 0 32px;filter:brightness(0) invert(1)}
.rr-hero-titel{
  font-size:clamp(34px,6vw,54px);line-height:1.06;letter-spacing:-.02em;
  margin:0 0 18px;color:#fff;font-weight:800;
}
.rr-hero-sub{font-size:clamp(17px,2.2vw,21px);line-height:1.5;color:rgba(255,255,255,.9);margin:0 0 30px;max-width:52ch}
.rr-hero-punkte{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.rr-hero-punkte li{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:9px 18px;font-size:15px;line-height:1.35;color:#fff;
}

/* ---------- Werkzeug ---------- */
.rr-rahmen{
  max-width:820px;margin:0 auto;padding:0 20px 56px;
  font-size:17px;line-height:1.62;color:var(--rr-tinte);
}
.rr-hero + .rr-rahmen{margin-top:-42px;position:relative;z-index:2}
.rr-karte{
  background:#fff;border:1px solid var(--rr-linie);border-radius:24px;
  padding:44px 44px;box-shadow:var(--rr-schatten);
}
@media(max-width:600px){
  .rr-hero{padding:40px 18px 62px;border-radius:0 0 24px 24px}
  .rr-rahmen{padding:0 14px 36px}
  .rr-karte{padding:28px 22px;border-radius:18px}
}

.rr-rahmen .rr-h1{font-size:clamp(26px,3.8vw,34px);line-height:1.18;letter-spacing:-.015em;font-weight:800;margin:0 0 18px}
.rr-rahmen .rr-h2{font-size:clamp(23px,3.2vw,29px);line-height:1.2;letter-spacing:-.012em;font-weight:800;margin:0 0 14px}
.rr-rahmen h3{font-size:20px;line-height:1.3;font-weight:800;margin:0 0 12px}
.rr-rahmen p{margin:0 0 17px;max-width:62ch}
.rr-rahmen p:last-child{margin-bottom:0}
.rr-leise{color:var(--rr-grau);font-size:15.5px}

.rr-schirm{display:none}
.rr-schirm.rr-aktiv{display:block}

/* ---------- Fortschritt ---------- */
.rr-schritte{height:8px;background:var(--rr-rosa-tief);border-radius:999px;overflow:hidden;margin-bottom:24px}
.rr-schritte i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--rr-rot-hell),var(--rr-rot))}
@media(prefers-reduced-motion:no-preference){.rr-schritte i{transition:width .45s cubic-bezier(.4,0,.2,1)}}

.rr-zaehler{margin-bottom:16px;font-size:14px;color:var(--rr-grau)}
.rr-chip{
  display:inline-block;background:var(--rr-rosa);color:var(--rr-rot);
  border-radius:999px;padding:5px 14px;font-size:13.5px;font-weight:700;margin-right:10px;
}
.rr-frage{font-size:clamp(23px,3.4vw,30px);line-height:1.22;letter-spacing:-.015em;font-weight:800;margin:0 0 10px !important;max-width:24ch}
.rr-hinweis{font-size:16px;line-height:1.55;color:var(--rr-grau);margin:0 0 26px !important;max-width:56ch}

/* ---------- Antwortoptionen ---------- */
.rr-opt{
  display:flex;align-items:center;gap:15px;
  border:2px solid var(--rr-linie);border-radius:14px;background:#fff;
  padding:16px 20px;margin-bottom:11px;cursor:pointer;
  font-size:17px;line-height:1.4;font-weight:500;
}
.rr-opt:before{
  content:"";flex:none;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--rr-rosa-tief);background:#fff;
}
.rr-opt:hover{border-color:var(--rr-rot-hell);background:var(--rr-rosa)}
.rr-opt:focus-visible{outline:3px solid var(--rr-rot);outline-offset:2px}
.rr-opt.rr-gewaehlt{border-color:var(--rr-rot);background:var(--rr-rosa)}
.rr-opt.rr-gewaehlt:before{background:var(--rr-rot);border-color:var(--rr-rot);box-shadow:inset 0 0 0 4px #fff}
@media(prefers-reduced-motion:no-preference){.rr-opt{transition:border-color .15s,background .15s}}

/* ---------- Schaltflächen ---------- */
.rr-rahmen .rr-knopf{
  display:inline-block;background:var(--rr-rot);color:#fff;border:0;border-radius:999px;
  font-size:17px;font-weight:800;letter-spacing:.005em;padding:17px 38px;
  cursor:pointer;text-decoration:none;line-height:1.3;
  box-shadow:0 12px 26px -12px rgba(195,23,54,.75);
}
.rr-rahmen .rr-knopf:hover{background:var(--rr-rot-tief);color:#fff}
.rr-rahmen .rr-knopf:focus-visible{outline:3px solid var(--rr-tinte);outline-offset:3px}
.rr-rahmen .rr-knopf[disabled]{background:#CFC9CB;box-shadow:none;cursor:not-allowed}
.rr-zurueck{
  background:none;border:0;color:var(--rr-grau);font-size:15px;font-family:inherit;
  padding:14px 4px;margin-top:8px;cursor:pointer;display:block;
  text-decoration:underline;text-underline-offset:3px;
}
.rr-zurueck:hover{color:var(--rr-rot)}

/* ---------- Ergebnis ---------- */
.rr-ergebnis-kopf{
  border-radius:20px;padding:30px 30px 26px;margin:-6px 0 26px;
  background:var(--rr-rosa);border:2px solid var(--rr-rosa-tief);
}
.rr-g .rr-ergebnis-kopf{background:#EAF6EF;border-color:#CBE7D8}
.rr-y .rr-ergebnis-kopf{background:#FCF3E0;border-color:#F2E0B8}
.rr-r .rr-ergebnis-kopf{background:var(--rr-rosa);border-color:var(--rr-rosa-tief)}
.rr-stufe{
  display:inline-block;border-radius:999px;padding:7px 18px;margin-bottom:14px;
  font-size:14px;font-weight:800;letter-spacing:.02em;color:#fff;background:var(--rr-grau);
}
.rr-g .rr-stufe{background:var(--rr-gruen)}
.rr-y .rr-stufe{background:var(--rr-gelb)}
.rr-r .rr-stufe{background:var(--rr-rot)}
.rr-ergebnis-kopf .rr-h2{margin-bottom:24px !important}

/* ---------- Radar: das eine Bild, das die Seite trägt ---------- */
.rr-radar{position:relative}
.rr-radar svg{display:block;width:100%;height:auto;overflow:visible}
.rr-radar .rr-ring{fill:none;stroke-width:1.5}
.rr-radar .rr-kreuz{stroke-width:1.5}
.rr-radar .rr-sweep path{fill:url(#rr-sweep-farbe)}

/* Hero-Variante: weiß auf Rot, läuft ruhig durch */
.rr-radar-hero{flex:0 0 250px;width:250px;opacity:.9}
@media(max-width:820px){.rr-radar-hero{display:none}}
.rr-radar-hero .rr-ring{stroke:rgba(255,255,255,.32)}
.rr-radar-hero .rr-kreuz{stroke:rgba(255,255,255,.22)}
.rr-radar-hero .rr-sweep path{fill:rgba(255,255,255,.22)}

/* Ergebnis-Variante: farbige Zonen */
.rr-radar-ergebnis{max-width:290px;margin:6px auto 0}
.rr-radar-ergebnis .rr-zone{stroke:none}
.rr-radar-ergebnis .rr-zone-g{fill:#1F8A52;fill-opacity:.16}
.rr-radar-ergebnis .rr-zone-y{fill:#D99000;fill-opacity:.16}
.rr-radar-ergebnis .rr-zone-r{fill:#C31736;fill-opacity:.13}
.rr-radar-ergebnis .rr-ring{stroke:rgba(36,31,32,.16)}
.rr-radar-ergebnis .rr-kreuz{stroke:rgba(36,31,32,.11)}
.rr-radar-ergebnis .rr-sweep path{fill:rgba(36,31,32,.10)}

.rr-sweep{transform-origin:120px 120px}
@media(prefers-reduced-motion:no-preference){
  .rr-radar-hero .rr-sweep{animation:rr-dreh 7s linear infinite}
  .rr-sweep-einmal{animation:rr-dreh 1.5s cubic-bezier(.3,0,.2,1) 1 forwards}
}
@keyframes rr-dreh{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.rr-signal{fill:#241F20;stroke:#fff;stroke-width:4;opacity:0}
.rr-radar.rr-gesetzt .rr-signal{opacity:1}
@media(prefers-reduced-motion:no-preference){
  .rr-signal{transition:opacity .4s ease .1s}
  .rr-radar.rr-gesetzt .rr-signal{animation:rr-puls 2.4s ease-out infinite .6s}
}
@keyframes rr-puls{
  0%{stroke:#fff;stroke-width:4}
  25%{stroke:rgba(255,255,255,.35);stroke-width:12}
  60%,100%{stroke:#fff;stroke-width:4}
}
.rr-radar-text{display:flex;justify-content:space-between;gap:14px;margin-top:16px;font-size:12.5px;color:var(--rr-grau);font-weight:600}
@media(max-width:600px){.rr-radar-text{font-size:11.5px}}

/* Faktoren */
.rr-rahmen ul.rr-faktoren{margin:0 0 26px;padding:0;list-style:none}
.rr-rahmen ul.rr-faktoren li{
  position:relative;padding:15px 18px 15px 46px;margin-bottom:9px;border-radius:14px;
  background:#FAF8F8;border:1px solid var(--rr-linie);
  font-size:16px;line-height:1.5;color:var(--rr-tinte);
}
.rr-rahmen ul.rr-faktoren li:before{
  content:"!";position:absolute;left:16px;top:16px;width:20px;height:20px;border-radius:50%;
  background:var(--rr-rot);color:#fff;font-size:13px;font-weight:800;text-align:center;line-height:20px;
}
.rr-trenn{border:0;border-top:1px solid var(--rr-linie);margin:32px 0}

/* ---------- Formular ---------- */
.rr-feld{display:block;font-size:14px;font-weight:600;color:var(--rr-grau);margin-bottom:7px}
.rr-rahmen input[type=text],.rr-rahmen input[type=email],.rr-rahmen input[type=tel]{
  width:100%;padding:15px 17px;border:2px solid var(--rr-linie);border-radius:12px;background:#fff;
  font-family:inherit;font-size:16.5px;color:var(--rr-tinte);margin-bottom:18px;
}
.rr-rahmen input::placeholder{color:#B3ADAF}
.rr-rahmen input:focus{outline:0;border-color:var(--rr-rot);background:#fff}
.rr-paar{display:flex;gap:16px}
.rr-paar>div{flex:1;min-width:0}
@media(max-width:600px){.rr-paar{display:block}}
.rr-einwilligung{
  display:flex;gap:13px;align-items:flex-start;font-size:15px;line-height:1.5;
  color:var(--rr-grau);margin:6px 0 26px;max-width:62ch;
  background:#FAF8F8;border-radius:14px;padding:16px 18px;
}
.rr-einwilligung input{margin-top:2px;flex:none;width:20px;height:20px;accent-color:var(--rr-rot)}
.rr-hp{position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important}
.rr-fehler{
  color:var(--rr-rot);font-size:15.5px;font-weight:600;margin:0 0 18px !important;
  background:var(--rr-rosa);border-radius:12px;padding:14px 18px;
}

.rr-fuss{
  font-size:13.5px;line-height:1.6;color:var(--rr-grau);
  margin:34px 0 0 !important;padding-top:20px;border-top:1px solid var(--rr-linie);max-width:64ch;
}

/* ---------- Abschluss ---------- */
.rr-abschluss{padding:8px 20px 56px}
.rr-abschluss-innen{
  max-width:820px;margin:0 auto;background:var(--rr-rosa);
  border-radius:22px;padding:32px 34px;
}
.rr-abschluss p{margin:0 0 14px;max-width:62ch;font-size:16.5px;line-height:1.62;color:var(--rr-tinte)}
.rr-abschluss p:last-child{margin-bottom:0}
@media(max-width:600px){.rr-abschluss{padding:6px 14px 36px}.rr-abschluss-innen{padding:24px 20px;border-radius:18px}}