/* ============================================================
   visual-upgrade.css  ·  additives Stylesheet, kein Refactor
   Direction: Tresor-Diskret · gold als Hairline, nie als Fläche
   ============================================================ */

:root {
  --vu-gold-deep: #b8902f;
  --vu-gold-line: rgba(201, 169, 84, 0.55);
  --vu-gold-glow: rgba(201, 169, 84, 0.18);
  --vu-ink: #1c2539;
  --vu-cream-warm: #f6f0df;
  --vu-grain-dark:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.78  0 0 0 0 0.66  0 0 0 0 0.33  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
  --vu-grain-light:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.11  0 0 0 0 0.15  0 0 0 0 0.22  0 0 0 0.3 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}

/* ------------------------------------------------------------
   1 · Globale Mikrotypografie + Akzente
   ------------------------------------------------------------ */

html { font-feature-settings: "kern" 1, "liga" 1, "calt" 1; }
body { text-rendering: optimizeLegibility; }

::selection { background: var(--vu-gold-line); color: var(--vu-ink); }

/* tabular numerals dort, wo Zahlen für Vertrauen stehen */
.trust-strip,
.trust-strip li,
.stats .stat-value,
[data-tabular],
.hero-call .text,
sup { font-variant-numeric: tabular-nums; }

/* refinierter Focus-Ring in Gold statt Browser-default */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.button:focus-visible {
  outline: 2px solid var(--vu-gold-deep);
  outline-offset: 4px;
  border-radius: 4px;
}

/* schmaler, eleganter Scrollbar in Markenfarben (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--vu-cream-warm); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #c9a954, #b8902f);
  border-radius: 999px;
  border: 2px solid var(--vu-cream-warm);
}
::-webkit-scrollbar-thumb:hover { background: var(--vu-gold-deep); }

/* ------------------------------------------------------------
   2 · Hero  ·  Atmosphäre, Tiefe, Strahlung
   ------------------------------------------------------------ */

/* sanfter goldener Schein hinter Headline – fühlt sich wie
   Lichtreflex auf Edelmetall an, kein Gradient-Klischee.       */
.hero-banner { position: relative; }
.hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 18% 38%, var(--vu-gold-glow) 0%, transparent 70%),
    radial-gradient(40% 40% at 82% 70%, rgba(184, 144, 47, 0.12) 0%, transparent 70%);
  mix-blend-mode: screen;
  z-index: 0;
}

/* feines Korn — bricht das CGI-Gefühl, gibt Filmästhetik */
.hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--vu-grain-dark);
  background-size: 160px 160px;
  opacity: 0.45;
  mix-blend-mode: overlay;
  z-index: 1;
}
.hero-banner > .container-fluid { position: relative; z-index: 2; }

/* Hero-Hintergrundbild als eigene Ebene — horizontal gespiegelt (scaleX(-1)).
   Die Verdunkelung links liegt auf einer separaten, NICHT gespiegelten Ebene,
   damit die weisse Headline lesbar bleibt. */
#hero .hero-bg-img,
#hero .hero-bg-shade {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
#hero .hero-bg-img {
  background: url('/hero%20bild%20patricia%20-%20bearbeitet.webp') center center / cover no-repeat;
  transform: scaleX(-1);
}
#hero .hero-bg-shade {
  background: linear-gradient(90deg, rgba(20,27,43,0.80) 0%, rgba(20,27,43,0.48) 40%, rgba(20,27,43,0.15) 72%, rgba(20,27,43,0.00) 100%);
}

/* Nur Mobil: Bildausschnitt nach rechts auf Patricia ziehen
   (mittiger Ausschnitt zeigt sonst nur den Tisch — keine Person). */
@media (max-width: 767.98px) {
  #hero .hero-bg-img { background-position: 78% center; }
}

/* ===== Kundenstimmen-Sektion (#stimmen) — nur Mobil =====
   Problem: das echte Bildfile ist ein sehr hohes Hochformat. Per Flex-Stretch +
   height:100% wurde der Bild-Block auf ~792px gezogen; der helle Bildhintergrund
   unten wirkte wie riesiger Whitespace zwischen Bild und Bewertungen.
   Fix: Stretch-Kette aufbrechen und dem Bild eine angenehme Portrait-Höhe geben,
   Motiv per object-position oben halten. Desktop (>=992px) bleibt unverändert. */
