/* ============================================================
   Billetti – Premium-Marken-Theme (nur billetti/*; nach site.css)
   Palette (App): Lavender #CCB8ED · Pink #FFBDD9 · Coral #FF9E8C
   · Gelb #FFE88C · Lime #DDFF55 / #C4E838. Display-Font: Sora.
   Überschreibt den Creme-Look gezielt – site.css bleibt unangetastet.
   ============================================================ */
:root{
  --bl-lav:#CCB8ED; --bl-pink:#FFBDD9; --bl-coral:#FF9E8C; --bl-yellow:#FFE88C;
  --bl-lime:#DDFF55; --bl-lime-ink:#8FB300;
  --bl-ink:#191723; --bl-muted:#5b5566;
  --bl-plum:#5a2e7a;
  --bl-ease:cubic-bezier(.22,1,.36,1);
  --bl-shadow:0 30px 70px -28px rgba(60,30,80,.32);
  --bl-shadow-sm:0 10px 26px -14px rgba(60,30,80,.24);
}

/* ---------- Grund: Aurora + feiner Grain, fix hinter allem ---------- */
body{background:#FBFAFF;color:var(--bl-ink)}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(58rem 42rem at 6% -8%,  rgba(204,184,237,.60), transparent 60%),
    radial-gradient(52rem 40rem at 102% 0%, rgba(255,189,217,.55), transparent 58%),
    radial-gradient(56rem 46rem at 96% 104%, rgba(255,158,140,.40), transparent 56%),
    radial-gradient(48rem 42rem at -6% 104%, rgba(255,232,140,.48), transparent 58%),
    radial-gradient(40rem 30rem at 50% 44%,  rgba(221,255,85,.16), transparent 64%),
    #FBFAFF;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Header / Footer: frosted weiß ---------- */
.site-header{background:rgba(255,255,255,.66)!important;-webkit-backdrop-filter:saturate(1.3) blur(16px);backdrop-filter:saturate(1.3) blur(16px);border-bottom:1px solid rgba(90,46,122,.08)}
.nav-links a:hover{color:var(--bl-plum)}
.site-footer{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid rgba(204,184,237,.4)}

/* ---------- Bausteine ---------- */
section[id]{scroll-margin-top:84px}
.bil-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:700;letter-spacing:.02em;
  color:var(--bl-plum);background:rgba(255,255,255,.7);border:1px solid rgba(90,46,122,.14);
  padding:.4rem .85rem;border-radius:999px;box-shadow:var(--bl-shadow-sm);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.bil-eyebrow .dot{width:.5rem;height:.5rem;border-radius:50%;background:linear-gradient(135deg,var(--bl-coral),var(--bl-pink))}
.bil-sec-head{text-align:center;max-width:44rem;margin:0 auto 2.6rem}
.bil-sec-head .lbl{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--bl-plum)}
.bil-sec-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.08;letter-spacing:-.02em;margin:.5rem 0 .6rem}
.bil-sec-head p{color:var(--bl-muted);font-size:1.05rem;line-height:1.6}

/* ---------- Buttons ---------- */
.bil-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font-weight:650;font-size:1rem;
  padding:.9rem 1.5rem;border-radius:999px;text-decoration:none;position:relative;overflow:hidden;
  transition:transform .16s var(--bl-ease),box-shadow .16s var(--bl-ease),filter .16s}
