/* Korrekturen am statischen Export — erzeugt von migrate.js, nicht handeditieren.
   Beide Blocks heilen dasselbe Grundproblem: Onepage entscheidet zur Laufzeit im
   Browser, was und wo gerendert wird. Ein statischer Export friert eine Entscheidung
   ein — hier wird sie wieder beweglich gemacht. */

/* 1) Viewport-Varianten umschalten.
      Die Plattform rendert je Viewport ein eigenes Sektionsset und eigene
      Menue-Geraete-Varianten (nicht per Media Query, sondern clientseitig).
      Beide Staende liegen gespiegelt im Dokument; hier wird umgeschaltet.
      Breakpoint empirisch am Live-Rendering ermittelt. */
@media (max-width: 992px) { .u-only-desktop { display: none !important; } }
@media (min-width: 993px) { .u-only-mobile { display: none !important; } }

/* 2) Hervorhebungen am Text zeichnen statt an eingefrorenen Pixelkoordinaten.
      Die Plattform setzt Unterstreichungen und Marker als absolut positionierte
      Overlays, deren top/left/width/height sie im Browser in PIXELN berechnet. Im
      Export sind das die Werte der Capture-Breite. Deshalb hier neu gezeichnet —
      als HINTERGRUND am Text-Span: der wird pro Zeilenfragment gezeichnet
      (box-decoration-break: clone), also auch bei umbrechendem Text unter jeder
      Zeile, so wie im Original, und bei jeder Fensterbreite.

      Alle Werte sind am Live-Rendering gemessen, in em, damit sie mit der
      Schriftgroesse skalieren (die Plattform rechnet ebenso):
        Unterstreichung  1,266px bei 16px Schrift und 5,109px bei 64px = 0,08em,
                         buendig am Unterrand der Textbox
        Marker           Band 0,493em hoch, 0,061em ueber dem Unterrand,
                         0,161em Ueberhang je Seite, Deckkraft 0,4
      Farbe ist in beiden Faellen --color-border des Quarks. */
[data-highlight-type="underline"],
[data-highlight-type="marker"] {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-repeat: no-repeat;
}
[data-highlight-type="underline"] {
  background-image: linear-gradient(rgba(var(--color-border), var(--alpha-border, 1)),
                                    rgba(var(--color-border), var(--alpha-border, 1)));
  background-size: 100% 0.08em;
  background-position: 0 100%;
}
[data-highlight-type="marker"] {
  background-image: linear-gradient(rgba(var(--color-border), 0.4), rgba(var(--color-border), 0.4));
  background-size: calc(100% + 0.322em) 0.493em;
  background-position: -0.161em calc(100% - 0.061em);
}

/* Der handgezeichnete Strich ist eine SVG und laesst sich nicht als Hintergrund
   ausdruecken; migrate.js verschiebt dieses eine Overlay in seinen Text-Span und
   zieht es auf inset:0. Dafuer muss der Span der Bezugsrahmen sein. Kein z-index
   auf dem Span: sonst entstuende ein Stacking-Context und das Overlay (z-index:-1)
   laege VOR dem Text statt dahinter. */
[data-highlight-type="hand-underlined"] { position: relative; }
[data-highlight-type="hand-underlined"] .highlight-effect-hand-underlined {
  top: 0; left: 0; width: 100%; height: 100%; font-size: inherit;
}

/* Unter 480px bricht diese Ueberschrift auf zwei Zeilen — einem einzelnen Overlay
   kann das nicht folgen (der Strich liefe quer durchs Wort). Gemessen: Umbruch bei
   390px, einzeilig ab 480px. Dort deshalb dieselbe gerade Linie wie bei den
   uebrigen Hervorhebungen: richtig platziert statt handgezeichnet. */
@media (max-width: 479px) {
  .u-hl-hand { display: none !important; }
  [data-highlight-type="hand-underlined"] {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-image: linear-gradient(rgba(var(--color-border), var(--alpha-border, 1)),
                                      rgba(var(--color-border), var(--alpha-border, 1)));
    background-repeat: no-repeat;
    background-size: 100% 0.08em;
    background-position: 0 100%;
  }
}