/* =============================================================
   Zum Bärtigen — Shared Chrome
   Single source of truth for design tokens + cross-page chrome
   (navbar, mobile-tabbar, footer, brand watermark, scroll-top,
   global resets, focus, selection). Page-specific styles still
   live inline in their HTML file.
   ============================================================= */

/* ====================== TOKENS ====================== */
:root {
  /* ============ BRAND ============
     Three exact logo gradient stops (top → middle → bottom).
     The middle stop is the primary brand color for non-gradient surfaces. */
  --brand-blue-top: #2faaf5;
  --brand-blue:     #34d5f9;
  --brand-aqua:     #76fafb;
  --brand-ink:      #151515;
  --brand-paper:    #fefefe;
  --brand-gradient:   linear-gradient(180deg, #2faaf5 0%, #34d5f9 50%, #76fafb 100%);
  --brand-gradient-h: linear-gradient(90deg,  #2faaf5 0%, #34d5f9 50%, #76fafb 100%);

  /* ============ PRIMARY (blue) ============ */
  --primary-100: oklch(0.92 0.10  195);
  --primary-200: oklch(0.86 0.115 207);
  --primary-300: oklch(0.81 0.13  220);
  --primary-400: oklch(0.71 0.13  247);
  --primary-500: oklch(0.55 0.11  255);

  /* ============ NEUTRALS ============
     Tinted toward brand hue 218 so neutrals share family with the brand. */
  --neutral-50:  oklch(0.99 0.004 218);
  --neutral-100: oklch(0.95 0.005 218);
  --neutral-200: oklch(0.88 0.008 218);
  --neutral-300: oklch(0.78 0.012 218);
  --neutral-400: oklch(0.62 0.015 218);
  --neutral-500: oklch(0.48 0.014 218);
  --neutral-600: oklch(0.36 0.012 218);
  --neutral-700: oklch(0.18 0.010 218);
  --neutral-800: oklch(0.12 0.008 218);
  --neutral-900: oklch(0.21 0.011 218);
  --neutral-950: oklch(0.06 0.005 218);

  /* ============ SURFACES (elevation) ============ */
  --surface-0: var(--neutral-900);
  --surface-1: var(--neutral-800);
  --surface-2: var(--neutral-700);

  /* ============ SEMANTIC (text/border) ============ */
  --text-primary:    #ffffff;
  --text-secondary:  rgba(255, 255, 255, 0.78);
  --text-muted:      rgba(255, 255, 255, 0.62);
  --text-on-primary: var(--neutral-900);
  --border-subtle:   rgba(255, 255, 255, 0.12);
  --border-default:  rgba(255, 255, 255, 0.18);

  /* ============ FONTS ============ */
  --font-display: "Audiowide", system-ui, sans-serif;
  --font-body:    "Orbitron", system-ui, sans-serif;

  /* ============ EASING ============ */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-quart:  cubic-bezier(0.5, 0, 0.75, 0);

  /* ============ ACCENT GLOWS / FILLS ============
     Sky-anchor (--primary-300) at hue 220 with calibrated alpha. */
  --accent-fill-soft:    oklch(0.81 0.13 220 / 0.34);
  --accent-glow-soft:    oklch(0.81 0.13 220 / 0.46);
  --accent-glow-medium:  oklch(0.81 0.13 220 / 0.50);
  --accent-glow-strong:  oklch(0.81 0.13 220 / 0.55);
  --accent-cta-shadow:   oklch(0.81 0.13 220 / 0.42);

  /* ============ MARK-LINE SCALE ============ */
  --mark-sm: 24px;
  --mark-md: 56px;
  --mark-lg: clamp(80px, 15vw, 140px);

  /* ============ AMBIENT LAYERS ============ */
  --noise-opacity: 0.022;
  --atem-opacity: 0.055;

  /* ============ VERTICAL RHYTHM ============ */
  --space-section: clamp(4rem, 8vw, 8rem);
  --space-section-tight: clamp(2rem, 5vw, 4.5rem);
  --space-headline-body: clamp(1rem, 2vw, 1.75rem);
}

/* ====================== RESET + BASE ====================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Global reduced-motion override — kills every animation/transition
   unless a section adds its own narrower rule. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html, body {
  background: var(--surface-0);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.008em;
}

/* Global heading case — uppercase fits the Audiowide display face.
   Tiny letter-spacing bump prevents caps from looking cramped.
   .artikel-title is a <span> on beratung.html — included explicitly. */
h1, h2, h3, .artikel-title {
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* Section transitions are handled by shell.js → scrollDampener: native
   scroll feel between sections (free wheel/swipe), with a velocity
   dampener kicking in while the viewport center is in the middle ~90%
   of a section so the user reads at a paced rate. The first/last 5% of
   each section is left at native speed so passing into the next section
   never feels forced. No CSS-side snap whatsoever.
   `scroll-padding-top` clears the fixed navbar (~4.45rem). */
html {
  scroll-padding-top: clamp(4rem, 8vh, 5rem);
}

/* Horizontal-drift lock — see ueber-uns/beratung notes; same layered defense. */
html, body {
  overflow-x: clip;
  overscroll-behavior-x: none;
  width: 100%;
}
body {
  touch-action: pan-y;
  position: relative;
  isolation: isolate;
}

/* Ambient grain + atem-radial behind all content. Static, no JS. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body::before {
  opacity: var(--noise-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
body::after {
  background: radial-gradient(
    ellipse 90% 55% at 50% 38%,
    oklch(0.18 0.012 218 / var(--atem-opacity)) 0%,
    transparent 65%
  );
}
@media (prefers-reduced-transparency: reduce) {
  body::before, body::after { opacity: 0; }
}

/* Native scrollbar — hidden for visual cleanliness. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

/* ====================== FOCUS + SELECTION ====================== */
::selection { background: var(--primary-300); color: var(--brand-ink); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--primary-300);
  outline-offset: 3px;
  border-radius: 2px;
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
summary:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--primary-300);
  outline-offset: 3px;
}
/* Inputs use an inset ring so the outline doesn't clip the field. */
input:focus-visible, textarea:focus-visible {
  outline-offset: -2px;
}

/* ====================== BRAND DIVIDER ====================== */
/* Polyline mark from the shop's business card. Stretches via
   preserveAspectRatio="none" on the SVG; polyline keeps constant
   stroke via vector-effect="non-scaling-stroke". Pair with a size
   modifier on the host. Add .reveal to draw on scroll-into-view. */
.brand-divider {
  display: block;
  width: 100%;
  height: 14px;
  color: var(--primary-300);
  flex: 0 0 auto;
  overflow: visible;
}
.brand-divider polyline {
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
}
.brand-divider.reveal polyline {
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
.brand-divider.reveal.is-visible polyline { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .brand-divider polyline { stroke-dashoffset: 0 !important; transition: none; }
}

/* ====================== SCROLL REVEAL ====================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ====================== LINE REVEAL ====================== */
.line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.18em;
  margin-bottom: -0.06em;
}
.line > * {
  display: block;
  transform: translateY(110%);
  transition: transform 1.1s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform;
}
.line.is-in > * { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .line > * { transform: none; transition: none; }
}

/* ====================== HEADLINE SPLIT (data-split) ====================== */
/* JS wraps each char in <span class="char">. --dist is signed distance from
   line center, --p is scroll progress (0 fanned → 1 assembled).
   .js-active gate hides unsplit headlines so there's no flash. */
.js-active [data-split]          { visibility: hidden; }
.js-active [data-split].is-split { visibility: visible; }

[data-split] .word {
  display: inline-block;
  white-space: nowrap;
  letter-spacing: 0;
}
[data-split] .char {
  display: inline-block;
  vertical-align: baseline;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  will-change: transform;
}
[data-split] em { letter-spacing: 0.02em; }
[data-split] em .char { padding-right: 0.045em; }
[data-split].is-split .char {
  transform:
    translateX(calc((1 - var(--p, 0)) * var(--dist, 0) * 0.55em))
    rotateX(calc((1 - var(--p, 0)) * var(--dist, 0) * 32deg));
  transform-origin: 50% 50%;
}
@media (prefers-reduced-motion: reduce) {
  [data-split].is-split .char { transform: none; }
}

/* ====================== BRAND WATERMARK ====================== */
.brand-watermark {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(20rem, 55vmin, 38rem);
  height: clamp(20rem, 55vmin, 38rem);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.brand-watermark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0.085;
  filter:
    drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.95))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.06))
    drop-shadow(0 0 1px rgba(0, 0, 0, 0.9))
    drop-shadow(0 4px 12px rgba(0, 0, 0, 0.55));
}
@media (max-width: 640px) {
  .brand-watermark { width: 70vmin; height: 70vmin; }
  .brand-watermark img { opacity: 0.075; }
}