.bil-btn.primary{background:linear-gradient(135deg,#2a2536,#141019);color:#fff;box-shadow:0 14px 34px -12px rgba(20,16,25,.6)}
.bil-btn.primary:hover{transform:translateY(-2px);box-shadow:0 20px 44px -12px rgba(20,16,25,.7)}
.bil-btn.primary::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);transition:left .6s var(--bl-ease)}
.bil-btn.primary:hover::after{left:150%}
.bil-btn.ghost{background:rgba(255,255,255,.72);color:var(--bl-plum);border:1.5px solid rgba(90,46,122,.2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.bil-btn.ghost:hover{transform:translateY(-2px);border-color:var(--bl-lav);box-shadow:var(--bl-shadow-sm)}
.bil-btn svg{width:1.15rem;height:1.15rem;flex:none}

/* ---------- Hero ---------- */
.bil-hero{text-align:center;padding:3.4rem 0 2rem;position:relative}
.bil-hero h1{font-size:clamp(2.6rem,6.2vw,4.7rem);line-height:1.02;letter-spacing:-.035em;font-weight:620;margin:1.1rem 0 0}
.bil-hero .grad{background:linear-gradient(100deg,var(--bl-plum),var(--bl-coral),var(--bl-plum));background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:blHue 8s ease-in-out infinite}
@keyframes blHue{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
.bil-hero .lead{max-width:40rem;margin:1.3rem auto 0;font-size:1.2rem;line-height:1.65;color:var(--bl-muted)}
.bil-cta{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap;margin:1.9rem 0 1.1rem}
.bil-meta{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;color:var(--bl-muted);font-weight:600;font-size:.92rem}
.bil-meta span{display:inline-flex;align-items:center;gap:.4rem}
.bil-meta svg{width:1.05rem;height:1.05rem;color:#3aa07a}

/* ---------- Showcase: wischbare Scroll-Galerie mit Randabblendung ---------- */
.bil-showcase{padding:1.4rem 0 3.8rem}
.bil-shots{display:flex;gap:1.7rem;overflow-x:auto;overflow-y:visible;
  padding-block:2.2rem 2.6rem;
  padding-inline:max(1.5rem,calc((100% - var(--maxw))/2 + 1.5rem));  /* Inhalt auf 1080-Spalte, Scroll in die Ränder */
  scroll-snap-type:x proximity;scrollbar-width:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.bil-shots::-webkit-scrollbar{display:none}
.bil-shots img{flex:0 0 auto;width:clamp(210px,23vw,268px);border-radius:28px;background:#fff;scroll-snap-align:center;
  box-shadow:0 34px 64px -26px rgba(60,30,80,.42), 0 0 0 1px rgba(90,46,122,.05);
  transition:transform .3s var(--bl-ease),box-shadow .3s var(--bl-ease)}
.bil-shots img:nth-child(even){transform:translateY(20px)}
.bil-shots img:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 46px 84px -28px rgba(60,30,80,.52)}
.bil-shots img:nth-child(even):hover{transform:translateY(12px) scale(1.03)}

/* ---------- Trust-Strip ---------- */
.bil-trust{background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-top:1px solid rgba(90,46,122,.08);border-bottom:1px solid rgba(90,46,122,.08)}
.bil-trust-row{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;padding:1.15rem 0;
  color:var(--bl-muted);font-weight:650;font-size:.94rem}
.bil-trust-row span{display:inline-flex;align-items:center;gap:.5rem}
.bil-trust-row svg{width:1.1rem;height:1.1rem;color:var(--bl-plum)}

/* ---------- Sektionen allgemein ---------- */
.bil-section{padding:4.6rem 0}

/* ---------- Feature-Karten (mit Icon, rotierende Palette) ---------- */
.bil-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.15rem}
.bil-card{position:relative;padding:1.6rem;border-radius:24px;background:#fff;border:1px solid rgba(25,23,35,.06);
  box-shadow:0 10px 26px -18px rgba(60,30,80,.3);overflow:hidden;
  transition:transform .18s var(--bl-ease),box-shadow .18s var(--bl-ease)}
.bil-card:hover{transform:translateY(-6px);box-shadow:var(--bl-shadow)}
.bil-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px}
.bil-ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:1rem;color:#3a2b52}
.bil-ico svg{width:26px;height:26px}
.bil-card h3{font-size:1.14rem;margin:0 0 .35rem;letter-spacing:-.01em}
.bil-card p{color:var(--bl-muted);font-size:.97rem;line-height:1.55}
/* Palette rotierend (5er-Zyklus) */
.bil-grid .bil-card:nth-of-type(5n+1){background:linear-gradient(180deg,#F5F0FD,#fff 46%)} .bil-grid .bil-card:nth-of-type(5n+1)::before{background:var(--bl-lav)} .bil-grid .bil-card:nth-of-type(5n+1) .bil-ico{background:linear-gradient(135deg,#E7DBFA,#D3BEF0)}
.bil-grid .bil-card:nth-of-type(5n+2){background:linear-gradient(180deg,#FFF1F7,#fff 46%)} .bil-grid .bil-card:nth-of-type(5n+2)::before{background:var(--bl-pink)} .bil-grid .bil-card:nth-of-type(5n+2) .bil-ico{background:linear-gradient(135deg,#FFE0EC,#FFC7DD)}
.bil-grid .bil-card:nth-of-type(5n+3){background:linear-gradient(180deg,#FFF2ED,#fff 46%)} .bil-grid .bil-card:nth-of-type(5n+3)::before{background:var(--bl-coral)} .bil-grid .bil-card:nth-of-type(5n+3) .bil-ico{background:linear-gradient(135deg,#FFE1D8,#FFC4B4)}
.bil-grid .bil-card:nth-of-type(5n+4){background:linear-gradient(180deg,#FFFAE8,#fff 46%)} .bil-grid .bil-card:nth-of-type(5n+4)::before{background:var(--bl-yellow)} .bil-grid .bil-card:nth-of-type(5n+4) .bil-ico{background:linear-gradient(135deg,#FFF3CE,#FFE79E)}
.bil-grid .bil-card:nth-of-type(5n+5){background:linear-gradient(180deg,#F7FFDD,#fff 46%)} .bil-grid .bil-card:nth-of-type(5n+5)::before{background:var(--bl-lime)} .bil-grid .bil-card:nth-of-type(5n+5) .bil-ico{background:linear-gradient(135deg,#EEFFB0,#DDFF66)}

/* ---------- GiroCode-Spotlight ---------- */
.bil-spot-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:2.4rem;align-items:center;
  background:linear-gradient(140deg,#241d33,#3a2456 60%,#5a2e7a);color:#fff;border-radius:32px;padding:3rem;overflow:hidden;position:relative;
  box-shadow:0 44px 90px -34px rgba(40,20,70,.6)}
.bil-spot-inner::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 70% at 88% 8%,rgba(255,189,217,.35),transparent 60%),radial-gradient(46% 60% at 6% 100%,rgba(221,255,85,.2),transparent 60%)}
.bil-spot-inner > *{position:relative;z-index:1}
.bil-spot-inner .lbl{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:#FFC7DD}
.bil-spot-inner h2{color:#fff;font-size:clamp(1.7rem,2.8vw,2.3rem);line-height:1.1;letter-spacing:-.02em;margin:.5rem 0 .8rem}
.bil-spot-inner p{color:rgba(255,255,255,.82);font-size:1.06rem;line-height:1.6}
.bil-spot-visual{justify-self:center;background:#fff;border-radius:24px;padding:1.4rem;box-shadow:0 30px 60px -20px rgba(0,0,0,.5);width:min(260px,72vw)}
.bil-spot-visual .qr{width:100%;aspect-ratio:1;display:block}
.bil-spot-visual .cap{color:var(--bl-ink);text-align:center;font-weight:700;font-size:.9rem;margin-top:.8rem}
.bil-spot-visual .cap small{display:block;color:var(--bl-muted);font-weight:500;font-size:.8rem;margin-top:.15rem}

/* ---------- Postversand-Spotlight (heller Glas-Zwilling des GiroCode-Panels) ---------- */
.bil-post-inner{display:grid;grid-template-columns:.98fr 1.02fr;gap:2.4rem;align-items:center;
  background:linear-gradient(140deg,rgba(255,255,255,.9),rgba(250,246,255,.74));
  -webkit-backdrop-filter:saturate(1.3) blur(18px);backdrop-filter:saturate(1.3) blur(18px);
  border:1px solid rgba(90,46,122,.12);border-radius:32px;padding:3rem;overflow:hidden;position:relative;box-shadow:var(--bl-shadow)}
.bil-post-inner::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 60% at 92% 6%,rgba(255,158,140,.18),transparent 60%),radial-gradient(42% 56% at 4% 100%,rgba(221,255,85,.16),transparent 60%)}
.bil-post-inner > *{position:relative;z-index:1}
.bil-post-copy .lbl{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--bl-plum);margin:0}
.bil-post-copy h2{font-size:clamp(1.7rem,2.8vw,2.3rem);line-height:1.1;letter-spacing:-.02em;margin:.5rem 0 .7rem;color:var(--bl-ink)}
.bil-post-copy > p{color:var(--bl-muted);font-size:1.04rem;line-height:1.62;margin:0}
/* Status-Pill (umschaltbar) */
.bil-status{display:inline-flex;align-items:center;gap:.45rem;font-size:.74rem;font-weight:800;letter-spacing:.03em;color:var(--bl-plum);
  background:rgba(255,255,255,.82);border:1px solid rgba(90,46,122,.16);padding:.32rem .72rem;border-radius:999px;box-shadow:var(--bl-shadow-sm);margin-bottom:.9rem}
.bil-status .dot{width:.5rem;height:.5rem;border-radius:50%;background:linear-gradient(135deg,var(--bl-coral),var(--bl-pink))}
/* 3-Schritt-Strip */
.bil-steps{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.3rem 0 0}
.bil-step{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:650;color:var(--bl-ink);
  background:rgba(255,255,255,.66);border:1px solid rgba(90,46,122,.12);border-radius:12px;padding:.42rem .7rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.bil-step b{display:grid;place-items:center;width:1.35rem;height:1.35rem;border-radius:50%;font-size:.75rem;font-weight:800;color:#3a1526;background:linear-gradient(135deg,var(--bl-lav),var(--bl-pink))}
/* Options-Chips */
.bil-optchips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.85rem 0 0}
.bil-optchip{font-size:.82rem;font-weight:600;color:var(--bl-muted);background:rgba(255,255,255,.6);border:1px solid rgba(90,46,122,.12);border-radius:999px;padding:.34rem .8rem}
.bil-optchip.on{color:#7a3b28;border-color:rgba(255,158,140,.7);background:rgba(255,158,140,.14)}
/* CTA-Reihe */
.bil-post-cta{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin:1.5rem 0 0}
.bil-btn.primary.is-soon{background:linear-gradient(135deg,#6a6475,#443c52);cursor:default;box-shadow:var(--bl-shadow-sm)}
.bil-btn.primary.is-soon::after{display:none}
/* Kuvert-Mockup */
.bil-post-visual{justify-self:center;width:min(430px,92%)}
.bil-post-visual svg{width:100%;height:auto;display:block;overflow:visible}
.bil-post-paper{transform-box:fill-box;transform-origin:center;animation:bilFloat 4.6s var(--bl-ease) infinite}
@keyframes bilFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* Micro-Trust-Streifen unter dem Panel */
.bil-post-trust{display:flex;flex-wrap:wrap;gap:1.1rem 1.8rem;justify-content:center;margin:1.7rem auto 0;color:var(--bl-muted);font-weight:650;font-size:.9rem}
.bil-post-trust span{display:inline-flex;align-items:center;gap:.5rem}
.bil-post-trust svg{width:1.05rem;height:1.05rem;color:var(--bl-plum);flex:none}
/* Verfügbarkeits-Umschalter (rein CSS, kein JS) */
[data-status="soon"] .when-live{display:none}
[data-status="live"] .when-soon{display:none}

/* ---------- Preise ---------- */
.bil-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem;align-items:stretch;max-width:56rem;margin:0 auto}
.bil-tier{position:relative;padding:1.9rem 1.6rem;border-radius:24px;background:#fff;border:1px solid rgba(25,23,35,.08);text-align:center;
  box-shadow:0 10px 26px -18px rgba(60,30,80,.3);transition:transform .18s var(--bl-ease),box-shadow .18s var(--bl-ease)}
.bil-tier:hover{transform:translateY(-5px);box-shadow:var(--bl-shadow)}
.bil-tier .plan{font-weight:700;color:var(--bl-muted);letter-spacing:.02em}
.bil-tier .price{font-family:var(--serif);font-size:2.2rem;font-weight:640;letter-spacing:-.02em;margin:.5rem 0 .1rem}
.bil-tier .price span{font-size:.9rem;font-weight:500;color:var(--bl-muted)}
.bil-tier .note{color:var(--bl-muted);font-size:.9rem;margin-top:.5rem}
.bil-tier.featured{border:2px solid var(--bl-lav);transform:scale(1.045);
  background:linear-gradient(180deg,#FAF6FF,#fff 48%);box-shadow:0 26px 60px -24px rgba(90,46,122,.5)}
.bil-tier.featured:hover{transform:scale(1.045) translateY(-5px)}
.bil-tier.featured .price{background:linear-gradient(90deg,var(--bl-plum),var(--bl-coral));-webkit-background-clip:text;background-clip:text;color:transparent}
.bil-tier .badge{position:absolute;top:-.85rem;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:linear-gradient(135deg,var(--bl-coral),var(--bl-pink));color:#3a1526;font-size:.72rem;font-weight:800;letter-spacing:.02em;
  padding:.35rem .9rem;border-radius:999px;box-shadow:0 10px 22px -8px rgba(255,120,150,.7)}
.bil-incl{display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem;color:var(--bl-muted);font-weight:600;font-size:.95rem}
.bil-incl span{display:inline-flex;align-items:center;gap:.45rem}
.bil-incl svg{width:1.05rem;height:1.05rem;color:var(--bl-plum)}
.bil-fineprint{max-width:44rem;margin:1.6rem auto 0;text-align:center;color:var(--bl-muted);font-size:.86rem;line-height:1.55}

/* ---------- Final CTA ---------- */
.bil-final{position:relative;overflow:hidden;text-align:center;border-radius:32px;padding:4rem 1.6rem;
  background:linear-gradient(135deg,#CCB8ED,#FFBDD9 45%,#FF9E8C);box-shadow:0 44px 90px -34px rgba(150,80,120,.55)}
.bil-final::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.bil-final > *{position:relative;z-index:1}
.bil-final .lbl{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:rgba(40,20,50,.65)}
.bil-final h2{color:#221830;font-size:clamp(2rem,4vw,3rem);line-height:1.05;letter-spacing:-.025em;margin:.5rem 0 .6rem}
.bil-final p{color:rgba(40,25,50,.78);font-size:1.1rem;max-width:34rem;margin:0 auto 1.6rem}
.bil-final .bil-btn.primary{box-shadow:0 16px 40px -12px rgba(20,16,25,.55)}

/* ---------- Scroll-Reveal (JS-gated; ohne JS alles sichtbar) ----------
   Nutzt die eigenständige `translate`-Property (NICHT transform), damit
   Elemente mit eigenem transform (Featured-Skalierung, Poster-Versatz)
   nicht überschrieben werden – sie komponieren sauber. */
html.js .bl-reveal{opacity:0;translate:0 26px;transition:opacity .7s var(--bl-ease),translate .7s var(--bl-ease)}
html.js .bl-reveal.in{opacity:1;translate:0 0}

@media (prefers-reduced-motion:reduce){
  html.js .bl-reveal{opacity:1!important;translate:none!important;transition:none}
  .bil-hero .grad,.bil-btn.primary::after{animation:none!important}
  .bil-shots img{transition:none}
  .bil-post-paper{animation:none}
}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .bil-spot-inner{grid-template-columns:1fr;text-align:center;padding:2.2rem 1.5rem;gap:1.6rem}
  .bil-spot-inner .lbl{display:block}
  .bil-post-inner{grid-template-columns:1fr;text-align:center;padding:2.2rem 1.5rem;gap:1.6rem}
  .bil-post-visual{order:-1;width:min(360px,86%)}
  .bil-steps,.bil-optchips,.bil-post-cta{justify-content:center}
  .bil-tiers{grid-template-columns:1fr;max-width:26rem}
  .bil-tier.featured{transform:none} .bil-tier.featured:hover{transform:translateY(-5px)}
}
@media (max-width:600px){
  .bil-shots img{width:44vw}
  .bil-shots img:nth-child(even){transform:none}
}