/* =========================================================
   Viventra – Haupt-Styles
   ========================================================= */

/* ===== Tokens ===== */
:root{
  --bg:#fff; --text:#333; --muted:#6b7280; --border:#eee;
  --brand:#ff385c; --brand-hover:#e31c5f; --accent:#111827;
  --radius:16px; --radius-sm:12px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --shadow-sm:0 4px 12px rgba(0,0,0,.06);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --container:1200px;
}

/* ===== Base ===== */
*,
*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.45;
  font-size:16px;
}
@media (min-width:768px){ body{ font-size:17px; } }

a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
a:hover{ opacity:.9; }

/* =========================================================
   HEADER + DESKTOP NAV (so lassen)
   ========================================================= */
.main-header{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 16px;
  background:#fff; border-bottom:1px solid var(--border);
  backdrop-filter:saturate(140%) blur(6px);
}
.main-header .logo img{ height:60px; display:block; }

.nav-menu ul{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:10px;
}
.nav-menu a{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; font-weight:600; border-radius:999px;
  transition:background .2s;
}
.nav-menu a:hover{ background:#f7f7f7; }

.nav-menu .dropdown{ position:relative; }
.nav-menu .dropdown-menu{
  display:none; position:absolute; top:calc(100% + 8px); right:0; min-width:220px;
  background:#fff; border-radius:14px; box-shadow:var(--shadow); padding:6px; z-index:1000;
}
.nav-menu .dropdown:hover .dropdown-menu{ display:block; }
.nav-menu .dropdown-menu li{ padding:8px 10px; border-radius:10px; }
.nav-menu .dropdown-menu li:hover{ background:#f7f7f7; }

/* Avatar im Header IMMER klein */
.main-header .avatar img{
  width:36px; height:36px;
  max-width:36px; max-height:36px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid #ddd;
  display:block;
}

/* Utilities für Sichtbarkeit (Desktop/Mobile) */
.hide-desktop{ display:inline-flex; }
.only-desktop{ display:none; }
@media (min-width:1024px){
  .hide-desktop{ display:none!important; }
  .only-desktop{ display:block; }
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  appearance:none; border:none; cursor:pointer;
  font-weight:800; font-size:1rem;
  background:var(--brand); color:#fff;
  padding:12px 20px; border-radius:999px;
  transition:background .2s, transform .06s;
  min-height:48px;
}
.btn:hover{ background:var(--brand-hover); }
.btn:active{ transform:translateY(1px) scale(.99); }

.btn-outline{
  background:#fff; color:#333;
  border:1px solid #ddd;
  padding:12px 20px; border-radius:999px;
}
.btn-outline:hover{ background:#f7f7f7; }

.btn-cancel{
  background:#ff6666; color:#fff;
  padding:12px 18px; border-radius:999px;
}
.btn-cancel:hover{ background:#e05555; }

/* =========================================================
   LAYOUT + CARDS
   ========================================================= */
.container{ width:min(100%, var(--container)); margin:0 auto; padding:18px; }

.card,.room-card,.booking-card{
  background:#fff; border:1px solid var(--border);
  padding:18px; border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .2s ease;
}
.card:hover,.room-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.booking-card:hover{ transform:none; }

/* =========================================================
   HERO
   ========================================================= */
.hero-header{
  position:relative; height:48vh; min-height:300px;
  background:url('../assets/img/header-bg.jpg') center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff;
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.25));
  backdrop-filter:blur(4px);
}
.hero-content{ position:relative; z-index:1; padding:0 16px; }
.hero-logo{ max-width:160px; margin:0 auto 12px; }
.hero-header h1{ font-size:clamp(1.6rem, 4.5vw, 2.6rem); margin:0; letter-spacing:.2px; }
.hero-header p{ font-size:clamp(.95rem, 2.6vw, 1.15rem); opacity:.95; }

/* Small Hero (Dashboard) */
.hero-header.small{ height:30vh; min-height:280px; max-height:300px; }
.hero-avatar{
  width:96px; height:96px;
  border-radius:50%;
  object-fit:cover;
  margin-bottom:10px;
  border:3px solid #fff;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
}

/* =========================================================
   SEARCH BAR (eine Version)
   ========================================================= */
.search-bar{
  display:flex; align-items:center; gap:8px;
  margin:16px auto 0; padding:6px;
  width:min(92vw, 720px);
  background:#fff;
  border:1px solid #eee;
  border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.search-bar input{
  flex:1 1 auto; min-width:0;
  border:none; outline:none;
  padding:12px 14px;
  border-radius:999px;
  font-size:1rem;
  background:transparent;
}
.search-bar input::placeholder{ color:#9aa3af; }
.search-bar .btn{
  flex:0 0 auto;
  min-height:44px;
  padding:0 16px;
  border-radius:999px;
}
.search-bar input:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,56,92,.15);
}

/* =========================================================
   ROOMS GRID + CARD CONTENT
   ========================================================= */
.rooms{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:640px){ .rooms{ grid-template-columns:repeat(2,1fr); gap:18px; } }
@media (min-width:1024px){ .rooms{ grid-template-columns:repeat(3,1fr); gap:20px; } }

.room-card{ overflow:hidden; padding:0; border-radius:18px; }
.room-card img{ width:100%; height:220px; object-fit:cover; display:block; }
.room-info{
  padding:16px;
  display:flex; flex-direction:column;
  gap:8px;
  text-align:left;
}
.room-info h3{ margin:0; font-size:1.1rem; }
.room-info .meta{ color:var(--muted); font-size:.95rem; }

.button-group{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

/* =========================================================
   ROOM DETAIL (2 columns + sticky booking)
   ========================================================= */
.room-two-col{ display:grid; grid-template-columns:1fr; gap:16px; align-items:start; }
@media (min-width:1024px){ .room-two-col{ grid-template-columns:1.2fr .8fr; gap:24px; } }

.booking-aside{ position:static; }
@media (min-width:1200px){
  .booking-aside{ position:sticky; --header-h:64px; top:calc(var(--header-h) + 16px); }
}
.booking-card{ max-height:none; overflow:visible; padding:18px; border-radius:16px; }
@media (min-width:1200px){
  .booking-card{ max-height:calc(100vh - (var(--header-h) + 40px)); overflow:auto; }
}

/* =========================================================
   GALLERY
   ========================================================= */
.room-gallery{
  display:flex; gap:10px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
  scroll-snap-type:x mandatory;
}
.room-gallery img{
  flex:0 0 auto;
  width:80vw; max-width:480px; height:220px;
  object-fit:cover;
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  scroll-snap-align:center;
}
@media (min-width:768px){
  .room-gallery{ flex-wrap:wrap; overflow:visible; }
  .room-gallery img{ width:calc(33.333% - 10px); height:220px; scroll-snap-align:unset; }
}

/* =========================================================
   MISC
   ========================================================= */
.room-description{
  background:#fafafa;
  padding:18px;
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  margin-bottom:16px;
}

.success{ background:#e6ffed; color:#28a745; padding:10px; border-radius:10px; text-align:center; margin-bottom:12px; }
.error{ background:#ffe6e6; color:#ff0000; padding:10px; border-radius:10px; text-align:center; margin-bottom:12px; }

/* =========================================================
   CUSTOMER DASHBOARD
   ========================================================= */
.customer-dashboard{
  width:min(100%, var(--container));
  margin:18px auto;
  background:#fff;
  padding:18px;
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  text-align:center;
}
.new-booking{ text-align:center; margin-top:20px; }
.new-booking .btn{ padding:12px 22px; font-size:1rem; }

.status.confirmed{ color:#28a745; font-weight:700; }
.status.pending{ color:#ffaa00; font-weight:700; }
.status.cancelled{ color:#999; font-weight:700; }

/* =========================================================
   FOOTER
   ========================================================= */
.main-footer{
  background:#f9f9f9;
  border-top:1px solid #eee;
  padding:15px 20px;
  text-align:center;
  font-size:14px;
  color:#666;
}
.footer-container{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  gap:5px;
}
.main-footer a{ color:#ff385c; text-decoration:none; font-weight:500; }
.main-footer a:hover{ text-decoration:underline; }
.version{ font-weight:bold; color:#999; }

/* =========================================================
   MOBILE NAV (fullscreen + modern)
   ========================================================= */
.mobile-toggle,
.mobile-menu{ display:none; }

body.menu-open{ overflow:hidden; }

@media (max-width:1024px){
  .mobile-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px; height:44px;
    border-radius:999px;
    border:1px solid #eee;
    background:#fff;
    cursor:pointer;
    font-size:22px;
    box-shadow:var(--shadow-sm);
  }

  .mobile-menu{
    display:block;
    position:fixed;
    inset:0;
    z-index:2000;
    background:rgba(0,0,0,.42);
    backdrop-filter:blur(10px);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
  }
  .mobile-menu.open{
    opacity:1;
    pointer-events:auto;
  }

  .mobile-menu__nav{
    position:absolute;
    inset:0;
    background:#fff;
    padding:calc(16px + var(--safe-top)) 16px 16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    transform:translateY(10px);
    opacity:0;
    transition:transform .18s ease, opacity .18s ease;
  }
  .mobile-menu.open .mobile-menu__nav{
    transform:translateY(0);
    opacity:1;
  }

  .mobile-close{
    align-self:flex-end;
    width:44px; height:44px;
    border-radius:999px;
    border:1px solid #eee;
    background:#fff;
    cursor:pointer;
    font-size:28px;
    line-height:1;
    box-shadow:var(--shadow-sm);
  }

  .mobile-menu__nav a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px;
    border-radius:14px;
    border:1px solid #eee;
    background:#fafafa;
    font-weight:800;
    color:var(--text);
  }
  .mobile-menu__nav a:hover{ background:#f7f7f7; }
  .mobile-menu__nav a:active{ transform:translateY(1px); }
}

/* =========================================================
   RESPONSIVE POLISH
   ========================================================= */
@media (max-width:430px){
  html,body{ font-size:18.5px; }
  .main-header{ padding:10px 14px; }
  .btn,.btn-outline,.btn-cancel{ min-height:52px; padding:14px 18px; }
  .card,.room-description,.customer-dashboard{ padding:20px; border-radius:18px; }
  .room-card img{ height:210px; }
  .search-bar{ width:92vw; padding:6px; }
  .search-bar .btn{ padding:0 14px; min-height:44px; }
  .search-bar input{ padding:12px 12px; }
}
@media (max-width:360px){
  .search-bar .btn{ width:44px; padding:0; }
  .search-bar .btn span{ display:none; }
}
@media (min-width:768px){
  .container{ padding:24px; }
}
@media (min-width:1024px){
  .main-header{ padding:12px 24px; }
  .container{ padding:24px; }
}

/* =========================================================
   PRINT (langfristig: in admin_style.css)
   ========================================================= */
@media print{
  @page{ size:A4 portrait; margin:12mm; }
  body *{ visibility:hidden !important; }
  .print-area, .print-area *{ visibility:visible !important; }
  .print-area{ width:100% !important; margin:0 !important; padding:0 !important; }
  header, footer, nav, .main-header, .no-print{ display:none !important; }
  html, body{ background:#fff !important; color:#000 !important; font-family:Arial, sans-serif; font-size:12pt; line-height:1.4; }
  .card{ box-shadow:none !important; border:none !important; padding:0 !important; max-width:100% !important; margin:0 !important; }
  a[href]:after{ content:""; }
}