
:root{
  --red:#cc1715;
  --white:#fff;
  --black:#05060a;
  --panel:rgba(7,9,16,.78);
  --panel-strong:rgba(7,9,16,.9);
  --violet:#8d49ff;
  --blue:#3e6cff;
  --content:1180px;
}
*{box-sizing:border-box}

.cfpa-stage{
  --cfpa-stage-vh:520vh;
  position:relative;
  min-height:var(--cfpa-stage-vh);
  background:#05060a;
}
.cfpa-stage__sticky{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  isolation:isolate;
}
.cfpa-stage__bg{
  position:absolute;
  inset:0;
  z-index:-3;
  background:
    linear-gradient(90deg,rgba(2,4,10,.20) 0%,rgba(2,4,10,.07) 54%,rgba(2,4,10,.0) 100%),
    url("../img/programm-bg.png") center center / cover no-repeat;
  pointer-events:none;
}
.cfpa-stage__shade{
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 44% 46%,rgba(0,0,0,.10) 0%,rgba(0,0,0,.18) 36%,rgba(0,0,0,.30) 74%,rgba(0,0,0,.20) 100%),
    linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.04) 35%,rgba(0,0,0,.24));
}
.cfpa-stage__header{
  position:absolute;
  top:clamp(28px,4vh,52px);
  left:50%;
  width:min(calc(100% - 48px),var(--content));
  transform:translateX(-50%);
  z-index:20;
  pointer-events:none;
}
.cfpa-stage__eyebrow{
  margin:0 0 8px;
  color:var(--red);
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
}
.cfpa-stage__title{
  margin:0;
  font-family:"Anton",Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:clamp(56px,8vw,122px);
  line-height:.88;
  letter-spacing:-.03em;
  text-transform:uppercase;
}
.cfpa-stage__hint{
  position:absolute;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  z-index:20;
  font-size:12px;
  letter-spacing:.11em;
  text-transform:uppercase;
  opacity:.62;
  pointer-events:none;
}

.cfpa-stack{
  position:absolute;
  inset:0;
}
.cfpa-item{
  --cfpa-x:0px;
  --cfpa-y:0px;
  --cfpa-scale:1;
  --cfpa-opacity:1;
  --cfpa-rotate:0deg;
  --cfpa-z:1;
  position:absolute;
  left:50%;
  top:50%;
  width:min(760px,calc(100vw - 54px));
  transform:
    translate(-50%,-50%)
    translate3d(var(--cfpa-x),var(--cfpa-y),0)
    scale(var(--cfpa-scale))
    rotate(var(--cfpa-rotate));
  opacity:var(--cfpa-opacity);
  z-index:var(--cfpa-z);
  will-change:transform,opacity;
  pointer-events:none;
}
.cfpa-item.is-active{pointer-events:auto}

