/*
 * Oeffentliche Seiten (vorlagen/oeffentlich/*): Stoebern, /l/{slug},
 * Ausprobieren, Drucken, App, Teilen. Nur was Bootstrap nicht kann.
 */

/* Buehne oben (Stoebern, Lektion, App): violetter Verlauf wie "Heute faellig" */
.oe-buehne { background: linear-gradient(125deg, var(--kern-akzent), #9b6bff); color: #fff; }
.oe-buehne h1 { font-weight: 800; letter-spacing: -.01em; }
.oe-buehne .lead { color: rgba(255, 255, 255, .92); }
.oe-buehne .oe-leise { color: rgba(255, 255, 255, .8); }
.oe-buehne .oe-marke { background: rgba(255, 255, 255, .2); color: #fff; font-weight: 700; }
.oe-buehne .btn-light { color: var(--kern-akzent); }
.oe-buehne .oe-los { font-size: 1.2rem; box-shadow: 0 .4rem 1.2rem rgba(30, 10, 80, .25); }
[data-bs-theme="dark"] .oe-buehne { background: linear-gradient(125deg, #4b25a8, #6d3ce0); }

/* Stoebern: ganze Karte klickbar, die Knoepfe liegen darueber */
.oe-karte { transition: transform .12s ease; }
.oe-karte:hover { transform: translateY(-2px); }
.oe-ueber-link { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .oe-karte, .oe-karte:hover { transition: none; transform: none; } }

/* Lektion: Vorteile fuer Gaeste, Vokabeltabelle */
.oe-vorteil { background: var(--flaeche-hell); }
.oe-vokabeln td { overflow-wrap: anywhere; }
.oe-vokabeln td:first-child { width: 50%; font-weight: 600; }
.oe-werbung { background: var(--flaeche-hell); }

/* Ausprobieren: Ergebnis */
.oe-ende { max-width: 36rem; }
.oe-ende .gut { color: var(--richtig); }
.oe-ende .fast { color: var(--fast); }
.oe-ende .schlecht { color: var(--falsch); }

/* Teilen: Auswahl mit zwei Zeilen */
.oe-schmal { max-width: 34rem; }
.oe-wahl { border-radius: var(--bs-border-radius); }

/* Lektion wuenschen: Falle fuer Spam-Programme */
.oe-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* App */
.oe-fingerabdruck { word-break: break-all; font-size: .85rem; }

/* Druckblatt (drucktest_html()) - auf dem Bildschirm ein weisses Blatt, auch im Dunkeln */
.druckblatt { background: #fff; color: #000; padding: 1.5rem; border-radius: var(--bs-border-radius); margin: 1rem 0; }
.druck-kopf h2 { margin: 0 0 .5rem; font-size: 1.3rem; }
.druck-kopf .linie { display: inline-block; width: 12rem; max-width: 40%; border-bottom: 1px solid #000; margin-right: 1rem; }
.druck-kopf .linie.kurz { width: 6rem; }
.drucktabelle { width: 100%; border-collapse: collapse; }
.drucktabelle td { padding: .55rem .4rem; border-bottom: 1px solid #bbb; vertical-align: bottom; }
.drucktabelle td.nr { width: 2.5rem; color: #555; }
.drucktabelle td.frage { width: 45%; }
.drucktabelle td.luecke { border-bottom: 1px solid #000; }
@media print {
  .nicht-drucken, .meldung, .netzstatus { display: none !important; }
  body, main.inhalt { background: #fff !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .druckblatt { padding: 0; margin: 0; border-radius: 0; }
  .loesungsblatt { break-before: page; page-break-before: always; }
  .drucktabelle tr { break-inside: avoid; }
}