/* EXT:transparenztexte – Ausgabe des Plugins "Generator" (barrierefreie Ergänzungen zu Bootstrap 5)
 * Ziele: Schrift #111 auf hellen Flächen (Kontrast >= 7:1), keine Schriftgröße unter 1rem,
 * sichtbarer Tastaturfokus, eindeutige Links (unterstrichen), gut lesbare Frage-Antwort-Liste,
 * Buttons in allen Zuständen kontrastreich (auch gegen globale a:visited/a:hover-Regeln des Themes).
 * Alle Farben als Custom Properties auf .tx-transparenztexte – im Sitepackage überschreibbar.
 * Darstellung: settings.bootstrap = 1 nutzt Bootstrap-Cards und -Buttons, 0 das eigene Raster und eigene Buttons.
 * Einbindung abschaltbar: Konstante plugin.tx_transparenztexte.settings.includeCss = 0
 */
.tx-transparenztexte {
    --tt-text: #111111;
    --tt-meta: #2b2b2b;          /* Kontrast auf #fff 13:1 */
    --tt-border: #8a949e;        /* UI-Komponenten >= 3:1 */
    --tt-bg-soft: #f4f6f8;
    --tt-link: #0b4f9c;          /* Kontrast auf #fff 8.6:1 */
    --tt-focus: #0b4f9c;
    --tt-button-text: #ffffff;   /* Schrift gefüllter Buttons (Bootstrap und eigene) in allen Zuständen */
    --tt-button-bg: #0b4f9c;     /* eigene Buttons (ohne Bootstrap): Weiß darauf 8.6:1 */
    --tt-button-bg-hover: #083b75;
    color: var(--tt-text);
    font-size: 1rem;
    line-height: 1.6;
}

/* Fließtext-Links (nicht Buttons, nicht Registerkarten). :where() hält die Spezifität bei (0,1,1), damit
   gezieltere Regeln Vorrang behalten – z. B. die Registerkarten der Pflege (manage.css, nie unterstrichen). */
.tx-transparenztexte a:where(:not(.btn, .nav-link, .tx-transparenztexte-button)) {
    color: var(--tt-link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.tx-transparenztexte a:where(:not(.btn, .nav-link, .tx-transparenztexte-button)):hover {
    text-decoration-thickness: 2px;
}

.tx-transparenztexte a:focus-visible,
.tx-transparenztexte .btn:focus-visible {
    outline: 3px solid var(--tt-focus);
    outline-offset: 2px;
    box-shadow: none;
}

.tx-transparenztexte a.btn,
.tx-transparenztexte a.tx-transparenztexte-button {
    text-decoration: none;
}

.tx-transparenztexte abbr[title] {
    text-decoration: underline dotted;
    text-underline-offset: 0.15em;
    cursor: help;
}

.tx-transparenztexte s {
    text-decoration: line-through;
}

/* Hinweise nur für Screenreader (z. B. „öffnet in neuem Fenster“) – wie Bootstrap, auch ohne Bootstrap wirksam */
.tx-transparenztexte .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---------- Buttons: Schrift in allen Zuständen weiß auf gefüllter Fläche ---------- */
@media screen {
    .tx-transparenztexte a.btn-primary,
    .tx-transparenztexte a.btn-primary:link,
    .tx-transparenztexte a.btn-primary:visited,
    .tx-transparenztexte a.btn-primary:hover,
    .tx-transparenztexte a.btn-primary:focus,
    .tx-transparenztexte a.btn-primary:active,
    .tx-transparenztexte a.btn-primary.active,
    .tx-transparenztexte a.btn-outline-primary:hover,
    .tx-transparenztexte a.btn-outline-primary:focus-visible,
    .tx-transparenztexte a.btn-outline-primary:active,
    .tx-transparenztexte a.btn-outline-primary.active {
        color: var(--tt-button-text) !important;
    }

    /* eigene Buttons (settings.bootstrap = 0): gefüllt weiß; Outline in Buttonfarbe, bei Hover/Fokus gefüllt weiß */
    .tx-transparenztexte a.tx-transparenztexte-button,
    .tx-transparenztexte a.tx-transparenztexte-button:link,
    .tx-transparenztexte a.tx-transparenztexte-button:visited,
    .tx-transparenztexte a.tx-transparenztexte-button:hover,
    .tx-transparenztexte a.tx-transparenztexte-button:focus,
    .tx-transparenztexte a.tx-transparenztexte-button:active {
        color: var(--tt-button-text) !important;
    }

    .tx-transparenztexte a.tx-transparenztexte-button.tx-transparenztexte-button-outline,
    .tx-transparenztexte a.tx-transparenztexte-button.tx-transparenztexte-button-outline:link,
    .tx-transparenztexte a.tx-transparenztexte-button.tx-transparenztexte-button-outline:visited {
        color: var(--tt-button-bg) !important;
    }

    .tx-transparenztexte a.tx-transparenztexte-button.tx-transparenztexte-button-outline:hover,
    .tx-transparenztexte a.tx-transparenztexte-button.tx-transparenztexte-button-outline:focus,
    .tx-transparenztexte a.tx-transparenztexte-button.tx-transparenztexte-button-outline:active {
        color: var(--tt-button-text) !important;
    }
}

.tx-transparenztexte-button {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 2px solid var(--tt-button-bg);
    border-radius: 0.375rem;
    background-color: var(--tt-button-bg);
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

.tx-transparenztexte-button:hover,
.tx-transparenztexte-button:active {
    border-color: var(--tt-button-bg-hover);
    background-color: var(--tt-button-bg-hover);
}

.tx-transparenztexte-button-outline {
    background-color: transparent;
}

.tx-transparenztexte-button-outline:hover,
.tx-transparenztexte-button-outline:focus,
.tx-transparenztexte-button-outline:active {
    border-color: var(--tt-button-bg);
    background-color: var(--tt-button-bg);
}

/* ---------- Eigenes Raster (settings.bootstrap = 0), Spalten ab 768/992 px ---------- */
.tx-transparenztexte-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .tx-transparenztexte-grid-2,
    .tx-transparenztexte-grid-3,
    .tx-transparenztexte-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .tx-transparenztexte-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tx-transparenztexte-grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ---------- Einstieg mit mehreren Unternehmungen ---------- */
.tx-transparenztexte-teaser:not(.card) {
    padding: 1.25rem;
    border: 1px solid var(--tt-border);
    border-radius: 0.375rem;
    background-color: #ffffff;
}

.tx-transparenztexte-teaser:not(.card) .tx-transparenztexte-teaser-title {
    font-size: 1.25rem;
}

.tx-transparenztexte-teaser.card .tx-transparenztexte-teaser-action {
    margin-top: auto;
    margin-bottom: 0;
}

/* ---------- Übersicht: Zielgruppen mit Verarbeitungen ---------- */
.tx-transparenztexte-back {
    margin-bottom: 1rem;
}

.tx-transparenztexte-groups {
    margin-top: 0.5rem;
}

/* Bootstrap-Cards: Schriftgröße der Überschrift über die Klasse h1–h5 (settings.cardHeaderClass) */
.tx-transparenztexte-card-header .tx-transparenztexte-group-title {
    margin: 0;
    line-height: 1.3;
}

.tx-transparenztexte-group-buttons {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tx-transparenztexte-group-buttons .btn {
    white-space: normal;
    overflow-wrap: break-word;
}

/* neutrales Markup: Überschrift mit Linie, Liste der Verarbeitungen */
.tx-transparenztexte-group .tx-transparenztexte-group-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--tt-border);
}

.tx-transparenztexte-group-list {
    margin-bottom: 0;
    padding-left: 1.25rem;
}

.tx-transparenztexte-group-list li + li {
    margin-top: 0.25rem;
}

/* PDF aller Verarbeitungen vor und nach der Liste */
.tx-transparenztexte-pdf {
    margin: 1.5rem 0 0;
}

.tx-transparenztexte-pdf-top {
    margin: 0 0 1.5rem;
}

/* Hinweis "Diese Übersicht wurde am … erstellt" – immer das letzte Element */
.tx-transparenztexte-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--tt-border);
    color: var(--tt-meta);
}

