@charset "UTF-8";
/* =========================================================================
   Barrierefreiheit – Korrekturen zu site.css / Bootstrap / Klaro
   Nationalstiftung FTE (www.stiftung-fte.at) · onscreensite 13.0.1
   ========================================================================= */

/* ---------- Skiplink: unsichtbar, bei Tastaturfokus sichtbar (2.4.1 / 2.4.7) */
.skip-navigation {
    position: absolute;
    left: 1rem;
    top: -10rem;
    z-index: 100000;
    padding: .75rem 1.25rem;
    background: #003580;
    color: #fff !important;
    font-weight: 600;
    text-decoration: underline;
}
.skip-navigation:focus,
.skip-navigation:focus-visible {
    top: 1rem;
    outline: 3px solid #ffce01;
    outline-offset: 2px;
}
main:focus { outline: none; }

/* ---------- Sichtbarer Fokus (2.4.7) – #1777bb auf Weiß 4,6:1 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid #1777bb;
    outline-offset: 2px;
    box-shadow: none;
}
.navbar-toggler:focus-visible { box-shadow: none; }
footer a:focus-visible,
section.beguenstigt a:focus-visible,
section.presssingle a:focus-visible,
.projectbig a:focus-visible { outline-color: #003580; }
a.button:focus-visible { outline: 3px solid #003580; outline-offset: 3px; }

/* ---------- Hover/Fokus der Links ohne Unterstreichung: Unterstreichung bei Hover UND Fokus */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible,
nav.metanav a:hover,
nav.metanav a:focus-visible { text-decoration: underline; }

/* ---------- Footer: Überschriften jetzt h2 (vorher h4), Optik unverändert */
footer h2.footer-title {
    font-family: TitilliumWebBold, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    color: #585858;
    padding: 0;
    margin: 0 0 .75rem 0;
}
footer nav { font-family: inherit; }
@media only screen and (max-width: 1300px) { footer h2.footer-title { font-size: 1.25rem; } }
@media only screen and (max-width: 768px)  { footer h2.footer-title { font-size: 1.5rem; margin-top: 1.5rem; } }

/* ---------- Aufzählungszeichen: per CSS erzeugtes „■“ wurde von Screenreadern als
   „schwarzes Quadrat“ vorgelesen (1.1.1). Alternativtext leer setzen. */
.left li:before,
.right li:before {
    content: "■ ";
    content: "■ " / "";
}

/* ---------- Zeilenabstände ohne feste px-Werte (1.4.4 / 1.4.12) */
.left li, .right li { line-height: 1.5; }
section .box { line-height: 1.25; }
section .box p { line-height: 1.25; }
header nav ul ul li a { line-height: 2.25; }
#newssort { height: auto; min-height: 2.5rem; line-height: 1.5; }
section.presssingle h2 { font-size: 1.5rem; }
.projectbig section.right b { font-size: 1.375rem; }
section.right .lightgrey b { font-size: 1rem; }

/* ---------- Überschriften in den Initiativen-Boxen: Redaktion stellt h1 auf h2 um,
   Optik bleibt gleich */
.projectbig section.right h2 {
    font-size: 3rem;
    text-transform: uppercase;
    margin: 0;
    font-weight: 700;
    hyphens: auto;
    overflow-wrap: break-word;
}
.projectbig section.right h1,
.projectbig section.right h2 { hyphens: auto; overflow-wrap: break-word; }

/* ---------- Button „Weitere Infos“: Schrift „TitilliumWebBold“ war nirgends definiert → Browser nahm
   Times; der breitere Text lief bei fester Breite (250px) über den Pfeil. Jetzt Titillium Web 700,
   Breite nach Inhalt (mind. 250px), Abstand zum Pfeil fix, Zeilenhöhe ohne px (1.4.12). */
.button {
    font-family: "Titillium Web", sans-serif;
    font-weight: 700;
    box-sizing: border-box;
    width: fit-content;
    min-width: 250px;
    max-width: 100%;
    padding: .5rem 1rem .5rem 80px;
    line-height: 1.4;
}

/* ---------- Container „2 Spalten – Liste mit Hintergrund“ u. a.: overflow:auto (als Clearfix) +
   Bootstrap-.row mit -12px Rand → 12px Überbreite → horizontale Scrollleiste im Inhalt (1.4.10).
   flow-root hält Floats weiterhin zusammen, Text bleibt bündig. */
section.beguenstigt,
section.organe,
section.presssingle { overflow: visible; display: flow-root; }

/* ---------- Claim im Kopfbild (vorher <span><p>) */
section.stream .claim .claim-title p,
section.stream .claim .claim-text p { margin: 0; }

