/* ==========================================================================
   BaHaar's Styling Studio — Design-System „Glas & Orchidee“
   Liquid-Glass-Oberflächen, echte Orchideenblüten, irisierende Pastelltöne.
   ========================================================================== */

/* ---------- Schriften (lokal gehostet, keine Drittanbieter) ---------- */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  /* Tinte: tiefes Indigo */
  --ink: #152f2c;
  --ink-2: #2f4d4b;
  --ink-3: #3d5856;
  --ink-4: #649a96;

  /* Leitfarbe: Lavendel und Violett */
  --ac-25: #fafefe;
  --ac-50: #f1fefd;
  --ac-100: #eafdfc;
  --ac-200: #d9f9f7;
  --ac-300: #bef5f1;
  --ac-400: #78e8e2;
  --ac-500: #34dcd2;
  --ac-600: #22bdb2;
  --ac-700: #288883;
  --accent-ink: #2a807b;
  --badge-a: #91f4ee;
  --badge-b: #27978f;

  /* Zweite Leitfarbe: weiches Türkis (wie das Studio selbst) */
  --tq-50: #effcfb;
  --tq-100: #d9f6f2;
  --tq-200: #b4ece6;
  --tq-300: #86ddd5;
  --tq-400: #55c8bf;
  --tq-500: #2fb2a9;
  --tq-600: #1f948d;
  --tq-700: #187670;
  --tq-ink: #13665f;
  --badge-tq-a: #8ee6dc;
  --badge-tq-b: #1f9790;

  /* Begleiter: Orchideenblau, Perle, ein Hauch Rosé und Mint */
  --orchid-300: #a9c4ff;
  --orchid-400: #7da2f2;
  --orchid-500: #4f7fdc;
  --orchid-600: #3b66c4;
  --blush-200: #f8e1ea;
  --gold: #e6b85c;

  /* Nacht (Finale) */
  --night-950: #05100f;
  --night-900: #091a19;
  --night-800: #112e2b;

  /* Glas */
  --glass-fill: linear-gradient(140deg, rgba(255, 255, 255, 0.66) 0%, rgba(255, 255, 255, 0.34) 100%);
  --glass-fill-strong: linear-gradient(140deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.55) 100%);
  --glass-blur: blur(22px) saturate(170%);
  --glass-edge: rgba(255, 255, 255, 0.75);
  --glass-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 -1px 0 rgba(255, 255, 255, 0.28) inset,
    0 0 0 1px rgba(255, 255, 255, 0.42) inset,
    0 24px 60px -24px rgba(25, 74, 70, 0.32),
    0 6px 16px -8px rgba(25, 74, 70, 0.16);
  --glass-shadow-lg:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 -1px 0 rgba(255, 255, 255, 0.3) inset,
    0 0 0 1px rgba(255, 255, 255, 0.45) inset,
    0 40px 90px -36px rgba(25, 74, 70, 0.42),
    0 10px 30px -14px rgba(25, 74, 70, 0.2);
  --iris: linear-gradient(120deg, #ffffff 0%, #d2faf8 22%, #bdeee8 44%, #f6c9ea 66%, #ffffff 88%);

  /* Typografie */
  --font-display: "Instrument Serif", "Iowan Old Style", "Times New Roman", serif;
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-hero: clamp(3.1rem, 1.6rem + 5.6vw, 6.6rem);
  --fs-h2: clamp(2.5rem, 1.6rem + 3.6vw, 4.9rem);
  --fs-h3: clamp(1.45rem, 1.2rem + 0.9vw, 1.95rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.35vw, 1.24rem);

  /* Raster */
  --radius-xl: 36px;
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1240px;
  --header-h: 76px;

  /* Bewegung */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft: cubic-bezier(0.45, 0, 0.2, 1);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  overflow-x: clip;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 450;
  color: var(--ink);
  background: var(--ac-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dialog { padding: 0; border: 0; color: inherit; }
::selection { background: rgba(34, 189, 178, 0.25); color: var(--ink); }

:focus-visible {
  outline: 2.5px solid var(--ac-500);
  outline-offset: 3px;
  border-radius: 10px;
}

.nowrap { white-space: nowrap; }

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

.skip-link {
  position: fixed;
  left: 16px; top: 12px;
  z-index: 1000;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform 0.3s var(--ease-out);
}
.skip-link:focus { transform: none; }

/* ---------- Atmosphäre: Aurora-Hintergrund + Korn ---------- */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(60vmax 50vmax at 8% 12%, rgba(165, 246, 241, 0.85), transparent 60%),
    radial-gradient(55vmax 45vmax at 92% 8%, rgba(182, 238, 231, 0.75), transparent 62%),
    radial-gradient(50vmax 50vmax at 85% 88%, rgba(234, 253, 252, 0.75), transparent 60%),
    radial-gradient(60vmax 45vmax at 12% 92%, rgba(196, 240, 233, 0.6), transparent 60%),
    radial-gradient(40vmax 30vmax at 60% 55%, rgba(250, 228, 237, 0.4), transparent 60%),
    linear-gradient(180deg, #f1fefd 0%, #ecfdfc 50%, #f0fcfb 100%);
}
.atmosphere::before,
.atmosphere::after {
  content: "";
  position: absolute;
  width: 70vmax; height: 70vmax;
  border-radius: 50%;
  opacity: 0.55;
  will-change: transform;
}
.atmosphere::before {
  left: -20vmax; top: 30%;
  background: radial-gradient(closest-side, rgba(165, 246, 241, 0.45), transparent);
  animation: drift-a 38s var(--ease-soft) infinite alternate;
}
.atmosphere::after {
  right: -25vmax; top: -10%;
  background: radial-gradient(closest-side, rgba(255, 196, 232, 0.5), transparent);
  animation: drift-b 46s var(--ease-soft) infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(18vmax, -12vmax, 0) scale(1.1); } }
@keyframes drift-b { to { transform: translate3d(-14vmax, 22vmax, 0) scale(0.92); } }

.grain {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.3 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout ---------- */
.prices__grid > *,
.about__grid > *,
.bridal__card > *,
.contact__grid > *,
.reviews__head > *,
.section-head > *,
.footer-grid > * { min-width: 0; }

.container {
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin-inline: auto;
}
.section {
  position: relative;
  padding-block: clamp(80px, 11vw, 150px);
}
.section--tight { padding-block: clamp(56px, 7vw, 96px); }

/* ---------- Typografie ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 0.98;
}
.display em,
.h2 em,
.h3 em {
  --em-grad: linear-gradient(100deg, #22bdb2 0%, #2ad7cd 34%, #4f7fdc 68%, #1a8f8a 100%);
  font-style: italic;
  background: var(--em-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em;
}
em.is-split { background: none; padding-right: 0; }
em.is-split .split-word {
  background: var(--em-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Platz für Unterlängen (g, p) und die kursive Neigung, sonst schneidet der Verlauf sie ab */
  padding: 0 0.06em 0.2em 0.04em;
  margin: 0 -0.06em -0.2em -0.04em;
}
.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: -0.015em;
}
.h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.1;
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 60ch;
}
.muted { color: var(--ink-3); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  flex: none;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--tq-400) 55%, var(--ac-500));
}
.eyebrow::after {
  content: "";
  width: 7px; height: 7px;
  margin-left: -6px;
  order: -1;
  display: none;
}
.eyebrow--light { color: rgba(234, 253, 252, 0.85); }