/* ====================== NAVBAR ======================
   Top-pinned navbar — transparent on hero, transitions to a pill once
   scrolled past. mix-blend-mode: difference inverts logo against bg. */
.navbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: 100%;
  max-width: 64rem;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  transition:
    top 0.35s var(--ease-out-quart),
    max-width 0.35s var(--ease-out-quart),
    background 0.35s var(--ease-out-quart),
    border-color 0.35s var(--ease-out-quart),
    box-shadow 0.35s var(--ease-out-quart),
    border-radius 0.35s var(--ease-out-quart),
    backdrop-filter 0.35s var(--ease-out-quart);
}
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding: 0.85rem clamp(1.5rem, 4vw, 3rem);
  height: 2.75rem;
  mix-blend-mode: difference;
  transition: padding 0s linear, mix-blend-mode 0s linear 0.2s;
}
.navbar .logo {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  color: var(--text-primary);
  text-decoration: none;
  flex-shrink: 0;
  min-width: 0;
}
.navbar-links {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(0.65rem, 2vw, 2.5rem);
  margin: 0;
  padding: 0;
  min-width: 0;
}
.navbar-links a {
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-primary);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.3s var(--ease-out-quart),
              color 0.3s var(--ease-out-quart);
}
.navbar-links a:hover { opacity: 1; color: var(--primary-300); }