@media (max-width: 991px) {
  #stimmen .testimonial-slider .main-img,
  #stimmen .testimonial-slider .main-img .swiper,
  #stimmen .testimonial-slider .main-img .swiper-wrapper,
  #stimmen .testimonial-slider .main-img .swiper-slide,
  #stimmen .testimonial-slider .main-img .swiper-slide > .main-img {
    height: auto !important;
  }
  #stimmen .testimonial-slider .main-img img {
    height: 440px !important;
    width: 100% !important;
    object-fit: cover;
    object-position: center 22%;
  }
  /* Abstand Bild -> Bewertungen: knapp, aber Platz für die Pagination-Thumbnails. */
  #stimmen .thumb-content { margin-top: 56px !important; }
}
@media (max-width: 767px) {
  #stimmen .testimonial-slider .main-img img { height: 400px !important; }
  #stimmen .thumb-content { margin-top: 44px !important; }
}

/* ===== Gescrollter Header: transparent statt weissem Block =====
   Am Seitenanfang bleibt der Header wie gehabt. Sobald gescrollt wird
   (.scrolled-past-header), verschwindet der creme/weisse Block + Blur;
   es bleiben nur Logo (links) und Hamburger (rechts). */
.header-2.header-sticky.scrolled-past-header,
.header-2.header-sticky.scrolled-past-header .header-grid {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* CTA-Button im gescrollten Zustand ausblenden (Hamburger bleibt) */
.header-2.header-sticky.scrolled-past-header .header-actions .button--primary {
  display: none !important;
}
/* Desktop: Nav-Menü im gescrollten Zustand ausblenden.
   Mobil bleibt .header-nav der Off-Canvas-Drawer und wird NICHT angefasst. */
@media (min-width: 992px) {
  .header-2.header-sticky.scrolled-past-header .header-nav {
    display: none !important;
  }
}

/* dezente Vignette an den unteren Ecken — fokussiert den Blick */
.hero-banner .media-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(28, 37, 57, 0.55) 100%);
  pointer-events: none;
}

/* Hero-Headline: optisch ruhiger, edler */
.hero-banner .heading {
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.hero-banner .heading::first-line { letter-spacing: -0.022em; }

/* Trust-Strip — gold-Punkt-Separator + Hover-Akzent auf jedem Item */
.trust-strip { position: relative; }
.trust-strip li {
  position: relative;
  padding-left: 0;
  transition: color .25s ease;
}
.trust-strip li::before {
  content: "";
  display: inline-block;
  width: 4px; height: 4px;
  margin-right: 0.6rem;
  border-radius: 999px;
  background: var(--vu-gold-deep);
  vertical-align: middle;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(201, 169, 84, 0.10);
}

/* Slider-Container rechts bekommt einen versetzten gold-Hairline-Rahmen */
.hero-banner .banner-slider .main-slider {
  position: relative;
}
.hero-banner .banner-slider .main-slider::before {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  border: 1px solid var(--vu-gold-line);
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: 0.7;
}

/* Stempel-Badge: minimal lebendiger, hover hebt sie */
.hero-banner .banner-badge {
  transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .5s;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.35));
}
.hero-banner .banner-badge:hover { transform: scale(1.06) rotate(-3deg); }

/* ------------------------------------------------------------
   3 · Section-Eyebrow  ·  „+ Label +" mit Hairline-Glanz
   ------------------------------------------------------------ */

.subheading.subheading-bg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* langsamer, kaum sichtbarer Glanz-Sweep über die Pill */
.subheading.subheading-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(201, 169, 84, 0.22) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 1.4s ease;
  pointer-events: none;
  z-index: -1;
}
.subheading.subheading-bg:hover::after { transform: translateX(120%); }

/* die SVG-Plus-Glyphs in Gold färben (wenn sie nicht schon sind) */
.subheading.subheading-bg .icon-14 { color: var(--vu-gold-deep); }

/* ------------------------------------------------------------
   4 · Primary-Button  ·  Brushed-Metal-Sweep statt Translate
   ------------------------------------------------------------ */

.button--primary {
  position: relative;
  background-image:
    linear-gradient(
      100deg,
      #c9a954 0%,
      #e6cf8a 38%,
      #c9a954 55%,
      #b8902f 100%
    );
  background-size: 220% 100%;
  background-position: 0% 50%;
  transition:
    background-position .7s cubic-bezier(.2,.7,.2,1),
    transform .25s ease,
    box-shadow .35s ease;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 -1px 0 rgba(0, 0, 0, 0.08) inset,
    0 4px 14px rgba(184, 144, 47, 0.18);
}
.button--primary:hover {
  background-position: 100% 50%;
  color: var(--gss-black);
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 -1px 0 rgba(0, 0, 0, 0.10) inset,
    0 10px 28px rgba(184, 144, 47, 0.32);
}
.button--primary:active { transform: translateY(0); }

