/*
 * Aquasabi Wiki (0.4.1-as.20): Autorzeile, Autorbox, Autorenseiten, Inhaltsverzeichnis.
 * Eine Datei für alle Wiki-Bausteine (Task §10a Nr. 3); der Einfüge-Assistent ergänzt hier seine Bausteine.
 * Eingebunden in aquascaping-wiki.tpl mit ?v=<Plugin-Version>. Raster 10/20 px, Farben aus der Theme-Palette
 * (Fließtext #627077, Beschriftung #6e6e6e, Link #55791c, Seitenhintergrund #eef3ea, Grün #8fcb2f nur als Fläche/Linie),
 * Skill jtl-theme references/ui-gestaltung.md und update-582-und-barrierefreiheit.md.
 */

/* Autorzeile am Anfang des Beitrags */
.wiki-autorzeile {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
}

.wiki-autorzeile-bild,
.wiki-autorbox-bild,
.wiki-autor-profil-bild,
.wiki-autoren-karte-bild {
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    background: #eef3ea;
}

.wiki-autorzeile-bild {
    width: 40px;
    height: 40px;
}

.wiki-autorzeile-text {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 2px;
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: #6e6e6e;
}

.wiki-autorzeile-name {
    color: #627077;
}

.wiki-autorzeile-name a {
    font-weight: 600;
}

.wiki-uebersetzt {
    margin: -10px 0 20px;
    font-size: 14px;
    line-height: 20px;
    color: #6e6e6e;
}

/* Inhaltsverzeichnis (ab drei Abschnitten) */
.wiki-inhalt {
    margin: 0 0 20px;
    padding: 20px;
    background: #eef3ea;
    border-left: 4px solid #8fcb2f;
}

.wiki-inhalt-titel {
    margin: 0 0 10px;
    font-weight: 700;
    color: #424b50;
}

.wiki-inhalt-liste {
    margin: 0;
    padding-left: 20px;
}

/* Theme: .aqua-wiki-wrapper .aqua-wiki-content-box li { line-height: 30px } – im Verzeichnis kompakter */
.aqua-wiki-content-box .wiki-inhalt-liste li {
    margin: 0 0 5px;
    line-height: 22px;
    break-inside: avoid;
}

.wiki-inhalt-liste--eigen {
    padding-left: 0;
    list-style: none;
}

/* Links in Listen nur farblich abgesetzt, Unterstrich beim Zeigen (Vertrag Barrierefreiheit Nr. 9). Spezifität über der
   Theme-Regel .aqua-wiki-wrapper .aqua-wiki-content-box > div:not(.card-img-overlay) a:not(.btn) (0,4,2) */
.aqua-wiki-wrapper .aqua-wiki-content .wiki-inhalt .wiki-inhalt-liste a:not(.btn),
.aqua-wiki-wrapper .aqua-wiki-content ul.wiki-autor-links li a:not(.btn),
.aqua-wiki-wrapper .aqua-wiki-content .wiki-autorbox .wiki-autorbox-mehr a:not(.btn) {
    text-decoration: none;
}

.aqua-wiki-wrapper .aqua-wiki-content .wiki-inhalt .wiki-inhalt-liste a:not(.btn):hover,
.aqua-wiki-wrapper .aqua-wiki-content ul.wiki-autor-links li a:not(.btn):hover,
.aqua-wiki-wrapper .aqua-wiki-content .wiki-autorbox .wiki-autorbox-mehr a:not(.btn):hover {
    text-decoration: underline;
}

/* ab md zweispaltig: zehn Punkte nehmen sonst eine Bildschirmhöhe ein */
@media (min-width: 768px) {
    .wiki-inhalt-liste {
        column-count: 2;
        column-gap: 40px;
    }
}

/* Tief- und hochgestellte Ziffern (CO2, NO3, m²) im Beitrag (0.4.1-as.21): Bootstrap setzt 75 % und -0,25/-0,5 em
   Versatz – die 2 in CO2 war zu klein. 85 % bei 16 px Text = 13,6 px, Versatz -0,15/-0,4 em; line-height: 0 aus dem
   Theme bleibt, die Zeilenhöhe ändert sich nicht (gemessen 29.10.2026: Höhe aller 15 Absätze/Überschriften mit sub in
   Beitrag 764 gleich, 390 und 1280 px). Gilt für Inhalt, Kurztext und Überschriften der Beitragskarte. */
