/* ═══════════════════════════════════════════════════════════════
   Guidebook „Hub"-Layout (Freigabe Ivan 2026-07-26) — ergänzt
   style.css. Kompakt-Header + Icon-Kachel-Hub + Kompakt-Zeilen;
   Notfälle/Wichtigstes/Willkommen/Footer behalten ihre style.css-
   Optik unverändert. Mobile-first (Guidebook wird am Telefon gelesen).
   ═══════════════════════════════════════════════════════════════ */

/* ── Kompakt-Cover: schmales Bildband statt 100vh ─────────────── */
.hub-cover {
  position: relative;
  height: clamp(200px, 34svh, 320px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.hub-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hub-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 13, 31, 0.42) 0%, rgba(6, 13, 31, 0.05) 45%, rgba(6, 13, 31, 0.55) 100%);
}
.hub-cover-text {
  position: relative;
  z-index: 1;
  padding: 0 1.25rem 1.1rem;
  max-width: 76rem;
  margin: 0 auto;
  width: 100%;
}
.hub-cover h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 5.5vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(6, 13, 31, 0.5);
  margin: 0 0 0.5rem;
}
.hub-cover h1 em { font-style: italic; color: var(--color-gold-light); }
.hub-cover-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.hub-cover-chips > * {
  font-size: 0.72rem;
  color: #fff;
  background: rgba(6, 13, 31, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
}

/* ── Hub: Icon-Kacheln ────────────────────────────────────────── */
.hub-section { padding: 1.4rem 1.25rem 0.6rem; }
.hub-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.45rem, 4.5vw, 2rem);
  letter-spacing: -0.02em;
  margin: 0 0 0.25rem;
}
.hub-sub { color: var(--color-text-secondary, #4a5468); font-size: 0.88rem; margin: 0 0 1rem; }
.hub-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
}
@media (min-width: 40rem) { .hub-tiles { grid-template-columns: repeat(5, 1fr); } }
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  aspect-ratio: 1;
  border: 1px solid var(--color-border-light);
  border-radius: 14px;
  background: var(--color-day-elevated, #fff);
  text-decoration: none;
  color: var(--color-night-base);
  font-size: 0.72rem;
  font-weight: 650;
  text-align: center;
  padding: 0.4rem;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.tile:hover { border-color: var(--color-gold); box-shadow: 0 10px 24px -14px rgba(10, 19, 48, 0.35); }
.tile:active { transform: scale(0.96); }
.tile svg { width: 24px; height: 24px; color: var(--color-gold-deep); }
.tile-sos { background: #fdf3e0; border-color: var(--color-gold); }

/* ── Sektionen kompakter takten ───────────────────────────────── */
section .section-inner { padding-left: 1.25rem; padding-right: 1.25rem; }
#willkommen, #wichtigstes, #hausregeln, #einkaufen, #restaurants,
#straende, #sehenswuerdiges, #aktivitaeten { padding: 1.9rem 0 0.4rem; }
.hgroup {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  margin: 1.3rem 0 0.5rem;
}
.hgroup svg { width: 17px; height: 17px; color: var(--color-gold-deep); flex: 0 0 auto; }
.hgroup-note { font-size: 0.82rem; color: var(--color-text-secondary, #4a5468); margin: -0.2rem 0 0.6rem; }

/* ── Kompakt-Zeile ────────────────────────────────────────────── */
.hrow {
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  background: var(--color-day-elevated, #fff);
  margin-bottom: 0.45rem;
  overflow: hidden;
}
.hrow > summary {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.75rem;
  min-height: 48px;
  cursor: pointer;
  list-style: none;
}
.hrow > summary::-webkit-details-marker { display: none; }
.hrow-lead {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--color-day-sand);
  display: grid;
  place-items: center;
  color: var(--color-gold-deep);
  overflow: hidden;
}
.hrow-lead svg { width: 17px; height: 17px; }
.hrow-logo { background: #fff; border: 1px solid var(--color-border-light); }
.hrow-logo img { width: 28px; height: 28px; object-fit: contain; }
.hrow-main { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.hrow-name { font-weight: 650; font-size: 0.925rem; line-height: 1.2; }
.hrow-sub { font-size: 0.72rem; color: var(--color-gold-deep); }
.hrow-meta {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.68rem;
  color: var(--color-text-secondary, #4a5468);
  text-align: right;
  white-space: nowrap;
  flex: 0 0 auto;
}
.hrow-chev { width: 16px; height: 16px; color: var(--color-gold-deep); flex: 0 0 auto; transition: transform 0.25s; }
.hrow[open] > summary .hrow-chev { transform: rotate(180deg); }
.hrow-body { padding: 0.15rem 0.85rem 0.85rem 3.4rem; }
@media (max-width: 26rem) { .hrow-body { padding-left: 0.85rem; } }
.hrow-tagline { font-size: 0.85rem; color: var(--color-text-secondary, #4a5468); line-height: 1.55; margin: 0 0 0.5rem; }
.hrow-body p { font-size: 0.85rem; line-height: 1.6; margin: 0 0 0.5rem; }

/* Original-.place-meta im aufgeklappten Zustand etwas straffen */
.hrow-body .place-meta { margin-top: 0.25rem; }
.hrow-body .place-hours { margin-top: 0.4rem; }

/* ── Hausordnung als Sektion III (Regelgruppen aus dem Anhang) ── */
.rules-stack details { margin-bottom: 0.45rem; }

/* ── Schwebender Zurück-zum-Hub-Knopf ─────────────────────────── */
.hub-up {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: none;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-night-base);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 0.65rem 1rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 12px 28px -10px rgba(6, 13, 31, 0.5);
}
.hub-up.show { display: inline-flex; }
.hub-up svg { width: 14px; height: 14px; transform: rotate(180deg); }

/* ── Premium-Sprachwähler (Topbar) ────────────────────────────── */
.lang-menu { position: relative; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  min-height: 44px;
  border: 1px solid var(--color-border-light);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-day-elevated, #fff) 78%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-night-base);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.lang-btn:hover { border-color: var(--color-gold); box-shadow: 0 8px 20px -12px rgba(10, 19, 48, 0.35); }
.lang-btn svg { width: 16px; height: 16px; color: var(--color-gold-deep); }
.lang-btn .lang-chev { width: 13px; height: 13px; color: var(--color-night-base); transition: transform 0.25s; }
.lang-menu.open .lang-btn .lang-chev { transform: rotate(180deg); }

.lang-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(6, 13, 31, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s;
}
.lang-menu.open .lang-backdrop { opacity: 1; pointer-events: auto; }

.lang-sheet {
  position: fixed;
  z-index: 80;
  inset-inline: 0.75rem;
  bottom: 0.75rem;
  background: var(--color-day-elevated, #fff);
  border: 1px solid var(--color-border-light);
  border-radius: 20px;
  box-shadow: 0 32px 64px -24px rgba(6, 13, 31, 0.5);
  padding: 1rem 0.9rem 0.9rem;
  opacity: 0;
  transform: translateY(14px) scale(0.99);
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.lang-menu.open .lang-sheet { opacity: 1; transform: none; pointer-events: auto; }
html.lang-open { overflow: hidden; }

.lang-sheet-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin: 0 0.25rem 0.6rem;
}
.lang-opt {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.62rem 0.6rem;
  min-height: 44px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--color-night-base);
}
.lang-opt:hover { background: var(--color-day-sand); }
.lang-opt img {
  width: 22px;
  height: 15px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--color-border-light);
  flex: 0 0 auto;
}
.lang-native { font-size: 0.9rem; font-weight: 600; }
.lang-code { margin-left: auto; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; color: var(--color-gold-deep); }
.lang-opt.is-active {
  background: var(--color-day-sand);
  box-shadow: inset 0 0 0 1px var(--color-gold);
}
.lang-opt.is-active .lang-native::after {
  content: "✓";
  margin-left: 0.4rem;
  color: var(--color-gold-deep);
}

/* Desktop: Dropdown statt Bottom-Sheet */
@media (min-width: 40rem) {
  .lang-sheet {
    position: absolute;
    inset-inline: auto;
    right: 0;
    top: calc(100% + 0.5rem);
    bottom: auto;
    width: 16.5rem;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
  }
  .lang-menu.open .lang-sheet { transform: none; }
  .lang-backdrop { display: none; }
  html.lang-open { overflow: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .tile, .hrow-chev, .lang-sheet, .lang-backdrop, .lang-btn .lang-chev { transition: none; }
}