/* ==========================================================================
   SightQuest — Website Draft Stylesheet
   Aesthetic: Modern-Playful Expedition
   Brand-Primary #346861 · Accent #ff8360 · Poppins
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --teal-900: #0f2a27;
  --teal-800: #1c3e39;
  --teal-700: #265149;
  --teal-600: #2a534d;
  --teal-500: #346861;
  --teal-400: #3d7a72;
  --teal-200: #b9d4cf;
  --teal-100: #e6f1f0;
  --teal-050: #f2f8f6;

  --orange-700: #c9502d;
  --orange-600: #e06840;
  --orange-500: #ff8360;
  --orange-400: #ff9a82;
  --orange-200: #ffd9cc;
  --orange-100: #fff1ec;

  --sand: #fbf7f2;
  --paper: #fefcf8;

  --ink-900: #0b1a19;
  --ink-700: #1e293b;
  --ink-500: #334155;
  --ink-400: #4b5f6a;
  --ink-300: #8b9ba2;
  --ink-200: #c8d2d5;
  --ink-100: #e6ebeb;

  --gold: #f4c572;

  /* Fonts */
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 42, 39, 0.06), 0 2px 6px rgba(15, 42, 39, 0.04);
  --shadow-md: 0 6px 20px -6px rgba(15, 42, 39, 0.18), 0 2px 6px rgba(15, 42, 39, 0.06);
  --shadow-lg: 0 24px 48px -16px rgba(15, 42, 39, 0.22), 0 4px 12px rgba(15, 42, 39, 0.08);
  --shadow-glow: 0 0 0 6px rgba(255, 131, 96, 0.14);

  /* Layout */
  --container: 1200px;
  --container-wide: 1320px;
  --gutter: clamp(1.25rem, 3vw, 2.5rem);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
}

/* --------------------------------------------------------------------------
   1. Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
img { border-radius: inherit; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--teal-500); }

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

ul, ol { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-body);
  color: var(--ink-900);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
}

h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.8rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

h2 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

h3 { font-size: clamp(1.25rem, 1.6vw, 1.6rem); font-weight: 700; }
h4 { font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em; }

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   2. Utilities & Primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--wide { max-width: var(--container-wide); }

.section { padding: clamp(4rem, 9vw, 7rem) 0; position: relative; }
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--teal-500);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--orange-500);
  border-radius: 2px;
}
.eyebrow--light { color: var(--orange-200); }
.eyebrow--light::before { background: var(--orange-500); }

.section-title {
  max-width: 780px;
  margin: 0.9rem 0 1.2rem;
}
.section-title em {
  font-style: normal;
  font-weight: inherit;
  color: var(--teal-500);
  position: relative;
  display: inline-block;
}
.section-title em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.05em;
  height: 0.18em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 C 40 2, 80 12, 120 6 S 180 2, 198 8' stroke='%23ff8360' stroke-width='3.5' stroke-linecap='round' fill='none'/></svg>") no-repeat center / 100% 100%;
}
.section-title em.em--alt {
  color: var(--orange-600);
}
.section-title em.em--alt::after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 C 40 2, 80 12, 120 6 S 180 2, 198 8' stroke='%23346861' stroke-width='3.5' stroke-linecap='round' fill='none'/></svg>") no-repeat center / 100% 100%;
}

/* Per-Heading Overrides */
#products-title em::after { content: none; }
.section-title--nowrap { max-width: none; white-space: nowrap; }
@media (max-width: 700px) {
  .section-title--nowrap { white-space: normal; }
}
.section-lede {
  max-width: 640px;
  font-size: 1.1rem;
  color: var(--ink-500);
}
.section-note {
  max-width: 640px;
  margin-top: 0.65rem;
  font-size: 0.92rem;
  color: var(--ink-400);
  font-style: italic;
}
.section-note strong { color: var(--ink-700); font-weight: 600; }

.section-head {
  display: flex;
  flex-direction: column;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section-head--split {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}

.hidden { display: none !important; }

/* Map-dot decorative pattern (reused across sections) */
.dot-grid {
  position: absolute;
  inset: auto;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(circle, var(--teal-200) 1.3px, transparent 1.5px);
  background-size: 18px 18px;
  z-index: 0;
}

/* Dashed-route decorative divider */
.route-divider {
  display: block;
  height: 14px;
  width: 100%;
  background-image: radial-gradient(circle, var(--orange-500) 2.5px, transparent 3px);
  background-size: 14px 14px;
  background-repeat: repeat-x;
  background-position: left center;
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.95rem 1.55rem;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.005em;
  line-height: 1;
  transition: transform 0.2s var(--ease-out), box-shadow 0.25s var(--ease-out), background 0.2s, color 0.2s;
  white-space: nowrap;
  position: relative;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible {
  outline: 3px solid var(--orange-500);
  outline-offset: 3px;
}

.btn--primary,
button.btn--primary {
  background: var(--orange-500);
  color: #fff;
  box-shadow: 0 6px 20px -6px rgba(255, 131, 96, 0.6), inset 0 -3px 0 rgba(201, 80, 45, 0.25);
}
/* Specificity (0,2,1) nötig, sonst überschreibt Elementor's `.elementor-kit-11 button:hover/:focus`. */
.btn--primary:hover,
button.btn--primary:hover,
button.btn--primary:focus,
button.btn--primary:focus-visible {
  background: var(--orange-600);
  color: #fff;
  box-shadow: 0 12px 32px -8px rgba(255, 131, 96, 0.65), inset 0 -3px 0 rgba(201, 80, 45, 0.25);
}

.btn--secondary {
  background: var(--teal-500);
  color: #fff;
  box-shadow: 0 6px 20px -6px rgba(52, 104, 97, 0.6), inset 0 -3px 0 rgba(38, 81, 73, 0.35);
}
.btn--secondary:hover {
  background: var(--teal-600);
  color: #fff;
  box-shadow: 0 12px 32px -8px rgba(52, 104, 97, 0.65), inset 0 -3px 0 rgba(38, 81, 73, 0.35);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }

.btn--sm { padding: 0.7rem 1.2rem; font-size: 0.9rem; }
.btn--lg { padding: 1.15rem 2rem; font-size: 1.06rem; }

.btn .arrow {
  display: inline-block;
  transition: transform 0.25s var(--ease-out);
}
.btn:hover .arrow { transform: translateX(4px); }

/* :visited-Override für Link-Buttons. Ohne das färbt der Browser (oder Astra/WP-Default)
   die Schrift besuchter Links blau/lila, sobald man auf einem Button-href war und zurück
   navigiert. Specificity (0,2,0) reicht, alle Stati nochmal explizit als :visited setzen. */
a.btn:visited,
a.btn:visited:hover,
a.btn:visited:focus,
a.btn:visited:focus-visible,
a.btn--primary:visited,
a.btn--primary:visited:hover,
a.btn--primary:visited:focus,
a.btn--primary:visited:focus-visible,
a.btn--secondary:visited,
a.btn--secondary:visited:hover,
a.btn--secondary:visited:focus,
a.btn--secondary:visited:focus-visible,
a.btn--ghost:visited,
a.btn--ghost:visited:hover { color: #fff; }
a.btn--tour-accent:visited,
a.btn--tour-accent:visited:hover { color: var(--teal-700); }

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(254, 252, 248, 0.82);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, padding 0.3s, background 0.3s;
}
.site-header.is-scrolled {
  border-color: rgba(15, 42, 39, 0.08);
  background: rgba(254, 252, 248, 0.94);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 0.3rem 0;
  transition: padding 0.3s var(--ease-out);
}
.site-header.is-scrolled .header-inner { padding: 0.2rem 0; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  color: var(--ink-900);
  flex-shrink: 0;
}
.brand img { height: 56px; width: auto; box-shadow: none; border-radius: 0; display: block; }

.nav-primary {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.nav-primary a {
  padding: 0.55rem 0.95rem;
  font-weight: 500;
  color: var(--ink-500);
  border-radius: var(--r-pill);
  font-size: 0.95rem;
  transition: background 0.2s, color 0.2s;
}
.nav-primary a:hover { color: var(--teal-500); background: var(--teal-050); }
.nav-primary a.is-active { color: var(--teal-500); background: var(--teal-100); }

.header-side {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.lang-switch {
  display: inline-flex;
  background: #fff;
  border-radius: var(--r-pill);
  padding: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  position: relative;
  isolation: isolate;
  box-shadow: 0 1px 3px rgba(15, 42, 39, 0.08);
}
.lang-switch::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: var(--teal-500);
  border-radius: var(--r-pill);
  transition: transform 0.32s var(--ease-in-out);
  z-index: 0;
  transform: translateX(0);
  will-change: transform;
}
.lang-switch:has(> a:nth-child(2).is-active)::before,
.lang-switch.is-animating-to-en::before {
  transform: translateX(100%);
}
.lang-switch.is-animating-to-de::before {
  transform: translateX(0);
}
.lang-switch button,
.lang-switch button:hover,
.lang-switch button:focus,
.lang-switch button:focus-visible,
.lang-switch a,
.lang-switch a:hover,
.lang-switch a:focus,
.lang-switch a:focus-visible,
.lang-switch a:visited {
  position: relative;
  z-index: 1;
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill);
  color: var(--ink-400);
  background: transparent;
  box-shadow: none;
  transition: color 0.25s var(--ease-out);
  text-decoration: none;
  line-height: 1;
  flex: 1 1 0;
  text-align: center;
  min-width: 2.4em;
  -webkit-tap-highlight-color: transparent;
}
.lang-switch a:hover { color: var(--ink-700); }
.lang-switch button.is-active,
.lang-switch button.is-active:hover,
.lang-switch button.is-active:focus,
.lang-switch button.is-active:focus-visible,
.lang-switch a.is-active,
.lang-switch a.is-active:hover,
.lang-switch a.is-active:focus,
.lang-switch a.is-active:focus-visible,
.lang-switch a.is-active:visited {
  color: #fff;
  background: transparent;
  box-shadow: none;
}
.lang-switch a:active { transform: scale(0.97); transition: transform 0.1s; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--teal-050);
  color: var(--teal-500);
}
.nav-toggle svg { width: 22px; height: 22px; }

/* Mobile nav drawer */
.nav-mobile {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(88vw, 380px);
  background: var(--paper);
  z-index: 90;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease-in-out);
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem 1.75rem;
  box-shadow: -20px 0 60px -20px rgba(15, 42, 39, 0.2);
  overflow-y: auto;
}
.nav-mobile.is-open { transform: translateX(0); }
.nav-mobile-close {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-050);
  border-radius: var(--r-pill);
  margin-bottom: 1.5rem;
}
.nav-mobile > a {
  display: block;
  padding: 0.9rem 0.25rem;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink-700);
  border-bottom: 1px solid var(--ink-100);
}
.nav-mobile > a:last-of-type { border-bottom: 0; }
.nav-mobile .mobile-cta {
  margin-top: auto;
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.nav-mobile .lang-switch { align-self: flex-start; margin-top: 1rem; font-size: 0.95rem; }
.nav-mobile .lang-switch a { padding: 0.55rem 1.15rem; min-width: 3em; }

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 42, 39, 0.4);
  z-index: 85;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* Cart toggle — Desktop: nacktes Icon (kein Border, kein BG, kein Shadow).
   Mobile (≤768px) wird im Mobile-Fixes-Block unten auf filled-pill umgeschaltet,
   damit er dort optisch zum Burger passt (Lang-Switcher ist auf Mobile ausgeblendet). */
.cart-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--teal-700);
  position: relative;
  transition: color 0.2s var(--ease-out), transform 0.15s var(--ease-out);
}
/* Spezifität (0,2,1) nötig, sonst überschreibt Elementor's `.elementor-kit-11 button:hover/:focus`
   den Cart mit türkisem Hover-BG (#00B3A4). */
.site-header .cart-toggle:hover,
.site-header .cart-toggle:focus,
.site-header .cart-toggle:focus-visible,
.cart-toggle:hover,
.cart-toggle:focus,
.cart-toggle:focus-visible {
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  color: var(--teal-500);
  outline: none;
}
.cart-toggle:active { transform: scale(0.94); }
.cart-toggle svg { width: 24px; height: 24px; }
.cart-toggle .cart-count {
  position: absolute;
  top: -7px;
  right: -9px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--orange-500);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--paper);
  line-height: 1;
}
.cart-toggle .cart-count[hidden] { display: none; }

/* Cart drawer (mirrors nav-mobile, shares .nav-backdrop) */
.cart-mobile {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(92vw, 420px);
  background: var(--paper);
  z-index: 90;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease-in-out);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.25rem 1.5rem;
  box-shadow: -20px 0 60px -20px rgba(15, 42, 39, 0.2);
  overflow-y: auto;
}
.cart-mobile.is-open { transform: translateX(0); }
.cart-mobile-close {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-050);
  border-radius: var(--r-pill);
  margin-bottom: 0.5rem;
}
.cart-mobile-title {
  margin: 0 0 1rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink-700);
}
.cart-mobile-body { display: flex; flex-direction: column; flex: 1; }
.cart-mobile-empty {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2rem 0;
  text-align: center;
  color: var(--ink-500);
}
.cart-mobile-empty .btn { align-self: center; }

.mini-cart-items {
  list-style: none;
  margin: 0;
  padding: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top: 1px solid var(--ink-100);
}
.mini-cart-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 0.75rem;
  align-items: center;
}
.cart-mobile a.mini-cart-remove {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
  border-radius: 999px !important;
  background: var(--ink-100) !important;
  color: var(--ink-500) !important;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: background 0.15s, color 0.15s;
  align-self: center;
  justify-self: end;
}
.cart-mobile a.mini-cart-remove:hover,
.cart-mobile a.mini-cart-remove:focus,
.cart-mobile a.mini-cart-remove:focus-visible {
  background: var(--orange-100) !important;
  color: var(--orange-600) !important;
}
.cart-mobile a.mini-cart-remove.is-loading {
  opacity: 0.4;
  pointer-events: none;
}
.mini-cart-thumb-wrap {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ink-100);
  flex-shrink: 0;
}
.mini-cart-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  box-shadow: none;
  border-radius: 0;
}
.mini-cart-info { min-width: 0; }
.mini-cart-name {
  font-weight: 600;
  color: var(--ink-700);
  font-size: 0.95rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mini-cart-meta {
  font-size: 0.8rem;
  color: var(--ink-500);
  margin-top: 0.2rem;
}
.mini-cart-meta .mini-cart-flag { color: var(--orange-600); }
.mini-cart-line {
  font-weight: 700;
  color: var(--ink-700);
  white-space: nowrap;
  font-size: 0.95rem;
}
.mini-cart-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1rem 0;
  margin-top: auto;
  border-top: 1px solid var(--ink-100);
  font-size: 1rem;
  color: var(--ink-500);
}
.mini-cart-subtotal strong {
  font-size: 1.15rem;
  color: var(--ink-700);
}
.mini-cart-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 0.25rem;
}
.mini-cart-actions .btn {
  width: 100%;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(4rem, 8vw, 6rem);
  /* Hoehe an 16:9 Bildformat (56.25vw) angepasst, damit background-size: cover
     das Foto NICHT vertikal beschneidet (Schloss-Dach + Personen bleiben sichtbar).
     Cap bei 880px verhindert ueberdimensionierten Hero auf sehr breiten Viewports. */
  min-height: clamp(580px, 56.25vw, 880px);
  overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 85% 10%, var(--teal-100), transparent 60%),
              radial-gradient(ellipse 60% 40% at 10% 90%, var(--orange-100), transparent 60%),
              var(--paper);
}
.hero .container { max-width: var(--container-wide); }
.hero-inner {
  position: relative;
  z-index: 2;
}
.hero-content {
  max-width: 520px;
}
.hero h1 { font-size: clamp(2.4rem, 4.8vw, 4.1rem); }
.hero h1 .h1-line { display: block; white-space: nowrap; }
@media (min-width: 769px) {
  /* Text-Bereich vertikal in der Hero-Hoehe zentrieren (min-height greift, daher
     ist Hero hoeher als der Inhalt — Flex centered den hero-inner auf der Mittelachse).
     Padding entfernt, damit min-height: 56.25vw die Box-Hoehe ohne Aufschlag bestimmt
     und das Bild im 16:9-Verhaeltnis ohne Vertikal-Crop zur Anzeige kommt. */
  .hero {
    display: flex;
    align-items: center;
    padding: 0;
  }
  .hero-cta { flex-wrap: nowrap; }
  .hero-cta .btn--lg { padding: 1rem 1.4rem; font-size: 1rem; }
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  border-radius: var(--r-pill);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-500);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
}
.hero-kicker .pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--orange-500);
  color: #fff;
  font-size: 14px;
}

