/* /frontend/assets/styles.css */

:root{
  --bg0:#080214;
  --bg1:#0c0420;
  --bg2:#12062b;

  --card:rgba(18, 8, 43, .54);
  --border:rgba(200,120,255,.22);

  --text:#f3efff;
  --muted:rgba(233,224,255,.72);
  --muted2:rgba(220,205,255,.56);

  --violet:#a053d5;
  --violet2:#c052ed;
  --pink:#fa48bd;
  --pink2:#fd7d84;

  --r20:20px;
  --r22:22px;

  --maxw:1180px;
  --pad:24px;

  --grad:linear-gradient(90deg, var(--violet2) 0%, var(--pink) 55%, var(--pink2) 100%);
  --gradBtn:linear-gradient(180deg, rgba(250,72,189,1) 0%, rgba(192,82,237,1) 40%, rgba(160,83,213,1) 100%);

  /* Assets */
  --tfxBase:url("/assets/bg_base_gradient_4k.webp");
  --tfxNebula:url("/assets/bg_nebula_haze_4k.webp");
  --tfxStars:url("/assets/bg_starfield_4k.webp");
  --tfxCurvesSvg:url("/assets/bg_curves_overlay_4k.svg");
  --tfxCurvesPng:url("/assets/bg_curves_overlay_4k.webp");
  --tfxVignette:url("/assets/bg_vignette_4k.webp");
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 45%, var(--bg2) 100%);
  overflow-x:hidden;
}

a{color:inherit}
img{max-width:100%;height:auto}
::selection{background:rgba(250,72,189,.28); color:var(--text)}

/* ===== Fixed Background Stack ===== */
.tf-bg{
  position:fixed;
  inset:0;
  z-index:-10;
  pointer-events:none;
  overflow:hidden;

  background-image:var(--tfxBase);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;

  transform:translateZ(0);
}

.tf-bg::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;

  background-image:var(--tfxNebula);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;

  opacity:.62;
  filter:saturate(1.08) contrast(1.02);
  mix-blend-mode:screen;
  transform:translateZ(0);
}

.tf-bg-stars{
  position:fixed;
  inset:0;
  pointer-events:none;

  background-image:var(--tfxStars);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;

  opacity:.18;
  filter:blur(.25px) brightness(1.05) contrast(.98);
  mix-blend-mode:screen;
  transform:translateZ(0);
  animation:tfStarsDrift 90s linear infinite;
}

.tf-bg-stars::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;

  background-image:var(--tfxStars);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;

  opacity:.09;
  filter:blur(.9px) brightness(1.02);
  mix-blend-mode:screen;
  transform:translateZ(0);
}

.tf-bg-curves{
  position:fixed;
  inset:0;
  z-index:-7;
  pointer-events:none;

  background-image:var(--tfxCurvesSvg);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;

  mix-blend-mode:screen;
  filter:blur(.25px) saturate(1.12);
  transform:translateZ(0);
}

@supports not (filter: url("#glow")){
  .tf-bg-curves{background-image:var(--tfxCurvesPng)}
}

.tf-bg-curves--top{
  opacity:.70;
  -webkit-mask-image:linear-gradient(to bottom,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,1) 52%,
    rgba(255,255,255,.70) 63%,
    rgba(255,255,255,.25) 72%,
    rgba(255,255,255,0) 82%
  );
  mask-image:linear-gradient(to bottom,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,1) 52%,
    rgba(255,255,255,.70) 63%,
    rgba(255,255,255,.25) 72%,
    rgba(255,255,255,0) 82%
  );
}

.tf-bg-curves--bottom{
  opacity:.58;
  -webkit-mask-image:linear-gradient(to top,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,1) 52%,
    rgba(255,255,255,.70) 63%,
    rgba(255,255,255,.25) 72%,
    rgba(255,255,255,0) 82%
  );
  mask-image:linear-gradient(to top,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,1) 52%,
    rgba(255,255,255,.70) 63%,
    rgba(255,255,255,.25) 72%,
    rgba(255,255,255,0) 82%
  );
}

.tf-bg::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;

  background:
    var(--tfxVignette) no-repeat center / cover,
    radial-gradient(1400px 900px at 50% 55%, rgba(0,0,0,0) 50%, rgba(0,0,0,.55) 100%);
  opacity:1;
  transform:translateZ(0);
}

@keyframes tfStarsDrift{
  0%{background-position:50% 50%}
  100%{background-position:46% 54%}
}

/* Subtle noise */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-6;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0, rgba(255,255,255,.014) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.010) 0, rgba(255,255,255,.010) 1px, transparent 1px, transparent 4px);
  opacity:.07;
  mix-blend-mode:soft-light;
}

/* ===== Layout ===== */
.container{
  width:min(var(--maxw), calc(100% - (var(--pad) * 2)));
  margin:0 auto;
}

