/* Mieterportal – App-Layout mit Leiste unten (Smartphone) bzw. oben (Desktop) */
.center{min-height:60vh;display:grid;place-items:center;padding:24px}
.auth{max-width:420px;margin:0 auto;padding:28px 16px 40px}
.auth .logo{justify-content:center;margin-bottom:22px}
.auth h1{font-size:28px;text-align:center}
.auth .sub{text-align:center;color:var(--muted);margin-top:-4px;margin-bottom:20px}
.auth .links{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:14px;font-size:14px}
.auth .btn{width:100%}
.bar{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px}
.bar .who{font-size:13px;color:var(--muted);text-align:right;line-height:1.3}
.page{padding:18px 0 110px}
.page h2{font-size:26px}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:6;display:grid;grid-template-columns:repeat(5,1fr);background:var(--brand);padding-bottom:env(safe-area-inset-bottom)}
.tabs button{background:none;border:0;color:color-mix(in srgb,var(--brand-ink) 75%,transparent);font:600 11px var(--sans);padding:9px 2px 8px;display:grid;justify-items:center;gap:3px;cursor:pointer;position:relative}
.tabs button[aria-current="true"]{color:var(--brand-ink)}
.tabs button[aria-current="true"]::after{content:"";position:absolute;bottom:3px;left:28%;right:28%;height:3px;border-radius:3px;background:var(--brand-ink)}
.tabs svg{width:24px;height:24px}
.badge{position:absolute;top:4px;right:calc(50% - 22px);background:var(--accent);color:#fff;border-radius:999px;font-size:10px;min-width:17px;height:17px;display:grid;place-items:center;padding:0 4px}
@media (min-width:900px){
  .tabs{position:sticky;top:57px;bottom:auto;grid-template-columns:repeat(5,minmax(0,170px));justify-content:center;border-radius:0}
  .tabs button{font-size:13px;grid-auto-flow:column;gap:8px;padding:12px}
  .page{padding-bottom:40px}
}
.list{display:grid;gap:12px}
.item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.item h3{font-family:var(--sans);font-size:17px;margin:0 0 4px}
.meta{font-size:13px;color:var(--muted)}
.empty{text-align:center;color:var(--muted);padding:40px 16px;border:1px dashed var(--line);border-radius:var(--r)}
.doc{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.doc .ico{width:40px;height:40px;border-radius:10px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex:none}
.group-title{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:22px 0 8px;font-weight:700}
.status{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.status.erfasst{background:color-mix(in srgb,var(--warn) 15%,transparent);color:var(--warn)}
.status.bearb{background:var(--brand-soft);color:var(--brand)}
.status.fertig{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.bubble{padding:10px 12px;border-radius:12px;margin:8px 0;max-width:92%;white-space:pre-wrap}
.bubble.me{background:var(--brand-soft);margin-left:auto}
.bubble.them{background:var(--sunk)}
.kv{display:grid;grid-template-columns:minmax(120px,40%) 1fr;gap:6px 14px;font-size:15px}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:600;word-break:break-word}
.seg{display:flex;gap:8px;margin-bottom:14px} .seg .btn{flex:1}
.seg .btn[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .thumbs img{width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}