/*
 * vennetv_kb.css — Wissensdatenbank + News & Updates im Futuristic-Stil (KB-Redesign, 18.10.2026, Session kb-redesign, Kimmy-Go).
 * Quelle: ~/whm-dev-mirror/templates/lagom2-pages/kb/vennetv_kb.css — nie auf dem Server editieren.
 * Ziel:   templates/lagom2/vennetv_kb.css (Theme-Stammordner, überlebt Lagom-Updates), eingebunden per includes/hooks/venne_kb_stil.php
 *         (ClientAreaHeadOutput, nur auf den KB-/Announcement-Seiten, nach dem Lagom-CSS, ?v=<Änderungszeit>).
 *
 * Warum eigene Klassen: WHMCS entfernt beim Ausgeben von Artikeln id, loading, target, rel, role, aria-*, data-*, srcset und die Tags
 * section/figure/figcaption/aside/details/nav/picture/svg/mark (Probe DEV 18.10.2026). Erlaubt bleiben div, p, h2, h3, ol/ul/li, dl/dt/dd (ohne div darin),
 * table, img (src alt width height class), a (href class), strong, em, code, kbd, small, span, i, abbr, hr, u, s, sup. Lagom 2.4.5 bringt
 * Bootstrap 4 — die Bootstrap-5-Klassen der Altartikel (ps-3, fw-bold, border-start, rounded-3 …) wirken nicht. Alles Gestalterische hängt
 * deshalb an vtvkb-*-Klassen; Lagom-Variablen nur mit Rückfallwert, damit ein Lagom-Update nichts kaputt macht.
 *
 * Bausteine (Schablone: artikel/SCHABLONE.html):
 *   .vtvkb              Hülle (Artikel oder Announcement)        .vtvkb-lead       Ergebnis-Satz (erster Absatz, ohne Titelwiederholung)
 *   .vtvkb-h / -h3      Abschnitts-/Unterüberschrift            .vtvkb-steps      nummerierte Schritte (Kreis-Zähler)
 *   .vtvkb-fig(s)       Bild mit Unterschrift (.vtvkb-cap), --handy schmal, .vtvkb-figs = Desktop + Handy nebeneinander
 *   .vtvkb-kicker       kleine Vorzeile („Gut zu wissen“)        .vtvkb-facts      Liste mit Häkchen
 *   .vtvkb-hint         EIN Hinweiskasten je Artikel (--warn/--info/--ok)
 *   .vtvkb-cases        Zustand → was tun (ul, Karten)           .vtvkb-table      Nachschlagetabelle
 *   .vtvkb-toc          Sprungleiste (Chips)                    .vtvkb-more       Weiter-Zeile mit Knöpfen (.btn.btn-sm.btn-primary / -faded)
 *   .vtvkb-badge        Statuswort als Pille (--ok/--off/--wait)
 *   Sprungziele: Klasse vtvkb-anker-<name> → Hook venne_kb_anker.php setzt id="<name>".
 */

