/* ==========================================================================
   ÜBER UNS · Mitglieder-Blöcke (Vorstand + Register), Flip-Cards, Zitate,
   mobiles Akkordeon. Hero (.hero--cutout) und Scroll-Sequenz (.scrolly)
   kommen aus components.css.
   ========================================================================== */
.members{padding-block:clamp(50px,6vw,110px) clamp(80px,9vw,170px)}
.members__register{margin-bottom:clamp(60px,7vw,140px)}
/* Sprungziele (#vorstand, #register-…, #mitglied-…) nicht unter Logo/Menü */
.members__register,.mcard{scroll-margin-top:120px}
.members__head{margin-bottom:clamp(30px,3.6vw,70px)}
/* Pfeil nur fürs mobile Akkordeon */
.members__toggle{display:none}
.members__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,34px);
  margin-right:var(--wrap-r);
}
/* bloxs hängt die Karten ohne Wrapper an: der Container verschwindet aus
   dem Layout, damit die Karten Grid-Zellen bleiben */
.members__karten{display:contents}

/* ---------- Flip-Card ---------- */
.mcard{position:relative;aspect-ratio:1/1;perspective:1400px;cursor:pointer}
.mcard__inner{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transition:transform .7s var(--ease-out);
}
.mcard.is-flipped .mcard__inner{transform:rotateY(180deg)}
.mcard__face{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  overflow:hidden;
}
.mcard__front img,.mcard__front video{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.mcard:hover .mcard__front img,.mcard:hover .mcard__front video{transform:scale(1.05)}
.mcard__name{
  position:absolute;left:clamp(12px,1.3vw,24px);bottom:clamp(10px,1.1vw,20px);
  font-weight:700;text-transform:uppercase;
  font-size:clamp(16px,1.35vw,26px);
  text-shadow:0 1px 14px rgba(32,32,32,.7);
  max-width:70%;line-height:1.05;
}
.mcard__fold{
  position:absolute;right:0;bottom:0;
  width:clamp(40px,3.6vw,68px);height:clamp(40px,3.6vw,68px);
  background:var(--paper);
  clip-path:polygon(100% 0, 0 100%, 100% 100%);
  display:flex;align-items:flex-end;justify-content:flex-end;
  transition:width .3s var(--ease-out),height .3s var(--ease-out);
}
.mcard:hover .mcard__fold{width:clamp(48px,4.3vw,82px);height:clamp(48px,4.3vw,82px)}
.mcard__fold svg{width:45%;height:45%;color:var(--ink);margin:0 12% 10% 0}
/* Krone für Ehrenmitglieder (Kundenwunsch): oben links, 5° gedreht, ragt über
   die Ecke hinaus – darum ausserhalb der Seiten (die schneiden ab) und nur auf
   der Vorderseite: beim Umdrehen blendet sie aus */
.mcard__krone{
  --krone:clamp(40px,3.4vw,64px);
  position:absolute;z-index:2;
  top:calc(var(--krone) * -.3);left:calc(var(--krone) * -.3);
  width:var(--krone);height:var(--krone);
  transform:rotate(-5deg);
  pointer-events:none;
  transition:opacity .25s var(--ease-out);
}
.mcard__krone svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.mcard:not([data-ehren="true"]) .mcard__krone{display:none}
.mcard.is-flipped .mcard__krone{opacity:0}
.mcard__back{
  background:var(--paper);color:var(--ink);
  transform:rotateY(180deg);
  padding:clamp(16px,1.8vw,34px);
  display:flex;flex-direction:column;
}
.mcard__back .h3{margin-bottom:.5em}
.mcard__back .meta{color:#4a4a4a}
.mcard__back [data-field]:empty{display:none}
/* Auswahl der Kommissionen: nur Datenquelle für die Tags, nie sichtbar */
.mcard__kommissionen{display:none}
/* ohne Klarname: Übername als Titel, «Steckbrief folgt …», pinker Tag */
/* .mcard__alias bekommt den Übernamen per ueber-uns.js als Text */
.mcard:not([data-klarname=""]) .mcard__alias,
.mcard:not([data-klarname=""]) .mcard__folgt,
.mcard:not([data-klarname=""]) .mcard__tag--fleiga,
.mcard:not([data-ehren="true"]) .mcard__tag--ehren,
.mcard:not([data-kandidat="true"]) .mcard__tag--kandidat{display:none}
.mcard__tags{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start}
.mcard__tag{
  font-size:clamp(11px,.8vw,15px);line-height:1.2;
  border:1.5px solid var(--ink);border-radius:999px;
  padding:.45em 1em;
}
/* Ehrenmitglied und Kandidat:in stehen zuerst und dunkel, damit sie sich von den Kommissionen abheben */
.mcard__tag--ehren,.mcard__tag--kandidat{background:var(--ink);color:var(--paper)}
.mcard__tag--pink{border-color:var(--pink);color:var(--pink)}

/* ---------- Kommissionen (Sammlung, Quelle der Tags): nie sichtbar, auch
   nicht im Editor (im Feedback sah die Liste wie ein Fehler aus) – gepflegt
   wird sie im Backend, Kachel «Kommissionen» ---------- */
.kommissionen{display:none}

/* ---------- Zitat-Kachel (leer → ausgeblendet) ---------- */
.mquote{
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-weight:700;text-transform:uppercase;
  font-size:clamp(20px,1.9vw,38px);line-height:1.15;
  padding:clamp(10px,1.5vw,30px);
}
.mquote:empty,.mquote[hidden]{display:none}
/* bis bloxs die Karten gerendert hat, stünde das Zitat in der ersten Zelle */
html:not([data-geladen]):not([data-ohne-cms]):not(.kein-js) .mquote{visibility:hidden}
/* im Editor bleibt die leere Kachel als Platzhalter anklickbar */
html[data-modus="bearbeiten"] .mquote:empty{display:flex;min-height:4em}
/* Zuklappen unter den Karten gibt es nur im mobilen Akkordeon */
.members__zu{display:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .members__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  /* Handy: jede Karte auf einer eigenen Reihe (Kundenwunsch); ab ~650 px
     (Tablet hochkant) zwei nebeneinander. Symmetrisch wie components.css. */
  .members__grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px;margin-right:0}
  .mquote{grid-column:1 / -1}

  /* ---------- Akkordeon: Überschriftenzeile mit Pfeil rechts ---------- */
  .members__register{margin-bottom:0;border-top:2px solid var(--paper)}
  .members__register,.mcard{scroll-margin-top:110px}
  .members__register:last-child{border-bottom:2px solid var(--paper)}
  .members__head{
    position:relative;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    margin-bottom:0;padding-block:20px;
  }
  .members__toggle{
    display:flex;align-items:center;justify-content:center;flex:none;
    width:44px;height:44px;margin-right:-8px;
    color:var(--paper);
  }
  /* die ganze Zeile ist klickbar */
  .members__toggle::after{content:"";position:absolute;inset:0}
  .members__toggle:focus-visible{outline:none}
  .members__toggle:focus-visible::after{outline:3px solid var(--pink);outline-offset:-3px}
  .members__toggle svg{width:28px;height:28px;transition:transform .45s var(--ease-out)}
  .members__register.is-offen .members__toggle svg{transform:rotate(180deg)}
  /* Pfeil unter den Karten: klappt zu (ueber-uns.js) */
  .members__zu{
    display:flex;align-items:center;justify-content:center;
    grid-column:1 / -1;justify-self:center;
    width:44px;height:44px;margin-top:4px;
    color:var(--paper);
  }
  .members__zu svg{width:28px;height:28px;transform:rotate(180deg)}
  .members__body{padding-bottom:0}

  /* zugeklappt nur mit JS und ausserhalb des Editors */
  html:not(.kein-js):not([data-modus="bearbeiten"]) .members__body{
    display:grid;grid-template-rows:0fr;
    visibility:hidden;
    transition:grid-template-rows .5s var(--ease-out),padding-bottom .5s var(--ease-out),visibility 0s linear .5s;
  }
  html:not(.kein-js):not([data-modus="bearbeiten"]) .members__body>.members__grid{min-height:0;overflow:hidden}
  html:not(.kein-js):not([data-modus="bearbeiten"]) .is-offen .members__body{
    grid-template-rows:1fr;padding-bottom:28px;
    visibility:visible;
    transition:grid-template-rows .5s var(--ease-out),padding-bottom .5s var(--ease-out),visibility 0s;
  }
  /* fertig aufgeklappt: nichts mehr abschneiden (3D-Drehung der Karten) */
  html:not(.kein-js):not([data-modus="bearbeiten"]) .is-offen.ist-auf .members__body>.members__grid{overflow:visible}
  html.kein-js .members__toggle,
  html[data-modus="bearbeiten"] .members__toggle,
  html.kein-js .members__zu,
  html[data-modus="bearbeiten"] .members__zu{display:none}
  html.kein-js .members__body,
  html[data-modus="bearbeiten"] .members__body{padding-bottom:28px}

  /* ---------- Rückseite: Typo wächst mit der Karte (längster Fall:
     Klarname, Funktion, «Mitglied seit …», Ehrenmitglied) ---------- */
  .mcard{container-type:inline-size}
  .mcard__name{font-size:clamp(16px,7cqi,24px)}
  .mcard__fold{width:clamp(40px,13cqi,56px);height:clamp(40px,13cqi,56px)}
  .mcard__krone{--krone:clamp(40px,14cqi,56px);top:-8px;left:-8px}
  .mcard__back{padding:8cqi 8cqi 9cqi}
  .mcard__back .h3{font-size:clamp(15px,11cqi,22px);line-height:1.08;margin-bottom:.4em;overflow-wrap:anywhere}
  .mcard__back .meta{font-size:clamp(11px,8cqi,14px);line-height:1.35}
  .mcard__tags{padding-top:6px}
  .mcard__tag{font-size:clamp(10px,6.6cqi,13px);padding:.4em .85em}
}

/* Desktop: die Maske beginnt rechts vom Titel (wie Home und Gönner werden) */
@media (min-width:821px){
  #hero .hero__cutout video,#hero .hero__cutout>img{left:20vw}
}