/* /root/marciverse/2_frontend/haarwerk/static/styles.css */
/*  ======================================================================
    1 | FONTS
    =================================================================== */
@font-face{font-family:'WorkSans-Regular';src:url('/static/WorkSans-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'WorkSans-ExtraBold';src:url('/static/WorkSans-ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}
/*  ======================================================================
    2 | THEME VARIABLES (ONLY USE THESE COLORS)
    =================================================================== */
:root {
  /* Typography */
  --font-primary: 'WorkSans-ExtraBold', sans-serif;
  --font-secondary: 'WorkSans-Regular', sans-serif;

  /* Brand & palette */
  --accent: #A98B75;                        /* gesetzt */
  --accent-hover: rgba(169,139,117,0.8);    /* dunklere, warme Variante des Accents */
  --accent-ghost: rgba(169,139,117,0.12);   /* Accent als zarter Wash */

  /* Base & section backgrounds */
  --bg: #F0E9E4;        /* Seitenhintergrund */
  --surface: #F0E9E4;   /* 1., 3., 5. Section (odd) */
  --surface-2: #EADFD9; /* 2., 4., 6. Section (even) */
  --surface-3: #F9F7F3; /* helle Karten/Flächen */

  --text: #2F2A26;      /* warmes, weiches Dunkelbraungrau */
  --muted: #6F665E;     /* warmes Mittelgrau */
  --muted-2: #9B9085;   /* helleres warmes Grau */

  --border: #E6E0DA;
  --shadow: 0 10px 30px rgba(0,0,0,0.08);

  --overlay-dark: rgba(0,0,0,0.40);

  /* 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) */
  --color-bg-info-header: #CFBBAF;  /* NEU */
  --color-fg-info-header: var(--text);

  /* Navbar */
  --navbar-bg-color: #F0E9E4;       /* explizit gemäß Wunsch */
  --navbar-text-color: var(--text);

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

  /* Footer */
  --footer-bg-color: #F7F4F1;       /* fast weiß, minimal dunkler */
  --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);
  font-weight: 800;            /* Bold */
  letter-spacing: -0.02em;     /* engeres Tracking */
  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;
}

/* === Auto-Striping für Sections im <main> =========================== */
main > section.section { 
  background: var(--surface);
}

/* Jede zweite Section bekommt Surface-2 */
main > section.section:nth-of-type(even) {
  background: var(--surface-2);
}

/* Opt-out / Opt-in, falls du mal bewusst abweichen willst */
main > section.section.force-surface      { background: var(--surface)      !important; }
main > section.section.force-surface-2    { background: var(--surface-2)    !important; }
main > section.section.no-stripe          { background: transparent         !important; }


/*  ======================================================================
    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: 0; /* Linie nicht mehr über die volle Breite */
  backdrop-filter: saturate(150%) blur(6px);
  box-shadow: var(--shadow); /* ← Drop Shadow bleibt */
}

.navbar__inner {
  height: 100%;
  display:flex; align-items:center; justify-content:space-between;
  position: relative; /* für das Pseudo-Element */
}

/* dezenter Trennstrich leicht über dem unteren Rand der Navbar,
   also optisch direkt unter den Inhalten */
.navbar__inner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;                 /* ← Abstand zum unteren Rand der Navbar */
  height: 1px;
  background: var(--accent-hover);   /* dezenter Strich in deiner Border-Farbe */
  pointer-events: none;
}

.navbar__brand {
  font-family: var(--font-primary);
  font-size: 1.4rem;
  letter-spacing:.2px;
  font-weight: 800; /* bold */
}
.navbar__menu {
  display:flex; gap:.25rem; align-items:center;
}
.navbar__menu a {
  padding:.5rem .75rem; border-radius: 10px;
  transition: background .2s ease;
  font-weight: 700; /* bold */
}
.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(70vh - var(--topbar-h) - var(--navbar-h)));
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
  /* ▶ Gap links/rechts durch Außenabstand, Hintergrund der Seite bleibt sichtbar */
  margin-inline: clamp(12px, 3vw, 24px);
  /* ▶ Abgerundete Ecken und saubere Maskierung für Overlay & Bild */
  border-radius: 18px;
  overflow: hidden;
  /* optional: leichter Schatten wie im Screenshot */
  box-shadow: var(--shadow);

  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.8rem, 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');

  /* ▶ gleicher Seiten-Gap + Corner Radius */
  margin-inline: clamp(12px, 3vw, 24px);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.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: 10px; /* eckiger, wie im Hero */
  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);
}

/* Hero-spezifischer, größerer Button (Radius erbt von .btn) */
.btn--hero {
  padding: 1rem 1.25rem;              /* größer */
  font-size: clamp(1rem, 1.2vw, 1.05rem);
  letter-spacing: -0.01em;            /* minimal enger, wirkt kompakter */
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}



/*  ======================================================================
    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-3);
  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-3); 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 {
  padding-bottom: clamp(2rem, 5vw, 4rem); /* extra Abstand nach unten */
}

.location__title {
  text-align: center;
  margin: 0 0 1.25rem;
}