.grad{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.muted{color:var(--muted2)}
.center{text-align:center;letter-spacing:.2px}

main{position:relative}
section{padding:66px 0}

h1,h2,h3{margin:0 0 14px}
h1{font-size:56px; line-height:1.06; letter-spacing:-.9px; font-weight:800}
h2{font-size:44px; line-height:1.08; letter-spacing:-.6px; font-weight:800}
h3{font-size:28px; line-height:1.15; letter-spacing:-.2px; font-weight:800}

/* ===== Title lines (left/right) ===== */
.title-lines{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  width:100%;
  text-align:center;
  position:relative;
}

.title-lines::before,
.title-lines::after{
  content:"";
  height:2px;
  flex:1;
  max-width:520px;
  border-radius:999px;
  opacity:.85;
}

.title-lines::before{
  background:
    radial-gradient(6px 6px at 98% 50%, rgba(250,72,189,.95) 0%, rgba(250,72,189,0) 65%),
    radial-gradient(10px 10px at 94% 50%, rgba(160,83,213,.55) 0%, rgba(160,83,213,0) 72%),
    linear-gradient(90deg, transparent 0%, rgba(160,83,213,.35) 25%, rgba(192,82,237,.70) 60%, rgba(250,72,189,.90) 100%);
  box-shadow:0 0 12px rgba(250,72,189,.18), 0 0 14px rgba(160,83,213,.18);
}

.title-lines::after{
  background:
    radial-gradient(6px 6px at 2% 50%, rgba(250,72,189,.95) 0%, rgba(250,72,189,0) 65%),
    radial-gradient(10px 10px at 6% 50%, rgba(160,83,213,.55) 0%, rgba(160,83,213,0) 72%),
    linear-gradient(90deg, rgba(250,72,189,.90) 0%, rgba(192,82,237,.70) 40%, rgba(160,83,213,.35) 75%, transparent 100%);
  box-shadow:0 0 12px rgba(250,72,189,.18), 0 0 14px rgba(160,83,213,.18);
}

@media (max-width: 768px){
  .title-lines{gap:14px}
  .title-lines::before,
  .title-lines::after{
    max-width:240px;
    opacity:.78;
  }
}


.sub{margin:0; color:var(--muted); font-size:16px; line-height:1.55}
.mini{margin:14px 0 0; color:rgba(235,228,255,.62); font-size:13px; letter-spacing:.2px}

/* ===== Topbar ===== */
.topbar{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(8,2,20,.46);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(200,120,255,.10);
}

.topbar::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:2px;
  background:linear-gradient(90deg, transparent 0%, rgba(250,72,189,.75) 22%, rgba(192,82,237,.85) 50%, rgba(160,83,213,.75) 78%, transparent 100%);
  filter:drop-shadow(0 0 10px rgba(250,72,189,.55)) drop-shadow(0 0 14px rgba(160,83,213,.45));
  opacity:.75;
  pointer-events:none;
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  user-select:none;
}

/* Logo-Kasten */
.brand-mark{
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  overflow:hidden;

  background:linear-gradient(180deg, rgba(18,8,43,.55) 0%, rgba(10,3,22,.30) 100%);
  border:1px solid rgba(200,120,255,.22);

  /* Glow sitzt am Kasten (nicht am Bild) -> bleibt sauber */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 22px rgba(250,72,189,.14),
    0 0 26px rgba(160,83,213,.12);
}

/* Bild füllt den Kasten komplett & bleibt crisp */
.brand-logo{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;

  /* wichtig: keine Filter auf dem img */
  filter:none !important;
  transform:none !important;
}

.brand-name{
  font-weight:900;
  letter-spacing:.2px;
  font-size:18px;

  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  filter:drop-shadow(0 0 14px rgba(250,72,189,.14)) drop-shadow(0 0 16px rgba(160,83,213,.12));
}

.nav{
  display:flex;
  align-items:center;
  gap:26px;
  flex-wrap:wrap;
}
.nav a{
  text-decoration:none;
  color:rgba(235,228,255,.78);
  font-weight:600;
  font-size:14px;
  letter-spacing:.2px;
  padding:8px 8px;
  border-radius:12px;
  transition:transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.nav a:hover{
  color:rgba(255,255,255,.95);
  background:rgba(200,120,255,.08);
  box-shadow:0 0 0 1px rgba(200,120,255,.12) inset, 0 0 18px rgba(160,83,213,.14);
  transform:translateY(-1px);
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  border-radius:14px;
  padding:12px 18px;
  font-weight:700;
  font-size:14px;
  line-height:1;
  border:1px solid rgba(200,120,255,.18);
  cursor:pointer;
  user-select:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, filter .18s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn[disabled], .btn:disabled{opacity:.55;cursor:not-allowed;transform:none !important;box-shadow:none !important}

.btn-primary{
  background:var(--gradBtn);
  color:#14061f;
  border-color:rgba(255,170,240,.30);
  box-shadow:
    0 16px 38px rgba(250,72,189,.22),
    0 14px 44px rgba(160,83,213,.18),
    0 0 0 1px rgba(255,255,255,.08) inset;
}
.btn-primary:hover{
  transform:translateY(-1px);
  filter:saturate(1.05);
  box-shadow:
    0 20px 52px rgba(250,72,189,.26),
    0 18px 58px rgba(160,83,213,.22),
    0 0 22px rgba(250,72,189,.18),
    0 0 0 1px rgba(255,255,255,.10) inset;
}

.btn-secondary{
  background:rgba(20, 9, 45, .42);
  color:rgba(245,240,255,.92);
  border-color:rgba(200,120,255,.22);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 10px 30px rgba(0,0,0,.38);
}
.btn-secondary:hover{
  transform:translateY(-1px);
  background:rgba(26, 12, 56, .54);
  box-shadow:0 0 0 1px rgba(200,120,255,.20) inset, 0 18px 44px rgba(0,0,0,.45), 0 0 18px rgba(160,83,213,.20);
}

.btn-ghost{
  background:rgba(10, 3, 22, .28);
  color:rgba(245,240,255,.86);
  border-color:rgba(200,120,255,.18);
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset;
}
.btn-ghost:hover{
  transform:translateY(-1px);
  background:rgba(16, 5, 34, .36);
  border-color:rgba(250,72,189,.22);
  box-shadow:0 0 0 1px rgba(255,255,255,.07) inset, 0 0 22px rgba(250,72,189,.12), 0 0 24px rgba(160,83,213,.12);
}

.btn-top{
  padding:11px 16px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(18,8,43,.35) 0%, rgba(10,3,22,.20) 100%);
}

.btn-wide{width:100%}

/* ===== Cards / Glass ===== */
.price-card,
.card,
.video-frame,
.faq-box,
.accordion-box,
.free-card{
  background:linear-gradient(180deg, rgba(18,8,43,.62) 0%, rgba(10,3,22,.38) 100%);
  border:1px solid var(--border);
  border-radius:var(--r22);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset, 0 26px 70px rgba(0,0,0,.55);
  position:relative;
}

.price-card::before,
.video-frame::after,
.free-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(820px 320px at 20% 18%, rgba(250,72,189,.22) 0%, transparent 60%),
    radial-gradient(880px 360px at 78% 76%, rgba(160,83,213,.22) 0%, transparent 62%),
    linear-gradient(135deg, rgba(250,72,189,.18), rgba(192,82,237,.14), rgba(160,83,213,.16));
  filter:blur(12px);
  opacity:.70;
  z-index:-1;
}

