/* ============================================================================
   SWEET MITTE JENA — DESIGN SYSTEM v1.0
   Child-Theme für OceanWP + Elementor
   Autor: HBS IT GmbH
   ----------------------------------------------------------------------------
   Aufbau:
   01  Design Tokens (Farben, Typo, Abstände, Radien, Schatten)
   02  Basis / Reset-Ergänzungen
   03  Typografie
   04  Buttons
   05  Header & Navigation
   06  Topbar (NAP: Adresse, Öffnungszeiten, Telefon)
   07  Hero
   08  Karten / Sektionen / Elementor-Overrides
   09  Google-Bewertungen (Trust-Sektion)
   10  Speisekarte / Preisliste
   11  Galerie
   12  Footer
   13  Mobile Sticky CTA
   14  Accessibility & Motion
   15  Print
   ========================================================================== */

/* ==========================================================================
   01 — DESIGN TOKENS
   ========================================================================== */
:root {
  /* --- Marke: Honig, Pistazie, Espresso, Creme --- */
  --sm-espresso:      #24170F;
  --sm-espresso-soft: #3B281C;
  --sm-gold:          #C0872B;
  --sm-gold-deep:     #9C6C1E;
  --sm-gold-light:    #E7C782;
  --sm-pistachio:     #6F8B44;
  --sm-rose:          #C67D84;
  --sm-cream:         #FBF6EE;
  --sm-cream-deep:    #F3E9DA;
  --sm-white:         #FFFFFF;

  /* --- Textfarben (WCAG AA geprüft auf --sm-cream) --- */
  --sm-text:          #2A1D14;   /* 13.2:1 auf Creme */
  --sm-text-muted:    #6B5646;   /* 5.4:1  auf Creme */
  --sm-text-invert:   #FDF9F3;
  --sm-border:        #E4D7C4;

  /* --- Semantik --- */
  --sm-accent:        var(--sm-gold);
  --sm-accent-ink:    var(--sm-gold-deep);
  --sm-surface:       var(--sm-white);
  --sm-surface-alt:   var(--sm-cream);
  --sm-surface-dark:  var(--sm-espresso);

  /* --- Typografie ---
     Selbst gehostete Fonts werden in functions.php registriert.
     Fallback-Stack ist DSGVO-sicher (keine externen Requests). */
  --sm-font-head: "Playfair Display", "Iowan Old Style", "Palatino Linotype",
                  Palatino, Georgia, "Times New Roman", serif;
  --sm-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Fluide Typo-Skala (min 360px → max 1400px) */
  --sm-fs-xs:   0.8125rem;
  --sm-fs-sm:   0.9375rem;
  --sm-fs-base: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --sm-fs-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --sm-fs-h4:   clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);
  --sm-fs-h3:   clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --sm-fs-h2:   clamp(1.875rem, 1.5rem + 1.6vw, 2.875rem);
  --sm-fs-h1:   clamp(2.25rem, 1.6rem + 2.8vw, 4rem);

  --sm-lh-tight: 1.15;
  --sm-lh-head:  1.22;
  --sm-lh-body:  1.7;

  /* --- Abstände (8px-Raster) --- */
  --sm-s1: 0.5rem;
  --sm-s2: 1rem;
  --sm-s3: 1.5rem;
  --sm-s4: 2rem;
  --sm-s5: 3rem;
  --sm-s6: 4rem;
  --sm-s7: 6rem;
  --sm-section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* --- Radien --- */
  --sm-r-sm: 8px;
  --sm-r-md: 14px;
  --sm-r-lg: 22px;
  --sm-r-pill: 999px;

  /* --- Schatten (warm getönt, nicht neutral-grau) --- */
  --sm-shadow-sm: 0 1px 2px rgba(42, 29, 20, .06), 0 2px 6px rgba(42, 29, 20, .05);
  --sm-shadow-md: 0 4px 10px rgba(42, 29, 20, .07), 0 12px 28px rgba(42, 29, 20, .08);
  --sm-shadow-lg: 0 10px 24px rgba(42, 29, 20, .09), 0 28px 60px rgba(42, 29, 20, .12);

  /* --- Layout --- */
  --sm-container: 1200px;
  --sm-container-wide: 1400px;
  --sm-gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem);

  /* --- Motion --- */
  --sm-ease: cubic-bezier(.22, .61, .36, 1);
  --sm-dur: 220ms;
}

