/* Belenus Content Reveal — Leistungen, Vorteile, Rollen. Varianten: list, cards, roles. */

.bcr-root{
  --bcr-bg:#f2f5f4;--bcr-ink:#22423c;--bcr-mute:#5b756e;--bcr-line:#dbe4e0;--bcr-accent:#33604f;--bcr-card:#fff;
  box-sizing:border-box;background:var(--bcr-bg);color:var(--bcr-ink);
  font-family:Poppins,'Helvetica Neue',Arial,sans-serif;
  padding:clamp(48px,8vh,104px) clamp(18px,5vw,64px);
}
.bcr-root[data-theme="dark"]{--bcr-bg:#22423c;--bcr-ink:#f2f5f4;--bcr-mute:#a9c4bc;--bcr-line:rgba(255,255,255,.16);--bcr-accent:#8fb0a7;--bcr-card:rgba(255,255,255,.04)}
.bcr-root[data-bg="gradient"]{background-image:radial-gradient(120% 120% at 15% 10%, rgba(143,176,167,.35) 0%, transparent 55%), linear-gradient(160deg, var(--bcr-bg) 0%, #e2ebe6 100%)}
.bcr-root[data-theme="dark"][data-bg="gradient"]{background-image:radial-gradient(120% 120% at 15% 10%, rgba(143,176,167,.5) 0%, transparent 55%), linear-gradient(160deg, var(--bcr-bg) 0%, #0f2420 100%)}
.bcr-root *,.bcr-root *::before,.bcr-root *::after{box-sizing:border-box}
.bcr-inner{max-width:1240px;margin:0 auto}

.bcr-head{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(28px,4vw,52px);max-width:44em}
.bcr-kicker{margin:0;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--bcr-accent)}
.bcr-title{margin:0;font-size:clamp(24px,3vw,42px);font-weight:700;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.bcr-intro{margin:0;font-size:clamp(14.5px,1.2vw,17px);line-height:1.62;color:var(--bcr-mute);text-wrap:pretty}

/* Reveal beim Eintritt */
.bcr-item{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.bcr-item.is-in{opacity:1;transform:none;transition-delay:calc(var(--i,0)*70ms)}

/* ---------- Variante: list ---------- */
.bcr-list{display:flex;flex-direction:column;border-top:1px solid var(--bcr-line)}
.bcr-list .bcr-item{
  position:relative;display:grid;grid-template-columns:3.2rem minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(12px,2.4vw,40px);align-items:baseline;
  padding:clamp(18px,2.4vw,28px) 0;border-bottom:1px solid var(--bcr-line);
}
.bcr-list .bcr-item::before{
  content:"";position:absolute;left:-100vw;right:-100vw;top:0;bottom:0;
  background:var(--bcr-card);opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:0;
}
.bcr-list .bcr-item:hover::before{opacity:.7}
.bcr-list .bcr-item > *{position:relative;z-index:1}
.bcr-idx{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--bcr-accent);font-variant-numeric:tabular-nums}
.bcr-name{margin:0;font-size:clamp(17px,1.8vw,25px);font-weight:600;line-height:1.2;letter-spacing:-.015em;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.bcr-list .bcr-item:hover .bcr-name{transform:translateX(6px)}
.bcr-desc{margin:0;font-size:14.5px;line-height:1.6;color:var(--bcr-mute);text-wrap:pretty}

/* ---------- Variante: cards ---------- */
.bcr-cards{display:grid;grid-template-columns:repeat(var(--bcr-cols,auto-fit),minmax(272px,1fr));gap:clamp(14px,1.6vw,22px);perspective:1400px}
.bcr-cards .bcr-item{
  display:flex;flex-direction:column;gap:0;padding:clamp(22px,2.4vw,30px);
  background:var(--bcr-card);border:1px solid var(--bcr-line);border-radius:18px;overflow:hidden;
  transition:opacity .6s ease,transform .5s cubic-bezier(.2,.7,.2,1),border-color .35s ease,box-shadow .4s ease;
}
.bcr-cards .bcr-item.bcr-has-media{padding:0}
.bcr-card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bcr-line)}
.bcr-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.bcr-cards .bcr-item:hover .bcr-card-media img{transform:scale(1.06)}
.bcr-card-body{display:flex;flex-direction:column;gap:12px}
.bcr-cards .bcr-item.bcr-has-media .bcr-card-body{padding:clamp(20px,2.2vw,26px)}
.bcr-cards .bcr-item:hover{
  border-color:var(--bcr-accent);
  box-shadow:0 26px 50px -34px rgba(26,43,38,.5);
  transform:translateY(-6px) rotate(-.6deg) scale(1.012);
}
.bcr-cards .bcr-item:nth-child(even):hover{transform:translateY(-6px) rotate(.6deg) scale(1.012)}
.bcr-check{
  width:30px;height:30px;flex:none;border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in oklab, var(--bcr-accent) 18%, transparent);color:var(--bcr-accent);
}
.bcr-check svg{width:15px;height:15px}
.bcr-check.bcr-icon-large{width:52px;height:52px}
.bcr-check.bcr-icon-large svg{width:26px;height:26px}
.bcr-check.bcr-icon-bg-none{background:none;color:var(--bcr-accent)}
.bcr-check.bcr-icon-bg-none.bcr-icon-large svg{width:34px;height:34px}
.bcr-sub{margin:0;padding:0;list-style:none;display:grid;gap:0;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .5s cubic-bezier(.2,.7,.2,1),opacity .4s ease;
}
.bcr-cards .bcr-item:hover .bcr-sub,
.bcr-cards .bcr-item:focus-within .bcr-sub,
.bcr-cards .bcr-item.is-open .bcr-sub{max-height:22em;opacity:1}
.bcr-sub li{
  display:flex;align-items:baseline;gap:10px;padding:7px 0;
  font-size:13.5px;line-height:1.45;color:var(--bcr-mute);border-top:1px solid var(--bcr-line);
}
.bcr-sub li::before{content:"";flex:none;width:4px;height:4px;border-radius:999px;background:var(--bcr-accent);transform:translateY(-2px)}
.bcr-more{
  margin-top:auto;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bcr-accent);opacity:.85;transition:opacity .3s ease,transform .3s ease;
  background:none;border:0;padding:0;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:6px;text-align:left;
}
.bcr-more span{transition:transform .3s ease}
.bcr-cards .bcr-item.is-open .bcr-more span{transform:rotate(180deg)}
.bcr-cards .bcr-item:hover .bcr-more{opacity:1}

/* ---------- Variante: roles ---------- */
.bcr-roles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:center}
.bcr-rolelist{display:flex;flex-direction:column;border-top:1px solid var(--bcr-line)}
.bcr-role{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:baseline;
  padding:clamp(14px,1.8vw,20px) 0;border-bottom:1px solid var(--bcr-line);
  background:none;border-left:0;border-right:0;border-top:0;text-align:left;font:inherit;color:inherit;cursor:pointer;
  border-radius:0;box-shadow:none;
}
.bcr-role:hover,.bcr-role:focus,.bcr-role:active{background:none;box-shadow:none;outline:none;color:inherit}
.bcr-role-dot{
  width:9px;height:9px;border-radius:999px;background:var(--bcr-line);
  transform:translateY(4px);transition:background .3s ease,transform .3s ease;
}
.bcr-role.is-on .bcr-role-dot{background:var(--bcr-accent);transform:translateY(4px) scale(1.35)}
.bcr-role-name{display:block;margin:0;font-size:clamp(16px,1.7vw,22px);font-weight:600;letter-spacing:-.012em;color:var(--bcr-ink);opacity:.62;transition:opacity .3s ease}
.bcr-role.is-on .bcr-role-name{opacity:1}
.bcr-role:hover .bcr-role-name{opacity:.85;color:var(--bcr-ink)}
.bcr-role-desc{display:block;margin:4px 0 0;font-size:13.5px;line-height:1.55;color:var(--bcr-mute);
  max-height:0;overflow:hidden;opacity:0;transition:max-height .45s cubic-bezier(.2,.7,.2,1),opacity .35s ease}
.bcr-role.is-on .bcr-role-desc{max-height:8em;opacity:1}

.bcr-wheel{position:relative;width:100%;aspect-ratio:1/1;max-width:460px;margin:0 auto}
.bcr-wheel svg{width:100%;height:100%;overflow:visible}
.bcr-wheel .bcr-ring{fill:none;stroke:var(--bcr-line);stroke-width:1}
.bcr-wheel .bcr-spoke{stroke:var(--bcr-line);stroke-width:1;transition:stroke .35s ease,stroke-width .35s ease}
.bcr-wheel .bcr-spoke.is-on{stroke:var(--bcr-accent);stroke-width:1.6}
.bcr-wheel .bcr-hub{fill:var(--bcr-ink)}
.bcr-wheel .bcr-pin{fill:var(--bcr-line);transition:fill .35s ease,r .35s ease}
.bcr-wheel .bcr-pin.is-on{fill:var(--bcr-accent)}
.bcr-wheel text{
  font-family:Poppins,'Helvetica Neue',Arial,sans-serif;font-size:12px;font-weight:500;
  fill:var(--bcr-mute);transition:fill .3s ease;
}
.bcr-wheel text.is-on{fill:var(--bcr-ink);font-weight:600}
.bcr-wheel .bcr-hublabel{font-size:10.5px;font-weight:700;letter-spacing:.16em;fill:var(--bcr-ink)}

@media (max-width:980px){
  .bcr-list .bcr-item{grid-template-columns:2.6rem minmax(0,1fr)}
  .bcr-list .bcr-desc{grid-column:2}
  .bcr-roles{grid-template-columns:minmax(0,1fr)}
  .bcr-wheel{order:-1;max-width:320px}
}
@media (prefers-reduced-motion:reduce){
  .bcr-item,.bcr-name,.bcr-sub,.bcr-role-desc,.bcr-cards .bcr-item{transition:none!important}
  .bcr-item{opacity:1;transform:none}
  .bcr-sub{max-height:none;opacity:1}
  .bcr-role-desc{max-height:none;opacity:1}
}