/* Energy Connect · Clean Green Theme Layer
   Definiert die moderne, klare grüne Farb- und Lichtsprache der gesamten Website. */

:root {
  --neon: #00e676;
  --neon-bright: #46ffa3;
  --neon-dim: #00a85a;
  --green: #00e676;
  --green-bright: #68ffad;
  --green-dim: #00a85a;
  --sky: #10b981;
  --sky-bright: #34d399;
  --violet: #059669;
  --violet-bright: #6ee7b7;
  --pink: #00e676;
  --orange: #22c55e;
  --neon-glow: rgba(0, 230, 118, 0.35);
  --neon-glow-soft: rgba(0, 230, 118, 0.1);
  --green-glow: rgba(0, 230, 118, 0.3);
  --sky-glow: rgba(16, 185, 129, 0.25);
  --bg: #030f0c;
  --bg-elevated: #061c16;
  --bg-card: rgba(6, 26, 21, 0.82);
  --bg-card-hover: rgba(9, 38, 30, 0.94);
  --border: rgba(0, 230, 118, 0.2);
  --border-strong: rgba(0, 230, 118, 0.48);
}

body {
  background:
    radial-gradient(circle at 7% 8%, rgba(0, 230, 118, 0.16), transparent 26rem),
    radial-gradient(circle at 96% 17%, rgba(16, 185, 129, 0.14), transparent 30rem),
    radial-gradient(circle at 52% 92%, rgba(5, 150, 105, 0.13), transparent 34rem),
    linear-gradient(135deg, #020a08 0%, #051913 46%, #020907 100%);
}

body::before {
  content: '';
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(0, 230, 118, 0.08) 49.9% 50.1%, transparent 50.3%),
    linear-gradient(0deg, transparent 49.7%, rgba(16, 185, 129, 0.07) 49.9% 50.1%, transparent 50.3%);
  background-size: 96px 96px;
  mask-image: linear-gradient(to bottom, #000, transparent 86%);
}

.header {
  border-bottom-color: rgba(0, 230, 118, 0.22);
  background: linear-gradient(100deg, rgba(3, 15, 12, 0.92), rgba(6, 24, 19, 0.78));
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 230, 118, 0.1);
}

.header::after {
  content: '';
  position: absolute;
  right: 4%;
  bottom: -1px;
  left: 4%;
  height: 1px;
  opacity: 0.9;
  background: linear-gradient(90deg, transparent, var(--neon), var(--green-bright), transparent);
  box-shadow: 0 0 16px var(--neon), 0 0 24px rgba(0, 230, 118, 0.4);
}

.logo__img,
.logo__mark {
  filter: drop-shadow(0 0 8px rgba(0, 230, 118, 0.4)) drop-shadow(0 0 20px rgba(70, 255, 163, 0.2));
}

.text-gradient,
.text-gradient--warm {
  background-image: linear-gradient(110deg, #00e676 0%, #46ffa3 28%, #e8fff5 50%, #68ffad 74%, #00d98b 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(0, 230, 118, 0.25));
  animation: green-spectrum 6s ease-in-out infinite, text-glow-pulse 4s ease-in-out infinite;
}

.text-neon {
  color: var(--neon-bright);
  text-shadow: 0 0 8px var(--neon), 0 0 24px var(--neon-glow), 0 0 36px rgba(0, 230, 118, 0.2);
}

.btn,
.button {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  border-color: rgba(187, 247, 208, 0.7);
  background: linear-gradient(115deg, #00e676 0%, #46ffa3 42%, #e8fff5 55%, #68ffad 72%, #00d98b 100%);
  background-size: 220% auto;
  color: #021a0f;
  box-shadow: 0 0 0 1px rgba(0, 230, 118, 0.25), 0 0 20px rgba(0, 230, 118, 0.35), 0 0 42px rgba(0, 230, 118, 0.15);
  animation: button-charge 5s linear infinite;
}

.btn::before,
.button::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -160%;
  left: -32%;
  width: 28%;
  height: 430%;
  opacity: 0.72;
  transform: rotate(24deg);
  background: rgba(255, 255, 255, 0.9);
  filter: blur(3px);
  animation: button-sheen 4.6s ease-in-out infinite;
}

.btn:hover,
.button:hover {
  color: #01120a;
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 0 0 1px #d1fae5, 0 12px 30px rgba(0, 230, 118, 0.45), 0 0 54px rgba(70, 255, 163, 0.28);
}

.btn--ghost,
.button--outline {
  color: var(--neon-bright);
  border-color: rgba(0, 230, 118, 0.5);
  background: linear-gradient(110deg, rgba(0, 230, 118, 0.1), rgba(16, 185, 129, 0.08));
  box-shadow: inset 0 0 22px rgba(0, 230, 118, 0.04), 0 0 18px rgba(0, 230, 118, 0.1);
  animation: none;
}

.btn--ghost::before,
.button--outline::before { display: none; }

.hero {
  isolation: isolate;
}

.hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 8% 3% auto;
  height: min(680px, 76%);
  pointer-events: none;
  opacity: 0.68;
  background: radial-gradient(ellipse at 31% 46%, rgba(0, 230, 118, 0.14), transparent 47%), radial-gradient(ellipse at 76% 28%, rgba(16, 185, 129, 0.12), transparent 42%);
  filter: blur(20px);
}

