/* Verwaltung — schlicht, groß, kontrastreich. Für den Salon-Alltag, nicht für Entwickler. */
:root{--bg:#f3f0ea;--karte:#fff;--tinte:#1b1712;--mut:#5b5348;--rand:#d9d2c5;--messing:#8a6a32;--ja:#1d6a3a;--ja-d:#14502b;--nein:#9b2c24;--warn:#8a4b00;--warn-bg:#fff1dc;--kopf:#16130f;--sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;--serif:"Instrument Serif",Georgia,serif}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tinte);font:500 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:.2em}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--messing);outline-offset:3px}
.sprung{position:absolute;left:8px;top:-60px;background:var(--tinte);color:#fff;padding:10px 16px;z-index:50}.sprung:focus{top:8px}
h1,h2,h3{margin:0}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border:2px solid var(--tinte);background:var(--tinte);color:#fff;font-weight:700;font-size:1rem;border-radius:10px;cursor:pointer;transition:background .15s,color .15s}
.knopf:hover{background:#000}
.knopf[disabled]{opacity:.45;cursor:not-allowed}
.knopf.ja{background:var(--ja);border-color:var(--ja)}.knopf.ja:hover{background:var(--ja-d)}
.knopf.nein{background:transparent;color:var(--nein);border-color:var(--nein)}.knopf.nein:hover{background:var(--nein);color:#fff}
.knopf.leise{background:transparent;color:var(--tinte);border-color:var(--rand)}.knopf.leise:hover{background:#fff}
.text-knopf{background:none;border:1px solid rgba(255,255,255,.35);color:#f3f0ea;min-height:44px;padding:0 18px;border-radius:8px;cursor:pointer;font-weight:600}
.text-knopf:hover{background:rgba(255,255,255,.12)}

/* Anmeldung */
.seite-anmelden{min-height:100svh;display:grid;place-items:center;background:var(--kopf);color:#efe7d8;padding:24px}
.anm{width:min(440px,100%)}
.anm-marke{margin:0 0 6px;font:400 2rem/1 var(--serif)}.anm-marke i{color:#c8a15a;font-style:italic}
.anm h1{font:800 2.6rem/1.05 var(--sans);letter-spacing:-.03em;margin:8px 0 10px}
.anm-text{margin:0 0 26px;color:#b9ae9a}
.anm form{display:grid;gap:10px}
.anm label{font-weight:700;font-size:.95rem}
.anm input{width:100%;min-height:56px;padding:12px 16px;border-radius:10px;border:2px solid #4a4237;background:#211c16;color:#fff;font-size:1.1rem}
.anm input:focus{outline:none;border-color:#c8a15a}
.anm .knopf{background:#c8a15a;border-color:#c8a15a;color:#1b1208;margin-top:8px}.anm .knopf:hover{background:#dcbb7c}
.anm .fehler{margin:0;color:#ffab9c;font-weight:600}
.anm-klein{margin:26px 0 0;color:#8f8573;font-size:.9rem}

/* Kopf */
.kopf{background:var(--kopf);color:#f3f0ea;position:sticky;top:0;z-index:20}
.kopf-in{max-width:980px;margin:0 auto;padding:10px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:64px}
.marke{margin:0;font:400 1.7rem/1 var(--serif)}.marke i{color:#c8a15a;font-style:italic;padding:0 .05em}
.marke span{font:700 .75rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;margin-left:12px;color:#b9ae9a}
.kopf-r{margin:0;display:flex;align-items:center;gap:12px}
.demo-marke{display:inline-block;padding:5px 10px;border-radius:999px;background:#c8a15a;color:#1b1208;font:800 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.demo-marke.klein{margin-left:10px;padding:3px 8px;font-size:.62rem;vertical-align:middle}

/* Inhalt */
.haupt{max-width:980px;margin:0 auto;padding:22px 18px 80px}
.hinweise{display:grid;gap:10px;margin:0 0 18px}
.banner{margin:0;padding:12px 16px;border-radius:10px;font-weight:600;font-size:.95rem}
.banner.demo{background:#efe6d2;border:1px dashed var(--messing)}.banner.warn{background:var(--warn-bg);border:1px solid var(--warn);color:var(--warn)}
.filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.filter button{min-height:48px;padding:0 18px;border-radius:999px;border:2px solid var(--rand);background:#fff;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.filter button[aria-pressed="true"]{background:var(--tinte);border-color:var(--tinte);color:#fff}
.filter .z{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:999px;background:var(--rand);color:var(--tinte);font-size:.82rem}
.filter button[aria-pressed="true"] .z{background:#fff}
.filter button[data-f="ausstehend"] .z{background:#e8b04a}
.stand{margin:0 0 22px;color:var(--mut);font-weight:600}
.gruppe{margin:0 0 38px}
.gruppe h2{font:800 1.5rem/1.1 var(--sans);letter-spacing:-.02em;margin:0 0 14px;padding-bottom:10px;border-bottom:3px solid var(--tinte)}
.leer{margin:0;color:var(--mut)}
.liste{list-style:none;margin:0;padding:0;display:grid;gap:14px}

/* Karte */
.karte{background:var(--karte);border:1px solid var(--rand);border-left:6px solid #e8b04a;border-radius:14px;padding:16px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;align-items:start}
.karte.bestaetigt{border-left-color:var(--ja)}.karte.abgelehnt{border-left-color:var(--rand);background:#faf8f4}
.zeit{display:grid;gap:2px;min-width:88px;padding:8px 12px;border-radius:10px;background:var(--bg);text-align:center}
.zeit-t{font:800 1.9rem/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.zeit-d{font-weight:700;font-size:.85rem;color:var(--mut)}
.info{min-width:0}
.name{font:800 1.25rem/1.2 var(--sans);letter-spacing:-.01em;overflow-wrap:anywhere}
.leistung{margin:2px 0 6px;font-weight:700;color:var(--messing)}
.kontakt{margin:0 0 6px;overflow-wrap:anywhere}.kontakt a{font-weight:600}
.nachricht{margin:6px 0;padding:8px 12px;border-radius:8px;background:var(--bg);overflow-wrap:anywhere}.nachricht span{font-weight:700}
.meta{margin:4px 0 0;color:var(--mut);font-size:.88rem}
.rechts{grid-column:1/-1}
.aktionen{display:flex;flex-wrap:wrap;gap:10px}
.aktionen .knopf{flex:1 1 170px}
.frage{display:grid;gap:12px;padding:14px;border-radius:12px;background:var(--bg)}
.frage-t{margin:0;font-weight:700}
.frage textarea{width:100%;padding:12px;border:2px solid var(--rand);border-radius:10px;background:#fff;resize:vertical;min-height:72px}
.frage textarea:focus{outline:none;border-color:var(--messing)}
.status{display:inline-block;padding:7px 14px;border-radius:999px;font-weight:800;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.status.bestaetigt{background:#d9efe0;color:var(--ja-d)}.status.abgelehnt{background:#ece6dc;color:var(--mut)}
.grund{margin:8px 0 0;color:var(--mut);font-size:.92rem}
.warn,.hinweis{grid-column:1/-1;margin:0;padding:10px 14px;border-radius:10px;font-size:.93rem;font-weight:600}
.warn{background:#fde5e1;color:var(--nein);border:1px solid var(--nein)}
.hinweis{background:#fff3d6;color:var(--warn)}
.details{grid-column:1/-1;margin-top:4px;border-top:1px solid var(--rand);padding-top:8px}
.details summary{cursor:pointer;font-weight:700;min-height:40px;display:flex;align-items:center;color:var(--mut)}
.details-inhalt{padding:6px 0 4px;display:grid;gap:10px}
.mail{padding:10px 12px;border:1px solid var(--rand);border-radius:10px;background:#faf8f4}
.mail-k,.mail-b{margin:0 0 4px;font-size:.9rem}
.mail-s{font-weight:700}.mail-s.demo_unterdrueckt{color:var(--warn)}.mail-s.gesendet{color:var(--ja)}.mail-s.fehlgeschlagen,.mail-s.nicht_konfiguriert{color:var(--nein)}
.mail-t{margin:6px 0 0;white-space:pre-wrap;font:500 .88rem/1.5 var(--sans)}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:40;max-width:min(560px,calc(100% - 28px));padding:14px 18px;border-radius:12px;background:var(--tinte);color:#fff;font-weight:600;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.toast.ok{background:var(--ja-d)}.toast.fehler{background:var(--nein)}
.toast[hidden]{display:none}

@media (min-width:720px){
  .karte{grid-template-columns:auto minmax(0,1fr) 270px}
  .rechts{grid-column:3;grid-row:1}
  .aktionen{flex-direction:column}.aktionen .knopf{flex:none;width:100%}
}
@media (max-width:420px){.marke span{display:none}.zeit{min-width:72px}.zeit-t{font-size:1.6rem}}