/* ==========================================================================
   02 — BASIS
   ========================================================================== */
html { scroll-behavior: smooth; }

body,
body.oceanwp-theme {
  font-family: var(--sm-font-body);
  font-size: var(--sm-fs-base);
  line-height: var(--sm-lh-body);
  color: var(--sm-text);
  background: var(--sm-surface-alt);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

#main,
.site-content { background: var(--sm-surface-alt); }

img, video { max-width: 100%; height: auto; }

::selection { background: var(--sm-gold-light); color: var(--sm-espresso); }

.sm-container {
  width: 100%;
  max-width: var(--sm-container);
  margin-inline: auto;
  padding-inline: var(--sm-gutter);
}

.sm-section { padding-block: var(--sm-section-y); }
.sm-section--alt  { background: var(--sm-white); }
.sm-section--dark { background: var(--sm-espresso); color: var(--sm-text-invert); }
.sm-section--dark h1, .sm-section--dark h2,
.sm-section--dark h3, .sm-section--dark h4 { color: var(--sm-text-invert); }

/* ==========================================================================
   03 — TYPOGRAFIE
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--sm-font-head);
  color: var(--sm-espresso);
  font-weight: 600;
  line-height: var(--sm-lh-head);
  letter-spacing: -0.015em;
  text-transform: none;      /* beendet das VERSAL-Geschrei im alten Hero */
  margin-top: 0;
}

h1, .elementor-widget-heading h1.elementor-heading-title { font-size: var(--sm-fs-h1); line-height: var(--sm-lh-tight); }
h2, .elementor-widget-heading h2.elementor-heading-title { font-size: var(--sm-fs-h2); }
h3, .elementor-widget-heading h3.elementor-heading-title { font-size: var(--sm-fs-h3); }
h4, .elementor-widget-heading h4.elementor-heading-title { font-size: var(--sm-fs-h4); }

p { margin: 0 0 var(--sm-s3); max-width: 68ch; }

a { color: var(--sm-accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sm-espresso); }

/* Kicker / Augenbraue über Überschriften */
.sm-kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--sm-font-body);
  font-size: var(--sm-fs-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sm-accent-ink);
  margin-bottom: var(--sm-s2);
}
.sm-kicker::before {
  content: ""; width: 28px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--sm-gold), var(--sm-gold-light));
}

.sm-lead {
  font-size: var(--sm-fs-lg);
  color: var(--sm-text-muted);
  max-width: 62ch;
}

/* Dekorativer Trenner mit orientalischem Rautenmotiv */
.sm-divider {
  display: flex; align-items: center; justify-content: center;
  gap: .6rem; margin: var(--sm-s4) 0;
}
.sm-divider::before, .sm-divider::after {
  content: ""; height: 1px; flex: 0 1 90px;
  background: linear-gradient(90deg, transparent, var(--sm-border));
}
.sm-divider::after { background: linear-gradient(270deg, transparent, var(--sm-border)); }
.sm-divider i {
  width: 8px; height: 8px; background: var(--sm-gold);
  transform: rotate(45deg); border-radius: 1px;
}

/* ==========================================================================
   04 — BUTTONS
   ========================================================================== */
.sm-btn,
.elementor-button,
.theme-button,
button, input[type="submit"], .wpcf7-submit,
.oceanwp-theme .button {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--sm-font-body);
  font-size: var(--sm-fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  padding: 1rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--sm-r-pill);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--sm-dur) var(--sm-ease),
              box-shadow var(--sm-dur) var(--sm-ease),
              background-color var(--sm-dur) var(--sm-ease),
              color var(--sm-dur) var(--sm-ease);
  will-change: transform;
}

