/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
    --gold:#b8860b;--gold-d:#8b6914;--gold-l:#fef9e7;
    --blue:#2c5282;--blue-d:#1a365d;--blue-l:#ebf4ff;
    --green:#276749;--green-bg:#c6f6d5;
    --yellow:#744210;--yellow-bg:#fefcbf;
    --red:#742a2a;--red-bg:#fed7d7;
    --orange:#7b341e;--orange-bg:#feebc8;
    --g100:#f7fafc;--g200:#edf2f7;--g300:#e2e8f0;--g400:#cbd5e0;
    --g500:#718096;--g700:#4a5568;--g900:#1a202c;
    --r:8px;--sh:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
    --inp-h:40px;
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:14px;color:var(--g900);background:#f0f2f5;line-height:1.5;-webkit-text-size-adjust:100%;}
a{color:var(--blue);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ===== NAVBAR ===== */
.navbar{background:linear-gradient(135deg,#1a365d 0%,#2c5282 100%);display:flex;align-items:center;padding:0 20px;height:58px;position:sticky;top:0;z-index:200;box-shadow:0 2px 8px rgba(0,0,0,.2);gap:16px;}
.nav-brand{flex-shrink:0;}
.logo-text{font-family:Georgia,serif;font-size:19px;color:rgba(255,255,255,.7);}
.logo-text strong{color:#f6d860;font-style:italic;font-size:23px;}
.nav-links{display:flex;gap:2px;flex:1;}
.nav-links a{color:rgba(255,255,255,.78);padding:6px 14px;border-radius:6px;font-size:13px;}
.nav-links a:hover,.nav-links a.active{background:rgba(255,255,255,.18);color:#fff;text-decoration:none;}
.nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.nav-username{color:rgba(255,255,255,.7);font-size:12px;white-space:nowrap;}
.nav-toggle{display:none;background:none;border:none;color:#fff;font-size:20px;cursor:pointer;padding:4px 8px;}

/* ===== CONTAINER ===== */
.container{max-width:1600px;margin:0 auto;padding:22px 20px;}

/* ===== WIDGETS ===== */
.widget-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;}
.widget{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:20px 24px;border-left:4px solid var(--gold);}
.widget-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--g500);margin-bottom:10px;}
.widget-val{font-size:26px;font-weight:700;color:var(--g900);line-height:1.3;}
.widget-val small{font-size:12px;font-weight:400;color:var(--g500);display:block;margin-top:2px;}
.progress{background:var(--g200);border-radius:4px;height:8px;margin-top:10px;}
.progress-bar{background:linear-gradient(90deg,var(--gold),#f6c90e);border-radius:4px;height:8px;}

/* ===== CARDS ===== */
.card{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:22px;margin-bottom:18px;}
.card h3{font-size:15px;font-weight:600;color:var(--blue);margin-bottom:16px;}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:5px;padding:0 16px;height:38px;border-radius:var(--r);font-size:13px;font-weight:500;cursor:pointer;border:1px solid transparent;white-space:nowrap;text-decoration:none;line-height:1;box-sizing:border-box;font-family:inherit;vertical-align:middle;margin:0;}
button.btn{appearance:none;-webkit-appearance:none;}
.btn:hover{text-decoration:none;filter:brightness(.94);}
.btn-primary{background:var(--gold);color:#fff;border-color:var(--gold-d);}
.btn-primary:hover{background:var(--gold-d);color:#fff;}
.btn-outline{background:#fff;color:var(--blue);border-color:var(--g300);}
.btn-outline:hover{background:var(--g100);}
.btn-outline-white{background:transparent;color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.4);font-size:12px;height:32px;padding:0 12px;}
.btn-outline-white:hover{background:rgba(255,255,255,.15);color:#fff;}
.btn-sm{height:32px;padding:0 12px;font-size:12px;}
.btn-xs{height:30px;padding:0 10px;font-size:12px;border-radius:5px;border:1px solid var(--g300);color:var(--g700);background:#fff;display:inline-flex;align-items:center;gap:4px;}
.btn-xs:hover{background:var(--g100);}
.btn-block{width:100%;justify-content:center;}

/* ===== BADGES ===== */
.badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600;}
.badge-bestaetigt{background:var(--green-bg);color:var(--green);}
.badge-angefragt{background:var(--yellow-bg);color:var(--yellow);}
.badge-storniert{background:var(--red-bg);color:var(--red);}
.badge-vtg-gray{background:var(--g200);color:var(--g500);}
.badge-vtg-blue{background:#bee3f8;color:#2b6cb0;}
.badge-vtg-green{background:var(--green-bg);color:var(--green);}
.badge-vtg-red{background:var(--red-bg);color:var(--red);}

/* ===== STATUS-INDIKATOR ===== */
.indikator{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:13px;font-weight:700;}
.indikator-gruen{background:#c6f6d5;color:#276749;}
.indikator-gelb{background:#fefcbf;color:#744210;}
.indikator-rot{background:#fed7d7;color:#c53030;}
.indikator-grau{background:#e2e8f0;color:#718096;}
.indikator-legende{display:flex;flex-wrap:wrap;gap:16px;padding:12px 16px;background:#f7fafc;border-radius:var(--r);font-size:12px;color:var(--g700);margin-top:8px;align-items:center;}
.indikator-legende span{display:flex;align-items:center;gap:6px;}

/* ===== PERSONEN/HUND-ICON ===== */
.zell-pers-hund{
    display:grid;
    grid-template-columns:42px 42px;
    column-gap:6px;
    align-items:center;
    line-height:1;
    height:20px;
}
.icon-pers,.icon-hund{
    display:flex;
    align-items:center;
    gap:5px;
    font-size:13px;
    line-height:1;
    height:20px;
    color:var(--g700);
}
.icon-pers svg{
    width:16px;
    height:16px;
    flex-shrink:0;
    color:#3182ce;
    display:block;
}
.hund-emoji{
    width:18px;
    height:18px;
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    font-size:14px;
    line-height:1;
    flex-shrink:0;
}
.icon-hund-leer{
    display:block;
    width:42px;
    height:20px;
}

/* ===== ALERTS ===== */
.alert{padding:12px 16px;border-radius:var(--r);margin-bottom:14px;font-size:13px;}
.alert-error{background:var(--red-bg);color:var(--red);border-left:4px solid #e53e3e;}
.alert-success{background:var(--green-bg);color:var(--green);border-left:4px solid #38a169;}
.alert-info{background:var(--blue-l);color:var(--blue);border-left:4px solid var(--blue);}
.alert-warning{background:var(--orange-bg);color:var(--orange);border-left:4px solid #dd6b20;}

/* ===== PAGE HEADER ===== */
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.page-header h2{font-size:20px;font-weight:700;}

/* ===== FORMS ===== */
.form-buchung fieldset{border:1px solid var(--g300);border-radius:var(--r);padding:18px;margin-bottom:16px;}
.form-buchung legend{padding:0 8px;font-weight:700;color:var(--gold-d);font-size:11px;text-transform:uppercase;letter-spacing:.06em;}
.form-row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;}
.form-row+.form-row{margin-top:12px;}
.form-group{flex:1;min-width:160px;display:flex;flex-direction:column;gap:5px;}
.fg-sm{flex:0 0 155px;min-width:130px;}
.fg-md{flex:0 0 200px;min-width:160px;}
.fg-xs{flex:0 0 105px;min-width:90px;}
.form-group label{font-size:11px;font-weight:700;color:var(--g700);text-transform:uppercase;letter-spacing:.04em;min-height:14px;}
.label-hint{font-size:10px;color:var(--g500);text-transform:none;letter-spacing:0;font-weight:400;display:block;margin-top:1px;}
input[type=text],input[type=email],input[type=tel],input[type=date],
input[type=number],input[type=password],input[type=search],select,textarea{
    width:100%;height:var(--inp-h);padding:0 11px;
    border:1px solid var(--g400);border-radius:6px;
    font-size:14px;color:var(--g900);background:#fff;font-family:inherit;
}
textarea{height:auto;padding:9px 11px;resize:vertical;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,134,11,.12);}
input[readonly],input[disabled],select[disabled]{background:var(--g100);color:var(--g500);}
input[type=file]{height:auto;padding:9px 11px;border-style:dashed;}
.form-actions{display:flex;justify-content:space-between;align-items:center;padding-top:16px;flex-wrap:wrap;gap:10px;}
.meta-info{font-size:12px;color:var(--g500);}
.check-label{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;}
.check-label input{width:auto;height:auto;}

/* HUNDE-Bereich: alles in einer sauberen Zeile */
.hunde-block{display:flex;gap:12px;align-items:center;height:40px;flex-wrap:nowrap;}
.hunde-block label.radio{display:inline-flex;align-items:center;gap:5px;font-size:13px;text-transform:none;letter-spacing:0;font-weight:400;cursor:pointer;white-space:nowrap;margin:0;}
.hunde-block label.radio input{width:auto;height:auto;margin:0;}
.hunde-block .hunde-anzahl-wrap{display:flex;align-items:center;gap:6px;white-space:nowrap;}
.hunde-block .hunde-anzahl-wrap input[type=number]{width:60px;height:34px;}

/* PREIS BOX */
.preis-box{background:var(--gold-l);border:1px solid #f0d070;border-radius:var(--r);padding:16px 18px;margin-top:14px;}
.preis-row{display:flex;justify-content:space-between;padding:5px 0;font-size:13px;border-bottom:1px solid #f0d07055;}
.preis-row:last-child{border-bottom:none;}
.preis-total{font-weight:700;font-size:16px;color:var(--gold-d);padding-top:10px;border-top:2px solid var(--gold)!important;border-bottom:none!important;}

/* TABLES */
.table{width:100%;border-collapse:collapse;}
.table th{background:var(--g100);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--g500);padding:10px 12px;text-align:left;border-bottom:2px solid var(--g200);}
.table td{padding:10px 12px;border-bottom:1px solid var(--g200);vertical-align:middle;font-size:13px;}
.table td small{color:var(--g500);font-size:11px;display:block;margin-top:1px;}
.table-hover tr:hover td{background:var(--gold-l);}
.row-stor td{opacity:.45;}

/* Flash-Highlight (neue Buchung) */
@keyframes flash-pulse {
    0%   { background:#fef3c7; }
    50%  { background:#fde68a; }
    100% { background:transparent; }
}
.row-flash td { animation: flash-pulse 3s ease-out 1; }
.karte-flash { animation: flash-pulse 3s ease-out 1; }

/* Sortier-Pfeile in Tabellen-Headern */
.sort-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.sort-link:hover { color: #2c5282; text-decoration: none; }
.sort-arr { font-size: 9px; opacity: .8; }
.sort-arr-dim { opacity: .3; }
.sort-link:hover .sort-arr-dim { opacity: .6; }
.aktions-cell{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.aktions-cell form{display:inline-flex;}

/* FILTER */
.filter-form{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;}
.filter-form input,.filter-form select{height:38px;font-size:13px;flex:1;min-width:130px;max-width:210px;}
.filter-form .btn{height:38px;}

/* MONATSKALENDER */
.kalender-nav{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.kalender-titel{font-size:18px;font-weight:700;color:var(--gold-d);min-width:180px;text-align:center;}
.kalender-wrap{position:relative;overflow-x:auto;background:#fff;border-radius:var(--r);box-shadow:var(--sh);margin-bottom:12px;}
.kalender{border-collapse:collapse;min-width:900px;width:100%;table-layout:fixed;}
.kalender th,.kalender td{border:1px solid var(--g400);}
.kalender thead th{background:linear-gradient(135deg,#1a365d,#2c5282);color:#fff;font-size:12px;padding:6px 2px;text-align:center;}
.kalender thead th.tag-col{width:32px;}
.kalender .wohnung-col{min-width:155px;width:155px;text-align:left;padding-left:10px;}
.kalender .tn{display:block;font-size:13px;}
.kalender .tw{display:block;font-size:10px;opacity:.7;}
.kalender thead th.heute{background:#c53030!important;}
.kalender thead th.we{background:#4a5568!important;}
.kalender .haus-hdr td{background:var(--gold-l);font-weight:700;color:var(--gold-d);font-size:12px;padding:6px 10px;}
.kalender .wn{padding:0 10px;font-size:12px;background:var(--g100);white-space:nowrap;}
.kalender td.frei{background:#fff;height:34px;}
.kalender td.bel{height:34px;}

/* Overlay für Buchungs-Streifen */
.kalender-overlay{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    pointer-events:none;
    z-index:10;
}
.overlay-eintrag{
    position:absolute;
    display:flex;
    align-items:center;
    white-space:nowrap;
    font-weight:600;
    line-height:1;
    text-decoration:none !important;
    padding:0 6px;
    border-radius:3px;
    overflow:hidden;
    pointer-events:auto;
    gap:5px;
    box-sizing:border-box;
    min-width:0;
}
.overlay-eintrag:hover{filter:brightness(1.1);text-decoration:none !important;box-shadow:0 2px 6px rgba(0,0,0,.18);z-index:20;}
.oe-name{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    flex:1 1 auto;
}
.oe-datum{
    opacity:.75;
    font-weight:500;
    font-size:0.9em;
    flex-shrink:0;
}

.wo-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle;flex-shrink:0;}

/* LEGENDE */
.legende{display:flex;flex-wrap:wrap;gap:0;margin:8px 0 16px;padding:14px 20px;background:#fff;border-radius:var(--r);box-shadow:var(--sh);justify-content:space-between;}
.legende-item{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--g700);flex:1;min-width:150px;padding:4px 0;}
.legende-dot{display:inline-block;width:14px;height:14px;border-radius:3px;flex-shrink:0;}

/* JAHRESKALENDER */
/* BEGRÜSSUNG */
.begruessung{
    margin:6px 0 14px;
}
.begruessung .begruessung-titel{
    font-size:17px !important;
    font-weight:700 !important;
    color:#1a202c !important;
    line-height:1.25;
}
.begruessung .begruessung-sub{
    font-size:12px !important;
    color:#a0aec0 !important;
    margin-top:2px;
    font-weight:400 !important;
}
/* MONATSÜBERSICHT WIDGET */
.monatsuebersicht{
    padding:20px 24px;
    margin-top:16px;
}
.muh-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:16px;
}
.muh-header h3{
    margin:0;
    color:#2c5282;
    font-size:16px;
    font-weight:600;
}
/* Metric-Tabs (Umsatz/Auslastung/Buchungen) */
.muh-tabs{
    display:flex;
    gap:0;
    background:#f1f4f8;
    border-radius:8px;
    padding:4px;
}
.muh-tabs .muh-tab{
    background:transparent;
    border:none;
    padding:8px 18px;
    font-size:13px;
    font-weight:500;
    color:#4a5568;
    border-radius:6px;
    cursor:pointer;
    transition:all .15s ease;
    font-family:inherit;
}
.muh-tabs .muh-tab:hover{
    color:#1a202c;
    background:rgba(255,255,255,.6);
}
.muh-tabs .muh-tab.aktiv{
    background:#fff;
    color:#b8860b;
    font-weight:600;
    box-shadow:0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
}
/* Range-Buttons (3/6/12/24 Monate) */
.muh-range{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    margin-bottom:14px;
}
.muh-range .muh-range-btn{
    background:#fff;
    border:1px solid #e2e8f0;
    padding:7px 14px;
    font-size:13px;
    font-weight:500;
    color:#4a5568;
    border-radius:6px;
    cursor:pointer;
    transition:all .15s ease;
    font-family:inherit;
}
.muh-range .muh-range-btn:hover{
    border-color:#b8860b;
    color:#b8860b;
    background:#fdfaf2;
}
.muh-range .muh-range-btn.aktiv{
    background:#b8860b;
    color:#fff;
    border-color:#b8860b;
    box-shadow:0 1px 3px rgba(184,134,11,.3);
}
.muh-range .muh-range-btn.aktiv:hover{
    background:#9a710a;
    color:#fff;
}
.muh-summary{
    margin-left:auto;
    font-size:13px;
    color:#4a5568;
}
.muh-summary strong{color:#1a202c;font-weight:700;}
.muh-chart-wrap{
    width:100%;
    overflow:hidden;
    margin-top:6px;
}
.muh-chart{
    width:100%;
    height:260px;
    display:block;
}
.muh-chart rect{
    transition:opacity .15s;
    cursor:default;
}
.muh-chart rect:hover{opacity:.85;}
.muh-info{
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid #edf2f7;
    font-size:12px;
    font-style:italic;
    color:#718096;
    text-align:center;
}
@media(max-width:600px){
    .muh-header{flex-direction:column;align-items:stretch;}
    .muh-tabs{justify-content:center;}
    .muh-summary{margin-left:0;text-align:center;width:100%;}
}
.ansicht-tabs{
    display:flex;
    gap:2px;
    margin-bottom:14px;
    border-bottom:2px solid var(--g300);
}
.ansicht-tab{
    padding:10px 18px;
    font-size:13px;
    font-weight:600;
    color:var(--g500);
    background:transparent;
    border:none;
    border-bottom:3px solid transparent;
    margin-bottom:-2px;
    text-decoration:none;
    cursor:pointer;
    transition:all .15s;
}
.ansicht-tab:hover{color:var(--g900);text-decoration:none;background:var(--g100);}
.ansicht-tab.aktiv{color:var(--gold-d);border-bottom-color:var(--gold);background:#fff;}
.mini-kalender-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:14px;
    margin-bottom:16px;
}
.mini-kalender{
    background:#fff;
    border-radius:var(--r);
    box-shadow:var(--sh);
    padding:12px;
    overflow:hidden;
}
.mini-kal-header{
    margin-bottom:8px;
    padding-bottom:6px;
    border-bottom:1px solid var(--g200);
}
.mini-kal-wo{
    font-size:14px;
    font-weight:700;
    color:var(--g900);
    display:block;
}
.mini-kal-haus{
    font-size:11px;
    color:var(--g500);
    display:block;
    margin-top:1px;
}
.mini-kal-tabelle{
    width:100%;
    border-collapse:collapse;
    font-size:11px;
    table-layout:fixed;
}
.mini-kal-tabelle th{
    background:var(--g100);
    color:var(--g500);
    font-size:10px;
    font-weight:600;
    padding:3px 0;
    text-align:center;
    border:1px solid var(--g200);
}
.mini-kal-tabelle td{
    text-align:center;
    padding:0;
    border:1px solid var(--g200);
    height:22px;
    width:14.28%;
}
.mk-tag{color:var(--g700);}
.mk-leer{background:transparent;border:1px solid transparent !important;}
.mk-bel{font-weight:600;}
.mk-bel a{
    display:block;
    width:100%;
    height:100%;
    line-height:22px;
    color:inherit !important;
    text-decoration:none !important;
}
.mk-bel a:hover{filter:brightness(1.1);}
.mk-heute{
    box-shadow:inset 0 0 0 2px #c53030;
    font-weight:700;
}
.mini-kal-buchungen{
    margin-top:10px;
    padding-top:8px;
    border-top:1px solid var(--g200);
    display:flex;
    flex-direction:column;
    gap:3px;
}
.mini-kal-bu-zeile{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12px;
    padding:5px 8px;
    background:var(--g100);
    border-radius:4px;
    color:var(--g900);
    text-decoration:none;
}
.mini-kal-bu-zeile:hover{background:var(--gold-l);text-decoration:none;color:var(--g900);}
.mini-kal-bu-datum{color:var(--g700);font-size:12px;font-weight:500;}

/* Responsive */
@media(max-width:1200px){.mini-kalender-grid{grid-template-columns:repeat(3, 1fr);}}
@media(max-width:900px){.mini-kalender-grid{grid-template-columns:repeat(2, 1fr);}}
@media(max-width:600px){.mini-kalender-grid{grid-template-columns:1fr;}}

/* alte jahres-* Klassen entfernen */
.jahres-wrap{display:none;}

/* DETAIL GRID */
.detail-grid{display:grid;grid-template-columns:1fr 360px;gap:18px;align-items:start;}

/* VERTRAG-CHECKBOX */
.vertrag-quick{display:flex;align-items:center;gap:10px;padding:12px;background:#f7fafc;border-radius:6px;border:1px solid var(--g300);margin-bottom:12px;cursor:pointer;}
.vertrag-quick input{width:20px;height:20px;cursor:pointer;}
.vertrag-quick label{font-size:14px;font-weight:600;color:var(--green);cursor:pointer;}

/* LOGIN */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#1a365d 0%,#2c5282 60%,#b8860b 100%);}
.login-box{background:#fff;padding:40px;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.3);width:100%;max-width:400px;}
.login-logo{text-align:center;margin-bottom:28px;}
.login-box .form-group{margin-bottom:14px;}
.login-box .btn-primary{background:var(--gold);border-color:var(--gold-d);}

/* FOOTER */
.site-footer{text-align:center;padding:16px;color:var(--g500);font-size:11px;margin-top:10px;}

/* MOBILE LISTEN-ANSICHT (nur auf kleinen Bildschirmen) */
.mobile-liste{display:none;margin-bottom:16px;}
.buchungen-mobile-liste{display:none;}
.ankuenfte-mobile{display:none;}
.monat-mobile-hinweis{display:none;}

/* MOBILE MENU (Burger-Dropdown) - default versteckt */
.mobile-menu{display:none;}
.navbar-backdrop{display:none;}
.mobile-buchung{
    display:block;
    background:#fff;
    border-radius:8px;
    padding:14px 16px;
    margin-bottom:10px;
    box-shadow:0 1px 3px rgba(0,0,0,.08);
    text-decoration:none;
    color:#1a202c;
}
.mobile-buchung:hover{text-decoration:none;background:#f7fafc;}
.mb-haupt{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;}
.mb-wohnung{font-size:14px;display:flex;align-items:center;gap:4px;}
.mb-status{flex-shrink:0;}
.mb-gast{font-size:15px;font-weight:600;color:#2c5282;margin-bottom:4px;}
.mb-zeitraum{font-size:13px;color:#4a5568;margin-bottom:6px;}
.mb-zeitraum small{color:#718096;}
.mb-personen{display:flex;align-items:center;gap:10px;font-size:13px;color:#4a5568;}

/* RESPONSIVE */
@media(max-width:1100px){.widget-row{grid-template-columns:repeat(2,1fr);}}
@media(max-width:900px){.detail-grid{grid-template-columns:1fr;}.nav-username{display:none;}}

/* === MOBILE 768px === */
@media(max-width:768px){
    /* Navbar: Desktop-Links/Right ausblenden, Burger zeigen */
    .navbar{padding:0 12px;gap:8px;}
    .nav-links{display:none !important;}
    .nav-right{display:none !important;}
    .nav-toggle{display:block;font-size:24px;padding:6px 10px;}

    /* Mobile-Menü: per Default zu, bei .open einblenden */
    .mobile-menu{
        display:none;
        position:fixed;
        top:58px;left:0;right:0;
        background:#1a365d;
        flex-direction:column;
        padding:8px 0;
        z-index:300;
        box-shadow:0 8px 20px rgba(0,0,0,.4);
        max-height:calc(100vh - 58px);
        overflow-y:auto;
    }
    .mobile-menu.open{display:flex;}
    .mm-link{
        display:block;
        padding:14px 18px;
        color:rgba(255,255,255,.92);
        font-size:16px;
        text-decoration:none;
        border:none;
    }
    .mm-link:hover,.mm-link:active{background:rgba(255,255,255,.08);text-decoration:none;color:#fff;}
    .mm-link.active{background:rgba(255,255,255,.15);color:#fff;font-weight:600;border-left:3px solid #f6d860;padding-left:15px;}
    .mm-link.mm-primary{color:#f6d860;font-weight:600;}
    .mm-divider{height:1px;background:rgba(255,255,255,.15);margin:8px 0;}
    .mm-user{padding:10px 18px 4px;color:rgba(255,255,255,.55);font-size:12px;text-transform:uppercase;letter-spacing:.04em;}

    .navbar-backdrop{
        display:none;
        position:fixed;
        top:58px;left:0;right:0;bottom:0;
        background:rgba(0,0,0,.5);
        z-index:250;
    }
    .navbar-backdrop.open{display:block;}

    /* Container */
    .container{padding:14px 12px;}

    /* Forms */
    .form-row{flex-direction:column;gap:12px;}
    .form-group,.fg-sm,.fg-xs,.fg-md{flex:1 1 100%;min-width:100%;}
    input[type=text],input[type=email],input[type=tel],input[type=date],
    input[type=number],input[type=password],input[type=search],select,textarea{
        font-size:16px;height:46px;
    }
    select{font-size:16px;}
    textarea{font-size:16px;}
    /* Fieldset-Padding auf Mobile reduzieren, damit Inputs nicht so eingerückt sind */
    .form-buchung fieldset{padding:14px 12px;}

    /* Widgets */
    .widget-row{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
    .widget{padding:14px 16px;}
    .widget-val{font-size:22px;}
    .widget-label{font-size:10px;}

    .card{padding:14px;}

    /* Page-Header */
    .page-header{flex-direction:column;align-items:stretch;}
    .page-header h2{font-size:18px;}
    .page-header > div{display:flex;flex-wrap:wrap;gap:8px;}
    .page-header .btn{
        flex:0 1 auto;
        justify-content:center;
        min-height:40px;
        padding:8px 14px;
        font-size:13px;
        white-space:nowrap;
    }

    /* === KALENDER: Tabelle aus, Karten-Liste an === */
    .kalender-wrap{display:none;}
    .mobile-liste{display:block;}
    .kalender-nav{justify-content:center;}
    .kalender-titel{min-width:auto;font-size:16px;}

    /* Legende */
    .legende{padding:10px 14px;gap:8px 16px;}
    .legende-item{min-width:auto;flex:0 0 calc(50% - 8px);font-size:12px;padding:3px 0;}

    /* === BUCHUNGSLISTE: Tabelle versteckt, Karten zeigen === */
    .buchungen-tabelle-wrap{display:none;}
    .buchungen-mobile-liste{display:block;}
    .buchung-karte{
        position:relative;
        display:block;
        background:#fff;
        border-radius:8px;
        padding:14px 16px;
        margin-bottom:10px;
        box-shadow:0 1px 3px rgba(0,0,0,.08);
        text-decoration:none;
        color:#1a202c;
        border-left:4px solid #ccc;
    }
    .buchung-karte:hover{background:#f7fafc;text-decoration:none;}
    .buchung-karte.storniert{opacity:.55;}
    .bk-haupt{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px;}
    .bk-wohnung{font-size:14px;font-weight:600;display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
    .bk-wohnung small{font-weight:400;color:#718096;font-size:12px;}
    .bk-id{font-size:11px;color:#a0aec0;font-weight:400;}
    .bk-gast{font-size:16px;font-weight:700;color:#2c5282;margin-bottom:4px;}
    .bk-zeitraum{font-size:13px;color:#4a5568;margin-bottom:6px;}
    .bk-zeitraum small{color:#718096;}
    .bk-meta{display:flex;align-items:center;gap:10px;font-size:13px;color:#4a5568;flex-wrap:wrap;}
    .bk-preis{font-weight:700;color:#8b6914;}
    .bk-status-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
    .bk-actions{
        position:absolute;
        top:10px;
        right:10px;
        display:flex;
        gap:6px;
    }
    .bk-icon-btn{
        width:36px;height:36px;
        display:inline-flex;align-items:center;justify-content:center;
        background:#fff;border:1px solid #e2e8f0;border-radius:8px;
        font-size:16px;cursor:pointer;color:#4a5568;
        text-decoration:none;font-family:inherit;
        appearance:none;-webkit-appearance:none;
        padding:0;line-height:1;
    }
    .bk-icon-btn:hover{background:#f7fafc;text-decoration:none;}
    .bk-icon-btn.danger{color:#c53030;border-color:#fed7d7;background:#fff;}
    .bk-icon-form{margin:0;display:inline-flex;}

    /* === NÄCHSTE ANKÜNFTE: Tabelle als Karten === */
    .ankuenfte-tabelle-wrap{display:none;}
    .ankuenfte-mobile{display:block;}
    .ankunft-karte{
        background:#fff;border-radius:8px;padding:12px 14px;margin-bottom:8px;
        box-shadow:0 1px 2px rgba(0,0,0,.06);border-left:4px solid #ccc;
        display:block;text-decoration:none;color:#1a202c;
    }
    .ankunft-karte:hover{background:#f7fafc;text-decoration:none;}
    .ak-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px;}
    .ak-datum{font-weight:700;font-size:14px;color:#1a365d;}
    .ak-wohnung{font-size:12px;color:#4a5568;}
    .ak-gast{font-size:15px;font-weight:600;color:#2c5282;margin:2px 0;}
    .ak-meta{display:flex;align-items:center;gap:10px;font-size:12px;color:#718096;flex-wrap:wrap;}

    /* === CHART (Monatsübersicht) === */
    .monatsuebersicht{padding:14px 12px;}
    .muh-header{flex-direction:column;align-items:stretch;}
    .muh-tabs{justify-content:center;width:100%;}
    .muh-tabs .muh-tab{flex:1;padding:10px 8px;font-size:13px;}
    .muh-range{justify-content:flex-start;gap:6px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch;}
    .muh-range .muh-range-btn{flex-shrink:0;padding:8px 12px;font-size:12px;}
    .muh-summary{margin-left:0;text-align:center;width:100%;margin-top:4px;}
    .muh-chart{height:240px;}
    .muh-chart-wrap{overflow:visible;}
    .muh-info{font-size:11px;}

    /* === FILTER === */
    .filter-form{flex-direction:column;align-items:stretch;}
    .filter-form input,.filter-form select{max-width:100%;width:100%;height:46px;font-size:16px;}
    .filter-form .btn{height:46px;width:100%;font-size:15px;}
    .filter-form .filter-buttons{display:flex;gap:8px;}
    .filter-form .filter-buttons .btn{flex:1;}

    /* === FORM-ACTIONS === */
    .form-actions{flex-direction:column-reverse;align-items:stretch;gap:10px;}
    .form-actions .btn{width:100%;height:48px;font-size:15px;justify-content:center;}
    .form-actions .meta-info{text-align:center;font-size:11px;}
    .form-actions-buttons{flex-direction:column-reverse;width:100%;}
    .form-actions-buttons .btn{width:100%;}

    /* === TABS (Jahresansicht) === */
    .ansicht-tabs{flex-wrap:wrap;}
    .ansicht-tab{flex:1;padding:10px 8px;font-size:12px;text-align:center;}
    /* Monatskalender-Tab auf Mobile ausblenden (unbrauchbar) */
    .ansicht-tab[href*="view=monat"]{display:none;}
    /* Wenn view=monat trotzdem aktiv: Hinweis zeigen, Tabelle/Legende verstecken */
    .monat-mobile-hinweis{display:block !important;}
    body.view-monat .kalender-wrap,
    body.view-monat .legende,
    body.view-monat .kalender-nav{display:none !important;}

    /* Indikator-Legende kompakter */
    .indikator-legende{font-size:11px;gap:8px 14px;}

    /* Alerts */
    .alert{font-size:13px;padding:10px 14px;}

    /* Detail-Page Header-Buttons */
    .detail-grid{gap:14px;}
}

/* === MOBILE 480px (engere Phones) === */
@media(max-width:480px){
    .widget-row{grid-template-columns:1fr;}
    .legende-item{flex:0 0 100%;}
    .kalender-nav .btn{padding:0 10px;height:36px;}
    .muh-tabs .muh-tab{font-size:12px;padding:8px 4px;}
    .page-header > div{flex-direction:column;}
    .page-header .btn{width:100%;}
}

/* DRUCK */
@media print {
    @page { size: A4 landscape; margin: 0.8cm; }
    .no-print { display: none !important; }
    html, body {
        background: white !important;
        font-size: 11px;
        color: #000;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    .container {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        overflow: visible !important;
    }
    .navbar { display: none !important; }
    .widget-row, .alert, .mobile-liste { display: none !important; }
    .card { box-shadow: none; border: 1px solid #999; page-break-inside: avoid; }

    /* Print-Header mit Logo & Datum */
    body::before {
        content: "Haus Florian · Buchungsverwaltung";
        display: block;
        font-size: 16px;
        font-weight: 700;
        color: #1a365d;
        border-bottom: 2px solid #b8860b;
        padding-bottom: 6px;
        margin-bottom: 12px;
        letter-spacing: 0.02em;
    }
    .page-header {
        page-break-after: avoid;
        margin-bottom: 10px;
    }
    .page-header h2 { font-size: 15px; margin: 0; color: #1a365d; }
    .page-header > div { display: none !important; }

    /* MONATSKALENDER */
    .kalender-wrap {
        overflow: visible !important;
        box-shadow: none;
        position: relative;
        width: 100%;
    }
    .kalender {
        min-width: unset !important;
        width: 100% !important;
        font-size: 10px;
        border-collapse: collapse;
        border: 1px solid #666;
        table-layout: fixed;
    }
    .kalender thead th {
        font-size: 9px;
        padding: 4px 1px;
        background: #f0f0f0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        border: 1px solid #999;
        color: #000;
    }
    .kalender thead th.heute {
        background: #c53030 !important;
        color: #fff !important;
    }
    .kalender thead th.we {
        background: #d0d0d0 !important;
    }
    .kalender thead th .tn { font-weight: 700; font-size: 10px; }
    .kalender thead th .tw { font-size: 8px; color: #555; }
    .kalender .wohnung-col, .kalender .wn {
        min-width: 110px;
        width: 110px;
    }
    .kalender .wn {
        font-size: 10px;
        padding: 5px 8px;
        font-weight: 500;
        background: #fafafa !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .kalender .wn .wo-dot {
        display: inline-block !important;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        margin-right: 5px;
        vertical-align: middle;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .kalender tbody td {
        height: 26px;
        border: 1px solid #ddd;
    }
    /* Wichtig: TD-Hintergrund beim Druck wegnehmen, da Overlay-Streifen drüber liegen */
    .kalender tbody td.bel {
        background: transparent !important;
    }
    .kalender .haus-hdr td {
        background: #1a365d !important;
        color: #fff !important;
        font-weight: 700;
        font-size: 11px;
        padding: 5px 8px;
        letter-spacing: 0.04em;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* OVERLAY-STREIFEN (Buchungen) - z-index hoch damit über haus-hdr */
    .kalender-overlay {
        z-index: 100 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        pointer-events: none;
    }
    .overlay-eintrag {
        border-radius: 3px !important;
        border-left-width: 4px !important;
        padding: 2px 6px !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px;
        position: absolute !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        box-shadow: none !important;
        z-index: 100;
    }
    .overlay-eintrag .oe-name {
        font-weight: 700;
        color: #000 !important;
    }
    .overlay-eintrag .oe-datum {
        font-weight: 500;
        color: #333 !important;
        font-size: 9px;
    }

    /* LEGENDE: kompakte einzeilige Anordnung */
    .legende {
        box-shadow: none;
        border: 1px solid #999;
        padding: 8px 12px;
        margin-top: 10px;
        display: flex !important;
        flex-wrap: wrap;
        gap: 14px 20px;
        font-size: 10px;
        page-break-inside: avoid;
    }
    .legende-item {
        display: inline-flex !important;
        align-items: center;
        gap: 5px;
        font-size: 10px;
    }
    .legende-dot {
        display: inline-block !important;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* JAHRESANSICHT (alte Tabelle, sollte nie sichtbar sein) */
    .jahres-wrap { display: none !important; }

    /* TAB-LEISTE */
    .ansicht-tabs { display: none !important; }

    /* MINI-KALENDER (Wohnungs-Übersicht) */
    .mini-kalender-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 5px !important;
    }
    .mini-kalender {
        box-shadow: none !important;
        border: 1px solid #999 !important;
        padding: 6px !important;
        page-break-inside: avoid !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .mini-kal-tabelle { font-size: 8px; }
    .mini-kal-tabelle td {
        height: 14px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .mini-kal-wo { font-size: 11px; }
    .mini-kal-haus { font-size: 9px; }
    .mini-kal-bu-zeile {
        font-size: 9px;
        padding: 2px 4px;
        background: #f5f5f5 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .mk-bel {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* TABELLE (Buchungsliste, Nächste Ankünfte) */
    .table {
        font-size: 10px;
        border-collapse: collapse;
        width: 100%;
    }
    .table th, .table td {
        padding: 6px 8px;
        font-size: 10px;
        border: 1px solid #ccc;
    }
    .table thead th {
        background: #1a365d !important;
        color: #fff !important;
        font-weight: 700;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .table tbody tr:nth-child(even) td {
        background: #f8f8f8 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Footer mit Druckdatum */
    .container::after {
        content: "Gedruckt am " attr(data-print-date) " · Internes Dokument";
        display: block;
        text-align: right;
        font-size: 9px;
        color: #888;
        margin-top: 14px;
        padding-top: 6px;
        border-top: 1px solid #ddd;
    }

    /* Druck-Auswahl: nur ausgewählten Bereich drucken */
    body.print-kalender .ankuenfte-bereich,
    body.print-kalender .nicht-kalender { display: none !important; }
    body.print-ankuenfte .kalender-bereich,
    body.print-ankuenfte .legende,
    body.print-ankuenfte .nicht-ankuenfte { display: none !important; }

    /* Page-Breaks intelligent */
    .kalender, .legende, .card { page-break-inside: avoid; }
    h2, h3 { page-break-after: avoid; }
}

/* === Speichern-Bar nur auf Mobile === */
/* iOS-Safari pinnt position:sticky;bottom:0 als Last-Child unzuverlaessig -> position:fixed */
@media (max-width: 768px) {
    .form-actions-sticky{
        position:fixed;
        left:0; right:0; bottom:0;
        background:#fff;
        margin:0;
        padding:10px 14px calc(10px + env(safe-area-inset-bottom));
        border-top:1px solid var(--g200);
        box-shadow:0 -4px 12px rgba(0,0,0,.12);
        z-index:200;
    }
    .form-actions-sticky .form-actions-buttons{
        max-width:1600px;
        margin:0 auto;
    }
    .form-actions-sticky .btn-primary{
        background:#22543d;
        border-color:#22543d;
        font-weight:700;
        height:52px;
        font-size:16px;
        box-shadow:0 2px 8px rgba(34,84,61,.3);
    }
    .form-actions-sticky .meta-info{display:none;}
    /* Platz schaffen, damit die fixe Leiste die letzten Felder nicht verdeckt */
    .form-buchung{ padding-bottom:88px; }
}

/* === Dashboard auf Mobile: Belegungskalender-Header + Nav verstecken === */
/* Auf Mobile gibt es keinen Belegungskalender, daher diese Elemente raus */
@media (max-width: 768px) {
    body.is-dashboard .kalender-header,
    body.is-dashboard .kalender-nav {
        display: none !important;
    }
}