/* SimpleFewo · Gestaltung nach dem hellen Serviceportal von Support-System, Mandant 2. */
:root { --app-ink:#203640; --app-muted:#5d707c; --app-primary:#0f766e; --app-hover:#115e59; --app-soft:#e7f5f1; --app-border:#dce6eb; --app-bg:#f4f8fa; --app-sidebar:248px; --app-topbar:76px; }
body { background:var(--app-bg); color:var(--app-ink); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:.94rem; line-height:1.55; color-scheme:light; }
#wrapper { display:block; }
#wrapper #content-wrapper { background:var(--app-bg); width:auto; min-height:100vh; margin-left:var(--app-sidebar); padding-top:var(--app-topbar); display:flex; flex-direction:column; }
#content { flex:1; min-width:0; }
.app-main { max-width:1500px; padding:2rem 2.25rem 3rem; }
h1,h2,h3,h4,h5,h6 { color:var(--app-ink); }
h1.h3 { font-size:1.8rem; font-weight:700; letter-spacing:-.035em; margin-bottom:.6rem; }
h2.h5 { font-size:1.05rem; font-weight:650; }
p { color:var(--app-muted); }
a { color:var(--app-primary); text-underline-offset:.2em; }
a:hover { color:var(--app-hover); }
.app-icon { width:20px; height:20px; flex:0 0 20px; vertical-align:middle; }
.app-topbar { height:var(--app-topbar); position:fixed; inset:0 0 auto; z-index:1040; display:flex; align-items:center; gap:1.25rem; background:#fff; border-bottom:1px solid var(--app-border); box-shadow:0 2px 16px rgb(32 54 64 / 3.5%); padding:0 1.5rem 0 1.25rem; }
.app-brand { width:calc(var(--app-sidebar) - 1.25rem); flex-shrink:0; display:flex; gap:.75rem; align-items:center; color:var(--app-ink); font-size:1.15rem; font-weight:750; letter-spacing:-.025em; text-decoration:none!important; }
.app-brand small { display:block; font-size:.68rem; font-weight:500; letter-spacing:.01em; color:var(--app-muted); }
.brand-symbol { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--app-soft); color:var(--app-primary); }
.brand-symbol .app-icon { width:23px; height:23px; }
.menu-toggle { border:0; border-radius:8px; width:40px; height:40px; display:grid; place-items:center; background:transparent; color:var(--app-primary); flex-shrink:0; }
.menu-toggle:hover { background:var(--app-soft); }
.topbar-workspace { display:flex; align-items:center; gap:.55rem; font-size:.85rem; font-weight:600; min-width:0; }
.topbar-workspace > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.workspace-dot { width:7px; height:7px; border-radius:50%; background:var(--app-primary); flex-shrink:0; }
.topbar-account { display:flex; align-items:center; gap:1rem; margin-left:auto; flex-shrink:0; }
.account-name { color:var(--app-muted); font-size:.85rem; }
.btn-logout { color:var(--app-muted); display:flex; align-items:center; gap:.45rem; border:1px solid var(--app-border); font-size:.8rem; padding:.5rem .75rem; background:#fff; }
.btn-logout:hover { color:var(--app-primary); background:var(--app-soft); }
.sidebar { position:fixed; left:0; top:var(--app-topbar); bottom:0; width:var(--app-sidebar)!important; min-height:0; background:#fff; border-right:1px solid var(--app-border); z-index:1039; display:flex; flex-direction:column; transition:transform .2s ease; }
.app-navigation { flex:1; overflow-y:auto; padding:.5rem .75rem 1rem; }
.sidebar-heading { padding:1.25rem .8rem .6rem; font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--app-muted); }
.sidebar ul { margin-bottom:.25rem; }
.sidebar .nav-item .nav-link { display:flex; align-items:center; gap:.8rem; width:auto; padding:.8rem .85rem; margin:.15rem 0; border-radius:.65rem; color:#465e6a; font-size:.88rem; text-decoration:none; min-height:46px; }
.sidebar .nav-link .app-icon { color:#708590; }
.sidebar .nav-item .nav-link:hover { background:#f0f7f6; color:var(--app-hover); }
.sidebar .nav-item .nav-link.active { background:var(--app-soft); color:var(--app-hover); font-weight:650; box-shadow:inset 3px 0 var(--app-primary); }
.sidebar .nav-link.active .app-icon { color:var(--app-primary); }
.sidebar-footer { padding:1.1rem; background:#f7fafb; border-top:1px solid var(--app-border); display:flex; align-items:center; gap:.7rem; }
.user-avatar { background:#deede9; color:var(--app-primary); width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-size:.72rem; font-weight:700; flex-shrink:0; }
.sidebar-footer small { display:block; font-size:.67rem; color:var(--app-muted); }
.sidebar-footer strong { font-size:.8rem; overflow-wrap:anywhere; }
.sidebar-collapsed .sidebar { transform:translateX(-100%); }
.sidebar-collapsed #wrapper #content-wrapper { margin-left:0; }
.app-footer { border-top:1px solid var(--app-border); padding:1.25rem 2.25rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.74rem; color:var(--app-muted); }
.footer-divider { margin:0 .4rem; color:#b5c4cb; }
.card { background:#fff; border:1px solid var(--app-border); border-radius:.9rem; box-shadow:0 4px 20px rgb(32 54 64 / 3.5%); color:var(--app-ink); overflow-wrap:anywhere; }
.card.shadow,.card.shadow-lg { box-shadow:0 4px 20px rgb(32 54 64 / 3.5%)!important; }
.card-body { padding:1.5rem; min-width:0; }
.card-header { background:#fff; border-bottom:1px solid var(--app-border); padding:1rem 1.25rem; font-weight:600; }
.card-header:first-child { border-radius:.9rem .9rem 0 0; }
.btn { border-radius:.55rem; font-weight:600; font-size:.86rem; padding:.65rem 1rem; transition:background-color .15s,border-color .15s; }
.btn-sm { padding:.45rem .75rem; font-size:.8rem; }
.btn-primary { color:#fff; background:var(--app-primary); border-color:var(--app-primary); }
.btn-primary:hover,.btn-primary:focus,.btn-primary:not(:disabled):not(.disabled):active { color:#fff; background:var(--app-hover); border-color:var(--app-hover); }
.btn-primary.disabled,.btn-primary:disabled { background:#5e8480; border-color:#5e8480; }
.btn-outline-primary { color:var(--app-primary); border-color:#85b9b2; }
.btn-outline-primary:hover,.btn-outline-primary:focus,.btn-outline-primary:not(:disabled):not(.disabled):active { background:var(--app-primary); border-color:var(--app-primary); color:#fff; }
.btn-outline-secondary { color:#4d6571; border-color:#bdcdd5; }
.btn-outline-secondary:hover { background:#edf3f6; color:var(--app-ink); border-color:#a5bac5; }
.text-primary,.btn-link { color:var(--app-primary)!important; }
.text-muted,.form-text { color:var(--app-muted)!important; }
.border-left-primary { border-left-color:var(--app-primary)!important; }
.form-control { background:#fff; color:var(--app-ink); border:1px solid #bdcdd5; border-radius:.55rem; min-height:44px; font-size:.91rem; }
.form-control:focus { color:var(--app-ink); border-color:var(--app-primary); box-shadow:0 0 0 .2rem rgb(15 118 110 / 14%); }
label { font-weight:600; font-size:.84rem; color:#465e6a; margin-bottom:.45rem; }
.form-group { margin-bottom:1.3rem; }
.custom-control-input:checked~.custom-control-label::before { background:var(--app-primary); border-color:var(--app-primary); }
.custom-control-input:focus~.custom-control-label::before { box-shadow:0 0 0 .2rem rgb(15 118 110 / 14%); }
input[type=checkbox],input[type=radio] { accent-color:var(--app-primary); }
.table { color:var(--app-ink); }
.table th { background:#f5f9fa; color:#48616e; font-size:.77rem; font-weight:650; border-top:0; border-bottom:1px solid var(--app-border)!important; }
.table td { font-size:.88rem; border-color:#e3ebef; vertical-align:middle; }
.table td,.table th { padding:.9rem .85rem; }
.table tbody tr:hover { background:#f5faf8; }
.table tbody tr:last-child td { border-bottom:0; }
.page-link { color:var(--app-primary); border-color:var(--app-border); }
.page-link:hover { background:var(--app-soft); color:var(--app-hover); }
.page-item.active .page-link { background:var(--app-primary); border-color:var(--app-primary); }
.alert { border-radius:.65rem; font-size:.9rem; }
.alert-info { color:#355e64; background:#eef7f6; border-color:#cce3df; }
.alert-success { background:#e7f5f1; color:#195b50; border-color:#c6e1d8; }
fieldset.border { border-color:var(--app-border)!important; border-radius:.7rem!important; }
dt { color:#465e6a; font-size:.82rem; margin-top:.85rem; }
dd { margin-top:.2rem; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--app-primary); outline-offset:3px; }
.skip-link { position:fixed; top:-60px; left:1rem; z-index:1100; background:#fff; border:2px solid var(--app-primary); padding:.5rem; border-radius:.4rem; }
.skip-link:focus { top:.5rem; }
.app-backdrop { display:none; }
.welcome-eyebrow { text-transform:uppercase; font-size:.67rem; font-weight:700; letter-spacing:.12em; color:var(--app-primary); margin-bottom:.5rem; }
.welcome-intro { max-width:650px; margin-bottom:1.75rem; }
.overview-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:1.25rem; margin-bottom:2rem; }
.overview-card { display:flex; flex-direction:column; padding:1.5rem; min-height:200px; }
.overview-card .app-icon { width:24px; height:24px; }
.overview-icon { color:var(--app-primary); background:var(--app-soft); border-radius:.7rem; width:44px; height:44px; display:grid; place-items:center; margin-bottom:1rem; }
.overview-card h2 { font-size:.86rem; font-weight:600; color:var(--app-muted); }
.overview-number { font-size:2.2rem; font-weight:700; letter-spacing:-.04em; line-height:1.2; margin:.2rem 0 .75rem; }
.overview-card a { margin-top:auto; font-size:.82rem; font-weight:600; }
.overview-card a .app-icon { width:15px; height:15px; margin-left:.35rem; }
.quick-action { display:flex; align-items:center; gap:1rem; padding:1rem 0; color:var(--app-ink); border-bottom:1px solid #edf2f4; text-decoration:none!important; }
.quick-action:last-child { border-bottom:0; }
.quick-action strong { display:block; font-size:.9rem; }
.quick-action small { color:var(--app-muted); }
.quick-action>.app-icon:last-child { margin-left:auto; color:var(--app-primary); }
.quick-action .overview-icon { margin:0; flex-shrink:0; }
.app-guest #wrapper #content-wrapper { margin-left:0; background:radial-gradient(ellipse at 15% 10%,#e0f1ea 0,transparent 55%),radial-gradient(ellipse at 90% 90%,#e9f4f7 0,transparent 60%),#f4f8fa; }
.app-guest .app-main { padding-top:4.5rem; padding-bottom:4.5rem; }
.app-guest .app-footer { background:transparent; }
.topbar-caption { margin-left:auto; font-size:.82rem; color:var(--app-muted); }
.login-brand { display:flex; align-items:center; gap:.75rem; margin-bottom:2rem; }
.login-card { border-radius:1.1rem; box-shadow:0 20px 64px rgb(32 80 73 / 8%)!important; }
.login-card .card-body { padding:2.5rem; }
.login-card h1 { font-weight:700; font-size:1.6rem; letter-spacing:-.035em; }
@media(max-width:1199px) { .account-name { display:none; } .overview-grid { gap:1rem; } }
@media(max-width:991.98px) {
    :root { --app-topbar:68px; }
    .app-topbar { gap:.6rem; padding:0 .9rem; }
    .app-brand { width:auto; font-size:1rem; }
    .app-brand small { display:none; }
    .brand-symbol { width:34px; height:34px; border-radius:9px; }
    .menu-toggle { order:-1; }
    .topbar-workspace { margin-left:auto; max-width:32vw; font-size:.75rem; }
    .topbar-account { margin-left:0; }
    .btn-logout { padding:.55rem; border:0; }
    .btn-logout span { display:none; }
    #wrapper #content-wrapper { margin-left:0; }
    .sidebar { transform:translateX(-100%); max-width:calc(100vw - 3rem); }
    .menu-open .sidebar { transform:translateX(0); }
    .menu-open { overflow:hidden; }
    .menu-open .app-backdrop { display:block; position:fixed; inset:var(--app-topbar) 0 0; width:100%; border:0; z-index:1038; background:rgb(20 40 45 / 30%); }
    .app-main { padding:1.5rem; }
    .app-footer { padding:1rem 1.5rem; }
    .overview-grid { grid-template-columns:1fr 1fr; }
    .overview-card:first-child { grid-column:1/-1; }
}
@media(max-width:575.98px) {
    .app-main { padding:1.25rem .9rem 2rem; }
    .app-topbar { gap:.3rem; padding:0 .6rem; }
    .app-brand { gap:.4rem; font-size:.95rem; }
    .topbar-workspace { max-width:28vw; font-size:.7rem; }
    .workspace-dot { display:none; }
    h1.h3 { font-size:1.55rem; overflow-wrap:anywhere; }
    .card-body { padding:1rem; }
    .overview-grid { grid-template-columns:1fr; }
    .overview-card { min-height:0; padding:1.25rem; }
    .overview-card:first-child { grid-column:auto; }
    .btn,.page-link,summary { min-height:44px; }
    .form-control { font-size:16px; }
    .app-footer { padding:1rem; font-size:.68rem; }
    .app-footer>span:last-child { display:none; }
    .topbar-caption { display:none; }
    .login-card .card-body { padding:1.5rem; }
    .app-guest .app-main { padding-top:2.25rem; }
}
@media(prefers-reduced-motion:reduce) { .sidebar,.btn { transition:none; } }
.search-select { position:relative; }
.search-select-options { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:1020; max-height:260px; overflow-y:auto; background:#fff; border:1px solid var(--app-border); border-radius:.55rem; box-shadow:0 8px 24px rgb(32 54 64 / 10%); }
.search-select-option { padding:.7rem .85rem; cursor:pointer; overflow-wrap:anywhere; }
.search-select-option:hover,.search-select-option.is-active { background:var(--app-soft); color:var(--app-hover); }
.search-select-empty { padding:.7rem .85rem; color:var(--app-muted); }
.calendar-day-event { border:0!important; background:transparent!important; box-shadow:none!important; border-radius:0!important; }
.calendar-property-day { width:100%; min-width:0; padding:2px 0 4px; }
.calendar-property-label { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--app-muted); font-size:10px; line-height:16px; font-weight:500; }
.calendar-thirds { display:flex; height:9px; width:100%; min-width:42px; overflow:hidden; border-radius:2px; }
.calendar-third { display:block; flex:1 1 0; min-width:0; height:100%; }
.calendar-third-frei { background:#e5e9ed; }
.calendar-third-inaktiv { background:transparent; }
.calendar-third-reserviert { background:#4e73df; }
.calendar-third-bestaetigt { background:#1c7c54; }
a.calendar-third:hover { filter:brightness(.85); }
a.calendar-third:focus-visible { outline:2px solid var(--app-ink); outline-offset:-2px; }

.calendar-week-event .calendar-thirds { height:15px; border-radius:3px; }
.calendar-week-event .calendar-property-label { font-size:11px; line-height:18px; }
.calendar-week-event .calendar-third { flex-basis:0; }
.app-table-container { width:100%; min-width:0; }
.app-table-container table { width:100%!important; }
.dt-container .row { row-gap:.75rem; align-items:center; }
.dt-container .dt-search label,.dt-container .dt-length label { display:flex; align-items:center; gap:.5rem; margin:0; }
.dt-container .dt-search input { min-width:180px; margin:0!important; }
.dt-container .dt-info { color:var(--app-muted); font-size:.82rem; padding-top:.5rem; }
.dt-container .dt-buttons { display:flex; flex-wrap:wrap; gap:.35rem; }
.dt-container .dt-buttons .btn { border-radius:.4rem!important; background:#f5f9fa; border:1px solid var(--app-border); color:var(--app-primary); }
.dt-container .dt-buttons .btn:hover { background:var(--app-soft); }
.dt-container table.dataTable>tbody>tr.child ul.dtr-details { display:block; width:100%; }
@media(max-width:767.98px) {
    .dt-container .dt-search label,.dt-container .dt-length label { flex-wrap:wrap; justify-content:flex-start; }
    .dt-container .dt-search input { width:100%; }
    .dt-container .dt-buttons { margin-bottom:.5rem; }
    .dt-container .pagination { flex-wrap:wrap; gap:.15rem; }
    .dt-container .dt-layout-cell { text-align:left!important; }
}
.app-table-container table th,.app-table-container table td { white-space:nowrap; }
.app-table-container table tbody td:first-child { white-space:normal; max-width:18rem; }
.dt-container .dt-length { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }