/* =====================================================================
   3D Highspeed Learning – Frontend (Plugin)
   Eigenständig gestaltet, alle Klassen mit .hsl- Präfix, damit nichts mit
   dem Theme kollidiert. Helle „Ruhige Tiefe"-Anmutung.
   ===================================================================== */

/* Die Farben global, nicht nur in den fünf Rahmen weiter unten.
   ---------------------------------------------------------------------
   Sie standen bis zum 10.10.2026 NUR am Block darunter. Nicht jedes Stück
   des Plugins steckt aber in einem dieser Rahmen: Der Hinweiskasten der
   Übungen (.hsl-box-angebot) steht für sich. Dort waren --hsl-accent und
   --hsl-line undefiniert – und eine ungültige Farbangabe wirft CSS nicht
   teilweise, sondern GANZ weg. Aus dem blauen Knopf wurde ein durchsichtiger
   mit weisser Schrift, aus dem Rand des Kastens gar keiner. Sichtbar war nur
   noch der Schatten, der mit festen Werten geschrieben ist.
   Hier stehen bewusst NUR die Farben – kein `color:`. Das gehört dem Theme. */
:root {
  --hsl-accent:#0677a5; --hsl-accent2:#0a3d57; --hsl-orange:#d88c3d;
  --hsl-ink:#16242e; --hsl-muted:#5d6a72; --hsl-line:#e4e9ee;
  --hsl-ok:#2f9e6e; --hsl-warn:#d98e2b; --hsl-err:#cd4f4f; --hsl-idle:#8d939a;
}

.hsl-dash, .hsl-seetest, .hsl-uebung, .hsl-preise, .hsl-biblio {
  --hsl-accent:#0677a5; --hsl-accent2:#0a3d57; --hsl-orange:#d88c3d;
  --hsl-ink:#16242e; --hsl-muted:#5d6a72; --hsl-line:#e4e9ee;
  --hsl-ok:#2f9e6e; --hsl-warn:#d98e2b; --hsl-err:#cd4f4f; --hsl-idle:#8d939a;
  color:var(--hsl-ink);
}
.hsl-dash *, .hsl-seetest *, .hsl-uebung *, .hsl-preise *, .hsl-biblio * { box-sizing:border-box; }

.hsl-muted { color:var(--hsl-muted); }
.hsl-hint  { font-size:13px; color:var(--hsl-muted); margin:6px 0 0; }

