/* /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 – Dark Mode (clean, modern, neutral “inverted”) */
  --accent: #F9FAFB;                        /* heller Akzent (Buttons, aktive Nav) */
  --accent-hover: #E5E7EB;                  /* etwas dunkler für Hover */
  --accent-ghost: rgba(249,250,251,0.08);   /* dezenter Wash auf dunklen Flächen */

  /* Base & section backgrounds (Dark-Theme) */
  --bg: #0B0F19;          /* Seitenhintergrund: sehr dunkel, leicht blau-anthrazit */
  --surface: #0F172A;     /* Standard-Sections */
  --surface-2: #0B1224;   /* Alternate Sections (minimal dunkler/anders) */
  --surface-3: #111C33;   /* Karten / Boxen (leicht angehoben) */

  /* Text */
  --text: #F9FAFB;        /* Primärtext */
  --muted: #CBD5E1;       /* Sekundärtext (ruhig, gut lesbar) */
  --muted-2: #94A3B8;     /* dezenter Text (Labels, Hilfstexte) */

  --border: rgba(248,250,252,0.10);         /* feine helle Linien im Dark */
  --shadow: 0 18px 45px rgba(0,0,0,0.55);

  --overlay-dark: rgba(2, 6, 23, 0.62);     /* für Hero/Subhero-Overlay */

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

  /* Buttons (helle Pillen auf dunklem Hintergrund) */
  --button-color: var(--accent);
  --button-color-hover: var(--accent-hover);
  --button-text-color: #0B0F19;             /* dunkler Text auf hellem Button */

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

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

  /* Info-Header (Top-Bar) – dunkel, klare Lesbarkeit */
  --color-bg-info-header: #F9FAFB;
  --color-fg-info-header: #0B0F19;

  /* Navbar – dunkel, leicht translucent */
  --navbar-bg-color: rgba(15, 23, 42, 0.94);
  --navbar-text-color: #F9FAFB;

  /* Welcome / Hero-ähnliche Sections */
  --welcome-bg-color: var(--surface);
  --welcome-text-color: var(--text);

  /* Footer – dunkler Abschluss */
  --footer-bg-color: #0B0F19;
  --footer-text-color: #CBD5E1;

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

  /* CLA / CTA – glossy dark */
  --cla-border: rgba(248, 250, 252, 0.10); /* feine Trennlinie */

  --cla-title: #F9FAFB; /* identisch mit Primärtext */
  --cla-lead:  #CBD5E1; /* ruhiger Sekundärtext */
}


/*  ======================================================================
    3 | RESET & BASE
    =================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  height: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topbar-h) + var(--navbar-h) + 12px);
}
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-left: clamp(16px, 4vw, 24px);
  padding-right: clamp(16px, 4vw, 24px);
}
.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;
  backdrop-filter: saturate(150%) blur(6px);
  box-shadow: var(--shadow);
}

.navbar__inner {
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position: relative;
}

/* dezenter Trennstrich leicht über dem unteren Rand der Navbar */
.navbar__inner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  height: 1px;
  background: var(--accent-hover);
  pointer-events: none;
}

.navbar__brand {
  font-family: var(--font-primary);
  font-size: 1.4rem;
  letter-spacing:.2px;
  font-weight: 800;
}

.navbar__menu {
  display:flex;
  gap:.25rem;
  align-items:center;
}

.navbar__menu a {
  padding: .5rem .75rem;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease;
  font-weight: 700;
}

/* Hover für nicht aktive Links */
.navbar__menu a:not(.active):hover {
  background: var(--accent-ghost);
  color: var(--text);
  text-decoration: none;
}

/* Aktiver Menüpunkt als helle Pill mit dunklem Text */
.navbar__menu a.active {
  background: var(--accent);
  color: #050505;
  text-decoration: none;
}