.sm-btn--primary,
.elementor-button:not(.sm-btn--ghost):not(.sm-btn--secondary),
input[type="submit"], .wpcf7-submit {
  background: linear-gradient(180deg, var(--sm-gold) 0%, var(--sm-gold-deep) 100%);
  color: #fff;
  box-shadow: var(--sm-shadow-sm);
}
.sm-btn--primary:hover,
.elementor-button:not(.sm-btn--ghost):not(.sm-btn--secondary):hover,
input[type="submit"]:hover, .wpcf7-submit:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--sm-shadow-md);
}

.sm-btn--secondary {
  background: var(--sm-espresso); color: #fff;
}
.sm-btn--secondary:hover { background: var(--sm-espresso-soft); color:#fff; transform: translateY(-2px); }

.sm-btn--ghost {
  background: transparent;
  color: var(--sm-espresso);
  border-color: var(--sm-border);
}
.sm-btn--ghost:hover { border-color: var(--sm-gold); color: var(--sm-accent-ink); background: var(--sm-white); }

.sm-btn--lg { padding: 1.15rem 2.25rem; font-size: var(--sm-fs-base); }
.sm-btn--block { width: 100%; }

/* Textlink mit Pfeil */
.sm-link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; text-decoration: none; color: var(--sm-accent-ink);
}
.sm-link-arrow svg { transition: transform var(--sm-dur) var(--sm-ease); }
.sm-link-arrow:hover svg { transform: translateX(4px); }

/* ==========================================================================
   05 — HEADER & NAVIGATION
   ========================================================================== */
#site-header,
.oceanwp-theme #site-header {
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--sm-border);
  box-shadow: none;
  transition: box-shadow var(--sm-dur) var(--sm-ease),
              background-color var(--sm-dur) var(--sm-ease);
}
body.sm-scrolled #site-header {
  box-shadow: var(--sm-shadow-sm);
  background: rgba(255, 255, 255, .96);
}

#site-logo img, .custom-logo { transition: transform var(--sm-dur) var(--sm-ease); }
#site-logo img:hover { transform: scale(1.03); }

#site-navigation-wrap .dropdown-menu > li > a {
  font-family: var(--sm-font-body);
  font-size: var(--sm-fs-sm);
  font-weight: 600;
  color: var(--sm-text);
  letter-spacing: .01em;
  position: relative;
}
#site-navigation-wrap .dropdown-menu > li > a::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 22px;
  height: 2px; border-radius: 2px; background: var(--sm-gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--sm-dur) var(--sm-ease);
}
#site-navigation-wrap .dropdown-menu > li > a:hover::after,
#site-navigation-wrap .dropdown-menu > li.current-menu-item > a::after { transform: scaleX(1); }
#site-navigation-wrap .dropdown-menu > li.current-menu-item > a { color: var(--sm-accent-ink); }

/* Header-CTA (Telefon) */
.sm-header-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: var(--sm-fs-sm);
  color: var(--sm-espresso); text-decoration: none;
  padding: .65rem 1.15rem; border-radius: var(--sm-r-pill);
  border: 1px solid var(--sm-border); background: var(--sm-white);
}
.sm-header-cta:hover { border-color: var(--sm-gold); color: var(--sm-accent-ink); }

/* ==========================================================================
   06 — TOPBAR (NAP)
   ========================================================================== */
