/* Modul mieter: Mieter-App (Handy). Maße nach reference/renders/p-*.html (390 × 844). Präfix .mi- */

/* ---------------------------------------------------------------- Grundgerüst */
.m.mi-app{background:#fff}
.m.mi-soft{background:#F6F5F2}
.mi-app .mb{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.mi-pg{padding:0 22px}
.mi-end{height:28px}
.mi-sm{font-size:12.5px}
.mi-app .muted.mi-sm{color:var(--grey)}
.mi-app a,.mi-app button{-webkit-tap-highlight-color:transparent}
.mi-app .btn{justify-content:center}
/* größere Trefferflächen, ohne die Optik zu verändern */
.mi-app .btn.sm,.mi-chips button,.mi-seg a,.mi-bk,.mi-ib,.mi-sw,.mi-quick .chip,.mi-textlink,.mi-stp,.mi-sec-h a.kicker{position:relative}
.mi-app .btn.sm:after,.mi-chips button:after,.mi-seg a:after,.mi-ib:after,.mi-sw:after,.mi-quick .chip:after,.mi-textlink:after,.mi-stp:after,.mi-sec-h a.kicker:before{content:"";position:absolute;inset:-8px -3px}
.mi-chips button:after,.mi-quick .chip:after{inset:-5px -3px}
.mi-seg a:after{inset:-6px 0}
.mi-sec-h a.kicker:before{content:"";position:absolute;inset:-14px -10px}

/* Zurück-Navigation wie .navh im Render */
.mi-navh{display:flex;align-items:center;gap:10px;padding:6px 0 0;min-height:40px}
.mi-bk{display:inline-flex;align-items:center;gap:10px;color:var(--ink);min-width:0}
.mi-bk .bk{width:34px;height:34px;display:grid;place-items:center;margin-left:-8px;color:var(--blue);flex:none}
.mi-bk:after{content:"";position:absolute;inset:-5px -6px -5px -10px}
.mi-bk-l{font-size:13.5px;color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi-bk.light .bk{color:#fff}
.mi-navr{margin-left:auto;flex:none}
.mi-h1{font-weight:300;font-size:30px;line-height:1.1;margin-top:6px;letter-spacing:-.005em;overflow-wrap:anywhere}
.mi-h1-top{margin-top:14px}
.mi-h1-st{font-size:28px;line-height:1.12}
.mi-h1-s{font-size:24px;line-height:1.15;margin-top:14px}
.mi-brand{display:flex;align-items:center;gap:10px;padding-top:8px;font-size:13px}
.mi-brand img{width:22px;height:22px;flex:none}
.mi-brand .muted{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi-ib{width:38px;height:38px;display:grid;place-items:center;flex:none;color:var(--grey);border-radius:50%}
.mi-brand .mi-ib{margin-left:auto;width:22px;height:22px;color:var(--blue)}
.mi-brand .mi-ib:after{inset:-11px}

/* Abschnittsköpfe */
.mi-sec-h{display:flex;align-items:baseline;gap:10px}
.mi-sec-h>span:first-child{font-size:16px}
.mi-sec-h .kicker{margin-left:auto}
.mi-sec-h2{margin-top:24px;margin-bottom:6px}
.mi-sec-h2 .muted{margin-left:auto}
.mi-textlink{color:var(--bord);font-size:12px}

/* Schlüssel-Wert-Liste (wie .kv im Render) */
.mi-kv{display:grid;grid-template-columns:minmax(min-content,1fr) minmax(0,auto);font-size:14px;border-top:1px solid var(--ink);margin-top:18px}
.mi-kv>span{padding:11px 0;border-bottom:1px solid var(--line);min-width:0}
.mi-kv>span:nth-child(even){text-align:right;overflow-wrap:anywhere;padding-left:14px}
.mi-kv-s{font-size:13.5px;margin-top:0}
.mi-kv b{font-weight:600}

/* Dokumente */
.mi-docs{border-top:1px solid var(--ink);margin-top:6px}
.mi-docs-p{margin-top:14px}
.mi-doc{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);width:100%;text-align:left;min-height:62px}
.mi-doc .grow{display:flex;flex-direction:column;min-width:0}
.mi-pdf{width:30px;height:38px;border:1px solid var(--line2);font-size:8.5px;display:grid;place-items:center;color:var(--red);flex:none}
.mi-doc-t{font-size:14px;overflow-wrap:anywhere}
.mi-doc-s{font-size:12px;color:var(--grey)}
.mi-wide{width:100%;padding:11px;margin-top:16px;min-height:44px}
.mi-btns .mi-wide{margin-top:0}
.mi-btns{display:flex;flex-direction:column;gap:8px;margin-top:18px}

/* Listenzeilen mit Symbol */
.mi-rows{border-top:1px solid var(--ink)}
.mi-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);width:100%;text-align:left;min-height:58px}
.mi-row .grow{display:flex;flex-direction:column;min-width:0}
.mi-row b{font-size:14.5px;font-weight:500}
.mi-row small{font-size:12px;color:var(--grey)}
.mi-row-i{width:32px;height:32px;border-radius:9px;background:var(--blue-10);color:var(--blue);display:grid;place-items:center;flex:none}
.mi-link{font-size:13px;color:var(--blue);font-weight:500;flex:none}
.mi-row .tag{flex:none}
.mi-row-c{padding:12px 14px;margin-top:10px;border:0}

/* Hinweisboxen */
.mi-info{padding:14px 16px;margin-top:10px;font-size:13px;line-height:1.5}
.mi-info .ai{display:flex;margin-bottom:4px}
.mi-hint{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--ink2);background:var(--soft2);border:1px solid var(--line);padding:10px 12px;border-radius:12px}
.mi-hint .ic{color:var(--bord);margin-top:1px}
.mi-p{font-size:14px;line-height:1.5;color:var(--ink2);margin-bottom:12px}
.mi-err{color:var(--red);font-size:13px;margin-top:2px}
.mi-textbtn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;margin-top:8px;font-size:13px;color:var(--blue);font-weight:500}
.mi-empty{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:34px 16px;color:var(--grey);font-size:13px}
.mi-empty .ic{color:var(--green)}
.mi-empty b{color:var(--ink);font-size:15px;font-weight:500}

/* ---------------------------------------------------------------- 1 Start (p-start) */
.mi-hero{height:300px;position:relative;display:block}
.mi-ov{position:absolute;inset:0;background:linear-gradient(rgba(17,28,51,.55),rgba(17,28,51,.05) 34%,rgba(17,28,51,.85))}
.mi-hero-top{position:absolute;top:58px;left:20px;right:20px;display:flex;align-items:center;color:#fff;gap:10px}
.mi-hero-top img{width:20px;height:20px}
.mi-hero-top>span{font-size:13px;opacity:.9}
.mi-bell{margin-left:auto;position:relative;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;color:#fff}
.mi-bell:after{content:"";position:absolute;inset:-5px}
.mi-bell-d{position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:50%;background:#E0607A}
.mi-hero-t{position:absolute;left:20px;right:20px;bottom:56px;color:#fff}
.mi-hero-k{font-size:13px;opacity:.85}
.mi-hero-h{font-weight:500;font-size:29px;line-height:1.1;margin-top:4px}
.mi-rent{position:relative;margin:-40px 16px 0;padding:16px 18px;display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap}
.mi-rent .grow{display:flex;flex-direction:column;flex:1 0 auto}
.mi-rent .cap{font-size:10.5px;white-space:nowrap}
.mi-rent-v{font-size:24px;font-weight:500;margin-top:2px;white-space:nowrap}
.mi-ok{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--green);font-weight:500}
.mi-appt{margin:12px 16px 0;padding:13px 14px;display:flex;gap:12px;align-items:center;border:1px solid var(--bord)}
.mi-appt .grow{display:flex;flex-direction:column;min-width:0}
.mi-cal{width:40px;height:44px;border-radius:10px;background:var(--soft);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;flex:none}
.mi-cal b{font-size:16px}
.mi-cal span{font-size:10px;color:var(--grey);margin-top:2px}
.mi-appt-t{font-size:14px;font-weight:600}
.mi-appt-s{font-size:12.5px;color:var(--grey)}
.mi-qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 16px 0}
.mi-qa>a{padding:14px 14px 13px;display:flex;flex-direction:column;gap:10px;font-size:14.5px;font-weight:600}
.mi-qa small{display:block;font-size:12px;color:var(--grey);font-weight:400;margin-top:2px}
.mi-qa .ico,.mi-new .ico{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--blue-10);color:var(--blue);flex:none}
.mi-qa .pri{background:var(--blue);color:#fff}
.mi-qa .pri small{color:rgba(255,255,255,.75)}
.mi-qa .pri .ico{background:rgba(255,255,255,.14);color:#fff}
.m .mi-qa .pri.click:hover,.m .mi-qa>a.pri:hover{background:var(--blue)}
.mi-sec{margin:24px 16px 0;padding-bottom:20px}
.mi-sec .mi-sec-h{padding:0 4px 8px}
.mi-notice{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-top:10px}
.mi-notice .grow{display:flex;flex-direction:column;min-width:0}
.mi-notice b{font-size:14px;font-weight:600}
.mi-notice small{font-size:12px;color:var(--grey)}
.mi-notice-i{width:32px;height:32px;border-radius:9px;background:var(--soft);display:grid;place-items:center;flex:none;color:var(--ink2)}
.mi-app .sbar.light{transition:background .2s,color .2s}
.mi-scrolled .sbar.light{color:var(--ink);background:rgba(246,245,242,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

/* ---------------------------------------------------------------- 2 Vertrag (p-vertrag) */
.m .mi-bluecard{background:var(--blue);color:#fff;padding:16px 18px;margin-top:16px}
.mi-bc-k{font-size:12.5px;opacity:.85}
.mi-bc-v{font-weight:300;font-size:34px;margin-top:4px;line-height:1.45}
.mi-bc-s{font-size:12.5px;margin-top:6px;opacity:.9}
.mi-bc-ok{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:12.5px}
#dokumente.mi-sec-h2{margin-top:20px;margin-bottom:0}

/* ---------------------------------------------------------------- 3 Abrechnung (p-abrechnung) */
.mi-result{padding:18px}
.mi-result .mi-bc-k{opacity:.8;gap:6px}
.mi-res-v{font-weight:500;font-size:42px;margin-top:6px;line-height:1.45}
.mi-res-s{font-size:13px;margin-top:4px;color:rgba(255,255,255,.8)}
.mi-donut{display:flex;align-items:center;gap:16px;margin-top:18px}
.mi-donut svg{width:120px;height:120px;flex:none}
.mi-lg{min-width:0}
.mi-lg div{display:flex;align-items:center;gap:8px;font-size:13px;padding:7px 0;border-bottom:1px solid var(--line)}
.mi-lg b{margin-left:auto;font-weight:400;white-space:nowrap}
.mi-two{display:flex;margin-top:16px;border-top:1px solid var(--ink)}
.mi-two>div{flex:1;min-width:0;padding:12px 0}
.mi-two>div+div{padding-left:16px;border-left:1px solid var(--line)}
.mi-two .muted{font-size:12px}
.mi-two-v{font-size:18px;font-weight:300}
.mi-cmp{border-top:1px solid var(--ink)}
.mi-cmp-r{padding:10px 0;border-bottom:1px solid var(--line)}
.mi-cmp-n{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.mi-bars{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.mi-bars i{display:block;height:6px;border-radius:3px;background:var(--blue)}
.mi-bars i.prev,.mi-cmp-lg i.prev{background:var(--line2)}
.mi-cmp-lg{display:flex;gap:16px;font-size:11.5px;color:var(--grey);padding-top:8px}
.mi-cmp-lg span{display:inline-flex;align-items:center;gap:6px}
.mi-cmp-lg i{width:10px;height:6px;border-radius:3px;background:var(--blue);display:inline-block}
.mi-good{color:var(--green)}.mi-bad{color:var(--red)}
.mi-acc{border-top:1px solid var(--ink)}
.mi-acc details{border-bottom:1px solid var(--line)}
.mi-acc summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 0;cursor:pointer;font-size:14px}
.mi-acc summary::-webkit-details-marker{display:none}
.mi-acc summary b{font-weight:400;white-space:nowrap}
.mi-acc summary .ic{transition:transform .18s}
.mi-acc details[open] summary .ic{transform:rotate(180deg)}
.mi-acc details>p{font-size:13.5px;line-height:1.5;color:var(--ink2);padding:0 0 12px}
.mi-acc details>.btn,.mi-acc details>.tag{margin:0 0 14px}
.mi-faq summary{font-weight:500}

/* ---------------------------------------------------------------- 4 Postfach (p-postfach) */
.mi-seg{display:flex;background:var(--soft);border-radius:11px;padding:3px;margin-top:14px}
.mi-seg a{flex:1;text-align:center;padding:7px 4px;font-size:13px;color:var(--ink2);border-radius:9px;font-weight:500;white-space:nowrap;min-width:0}
.mi-seg a.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.mi-list{margin-top:6px}
.mi-it{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--line);position:relative}
.mi-ava40{width:40px;height:40px;font-size:13px}
.mi-it-c{min-width:0;display:flex;flex-direction:column}
.mi-it-t{display:flex;align-items:baseline;gap:8px}
.mi-it-t b{font-weight:500;font-size:14.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi-it-t span{margin-left:auto;font-size:11.5px;color:var(--grey);flex:none}
.mi-it-s{font-size:13.5px;margin-top:2px;padding-right:16px}
.mi-it-p{font-size:12.5px;color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi-it-u{position:absolute;right:0;top:40px;width:8px;height:8px;border-radius:50%;background:var(--blue)}
.mi-body p{font-size:14.5px;line-height:1.55;margin-top:12px;color:var(--ink2);overflow-wrap:anywhere}

/* ---------------------------------------------------------------- 4b Chat (p-chat) */
.mi-chath{border-bottom:1px solid var(--line);flex:none;background:#fff}
.mi-chath .mi-bk .bk{margin-left:-8px}
.mi-chath-t{font-size:14.5px;font-weight:500}
.mi-chath-s{font-size:12px}
.mi-msgs{padding:14px 16px 104px;background:#F6F5F2;min-height:100%}
.mi-bub{max-width:min(280px,82%);padding:10px 14px;font-size:14px;line-height:1.45;background:#fff;border-radius:18px 18px 18px 6px;box-shadow:0 1px 2px rgba(0,0,0,.06);margin-bottom:4px;width:fit-content;overflow-wrap:anywhere}
.mi-bub.me{margin-left:auto;background:var(--blue);color:#fff;border-radius:18px 18px 6px 18px}
.mi-meta{font-size:11px;color:var(--grey);margin-bottom:12px}
.mi-meta.r{text-align:right}
.mi-day{text-align:center;font-size:11px;color:var(--grey);margin:4px 0 12px}
.mi-pics{display:grid;grid-template-columns:1fr 1fr;gap:4px;width:min(250px,78%);margin-bottom:4px;border-radius:18px;overflow:hidden}
.mi-pics.me{margin-left:auto}
.mi-pics.one{grid-template-columns:1fr;width:min(180px,60%)}
.mi-pics .photo{height:150px;display:block}
.mi-apptc{background:#fff;border-radius:18px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 6px 16px rgba(17,28,51,.07);padding:14px;max-width:min(300px,88%);border-left:4px solid var(--blue)}
.mi-apptc-d{font-size:17px;font-weight:300;margin-top:6px}
.mi-apptc-s{font-size:12.5px;margin-top:2px}
.mi-apptc-b{margin-top:12px;gap:8px;flex-wrap:wrap}
.mi-apptc+.mi-meta{margin-top:4px}
.mi-quick{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap}
.mi-quick .chip{font-size:12.5px;background:#fff}
.mi-inp{position:absolute;left:14px;right:14px;bottom:30px;z-index:6}
.mi-inp-row{border:1px solid var(--line2);background:#fff;padding:0 6px 0 4px;display:flex;align-items:center;gap:2px;border-radius:24px;min-height:46px;color:var(--grey)}
.mi-inp-row input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:14px;color:var(--ink);padding:10px 4px}
.mi-inp-row input::placeholder{color:var(--grey)}
.mi-send{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:none;place-items:center;flex:none;position:relative}
.mi-send:after{content:"";position:absolute;inset:-5px}
.mi-hastext .mi-send{display:grid}
.mi-hastext .mi-inp-row .mi-mic{display:none}
.mi-rec .mi-mic{color:var(--red);animation:mi-pulse 1s ease infinite}
.mi-rec input::placeholder{color:var(--red)}
@keyframes mi-pulse{50%{opacity:.35}}
.mi-att{display:flex;gap:6px;margin-bottom:6px}
.mi-att-i{position:relative;width:56px;height:56px;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.mi-att-i .photo{position:absolute;inset:0}
.mi-att-i button{position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center}
.mi-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mi-pick-i{height:120px;border-radius:12px;overflow:hidden;position:relative}
.mi-pick-i .photo{position:absolute;inset:0}

/* ---------------------------------------------------------------- 5 Anliegen und Status (p-status) */
.mi-new{display:flex;align-items:center;gap:12px;padding:14px;margin-top:14px;background:var(--blue)!important;color:#fff}
.mi-new .ico{background:rgba(255,255,255,.14);color:#fff}
.mi-new .grow{display:flex;flex-direction:column}
.mi-new b{font-size:14.5px}
.mi-new small{font-size:12px;color:rgba(255,255,255,.75)}
.mi-tk{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.mi-tk .grow{display:flex;flex-direction:column;min-width:0}
.mi-tk b{font-size:14.5px;font-weight:500}
.mi-tk small{font-size:12px;color:var(--grey)}
.mi-tk-ph{width:56px;height:56px;border-radius:12px;flex:none;display:block}
.mi-tk-ic{display:grid;place-items:center;background:var(--soft);color:var(--ink2)}
.mi-tk-tags{gap:6px;margin-top:6px;flex-wrap:wrap}
.mi-gal{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:4px;margin-top:14px;height:150px}
.mi-gal.one{grid-template-columns:minmax(0,1fr)}
.mi-gal .photo{border-radius:12px;display:block}
.mi-gal .photo[style*="wasser_pd"]{background-size:200%!important}
.mi-steps{margin-top:20px}
.mi-st{display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;position:relative;padding-bottom:20px}
.mi-st:before{content:"";position:absolute;left:12px;top:26px;bottom:0;width:1px;background:var(--line2)}
.mi-st:last-child:before{display:none}
.mi-st .c{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:12.5px}
.mi-st.now .c{background:var(--blue)}
.mi-st.next .c{background:#fff;border:1px solid var(--line2);color:var(--grey)}
.mi-st>div>b{font-weight:500;font-size:14.5px;display:block}
.mi-st.next>div>b{color:var(--grey)}
.mi-st>div>span{font-size:12.5px;color:var(--grey);display:block;line-height:20px;margin-top:1px}
.mi-st-b{margin-top:10px;gap:8px;flex-wrap:wrap}
.mi-sent{display:flex;gap:12px;align-items:flex-start;padding:14px;margin-top:10px;border-left:4px solid var(--green)}
.mi-sent .ic{color:var(--green)}
.mi-sent b{display:block;font-size:14.5px;font-weight:600}
.mi-sent span{display:block;font-size:12.5px;color:var(--ink2);margin-top:2px}
.mi-rate{padding:16px;margin:4px 0 6px}
.mi-rate-t{font-size:17px;font-weight:300;margin-top:4px}
.mi-stars{display:flex;gap:2px;margin:8px 0 4px 0}
.mi-stars>*{width:44px;height:44px;display:grid;place-items:center;color:var(--line2)}
.mi-stars .ic{width:28px;height:28px}
.mi-stars .on{color:#C9A227}
.mi-stars .on svg{fill:#C9A227}
.mi-stars.ro>*{width:30px;height:30px}
.mi-stars.ro .ic{width:22px;height:22px}
.mi-rate .mi-chips{margin-top:4px}
.mi-rate-b{gap:8px;margin-top:14px;flex-wrap:wrap}
.mi-rate-b .btn{min-height:44px;flex:1 1 auto}
.mi-person{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.mi-person .grow{display:flex;flex-direction:column;min-width:0}
.mi-person b{font-size:15px;font-weight:400}
.mi-person small{font-size:12.5px;color:var(--grey)}
.mi-round{width:40px;height:40px;border:1px solid var(--blue);border-radius:50%;display:grid;place-items:center;color:var(--blue);flex:none;position:relative}
.mi-round:after{content:"";position:absolute;inset:-3px}
.mi-face{display:inline-block;border-radius:50%;overflow:hidden;flex:none;background:var(--blue-10)}
.mi-face svg{width:100%;height:100%;display:block}

/* ---------------------------------------------------------------- 6 Schaden melden (p-melden) */
.mi-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mi-chips button{font-size:13px;padding:6px 12px;border:1px solid var(--line2);border-radius:30px;background:#fff;color:var(--ink);line-height:1.45}
.mi-chips button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.mi-chips button small{font-size:11.5px;opacity:.65;margin-left:6px}
.mi-chips button.mi-chip-red.on{background:var(--red);border-color:var(--red)}
.mi-cap2{margin-top:16px}
.mi-melden .mb{position:relative}
.mi-cam{height:min(330px,40vh);position:relative;flex:none;display:block}
.mi-camh{position:absolute;top:58px;left:18px;right:18px;display:flex;align-items:center;color:#fff;z-index:3}
.mi-camh>span:not(.mi-camx-sp){margin:0 auto;font-size:14px}
.mi-camh.dark{color:var(--ink)}
.mi-camx{width:22px;height:22px;display:grid;place-items:center;color:inherit;position:relative}
.mi-camx:after{content:"";position:absolute;inset:-11px}
.mi-camx-sp{width:22px}
.mi-box{position:absolute;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.2);animation:mi-pop .35s ease}
.mi-boxtag{position:absolute;background:#fff;font-size:12px;padding:3px 8px;color:var(--ink);white-space:nowrap;animation:mi-pop .35s ease}
.mi-boxtag-c{left:50%;top:50%;transform:translate(-50%,-50%);border-radius:20px;padding:6px 12px;animation:none}
@keyframes mi-pop{from{opacity:0;transform:scale(.96)}}
.mi-scan{position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,#fff,transparent);box-shadow:0 0 18px #fff;animation:mi-scan 1.1s linear infinite}
@keyframes mi-scan{from{top:8%}to{top:92%}}
.mi-thumbs{position:absolute;right:16px;bottom:14px;display:flex;gap:6px}
.mi-thumbs .photo{width:46px;height:46px;border:2px solid #fff;display:block}
.mi-addph{width:46px;height:46px;border:2px solid #fff;display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.25)}
.mi-cam-empty{background:var(--soft);display:flex;align-items:flex-end;justify-content:center}
.mi-cam-add{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:0 40px 30px;color:var(--blue)}
.mi-cam-add span{font-size:15px;font-weight:500}
.mi-cam-add small{font-size:12px;color:var(--grey);max-width:260px}
.mb.mi-meldmb{padding:14px 22px 112px}
.mi-prog{display:flex;align-items:center;gap:6px;margin-bottom:12px}
.mi-prog span{flex:1;height:4px;border-radius:2px;background:var(--line)}
.mi-prog span.on{background:var(--blue)}
.mi-prog em{font-style:normal;color:var(--grey);font-size:11.5px;margin-left:6px;white-space:nowrap}
.mi-desc{display:flex;align-items:center;gap:8px;margin-top:16px;border-bottom:1px solid var(--ink);padding-bottom:4px}
.mi-desc input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:14px;padding:4px 0;color:var(--ink)}
.mi-desc input::placeholder{color:var(--grey2)}
.mi-desc .mi-ib{width:30px;height:30px;color:var(--blue)}
.mi-ki{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.45;margin-top:16px;padding:10px 12px;background:var(--blue-5);border-radius:12px;color:var(--ink2)}
.mi-ki .ic{color:var(--bord);margin-top:1px}
.mi-ki b{font-weight:600;color:var(--ink)}
.mi-alarm{display:flex;gap:10px;align-items:center;margin-top:12px;padding:12px;border:1px solid var(--red);border-radius:12px;background:var(--soft);color:var(--red)}
.mi-alarm span{display:flex;flex-direction:column}
.mi-alarm b{font-size:13.5px}
.mi-alarm small{font-size:12px;color:var(--ink2)}
.mi-resp{font-size:12px;margin-top:10px;gap:6px;align-items:flex-start}
.mi-resp .ic{margin-top:1px}
.mi-cta{position:absolute;left:20px;right:20px;bottom:32px;z-index:6}
.mi-cta:before{content:"";position:absolute;left:-20px;right:-20px;top:-24px;bottom:-32px;background:linear-gradient(rgba(255,255,255,0),#fff 40%);z-index:-1;pointer-events:none}
.mi-cta .btn{width:100%;padding:15px;font-size:15px}
/* Schritt 1: Kamera */
.m.mi-cam1{background:#0B0B0C}
.mi-vf{flex:1;min-height:0;position:relative;display:block}
.mi-vf:after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,0) 22%,rgba(0,0,0,0) 80%,rgba(0,0,0,.35))}
.mi-corner{position:absolute;width:34px;height:34px;border:3px solid #fff;z-index:2}
.mi-corner.tl{left:12%;top:22%;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.mi-corner.tr{right:12%;top:22%;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.mi-corner.bl{left:12%;bottom:16%;border-right:0;border-top:0;border-radius:0 0 0 8px}
.mi-corner.br{right:12%;bottom:16%;border-left:0;border-top:0;border-radius:0 0 8px 0}
.mi-vf-hint{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);background:rgba(0,0,0,.5);color:#fff;font-size:12.5px;padding:6px 12px;border-radius:20px;white-space:nowrap;z-index:2}
.mi-vf-n{position:absolute;right:16px;top:100px;background:#fff;color:var(--ink);font-size:12px;padding:3px 9px;border-radius:12px;z-index:2}
.mb.mi-cam1mb{flex:none;background:#0B0B0C;color:#fff;padding:16px 0 34px;overflow:hidden!important}
.mi-prog.dark{padding:0 22px}
.mi-prog.dark span{background:rgba(255,255,255,.22)}
.mi-prog.dark span.on{background:#fff}
.mi-prog.dark em{color:rgba(255,255,255,.7)}
.mi-camlbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);padding:0 22px;margin-top:2px}
.mi-motifs{display:flex;gap:10px;padding:10px 22px 4px;overflow-x:auto;scrollbar-width:none}
.mi-motifs::-webkit-scrollbar{display:none}
.mi-motifs button{width:62px;height:62px;border-radius:12px;overflow:hidden;flex:none;position:relative;opacity:.7;border:2px solid transparent}
.mi-motifs button.on{opacity:1;border-color:#fff}
.mi-motifs .photo{position:absolute;inset:0}
.mi-camctl{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;padding:16px 22px 0}
.mi-camside{color:#fff;font-size:13px;font-weight:500;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.mi-camside:last-child{justify-self:end}
.mi-shutter{width:74px;height:74px;border-radius:50%;border:4px solid #fff;display:grid;place-items:center}
.mi-shutter span{width:60px;height:60px;border-radius:50%;background:#fff;transition:transform .1s}
.mi-shutter:active span{transform:scale(.9)}
.mi-flash{position:absolute;inset:0;background:#fff;z-index:30;animation:mi-flash .35s ease forwards;pointer-events:none}
@keyframes mi-flash{from{opacity:.95}to{opacity:0}}

/* ---------------------------------------------------------------- 7 Haus & Service (p-haus) */
.mi-haushero{height:200px;position:relative;flex:none;display:block;background-position:center 40%}
.mi-ov2{position:absolute;inset:0;background:linear-gradient(rgba(43,42,42,.45),rgba(43,42,42,.05) 40%,rgba(43,42,42,.8))}
.mi-hh-back{position:absolute;left:18px;top:56px}
.mi-hh-t{position:absolute;left:22px;right:22px;bottom:16px;color:#fff}
.mi-hh-k{font-size:12.5px;opacity:.85}
.mi-hh-h{font-weight:300;font-size:28px;line-height:1.45}
.mi-contact{display:flex;align-items:center;gap:10px;padding:16px 0;border-bottom:1px solid var(--ink)}
.mi-contact-n{font-size:15px}
.mi-contact .grow{min-width:0}
.mi-li{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14.5px;width:100%;text-align:left;min-height:48px}
.mi-li .ic{color:var(--blue)}
.mi-li .tag{flex:none}
.mi-tel{font-size:13px;flex:none}
.mi-ev{border-top:1px solid var(--ink)}
.mi-evr{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.mi-evr .grow{display:flex;flex-direction:column;min-width:0}
.mi-evr b{font-size:14px;font-weight:500}
.mi-evr small{font-size:12px;color:var(--grey)}
.mi-bins{border-top:1px solid var(--ink)}
.mi-bins>div{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.mi-bins .grow{display:flex;flex-direction:column;min-width:0}
.mi-bins b{font-size:14px;font-weight:500}
.mi-bins small{font-size:12px;color:var(--grey)}
.mi-bin{width:26px;height:30px;border-radius:4px 4px 6px 6px;flex:none;position:relative}
.mi-bin:before{content:"";position:absolute;left:-2px;right:-2px;top:-3px;height:5px;border-radius:2px;background:inherit;filter:brightness(.8)}

/* ---------------------------------------------------------------- 8 Profil */
.mi-me{display:flex;align-items:center;gap:14px;margin-top:16px}
.mi-me .grow{min-width:0}
.mi-me-a{width:56px;height:56px;font-size:18px;background:var(--rose)}
.mi-me-n{font-size:18px;font-weight:500}
.mi-admin{display:flex;align-items:center;gap:12px;padding:16px;margin-top:18px;background:var(--blue)!important;color:#fff}
.mi-admin .grow{display:flex;flex-direction:column;min-width:0}
.mi-admin b{font-size:15px}
.mi-admin small{font-size:12px;color:rgba(255,255,255,.78)}
.mi-sws{border-top:1px solid var(--ink)}
.mi-sw-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);min-height:60px}
.mi-sw-row .grow{display:flex;flex-direction:column;min-width:0}
.mi-sw-row b{font-size:14.5px;font-weight:500}
.mi-sw-row small{font-size:12px;color:var(--grey);overflow-wrap:anywhere}
.mi-sw{width:51px;height:31px;border-radius:16px;background:#D9D6D0;flex:none;transition:background .18s}
.mi-sw span{position:absolute;left:2px;top:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .18s}
.mi-sw.on{background:var(--green)}
.mi-sw.on span{transform:translateX(20px)}
.mi-ver{text-align:center;margin-top:20px}

/* Anmeldung (Demo) */
.mi-loginmb{position:relative}
.mi-login{min-height:100%;position:relative;display:flex;align-items:flex-end}
.mi-ov3{position:absolute;inset:0;background:linear-gradient(rgba(17,28,51,.35),rgba(17,28,51,.92) 62%)}
.mi-login-c{position:relative;padding:0 26px 60px;color:#fff;width:100%}
.mi-login-c img{width:44px;height:44px}
.mi-login-k{font-size:13px;opacity:.85;margin-top:14px}
.mi-login-h{font-weight:300;font-size:32px;line-height:1.1;margin-top:4px}
.mi-login-f{margin-top:24px}
.mi-login-f .btn{border-color:#fff;background:#fff;color:var(--blue);margin-top:4px;font-size:15px;min-height:50px}
.mi-scanning .btn{animation:mi-pulse .6s ease infinite}
.mi-f.light span{color:rgba(255,255,255,.75)}
.mi-f.light input{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff}
.mi-textbtn.light{color:#fff}

/* ---------------------------------------------------------------- Blatt, Formulare, Toast */
.mi-veil{position:absolute;inset:0;z-index:8;background:rgba(17,28,51,0);display:flex;align-items:flex-end;transition:background .22s}
.mi-veil.on{background:rgba(17,28,51,.42)}
.mi-sheet{width:100%;max-height:88%;background:#fff;border-radius:22px 22px 0 0;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1);box-shadow:0 -10px 40px rgba(17,28,51,.18);min-height:0}
.mi-veil.on .mi-sheet{transform:none}
.mi-grab{width:38px;height:5px;border-radius:3px;background:var(--line2);margin:8px auto 0;flex:none}
.mi-sh-h{display:flex;align-items:flex-start;gap:12px;padding:12px 20px 10px;flex:none}
.mi-sh-t{font-size:20px;font-weight:500;line-height:1.2;margin-top:2px}
.mi-x{width:32px;height:32px;border-radius:50%;background:var(--soft);display:grid;place-items:center;color:var(--ink2);flex:none;position:relative}
.mi-x:after{content:"";position:absolute;inset:-6px}
.mi-sh-b{padding:6px 20px 14px;overflow-y:auto;min-height:0;overscroll-behavior:contain}
.mi-sh-f{display:flex;gap:10px;padding:12px 20px 30px;border-top:1px solid var(--line);flex:none}
.mi-sh-f .btn{flex:1;min-height:48px;font-size:15px;padding:12px}
.mi-opts{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.mi-opt{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line);border-radius:14px;cursor:pointer;position:relative;min-height:52px}
.mi-opt input{position:absolute;opacity:0;pointer-events:none}
.mi-opt-c{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line2);flex:none;transition:border .12s}
.mi-opt input:checked+.mi-opt-c{border:6px solid var(--blue)}
.mi-opt input:focus-visible+.mi-opt-c{outline:2px solid var(--bord);outline-offset:2px}
.mi-opt:has(input:checked){border-color:var(--blue);background:var(--blue-5)}
.mi-opt .grow{display:flex;flex-direction:column;min-width:0}
.mi-opt b{font-size:14.5px;font-weight:500}
.mi-opt small{font-size:12px;color:var(--grey)}
.mi-f{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--grey);font-weight:500;margin-bottom:14px;min-width:0}
.mi-f input,.mi-f select,.mi-f textarea{font-size:16px;color:var(--ink);border:1px solid var(--line2);background:#fff;padding:11px 13px;border-radius:12px;width:100%;font-weight:400;min-height:48px;font-family:inherit}
.mi-f textarea{resize:vertical;min-height:80px}
.mi-f input:focus,.mi-f select:focus,.mi-f textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-10)}
.mi-f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}
.mi-photo{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;border:1px dashed var(--line2);border-radius:14px;margin-bottom:14px;color:var(--blue);min-height:60px}
.mi-photo .grow{display:flex;flex-direction:column;min-width:0}
.mi-photo b{font-size:14.5px;font-weight:500;color:var(--ink)}
.mi-photo small{font-size:12px;color:var(--grey);display:flex;align-items:center;gap:4px}
.mi-photo.on{border-style:solid;border-color:var(--green)}
.mi-photo.on>.ic:last-child{color:var(--green)}
.mi-meterimg{display:flex;align-items:center;justify-content:center;width:70px;height:42px;border-radius:8px;background:#1d1f24;color:#fff;font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.06em;flex:none;box-shadow:inset 0 0 0 3px #3a3d45}
.mi-meterimg .r{color:#ff7b7b}
.mi-meterimg .r:before{content:","}
.mi-step{display:flex;align-items:center;gap:14px;padding:6px 0 16px;font-size:14.5px}
.mi-stp{width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;color:var(--blue)}
.mi-stp-n{min-width:16px;text-align:center;font-weight:500}
.mi-toast{position:absolute;left:16px;right:16px;bottom:100px;z-index:12;background:rgba(25,26,31,.94);color:#fff;border-radius:14px;padding:12px 16px;display:flex;align-items:center;gap:10px;font-size:13.5px;box-shadow:0 10px 30px rgba(0,0,0,.25);animation:mi-toast .22s ease}
.mi-toast span{min-width:0;overflow-wrap:anywhere}
@keyframes mi-toast{from{opacity:0;transform:translateY(8px)}}

/* ---------------------------------------------------------------- Echte Handy-Breiten (Vollbild) */
@media (max-width:560px){
  .mi-app .home{display:none}
  .mi-app .tabs{height:auto;min-height:62px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
  .mi-hero-top,.mi-camh{top:calc(16px + env(safe-area-inset-top,0px))}
  .mi-hh-back{top:calc(12px + env(safe-area-inset-top,0px))}
  .mi-vf-n{top:70px}
  .mi-hero{height:280px}
  .mi-inp{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .mi-msgs{padding-bottom:86px}
  .mi-cta{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .mi-sh-f{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .mi-toast{bottom:84px}
  .mi-inp-row input,.mi-desc input{font-size:16px}
  .mb.mi-cam1mb{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:360px){
  .mi-pg{padding:0 16px}
  .mb.mi-meldmb{padding-left:16px;padding-right:16px}
  .mi-h1{font-size:27px}
  .mi-hero-h{font-size:26px}
  .mi-bc-v{font-size:30px}
  .mi-res-v{font-size:36px}
  .mi-donut{gap:12px}
  .mi-donut svg{width:100px;height:100px}
  .mi-qa{margin-left:12px;margin-right:12px;gap:8px}
  .mi-qa>a{padding:12px;font-size:14px}
  .mi-rent,.mi-appt{margin-left:12px;margin-right:12px}
  .mi-sec{margin-left:12px;margin-right:12px}
  .mi-seg a{font-size:12.5px}
}