:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#183641;background:#f2f5f5;font-size:16px;line-height:1.5;font-synthesis:none;--teal:#087b71;--navy:#112d39;--muted:#536971;--border:#d8e2e3}
*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{min-height:48px;border:1px solid var(--border);border-radius:12px;background:white;color:var(--navy);padding:11px 17px;cursor:pointer;font-weight:650}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #e9a126;outline-offset:3px}a{color:var(--teal)}h1,h2,h3,p{overflow-wrap:anywhere}h1{font-size:2rem;line-height:1.15;letter-spacing:-.04em;margin:12px 0}h2{font-size:1.16rem;line-height:1.35;margin:0 0 14px}h3{font-size:1rem;margin:24px 0 10px}p{margin:10px 0}small,.muted{color:var(--muted)}small{font-size:.82rem}main{max-width:900px;margin:auto;padding:24px 18px calc(110px + env(safe-area-inset-bottom))}.welcome{position:relative;margin-bottom:26px}.welcome p{color:var(--muted);max-width:540px}.eyebrow{text-transform:uppercase;letter-spacing:.09em;font-size:.72rem;font-weight:750;color:var(--muted)}.refresh{margin-top:12px}.card{display:block;background:white;border:1px solid var(--border);border-radius:18px;padding:22px;margin:14px 0;box-shadow:0 3px 12px #12303805;overflow-wrap:anywhere}.login{max-width:440px;margin:24px auto}.login h2{margin-bottom:24px}label{display:block;margin:18px 0 7px;font-size:.9rem;font-weight:650}input,textarea{width:100%;min-width:0;padding:12px;border:1px solid #acbfc3;border-radius:10px;background:#fff;color:var(--navy);min-height:48px}textarea{resize:vertical}.login button{width:100%;margin-top:24px}.primary{background:var(--teal);border-color:var(--teal);color:white}.danger{color:#9e3038;border-color:#d9b9bc}.quiet{background:transparent}.sectionline{display:flex;gap:12px;align-items:center;justify-content:space-between}.sectionline h2{margin:0}.count{background:#dcece8;border-radius:30px;padding:3px 12px;font-weight:750}.approval{width:100%;text-align:left;font-weight:400;display:flex;flex-direction:column;gap:11px}.approval strong{font-size:1.18rem;line-height:1.4}.badge{display:inline-block;align-self:flex-start;color:#256b61;background:#e5f2ed;border-radius:7px;padding:4px 9px;font-weight:650;font-size:.75rem}.open{color:var(--teal);font-weight:750;margin-top:8px}.snapshot{font-family:inherit;white-space:pre-wrap;overflow-wrap:anywhere;background:#f2f6f6;border-left:3px solid var(--teal);padding:16px;border-radius:0 10px 10px 0;font-size:.91rem}.actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;margin-top:20px}.actions button{flex:1}.confirmation{margin-top:20px;padding:16px;background:#f0f7f4;border:1px solid #b6d9c8;border-radius:12px}.confirmation h3{margin-top:0}.confirmation p{font-size:.9rem}.stages{padding-left:22px}.stages li{margin:12px 0}.stages span{display:block;font-size:.86rem;color:var(--muted)}details{border-top:1px solid var(--border);padding-top:14px;margin-top:20px}summary{min-height:44px;cursor:pointer;font-weight:650;color:var(--teal)}.preserve{white-space:pre-wrap}.empty{padding:32px 22px;color:var(--muted)}.paging{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:22px 0}.paging button{padding:10px;font-size:.85rem}.datebar{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.datebar input{flex:1;width:140px}.datebar button{padding:10px 14px}.appointment{display:flex;gap:16px}.appointment>div{min-width:0}.time{font-weight:800;color:var(--teal);font-size:.9rem;min-width:64px}.appointment h2{margin:0}.appointment p{font-size:.9rem}.bottomnav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);display:flex;justify-content:center;padding:7px 10px calc(7px + env(safe-area-inset-bottom));box-shadow:0 -4px 24px #112d3908;z-index:10}.bottomnav button{display:flex;flex:1;max-width:230px;flex-direction:column;align-items:center;border:0;font-size:.78rem;color:var(--muted);gap:2px;border-radius:12px;padding:5px 10px;min-height:58px}.bottomnav button span{font-size:1.3rem;line-height:1.4}.bottomnav .active{background:#e9f4f0;color:#06695f}.message{padding:18px;border-radius:12px;margin:18px 0;overflow-wrap:anywhere}.error{background:#fff1f0;border:1px solid #efbdb7;color:#8e3030}.success{background:#e3f4eb;border:1px solid #a8d9bc;color:#1b653d}.notice{background:#f2f5f5;padding:14px;border-radius:10px}footer{font-size:.75rem;text-align:center;color:var(--muted);margin:32px 0 0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.boot{padding:30px}#blazor-error-ui{display:none;position:fixed;top:0;background:#fff0bb;color:#633d00;padding:15px;width:100%;z-index:100}
@media(min-width:700px){main{padding:40px 32px 120px}h1{font-size:2.7rem}.refresh{position:absolute;right:0;top:0}.welcome p{max-width:650px}.actions button{flex:initial;min-width:160px}.card{padding:26px}.login{margin-top:35px}.datebar{max-width:540px}.appointment{gap:30px}.time{min-width:90px}}
@media(prefers-reduced-motion:no-preference){button{transition:background-color .15s,box-shadow .15s}.approval:hover{box-shadow:0 5px 22px #112d3912}.primary:hover{background:#07685f}}

@media(max-width:699px){.confirmation .actions{flex-direction:column-reverse}.confirmation .actions button{width:100%;overflow-wrap:normal}}

.live-state{font-size:.75rem;color:var(--muted);margin-bottom:18px}.connected{color:#087b71}.disconnected{color:#8a6500}.notifications .message{border-left:4px solid var(--teal)}

/* Die dekorative Welle des Mieterportals sitzt unterhalb der Bedienelemente. */
.topbar {
    --header-brand: #0f766e;
    position: sticky;
    top: 0;
    z-index: 9;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "brand logo actions";
    align-items: center;
    gap: 12px;
    padding: calc(12px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 28px max(16px, env(safe-area-inset-left));
    background: linear-gradient(to bottom, var(--header-brand) calc(100% - 16px), transparent calc(100% - 16px));
    color: #fff;
}
.topbar::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 16px;
    background: var(--header-brand);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V9C1190 21 1010 12 760 7S270 1 0 10Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    pointer-events: none;
}
.portal-brand, .portal-profile, .portal-controls {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}
.portal-brand { grid-area: brand; gap: 10px; }
.brand-mark {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .18);
    font-size: .85rem;
    font-weight: 800;
}
.portal-identity { min-width: 0; line-height: 1.25; }
.portal-title, .profile-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-title { font-size: .92rem; }
.portal-logo {
    grid-area: logo;
    display: flex;
    justify-content: center;
    min-width: 0;
}
.tenant-logo {
    max-height: 40px;
    max-width: min(180px, 32vw);
    object-fit: contain;
    background: #fff;
    border-radius: 4px;
    padding: 2px 6px;
}
.portal-profile { color: rgba(255, 255, 255, .9); font-size: .82rem; }
.profile-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    background: #eef7f6;
    color: #115e59;
    font-size: .68rem;
    font-weight: 700;
}
.portal-controls { grid-area: actions; justify-content: flex-end; gap: 10px; }
.portal-controls select, .portal-controls button {
    min-height: 38px;
    padding: 6px 10px;
    border: 1px solid #d7dee8;
    border-radius: 6px;
    background: #fff;
    color: #115e59;
    font: inherit;
    font-size: .9rem;
}
.portal-controls button { font-weight: 800; }

@media (max-width: 1100px) {
    .topbar {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "brand actions";
        gap: 8px 12px;
    }
    .topbar:has(.portal-logo) { grid-template-areas: "logo logo" "brand actions"; }
    .tenant-logo { max-height: 36px; max-width: min(220px, 70vw); }
}
@media (max-width: 640px) {
    .topbar {
        gap: 6px;
        padding: calc(8px + env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 26px max(8px, env(safe-area-inset-left));
    }
    .topbar:has(.portal-profile) .brand-mark { display: none; }
    .portal-profile { gap: 5px; }
    .tenant-logo { max-height: 30px; max-width: min(170px, 70vw); }
    .portal-controls { gap: 6px; }
    .portal-controls select, .portal-controls button {
        min-height: 34px;
        padding: 5px 8px;
        font-size: .82rem;
    }
}
.sick-entry { margin-bottom:16px; }
.sick-form { max-width:540px; }
.sick-form input[type=number] { width:8rem; }
.sick-files { border:0; margin:18px 0 6px; padding:0; min-width:0; }
.sick-files legend { font-weight:650; font-size:.9rem; }
.sick-file-actions { display:flex; flex-wrap:wrap; gap:8px; }
.sick-file-action { min-height:44px; margin:7px 0 0; padding:10px 12px; border:1px solid var(--border); border-radius:10px; cursor:pointer; }
.sick-file-action:focus-within { outline:3px solid #e9a126; outline-offset:3px; }
.sick-files:disabled .sick-file-action { opacity:.5; cursor:default; }