/* app.therapieads.de: dieselben Token wie therapieads.de (Praxisads-Optik), reduziert auf
   Formulare, Karten, Pillen. Schriften lokal. */
@import url("/schriften/schriften.css");
:root{
  --papier:#F5F4F3;--papier-2:#ECEAE7;--karte:#D9D4D0;--weiss:#fff;--tinte:#1E1E1E;--schwarz:#080808;--neben:#5C5955;
  --linie:rgba(30,30,30,.14);--gelb:#F9B039;--gelb-tief:#E9A02B;--blau:#2B4EAE;--gruen:#ADF5A4;--rot:#9B1C1C;
  --spalte:760px;--rand:clamp(18px,5vw,40px);--s2:12px;--s3:20px;--s4:32px;--s5:48px;
  --sans:"Satoshi","Helvetica Neue",Arial,sans-serif;--serif:"Gambetta","Iowan Old Style",Georgia,serif;
}
*{box-sizing:border-box}[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit}
:where(a,button,input,textarea,select):focus-visible{outline:2px solid var(--blau);outline-offset:2px}
main{flex:1}
.in{max-width:var(--spalte);margin:0 auto;padding:0 var(--rand)}
h1,h2,h3{margin:0;font-weight:500}
h1{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(34px,5vw,54px);line-height:1.06;letter-spacing:-.01em}
h2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(28px,4vw,40px);line-height:1.1}
h3{font-size:clamp(19px,2.2vw,22px);line-height:1.3;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 var(--s3)}h1+p,h2+p,h3+p{margin-top:var(--s3)}
.lead{font-size:clamp(17px,2vw,19px)}.neben{color:var(--neben)}.klein{font-size:14.5px;color:var(--neben)}
b{font-weight:700}

.kopf{position:sticky;top:0;z-index:10;background:rgba(245,244,243,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--tinte)}
.kopf .in{display:flex;align-items:center;justify-content:space-between;min-height:76px;gap:16px;max-width:1152px}
.marke{text-decoration:none;font-weight:700;letter-spacing:-.02em;font-size:20px;color:var(--blau)}
.marke span{color:var(--tinte);font-weight:500}
.kopf__rechts{display:flex;gap:14px;align-items:center;font-size:15px}
.kopf__rechts a{text-decoration:none;color:var(--neben)}.kopf__rechts a:hover{color:var(--tinte)}

.abschnitt{padding:clamp(40px,7vw,72px) 0}
.pille{display:inline-flex;align-items:center;gap:14px;text-decoration:none;font-family:var(--sans);font-weight:500;font-size:16px;line-height:1.2;padding:8px 26px 8px 8px;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:background-color .12s,transform .12s,box-shadow .12s}
.pille__kreis{width:44px;height:44px;border-radius:50%;background:var(--schwarz);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none}
.pille__kreis svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pille--gelb{background:var(--gelb);color:var(--tinte);box-shadow:0 6px 24px rgba(249,176,57,.35)}
.pille--gelb:hover{background:var(--gelb-tief);transform:translateY(-1px)}
.pille--linie{background:transparent;color:inherit;border-color:currentColor;padding:12px 20px;font-size:15px;gap:8px}
.pille--linie:hover{background:rgba(0,0,0,.04)}
.pille[disabled]{opacity:.55;cursor:default;transform:none}
button.pille.breit{width:100%;font-size:17px;min-height:62px;justify-content:flex-start}
button.pille.breit .pille__text{flex:1;text-align:center;padding-right:44px}
@media (max-width:480px){button.pille.breit .pille__text{padding-right:0}}

