/**
 * KI-Seminar Teil 3: Dark-Mode-Anpassungen und Termin-Layout.
 * Die Seiten-Styles nutzen den Token --color-bg, den das Suite-Bundle nicht
 * definiert; die Bruecke unten koppelt ihn an das Farbschema (gleiche Mechanik
 * wie bundle.css: media-query plus data-theme-Override). Zusaetzlich erhalten
 * die fest hellgruenen Flaechen (Hero-Badges, Leistungs-Kaestchen) dunkle
 * Varianten, damit Titel und Text im Dark Mode lesbar bleiben.
 */

:root {
    --color-bg: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: #1a1a1a;
    }
    :root:not([data-theme="light"]) .kis-hero-badge,
    :root:not([data-theme="light"]) .kis-check-item {
        background: hsl(145, 20%, 15%);
        border-color: hsl(145, 20%, 30%);
    }
    :root:not([data-theme="light"]) .kis-hero-badge svg,
    :root:not([data-theme="light"]) .kis-check-item svg {
        color: hsl(145, 45%, 62%);
    }
    :root:not([data-theme="light"]) .kis-cta-btn {
        background: #7db33f;
        color: #14240a;
    }
    :root:not([data-theme="light"]) .kis-cta-btn:hover {
        background: #8fc95a;
    }
}

[data-theme="dark"] {
    --color-bg: #1a1a1a;
}

[data-theme="dark"] .kis-hero-badge,
[data-theme="dark"] .kis-check-item {
    background: hsl(145, 20%, 15%);
    border-color: hsl(145, 20%, 30%);
}

[data-theme="dark"] .kis-hero-badge svg,
[data-theme="dark"] .kis-check-item svg {
    color: hsl(145, 45%, 62%);
}

[data-theme="dark"] .kis-cta-btn {
    background: #7db33f;
    color: #14240a;
}

[data-theme="dark"] .kis-cta-btn:hover {
    background: #8fc95a;
}

[data-theme="light"] {
    --color-bg: #ffffff;
}

/* Bildschirm-Simulation (Fahrplan-Abschnitt): responsiv skalierendes 16:9-SVG */
.kis-screen-sim {
    max-width: 860px;
    margin: 1.5rem auto 0;
}

.kis-screen-sim svg {
    display: block;
    width: 100%;
    height: auto;
    font-family: var(--font-family-base, "Avenir", sans-serif);
}

/* KI-Glove-Figur: Aufgabenfluss von links durch den Handschuh zu den Servern */
.kis-glove-figure {
    max-width: 900px;
    margin: 1.5rem auto 0;
}

.kis-glove-figure svg {
    display: block;
    width: 100%;
    height: auto;
}

.kis-gl-dot {
    opacity: 0.35;
}

.kis-gl-name {
    opacity: 0;
}

.kis-gl-name--1 {
    opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
    .kis-gl-dot {
        opacity: 0;
        animation: kis-gl-weg-a 25s linear infinite;
    }
    .kis-gl-dot--2 { animation-name: kis-gl-weg-b; animation-delay: 5s; }
    .kis-gl-dot--3 { animation-name: kis-gl-weg-c; animation-delay: 10s; }
    .kis-gl-dot--4 { animation-delay: 15s; }
    .kis-gl-dot--5 { animation-name: kis-gl-weg-b; animation-delay: 20s; }
    .kis-gl-dot--blocked { animation: kis-gl-block 25s linear infinite; }
    .kis-gl-name {
        opacity: 0;
        animation: kis-gl-name 25s linear infinite;
    }
    .kis-gl-name--1 { opacity: 0; }
    .kis-gl-name--2 { animation-delay: 5s; }
    .kis-gl-name--3 { animation-delay: 10s; }
    .kis-gl-name--4 { animation-delay: 15s; }
    .kis-gl-name--5 { animation-delay: 20s; }
}

@keyframes kis-gl-weg-a {
    0% { transform: translate(0, 0); opacity: 0; }
    0.5% { opacity: 0.9; }
    2.2% { transform: translate(52px, 0); opacity: 0.9; }
    2.8% { transform: translate(52px, 0); opacity: 0; }
    4.6% { transform: translate(192px, 0); opacity: 0; }
    5.2% { transform: translate(192px, 0); opacity: 0.9; }
    7% { transform: translate(244px, 0); opacity: 0.9; }
    7.6% { transform: translate(244px, 0); opacity: 0; }
    11.2% { transform: translate(484px, 0); opacity: 0; }
    11.8% { transform: translate(484px, 0); opacity: 0.9; }
    15.4% { transform: translate(534px, -83px); opacity: 0.9; }
    16.2% { transform: translate(534px, -83px); opacity: 0; }
    100% { transform: translate(534px, -83px); opacity: 0; }
}