.cfpa-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(180px,34%) minmax(0,1fr);
  gap:24px;
  padding:18px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:26px;
  background:
    linear-gradient(145deg,rgba(13,15,26,.92),rgba(8,9,16,.78));
  box-shadow:
    0 28px 80px rgba(0,0,0,.42),
    0 0 0 1px rgba(141,73,255,.08) inset;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
  cursor:pointer;
}
.cfpa-item.is-active .cfpa-card:hover{
  transform:scale(1.025);
  border-color:rgba(255,255,255,.26);
  box-shadow:
    0 34px 90px rgba(0,0,0,.52),
    0 0 34px rgba(141,73,255,.14),
    0 0 0 1px rgba(204,23,21,.10) inset;
}
.cfpa-card__image{
  min-height:0;
  border-radius:18px;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(204,23,21,.35),rgba(62,108,255,.18)),
    radial-gradient(circle at 70% 20%,rgba(141,73,255,.9),transparent 35%),
    #11131d;
  position:relative;
  align-self:center;
}
.cfpa-card__image::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg,transparent 0 35%,rgba(255,255,255,.06) 35% 36%,transparent 36% 100%),
    radial-gradient(circle at 30% 70%,rgba(204,23,21,.55),transparent 26%);
}
.cfpa-card__body{
  min-width:0;
  align-self:center;
}
.cfpa-card__date{
  color:var(--red);
  font-weight:800;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:0 0 8px;
}
.cfpa-card__title{
  margin:0;
  font-family:"Anton",Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:clamp(38px,4.4vw,64px);
  line-height:1.06;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.cfpa-card__preview{
  margin:14px 0 0;
  font-size:16px;
  line-height:1.52;
  color:rgba(255,255,255,.82);
  max-width:44ch;
}
.cfpa-card__more{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .34s ease, margin-top .34s ease;
  margin-top:0;
}
.cfpa-card__more > div{overflow:hidden}
.cfpa-card__more p{
  margin:12px 0 0;
  color:rgba(255,255,255,.82);
  line-height:1.58;
}
.cfpa-card__meta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
  font-size:13px;
  color:rgba(255,255,255,.72);
}
.cfpa-card__location{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.cfpa-card__location svg{
  width:16px;
  height:16px;
  flex:0 0 auto;
  stroke:var(--red);
  filter:drop-shadow(0 0 5px rgba(204,23,21,.38));
}
.cfpa-card__footnote{
  margin-top:14px !important;
  font-size:13px;
  line-height:1.48 !important;
  color:rgba(255,255,255,.66) !important;
}
.cfpa-card__toggle{
  margin-top:20px;
  border:1px solid rgba(204,23,21,.9);
  border-radius:10px;
  padding:9px 14px 8px;
  background:rgba(204,23,21,.08);
  color:#ff3d39;
  font-weight:800;
  letter-spacing:.035em;
  cursor:pointer;
  text-decoration:none;
  box-shadow:
    0 0 8px rgba(204,23,21,.58),
    0 0 18px rgba(204,23,21,.30),
    inset 0 0 10px rgba(204,23,21,.10);
  text-shadow:
    0 0 5px rgba(255,66,61,.95),
    0 0 12px rgba(204,23,21,.72);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    color .18s ease;
}
.cfpa-card__toggle:hover,
.cfpa-card__toggle:focus-visible{
  transform:scale(1.035);
  background:rgba(204,23,21,.14);
  color:#fff;
  box-shadow:
    0 0 10px rgba(204,23,21,.76),
    0 0 24px rgba(204,23,21,.44),
    0 0 36px rgba(204,23,21,.22),
    inset 0 0 12px rgba(204,23,21,.16);
  outline:none;
}
.cfpa-card[aria-expanded="true"]{
  background:linear-gradient(145deg,rgba(12,14,24,.97),rgba(7,8,14,.92));
}
.cfpa-card[aria-expanded="true"] .cfpa-card__more{
  grid-template-rows:1fr;
  margin-top:4px;
}

.cfpa-counter{
  position:absolute;
  right:clamp(24px,4vw,56px);
  bottom:34px;
  z-index:20;
  font-family:"Anton",Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:18px;
  letter-spacing:.04em;
  opacity:.78;
}
.cfpa-counter span{color:var(--red)}


.cfpa-card__title,
.cfpa-card__preview,
.cfpa-card__more,
.cfpa-card__more p,
.cfpa-card__meta,
.cfpa-card__date{
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;
}
.cfpa-card__title{
  max-width:100%;
}



/* Einheitliche Darstellung dynamischer WordPress-Inhalte in jeder geöffneten Card. */
.cfpa-card__fulltext,
.cfpa-card__fulltext p,
.cfpa-card__fulltext ul,
.cfpa-card__fulltext ol,
.cfpa-card__fulltext li,
.cfpa-card__fulltext h1,
.cfpa-card__fulltext h2,
.cfpa-card__fulltext h3,
.cfpa-card__fulltext h4,
.cfpa-card__fulltext h5,
.cfpa-card__fulltext h6,
.cfpa-card__fulltext blockquote{
  max-width:none;
}

.cfpa-card__fulltext p{
  margin:12px 0 0;
  font:inherit;
  color:inherit;
  line-height:1.58;
}

.cfpa-card__fulltext ul,
.cfpa-card__fulltext ol{
  margin:12px 0 0;
  padding-left:1.25em;
  color:inherit;
}

.cfpa-card__fulltext li{
  margin:.3em 0 0;
  line-height:1.58;
}

.cfpa-card__fulltext h1,
.cfpa-card__fulltext h2,
.cfpa-card__fulltext h3,
.cfpa-card__fulltext h4,
.cfpa-card__fulltext h5,
.cfpa-card__fulltext h6{
  margin:16px 0 0;
  font-family:inherit;
  font-size:1em;
  font-weight:700;
  line-height:1.35;
  letter-spacing:0;
  text-transform:none;
  color:inherit;
}

.cfpa-card__fulltext a{
  color:inherit;
  text-decoration-color:var(--red);
  text-underline-offset:3px;
}

.cfpa-card__fulltext .wp-block-group,
.cfpa-card__fulltext .wp-block-columns,
.cfpa-card__fulltext .wp-block-column{
  margin:0;
  padding:0;
  width:auto;
  max-width:none;
}

@media (min-width: 761px){
  .cfpa-item{
    transition:width .28s ease;
  }

  .cfpa-item.is-expanded{
    width:min(1080px,calc(100vw - 96px));
  }

  .cfpa-item.is-expanded .cfpa-card{
    max-height:calc(100svh - 150px);
    overflow:hidden;
  }

  .cfpa-item.is-expanded .cfpa-card__body{
    min-height:0;
    max-height:calc(100svh - 186px);
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    padding-right:6px;
  }

  .cfpa-item.is-expanded .cfpa-card__more{
    min-height:0;
  }
}

@media (max-width: 760px){
  .cfpa-stage{
    min-height:auto;
    overflow:hidden;
    background:#05060a;
  }

  .cfpa-stage__sticky{
    position:relative;
    top:auto;
    height:auto;
    min-height:100svh;
    overflow:hidden;
    padding:calc(28px + 10svh) 0 34px;
  }

  .cfpa-stage__bg{
    background-position:68% center;
    background-size:cover;
  }

  .cfpa-stage__shade{
    background:
      linear-gradient(180deg,rgba(0,0,0,.50) 0%,rgba(0,0,0,.28) 30%,rgba(0,0,0,.24) 72%,rgba(0,0,0,.46) 100%);
  }

  .cfpa-stage__header{
    position:relative;
    top:auto;
    left:auto;
    width:calc(100% - 32px);
    margin:0 auto 26px;
    transform:none;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    pointer-events:none;
  }

  .cfpa-stage__title{
    order:1;
    font-size:clamp(54px,16vw,78px);
    line-height:.92;
    max-width:100%;
  }

  .cfpa-stage__eyebrow{
    order:2;
    margin:10px 0 0;
    font-size:11px;
    letter-spacing:.14em;
  }

  .cfpa-stack{
    position:relative;
    inset:auto;
    display:flex;
    align-items:flex-start;
    gap:16px;
    overflow-x:auto;
    overflow-y:visible;
    padding:8px 16px 22px;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:16px;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
  }

  .cfpa-stack::-webkit-scrollbar{
    display:none;
  }

  .cfpa-item{
    position:relative;
    left:auto;
    top:auto;
    flex:0 0 min(86vw,360px);
    width:auto;
    transform:none !important;
    opacity:1 !important;
    z-index:auto !important;
    pointer-events:auto;
    scroll-snap-align:center;
    scroll-snap-stop:always;
    will-change:auto;
  }

  .cfpa-card{
    height:auto;
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:14px;
    border-radius:20px;
    transform:none;
  }

  .cfpa-item.is-active .cfpa-card:hover{
    transform:none;
  }

  .cfpa-card__image{
    width:100%;
    min-height:0;
    align-self:stretch;
  }

  .cfpa-card__image-el{
    width:100%;
    height:auto;
    object-fit:contain;
    display:block;
  }

  .cfpa-card__body{
    display:flex;
    flex-direction:column;
    min-width:0;
    flex:1;
  }

  .cfpa-card__title{
    font-size:clamp(36px,11.5vw,52px);
    line-height:1.08;
  }

  .cfpa-card__preview{
    font-size:15px;
    line-height:1.48;
  }

  .cfpa-card__toggle{
    align-self:flex-start;
  }

  .cfpa-counter{
    position:relative;
    right:auto;
    bottom:auto;
    width:calc(100% - 32px);
    margin:0 auto;
    text-align:right;
  }

  .cfpa-stage__hint{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    width:calc(100% - 32px);
    margin:8px auto 0;
    text-align:left;
    display:block;
    opacity:.55;
  }
}

@media (prefers-reduced-motion:reduce){
  .cfpa-card{transition:none}
  .cfpa-card__more{transition:none}
}

.cfpa-stage *, .cfpa-stage *::before, .cfpa-stage *::after{box-sizing:border-box}
.cfpa-card__image-el{position:relative;width:100%;height:auto;object-fit:contain;display:block}
.cfpa-card__image-placeholder{position:relative;display:block;aspect-ratio:16/9}
.cfpa-card__fulltext{color:rgba(255,255,255,.82);line-height:1.58}
.cfpa-card__fulltext > *:first-child{margin-top:12px}
.cfpa-card__fulltext > *:last-child{margin-bottom:0}
.cfpa-empty{min-height:1px}
