/* ==========================================================================
   VENTIVA — 06 Chrome
   Header, Navigation, Footer. Global auf jeder Seite.

   Kein Amber ausser dem Warenkorb-Zähler: Der Rahmen der Seite soll leise
   sein, damit der Kaufbutton im Inhalt das lauteste Element bleibt.
   ========================================================================== */

/* --- Skip-Link ---------------------------------------------------------- */
.v-skip {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 100;
  padding: .8rem 1.4rem;
  background: var(--v-deep);
  color: #F2F6F3;
  border-radius: 0 0 var(--v-radius) var(--v-radius);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: transform var(--v-fast) var(--v-ease);
}
.v-skip:focus { transform: translate(-50%, 0); }

/* --- Ankündigungsleiste -------------------------------------------------- */
.v-announce {
  background: var(--v-deep);
  color: rgba(255, 255, 255, .78);
  font-family: var(--v-mono);
  font-size: var(--fs-mono);
  letter-spacing: .08em;
}
.v-announce__inner {
  display: flex;
  justify-content: center;
  gap: 2.4rem;
  padding-block: .62rem;
  text-align: center;
}
/* Auf schmalen Screens rotiert die Leiste nicht, sie zeigt nur den ersten
   Punkt. Bewegte Laufschrift kostet Aufmerksamkeit und bringt keine. */
@media (max-width: 860px) {
  .v-announce__item + .v-announce__item { display: none; }
}

/* --- Header --------------------------------------------------------------
   ACHTUNG, HIER LAG EIN FEHLER — bitte nicht zurückbauen:

   backdrop-filter stand ursprünglich direkt auf .v-header. Das sah richtig
   aus, hatte aber eine Nebenwirkung, die die komplette Mobil-Navigation
   zerlegt hat: Ein Element mit backdrop-filter (ebenso mit filter, transform,
   perspective oder will-change) wird laut Spezifikation zum *containing
   block* für alle position:fixed-Nachkommen.

   Das mobile Menü und sein Overlay liegen im DOM innerhalb von .v-header.
   Sie sind position:fixed mit inset:0 — und wurden dadurch nicht am
   Bildschirm ausgerichtet, sondern am 72 Pixel hohen Header. Gemessen:
   Drawer 315x128 statt 375x812, Overlay 0 Pixel hoch.

   Lösung: Der Weichzeichner sitzt jetzt auf einem Pseudo-Element. Optisch
   identisch, aber .v-header selbst ist wieder ein ganz normales Element,
   und fixed-Nachkommen richten sich wieder am Viewport aus.
   -------------------------------------------------------------------------- */
.v-header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid transparent;
  transition: border-color var(--v-fast) var(--v-ease);
}

.v-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Deckende Farbe zuerst: Ohne color-mix-Unterstützung wäre der Header sonst
     transparent und der Text läge unlesbar auf dem Inhalt. */
  background: var(--v-mist);
  background: color-mix(in srgb, var(--v-mist) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  transition: background var(--v-fast) var(--v-ease);
}

/* Die Linie erscheint erst beim Scrollen — im Ruhezustand sitzt der Header
   ohne Kante auf der Seite. */
.v-header.is-scrolled { border-bottom-color: var(--v-line); }
.v-header.is-scrolled::before {
  background: var(--v-mist);
  background: color-mix(in srgb, var(--v-mist) 96%, transparent);
}

/* Bei offenem Menü über alles andere legen.
   Grund: .v-header ist durch z-index:60 ein eigener Stapelkontext. Der
   Drawer darin kann deshalb nie höher steigen als der Header selbst — und
   die Sticky-Kaufleiste auf der Produktseite liegt mit z-index:90 darüber.
   Sie hätte das offene Menü verdeckt. */
.v-header.is-nav-open { z-index: 9999; }

.v-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, .5rem + 3vw, 4rem);
  min-height: 72px;
}

/* --- Wortmarke ----------------------------------------------------------- */
.v-wordmark {
  font-family: var(--v-display);
  font-weight: 600;
  font-stretch: 118%;
  font-size: 1.32rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--v-ink);
  flex: none;
  line-height: 1;
}
.v-header__logo img { max-height: 38px; width: auto; }