.sm-topbar {
  background: var(--sm-espresso);
  color: var(--sm-text-invert);
  font-size: var(--sm-fs-xs);
  letter-spacing: .01em;
}
.sm-topbar__inner {
  max-width: var(--sm-container-wide);
  margin-inline: auto;
  padding: .55rem var(--sm-gutter);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .75rem 1.5rem;
}
.sm-topbar__group { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.35rem; }
.sm-topbar__item {
  display: inline-flex; align-items: center; gap: .45rem;
  color: rgba(253, 249, 243, .82); text-decoration: none;
}
.sm-topbar__item:hover { color: #fff; }
.sm-topbar__item svg { flex: none; opacity: .75; }

.sm-status { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
.sm-status__dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: #7CC47F; box-shadow: 0 0 0 3px rgba(124, 196, 127, .22);
}
.sm-status--closed .sm-status__dot { background: #E2896F; box-shadow: 0 0 0 3px rgba(226, 137, 111, .22); }
.sm-status--open  { color: #A9E0AB; }
.sm-status--closed{ color: #F2B7A4; }

@media (max-width: 782px) {
  .sm-topbar__inner { justify-content: center; text-align: center; }
  .sm-topbar__group--secondary { display: none; }
}

/* ==========================================================================
   07 — HERO
   ========================================================================== */
.sm-hero {
  position: relative;
  min-height: clamp(520px, 78vh, 780px);
  display: grid; align-items: center;
  isolation: isolate;
  color: var(--sm-text-invert);
  overflow: hidden;
}
.sm-hero__media { position: absolute; inset: 0; z-index: -2; }
.sm-hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 55%;
}
.sm-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(36,23,15,.30) 0%, rgba(36,23,15,.62) 55%, rgba(36,23,15,.88) 100%),
    radial-gradient(120% 80% at 20% 30%, rgba(36,23,15,.15), transparent 60%);
}
.sm-hero__inner {
  max-width: var(--sm-container); margin-inline: auto;
  padding: var(--sm-s6) var(--sm-gutter);
  width: 100%;
}
.sm-hero__content { max-width: 40rem; }
.sm-hero h1 {
  color: #fff;
  font-size: var(--sm-fs-h1);
  text-shadow: 0 2px 24px rgba(0,0,0,.35);  /* subtil statt Neon-Glow */
  margin-bottom: var(--sm-s3);
}
.sm-hero__sub {
  font-size: var(--sm-fs-lg);
  color: rgba(255,255,255,.90);
  margin-bottom: var(--sm-s4);
  max-width: 34rem;
}
.sm-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sm-s2); }
.sm-hero .sm-kicker { color: var(--sm-gold-light); }
.sm-hero .sm-kicker::before { background: linear-gradient(90deg, var(--sm-gold-light), transparent); }

/* Trust-Zeile direkt unter dem Hero-CTA */
.sm-hero__trust {
  margin-top: var(--sm-s4);
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .6rem 1.1rem;
  border-radius: var(--sm-r-pill);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: var(--sm-fs-sm); color: #fff; text-decoration: none;
}
.sm-hero__trust:hover { background: rgba(255,255,255,.18); color:#fff; }
.sm-hero__trust strong { font-weight: 700; }

/* ==========================================================================
   08 — KARTEN / SEKTIONEN / ELEMENTOR-OVERRIDES
   ========================================================================== */
.sm-grid { display: grid; gap: clamp(1rem, .5rem + 1.5vw, 2rem); }
.sm-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.sm-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.sm-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.sm-card {
  background: var(--sm-surface);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-r-lg);
  overflow: hidden;
  box-shadow: var(--sm-shadow-sm);
  transition: transform var(--sm-dur) var(--sm-ease), box-shadow var(--sm-dur) var(--sm-ease);
  display: flex; flex-direction: column;
}
.sm-card:hover { transform: translateY(-4px); box-shadow: var(--sm-shadow-md); }
.sm-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sm-cream-deep); }
.sm-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--sm-ease); }
.sm-card:hover .sm-card__media img { transform: scale(1.05); }
.sm-card__body { padding: var(--sm-s3); display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.sm-card__body h3 { margin: 0; }
.sm-card__body p { margin: 0; color: var(--sm-text-muted); font-size: var(--sm-fs-sm); }
.sm-card__body .sm-link-arrow { margin-top: auto; padding-top: .5rem; }

.sm-badge {
  position: absolute; top: .85rem; left: .85rem; z-index: 2;
  padding: .35rem .8rem; border-radius: var(--sm-r-pill);
  background: rgba(255,255,255,.94);
  color: var(--sm-espresso);
  font-size: var(--sm-fs-xs); font-weight: 700; letter-spacing: .03em;
  box-shadow: var(--sm-shadow-sm);
}
.sm-badge--gold { background: var(--sm-gold); color: #fff; }

/* Feature-Zeile (Icon + Text) */
.sm-feature { display: flex; gap: .85rem; align-items: flex-start; }
.sm-feature__icon {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--sm-cream-deep); color: var(--sm-accent-ink);
}
.sm-feature h4 { margin: 0 0 .2rem; font-size: var(--sm-fs-base); font-family: var(--sm-font-body); font-weight: 700; }
.sm-feature p { margin: 0; font-size: var(--sm-fs-sm); color: var(--sm-text-muted); }

/* Elementor: leere Abstände & Container zähmen */
.elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--sm-container); }
.elementor-widget-image img { border-radius: var(--sm-r-md); }
.elementor-widget:empty,
.elementor-column:empty { display: none !important; }

