/* ============================================================
   Besuch.app · Oberfläche im Stil von iOS 26/27 („Liquid Glass“)

   Diese Schicht liegt über app.css und formt die vorhandenen Bauteile um:
   durchscheinende Leisten mit Unschärfe, schwebende Tab-Leiste, Kapsel-Knöpfe,
   Systemschrift, iOS-Segmente und -Schalter, weiche Federbewegungen.
   Nichts an der Struktur ändert sich — nur, wie es aussieht und sich anfühlt.
   ============================================================ */
:root{
  /* Schrift: auf dem iPhone ist das San Francisco, sonst die bisherige */
  --body:-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Inter', sans-serif;
  --display:-apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, 'Bricolage Grotesque', sans-serif;
  /* Radien wie in iOS: durchgehend runder, Knöpfe als Kapsel */
  --radius:22px; --r-karte:18px; --r-feld:14px; --r-blatt:30px;
  /* Glas: die Leisten liegen über dem Inhalt, nicht daneben */
  --glas:rgba(250,252,254,.72); --glas-stark:rgba(250,252,254,.86); --glas-rand:rgba(18,34,56,.08);
  --blur:saturate(180%) blur(22px);
  /* Trennlinien so fein wie möglich */
  --line:rgba(18,34,56,.10); --hairline:rgba(18,34,56,.13);
  /* Füllungen wie in iOS: neutrales Grau mit Deckkraft statt eigener Farbe */
  --fill:rgba(118,118,128,.10); --fill-2:rgba(118,118,128,.16); --fill-3:rgba(118,118,128,.22);
  /* Schatten: tiefer, weicher, weniger sichtbar */
  --shadow:0 18px 40px -18px rgba(18,34,56,.30); --shadow-soft:0 1px 3px rgba(18,34,56,.10);
  --feder:cubic-bezier(.32,.72,0,1);   /* die iOS-Feder */
}
body{background:var(--bg);letter-spacing:-.01em}
.app{background:var(--screen)}
@media (min-width:600px){ .app{border-radius:44px} }

/* ---------- Kopfleisten: Glas mit Haarlinie ---------- */
.appbar,.view > .pt-head{
  background:var(--glas);border-bottom:.5px solid var(--hairline);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
}
.view > .pt-head{transition:height .3s var(--feder),padding .3s var(--feder),box-shadow .3s var(--feder)}
.app.scrolled .view > .pt-head{box-shadow:none;border-bottom-color:var(--hairline)}
.pt-main h3,.appbar .nm{letter-spacing:-.02em;font-weight:700}
.pt-logo{border-radius:12px;border:.5px solid var(--hairline)}

