:root {
  --cream: #F7F2EC;
  --card: #FCFAF7;
  --line: #E6DED3;
  --forest: #141F1A;
  --ink: #2A2420;
  --muted: #8A8078;
  --gold: #C4A06B;
  --tan: #A98862;
  --tan-soft: #E9DCCB;
  --sage: #E4E7DF;
  --ok: #DCEFD9; --ok-ink: #3D6B3F;
  --danger: #9C3D2E;
  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --r: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--cream); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body { font-size: 17px; line-height: 1.45; -webkit-text-size-adjust: 100%; }
#app { min-height: 100%; display: flex; flex-direction: column; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- Navigation (hell, wie die Vorlage) ------------------------------------ */
.nav { position: sticky; top: 0; z-index: 5; background: rgba(247,242,236,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: calc(env(safe-area-inset-top) + 8px) 16px 8px; display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; min-height: 56px; }
.nav .back { font-size: 26px; line-height: 1; padding: 6px 10px; border-radius: 10px; justify-self: start; }
.nav .title { text-align: center; font-weight: 600; font-size: 19px; }
.nav .menu { font-size: 24px; padding: 6px 10px; border-radius: 10px; justify-self: end; }
.nav .menu.txt { font-size: 15px; color: var(--muted); }
.nav .logo { display: flex; align-items: center; gap: 10px; justify-content: center; }
.nav .logo svg { height: 30px; width: auto; }
.nav .logo span { font-family: var(--serif); font-size: 18px; letter-spacing: .08em; }

/* ---- Knöpfe ----------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--tan-soft); color: var(--ink); font-weight: 600; white-space: nowrap; }
.btn-tan { background: var(--tan); color: #fff; }
.btn-dark { background: var(--forest); color: var(--cream); }
.btn-line { background: transparent; border: 1px solid var(--line); font-weight: 500; }
.btn-danger { background: transparent; border: 1px solid var(--danger); color: var(--danger); }
.btn-block { width: 100%; }
.btn-lg { min-height: 58px; font-size: 18px; border-radius: 18px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 15px; }

/* ---- Seiten ----------------------------------------------------------------- */
.page { width: 100%; max-width: 640px; margin: 0 auto; padding: 8px 20px calc(env(safe-area-inset-bottom) + 48px); flex: 1; }
.page.wide { max-width: 900px; }
h1, h2, h3 { margin: 0; font-weight: 600; color: var(--ink); }
h1 { font-size: 28px; line-height: 1.15; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: 14px; }
.card { background: var(--card); border-radius: var(--r); padding: 16px 18px; }
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 24px); transform: translateX(-50%); background: var(--forest); color: var(--cream); padding: 12px 20px; border-radius: 999px; font-size: 15px; box-shadow: 0 8px 30px rgba(0,0,0,.18); z-index: 20; max-width: 90vw; }
.toast.err { background: var(--danger); }
.empty { padding: 36px 12px; text-align: center; color: var(--muted); }

/* ---- Login ------------------------------------------------------------------ */
.login { flex: 1; display: grid; place-items: center; padding: 40px 20px; }
.login form { width: 100%; max-width: 380px; text-align: center; }
.login .wordmark { width: 230px; height: auto; margin: 0 auto; display: block; }
.login .sub { font-size: 12px; letter-spacing: .2em; color: var(--muted); margin: 10px 0 34px; }
.login input { width: 100%; padding: 15px 16px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font-size: 18px; text-align: center; }
.login .err { color: var(--danger); margin-top: 12px; min-height: 22px; }

/* ---- Kundenliste ------------------------------------------------------------ */
.search { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 16px; margin: 6px 0 18px; }
.search input { flex: 1; border: 0; background: transparent; padding: 10px 0; font-size: 17px; -webkit-appearance: none; }
.search input:focus { outline: none; }
.list { display: grid; gap: 10px; }
.crow { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; background: var(--card); border-radius: var(--r); padding: 12px 16px; }
.crow .av { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--tan-soft); }
.crow .av svg { width: 100%; height: 100%; display: block; }
.crow .nm { font-weight: 600; font-size: 18px; }
.crow .mt { color: var(--muted); font-size: 14px; }
.crow .nr { color: var(--muted); font-size: 13px; text-align: right; }
.crow .nr b { display: block; color: var(--ink); font-weight: 600; font-size: 15px; }
.badge { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; background: var(--sage); color: var(--forest); }
.badge.ok { background: var(--ok); color: var(--ok-ink); }

