/* ============================================================
   DDAS Brand Fonts (Skill ddas-styleguide/references/web-ui-tokens.md)
   Nur fuer Header/Footer/Index verwendet (siehe unten) - der Lesefluss der
   Manual-Seiten selbst bleibt bewusst bei Arial, um die bestehende
   Lesbarkeit/Layout-Breite nicht ungeprueft ueber viele generierte Seiten
   hinweg zu veraendern.
   ============================================================ */

@font-face {
    font-family: 'Barlow';
    src: url('fonts/Barlow/Barlow-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Barlow';
    src: url('fonts/Barlow/Barlow-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('fonts/IBMPlexMono/IBMPlexMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/* 500 fuer den gemeinsamen Kopf und Fuss (Menue, Etiketten), aus @fontsource wie auf www.ddas.digital (OFL) */
@font-face {
    font-family: 'Barlow';
    src: url('fonts/Barlow/Barlow-Medium-latin.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('fonts/IBMPlexMono/IBMPlexMono-Medium-latin.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   Theme Tokens
   ============================================================ */

:root {
    --color-bg: #f5f6f7;
    --color-text: #222;
    --color-text-muted: #555;
    --color-surface: #fff;
    --color-border: #ddd;
    --color-border-strong: #ccc;
    --color-shadow: rgba(0, 0, 0, 0.05);

    --color-sidebar-bg: #f0f0f0;
    --color-sidebar-text: #333;
    --color-sidebar-highlight: #eceff1;
    --color-guide: #d8d8d8;

    /* DDAS-Markenfarben, fest fuer Header/Footer - bewusst NICHT ueber
       prefers-color-scheme veraendert (Navy funktioniert in beiden Modi),
       gleiches Prinzip wie Hero/Footer im CRA-Classification-Wizard. */
    --ddas-navy: #0c1b2e;
    --ddas-steel: #3e6e92;
    --ddas-steel-on-dark: #6fa3c9;
    --ddas-amber: #e2a33c;
    --ddas-graphite: #5a6672;
    --ddas-paper: #f6f5f2;
    --ddas-font-sans: 'Barlow', 'Helvetica Neue', sans-serif;
    --ddas-font-mono: 'IBM Plex Mono', 'Consolas', monospace;

    --color-header-bg: var(--ddas-navy);
    --color-header-text: var(--ddas-paper);
    --color-footer-bg: var(--ddas-navy);
    --color-footer-text: var(--ddas-paper);

    --color-link: #3d5a73;
    --color-link-hover-bg: rgba(61, 90, 115, 0.08);
    --color-code-bg: #eee;

    /* Sidebar sizing: --sidebar-width-base/-max are the tunable
       per-breakpoint bounds; js/sidebar.js measures the longest visible
       entry and writes --sidebar-width (and shrinks --sidebar-font-scale
       if it still doesn't fit at --sidebar-width-max) within those bounds.
       Without JS, --sidebar-width simply falls back to the base width. */
    --sidebar-width-base: 300px;
    --sidebar-width-max: 400px;
    --sidebar-width: var(--sidebar-width-base);
    --sidebar-font-scale: 1;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #1b1c1e;
        --color-text: #e4e4e4;
        --color-text-muted: #aaaaaa;
        --color-surface: #242526;
        --color-border: #3a3b3d;
        --color-border-strong: #4a4b4d;
        --color-shadow: rgba(0, 0, 0, 0.4);

        --color-sidebar-bg: #202124;
        --color-sidebar-text: #cfcfcf;
        --color-sidebar-highlight: #2d3947;
        --color-guide: #3a3b3d;

        /* Bleiben bewusst DDAS-Navy statt eines noch dunkleren Grau-Tons - Header/Footer
           sollen unabhaengig vom System-Farbschema gleich aussehen. */
        --color-header-bg: var(--ddas-navy);
        --color-header-text: var(--ddas-paper);
        --color-footer-bg: var(--ddas-navy);
        --color-footer-text: var(--ddas-paper);

        --color-link: #8fb2cc;
        --color-link-hover-bg: rgba(143, 178, 204, 0.12);
        --color-code-bg: #2b2c2e;
    }
}

/* ============================================================
   Base Layout
   ============================================================ */

html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--color-bg) !important;
    color: var(--color-text);
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

body {
    max-width: none !important;
    width: 100% !important;
    overflow-x: hidden; /* prevent horizontal scroll */
}

body.sidebar-open {
    overflow: hidden; /* lock background scroll while the mobile drawer is open */
}

/* ============================================================
   Layout with Sidebar
   ============================================================ */

/* Flex-Row statt frueher block+fixed-Sidebar: Header/Footer sind eigene,
   volle Breite einnehmende Bloeckse ausserhalb von .layout; die Sidebar
   selbst ist "position: sticky" und damit an die Hoehe von .layout gebunden
   (sie beginnt erst nach dem Header und scrollt spaetestens mit dem Ende
   von .layout aus dem Bild - kann also nie ueber Header/Footer hinausragen,
   siehe Kommentar bei .sidebar unten). */
.layout {
    display: flex;
    align-items: flex-start;
}

/* Sidebar */
.sidebar {
    /* sticky statt fixed: bleibt beim Scrollen oben stehen, aber nur solange
       .layout (der gemeinsame Elternblock von Sidebar+main) noch im Bild ist -
       am Ende von .layout (= vor dem Footer) scrollt sie mit weg. So laeuft
       die Sidebar nur noch zwischen Header und Footer, nicht mehr parallel zu
       beiden ueber die volle Seitenhoehe (vorher: position:fixed + height:100vh,
       unabhaengig vom Dokumentfluss). */
    position: sticky;
    top: 0;
    flex: 0 0 auto;
    width: min(var(--sidebar-width), 92vw);
    height: 100vh;          /* Deckelt die sichtbare Hoehe, ermoeglicht eigenes Scrollen */
    overflow-y: auto;       /* scroll when needed */
    background: var(--color-sidebar-bg);
    padding: 30px 20px;
    border-right: 1px solid var(--color-border);
    box-shadow: 2px 0 8px var(--color-shadow);
    box-sizing: border-box;
    z-index: 10;

    /* Thin, theme-aware scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
}

.sidebar::-webkit-scrollbar {
    width: 8px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 4px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--color-link);
}

/* Custom message above menu */
.sidebar-top-message {
    margin-bottom: 20px;
    font-size: 1rem;
    font-weight: 600;
    background: var(--color-sidebar-highlight);
    padding: 10px;
    border-radius: 4px;
}

.sidebar-top-message a {
    color: var(--color-link);
    text-decoration: none;
}

.sidebar-top-message a:hover {
    text-decoration: underline;
}

.sidebar h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Sidebar hierarchy */
.sidebar ul {
    padding-left: 0;
    margin: 0;
}

.sidebar li {
    list-style: none;
    margin: 2px 0;
    position: relative;
}

/* Top-level chapters */
.sidebar li.level-0 {
    margin-left: 0;
    font-size: calc(1rem * var(--sidebar-font-scale));
    font-weight: 600;
}

/* Sub-levels get an indentation guide line */
.sidebar li.level-1 {
    margin-left: 15px;
    padding-left: 10px;
    border-left: 2px solid var(--color-guide);
    font-size: calc(1rem * var(--sidebar-font-scale));
    font-weight: 400;
}

.sidebar li.level-2 {
    margin-left: 30px;
    padding-left: 10px;
    border-left: 2px solid var(--color-guide);
    font-size: calc(0.95rem * var(--sidebar-font-scale));
    font-weight: 400;
}

.sidebar li.level-3 {
    margin-left: 45px;
    padding-left: 10px;
    border-left: 2px solid var(--color-guide);
    font-size: calc(0.9rem * var(--sidebar-font-scale));
    font-weight: 400;
}

/* Collapsible sections */
.sidebar li.has-children {
    display: flex;
    align-items: center;
}

.sidebar li.has-children > a {
    flex: 1 1 auto;
    min-width: 0;
}

.sidebar-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 2px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.sidebar-toggle::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent currentColor;
}

.sidebar li.has-children:not(.collapsed) .sidebar-toggle {
    transform: rotate(90deg);
}

.sidebar a {
    display: block;
    color: var(--color-sidebar-text);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar a:hover {
    background: var(--color-link-hover-bg);
    color: var(--color-link);
    text-decoration: none;
}

.sidebar a.active {
    background: var(--color-link-hover-bg);
    color: var(--color-link);
    font-weight: 600;
}

.sidebar a:hover::before,
.sidebar a.active::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 2px;
    bottom: 2px;
    width: 3px;
    border-radius: 2px;
    background: var(--color-link);
}

/* Main content area (right side) */
main {
    /* Flex-Item statt Margin-Offset: sitzt automatisch rechts von der Sidebar
       und nimmt den restlichen Platz ein (siehe .layout oben). min-width:0 ist
       noetig, damit breite Inhalte (Tabellen, <pre>-Bloecke) den Flex-Item nicht
       ueber den verfuegbaren Platz hinaus aufblaehen. */
    flex: 1 1 auto;
    min-width: 0;

    margin-top: 0;
    padding: 40px clamp(24px, 5vw, 96px) !important;
    background: var(--color-surface);
    border-radius: 6px;
    box-shadow: 0 0 10px var(--color-shadow);
    box-sizing: border-box;
}

/* ============================================================
   Kopf und Fuss: gemeinsam mit www.ddas.digital (css/kopf-fuss.css aus den
   Bausteinen, scripts/bausteine.py; Michael 2026-11-09). Hier nur noch das
   Sprungziel des Sprachumschalters.
   ============================================================ */

/* Target of the language switch: invisible, no own height */
.sec-anchor {
    display: block;
    height: 0;
}

/* ============================================================
   Typography
   ============================================================ */

/* Ueberschriften nur im Inhalt (.layout): der Titel des Manuals steht seit 2026-11-09 im Titelband .dk-band unter
   dem Kopf (css/kopf-fuss.css, gleiche Groesse wie auf www.ddas.digital; Michael 2026-11-09). */
:where(.layout) :is(h1, h2, h3, h4) {
    font-weight: 600;
    margin-top: 1.2em !important;
    margin-bottom: 0.5em !important;
}

:where(.layout) h1 {
    font-size: 2rem !important;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0.3em !important;
}

:where(.layout) h2 {
    font-size: 1.6rem !important;
}

:where(.layout) h3 {
    font-size: 1.3rem !important;
}

:where(.layout) p {
    margin: 1em 0 !important;
}

/* ============================================================
   Links
   ============================================================ */

:where(.layout) a {
    color: var(--color-link) !important;
    text-decoration: none;
}

:where(.layout) a:hover {
    text-decoration: underline;
}

/* ============================================================
   Images
   ============================================================ */

/* Bilder aus den DOCX werden um diesen Faktor groesser dargestellt als im
   Word-Dokument (postprocess_html.py setzt width:calc(<Breite> * var(--img-scale)).
   max-width:100% begrenzt auf die Spaltenbreite. */
:root {
    --img-scale: 1.34;
}

:where(.layout) img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px 0;
}

/* ============================================================
   Tables
   ============================================================ */

table {
    /* display:block (fuer overflow-x) macht die Tabelle zu einem Kasten in voller Breite;
       mit width:100% lag der Rahmen dieses Kastens bei schmalen Tabellen als zweiter,
       breiterer Rahmen um die Zeilen. fit-content laesst den Kasten auf die Tabelle
       schrumpfen, max-width haelt breite Tabellen in der Spalte (dann mit Scrollbalken). */
    width: fit-content !important;
    max-width: 100%;
    border-collapse: collapse;
    margin: 20px 0 !important;
    display: block;
    overflow-x: auto;
    /* Keine automatische Silbentrennung in Tabellen: Pandoc setzt body { hyphens: auto }, auf deutschen Seiten
       trennte der Browser damit kurze Spaltenkoepfe („Ka-pi-tel“). So wird die Spalte so breit wie ihr
       laengstes Wort. */
    hyphens: manual;
}

table, th, td {
    border: 1px solid var(--color-border-strong) !important;
}

th, td {
    padding: 8px 12px !important;
    text-align: left !important;
}

/* ============================================================
   Code Blocks
   ============================================================ */

pre {
    background: var(--color-code-bg) !important;
    padding: 12px !important;
    border-radius: 4px !important;
    overflow-x: auto !important;
}

code {
    font-family: Consolas, monospace !important;
}

/* ============================================================
   Lists
   ============================================================ */

:where(.layout) :is(ul, ol) {
    margin: 1em 0 1em 1.5em !important;
}

/* ============================================================
   Blockquotes
   ============================================================ */

blockquote {
    margin: 1em 0 !important;
    padding-left: 1em !important;
    border-left: 3px solid var(--color-border) !important;
    color: var(--color-text-muted) !important;
}

/* ============================================================
   Mobile off-canvas drawer (elements created by js/sidebar.js;
   inert and hidden above the 900px breakpoint)
   ============================================================ */

.sidebar-drawer-toggle {
    display: none;
}

.sidebar-backdrop {
    display: none;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1200px) {
    /* slightly tighter layout on medium screens */
    :root {
        --sidebar-width-base: 220px;
        --sidebar-width-max: 320px;
    }
}

@media (max-width: 1000px) {
    :root {
        --sidebar-width-base: 180px;
        --sidebar-width-max: 260px;
    }
}

@media (max-width: 900px) {
    /* Mobile layout: sidebar becomes an off-canvas drawer */
    :root {
        --sidebar-width-base: 280px;
        --sidebar-width-max: 340px;
    }

    .sidebar {
        /* Als Off-Canvas-Drawer wieder echtes "fixed" statt "sticky" - soll ueber der
           ganzen Seite als Overlay liegen, nicht an .layout gebunden sein. */
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        padding: 30px 20px 80px;
        border-right: none;
        box-shadow: 4px 0 16px var(--color-shadow);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 1200;
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    .sidebar-drawer-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        /* Unten links statt oben: oben sitzt seit 2026-11-09 der gemeinsame Kopf mit dem Logo */
        position: fixed;
        bottom: 16px;
        left: 16px;
        width: 48px;
        height: 48px;
        border: none;
        border-radius: 6px;
        background: var(--color-header-bg);
        box-shadow: 0 2px 6px var(--color-shadow);
        cursor: pointer;
        z-index: 1300;
    }

    .sidebar-drawer-toggle span {
        display: block;
        width: 20px;
        height: 2px;
        background: var(--color-header-text);
        border-radius: 1px;
    }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
        z-index: 1100;
    }

    body.sidebar-open .sidebar-backdrop {
        opacity: 1;
        visibility: visible;
    }

    .layout {
        display: block;
    }

    main {
        margin-left: 0;
        max-width: 100%;
        width: 100% !important;
        padding: 20px !important;
    }

}