.hero h1 .accent,
.section-title .accent {
  color: var(--teal-500);
  position: relative;
  display: inline-block;
}
.hero h1 .accent::after,
.section-title .accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.05em;
  height: 0.18em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 C 40 2, 80 12, 120 6 S 180 2, 198 8' stroke='%23ff8360' stroke-width='3.5' stroke-linecap='round' fill='none'/></svg>") no-repeat center / 100% 100%;
}

.hero-sub {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--ink-500);
  max-width: 560px;
  margin: 1.4rem 0 2rem;
  line-height: 1.55;
}

.hero-cta {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.hero-micro {
  margin-top: 1.2rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 0.88rem;
  color: var(--ink-400);
}
.hero-micro span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero-micro .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange-500);
  box-shadow: 0 0 0 4px rgba(255, 131, 96, 0.18);
}

/* Hero-BG-Foto Variante B (analog Quest-Deep-Dive): full-bleed Bild, langer
   Mask-Fade nach links → linke ~32% komplett transparent (klar lesbarer Paper-
   Bereich), ab 32% sanfter Fade ueber 50% Hero in Voll-Opak. Background-Image
   wird per Modifier-Klasse `.hero--<slug>` gesetzt. */
.hero-bg-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 32%, rgba(0,0,0,0.35) 55%, #000 85%);
          mask-image: linear-gradient(to right, transparent 0%, transparent 32%, rgba(0,0,0,0.35) 55%, #000 85%);
}
.hero--heldenplatz .hero-bg-photo { background-image: url("../img/hero-wien-heldenplatz.webp"); }
.hero--schoenbrunn .hero-bg-photo { background-image: url("../img/hero-wien-schoenbrunn.webp"); }

/* Desktop: Content-Block in den linken Paper-Bereich am Viewport-Rand setzen,
   analog .pd-hero--bg-photo bei sqrd-landing-Templates. Container darf NICHT
   auto-zentriert sein, sonst wirkt das padding-left vom Container-Rand statt
   vom Viewport-Rand und der Content rutscht in die Mitte. */
@media (min-width: 769px) {
  .hero > .container.hero-inner {
    max-width: none;
    margin: 0;
    padding-left: clamp(3rem, 9vw, 11rem);
    padding-right: 0;
  }
}

/* --------------------------------------------------------------------------
   6. Persona Cards (Quest vs Tour)
   -------------------------------------------------------------------------- */
.section--persona { background: var(--sand); }
.persona-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.persona-card {
  background: #fff;
  border-radius: var(--r-xl);
  padding: 2.5rem 2.2rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  isolation: isolate;
}
.reveal.persona-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(38, 81, 73, 0.28); }
.reveal.persona-card--quest:hover { box-shadow: 0 18px 40px -20px rgba(201, 80, 45, 0.32); }
.persona-card::before {
  content: "";
  position: absolute;
  inset: auto -20% -40% auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  z-index: -1;
  opacity: 0.4;
  filter: blur(2px);
}
.persona-card--quest::before { background: var(--orange-100); }
.persona-card--tour::before { background: var(--teal-100); }

.persona-card .tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  position: absolute;
  top: 2.5rem;
  right: 2.2rem;
  align-self: auto;
  margin: 0;
  z-index: 1;
}
.persona-card h3 { padding-right: 7rem; }
.persona-card--quest .tag { background: var(--orange-100); color: var(--orange-700); }
.persona-card--tour .tag { background: var(--teal-100); color: var(--teal-500); }

.persona-card h3 {
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}
.persona-card h3 em { font-style: normal; }
.persona-card--quest h3 em { color: var(--orange-600); }
.persona-card--tour h3 em { color: var(--teal-500); }

.persona-card p.teaser {
  color: var(--ink-500);
  font-size: 1.02rem;
  line-height: 1.55;
}

.persona-bullets {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.3rem;
}
.persona-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: var(--ink-500);
  font-size: 0.96rem;
}
.persona-bullets .check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  margin-top: 2px;
}
.persona-card--quest .check { background: var(--orange-500); }
.persona-card--tour .check { background: var(--teal-500); }

.persona-card .ideal-for {
  font-style: italic;
  color: var(--ink-400);
  font-size: 0.92rem;
  line-height: 1.5;
  padding: 0.9rem 1rem;
  background: var(--teal-050);
  border-left: 3px solid var(--teal-200);
  border-radius: 4px;
  margin-top: auto;
  min-height: 5.4em;
  display: flex;
  align-items: center;
}
.persona-card--quest .ideal-for { background: var(--orange-100); border-left-color: var(--orange-400); }

.persona-card .price-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--ink-200);
  flex-wrap: wrap;
}
.persona-card .price {
  font-size: 1.1rem;
  color: var(--ink-500);
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.persona-card .price strong {
  display: inline;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink-900);
}
.persona-card--quest .price strong { color: var(--orange-600); }
.persona-card--tour .price strong { color: var(--teal-500); }

/* --------------------------------------------------------------------------
   7. Products Grid
   -------------------------------------------------------------------------- */
.products-row { margin-bottom: 3rem; }
.products-row:last-child { margin-bottom: 0; }
.products-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.products-row-head h3 {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.products-row-head h3 .count {
  font-weight: 500;
  color: var(--ink-300);
  margin-left: 0.6rem;
  font-size: 0.9em;
}
.products-row-head .pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: var(--r-pill);
}
.products-row--quest .pill { background: var(--orange-100); color: var(--orange-700); }
.products-row--tour .pill { background: var(--teal-100); color: var(--teal-500); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.product-card {
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
  border: 1px solid var(--ink-100);
}
.reveal.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -24px rgba(15, 42, 39, 0.25);
}
.product-card .photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--teal-100);
}
.product-card .photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}
.product-card .photo .type-badge {
  position: absolute;
  top: 1rem; left: 1rem;
  padding: 0.3rem 0.75rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  color: var(--ink-700);
}
.products-row--quest .product-card .photo .type-badge { color: var(--orange-700); }
.products-row--tour .product-card .photo .type-badge { color: var(--teal-500); }

.product-card .body { padding: 1.3rem; display: flex; flex-direction: column; gap: 0.9rem; flex: 1; }
.product-card h4 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.015em;
}
.product-card .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.product-card .meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #fff;
  color: var(--ink-700);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.35rem 0.75rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--ink-100);
  box-shadow: var(--shadow-sm);
}
.product-card .foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--ink-100);
}
.product-card .price { font-weight: 700; color: var(--teal-600); }
.product-card .price small { display: block; font-size: 0.7rem; font-weight: 400; color: var(--ink-300); letter-spacing: 0.03em; }
.product-card .more { font-weight: 600; font-size: 0.9rem; color: var(--orange-600); display: inline-flex; align-items: center; gap: 0.3rem; }

/* Builder / Individuell card — visually distinct */
.product-card--builder {
  background: linear-gradient(135deg, var(--teal-050), #fff 60%);
  border: 1px dashed var(--teal-200);
  box-shadow: none;
}
.product-card--builder .photo {
  background: linear-gradient(135deg, var(--teal-100) 0%, var(--teal-050) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.product-card--builder .builder-illu {
  width: 100%;
  height: 100%;
  padding: 1.2rem;
  display: block;
  position: relative;
  z-index: 1;
}
/* Quest-Builder: warmer Hintergrund, der zum orangen Theme passt */
.products-row--quest .product-card--builder .photo {
  background: linear-gradient(135deg, var(--orange-100) 0%, #fff 100%);
}
.product-card--builder .photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--teal-200) 1.2px, transparent 1.4px);
  background-size: 16px 16px;
  opacity: 0.45;
}
.products-row--quest .product-card--builder .photo::before {
  background-image: radial-gradient(circle, var(--orange-200) 1.2px, transparent 1.4px);
}

/* --------------------------------------------------------------------------
   8. How it works
   -------------------------------------------------------------------------- */
.section--how {
  background: linear-gradient(180deg, var(--paper) 0%, var(--teal-050) 100%);
}
.how-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.how-grid--stacked {
  grid-template-columns: 1fr;
  max-width: 620px;
  margin: 0;
}
.how-grid--stacked .steps {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 1.5rem;
}

.phone-mockup {
  position: relative;
  max-width: 300px;
  margin: 0 auto;
  aspect-ratio: 1179 / 2556;
  background: #0b1a19;
  border-radius: 42px;
  padding: 12px;
  box-shadow: 0 30px 60px -20px rgba(15, 42, 39, 0.4), 0 0 0 4px rgba(0, 0, 0, 0.08);
}
.phone-mockup::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 22px;
  background: #000;
  border-radius: 14px;
  z-index: 2;
}
.phone-screen {
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--teal-500) 0%, var(--teal-700) 100%);
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  color: #fff;
  padding: 44px 18px 18px;
}
.phone-screen .status {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.7;
  margin-bottom: 1rem;
}
.phone-screen .riddle-title {
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 0.7rem;
}
.phone-screen .riddle-body {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 0.9rem;
  font-size: 0.82rem;
  line-height: 1.5;
  margin-bottom: 0.9rem;
  backdrop-filter: blur(8px);
}
.phone-screen .input {
  background: #fff;
  color: var(--ink-700);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  font-size: 0.8rem;
  margin-bottom: 0.7rem;
}
.phone-screen .submit {
  background: var(--orange-500);
  color: #fff;
  border-radius: 10px;
  padding: 0.6rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.82rem;
}
.phone-screen .progress {
  margin-top: auto;
  display: flex;
  gap: 6px;
}
.phone-screen .progress i {
  display: block;
  height: 6px;
  flex: 1;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}
.phone-screen .progress i.done { background: var(--orange-500); }

/* Tour-Variant: Audio-Bar statt Input/Submit */
.phone-screen .audio-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #fff;
  border-radius: 12px;
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.7rem;
}
.phone-screen .audio-play {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--teal-500);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  padding-left: 2px;
}
.phone-screen .audio-track {
  flex: 1;
  height: 4px;
  background: var(--ink-100);
  border-radius: 2px;
  overflow: hidden;
}
.phone-screen .audio-progress {
  width: 38%;
  height: 100%;
  background: var(--teal-500);
}
.phone-screen .audio-time {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.step {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  position: relative;
}
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 52px;
  left: 23px;
  bottom: -1.5rem;
  width: 2px;
  background-image: linear-gradient(to bottom, var(--teal-200) 50%, transparent 50%);
  background-size: 2px 10px;
}
.step-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--teal-500);
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px -6px rgba(52, 104, 97, 0.6);
  position: relative;
  z-index: 1;
}
.step-num::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px dashed var(--teal-200);
  animation: spin 20s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.step-body h4 { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.35rem; }
.step-body p { color: var(--ink-500); font-size: 0.98rem; margin: 0; }

/* --------------------------------------------------------------------------
   9. Why — Bento grid
   -------------------------------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(130px, auto);
  gap: 1rem;
}
.bento-card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--ink-100);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.reveal.bento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -24px rgba(38, 81, 73, 0.25);
}
.reveal.bento-card--big:hover {
  box-shadow: 0 22px 50px -20px rgba(15, 42, 39, 0.45);
}
.bento-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.bento-card h4 { font-size: 1.05rem; font-weight: 700; color: var(--ink-900); letter-spacing: -0.015em; margin: 0; }
.bento-card p { color: var(--ink-500); font-size: 0.92rem; line-height: 1.5; margin: 0; }
.bento-card--big {
  grid-column: span 2;
  grid-row: span 2;
  background: linear-gradient(135deg, var(--teal-500) 0%, var(--teal-700) 100%);
  color: #fff;
  border: 0;
  padding: 1.8rem 1.8rem 1.6rem 1.8rem;
  padding-top: 3.3rem;
  justify-content: center;
  gap: 0.75rem;
}
/* (Oranger Schimmer in der oberen rechten Ecke entfernt — bento-card--big::before war ein
   radial-gradient orange-500. Auf Wunsch raus.) */
