/* ============================================================
   Weblandschaften: Klappbloecke fuer lange Seiten auf dem Handy
   ------------------------------------------------------------
   WOFUER
   Lange Erklaerungen, Teilnahmebedingungen und Steuerhinweise
   stehen auf dem Handy sonst alle gleichzeitig offen untereinander.
   Dieses Muster klappt sie bis 640px zu. Ab 641px ist der Block
   ein ganz normaler Textabschnitt wie vorher.

   MUSTER
     <details class="mk" open>
       <summary>
         <h3 class="mk-t">Ueberschrift</h3>
         <span class="mk-h">Ein kurzer Satz, worum es geht.</span>
       </summary>
       <div class="mk-body">
         … der lange Inhalt …
       </div>
     </details>

   Der Block umschliesst nur Ueberschrift und Inhalt. Alles darum
   herum (Raster, Karten, Nummern in der Randspalte) bleibt
   unveraendert, deshalb muss keine Seite ihr Layout umbauen.

   OHNE JAVASCRIPT
   Das open-Attribut steht im Quelltext. Faellt JavaScript aus,
   ist alles offen und damit lesbar. mobil-kompakt.js nimmt das
   Attribut auf schmalen Bildschirmen wieder heraus und sperrt das
   Zuklappen auf dem Desktop.

   EINBINDUNG
   Diese Datei wird NACH dem <style>-Block der Seite eingebunden.
   Nur so gewinnt sie bei gleicher Spezifitaet gegen Seitenregeln
   wie "details{…}" oder "summary{…}", die es auf mehreren Seiten
   bereits gibt.

   SCHRIFTGROESSEN stehen hier bewusst nicht drin. Die regelt allein
   der Block "MOBILE TYPOGRAFIE" in shopnav.css. Die Zusammenfassung
   bekommt deshalb zusaetzlich die dort gepflegte Klasse "hint"
   (<span class="mk-h hint">), das ist die vorgesehene Kleintextgroesse.
   ============================================================ */

/* ------------------------------------------------------------
   Standard (ab 641px): normaler Abschnitt, keine Klappmechanik.
   Die Zeile mit dem Pfeil verschwindet nicht, sie traegt ja die
   Ueberschrift. Sie sieht nur aus wie eine Ueberschrift und
   verhaelt sich auch so: mobil-kompakt.js verhindert dort das
   Zuklappen und nimmt sie aus der Tabulator-Reihenfolge.
   ------------------------------------------------------------ */
.mk{display:block;border:0;background:transparent;border-radius:0;box-shadow:none;overflow:visible}
.mk > summary{display:block;margin:0;padding:0;gap:0;background:transparent;color:inherit;
  font:inherit;cursor:default;list-style:none;transition:none;-webkit-tap-highlight-color:transparent}
.mk[open] > summary,.mk > summary:hover{background:transparent}
.mk > summary::-webkit-details-marker{display:none}
.mk > summary::marker{content:""}
.mk > summary::after{content:none}
.mk > summary .mk-h{display:none}
.mk > .mk-body{display:block;padding:0}

/* ------------------------------------------------------------
   Handy (bis 640px): der Block wird zur antippbaren Karte.
   ------------------------------------------------------------ */
@media(max-width:640px){
  .mk{border:1px solid var(--line,#E8ECF3);border-radius:13px;background:#fff;overflow:hidden}
  .mk + .mk{margin-top:8px}

  .mk > summary{display:grid;grid-template-columns:minmax(0,1fr) 16px;align-items:start;
    column-gap:10px;padding:12px 14px;cursor:pointer;
    -webkit-tap-highlight-color:rgba(25,195,125,.14)}
  .mk > summary:focus-visible{outline:2px solid var(--green,#19C37D);outline-offset:-2px}

  /* Pfeil aus zwei Rahmenlinien, damit keine Bilddatei noetig ist. */
  .mk > summary::after{content:"";grid-column:2;grid-row:1;width:8px;height:8px;
    margin:6px 0 0 3px;border-right:2px solid var(--faint,#8A9AB0);
    border-bottom:2px solid var(--faint,#8A9AB0);transform:rotate(45deg);
    transition:transform .2s ease,border-color .2s ease}
  .mk[open] > summary{background:var(--bg-mint,#F1FAF5)}
  .mk[open] > summary::after{margin-top:9px;transform:rotate(-135deg);border-color:#0E7C5A}

  .mk > summary .mk-t{grid-column:1;grid-row:1;margin:0}
  .mk > summary .mk-h{grid-column:1;grid-row:2;display:block;margin:4px 0 0;
    color:var(--ink2,#56657B)}

  .mk > .mk-body{padding:0 14px 14px}
  .mk > .mk-body > :first-child{margin-top:0}
  .mk > .mk-body > :last-child{margin-bottom:0}

  /* Variante fuer Bloecke, die schon in einer Karte stehen. Sonst saehe man
     eine Karte in der Karte. Es bleibt nur der Pfeil und das Zuklappen. */
  .mk.mk-plain{border:0;border-radius:0;background:transparent;overflow:visible}
  .mk.mk-plain + .mk.mk-plain{margin-top:0}
  .mk.mk-plain > summary{padding:0}
  .mk.mk-plain[open] > summary{background:transparent}
  .mk.mk-plain > .mk-body{padding:8px 0 0}
}

/* ------------------------------------------------------------
   Knopfpaar "Alle aufklappen" / "Alle zuklappen".
   Auf dem Desktop gibt es nichts zuzuklappen, deshalb nur bis 640px.
   ------------------------------------------------------------ */
.mk-tools{display:none}
@media(max-width:640px){
  .mk-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .mk-tool{font-family:var(--fb,"Inter",system-ui,sans-serif);font-weight:600;
    color:var(--ink2,#56657B);background:#fff;border:1.5px solid var(--line,#E8ECF3);
    border-radius:999px;padding:7px 13px;cursor:pointer;display:inline-flex;
    align-items:center;gap:6px;transition:border-color .15s,color .15s,background .15s}
  .mk-tool:hover,.mk-tool:focus-visible{border-color:var(--green,#19C37D);color:#0E7C5A}
  .mk-tool[aria-disabled="true"]{opacity:.45;pointer-events:none}
  /* Pfeil im Knopf, zeigt die Richtung an. */
  .mk-tool svg{width:14px;height:14px;flex-shrink:0}
}

@media(prefers-reduced-motion:reduce){
  .mk > summary::after{transition:none}
}