/* =========================================================================
   Familien der Götter · „Mehr erfahren“ im Steckbrief (zu goetter-mehr.js)
   Spielschachtel-Look: Knopf als Karte mit Kante, Inhalt klappt weich auf.
   ========================================================================= */
.mehr{display:grid;gap:0}
.mehr[hidden]{display:none}
.mehr__knopf{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;width:100%;padding:12px 14px 12px 16px;text-align:left;cursor:pointer;
  border:2.5px solid var(--kante,#0A0820);border-radius:16px;background:var(--tinte-2);color:var(--papier);
  box-shadow:0 4px 0 var(--kante,#0A0820);font:inherit;
  transition:transform .28s var(--feder),box-shadow .28s var(--feder),background-color .2s,border-radius .3s var(--ease)}
.mehr__knopf:hover{background:var(--tinte-3);transform:translateY(-2px);box-shadow:0 6px 0 var(--kante,#0A0820)}
.mehr__knopf:active{transform:translateY(3px);box-shadow:0 1px 0 var(--kante,#0A0820);transition-duration:.08s}
.mehr__knopf:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}
.mehr__knopf-text{display:grid;gap:2px;min-width:0}
.mehr__knopf-text b{font-family:var(--f-display);font-weight:600;font-size:17px;line-height:1.2}
.mehr__knopf-text small{font-size:13px;color:var(--papier-2)}
.mehr__pfeil{width:34px;height:34px;padding:7px;border-radius:50%;background:var(--akzent);color:var(--akzent-text,#121028);border:2.5px solid var(--kante,#0A0820);flex:none;
  transition:transform .45s var(--feder)}
.ist-offen .mehr__pfeil{transform:rotate(180deg)}
.ist-offen .mehr__knopf{border-radius:16px 16px 6px 6px;background:var(--tinte-3)}

/* weiches Aufklappen ohne feste Höhe */
.mehr__huelle{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.ist-offen .mehr__huelle{grid-template-rows:1fr}
.mehr__innen{min-height:0;overflow:hidden;display:grid;gap:16px;padding:0 4px}
.ist-offen .mehr__innen{padding:18px 4px 4px}
.mehr__teil{display:grid;gap:6px;opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.ist-offen .mehr__teil{opacity:1;transform:none;transition-delay:calc(.12s + var(--i,0) * .08s)}
.mehr__teil h4{display:flex;align-items:center;gap:9px;margin:0;font-family:var(--f-display);font-weight:600;font-size:18px;color:var(--papier)}
.mehr__teil h4 svg{width:26px;height:26px;padding:4px;flex:none;border-radius:8px;background:var(--deckel,#0C0A26);color:var(--akzent);border:2px solid var(--kante,#0A0820)}
.mehr__teil p{margin:0;font-size:15.5px;line-height:1.62;color:var(--papier);text-wrap:pretty}
.mehr__quelle{margin:2px 0 0;font-size:12px;color:var(--papier-2)}
.mehr.ohne-uebergang .mehr__huelle,.mehr.ohne-uebergang .mehr__teil,.mehr.ohne-uebergang .mehr__pfeil{transition:none!important}

@media (prefers-reduced-motion:reduce){
  .mehr__huelle,.mehr__teil,.mehr__pfeil,.mehr__knopf{transition:none!important}
  .mehr__knopf:hover{transform:none}
}