.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;
  margin-inline: clamp(12px, 3vw, 24px);
  border-radius: 18px;
  overflow: hidden;
  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(--text); /* Hero-Text = globale Textfarbe (weiß im Dark-Theme) */
  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(--text);
  --hero-overlay: var(--overlay-dark);
  --hero-image: url('/static/index-background.jpg');

  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(--text);
}

.hero--split .hero__lead {
  color: var(--muted);
  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(--text);
}

/* 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(--accent);
  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; }
  .hero__lead { font-size: 1rem; }
}

/*  ======================================================================
    8 | BUTTONS
    =================================================================== */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 10px;
  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;
  min-height: 44px;
}
.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: var(--surface-3);
  color: var(--muted);
  border-color: var(--border);
}
.btn--light:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* 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;
  font-size: clamp(1rem, 1.2vw, 1.05rem);
  letter-spacing: -0.01em;
  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;
}
.welcome__actions {
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}
.welcome__values {
  display: grid;
  gap: .6rem;
  margin: .9rem 0 1.1rem;
  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);
  color: var(--text);
}
.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"],
input[type="email"],
input[type="tel"] {
  width:100%;
  padding:.75rem .9rem;
  border:1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-3);
  color: var(--text);
  font-size: 16px;
}
.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);
}

.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;
  align-items: center;
}

/* Quadratische, responsive Map */
.location__mapwrap {
  width: 100%;
  aspect-ratio: 12 / 10;
  max-width: 560px;
}
.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;
}

.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);
}
.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 {}

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

/* 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;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  align-items: center;
}

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

.about7__text h1,
.about7__cta{
  text-align: center;
}

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

.about7__media{
  justify-self: end;
}

.about7__media img{
  display:block;
  width: 100%;
  aspect-ratio: 1 / 1;
  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;
  }
}

/*  ======================================================================
    17 | RESPONSIVE (global)
    =================================================================== */
@media (max-width: 1024px) {
  .welcome__wrap { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .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
    =================================================================== */
: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));
  }
}
@media (pointer: coarse) {
  .btn { min-height: 48px; }
}
/* Body-Scroll-Lock wenn Mobile-Menü offen */
body.no-scroll { overflow: hidden; }

/* 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; }
  .top-bar { display: none !important; }
}

/* Navbar: mobile-first, ohne Lücke unter der Navbar */
.navbar__toggle { display: block; }
.navbar__menu {
  position: absolute;
  top: 100%;
  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;
  max-height: calc(100svh - var(--navbar-h));
  overflow: auto;
}

.navbar.is-open .navbar__menu { display: flex; }

/* Socials im Mobile-Menü: als eigene Zeile, aber innen nebeneinander */
.navbar__socials{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;

  width: 100%;
  padding: .25rem 0;
}
.navbar__socials a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem .6rem;
  border-radius: 999px;
}
.navbar__socials a:hover{
  background: var(--accent-ghost);
  text-decoration: none;
}

/* Hamburger-Icon immer hell (auch wenn iOS/Browser irgendwas "tunen" will) */
#navToggle,
#navToggle i,
.navbar__toggle,
.navbar__toggle i,
.navbar__toggle svg {
  color: #F9FAFB !important;
  fill:  #F9FAFB !important;
  -webkit-text-fill-color: #F9FAFB !important;
}

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

  /* Desktop: Socials sollen sich wie normale Menu-Items einreihen */
  .navbar__socials{
    width: auto;
    padding: 0;
    justify-content: flex-start;
  }
}

/*  ======================================================================
    20 | FSERVICE (HAARWERK ZB) TERMINE IM FRONTEND DER WEBSITE
    =================================================================== */
#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);
  color: var(--cta-button-text-color);
}

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

/*  ======================================================================
    21 | DESKTOP-SPACING UTILITY
    =================================================================== */
@media (min-width: 1024px) {
  .u-desktop-roomy {
    padding-top: clamp(3.75rem, 6vw, 7rem) !important;
    padding-bottom: clamp(3.75rem, 6vw, 7rem) !important;
  }
}