/* Keep single file! Actually better for loading purposes */
    :root {
        --primary-color: #0b3c5d;
        --mid-color: #145374;
        --secondary-color: #1f6f96;
        --accent-color: #1f6f96;
        --accent-highlight: #f59e0b;
        --light-bg: #f0f6fa;
        --card-border: #d0e4f2;
        --text-color: #333;
        --light-text: #fff;
        --bg-color: #f9f9f9;
        --card-bg: #fff;
        --border-color: #e0e0e0;
        --success-color: #2ecc71;
        --warning-color: #e67e22;
        --error-color: #e74c3c;
        --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        --transition: all 0.3s ease;
        /* Option A: System Fonts (Superschnell, sieht aus wie eine native App) */
        /* Das ist das, was GitHub, Booking.com und Medium nutzen */
        --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }

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

    html {
        min-height: 100%;
        height: auto;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        font-size: 16px;
    }

    @media (min-width: 1280px) {
        html {
            font-size: 16.5px;
        }
    }

    @media (min-width: 1500px) {
        html {
            font-size: 17.5px;
        }
    }

    @media (min-width: 1800px) {
        html {
            font-size: 18.5px;
        }
    }

    body {
        font-family: var(--font-primary);
        line-height: 1.6;
        color: var(--text-color);
        background-color: var(--bg-color);
        min-height: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        /* Critical: forces body to be at least as tall as the screen */
        margin: 0;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        /* Removes default browser margins to prevent scrollbars */
        display: flex;
        flex-direction: column;
    }

    /* 2. Make the content grow to fill available space */
    main {
        flex: 1 0 auto;
        width: 100%;
    }

    .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    @media (min-width: 1280px) {
        .container {
            max-width: 1260px;
        }
    }

    @media (min-width: 1500px) {
        .container {
            max-width: 1360px;
        }
    }

    @media (min-width: 1800px) {
        .container {
            max-width: 1440px;
        }
    }

    header {
        background-color: var(--primary-color);
        color: var(--light-text);
        padding: 1rem 0;
        box-shadow: var(--box-shadow);
        position: sticky;
        top: 0;
        z-index: 1000;
        transition: none;
        /* Remove transition to prevent flickering */
    }

    .header-content {
        display: flex;
        justify-content: space-between;
        /* UNCOMMENT THIS LINE */
        align-items: center;
        position: relative;
        min-height: 20px;
        transition: none;
        width: 100%;
        text-align: left;
    }

    .header-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .logo {
        display: flex;
        /* CHANGE FROM inline-flex TO flex */
        align-items: center;
        gap: 10px;
        cursor: pointer;
        outline: none;
        user-select: none;
        margin-right: auto;
        margin-left: 0;
        /* ADD THIS to explicitly anchor to the left */
    }

    /* Material Symbol Styling */
    .logo .material-symbols-outlined {
        color: #ffffff;
        font-size: 28px;
        /* Etwas größer als der Text */
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;

        /* ADD THESE to prevent icon popping */
        width: 28px;
        text-align: center;
        display: block;
        /* Ensures it holds its box size strictly */
    }

    /* Recursive Font Styling für den Text */
    .logo-text {
        font-family: var(--font-primary);
        /* font-family: 'Recursive', sans-serif; */
        color: #ffffff;
        font-size: 1.5rem;
        /* Der Schlüssel zum Logo-Look: Sehr fett + eng beieinander */
        font-weight: 500;
        letter-spacing: -0.03em;
        /* Zieht Buchstaben eng zusammen -> Wirkt kompakt */
        line-height: 1;

        /* Wichtig für weiße Schrift auf farbigem Hintergrund */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        /* Sanfter Übergang für Hover-Effekte */
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    /* Mobile Optimierung */
    @media (max-width: 480px) {
        .logo-text {
            font-size: 1.15rem;
            font-weight: 400;
        }

        .logo .material-symbols-outlined {
            font-size: 22px;
            /* Etwas kleiner für eine feinere Linie */
            /* Icon-Gewicht auch leicht reduzieren für cleanen Look */
            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
        }

        .logo {
            gap: 8px;
        }
    }

    .logo:hover .logo-text {
        /* Minimales Vergrößern wirkt haptisch und modern */
        transform: scale(1.02);
        /* Optional: Leichter Textschatten für "Glow" */
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    }

    /* Navigation */
    nav {
        background-color: var(--secondary-color);
        padding: 0;
    }

    .nav-menu {
        display: flex;
        list-style: none;
        flex-wrap: wrap;
    }

    .nav-item {
        position: relative;
    }

    /* NEW: Flex container to align Link + Arrow */
    .nav-item-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .nav-link {
        display: block;
        padding: 15px 20px;
        color: var(--light-text);
        text-decoration: none;
        transition: var(--transition);
        flex-grow: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        /* Pushes the arrow to the far right */
    }

    .nav-link:hover {
        background-color: rgba(0, 0, 0, 0.1);
    }

    /* NEW: Cleaned up Arrow Button (No white window) */
    .nav-details-toggle-btn {
        background: transparent;
        /* Fixes white window */
        border: none;
        /* Fixes border/window */
        color: var(--light-text);
        /* Matches your nav text */
        padding: 0 20px;
        /* Match nav padding height */
        cursor: pointer;
        display: flex;
        align-items: center;
        transition: transform 0.3s ease;
    }

    /* Fix for Hamburger/Close buttons as well */
    .mobile-menu-toggle,
    .mobile-menu-close {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .nav-item.active .toggle-icon {
        transform: rotate(180deg);
    }

    /* =============================================================================
DISABLED NAV ITEM
============================================================================= */
    .nav-item.is-disabled {
        opacity: 0.5;
        pointer-events: none;
        cursor: default;
    }

    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        background-color: var(--secondary-color);
        min-width: 200px;
        box-shadow: var(--box-shadow);
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: var(--transition);
        z-index: 100;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .dropdown-item {
        display: block;
        padding: 10px 15px;
        color: var(--light-text);
        text-decoration: none;
        transition: var(--transition);
    }

    .dropdown-item:hover {
        background-color: rgba(0, 0, 0, 0.1);
    }

    /* Desktop Hover Logic */
    @media (hover: hover) {
        .nav-item:hover .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        /* Hide the arrow button on desktop */
        .nav-details-toggle-btn {
            display: none;
        }
    }

    /* Mobile Logic */
    @media (max-width: 768px) {
        .dropdown-menu {
            position: static;
            opacity: 1;
            visibility: visible;
            display: none;
            transform: none;
            box-shadow: none;
        }

        /* Use .active to match your JS */
        .nav-item.active .dropdown-menu {
            display: block;
        }
    }

    /* Target only the nav-specific buttons to remove the "white window" */
    .mobile-menu-toggle,
    .mobile-menu-close,
    .nav-details-toggle-btn {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        cursor: pointer;
        /* We do NOT set padding or font-size here to keep your original look */
    }

    /* Force ONLY these specific icons to be white */
    .mobile-menu-toggle .material-symbols-outlined,
    .mobile-menu-close .material-symbols-outlined,
    .nav-details-toggle-btn .material-symbols-outlined,
    .mobile-menu-toggle i,
    .mobile-menu-close i {
        color: #ffffff !important;
        /* Font-size removed so it uses your default/preferred size */
    }

    /* --- Visibility Logic --- */

    /* Hide mobile-only elements on Desktop */
    @media (min-width: 769px) {

        .mobile-menu-toggle,
        .mobile-menu-close,
        .nav-details-toggle-btn {
            display: none !important;
        }
    }

    /* Show mobile-only elements on Mobile */
    @media (max-width: 768px) {
        .mobile-menu-toggle {
            display: inline-block;
            /* Keeps original header flow */
        }

        .nav-details-toggle-btn {
            display: flex;
            /* Necessary for the arrow alignment */
            align-items: center;
        }

        .nav-item-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        line-height: normal;
        padding: 12px 24px;
        background-color: var(--secondary-color);
        color: var(--light-text);
        text-decoration: none;
        border-radius: 8px;
        /* font-weight: bold; */
        transition: var(--transition);
        border: none;
        cursor: pointer;
    }

    .btn:hover {
        background-color: var(--mid-color);
        transform: translateY(-2px);
    }

    .btn-outline {
        background: transparent;
        color: var(--light-text);
        border: 2px solid var(--light-text);
    }

    .btn-outline:hover {
        background-color: var(--light-text);
        color: var(--primary-color);
    }

    /* Main Content */
    main {
        padding: 10px 0;
    }

    main.home-main {
        padding: 0 0;
    }

    .section {
        margin-top: 0px;
        margin-bottom: 10px;
    }

    @media (max-width: 768px) {
        .section {
            margin-bottom: 0px;
        }
    }

    /* @media (max-width: 480px) {
    } */
    .section-title {
        /* Reset default H1 styles */
        margin: 0;
        /* Removes browser default margins */
        font-weight: normal;
        /* Or whatever weight your div had (e.g., 500 or 600) */
        display: block;
        /* Ensures it behaves like a div container */

        font-size: clamp(1.45rem, 2.2vw, 1.95rem);
        line-height: 1.2;
        color: var(--primary-color);
        margin-bottom: 12px;
        position: relative;
        padding-bottom: 6px;
    }

    .section-title .section-subtitle,
    .section-subtitle {
        display: block;
        font-size: 0.75em;
        font-weight: normal;
        opacity: 0.85;
        line-height: 1.25;
        margin-top: 4px;
    }

    .section-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 80px;
        height: 3px;
        background-color: var(--accent-color);
    }

    .trust-subtitle {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        font-size: 0.85rem;
        color: var(--text-color);
        opacity: 0.88;
        margin-top: -10px;
        margin-bottom: 20px;
        line-height: 1.35;
    }

    .trust-subtitle .trust-icon {
        font-size: 1.15rem;
        color: var(--primary-color);
        flex-shrink: 0;
        margin-top: 1px;
    }

    /* Status Badges (Period / Law Status) */
    .period-status-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 0.8rem;
        font-weight: 600;
        padding: 3px 10px;
        border-radius: 9999px;
        line-height: 1.25;
        width: fit-content;
        max-width: 100%;
        letter-spacing: 0.01em;
        white-space: normal;
        word-break: break-word;
        flex-shrink: 1;
        box-sizing: border-box;
    }

    .period-status-badge .badge-icon {
        font-size: 1rem;
        flex-shrink: 0;
    }

    .badge-status-active {
        background-color: rgba(34, 197, 94, 0.12);
        color: #15803d;
        border: 1px solid rgba(34, 197, 94, 0.3);
    }

    .badge-status-advance {
        background-color: rgba(14, 165, 233, 0.12);
        color: #1f6f96;
        border: 1px solid rgba(14, 165, 233, 0.35);
    }

    .badge-status-enacted {
        background-color: rgba(59, 130, 246, 0.12);
        color: #1d4ed8;
        border: 1px solid rgba(59, 130, 246, 0.3);
    }

    .badge-status-prognosis {
        background-color: rgba(245, 158, 11, 0.12);
        color: #b45309;
        border: 1px solid rgba(245, 158, 11, 0.35);
    }

    .badge-status-archive {
        background-color: rgba(100, 116, 139, 0.12);
        color: #475569;
        border: 1px solid rgba(100, 116, 139, 0.3);
    }

    .calc-status-badge-container {
        margin-top: -12px;
        margin-bottom: 16px;
    }

    .calc-info-box {
        background-color: var(--card-bg, #ffffff);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        padding: 12px 16px;
        margin-top: -6px;
        margin-bottom: 20px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .calc-info-box-header {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
    }

    .calc-info-box-text p {
        font-size: 0.88rem;
        line-height: 1.45;
        color: var(--text-color, #333333);
        margin: 0;
    }

    .calc-info-badge-only {
        margin-top: -10px;
        margin-bottom: 18px;
    }

    .table-status-badge-container {
        margin-bottom: 14px;
    }

    #table-status-badge {
        width: 100%;
        margin-top: 0.25rem;
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
    }

    #table-status-badge.is-hidden {
        display: none !important;
    }

    /* Table Breadcrumbs & Back-Link (Responsive Hybrid: Back-link on mobile, full trail on desktop) */
    .table-breadcrumb {
        width: 100%;
        margin-top: 0;
        margin-bottom: 2px;
        line-height: 1.1;
        display: block !important;
        background: transparent !important;
    }

    .table-breadcrumb.is-hidden {
        display: none !important;
    }

    /* Mobile (< 768px): Show back link, hide breadcrumb list */
    .breadcrumb-back-link {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: #475569;
        text-decoration: none;
        font-size: 0.80rem;
        font-weight: 500;
        line-height: 1.2;
        padding: 1px 4px;
        margin-left: -4px;
        border-radius: 4px;
        transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
    }

    .breadcrumb-back-link:hover {
        color: var(--primary-color, #0b3c5d);
        background-color: rgba(0, 0, 0, 0.04);
        text-decoration: none;
    }

    .breadcrumb-back-link:hover .breadcrumb-back-icon {
        color: var(--primary-color, #0b3c5d);
        transform: translateX(-2px);
    }

    .breadcrumb-back-icon {
        font-size: 1.05rem !important;
        line-height: 1;
        display: inline-block;
        vertical-align: middle;
        color: #64748b;
        transition: transform 0.15s ease, color 0.15s ease;
    }

    .breadcrumb-list {
        display: none;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        list-style: none;
        margin: 0;
        padding: 4px 0;
        font-size: 0.86rem;
        line-height: 1.4;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .breadcrumb-list::-webkit-scrollbar {
        display: none;
    }

    .breadcrumb-item {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
    }

    .breadcrumb-link,
    .breadcrumb-item a {
        color: var(--primary-color, #0b3c5d);
        text-decoration: none;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 4px;
        border-radius: 4px;
        transition: color 0.15s ease, background-color 0.15s ease, text-decoration 0.15s ease;
    }

    .breadcrumb-link:hover,
    .breadcrumb-item a:hover {
        color: var(--secondary-color, #1f6f96);
        background-color: rgba(11, 60, 93, 0.07);
        text-decoration: none;
    }

    .breadcrumb-separator {
        color: #94a3b8;
        user-select: none;
        font-size: 0.9em;
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        opacity: 0.85;
    }

    .breadcrumb-current {
        color: var(--text-color, #334155);
        font-weight: 600;
        padding: 2px 4px;
    }

    /* Desktop (>= 768px): Hide back link, show full breadcrumb trail */
    @media (min-width: 768px) {
        .breadcrumb-back-link {
            display: none !important;
        }

        .breadcrumb-list {
            display: flex !important;
        }
    }

    /* Cards */
    .cards-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 15px;
    }

    .card {
        background-color: var(--card-bg);
        border-radius: 8px;
        box-shadow: var(--box-shadow);
        overflow: hidden;
        transition: var(--transition);
        margin-bottom: 1.0rem;
    }

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    }

    .card.no-hover {
        transition: none;
    }

    .card.no-hover:hover {
        transform: none;
        box-shadow: var(--box-shadow);
    }

    .card.no-hover .card-header {
        cursor: default;
    }

    .card-header {
        background-color: var(--card-bg);
        color: var(--primary-color);
        padding: 15px 20px 15px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }

    .card-header h2 {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        font-size: clamp(1.15rem, 1.4vw, 1.3rem);
        font-weight: bold;
    }

    .card-header i {
        font-size: 1.1rem;
    }

    .card-header .toggle-icon {
        font-size: 24px;
        /* color: rgba(0, 0, 0, 0.35); */
        color: var(--text-color);
        transition: transform 0.3s ease, color 0.3s ease;
        flex-shrink: 0;
    }

    .card-header:hover .toggle-icon {
        color: rgba(0, 0, 0, 0.5);
    }

    .card.collapsed .card-header .toggle-icon {
        transform: rotate(-90deg);
    }

    .card.collapsed .card-body {
        display: none;
    }

    .card-body {
        /*         padding: 20px;
 */
        padding: 0px 20px 10px 20px;
    }

    .card-title {
        font-size: 1.05rem;
        margin-top: 0.9rem;
        color: var(--primary-color);
    }

    .card-text {
        margin-bottom: 15px;
    }

    @media (max-width: 768px) {
        .card-header {
            padding: 10px 10px 10px 10px;
        }

        .card-body {
            /*             padding: 10px;
 */
            padding: 0px 10px 5px 10px;
        }

        .result-card {
            padding: 1rem 10px !important;
        }

        .result-header-row {
            flex-direction: column !important;
            align-items: flex-start !important;
        }

        .result-badge-block {
            align-items: flex-start !important;
        }
    }

    /* Tabs */
    .tabs-container {
        margin-bottom: 40px;
    }

    .tabs-nav {
        display: flex;
        border-bottom: 1px solid var(--border-color);
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    .tab-button {
        background: none;
        border: none;
        padding: 12px 20px;
        font-size: 1rem;
        cursor: pointer;
        border-bottom: 3px solid transparent;
        transition: var(--transition);
        color: var(--text-color);
    }

    .tab-button.active {
        border-bottom-color: var(--accent-color);
        color: var(--primary-color);
        font-weight: bold;
    }

    .tab-content {
        display: none;
        animation: fadeIn 0.5s;
    }

    .tab-content.active {
        display: block;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* Comparison Tool Krankenversicherung */
    .kv-comparison-container {
        background-color: var(--card-bg);
        border-radius: 8px;
        box-shadow: var(--box-shadow);
        padding: 30px;
        margin-bottom: 40px;
    }

    .kv-comparison-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    .kv-comparison-table th,
    .kv-comparison-table td {
        padding: 15px;
        text-align: left;
        border-bottom: 1px solid var(--border-color);
    }

    .kv-comparison-table th {
        background-color: var(--primary-color);
        color: var(--light-text);
    }

    .kv-comparison-table tr:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }

    /* FAQ Section */
    .accordion {
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 30px;
    }

    .accordion-item {
        border-bottom: 1px solid var(--border-color);
    }

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

    .accordion-header {
        background-color: var(--card-bg);
        padding: 15px 20px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: var(--transition);
    }

    .accordion-header:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }

    .accordion-title {
        font-weight: bold;
    }

    .accordion-icon {
        transition: var(--transition);
    }

    .accordion-item.active .accordion-icon {
        transform: rotate(180deg);
    }

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

    .accordion-item.active .accordion-content {
        max-height: 500px;
    }

    .accordion-body {
        padding: 0 20px 15px;
    }

    /* Form Elements */
    .form-group {
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .form-label {
        display: inline-block;
        margin-bottom: 0;
        font-weight: 600;
        font-size: 0.92rem;
        min-width: 180px;
        /* Increased to accommodate longest label: "Kinderfreibeträge" */
        flex-shrink: 0;
    }

    .form-control {
        width: 100%;
        padding: 10px 15px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        background-color: var(--card-bg);
        color: var(--text-color);
        font-size: 0.95rem;
        flex: 1;
    }

    .form-control:focus {
        outline: none;
        border-color: var(--primary-color);
    }

    select.form-control {
        cursor: pointer;
    }

    /* Form row styling for horizontal layout */
    .form-row {
        display: flex;
        gap: 20px;
        margin-bottom: 0px;
        flex-wrap: wrap;
    }

    .form-row .form-group {
        flex: 1;
        min-width: 200px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .form-row .form-group-col {
        flex: 1;
        min-width: 200px;
        display: flex;
        flex-direction: column;
    }

    /* Ensure all form-groups within form-rows use horizontal layout */
    .beamte-options .form-group,
    .tarif-options .form-group,
    .beamte-options-employment .form-group,
    .tarif-options-employment .form-group,
    .beamte-options-tax .tarif-options-tax .form-group,
    .beamte-options-allowances .form-group {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    @media (max-width: 768px) {
        .form-group {
            flex-direction: row;
            /* KEEP horizontal */
            align-items: center;
            gap: 8px;
        }

        .form-label {
            min-width: 140px;
            /* smaller label width for mobile */
            font-size: 0.88rem;
        }

        .form-control {
            font-size: 0.85rem;
            padding: 8px 10px;
        }

        .form-row {
            flex-direction: column;
            /* rows stack, but fields stay horizontal */
            gap: 8px;
        }

        .form-row .form-group {
            width: 100%;
            min-width: 0;
        }

        .form-row .form-group-col {
            width: 100%;
            min-width: 0;
        }

        .zuschlags-container {
            padding: 8px 10px;
        }

        .zuschlags-container .quick-link-card h2 {
            font-size: 0.85rem;
        }

    }

    .form-label {
        flex: 0 0 180px;
    }

    @media (max-width: 768px) {
        .form-label {
            flex: 0 0 110px;
        }
    }

    /* Ensure Stufe field maintains horizontal layout even when JavaScript manipulates display */
    #stufe,
    #stufe.form-group {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    #stufe.form-group .form-label {
        display: inline-block !important;
        margin-bottom: 0 !important;
        min-width: 180px !important;
        flex-shrink: 0 !important;
    }

    #stufe.form-group .form-control {
        flex: 1 !important;
        width: 100% !important;
    }

    /* Override any JavaScript display changes for form groups */
    .beamte-options .form-group[style*="display: none"],
    .tarif-options .form-group[style*="display: none"],
    .beamte-options-employment .form-group[style*="display: none"],
    .tarif-options-employment .form-group[style*="display: none"],
    .beamte-options-tax .tarif-options-tax .form-group[style*="display: none"],
    .beamte-options-allowances .form-group[style*="display: none"] {
        display: flex !important;
    }

    /* When form groups are shown again, ensure flex layout */
    .beamte-options .form-group,
    .tarif-options .form-group,
    .beamte-options-employment .form-group,
    .tarif-options-employment .form-group,
    .beamte-options-tax .tarif-options-tax .form-group,
    .beamte-options-allowances .form-group {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    /* 1. The Container (The Visual Box) */
    .form-group.boxed-input {
        position: relative;
        /* Essential for positioning the label inside */
        display: block !important;
        /* Reset flex layout */
        height: 56px;
        /* Fixed height is important for consistency */

        /* Visual styling */
        border: 1px solid var(--border-color, #ccc);
        border-radius: 4px;
        background-color: var(--card-bg, #fff);
        padding: 0 !important;
        /* Remove padding from container, let select handle it */
        cursor: pointer;
    }

    /* Position info icon inside boxed-input */
    .form-group.boxed-input .info-icon {
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 15;
        /* Ensure it's above the select */
        font-size: 0.9em;
        color: #0066cc;
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
    }

    .form-group.boxed-input .info-icon:hover {
        color: #0056b3;
        background-color: rgba(255, 255, 255, 1);
        transform: translateY(-50%) scale(1.1);
    }

    /* 2. The Label (Floating at the top) */
    .form-group.boxed-input .form-label {
        position: absolute;
        top: 8px;
        /* Distance from top */
        left: 12px;
        /* Distance from left */
        z-index: 10;
        /* Ensure it sits on top of the select */

        font-size: 0.74rem;
        font-weight: 500;
        color: #64748b;
        opacity: 1;
        margin: 0;
        pointer-events: none;
        /* Clicks pass through the label to the select below */
        line-height: 1;
    }

    /* 3. The Select (Fills the whole box) */
    .form-group.boxed-input .form-control {
        width: 100%;
        height: 100%;

        /* Position text at the bottom */
        padding: 24px 50px 4px 12px !important;
        /* Right padding increased to make room for arrow AND info icon */
        margin: 0 !important;

        /* Remove default borders/backgrounds */
        border: none !important;
        background-color: transparent !important;
        outline: none !important;
        box-shadow: none !important;

        /* Text Styling */
        font-size: 0.88rem;
        color: var(--text-color);

        /* HIDE the native arrow so we can position our own */
        -webkit-appearance: none;
        appearance: none;

        /* INSERT custom arrow centered vertically */
        /* This SVG is a standard dark grey dropdown arrow */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        /* Arrow positioned at the right edge */
        background-size: 16px;

        cursor: pointer;
    }

    .form-group.boxed-input .form-control option {
        background-color: var(--card-bg, #fff);
        /* Background of the list */
        color: var(--text-color, #333);
        /* Text color of the list */
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .card:has(.custom-laufzeit-open),
    .card-body:has(.custom-laufzeit-open),
    .wizard-container:has(.custom-laufzeit-open),
    .wizard-step:has(.custom-laufzeit-open),
    .accordion:has(.custom-laufzeit-open),
    .accordion-content:has(.custom-laufzeit-open) {
        overflow: visible !important;
    }

    .card:has(.custom-laufzeit-open) {
        position: relative;
        z-index: 50;
    }

    .form-row:has(.custom-laufzeit-open) {
        position: relative;
        z-index: 95;
    }

    .form-group.boxed-input:has(select),
    .form-group.boxed-input.has-custom-laufzeit {
        min-height: 56px;
        height: auto;
    }

    .form-group.boxed-input.is-disabled-select {
        background-color: #f5f5f5;
        cursor: not-allowed;
    }

    .form-group.boxed-input.custom-laufzeit-open {
        z-index: 100;
        border-color: var(--primary-color, #0b3c5d);
    }

    .form-group.boxed-input.has-custom-laufzeit > select,
    .form-group.boxed-input.has-custom-laufzeit > select.form-control,
    .form-group.boxed-input.has-custom-laufzeit > select#erfahrung,
    .form-group.boxed-input.has-custom-laufzeit > select#stufe,
    .form-group.boxed-input.has-custom-laufzeit > select#laufzeit,
    .form-group.boxed-input.has-custom-laufzeit > select#laufzeitTarif {
        display: none !important;
    }

    .custom-laufzeit-display {
        width: 100%;
        min-height: 54px;
        height: auto;
        box-sizing: border-box;
        padding: 24px 50px 6px 12px;
        font-size: 0.88rem;
        color: var(--text-color, #212529);
        line-height: 1.3;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 16px;
        cursor: pointer;
        user-select: none;
        outline: none;
    }

    .custom-laufzeit-display.is-disabled {
        cursor: not-allowed;
        opacity: 0.75;
    }

    .custom-laufzeit-menu {
        display: none;
        position: absolute;
        top: calc(100% + 2px);
        left: -1px;
        right: -1px;
        z-index: 200;
        background-color: var(--card-bg, #ffffff);
        border: 1px solid var(--primary-color, #0b3c5d);
        border-radius: 6px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
        max-height: 300px;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 4px 0;
    }

    .form-group.boxed-input.custom-laufzeit-open .custom-laufzeit-menu {
        display: block;
    }

    .custom-laufzeit-optgroup {
        padding: 7px 12px 4px 12px;
        font-size: 0.76rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--secondary-color, #1f6f96);
        background-color: #f8fafc;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        user-select: none;
        cursor: default;
    }

    .custom-laufzeit-optgroup:first-child {
        border-top: none;
    }

    .custom-laufzeit-option {
        padding: 8px 12px;
        font-size: 0.86rem;
        line-height: 1.35;
        color: var(--text-color, #212529);
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word;
        cursor: pointer;
        transition: background-color 0.12s ease;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .custom-laufzeit-option:last-child {
        border-bottom: none;
    }

    .custom-laufzeit-option:hover {
        background-color: #f0f6fa;
    }

    .custom-laufzeit-option.is-selected {
        background-color: #e0f2fe;
        color: var(--primary-color, #0b3c5d);
        font-weight: 600;
    }

    .custom-laufzeit-option.is-disabled {
        opacity: 0.45;
        cursor: not-allowed;
        background-color: transparent !important;
    }

    @media (max-width: 768px) {
        .custom-laufzeit-display {
            font-size: 0.88rem;
            padding: 24px 46px 6px 12px;
        }

        .custom-laufzeit-option {
            font-size: 0.86rem;
            padding: 8px 10px;
        }

        .custom-laufzeit-optgroup {
            font-size: 0.74rem;
            padding: 6px 10px 3px 10px;
        }
    }

    /* 5. Special handling for number inputs - FIXED */
    /* High specificity selector to override the default .boxed-input styles */
    .form-group.boxed-input input[type="number"].form-control,
    .form-group.boxed-input input[type="text"].form-control {
        background-image: none !important;
        /* Removes the custom dropdown arrow */
        -moz-appearance: textfield;
        /* Removes Spinner in Firefox */
        appearance: textfield;
        /* Standard property */
        padding: 24px 50px 4px 12px !important;
        /* Right padding increased to make room for info icon */
        font-size: 0.88rem;
    }

    /* Removes Spinner in Chrome, Safari, Edge, Opera */
    /* We use the same high-specificity selector chain to be safe */
    .form-group.boxed-input input[type="number"].form-control::-webkit-outer-spin-button,
    .form-group.boxed-input input[type="number"].form-control::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* 4. Focus State */
    .form-group.boxed-input:focus-within {
        border-color: var(--primary-color);
        /* box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); */
        /* Optional glow */
    }

    /* 5. Mobile & Touch Screen: Prevent iOS Safari Auto-Zoom (requires min 16px font-size) */
    @media (max-width: 768px), (hover: none) and (pointer: coarse) {
        .form-group.boxed-input .form-control,
        .form-control,
        input[type="text"],
        input[type="number"],
        input[type="email"],
        input[type="tel"],
        input[type="search"],
        input[type="password"],
        select,
        textarea {
            font-size: 16px !important;
        }

        /* Visually scale boxed-input text/number fields to 0.88rem (~14px) while keeping 16px computed font-size to prevent iOS auto-zoom */
        .form-group.boxed-input input[type="number"].form-control,
        .form-group.boxed-input input[type="text"].form-control {
            width: calc(100% / 0.88) !important;
            height: calc(100% / 0.88) !important;
            transform: scale(0.88);
            transform-origin: top left;
            padding: 27.3px 56.8px 4.5px 13.6px !important;
            box-sizing: border-box;
        }
    }

    /* Footer */
    footer {
        background-color: var(--primary-color);
        color: var(--light-text);
        padding: 0px 0 10px;
        margin-top: auto;
        flex-shrink: 0;
        width: 100%;
    }

    .footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 10px;
        text-align: center;
    }

    .footer-bottom p {
        font-size: 0.8rem;
        margin: 0;
        /* Removes default browser margin for better vertical centering */
    }

    .footer-bottom a {
        color: inherit;
        /* Inherits the color from the parent <p> tag */
        text-decoration: none;
        /* Removes the standard link underline */
        font-weight: inherit;
        /* Ensures it uses the same font weight */
    }

    /* Utility Classes */
    .text-center {
        text-align: center;
    }

    .mb-4 {
        margin-bottom: 4px;
    }

    .mb-20 {
        margin-bottom: 20px;
    }

    .mb-30 {
        margin-bottom: 30px;
    }

    .mt-4 {
        margin-top: 4px;
    }

    .mt-20 {
        margin-top: 20px;
    }

    .mt-30 {
        margin-top: 30px;
    }


    @media (max-width: 768px) {

        /* Show mobile toggles */
        .mobile-menu-toggle {
            display: block;
            margin-left: auto;
            /* PUSHES THIS BUTTON TO FAR RIGHT */
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-50%) translateX(20px);
            }

            to {
                opacity: 1;
                transform: translateY(-50%) translateX(0);
            }
        }


        /* Header adjustments for mobile */
        header {
            padding: 0.5rem 0;
            min-height: 56px;
        }

        .header-content {
            min-height: 48px;
            position: relative;
            flex-wrap: nowrap;
            gap: 10px;
            justify-content: flex-start;
            /* PACK ITEMS TO THE LEFT */
        }

        .header-actions {
            z-index: 999;
            position: relative;
        }

        .nav-menu {
            position: fixed;
            top: 56px;
            /* place menu just below header */
            right: -100%;
            width: 70%;
            height: calc(100vh - 72px);
            /* fill remaining viewport height */
            background-color: var(--secondary-color);
            flex-direction: column;
            padding-top: 20px;
            /* smaller padding since header space is reserved */
            transition: var(--transition);
            z-index: 999;
            /* keep above content, but below header if needed */
        }

        .nav-menu.active {
            right: 0;
        }

        .nav-item {
            width: 100%;
        }

        .dropdown-menu {
            position: static;
            opacity: 1;
            visibility: visible;
            transform: none;
            box-shadow: none;
            display: none;
            background-color: rgba(0, 0, 0, 0.1);
        }

        .nav-item.active .dropdown-menu {
            display: block;
        }

        .nav-item>.nav-link {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* Add arrow indicator for dropdown items on mobile */
        .nav-item:has(.dropdown-menu)>.nav-link::after {
            content: '▼';
            font-size: 0.7em;
            margin-left: 8px;
            transition: transform 0.3s ease;
        }

        /* Rotate arrow when dropdown is active */
        .nav-item.active:has(.dropdown-menu)>.nav-link::after {
            transform: rotate(180deg);
        }

        /* Override existing dropdown styles for mobile */
        .nav-item .dropdown-menu {
            position: static !important;
            opacity: 1 !important;
            visibility: visible !important;
            transform: none !important;
            box-shadow: none !important;
            display: none !important;
            background-color: rgba(0, 0, 0, 0.1);
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, display 0.3s ease;
        }

        /* Show dropdown when parent item is active */
        .nav-item.active .dropdown-menu {
            display: block !important;
            max-height: 500px;
        }

        /* Style dropdown items on mobile */
        .nav-item.active .dropdown-menu .dropdown-item {
            padding-left: 40px;
            /* Indent dropdown items */
            background-color: transparent;
        }

        .nav-item.active .dropdown-menu .dropdown-item:hover {
            background-color: rgba(0, 0, 0, 0.1);
        }


        /* Comparison table smaller padding */
        .comparison-table {
            font-size: 0.9rem;
        }

        .comparison-table th,
        .comparison-table td {
            padding: 10px 5px;
        }

        .section-title {
            font-size: 1.5rem;
        }
    }


    @media (max-width: 576px) {
        .footer-content {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 200px) {
        .logo span {
            display: none;
            /*Hide text of header on very small screens */
        }
    }

    /* =============================================================================
    GLOBALE STILE (gelten auf allen Seiten)
    ============================================================================= */

    /* Grundlegende Stile für die quick-link-card Komponente */
    .quick-link-card {
        background-color: var(--card-bg);
        border-radius: 8px;
        padding: 8px 15px;
        box-shadow: var(--box-shadow);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        text-decoration: none;
        color: inherit;
        display: block;
        align-items: center;
        height: 100%;
        min-height: 35px;
        width: 100%;
        box-sizing: border-box;
        justify-self: center;
        transform: translateZ(0);
        /* Hardware acceleration */
        will-change: transform;
        /* NEW: Crucial for positioning the status title */
        position: relative;
    }

    .quick-link-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 10;
    }

    .quick-link-card:hover .quick-link-icon {
        color: var(--primary-color);
    }

    .quick-link-content {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        height: 100%;
        overflow: visible;
        position: relative;
    }

    .quick-link-icon {
        font-size: 1.4rem;
        color: var(--primary-color);
        transition: color 0.3s ease;
        flex-shrink: 0;
    }

    /* Disabled Quick Link Card Stile */
    .quick-link-card.is-disabled,
    .main-category-item.is-disabled .quick-link-card,
    a.quick-link-card.is-disabled {
        opacity: 0.55;
        pointer-events: none;
        cursor: default;
        box-shadow: none;
        background-color: var(--secondary-bg, #f8f9fa);
        border: 1px dashed #ccc;
    }

    .quick-link-card.is-disabled:hover {
        transform: none;
        box-shadow: none;
    }

    .badge-inactive {
        display: inline-block;
        font-size: 0.72rem;
        font-weight: 600;
        padding: 2px 6px;
        border-radius: 4px;
        background-color: #e2e8f0;
        color: #64748b;
        margin-left: auto;
        white-space: nowrap;
    }

    /*     .quick-link-card h2 {
        font-size: clamp(0.75rem, 2.5vw, 1rem);
        margin: 0;
        color: var(--text-color);
        font-weight: 600;
        text-align: left;
        white-space: normal;
        word-break: break-word;
        overflow: hidden;
        flex: 1;
        min-width: 0;
        line-height: 1.4;
    } */

    /* Updated to include h2, h3, and h4 */
    .quick-link-card h2,
    .quick-link-card h3,
    .quick-link-card h4 {
        font-size: clamp(0.95rem, 2vw, 1.05rem);
        margin: 0;
        color: var(--text-color);
        font-weight: 600;
        text-align: left;
        white-space: normal;
        word-break: break-word;
        overflow: hidden;
        flex: 1;
        min-width: 0;
        line-height: 1.4;
    }

    /* Update the selected state color overrides */
    .quick-link-card.is-selected h2,
    .quick-link-card.is-selected h3,
    .quick-link-card.is-selected h4,
    .quick-link-card.is-selected-sub h2,
    .quick-link-card.is-selected-sub h3,
    .quick-link-card.is-selected-sub h4,
    .quick-link-card.is-selected-period h2,
    .quick-link-card.is-selected-period h3,
    .quick-link-card.is-selected-period h4 {
        color: white !important;
    }

    .quick-link-card p {
        display: none;
    }

    /* Hide default focus outline for all quick-link cards */
    .quick-link-card:focus {
        outline: none;
        box-shadow: none;
    }

    /* --- ADD THIS NEW RULE AT THE END OF YOUR STYLESHEET --- */
    /* The status title (e.g., "Aktuell", "Prognose") */
    /* This is created by the JavaScript and must have this class */
    .period-status {
        position: absolute;
        top: 0;
        /* Aligns with the top of the card */
        right: -10px;
        top: -2px;
        /* Aligns with the right edge of the card */
        transform: translateY(-50%);
        /* Pulls it up to be centered on the top border */
        font-size: 0.7rem;
        font-weight: bold;
        color: var(--warning-color);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        z-index: 1;
        /* Ensures it's above the card background */
    }

    /* Ensure selected states override everything */
    .quick-link-card.is-selected,
    .quick-link-card.is-selected-sub,
    .quick-link-card.is-selected-period {
        outline: none !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
        border: none !important;
    }

    /* Stil für den ausgewählten Haupt-Button, der als "Zurück"-Schalter dient */
    .quick-link-card.is-selected {
        background-color: var(--primary-color, #007bff);
        color: white;
        transform: translateY(0);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }


    .quick-link-card.is-selected .quick-link-icon,
    .quick-link-card.is-selected h2 {
        color: white;
    }

    .quick-link-card.is-selected:hover {
        background-color: var(--primary-color, #007bff);
        color: white;
        transform: translateY(0);
    }

    /* Stil für ausgewählte Sub-Category-Buttons */
    .quick-link-card.is-selected-sub {
        background-color: var(--secondary-color);
        color: white;
        transform: translateY(0);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .quick-link-card.is-selected-period {
        background-color: var(--mid-color);
        color: white;
        transform: translateY(0);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    /* .quick-link-card.is-selected-sub .quick-link-icon,
    .quick-link-card.is-selected-sub h2,
    .quick-link-card.is-selected-period h2 {
        color: white;
    } */

    /* Selected state hover */
    .quick-link-card.is-selected:hover,
    .quick-link-card.is-selected-sub:hover {
        background-color: var(--secondary-color);
        color: white;
        transform: translateY(0);
    }

    /* =============================================================================
    STILE FÜR DIE SEITE "Schnellzugriff" (#schnellzugriff)
    ============================================================================= */

    #schnellzugriff {
        margin-top: 0;
        margin-bottom: 40px;
    }

    #schnellzugriff h2 {
        display: flex;
        align-items: center;
        gap: 5px;
        margin: 0;
        font-size: 1.17rem;
        font-weight: bold;
    }

    #schnellzugriff .quick-links-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 0.5rem;
        margin-top: 10px;
        box-sizing: border-box;
    }

    #schnellzugriff .quick-link-card h3 {
        font-size: 0.95rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: normal;
        color: #666;
    }


    /* ---- Responsive Breakpoints für "Schnellzugriff" ---- */

    @media (max-width: 768px) {
        .period-status {
            top: 2px;
            right: 2px;
        }

        #schnellzugriff {
            margin-bottom: 20px;
        }

        #schnellzugriff .quick-links-container {
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            /* padding-left: 15px;
            padding-right: 15px; */
        }

        #schnellzugriff .quick-link-card {
            padding: 8px 12px;
            min-height: 50px;
        }

        #schnellzugriff .quick-link-content {
            gap: 10px;
        }

        #schnellzugriff .quick-link-icon {
            font-size: 1.4rem;
        }

        #schnellzugriff .quick-link-card h2 {
            font-size: 0.9rem;
        }
    }

    @media (max-width: 480px) {
        #schnellzugriff .quick-links-container {
            grid-template-columns: 1fr;
            gap: 6px;
            /* padding-left: 10px;
            padding-right: 10px; */
        }

        #schnellzugriff .quick-link-card {
            padding: 6px 10px;
            min-height: 45px;
            /* max-width: 160px; */
        }

        #schnellzugriff .quick-link-content {
            gap: 8px;
        }

        #schnellzugriff .quick-link-icon {
            font-size: 1.2rem;
        }

        #schnellzugriff .quick-link-card h2 {
            font-size: 0.9rem;
        }
    }

    @media (max-width: 360px) {
        #schnellzugriff .quick-links-container {
            gap: 5px;
            /* padding-left: 10px;
            padding-right: 10px; */
        }

        #schnellzugriff .quick-link-card {
            padding: 5px 8px;
            min-height: 40px;
            /* max-width: 140px; */
        }

        #schnellzugriff .quick-link-icon {
            font-size: 1.1rem;
        }

        #schnellzugriff .quick-link-card h2 {
            font-size: 0.8rem;
        }
    }

    /* =============================================================================
    STILE FÜR DIE SEITE "Besoldungstabellen" (#besoldungstabellen)
    ============================================================================= */

    .all-categories-container {
        width: 100%;
        margin-top: 20px;
        overflow-x: hidden;
        display: flex;
        justify-content: center;
        align-items: stretch;
        flex-direction: column;
        box-sizing: border-box;
    }


    /* #besoldungstabellen {
        padding: 1rem 0;
    } */

    #main-categories-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 10px;
        width: 100%;
        box-sizing: border-box;
        padding: 5px 0;
    }

    #main-categories-container:empty,
    #main-categories-container:not(:has(.sub-category-item)):not(:has(.main-category-item:not(.is-hidden))) {
        display: none !important;
    }

    /* Logik zum Verstecken/Anzeigen der Haupt- und Sub-Buttons */
    .main-category-item.is-hidden,
    .sub-category-item.is-hidden,
    .period-level.is-hidden,
    .besoldung-detail-text.is-hidden,
    #besoldung-detail-text.is-hidden,
    #besoldung-extra-text.is-hidden {
        display: none;
        /* Effektivste Methode zum Verstecken */
    }

    .besoldung-intro-text,
    .besoldung-detail-text {
        width: 100%;
        grid-column: 1 / -1;
        margin-top: 1.25rem;
        margin-bottom: 1.5rem;
    }

    #main-categories-container > .besoldung-intro-text {
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .besoldung-detail-text {
        margin-top: 1.25rem;
    }

    .besoldung-intro-text p,
    .besoldung-detail-text p {
        margin-bottom: 10px;
    }

    .besoldung-intro-text ul,
    .besoldung-detail-text ul {
        /* Entfernt den Standard-Einzug und setzt ihn manuell */
        padding-left: 1.5rem;
        margin-left: 0;
        list-style-position: outside;
    }

    .besoldung-intro-text li,
    .besoldung-detail-text li {
        margin-bottom: 8px;
    }

    /* Styling und Animation für die neue Extra-Text-Box (Hinweis-Text) */
    #besoldung-extra-text {
        width: 100%;
    }

    .besoldung-extra-info {
        width: 100%;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
        box-sizing: border-box;
        padding: 12px 18px;
        background-color: #f4f8fb;
        border: 1px solid #dce8f2;
        border-left: 4px solid var(--secondary-color, #1f6f96);
        border-radius: 6px;
        font-size: 0.95rem;
        line-height: 1.55;
        color: #2c3e50;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);

        /* Die Animation wird abgespielt, sobald das Element sichtbar wird */
        animation: fadeInDown 0.4s ease-out forwards;
    }

    .besoldung-extra-info a {
        color: var(--primary-color, #0b3c5d);
        font-weight: 600;
        text-decoration: underline;
    }

    .besoldung-extra-info a:hover {
        color: var(--secondary-color, #1f6f96);
    }

    /* Die Keyframes für den weichen Fade-In von oben */
    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* =============================================================================
    ROUNDS ACCORDION & DETAIL TEXT HEADINGS
    ============================================================================= */
    .rounds-accordion-container {
        width: 100%;
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
        box-sizing: border-box;
    }

    .rounds-accordion-container.is-hidden {
        display: none !important;
    }

    .rounds-accordion-heading,
    .detail-text-heading {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 1.15rem;
        font-weight: 700;
        margin-bottom: 0.75rem;
        color: var(--primary-color, #0b3c5d);
    }

    .rounds-heading-icon,
    .detail-heading-icon {
        color: var(--secondary-color, #1f6f96);
        font-size: 1.35rem;
        flex-shrink: 0;
    }

    .rounds-accordion-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .rounds-accordion-item {
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: #ffffff;
        overflow: hidden;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        box-sizing: border-box;
        max-width: 100%;
    }

    .rounds-accordion-item:hover {
        border-color: #d0e4f2;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }

    .rounds-accordion-item[open] {
        border-color: var(--secondary-color, #1f6f96);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }

    .rounds-accordion-summary {
        padding: 5px 6px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-weight: 500;
        user-select: none;
        background: #fafbfc;
        list-style: none;
        transition: background-color 0.2s ease;
        box-sizing: border-box;
        width: 100%;
    }

    .rounds-accordion-summary::-webkit-details-marker {
        display: none;
    }

    .rounds-accordion-summary:hover {
        background-color: #f0f6fa;
    }

    .rounds-summary-header-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px 10px;
        width: 100%;
        min-width: 0;
        flex-wrap: nowrap;
    }

    .rounds-summary-badge-wrapper {
        display: inline-flex;
        align-items: flex-start;
        max-width: 62%;
        min-width: 0;
        flex: 1 1 auto;
    }

    .rounds-summary-badge-wrapper .period-status-badge {
        max-width: 100%;
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
    }

    .rounds-summary-title {
        font-weight: 500;
        color: #475569;
        font-size: 0.83rem;
        line-height: 1.35;
        min-width: 0;
        text-align: right;
        margin-left: auto;
        max-width: 38%;
        flex: 0 0 auto;
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
    }

    .rounds-archive-desc {
        text-align: left;
        margin-left: 0;
        white-space: normal;
    }

    .rounds-summary-sub-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 6px 10px;
        width: 100%;
        min-width: 0;
        margin-top: 6px;
        flex-wrap: wrap;
    }

    .rounds-summary-btn-wrapper {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .rounds-summary-btn-wrapper.rounds-sub-btn-group {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px;
        margin-left: 0;
    }

    .rounds-summary-details-toggle {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        margin-left: auto;
        font-size: 0.78rem;
        font-weight: 600;
        color: #64748b;
        cursor: pointer;
        white-space: nowrap;
        flex-shrink: 0;
        transition: color 0.2s ease;
    }

    .rounds-accordion-item:hover .rounds-summary-details-toggle {
        color: var(--secondary-color, #1f6f96);
    }

    .rounds-summary-direct-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 7px;
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--secondary-color, #1f6f96);
        background-color: #f0f7fb;
        border: 1px solid #d0e4f2;
        border-radius: 5px;
        text-decoration: none;
        transition: all 0.2s ease;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .rounds-summary-direct-btn:hover {
        background-color: var(--secondary-color, #1f6f96);
        color: #ffffff;
        border-color: var(--secondary-color, #1f6f96);
        box-shadow: 0 2px 5px rgba(31, 111, 150, 0.2);
    }

    .rounds-accordion-icon {
        transition: transform 0.25s ease;
        color: #64748b;
        font-size: 18px;
        flex-shrink: 0;
    }

    .rounds-accordion-item[open] > .rounds-accordion-summary .rounds-accordion-icon {
        transform: rotate(180deg);
        color: var(--secondary-color, #1f6f96);
    }

    .rounds-accordion-body {
        padding: 6px 6px;
        background: #ffffff;
        border-top: 1px solid #f0f6fa;
        font-size: 0.88rem;
        line-height: 1.55;
        color: #334155;
        box-sizing: border-box;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .rounds-info-text {
        margin-bottom: 0;
        color: #334155;
    }

    .rounds-info-text a {
        color: var(--primary-color, #0b3c5d);
        font-weight: 600;
        text-decoration: underline;
    }

    /* Nested Archive Section */
    .rounds-archive-wrapper {
        border-color: #e2e8f0;
        background: #f8fafc;
        margin-top: 4px;
    }

    .rounds-archive-wrapper[open] {
        border-color: #94a3b8;
    }

    .rounds-archive-body {
        padding: 5px 6px;
        background: #f8fafc;
        border-top: 1px solid #e2e8f0;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .rounds-archive-item {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
    }

    .rounds-archive-subsummary {
        padding: 4px 6px;
        background: #ffffff;
    }

    .rounds-archive-period-title {
        font-weight: 500;
        color: #475569;
        font-size: 0.82rem;
    }

    .rounds-archive-desc {
        font-size: 0.8rem;
        color: #64748b;
    }

    /* Each item fills its grid cell fully */
    #besoldungstabellen .main-category-item {
        width: 100%;
        box-sizing: border-box;
    }

    /* Each card stretches within its cell */
    #besoldungstabellen .quick-link-card {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: left;
        padding: 10px 15px;
        overflow: hidden;
    }

    .sub-category-item {
        width: 100%;
        display: flex;
        justify-content: center;
        box-sizing: border-box;
        margin-top: 0;
    }


    #besoldungstabellen .sub-category-item .quick-link-card {
        width: 100%;
    }

    /* ---- Responsive Breakpoints für "Besoldungstabellen" ---- */

    @media (max-width: 768px) {

        #besoldungstabellen #main-categories-container {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            padding: 0 0px;
            /* align with section-title */
        }

        #besoldungstabellen .quick-link-card {
            min-height: 50px;
        }

        #besoldungstabellen .quick-link-card h2 {
            font-size: 0.9rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }


        #besoldungstabellen .quick-link-content {
            gap: 10px;
        }

        #besoldungstabellen .quick-link-icon {
            font-size: 1.4rem;
        }

        #besoldungstabellen .quick-link-card h2 {
            font-size: 0.9rem;
        }
    }

    @media (max-width: 480px) {
        #besoldungstabellen #main-categories-container {
            grid-template-columns: 1fr;
            /* one per row */
            gap: 6px;
            padding: 0 0px;
            /* align with section-title */
        }

        #besoldungstabellen .quick-link-card {
            padding: 8px 10px;
            min-height: 45px;
        }

        #besoldungstabellen .quick-link-card h2 {
            font-size: 0.9rem;
            text-overflow: ellipsis;
        }

        #besoldungstabellen .quick-link-content {
            gap: 8px;
        }

        #besoldungstabellen .quick-link-icon {
            font-size: 1.2rem;
        }

    }

    @media (max-width: 360px) {
        #besoldungstabellen #main-categories-container {
            grid-template-columns: 1fr;
            /* one per row */
            gap: 6px;
            padding: 0 0px;
            /* align with section-title */
        }

        #besoldungstabellen .quick-link-card {
            min-height: 40px;
        }

        #besoldungstabellen .quick-link-card h2 {
            font-size: 0.9rem;
        }

        #besoldungstabellen .quick-link-icon {
            font-size: 1.1rem;
        }
    }

    /* =============================================================================
    STILE FÜR DYNAMISCH GELADENE TABELLEN
    ============================================================================= */

    .table-validity {
        font-size: 0.9em;
        color: #666;
        margin: 1rem 0 0.5em 0;
        /* Explicit margin control */
        padding: 0;
        line-height: 1.4;
    }

    .table-source {
        font-size: 0.9em;
        color: #666;
        margin: 1rem 0 0.5em 0;
        /* Explicit margin control */
        padding: 0;
        line-height: 1.4;
    }

    .table-source a {
        /* color: #007bff; */
        text-decoration: none;
    }

    .table-source a:hover {
        text-decoration: underline;
    }

    /* --- Fix mobile table wrapper issues --- */
    .table-wrapper {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        border-radius: 8px;
        padding: 0.5rem;
        margin: 0 0 1rem 0;
        box-sizing: border-box;
        background-color: var(--card-bg, #fff);
        box-shadow: var(--box-shadow, 0 4px 12px rgba(0, 0, 0, 0.08));
        border: 1px solid #e9ecef;
    }

    .table-wrapper:last-of-type {
        margin-bottom: 0;
    }

    /* Ensure horizontal scroll area has side padding on mobile */
    .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
        margin: 0;
        /* remove negative margins for consistent look */
        padding-left: 0.5rem;
        /* restore horizontal space */
        padding-right: 0.5rem;
        scroll-behavior: smooth;
        width: 100%;
        /* ✅ container is full width */
        display: block;
        /* justify-content: flex-start; */
        /* ✅ keep table left-aligned */
    }

    /* Prevent bounce-back when reaching end of scroll */
    .table-scroll::-webkit-scrollbar {
        -webkit-appearance: none;
        height: 8px;
    }

    .table-scroll::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: rgba(0, 0, 0, 0.2);
    }

    /* Make sure the table uses full scroll width without shrinking */
    .data-table {
        width: max-content;
        /* min-width: 100%; */
        min-width: auto;
        font-size: 0.8rem;
        table-layout: auto;
        border-collapse: collapse;
        /* margin: 0 auto;  */
    }

    .data-table th,
    .data-table td {
        padding: 0.5rem 0.5rem;
        /* Kompaktere Zellen */
        text-align: center;
        vertical-align: top;
        white-space: nowrap;
        line-height: 1.2;
        border: 1px solid #e9ecef;
    }

    .data-table thead th {
        background-color: #f8f9fa;
        font-weight: 600;
        color: var(--text-color, #495057);
        position: sticky;
        top: 0;
        z-index: 10;
        border-bottom: 2px solid #ced4da;
    }

    /* Spezieller Stil für die eingefrorene Spalte */
    .data-table th.sticky-col,
    .data-table td.sticky-col {
        position: sticky;
        left: 0;
        z-index: 11;
        background-color: #f8f9fa;
        font-weight: 600;
        border-right: 2px solid #ced4da;
    }

    .data-table td.sticky-col {
        background-color: #fff;
    }

    .data-table tbody tr:hover td:not(.sticky-col) {
        background-color: #f1f3f5;
    }

    .table-calc-link {
        color: inherit;
        text-decoration: none;
        display: inline-block;
        width: 100%;
        height: 100%;
        border-radius: 4px;
        transition: color 0.15s ease, text-decoration 0.15s ease, background-color 0.15s ease;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    @media (hover: hover) {
        .table-calc-link:hover {
            color: var(--primary-color, #0b3c5d);
            text-decoration: underline;
            font-weight: 600;
        }
    }

    .table-calc-link.is-selected-cell {
        background-color: #e8f0fe !important;
        color: var(--primary-color, #0b3c5d) !important;
        font-weight: 700 !important;
        outline: 2px solid var(--primary-color, #0b3c5d);
        border-radius: 4px;
    }

    /* Mobile Table Action Bar (Empfehlung C) */
    .table-mobile-action-bar {
        display: none;
    }

    @media (max-width: 768px) {
        .table-mobile-action-bar {
            display: flex;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 10000;
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border-top: 1px solid #d0d7de;
            box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
            padding: 0.65rem 0.9rem;
            padding-bottom: max(0.65rem, env(safe-area-inset-bottom));
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            transform: translateY(110%);
            transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
            opacity: 0;
            pointer-events: none;
        }

        .table-mobile-action-bar.is-visible {
            transform: translateY(0);
            opacity: 1;
            pointer-events: auto;
        }

        .table-bar-info {
            display: flex;
            flex-direction: column;
            min-width: 0;
            flex: 1;
        }

        .table-bar-badge {
            font-size: 0.725rem;
            font-weight: 600;
            color: #57606a;
            letter-spacing: 0.02em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .table-bar-value {
            font-size: 1.15rem;
            font-weight: 700;
            color: #1f2328;
            line-height: 1.25;
        }

        .table-bar-actions {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            flex-shrink: 0;
        }

        .table-bar-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            background-color: var(--primary-color, #0b3c5d);
            color: #ffffff !important;
            font-size: 0.85rem;
            font-weight: 600;
            padding: 0.55rem 0.85rem;
            border-radius: 6px;
            text-decoration: none;
            box-shadow: 0 2px 4px rgba(11, 60, 93, 0.2);
            white-space: nowrap;
            transition: background-color 0.15s ease;
        }

        .table-bar-btn:active {
            background-color: #163857;
        }

        .table-bar-close {
            background: transparent;
            border: none;
            color: #656d76;
            font-size: 1.5rem;
            line-height: 1;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 50%;
            padding: 0;
            margin: 0;
            flex-shrink: 0;
        }

        .table-bar-close:active {
            background-color: #eaeef2;
            color: #24292f;
        }
    }

    /* Qualification, Praktikum & Studium Tables (with longer row descriptions) */
    .data-table.table-qualifikation {
        width: max-content;
    }

    .data-table.table-qualifikation th,
    .data-table.table-qualifikation td {
        white-space: nowrap;
    }

    .data-table.table-qualifikation th.sticky-col,
    .data-table.table-qualifikation td.sticky-col {
        position: static;
        white-space: nowrap;
        border-right: 1px solid #e9ecef;
    }

    .table-wrapper h5#table-title,
    .table-wrapper h5.table-title {
        margin-top: 0;
        padding-left: 0.5rem;
        font-size: 1rem;
        color: var(--text-color, #343a40);
    }

    /* On smaller devices, avoid cutoff at right edge */
    @media (max-width: 768px) {
        .table-scroll {
            margin: 0;
            /* visually extend scroll to viewport edge */
            padding-left: 0;
            padding-right: 0;
            display: block;
            /* simpler layout on small screens */
        }

        .table-wrapper {
            padding-left: 5px;
            padding-right: 5px;
            display: block;
            /* ✅ allow full width on small screens */
        }

        .table-wrapper h5#table-title,
        .table-wrapper h5.table-title {
            padding-left: 0;
        }
    }






    /* Medium screens (≤768px): bring it in slightly */
    @media (max-width: 768px) {
        .container {
            padding: 0 10px;
        }
    }


    .info-icon {
        cursor: pointer;
        color: #0066cc;
        margin-left: 5px;
        font-size: 0.9em;
        vertical-align: super;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        pointer-events: auto;
    }

    .info-icon:active {
        transform: scale(0.95);
    }

    /* Style for the custom click/touch tooltip */
    .info-tooltip {
        background-color: #333;
        color: white;
        padding: 12px;
        /* Increased slightly for better readability */
        border-radius: 6px;
        font-size: 14px;

        /* 1. Responsiveness: Default for Mobile */
        width: 250px;
        max-width: 80vw;
        /* Prevents it from going off-screen on small phones */

        /* 2. Scrollable Logic */
        max-height: 200px;
        /* Limits height */
        overflow-y: auto;
        /* Adds scrollbar if text is too long */

        word-wrap: break-word;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        position: absolute;
        z-index: 1000;
        animation: fadeIn 0.2s ease-in-out;

        /* Optional: Smooth scrolling for internal content */
        scroll-behavior: smooth;
    }

    /* 3. Adjustments for Desktop */
    @media (min-width: 768px) {
        .info-tooltip {
            width: 400px;
            /* Wider for desktop */
            max-height: 300px;
            /* Taller before scrolling kicks in */
        }
    }

    /* Custom Scrollbar Styling (Optional - makes it look cleaner) */
    .info-tooltip::-webkit-scrollbar {
        width: 6px;
    }

    .info-tooltip::-webkit-scrollbar-thumb {
        background: #555;
        border-radius: 10px;
    }


    /* Set a smaller padding for the scroll container of the clone */
    .compact-zulage-clone .table-scroll {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0.25rem;
        /* Slightly smaller bottom padding */
    }

    /* --- Allow multi-line text specifically for the first row of cloned tables --- */
    .compact-zulage-clone tbody tr:first-child th,
    .compact-zulage-clone tbody tr:first-child td {
        white-space: normal;
        /* This allows text to wrap */
        vertical-align: top;
        /* Align text to the top for better multi-line appearance */
        width: 60px;
        /* Give it a specific width to encourage wrapping */
        min-width: 60px;
        /* Prevent it from shrinking too much */
    }

    .compact-zulage-clone .data-table th,
    .compact-zulage-clone .data-table td {
        /* Reduce vertical padding significantly */
        padding: 0.25rem 0.45rem;
        line-height: 1.1;
        /* Also tighten the line-height */
        white-space: nowrap;
    }

    .zulage-line {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem;
        border-bottom: 1px solid var(--border-color, #dee2e6);
        font-size: 0.9rem;
    }

    /* .zulage-line:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    } */

    /* Add this style block to your page */
    .zuschlags-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        align-items: start;
        width: 100%;
    }

    #zuschlags-container .quick-link-card {
        height: auto !important;
        max-width: 100%;
        margin-bottom: 5px;
        overflow: hidden;
        /* Prevents overflow issues */

        /* Trying to match form-control styling */
        padding: 6px 8px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        background-color: var(--card-bg);
        color: var(--text-color);

        /* New alignment styles to ensure exact height match */
        display: flex;
        align-items: center;
        /* Vertically centers the text */
        min-height: 36px;
    }


    /*     #zuschlags-container .quick-link-card h2 {
        font-size: 0.9rem;
        margin: 0;
        color: var(--text-color);
        font-weight: 400;
        text-align: left;
        white-space: normal;
        word-break: break-word;
        overflow: hidden;
        flex: 1;
        min-width: 0;
    } */
    #zuschlags-container .quick-link-card h2,
    #zuschlags-container .quick-link-card h3,
    #zuschlags-container .quick-link-card h4 {
        font-size: 0.9rem;
        margin: 0;
        color: var(--text-color);
        font-weight: 400;
        text-align: left;
        white-space: normal !important;
        word-break: break-word;
        overflow-wrap: break-word;
        line-height: 1.3;
        overflow: visible;
        flex: 1;
        min-width: 0;
    }

    .zuschlags-container .col-md-4 {
        padding: 0;
    }

    @media (max-width: 768px) {
        .zuschlags-container {
            gap: 10px;
        }

        #zuschlags-container .quick-link-card {
            width: 100%;
            max-width: 100%;
        }
    }

    /* Arzt-Zulagen: One-Click Presets */
    .btn-doctor-preset {
        transition: all 0.15s ease-in-out;
    }
    .btn-doctor-preset:hover {
        transform: translateY(-1px);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08) !important;
    }
    .btn-doctor-preset:active {
        transform: translateY(0);
    }


    /* =============================================================================
    STILE FÜR DIE SEITE "Brutto-Netto-Rechner" (#brutto-netto-rechner)
    ============================================================================= */
    .calculation-results {
        padding: 0px;
    }

    .result-row {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 10px;
    }

    .result-box {
        background: linear-gradient(135deg, var(--secondary-color) 0%, var(--mid-color) 100%);
        color: white;
        padding: 24px;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        flex: 1;
        /* Makes boxes take equal width */
        min-width: 0;
        /* Prevents overflow */
    }

    /* Desktop styles for result items */
    .result-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }

    .result-item:last-child {
        margin-bottom: 0;
    }

    .result-label {
        font-size: 0.95rem;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: rgba(255, 255, 255, 0.75);
    }

    .result-value {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--light-text);
    }

    .divider {
        height: 1px;
        background: rgba(255, 255, 255, 0.2);
        margin-bottom: 16px;
    }

    /* Action Buttons Container */
    .action-buttons {
        display: flex;
        gap: 20px;
        margin-top: 30px;
        flex-wrap: wrap;
        /* Keeps it responsive on mobile */
    }

    /* Individual Buttons */
    .action-buttons .btn {
        flex: 1;
        min-width: 80px;
        background-color: #f8f9fa;
        color: var(--text-color);
        padding: 8px 14px;
        border-radius: 6px;
        border: 1px solid #b3b3b3;
        /* Matching the card border */
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Button Content Alignment */
    .btn-content {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Hover States - Kept subtle to match the thin border aesthetic */
    .action-buttons .btn:hover {
        background-color: #f0f0f0;
        border-color: #ccc;
        /* Slightly darker on hover for feedback */
        transform: translateY(-1px);
    }

    .details-section {
        margin-top: 15px;
    }

    .summary-section h2,
    .details-section h5 {
        color: var(--primary-color);
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--border-color);
    }

    /* Mobile Responsive Styles */
    @media (max-width: 768px) {
        .result-row {
            flex-direction: column;
            gap: 12px;
            margin-bottom: 12px;
        }

        .result-box {
            padding: 16px 12px;
            width: 100%;
            min-height: auto;
            margin-bottom: 0;
            /* Ensure no extra bottom margin */
        }

        .result-item {
            margin-bottom: 10px;
        }

        .result-label {
            font-size: 0.88rem;
            letter-spacing: 0.6px;
            line-height: 1.3;
        }

        .result-value {
            font-size: 1.05rem;
            font-weight: 700;
            line-height: 1.3;
        }

        .divider {
            margin-bottom: 10px;
        }

        .details-section {
            margin-top: 5px;
        }

        .summary-section h2,
        .details-section h5 {
            margin-bottom: 12px;
        }

    }

    @media (max-width: 480px) {
        .result-row {
            gap: 6px;
            /* Reduce gap between the boxes for smaller screens */
            margin-bottom: 8px;
        }

        .result-box {
            padding: 14px 10px;
        }

        .result-item {
            margin-bottom: 6px;
        }

        .result-label {
            font-size: 0.82rem;
            letter-spacing: 0.5px;
            line-height: 1.2;
        }

        .result-value {
            font-size: 0.95rem;
            font-weight: 700;
            line-height: 1.2;
        }

        .divider {
            margin-bottom: 6px;
        }

        .summary-section h2,
        .details-section h5 {
            margin-bottom: 10px;
            padding-bottom: 6px;
        }

    }

    /* Details Section Header */
    .details-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--border-color);
        cursor: pointer;
        user-select: none;
    }

    .details-header h3 {
        color: var(--primary-color);
        margin: 0;
        padding: 0;
        border: none;
        flex: 1;
        text-align: left;
        font-size: 0.83rem;
        font-weight: bold;
    }

    .details-toggle-btn {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
        flex-shrink: 0;
    }

    .details-toggle-btn .toggle-icon {
        font-size: 24px;
        /* color: rgba(0, 0, 0, 0.35); */
        color: var(--text-color);
        transition: transform 0.3s ease, color 0.3s ease;
    }

    .details-header:hover .toggle-icon,
    .details-toggle-btn:hover .toggle-icon {
        color: rgba(0, 0, 0, 0.5);
    }

    .details-toggle-btn.expanded .toggle-icon {
        transform: rotate(180deg);
    }

    /* Details Content */
    .details-content {
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .details-content.visible {
        display: block;
        opacity: 1;
    }

    /* Details Cards */
    .details-card {
        background-color: var(--card-bg);
        border-radius: 6px;
        padding: 15px;
        /* box-shadow: var(--box-shadow); */
        border: 1px solid #e0e0e0;
        flex: 1;
        /* Makes cards take equal width */
        min-width: 0;
        /* Prevents overflow */
        display: flex;
        flex-direction: column;
    }

    /* Detail Rows */

    .detail-row,
    .deduction-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 44px;
        padding: 12px 0;
        border-bottom: 1px solid var(--border-color);
        background-color: transparent;
        transition: none;
    }

    .detail-row:hover,
    .deduction-row:hover {
        background-color: transparent;
        border-bottom: 1px solid #e9ecef;
    }

    .detail-row:last-child,
    .deduction-row:last-child {
        border-bottom: none;
    }

    .detail-row .label,
    .deduction-row .label {
        color: var(--text-color);
    }


    .detail-row .value.success {
        color: var(--text-color);
    }

    .detail-row.total .label {
        /* font-weight: 600; */
        font-weight: bold;
        color: var(--primary-color);
    }

    .detail-row.total .value {
        /* font-size: 18px; */
        font-weight: bold;
        color: var(--primary-color);
    }

    .detail-row.total {
        margin-top: auto;
        margin-bottom: 0px;
        border-top: 1.5px solid var(--border-color);
    }

    /* Apply same detail-row total styling to comparison results */
    .comparison-main .detail-row.total .label-text {
        font-weight: bold;
        color: var(--primary-color);
    }

    .comparison-main .detail-row.total .comparison-value {
        font-weight: bold;
        color: var(--primary-color);
    }

    .comparison-main .detail-row.total {
        margin-top: auto;
        margin-bottom: 0px;
        border-top: 1.5px solid var(--border-color);
    }

    .detail-row.total.comparison-brutto {
        border-bottom: none;
    }

    .deduction-row-total {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 44px;
        padding: 10px 0;
        border-bottom: 1px solid var(--border-color);
        background-color: transparent;
        transition: none;
    }

    .deduction-row-total .label {
        font-weight: 600;
        /* 500 Medium bold, 600 for more bold, 700 for total bold */
        color: var(--text-color);
    }

    .deduction-row-total .value {
        font-weight: 600;
        color: var(--text-color);
    }

    /* Apply the same deduction-row-total styling to comparison results */
    .comparison-main .deduction-row-total {
        /* We inherit the layout from .detail-row, so we only need to ensure borders/spacing match */
        border-bottom: 1px solid var(--border-color);
        background-color: transparent;
    }

    .comparison-main .deduction-row-total .label-text {
        font-weight: 600;
        color: var(--text-color);
    }

    .comparison-main .deduction-row-total .comparison-value {
        font-weight: 600;
        color: var(--text-color);
    }


    /* Mobile adjustments for details section */
    @media (max-width: 768px) {
        .details-header {
            margin-bottom: 8px;
        }

        .details-header h3 {
            font-size: 0.9rem;
        }

        .details-toggle-btn {
            padding: 5px 10px;
            margin-left: 8px;
        }

        .details-toggle-btn .toggle-icon {
            font-size: 20px;
        }
    }

    @media (max-width: 480px) {
        .details-header {
            padding: 4px;
        }

        .details-header h3 {
            font-size: 0.85rem;
        }

        .details-toggle-btn {
            padding: 4px 8px;
            margin-left: 6px;
        }

        .details-toggle-btn .toggle-icon {
            font-size: 18px;
        }

        .detail-row,
        .deduction-row,
        .deduction-row-total {
            height: 32px;
            padding: 6px 0;
        }
    }

    .details-card-row {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 20px;
    }

    /* Stack cards vertically in comparison mode */
    .comparison-main .details-card-row {
        flex-direction: column;
        gap: 8px;
        /* Reduced gap from 15px to 8px */
    }


    /* Mobile Responsive for details cards */
    @media (max-width: 768px) {
        .details-card-row {
            flex-direction: column;
            gap: 12px;
            margin-bottom: 12px;
        }

        .details-card {
            width: 100%;
            margin-bottom: 0;
        }
    }

    @media (max-width: 480px) {
        .details-card-row {
            gap: 8px;
            margin-bottom: 8px;
        }

        .details-card {
            padding: 10px 10px;
        }
    }

    /* =============================================================================
    Comparison Container & Layout
    ============================================================================= */
    .comparison-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 30px;
        padding: 0;
        width: 100%;
    }

    .calculation-column {
        min-width: 0;
        /* CSS Grid fix for text overflow */
    }

    .calc-card {
        border-radius: 8px;
        padding: 20px;
        background: white;
        height: 100%;
        /* Ensures cards are same height if one is longer */
        border: 2px solid var(--border-color);
        /* Fallback */
    }

    /* Dynamic Border Colors based on column position */
    .calculation-column:first-child .calc-card {
        border-color: var(--primary-color);
    }

    .calculation-column:last-child .calc-card {
        border-color: var(--primary-color);
    }

    .calc-header {
        text-align: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid var(--border-color);
    }

    .calc-header h2 {
        margin: 0;
    }

    /* Dynamic Text Colors for Header */
    .calculation-column:first-child .calc-header h2 {
        color: var(--primary-color);
    }

    .calculation-column:last-child .calc-header h2 {
        color: var(--primary-color);
    }

    /* Note: You didn't have inline styles for .details-section,
    but ensuring the headers look right: */
    .details-header h3 {
        margin-bottom: 0px;
        margin-top: 0;
        flex: 1;
        text-align: left;
    }

    .laufzeit-display {
        margin-top: 10px;
        text-align: left;
        font-size: 0.82rem;
        color: var(--secondary-text-color);
    }

    #backToForm {
        background-color: var(--mid-color);
    }

    #newComparison {
        background-color: var(--secondary-color);
    }

    /* Disclaimer Section */
    .disclaimer {
        margin-top: 25px;
        padding: 15px;
        background-color: #f8f9fa;
        border-radius: 6px;
    }

    .disclaimer p {
        margin: 0;
        font-size: 0.82rem;
        color: var(--text-color);
        opacity: 0.75;
        line-height: 1.5;
    }

    @media (max-width: 480px) {
        .comparison-container {
            grid-template-columns: 1fr;
            gap: 20px;
        }
    }


    /* =============================================================================
    comparison styles
    ============================================================================= */

    .comparison-results {
        padding: 0;
    }

    /* Container for side-by-side comparison result boxes */
    .comparison-result-boxes-container {
        display: flex;
        gap: 30px;
        margin-bottom: 25px;
        width: 100%;
    }

    .comparison-result-boxes {
        flex: 1;
        background-color: transparent;
        border-radius: 0px;
        padding: 0px;
        box-shadow: none;
        min-width: 0;
        /* Prevents flex items from overflowing */
    }

    /* Make result boxes smaller in comparison mode */
    .comparison-result-boxes .result-box {
        padding: 16px;
        border-radius: 8px;
    }

    .comparison-result-boxes .result-item {
        margin-bottom: 10px;
    }

    .comparison-result-boxes .result-item:last-child {
        margin-bottom: 0px;
    }

    .comparison-result-boxes .result-label {
        font-size: 0.85rem;
        letter-spacing: 0.5px;
    }

    .comparison-result-boxes .result-value {
        font-size: 1.05rem;
        font-weight: 700;
    }

    .comparison-result-boxes .divider {
        margin-bottom: 12px;
    }

    .comparison-result-boxes .comparison-calculation-header h2 {
        font-size: 1.05rem;
        margin: 0 0 6px 0;
        line-height: 1.3;
    }

    .comparison-result-boxes .laufzeit-display {
        font-size: 0.8rem;
        margin-top: 5px;
    }

    .comparison-result-boxes .result-row {
        gap: 12px;
        margin-bottom: 0;
    }

    .comparison-calculation-header {
        text-align: left;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--border-color);
    }

    .comparison-calculation-header h2 {
        margin: 0 0 8px 0;
        color: var(--primary-color);
        font-size: 1.2rem;
    }

    .comparison-calculation-header .laufzeit-display {
        font-size: 0.82rem;
        color: var(--secondary-text-color);
    }

    .comparison-headers {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
    }

    .comparison-header {
        flex: 1;
        background-color: var(--card-bg);
        border-radius: 8px;
        padding: 15px;
        box-shadow: var(--box-shadow);
        text-align: center;
    }

    .comparison-header h2 {
        margin: 0 0 10px 0;
        color: var(--primary-color);
        font-size: 1.1rem;
    }

    .comparison-header .laufzeit-display {
        font-size: 0.82rem;
        color: var(--secondary-text-color);
    }

    .comparison-card {
        background-color: var(--card-bg);
        border-radius: 8px;
        box-shadow: var(--box-shadow);
        margin-bottom: 20px;
        overflow: hidden;
    }

    .comparison-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
        color: white;
    }

    .comparison-card-header h2 {
        margin: 0;
        font-size: 1.2rem;
    }

    .card-toggle-btn,
    .section-toggle-btn {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .card-toggle-btn .toggle-icon,
    .section-toggle-btn .toggle-icon {
        font-size: 24px;
        /* color: rgba(255, 255, 255, 0.8); */
        color: var(--text-color);
        transition: transform 0.3s ease, color 0.3s ease;
    }

    .card-toggle-btn:hover .toggle-icon,
    .section-toggle-btn:hover .toggle-icon {
        color: white;
    }

    .card-toggle-btn.expanded .toggle-icon,
    .section-toggle-btn.expanded .toggle-icon {
        transform: rotate(180deg);
    }

    .comparison-card-content {
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .comparison-card-content.visible {
        display: block;
        opacity: 1;
    }

    .comparison-section {
        border-bottom: 1px solid var(--border-color);
    }

    .comparison-section:last-child {
        border-bottom: none;
    }

    .comparison-section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 20px;
        background-color: rgba(0, 0, 0, 0.05);
    }

    .comparison-section-header h2 {
        margin: 0;
        color: var(--primary-color);
        font-size: 1rem;
    }

    .comparison-section-content {
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .comparison-section-content.visible {
        display: block;
        opacity: 1;
    }

    .comparison-table {
        padding: 15px 20px;
    }

    .comparison-value {
        flex: 1;
        font-size: 0.95rem;
    }

    .comparison-value.first-value {
        text-align: left;
    }

    .comparison-value.second-value {
        text-align: right;
    }

    .comparison-label {
        flex: 1.2;
        text-align: center;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }

    .comparison-label .label-text {
        color: var(--text-color);
    }

    .comparison-label .info-icon {
        font-size: 0.8rem;
        color: var(--secondary-color);
        cursor: pointer;
    }


    /* Mobile-specific adjustments for comparison */
    @media (max-width: 768px) {
        .comparison-headers {
            display: flex;
            flex-direction: row;
            /* CHANGED: Keeps them side-by-side */
            gap: 10px;
            /* Reduced gap to save space */
            width: 100%;
        }

        .comparison-header {
            flex: 1;
            /* Ensures they take up equal space (50/50) */
            width: 50%;
            /* Explicit width for stability */
            padding: 10px 5px;
            /* Reduced padding for small screens */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .comparison-header h2 {
            font-size: 0.85rem;
            /* Smaller font to prevent breaking */
            line-height: 1.2;
            margin-bottom: 5px;
            word-break: break-word;
            /* Prevents long words from overflowing */
        }

        /* Stack comparison boxes vertically on mobile */
        .comparison-result-boxes-container {
            flex-direction: column;
            gap: 15px;
            margin-bottom: 15px;
        }

        .comparison-result-boxes {
            padding: 0px;
        }

        /* Make result boxes even smaller on mobile */
        .comparison-result-boxes .result-box {
            padding: 12px;
        }

        .comparison-result-boxes .result-item {
            margin-bottom: 10px;
        }

        .comparison-result-boxes .result-label {
            font-size: 0.82rem;
            letter-spacing: 0.4px;
        }

        .comparison-result-boxes .result-value {
            font-size: 0.98rem;
            font-weight: 700;
        }

        .comparison-result-boxes .divider {
            margin-bottom: 10px;
        }

        .comparison-result-boxes .comparison-calculation-header h2 {
            font-size: 0.98rem;
        }

        .comparison-result-boxes .laufzeit-display {
            font-size: 0.76rem;
        }

        .comparison-result-boxes .result-row {
            gap: 10px;
        }

        .comparison-calculation-header {
            margin-bottom: 12px;
            padding-bottom: 10px;
        }

        .comparison-header .laufzeit-display {
            font-size: 0.76rem;
        }

        .comparison-card-header {
            padding: 12px 15px;
        }

        .comparison-card-header h2 {
            font-size: 1.1rem;
        }

        .comparison-section-header {
            padding: 10px 15px;
        }

        .comparison-table {
            padding: 10px 15px;
        }

        .comparison-value {
            font-size: 0.9rem;
        }

        .comparison-label {
            font-size: 0.85rem;
        }

    }

    @media (max-width: 480px) {
        .comparison-header {
            padding: 10px 12px;
        }

        .comparison-header h2 {
            font-size: 0.9rem;
        }

        /* Keep stacked layout on very small screens */
        .comparison-result-boxes-container {
            flex-direction: column;
            gap: 12px;
            margin-bottom: 5px;
        }

        .comparison-result-boxes {
            padding: 0px;
        }

        /* Make result boxes even smaller on very small screens */
        .comparison-result-boxes .result-box {
            padding: 10px;
        }

        .comparison-result-boxes .result-item {
            margin-bottom: 8px;
        }

        .comparison-result-boxes .result-label {
            font-size: 0.8rem;
            letter-spacing: 0.3px;
        }

        .comparison-result-boxes .result-value {
            font-size: 0.92rem;
            font-weight: 700;
        }

        .comparison-result-boxes .divider {
            margin-bottom: 8px;
        }

        .comparison-result-boxes .comparison-calculation-header h2 {
            font-size: 0.95rem;
        }

        .comparison-result-boxes .laufzeit-display {
            font-size: 0.74rem;
        }

        .comparison-result-boxes .result-row {
            gap: 8px;
        }

        .comparison-calculation-header {
            margin-bottom: 10px;
            padding-bottom: 8px;
        }

        .comparison-calculation-header h2 {
            font-size: 0.9rem;
        }

        .comparison-card-header {
            padding: 10px 12px;
        }

        .comparison-card-header h2 {
            font-size: 1rem;
        }

        .comparison-section-header {
            padding: 8px 12px;
        }

        .comparison-section-header h2 {
            font-size: 0.9rem;
        }

        .comparison-table {
            padding: 8px 12px;
        }

        .comparison-value {
            font-size: 0.85rem;
        }

        .comparison-label {
            font-size: 0.8rem;
            flex: 1.5;
            /* Give more space to labels on very small screens */
        }
    }

    /* Mobile Comparison Box Styles */
    .desktop-only {
        display: block;
    }

    .mobile-only {
        display: none;
    }

    /* Hide desktop elements on mobile */
    @media (max-width: 768px) {
        .desktop-only {
            display: none !important;
        }

        .mobile-only {
            display: block !important;
        }

    }

    @media (max-width: 480px) {

        /* Mobile comparison layout styles */
        .result-value-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            gap: 10px;
        }

        .result-value-left {
            flex: 1;
            text-align: left;
            font-size: 1rem;
            color: var(--light-text);
            font-weight: 600;
        }

        .result-value-right {
            flex: 1;
            text-align: right;
            font-size: 1rem;
            color: var(--light-text);
            font-weight: 600;
        }

        /* Mobile-specific adjustments for comparison layout */
        @media (max-width: 768px) {
            .result-value-container {
                gap: 8px;
            }

            .result-value-left,
            .result-value-right {
                font-size: 0.95rem;
            }
        }

        @media (max-width: 480px) {
            .result-value-container {
                gap: 6px;
            }

            .result-value-left,
            .result-value-right {
                font-size: 0.9rem;
            }
        }
    }

    /* =============================================================================
   SPECIFIC OVERRIDES FOR SUMMARY SECTION (Centering Layout)
   ============================================================================= */

    /* 1. Set the item to relative so we can absolutely position the label inside it */
    .summary-section.mobile-only .result-item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        /* Helps center vertically */
        min-height: 2rem;
        /* Ensures height for the absolute label */
    }

    /* 2. Position the Label perfectly in the center */
    .summary-section.mobile-only .result-label {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        /* Shifts it back by 50% of its own width to center perfectly */
        z-index: 1;
        /* Ensures it sits on top if space gets tight */
        white-space: nowrap;
        text-align: center;
        width: auto;
    }

    /* 3. Make the value container take full width and push values to edges */
    .summary-section.mobile-only .result-value-container {
        width: 100%;
        display: flex;
        justify-content: space-between;
        /* Pins left value to left, right value to right */
        align-items: center;
        gap: 0px;
        /* Remove gap so they push fully to edges */
    }

    /* 4. Ensure text alignment is strict */
    .summary-section.mobile-only .result-value-left {
        text-align: left;
    }

    .summary-section.mobile-only .result-value-right {
        text-align: right;
    }

    /* =============================================================================
NEW COMPARISON CARD LAYOUT STYLES
============================================================================= */

    /* Comparison row layout with label in the middle */
    .comparison-results .detail-row {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid var(--border-color);
    }

    .comparison-results .detail-row:last-child {
        border-bottom: none;
    }

    .comparison-results .detail-row.total {
        font-weight: bold;
        border-top: 1.5px solid var(--border-color);
        margin-top: auto;
        margin-bottom: 0px;
    }

    .comparison-results .comparison-value {
        flex: 1;
        display: flex;
        align-items: center;
    }

    .comparison-results .comparison-value.first-value {
        justify-content: flex-end;
        /* padding-right: 15px; */
    }

    .comparison-results .comparison-value.second-value {
        justify-content: flex-start;
        /* padding-left: 15px; */
    }

    .comparison-results .comparison-label {
        flex: 1.2;
        text-align: center;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .comparison-results .comparison-label .label-text {
        color: var(--text-color);
    }

    .comparison-results .detail-row.total .comparison-label .label-text {
        color: var(--primary-color);
        font-weight: bold;
    }

    /* Info icons in comparison mode */
    .comparison-results .comparison-value .info-icon {
        font-size: 0.8rem;
        color: #0066cc;
        margin: 0 5px;
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    /* Desktop layout for new comparison structure */
    .comparison-detail-row .comparison-value-container {
        display: contents;
    }

    .comparison-detail-row .first-value {
        order: 1;
    }

    .comparison-detail-row .comparison-label {
        order: 2;
    }

    .comparison-detail-row .second-value {
        order: 3;
    }

    .desktop-hide {
        display: none !important;
    }

    /* Mobile adjustments for comparison card layout: 
       STACKED LABEL DESIGN similar to result-section headers */
    @media (max-width: 600px) {
        .comparison-detail-row {
            flex-direction: column !important;
            align-items: center !important;
            padding: 8px 0;
            height: auto !important;
        }

        .comparison-detail-row .comparison-label {
            order: -1;
            /* Header style */
            width: 100%;
            flex: none;
            margin-bottom: 0px;
            /* Gap reduced to 0 */
            text-align: center;
            justify-content: center;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-weight: 600;
            color: var(--primary-color);
            opacity: 0.9;
        }

        .comparison-detail-row .comparison-value-container {
            display: flex;
            width: 100%;
            justify-content: space-between;
            align-items: center;
        }

        .comparison-detail-row .comparison-value {
            flex: 1;
            font-size: 0.9rem;
            /* Match result-value-left/right */
            font-weight: 600;
            order: unset;
            /* Reset desktop order to allow HTML flow (V1 | Divider | V2) */
        }

        .comparison-detail-row .comparison-value.first-value {
            justify-content: flex-start !important;
            /* Pegged to the left */
            text-align: left;
            padding-right: 5px;
        }

        .comparison-detail-row .comparison-value.second-value {
            justify-content: flex-end !important;
            /* Pegged to the right */
            text-align: right;
            padding-left: 5px;
        }

        .comparison-detail-row .desktop-hide {
            display: flex !important;
        }

        .comparison-detail-row .vertical-divider-grey {
            margin: 0 auto;
            /* Centered divider */
            height: 20px;
        }

        .comparison-detail-row .value-content {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        /* Adjust overall card padding in comparison mode on mobile */
        .comparison-main .details-card {
            padding: 0px 12px;
            /* 0 top/bottom, 12 left/right */
        }
    }

    @media (max-width: 480px) {
        .comparison-detail-row {
            padding: 8px 0;
        }

        .comparison-detail-row .comparison-label {
            font-size: 0.75rem;
            margin-bottom: 0px;
        }

        .comparison-detail-row .comparison-value {
            font-size: 0.85rem;
            /* Match mobile result-value */
        }
    }

    /* Container for the Value AND the Difference */
    .result-right-col {
        display: flex;
        flex-direction: column;
        /* Stacks Value on top, Difference below */
        align-items: flex-end;
        /* Aligns everything to the right */
        justify-content: center;
    }

    /* Style for the difference line itself */
    .diff-line {
        font-size: 0.85em;
        /* Slightly smaller than main value */
        font-weight: 600;
        margin-top: 10px;
        /* Small gap between value and diff */
    }

    /* Color definitions */
    .diff-positive {
        color: var(--success-color, #2ecc71);
    }

    .diff-negative {
        color: var(--error-color, #e74c3c);
    }

    /* Optional: Make the percentage distinct (e.g. smaller or lighter) */
    .diff-percent {
        opacity: 0.9;
        font-size: 0.9em;
        margin-left: 4px;
    }

    h1 {
        font-size: clamp(1.45rem, 2.2vw, 2.05rem);
        margin-top: 10px;
    }

    @media (max-width: 768px) {
        h1 {
            font-size: 1.35rem;
            margin-top: 9px;
        }
    }

    @media (max-width: 480px) {
        h1 {
            font-size: 1.25rem;
            margin-top: 8px;
        }
    }


    /* Center icons and text nicely */
    .btn-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    /* =============================================================================
   DESKTOP OVERRIDE: Left-Pinned Label with Overlay Values
   ============================================================================= */

    /* 1. Container setup */
    .comparison-result-boxes .result-item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        /* Values stay pinned to the right */
        min-height: 2.8rem;
        /* Sufficient height for two lines of data */
        padding: 0px 0;
        width: 100%;
    }

    /* 2. Position the Label pegged to the left */
    .comparison-result-boxes .result-label {
        position: absolute;
        left: 0;
        /* Pinned to the left */
        top: 50%;
        transform: translateY(-50%);
        /* Centered vertically within the row */
        z-index: 2;
        /* Sits above the right-col if they overlap */
        white-space: nowrap;
        font-weight: 500;
        pointer-events: auto;
        /* Label needs pointer-events: auto to pass clicks to info-icons */
    }

    /* 3. The value column takes full width */
    .comparison-result-boxes .result-right-col {
        width: 100%;
        text-align: right;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        z-index: 1;
        /* Sits behind the label */
    }

    /* 4. Ensure data doesn't wrap and can extend to the left as much as needed */
    .comparison-result-boxes .result-value,
    .comparison-result-boxes .diff-line {
        width: 100%;
        white-space: nowrap;
        line-height: 1.5;
    }


    /* --- New Header Back Button Styles --- */

    /* Parent container styles */
    .mobile-back-button-header {
        display: none;
        /* Hidden by default */
        align-items: center;
    }

    /* The actual button styling */
    #mobileHeaderBack {
        background-color: transparent;
        color: var(--light-text);
        border: none;
        padding: 4px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s;
        margin-right: 10px;
    }

    /* Optional: Add a hover effect since you had a transition defined */
    #mobileHeaderBack:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    /* Icon size adjustments */
    #mobileHeaderBack .material-symbols-outlined {
        font-size: 20px;
    }

    .calculation-results .summary-header h2,
    .summary-section.mobile-only .summary-header h2 {
        font-size: 1rem;
        margin: 0 0 6px 0;
        line-height: 1.3;
    }

    /* Mobile back button for calculation results */
    @media (max-width: 768px) {
        .mobile-back-button-header {
            display: none;
            /* CHANGED: default to hidden to prevent flicker */
            /* JS will change this to 'flex' when needed */
        }

        /* Adjust header layout on mobile when showing results */
        .calculation-results .summary-header {
            flex-wrap: nowrap;
        }

        .calculation-results .summary-header h2,
        .summary-section.mobile-only .summary-header h2 {
            font-size: 0.9rem;
            text-align: center;
            padding-right: 0px;
        }

        /* Adjust logo when back button is visible */
        .mobile-back-button-header~.logo {
            flex: 1;
            min-width: 0;
        }

        #backToForm {
            display: none !important;
            /* Hidden when on mobile */
        }
    }

    /* Force hide on desktop, overriding JS inline styles */
    @media (min-width: 769px) {
        .mobile-back-button-header {
            display: none !important;
        }
    }

    @media (max-width: 480px) {
        .calculation-results .summary-header h2 {
            font-size: 0.9rem;
        }
    }

    /* =============================================================================
   DISABLED STATE (For content not yet ready)
   ============================================================================= */

    .quick-link-card.is-disabled {
        /* Visual cues */
        opacity: 0.8;
        /* Make it semi-transparent */
        filter: grayscale(100%);
        /* Remove color to make it look inactive */
        background-color: #f0f0f0;
        /* Optional: Light gray background */
        cursor: default;
        /* Reset cursor */

        /* Functional disabling */
        pointer-events: none;
        /* Prevents ALL clicking and hovering interactions */
        box-shadow: none;
        /* Remove the shadow depth */
    }

    /* Ensure hover animations don't happen even if pointer-events fails (failsafe) */
    .quick-link-card.is-disabled:hover {
        transform: none;
        box-shadow: none;
        background-color: #f0f0f0;
    }

    .quick-link-card.is-disabled .quick-link-icon,
    .quick-link-card.is-disabled h2 {
        color: #999;
        /* Make text and icon gray */
    }

    /* Style specifically for disabled options in dropdowns */
    select option:disabled {
        color: #a0a0a0;
        /* Light grey text */
        background-color: #f4f4f4;
        /* Optional: very light grey background */
        font-style: italic;
        /* Adds a nice visual cue */
    }

    /* Specific layout for Impressum/Legal pages */
    .cards-container.legal-container {
        grid-template-columns: 1fr;
        /* Forces a single column */
        margin-left: auto;
        /* Centers the container if max-width is used */
        margin-right: auto;
        /* Centers the container if max-width is used */
    }


    .top-disclaimer {
        display: none;
        /* CHANGED: Hide by default to prevent flickering */
        flex-direction: row;
        /* Erzwingt die Ausrichtung in einer Zeile */
        justify-content: center;
        /* Zentriert den Inhalt horizontal */
        align-items: center;
        /* Zentriert den Inhalt vertikal */
        flex-wrap: nowrap;
        /* Verhindert strikt den Zeilenumbruch */

        background-color: #f4f4f4;
        color: #555;
        font-size: 0.82rem;
        padding: 6px 10px;
        border-bottom: 1px solid #ddd;
        width: 100%;
        /* Nimmt die volle Breite ein */
    }

    .close-disclaimer {
        /* 1. Resetting native mobile styles (CRITICAL FIX) */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        /* 2. Ensuring no borders or shadows remain */
        background: transparent !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        /* Removes Android shadows */

        color: #555;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin-left: 6px;
        /* Slightly increased for visual breathing room */
        flex-shrink: 0;
        transition: color 0.2s;
        line-height: 1;

        /* 3. Increase clickable area without changing visual size */
        min-width: 20px;
        min-height: 20px;
    }

    .close-disclaimer:hover {
        color: #000;
        background: transparent !important;
    }

    /* Desktop Icon Size */
    .close-disclaimer .material-symbols-outlined {
        font-size: 18px;
        /* 18-20px is standard for desktop */
        font-variation-settings: 'OPSZ' 20, 'wght' 400;
    }

    /* Mobile Optimization */
    @media (max-width: 600px) {
        .top-disclaimer {
            font-size: 0.78rem;
            padding: 6px 8px;
            /* Slightly more padding for touch usage */
        }

        .close-disclaimer .material-symbols-outlined {
            /* Keep the icon proportional to text */
            font-size: 16px;
            font-weight: bold;
            /* Make the X slightly thicker on small screens */
        }

        /* Ensures the button doesn't have a background on tap on mobile */
        .close-disclaimer:active {
            background-color: transparent !important;
        }
    }

    /* Status Bar  */
    .status-bar {
        background-color: #fff;
        border: 1px solid #e1e4e8;
        border-radius: 8px;
        padding: 1rem;
        margin: 0 auto;
        /* max-width: 1000px; */
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
    }

    .status-item {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .dot {
        height: 10px;
        width: 10px;
        border-radius: 50%;
        display: inline-block;
    }

    .dot-green {
        background-color: #27ae60;
    }

    .dot-yellow {
        background-color: #f1c40f;
    }

    /* Mobile Adjustments */
    @media (max-width: 768px) {
        .status-bar {
            flex-direction: column;
            /* Stack rows vertically */
            align-items: flex-start;
            /* Peg everything to the left */
            gap: 0.75rem;
        }

        .status-item {
            display: flex;
            align-items: flex-start;
            /* Aligns dot with the first line of text */
            text-align: left;
        }

        .dot {
            flex-shrink: 0;
            /* Prevents dot from squishing when text is long */
            margin-top: 0.35rem;
            /* Precise alignment with the first line of text */
        }
    }


    /* Feature Grid für Vergleich */
    .feature-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
        /* max-width: 1000px; */
        margin: 0 auto 1.5rem auto;
    }

    .feature-card {
        background: white;
        padding: 1.5rem;
        border-radius: 12px;
        border: 1px solid #eee;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .feature-card h2 {
        color: #2c3e50;
        margin-bottom: 0.5rem;
    }

    .feature-card p {
        color: #666;
        font-size: 0.95rem;
        line-height: 1.5;
    }

    /* Container for Icon and Title */
    .feature-card-header {
        display: flex;
        align-items: center;
        /* Vertically centers icon and text */
        gap: 12px;
        /* Space between icon and text */
        margin-bottom: 1rem;
        /* Space between header and paragraph */
    }

    /* Ensure the icon doesn't have extra bottom margin anymore */
    .feature-card-header .material-symbols-outlined {
        margin-bottom: 0 !important;
        color: var(--secondary-color);
        font-size: 1.2rem;
        /* Keep this as is, or bump to 1.5rem if it looks too small */
        flex-shrink: 0;
        display: inline-block;
        vertical-align: middle;
        /* Ensures it aligns nicely with your H2 text */
    }

    /* Remove default margin from h2 so it stays centered with the icon */
    .feature-card-header h2 {
        margin: 0;
        color: #2c3e50;
        /* font-size: 1.2rem;
        font-weight: 700; */
        font-size: 1.17rem;
        font-weight: bold;
    }

    /* CSS für die Hero-Card - Jetzt angepasst an Feature-Cards */
    .hero-card {
        background: white;
        padding: 1.5rem;
        border-radius: 12px;
        border: 1px solid #eee;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        text-align: center;
        margin-bottom: 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* max-width: 1000px; */
        margin: 1.5rem auto;
        /* Changed: auto handles horizontal centering */
    }

    .hero-title {
        font-size: clamp(1.5rem, 2.5vw, 2.15rem);
        line-height: 1.25;
        color: #2c3e50;
        margin-bottom: 0.5rem;
        font-weight: 700;
        margin-top: 0;
    }

    .hero-text {
        /* Adjusted: Now matches the 0.95rem of .feature-card p */
        font-size: 0.95rem;
        color: #666;
        max-width: 800px;
        margin-bottom: 1.5rem;
        line-height: 1.5;
    }

    .hero-btn {
        background-color: var(--secondary-color);
        color: white;
        padding: 0.8rem 2rem;
        /* Etwas kompakter */
        border-radius: 8px;
        text-decoration: none;
        font-weight: 600;
        font-size: 1rem;
        transition: transform 0.2s, background-color 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    .hero-btn:hover {
        background-color: var(--primary-color);
        transform: translateY(-2px);
    }

    .tools-link {
        margin-top: 1rem;
        color: #666;
        font-size: 0.9rem;
        text-decoration: underline;
        text-decoration-color: #ccc;
    }

    .tools-link:hover {
        color: var(--primary-color);
        text-decoration-color: var(--secondary-color);
    }

    /* Mobile Anpassung */
    @media (max-width: 768px) {
        .hero-card {
            padding: 2rem 1rem;
        }

        .hero-title {
            font-size: 1.5rem;
        }
    }

    .card-link-list {
        list-style: none;
        /* Removes the dots */
        padding: 0;
        margin: 0;
    }

    .card-link-list li {
        margin-bottom: 10px;
        /* Adds space between links without using <br> */
    }

    .card-link-list li a {
        text-decoration: none;
        color: var(--primary-color);
        transition: color 0.2s ease;
    }

    .card-link-list li a:hover {
        color: var(--accent-color);
        text-decoration: underline;
    }



    /* Container for each Label + Box pair */
    .result-group {
        margin-bottom: 5px;
        width: 100%;
    }

    /* The Label now sits above the box */
    .result-section-label {
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--primary-color);
        margin-bottom: 2px;
        font-weight: 600;
        text-align: center;
        display: block;
        width: 100%;
    }

    /* Flex container to hold the two sides and the vertical line */
    .result-split-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .result-value-left,
    .result-value-right {
        flex: 1;
        font-size: 0.95rem;
        font-weight: 600;
    }

    .result-value-left {
        text-align: left;
    }

    .result-value-right {
        text-align: right;
    }

    /* The Vertical Divider */
    .vertical-divider {
        width: 1px;
        height: 25px;
        /* Set a specific height to make it shorter than the box */
        /* Makes it as tall as the content */
        background: rgba(255, 255, 255, 0.3);
        /* Soft white line */
        margin: 0 20px;
    }

    @media (max-width: 768px) {
        .result-box {
            padding: 10px 16px;
        }

        .diff-line {
            font-weight: 600;
            margin-top: 3px;
        }
    }

    /* Mobile Adjustments */
    @media (max-width: 480px) {
        .result-section-label {
            font-size: 0.85rem;
            margin-bottom: 1px;
        }

        .result-box {
            padding: 8px 12px;
        }

        .diff-line {
            font-weight: 600;
            margin-top: 2px;
        }

        .result-value-left,
        .result-value-right {
            font-size: 0.9rem;
            font-weight: 600;
        }

        .vertical-divider {
            margin: 0 15px;
        }
    }

    /* Vertical divider for the header - Greyish #666 */
    .vertical-divider-grey {
        width: 1px;
        height: 30px;
        /* This defines the total "hit area" height */
        background: transparent;
        position: relative;
        margin: 0 5px;
        display: flex;
        align-items: center;
    }

    .vertical-divider-grey::after {
        content: "";
        position: absolute;
        /* This creates the 60% height effect */
        top: 20%;
        bottom: 20%;
        left: 0;
        width: 1px;
        background-color: #666;
        /* Greyish color */
    }

    /* Ensure mobile headers don't crowd the line */
    @media (max-width: 480px) {
        .vertical-divider-grey {
            margin: 0 10px;
            height: 20px;
        }
    }

    .detailsToggleBtn {
        color: var(--text-color);
    }

    /* Den Container stylen, damit auch die Punkte (•) die richtige Größe und Zeilenhöhe haben */
    #schnellzugriff .inline-links {
        margin-bottom: 1rem;
        line-height: 1.5;
        font-size: 0.95rem;
    }

    /* Die Links durch die vorangestellte ID stärker gewichten */
    #schnellzugriff .inline-links a {
        color: inherit;
        text-decoration: underline;
        font-size: 0.95rem;
        /* Zur Sicherheit vererben/überschreiben */
        line-height: 1.5;
    }

    /* =========================================================
       SEO INFO BOX (Brutto-Netto-Rechner, Single-Modus)
    ========================================================= */
    #rechner-seo-info,
    #pension-seo-info,
    #krankenversicherung-seo-info,
    #du-seo-info,
    #tvl-hoehergruppierung-seo-info,
    #vergleich-seo-info,
    #nachzahlung-seo-info,
    .seo-info {
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 1rem 1.25rem;
        margin-top: 2rem;
        background-color: var(--card-bg);
        font-size: 0.875rem;
        color: var(--text-color);
        opacity: 0.85;
        animation: fadeIn 0.3s ease;
    }

    #rechner-seo-info.is-hidden,
    #pension-seo-info.is-hidden,
    #krankenversicherung-seo-info.is-hidden,
    #du-seo-info.is-hidden,
    #tvl-hoehergruppierung-seo-info.is-hidden,
    #vergleich-seo-info.is-hidden,
    #nachzahlung-seo-info.is-hidden,
    .seo-info.is-hidden {
        display: none;
    }

    #rechner-seo-info p,
    #pension-seo-info p,
    #krankenversicherung-seo-info p,
    #du-seo-info p,
    #tvl-hoehergruppierung-seo-info p,
    #vergleich-seo-info p,
    #nachzahlung-seo-info p,
    .seo-info p {
        margin-bottom: 0.5rem;
        line-height: 1.5;
    }

    #rechner-seo-info ul,
    #pension-seo-info ul,
    #krankenversicherung-seo-info ul,
    #du-seo-info ul,
    #tvl-hoehergruppierung-seo-info ul,
    #tvoed-hoehergruppierung-seo-info ul,
    #vergleich-seo-info ul,
    #nachzahlung-seo-info ul,
    .seo-info ul {
        margin: 0.35rem 0 0.5rem 0;
        padding-left: 1.5rem;
        line-height: 1.6;
    }

    #rechner-seo-info li,
    #pension-seo-info li,
    #krankenversicherung-seo-info li,
    #du-seo-info li,
    #tvl-hoehergruppierung-seo-info li,
    #vergleich-seo-info li,
    #nachzahlung-seo-info li,
    .seo-info li {
        margin-bottom: 0.2rem;
    }

    #rechner-seo-info .seo-info-title,
    #pension-seo-info .seo-info-title,
    #krankenversicherung-seo-info .seo-info-title,
    #du-seo-info .seo-info-title,
    #tvl-hoehergruppierung-seo-info .seo-info-title,
    #vergleich-seo-info .seo-info-title,
    #nachzahlung-seo-info .seo-info-title,
    .seo-info .seo-info-title {
        font-weight: 600;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--secondary-color);
        margin-bottom: 0.6rem;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .seo-info-links {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        margin-top: 0.85rem;
    }

    .seo-info-links .seo-info-link {
        margin-top: 0 !important;
    }

    #rechner-seo-info .seo-info-link,
    #pension-seo-info .seo-info-link,
    #krankenversicherung-seo-info .seo-info-link,
    #du-seo-info .seo-info-link,
    #tvl-hoehergruppierung-seo-info .seo-info-link,
    #vergleich-seo-info .seo-info-link,
    #nachzahlung-seo-info .seo-info-link,
    .seo-info .seo-info-link {
        display: inline-block;
        margin-top: 0.85rem;
        font-size: 0.82rem;
        color: inherit;
        text-decoration: underline;
        opacity: 0.75;
    }

    #rechner-seo-info .seo-info-hint,
    #pension-seo-info .seo-info-hint,
    #krankenversicherung-seo-info .seo-info-hint,
    #du-seo-info .seo-info-hint,
    #tvl-hoehergruppierung-seo-info .seo-info-hint,
    #vergleich-seo-info .seo-info-hint,
    #nachzahlung-seo-info .seo-info-hint,
    .seo-info .seo-info-hint {
        margin-top: 0.7rem;
        padding: 0.5rem 0.75rem;
        background: rgba(0, 0, 0, 0.04);
        border-radius: 4px;
        font-size: 0.82rem;
        font-style: italic;
        line-height: 1.5;
    }

    @media (max-width: 768px) {
        .seo-info-grid {
            grid-template-columns: 1fr !important;
            gap: 1rem !important;
        }
    }

    /* Styling für die kompakten Links in der Grid-Übersicht */
    .inline-links a {
        color: inherit;
        /* Übernimmt die normale, dunkle Textfarbe des Elternelements */
        text-decoration: none;
        /* Entfernt den Standard-Unterstrich */
    }

    /* Guter Usability-Tipp: Beim Drüberfahren mit der Maus den Link erkennbar machen */
    .inline-links a:hover {
        text-decoration: underline;
        opacity: 0.8;
    }

    /* Stile für Unterüberschriften in den Tarifvertrag-Übersichten */
    .grid-header {
        grid-column: 1 / -1;
        margin-top: 1.8rem;
        margin-bottom: 0.6rem;
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--text-color, #2c3e50);
        border-bottom: 2px solid var(--border-color, #e0e0e0);
        padding-bottom: 0.4rem;
        width: 100%;
        box-sizing: border-box;
    }

    /* Das erste Header-Element benötigt oben weniger Abstand */
    .grid-header:first-of-type {
        margin-top: 0.5rem;
    }

    /* Wenn eine Karte ausgewählt ist (z.B. TVöD-Bund), blenden wir die Gruppen-Überschriften aus */
    #main-categories-container:has(.is-selected) .grid-header,
    #main-categories-container:has(.quick-link-card.is-selected) .grid-header,
    #main-categories-container:has(.sub-category-item) .grid-header {
        display: none !important;
    }

    /* Wenn eine Hauptkategorie ausgewählt ist, setzen wir deren Visual-Order ganz nach oben */
    .main-category-item:has(.quick-link-card.is-selected) {
        order: -100 !important;
    }


    /* Versteckt das schwebende CCM19 Cookie-Icon, da ein Footer-Link existiert */
    .ccm-settings-summoner {
        display: none !important;
    }

