/* app.headcount-zero.co: the same tokens as headcount-zero.co (paper, ink, yellow pill, Satoshi + Gambetta),
   reduced to forms, cards, pills. Fonts local. Class names are shared with the sister app. */
@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}

/* Steps */
.schritte{display:grid;grid-template-columns:repeat(2,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)}
.schritt.gesperrt{opacity:.6;cursor:default}
@media (max-width:560px){.schritte{grid-template-columns:1fr}}

/* Plan cards */
.paket{display:grid;gap:18px}
.paket ul{margin:0;padding:0 0 0 22px}.paket li{margin:4px 0}
.karten{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
@media (max-width:700px){.karten{grid-template-columns:1fr}}
.karte-preis{position:relative;display:grid;gap:12px;align-content:start;padding:20px 18px 16px;border:1px solid var(--linie);border-radius:18px;background:var(--papier);cursor:pointer}
.karte-preis>input[type=radio]{position:absolute;opacity:0;width:1px;height:1px}
.karte-preis.ist{border-color:var(--tinte);background:#fff;box-shadow:0 12px 34px rgba(0,0,0,.08);transform:translateY(-2px)}
.karte-preis{transition:transform .12s,box-shadow .12s}
.karte-preis:focus-within{outline:2px solid var(--blau);outline-offset:2px}
.karte-preis .empf{position:absolute;right:14px;top:-11px;background:var(--gelb);font-size:12px;font-weight:700;border-radius:999px;padding:4px 10px}
.kp-kopf{display:grid;gap:2px}.kp-kopf b{font-size:20px;letter-spacing:-.01em}.kp-kopf i{font-style:normal;font-size:14px;color:var(--neben)}
.kp-preis{display:grid;gap:1px;padding:10px 0 8px;border-top:1px solid var(--linie)}
.kp-preis s{font-size:13px;color:var(--neben);min-height:18px;text-decoration-color:var(--rot)}
.kp-preis s:empty{visibility:hidden}
.kp-preis b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:34px;line-height:1.05;color:var(--tinte);letter-spacing:-.01em}
.karte-preis.ist .kp-preis b{color:var(--blau)}
.kp-preis i{font-style:normal;font-size:13px;color:var(--neben)}
.kp-zusammen{font-size:13px;color:var(--neben);padding-bottom:8px;border-bottom:1px solid var(--linie)}
.kp-text{font-size:14.5px;color:var(--neben)}
.kp-toggle{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer}
.kp-toggle input{position:absolute;opacity:0;width:1px;height:1px}
.kp-toggle .schalter{flex:none;width:40px;height:24px;border-radius:999px;background:var(--karte);position:relative;transition:background .15s}
.kp-toggle .schalter::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.kp-toggle input:checked+.schalter{background:var(--tinte)}
.kp-toggle input:checked+.schalter::after{transform:translateX(16px)}
.kp-toggle input:focus-visible+.schalter{outline:2px solid var(--blau);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.kp-spar{font-size:12.5px;font-weight:700;color:var(--neben);justify-self:start;border-radius:999px;padding:4px 10px;background:var(--papier-2);min-height:24px}
.kp-spar:empty{visibility:hidden}
.kp-spar.aktiv{background:var(--gruen);color:var(--tinte)}
.karte-preis .kp-text{margin-top:auto;display:grid;gap:6px}
.kp-spend{font-size:13.5px;color:var(--tinte)}
.kp-list{margin:0;padding:0 0 0 16px;font-size:13.5px;line-height:1.45}.kp-list li{margin:2px 0}
.karte-preis.plain{background:var(--papier-2)}.karte-preis.plain .kp-preis b{font-family:var(--sans);font-style:normal;font-size:26px}.karte-preis.plain.ist{background:#fff}
.band{font-size:14.5px;color:var(--neben);margin:0;padding:12px 16px;border-left:3px solid var(--gelb);background:#fff;border-radius:0 12px 12px 0}
.sicher{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px;font-size:14px;color:var(--neben)}
.sicher li{padding-left:22px;position:relative}
.sicher li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:6px;border-left:2px solid var(--tinte);border-bottom:2px solid var(--tinte);transform:rotate(-45deg)}
.zahlweise{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:12px 14px;border-radius:14px;background:var(--papier-2);margin-bottom:2px}
.zahlweise__lab{font-size:15px;color:var(--neben);font-weight:500}
.zahlweise__lab.ist{color:var(--tinte);font-weight:700}
.zahlweise__lab i{font-style:normal;font-weight:500;font-size:13px;color:var(--blau);margin-left:6px}
.zahlweise__schalter{gap:0}
.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.paid,.status.active{background:var(--gruen)}.status.onboarding,.status.payment_pending{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}

/* Client area */
.fakten{margin:0;display:grid;gap:10px}
@media (min-width:600px){.fakten{grid-template-columns:1fr 1fr}}
.fakten div{display:grid;gap:2px;padding:12px 14px;border-radius:12px;background:var(--papier)}
.fakten dt{font-size:12.5px;font-weight:700;color:var(--neben);text-transform:uppercase;letter-spacing:.04em}
.fakten dd{margin:0;font-size:16px}
.phasen{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:ph}
.phasen li{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;padding:12px 14px;border-radius:12px;background:var(--papier);counter-increment:ph}
.phasen li::before{content:counter(ph);width:28px;height:28px;border-radius:50%;background:var(--karte);display:grid;place-items:center;font-size:13px;font-weight:700}
.phasen li.ist{background:#fff;border:1px solid var(--tinte)}
.phasen li.ist::before{background:var(--gelb)}
.phasen li.fertig::before{content:"✓";background:var(--gruen)}
.phasen li b{display:block;grid-column:2}.phasen li span{grid-column:2;font-size:14.5px;color:var(--neben)}
.phasen li::before{grid-row:1/span 2}

/* App area */
.in.breit{max-width:1040px}
.app-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.app-kopf h1{font-size:clamp(30px,4vw,42px)}.app-kopf .neben{margin:4px 0 0}
.tabs{display:flex;flex-wrap:wrap;gap:4px;background:var(--papier-2);padding:4px;border-radius:999px}
.tabs a{text-decoration:none;font-size:14.5px;font-weight:500;padding:8px 14px;border-radius:999px;color:var(--neben);display:inline-flex;align-items:center;gap:6px}
.tabs a.ist{background:#fff;color:var(--tinte);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.zaehler{background:var(--gelb);color:var(--tinte);font-size:11.5px;font-weight:700;border-radius:999px;min-width:18px;height:18px;padding:0 5px;display:inline-grid;place-items:center}
.kacheln{display:grid;gap:10px;grid-template-columns:repeat(4,1fr);margin-bottom:18px}
@media (max-width:760px){.kacheln{grid-template-columns:repeat(2,1fr)}}
.kachel{display:grid;gap:2px;padding:16px 18px;border-radius:16px;background:#fff;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.kachel b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:30px;line-height:1;color:var(--blau)}
.kachel span{font-size:13.5px;color:var(--neben)}
.zwei{display:grid;gap:18px;grid-template-columns:1fr 1fr;align-items:start}
@media (max-width:820px){.zwei{grid-template-columns:1fr}}
.zwei .karte+.karte{margin-top:18px}
.fakten.eins{grid-template-columns:1fr}
.fakten.kompakt{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin:8px 0 12px}
.verlauf{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.verlauf li{display:grid;gap:2px;padding:8px 0;border-bottom:1px solid var(--linie)}
.verlauf a{text-decoration:none}.verlauf a:hover{text-decoration:underline}.verlauf span{font-size:13px;color:var(--neben)}
.filter{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.chip{font:inherit;font-size:13.5px;font-weight:500;padding:7px 12px;border-radius:999px;border:1px solid var(--linie);background:var(--papier);color:var(--neben);cursor:pointer}
.chip.ist{background:var(--tinte);color:#fff;border-color:var(--tinte)}
.liste{display:grid;gap:14px}
.leer{color:var(--neben);margin:0;padding:18px;border:1px dashed var(--linie);border-radius:14px}
.item{border:1px solid var(--linie);border-radius:18px;padding:18px 20px;background:var(--papier);display:grid;gap:10px}
.item header{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--neben)}
.item header time{margin-left:auto}
.item .art{font-weight:700;color:var(--tinte)}
.item h3{font-size:19px}
.item .text{font-size:15.5px;white-space:normal}
.item .status{background:var(--karte);color:var(--tinte);border-radius:999px;padding:3px 9px;font-size:12.5px;font-weight:700}
.item .status.s-pending{background:var(--gelb)}.item .status.s-approved{background:var(--gruen)}.item .status.s-rejected{background:#F9D3BC}.item .status.s-answered{background:var(--gelb)}.item .status.s-closed{background:var(--gruen)}.item .status.s-published{background:var(--papier-2)}
.vorschau{display:block;border-radius:12px;overflow:hidden;background:#fff;max-width:520px}
.vorschau img,video.vorschau{display:block;width:100%;height:auto}
.vorschau-link{font-size:14.5px}
.chat{display:grid;gap:8px;margin-top:4px}
.msg{padding:10px 14px;border-radius:14px;font-size:15px;line-height:1.5;max-width:92%}
.msg.kunde{background:#fff;border:1px solid var(--linie);justify-self:end;border-bottom-right-radius:4px}
.msg.team{background:var(--tinte);color:#fff;justify-self:start;border-bottom-left-radius:4px}
.msg .wer{display:block;font-size:12px;opacity:.7;margin-bottom:3px}
.item form textarea{font:inherit;font-size:15px;padding:11px 14px;border:1px solid var(--linie);border-radius:12px;background:#fff;width:100%;min-height:72px;resize:vertical}
.item form .tasten{margin-top:10px}
.item form .pille{font-size:15px}
.item form .pille--gelb{padding:6px 20px 6px 6px}.item form .pille--gelb .pille__kreis{width:36px;height:36px}