/* Live-Status pill on the right — desktop only. */
.navbar-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-primary);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.3s var(--ease-out-quart),
              color 0.3s var(--ease-out-quart);
}
.navbar-status:hover,
.navbar-status:focus-visible {
  opacity: 1;
  color: var(--primary-300);
}
.navbar-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  flex: 0 0 auto;
  transition: background 0.3s var(--ease-out-quart),
              box-shadow 0.3s var(--ease-out-quart);
}
.navbar.is-open-now .navbar-status-dot {
  background: oklch(0.78 0.16 145);
  box-shadow: 0 0 8px oklch(0.78 0.16 145 / 0.55);
  animation: navbar-status-pulse 2.4s ease-in-out infinite;
}
.navbar.is-closed-now .navbar-status-dot {
  background: oklch(0.62 0.18 25);
}
@keyframes navbar-status-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .navbar.is-open-now .navbar-status-dot { animation: none; }
}
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  .navbar-status { display: none; }
}

/* Scrolled state — slim transparent pill with 1px outline. */
.navbar.is-scrolled {
  top: 0.75rem;
  max-width: 52rem;
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(15, 22, 30, 0.18);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}
.navbar.is-scrolled .navbar-inner {
  padding: 0.45rem clamp(0.85rem, 2.5vw, 1.5rem);
  height: 2.4rem;
  mix-blend-mode: normal;
  transition: padding 0s linear, mix-blend-mode 0s linear 0s;
}

/* Mobile hamburger toggle */
.navbar-toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: border-color 0.3s var(--ease-out-quart),
              background 0.3s var(--ease-out-quart);
}
.navbar-toggle:hover { border-color: rgba(255, 255, 255, 0.5); }
.navbar-toggle-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 1.5px;
  background: var(--text-primary);
  border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease-out-quart), opacity 0.2s var(--ease-out-quart);
}
.navbar-toggle-line:nth-child(1) { transform: translate(-50%, calc(-50% - 4px)); }
.navbar-toggle-line:nth-child(2) { transform: translate(-50%, calc(-50% + 4px)); }
.navbar-toggle.is-open .navbar-toggle-line:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.navbar-toggle.is-open .navbar-toggle-line:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

/* Mobile menu overlay */
.navbar-mobile {
  position: fixed;
  top: 2.75rem;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 22, 30, 0.30);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.98);
  transition: opacity 0.25s var(--ease-out-quart), transform 0.25s var(--ease-out-quart);
  z-index: 39;
  display: none;
}
.navbar-mobile.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.navbar-mobile-links {
  list-style: none;
  margin: 0;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}
.navbar-mobile-links a {
  display: block;
  padding: 1rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: 10px;
  transition: background 0.25s, color 0.25s;
  text-align: right;
}
.navbar-mobile-links a:hover,
.navbar-mobile-links a:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: var(--primary-300);
}

