/* ══════════════════════════════════════════════════════════════════════════
   COACH-LANDING IM NANIL-ECHO-DESIGN            angelegt 17.08.2026
   Nazannil: „sie muss aussehen wie die echo seiten"

   WAS DIESE DATEI TUT
   Sie hebt die Coach-Landing auf dieselbe Gestaltung wie echo.nanilpulse.art:
   lebendige Spirale als Grund, Glaskacheln mit farbigem Rand im Hell-Dunkel-
   Schachbrett, Palette aus Teal, Champagner, Violett und warmem Anthrazit.

   WAS SIE NICHT TUT
   Sie aendert keinen Text, keinen Preis, keine Struktur, keine Reihenfolge.
   Nur Farben, Flaechen und Kanten.

   WARUM UEBER DIE VARIABLEN
   Die Seite benutzt durchgehend --dark, --dark2, --dark3, --white, --gray,
   --light-gray, --teal, --coral. Werden diese acht umgestellt, zieht fast
   alles von selbst mit. Das ist deutlich sicherer, als vierzig Einzelregeln
   zu ueberschreiben und dabei eine zu vergessen — genau so entstand der
   Fehler, den wir am 17.08. gefunden haben (weisser Text auf Creme, weil
   beim Umbau von dunkel auf hell einzelne Farben stehenblieben).

   ZUM HELL-DUNKEL-RHYTHMUS
   Im Kopf von index.html steht, die Landing sei bewusst HELL als Gegenstueck
   zum dunklen Dashboard. Dieser Wechsel geht nicht verloren: Er wandert eine
   Ebene tiefer und laeuft jetzt INNERHALB der Seite ueber das Kachel-
   Schachbrett — dunkle Kachel, helle Kachel, dunkle Kachel — genauso wie
   auf /warum in Echo.

   AUSFALLSICHERHEIT
   Die Echo-Grundlagen (nanil-echo-global.css, nanil-spiral.js) werden von
   echo.nanilpulse.art geladen, damit Coach und Echo dauerhaft gleich bleiben
   und nicht auseinanderlaufen. Falls diese Quelle einmal nicht erreichbar
   ist, traegt DIESE Datei den dunklen Grund und die hellen Texte allein —
   die Seite bleibt dann schlicht, aber vollstaendig lesbar. Deshalb stehen
   Hintergrund und Textfarben hier und nicht drueben.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Echo-Palette (identisch mit den Echo-Seiten) ───────────────────── */
  --echo-teal:#26D7EA;
  --echo-champ:#e6cc92;
  --echo-violet:#7d6bf0;
  --echo-ink:#EAF6F3;
  --echo-glass:rgba(255,255,255,.055);

  /* ── Die acht Namen der Coach-Seite, auf Echo umgelegt ──────────────── */
  --dark:transparent;                    /* war #fefcf8 — Flaechen geben die Spirale frei */
  --dark2:rgba(255,255,255,.055);        /* war #f5f1e8 — Kacheln als Milchglas */
  --dark3:rgba(255,255,255,.085);        /* war #ece6d6 */
  --teal:#26D7EA;                        /* war #8b5cf6 — echtes Echo-Teal.
                                            Die vielen hartkodierten Violett-Toene
                                            bleiben stehen und bilden die zweite
                                            Palettenfarbe — Teal + Violett ist
                                            genau die Echo-Kombination. */
  --teal-glow:rgba(38,215,234,.18);
  --teal-soft:rgba(38,215,234,.10);
  --white:#EAF6F3;                       /* war #2a2a35 — heller Text auf dunklem Grund */
  --gray:rgba(234,246,243,.72);          /* war #5a5a70 */
  --light-gray:rgba(234,246,243,.82);    /* war #4a4a5a */
  --coral:#ff8a7a;                       /* etwas waermer, passt zur Palette */
}

