/* ============================================================
   AERIX VISUALS — Helles Theme + Bewegungsebene
   Wird nach styles.css geladen und überschreibt Farben/Flächen.
   Alle Bereiche hell; dunkel ist nur der Textverlauf auf Portfoliobildern.
   ============================================================ */

/* ── Farben: hell (Standard) ─────────────────────────────────── */
:root{
  --bg:          #f5f1e8;   /* warmes Off-White */
  --bg-2:        #ece6da;
  --bg-card:     #fbf8f2;
  --bg-card-h:   #fffdf9;

  --border:      rgba(28,27,24,0.12);
  --border-a:    rgba(0,105,138,0.38);

  /* Akzent: helles Cyan für Flächen (Buttons), dunkleres Cyan
     desselben Farbtons für Text auf hellem Grund (WCAG AA) */
  --accent-fill: #00c8ff;
  --accent-fill-h:#33d4ff;
  --on-accent:   #0f1d24;
  --accent:      #00698a;
  --accent-dark: #005470;
  --glow:        rgba(0,105,138,0.09);
  --glow-s:      rgba(0,105,138,0.16);

  --t1:  #1c1b18;
  --t2:  #4b4740;
  --t3:  #625d53;

  --sh-card:   0 1px 2px rgba(40,30,10,.04), 0 10px 28px -12px rgba(40,30,10,.12);
  --sh-accent: 0 6px 24px -6px rgba(0,200,255,.45);
}

/* ── Textverlauf auf Portfoliobildern: helle Schrift auf dunklem Bildverlauf ── */
.p-overlay{
  --accent: #00c8ff;
  --t1:     #eeeef5;
  color:var(--t1);
}

html{background:var(--bg)}
body{position:relative;color:var(--t1)}
::selection{background:rgba(0,200,255,.28)}

/* Inhalte liegen über Flugbahn (z 0) und Höhenlinien (z -1) */
body > section,
body > main,
body > footer{position:relative;z-index:1}

/* ── Navigation ─────────────────────────────────────────────── */
.nav-logo-img{filter:none}                       /* Original-Logo ist dunkel */
.nav.scrolled{
  background:rgba(245,241,232,0.9);
  border-bottom-color:var(--border);
}
.hamburger span{background:var(--t1)}
.nav-dropdown-menu{
  background:rgba(251,248,242,0.98);
  box-shadow:var(--sh-card);
}
.nav-mobile{background:rgba(245,241,232,0.98)}

/* ── Buttons: helles Cyan als Fläche, dunkle Schrift ─────────── */
.btn-primary,
.btn-nav,
.btt{background:var(--accent-fill) !important;color:var(--on-accent) !important}
.btn-primary:hover,
.btn-nav:hover,
.btt:hover{background:var(--accent-fill-h) !important;color:var(--on-accent) !important;box-shadow:var(--sh-accent)}
.btn-outline{border-color:rgba(28,27,24,.28)}
.nav-mobile .btn-nav-mobile{color:var(--accent) !important}

/* ── Flächen ────────────────────────────────────────────────── */
.section-alt{background:rgba(226,217,199,0.42)}
.workflow{background:rgba(226,217,199,0.42)}
.step-num{background:var(--bg-card)}
.cta-banner{
  background:rgba(226,217,199,0.55);
}
.cta-banner::before{display:none}
.footer{background:#ebe5d8}
.hero-page::before{display:none}

/* Hero: hell, ohne Glow, Scanlines und dunklen Verlauf */
.hero-bg,.hero-overlay{display:none}
.hero::after{display:none}
.hero-ring{border-color:rgba(0,105,138,.10)}
.hero-ring:nth-child(2){border-color:rgba(0,105,138,.06)}

/* Karten: leichter Schatten statt reiner Kante */
.service-card,.feat-card,.highlight-item,.uc-card,.booking-info,.price-overview,.g-item,.video-showcase{
  box-shadow:var(--sh-card);
}
.service-card:hover{background:var(--bg-card-h)}

/* Platzhalter-Kacheln auf hellem Grund */
.g-ph,.video-ph,.p-bg{background:var(--bg-2);color:var(--t3)}
.p-tile{box-shadow:var(--sh-card)}

/* Portfolio: Text im Bildverlauf */
.p-overlay .p-desc{color:#d5d9e3}

/* ── Kundenstimmen / Preise ─────────────────────────────────── */
.review-card .review-stars{color:var(--accent)}

/* ── Hero-Canvas: helle Berglandschaft, Höhenlinien scheinen durch ── */
.hero-scene{
  position:absolute;inset:0;
  width:100%;height:100%;
  z-index:0;
  pointer-events:none;
  display:block;
}
.hero-page-inner{z-index:2}

/* ── Höhenlinien (fest, bewegen sich beim Scrollen langsamer) ── */
.topo-layer{
  position:fixed;
  left:0;right:0;top:0;
  height:calc(100vh + 900px);
  z-index:-1;
  pointer-events:none;
  background-image:url("/assets/images/topo.svg");
  background-size:900px 900px;
  background-repeat:repeat;
  opacity:.6;
  will-change:transform;
}

/* ── Flugbahn ───────────────────────────────────────────────── */
.flightpath{
  position:absolute;
  top:0;left:0;
  width:100%;
  z-index:0;
  pointer-events:none;
  overflow:visible;
}
.flightpath .fp-route{fill:none;stroke:rgba(28,27,24,.22);stroke-width:1.25;stroke-dasharray:1.5 7;stroke-linecap:round}
.flightpath .fp-flown{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-opacity:.7;stroke-linecap:round}
.flightpath .fp-drone{color:var(--accent)}
.flightpath .fp-drone .rotor{fill:var(--bg);stroke:currentColor;stroke-width:1.2}
.flightpath .fp-drone .frame{stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.flightpath .fp-drone .body{fill:currentColor}

/* ── Filmkorn (statisch, sehr dezent) ───────────────────────── */
body::after{
  content:'';
  position:fixed;inset:0;
  z-index:1000;
  pointer-events:none;
  opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* ── Weniger Bewegung gewünscht: alles ruhig ────────────────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  .hero-ring,.hero-scroll-line{animation:none !important}
  .topo-layer{transform:none !important}
  .flightpath .fp-drone{display:none}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* Preistabelle steht als erstes Element in ihrer Sektion: kein zusätzlicher Abstand oben */
.price-overview:first-child{margin-top:0}
/* Leistungsnamen in der Preistabelle sind der Weg zu den Leistungsseiten: als Link erkennbar machen */
.price-table a{
  text-decoration:underline;
  text-decoration-color:var(--border-a);
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  transition:color var(--ease),text-decoration-color var(--ease);
}
.price-table a::after,.price-entry-list a::after{content:'\00a0→';color:var(--accent);opacity:.7}
.price-table a:hover{color:var(--accent);text-decoration-color:var(--accent)}