/* ---------- 0  Farben (rgb-Tripel wie in vennetv_alerts.css) und Grundwerte ---------- */
.vtvkb {
    --vtvkb-info: 77, 139, 255;
    --vtvkb-warn: 255, 170, 0;
    --vtvkb-ok: 54, 192, 85;
    --vtvkb-bad: 229, 72, 77;
    --vtvkb-accent: var(--brand-primary, #d14c4c);
    --vtvkb-text: var(--text-body-color, rgba(235, 241, 255, .92));
    --vtvkb-head: var(--text-heading-color, #ffffff);
    --vtvkb-mute: var(--text-lighter-color, #9aa6b8);
    --vtvkb-line: var(--ui-block-divider-color, rgba(178, 204, 255, .12));
    /* Rundungen (shop-rundungen-tokens.md, 19.10.2026): nur die zentralen Tokens --vtv-r-karte/-knopf/-bild/-chip;
       Fallbacks = Lagom-Werte, falls der Hook venne_design_tokens.php fehlt (fail-open). */
    --vtvkb-radius: var(--vtv-r-karte, var(--ui-block-border-radius, 8px));
    --vtvkb-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    --vtvkb-i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
    --vtvkb-i-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
    --vtvkb-i-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m16 9-5.5 5.5L8 12'/%3E%3C/svg%3E");
    color: var(--vtvkb-text);
    font-size: 16px;
    line-height: 1.6;
    max-width: 76ch;
    overflow-wrap: anywhere;
    hyphens: manual;
}
.vtvkb > :first-child { margin-top: 0; }
.vtvkb > :last-child  { margin-bottom: 0; }
.vtvkb p { margin: 0 0 14px; }
.vtvkb a:not(.btn) {
    color: var(--vtvkb-head);
    text-decoration: underline;
    text-decoration-color: rgba(var(--vtvkb-info), .7);
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
}
.vtvkb a:not(.btn):hover { text-decoration-color: rgb(var(--vtvkb-info)); }
.vtvkb strong { color: var(--vtvkb-head); font-weight: 600; }
.vtvkb code, .vtvkb kbd {
    font: 500 .92em/1.3 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    color: var(--vtvkb-head);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--vtv-r-knopf, 4px);
    padding: 1px 6px;
    white-space: nowrap;
}
.vtvkb hr { border: 0; border-top: 1px solid var(--vtvkb-line); margin: 28px 0; }

/* ---------- 1  Ergebnis-Satz und Überschriften ---------- */
.vtvkb-lead {
    font-size: 18px;
    line-height: 1.55;
    color: var(--vtvkb-head);
    margin: 0 0 22px !important;
}
.vtvkb .vtvkb-h, .vtvkb h2.vtvkb-h {
    font-size: 21px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--vtvkb-head);
    margin: 36px 0 12px !important;
    padding-top: 22px;
    border-top: 1px solid var(--vtvkb-line);
    letter-spacing: 0;
}
.vtvkb .vtvkb-h:first-child, .vtvkb-lead + .vtvkb-h { border-top: 0; padding-top: 0; margin-top: 28px !important; }
.vtvkb .vtvkb-h3, .vtvkb h3.vtvkb-h3 {
    font-size: 17px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--vtvkb-head);
    margin: 22px 0 8px !important;
}
.vtvkb-kicker {
    margin: 22px 0 8px !important;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vtvkb-mute);
}

/* ---------- 2  Schritte ---------- */
.vtvkb ol.vtvkb-steps {
    list-style: none;
    counter-reset: vtvkb-step;
    margin: 0 0 18px;
    padding: 0;
}
.vtvkb ol.vtvkb-steps > li {
    counter-increment: vtvkb-step;
    position: relative;
    padding: 0 0 0 44px;
    margin: 0 0 12px;
    min-height: 30px;
}
.vtvkb ol.vtvkb-steps > li::before {
    content: counter(vtvkb-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--vtvkb-accent);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .06), 0 2px 8px rgba(0, 0, 0, .25);
}
.vtvkb ol.vtvkb-steps > li > p { margin: 0 0 6px; }
.vtvkb ol.vtvkb-steps > li > .vtvkb-fig, .vtvkb ol.vtvkb-steps > li > .vtvkb-figs { margin-top: 10px; }

/* ---------- 3  Bilder ---------- */
.vtvkb .vtvkb-fig { margin: 14px 0 22px; }
.vtvkb .vtvkb-fig img, .vtvkb .vtvkb-figs img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: var(--vtv-r-bild, 12px);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}
.vtvkb .vtvkb-fig--handy { max-width: 300px; }
.vtvkb .vtvkb-figs { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; margin: 14px 0 22px; }
.vtvkb .vtvkb-figs > .vtvkb-fig { flex: 1 1 320px; margin: 0; }
/* Eingebettete Videos (iframe, z. B. KB 3): volle Spaltenbreite, 16:9, nie breiter als die Spalte (Sichtprüfung 18.10.2026: 560 px lief auf 390 px über) */
.vtvkb .vtvkb-fig iframe { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--vtv-r-bild, 12px); background: #0b1020; }
.vtvkb .vtvkb-figs > .vtvkb-fig--handy { flex: 0 1 220px; }
.vtvkb .vtvkb-cap {
    margin: 8px 0 0 !important;
    font-size: 13px;
    line-height: 1.4;
    color: var(--vtvkb-mute);
}