@media (max-width: 780px) {
  .navbar-links { display: none; }
  .navbar-toggle { display: block; }
  .navbar-mobile { display: block; }
  .navbar-inner { mix-blend-mode: normal; }
  .navbar {
    background: rgba(15, 22, 30, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }
  .navbar.is-scrolled {
    top: 0.5rem;
    max-width: calc(100% - 1rem);
    border-radius: 999px;
    border-color: rgba(255, 255, 255, 0.22);
  }
}

/* ====================== FLOATING TAB-BAR ======================
   Now visible on every viewport. Was originally mobile-only, kept the
   .mobile-tabbar class name to avoid touching every HTML file. The pill
   sits bottom-right and offers logo + phone + Instagram + Maps chooser
   plus the live shop status dot. Compact-mode collapse (after scrolling
   past ~30vh) keeps it out of the way while reading. */
.mobile-tabbar-toggle { display: none; }

@media all {
  .mobile-tabbar {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    padding: 0.35rem;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    border-radius: 999px;
    transition:
      width 0.45s cubic-bezier(0.23, 1, 0.32, 1),
      padding 0.45s cubic-bezier(0.23, 1, 0.32, 1),
      gap 0.45s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: visible;
    max-width: calc(100vw - 2rem);
  }
  .mobile-tabbar > a {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #111111;
    text-decoration: none;
    border-radius: 50%;
    transition: background 0.2s, transform 0.15s, opacity 0.3s, width 0.4s, margin 0.4s;
  }
  .mobile-tabbar > a:active {
    background: rgba(0, 0, 0, 0.08);
    transform: scale(0.92);
  }
  .mobile-tabbar > a svg,
  .mobile-tabbar-maps-trigger svg {
    width: 22px;
    height: 22px;
    fill: #111111;
  }
  .mobile-tabbar .mobile-tabbar-logo img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
  }

  .mobile-tabbar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    flex: 0 0 auto;
    opacity: 0;
    width: 0;
    margin: 0;
    order: -1;
    border-radius: 50%;
    overflow: hidden;
    transition: opacity 0.3s, width 0.4s, margin 0.4s, background 0.2s, transform 0.15s;
  }
  .mobile-tabbar-toggle img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
  }
  .mobile-tabbar-toggle:active {
    background: rgba(0, 0, 0, 0.08);
    transform: scale(0.92);
  }

  /* Maps slot — wraps the chooser button + popover. */
  .mobile-tabbar-maps {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    transition: opacity 0.3s, width 0.4s, margin 0.4s;
  }
  .mobile-tabbar-maps-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
  }
  .mobile-tabbar-maps-trigger:active,
  .mobile-tabbar-maps-trigger[aria-expanded="true"] {
    background: rgba(0, 0, 0, 0.08);
    transform: scale(0.92);
  }
  .mobile-tabbar-maps-trigger svg { width: 22px; height: 22px; fill: #111111; }

  .mobile-tabbar-maps-menu {
    position: absolute;
    bottom: calc(100% + 0.7rem);
    right: 0;
    min-width: 9.5rem;
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: oklch(0.22 0.008 218);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
            backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid oklch(0.81 0.13 220 / 0.6);
    border-radius: 12px;
    box-shadow:
      0 16px 36px -14px rgba(0, 0, 0, 0.85),
      0 0 0 1px oklch(0.81 0.13 220 / 0.15) inset;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition:
      opacity 0.2s var(--ease-out-quart),
      transform 0.2s var(--ease-out-quart);
    z-index: 70;
  }
  .mobile-tabbar-maps-menu[hidden] { display: none; }
  .mobile-tabbar-maps-menu[data-open="true"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .mobile-tabbar-maps-menu a {
    display: block;
    width: auto;
    height: auto;
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
    text-align: left;
    text-decoration: none;
    color: var(--text-primary);
    background: transparent;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .mobile-tabbar-maps-menu a svg { display: none; }
  .mobile-tabbar-maps-menu a:hover,
  .mobile-tabbar-maps-menu a:focus-visible {
    background: oklch(0.81 0.13 220 / 0.18);
    color: var(--text-primary);
    outline: none;
  }
  .mobile-tabbar-maps-menu a:active {
    background: oklch(0.81 0.13 220 / 0.28);
    transform: none;
  }

  /* Compact-Mode: only the Toggle button is visible. */
  .mobile-tabbar.is-compact { gap: 0; }
  .mobile-tabbar.is-compact .mobile-tabbar-toggle {
    opacity: 1;
    width: 44px;
  }
  .mobile-tabbar.is-compact:not(.is-expanded) > a,
  .mobile-tabbar.is-compact:not(.is-expanded) > .mobile-tabbar-maps {
    opacity: 0;
    width: 0;
    margin: 0;
    pointer-events: none;
  }
  .mobile-tabbar.is-compact.is-expanded > a,
  .mobile-tabbar.is-compact.is-expanded > .mobile-tabbar-maps {
    opacity: 1;
    width: 44px;
  }
  .mobile-tabbar.is-compact.is-expanded { gap: 0.3rem; }
  .mobile-tabbar.is-compact .mobile-tabbar-logo {
    opacity: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    pointer-events: none;
  }

  /* Status dot — top-right of the pill. Green pulses when open. */
  .tabbar-status {
    position: absolute;
    top: 5px;
    right: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #888;
    border: 1.5px solid #ffffff;
    z-index: 2;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
    transition: background 0.3s, box-shadow 0.3s;
  }
  .mobile-tabbar.is-open-now .tabbar-status {
    background: #22c55e;
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.06),
      0 0 8px rgba(34, 197, 94, 0.55);
    animation: status-pulse 2.4s ease-in-out infinite;
  }
  .mobile-tabbar.is-closed-now .tabbar-status {
    background: #ef4444;
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.06),
      0 0 8px rgba(239, 68, 68, 0.45);
  }
  @keyframes status-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
  }
  @media (prefers-reduced-motion: reduce) {
    .mobile-tabbar.is-open-now .tabbar-status { animation: none; }
  }

  /* Body-padding so content doesn't slip under the pill. */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}