.bento-card--big::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.14) 1px, transparent 1.3px);
  background-size: 22px 22px;
  mask-image: linear-gradient(135deg, #000 20%, transparent 70%);
  -webkit-mask-image: linear-gradient(135deg, #000 20%, transparent 70%);
}
.bento-card--big h4 {
  color: #fff;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  letter-spacing: -0.02em;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}
.bento-card--big p { color: rgba(255, 255, 255, 0.88); font-size: 0.95rem; max-width: 560px; margin: 0; }
.bento-card--big .icon {
  background: rgba(255, 255, 255, 0.14);
  color: var(--orange-400);
  backdrop-filter: blur(8px);
  width: 38px;
  height: 38px;
  font-size: 19px;
}
.bento-card--big .tag-new {
  position: absolute;
  top: 1.2rem;
  left: 1.8rem;
  background: var(--orange-500);
  color: #fff;
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bento-card--wide { grid-column: span 2; }

/* --------------------------------------------------------------------------
   10. Demo block (dark)
   -------------------------------------------------------------------------- */
.section--demo {
  background: var(--teal-900);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.section--demo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 131, 96, 0.14), transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(52, 104, 97, 0.4), transparent 45%),
    radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1.3px);
  background-size: auto, auto, 26px 26px;
  pointer-events: none;
}
.section--demo .section-head { position: relative; z-index: 1; }
.section--demo h2 { color: #fff; }
.section--demo h2 em {
  background: none;
  color: var(--orange-400);
}
#demo-title em::after { content: none; }
.section--demo .section-lede { color: rgba(255, 255, 255, 0.75); }

.demo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}
.demo-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-xl);
  padding: 2rem;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  transition: border-color 0.3s, transform 0.3s var(--ease-out);
}
.demo-card:hover {
  transform: translateY(-4px);
  border-color: var(--orange-500);
}
.demo-card--tour:hover {
  border-color: var(--teal-200);
}
.demo-card .demo-screen {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--teal-700), var(--teal-500));
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
}
.demo-card--quest .demo-screen {
  background:
    radial-gradient(circle at 85% 15%, rgba(255,131,96,0.22), transparent 55%),
    linear-gradient(135deg, var(--teal-700), var(--teal-500));
}
.demo-card--tour .demo-screen {
  background:
    radial-gradient(circle at 85% 15%, rgba(185,212,207,0.22), transparent 55%),
    linear-gradient(135deg, var(--teal-700), var(--teal-500));
}
.demo-illu {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.btn--tour-accent {
  background: var(--teal-100);
  color: var(--teal-700);
  box-shadow: 0 6px 20px -6px rgba(185, 212, 207, 0.45), inset 0 -3px 0 rgba(38, 81, 73, 0.12);
}
.btn--tour-accent:hover {
  background: #fff;
  color: var(--teal-700);
  box-shadow: 0 12px 32px -8px rgba(185, 212, 207, 0.6), inset 0 -3px 0 rgba(38, 81, 73, 0.12);
}
.demo-card h3 { color: #fff; font-size: 1.4rem; font-weight: 700; }
.demo-card p { color: rgba(255, 255, 255, 0.75); font-size: 0.96rem; }
.demo-card .demo-meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: auto;
}
.demo-card .demo-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.3rem 0.8rem;
  border-radius: var(--r-pill);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
}

/* --------------------------------------------------------------------------
   11. Testimonials
   -------------------------------------------------------------------------- */
.testimonial-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  padding: 1.2rem var(--gutter) 1.5rem;
  scrollbar-width: none;
  cursor: grab;
}
/* Auto-margins center the row when it fits, collapse to 0 when content overflows */
.testimonial-track > :first-child { margin-inline-start: auto; }
.testimonial-track > :last-child  { margin-inline-end: auto; }
.testimonial-track:active { cursor: grabbing; }
.testimonial-track::-webkit-scrollbar { display: none; }

.testimonial {
  flex: 0 0 clamp(280px, 34vw, 380px);
  background: #fff;
  padding: 1.4rem 1.5rem;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--ink-100);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  position: relative;
}
.testimonial-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.testimonial .stars {
  display: inline-flex;
  gap: 2px;
  color: var(--gold);
  font-size: 1.05rem;
  line-height: 1;
}
.testimonial-date {
  font-size: 0.8rem;
  color: var(--ink-400);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.testimonial-product {
  align-self: flex-start;
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.28rem 0.7rem;
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
a.testimonial-product:hover { transform: translateY(-1px); }
.testimonial--quest .testimonial-product {
  background: var(--orange-100);
  color: var(--orange-700);
}
.testimonial--quest a.testimonial-product:hover {
  background: var(--orange-200, #ffd9cb);
  color: var(--orange-700);
}
.testimonial--tour .testimonial-product {
  background: var(--teal-100);
  color: var(--teal-700);
}
.testimonial--tour a.testimonial-product:hover {
  background: var(--teal-200, #b9ece5);
  color: var(--teal-700);
}
.testimonial blockquote {
  color: var(--ink-700);
  font-size: 1.0rem;
  line-height: 1.55;
  font-weight: 500;
  margin: 0.2rem 0;
  padding-left: 0.85rem;
}
.testimonial blockquote p { margin: 0 0 0.65em; }
.testimonial blockquote p:last-child { margin-bottom: 0; }
.testimonial cite {
  font-style: normal;
  font-size: 0.88rem;
  color: var(--ink-400);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: auto;
}

.testimonial-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.8rem;
}
.testimonial-controls button[data-testimonial-prev],
.testimonial-controls button[data-testimonial-next] {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0.4rem;
  color: var(--ink-300);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s;
}
.testimonial-controls button[data-testimonial-prev]:hover,
.testimonial-controls button[data-testimonial-next]:hover {
  color: var(--ink-500);
}
.testimonial-dots {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
}
/* Specificity boost to beat Elementor's ".elementor-kit-11 button:hover/:focus" (0,2,1):
   ".testimonials .testimonial-dots .testimonial-dot:state" = (0,3,1) wins. */
.testimonials .testimonial-dots .testimonial-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  background: var(--ink-300);
  padding: 0;
  border: 0;
  margin: 0;
  line-height: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: 0;
  box-shadow: none;
  transition: background 0.15s;
}
.testimonials .testimonial-dots .testimonial-dot:hover,
.testimonials .testimonial-dots .testimonial-dot:focus,
.testimonials .testimonial-dots .testimonial-dot:focus-visible,
.testimonials .testimonial-dots .testimonial-dot:active { background: var(--ink-500); }
.testimonials .testimonial-dots .testimonial-dot.is-active,
.testimonials .testimonial-dots .testimonial-dot.is-active:hover,
.testimonials .testimonial-dots .testimonial-dot.is-active:focus,
.testimonials .testimonial-dots .testimonial-dot.is-active:focus-visible { background: var(--orange-500); }
.testimonial-controls.is-hidden { display: none; }

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */
.section--faq { background: var(--sand); }
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.faq-item {
  background: #fff;
  border-radius: var(--r-md);
  border: 1px solid var(--ink-100);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.faq-item[open] {
  border-color: var(--teal-200);
  box-shadow: var(--shadow-sm);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .toggle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--teal-050);
  color: var(--teal-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: transform 0.3s var(--ease-out), background 0.2s;
}
.faq-item[open] summary .toggle { transform: rotate(45deg); background: var(--orange-500); color: #fff; }
.faq-answer {
  padding: 0 1.4rem 1.3rem;
  color: var(--ink-500);
  font-size: 0.98rem;
  line-height: 1.65;
}
.faq-hours {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 1.5rem;
  row-gap: 0.35rem;
  margin: 0.7rem 0 0;
}
.faq-hours dt { font-weight: 500; }
.faq-hours dd { margin: 0; color: var(--ink-400); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   13. Final CTA (bg image)
   -------------------------------------------------------------------------- */
.section--final-cta {
  position: relative;
  overflow: hidden;
  color: #fff;
  text-align: center;
  padding: clamp(5rem, 10vw, 8rem) 0;
  background: var(--teal-800);
}
.section--final-cta .bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.55) saturate(1.1);
  z-index: 0;
}
.section--final-cta::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 42, 39, 0.5) 0%, rgba(15, 42, 39, 0.8) 100%);
  z-index: 0;
}
.section--final-cta .inner { position: relative; z-index: 1; }
.section--final-cta h2 {
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 4rem);
  max-width: none;
  margin: 0 auto clamp(1.75rem, 3vw, 2.5rem);
  white-space: nowrap;
}
.section--final-cta h2 em {
  color: var(--orange-500);
  background: none;
  font-style: normal;
}
@media (max-width: 560px) {
  .section--final-cta h2 { white-space: normal; }
}
.section--final-cta p.lede {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.1rem;
  max-width: 560px;
  margin: 0 auto 2rem;
}
.section--final-cta .cta-stack {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--teal-900);
  color: rgba(255, 255, 255, 0.75);
  padding: clamp(3rem, 6vw, 5rem) 0 2rem;
  position: relative;
  overflow: hidden;
}
.site-footer > .container { position: relative; z-index: 1; }

.footer-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.footer-watermark img {
  width: min(1100px, 92vw);
  max-width: none;
  height: auto;
  opacity: 0.03;
  transform: translateY(-2%);
  filter: brightness(0) invert(1);
}

/* ---- Newsletter block ---- */
.footer-newsletter {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-newsletter-title {
  text-align: center;
  color: #fff;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}
.footer-newsletter-title em {
  font-style: normal;
  color: var(--orange-500);
}
.footer-newsletter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  max-width: 1040px;
  margin: 0 auto;
}
.footer-newsletter-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
  line-height: 1.6;
}
.footer-newsletter-copy strong {
  color: #fff;
  font-weight: 700;
}
.footer-newsletter-form { margin: 0; }
.footer-newsletter-field label {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 0.55rem;
}
.footer-newsletter-input-row {
  display: flex;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-pill);
  padding: 0.35rem 0.35rem 0.35rem 0.35rem;
  transition: border-color 0.2s, background 0.2s;
}
.footer-newsletter-input-row:focus-within {
  border-color: var(--orange-500);
  background: rgba(255, 255, 255, 0.1);
}
.footer-newsletter-input-row input[type="email"] {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0 1rem;
  color: #fff;
  font: inherit;
  font-size: 1rem;
}
.footer-newsletter-input-row input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.footer-newsletter-input-row input[type="email"]:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 9999s ease-in-out 0s;
}
.footer-newsletter-input-row .btn {
  flex-shrink: 0;
  padding: 0.8rem 1.3rem;
  font-size: 0.95rem;
}
/* Beat Elementor-kit button overrides (background on hover/focus + border-radius) */
.footer-newsletter-input-row button.btn--primary,
.footer-newsletter-input-row button.btn--primary:hover,
.footer-newsletter-input-row button.btn--primary:focus,
.footer-newsletter-input-row button.btn--primary:focus-visible {
  border-radius: var(--r-pill);
}
.footer-newsletter-input-row button.btn--primary:hover,
.footer-newsletter-input-row button.btn--primary:focus,
.footer-newsletter-input-row button.btn--primary:focus-visible {
  background: var(--orange-600);
  color: #fff;
  box-shadow: 0 12px 32px -8px rgba(255, 131, 96, 0.65), inset 0 -3px 0 rgba(201, 80, 45, 0.25);
}
.footer-newsletter-status {
  min-height: 1.25rem;
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  line-height: 1.4;
}
.footer-newsletter-status.is-success { color: var(--teal-100); }
.footer-newsletter-status.is-error { color: var(--orange-200); }
.footer-newsletter-fineprint {
  margin: 0.8rem 0 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.5;
}
.footer-newsletter-fineprint a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-newsletter-fineprint a:hover { color: var(--orange-400); }
.footer-newsletter-form.is-submitting .btn { opacity: 0.6; pointer-events: none; }
.footer-newsletter-form.is-success .footer-newsletter-input-row,
.footer-newsletter-form.is-success .footer-newsletter-fineprint { display: none; }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
  column-gap: 4rem;
  margin-bottom: 3rem;
}
.footer-brand-col .footer-brand {
  display: inline-block;
  margin-bottom: 1.1rem;
}
.footer-brand-col .footer-brand img { height: 110px; width: auto; display: block; }
.footer-brand-col p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.55;
  margin: 0;
  max-width: 260px;
}
.site-footer ul { padding: 0; margin: 0; }
.site-footer h5 {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 1rem;
}
.site-footer ul li { margin-bottom: 0.55rem; }
.site-footer ul li a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  transition: color 0.2s;
}
.site-footer ul li a:hover { color: var(--orange-400); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1.8rem;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}
.footer-bottom a { color: inherit; }
.footer-bottom a:hover { color: var(--orange-400); }

/* --------------------------------------------------------------------------
   15. Mobile Sticky CTA
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 70;
  display: none;
  background: #fff;
  box-shadow: 0 20px 40px -10px rgba(15, 42, 39, 0.25);
  border-radius: var(--r-pill);
  padding: 0.5rem 0.5rem 0.5rem 1.2rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  transform: translateY(200%);
  transition: transform 0.4s var(--ease-out);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-900);
  line-height: 1.2;
}
.sticky-cta .label small {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-400);
  margin-top: 2px;
}
.sticky-cta .btn { padding: 0.75rem 1.2rem; font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   16. Deep-dive specific
   -------------------------------------------------------------------------- */
.pd-hero {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3.5rem, 6vw, 5rem);
  background: var(--paper);
  overflow: hidden;
}
.pd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 85% 30%, var(--teal-100), transparent 65%);
  pointer-events: none;
}

/* ----- pd-hero--bg-photo: Variante analog Homepage-Hero -----
   Bild liegt rechts (aspect-matched, kein Crop), faded ueber kurze Mask in den
   Punkteraster + Spotlight-Gradient links. Text-Bereich vertikal zentriert. */
.pd-hero--bg-photo {
  /* Bild-Geometrie als CSS-Vars, damit der Content in der Paper-Bereichs-Mitte sitzt.
     Hero-Hoehe wird vom Content getrieben (~700px bei vp 1440), darum ist das
     aspect-matched Bild ~940px breit und der Paper-Bereich nur ~500px. */
  --pd-bg-height: max(clamp(580px, 44vw, 760px), 700px);
  --pd-bg-width: calc(var(--pd-bg-height) * 1.34);
  --pd-paper-width: calc(100vw - var(--pd-bg-width));
  --pd-content-w: 440px;

  min-height: var(--pd-bg-height);
  background: radial-gradient(ellipse 80% 60% at 85% 10%, var(--teal-100), transparent 60%),
              radial-gradient(ellipse 60% 40% at 10% 90%, var(--orange-100), transparent 60%),
              var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
}
.pd-hero--bg-photo::before {
  /* Kein Punkteraster — Spotlight-Gradient kommt vom .pd-hero--bg-photo selbst.
     Background-image: none unterdrueckt zudem die geerbte .pd-hero::before Ellipse,
     damit sich die Spotlights nicht doppeln. */
  background-image: none;
  z-index: 0;
}
.pd-hero-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  aspect-ratio: 1200 / 896;
  width: auto;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 1;
  /* Laengerer Fade als Homepage — Quest-Bilder sind visuell dichter. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 100%);
}
/* Quest- + Tour-Deep-Dive-Variante (WI + SB, Quest + Tour): nutzt pd-hero--bg-photo Mechanik
   mit full-bleed Bild (kein aspect-match) + LANGEM Mask-Fade nach links — analog dem alten
   Paper→transparent Overlay. Content-Block sitzt auf opakem Paper-Streifen links. */