@keyframes kis-gl-weg-b {
    0% { transform: translate(0, 0); opacity: 0; }
    0.5% { opacity: 0.9; }
    2.2% { transform: translate(52px, 0); opacity: 0.9; }
    2.8% { transform: translate(52px, 0); opacity: 0; }
    4.6% { transform: translate(192px, 0); opacity: 0; }
    5.2% { transform: translate(192px, 0); opacity: 0.9; }
    7% { transform: translate(244px, 0); opacity: 0.9; }
    7.6% { transform: translate(244px, 0); opacity: 0; }
    11.2% { transform: translate(484px, 0); opacity: 0; }
    11.8% { transform: translate(484px, 0); opacity: 0.9; }
    15.4% { transform: translate(532px, 0); opacity: 0.9; }
    16.2% { transform: translate(532px, 0); opacity: 0; }
    100% { transform: translate(532px, 0); opacity: 0; }
}

@keyframes kis-gl-weg-c {
    0% { transform: translate(0, 0); opacity: 0; }
    0.5% { opacity: 0.9; }
    2.2% { transform: translate(52px, 0); opacity: 0.9; }
    2.8% { transform: translate(52px, 0); opacity: 0; }
    4.6% { transform: translate(192px, 0); opacity: 0; }
    5.2% { transform: translate(192px, 0); opacity: 0.9; }
    7% { transform: translate(244px, 0); opacity: 0.9; }
    7.6% { transform: translate(244px, 0); opacity: 0; }
    11.2% { transform: translate(484px, 0); opacity: 0; }
    11.8% { transform: translate(484px, 0); opacity: 0.9; }
    15.4% { transform: translate(534px, 83px); opacity: 0.9; }
    16.2% { transform: translate(534px, 83px); opacity: 0; }
    100% { transform: translate(534px, 83px); opacity: 0; }
}

@keyframes kis-gl-block {
    0% { transform: translate(0, 0); opacity: 0; }
    49% { transform: translate(0, 0); opacity: 0; }
    50% { opacity: 0.85; }
    52.4% { transform: translate(46px, 0); opacity: 0.85; }
    53.2% { transform: translate(38px, 0); }
    54% { transform: translate(46px, 0); opacity: 0.85; }
    56% { transform: translate(46px, 0); opacity: 0; }
    100% { transform: translate(46px, 0); opacity: 0; }
}

@keyframes kis-gl-name {
    0% { opacity: 0; }
    1.5% { opacity: 1; }
    17.5% { opacity: 1; }
    19.5% { opacity: 0; }
    100% { opacity: 0; }
}

/* Einzelner Termin: zentriert in einer Spalte statt linksbuendig im 3er-Raster */
.kis-cta-dates {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

/* Beispiel-Checkliste: Prueffragen links, priorisierte Modelle rechts */
.kis-checkliste { margin-top: 24px; }
.kis-cl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
    text-align: left;
}
@media (max-width: 760px) {
    .kis-cl-grid { grid-template-columns: 1fr; }
}
.kis-cl-frage {
    border: 1px solid var(--color-border, #d0d0d0);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 14px;
}
.kis-cl-frage legend {
    font-weight: 700;
    padding: 0 6px;
}
.kis-cl-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.kis-cl-opt {
    border: 1px solid var(--color-border, #d0d0d0);
    background: transparent;
    color: var(--color-text, #333333);
    border-radius: 999px;
    padding: 6px 14px;
    cursor: pointer;
    font: inherit;
    font-size: 0.92em;
}
.kis-cl-opt[aria-pressed="true"] {
    background: var(--color-accent, #3d6911);
    border-color: var(--color-accent, #3d6911);
    color: #ffffff;
}
.kis-cl-hinweis {
    font-size: 0.85em;
    color: var(--color-text-secondary, #666666);
    margin: 10px 0 0;
}
.kis-cl-ergebnis h3 { margin-top: 0; }
.kis-cl-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}
.kis-cl-item {
    border: 1px solid var(--color-border, #d0d0d0);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
}
.kis-cl-kopf {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.kis-cl-item p {
    font-size: 0.85em;
    color: var(--color-text-secondary, #666666);
    margin: 6px 0 0;
}
.kis-cl-balken {
    height: 6px;
    border-radius: 3px;
    background: var(--color-border, #d0d0d0);
    overflow: hidden;
    margin-top: 8px;
}
.kis-cl-balken span {
    display: block;
    height: 100%;
    background: var(--color-accent, #3d6911);
    border-radius: 3px;
}
.kis-cl-item--aus { opacity: 0.55; }
.kis-cl-fussnote {
    font-size: 0.8em;
    color: var(--color-text-secondary, #666666);
}

/* Checkliste dunkel: gewaehlte Option mit hellem Akzent und dunkler Schrift */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .kis-cl-opt[aria-pressed="true"] {
        color: #14240a;
    }
}
:root[data-theme="dark"] .kis-cl-opt[aria-pressed="true"] {
    color: #14240a;
}