/* ====================== SITE FOOTER ====================== */
/* Centered brand-outro: brand name / description / social / nav /
   legal / copyright stacked top; decorative bg-text + logo card +
   hairline + soft fade live in the lower half. overflow: hidden
   so the oversized bg-text doesn't leak. */
.site-footer {
  position: relative;
  overflow: hidden;
  background: transparent;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem) 0;
  min-height: clamp(30rem, 40vw + 20rem, 42rem);
  display: flex;
  flex-direction: column;
}
.footer-content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  text-align: center;
}
.footer-brand-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}
.footer-brand-name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--text-primary);
  letter-spacing: -0.005em;
  margin: 0;
}
.footer-brand-line {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  max-width: 30rem;
  font-variant-numeric: tabular-nums;
}
.footer-social {
  display: flex;
  gap: 1rem;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--text-muted);
  transition:
    color 0.3s var(--ease-out-quart),
    transform 0.3s var(--ease-out-quart);
}
.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--text-primary);
  transform: scale(1.1);
}
.footer-social svg {
  width: 1.4rem;
  height: 1.4rem;
  display: block;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 100%;
}
.footer-nav a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.3s var(--ease-out-quart);
}
.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--text-primary);
}
.footer-legal {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 38rem;
  margin: 0 auto;
}
.footer-legal strong {
  color: var(--text-primary);
  font-weight: 500;
}
.footer-bottom {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  width: 100%;
  margin: auto auto 0;
  padding: clamp(1.25rem, 2.5vh, 1.75rem) 0 clamp(1.25rem, 2.5vh, 1.75rem);
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
}
.footer-bg-text {
  position: absolute;
  left: 50%;
  bottom: clamp(8rem, 14vw, 12rem);
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: clamp(3rem, 14vw, 9rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.92;
  white-space: nowrap;
  text-transform: uppercase;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.08) 55%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.footer-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(7rem, 11vw, 9rem);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--border-subtle) 30%,
    var(--border-subtle) 70%,
    transparent
  );
  z-index: 1;
  pointer-events: none;
}
.footer-shadow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(5rem, 9vw, 7rem);
  height: clamp(4rem, 8vw, 6rem);
  background: linear-gradient(
    0deg,
    var(--surface-0) 0%,
    rgba(25, 25, 25, 0.85) 35%,
    rgba(25, 25, 25, 0.5) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}