.hero__eyebrow,
.section__eyebrow,
.community-kicker,
.cta__label {
  color: var(--neon-bright);
  text-shadow: 0 0 15px rgba(0, 230, 118, 0.4);
}

.hero-stat,
.hero-feature,
.proof-bar,
.card,
.audience-card,
.community-level,
.community-benefit,
.testimonial,
.quote-card,
.conversation-card,
.member-welcome,
.member-stat,
.member-quick__card,
.member-perk,
.faq__item,
.post,
.story {
  border-color: rgba(0, 230, 118, 0.22);
  background-color: rgba(5, 22, 17, 0.78);
  box-shadow: inset 0 1px rgba(219, 255, 240, 0.05), 0 15px 38px rgba(0, 0, 0, 0.22), 0 0 28px rgba(0, 230, 118, 0.05);
}

.hero-stat:hover,
.hero-feature:hover,
.card:hover,
.audience-card:hover,
.community-level:hover,
.community-benefit:hover,
.testimonial:hover,
.quote-card:hover,
.member-quick__card:hover,
.post:hover {
  border-color: rgba(0, 230, 118, 0.7);
  box-shadow: inset 0 0 24px rgba(0, 230, 118, 0.08), 0 17px 42px rgba(0, 0, 0, 0.32), 0 0 34px rgba(0, 230, 118, 0.2);
}

.free-badge,
.proof-metric,
.community-training__badge,
.conversation-form__trust span {
  border-color: rgba(0, 230, 118, 0.42);
  background: linear-gradient(110deg, rgba(0, 230, 118, 0.12), rgba(16, 185, 129, 0.08));
  box-shadow: 0 0 20px rgba(0, 230, 118, 0.1);
}

.conversation-form input,
.conversation-form textarea,
.conversation-form select {
  border-color: rgba(0, 230, 118, 0.25);
  background-color: rgba(3, 14, 11, 0.7);
}

.conversation-form input:focus,
.conversation-form textarea:focus,
.conversation-form select:focus {
  border-color: var(--neon);
  box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.15), 0 0 20px rgba(0, 230, 118, 0.18);
}

.nav-user,
.nav-member-link {
  border-color: rgba(0, 230, 118, 0.38);
  background: linear-gradient(100deg, rgba(0, 230, 118, 0.12), rgba(16, 185, 129, 0.12));
  box-shadow: 0 0 18px rgba(0, 230, 118, 0.12);
}

.energy-console {
  position: relative;
  z-index: 1;
  margin: -1.8rem auto 1.5rem;
}

.energy-console__frame {
  display: grid;
  grid-template-columns: minmax(190px, 1.1fr) repeat(3, minmax(150px, 1fr));
  overflow: hidden;
  border: 1px solid rgba(0, 230, 118, 0.4);
  border-radius: 18px;
  background: linear-gradient(105deg, rgba(5, 26, 21, 0.96), rgba(4, 18, 14, 0.9));
  box-shadow: 0 0 0 1px rgba(0, 230, 118, 0.12), 0 18px 58px rgba(0, 0, 0, 0.35), 0 0 42px rgba(0, 230, 118, 0.14);
}

.energy-console__intro,
.energy-console__action {
  min-height: 112px;
  padding: 1.15rem 1.3rem;
}

.energy-console__intro {
  position: relative;
  overflow: hidden;
  border-right: 1px solid rgba(0, 230, 118, 0.22);
  background: linear-gradient(135deg, rgba(0, 230, 118, 0.14), rgba(16, 185, 129, 0.08));
}

