/* 8.45.0: Gemeinsames Aussehen für Schönheitsfragen, Terminbuchung und Kalender-App (Handy zuerst) */
:root{
  --rose:#4a2b3d;--rose-dark:#7a5c2e;--rose-soft:#f3ece0;--blush:#faf7f2;--plum:#2e1a26;--plum-soft:#6c5562;
  --gold:#b8955a;--gold-soft:#f6f0e6;--line:#ece3d6;--white:#fff;--ok:#2f6b40;--ok-soft:#e8f5ec;--warn:#a33a3a;--warn-soft:#f8eaea;
  --amber:#b4651b;--amber-soft:#fff3e4;--radius:18px;--shadow:0 14px 40px rgba(46,26,38,.10);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:linear-gradient(var(--blush),var(--blush));color:var(--plum);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.wrap{width:min(640px,100%);margin:0 auto;padding:16px 16px 40px}
.brand{display:flex;align-items:center;gap:12px;padding:6px 2px 14px}
.brand img{width:52px;height:52px;border-radius:14px;box-shadow:none;border:1px solid var(--line)}
.brand b{display:block;font:400 18px "Times New Roman","Liberation Serif",Times,serif;letter-spacing:.06em}
.brand small{display:block;color:var(--rose-dark);font-weight:700;letter-spacing:.12em;font-size:11px;text-transform:uppercase}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 18px;margin-bottom:14px}
h1{font:600 clamp(26px,7vw,34px)/1.12 Georgia,"Times New Roman",serif;margin:2px 0 10px}
h2{font:600 22px/1.2 Georgia,"Times New Roman",serif;margin:0 0 12px}
p{margin:0 0 12px;color:var(--plum-soft)}
.kicker{display:block;color:var(--rose-dark);font-weight:800;letter-spacing:.14em;font-size:12px;text-transform:uppercase;margin-bottom:6px}
.progress{height:6px;background:var(--rose-soft);border-radius:99px;overflow:hidden;margin:4px 0 16px}
.progress i{display:block;height:100%;background:linear-gradient(var(--rose),var(--rose));border-radius:99px;transition:width .25s}
.options{display:grid;gap:10px}
.option{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;padding:14px;border:1.5px solid var(--line);border-radius:14px;
  background:#fff;font-family:inherit;font-size:inherit;color:var(--plum);cursor:pointer;min-height:52px}
.option input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--rose-dark);flex:0 0 auto}
.option.selected,.option:has(input:checked){border-color:var(--rose-dark);background:var(--rose-soft)}
.option:focus-within{outline:3px solid rgba(163,58,58,.25);outline-offset:1px}
label.field{display:grid;gap:6px;font-weight:700;font-size:14px;margin-bottom:12px}
label.field span.hint{font-weight:400;color:var(--plum-soft);font-size:13px}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=time],input[type=search],select,textarea{
  width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-family:inherit;font-size:16px;line-height:1.3;color:var(--plum)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--rose-dark);box-shadow:0 0 0 3px rgba(163,58,58,.15)}
textarea{min-height:92px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row-plz{display:grid;grid-template-columns:7.5em 1fr;gap:10px}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14.5px;color:var(--plum);margin:10px 0;line-height:1.45}
.check input{width:22px;height:22px;flex:0 0 auto;margin:1px 0 0;accent-color:var(--rose-dark)}
.check a{color:var(--rose-dark);font-weight:700}
.group{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:12px 0;background:#ffffff}
.group b{display:block;font-size:14.5px;margin-bottom:2px}
.inline-checks{display:flex;flex-wrap:wrap;gap:6px 18px}
.inline-checks .check{margin:6px 0}
.actions{display:flex;gap:10px;margin-top:16px}
.actions>*{flex:1}
button.primary,a.primary,button.secondary,a.secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 18px;
  border-radius:14px;font-family:inherit;font-weight:800;font-size:16px;line-height:1.2;cursor:pointer;text-decoration:none;text-align:center}
