/* Design-Variante „Beige“: angelehnt an die Wartezimmer-Präsentation (Samsung Frame) und die Homepage.
   Grund #f7f3ef, Papier #fffdfb, Sand #ebe4dc, Taupe #ac9d91 / #7d6f64, Text warmes Dunkelbraun #4a4440.
   Status in den Pastelltönen der Präsentation (Mint, Sonne, Koralle). Knöpfe als Pillen wie „Termin buchen“. */
:root{
  --bg:#f7f3ef; --paper:#fffdfb; --sand:#ebe4dc; --taupe:#d8d1cb; --taupe-d:#7d6f64;
  --line:#e2d9cf; --ink:#4a4440; --muted:#6b625b; --strong:#3a332e;
  --akzent:#ac9d91; --pille:#e8dccb; --pille-h:#dfd0bb;
  --ok:#3f7d6f; --ok-bg:#dcefe9; --warn:#8a6414; --warn-bg:#fbefd0; --crit:#a24a35; --crit-bg:#fbe1d9;
  --radius:14px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#211d1a; --paper:#2a2521; --sand:#352f2a; --taupe:#5a514a; --taupe-d:#c9b9a9;
  --line:#40382f; --ink:#e6ded5; --muted:#b3a89c; --strong:#f6efe7;
  --akzent:#ac9d91; --pille:#4a4037; --pille-h:#574b40;
  --ok:#9bd3c4; --ok-bg:#24372f; --warn:#f0cd7a; --warn-bg:#3c321c; --crit:#f0a28f; --crit-bg:#432a24}}
:root[data-theme="dark"]{
  --bg:#211d1a; --paper:#2a2521; --sand:#352f2a; --taupe:#5a514a; --taupe-d:#c9b9a9;
  --line:#40382f; --ink:#e6ded5; --muted:#b3a89c; --strong:#f6efe7;
  --akzent:#ac9d91; --pille:#4a4037; --pille-h:#574b40;
  --ok:#9bd3c4; --ok-bg:#24372f; --warn:#f0cd7a; --warn-bg:#3c321c; --crit:#f0a28f; --crit-bg:#432a24}

body{color:var(--ink)}
h1,h2,h3{color:var(--strong)}
.eyebrow,th{color:var(--taupe-d);letter-spacing:.2em}

/* Rahmen und Flächen */
.app{border:0;border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 0 var(--line),0 18px 40px -28px rgba(74,68,64,.35)}
.side{background:var(--sand);border-right:0}
.side .who{border-bottom-color:var(--taupe)}
.nav{border-radius:0 999px 999px 0;margin-right:14px}
label.nav:hover,a.nav:hover{background:rgba(255,253,251,.55)}
.panel{border-radius:var(--radius);border-color:var(--line);background:var(--paper);overflow:hidden}
.panel>h3{background:var(--sand);border-bottom-color:var(--line);font-weight:500}
.tbl table thead th{background:var(--sand)}
.stat{border-radius:var(--radius);border:0;background:var(--sand)}
.stat .v{color:var(--strong);font-weight:400}
.head{border-bottom:0;position:relative;padding-bottom:22px}
.head::after{content:"";position:absolute;left:0;bottom:0;width:90px;height:3px;background:var(--akzent)}

/* Knöpfe als Pillen */
.btn{border-radius:999px;background:var(--strong);border-color:var(--strong);padding:9px 18px}
.btn.ghost{background:var(--pille);border-color:var(--pille);color:var(--strong)}
.btn.ghost:hover{background:var(--pille-h)}
.btn.sm{padding:5px 12px}
.chip{border-radius:999px;padding:3px 10px}
.switch{border-radius:999px;overflow:hidden;border-color:var(--akzent)}
.cnt{border-radius:999px}

/* Formulare */
select,input[type=text],input[type=date],input[type=number],textarea{border-radius:10px;border-color:var(--taupe)}

/* Patienten-App */
.phone{border-color:#3a332e}
.card{border-radius:var(--radius);border-color:var(--line)}
.card.dark{background:#4a4440;border-color:#4a4440}
.tile{border-radius:var(--radius);background:var(--sand);border:0}
.ptab label.sos,.ptab button.sos{color:var(--crit)}
details.sos{border-radius:12px;border-color:var(--line)}
.wahl{border-radius:12px}
.notif{border-radius:16px}
.photos div{border-radius:10px}
.letter{border-radius:10px}
.toast{border-radius:999px;background:#4a4440}
.notif-knoepfe label{border-radius:999px;border-color:var(--taupe);background:var(--paper)}
.badge2{border-radius:999px;border-color:var(--akzent);color:var(--taupe-d)}
.okmsg{border-radius:12px}
.call{border-radius:var(--radius)}