.sqrd-landing--innenstadt .pd-hero-bg,
.sqrd-landing--schoenbrunn .pd-hero-bg,
.sqrd-landing--innenstadt-tour .pd-hero-bg,
.sqrd-landing--schoenbrunn-tour .pd-hero-bg {
  aspect-ratio: auto;
  width: auto;
  inset: 0;
  /* Linke ~32% komplett transparent (klar lesbarer Paper-Bereich), ab 32% sanfter
     Fade ueber 50% Hero in Voll-Opak. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 32%, rgba(0,0,0,0.35) 55%, #000 85%);
          mask-image: linear-gradient(to right, transparent 0%, transparent 32%, rgba(0,0,0,0.35) 55%, #000 85%);
}
.sqrd-landing--innenstadt .pd-hero-bg {
  background-image: url("../img/wi-pinnwand.webp");
}
.sqrd-landing--schoenbrunn .pd-hero-bg {
  background-image: url("../img/sb-hero-fj-sisi.webp");
}
.sqrd-landing--innenstadt-tour .pd-hero-bg {
  background-image: url("../img/wi-neue-burg-hero.webp");
}
.sqrd-landing--schoenbrunn-tour .pd-hero-bg {
  background-image: url("../img/sb-gloriette-hero.webp");
}
@media (max-width: 768px) {
  .sqrd-landing--innenstadt-tour .pd-hero-bg {
    background-image: url("../img/wi-neue-burg-hero-mobile.webp");
  }
  .sqrd-landing--schoenbrunn-tour .pd-hero-bg {
    background-image: url("../img/sb-gloriette-hero-mobile.webp");
  }
}
/* Content-Block deutlich weiter rechts und volle 520px Width mit Title in einer Zeile —
   sitzt mittig zwischen Hero-Rand und dem Punkt, an dem das Bild deutlich sichtbar wird. */
.sqrd-landing--innenstadt.sqrd-landing .pd-hero-content,
.sqrd-landing--schoenbrunn.sqrd-landing .pd-hero-content,
.sqrd-landing--innenstadt-tour.sqrd-landing .pd-hero-content,
.sqrd-landing--schoenbrunn-tour.sqrd-landing .pd-hero-content {
  max-width: 520px;
}
.sqrd-landing--innenstadt.sqrd-landing .pd-title,
.sqrd-landing--schoenbrunn.sqrd-landing .pd-title,
.sqrd-landing--innenstadt-tour.sqrd-landing .pd-title,
.sqrd-landing--schoenbrunn-tour.sqrd-landing .pd-title {
  white-space: nowrap;
  font-size: clamp(1.7rem, 4.2vw, 3.4rem);
}
@media (min-width: 769px) {
  .sqrd-landing--innenstadt.sqrd-landing .pd-hero--bg-photo > .container,
  .sqrd-landing--innenstadt.sqrd-landing .pd-hero--bg-photo > .pd-hero-breadcrumb-wrap,
  .sqrd-landing--schoenbrunn.sqrd-landing .pd-hero--bg-photo > .container,
  .sqrd-landing--schoenbrunn.sqrd-landing .pd-hero--bg-photo > .pd-hero-breadcrumb-wrap,
  .sqrd-landing--innenstadt-tour.sqrd-landing .pd-hero--bg-photo > .container,
  .sqrd-landing--innenstadt-tour.sqrd-landing .pd-hero--bg-photo > .pd-hero-breadcrumb-wrap,
  .sqrd-landing--schoenbrunn-tour.sqrd-landing .pd-hero--bg-photo > .container,
  .sqrd-landing--schoenbrunn-tour.sqrd-landing .pd-hero--bg-photo > .pd-hero-breadcrumb-wrap {
    padding-left: clamp(3rem, 9vw, 11rem);
  }
}
.pd-hero--bg-photo .container {
  position: relative;
  z-index: 2;
}
/* Breadcrumb sitzt im Flex-Flow direkt ueber dem Content (gemeinsam vertikal zentriert). */
.pd-hero--bg-photo .pd-hero-breadcrumb-wrap {
  position: relative;
  z-index: 3;
}
/* Desktop: Container so positionieren, dass der Content (max 520px) horizontal in der
   Mitte des Paper-Bereichs (= Hero links bis Bild-Anfang) sitzt.
   Padding-left = (Paper-Width - Content-Width) / 2 — gefenced mit 1.5rem Min als Schutz
   bei schmalen Viewports. Mobile behaelt default container. */
@media (min-width: 769px) {
  .pd-hero--bg-photo > .container,
  .pd-hero--bg-photo > .pd-hero-breadcrumb-wrap {
    max-width: none;
    margin: 0;
    padding-left: max(1.5rem, calc((var(--pd-paper-width) - var(--pd-content-w)) / 2));
    padding-right: 0;
  }
}
.pd-hero--bg-photo .pd-hero-breadcrumb-wrap .pd-breadcrumb {
  margin-bottom: 0;
}
.pd-hero-content {
  max-width: 520px;
  position: relative;
  z-index: 2;
}
/* Im --bg-photo Hero ist Paper schmaler — Content darf nicht ueberlappen, Title wrap't */
.pd-hero--bg-photo .pd-hero-content { max-width: var(--pd-content-w); }
.pd-hero--bg-photo .pd-title { white-space: normal; font-size: clamp(1.5rem, 3.4vw, 2.6rem); }
.pd-hero--bg-photo .pd-tagline { max-width: 100%; }
.pd-breadcrumb {
  position: relative;
  font-size: 0.88rem;
  color: var(--ink-400);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.pd-breadcrumb a { color: inherit; }
.pd-breadcrumb a:hover { color: var(--teal-500); }
.pd-breadcrumb .sep { color: var(--ink-200); }

.pd-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
.pd-title {
  font-size: clamp(1.7rem, 4.2vw, 3.4rem);
  white-space: nowrap;
  margin-bottom: 0.9rem;
  letter-spacing: -0.03em;
  color: var(--ink-900);
}
.pd-tagline {
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  color: var(--ink-500);
  line-height: 1.55;
  margin: 0 0 1.7rem;
  font-weight: 400;
  max-width: 540px;
}
.pd-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.7rem;
}
.pd-facts span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  padding: 0.45rem 0.9rem;
  border-radius: var(--r-pill);
  font-size: 0.88rem;
  color: var(--ink-700);
  font-weight: 500;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--ink-100);
}
.pd-price-box {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: 1.3rem 1.5rem 1.25rem;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: 1.7rem;
}
.pd-price-box__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.pd-price-box .amount {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--teal-500);
  line-height: 1;
  letter-spacing: -0.03em;
}
.pd-price-box .amount small { display: block; font-size: 0.72rem; color: var(--ink-400); font-weight: 500; margin-top: 4px; letter-spacing: 0.02em; }
.pd-price-box__top .divider {
  width: 1px;
  height: 48px;
  background: var(--ink-100);
}
.pd-price-box .per-person {
  font-size: 0.95rem;
  color: var(--ink-500);
  line-height: 1.4;
}
.pd-price-box .per-person strong { color: var(--ink-900); font-weight: 700; }
.pd-price-box__cta { width: 100%; }
.pd-price-box__trust {
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-400);
  line-height: 1.4;
}
.pd-price-box__trust .sep {
  display: inline-block;
  margin: 0 0.85rem;
  color: var(--ink-200);
}

@media (max-width: 900px) {
  .pd-price-box__top { gap: 1rem; }
  .pd-price-box .amount { font-size: 1.7rem; }
  .pd-price-box__top .divider { height: 42px; }
  .pd-price-box .per-person { font-size: 0.9rem; }
}

/* Hero-Visual: Detective-Pinnwand */
.pd-dossier {
  position: relative;
  align-self: stretch;
  min-height: 460px;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.pd-dossier img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.pd-dossier--karte {
  aspect-ratio: 1264 / 843;
  min-height: 0;
}

/* Hero-Visual: Individuelle-Quest-Builder-Illustration (analog Homepage-Karte) */
.pd-dossier--builder {
  background: linear-gradient(135deg, var(--orange-100) 0%, #fff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
}
.pd-dossier--builder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--orange-200) 1.2px, transparent 1.4px);
  background-size: 16px 16px;
  opacity: 0.45;
  pointer-events: none;
}
.pd-dossier--builder .builder-illu {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  max-height: 100%;
  padding: 1.6rem;
  display: block;
}

/* Stations gallery */
.section--stations { background: var(--sand); }
.stations-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.stations-map {
  position: sticky;
  top: 100px;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--teal-100);
  min-height: 500px;
  max-height: 640px;
}
.stations-map-fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--teal-100) 0%, var(--teal-050) 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-500);
  font-weight: 500;
}
.stations-map-fallback::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--teal-200) 1px, transparent 1.5px);
  background-size: 16px 16px;
  opacity: 0.6;
}

.stations-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0;
  margin: 0;
}
.station-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: #fff;
  border-radius: var(--r-md);
  border: 1px solid var(--ink-100);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  cursor: pointer;
}
.station-item:hover, .station-item.is-active {
  border-color: var(--orange-500);
  box-shadow: 0 8px 20px -10px rgba(255, 131, 96, 0.4);
  transform: translateX(3px);
}
.station-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--teal-500);
  color: #fff;
  font-weight: 800;
  font-size: 0.98rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.station-item.is-active .station-num { background: var(--orange-500); }
.station-info h5 { font-size: 1rem; font-weight: 700; color: var(--ink-900); margin: 0; }
.station-item { align-items: center; }

/* Collapse / Expand */
.stations-collapse:not(.is-expanded) .stations-list .station-item + .station-item {
  display: none;
}
.stations-collapse.is-expanded .stations-toggle {
  display: none;
}
.stations-collapse.is-expanded .stations-list .station-item + .station-item {
  animation: stationReveal 0.4s var(--ease-out) both;
}
.stations-collapse.is-expanded .stations-list .station-item:nth-child(2) { animation-delay: 0.02s; }
.stations-collapse.is-expanded .stations-list .station-item:nth-child(3) { animation-delay: 0.05s; }
.stations-collapse.is-expanded .stations-list .station-item:nth-child(4) { animation-delay: 0.08s; }
.stations-collapse.is-expanded .stations-list .station-item:nth-child(5) { animation-delay: 0.11s; }
.stations-collapse.is-expanded .stations-list .station-item:nth-child(6) { animation-delay: 0.14s; }
.stations-collapse.is-expanded .stations-list .station-item:nth-child(7) { animation-delay: 0.17s; }
.stations-collapse.is-expanded .stations-list .station-item:nth-child(8) { animation-delay: 0.20s; }
.stations-collapse.is-expanded .stations-list .station-item:nth-child(9) { animation-delay: 0.23s; }
@keyframes stationReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Specificity boost (.stations-collapse .stations-toggle = 0,2,0) to beat Elementor's .elementor-kit-X button (0,1,1) and on hover (0,2,1). */
.stations-collapse .stations-toggle {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin-top: 0.65rem;
  padding: 1rem 1.2rem;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  color: var(--ink-900);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.stations-collapse .stations-toggle:hover,
.stations-collapse .stations-toggle:focus-visible {
  background: #fff;
  color: var(--ink-900);
  border-color: var(--orange-500);
  box-shadow: 0 8px 20px -10px rgba(255, 131, 96, 0.4);
  transform: translateX(3px);
  outline: none;
}
.stations-toggle__label { flex: 1; }
.stations-toggle__chev {
  display: inline-block;
  color: var(--ink-400);
  font-size: 0.9rem;
  transition: transform 0.25s var(--ease-out);
}
.stations-collapse .stations-toggle:hover .stations-toggle__chev { color: var(--orange-500); }

/* Tour-Mode: Direction switcher */
.tour-direction {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.5rem;
  padding: 0.55rem 0.9rem 0.55rem 1.1rem;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-900);
  white-space: nowrap;
}
.tour-direction__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.tour-direction__from,
.tour-direction__to {
  color: var(--teal-600);
}
/* Specificity boost (.tour-direction .tour-direction__swap = 0,2,0) to beat Elementor's
   .elementor-kit-11 button (0,1,1) and its forced padding/border-radius. */
.tour-direction .tour-direction__swap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  background: var(--teal-050);
  color: var(--teal-600);
  border: 1px solid var(--teal-100);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out), transform 0.3s var(--ease-out);
}
/* SVG ist als Up/Down gezeichnet; auf Desktop drehen wir es horizontal. */
.tour-direction .tour-direction__swap svg {
  width: 18px;
  height: 18px;
  display: block;
  transform: rotate(-90deg);
}
.tour-direction .tour-direction__swap:hover,
.tour-direction .tour-direction__swap:focus,
.tour-direction .tour-direction__swap:focus-visible {
  background: var(--teal-050);
  color: var(--teal-600);
  border-color: var(--teal-100);
  border-radius: 50%;
  transform: rotate(180deg);
}
[data-tour-stations][data-tour-dir="ba"] .tour-direction .tour-direction__swap,
[data-tour-stations][data-tour-dir="ba"] .tour-direction .tour-direction__swap:hover,
[data-tour-stations][data-tour-dir="ba"] .tour-direction .tour-direction__swap:focus,
[data-tour-stations][data-tour-dir="ba"] .tour-direction .tour-direction__swap:focus-visible {
  background: var(--orange-100);
  color: var(--orange-600);
  border-color: var(--orange-200);
  border-radius: 50%;
}
[data-tour-stations][data-tour-dir="ba"] .tour-direction__from,
[data-tour-stations][data-tour-dir="ba"] .tour-direction__to {
  color: var(--orange-600);
}
@media (max-width: 768px) {
  /* Mobile: zwei Zeilen, voll ueber die (1-spaltige) stations-grid. */
  .tour-direction {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0.85rem;
    row-gap: 0.35rem;
    width: 100%;
    padding: 0.75rem 1.1rem;
    border-radius: var(--r-md);
    white-space: normal;
  }
  .tour-direction__label--start { grid-column: 1; grid-row: 1; }
  .tour-direction__from         { grid-column: 2; grid-row: 1; }
  .tour-direction__label--end   { grid-column: 1; grid-row: 2; }
  .tour-direction__to           { grid-column: 2; grid-row: 2; }
  .tour-direction .tour-direction__swap {
    grid-column: 4;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
  }
  /* Mobile: vertikale Up/Down-Pfeile (Original-SVG-Ausrichtung). */
  .tour-direction .tour-direction__swap svg { transform: none; }
}

/* Riddle preview (product screenshot) */
.section--preview { background: var(--paper); }
.preview-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "visual head"
    "visual body";
  gap: 1rem clamp(2rem, 5vw, 4rem);
}
.preview-head { grid-area: head; align-self: end; }
.preview-body { grid-area: body; align-self: start; }
.preview-visual {
  grid-area: visual;
  align-self: center;
  position: relative;
  display: flex;
  justify-content: center;
}
.preview-visual .phone-mockup { max-width: 320px; }
.preview-visual::before {
  content: "";
  position: absolute;
  inset: 10% -10% 10% -10%;
  background: radial-gradient(ellipse at center, var(--orange-100), transparent 65%);
  z-index: -1;
  border-radius: 50%;
}

/* Mockup gallery (Sneak Peek) — autoplay + swipe screenshots */
.preview-visual .mockup-gallery { max-width: 320px; width: 100%; margin: 0 auto; }
.mockup-gallery {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.mockup-gallery .phone-mockup {
  max-width: none;
  width: 100%;
  overflow: hidden;
}
.mockup-gallery__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--paper);
}
.mockup-gallery__viewport::-webkit-scrollbar { display: none; }
.mockup-gallery__track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}
.mockup-gallery__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  height: 100%;
  overflow: hidden;
  display: block;
}
.mockup-gallery__slide picture {
  display: block;
  width: 100%;
  height: 100%;
}
.mockup-gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  /* Defeat Astra global img shadow/radius */
  box-shadow: none;
  border-radius: 0;
}
.mockup-gallery__caption {
  font-size: 0.95rem;
  color: var(--ink-500);
  text-align: center;
  margin: 0 0 0.85rem;
  min-height: 1.4em;
  line-height: 1.4;
}
.mockup-gallery__dots {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  margin-top: 0.85rem;
}
/* Specificity-Boost (.mockup-gallery__dots .mockup-gallery__dot, 0,2,0)
   schlägt Elementor's `.elementor-kit-XX button` (0,1,1). */
