:root {
            --primary: #457B9D;
            --primary-light: #A8D5E2;
            --bg-dark: #0f0f1a;
            --bg-card: #1a1a2e;
            --bg-hover: #252542;
            --text-primary: #f0f0f0;
            --text-secondary: #a0a0b0;
            --text-muted: #9a9aaa;
            --border: rgba(255,255,255,0.1);
            --success: #2ecc71;
            --warning: #f39c12;
            --danger: #e74c3c;

            /* Responsive Typography with clamp() - Desktop optimiert */
            --font-xs: clamp(0.75rem, 1.2vw + 0.5rem, 1.05rem);
            --font-sm: clamp(0.85rem, 1.3vw + 0.5rem, 1.15rem);
            --font-base: clamp(0.95rem, 1.6vw + 0.55rem, 1.35rem);
            --font-md: clamp(1.05rem, 1.9vw + 0.55rem, 1.5rem);
            --font-lg: clamp(1.25rem, 2.6vw + 0.55rem, 1.9rem);
            --font-xl: clamp(1.55rem, 3.1vw + 0.55rem, 2.6rem);
            --font-label: clamp(0.8rem, 1.1vw + 0.45rem, 1.1rem);

            /* Responsive Bar Height */
            --bar-height: clamp(16px, 1.5vw + 12px, 22px);
            --bar-radius: calc(var(--bar-height) / 2);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--bg-dark);
            color: var(--text-primary);
            min-height: 100vh;
            line-height: 1.5;
            overflow-x: hidden;
        }

        /* Pirsig Collapsible Blocks */
        .pirsig-collapsible.collapsed .pirsig-content {
            max-height: 0 !important;
            opacity: 0 !important;
            margin-top: 0 !important;
        }
        .pirsig-collapsible.collapsed .pirsig-chevron {
            transform: rotate(-90deg);
        }
        .pirsig-header:hover {
            opacity: 0.8;
        }

        /* Theme Colors */
        body.theme-single { --primary: #E63946; --primary-light: #FFB4A2; }
        body.theme-duo { --primary: #E84393; --primary-light: #FDA7DF; }
        body.theme-duo_flex { --primary: #FF6B6B; --primary-light: #FFA5A5; }
        body.theme-solopoly { --primary: #2A9D8F; --primary-light: #A8DADC; }
        body.theme-polyamor { --primary: #F4A261; --primary-light: #FFE5B4; }
        body.theme-ra { --primary: #9B5DE5; --primary-light: #D4A5FF; }
        body.theme-lat { --primary: #06D6A0; --primary-light: #B5EAD7; }
        body.theme-aromantisch { --primary: #118AB2; --primary-light: #83C5D8; }

        /* Header */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 200;
            text-align: center;
            padding: 12px 15px;
            background: rgba(15,15,26,0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .header-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }

        .header-buttons {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-top: 8px;
        }

        /* Visitor Info Bar */
        .visitor-info-bar {
            position: fixed;
            top: 85px;
            left: 0;
            right: 0;
            z-index: 199;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            padding: 6px 15px;
            background: rgba(20, 20, 30, 0.9);
            border-bottom: 1px solid var(--border);
            font-size: 12px;
        }

        .visitor-id-badge {
            color: var(--primary);
            font-weight: 500;
        }

        .visitor-id-badge span {
            font-weight: 700;
        }

        .privacy-notice {
            color: var(--text-muted);
            font-size: 11px;
        }

        @media (max-width: 768px) {
            .visitor-info-bar {
                top: 75px;
                font-size: 11px;
                gap: 12px;
                padding: 5px 10px;
            }
            .privacy-notice {
                font-size: 10px;
            }
        }

        /* Pathos/Logos toggle buttons in modal header */
        .header-pathos-btn,
        .header-logos-btn {
            padding: 8px 12px;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: rgba(30,30,35,0.95);
            color: var(--text-muted);
            cursor: pointer;
            font-size: 16px;
            transition: all 0.2s;
            backdrop-filter: blur(10px);
        }

        .header-pathos-btn:hover,
        .header-logos-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            border-color: var(--primary);
        }

        .header-pathos-btn.active,
        .header-logos-btn.active {
            color: var(--text-primary);
            border-color: var(--primary);
            box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
        }

        h1 {
            font-size: var(--font-base);
            font-weight: 400;
            letter-spacing: 2px;
            color: var(--text-secondary);
        }

        /* Language Button */
        .lang-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            border-radius: 15px;
            border: 2px solid var(--primary);
            background: transparent;
            color: var(--primary);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .lang-btn:hover {
            background: var(--primary);
            color: white;
        }

        .lang-icon {
            font-size: 14px;
        }

        .lang-code {
            font-weight: 700;
            text-transform: uppercase;
        }

        /* Help Button */
        .help-btn {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: 2px solid var(--danger);
            background: transparent;
            color: var(--danger);
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
        }

        .help-btn:hover {
            background: var(--danger);
            color: white;
        }

        /* Header Fold Button */
        .header-fold-btn {
            padding: 4px 12px;
            font-size: 12px;
            height: 28px;
        }

        /* Quick Guide Styles */
        .quick-guide {
            background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(76, 175, 80, 0.05));
            border: 1px solid var(--success);
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .quick-guide h3 {
            color: var(--success);
            margin: 0 0 10px 0;
            font-size: var(--font-md);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .quick-guide ul {
            margin: 0;
            padding-left: 20px;
        }

        .quick-guide li {
            margin-bottom: 6px;
            color: var(--text-secondary);
            font-size: var(--font-sm);
        }

        /* Comment Button Section */
        .comment-section {
            background: linear-gradient(135deg, rgba(74, 144, 226, 0.1), rgba(74, 144, 226, 0.05));
            border: 1px solid var(--primary);
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 20px;
            text-align: center;
        }

        .comment-section p {
            color: var(--text-secondary);
            font-size: var(--font-sm);
            margin: 0 0 12px 0;
        }

        .comment-btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: var(--font-sm);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .comment-btn:hover {
            background: #3a7bc8;
            transform: translateY(-1px);
        }

        /* View Comments Button (Yellow) */
        .view-comments-btn {
            background: linear-gradient(135deg, #f1c40f, #f39c12);
            color: #1a1a2e;
            border: none;
            padding: 12px 20px;
            border-radius: 25px;
            font-size: var(--font-sm);
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .view-comments-btn:hover {
            background: linear-gradient(135deg, #f39c12, #e67e22);
            transform: translateY(-1px);
            box-shadow: 0 4px 15px rgba(241, 196, 15, 0.4);
        }

        /* Comments List Modal */
        .comments-list-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.9);
            z-index: 2200;
            display: none;
            align-items: flex-start;
            justify-content: center;
            padding: 20px;
            overflow-y: auto;
        }

        .comments-list-overlay.active {
            display: flex;
        }

        .comments-list-modal {
            background: var(--bg-card);
            border-radius: 16px;
            max-width: 800px;
            width: 100%;
            margin: 40px auto;
            border: 1px solid var(--border);
        }

        .comments-list-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            border-bottom: 1px solid var(--border);
            background: linear-gradient(135deg, rgba(241, 196, 15, 0.1), rgba(243, 156, 18, 0.05));
        }

        .comments-list-header h2 {
            color: #f1c40f;
            margin: 0;
            font-size: var(--font-lg);
        }

        .comments-actions-bar {
            padding: 12px 20px;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border);
        }

        .new-comment-btn {
            width: 100%;
            padding: 12px 20px;
            background: linear-gradient(135deg, var(--primary), #3a7bc8);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: var(--font-sm);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .new-comment-btn:hover {
            background: linear-gradient(135deg, #3a7bc8, var(--primary));
            transform: translateY(-1px);
        }

        .comments-search-container {
            padding: 15px 20px;
            border-bottom: 1px solid var(--border);
            background: var(--bg-secondary);
        }

        .comments-search-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }

        .comments-search-input {
            width: 100%;
            padding: 10px 40px 10px 35px;
            background: var(--bg-dark);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            font-size: 14px;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .comments-search-input:focus {
            outline: none;
            border-color: #f1c40f;
            box-shadow: 0 0 0 3px rgba(241, 196, 15, 0.15);
        }

        .comments-search-input::placeholder {
            color: var(--text-muted);
        }

        .comments-search-icon {
            position: absolute;
            left: 12px;
            color: var(--text-muted);
            pointer-events: none;
        }

        .comments-search-clear {
            position: absolute;
            right: 8px;
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 5px;
            font-size: 16px;
            display: none;
        }

        .comments-search-clear:hover {
            color: var(--text-primary);
        }

        .comments-search-clear.visible {
            display: block;
        }

        .comments-search-hint {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 6px;
        }

        .comments-search-results {
            font-size: 12px;
            color: var(--text-secondary);
            padding: 8px 20px;
            background: var(--bg-tertiary);
            border-bottom: 1px solid var(--border);
        }

        .search-highlight {
            background: rgba(241, 196, 15, 0.3);
            padding: 0 2px;
            border-radius: 2px;
        }

        .comments-list-body {
            padding: 20px;
            max-height: 60vh;
            overflow-y: auto;
        }

        .comments-table {
            width: 100%;
            border-collapse: collapse;
        }

        .comment-card {
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--border);
            border-radius: 12px;
            margin-bottom: 15px;
            overflow: hidden;
        }

        .comment-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            background: rgba(255,255,255,0.05);
            border-bottom: 1px solid var(--border);
        }

        .comment-author {
            font-weight: 600;
            color: var(--primary);
        }

        .comment-visitor-id {
            font-size: 11px;
            color: var(--text-muted);
            margin-left: 6px;
        }

        .comment-date {
            font-size: 11px;
            color: var(--text-muted);
        }

        .comment-type-badge {
            font-size: 10px;
            padding: 3px 8px;
            border-radius: 10px;
            background: var(--primary);
            color: white;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .comment-type-badge.type-fehler {
            background: #dc3545;
        }

        .comment-type-badge.type-frage {
            background: #17a2b8;
        }

        .comment-type-badge.type-verbesserung {
            background: #28a745;
        }

        .comment-type-badge.type-doku {
            background: #6c757d;
        }

        .comment-type-badge.type-antwort {
            background: #6f42c1;
        }

        .comment-card-body {
            padding: 15px;
        }

        .comment-title {
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .comment-text {
            color: var(--text-secondary);
            line-height: 1.5;
            font-size: var(--font-sm);
        }

        .comment-context {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid var(--border);
        }

        .comment-card-footer {
            padding: 10px 15px;
            background: rgba(255,255,255,0.02);
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .reply-btn {
            background: transparent;
            border: 1px solid var(--primary);
            color: var(--primary);
            padding: 6px 12px;
            border-radius: 15px;
            font-size: 11px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .reply-btn:hover {
            background: var(--primary);
            color: white;
        }

        .replies-section {
            margin-left: 20px;
            padding-left: 15px;
            border-left: 2px solid var(--primary);
            margin-top: 10px;
        }

        .reply-card {
            background: rgba(69, 123, 157, 0.1);
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 10px;
        }

        .reply-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }

        .reply-author {
            font-weight: 600;
            color: var(--primary);
            font-size: 12px;
        }

        .reply-date {
            font-size: 10px;
            color: var(--text-muted);
        }

        .reply-text {
            color: var(--text-secondary);
            font-size: 12px;
            line-height: 1.4;
        }

        .reply-form {
            margin-top: 15px;
            padding: 15px;
            background: rgba(255,255,255,0.03);
            border-radius: 10px;
            display: none;
        }

        .reply-form.active {
            display: block;
        }

        .reply-form textarea {
            width: 100%;
            min-height: 80px;
            background: var(--bg-dark);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 10px;
            color: var(--text-primary);
            font-size: 13px;
            resize: vertical;
            margin-bottom: 10px;
        }

        .reply-form-buttons {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }

        .reply-cancel-btn {
            background: transparent;
            border: 1px solid var(--text-muted);
            color: var(--text-muted);
            padding: 8px 15px;
            border-radius: 8px;
            font-size: 12px;
            cursor: pointer;
        }

        .reply-submit-btn {
            background: var(--primary);
            border: none;
            color: white;
            padding: 8px 15px;
            border-radius: 8px;
            font-size: 12px;
            cursor: pointer;
        }

        .no-comments {
            text-align: center;
            padding: 40px;
            color: var(--text-muted);
        }

        .no-comments-icon {
            font-size: 48px;
            margin-bottom: 15px;
        }

        /* Documentation Section */
        .documentation-section {
            border-top: 2px solid var(--border);
            padding-top: 20px;
            margin-top: 10px;
        }

        .documentation-section > h3 {
            color: var(--text-muted);
            font-size: var(--font-sm);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 20px;
        }

        /* Comment Modal Styles */
        .comment-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.85);
            z-index: 2100;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .comment-modal-overlay.active {
            display: flex;
        }

        .comment-modal {
            background: var(--bg-card);
            border-radius: 16px;
            max-width: 500px;
            width: 100%;
            border: 1px solid var(--border);
        }

        .comment-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            border-bottom: 1px solid var(--border);
        }

        .comment-modal-header h3 {
            font-size: var(--font-md);
            color: var(--text-primary);
            margin: 0;
        }

        .comment-modal-close {
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 24px;
            cursor: pointer;
        }

        .comment-modal-body {
            padding: 20px;
        }

        .comment-form-group {
            margin-bottom: 15px;
        }

        .comment-form-group label {
            display: block;
            color: var(--text-secondary);
            font-size: var(--font-sm);
            margin-bottom: 6px;
        }

        .comment-form-group input,
        .comment-form-group textarea,
        .comment-form-group select {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--bg-dark);
            color: var(--text-primary);
            font-size: var(--font-sm);
            box-sizing: border-box;
        }

        .comment-form-group textarea {
            min-height: 100px;
            resize: vertical;
        }

        .comment-form-group .input-hint {
            display: block;
            color: var(--text-secondary, #888);
            font-size: 11px;
            margin-top: 4px;
        }

        .comment-form-group.visitor-info {
            text-align: center;
            padding: 8px 0;
            border-top: 1px solid var(--border, #333);
            margin-top: 8px;
        }

        .comment-form-group.visitor-info small {
            color: var(--text-secondary, #888);
        }

        #visitorIdDisplay {
            font-weight: 600;
            color: var(--primary, #4a90d9);
        }

        .comment-submit-btn {
            width: 100%;
            background: var(--primary);
            color: white;
            border: none;
            padding: 12px;
            border-radius: 8px;
            font-size: var(--font-sm);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .comment-submit-btn:hover {
            background: #3a7bc8;
        }

        .comment-submit-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        /* GFK Explanation Modal */
        .gfk-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            padding: 20px;
        }

        .gfk-modal-overlay.active {
            display: flex;
        }

        .gfk-modal {
            background: var(--bg-card);
            border-radius: 16px;
            max-width: 500px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            border: 1px solid var(--border);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }

        .gfk-modal-header {
            padding: 20px 24px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .gfk-modal-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .gfk-modal-close {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 8px;
            border-radius: 8px;
            transition: all 0.2s;
        }

        .gfk-modal-close:hover {
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-primary);
        }

        .gfk-modal-content {
            padding: 24px;
        }

        .gfk-level-indicator {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
        }

        .gfk-level-niedrig {
            background: rgba(239, 68, 68, 0.2);
            color: #ef4444;
            border: 1px solid rgba(239, 68, 68, 0.4);
        }

        .gfk-level-mittel {
            background: rgba(234, 179, 8, 0.2);
            color: #eab308;
            border: 1px solid rgba(234, 179, 8, 0.4);
        }

        .gfk-level-hoch {
            background: rgba(34, 197, 94, 0.2);
            color: #22c55e;
            border: 1px solid rgba(34, 197, 94, 0.4);
        }

        .gfk-explanation-text {
            color: var(--text-secondary);
            line-height: 1.7;
            margin-bottom: 16px;
        }

        .gfk-explanation-text p {
            margin-bottom: 12px;
        }

        .gfk-info-box {
            background: rgba(139, 92, 246, 0.1);
            border: 1px solid rgba(139, 92, 246, 0.3);
            border-radius: 12px;
            padding: 16px;
            margin-top: 16px;
        }

        .gfk-info-box-title {
            font-weight: 600;
            color: #a78bfa;
            margin-bottom: 8px;
            font-size: 0.9rem;
        }

        .gfk-info-box-text {
            color: var(--text-muted);
            font-size: 0.85rem;
            line-height: 1.6;
        }

        /* Help Modal */
        .help-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.85);
            z-index: 2000;
            display: none;
            align-items: flex-start;
            justify-content: center;
            padding: 20px;
            overflow-y: auto;
        }

        .help-modal-overlay.active {
            display: flex;
        }

        .help-modal {
            background: var(--bg-card);
            border-radius: 16px;
            max-width: 800px;
            width: 100%;
            margin: 40px auto;
            max-height: none;
            border: 1px solid var(--border);
        }

        .help-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 0;
            background: var(--bg-card);
            border-radius: 16px 16px 0 0;
        }

        .help-modal-header h2 {
            font-size: var(--font-lg);
            color: var(--text-primary);
            margin: 0;
        }

        .help-modal-close {
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 24px;
            cursor: pointer;
            padding: 5px;
        }

        .help-modal-close:hover {
            color: var(--text-primary);
        }

        .help-modal-content {
            padding: 20px;
        }

        .help-section {
            margin-bottom: 25px;
        }

        .help-section h3 {
            font-size: var(--font-md);
            color: var(--primary);
            margin-bottom: 10px;
            border-bottom: 1px solid var(--border);
            padding-bottom: 8px;
        }

        .help-section p, .help-section li {
            font-size: var(--font-sm);
            color: var(--text-secondary);
            line-height: 1.6;
        }

        .help-section ul {
            padding-left: 20px;
            margin: 10px 0;
        }

        .help-section li {
            margin-bottom: 8px;
        }

        .help-formula {
            background: rgba(255,255,255,0.05);
            padding: 15px;
            border-radius: 8px;
            font-family: monospace;
            margin: 10px 0;
            overflow-x: auto;
        }

        .help-example {
            background: rgba(69,123,157,0.1);
            border-left: 3px solid var(--primary);
            padding: 15px;
            border-radius: 0 8px 8px 0;
            margin: 15px 0;
        }

        .help-example-title {
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 10px;
        }

        /* Carousel Container */
        .carousel-container {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            padding-top: 60px;
            height: 100vh;
        }

        .carousel-container::-webkit-scrollbar {
            display: none;
        }

        /* Cards */
        .card {
            flex: 0 0 100vw;
            width: 100vw;
            scroll-snap-align: start;
            padding: 15px;
            overflow-y: auto;
            height: calc(100vh - 60px);
        }

        .card-inner {
            background: var(--bg-card);
            border-radius: 20px;
            border: 1px solid var(--border);
            min-height: 100%;
            overflow: hidden;
        }

        .card-header {
            padding: 18px 20px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .card-title {
            font-size: var(--font-sm);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--text-muted);
        }

        .card-body {
            padding: 20px;
        }

        /* Navigation Dots */
        .nav-dots {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 100;
            background: rgba(26,26,46,0.9);
            padding: 10px 20px;
            border-radius: 25px;
            border: 1px solid var(--border);
        }

        .nav-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--text-muted);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .nav-dot.active {
            background: var(--primary);
            transform: scale(1.3);
        }

        .nav-dot-label {
            display: none;
        }

        .nav-arrow {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-secondary);
            font-size: 1.4rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            padding: 0;
            line-height: 1;
        }

        .nav-arrow:hover {
            background: var(--primary);
            border-color: var(--primary);
            color: white;
        }

        .nav-arrow:active {
            transform: scale(0.95);
        }

        .nav-arrow:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        .nav-arrow:disabled:hover {
            background: transparent;
            border-color: var(--border);
            color: var(--text-secondary);
        }

        /* Main Select in Card 1 */
        .main-select {
            margin-bottom: 20px;
        }

        .main-select-label {
            font-size: var(--font-base);
            color: var(--text-secondary);
            margin-bottom: 8px;
            display: block;
        }

        #archetypeSelect {
            width: 100%;
            appearance: none;
            background: var(--bg-dark);
            border: 2px solid var(--primary);
            color: var(--text-primary);
            padding: 14px 45px 14px 18px;
            font-size: var(--font-md);
            border-radius: 12px;
            cursor: pointer;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a0a0b0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 15px center;
        }

        /* My Type Display */
        .my-type-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
        }

        .my-type-icon {
            width: 55px;
            height: 55px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            background: var(--primary);
        }

        .my-type-name {
            font-size: var(--font-lg);
            font-weight: 600;
            color: var(--primary);
        }

        .my-type-desc {
            color: var(--text-secondary);
            font-size: var(--font-base);
            margin-bottom: 20px;
            line-height: 1.6;
        }

        /* Collapsible Sections */
        .collapsible {
            border-top: 1px solid var(--border);
        }

        .collapsible-header {
            padding: 14px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            color: var(--text-secondary);
            font-size: var(--font-base);
        }

        .collapsible-icon {
            transition: transform 0.3s ease;
            font-size: 0.8rem;
        }

        .collapsible.open .collapsible-icon {
            transform: rotate(180deg);
        }

        .collapsible-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .collapsible.open .collapsible-content {
            max-height: 600px;
        }

        .pro-contra-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
            padding-bottom: 15px;
        }

        .mini-list {
            font-size: var(--font-base);
        }

        .mini-list-title {
            font-weight: 600;
            margin-bottom: 8px;
            font-size: var(--font-base);
        }

        .mini-list-title.pro { color: var(--success); }
        .mini-list-title.contra { color: var(--danger); }

        .mini-list ul {
            list-style: none;
            color: var(--text-muted);
        }

        .mini-list li {
            padding: 3px 0;
            padding-left: 14px;
            position: relative;
        }

        .mini-list li::before {
            content: '•';
            position: absolute;
            left: 0;
        }

        .pathos-logos-content {
            font-size: var(--font-base);
            color: var(--text-muted);
            padding-bottom: 15px;
        }

        .pathos-logos-content p {
            margin-bottom: 10px;
            font-style: italic;
            line-height: 1.5;
        }

        /* Match Cards - HIDDEN FOR NOW (can be re-enabled later) */
        .match-section {
            margin-top: 20px;
            display: none; /* Temporarily hidden - remove this line to show again */
        }

        .match-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px;
            border-radius: 12px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .match-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }

        .match-card:active {
            transform: translateY(0);
        }

        .match-card.top {
            background: rgba(0,206,201,0.1);
            border: 1px solid rgba(0,206,201,0.3);
        }

        .match-card.challenge {
            background: rgba(231,76,60,0.1);
            border: 1px solid rgba(231,76,60,0.3);
        }

        .match-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .match-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .match-label-text {
            font-size: var(--font-xs);
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .match-name {
            font-size: var(--font-base);
            font-weight: 500;
        }

        .match-score {
            font-size: var(--font-md);
            font-weight: 700;
        }

        .match-score.excellent { color: #00cec9; }
        .match-score.low { color: #e74c3c; }

        /* Card 2: Partner Selector */
        .partner-selector {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 20px;
        }

        .partner-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 12px 16px;
            border: 2px solid var(--border);
            background: transparent;
            color: var(--text-secondary);
            border-radius: 20px;
            cursor: pointer;
            font-size: var(--font-base);
            transition: all 0.3s ease;
        }

        .partner-btn:hover {
            border-color: var(--text-muted);
            background: var(--bg-hover);
        }

        .partner-btn.active {
            border-color: var(--primary);
            background: rgba(69,123,157,0.2);
            color: var(--text-primary);
        }

        .partner-btn .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }

        /* Radar Chart */
        .radar-section {
            margin-bottom: 25px;
        }

        .radar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .radar-title {
            font-size: var(--font-base);
            color: var(--text-secondary);
        }

        .radar-score {
            font-size: var(--font-xl);
            font-weight: 700;
        }

        .radar-score-label {
            font-size: var(--font-xs);
            color: var(--text-muted);
            text-transform: uppercase;
        }

        #radarChart {
            width: 100%;
            max-width: 280px;
            margin: 0 auto;
            display: block;
        }

        /* Category Bars */
        .category-section {
            margin-bottom: 25px;
        }

        .section-title {
            font-size: var(--font-sm);
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
        }

        .category-label {
            width: clamp(20px, 3vw + 10px, 28px);
            font-weight: 700;
            font-size: var(--font-sm);
            color: var(--primary);
        }

        .category-bar-wrap {
            flex: 1;
        }

        .category-bar-container {
            height: var(--bar-height);
            background: rgba(255,255,255,0.05);
            border-radius: var(--bar-radius);
            overflow: hidden;
        }

        .category-bar {
            height: 100%;
            border-radius: var(--bar-radius);
            transition: width 0.6s ease;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 8px;
        }

        .category-bar-value {
            font-size: var(--font-xs);
            font-weight: 600;
            color: white;
        }

        .category-name {
            font-size: var(--font-sm);
            color: var(--text-muted);
            margin-top: 2px;
        }

        .bar-good { background: linear-gradient(90deg, #457B9D, #5a9bc2); }
        .bar-medium { background: linear-gradient(90deg, #f39c12, #d68910); }
        .bar-low { background: linear-gradient(90deg, #e74c3c, #c0392b); }

        /* Pro/Contra Analysis */
        .analysis-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
        }

        .analysis-section {
            padding: 14px;
            border-radius: 10px;
        }

        .analysis-section.pro {
            background: rgba(46, 204, 113, 0.1);
            border: 1px solid rgba(46, 204, 113, 0.3);
        }

        .analysis-section.contra {
            background: rgba(231, 76, 60, 0.1);
            border: 1px solid rgba(231, 76, 60, 0.3);
        }

        .analysis-title {
            font-weight: 600;
            margin-bottom: 8px;
            font-size: var(--font-base);
        }

        .analysis-section.pro .analysis-title { color: var(--success); }
        .analysis-section.contra .analysis-title { color: var(--danger); }

        .analysis-list {
            list-style: none;
            font-size: var(--font-base);
            color: var(--text-secondary);
        }

        .analysis-list li {
            padding: 3px 0;
            padding-left: 14px;
            position: relative;
        }

        .analysis-list li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 9px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
        }

        .analysis-section.pro .analysis-list li::before { background: var(--success); }
        .analysis-section.contra .analysis-list li::before { background: var(--danger); }

        /* Card 3: Alle Typen - Mini Cards Grid */
        .mini-cards-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .mini-card {
            background: var(--bg-dark);
            border-radius: 14px;
            padding: 14px;
            border: 1px solid var(--border);
            transition: all 0.3s ease;
        }

        .mini-card:hover {
            border-color: var(--text-muted);
        }

        .mini-card-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }

        .mini-card-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
        }

        .mini-card-name {
            font-size: var(--font-base);
            font-weight: 600;
        }

        .mini-card-desc {
            font-size: var(--font-sm);
            color: var(--text-muted);
            line-height: 1.5;
            margin-bottom: 10px;
        }

        .mini-card-self-score {
            font-size: var(--font-sm);
            color: var(--text-secondary);
        }

        .mini-card-self-score span {
            font-weight: 700;
            color: var(--primary);
        }

        /* Swipe Hint */
        .swipe-hint {
            position: fixed;
            bottom: 70px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.75rem;
            color: var(--text-muted);
            opacity: 0.7;
            animation: fadeOut 3s forwards;
            animation-delay: 2s;
        }

        @keyframes fadeOut {
            to { opacity: 0; }
        }

        /* Info Icon */
        .section-title-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }

        .info-icon {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: rgba(255,255,255,0.1);
            border: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .info-icon:hover {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        /* Clickable Category Row */
        .category-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
            cursor: pointer;
            padding: 4px;
            margin: -4px;
            margin-bottom: 6px;
            border-radius: 8px;
            transition: background 0.2s ease;
        }

        .category-row:hover {
            background: rgba(255,255,255,0.05);
        }

        .category-row:active {
            background: rgba(255,255,255,0.1);
        }

        /* Modal */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.85);
            z-index: 2000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            backdrop-filter: blur(5px);
        }

        .modal-overlay.active {
            display: flex;
        }

        .modal {
            background: var(--bg-card);
            border-radius: 20px;
            border: 1px solid var(--border);
            max-width: 400px;
            width: 100%;
            max-height: 80vh;
            overflow-y: auto;
        }

        .modal-header {
            padding: 18px 20px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            background: var(--bg-card);
            z-index: 1;
        }

        .modal-title {
            font-size: var(--font-md);
            font-weight: 600;
            color: var(--text-primary);
        }

        .modal-close {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(255,255,255,0.1);
            border: none;
            color: var(--text-secondary);
            font-size: 1.2rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .modal-close:hover {
            background: var(--danger);
            color: white;
        }

        /* Archetype Navigation Buttons */
        .archetype-nav-btn {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(255,255,255,0.1);
            border: none;
            color: var(--text-secondary);
            font-size: 1.4rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .archetype-nav-btn:hover {
            background: var(--primary);
            color: white;
        }

        .archetype-dots {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-bottom: 15px;
        }

        .archetype-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .archetype-dot.active {
            background: var(--primary);
            transform: scale(1.3);
        }

        .archetype-dot:hover {
            background: var(--primary-light);
        }

        .modal-body {
            padding: 20px;
        }

        .modal-subtitle {
            color: var(--text-muted);
            font-size: var(--font-sm);
            font-style: italic;
            margin-bottom: 16px;
        }

        .score-display {
            font-size: 3rem;
            font-weight: bold;
            text-align: center;
            margin: 24px 0;
            color: var(--primary);
        }

        .explanation {
            margin-top: 20px;
        }

        .explanation h4 {
            margin-top: 20px;
            margin-bottom: 10px;
            color: var(--text-primary);
            font-size: var(--font-base);
        }

        .explanation p {
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 12px;
        }

        .explanation ul {
            margin: 12px 0;
            padding-left: 20px;
        }

        .explanation li {
            margin: 8px 0;
            color: var(--text-secondary);
            line-height: 1.5;
        }

        .modal-feedback-btn {
            margin-top: 20px;
            padding: 12px 16px;
            background: var(--bg-dark);
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text-muted);
            cursor: pointer;
            text-align: center;
            transition: all 0.2s;
        }

        .modal-feedback-btn:hover {
            border-color: var(--primary);
            box-shadow: 0 0 8px rgba(69, 123, 157, 0.3);
        }

        .category-nav-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding: 8px;
            background: var(--bg-dark);
            border-radius: 10px;
        }

        .category-nav-btn {
            padding: 8px 16px;
            background: var(--bg-dark);
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.2s;
            font-size: var(--font-sm);
        }

        .category-nav-btn:hover {
            border-color: var(--primary);
            box-shadow: 0 0 8px rgba(69, 123, 157, 0.3);
        }

        .category-nav-indicator {
            color: var(--text-muted);
            font-size: var(--font-sm);
        }

        /* Definition Modal */
        .definition-modal {
            max-width: 500px;
        }

        .definition-section {
            margin-bottom: 20px;
        }

        .definition-section-title {
            font-size: var(--font-sm);
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
            padding-bottom: 5px;
            border-bottom: 1px solid var(--border);
        }

        .definition-long {
            font-size: var(--font-base);
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .definition-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .definition-list li {
            padding: 8px 0 8px 20px;
            position: relative;
            font-size: var(--font-sm);
            color: var(--text-secondary);
        }

        .definition-list.principles li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--success);
        }

        .definition-list.not-same li::before {
            content: '✗';
            position: absolute;
            left: 0;
            color: var(--danger);
        }

        .definition-list.variants li::before {
            content: '•';
            position: absolute;
            left: 0;
            color: var(--primary);
        }

        .type-info-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
            font-size: 12px;
            cursor: pointer;
            margin-left: 8px;
            transition: all 0.2s;
        }

        .type-info-icon:hover {
            background: var(--primary);
            color: white;
        }

        .type-tooltip {
            position: relative;
            display: inline-block;
        }

        .type-tooltip .tooltip-text {
            visibility: hidden;
            width: 280px;
            background-color: var(--bg-dark);
            color: var(--text-secondary);
            text-align: left;
            padding: 12px;
            border-radius: 8px;
            border: 1px solid var(--border);
            position: absolute;
            z-index: 100;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s;
            font-size: var(--font-sm);
            line-height: 1.4;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        }

        .type-tooltip:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }

        .modal-category {
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border);
        }

        .modal-category:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        .modal-category-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }

        .modal-category-letter {
            width: clamp(24px, 3vw + 14px, 32px);
            height: clamp(24px, 3vw + 14px, 32px);
            border-radius: 8px;
            background: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: var(--font-sm);
        }

        .modal-category-name {
            font-weight: 600;
            font-size: var(--font-base);
            color: var(--text-primary);
        }

        .modal-category-desc {
            font-size: var(--font-base);
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 12px;
        }

        .modal-subdimensions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .modal-subdim-tag {
            font-size: var(--font-sm);
            padding: 6px 10px;
            background: rgba(255,255,255,0.08);
            border-radius: 12px;
            color: var(--text-secondary);
            cursor: pointer;
            position: relative;
            transition: all 0.2s ease;
        }

        .modal-subdim-tag:hover {
            background: rgba(255,255,255,0.15);
        }

        .modal-subdim-tag.active {
            background: var(--primary);
            color: white;
        }

        /* Tag Tooltip Container */
        .tag-tooltip-container {
            position: relative;
            display: inline-block;
        }

        /* Tag Tooltip - Click to open, stays open */
        .tag-tooltip {
            display: none;
            position: fixed;
            z-index: 1001;
            width: min(360px, 92vw);
            max-width: 92vw;
            max-height: 85vh;
            overflow-y: auto;
            background: var(--bg-card);
            border: 2px solid var(--primary);
            border-radius: 12px;
            padding: 0;
            box-shadow: 0 10px 40px rgba(0,0,0,0.6);
        }

        .tag-tooltip.active {
            display: block;
        }

        .tag-tooltip-close {
            position: absolute;
            top: 6px;
            right: 8px;
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 22px;
            cursor: pointer;
            padding: 4px 8px;
            line-height: 1;
            z-index: 10;
        }

        .tag-tooltip-close:hover {
            color: var(--text-primary);
        }

        /* Tooltip Header */
        .tag-tooltip-header {
            padding: 10px 12px;
            background: rgba(255,255,255,0.05);
            border-bottom: 1px solid var(--border);
            border-radius: 12px 12px 0 0;
            font-weight: 600;
            color: var(--text-primary);
            font-size: var(--font-sm);
        }

        /* Tooltip Body */
        .tag-tooltip-body {
            padding: 12px;
        }

        /* Type Perspective */
        .tag-tooltip-perspective {
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border);
        }

        .tag-tooltip-perspective:last-of-type {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .tag-tooltip-type-name {
            font-weight: 600;
            font-size: var(--font-xs);
            margin-bottom: 4px;
            display: block;
        }

        .tag-tooltip-type-text {
            font-size: var(--font-xs);
            color: var(--text-secondary);
            line-height: 1.4;
        }

        /* Dynamic Summary */
        .tag-tooltip-dynamic {
            background: rgba(69, 123, 157, 0.15);
            padding: 10px;
            border-radius: 8px;
            margin-top: 10px;
            font-size: var(--font-xs);
            line-height: 1.4;
        }

        .tag-tooltip-dynamic::before {
            content: '→ ';
            color: var(--primary);
            font-weight: 600;
        }

        /* Type Switcher in Tooltip */
        .tag-tooltip-type-switcher {
            display: flex;
            gap: 6px;
            padding: 8px 12px;
            background: rgba(255,255,255,0.03);
            border-bottom: 1px solid var(--border);
            overflow-x: auto;
            flex-wrap: wrap;
            -webkit-overflow-scrolling: touch;
        }

        .type-switch-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text-secondary);
            border-radius: 16px;
            cursor: pointer;
            font-size: var(--font-xs);
            transition: all 0.2s ease;
            pointer-events: auto;
        }

        .type-switch-btn:hover {
            background: rgba(255,255,255,0.1);
            border-color: var(--text-secondary);
        }

        .type-switch-btn.active {
            border-color: currentColor;
            background: rgba(255,255,255,0.08);
        }

        .type-switch-btn .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .type-switch-label {
            font-size: var(--font-xs);
            color: var(--text-muted);
            margin-right: auto;
            display: flex;
            align-items: center;
        }

        /* Responsive: Position tooltip above or below based on space */
        @media (max-width: 480px) {
            .tag-tooltip {
                width: 280px;
                left: 0;
                transform: translateX(-20%);
            }
        }

        /* Match Modal Content */
        .match-modal-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }

        .match-modal-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }

        .match-modal-info h3 {
            font-size: var(--font-lg);
            font-weight: 600;
            margin-bottom: 4px;
        }

        .match-modal-info p {
            font-size: var(--font-sm);
            color: var(--text-muted);
        }

        .match-modal-score {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px;
            background: var(--bg-dark);
            border-radius: 12px;
            margin-bottom: 20px;
        }

        .match-modal-score-label {
            font-size: var(--font-sm);
            color: var(--text-muted);
            text-transform: uppercase;
        }

        .match-modal-score-value {
            font-size: var(--font-xl);
            font-weight: 700;
        }

        .match-modal-categories {
            margin-bottom: 20px;
        }

        .match-modal-categories-title {
            font-size: var(--font-sm);
            color: var(--text-muted);
            text-transform: uppercase;
            margin-bottom: 12px;
        }

        .match-modal-bar-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }

        .match-modal-bar-row.clickable {
            cursor: pointer;
            padding: 6px;
            margin: -6px;
            margin-bottom: 2px;
            border-radius: 8px;
            transition: background 0.2s ease;
        }

        .match-modal-bar-row.clickable:hover {
            background: rgba(255,255,255,0.08);
        }

        .match-modal-bar-row.clickable:active {
            background: rgba(255,255,255,0.12);
        }

        .match-modal-bar-label {
            width: 24px;
            font-weight: 700;
            font-size: var(--font-sm);
            color: var(--primary);
        }

        .match-modal-bar-container {
            flex: 1;
            height: var(--bar-height);
            background: rgba(255,255,255,0.05);
            border-radius: var(--bar-radius);
            overflow: hidden;
        }

        .match-modal-bar {
            height: 100%;
            border-radius: var(--bar-radius);
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 8px;
        }

        .match-modal-bar-value {
            font-size: var(--font-xs);
            font-weight: 600;
            color: white;
        }

        .match-modal-bar-name {
            width: 120px;
            font-size: var(--font-xs);
            color: var(--text-muted);
            text-align: right;
        }

        .match-modal-section {
            padding: 14px;
            border-radius: 10px;
            margin-bottom: 12px;
        }

        .match-modal-section.pro {
            background: rgba(46, 204, 113, 0.1);
            border: 1px solid rgba(46, 204, 113, 0.3);
        }

        .match-modal-section.contra {
            background: rgba(231, 76, 60, 0.1);
            border: 1px solid rgba(231, 76, 60, 0.3);
        }

        .match-modal-section-title {
            font-weight: 600;
            margin-bottom: 8px;
            font-size: var(--font-base);
        }

        .match-modal-section.pro .match-modal-section-title { color: var(--success); }
        .match-modal-section.contra .match-modal-section-title { color: var(--danger); }

        .match-modal-list {
            list-style: none;
            font-size: var(--font-sm);
            color: var(--text-secondary);
        }

        .match-modal-list li {
            padding: 3px 0;
            padding-left: 14px;
            position: relative;
        }

        .match-modal-list li::before {
            content: '•';
            position: absolute;
            left: 0;
        }

        /* Match Modal Toggle Buttons */
        .match-toggle-btn {
            padding: 6px 10px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background: rgba(30, 30, 35, 0.9);
            color: var(--text-muted);
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s ease;
        }

        .match-toggle-btn:hover {
            background: rgba(50, 50, 55, 0.9);
            transform: scale(1.05);
        }

        .match-toggle-btn.active {
            background: rgba(74, 144, 226, 0.2);
            border-color: var(--primary);
            color: var(--text-primary);
            box-shadow: 0 0 8px rgba(74, 144, 226, 0.3);
        }

        /* Match Modal Synthese Section */
        .match-modal-section.synthese {
            background: linear-gradient(135deg, rgba(155, 89, 182, 0.1), rgba(74, 144, 226, 0.1));
            border: 1px solid rgba(155, 89, 182, 0.3);
        }

        .match-modal-section.synthese .match-modal-section-title {
            color: #9b59b6;
        }

        .match-modal-perspective {
            font-size: 11px;
            color: var(--text-muted);
            padding: 4px 8px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 4px;
            display: inline-block;
            margin-bottom: 8px;
        }

        .match-modal-inner-conflict {
            background: rgba(255, 193, 7, 0.08);
            border: 1px solid rgba(255, 193, 7, 0.3);
            border-radius: 8px;
            padding: 12px;
            margin-top: 8px;
        }

        .match-modal-inner-conflict-title {
            font-weight: 600;
            color: #f39c12;
            font-size: var(--font-sm);
            margin-bottom: 6px;
        }

        .match-modal-inner-conflict-text {
            font-size: var(--font-xs);
            color: var(--text-secondary);
            line-height: 1.5;
        }

        /* Legend Page */
        .legend-section {
            margin-bottom: 25px;
        }

        .legend-title {
            font-size: var(--font-sm);
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
        }

        .color-scale {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .color-scale-item {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .color-scale-bar {
            width: clamp(50px, 8vw + 20px, 80px);
            height: var(--bar-height);
            border-radius: var(--bar-radius);
        }

        .color-scale-label {
            font-size: var(--font-base);
            color: var(--text-secondary);
        }

        .color-scale-range {
            font-size: var(--font-sm);
            color: var(--text-muted);
            margin-left: auto;
        }

        .legend-category-item {
            display: flex;
            gap: 12px;
            padding: 12px;
            background: var(--bg-dark);
            border-radius: 12px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .legend-category-item:hover {
            background: var(--bg-hover);
        }

        .legend-category-letter {
            width: clamp(28px, 4vw + 16px, 36px);
            height: clamp(28px, 4vw + 16px, 36px);
            border-radius: 8px;
            background: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: var(--font-base);
            flex-shrink: 0;
        }

        .legend-category-content {
            flex: 1;
        }

        .legend-category-name {
            font-weight: 600;
            font-size: var(--font-md);
            color: var(--text-primary);
            margin-bottom: 4px;
        }

        .legend-category-desc {
            font-size: var(--font-base);
            color: var(--text-muted);
            line-height: 1.5;
        }

        /* Responsive - Mobile (larger fonts for readability) */
        @media (max-width: 599px) {
            :root {
                --font-xs: 0.85rem;
                --font-sm: 0.95rem;
                --font-base: 1.05rem;
                --font-md: 1.15rem;
                --font-lg: 1.4rem;
                --font-xl: 1.8rem;
                --bar-height: 20px;
            }

            .modal {
                max-width: 95vw;
                max-height: 90vh;
            }

            .match-modal-bar-name {
                width: auto;
                min-width: 80px;
            }
        }

        /* Responsive - Tablet+ */
        @media (min-width: 600px) {
            .mini-cards-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .analysis-grid {
                grid-template-columns: 1fr 1fr;
            }

            .pro-contra-grid {
                grid-template-columns: 1fr 1fr;
                gap: 12px;
            }

            .mini-list {
                font-size: var(--font-sm);
            }

            .mini-list-title {
                font-size: var(--font-sm);
            }
        }

        @media (min-width: 900px) {
            .card {
                padding: 20px 10%;
            }

            .mini-cards-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 15px;
            }
        }

        /* Feedback Button */
        .feedback-btn {
            position: fixed;
            bottom: 80px;
            right: 20px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--primary);
            border: none;
            color: white;
            font-size: 1.4rem;
            cursor: pointer;
            z-index: 99;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            transition: all 0.3s ease;
        }

        .feedback-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(0,0,0,0.4);
        }

        /* Feedback Modal */
        .feedback-modal {
            max-width: 420px;
        }

        .feedback-context-id {
            display: inline-block;
            padding: 4px 10px;
            background: var(--bg-dark);
            border-radius: 6px;
            font-size: var(--font-xs);
            color: var(--primary);
            font-family: monospace;
            margin-bottom: 16px;
        }

        .feedback-form-group {
            margin-bottom: 16px;
        }

        .feedback-label {
            display: block;
            font-size: var(--font-sm);
            color: var(--text-secondary);
            margin-bottom: 6px;
        }

        .feedback-label .required {
            color: var(--danger);
        }

        .feedback-input,
        .feedback-textarea {
            width: 100%;
            background: var(--bg-dark);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px 14px;
            color: var(--text-primary);
            font-size: var(--font-base);
            font-family: inherit;
            transition: border-color 0.3s ease;
        }

        .feedback-input:focus,
        .feedback-textarea:focus {
            outline: none;
            border-color: var(--primary);
        }

        .feedback-textarea {
            min-height: 100px;
            resize: vertical;
        }

        /* Star Rating */
        .star-rating-group {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .star-rating-label {
            font-size: var(--font-sm);
            color: var(--text-muted);
            min-width: 80px;
        }

        .star-rating {
            display: flex;
            gap: 4px;
        }

        .star-rating .star {
            font-size: 1.5rem;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .star-rating .star:hover,
        .star-rating .star.active {
            color: #f1c40f;
            transform: scale(1.1);
        }

        .feedback-buttons {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .feedback-btn-cancel,
        .feedback-btn-submit {
            flex: 1;
            padding: 14px;
            border-radius: 10px;
            font-size: var(--font-base);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .feedback-btn-cancel {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-secondary);
        }

        .feedback-btn-cancel:hover {
            background: var(--bg-hover);
        }

        .feedback-btn-submit {
            background: var(--primary);
            border: none;
            color: white;
        }

        .feedback-btn-submit:hover {
            filter: brightness(1.1);
        }

        .feedback-btn-submit:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Feedback Page (Card 4) */
        .feedback-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 20px;
        }

        .feedback-filter-btn {
            padding: 8px 14px;
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text-secondary);
            border-radius: 20px;
            font-size: var(--font-sm);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .feedback-filter-btn:hover {
            background: var(--bg-hover);
        }

        .feedback-filter-btn.active {
            background: var(--primary);
            border-color: var(--primary);
            color: white;
        }

        .feedback-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .feedback-item {
            background: var(--bg-dark);
            border-radius: 12px;
            padding: 14px;
            border: 1px solid var(--border);
        }

        .feedback-item-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 8px;
        }

        .feedback-item-context {
            font-size: var(--font-xs);
            color: var(--primary);
            font-family: monospace;
            background: rgba(255,255,255,0.05);
            padding: 2px 8px;
            border-radius: 4px;
        }

        .feedback-item-name {
            font-size: var(--font-sm);
            color: var(--text-muted);
        }

        .feedback-item-title {
            font-size: var(--font-base);
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 6px;
        }

        .feedback-item-comment {
            font-size: var(--font-sm);
            color: var(--text-secondary);
            line-height: 1.5;
            margin-bottom: 10px;
        }

        .feedback-item-ratings {
            display: flex;
            gap: 20px;
            font-size: var(--font-sm);
        }

        .feedback-rating {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--text-muted);
        }

        .feedback-rating .stars {
            color: #f1c40f;
        }

        .feedback-empty {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-muted);
        }

        .feedback-loading {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-muted);
        }

        /* Advanced Feedback Filters */
        .feedback-search {
            margin-bottom: 15px;
        }

        .feedback-search-input {
            width: 100%;
            padding: 12px 16px;
            background: var(--bg-dark);
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text-primary);
            font-size: var(--font-sm);
        }

        .feedback-search-input:focus {
            outline: none;
            border-color: var(--primary);
        }

        .feedback-advanced-filters {
            background: var(--bg-dark);
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid var(--border);
        }

        .feedback-filter-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }

        .feedback-filter-row:last-child {
            margin-bottom: 0;
        }

        .feedback-filter-row label {
            font-size: var(--font-sm);
            color: var(--text-muted);
            min-width: 90px;
        }

        .feedback-select {
            padding: 8px 12px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            font-size: var(--font-sm);
            cursor: pointer;
        }

        .filter-separator {
            color: var(--text-muted);
            font-size: var(--font-sm);
        }

        .feedback-category-btns {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .cat-filter-btn {
            padding: 6px 12px;
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text-secondary);
            border-radius: 16px;
            font-size: var(--font-xs);
            cursor: pointer;
            transition: all 0.2s;
        }

        .cat-filter-btn:hover {
            background: var(--bg-hover);
        }

        .cat-filter-btn.active {
            background: var(--primary);
            border-color: var(--primary);
            color: white;
        }

        /* Reply/Thread Styles */
        .feedback-item-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px solid var(--border);
        }

        .feedback-reply-btn {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 6px 12px;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 16px;
            color: var(--text-muted);
            font-size: var(--font-xs);
            cursor: pointer;
            transition: all 0.2s;
        }

        .feedback-reply-btn:hover {
            background: var(--bg-hover);
            color: var(--primary);
            border-color: var(--primary);
        }

        .feedback-replies {
            margin-left: 20px;
            padding-left: 15px;
            border-left: 2px solid var(--border);
            margin-top: 12px;
        }

        .feedback-item.reply {
            background: rgba(255,255,255,0.02);
            padding: 12px;
        }

        .feedback-item.reply .feedback-item-context {
            font-size: 10px;
        }

        .reply-indicator {
            font-size: var(--font-xs);
            color: var(--text-muted);
            margin-bottom: 6px;
        }

        .feedback-timestamp {
            font-size: 10px;
            color: var(--text-muted);
        }

        /* Age Verification Modal */
        .age-verification-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.95);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .age-verification-overlay.hidden {
            display: none;
        }

        .age-verification-modal {
            position: relative;
            background: var(--bg-card);
            border-radius: 16px;
            padding: 30px;
            padding-top: 50px;
            max-width: 400px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            text-align: center;
            border: 2px solid var(--primary);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
            z-index: 10001;
        }

        .age-verification-icon {
            font-size: 48px;
            margin-bottom: 15px;
        }

        .age-verification-modal h2 {
            color: var(--text-primary);
            margin-bottom: 15px;
            font-size: var(--font-lg);
        }

        .age-verification-modal p {
            color: var(--text-secondary);
            margin-bottom: 20px;
            line-height: 1.5;
            font-size: var(--font-sm);
        }

        .age-verification-question {
            background: rgba(255, 255, 255, 0.05);
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            color: var(--text-primary);
        }

        .age-verification-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .age-btn {
            padding: 14px 20px;
            border-radius: 10px;
            font-size: var(--font-base);
            font-weight: 600;
            cursor: pointer !important;
            border: none;
            transition: all 0.2s ease;
            position: relative;
            z-index: 10002 !important;
            pointer-events: auto !important;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
            user-select: none;
            /* Ensure button is always clickable */
            display: block;
            width: 100%;
            opacity: 1 !important;
            visibility: visible !important;
        }

        .age-btn-yes {
            background: var(--success);
            color: white;
        }

        .age-btn-yes:hover {
            background: #27ae60;
            transform: scale(1.02);
        }

        .age-btn-no {
            background: transparent;
            color: var(--text-secondary);
            border: 1px solid var(--border);
        }

        .age-btn-no:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        /* Ad container around buttons */
        .age-verification-ad-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            width: 100%;
            margin: 10px 0;
        }
        .age-verification-ad-left,
        .age-verification-ad-right {
            flex: 0 0 120px;
            min-height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .age-verification-buttons-center {
            flex: 0 0 auto;
            min-width: 200px;
        }
        /* Desktop: Wider modal without scrolling, ensure red border is fully visible */
        @media (min-width: 769px) {
            .age-verification-overlay {
                padding: 40px;
            }
            .age-verification-modal {
                max-width: 480px;
                max-height: calc(100vh - 80px);
                overflow-y: auto;
                margin: auto;
            }
        }
        @media (max-width: 768px) {
            .age-verification-ad-container {
                flex-direction: column;
            }
            .age-verification-ad-left,
            .age-verification-ad-right {
                flex: 0 0 auto;
                width: 100%;
                min-height: 100px;
            }
            /* Mobile: Larger fonts for age verification */
            .age-verification-modal h2 {
                font-size: 22px;
            }
            .age-verification-modal p {
                font-size: 16px;
            }
            .age-verification-question {
                font-size: 17px;
                padding: 18px;
            }
            .age-btn {
                font-size: 17px;
                padding: 16px 24px;
            }
            .age-verification-note {
                font-size: 13px !important;
            }
        }

        .age-verification-note {
            font-size: var(--font-xs) !important;
            color: var(--text-muted) !important;
            margin-top: 15px !important;
            margin-bottom: 0 !important;
        }

        /* Hide Vercel Toolbar */
        #vercel-live-feedback-button,
        [data-vercel-toolbar],
        iframe[src*="vercel.live"] {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }

        /* ========================================
           Extended Dimensions UI
           ======================================== */

        .dimensions-section {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid var(--border);
        }

        .dimensions-section-title {
            font-size: var(--font-base);
            font-weight: 600;
            color: var(--primary);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 15px;
            padding: 10px 15px;
            background: rgba(69, 123, 157, 0.15);
            border-left: 3px solid var(--primary);
            border-radius: 0 8px 8px 0;
        }

        .dimensions-section-title.ich-title {
            color: var(--success);
            background: rgba(46, 204, 113, 0.15);
            border-left-color: var(--success);
        }

        .dimensions-section-title.partner-title {
            color: var(--accent);
            background: rgba(231, 76, 60, 0.15);
            border-left-color: var(--accent);
        }

        .dimension-group {
            margin-bottom: 18px;
        }

        .dimension-label {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: var(--font-sm);
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .dimension-info-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: rgba(255,255,255,0.1);
            color: var(--text-muted);
            font-size: 10px;
            cursor: help;
            transition: all 0.2s ease;
        }

        .dimension-info-icon:hover {
            background: var(--primary);
            color: white;
        }

        .dimension-options {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .dimension-radio {
            display: none;
        }

        .dimension-option {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px 14px;
            border: 1px solid var(--border);
            border-radius: 20px;
            background: transparent;
            color: var(--text-secondary);
            font-size: var(--font-sm);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .dimension-option:hover {
            border-color: var(--text-muted);
            background: var(--bg-hover);
        }

        .dimension-radio:checked + .dimension-option {
            border-color: var(--primary);
            background: rgba(69,123,157,0.2);
            color: var(--text-primary);
        }

        .dimension-option.highlight-change {
            animation: highlightPulse 0.3s ease;
        }

        @keyframes highlightPulse {
            0% { border-color: var(--primary); box-shadow: 0 0 0 0 rgba(69,123,157,0.4); }
            50% { border-color: var(--success); box-shadow: 0 0 0 4px rgba(46,204,113,0.3); }
            100% { border-color: var(--primary); box-shadow: 0 0 0 0 rgba(69,123,157,0); }
        }

        /* Blinking animation for unselected dimension groups */
        .dimension-group.needs-selection .dimension-option,
        .dimension-status-group.needs-selection .dimension-option,
        .dimension-group.needs-selection .dominanz-option-row {
            animation: needsAttention 1.5s ease-in-out infinite;
        }

        .dimension-group.needs-selection .dimension-label,
        .dimension-status-group.needs-selection .dimension-status-label {
            color: var(--warning);
        }

        @keyframes needsAttention {
            0%, 100% {
                border-color: var(--border);
                box-shadow: 0 0 0 0 rgba(243, 156, 18, 0);
            }
            50% {
                border-color: var(--warning);
                box-shadow: 0 0 8px 2px rgba(243, 156, 18, 0.3);
            }
        }

        /* Status sub-options (indented) */
        .dimension-status-group {
            margin-left: 20px;
            margin-top: 10px;
            padding-left: 10px;
            border-left: 2px solid var(--border);
        }

        .dimension-status-label {
            font-size: var(--font-xs);
            color: var(--text-muted);
            margin-bottom: 6px;
        }

        /* Compact Overview Box */
        .analysis-overview {
            background: var(--bg-dark);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 12px 16px;
            margin-bottom: 20px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .analysis-overview:hover {
            border-color: var(--primary);
            background: var(--bg-hover);
        }

        .analysis-overview-title {
            font-size: var(--font-xs);
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .analysis-overview-content {
            font-size: var(--font-sm);
            color: var(--text-primary);
            line-height: 1.4;
        }

        .analysis-overview-content .type-name {
            color: var(--primary);
            font-weight: 500;
        }

        .analysis-overview-content .dim-info {
            color: var(--text-secondary);
            font-size: var(--font-xs);
        }

        .analysis-overview-content .geschlecht-info {
            color: var(--warning);
            font-size: var(--font-xs);
            font-weight: 500;
        }

        .analysis-overview-edit {
            font-size: var(--font-xs);
            color: var(--primary);
            margin-top: 6px;
            display: inline-block;
        }

        /* Dimension Tooltip */
        .dimension-tooltip-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            pointer-events: none;
        }

        .dimension-tooltip-overlay.active {
            display: flex;
            pointer-events: auto;
        }

        .dimension-tooltip-content {
            background: var(--bg-card);
            border: 1px solid var(--primary);
            border-radius: 12px;
            padding: 20px;
            max-width: 320px;
            width: 100%;
        }

        .dimension-tooltip-title {
            font-size: var(--font-base);
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 10px;
        }

        .dimension-tooltip-text {
            font-size: var(--font-sm);
            color: var(--text-secondary);
            line-height: 1.5;
        }

        .dimension-tooltip-close {
            display: block;
            margin-top: 15px;
            padding: 8px 16px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: var(--font-sm);
            cursor: pointer;
            width: 100%;
        }

        /* Geschlecht Info Modal (scrollable) */
        .geschlecht-info-modal-content {
            background: var(--bg-card);
            border: 1px solid var(--primary);
            border-radius: 12px;
            padding: 0;
            max-width: 400px;
            width: 100%;
            max-height: 80vh;
            display: flex;
            flex-direction: column;
        }

        .geschlecht-info-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }

        .geschlecht-info-modal-header .dimension-tooltip-title {
            margin-bottom: 0;
        }

        .geschlecht-info-close-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 24px;
            cursor: pointer;
            padding: 0;
            line-height: 1;
            transition: color 0.2s ease;
        }

        .geschlecht-info-close-btn:hover {
            color: var(--text-primary);
        }

        .geschlecht-info-scroll-container {
            overflow-y: auto;
            padding: 12px 20px;
            flex: 1;
            max-height: 50vh;
        }

        .geschlecht-info-item {
            padding: 12px 0;
            border-bottom: 1px solid var(--border);
        }

        .geschlecht-info-item:last-child {
            border-bottom: none;
        }

        .geschlecht-info-name {
            font-size: var(--font-base);
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 6px;
        }

        .geschlecht-info-desc {
            font-size: var(--font-sm);
            color: var(--text-secondary);
            line-height: 1.5;
        }

        .geschlecht-info-modal-content .dimension-tooltip-close {
            margin: 16px 20px;
            flex-shrink: 0;
        }

        /* ═══════════════════════════════════════════════════════════════════════
           GESCHLECHTS-SYSTEM (P/S: P=Körper, S=Identität)
           P-Zeile: Mann, Frau, Inter (immer sichtbar)
           S-Zeile: kontextabhängig (Cis/Trans/Unsicher oder Nonbinär/Fluid/Unsicher)
           ═══════════════════════════════════════════════════════════════════════ */

        .geschlecht-primary-row {
            margin-bottom: 6px;
        }

        .geschlecht-secondary-row {
            margin-top: 4px;
            padding-top: 4px;
            border-top: 1px dashed var(--border-light, rgba(255,255,255,0.1));
        }

        .geschlecht-p-grid,
        .geschlecht-s-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        /* Status Popup Styles */
        .status-popup-content {
            max-width: 380px;
        }

        .status-popup-options {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .status-popup-btn {
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding: 15px;
            background: var(--bg-darker);
            border: 2px solid var(--border);
            border-radius: 10px;
            cursor: pointer;
            text-align: left;
            transition: all 0.2s ease;
        }

        .status-popup-btn:hover {
            border-color: var(--primary);
            background: rgba(var(--primary-rgb), 0.1);
        }

        .status-popup-btn.interessiert:hover {
            border-color: var(--warning);
            background: rgba(255, 193, 7, 0.1);
        }

        .status-popup-btn-title {
            font-size: var(--font-base);
            font-weight: 600;
            color: var(--text-primary);
        }

        .status-popup-btn-desc {
            font-size: var(--font-xs);
            color: var(--text-muted);
            line-height: 1.4;
        }

        /* Responsive: Two columns on larger screens */
        @media (min-width: 500px) {
            .dimensions-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 15px;
            }

            .dimension-group.full-width {
                grid-column: 1 / -1;
            }
        }

        /* ========================================
           Pathos/Logos Check System
           ======================================== */

        /* Pathos Blocker (K.O. - No Compatibility) */
        .pathos-blocker {
            background: rgba(231, 76, 60, 0.1);
            border: 2px solid var(--danger);
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 20px;
            display: none;
        }

        .pathos-blocker.active {
            display: block;
        }

        .pathos-blocker-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }

        .pathos-blocker-icon {
            font-size: 1.8rem;
        }

        .pathos-blocker-title {
            font-size: var(--font-md);
            font-weight: 600;
            color: var(--danger);
        }

        .pathos-blocker-reason {
            background: rgba(0,0,0,0.2);
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 15px;
            font-size: var(--font-sm);
            color: var(--text-secondary);
        }

        .pathos-blocker-persons {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 15px;
            padding: 12px;
            background: rgba(0,0,0,0.15);
            border-radius: 8px;
        }

        .pathos-blocker-person {
            font-size: var(--font-sm);
            color: var(--text-primary);
        }

        .pathos-blocker-person-label {
            color: var(--text-muted);
            margin-right: 8px;
        }

        .pathos-blocker-divider {
            height: 1px;
            background: var(--border);
            margin: 15px 0;
        }

        .pathos-blocker-explanation {
            margin-bottom: 15px;
        }

        .pathos-blocker-explanation h4 {
            font-size: var(--font-sm);
            color: var(--text-primary);
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .pathos-blocker-explanation p {
            font-size: var(--font-sm);
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 10px;
        }

        .pathos-blocker-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 15px;
        }

        .pathos-blocker-btn {
            padding: 10px 16px;
            border-radius: 8px;
            font-size: var(--font-sm);
            cursor: pointer;
            transition: all 0.2s ease;
            border: none;
        }

        .pathos-blocker-btn-primary {
            background: var(--primary);
            color: white;
        }

        .pathos-blocker-btn-primary:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        .pathos-blocker-btn-secondary {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-secondary);
        }

        .pathos-blocker-btn-secondary:hover {
            background: var(--bg-hover);
        }

        /* Logos Warning (Warning, but analysis continues) */
        .logos-warning {
            background: rgba(243, 156, 18, 0.1);
            border: 2px solid var(--warning);
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 20px;
            display: none;
        }

        .logos-warning.active {
            display: block;
        }

        .logos-warning-header {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            cursor: pointer;
        }

        .logos-warning-icon {
            font-size: 1.4rem;
            flex-shrink: 0;
        }

        .logos-warning-content {
            flex: 1;
        }

        .logos-warning-title {
            font-size: var(--font-sm);
            font-weight: 600;
            color: var(--warning);
            margin-bottom: 4px;
        }

        .logos-warning-subtitle {
            font-size: var(--font-xs);
            color: var(--text-secondary);
        }

        .logos-warning-toggle {
            font-size: var(--font-xs);
            color: var(--text-muted);
            transition: transform 0.2s ease;
        }

        .logos-warning.expanded .logos-warning-toggle {
            transform: rotate(180deg);
        }

        .logos-warning-details {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .logos-warning.expanded .logos-warning-details {
            max-height: 400px;
        }

        .logos-warning-details-inner {
            padding-top: 15px;
            border-top: 1px solid rgba(243, 156, 18, 0.3);
            margin-top: 15px;
        }

        .logos-warning-score {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }

        .logos-warning-score-label {
            font-size: var(--font-xs);
            color: var(--text-muted);
        }

        .logos-warning-score-value {
            font-size: var(--font-md);
            font-weight: 700;
            color: var(--warning);
        }

        .logos-warning-text {
            font-size: var(--font-sm);
            color: var(--text-secondary);
            line-height: 1.5;
            margin-bottom: 12px;
        }

        .logos-warning-positive {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            padding: 10px;
            background: rgba(46, 204, 113, 0.1);
            border-radius: 8px;
            margin-bottom: 12px;
        }

        .logos-warning-positive-icon {
            color: var(--success);
        }

        .logos-warning-positive-text {
            font-size: var(--font-sm);
            color: var(--text-secondary);
        }

        .logos-warning-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .logos-warning-list li {
            font-size: var(--font-sm);
            color: var(--text-secondary);
            padding: 4px 0 4px 20px;
            position: relative;
        }

        .logos-warning-list li::before {
            content: '•';
            position: absolute;
            left: 6px;
            color: var(--warning);
        }

        .logos-warning-quote {
            font-style: italic;
            font-size: var(--font-sm);
            color: var(--text-muted);
            padding: 10px;
            border-left: 2px solid var(--warning);
            margin-top: 12px;
        }

        /* Double Warning (Pathos uncertain + Logos low) */
        .double-warning {
            background: rgba(231, 76, 60, 0.08);
            border: 2px solid var(--danger);
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 20px;
            display: none;
        }

        .double-warning.active {
            display: block;
        }

        .double-warning-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }

        .double-warning-title {
            font-size: var(--font-sm);
            font-weight: 600;
            color: var(--danger);
        }

        .double-warning-item {
            padding: 10px;
            background: rgba(0,0,0,0.15);
            border-radius: 8px;
            margin-bottom: 10px;
        }

        .double-warning-item-title {
            font-size: var(--font-xs);
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 4px;
        }

        .double-warning-item-text {
            font-size: var(--font-xs);
            color: var(--text-secondary);
        }

        /* Pathos uncertain warning (less severe than blocker) */
        .pathos-uncertain {
            background: rgba(243, 156, 18, 0.08);
            border: 1px solid rgba(243, 156, 18, 0.3);
            border-radius: 8px;
            padding: 10px 12px;
            margin-bottom: 15px;
            display: none;
        }

        .pathos-uncertain.active {
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }

        .pathos-uncertain-icon {
            font-size: 1rem;
            flex-shrink: 0;
        }

        .pathos-uncertain-text {
            font-size: var(--font-xs);
            color: var(--text-secondary);
            line-height: 1.4;
        }

        /* Dimension Modifier Display */
        .modifier-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: var(--font-xs);
            font-weight: 500;
        }

        .modifier-badge.positive {
            background: rgba(46, 204, 113, 0.15);
            color: var(--success);
        }

        .modifier-badge.negative {
            background: rgba(231, 76, 60, 0.15);
            color: var(--danger);
        }

        .modifier-badge.neutral {
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-muted);
        }

        .modifier-summary {
            background: var(--bg-dark);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px;
            margin-bottom: 15px;
            display: none;
        }

        .modifier-summary.active {
            display: block;
        }

        .modifier-summary-title {
            font-size: var(--font-xs);
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }

        .modifier-summary-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 0;
            font-size: var(--font-sm);
            color: var(--text-secondary);
        }

        .modifier-summary-item .modifier-icon {
            width: 20px;
            text-align: center;
        }

        .category-modifier {
            font-size: var(--font-xs);
            margin-left: 6px;
        }

        .category-modifier.positive {
            color: var(--success);
        }

        .category-modifier.negative {
            color: var(--danger);
        }

        /* ========================================
           NEW: Side-by-Side Comparison Layout
           ======================================== */

        .comparison-container {
            max-width: 900px;
            margin: 0 auto;
            padding: 15px;
            padding-top: 100px; /* Adjusted for visitor info bar */
        }

        .comparison-grid {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 15px;
            margin-bottom: 20px;
        }

        /* Center Column for Tiage's Synthese Lightbulb Display */
        .center-column {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px 15px;
            background: var(--bg-card);
            border-radius: 16px;
            border: 1px solid var(--border);
        }

        /* Score Label */
        .score-label {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--text-primary);
            text-transform: uppercase;
            letter-spacing: 0.15em;
            margin-bottom: 10px;
            text-align: center;
        }

        /* Score Circle Display */
        .score-circle-display {
            position: relative;
            width: 100px;
            height: 100px;
            cursor: pointer;
            margin-bottom: 15px;
            transition: transform 0.2s ease;
        }

        .score-circle-display:hover {
            transform: scale(1.08);
        }

        .score-circle-display svg {
            width: 100%;
            height: 100%;
            transform: rotate(-90deg);
        }

        .score-circle-display .score-bg {
            fill: none;
            stroke: rgba(255,255,255,0.1);
            stroke-width: 8;
        }

        .score-circle-display .score-progress {
            fill: none;
            stroke-width: 8;
            stroke-linecap: round;
            transition: stroke-dashoffset 0.5s ease, stroke 0.3s ease;
        }

        .score-circle-value {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
            transition: color 0.3s ease;
        }

        /* Lightbulb Button */
        .lightbulb-button {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 10px 15px;
            cursor: pointer;
            transition: transform 0.2s ease;
            border-radius: 10px;
        }

        .lightbulb-button:hover {
            transform: scale(1.05);
            background: rgba(255,255,255,0.05);
        }

        .lightbulb-icon {
            font-size: 36px;
            line-height: 1;
        }

        .lightbulb-text {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Mobile versions */
        .mobile-score-circle-display {
            width: 80px;
            height: 80px;
            margin-bottom: 10px;
        }

        .mobile-score-circle-display .score-circle-value {
            font-size: 1.3rem;
        }

        .mobile-lightbulb-button .lightbulb-icon {
            font-size: 28px;
        }

        .mobile-lightbulb-button .lightbulb-text {
            font-size: 10px;
        }

        .comparison-column {
            background: var(--bg-card);
            border-radius: 16px;
            border: 1px solid var(--border);
            padding: 15px;
        }

        .comparison-column.ich-column {
            border-top: 3px solid var(--success);
        }

        .comparison-column.partner-column {
            border-top: 3px solid var(--accent);
        }

        .column-header {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            margin-bottom: 12px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border);
        }

        .column-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }

        .ich-column .column-icon {
            background: rgba(46, 204, 113, 0.2);
            color: var(--success);
        }

        .partner-column .column-icon {
            background: rgba(231, 76, 60, 0.2);
            color: var(--accent);
        }

        .column-title {
            font-size: var(--font-lg);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .ich-column .column-title {
            color: #2ecc71;
        }

        .partner-column .column-title {
            color: #e74c3c;
        }

        .select-with-info {
            display: flex;
            gap: 8px;
            align-items: center;
            margin-bottom: 12px;
        }

        .select-with-info .column-select {
            margin-bottom: 0;
        }

        /* Geschlechtsidentität Info im Header-Bereich */
        .header-geschlecht-info {
            font-size: 11px;
            color: var(--success);
            padding: 4px 8px;
            margin-bottom: 8px;
            text-align: right;
        }

        .header-geschlecht-info.missing {
            color: var(--warning, #f39c12);
        }

        /* Archetypen-Symbol-Grid */
        .archetype-symbols-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            padding: 12px;
            margin: 12px 0;
            background: var(--bg-dark);
            border-radius: 12px;
            border: 1px solid var(--border);
        }

        .archetype-symbol-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 8px 4px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            border: 2px solid transparent;
            background: rgba(255, 255, 255, 0.03);
        }

        .archetype-symbol-item:hover {
            background: rgba(255, 255, 255, 0.08);
            transform: scale(1.05);
        }

        .archetype-symbol-item.active {
            border-color: var(--primary);
            background: rgba(69, 123, 157, 0.2);
            box-shadow: 0 0 12px rgba(69, 123, 157, 0.3);
        }

        .archetype-symbol-icon {
            font-size: 24px;
            margin-bottom: 4px;
            transition: transform 0.2s ease;
        }

        .archetype-symbol-item:hover .archetype-symbol-icon {
            transform: scale(1.1);
        }

        .archetype-symbol-name {
            font-size: 9px;
            color: var(--text-muted);
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }

        .archetype-symbol-item.active .archetype-symbol-name {
            color: var(--text-primary);
            font-weight: 600;
        }

        /* Colors for each archetype symbol */
        .archetype-symbol-item[data-archetype="single"] .archetype-symbol-icon { color: #E63946; }
        .archetype-symbol-item[data-archetype="duo"] .archetype-symbol-icon { color: #E84393; }
        .archetype-symbol-item[data-archetype="duo_flex"] .archetype-symbol-icon { color: #FF6B6B; }
        .archetype-symbol-item[data-archetype="solopoly"] .archetype-symbol-icon { color: #2A9D8F; }
        .archetype-symbol-item[data-archetype="polyamor"] .archetype-symbol-icon { color: #F4A261; }
        .archetype-symbol-item[data-archetype="ra"] .archetype-symbol-icon { color: #9B5DE5; }
        .archetype-symbol-item[data-archetype="lat"] .archetype-symbol-icon { color: #00B4D8; }
        .archetype-symbol-item[data-archetype="aromantisch"] .archetype-symbol-icon { color: #A8DADC; }

        .archetype-symbol-item.active[data-archetype="single"] { border-color: #E63946; background: rgba(230, 57, 70, 0.2); }
        .archetype-symbol-item.active[data-archetype="duo"] { border-color: #E84393; background: rgba(232, 67, 147, 0.2); }
        .archetype-symbol-item.active[data-archetype="duo_flex"] { border-color: #FF6B6B; background: rgba(255, 107, 107, 0.2); }
        .archetype-symbol-item.active[data-archetype="solopoly"] { border-color: #2A9D8F; background: rgba(42, 157, 143, 0.2); }
        .archetype-symbol-item.active[data-archetype="polyamor"] { border-color: #F4A261; background: rgba(244, 162, 97, 0.2); }
        .archetype-symbol-item.active[data-archetype="ra"] { border-color: #9B5DE5; background: rgba(155, 93, 229, 0.2); }
        .archetype-symbol-item.active[data-archetype="lat"] { border-color: #00B4D8; background: rgba(0, 180, 216, 0.2); }
        .archetype-symbol-item.active[data-archetype="aromantisch"] { border-color: #A8DADC; background: rgba(168, 218, 220, 0.2); }

        .archetype-nav-btn {
            background: var(--bg-dark);
            border: 1px solid var(--border);
            color: var(--text-muted);
            padding: 6px 10px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.2s ease;
        }

        .archetype-nav-btn:hover {
            border-color: var(--primary);
            box-shadow: 0 0 8px rgba(69, 123, 157, 0.3);
        }

        .archetype-nav-btn:active {
            transform: scale(0.95);
        }

        .archetype-info-btn {
            padding: 8px 12px;
            border-radius: 6px;
            background: var(--bg-dark);
            border: 1px solid var(--border);
            color: var(--text-muted);
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            letter-spacing: 0.5px;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

        .archetype-info-btn:hover {
            border-color: var(--primary);
            box-shadow: 0 0 8px rgba(69, 123, 157, 0.3);
        }

        .archetype-attributes-btn {
            padding: 8px 12px;
            border-radius: 6px;
            background: linear-gradient(135deg, #9b59b6, #8e44ad);
            border: 1px solid #8e44ad;
            color: white;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            letter-spacing: 0.5px;
            transition: all 0.2s ease;
            flex-shrink: 0;
            gap: 4px;
        }

        .archetype-attributes-btn:hover {
            background: linear-gradient(135deg, #a569c9, #9b59b6);
            border-color: #a569c9;
            box-shadow: 0 0 12px rgba(155, 89, 182, 0.5);
            transform: translateY(-1px);
        }

        .archetype-attributes-btn:active {
            transform: translateY(0);
        }

        .column-select {
            width: auto;
            min-width: 100px;
            max-width: 140px;
            padding: 10px 12px;
            border-radius: 10px;
            border: 1px solid var(--border);
            background: var(--bg-dark);
            color: var(--text-primary);
            font-size: var(--font-sm);
            margin-bottom: 12px;
            cursor: pointer;
        }

        .column-select:focus {
            outline: none;
            border-color: var(--primary);
        }

        .column-dimensions {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .compact-dimension {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .compact-dimension-label {
            font-size: 11px;
            color: var(--warning);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 600;
        }

        .compact-options {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }

        /* Klickbarer Geschlechtsidentität-Link mit Hover-Effekt */
        .geschlecht-info-link {
            cursor: pointer;
            text-decoration: underline;
            text-decoration-style: dotted;
            transition: all 0.2s ease;
            padding: 2px 4px;
            border-radius: 4px;
            margin: -2px -4px;
        }

        .geschlecht-info-link:hover,
        .dominanz-info-link:hover,
        .orientierung-info-link:hover,
        .gfk-info-link:hover {
            color: var(--primary);
            background: rgba(69, 123, 157, 0.15);
            text-decoration-color: var(--primary);
        }

        /* Spezifische Link-Klassen für Dimensionen (erben Basis-Styling) */
        .dominanz-info-link,
        .orientierung-info-link,
        .gfk-info-link {
            cursor: pointer;
            text-decoration: underline;
            text-decoration-style: dotted;
            transition: all 0.2s ease;
            padding: 2px 4px;
            border-radius: 4px;
            margin: -2px -4px;
        }

        /* Geschlechtsidentität: Grid-Layout für 9 Optionen */
        .geschlecht-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4px;
        }

        .compact-option {
            padding: 4px 8px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background: var(--bg-dark);
            color: var(--text-secondary);
            font-size: 11px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .compact-option:hover {
            border-color: var(--primary);
            color: var(--text-primary);
        }

        .compact-radio:checked + .compact-option {
            background: var(--primary);
            border-color: var(--primary);
            color: white;
        }

        .compact-radio {
            display: none;
        }

        /* Geschlechts-Button mit Indikatoren (I = Identität/Primär, G = Sekundär) */
        .geschlecht-btn {
            position: relative;
            padding: 4px 8px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background: var(--bg-dark);
            color: var(--text-secondary);
            font-size: 11px;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: center;
        }

        .geschlecht-btn:hover {
            border-color: var(--primary);
            color: var(--text-primary);
        }

        .geschlecht-btn.primary-selected {
            background: var(--primary);
            border-color: var(--primary);
            color: white;
        }

        .geschlecht-btn.secondary-selected {
            background: rgba(234, 179, 8, 0.25);
            border-color: rgba(234, 179, 8, 0.6);
            color: var(--text-primary);
        }

        /* Kleine Kreis-Indikatoren für Primary (P) und Secondary (S) */
        .geschlecht-indicator {
            position: absolute;
            top: -4px;
            right: -4px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 9px;
            font-weight: 700;
            line-height: 1;
        }

        .geschlecht-indicator.indicator-primary {
            background: var(--primary);
            color: white;
            border: 1px solid rgba(255,255,255,0.3);
        }

        .geschlecht-indicator.indicator-secondary {
            background: #eab308;
            color: #1a1a2e;
            border: 1px solid rgba(0,0,0,0.2);
        }

        /* Dominanz: Grid-Layout für 4 Optionen (2x2) */
        .dominanz-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 4px;
        }

        .dominanz-btn {
            position: relative;
            padding: 4px 8px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background: var(--bg-dark);
            color: var(--text-secondary);
            font-size: 11px;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: center;
        }

        .dominanz-btn:hover {
            border-color: var(--primary);
            color: var(--text-primary);
        }

        .dominanz-btn.primary-selected {
            background: var(--primary);
            border-color: var(--primary);
            color: white;
        }

        .dominanz-btn.secondary-selected {
            background: rgba(234, 179, 8, 0.25);
            border-color: rgba(234, 179, 8, 0.6);
            color: var(--text-primary);
        }

        /* Orientierung: Grid-Layout für 3 Optionen (1x3) */
        .orientierung-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4px;
        }

        .orientierung-btn {
            position: relative;
            padding: 4px 8px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background: var(--bg-dark);
            color: var(--text-secondary);
            font-size: 11px;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: center;
        }

        .orientierung-btn:hover {
            border-color: var(--primary);
            color: var(--text-primary);
        }

        .orientierung-btn.primary-selected {
            background: var(--primary);
            border-color: var(--primary);
            color: white;
        }

        .orientierung-btn.secondary-selected {
            background: rgba(234, 179, 8, 0.25);
            border-color: rgba(234, 179, 8, 0.6);
            color: var(--text-primary);
        }

        /* GFK (Gewaltfreie Kommunikation) Buttons */
        .gfk-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 6px;
        }

        .gfk-btn {
            padding: 6px 12px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: rgba(30, 30, 35, 0.9);
            color: var(--text-muted);
            cursor: help;
            transition: all 0.2s ease;
            font-size: 12px;
            position: relative;
        }

        .gfk-btn:hover {
            background: rgba(139, 92, 246, 0.1);
            border-color: rgba(139, 92, 246, 0.3);
        }

        .gfk-btn.selected,
        .gfk-btn.primary-selected {
            background: rgba(139, 92, 246, 0.6);
            border-color: #8B5CF6;
            color: white;
            font-weight: 600;
            box-shadow: 0 0 8px rgba(139, 92, 246, 0.5);
        }

        /* GFK Bedürfnis-Anzeige */
        .gfk-beduerfnis-display {
            background: rgba(30, 30, 35, 0.8);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px;
            margin: 16px 0;
        }

        .gfk-matching-header {
            text-align: center;
            margin-bottom: 16px;
        }

        .gfk-score-display {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

        .gfk-score {
            font-size: 2rem;
            font-weight: 700;
        }

        .gfk-level-label {
            font-size: 0.85rem;
            color: var(--text-muted);
        }

        .gfk-section {
            margin-top: 12px;
        }

        .gfk-section-title {
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .gfk-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .gfk-tag {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .gfk-tag-match {
            background: rgba(34, 197, 94, 0.2);
            border: 1px solid rgba(34, 197, 94, 0.4);
            color: #22c55e;
        }

        .gfk-tag-conflict {
            background: rgba(239, 68, 68, 0.15);
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: #f87171;
            cursor: help;
        }

        /* Indikatoren für Dominanz/Orientierung (gleiche wie Geschlecht) */
        .dominanz-btn .geschlecht-indicator,
        .orientierung-btn .geschlecht-indicator {
            position: absolute;
            top: -4px;
            right: -4px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 9px;
            font-weight: 700;
            line-height: 1;
        }

        /* Geschlecht Legend Hover Highlights */
        .geschlecht-legend .legend-p,
        .geschlecht-legend .legend-s {
            transition: all 0.2s ease;
        }

        .geschlecht-legend.highlight-p .legend-p {
            color: var(--primary);
            font-weight: 700;
            text-shadow: 0 0 8px var(--primary);
        }

        .geschlecht-legend.highlight-s .legend-s {
            color: #eab308;
            font-weight: 700;
            text-shadow: 0 0 8px #eab308;
        }

        /* Compact dimension blinking for unselected */
        .compact-dimension.needs-selection .compact-option {
            animation: needsAttention 1.5s ease-in-out infinite;
        }

        .compact-dimension.needs-selection .compact-dimension-label {
            color: var(--warning);
        }

        /* Dominanz/Orientierung Multi-Select blinking for unselected */
        .compact-dimension.needs-selection .dominanz-option-row {
            animation: needsAttention 1.5s ease-in-out infinite;
        }

        /* Dominanz Multi-Select */
        .dominanz-multi-select {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .dominanz-option-row {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            background: var(--bg-dark);
            border-radius: 8px;
            border: 1px solid var(--border);
            transition: all 0.2s;
        }

        /* Gelebt state: red background and border - when Gelebt button is active */
        .dominanz-option-row:has(.status-toggle-btn.active-gelebt) {
            background: rgba(231, 76, 60, 0.15);
            border-color: #e74c3c;
        }

        /* Interessiert state: light yellow background and border - when Interessiert button is active */
        .dominanz-option-row:has(.status-toggle-btn.active-interessiert) {
            background: rgba(234, 179, 8, 0.1);
            border-color: rgba(234, 179, 8, 0.4);
        }

        .dominanz-label {
            flex: 1;
            font-size: var(--font-sm);
            color: var(--text-primary);
            cursor: pointer;
        }

        .dominanz-status-select {
            padding: 4px 8px;
            font-size: 11px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text-primary);
            cursor: pointer;
        }

        .dominanz-status-select option {
            background: var(--bg-card);
        }

        /* Collapsible multi-select sections */
        .compact-dimension.collapsible-dimension .compact-dimension-label {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .compact-dimension.collapsible-dimension .collapse-toggle {
            font-size: 10px;
            color: var(--text-muted);
            transition: transform 0.3s ease;
            margin-left: 8px;
        }

        .compact-dimension.collapsible-dimension.collapsed .collapse-toggle {
            transform: rotate(-90deg);
        }

        .compact-dimension.collapsible-dimension .dominanz-multi-select {
            max-height: 500px;
            overflow: hidden;
            transition: max-height 0.3s ease, opacity 0.3s ease;
            opacity: 1;
        }

        .compact-dimension.collapsible-dimension.collapsed .dominanz-multi-select {
            max-height: 0;
            opacity: 0;
        }

        /* Geschlechtsidentität collapsible styles */
        .compact-dimension.collapsible-dimension .geschlecht-grid {
            max-height: 500px;
            overflow: hidden;
            transition: max-height 0.3s ease, opacity 0.3s ease;
            opacity: 1;
        }

        .compact-dimension.collapsible-dimension.collapsed .geschlecht-grid {
            max-height: 0;
            opacity: 0;
        }

        /* Dominanz collapsible styles */
        .compact-dimension.collapsible-dimension .dominanz-grid {
            max-height: 500px;
            overflow: hidden;
            transition: max-height 0.3s ease, opacity 0.3s ease;
            opacity: 1;
        }

        .compact-dimension.collapsible-dimension.collapsed .dominanz-grid {
            max-height: 0;
            opacity: 0;
        }

        /* Orientierung collapsible styles */
        .compact-dimension.collapsible-dimension .orientierung-grid {
            max-height: 500px;
            overflow: hidden;
            transition: max-height 0.3s ease, opacity 0.3s ease;
            opacity: 1;
        }

        .compact-dimension.collapsible-dimension.collapsed .orientierung-grid {
            max-height: 0;
            opacity: 0;
        }

        .compact-dimension.collapsible-dimension .collapsed-summary {
            display: none;
            font-size: 11px;
            color: var(--success);
            margin-top: 4px;
            padding: 4px 8px;
            background: rgba(46, 204, 113, 0.1);
            border-radius: 6px;
        }

        .compact-dimension.collapsible-dimension.collapsed .collapsed-summary {
            display: block;
        }

        /* Hide grid summary even when selection exists - keep only 'fehlt' messages */
        .compact-dimension.collapsible-dimension .collapsed-summary.has-selection {
            display: none;
        }

        /* Blinking header when collapsed AND incomplete selection */
        @keyframes needsAttentionHeader {
            0%, 100% {
                opacity: 1;
                text-shadow: 0 0 0 transparent;
            }
            50% {
                opacity: 0.6;
                text-shadow: 0 0 8px rgba(243, 156, 18, 0.5);
            }
        }

        .compact-dimension.collapsible-dimension.collapsed.needs-selection .compact-dimension-label {
            animation: needsAttentionHeader 1.5s ease-in-out infinite;
            color: var(--warning);
        }

        .fold-unfold-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: var(--warning);
            border: 1px solid var(--warning);
            border-radius: 8px;
            color: #1a1a2e;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .fold-unfold-btn:hover {
            background: #d68910;
            border-color: #d68910;
            color: #1a1a2e;
        }

        .fold-unfold-icon {
            font-size: 10px;
            transition: transform 0.3s ease;
        }

        .fold-unfold-btn.collapsed-state .fold-unfold-icon {
            transform: rotate(-90deg);
        }

        /* Desktop Expandable Factor Buttons */
        .desktop-factor-item {
            background: rgba(255,255,255,0.03);
            border-radius: 8px;
            transition: background 0.2s;
            overflow: hidden;
        }

        .desktop-factor-item:hover {
            background: rgba(255,255,255,0.08);
        }

        .desktop-factor-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 8px;
            cursor: pointer;
        }

        .desktop-factor-header .factor-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .desktop-factor-header .factor-title {
            font-size: var(--font-sm);
            color: var(--text-primary);
        }

        .desktop-factor-header .factor-subtitle {
            font-size: var(--font-xs);
            color: var(--text-muted);
            font-style: italic;
        }

        .desktop-factor-header .factor-score {
            font-size: var(--font-base);
            font-weight: 700;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .desktop-factor-header .factor-toggle {
            font-size: 10px;
            color: var(--text-muted);
            transition: transform 0.3s ease;
        }

        .desktop-factor-item.collapsed .factor-toggle {
            transform: rotate(-90deg);
        }

        .desktop-factor-content {
            max-height: 500px;
            overflow: hidden;
            transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
            opacity: 1;
            padding: 0 12px 12px 12px;
            border-top: 1px solid var(--border);
            margin-top: 4px;
        }

        .desktop-factor-item.collapsed .desktop-factor-content {
            max-height: 0;
            opacity: 0;
            padding: 0 12px;
            border-top: none;
            margin-top: 0;
        }

        .desktop-factor-content .factor-explanation {
            font-size: var(--font-sm);
            color: var(--text-secondary);
            margin-bottom: 12px;
            line-height: 1.5;
            padding-top: 8px;
        }

        .desktop-factor-content .factor-meaning-title {
            font-size: var(--font-sm);
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .desktop-factor-content .factor-meaning-list {
            list-style: none;
            padding: 0;
            margin: 0;
            font-size: var(--font-xs);
        }

        .desktop-factor-content .factor-meaning-list li {
            color: var(--text-secondary);
            padding: 6px 0;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            line-height: 1.4;
        }

        .desktop-factor-content .factor-meaning-list li:last-child {
            border-bottom: none;

        /* Desktop Selection Info Message */
        .selection-info-message {
            color: #ff4444;
            font-size: 14px;
            font-weight: 500;
            text-align: center;
            padding: 8px 16px;
            margin: 0;
            display: none;
        }

        .selection-info-message.visible {
            display: block;
        }

        /* Only show on desktop */
        @media (max-width: 600px) {
            .selection-info-message {
                display: none !important;
            }
        }

        /* Toggle Buttons for Status (Gelebt/Interessiert) */
        .status-toggle-group {
            display: flex;
            gap: 4px;
            margin-left: auto;
        }

        .status-toggle-btn {
            padding: 4px 10px;
            font-size: 10px;
            border: 1px solid var(--border);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
            background: var(--bg-dark);
            color: var(--text-muted);
        }

        .status-toggle-btn:hover {
            border-color: var(--primary);
        }

        .status-toggle-btn.active-gelebt {
            background: #2ecc71 !important;
            border-color: #2ecc71 !important;
            color: white !important;
            box-shadow: 0 0 8px rgba(46, 204, 113, 0.5);
            font-weight: 600;
        }

        .status-toggle-btn.active-interessiert {
            background: #f39c12 !important;
            border-color: #f39c12 !important;
            color: #1a1a2e !important;
            box-shadow: 0 0 8px rgba(243, 156, 18, 0.5);
            font-weight: 600;
        }

        @keyframes yellowPulse {
            0%, 100% {
                box-shadow: 0 0 5px rgba(234, 179, 8, 0.4);
                opacity: 1;
            }
            50% {
                box-shadow: 0 0 15px rgba(234, 179, 8, 0.7);
                opacity: 0.85;
            }
        }

        /* Disable status toggle buttons when any popup overlay is active */
        body:has(.dimension-tooltip-overlay.active) .status-toggle-btn,
        body:has(.status-popup-overlay.active) .status-toggle-btn {
            pointer-events: none;
            cursor: default;
        }

        /* Secondary tendency button (only "interessiert" available when a Gelebt exists) */
        .secondary-interessiert-btn {
            display: none;
            padding: 4px 10px;
            font-size: 10px;
            border: 1px solid #eab308;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
            background: transparent;
            color: #eab308;
            margin-left: auto;
        }

        .secondary-interessiert-btn:hover {
            background: rgba(234, 179, 8, 0.15);
        }

        .secondary-interessiert-btn.active {
            background: rgba(234, 179, 8, 0.25);
            animation: yellowPulse 1.5s ease-in-out infinite;
        }


        .dominanz-option-row.secondary-mode .dominanz-label {
            opacity: 0.7;
        }

        .dominanz-option-row.secondary-mode:has(.secondary-interessiert-btn.active) {
            background: rgba(234, 179, 8, 0.1);
            border-color: rgba(234, 179, 8, 0.4);
        }

        /* Status Selection Popup */
        .status-popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: all 0.2s ease;
        }

        .status-popup-overlay.active {
            display: flex;
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .status-popup {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 24px;
            max-width: 360px;
            width: 90%;
            transform: scale(0.9);
            transition: transform 0.2s ease;
        }

        .status-popup-overlay.active .status-popup {
            transform: scale(1);
        }

        .status-popup-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
            text-align: center;
        }

        .status-popup-subtitle {
            font-size: 12px;
            color: var(--text-muted);
            margin-bottom: 20px;
            text-align: center;
        }

        .status-popup-options {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .status-popup-option {
            display: flex;
            flex-direction: column;
            padding: 16px;
            border: 2px solid var(--border);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            background: var(--bg-dark);
        }

        .status-popup-option:hover {
            border-color: #6c757d;
            background: rgba(108, 117, 125, 0.1);
        }

        .status-popup-option.gelebt-option:hover {
            border-color: #e74c3c;
            background: rgba(231, 76, 60, 0.1);
        }

        .status-popup-option.interessiert-option:hover {
            border-color: #eab308;
            background: rgba(234, 179, 8, 0.1);
        }

        .status-popup-option-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 6px;
        }

        .status-popup-option.gelebt-option .status-popup-option-title {
            color: #e74c3c;
        }

        .status-popup-option.interessiert-option .status-popup-option-title {
            color: #eab308;
        }

        .status-popup-option-desc {
            font-size: 12px;
            color: var(--text-secondary);
            line-height: 1.4;
        }

        .status-popup-cancel {
            margin-top: 16px;
            text-align: center;
        }

        .status-popup-cancel-btn {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-muted);
            padding: 8px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.2s;
        }

        .status-popup-cancel-btn:hover {
            border-color: var(--text-secondary);
            color: var(--text-secondary);
        }

        /* Result Bar */
        .result-bar {
            background: var(--bg-card);
            border-radius: 16px;
            border: 1px solid var(--border);
            padding: 15px 20px;
            margin-bottom: 15px;
        }

        .result-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .result-title {
            font-size: var(--font-sm);
            color: var(--text-secondary);
        }

        .result-title .type-name {
            color: var(--text-primary);
            font-weight: 600;
        }

        .result-nav-btn {
            background: transparent;
            border: none;
            color: var(--text-muted);
            padding: 2px 6px;
            cursor: pointer;
            font-size: 10px;
            opacity: 0.6;
            transition: all 0.2s ease;
        }

        .result-nav-btn:hover {
            opacity: 1;
            color: var(--primary);
        }

        .result-nav-btn:active {
            transform: scale(0.9);
        }

        .result-percentage {
            font-size: 1.5rem;
            font-weight: 700;
        }

        .result-percentage.excellent { color: var(--success); }
        .result-percentage.good { color: var(--primary); }
        .result-percentage.moderate { color: var(--warning); }
        .result-percentage.low { color: var(--danger); }

        .result-progress {
            height: 8px;
            background: var(--bg-dark);
            border-radius: 4px;
            overflow: hidden;
        }

        .result-progress-fill {
            height: 100%;
            border-radius: 4px;
            transition: width 0.5s ease, background 0.3s ease;
        }

        /* Desktop Score Circle */
        .desktop-score-circle-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 20px 0;
        }

        .desktop-score-circle {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            font-weight: 700;
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            color: white;
            box-shadow: 0 8px 30px rgba(69, 123, 157, 0.4);
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .desktop-score-circle:hover {
            transform: scale(1.05);
            box-shadow: 0 12px 40px rgba(69, 123, 157, 0.5);
        }

        .desktop-score-label {
            font-size: var(--font-sm);
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 8px;
        }

        /* Score Cycle für Synthese Modal */
        .synthese-score-cycle {
            position: relative;
            width: 100px;
            height: 100px;
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .synthese-score-cycle:hover {
            transform: scale(1.08);
        }

        .synthese-score-cycle svg {
            width: 100%;
            height: 100%;
            transform: rotate(-90deg);
        }

        .synthese-score-cycle .score-bg {
            fill: none;
            stroke: rgba(255,255,255,0.1);
            stroke-width: 8;
        }

        .synthese-score-cycle .score-progress {
            fill: none;
            stroke-width: 8;
            stroke-linecap: round;
            transition: stroke-dashoffset 0.5s ease, stroke 0.3s ease;
        }

        .synthese-score-cycle .score-value {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        .synthese-score-cycle .score-label {
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 10px;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

        /* Result bar new layout with circle */
        .result-bar-with-circle {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 15px;
        }

        .result-types-column {
            flex: 1;
        }

        .result-circle-column {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Warnings in new layout */
        .warning-box {
            padding: 12px 15px;
            border-radius: 10px;
            margin-bottom: 10px;
            font-size: var(--font-sm);
        }

        .warning-box.pathos-warning {
            background: rgba(231, 76, 60, 0.15);
            border: 1px solid var(--danger);
            color: var(--danger);
        }

        .warning-box.logos-warning {
            background: rgba(243, 156, 18, 0.15);
            border: 1px solid var(--warning);
            color: var(--warning);
        }

        .warning-box.incomplete-warning {
            background: rgba(69, 123, 157, 0.15);
            border: 1px solid var(--primary);
            color: var(--text-secondary);
        }

        /* Mobile Responsive */
        @media (max-width: 600px) {
            .comparison-grid {
                grid-template-columns: 1fr 1fr;
                gap: 8px;
            }

            .comparison-column {
                padding: 10px;
            }

            .column-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 4px;
            }

            .column-icon {
                width: 24px;
                height: 24px;
                font-size: 12px;
            }

            .column-title {
                font-size: 12px;
            }

            .column-select {
                padding: 8px 10px;
                font-size: 13px;
            }

            .compact-option {
                padding: 10px 14px;
                font-size: 15px;
            }

            .compact-dimension-label {
                font-size: 14px;
                margin-bottom: 6px;
            }

            .result-bar {
                padding: 12px 15px;
            }

            .result-percentage {
                font-size: 1.2rem;
            }
        }


        /* Desktop: Keep single-page layout, hide mobile */
        @media (min-width: 769px) {
            .mobile-multipage {
                display: none !important;
            }

            .comparison-container.desktop-mode {
                display: block !important;
            }

            .page-indicator {
                display: none !important;
            }
        }

        /* Validation Warning Animations */
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translate(-50%, -20px);
            }
            to {
                opacity: 1;
                transform: translate(-50%, 0);
            }
        }

        @keyframes slideUp {
            from {
                opacity: 1;
                transform: translate(-50%, 0);
            }
            to {
                opacity: 0;
                transform: translate(-50%, -20px);
            }
        }

        /* Footer / Impressum Styles */
        .app-footer {
            text-align: center;
            padding: 20px 15px;
            margin-top: 40px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 12px;
            color: rgba(255, 255, 255, 0.5);
        }
        .app-footer a {
            color: #eab308;
            text-decoration: none;
            margin: 0 10px;
        }
        .app-footer a:hover {
            color: #facc15;
            text-decoration: underline;
        }
        .app-footer span {
            color: #eab308;
        }
        /* Footer Documentation Links */
        .app-footer ul a {
            color: #e57373;
            margin: 0;
            transition: color 0.2s ease;
        }
        .app-footer ul a:hover {
            color: #ef9a9a;
            text-decoration: underline;
        }
        .app-footer h4 {
            color: #fff;
        }
        .impressum-modal {
            display: none !important;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 10002;
            justify-content: center;
            align-items: center;
        }
        .impressum-modal.active {
            display: flex !important;
        }
        .impressum-content {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            border-radius: 16px;
            padding: 30px;
            max-width: 400px;
            width: 90%;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .impressum-content h3 {
            margin: 0 0 20px 0;
            color: #fff;
            font-size: 20px;
            text-align: center;
        }
        .impressum-content p {
            margin: 10px 0;
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            text-align: center;
        }
        .impressum-content a {
            color: #eab308;
        }

        /* Print Styles - Modal beim Drucken ausblenden */
        @media print {
            .impressum-modal,
            .impressum-content {
                display: none !important;
            }
        }

        /* Pathos/Logos Sticky Toggle Buttons - nur auf Mobile sichtbar */
        #pathosLogosStickyToggle {
            transition: opacity 0.3s ease;
            display: none; /* Standardmäßig versteckt auf Desktop */
        }
        #pathosLogosStickyToggle button:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 16px rgba(0,0,0,0.5);
        }
        /* Nur auf Mobile anzeigen */
        @media (max-width: 768px) {
            #pathosLogosStickyToggle {
                display: flex !important;
                left: auto !important;
                right: 10px !important;
            }
        }
        @media (max-width: 480px) {
            #pathosLogosStickyToggle {
                top: auto !important;
                bottom: 20px !important;
                left: auto !important;
                right: 15px !important;
                transform: none !important;
                flex-direction: row !important;
            }
            #pathosLogosStickyToggle button {
                padding: 10px 12px !important;
                font-size: 14px !important;
            }
        }

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* PROFILE REVIEW MODAL - Styles für Profil-Attribut-Überprüfung */
/* ═══════════════════════════════════════════════════════════════════════════════ */

.profile-review-modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
}

.profile-review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: 16px 16px 0 0;
}

.profile-review-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-review-badge {
    font-size: 12px;
    padding: 4px 12px;
    background: rgba(69, 123, 157, 0.2);
    color: var(--primary);
    border-radius: 12px;
    font-weight: 500;
    border: 1px solid rgba(69, 123, 157, 0.3);
}

/* Search Bar */
.profile-review-search {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-review-search input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg-dark);
    color: var(--text-primary);
    transition: border-color 0.2s;
}

.profile-review-search input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(69, 123, 157, 0.2);
}

.profile-review-search input::placeholder {
    color: var(--text-muted);
}

.profile-review-search-icon {
    font-size: 18px;
    color: var(--text-muted);
}

/* Body */
.profile-review-body {
    background: var(--bg-dark);
    padding: 16px;
}

/* Category - Hilfe-Modal Style */
.profile-review-category {
    margin-bottom: 20px;
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid var(--border);
}

.profile-review-category-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.profile-review-category-icon {
    font-size: 14px;
}

/* Toggle Button Grid - Card Style - Einzelne Zeilen statt Grid */
.profile-review-checkbox-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

/* Toggle Button - Card Row Style */
.profile-review-toggle-btn {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 12px 14px !important;
    border-radius: 6px !important;
    border: none !important;
    border-left: 3px solid #22c55e !important;
    outline: none !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--text-primary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: left !important;
    gap: 8px !important;
}

.profile-review-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-left-color: #4ade80 !important;
}

.profile-review-toggle-btn.active {
    background: rgba(34, 197, 94, 0.1) !important;
    border-left-color: #22c55e !important;
    color: var(--text-primary) !important;
    box-shadow: none;
}

.profile-review-toggle-btn.active::after {
    content: '✓';
    color: #22c55e;
    font-weight: 700;
    font-size: 14px;
}

/* Info Toggle Button - uses triple-btn base styling with size adjustments for header */
.profile-review-info-toggle {
    padding: 4px 10px !important;
    font-size: 11px !important;
    flex-shrink: 0;
    margin-left: auto;
}

.profile-review-info-toggle.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(69, 123, 157, 0.25);
}

/* Toggle-Button Text-Label Container */
.profile-review-toggle-btn .toggle-label {
    flex: 1;
}

/* Unified Card Style for all attributes */
.profile-review-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 6px;
    border-left: 3px solid var(--primary);
}

/* Profile Review uses compact-dimension-label from main page with gold color */
.profile-review-card .compact-dimension-label {
    color: #eab308;
    margin-bottom: 10px;
}

/* ============================================
 * COMPONENT: Dimension Hint
 * PURPOSE: Erklärender Text neben Attribut-Titeln
 * USAGE: <span class="dimension-hint">(wichtig ?)</span>
 * COLOR: Gold (#eab308)
 * SCOPE: Allgemein verwendbar für alle Dimensionen/Attribute
 * DO NOT CONFUSE WITH: .geschlecht-legend (nur für Geschlecht P/S)
 * ============================================ */
.dimension-hint {
    color: #eab308;
    font-size: 10px;
    font-weight: 500;
    text-decoration: none;
    cursor: default;
}

.profile-review-card-title {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
    flex: 1;
}

/* Toggle Buttons (2er) für Egal/Wichtig */
.profile-review-toggle-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.profile-review-toggle-option {
    padding: 8px 6px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    outline: none;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.profile-review-toggle-option:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

.profile-review-toggle-option.active {
    background: #22c55e;
    border-color: #22c55e;
    color: white;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.25);
}

/* Gewichtungs-Category spezielle Styles */
.profile-review-category-gewichtung {
    background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(139,92,246,0.05));
    border: 1px solid rgba(139,92,246,0.3);
}

.profile-review-category-header-gewichtung {
    color: #8B5CF6;
}

.profile-review-card-gewichtung {
    border-left-color: #8B5CF6;
}

/* ============================================
   GEWICHTUNG CARD STYLES
   ============================================ */

.gewichtung-card {
    border-left-color: #10B981 !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gewichtung-card:hover {
    background: rgba(255, 255, 255, 0.05);
}

.gewichtung-card-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
}

.gewichtung-card-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
    flex-shrink: 0;
}

.gewichtung-card-input-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px;
    flex-shrink: 0;
}

.gewichtung-card .gewichtung-input,
input.gewichtung-input {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    padding: 5px 4px !important;
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
    border-radius: 4px !important;
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10B981 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
    outline: none !important;
    transition: all 0.2s ease;
    box-sizing: border-box !important;
}

.gewichtung-card .gewichtung-input:focus,
input.gewichtung-input:focus {
    border-color: #10B981 !important;
    background: rgba(16, 185, 129, 0.2) !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25) !important;
}

.gewichtung-percent {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

.gewichtung-lock-indicator {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* UNLOCKED = Grün (default) */
.gewichtung-card:not(.locked):not(.readonly) .gewichtung-lock-indicator::before {
    content: "🟢";
}

/* LOCKED = Rot */
.gewichtung-card.locked {
    border-left-color: #EF4444 !important;
    background: rgba(239, 68, 68, 0.08);
}

.gewichtung-card.locked .gewichtung-input {
    border-color: rgba(239, 68, 68, 0.5) !important;
    background: rgba(239, 68, 68, 0.1) !important;
    color: #EF4444 !important;
    pointer-events: none !important;
}

.gewichtung-card.locked .gewichtung-card-label {
    color: #EF4444;
}

.gewichtung-card.locked .gewichtung-lock-indicator::before {
    content: "🔴";
}

/* READONLY = Gelb (letzter freier) */
.gewichtung-card.readonly {
    border-left-color: #F59E0B !important;
    background: rgba(245, 158, 11, 0.05);
}

.gewichtung-card.readonly .gewichtung-input {
    border-color: rgba(245, 158, 11, 0.5) !important;
    background: rgba(245, 158, 11, 0.1) !important;
    color: #F59E0B !important;
    pointer-events: none !important;
}

.gewichtung-card.readonly .gewichtung-card-label {
    color: #F59E0B;
}

.gewichtung-card.readonly .gewichtung-lock-indicator::before {
    content: "🟡";
}

/* Footer Bar */
.gewichtung-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    margin-top: 4px;
    background: rgba(139, 92, 246, 0.05);
    border-radius: 6px;
}

.gewichtung-hint {
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.8;
    font-style: italic;
}

.gewichtung-summe-text {
    font-size: 12px;
    color: var(--text-muted);
}

.gewichtung-summe-value {
    font-weight: 600;
    color: #10B981;
}

.gewichtung-summe-value.error {
    color: #EF4444;
}

/* Shake animation for lock limit feedback */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.gewichtung-reset-btn {
    padding: 4px 12px;
    font-size: 11px;
    background: rgba(139,92,246,0.1);
    border: 1px solid rgba(139,92,246,0.3);
    border-radius: 4px;
    color: #8B5CF6;
    cursor: pointer;
}

.gewichtung-reset-btn:hover {
    background: rgba(139,92,246,0.2);
}

/* Legacy support - redirect old class to new */
.profile-review-triple-attribute {
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
    margin-bottom: 6px;
    border-left: 3px solid var(--primary) !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

.profile-review-triple-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.profile-review-triple-title {
    font-size: 13px;
    color: #FFD700;
    font-weight: 500;
    flex: 1;
}

/* 3er Button Gruppe */
.profile-review-triple-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.profile-review-triple-btn {
    padding: 8px 6px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    outline: none !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.profile-review-triple-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--text-primary);
}

.profile-review-triple-btn.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(69, 123, 157, 0.25);
}

/* Actions Footer - Grid Style */
.profile-review-actions {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 16px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    border-radius: 0 0 16px 16px;
}

.profile-review-btn {
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.profile-review-btn-secondary {
    background: var(--bg-dark);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.profile-review-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--text-muted);
}

.profile-review-btn-primary {
    background: linear-gradient(135deg, var(--primary), #5a9cbf);
    color: white;
    box-shadow: 0 2px 8px rgba(69, 123, 157, 0.3);
}

.profile-review-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(69, 123, 157, 0.4);
}

.profile-review-changes-badge {
    background: #e74c3c;
    color: white;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    margin-left: 4px;
}

/* Info Sections */
.profile-review-info-section {
    margin-bottom: 24px;
}

.profile-review-info-section:last-child {
    margin-bottom: 0;
}

.profile-review-info-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.profile-review-info-section-content {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-primary);
}

.profile-review-info-section-content i {
    color: var(--text-muted);
    font-size: 13px;
}

/* Responsive */
@media (max-width: 640px) {
    .profile-review-modal {
        max-width: 95vw !important;
        max-height: 95vh !important;
    }

    .profile-review-header-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .profile-review-badge {
        font-size: 10px;
        padding: 2px 8px;
    }
}