.section-head {
  display: grid;
  gap: 20px;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.section-head--center {
  justify-items: center;
  text-align: center;
}
.section-head--center .lead { margin-inline: auto; }
.section-head--split {
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: 1.2fr 1fr; gap: 48px; }
  .section-head--split .lead { justify-self: end; }
}

/* ---------- Glas ---------- */
.glass {
  position: relative;
  isolation: isolate;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}
/* irisierende Kante */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1.2px;
  background: linear-gradient(150deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.2) 30%,
    rgba(190, 238, 232, 0.6) 55%,
    rgba(255, 214, 240, 0.45) 78%,
    rgba(255, 255, 255, 0.9) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
/* Glanzlicht, folgt dem Zeiger (--mx/--my via JS) */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(420px circle at var(--mx, 18%) var(--my, 0%), rgba(255, 255, 255, 0.55), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 38%);
  opacity: 0.75;
  transition: opacity 0.5s var(--ease-out);
  pointer-events: none;
}
.glass--strong { background: var(--glass-fill-strong); }
.glass--lg { box-shadow: var(--glass-shadow-lg); border-radius: var(--radius-xl); }
.glass--tint {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.18)),
    linear-gradient(135deg, rgba(165, 246, 241, 0.55), rgba(255, 200, 236, 0.42) 50%, rgba(160, 232, 222, 0.55));
}
.glass--dark {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 30px 70px -30px rgba(0, 0, 0, 0.6);
  color: #f0fefd;
}
.glass--dark::before { opacity: 0.45; }
.glass--dark::after { opacity: 0.25; }

/* Glaskugel als Dekor (Inspo: Orb) */
.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0 6%, rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 70% 78%, rgba(160, 238, 228, 0.7), transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(165, 246, 241, 0.35), rgba(34, 189, 178, 0.55) 70%, rgba(34, 189, 178, 0.75));
  box-shadow:
    inset -8px -12px 24px rgba(34, 189, 178, 0.35),
    inset 6px 8px 18px rgba(255, 255, 255, 0.55),
    0 24px 40px -18px rgba(25, 74, 70, 0.55);
}
.orb--clear {
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.95) 0 5%, rgba(255, 255, 255, 0) 20%),
    radial-gradient(circle at 68% 76%, rgba(190, 242, 234, 0.75), transparent 34%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08), rgba(234, 253, 252, 0.28) 72%, rgba(255, 255, 255, 0.6));
  -webkit-backdrop-filter: blur(3px) saturate(160%);
  backdrop-filter: blur(3px) saturate(160%);
  box-shadow:
    inset -6px -10px 18px rgba(34, 189, 178, 0.22),
    inset 4px 6px 14px rgba(255, 255, 255, 0.7),
    0 18px 34px -16px rgba(25, 74, 70, 0.35);
}

/* ---------- Buttons ---------- */
.btn {
  --h: 54px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: var(--h);
  padding: 0 26px;
  border-radius: 999px;
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: 0.005em;
  white-space: nowrap;
  transition: transform 0.45s var(--ease-spring), box-shadow 0.4s var(--ease-out), background-color 0.3s;
  -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(0.98); transition-duration: 0.12s; }

.btn--primary {
  color: #fff;
  background: linear-gradient(180deg, #8bf4ed 0%, #23cbc1 48%, #27978f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -10px 18px rgba(21, 91, 86, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 14px 32px -12px rgba(34, 189, 178, 0.75),
    0 3px 8px -2px rgba(25, 74, 70, 0.25);
  text-shadow: 0 1px 1px rgba(20, 85, 81, 0.4);
}
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 2px 10px auto;
  height: 48%;
  z-index: -1;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.btn--primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -10px 18px rgba(25, 74, 70, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 22px 44px -14px rgba(34, 189, 178, 0.8),
    0 4px 10px -2px rgba(25, 74, 70, 0.3);
}

.btn--aqua {
  color: #0d3b45;
  background: linear-gradient(180deg, #c8f5ef 0%, #8fdcd6 50%, #63c7c8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -10px 18px rgba(25, 74, 70, 0.25),
    0 14px 30px -12px rgba(34, 189, 178, 0.65);
}
.btn--aqua::before {
  content: "";
  position: absolute;
  inset: 2px 10px auto;
  height: 48%;
  z-index: -1;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
}

.btn--glass {
  color: var(--ink);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42));
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    inset 0 -8px 16px rgba(120, 220, 210, 0.14),
    0 12px 28px -14px rgba(25, 74, 70, 0.35);
}
.btn--glass:hover { background: linear-gradient(150deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.6)); }