.energy-console__intro::after {
  content: '';
  position: absolute;
  right: -26px;
  bottom: -42px;
  width: 106px;
  height: 106px;
  border: 1px solid var(--neon);
  border-radius: 50%;
  box-shadow: 0 0 0 15px rgba(0, 230, 118, 0.06), 0 0 32px rgba(0, 230, 118, 0.25);
}

.energy-console__intro span,
.energy-console__action small {
  display: block;
  color: var(--neon);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.energy-console__intro strong {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 15ch;
  margin-top: 0.34rem;
  font-family: var(--font-display);
  font-size: 1.55rem;
  letter-spacing: 0.06em;
  line-height: 0.92;
  text-transform: uppercase;
}

.energy-console__action {
  display: grid;
  align-content: center;
  gap: 0.33rem;
  border: 0;
  border-left: 1px solid rgba(0, 230, 118, 0.18);
  color: var(--text);
  background: transparent;
  transition: background 0.22s ease, transform 0.22s ease;
}

.energy-console__action:hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(0, 230, 118, 0.12), rgba(16, 185, 129, 0.12));
  transform: translateY(-3px);
}

.energy-console__action b { font-size: 0.97rem; }
.energy-console__action em { color: var(--text-muted); font-size: 0.74rem; font-style: normal; }

.signal-dock {
  position: fixed;
  z-index: 40;
  right: 1.2rem;
  bottom: 1.2rem;
  display: grid;
  justify-items: end;
  gap: 0.55rem;
}

.signal-dock__panel {
  display: grid;
  gap: 0.35rem;
  min-width: 208px;
  padding: 0.55rem;
  border: 1px solid rgba(0, 230, 118, 0.42);
  border-radius: 13px;
  background: rgba(3, 16, 13, 0.94);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 230, 118, 0.15);
  backdrop-filter: blur(16px);
  transform-origin: bottom right;
  animation: dock-in 0.26s ease;
}

.signal-dock__panel a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 39px;
  padding: 0.55rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
}

.signal-dock__panel a:hover {
  border-color: rgba(0, 230, 118, 0.55);
  background: rgba(0, 230, 118, 0.12);
  color: #fff;
}

.signal-dock__trigger,
.scroll-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid rgba(187, 247, 208, 0.7);
  border-radius: 999px;
  color: #021a0f;
  background: linear-gradient(115deg, #00e676, #46ffa3, #00d98b);
  box-shadow: 0 0 21px rgba(0, 230, 118, 0.4), 0 0 37px rgba(70, 255, 163, 0.2);
  font: 700 0.72rem var(--font-body);
  letter-spacing: 0.04em;
  cursor: pointer;
}

.signal-dock__trigger { gap: 0.5rem; padding: 0.55rem 0.9rem; }
.signal-dock__trigger i { width: 8px; height: 8px; border-radius: 50%; background: #062c2b; box-shadow: 0 0 0 4px rgba(255,255,255,.35), 0 0 18px #062c2b; animation: status-blink 1.6s ease-in-out infinite; }
.scroll-top { width: 44px; padding: 0; font-size: 1.1rem; }
.scroll-top[hidden] { display: none; }

.motion-paused *,
.motion-paused *::before,
.motion-paused *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
}

@keyframes green-spectrum {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes button-charge { to { background-position: 220% center; } }
@keyframes button-sheen { 0%, 30% { left: -42%; } 62%, 100% { left: 132%; } }
@keyframes status-blink { 0%,100% { transform: scale(.78); opacity:.62 } 48% { transform:scale(1.15); opacity:1 } }
@keyframes dock-in { from { opacity: 0; transform: scale(.9) translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .energy-console__frame { grid-template-columns: 1fr 1fr; }
  .energy-console__intro { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid rgba(0, 230, 118, 0.22); }
  .energy-console__action:nth-child(2) { border-left: 0; }
}

@media (max-width: 640px) {
  .energy-console { margin: -0.9rem 1rem 0.85rem; }
  .energy-console__frame { grid-template-columns: 1fr; }
  .energy-console__intro, .energy-console__action { min-height: auto; }
  .energy-console__action { border-top: 1px solid rgba(0, 230, 118, 0.18); border-left: 0; }
  .signal-dock { right: 0.85rem; bottom: 5.1rem; }
  .signal-dock__trigger { min-height: 42px; padding: 0.5rem 0.72rem; }
  .scroll-top { min-height: 42px; width: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}