/* ===== Hero ===== */
.hero{padding:78px 0 44px; position:relative}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:42px;
  align-items:start;
}
.hero-left{padding-top:10px}
.hero-left h1 .grad{filter:drop-shadow(0 0 14px rgba(250,72,189,.20)) drop-shadow(0 0 16px rgba(160,83,213,.18))}
.hero-left .sub{max-width:560px; margin-top:16px}

.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:26px;
}
.hero-actions .btn .muted{font-weight:700; font-size:12px; opacity:.78}

.callout{
  margin-top:18px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(200,120,255,.16);
  background:rgba(10,3,22,.24);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 0 18px rgba(160,83,213,.10);
  color:rgba(245,240,255,.88);
  font-size:13px;
  line-height:1.45;
}
.callout strong{color:rgba(255,255,255,.95)}

/* Price card */
.price-card{padding:26px 24px 22px; overflow:hidden}
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  font-weight:800;
  font-size:14px;
  letter-spacing:.2px;
  color:#14061f;
  background:var(--grad);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 12px 28px rgba(250,72,189,.18), 0 0 22px rgba(160,83,213,.18);
  margin-bottom:16px;
}
.price{display:flex; align-items:flex-end; gap:10px; margin-bottom:14px}
.price-big{
  font-size:56px;
  line-height:1;
  font-weight:900;
  letter-spacing:-1px;
  color:rgba(255,255,255,.95);
  text-shadow:0 0 22px rgba(192,82,237,.12);
}
.price-big .euro{font-size:.58em; font-weight:900; opacity:.95}
.price-sub{font-size:16px; font-weight:800; color:rgba(235,228,255,.78); padding-bottom:6px}

.ticks{
  list-style:none;
  padding:0;
  margin:12px 0 18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.ticks li{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(245,240,255,.86);
  font-weight:600;
  font-size:14px;
}
.ticks .tick{
  width:22px;height:22px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:900;font-size:13px;color:#14061f;
  background:linear-gradient(180deg, rgba(155,250,210,1) 0%, rgba(122,227,255,1) 45%, rgba(160,83,213,1) 140%);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 0 18px rgba(122,227,255,.20), 0 0 18px rgba(250,72,189,.12);
  flex:0 0 auto;
}
.fineprint{margin-top:12px; font-size:12px; color:rgba(235,228,255,.64); text-align:center}

/* Neon separators */
.hero-line,
.section-line{
  position:relative;
  width:100%;
  height:1px;
  margin-top:42px;
  background:linear-gradient(90deg, transparent 0%, rgba(250,72,189,.55) 22%, rgba(192,82,237,.62) 50%, rgba(160,83,213,.55) 78%, transparent 100%);
  box-shadow:0 0 14px rgba(250,72,189,.22), 0 0 16px rgba(160,83,213,.22);
  opacity:.9;
}
.section-line{margin-top:56px; opacity:.75}
.hero-line::before,
.section-line::before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(760px, 92vw);
  height:3px;
  background:linear-gradient(90deg, transparent, rgba(250,72,189,.25), rgba(192,82,237,.28), rgba(160,83,213,.25), transparent);
  filter:blur(1.6px);
  opacity:.85;
}

/* ===== Video ===== */
.video{padding:56px 0 58px}
.video-grid{
  display:grid;
  grid-template-columns: .85fr 1.15fr;
  gap:42px;
  align-items:center;
}
.video-left h2 .grad{filter:drop-shadow(0 0 14px rgba(250,72,189,.18)) drop-shadow(0 0 16px rgba(160,83,213,.16))}
.video-frame{padding:18px; overflow:hidden}
.video-inner{
  position:relative;
  z-index:1;
  border-radius:18px;
  background:rgba(6,2,14,.55);
  border:1px solid rgba(200,120,255,.14);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset, 0 18px 52px rgba(0,0,0,.55);
  overflow:hidden;
  aspect-ratio: 16 / 9;
  display:flex;
  align-items:center;
  justify-content:center;
}
.vid{
  width:100%;
  height:100%;
  object-fit:contain;
  background:rgba(0,0,0,.45);
  border-radius:14px;
}

/* Bullets */
.bullets{
  margin:14px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  color:rgba(235,228,255,.72);
  font-size:14px;
  line-height:1.45;
}
.bullets li{
  padding-left:18px;
  position:relative;
}
.bullets li::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  color:rgba(250,72,189,.75);
}

/* ===== Cards grids ===== */
.cards-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin-top:26px;
}
.card{padding:22px 20px; border-radius:var(--r20)}
.card-title{font-weight:800;font-size:16px;letter-spacing:.2px;margin-top:10px;color:rgba(250,245,255,.95)}
.card-sub{margin-top:6px;color:rgba(235,228,255,.68);font-size:13px;line-height:1.45}
.step{font-size:28px;font-weight:900;letter-spacing:-.5px;color:rgba(255,255,255,.92);text-shadow:0 0 18px rgba(250,72,189,.10)}

