/* zusatz.css - was es im Original nicht gibt: Sprachschalter, natives
   Audio statt Wonderplugin, Passwortschutz. Alles andere kommt 1:1 aus dem
   Original-CSS (op3.css, op3-/theme-vor/nach.css, <style> der Seite). */

/* Sprachschalter: erscheint nur, wenn es die Seite in mehr als einer Sprache
   gibt (build.py). Klein oben rechts, über Kopf und Inhalt. */
.sprachwahl{position:absolute;top:10px;right:16px;z-index:1000;display:flex;gap:2px;
  font:600 13px/1 "IBM Plex Sans",sans-serif;letter-spacing:.04em}
.sprachwahl a,.sprachwahl span{display:block;padding:5px 6px;border-radius:3px;color:#555;text-decoration:none}
.sprachwahl a:hover{background:rgba(0,0,0,.06);color:#000}
.sprachwahl span{color:#000;border-bottom:2px solid currentColor;border-radius:0}

/* Podcast: natives <audio> an Stelle des Wonderplugin-Spielers, im Raster
   des Originals (Hautfarbe "whitebox": Bild 120 px links, Titel 14 px, Album
   12 px grau, Spieler daneben, am Handy darunter, grauer Balken 8 px unten).
   Außenmaße bei 375, 768 und 1280 px wie live; nur die Bedienleiste ist die
   des Browsers. Steht nur in Beiträgen, daher .entry-content davor (hält
   auch gegen .entry-content img/p des Themes). Blog-Agent 02.10.2026. */
.entry-content .audio{display:grid;grid-template-columns:120px 1fr;grid-template-rows:auto auto auto 1fr auto;
  grid-template-areas:"bild titel" "bild album" "bild player" "bild ." "balken balken";align-content:start;
  align-items:flex-start;margin:0;padding:8px 12px 12px 8px;border:0;gap:0 12px;background:#fff;
  font-family:"Open Sans",Arial,sans-serif}
.entry-content .audio__text{display:contents}
.entry-content .audio__bild{grid-area:bild;width:120px;height:120px;margin:0 0 12px!important;object-fit:cover}
.entry-content .audio__titel{grid-area:titel;margin:0!important;padding-top:4px;font:14px/1.7 "Open Sans",Arial,Helvetica,sans-serif;color:#333}
.entry-content .audio__album{grid-area:album;margin:0 0 16px!important;font:12px/1.7 "Open Sans",Arial,Helvetica,sans-serif;color:#666}
.entry-content .audio audio{display:block;grid-area:player;align-self:start;width:100%;max-width:420px;height:36px;margin:0 0 16px}
.entry-content .audio::after{content:"";grid-area:balken;height:8px;margin:0 -4px 0 0;background:#444}
@media (max-width:767px){
  .entry-content .audio{grid-template-rows:auto auto 1fr auto auto;grid-template-areas:"bild titel" "bild album" "bild ." "player player" "balken balken"}
  .entry-content .audio audio{margin-left:4px;max-width:none;width:calc(100% - 4px)}
}

/* Passwortgeschützte Seite (assets/passwort.js) */
.passwort-fehler{color:#b20202;font-size:15px;margin-top:8px}

/* Handy-Menü: Das Original legt jeden Menüpunkt auf 150 px fest (OP3-Regel
   #op3-element-giW4lE9D ... treemenuitemlvl1), obwohl das Menü 315 px breit ist;
   "Angebot: mega_" und "Anrechnen auf Upgrade" brechen dadurch um. Tim, 03.10.2026:
   Menüpunkte sollen in einer Zeile lesbar bleiben. Bewusste Abweichung vom 1:1. */
@media screen and (max-width: 767px) {
  html[data-op3-support] .op3-designer-element .op3-element[data-op3-element-spec="treemenuitemlvl1"] {
    width: auto !important;
  }
}