/* Pfeil-Icon im Button bekommt eine Mikro-Bewegung */
.button--primary .svg-wrapper svg {
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.button--primary:hover .svg-wrapper svg { transform: translate(2px, -2px); }

/* Telefon-CTA neben dem Primary: Icon-Ring kreist subtil bei Hover */
.hero-phone-call svg {
  transition: transform .6s cubic-bezier(.2,.7,.2,1), color .3s;
}
.hero-phone-call:hover svg { transform: rotate(-12deg) scale(1.05); color: var(--vu-gold-deep); }

/* ------------------------------------------------------------
   5 · Karten  ·  Hairline-Underline, das vom Icon wächst
   ------------------------------------------------------------ */

.card-benefit {
  position: relative;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.card-benefit::after {
  content: "";
  position: absolute;
  left: 2rem;
  bottom: 1.25rem;
  height: 1px;
  width: 28px;
  background: var(--vu-gold-deep);
  transition: width .5s cubic-bezier(.2,.7,.2,1);
}
.card-benefit:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -20px rgba(28, 37, 57, 0.22);
}
.card-benefit:hover::after { width: calc(100% - 4rem); }

/* Icon-Wrap bekommt feinen gold-Ring */
.card-benefit .icon-wrap {
  position: relative;
  transition: color .3s;
}
.card-benefit .icon-wrap::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 1px solid var(--vu-gold-line);
  opacity: 0;
  transition: opacity .3s ease, inset .3s ease;
}
.card-benefit:hover .icon-wrap::before { opacity: 1; inset: -10px; }

/* ------------------------------------------------------------
   6 · Dunkle Sektionen  ·  Filmkorn-Atmosphäre
   ------------------------------------------------------------ */

.our-services,
.security-section,
.final-cta {
  position: relative;
  isolation: isolate;
}
.final-cta__tel-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.final-cta__whatsapp-btn {
  border-color: rgba(37,211,102,0.55) !important;
  color: rgba(255,255,255,0.95) !important;
}
.final-cta__whatsapp-btn svg { color: #25d366; }
.final-cta__whatsapp-btn:hover {
  background: rgba(37,211,102,0.15) !important;
  border-color: #25d366 !important;
}
.our-services::before,
.security-section::before,
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--vu-grain-dark);
  background-size: 160px 160px;
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}
.our-services > *,
.security-section > *,
.final-cta > * { position: relative; z-index: 1; }

/* Subtile gold-Hairline am oberen Rand dunkler Sektionen */
.our-services::after,
.security-section::after,
.final-cta::after {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(560px, 70%);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--vu-gold-line) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ------------------------------------------------------------
   7 · Light-Sektionen  ·  Papier-Korn ganz dezent
   ------------------------------------------------------------ */

.why-precious,
.image-text,
.featured-blog,
.faq,
.testimonial-2,
.why-choose-us {
  position: relative;
  isolation: isolate;
}
.why-precious::before,
.image-text::before,
.featured-blog::before,
.faq::before,
.testimonial-2::before,
.why-choose-us::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--vu-grain-light);
  background-size: 180px 180px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.why-precious > *,
.image-text > *,
.featured-blog > *,
.faq > *,
.testimonial-2 > *,
.why-choose-us > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------
   8 · Section-Headline  ·  zarte Italic-Klammer im Bewusstsein
        ohne Inhalt zu ändern (nur via balance + tracking)
   ------------------------------------------------------------ */