/* ===== Packages Accordion ===== */
.packages{padding:52px 0 58px}
.accordion-box{
  max-width:900px;
  margin:26px auto 0;
  padding:10px;
}
.acc{
  border-radius:18px;
  border:1px solid rgba(200,120,255,.10);
  background:rgba(10,3,22,.20);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
  overflow:hidden;
}
.acc summary{
  cursor:pointer;
  list-style:none;
  padding:16px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  font-weight:900;
  color:rgba(245,240,255,.92);
}
.acc summary::-webkit-details-marker{display:none}
.acc-title{font-size:15px}
.acc-meta{
  font-size:13px;
  color:rgba(235,228,255,.70);
  font-weight:800;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(200,120,255,.14);
  background:rgba(16,5,34,.35);
}
.acc-body{
  padding:4px 16px 18px;
}
.feature-list{
  margin:10px 0 14px;
  padding-left:18px;
  color:rgba(235,228,255,.72);
  line-height:1.55;
  font-size:14px;
}
.acc-actions{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.acc-note{
  font-size:12px;
  color:rgba(235,228,255,.62);
}

/* ===== Free section ===== */
.free{padding:62px 0 72px}
.free-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:34px;
  align-items:start;
}
.free-left{padding-top:10px}
.free-card{
  padding:22px;
  overflow:hidden;
}
.free-card-head{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.badge-soft{
  display:inline-flex;
  width:max-content;
  padding:7px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  color:rgba(255,255,255,.92);
  border:1px solid rgba(200,120,255,.16);
  background:linear-gradient(180deg, rgba(250,72,189,.14) 0%, rgba(160,83,213,.12) 100%);
  box-shadow:0 0 18px rgba(250,72,189,.10);
}
.free-card-title{font-weight:900;font-size:18px;color:rgba(250,245,255,.96)}
.steps{
  margin:10px 0 16px;
  padding-left:18px;
  color:rgba(235,228,255,.72);
  line-height:1.55;
  font-size:14px;
}

/* ===== Guide section ===== */
.guide{padding:56px 0 48px}
.guide-cards .card{position:relative}
.guide-cards .card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(420px 180px at 18% 0%, rgba(250,72,189,.14) 0%, transparent 60%),
    radial-gradient(420px 180px at 88% 100%, rgba(160,83,213,.12) 0%, transparent 62%);
  opacity:.85;
}

/* ===== FAQ ===== */
.faq{padding:54px 0 84px}
.faq-box{
  padding:18px 18px;
  max-width:860px;
  margin:26px auto 0;
}
.faq-box details{
  padding:14px 12px;
  border-radius:16px;
  border:1px solid rgba(200,120,255,.10);
  background:rgba(10,3,22,.22);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
}
.faq-box details + details{margin-top:12px}
.faq-box summary{
  cursor:pointer;
  font-weight:900;
  color:rgba(245,240,255,.92);
  list-style:none;
  position:relative;
  padding-right:30px;
}
.faq-box summary::-webkit-details-marker{display:none}
.faq-box summary::after{
  content:"+";
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.92);
  background:linear-gradient(180deg, rgba(250,72,189,.20) 0%, rgba(160,83,213,.16) 100%);
  border:1px solid rgba(200,120,255,.16);
  box-shadow:0 0 14px rgba(250,72,189,.10);
  font-weight:900;
}
.faq-box details[open] summary::after{content:"–"}
.faq-box p{margin:10px 0 0; color:rgba(235,228,255,.72); line-height:1.55; font-size:14px}

/* ===== Footer ===== */
.footer{
  padding:24px 0 30px;
  border-top:1px solid rgba(200,120,255,.10);
  background:rgba(8,2,20,.28);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  position:relative;
}
.footer::before{
  content:"";
  position:absolute;
  left:0;right:0;top:-1px;
  height:2px;
  background:linear-gradient(90deg, transparent 0%, rgba(160,83,213,.35) 35%, rgba(250,72,189,.35) 50%, rgba(160,83,213,.35) 65%, transparent 100%);
  filter:drop-shadow(0 0 10px rgba(250,72,189,.20)) drop-shadow(0 0 12px rgba(160,83,213,.18));
  opacity:.7;
}
.footer-inner{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.foot-links{display:flex; gap:18px; flex-wrap:wrap}
.foot-links a{
  text-decoration:none;
  color:rgba(235,228,255,.70);
  font-weight:800;
  font-size:13px;
  padding:6px 8px;
  border-radius:12px;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.foot-links a:hover{
  color:rgba(255,255,255,.92);
  background:rgba(200,120,255,.08);
  transform:translateY(-1px);
}

/* ===== Responsive ===== */
@media (max-width: 1280px){
  :root{
    --tfxBase:url("/assets/bg_base_gradient_2k.webp");
    --tfxNebula:url("/assets/bg_nebula_haze_2k.webp");
    --tfxStars:url("/assets/bg_starfield_2k.webp");
    --tfxCurvesSvg:url("/assets/bg_curves_overlay_2k.svg");
    --tfxCurvesPng:url("/assets/bg_curves_overlay_2k.webp");
    --tfxVignette:url("/assets/bg_vignette_2k.webp");
  }
}

@media (max-width: 1100px){
  h1{font-size:48px}
  h2{font-size:40px}
  .hero-grid{grid-template-columns:1fr; gap:22px}
  .price-card{max-width:560px}
  .video-grid{grid-template-columns:1fr; gap:18px}
  .free-grid{grid-template-columns:1fr; gap:20px}
  .cards-3{grid-template-columns:repeat(2, 1fr)}
}

@media (max-width: 768px){
  :root{--pad:18px}
  section{padding:54px 0}
  .hero{padding:70px 0 40px}
  h1{font-size:40px; letter-spacing:-.7px}
  h2{font-size:34px}
  h3{font-size:24px}

  .nav{display:none}

  .cards-3{grid-template-columns:1fr}
  .video-inner{aspect-ratio: 16 / 10}

  :root{
    --tfxBase:url("/assets/bg_base_gradient_mobile.webp");
    --tfxNebula:url("/assets/bg_nebula_haze_mobile.webp");
    --tfxStars:url("/assets/bg_starfield_mobile.webp");
    --tfxCurvesSvg:url("/assets/bg_curves_overlay_mobile.svg");
    --tfxCurvesPng:url("/assets/bg_curves_overlay_mobile.webp");
    --tfxVignette:url("/assets/bg_vignette_mobile.webp");
  }

  .tf-bg-stars{opacity:.20; animation-duration:110s}
  .tf-bg-curves--top{opacity:.66}
  .tf-bg-curves--bottom{opacity:.52}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

/* Scrollbar */
@supports (scrollbar-color: auto){
  *{scrollbar-width:thin; scrollbar-color: rgba(250,72,189,.35) rgba(10,3,22,.35)}
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(10,3,22,.35)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(250,72,189,.42), rgba(160,83,213,.38));
  border:2px solid rgba(10,3,22,.35);
  border-radius:999px;
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(250,72,189,.58), rgba(160,83,213,.52));
}

/* ===== Kostenlos-Seite (page) ===== */
.pill{
  display:inline-flex;
  width:max-content;
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  color:rgba(255,255,255,.92);
  border:1px solid rgba(200,120,255,.18);
  background:linear-gradient(180deg, rgba(250,72,189,.14) 0%, rgba(160,83,213,.10) 100%);
  box-shadow:0 0 18px rgba(250,72,189,.10);
  margin-bottom:14px;
}

.page-hero{padding:78px 0 44px}
.page-hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:42px;
  align-items:start;
}
.page-hero-left h1{margin-top:0}