.btn--ghost-light {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.18); }

.btn--sm { --h: 44px; padding: 0 18px; font-size: 0.9rem; }
.btn--lg { --h: 62px; padding: 0 32px; font-size: 1.05rem; }

.btn .btn__arrow {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  margin-right: -12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.45s var(--ease-spring);
}
.btn--glass .btn__arrow {
  background: linear-gradient(180deg, var(--badge-a), var(--badge-b));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 14px -6px rgba(34, 189, 178, 0.8);
}
.btn .btn__arrow svg { width: 16px; height: 16px; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* runde Glas-Icon-Buttons */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  color: var(--ink);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.45));
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    inset 0 -6px 12px rgba(120, 220, 210, 0.16),
    0 10px 22px -12px rgba(25, 74, 70, 0.4);
  transition: transform 0.45s var(--ease-spring), box-shadow 0.3s;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { transform: translateY(-2px) scale(1.04); }
.icon-btn:active { transform: scale(0.94); }

/* ---------- Chips & Pills ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-2);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.4));
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 6px 16px -10px rgba(25, 74, 70, 0.35);
}
.chip svg { width: 16px; height: 16px; flex: none; }

/* Öffnungsstatus: ruhige Uhr in Türkis, geöffnet = türkiser Text */
[data-open-status] > svg { width: 16px; height: 16px; flex: none; color: var(--tq-600); }
[data-open-status]:not(.is-closed):not(.is-soon) [data-open-text] { color: var(--tq-ink); }

.stars {
  display: inline-flex;
  gap: 2px;
  color: #f5b544;
}
.stars svg { width: 16px; height: 16px; filter: drop-shadow(0 1px 1px rgba(200, 130, 20, 0.35)); }

/* ---------- Segmented Control & Längen-Schalter (Liquid Glass) ---------- */
.segmented,
.length-toggle {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1px 3px rgba(25, 74, 70, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }
.segmented button,
.length-toggle button {
  position: relative;
  z-index: 1;
  flex: none;
  height: 40px;
  padding: 0 15px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--ink-3);
  transition: color 0.3s;
  -webkit-tap-highlight-color: transparent;
}
.segmented button[aria-selected="true"],
.length-toggle button[aria-checked="true"] { color: var(--ink); }
.segmented__thumb,
.length-toggle__thumb {
  position: absolute;
  z-index: 0;
  top: 4px;
  left: 0;
  height: 40px;
  width: var(--w, 0);
  border-radius: 999px;
  background: linear-gradient(150deg, #fff, rgba(255, 255, 255, 0.78));
  box-shadow: inset 0 1px 0 #fff, inset 0 -6px 10px rgba(165, 246, 241, 0.14), 0 8px 18px -8px rgba(25, 74, 70, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.9);
  transform: translateX(var(--x, 4px));
  transition: transform 0.55s var(--ease-spring), width 0.55s var(--ease-spring);
}
.length-toggle button[aria-checked="true"] { color: #fff; }
.length-toggle__thumb {
  background: linear-gradient(180deg, var(--badge-a), var(--badge-b));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -6px 10px rgba(25, 74, 70, 0.3), 0 8px 18px -8px rgba(34, 189, 178, 0.9);
}
.length-toggle { transition: opacity 0.35s, filter 0.35s; }
.length-toggle.is-disabled { opacity: 0.35; filter: grayscale(1); pointer-events: none; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 14px 0 auto;
  z-index: 100;
  pointer-events: none;
}
.site-header__bar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(100% - 2 * clamp(12px, 3vw, 28px), 1280px);
  height: 64px;
  margin-inline: auto;
  padding: 0 10px 0 18px;
  border-radius: 999px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.3));
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    inset 0 -10px 20px rgba(165, 246, 241, 0.08),
    0 18px 40px -22px rgba(25, 74, 70, 0.35);
  transition: background 0.4s, box-shadow 0.4s, height 0.4s var(--ease-out), transform 0.5s var(--ease-out);
}
.is-scrolled .site-header__bar {
  height: 58px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.74));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    0 22px 46px -22px rgba(25, 74, 70, 0.45);
}
.is-hidden .site-header__bar { transform: translateY(-120%); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  -webkit-tap-highlight-color: transparent;
}
.brand__mark {
  width: 38px; height: 38px;
  filter: drop-shadow(0 4px 8px rgba(34, 189, 178, 0.35));
  transition: transform 0.8s var(--ease-spring);
}
.brand:hover .brand__mark { transform: rotate(-12deg) scale(1.06); }
.brand__text { display: grid; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.62rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand__name i { font-style: italic; color: var(--accent-ink); }
.brand__sub {
  margin-top: 3px;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.nav {
  display: none;
  align-items: center;
  gap: 2px;
  margin-inline: auto;
  position: relative;
}
.nav a {
  position: relative;
  z-index: 1;
  padding: 10px 15px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-2);
  transition: color 0.25s;
}
.nav a:hover,
.nav a[aria-current="page"],
.nav a.is-active { color: var(--ink); }
.nav__blob {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  height: 40px;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 8px 18px -10px rgba(25, 74, 70, 0.45);
  transform: translate(var(--x, 0), -50%);
  opacity: 0;
  transition: transform 0.55s var(--ease-spring), width 0.55s var(--ease-spring), opacity 0.3s;
  pointer-events: none;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.header-actions .icon-btn { width: 44px; height: 44px; }
.header-actions .btn { --h: 46px; padding: 0 20px; }
.menu-toggle { display: inline-grid; }
.header-book { display: none; }
.header-phone { display: none; }

@media (min-width: 1080px) {
  .nav { display: flex; }
  .menu-toggle { display: none; }
  .header-actions { margin-left: 0; }
}
@media (min-width: 640px) {
  .header-book { display: inline-flex; }
  .header-phone { display: inline-grid; }
}

/* Mobiles Menü */
.menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: grid;
  align-content: start;
  padding: calc(var(--header-h) + 34px) var(--gutter) calc(32px + env(safe-area-inset-bottom));
  overflow-y: auto;
  background:
    radial-gradient(80% 60% at 90% 0%, rgba(165, 246, 241, 0.8), transparent 70%),
    radial-gradient(70% 50% at 0% 100%, rgba(210, 226, 255, 0.7), transparent 70%),
    rgba(240, 251, 249, 0.76);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease-out), visibility 0s 0.45s;
}
.menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s var(--ease-out);
}
.menu__links { display: grid; gap: 2px; }
.menu__links a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 4px;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 9vw, 3.2rem);
  line-height: 1.1;
  border-bottom: 1px solid rgba(25, 74, 70, 0.1);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}