/* ── Grundflaeche: warmes Anthrazit, meliert, nie totes Schwarz ────────────
   Gemessen am 17.08. auf der Live-Seite: Die Spirale deckt den Sichtbereich
   ab, traegt aber weiter unten kaum noch Farbe — der Anmeldebereich stand auf
   rgb(6,7,11), praktisch Schwarz. Genau das soll bei NANIL nie passieren.
   Deshalb liegt hier ein eigener melierter Grund aus mehreren geschichteten
   Radialverlaeufen: Bernstein, Teal und Violett auf warmem Anthrazit. Er
   traegt die Seite auch dort, wo die Spirale nichts mehr malt.
   `html:root` ist noetig, weil die Echo-Grundlage `html` bereits mit
   !important belegt — eine Klasse mehr in der Spezifitaet entscheidet. */
html:root{
  background-color:#0f1318!important;
  background-image:
    radial-gradient(1100px 780px at 12% 4%,  rgba(230,204,146,.13), transparent 62%),
    radial-gradient(1000px 820px at 88% 22%, rgba(38,215,234,.11),  transparent 60%),
    radial-gradient(1200px 900px at 50% 58%, rgba(125,107,240,.12), transparent 64%),
    radial-gradient(900px 760px at 20% 88%,  rgba(230,204,146,.09), transparent 62%),
    linear-gradient(148deg,#0f1318 0%,#0b0f14 52%,#12161c 100%)!important;
  background-attachment:fixed!important;
}
html,body{color:var(--echo-ink)!important}
body{
  background:transparent!important;
  /* Der pulsierende Hell-Dunkel-Hintergrund der alten Fassung wuerde mit der
     Spirale streiten — die Spirale lebt bereits von selbst. */
  animation:none!important;
  min-height:100dvh;
}
/* Die Spirale liegt VOR dem melierten Grund und malt in ihren ruhigen Zonen
   Schwarz — dadurch war der Anmeldebereich trotz melierten Grundes tiefschwarz.
   Mit `screen` wirkt sie als Lichtschicht: Ihre hellen Wirbel bleiben, ihr
   Schwarz wird durchsichtig und gibt Bernstein, Teal und Violett darunter
   frei. Beides zusammen ergibt die lebendige, nie tote Flaeche. */
#nanilSpiral{
  position:fixed!important;inset:0!important;z-index:-1!important;
  pointer-events:none!important;
  mix-blend-mode:screen!important;
  opacity:.92!important;
}

/* Abschnittsflaechen durchsichtig, damit der Hintergrund durchlaeuft. */
.section,.how,.story,.pricing-section,.pilot,.hero,.faq,footer{
  background:transparent!important;
}
.how,.pricing-section{
  border-top:1px solid rgba(255,255,255,.06)!important;
  border-bottom:1px solid rgba(255,255,255,.06)!important;
}
.topbar{
  background:rgba(12,17,24,.55)!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.07)!important;
}

/* ── Kacheln: Milchglas, farbiger Rand, leicht schwebend ──────────────── */
.pain-card,.step,.story-card,.why-card,.pricing-card,.faq-item,.form-card{
  background:var(--echo-glass)!important;
  border:1px solid rgba(90,160,152,.28)!important;
  border-radius:18px!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  transition:transform .18s cubic-bezier(.2,.8,.3,1);
}
.pain-card:active,.step:active,.why-card:active,.pricing-card:active{
  transform:translateY(-4px) scale(1.01);
}
/* Farbige Raender aus der Palette, im Wechsel — wie das Echo-Schachbrett. */
.pain-card:nth-child(1),.step:nth-child(1){border-color:rgba(38,215,234,.34)!important}
.pain-card:nth-child(2),.step:nth-child(2){border-color:rgba(226,198,142,.36)!important}
.pain-card:nth-child(3),.step:nth-child(3){border-color:rgba(125,107,240,.36)!important}
/* Der rote Balken der Schmerzpunkte bleibt als Signal erhalten. */
.pain-card{border-left:3px solid var(--coral)!important}

