:root{
  --bg:#eef6ff;
  --card:#ffffff;
  --text:#14213d;
  --muted:#607089;
  --primary:#2563eb;
  --primary2:#1d4ed8;
  --green:#22c55e;
  --red:#ef4444;
  --yellow:#facc15;
  --border:#d9e6f6;
  --shadow:0 14px 35px rgba(30,64,175,.12);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:linear-gradient(135deg,#f8fbff,#e6f2ff);
  color:var(--text);
}
header{
  padding:22px 28px;
  background:linear-gradient(120deg,#b3111f,#d7263d);
  border-bottom:1px solid #8f0d18;
  color:#ffffff;
  position:sticky;top:0;z-index:5;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
h1{margin:0;font-size:26px}
header h1{color:#ffffff}
.small{color:var(--muted);font-size:13px}
header .small{color:#ffe4e7}
.lang-switch{display:flex;gap:6px;align-items:center}
.lang-switch button{
  padding:8px 12px;
  background:rgba(255,255,255,.18);
  color:#ffffff;
  font-weight:800;
}
.lang-switch button.active{background:#ffffff;color:#b3111f}

/* Sprach-Schalter */
.lang-switch .lang-toggle{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  padding:3px;
  border-radius:999px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.35);
  min-width:132px;
  height:30px;
  cursor:pointer;
}
.lang-toggle .lang-opt{
  position:relative;
  z-index:1;
  text-align:center;
  font-weight:800;
  font-size:12px;
  line-height:1;
  color:rgba(255,255,255,.85);
  padding:0 8px;
  transition:color .2s;
}
.lang-toggle .lang-knob{
  position:absolute;
  top:3px;bottom:3px;left:3px;
  width:calc(50% - 3px);
  border-radius:999px;
  background:#ffffff;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition:transform .22s ease;
}
.lang-toggle.de .lang-knob{transform:translateX(100%)}
.lang-toggle:not(.de) .opt-sq,
.lang-toggle.de .opt-de{color:#b3111f}
.lang-switch button.logout{background:#111111;color:#fff;margin-left:6px}
.lang-switch button.install-btn{background:#ffffff;color:#b3111f;margin-left:6px}
.lang-switch button.install-btn[hidden]{display:none!important}
.install-modal{max-width:460px}
.install-steps{padding-left:22px;line-height:1.7;font-size:15px}
*{-webkit-tap-highlight-color:transparent}
.role-badge{margin-right:6px;background:#ffffff;color:#b3111f}

/* Logo */
.brand{display:flex;align-items:center;gap:14px}
.logo{height:48px;width:auto;max-width:160px;object-fit:contain;border-radius:8px}
.logo[hidden]{display:none!important}
.logo-login{height:64px;max-width:200px}
.logo-invoice{height:72px;max-width:220px}
.logo-preview{height:64px;max-width:200px;border:1px solid var(--border);padding:4px;background:#fff}
.logo-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.logo-row input[type=file]{width:auto;flex:1;min-width:220px}
.role-badge.admin{background:#111111;color:#ffffff}
body:not(.is-admin) .admin-only{display:none!important}
#staffList select{width:auto;min-width:150px;padding:7px 10px}
#staffList input{padding:7px 10px}
#staffList .pw-cell{white-space:nowrap}
#staffList .pw-cell input{width:170px;margin-right:6px}
#staffList .pw-cell button{padding:8px 10px}
#userEmail{margin-right:6px}

/* Login: roter Hintergrund, schwarzes Anmeldefeld */
.login-bg{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:linear-gradient(135deg,#b3111f,#d7263d 55%,#e8394f);
}
.login-bg[hidden],#app[hidden]{display:none!important}
.login-bg .login-box{
  width:100%;
  max-width:440px;
  background:#111111;
  border-color:#2a2a2a;
  color:#ffffff;
  box-shadow:0 25px 60px rgba(0,0,0,.45);
}
.login-bg .login-box h1{color:#ffffff}
/* >>> AUSWAHL <<< Rueckweg zur Programmauswahl */
.login-bg .login-box .login-back{display:inline-block;margin-top:10px;padding:12px 6px;font-size:13px;
  color:#c9ced8;text-decoration:none;border-bottom:1px solid transparent}
.login-bg .login-box .login-back:hover{color:#ffffff;border-bottom-color:currentColor}
.login-bg .login-box .small{color:#c9ced8}
.login-bg .login-box label{color:#ffffff}
.login-bg .login-box input{
  background:#ffffff;
  border-color:#ffffff;
  color:#111111;
}
.login-bg .login-box input:focus{outline:2px solid #d7263d;border-color:#d7263d}
.login-bg .login-box input:-webkit-autofill,
.login-bg .login-box input:-webkit-autofill:focus{
  -webkit-text-fill-color:#111111;
  -webkit-box-shadow:0 0 0 1000px #ffffff inset;
  caret-color:#111111;
}
.login-bg .login-box button[type=submit]{background:#d7263d}
.login-bg .login-box button[type=submit]:hover{background:#b3111f}
.login-bg .login-box .login-error{color:#ff8a95}
.login-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:16px;
}
.login-head h1{font-size:22px}
.login-error{
  min-height:20px;
  margin-top:10px;
  color:#b91c1c;
  font-weight:700;
  font-size:13px;
}
.container{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:18px;
  padding:18px;
  min-width:0;
}
/* Breite Tabellen scrollen im Kasten, statt die Seite seitlich zu dehnen */
.container > .panel{min-width:0}
.layout > *{min-width:0}
.room{min-width:0}

/* Reinigung auf der Zimmerkarte */
.clean-row{margin-top:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.clean-btn{
  width:100%;
  padding:10px 12px;
  font-size:13px;
  border-radius:12px;
  background:var(--primary);
  color:#fff;
}
.clean-btn:hover{background:var(--primary2)}
.clean-btn.done{background:#16a34a}
.clean-btn.done:hover{background:#15803d}
.room.busy .clean-btn{background:#ffffff;color:#b3111f}
.room.busy .clean-btn.done{background:#16a34a;color:#fff}
.clean-badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:800}
.clean-badge.dirty{background:#fde68a;color:#7c2d12}
.clean-badge.clean{background:#dcfce7;color:#166534}
.room.busy .clean-badge.dirty{background:#fff3c4;color:#7c2d12}

/* Putzfrau: nur die Reinigungsansicht */
#hkPanel{display:none}
body.role-housekeeping .container > section{display:none!important}
body.role-housekeeping .container #hkPanel{display:block!important}
body.role-housekeeping .container{grid-template-columns:1fr}
.hk-head{margin:16px 0 10px;font-size:17px}
.hk-head.hk-dirty{color:#b45309}
.hk-head.hk-clean{color:#166534}
.hk-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.hk-card{
  border-radius:16px;padding:14px;background:#fff;border:2px solid var(--border);
  box-shadow:0 6px 18px rgba(15,23,42,.06);
}
.hk-card.dirty{background:#fffbeb;border-color:#fcd34d}
.hk-card.clean{background:#f0fdf4;border-color:#86efac}
.hk-card .hk-no{font-size:26px;font-weight:800}
.hk-card .hk-type{font-size:12px;color:#475569;margin-bottom:6px}
.hk-card button{width:100%;margin-top:8px;background:#16a34a;font-size:15px;padding:12px}
.hk-card .small{display:block;margin-top:6px}

/* Mitarbeiter (ohne Leiste): Zimmer | Formular, darunter Liste und Umsatz in voller Breite */
.card-panel{grid-column:1/-1}
.master-panel{grid-column:1/-1;border-color:#fcd34d;background:#fffdf5}
#masterUid{font-family:Consolas,monospace;font-size:16px;letter-spacing:1px}
#masterUid:focus{outline:3px solid #f59e0b;border-color:#f59e0b}
.badge.master{background:#fef3c7;color:#92400e}
.badge.lock-ok{background:#dcfce7;color:#166534}
.badge.lock-wait{background:#e0ecff;color:#1e3a8a}
.badge.lock-error{background:#fee2e2;color:#991b1b;cursor:help}
/* Admin: Generalkarte im Bereich "Reinigung", nicht bei den Zimmern */
body.is-admin.view-rooms .container .master-panel{display:none!important}
body.is-admin.view-clean .container .master-panel{display:block!important}
.card-grid{grid-template-columns:repeat(4,1fr)}
#cardUid{font-family:Consolas,monospace;font-size:16px;letter-spacing:1px}
#cardUid:focus{outline:3px solid #22c55e;border-color:#22c55e}
.badge.inactive{background:#e5e7eb;color:#4b5563}
.badge.active{background:#dcfce7;color:#166534}
@media(max-width:1000px){.card-grid{grid-template-columns:1fr 1fr}}
body:not(.is-admin) .container [data-view="list"],
body:not(.is-admin) .container [data-view="pazar"],
body:not(.is-admin) .container .invoice{grid-column:1/-1}

/* Mitarbeiter: beim Umsatz nur die Zahlen für Tag und Woche, kein Druck, kein Jahresumsatz */
body.role-staff .dita-block .grid,
body.role-staff .dita-block .actions,
body.role-staff .vit-block{display:none!important}
.raport-print .staff-section{margin-top:18px;padding-top:10px;border-top:2px solid #e5e7eb}
.raport-print .grand{margin-top:18px;font-size:16px}
.stat-row{display:flex;gap:14px;flex-wrap:wrap}
.stat-card{
  flex:1;min-width:180px;
  background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px 16px;
}
.stat-card .small{display:block;margin-bottom:4px}
.stat-card b{font-size:24px}

/* Admin: linke Navigationsleiste + nur ein Bereich sichtbar */
.sidenav{display:none}
body.is-admin .layout{
  display:grid;
  grid-template-columns:230px 1fr;
  align-items:start;
}
body.is-admin .sidenav{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:18px 0 18px 18px;
  position:sticky;
  top:96px;
}
.sidenav button{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:left;
  background:rgba(255,255,255,.92);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:14px;
  padding:13px 14px;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
}
.sidenav button span:first-child{font-size:18px}
.sidenav button:hover{border-color:#93c5fd}
.sidenav button.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.sidenav .nav-toggle{background:#e0ecff;color:#1e3a8a;justify-content:flex-start}
body.is-admin.nav-collapsed .layout{grid-template-columns:78px 1fr}
body.nav-collapsed .sidenav button{justify-content:center;padding:13px 0}
body.nav-collapsed .sidenav button span:last-child{display:none}
body.nav-collapsed .sidenav .nav-toggle span:first-child{display:inline-block;transform:rotate(180deg)}
body.is-admin .container [data-view]{display:none}
body.is-admin.view-rooms    .container [data-view="rooms"],
body.is-admin.view-list     .container [data-view="list"],
body.is-admin.view-pazar    .container [data-view="pazar"],
body.is-admin.view-staff    .container [data-view="staff"],
body.is-admin.view-clean    .container [data-view="clean"],
body.is-admin.view-settings .container [data-view="settings"]{display:block}
/* Putzrapport nur für Admin und Chef */
body.role-staff .clean-panel{display:none!important}
body:not(.is-admin) .container .clean-panel{grid-column:1/-1}
body.is-admin:not(.view-rooms) .container{grid-template-columns:1fr}
.rooms-add{grid-template-columns:repeat(5,1fr)}
#roomsAdminList input{width:90px;padding:7px 10px}
#roomsAdminList input.room-label{width:160px}
.room-type{
  display:inline-block;
  margin-top:4px;
  padding:3px 8px;
  border-radius:999px;
  background:#e0ecff;
  color:#1e3a8a;
  font-size:11px;
  font-weight:800;
}
.room.busy .room-type{background:rgba(255,255,255,.22);color:#fff}
@media(max-width:1000px){.rooms-add{grid-template-columns:1fr 1fr}}
.panel{
  background:rgba(255,255,255,.92);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  box-shadow:var(--shadow);
}
.panel h2{margin:0 0 12px;font-size:20px}
.legend{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 16px}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block;margin-right:6px}
.rooms{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:12px;
}
.room{
  border:2px solid transparent;
  border-radius:16px;
  padding:12px 14px;
  cursor:pointer;
  background:#f8fbff;
  transition:.15s;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
}
.room-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.room-head .room-type{margin-top:0}
.room-foot{margin-top:8px}
.room-foot .status{margin-bottom:8px}
.room-foot .clean-row{margin-top:0;flex-direction:column;align-items:stretch}
.room:hover{transform:translateY(-2px);border-color:#93c5fd}
.room.free{background:#ecfdf5;border-color:#86efac}
.room.busy{
  background:linear-gradient(135deg,#dc2626,#ef4444);
  border-color:#991b1b;
  color:#ffffff;
}
.room.cleaning{background:#fefce8;border-color:#fde047}
.room.selected{outline:3px solid #2563eb}
.room-no{font-size:26px;font-weight:800;line-height:1}
.icons{font-size:17px;margin:6px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status{font-size:12px;font-weight:700}
.capacity{font-size:12.5px;color:#334155;line-height:1.4}
.room.busy .capacity,
.room.busy .small,
.room.busy .status{
  color:#ffffff;
}
.room.busy .status{
  display:inline-block;
  background:#7f1d1d;
  color:#ffffff;
  padding:5px 9px;
  border-radius:999px;
  font-weight:900;
}
.grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.full{grid-column:1/-1}
label{display:block;font-size:13px;font-weight:700;margin-bottom:5px}
input,select,textarea{
  width:100%;
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  font-size:14px;
  font-family:inherit;
  color:var(--text);
}
textarea{min-height:74px;resize:vertical}
/* Hellblaue Umrandung der Eingabefelder, auch beim Anklicken */
input,select,textarea{border-color:#93c5fd}
input:focus,select:focus,textarea:focus{outline:2px solid #93c5fd;outline-offset:0;border-color:#60a5fa}
input[readonly]{background:#f1f5fb;color:#475569;cursor:default;border-color:#93c5fd}
button{
  border:0;
  border-radius:12px;
  padding:11px 14px;
  font-weight:800;
  cursor:pointer;
  background:var(--primary);
  color:#fff;
  font-family:inherit;
  font-size:14px;
}
button.secondary{background:#0f172a}
button.danger{background:#dc2626}
button.success{background:#16a34a}
button.success:hover{background:#15803d}
button.light{background:#e0ecff;color:#1e3a8a}
button:disabled{opacity:.6;cursor:default}
.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.summary{
  background:#f8fbff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  margin-top:12px;
}
.summary b{font-size:20px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:9px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
th{background:#f1f7ff}
.invoice{
  display:none;
  background:white;
  padding:24px;
  border-radius:18px;
  border:1px solid var(--border);
  margin-top:16px;
}
.invoice.open{display:block}
.invoice h2{margin-top:0}
.invoice-header{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
}
.invoice-header h2{font-size:30px;margin:0;color:#111827}
.invoice-header h3{font-size:22px;margin:6px 0 4px;color:#1d4ed8}
.invoice-meta{
  text-align:right;
  background:#f8fbff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  min-width:230px;
}
.badge{display:inline-block;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:800}
.badge.free{background:#dcfce7;color:#166534}
.badge.busy{background:#fee2e2;color:#991b1b}
.badge.cleaning{background:#fef9c3;color:#854d0e}
.modal-bg{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  z-index:50;
  padding:22px;
}
.modal-bg.open{display:block}
.modal{
  max-width:760px;
  margin:50px auto;
  background:#fff;
  border-radius:20px;
  box-shadow:0 25px 60px rgba(15,23,42,.28);
  overflow:hidden;
}
.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  background:#f1f7ff;
  border-bottom:1px solid var(--border);
}
.modal-head h2{margin:0}
.modal-body{padding:18px;max-height:65vh;overflow:auto}
.close-btn{
  background:#dc2626;
  color:#fff;
  border:0;
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:800;
}
.toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  background:#0f172a;
  color:#fff;
  padding:12px 18px;
  border-radius:12px;
  font-weight:700;
  box-shadow:0 12px 30px rgba(15,23,42,.3);
  z-index:60;
  opacity:0;
  pointer-events:none;
  transition:.2s;
}
.toast.show{opacity:1}
.toast.error{background:#dc2626}
body{padding-bottom:env(safe-area-inset-bottom)}
button:active{transform:scale(.98)}

/* ===== Tablet hochkant (iPad) und kleiner: eine Spalte, Formular bleibt zweispaltig ===== */
@media(max-width:1000px){
  .container{grid-template-columns:1fr}
  body.is-admin .layout{grid-template-columns:1fr}
  body.is-admin.nav-collapsed .layout{grid-template-columns:1fr}
  /* Admin-Leiste als Wischleiste oben */
  body.is-admin .sidenav{
    flex-direction:row;flex-wrap:nowrap;overflow-x:auto;
    position:sticky;top:0;z-index:4;
    padding:10px 14px;gap:8px;
    background:linear-gradient(135deg,#f8fbff,#e6f2ff);
    border-bottom:1px solid var(--border);
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  body.is-admin .sidenav::-webkit-scrollbar{display:none}
  .sidenav button{width:auto;white-space:nowrap;padding:10px 14px;font-size:13px;flex:0 0 auto}
  .sidenav .nav-toggle{display:none}
  header{position:static}
  .rooms{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  .card-grid,.rooms-add{grid-template-columns:1fr 1fr}
  .invoice-header{gap:12px}
}

/* ===== Handy (iPhone, Samsung): kompakt, grosse Tasten, Tabellen als Kärtchen ===== */
@media(max-width:640px){
  header{padding:10px 14px;gap:8px;padding-top:calc(10px + env(safe-area-inset-top))}
  header .brand{width:100%;gap:10px}
  header h1{font-size:16px;line-height:1.25}
  .logo{height:34px;max-width:100px}
  .lang-switch{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:6px;align-items:center}
  #userEmail{display:none}
  .lang-switch button{padding:7px 10px;font-size:12px;min-height:32px}
  .lang-switch .lang-toggle{min-width:112px;height:30px}
  .lang-switch button.logout{margin-left:auto}
  .role-badge{margin-right:0}
  .container{padding:10px;gap:10px}
  .panel{padding:14px;border-radius:14px}
  .panel h2{font-size:18px;margin-bottom:10px}
  .legend{gap:10px;font-size:13px;margin:4px 0 12px}
  .rooms{grid-template-columns:1fr;gap:10px}
  .room{padding:12px}
  .room-no{font-size:24px}
  .icons{font-size:16px}
  .grid{grid-template-columns:1fr;gap:10px}
  .card-grid,.rooms-add,.pazar-panel .grid,.clean-panel .grid{grid-template-columns:1fr}
  label{font-size:12.5px}
  input,select,textarea{font-size:16px;padding:12px}   /* 16px verhindert Auto-Zoom auf iPhone */
  input[type=date]{min-height:46px}
  .actions{gap:8px;margin-top:10px}
  .actions button{flex:1 1 100%;padding:13px 14px;font-size:15px}
  button{min-height:40px}
  .clean-btn{min-height:38px}
  .summary{padding:12px}
  .summary b{font-size:18px}
  .invoice{padding:14px;overflow-x:auto}
  .invoice-header{flex-direction:column}
  .invoice-header h2{font-size:24px}
  .invoice-meta{min-width:0;text-align:left;width:100%}
  .stat-row{flex-direction:column;gap:10px}
  .stat-card{min-width:0}
  .stat-card b{font-size:22px}
  .hk-list{grid-template-columns:1fr 1fr;gap:10px}
  .hk-card .hk-no{font-size:24px}
  .modal-bg{padding:0}
  .modal{margin:0;max-width:none;min-height:100%;border-radius:0}
  .modal-body{max-height:none}
  .modal-head{padding:12px 14px;position:sticky;top:0}
  .toast{left:10px;right:10px;transform:none;bottom:calc(14px + env(safe-area-inset-bottom));text-align:center}
  .login-bg{padding:14px;padding-top:calc(14px + env(safe-area-inset-top));align-items:flex-start}
  .login-box{padding:18px 16px;margin-top:8vh}
  .login-head h1{font-size:19px}
  .login-head{flex-direction:column;align-items:flex-start;gap:10px}
  .login-box .actions button{width:100%}
  #staffList .pw-cell{white-space:normal}
  #staffList .pw-cell input{width:100%;margin:0 0 6px}
  #staffList select{width:100%}
  #roomsAdminList input{width:100%}

  /* Tabellen als Kärtchen: jede Zeile ein Kasten, jede Zelle "Beschriftung | Wert" */
  .responsive table,.responsive tbody,.responsive tr,.responsive td{display:block;width:100%}
  .responsive thead{display:none}
  .responsive tr{
    border:1px solid var(--border);border-radius:12px;padding:6px 12px;margin-bottom:10px;
    background:#fff;box-shadow:0 4px 12px rgba(15,23,42,.05);
  }
  .responsive td{
    display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:6px 0;border:0;border-bottom:1px dashed #eef2f7;text-align:right;font-size:13.5px;
  }
  .responsive td:last-child{border-bottom:0}
  .responsive td::before{
    content:attr(data-label);flex:0 0 38%;text-align:left;
    font-weight:700;color:var(--muted);font-size:12px;
  }
  .responsive td:not([data-label])::before{display:none}
  .responsive td.td-actions{flex-wrap:wrap;justify-content:flex-start}
  .responsive td.td-actions::before{flex-basis:100%}
  .responsive td.td-actions button{flex:1 1 auto;padding:10px 12px}
  .responsive td input,.responsive td select{width:55%}
}
/* Sehr schmale Handys */
@media(max-width:380px){
  .hk-list{grid-template-columns:1fr}
  header h1{font-size:15px}
}
/* Tablet quer (iPad): zwei Spalten, etwas kompakter */
@media(min-width:1001px) and (max-width:1200px){
  .rooms{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  body.is-admin .layout{grid-template-columns:200px 1fr}
}
/* Nur echte Touch-Geräte: keine Hover-Verschiebung der Zimmerkarten */
@media(hover:none){
  .room:hover{transform:none}
}
.print-header{display:none}
.raport-print{display:none}
@media print{
  /* Browser-Kopf- und Fusszeile (Datum, Adresse, Seitenzahl) ausblenden */
  @page{margin:0}
  body{background:white;color:#111827;padding:14mm 14mm 22mm}
  /* Eigene Fusszeile: nur der Hotelname, auf jeder Seite */
  .print-header{
    display:block!important;
    position:fixed;
    bottom:0;left:0;right:0;
    height:16mm;
    padding:4mm 14mm 0;
    text-align:center;
    font-size:14px;
    font-weight:800;
    color:#111827;
    background:#fff;
    border-top:1px solid #d1d5db;
  }
  header,.rooms,.panel,.no-print,.toast,.sidenav{display:none!important}
  .layout{display:block!important}
  .container{display:block;padding:0}
  .panel{box-shadow:none;border:0}
  body.print-invoice .invoice{display:block!important;border:0;padding:0}
  body.print-pazar .pazar-panel,
  body.print-vit .pazar-panel{display:block!important;border:0;padding:0}
  body.print-pazar .pazar-panel .grid,
  body.print-vit .pazar-panel .grid{display:none}
  body.print-pazar .vit-block,
  body.print-pazar .raport-block{display:none}
  body.print-vit .dita-block,
  body.print-vit .raport-block{display:none}
  body.print-vit .vit-block h2{margin-top:0}
  /* Putzrapport: nur dieser Bereich */
  body.print-clean .clean-panel{display:block!important;border:0;padding:0}
  /* Tagesrapport: nur der Rapport */
  body.print-raport .pazar-panel{display:block!important;border:0;padding:0}
  body.print-raport .dita-block,
  body.print-raport .vit-block{display:none!important}
  body.print-raport .raport-print{display:block!important}
  .raport-print h2{margin:0 0 6px}
  .raport-print h3{margin:18px 0 6px;font-size:15px}
  .raport-print .sign{margin-top:40px}
  .invoice-header{display:flex}
  table{font-size:12px}
  th{background:#f3f4f6!important}
}

/* >>> FINGER <<< Auf Tablets gilt die Handy-Regel nicht, Safari zoomt aber
   genauso beim Antippen eines Feldes unter 16px. */
@media (pointer:coarse){
  input,select,textarea{font-size:16px}
  button{min-height:40px}
}