/* ---- Kundenprofil (Vorlage) ------------------------------------------------- */
.phead { display: grid; grid-template-columns: 124px 1fr; gap: 20px; align-items: center; padding: 10px 0 18px; }
.phead .avatar { width: 124px; height: 124px; border-radius: 50%; overflow: hidden; background: var(--tan-soft); }
.phead .avatar svg { width: 100%; height: 100%; display: block; }
.phead .pn { font-size: 26px; font-weight: 600; line-height: 1.15; }
.phead .pm { color: var(--muted); font-size: 15px; margin-top: 4px; line-height: 1.5; }
.phead .btn { margin-top: 12px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 6px 0 20px; overflow-x: auto; }
.tabs button { padding: 12px 14px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--tan); background: var(--card); border-radius: 12px 12px 0 0; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 12px; padding: 4px 0; }
.kv .k { color: var(--muted); }
.kv .v { color: var(--ink); word-break: break-word; }
.blk { margin-top: 22px; }
.blk h3 { margin-bottom: 6px; }
.notes { display: grid; gap: 10px; }
.notes .n { background: var(--card); border-radius: var(--r); padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.notes .n .d { color: var(--muted); font-size: 13px; margin-top: 4px; }
.notes .n button { color: var(--muted); font-size: 18px; padding: 0 4px; }
.addbtn { margin-top: 18px; }
.sheet { background: var(--card); border-radius: var(--r); padding: 18px; margin-top: 14px; }

/* Bearbeiten */
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; color: var(--muted); }
.field input, .field textarea, .field select { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 17px; -webkit-appearance: none; }
.field textarea { min-height: 96px; resize: vertical; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } }

/* Behandlungsverlauf */
.tl { position: relative; padding-left: 26px; }
.tl::before { content: ''; position: absolute; left: 7px; top: 24px; bottom: 24px; width: 2px; background: var(--tan-soft); }
.tl .t { position: relative; display: grid; grid-template-columns: 86px 1fr auto; gap: 14px; align-items: center; padding: 10px 0 10px 8px; border-bottom: 1px solid var(--line); width: 100%; text-align: left; }
.tl .t::before { content: ''; position: absolute; left: -26px; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--card); border: 2px solid var(--tan); transform: translateY(-50%); }
.tl .t .th { width: 86px; height: 86px; border-radius: 12px; overflow: hidden; background: var(--tan-soft); display: grid; place-items: center; }
.tl .t .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl .t .th svg { width: 64px; height: 64px; color: var(--tan); stroke-width: 1.5; }
.tl .t .d { color: var(--muted); font-size: 14px; }
.tl .t .n { font-weight: 600; font-size: 17px; }
.tl .t .s { color: var(--muted); font-size: 14px; }
.tl .t .chev { color: var(--muted); font-size: 22px; padding: 6px; }

/* Behandlungsdokumentation (Formular) */
.areas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.areas button { display: grid; justify-items: center; gap: 6px; font-size: 13.5px; color: var(--ink); }
.areas button .c { width: 72px; height: 72px; border-radius: 50%; background: var(--card); border: 2px solid transparent; display: grid; place-items: center; }
.areas button .c svg { width: 58px; height: 58px; color: var(--tan); stroke-width: 1.5; }
.areas button.on .c { border-color: var(--tan); background: var(--tan-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { min-height: 44px; padding: 0 18px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.chip.on { background: var(--tan-soft); border-color: var(--tan); }

/* Fotos */
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.photos .p { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--tan-soft); }
.photos .p img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photos .p .d { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px; font-size: 12px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.55)); text-align: left; }
.viewer { position: fixed; inset: 0; background: rgba(20,31,26,.96); z-index: 30; display: grid; grid-template-rows: auto 1fr auto; }
.viewer img { max-width: 100%; max-height: 100%; margin: auto; display: block; object-fit: contain; }
.viewer .vb { display: flex; justify-content: space-between; align-items: center; padding: calc(env(safe-area-inset-top) + 12px) 18px 12px; color: var(--cream); }
.viewer .vf { padding: 12px 18px calc(env(safe-area-inset-bottom) + 16px); display: flex; justify-content: center; gap: 12px; }
.viewer .btn-line { color: var(--cream); border-color: rgba(255,255,255,.35); }

/* Dokumente */
.docs { display: grid; gap: 10px; }
.docs .doc { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; background: var(--card); border-radius: var(--r); padding: 14px 16px; width: 100%; text-align: left; }
.docs .doc .di { width: 40px; height: 44px; color: var(--tan); }
.docs .doc .t { font-weight: 600; }
.docs .doc .m { color: var(--muted); font-size: 14px; }