.mockup-gallery__dots .mockup-gallery__dot {
  appearance: none;
  border: 0;
  padding: 0;
  width: 8px;
  height: 8px;
  min-width: 0;
  min-height: 0;
  border-radius: 50%;
  background: rgba(15, 42, 39, 0.2);
  box-shadow: none;
  cursor: pointer;
  transition: background 0.2s ease;
}
.mockup-gallery__dots .mockup-gallery__dot:hover { background: rgba(15, 42, 39, 0.4); }
.mockup-gallery__dots .mockup-gallery__dot:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.mockup-gallery--quest .mockup-gallery__dots .mockup-gallery__dot.is-active { background: var(--orange-500); }
.mockup-gallery--tour  .mockup-gallery__dots .mockup-gallery__dot.is-active { background: var(--teal-500); }

/* How the quest plays — timeline */
.play-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  position: relative;
}
/* 3-Schritt-Variante: zentrierte Boxen mit gleichmäßiger Verteilung. */
.play-timeline--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.play-timeline::before { display: none; }
.play-step {
  position: relative;
  background: #fff;
  border-radius: var(--r-md);
  padding: 2.5rem 1.3rem 1.5rem;
  text-align: center;
  border: 1px solid var(--ink-100);
}
.play-step .num {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--teal-500);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px -4px rgba(52, 104, 97, 0.5);
}
.play-step h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.4rem; }
.play-step p { color: var(--ink-500); font-size: 0.9rem; margin: 0; }
.play-step--optional { border-style: dashed; border-color: var(--teal-200); background: var(--teal-050); }
.play-step--optional .num { background: var(--teal-400); box-shadow: 0 6px 14px -4px rgba(52, 104, 97, 0.35); }

/* Price duel */
.section--duel { background: var(--sand); }
.duel-wrap {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 1.5rem;
  align-items: stretch;
}
.duel-alternatives {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.duel-alt {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--ink-100);
  opacity: 0.82;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.duel-alt h4 {
  font-size: 1.05rem;
  color: var(--ink-700);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.duel-alt h4 .minus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink-200);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}
.duel-alt .cons { display: flex; flex-direction: column; gap: 0.35rem; color: var(--ink-400); font-size: 0.92rem; }
.duel-alt .cons li::before { content: "—"; color: var(--ink-200); margin-right: 0.45em; }
.duel-alt .cons li.is-positive::before { content: "✓"; }

.duel-sq {
  background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
  color: #fff;
  border-radius: var(--r-xl);
  padding: 2.2rem 2rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.duel-sq::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto auto;
  width: 320px; height: 320px;
  background: radial-gradient(circle, var(--orange-500), transparent 65%);
  opacity: 0.45;
  border-radius: 50%;
}
.duel-sq h3 {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.duel-sq h3 .plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--orange-500);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}
.duel-sq .pros {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
}
.duel-sq .pros li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.duel-sq .pros li .check {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--orange-500);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
}
.duel-sq .btn { align-self: stretch; margin-top: 0.6rem; }

/* --------------------------------------------------------------------------
   17. Leaflet override (station map)
   -------------------------------------------------------------------------- */
.leaflet-container { font-family: var(--font-body) !important; }
.sq-pin {
  width: 32px;
  height: 32px;
  border-radius: 50% 50% 50% 0;
  background: var(--teal-500);
  color: #fff;
  font-weight: 800;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-45deg);
  box-shadow: 0 4px 10px -2px rgba(15, 42, 39, 0.35);
  border: 2px solid #fff;
  transition: background 0.2s, transform 0.2s;
}
.sq-pin span { transform: rotate(45deg); }
.sq-pin.is-active { background: var(--orange-500); transform: rotate(-45deg) scale(1.15); }
.sq-pin--sub { font-size: 0.68rem; }

/* Sekundär-Pin: kleiner, grau, kein Label — dezenter "Auch in der Nähe"-Marker
 * für Companion-Sights (Sights mit Meta _sq_attached_to_sight). */
.sq-pin--secondary {
  width: 14px; height: 14px;
  background: #b3b9bd;
  border: 2px solid #fff;
  box-shadow: 0 2px 5px -1px rgba(15, 42, 39, 0.3);
  opacity: .85;
}
.sq-pin--secondary:hover { opacity: 1; background: var(--ink-700, #4a5258); }

/* --------------------------------------------------------------------------
   18. Animations
   -------------------------------------------------------------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

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

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-card--big, .bento-card--wide { grid-column: span 2; }
  .stations-map { position: relative; top: auto; }
}

@media (max-width: 768px) {
  body { font-size: 16px; }

  .nav-primary, .header-side .lang-switch { display: none; }
  .nav-toggle { display: inline-flex; }

  .hero { padding-top: 0; }
  /* Mobile: Foto liegt OBEN im normalen Flow (volle Viewport-Breite, full-bleed),
     faded ueber einen laengeren Bereich am unteren Rand und greift mit der transparenten
     Endung leicht in die erste Titelzeile hinein (margin-bottom negativ). */
  .hero-bg-photo {
    position: relative;
    inset: auto;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: -2.5rem;
    aspect-ratio: 16 / 9;
    background-position: center center;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  }
  .hero-content { max-width: none; padding-top: 1.5rem; }
  /* Auf Mobile keinen Desktop-Padding-Left auf den Hero-Container — das wuerde
     den Content-Block neben dem Bild einruecken. */
  .hero > .container.hero-inner { padding-left: 1.5rem; }

  .persona-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bento-card--big, .bento-card--wide { grid-column: span 1; grid-row: span 1; }
  /* Auf Mobile zieht die Teal-Box ("Das Herzstück") ans Ende der Liste — staerkstes
     Argument zum Schluss als Closer. */
  .bento-card--big { order: 99; padding: 1.6rem; min-height: 240px; }
  .bento-card--big h4 { white-space: normal; font-size: 1.4rem; }

  .how-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .phone-mockup { max-width: 260px; }
  .preview-visual .mockup-gallery { max-width: 260px; }

  .demo-grid { grid-template-columns: 1fr; }

  .pd-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .pd-title { white-space: normal; }
  .pd-dossier {
    order: -1;
    aspect-ratio: 1200 / 896;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
  }
  .pd-dossier--karte { aspect-ratio: 1264 / 843; }

  /* pd-hero--bg-photo Mobile: Reihenfolge Breadcrumb → Bild → Title.
     Bild full-bleed, Fade laeuft sanft in den Titel hinein. */
  .pd-hero--bg-photo {
    min-height: 0;
    display: block;
    padding-top: clamp(0.75rem, 3vw, 1.25rem);
  }
  .pd-hero--bg-photo .pd-hero-breadcrumb-wrap {
    position: static;
    top: auto;
  }
  .pd-hero--bg-photo .pd-hero-breadcrumb-wrap .pd-breadcrumb {
    margin-bottom: 0.75rem;
  }
  .pd-hero--bg-photo .pd-hero-bg {
    position: relative;
    inset: auto;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: -2rem;
    aspect-ratio: 1200 / 896;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
  }
  .pd-hero-content { max-width: none; padding-top: 0; }

  .stations-grid { grid-template-columns: 1fr; }
  .stations-map { aspect-ratio: 4 / 3; min-height: 0; max-height: none; }

  .preview-wrap {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "head"
      "visual"
      "body";
  }
  .preview-head, .preview-body { align-self: stretch; }
  .preview-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .preview-body .btn {
    width: 100%;
    max-width: 320px;
    margin: 1rem auto 0;
    padding: 1.15rem 2rem;
    font-size: 1.06rem;
  }

  .play-timeline { grid-template-columns: 1fr; gap: 2rem; }
  .play-timeline::before { display: none; }

  .duel-wrap { grid-template-columns: 1fr; }

  .footer-newsletter-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-newsletter-copy { text-align: center; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand-col { grid-column: span 2; }

  .sticky-cta { display: flex; }

  body { padding-bottom: 90px; }
  body.no-sticky { padding-bottom: 0; }
}

@media (max-width: 480px) {
  .hero-micro { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .testimonial { flex-basis: 82vw; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand-col { grid-column: span 1; }
  .footer-brand-col .footer-brand img { height: 88px; }
  .footer-newsletter-input-row { flex-direction: column; border-radius: var(--r-md); padding: 0.4rem; gap: 0.4rem; }
  .footer-newsletter-input-row input[type="email"] { padding: 0.7rem 0.9rem; }
  .footer-newsletter-input-row .btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   20. Accessibility helpers
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
:focus-visible { outline: 3px solid var(--orange-500); outline-offset: 3px; border-radius: 4px; }

/* =========================================================================
   Legal / Prose / About / Kontakt / FAQ — shared containers + hero
   ========================================================================= */

.container--prose {
  max-width: 760px;
}

.sqrd-legal-hero {
  background: linear-gradient(135deg, var(--teal-700) 0%, var(--teal-500) 60%, var(--teal-400) 100%);
  color: #fff;
  padding: 4.5rem 0 3rem;
  position: relative;
  overflow: hidden;
}
.sqrd-legal-hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -40% auto;
  width: 420px; height: 420px;
  background: radial-gradient(circle, var(--orange-400) 0%, transparent 65%);
  opacity: 0.35;
  pointer-events: none;
}
.sqrd-legal-hero .eyebrow {
  color: var(--orange-200);
}
.sqrd-legal-hero h1 {
  color: #fff;
  margin: 0.6rem 0 0.8rem;
  font-size: clamp(2rem, 4vw, 3rem);
}
.sqrd-legal-hero .lead {
  color: rgba(255, 255, 255, 0.82);
  max-width: 44rem;
  margin: 0;
  font-size: 1.05rem;
}
.sqrd-legal-hero--eyebrow-only { padding: 3rem 0 2.4rem; }
.sqrd-legal-hero--eyebrow-only .eyebrow { margin: 0; }

/* ===== Redeem-Code-Page ============================================== */
.sqrd-redeem.sqrd-generic,
#main.sqrd-redeem { padding-top: 0 !important; }
.sqrd-redeem .redeem-hero {
  background: linear-gradient(135deg, var(--teal-700) 0%, var(--teal-500) 60%, var(--teal-400) 100%);
  color: #fff;
  padding: 2.5rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.sqrd-redeem .redeem-hero .eyebrow {
  color: var(--orange-200);
  margin-bottom: 0.6rem;
}
.sqrd-redeem .redeem-hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -40% auto;
  width: 420px; height: 420px;
  background: radial-gradient(circle, var(--orange-400) 0%, transparent 65%);
  opacity: 0.35;
  pointer-events: none;
}
.sqrd-redeem .redeem-title {
  color: #fff;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
  text-transform: none;
}
.sqrd-redeem .redeem-lede {
  color: rgba(255, 255, 255, 0.85);
  max-width: 38rem;
  margin: 0 0 1.5rem;
  font-size: 1.05rem;
  line-height: 1.55;
}
.sqrd-redeem .redeem-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.5rem;
  padding: 0;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  font-size: 0.93rem;
}
.sqrd-redeem .redeem-trust .check {
  display: inline-block;
  margin-right: 0.4rem;
  color: var(--orange-300);
  font-weight: 800;
}

/* Card mit Snippet-Form */
.sqrd-redeem .section--redeem {
  padding-top: 3rem;
  padding-bottom: 4rem;
}
.sqrd-redeem .container--narrow {
  max-width: 640px;
}
.sqrd-redeem .redeem-card {
  background: #fff;
  border-radius: 20px;
  padding: 2rem 1.75rem;
  box-shadow:
    0 1px 2px rgba(15, 42, 39, .06),
    0 8px 32px rgba(15, 42, 39, .14);
  border: 1px solid var(--ink-100);
}
.sqrd-redeem .redeem-card__label {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink-700);
  margin-bottom: 0.6rem;
  letter-spacing: 0.01em;
}

/* Form-Overrides für den Snippet-Output (.sq-redeem-form) */
.sqrd-redeem .sq-redeem-form {
  display: flex !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  align-items: stretch !important;
}
.sqrd-redeem .sq-redeem-form > label[for="sq_code"] {
  display: none !important;
}
.sqrd-redeem .sq-redeem-form input[name="sq_code"],
.sqrd-redeem .sq-redeem-form #sq_code {
  flex: 1 1 220px !important;
  min-width: 0 !important;
  font-family: "Poppins", system-ui, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  padding: 0.9rem 1.25rem !important;
  border: 1px solid var(--ink-200, #d8dedd) !important;
  border-radius: 999px !important;
  background: var(--paper, #fbf7f0) !important;
  color: var(--ink-900) !important;
  height: 56px !important;
  box-sizing: border-box !important;
  text-transform: uppercase !important;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.sqrd-redeem .sq-redeem-form input[name="sq_code"]:focus,
.sqrd-redeem .sq-redeem-form #sq_code:focus {
  outline: none !important;
  border-color: var(--orange-500) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(255, 131, 96, 0.15) !important;
}
.sqrd-redeem .sq-redeem-form input[name="sq_code"]::placeholder {
  color: var(--ink-400, #6b7480) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.sqrd-redeem .sq-redeem-form button[type="submit"],
.sqrd-redeem .sq-redeem-form .elementor-button {
  height: 56px !important;
  padding: 0 1.6rem !important;
  border-radius: 999px !important;
  background: var(--orange-500) !important;
  color: #fff !important;
  border: 0 !important;
  font-family: "Poppins", system-ui, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer;
  box-shadow:
    0 4px 12px -2px rgba(255, 131, 96, 0.45),
    inset 0 -3px 0 rgba(201, 80, 45, 0.25) !important;
  transition: transform .15s, box-shadow .25s, background .2s;
  white-space: nowrap;
}
.sqrd-redeem .sq-redeem-form button[type="submit"]:hover,
.sqrd-redeem .sq-redeem-form .elementor-button:hover {
  background: var(--orange-600) !important;
  transform: translateY(-1px);
  box-shadow:
    0 10px 28px -6px rgba(255, 131, 96, 0.55),
    inset 0 -3px 0 rgba(201, 80, 45, 0.25) !important;
}

/* Info-Notices vom Snippet (Code-Gültigkeit + Zugriffs-TTL) */
.sqrd-redeem .sq-notice-wrapper {
  display: flex !important;
  flex-direction: column;
  gap: 0.6rem !important;
  margin-bottom: 1.5rem !important;
}
.sqrd-redeem .sq-notice {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.85rem !important;
  padding: 0.85rem 1rem !important;
  border-radius: 14px !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
}
.sqrd-redeem .sq-notice-validity {
  background-color: rgba(52, 104, 97, 0.07) !important;
  border: 1px solid var(--teal-200, #b9d4cf) !important;
  color: var(--teal-700, #265149) !important;
}
.sqrd-redeem .sq-notice-access {
  background-color: rgba(255, 131, 96, 0.07) !important;
  border: 1px solid rgba(255, 131, 96, 0.35) !important;
  color: #6b3a26 !important;
}
.sqrd-redeem .sq-notice-icon {
  font-size: 1.3rem !important;
  line-height: 1 !important;
  margin-top: 1px !important;
}
.sqrd-redeem .sq-notice-text strong {
  display: block !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
  letter-spacing: 0.01em !important;
}

/* Success / Error / QR */
.sqrd-redeem .sq-success {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  background: rgba(52, 104, 97, 0.08);
  border: 1px solid var(--teal-300, #b9d4cf);
  color: var(--teal-700);
  font-weight: 600;
}
.sqrd-redeem .sq-error {
  margin-top: 1rem;
  padding: 0.9rem 1.15rem;
  border-radius: 14px;
  background: rgba(220, 65, 60, 0.07);
  border: 1px solid #f3c7c5;
  color: #b3261e;
  font-weight: 600;
}
.sqrd-redeem #sq-qr {
  margin: 1.25rem auto !important;
  padding: 12px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--ink-100);
  box-shadow: 0 4px 16px rgba(15, 42, 39, .08);
}
.sqrd-redeem .redeem-card .elementor-button,
.sqrd-redeem .redeem-card a.elementor-button {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  background: var(--orange-500);
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  box-shadow:
    0 4px 12px -2px rgba(255, 131, 96, 0.45),
    inset 0 -3px 0 rgba(201, 80, 45, 0.25);
  transition: transform .15s, box-shadow .25s, background .2s;
}
.sqrd-redeem .redeem-card .elementor-button:hover {
  background: var(--orange-600);
  transform: translateY(-1px);
}

/* Help-Block */
.sqrd-redeem .redeem-help {
  margin-top: 1.75rem;
  text-align: center;
  color: var(--ink-600);
}
.sqrd-redeem .redeem-help h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink-800);
  margin: 0 0 0.4rem;
}
.sqrd-redeem .redeem-help p {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 540px) {
  .sqrd-redeem .redeem-hero { padding: 2rem 0 2.25rem; }
  .sqrd-redeem .section--redeem { padding-top: 2rem; padding-bottom: 3rem; }
  .sqrd-redeem .redeem-card { padding: 1.5rem 1.25rem; border-radius: 16px; }
  .sqrd-redeem .sq-redeem-form { flex-direction: column; gap: 0.6rem !important; }
  .sqrd-redeem .sq-redeem-form input[name="sq_code"],
  .sqrd-redeem .sq-redeem-form #sq_code {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: 52px !important;
    padding: 0.7rem 1rem !important;
    font-size: 1rem !important;
  }
  .sqrd-redeem .sq-redeem-form button[type="submit"],
  .sqrd-redeem .sq-redeem-form .elementor-button {
    width: 100% !important;
    height: 52px !important;
    padding: 0 1.25rem !important;
    font-size: 0.95rem !important;
  }
}

.sqrd-prose {
  color: var(--ink-700);
  font-size: 1.02rem;
  line-height: 1.75;
}
.sqrd-prose > :first-child { margin-top: 0; }
.sqrd-prose h1,
.sqrd-prose h2,
.sqrd-prose h3,
.sqrd-prose h4 {
  color: var(--teal-700);
  margin-top: 2.25rem;
  margin-bottom: 0.8rem;
  letter-spacing: -0.01em;
}
.sqrd-prose h2 {
  font-size: 1.55rem;
  position: relative;
  padding-bottom: 0.5rem;
}
.sqrd-prose h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 2.4rem; height: 3px;
  background: var(--orange-500);
  border-radius: 3px;
}
.sqrd-prose h3 { font-size: 1.2rem; color: var(--teal-600); }
.sqrd-prose h4 { font-size: 1.05rem; color: var(--teal-600); text-transform: none; }
.sqrd-prose p { margin: 0 0 1rem; }
.sqrd-prose a {
  color: var(--teal-500);
  text-decoration: underline;
  text-decoration-color: var(--teal-200);
  text-underline-offset: 3px;
}
.sqrd-prose a:hover {
  color: var(--orange-600);
  text-decoration-color: var(--orange-400);
}
.sqrd-prose strong { color: var(--ink-900); }
.sqrd-prose ul,
.sqrd-prose ol { padding-left: 1.4rem; margin: 0 0 1.2rem; }
.sqrd-prose li { margin-bottom: 0.4rem; }

/* AGB uses nested <ol> with counter-based section numbering */
.sqrd-prose > ol {
  list-style: none;
  counter-reset: section;
  padding-left: 0;
}
.sqrd-prose > ol > li {
  counter-increment: section;
  list-style: none;
  margin: 0 0 1.8rem;
  padding-left: 0;
}
.sqrd-prose > ol > li > strong:first-child {
  display: block;
  font-size: 1.25rem;
  color: var(--teal-700);
  margin: 1.5rem 0 0.6rem;
}
.sqrd-prose > ol > li > strong:first-child::before {
  content: counter(section) ". ";
  color: var(--orange-500);
  font-weight: 800;
}
.sqrd-prose > ol > li > ol {
  list-style: none;
  counter-reset: subsection;
  padding-left: 1.3rem;
  margin-top: 0.4rem;
}
.sqrd-prose > ol > li > ol > li {
  counter-increment: subsection;
  position: relative;
  margin-bottom: 0.7rem;
  padding-left: 2.6rem;
}
.sqrd-prose > ol > li > ol > li::before {
  content: counter(section) "." counter(subsection);
  position: absolute;
  left: 0; top: 0;
  color: var(--teal-500);
  font-weight: 600;
  min-width: 2.2rem;
}

/* Impressum has top image we don't want in the new design */
.sqrd-prose > img:first-child { display: none; }

/* =========================================================================
   About page — Teal-Vollflächen-Canvas mit Logo links + Story rechts.
   Der Reveal-Trigger unter der Story ist fast unsichtbar (Farbe nahe BG);
   nur der dünne Rand verrät die Klickfläche. Der Klick öffnet die
   Belohnungs-Card mit Code-Hinweis.
   ========================================================================= */

.sqrd-about {
  background: var(--teal-700);
  color: rgba(255, 255, 255, 0.92);
  position: relative;
  isolation: isolate;
}

.about-canvas {
  padding: clamp(1.4rem, 3.5vw, 2.8rem) 0 clamp(2.5rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
}
.about-canvas::before {
  content: "";
  position: absolute;
  inset: -25% -10% auto auto;
  width: clamp(360px, 55vw, 680px);
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.07) 0%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.about-canvas::after {
  content: "";
  position: absolute;
  inset: auto auto -20% -8%;
  width: clamp(280px, 42vw, 520px);
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle, rgba(255, 131, 96, 0.10) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.about-canvas__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) 1.15fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.about-canvas__logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.about-canvas__logo img {
  width: 100%;
  max-width: 380px;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
  filter: none;
  border: 0;
  border-radius: 0;
  animation: aboutFloat 7s ease-in-out infinite;
}
@keyframes aboutFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-12px) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .about-canvas__logo img { animation: none; }
}

.about-canvas__content { color: rgba(255, 255, 255, 0.92); }

.about-canvas__content .about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--orange-200);
  margin: 0 0 1rem;
}
.about-canvas__content .about-eyebrow__line {
  width: 28px;
  height: 2px;
  background: var(--orange-500);
  display: inline-block;
}
.about-canvas__content .about-eyebrow__hi,
.about-canvas__content .about-eyebrow__rest {
  color: var(--orange-200);
}