button.primary,a.primary{border:0;background:linear-gradient(var(--rose),var(--rose));color:#fff;box-shadow:0 8px 18px rgba(163,58,58,.28)}
button.secondary,a.secondary{border:1.5px solid var(--line);background:#fff;color:var(--plum)}
button:disabled{opacity:.55;cursor:not-allowed}
.notice{padding:12px 14px;border-radius:12px;margin:10px 0;font-size:14.5px}
.notice.ok{background:var(--ok-soft);color:var(--ok)}
.notice.error{background:var(--warn-soft);color:var(--warn);font-weight:700}
.notice.info{background:var(--gold-soft);color:#6b4d1d}
.offline-badge{display:none;position:sticky;top:0;z-index:5;margin:-16px -16px 12px;padding:8px 16px;background:var(--amber-soft);color:var(--amber);font-weight:700;font-size:13.5px;text-align:center}
body.is-offline .offline-badge{display:block}
.scale{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin:10px 0 4px}
.scale button{min-height:46px;border:1.5px solid var(--line);border-radius:10px;background:#fff;font-family:inherit;font-weight:800;font-size:16px;color:var(--plum);cursor:pointer}
.scale button.selected{background:var(--rose-dark);border-color:var(--rose-dark);color:#fff}
.scale-legend{display:flex;justify-content:space-between;color:var(--plum-soft);font-size:12.5px}
.days{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x mandatory}
.days button{flex:0 0 auto;scroll-snap-align:start;min-width:74px;padding:10px 8px;border:1.5px solid var(--line);border-radius:14px;background:#fff;
  color:var(--plum);font-family:inherit;font-size:inherit;cursor:pointer;text-align:center}
.days button small{display:block;font-size:12px;color:var(--plum-soft);text-transform:uppercase;letter-spacing:.06em}
.days button b{display:block;font-size:20px}
.days button span{display:block;font-size:12px;color:var(--plum-soft)}
.days button.selected{border-color:var(--rose-dark);background:var(--rose-soft)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin:6px 0 4px}
.slots button{min-height:48px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-family:inherit;font-weight:800;font-size:16px;color:var(--plum);cursor:pointer}
.slots button.selected{background:var(--rose-dark);border-color:var(--rose-dark);color:#fff}
.choice-summary{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--rose-soft);font-weight:700;margin:6px 0 14px}
.muted{color:var(--plum-soft);font-size:13.5px}
.center{text-align:center}
.big-icon{font-size:46px;line-height:1;margin:6px 0 10px}
.footer{display:flex;justify-content:center;gap:16px;font-size:13px;margin-top:10px}
.footer a{color:var(--plum-soft)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
@media (max-width:420px){.row2{grid-template-columns:1fr}.scale{grid-template-columns:repeat(5,1fr)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- Kalender-App ---------- */
.kal-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.kal-top .brand{padding:0}
.kal-nav{display:flex;gap:8px;align-items:center;justify-content:space-between;margin:6px 0 12px}
.kal-nav button{min-height:44px;min-width:44px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-family:inherit;font-weight:800;font-size:16px;color:var(--plum);cursor:pointer;padding:0 12px}
.kal-nav b{font:600 17px Georgia,serif;text-align:center;flex:1}
.kal-day{background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:10px;overflow:hidden}
.kal-day.today{border-color:var(--rose-dark);box-shadow:0 0 0 2px rgba(163,58,58,.15)}
.kal-day header{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:10px 14px;background:#ffffff;border-bottom:1px solid var(--line)}
.kal-day header b{font-size:15.5px;margin-right:auto}
.chip{display:inline-block;padding:3px 9px;border-radius:99px;font-size:12px;font-weight:700}
.chip.holiday{background:#f8eaea;color:#a33a3a}
.chip.school{background:#e5f0fb;color:#24527a}
.chip.count{background:var(--amber-soft);color:var(--amber)}
.kal-items{display:grid}
.kal-item{display:grid;grid-template-columns:4.6em 1fr;gap:10px;align-items:start;padding:10px 14px;border:0;border-top:1px solid #f4eee5;background:#fff;
  text-align:left;font-family:inherit;font-size:inherit;color:var(--plum);width:100%;cursor:pointer}
.kal-item:first-child{border-top:0}
.kal-item time{font-weight:800;font-size:14px;color:var(--plum-soft)}
.kal-item b{display:block;font-size:15px}
.kal-item small{display:block;color:var(--plum-soft);font-size:13px;white-space:pre-line}
.kal-item.business{border-left:4px solid var(--rose)}
.kal-item.private{border-left:4px solid #5aa36d}
.kal-item.birthday_private{border-left:4px solid #e2b93b}
.kal-item.birthday_customer{border-left:4px solid #4a84c4}
.kal-item.birthday_team{border-left:4px solid #8a63c6}
.kal-item.booking_request{border-left:4px solid var(--amber);background:var(--amber-soft)}
.kal-empty{padding:10px 14px;color:var(--plum-soft);font-size:13.5px}
.kal-requests .req{border:1.5px solid #f3cfa3;background:var(--amber-soft);border-radius:14px;padding:12px 14px;margin:8px 0}
.kal-requests .req .actions{margin-top:10px}
.fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));width:60px;height:60px;border-radius:50%;border:0;
  background:linear-gradient(var(--rose),var(--rose));color:#fff;font-family:inherit;font-weight:400;font-size:34px;line-height:1;box-shadow:0 10px 24px rgba(163,58,58,.4);cursor:pointer}
.sheet-backdrop{position:fixed;inset:0;background:rgba(46,26,38,.42);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.sheet-top{position:sticky;top:-20px;z-index:2;margin:-20px -18px 10px;padding:10px 12px;background:#fff;border-bottom:1px solid #f1ebe2;border-radius:22px 22px 0 0}
.sheet-back{min-height:42px;padding:0 16px;border:1.5px solid #ece3d6;border-radius:12px;background:#fff;color:#2e1a26;font:inherit;font-weight:800;cursor:pointer}
.sheet{width:min(640px,100%);max-height:92vh;max-height:92dvh;overflow:auto;background:#fff;border-radius:22px 22px 0 0;padding:20px 18px calc(22px + env(safe-area-inset-bottom))}
.picked{display:flex;align-items:center;gap:8px;margin:6px 0 10px}
.results{display:grid;gap:6px;margin:6px 0 10px}
.results button{text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-family:inherit;font-size:inherit;cursor:pointer}
.code-input{font:800 26px/1 ui-monospace,Menlo,Consolas,monospace!important;letter-spacing:.2em;text-align:center;text-transform:uppercase}
.textbox{white-space:pre-wrap;background:#ffffff;border:1px solid var(--line);border-radius:12px;padding:12px;font-size:14px;max-height:220px;overflow:auto}
/* 8.46.0: „hidden“ gilt immer (auch bei .check/.row2) */
[hidden]{display:none!important}

/* 9.2.1: Zurueck-Knopf der Kalender-App kraeftig gefuellt - auf jedem Handy gut lesbar */
.sheet-back{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 18px;border:0;border-radius:12px;
  background:#2e1a26;color:#fff;-webkit-text-fill-color:#fff;font-family:inherit;font-size:16px;font-weight:800;line-height:1;opacity:1;box-shadow:0 4px 14px rgba(46,26,38,.22)}
.sheet-back:active{background:#4a2b3d}
/* 9.3.0: Ergebnis der Quiz-Varianten (z. B. Make-up-Typ) */
.quiz-result{margin:14px 0 18px;padding:18px 18px 14px;border:1px solid #e3d2b0;border-left:4px solid #b8955a;border-radius:16px;background:#fbf8f3;text-align:left}
.quiz-result h2{margin:4px 0 6px;color:#2e1a26}
.quiz-result p{margin:0;color:#4a2b3d;line-height:1.5}
/* 9.5.0: Familie & Team in der Kalender-App */
.share-person{display:grid;gap:8px;padding:12px;margin:8px 0;border:1px solid var(--line);border-radius:14px;background:#fff}
.share-person small{display:block;color:#6f5a66;margin-top:3px;line-height:1.4}
.share-actions{display:flex;flex-wrap:wrap;gap:6px}
.share-actions button{min-height:40px;padding:6px 12px}
.share-actions button.danger{background:#a33a3a;color:#fff;-webkit-text-fill-color:#fff;border-color:#a33a3a}
.pair-code{margin:10px 0;font-size:32px;font-weight:900;letter-spacing:.12em;text-align:center;color:#2e1a26}
.share-steps{padding-left:20px;line-height:1.6}

/* 9.5.2: Code-Feld beim Koppeln passt auf jeden Bildschirm (vorher ohne Feldtyp ungestaltet und zu breit) */
.code-input{width:100%;max-width:100%;box-sizing:border-box;font-size:24px!important;letter-spacing:.12em}
@media (max-width:380px){.code-input{font-size:20px!important;letter-spacing:.08em}}
/* 9.6.1: Kalender-App – bei drei Knöpfen zwei nebeneinander, der dritte darunter (Text bleibt lesbar) */
.actions{flex-wrap:wrap}
.actions>*{flex:1 1 calc(50% - 5px);min-width:0}
/* 9.6.1: Hinweis „Benachrichtigungen einschalten“ oben in der Kalender-App */
.push-hint{display:grid;gap:10px;margin:0 0 12px;padding:12px 14px;border:1px solid #e3d2b0;border-left:4px solid #b8955a;border-radius:14px;background:#fbf8f3}
.push-hint p{margin:0;line-height:1.45}
.push-hint .actions{margin-top:0}

/* 9.7.1: Monatsraster am Handy fast randlos – mehr vom Termin-Titel lesbar */
@media (max-width:600px){#month .ltm-grid{margin:0 -12px;max-width:none}}