.menu__links a span {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-4);
}
.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu.is-open .menu__links a:nth-child(2) { transition-delay: 0.04s; }
.menu.is-open .menu__links a:nth-child(3) { transition-delay: 0.08s; }
.menu.is-open .menu__links a:nth-child(4) { transition-delay: 0.12s; }
.menu.is-open .menu__links a:nth-child(5) { transition-delay: 0.16s; }
.menu.is-open .menu__links a:nth-child(6) { transition-delay: 0.2s; }
.menu.is-open .menu__links a:nth-child(7) { transition-delay: 0.24s; }
.menu__foot {
  display: grid;
  gap: 14px;
  margin-top: 30px;
}
.menu__foot .btn { width: 100%; }
.menu__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.menu-toggle__icon { position: relative; width: 18px; height: 12px; }
.menu-toggle__icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.45s var(--ease-spring), top 0.3s var(--ease-out), opacity 0.2s;
}
.menu-toggle__icon span:nth-child(1) { top: 0; }
.menu-toggle__icon span:nth-child(2) { top: 5px; }
.menu-toggle__icon span:nth-child(3) { top: 10px; }
[aria-expanded="true"] .menu-toggle__icon span:nth-child(1) { top: 5px; transform: rotate(45deg); }
[aria-expanded="true"] .menu-toggle__icon span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .menu-toggle__icon span:nth-child(3) { top: 5px; transform: rotate(-45deg); }
body.menu-open { overflow: hidden; }

/* ---------- Floating Orchideen (echte Blüten) ---------- */
.bloom {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 30px 40px rgba(25, 74, 70, 0.28)) drop-shadow(0 6px 10px rgba(25, 74, 70, 0.15));
  will-change: transform;
}
.bloom--front { z-index: 3; }
.bloom--soft { filter: blur(1.5px) drop-shadow(0 20px 30px rgba(25, 74, 70, 0.2)); opacity: 0.9; }
.bloom--sway { animation: sway 9s var(--ease-soft) infinite alternate; transform-origin: 50% 0%; }
@keyframes sway {
  from { rotate: -2.2deg; }
  to { rotate: 2.2deg; }
}

/* ---------- Reveal-Animationen ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  filter: blur(10px);
  transition:
    opacity 1s var(--ease-out),
    transform 1.1s var(--ease-out),
    filter 1s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js [data-reveal="scale"] { transform: scale(0.94); }
.js [data-reveal="left"] { transform: translate3d(-32px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(32px, 0, 0); }
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Wort-für-Wort-Überschriften */
.split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em) rotate(2deg);
  filter: blur(8px);
  transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out), filter 0.9s var(--ease-out);
  transition-delay: calc(var(--i) * 55ms + var(--d, 0s));
}
.is-in .split-word,
.split-ready.is-in .split-word { opacity: 1; transform: none; filter: none; }

/* ---------- Buchungs-Dialog ---------- */
.booking {
  width: min(560px, 100vw);
  max-width: 100vw;
  height: min(820px, 100dvh);
  max-height: 100dvh;
  margin: auto;
  border-radius: 32px;
  background: transparent;
  overflow: visible;
}
.booking::backdrop {
  background: rgba(19, 51, 48, 0.32);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}
.booking[open] { animation: dialog-in 0.6s var(--ease-out); }
.booking[open]::backdrop { animation: fade-in 0.4s ease; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(26px) scale(0.97); } }
@keyframes fade-in { from { opacity: 0; } }
.booking__panel {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  overflow: hidden;
  border-radius: 32px;
}
.booking__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 14px 24px;
}
.booking__head h2 { font-family: var(--font-display); font-size: 1.8rem; line-height: 1; }
.booking__head p { margin: 4px 0 0; font-size: 0.85rem; color: var(--ink-3); }
.booking__head .icon-btn { margin-left: auto; flex: none; }
.booking__frame {
  position: relative;
  margin: 0 12px;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(25, 74, 70, 0.08);
}
.booking__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.booking__loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  font-size: 0.9rem;
  color: var(--ink-3);
  background: #fff;
  transition: opacity 0.4s;
}
.booking__frame.is-loaded .booking__loader { opacity: 0; pointer-events: none; }
.spinner {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 3px solid var(--ac-200);
  border-top-color: var(--ac-500);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.booking__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 14px 24px 18px;
  font-size: 0.82rem;
  color: var(--ink-3);
}
.booking__foot a { font-weight: 650; color: var(--accent-ink); }
@media (max-width: 600px) {
  .booking { width: 100vw; height: 100dvh; border-radius: 0; }
  .booking__panel { border-radius: 0; }
  .booking[open] { animation: sheet-in 0.55s var(--ease-out); }
  @keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }
  .booking__head { padding-top: calc(14px + env(safe-area-inset-top)); }
  .booking__foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}