/* ==========================================================================
   09 — GOOGLE-BEWERTUNGEN (TRUST)
   ========================================================================== */
.sm-reviews { background: var(--sm-white); }
.sm-reviews__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sm-s3); margin-bottom: var(--sm-s5);
}
.sm-reviews__score {
  display: flex; align-items: center; gap: var(--sm-s3);
  padding: var(--sm-s3) var(--sm-s4);
  background: var(--sm-cream);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-r-lg);
}
.sm-reviews__value {
  font-family: var(--sm-font-head); font-size: 3rem; line-height: 1;
  color: var(--sm-espresso); font-weight: 700;
}
.sm-reviews__meta { display: flex; flex-direction: column; gap: .3rem; }
.sm-reviews__count { font-size: var(--sm-fs-sm); color: var(--sm-text-muted); }
.sm-reviews__source { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--sm-fs-xs); color: var(--sm-text-muted); }

.sm-stars { display: inline-flex; gap: 2px; color: #F2A93B; line-height: 1; }
.sm-stars svg { width: 18px; height: 18px; fill: currentColor; }
.sm-stars--lg svg { width: 22px; height: 22px; }

.sm-review-card {
  background: var(--sm-white);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-r-lg);
  padding: var(--sm-s3);
  display: flex; flex-direction: column; gap: .85rem;
  box-shadow: var(--sm-shadow-sm);
  transition: transform var(--sm-dur) var(--sm-ease), box-shadow var(--sm-dur) var(--sm-ease);
  position: relative;
}
.sm-review-card:hover { transform: translateY(-3px); box-shadow: var(--sm-shadow-md); }
.sm-review-card__quote {
  margin: 0; font-size: var(--sm-fs-sm); line-height: 1.65; color: var(--sm-text);
  display: -webkit-box; -webkit-line-clamp: 6; line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.sm-review-card__author { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.sm-review-card__avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--sm-cream-deep); color: var(--sm-accent-ink);
  font-weight: 700; font-size: var(--sm-fs-sm);
}
.sm-review-card__name { font-weight: 600; font-size: var(--sm-fs-sm); line-height: 1.2; }
.sm-review-card__date { font-size: var(--sm-fs-xs); color: var(--sm-text-muted); }
.sm-review-card__g {
  position: absolute; top: var(--sm-s3); right: var(--sm-s3);
  width: 18px; height: 18px; opacity: .9;
}

.sm-reviews__cta { margin-top: var(--sm-s5); text-align: center; }
.sm-reviews__disclaimer {
  margin-top: var(--sm-s2); font-size: var(--sm-fs-xs); color: var(--sm-text-muted); text-align: center;
}