.footer-logo-card {
  position: absolute;
  left: 50%;
  bottom: clamp(4.5rem, 8vw, 7rem);
  transform: translateX(-50%);
  z-index: 3;
  padding: 0.65rem;
  border-radius: 1.5rem;
  background: rgba(25, 25, 25, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--border-default);
  filter: drop-shadow(0 0 22px rgba(255, 255, 255, 0.10));
  transition:
    border-color 0.4s var(--ease-out-quart),
    filter 0.4s var(--ease-out-quart);
}
.footer-logo-card:hover {
  border-color: var(--text-primary);
  filter: drop-shadow(0 0 26px rgba(255, 255, 255, 0.18));
}
.footer-logo-tile {
  width: clamp(3rem, 7vw, 5.5rem);
  height: clamp(3rem, 7vw, 5.5rem);
  border-radius: 1rem;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.footer-logo-tile img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}
@media (max-width: 540px) {
  .site-footer { padding-top: clamp(2.5rem, 8vw, 4rem); }
  .footer-content { gap: 1rem; }
  .footer-bg-text { font-size: clamp(2.4rem, 16vw, 5rem); }
}

/* ====================== SCROLL-TO-TOP ======================
   Floating affordance for long pages. Appears after ~120vh of scroll.
   Stacked ABOVE the .mobile-tabbar (now visible on all viewports) so
   they share the bottom-right corner without overlapping. */
.scroll-top {
  position: fixed;
  bottom: 5.5rem;
  right:  1rem;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(20, 24, 28, 0.72);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.32s var(--ease-out-quart),
              transform 0.32s var(--ease-out-quart),
              background-color 0.25s var(--ease-out-quart),
              border-color 0.25s var(--ease-out-quart);
  z-index: 90;
}
.scroll-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scroll-top:hover, .scroll-top:focus-visible {
  background: rgba(20, 24, 28, 0.92);
  border-color: var(--primary-300);
  color: var(--primary-300);
}
.scroll-top svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 480px) {
  .scroll-top { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-top { transition: opacity 0.2s linear; transform: none; }
}

/* ====================== PAGE HERO ======================
   Shared subpage hero (used by beratung, ueber-uns, sortiment, and
   the per-category sortiment subpages). Individual pages may still
   add their own overrides AFTER this block via inline <style>. */
#page-hero {
  padding: clamp(5rem, 11vh, 8rem) clamp(1.5rem, 5vw, 4rem) clamp(4rem, 9vh, 7rem);
  background: transparent;
}
.page-hero-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vh, 1.75rem);
}
.page-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--primary-300);
  margin: 0;
}
.page-hero-tag::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  background: var(--primary-300);
  border-radius: 50%;
  box-shadow: 0 0 10px oklch(0.81 0.13 220 / 0.22);
  flex: 0 0 auto;
}
.page-hero-headline {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  line-height: 1.05;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0;
}
.page-hero-headline em { font-style: italic; color: var(--primary-300); }
.page-hero-mark { margin-inline: 0; }
.page-hero-lead {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 32rem;
  margin: 0;
}
@media (min-width: 1024px) {
  .page-hero-inner    { max-width: 1180px; }
  .page-hero-headline { font-size: clamp(3.5rem, 6vw, 6rem); line-height: 0.98; letter-spacing: -0.015em; }
  .page-hero-tag      { font-size: 0.8rem; letter-spacing: 0.4em; }
  .page-hero-lead     { font-size: 1.2rem; max-width: 44rem; }
}
@media (min-width: 1600px) {
  .page-hero-inner    { max-width: 1320px; }
}

/* ====================== SORTIMENT — MARKEN DROPDOWN ======================
   <details>+<summary> dropdown for brand lists. Used on every per-category
   sortiment subpage AND on sortiment.html (Onlygrams inline block). */
details.marken-item {
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
}
details.marken-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0.25rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.005em;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  transition: color 0.25s var(--ease-out-quart);
}
details.marken-item summary::-webkit-details-marker { display: none; }
details.marken-item summary:hover { color: var(--primary-300); }
details.marken-item summary::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-right: 1.5px solid var(--primary-300);
  border-bottom: 1.5px solid var(--primary-300);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.3s var(--ease-out-quart);
  flex-shrink: 0;
}
details.marken-item[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.marken-body { padding: 0 0.25rem clamp(1.25rem, 2.5vh, 1.75rem); }
.marken-eyebrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 1rem;
}
.marken-count {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--primary-300);
  font-variant-numeric: tabular-nums;
}
.marken-list {
  list-style: none;
  padding: 0;
  margin: 0;
  column-count: 2;
  column-gap: clamp(1.5rem, 4vw, 2.5rem);
  column-rule: 1px solid var(--border-subtle);
}
.marken-list li {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-secondary);
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border-subtle);
  break-inside: avoid;
}
.marken-list li:last-child { border-bottom: 0; }
.marken-list li.is-placeholder { color: var(--text-muted); font-style: italic; }
.marken-note {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: clamp(1rem, 2vh, 1.5rem) 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-subtle);
  max-width: 38rem;
}
@media (max-width: 480px) {
  .marken-list { column-count: 1; }
}
@media (min-width: 1024px) {
  details.marken-item summary { font-size: 1.2rem; padding: 1.35rem 0.4rem; }
  .marken-list                { column-count: 3; }
  .marken-list li             { font-size: 1rem; }
}
@media (min-width: 1600px) {
  .marken-list { column-count: 4; }
}