.location__grid {
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: 1.1fr 1fr;   /* Map etwas größer als Text */
  align-items: center;                 /* rechter Content mittig zum Map-Block */
}

/* Quadratische, responsive Map */
.location__mapwrap {
  width: 100%;
  aspect-ratio: 12 / 10;                /* quadratisch */
  max-width: 560px;                    /* optional: begrenzen wie im Screenshot */
}
.location__map {
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Panel rechts */
.location__panel {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  color: var(--text);
  align-self: center;   /* mittig in der Zeile (gleich viel Platz oben/unten) */
}

.location__panel h3 {
  font-family: var(--font-primary);
  margin: .25rem 0 .3rem;
}
.location__panel p {
  margin: 0 0 .35rem;
  color: var(--muted);
}

/* Öffnungszeiten-Status (dezent, linksbündig) */
.location__status { margin-bottom: .25rem; }
.location__statusBtn {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; display: inline-flex; align-items: center; gap: .45rem;
  cursor: pointer; color: var(--muted);
}
.location__statusBtn:hover { text-decoration: underline; }
.location__statusDot {
  display: inline-block; width: .55rem; height: .55rem; border-radius: 10px;
  background: #9CA3AF;
}

/* Responsive: untereinander anordnen */
@media (max-width: 1024px) {
  .location__grid { grid-template-columns: 1fr; }
  .location__mapwrap { max-width: none; }
}


/*  ======================================================================
    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-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem;
}
.job-card h3 { margin-bottom:.35rem; }
.job-card p { color: var(--muted); }


/*  ======================================================================
    16a | TEAM
    =================================================================== */
.team { /* section--alt liefert already den hellen Panel-Hintergrund */ }

.team__title {
  text-align: center;
  margin: 0 0 1.5rem;
}
a

/* Bullets aus nur im Team-Block */
.team ul,
.team li { list-style: none; }

ul.team__list {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
}
ul.team__list > li.team__item { margin: 0; }

.team__item {
  text-align: center;
  padding: clamp(.5rem, 1vw, .75rem);
}

.team__avatar {
  width: clamp(120px, 16vw, 160px);
  height: clamp(120px, 16vw, 160px);
  margin: 0 auto .85rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.team__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team__name {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  margin-bottom: .15rem;
}

.team__role {
  color: var(--muted-2);
  font-size: .95rem;
  margin-bottom: .35rem;
}

.team__bio {
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.5;
  max-width: 32ch;
  margin: 0 auto;
}

/* Responsive: 2 Spalten / 1 Spalte */
@media (max-width: 960px) {
  ul.team__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  ul.team__list { grid-template-columns: 1fr; }
}
/*  ======================================================================
  16c | UEBER-UNS v7 (Text links, quadratisches Bild rechts)
=================================================================== */

.about7__grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;             /* Text minimal breiter */
  gap: clamp(1.2rem, 3vw, 2.2rem);
  align-items: center;                            /* vertikal mittig wie im Screenshot */
}

.about7__text h2{
  margin: 0 0 .8rem;
}

.about7__text p{
  color: var(--muted);
  max-width: 62ch;
}

.about7__media{
  justify-self: end;                              /* Bild rechts bündig */
}

.about7__media img{
  display:block;
  width: 100%;
  aspect-ratio: 1 / 1;                            /* quadratisch */
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Responsive: untereinander, Bild mittig */
@media (max-width: 1024px){
  .about7__grid{
    grid-template-columns: 1fr;
  }
  .about7__media{
    justify-self: center;
  }
  .about7__media img{
    max-width: 640px;                              /* angenehme max-Breite mobil */
  }
}



/*  ======================================================================
    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
    =================================================================== */

/* Mehr Luft NUR ab Desktop für ausgewählte Sections */
@media (min-width: 1024px) {
  .u-desktop-roomy {
    padding-top: clamp(3.75rem, 6vw, 7rem) !important;
    padding-bottom: clamp(3.75rem, 6vw, 7rem) !important;
  }
}

    /* 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;
  }
}

/*  ======================================================================
    16d | FSERVICE (HAARWERK ZB) TERMINE IM FRONTEND DER WEBSITE
    =================================================================== */

/* === Booking (Haarwerk) – Feintuning =================================== */
#booking-inline .flow { margin-top: 1rem; }

/* 2-spaltige Summary nur Desktop, mobil gestapelt */
#booking-inline .summary-grid { grid-template-columns: 1.2fr 1fr; }
@media (max-width: 840px) {
  #booking-inline .summary-grid { grid-template-columns: 1fr; }
}

/* Weekday/Date immer zweizeilig (Safety) */
#booking-inline .wk-col__head .wk-day,
#booking-inline .wk-col__head .wk-date { display: block; }

/* klare Markierung des gewählten Slots */
#booking-inline .slot-btn.is-selected {
  border-color: var(--accent);
  background: var(--accent-ghost);
  color: var(--accent);
}

/* Links in der Datenschutz-Checkbox immer unterstrichen */
#booking-inline .checkbox a { text-decoration: underline; }

/* Erfolgsmeldung visuell stärker */
#booking-inline .success-msg {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: .35rem;
}