.fckb-band{
  font-family:var(--fckb-bfont,'Space Grotesk',sans-serif);
  background:
    radial-gradient(1100px 380px at 85% -30%, color-mix(in srgb, var(--fckb-glow) calc(var(--fckb-glow-a,.3)*100%), transparent), transparent 60%),
    radial-gradient(800px 460px at -5% 130%, color-mix(in srgb, var(--fckb-glow) calc(var(--fckb-glow-a,.3)*55%), transparent), transparent 55%),
    var(--fckb-bg,#0b0b0b);
  border:1px solid var(--fckb-border,rgba(255,255,255,.12));
  border-radius:var(--fckb-radius,0);
  padding:var(--fckb-padY,36px) var(--fckb-padX,44px);
  min-height:var(--fckb-minh,auto);
  max-width:var(--fckb-maxw,none); margin-inline:auto;
  display:flex; align-items:center; gap:40px; flex-wrap:wrap;
  color:#fff; position:relative; overflow:hidden;
}
.fckb-content{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:40px; flex-wrap:wrap; }
.fckb-main{ flex:1 1 480px; min-width:0; }
.fckb-pill{ display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--fckb-accent); color:var(--fckb-accent);
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:6px 14px; margin-bottom:16px; }
.fckb-dot{ width:8px; height:8px; border-radius:50%; background:var(--fckb-accent);
  animation:fckb-pulse 1.8s infinite; }
@keyframes fckb-pulse{ 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--fckb-accent) 60%,transparent)}
  70%{box-shadow:0 0 0 9px transparent} 100%{box-shadow:0 0 0 0 transparent} }
