/* ════════════════════════════════════════════════════════════════════
   thesen22 — Index-Sektion als Karteikasten (Ansatz E, 2026-08-29)
   „Alle Thesen im Index" klappt als GANZES auf: der Deckel trägt die
   Überschrift, darunter schauen zwei angedeutete Karten hervor. Nur auf
   thesen.html geladen; die Zeilen selbst (.v6-gindex/.v6-row) bleiben
   unverändert und behalten ihre Links.
   ════════════════════════════════════════════════════════════════════ */

/* Der Deckel bringt seinen eigenen 1320er-Rahmen mit, damit Kante und
   Liste bündig laufen — die Liste gibt ihren dafür ab (sonst doppelt). */
.v6-idxbox{max-width:1320px; margin:0 auto; padding:0 40px;}
/* Bezugsrahmen NUR fuer den Deckel — die Karten haengen an dessen Unterkante
   (top:100%). Waere der Rahmen die ganze Box, saessen sie unter der Liste. */
.v6-idxhead{position:relative;}
.v6-idxsec .v6-gindex{max-width:none; margin:0; padding-inline:0;}

.v6-idxlid{
  position:relative; z-index:2; width:100%;
  background:var(--paper-pure); border:1px solid var(--ink);
  padding:30px 32px; cursor:pointer; text-align:left;
  font-family:inherit; color:inherit;
  display:grid; grid-template-columns:1fr auto; align-items:end; gap:14px 26px;
}
/* Überschrift links, Schalter rechts; die Bilanz sitzt unter der Überschrift. */
.v6-idxlid .v6-gh{grid-column:1; grid-row:1;}
.v6-idxmeta{grid-column:1; grid-row:2; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--graphite);}
.v6-idxsign{grid-column:2; grid-row:1 / span 2; align-self:center;
  position:relative; width:22px; height:22px; color:var(--ink);
  transition:transform var(--d-base) var(--ease-out);}
.v6-idxsign::before,.v6-idxsign::after{content:""; position:absolute; inset:50% 0 auto 0;
  height:2px; background:currentColor; transform:translateY(-50%);}
.v6-idxsign::after{transform:translateY(-50%) rotate(90deg);
  transition:transform var(--d-base) var(--ease-out), opacity var(--d-fast) var(--ease-out);}
.v6-idxsec[data-open="true"] .v6-idxsign::after{transform:translateY(-50%) rotate(0); opacity:0;}
.v6-idxlid:focus-visible{outline:2px solid var(--blue); outline-offset:4px;}

/* Zwei angedeutete Karten unter dem Deckel — verschwinden beim Öffnen.
   Innerhalb der Box-Polsterung, damit sie schmaler als der Deckel wirken. */
.v6-idxcard{position:absolute; height:22px; background:var(--paper-pure);
  border:1px solid rgba(10,10,10,.30); border-top:0; z-index:1;
  transition:opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);}
.v6-idxcard--2{left:54px; right:54px; top:100%; margin-top:-1px;}
.v6-idxcard--3{left:68px; right:68px; top:100%; margin-top:8px;
  border-color:rgba(10,10,10,.18); z-index:0;}
.v6-idxsec[data-open="true"] .v6-idxcard{opacity:0; transform:translateY(-8px);}

/* Aufklappen über grid-template-rows 0fr→1fr: animiert die echte Höhe der
   ganzen Liste, ohne geratenen max-height-Wert. Die Zeilen bleiben in
   jedem Zustand im DOM — nur eingeklappt, nicht entfernt. */
.v6-idxbody{position:relative; z-index:2;
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows 420ms var(--ease-out);}
.v6-idxsec[data-open="true"] .v6-idxbody{grid-template-rows:1fr;}
.v6-idxbody-in{overflow:hidden;}
.v6-idxsec[data-open="true"] .v6-idxbody-in{padding-top:30px;}

@container v6 (max-width:1024px){
  .v6-idxbox{padding-inline:28px;}
  .v6-idxcard--2{left:42px; right:42px;}
  .v6-idxcard--3{left:56px; right:56px;}
}
@container v6 (max-width:600px){
  .v6-idxbox{padding-inline:20px;}
  .v6-idxlid{padding:22px; gap:12px 18px;}
  .v6-idxcard--2{left:32px; right:32px;}
  .v6-idxcard--3{left:44px; right:44px;}
}

@media (prefers-reduced-motion:reduce){
  .v6-idxbody,.v6-idxsign,.v6-idxsign::after,.v6-idxcard{transition:none;}
}

/* Der Deckel bekommt dasselbe Scroll-Reveal wie die uebrigen Sektionskoepfe
   (.v6-ghead in thesen15.css) — sonst poppt er als einziger herein.
   Freigabe ueber denselben IntersectionObserver, s. SEL in thesen.html. */
.js-fx .v6-idxhead{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change:opacity, transform;
}
.js-fx .v6-idxhead.is-revealed{opacity:1; transform:none;}