/* FlashView-Handbuch — Web-Stylesheet.
 *
 * Laeuft auf flashview.net ZUSAETZLICH zu assets/css/style.css: Farben, Schriften
 * und Nav kommen von dort, hier steht nur, was die Handbuchseite braucht.
 * Die Variablennamen sind deshalb absichtlich dieselben wie in der Site
 * (--bg-primary, --text-secondary, --accent …) — faellt eine weg, greift der
 * Fallback dahinter.
 */

.manual {
    --m-rule:   rgba(255, 255, 255, 0.09);
    --m-panel:  rgba(255, 255, 255, 0.035);

    max-width: 1180px;
    margin: 0 auto;
    padding: calc(var(--nav-height, 64px) + 2rem) 1.5rem 6rem;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    /* Getrennt: die 3,5 rem sollen NUR zwischen den Spalten stehen. Als
       kombiniertes `gap` gelten sie auch zwischen den Grid-Zeilen und reissen
       zusammen mit den Kopf-Abstaenden ein Loch zwischen Titel, Aktionsleiste
       und dem ersten Kapitel. Zeilenabstaende regeln die Elemente selbst. */
    column-gap: 3.5rem;
    row-gap: 0;
    align-items: start;
    color: var(--text-secondary, #9898b0);
    line-height: 1.7;
}

/* ---------- Kopf ---------- */

.manual-head {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--m-rule);
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
}
.manual-head h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--text-primary, #e8e8f0);
    margin: 0 0 0.5rem;
    line-height: 1.1;
}
.manual-sub { font-size: 1.15rem; margin: 0 0 0.4rem; }
.manual-version {
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
    color: var(--text-muted, #606080);
    margin: 0;
}

/* ---------- Inhaltsverzeichnis: links, mitlaufend ---------- */

.toc {
    position: sticky;
    top: calc(var(--nav-height, 64px) + 1.5rem);
    font-size: 0.92rem;
}
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin-bottom: 0.6rem; }
.toc a {
    display: flex;
    gap: 0.6rem;
    color: var(--text-secondary, #9898b0);
    border-left: 2px solid transparent;
    padding-left: 0.7rem;
    transition: color 0.15s, border-color 0.15s;
}
.toc a:hover { color: var(--text-primary, #e8e8f0); border-left-color: var(--accent, #4a8fe7); }
.toc-num { font-family: var(--font-mono, monospace); color: var(--accent, #4a8fe7); font-size: 0.8rem; }

/* Ohne Inhaltsverzeichnis (Schnellstart) faellt die linke Spalte weg. */
.manual--quickstart { grid-template-columns: minmax(0, 1fr); max-width: 780px; }

/* ---------- Kapitel ---------- */

/* Die Spalte MUSS gesetzt sein: ohne sie verteilt das Auto-Placement die
   Kapitel abwechselnd auf beide Spalten, und jedes zweite landet unter dem
   Inhaltsverzeichnis. Faellt nur im Web auf - der Druck hat kein Grid. */
.chapter {
    grid-column: 2;
    max-width: 68ch;
    scroll-margin-top: calc(var(--nav-height, 64px) + 1rem);
}
.chapter + .chapter { margin-top: 4.5rem; }

/* Schnellstart hat nur eine Spalte. */
.manual--quickstart .chapter { grid-column: 1; }

.manual h1:not(.manual-head h1) {
    font-size: 1.9rem;
    color: var(--text-primary, #e8e8f0);
    margin: 0 0 1.5rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--accent, #4a8fe7);
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
}
.chapter-num { font-family: var(--font-mono, monospace); font-size: 1.2rem; color: var(--accent, #4a8fe7); }

.manual h2 {
    font-size: 1.3rem;
    color: var(--text-primary, #e8e8f0);
    margin: 2.5rem 0 0.8rem;
}
.manual h3 { font-size: 1.05rem; color: var(--text-primary, #e8e8f0); margin: 1.8rem 0 0.5rem; }
.manual p { margin: 0 0 1rem; }
.manual ul, .manual ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.manual li { margin-bottom: 0.35rem; }

/* ---------- Tasten, Code, Tabellen ---------- */

.manual kbd {
    font-family: var(--font-mono, monospace);
    font-size: 0.82em;
    padding: 0.15em 0.45em;
    border: 1px solid var(--m-rule);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--m-panel);
    color: var(--text-primary, #e8e8f0);
    white-space: nowrap;
}
.manual code {
    font-family: var(--font-mono, monospace);
    font-size: 0.88em;
    background: var(--m-panel);
    padding: 0.1em 0.35em;
    border-radius: 4px;
}
.manual table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2rem 0 1.8rem;
    font-size: 0.94rem;
}
.manual th {
    text-align: left;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, #606080);
    border-bottom: 1px solid var(--m-rule);
    padding: 0 0.8rem 0.5rem 0;
}
.manual td {
    padding: 0.6rem 0.8rem 0.6rem 0;
    border-bottom: 1px solid var(--m-rule);
    vertical-align: top;
}

/* ---------- Hinweiskaesten ---------- */

.admonition {
    background: var(--m-panel);
    border-left: 3px solid var(--accent, #4a8fe7);
    border-radius: 0 6px 6px 0;
    padding: 1rem 1.2rem;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}
.admonition.warning { border-left-color: #c8912e; }
/* Tipp: Best Practice, kein Pflichtwissen. */
.admonition.tip {
    border-left-color: var(--accent, #4a8fe7);
    background: rgba(74, 143, 231, 0.07);
}
/* Piktogramm in der Kastenueberschrift: sitzt in der Zeile, erbt Farbe und
   Groesse vom Titel. Der Titel wird dafuer zur Flex-Zeile. */
.admonition-title {
    display: flex;
    align-items: center;
    gap: 0.45em;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary, #e8e8f0);
    margin: 0 0 0.4rem;
    font-weight: 600;
}
.admonition p:last-child { margin-bottom: 0; }

/* Groesser als der Titel: der ist in Versalien und klein gesetzt (8,5 pt im
   Druck) - ein Icon auf exakt 1em verschwindet dort zum Punkt. */
.admonition-icon {
    width: 1.35em;
    height: 1.35em;
    flex: none;
    opacity: 0.9;
}


/* ---------- Screenshots ---------- */

figure.shot { margin: 1.5rem 0 2rem; }
figure.shot img {
    display: block;
    width: 100%;
    border: 1px solid var(--m-rule);
    border-radius: 6px;
}
figcaption { font-size: 0.85rem; color: var(--text-muted, #606080); margin-top: 0.5rem; }

/* Bilder rechts, Text behaelt die linke Kante — dieselbe Regel wie im PDF
   (Stilprobe 03.08.2026, siehe docs/manual/STYLE.md). */
figure.shot--small,
figure.shot--medium {
    float: right;
    clear: right;
    width: 42%;
    margin: 0.3rem 0 1.2rem 1.8rem;
}
.manual h2 { clear: both; }

.shot--wide {
    float: none;
    clear: both;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Schritt-Zeilen: Text links, Bild rechts. */
.step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 1.5rem;
    clear: both;
}
.step__img { grid-column: 2; }
.step__text { grid-row: 1; grid-column: 1; }
.step__img img {
    display: block;
    width: 100%;
    border: 1px solid var(--m-rule);
    border-radius: 6px;
}

@media (max-width: 900px) {
    .manual { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .toc { position: static; }
    .chapter { grid-column: 1; }
    /* Auf dem Handy hat das Umfliessen keinen Platz: alles wird gestapelt,
       Bild unter dem Text. */
    .step { grid-template-columns: minmax(0, 1fr); }
    .step__img, .step__text { grid-column: 1; }
    .step__img { grid-row: 2; }
    figure.shot--small, figure.shot--medium {
        float: none;
        width: 100%;
        margin: 1rem 0 1.5rem;
    }
}

/* ---------- Nur auf flashview.net ---------- */
/* Der Teil unterhalb dieser Linie steht NICHT im App-Repo: er betrifft die
   Rahmenelemente, die erst die Website beisteuert (Sprachhinweis, PDF-Fuss,
   aktiver TOC-Eintrag beim Scrollen). */

.manual-note {
    max-width: 1180px;
    margin: 0 auto;
    padding: calc(var(--nav-height, 64px) + 1.5rem) 1.5rem 0;
    color: var(--text-muted, #6b6b85);
    font-size: 0.9rem;
}
.manual-note--lang + .manual { padding-top: 1.5rem; }

/* Aktionsleiste unter dem Titel: PDF-Download und der Verweis auf die andere
   Fassung. Sitzt im Grid ueber die volle Breite, damit sie nicht neben dem
   Inhaltsverzeichnis klebt. Eingesetzt von includes/manual-page.php. */
.manual-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin: 0 0 2.25rem;
}
/* Icon und Beschriftung sitzen als Zeile zusammen - das gilt fuer den Knopf
   wie fuer den Textlink, damit beide auf derselben Grundlinie stehen. */
.manual-actions .btn,
.manual-actions__alt {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}
.manual-actions__icon { flex: none; opacity: 0.85; }

.manual-actions__alt {
    color: var(--text-secondary, #9898b0);
    font-size: 0.92rem;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.manual-actions__alt:hover {
    color: var(--text-primary, #e8e8f0);
}
.manual-actions__alt:hover span { border-bottom: 1px solid var(--accent, #4a8fe7); }
.manual-actions__alt:hover .manual-actions__icon { opacity: 1; }

/* Aktiver Eintrag im Inhaltsverzeichnis, gesetzt von assets/js/manual.js. */
.toc a.is-current {
    color: var(--text-primary, #e8e8f0);
    border-left-color: var(--accent, #4a8fe7);
}