/* ============================================================
   AvB Design-Ergänzungen (additiv, nach den Seitenstilen geladen)
   1  Kacheln "Urkunde": inneres Passepartout, goldene Eckwinkel,
      Nummerierung, Goldlinie unter dem Titel
   2  Technologiepartner-Laufband
   ============================================================ */

/* ---------- 1 · Urkunde-Kacheln ---------- */
@property --l{syntax:'<length>'; inherits:false; initial-value:16px;}

.grid3, .grid2, .classes{counter-reset:urk;}

.feat, .cls:not([style]), .door{
  position:relative; border-radius:4px;
  outline:1px solid rgba(160,138,91,.22); outline-offset:-10px;
  transition:box-shadow .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1), outline-color .6s ease, --l .6s cubic-bezier(.2,.7,.2,1);}
.feat, .cls:not([style]){background:linear-gradient(180deg,#ffffff,#fffdf8);}
.section.white .feat, .section.white .cls:not([style]){background:linear-gradient(180deg,#fcf9f2,var(--creme));}
.feat{padding:40px 36px 36px;}
.cls:not([style]){padding:36px 32px 32px;}
.door{padding:40px 36px 34px;}
.cls[style]{border-radius:4px;}

/* Eckwinkel */
.feat::after, .cls:not([style])::after, .door::after{
  content:""; position:absolute; inset:9px; pointer-events:none;
  background:
    linear-gradient(var(--gold),var(--gold)) top left / var(--l) 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) top left / 1px var(--l) no-repeat,
    linear-gradient(var(--gold),var(--gold)) top right / var(--l) 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) top right / 1px var(--l) no-repeat,
    linear-gradient(var(--gold),var(--gold)) bottom left / var(--l) 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) bottom left / 1px var(--l) no-repeat,
    linear-gradient(var(--gold),var(--gold)) bottom right / var(--l) 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) bottom right / 1px var(--l) no-repeat;
  transition:--l .6s cubic-bezier(.2,.7,.2,1);}

/* Nummerierung oben rechts (Türen haben ihre eigene Nummer) */
.feat, .cls:not([style]){counter-increment:urk;}
.feat::before, .cls:not([style])::before{
  content:counter(urk, decimal-leading-zero); position:absolute; top:26px; right:30px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--gold);}
.door::before{content:none;}

/* Goldlinie unter dem Titel */
.feat h4, .cls:not([style]) h4, .door h3{position:relative; padding-bottom:14px; margin-bottom:14px;}
.feat h4, .cls:not([style]) h4{padding-right:34px;}
.feat h4::after, .cls:not([style]) h4::after, .door h3::after{
  content:""; position:absolute; left:0; bottom:0; width:28px; height:1px; background:var(--gold);
  transition:width .6s cubic-bezier(.2,.7,.2,1);}
.door h3{margin-top:14px;}

/* Bewegung beim Darüberfahren */
.feat:hover, .cls:not([style]):hover, .door:hover{
  --l:44px; outline-color:rgba(160,138,91,.4);
  box-shadow:0 30px 60px -30px rgba(8,26,46,.28);}
.feat:hover, .cls:not([style]):hover{transform:translateY(-2px);}
.feat:hover h4::after, .cls:not([style]):hover h4::after, .door:hover h3::after{width:64px;}

/* ---------- 2 · Technologiepartner-Laufband ---------- */
.pband{position:relative; padding:56px 0 60px; overflow:hidden; color:var(--on-navy);
  background:
    radial-gradient(900px 260px at 50% -30%, rgba(160,138,91,.16), transparent 70%),
    linear-gradient(180deg, var(--navy-deep), var(--navy));
  border-top:1px solid rgba(160,138,91,.35); border-bottom:1px solid rgba(160,138,91,.35);}
.pband-head{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; margin-bottom:34px;}
.pband-head p{font-family:var(--serif); font-style:italic; font-size:19px; color:var(--on-navy-soft);}
.pband-marquee{overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.pband-track{display:flex; width:max-content; animation:pbandRun 38s linear infinite;}
.pband-marquee:hover .pband-track, .pband-marquee:focus-within .pband-track{animation-play-state:paused;}
@keyframes pbandRun{to{transform:translateX(-50%);}}
.pband-lane{display:flex; align-items:center; list-style:none; margin:0; padding:0;}
.pband-lane li{display:flex; align-items:center;}
.pband-lane li::after{content:"◆"; color:var(--gold); font-size:8px; opacity:.7; margin-inline:clamp(36px,5vw,64px);}
.pband-logo{display:flex; flex-direction:column; align-items:center; justify-content:center; height:64px; min-width:150px; padding:0 6px;
  position:relative; color:#fff; opacity:.72; transition:opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1);}
.pband-logo b{font-family:var(--serif); font-weight:400; font-size:28px; letter-spacing:.02em; white-space:nowrap; line-height:1;}
.pband-logo small{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.55; margin-top:7px;}
.pband-logo img{max-height:34px; max-width:170px; width:auto; display:block;}
.pband-logo::after{content:""; position:absolute; left:20%; right:20%; bottom:4px; height:1px; background:var(--gold);
  transform:scaleX(0); transition:transform .45s cubic-bezier(.2,.7,.2,1);}
.pband-marquee:hover .pband-logo{opacity:.45;}
.pband-marquee .pband-logo:hover, .pband-marquee .pband-logo:focus-visible{opacity:1; transform:translateY(-2px);}
.pband-logo:hover::after, .pband-logo:focus-visible::after{transform:scaleX(1);}
@media (max-width:680px){ .pband-logo b{font-size:23px;} }

@media (prefers-reduced-motion:reduce){
  .pband-track{width:auto; justify-content:center;}
  .pband-lane[aria-hidden="true"]{display:none;}
  .pband-lane{flex-wrap:wrap; justify-content:center; row-gap:12px;}
  .pband-lane li:nth-child(n+5){display:none;}
  .pband-marquee{-webkit-mask:none; mask:none;}
}