/* ====================== SUBPAGE — CTA BUTTONS ======================
   Pill-style CTAs used on subpages (Sortiment, kategorien, Onlygrams). */
.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: rgba(255, 255, 255, 0.04);
  transition: transform 0.25s var(--ease-out-quart),
              background-color 0.25s var(--ease-out-quart),
              border-color 0.25s var(--ease-out-quart);
}
.cta-button:hover, .cta-button:focus-visible {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--primary-300);
  outline: none;
}
.cta-button--primary {
  background: var(--primary-300);
  color: var(--neutral-900);
  border-color: var(--primary-300);
  font-weight: 600;
}
.cta-button--primary:hover, .cta-button--primary:focus-visible {
  background: var(--primary-400);
  border-color: var(--primary-400);
  box-shadow: 0 8px 24px -8px var(--accent-cta-shadow);
  color: var(--neutral-900);
}

/* ====================== SUBPAGE — PAGE HERO BACK LINK ====================== */
.page-hero-back { margin-top: -0.25rem; }
.page-hero-back a {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.25s var(--ease-out-quart);
}
.page-hero-back a:hover,
.page-hero-back a:focus-visible { color: var(--primary-300); outline: none; }

/* ====================== SUBPAGE — ARTICLE BLOCK ======================
   Used by per-category sortiment subpages. Mirrors the .sortiment-icon
   tile pattern so icons match across overview + detail pages. */
#article {
  padding: clamp(2rem, 4vh, 3.5rem) clamp(1.5rem, 5vw, 4rem) clamp(2.5rem, 5vh, 4rem);
  background: transparent;
}
.article-inner {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: flex-start;
}
.article-icon {
  width: 5rem;
  height: 5rem;
  color: var(--primary-300);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 auto;
}
.article-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--accent-fill-soft);
  background: oklch(0.81 0.13 220 / 0.04);
  border-radius: 2px;
}
.article-icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-top: 1px solid var(--primary-300);
  border-left: 1px solid var(--primary-300);
}
.article-icon svg {
  width: 64%;
  height: 64%;
  display: block;
  overflow: visible;
  position: relative;
  z-index: 1;
}
.article-prose { min-width: 0; }
.article-prose h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  line-height: 1.18;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  margin: 0 0 1rem;
}
.article-prose p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 38rem;
  margin: 0 0 0.85rem;
}
.article-prose p:last-child { margin-bottom: 0; }
.article-prose strong { color: var(--text-primary); font-weight: 500; }
@media (max-width: 480px) {
  .article-inner { grid-template-columns: 4rem 1fr; gap: 1rem; }
  .article-icon  { width: 4rem; height: 4rem; }
}
@media (min-width: 1024px) {
  .article-inner    { max-width: 1040px; grid-template-columns: 6.5rem 1fr; gap: 2.25rem; }
  .article-icon     { width: 6.5rem; height: 6.5rem; }
  .article-prose h2 { font-size: clamp(1.8rem, 2.6vw, 2.1rem); }
  .article-prose p  { font-size: 1.1rem; max-width: 44rem; }
}
@media (min-width: 1600px) {
  .article-inner { max-width: 1180px; }
}

/* ====================== SUBPAGE — MARKEN BLOCK HOST ====================== */
#marken {
  padding: clamp(2rem, 4vh, 3rem) clamp(1.5rem, 5vw, 4rem) clamp(3rem, 6vh, 5rem);
  background: transparent;
}
.marken-inner { max-width: 880px; margin: 0 auto; }
.marken-headline {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  letter-spacing: 0.06em;
  color: var(--text-primary);
  margin: 0 0 1.25rem;
  padding-bottom: 0.5rem;
}
@media (min-width: 1024px) {
  .marken-inner    { max-width: 1040px; }
  .marken-headline { font-size: clamp(1.4rem, 2vw, 1.75rem); }
}
@media (min-width: 1600px) {
  .marken-inner { max-width: 1180px; }
}

