/* ==========================================================================
   IVS Quadranten – FINAL CSS (vollständig, kopierfähig)
   - Desktop/Tablet: 2x2 Grid + Expansion (smooth)
   - Mobile: 1 Spalte / Accordion (Panel fließt unter Button)
   - Badge "MITGLIED" folgt dem inneren Schnittpunkt der Quadranten (Desktop/Tablet)
   - Badge ist klickbar (schließt per JS)
   - Desktop/Tablet: Overlay-Panel soft fade/slide + Backdrop innerhalb der Card
   - WCAG: prefers-reduced-motion respektiert
   ========================================================================== */
.ivs-quad-wrap{
  opacity:1 !important;
  transition:none !important;
}
/* ---------- Container ---------- */
/*.ivs-quad-container{
  max-width:1320px;
  margin:0 auto;
  padding:64px 24px;
}*/
.ivs-quad-title{ margin:0 0 8px 0; }
.ivs-quad-subtitle{ margin:0 0 24px 0; }

/* ---------- Grid core ---------- */
.ivs-quad{
  --gap:16px;
  gap:var(--gap);

  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;

  min-height:clamp(420px, 40vw, 560px);

  /* Badge anchor (0..1). Default: center (4 small) */
  --bx:0.5;
  --by:0.5;

  /* Smooth expand */
  transition: grid-template-columns 260ms ease, grid-template-rows 260ms ease;
}
@media (prefers-reduced-motion: reduce){
  .ivs-quad{ transition:none; }
}
@media (min-width: 768px){
  .ivs-quad__item:not(.is-open) .ivs-quad__detail{ pointer-events:none; }
}
/* ---------- Item positioning ---------- */
.ivs-quad__item{
  position:relative;
  min-height:0;

  border-radius:30px;
  overflow:hidden;

  background:var(--dbl);
  color:#fff;

  border:1px solid rgba(0,0,0,.10);
  z-index:1;
}
.ivs-quad__item.is-open{ z-index:2; }

.ivs-quad__item--community { grid-area:1 / 1; }
.ivs-quad__item--network   { grid-area:1 / 2; }
.ivs-quad__item--impact    { grid-area:2 / 1; }
.ivs-quad__item--visibility{ grid-area:2 / 2; }

/* ---------- Button fills card ---------- */
.ivs-quad__cell{
  width:100%;
  height:100%;
  display:block;

  background:transparent !important;
  border:0;

  padding:clamp(16px, 2vw, 28px);
  text-align:left;

  cursor:pointer;
  appearance:none;

  transition:transform 200ms ease, opacity 200ms ease, box-shadow 200ms ease;
}
.ivs-quad__item:hover .ivs-quad__cell{ transform:translateY(-10px); }
.ivs-quad__cell:focus-visible{ outline:3px solid var(--or); outline-offset:2px; }

/* Force readable text even if theme overrides buttons */
.ivs-quad__cell,
.ivs-quad__cell *{
  color:#fff !important;
}

/* Headline like h2 (visual), without changing semantics */
.ivs-quad__kicker{
  display:block;
  font-size:clamp(22px, 1.8vw, 36px);
  line-height:1.15;
  font-weight:800;
  letter-spacing:.01em;
  margin:0 0 10px 0;
}
.ivs-quad__punch{
  display:block;
  font-size:clamp(14px, 1.05vw, 16px);
  opacity:.92;
  line-height:1.35;
}

/* CTA */
.ivs-quad__cta{
  display:inline-block;
  margin-top:12px;
  font-weight:800;
  text-decoration:none;

  color:var(--dbl) !important;
  background:var(--or);

  border-radius:999px;
  padding:10px 14px;
}

/* ---------- Panel (base) ---------- */
.ivs-quad__detail{
  background:var(--dbl);
  color:#fff;
}
/* On desktop/tablet it is overlay (absolute). On mobile it becomes static. */
@media (min-width: 768px){
  .ivs-quad__detail{
    position:absolute;
    inset:0;
    z-index:2;

    padding:clamp(16px, 2vw, 28px);
    overflow:auto;
    -webkit-overflow-scrolling:touch;

    /* Soft open state (visible when item is-open) */
    opacity:0;
    transform:translateY(18px) scale(0.985);
    transition:
      opacity 360ms cubic-bezier(.2,.9,.2,1),
      transform 360ms cubic-bezier(.2,.9,.2,1);
    will-change:opacity, transform;
  }

  .ivs-quad__item.is-open .ivs-quad__detail{
    opacity:1;
    transform:translateY(0) scale(1);
  }

  /* During JS-driven closing fade */
  .ivs-quad__detail[data-closing="true"]{
    opacity:0 !important;
    transform:translateY(18px) scale(0.985) !important;
    pointer-events:none;
  }

  /* NOTE: hidden panels must still be non-interactive; JS sets hidden after fade */
  .ivs-quad__detail[hidden]{
    pointer-events:none;
  }

  @media (prefers-reduced-motion: reduce){
    .ivs-quad__detail{
      transition:none;
      transform:none;
    }
  }
}

