/* v10 — wie v7, aber die Bedienknöpfe stehen unter dem Würfel.
   Karsten, 01.08.2026

   Ebene 1: die sechs Seiten, jede aufklappbar
   Ebene 2: darin die acht Bausteine, ebenfalls aufklappbar
   Alles bleibt im Dokument — nichts steht mehr auf display:none.

   Liegt NACH wuerfel.css. */

/* Die body-Regeln der Laborseite sind hier RAUS (Jakob 02.08.2026).
   Sie stammen aus dem Rahmen der eigenstaendigen Laborseite und haetten im
   Theme das Seitenlayout ueberschrieben — Innenabstand und Hintergrund kommen
   aus style.css. Diese Datei darf nur den Wuerfel gestalten, nichts darum. */

/* ------------------------------------------ Menü links, Würfel rechts */
.stage-grid {
  max-width: var(--w, 1320px); margin: 0 auto;
  display: grid; gap: 1.5rem 2rem;
  grid-template-areas: 'intro' 'menue' 'wuerfel' 'seiten';
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}
@media (min-width: 900px) {
  /* Jakob 01.08.: das ganze Menü mittig ÜBER dem Würfel — also keine
     Zwei-Spalten-Zeile mehr, alles untereinander und zentriert. */
  .stage-grid { grid-template-columns: minmax(0, 1fr); }
}
/* #info wird durchgereicht, damit Intro und Seitenblock eigene Plätze im
   Raster bekommen — im HTML liegen sie zusammen. */
.info                          { display: contents; }
.info .wb[data-w="intro"] { grid-area: intro; min-width: 0; width: 100%; }
/* Die sechs Seiten untereinander, volle Breite — Jakob 01.08.:
   drei Spalten sahen zerrissen aus. */
.v10-seitenblock {
  grid-area: seiten; min-width: 0; width: 100%;
  display: grid; gap: .6rem;
  grid-template-columns: minmax(0, 1fr);
}

.stage-grid > div:nth-child(3) { grid-area: menue; }

/* Bedienung unter der Anzeige — Jakob 01.08.: die Knöpfe gehören wieder
   unter den Würfel, nicht darüber. Also kein order-Eingriff, die natürliche
   Reihenfolge des Dokuments stimmt schon.
   Der Bereich füllt seine Hälfte aus (nicht `justify-self: center`), sonst
   schrumpft er auf die Würfelbreite — und das Popup darüber mit ihm. */