.heading.text-50,
.heading.text-80 {
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* Lead-Absatz unter Headlines bekommt mehr Atem */
.section-headings .lead,
.section-headings p.lead { max-width: 56ch; }

/* ------------------------------------------------------------
   9 · Section-Ornament  ·  Mini-Rhombus zwischen Sektionen
        rein dekorativ, nur Desktop, niemals zwischen identischen BGs
   ------------------------------------------------------------ */

@media (min-width: 992px) {
  .image-text + .why-precious,
  .why-precious + .section-padding,
  .security-section + .why-choose-us,
  .faq + .featured-blog {
    position: relative;
  }
  .image-text + .why-precious::after,
  .security-section + .why-choose-us::after,
  .faq + .featured-blog::after {
    content: "";
    position: absolute;
    top: -6px; left: 50%;
    width: 10px; height: 10px;
    background: var(--vu-gold-deep);
    transform: translateX(-50%) rotate(45deg);
    box-shadow:
      0 0 0 4px var(--vu-cream-warm),
      0 0 0 5px var(--vu-gold-line);
    z-index: 5;
    pointer-events: none;
  }
}

/* card-benefit Steuervorteil-Highlight */
.card-benefit--highlight {
  background: linear-gradient(135deg, rgba(200,162,75,0.06) 0%, rgba(200,162,75,0.02) 100%);
  border: 1px solid rgba(200,162,75,0.25);
}
.card-benefit--highlight .icon-wrap { color: var(--vu-gold-deep); }

/* Info-Note (ehrlicher Hinweis, Depot-Sinn-Erklärung) */
.info-note {
  background: rgba(200,162,75,0.06);
  border-left: 3px solid var(--vu-gold-deep);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.5rem;
  max-width: 72ch;
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--vu-text-muted, #5d666f);
}
.info-note strong { color: var(--vu-text-dark, #1c2539); }

/* ------------------------------------------------------------
   10 · Disclaimer & Footnotes  ·  edel statt graue Soße
   ------------------------------------------------------------ */

.disclaimer-footnote {
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(93, 102, 111, 0.85);
  border-left: 1px solid var(--vu-gold-line);
  padding: 0.4rem 0 0.4rem 1rem;
  margin-top: 1.75rem;
  max-width: 64ch;
  font-style: italic;
}
.disclaimer-footnote sup { color: var(--vu-gold-deep); font-style: normal; }

/* ------------------------------------------------------------
   11 · Bildrahmen Patricia-Teaser  ·  versetzter gold Akzent
   ------------------------------------------------------------ */

.image-text .media-wrap {
  position: relative;
}
.image-text .media-wrap::before {
  content: "";
  position: absolute;
  inset: 16px -16px -16px 16px;
  border: 1px solid var(--vu-gold-line);
  border-radius: 16px;
  z-index: -1;
  pointer-events: none;
}
.image-text .media-wrap img,
.image-text .media-wrap picture {
  border-radius: 16px;
  overflow: hidden;
}

/* ------------------------------------------------------------
   12 · FAQ-Hover  ·  gold Hairline statt Background-Wechsel
   ------------------------------------------------------------ */

.faq .accordion-item,
.faq-item {
  transition: box-shadow .3s ease, transform .3s ease;
}
.faq .accordion-item:hover,
.faq-item:hover {
  box-shadow: inset 3px 0 0 var(--vu-gold-deep);
}

/* ------------------------------------------------------------
   13 · Header-Pill  ·  zarter Lift beim Scroll-Sticky
   ------------------------------------------------------------ */

.header-floating {
  transition: box-shadow .4s ease, backdrop-filter .4s;
}
sticky-header[data-stuck] .header-floating,
.header-floating.is-stuck {
  box-shadow:
    0 1px 0 rgba(201, 169, 84, 0.25),
    0 10px 30px -12px rgba(28, 37, 57, 0.18);
}

/* ------------------------------------------------------------
   14 · Reveal-Refinement  ·  weicher als AOS-Default
   ------------------------------------------------------------ */

[data-aos] { will-change: transform, opacity; }
[data-aos="fade-up"] { transition-timing-function: cubic-bezier(.2,.7,.2,1) !important; }

/* ------------------------------------------------------------
   15 · Reduced motion respektieren
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-banner .banner-badge:hover { transform: none; }
}

/* ------------------------------------------------------------
   16 · Mobile-Feinschliff  ·  Akzente, keine Effekte verlieren
   ------------------------------------------------------------ */

@media (max-width: 768px) {
  .hero-banner::before { opacity: 0.7; }
  .hero-banner .banner-slider .main-slider::before { display: none; }
  .image-text .media-wrap::before { inset: 10px -10px -10px 10px; }
  .card-benefit::after { left: 1.5rem; }
  .card-benefit:hover::after { width: calc(100% - 3rem); }
}

/* ------------------------------------------------------------
   17 · Bug-Fixes  ·  Button-Hover + Mobile-Menü
   ------------------------------------------------------------ */

/* Button-Hover: Text-Farbe bleibt dunkel auf Gold-Gradient (nicht weiß) */
.button--primary:hover { color: #1c2539 !important; }
.button--primary:hover .svg-wrapper svg { color: #1c2539; }

/* Mobile-Menü: Touch-Delay vermeiden, Klickbarkeit sichern */
drawer-opener {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
drawer-opener svg, drawer-opener svg * { pointer-events: none; }