.karte{background:var(--weiss);border-radius:22px;padding:clamp(22px,4vw,36px);box-shadow:0 20px 50px rgba(0,0,0,.07)}
.karte+.karte{margin-top:var(--s4)}
.karte h2{margin-bottom:6px}
.karte .neben{margin-bottom:var(--s3)}
.felder{display:grid;gap:16px}
@media (min-width:600px){.felder{grid-template-columns:1fr 1fr}.felder .voll{grid-column:1/-1}}
.feld{display:grid;gap:6px;align-content:start}
.feld label,.feld .lab{font-size:14px;font-weight:700}
.feld .hilfe{font-size:13.5px;color:var(--neben);margin:0}
.feld input:not([type=checkbox]):not([type=radio]),.feld select,.feld textarea{font:inherit;font-size:16px;padding:13px 16px;border:1px solid var(--linie);border-radius:12px;background:var(--papier);color:var(--tinte);width:100%}
.feld textarea{min-height:96px;resize:vertical}
.feld input:not([type=checkbox]):not([type=radio]):focus,.feld select:focus,.feld textarea:focus{border-color:var(--tinte);outline:none;background:#fff}
.feld input[type=number]{-moz-appearance:textfield}
.mit-einheit{position:relative}.mit-einheit input{padding-right:52px}.mit-einheit i{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--neben);font-size:15px}
.kaestchen{display:grid;gap:8px}
.kaestchen label,.radio label{display:flex;gap:10px;align-items:flex-start;font-size:16px;font-weight:400;padding:10px 12px;border:1px solid var(--linie);border-radius:12px;background:var(--papier);cursor:pointer}
.kaestchen label:has(:checked),.radio label:has(:checked){border-color:var(--tinte);background:#fff}
.kaestchen input,.radio input{margin:4px 0 0;flex:none;width:18px;height:18px;accent-color:var(--tinte)}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fehler{color:var(--rot);font-size:15px;margin:10px 0 0}
.ok{color:#1d6b2f;font-size:15px;margin:10px 0 0}
.tasten{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:var(--s3)}
.stand{font-size:13.5px;color:var(--neben);margin:0}

/* Schritte */
.schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:var(--s4) 0}
.schritt{display:grid;gap:4px;padding:12px 14px;border-radius:14px;background:var(--papier-2);text-decoration:none;color:var(--neben);font-size:14px;border:1px solid transparent}
.schritt b{color:var(--tinte);font-size:15px}
.schritt .tag{display:inline-block;font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 9px;background:var(--karte);color:var(--tinte);justify-self:start}
.schritt.ist{background:var(--weiss);border-color:var(--tinte)}
.schritt.fertig .tag{background:var(--gruen)}
.schritt.offen .tag{background:var(--gelb)}
@media (max-width:560px){.schritte{grid-template-columns:1fr}}

/* Paket */
.paket{display:grid;gap:18px}
.paket ul{margin:0;padding:0 0 0 22px}.paket li{margin:4px 0}
.optionen{display:grid;gap:10px}
.option{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:16px;border:1px solid var(--linie);border-radius:16px;background:var(--papier);cursor:pointer;position:relative}
.option:has(:checked){border-color:var(--tinte);background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.option input{margin:5px 0 0;accent-color:var(--tinte)}
.option b{display:block;font-size:17px}
.option .zeile{display:block;font-weight:500;color:var(--blau);margin:2px 0 4px}
.option .text{font-size:15px;color:var(--neben)}
.option .empf{position:absolute;right:14px;top:-11px;background:var(--gelb);font-size:12px;font-weight:700;border-radius:999px;padding:4px 10px}
.summe{display:grid;gap:4px;padding:16px 18px;border-radius:14px;background:var(--papier-2);font-size:15.5px}
.summe b{font-size:18px}
.steuer{font-size:14px;color:var(--neben);margin:12px 0 0}

.fuss{padding:28px var(--rand);text-align:center;font-size:14px;color:var(--neben)}
.fuss a{margin:0 8px}

/* Admin */
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--linie);vertical-align:top}
th{font-size:13px;color:var(--neben)}
.status{display:inline-block;border-radius:999px;padding:3px 9px;font-size:12.5px;font-weight:700;background:var(--karte)}
.status.bezahlt,.status.aktiv{background:var(--gruen)}.status.onboarding,.status.zahlung_offen{background:var(--gelb)}
code{font-family:ui-monospace,Menlo,monospace;font-size:13px;background:var(--papier-2);padding:2px 6px;border-radius:6px;word-break:break-all}
pre{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;background:var(--papier-2);padding:12px;border-radius:12px;overflow:auto;white-space:pre-wrap;word-break:break-word;margin:8px 0 0}
details.kunde{border:1px solid var(--linie);border-radius:14px;padding:12px 16px;background:#fff;margin-top:10px}
details.kunde summary{cursor:pointer;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.admin-in{max-width:1100px}