/* ---------- 4  Gut zu wissen (Häkchenliste) und normale Listen ---------- */
.vtvkb ul.vtvkb-facts { list-style: none; margin: 0 0 18px; padding: 0; }
.vtvkb ul.vtvkb-facts > li { position: relative; padding-left: 28px; margin: 0 0 8px; }
.vtvkb ul.vtvkb-facts > li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .42em;
    width: 15px;
    height: 15px;
    background-color: rgb(var(--vtvkb-ok));
    -webkit-mask: var(--vtvkb-i-check) center / contain no-repeat;
    mask: var(--vtvkb-i-check) center / contain no-repeat;
}
.vtvkb ul:not([class]), .vtvkb ol:not([class]) { margin: 0 0 16px; padding-left: 22px; }
.vtvkb ul:not([class]) > li, .vtvkb ol:not([class]) > li { margin: 0 0 6px; }

/* ---------- 5  Hinweiskasten (einer je Artikel) ---------- */
.vtvkb .vtvkb-hint {
    --vtvkb-rgb: var(--vtvkb-info);
    --vtvkb-ico: var(--vtvkb-i-info);
    position: relative;
    margin: 18px 0 22px;
    padding: 14px 18px 14px 58px;
    border: 1px solid rgba(var(--vtvkb-rgb), .5);
    border-radius: var(--vtvkb-radius);
    background:
        radial-gradient(90% 160% at 0% 50%, rgba(var(--vtvkb-rgb), .14) 0%, rgba(var(--vtvkb-rgb), 0) 55%),
        rgba(var(--vtvkb-rgb), .06);
    box-shadow: 0 0 0 1px rgba(var(--vtvkb-rgb), .08), 0 4px 16px rgba(0, 0, 0, .16);
}
.vtvkb .vtvkb-hint--warn { --vtvkb-rgb: var(--vtvkb-warn); --vtvkb-ico: var(--vtvkb-i-warn); }
.vtvkb .vtvkb-hint--ok   { --vtvkb-rgb: var(--vtvkb-ok);   --vtvkb-ico: var(--vtvkb-i-ok); }
.vtvkb .vtvkb-hint::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, rgba(var(--vtvkb-rgb), .32) 0%, rgba(var(--vtvkb-rgb), .08) 72%);
    box-shadow: inset 0 0 0 1px rgba(var(--vtvkb-rgb), .45);
}
.vtvkb .vtvkb-hint::after {
    content: "";
    position: absolute;
    left: 23px;
    top: 21px;
    width: 14px;
    height: 14px;
    background-color: rgb(var(--vtvkb-rgb));
    -webkit-mask: var(--vtvkb-ico) center / contain no-repeat;
    mask: var(--vtvkb-ico) center / contain no-repeat;
}
.vtvkb .vtvkb-hint > p { margin: 0 0 6px; }
.vtvkb .vtvkb-hint > p:last-child { margin-bottom: 0; }
.vtvkb .vtvkb-hint > p > strong:first-child { color: var(--vtvkb-head); }

/* ---------- 6  Zustand → was tun (Karten; ul/li, weil WHMCS div-in-dl entfernt) ---------- */
.vtvkb ul.vtvkb-cases {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0 0 20px;
    padding: 0;
}
.vtvkb ul.vtvkb-cases > li {
    --vtvkb-dot: var(--vtvkb-warn);
    position: relative;
    margin: 0;
    padding: 14px 16px 12px 34px;
    border: 1px solid var(--vtvkb-line);
    border-radius: var(--vtvkb-radius);
    background: rgba(255, 255, 255, .035);
}
.vtvkb ul.vtvkb-cases > li::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 21px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(var(--vtvkb-dot));
    box-shadow: 0 0 8px rgba(var(--vtvkb-dot), .6);
}
.vtvkb ul.vtvkb-cases > li.vtvkb-case--ok   { --vtvkb-dot: var(--vtvkb-ok); }
.vtvkb ul.vtvkb-cases > li.vtvkb-case--bad  { --vtvkb-dot: var(--vtvkb-bad); }
.vtvkb ul.vtvkb-cases > li.vtvkb-case--info { --vtvkb-dot: var(--vtvkb-info); }
.vtvkb ul.vtvkb-cases > li > strong:first-child { display: block; margin: 0 0 4px; font-weight: 600; color: var(--vtvkb-head); }
@media (min-width: 768px) { .vtvkb ul.vtvkb-cases { grid-template-columns: 1fr 1fr; } }

