/* /root/marciverse/2_frontend/zum-herzogshof/static/styles.css */
/*  ======================================================================
    1 | FONTS
    =================================================================== */
@font-face{font-family:'Lato';src:url('/static/Lato-Black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url('/static/Lato-BlackItalic.ttf') format('truetype');font-weight:900;font-style:italic;font-display:swap}
@font-face{font-family:'Lato';src:url('/static/Lato-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url('/static/Lato-BoldItalic.ttf') format('truetype');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Lato';src:url('/static/Lato-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Lato';src:url('/static/Lato-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url('/static/Lato-LightItalic.ttf') format('truetype');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Lato';src:url('/static/Lato-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url('/static/Lato-Thin.ttf') format('truetype');font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url('/static/Lato-ThinItalic.ttf') format('truetype');font-weight:100;font-style:italic;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/static/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/static/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype');font-weight:100 900;font-style:italic;font-display:swap}

/*  ======================================================================
    2 | THEME VARIABLES (ONLY USE THESE COLORS)
    =================================================================== */
:root {
  /* Typography */
  --font-primary: 'Playfair Display', serif;
  --font-secondary: 'Lato', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Brand & palette */
  --accent: #c66a2b;
  --accent-hover: #a75722;
  --accent-ghost: rgba(198,106,43,.12);

  --bg: #faf7f2;
  --surface: #ffffff;
  --surface-2: #f6f2ec;
  --text: #1f2937;
  --muted: #6b7280;
  --muted-2: #9aa1ad;

  --border: #e5e7eb;
  --shadow: 0 10px 30px rgba(0,0,0,.08);

  --overlay-dark: rgba(0,0,0,.45);

  /* Legacy aliases used by templates */
  --icon-color: var(--accent);
  --icon-color-hover: var(--accent-hover);

  --button-color: var(--accent);
  --button-color-hover: var(--accent-hover);
  --button-text-color: #ffffff;

  --cta-button-color: var(--accent);
  --cta-button-color-hover: var(--accent-hover);
  --cta-button-text-color: #ffffff;

  --color-bg-general-first: var(--surface);
  --color-bg-general-second: var(--surface-2);

  /* Info-Header (Top-Bar) – keep black as requested */
  --color-bg-info-header: #000000;
  --color-fg-info-header: #ffffff;

  /* Navbar */
  --navbar-bg-color: var(--surface);
  --navbar-text-color: var(--text);

  /* Welcome */
  --welcome-bg-color: var(--surface);
  --welcome-text-color: var(--text);

  /* Footer */
  --footer-bg-color: var(--surface);
  --footer-text-color: var(--text);

  /* Sizing */
  --topbar-h: 3vh;
  --navbar-h: 90px;
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 22px;
}

/*  ======================================================================
    3 | RESET & BASE
    =================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; height: 100%; }
body {
  margin: 0;
  font-family: var(--font-secondary);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Sticky-Footer ohne fixed: Body als Flex-Spalte */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-primary);
  margin: 0 0 .5em;
  line-height: 1.2;
}
p { margin: 0 0 0.45rem; }

.visually-hidden {
  position:absolute!important; width:1px;height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; clip-path: inset(50%); border:0; padding:0; margin:-1px;
}

/*  ======================================================================
    4 | LAYOUT UTILITIES
    =================================================================== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
.section {
  padding: clamp(2rem, 3vw, 4rem) 0;
}
.section--alt { background: var(--color-bg-general-second); }
.grid {
  display: grid;
  gap: 1rem;
}

/*  ======================================================================
    5 | TOP BAR (INFO HEADER)
    =================================================================== */
.top-bar {
  display:flex; justify-content:center; align-items:center;
  height: var(--topbar-h);
  background: var(--color-bg-info-header);
  color: var(--color-fg-info-header);
  font-family: var(--font-secondary);
  font-size: .9rem;
}
.top-bar span { display:flex; align-items:center; margin:0 .5rem; }
.top-bar .separator { margin: 0 .5rem; }
.top-bar i { margin-right:.35rem; }

/*  ======================================================================
    6 | NAVBAR
    =================================================================== */
.navbar {
  position: sticky; top: 0; z-index: 1000;
  background: var(--navbar-bg-color);
  color: var(--navbar-text-color);
  height: var(--navbar-h);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(150%) blur(6px);
  box-shadow: var(--shadow); /* ← Drop Shadow hinzufügen */
}

.navbar__inner {
  height: 100%;
  display:flex; align-items:center; justify-content:space-between;
}
.navbar__brand {
  font-family: var(--font-primary);
  font-size: 1.4rem;
  letter-spacing:.2px;
}
.navbar__menu {
  display:flex; gap:.25rem; align-items:center;
}
.navbar__menu a {
  padding:.5rem .75rem; border-radius: 999px;
  transition: background .2s ease;
}
.navbar__menu a:hover { background: var(--accent-ghost); text-decoration:none; }
.navbar__menu a.active { background: var(--accent); color: #fff; }

.navbar__toggle {
  display:none;
  background: transparent; border:1px solid var(--border);
  border-radius: 10px; padding:.4rem .6rem; cursor:pointer;
}

/*  ======================================================================
    7 | HERO
    =================================================================== */
.hero {
  position: relative;
  min-height: var(--hero-height, calc(100vh - var(--topbar-h) - var(--navbar-h)));
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}
.hero::before {
  content:"";
  position:absolute; inset:0;
  background: var(--hero-overlay, var(--overlay-dark));
  z-index: 0;
  pointer-events: none;
}
.hero::after { pointer-events: none; }
.hero__content {
  position:relative; z-index:1; text-align:center; color: var(--button-text-color);
  width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 0 1rem;
}
.hero__title { font-size: clamp(2.2rem, 5vw, 3.5rem); margin-bottom: .75rem; }
.hero__lead  { font-size: clamp(1.1rem, 2.2vw, 1.3rem); margin-bottom: 1.5rem; opacity:.95; }

/*  ======================================================================
    7.1 | HERO VARIANTS (Split & Video)
    =================================================================== */

/* --- Split-Variante (Bild rechts, Text links) ----------------------- */
.hero--split {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(70vh - var(--topbar-h) - var(--navbar-h));
  background-color: var(--welcome-bg-color);
  color: var(--button-text-color);
  --hero-overlay: var(--overlay-dark);
  --hero-image: url('/static/index-background.jpg');
}
.hero__split {
  width: 100%;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
}
/* Inhalt über dem Overlay */
.hero > .container,
.hero__split,
.hero__left,
.hero__right,
.hero__content {
  position: relative;
  z-index: 1;
}
.hero--split .hero__title { color: var(--button-text-color); }
.hero--split .hero__lead  { color: var(--button-text-color); opacity: .95; margin-bottom: 1.25rem; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* Kreisförmiges Hero-Bild mit sanfter Rotation */
.hero__image-circle {
  display: block;
  width: clamp(240px, 40vw, 420px);
  height: clamp(240px, 40vw, 420px);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.hero__image-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: hero-spin 50s linear infinite;
}

/* --- Video-Variante -------------------------------------------------- */
.hero--video {
  position: relative;
  min-height: calc(92vh - var(--topbar-h) - var(--navbar-h));
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero--video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero--video .hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--button-text-color);
}

/* Scroll-Indikator */
.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  background: transparent;
  border: 0;
  padding: .25rem;
  font-size: 2rem;
  color: var(--surface);
  cursor: pointer;
  animation: hero-bounce 2s infinite;
}

/* --- Motion & A11y --------------------------------------------------- */
@keyframes hero-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes hero-bounce {
  0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
  40% { transform: translate(-50%, -10px); }
  60% { transform: translate(-50%, -5px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__image-circle img { animation: none; }
  .hero__scroll { animation: none; }
}

/* --- Responsive Tweaks ---------------------------------------------- */
@media (max-width: 1024px) {
  .hero__split { grid-template-columns: 1fr; }
  .hero--split { min-height: auto; padding: clamp(2rem, 3vw, 3rem) 0; }
  .hero__image-circle { margin: 0 auto; }
}
@media (max-width: 520px) {
  .hero__scroll { font-size: 1.6rem; bottom: 1.5rem; }
}

/*  ======================================================================
    8 | BUTTONS
    =================================================================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .75rem 1.1rem;
  line-height:1;
  cursor:pointer;
  transition: transform .06s ease, background .2s ease, border-color .2s ease, color .2s ease;
  will-change: transform;
}
.btn:active { transform: translateY(1px) scale(.99); }

.btn--primary {
  background: var(--button-color);
  color: var(--button-text-color);
}
.btn--primary:hover { background: var(--button-color-hover); }

.btn--ghost {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
.btn--ghost:hover { background: var(--accent-ghost); }

.btn--light {
  background: #ffffff; color: var(--text);
  border-color: var(--border);
}
.btn--light:hover { background: var(--color-bg-general-second); }

/* Hervorhebung für ausgewählten Slot */
.btn--light.is-selected {
  border-color: var(--accent);
  background: var(--accent-ghost);
  color: var(--accent);
}

/*  ======================================================================
    9 | WELCOME SECTION
    =================================================================== */
.welcome { background: var(--welcome-bg-color); color: var(--welcome-text-color); }
.welcome__wrap { display:grid; gap:1.25rem; align-items:center; grid-template-columns: 1.1fr 1fr; }
.welcome__media img { border-radius: var(--radius); box-shadow: var(--shadow); }
.welcome__title { font-size: clamp(2rem,3.2vw,2.6rem); margin-bottom:.5rem; }
.welcome__text  { color: var(--muted); font-size: 1.05rem; margin-bottom:1.25rem; }
/* Buttons in Welcome konsistent zum Hero */
.welcome__actions { display:flex; flex-wrap:wrap; gap:.75rem; }
/* Werte-Kacheln: responsiv ohne Overflow */
.welcome__values {
  display: grid;
  gap: .6rem;
  margin: .9rem 0 1.1rem;
  /* passt Spaltenanzahl automatisch an – kein horizontales Überlaufen */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}


/*  ======================================================================
    10 | MENU (Speisekarte)
    =================================================================== */
.menu { }
.menu__controls { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.select {
  appearance:none; padding:.6rem .9rem; border:1px solid var(--border);
  border-radius: 12px; background: var(--surface);
}
.menu-list { list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.75rem; }
.menu-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .9rem 1rem;
  display:grid; grid-template-columns: 1fr auto;
  gap:.5rem; align-items:start;
}
.menu-item__name { font-weight:700; }
.menu-item__desc { grid-column:1 / -1; color: var(--muted); font-size:.98rem; }
.menu-item__price { font-weight:700; white-space:nowrap; font-variant-numeric: tabular-nums; }
.menu-item__dots {
  grid-column: 1 / -1;
  height:1px; background: repeating-linear-gradient(90deg,var(--border),var(--border) 6px,transparent 6px,transparent 10px);
  opacity:.9; margin:.3rem 0 .2rem;
}

/*  ======================================================================
    11 | FORMS (contact, reservation, jobs)
    =================================================================== */
.form { display:grid; gap: .45rem; max-width: 560px; }
.label { display:block; font-weight:600; margin-bottom:.25rem; }
.input, .textarea, .select, input[type="date"], input[type="time"], input[type="number"] {
  width:100%;
  padding:.75rem .9rem;
  border:1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
}
.textarea { min-height: 140px; resize: vertical; }
.checkbox { display:flex; gap:.5rem; align-items:flex-start; }
.form-status { min-height: 1.2em; font-size:.95rem; color: var(--muted); }
.input:focus, .textarea:focus, .select:focus { outline:2px solid var(--accent-ghost); border-color: var(--accent); }

/*  ======================================================================
    12 | DIALOG (Jobs Bewerbung)
    =================================================================== */
dialog { border:none; border-radius: 18px; padding:0; width:min(680px, 92vw); box-shadow: var(--shadow); }
.dialog {
  background: var(--surface); border-radius: 18px; padding: 1.25rem;
  border:1px solid var(--border);
  color: var(--text);
}
.dialog .label { color: var(--text); }
.dialog__header { margin-bottom:.75rem; }
.dialog__fieldset { margin:.5rem 0 0; padding:.75rem; border:1px solid var(--border); border-radius:12px; }
.dialog__actions { display:flex; justify-content:flex-end; gap:.5rem; margin-top: 1rem; }
.btn--muted { background: var(--color-bg-general-second); color: var(--text); border-color: var(--border); }
.btn--muted:hover { background: var(--surface); }

/*  ======================================================================
    13 | NEWS
    =================================================================== */
.news-list { list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.75rem; }
.news-item {
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .9rem 1rem;
}
.news-item strong { color: var(--muted-2); font-weight:700; margin-right:.35rem; display:inline-block; }

/*  ======================================================================
    14 | LOCATION
    =================================================================== */
.location { }
.location__map {
  width:100%; border:0; height: 420px; border-radius: var(--radius); box-shadow: var(--shadow);
}
.location__info {
  margin-top: 1rem; display:flex; flex-direction:column; gap:.4rem; text-align:center; color: var(--footer-text-color);
}
.location__info span { display:flex; align-items:center; justify-content:center; gap:.6rem; }
.location__info i { color: var(--icon-color); }

/*  ======================================================================
    15 | FOOTER
    =================================================================== */
.footer {
  background: var(--footer-bg-color);
  color: var(--footer-text-color);
  padding: 2.2rem 1rem;
  margin-top: auto;
}
.footer__wrap {
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  max-width:1200px; margin:0 auto;
}
.footer__col { flex: 1 1 260px; }
.footer__col h3 { font-family: var(--font-primary); margin-bottom: .8rem; }
.footer__links { list-style:none; padding:0; margin:0; display:grid; gap:.45rem; }
.footer__socials { display:flex; gap:.6rem; margin-bottom:.8rem; }
.footer__socials i { font-size:1.35rem; color: var(--icon-color); transition: transform .15s ease; }
.footer__socials i:hover { transform: scale(1.08); color: var(--icon-color-hover); }
/* kompaktere p-Abstände im Footer */
.footer p { margin: .2rem 0; }

/*  ======================================================================
    16 | JOBS SECTION
    =================================================================== */
.jobs { }
.jobs__list { list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:1rem; }
.job-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem;
}
.job-card h3 { margin-bottom:.35rem; }
.job-card p { color: var(--muted); }

/*  ======================================================================
    17 | RESPONSIVE
    =================================================================== */
@media (max-width: 1024px) {
  .welcome__wrap { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .hero__lead { font-size: 1rem; }
  .location__map { height: 340px; }
}

/*  ======================================================================
    18 | RESERVIERUNG – Layoutanpassungen für Personen/Datum & Slot-Buttons
    =================================================================== */
#reservierungen2 .fields {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: .25rem;
  max-width: 280px;
}
#reservierungen2 .field {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
#reservierungen2 .field .label { margin: 0; }
#reservierungen2 .field .input { width: 100%; flex: none; }
/* Fokus/Active States für bessere Usability der Slots */
#reservierungen2 #slots .btn { width: 100%; }
#reservierungen2 #slots .btn:focus { outline: 2px solid var(--accent-ghost); outline-offset: 2px; }

/*  ======================================================================
    19 | MOBILE & A11Y UPGRADE
    =================================================================== */

/* Basis-Mobile-Verbesserungen */
html {
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topbar-h) + var(--navbar-h) + 12px);
}
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@supports(padding:max(0px)) {
  body {
    padding-left:  max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}
.container { padding-left: clamp(16px, 4vw, 24px); padding-right: clamp(16px, 4vw, 24px); }
.btn { min-height: 44px; padding: .85rem 1.1rem; }
@media (pointer: coarse) { .btn { min-height: 48px; } }
/* Body-Scroll-Lock wenn Mobile-Menü offen */
body.no-scroll { overflow: hidden; }
/* Inputs: iOS-Zoom verhindern */
.input, .textarea, .select,
input[type="date"], input[type="time"], input[type="number"], input[type="email"], input[type="tel"] {
  font-size: 16px;
}
/* Menülisten: sehr kleine Screens */
@media (max-width: 420px) {
  .menu-item { grid-template-columns: 1fr; }
  .menu-item__dots { display: none; }
  .menu-item__price { justify-self: start; margin-top: .15rem; }
}
/* Performance: nur sichtbaren Content layouten */
@supports (content-visibility: auto) {
  .section { content-visibility: auto; contain-intrinsic-size: 1px 800px; }
}

/* Top-Bar (Info-Header): auf Handys komplett ausblenden und Höhe neutralisieren */
@media (max-width: 720px) {
  :root { --topbar-h: 0px; }         /* verhindert unnötigen Scroll-/Hero-Offset */
  .top-bar { display: none !important; }
}

/* Navbar: mobile-first, ohne Lücke unter der Navbar */
.navbar__toggle { display: block; }
.navbar__menu {
  position: absolute;                 /* an die Navbar gekoppelt */
  top: 100%;                          /* direkt unter dem unteren Rand der Navbar */
  left: 0;
  right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: none;
  flex-direction: column;
  gap: .25rem;
  padding: .5rem;
  color: var(--text);
  z-index: 1001;                      /* über dem Seiteninhalt */
  max-height: calc(100svh - var(--navbar-h));  /* langes Menü scrollbar */
  overflow: auto;
}
.navbar.is-open .navbar__menu { display: flex; }

/* Ab Desktop: wieder inline */
@media (min-width: 861px) {
  .navbar__toggle { display: none; }
  .navbar__menu {
    position: static;
    display: flex !important;
    flex-direction: row;
    gap: .25rem;
    padding: 0;
    border-top: 0;
    background: transparent;
    color: var(--navbar-text-color);
    max-height: none;
    overflow: visible;
  }
}