html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  /* subtle paper-grain texture — premium editorial touch, barely visible */
  background-image: radial-gradient(circle at 1px 1px, rgba(10,22,40,0.05) 1px, transparent 0);
  background-size: 24px 24px;
}

/* Momentum scrolling inside drawers/panels on iOS — keeps the mobile menu,
   cart panel and FAQ accordions feeling native instead of stepping. */
#mobile-menu nav,
#cart-panel .scrollbar-thin,
.faq-a {
  -webkit-overflow-scrolling: touch;
}

/* Editorial display type — every H1/H2 site-wide gets the serif treatment
   automatically; H3 and below stay on Inter for readability at small sizes. */
h1, h2 {
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: -0.015em;
}

/* Gradient display text — used sparingly on the hero headline for a premium
   sheen. Explicit -webkit-background-clip so it never silently renders
   invisible text on Safari the way an unprefixed utility class could. */
.text-gradient-brand {
  background-image: linear-gradient(120deg, #0C66A5 0%, #159BE8 45%, #3B8DD0 75%, #185A93 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #159BE8; /* fallback if background-clip: text isn't supported */
  -webkit-text-fill-color: transparent;
}

::selection { background: #BFE4FE; color: #0A1628; }

:focus-visible { outline: 2px solid #159BE8; outline-offset: 2px; }

/* ============================================================
   GLOBAL MOTION — smooth, consistent easing on every interactive
   element site-wide. Uses an "expo-out" curve for a premium feel.
   ============================================================ */
a, button, input, textarea, select {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity;
  transition-duration: .28s;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
}

/* Primary blue CTAs — vivid gradient fill instead of a flat color, lift +
   deepen shadow on hover/press. Scoped to <a>/<button> so it never touches
   non-interactive containers that happen to share the same background utility. */
a[class*="bg-sky-500"], button[class*="bg-sky-500"] {
  background-image: linear-gradient(135deg, #54BAF7 0%, #159BE8 45%, #0C66A5 100%);
  background-color: transparent;
  background-size: 160% 160%;
  background-position: 0% 0%;
  transition: background-position .5s cubic-bezier(.4,0,.2,1), transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
a[class*="bg-sky-500"]:hover, button[class*="bg-sky-500"]:not(:disabled):hover {
  background-position: 100% 100%;
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 20px 38px -10px rgba(21,155,232,.5);
}
a[class*="bg-sky-500"]:active, button[class*="bg-sky-500"]:not(:disabled):active {
  transform: translateY(0);
}

/* Dark ink CTAs (cart button, ANFRAGEN pill etc.) — deep navy-to-blue gradient */
a[class*="bg-ink"], button[class*="bg-ink"] {
  background-image: linear-gradient(135deg, #163E63 0%, #0A1628 55%, #0B2C49 100%);
  background-color: transparent;
  background-size: 160% 160%;
  background-position: 0% 0%;
  transition: background-position .5s cubic-bezier(.4,0,.2,1), transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s cubic-bezier(.4,0,.2,1);
}
a[class*="bg-ink"]:hover, button[class*="bg-ink"]:not(:disabled):hover {
  background-position: 100% 100%;
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 20px 38px -10px rgba(10,22,40,.45);
}
a[class*="bg-ink"]:active, button[class*="bg-ink"]:not(:disabled):active {
  transform: translateY(0);
}

/* Outline / ghost buttons */
a[class*="border-slate-300"]:hover, button[class*="border-slate-300"]:hover {
  transform: translateY(-2px);
  border-color: #8FA3AF;
}

/* Card hover lift — every bordered rounded-2xl content card site-wide
   gets a consistent, subtle lift + shadow + teal border glow.
   The resting state carries a two-part shadow (a 1px contact line plus a
   soft ambient pool). Without it these cards sat perfectly flat, which is
   most of why the subpages read as an untouched template. */
div[class*="rounded-2xl"][class*="border-slate-200"] {
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1), border-color .4s ease;
  box-shadow:
    0 1px 2px rgba(10,22,40,.05),
    0 10px 26px -14px rgba(10,22,40,.14);
}
/* NOTE: this was `a > div[...]`, with no :hover — which pinned every card
   inside a link to the raised state permanently, so those cards floated
   with a drop shadow at rest and had no hover response left to give. */
a:hover > div[class*="rounded-2xl"][class*="border-slate-200"],
div[class*="rounded-2xl"][class*="border-slate-200"]:hover {
  transform: translateY(-7px);
  box-shadow:
    0 2px 4px rgba(10,22,40,.06),
    0 26px 52px -18px rgba(10,22,40,.24);
  border-color: #BFE4FE;
}

/* Icon chips inside cards get a little bounce when their card is hovered */
div[class*="bg-sky-50"][class*="rounded-xl"], div[class*="bg-sky-50"][class*="rounded-2xl"] {
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), background-color .3s ease;
}
div[class*="rounded-2xl"][class*="border-slate-200"]:hover > div[class*="bg-sky-50"] {
  transform: scale(1.22) rotate(-7deg);
}

/* Nav links — animated underline sweep */
.nav-link { color: #4A5C68; transition: color .25s ease; position: relative; }
.nav-link:hover { color: #0A1628; }
.nav-link.active { color: #0A1628; font-weight: 600; }
nav .nav-link::after,
nav button.nav-link::after {
  content: '';
  position: absolute;
  left: 2px; right: 2px; bottom: -8px;
  height: 2px;
  background: #159BE8;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
nav .nav-link:hover::after, nav .nav-link.active::after { transform: scaleX(1); }

/* Sticky header gains depth once the page scrolls */
header.sticky { transition: box-shadow .35s ease, background-color .35s ease; }
header.sticky.is-scrolled {
  box-shadow: 0 12px 32px -16px rgba(10,22,40,.22);
  background-color: rgba(255,255,255,.92);
}

/* Transparent hero header (index.html only) — floats over the hero image
   with no background, then picks up the normal solid header look once the
   page scrolls past the hero. */
header.header-transparent {
  background-color: transparent;
  border-bottom: 1px solid transparent;
}
header.header-transparent.is-scrolled {
  background-color: rgba(255,255,255,.92);
  border-bottom-color: rgba(216,226,233,.7);
  box-shadow: 0 12px 32px -16px rgba(10,22,40,.22);
  backdrop-filter: blur(16px);
}

/* Animated hamburger -> close icon */
#mobile-menu-btn { position: relative; }
#mobile-menu-btn .hamburger-bar {
  position: absolute;
  left: 10px; right: 10px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .2s ease, top .3s cubic-bezier(.4,0,.2,1);
}
#mobile-menu-btn .hamburger-bar:nth-child(1) { top: 14px; }
#mobile-menu-btn .hamburger-bar:nth-child(2) { top: 19px; }
#mobile-menu-btn .hamburger-bar:nth-child(3) { top: 24px; }
#mobile-menu-btn.is-active .hamburger-bar:nth-child(1) { top: 19px; transform: rotate(45deg); }
#mobile-menu-btn.is-active .hamburger-bar:nth-child(2) { opacity: 0; }
#mobile-menu-btn.is-active .hamburger-bar:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* Mobile menu — slide-in drawer from the right, with dimmed backdrop */
#mobile-menu-backdrop {
  opacity: 0;
  transition: opacity .4s ease;
}
#mobile-menu-backdrop.is-open { opacity: 1; }

#mobile-menu {
  transform: translateX(100%);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
#mobile-menu.is-open { transform: translateX(0); }

#mobile-menu .mobile-link {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);
}
#mobile-menu.is-open .mobile-link { opacity: 1; transform: none; }
/* nth-of-type (not nth-child) so the delay sequence stays correct even with
   non-link siblings (the divider, the auth-area container) mixed in. */
#mobile-menu a.mobile-link:nth-of-type(1)  { transition-delay: .10s; }
#mobile-menu a.mobile-link:nth-of-type(2)  { transition-delay: .13s; }
#mobile-menu a.mobile-link:nth-of-type(3)  { transition-delay: .16s; }
#mobile-menu a.mobile-link:nth-of-type(4)  { transition-delay: .19s; }
#mobile-menu a.mobile-link:nth-of-type(5)  { transition-delay: .22s; }
#mobile-menu a.mobile-link:nth-of-type(6)  { transition-delay: .25s; }
#mobile-menu a.mobile-link:nth-of-type(7)  { transition-delay: .28s; }
#mobile-menu a.mobile-link:nth-of-type(8)  { transition-delay: .31s; }
#mobile-menu a.mobile-link:nth-of-type(9)  { transition-delay: .34s; }
#mobile-menu a.mobile-link:nth-of-type(10) { transition-delay: .37s; }
#mobile-menu a.mobile-link:nth-of-type(11) { transition-delay: .40s; }
#mobile-menu a.mobile-link:nth-of-type(12) { transition-delay: .43s; }

/* Desktop mega-menu dropdowns — scale + fade, not just fade */
#about-dropdown-menu, #product-dropdown-menu, #user-menu {
  animation: dropdownIn .3s cubic-bezier(.16,1,.3,1) forwards;
  transform-origin: top center;
}
@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-10px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mega-item { transition: background-color .2s ease; }
.mega-item .mega-icon { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.mega-item:hover .mega-icon { transform: scale(1.12) rotate(-4deg); }

/* Custom range slider */
input[type=range] {
  -webkit-appearance: none;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, #159BE8 var(--val,50%), #D8E2E9 var(--val,50%));
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #159BE8;
  box-shadow: 0 2px 6px rgba(10,22,40,.25);
  cursor: pointer;
  transition: transform .15s ease;
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  border: 3px solid #159BE8; cursor: pointer;
}

/* Cap ridges */
.cap-ridges {
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 2px, transparent 2px, transparent 6px);
}

.drop-zone {
  transition: all .25s cubic-bezier(.4,0,.2,1);
}
.drop-zone:hover { border-color: #8FD3FD; }
.drop-zone.drag-over {
  border-color: #159BE8;
  background-color: rgba(21,155,232,0.07);
  transform: scale(1.01);
}

.flavor-card {
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s cubic-bezier(.16,1,.3,1), border-color .25s ease;
}
.flavor-card:hover { transform: translateY(-4px) scale(1.02); }
.flavor-card.active {
  box-shadow: 0 8px 24px -6px rgba(10,22,40,.28);
  border-width: 2px;
}

.spinner {
  border: 3px solid rgba(10,22,40,0.08);
  border-top-color: #159BE8;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.scrollbar-thin::-webkit-scrollbar { width: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #BECDD6; border-radius: 999px; }

#logo-on-bottle {
  filter: drop-shadow(0 1px 1px rgba(10,22,40,.1));
}

.toast {
  animation: slideUp .35s cubic-bezier(.2,.9,.3,1.2) forwards;
}

.backdrop-panel {
  animation: fadeIn .3s ease forwards;
}

.cart-panel {
  animation: slideInRight .4s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes slideInRight { from { transform: translateX(100%); opacity:.6 } to { transform: translateX(0); opacity:1 } }

/* Hero carousel slides — cross-fade with a gentle rise, driven by the
   same opacity-0/opacity-100 classes home.js already toggles. */
.hero-slide {
  transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}
.hero-slide.opacity-0   { transform: translateY(14px) scale(.985); }
.hero-slide.opacity-100 { transform: translateY(0) scale(1); }

/* Partners marquee */
.marquee-track {
  animation: marquee 22s linear infinite;
  width: max-content;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Edge fade — logos dissolve into the background at the left/right rather
   than clipping abruptly, so the strip reads as endless rather than cut off. */
.marquee-fade {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.flavor-showcase-card { transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s cubic-bezier(.16,1,.3,1); }

.timeline-dot { box-shadow: 0 0 0 4px #EFF8FF; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.timeline-dot:hover { transform: scale(1.15); }

/* Configurator stepper — numbered badges connected by a thin line, so the
   1-2-3 flow on the shop page reads as a guided path instead of plain
   headings stacked on top of each other. */
.step-badge {
  box-shadow: 0 0 0 5px #EFF8FF, 0 8px 20px -6px rgba(21,155,232,.55);
}
.step-wrap:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: -32px;
  width: 2px;
  background: linear-gradient(to bottom, #159BE8, rgba(21,155,232,.12));
  opacity: .4;
}

/* Section header banner on sub-pages — vivid water-blue gradient + soft glow.
   Deliberately saturated blue (not near-black navy) so every page opens on
   an unmistakably "water" note rather than reading as a dark corporate slab. */
/* Subpage hero — "the descent". Every subpage opened with the same flat
   mid-blue slab, which is what made them read as a template. This carries
   the homepage's deep-water language across instead: the same --h3-* tokens,
   a drifting light glow, and a depth-ruler down the left edge that echoes
   the 902 m gauge on the home banner. The ruler earns its place — the
   spring's altitude is the brand's actual story, so it encodes something
   true rather than decorating.
   isolation:isolate lets the pseudo-layers sit at z-index:-1 — above the
   section's own background, below its content — with no markup changes, so
   all seven pages using .page-hero inherit this for free. */
.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(125% 85% at 80% 4%, rgba(127, 216, 255, .26) 0%, transparent 55%),
    linear-gradient(168deg, var(--h3-mid) 0%, #08375F 48%, var(--h3-deep) 100%);
  /* lit rim where the deep hero meets the light page below — same bevel
     language as the diagonal panels on the homepage */
  box-shadow: inset 0 -1px 0 rgba(190, 232, 255, .32);
}
section.page-hero {
  /* beats Tailwind's py-16/py-20 on specificity (0,1,1 vs 0,1,0) so the
     hero gets real presence without touching seven files of markup */
  padding-block: clamp(4.25rem, 7.5vw, 6.75rem);
}
.page-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  top: -36%;
  right: -6%;
  background: radial-gradient(circle at 45% 45%, rgba(224, 247, 255, .4), rgba(56, 189, 248, .16) 55%, transparent 72%);
  filter: blur(60px);
  animation: h3Drift 28s ease-in-out infinite;
}
/* Depth ruler: hairline ticks + a vertical rule hugging the left edge. */
.page-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: 0;
  bottom: 0;
  left: 0;
  width: 24px;
  background:
    repeating-linear-gradient(180deg, rgba(190, 232, 255, .3) 0 1px, transparent 1px 54px),
    linear-gradient(90deg, transparent 0 23px, rgba(190, 232, 255, .22) 23px 24px);
}
@media (max-width: 639px) {
  /* the ruler would sit under the 20px content inset on phones */
  .page-hero::after { display: none; }
}
/* Same ice-white shine the homepage headline uses, tying the subpages to it.
   Guarded: without background-clip support the text stays plain white rather
   than turning invisible. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .page-hero h1 {
    background: linear-gradient(96deg, #fff 0%, #DCF2FF 36%, #9FE2FF 60%, #fff 92%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: h3Shine 8s ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero::before, .page-hero h1 { animation: none; }
}

/* Scroll-reveal — applied automatically via main.js, no per-page markup needed */
.reveal {
  opacity: 0;
  transform: translateY(64px) scale(.92);
  filter: blur(6px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1), filter .8s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
/* Cascading children — main.js stamps --reveal-i on direct children of a
   revealed section so cards/icons/testimonials stagger in one by one
   instead of popping in as a single flat block. */
.reveal > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
}
.reveal.is-visible > * {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal > *, .hero-slide, #mobile-menu, #mobile-menu .mobile-link { transition: none !important; animation: none !important; }
  .reveal, .reveal > * { opacity: 1; transform: none; filter: none; }
}

/* Scroll-progress line — thin gradient bar pinned under the sticky header,
   fills left-to-right with page scroll. Injected once by main.js. */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, #54BAF7, #159BE8 45%, #0C66A5);
  z-index: 60;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  #scroll-progress { display: none; }
}

/* ===================== QUELLE — PRODUKTBAND =====================
   Vollflächiges Produktbild direkt unter dem Hero. Der ganze Trick steckt in
   der Oberkante: sie darf nirgends als Kante lesbar sein.
   Dafür arbeiten zwei Dinge zusammen:
     1. Kein Verlauf an der Naht. Sektionshintergrund, Hero-Unterkante und
        Bildoberkante liegen alle drei auf --quelle-top — es ist buchstäblich
        dieselbe Farbe, nichts, was ineinander übergehen müsste.
     2. Das Bild blendet über seine ersten 10 % ein. Das glättet nur noch die
        Textur (Bokeh, Spritzer), nicht mehr die Farbe. Weil dort ohnehin nur
        leeres Blau über den Verschlüssen liegt, verschwindet nichts vom
        Produkt — die Flaschen tauchen aus dem Wasser auf.
   Die Bilddatei ist eine breitere Leinwand als die Aufnahme: das Motiv sitzt
   unverändert in der Mitte, die Flanken sind sein eigener, in die Breite
   gezogener Randstreifen. Dadurch wirken die Flaschen kleiner, das Band bleibt
   aber randlos und ohne sichtbaren Bildkasten. Die Leinwand ist nur wenig
   breiter als die Aufnahme (2010 zu 1672) und wird in Originalgröße
   ausgeliefert — beides zusammen hält den scharfen Kern bei seiner vollen
   Auflösung. Das Seitenverhältnis von 2,14 hält die Sektion entsprechend
   flach — kein max-height nötig, und ohne Beschnitt bleibt oben genau der
   Spielraum stehen, den Maske und Ken-Burns-Zoom brauchen.
   Atmosphäre ist die des Heros, wiederverwendet statt neu erfunden: dieselbe
   .h3__bubbles-Markup (vom selben Loop in main.js gefüllt) und dieselben
   h3Sweep-Keyframes, damit die Bewegung über die Naht weiterläuft. */
.quelle {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  /* Die Oberkante des Produktbilds ist keine Fläche, sondern eine Vignette:
     in der Mitte ~#0166B1, an den Rändern ~#002044. Gegen eine einfarbige
     Fläche konnte die Maske deshalb nie sauber ausblenden — man sah einen
     hellen Fleck in der Mitte und dunkle Ecken. Der Hintergrund trägt jetzt
     genau dieses Profil, darüber liegt auf der Vorlaufhöhe die Heck-Farbe des
     Heros und blendet in das Profil ab. Naht zum Hero und Naht zum Bild sind
     damit beide farbgleich. */
  --quelle-lead: clamp(32px, 4.2vw, 68px);
  background-color: var(--quelle-top);
  background-image:
    linear-gradient(180deg, var(--quelle-top) 0%, rgba(1, 70, 127, 0) 100%),
    linear-gradient(90deg,
      #002044 0%, #00244A 6%, #00305F 12%, #00437D 20%, #005498 30%,
      #005FA8 40%, #0166B1 50%, #0161A9 60%, #015395 70%, #01447F 80%,
      #003568 88%, #002952 94%, #00244C 100%);
  background-size: 100% var(--quelle-lead), 100% 100%;
  background-repeat: no-repeat;
  background-position: top, top;
  padding-top: var(--quelle-lead);
}

/* Hier stand die Kaustik des Heros ein zweites Mal. Sie ist wieder raus: der
   Hero hat unter ihr ein strukturiertes Bild, diese Sektion dagegen eine
   glatte Fläche in einer einzigen Farbe — darauf zeichnen sich die Strahlen
   des konischen Verlaufs als saubere Linien ab, und der Kasten des Elements
   bekommt trotz blur() eine sichtbare Kante. Genau das, was die durchgehende
   Fläche kaputt macht. Die Blasen tragen die Bewegung hier allein. */
.quelle__bubbles { z-index: 4; }

/* Die Bühne trägt die Maske (fester Kasten), das Bild darin die Bewegung —
   sonst würde die weiche Oberkante mitskalieren und wieder hart werden. */
.quelle__stage {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 2010 / 941;
  overflow: hidden;
  /* Kurz gehalten: der Hintergrund liegt jetzt auf derselben Farbe wie die
     Bildkante, die Maske muss keinen Farbsprung mehr kaschieren. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.7) 3.5%, #000 8%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.7) 3.5%, #000 8%);
}
/* Zoom-Ursprung unten: was der Ken-Burns-Zoom wegschiebt, ist immer das
   leere Blau über den Verschlüssen, nie die Eiskante darunter. Die
   Verschlüsse sitzen bei 21,3 % der Bildhöhe; bei vollem Zoom wandern sie
   auf 17,4 % und bleiben damit unterhalb der 14 %-Maske — also jederzeit
   deckend. Wird an einem der drei Werte gedreht, muss das nachgerechnet
   werden, sonst blassen die Verschlüsse aus. */
/* <picture> aus dem Layout nehmen, sonst hängt height:100% des Bildes an
   einem inline-Element ohne eigene Höhe. */
.quelle__stage picture { display: contents; }
.quelle__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
  transform-origin: 50% 100%;
  animation: quelleDrift 30s ease-in-out infinite;
  will-change: scale;
}
/* Der Zoom läuft über die Einzel-Property scale, nicht über transform:
   so bleibt translate für den Parallax weiter unten frei. */
@keyframes quelleDrift {
  0%, 100% { scale: 1.02; }
  50%      { scale: 1.05; }
}
/* Eiskante löst sich in die weiße Ticker-Leiste darunter auf. */
.quelle__stage::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: clamp(40px, 6vw, 84px);
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 58%, #fff 100%);
}
.quelle__note {
  position: absolute;
  right: 1rem;
  bottom: clamp(46px, 6.5vw, 92px);
  z-index: 3;
  margin: 0;
  font-size: .625rem;
  color: #0F172A;
  background: rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: .25rem .625rem;
  border-radius: 999px;
}

/* Scroll-getriebener Parallax. Rein dekorativ — Browser ohne
   Scroll-Timelines zeigen einfach das ruhige Bild, ohne Fallback-Skript. */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    /* Der Zoom hat seinen Ursprung unten, der Spielraum liegt also
       ausschließlich oben (mindestens 2 %). Der Parallax darf deshalb nur
       nach unten laufen — nach oben würde er die Eiskante anheben und den
       Hintergrund unter dem Bild freilegen. */
    @keyframes quelleParallax {
      from { translate: 0 0; }
      to   { translate: 0 2%; }
    }
    .quelle__stage { view-timeline: --quelle-stage; }
    .quelle__img {
      animation: quelleDrift 30s ease-in-out infinite, quelleParallax linear both;
      animation-timeline: auto, --quelle-stage;
      animation-range: normal, entry 0% exit 100%;
      will-change: scale, translate;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .quelle__img { animation: none; scale: 1.02; }
}

@media (max-width: 767px) {
  /* Hier spielt <picture> die unverbreiterte Aufnahme aus. Die Bühne über-
     nimmt jetzt deren eigenes Seitenverhältnis, statt einen festen, viel zu
     hohen Kasten vorzugeben: bei 92vw Höhe schnitt der cover-Zuschnitt links
     und rechts je ein Drittel weg, die äußeren Flaschen waren halbiert. So
     steht die ganze Reihe im Bild, beschnitten wird nur noch das, was der
     Ken-Burns-Zoom holt. */
  .quelle { padding-top: clamp(26px, 7vw, 44px); }
  .quelle__stage {
    aspect-ratio: 1200 / 675;
    height: auto;
  }
  /* Das Band ist jetzt niedriger — der Hinweis rückt in den weißen Auslauf
     unter der Eiskante, sonst liegt er quer über den Flaschen. */
  .quelle__note { right: .75rem; bottom: .4rem; font-size: .5625rem; padding: .2rem .55rem; }
}

/* ===================== PREMIUM BUTTON SYSTEM =====================
   Both site-wide CTA pairings (sky primary, ink secondary) share one
   treatment. What makes these read as expensive rather than as a colored
   rectangle is the layered box-shadow: a bright inset top edge and dark
   inset bottom edge give the surface real thickness, a tight contact
   shadow anchors it to the page, and a wide brand-tinted glow sits under
   it. Hover raises all three together; :active genuinely presses in
   (inset shadow, no lift) instead of just changing color.
   Timing is deliberately unhurried — a snappy 150ms sweep is the tell of
   a cheap button. */
a[class*="bg-sky-500"][class*="hover:bg-sky-400"],
button[class*="bg-sky-500"][class*="hover:bg-sky-400"],
a[class*="bg-ink"][class*="hover:bg-slate-800"],
button[class*="bg-ink"][class*="hover:bg-slate-800"] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .3s cubic-bezier(.16,1,.3,1),
              box-shadow .42s cubic-bezier(.16,1,.3,1),
              background-image .42s ease;
}
/* --- Primary (sky) --- */
a[class*="bg-sky-500"][class*="hover:bg-sky-400"],
button[class*="bg-sky-500"][class*="hover:bg-sky-400"] {
  background-image: linear-gradient(180deg, #4FC0F5 0%, #159BE8 52%, #0B6FB4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(4,32,63,.28),
    0 1px 2px rgba(6,42,78,.22),
    0 10px 24px -10px rgba(21,155,232,.65);
}
a[class*="bg-sky-500"][class*="hover:bg-sky-400"]:hover,
button[class*="bg-sky-500"][class*="hover:bg-sky-400"]:hover {
  background-image: linear-gradient(180deg, #6ACDF9 0%, #33ABEE 52%, #0C7FCC 100%);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(4,32,63,.22),
    0 2px 4px rgba(6,42,78,.2),
    0 18px 38px -12px rgba(21,155,232,.8);
}
a[class*="bg-sky-500"][class*="hover:bg-sky-400"]:active,
button[class*="bg-sky-500"][class*="hover:bg-sky-400"]:active {
  transform: translateY(0);
  box-shadow:
    inset 0 2px 5px rgba(4,32,63,.42),
    0 1px 2px rgba(6,42,78,.25);
}
/* --- Secondary (ink) --- */
a[class*="bg-ink"][class*="hover:bg-slate-800"],
button[class*="bg-ink"][class*="hover:bg-slate-800"] {
  background-image: linear-gradient(180deg, #1D3E61 0%, #0A1628 58%, #060F1A 100%);
  box-shadow:
    inset 0 1px 0 rgba(190,232,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 1px 2px rgba(4,16,30,.3),
    0 10px 24px -10px rgba(4,16,30,.6);
}
a[class*="bg-ink"][class*="hover:bg-slate-800"]:hover,
button[class*="bg-ink"][class*="hover:bg-slate-800"]:hover {
  background-image: linear-gradient(180deg, #2A5B87 0%, #0A1628 58%, #060F1A 100%);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(190,232,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 2px 4px rgba(4,16,30,.3),
    0 18px 38px -12px rgba(4,16,30,.72);
}
a[class*="bg-ink"][class*="hover:bg-slate-800"]:active,
button[class*="bg-ink"][class*="hover:bg-slate-800"]:active {
  transform: translateY(0);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.5),
    0 1px 2px rgba(4,16,30,.3);
}
/* --- Outline / ghost --- */
a[class*="border-2"][class*="border-sky-500"],
button[class*="border-2"][class*="border-sky-500"] {
  position: relative;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease,
              transform .3s cubic-bezier(.16,1,.3,1), box-shadow .42s cubic-bezier(.16,1,.3,1);
}
a[class*="border-2"][class*="border-sky-500"]:hover,
button[class*="border-2"][class*="border-sky-500"]:hover {
  transform: translateY(-2px);
  border-color: #159BE8;
  box-shadow: 0 14px 30px -14px rgba(21,155,232,.6);
}
/* Keyboard focus has to be visible on every CTA — the default ring is lost
   against these saturated fills. */
a[class*="bg-sky-500"][class*="hover:bg-sky-400"]:focus-visible,
button[class*="bg-sky-500"][class*="hover:bg-sky-400"]:focus-visible,
a[class*="bg-ink"][class*="hover:bg-slate-800"]:focus-visible,
button[class*="bg-ink"][class*="hover:bg-slate-800"]:focus-visible,
a[class*="border-2"][class*="border-sky-500"]:focus-visible,
button[class*="border-2"][class*="border-sky-500"]:focus-visible {
  outline: 2px solid #7FD8FF;
  outline-offset: 3px;
}
/* Slow sheen sweep across the face on hover. */
a[class*="bg-sky-500"][class*="hover:bg-sky-400"]::after,
button[class*="bg-sky-500"][class*="hover:bg-sky-400"]::after,
a[class*="bg-ink"][class*="hover:bg-slate-800"]::after,
button[class*="bg-ink"][class*="hover:bg-slate-800"]::after {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 45%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-20deg);
  transition: left .8s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
a[class*="bg-sky-500"][class*="hover:bg-sky-400"]:hover::after,
button[class*="bg-sky-500"][class*="hover:bg-sky-400"]:hover::after,
a[class*="bg-ink"][class*="hover:bg-slate-800"]:hover::after,
button[class*="bg-ink"][class*="hover:bg-slate-800"]:hover::after {
  left: 125%;
}
@media (prefers-reduced-motion: reduce) {
  a[class*="bg-sky-500"][class*="hover:bg-sky-400"]::after,
  button[class*="bg-sky-500"][class*="hover:bg-sky-400"]::after,
  a[class*="bg-ink"][class*="hover:bg-slate-800"]::after,
  button[class*="bg-ink"][class*="hover:bg-slate-800"]::after { display: none; }
}

/* Subtle grain texture — self-contained SVG fractal noise, no image asset.
   Overlaid on rich/dark sections so flat gradients don't look too clean-CGI. */
.section-grain { position: relative; }
.section-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Hero script accent — a handwritten flourish crossing the big headline,
   editorial-poster style. Purely decorative, hidden from assistive tech. */
.hero-script-accent {
  position: absolute;
  left: 6%;
  bottom: -0.22em;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 0.34em;
  line-height: 1;
  color: #159BE8;
  -webkit-text-fill-color: #159BE8; /* override inherited transparent fill from gradient-text parents */
  transform: rotate(-4deg);
  white-space: nowrap;
}
@media (max-width: 639px) {
  .hero-script-accent { font-size: 0.4em; bottom: -0.3em; }
}

/* Generic script-accent — flows inline right after a heading's text (works
   regardless of heading length/wrapping, unlike the hero's absolute one). */
.script-accent-inline {
  display: inline-block;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 0.55em;
  line-height: 1;
  margin-left: 0.35em;
  transform: rotate(-4deg) translateY(-0.1em);
  -webkit-text-fill-color: currentColor;
  white-space: nowrap;
}
.script-accent-inline--blue { color: #159BE8; }
.script-accent-inline--gold { color: #FBC157; }

/* Eyebrow accent — a small gradient dash before every uppercase kicker
   label site-wide (section labels, page-hero tags), no per-page markup
   changes needed. Purely decorative. */
p[class*="text-xs"][class*="font-bold"][class*="tracking"]::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 2px;
  margin-right: 8px;
  margin-bottom: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: .55;
  vertical-align: middle;
}

/* Hero background — noticeable, continuous Ken Burns zoom */
#hero .hero-bg-img {
  animation: heroKenBurns 9s ease-in-out infinite alternate;
  transform-origin: 62% 55%;
  will-change: transform;
}
@keyframes heroKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  #hero .hero-bg-img { animation: none !important; }
}

/* Decorative "marble" orbs — bold, softly-glowing gradient spheres that
   drift and slowly tumble behind content, like light refracting through
   glass marbles. Purely decorative, pointer-events disabled. */
.decor-orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(24px) saturate(1.7) brightness(1.12);
  pointer-events: none;
  z-index: 0;
  animation: orbDrift 7s ease-in-out infinite, orbSpin 16s linear infinite, orbPulse 4s ease-in-out infinite;
  will-change: transform, opacity;
}
.decor-orb--slow { animation-duration: 10s, 22s, 5s; }
.decor-orb--delay { animation-delay: -3s, -6s, -2s; }
@keyframes orbDrift {
  0%   { translate: 0 0;         scale: 1; }
  33%  { translate: 60px -74px;  scale: 1.32; }
  66%  { translate: -48px 52px;  scale: 0.82; }
  100% { translate: 0 0;         scale: 1; }
}
@keyframes orbSpin {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}
@keyframes orbPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .62; }
}
@media (prefers-reduced-motion: reduce) {
  .decor-orb { animation: none !important; }
}

/* ===================== CUSTOM HERO (glass/coverflow) =====================
   Ported from hero-preview.html — deep-water gradient shell, drifting
   glow/caustics/bubbles atmosphere, and a 3D coverflow carousel for the
   flavor bottles. Vorteile-card rules from the same source file were
   intentionally left out since that section already has its own styling
   in this project — only what the hero itself needs was ported. */
:root{
  --h3-deep:#04203f; --h3-mid:#0d5f9f; --h3-bright:#4FB0E8;
  --h3-accent:#38BDF8; --h3-accent-2:#7FD8FF;
  /* Nahtfarbe zwischen Hero und Produktband: die gemessene Durchschnitts-
     farbe der obersten Bildzeilen von story-quelle.jpg. Hero-Unterkante und
     Bandhintergrund liegen beide exakt auf diesem Wert, damit an der Naht
     kein Verlauf entsteht — sie ist schlicht dieselbe Farbe. Wird das Bild
     getauscht, muss dieser Wert neu gemessen werden. */
  --quelle-top:#01467F;
}

/* ---------- 1. HERO SHELL ----------
   Flächig auf --quelle-top statt auf dem früheren Radialverlauf: Hero und
   Produktband darunter liegen damit auf ein und derselben Farbe, vom Header
   bis zur Eiskante gibt es keinen Farbwechsel mehr. Die Tiefe kommt nicht
   mehr aus dem Hintergrund, sondern aus den Schichten darüber — den beiden
   .h3__glow-Flächen, der Kaustik und den Blasen; die tragen jetzt die ganze
   Lichtstimmung. Weiß auf dieser Fläche liegt bei rund 9,7:1, die Typo
   gewinnt also sogar an Kontrast. */
.h3{
  position:relative; isolation:isolate; overflow:hidden; color:#fff;
  padding-top:5rem;                      /* Höhe des fixierten Headers */
  background:var(--quelle-top);
}
.h3__inner{
  position:relative; z-index:3;
  max-width:80rem; margin-inline:auto;
  padding:clamp(2.25rem,5vw,3.75rem) 1.25rem clamp(4.5rem,8vw,6rem);
  display:grid; gap:clamp(1.75rem,4vw,3rem);
  grid-template-columns:1fr; align-items:center;
}
@media (min-width:1024px){
  .h3__inner{
    grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);
    padding-inline:2rem; gap:2rem;
    min-height:min(84vh,700px);
  }
}

/* Hier lag der Ausblender auf die Farbe des Produktbands. Er ist entfallen,
   seit der Hero selbst flächig auf --quelle-top steht: es gibt nichts mehr
   auszublenden, und die Fläche hätte die Glows am unteren Rand nur unnötig
   abgedunkelt. */

/* ---------- 2. ATMOSPHÄRE: Lichtschleier, Kaustik, Blasen ---------- */
.h3__glow{position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; z-index:1;}
.h3__glow--a{
  width:46vw; height:46vw; min-width:340px; min-height:340px; top:-14%; left:-8%;
  background:radial-gradient(circle at 40% 40%, rgba(190,235,255,.55), rgba(56,189,248,.18) 55%, transparent 72%);
  animation:h3Drift 22s ease-in-out infinite;
}
/* Sitzt vollständig innerhalb der Sektion (früher bottom:-12%). Ragte er
   unten heraus, schnitt ihn das overflow:hidden mitten im hellen Teil ab —
   nach dem Blur eine weiche, aber klar sichtbare waagerechte Kante genau auf
   der Naht zum Produktband. So bleibt der Verlauf innerhalb seines eigenen
   Kastens bei transparent, bevor irgendwas beschnitten wird. */
.h3__glow--b{
  width:38vw; height:38vw; min-width:280px; min-height:280px; bottom:6%; right:-6%;
  background:radial-gradient(circle at 55% 45%, rgba(255,255,255,.45), rgba(14,165,233,.22) 52%, transparent 74%);
  animation:h3Drift 28s ease-in-out infinite reverse;
}
@keyframes h3Drift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(4%,-5%,0) scale(1.12)}
}

/* Die Kaustik-Streifen sind entfallen. Ihr Kasten reichte mit inset:-25 %
   deutlich unter die Hero-Unterkante, wurde dort aber vom overflow:hidden
   der Sektion glatt abgeschnitten — bei voller Helligkeit. Sobald ein Strahl
   nach unten wanderte, zeichnete der Schnitt eine waagerechte Linie genau
   auf die Naht und verriet, wo der Hero aufhört und das Produktband anfängt.
   Auf der jetzt einfarbigen Fläche gibt es nichts, was das kaschiert.
   Die Bewegung tragen die Glows und die Blasen — und die Blasen laufen in
   beiden Sektionen, also über die Naht hinweg. */

/* Blasen (per JS erzeugt) */
.h3__bubbles{position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none;}
/* Start auf der Unterkante, nicht mehr 14 % darunter: von dort aus waren die
   ersten 8 % der Einblendung längst vorbei, wenn eine Blase den Rand der
   Schicht erreichte — sie erschien mit rund 0,7 Deckkraft schlagartig auf
   einer Linie. Beim Hero ist diese Linie die Naht zum Produktband. Auf der
   Kante startend blenden sie dagegen aus dem Nichts ein. */
.h3__bubble{
  position:absolute; bottom:0; border-radius:50%;
  background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.92), rgba(255,255,255,.18) 44%, rgba(255,255,255,.03) 72%);
  border:1px solid rgba(255,255,255,.3);
  animation:h3Rise linear infinite;
}
@keyframes h3Rise{
  0%{transform:translate3d(0,0,0) scale(.7); opacity:0}
  8%{opacity:.7}
  85%{opacity:.45}
  100%{transform:translate3d(var(--dx,14px),-118vh,0) scale(1.15); opacity:0}
}

/* ---------- 3. TEXTSPALTE ---------- */
.h3__copy{max-width:34rem;}
.h3__title{margin:0; line-height:.9; letter-spacing:-.02em;}
.h3__title .l1{
  display:block; font-size:clamp(1.4rem,7vw,2.9rem); font-weight:700;
  color:rgba(255,255,255,.92); text-shadow:0 2px 24px rgba(3,25,50,.45);
}
.h3__title .l2{
  display:block; font-size:clamp(2.25rem,11.5vw,5rem); font-weight:900; margin-top:.06em;
  background:linear-gradient(96deg,#ffffff 0%,#DCF2FF 34%,#9FE2FF 58%,#ffffff 88%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:h3Shine 7s ease-in-out infinite;
}
@keyframes h3Shine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.h3__lead{
  margin-top:1.05rem; font-size:clamp(.95rem,2.4vw,1.05rem); line-height:1.65;
  color:rgba(240,250,255,.92); max-width:30rem;
}
.h3__lead strong{color:#fff; font-weight:700;}

.h3__cta{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.6rem;}
/* Hero CTAs — same construction as the site-wide premium buttons: a bright
   inset top edge and a dark inset bottom edge give the surface thickness, a
   tight contact shadow anchors it, and a wide glow sits underneath. Hover
   raises all of them together; :active genuinely presses in.
   The h3Pulse halo that used to sit on the solid button animated box-shadow,
   so it overwrote the entire layered stack on every frame — depth and pulse
   cannot share that one property. The depth won, since the point here is to
   match the rest of the site; the sheen sweep carries the liveliness. */
.h3__btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.8125rem; font-weight:800; letter-spacing:.04em;
  padding:.95rem 1.6rem; border-radius:999px; text-decoration:none;
  transition:transform .3s cubic-bezier(.16,1,.3,1),
             box-shadow .42s cubic-bezier(.16,1,.3,1),
             background-color .42s ease, border-color .3s ease;
}
.h3__btn::after{
  content:'';
  position:absolute;
  top:0; left:-75%;
  width:45%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-20deg);
  transition:left .8s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
.h3__btn:hover::after{left:125%}
/* The shared .h3 a:focus-visible rule forces a 4px radius, which would
   square off these pills — restore the shape here. */
.h3__btn:focus-visible{
  outline:2px solid #7FD8FF;
  outline-offset:3px;
  border-radius:999px;
}

.h3__btn--solid{
  color:#04203f;
  background:linear-gradient(180deg,#fff 0%,#EAF7FF 52%,#C9E9FB 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(4,32,63,.18),
    0 1px 2px rgba(2,20,40,.35),
    0 12px 28px -10px rgba(2,20,40,.65);
}
.h3__btn--solid:hover{
  background:linear-gradient(180deg,#fff 0%,#F4FCFF 52%,#DDF2FF 100%);
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(4,32,63,.14),
    0 2px 5px rgba(2,20,40,.32),
    0 20px 42px -12px rgba(2,20,40,.75);
}
.h3__btn--solid:active{
  transform:translateY(0);
  box-shadow:
    inset 0 2px 6px rgba(4,32,63,.32),
    0 1px 2px rgba(2,20,40,.3);
}

.h3__btn--ghost{
  color:#fff;
  border:1.5px solid rgba(190,232,255,.55);
  background:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 10px 26px -14px rgba(2,20,40,.8);
}
.h3__btn--ghost:hover{
  background:rgba(255,255,255,.2);
  border-color:rgba(224,247,255,.85);
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 18px 36px -16px rgba(2,20,40,.9);
}
.h3__btn--ghost:active{
  transform:translateY(0);
  box-shadow:inset 0 2px 6px rgba(2,16,32,.4);
}

.h3__facts{
  display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.75rem;
  padding-top:1.35rem; border-top:1px solid rgba(255,255,255,.2);
}
.h3__fact{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.75rem; font-weight:600; color:#EAF7FF;
  background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.2);
  padding:.45rem .8rem; border-radius:999px;
}
.h3__fact svg{width:.9rem; height:.9rem; color:#BDE9FF; flex:none}

/* ---------- 4. 3D-COVERFLOW ---------- */
.cf{position:relative; z-index:3; --cf-w:min(52vw,230px);}
@media(min-width:640px){.cf{--cf-w:clamp(190px,24vw,250px)}}
.cf__stage{
  position:relative; height:calc(var(--cf-w) * 1.25 + 3.5rem);
  perspective:1500px; perspective-origin:50% 48%;
  touch-action:pan-y; cursor:grab;
}
.cf__stage:active{cursor:grabbing}
.cf__track{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.cf__card{
  position:absolute; top:50%; left:50%; width:var(--cf-w); aspect-ratio:4/5; margin:0;
  border-radius:1.35rem; overflow:hidden; background:#0d4f88;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 30px 60px -22px rgba(1,14,30,.85), 0 2px 8px rgba(1,14,30,.4);
  transform-style:preserve-3d; backface-visibility:hidden; will-change:transform,opacity;
  transition:transform .75s cubic-bezier(.22,.61,.36,1), opacity .5s ease, filter .6s ease, box-shadow .5s ease;
}
.cf__card img{width:100%; height:100%; object-fit:cover; display:block; user-select:none; -webkit-user-drag:none;}
.cf__card::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; z-index:3;
  background:linear-gradient(122deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 66%, rgba(255,255,255,.1) 100%);
}
/* Abdunkelung der Seitenkarten — als Overlay statt filter:brightness,
   weil ein Filter die 3D-Sortierung in preserve-3d stören kann. */
.cf__card::before{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:inherit;
  background:rgba(4,26,52,var(--veil,0));
  transition:background-color .6s ease;
}
.cf__cap{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:2rem .95rem 1.05rem; text-align:center;
  background:linear-gradient(to top, rgba(3,24,48,.9), rgba(3,24,48,.35) 58%, transparent);
}
.cf__cap b{display:block; font-size:.95rem; font-weight:800; letter-spacing:.01em; color:#fff;}
.cf__card:not(.is-active){cursor:pointer}

.cf__floor{
  position:absolute; left:50%; bottom:5%; transform:translateX(-50%);
  width:min(70%,340px); height:52px; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(175,230,255,.5), rgba(175,230,255,0) 70%);
  filter:blur(9px);
}

.cf__ui{display:flex; align-items:center; justify-content:center; gap:.9rem; margin-top:.25rem;}
.cf__nav{
  width:2.6rem; height:2.6rem; flex:none; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:#fff; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.32);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background-color .2s ease, transform .2s ease;
}
.cf__nav:hover{background:rgba(255,255,255,.28)}
.cf__nav:active{transform:scale(.93)}
.cf__nav svg{width:1.05rem; height:1.05rem}
.cf__dots{display:flex; gap:.45rem;}
.cf__dot{
  width:.55rem; height:.55rem; border-radius:999px; cursor:pointer; padding:0;
  border:1px solid rgba(255,255,255,.55); background:transparent;
  transition:width .35s ease, background-color .35s ease;
}
.cf__dot[aria-current="true"]{width:1.6rem; background:#fff; border-color:#fff;}
.cf__live{
  margin-top:.7rem; text-align:center; font-size:.7rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(232,248,255,.85);
}
.cf :focus-visible, .h3 a:focus-visible{outline:2px solid #fff; outline-offset:3px; border-radius:4px}

/* ---------- 6. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  .h3__glow--a,.h3__glow--b,.h3__bubble,.h3__title .l2,.h3__btn--solid{animation:none !important}
  .cf__card,.cf__track{transition-duration:.01ms !important}
  .h3__bubbles{display:none}
  /* matches how the site-wide buttons drop their sheen */
  .h3__btn::after{display:none}
}

/* ---------- 7. QUALITÄTS-SIEGEL: rotierender Schriftring ---------- */
.seal{
  position:absolute; z-index:5; top:-1.75rem; right:-.75rem;
  width:8.25rem; height:8.25rem; display:none;
  animation:sealBob 7s ease-in-out infinite;
}
@media(min-width:768px){.seal{display:block}}
@media(min-width:1280px){.seal{width:9rem; height:9rem; right:-1.5rem}}

/* rotierender Text auf der Kreisbahn */
.seal__ring{
  position:absolute; inset:0; width:100%; height:100%;
  animation:sealSpin 24s linear infinite; transform-origin:50% 50%;
}
.seal__ring text{
  fill:rgba(255,255,255,.92);
  font-size:9px; font-weight:800; letter-spacing:2px;
  font-family:Inter,system-ui,sans-serif;
}

/* Glaskern in der Mitte */
.seal__core{
  position:absolute; inset:22%; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.1rem;
  color:#fff; text-align:center;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 14px 34px -14px rgba(1,14,30,.9);
}
.seal__core svg{width:1.05rem; height:1.05rem; opacity:.9}
.seal__core b{font-size:1.15rem; font-weight:900; letter-spacing:-.02em; line-height:1}

/* feiner Ring als Abschluss */
.seal::after{
  content:""; position:absolute; inset:14%; border-radius:50%;
  border:1px solid rgba(255,255,255,.22); pointer-events:none;
}

@keyframes sealSpin{to{transform:rotate(360deg)}}
@keyframes sealBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (prefers-reduced-motion:reduce){
  .seal,.seal__ring{animation:none}
}

/* Saß früher oberhalb des Ausblend-Streifens; ohne den kann er an den
   unteren Rand rücken. */
/* Der Zusatz hinter „Symbolbild“ fällt auf schmalen Schirmen weg: als
   Vollsatz war die Pille dort fast bildschirmbreit und lag quer über dem
   Motiv, das sie erklären soll. „Symbolbild“ allein ist der stehende
   Begriff dafür und trägt dieselbe Aussage. */
@media (max-width:767px){ .note__more{ display:none } }

.h3__note{
  position:absolute; right:1rem; bottom:1rem; z-index:5;
  font-size:.625rem; color:#0F172A; background:rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:.25rem .625rem; border-radius:999px;
}
@media (prefers-reduced-motion:reduce){.h3__badge{animation:none}}

/* ===================================================================
   8. MOBIL-OPTIMIERUNG  (<= 639px)
   Ziele: größere Karten, echte Touch-Ziele (44px), stärkere Perspektive,
          weniger GPU-Last (kein blur-Drift, kein backdrop-filter).
   =================================================================== */
@media (max-width:639px){

  /* Kompaktere Vertikale — der Hero soll nicht ewig scrollen */
  .h3__inner{padding:1.75rem 1.25rem 5.5rem; gap:1.5rem}
  .h3__lead{margin-top:.85rem; line-height:1.6}
  .h3__cta{margin-top:1.35rem; gap:.6rem}
  .h3__btn{padding:.95rem 1.35rem; flex:1 1 auto; justify-content:center; min-height:48px}
  .h3__facts{margin-top:1.35rem; padding-top:1.1rem; gap:.4rem}
  .h3__fact{font-size:.6875rem; padding:.4rem .65rem}

  /* Stärkere Tiefenwirkung auf schmalem Screen */
  .cf__stage{perspective:1000px}
  .cf__card{border-radius:1.1rem}
  .cf__cap{padding:1.6rem .7rem .85rem}
  .cf__cap b{font-size:.85rem}

  /* Touch-Ziele: Buttons >= 44px */
  .cf__ui{gap:.75rem; margin-top:.5rem}
  .cf__nav{width:2.75rem; height:2.75rem}
  .cf__dots{gap:.85rem}
  .cf__dot{position:relative}
  .cf__dot::after{content:""; position:absolute; inset:-17px -6px}

  /* GPU schonen: keine driftenden Blur-Flächen, kein backdrop-filter */
  .h3__glow--a,.h3__glow--b{animation:none}
  .h3__glow--a{filter:blur(48px); opacity:.85}
  .h3__glow--b{filter:blur(48px); opacity:.8}
  .h3__btn--ghost,.cf__nav{-webkit-backdrop-filter:none; backdrop-filter:none}
  .h3__btn--ghost{background:rgba(255,255,255,.16)}
  .cf__nav{background:rgba(255,255,255,.18)}

  .h3__note{right:.75rem; font-size:.5625rem; padding:.2rem .55rem}

}

/* Sehr schmale Geräte (<= 360px) */
@media (max-width:360px){
  .h3__cta{flex-direction:column; align-items:stretch}
  .h3__btn{width:100%}
}

/* Zwischenbereich Tablet hochkant */
@media (min-width:640px) and (max-width:1023px){
  .cf{--cf-w:clamp(200px,30vw,250px)}
  .h3__copy{max-width:none}
}

/* Touch-Geräte generell: kein Hover-Lift, der hängen bleibt */
@media (hover:none){
  .h3__btn--solid:hover,.h3__btn--ghost:hover{transform:none}
}

/* Header goes light-on-dark while it floats over the new dark hero below,
   then reverts to the normal dark-on-white look once .is-scrolled kicks in.
   index.html only — header-transparent isn't used on any other page, so
   this can't affect pages with a light hero. */
header.header-transparent:not(.is-scrolled) img { filter: brightness(0) invert(1); opacity: .97; }
header.header-transparent:not(.is-scrolled) .nav-link { color: rgba(255,255,255,.86); }
header.header-transparent:not(.is-scrolled) .nav-link:hover,
header.header-transparent:not(.is-scrolled) .nav-link.active { color: #fff; }
header.header-transparent:not(.is-scrolled) a[aria-label="Warenkorb"] {
  color: #fff;
  border-color: rgba(255,255,255,.38);
  background: rgba(255,255,255,.1);
}
header.header-transparent:not(.is-scrolled) a[aria-label="Warenkorb"]:hover { background: rgba(255,255,255,.26); }

/* ===================== SUBPAGE CONTENT COMPONENTS =====================
   Two devices replacing the generic card grids on the subpages. Both are
   deliberately drawn from the client's own world — a bottling plant deals
   in datasheets and order minimums, not in "feature tiles". */

/* --- Datasheet panel --- */
.spec-sheet {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  background: linear-gradient(168deg, #0F4E80 0%, #08375F 52%, var(--h3-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(190, 232, 255, .28),
    0 1px 2px rgba(4, 20, 38, .2),
    0 24px 48px -24px rgba(4, 20, 38, .55);
}
/* same depth-ruler motif as the page hero, tying the two together */
.spec-sheet::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 14px;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(190, 232, 255, .26) 0 1px, transparent 1px 38px),
    linear-gradient(90deg, transparent 0 13px, rgba(190, 232, 255, .2) 13px 14px);
}
.spec-sheet__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.5rem 1rem 2rem;
  border-bottom: 1px solid rgba(190, 232, 255, .2);
}
.spec-sheet__title {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #BDE9FF;
}
.spec-sheet__ref {
  font-size: .68rem;
  font-weight: 600;
  color: rgba(224, 244, 255, .55);
}
.spec-sheet__list { padding: .35rem 1.5rem .6rem 2rem; }
.spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding: .78rem 0;
  border-bottom: 1px solid rgba(190, 232, 255, .11);
}
.spec-row:last-child { border-bottom: 0; }
.spec-row dt {
  font-size: .8rem;
  color: rgba(219, 240, 255, .72);
}
.spec-row dd {
  margin: 0;
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
  text-align: right;
  /* tabular figures keep the values optically aligned down the column */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Comparison table --- */
.compare {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(10,22,40,.05), 0 18px 40px -24px rgba(10,22,40,.2);
}
.compare th, .compare td { text-align: left; vertical-align: top; }
.compare thead th {
  padding: .95rem 1.25rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #64748B;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  white-space: nowrap;
}
.compare tbody th {
  padding: 1.15rem 1.25rem;
  font-size: .92rem;
  font-weight: 700;
  color: #0A1628;
  border-bottom: 1px solid #EEF2F6;
}
.compare tbody th span {
  display: block;
  margin-top: .3rem;
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.5;
  color: #64748B;
}
.compare tbody td {
  padding: 1.15rem 1.25rem;
  font-size: .92rem;
  color: #64748B;
  border-bottom: 1px solid #EEF2F6;
  font-variant-numeric: tabular-nums;
}
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }
/* The "us" column is the whole point of the table, so it gets its own tint
   and weight — the contrast carries the argument, not a checkmark icon. */
.compare .compare__us { background: #F2FAFF; color: #0B4F7E; font-weight: 600; }
.compare thead .compare__us { background: #E3F4FF; color: #0B6FB4; }
.compare tbody .compare__us b { font-weight: 800; color: #0A1628; }

@media (max-width: 639px) {
  /* three columns will not fit — relabel each cell and stack the rows */
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  .compare thead { display: none; }
  .compare tbody tr { border-bottom: 1px solid #E2E8F0; }
  .compare tbody tr:last-child { border-bottom: 0; }
  .compare tbody td { border-bottom: 0; padding: .3rem 1.25rem; }
  .compare tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #94A3B8;
    margin-bottom: .1rem;
  }
  .compare tbody td:last-child { padding-bottom: 1.1rem; }
}

/* --- Deep CTA band --- */
.deep-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(168deg, var(--h3-mid) 0%, #08375F 48%, var(--h3-deep) 100%);
}
.deep-cta::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 50%, rgba(224, 247, 255, .34), rgba(56, 189, 248, .14) 55%, transparent 72%);
  filter: blur(60px);
  animation: h3Drift 30s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .deep-cta::before { animation: none; }
}

/* ===================== FLASH-OF-UNSTYLED-CONTENT FIX =====================
   There was a second block here that hand-duplicated a few Tailwind
   utilities (.hidden, the header container, the mobile drawer) so the page
   would not collapse in the window before the Tailwind CDN's runtime
   compiler injected its stylesheet. Tailwind is now precompiled to
   assets/css/tailwind.css and linked as a normal render-blocking
   stylesheet, so that window no longer exists and the workaround is gone.
   Removing it was not optional: tailwind.css is now linked BEFORE this
   file, so a bare `.hidden { display: none }` here would have outranked
   Tailwind's own `sm:flex` / `lg:flex` and permanently hidden the nav and
   the account area on desktop.

   SCROLL-REVEAL PRE-PAINT STATE.
   main.js stamps the .reveal class on every top-level section, but it does
   that at DOMContentLoaded — so the sections painted fully visible first,
   then snapped to opacity:0 / translateY(64px) / blur(6px) and animated
   back in. That snap is the whole-page jolt.
   Fixing it means the hidden state has to exist at first paint, before any
   script has run, which is what the inline <head> snippet on each page does:
   it sets .has-reveal synchronously, and only when IntersectionObserver
   exists, so a browser that could never run the animation is never left
   with hidden content. :not(.is-visible) keeps this from outranking the
   reveal rules above instead of fighting them on specificity.
   .page-hero is excluded outright — it is the LCP element on the subpages,
   and fading it in on load only makes the page feel slower. .quelle is
   excluded for a different reason: it sits flush against the hero, and a
   section-level translateY/scale would tear open the seam the whole design
   depends on — it brings its own per-element reveal instead. */
html.has-reveal body > section:not(#hero):not(.quelle):not(.page-hero):not(.is-visible) {
  opacity: 0;
  transform: translateY(64px) scale(.92);
  filter: blur(6px);
}
html.has-reveal body > section:not(#hero):not(.quelle):not(.page-hero):not(.is-visible) > * {
  opacity: 0;
  transform: translateY(28px);
}
@media (prefers-reduced-motion: reduce) {
  html.has-reveal body > section:not(.is-visible),
  html.has-reveal body > section:not(.is-visible) > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ===================== NAV DROPDOWN GROUPS =====================
   The top bar carried six flat links while four real pages (Wasser mit
   Geschmack, Inspiration, Pfand-Rückgabe, Häufige Fragen) existed only in
   the mobile drawer — unreachable on desktop. Grouping them under two
   dropdowns surfaces every page while keeping the bar at five items.
   Opens on hover for mouse users and on click/Enter for keyboard and
   touch, which is why the trigger is a real <button> with aria-expanded
   rather than a div. */
.nav-group { position: relative; }
.nav-link--group {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.nav-caret {
  width: .7em;
  height: .7em;
  transition: transform .28s cubic-bezier(.16,1,.3,1);
}
.nav-group.is-open .nav-caret { transform: rotate(180deg); }

.nav-menu {
  position: absolute;
  top: calc(100% + .85rem);
  left: 50%;
  translate: -50% 0;
  min-width: 17rem;
  padding: .5rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 2px rgba(10,22,40,.06), 0 22px 48px -20px rgba(10,22,40,.28);
  /* animated out rather than display:none so it can transition, and
     inert while closed so it never traps focus or catches a stray click */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .26s ease, transform .26s cubic-bezier(.16,1,.3,1), visibility 0s linear .26s;
  z-index: 50;
}
.nav-group.is-open .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s, 0s, 0s;
}
/* hover bridge — keeps the menu from closing while crossing the gap */
.nav-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -.85rem;
  height: .85rem;
}
.nav-menu a {
  display: block;
  padding: .62rem .75rem;
  border-radius: .65rem;
  color: #0A1628;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
  transition: background-color .2s ease, color .2s ease;
}
.nav-menu a span {
  display: block;
  margin-top: .12rem;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: 0;
  color: #647885;
}
.nav-menu a:hover,
.nav-menu a:focus-visible { background: #EFF8FF; color: #0C66A5; }
.nav-menu a:hover span,
.nav-menu a:focus-visible span { color: #0C7FCC; }

/* On the dark hero the bar is light-on-dark; the panel stays light so its
   contents keep their contrast. Only the trigger needs recolouring. */
header.header-transparent:not(.is-scrolled) .nav-link--group { color: rgba(255,255,255,.86); }
header.header-transparent:not(.is-scrolled) .nav-group.is-open .nav-link--group,
header.header-transparent:not(.is-scrolled) .nav-link--group:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .nav-menu, .nav-caret { transition: none; }
}

/* Mobile drawer: section captions so the long link list reads as groups */
.drawer-caption {
  margin: 1.1rem .75rem .3rem;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8FA3AF;
}

/* ===================== RETURNING-CUSTOMER OFFER =====================
   The 5 % second-order discount is the reason to create an account, so it
   is stated once per page rather than only inside the configurator.
   Two treatments, because the two header types differ: the subpages get a
   strip above their sticky header, while the homepage header is fixed and
   floats over the hero — a strip there would simply hide underneath it, so
   the offer joins the hero's own fact chips instead. */
.h3__fact--offer {
  text-decoration: none;
  background: rgba(127, 216, 255, .16);
  border-color: rgba(190, 232, 255, .5);
  color: #fff;
  transition: background-color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.h3__fact--offer strong { font-weight: 800; color: #BDE9FF; }
.h3__fact--offer:hover {
  background: rgba(127, 216, 255, .28);
  border-color: rgba(224, 247, 255, .8);
  transform: translateY(-2px);
}

.offer-strip {
  position: relative;
  z-index: 41;
  background: linear-gradient(100deg, var(--h3-deep) 0%, #0d5f9f 52%, var(--h3-deep) 100%);
  color: #EAF7FF;
}
.offer-strip__inner {
  max-width: 80rem;
  margin-inline: auto;
  padding: .6rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-size: .74rem;
  font-weight: 600;
  text-align: center;
}
@media (min-width: 640px) {
  .offer-strip__inner { padding-inline: 2rem; font-size: .78rem; }
}
.offer-strip svg { width: .95rem; height: .95rem; color: #7FD8FF; flex: none; }
.offer-strip strong { font-weight: 800; color: #fff; }
.offer-strip a {
  color: #BDE9FF;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
  white-space: nowrap;
  transition: color .25s ease;
}
.offer-strip a:hover { color: #fff; }

/* ===================== KONTOTYP (Privat / Firma) =====================
   Same visual language as .pay-option, but laid out as two equal tabs so
   the choice reads as one control rather than a list of extras. */
.acct-tab {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .75rem .85rem;
  border: 1px solid #D8E2E9;
  border-radius: .9rem;
  cursor: pointer;
  background: #fff;
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.acct-tab:hover { border-color: #8FD3FD; }
.acct-tab input { margin-top: .15rem; accent-color: #159BE8; width: .95rem; height: .95rem; flex: none; }
.acct-tab:has(input:checked) {
  border-color: #159BE8;
  background: #F2FAFF;
  box-shadow: 0 0 0 3px rgba(21,155,232,.12);
}
.acct-tab:has(input:focus-visible) { outline: 2px solid #7FD8FF; outline-offset: 2px; }
.acct-tab__body { display: flex; flex-direction: column; gap: .1rem; }
.acct-tab__title { font-size: .82rem; font-weight: 700; color: #0A1628; }
.acct-tab__hint { font-size: .68rem; color: #647885; line-height: 1.35; }

/* The company block carries both `hidden` and `flex-col`; without this the
   Tailwind `display:flex` from flex-col would beat `hidden` in the cascade. */
#company-fields { display: flex; }
#company-fields.hidden { display: none; }

/* ===================== PAYMENT METHOD OPTIONS ===================== */
.pay-option {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .9rem 1rem;
  border: 1px solid #D8E2E9;
  border-radius: .9rem;
  cursor: pointer;
  background: #fff;
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.pay-option:hover { border-color: #8FD3FD; }
.pay-option input { margin-top: .18rem; accent-color: #159BE8; width: 1rem; height: 1rem; flex: none; }
.pay-option:has(input:checked) {
  border-color: #159BE8;
  background: #F2FAFF;
  box-shadow: 0 0 0 3px rgba(21,155,232,.12);
}
.pay-option:has(input:focus-visible) { outline: 2px solid #7FD8FF; outline-offset: 2px; }
/* Disabled until the provider keys exist — say so rather than letting the
   customer pick something that cannot complete. */
.pay-option:has(input:disabled) { opacity: .55; cursor: not-allowed; background: #F6F9FB; }
.pay-option:has(input:disabled):hover { border-color: #D8E2E9; }
.pay-option__body { display: flex; flex-direction: column; gap: .12rem; flex: 1; }
.pay-option__title { font-size: .85rem; font-weight: 700; color: #0A1628; }
.pay-option__hint { font-size: .74rem; color: #647885; line-height: 1.45; }
.pay-option__badge {
  flex: none;
  align-self: center;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #647885;
  background: #EBF1F5;
  border-radius: 999px;
  padding: .25rem .55rem;
}

/* ===================== PROCESS TIMELINE =====================
   Used for the five collaboration steps on o-nama.html. Numbering is kept
   because the content genuinely is a sequence — but the markers now sit on
   a rule that runs through them, so the order is carried by the layout
   rather than only by the digits. Horizontal on desktop, vertical on
   mobile, where a five-across row would crush the text. */
.process {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2rem 1.25rem;
}
.process__step { position: relative; padding-left: 3.25rem; }
.process__marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(180deg, #4FC0F5 0%, #159BE8 55%, #0B6FB4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 1px 2px rgba(6,42,78,.2),
    0 8px 18px -8px rgba(21,155,232,.7);
  z-index: 1;
}
/* the connecting rule, drawn from each marker to the next */
.process__step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 1.25rem;
  top: 2.5rem;
  bottom: -2rem;
  width: 2px;
  background: linear-gradient(180deg, #BFE4FE, #EBF1F5);
}
.process__title { font-size: .9rem; font-weight: 800; color: #0A1628; margin-bottom: .3rem; }
.process__text { font-size: .82rem; line-height: 1.6; color: #647885; }
.process__text strong { color: #4A5C68; font-weight: 700; }

@media (min-width: 1024px) {
  .process { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }
  .process__step { padding-left: 0; padding-top: 3.5rem; }
  .process__marker { left: 0; }
  .process__step:not(:last-child)::before {
    left: 2.5rem;
    right: -1.5rem;
    top: 1.25rem;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, #BFE4FE, #EBF1F5);
  }
}

/* ===================== SOURCE PANEL (o-nama / Nachhaltigkeit) =====================
   The altitude is the one hard, ownable fact on that section, so it gets the
   depth-gauge treatment from the homepage banner instead of a third identical
   icon card. Same ruler motif as .page-hero and .spec-sheet. */
.source-panel {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  padding: 2rem 1.75rem 1.75rem 2.75rem;
  color: #fff;
  background: linear-gradient(168deg, #0F4E80 0%, #08375F 52%, var(--h3-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(190, 232, 255, .28),
    0 1px 2px rgba(4, 20, 38, .2),
    0 24px 48px -24px rgba(4, 20, 38, .55);
}
.source-panel::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 16px;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(190, 232, 255, .26) 0 1px, transparent 1px 34px),
    linear-gradient(90deg, transparent 0 15px, rgba(190, 232, 255, .2) 15px 16px);
}
.source-panel__figure { display: flex; align-items: baseline; gap: .3rem; }
.source-panel__num {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-style: italic;
  font-size: clamp(3rem, 8vw, 4.5rem);
  line-height: .9;
  letter-spacing: -.02em;
}
.source-panel__unit {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.5rem;
  color: #BDE9FF;
}
.source-panel__label {
  margin-top: .6rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #BDE9FF;
}
.source-panel__text {
  margin-top: 1rem;
  font-size: .88rem;
  line-height: 1.65;
  color: rgba(224, 244, 255, .82);
  max-width: 32ch;
}
.source-panel__specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(190, 232, 255, .2);
}
.source-panel__specs dt {
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(219, 240, 255, .6);
}
.source-panel__specs dd { margin: .25rem 0 0; font-size: .82rem; font-weight: 700; }

/* Marks a fact the client cannot yet evidence. Reads as a deliberate open
   item rather than as the raw "[insert text here]" brackets it replaces. */
.pending-note {
  margin-top: .7rem;
  padding-left: .7rem;
  border-left: 2px solid #D8E2E9;
  font-size: .75rem;
  line-height: 1.5;
  color: #8FA3AF;
  font-style: italic;
}

.source-panel__foot {
  margin-top: 1rem;
  font-size: .76rem;
  line-height: 1.6;
  color: rgba(219, 240, 255, .6);
}

/* ===================== AWARD CARD =====================
   The AGRA "Champion of Quality" title is the hardest credential the brand
   has, so it is given weight instead of being one card among equals. */
.award-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  padding: 1.75rem;
  background: linear-gradient(150deg, #FFFDF7 0%, #FFF8ED 55%, #FEECC8 100%);
  border: 1px solid #FDD98C;
  box-shadow: 0 1px 2px rgba(176, 78, 13, .06), 0 18px 40px -22px rgba(176, 78, 13, .35);
}
.award-card::after {
  content: '';
  position: absolute;
  right: -2.5rem;
  top: -2.5rem;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248, 167, 46, .22), transparent 70%);
  pointer-events: none;
}
.award-card__ribbon {
  display: inline-block;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #B04E0D;
  background: rgba(253, 217, 140, .55);
  border: 1px solid #FDD98C;
  border-radius: 999px;
  padding: .28rem .65rem;
  margin-bottom: .9rem;
}
.award-card__eyebrow {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #D4690C;
}
.award-card__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 800;
  color: #0A1628;
  margin: .25rem 0 .7rem;
  letter-spacing: -.01em;
}
.award-card__text { font-size: .88rem; line-height: 1.65; color: #4A5C68; }
.award-card__text strong { color: #0A1628; font-weight: 700; }
.award-card__note {
  margin-top: .8rem;
  font-size: .76rem;
  line-height: 1.55;
  color: #8FA3AF;
}

/* ===================== VALUES BAND ===================== */
.values-band {
  display: grid;
  gap: 1.75rem;
  border-radius: 1.25rem;
  padding: 2rem;
  color: #fff;
  background: linear-gradient(150deg, var(--h3-mid) 0%, #08375F 50%, var(--h3-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(190, 232, 255, .25), 0 24px 48px -26px rgba(4, 20, 38, .5);
}
@media (min-width: 900px) {
  .values-band { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; padding: 2.5rem; }
}
.values-band__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .65rem;
}
@media (min-width: 600px) {
  .values-band__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.values-band__list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(234, 247, 255, .92);
}
.values-band__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .42em;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: #7FD8FF;
  box-shadow: 0 0 0 3px rgba(127, 216, 255, .18);
}

/* ===================== FLAVOR CARD EXTRAS (voda-s-okusima) ===================== */
/* Price and minimum order were only discoverable by opening the
   configurator — both are decision-relevant, so they belong on the card. */
.flavor-facts {
  position: relative;
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding: .7rem 1.1rem;
  border-radius: .75rem;
  background: #F6F9FB;
  border: 1px solid #EBF1F5;
}
.flavor-facts dt {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8FA3AF;
}
.flavor-facts dd {
  margin: .1rem 0 0;
  font-size: .95rem;
  font-weight: 800;
  color: #0A1628;
  font-variant-numeric: tabular-nums;
}
/* Only one flavor carries this, and it is a real award — so it is allowed
   to outshine the rest of the card. */
.flavor-award {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .85rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: #B04E0D;
  background: linear-gradient(180deg, #FFF8ED, #FEECC8);
  border: 1px solid #FDD98C;
  box-shadow: 0 6px 14px -8px rgba(176, 78, 13, .5);
}
.flavor-award svg { width: .8rem; height: .8rem; flex: none; color: #D4690C; }

/* ===================== RECOMMENDATION CHIPS (inspiracije) =====================
   The flavour recommendations used to be plain grey text, even though the
   configurator already accepts ?flavor=<id>. Each is now a link that opens
   the configurator with that flavour selected — the page went from advice
   to a starting point. The dot carries the flavour's own colour, so the
   chips read as products rather than as tags. */
.rec { margin-top: auto; padding-top: 1rem; border-top: 1px solid #EBF1F5; }
.rec__label {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8FA3AF;
  margin-bottom: .55rem;
}
.rec__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.rec-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem .35rem .55rem;
  border-radius: 999px;
  border: 1px solid #D8E2E9;
  background: #fff;
  font-size: .72rem;
  font-weight: 700;
  color: #38454F;
  text-decoration: none;
  transition: border-color .25s ease, background-color .25s ease, transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
}
.rec-chip::before {
  content: '';
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--rec, #159BE8);
  flex: none;
}
.rec-chip:hover {
  transform: translateY(-2px);
  border-color: var(--rec, #159BE8);
  background: #F6F9FB;
  box-shadow: 0 10px 20px -12px rgba(10,22,40,.35);
}
.rec-chip:focus-visible { outline: 2px solid #7FD8FF; outline-offset: 2px; }
.rec-note { margin-top: .6rem; font-size: .72rem; line-height: 1.5; color: #8FA3AF; }

/* Three-step variant of the same sequence component. */
@media (min-width: 1024px) {
  .process--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===================== AUTH SHELL (prijava / registracija) =====================
   Both pages were a plain centred card on the default page background —
   the one moment where the site asks for something in return, presented
   with the least conviction. The brand panel states what the account is
   actually worth, right where the decision is made.
   The panel is decorative support, so on phones it drops out entirely
   rather than pushing the form below the fold. */
.auth-shell {
  display: grid;
  min-height: 70vh;
  align-items: stretch;
}
@media (min-width: 1024px) {
  .auth-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}
.auth-shell__brand {
  display: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 3.5rem 3rem;
  color: #fff;
  background: linear-gradient(168deg, var(--h3-mid) 0%, #08375F 48%, var(--h3-deep) 100%);
}
@media (min-width: 1024px) { .auth-shell__brand { display: flex; align-items: center; } }
/* the depth ruler again, so the page belongs to the same family */
.auth-shell__brand::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0; left: 0;
  width: 22px;
  background:
    repeating-linear-gradient(180deg, rgba(190, 232, 255, .28) 0 1px, transparent 1px 48px),
    linear-gradient(90deg, transparent 0 21px, rgba(190, 232, 255, .2) 21px 22px);
}
.auth-shell__brand::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  top: -25%;
  right: -15%;
  background: radial-gradient(circle at 45% 45%, rgba(224, 247, 255, .35), rgba(56, 189, 248, .14) 55%, transparent 72%);
  filter: blur(60px);
  animation: h3Drift 28s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .auth-shell__brand::before { animation: none; } }
.auth-shell__brand-inner { max-width: 26rem; margin-left: 1.5rem; }
.auth-shell__logo { display: inline-block; margin-bottom: 2rem; }
.auth-shell__logo img { filter: brightness(0) invert(1); opacity: .95; height: auto; }
.auth-shell__eyebrow {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .22em;
  color: #BDE9FF;
  margin-bottom: .6rem;
}
.auth-shell__headline {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin-bottom: 1.75rem;
}
.auth-shell__list { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: .85rem; }
.auth-shell__list li {
  position: relative;
  padding-left: 1.75rem;
  font-size: .88rem;
  line-height: 1.5;
  color: rgba(234, 247, 255, .88);
}
.auth-shell__list strong { color: #fff; font-weight: 800; }
.auth-shell__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .3em;
  width: .95rem;
  height: .95rem;
  border-radius: 50%;
  background: rgba(127, 216, 255, .22);
  border: 1px solid rgba(190, 232, 255, .55);
}
.auth-shell__foot { font-size: .76rem; line-height: 1.55; color: rgba(219, 240, 255, .6); }
.auth-shell__form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.25rem;
  background: #F6F9FB;
}
@media (min-width: 640px) { .auth-shell__form { padding: 4rem 2rem; } }

/* ===================== CHECKOUT ===================== */
.checkout-steps {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: .5rem;
  counter-reset: step;
}
@media (min-width: 640px) { .checkout-steps { display: flex; } }
.checkout-steps li {
  counter-increment: step;
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 700;
  color: #8FA3AF;
}
.checkout-steps li::before {
  content: counter(step);
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 800;
  background: #EBF1F5;
  color: #8FA3AF;
}
.checkout-steps li:not(:last-child)::after {
  content: '';
  width: 1.5rem;
  height: 1px;
  background: #D8E2E9;
  margin-left: .35rem;
}
.checkout-steps .is-current { color: #0A1628; }
.checkout-steps .is-current::before { background: #159BE8; color: #fff; }
.checkout-steps .is-done { color: #4A5C68; }
.checkout-steps .is-done::before {
  content: '✓';
  background: #DBEFFE;
  color: #0C66A5;
}

.checkout-summary {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  padding: 1.5rem;
  color: #fff;
  background: linear-gradient(168deg, var(--h3-mid) 0%, #08375F 52%, var(--h3-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(190, 232, 255, .25),
    0 24px 48px -26px rgba(4, 20, 38, .55);
}
@media (min-width: 1024px) { .checkout-summary { position: sticky; top: 1.5rem; } }
.checkout-summary__lines { display: grid; gap: .1rem; padding: 1.1rem 0; }
.checkout-summary__lines > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
}
.checkout-summary__lines dt { font-size: .82rem; color: rgba(219, 240, 255, .72); }
.checkout-summary__lines dt span { font-size: .72rem; color: rgba(219, 240, 255, .45); }
.checkout-summary__lines dd {
  margin: 0;
  font-size: .88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.checkout-summary__lines .is-discount dt,
.checkout-summary__lines .is-discount dd { color: #7FD8FF; }
/* Deposit is set apart because it is refundable — it is not a cost of the
   water, and the summary should not let it read like one. */
.checkout-summary__lines .is-pfand {
  margin-top: .3rem;
  padding-top: .8rem;
  border-top: 1px dashed rgba(190, 232, 255, .28);
}
.checkout-summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(190, 232, 255, .25);
  font-size: .9rem;
  font-weight: 700;
}
.checkout-summary__total span:last-child {
  font-size: 1.5rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.checkout-summary__note {
  margin-top: .9rem;
  font-size: .72rem;
  line-height: 1.55;
  color: rgba(219, 240, 255, .55);
}
.checkout-summary__note a { color: #BDE9FF; text-decoration: underline; }

/* ===================== CART / CHECKOUT LINES ===================== */
.cart-line__thumb {
  width: 3.25rem;
  height: 3.25rem;
  flex: none;
  border-radius: .65rem;
  background: #fff;
  border: 1px solid #D8E2E9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: .3rem;
}
.checkout-line {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.checkout-line__thumb {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: .6rem;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: .25rem;
}