/* Praxis-App: Ergänzungen zu basis.css (Entwurf) und design.css (Beige).
   Reihenfolge: 1. allgemeine Regeln, 2. Desktop, 3. Handy (immer zuletzt, damit nichts sie überschreibt). */

/* ---------- 1. allgemein ---------- */
/* Weicher Seitenwechsel ohne Flackern; Menü und Kopf bleiben stehen (Chrome, Safari ab 18) */
@view-transition{navigation:auto}
.side{view-transition-name:menue}
::view-transition-old(root),::view-transition-new(root){animation-duration:.12s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
.side .links{display:flex;flex-direction:column;gap:2px}
.side .who{text-align:center}
.side .who .logo{display:block}
.side .who img{height:72px;width:auto;display:block;margin:0 auto 10px;filter:var(--logo-filter)}
.side .who span{display:block;font-size:12px;color:var(--muted)}
a.nav{text-decoration:none;border-radius:0 999px 999px 0;margin-right:14px}
a.nav:hover{background:rgba(255,253,251,.55)}
a.nav.on{color:var(--strong);border-left-color:var(--strong);background:var(--paper)}
.side form{margin:auto 22px 18px}
.side form button{background:none;border:0;padding:8px 0;color:var(--muted);font:inherit;font-size:13px;cursor:pointer}
.side form button:hover{color:var(--strong)}

.formzeile{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0;border-top:1px solid var(--line)}
.formzeile .field{border-right:1px solid var(--line)}
.formzeile .field:last-child{border-right:0}
.aktion{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.aktion form{display:inline-flex;gap:4px;align-items:center}
td.aktionen{white-space:nowrap;width:1%}
td.aktionen .aktion{flex-wrap:nowrap}
td.aktionen .btn.sm{padding:5px 10px}
td.aktionen input[type=date]{width:118px;padding:4px 6px;font-size:12px}
.tbl td,.tbl th{padding-left:12px;padding-right:12px}
.leer{padding:18px;color:var(--muted);font-size:14px}

input[type=date],input[type=password],input[type=number]{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--taupe);padding:8px 10px;border-radius:10px}
input[type=password],input[type=number]{width:100%}

.anmelden{max-width:380px;margin:12vh auto;background:var(--paper);padding:32px;border-radius:var(--radius);box-shadow:0 18px 40px -28px rgba(74,68,64,.35)}
.anmelden img{height:64px;filter:var(--logo-filter);display:block;margin:0 auto 24px}
.anmelden .field{padding:10px 0;border:0}
.anmelden input{width:100%}
.fehler{background:var(--crit-bg);color:var(--crit);padding:10px 12px;font-size:14px;margin-bottom:12px;border-radius:10px}

/* Formularfelder einheitlich */
input[type=email],input[type=tel],input[type=month],textarea{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--taupe);padding:8px 10px;border-radius:10px}
select,input[type=text]{border-radius:10px}
.field input,.field select,.field textarea{width:100%}
textarea{width:100%;resize:vertical;line-height:1.5}
td.aktionen input[type=text],td.aktionen select{padding:5px 8px;font-size:13px;width:auto}

/* Meldungen */
.okmeldung{background:var(--ok-bg);color:var(--ok);padding:10px 14px;border-radius:10px;margin-bottom:16px;font-size:14px}
.warnung{background:var(--warn-bg);color:var(--warn);padding:8px 12px;border-radius:10px;font-size:13px;margin-top:6px}
.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Checklisten: ganze Zeile antippbar */
.check-zeile{margin:0}
.check-zeile button.check{width:100%;background:none;border:0;border-bottom:1px solid var(--line);font:inherit;color:var(--ink);text-align:left;align-items:center}
.check-zeile:last-of-type button.check{border-bottom:0}
.check-zeile button.check:hover{background:var(--sand)}
.check .kasten{flex:0 0 22px;height:22px;border:1.5px solid var(--taupe-d);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;color:var(--paper)}
.check.done .kasten{background:var(--ok);border-color:var(--ok)}
.check small{display:block;font-size:11.5px;color:var(--muted);text-decoration:none}
.check.done span{text-decoration:none}
.check.done span:not(.kasten){color:var(--muted)}
details.pflege{border-top:1px solid var(--line);padding:10px 18px}
details.pflege summary{cursor:pointer;font-size:13px;color:var(--muted)}
details.pflege .inline-form{padding:6px 0;justify-content:space-between}
details.pflege .inline-form input[type=text]{flex:1}
details.mini{position:relative}
details.mini summary{list-style:none}
details.mini summary::-webkit-details-marker{display:none}
details.mini[open] form{margin-top:6px}

