:root { 
            color-scheme: light dark; 
            --primary-color: steelblue;
            --primary-hover: #3a6fa0;
            --accent-color: #87ceeb;
            --success-color: #10b981;
            --error-color: #ef4444;
            --warning-color: #f59e0b;
            --background: #f8fafc;
            --card-bg: #ffffff;
/*            --text-primary: #323232; */
            --text-primary: light-dark(#3C3645, #EEEEEE);
            --text-secondary: light-dark(steelblue, lightblue);
/*            --border-color: #e2e8f0; */
            --border-color: lightgrey;
            --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        }


        /* Form Styles - MODERN */
        .form-container {
            max-width: 900px;
            margin: 2rem auto;
            padding: 0 1rem;
        }

        .progress-container {
            margin-bottom: 1rem;
/*            background: var(--card-bg); */
            padding: 1.5rem;
/*            border-radius: 1rem; */
/*            box-shadow: var(--shadow); */
            border: 1px solid var(--border-color);
        }

        .progress-bar {
            width: 100%;
            height: 8px;
            background: var(--border-color);
            border-radius: 9999px;
            overflow: hidden;
            margin-bottom: 1rem;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
            transition: width 0.3s ease;
            border-radius: 9999px;
        }

        .step-indicator {
            display: flex;
            justify-content: space-between;
            font-size: 0.875rem;
        }

        .step {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .step-number {
            width: 24px;
            height: 24px;
            background: var(--border-color);
            color: var(--text-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 0.75rem;
        }

        .step.active .step-number {
            background: var(--primary-color);
            color: white;
        }

        .step.completed .step-number {
            background: var(--success-color);
            color: white;
        }

        /* Modern Cards */
        .card {
/*            background: var(--card-bg); */
/*            border-radius: 1rem; */
/*            box-shadow: var(--shadow); */
            margin-bottom: 1.5rem;
            overflow: hidden;
            border: 1px solid var(--border-color);
        }

        .card-header {
            padding: 1.5rem;
            border-bottom: 1px solid var(--border-color);
			
/*            background: linear-gradient(90deg, #f8fafc, #f1f5f9); */
            background: light-dark(lavender, slategray);
        }

        .card-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
        }

        .card-content {
            padding: 1.5rem;
        }

        /* Form Elements - MODERN */
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
            margin-bottom: 0.5rem;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .form-group label {
            font-weight: 600;
            color: var(--text-primary);
            font-size: 0.875rem;
        }

        .required {
            color: var(--error-color);
        }

        div.form-group input, select, textarea {
            padding: 0.75rem;
            border: 2px solid var(--border-color);
            border-radius: 4px;
            font-size: 1rem;
            transition: border-color 0.2s, box-shadow 0.2s;
            background: white;
/*            color: #1e293b; */
			color: light-dark(#3C3645; #cccccc) } 
            font-family: inherit;
        }
		
		div.form-group input, select, textarea { font-family: sans-serif; }
		input[type=text], [type=number], input[type=email], input[type=date], input[type=time], input[type=url], input[type=tel], input[type=password], select, textarea { 
		border: 2px solid #ccc; 
		border-radius: 4px; 
		background-color: light-dark(white, #323232); 
		color: light-dark(#3C3645; #cccccc) } 

		div.form-group input { padding-left: 0.25rem; }

		div.form-group input[type=text] { padding-left: 0.5rem; }

        div.form-group input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
        }

        div.form-group input:invalid {
            border-color: var(--error-color);
        }

        /* Radio/Checkbox Styles - MODERN */
        .radio-group, .checkbox-group {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .radio-item, .checkbox-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1rem;
            border: 2px solid var(--border-color);
            border-radius: 0.5rem;
            cursor: pointer;
            transition: all 0.2s;
/*            background: white; */
            font-size: 0.875rem;
        }

        .radio-item:hover, .checkbox-item:hover {
            border-color: var(--primary-color);
            background: rgb(37 99 235 / 0.05);
        }

        input[type="radio"]:checked + .radio-item,
        input[type="checkbox"]:checked + .radio-item,
        input[type="radio"]:checked + .checkbox-item,
        input[type="checkbox"]:checked + .checkbox-item {
/*            border-color: var(--primary-color); */
            border-color: steelblue;
/*            background: rgb(37 99 235 / 0.1); */
            background: light-dark(lavender, slategray);
/*            color: var(--primary-color); */
            color: var(--text-primary);
        }

        input[type="radio"], input[type="checkbox"] {
            margin: 0;
        }

        select:invalid {
            border-color: var(--error-color);
        }


        /* Button Styles */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 0.5rem;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            text-decoration: none;
            justify-content: center;
            font-family: inherit;
        }

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

        .btn-primary:hover {
            background: var(--primary-hover);
            transform: translateY(-1px);
            border: none;
            color: white;
            padding: 0.75rem 1.5rem;
            box-shadow: var(--shadow);
        }

        .btn-secondary {
            background: #6b7280;
            color: white;
        }

        .btn-secondary:hover {
            background: #4b5563;
        }

        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .btn-group {
            display: flex;
            gap: 1rem;
            justify-content: flex-end;
            margin-top: 1rem; 
            padding-top: 1rem;
            border-top: 1px solid var(--border-color);
        }

        /* Steps Content */
        .step-content {
            display: none;
        }

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

        /* Track Selection */
        .track-selection {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin: 1rem 0;
        }

        .track-card {
            border: 2px solid var(--border-color);
            border-radius: 0.5rem;
            padding: 1.5rem;
            cursor: pointer;
            transition: all 0.2s;
/*            background: white; */
            text-align: center;

            border-color: var(--text-primary);
/*            background: light-dark(lavender, slategray); */
            color: var(--text-primary);
        }

        .track-card:hover {
/*            border-color: var(--primary-color); */
            border-color: steelblue;
            box-shadow: var(--shadow);
            transform: translateY(-2px);
        }

        .track-card.selected {
/*            border-color: var(--primary-color); */
            border-color: steelblue;
            background: light-dark(lavender, slategray);
        }

        .track-card h4 {
/*            color: var(--primary-color); */
            color: var(--text-primary);
            margin-bottom: 0.5rem;
            font-size: 1.1rem;
        }

        .track-card p {
            color: var(--text-primary);
            font-size: 0.875rem;
            margin: 0;
        }

        .track-card p.error {
            color: light-dark(rgb(219, 19, 6), rgb(225, 25, 5));
			font-weight: bold;
        }
		
		.summary div {
			padding: 0.25rem;
		}
		
        /* Terms */
        .terms-container {
            max-height: 200px;
            overflow-y: auto;
            padding: 1rem;
            background: #f8fafc;
            border-radius: 0.5rem;
            border: 1px solid var(--border-color);
            margin: 1rem 0;
        }

        .terms-container h4 {
            color: var(--text-primary);
            margin-bottom: 0.5rem;
            margin-top: 1rem;
        }

        .terms-container h4:first-child {
            margin-top: 0;
        }

        .terms-container ul {
            padding-left: 1.5rem;
            color: var(--text-secondary);
        }

        .terms-container li {
            margin-bottom: 0.5rem;
        }

        /* Alerts */
        .alert {
            padding: 1rem;
            border-radius: 0.5rem;
            margin-bottom: 1rem;
        }

        .alert-error {
            background: #fef2f2;
            color: #991b1b;
            border: 1px solid #fecaca;
        }

        .alert-success {
            background: #f0fdf4;
            color: #166534;
            border: 1px solid #bbf7d0;
        }

        .alert-warning {
            background: #fffbeb;
            color: #92400e;
            border: 1px solid #fed7aa;
        }

        /* Loading */
        .spinner {
            border: 2px solid var(--border-color);
            border-top: 2px solid var(--primary-color);
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
            display: inline-block;
            margin-left: 0.5rem;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Responsive Design */
        @media screen and (max-width: 1000px) {
            .navbar a:not(:first-child) {
                display: none;
            }
            .navbar a.icon {
                float: right;
                display: block;
            }
            .navbar.responsive {
                position: relative;
                border-bottom-style: solid;
                border-bottom-width: 2px;
                border-bottom-color: black;
                flex-direction: column;
            }
            .navbar.responsive a {
                float: none;
                display: block;
                text-align: left;
            }
            .mobil {
                display: inline-block;
            }
            .form-row {
                grid-template-columns: 1fr;
            }
            .radio-group, .checkbox-group {
                flex-direction: column;
                gap: 0.5rem;
            }
            .btn-group {
                flex-direction: column;
            }
            .track-selection {
                grid-template-columns: 1fr;
            }
            .topbar {
                flex-wrap: wrap;
                gap: 0.5rem;
            }
            .topbar a {
                padding: 8px 6px;
                font-size: 0.8rem;
            }
        }

        @media (prefers-color-scheme: dark) {
            body {
                background-color: #323232;
                color: #ccc;
            }
            .navbar a {
                color: light-dark(#3C3645, #cccccc);
            }
            .content {
                background-image: linear-gradient(slategray 0px, #323232 50px);
            }
        }

        /* Animation */
        .fade-in {
            animation: fadeIn 0.3s ease-in;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }