/* ---------- iOS-Feinschliff ---------- */
/* Datumsfeld als Schaltfläche */
.datebtn{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:var(--sunk);color:var(--ink);font-weight:500;font-size:.95rem;padding:10px 12px;border-radius:var(--r-s)}
.datebtn svg{color:var(--accent);flex:none}
.datebtn.empty{color:var(--muted);font-weight:400}
/* Kalender-Popover / Blatt */
.dp-back{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.18)}
.dp{position:fixed;z-index:41;width:330px;max-width:calc(100vw - 24px);background:var(--surface);color:var(--ink);border-radius:16px;padding:14px 14px 12px;box-shadow:0 20px 60px rgba(0,0,0,.25),0 0 0 .5px var(--line);display:grid;gap:10px}
.dp.sheet{left:0;right:0;bottom:0;width:auto;max-width:none;border-radius:16px 16px 0 0;padding:8px max(16px,env(safe-area-inset-left,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-right,0px))}
.dp-grab{display:none}
.dp.sheet .dp-grab{display:block;width:36px;height:5px;border-radius:3px;background:var(--line);justify-self:center;margin-bottom:4px}
.dp-quick{display:flex;gap:6px;flex-wrap:wrap}
.dp-quick button{padding:6px 11px;border-radius:999px;font-size:.84rem;font-weight:500;background:var(--sunk);color:var(--ink)}
.dp-quick .dp-clear{color:var(--crit)}
.dp-head{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 0}
.dp-head b{font-size:1.02rem;font-weight:600}
.dp-nav{background:transparent;color:var(--accent);font-size:1.5rem;line-height:1;padding:2px 10px;font-weight:400}
.dp-wd,.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.dp-wd span{font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;padding:2px 0}
.dp-grid{gap:2px 0}
.dp-day{justify-self:center;width:40px;height:40px;padding:0;border-radius:50%;background:transparent;color:var(--ink);font-size:1.02rem;font-weight:400;font-variant-numeric:tabular-nums}
.dp-day:hover{background:var(--sunk);filter:none}
.dp-day.today{color:var(--accent);font-weight:600}
.dp-day.sel{background:var(--accent);color:var(--accent-ink);font-weight:600}
.dp-foot{display:flex;justify-content:flex-end}
.dp-done{background:transparent;color:var(--accent);font-weight:600;padding:6px 8px}
.dp.sheet .dp-day{width:44px;height:44px}

/* iOS-Schalter statt Kästchen (Tituliert, Schufa …) */
label.ck input{-webkit-appearance:none;appearance:none;width:51px;min-width:51px;height:31px;padding:0;margin:0;border:0;border-radius:31px;cursor:pointer;
  background:radial-gradient(circle at center,#fff 0 12.5px,transparent 13.5px) no-repeat 0 0/31px 31px,var(--line);transition:background-position .2s ease,background-color .2s ease}
label.ck input:checked{background-color:#34c759;background-position:20px 0}
label.ck{gap:12px}

/* Tab-Leiste unten auf dem Handy, wie bei iOS-Apps */
nav a .ic{display:none}
@media (max-width:700px){
  /* Unschärfe-Filter am Kopf würde die feste Tab-Leiste einfangen */
  header{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg)}
  nav{position:fixed;left:0;right:0;bottom:0;z-index:20;justify-content:space-around;gap:0;overflow:visible;
    padding:6px max(4px,env(safe-area-inset-left,0px)) calc(4px + env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-right,0px));
    background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:.5px solid var(--line)}
  nav a{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0;background:transparent;border-radius:0;color:var(--muted);font-size:.64rem;font-weight:500;position:relative;min-width:0}
  nav a:hover{background:transparent}
  nav a[aria-current="page"]{background:transparent;color:var(--accent)}
  nav a .ic{display:block;width:26px;height:26px}
  nav a .lb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  nav a .lfull{display:none}
  nav .badge{position:absolute;top:0;left:calc(50% + 6px);margin:0}
  .head{padding-block:28px 12px}
  main{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
/* Felder auf grauen Flächen (z. B. „Zahlung buchen“) sichtbar machen */
.editor .panel input,.editor .panel select,.editor .panel .datebtn{background:var(--surface)}
/* Nichts darf breiter als der Bildschirm werden */
section.view>*,.panel,.grid2>*{min-width:0}
/* Hochrechnung (Sparen) auf dem Handy als Karten statt breiter Tabelle */
@media (max-width:600px){
  #v-sparen .tw{overflow:visible}
  #v-sparen .tw table,#v-sparen .tw tbody{display:block}
  #v-sparen .tw thead{display:none}
  #v-sparen .tw tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 12px;padding:12px 0;border-bottom:.5px solid var(--line)}
  #v-sparen .tw tr:last-child{border-bottom:0}
  #v-sparen .tw td{display:block;padding:0;border:0;text-align:left;white-space:normal;font-size:.9rem}
  #v-sparen .tw td:first-child{grid-column:1/-1;font-weight:600;margin-bottom:2px}
  #v-sparen .tw td:first-child::before{content:"Nach "}
  #v-sparen .tw td:nth-child(n+2)::before{display:block;font-size:.72rem;font-weight:500;color:var(--muted)}
  #v-sparen .tw td:nth-child(2)::before{content:"Eingezahlt"}
  #v-sparen .tw td:nth-child(3)::before{content:"Depotwert"}
  #v-sparen .tw td:nth-child(4)::before{content:"Erträge"}
}