/* Stempeln */
.stempel-form{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:16px 18px;flex-wrap:wrap}
.stempel-form .field input{width:120px}

/* Reinigung: Material zum Ankreuzen */
.mangel{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px 14px;padding:12px 18px;font-size:14px}
.mangel label{display:flex;gap:8px;align-items:center}

/* Team & Rechte */
.rechte th.c,.rechte td.c{text-align:center}
.rechte input[type=checkbox]{width:18px;height:18px;accent-color:var(--strong)}
.vertrag{border-bottom:1px solid var(--line)}
.vertrag:last-child{border-bottom:0}
.vertrag-name{padding:14px 18px 0;font-weight:600;color:var(--strong)}
.field.tage>div{display:flex;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--ink)}
.tag{display:flex;gap:4px;align-items:center}

/* Chat */
.msg{position:relative;border-radius:14px;white-space:pre-wrap;word-break:break-word}
.msg-weg{position:absolute;top:4px;right:6px;display:none}
.msg:hover .msg-weg{display:block}
.msg-weg button{background:none;border:0;color:inherit;opacity:.6;cursor:pointer;font-size:12px}

/* ---------- 2. Desktop ---------- */
@media (min-width:761px){
  .app{grid-template-columns:210px minmax(0,1fr)}
}

/* ---------- 3. Handy ----------
   Kopfzeile: Name links, Abmelden rechts, darunter die Bereiche als waagrechte Leiste.
   Tabellen werden zu Karten, die Spaltennamen kommen aus data-label. */
@media (max-width:760px){
  .wrap{padding:0 0 32px;max-width:none}
  .app{display:block;min-height:0;border-radius:0;box-shadow:none;background:var(--bg)}
  .side{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:1fr auto;align-items:center;
        padding:10px 14px 0;gap:0;border:0;border-bottom:1px solid var(--line);overflow:visible}
  .side .who{display:block;padding:0;margin:0;border:0;min-width:0;text-align:left}
  .side .who img{height:40px;margin:0}
  .side .who span{display:none}
  .side form{margin:0;grid-column:2;grid-row:1}
  .side form button{padding:6px 0 6px 12px;white-space:nowrap}
  .side .links{grid-column:1 / -1;flex-direction:row;gap:4px;overflow-x:auto;scrollbar-width:none;margin:8px -14px 0;padding:0 14px}
  .side .links::-webkit-scrollbar{display:none}
  a.nav{margin:0;border-radius:0;border:0;border-bottom:2px solid transparent;padding:10px 10px;white-space:nowrap;background:none;flex-shrink:0}
  a.nav:hover{background:none}
  a.nav.on{background:none;border-bottom-color:var(--strong)}

  .main{padding:20px 14px 0}
  .head{margin-bottom:18px;padding-bottom:18px}
  .head h2{font-size:26px}
  .grid,.g2{grid-template-columns:1fr;gap:14px}
  .panel>h3{font-size:16px;padding:12px 14px}
  .row{padding:12px 14px;gap:10px}

  .tbl{overflow-x:visible}
  .tbl table,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl thead{display:none}
  .tbl tr{padding:12px 14px;border-bottom:1px solid var(--line)}
  .tbl tr:last-child{border-bottom:0}
  .tbl td{padding:2px 0;border:0}
  .tbl td[data-label]::before{content:attr(data-label);display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe-d);margin-top:8px}
  .tbl td:first-child{font-weight:600;color:var(--strong)}
  td.aktionen{width:100%;white-space:normal}
  td.aktionen .aktion{flex-wrap:wrap;margin-top:10px}

  .formzeile{grid-template-columns:1fr}
  .formzeile .field{border-right:0;border-bottom:1px solid var(--line)}
  .formzeile .field:last-child{border-bottom:0}
  input[type=date],input[type=text],input[type=number],input[type=password]{font-size:16px} /* verhindert Zoom auf dem iPhone */
  .note{padding:0 2px}

  .anmelden{margin:6vh 14px;padding:24px 20px}
  .head{align-items:flex-start}
  .head .btn{padding:7px 14px}
  .stat .v{font-size:26px}
  .g4{grid-template-columns:1fr 1fr}
  .rechte td.c{display:flex;justify-content:space-between;align-items:center;text-align:left}
  .rechte td.c::before{margin-top:0}
  .msg{max-width:88%}
  .msg-weg{display:block}
  td.aktionen input[type=text],td.aktionen select{font-size:16px}
}