/* ---------- Hauptnavigation darf bei großer Schrift umbrechen (1.4.4 – vorher Querscrollen bei 200 %) */
@media (min-width: 1200px) {
    .navbar-expand-xl .navbar-collapse { min-width: 0; }
    .navbar-expand-xl .navbar-nav { flex-wrap: wrap; justify-content: flex-end; row-gap: .25rem; }

    /* Unternavigation (2. Ebene über dem Kopfbild): lange Titel (z. B. Pressemeldungen) liefen mit
       white-space:nowrap bis x≈1966 px aus dem Bild → abgeschnitten + Querscrollen (1.4.10).
       Jetzt Umbruch, max. 24rem breit; bei den beiden rechten Hauptpunkten rechtsbündig im Bild. */
    header nav ul ul { width: max-content; max-width: min(24rem, calc(100vw - 2rem)); }
    header nav ul ul li a { white-space: normal; line-height: 1.4; padding-top: .4rem; padding-bottom: .4rem; }
    .navbar-nav > li:last-child > ul,
    .navbar-nav > li:nth-last-child(2) > ul { left: auto; right: 1rem; }
}

/* ---------- Kleine Bildschirme / 400 % Zoom (1.4.10) */
@media only screen and (max-width: 767px) {
    header nav ul ul li a { white-space: normal; }
    .projectbig section.right { padding: 1.25rem; }
    .projectbig section.right h1,
    .projectbig section.right h2 { font-size: 1.75rem; }
    section.presssingle { padding: 1.25rem; }
    section.beguenstigt .left a,
    section.presssingle a,
    section.infosblue a { padding-left: 3rem; }
    td, th { overflow-wrap: anywhere; }
}
@media only screen and (max-width: 500px) {
    section.stream .claim { left: 1rem; right: 1rem; top: 1.5rem; font-size: 2rem; overflow-wrap: break-word; hyphens: auto; }
    .claim-text { font-size: 1.5rem; }
    header h1 { font-size: 1.75rem; overflow-wrap: break-word; hyphens: auto; }
}

/* ---------- Externe Links / Downloads (von main.js ergänzt) */
.link-hint-icon { display: inline-block; margin-left: .2em; font-size: .85em; text-decoration: none; }
.file-info { white-space: nowrap; font-weight: normal; }

/* =========================================================================
   Klaro (Cookie-Einwilligung)
   ========================================================================= */
/* Kontrast (1.4.3): Beschreibungen #7c7c7c (4,2:1) und „Zweck“ #a0a0a0 (2,6:1) → #595959 (7:1) */
.klaro .cookie-modal .cm-list-description,
.klaro .cookie-modal .cm-list-description span,
.klaro .cookie-modal p.purposes,
.klaro .cookie-modal .cm-modal p,
.klaro .cookie-notice .cn-body p { color: #595959 !important; }
.klaro .cookie-modal .cm-modal .cm-header h1.title,
.klaro .cookie-modal .cm-modal .cm-header .title { font-size: 1.5rem; line-height: 1.3; }
.klaro .cookie-modal .cm-modal .cm-body,
.klaro .cookie-modal .cm-modal .cm-header,
.klaro .cookie-modal .cm-modal .cm-footer { font-size: 1rem; line-height: 1.5; }
.klaro .cookie-modal .cm-list-label .cm-list-title,
.klaro .cookie-modal .cm-list-description { font-size: .875rem; line-height: 1.5; }
.klaro .cookie-modal .cm-required { font-size: .8125rem; }

/* Schieberegler: Fokus sichtbar (2.4.7), Rahmen für den Aus-Zustand (1.4.11) */
.klaro .cookie-modal .cm-list-input:focus-visible + .cm-list-label .slider,
.klaro .cookie-modal .cm-list-input:focus + .cm-list-label .slider {
    outline: 3px solid #1777bb;
    outline-offset: 2px;
    box-shadow: none;
}
.klaro .cookie-modal .cm-list-label .slider { border: 1px solid #595959; }

/* „1 Dienst“-Schalter und Buttons */
.klaro .cookie-modal .cm-caret a:focus-visible,
.klaro .cookie-modal .cm-btn:focus-visible,
.klaro .cookie-modal .cm-modal a:focus-visible {
    outline: 3px solid #1777bb;
    outline-offset: 2px;
}
.klaro .cookie-modal .cm-btn { font-size: 1rem; line-height: 1.4; }

/* Fokus bleibt im Dialog: Hintergrund ist inert (main.js). Bei kleinen Höhen scrollbar. */
.klaro .cookie-modal .cm-modal.cm-klaro { max-height: calc(100vh - 2rem); overflow-y: auto; }