/* ---------- Finale / Footer (Nacht) ---------- */
.finale {
  position: relative;
  overflow: hidden;
  color: #eafdfc;
  background:
    radial-gradient(70% 55% at 50% 38%, rgba(34, 189, 178, 0.42), transparent 70%),
    radial-gradient(50% 40% at 85% 100%, rgba(165, 246, 241, 0.22), transparent 70%),
    radial-gradient(40% 40% at 10% 80%, rgba(34, 189, 178, 0.22), transparent 70%),
    linear-gradient(180deg, rgba(238, 250, 248, 0) 0%, rgba(165, 246, 241, 0.9) 7%, #306763 17%, #123330 32%, var(--night-900) 62%, var(--night-950) 100%);
  padding-top: clamp(150px, 20vw, 260px);
}
.stars-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: linear-gradient(180deg, transparent 12%, #000 34%);
  mask: linear-gradient(180deg, transparent 12%, #000 34%);
}
.stars-field i {
  position: absolute;
  width: var(--s, 2px);
  height: var(--s, 2px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(234, 253, 252, 0.9);
  opacity: var(--o, 0.7);
  animation: twinkle var(--t, 4s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}
@keyframes twinkle { to { opacity: 0.12; transform: scale(0.6); } }

.glow-text {
  color: #fff;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.55),
    0 0 22px rgba(165, 246, 241, 0.6),
    0 0 46px rgba(120, 224, 214, 0.32),
    0 0 60px rgba(34, 189, 178, 0.5),
    0 0 120px rgba(34, 189, 178, 0.35);
}

.site-footer {
  position: relative;
  padding: clamp(60px, 8vw, 100px) 0 calc(28px + env(safe-area-inset-bottom));
}
.footer-grid {
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
.footer-grid h2 {
  margin-bottom: 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(234, 253, 252, 0.6);
}
.footer-grid li + li { margin-top: 8px; }
.footer-grid a { color: rgba(238, 253, 252, 0.88); transition: color 0.2s; }
.footer-grid a:hover { color: #fff; }
.footer-grid p { color: rgba(229, 252, 251, 0.7); font-size: 0.95rem; }
.footer-word {
  margin: clamp(50px, 8vw, 90px) 0 0;
  font-family: var(--font-display);
  font-size: clamp(4.6rem, 22vw, 20rem);
  line-height: 0.8;
  letter-spacing: -0.03em;
  text-align: center;
  white-space: nowrap;
  user-select: none;
}
.footer-word i { font-style: italic; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.82rem;
  color: rgba(234, 253, 252, 0.55);
}
.footer-bottom a:hover { color: #fff; }
.footer-brand .brand__name { color: #fff; font-size: 2rem; }
.footer-brand .brand__name i { color: #bdf8f5; }
.footer-brand .brand__sub { color: rgba(234, 253, 252, 0.6); }

/* ---------- Unterseiten-Kopf ---------- */
.page-hero {
  position: relative;
  padding: calc(var(--header-h) + clamp(60px, 9vw, 120px)) 0 clamp(40px, 6vw, 70px);
  overflow: clip;
}
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 26px;
  font-size: 0.85rem;
  color: var(--ink-3);
}
.breadcrumbs a { font-weight: 600; color: var(--ink-2); }
.breadcrumbs a:hover { color: var(--accent-ink); }

/* ---------- Rechtstexte ---------- */
.legal {
  padding: clamp(28px, 5vw, 56px);
  max-width: 860px;
}
.legal h2 {
  margin: 1.6em 0 0.5em;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.4rem + 1vw, 2.3rem);
  line-height: 1.1;
}
.legal h2:first-child { margin-top: 0; }
.legal h3 { margin: 1.4em 0 0.4em; font-weight: 700; font-size: 1.05rem; }
.legal p, .legal li { color: var(--ink-2); }
.legal ul { padding-left: 1.2em; list-style: disc; margin-bottom: 1em; }
.legal a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.legal dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 24px; margin: 0 0 1em; }
.legal dt { font-weight: 700; color: var(--ink); }
.legal dd { margin: 0; color: var(--ink-2); }
@media (max-width: 560px) { .legal dl { grid-template-columns: 1fr; gap: 2px; } .legal dd { margin-bottom: 10px; } }

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal], .split-word { opacity: 1; transform: none; filter: none; }
}

/* Fallback, falls backdrop-filter fehlt */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255, 255, 255, 0.88); }
  .glass--dark { background: rgba(19, 51, 48, 0.85); }
  .site-header__bar { background: rgba(255, 255, 255, 0.92); }
  .menu { background: #f2fefd; }
}

/* ---------- Unterseiten: Rechtliches & 404 ---------- */
.page-title { font-size: clamp(3rem, 1.8rem + 4.6vw, 5.6rem); }
.legal-wrap { padding-bottom: clamp(60px, 8vw, 110px); }
.legal__intro { font-size: 1.08rem; color: var(--ink) !important; }
.notfound {
  display: grid;
  justify-items: start;
  gap: 18px;
  max-width: 720px;
  padding: clamp(28px, 5vw, 56px);
}
.notfound__code {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(5rem, 14vw, 9rem);
  line-height: 0.85;
  background: var(--em-grad, linear-gradient(100deg, #22bdb2, #2cd9d1 42%, #4f7fdc));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.notfound__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Leichter auf Handy und Tablet ----------
   Bewegte Hintergründe hinter Glas zwingen das Gerät, die Unschärfe in jedem Bild
   neu zu rechnen. Auf Touchgeräten steht der Hintergrund deshalb still, das Korn
   entfällt und die Glasunschärfe ist etwas geringer. */
@media (hover: none), (max-width: 899px) {
  :root { --glass-blur: blur(14px) saturate(160%); }
  .atmosphere::before,
  .atmosphere::after { animation: none; will-change: auto; }
  .grain { display: none; }
}

/* ==========================================================================
   v3 · Flüssiges Glas nach Referenz
   Dicke, helle Glaskante, Lichtkante oben, Tiefe unten innen, weicher
   lila Schatten. Glänzende Flüssig-Pillen in Lila (Aktion) und Türkis
   (zweite Aktion). Schillernde Karten in Rosé, Lila und Türkis.
   ========================================================================== */
:root {
  --glass-fill: linear-gradient(160deg, rgba(255, 255, 255, 0.5) 0%, rgba(244, 254, 254, 0.26) 52%, rgba(236, 250, 249, 0.3) 100%);
  --glass-fill-strong: linear-gradient(160deg, rgba(255, 255, 255, 0.7) 0%, rgba(247, 254, 254, 0.46) 60%, rgba(240, 251, 250, 0.5) 100%);
  --glass-blur: blur(26px) saturate(150%) brightness(1.03);
  --glass-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    inset 0 0 0 6px rgba(255, 255, 255, 0.1),
    inset 0 22px 34px -24px rgba(255, 255, 255, 0.85),
    inset 0 -26px 40px -30px rgba(37, 211, 202, 0.32),
    0 28px 56px -28px rgba(37, 99, 95, 0.38),
    0 8px 18px -10px rgba(37, 99, 95, 0.2);
  --glass-shadow-lg:
    inset 0 2px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    inset 0 0 0 9px rgba(255, 255, 255, 0.1),
    inset 0 30px 46px -30px rgba(255, 255, 255, 0.9),
    inset 0 -34px 54px -36px rgba(37, 211, 202, 0.34),
    0 44px 90px -40px rgba(37, 99, 95, 0.46),
    0 12px 30px -14px rgba(37, 99, 95, 0.22);
}
/* Glaskante: breiter, mit Perlmuttschimmer */
.glass::before {
  padding: 1.6px;
  background: linear-gradient(150deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.25) 26%,
    rgba(200, 236, 234, 0.7) 48%,
    rgba(210, 251, 249, 0.55) 66%,
    rgba(255, 220, 242, 0.6) 82%,
    rgba(255, 255, 255, 0.95) 100%);
}
/* schillernde Karte (wie „Restez cohérent“) */
.glass--tint {
  background:
    radial-gradient(70% 60% at 8% 0%, rgba(255, 214, 236, 0.75), transparent 62%),
    radial-gradient(60% 60% at 100% 100%, rgba(140, 226, 218, 0.62), transparent 64%),
    radial-gradient(80% 70% at 60% 40%, rgba(183, 248, 245, 0.55), transparent 70%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.2));
}

/* Flüssig-Pillen */
.btn--primary {
  background:
    radial-gradient(120% 140% at 50% 120%, rgba(255, 190, 245, 0.35), transparent 55%),
    linear-gradient(180deg, #c1f9f6 0%, #74eae4 34%, #2bdad1 70%, #27aba3 100%);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    inset 0 -9px 16px rgba(33, 116, 112, 0.38),
    inset 0 6px 14px rgba(255, 255, 255, 0.25),
    0 16px 30px -12px rgba(38, 201, 192, 0.75),
    0 4px 10px -4px rgba(28, 92, 89, 0.3);
}
.btn--primary::before {
  inset: 3px 14px auto;
  height: 42%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.05));
}
.btn--aqua {
  color: #fff;
  text-shadow: 0 1px 2px rgba(10, 70, 80, 0.55);
  background:
    radial-gradient(90% 120% at 100% 100%, rgba(145, 244, 238, 0.45), transparent 60%),
    linear-gradient(180deg, #9fe9e2 0%, #55c6c4 34%, #2fa7ad 70%, #23899d 100%);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    inset 0 -9px 16px rgba(20, 110, 130, 0.32),
    inset 0 6px 14px rgba(255, 255, 255, 0.25),
    0 16px 30px -12px rgba(47, 178, 169, 0.7),
    0 4px 10px -4px rgba(20, 90, 100, 0.25);
}
.btn--aqua::before {
  inset: 3px 14px auto;
  height: 42%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.05));
}
.btn--glass,
.icon-btn,
.chip {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.72), rgba(248, 254, 254, 0.38));
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    inset 0 0 0 4px rgba(255, 255, 255, 0.12),
    inset 0 -8px 14px rgba(78, 218, 211, 0.14),
    0 12px 26px -14px rgba(37, 99, 95, 0.4);
}
.chip { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 8px 18px -12px rgba(37, 99, 95, 0.35); }