.aqua-wiki-content-box sub,
.aqua-wiki-content-box sup {
    font-size: 85%;
}

.aqua-wiki-content-box sub {
    bottom: -.15em;
}

.aqua-wiki-content-box sup {
    top: -.4em;
}

/* Sprungmarken (Gliederung setzt id="wiki-…"): Den festen Kopf zieht schon das scroll-padding-top des Themes ab
   (html, base/_utils.scss, gemessen 70 px bei 1280); hier nur der Rasterabstand darüber */
.aqua-wiki-content .card-body [id^="wiki-"] {
    scroll-margin-top: 10px;
}

/* Autorbox am Ende des Beitrags */
.wiki-autorbox {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin: 40px 0 0;
    padding: 20px;
    background: #eef3ea;
}

.wiki-autorbox-bild {
    width: 96px;
    height: 96px;
}

.wiki-autorbox-text {
    flex: 1 1 auto;
    min-width: 0;
}

.aqua-wiki-content .wiki-autorbox-titel {
    margin: 0 0 5px;
    padding: 0;
    border: 0;
    font-size: 20px;
    line-height: 25px;
}

.wiki-autorbox-rolle,
.wiki-autor-profil-rolle,
.wiki-autoren-karte-rolle {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 20px;
    color: #6e6e6e;
}

.wiki-autorbox-kurztext {
    margin: 0 0 10px;
}

.wiki-autorbox-mehr {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 20px;
    margin: 0;
}

.wiki-autorbox-mehr a,
.wiki-autor-links a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
}

.wiki-autorbox-mehr .fa-solid {
    font-size: 12px;
}