/* ---------- Backdrop inside open card (Desktop/Tablet) ---------- */
@media (min-width: 768px){
  .ivs-quad__item.is-open::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;

    background:
      radial-gradient(120% 90% at 15% 0%, rgba(255,255,255,0.16), rgba(255,255,255,0) 60%),
      linear-gradient(180deg, rgba(0,0,0,0.32), rgba(0,0,0,0.12));

    opacity:0;
    transition:opacity 360ms cubic-bezier(.2,.9,.2,1);
  }
  .ivs-quad__item.is-open::before{ opacity:1; }

  @media (prefers-reduced-motion: reduce){
    .ivs-quad__item.is-open::before{ transition:none; }
  }
}

/* ---------- Dim inactive tiles when one is active ---------- */
@media (min-width:768px){
  .ivs-quad[data-active] .ivs-quad__item{ opacity:.65; }
  .ivs-quad[data-active] .ivs-quad__item.is-open{
    opacity:1;
    box-shadow:0 10px 30px rgba(0,0,0,.18);
  }
}

/* ---------- Badge: follows inner intersection + always on top ---------- */
.ivs-quad__center{
  position:absolute;
  z-index:50;

  left: calc((100% - var(--gap)) * var(--bx) + (var(--gap) / 2));
  top:  calc((100% - var(--gap)) * var(--by) + (var(--gap) / 2));
  transform:translate(-50%,-50%);

  /* must be clickable to close */
  pointer-events:auto !important;
  cursor:pointer;
}
.ivs-quad__badge{
  background:var(--or);
  color:var(--dbl) !important;
  border-radius:999px;
  padding:14px 18px;
  font-weight:800;
  letter-spacing:.06em;
  box-shadow:0 8px 24px rgba(0,0,0,.15);

  pointer-events:auto !important;
}

/* ---------- Expansion ratios + badge intersection fractions ---------- */
/* Desktop: 1.7 / 0.85 => big/(big+small)=0.6666667 */
@media (min-width:1024px){
  .ivs-quad[data-active="community"]{
    grid-template-columns:minmax(0,1.7fr) minmax(0,0.85fr);
    grid-template-rows:   minmax(0,1.7fr) minmax(0,0.85fr);
    --bx:0.6666667; --by:0.6666667;
  }
  .ivs-quad[data-active="network"]{
    grid-template-columns:minmax(0,0.85fr) minmax(0,1.7fr);
    grid-template-rows:   minmax(0,1.7fr)  minmax(0,0.85fr);
    --bx:0.3333333; --by:0.6666667;
  }
  .ivs-quad[data-active="impact"]{
    grid-template-columns:minmax(0,1.7fr)  minmax(0,0.85fr);
    grid-template-rows:   minmax(0,0.85fr) minmax(0,1.7fr);
    --bx:0.6666667; --by:0.3333333;
  }
  .ivs-quad[data-active="visibility"]{
    grid-template-columns:minmax(0,0.85fr) minmax(0,1.7fr);
    grid-template-rows:   minmax(0,0.85fr) minmax(0,1.7fr);
    --bx:0.3333333; --by:0.3333333;
  }
}

/* Tablet: 1.35 / 1 => 1.35/2.35=0.5744681 */
@media (min-width:768px) and (max-width:1023px){
  .ivs-quad{ min-height:clamp(420px, 55vw, 600px); }

  .ivs-quad[data-active="community"]{
    grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    grid-template-rows:   minmax(0,1.35fr) minmax(0,1fr);
    --bx:0.5744681; --by:0.5744681;
  }
  .ivs-quad[data-active="network"]{
    grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
    grid-template-rows:   minmax(0,1.35fr) minmax(0,1fr);
    --bx:0.4255319; --by:0.5744681;
  }
  .ivs-quad[data-active="impact"]{
    grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    grid-template-rows:   minmax(0,1fr) minmax(0,1.35fr);
    --bx:0.5744681; --by:0.4255319;
  }
  .ivs-quad[data-active="visibility"]{
    grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
    grid-template-rows:   minmax(0,1fr) minmax(0,1.35fr);
    --bx:0.4255319; --by:0.4255319;
  }
}

/* ---------- Mobile: 1 column / accordion; badge above; panel flows ---------- */
@media (max-width:767px){
  .ivs-quad{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    min-height:auto;

    /* badge position handled by static layout on mobile */
    --bx:0.5;
    --by:0.5;
  }

  .ivs-quad__item--community,
  .ivs-quad__item--network,
  .ivs-quad__item--impact,
  .ivs-quad__item--visibility{ grid-area:auto; }

  /* badge becomes normal block above accordions */
  .ivs-quad__center{
    position:static;
    left:auto;
    top:auto;
    transform:none;
    margin:0 0 12px 0;
    order:-1;
  }
  .ivs-quad__badge{
    box-shadow:none;
    display:inline-block;
  }

  /* accordion panel: flow under button */
  .ivs-quad__item{ overflow:visible; }
  .ivs-quad__cell{
    height:auto !important;
    transform:none !important; /* avoid hover shift on touch */
  }
  .ivs-quad__detail{
    position:static !important;
    inset:auto !important;
    padding:clamp(14px, 4vw, 18px);
    margin:10px 0 0 0;
  }
}
.contrast .ivs-quad__item, .contrast .ivs-quad__detail{
  background:black;
}
.contrast .ivs-quad__item p, .contrast .ivs-quad__detail p, .contrast #main .ivs-quad__detail li{
  color:white;
}
.contrast .ivs-quad__badge{
  border:5px solid white;
  background:black;
  color:white !important;
}
.ivs-quad__detail{
  border-radius:16px;
}