/* =============================================================================
STILE FÜR DYNAMISCHE UI-AKTIONEN (BRUTTO-NETTO-RECHNER)
============================================================================= */
.calculator-action-area {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Reduced gap to keep everything compact */
    width: 100%;
}

/* Ebene 1: Primäre Buttons */
.action-row-primary {
    display: flex;
    gap: 1rem;
    width: 100%;
}

.action-row-primary button,
.action-row-primary .action-btn {
    flex: 1;
    min-width: 80px;
    background-color: #ffffff;
    color: var(--primary-color, #0b3c5d);
    border: 1px solid var(--primary-color, #0b3c5d); /* Thin 1px border matching original */
    padding: 8px 14px; /* Original padding */
    border-radius: 6px; /* Original border radius */
    font-family: inherit; /* ensures identical font as other links/text */
    font-size: 0.9rem; /* exact matches other ad button text */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease; /* Original transition */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 44px; /* Touch target min 44px */
}

.action-row-primary button:hover,
.action-row-primary .action-btn:hover {
    background-color: rgba(11, 60, 93, 0.05);
    border-color: #163857;
    color: #163857;
    transform: translateY(-1px);
}

.action-row-primary button:active,
.action-row-primary .action-btn:active {
    transform: translateY(0);
}

/* Überschrift für Quick-Vergleiche */
.action-area-heading {
    font-size: 0.83rem; /* Matches .details-header h3 */
    font-weight: bold;
    color: var(--primary-color, #0b3c5d);
    margin: 0.25rem 0 0 0;
    padding: 0;
    text-align: left;
}

/* Ebene 2: Quick-Vergleiche horizontally wrapping */
.quick-compare-container {
    width: 100%;
    margin: 0;
}

.quick-compare-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* wraps to new line when it hits the end */
    gap: 0.35rem; /* closely together */
    width: 100%;
}

/* Abgerundete Action-Chips with original size (width auto) */
.action-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto; /* remains same size as before, not stretching */
    background-color: #f1f3f5;
    color: #495057;
    border: 1px solid #dee2e6;
    padding: 6px 12px; /* Slightly smaller padding */
    border-radius: 16px; /* Compact abgerundet */
    font-size: 0.8rem; /* Slightly smaller font */
    font-weight: 500;
    cursor: pointer;
    min-height: 36px; /* Compact height */
    transition: all 0.2s ease;
    user-select: none;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
}

.action-chip:hover {
    background-color: #e9ecef;
    border-color: #ced4da;
    color: #212529;
}

.action-chip:active {
    transform: scale(0.97); /* original 0.97 scale on click */
    background-color: #dee2e6;
}

/* Spezifische Farben für besondere Chips */
.action-chip.career-chip {
    border-color: rgba(11, 60, 93, 0.2);
    background-color: rgba(11, 60, 93, 0.03);
    color: var(--primary-color, #0b3c5d);
}

.action-chip.career-chip:hover {
    background-color: rgba(11, 60, 93, 0.08);
    border-color: rgba(11, 60, 93, 0.4);
    color: #163857;
}

.action-chip.period-status-chip {
    white-space: normal;
    text-align: left;
    line-height: 1.25;
}

.action-chip.period-status-chip .badge-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.action-chip.badge-status-active {
    background-color: #dcfce7;
    color: #166534;
    border-color: #86efac;
}

.action-chip.badge-status-active:hover {
    background-color: #bbf7d0;
    color: #14532d;
    border-color: #4ade80;
}

.action-chip.badge-status-advance {
    background-color: #d0e4f2;
    color: #145374;
    border-color: #5eead4;
}

.action-chip.badge-status-advance:hover {
    background-color: #99f6e4;
    color: #134e4a;
    border-color: #2dd4bf;
}

.action-chip.badge-status-enacted {
    background-color: #e0f2fe;
    color: #1e40af;
    border-color: #7dd3fc;
}

.action-chip.badge-status-enacted:hover {
    background-color: #bae6fd;
    color: #1e3a8a;
    border-color: #38bdf8;
}

.action-chip.badge-status-prognosis {
    background-color: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}

.action-chip.badge-status-prognosis:hover {
    background-color: #fde68a;
    color: #78350f;
    border-color: #fbbf24;
}

.action-chip.badge-status-archive {
    background-color: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

.action-chip.badge-status-archive:hover {
    background-color: #e5e7eb;
    color: #1f2937;
    border-color: #9ca3af;
}

/* Perfect alignment for the material icon in the Share button */
.action-btn-share .material-symbols-outlined {
    font-size: 1.15rem; /* Reduced to match text size perfectly */
    line-height: 1;
}

.action-btn-share .btn-text {
    font-size: 0.95rem;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .action-row-primary {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .action-row-primary button,
    .action-row-primary .action-btn {
        width: 100%;
    }
}

/* Contextual Inline Affiliate Links (Micro-Copy) */
.inline-ad-link-row {
    display: block;
    text-align: right;
    width: 100%;
    min-height: 44px; /* Same min-height as standard deduction rows */
    height: auto;
    padding: 12px 0; /* Same padding as standard deduction rows */
    border-bottom: 1px solid var(--border-color, #dee2e6);
    box-sizing: border-box;
}

.inline-ad-intro {
    font-style: italic;
    color: var(--text-muted, #868e96);
    margin-right: 4px;
}

.inline-ad-link {
    font-size: inherit; /* Same text size as other text in deduction rows */
    font-style: normal;
    font-weight: 600;
    color: var(--primary-color, #0b3c5d);
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
    cursor: pointer;
    display: inline;
}

.inline-ad-link:hover {
    color: var(--primary-color, #0b3c5d);
    text-decoration: underline;
}

/* =============================================================================
   META ACTIONS REDESIGN (Teilen & Affiliate/Werbung)
   ============================================================================= */
.action-area-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0.25rem 0 0 0;
}

.meta-action-btn.share-icon-only {
    display: inline-flex !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--secondary-text-color, #6c757d) !important; /* elegant gray font */
    font-size: 0.83rem !important; /* Matches action-area-heading size exactly */
    font-weight: bold !important;
    padding: 0 !important; /* No extra padding, align with heading text */
    margin: 0 !important;
    min-height: auto !important;
    gap: 4px !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: color 0.2s ease, opacity 0.2s ease !important;
    text-decoration: none !important;
}

.meta-action-btn.share-icon-only:hover,
.meta-action-btn.share-icon-only:focus,
.meta-action-btn.share-icon-only:active {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--primary-color, #0b3c5d) !important;
}

/* Success / Copied state */
.meta-action-btn.share-icon-only.copied {
    color: var(--primary-color, #0b3c5d) !important;
}

.meta-action-btn.share-icon-only .material-symbols-outlined {
    font-size: 1rem !important; /* Compact icon matching text */
    line-height: 1 !important;
    vertical-align: middle !important;
}

.meta-action-btn.share-icon-only .btn-text {
    display: none !important; /* Hide text, leaving only the icon */
}

.meta-actions-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color, #dee2e6);
}

.meta-actions-container .action-btn-promo {
    width: 100% !important;
    flex-grow: 1 !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 8px 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important; /* fine border */
    border-radius: 6px !important;
    min-height: 38px !important;
}

.meta-action-btn {
    background-color: transparent !important;
    border: 1px solid transparent !important; /* Ghost design: no or fine contour */
    color: var(--secondary-text-color, #6c757d) !important; /* elegant gray font */
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-family: inherit !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    min-height: 38px !important;
    text-decoration: none !important;
}

.meta-action-btn:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
    color: var(--primary-color, #0b3c5d) !important;
}

.meta-action-btn:active {
    transform: scale(0.98) !important;
}

.meta-action-btn.copied {
    color: var(--primary-color, #0b3c5d) !important;
    border-color: rgba(11, 60, 93, 0.3) !important;
}

/* Material icon inside Ghost Button */
.meta-action-btn .material-symbols-outlined {
    font-size: 1.15rem !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* Mobile responsive layout */
@media (max-width: 768px) {
    .meta-actions-container {
        margin-top: 1rem !important;
    }
}

/* Legal Disclaimer for Guide Pages */
.guide-legal-disclaimer {
    margin-top: 2.5rem;
    font-size: 0.8rem;
    color: #666666;
    line-height: 1.5;
    padding: 0.75rem 1rem;
    background-color: rgba(0, 0, 0, 0.015);
    border-radius: 6px;
}

/* =============================================================================
   HOMEPAGE: RATGEBER SEKTION (Option C)
   ============================================================================= */
#ratgeber {
    margin-top: 1rem;
    margin-bottom: 2.5rem;
}

#ratgeber h2 {
    color: #2c3e50;
    margin-bottom: 1.25rem;
    font-size: 1.3rem;
    font-weight: bold;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.4rem;
}

.guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    width: 100%;
}

.guide-card {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.guide-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0.75rem;
}

.guide-card-header .material-symbols-outlined {
    color: var(--secondary-color);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.guide-card-header h3 {
    margin: 0;
    color: #2c3e50;
    font-size: 1.15rem;
    font-weight: bold;
}

.guide-card-desc {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
    .guide-card-desc {
        min-height: 4.25rem;
    }
}

.guide-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.guide-links li {
    margin: 0;
}

.guide-links li a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--primary-color);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.3;
    transition: color 0.2s ease, transform 0.2s ease;
}

.guide-links li a:hover {
    color: var(--mid-color);
    transform: translateX(3px);
    text-decoration: none;
}

.guide-links li a:hover span:not(.material-symbols-outlined) {
    text-decoration: underline;
}

.guide-links li a .material-symbols-outlined {
    font-size: 16px;
    margin-right: 6px;
    color: var(--secondary-color);
    flex-shrink: 0;
    transition: color 0.2s ease;
    display: inline-block;
    text-decoration: none !important;
}

.guide-links li a:hover .material-symbols-outlined {
    color: var(--primary-color);
    text-decoration: none !important;
}

.guide-links li .tool-link-desc {
    font-size: 0.88rem;
    color: #666;
    margin: 3px 0 14px 22px;
    line-height: 1.45;
}
/* ==========================================================================
   SHADCN-STYLE TOPBAR & FOOTER OVERRIDES
   ========================================================================== */

/* Hide the old nav element completely, as we now use .topbar */
header > nav:not(.desktop-nav),
nav:not(.desktop-nav):not(.table-breadcrumb):not([aria-label="Breadcrumb"]) {
    display: none !important;
}

.topbar {
    background-color: #ffffff !important;
    color: var(--primary-color) !important;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease !important;
    height: 64px;
}

.topbar.scrolled {
    background-color: rgba(255, 255, 255, 0.75) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
}

.topbar-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 100% !important;
}

.topbar .logo {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
}

/* Kachel / Box for the Icon */
.topbar .logo-icon-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background-color: var(--primary-color) !important;
    border-radius: 6px !important;
}

.topbar .logo-icon-wrapper .material-symbols-outlined {
    color: #ffffff !important;
    font-size: 20px !important;
    width: auto !important;
}

.topbar .logo-icon-wrapper .logo-icon-letter {
    color: #ffffff !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    user-select: none !important;
    font-family: var(--font-primary), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.topbar .logo-icon-wrapper svg,
.topbar .logo-icon-wrapper .logo-icon-svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
}

.topbar .logo-text {
    color: var(--primary-color) !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}

/* Reset hover effects on the logo text */
.topbar .logo:hover .logo-text {
    transform: none !important;
    text-shadow: none !important;
    opacity: 0.9 !important;
}

/* Desktop Nav */
.desktop-nav {
    display: none !important;
    background-color: transparent !important;
    padding: 0 !important;
}

@media (min-width: 769px) {
    .desktop-nav {
        display: flex !important;
        align-items: center !important;
    }
    
    .desktop-nav .nav-menu {
        display: flex !important;
        gap: 15px !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-direction: row !important;
    }

    .desktop-nav .nav-item {
        position: relative !important;
        margin: 0 !important;
    }

    .desktop-nav .nav-item-header {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .desktop-nav .nav-link {
        color: var(--primary-color) !important;
        font-weight: 400 !important;
        font-size: 0.95rem !important;
        padding: 10px 12px !important;
        border-radius: 6px !important;
        transition: background-color 0.2s !important;
        background-color: transparent !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }

    .desktop-nav .nav-link:hover {
        background-color: rgba(0, 0, 0, 0.05) !important;
    }
    
    /* Ensure Dropdowns work properly */
    .desktop-nav .dropdown-menu {
        top: 100% !important;
        left: 0 !important;
        margin-top: 5px !important;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
        border-radius: 6px !important;
        border: 1px solid rgba(0,0,0,0.05) !important;
    }
    .desktop-nav .dropdown-item {
        color: var(--primary-color) !important;
    }
    .desktop-nav .dropdown-item:hover {
        background-color: rgba(0, 0, 0, 0.05) !important;
        color: var(--primary-color) !important;
    }

    /* Hide mobile-only overview links in Desktop dropdowns */
    .desktop-nav .nav-mobile-only {
        display: none !important;
    }
}

/* Mobile Topbar Adjustments */
@media (max-width: 768px) {
    .topbar .mobile-menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        color: var(--primary-color) !important;
        padding: 5px !important;
    }
    .topbar .mobile-menu-toggle .material-symbols-outlined {
        color: var(--primary-color) !important;
        font-size: 28px !important;
    }
}

/* Footer White Theme */
footer {
    background-color: #ffffff !important;
    color: var(--text-color) !important;
    border-top: 1px solid rgba(0,0,0,0.1) !important;
    box-shadow: 0 -1px 3px rgba(0,0,0,0.03) !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    order: 99999 !important; /* Critical: keeps footer at the bottom even if scripts append DOM elements to body */
    position: relative;
    z-index: 10;
}

footer p, footer a, footer h3, footer h4 {
    color: var(--text-color) !important;
}

footer a:hover {
    color: var(--primary-color) !important;
}

/* Injected elements (Google Auto Ads, CMP, Anchor placeholders) must not displace footer */
body > .google-auto-placed,
body > ins.adsbygoogle[data-anchor-status],
body > .adsbygoogle-noablate,
body > [class*="adsbygoogle"] {
    order: 1;
}


/* --- BUG FIXES (Mobile Menu & Dropdown BG) --- */

.desktop-nav .dropdown-menu {
    background-color: #f6f6f6 !important;
}

/* Mobile Menu Backdrop Blur */
body.menu-open .overlay-blur {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 998;
}

/* Prevent topbar backdrop-filter from trapping fixed mobile nav in a containing block */
body.menu-open .topbar,
body.menu-open .topbar.scrolled {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-color: #ffffff !important;
}

/* Fix mobile menu appearing */
.desktop-nav.mobile-nav-active {
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    max-height: calc(100vh - 64px) !important;
    max-height: calc(100dvh - 64px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background-color: #ffffff !important;
    z-index: 999 !important;
    display: block !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}
.desktop-nav.mobile-nav-active .nav-menu {
    display: flex !important;
    flex-direction: column !important;
    padding: 10px 0 40px 0 !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    background-color: transparent !important;
}
.desktop-nav.mobile-nav-active .nav-item {
    width: 100% !important;
}
.desktop-nav.mobile-nav-active .nav-item-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    width: 100% !important;
}
.desktop-nav.mobile-nav-active .nav-link {
    color: var(--primary-color) !important;
    display: block !important;
    padding: 15px 20px !important;
    flex-grow: 1 !important;
}
.desktop-nav.mobile-nav-active .nav-details-toggle-btn {
    display: flex !important;
    align-items: center !important;
    color: var(--primary-color) !important;
}
.desktop-nav.mobile-nav-active .nav-details-toggle-btn .material-symbols-outlined {
    color: var(--primary-color) !important;
}

/* Show dropdown items when active on mobile */
.desktop-nav.mobile-nav-active .nav-item.active .dropdown-menu {
    display: block !important;
    position: static !important;
    box-shadow: none !important;
    background-color: transparent !important;
    border: none !important;
    padding-left: 20px !important;
}

.desktop-nav.mobile-nav-active .dropdown-item {
    color: var(--primary-color) !important;
}
.desktop-nav.mobile-nav-active .nav-mobile-only {
    display: block !important;
}
.desktop-nav.mobile-nav-active .dropdown-divider.nav-mobile-only {
    display: block !important;
    height: 1px !important;
}

/* Dropdown Section Headers & Dividers */
.dropdown-header {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: #64748b !important;
    padding: 10px 16px 4px 16px !important;
    pointer-events: none !important;
    user-select: none !important;
    opacity: 0.85;
}

.dropdown-divider {
    height: 1px !important;
    margin: 6px 12px !important;
    background-color: rgba(0, 0, 0, 0.08) !important;
    list-style: none !important;
}

.desktop-nav.mobile-nav-active .dropdown-header {
    padding-left: 20px !important;
    color: #64748b !important;
}

.desktop-nav.mobile-nav-active .dropdown-divider {
    margin: 6px 20px !important;
}

/* =============================================================================
   Wizard Option Card (Globally available for Tables & Rechner)
   ============================================================================= */
#wizard-cta-heading h4 {
    font-size: 1rem;
}

.wizard-option-card {
    border: 1px solid var(--secondary-color, #1f6f96);
    border-radius: 8px;
    padding: 1.25rem;
    background-color: var(--card-bg, #ffffff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: all 0.2s ease;
    text-align: left;
}

.wizard-option-card:hover {
    border-color: var(--primary-color, #0b3c5d);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.wizard-direct-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    background-color: var(--secondary-color, #1f6f96);
    color: var(--light-text, #ffffff) !important;
    text-decoration: none !important;
    padding: 10px 18px;
    border-radius: 6px;
    transition: var(--transition, all 0.3s ease);
    border: none;
    cursor: pointer;
}

.wizard-direct-link-btn:hover {
    background-color: var(--mid-color, #145374);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: var(--light-text, #ffffff) !important;
    text-decoration: none !important;
}

.wizard-direct-link-btn .material-symbols-outlined {
    font-size: 18px;
    transition: transform 0.2s ease;
}

/* =============================================================================
   CTA Card Design Variations (Option A: Color-Coding & Option B: Layout Styles)
   ============================================================================= */

/* Theme Accent Colors (Option A: Category Color-Coding + Original Classic Blue Theme) */
.wizard-option-card.cta-theme-original {
    --cta-accent: var(--primary-color, #0b3c5d);
    --cta-accent-hover: var(--mid-color, #145374);
    --cta-accent-bg: var(--card-bg, #ffffff);
    --cta-accent-border: var(--secondary-color, #1f6f96);
    --cta-btn-bg: var(--secondary-color, #1f6f96);
    --cta-btn-hover: var(--mid-color, #145374);
}

.wizard-option-card.cta-theme-finance {
    --cta-accent: #059669;
    --cta-accent-hover: #047857;
    --cta-accent-bg: #f0fdf4;
    --cta-accent-border: #a7f3d0;
    --cta-btn-bg: #059669;
    --cta-btn-hover: #047857;
}

.wizard-option-card.cta-theme-legal {
    --cta-accent: #4f46e5;
    --cta-accent-hover: #4338ca;
    --cta-accent-bg: #eef2ff;
    --cta-accent-border: #c7d2fe;
    --cta-btn-bg: #4f46e5;
    --cta-btn-hover: #4338ca;
}

.wizard-option-card.cta-theme-health {
    --cta-accent: #0891b2;
    --cta-accent-hover: #0e7490;
    --cta-accent-bg: #ecfeff;
    --cta-accent-border: #a5f3fc;
    --cta-btn-bg: #0891b2;
    --cta-btn-hover: #0e7490;
}

.wizard-option-card.cta-theme-protection {
    --cta-accent: #0b3c5d;
    --cta-accent-hover: #183f62;
    --cta-accent-bg: #f0f7ff;
    --cta-accent-border: #b9d7ea;
    --cta-btn-bg: #0b3c5d;
    --cta-btn-hover: #183f62;
}

/* Layout Variations (Option B: Card Styles) */

/* Style 1: Classic (Bisheriges Design) */
.wizard-option-card.cta-style-classic {
    border: 1px solid var(--cta-accent-border, var(--secondary-color, #1f6f96));
    background-color: var(--card-bg, #ffffff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}
.wizard-option-card.cta-style-classic:hover {
    border-color: var(--cta-accent, var(--primary-color, #0b3c5d));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Style 2: Left Accent Border */
.wizard-option-card.cta-style-left-accent {
    border: 1px solid #e2e8f0;
    border-left: 3px solid var(--cta-accent, #0b3c5d);
    background-color: var(--cta-accent-bg, #f8fafc);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}
.wizard-option-card.cta-style-left-accent:hover {
    border-top-color: #d0e4f2;
    border-right-color: #d0e4f2;
    border-bottom-color: #d0e4f2;
    border-left-width: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}



/* Themed Button overrides */
.wizard-option-card[class*="cta-theme-"] .wizard-direct-link-btn {
    background-color: var(--cta-btn-bg, var(--secondary-color, #1f6f96));
}
.wizard-option-card[class*="cta-theme-"] .wizard-direct-link-btn:hover {
    background-color: var(--cta-btn-hover, var(--mid-color, #145374));
}

@media (max-width: 768px) {
    .wizard-option-card {
        padding: 1rem;
    }
}

.table-wrapper.politiker-role-container,
.table-wrapper.legal-container {
    padding: 1.25rem;
}

@media screen and (max-width: 768px) {
    .table-wrapper.politiker-role-container,
    .table-wrapper.legal-container {
        padding: 0.75rem;
    }
}

/* =============================================================================
   CONTENT BANNER SLOT (AdSense Placeholder & Fallback Wrapper)
   ============================================================================= */
/* TEMPORARILY DISABLED: Ads and Fallback Banners */
.content-banner-slot,
.ad-slot-container,
.promo-recommendation-box,
#page-affiliate-disclaimer,
ins.adsbygoogle {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.content-banner-slot,
.ad-slot-container {
    width: 100%;
    min-height: 85px;
    max-height: 135px;
    height: auto;
    background-color: var(--card-bg, #f8fafc);
    border: 1px dashed var(--border-color, #d0e4f2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin: 0.75rem 0;
    box-sizing: border-box;
    padding: 0.35rem 0.5rem;
    transition: opacity 0.2s ease-in-out, border-color 0.15s ease, box-shadow 0.15s ease;
    contain: layout;
}

.ad-slot-label {
    position: absolute;
    top: 4px;
    right: 8px;
    font-size: 0.65rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    pointer-events: none;
}

.content-banner-slot .adsbygoogle,
.ad-slot-container .adsbygoogle {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    margin: 0 auto !important;
}

.content-banner-slot .adsbygoogle iframe,
.content-banner-slot .adsbygoogle > div,
.ad-slot-container .adsbygoogle iframe,
.ad-slot-container .adsbygoogle > div {
    margin: 0 auto !important;
    max-width: 100% !important;
    display: block !important;
}

.promo-recommendation-box {
    width: 100%;
    min-height: 85px;
    margin: 0.75rem 0;
    box-sizing: border-box;
    border: 1px solid var(--border-color, #d0e4f2);
    border-radius: 8px;
    background-color: var(--card-bg, #ffffff);
    padding: 0;
    transition: opacity 0.25s ease-in-out, border-color 0.15s ease, box-shadow 0.15s ease;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    contain: layout;
}
.promo-recommendation-box:hover {
    border-color: var(--primary-color, #0b3c5d);
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
}
.promo-card-link {
    display: block;
    width: 100%;
    padding: 0.65rem 1rem;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}
.promo-card-content {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    min-height: 65px;
}
.promo-card-icon {
    font-size: 1.15em;
    line-height: 1;
    display: inline-block;
    vertical-align: -0.05em;
    margin-right: 0.35rem;
}
.promo-card-text {
    flex: 1;
    text-align: left;
}
.promo-card-text strong {
    display: block;
    font-size: 0.95rem;
    color: var(--primary-color, #0b3c5d);
    margin-bottom: 0.15rem;
    line-height: 1.25;
}
.promo-card-text p {
    margin: 0;
    font-size: 0.825rem;
    color: var(--text-muted, #64748b);
    line-height: 1.25;
}
.promo-card-cta-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}
.promo-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--secondary-color, #1f6f96);
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.45rem 0.9rem;
    border-radius: 6px;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}
.promo-card-link:hover .promo-card-btn {
    background-color: var(--primary-color, #0b3c5d);
}
.promo-card-hint {
    font-size: 0.7rem;
    font-style: italic;
    color: var(--text-muted, #94a3b8);
    text-align: center;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .content-banner-slot,
    .promo-recommendation-box {
        min-height: 100px;
    }
    .promo-card-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        min-height: auto;
    }
    .promo-card-cta-col {
        width: 100%;
    }
    .promo-card-btn {
        width: 100%;
    }
    .promo-card-hint {
        white-space: normal;
    }
}

/* ==========================================================================
   Hub & Spoke News Widget Styles (Dienstherren & Tarifverträge)
   ========================================================================== */

.hub-news-section {
    margin-top: 14px;
    margin-bottom: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

.hub-news-header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: start;
    margin-bottom: 16px;
    gap: 4px 16px;
}

.hub-news-title-wrapper {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hub-news-icon {
    font-size: 24px;
    color: var(--secondary-color, #1f6f96);
}

.hub-news-title {
    margin: 0;
    font-size: 1.22rem;
    font-weight: 700;
    color: var(--primary-color, #0b3c5d);
}

/* Paywall Toggle direkt unter dem Hub-Titel */
.hub-news-paywall-toggle-wrapper {
    grid-column: 1;
    grid-row: 2;
    display: inline-flex;
    align-items: center;
    margin-top: 2px;
    padding-left: 32px; /* Schließt bündig unter dem Text neben dem 24px Icon + 8px Gap ab */
}

.hub-news-paywall-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 500;
    color: #64748b;
    user-select: none;
    transition: color 0.15s ease;
}

.hub-news-paywall-toggle-label:hover {
    color: #0b3c5d;
}

.hub-news-paywall-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.hub-news-paywall-slider {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 16px;
    background-color: #d0e4f2;
    border-radius: 20px;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.hub-news-paywall-slider::before {
    content: "";
    position: absolute;
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.hub-news-paywall-checkbox:checked + .hub-news-paywall-slider {
    background-color: #1f6f96;
}

.hub-news-paywall-checkbox:checked + .hub-news-paywall-slider::before {
    transform: translateX(12px);
}

.hub-news-paywall-text {
    line-height: 1.2;
}

.hub-news-header-right {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 3px;
}

.hub-news-tech-pill {
    margin-top: 0;
}

.news-tech-transparency-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    padding: 0;
    font-size: 0.76rem;
    font-style: italic;
    font-weight: 400;
    color: #64748b;
    position: relative;
    box-shadow: none;
    width: auto;
    max-width: max-content;
}

.news-tech-info-btn {
    background: transparent;
    border: none;
    padding: 0 1px;
    margin-left: 2px;
    cursor: pointer;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-family: inherit;
    transition: color 0.15s ease;
}

.news-tech-info-btn:hover,
.news-tech-transparency-pill.active .news-tech-info-btn {
    background: transparent;
    color: var(--secondary-color, #1f6f96);
    border-color: transparent;
}

.hub-news-header-right .news-tech-popover {
    left: auto;
    right: 0;
}

.news-tech-popover {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 480px;
    max-width: min(540px, 90vw);
    background: #ffffff;
    border: 1px solid #d0e4f2;
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    z-index: 100;
    font-size: 0.84rem;
    line-height: 1.55;
    color: #334155;
    text-align: left;
    white-space: normal;
    animation: fadeIn 0.2s ease;
    box-sizing: border-box;
}

.news-tech-transparency-pill.active .news-tech-popover {
    display: block;
}

.news-tech-popover-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f0f6fa;
    font-size: 0.92rem;
    color: var(--primary-color, #0b3c5d);
}

.news-tech-popover p {
    margin: 0 0 10px 0;
}

.news-tech-popover p:last-child {
    margin-bottom: 0;
}

.hub-news-all-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--secondary-color, #1f6f96);
    text-decoration: none;
    transition: color 0.15s ease;
}

.hub-news-all-link:hover {
    color: var(--primary-color, #0b3c5d);
    text-decoration: underline;
}

/* Empty State */
.hub-news-empty-notice {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.hub-news-empty-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.hub-news-empty-icon {
    font-size: 24px;
    color: var(--secondary-color, #1f6f96);
    margin-top: 2px;
}

.hub-news-empty-text strong {
    font-size: 0.9rem;
    color: var(--text-color, #145374);
}

.hub-news-empty-text p {
    margin: 3px 0 0 0;
    font-size: 0.82rem;
    color: #64748b;
}

.hub-news-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--secondary-color, #1f6f96);
    color: #ffffff !important;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.15s ease;
    white-space: nowrap;
}

.hub-news-empty-cta:hover {
    background: var(--primary-color, #0b3c5d);
}

/* Hub News Filter Bar */
.hub-news-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.hub-news-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    border: 1px solid #d0e4f2;
    color: #475569;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    user-select: none;
}

.hub-news-filter-chip:hover {
    background: #e2e8f0;
    color: var(--primary-color, #0b3c5d);
    border-color: #94a3b8;
}

.hub-news-filter-chip.active {
    background: var(--primary-color, #0b3c5d);
    color: #ffffff;
    border-color: var(--primary-color, #0b3c5d);
    box-shadow: 0 2px 6px rgba(11, 60, 93, 0.2);
}

.hub-news-filter-chip .hub-chip-icon {
    font-size: 16px;
}

.hub-news-filter-empty-notice {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    background: #f8fafc;
    border: 1px dashed #d0e4f2;
    border-radius: 10px;
    color: #64748b;
    font-size: 0.85rem;
    margin-bottom: 16px;
}

/* News Feed / Grid Layout */
.hub-news-swipe-rail,
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
    align-items: start;
}

/* Compact News Card */
.news-card-compact {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    box-sizing: border-box;
}

.news-card-compact:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    border-color: #d0e4f2;
}

.news-card-compact .news-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.76rem;
    color: #64748b;
    margin-bottom: 6px;
}

.news-card-compact .news-source {
    font-weight: 700;
    color: var(--secondary-color, #1f6f96);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.news-card-compact .news-date {
    font-weight: 500;
}

.news-card-compact .news-title {
    margin: 0 0 8px 0;
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.35;
}

.news-card-compact .news-link {
    color: var(--text-color, #145374);
    text-decoration: none;
    transition: color 0.15s ease;
}

.news-card-compact .news-link:hover {
    color: var(--secondary-color, #1f6f96);
}

.news-card-compact .news-card-body {
    flex: 1;
    margin-bottom: 10px;
}

.news-compact-takeaway {
    font-size: 0.82rem;
    color: #334155;
    line-height: 1.45;
    margin-bottom: 6px;
    background: #f8fafc;
    padding: 7px 10px;
    border-radius: 6px;
    border-left: 3px solid var(--secondary-color, #1f6f96);
}

.news-points-collapsible {
    animation: fadeIn 0.2s ease;
}

.news-card-compact .news-points-list {
    margin: 6px 0 8px 0;
    padding-left: 18px;
    font-size: 0.8rem;
    color: #475569;
    line-height: 1.45;
}

.news-card-compact .news-points-list li {
    margin-bottom: 4px;
}

.news-modal-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 5px 10px;
    background: #f0f6fa;
    border: 1px solid #d0e4f2;
    border-radius: 6px;
    color: var(--primary-color, #0b3c5d);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.news-modal-trigger-btn:hover {
    background: var(--secondary-color, #1f6f96);
    border-color: var(--secondary-color, #1f6f96);
    color: #ffffff;
}

.news-modal-trigger-btn .news-btn-icon {
    font-size: 16px;
    color: var(--secondary-color, #1f6f96);
    transition: color 0.15s ease;
}

.news-modal-trigger-btn:hover .news-btn-icon {
    color: #ffffff;
}

.news-card-compact .news-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid #f0f6fa;
    gap: 8px;
}

.news-tags,
.news-modal-tags,
.news-card-compact .news-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.news-tag-badge,
.news-card-compact .news-tag-badge,
.news-modal-tags .news-tag-badge {
    background: #f0f6fa;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #64748b;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}

.news-tag-badge:hover,
.news-card-compact .news-tag-badge:hover,
.news-modal-tags .news-tag-badge:hover {
    background: var(--secondary-color, #1f6f96);
    color: #ffffff;
    border-color: var(--secondary-color, #1f6f96);
}

/* Tag More Button & Popover */
.news-tags-more-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.news-tag-more-btn {
    background: #e2e8f0;
    color: var(--primary-color, #0b3c5d);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #d0e4f2;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.news-tag-more-btn:hover,
.news-tag-more-btn:focus-visible,
.news-tags-more-wrapper.active .news-tag-more-btn {
    background: var(--secondary-color, #1f6f96);
    color: #ffffff;
    border-color: var(--secondary-color, #1f6f96);
}

.news-tags-popover {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: auto;
    background: #145374;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    z-index: 100;
    flex-direction: column;
    gap: 6px;
    max-width: min(280px, calc(100vw - 32px));
    box-sizing: border-box;
}

.news-tags-popover::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 16px;
    border-width: 6px;
    border-style: solid;
    border-color: #145374 transparent transparent transparent;
}

.news-tags-more-wrapper:hover .news-tags-popover,
.news-tags-more-wrapper:focus-within .news-tags-popover,
.news-tags-more-wrapper.active .news-tags-popover {
    display: flex;
}

.news-tags-popover-header {
    font-size: 0.7rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.news-tags-popover-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.news-tag-popover-item {
    background: #334155;
    border: 1px solid #475569;
    color: #f0f6fa;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    text-decoration: none;
}

.news-tag-popover-item:hover {
    background: var(--secondary-color, #1f6f96);
    border-color: var(--secondary-color, #1f6f96);
    color: #ffffff;
}

.news-read-more,
.news-card-compact .news-read-more,
.news-modal-sources .news-read-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--secondary-color, #1f6f96);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.news-read-more:hover,
.news-card-compact .news-read-more:hover,
.news-modal-sources .news-read-more:hover {
    color: var(--primary-color, #0b3c5d);
    text-decoration: none;
}

.news-read-more:hover .news-read-more-text,
.news-card-compact .news-read-more:hover .news-read-more-text,
.news-modal-sources .news-read-more:hover .news-read-more-text {
    text-decoration: underline;
}

.news-arrow-icon,
.news-card-compact .news-arrow-icon,
.news-modal-sources .news-arrow-icon {
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
}

.news-sources-group,
.news-modal-sources,
.news-card-compact .news-sources-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.news-sources-more-wrapper,
.news-card-compact .news-sources-more-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.news-sources-more-btn,
.news-card-compact .news-sources-more-btn {
    background: #f0f6fa;
    border: 1px solid #d0e4f2;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    transition: all 0.15s ease;
    font-family: inherit;
}

.news-sources-more-btn:hover,
.news-sources-more-wrapper.active .news-sources-more-btn,
.news-card-compact .news-sources-more-btn:hover,
.news-card-compact .news-sources-more-wrapper.active .news-sources-more-btn {
    background: var(--secondary-color, #1f6f96);
    color: #ffffff;
    border-color: var(--secondary-color, #1f6f96);
}

.news-sources-more-icon,
.news-card-compact .news-sources-more-icon {
    font-size: 14px;
}

.news-sources-popover,
.news-card-compact .news-sources-popover {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    left: auto;
    background: #145374;
    color: #ffffff;
    padding: 10px 12px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    z-index: 100;
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
    max-width: min(320px, calc(100vw - 32px));
    box-sizing: border-box;
}

.news-sources-popover::after,
.news-card-compact .news-sources-popover::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 16px;
    border-width: 6px;
    border-style: solid;
    border-color: #145374 transparent transparent transparent;
}

.news-sources-more-wrapper:hover .news-sources-popover,
.news-sources-more-wrapper:focus-within .news-sources-popover,
.news-sources-more-wrapper.active .news-sources-popover,
.news-card-compact .news-sources-more-wrapper:hover .news-sources-popover,
.news-card-compact .news-sources-more-wrapper:focus-within .news-sources-popover,
.news-card-compact .news-sources-more-wrapper.active .news-sources-popover {
    display: flex;
}

.news-sources-popover-header,
.news-card-compact .news-sources-popover-header {
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.news-sources-popover-list,
.news-card-compact .news-sources-popover-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.news-source-item-link,
.news-card-compact .news-source-item-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 8px;
    background: #334155;
    border: 1px solid #475569;
    border-radius: 4px;
    color: #f0f6fa;
    font-size: 0.74rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
}

.news-source-item-link:hover,
.news-card-compact .news-source-item-link:hover {
    background: var(--secondary-color, #1f6f96);
    border-color: var(--secondary-color, #1f6f96);
    color: #ffffff;
}

.news-source-item-date,
.news-card-compact .news-source-item-date {
    color: #94a3b8;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
}

.news-source-item-icon,
.news-card-compact .news-source-item-icon {
    font-size: 13px;
    color: #d0e4f2;
}

/* Load More / Archive News Button & Container */
.news-load-more-wrapper,
.hub-news-load-more-wrapper {
    margin-top: 18px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.news-load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 20px;
    background: #ffffff;
    border: 1px solid var(--border-color, #d0e4f2);
    border-radius: 9999px;
    color: var(--text-color, #145374);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.news-load-more-btn:hover {
    background: #f0f6fa;
    border-color: var(--secondary-color, #1f6f96);
    color: var(--primary-color, #0b3c5d);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.news-load-more-btn .news-btn-icon {
    font-size: 18px;
    color: var(--secondary-color, #1f6f96);
    transition: transform 0.25s ease;
}

.news-load-more-btn:hover .news-btn-icon {
    transform: rotate(30deg);
}

.news-archive-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    width: 100%;
    margin-top: 16px;
    align-items: start;
    animation: fadeInNews 0.3s ease;
}

@keyframes fadeInNews {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Secondary News Accordion */
.hub-news-accordion {
    margin-top: 12px;
    background: #f8fafc;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    padding: 10px 14px;
    transition: all 0.2s ease;
}

.hub-news-accordion-summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--primary-color, #0b3c5d);
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    list-style: none;
}

.hub-news-accordion-summary::-webkit-details-marker {
    display: none;
}

.hub-news-accordion-icon {
    font-size: 20px;
    color: var(--secondary-color, #1f6f96);
    transition: transform 0.2s ease;
}

details[open] .hub-news-accordion-summary {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

details[open] .hub-news-accordion-icon {
    transform: rotate(180deg);
}

/* News Details Modal / PopUp */
.news-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(11, 60, 93, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    box-sizing: border-box;
}

.news-modal-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.news-modal-dialog {
    background: #ffffff;
    border-radius: 16px;
    width: 100%;
    max-width: 660px;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
    transform: scale(0.95) translateY(12px);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.news-modal-backdrop.active .news-modal-dialog {
    transform: scale(1) translateY(0);
}

.news-modal-header {
    padding: 18px 22px 14px 22px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    background: #f8fafc;
}

.news-modal-header-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.news-modal-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    color: #64748b;
}

.news-modal-source {
    font-weight: 700;
    color: #145374;
    background: #e2e8f0;
    padding: 2px 8px;
    border-radius: 6px;
}

.news-modal-title {
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--primary-color, #0b3c5d);
    margin: 0;
}

.news-modal-title a {
    color: inherit;
    text-decoration: none;
}

.news-modal-title a:hover {
    text-decoration: underline;
    color: var(--secondary-color, #1f6f96);
}

.news-modal-close-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    color: #64748b;
    padding: 6px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.news-modal-close-btn:hover {
    background: #f0f6fa;
    color: #0b3c5d;
    border-color: #d0e4f2;
}

.news-modal-body {
    padding: 20px 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.news-modal-takeaway {
    background: #f0f7ff;
    border-left: 4px solid var(--secondary-color, #1f6f96);
    padding: 12px 14px;
    border-radius: 0 8px 8px 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #145374;
}

.news-modal-points-section h5 {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

.news-modal-points-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.news-modal-points-list li {
    position: relative;
    padding-left: 24px;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #334155;
}

.news-modal-points-list li::before {
    content: "check_circle";
    font-family: 'Material Symbols Outlined';
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 16px;
    color: var(--secondary-color, #1f6f96);
}

.news-modal-footer {
    padding: 12px 22px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

/* Hub News & News Page Floating Scroll-to-Top Button */
.hub-news-scroll-top-btn,
.news-scroll-top-btn {
    position: fixed;
    bottom: 24px;
    right: 20px;
    z-index: 999;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--primary-color, #0b3c5d);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(11, 60, 93, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, background 0.15s ease;
    font-family: inherit;
}

.hub-news-scroll-top-btn.visible,
.news-scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.hub-news-scroll-top-btn:hover,
.news-scroll-top-btn:hover {
    background: var(--secondary-color, #1f6f96);
    box-shadow: 0 8px 24px rgba(11, 60, 93, 0.35);
}

.hub-news-scroll-top-btn .news-scroll-icon,
.news-scroll-top-btn .news-scroll-icon {
    font-size: 18px;
}

/* Mobile Responsiveness & Vertical Feed */
@media (max-width: 768px) {
    .content-banner-slot,
    .ad-slot-container {
        margin: 0.75rem 0 0.1rem 0;
    }

    .hub-news-section {
        margin-top: 4px;
        margin-bottom: 16px;
        padding-top: 6px;
        border-top: 1px solid var(--border-color, #e2e8f0);
    }

    .hub-news-header {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        gap: 6px 12px;
        margin-bottom: 10px;
    }

    .hub-news-title-wrapper {
        flex: 1 1 auto;
        min-width: 150px;
        order: 1;
    }

    .hub-news-header-right {
        flex: 0 0 auto;
        align-items: flex-end;
        text-align: right;
        margin-left: auto;
        order: 2;
    }

    .hub-news-paywall-toggle-wrapper {
        width: 100%;
        order: 3;
        padding-left: 0;
        margin-top: 4px;
    }

    .hub-news-title {
        font-size: 1.08rem;
    }

    /* Vertikaler mobiler Feed: Kein horizontaler Swipe, natürliche Kartenhöhen */
    .hub-news-swipe-rail,
    .news-grid,
    .news-archive-container {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .news-card-compact {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 12px 14px;
        box-sizing: border-box;
    }

    .hub-news-accordion {
        padding: 8px 12px;
    }

    .hub-news-accordion-summary {
        font-size: 0.8rem;
    }

    .news-tech-popover {
        position: fixed;
        top: auto;
        bottom: 16px;
        left: 10px;
        right: 10px;
        max-width: none;
        width: auto;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        box-sizing: border-box;
    }
}

/* =============================================================================
   DEZENTE KACHELÜBERSICHT / CALCULATOR HUB DETAILS & GRIDS
   ============================================================================= */
.calculator-hub-grid-section {
    margin: 1rem 0 1.25rem 0;
    padding: 1.15rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.calculator-hub-details {
    width: 100%;
    box-sizing: border-box;
}

.calculator-hub-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    list-style: none;
    outline: none;
}

.calculator-hub-summary::-webkit-details-marker {
    display: none;
}

.calculator-hub-summary-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color, #0b3c5d);
    margin: 0;
}

.calculator-hub-summary-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.calculator-hub-summary-hint {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}

.calculator-hub-summary .hub-details-icon {
    font-size: 1.25rem;
    color: var(--primary-color, #0b3c5d);
    transition: transform 0.2s ease;
}

details[open] .calculator-hub-summary .hub-details-icon {
    transform: rotate(180deg);
}

.calculator-hub-details-content {
    margin-top: 0.85rem;
}

.calculator-hub-grid-subtitle {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0 0 0.85rem 0;
    line-height: 1.4;
}

.calculator-hub-group {
    margin-top: 1rem;
}

.calculator-hub-group:first-of-type {
    margin-top: 0.5rem;
}

.calculator-hub-group-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--primary-color, #0b3c5d);
    margin: 0 0 0.5rem 0;
}

.calculator-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.45rem;
    width: 100%;
    box-sizing: border-box;
}

.calculator-hub-card {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.45rem 0.55rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-color, #333333);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.25;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    min-height: 34px;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.calculator-hub-card:hover {
    border-color: var(--accent-color, #e65c00);
    color: var(--accent-color, #e65c00);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.calculator-hub-card .hub-state-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    width: 100%;
    hyphens: auto;
}

/* Desktop behavior (> 640px): Always open & expanded */
@media (min-width: 641px) {
    .calculator-hub-details:not([open]) .calculator-hub-details-content {
        display: block !important;
    }
    .calculator-hub-summary {
        cursor: default;
        pointer-events: none;
    }
    .calculator-hub-summary .hub-details-icon,
    .calculator-hub-summary-hint {
        display: none;
    }
}

/* Mobile behavior (<= 640px): Compact accordion */
@media (max-width: 640px) {
    .calculator-hub-grid-section {
        padding: 0.65rem 0.75rem;
        margin: 0.75rem 0 1rem 0;
        border-radius: 6px;
    }
    .calculator-hub-summary-title {
        font-size: 0.88rem;
    }
    .calculator-hub-summary-hint {
        font-size: 0.75rem;
    }
    .calculator-hub-grid-subtitle {
        font-size: 0.8rem;
        margin-bottom: 0.65rem;
    }
    .calculator-hub-group-title {
        font-size: 0.85rem;
        margin-bottom: 0.35rem;
    }
    .calculator-hub-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.35rem;
    }
    .calculator-hub-card {
        padding: 0.4rem 0.35rem;
        font-size: 0.75rem;
        min-height: 32px;
    }
    details[open] .calculator-hub-summary {
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #e2e8f0;
    }
}







    .rounds-sub-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 2.5px 7px;
        font-size: 0.77rem;
        font-weight: 600;
        color: var(--secondary-color, #1f6f96);
        background-color: #f0f7fb;
        border: 1px solid #d0e4f2;
        border-radius: 5px;
        text-decoration: none;
        transition: all 0.15s ease;
        white-space: nowrap;
        line-height: 1.25;
    }

    .rounds-sub-pill:hover {
        background-color: var(--secondary-color, #1f6f96);
        color: #ffffff;
        border-color: var(--secondary-color, #1f6f96);
        box-shadow: 0 2px 4px rgba(31, 111, 150, 0.2);
    }

    @media (max-width: 480px) {
        .rounds-summary-header-row {
            gap: 6px 8px;
        }

        .rounds-summary-title {
            font-size: 0.79rem;
            line-height: 1.2;
        }

        .rounds-summary-sub-row {
            margin-top: 5px;
            gap: 4px 6px;
        }

        .rounds-sub-pill {
            padding: 2px 6px;
            font-size: 0.74rem;
        }
    }


    /* =============================================================================
    PERIOD SWITCHER / RUNDEN-CARD (Einheitliche Info- & Wechsel-Card)
    ============================================================================= */
    .period-switcher-container {
        width: 100%;
        margin-top: 4px;
        margin-bottom: 12px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        box-sizing: border-box;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
        overflow: visible;
        position: relative;
        display: flex !important;
        flex-direction: column;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .period-switcher-container:hover {
        border-color: #d0e4f2;
    }

    .period-switcher-container.is-hidden {
        display: none !important;
    }

    /* Zeile 1: Header mit Statusbadge (links) und Zeitraum (rechts) */
    .period-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px 10px;
        padding: 7px 12px;
        background: #fafbfc;
        border-radius: 7px 7px 0 0;
        box-sizing: border-box;
        flex-wrap: nowrap;
        width: 100%;
        min-width: 0;
    }

    .period-switcher-container:not(:has(.period-switcher-info)):not(:has(.period-card-other-row)) .period-card-header {
        border-radius: 7px;
    }

    .period-card-status {
        display: inline-flex;
        align-items: flex-start;
        max-width: 62%;
        min-width: 0;
        flex: 1 1 auto;
    }

    .period-card-status .period-status-badge {
        max-width: 100%;
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
    }

    .period-card-timeframe {
        display: inline-flex;
        align-items: flex-start;
        justify-content: flex-end;
        font-size: 0.82rem;
        font-weight: 500;
        color: #475569;
        margin-left: auto;
        line-height: 1.35;
        white-space: normal;
        word-break: normal;
        text-align: right;
        max-width: 38%;
        min-width: 0;
        flex: 0 0 auto;
    }

    .period-card-timeframe-icon {
        font-size: 0.95rem;
        color: #94a3b8;
        line-height: 1.35;
        flex-shrink: 0;
        margin-top: 1px;
    }

    /* Zeile 2: Details-Text */
    .period-switcher-info {
        padding: 9px 12px;
        background: #ffffff;
        border-top: 1px solid #f0f6fa;
        font-size: 0.86rem;
        line-height: 1.5;
        color: #334155;
        box-sizing: border-box;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .period-switcher-container:not(:has(.period-card-other-row)) .period-switcher-info {
        border-radius: 0 0 7px 7px;
    }

    .period-switcher-info-text {
        margin: 0;
    }

    .period-switcher-info-text a {
        color: var(--primary-color, #0b3c5d);
        font-weight: 600;
        text-decoration: underline;
    }

    .period-switcher-info-text a:hover {
        color: var(--secondary-color, #1f6f96);
    }

    /* Zeile 3: Weitere Besoldungsrunden / Tarifrunden */
    .period-card-other-row {
        display: flex;
        align-items: center;
        gap: 8px 12px;
        padding: 7px 12px;
        background: #f8fafc;
        border-top: 1px solid #e2e8f0;
        border-radius: 0 0 7px 7px;
        box-sizing: border-box;
        flex-wrap: wrap;
    }

    .period-card-other-label {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 0.8rem;
        font-weight: 600;
        color: #64748b;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .period-card-other-icon {
        font-size: 1.05rem;
        color: #94a3b8;
    }

    .period-switcher-pills {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }

    @media (max-width: 640px) {
        .rounds-summary-header-row {
            gap: 6px 8px;
        }

        .rounds-summary-badge-wrapper .period-status-badge {
            padding: 2.5px 7px;
            font-size: 0.76rem;
            gap: 4px;
            white-space: normal;
            word-break: normal;
            overflow-wrap: break-word;
        }

        .rounds-summary-badge-wrapper .period-status-badge .badge-icon {
            font-size: 0.92rem;
        }

        .rounds-summary-title {
            font-size: 0.78rem;
            line-height: 1.3;
        }

        .period-card-header {
            padding: 6px 10px;
            gap: 6px 8px;
        }

        .period-card-status .period-status-badge {
            padding: 2.5px 7px;
            font-size: 0.76rem;
            gap: 4px;
            white-space: normal;
            word-break: normal;
            overflow-wrap: break-word;
        }

        .period-card-status .period-status-badge .badge-icon {
            font-size: 0.92rem;
        }

        .period-card-timeframe {
            font-size: 0.78rem;
            line-height: 1.3;
        }

        .period-card-other-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 6px;
            padding: 8px 10px;
        }

        .period-switcher-pills {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            overflow: visible;
        }
    }

    .period-switcher-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 3px 8px;
        background: #ffffff;
        border: 1px solid #d0e4f2;
        border-radius: 9999px;
        color: #334155;
        text-decoration: none;
        font-size: 0.8rem;
        font-weight: 500;
        white-space: nowrap;
        transition: all 0.15s ease;
        line-height: 1.25;
        flex-shrink: 0;
    }

    .period-switcher-pill:hover {
        border-color: #94a3b8;
        background: #f0f6fa;
        color: var(--primary-color, #0b3c5d);
    }

    .period-switcher-pill.is-active {
        background: var(--primary-color, #0b3c5d);
        border-color: var(--primary-color, #0b3c5d);
        color: #ffffff;
        box-shadow: 0 2px 5px rgba(11, 60, 93, 0.2);
    }

    .period-switcher-pill-dates {
        font-weight: 600;
    }

    .period-switcher-pill-badge {
        font-size: 0.78rem;
        font-weight: 500;
        padding: 1px 6px;
        border-radius: 9999px;
        line-height: 1.2;
    }

    .period-switcher-pill.badge-status-active:not(.is-active) .period-switcher-pill-badge {
        background: rgba(34, 197, 94, 0.12);
        color: #15803d;
    }

    .period-switcher-pill.badge-status-prognosis:not(.is-active) .period-switcher-pill-badge {
        background: rgba(245, 158, 11, 0.12);
        color: #b45309;
    }

    .period-switcher-pill.badge-status-enacted:not(.is-active) .period-switcher-pill-badge {
        background: rgba(59, 130, 246, 0.12);
        color: #1d4ed8;
    }

    .period-switcher-pill.badge-status-archive:not(.is-active) .period-switcher-pill-badge {
        background: rgba(100, 116, 139, 0.12);
        color: #475569;
    }

    .period-switcher-pill.is-active .period-switcher-pill-badge {
        background: rgba(255, 255, 255, 0.22);
        color: #ffffff;
    }

    /* Period Switcher Archive Dropdown */
    .period-switcher-dropdown {
        position: relative;
        display: inline-flex;
        flex-shrink: 0;
    }

    .period-switcher-dropdown summary {
        list-style: none;
        cursor: pointer;
        user-select: none;
    }

    .period-switcher-dropdown summary::-webkit-details-marker {
        display: none;
    }

    .period-switcher-dropdown-trigger {
        gap: 2px;
        padding-right: 6px;
    }

    .period-switcher-dropdown-icon {
        font-size: 1.15rem;
        line-height: 1;
        color: #64748b;
        transition: transform 0.2s ease;
    }

    .period-switcher-dropdown[open] .period-switcher-dropdown-icon {
        transform: rotate(180deg);
    }

    .period-switcher-dropdown[open] .period-switcher-dropdown-trigger {
        background: #f0f6fa;
        border-color: #94a3b8;
        color: #0b3c5d;
    }

    .period-switcher-dropdown-menu {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: auto;
        background: #ffffff;
        border: 1px solid #d0e4f2;
        border-radius: 8px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
        min-width: 175px;
        max-width: min(280px, calc(100vw - 32px));
        max-height: 280px;
        overflow-y: auto;
        z-index: 100;
        display: flex;
        flex-direction: column;
        padding: 4px;
        box-sizing: border-box;
    }

    @media (min-width: 641px) {
        .period-switcher-dropdown-menu {
            right: 0;
            left: auto;
        }
    }

    .period-switcher-dropdown-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5.5px 8px;
        font-size: 0.8rem;
        font-weight: 500;
        color: #334155;
        text-decoration: none;
        border-radius: 5px;
        transition: background 0.12s ease, color 0.12s ease;
        white-space: nowrap;
        gap: 8px;
    }

    .period-switcher-dropdown-item:hover {
        background: #f0f6fa;
        color: var(--primary-color, #0b3c5d);
    }

    .period-switcher-dropdown-item.is-active {
        background: #eff6ff;
        color: var(--primary-color, #0b3c5d);
        font-weight: 700;
    }

    .period-switcher-dropdown-item-year {
        font-weight: 600;
    }

    .period-switcher-dropdown-item-badge {
        font-size: 0.78rem;
        font-weight: 500;
        color: #475569;
        background: rgba(100, 116, 139, 0.12);
        padding: 1.5px 6px;
        border-radius: 9999px;
    }

    .period-switcher-dropdown-item.is-active .period-switcher-dropdown-item-badge {
        background: rgba(11, 60, 93, 0.12);
        color: var(--primary-color, #0b3c5d);
        font-weight: 600;
    }

    @media (max-width: 768px) {
        .period-card-header {
            padding: 6px 10px;
            gap: 6px 8px;
        }
        .period-switcher-info {
            padding: 7px 10px;
            font-size: 0.82rem;
            line-height: 1.45;
        }
        .period-switcher-pill {
            padding: 2.5px 7px;
            font-size: 0.8rem;
            gap: 4px;
        }
        .period-switcher-pill-badge {
            font-size: 0.75rem;
            padding: 1px 5px;
        }
    }


.table-tools-callout {
    width: 100%;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}

.table-tools-callout-hint {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color, #212529);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.table-tools-callout .table-tools-links {
    margin-top: 0;
    margin-bottom: 0;
}