.pruefung {
            background-color: #000000;
            font-size: 25px!important;
        }
        :root{
            --bg: #0c1a2b;
            --bg-panel: #12233a;
            --grid-line: rgba(139, 176, 214, 0.08);
            --trace: #2c4260;
            --trace-active: #4fd1c5;
            --text: #e9f1fb;
            --text-muted: #7f9ab8;
            --amber: #ffb454;
            --cyan: #4fd1c5;
            --radius: 10px;
        }

        *{ box-sizing: border-box; }
        .recht {
            background-color: transparent;

        }
        html, body{
            margin:0;
            padding:0;
            background: var(--bg);
            color: var(--text);
            font-family: 'JetBrains Mono', monospace;
            min-height: 100vh;
        }

        body{
            background-image:
                    linear-gradient(var(--grid-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
            background-size: 32px 32px;

            justify-content:center;
            padding: 48px 20px 80px;
        }

        .page{
            width:100%;
            max-width: 760px;
        }

        .back{
            display:inline-flex;
            align-items:center;
            gap:6px;
            color: var(--text-muted);
            text-decoration:none;
            font-size: 12px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 28px;
            transition: color 0.18s ease;
        }
        .back:hover, .back:focus-visible{ color: var(--cyan); }

        .status{
            display:flex;
            align-items:center;
            gap:8px;
            font-size: 12px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--amber);
            margin-bottom: 18px;
        }

        .status .dot{
            width:7px;
            height:7px;
            border-radius:50%;
            background: var(--amber);
            box-shadow: 0 0 0 0 rgba(255,180,84,0.5);
            animation: pulse 2.4s infinite;
        }

        @keyframes pulse{
            0%{ box-shadow: 0 0 0 0 rgba(255,180,84,0.45); }
            70%{ box-shadow: 0 0 0 8px rgba(255,180,84,0); }
            100%{ box-shadow: 0 0 0 0 rgba(255,180,84,0); }
        }

        h1{
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: clamp(26px, 5.5vw, 38px);
            line-height: 1.15;
            margin: 0 0 10px 0;
            letter-spacing: -0.01em;
        }

        h1 span{ color: var(--cyan); }

        .subtitle{
            color: var(--text-muted);
            font-size: 14px;
            max-width: 50ch;
            line-height: 1.6;
            margin: 0 0 44px 0;
        }

        /* ===== Schematic list ===== */
        .schema{
            position: relative;
        }

        .bus{
            position:absolute;
            left: 19px;
            top: 6px;
            bottom: 6px;
            width: 2px;
            background: repeating-linear-gradient(
                    to bottom,
                    var(--trace) 0px,
                    var(--trace) 6px,
                    transparent 6px,
                    transparent 11px
            );
        }

        .group-label{
            display:flex;
            align-items:center;
            gap: 10px;
            margin: 0 0 16px 40px;
            font-size: 12px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        .group-label::after{
            content:"";
            flex:1;
            height:1px;
            background: var(--grid-line);
        }

        .nodes{
            list-style:none;
            margin:0;
            padding:0;
            display:flex;
            flex-direction:column;
            gap: 12px;
            counter-reset: q;
        }

        .nodes.vertiefend{ margin-top: 40px; counter-reset: v; }

        .node{
            position:relative;
            padding-left: 40px;
            counter-increment: q;
        }

        .nodes.vertiefend .node{ counter-increment: v; }

        .node::before{
            content:"";
            position:absolute;
            left: 20px;
            top: 50%;
            width: 20px;
            height: 2px;
            background: var(--trace);
        }

        .node::after{
            content:"";
            position:absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--bg);
            border: 2px solid var(--trace);
        }

        .card{
            display:flex;
            align-items:center;
            gap: 16px;
            background: var(--bg-panel);
            border: 1px solid var(--grid-line);
            border-radius: var(--radius);
            padding: 16px 20px;
            text-decoration:none;
            color: var(--text);
            transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
        }

        .card:hover, .card:focus-visible{
            border-color: var(--trace-active);
            background: #16304a;
            transform: translateX(4px);
        }

        .card:focus-visible{
            outline: 2px solid var(--cyan);
            outline-offset: 3px;
        }

        .id{
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            font-size: 13px;
            color: var(--amber);
            letter-spacing: 0.04em;
            min-width: 26px;
        }

        .id::before{
            content: counter(q, decimal-leading-zero);
        }

        .nodes.vertiefend .id::before{
            content: "V" counter(v);
        }

        .label{
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 500;
            font-size: 16px;
            line-height: 1.4;
            flex:1;
        }

        .go{
            color: var(--text-muted);
            font-size: 16px;
            transition: transform 0.18s ease, color 0.18s ease;
            flex-shrink: 0;
        }

        .card:hover .go, .card:focus-visible .go{
            transform: translateX(3px);
            color: var(--cyan);
        }

        footer{
            margin-top: 56px;
            padding-top: 20px;
            border-top: 1px solid var(--grid-line);
            color: var(--text-muted);
            font-size: 11px;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            text-align:center;
        }
        h2 {

            color: var(--cyan);
        }

        i {
            color: var(--amber);
        }
        .container {
            display: block;
            margin: 0 auto;
        }
        .pruefung + .recht > b {
            color: var(--amber);
        }
        th, td{
            border: 3px solid #3e3e3e !important
        }
        th {
            background-color: transparent!important;
        }
        @media (max-width: 480px){
            .label{ font-size: 15px; }
            .bus{ left: 15px; }
            .node::after{ left: 12px; width:8px; height:8px; }
            .node::before{ left: 16px; width:16px; }
            .node{ padding-left: 34px; }
            .card{ padding: 14px 16px; }
            .group-label{ margin-left: 34px; }
        }

        @media (prefers-reduced-motion: reduce){
            .status .dot{ animation: none; }
            .card{ transition: none; }
        }


    h2, b, h1 {

            color: var(--cyan)!important;
        }




        h2  {

            font-size: 28px;
        }
        /*svg > text {*/
        /*    fill: rgb(215 215 215) !important;*/
        /*}*/
        .container {



background: transparent!important;

        }

        body{
            font-size: 22px;
        }
        .container, .merk, .info, .important,.merksatz, .example, pre {

            background: transparent!important;


            border: 5px solid #373737;
        }
        img {
            width: 100%;
        }

        .merksatz,.safe {
            background-color: #000000;
    color: var(--text)!important;
        }

        ul,li {

            color: var(--text)!important;
        }
 svg > text {
            fill: black !important;
        }

        .danger,.sym,.attack, .legal, .container2,  .rule, .generation,  .diff, .inc,       .archive, .backup, .yellow, .rto, .rpo,         .flow,.asym,.offline,.interactive,.algo,.phase, .success,.funktional,.static,.klassisch, .agil, .dynamic,.blackbox, .whitebox,.nichtfunktional, .syntax,.semantik,  .komponente,.funktion,.integration, .blue,.green,.warning, .cycle, .sicherung, code,  .container,.note,.diagram,table,.exam,.update,.upgrade,.extra,  .box,.beispiel, .definition,.vorteil,.nachteil,.flow,.schritt,.tool,.wichtig,.zugang,.zugriff {



            background: transparent!important;

        }

        svg > line {
            stroke: rgba(214, 195, 195, 0.82)!important;
        }