.about-prose p {
  font-size: 1.06rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.90);
  margin: 0 0 1.05rem;
  max-width: 38rem;
}
.about-prose p:last-child { margin-bottom: 0; }
.about-prose strong { color: #fff; }

/* --- Reveal-Trigger + Belohnungs-Card --- */
.about-reveal {
  margin-top: 2rem;
  max-width: 38rem;
}
.about-reveal__trigger {
  display: block;
  width: 100%;
  text-align: center;
  font: inherit;
  font-size: 0.95rem;
  color: var(--teal-600);
  background: transparent;
  border: 1px solid var(--teal-600);
  border-radius: var(--r-pill, 999px);
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  user-select: none;
  list-style: none;
  outline: none;
}
.about-reveal__trigger::-webkit-details-marker { display: none; }
.about-reveal__trigger::marker { content: ""; }
.about-reveal[open] .about-reveal__trigger {
  color: var(--teal-600);
  border-color: var(--teal-600);
  background: transparent;
}

.about-reveal__card {
  margin-top: 1.2rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-lg, 24px);
  padding: 1.6rem 1.8rem 1.8rem;
  position: relative;
  overflow: hidden;
  animation: aboutRevealIn 0.4s var(--ease-out, ease-out);
}
.about-reveal__card::before {
  content: "";
  position: absolute;
  inset: -45% -20% auto auto;
  width: 280px; height: 280px;
  background: radial-gradient(circle, var(--orange-500) 0%, transparent 60%);
  opacity: 0.35;
  pointer-events: none;
}
.about-reveal__title {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--orange-200);
  margin: 0 0 0.9rem;
  line-height: 1.4;
  position: relative;
  z-index: 1;
}
.about-reveal__card p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
  position: relative;
  z-index: 1;
}
.about-reveal__card a {
  color: var(--orange-200);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.about-reveal__card a:hover { color: var(--orange-500); }
.about-reveal__card em { font-style: italic; color: rgba(255, 255, 255, 0.7); }
.about-reveal__card strong { color: #fff; }
.about-reveal__fake {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: rgba(0, 0, 0, 0.25);
  padding: 0.1rem 0.45rem;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.92);
  word-break: break-all;
}
@keyframes aboutRevealIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .about-canvas__inner {
    grid-template-columns: 1fr;
    gap: 2.4rem;
    text-align: left;
  }
  .about-canvas__logo { order: -1; }
  .about-canvas__logo img { max-width: 220px; }
  .about-prose p { max-width: none; }
}

/* =========================================================================
   Kontakt page — grid + form
   ========================================================================= */

.section--contact {
  padding: 3.5rem 0 4.5rem;
}
.section--contact > .container { max-width: 720px; }
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 2.5rem;
  align-items: start;
}
.contact-side {
  background: linear-gradient(160deg, var(--teal-700), var(--teal-500));
  color: #fff;
  border-radius: 22px;
  padding: 2rem 1.8rem;
  position: relative;
  overflow: hidden;
}
.contact-side::after {
  content: "";
  position: absolute;
  inset: auto -20% -30% auto;
  width: 280px; height: 280px;
  background: radial-gradient(circle, var(--orange-400) 0%, transparent 65%);
  opacity: 0.35;
  pointer-events: none;
}
.contact-side__title {
  color: #fff;
  margin: 0 0 1.2rem;
  font-size: 1.3rem;
  position: relative;
}
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  position: relative;
  z-index: 1;
}
.contact-list li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.contact-list__label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: var(--orange-200);
}
.contact-list a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.35); text-underline-offset: 3px; }
.contact-list a:hover { color: var(--orange-200); }
.contact-side__hours {
  margin-top: 1.8rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  position: relative;
  z-index: 1;
}
.contact-side__hours h3 { color: #fff; margin: 0 0 0.4rem; font-size: 1rem; }
.contact-side__hours p { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 0.92rem; line-height: 1.55; }

.contact-form {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: 22px;
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.contact-form__title {
  color: var(--teal-700);
  margin: 0 0 0.2rem;
  font-size: 1.3rem;
}
.contact-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.contact-form label {
  font-weight: 600;
  color: var(--ink-700);
  font-size: 0.92rem;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--ink-100);
  border-radius: 12px;
  padding: 0.8rem 0.95rem;
  font: inherit;
  line-height: 1.4;
  color: var(--ink-900);
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%234b5f6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  padding-right: 2.4rem;
  min-height: 2.95rem;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px var(--teal-100);
}
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form .form-row--actions {
  flex-direction: column;
  gap: 0.8rem;
  align-items: flex-start;
}
.contact-form .form-hint {
  font-size: 0.82rem;
  color: var(--ink-400);
  margin: 0;
}
.contact-form .form-hint a { color: var(--teal-500); }
.contact-form__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.contact-form__status {
  margin: 0;
  font-size: 0.92rem;
  min-height: 1.4em;
  color: var(--ink-400);
}
.contact-form__status.is-success { color: var(--teal-600); font-weight: 600; }
.contact-form__status.is-error { color: var(--orange-600); font-weight: 600; }
.contact-form.is-submitting button[type="submit"] { opacity: 0.7; pointer-events: none; }
.contact-form.is-success .form-row,
.contact-form.is-success .form-row--actions { display: none; }

@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* =========================================================================
   FAQ footer CTA
   ========================================================================= */

.faq-footer-cta {
  text-align: center;
  margin-top: 2.8rem;
  padding-top: 2rem;
  border-top: 1px dashed var(--ink-100);
}
.faq-footer-cta p {
  color: var(--ink-500);
  margin: 0 0 1rem;
  font-size: 1.02rem;
}

/* ==========================================================================
   21. Mobile Fixes (Homepage)
   Konsolidierte Mobile-Overrides — gewinnen durch Source-Order.
   ========================================================================== */

/* --- Burger / Mobile-Nav: Sichtbarkeit ----------------------------------- */
/* Elementor-Kit setzt padding:16px 24px auf alle <button> — würde die SVG
   im 44×44 Burger-Quadrat auf 0 stauchen. Hier explizit zurücksetzen.
   Cart-Toggle ist hier bewusst NICHT enthalten: auf Desktop ist er outline-pill
   (siehe Base-Definition), auf Mobile setzt der Block weiter unten ihn auf filled-pill. */
.site-header .nav-toggle,
.nav-mobile .nav-mobile-close,
.cart-mobile .cart-mobile-close {
  padding: 0 !important;
  border-radius: var(--r-pill) !important;
}
.site-header .nav-toggle {
  background: var(--teal-100);
  color: var(--teal-700);
  border: 0;
  box-shadow: var(--shadow-sm);
}
.site-header .nav-toggle:hover,
.site-header .nav-toggle:focus,
.site-header .nav-toggle:focus-visible {
  background: var(--teal-200);
  color: var(--teal-800);
}
.site-header .nav-toggle svg {
  width: 22px !important;
  height: 22px !important;
  stroke: currentColor;
  display: block;
  flex-shrink: 0;
}

/* Mobile: Lang-Switcher ist ausgeblendet, Cart steht neben dem Burger.
   → Cart wird filled-pill (matched Burger), damit das Paar stimmig wirkt. */
@media (max-width: 768px) {
  .site-header .cart-toggle {
    width: 44px;
    height: 44px;
    padding: 0 !important;
    background: var(--teal-100);
    color: var(--teal-700);
    border: 0;
    box-shadow: var(--shadow-sm);
  }
  .site-header .cart-toggle:hover,
  .site-header .cart-toggle:focus,
  .site-header .cart-toggle:focus-visible {
    background: var(--teal-200);
    color: var(--teal-800);
    border-color: transparent;
  }
  .site-header .cart-toggle svg {
    width: 22px !important;
    height: 22px !important;
    stroke: currentColor;
    display: block;
    flex-shrink: 0;
  }
}
.nav-mobile .nav-mobile-close svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
}
.nav-mobile .nav-mobile-close {
  background: var(--teal-100);
  color: var(--teal-700);
}
.nav-mobile .nav-mobile-close svg { stroke: currentColor; display: block; }