/* Marquee-Variante für viele Bewertungen (optional) */
.sm-reviews__track { display: grid; gap: var(--sm-s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

/* ==========================================================================
   10 — SPEISEKARTE / PREISLISTE
   ========================================================================== */
.sm-menu-card {
  background: var(--sm-white);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-r-lg);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  box-shadow: var(--sm-shadow-sm);
}
.sm-menu-card h3 {
  padding-bottom: var(--sm-s2);
  border-bottom: 2px solid var(--sm-gold);
  margin-bottom: var(--sm-s3);
  display: inline-block;
}
.sm-menu-list { list-style: none; margin: 0; padding: 0; }
.sm-menu-list li {
  display: flex; align-items: baseline; gap: .75rem;
  padding: .8rem 0; border-bottom: 1px dashed var(--sm-border);
}
.sm-menu-list li:last-child { border-bottom: 0; }
.sm-menu-list__name { font-weight: 600; }
.sm-menu-list__desc { display: block; font-size: var(--sm-fs-xs); color: var(--sm-text-muted); font-weight: 400; margin-top: .15rem; }
.sm-menu-list__dots { flex: 1; border-bottom: 1px dotted var(--sm-border); transform: translateY(-4px); }
.sm-menu-list__price { font-weight: 700; color: var(--sm-accent-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

.sm-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--sm-s4); }
.sm-tab {
  padding: .6rem 1.15rem; border-radius: var(--sm-r-pill);
  border: 1px solid var(--sm-border); background: var(--sm-white);
  font-size: var(--sm-fs-sm); font-weight: 600; color: var(--sm-text-muted); cursor: pointer;
  transition: all var(--sm-dur) var(--sm-ease);
}
.sm-tab:hover { border-color: var(--sm-gold); color: var(--sm-accent-ink); }
.sm-tab[aria-selected="true"] { background: var(--sm-espresso); border-color: var(--sm-espresso); color: #fff; }

/* ==========================================================================
   11 — GALERIE
   ========================================================================== */
.sm-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: clamp(.5rem, .3rem + 1vw, 1rem);
}
.sm-gallery__item {
  position: relative; overflow: hidden; border-radius: var(--sm-r-md);
  aspect-ratio: 1 / 1; background: var(--sm-cream-deep);
}
.sm-gallery__item--tall { aspect-ratio: 3 / 4; grid-row: span 1; }
.sm-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--sm-ease); }
.sm-gallery__item:hover img { transform: scale(1.06); }
.sm-gallery__item figcaption {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 2rem .9rem .8rem;
  background: linear-gradient(180deg, transparent, rgba(36,23,15,.82));
  color: #fff; font-size: var(--sm-fs-xs); font-weight: 600;
  opacity: 0; transform: translateY(8px);
  transition: all var(--sm-dur) var(--sm-ease);
}
.sm-gallery__item:hover figcaption { opacity: 1; transform: none; }

/* ==========================================================================
   12 — FOOTER
   ========================================================================== */
/* OceanWP rendert seinen Footer-Container weiterhin, auch wenn dessen Inhalte
   per Filter abgeschaltet sind. Der leere Rest wird ausgeblendet, damit unter
   dem eigenen Footer kein Farbstreifen stehen bleibt. */
body.sm-custom-footer #footer { display: none; }

.sm-footer {
  background: var(--sm-espresso);
  color: rgba(253, 249, 243, .78);
}
.sm-footer a { color: rgba(253, 249, 243, .78); text-decoration: none; }
.sm-footer a:hover { color: var(--sm-gold-light); }
.sm-footer__inner {
  max-width: var(--sm-container); margin-inline: auto;
  padding: var(--sm-s6) var(--sm-gutter) var(--sm-s4);
  display: grid; gap: var(--sm-s5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.sm-footer h4 {
  color: #fff; font-family: var(--sm-font-body);
  font-size: var(--sm-fs-sm); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: var(--sm-s2);
}
.sm-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: var(--sm-fs-sm); }

.sm-hours { display: grid; gap: .4rem; font-size: var(--sm-fs-sm); }
.sm-hours__row { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; }
.sm-hours__row--today { color: var(--sm-gold-light); font-weight: 700; }
.sm-hours__day { color: inherit; }
.sm-hours__time { font-variant-numeric: tabular-nums; }

.sm-social { display: flex; gap: .6rem; margin-top: var(--sm-s2); }
.sm-social a {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  transition: all var(--sm-dur) var(--sm-ease);
}
.sm-social a:hover { background: var(--sm-gold); border-color: var(--sm-gold); color: #fff; transform: translateY(-2px); }

.sm-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.10);
  max-width: var(--sm-container); margin-inline: auto;
  padding: var(--sm-s3) var(--sm-gutter);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  align-items: center; justify-content: space-between;
  font-size: var(--sm-fs-xs);
}
.sm-footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }

.sm-map-embed {
  width: 100%; aspect-ratio: 16 / 10; border: 0;
  border-radius: var(--sm-r-md); filter: grayscale(.15) contrast(1.05);
}

/* ==========================================================================
   13 — MOBILE STICKY CTA
   ========================================================================== */