/* ── Preiskarten: Schachbrett dunkel — HELL — dunkel ──────────────────── */
.pricing-card{border-radius:20px!important}

/* Die hervorgehobene Karte ist die helle Kachel. Helle Kachel heisst:
   echtes helles Milchglas mit DUNKLEM, lesbarem Text — nie heimlich dunkel. */
.pricing-card.featured{
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(246,242,233,.88))!important;
  border-color:rgba(226,198,142,.55)!important;
  box-shadow:0 16px 44px rgba(0,0,0,.30)!important;
}
.pricing-card.featured .plan-price,
.pricing-card.featured .plan-price span,
.pricing-card.featured .plan-setup,
.pricing-card.featured .plan-feature,
.pricing-card.featured .plan-limit,
.pricing-card.featured .plan-clients{color:#1c2430!important}
.pricing-card.featured .plan-name{color:#5b41c9!important}
.pricing-card.featured .plan-feature.dim{color:rgba(28,36,48,.58)!important}
.pricing-card.featured .plan-feature::before{
  background:#5b41c9!important;box-shadow:0 0 6px rgba(91,65,201,.45)!important;
}
.pricing-card.featured .plan-cta.secondary{
  background:rgba(28,36,48,.06)!important;color:#1c2430!important;
  border:1px solid rgba(91,65,201,.42)!important;
}

/* Dunkle Preiskarten */
.pricing-card .plan-price{color:var(--echo-ink)!important}
.pricing-card .plan-feature{color:rgba(234,246,243,.87)!important}
.pricing-card .plan-setup,
.pricing-card .plan-price span,
.pricing-card .plan-limit{color:rgba(234,246,243,.72)!important}
.plan-name{color:var(--echo-champ)!important}
.plan-clients{color:rgba(234,246,243,.80)!important}
.plan-feature::before{background:var(--echo-teal)!important;box-shadow:0 0 6px rgba(38,215,234,.55)!important}
.plan-feature.dim{color:rgba(234,246,243,.55)!important}
.plan-feature.dim::before{background:rgba(234,246,243,.22)!important;box-shadow:none!important}
.pricing-card.coming{opacity:.72!important}
.plan-badge{
  background:linear-gradient(135deg,var(--echo-champ),var(--echo-teal))!important;
  color:#0c1714!important;
}

/* ── Knoepfe: glasig, schwebend, farbig umrandet ──────────────────────── */
.btn,.plan-cta,.form-card button,button[type="submit"]{
  border-radius:999px!important;
  transition:transform .16s cubic-bezier(.2,.8,.3,1),box-shadow .16s!important;
}
/* Die Echo-Grundlage faerbt ALLE <button> glasig — gemessen am 17.08.: der
   Haupt-Handlungsknopf sah dadurch aus wie der Nebenknopf, beide gleich.
   Auf einer Verkaufsseite ist das teuer. Zwei Elemente plus zwei Klassen
   schlagen die globale Regel; mit weniger gewinnt sie. */
html body .btn.btn-primary,
html body a.btn.btn-primary,
html body button.btn.btn-primary,
.plan-cta.primary{
  background-image:linear-gradient(135deg,var(--echo-champ),var(--echo-teal))!important;
  background-color:transparent!important;
  color:#0c1714!important;border:none!important;
  box-shadow:0 10px 28px rgba(38,215,234,.26)!important;
  font-weight:700!important;
}
html body .btn.btn-secondary,
html body a.btn.btn-secondary,
.plan-cta.secondary{
  background-image:none!important;
  background-color:rgba(255,255,255,.09)!important;
  color:var(--echo-ink)!important;
  border:1px solid rgba(226,198,142,.42)!important;box-shadow:none!important;
}
.btn-primary:hover,.plan-cta.primary:hover{transform:translateY(-2px)}
.btn:active,.plan-cta:active{transform:scale(.98)}
.plan-cta.disabled{
  background:rgba(255,255,255,.05)!important;
  color:rgba(234,246,243,.50)!important;
  border:1px solid rgba(255,255,255,.10)!important;
}

/* ── Schrift und Auszeichnungen ───────────────────────────────────────── */
.h1,.section-title,h1,h2,h3{color:var(--echo-ink)!important}
.h1 .accent,.section-title .accent,.accent{color:var(--echo-champ)!important}
.sub,.section-lead,.trust,.form-note,.pricing-note{color:rgba(234,246,243,.78)!important}
.pricing-note strong{color:rgba(234,246,243,.92)!important}
.eyebrow,.pricing-badge{
  background:rgba(125,107,240,.14)!important;
  border:1px solid rgba(150,230,255,.30)!important;
  color:var(--echo-teal)!important;
}
.story-card .label,.label{color:var(--echo-champ)!important}
.story-card .quote,.quote{color:rgba(234,246,243,.80)!important}
.story-card .conclusion{color:var(--echo-ink)!important}
.story-card .conclusion strong{color:var(--echo-teal)!important}
.pain-card h3,.step h3{color:var(--echo-ink)!important}
.pain-card p,.step p{color:rgba(234,246,243,.76)!important}
.step .num{
  background:linear-gradient(135deg,var(--echo-champ),var(--echo-teal))!important;
  color:#0c1714!important;
}
.brand{color:var(--echo-ink)!important}
.brand-mark{background:var(--echo-teal)!important;box-shadow:0 0 12px rgba(38,215,234,.6)!important}
.pulse-ring{background:var(--echo-teal)!important}
.lang-switch a{color:rgba(234,246,243,.70)!important}
.lang-switch a.active{background:rgba(38,215,234,.14)!important;color:var(--echo-teal)!important}
.why-k{color:var(--echo-champ)!important}
.why-card.dunkel{
  background:linear-gradient(135deg,rgba(255,255,255,.90),rgba(246,242,233,.86))!important;
  border-color:rgba(226,198,142,.50)!important;
}
.why-card.dunkel,.why-card.dunkel *{color:#1c2430!important}
.why-card.dunkel .why-k{color:#5b41c9!important}

/* ── Ampelfarben ──────────────────────────────────────────────────────────
   Auf dunklem Grund muessen sie hell sein, sonst verschwinden sie. Das gilt
   aber NICHT ueberall: Die nachgebaute Abend-Mail (.dashboard-mock) ist eine
   helle Box. Am 17.08. war genau das mein Fehler — aufgehelltes Gelb und
   Gruen standen dort auf Weiss und waren kaum zu lesen. Deshalb zwei Saetze:
   heller Grund behaelt kraeftige, dunklere Toene. */
.green{color:#5fe3b0!important}
.yellow{color:#ffd166!important}
.red{color:#ff8a7a!important}
.gray{color:rgba(234,246,243,.58)!important}

.dashboard-mock .green{color:#0a6b4a!important}
.dashboard-mock .yellow{color:#7a5200!important}
.dashboard-mock .red{color:#c0392b!important}
.dashboard-mock .gray{color:#5a5a70!important}
.dashboard-mock{color:#1c2430!important}
.dashboard-mock .row{color:#1c2430!important}

/* Eingabefelder auf dunklem Grund */
input,textarea,select{
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  color:var(--echo-ink)!important;
  border-radius:14px!important;
}
input::placeholder,textarea::placeholder{color:rgba(234,246,243,.45)!important}

/* ── Der helle Abschnitt (Anmeldung) ──────────────────────────────────────
   .section-light war eine vollflaechige helle Flaeche (#F2F2F8). Auf den
   Echo-Seiten gibt es so etwas nicht: dort laeuft der Grund immer durch und
   das Helle ist eine KACHEL. Genau so hier — die Spirale laeuft durch, die
   Anmeldekarte wird zur hellen Kachel. Der Hell-Dunkel-Wechsel bleibt damit
   erhalten, er sitzt nur eine Ebene tiefer.
   Am 17.08. war dieser Abschnitt nach der Umstellung zunaechst unbrauchbar:
   heller Grund geblieben, Text auf hell gesetzt — Ueberschrift, Felder und
   Hinweis waren nicht mehr zu lesen. Auf der Seite, die Anfragen bringt. */
.section-light{background:transparent!important}
.final-cta h2,.section-light .section-title{color:var(--echo-ink)!important}
.final-cta h2 .accent,.section-light .accent{color:var(--echo-champ)!important}
.final-cta p,.section-light .section-lead{color:rgba(234,246,243,.80)!important}

/* Anmeldekarte = helle Kachel mit dunklem, lesbarem Text. */
.section-light .signup-form,.signup-form{
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(246,242,233,.90))!important;
  border:1px solid rgba(226,198,142,.50)!important;
  border-radius:20px!important;
  box-shadow:0 16px 44px rgba(0,0,0,.30)!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.signup-form,.signup-form label,.signup-form p,.signup-form .form-note{color:#1c2430!important}
.signup-form input,.signup-form textarea,.signup-form select{
  background:rgba(255,255,255,.88)!important;
  border:1px solid rgba(28,36,48,.20)!important;
  color:#1c2430!important;
}
.signup-form input::placeholder,.signup-form textarea::placeholder{color:rgba(28,36,48,.52)!important}
.signup-form .form-note,.section-light .form-note{color:rgba(28,36,48,.72)!important}

/* Helle Kacheln in hellen Abschnitten behalten dunklen Text. */
.section-light .pain-card{
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(246,242,233,.88))!important;
  border-color:rgba(226,198,142,.46)!important;
}
.section-light .pain-card h3{color:#1c2430!important}
.section-light .pain-card p{color:rgba(28,36,48,.76)!important}

/* Bestaetigung nach dem Absenden. Sie liegt in .final-cta und wurde deshalb
   von der hellen Textfarbe dort mitgenommen — auf ihrem weissen Grund ergab
   das 1,11:1. Sichtbar wird sie erst nach dem Absenden, also genau in dem
   Moment, in dem jemand wissen will, ob es geklappt hat. Eine ID schlaegt
   die Klassenregel. */
#formSuccess{
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(246,242,233,.92))!important;
  border:2px solid rgba(125,107,240,.55)!important;
  box-shadow:0 16px 44px rgba(0,0,0,.30)!important;
}
#formSuccess p{color:#1c2430!important}
#formSuccess p:first-of-type{color:#141c28!important}

/* ── WhatsApp behaelt sein Gruen ──────────────────────────────────────────
   Der Knopf traegt sein Gruen als Inline-Angabe. Meine Verlaufs-Regel hat es
   ueberdeckt — dann ist er nicht mehr als WhatsApp erkennbar, und genau die
   Wiedererkennung ist der Grund, warum Leute darauf tippen. */
html body a.btn[href*="wa.me"],
html body a.btn[href*="whatsapp"]{
  background-image:none!important;
  background-color:#25D366!important;
  color:#fff!important;
  border:none!important;
  box-shadow:0 8px 26px rgba(37,211,102,.34)!important;
}
html body a.btn[href*="wa.me"] *{color:#fff!important}
/* Terminknopf: Echo-Verlauf mit dunklem Text — er steht neben WhatsApp. */
html body a.btn[href*="calendly"]{
  background-image:linear-gradient(135deg,var(--echo-champ),var(--echo-teal))!important;
  background-color:transparent!important;color:#0c1714!important;border:none!important;
}
html body a.btn[href*="calendly"] *{color:#0c1714!important}

/* Trennlinien */
hr,.divider{border-color:rgba(255,255,255,.09)!important}
footer{color:rgba(234,246,243,.62)!important}
footer a{color:rgba(234,246,243,.80)!important}