/* STAGE 05 · PLAKETTA
 * Dark cinematic 2.5D reveal. The source background stays intact; it is only
 * composited, darkened and moved non-destructively inside this stage.
 */
/* The overlap exposes Stage 05 before Stage 04 fly-through begins (p04=.75). */
.cf-plakette{height:auto;min-height:0;margin-top:-160vh;z-index:35}
.cf-plakette__scene{position:relative;height:560vh}
.cf-plakette .cf-plakette__sticky{opacity:0;transform-style:flat;background:transparent}
.cf-plakette__composition{
  position:absolute;inset:0;overflow:clip;container-type:inline-size;perspective:1150px;transform-style:preserve-3d;
  background:
    radial-gradient(ellipse 70% 62% at 72% 52%,rgba(49,15,72,.08),transparent 64%),
    radial-gradient(ellipse 62% 56% at 34% 58%,rgba(204,23,21,.055),transparent 66%),
    #020203;
  isolation:isolate;
}
.cf-plakette__world{position:absolute;inset:-4%;z-index:1;transform-origin:50% 52%;transform-style:preserve-3d;pointer-events:none;will-change:transform,filter}
.cf-plakette__void{position:absolute;inset:0;background:radial-gradient(ellipse 58% 54% at 56% 50%,rgba(20,10,27,.16),rgba(0,0,0,.96) 72%);z-index:0}
.cf-plakette__background{position:absolute;inset:-3%;width:106%;height:106%;max-width:none;object-fit:cover;pointer-events:none;transform-origin:19% 69%;will-change:transform,opacity,filter}
.cf-plakette__background--fly{z-index:1;opacity:0;filter:brightness(.19) saturate(.54) contrast(1.34)}
.cf-plakette__background--final{z-index:2;opacity:0;filter:brightness(.15) saturate(.44) contrast(1.40);-webkit-mask-image:linear-gradient(180deg,transparent 0 43%,rgba(0,0,0,.16) 54%,rgba(0,0,0,.78) 70%,#000 100%);mask-image:linear-gradient(180deg,transparent 0 43%,rgba(0,0,0,.16) 54%,rgba(0,0,0,.78) 70%,#000 100%)}

/* Same oversized Anton stage name system as NEWS / ÜBER UNS / KONTAKT.
 * It stays behind the plaque and traverses fully from right to left on scroll. */
.cf-plakette .cf-stage-word--plaketta{
  z-index:12;left:3vw;top:49%;font-size:clamp(18rem,49.5vw,51.75rem);
  color:rgba(255,255,255,.068);text-shadow:0 0 3rem rgba(204,23,21,.035);
  opacity:0;pointer-events:none;user-select:none;
}

/* Close foreground wall. It supplies the fast parallax that makes the camera
 * feel as if it passes the gate instead of looking at a flat backdrop. */
.cf-plakette__wall{
  position:absolute;z-index:5;left:-8%;top:-15%;width:68%;height:132%;
  transform-origin:4% 50%;transform-style:preserve-3d;backface-visibility:hidden;
  background:
    linear-gradient(90deg,rgba(255,255,255,.065),rgba(255,255,255,.012) 17%,transparent 39% 68%,rgba(204,23,21,.08) 82%,rgba(204,23,21,.20) 100%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.055) 0 1px,transparent 1px 6.2cqw),
    repeating-linear-gradient(90deg,rgba(255,255,255,.042) 0 1px,transparent 1px 8.6cqw),
    radial-gradient(circle at 76% 46%,rgba(48,51,84,.22),transparent 23%),
    linear-gradient(110deg,#09090c,#030304 58%,#08050a);
  border-right:1px solid rgba(204,23,21,.48);
  box-shadow:inset -1.8cqw 0 3.4cqw rgba(204,23,21,.10),1.1cqw 0 2.4cqw rgba(204,23,21,.10),2.2cqw 0 5cqw rgba(45,54,255,.05);
  opacity:0;will-change:transform,opacity,filter;
}
.cf-plakette__wall::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.34;
  background-image:
    radial-gradient(circle at 18% 12%,rgba(255,255,255,.07) 0 1px,transparent 1.6px),
    radial-gradient(circle at 72% 42%,rgba(255,255,255,.04) 0 1px,transparent 1.4px),
    radial-gradient(circle at 45% 76%,rgba(204,23,21,.11) 0 1px,transparent 1.5px);
  background-size:3.2cqw 2.7cqw,4.7cqw 4.1cqw,6.1cqw 5.3cqw;
  mix-blend-mode:screen;
}
.cf-plakette__wall-edge{position:absolute;right:-.12cqw;top:0;bottom:0;width:.10cqw;background:linear-gradient(180deg,transparent 2%,#ef2522 23%,#cc1715 63%,transparent 96%);box-shadow:0 0 .8cqw rgba(204,23,21,.9),0 0 2.1cqw rgba(204,23,21,.33)}
.cf-plakette__battlements{display:none}
.cf-plakette__battlements i{display:block;width:3.1cqw;height:4.8cqw;background:linear-gradient(90deg,#09090c,#030304 76%);border-right:1px solid rgba(204,23,21,.46);box-shadow:.3cqw 0 .9cqw rgba(204,23,21,.10)}
.cf-plakette__battlements i:nth-child(2n){width:2.4cqw;height:3.7cqw}

.cf-plakette__floor{
  position:absolute;z-index:3;left:-8%;right:-8%;bottom:-48%;height:78%;transform-origin:50% 100%;
  background:
    radial-gradient(ellipse 32% 34% at 68% 2%,rgba(41,62,255,.12),transparent 70%),
    radial-gradient(ellipse 35% 31% at 39% 3%,rgba(204,23,21,.15),transparent 69%),
    repeating-linear-gradient(90deg,transparent 0 8.2%,rgba(255,255,255,.018) 8.3%,transparent 8.5%),
    repeating-linear-gradient(0deg,transparent 0 11%,rgba(255,255,255,.018) 11.2%,transparent 11.5%),
    linear-gradient(180deg,rgba(16,12,20,.34),rgba(1,1,2,.95));
  border-top:1px solid rgba(255,255,255,.035);opacity:0;filter:blur(.15px);will-change:transform,opacity;
}

.cf-plakette__fx{position:absolute;inset:0;width:100%;height:100%;max-width:none;pointer-events:none}
.cf-plakette__fx--back{z-index:7;mix-blend-mode:screen}
.cf-plakette__fx--front{z-index:30;mix-blend-mode:screen}
.cf-plakette__reveal-glow{position:absolute;z-index:8;left:69%;top:50%;width:38%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.35);opacity:0;background:radial-gradient(circle,rgba(255,255,255,.12) 0 5%,rgba(123,54,255,.12) 18%,rgba(204,23,21,.10) 35%,transparent 71%);filter:blur(1.6cqw);mix-blend-mode:screen;will-change:transform,opacity}

.cf-plakette__depth{position:absolute;z-index:20;inset:0;perspective:1500px;perspective-origin:64% 49%;pointer-events:none}
.cf-plakette__position{position:absolute;left:56.2%;top:19.2%;width:39.8%;height:67.5%;transform-style:preserve-3d}
.cf-plakette__motion{position:absolute;inset:0;transform-origin:50% 50%;opacity:0;will-change:transform,opacity,filter}
.cf-plakette__image{position:absolute;left:0;top:0;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;border:0;border-radius:0;filter:drop-shadow(-.28cqw 0 .42cqw rgba(204,23,21,.22)) drop-shadow(.30cqw 0 .45cqw rgba(65,74,255,.18));will-change:filter}

/* Specular streak belongs to the real, swappable image's alpha silhouette.
 * Stage JS sets exactly the same fitted rectangle + source mask as the image. */
.cf-plakette__specular{
  position:absolute;pointer-events:none;opacity:0;will-change:opacity,background-position;
  background:linear-gradient(112deg,transparent 27%,rgba(255,245,238,.025) 39%,rgba(255,223,214,.24) 46%,rgba(255,255,255,.96) 50%,rgba(199,215,255,.36) 54%,transparent 65%);
  background-size:325% 100%;background-position:100% 50%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  mix-blend-mode:screen;
}

.cf-plakette__content{position:absolute;z-index:40;left:7.2%;top:44.5%;width:31.2%;transform:translateY(-50%);color:#fff;pointer-events:auto}
.cf-plakette [data-cfpl-copy]{opacity:0;will-change:transform,opacity,filter}
.cf-plakette__eyebrow{display:block;color:var(--cf-red);font-family:Inter,Arial,Helvetica,sans-serif;font-size:22px;font-weight:400;letter-spacing:.12em;line-height:1.2;white-space:nowrap}
.cf-plakette .cf-plakette__title,.cf-plakette .cf-plakette__year{font-family:Anton,Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-weight:400;letter-spacing:-.03em}
.cf-plakette .cf-plakette__title{margin:8px 0 .05cqw;font-size:clamp(56px,8vw,122px);line-height:.88;color:#fff;text-shadow:0 0 1.1cqw rgba(255,255,255,.08)}
.cf-plakette .cf-plakette__year{margin:0 0 1.42cqw;font-size:3.9cqw;line-height:1;color:var(--cf-red);text-shadow:0 0 1.1cqw rgba(204,23,21,.22)}
.cf-plakette .cf-plakette__text{margin:0;color:rgba(255,255,255,.70);font-size:clamp(16px,1.45vw,20px);line-height:1.48;letter-spacing:normal;font-family:Inter,Arial,Helvetica,sans-serif;max-width:29cqw;text-shadow:0 .08cqw .4cqw rgba(0,0,0,.75)}
.cf-plakette__text p{margin:0;font:inherit;color:inherit}
.cf-plakette__links{display:flex;gap:1.25cqw;margin-top:2.25cqw;width:100%}
.cf-plakette .cf-plakette__link{
  position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:3.2cqw;flex:1;padding:.62cqw .72cqw;
  border:1px solid rgba(204,23,21,.74);border-radius:.28rem;background:linear-gradient(180deg,rgba(204,23,21,.07),rgba(204,23,21,.018));
  color:var(--cf-red);font-family:inherit;font-weight:inherit;font-size:1.08cqw;line-height:1.2;white-space:nowrap;text-decoration:none;scale:1;cursor:pointer;appearance:none;
  box-shadow:inset 0 0 .8rem rgba(204,23,21,.05),0 0 .48rem rgba(204,23,21,.25),0 0 1.25rem rgba(204,23,21,.10);
  text-shadow:0 0 .32rem rgba(255,78,74,.42),0 0 .75rem rgba(204,23,21,.68);
  transition:scale .22s var(--cf-ease),box-shadow .25s ease,border-color .25s ease,background .25s ease;
}
.cf-plakette .cf-plakette__link:hover,.cf-plakette .cf-plakette__link:focus-visible{color:var(--cf-red);scale:1.035;border-color:rgba(255,70,66,.92);background:linear-gradient(180deg,rgba(204,23,21,.12),rgba(204,23,21,.035));box-shadow:inset 0 0 1rem rgba(204,23,21,.10),0 0 .7rem rgba(204,23,21,.48),0 0 1.8rem rgba(204,23,21,.20)}

@media(prefers-reduced-motion:reduce){
  .cf-plakette{height:auto;margin-top:0;min-height:100svh}
  .cf-plakette .cf-plakette__sticky{position:relative;height:100svh;opacity:1}
  .cf-plakette__background--fly,.cf-plakette__wall,.cf-plakette__fx{display:none}
  .cf-plakette__background--final{opacity:.42!important;filter:brightness(.15) saturate(.44) contrast(1.4)!important;transform:none!important}
  .cf-plakette__floor{opacity:.32!important;transform:perspective(50cqw) rotateX(72deg)!important}
  .cf-plakette__reveal-glow{opacity:.16!important;transform:translate(-50%,-50%) scale(1)!important}
  .cf-plakette .cf-stage-word--plaketta{opacity:1!important;transform:translate3d(0,-50%,0)!important;filter:none!important}
  .cf-plakette__motion{opacity:1!important;transform:none!important;filter:none!important}
  .cf-plakette [data-cfpl-copy]{opacity:1!important;transform:none!important;filter:none!important}
  .cf-plakette .cf-plakette__link{transition:none}
}

/* PLAKETTA editorial continuation. The 560vh animation has its own scroll track;
 * opening this panel extends only normal document flow. Stage 06 retains its
 * original -145vh handoff; the matching transparent tail provides that runway. */
/* The opening CTA is not a second close control while editorial is visible. */
.cf-plakette [data-cfpl-toggle][hidden]{display:none}
.cf-plakette__editorial[hidden]{display:none}
.cf-plakette__editorial{
  position:relative;z-index:5;
  background:linear-gradient(180deg,#050406 0%,#090609 85%,#030304 100%);
  padding:clamp(3rem,8vw,8rem) max(7vw,calc(var(--cf-rail) + 2.5rem)) 145vh;
  color:#fff;
}
.cf-plakette__editorial-inner{
  width:min(100%,62rem);margin-inline:auto;
  font-family:Inter,Arial,Helvetica,sans-serif;
  font-size:clamp(16px,1.45vw,20px);
  font-weight:400;line-height:1.58;
  color:rgba(255,255,255,.85);overflow-wrap:break-word;
}
.cf-plakette__editorial-inner > :first-child{margin-top:0}
.cf-plakette__editorial-inner p{margin:0 0 1.2em}
.cf-plakette__editorial-inner h2,.cf-plakette__editorial-inner h3,.cf-plakette__editorial-inner h4{
  font-family:Inter,Arial,Helvetica,sans-serif;color:#fff;font-size:1.35em;font-weight:600;
  line-height:1.3;margin:1.7em 0 .65em;
}
.cf-plakette__editorial-inner img{max-width:100%;height:auto;display:block}
.cf-plakette__editorial-inner figure{max-width:100%;margin:1.75rem 0}
.cf-plakette__editorial-inner .alignleft{float:left;max-width:48%;margin:.3rem 1.5rem 1rem 0}
.cf-plakette__editorial-inner .alignright{float:right;max-width:48%;margin:.3rem 0 1rem 1.5rem}
.cf-plakette__editorial-inner .aligncenter{margin-left:auto;margin-right:auto}
.cf-plakette__editorial-inner::after{content:"";display:table;clear:both}
.cf-plakette__editorial-inner figcaption,.cf-plakette__editorial-inner .wp-caption-text{color:rgba(255,255,255,.62);font-size:.82em;margin-top:.65em}
.cf-plakette__editorial-inner a{color:var(--cf-red);text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:.17em}
.cf-plakette__editorial-inner a:hover,.cf-plakette__editorial-inner a:focus-visible{color:#f64b47}
.cf-plakette__editorial-inner :is(ul,ol){padding-left:1.5em;margin:0 0 1.4em}
.cf-plakette__editorial-inner li{margin-bottom:.4em}
.cf-plakette__editorial-actions{clear:both;padding-top:2rem;max-width:15rem}
.cf-plakette__editorial-actions .cf-plakette__link{font-size:1rem;min-height:3.2rem;padding:.75rem 1.1rem}
@media(prefers-reduced-motion:reduce){
  .cf-plakette__scene{height:auto;min-height:100svh}
  .cf-plakette__editorial{padding-bottom:4rem}
}