.stage-grid > div:nth-child(2) {
  grid-area: wuerfel; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.stage-grid .controls { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
@media (max-width: 600px) {
  .controls { flex-wrap: nowrap; }
  .controls .ctrl { flex: 1 1 0; min-width: 0; padding-left: .4rem; padding-right: .4rem; }
}

/* ------------------------------------------------------- Seitenmenü */
/* Volle Breite, mittig über dem Würfel. Der Zusatz (sichtbar/verdeckt)
   steht unter dem Namen, nicht rechts daneben — Jakob 01.08. */
.stage-grid > div:nth-child(3) { grid-area: menue; width: 100%; }
.dims {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  max-width: var(--w, 1320px); margin: 0 auto;
}
.drow {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .7rem .5rem; text-align: center; cursor: pointer;
  background: #fff; border: 1px solid var(--linie-hell, #dde2ee);
  border-bottom: 3px solid transparent; border-radius: 8px;
  font: inherit; color: var(--text-hell, #212529);
  transition: border-color .15s, background .15s;
}
.drow:hover { background: var(--hell, #F4F7FB); }
.drow.active { border-bottom-color: var(--mcol, var(--ci, #274C90)); background: #fff; }
.drow .sq {
  flex: none; display: inline-grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 6px;
  color: #fff; font-weight: 700; font-size: .95rem;
}
.drow .dn { font-weight: 600; font-size: .95rem; line-height: 1.2; }
.drow .tag {
  /* wuerfel.css setzt hier margin-left:auto — im alten Zeilen-Layout schob das
     den Zusatz nach rechts. Seit das Menue in Spalten steht, gehoert er unter
     den Namen und mittig (Jakob 02.08.2026). */
  margin-left: 0; margin-right: 0; align-self: center; text-align: center;
  font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-leise, #5D6B84);
}
/* Mobil höchstens drei je Zeile. */
@media (max-width: 700px) {
  .dims { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .drow { padding: .55rem .3rem; }
  .drow .dn { font-size: .85rem; }
  .drow .tag { display: none; }
}

/* ================================================ Ebene 1: die Seiten */
/* Alle sechs stehen im Dokument — das Original blendet je Zustand nur
   einen ein. Drei Klassen, um `.info.js .wb` zu schlagen. */
.info.js .wb { display: block !important; }
/* KEIN `display: grid` auf .info — es wird durchgereicht (weiter oben),
   damit Intro und Seitenblock eigene Plätze im Raster bekommen. Der
   Abstand zwischen den sechs Seiten steht am .v10-seitenblock. */

.info .wb[data-w="intro"] {
  background: var(--hell, #F4F7FB);
  border-left: 4px solid var(--ci, #274C90);
  border-radius: 0 6px 6px 0; padding: 1rem 1.15rem;
}
.info .wb[data-w="intro"] h2 { margin: 0 0 .3rem; font-size: 1.2rem; color: var(--ueber, #274C90); }
.info .wb[data-w="intro"] h3 { margin: 0 0 .5rem; font-size: 1rem; }
.info .wb[data-w="intro"] p  { margin: 0 0 .5rem; }
.info .wb[data-w="intro"] p:last-child { margin-bottom: 0; }

.v10-seite {
  border: 1px solid var(--linie-hell, #dde2ee);
  border-left: 5px solid var(--col, #274C90);
  border-radius: 6px; background: #fff; overflow: hidden;
}
.v10-seite > summary {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding: .85rem 1.1rem; cursor: pointer; list-style: none;
}
.v10-seite > summary::-webkit-details-marker { display: none; }
.v10-seite > summary::after {
  content: '+'; margin-left: auto; flex: none;
  font-size: 1.4rem; font-weight: 700; line-height: 1; color: var(--col, #274C90);
}
.v10-seite[open] > summary::after { content: '–'; }
.v10-seite > summary:hover { background: var(--hell, #F4F7FB); }
.v10-seite > summary:focus-visible { outline: 2px solid var(--col, #274C90); outline-offset: -2px; }

.v10-seite .wnum {
  flex: none; display: inline-grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 5px;
  color: #fff; font-weight: 700;
}
.v10-sname { font-size: 1.15rem; font-weight: 600; }
.v10-sfrage { font-size: .9rem; color: var(--text-mild, #4A5568); }

.v10-inhalt { padding: 0 1.1rem 1.1rem; border-top: 1px solid var(--linie-hell, #dde2ee); }
.info.js .v10-inhalt .wmeta {
  display: block; margin: .8rem 0 .4rem;
  font-size: .75rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-leise, #5D6B84);
}
/* Volle Breite fuer alle Texte im Wuerfel (Jakob 02.08.2026) — die
   ch-Begrenzungen stammen aus der Laborseite, wo der Wuerfel allein auf der
   Seite stand. Im Theme sitzt er in einem Container, der die Zeilenlaenge
   schon fasst; eine zweite Begrenzung liess die Spalten schmal wirken. */
.info.js .v10-inhalt .wtext { display: block; margin: 0 0 1rem; }
.info.js .v10-inhalt .whin { display: block; margin: 0 0 .5rem; font-weight: 600; }

/* ============================================ Ebene 2: die Bausteine */
.wpunkte { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.wpunkte > li {
  border: 1px solid var(--linie-hell, #dde2ee);
  border-radius: 5px; background: var(--hell, #F4F7FB); overflow: hidden;
}
.wpunkte summary {
  display: grid; grid-template-columns: auto 1fr auto; gap: .1rem .55rem;
  align-items: center; padding: .6rem .8rem; cursor: pointer; list-style: none;
}
.wpunkte summary .wfrage { grid-column: 2; }
.wpunkte summary::-webkit-details-marker { display: none; }
.wpunkte summary::after {
  content: '+'; grid-column: 3; grid-row: 1 / span 2; align-self: center;
  font-size: 1.1rem; font-weight: 700; line-height: 1; color: var(--col, #274C90);
}
.wpunkte details[open] > summary::after { content: '–'; }
.wpunkte summary:hover { background: #fff; }
.wpunkte summary:focus-visible { outline: 2px solid var(--col, #274C90); outline-offset: -2px; }

.v10-bnr {
  grid-row: 1 / span 2; display: inline-grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: 4px;
  background: var(--col, #274C90); color: #fff; font-size: .74rem; font-weight: 700;
}
.v10-bname { font-weight: 600; font-size: .97rem; }

/* Das Original versteckt .wfrage und .wdesc mit drei Klassen — hier muss
   die Spezifität mithalten, sonst bleibt trotz <details> alles zu. */
.info.js .wpunkte summary .wfrage {
  display: inline; font-weight: 400; font-size: .88rem;
  color: var(--text-mild, #4A5568);
}
.info.js .wpunkte details > .wdesc { display: none; }
.info.js .wpunkte details[open] > .wdesc {
  display: block; background: #fff;
  padding: 0 .8rem .8rem; border-top: 1px solid var(--linie-hell, #dde2ee);
}
.wdesc p { margin: .7rem 0 0; }

/* Der über den Würfel angesprungene Baustein */
.wpunkte > li.v10-hervor { box-shadow: 0 0 0 2px var(--col, #274C90); }

/* Knöpfe zum Auf- und Zuklappen */
.v10-alle {
  display: inline-flex; align-items: center; gap: .35rem;
  margin: 0 0 .7rem; padding: .35rem .8rem;
  border: 1px solid var(--col, #274C90); background: #fff;
  color: var(--col, #274C90); border-radius: 999px;
  font: inherit; font-size: .85rem; cursor: pointer;
}
.v10-alle:hover { background: var(--col, #274C90); color: #fff; }

@media (max-width: 600px) {
  .v10-seite > summary { padding: .75rem .85rem; }
  .v10-sfrage { flex-basis: 100%; }
  .wpunkte .wfrage { flex-basis: 100%; }
}

/* Das Original setzt `.info.js .wpunkte` auf einen Fluss nebeneinander —
   als Chip-Reihe richtig, als Accordion unruhig (jede Zeile anders breit).
   Drei Klassen, damit die Liste hier wirklich untereinander steht. */
/* Die acht Bausteine: 50/50, mobil 100 % (Jakob 01.08.).
   Feste Spaltenzahl statt auto-fill — sonst verteilt sich der Rest nach
   Inhaltslänge und es werden 42/51. */
.info.js .v10-inhalt .wpunkte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}
@media (max-width: 700px) {
  .info.js .v10-inhalt .wpunkte { grid-template-columns: minmax(0, 1fr); }
}

.info.js .v10-inhalt .wpunkte > li {
  /* Das Original stellt die Einträge auf display:contents — dann gibt es
     keine Box, an der Rahmen, Hintergrund und Ecken hängen könnten. */
  display: block; width: auto;
}

/* ------------------------------------------------------------ Dialog */
.v5-dialog {
  padding: 0; border: 0; border-radius: var(--radius, 8px);
  max-width: min(640px, 92vw); width: 100%;
  box-shadow: 0 18px 50px rgba(19, 28, 43, .3);
  color: var(--text-hell, #212529);
}
.v5-dialog::backdrop { background: rgba(19, 28, 43, .55); }

.v5-kopf {
  /* Mittig statt oben angeheftet — die Zahl klebte sonst an der Oberkante. */
  display: flex; align-items: center; gap: .75rem;
  padding: 1.1rem 1.25rem; background: var(--col, #274C90); color: #fff;
}
.v5-kopf .v5-nr { background: rgba(255, 255, 255, .22); width: 2rem; height: 2rem; font-size: .9rem; }
.v5-kopf h2 { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.v5-kopf .v5-frage { color: rgba(255, 255, 255, .85); font-size: .92rem; }
.v5-zu {
  margin-left: auto; flex: none;
  width: 2rem; height: 2rem; display: grid; place-items: center;
  background: rgba(255, 255, 255, .16); border: 0; border-radius: 6px;
  color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.v5-zu:hover { background: rgba(255, 255, 255, .3); }

.v5-koerper { padding: 1.25rem; max-height: 60vh; overflow-y: auto; }
.v5-koerper p { margin: 0 0 .9rem; }
.v5-koerper p:last-child { margin-bottom: 0; }

.v5-fuss {
  display: flex; align-items: center; gap: .5rem;
  padding: .8rem 1.25rem; border-top: 1px solid var(--linie-hell, #dde2ee);
  background: var(--hell, #F4F7FB);
}
.v5-blaettern {
  padding: .45rem .8rem; border: 1px solid var(--linie-hell, #dde2ee);
  background: #fff; border-radius: 6px; font: inherit; font-size: .88rem;
  cursor: pointer; color: var(--col, #274C90);
}
.v5-blaettern:hover:not(:disabled) { border-color: var(--col, #274C90); }
.v5-blaettern:disabled { opacity: .4; cursor: default; }
.v5-zaehler {
  margin: 0 auto; font-size: .85rem; color: var(--text-mild, #4A5568);
}

/* Auf Tablet und Handy formatfüllend — dort ist ein Fenster in der Mitte
   fummelig, und der Daumen erreicht die untere Leiste besser. */
@media (max-width: 860px) {
  .v5-dialog {
    max-width: 100%; width: 100%; height: 100%; max-height: 100%;
    margin: 0; border-radius: 0;
    display: flex; flex-direction: column;
  }
  .v5-koerper { max-height: none; flex: 1; }
  .v5-fuss { position: sticky; bottom: 0; }
  .wpunkte { grid-template-columns: 1fr; }
}

/* Wer kein JavaScript hat, sieht die Beschreibungen weiterhin im Fluss —
   der Dialog ist eine Zutat, keine Voraussetzung. */
.v5-aus .wdesc { display: block; }


/* Eng: die Schachtelung Block › Seite › Inhalt › Karte kostete 130 px von
   390 — gemessen. Hier werden die Innenabstände auf das Nötige gekürzt,
   damit vom Text mehr übrig bleibt. */
@media (max-width: 600px) {
  /* Gemessen: von 390 px Fenster kamen nur 229 beim Text an. Der größte
     Brocken war #info selbst mit 2 × 25,6 px — nicht die Karten darin. */
  .info.js               { padding-left: 0; padding-right: 0; }
  .info.js .wb           { padding-left: 0; padding-right: 0; }
  .v10-seite              { border-left-width: 4px; padding: 0; }
  .v10-seite > summary    { padding: .7rem .6rem; }
  .info.js .v10-inhalt    { padding: 0 .6rem .8rem; }
  .info.js .v10-inhalt .wpunkte { gap: .4rem; }
  .wpunkte summary       { padding: .55rem .6rem; }
  .info.js .wpunkte details[open] > .wdesc { padding: 0 .6rem .6rem; }
}

/* ------------------------------------ Popup über dem Würfel */
/* Nicht in der Bildschirmmitte, sondern genau dort, wo geklickt wurde:
   der Dialog liegt über der Würfelfläche. Auf schmalen Geräten bleibt er
   formatfüllend und modal — dort ist ein schwebendes Fenster fummelig. */
.v10-wuerfelbereich { position: relative; }

@media (min-width: 861px) {
  /* Mittig über der Würfelfläche. Bezugspunkt ist der Würfelbereich, der
     die volle Breite hat — deshalb left:50% plus Rückversatz um die halbe
     eigene Breite. */
  .v10-wuerfelbereich .v5-dialog[open] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    right: auto; bottom: auto;
    margin: 0;
    width: min(640px, 92%); max-width: none;
    height: auto; max-height: 100%;
    display: flex; flex-direction: column; z-index: 5;
  }
  .v10-wuerfelbereich .v5-dialog::backdrop { background: transparent; }
  .v10-wuerfelbereich .v5-koerper { flex: 1; max-height: none; }
  .v10-wuerfelbereich:has(.v5-dialog[open]) .scene { filter: blur(2px); opacity: .5; }
}

/* --------------------------------------------- Einstieg auf/zuklappbar */
.v10-intro > summary {
  display: flex; align-items: center; gap: .6rem;
  cursor: pointer; list-style: none;
}
.v10-intro > summary::-webkit-details-marker { display: none; }
.v10-intro > summary::after {
  content: '+'; margin-left: auto; flex: none;
  font-size: 1.4rem; font-weight: 700; line-height: 1;
}
.v10-intro[open] > summary::after { content: '–'; }
.v10-intro > summary:focus-visible { outline: 2px solid var(--ci, #274C90); outline-offset: 2px; }
/* Symbol raus — Jakob 01.08. */
.v10-isymbol { display: none; }
/* Die Überschrift steht IM Summary — als echtes h2, nicht als Kopie. */
.info.js .v10-intro > summary > h2 {
  margin: 0; font-size: 1.2rem; font-weight: 600; color: var(--ueber, #274C90);
}
.v10-ikoerper { padding-top: .6rem; width: 100%; }
.info.js .v10-ikoerper h3 { display: block; margin: 0 0 .5rem; font-size: 1rem; }
/* Volle Breite — Jakob 01.08. Die Begrenzung auf 72ch ließ die rechte
   Hälfte leer stehen. */
.info.js .v10-ikoerper p  { display: block; margin: 0 0 .6rem; max-width: none; }
.info.js .v10-ikoerper p:last-child { margin-bottom: 0; }

/* Ein <dialog> ist ungeöffnet display:none — das kommt vom Browser.
   Die Regel `display: flex` für schmale Geräte hebt das auf, dann steht das
   Popup dauerhaft im Weg. Deshalb hier ausdrücklich zurücknehmen. */
.v5-dialog:not([open]) { display: none !important; }

/* Aus dem Original: `.info.js .wb+.wb.show` setzte Abstand und Trennlinie
   zwischen zwei sichtbaren Blöcken. Hier stehen die Blöcke im eigenen
   Raster — die Regel stört nur. Jakob 01.08.: raus. */
.info.js .wb + .wb.show { margin-top: 0; padding-top: 0; border-top: 0; }

/* ------------------------------------- Übergang zum Nachlesen */
/* Trennt sichtbar: oben der Würfel zum Ausprobieren, hier der Lesestoff. */
.v10-lesekopf {
  /* Erstes Kind im Seitenblock, vor dem ersten Artikel. */
  grid-column: 1 / -1;
  border-top: 2px solid var(--linie-hell, #dde2ee);
  padding-top: 1.5rem; margin-bottom: .2rem;
}
.v10-lesekopf h2 {
  margin: 0 0 .25rem; font-size: 1.4rem; color: var(--ueber, #274C90);
}
.v10-lesekopf p {
  margin: 0 0 1rem; color: var(--text-mild, #4A5568);
}

/* ------------------------------------------ Ziffer im Popup-Kopf */
/* Sie saß oben links im Kästchen, weil display:block gewann. Kein
   padding-Trick zum Ausgleichen — ein Raster zentriert in beide
   Richtungen exakt, unabhängig von Schriftgröße und Zeilenhöhe. */
.v5-kopf .v5-nr,
.v5-dialog .v5-nr {
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  padding: 0;
  line-height: 1;
  font-size: .9rem; font-weight: 700;
  border-radius: 6px;
  background: rgba(255, 255, 255, .22);
  color: #fff;
}