/* Code-Leiste einer Zweitinstanz (src/components/CodeleisteBanner.tsx), heute
   nur tickblaze.lvlupfutures.com. Diese Datei ist ausschließlich im
   Instanzmodus verlinkt (src/app/layout.tsx); die Hauptseite lädt sie nie.
   Alle Banner-Selektoren hängen an .lvf-s01-banner--codes, Seitenabstände an
   :has(.lvf-s01-banner--codes), damit nichts außerhalb der Leiste greift.

   Lesbarkeit vor Pixeltreue: keine Schrift unter 11 px, Kopierknöpfe 24 x 24 px
   sichtbar. Aufbau je Breite:
   - ab 1280 px eine Zeile: Text, „Use Code:“, Code, Kopierknopf, zweimal
   - 768 bis 1279 px zwei Spalten, je Text über Code, Bannerhöhe 45 px wie bisher
   - unter 768 px beide Angebote untereinander, der Banner wird höher; die
     Seiten rücken um genau diesen Zuwachs nach unten (Abschnitt unten). */

.lvf-s01-banner--codes {
  /* Die Fehlermeldung des Kopierens steht unter dem Banner. */
  overflow: visible;
  /* Über der Navigation, unter dem geöffneten Menü (z-index 99): auf /elite
     ragt unter 768 px der Link des Gold-Logos mit seiner Tippfläche bis in
     den Banner und lag sonst über dem unteren Rand des zweiten Kopierknopfs. */
  z-index: 1;
  padding-inline: 24px;
}

.lvf-s01-banner--codes .lvf-s01-deals {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 56px;
  height: 100%;
}

.lvf-s01-banner--codes .lvf-s01-deal {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
/* Trennstrich zwischen den Angeboten, mittig in der Lücke. */
.lvf-s01-banner--codes .lvf-s01-deal + .lvf-s01-deal::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -28px;
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-50%);
}

.lvf-s01-banner--codes .lvf-s01-deal-text {
  font-size: 12.5px;
  line-height: 15px;
  font-weight: 500;
  color: #ffffff;
  white-space: nowrap;
}