/* ---------- Tab-Leiste: schwebende Glaskapsel ---------- */
.tabbar,.v-tabbar{
  background:var(--glas-stark);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:.5px solid var(--glas-rand);border-radius:26px;
  margin:0 12px max(10px,env(safe-area-inset-bottom));padding:7px 6px;
  box-shadow:0 10px 30px -12px rgba(18,34,56,.28);
}
.tab{border-radius:18px;padding:7px 0 6px;isolation:isolate;transition:color .2s,background .25s var(--feder)}
.tab .ic{transition:transform .3s var(--feder)}
.tab.on{color:var(--primary)} .tab.on .ic{transform:scale(1.06)}
.tab.on::before{content:"";position:absolute;inset:1px 5px;border-radius:16px;background:var(--primary-soft);z-index:-1;animation:tabPille .4s var(--feder)}
@keyframes tabPille{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.tab:active .ic{transform:scale(.9)}
.v-footer,.p-foot{background:transparent}

/* ---------- Knöpfe: Kapselform, weiches Drücken ---------- */
.btn{border-radius:999px;font-size:16px;font-weight:600;letter-spacing:-.01em;padding:15px 20px;
  transition:transform .22s var(--feder),filter .2s,background .2s}
.btn:active{transform:scale(.96)}
.btn-primary{box-shadow:0 10px 22px -12px rgba(16,104,184,.85)}
.btn-soft{background:var(--fill-2);color:var(--primary-700)}
.btn-line{background:var(--fill);border:none;color:var(--ink)}
.btn-ghost{border-radius:999px}
.btn.small{padding:10px 16px;font-size:14px}
.info-chip,.chip,.hero-chip,.rang-alle-btn,.wetter-chip{border-radius:999px;transition:transform .2s var(--feder),background .2s}
.info-chip:active,.rang-alle-btn:active,.wetter-chip:active{transform:scale(.94)}
.close{border-radius:999px;transition:transform .2s var(--feder)} .close:active{transform:scale(.9)}

/* ---------- Segmente wie in iOS ---------- */
.seg{background:var(--fill);border-radius:11px;padding:2px;gap:2px}
.seg button{border-radius:9px;font-size:13.5px;font-weight:600;color:var(--ink);padding:8px 10px;transition:background .25s var(--feder),transform .2s var(--feder)}
.seg button.on{background:var(--surface);box-shadow:0 3px 8px -3px rgba(18,34,56,.28),0 0 0 .5px rgba(18,34,56,.04)}
.seg button:active{transform:scale(.97)}

/* ---------- Karten und Listen: weicher, ohne harte Ränder ---------- */
.card,.slot,.set-card,.dm-row,.task-row,.tip-card,.spiel-card,.mine-card,.gen-card,.pf-row,.bew-row,.rang-row,.av-leiste .av-person .av{
  border-radius:var(--r-karte);
}
.slot,.dm-row,.task-row,.set-card,.bew-row{border:.5px solid var(--hairline);box-shadow:var(--shadow-soft)}
.slot.bookable:active,.dm-row:active,.bew-row:active,.spiel-card:active{transform:scale(.985)}
.slot,.dm-row,.bew-row,.spiel-card,.task-row{transition:transform .22s var(--feder),background .2s,border-color .2s}
.day-chip{border-radius:16px;border:.5px solid var(--hairline);transition:transform .24s var(--feder),background .2s}
.day-chip:active{transform:scale(.94)}
.day-chip.sel{box-shadow:0 8px 18px -10px rgba(16,104,184,.8)}

/* ---------- Eingaben: gefüllt statt umrandet ---------- */
input[type=text],input[type=email],input[type=tel],input[type=search],input[type=number],input:not([type]),textarea,select,.sheet-field input,.sheet-field textarea,.note-add input{
  background:var(--fill);border:none!important;border-radius:var(--r-feld);font-size:16px;
  box-shadow:inset 0 0 0 .5px var(--hairline);
  transition:box-shadow .2s,background .2s;
}
input:focus,textarea:focus,select:focus{outline:none;background:var(--surface);box-shadow:0 0 0 3.5px var(--primary-soft),0 0 0 1.5px var(--primary)}
::placeholder{color:var(--faint)}

/* ---------- Schalter im Stil von iOS ---------- */
.task-share-opt input[type=checkbox],.toggle-row input[type=checkbox],.sheet-field input[type=checkbox]{
  appearance:none;-webkit-appearance:none;position:relative;width:50px;height:30px;border-radius:999px;
  background:var(--fill-3);cursor:pointer;flex:0 0 auto;transition:background .28s var(--feder);
}
.task-share-opt input[type=checkbox]::after,.toggle-row input[type=checkbox]::after,.sheet-field input[type=checkbox]::after{
  content:"";position:absolute;top:2px;left:2px;width:26px;height:26px;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(18,34,56,.28);transition:transform .28s var(--feder);
}
.task-share-opt input[type=checkbox]:checked,.toggle-row input[type=checkbox]:checked,.sheet-field input[type=checkbox]:checked{background:#34C759}
.task-share-opt input[type=checkbox]:checked::after,.toggle-row input[type=checkbox]:checked::after,.sheet-field input[type=checkbox]:checked::after{transform:translateX(20px)}

/* ---------- Blätter: Glas, tiefe Rundung, Federbewegung ---------- */
.scrim{background:rgba(12,24,40,.30);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sheet{
  border-radius:var(--r-blatt) var(--r-blatt) 0 0;background:var(--glas-stark);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  animation:iosUp .46s var(--feder);box-shadow:0 -20px 50px -24px rgba(18,34,56,.45);
}
@keyframes iosUp{from{transform:translateY(100%)}to{transform:none}}
.grab{width:36px;height:5px;border-radius:3px;background:var(--fill-3);margin:8px auto 2px}
.sheet-head h3{letter-spacing:-.02em;font-weight:700}
.sheet-head{position:sticky;top:0;z-index:2;background:linear-gradient(var(--glas-stark) 72%,rgba(250,252,254,0))}

/* ---------- Hinweise, Meldungen ---------- */
.toast{border-radius:999px;background:rgba(18,34,56,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 14px 34px -14px rgba(18,34,56,.7);animation:toastIn .4s var(--feder)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,14px) scale(.94)}to{opacity:1}}
.gen-intro h4,.section-head h4{letter-spacing:-.02em}
.badge{box-shadow:0 2px 6px -2px rgba(196,83,77,.8)}

/* ---------- Bewegung: überall dieselbe Feder ---------- */
.view{animation:iosRise .5s var(--feder)} @keyframes iosRise{from{opacity:0;transform:translateY(8px) scale(.995)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .view,.sheet,.toast{animation:none}
  .btn,.tab .ic,.day-chip,.slot,.dm-row,.bew-row,.spiel-card,.task-row{transition:none}
}

/* ---------- Feinschliff ---------- */
.av-person small{white-space:nowrap}
#root{padding-bottom:2px}
.spiel-sheet.voll{border-radius:0;background:var(--screen)}
.spiel-sheet .sheet-head{background:linear-gradient(var(--glas-stark) 78%,rgba(250,252,254,0))}
.mem-karte,.sol-karte,.wort-taste,.sd-zelle,.zip-zelle{transition:transform .24s var(--feder),background .2s}
.wort-taste:active,.sd-pad button:active{transform:scale(.92)}
.sd-pad button,.wort-taste{border-radius:14px}
.spiel-gewonnen{border-radius:22px;border:none;box-shadow:var(--shadow-soft)}
.rang-row{border-radius:16px}
.rang-flash{border-radius:24px}
.tip-card,.gen-card,.set-card,.mine-card{border-radius:20px}
.pt-chips .info-chip{font-weight:600}
.sheet-cta .btn{border-radius:999px}
.appwrap > .p-foot .tabbar{margin-top:6px}

/* Die Segmentleiste der Übersicht bleibt in der Hausfarbe — sie ist dort die Hauptnavigation */
.pview-seg button.on{background:var(--primary);color:#fff;box-shadow:0 6px 14px -8px rgba(16,104,184,.9)}
.pview-seg button.on .seg-tx small{color:rgba(255,255,255,.8)}

/* ---------- Wetter: schmale Zeile im Kopf ---------- */
.wetter-karte{display:flex;align-items:center;gap:7px;border:none;background:var(--fill);border-radius:999px;
  padding:4px 12px 4px 7px;cursor:pointer;font-family:var(--body);color:var(--ink);margin-left:auto;flex:0 0 auto;
  transition:transform .22s var(--feder),background .2s}
.wetter-karte:active{transform:scale(.96)}
.wk-ic{display:grid;place-items:center;color:var(--primary)} .wk-ic svg{width:21px;height:21px;stroke-width:1.7}
.wk-tx{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.wk-tx b{font-size:15px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.wk-tx small{font-size:10px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.app.scrolled .view > .pt-head .wetter-karte{display:none}

/* ---------- Wetter im Vollbild ---------- */
.wetter-scrim{background:rgba(12,24,40,.5)}
.wetter-view{height:100%;max-height:100%;border-radius:0;padding:0 0 max(24px,env(safe-area-inset-bottom));
  background:linear-gradient(170deg,var(--w1) 0%,var(--w2) 42%,#F2F6FB 78%);
  color:#fff;overflow-y:auto;animation:iosUp .46s var(--feder);-webkit-backdrop-filter:none;backdrop-filter:none}
.wetter-view .close{position:absolute;top:max(12px,env(safe-area-inset-top));right:14px;z-index:3;
  width:34px;height:34px;border-radius:999px;border:none;background:rgba(255,255,255,.22);color:#fff;font-size:15px;cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.wv-kopf{position:relative;text-align:center;padding:calc(52px + env(safe-area-inset-top)) 20px 26px}
.wv-ort{font-size:22px;font-weight:600;letter-spacing:-.02em;text-shadow:0 1px 12px rgba(0,0,0,.18)}
.wv-wann{font-size:13px;opacity:.85;margin-top:2px}
.wv-gross{font-size:86px;font-weight:200;line-height:1;letter-spacing:-.05em;margin:6px 0 2px;text-shadow:0 2px 20px rgba(0,0,0,.15)}
.wv-gross span{font-weight:200;opacity:.7}
.wv-lage{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:600;opacity:.95}
.wv-lage svg{width:20px;height:20px;stroke-width:1.8}
.wv-spanne{font-size:14px;opacity:.9;margin-top:4px;font-variant-numeric:tabular-nums}
.wv-block{margin:12px;border-radius:20px;background:rgba(255,255,255,.16);border:.5px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);padding:12px 4px 14px;color:#fff}
.wv-block:nth-of-type(n+3){background:rgba(255,255,255,.62);border-color:rgba(18,34,56,.08);color:var(--ink)}
.wv-titel{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;opacity:.75;padding:0 14px 8px}
.wv-block:nth-of-type(n+3) .wv-titel{color:var(--muted)}
.wv-stunden{display:flex;gap:2px;overflow-x:auto;padding:0 10px 2px;scrollbar-width:none} .wv-stunden::-webkit-scrollbar{display:none}
.wv-std{flex:0 0 auto;width:58px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 0;font-variant-numeric:tabular-nums}
.wv-zeit{font-size:12px;opacity:.85} .wv-std .wv-ic svg{width:22px;height:22px;stroke-width:1.8}
.wv-regen{font-size:10px;color:#BFE3FF;font-weight:700;margin-top:-3px}
.wv-std b{font-size:17px;font-weight:600}
.wv-tage{display:flex;flex-direction:column}
.wv-tag{display:grid;grid-template-columns:52px 44px 34px 1fr 34px;align-items:center;gap:6px;width:100%;
  background:transparent;border:none;padding:8px 14px;cursor:pointer;font-family:var(--body);color:inherit;
  border-top:.5px solid rgba(18,34,56,.10);font-variant-numeric:tabular-nums;transition:background .2s}
.wv-tag:first-child{border-top:none} .wv-tag.sel{background:rgba(255,255,255,.5);border-radius:14px}
.wv-t-name{text-align:left;font-size:15px;font-weight:600}
.wv-t-ic{display:flex;align-items:center;gap:3px} .wv-t-ic svg{width:22px;height:22px;stroke-width:1.8;color:var(--primary)}
.wv-t-ic i{font-style:normal;font-size:10px;font-weight:700;color:var(--primary)}
.wv-t-min{font-size:15px;color:var(--muted);text-align:right}
.wv-t-bar{position:relative;height:5px;border-radius:3px;background:rgba(18,34,56,.12)}
.wv-t-bar i{position:absolute;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,#68B7E8,#F2C14E)}
.wv-t-max{font-size:15px;font-weight:600;text-align:right}
.wv-kacheln{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 12px}
.wv-kachel{background:rgba(255,255,255,.7);border:.5px solid rgba(18,34,56,.07);border-radius:16px;padding:11px 12px;display:flex;flex-direction:column;gap:2px}
.wv-k-kopf{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
.wv-kachel b{font-size:21px;font-weight:600;letter-spacing:-.02em}
.wv-kachel small{font-size:11px;color:var(--muted);line-height:1.3}
@media (prefers-reduced-motion:reduce){.wetter-view{animation:none}}

/* ---------- Patienten-Kopf: Name oben, Wetter rechts, Chips darunter ---------- */
.appbar{flex-direction:column;align-items:stretch;gap:9px;padding:12px 16px 11px}
.ab-oben{display:flex;align-items:center;gap:10px}
.ab-oben .brandmark{flex:1;min-width:0} .ab-oben .brandmark .nm{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ab-chips{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ab-chips .role-badge{padding:6px 11px;font-size:11.5px}
.ab-chips .info-chip{font-size:12px}
.ab-chips .share-btn{margin-left:auto}
.appbar .wetter-karte{margin-left:0}