/* ====================== SUBPAGE — PREV/NEXT CHIPS ====================== */
#prev-next {
  padding: clamp(1.5rem, 3vh, 2.5rem) clamp(1.5rem, 5vw, 4rem);
  background: transparent;
}
.prev-next-inner {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.prev-next-inner a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  transition: color 0.25s var(--ease-out-quart),
              background-color 0.25s var(--ease-out-quart);
}
.prev-next-inner a:hover,
.prev-next-inner a:focus-visible {
  color: var(--primary-300);
  background: rgba(255, 255, 255, 0.04);
  outline: none;
}
.prev-next-inner .overview-link {
  flex: 1 1 auto;
  text-align: center;
  justify-content: center;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}
@media (max-width: 540px) {
  .prev-next-inner   { flex-direction: column; align-items: stretch; gap: 0.4rem; }
  .prev-next-inner a { justify-content: center; text-align: center; }
}
@media (min-width: 1024px) { .prev-next-inner { max-width: 1040px; } }
@media (min-width: 1600px) { .prev-next-inner { max-width: 1180px; } }

/* ====================== SUBPAGE — BOTTOM CTA ======================
   Centered "Komm vorbei" wrap-up. Used on every per-category subpage
   (#subpage-cta) and the sortiment overview (#sortiment-cta). */
#subpage-cta,
#sortiment-cta {
  padding: clamp(3.5rem, 7vh, 5.5rem) clamp(1.5rem, 5vw, 4rem) clamp(4rem, 8vh, 6rem);
  background: transparent;
  text-align: center;
}
.cta-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.cta-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--primary-300);
  margin: 0;
}
.cta-headline {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  line-height: 1.15;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}
.cta-lead {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 30rem;
  margin: 0;
}
.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 0.25rem;
}

/* ====================== A11Y UTILITIES ====================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ====================== SORTIMENT SEARCH ======================
   Input + autocomplete dropdown on sortiment.html. JS in search.js. */
.search-wrap {
  position: relative;
  max-width: 36rem;
  margin: clamp(1.25rem, 2.5vh, 1.75rem) auto 0;
  width: 100%;
}
.search-wrap::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  pointer-events: none;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376fafb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>");
  opacity: 0.85;
}
#sortiment-search {
  width: 100%;
  padding: 0.9rem 1.25rem 0.9rem 2.6rem;
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  outline: none;
  transition: border-color 0.25s var(--ease-out-quart),
              background-color 0.25s var(--ease-out-quart);
}
#sortiment-search::placeholder {
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
#sortiment-search:focus,
#sortiment-search:hover {
  border-color: var(--primary-300);
  background: rgba(255, 255, 255, 0.07);
}

#sortiment-search-list {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: oklch(0.18 0.012 218 / 0.92);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6);
  z-index: 50;
  max-height: 360px;
  overflow-y: auto;
}
#sortiment-search-list[hidden] { display: none; }
#sortiment-search-list li { margin: 0; padding: 0; }
#sortiment-search-list a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.65rem 0.85rem;
  text-decoration: none;
  border-radius: 10px;
  transition: background-color 0.18s var(--ease-out-quart),
              color 0.18s var(--ease-out-quart);
}
#sortiment-search-list a:hover,
#sortiment-search-list a:focus-visible,
#sortiment-search-list a.is-active {
  background: rgba(118, 250, 251, 0.08);
  outline: none;
}
.search-result-label {
  font-family: var(--font-display);
  font-size: 0.98rem;
  letter-spacing: 0.005em;
  color: var(--text-primary);
}
.search-result-hint {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}
#sortiment-search-list a:hover .search-result-label,
#sortiment-search-list a.is-active .search-result-label { color: var(--primary-300); }
.search-empty {
  padding: 0.7rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ====================== SEARCH HIGHLIGHT ======================
   Wraps matched substrings in <mark class="search-highlight"> when
   the destination page reads ?q=<term> from the URL. */
mark.search-highlight {
  background: oklch(0.81 0.13 220 / 0.30);
  color: var(--primary-300);
  padding: 0 0.18em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-weight: inherit;
}
@media (prefers-reduced-motion: reduce) {
  mark.search-highlight { animation: none; }
}