/*
 * Barrierefreiheits-Knopf mit Klappfeld.
 *
 * Die Lage der Zeile steht in theme.css bei .lag-kopfzeile: dort sitzen dieser
 * Knopf und der Menüknopf gemeinsam. Hier steht nur, wie sie aussehen.
 */
.lag-barrierefreiheit{position:relative}
.lag-bedienknopf{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 16px;background:#fff;border:1.5px solid #000;border-radius:22px;color:#000;font:inherit;font-size:calc(17px * var(--lag-schrift,1));line-height:1.2;text-decoration:none;cursor:pointer;list-style:none}
.lag-bedienknopf::-webkit-details-marker{display:none}
.lag-barrierefreiheit[open]>.lag-bedienknopf{border-color:#2e6db9;background:#e8f0fb;color:#1c4a80}
.lag-bedienknopf-zeichen{flex:0 0 auto;display:block}
.lag-bedienknopf-bild{display:block;width:28px;height:28px;flex:0 0 auto}

/* Nur ein Zeichen: der Knopf wird rund und behält 44 px. */
.lag-bedienknopf:not(:has(.lag-bedienknopf-text)){width:44px;padding:0}

.lag-barrierefreiheit-feld{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:max-content;min-width:250px;max-width:min(340px,calc(100vw - 40px));padding:14px 16px 12px;background:#fff;border:1.5px solid #000;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.lag-feld-gruppe{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.lag-feld-gruppe:last-child{margin-bottom:0}
.lag-feld-titel{width:100%;font-size:calc(14px * var(--lag-schrift,1));font-weight:600;color:#4a4a4a}
.lag-feldknopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:0 13px;background:#fff;border:1.5px solid #000;border-radius:18px;color:#000;font:inherit;font-size:calc(15px * var(--lag-schrift,1));line-height:1.2;text-decoration:none;cursor:pointer}
.lag-feldknopf[disabled]{opacity:.55;cursor:default}
.lag-feldknopf[aria-pressed=true]{border-color:#2e6db9;background:#e8f0fb;color:#1c4a80}
.lag-feldknopf.lag-stufe-gross{font-size:calc(17px * var(--lag-schrift,1))}
.lag-feldknopf.lag-stufe-sehr-gross{font-size:calc(19px * var(--lag-schrift,1))}
.lag-feld-zurueck{display:block;margin:0 0 6px;padding:0;background:none;border:0;color:#1c4a80;font:inherit;font-size:calc(15px * var(--lag-schrift,1));text-decoration:underline;cursor:pointer;min-height:44px}
.lag-feld-hinweis{margin:0;font-size:calc(13px * var(--lag-schrift,1));color:#4a4a4a}

/*
 * Vorlesen zeigt sich erst, wenn das Plugin seinen Knopf wirklich angelegt und
 * freigeschaltet hat. Die Klasse setzt das Plugin an das html-Element, und
 * zwar erst dann — auch der Browser ohne Web Speech faellt damit heraus. Das
 * ist seine eigene Auskunft und keine Vermutung von unserer Seite.
 */
.lag-feld-vorlesen{display:none}
:root.has-read-aloud .lag-feld-vorlesen{display:flex}
/* Der Knopf stammt vom Plugin und traegt dessen Klasse. */
.lag-feld-vorlesen [data-ab-read-button]{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 13px;background:#fff;border:1.5px solid #000;border-radius:18px;color:#000;font:inherit;font-size:calc(15px * var(--lag-schrift,1));line-height:1.2;cursor:pointer}
.lag-feld-vorlesen [data-ab-read-button][aria-pressed=true]{border-color:#2e6db9;background:#e8f0fb;color:#1c4a80}

/* Ab hier steht neben dem Logo kein Platz für Text: nur das Zeichen. */
@media(max-width:1024px){
.lag-bedienknopf{padding:0;width:44px}
.lag-bedienknopf .lag-bedienknopf-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lag-barrierefreiheit-feld{min-width:min(250px,calc(100vw - 40px))}
}

/*
 * Auf dem Telefon wurde das Klappfeld links angeschnitten. Der Grund war die
 * Verankerung: das Feld hing am Knopf „Barrierefreiheit", und rechts von dem
 * stehen noch der Menüknopf und der Abstand zum Rand. Sein rechter Rand liegt
 * damit rund 70 px weiter innen als der Bildschirmrand, das Feld rechnete
 * seine Breite aber gegen den ganzen Bildschirm (100vw - 40px). Bei 375 px
 * fehlten dadurch 50 px auf der linken Seite; angeschnitten wurde es auf
 * jedem Gerät unter 430 px Breite.
 *
 * Die Breite hier nachzurechnen wäre die falsche Lösung: sie würde die Größe
 * des Menüknopfs und den Abstand voraussetzen und beim nächsten Umbau wieder
 * brechen. Stattdessen hängt das Feld unter 768 px nicht mehr am Knopf,
 * sondern an der ganzen Kopfzeile — `position:static` nimmt dem Knopf den
 * Bezugsrahmen, und der nächste bleibt `.lag-kopfzeile`. Deren rechter Rand
 * ist der Bildschirmrand minus `--lag-leiste-rechts`, und genau gegen diesen
 * Abstand rechnet das Feld jetzt. Der senkrechte Abstand bleibt gleich, weil
 * Knopf und Menü seit 1.1 in einer Reihe gleicher Höhe stehen.
 *
 * Auf dem Desktop bleibt alles wie im freigegebenen Entwurf B: dort hängt das
 * Feld weiter am Knopf.
 *
 * Gemessen im Browser bei 320, 375, 390, 430 und 767 px: nichts fehlt, und
 * die Entwurfsbreite von 340 px bleibt erhalten, wo Platz ist.
 */
@media(max-width:767px){
.lag-barrierefreiheit{position:static}
.lag-barrierefreiheit-feld{max-width:min(340px,calc(100vw - 2*var(--lag-leiste-rechts)));min-width:min(250px,calc(100vw - 2*var(--lag-leiste-rechts)))}
}

/*
 * Mehr Kontrast: die Grundfassung erfüllt seit 0.8 die AA-Schwellen; dieser
 * Modus geht darüber hinaus (gemessen 8,06:1 für das Gold auf Weiß und
 * 8,42:1 für den Footer-Link auf dem aufgehellten Footer).
 *
 * Gesetzt werden nur die Marken. Die Regeln, die sie benutzen, stehen in
 * theme.css und page-refinements.css und gelten damit weiter — eine zweite
 * Liste derselben Auswahl wäre beim nächsten Zusatz auseinandergelaufen.
 */
:root[data-lag-kontrast=mehr]{--lag-gold-text:#6b4a00;--lag-link-footer:#0a3d75}
:root[data-lag-kontrast=mehr] .lag-footer{background:#dbe3f4}
:root[data-lag-kontrast=mehr] .lag-rich a{color:#0a3d75;text-decoration:underline}
:root[data-lag-kontrast=mehr] .lag-news-card,:root[data-lag-kontrast=mehr] .lag-news-tabs a{border-color:#000}
:root[data-lag-kontrast=mehr] .lag-news-tabs a[aria-current]{background:#6b4a00;color:#fff}
:root[data-lag-kontrast=mehr] .lag-read-more{background:#6b4a00;color:#fff}
:root[data-lag-kontrast=mehr] .lag-news-copy time,:root[data-lag-kontrast=mehr] .lag-feld-hinweis,:root[data-lag-kontrast=mehr] .lag-feld-titel{color:#000}

@media(forced-colors:active){
.lag-bedienknopf,.lag-feldknopf{border:1px solid ButtonBorder;background:ButtonFace;color:ButtonText}
.lag-feldknopf[aria-pressed=true],.lag-barrierefreiheit[open]>.lag-bedienknopf{border-color:Highlight}
.lag-barrierefreiheit-feld{border:1px solid CanvasText;background:Canvas}
}