/* ============================================================
   FLAVORED MEDIA — Farb- und Bewegungsschicht
   Additiv. Ueberschreibt style.css nicht, ergaenzt es.
   ============================================================ */

:root {
  /* Die Geschmacksrichtungen. Jede Sektion bekommt eine. */
  --f1: #ff7a3d;   /* Orange, Markenanker */
  --f2: #ff3d7f;   /* Magenta */
  --f3: #22d3ee;   /* Cyan */
  --f4: #a855f7;   /* Violett */
  --f5: #a3e635;   /* Limette */
  --f6: #fbbf24;   /* Bernstein */

  --sec: var(--f1);       /* aktive Sektionsfarbe, von JS gesetzt */
  --sec-2: var(--f2);     /* Begleitfarbe fuer Verlaeufe */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-big: cubic-bezier(0.22, 1.2, 0.36, 1);
}

/* ------------------------------------------------------------
   1. AURORA — grossflaechiger, driftender Farbnebel im Hintergrund
   ------------------------------------------------------------ */

.aurora {
  position: fixed;
  inset: -20vmax;
  z-index: 0;
  pointer-events: none;
  filter: blur(90px) saturate(140%);
  opacity: .55;
  transition: opacity 1.2s ease;
}
.aurora span {
  position: absolute;
  display: block;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}
.aurora .b1 {
  width: 58vmax; height: 58vmax; left: -8vmax; top: -6vmax;
  background: radial-gradient(circle at 50% 50%, var(--sec), transparent 68%);
  animation: drift-a 26s var(--ease-out) infinite alternate;
}
.aurora .b2 {
  width: 46vmax; height: 46vmax; right: -6vmax; top: 18vmax;
  background: radial-gradient(circle at 50% 50%, var(--sec-2), transparent 68%);
  animation: drift-b 34s var(--ease-out) infinite alternate;
}
.aurora .b3 {
  width: 40vmax; height: 40vmax; left: 28vmax; bottom: -10vmax;
  background: radial-gradient(circle at 50% 50%, var(--f4), transparent 70%);
  animation: drift-c 30s var(--ease-out) infinite alternate;
}
.aurora span { transition: background 1.4s ease; }

@keyframes drift-a {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(14vmax, 9vmax, 0) scale(1.25); }
}
@keyframes drift-b {
  0%   { transform: translate3d(0,0,0) scale(1.1); }
  100% { transform: translate3d(-16vmax, 12vmax, 0) scale(.85); }
}
@keyframes drift-c {
  0%   { transform: translate3d(0,0,0) scale(.9); }
  100% { transform: translate3d(10vmax, -14vmax, 0) scale(1.3); }
}

/* Inhalt muss ueber der Aurora liegen */
body > header,
body > section,
body > footer { position: relative; z-index: 1; }

/* ------------------------------------------------------------
   2. FORTSCHRITTSBALKEN in allen Geschmacksrichtungen
   ------------------------------------------------------------ */

.fm-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 999; pointer-events: none;
  background: linear-gradient(90deg,
    var(--f1), var(--f2), var(--f4), var(--f3), var(--f5), var(--f6));
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  will-change: transform;
}

/* ------------------------------------------------------------
   3. GROSSE EINBLENDUNGEN
   ------------------------------------------------------------ */

/* Wortweise Ueberschrift: kippt aus der Tiefe herein */
.w-split { display: inline-block; overflow: hidden; vertical-align: bottom; }
.w-split > i {
  display: inline-block;
  font-style: inherit;
  transform: translate3d(0, 115%, 0) rotateX(-72deg);
  opacity: 0;
  filter: blur(6px);
  transform-origin: 50% 0;
  transition:
    transform 1s var(--ease-big),
    opacity .7s ease,
    filter .7s ease;
  transition-delay: var(--d, 0ms);
}
.is-in .w-split > i,
.w-split.is-in > i { transform: none; opacity: 1; filter: none; }

