/* Review-Ansicht mit Prüfpunkten (Skill website-bauen). Gehört zu review.js; die Livefassung entfernt beide Dateien.
   Dock unten rechts (links sitzen meist die Knöpfe der Seite), am Seitenende hält review.js Platz dafür frei.
   Ohne Klasse pp-an am html-Element (live, ?review=0, „Ansicht ohne Prüfpunkte“) sind alle Prüfpunkte verborgen.
   Marken und Rahmen verschieben nichts: Rahmen als outline, jede Nummernmarke als Pseudo-Element mit position: absolute. */
:root { --pp: #ff7a1a; --pp-text: #111111; --rf: #8e8e93; --rf-text: #ffffff; }

html:not(.pp-an) [data-freigabe] { display: none !important; }
html.pp-an [data-ersatz-fuer] { display: none !important; }

html.pp-an :is([data-freigabe], [data-rueckfrage]) { outline: 2px dashed var(--pp); outline-offset: -2px; }
html.pp-an [data-rueckfrage] { outline-color: var(--rf); }
/* Text im Fluss (Klasse pp-inline von review.js): getönt, Rahmen außen */
html.pp-an .pp-inline[data-freigabe] { background: color-mix(in srgb, var(--pp) 18%, transparent); outline-offset: 1px; }
html.pp-an .pp-inline[data-rueckfrage] { background: color-mix(in srgb, var(--rf) 20%, transparent); outline-offset: 1px; }

/* Nummernmarke als ::after (ohne Skript und wo die Seite ::before nutzt) oder ::before (pp-vorn), immer absolut.
   Text kommt aus data-pp-kurz. review.js ordnet jede Stelle beim Aufbau ein, dazu nach resize, Umschalten und Aufklappen
   von details:
   pp-vorn    Die Seite nutzt ::before an diesem Element nicht (wie meist): Marke an ::before statt ::after. Eine absolute
              Marke am Ende eines Absatzes ändert in Chrome den Umbruch bei text-wrap: pretty, am Anfang nicht.
              Nutzt die Seite ::before selbst (etwa für Häkchen in Listen), bleibt die Marke an ::after.
   pp-rel     Element war position: static und bekommt position: relative als Bezug für die Marke. absolute, fixed,
              sticky und relative bleiben unberührt. Die Regel hat keine Spezifität (:where), jede Positionsregel der
              Seite gewinnt.
   pp-klein   Inline, reiner Textblock oder unter 64 px hoch (li, p, span, a, summary, nav): Marke über dem Element,
              rechtsbündig (bei Inline über mehrere Zeilen über dem Ende der ersten Zeile).
   pp-eng     wie pp-klein, aber dort schnitte overflow die Marke ab: Marke innen in der Ecke oben rechts.
   pp-ohne    Die Seite setzt position: static ausdrücklich, die Marke hätte keinen Bezug: keine Marke, nur der Rahmen.
   ohne Klasse  Kacheln, figure, Abschnitte (auch, solange das Skript noch nicht eingeordnet hat): innen oben rechts,
              dort schneidet overflow: hidden sie nicht ab.
   --pp-versatz (Inline-Stil von review.js) rückt eine Marke nach links, wo sie sonst eine andere überdeckt. Bei Inline
              über mehrere Zeilen rückt es sie an das Ende der ersten Zeile. */
:where(html.pp-an .pp-rel) { position: relative; }
html.pp-an :is([data-freigabe], [data-rueckfrage])[data-pp-kurz]:not(.pp-vorn)::after,
html.pp-an :is([data-freigabe], [data-rueckfrage])[data-pp-kurz].pp-vorn::before {
  content: attr(data-pp-kurz); display: block;
  position: absolute; z-index: 30; inset: 8px 8px auto auto; margin: 0 var(--pp-versatz, 0px) 0 0;
  width: auto; height: auto; max-width: none; aspect-ratio: auto; border: 0; transform: none; opacity: 1;
  padding: 0 7px; border-radius: 999px;
  background: var(--pp); color: var(--pp-text);
  font: 700 11px/20px system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .02em; text-transform: none;
  text-indent: 0; text-shadow: none; white-space: nowrap; pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
html.pp-an .pp-klein[data-pp-kurz]:not(.pp-vorn)::after, html.pp-an .pp-klein.pp-vorn[data-pp-kurz]::before { top: -18px; right: 0; }
html.pp-an .pp-eng[data-pp-kurz]:not(.pp-vorn)::after, html.pp-an .pp-eng.pp-vorn[data-pp-kurz]::before { top: 0; right: 0; }
html.pp-an .pp-ohne[data-pp-kurz]:not(.pp-vorn)::after, html.pp-an .pp-ohne.pp-vorn[data-pp-kurz]::before { content: none; }
html.pp-an [data-rueckfrage][data-pp-kurz]:not(.pp-vorn)::after,
html.pp-an [data-rueckfrage].pp-vorn[data-pp-kurz]::before { background: var(--rf); color: var(--rf-text); }
html.pp-an .review-ziel:focus-visible { outline: 3px solid var(--pp) !important; outline-offset: 2px; }

.review-dock {
  --review-ring: var(--pp);
  position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 90;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; max-width: min(560px, calc(100% - 24px));
  padding: 8px 10px; border-radius: 16px;
  background: rgba(255, 255, 255, .94); color: #111111;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18), 0 0 0 2px var(--review-ring);
  font: 500 13px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html:not(.pp-an) .review-dock { --review-ring: var(--rf); }
.review-dock__info { margin: 0; flex: 1 1 100%; font-weight: 600; }
.review-dock button, .review-panel button {
  min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: #111111; color: #ffffff; font: 600 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif; white-space: nowrap;
}
.review-dock button + button { background: #e8e8ed; color: #111111; }
/* Einklappknopf: rund an der Ecke oben rechts, ändert die Höhe des Docks nicht. Eingeklappt bleibt nur die Pille. */
.review-dock .review-dock__klapp {
  position: absolute; top: -10px; right: -10px; width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 50%;
  background: #ffffff; color: #111111; box-shadow: 0 2px 8px rgba(0, 0, 0, .2), 0 0 0 2px var(--review-ring);
}
.review-dock__klapp::before {
  content: ""; display: block; width: 7px; height: 7px; margin: -4px auto 0;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.review-dock.review-dock--zu { padding: 0; border-radius: 999px; }
.review-dock--zu > :not(.review-dock__klapp) { display: none; }
.review-dock.review-dock--zu .review-dock__klapp {
  position: static; width: auto; height: auto; min-height: 36px; padding: 0 14px; border-radius: 999px;
  background: none; box-shadow: none;
}
.review-dock--zu .review-dock__klapp::before { content: none; }
.review-platz { display: block; height: 0; margin: 0; padding: 0; border: 0; }
.review-panel {
  position: fixed; right: 12px; bottom: calc(108px + env(safe-area-inset-bottom, 0px)); z-index: 91;
  width: min(480px, calc(100% - 24px)); max-height: min(70vh, 640px); overflow-y: auto;
  padding: 16px 18px; border-radius: 18px; background: #ffffff; color: #111111;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
  font: 400 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.review-panel__kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.review-panel h2 { margin: 0; font-size: 16px; }
.review-panel h3 { margin: 14px 0 6px; font-size: 13px; text-transform: none; }
.review-panel p { margin: 8px 0 0; color: #555555; }
.review-panel ol { margin: 0; padding: 0; list-style: none; }
.review-panel li { padding: 7px 0; border-top: 1px solid #ececf0; }
.review-panel li a { color: #111111; font-weight: 600; text-decoration: none; }
.review-panel li a:hover { text-decoration: underline; }
.review-panel .stellen { display: block; margin-top: 2px; }
.review-panel .stellen a { margin-right: 10px; font-weight: 400; }
@media (max-width: 760px) {
  .review-dock { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); padding: 6px 8px; font-size: 12px; }
  .review-panel { bottom: calc(170px + env(safe-area-inset-bottom, 0px)); max-height: 60vh; }
}
@media print { .review-dock, .review-panel, .review-platz { display: none !important; } }

/* Offenes Menü der Seite (body.menue-offen) nicht mit dem Dock verdecken */
.menue-offen .review-dock, .menue-offen .review-panel { display: none !important; }