.cart-mobile .cart-mobile-close {
  background: var(--teal-100);
  color: var(--teal-700);
}
.cart-mobile .cart-mobile-close svg {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor;
  display: block;
  flex-shrink: 0;
}

/* CTAs im Mobile-Drawer: full-width, identische Optik wie globale Primary/Secondary. */
.nav-mobile .mobile-cta .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}
.nav-mobile .mobile-cta .btn--primary {
  color: #fff;
  background: var(--orange-500);
  box-shadow: 0 6px 20px -6px rgba(255, 131, 96, 0.6), inset 0 -3px 0 rgba(201, 80, 45, 0.25);
}
.nav-mobile .mobile-cta .btn--primary:hover,
.nav-mobile .mobile-cta .btn--primary:focus,
.nav-mobile .mobile-cta .btn--primary:focus-visible {
  background: var(--orange-600);
  color: #fff;
  box-shadow: 0 12px 32px -8px rgba(255, 131, 96, 0.65), inset 0 -3px 0 rgba(201, 80, 45, 0.25);
}
.nav-mobile .mobile-cta .btn--secondary {
  color: #fff;
  background: var(--teal-500);
  box-shadow: 0 6px 20px -6px rgba(52, 104, 97, 0.6), inset 0 -3px 0 rgba(38, 81, 73, 0.35);
}
.nav-mobile .mobile-cta .btn--secondary:hover,
.nav-mobile .mobile-cta .btn--secondary:focus,
.nav-mobile .mobile-cta .btn--secondary:focus-visible {
  background: var(--teal-600);
  color: #fff;
  box-shadow: 0 12px 32px -8px rgba(52, 104, 97, 0.65), inset 0 -3px 0 rgba(38, 81, 73, 0.35);
}

/* --- Hero: Buttons + Trust-Zeile ----------------------------------------- */
@media (max-width: 600px) {
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
  }
  .hero-cta .btn { width: 100%; justify-content: center; }
}
/* Trust-Zeile: in einer Zeile statt gestapelt — überschreibt Regel aus 19. Responsive */
@media (max-width: 480px) {
  .hero-micro {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem 1rem;
    font-size: 0.78rem;
    text-align: center;
  }
}

/* --- Persona-Karten: Preis + Button gestapelt full-width auf Mobile ------ */
@media (max-width: 600px) {
  .persona-card .price-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
  }
  .persona-card .price-cta .btn {
    width: 100%;
    justify-content: center;
  }
  .persona-card .price { align-self: flex-start; }
}

/* --- Reviews: em (z.B. "Kund:innen") auf eigene Zeile (nur Mobile) ------
   display:table erzwingt eigene Zeile UND fittet auf Wort-Breite,
   damit der em::after-Unterstrich nicht über die ganze Container-Breite läuft. */
@media (max-width: 768px) {
  #testimonials-title {
    white-space: normal;
  }
  #testimonials-title em {
    display: table;
    margin-top: 0.15em;
  }
}

/* --- Final CTA: Headline-Lines + Buttons --------------------------------- */
@media (max-width: 600px) {
  .section--final-cta h2 .h2-line { display: block; }
  .section--final-cta .cta-stack {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    max-width: 320px;
    margin: 0 auto;
  }
  .section--final-cta .cta-stack .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --- Footer: Logo-Shadow weg, Brand-Col als Flex, Watermark voll --------- */
.site-footer .footer-brand img,
.site-footer .footer-brand-col img {
  box-shadow: none !important;
  filter: none;
  border-radius: 0;
}
.footer-brand-col {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.footer-brand-col .footer-brand {
  margin-bottom: 0;
  flex-shrink: 0;
}
.footer-brand-col p { margin: 0; }
/* Auf Mobile bleiben Logo + Text nebeneinander, aber Logo etwas kleiner. */
@media (max-width: 480px) {
  .footer-brand-col { gap: 1rem; }
  .footer-brand-col .footer-brand img { height: 72px; }
}

/* Watermark-Logo: über gesamten Footer, dezent damit Text lesbar bleibt */
.footer-watermark img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  opacity: 0.018;
  transform: none;
  filter: brightness(0) invert(1);
}

/* --- Mobile-Padding: etwas knapper für mehr nutzbare Breite -------------- */
@media (max-width: 480px) {
  :root { --gutter: 1rem; }
  .sticky-cta { left: 0.6rem; right: 0.6rem; padding-left: 1rem; }
}
/* Header bekommt mehr Atemluft zu den Rändern als der Content-Gutter. */
@media (max-width: 768px) {
  .site-header > .container.header-inner,
  .site-header .header-inner {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
  }
}

/* Globale Overflow-Sicherung: nichts darf den Viewport horizontal sprengen */
html, body { max-width: 100%; overflow-x: clip; }

/* --------------------------------------------------------------------------
   IQ-Builder (Eigene Quest / Eigene Tour)
   Tear-Drop-Pins erben aus `.sq-pin`. Builder-spezifische States hier.
   -------------------------------------------------------------------------- */

/* Default-Pin: leerer Tear-Drop, teal-outline mit kleinem Punkt. */
.iq-builder .sq-pin { background: #fff; border: 2px solid var(--teal-500); }
.iq-builder .sq-pin span { color: var(--teal-700); font-weight: 800; }
.iq-builder .sq-pin span:empty::after {
  content: '';
  display: block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--teal-500);
}
.iq-builder .sq-pin.is-active {
  background: var(--orange-500);
  border-color: #fff;
  transform: rotate(-45deg) scale(1.18);
  box-shadow: 0 6px 14px -3px rgba(255, 131, 96, 0.55);
}
.iq-builder .sq-pin.is-active span { color: #fff; }
.iq-builder .sq-pin.is-active span:empty::after { display: none; }

/* Builder-Layout */
.iq-builder { display: flex; flex-direction: column; gap: 1rem; }

.iq-tabs {
  display: flex; align-items: center; gap: 0.5rem;
  flex-wrap: wrap;
}
/* Spezifität ≥ 0,2,1 nötig, sonst überschreibt `.elementor-kit-11 button:hover`. */
.iq-builder .iq-tab,
.iq-builder button.iq-tab {
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--ink-100);
  background: #fff;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-900);
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
  display: inline-flex; align-items: center; gap: 0.4rem;
  line-height: 1;
  box-shadow: none;
}
.iq-builder .iq-tab:hover,
.iq-builder button.iq-tab:hover {
  background: #fff;
  color: var(--ink-900);
  border-color: var(--orange-500);
}
.iq-builder .iq-tab.is-active,
.iq-builder button.iq-tab.is-active {
  background: var(--orange-500);
  color: #fff;
  border-color: var(--orange-500);
}
.iq-builder .iq-tab.is-active:hover,
.iq-builder button.iq-tab.is-active:hover {
  background: var(--orange-600);
  color: #fff;
  border-color: var(--orange-600);
}
.iq-counter {
  margin-left: auto;
  font-size: 0.92rem;
  color: var(--ink-500);
  background: var(--teal-050);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
}
.iq-counter strong { color: var(--orange-500); font-weight: 800; }

.iq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 1.4rem;
  align-items: start;
}
.iq-main { min-width: 0; }
.iq-panel { display: none; }
.iq-panel.is-visible { display: block; }

.iq-map {
  width: 100%;
  height: 520px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--ink-100);
  background: #fff;
  position: relative;
  z-index: 0;
}
.iq-map-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-300);
  font-size: 0.95rem;
}

.iq-routeinfo {
  margin-top: 0.9rem;
  padding: 0.7rem 1rem;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  font-size: 0.92rem;
  color: var(--ink-500);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem;
}
.iq-routeinfo__icon { color: var(--orange-500); flex-shrink: 0; }
.iq-routeinfo strong { color: var(--ink-900); font-weight: 700; }
.iq-routeinfo__sep { color: var(--ink-300); }
.iq-routeinfo__loading {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--ink-300);
  font-style: italic;
}

.iq-openinghours {
  margin-top: 0.6rem;
  padding: 0.85rem 1rem 0.95rem;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  font-size: 0.9rem;
}
.iq-openinghours__head {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 0.5rem;
}
.iq-openinghours__head svg { color: var(--orange-500); }
.iq-openinghours__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.25rem;
}
.iq-openinghours__item {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem;
  color: var(--ink-500);
}
.iq-openinghours__item .iq-oh-name { color: var(--ink-500); }
.iq-openinghours__item .iq-oh-time { color: var(--ink-900); font-weight: 600; text-align: right; }

.iq-pricemodel {
  margin-top: 0.6rem;
  padding: 0.75rem 1rem;
  background: var(--teal-050);
  border-radius: var(--r-md);
  font-size: 0.88rem;
  color: var(--ink-500);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.2rem;
}
.iq-pricemodel__label { font-weight: 700; color: var(--ink-900); }
.iq-pricemodel__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem;
}
.iq-pricemodel__list li { position: relative; padding-left: 1.1rem; }
.iq-pricemodel__list li::before {
  content: '✓';
  position: absolute; left: 0; top: 0;
  color: var(--orange-500);
  font-weight: 800;
}

.iq-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.65rem;
  max-height: 520px; overflow-y: auto;
  padding-right: 0.4rem;
}
.iq-list-item,
.iq-builder li.iq-list-item {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 1rem 1.4rem;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-pill);
  background: #fff;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.iq-list-item:hover,
.iq-builder li.iq-list-item:hover {
  border-color: var(--orange-500);
  background: rgba(255, 131, 96, 0.06);
}
.iq-list-item.is-selected,
.iq-builder li.iq-list-item.is-selected {
  border-color: var(--orange-500);
  background: rgba(255, 131, 96, 0.08);
}
.iq-list-item:focus-visible,
.iq-builder li.iq-list-item:focus-visible {
  outline: 3px solid var(--orange-500);
  outline-offset: 2px;
}
.iq-list-name {
  font-weight: 700;
  color: var(--ink-900);
  font-size: 1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1;
}

/* Sidebar */
.iq-side { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 6rem; }
.iq-side-card {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: 16px;
  padding: 1.1rem 1.1rem 1.2rem;
}
.iq-side-title {
  margin: 0 0 0.7rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-900);
}
.iq-route-empty {
  margin: 0;
  color: var(--ink-300);
  font-size: 0.92rem;
  text-align: center;
  padding: 1.2rem 0;
}
.iq-route { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.iq-route-item {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: var(--teal-050);
  font-size: 0.92rem;
  cursor: grab;
  transition: background 0.15s, opacity 0.15s, border-color 0.15s;
  border: 1px solid transparent;
}
.iq-route-item:hover { background: var(--teal-050); }
.iq-route-item.is-dragging { opacity: 0.4; background: var(--teal-100); }
.iq-route-item.drag-over-top    { border-top-color: var(--orange-500); border-top-width: 2px; }
.iq-route-item.drag-over-bottom { border-bottom-color: var(--orange-500); border-bottom-width: 2px; }
.iq-route-drag {
  color: var(--ink-300);
  font-size: 0.95rem; line-height: 1; user-select: none;
  flex-shrink: 0;
  cursor: grab;
  touch-action: none;
  /* Größerer Touch-Hitbereich, ohne Layout zu verschieben. */
  padding: 0.5rem 0.35rem;
  margin: -0.5rem -0.35rem;
}
.iq-route-drag:active { cursor: grabbing; }
.iq-route-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--orange-500);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.iq-route-name {
  flex: 1;
  color: var(--ink-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.iq-route .iq-route-remove,
.iq-builder .iq-route-remove {
  background: transparent;
  border: 0;
  border-radius: 4px;
  padding: 0 0.3rem;
  cursor: pointer;
  color: var(--ink-300);
  font-size: 1.15rem;
  line-height: 1;
  width: auto; height: auto;
  min-width: 0;
}
.iq-route .iq-route-remove:hover,
.iq-builder .iq-route-remove:hover {
  background: transparent;
  color: #ef4444;
}
.iq-route-hint {
  margin: 0.7rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-300);
  text-align: center;
}

/* Price box */
.iq-price-tier {
  display: flex; justify-content: space-between;
  font-size: 0.9rem;
  color: var(--ink-500);
  padding: 0.2rem 0;
}
.iq-price-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 0.7rem;
  margin-top: 0.45rem;
  border-top: 2px solid var(--orange-500);
  font-weight: 700;
}
.iq-price-total strong { color: var(--orange-500); font-size: 1.25rem; }
.iq-price-note {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-300);
  text-align: right;
}