.fckb-title{ font-family:var(--fckb-tfont,'Bebas Neue',Impact,sans-serif);
  font-size:clamp(34px,5vw,var(--fckb-tsize,58px)); line-height:.98; letter-spacing:.02em;
  text-transform:uppercase; margin:0 0 10px; color:var(--fckb-title,#fff); overflow-wrap:break-word; }
.fckb-title b{ color:var(--fckb-accent); }
.fckb-sub{ margin:0; font-size:var(--fckb-ssize,17px); line-height:1.6; color:var(--fckb-text,#ccc); max-width:680px; }
.fckb-cta{ flex:0 0 auto; }
.fckb-btn{ display:inline-flex; align-items:center; gap:.55em; padding:var(--fckb-btnpadY,15px) var(--fckb-btnpadX,34px); background:var(--fckb-btnbg,#000); color:var(--fckb-btntext,#fff);
  border:2px var(--fckb-btnstyle,dashed) var(--fckb-btnborder,#7a7a7a); text-decoration:none;
  font-size:var(--fckb-btnfs,15px); font-weight:700; letter-spacing:.04em; transition:border-color .2s ease,color .2s ease,background-color .2s ease; }
.fckb-btn--iconleft{ flex-direction:row-reverse; }
.fckb-btn-ico{ display:inline-flex; align-items:center; }
.fckb-btn-ico svg{ width:1em; height:1em; display:block; }
.fckb-btn:hover{ background:var(--fckb-btnhoverbg,var(--fckb-btnbg,#000)); border-color:var(--fckb-btnhoverborder,var(--fckb-accent)); color:var(--fckb-btnhovertext,var(--fckb-accent)); }

/* ===== Volle Breite (randlos) — überschreibt die Theme-Breitenbegrenzung ===== */
.fckb-full{ max-width:none !important; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  border-radius:0; border-left:0; border-right:0; }

/* ===== Bild randlos (bleed) für Layout: Bild links ===== */
.fckb-layout-media.fckb-mediableed{ gap:0; }
.fckb-layout-media.fckb-mediableed .fckb-media{
  margin:calc(-1 * var(--fckb-padY,36px)) 0 calc(-1 * var(--fckb-padY,36px)) calc(-1 * var(--fckb-padX,44px));
  border:0; border-radius:0; }
.fckb-layout-media.fckb-mediableed .fckb-content{ padding-left:clamp(20px,3vw,40px); }

/* ===== Inhalt-Ausrichtung: auf Inhaltsbreite begrenzen + ausrichten (überschreibt Layout) ===== */
.fckb-band.fckb-ca-left .fckb-content, .fckb-band.fckb-ca-center .fckb-content{
  max-width:var(--fckb-cmax,1290px); width:100%; margin-inline:auto;
  flex-direction:column; gap:20px; }
.fckb-band.fckb-ca-left .fckb-content{ align-items:flex-start; text-align:left; }
.fckb-band.fckb-ca-left .fckb-main{ width:100%; }
.fckb-band.fckb-ca-left .fckb-sub{ margin-inline:0; max-width:none; }
.fckb-band.fckb-ca-center .fckb-content{ align-items:center; text-align:center; }
.fckb-band.fckb-ca-center .fckb-main{ width:100%; }
.fckb-band.fckb-ca-center .fckb-sub{ margin-inline:auto; max-width:none; }
/* when full-width band + aligned content: drop side padding so content lines up with the page */
.fckb-full.fckb-ca-left, .fckb-full.fckb-ca-center{ padding-left:0; padding-right:0; }

/* ===== Layout: Zentriert ===== */
.fckb-layout-center .fckb-content{ flex-direction:column; align-items:center; text-align:center; width:100%; gap:22px; }
.fckb-layout-center .fckb-main{ flex:0 1 auto; }
.fckb-layout-center .fckb-sub{ margin-inline:auto; }

/* ===== Layout: Bild links, Text rechts ===== */
.fckb-layout-media{ align-items:stretch; }
.fckb-layout-media .fckb-media{ flex:0 0 40%; max-width:40%; min-height:240px; overflow:hidden;
  border-radius:var(--fckb-radius,0); align-self:stretch; }
.fckb-layout-media .fckb-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.fckb-layout-media .fckb-content{ flex:1 1 320px; flex-direction:column; align-items:flex-start; gap:22px; }
.fckb-layout-media .fckb-main{ flex:0 0 auto; width:100%; }

@media (max-width:760px){
  .fckb-band{ padding:28px 22px; gap:22px; }
  .fckb-cta{ width:100%; } .fckb-btn{ display:block; text-align:center; }
  .fckb-layout-media{ flex-direction:column; align-items:stretch; }
  .fckb-layout-media .fckb-media{ flex-basis:auto; max-width:100%; min-height:200px; }
  .fckb-layout-media.fckb-mediableed{ gap:22px; }
  .fckb-layout-media.fckb-mediableed .fckb-media{ margin:calc(-1 * var(--fckb-padY,36px)) calc(-1 * var(--fckb-padX,44px)) 0; }
  .fckb-layout-media.fckb-mediableed .fckb-content{ padding-left:0; }
}

/* ===================== ANIMATIONEN ===================== */
@keyframes fckbFade{from{opacity:0}to{opacity:1}}
@keyframes fckbUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes fckbZoom{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* Armed state is added by view.js only when JS + motion allow it, so content stays visible otherwise */
.fckb-anim-fade.is-armed, .fckb-anim-up.is-armed, .fckb-anim-zoom.is-armed{ opacity:0; }
.fckb-anim-fade.is-armed.is-inview{ animation:fckbFade var(--fckb-animdur,.7s) ease both; }
.fckb-anim-up.is-armed.is-inview{ animation:fckbUp var(--fckb-animdur,.7s) cubic-bezier(.2,.7,.2,1) both; }
.fckb-anim-zoom.is-armed.is-inview{ animation:fckbZoom var(--fckb-animdur,.7s) cubic-bezier(.2,.7,.2,1) both; }

/* Gestaffelt: band visible, children rise in sequence */
.fckb-anim-stagger.is-armed .fckb-pill,
.fckb-anim-stagger.is-armed .fckb-title,
.fckb-anim-stagger.is-armed .fckb-sub,
.fckb-anim-stagger.is-armed .fckb-cta{ opacity:0; }
.fckb-anim-stagger.is-inview .fckb-pill{ animation:fckbUp var(--fckb-animdur,.6s) cubic-bezier(.2,.7,.2,1) .05s forwards; }
.fckb-anim-stagger.is-inview .fckb-title{ animation:fckbUp var(--fckb-animdur,.6s) cubic-bezier(.2,.7,.2,1) .18s forwards; }
.fckb-anim-stagger.is-inview .fckb-sub{ animation:fckbUp var(--fckb-animdur,.6s) cubic-bezier(.2,.7,.2,1) .32s forwards; }
.fckb-anim-stagger.is-inview .fckb-cta{ animation:fckbUp var(--fckb-animdur,.6s) cubic-bezier(.2,.7,.2,1) .46s forwards; }

@media (prefers-reduced-motion: reduce){
  .fckb-anim, .fckb-anim *{ animation:none !important; opacity:1 !important; transform:none !important; }
}

/* Button-Shine */
.fckb-shine .fckb-btn{ position:relative; overflow:hidden; }
.fckb-shine .fckb-btn::after{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent); transform:skewX(-18deg); pointer-events:none; }
@keyframes fckbShine{ 0%{left:-60%} 60%,100%{left:140%} }
.fckb-shine .fckb-btn:hover::after{ animation:fckbShine .9s ease; }