/* ---------- 7  Tabelle ---------- */
.vtvkb table.vtvkb-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0 0 20px;
    font-size: 15px;
    border: 1px solid var(--vtvkb-line);
    border-radius: var(--vtvkb-radius);
    overflow: hidden;
}
.vtvkb table.vtvkb-table th, .vtvkb table.vtvkb-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--vtvkb-line); }
.vtvkb table.vtvkb-table thead th { border-top: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--vtvkb-mute); background: rgba(255, 255, 255, .04); }
.vtvkb table.vtvkb-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .025); }
.vtvkb table.vtvkb-table td:first-child { color: var(--vtvkb-head); font-weight: 600; }

/* ---------- 8  Sprungleiste, Weiter-Zeile, Statuspille ---------- */
.vtvkb .vtvkb-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px !important; }
.vtvkb .vtvkb-toc > a {
    display: inline-block;
    padding: 6px 12px;
    border-radius: var(--vtv-r-chip, var(--vtv-r-knopf, 4px));
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .05);
    color: var(--vtvkb-head);
    font-size: 13px;
    line-height: 1.3;
    text-decoration: none;
}
.vtvkb .vtvkb-toc > a:hover { border-color: rgba(var(--vtvkb-info), .7); background: rgba(var(--vtvkb-info), .12); }
.vtvkb .vtvkb-more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 26px 0 0 !important; padding-top: 18px; border-top: 1px solid var(--vtvkb-line); }
.vtvkb .vtvkb-more > .btn { margin: 0; }
.vtvkb .vtvkb-badge {
    display: inline-block;
    padding: 1px 9px;
    border-radius: var(--vtv-r-chip, var(--vtv-r-knopf, 4px));
    font-size: .85em;
    font-weight: 600;
    line-height: 1.5;
    color: var(--vtvkb-head);
    background: rgba(var(--vtvkb-info), .18);
    border: 1px solid rgba(var(--vtvkb-info), .5);
    white-space: nowrap;
}
.vtvkb .vtvkb-badge--ok   { background: rgba(var(--vtvkb-ok), .16);   border-color: rgba(var(--vtvkb-ok), .5); }
.vtvkb .vtvkb-badge--off  { background: rgba(var(--vtvkb-bad), .16);  border-color: rgba(var(--vtvkb-bad), .5); }
.vtvkb .vtvkb-badge--wait { background: rgba(var(--vtvkb-warn), .16); border-color: rgba(var(--vtvkb-warn), .5); }
[class*="vtvkb-anker-"] { scroll-margin-top: 96px; }

/* ---------- 9  Announcements: Teaser in der Liste, Einzelseite ---------- */
.announcements-list .vtvkb { max-width: none; font-size: inherit; }
.announcements-list .vtvkb-lead { font-size: inherit; color: inherit; margin: 0 0 8px !important; }
.announcements-list .vtvkb .vtvkb-more { display: none; }   /* Knöpfe nur auf der Einzelseite; die Karte ist schon ein Link */

/* ---------- 10  Handy: weniger Rahmen-in-Rahmen, mehr Textbreite ---------- */
@media (max-width: 767.98px) {
    .page-knowledgebasearticle .article.panel > .panel-body,
    .page-viewannouncement .article.panel > .panel-body { padding: 18px 16px; }
    .vtvkb { font-size: 15.5px; }
    .vtvkb-lead { font-size: 17px; }
    .vtvkb .vtvkb-h, .vtvkb h2.vtvkb-h { font-size: 19px; margin-top: 30px !important; padding-top: 18px; }
    .vtvkb ol.vtvkb-steps > li { padding-left: 40px; }
    .vtvkb ol.vtvkb-steps > li::before { width: 28px; height: 28px; font-size: 13px; }
    .vtvkb .vtvkb-hint { padding: 12px 14px 12px 52px; }
    .vtvkb .vtvkb-hint::before { left: 12px; }
    .vtvkb .vtvkb-hint::after { left: 19px; }
    .vtvkb .vtvkb-figs > .vtvkb-fig--handy { flex-basis: 100%; max-width: 260px; }
    .vtvkb table.vtvkb-table { font-size: 14px; }
    .vtvkb table.vtvkb-table th, .vtvkb table.vtvkb-table td { padding: 8px 10px; }
}