/* Aufklappbarer Block der Editor-Seiten (admin/seite, Blockart „Aufklappbar“): Link-Kasten + Kasten, der beim Klick aufgeht.
   Zusammen mit more.js; Maße/Farben setzt more.js als Variablen (--more-*) aus articleScript.js. Seit 2026-11-09. */

.more-head { margin: 0; position: relative; z-index: 2; text-align: center; }
.more .more-btn {
  display: inline-block; max-width: 100%; box-sizing: border-box; padding: .55em .9em;
  font-family: futuraM, sans-serif; font-size: .8em; font-style: normal; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; color: #333; background: #fff;
  border: var(--more-bw, 3px) solid var(--more-c1, MediumBlue); box-shadow: 3px 3px 7px rgba(0,0,0,.1);
  transform: rotate(calc(2deg * var(--more-k, 1)));                /* zu: leicht nach rechts, offen: nach links (s. u.) */
  transition: background .3s ease, color .3s ease, transform .25s cubic-bezier(.33,1,.68,1);
  /* Drehung: so lang und mit derselben Kurve wie die Rahmenlinie, die aus dem Knopf nach links/rechts wächst
     (more.js T_LINE = 250 ms, easeOut kubisch = cubic-bezier(.33,1,.68,1)) */
}
.more .more-btn:visited { color: #333; }
/* schmales Layout (Handy/Hochkant, wie articleScript.js: Seitenverhältnis ≤ 3:4): 0,9 statt 0,8 der Textgröße – 0,8 wirkte
   dort zu klein (12,8 px), 1em bricht die Beschriftung um. Die Zahlen der Zeigerwerk-Animation übernehmen diese Größe. */
@media (max-aspect-ratio: 3/4) { .more .more-btn { font-size: .9em; } }
.more .more-btn:hover, .more .more-btn:focus-visible { color: #fff; background: var(--more-c1, MediumBlue); }
/* Link-Text zu / offen (zweiter Text optional; ohne JavaScript ist der Kasten offen → Text für offen) */
.more-js .more:not(.open) .more-t-auf, .more-js .more.open .more-t-zu, html:not(.more-js) .more-t-zu { display: none; }
.more-js .more.open .more-btn { transform: rotate(calc(-2deg * var(--more-k, 1))); }   /* offen: leicht nach links */

/* offen: der Link sitzt auf der oberen Kante des Kastens (ragt um --more-ov hinein, der Text darunter bleibt frei) */
html:not(.more-js) .more .more-head,
.more-js .more.open .more-head { margin-bottom: calc(-1 * var(--more-ov, .8em) - var(--more-room, 10px)); }

.more-body { display: flow-root; margin: 0 calc(-1 * var(--more-out, 0px)); padding: 0 var(--more-gap, 6px); }
/* flow-root: die Abstände des Kastens fallen nie mit denen der Nachbarn zusammen – sonst springt der Inhalt am Ende der Animation */
.more-box {
  background: #fff; border: var(--more-bw, 3px) solid var(--more-c2, DeepPink); box-shadow: 3px 3px 7px rgba(0,0,0,.1);
  padding: var(--more-pad, 1.5em);                                 /* rundum gleich; der Link ragt nur um --more-ov hinein */
  margin: var(--more-room, 10px) 0 calc(var(--more-room, 10px) + .4em);
  font-style: italic; line-height: var(--more-tlh, 1.65); position: relative;   /* Zeilenabstand 7,5 % größer als der Fließtext */
  transform: rotate(calc(1.3deg * var(--more-k, 1)));
}
.more-box > :first-child, .more-box > .more-frame:first-child + * { margin-top: 0; }   /* (Rahmen-SVG steht vorne) */
.more-box > :last-child { margin-bottom: 0; }
.more-text > :first-child { margin-top: 0; }                      /* mit JavaScript steckt der Text in .more-text (more.js) */
.more-text > :last-child { margin-bottom: 0; }

/* Animation (nur mit JavaScript, Ablauf siehe more.js): Linie, Höhe, Zeilen und Schatten steuert more.js Bild für Bild
   (keine CSS-Übergänge an Höhe/Rand); der Kasten steht dabei still in seiner Endlage (schräg); sichtbar ist nur die vom
   SVG gemalte Fläche bis zur wandernden Unterkante (.more-anim) und die Zeilen, die schon hineinpassen */
.more-js .more-body { height: 0; overflow: hidden; }
.more-js .more.more-done .more-body { overflow: visible; }
.more-js .more-box { box-shadow: none; transition: box-shadow .4s ease; }   /* steht sofort in Endlage, kein Einblenden/Drehen */
.more-js .more-box.more-shadowed { box-shadow: 3px 3px 7px rgba(0,0,0,.1); }   /* Schatten erst am Ende */
.more-js .more-box.more-anim { background: transparent; }        /* während der Animation malt das SVG die weiße Fläche (more.js) */
html:not(.more-js) .more .more-btn { pointer-events: none; }   /* ohne JavaScript: Kasten offen, Link nur Überschrift */

/* Rahmen als SVG-Pfad von more.js (erst die obere Linie, dann das wachsende Rechteck); der echte Rahmen ist dann
   durchsichtig, behält aber seinen Platz. Ecken spitz (miter), Enden eckig */
.more-js .more-box { border-color: transparent; }
.more-frame { position: absolute; left: calc(-1 * var(--more-bw, 3px)); top: calc(-1 * var(--more-bw, 3px));
  overflow: visible; pointer-events: none; }
.more-frame path { fill: none; stroke: var(--more-c2, DeepPink); stroke-width: var(--more-bw, 3px); stroke-linecap: square; stroke-linejoin: miter; }

/* Rückkehr per „Zurück“ mit offenem Kasten (more.js): sofort offen, ohne Animation */
.more-instant .more-head, .more-instant .more-body, .more-instant .more-box, .more-instant .more-btn { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .more-head, .more-js .more-body, .more-js .more-box, .more .more-btn, .more-frame path { transition: none; }
}