.wiki-autor-links {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 20px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.wiki-autor-links li {
    margin: 0;
    line-height: 20px;
}

/* Autorenseite */
.wiki-autor-profil {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin: 0 0 20px;
    padding: 20px;
    background: #fff;
}

.wiki-autor-profil-bild {
    width: 120px;
    height: 120px;
}

.wiki-autor-profil-text {
    flex: 1 1 auto;
    min-width: 0;
}

.wiki-autor-profil-name {
    margin: 0 0 5px;
}

.wiki-autor-profil-absatz {
    margin: 0 0 10px;
}

.wiki-autor-beitraege-titel,
.wiki-autoren-titel {
    margin: 0 0 20px;
}

/* Autorenübersicht */
.wiki-autoren-liste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wiki-autoren-karte {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin: 0 0 20px;
    padding: 20px;
    background: #fff;
}

.wiki-autoren-karte-bild {
    width: 72px;
    height: 72px;
}

.wiki-autoren-karte-text {
    flex: 1 1 auto;
    min-width: 0;
}

.wiki-autoren-karte-name {
    margin: 0 0 5px;
    font-size: 20px;
    line-height: 25px;
}

.wiki-autoren-karte-kurztext,
.wiki-autoren-karte-anzahl {
    margin: 0 0 5px;
}

.wiki-autoren-karte-anzahl {
    font-size: 14px;
    color: #6e6e6e;
}

/* unter sm: Foto über dem Text */
@media (max-width: 575.98px) {
    .wiki-autorbox,
    .wiki-autor-profil {
        flex-direction: column;
        gap: 10px;
    }

    .wiki-autorbox-bild,
    .wiki-autor-profil-bild {
        width: 72px;
        height: 72px;
    }
}

/* ==========================================================================================================
   Bausteine des Einfüge-Assistenten (Strang E, tasks/29-10/wiki-einfuegen/KONZEPT.md §2, §3 Nr. 2)
   wiki-bild, wiki-galerie, wiki-tabelle, wiki-video, wiki-hinweis, wiki-schritte, wiki-liste.
   Raster 5/10/20 px (Skill jtl-theme references/ui-gestaltung.md). Farben aus der Palette des Themes
   (abstracts/_colors.scss): Rahmen nur Fläche/Rahmen-Töne, Text bleibt Theme-Text. Hintergründe der Hinweisboxen
   so hell, dass Text #627077 und Links #55791c darauf ≥ 4,5 : 1 haben (Tipp 4,82/4,78, Achtung 4,90/4,86,
   Info 4,82/4,78). Tabellen erben die Wiki-Tabellenregeln des Themes (components/_tables.scss).
   ========================================================================================================== */
.aqua-wiki-content-box .card-body::after {
    content: "";
    display: table;
    clear: both;
}

.aqua-wiki-content-box .wiki-bild {
    margin: 20px 0;
}

.aqua-wiki-content-box .wiki-bild img {
    display: block;
    max-width: 100%;
    height: auto;
}

.aqua-wiki-content-box .wiki-bild--gross img {
    width: 100%;
}

.aqua-wiki-content-box .wiki-bild--mittel {
    max-width: 50%;
    margin-right: auto;
    margin-left: auto;
}

.aqua-wiki-content-box .wiki-bild--mittel img {
    margin-right: auto;
    margin-left: auto;
}

.aqua-wiki-content-box .wiki-bild--klein-links {
    float: left;
    width: 33.333%;
    margin: 5px 20px 10px 0;
}

.aqua-wiki-content-box .wiki-bild--klein-rechts {
    float: right;
    width: 33.333%;
    margin: 5px 0 10px 20px;
}

.aqua-wiki-content-box .wiki-bild--klein-links img,
.aqua-wiki-content-box .wiki-bild--klein-rechts img {
    width: 100%;
}

@media (max-width: 575.98px) {
    .aqua-wiki-content-box .wiki-bild--mittel,
    .aqua-wiki-content-box .wiki-bild--klein-links,
    .aqua-wiki-content-box .wiki-bild--klein-rechts {
        float: none;
        width: auto;
        max-width: none;
        margin: 20px 0;
    }
}

.aqua-wiki-content-box .wiki-bild figcaption {
    margin-top: 5px;
    font-size: .875rem;
    line-height: 1.4;
}

.aqua-wiki-content-box .wiki-galerie {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    clear: both;
    margin: 20px 0;
}

@media (min-width: 576px) {
    .aqua-wiki-content-box .wiki-galerie--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .aqua-wiki-content-box .wiki-galerie--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.aqua-wiki-content-box .wiki-galerie .wiki-bild {
    margin: 0;
}

.aqua-wiki-content-box .wiki-galerie img {
    width: 100%;
}

/* Tabelle: mobil waagerecht scrollbar; Fokus für Tastatur nicht nötig, der Rahmen enthält keine Bedienelemente */
.aqua-wiki-content-box .wiki-tabelle-rahmen {
    clear: both;
    margin: 20px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Fokus wie Links und Knöpfe des Themes (2 px schwarz gestrichelt, base/_accessibility.scss), nach innen gegen overflow */
.aqua-wiki-content-box .wiki-tabelle-rahmen:focus-visible {
    outline: 2px dashed #000;
    outline-offset: -2px;
}

.aqua-wiki-content-box .wiki-tabelle {
    width: 100%;
    margin-bottom: 0;
}

.aqua-wiki-content-box .wiki-tabelle caption {
    caption-side: top;
    padding: 0 0 10px;
    color: inherit;
    font-weight: 600;
    text-align: left;
}

.aqua-wiki-content-box .wiki-tabelle th,
.aqua-wiki-content-box .wiki-tabelle td {
    vertical-align: top;
    text-align: left;
}

.aqua-wiki-content-box .wiki-video {
    clear: both;
    margin: 20px 0;
}

/* nur das iframe direkt im Baustein; as_consent ersetzt es im Shop durch .as-consent-embed mit eigenem Seitenverhältnis */
.aqua-wiki-content-box .wiki-video > iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
}

.aqua-wiki-content-box .wiki-hinweis {
    clear: both;
    margin: 20px 0;
    padding: 10px 20px;
    border: 2px solid #8fcb2f;
    border-radius: 4px;
    background: #f5faee;
}

.aqua-wiki-content-box .wiki-hinweis--achtung {
    border-color: #ffc018;
    background: #fffaeb;
}

.aqua-wiki-content-box .wiki-hinweis--info {
    border-color: #50c8c6;
    background: #f1fafa;
}

.aqua-wiki-content-box .wiki-hinweis > :last-child {
    margin-bottom: 0;
}

.aqua-wiki-content-box .wiki-schritte > li {
    margin-bottom: 20px;
}

.aqua-wiki-content-box .wiki-schritte h3 {
    margin-bottom: 5px;
}

.aqua-wiki-content-box .wiki-liste > li {
    margin-bottom: 5px;
}