/* Blattschatten wie Sonnenlicht durch Pflanzen, fest im Hintergrund */
.atmosphere {
  background:
    url("../img/blattschatten.webp") 50% 0 / max(1400px, 100vw) auto no-repeat,
    radial-gradient(60vmax 50vmax at 8% 12%, rgba(165, 246, 241, 0.85), transparent 60%),
    radial-gradient(55vmax 45vmax at 92% 8%, rgba(182, 238, 231, 0.75), transparent 62%),
    radial-gradient(50vmax 50vmax at 85% 88%, rgba(234, 253, 252, 0.75), transparent 60%),
    radial-gradient(60vmax 45vmax at 12% 92%, rgba(196, 240, 233, 0.6), transparent 60%),
    radial-gradient(40vmax 30vmax at 60% 55%, rgba(250, 228, 237, 0.4), transparent 60%),
    linear-gradient(180deg, #f1fefd 0%, #ecfdfc 50%, #f0fcfb 100%);
}
/* Lichtstreifen schräg durch den Raum */
.atmosphere::before {
  left: -10vmax; top: -20vmax;
  width: 140vmax; height: 140vmax;
  border-radius: 0;
  opacity: 1;
  background: repeating-linear-gradient(115deg, transparent 0 9vmax, rgba(255, 255, 255, 0.22) 11vmax, transparent 14vmax 22vmax);
  filter: blur(18px);
  animation: none;
}

/* ==========================================================================
   v4 · Glas wie im „Blue Orchid Concept“
   Aufbau einer klaren Acrylplatte in zwei Ebenen:
   1. Facettenkante (::before): holografisch, fein gekörnt, durchsichtig,
      man sieht die Blüten dahinter nur leicht gebrochen.
   2. Glasfläche (::after): um die Kantenbreite eingerückt, mattiert, mit einer
      hellen inneren Konturlinie. Was dahinter liegt, bleibt als weiche Form
      erkennbar.
   Das Element selbst trägt keinen Filter, damit beide Ebenen die Seite
   dahinter sehen (sonst würde die Glasfläche nur die Kante unscharf rechnen).
   ========================================================================== */
:root {
  --holo-grain: url("../img/koernung.png");
  --holo:
    repeating-linear-gradient(118deg, rgba(255, 255, 255, 0) 0 18px, rgba(255, 255, 255, 0.35) 24px, rgba(255, 255, 255, 0) 32px),
    conic-gradient(from 210deg at 62% 38%,
    rgba(255, 170, 222, 0.9), rgba(165, 246, 241, 0.88), rgba(120, 206, 255, 0.9),
    rgba(150, 236, 226, 0.85), rgba(187, 248, 248, 0.85), rgba(255, 170, 222, 0.9));
  --face: linear-gradient(170deg, rgba(255, 255, 255, 0.56) 0%, rgba(250, 254, 254, 0.4) 55%, rgba(242, 252, 252, 0.44) 100%);
  --frost: 14px;
}
.glass {
  --bevel: 7px;
  /* Glasfläche: mattiert, Formen dahinter bleiben als weiche Flecken sichtbar */
  /* die Fläche liegt nur innerhalb der Facette, die Kante bleibt klar */
  background: var(--face) center / calc(100% - 2 * var(--bevel)) calc(100% - 2 * var(--bevel)) no-repeat;
  -webkit-backdrop-filter: blur(var(--frost)) saturate(135%) brightness(1.04);
  backdrop-filter: blur(var(--frost)) saturate(135%) brightness(1.04);
  --r: var(--radius-lg);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.95),
    inset 0 1.5px 0 #fff,
    0 0 0 1px rgba(58, 143, 133, 0.1),
    0 34px 70px -40px rgba(29, 80, 74, 0.42), 0 10px 24px -16px rgba(29, 80, 74, 0.24);
}
/* Facettenkante: holografischer, gekörnter Ring über der Fläche */
.glass::before {
  inset: 0;
  z-index: 0;
  padding: var(--bevel);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0.25) 46%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.45) 100%),
    var(--holo-grain),
    var(--holo);
  opacity: 0.78;
  pointer-events: none;
}
/* Innenlinie: dort, wo die Facette in die mattierte Fläche übergeht */
.glass::after {
  inset: var(--bevel);
  z-index: 0;
  border-radius: max(4px, calc(var(--r, 28px) - var(--bevel)));
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.92),
    0 0 0 2px rgba(58, 143, 133, 0.12),
    inset 0 16px 26px -22px rgba(255, 255, 255, 0.95);
  opacity: 1;
  transition: none;
  pointer-events: none;
}
:where(.glass) > :where(:not(.drop)) { position: relative; z-index: 1; }
.glass--lg { --bevel: 12px; --r: var(--radius-xl); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.95), inset 0 2px 0 #fff, 0 0 0 1px rgba(58, 143, 133, 0.1), 0 50px 90px -46px rgba(29, 80, 74, 0.5), 0 14px 30px -18px rgba(29, 80, 74, 0.26); }
.glass--strong { --face: linear-gradient(170deg, rgba(255, 255, 255, 0.78), rgba(250, 254, 254, 0.62) 60%, rgba(244, 252, 252, 0.66)); }
.glass--tint {
  background: transparent;
  --face:
    radial-gradient(70% 60% at 6% 0%, rgba(255, 214, 236, 0.6), transparent 62%),
    radial-gradient(60% 60% at 100% 100%, rgba(150, 228, 220, 0.5), transparent 64%),
    linear-gradient(170deg, rgba(255, 255, 255, 0.55), rgba(249, 254, 254, 0.38));
}
.glass--dark::before { opacity: 0.35; }
.glass--dark { --face: linear-gradient(170deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)); }
.glass--dark::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
@media (hover: none), (max-width: 899px) {
  :root { --frost: 12px; }
}