/* --- Menü ---------------------------------------------------------------- */
.v-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, .6rem + 1.6vw, 2.4rem);
}
.v-menu a {
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--v-ink-60);
  padding-block: .4rem;
  transition: color var(--v-fast) var(--v-ease);
}
.v-menu a:hover { color: var(--v-ink); }

/* Aktuelle Seite: kein Amber, sondern volle Textfarbe plus feine Unterkante. */
.v-menu .current-menu-item > a,
.v-menu .current_page_item > a {
  color: var(--v-ink);
  box-shadow: inset 0 -1px 0 0 currentColor;
}

.v-menu--stack { flex-direction: column; align-items: flex-start; gap: .55rem; }

.v-header__nav { margin-right: auto; }

/* --- Aktionen rechts ----------------------------------------------------- */
.v-header__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: none;
  margin-left: auto;
}

.v-header__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: var(--v-ink);
  text-decoration: none;
  transition: background var(--v-fast) var(--v-ease);
}
.v-header__cart:hover { background: rgba(18, 58, 52, .07); }
.v-header__cart svg { width: 22px; height: 22px; }

.v-header__count {
  position: absolute;
  top: 4px;
  right: 3px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: 999px;
  background: var(--v-heat);
  color: var(--v-ink);
  font-family: var(--v-mono);
  font-size: .66rem;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--v-mist);
}
.v-header__count.is-empty { display: none; }

/* --- Burger -------------------------------------------------------------- */
.v-burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--v-ink);
  cursor: pointer;
  place-items: center;
  align-content: center;
  justify-items: center;
  gap: 5px;
}
.v-burger__bar {
  display: block;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--v-fast) var(--v-ease),
              opacity var(--v-fast) var(--v-ease);
}
/* Aus zwei Strichen wird ein Kreuz — zwei statt drei Striche, weil das
   Kreuz dann ohne verschwindende Mittellinie auskommt. */
.is-nav-open .v-burger__bar:nth-child(2) { transform: translateY(3.25px) rotate(45deg); }
.is-nav-open .v-burger__bar:nth-child(3) { transform: translateY(-3.25px) rotate(-45deg); }

.v-header__scrim { display: none; }

/* --- Mobil: dasselbe <nav> wird zum Panel -------------------------------- */
@media (max-width: 860px) {

  .v-burger { display: grid; }

  .v-header__nav {
    position: fixed;
    /* inset:0 statt height:100vh — Absicht: Auf iOS ist 100vh grösser als
       der sichtbare Bereich, solange die Adressleiste eingeblendet ist. Der
       untere Menüpunkt läge dann unter der Leiste. inset:0 folgt dagegen dem
       Layout-Viewport und stimmt in beiden Zuständen. */
    inset: 0 0 0 auto;
    width: min(86vw, 360px);
    /* Randabstände für Geräte mit Notch/Home-Indicator. */
    padding: calc(5.5rem + env(safe-area-inset-top)) var(--v-gutter)
             calc(2rem + env(safe-area-inset-bottom));
    padding-right: calc(var(--v-gutter) + env(safe-area-inset-right));
    background: var(--v-deep);
    color: #F2F6F3;
    transform: translateX(100%);
    /* visibility statt nur transform: sonst bleibt das geschlossene Panel
       per Tab erreichbar, obwohl es niemand sieht. */
    visibility: hidden;
    transition: transform var(--v-slow) var(--v-ease-out),
                visibility 0s linear var(--v-slow);
    z-index: 70;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Wischen im Panel darf nicht die Seite dahinter mitziehen. */
    overscroll-behavior: contain;
  }

  .v-header.is-nav-open .v-header__nav {
    transform: none;
    visibility: visible;
    transition: transform var(--v-slow) var(--v-ease-out),
                visibility 0s;
  }

  .v-header__nav .v-menu {
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
  }

  /* Touchflächen: mindestens 48 Pixel hoch und über die volle Panelbreite.
     Vorher waren es rund 40 Pixel und nur so breit wie der Text — auf einem
     Telefon trifft man das mit dem Daumen nur mit Glück. */
  .v-header__nav .v-menu a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: .55rem 0;
    font-family: var(--v-display);
    font-stretch: 112%;
    font-size: var(--fs-h3);
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
  }
  .v-header__nav .v-menu a:hover,
  .v-header__nav .v-menu .current-menu-item > a { color: #FFF; }

  /* Unterkante als Trenner statt Abstand — hält die Liste ruhig und macht
     die Trefferflächen sichtbar voneinander abgegrenzt. */
  .v-header__nav .v-menu li + li { border-top: 1px solid rgba(255, 255, 255, .10); }
  .v-header__nav .v-menu .current-menu-item > a { box-shadow: none; }

  .v-header__scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(12, 22, 20, .5);
    z-index: 65;
    /* Ohne diese Zeile blitzt das Overlay beim Schliessen hart weg. */
    animation: v-scrim-in var(--v-fast) var(--v-ease) both;
  }
  .v-header__scrim[hidden] { display: none; }

  @keyframes v-scrim-in { from { opacity: 0; } to { opacity: 1; } }

  /* Panel offen = Seite dahinter steht still. */
  body.v-nav-locked { overflow: hidden; }
}