.lvf-s01-banner--codes .lvf-s01-deal-code {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lvf-s01-banner--codes .lvf-s01-deal-label {
  font-size: 11px;
  line-height: 13px;
  font-weight: 400;
  letter-spacing: 0.66px;
  color: rgb(var(--lvfb-8cd5ff,140,213,255));
  white-space: nowrap;
}
body.lvf-gold .lvf-s01-banner--codes .lvf-s01-deal-label { color: #ffb43a; }

.lvf-s01-banner--codes .lvf-s01-code {
  position: relative;
  gap: 4px;
}

.lvf-s01-banner--codes .lvf-s01-code-chip {
  min-width: 0;
  height: 24px;
  padding-inline: 10px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.02em;
  /* Ein Tippen markiert den ganzen Code, falls das Kopieren scheitert. */
  -webkit-user-select: all;
  user-select: all;
}

.lvf-s01-banner--codes .lvf-s01-copy {
  width: 24px;
  height: 24px;
}
/* Trefferfläche 32 x 32 px statt 45: reicht deutlich über 24 px und bleibt
   unter 768 px in der Lücke zwischen den Zeilen, ohne die des anderen
   Angebots zu überdecken. */
.lvf-s01-banner--codes .lvf-s01-copy::after { inset: -4px; }
.lvf-s01-banner--codes .lvf-s01-copy-ico,
.lvf-s01-banner--codes .lvf-s01-copy-ok {
  width: 11px;
  height: 11px;
}
.lvf-s01-banner--codes .lvf-s01-copy.is-error {
  box-shadow: inset 0 0 0 1.5px #ff6b6b;
}

.lvf-s01-banner--codes .lvf-s01-copy-fehler {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 3;
  width: max-content;
  max-width: min(260px, calc(100vw - 32px));
  padding: 7px 10px;
  border: 1px solid rgba(255, 107, 107, 0.7);
  border-radius: 8px;
  background: #160404;
  color: #ffe1e1;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  white-space: normal;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  /* Liegt kurz über der Navigation, darf dort aber keinen Klick abfangen. */
  pointer-events: none;
}

/* ------------------------------------------------ 768 bis 1279 px: zwei Spalten */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .lvf-s01-banner--codes { padding-inline: 16px; }
  .lvf-s01-banner--codes .lvf-s01-deal {
    flex-direction: column;
    gap: 2px;
  }
  .lvf-s01-banner--codes .lvf-s01-deal-text {
    font-size: 11px;
    line-height: 13px;
  }
  .lvf-s01-banner--codes .lvf-s01-deal-label { display: none; }
  .lvf-s01-banner--codes .lvf-s01-code-chip {
    font-size: 11px;
    line-height: 14px;
  }
}

/* -------------------------------------------- unter 768 px: untereinander */
@media (max-width: 767.98px) {
  .lvf-s01-banner--codes {
    height: 103px;
    padding: 7px 12px;
  }
  .lvf-s01-banner--codes .lvf-s01-deals {
    flex-direction: column;
    gap: 11px;
  }
  .lvf-s01-banner--codes .lvf-s01-deal {
    flex-direction: column;
    gap: 2px;
    max-width: 100%;
  }
  .lvf-s01-banner--codes .lvf-s01-deal + .lvf-s01-deal::before {
    top: -6px;
    left: 50%;
    width: 64px;
    height: 1px;
    transform: translateX(-50%);
  }
  .lvf-s01-banner--codes .lvf-s01-deal-text {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    line-height: 13px;
  }
  .lvf-s01-banner--codes .lvf-s01-deal-label { display: none; }
  .lvf-s01-banner--codes .lvf-s01-code-chip {
    height: 24px;
    padding-inline: 9px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 14px;
  }
  .lvf-s01-banner--codes .lvf-s01-copy {
    width: 24px;
    height: 24px;
    border-radius: 6px;
  }

  /* Der Banner ist 103 px statt 47u hoch. Um genau diese Differenz rücken
     der Seitenanfang, die Sprungziele und das geöffnete Menü nach unten.
     Unter 768 px hat die Kopfleiste einen deckenden Grund, der verschobene
     Seitenanfang liegt also nie sichtbar frei. */
  .lvf-s01:has(.lvf-s01-banner--codes) {
    --lvf-s01-h: calc(min(1px, 100vw / 440) * 83 + 103px);
  }
  body:has(.lvf-s01-banner--codes) main {
    padding-top: calc(103px - min(1px, 100vw / 440) * 47);
  }
  html:has(.lvf-s01-banner--codes) {
    scroll-padding-top: calc(103px - min(1px, 100vw / 440) * 47);
  }
}

/* ---------------------------------------------------------------------------
   Kleine Akzenttexte im Markenblau auf dunklem Grund (nur Zweitinstanz).
   Mit #245ef9 als Farbthema werden die dunklen Enden der Verlaufsschriften
   (#0080ca, #12a9ff, #00a2ff) zu Tönen mit 2,7:1 bis 4,5:1 auf ihrem Grund,
   zu wenig für Text unter 24 px. Hier bekommen genau diese Texte hellere
   Töne desselben Farbtons (#8cd5ff, #6ecaff, #4fc0ff vor dem Farbthema;
   mit #245ef9 mindestens 5,6:1 auf dem jeweiligen Grund, gemessen
   07.10.2026). Flächen und Knöpfe behalten ihre Farbe. Die Gold-Fassung
   auf /elite bleibt ausgenommen.
   Jeder Selektor hier muss ein Element treffen, das schon als
   Verlaufsschrift gesetzt ist (background-clip: text). Sonst wird der
   Verlauf zur Fläche hinter der Schrift: so geschehen mit allen
   .lvev-e3-row-val (nur die hervorgehobene Zeile ist Verlaufsschrift) und
   den Adressteilen auf /about, deren Elternelement den Verlauf trägt.
   Prüfung: tests/codeleiste.test.mjs. */

/* Fuß aller Seiten. Der Leitsatz steht unter 1024 px auf hellem Streifen
   und hat dort einen dunklen Verlauf, deshalb nur ab 1024 px. */
@media (min-width: 1024px) {
  body:not(.lvf-gold) .lvf-page .lvf-s11-tagline {
    background-image: linear-gradient(126deg, rgb(var(--lvfb-6ecaff,110,202,255)) 0%, rgb(var(--lvfb-4fc0ff,79,192,255)) 100%);
  }
}
body:not(.lvf-gold) .lvf-page .lvf-s11-colhead,
body:not(.lvf-gold) .lvf-page .lvf-s11-blau,
body:not(.lvf-gold) .lvf-page .lvf-s11-info a,
body:not(.lvf-gold) .lvf-page .lvf-s11-nl-title-accent {
  background-image: linear-gradient(126deg, rgb(var(--lvfb-6ecaff,110,202,255)) 0%, rgb(var(--lvfb-4fc0ff,79,192,255)) 100%);
}
body:not(.lvf-gold) .lvf-page .lvf-s11-info a:hover { background-image: none; }

/* Startseite, Evaluation, Affiliate, Kontakt, About, FAQ. Selektoren genau
   wie die Verlaufsschrift-Regeln der Seiten, nicht allgemeiner. */
body:not(.lvf-gold) .lvf-page .lvf-s02-badge-hl,
body:not(.lvf-gold) .lvf-page .lvf-s07-cta-text,
body:not(.lvf-gold) .lvf-page .lvf-s09 .lvf-s09-pill-text,
body:not(.lvf-gold) .lvf-page .lvev-e7 .lvev-e7-pill-text,
body:not(.lvf-gold) .lvf-page .lvev-e3-secure-text,
body:not(.lvf-gold) .lvf-page .lvev-e3-change-text,
body:not(.lvf-gold) .lvf-page .lvev-e4-grad,
body:not(.lvf-gold) .lvf-page .lvaf-th,
body:not(.lvf-gold) .lvf-page .lvaf-td--val,
body:not(.lvf-gold) .lvf-page h3.lvct-qcard-h,
body:not(.lvf-gold) .lvf-page .lvf-s04 .lvf-s04-addons-hl,
body:not(.lvf-gold) .lvf-page .lvev-e3-row--hl .lvev-e3-row-val,
body:not(.lvf-gold) .lvf-page .lvaf-h1 .lvaf-t-blue,
body:not(.lvf-gold) .lvf-page .lvaf-h2 .lvaf-t-blue,
body:not(.lvf-gold) .lvf-page .lvaf-card-h2 .lvaf-t-blue,
body:not(.lvf-gold) .lvf-page .lvaf-step-h .lvaf-t-blue,
body:not(.lvf-gold) .lvf-page .lvaf-cta-stat-value,
body:not(.lvf-gold) .lvf-page .lvab-fact-value.lvab-grad-blue,
body:not(.lvf-gold) .lvf-page a.lvfq-b5-ci-main .lvfq-b5-ci-txt,
body:not(.lvf-gold) .lvf-page p.lvfq-b5-ci-main .lvfq-b5-ci-txt {
  background-image: linear-gradient(180deg, rgb(var(--lvfb-8cd5ff,140,213,255)) 0%, rgb(var(--lvfb-4fc0ff,79,192,255)) 100%);
}
.lvf-page .lvev-e2 { --lvev-e2-grad-chip: linear-gradient(180deg, rgb(var(--lvfb-8cd5ff,140,213,255)) 0%, rgb(var(--lvfb-4fc0ff,79,192,255)) 100%); }

body:not(.lvf-gold) .lvf-page .lvf-s03-start { color: rgb(var(--lvfb-4fc0ff,79,192,255)); }
body:not(.lvf-gold) .lvf-page .lvct-card-note { color: rgba(var(--lvfb-6ecaff,110,202,255),0.8); }