.sm-mobile-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 999;
  display: none;
  background: rgba(255,255,255,.97);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--sm-border);
  box-shadow: 0 -4px 20px rgba(42,29,20,.10);
  padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom));
}
.sm-mobile-bar__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.sm-mobile-bar a {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .55rem .25rem; border-radius: var(--sm-r-md);
  font-size: 11px; font-weight: 600; color: var(--sm-text); text-decoration: none;
  transition: background-color var(--sm-dur) var(--sm-ease);
}
.sm-mobile-bar a:active { background: var(--sm-cream-deep); }
.sm-mobile-bar a.is-primary { background: var(--sm-gold); color: #fff; }
.sm-mobile-bar svg { width: 20px; height: 20px; }

@media (max-width: 768px) {
  .sm-mobile-bar { display: block; }
  body { padding-bottom: 68px; }
  .sm-hero { min-height: 72vh; }
  .sm-hero__actions .sm-btn { flex: 1 1 100%; }
  .sm-reviews__head { flex-direction: column; align-items: flex-start; }
  .sm-reviews__score { width: 100%; }
}

/* ==========================================================================
   14 — ACCESSIBILITY & MOTION
   ========================================================================== */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--sm-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.sm-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--sm-espresso); color: #fff;
  padding: .85rem 1.5rem; border-radius: 0 0 var(--sm-r-md) 0;
  font-weight: 600; text-decoration: none;
}
.sm-skip-link:focus { left: 0; color: #fff; }

.sm-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Scroll-Reveal (progressive enhancement — ohne JS bleibt alles sichtbar) */
.sm-reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--sm-ease), transform 600ms var(--sm-ease); }
.sm-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .sm-reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   15 — PRINT
   ========================================================================== */
@media print {
  .sm-topbar, .sm-mobile-bar, #site-header, .sm-hero__actions, .sm-reviews__cta { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .sm-card, .sm-menu-card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
}

/* ==========================================================================
   16 - KORREKTUREN NACH LIVE-TEST (16.08.2026)
   ========================================================================== */

/* Footer-Menue: OceanWP vererbt Trennlinien, Innenabstaende und ein
   Such-Icon in die Menuepunkte. Im eigenen Footer wird das neutralisiert. */
.sm-footer ul li { border: 0 !important; margin: 0 !important; }
.sm-footer ul li::before,
.sm-footer ul li::after { display: none !important; }
.sm-footer ul li a {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  line-height: 1.6;
  display: inline-block;
}
.sm-footer ul li a::after { display: none !important; }

/* Such-Icon und WooCommerce-Icons gehoeren nicht in die Footer-Liste. */
.sm-footer li.search-toggle-li,
.sm-footer li.woo-menu-icon,
.sm-footer li.sidr-class-search-toggle-li,
.sm-footer li[class*="search"] { display: none !important; }

/* Grosse Leerraeume, die Elementor-Sektionen ohne Inhalt hinterlassen. */
.elementor-section > .elementor-container:empty { display: none; }

/* LayerSlider-Hero: Versalien und Neon-Glow abschalten. */
.ls-container .ls-layer,
.ls-container .ls-l,
.ls-wp-container .ls-layer {
  text-transform: none !important;
  text-shadow: 0 2px 24px rgba(0,0,0,.35) !important;
}

/* Bewertungs-CTA: Buttons brauchen Abstand, der Hinweis volle Breite. */
.sm-reviews__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  align-items: center;
}
.sm-reviews__disclaimer {
  flex: 1 0 100%;
  max-width: none;
  margin: .25rem 0 0;
}
.sm-reviews__head .sm-lead { max-width: 52ch; }
/* ==========================================================================
   17 — EIGENE STARTSEITE (front-page.php)
   OceanWP zentriert und begrenzt den Content-Container. Die neuen Sektionen
   sind full-bleed und brauchen die volle Breite.
   ========================================================================== */