.dl-card{
  padding:22px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(18,8,43,.66) 0%, rgba(10,3,22,.40) 100%);
  border:1px solid rgba(200,120,255,.22);
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset, 0 30px 90px rgba(0,0,0,.60);
  position:relative;
  overflow:hidden;
}
.dl-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(900px 360px at 18% 18%, rgba(250,72,189,.22) 0%, transparent 60%),
    radial-gradient(900px 360px at 78% 78%, rgba(160,83,213,.22) 0%, transparent 62%),
    linear-gradient(135deg, rgba(250,72,189,.16), rgba(192,82,237,.12), rgba(160,83,213,.14));
  filter:blur(12px);
  opacity:.75;
  z-index:-1;
}

.dl-card-top{display:flex; gap:12px; align-items:center; margin-bottom:14px}
.dl-meta-title{font-weight:900; font-size:16px; color:rgba(250,245,255,.96)}
.dl-meta-sub{margin-top:2px; font-size:12px; color:rgba(235,228,255,.66); font-weight:700}

.dl-card-mid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  margin:12px 0 16px;
}
.dl-stat{
  padding:10px 10px;
  border-radius:16px;
  background:rgba(10,3,22,.26);
  border:1px solid rgba(200,120,255,.12);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
}
.dl-stat-k{font-size:11px; font-weight:900; color:rgba(235,228,255,.60)}
.dl-stat-v{margin-top:4px; font-size:13px; font-weight:900; color:rgba(250,245,255,.92)}

.install{padding:58px 0 76px}
.install-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  margin-top:22px;
}
.install-steps{display:flex; flex-direction:column; gap:12px}
.step-card{
  display:flex;
  gap:14px;
  padding:16px 16px;
  border-radius:18px;
  background:rgba(10,3,22,.22);
  border:1px solid rgba(200,120,255,.12);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 18px 52px rgba(0,0,0,.45);
}
.step-nr{
  width:40px; height:40px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-weight:1000;
  color:#14061f;
  background:var(--grad);
  box-shadow:0 12px 30px rgba(250,72,189,.20), 0 0 18px rgba(160,83,213,.16);
  flex:0 0 auto;
}
.step-title{font-weight:900; color:rgba(250,245,255,.96)}
.step-text{margin-top:6px; font-size:13px; line-height:1.5; color:rgba(235,228,255,.70)}
.link{color:rgba(255,255,255,.92); font-weight:900; text-decoration:none}
.link:hover{text-decoration:underline}

.kbd{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  color:rgba(255,255,255,.92);
  border:1px solid rgba(200,120,255,.14);
  background:rgba(16,5,34,.35);
}

.install-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.install-side{display:flex; flex-direction:column; gap:12px}
.help-card{
  padding:16px 16px;
  border-radius:18px;
  background:rgba(10,3,22,.22);
  border:1px solid rgba(200,120,255,.12);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 18px 52px rgba(0,0,0,.45);
}
.help-title{font-weight:1000; color:rgba(250,245,255,.96); margin-bottom:10px}
.help-list{margin:0; padding-left:18px; color:rgba(235,228,255,.70); font-size:13px; line-height:1.55}
.help-list li + li{margin-top:8px}

/* Free-Card auf Landing noch etwas edler */
.free-card--cta{
  border-color:rgba(255,120,220,.18);
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset, 0 30px 90px rgba(0,0,0,.60), 0 0 26px rgba(250,72,189,.10);
}

@media (max-width: 1100px){
  .page-hero-grid{grid-template-columns:1fr; gap:18px}
  .install-grid{grid-template-columns:1fr}
  .dl-card-mid{grid-template-columns:1fr}
}

/* ===== Support ===== */
.support{padding:62px 0 72px}
.support-head{
  text-align:center;
  margin:0 auto 22px;
}
.support-head h3{
  margin:0;
  font-size:32px;
  font-weight:900;
  letter-spacing:-.3px;
}
.support-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:34px;
  align-items:start;
}
.support-left{padding-top:10px}

.support-card{padding:22px}

.support-stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  margin:10px 0 16px;
}

.support-stat{
  padding:10px 10px;
  border-radius:16px;
  background:rgba(10,3,22,.26);
  border:1px solid rgba(200,120,255,.12);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
}
.support-stat-k{font-size:11px; font-weight:900; color:rgba(235,228,255,.60)}
.support-stat-v{margin-top:4px; font-size:13px; font-weight:900; color:rgba(250,245,255,.92)}

@media (max-width: 1100px){
  .support-grid{grid-template-columns:1fr; gap:20px}
  .support-stats{grid-template-columns:1fr}
}

/* ===== Header refinements (match reference screenshot) ===== */
.topbar{
  background:linear-gradient(90deg,
    rgba(22,10,52,.72) 0%,
    rgba(10,3,22,.50) 52%,
    rgba(22,10,52,.72) 100%);
}
.topbar::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 140px at 18% 0%, rgba(250,72,189,.14) 0%, transparent 65%),
    radial-gradient(900px 140px at 82% 0%, rgba(160,83,213,.16) 0%, transparent 65%);
  opacity:.9;
}

.brand{gap:12px}
.brand-mark{
  width:56px;
  height:56px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden; /* wichtig fürs “voll ausfüllen” */
  background:linear-gradient(180deg, rgba(18,8,43,.50) 0%, rgba(10,3,22,.22) 100%);
  border:1px solid rgba(200,120,255,.20);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 12px 34px rgba(0,0,0,.45),
    0 0 18px rgba(250,72,189,.14),
    0 0 18px rgba(160,83,213,.14);
}
.brand-mark .brand-logo{
  width:100%;
  height:100%;
  display:block;
  padding:0;                 /* vorher hat das alles kleiner gemacht */
  object-fit:cover;          /* füllt den Kasten */
  transform:scale(1.12);     /* kompensiert “leere Ränder” im PNG */
  transform-origin:center;
  filter:drop-shadow(0 0 12px rgba(250,72,189,.22)) drop-shadow(0 0 14px rgba(160,83,213,.20));
}

.topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.btn-header{
  padding:11px 14px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(40,18,80,.58) 0%, rgba(14,5,32,.32) 100%);
  backdrop-filter:blur(10px);
  color:rgba(245,240,255,.92);
  border:1px solid rgba(200,120,255,.22);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 10px 28px rgba(0,0,0,.42);
}
.btn-header:hover{
  transform:translateY(-1px);
  border-color:rgba(250,72,189,.24);
  background:linear-gradient(180deg, rgba(26,12,56,.60) 0%, rgba(10,3,22,.26) 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07) inset,
    0 16px 44px rgba(0,0,0,.48),
    0 0 18px rgba(250,72,189,.12),
    0 0 18px rgba(160,83,213,.12);
}

@media (max-width: 768px){
  .topbar-actions{gap:8px}
  .btn-header{padding:10px 12px; font-size:13px}
  .brand-mark{width:44px;height:44px}
  .brand-mark .brand-logo{
    width:100%;
    height:100%;
    padding:0;
    object-fit:cover;
    transform:scale(1.12);
  }
}

/* ===== Footer buttons unify ===== */
.btn-footer{
  padding:11px 14px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(40,18,80,.58) 0%, rgba(14,5,32,.32) 100%);
  color:rgba(245,240,255,.92);
  border:1px solid rgba(200,120,255,.22);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 10px 28px rgba(0,0,0,.42);
}
.btn-footer:hover{
  transform:translateY(-1px);
  border-color:rgba(250,72,189,.24);
  background:linear-gradient(180deg, rgba(52,22,98,.66) 0%, rgba(14,5,32,.36) 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07) inset,
    0 16px 44px rgba(0,0,0,.48),
    0 0 18px rgba(250,72,189,.12),
    0 0 18px rgba(160,83,213,.12);
}

/* ===== Admin Dashboard (AAA polish) ===== */
/* scope: only admin page */
.admin-page .nav{ display:none !important; }
.admin-page .topbar-inner{ gap:14px; }

.admin-page .admin-hero{ padding:38px 0 64px; }
.admin-page .admin-layout{ display:grid; align-items:start; grid-template-columns: 284px 1fr; gap:22px; max-width:1220px; }

/* Sidebar */
.admin-page .admin-side{
  position:sticky;
  top:92px;
  border-radius:22px;
  padding:14px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(24, 10, 55, .58) 0%, rgba(10, 3, 22, .40) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 22px 70px rgba(0,0,0,.55);
  overflow:hidden;
}
.admin-page .admin-side::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(620px 240px at 22% 12%, rgba(250,72,189,.22) 0%, transparent 60%),
    radial-gradient(520px 260px at 70% 78%, rgba(160,83,213,.22) 0%, transparent 62%),
    linear-gradient(135deg, rgba(250,72,189,.12), rgba(192,82,237,.10), rgba(160,83,213,.12));
  filter:blur(14px);
  opacity:.85;
  z-index:0;
}
.admin-page .admin-side-top{ position:relative; z-index:1; display:flex; flex-direction:column; gap:10px; }
.admin-page .admin-side-bottom{ position:relative; z-index:1; margin-top:14px; }

.admin-page .admin-user-pill{
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  font-size:13px;
  color:rgba(245,240,255,.88);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;
}
.admin-page .admin-user-pill strong{ color:rgba(255,255,255,.95); }

/* Sidebar nav buttons (with icons) */
.admin-page .admin-nav-btn{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  width:100%;
  padding:11px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.14);
  color:rgba(245,240,255,.92);
  cursor:pointer;
  font-weight:800;
  letter-spacing:.2px;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.admin-page .admin-nav-btn::before{
  content:"";
  width:18px;
  height:18px;
  flex:0 0 auto;
  opacity:.92;
  background-repeat:no-repeat;
  background-size:18px 18px;
  background-position:center;
  filter:drop-shadow(0 0 10px rgba(250,72,189,.18));
}
.admin-page .admin-nav-btn:hover{
  transform:translateY(-1px);
  border-color: rgba(200,120,255,.28);
  background:rgba(255,255,255,.04);
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset, 0 14px 34px rgba(0,0,0,.45);
}
.admin-page .admin-nav-btn.is-active{
  background:rgba(255,255,255,.06);
  border-color: rgba(250,72,189,.26);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 14px 40px rgba(0,0,0,.48),
    0 0 26px rgba(250,72,189,.10),
    0 0 26px rgba(160,83,213,.10);
}
.admin-page .admin-nav-btn.is-active::after{
  content:"";
  position:absolute;
  left:8px; top:50%;
  transform:translateY(-50%);
  width:4px; height:22px;
  border-radius:999px;
  background:var(--grad);
  box-shadow:0 0 14px rgba(250,72,189,.22), 0 0 14px rgba(160,83,213,.20);
}

.admin-page .admin-nav-btn[data-view="dashboard"]::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23fff%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%223%22%20width=%228%22%20height=%228%22%20rx=%222%22/%3E%3Crect%20x=%2213%22%20y=%223%22%20width=%228%22%20height=%225%22%20rx=%222%22/%3E%3Crect%20x=%2213%22%20y=%2210%22%20width=%228%22%20height=%2211%22%20rx=%222%22/%3E%3Crect%20x=%223%22%20y=%2213%22%20width=%228%22%20height=%228%22%20rx=%222%22/%3E%3C/svg%3E"); }
.admin-page .admin-nav-btn[data-view="analytics"]::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23fff%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%203v18h18%22/%3E%3Cpath%20d=%22M7%2014l4-4%203%203%206-7%22/%3E%3C/svg%3E"); }
.admin-page .admin-nav-btn[data-view="users"]::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23fff%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx=%229%22%20cy=%227%22%20r=%224%22/%3E%3Cpath%20d=%22M22%2021v-2a4%204%200%200%200-3-3.87%22/%3E%3Cpath%20d=%22M16%203.13a4%204%200%200%201%200%207.75%22/%3E%3C/svg%3E"); }
.admin-page .admin-nav-btn[data-view="referrals"]::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23fff%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M10%2013a5%205%200%200%200%207.07%200l2.83-2.83a5%205%200%200%200-7.07-7.07L13.5%204.43%22/%3E%3Cpath%20d=%22M14%2011a5%205%200%200%200-7.07%200L4.1%2013.83a5%205%200%200%200%207.07%207.07L12.5%2019.57%22/%3E%3C/svg%3E"); }

