/* Expanding cards: a row of tall cards where the active one widens to show its detail (hover, focus or
   click); the others show their title only. Phones get an accordion. Without JavaScript every card is
   shown in full, as a grid. Right-to-left aware. Used with /assets/xcards.v1.js. */
.xcards{--xc-gap:14px;--xc-r:18px;--xc-pad:28px;--xc-grow:2.6;--xc-ease:cubic-bezier(.22,.8,.24,1);
  --xc-active:linear-gradient(150deg,#0e9a7d 0%,#0b5bd3 46%,#052369 100%);
  --xc-c1:#1d4fc6;--xc-c2:#0b2f7d;--xc-c3:#1641a6;--xc-c4:#081f57;--xc-c5:#1957cf;--xc-c6:#0a2768;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--xc-gap);margin-top:8px;text-align:start}
.xcard{position:relative;overflow:hidden;min-width:0;border-radius:var(--xc-r);padding:var(--xc-pad);color:#fff;background:var(--xc-c1);display:flex;flex-direction:column;gap:14px;box-shadow:0 18px 40px rgba(5,30,90,.16)}
.xcard:nth-child(6n+2){background:var(--xc-c2)}.xcard:nth-child(6n+3){background:var(--xc-c3)}.xcard:nth-child(6n+4){background:var(--xc-c4)}
.xcard:nth-child(6n+5){background:var(--xc-c5)}.xcard:nth-child(6n+6){background:var(--xc-c6)}
.xcard.is-active,.xcards:not(.is-js) .xcard{background:var(--xc-active)}
.xcard.is-active::before{content:"";position:absolute;inset:auto -30% 55% 35%;height:70%;background:radial-gradient(closest-side,rgba(32,247,178,.28),transparent);pointer-events:none}
.xcard__title{position:relative;margin:0;font-size:clamp(1.05rem,.95rem + .35vw,1.25rem);line-height:1.25;font-weight:700;color:#fff;overflow-wrap:break-word;hyphens:manual}
.xcard__title:lang(de){hyphens:auto}
.xcard__btn{all:unset;display:block;width:100%;cursor:pointer;box-sizing:border-box;border-radius:8px}
.xcard__btn:focus-visible{outline:2px solid #8ff7d4;outline-offset:4px}
.xcard__badge{display:inline-block;margin-inline-start:8px;padding:2px 8px;border-radius:999px;background:#20f7b2;color:#04243f;font:700 10.5px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;vertical-align:3px}
.xcard__tier{display:inline-block;margin-inline-start:8px;padding:2px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.5);font:600 11px/1.4 var(--sans);vertical-align:3px}
.xcard__body{position:relative;display:flex;flex-direction:column;gap:12px;flex:1 1 auto;min-height:0}
.xcard__media{flex:none;height:220px;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.08)}
.xcard__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.xcard__text{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.xcard__eyebrow{margin:0;font:600 12px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#8ff7d4}
.xcard__desc{margin:0;font-size:15px;line-height:1.6;color:rgba(255,255,255,.88)}
.xcard__note{margin:0;font-size:13.5px;line-height:1.5;color:#8ff7d4;font-weight:600}
.xcard__list{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.xcard__list li{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.45;color:#fff}
.xcard__list svg{flex:none;width:15px;height:15px;margin-top:3px;color:#20f7b2}
.xcard__desc a,.xcard__list a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.xcard__cta{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding:10px 18px;border-radius:999px;background:#fff;color:var(--cobalt);font-weight:700;font-size:14px;text-decoration:none;transition:transform .18s,box-shadow .18s}
.xcard__cta:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.2)}
.xcard__cta:focus-visible{outline:2px solid #8ff7d4;outline-offset:3px}

/* with JavaScript, wide screens: one row, the active card widens */
@media (min-width:821px){
  .xcards.is-js{display:flex;align-items:stretch;min-height:420px}
  .xcards.is-js .xcard{flex:1 1 0;transition:flex-grow .6s var(--xc-ease),background-color .3s}
  .xcards.is-js .xcard.is-active{flex-grow:var(--xc-grow)}
  .xcards.is-js .xcard:not(.is-active){padding-inline:22px}
  .xcards.is-js .xcard:not(.is-active) .xcard__title{font-size:1.02rem}
  .xcards.is-js .xcard:not(.is-active) .xcard__body{display:none}
  .xcards.is-js .xcard.is-active .xcard__body{animation:xcIn .45s .18s both}
  .xcards.is-js .xcard:not(.is-active):hover{filter:brightness(1.12)}
}
/* with JavaScript, narrow screens: accordion */
@media (max-width:820px){
  .xcards.is-js{display:flex;flex-direction:column;gap:10px}
  .xcards.is-js .xcard{padding:18px 20px;gap:0}
  .xcards.is-js .xcard__btn{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .xcards.is-js .xcard__btn::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .25s}
  .xcards.is-js .xcard.is-active .xcard__btn::after{transform:rotate(-135deg) translateY(-2px)}
  .xcards.is-js .xcard:not(.is-active) .xcard__body{display:none}
  .xcards.is-js .xcard.is-active .xcard__body{margin-top:14px;animation:xcIn .35s both}
  .xcard__media{height:180px}
}
@keyframes xcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.xcards.is-measuring .xcard,.xcards.is-measuring .xcard__body{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){ .xcards.is-js .xcard{transition:none} .xcards .xcard__body{animation:none!important} }