/* ============================================================
   Kostenlose Schmerzanalyse  ·  nur auf schmerzanalyse.html
   baut auf stil.css auf und nutzt dessen Farben
   ============================================================ */

/* ---------- Kopfbereich ---------- */
.sa-hero{position:relative;overflow:hidden;color:#e8edf4;padding:96px 0 100px;
background:linear-gradient(135deg,#17202f 0%,#1d2839 42%,#293a56 100%)}
.sa-hero::before{content:"";position:absolute;right:-12%;top:-30%;width:70%;height:160%;
background:radial-gradient(closest-side,rgba(245,128,41,.22),rgba(245,128,41,0) 72%);pointer-events:none}
.sa-hero::after{content:"";position:absolute;right:6%;bottom:-40%;width:46%;height:120%;
background:radial-gradient(closest-side,rgba(143,208,230,.16),rgba(143,208,230,0) 70%);pointer-events:none}
.sa-hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.sa-hero .kicker{color:var(--orange)}
.sa-hero h1{color:#fff;max-width:12ch;margin-bottom:20px}
.sa-hero .lead{color:#c9d4e2;max-width:32ch}
.sa-hero-karte{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
border-radius:8px;padding:34px 34px 28px;backdrop-filter:blur(2px)}
.sa-haken{list-style:none;margin:0;padding:0}
.sa-haken li{position:relative;padding:0 0 0 40px;margin:0 0 17px;font-size:18px;line-height:1.5;color:#eef2f7}
.sa-haken li::before{content:"";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;
background:var(--orange)}
.sa-haken li::after{content:"";position:absolute;left:7px;top:7px;width:10px;height:5px;
border-left:2.5px solid #1d2839;border-bottom:2.5px solid #1d2839;transform:rotate(-45deg)}
.sa-hero-schluss{margin:22px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
color:#a9b7c9;font-size:16.5px;line-height:1.5}

/* ---------- Einleitung ---------- */
.sa-h2{max-width:none}
.sa-zwischen{font-size:22px;margin:40px 0 12px}
.sa-liste{margin-top:18px}
.sa-liste b{color:var(--dunkel);font-weight:900}
.sa-kurzfazit{font-weight:900;color:var(--dunkel);font-size:20px;margin:34px 0 0}

/* ---------- Formularkarte ---------- */
.sa-bereich{scroll-margin-top:70px}
.sa-wrap{max-width:820px;margin:0 auto;padding:0 20px}
.sa{position:relative;background:#fff;border:1px solid var(--linie);border-radius:10px;
box-shadow:0 22px 50px -30px rgba(29,40,57,.45);padding:46px 54px 50px}
.sa-kopf{text-align:center;border-bottom:1px solid var(--linie);padding-bottom:28px;margin-bottom:36px}
.sa-logo{height:74px;width:auto;margin:0 auto}
.js .sa-logo{margin-bottom:28px}

/* Fortschritt */
.sa-fortschritt{display:flex;justify-content:center;align-items:center;list-style:none;margin:0;padding:0}
.sa-fortschritt li{display:flex;align-items:center;gap:10px;color:#9aa3ae;font-size:15px;font-weight:700;
white-space:nowrap;transition:color .25s}
.sa-fortschritt li+li::before{content:"";display:block;width:64px;height:2px;background:#dedad2;
margin:0 14px;transition:background .25s}
.sa-punkt{position:relative;width:26px;height:26px;border-radius:50%;border:2px solid #c9ccd2;
background:#fff;flex:none;transition:all .25s}
.sa-fortschritt li.aktiv{color:var(--dunkel)}
.sa-fortschritt li.aktiv .sa-punkt{border-color:var(--orange)}
.sa-fortschritt li.aktiv .sa-punkt::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--orange)}
.sa-fortschritt li.erledigt{color:var(--blau)}
.sa-fortschritt li.erledigt .sa-punkt{background:var(--blau);border-color:var(--blau)}
.sa-fortschritt li.erledigt .sa-punkt::after{content:"";position:absolute;left:7px;top:6px;width:8px;height:4px;
border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.sa-fortschritt li.erledigt+li::before,.sa-fortschritt li.aktiv::before{background:var(--blau)}

/* Seiten */
.sa-seite{border:0;margin:0;padding:0;min-width:0}
.js .sa-seite{display:none}
.js .sa-seite.aktiv{display:block;animation:saEin .38s cubic-bezier(.22,.61,.36,1)}
@keyframes saEin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html:not(.js) .sa-seite+.sa-seite{margin-top:46px;padding-top:38px;border-top:1px solid var(--linie)}
html:not(.js) .nur-js{display:none!important}

.sa-titel{display:block;float:left;width:100%;padding:0;margin:0 0 12px;
font-size:clamp(24px,3vw,30px);font-weight:900;line-height:1.2;color:var(--dunkel);letter-spacing:-.015em;margin-bottom:22px;text-wrap:balance}
.sa-titel+*{clear:both}
.sa-titel+.sa-einleitung{margin-top:-8px}
.sa-einleitung{color:#4a5566;font-size:18px;line-height:1.55;margin:0 0 28px}

/* Felder */
.sa-feld{margin:0 0 30px;border:0;padding:0;min-width:0}
.sa-feld>label:not(.sa-option),.sa-wahl>legend{display:block;float:left;width:100%;padding:0;margin:0 0 10px;
font-weight:700;color:var(--dunkel);font-size:17.5px;line-height:1.42}
.sa-feld>label:not(.sa-option)+*,.sa-wahl>legend+*{clear:both}
.sa-stern{color:var(--orange);font-weight:900}
.sa-hinweis{color:#7d848f;font-size:15.5px;line-height:1.52;margin:-2px 0 13px}

.sa input[type=text],.sa input[type=email],.sa input[type=tel],.sa input[type=number],.sa textarea{
display:block;width:100%;font:inherit;font-size:17px;line-height:1.4;padding:13px 15px;color:var(--text);
background:#fff;border:1.5px solid #d9d4ca;border-radius:7px;transition:border-color .15s,box-shadow .15s;
-webkit-appearance:none;appearance:none}
.sa textarea{resize:vertical;min-height:124px}
.sa input::placeholder,.sa textarea::placeholder{color:#a4abb5}
.sa input:focus,.sa textarea:focus{outline:none;border-color:var(--blau);box-shadow:0 0 0 3px rgba(29,122,147,.16)}
.sa input[type=number]{max-width:200px}
.sa input[type=number]::-webkit-inner-spin-button{opacity:.5}

.sa-paar{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.sa-paar .sa-feld{margin-bottom:30px}

/* Auswahl */
.sa-optionen{display:flex;flex-direction:column;gap:6px}
.sa-optionen.klein{flex-direction:row;flex-wrap:wrap;gap:12px}
.sa-optionen.raster{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sa-option{display:flex;align-items:flex-start;gap:13px;cursor:pointer;font-size:17px;line-height:1.45;
color:var(--text);font-weight:400;-webkit-tap-highlight-color:transparent}
.sa-option span{padding-top:1px;min-width:0;overflow-wrap:anywhere}
.sa-radio{padding:14px 18px;border:1.5px solid #d9d4ca;border-radius:8px;background:#fff;
transition:border-color .15s,background .15s,box-shadow .15s}
.sa-optionen.klein .sa-radio{min-width:136px}
.sa-radio:hover{border-color:#b9c3cc}
.sa-radio.gewaehlt{border-color:var(--blau);background:#f1f8fa;box-shadow:0 0 0 1px var(--blau) inset}
.sa-checkbox{padding:9px 6px;border-radius:6px;transition:background .15s}
.sa-checkbox:hover{background:#f7f5f1}
.sa-optionen.raster .sa-checkbox{padding:14px 18px;border:1.5px solid #d9d4ca;border-radius:8px;background:#fff;
transition:border-color .15s,background .15s,box-shadow .15s}
.sa-optionen.raster .sa-checkbox:hover{border-color:#b9c3cc;background:#fff}
.sa-optionen.raster .sa-checkbox.gewaehlt{border-color:var(--blau);background:#f1f8fa;box-shadow:0 0 0 1px var(--blau) inset}

.sa-option input{-webkit-appearance:none;appearance:none;flex:none;width:22px;height:22px;margin:1px 0 0;
border:2px solid #b4bbc5;background:#fff;display:grid;place-content:center;cursor:pointer;
transition:border-color .15s,background .15s}
.sa-option input[type=radio]{border-radius:50%}
.sa-option input[type=checkbox]{border-radius:5px}
.sa-option input[type=radio]::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--blau);
transform:scale(0);transition:transform .15s}
.sa-option input[type=radio]:checked{border-color:var(--blau)}
.sa-option input[type=radio]:checked::before{transform:scale(1)}
.sa-option input[type=checkbox]::before{content:"";width:10px;height:5px;margin-top:-3px;
border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) scale(0);transition:transform .15s}
.sa-option input[type=checkbox]:checked{background:var(--blau);border-color:var(--blau)}
.sa-option input[type=checkbox]:checked::before{transform:rotate(-45deg) scale(1)}
.sa-option input:focus-visible{outline:3px solid rgba(29,122,147,.35);outline-offset:2px}

/* Regler */
.sa-regler-zeile{display:flex;align-items:center;gap:20px;padding-top:4px}
.sa input[type=range]{--w:0%;flex:1;min-width:0;height:28px;margin:0;background:transparent;cursor:pointer;
-webkit-appearance:none;appearance:none}
.sa input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;
background:linear-gradient(to right,var(--orange) 0,var(--orange) var(--w),#e6e2da var(--w),#e6e2da 100%)}
.sa input[type=range]::-moz-range-track{height:8px;border-radius:4px;background:#e6e2da}
.sa input[type=range]::-moz-range-progress{height:8px;border-radius:4px;background:var(--orange)}
.sa input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;
border-radius:50%;background:#fff;border:3px solid var(--orange);box-shadow:0 2px 6px rgba(29,40,57,.22)}
.sa input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;
border:3px solid var(--orange);box-shadow:0 2px 6px rgba(29,40,57,.22)}
.sa-regler:not(.gesetzt) input[type=range]::-webkit-slider-thumb{border-color:#b4bbc5}
.sa-regler:not(.gesetzt) input[type=range]::-moz-range-thumb{border-color:#b4bbc5}
.sa input[type=range]:focus{outline:none}
.sa input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(245,128,41,.25)}
.sa-wert{flex:none;min-width:96px;text-align:right;font-weight:900;font-size:19px;color:var(--dunkel);
font-variant-numeric:tabular-nums}
.sa-regler:not(.gesetzt) .sa-wert{font-weight:400;font-size:15.5px;color:#9aa3ae}
.sa-skala{display:flex;justify-content:space-between;color:#7d848f;font-size:15px;margin:6px 116px 0 0}

/* Fehler */
.sa-fehlertext{clear:both;color:#b0391f;font-size:15.5px;font-weight:700;margin:9px 0 0}
.sa-feld.fehler input[type=text],.sa-feld.fehler input[type=email],.sa-feld.fehler input[type=tel],
.sa-feld.fehler input[type=number]{border-color:#c94d31}
.sa-feld.fehler .sa-radio{border-color:#e6aa9b}
.sa-feld.fehler .sa-option input{border-color:#cf6a52}
.sa-einwilligung.fehler{border-left-color:#c94d31;background:#fdf3f0}

/* Navigation */
.sa-nav{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:38px;padding-top:28px;
border-top:1px solid var(--linie)}
.sa-nav [data-weiter],.sa-nav [data-senden]{margin-left:auto}
.sa .btn{font-family:inherit;cursor:pointer}
.sa button.btn:not(.btn-rand){border:0}
.sa button.btn-rand{background:transparent}
.sa a[href^="tel:"]{white-space:nowrap}
.sa-nav .btn{padding:15px 30px}
.sa-nav .btn-rand{padding:13px 26px}
.sa-nav [data-senden][disabled]{opacity:.6;cursor:wait;transform:none}

/* Übersicht */
.sa-uebersicht{margin:6px 0 0}
.sa-block{border-top:1px solid var(--linie);padding:22px 0 10px}
.sa-block:first-child{border-top:0;padding-top:4px}
.sa-block-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0 0 6px}
.sa-block-kopf h3{font-size:18.5px;margin:0}
.sa-bearbeiten{background:none;border:0;padding:4px 0;color:#20697d;font:inherit;font-size:15.5px;font-weight:700;
cursor:pointer;text-decoration:underline;text-decoration-color:#a8cdd8;text-underline-offset:4px}
.sa-bearbeiten:hover{color:var(--dunkel)}
.sa-zeilen{margin:0}
.sa-zeile{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px;padding:10px 0;
border-bottom:1px dashed #ebe7df;font-size:16px;line-height:1.48}
.sa-zeile:last-child{border-bottom:0}
.sa-zeile dt{color:#6f7783}
.sa-zeile dd{margin:0;color:var(--dunkel);font-weight:700;text-align:right;overflow-wrap:anywhere;white-space:pre-line}
.sa-zeile dd.leer{color:#a4abb5;font-weight:400}

/* Einwilligung und Abschluss */
.sa-rueckruf{margin-top:34px;padding-top:30px;border-top:1px solid var(--linie)}
.sa-zwischen-titel{font-size:22px;margin:0 0 18px}
.sa-einwilligung{margin:34px 0 0;background:#f4f9fb;border-left:3px solid var(--blau);border-radius:0 6px 6px 0;
padding:18px 20px 18px 16px}
.sa-einwilligung .sa-option{font-size:16px;line-height:1.55;padding:0}
.sa-einwilligung .sa-fehlertext{margin-left:35px}
.sa-fuss{margin-top:24px}
.sa-fuss p{font-size:15.5px;line-height:1.55;color:#727a86;margin:0 0 8px}
.sa-sendefehler{margin:18px 0 0;padding:14px 16px;border-radius:6px;background:#fdf3f0;color:#9c3219;
font-weight:700;font-size:16px}

/* Danke */
.sa-danke{text-align:center;padding:26px 0 8px}
.sa-danke:focus{outline:none}
.sa-danke-zeichen{display:block;margin:0 auto 22px}
.sa-danke h2{margin:0 auto 18px;text-wrap:balance}
.sa-danke p{max-width:46ch;margin-left:auto;margin-right:auto}
.sa-vorschau{display:inline-block;background:#fff3e8;color:#94470a;padding:8px 14px;border-radius:5px;
font-size:15px;font-weight:700;margin-top:10px}

/* Hilfsklassen */
.sa-honig{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.sa-unsichtbar{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
clip-path:inset(50%);white-space:nowrap}

/* ---------- Schmale Bildschirme ---------- */
@media(max-width:900px){
.sa-hero{padding:70px 0 74px}
.sa-hero-in{grid-template-columns:1fr;gap:38px}
.sa-hero h1{max-width:none}
}
@media(max-width:640px){
.sa-wrap{padding:0 14px}
.sa{padding:30px 20px 34px;border-radius:8px}
.sa-logo{height:58px}
.js .sa-logo{margin-bottom:22px}
.sa-kopf{padding-bottom:22px;margin-bottom:28px}
.sa-fortschritt li{gap:7px;font-size:13px}
.sa-fortschritt li+li::before{width:20px;margin:0 7px}
.sa-punkt{width:22px;height:22px}
.sa-fortschritt li.erledigt .sa-punkt::after{left:5px;top:5px}
.sa-paar{grid-template-columns:1fr;gap:0}
.sa-optionen.klein .sa-radio{min-width:0;flex:1 1 120px}
.sa-optionen.raster{grid-template-columns:1fr 1fr;gap:10px}
.sa-radio{padding:13px 14px}
.sa-hero-karte{padding:26px 22px 22px}
.sa-haken li{font-size:17px}
.sa-regler-zeile{gap:14px}
.sa-wert{min-width:74px;font-size:17px}
.sa-skala{margin-right:88px;font-size:14px}
.sa-zeile{grid-template-columns:1fr;gap:2px;padding:10px 0}
.sa-zeile dd{text-align:left}
.sa-nav{gap:10px}
.sa-nav .btn{padding:14px 22px}
.sa-nav .btn-rand{padding:12px 20px}
}
@media(max-width:380px){
.sa-fortschritt .sa-stufe{display:none}
.sa-fortschritt li.aktiv .sa-stufe{display:inline}
}
@media(prefers-reduced-motion:reduce){.js .sa-seite.aktiv{animation:none}}
@media print{.sa-nav,.sa-fortschritt{display:none}}