/* ============================================================
   KINARVEX — ruhige Variante (nur index-liquid-3.html, body.pro)
   Nur die vier Markenfarben: Schwarz #000, Olive #4B5439,
   Weiß #FFF, Signal #E2051F – alles andere sind Verläufe und
   Transparenzen daraus. Kaum Bewegung: kein Glow-Kreisen,
   keine Farbläufe über Text, keine Wortanimationen, kein Parallax.
   ============================================================ */

:root{
  --olive: #4B5439;
  --red: #E2051F;
  --black: #000000;
  --white: #ffffff;

  /* Olive aufgehellt = Olive mit Weiß gemischt (für Schrift auf Schwarz) */
  --olive-light: color-mix(in srgb, var(--olive) 70%, var(--white));
  --olive-dim: color-mix(in srgb, var(--olive) 35%, var(--black));

  --bg: var(--black);
  --bg-elevated: color-mix(in srgb, var(--olive) 8%, var(--black));
  --bg-card: color-mix(in srgb, var(--olive) 12%, var(--black));
  --card-hover-bg: color-mix(in srgb, var(--olive) 18%, var(--black));
  --border: rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.16);
  --ink: var(--white);
  --ink-dim: rgba(255,255,255,.68);
  --ink-faint: rgba(255,255,255,.42);
  --on-ink: var(--black);

  --glow-strong: rgba(75,84,57,.55);
  --glow-weak: rgba(75,84,57,.16);
  --glow-cta: rgba(75,84,57,.4);
  --vignette-0: rgba(0,0,0,.2);
  --vignette-70: rgba(0,0,0,.6);
  --nav-scrolled-bg: rgba(0,0,0,.72);
  --cta-grad-a: color-mix(in srgb, var(--olive) 30%, var(--black));
  --cta-grad-b: var(--black);
  --btn-hover-glow: rgba(75,84,57,.5);

  --glass-bg: rgba(0,0,0,.5);
  --glass-bg-hover: rgba(75,84,57,.22);
  --glass-border: rgba(255,255,255,.12);
  --glass-hi: rgba(255,255,255,.14);
  --glass-spec: rgba(255,255,255,.05);
  --sw-on: var(--olive);
  --sw-glow: rgba(75,84,57,.45);
  --tip-bg: var(--white);
  --tip-ink: var(--black);
}
:root[data-theme="light"]{
  --olive-light: var(--olive);
  --olive-dim: color-mix(in srgb, var(--olive) 12%, var(--white));
  --bg: var(--white);
  --bg-elevated: color-mix(in srgb, var(--olive) 5%, var(--white));
  --bg-card: var(--white);
  --card-hover-bg: color-mix(in srgb, var(--olive) 6%, var(--white));
  --border: rgba(0,0,0,.09);
  --border-strong: rgba(0,0,0,.16);
  --ink: var(--black);
  --ink-dim: rgba(0,0,0,.66);
  --ink-faint: rgba(0,0,0,.42);
  --on-ink: var(--white);
  --glow-strong: rgba(75,84,57,.12);
  --glow-weak: rgba(75,84,57,.05);
  --vignette-0: rgba(255,255,255,.2);
  --vignette-70: rgba(255,255,255,.6);
  --nav-scrolled-bg: rgba(255,255,255,.8);
  --cta-grad-a: color-mix(in srgb, var(--olive) 10%, var(--white));
  --cta-grad-b: var(--white);
  --btn-hover-glow: rgba(75,84,57,.25);
  --glass-bg: rgba(255,255,255,.7);
  --glass-bg-hover: rgba(255,255,255,.85);
  --sw-glow: rgba(75,84,57,.3);
  --tip-bg: var(--black);
  --tip-ink: var(--white);
}

