:root{
  --orange:#f6a01a;
  --orange-dark:#db8610;
  --wine:#71383b;
  --cream:#fffaf0;
  --ink:#28211d;
  --muted:#756c66;
  --line:#e8ded0;
  --green:#4f7752;
  --red:#a34d4d;
  --page-bg:#faf4e9;
  --card-bg:#ffffff;
  /* Textfarben mit ausreichendem Kontrast (hell/dunkel getrennt) */
  --wine-text:#71383b;
  --green-text:#2f6034;
  --red-text:#a03a3a;
  --orange-text:#8a5300;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page-bg:#1b1713;
    --card-bg:#28211d;
    --ink:#f3ece1;
    --muted:#b6ab9e;
    --line:#3a322b;
    --wine-text:#f3b0aa;
    --green-text:#8fd496;
    --red-text:#ff9e96;
    --orange-text:#ffc86b;
  }
}
:root[data-theme="dark"]{
  --page-bg:#1b1713;
  --card-bg:#28211d;
  --ink:#f3ece1;
  --muted:#b6ab9e;
  --line:#3a322b;
  --wine-text:#f3b0aa;
  --green-text:#8fd496;
  --red-text:#ff9e96;
  --orange-text:#ffc86b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--page-bg);
  color:var(--ink);
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.hidden{display:none !important}
.muted{color:var(--muted)}

/* ---------- Login ---------- */
#view-login{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.login-wrap{max-width:360px;width:100%}
.login-wrap h1{margin:0 0 6px;font-size:26px}
.login-wrap form{margin-top:20px;display:flex;flex-direction:column;gap:14px}

/* ---------- Formulare allgemein ---------- */
label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink)}
input,select{
  font:inherit;
  font-size:16px; /* verhindert Auto-Zoom in iOS-WebViews */
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--card-bg);
  color:var(--ink);
  width:100%;
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:none;
  border-radius:10px;
  padding:13px 16px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
}
.button.primary{background:var(--orange);color:#fff}
.button.primary:active{background:var(--orange-dark)}
.button.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.button.small{padding:8px 12px;font-size:13px;border-radius:8px}
.button.danger{background:var(--red);color:#fff}

.notice{padding:10px 12px;border-radius:8px;font-size:13px;margin:0}
.notice.ok{background:#eaf3ea;color:var(--green-text)}
.notice.bad{background:#f7e9e9;color:var(--red-text)}
@media (prefers-color-scheme: dark){
  .notice.ok{background:#1e2b20}
  .notice.bad{background:#2e1e1e}
}

/* ---------- App-Rahmen ---------- */
#app{display:flex;flex-direction:column;height:100%}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  padding-top:calc(14px + env(safe-area-inset-top,0px));
  background:var(--wine);
  color:#fff;
  position:sticky;
  top:0;
  z-index:20;
}
.topbar h1{font-size:18px;margin:0}
.topbar-titelblock{display:flex;align-items:baseline;gap:8px;min-width:0}
.topbar-version{font-size:12px;font-weight:600;opacity:.75;white-space:nowrap}

/* ========== FIX: LOGOUT ICON SICHTBAR MACHEN ========== */
.icon-btn{
  background:none;
  border:none;
  color:#fff;
  font-size:20px;
  padding:6px 8px;
  cursor:pointer;
  transition:all 0.2s ease;
  border-radius:6px;
}

.icon-btn:hover{
  background:rgba(255, 255, 255, 0.15);
}

.icon-btn:active{
  background:rgba(255, 255, 255, 0.25);
}

/* Speziell für Logout-Button: Dunklerer Hintergrund für besseren Kontrast */
.logout-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(0, 0, 0, 0.1);
  border-radius:6px;
  padding:6px 8px;
}

.logout-btn:hover{
  background:rgba(0, 0, 0, 0.2);
}

.logout-btn:active{
  background:rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark){
  .logout-btn{
    background:rgba(255, 255, 255, 0.08);
  }

  .logout-btn:hover{
    background:rgba(255, 255, 255, 0.15);
  }

  .logout-btn:active{
    background:rgba(255, 255, 255, 0.25);
  }

  .icon-btn:hover{
    background:rgba(255, 255, 255, 0.12);
  }

  .icon-btn:active{
    background:rgba(255, 255, 255, 0.2);
  }
}

/* Accessibility */
.icon-btn:focus{
  outline:2px solid rgba(255, 255, 255, 0.5);
  outline-offset:2px;
}

/* ========== INSTALL BANNER (Android) ========== */
.install-banner{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:linear-gradient(135deg, #f6a01a 0%, #db8610 100%);
  color:#fff;
  padding:14px 16px 16px;
  z-index:999;
  box-shadow:0 -2px 10px rgba(0, 0, 0, 0.1);
  animation:slideUp 0.3s ease;
}

@keyframes slideUp{
  from{
    transform:translateY(100%);
    opacity:0;
  }
  to{
    transform:translateY(0);
    opacity:1;
  }
}

.install-banner.hidden{
  display:none !important;
}

.install-banner-content{
  max-width:600px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.install-banner-content > div:first-child{
  flex:1;
}

.install-banner-content strong{
  display:block;
  font-size:15px;
  margin-bottom:2px;
}

.install-banner-content p{
  font-size:12px;
  margin:0;
  opacity:0.95;
}

.install-buttons{
  display:flex;
  gap:8px;
  flex-shrink:0;
}

/* ========== iOS INSTALLATION ANLEITUNG ========== */
.ios-hint{
  background:#eaf3ea;
  border-left:3px solid #4f7752;
  border-radius:6px;
  padding:12px;
  font-size:12px;
  color:#4f7752;
  line-height:1.5;
}

@media (prefers-color-scheme: dark){
  .ios-hint{
    background:#1e2b20;
    border-left-color:#8a9f7f;
    color:#8a9f7f;
  }
}

.ios-hint strong{
  display:block;
  margin-bottom:6px;
}

/* Responsive Anpassungen */
@media (max-width: 600px){
  .install-banner-content{
    flex-direction:column;
    align-items:flex-start;
  }

  .install-buttons{
    width:100%;
  }

  .install-buttons button{
    flex:1;
  }
}

/* Print Styles */
@media print{
  .icon-btn,
  .install-banner,
  .ios-hint{
    display:none !important;
  }
}

/* ========== ORIGINALSTYLES WEITERLESEN ========== */

.view{flex:1;overflow-y:auto;padding:14px 14px 90px;-webkit-overflow-scrolling:touch}

/* ---------- Kennzahlen ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.stat{background:var(--card-bg);border-radius:10px;padding:10px 8px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.stat b{display:block;font-size:20px}
.stat span{font-size:10.5px;color:var(--muted)}

/* ---------- Filter ---------- */
.filterbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.filterbar input,.filterbar select{flex:1 1 130px;font-size:14px;padding:9px 10px}

/* ---------- Karten (Reservierungen, Tische) ---------- */
.card{
  background:var(--card-bg);
  border-radius:12px;
  padding:14px;
  margin-bottom:10px;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  border-left:4px solid var(--line);
}
.card.status-aktiv{border-left-color:var(--green)}
.card.status-unbestaetigt{border-left-color:var(--orange)}
.card.status-storniert,.card.status-abgelaufen{border-left-color:var(--red);opacity:.88}

.card-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.card-top b{font-size:15px}
.card-time{font-size:14px;font-weight:700;color:var(--wine-text)}
.card-sub{font-size:13px;color:var(--muted);margin-top:2px}
.card-badge{
  display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;margin-top:6px;
}
.badge-aktiv{background:#eaf3ea;color:var(--green-text)}
.badge-unbestaetigt{background:#fdf1de;color:var(--orange-text)}
.badge-storniert,.badge-abgelaufen{background:#f7e9e9;color:var(--red-text)}
@media (prefers-color-scheme: dark){
  .badge-aktiv{background:#1e2b20}
  .badge-unbestaetigt{background:#332a18}
  .badge-storniert,.badge-abgelaufen{background:#2e1e1e}
}
.card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

.section-title{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin:18px 0 8px}
.empty{color:var(--muted);font-size:14px;padding:10px 0}

/* ---------- Detailseite ---------- */
.link-back{background:none;border:none;color:var(--wine-text);font-weight:700;font-size:14px;padding:6px 0;margin-bottom:8px;cursor:pointer}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;background:var(--card-bg);border-radius:10px;padding:14px;margin-bottom:16px;font-size:14px}
.detail-grid div span{display:block;font-size:11px;color:var(--muted)}

/* ---------- Tischauswahl ---------- */
.tisch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin:10px 0}
.tisch-chip{
  border:2px solid var(--line);border-radius:8px;padding:8px;text-align:center;cursor:pointer;background:var(--card-bg);
}
.tisch-chip.selected{border-color:var(--green);background:#eaf3ea}
@media (prefers-color-scheme: dark){ .tisch-chip.selected{background:#1e2b20} }
.tisch-chip small{display:block;color:var(--muted);font-size:11px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.modus-wahl{display:flex;flex-direction:column;gap:8px;margin:10px 0;font-size:14px;font-weight:600}
.modus-wahl label{flex-direction:row;align-items:center;gap:8px}
.modus-wahl input{width:auto}
#neu-form>*{margin-bottom:12px}

/* ---------- Tischplan ---------- */
.tisch-card{background:var(--card-bg);border-radius:10px;padding:12px 14px;margin-bottom:8px}
.tisch-card summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.tisch-card summary::-webkit-details-marker{display:none}
.tisch-card .heute-info{font-size:13px;color:var(--wine-text);font-weight:700;margin-top:4px}
.tisch-card .alle-liste{margin-top:8px;font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:4px}

/* ---------- Tabbar ---------- */
.tabbar{
  display:flex;
  border-top:1px solid var(--line);
  background:var(--card-bg);
  padding-bottom:env(safe-area-inset-bottom,0px);
  position:sticky;
  bottom:0;
}
.tab{
  flex:1;background:none;border:none;padding:10px 4px 8px;display:flex;flex-direction:column;
  align-items:center;gap:2px;font-size:10.5px;color:var(--muted);cursor:pointer;
}
.tab span{font-weight:600}
.tab.active{color:var(--wine-text)}

.loading{padding:30px;text-align:center;color:var(--muted)}

/* ---------- Tischplan mit Tischabbildung (gleiche Optik wie im Adminbereich) ---------- */
.mini-btn{background:var(--card-bg);color:var(--wine-text);border:1px solid var(--line);border-radius:8px;
  min-width:44px;min-height:44px;padding:0 12px;font-size:20px;font-weight:700;cursor:pointer;font-family:inherit}
.mini-btn.text{font-size:14px}
.mini-btn:disabled{opacity:.4}
.tp-datum{display:flex;gap:6px;align-items:stretch}
.tp-datum input[type=date]{flex:1;min-width:0}
.tp-hinweis{font-size:12px;margin:6px 0}
.tp-box{background:var(--card-bg);border-radius:10px;padding:8px;margin-top:8px}
.tp-tools{display:flex;gap:6px;justify-content:flex-end;margin-bottom:6px}
.tp-tools .mini-btn{min-width:40px;min-height:40px}
.tp-plan{overflow:auto;-webkit-overflow-scrolling:touch;border-radius:8px}
.tp-svg{display:block;width:100%;height:auto;touch-action:pan-x pan-y}
.plan-auswahl{background:var(--card-bg);border-radius:10px;padding:8px;margin:10px 0}

/* Original-Optik aus styles.css / admin/tische.php (Raumplan, Tische, Stühle) */
.tp-room{fill:#fffdf8;stroke:#71383b;stroke-width:4}
.tp-gridline{fill:none;stroke:#eee6da;stroke-width:1}
.tp-chair-back{fill:var(--wine);opacity:.55}
.tp-chair-seat{fill:var(--wine);stroke:var(--orange);stroke-width:3}
.tp-top{fill:var(--orange);stroke:var(--orange-dark);stroke-width:2}
.tp-zone-fl{fill-opacity:.14;stroke-opacity:.55;stroke-width:3;stroke-dasharray:10 8}
.tp-zone-txt{font-weight:800;letter-spacing:3px;text-transform:uppercase;text-anchor:middle;dominant-baseline:central;opacity:.8;pointer-events:none}
.tp-label{font-weight:700;fill:#28211d;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.tp-sub{font-size:13px;fill:#28211d;text-anchor:middle;dominant-baseline:central;pointer-events:none;opacity:.75}
.tp-table{cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.tp-table .tp-top,.tp-table .tp-chair-seat{transition:fill .15s ease}
.tp-table.reserviert .tp-top{fill:#fbe3b0;stroke:#d19a1f;stroke-width:3}
.tp-table.belegt .tp-top{fill:#f4b6b1!important;stroke:#d9534f;stroke-width:3}
.tp-table.gewaehlt .tp-top{stroke:#28211d;stroke-width:6}
.tp-table.selected .tp-top{fill:var(--wine);stroke:#4a2426}
.tp-table.selected .tp-label,.tp-table.selected .tp-sub{fill:#fff}
.tp-table.selected .tp-chair-seat{fill:#8f4a4e}
.tp-table:focus-visible .tp-top{stroke:#28211d;stroke-width:5}
.tp-res{font-size:17px;font-weight:700;fill:#8b1e1a;text-anchor:middle;dominant-baseline:central;pointer-events:none;
  paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}
.tp-table.reserviert .tp-res{fill:#7a5200}

.tp-legende{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:10px 2px}
.tp-legende .dot{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;border:2px solid transparent;vertical-align:-1px}
.tp-legende .dot.frei{background:var(--orange)}
.tp-legende .dot.reserviert{background:#fbe3b0;border-color:#d19a1f}
.tp-legende .dot.belegt{background:#f4b6b1;border-color:#d9534f}

.tp-panel{background:var(--card-bg);border-radius:10px;padding:14px;margin-bottom:12px}
.tp-titel{font-size:20px;font-weight:800}
.tp-status{font-size:13px;margin-top:2px;font-weight:600}
.tp-status.belegt{color:var(--red-text)}
.tp-status.reserviert{color:var(--orange-text)}
.tp-status.frei{color:var(--green-text)}
.tp-label-klein{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px}
.tp-personen{display:flex;gap:6px;align-items:stretch}
.tp-felder{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.tp-personen input{flex:1;min-width:80px;width:auto;text-align:center;font-size:20px;font-weight:700}
.tp-aktion{display:block;width:100%;margin-top:10px;color:#fff;font-size:16px;font-weight:700;padding:14px 16px;border:none}
.tp-aktion.belegen{background:#d9534f}
.tp-aktion.frei{background:#3c8d40}
.tp-aktion:disabled{opacity:.35}
.tp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tp-chips:empty{display:none}
.tp-chip{display:inline-flex;align-items:center;gap:4px;background:#f5efe7;color:#704214;border:1px solid #e0d2bf;border-radius:999px;padding:5px 6px 5px 12px;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;min-height:34px}
.tp-chip.belegt{background:#f4b6b1;border-color:#d9534f;color:#8b1e1a}
.tp-chip.reserviert{background:#fbe3b0;border-color:#d19a1f;color:#7a5200}
.tp-chip .x{font-size:18px;line-height:1;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center}
.tp-leeren{margin-top:10px;padding:8px 12px}
.tp-gruppe{font-size:12px;font-weight:700;color:#704214;margin:12px 0 2px}
.tp-gruppe:first-child{margin-top:0}
.tp-eintrag{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.tp-eintrag:last-child{border-bottom:none}
.tp-eintrag.laufend{color:var(--red-text);font-weight:600}
.tp-eintrag.vorbei{opacity:.55}
.tp-eintrag .zeit{white-space:nowrap;font-weight:600}

.notice.hint{background:var(--card-bg);border:1px solid var(--line);color:var(--muted);font-size:13px;padding:8px 10px;border-radius:8px;margin:8px 0}
.notice.hint.bad{background:#fbebeb;border-color:#e6bcbc;color:var(--red-text)}
@media (prefers-color-scheme: dark){.notice.hint.bad{background:#2e1e1e;border-color:#5a3636}}
.notice.hint:empty{display:none}
.tp-oeffnung{font-size:13px;font-weight:600;color:var(--wine-text);margin:2px 2px 6px}
.tp-oeffnung:empty{display:none}

/* Datum und Uhrzeit nebeneinander */
.tp-kopf{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tp-feld{display:block}
.tp-feld input{width:100%;min-width:0}
.tp-schnell{display:grid;grid-template-columns:1fr 1.6fr 1.6fr 1fr;gap:6px;margin-top:8px}
.tp-schnell .mini-btn{min-height:40px;padding:0 6px}
#tp-zeit-info{margin:8px 0 0}


/* ========== Installieren-Knopf & Banner (immer erreichbar, nicht nur beim Login) ========== */
.topbar-actions{display:flex;align-items:center;gap:6px}
/* Banner sitzt über der Tab-Leiste, solange die App sichtbar ist */
#app:not(.hidden) ~ .install-banner{bottom:calc(58px + env(safe-area-inset-bottom,0px))}