/* Bloecke: grosse seitliche Bewegung mit Tiefe */
.fx { opacity: 0; will-change: transform, opacity; }
.fx-up    { transform: translate3d(0, 90px, 0) scale(.96); }
.fx-left  { transform: translate3d(-110px, 40px, 0) rotateY(9deg) scale(.94); }
.fx-right { transform: translate3d(110px, 40px, 0) rotateY(-9deg) scale(.94); }
.fx-zoom  { transform: scale(.82) translate3d(0, 60px, 0); }

.fx.is-in {
  opacity: 1;
  transform: none;
  transition:
    transform 1.05s var(--ease-big),
    opacity .75s ease;
  transition-delay: var(--d, 0ms);
}

/* Perspektive fuer die Tiefenwirkung */
section, .hero-grid { perspective: 1400px; }

/* Farbige Trennlinie, die aufwischt */
.fm-rule {
  height: 2px; width: 100%; margin: 0 0 34px;
  background: linear-gradient(90deg, var(--sec), var(--sec-2), transparent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.1s var(--ease-out);
}
.fm-rule.is-in { transform: scaleX(1); }

/* ------------------------------------------------------------
   4. SEKTIONSFARBE auf bestehende Elemente legen
   ------------------------------------------------------------ */

section .eyebrow,
section .section-head .eyebrow { color: var(--sec); transition: color .8s ease; }

section h2 .accent-line,
section .accent-line { color: var(--sec); transition: color .8s ease; }

/* Zahlen und Auszeichnungen bekommen den Verlauf */
.fm-grad {
  background: linear-gradient(100deg, var(--sec), var(--sec-2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Karten reagieren mit der Sektionsfarbe */
.paket, .leistung, .branche, .faq details {
  transition: border-color .5s ease, transform .5s var(--ease-out), box-shadow .5s ease;
}
.paket:hover, .leistung:hover, .branche:hover {
  border-color: color-mix(in srgb, var(--sec) 55%, transparent);
  transform: translateY(-6px);
  box-shadow: 0 18px 50px -20px color-mix(in srgb, var(--sec) 45%, transparent);
}

/* ------------------------------------------------------------
   5. LOGO-WALL als endlose Bewegung
   ------------------------------------------------------------ */

.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: clamp(32px, 6vw, 90px); width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ------------------------------------------------------------
   6. HERO
   ------------------------------------------------------------ */

.hero-canvas { will-change: transform; }
.hero-visual { transform: translate3d(0, var(--par, 0px), 0); will-change: transform; }

.hero-h1 .accent-line {
  background: linear-gradient(100deg, var(--f3), var(--f4) 55%, var(--f2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Leuchtender Rand am Hero-Bild in Markenfarben */
.hero-canvas::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit;
  padding: 2px; pointer-events: none;
  background: linear-gradient(140deg, var(--f1), var(--f2), var(--f4), var(--f3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .85;
}

/* ------------------------------------------------------------
   7. MOBILE + BARRIEREFREIHEIT
   ------------------------------------------------------------ */

@media (max-width: 760px) {
  .fx-left, .fx-right { transform: translate3d(0, 70px, 0) scale(.96); }
  .aurora { filter: blur(70px) saturate(130%); opacity: .48; }
}

@media (prefers-reduced-motion: reduce) {
  .fx, .fx.is-in, .w-split > i, .fm-rule {
    transform: none !important; opacity: 1 !important;
    filter: none !important; transition: none !important;
  }
  .aurora span, .marquee-track { animation: none !important; }
  .fm-progress { display: none; }
}

/* ============================================================
   8. MEHR FARBE — Nachschaerfung
   ============================================================ */

.aurora { opacity: .72; }
.aurora .b1, .aurora .b2, .aurora .b3 { opacity: .9; }

/* Farbwaesche hinter jeder Sektion, damit die Mitte nicht absaeuft */
body > section { isolation: isolate; }
body > section::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 70% at 12% 0%, color-mix(in srgb, var(--sec) 20%, transparent), transparent 62%),
    radial-gradient(100% 70% at 92% 100%, color-mix(in srgb, var(--sec-2) 18%, transparent), transparent 62%);
  opacity: 0; transition: opacity 1.4s ease;
}
body > section.sec-live::before { opacity: 1; }

/* Sektionsueberschriften im Verlauf statt in Weiss */
section h2 {
  background: linear-gradient(96deg, #fff 8%, var(--sec) 52%, var(--sec-2) 96%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  transition: none;
}
section h2 .accent-line { color: inherit; background: none; -webkit-text-fill-color: currentColor; }

/* Kennzahlen im Verlauf */
.case-stats strong, .stat-num, [data-count] {
  background: linear-gradient(100deg, var(--sec), var(--sec-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Farbige Oberkante auf Karten */
.paket, .leistung, .branche { position: relative; overflow: hidden; }
.paket::before, .leistung::before, .branche::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--sec), var(--sec-2), transparent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .8s var(--ease-out);
}
.paket.is-in::before, .leistung.is-in::before, .branche.is-in::before { transform: scaleX(1); }

/* Farbschimmer hinter grossen Bildern */
/* .hero-canvas NICHT anfassen: es ist im Original position:absolute; inset:0
   innerhalb von .hero-visual (aspect-ratio). Ein relative hier laesst die Hoehe
   auf 0 kollabieren und das Hero-Bild verschwindet. */
.case-fig { position: relative; }
.case-fig::after {
  content: ""; position: absolute; inset: -30px; z-index: -1; border-radius: 30px;
  background: radial-gradient(60% 60% at 30% 30%, color-mix(in srgb, var(--sec) 55%, transparent), transparent 70%);
  filter: blur(50px); opacity: .8;
}

/* Navigation bekommt beim Scrollen einen Farbsaum */
.nav { border-bottom: 1px solid transparent; transition: border-color .8s ease, background .4s ease; }
.nav.nav-live { border-bottom-color: color-mix(in srgb, var(--sec) 40%, transparent); }

/* ============================================================
   9. ÜBERSCHREIBUNGEN GANZ ZUM SCHLUSS
   Muessen nach allen Basisregeln stehen, sonst greifen sie nicht.
   ============================================================ */

@media (max-width: 760px) {
  .aurora { filter: blur(70px) saturate(130%); opacity: .5; }
  body > section::before { opacity: 0 !important; }
  .case-fig::after { inset: -10px; filter: blur(34px); opacity: .55; }
  section h2 { font-size: clamp(26px, 7vw, 34px); }
}

@media (prefers-reduced-motion: reduce) {
  .fx, .fx.is-in, .w-split > i, .fm-rule,
  .paket::before, .leistung::before, .branche::before {
    transform: none !important; opacity: 1 !important;
    filter: none !important; transition: none !important;
  }
  .aurora span, .marquee-track { animation: none !important; }
  .fm-progress { display: none; }
  body > section::before { opacity: .5 !important; transition: none !important; }
}

/* Hinweis unter der Branchenzeile */
.logo-wall-note {
  max-width: 620px;
  margin: 18px auto 0;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg-soft);
}
@media (max-width: 760px) {
  .logo-wall-note { font-size: 12.5px; padding: 0 4px; }
}

/* ============================================================
   10. LAYOUT-KORREKTUR CTA (bestand auch vorher schon)
   .cta-grid nutzt grid-template-columns: 1fr. Ein fr-Track hat
   implizit min-width:auto und waechst deshalb ueber den Container
   hinaus, wenn der Inhalt breiter ist. Ergebnis: Formularfelder
   ragen aus dem orangen Rahmen heraus. minmax(0,1fr) begrenzt ihn.
   ============================================================ */

@media (max-width: 900px) {
  .cta-grid { grid-template-columns: minmax(0, 1fr); }
  .cta-grid > *,
  .cta-form,
  .cta-form > *,
  .form-row { min-width: 0; }
  .form-row input,
  .form-row select,
  .form-row textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Ein select zieht seine Breite aus der laengsten Option.
     Ohne die beiden Zeilen sprengt der Eintrag "Bitte waehlen..." das Raster. */
  .form-row select { text-overflow: ellipsis; }
  .cta-form, .cta-form * { min-width: 0; max-width: 100%; }
}

/* ============================================================
   11. KONTAKTFORMULAR: Honeypot und Statusmeldung
   ============================================================ */

/* Honeypot: fuer Menschen unsichtbar, fuer Bots ausfuellbar.
   Kein display:none, weil manche Bots genau darauf pruefen. */
.form-hp {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-status {
  margin: 10px 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  min-height: 1px;
}
.form-status-gut     { color: #a3e635; }
.form-status-schlecht{ color: #ff6b6b; }

/* ============================================================
   12. FARBVARIANTEN zum Vergleichen
   Aktivierung ueber ?farbe=warm | kalt | duo | erde
   Die gesamte Seite haengt an --f1 bis --f6, deshalb reicht es,
   diese sechs Werte zu tauschen.
   ============================================================ */

/* WARM: enges, warmes Spektrum. Weniger Regenbogen, mehr Magazin. */
.pal-warm {
  --f1: #ff7a3d;  /* Orange, Markenanker */
  --f2: #ff4d6d;  /* Koralle  */
  --f3: #ffb03a;  /* Bernstein */
  --f4: #c2410c;  /* Gebranntes Orange */
  --f5: #ff8fa3;  /* Altrosa */
  --f6: #fcd34d;  /* Helles Gold */
}

/* KALT: technisch, hoher Kontrast auf Schwarz. */
.pal-kalt {
  --f1: #22d3ee;  /* Cyan */
  --f2: #3b82f6;  /* Blau */
  --f3: #8b5cf6;  /* Violett */
  --f4: #06b6d4;  /* Tuerkis */
  --f5: #6366f1;  /* Indigo */
  --f6: #2dd4bf;  /* Mint */
}

/* DUO: nur zwei Leitfarben plus Abstufungen. Am ruhigsten und am teuersten wirkend. */
.pal-duo {
  --f1: #ff7a3d;  /* Orange */
  --f2: #a855f7;  /* Violett */
  --f3: #ff9d68;  /* Helles Orange */
  --f4: #7c3aed;  /* Tiefes Violett */
  --f5: #ffbd94;  /* Sehr helles Orange */
  --f6: #c084fc;  /* Helles Violett */
}

/* ERDE: gedeckt, filmisch, weniger Leuchtkraft. */
.pal-erde {
  --f1: #e8833a;  /* Ocker */
  --f2: #b45309;  /* Rostbraun */
  --f3: #84cc16;  /* Olivgruen */
  --f4: #0f766e;  /* Petrol */
  --f5: #d97706;  /* Honig */
  --f6: #65a30d;  /* Moos */
}

/* ============================================================
   13. REFERENZZEILE UMBRECHBAR
   .logo-text hat white-space: nowrap. Das passte zu kurzen
   Markennamen. Die beschreibenden Referenzen sind laenger als
   ein Handydisplay und haben die Seite seitlich scrollbar gemacht.
   ============================================================ */

.logo-text { white-space: normal; text-align: center; }

.logo-wall-row {
  justify-content: center;
  gap: 16px 36px;
}

@media (max-width: 900px) {
  .logo-wall-row { gap: 12px 24px; }
  .logo-text { font-size: 0.92rem; line-height: 1.35; }
}

@media (max-width: 560px) {
  .logo-wall-row { flex-direction: column; gap: 10px; }
  .logo-text { font-size: 0.9rem; }
}

/* ============================================================
   14. FEINSCHLIFF AUFBAU
   ============================================================ */

/* Waagerechte Bewegungen duerfen die Seite nie breiter machen.
   Ohne das kann waehrend der Animation kurz seitlich gescrollt werden. */
body > section,
.hero { overflow-x: clip; }

/* Auf dem Handy war die seitliche Bewegung ganz herausgenommen. Das war zu brav.
   Jetzt kommt sie abgeschwaecht zurueck, damit der Wechsel links/rechts erhalten bleibt. */
@media (max-width: 760px) {
  .fx-left  { transform: translate3d(-42px, 46px, 0) rotateY(5deg) scale(.96); }
  .fx-right { transform: translate3d(42px, 46px, 0) rotateY(-5deg) scale(.96); }
}

/* Sehr schmale Geraete: nur noch senkrecht, sonst wird es unruhig. */
@media (max-width: 420px) {
  .fx-left, .fx-right { transform: translate3d(0, 52px, 0) scale(.97); }
}