:root {
        --navy:    #003366;
        --navy2:   #002244;
        --blue:    #0a5;
        --accent:  #2b8fd8;
        --ink:     #0d1b2a;
        --paper:   #f4f6f9;
        --line:    #d4dde6;
        --code-bg: #0d1b2a;
        --code-fg: #cfe3f5;
        --star:    #2b8fd8;
        --muted:   #5a6b7d;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
        font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
        background: var(--paper);
        color: var(--ink);
        line-height: 1.6;
        font-size: 15px;
    }
    .wrap { max-width: 860px; margin: 0 auto; padding: 0 24px; }

    /* Header */
    header {
        background: var(--navy);
        color: #fff;
        padding: 48px 0 40px;
        border-bottom: 3px solid var(--accent);
    }
    header .wrap { position: relative; }
    .brand {
        font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
        color: var(--accent); margin-bottom: 14px;
    }
    h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.2; }
    .sub { margin-top: 14px; color: #b8cce0; font-size: 15px; max-width: 620px; }
    .coord {
        position: absolute; top: 0; right: 24px;
        font-size: 11px; color: #3a5a7a; letter-spacing: 1px;
    }

    /* Sections */
    section { padding: 40px 0; border-bottom: 1px solid var(--line); }
    h2 {
        font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
        color: var(--navy); margin-bottom: 8px;
    }
    h2 .num { color: var(--accent); margin-right: 10px; }
    .lead { color: var(--muted); margin-bottom: 24px; max-width: 640px; }

    p { margin-bottom: 14px; }
    a { color: var(--accent); }

    /* Header-Tabelle */
    .htable {
        width: 100%; border-collapse: collapse; margin: 20px 0;
        font-size: 14px; background: #fff;
        border: 1px solid var(--line);
    }
    .htable th, .htable td {
        text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line);
        vertical-align: top;
    }
    .htable th {
        background: var(--navy); color: #fff; font-weight: 600;
        font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
    }
    .htable tr:last-child td { border-bottom: none; }
    .htable code {
        background: var(--paper); padding: 2px 6px; border-radius: 3px;
        color: var(--navy); font-weight: 600; white-space: nowrap;
    }
    .stars { color: var(--star); letter-spacing: 2px; font-weight: 700; }

    /* Code-Blöcke */
    .code {
        background: var(--code-bg); color: var(--code-fg);
        padding: 18px 20px; border-radius: 6px; margin: 16px 0;
        font-size: 13px; line-height: 1.7; overflow-x: auto;
        border-left: 3px solid var(--accent);
        position: relative;
    }
    .code .c { color: #6a8caa; }            /* Kommentar */
    .code .k { color: #5fb3e8; }            /* Keyword */
    .code .s { color: #8fd6a0; }            /* String */
    .code .label {
        position: absolute; top: 8px; right: 12px;
        font-size: 10px; letter-spacing: 1px; color: #4a6a8a;
        text-transform: uppercase;
    }

    .card {
        background: #fff; border: 1px solid var(--line);
        border-radius: 6px; padding: 20px; margin: 16px 0;
    }
    .card h3 {
        font-size: 15px; color: var(--navy); margin-bottom: 6px;
        display: flex; align-items: center; gap: 10px;
    }
    .card h3 .tag {
        font-size: 10px; background: var(--accent); color: #fff;
        padding: 2px 8px; border-radius: 10px; letter-spacing: 1px;
        text-transform: uppercase; font-weight: 600;
    }
    .card p { color: var(--muted); font-size: 14px; margin-bottom: 12px; }

    .note {
        background: #eaf3fb; border-left: 3px solid var(--accent);
        padding: 14px 18px; margin: 18px 0; font-size: 14px; color: var(--navy2);
        border-radius: 0 4px 4px 0;
    }
    .note strong { color: var(--navy); }

    .scale {
        display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0;
    }
    .scale-item {
        background: #fff; border: 1px solid var(--line); border-radius: 4px;
        padding: 8px 12px; font-size: 13px;
    }
    .scale-item .stars { display: block; margin-bottom: 2px; }
    .scale-item .lbl { color: var(--muted); font-size: 11px; }

    footer {
        padding: 32px 0 48px; color: var(--muted); font-size: 12px;
        text-align: center;
    }
    footer .sl { color: var(--navy); letter-spacing: 1px; margin-bottom: 6px; }

    @media (max-width: 600px) {
        h1 { font-size: 24px; }
        .coord { display: none; }
        .htable { font-size: 12px; }
        .htable th, .htable td { padding: 9px 8px; }
    }