/* Main surface */
.admin-page .admin-main{
  position:relative;
  min-height: 520px;
  border-radius:22px;
  padding:18px 18px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(0,0,0,.10) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 28px 90px rgba(0,0,0,.55);
}
.admin-page .admin-view h1,
.admin-page .admin-view h2{
  margin:0 0 10px;
  letter-spacing:-.4px;
}
.admin-page .admin-view h1{ font-size:40px; }
.admin-page .admin-view h2{ font-size:32px; }
.admin-page .admin-view .sub{ margin-top:0; }

/* KPI cards */
.admin-page .admin-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-top:14px;
}
.admin-page .admin-card{
  position:relative;
  border-radius:20px;
  padding:16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(18,8,43,.50) 0%, rgba(10,3,22,.32) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 18px 60px rgba(0,0,0,.50);
  overflow:hidden;
}
.admin-page .admin-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(520px 220px at 18% 12%, rgba(250,72,189,.16) 0%, transparent 60%),
    radial-gradient(520px 240px at 80% 85%, rgba(160,83,213,.14) 0%, transparent 62%);
  filter:blur(12px);
  opacity:.75;
  z-index:0;
}
.admin-page .admin-card > *{ position:relative; z-index:1; }

.admin-page .admin-card.kpi{ padding:18px 18px 16px; }
.admin-page .admin-card.kpi::before{
  content:"";
  position:absolute;
  top:14px; right:14px;
  width:44px; height:44px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(80px 60px at 30% 20%, rgba(255,255,255,.18) 0%, transparent 60%),
    linear-gradient(180deg, rgba(250,72,189,.20) 0%, rgba(160,83,213,.18) 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 16px 44px rgba(0,0,0,.50),
    0 0 22px rgba(250,72,189,.12);
  background-repeat:no-repeat;
  background-position:center;
  background-size:20px 20px;
  z-index:2;
}

.admin-page .admin-card.kpi-users::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23fff%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx=%229%22%20cy=%227%22%20r=%224%22/%3E%3Cpath%20d=%22M22%2021v-2a4%204%200%200%200-3-3.87%22/%3E%3Cpath%20d=%22M16%203.13a4%204%200%200%201%200%207.75%22/%3E%3C/svg%3E"); }
.admin-page .admin-card.kpi-sales::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23fff%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2020V10%22/%3E%3Cpath%20d=%22M18%2020V4%22/%3E%3Cpath%20d=%22M6%2020v-6%22/%3E%3C/svg%3E"); }
.admin-page .admin-card.kpi-revenue::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23fff%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%201v22%22/%3E%3Cpath%20d=%22M17%205H9.5a3.5%203.5%200%200%200%200%207H14a3.5%203.5%200%200%201%200%207H6%22/%3E%3C/svg%3E"); }

.admin-page .admin-kpi{
  font-size:38px;
  font-weight:950;
  letter-spacing:-.6px;
  margin-top:6px;
  text-shadow:0 0 22px rgba(192,82,237,.10);
}

.admin-page .mini{ margin:10px 0 0; }
.admin-page .mini.muted{ color:rgba(235,228,255,.64); }

/* Charts */
.admin-page .admin-charts{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
  margin-top:14px;
}
.admin-page .admin-card.chart{ padding:16px 16px 14px; }
.admin-page .admin-canvas{
  width:100%;
  height:240px;
  display:block;
  margin-top:10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(700px 260px at 30% 0%, rgba(250,72,189,.10) 0%, transparent 55%),
    radial-gradient(700px 260px at 85% 100%, rgba(160,83,213,.10) 0%, transparent 60%),
    rgba(0,0,0,.16);
}

/* Inputs */
.admin-page .input{
  width:100%;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.16);
  color:rgba(245,240,255,.92);
  outline:none;
  font-weight:700;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.admin-page .input::placeholder{ color:rgba(235,228,255,.55); font-weight:700; }
.admin-page .input:focus{
  border-color:rgba(250,72,189,.28);
  box-shadow:0 0 0 3px rgba(250,72,189,.10), 0 0 0 1px rgba(255,255,255,.04) inset;
  background:rgba(0,0,0,.20);
}
.admin-page .admin-ref-form{ display:flex; gap:10px; margin-top:12px; align-items:center; }
.admin-page .admin-ref-form .btn{ flex:0 0 auto; }

/* Tables */
.admin-page .admin-table-wrap{
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.14);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset, 0 18px 60px rgba(0,0,0,.45);
}
.admin-page .admin-table-wrap--mt{ margin-top:12px; }

.admin-page table.admin-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:720px;
}
.admin-page table.admin-table--referrals{ min-width:900px; }

.admin-page table.admin-table thead th{
  position:sticky;
  top:0;
  text-align:left;
  padding:12px 14px;
  font-size:12px;
  letter-spacing:.22px;
  text-transform:uppercase;
  color:rgba(235,228,255,.72);
  background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(0,0,0,.08) 100%);
  border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.admin-page table.admin-table tbody td{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:rgba(245,240,255,.90);
  font-weight:650;
}
.admin-page table.admin-table tbody tr:nth-child(2n) td{ background:rgba(255,255,255,.02); }
.admin-page table.admin-table tbody tr:hover td{ background:rgba(250,72,189,.06); }

/* Top pill in header */
.admin-page .admin-top-pill{
  font-size:13px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;
}