/* Tropfen auf dem Glas: klar, mit Regenbogenreflex */
.drop {
  position: absolute;
  z-index: 2;
  width: var(--s, 14px);
  height: var(--s, 14px);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 34% 30%, #fff 0 14%, rgba(255, 255, 255, 0) 26%),
    radial-gradient(circle at 64% 72%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 38%),
    conic-gradient(from 40deg, rgba(255, 186, 226, 0.55), rgba(160, 216, 255, 0.6), rgba(170, 240, 236, 0.5), rgba(196, 249, 248, 0.5), rgba(255, 186, 226, 0.55));
  box-shadow: inset 0 -2px 3px rgba(34, 104, 95, 0.32), inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 2px 3px rgba(25, 74, 68, 0.22);
  opacity: 0.92;
}

/* ---------- Buttons: edel und ruhig ----------
   Primär in tiefem Orchideenblau, wie die Schrift im Konzept; feine Lichtkante
   statt Glanzblase. Sekundär als klare Glaspille mit türkisem Akzent. */
:root {
  --accent-ink: #296f67;
  --badge-a: #5adccc;
  --badge-b: #26655e;
}
.btn { letter-spacing: 0.01em; font-weight: 600; }
.btn--primary {
  color: #fff;
  text-shadow: none;
  background: linear-gradient(180deg, #2e9b8d 0%, #2e756c 52%, #235d56 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 -8px 14px rgba(13, 49, 45, 0.32),
    0 14px 28px -14px rgba(35, 93, 86, 0.7),
    0 2px 6px -2px rgba(17, 55, 51, 0.3);
}
.btn--primary::before {
  inset: 1px 18% auto;
  height: 46%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
  filter: blur(2px);
}
.btn--primary:hover {
  background: linear-gradient(180deg, #30b7a6 0%, #307f76 52%, #27655d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 -8px 14px rgba(13, 49, 45, 0.3),
    0 20px 36px -16px rgba(35, 93, 86, 0.75),
    0 3px 8px -2px rgba(17, 55, 51, 0.3);
}
.btn--aqua,
.btn--glass {
  color: var(--ink);
  text-shadow: none;
  background: linear-gradient(175deg, rgba(255, 255, 255, 0.82), rgba(246, 250, 255, 0.5));
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 0 0 1px rgba(58, 114, 107, 0.1),
    0 12px 24px -14px rgba(29, 80, 74, 0.4);
}
.btn--aqua { color: var(--tq-ink); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(47, 178, 169, 0.42), 0 0 0 1px rgba(47, 178, 169, 0.12), 0 12px 24px -14px rgba(19, 102, 95, 0.45); }
.btn--aqua::before { display: none; }
.btn--aqua .btn__arrow, .btn--glass .btn__arrow { background: linear-gradient(160deg, #2e9b8d, #235d56); }
.btn--aqua .btn__arrow { background: linear-gradient(160deg, #55c8bf, #1f948d); }
.btn--glass:hover, .btn--aqua:hover { background: linear-gradient(175deg, #fff, rgba(246, 250, 255, 0.7)); }
.icon-btn {
  background: linear-gradient(175deg, rgba(255, 255, 255, 0.85), rgba(246, 250, 255, 0.5));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 0 0 1px rgba(58, 114, 107, 0.1), 0 10px 20px -12px rgba(29, 80, 74, 0.4);
}

/* ---------- Flüssiges Scrollen ----------
   Einblendungen nur mit Deckkraft und Bewegung (beides läuft auf der Grafikkarte),
   ohne Weichzeichner; kürzer und ohne lange Verzögerungen. Unschärfe-Filter auf
   großen Glasflächen müssten in jedem Bild neu gerechnet werden. */
.js [data-reveal] {
  filter: none;
  transform: translate3d(0, 18px, 0);
  transition: opacity 0.55s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: min(var(--d, 0s), 0.15s);
}
.js [data-reveal="scale"] { transform: scale(0.97); }
.js [data-reveal="left"] { transform: translate3d(-18px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(18px, 0, 0); }
.split-word {
  filter: none;
  transform: translateY(0.3em);
  transition: opacity 0.5s var(--ease-out), transform 0.65s var(--ease-out);
  transition-delay: calc(min(var(--i), 8) * 28ms);
}
/* Lichtstreifen ohne Weichzeichner: der Verlauf ist selbst weich */
.atmosphere::before {
  filter: none;
  background: repeating-linear-gradient(115deg, transparent 0 8vmax, rgba(255, 255, 255, 0.16) 11vmax, transparent 14vmax 22vmax);
}
.atmosphere, .atmosphere::before, .atmosphere::after { will-change: auto; }
/* laufende Bewertungen: keine Live-Unschärfe, Glas als ruhige Perlfläche */
.review.glass {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.92), rgba(247, 254, 254, 0.82)) center / calc(100% - 2 * var(--bevel)) calc(100% - 2 * var(--bevel)) no-repeat,
    linear-gradient(165deg, rgba(255, 255, 255, 0.55), rgba(238, 253, 252, 0.45));
}
/* Körnung nur auf den großen Glasflächen, wo man sie sieht; kleine und bewegte Elemente bleiben glatt */
.glass { --holo-grain: linear-gradient(transparent, transparent); }
.glass--lg { --holo-grain: url("../img/koernung.png"); }
.review.glass::before { -webkit-mask: none; mask: none; background: none; box-shadow: inset 0 0 0 1px rgba(205, 250, 248, 0.7); }
@media (hover: none), (max-width: 899px) {
  .glass--lg { --holo-grain: linear-gradient(transparent, transparent); }
}

/* ==========================================================================
   v5 · Türkis als Hauptfarbe
   Alle lila Töne sind in ihre türkise Entsprechung umgerechnet. Die zweite
   Farbe ist jetzt ein ruhiges Orchideenblau, passend zu den Blüten.
   ========================================================================== */
:root {
  --ink: #0f3436;
  --ink-2: #2c5658;
  --ink-3: #46696b;
  --accent-ink: #13756f;
  --badge-a: #6fd8cf;
  --badge-b: #168a83;
}
.display em, .h2 em, .h3 em, em.is-split .split-word {
  --em-grad: linear-gradient(100deg, #0f8c85 0%, #1aa29a 34%, #2f8fc4 70%, #3a5fcf 100%);
}
.btn--primary {
  background: linear-gradient(180deg, #34b6ad 0%, #1b958d 52%, #12746e 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 -8px 14px rgba(6, 60, 58, 0.3), 0 14px 28px -14px rgba(18, 116, 110, 0.7), 0 2px 6px -2px rgba(6, 50, 48, 0.3);
}
.btn--primary:hover { background: linear-gradient(180deg, #3cc2b8 0%, #1fa097 52%, #157c76 100%); }
/* zweite Aktion bekommt das Orchideenblau */
.btn--aqua { color: #2c4fb8; box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(60, 100, 210, 0.38), 0 0 0 1px rgba(60, 100, 210, 0.1), 0 12px 24px -14px rgba(40, 70, 170, 0.45); }
.btn--aqua .btn__arrow { background: linear-gradient(160deg, #6f95f0, #3157c8); }
.btn--glass .btn__arrow { background: linear-gradient(160deg, #34b6ad, #12746e); }
:root {
  --tq-50: #f0f4ff; --tq-100: #dde6ff; --tq-200: #bccdfb; --tq-300: #93acf3;
  --tq-400: #6a8be6; --tq-500: #4a6fd6; --tq-600: #3a5cc4; --tq-700: #2f4ba3;
  --tq-ink: #2c4aa8;
  --badge-tq-a: #8fb0ff; --badge-tq-b: #3157c8;
}