/* ---------- Text-Farblauf (Dia) nur in Markenfarben: Weiß/Schwarz → Olive ---------- */
.pro .dia{
  background-image: linear-gradient(90deg,
    var(--dia-to) 0%, var(--dia-to) 33.3%,
    var(--white) 42%, var(--olive) 54%,
    var(--dia-from) 70%, var(--dia-from) 100%);
}
:root[data-theme="light"] .pro .dia{
  background-image: linear-gradient(90deg,
    var(--dia-to) 0%, var(--dia-to) 33.3%,
    var(--black) 42%, var(--olive) 54%,
    var(--dia-from) 70%, var(--dia-from) 100%);
}

/* ---------- Buttons: Weiß/Schwarz, Hover in Olive, kein Glow-Kreisen ---------- */
.pro .btn--primary{ background: var(--ink); color: var(--on-ink); box-shadow: none; }
.pro .btn--primary:hover{ background: var(--olive); color: var(--white); box-shadow: 0 10px 28px var(--btn-hover-glow); }
.pro .btn--ghost:hover{ border-color: var(--olive-light); }
.pro .glow-btn__arrow{ transition: transform .25s ease; }
.pro .float-cta.is-visible{ box-shadow: 0 10px 30px rgba(0,0,0,.45); }

/* ---------- Glas: ruhig, kein Lichtpunkt am Zeiger ---------- */
.pro .glass{ --mx: 30% !important; --my: 0% !important; }

/* ---------- Kleinigkeiten in Markenfarben ---------- */
.pro .nav__links a::after{ background: var(--olive-light); }
.pro .aswitch__icon--sun{ color: var(--black); }
.pro .stars{ color: var(--ink); }
.pro .ftip__btn--ig, .pro .ftip__btn--in{ --tint: linear-gradient(150deg, var(--olive), rgba(75,84,57,.35)); }
.pro :focus-visible{ outline-color: var(--olive-light); }

/* ---------- Bewegung zurücknehmen ---------- */
.pro .hero__topo{ transform: none !important; }
.pro .hero__mark{ animation: none; transform: translateY(-50%) !important; }
.pro .hero__scroll-line::after{ animation: none; }
.pro .stack__card{ --tx: 0deg !important; --ty: 0deg !important; }

/* Einblenden: kurzes, schlichtes Auftauchen statt Unschärfe und Wort-für-Wort */
.pro .reveal,
.pro .cascade > *{
  transform: translateY(14px); filter: none;
  transition: opacity .6s ease, transform .6s var(--ease-out);
  transition-delay: 0s;
}
.pro .reveal.cascade{ transform: none; }
.pro .reveal.is-visible,
.pro .cascade.is-visible > *{ transform: none; }
.pro .split .w{ opacity: 1; transform: none; filter: none; transition: none; }

/* ---------- „Kostenlos testen“ als halbtransparenter Reiter links mittig am Rand ----------
   Ab 768 px (Tablet/Laptop/PC). Zwischen 768 und 1299 px reicht der Inhalt fast bis an den Rand –
   dort bekommt main links etwas Luft, damit der Reiter nichts verdeckt. Am Handy bleibt die Pille unten links. */
@media (min-width: 768px) and (max-width: 1299px){
  .pro main{ padding-left: 40px; }
}
@media (min-width: 768px){
  .pro .float-cta{
    left: 0; top: 50%; bottom: auto;
    writing-mode: vertical-rl;
    padding: 24px 14px; border-radius: 14px 0 0 14px;   /* wegen rotate(180deg): landet rechts */
    font-size: .9375rem; font-weight: 700; letter-spacing: .02em;
    background: color-mix(in srgb, var(--ink) 82%, transparent); color: var(--on-ink);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    transform: translate(-110%, -50%) rotate(180deg);   /* rotate: liest sich von unten nach oben */
  }
  .pro .float-cta.is-visible{ transform: translate(0, -50%) rotate(180deg); }
  .pro .float-cta.is-visible:hover{ transform: translate(0, -50%) rotate(180deg); background: var(--olive); color: var(--white); }
  .pro .float-cta .glow-btn__arrow{ display: none; }
}