.hsl-grid { display:grid; gap:18px; }
.hsl-grid-2 { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
@media (max-width:782px){ .hsl-grid-2 { grid-template-columns:minmax(0,1fr); } }

.hsl-card {
  background:#fff; border:1px solid var(--hsl-line); border-radius:14px;
  padding:20px; box-shadow:0 2px 10px rgba(16,52,71,.07);
}
.hsl-card h3 { margin:0 0 12px; font-size:18px; }

.hsl-box {
  background:#fff; border:1px solid var(--hsl-line); border-radius:12px;
  padding:16px 18px; box-shadow:0 2px 10px rgba(16,52,71,.07);
}

/* Buttons */
.hsl-btn {
  display:inline-block; background:linear-gradient(135deg,var(--hsl-accent),var(--hsl-accent2));
  color:#fff !important; font-weight:600; font-size:14px; text-decoration:none;
  padding:10px 18px; border:0; border-radius:9px; cursor:pointer; line-height:1.2;
  box-shadow:0 4px 12px rgba(7,135,188,.25); transition:transform .12s, filter .12s;
}
.hsl-btn:hover { transform:translateY(-1px); filter:brightness(1.05); }
.hsl-btn.hsl-sm { padding:6px 12px; font-size:13px; }
.hsl-btn-ghost { background:#fff; color:var(--hsl-accent) !important; border:1px solid var(--hsl-accent); box-shadow:none; }
.hsl-btn-danger { background:#fdf1f1; color:var(--hsl-err) !important; border:1px solid #ecc7c7; box-shadow:none; }

/* Formulare */
.hsl-dash input[type=text], .hsl-dash input[type=file] {
  width:100%; background:#fff; color:var(--hsl-ink);
  border:1px solid #c9d3da; border-radius:8px; padding:10px 12px; font-size:14px;
}
.hsl-file input { border-style:dashed; cursor:pointer; }
.hsl-inline { display:flex; gap:8px; }
.hsl-inline input { flex:1; }
.hsl-redeem { margin-top:14px; }
.hsl-redeem label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }

/* Kontaktformular [hsl_kontakt]. Eigene Regeln, weil die Felder oben an
   `.hsl-dash` hängen – der Kasten hier steht für sich. */
.hsl-kontakt label { font-size:13.5px; font-weight:600; }
.hsl-kontakt input[type=text],
.hsl-kontakt input[type=email],
.hsl-kontakt textarea {
  width:100%; background:#fff; color:var(--hsl-ink); font:inherit; font-size:15px;
  border:1px solid #c9d3da; border-radius:8px; padding:10px 12px; margin-top:5px;
}
.hsl-kontakt textarea { resize:vertical; min-height:150px; line-height:1.5; }
.hsl-kontakt input:focus, .hsl-kontakt textarea:focus {
  border-color:var(--hsl-accent); outline:2px solid rgba(6,119,165,.25); outline-offset:1px;
}
.hsl-kontakt-fehler {
  margin:0 0 16px; padding:12px 14px 12px 30px; border-radius:9px;
  background:#fdf1f1; border:1px solid #ecc7c7; color:var(--hsl-err); font-size:14.5px;
}
.hsl-kontakt-fehler li { margin:3px 0; }

/* Flash */
.hsl-flash { padding:12px 16px; border-radius:8px; margin-bottom:16px; border:1px solid; font-size:14px; }
.hsl-flash.hsl-success { background:#ecf7f1; border-color:#bfe3d2; color:#1d6b47; }
.hsl-flash.hsl-error   { background:#fdf1f1; border-color:#ecc7c7; color:#9c3838; }

/* Zugang / Speicher */
.hsl-access { list-style:none; padding:0; margin:0 0 14px; display:grid; gap:6px; font-size:14px; }
.hsl-storage { height:10px; background:#e9eef2; border:1px solid var(--hsl-line); border-radius:999px; overflow:hidden; margin:6px 0 4px; }
.hsl-storage > div { height:100%; background:linear-gradient(90deg,var(--hsl-accent),#0aa3e0); border-radius:999px; transition:width .4s; }
.hsl-storage > div.full { background:linear-gradient(90deg,var(--hsl-orange),var(--hsl-err)); }

/* Tabelle */
.hsl-libtitle { margin:26px 0 12px; }
.hsl-tablewrap { overflow-x:auto; background:#fff; border:1px solid var(--hsl-line); border-radius:14px; box-shadow:0 2px 10px rgba(16,52,71,.07); }
.hsl-table { width:100%; border-collapse:collapse; font-size:14px; }
.hsl-table th { text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--hsl-muted); padding:12px; border-bottom:2px solid #c9d3da; white-space:nowrap; }
.hsl-table td { padding:12px; border-bottom:1px solid var(--hsl-line); vertical-align:middle; }
.hsl-table tr:last-child td { border-bottom:0; }
.hsl-actions { display:flex; gap:6px; justify-content:flex-end; align-items:center; flex-wrap:wrap; }
.hsl-actions form { margin:0; }

/* Tags & Badges */
.hsl-tag { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:#eef3f6; color:#1d4f66; margin-left:6px; }
.hsl-badge { display:inline-flex; align-items:center; gap:7px; padding:4px 11px; border-radius:999px; font-size:12.5px; font-weight:600; background:#f2f5f7; border:1px solid var(--hsl-line); white-space:nowrap; }
.hsl-badge > span { width:7px; height:7px; border-radius:50%; background:var(--hsl-idle); }
.hsl-badge.ok   { background:#ecf7f1; border-color:#bfe3d2; color:#1d6b47; } .hsl-badge.ok > span { background:var(--hsl-ok); }
.hsl-badge.warn { background:#fdf5e9; border-color:#eed9b8; color:#8a5a14; } .hsl-badge.warn > span { background:var(--hsl-warn); animation:hslpulse 1.5s infinite; }
.hsl-badge.err  { background:#fdf1f1; border-color:#ecc7c7; color:#9c3838; } .hsl-badge.err > span { background:var(--hsl-err); }
@keyframes hslpulse { 50% { opacity:.4; } }

/* Upload-Fortschritt */
.hsl-progress { display:none; margin-top:12px; }
.hsl-progress.active { display:block; }
.hsl-progress-bar { height:8px; background:#e9eef2; border-radius:999px; overflow:hidden; margin-bottom:6px; }
.hsl-progress-bar > div { height:100%; width:0; background:linear-gradient(90deg,var(--hsl-accent),#0aa3e0); transition:width .2s; }
.hsl-progress span { font-size:12.5px; color:var(--hsl-muted); }

/* Player */
.hsl-player-wrap { width:100%; }
.hsl-player-frame { width:100%; height:78vh; min-height:520px; border:1px solid var(--hsl-line); border-radius:14px; background:#000; }
.hsl-player-tools { margin-top:10px; }

/* Übungs-Galerie */
.hsl-steps { margin:0 0 10px; padding-left:20px; }
.hsl-steps li { margin-bottom:6px; }
.hsl-tip { background:#fdf6ec; border:1px solid #eed9b8; border-left:3px solid var(--hsl-orange); border-radius:8px; padding:12px 14px; font-size:14px; color:#7c5314; margin:0; }

/* ===== Seh-Selbsttest ([hsl_seetest]) ===== */
.hsl-seetest { max-width:920px; margin:0 auto; }
.hsl-seetest-intro h3, .hsl-seetest-result h3 { margin:0 0 10px; }
.hsl-seetest-how { background:#f6f8fa; border:1px solid var(--hsl-line); border-radius:10px; padding:12px 14px; font-size:14px; margin:12px 0 16px; }
.hsl-seetest-bar { font-size:13px; font-weight:700; color:var(--hsl-muted); letter-spacing:.04em; margin-bottom:12px; text-transform:uppercase; }
.hsl-seetest-stage { background:#000; border-radius:10px; overflow:hidden; display:flex; justify-content:center; }
.hsl-seetest-img { display:block; width:100%; max-width:900px; height:auto; } /* Seitenverhältnis nie verzerren */
.hsl-seetest-q { text-align:center; font-weight:600; margin:16px 0 10px; font-size:17px; color:var(--hsl-ink); }
.hsl-seetest-choices { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.hsl-choice { width:56px; height:56px; border-radius:12px; border:1.5px solid var(--hsl-line); background:#fff; color:var(--hsl-ink); font-size:20px; font-weight:700; cursor:pointer; transition:transform .1s, border-color .1s, background .1s; }
.hsl-choice:hover { border-color:var(--hsl-accent); background:#f0f8fc; transform:translateY(-2px); }
.hsl-seetest-quiz > .hsl-btn-ghost { display:block; margin:14px auto 0; }
.hsl-seetest-result { text-align:center; }
.hsl-seetest-score { font-size:44px; font-weight:800; color:var(--hsl-accent); font-family:Georgia,"Times New Roman",serif; margin-bottom:6px; }
.hsl-seetest-tips { text-align:left; max-width:560px; margin:12px auto; color:var(--hsl-muted); font-size:14.5px; padding-left:20px; }
.hsl-seetest-tips li { margin-bottom:6px; }
.hsl-seetest-result .hsl-btn { margin:4px; }
.hsl-seetest-motiv { color:var(--hsl-accent); }
.hsl-seetest-siegel { display:inline-flex; align-items:center; gap:8px; background:#ecf7f1; border:1px solid #bfe3d2; color:#1d6b47; border-radius:999px; padding:8px 16px; font-weight:600; font-size:14px; margin-bottom:14px; }
.hsl-seetest-laden { text-align:center; color:var(--hsl-muted); padding:30px 0; }

/* =====================================================================
   Preistafel ([hsl_preise])
   Die Karten selbst gestaltet das Theme (.plans/.plan). Hier nur, was für
   die drei Laufzeiten dazugekommen ist – und ein Rückfall, falls die Tafel
   ohne das Theme läuft.
   ===================================================================== */
.hsl-preise .plans { max-width:1180px; }
.hsl-preise .hsl-plans-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.hsl-preise .hsl-plans-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
/* Vier Karten passen nur nebeneinander, wenn sie schlanker werden. */
.hsl-preise .hsl-plans-4 .plan  { padding:24px 20px; }
.hsl-preise .hsl-plans-4 .price { font-size:30px; }
.hsl-preise .hsl-plans-4 li     { font-size:14px; }
/* Fuenf Karten (mit Lerntest) werden schnell zu schmal - deshalb frueher
   umbrechen als die vierspaltige Tafel. Die engeren Umbrueche weiter
   unten stehen spaeter im Stylesheet und gewinnen damit. */
.hsl-preise .hsl-plans-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
.hsl-preise .hsl-plans-5 .plan  { padding:22px 16px; }
.hsl-preise .hsl-plans-5 .price { font-size:26px; }
.hsl-preise .hsl-plans-5 li     { font-size:13.5px; }
@media (max-width:1240px){ .hsl-preise .hsl-plans-5 { grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* Sechs Karten (mit Buch-Guthaben, 2.1.29) stehen NIE nebeneinander: zwei
   Reihen zu drei. Sechs Spalten waeren Streifen, in denen kein Preis mehr
   lesbar ist. Die engeren Umbrueche darunter greifen weiterhin. */
.hsl-preise .hsl-plans-6 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.hsl-preise .hsl-plans-6 .plan  { padding:24px 20px; }
.hsl-preise .hsl-plans-6 .price { font-size:30px; }
.hsl-preise .hsl-plans-6 li     { font-size:14px; }
@media (max-width:1020px){ .hsl-preise .plans { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
@media (max-width:680px){ .hsl-preise .plans { grid-template-columns:minmax(0,1fr); } }

.hsl-preise .plan { display:flex; flex-direction:column; }
.hsl-preise .plan ul { flex:1; }
.hsl-plan-sub { font-size:14.5px; }
/* Hinweis unter der Preistafel – zurückhaltend, aber lesbar (4.5:1). */
.hsl-preise-fussnote {
  max-width:900px; margin:26px auto 0; padding:14px 16px;
  background:#f6f8fa; border:1px solid var(--hsl-line); border-left:3px solid var(--hsl-orange);
  border-radius:8px; font-size:13.5px; line-height:1.6; color:var(--hsl-muted); text-align:left;
}
.hsl-preise-fussnote strong { color:var(--hsl-ink); }
.hsl-plan-btn { width:100%; justify-content:center; text-align:center; }

/* Betrag und Zeitraum untereinander: „CHF 53.45" und „pro Halbjahr" passen in
   der vierspaltigen Tafel nicht nebeneinander. */
.hsl-preise .price { line-height:1.12; }
.hsl-preise .price small { display:block; margin-top:3px; white-space:nowrap; }
.hsl-preis-detail { font-size:13.5px; color:var(--hsl-muted); margin:0 0 4px; min-height:20px; }
/* Kein opacity: das senkt den Kontrast unter den geforderten Wert (3.3:1
   statt 4.5:1). Der alte Preis bleibt deshalb voll deckend. */
.hsl-preis-alt { text-decoration:line-through; margin-right:7px; color:var(--hsl-muted); }
/* Weiss auf #2f9e6e ergibt nur 3.4:1 – abgedunkelt auf 4.6:1. */
.tag.hsl-sparen { background:#23794f !important; }

/* Nur für Screenreader – erklärt den durchgestrichenen Betrag. */
.hsl-sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Rückfall, falls das Theme .plan nicht gestaltet (z. B. fremdes Theme) */
.hsl-preise .plans { display:grid; gap:26px; margin:0 auto; }
.hsl-preise .plan { background:#fff; border:1px solid var(--hsl-line); border-radius:14px;
  padding:28px; position:relative; box-shadow:0 2px 10px rgba(16,52,71,.07); }

/* =====================================================================
   Sehtest-Spielwiese ([hsl_uebung]) – öffentlich, ohne Login
   ===================================================================== */
.hsl-uebung { max-width:980px; margin:0 auto; }
.hsl-u-intro h3 { font-size:21px; }
.hsl-u-anleitung { margin:14px 0 18px; }

/* Fortschritt */
.hsl-u-fortschritt { margin:18px 0 6px; }
.hsl-u-balken { height:10px; border-radius:999px; background:#eef2f5; overflow:hidden; }
.hsl-u-balken > div { height:100%; width:0; border-radius:999px; transition:width .35s ease;
  background:linear-gradient(90deg,var(--hsl-accent),#63c9a8); }
.hsl-u-zaehler { margin:8px 0 0; font-size:14.5px; color:var(--hsl-muted); }
.hsl-u-zaehler b { color:var(--hsl-ink); }

/* Stufenfilter */
.hsl-u-filter { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.hsl-chip { border:1px solid var(--hsl-line); background:#fff; color:var(--hsl-muted);
  border-radius:999px; padding:7px 15px; font-size:13.5px; font-weight:600; cursor:pointer; transition:all .12s; }
.hsl-chip:hover { border-color:var(--hsl-accent); color:var(--hsl-accent); }
/* Dunkles Markenblau statt des hellen: weiss auf dem alten #0787bc erreichte
   bei dieser Schriftgrösse nur 4.0:1, auf #0a3d57 sind es 11.6:1. Das helle
   Markenblau ist seit dem 05.10.2026 #0677a5 und käme hier auf 5.0:1 – das
   dunkle bleibt trotzdem, weil der aktive Filter sich deutlich abheben soll. */
.hsl-chip.aktiv { background:var(--hsl-accent2); border-color:var(--hsl-accent2); color:#fff; }

/* Galerie */
.hsl-u-galerie { display:grid; gap:18px; margin-top:18px; grid-template-columns:minmax(0,1fr); }
@media (min-width:1100px){ .hsl-u-galerie { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }

/* Kompakte Vorschau auf der Uebersichtsseite.
   Die Karten sind klein, weil ein verkleinertes Stereogramm ohnehin nicht zu
   fusionieren ist – die Periode betraegt 120 px bei 900 px Bildbreite. Gesehen
   wird in der Grossansicht, dort behaelt das Bild seine echte Groesse. */
.hsl-uebung:not(.hsl-u-teaser) .hsl-u-galerie { gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:700px){  .hsl-uebung:not(.hsl-u-teaser) .hsl-u-galerie { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1100px){ .hsl-uebung:not(.hsl-u-teaser) .hsl-u-galerie { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.hsl-uebung:not(.hsl-u-teaser) .hsl-u-karte { padding:10px; }

.hsl-u-vorschau { position:relative; display:block; width:100%; padding:0; border:0; cursor:pointer;
  border-radius:9px; overflow:hidden; background:#f4f6f8; line-height:0; }
.hsl-u-mini { display:block; width:100%; height:auto; aspect-ratio:900/520; object-fit:cover; }
.hsl-u-vorschau:hover .hsl-u-oeffnen,
.hsl-u-vorschau:focus-visible .hsl-u-oeffnen { opacity:1; }
.hsl-u-oeffnen { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(10,61,87,.62); color:#fff; font-size:13px; font-weight:600; line-height:1.3;
  opacity:0; transition:opacity .15s; }
.hsl-u-haken { position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:50%;
  background:#2f9e6e; color:#fff; font-size:13px; line-height:22px; text-align:center; display:none; }
.hsl-u-karte.erkannt .hsl-u-haken { display:block; }
.hsl-u-kopf-klein { margin:8px 0 0; gap:6px; }
.hsl-u-kopf-klein h4 { font-size:13.5px; gap:6px; }
.hsl-u-kopf-klein .hsl-u-nr { width:21px; height:21px; font-size:11.5px; }
.hsl-u-kopf-klein .hsl-tag { font-size:11px; padding:1px 7px; }
.hsl-u-karte { position:relative; transition:border-color .15s, box-shadow .15s; }
.hsl-u-karte.erkannt { border-color:#bfe3d2; box-shadow:0 2px 14px rgba(47,158,110,.18); }
/* min-width:0 ist noetig, weil ein Flex-Element von sich aus nicht unter seine
   min-content-Breite schrumpft. Ohne das schob der Titel auf schmalen Karten
   das Stufen-Etikett aus der Karte heraus; die Seite wurde dadurch breiter als
   der Bildschirm und iOS Safari verkleinerte sie ("shrink to fit"). */
.hsl-u-kopf { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; min-width:0; }
.hsl-u-kopf h4 { margin:0; font-size:16.5px; display:flex; align-items:center; gap:9px; min-width:0; overflow-wrap:anywhere; }
.hsl-u-kopf .hsl-tag { flex:0 0 auto; }
.hsl-u-nr { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; background:#eef6fb; color:var(--hsl-accent); font-size:13px; font-weight:700; flex:0 0 auto; }
.hsl-u-karte.erkannt .hsl-u-nr { background:#ecf7f1; color:#2f9e6e; }

.hsl-tag.hsl-stufe-leicht   { background:#ecf7f1; color:#1d6b47; border-color:#bfe3d2; }
.hsl-tag.hsl-stufe-mittel   { background:#fdf6ec; color:#8a5d16; border-color:#eed9b8; }
.hsl-tag.hsl-stufe-knifflig { background:#f3eefb; color:#5b3a95; border-color:#ded0f2; }

/* Bühne mit Lupe und Auflösung */
.hsl-u-buehne { position:relative; border-radius:10px; overflow:hidden; border:1px solid var(--hsl-line); background:#f4f6f8; }
.hsl-u-bild { display:block; width:100%; height:auto; }
.hsl-u-lupe { position:absolute; right:10px; bottom:10px; width:38px; height:38px; border-radius:9px;
  border:0; background:rgba(10,61,87,.72); color:#fff; font-size:17px; cursor:pointer; line-height:1; }
.hsl-u-lupe:hover { background:rgba(10,61,87,.92); }
.hsl-u-loesung { position:absolute; inset:0; background:#fff; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; padding:16px; text-align:center; }
/* Muss nach der display-Regel stehen: sonst gewinnt display:flex gegen [hidden]. */
.hsl-u-loesung[hidden] { display:none; }
.hsl-u-loesung img { max-width:62%; height:auto; border-radius:10px; }
.hsl-u-loesung p { margin:0; font-size:15px; color:var(--hsl-muted); }

.hsl-u-aktionen { display:flex; gap:9px; flex-wrap:wrap; margin-top:14px; }
.hsl-u-karte.erkannt .hsl-u-gesehen { background:linear-gradient(135deg,#2f9e6e,#1d6b47); box-shadow:0 4px 12px rgba(47,158,110,.25); }

.hsl-u-schluss { margin-top:22px; text-align:center; }
.hsl-u-schluss h3 { margin:0 0 8px; }
.hsl-u-schluss p { margin:0 0 12px; color:var(--hsl-muted); }

/* Teaser-Variante (Startseite) */
.hsl-u-teaserkopf { text-align:center; color:var(--hsl-muted); max-width:640px; margin:0 auto 18px; }
.hsl-u-teaser .hsl-u-galerie { grid-template-columns:minmax(0,1fr); }
@media (min-width:900px){ .hsl-u-teaser .hsl-u-galerie { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.hsl-u-teaser .hsl-u-kopf h4 { font-size:15px; }
.hsl-u-mehr { text-align:center; margin-top:22px; }

/* Grosse Ansicht */
.hsl-u-lightbox { position:fixed; inset:0; z-index:99999; background:rgba(8,26,36,.93);
  display:flex; align-items:center; justify-content:center; padding:20px; }
.hsl-u-lightbox[hidden] { display:none; }
.hsl-u-lightbox img { max-width:min(100%,1100px); max-height:92vh; height:auto; border-radius:10px; }
.hsl-u-zu { position:absolute; top:14px; right:18px; width:42px; height:42px; border:0; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; font-size:26px; line-height:1; cursor:pointer; }
.hsl-u-zu:hover { background:rgba(255,255,255,.26); }

/* Grossansicht mit Zuruck-Knopf und Aktionen (nur Uebersichtsseite).
   Das Stereogramm bleibt bei seiner echten Breite von 900 px – wird es
   kleiner gerechnet, schrumpft die Punkt-Periode und die Tiefe mit ihr. */
/* Scrollband: Mit aufgeklappter Auflösung ist der Inhalt oft höher als der
   Bildschirm. Ohne overflow wäre der untere Teil schlicht abgeschnitten. */
.hsl-u-gross { display:none; flex-direction:column; align-items:center; gap:12px;
  max-width:100%; max-height:96vh; overflow-y:auto; overflow-x:hidden; padding:4px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.45) rgba(255,255,255,.10); }
.hsl-u-gross::-webkit-scrollbar { width:10px; }
.hsl-u-gross::-webkit-scrollbar-track { background:rgba(255,255,255,.10); border-radius:6px; }
.hsl-u-gross::-webkit-scrollbar-thumb { background:rgba(255,255,255,.45); border-radius:6px; }
.hsl-u-gross::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.65); }
.hsl-u-lightbox.hsl-mit-aktionen .hsl-u-gross { display:flex; }
.hsl-u-lightbox.hsl-mit-aktionen > .hsl-u-zu { display:none; }
/* Bleibt beim Scrollen stehen – sonst wäre der Zurück-Knopf genau dann weg,
   wenn die aufgeklappte Auflösung das Scrollen nötig macht. */
.hsl-u-gross-kopf { display:flex; align-items:center; gap:14px; align-self:stretch;
  position:sticky; top:0; z-index:2; padding:6px 0; background:rgba(8,26,36,.94); }
.hsl-u-gross-titel { color:#eaf2f7; font-size:15px; font-weight:600; }
.hsl-u-gross > img { max-width:min(100%,900px); max-height:74vh; }
.hsl-u-gross-loesung { display:flex; flex-direction:column; align-items:center; gap:8px;
  background:#fff; border-radius:10px; padding:14px; max-width:min(100%,900px); }
.hsl-u-gross-loesung[hidden] { display:none; }
.hsl-u-gross-loesung img { max-width:260px; max-height:30vh; }
.hsl-u-gross-loesung p { margin:0; font-size:14px; }
.hsl-u-gross-aktionen { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.hsl-u-zurueck { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.3); }
.hsl-u-zurueck:hover { background:rgba(255,255,255,.26); color:#fff; }

/* =====================================================================
   Bibliotheken mit kostenlosen Büchern ([hsl_bibliotheken])
   ===================================================================== */
.hsl-biblio { max-width:1000px; margin:0 auto; }
.hsl-biblio-intro h3 { font-size:20px; }
.hsl-biblio-intro p { margin:0 0 12px; }
.hsl-biblio-intro .hsl-tip { margin:0; }

/* Kennzeichnung der Partnerlinks – rechtlich nötig, deshalb gut sichtbar */
.hsl-biblio-werbung {
  margin:18px 0 0; padding:12px 15px; font-size:13.5px; line-height:1.6;
  background:#fdf6ec; border:1px solid #eed9b8; border-left:3px solid var(--hsl-orange);
  border-radius:8px; color:#7c5314;
}

.hsl-biblio-liste { display:grid; gap:16px; margin-top:20px; grid-template-columns:minmax(0,1fr); }
@media (min-width:900px){ .hsl-biblio-liste { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.hsl-biblio-karte { display:flex; flex-direction:column; }

.hsl-biblio-kopf { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; }
.hsl-biblio-kopf h4 { margin:0; font-size:17px; }
.hsl-biblio-kopf a { color:var(--hsl-accent2); text-decoration:none; }
.hsl-biblio-kopf a:hover { text-decoration:underline; }
.hsl-tag.hsl-partner { background:#fdf0db; color:#8a5d16; border:1px solid #eed9b8; margin:0; }

.hsl-biblio-text { margin:0 0 10px; font-size:14.5px; line-height:1.6; }
.hsl-biblio-hinweis {
  margin:0 0 12px; padding:10px 12px; font-size:13.5px; line-height:1.55;
  background:#f6f8fa; border-left:3px solid #c9d3da; border-radius:6px; color:var(--hsl-muted);
}

.hsl-biblio-fakten { list-style:none; padding:0; margin:0 0 14px; font-size:13.5px; display:grid; gap:4px; }
.hsl-biblio-fakten span { display:inline-block; min-width:80px; color:var(--hsl-muted); }

.hsl-biblio-fuss { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.hsl-badge.hsl-eignung-gut       { background:#ecf7f1; border-color:#bfe3d2; color:#1d6b47; }
.hsl-badge.hsl-eignung-gut > span{ background:var(--hsl-ok); }
.hsl-badge.hsl-eignung-teilweise { background:#fdf5e9; border-color:#eed9b8; color:#8a5a14; }
.hsl-badge.hsl-eignung-teilweise > span { background:var(--hsl-warn); }
.hsl-badge.hsl-eignung-nein      { background:#fdf1f1; border-color:#ecc7c7; color:#9c3838; }
.hsl-badge.hsl-eignung-nein > span { background:var(--hsl-err); }

.hsl-biblio-recht { margin-top:22px; }
.hsl-biblio-recht p { margin:0 0 10px; font-size:14.5px; line-height:1.6; }
.hsl-biblio-regal { margin:32px 0 4px; font-size:19px; }
.hsl-biblio-regaltext { margin:0 0 4px; font-size:14.5px; color:var(--hsl-muted); line-height:1.6; }
.hsl-biblio-gesperrt { margin-top:16px; text-align:center; }
.hsl-biblio-gesperrt p { margin:0 0 10px; }

/* =====================================================================
   Der Hinweis „keine automatische Verlängerung" im Kaufweg (2.1.28)
   ---------------------------------------------------------------------
   Die Klasse .hsl-kaufhinweis gibt es seit 2.1.7 – eine Gestaltung dazu
   nie. Aufgefallen beim ersten echten Testkauf am 14.10.2026: Im
   Warenkorb klebte der Satz unmittelbar am Produktnamen
   („LerntestEinmalzahlung für 12 Monate …"), weil <small> von Haus aus
   im Textfluss steht und nichts ihn davon abhielt.

   Zweites Versäumnis derselben Stelle: Dieses Stylesheet wurde auf
   Produktseite, Warenkorb und Kasse überhaupt nicht geladen. Es war nur
   angemeldet (HSL_Shortcodes::register_assets) und wurde ausschliesslich
   von den eigenen Kurzbefehlen eingereiht. Eine Regel hier allein hätte
   also nichts bewirkt – das Laden holt HSL_Kaufhinweis::stil() nach.

   Farben kommen aus :root weiter oben; --hsl-muted (#5d6a72) erreicht
   auf Weiss 5.57:1 und bleibt damit über den geforderten 4.5:1.
   ===================================================================== */
small.hsl-kaufhinweis {
  display:block; margin-top:6px;
  font-size:13px; line-height:1.45; color:var(--hsl-muted);
}
p.hsl-kaufhinweis { margin:10px 0 0; font-size:14.5px; line-height:1.6; color:var(--hsl-muted); }

/* Die beiden Stellen am Abschluss tragen BEIDE Klassen – diese Regeln
   stehen deshalb hinter der allgemeinen und überschreiben sie. */
p.hsl-kaufhinweis-kasse, p.hsl-kaufhinweis-danke {
  margin:16px 0; padding:12px 14px; border-radius:8px;
  background:#f1f6f9; border-left:3px solid var(--hsl-accent);
  font-size:14.5px; line-height:1.6; color:var(--hsl-ink);
}