/* CTA */
.iq-cta-wrap { display: flex; flex-direction: column; gap: 0.5rem; }
.iq-warning {
  margin: 0; text-align: center;
  font-size: 0.85rem;
  color: #b45309;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  padding: 0.55rem 0.8rem;
}
.iq-cta { width: 100%; justify-content: center; }
.iq-cta:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
/* Spezifität ≥ 0,3,1 nötig, sonst überschreibt Elementor-kit-button-Hover (türkiser Hover + falscher Radius). */
.iq-builder button.btn--primary.iq-cta,
.iq-builder button.btn--primary.iq-cta:hover,
.iq-builder button.btn--primary.iq-cta:focus,
.iq-builder button.btn--primary.iq-cta:focus-visible {
  border-radius: var(--r-pill);
  background: var(--orange-500);
  color: #fff;
  border: 0;
}
.iq-builder button.btn--primary.iq-cta:hover,
.iq-builder button.btn--primary.iq-cta:focus,
.iq-builder button.btn--primary.iq-cta:focus-visible {
  background: var(--orange-600);
  color: #fff;
  box-shadow: 0 12px 32px -8px rgba(255, 131, 96, 0.65), inset 0 -3px 0 rgba(201, 80, 45, 0.25);
}
.iq-builder button.btn--primary.iq-cta:disabled,
.iq-builder button.btn--primary.iq-cta:disabled:hover {
  background: var(--orange-500);
  color: #fff;
}
.iq-cta-feedback {
  margin: 0;
  font-size: 0.9rem;
  text-align: center;
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
}
.iq-cta-feedback.is-success { background: #ecfdf5; color: #065f46; }
.iq-cta-feedback.is-error   { background: #fef2f2; color: #991b1b; }

/* Map popup buttons — pill-Form wie .btn, Spezifität ≥ 0,2,1 gegen Astra-Override. */
.iq-popup__title { font-weight: 700; margin-bottom: 0.55rem; color: var(--ink-900); font-size: 0.98rem; }
.iq-popup__actions { display: flex; flex-direction: column; gap: 0.4rem; }
.leaflet-popup-content .iq-pop,
.iq-builder .iq-pop,
button.iq-pop {
  border: 0;
  cursor: pointer;
  font-weight: 600; font-size: 0.88rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--r-pill);
  color: #fff;
  background: var(--orange-500);
  line-height: 1;
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
  text-align: center;
  box-shadow: 0 4px 12px -4px rgba(255, 131, 96, 0.5);
}
.leaflet-popup-content .iq-pop:hover,
.iq-builder .iq-pop:hover,
button.iq-pop:hover {
  background: var(--orange-600);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -6px rgba(255, 131, 96, 0.55);
}
.leaflet-popup-content .iq-pop--remove,
.iq-builder .iq-pop--remove,
button.iq-pop--remove {
  background: #fff;
  color: var(--ink-500);
  border: 1px solid var(--ink-100);
  box-shadow: none;
}
.leaflet-popup-content .iq-pop--remove:hover,
.iq-builder .iq-pop--remove:hover,
button.iq-pop--remove:hover {
  background: #fff;
  color: #ef4444;
  border-color: #ef4444;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Tour-Mode-Overrides — Teal-Akzente statt Orange (CTA bleibt orange).
   Aktiviert über `<div class="iq-builder" data-iq-mode="tour">`.
   -------------------------------------------------------------------------- */

.iq-builder[data-iq-mode="tour"] .iq-tab:hover,
.iq-builder[data-iq-mode="tour"] button.iq-tab:hover {
  border-color: var(--teal-500);
}
.iq-builder[data-iq-mode="tour"] .iq-tab.is-active,
.iq-builder[data-iq-mode="tour"] button.iq-tab.is-active {
  background: var(--teal-500);
  border-color: var(--teal-500);
}
.iq-builder[data-iq-mode="tour"] .iq-tab.is-active:hover,
.iq-builder[data-iq-mode="tour"] button.iq-tab.is-active:hover {
  background: var(--teal-600);
  border-color: var(--teal-600);
}

.iq-builder[data-iq-mode="tour"] .iq-counter {
  background: var(--teal-050);
}
.iq-builder[data-iq-mode="tour"] .iq-counter strong { color: var(--teal-500); }

.iq-builder[data-iq-mode="tour"] .iq-list-item:hover,
.iq-builder[data-iq-mode="tour"] li.iq-list-item:hover {
  border-color: var(--teal-500);
  background: rgba(52, 104, 97, 0.06);
}
.iq-builder[data-iq-mode="tour"] .iq-list-item.is-selected,
.iq-builder[data-iq-mode="tour"] li.iq-list-item.is-selected {
  border-color: var(--teal-500);
  background: rgba(52, 104, 97, 0.08);
}
.iq-builder[data-iq-mode="tour"] .iq-list-item:focus-visible,
.iq-builder[data-iq-mode="tour"] li.iq-list-item:focus-visible {
  outline-color: var(--teal-500);
}

.iq-builder[data-iq-mode="tour"] .iq-routeinfo__icon,
.iq-builder[data-iq-mode="tour"] .iq-openinghours__head svg {
  color: var(--teal-500);
}

.iq-builder[data-iq-mode="tour"] .iq-pricemodel { background: var(--teal-050); }
.iq-builder[data-iq-mode="tour"] .iq-pricemodel__list li::before { color: var(--teal-500); }
.iq-builder[data-iq-mode="tour"] .iq-price-total { border-top-color: var(--teal-500); }
.iq-builder[data-iq-mode="tour"] .iq-price-total strong { color: var(--teal-500); }
.iq-builder[data-iq-mode="tour"] .iq-route-num { background: var(--teal-500); }

/* Map-Pin: aktive Stationen in teal statt orange. */
.iq-builder[data-iq-mode="tour"] .sq-pin.is-active {
  background: var(--teal-500);
  box-shadow: 0 6px 14px -3px rgba(52, 104, 97, 0.55);
}

/* Map-Popup-Buttons in teal. */
.iq-builder[data-iq-mode="tour"] .iq-pop,
.leaflet-popup-content .iq-builder[data-iq-mode="tour"] .iq-pop {
  background: var(--teal-500);
  box-shadow: 0 4px 12px -4px rgba(52, 104, 97, 0.5);
}
.iq-builder[data-iq-mode="tour"] .iq-pop:hover {
  background: var(--teal-600);
  box-shadow: 0 8px 18px -6px rgba(52, 104, 97, 0.55);
}

/* Hero-Visual Tour: kühlerer Teal-Hintergrund + Teal-Punkt-Pattern. */
.pd-dossier--builder-tour {
  background: linear-gradient(135deg, var(--teal-100) 0%, var(--teal-050) 100%);
}
.pd-dossier--builder-tour::before {
  background-image: radial-gradient(circle, var(--teal-200) 1.2px, transparent 1.4px);
}

/* Eigene-Tour-Hero: Gradient + Punkt-Raster ueber gesamte Hero-Breite (paper -> teal-100,
   horizontal). Dossier-Box loest sich auf, die SVG-Illustration (Punkte 1/2/3 + Audio-Striche)
   floatet auf dem Hero-Hintergrund. */
.sqrd-landing--eigene-tour .pd-hero::before {
  background:
    radial-gradient(circle, rgba(185, 212, 207, 0.45) 1.2px, transparent 1.4px) 0 0 / 16px 16px,
    linear-gradient(90deg, var(--paper) 0%, var(--teal-100) 100%);
}
.sqrd-landing--eigene-tour .pd-dossier--builder-tour {
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.sqrd-landing--eigene-tour .pd-dossier--builder-tour::before {
  content: none;
}

/* Mobile: SVG bleibt oberhalb der Texte, aber kein Full-Bleed mehr (kein sichtbarer
   Hintergrund mehr da, der bis zum Viewport-Rand bluten muesste). Container-breit.
   Gradient dreht auf vertikal — oben teal (wo das SVG sitzt), unten paper (wo der Text liegt). */
@media (max-width: 900px) {
  .sqrd-landing--eigene-tour .pd-hero::before {
    background:
      radial-gradient(circle, rgba(185, 212, 207, 0.45) 1.2px, transparent 1.4px) 0 0 / 16px 16px,
      linear-gradient(180deg, var(--teal-100) 0%, var(--paper) 45%);
  }
  .sqrd-landing--eigene-tour .pd-dossier--builder-tour {
    width: auto;
    margin-left: 0;
    margin-right: 0;
    aspect-ratio: auto;
    padding: 1rem 0 0.5rem;
  }
  .sqrd-landing--eigene-tour .pd-dossier--builder-tour .builder-illu {
    padding: 0;
  }
}

/* Eigene-Quest-Hero: gleiches Konzept wie Eigene-Tour, aber in Orange (Quest-Farbe).
   Gradient + Punkt-Raster ueber gesamte Hero-Breite. Dossier-Box loest sich auf,
   die SVG (Punkte 1/2/3 + gestrichelter Pfad + Tags) floatet auf dem Hero-Hintergrund. */
.sqrd-landing--eigene-quest .pd-hero::before {
  background:
    radial-gradient(circle, rgba(255, 217, 204, 0.45) 1.2px, transparent 1.4px) 0 0 / 16px 16px,
    linear-gradient(90deg, var(--paper) 0%, var(--orange-100) 100%);
}
.sqrd-landing--eigene-quest .pd-dossier--builder {
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.sqrd-landing--eigene-quest .pd-dossier--builder::before {
  content: none;
}

/* Mobile: SVG bleibt oben, Container-breit, Gradient vertikal mit schnellem Fade. */
@media (max-width: 900px) {
  .sqrd-landing--eigene-quest .pd-hero::before {
    background:
      radial-gradient(circle, rgba(255, 217, 204, 0.45) 1.2px, transparent 1.4px) 0 0 / 16px 16px,
      linear-gradient(180deg, var(--orange-100) 0%, var(--paper) 45%);
  }
  .sqrd-landing--eigene-quest .pd-dossier--builder {
    width: auto;
    margin-left: 0;
    margin-right: 0;
    aspect-ratio: auto;
    padding: 1rem 0 0.5rem;
  }
  .sqrd-landing--eigene-quest .pd-dossier--builder .builder-illu {
    padding: 0;
  }
}

/* Pinnwand-Hero (gemeinsame Basis fuer alle Tour-Pages, die Polaroids angepinnt zeigen):
   Hero-Hintergrund (Gradient + Punkt-Raster) ist die Pinnwand, Polaroids liegen flach
   (kein Shadow) und werden nur durch Rotation/Ueberlappung als angepinnt erlebbar. */
.pd-dossier--pinboard {
  position: relative;
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  min-height: 460px;
}
.pd-dossier--pinboard .polaroid {
  position: absolute;
  background: #fff;
  padding: 0.5rem 0.5rem 1.4rem;
  margin: 0;
  border-radius: 2px;
  box-shadow: none;
  filter: none;
}
.pd-dossier--pinboard .polaroid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  filter: none;
}
.pd-dossier--pinboard .polaroid figcaption {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1;
  text-align: center;
  margin-top: 0.45rem;
  color: var(--ink-700);
  letter-spacing: 0.01em;
}


/* ============================================================
   Quest-Deep-Dive-Heros: Variante B (Cinematic) fuer beide Pages.
   Desktop: Bild (Pinnwand bzw. Karte) fuellt den Hero edge-to-edge,
   Paper-Fade-aus-Links sichert Lesbarkeit der Texte/Pricebox.
   Mobile: Bild als normales full-width Element zwischen Breadcrumbs
   und Titel, darunter orangener vertikaler Gradient wie sonst.
   Kein Punktraster.
   ============================================================ */

/* Mobile */
@media (max-width: 900px) {
  .iq-grid { grid-template-columns: 1fr; }
  .iq-side { position: static; }
  .iq-map { height: 380px; }
  .iq-list { max-height: none; }
}
@media (max-width: 480px) {
  .iq-tabs { gap: 0.35rem; }
  .iq-tab { padding: 0.5rem 0.85rem; font-size: 0.86rem; }
  .iq-counter { width: 100%; order: 3; text-align: center; margin-left: 0; }
  .iq-map { height: 300px; }
}

/* ============================================================
   Fortsetzen-Seite: Quest- und Tour-Übersicht mit Player-CTA.
   Eigenständige Karten (statt .product-card) damit der Teal-CTA
   prominent über die Kartenbreite spannen kann.
   ============================================================ */
/* Hero soll bündig am Header anliegen — globale .sqrd-generic-Polsterung
   neutralisieren, da der Hero seinen eigenen Padding mitbringt. */
.sqrd-generic.sqrd-resume,
.sqrd-generic.sqrd-legal,
.sqrd-generic.sqrd-kontakt { padding-top: 0; }

.sqrd-resume .resume-hero {
  background: linear-gradient(135deg, var(--teal-700) 0%, var(--teal-500) 60%, var(--teal-400) 100%);
  color: #fff;
  padding: 3.5rem 0 2.5rem;
  position: relative;
  overflow: hidden;
}
.sqrd-resume .resume-hero .eyebrow { color: var(--orange-200); }
.sqrd-resume .resume-hero .lead {
  color: rgba(255, 255, 255, 0.9);
  max-width: 44rem;
  margin: 0.6rem 0 0;
  font-size: 1.05rem;
}

.sqrd-resume .section--resume { padding: clamp(2.5rem, 5vw, 4rem) 0; }

.sqrd-resume .resume-tabs {
  display: inline-flex;
  gap: 0.25rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  padding: 0.3rem;
  background: var(--sand);
  border-radius: var(--r-pill);
  border: 1px solid var(--ink-100);
}
/* Spezifität (0,2,1) nötig, damit Elementor's `.elementor-kit-11 button:hover/:focus`
   keinen abweichenden border-radius/background erzwingt. Alle relevanten States
   müssen mit gleicher Spezifität (button.resume-tab + State) gespiegelt werden. */
.sqrd-resume button.resume-tab,
.sqrd-resume button.resume-tab:hover,
.sqrd-resume button.resume-tab:focus,
.sqrd-resume button.resume-tab:focus-visible,
.sqrd-resume button.resume-tab:active {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-500);
  padding: 0.55rem 1.5rem;
  border-radius: var(--r-pill);
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.sqrd-resume button.resume-tab:hover { color: var(--ink-700); }
.sqrd-resume button.resume-tab--quest.is-active,
.sqrd-resume button.resume-tab--quest.is-active:hover,
.sqrd-resume button.resume-tab--quest.is-active:focus,
.sqrd-resume button.resume-tab--quest.is-active:focus-visible,
.sqrd-resume button.resume-tab--quest.is-active:active {
  background: var(--orange-500);
  color: #fff;
}
.sqrd-resume button.resume-tab--tour.is-active,
.sqrd-resume button.resume-tab--tour.is-active:hover,
.sqrd-resume button.resume-tab--tour.is-active:focus,
.sqrd-resume button.resume-tab--tour.is-active:focus-visible,
.sqrd-resume button.resume-tab--tour.is-active:active {
  background: var(--teal-500);
  color: #fff;
}
.sqrd-resume button.resume-tab:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 2px;
}
.sqrd-resume button.resume-tab--tour:focus-visible { outline-color: var(--teal-500); }

@media (max-width: 480px) {
  .sqrd-resume .resume-tabs { display: flex; width: 100%; }
  .sqrd-resume button.resume-tab { flex: 1 1 0; padding: 0.6rem 1rem; }
}

.sqrd-resume .resume-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.sqrd-resume .resume-card {
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ink-100);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.sqrd-resume .resume-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -24px rgba(15, 42, 39, 0.25);
}
.sqrd-resume .resume-card__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--teal-100);
}
.sqrd-resume .resume-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.sqrd-resume .resume-card__photo .resume-illu {
  width: 100%; height: 100%;
  display: block;
  padding: 1.5rem;
}
.sqrd-resume .resume-card__photo .resume-illu--quest { background: var(--orange-50, #fff5f0); }
.sqrd-resume .resume-card__photo .resume-illu--tour { background: var(--teal-50, #f1f7f5); }
.sqrd-resume .resume-card__photo .type-badge {
  position: absolute;
  top: 1rem; left: 1rem;
  padding: 0.3rem 0.75rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  color: var(--orange-700);
}
.sqrd-resume .resume-card__photo .type-badge--tour { color: var(--teal-500); }

.sqrd-resume .resume-card__body {
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 1;
}
.sqrd-resume .resume-card__body h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.015em;
  margin: 0;
}
.sqrd-resume .resume-card__cta {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}
.sqrd-resume .resume-card__more {
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-400);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  transition: color 0.2s var(--ease-out);
}
.sqrd-resume .resume-card--quest .resume-card__more:hover { color: var(--orange-600); }
.sqrd-resume .resume-card--tour .resume-card__more:hover { color: var(--teal-600); }
.sqrd-resume .resume-card__more .arrow { transition: transform 0.25s var(--ease-out); }
.sqrd-resume .resume-card__more:hover .arrow { transform: translateX(3px); }

.sqrd-resume .resume-help {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: 1.5rem 1.75rem;
  background: var(--sand);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.sqrd-resume .resume-help p {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-700);
}

@media (max-width: 900px) {
  .sqrd-resume .resume-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sqrd-resume .resume-grid { grid-template-columns: 1fr; }
  .sqrd-resume .resume-help { flex-direction: column; align-items: stretch; text-align: center; }
  .sqrd-resume .resume-help .btn { width: 100%; justify-content: center; }
}