/* Small buttons */
.admin-page .btn-sm{ padding:8px 10px; border-radius:12px; font-size:13px; }

/* Responsive */
@media (max-width: 980px){
  .admin-page .admin-layout{ display:grid; align-items:start; grid-template-columns: 1fr; }
  .admin-page .admin-side{ position:relative; top:auto; }
  .admin-page .admin-cards{ grid-template-columns: 1fr; }
  .admin-page .admin-charts{ grid-template-columns: 1fr; }
  .admin-page table.admin-table{ min-width:640px; }
}

/* =========================================================
   TalkFlowX FINAL POLISH — Header + Buttons + Animated Glow
   ========================================================= */

/* --- Header: mehr Platz als der Rest der Seite (Brand weiter links) --- */
.topbar .container{
  width:min(1400px, calc(100% - 32px));
}

/* --- Header Layout: 3 Spalten, kein Wrap, kein Overlap --- */
header.topbar .topbar-inner{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto; /* Brand | Nav | Actions */
  align-items:center;
  gap:16px;
  padding:12px 0;
}

/* Brand etwas “linker” wirken lassen */
header.topbar .brand{ justify-self:start; }

/* Nav: IMMER eine Zeile, nie wrap (das war dein Bug) */
header.topbar .nav{
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  flex-wrap:nowrap !important;      /* überschreibt .nav{flex-wrap:wrap;} */
  white-space:nowrap;
  min-width:0;
}

/* Nav Links etwas kompakter (damit es wirklich passt) */
header.topbar .nav a{
  font-size:13px;
  padding:7px 8px;
}

/* Actions rechts: immer 1 Reihe, mit sauberem Abstand */
header.topbar .topbar-actions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  white-space:nowrap;
}

/* Header Buttons kompakter (damit Webstore nicht alles sprengt) */
header.topbar .btn-header{
  padding:10px 12px;
  font-size:13px;
}

/* Webstore-Button: darf breiter sein, aber nicht Layout killen */
header.topbar .topbar-actions a[data-webstore]{
  max-width:360px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Responsive: ab hier darf Nav unter den Header (ohne Overlap) */
@media (max-width: 1180px){
  header.topbar .topbar-inner{
    grid-template-columns:auto auto;
    grid-template-rows:auto auto;
    gap:12px;
  }

  header.topbar .nav{
    grid-column:1 / -1;
    justify-content:center;
    margin-top:8px;
  }

  header.topbar .topbar-actions{
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  header.topbar .topbar-actions a[data-webstore]{
    max-width:none;
    overflow:visible;
    text-overflow:clip;
  }
}

/* ---------------------------------------------------------
   Buttons: moderner (Shine + Glow + smooth)
   --------------------------------------------------------- */
.btn{
  position:relative;
  overflow:hidden;
  transform:translateZ(0);
  will-change:transform, box-shadow, filter;
}

/* Subtle highlight layer */
.btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(120px 60px at 20% 20%, rgba(255,255,255,.20) 0%, transparent 55%),
    radial-gradient(140px 70px at 80% 80%, rgba(255,255,255,.10) 0%, transparent 60%);
  transition:opacity .22s ease;
  mix-blend-mode:soft-light;
}

/* Shine sweep */
.btn::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:70%;
  height:180%;
  pointer-events:none;
  opacity:.0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 18%, transparent 38%);
  transform:translateX(0) rotate(8deg);
  transition:opacity .18s ease, transform .55s cubic-bezier(.2,.8,.2,1);
  mix-blend-mode:soft-light;
}

.btn:hover{
  transform:translateY(-1px);
  filter:saturate(1.06);
}

.btn:hover::before{ opacity:1; }
.btn:hover::after{
  opacity:1;
  transform:translateX(220%) rotate(8deg);
}

.btn:active{ transform:translateY(1px) scale(.99); }

/* Tastatur-Fokus (Premium + accessibility) */
.btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(250,72,189,.18),
    0 0 0 1px rgba(255,255,255,.06) inset;
}

/* Primary bekommt “alive glow” (sehr subtil) */
.btn-primary{
  position:relative;
}
.btn-primary::before{
  opacity:.55;
}
.btn-primary:hover{
  box-shadow:
    0 22px 56px rgba(250,72,189,.28),
    0 20px 62px rgba(160,83,213,.24),
    0 0 28px rgba(250,72,189,.18),
    0 0 0 1px rgba(255,255,255,.10) inset;
}

/* ---------------------------------------------------------
   Cards: animated glow + hover polish (Markenfarben bleiben)
   --------------------------------------------------------- */

/* Leicht “lift” bei Hover */
.price-card:hover,
.card:hover,
.video-frame:hover,
.faq-box:hover,
.accordion-box:hover,
.free-card:hover,
.step-card:hover,
.dl-card:hover{
  transform:translateY(-2px);
  border-color:rgba(250,72,189,.20);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 34px 96px rgba(0,0,0,.60);
}

/* Glow-Overlays driften/pulsieren */
.price-card::before,
.video-frame::after,
.free-card::after,
.dl-card::after,
.guide-cards .card::after,
.admin-page .admin-card::after,
.admin-page .admin-side::before{
  will-change:transform, opacity;
  animation:tfxGlowDrift 9s ease-in-out infinite;
}

@keyframes tfxGlowDrift{
  0%,100%{ transform:translate3d(0,0,0) scale(1); opacity:.70; }
  50%{ transform:translate3d(0,-10px,0) scale(1.03); opacity:.92; }
}

/* Reduced motion respektieren */
@media (prefers-reduced-motion: reduce){
  .btn::after,
  .price-card::before,
  .video-frame::after,
  .free-card::after,
  .dl-card::after,
  .guide-cards .card::after,
  .admin-page .admin-card::after,
  .admin-page .admin-side::before{
    animation:none !important;
  }
}

/* FIX: Divider-Lines immer über volle Breite, auch wenn sie in einem Grid stecken */
.hero-line,
.section-line{
  grid-column: 1 / -1;   /* spannt über alle Grid-Spalten */
  justify-self: stretch; /* füllt die volle Grid-Breite */
}