body.sm-front #content-wrap,
body.sm-front #primary,
body.sm-front #content,
body.sm-front .content-area {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
body.sm-front #main { padding: 0 !important; }
body.sm-front .page-header,
body.sm-front #right-sidebar,
body.sm-front #left-sidebar { display: none !important; }

/* ==========================================================================
   18 — KOMPONENTEN DER STARTSEITE
   (Vertrauensleiste, Split-Sektion, Checkliste, CTA-Band)
   ========================================================================== */

/* --- Vertrauensleiste direkt unter dem Hero --- */
.sm-trustbar {
  background: var(--sm-white);
  border-bottom: 1px solid var(--sm-border);
}
.sm-trustbar__inner {
  max-width: var(--sm-container);
  margin-inline: auto;
  padding: var(--sm-s3) var(--sm-gutter);
  display: grid;
  gap: var(--sm-s3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

/* --- Split: Bild links, Text rechts (und umgekehrt) --- */
.sm-split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.sm-split__media { position: relative; }
.sm-split__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--sm-r-lg);
  box-shadow: var(--sm-shadow-lg);
}
.sm-split__stamp {
  position: absolute;
  right: -14px;
  bottom: -14px;
  background: var(--sm-gold);
  color: #fff;
  border-radius: var(--sm-r-lg);
  padding: 1rem 1.35rem;
  box-shadow: var(--sm-shadow-md);
  text-align: center;
}
.sm-split__stamp b {
  display: block;
  font-family: var(--sm-font-head);
  font-size: 1.9rem;
  line-height: 1;
}
.sm-split__stamp span {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .92;
}

/* --- Checkliste --- */
.sm-checks {
  list-style: none;
  margin: 0 0 var(--sm-s4);
  padding: 0;
  display: grid;
  gap: .7rem;
}
.sm-checks li {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  font-size: var(--sm-fs-sm);
}
.sm-checks svg {
  flex: none;
  margin-top: 3px;
  color: var(--sm-pistachio);
  stroke-width: 2.2;
}

/* --- CTA-Band mit abgedunkeltem Foto --- */
.sm-cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--sm-espresso);
  color: #fff;
}
.sm-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .16;
  background: var(--sm-cta-image, none) center / cover no-repeat;
}
.sm-cta-band h2 { color: #fff; }

@media (max-width: 768px) {
  .sm-split__stamp { right: 8px; bottom: 8px; padding: .75rem 1rem; }
  .sm-split__stamp b { font-size: 1.5rem; }
}

/* ==========================================================================
   19 — BOX-SIZING-ABSICHERUNG
   Das Parent-Theme setzt border-box global. Falls diese Regel einmal
   wegfaellt (anderes Theme, "Unused CSS entfernen" in LiteSpeed), wuerden
   Innenabstaende auf die Breite addiert und die Sektionen liefen auf dem
   Handy ueber den Rand hinaus. Nur eigene Komponenten, nichts Fremdes.
   ========================================================================== */
[class^="sm-"],
[class*=" sm-"],
[class^="sm-"] *,
[class*=" sm-"] * { box-sizing: border-box; }

/* ==========================================================================
   20 — HELLER BUTTON AUF DUNKLEM GRUND
   Wird im Hero und im CTA-Band gebraucht. Ohne diese Regel erbt
   .sm-btn--light nur die Basis (transparent) und ist quasi unsichtbar.
   ========================================================================== */
.sm-btn--light {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border-color: rgba(255, 255, 255, .30);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.sm-btn--light:hover,
.sm-btn--light:focus-visible {
  background: rgba(255, 255, 255, .26);
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
  transform: translateY(-2px);
}

/* ==========================================================================
   21 - HERO-KORREKTUREN NACH LIVE-TEST
   ========================================================================== */

/* Das Hintergrundbild fuellte den Hero nicht komplett aus: height:100% loeste
   sich gegen die min-height (78vh) statt gegen die tatsaechliche, vom Inhalt
   bestimmte Hoehe auf. Mit absoluter Positionierung ergibt sich die Hoehe aus
   den Offsets - unabhaengig davon, wie hoch der Text den Hero macht. */
.sm-hero__media { overflow: hidden; }
.sm-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

/* Die Trust-Zeile stand als weisser Text auf einem hellen Bildausschnitt und
   war praktisch unlesbar. Dunkler, halbtransparenter Grund garantiert
   Kontrast - unabhaengig vom Foto dahinter. */
.sm-hero__trust {
  background: rgba(36, 23, 15, .58);
  border-color: rgba(255, 255, 255, .26);
}
.sm-hero__trust:hover { background: rgba(36, 23, 15, .72); }