/* --- Zahlarten (global, auch im Footer) ---------------------------------- */
.v-payments {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  font-family: var(--v-mono);
  font-size: var(--fs-mono);
  color: var(--v-ink-60);
  letter-spacing: .06em;
}
.v-payments span {
  padding: .3rem .6rem;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--v-line);
}

/* --- WooCommerce-Meldungen ----------------------------------------------- */
/* Stehen hier und nicht in 08-cart.css, weil sie auf jeder Woo-Seite
   auftauchen können — auch auf der Produktseite nach "In den Warenkorb". */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 1rem 1.2rem;
  border-radius: var(--v-radius);
  background: var(--v-paper);
  box-shadow: inset 0 0 0 1px var(--v-line);
  font-size: var(--fs-sm);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
}
.woocommerce-message { box-shadow: inset 0 0 0 1px var(--v-cool); }
.woocommerce-error   { box-shadow: inset 0 0 0 1px #B9563F; color: #8E3F2D; }
.woocommerce-error li { list-style: none; }

.woocommerce-message .button,
.woocommerce-info .button {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 1px var(--v-line);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover { background: rgba(18, 58, 52, .06); }

/* --- Footer -------------------------------------------------------------- */
.v-footer {
  margin-top: var(--v-section);
  padding-block: clamp(3.5rem, 2rem + 5vw, 6rem) 2.5rem;
}

.v-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--v-col-gap);
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
@media (max-width: 980px) { .v-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .v-footer__top { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; } }

.v-wordmark--static {
  display: block;
  font-family: var(--v-display);
  font-weight: 600;
  font-stretch: 118%;
  font-size: 1.32rem;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin-bottom: 1rem;
}

.v-footer__claim {
  margin: 0 0 1.6rem;
  max-width: 34ch;
  font-size: var(--fs-sm);
  color: var(--v-ink-60);
}
.v-footer__scale { max-width: 260px; }

.v-footer__nav .v-eyebrow,
.v-footer__col .v-eyebrow { margin-bottom: 1.1rem; }

.v-footer__legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.v-footer__legal a,
.v-footer__contact a {
  font-size: var(--fs-sm);
  color: var(--v-ink-60);
  text-decoration: none;
  transition: color var(--v-fast) var(--v-ease);
}
.v-footer__legal a:hover,
.v-footer__contact a:hover { color: var(--v-ink); text-decoration: underline; }

.v-footer__contact { margin: 0; font-size: var(--fs-sm); }
.v-footer__hours { color: var(--v-ink-40); }

.v-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--v-line);
}
.v-footer__copy {
  margin: 0;
  font-family: var(--v-mono);
  font-size: var(--fs-mono);
  color: var(--v-ink-60);
  letter-spacing: .06em;
}