/* Formularauswahl */
.choose { display: grid; gap: 10px; }
.choose button { text-align: left; padding: 16px 18px; background: var(--card); border-radius: var(--r); display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; width: 100%; }
.choose button svg { width: 40px; height: 40px; color: var(--tan); }
.choose button .ct { font-weight: 600; font-size: 17px; }
.choose button .ck { font-size: 13.5px; color: var(--muted); }
.choose button .chev { color: var(--muted); font-size: 22px; }

/* ---- Kundinnen-Modus (Formular ausfüllen) ----------------------------------- */
.cmode { font-size: 18px; }
.cmode .page { max-width: 760px; padding-bottom: 140px; }
.cmode .intro { margin: 10px 0 26px; }
.cmode .intro h1 { font-family: var(--serif); font-weight: 500; font-size: 32px; }
.cmode .intro .claim { font-family: var(--serif); font-style: italic; color: var(--muted); }
.sec { margin-top: 36px; }
.sec h2 { font-family: var(--serif); font-weight: 500; font-size: 24px; margin-bottom: 2px; }
.rule-gold { height: 1px; background: var(--gold); opacity: .8; margin: 8px 0 18px; }
.q { padding: 16px 0; border-bottom: 1px solid var(--line); }
.q .ql { display: block; margin-bottom: 10px; }
.q input[type=text], .q input[type=email], .q input[type=tel], .q input[type=date], .q textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 18px; -webkit-appearance: none; }
.q .prefix { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; }
.q .prefix span { padding: 13px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--sage); }
.seg { display: inline-flex; border: 1px solid var(--forest); border-radius: 999px; overflow: hidden; }
.seg button { min-width: 96px; min-height: 48px; padding: 0 18px; font-weight: 600; }
.seg button + button { border-left: 1px solid var(--forest); }
.seg button.on { background: var(--forest); color: var(--cream); }
.q .detail { margin-top: 12px; }
.q .chips .chip { border: 1px solid var(--forest); background: transparent; border-radius: 999px; }
.q .chips .chip.on { background: var(--forest); color: var(--cream); }
.info ul { margin: 6px 0 0; padding-left: 22px; }
.info li { margin: 6px 0; }
.info p { margin: 8px 0; }
.info h4 { margin: 12px 0 2px; font-size: 16px; }
.consent { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; padding: 14px 0; }
.consent .box { width: 28px; height: 28px; border: 2px solid var(--forest); border-radius: 7px; margin-top: 2px; display: grid; place-items: center; background: #fff; }
.consent.on .box { background: var(--gold); border-color: var(--gold); }
.consent .box svg { width: 18px; height: 18px; opacity: 0; }
.consent.on .box svg { opacity: 1; }
.consent .req { color: var(--muted); font-size: 14px; display: block; margin-top: 4px; }
.sigwrap { border: 1px solid var(--line); border-radius: 12px; background: #fff; position: relative; }
.sigwrap canvas { display: block; width: 100%; height: 220px; touch-action: none; border-radius: 12px; }
.sigwrap .baseline { position: absolute; left: 32px; right: 32px; bottom: 46px; border-top: 1px dashed var(--line); pointer-events: none; }
.sigwrap .hint { position: absolute; left: 32px; bottom: 18px; color: var(--muted); font-size: 14px; pointer-events: none; }
.sigwrap .clear { position: absolute; right: 12px; top: 12px; }
.actionbar { position: fixed; left: 0; right: 0; bottom: 0; background: rgba(247,242,236,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 14px 20px calc(env(safe-area-inset-bottom) + 14px); display: flex; justify-content: center; gap: 12px; z-index: 6; }
.actionbar .btn { min-width: 200px; }
.problems { background: #fff; border: 1px solid var(--danger); border-radius: 12px; padding: 12px 16px; color: var(--danger); margin: 18px 0; }
.done { flex: 1; display: grid; place-items: center; text-align: center; padding: 40px 20px; }
.done h1 { font-family: var(--serif); font-weight: 500; font-size: 40px; }
.done .heart { color: var(--gold); font-size: 30px; }
.lock { flex: 1; display: grid; place-items: center; background: var(--forest); color: var(--cream); padding: 40px 20px; }
.lock form { width: 100%; max-width: 360px; text-align: center; }
.lock input { width: 100%; padding: 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: var(--cream); font-size: 18px; text-align: center; }
.lock .btn { margin-top: 14px; }
.lock .err { color: #F0B8AC; margin-top: 10px; min-height: 22px; }

/* ---- Menü, Kalender, Termine ---------------------------------------------- */
.nav .home { justify-self: end; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--tan); }
.nav .home svg { width: 30px; height: 30px; stroke-width: 1.6; }
.menu-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tile { background: var(--card); border-radius: 18px; padding: 26px 20px 22px; display: grid; justify-items: center; gap: 4px; text-align: center; min-height: 170px; }
.tile svg { width: 56px; height: 56px; color: var(--tan); stroke-width: 1.4; margin-bottom: 8px; }
.tile .tt { font-weight: 600; font-size: 19px; }
.tile .ts { color: var(--muted); font-size: 14px; }
.appts { display: grid; gap: 8px; }
.appt { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; background: var(--card); border-radius: var(--r); padding: 12px 14px; }
.appt .tm { font-weight: 600; font-size: 17px; line-height: 1.2; }
.appt .du { color: var(--muted); font-size: 13px; font-weight: 500; }
.appt .nm { font-weight: 600; }
.appt .s { color: var(--muted); font-size: 14px; }
.appt .chev { color: var(--muted); font-size: 22px; padding: 6px; }
.week { display: grid; grid-template-columns: 32px repeat(7, 1fr) 32px; gap: 4px; align-items: center; }
.wnav { text-align: center; font-size: 24px; color: var(--muted); }
.wd { display: grid; justify-items: center; gap: 2px; padding: 10px 0 8px; border-radius: 14px; position: relative; }
.wd .wn { font-size: 12px; color: var(--muted); }
.wd .wdd { font-weight: 600; font-size: 18px; }
.wd.today .wdd { color: var(--tan); }
.wd.on { background: var(--forest); color: var(--cream); }
.wd.on .wn, .wd.on .wdd { color: var(--cream); }
.wd .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tan); margin-top: 2px; }
.wd.on .dot { background: var(--gold); }
.cresults { display: grid; gap: 6px; margin-top: 8px; }
.cresults button { text-align: left; background: var(--card); border-radius: 12px; padding: 12px 14px; }
.crow.has-appt .mt b { color: var(--ink); }
.photos .p { display: grid; }
.photos .p .pv { width: 100%; height: 100%; display: block; position: relative; }
.photos .p .px { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; background: rgba(20,31,26,.55); color: #fff; font-size: 14px; display: grid; place-items: center; }

/* Farben der Mitarbeiterinnen */
.dot-c { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 7px; }
.wd .dots { display: inline-flex; gap: 3px; margin-top: 3px; }
.wd .dots .dot { width: 7px; height: 7px; margin: 0; }
.wd.on .dots .dot { opacity: .9; }
.swatches { display: inline-flex; gap: 6px; margin-right: 6px; }
.sw { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset; }
.sw.on { border-color: var(--ink); }

/* Kalender: Modus, Woche, Monat */
.modebar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 16px; }
.seg2 { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg2 a { padding: 8px 18px; border-radius: 999px; font-weight: 500; color: var(--muted); }
.seg2 a.on { background: var(--forest); color: var(--cream); font-weight: 600; }
.wd.we .wn { color: var(--tan); }
.wgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.wcol { background: var(--card); border-radius: 12px; padding: 8px 6px 6px; min-height: 260px; display: flex; flex-direction: column; gap: 6px; }
.wcol.we { background: #F1E7DA; }
.wcol.today { outline: 2px solid var(--tan); }
.wh { display: block; text-align: center; padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.wh .wn { display: block; font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.wcol.we .wh .wn { color: var(--tan); font-weight: 600; }
.wh .wdd { display: block; font-weight: 600; font-size: 15px; }
.wcol.today .wh .wdd { color: var(--tan); }
.mini { display: block; background: #fff; border-radius: 8px; padding: 6px 7px; font-size: 12.5px; line-height: 1.3; }
.mini b { font-weight: 600; }
.mini span { display: block; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wempty { flex: 1; }
.wadd { margin-top: auto; text-align: center; color: var(--muted); font-size: 20px; line-height: 1; padding: 6px 0 2px; border-radius: 8px; }
.wadd:active { background: var(--tan-soft); }
.mgrid { display: grid; grid-template-columns: 34px repeat(7, 1fr); gap: 4px; }
.mh { text-align: center; font-size: 12.5px; color: var(--muted); padding: 4px 0; }
.mh.we { color: var(--tan); font-weight: 600; }
.kw { font-size: 11.5px; color: var(--muted); text-align: center; align-self: center; }
.kw.kwh { font-weight: 600; }
.mday { display: block; background: var(--card); border-radius: 10px; min-height: 78px; padding: 6px 6px; text-align: left; }
.mday.we { background: #F1E7DA; }
.mday.out { opacity: .35; }
.mday.today { outline: 2px solid var(--tan); }
.mday .mn { display: block; font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.mday .mi { display: block; color: #fff; font-size: 11px; border-radius: 5px; padding: 1px 5px; margin-top: 3px; }
.mday .more { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
@media (max-width: 700px) { .wgrid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; } .wcol { padding: 6px 3px; min-height: 200px; } .mini { font-size: 11px; padding: 4px 4px; } .mini span { display: none; } .mday { min-height: 60px; padding: 4px; } .mday .mi { font-size: 10px; } }

/* Ampel und Warnungen */
.st { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; margin-right: 8px; vertical-align: middle; }
.st-ok { background: #DCEFD9; color: #2F5F32; }
.st-warn { background: #F8ECC2; color: #7A5A00; }
.st-bad { background: #F4D6D0; color: #8E2F1F; }
.mini.st-ok { background: #EAF5E8; } .mini.st-warn { background: #FBF3D6; } .mini.st-bad { background: #F9E4E0; }
.ampel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.amp { min-height: 46px; border-radius: 12px; font-weight: 600; border: 2px solid transparent; opacity: .55; }
.amp.on { opacity: 1; border-color: currentColor; }
.badge.bad { background: #F4D6D0; color: #8E2F1F; }
.phead.warn { background: #FBEDEA; border-radius: 16px; padding: 12px 14px; margin: 4px -14px 14px; }
.crow.warn { background: #FBEDEA; }
.chev .st { margin-right: 6px; }

.hint { background: #FBF3D6; border: 1px solid #E8D48A; border-radius: 12px; padding: 12px 14px; margin: 0 0 16px; font-size: 15px; }

.photos .p .d b { display: block; font-weight: 600; }
.photos .p .d { line-height: 1.25; padding: 6px 8px 5px; }

footer.powered { text-align: center; font-size: 11.5px; letter-spacing: .06em; color: var(--muted); opacity: .7; padding: 8px 16px calc(env(safe-area-inset-bottom) + 12px); margin-top: auto; }
.cmode footer.powered, .lock ~ footer.powered, .done ~ footer.powered { display: none; }

/* Kalender: eigene / Kolleginnen */
.calsec { display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 15px; margin: 22px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.calsec.fremd { color: var(--muted); }
.wgrid.fremd .wcol, .mgrid.fremd .mday { background: #F3EEE7; }
.wgrid.fremd .wcol.we, .mgrid.fremd .mday.we { background: #EBE1D3; }
.mini.fremd, .appt.fremd { opacity: .85; }
.appt.fremd .nm { font-weight: 500; }
/* Demo-Banner: nach Anmeldung nach oben schieben */
.demo-banner { transition: transform .45s ease, opacity .45s ease; }
body.angemeldet .demo-banner { transform: translateY(-100%); opacity: 0; pointer-events: none; }
body.angemeldet { padding-top: 0 !important; }
body.angemeldet .nav { top: 0 !important; }
.field label.btn { font-size: 17px; color: var(--ink); }
.field label.btn-tan { color: #fff; font-size: 18px; }

.choose button.locked { opacity: .45; filter: grayscale(1); cursor: not-allowed; }
.choose button .badge { vertical-align: middle; margin-left: 6px; }

/* Preisliste */
.prow { display: grid; grid-template-columns: 1fr 140px 96px 34px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.prow input, .prow select { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 16px; }
.prow .px2 { color: var(--muted); font-size: 18px; text-align: center; }
.prow.ph { font-size: 13px; color: var(--muted); }
.prow.ro { grid-template-columns: 1fr 120px 90px; padding: 10px 0; }
.prow.ro svg { width: 26px; height: 26px; vertical-align: middle; margin-right: 8px; color: var(--tan); }
.prow.ro b { text-align: right; }
@media (max-width: 560px) { .prow { grid-template-columns: 1fr 100px 80px 30px; } .prow.ro { grid-template-columns: 1fr 80px 80px; } }
.chart { width: 100%; height: auto; display: block; }
.q.dep-off { opacity: .4; pointer-events: none; }

/* PIN-Sperrbildschirm */
.pindots { display: flex; justify-content: center; gap: 18px; margin: 10px 0 26px; }
.pindots span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); }
.pindots span.on { background: var(--gold); border-color: var(--gold); }
.pinpad { display: grid; grid-template-columns: repeat(3, 84px); gap: 14px; justify-content: center; }
.pinpad button { width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,.1); color: var(--cream); font-size: 30px; font-weight: 500; }
.pinpad button:active { background: rgba(255,255,255,.25); }

.pinfield { -webkit-text-security: disc; letter-spacing: .3em; font-size: 22px; }

.langbar { margin: 0; } .langbar .chip { min-height: 38px; padding: 0 14px; font-size: 14.5px; }
.cmode .langbar { margin: 0 0 14px; justify-content: flex-end; }