/* kurse.css - Stilblatt der Kursplattform.
 *
 * Von Hand geschrieben statt die 2,9 MB grosse Tailwind-Datei des
 * Downloadwegs mitzuschleppen: gebraucht werden hier eine Leseespalte, eine
 * Seitenleiste und ein Fortschrittsbalken, und davon kommt in jenen
 * Hilfsklassen nichts vor.
 *
 * Helles und dunkles Erscheinungsbild ueber Farbwerte an einer Stelle. Ein
 * Kurs wird auch abends gelesen. */

:root {
    --grund:      #fbfaf8;
    --flaeche:    #ffffff;
    --rahmen:     #e3ded6;
    --schrift:    #23201c;
    --gedaempft:  #6b645b;
    --akzent:     #7a5c2e;
    --akzent-hell:#f0e9dd;
    --warnen:     #8a3324;
    --gut:        #3f6f4a;
    --breite:     68ch;
}

@media (prefers-color-scheme: dark) {
    :root {
        --grund:      #161513;
        --flaeche:    #1e1d1a;
        --rahmen:     #34322d;
        --schrift:    #e8e4dd;
        --gedaempft:  #a09a90;
        --akzent:     #d2ac6e;
        --akzent-hell:#2b2620;
        --warnen:     #e08a7a;
        --gut:        #7fb98c;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--schrift);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-text-size-adjust: 100%;
}

a { color: var(--akzent); }
a:hover { text-decoration: none; }

/* --- Kopf und Fuss ------------------------------------------------------ */

.kopf {
    border-bottom: 1px solid var(--rahmen);
    background: var(--flaeche);
}

.kopf-innen {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0.9rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.marke {
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--schrift);
}

.abmelden {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
}

.adresse {
    color: var(--gedaempft);
    font-size: 0.85rem;
    word-break: break-all;
}

.fuss {
    margin-top: 4rem;
    padding: 1.5rem 1.25rem;
    border-top: 1px solid var(--rahmen);
    color: var(--gedaempft);
    font-size: 0.85rem;
    text-align: center;
}

.fuss p { margin: 0.35rem 0; }
.fuss-verweise { display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap; }

/* --- Huelle ------------------------------------------------------------- */

.huelle {
    max-width: 1120px;
    margin: 0 auto;
    padding: 2rem 1.25rem 0;
}

.huelle-schmal { max-width: 720px; }

.huelle-zweispaltig {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

@media (max-width: 860px) {
    .huelle-zweispaltig {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }
}

.spalte { min-width: 0; }
.spalte > .text,
.spalte > p,
.spalte > ol,
.spalte > ul { max-width: var(--breite); }

h1 { font-size: 1.75rem; line-height: 1.25; margin: 0 0 1rem; }
h2 { font-size: 1.25rem; margin: 2.25rem 0 0.75rem; }
h3 { font-size: 1.05rem; margin: 1.75rem 0 0.5rem; }

/* --- Seitenleiste ------------------------------------------------------- */

.leiste {
    position: sticky;
    top: 1.5rem;
    background: var(--flaeche);
    border: 1px solid var(--rahmen);
    border-radius: 10px;
    padding: 1.1rem 1.2rem;
    font-size: 0.92rem;
}

@media (max-width: 860px) {
    .leiste { position: static; }
}

.baum-titel {
    display: block;
    font-weight: 600;
    color: var(--schrift);
    text-decoration: none;
    margin-bottom: 0.75rem;
}

.baum-kapitel {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--gedaempft);
    margin: 1.25rem 0 0.4rem;
}

.baum-liste, .lektionen {
    list-style: none;
    margin: 0;
    padding: 0;
}

.baum-liste li { margin: 0; }

.baum-liste a {
    display: flex;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    text-decoration: none;
    color: var(--schrift);
}

.baum-liste a:hover { background: var(--akzent-hell); }

.baum-liste .ist-aktiv > a {
    background: var(--akzent-hell);
    font-weight: 600;
}

.haken {
    color: var(--gut);
    width: 1em;
    flex: none;
    text-align: center;
}

/* --- Fortschritt -------------------------------------------------------- */

.balken {
    height: 6px;
    background: var(--rahmen);
    border-radius: 3px;
    overflow: hidden;
    margin: 0.5rem 0 0.35rem;
    max-width: var(--breite);
}

.balken-gross { height: 10px; }

.balken-fuellung {
    height: 100%;
    background: var(--gut);
}

.balken-text {
    margin: 0 0 1rem;
    color: var(--gedaempft);
    font-size: 0.85rem;
}

/* --- Uebersicht --------------------------------------------------------- */

.karten { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }

.karte {
    background: var(--flaeche);
    border: 1px solid var(--rahmen);
    border-radius: 10px;
    padding: 1.4rem 1.5rem;
}

.karte h2 { margin: 0 0 0.5rem; font-size: 1.2rem; }
.karte h2 a { text-decoration: none; }
.karte-text { color: var(--gedaempft); margin: 0 0 0.75rem; }

/* --- Lektionsliste auf der Kursseite ------------------------------------ */

.lektionen li {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--rahmen);
}

.lektionen a {
    display: flex;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--schrift);
}

.lektionen a:hover { color: var(--akzent); }
.dauer { color: var(--gedaempft); font-size: 0.8rem; margin-left: auto; }
.dauer-gross { color: var(--gedaempft); margin-top: -0.5rem; }
.kapitel { color: var(--gedaempft); }

/* --- Lektionstext ------------------------------------------------------- */

.brotkrume { margin: 0 0 0.5rem; font-size: 0.85rem; }
.brotkrume a { color: var(--gedaempft); }

.text > *:first-child { margin-top: 0; }
.text p, .text li { line-height: 1.7; }
.text ul, .text ol { padding-left: 1.3rem; }
.text blockquote {
    margin: 1.5rem 0;
    padding: 0.25rem 0 0.25rem 1.1rem;
    border-left: 3px solid var(--akzent);
    color: var(--gedaempft);
}
.text code {
    background: var(--akzent-hell);
    padding: 0.1em 0.35em;
    border-radius: 4px;
    font-size: 0.9em;
}
.text pre {
    background: var(--akzent-hell);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
}
.text pre code { background: none; padding: 0; }
.text img { max-width: 100%; height: auto; border-radius: 8px; }
.text table { border-collapse: collapse; width: 100%; }
.text th, .text td { border: 1px solid var(--rahmen); padding: 0.45rem 0.6rem; text-align: left; }
.text hr { border: 0; border-top: 1px solid var(--rahmen); margin: 2rem 0; }

/* Videoeinbettung, 16:9. Die Videos liegen ungelistet bei YouTube oder Vimeo,
   hier steht nur der Rahmen. */
.video {
    position: relative;
    padding-top: 56.25%;
    margin: 0 0 1.75rem;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    max-width: var(--breite);
}

.video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Die Flaeche vor dem Klick. Bewusst ohne Vorschaubild vom Hoster - auch das
   waere schon die Verbindung, die hier vermieden werden soll. Der Verlauf ist
   rein oertlich. */
.video-gesperrt {
    background: linear-gradient(150deg, var(--akzent-hell), var(--rahmen));
    border: 1px solid var(--rahmen);
}

.video-start {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--schrift);
    padding: 1rem 1rem 5.5rem;
}

.video-start:hover .video-knopf {
    transform: scale(1.08);
}

.video-knopf {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--akzent);
    color: var(--flaeche);
    font-size: 1.5rem;
    padding-left: 0.2em;
    transition: transform 0.15s ease;
}

.video-text { font-weight: 600; }

.video-hinweis {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0.75rem 1rem;
    background: var(--flaeche);
    border-top: 1px solid var(--rahmen);
    color: var(--gedaempft);
    font-size: 0.8rem;
    line-height: 1.5;
    text-align: center;
}

/* --- Knoepfe und Formulare ---------------------------------------------- */

.knopf, .knopf-flach, .knopf-warnen {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    border: 1px solid var(--akzent);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.knopf { background: var(--akzent); color: var(--flaeche); }
.knopf:hover { filter: brightness(1.08); }

.knopf-flach {
    background: transparent;
    color: var(--akzent);
    padding: 0.4rem 0.9rem;
    font-weight: 500;
}
.knopf-flach:hover { background: var(--akzent-hell); }

.knopf-warnen {
    background: transparent;
    border-color: var(--warnen);
    color: var(--warnen);
}
.knopf-warnen:hover { background: var(--warnen); color: var(--flaeche); }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }

.formular { max-width: 30rem; margin-top: 1.5rem; display: grid; gap: 1.25rem; }
.feld { display: grid; gap: 0.35rem; }
.feld label { font-weight: 600; font-size: 0.9rem; }

.feld input[type="email"],
.feld input[type="text"],
.feld input[type="password"] {
    font: inherit;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--rahmen);
    border-radius: 8px;
    background: var(--flaeche);
    color: var(--schrift);
    width: 100%;
}

.feld-hinweis, .leer { color: var(--gedaempft); font-size: 0.85rem; max-width: var(--breite); }
.ankreuz { display: flex; gap: 0.5rem; align-items: center; font-size: 0.9rem; }

/* --- Meldungen ---------------------------------------------------------- */

.hinweis, .fehler {
    padding: 0.85rem 1rem;
    border-radius: 8px;
    margin: 0 0 1.5rem;
    max-width: var(--breite);
}

.hinweis { background: var(--akzent-hell); }
.fehler { background: var(--akzent-hell); color: var(--warnen); border: 1px solid var(--warnen); }

.wege { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0; }

.fortschritt { margin: 2.5rem 0 1rem; }
.erledigt-hinweis { color: var(--gut); margin: 0 0 0.5rem; font-weight: 600; }

/* --- Vor und zurueck ---------------------------------------------------- */

.weiter {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 2.5rem 0 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rahmen);
}

.weiter a {
    display: grid;
    gap: 0.15rem;
    text-decoration: none;
    color: var(--schrift);
    max-width: 45%;
}

.weiter-vor { text-align: right; }
.weiter a:hover { color: var(--akzent); }

.weiter-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--gedaempft);
}

/* --- Tabelle der Verwaltungsseite --------------------------------------- */

.tabelle { border-collapse: collapse; width: 100%; font-size: 0.9rem; margin-bottom: 1.5rem; }
.tabelle th, .tabelle td { border: 1px solid var(--rahmen); padding: 0.45rem 0.6rem; text-align: left; }
.tabelle th { background: var(--akzent-hell); }

/* Nur fuer Vorleseprogramme, nicht auf dem Bildschirm. */
.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}