:root {
            --primary: var(--site-primary);
            --secondary: var(--site-text);
            --accent: var(--site-accent);
            --bg-color: var(--site-bg);
            --card-bg: var(--site-surface);
            --text-color: var(--site-text);
            --muted-text: var(--site-muted);
            --soft-bg: color-mix(in srgb, var(--site-surface) 82%, var(--site-bg));
            --panel-bg: color-mix(in srgb, var(--site-surface) 92%, var(--site-bg));
            --border-color: var(--site-border);
            --input-bg: var(--site-input);
            --notice-bg: var(--site-notice-bg);
            --notice-text: var(--site-notice-text);
            --shadow-color: var(--site-shadow);
        }
        body {
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.5;
        }
        .tool-page {
            max-width: 1100px;
            margin: 40px auto;
            padding: 20px;
        }
        h1 { 
            color: var(--primary); 
            text-align: center; 
            margin-bottom: 5px; 
            font-size: 2.2em;
        }
        p.subtitle { 
            text-align: center; 
            color: var(--muted-text); 
            margin-bottom: 40px; 
            font-size: 1.1em;
        }
        .scope-note {
            margin: -20px auto 35px;
            max-width: 850px;
            padding: 14px 18px;
            border-left: 4px solid var(--accent);
            border-radius: 6px;
            background: var(--notice-bg);
            color: var(--notice-text);
            font-size: 0.95em;
        }
        .container { 
            background: var(--card-bg); 
            padding: 40px; 
            border-radius: 12px; 
            box-shadow: 0 8px 20px var(--shadow-color); 
        }
        .kategorie-titel {
            font-size: 1.2em; 
            color: var(--secondary); 
            margin-top: 30px; 
            margin-bottom: 15px;
            border-bottom: 2px solid var(--border-color); 
            padding-bottom: 8px; 
            font-weight: 600;
        }
        .checkbox-group {
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 12px; 
            margin-bottom: 25px;
        }
        label {
            display: flex; 
            align-items: flex-start; 
            gap: 12px; 
            background: var(--soft-bg);
            padding: 12px 15px; 
            border-radius: 8px; 
            cursor: pointer;
            transition: all 0.2s ease-in-out; 
            font-size: 0.95em; 
            border: 1px solid var(--border-color);
        }
        label:hover { 
            background: color-mix(in srgb, var(--primary) 14%, var(--card-bg));
            border-color: var(--primary);
            box-shadow: 0 2px 5px rgba(0,0,0,0.04);
        }
        label:has(input[type="checkbox"]:checked) {
            background: color-mix(in srgb, var(--accent) 16%, var(--card-bg));
            border-color: var(--accent);
        }
        .checkbox-group label.module-pending {
            position: relative;
            flex-wrap: wrap;
            color: var(--muted-text);
            cursor: not-allowed;
            background: color-mix(in srgb, var(--soft-bg) 82%, var(--border-color));
            border-style: dashed;
            opacity: 0.82;
        }
        .checkbox-group label.module-pending:hover {
            border-color: var(--border-color);
            box-shadow: none;
        }
        .checkbox-group label.module-pending input[type="checkbox"] {
            cursor: not-allowed;
        }
        .module-label-text {
            flex: 1 1 190px;
        }
        .module-status {
            flex: 0 0 auto;
            margin-left: 30px;
            padding: 3px 8px;
            border-radius: 999px;
            background: color-mix(in srgb, #f39c12 18%, var(--card-bg));
            border: 1px solid color-mix(in srgb, #f39c12 48%, var(--border-color));
            color: var(--text-color);
            font-size: 0.76em;
            font-weight: 700;
            line-height: 1.25;
        }
        input[type="checkbox"] { 
            transform: scale(1.2); 
            margin-top: 3px; 
            accent-color: var(--primary);
        }
        .profile-panel {
            margin: 0 0 35px;
            padding: 24px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: var(--panel-bg);
        }
        .identity-panel {
            margin: 0 0 22px;
            padding: 22px 24px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: var(--card-bg);
        }
        .appearance-panel {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 10px;
            margin: -18px 0 22px;
        }
        .appearance-panel label {
            padding: 0;
            border: 0;
            background: transparent;
            cursor: default;
            font-weight: 600;
        }
        .appearance-panel select {
            min-width: 175px;
            padding: 8px 10px;
            border: 1px solid var(--border-color);
            border-radius: 7px;
            background: var(--input-bg);
            color: var(--text-color);
            font: inherit;
        }
        .identity-panel h2 {
            margin: 0 0 6px;
            color: var(--secondary);
            font-size: 1.35em;
        }
        .logo-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 150px;
            gap: 20px;
            align-items: end;
        }
        .logo-upload {
            display: flex;
            flex-direction: column;
            gap: 7px;
        }
        .logo-upload label {
            padding: 0;
            border: 0;
            background: transparent;
            cursor: default;
            font-weight: 600;
        }
        .logo-upload input[type="file"] {
            width: 100%;
            font: inherit;
        }
        .logo-preview {
            min-height: 90px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px;
            border: 1px dashed #bdc9d0;
            border-radius: 8px;
            background: #fff;
        }
        .logo-preview img {
            display: none;
            max-width: 125px;
            max-height: 75px;
            object-fit: contain;
        }
        .logo-preview span { color: var(--muted-text); font-size: 0.85em; text-align: center; }
        .file-message { min-height: 1.3em; margin: 0; color: var(--muted-text); font-size: 0.84em; }
        .small-button {
            flex: none;
            width: auto;
            padding: 8px 12px;
            font-size: 0.85em;
            background: #7f8c8d;
            display: none;
        }
        .export-head {
            display: flex;
            justify-content: space-between;
            gap: 24px;
            align-items: center;
            padding: 20px 24px;
            margin-bottom: 24px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background: var(--soft-bg);
        }
        .export-head h2 { margin: 0 0 5px !important; border: 0 !important; padding: 0 !important; }
        .export-head p { margin: 3px 0; color: var(--muted-text); }
        .export-logo { max-width: 170px; max-height: 90px; object-fit: contain; }
        .profile-panel h2 {
            margin: 0 0 6px;
            color: var(--secondary);
            font-size: 1.35em;
        }
        .profile-help {
            margin: 0 0 20px;
            color: var(--muted-text);
            font-size: 0.92em;
        }
        .profile-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 16px;
            margin-bottom: 20px;
        }
        .profile-field label {
            display: block;
            padding: 0;
            margin-bottom: 6px;
            border: 0;
            background: transparent;
            cursor: default;
            font-weight: 600;
        }
        .profile-field input[type="number"],
        .profile-field input[type="text"],
        .profile-field select {
            width: 100%;
            box-sizing: border-box;
            padding: 11px 12px;
            border: 1px solid var(--border-color);
            border-radius: 7px;
            font: inherit;
            background: var(--input-bg);
            color: var(--text-color);
        }
        .conditional-field { display: none; }
        .profile-options {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 10px;
        }
        .detail-panel {
            display: none;
            margin: -10px 0 25px;
            padding: 16px 18px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background: var(--panel-bg);
        }
        .detail-panel h3 { margin: 0 0 5px; color: var(--secondary); font-size: 1em; }
        .detail-panel p { margin: 0 0 12px; color: var(--muted-text); font-size: 0.9em; }
        .detail-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
        .result-card.hinweis { border-left-color: var(--accent); }
        .result-card.hinweis h3 { color: #14866f; }
        .result-card.achtung { border-left-color: #e67e22; }
        .result-card.achtung h3 { color: #b95f0b; }
        .source-link { margin-top: 12px; font-size: 0.9em; }
        .source-link a { color: var(--primary); }
        .review-note {
            margin: 25px 0 0;
            padding: 12px 15px;
            border-radius: 7px;
            background: color-mix(in srgb, #f39c12 14%, var(--card-bg));
            border: 1px solid color-mix(in srgb, #f39c12 55%, var(--border-color));
            color: var(--text-color);
            font-size: 0.9em;
        }
        .btn-group {
            display: flex;
            gap: 15px;
            margin-top: 40px;
        }
        button {
            flex: 1;
            background-color: var(--accent); 
            color: white; 
            border: none; 
            padding: 16px 20px;
            font-size: 1.1em; 
            border-radius: 8px; 
            cursor: pointer; 
            font-weight: bold; 
            transition: background 0.3s, transform 0.1s;
        }
        button:hover { 
            background-color: #16a085; 
            transform: translateY(-2px);
        }
        button.btn-secondary {
            background-color: #95a5a6;
            display: none;
        }
        button.btn-secondary:hover {
            background-color: #7f8c8d;
        }
        button:focus-visible,
        input:focus-visible,
        select:focus-visible,
        a:focus-visible {
            outline: 3px solid var(--primary);
            outline-offset: 3px;
        }
        #ergebnis {
            margin-top: 40px; 
            display: none;
        }
        #ergebnis h2 {
            color: var(--secondary);
            border-bottom: 3px solid var(--primary);
            padding-bottom: 10px;
            margin-bottom: 25px;
        }
        .module-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }
        /* Card Design für die Ergebnisse */
        .result-card {
            background: var(--card-bg);
            border-radius: 8px;
            box-shadow: 0 4px 10px var(--shadow-color);
            border: 1px solid var(--border-color);
            border-left: 5px solid var(--primary);
            padding: 20px 25px;
            page-break-inside: avoid;
        }
        .result-card h3 {
            margin-top: 0;
            margin-bottom: 15px;
            font-size: 1.2em;
            color: var(--primary);
        }
        .card-status {
            display: inline-block;
            margin-bottom: 10px;
            padding: 4px 9px;
            border-radius: 999px;
            background: #eaf4fb;
            color: #1f6594;
            font-size: 0.78em;
            font-weight: 700;
        }
        .card-section { margin-top: 16px; }
        .card-section h4 {
            margin: 0 0 7px;
            color: var(--secondary);
            font-size: 0.98em;
        }
        .card-section p { margin: 0; }
        .card-section ul { margin: 0; padding-left: 20px; }
        .card-section li { margin-bottom: 6px; }
        .reference-block {
            margin-top: 38px;
            padding-top: 20px;
            border-top: 3px solid var(--primary);
        }
        .reference-block h2 { margin-bottom: 8px !important; }
        .reference-intro { color: var(--muted-text); margin: 0 0 18px; }
        .reference-card {
            padding: 14px 16px;
            margin-bottom: 10px;
            border: 1px solid var(--border-color);
            border-radius: 7px;
            background: var(--panel-bg);
            break-inside: avoid;
        }
        .reference-card h3 { margin: 0 0 5px; font-size: 1em; color: var(--secondary); }
        .reference-card p { margin: 3px 0; font-size: 0.9em; }
        .reference-type { color: var(--muted-text); font-weight: 600; }
        .reference-card a { color: var(--primary); overflow-wrap: anywhere; }
        .glossary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 10px;
        }
        .glossary-entry {
            padding: 13px 15px;
            border-radius: 7px;
            background: var(--soft-bg);
            border: 1px solid var(--border-color);
            break-inside: avoid;
        }
        .glossary-entry dt { font-weight: 700; color: var(--secondary); }
        .glossary-entry dd { margin: 5px 0 0; font-size: 0.9em; }
        .unterpunkte { 
            margin: 0; 
            padding-left: 20px;
            list-style-type: none;
        }
        .unterpunkte li { 
            margin-bottom: 10px; 
            position: relative;
            color: var(--text-color);
        }
        .unterpunkte li::before {
            content: "•";
            color: var(--accent);
            font-weight: bold;
            display: inline-block; 
            width: 1em;
            margin-left: -1em;
        }

        /* Druck-Layout */
        @media print {
            .site-header, .site-footer, .skip-link { display: none !important; }
            .tool-page { max-width: none; margin: 0; padding: 0; }
            html, html[data-theme="light"], html[data-theme="dark"] {
                --primary: #2980b9;
                --secondary: #34495e;
                --accent: #1abc9c;
                --bg-color: #ffffff;
                --card-bg: #ffffff;
                --text-color: #222222;
                --muted-text: #555555;
                --soft-bg: #ffffff;
                --panel-bg: #ffffff;
                --border-color: #cccccc;
                --input-bg: #ffffff;
                --shadow-color: transparent;
                color-scheme: light;
            }
            body { background: white; margin: 0; padding: 0; }
            .container { box-shadow: none; padding: 0; }
            .checkbox-group, .detail-panel, .kategorie-titel, .identity-panel, .profile-panel, .appearance-panel, .scope-note, .review-note, button, p.subtitle { display: none !important; }
            #ergebnis { display: block !important; margin-top: 0; }
            .result-card { border: 1px solid #ccc; border-left: 4px solid #555; box-shadow: none; margin-bottom: 15px; }
            .export-head { break-after: avoid; background: white; }
            .reference-block { break-before: page; }
            .reference-card a { color: #000; text-decoration: none; }
        }
        @media (max-width: 680px) {
            .tool-page { margin: 0 auto; padding: 12px; }
            .container { padding: 20px 16px; border-radius: 8px; }
            h1 { font-size: 1.65em; }
            .appearance-panel { justify-content: stretch; margin-top: -15px; }
            .appearance-panel label { flex: 0 0 auto; }
            .appearance-panel select { flex: 1; min-width: 0; }
            .logo-row { grid-template-columns: 1fr; }
            .logo-preview { min-height: 75px; }
            .export-head { align-items: flex-start; flex-direction: column-reverse; }
        }