/* Vorlesen für mb-trainings.de (04.11.2026) – dezente Lautsprecher-Knöpfe neben Überschriften, v2 mit Stopp-Knopf, v3 Lautsprecher ohne Rahmen */

/* Mitlese-Markierung: dezentes Grau, satzweise (Highlight API) oder ganzer Absatz */
::highlight(mb-liest){background-color:rgba(140,146,156,.32);color:inherit}
.mb-liest{background-color:rgba(140,146,156,.20)!important;box-shadow:0 0 0 4px rgba(140,146,156,.20);border-radius:6px;transition:background-color .2s,box-shadow .2s}

/* Lautsprecher neben Überschriften (v3, 04.11.2026): ohne Rahmen, schlichtes Symbol in Blau #3e67bc auf zartem blauem Kreis
   wie alles Anklickbare der Website; im blauen Titelband weiß. Das Symbol wächst mit der Überschrift mit, die Tippfläche ist mindestens 34 px groß. */
.mb-vorlesen-knopf{--mb-ls:clamp(18px,.62em,30px);display:inline-grid;place-items:center;vertical-align:middle;width:calc(var(--mb-ls) + 14px);height:calc(var(--mb-ls) + 14px);min-width:34px;min-height:34px;margin:0 0 0 .35em;padding:0;border:0;border-radius:50%;background:rgba(62,103,188,.12);color:#3e67bc;letter-spacing:0;text-transform:none;text-shadow:none;box-shadow:none;cursor:pointer;transition:background-color .15s}
.mb-vorlesen-knopf::before{content:"";display:block;width:var(--mb-ls);height:var(--mb-ls);background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.6 4 17.4 16'%3E%3Cpath d='M3.5 9.2h3.8L12.6 5v14l-5.3-4.2H3.5z'/%3E%3Cpath d='M15.8 9.4a3.7 3.7 0 0 1 0 5.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.6 4 17.4 16'%3E%3Cpath d='M3.5 9.2h3.8L12.6 5v14l-5.3-4.2H3.5z'/%3E%3Cpath d='M15.8 9.4a3.7 3.7 0 0 1 0 5.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.mb-vorlesen-knopf:hover{background:rgba(62,103,188,.22)}
.mb-vorlesen-knopf:active{transform:translateY(1px)}
.mb-vorlesen-knopf:focus-visible{outline:3px solid #3e67bc;outline-offset:1px}
.mb-vorlesen-knopf.aktiv{background:rgba(62,103,188,.26)}
.mb-vorlesen-knopf.aktiv::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.6 4 17.4 16'%3E%3Cpath d='M3.5 9.2h3.8L12.6 5v14l-5.3-4.2H3.5z'/%3E%3Cpath d='M15.8 9.4a3.7 3.7 0 0 1 0 5.2M18.4 6.8a7.4 7.4 0 0 1 0 10.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.6 4 17.4 16'%3E%3Cpath d='M3.5 9.2h3.8L12.6 5v14l-5.3-4.2H3.5z'/%3E%3Cpath d='M15.8 9.4a3.7 3.7 0 0 1 0 5.2M18.4 6.8a7.4 7.4 0 0 1 0 10.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")}
#sp-page-title .mb-vorlesen-knopf,#sp-title .mb-vorlesen-knopf{color:#fff;background:rgba(255,255,255,.16)}
#sp-page-title .mb-vorlesen-knopf:hover,#sp-title .mb-vorlesen-knopf:hover,#sp-page-title .mb-vorlesen-knopf.aktiv,#sp-title .mb-vorlesen-knopf.aktiv{background:rgba(255,255,255,.28)}
#sp-page-title .mb-vorlesen-knopf:focus-visible,#sp-title .mb-vorlesen-knopf:focus-visible{outline-color:#fff}

/* Stopp-Knopf unten mittig – erscheint nur während des Lesens, wenn der aktive Lautsprecher aus dem Bild ist (v2) */
.mb-vorlesen-stopp{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:9990;display:none;align-items:center;gap:8px;height:40px;margin:0;padding:0 16px;border:2px solid #c2c2c2;border-radius:9px;background:#fff;color:#252525;font:600 15px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:0;text-transform:none;box-shadow:0 2px 10px rgba(0,0,0,.18);cursor:pointer;transition:background-color .15s,border-color .15s}
.mb-vorlesen-stopp::before{content:"";display:block;width:20px;height:20px;background:#3e67bc;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.6 4 17.4 16'%3E%3Cpath d='M3.5 9.2h3.8L12.6 5v14l-5.3-4.2H3.5z'/%3E%3Cpath d='M15.8 9.4a3.7 3.7 0 0 1 0 5.2M18.4 6.8a7.4 7.4 0 0 1 0 10.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.6 4 17.4 16'%3E%3Cpath d='M3.5 9.2h3.8L12.6 5v14l-5.3-4.2H3.5z'/%3E%3Cpath d='M15.8 9.4a3.7 3.7 0 0 1 0 5.2M18.4 6.8a7.4 7.4 0 0 1 0 10.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.mb-vorlesen-stopp.sichtbar{display:inline-flex}
.mb-vorlesen-stopp:hover{border-color:#3e67bc;background:#e9eef8}
.mb-vorlesen-stopp:focus-visible{outline:3px solid #3e67bc;outline-offset:2px}
@media print{.mb-vorlesen-knopf,.mb-vorlesen-stopp{display:none!important}}