.tx-transparenztexte-footer > :last-child {
    margin-bottom: 0;
}

.tx-transparenztexte-empty {
    padding: 1rem;
    background-color: var(--tt-bg-soft);
    border: 1px solid var(--tt-border);
    border-radius: 0.375rem;
}

/* ---------- Szenario-Seite: Fragen und Antworten ---------- */
.tx-transparenztexte-scenario-header {
    margin-bottom: 1.5rem;
}

.tx-transparenztexte-scenario-title {
    margin-top: 0.5rem;
}

.tx-transparenztexte-qa {
    margin: 1.5rem 0 0;
    padding-left: 1.75rem;
}

.tx-transparenztexte-qa-item {
    margin-bottom: 1.25rem;
    padding-left: 0.25rem;
}

.tx-transparenztexte-qa-item::marker {
    font-weight: 700;
}

.tx-transparenztexte-question {
    margin-bottom: 0.25rem;
}

.tx-transparenztexte-answer > :last-child,
.tx-transparenztexte-answer-list {
    margin-bottom: 0;
}

.tx-transparenztexte-answer-list {
    padding-left: 1.25rem;
    list-style-type: disc;
}

.tx-transparenztexte-notes {
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    background-color: var(--tt-bg-soft);
    border-left: 4px solid var(--tt-border);
}

.tx-transparenztexte-notes > :last-child {
    margin-bottom: 0;
}

.tx-transparenztexte-notes-title {
    font-size: 1.125rem;
}

.tx-transparenztexte-privacy {
    margin-top: 1.5rem;
}

.tx-transparenztexte-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 2rem;
}

/* ---------- Druck: schwarze Schrift (Hintergründe werden nicht gedruckt) ---------- */
@media print {
    .tx-transparenztexte-actions,
    .tx-transparenztexte-pdf,
    .tx-transparenztexte-back {
        display: none !important;
    }

    .tx-transparenztexte a {
        color: #000000 !important;
    }

    .tx-transparenztexte-qa-item {
        break-inside: avoid;
    }
}