/* Lokale Fonts laden */
@font-face {
    font-family: 'Inter';
    src: url('./assets/fonts/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('./assets/fonts/Inter-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('./assets/fonts/Inter-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('./assets/fonts/Inter-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Font Awesome 6 Free';
    src: url('./assets/fonts/fa-solid-900.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* --- Network Topology App Styles --- */
.topology-container{display:grid;grid-template-columns:360px 1fr;gap:1rem;padding:1rem}
.topology-container.vertical{grid-template-columns:1fr}
.task-panel{background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:12px;padding:1rem}
.task-box{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:10px;padding:1rem;margin-bottom:.75rem;color:var(--text-primary)}
.workspace-panel{display:grid;grid-template-columns:280px 1fr;gap:1rem}
.workspace-panel.single{grid-template-columns:1fr}
.device-palette{background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:12px;padding:1rem}
.device-palette.inline{background:transparent;border:none;padding:0}
.device-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}
.device-item{display:flex;align-items:center;gap:.5rem;background:var(--bg-primary);border:1px dashed var(--border-color);border-radius:10px;padding:.35rem .6rem;cursor:grab;font-size:.9rem;color:var(--text-primary)}
.device-item:active{cursor:grabbing}
.topology-canvas{position:relative;min-height:520px;background-image:linear-gradient(var(--border-color) 1px,transparent 1px),linear-gradient(90deg,var(--border-color) 1px,transparent 1px);background-size:20px 20px;border:1px solid var(--border-color);border-radius:12px;background-color:var(--bg-primary)}
.placed-device{position:absolute;width:80px;height:64px;border:2px solid #007bff;border-radius:10px;background:var(--bg-primary);display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 2px 6px rgba(0,0,0,.08);color:var(--text-primary)}
.device-label{font-size:.78rem;margin-top:.2rem;color:var(--text-primary)}
.device-config-btn{position:absolute;top:4px;right:4px;border:none;background:transparent;cursor:pointer}
.device-config-btn:hover{filter:brightness(0.85)}
.device-config-btn{color:var(--text-secondary)}
.device-config-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:1000}
.device-config-modal .modal-content{width:520px;max-width:92vw;background:var(--bg-primary);border-radius:12px;overflow:hidden;border:1px solid var(--border-color)}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);color:var(--text-primary)}
.modal-body{padding:16px;color:var(--text-primary)}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.form-group input,.form-group select{padding:10px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-primary);color:var(--text-primary)}
.form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.save-btn{background:#10b981;color:#fff;border:1px solid #10b981;border-radius:8px;padding:.5rem .8rem}
.cancel-btn{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;padding:.5rem .8rem;color:var(--text-primary)}
.feedback{margin:1rem 0;padding:1rem;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-secondary);color:var(--text-primary)}
.action-btn{padding:.5rem .8rem;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-primary);cursor:pointer;font-size:.95rem;color:var(--text-primary)}
.action-btn.sm{padding:.42rem .7rem;font-size:.9rem}
.action-btn.primary{background:var(--primary-color,#6c63ff);color:#fff;border-color:var(--primary-color,#6c63ff)}
.topology-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:flex-start;padding:.5rem 1rem 1rem}
@media (max-width: 1024px){.topology-container{grid-template-columns:1fr}.workspace-panel{grid-template-columns:1fr}}

/* === Netzplan Exercise Styles - Komplett neu === */
.netzplan-exercise-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem;
}

.netzplan-vorgangsdaten-wrapper {
    margin-bottom: 2rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.netzplan-vorgangsdaten-wrapper h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.netzplan-vorgangsdaten {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.netzplan-vorgangsdaten th,
.netzplan-vorgangsdaten td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.netzplan-vorgangsdaten th {
    background: var(--primary-color);
    color: white;
    font-weight: 600;
}

.netzplan-vorgangsdaten td {
    color: var(--text-primary);
}

.netzplan-vorgangsdaten tr:hover {
    background: var(--bg-tertiary);
}

.netzplan-exercise-header {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.netzplan-exercise-header h3 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.netzplan-exercise-header p {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.netzplan-exercise-header small {
    color: var(--text-muted);
    font-style: italic;
}

/* Grid Layout */
.netzplan-grid {
    display: grid;
    grid-template-columns: repeat(4, 296px);
    grid-template-rows: repeat(3, 160px);
    gap: 2px;
    background: var(--border-color);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 2px;
    margin: 2rem auto;
    background-color: var(--bg-primary);
    width: 1198px;
    height: 494px;
}

.netzplan-grid-cell {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    position: relative;
    transition: all 0.2s ease;
}

.netzplan-grid-cell:hover {
    background: var(--bg-tertiary);
}

.netzplan-grid-cell.netzplan-cell-hover {
    background: var(--primary-color);
    opacity: 0.7;
}

/* Netzplan Box */
.netzplan-box {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: var(--bg-primary);
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    cursor: move;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.netzplan-box:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Box Table */
.netzplan-box-table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

.netzplan-box-table td {
    padding: 3px;
    text-align: center;
    border: none;
    vertical-align: middle;
}

/* Input Fields */
.netzplan-input {
    width: 66px !important;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem;
    text-align: center;
    transition: all 0.2s ease;
    -moz-appearance: textfield;
    padding: 4px;
    box-sizing: border-box;
}

.netzplan-input::-webkit-outer-spin-button,
.netzplan-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.netzplan-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.2);
    color: var(--text-primary);
}

.netzplan-input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.netzplan-input.netzplan-input-error {
    border-color: #dc3545;
    background: #f8d7da;
    color: #721c24;
}

/* Dauer Display */
.netzplan-dauer {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 1rem;
}

/* Box Label */
.netzplan-box-label {
    font-weight: bold;
    color: white;
    font-size: 1.1rem;
    background: var(--primary-color);
    border-radius: 20px;
    padding: 4px 8px;
    text-align: center;
}

/* Controls */
.netzplan-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 2rem 0;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.netzplan-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
}

.netzplan-path-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.netzplan-path-section label {
    color: var(--text-primary);
    font-weight: 600;
}

.netzplan-path-section input {
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem;
}

.netzplan-path-section input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.2);
}

/* Solution Explanation */
.netzplan-solution-explanation {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.netzplan-explanation h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.explanation-content {
    display: grid;
    gap: 1.5rem;
}

.explanation-section {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.explanation-section h5 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.explanation-section p {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.explanation-section strong {
    color: var(--text-primary);
}

.explanation-section em {
    color: var(--text-secondary);
    font-style: italic;
}

.critical-path-result {
    background: var(--primary-color);
    color: white;
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-top: 1rem;
}

.critical-path-result h5 {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.critical-path-result p {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

/* Dark Mode Support for Netzplan */
[data-theme="dark"] .netzplan-vorgangsdaten-wrapper {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .netzplan-vorgangsdaten-wrapper h4 {
    color: var(--text-primary);
}

[data-theme="dark"] .netzplan-vorgangsdaten {
    background: var(--bg-secondary);
}

[data-theme="dark"] .netzplan-vorgangsdaten th {
    background: var(--primary-color);
    color: white;
}

[data-theme="dark"] .netzplan-vorgangsdaten td {
    color: var(--text-primary);
}

[data-theme="dark"] .netzplan-vorgangsdaten tr:hover {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .netzplan-exercise-header {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .netzplan-exercise-header h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .netzplan-exercise-header p {
    color: var(--text-secondary);
}

[data-theme="dark"] .netzplan-exercise-header small {
    color: var(--text-muted);
}

[data-theme="dark"] .netzplan-grid {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .netzplan-grid-cell {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
}

[data-theme="dark"] .netzplan-grid-cell:hover {
    background: var(--bg-primary);
}

[data-theme="dark"] .netzplan-grid-cell.netzplan-cell-hover {
    background: var(--primary-color);
    opacity: 0.7;
}

[data-theme="dark"] .netzplan-box {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .netzplan-box:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .netzplan-input {
    background: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .netzplan-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.2);
}

[data-theme="dark"] .netzplan-input.netzplan-input-error {
    border-color: #dc3545;
    background: #f8d7da;
    color: #721c24;
}

[data-theme="dark"] .netzplan-dauer {
    color: var(--primary-color);
}

[data-theme="dark"] .netzplan-box-label {
    background: var(--primary-color);
    color: white;
}

[data-theme="dark"] .netzplan-controls {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .netzplan-path-section label {
    color: var(--text-primary);
}

[data-theme="dark"] .netzplan-path-section input {
    background: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .netzplan-path-section input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.2);
}

[data-theme="dark"] .netzplan-solution-explanation {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .netzplan-explanation h4 {
    color: var(--text-primary);
}

[data-theme="dark"] .explanation-section {
    background: var(--bg-secondary);
    border-color: var(--border-light);
}

[data-theme="dark"] .explanation-section h5 {
    color: var(--primary-color);
}

[data-theme="dark"] .explanation-section p {
    color: var(--text-primary);
}

[data-theme="dark"] .explanation-section strong {
    color: var(--text-primary);
}

[data-theme="dark"] .explanation-section em {
    color: var(--text-secondary);
}

[data-theme="dark"] .critical-path-result {
    background: var(--primary-color);
    color: white;
}

[data-theme="dark"] .critical-path-result h5 {
    color: white;
}

[data-theme="dark"] .critical-path-result p {
    color: white;
}

/* Dark Mode Support for Network Topology */
[data-theme="dark"] .task-panel {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .task-box {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .device-palette {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .device-palette h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .device-palette h4 {
    color: var(--text-secondary);
}

[data-theme="dark"] .device-item {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .device-item:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
}

[data-theme="dark"] .topology-canvas {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    background-image: linear-gradient(var(--border-color) 1px, transparent 1px), 
                      linear-gradient(90deg, var(--border-color) 1px, transparent 1px);
}

[data-theme="dark"] .placed-device {
    background: var(--bg-secondary);
    border-color: #007bff;
    color: var(--text-primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .device-label {
    color: var(--text-primary);
}

[data-theme="dark"] .device-config-btn {
    color: var(--text-secondary);
}

[data-theme="dark"] .device-config-btn:hover {
    color: var(--text-primary);
}

[data-theme="dark"] .device-config-modal .modal-content {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .modal-header {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .modal-body {
    color: var(--text-primary);
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select {
    background: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .save-btn {
    background: #10b981;
    color: white;
    border-color: #10b981;
}

[data-theme="dark"] .cancel-btn {
    background: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .feedback {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .action-btn {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .action-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

[data-theme="dark"] .action-btn.primary {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

[data-theme="dark"] .action-btn.primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* === Power Socket Wiring App Styles === */
.power-socket-main-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}

.power-socket-installation-area {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
    padding: 2rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-color);
    min-height: 520px;
}

.power-socket-instance {
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 0;
    text-align: center;
    min-width: 470px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.power-socket-instance:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.power-socket-instance h4 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.power-socket-image-display {
    position: relative;
    display: inline-block;
}

.power-socket-image {
    width: 420px;
    height: 420px;
    object-fit: contain;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    padding: 1rem;
}

.power-socket-slots-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.power-socket-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.9);
    border: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    min-height: 66px;
    min-width: 50px;
    max-width: 50px;
    transition: all 0.3s ease;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
    position: absolute;
    font-size: 0.9rem;
    pointer-events: all;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
}

/* Spezifische Positionen für die drei Slots - anpassbar */
.power-socket-slot[data-klemme="L"] {
    top: 256px;
    left: 160px;
}

.power-socket-slot[data-klemme="PE"] {
    top: 284px;
    left: 210px;
}

.power-socket-slot[data-klemme="N"] {
    top: 256px;
    left: 260px;
}

.power-socket-slot:hover {
    border-color: var(--primary-dark);
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.power-socket-slot.drag-over {
    border-color: var(--primary-color);
    background: rgba(99, 102, 241, 0.2);
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
    animation: pulse 0.5s ease-in-out infinite alternate;
}

@keyframes pulse {
    0% { transform: scale(1.1); }
    100% { transform: scale(1.15); }
}

.power-socket-slot.filled {
    border-color: var(--success-color);
    background: rgba(34, 197, 94, 0.2);
    backdrop-filter: blur(5px);
}

.power-socket-slot.correct {
    border-color: var(--success-color);
    background: rgba(34, 197, 94, 0.3);
    color: var(--success-dark);
    backdrop-filter: blur(5px);
}

.power-socket-slot.incorrect {
    border-color: var(--error-color);
    background: rgba(239, 68, 68, 0.3);
    color: var(--error-dark);
    backdrop-filter: blur(5px);
}

.wire-color-box {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid #555;
    margin-left: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.draggable-wires-container {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin: 2rem 0;
}

.draggable-wires-container h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    text-align: center;
    font-weight: 600;
}

.wires-flex-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.draggable-power-wire {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    cursor: grab;
    font-weight: 600;
    font-size: 1rem;
    min-width: 140px;
    text-align: center;
    transition: all 0.3s ease;
    user-select: none;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    border: 2px solid transparent;
}

.draggable-power-wire:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    border-color: var(--primary-color);
}

.draggable-power-wire.dragging {
    opacity: 0.8;
    transform: rotate(3deg) scale(1.05);
    z-index: 1000;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    border-color: var(--primary-color);
}

.power-socket-controls {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.feedback-area {
    margin: 2rem 0;
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-color);
    text-align: center;
}

.feedback-area.feedback-correct {
    background: var(--success-light);
    border-color: var(--success-color);
    color: var(--success-dark);
}

.feedback-area.feedback-incorrect {
    background: var(--error-light);
    border-color: var(--error-color);
    color: var(--error-dark);
}

.feedback-area h5 {
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.feedback-area ul {
    text-align: left;
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.feedback-area li {
    margin-bottom: 0.5rem;
}

.instructions {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--primary-color);
    margin-bottom: 2rem;
    text-align: center;
}

.instructions p {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin: 0;
    font-weight: 500;
}

/* Dark mode support for Power Socket App */
[data-theme="dark"] .power-socket-installation-area {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .power-socket-instance {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .power-socket-instance:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .power-socket-image {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .power-socket-slot {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .power-socket-slot:hover {
    background: var(--bg-primary);
}

[data-theme="dark"] .power-socket-slot.drag-over {
    background: var(--primary-dark);
}

[data-theme="dark"] .draggable-wires-container {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .draggable-wires-container h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .instructions {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
}

[data-theme="dark"] .instructions p {
    color: var(--text-primary);
}

/* Responsive design for Power Socket App */
@media (max-width: 768px) {
    .power-socket-installation-area {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    
    .power-socket-instance {
        min-width: 100%;
        max-width: 350px;
    }
    
    .power-socket-image {
        width: 300px;
        height: 300px;
    }
    
    .power-socket-slot {
        min-height: 50px;
        min-width: 40px;
        max-width: 40px;
        padding: 0.4rem;
        font-size: 0.8rem;
    }
    
    /* Mobile Positionen - anpassbar */
    .power-socket-slot[data-klemme="L"] {
        top: 120px;
        left: 80px;
    }
    
    .power-socket-slot[data-klemme="PE"] {
        top: 120px;
        left: 140px;
    }
    
    .power-socket-slot[data-klemme="N"] {
        top: 120px;
        left: 200px;
    }
    
    .wires-flex-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
    
    .draggable-power-wire {
        min-width: 180px;
        padding: 0.875rem 1.25rem;
        font-size: 0.95rem;
    }
    
    .power-socket-controls {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
    
    .wire-color-box {
        width: 20px;
        height: 20px;
        margin-left: 0.5rem;
    }
}

/* === Dose Wiring Styles === */
.dose-wiring-interface {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.wiring-instructions {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--primary-color);
}

.wiring-instructions h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.wiring-instructions ol {
    margin: 0;
    padding-left: 1.5rem;
}

.wiring-instructions li {
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.wiring-tip {
    margin-top: 1rem;
    padding: 1rem;
    background: #e3f2fd;
    border: 1px solid #2196f3;
    border-radius: 6px;
    color: #1565c0;
    font-size: 0.9rem;
}

.standard-selection {
    text-align: center;
}

.standard-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
}

.standard-btn {
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

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

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

.wiring-area {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 2rem 0;
}

.cable-display, .socket-display {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-color);
}

.cable-display h3, .socket-display h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    text-align: center;
    font-weight: 600;
}

.cable-cores {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    flex-wrap: wrap;
}

.core {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    background: #ffffff;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    cursor: grab;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 0.8rem;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    min-width: 100px;
}

.core:hover {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.core:active {
    cursor: grabbing;
    transform: translateY(0);
}

.core-color {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #333;
    flex-shrink: 0;
}

.core-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Realistic cable colors */
.core-color.green-white {
    background: linear-gradient(45deg, #90EE90 50%, #FFFFFF 50%);
}

.core-color.green {
    background: #32CD32;
}

.core-color.orange-white {
    background: linear-gradient(45deg, #FFA500 50%, #FFFFFF 50%);
}

.core-color.blue {
    background: #87CEEB;
}

.core-color.blue-white {
    background: linear-gradient(45deg, #87CEEB 50%, #FFFFFF 50%);
}

.core-color.orange {
    background: #FFA500;
}

.core-color.brown-white {
    background: linear-gradient(45deg, #8B4513 50%, #FFFFFF 50%);
}

.core-color.brown {
    background: #8B4513;
}

/* Realistic Socket Design */
.realistic-socket {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
}

.socket-image-container {
    position: relative;
    display: inline-block;
}

.socket-image {
    max-width: 600px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.socket-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.socket-pins {
    display: flex;
    gap: 0.1rem;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    margin-top: 78px;
    margin-left: -20px;
    transform: translateX(-2px);
    position: relative;
}

/* Fine-tune individual pin positions for better alignment */
.socket-pins .pin:nth-child(1) { transform: translateX(-0.5px); } /* Pin 5 */
.socket-pins .pin:nth-child(2) { transform: translateX(-0.25px); } /* Pin 4 */
.socket-pins .pin:nth-child(3) { transform: translateX(0px); } /* Pin 1 */
.socket-pins .pin:nth-child(4) { transform: translateX(0.25px); } /* Pin 2 */
.socket-pins .pin:nth-child(5) { transform: translateX(0.5px); } /* Pin 3 */
.socket-pins .pin:nth-child(6) { transform: translateX(0.75px); } /* Pin 6 */
.socket-pins .pin:nth-child(7) { transform: translateX(1px); } /* Pin 7 */
.socket-pins .pin:nth-child(8) { transform: translateX(1.25px); } /* Pin 8 */

.pin {
    width: 22px;
    height: 35px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #333;
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    backdrop-filter: blur(2px);
}

.pin:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

.pin-number {
    font-size: 0.7rem;
    font-weight: 700;
    color: #000;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 2px 4px;
    border-radius: 3px;
    border: 1px solid #333;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.pin.correct {
    border-color: #4CAF50;
    background: rgba(232, 245, 232, 0.95);
    box-shadow: 0 2px 6px rgba(76, 175, 80, 0.5);
}

.pin.incorrect {
    border-color: #F44336;
    background: rgba(255, 235, 238, 0.95);
    box-shadow: 0 2px 6px rgba(244, 67, 54, 0.5);
}

/* Striped cable colors for pins */
.pin[data-color="green-white"] {
    background: linear-gradient(45deg, #90EE90 50%, #FFFFFF 50%);
    background-size: 4px 4px;
}

.pin[data-color="green"] {
    background: #32CD32;
}

.pin[data-color="orange-white"] {
    background: linear-gradient(45deg, #FFA500 50%, #FFFFFF 50%);
    background-size: 4px 4px;
}

.pin[data-color="blue"] {
    background: #87CEEB;
}

.pin[data-color="blue-white"] {
    background: linear-gradient(45deg, #87CEEB 50%, #FFFFFF 50%);
    background-size: 4px 4px;
}

.pin[data-color="orange"] {
    background: #FFA500;
}

.pin[data-color="brown-white"] {
    background: linear-gradient(45deg, #8B4513 50%, #FFFFFF 50%);
    background-size: 4px 4px;
}

.pin[data-color="brown"] {
    background: #8B4513;
}

.pin[data-color]:not([data-color=""]) {
    border-width: 2px;
    font-weight: 600;
    font-size: 0.6rem;
}

/* Pin color indicators */
.pin[data-color="green-white"] { border-left: 4px solid #90EE90; }
.pin[data-color="green"] { border-left: 4px solid #32CD32; }
.pin[data-color="orange-white"] { border-left: 4px solid #FFE4B5; }
.pin[data-color="blue"] { border-left: 4px solid #87CEEB; }
.pin[data-color="blue-white"] { border-left: 4px solid #F0F8FF; }
.pin[data-color="orange"] { border-left: 4px solid #FFA500; }
.pin[data-color="brown-white"] { border-left: 4px solid #F5DEB3; }
.pin[data-color="brown"] { border-left: 4px solid #8B4513; }

.wiring-controls {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 2rem 0;
}

.wiring-result {
    margin-top: 2rem;
}

.result-success, .result-error, .result-info {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    text-align: center;
}

.result-success {
    background: #E8F5E8;
    border: 2px solid #4CAF50;
    color: #2E7D32;
}

.result-error {
    background: #FFEBEE;
    border: 2px solid #F44336;
    color: #C62828;
}

.result-info {
    background: #E3F2FD;
    border: 2px solid #2196F3;
    color: #1565C0;
}

@media (max-width: 768px) {
    .standard-buttons {
        flex-direction: column;
    }
    
    .wiring-controls {
        flex-direction: column;
    }
    
    .socket-image {
        max-width: 480px;
    }
    
    .socket-pins {
        gap: 0.08rem;
        margin-top: 60px;
        margin-left: -15px;
        transform: translateX(-1px);
    }
    
    .pin {
        width: 20px;
        height: 28px;
    }
    
    .pin-number {
        font-size: 0.6rem;
        top: -18px;
    }
    
    .cable-cores {
        gap: 0.3rem;
        padding: 0.8rem;
    }
    
    .core {
        min-width: 80px;
        padding: 0.3rem 0.6rem;
        font-size: 0.7rem;
    }
    
    .core-color {
        width: 16px;
        height: 16px;
    }
    
    .core-label {
        font-size: 0.65rem;
    }
}

/* === Troubleshooting Scenario Styles === */
.troubleshooting-scenario {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin: 1rem 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.scenario-header h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.scenario-info {
    background: rgba(255, 255, 255, 0.8);
    padding: 1rem;
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary-color);
}

.scenario-info p {
    margin: 0.5rem 0;
    font-size: 0.9rem;
}

.current-standard {
    background: rgba(255, 255, 255, 0.9);
    padding: 1rem;
    border-radius: var(--radius-md);
    margin-top: 1rem;
    border: 1px solid #dee2e6;
}

.current-standard h4 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.success-details, .error-details {
    background: rgba(255, 255, 255, 0.9);
    padding: 1rem;
    border-radius: var(--radius-md);
    margin-top: 1rem;
}

.success-details h5, .error-details h5 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.success-details ul, .error-details ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.success-details li, .error-details li {
    margin: 0.25rem 0;
    font-size: 0.9rem;
}

/* Dark Mode Support for Troubleshooting Scenario */
[data-theme="dark"] .troubleshooting-scenario {
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
    border-color: #4a5568;
    color: var(--text-primary);
}

[data-theme="dark"] .scenario-info {
    background: rgba(45, 55, 72, 0.8);
    border-left-color: var(--primary-color);
    color: var(--text-primary);
}

[data-theme="dark"] .current-standard {
    background: rgba(45, 55, 72, 0.9);
    border-color: #4a5568;
    color: var(--text-primary);
}

[data-theme="dark"] .success-details, 
[data-theme="dark"] .error-details {
    background: rgba(45, 55, 72, 0.9);
    color: var(--text-primary);
}

/* Wiring Controls Button Layout */
.wiring-controls {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 2rem 0;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.wiring-controls .btn {
    min-width: 160px;
    font-size: 0.85rem;
    padding: 0.8rem 1.2rem;
}

/* Dark Mode for Wiring Controls */
[data-theme="dark"] .wiring-controls {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

/* Dark Mode for Cable Cores */
[data-theme="dark"] .cable-cores {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .core {
    background: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .core:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

[data-theme="dark"] .core-label {
    color: var(--text-primary);
}

[data-theme="dark"] .core:hover .core-label {
    color: white;
}

/* Quiz Text Readability Improvements */
.question-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin: 1rem 0;
    box-shadow: var(--shadow-md);
}

.question-text {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.answer-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.answer-btn {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    min-height: 60px;
    display: flex;
    align-items: center;
}

.answer-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.answer-btn.correct {
    background: var(--success-color);
    color: white;
    border-color: var(--success-color);
}

.answer-btn.incorrect {
    background: var(--error-color);
    color: white;
    border-color: var(--error-color);
}

/* Dark Mode for Quiz */
[data-theme="dark"] .question-card {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .answer-btn {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .answer-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* LWL Row Styling - Same as other rows */
.lwl-row {
    background: var(--bg-primary);
    font-weight: 600;
}

[data-theme="dark"] .lwl-row {
    background: var(--bg-primary);
}

/* === Cable Expert Styles === */
.cable-expert-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    margin-bottom: 2rem;
}

.cable-expert-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--border-color);
}

.cable-expert-header h2 {
    color: var(--primary-color);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.cable-expert-menu {
    margin-top: 2rem;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.menu-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.menu-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.menu-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.menu-item h3 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.menu-item p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.menu-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.menu-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

/* Cable Selection Styles */
.cable-selection-header {
    text-align: center;
    margin-bottom: 2rem;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    margin: 1rem 0;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.scenario-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.scenario-card h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.scenario-description {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.requirements {
    background: var(--bg-primary);
    padding: 1rem;
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary-color);
}

.requirement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.requirement-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-light);
}

.requirement-label {
    font-weight: 600;
    color: var(--text-secondary);
}

.requirement-value {
    color: var(--primary-color);
    font-weight: 700;
}

.cable-selection-area {
    margin-bottom: 2rem;
}

.cable-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.cable-option {
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--bg-primary);
}

.cable-option:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.cable-option.selected {
    border-color: var(--primary-color);
    background: var(--primary-light);
    box-shadow: var(--shadow-md);
}

.cable-visual {
    height: 60px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

.cable-visual::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.cable-name {
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.cable-info h5 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.cable-info p {
    margin: 0.25rem 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.action-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}


.feedback-area {
    margin-top: 2rem;
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.feedback.success {
    background: var(--success-light);
    border-color: var(--success-color);
}

.feedback.error {
    background: var(--error-light);
    border-color: var(--error-color);
}

.feedback.info {
    background: var(--info-light);
    border-color: var(--info-color);
}

.feedback h4 {
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

/* Cable Properties Styles */
.cable-comparison-table {
    margin-bottom: 2rem;
}

.cable-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.cable-table th {
    background: var(--primary-color);
    color: white;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
}

.cable-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.cable-table tr:hover {
    background: var(--bg-secondary);
}

.cable-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
}

.quiz-questions {
    margin-top: 2rem;
}

.question-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.question-card h4 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.answer-options {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.answer-btn {
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.answer-btn:hover:not(:disabled) {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.answer-btn.correct {
    background: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

.answer-btn.incorrect {
    background: var(--error-color);
    border-color: var(--error-color);
    color: white;
}

.answer-btn:disabled {
    cursor: not-allowed;
}

.explanation {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--info-light);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--info-color);
}

/* Wiring Exercise Styles */
.wiring-comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.wiring-standard {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
}

.wiring-standard h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.rj45-connector {
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
}

.connector-pins {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.pin {
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    text-align: center;
    border: 1px solid var(--border-light);
    position: relative;
}

.pin-number {
    display: block;
    font-weight: 700;
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.pin-color {
    font-size: 0.7rem;
    font-weight: 600;
}

.standard-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.wiring-quiz {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-top: 2rem;
}

.quiz-scenarios {
    margin-top: 1rem;
}

.scenario-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
}

.scenario-item h4 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

/* Length Calculator Styles */
.calculator-interface {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.input-section, .result-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.input-section h3, .result-section h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.input-group {
    margin-bottom: 1rem;
}

.input-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.input-group select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem;
}

.calculation-result {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-secondary);
}

.result-success, .result-error {
    padding: 1rem;
    border-radius: var(--radius-md);
    text-align: left;
}

.result-success {
    background: var(--success-light);
    border: 1px solid var(--success-color);
}

.result-error {
    background: var(--error-light);
    border: 1px solid var(--error-color);
}

.result-success h4, .result-error h4 {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.highlight {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.2rem;
}

.length-reference-table {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-top: 2rem;
}

.length-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.length-table th {
    background: var(--primary-color);
    color: white;
    padding: 0.75rem;
    text-align: center;
    font-weight: 600;
}

.length-table td {
    padding: 0.75rem;
    text-align: center;
    border-bottom: 1px solid var(--border-light);
}

.length-table tr:hover {
    background: var(--bg-secondary);
}

/* Results Styles */
.results-container {
    text-align: center;
    padding: 2rem;
}

.score-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0;
}

.score-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
}

.score-number {
    font-size: 2.5rem;
    line-height: 1;
}

.score-total {
    font-size: 1rem;
    opacity: 0.8;
}

.score-percentage {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
}

.score-message {
    font-size: 1.5rem;
    margin: 2rem 0;
    color: var(--text-primary);
}

/* Responsive Design */
@media (max-width: 768px) {
    .cable-expert-container {
        padding: 1rem;
    }
    
    .menu-grid {
        grid-template-columns: 1fr;
    }
    
    .cable-options {
        grid-template-columns: 1fr;
    }
    
    .requirement-grid {
        grid-template-columns: 1fr;
    }
    
    .wiring-comparison {
        grid-template-columns: 1fr;
    }
    
    .calculator-interface {
        grid-template-columns: 1fr;
    }
    
    .score-display {
        flex-direction: column;
        gap: 1rem;
    }
    
    .action-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 300px;
    }
}
/* === BWL Kalkulation Styles === */
.kalkulation-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 2rem;
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    margin-bottom: 2rem;
    box-sizing: border-box;
}

.kalkulation-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--border-color);
}

.kalkulation-header h2 {
    color: var(--primary-color);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.task-description {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.given-values {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--primary-color);
}

.given-values p {
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.given-values .highlight {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.1rem;
}

.kalkulation-table {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 2rem;
    box-sizing: border-box;
}

.kalkulation-table table {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    table-layout: auto;
}

.kalkulation-table th {
    background: var(--primary-color);
    color: white;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.95rem;
}

.kalkulation-table th:nth-child(1) {
    min-width: 200px;
    text-align: left;
}

.kalkulation-table th:nth-child(2) {
    min-width: 120px;
    text-align: center;
}

.kalkulation-table th:nth-child(3) {
    min-width: 150px;
    text-align: right;
}

.kalkulation-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.kalkulation-table td:nth-child(3) {
    text-align: right;
}

.kalkulation-table .text-center {
    text-align: center;
    color: var(--text-secondary);
    font-weight: 500;
}

.kalkulation-table tr:last-child td {
    border-bottom: none;
}

.input-row {
    transition: background-color 0.2s ease;
}

.input-row:hover {
    background-color: var(--bg-secondary);
}

.input-row.highlighted {
    background-color: rgba(251, 191, 36, 0.1);
    border-left: 3px solid var(--accent-color);
}

.input-row.result-row {
    background-color: rgba(16, 185, 129, 0.1);
    border-left: 3px solid var(--success-color);
    font-weight: 600;
}

.input-row.result-row td {
    border-top: 2px solid var(--success-color);
}

.separator-row td {
    padding: 0;
    border: none;
}

.separator-row td.separator-cell {
    padding: 1rem 0;
}

.separator-row hr {
    border: none;
    height: 2px;
    background: var(--border-color);
    margin: 0.5rem 0;
}

.calculation-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s ease;
    text-align: right;
}

.calculation-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.calculation-input.correct {
    border-color: var(--success-color);
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.calculation-input.incorrect {
    border-color: var(--danger-color);
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
}

.readonly-input {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
    border-color: var(--border-light) !important;
}

.result-input {
    font-weight: 700;
    font-size: 1.1rem;
}

.unit {
    margin-left: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.kalkulation-controls {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
}


.feedback-container {
    display: none;
    margin-top: 2rem;
}

.feedback {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    box-shadow: var(--shadow-md);
}

.feedback.success {
    background: rgba(16, 185, 129, 0.1);
    border: 2px solid var(--success-color);
    color: var(--success-color);
}

.feedback.error {
    background: rgba(239, 68, 68, 0.1);
    border: 2px solid var(--danger-color);
    color: var(--danger-color);
}

.feedback i {
    font-size: 1.5rem;
    margin-top: 0.25rem;
}

.feedback h3 {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.feedback p {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .kalkulation-container {
        padding: 1rem;
        margin: 1rem;
    }
    
    .kalkulation-table {
        font-size: 0.9rem;
    }
    
    .kalkulation-table th,
    .kalkulation-table td {
        padding: 0.5rem 0.75rem;
    }
    
    .calculation-input {
        font-size: 0.9rem;
        padding: 0.4rem 0.6rem;
    }
    
    .kalkulation-controls {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 300px;
    }
}

/* === Modern Global Styles === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Modern Light Theme - Based on modern-website design */
    --primary-color: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #818cf8;
    --secondary-color: #f59e0b;
    --accent-color: #10b981;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;
    --success-color: #10b981;
    
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    
    --border-color: #e5e7eb;
    --border-light: #f3f4f6;
    
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 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);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    
    /* Modern Typography */
    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
    
    /* Modern Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    
    /* Modern Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
}

/* Modern Dark Theme - Based on modern-website design */
[data-theme="dark"] {
    --primary-color: #818cf8;
    --primary-dark: #6366f1;
    --primary-light: #c7d2fe;
    --secondary-color: #fbbf24;
    --accent-color: #34d399;
    --danger-color: #f87171;
    --warning-color: #fbbf24;
    --success-color: #34d399;
    
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    
    --border-color: #475569;
    --border-light: #334155;
    
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.6;
    font-size: 16px;
    transition: background 0.3s ease, color 0.3s ease;
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

/* Main Content */
main {
    min-height: calc(100vh - 200px);
}
/* === Modern Footer === */
.footer {
    background: var(--bg-primary);
    border-top: 1px solid var(--border-light);
    padding: 1.5rem 0;
    box-shadow: var(--shadow-sm);
}

.footer-bottom {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 2rem;
}

.footer-bottom p {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.9rem;
}
@import url('styles/nav.css');

[data-theme="dark"] body::before {
    background: 
        radial-gradient(circle at 20% 80%, rgba(129, 140, 248, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(251, 191, 36, 0.1) 0%, transparent 50%);
}

/* nav moved to styles/nav.css */

/* nav moved to styles/nav.css */

/* nav moved to styles/nav.css */

/* nav moved to styles/nav.css */

/* nav moved to styles/nav.css */

/* nav moved to styles/nav.css */
/* Responsive improvements to prevent overlap */
.nav-container { flex-wrap: nowrap; gap: 12px; align-items: center; }
.nav-menu { flex: 1 1 auto; display: flex; align-items: center; }
.nav-rows { display: flex; flex-direction: column; gap: 6px; margin-left: 16px; width: 970px; }
.nav-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nav-link { padding: 6px 10px; }
.row-2 { align-items: center; }
.row-2 .search-container { margin-left: 12px; flex: 0 0 auto; }
.row-2 .theme-toggle { margin-left: 8px; }
.search-box { width: 280px; max-width: 280px; }
.search-input { padding: 8px 12px; }

@media (max-width: 1200px) {
/* nav moved to styles/nav.css */
}

@media (max-width: 780px) {
  /* nav moved to styles/nav.css */
}

/* nav moved to styles/nav.css */
/* nav moved to styles/nav.css */

/* nav moved to styles/nav.css */

/* nav moved to styles/nav.css */

/* nav moved to styles/nav.css */

/* nav moved to styles/nav.css */

/* nav moved to styles/nav.css */

/* nav moved to styles/nav.css */

.search-result-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

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

.search-result-item:hover {
    background: var(--bg-tertiary);
}

.search-result-icon {
    font-size: 1.2rem;
    color: var(--primary-color);
    min-width: 1.5rem;
}

.search-result-content {
    flex: 1;
}

.search-result-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

.search-result-description {
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.3;
}

.search-result-category {
    background: var(--primary-light);
    color: var(--primary-color);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 500;
    margin-top: 0.25rem;
    display: inline-block;
}

.search-no-results {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

.search-highlight {
    background: var(--primary-light);
    color: var(--primary-color);
    padding: 0.1rem 0.2rem;
    border-radius: 2px;
    font-weight: 600;
}

/* nav moved to styles/nav.css */

/* nav moved to styles/nav.css */

/* nav moved to styles/nav.css */

.theme-toggle {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 8px 10px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
    position: relative;
    overflow: hidden;
    color: var(--text-primary);
}

/* nav moved to styles/nav.css */

.moon-icon {
    display: none;
}

[data-theme="dark"] .sun-icon {
    display: none;
}

[data-theme="dark"] .moon-icon {
    display: inline;
}

/* === Main Container === */
.main-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    flex: 1;
}

/* === Views === */
.view {
    display: none;
    animation: fadeIn 0.3s ease;
}

.view.active {
    display: block;
}

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

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

/* === Dashboard === */
.dashboard-header {
    text-align: center;
    margin-bottom: 3rem;
}

.dashboard-header h2 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.dashboard-header p {
    font-size: 1.2rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

.course-card {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    border: 1px solid var(--border-light);
    text-align: center;
    position: relative;
    overflow: hidden;
}
/* moved duplicate details to styles/components.css */

.course-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    transform: scaleX(0);
    transition: transform var(--transition-normal);
}

.course-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-light);
}
/* moved duplicate details to styles/components.css */

.course-card:hover::before {
    transform: scaleX(1);
}

.course-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    margin: 0 auto var(--spacing-lg);
    transition: all var(--transition-normal);
    transform-style: preserve-3d;
}

.course-card:hover .course-icon {
    transform: translateY(-8px) scale(1.1);
    box-shadow: 0 16px 48px rgba(99, 102, 241, 0.4);
}

/* Course Icons - Modern Design like feature-icon */
.course-icon.red { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); }
.course-icon.blue { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); }
.course-icon.green { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); }
.course-icon.purple { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); }
.course-icon.orange { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); }
.course-icon.pink { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); }
.course-icon.yellow { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); }
.course-icon.teal { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); }
.course-icon.indigo { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); }

/* === Flashcard Management View === */
.flashcard-management-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.flashcard-management-header-content h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.flashcard-management-header-content p {
    color: var(--text-secondary);
    margin: 0;
}

.flashcard-management-container {
    padding: 2rem;
}

.theme-selection h4 {
    color: var(--text-primary);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.theme-card {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: 2rem;
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.theme-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.theme-card:hover::before {
    transform: scaleX(1);
}

.theme-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-light);
}

.theme-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-lg);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-normal);
    transform-style: preserve-3d;
}

.theme-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.theme-card:hover .theme-icon {
    transform: translateY(-8px) scale(1.1);
    box-shadow: 0 16px 48px rgba(99, 102, 241, 0.4);
}

.theme-card:hover .theme-icon::before {
    opacity: 1;
}

.theme-icon i {
    color: white;
    font-size: 1.5rem;
    z-index: 1;
    position: relative;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    display: block !important;
}

/* Theme Icon Colors - Consistent with feature-icon design */
.theme-icon.teal,
.theme-icon.blue,
.theme-icon.green,
.theme-icon.red,
.theme-icon.purple,
.theme-icon.orange,
.theme-icon.yellow,
.theme-icon.pink {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

/* Force icon visibility for flashcard themes */
.theme-icon i::before {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    display: block !important;
    color: white !important;
    font-size: 1.5rem !important;
}

/* Specific icon content for each flashcard theme */
.theme-card[onclick*="energie"] .theme-icon i::before {
    content: "\f1ec" !important; /* fa-calculator */
}

.theme-card[onclick*="hardware"] .theme-icon i::before {
    content: "\f2db" !important; /* fa-microchip */
}

.theme-card[onclick*="netzwerk"] .theme-icon i::before {
    content: "\f6ff" !important; /* fa-network-wired */
}

.theme-card[onclick*="security"] .theme-icon i::before {
    content: "\f7d9" !important; /* fa-shield-halved */
}

.theme-card[onclick*="sql"] .theme-icon i::before {
    content: "\f1c0" !important; /* fa-database */
}

.theme-card[onclick*="projekt"] .theme-icon i::before {
    content: "\f542" !important; /* fa-project-diagram */
}

.theme-card[onclick*="bwl"] .theme-icon i::before {
    content: "\f201" !important; /* fa-chart-line */
}

.theme-card h5 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-weight: 700;
}

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

.flashcard-editor {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-light);
    overflow: hidden;
}

.editor-header {
    background: var(--bg-secondary);
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-light);
}

.editor-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.editor-header-left h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
}

.editor-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.flashcards-list {
    padding: 2rem;
    max-height: 70vh;
    overflow-y: auto;
}

.flashcard-item {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
}

.flashcard-item:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}

.flashcard-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.flashcard-item-number {
    background: var(--primary-color);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
}

.flashcard-item-actions {
    display: flex;
    gap: 0.5rem;
}

.flashcard-action-btn {
    background: none;
    border: 1px solid var(--border-color);
    padding: 0.5rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.flashcard-action-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.flashcard-action-btn.delete:hover {
    background: var(--danger-color);
    border-color: var(--danger-color);
    color: white;
}

.flashcard-content {
    display: grid;
    gap: 1rem;
}

.flashcard-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

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

.flashcard-field input,
.flashcard-field textarea {
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    transition: border-color 0.3s ease;
    font-family: inherit;
}

.flashcard-field input:focus,
.flashcard-field textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.flashcard-field textarea {
    min-height: 80px;
    resize: vertical;
}

.flashcard-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.flashcard-option {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.flashcard-option input {
    margin-bottom: 0.5rem;
}

.flashcard-option label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* === Responsive Design für Karteikarten-Verwaltung === */
@media (max-width: 768px) {
    .theme-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .theme-card {
        padding: 1.5rem;
    }
    
    .editor-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .editor-actions {
        width: 100%;
        justify-content: space-between;
    }
    
    .flashcard-options {
        grid-template-columns: 1fr;
    }
    
    .flashcard-item-actions {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .flashcard-action-btn {
        padding: 0.75rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .flashcard-management-container {
        padding: 1rem;
    }
    
    .theme-card {
        padding: 1rem;
    }
    
    .theme-icon {
        width: 50px;
        height: 50px;
    }
    
    .theme-icon i {
        font-size: 1.25rem;
    }
    
    .flashcards-list {
        padding: 1rem;
    }
    
    .flashcard-item {
        padding: 1rem;
    }
}

.course-info {
    flex: 1;
}

.course-info h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.course-info p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

.course-arrow {
    display: none;
}

/* === Course Details === */
.course-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.back-btn {
    background: var(--bg-tertiary);
    border: none;
    color: var(--text-secondary);
    padding: 0.75rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

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

/* === Unified Button System === */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    min-height: 44px;
    justify-content: center;
    white-space: nowrap;
    user-select: none;
}
/* moved button effects to styles/components.css */

.btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
    z-index: 0;
    pointer-events: none;
}

.btn:hover:before {
    left: 100%;
}

.btn > * {
    position: relative;
    z-index: 1;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white !important;
    border: 1px solid var(--primary-dark);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, #3730a3 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.btn-secondary {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--border-color) 100%);
    border-color: var(--primary-color);
    color: var(--primary-color) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: 1px solid #059669;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.btn-success:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.btn-info {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: white;
    border: 1px solid #0891b2;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3);
}

.btn-info:hover {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4);
}

.btn-outline {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.btn-outline:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white !important;
    border: 1px solid #dc2626;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    color: white !important;
}

/* Dark Mode Button Support */
[data-theme="dark"] .btn-secondary {
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
    color: var(--text-primary);
    border-color: #6b7280;
}

[data-theme="dark"] .btn-secondary:hover {
    background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%);
    border-color: var(--primary-color);
    color: var(--primary-color) !important;
}

[data-theme="dark"] .btn-outline {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

[data-theme="dark"] .btn-outline:hover {
    background: var(--primary-color);
    color: white !important;
}

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-primary:hover {
    color: white !important;
}

[data-theme="dark"] .btn-success,
[data-theme="dark"] .btn-success:hover {
    color: white !important;
}

[data-theme="dark"] .btn-info,
[data-theme="dark"] .btn-info:hover {
    color: white !important;
}

[data-theme="dark"] .btn-danger,
[data-theme="dark"] .btn-danger:hover {
    color: white !important;
}

.course-header-content h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.course-header-content p {
    color: var(--text-secondary);
    margin: 0;
}

.course-content {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
}

.course-content h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.course-content ul {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.course-content li {
    margin-bottom: 0.5rem;
}

.course-content strong {
    color: var(--text-primary);
}

/* === Learning Options === */
.learning-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%;
}

/* AP1 Card Quiz grid */
.ap1cq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.ap1cq-tile {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    text-align: center;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 200px;
    position: relative;
    overflow: hidden;
}

.ap1cq-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    transform: scaleX(0);
    transition: transform var(--transition-normal);
}

.ap1cq-tile:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-light);
}

.ap1cq-tile:hover::before {
    transform: scaleX(1);
}

.ap1cq-tile .tile-icon { 
    width: 60px; 
    height: 60px; 
    border-radius: var(--radius-lg); 
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); 
    margin: 0 auto 0.75rem; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.3);
    transition: all var(--transition-normal);
    transform-style: preserve-3d;
}

.ap1cq-tile:hover .tile-icon {
    transform: translateY(-8px) scale(1.1);
    box-shadow: 0 16px 48px rgba(99, 102, 241, 0.4);
}


.ap1cq-tile h4 { 
    margin-bottom: 0.5rem; 
    font-size: 1rem;
    line-height: 1.3;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ap1cq-tile p { 
    color: var(--text-secondary); 
    font-size: 0.9rem; 
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.ap1cq-tile .option-features {
    margin-top: auto;
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.ap1cq-tile .feature-tag {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
} 

.option-card {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.option-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    transform: scaleX(0);
    transition: transform var(--transition-normal);
}

.option-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-light);
}

.option-card:hover::before {
    transform: scaleX(1);
}

.option-card.quiz-option:hover {
    border-color: var(--accent-color);
}

.option-card.flashcards-option:hover {
    border-color: var(--secondary-color);
}

.option-card.exercises-option:hover {
    border-color: var(--primary-color);
}

.option-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
    color: white;
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.3);
    transition: all var(--transition-normal);
    transform-style: preserve-3d;
}

.option-card:hover .option-icon {
    transform: translateY(-8px) scale(1.1);
    box-shadow: 0 16px 48px rgba(99, 102, 241, 0.4);
}

.option-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.option-card p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.start-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

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

/* === Quiz View === */
.quiz-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.quiz-header-content h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.quiz-header-content p {
    color: var(--text-secondary);
    margin: 0;
}

.question-container {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
}

.question-text {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.answer-options {
    display: grid;
    gap: 1rem;
    margin-bottom: 2rem;
}

.answer-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--bg-primary);
}

.answer-option:hover {
    border-color: var(--primary-color);
    background: var(--bg-secondary);
}

.answer-option input[type="radio"] {
    display: none;
}

.radio-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    position: relative;
    transition: all 0.3s ease;
}

.answer-option input[type="radio"]:checked + .radio-custom {
    border-color: var(--primary-color);
    background: var(--primary-color);
}

.answer-option input[type="radio"]:checked + .radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
}

/* Custom Checkbox Styles */
.answer-option input[type="checkbox"] {
    display: none;
}

.checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    display: inline-block;
    position: relative;
    margin-right: 12px;
    background: var(--bg-primary);
    transition: all 0.2s ease;
}

.answer-option input[type="checkbox"]:checked + .checkbox-custom {
    border-color: var(--primary-color);
    background: var(--primary-color);
}

.answer-option input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.answer-text {
    flex: 1;
    color: var(--text-primary);
    font-weight: 500;
}

.answer-option.correct {
    border-color: var(--success-color);
    background: var(--success-color);
    color: white;
}

.answer-option.incorrect {
    border-color: var(--danger-color);
    background: var(--danger-color);
    color: white;
}

.quiz-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.submit-btn, .next-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.submit-btn:hover, .next-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

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

.quiz-progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.progress-text {
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.progress-bar-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.progress-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

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

.progress-percentage {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
    min-width: 35px;
    text-align: right;
}

/* === Flashcards View === */
.flashcards-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.flashcard-progress {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

/* === Netzwerk Exercises === */
.netzwerk-exercises {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem;
}

/* Exercises view - für Stromverbrauch und andere generische Übungen */
.exercises-content {
    padding: 2rem;
}

.exercises-content .exercise-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 0;
}

.exercises-content .exercise-tile {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: 2rem;
    text-align: center;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    cursor: pointer;
}

.exercises-content .exercise-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-light);
}

.exercises-content .exercise-tile .tile-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
    font-size: 2rem;
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.3);
    transition: all var(--transition-normal);
    transform-style: preserve-3d;
}

.exercises-content .exercise-tile:hover .tile-icon {
    transform: translateY(-8px) scale(1.1);
    box-shadow: 0 16px 48px rgba(99, 102, 241, 0.4);
}

.exercises-content .exercise-tile h4 {
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-size: 1.2rem;
}

.exercises-content .exercise-tile p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.exercises-content .exercise-tile .start-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.exercises-content .exercise-tile .start-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.exercise-card {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: 2rem;
    text-align: center;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    cursor: pointer;
}

.exercise-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-light);
}

.exercise-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
    font-size: 2rem;
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.3);
    transition: all var(--transition-normal);
    transform-style: preserve-3d;
}

.exercise-card:hover .exercise-icon {
    transform: translateY(-8px) scale(1.1);
    box-shadow: 0 16px 48px rgba(99, 102, 241, 0.4);
}

/* All exercise icons now use the modern design by default */

/* All option icons now use the modern design by default */

/* All tile icons now use the modern design by default */

/* Ensure all tile icons are visible */
.ap1cq-tile .tile-icon i {
    color: inherit;
    font-size: 1.5rem;
    display: block !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

/* Specific styling for IT-Sicherheit topic tile */
.ap1cq-tile[onclick*="it_sicherheit"] .tile-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    color: white !important;
}

.ap1cq-tile[onclick*="it_sicherheit"] .tile-icon i {
    color: white !important;
    font-size: 1.5rem;
    display: block !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

/* Force icon visibility with pseudo-element for all topics */
.ap1cq-tile .tile-icon i::before {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    display: block !important;
    color: inherit !important;
    font-size: 1.5rem !important;
}

/* Specific icon content for each topic */
.ap1cq-tile[onclick*="planung"] .tile-icon i::before {
    content: "\f46d" !important; /* fa-clipboard-check */
}

.ap1cq-tile[onclick*="beratung"] .tile-icon i::before {
    content: "\f508" !important; /* fa-user-tie */
}

.ap1cq-tile[onclick*="it_systeme"] .tile-icon i::before {
    content: "\f108" !important; /* fa-desktop */
}

.ap1cq-tile[onclick*="entwicklung"] .tile-icon i::before {
    content: "\f121" !important; /* fa-code */
}

.ap1cq-tile[onclick*="qualitaet"] .tile-icon i::before {
    content: "\f15c" !important; /* fa-file-lines */
}

.ap1cq-tile[onclick*="it_sicherheit"] .tile-icon i::before {
    content: "\f7d9" !important; /* fa-shield-halved */
}

.ap1cq-tile[onclick*="auftragsabschluss"] .tile-icon i::before {
    content: "\f3c1" !important; /* fa-check-to-slot */
}

.ap1cq-tile[onclick*="master"] .tile-icon i::before {
    content: "\f091" !important; /* fa-trophy */
}

.exercise-card h4 {
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-size: 1.2rem;
}

.exercise-card p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.subnetting-container,
.ip-conversion-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

#subnetting-task,
#ip-conversion-task {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: 2rem;
    margin-bottom: 2rem;
    text-align: center;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
}

#subnetting-task p,
#ip-conversion-task p {
    font-size: 1.1rem;
    margin: 0.5rem 0;
    color: var(--text-primary);
}

.subnetting-inputs,
.conversion-inputs {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-group label {
    font-weight: 600;
    color: var(--text-primary);
}

.input-group input {
    padding: 1rem 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1.05rem;
    width: 100%;
    max-width: 720px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.input-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Global modern inputs for all apps */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea {
    padding: 1rem 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1.05rem;
    width: 100%;
    max-width: 720px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-secondary);
    opacity: 0.8;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.host-range-inputs {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.host-range-inputs span {
    font-weight: 600;
    color: var(--text-secondary);
}

.subnetting-controls,
.conversion-controls {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.check-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.check-btn {
    background: #7c3aed !important; /* violet-600 */
    color: #ffffff !important;
    border: 1px solid #6d28d9 !important;
    box-shadow: 0 2px 6px rgba(124,58,237,0.25) !important;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.check-btn:hover {
    background: #6d28d9 !important; /* violet-700 */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(109,40,217,0.35) !important;
}

.new-task-btn {
    background: #16a34a !important; /* green-600 */
    color: #ffffff !important;
    border: 1px solid #128a3f !important;
    box-shadow: 0 2px 6px rgba(22,163,74,0.25) !important;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.new-task-btn:hover {
    background: #15803d !important; /* green-700 */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(21,128,61,0.35) !important;
}

#new-conversion-task-btn {
    background: #16a34a !important; /* green-600 */
    color: #ffffff !important;
    border: 1px solid #128a3f !important;
    box-shadow: 0 2px 6px rgba(22,163,74,0.25) !important;
}

#new-conversion-task-btn:hover {
    background: #15803d !important; /* green-700 */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(21,128,61,0.35) !important;
}

.action-btn {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

/* Neue Aufgabe Button - Grün */
.action-btn:not(.primary) {
    background: #16a34a; /* green-600 */
    color: #ffffff !important;
    border: 1px solid #128a3f !important;
    box-shadow: 0 2px 6px rgba(22,163,74,0.25) !important;
}

.action-btn:not(.primary):hover {
    background: #15803d !important; /* green-700 */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(21,128,61,0.35) !important;
}

/* Überprüfen Button - Blau-Lila */
.action-btn.primary {
    background: #7c3aed !important; /* violet-600 */
    color: #ffffff !important;
    border: 1px solid #6d28d9 !important;
    box-shadow: 0 2px 6px rgba(124,58,237,0.25) !important;
}

.action-btn.primary:hover {
    background: #6d28d9 !important; /* violet-700 */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(109,40,217,0.35) !important;
}

#subnet-feedback,
#conversion-feedback {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    border: 1px solid var(--border-light);
}

#subnet-feedback h4,
#conversion-feedback h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

#subnet-feedback p,
#conversion-feedback p {
    margin: 0.5rem 0;
    color: var(--text-secondary);
}

#feedback-message,
#conversion-feedback-message {
    font-weight: 600;
    margin-bottom: 1rem;
}

.conversion-input-group {
    display: none;
}

.conversion-input-group.active {
    display: block;
}

/* IPv6 Binary Input Styling */
#user-binary-input.ipv6-format {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.4;
    word-break: break-all;
    white-space: pre-wrap;
    min-height: 60px;
    padding: 0.75rem;
}

#user-binary-input.ipv6-format::placeholder {
    font-size: 0.8rem;
    line-height: 1.3;
    white-space: pre-wrap;
}

/* IPv6 Hex Input Styling */
#user-hex-input.ipv6-format {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

/* Task text formatting for long binary strings */
#given-conversion-ip {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.4;
    word-break: break-all;
    white-space: pre-wrap;
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: var(--radius-md);
    margin: 1rem 0;
    border: 1px solid var(--border-color);
}

.flashcards-header-content h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.flashcards-header-content p {
    color: var(--text-secondary);
    margin: 0;
}

.flashcard-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    position: relative;
}

.favorite-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fbbf24;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.favorite-btn:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 1);
}

.favorite-btn.favorited {
    color: #f59e0b;
}

.favorite-btn.favorited i {
    font-weight: 900;
}

.question-text .favorite-btn {
    position: static;
    background: transparent;
    border: none;
    width: auto;
    height: auto;
    box-shadow: none;
    padding: 0.25rem;
    margin-left: 0.5rem;
}

.question-text .favorite-btn:hover {
    transform: scale(1.2);
    background: transparent;
}

.flashcard {
    width: 100%;
    max-width: 500px;
    height: 300px;
    perspective: 1000px;
    cursor: pointer;
}

.flashcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flashcard.flipped .flashcard-inner {
    transform: rotateY(180deg);
}

.flashcard-front, .flashcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flashcard-back {
    transform: rotateY(180deg);
}

.flashcard h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.flashcard p {
    color: var(--text-primary);
    font-size: 1.1rem;
    line-height: 1.6;
}

.flashcard-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-btn {
    background: var(--bg-tertiary);
    border: none;
    color: var(--text-secondary);
    padding: 0.75rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

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

.card-counter {
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 60px;
    text-align: center;
}

/* === Exercises View === */
.exercises-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.exercises-header-content h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.exercises-header-content p {
    color: var(--text-secondary);
    margin: 0;
}

.exercises-content {
    padding: 2rem;
    /* Kein Hintergrund, damit die Kacheln wie bei anderen Themen aussehen */
}

/* === Responsive Design === */
@media (max-width: 768px) {
    .nav-menu {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .search-container {
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
        order: -1;
    }
    
    .search-input {
        width: 100%;
        max-width: 300px;
    }
    
    .search-input:focus {
        width: 100%;
        max-width: 350px;
    }
    
    .course-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .learning-options {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .course-card {
        text-align: center;
    }
    
    .dashboard-header h2 {
        font-size: 2rem;
    }
    
    .main-container {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .nav-container {
        flex-direction: column;
        gap: 1rem;
    }
    
    .nav-logo {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    .logo-img {
        height: 80px;
    }
    
    .course-grid,
    .learning-options {
        grid-template-columns: 1fr;
    }
    
    .course-content, .question-container, .flashcard-front, .flashcard-back {
        padding: 1rem;
    }
    
    .flashcard {
        height: 250px;
    }
}

/* === Hardware-spezifische Styles === */
.hardware-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem;
}

/* Hardware options inherit from general .option-card styles */

/* Hardware options inherit ::before from general .option-card styles */

/* Hardware options inherit hover from general .option-card styles */

/* Hardware options inherit hover::before from general .option-card styles */

/* Hardware options inherit icon styles from general .option-icon styles */


/* Hardware options inherit h3 styles from general .option-card h3 styles */

/* Hardware options inherit p styles from general .option-card p styles */

.hardware-container {
    display: grid;
    grid-template-columns: 2fr 350px;
    gap: 20px;
    height: calc(100vh - 70px);
    margin: 20px;
}

.simulation-area {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: visible;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: calc(100% + 50px);
    min-height: 0;
}

.control-panel {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-md);
    overflow-y: auto;
    border: 1px solid var(--border-color);
    height: calc(100% + 50px);
}


.component-card {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 15px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.component-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.component-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
}

.component-icon.cpu { background: var(--success-color); }
.component-icon.ram { background: var(--primary-color); }
.component-icon.gpu { background: var(--warning-color); }
.component-icon.motherboard { background: #6f42c1; }
.component-icon.psu { background: var(--text-secondary); }
.component-icon.storage { background: #fd7e14; }

.component-specs {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 0.9em;
    color: var(--text-secondary);
}

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

.tutorial-step {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}

.tutorial-step:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.tutorial-step.completed {
    background: var(--bg-primary);
    border-color: var(--success-color);
    box-shadow: var(--shadow-md);
}

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

.quiz-question {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: var(--radius-md);
    padding: 15px;
    margin-bottom: 10px;
}

/* Quiz answer options - different from quiz start cards */
.quiz-answer-option {
    display: block;
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.quiz-answer-option:hover {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
}

.quiz-answer-option.selected {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.quiz-answer-option.correct {
    background: var(--success-color);
    color: white;
    border-color: var(--success-color);
}

.quiz-answer-option.incorrect {
    background: var(--danger-color);
    color: white;
    border-color: var(--danger-color);
}

/* Hardware Quiz Answer Options */
#hardware-quiz-view .answer-option.correct {
    background: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

#hardware-quiz-view .answer-option.incorrect {
    background: var(--danger-color);
    border-color: var(--danger-color);
    color: white;
}

/* Modal Styles */
.tutorial-modal, .quiz-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.tutorial-content, .quiz-content, .library-content {
    background: var(--bg-primary);
    padding: 30px;
    border-radius: var(--radius-lg);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
}

.tutorial-actions, .quiz-actions, .library-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}


.installation-feedback {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--success-color);
    color: white;
    padding: 15px 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1001;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.component-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.feedback-content h4 {
    margin: 0 0 10px 0;
    color: white;
}

.feedback-content p {
    margin: 0;
    color: white;
}

.quiz-progress {
    text-align: center;
    margin-top: 15px;
    font-weight: bold;
    color: var(--text-secondary);
}

.quiz-options {
    margin: 15px 0;
}

.tutorial-modal.success .tutorial-content {
    background: linear-gradient(135deg, #e8f5e8, #f0f8f0);
    border: 2px solid var(--success-color);
}

.quiz-modal.results .quiz-content {
    background: linear-gradient(135deg, #fff3cd, #fef9e7);
    border: 2px solid var(--warning-color);
}

/* 2D PC Builder */
.pc-builder-controls {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.5rem;
    justify-content: center;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.pc-builder-controls .btn-primary,
.pc-builder-controls .btn-secondary {
    padding: 0.8rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pc-builder-controls .btn-primary {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.pc-builder-controls .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.5);
}

.pc-builder-controls .btn-secondary {
    background: linear-gradient(135deg, #8e44ad, #9b59b6);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(142, 68, 173, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.pc-builder-controls .btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(142, 68, 173, 0.5);
}

.pc-builder-container {
    flex: 1;
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    overflow: visible;
    min-height: 0;
    max-height: 100%;
}

.pc-case-layout {
    flex: 1;
    width: 100%;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    border: 2px solid var(--border-light);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    min-height: calc(100% + 50px);
    max-height: calc(100% + 50px);
}


.pc-case-layout::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
}

.case-header {
    text-align: center;
    margin-bottom: 1rem;
    color: #ffffff;
    flex-shrink: 0;
}

.case-header h4 {
    font-size: 1.3rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.mainboard-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto auto;
    gap: 1rem;
    flex: 1;
    min-height: 0;
    align-content: start;
    width: 100%;
    overflow: visible;
}

.mainboard-slot, .cpu-slot, .gpu-slot, .psu-slot {
    grid-column: 1 / -1;
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-md);
    padding: 1.2rem;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    backdrop-filter: blur(10px);
}

.mainboard-slot:hover, .cpu-slot:hover, .gpu-slot:hover, .psu-slot:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(79, 172, 254, 0.6);
    transform: translateY(-2px);
}

.ram-slots {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.ram-slot {
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-md);
    padding: 1.2rem;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    backdrop-filter: blur(10px);
}

.ram-slot:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(79, 172, 254, 0.6);
    transform: translateY(-2px);
}

.storage-slots {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.storage-slot {
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-md);
    padding: 0.8rem;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    backdrop-filter: blur(10px);
}

.storage-slot:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(79, 172, 254, 0.6);
    transform: translateY(-2px);
}

.slot-label {
    font-size: 0.85rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


.slot-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.installed-component {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    width: 100%;
    background: rgba(79, 172, 254, 0.1);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
    border: 1px solid rgba(79, 172, 254, 0.3);
}

.installed-component .component-icon {
    font-size: 2.2rem;
    font-weight: bold;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.installed-component .component-icon-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.installed-component .component-name {
    font-size: 0.8rem;
    color: #ffffff;
    text-align: center;
    line-height: 1.2;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.remove-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
    transition: all 0.3s ease;
    font-weight: bold;
}

.remove-btn:hover {
    background: linear-gradient(135deg, #c0392b, #a93226);
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(231, 76, 60, 0.6);
}

/* Drag & Drop States */
.drag-over {
    border-color: #4facfe !important;
    background: rgba(79, 172, 254, 0.2) !important;
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(79, 172, 254, 0.5) !important;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 20px rgba(79, 172, 254, 0.5); }
    50% { box-shadow: 0 0 30px rgba(79, 172, 254, 0.8); }
    100% { box-shadow: 0 0 20px rgba(79, 172, 254, 0.5); }
}

/* Component Library Panel */
.component-library-panel {
    flex: 1;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1rem;
    overflow: visible;
    box-shadow: var(--shadow-md);
    position: relative;
}

.component-library-panel h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 600;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
}

.component-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.component-item {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    cursor: grab;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    box-shadow: var(--shadow-sm);
}

.component-item:hover {
    background: var(--bg-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
    border-width: 2px;
}

.component-item.installed {
    opacity: 0.5;
    cursor: not-allowed;
}

.component-item.installed:hover {
    transform: none;
}

.component-icon {
    font-size: 2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.component-icon-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.component-name {
    font-size: 0.85rem;
    color: var(--text-primary);
    text-align: center;
    font-weight: 600;
    line-height: 1.2;
}

.component-price {
    font-size: 0.75rem;
    color: var(--primary-color);
    font-weight: 700;
}

.tech-details {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.3;
    margin: 0.3rem 0;
    font-weight: 500;
    font-family: 'Courier New', monospace;
}

/* Dark Mode Styles für Komponenten-Bibliothek */
[data-theme="dark"] .component-library-panel {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .component-library-panel h4 {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .component-item {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .component-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-color);
}

[data-theme="dark"] .component-name {
    color: #ffffff !important;
}

[data-theme="dark"] .component-item .component-name {
    color: #ffffff !important;
}

[data-theme="dark"] .component-price {
    color: #4facfe !important;
}

[data-theme="dark"] .component-item .component-price {
    color: #4facfe !important;
}

[data-theme="dark"] .tech-details {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] .component-item .tech-details {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] .installed-component .component-name {
    color: #ffffff !important;
}

[data-theme="dark"] .component-library h3 {
    color: #ffffff !important;
}

[data-theme="dark"] .component-icon-img {
    filter: brightness(1.2);
}

/* Light Mode Styles */
@media (prefers-color-scheme: light) {
    .component-name {
        color: #000000 !important;
        text-shadow: none !important;
    }
    
    .tech-details {
        color: rgba(0, 0, 0, 0.7) !important;
        text-shadow: none !important;
    }
    
    .component-price {
        color: #0066cc !important;
        text-shadow: none !important;
        background: linear-gradient(135deg, #0066cc, #004499) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }
    
    .slot-label {
        color: #000000 !important;
        text-shadow: none !important;
    }
    
    
    .case-header h4 {
        color: #000000 !important;
        text-shadow: none !important;
    }
    
    
    .installed-component .component-name {
        color: #000000 !important;
        text-shadow: none !important;
    }
}

/* Messages */
.pc-builder-message {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    color: white;
    font-weight: 500;
    z-index: 1000;
    animation: slideIn 0.3s ease;
}

.pc-builder-message.success {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
}

.pc-builder-message.error {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.pc-builder-message.info {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}


.simulation-instructions {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin: 1rem;
    color: white;
    font-size: 0.9rem;
}

.simulation-instructions h4 {
    margin: 0 0 0.5rem 0;
    color: white;
    font-size: 1rem;
}

.simulation-instructions ol {
    margin: 0;
    padding-left: 1.2rem;
}

.simulation-instructions li {
    margin-bottom: 0.3rem;
    line-height: 1.4;
}

.simulation-instructions strong {
    color: #4facfe;
}

/* Tutorial Styles */
.tutorials-container {
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.tutorial-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-md);
}

.tutorial-header h4 {
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.tutorial-header p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.tutorial-steps h5 {
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tutorial-steps ol {
    color: var(--text-primary);
    padding-left: 1.5rem;
    line-height: 1.6;
}

.tutorial-steps li {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

/* Light Mode for Tutorials */
@media (prefers-color-scheme: light) {
    .tutorial-item {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
    }
    
    .tutorial-header h4 {
        color: var(--text-primary) !important;
    }
    
    .tutorial-header p {
        color: var(--text-secondary) !important;
    }
    
    .tutorial-steps h5 {
        color: var(--primary-color) !important;
    }
    
    .tutorial-steps ol {
        color: var(--text-primary) !important;
    }
}

.slot-legend {
    margin-top: 1rem;
    padding: 0.8rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.slot-legend h5 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.legend-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.5rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid var(--border-color);
}

.scene-controls {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 10;
}

.scene-controls button {
    margin: 0 5px;
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.scene-controls button:hover {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
}

.component-info {
    margin-top: 20px;
}

.component-info h3 {
    margin-bottom: 10px;
    color: var(--text-primary);
}

.component-info h4 {
    margin: 10px 0 5px 0;
    color: var(--text-primary);
}

.component-info p {
    margin: 5px 0;
    color: var(--text-secondary);
    font-size: 0.9em;
}

/* Hardware Container Styles */
.quiz-container, .tutorials-container, .components-container {
    padding: 2rem;
}

.quiz-intro {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: 3rem;
    text-align: center;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
}

.quiz-intro h3 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.quiz-intro p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    font-size: 1.1rem;
    line-height: 1.6;
}

.tutorials-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
}

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

.component-card-grid {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
    cursor: pointer;
}

.component-card-grid:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

.component-card-grid .component-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 15px;
    vertical-align: middle;
}

.component-card-grid .component-info {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 80px);
}

.component-card-grid h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.component-card-grid p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* Hardware Responsive Design */
@media (max-width: 768px) {
    .hardware-container {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
        height: auto;
    }
    
    .control-panel {
        max-height: 300px;
    }
    
    .hardware-options {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
    
    .tutorials-container,
    .components-container {
        grid-template-columns: 1fr;
    }
}

/* === RAID Calculator Styles === */
.raid-calculator-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.raid-header {
    text-align: center;
    margin-bottom: 3rem;
}

.raid-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.raid-header p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin: 0;
}

.raid-task-section {
    margin-bottom: 3rem;
}

.raid-task-container {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-light);
}

.raid-task-description {
    margin-bottom: 2rem;
}

.raid-task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-light);
}

.raid-task-header h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.raid-task-badge {
    background: var(--primary-color);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9rem;
}

.raid-task-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.raid-scenario,
.raid-level,
.raid-question {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin: 0;
}

.raid-task-info {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-top: 1rem;
}

.raid-task-info h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.raid-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.raid-info-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.raid-info-icon {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

.raid-info-label {
    font-weight: 600;
    color: var(--text-secondary);
    flex: 1;
}

.raid-info-value {
    font-weight: 700;
    color: var(--text-primary);
}

.raid-input-section {
    margin-bottom: 2rem;
}

.raid-input-container h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.raid-input-group {
    margin-bottom: 1.5rem;
}

.raid-input-group label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.raid-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.raid-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.raid-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.raid-input-suffix {
    position: absolute;
    right: 1rem;
    color: var(--text-secondary);
    font-weight: 600;
    pointer-events: none;
}

.raid-controls {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.raid-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.raid-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

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

.raid-btn-primary:hover {
    background: var(--primary-dark);
}

.raid-btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

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

.raid-feedback-section {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    border: 1px solid var(--border-light);
}

.raid-feedback-message {
    margin-bottom: 1.5rem;
}

.raid-feedback-correct,
.raid-feedback-incorrect {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--radius-md);
}

.raid-feedback-correct {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.raid-feedback-incorrect {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.raid-feedback-correct i,
.raid-feedback-incorrect i {
    font-size: 1.5rem;
}

.raid-feedback-content h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1.2rem;
}

.raid-feedback-content p {
    margin: 0;
    font-size: 1rem;
}

.raid-solution-container h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.raid-calculation-steps {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.raid-step {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    border: 1px solid var(--border-light);
}

.raid-step-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.raid-step-number {
    background: var(--primary-color);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.raid-step-content {
    margin-left: 3rem;
}

.raid-formula {
    background: var(--bg-tertiary);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    border-left: 4px solid var(--primary-color);
}

.raid-calculation {
    background: var(--bg-secondary);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-family: 'Courier New', monospace;
    color: var(--text-primary);
    font-weight: 600;
}

.raid-info-section {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-light);
}

.raid-info-section h3 {
    color: var(--text-primary);
    margin-bottom: 2rem;
    font-size: 1.8rem;
    text-align: center;
}

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

.raid-level-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
}

.raid-level-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.raid-level-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.raid-level-header h4 {
    color: var(--text-primary);
    margin: 0;
    font-size: 1.2rem;
}

.raid-level-badge {
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.8rem;
}

.raid-level-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.raid-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
}

.raid-detail-label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.raid-detail-value {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.raid-level-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

/* RAID Calculator Responsive Design */
@media (max-width: 768px) {
    .raid-calculator-container {
        padding: 1rem;
    }
    
    .raid-header h2 {
        font-size: 2rem;
    }
    
    .raid-task-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .raid-info-grid {
        grid-template-columns: 1fr;
    }
    
    .raid-controls {
        flex-direction: column;
    }
    
    .raid-step-content {
        margin-left: 0;
    }
    
    .raid-levels-grid {
        grid-template-columns: 1fr;
    }
    
    .raid-level-details {
        grid-template-columns: 1fr;
    }
}

/* === Vor- und Nachkalkulation Styles === */
.vnk-app-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.vnk-task-section {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--card-shadow);
}

.vnk-task-header h3 {
    color: var(--text-primary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.3rem;
}

.vnk-task-content p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
}

.vnk-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 20px 0;
}

.vnk-info-card {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid var(--border-color);
}

.vnk-info-card h4 {
    color: var(--text-primary);
    margin-bottom: 16px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.vnk-info-table td {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.vnk-info-table td:last-child {
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
}

.vnk-additional-info {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 16px;
    margin: 20px 0;
    border: 1px solid var(--border-color);
}

.vnk-info-item {
    margin-bottom: 8px;
    color: var(--text-secondary);
}

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

.vnk-value {
    color: var(--primary-color);
    font-weight: 600;
}

.vnk-hint {
    background: var(--primary-color-alpha);
    border-radius: 8px;
    padding: 16px;
    margin-top: 20px;
    border-left: 4px solid var(--primary-color);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.vnk-hint i {
    color: var(--primary-color);
    margin-top: 2px;
}

.vnk-hint strong {
    color: var(--text-primary);
}

.vnk-table-section {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--card-shadow);
    overflow-x: auto;
}

.vnk-table-container {
    min-width: 100%;
    overflow-x: auto;
}

.vnk-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
}

.vnk-table thead {
    background: var(--primary-color);
    color: white;
}

.vnk-table th {
    padding: 16px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.95rem;
}

.vnk-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: middle;
}

.vnk-table tbody tr:hover {
    background: var(--hover-bg);
}

.vnk-table tbody tr.sum-row {
    background: var(--bg-secondary);
    font-weight: 600;
}

.vnk-table tbody tr.final-row {
    background: var(--primary-color-alpha);
    font-weight: 700;
    border-top: 2px solid var(--primary-color);
}

.vnk-table td:first-child {
    font-weight: 500;
    min-width: 200px;
}

.vnk-table td:first-child i {
    margin-right: 8px;
    color: var(--primary-color);
    width: 16px;
}

.vnk-input {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.3s ease;
    text-align: right;
}

.vnk-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-alpha);
}

.vnk-input[readonly] {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: not-allowed;
}

.vnk-percent-field {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.9rem;
}

.vnk-controls {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin: 24px 0;
}

.vnk-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 160px;
    justify-content: center;
}

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

.vnk-btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--primary-color-alpha);
}

.vnk-btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

.vnk-btn-secondary:hover {
    background: var(--hover-bg);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.vnk-solution-container {
    margin-top: 24px;
}

.vnk-solution {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--card-shadow);
}

.vnk-solution-header h3 {
    color: var(--text-primary);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.3rem;
}

.vnk-solution-content {
    overflow-x: auto;
}

.vnk-solution-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    min-width: 800px;
}

.vnk-solution-table thead {
    background: var(--primary-color);
    color: white;
}

.vnk-solution-table th {
    padding: 12px 8px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
}

.vnk-solution-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: top;
    font-size: 0.9rem;
}

.vnk-solution-table tbody tr:hover {
    background: var(--hover-bg);
}

.vnk-solution-table tbody tr.sum-row {
    background: var(--bg-secondary);
    font-weight: 600;
}

.vnk-solution-table tbody tr.final-row {
    background: var(--primary-color-alpha);
    font-weight: 700;
    border-top: 2px solid var(--primary-color);
}

.vnk-solution-table td:first-child {
    font-weight: 500;
    min-width: 150px;
}

.vnk-solution-table td:first-child i {
    margin-right: 6px;
    color: var(--primary-color);
    width: 14px;
}

.vnk-solution-table td:nth-child(2),
.vnk-solution-table td:nth-child(4) {
    text-align: right;
    font-weight: 600;
    color: var(--primary-color);
    min-width: 100px;
}

.vnk-solution-table td:nth-child(3),
.vnk-solution-table td:nth-child(5) {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
    min-width: 200px;
}

/* Vor- und Nachkalkulation Responsive Design */
@media (max-width: 768px) {
    .vnk-app-container {
        padding: 16px;
    }
    
    .vnk-info-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .vnk-controls {
        flex-direction: column;
        align-items: center;
    }
    
    .vnk-btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
    .vnk-table,
    .vnk-solution-table {
        font-size: 0.85rem;
    }
    
    .vnk-table th,
    .vnk-table td,
    .vnk-solution-table th,
    .vnk-solution-table td {
        padding: 8px 6px;
    }
}

/* === Solution Styles for BWL Apps === */
.solution-container {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 24px;
    margin-top: 20px;
    box-shadow: var(--card-shadow);
    border-left: 4px solid var(--primary-color);
}

.solution-container h3 {
    color: var(--text-primary);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.solution-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.solution-step {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 16px;
    border: 1px solid var(--border-color);
}

.solution-step h4 {
    color: var(--primary-color);
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.solution-step p {
    color: var(--text-secondary);
    margin-bottom: 4px;
    line-height: 1.5;
}

.solution-step p:last-child {
    margin-bottom: 0;
}

.solution-step strong {
    color: var(--text-primary);
}

.solution-summary {
    background: var(--primary-color-alpha);
    border-radius: 8px;
    padding: 16px;
    border: 1px solid var(--primary-color);
}

.solution-summary h4 {
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--card-bg);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.summary-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.summary-value {
    color: var(--text-primary);
    font-weight: 600;
}

.summary-value.highlight {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.btn-info {
    background: var(--info-color);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    margin-top: 12px;
}

.btn-info:hover {
    background: var(--info-hover);
    transform: translateY(-1px);
}

.solution-conclusion {
    margin-top: 16px;
    padding: 12px;
    background: var(--card-bg);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.solution-conclusion p {
    margin: 0;
    color: var(--text-primary);
    font-weight: 500;
}

.summary-value.error {
    color: var(--error-color);
    font-weight: 700;
}

/* Zusätzliche CSS-Klassen für BWL-Apps */
.vnk-solution-summary {
    background: var(--primary-color-alpha);
    border-radius: 8px;
    padding: 16px;
    margin-top: 20px;
    border: 1px solid var(--primary-color);
}

.vnk-solution-summary h4 {
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vnk-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.vnk-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--card-bg);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    min-height: 48px;
}

.vnk-summary-label {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.vnk-summary-value {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.1rem;
    white-space: nowrap;
    text-align: right;
}

.vnk-summary-value.vnk-highlight {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.vnk-summary-value.vnk-error {
    color: var(--error-color);
    font-weight: 700;
}

.vnk-solution-conclusion {
    margin-top: 16px;
    padding: 12px;
    background: var(--card-bg);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.vnk-solution-conclusion p {
    margin: 0;
    color: var(--text-primary);
    font-weight: 500;
}

/* Tabellen-Styling für BWL-Apps */
.vnk-solution-table td.highlight {
    color: var(--primary-color);
    font-weight: 700;
}

.vnk-solution-table td.error {
    color: var(--error-color);
    font-weight: 700;
}

/* === Security Quiz Styles === */
.security-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem;
}

/* Security options inherit from general .option-card styles */

/* Security options inherit ::before from general .option-card styles */

/* Security options inherit hover from general .option-card styles */

/* Security options inherit hover::before from general .option-card styles */

.security-options .option-card.dsgvo-option:hover {
    border-color: var(--danger-color);
}

.security-options .option-card.cia-triade-option:hover {
    border-color: var(--secondary-color);
}

/* Security options inherit icon styles from general .option-icon styles */

/* Security options inherit h3 styles from general .option-card h3 styles */

/* Security options inherit p styles from general .option-card p styles */

/* === Scenario Text Styles === */
.scenario-text {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--text-secondary);
    line-height: 1.6;
}

.scenario-text p {
    margin: 0;
}

/* === Energie Apps - Consistent with feature-icon design === */
/* All energie option icons now use the modern design by default */

/* All hardware option icons now use the modern design by default */

/* All security option icons now use the modern design by default */

/* All energie calculator option icons now use the modern design by default */

/* All projektmanagement option icons now use the modern design by default */

/* All BWL option icons now use the modern design by default */

/* === Container Styles for Options === */
.energie-options, .projekt-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    padding: 2rem;
}

/* Energie and Projekt options inherit from general .option-card styles */

/* Energie and Projekt options inherit ::before from general .option-card styles */

/* Energie and Projekt options inherit hover from general .option-card styles */

/* Energie and Projekt options inherit hover::before from general .option-card styles */

/* Energie and Projekt options inherit icon styles from general .option-icon styles */

/* Energie and Projekt options inherit h3 styles from general .option-card h3 styles */

/* Energie and Projekt options inherit p styles from general .option-card p styles */

.energie-options .start-btn, .projekt-options .start-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.energie-options .start-btn:hover, .projekt-options .start-btn:hover {
    background: var(--primary-dark);
}

/* === Dreisatz Calculator Styles === */
.dreisatz-app {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.dreisatz-header {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.dreisatz-header h3 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 1.8rem;
}

.dreisatz-header p {
    color: var(--text-secondary);
    margin: 0;
}

.dreisatz-controls {
    margin-bottom: 2rem;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.control-group label {
    font-weight: 600;
    color: var(--text-primary);
}

.form-select {
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem;
}

.dreisatz-problem {
    margin-bottom: 2rem;
}

.dreisatz-problem label {
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.5rem;
}

.problem-statement {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-primary);
    white-space: pre-line;
}

.dreisatz-inputs {
    margin-bottom: 2rem;
}

.input-row {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.input-group {
    flex: 1;
    min-width: 200px;
}

.input-group label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.input-with-unit {
    display: flex;
    align-items: center;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.form-input {
    flex: 1;
    padding: 0.75rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 1rem;
}

.form-input:focus {
    outline: none;
}

.form-input[readonly] {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.unit {
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 500;
    border-left: 1px solid var(--border-color);
}

.dreisatz-answer {
    margin-bottom: 2rem;
}

.dreisatz-answer label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.answer-input-group {
    max-width: 300px;
}

.answer-input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1.1rem;
    text-align: center;
}

.answer-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.dreisatz-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    justify-content: center;
}

.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

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

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--bg-tertiary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dreisatz-feedback {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    margin-top: 1rem;
}

.feedback-correct {
    background: linear-gradient(135deg, #e8f5e8, #f0f8f0);
    border: 1px solid #4caf50;
    color: #2e7d32;
}

.feedback-incorrect {
    background: linear-gradient(135deg, #ffebee, #fce4ec);
    border: 1px solid #f44336;
    color: #c62828;
}

.feedback-message {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.correct-answer {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-md);
}

.solution-path {
    background: rgba(255, 255, 255, 0.8);
    padding: 1rem;
    border-radius: var(--radius-md);
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre-line;
}

/* Responsive Design für Dreisatz App */
@media (max-width: 768px) {
    .dreisatz-app {
        padding: 1rem;
    }
    
    .input-row {
        flex-direction: column;
        gap: 1rem;
    }
    
    .input-group {
        min-width: auto;
    }
    
    .dreisatz-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

/* === Zinsrechnungs Calculator Styles === */
.zinsrechnung-app {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.zinsrechnung-header {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.zinsrechnung-header h3 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 1.8rem;
}

.zinsrechnung-header p {
    color: var(--text-secondary);
    margin: 0;
}

.zinsrechnung-controls {
    margin-bottom: 2rem;
}

.zinsrechnung-problem {
    margin-bottom: 2rem;
}

.zinsrechnung-problem h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.problem-statement {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.given-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.value-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

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

.value-group input {
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 1rem;
    text-align: center;
}

.zinsrechnung-answer {
    margin-bottom: 2rem;
}

.zinsrechnung-answer h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.answer-input-group {
    max-width: 400px;
}

.answer-input-group label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.answer-input-with-unit {
    display: flex;
    align-items: center;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.answer-input-with-unit .form-input {
    flex: 1;
    padding: 0.75rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 1.1rem;
    text-align: center;
}

.answer-input-with-unit .form-input:focus {
    outline: none;
}

.answer-input-with-unit .unit {
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 500;
    border-left: 1px solid var(--border-color);
}

.zinsrechnung-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    justify-content: center;
}

.zinsrechnung-feedback {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    margin-top: 1rem;
}

.feedback-correct {
    background: linear-gradient(135deg, #e8f5e8, #f0f8f0);
    border: 1px solid #4caf50;
    color: #2e7d32;
}

.feedback-incorrect {
    background: linear-gradient(135deg, #ffebee, #fce4ec);
    border: 1px solid #f44336;
    color: #c62828;
}

.feedback-message {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.correct-answer {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-md);
}

.solution-path {
    background: rgba(255, 255, 255, 0.8);
    padding: 1rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    line-height: 1.5;
}

.formula-reference-area {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.formula-reference-area h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.formula-reference-area h5 {
    color: var(--text-primary);
    margin: 1rem 0 0.5rem 0;
    font-size: 1rem;
}

.formula-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

.formula-list li {
    padding: 0.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.formula-legend {
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-style: italic;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Formel-Styling */
.formula-fraction {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    margin: 0 0.2em;
}

.formula-numerator {
    display: block;
    border-bottom: 1px solid var(--text-primary);
    padding: 0 0.2em 0.1em 0.2em;
}

.formula-denominator {
    display: block;
    padding: 0.1em 0.2em 0 0.2em;
}

.formula-variable {
    font-weight: bold;
    color: var(--primary-color);
}

.formula-operator {
    margin: 0 0.3em;
    color: var(--text-primary);
}

/* Input States */
.input-error {
    border-color: #f44336 !important;
    background-color: #ffebee !important;
}

.input-correct {
    border-color: #4caf50 !important;
    background-color: #e8f5e8 !important;
}

/* Responsive Design für Zinsrechnungs App */
@media (max-width: 768px) {
    .zinsrechnung-app {
        padding: 1rem;
    }
    
    .given-values-grid {
        grid-template-columns: 1fr;
    }
    
    .zinsrechnung-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
    .answer-input-with-unit {
        flex-direction: column;
    }
    
    .answer-input-with-unit .unit {
        border-left: none;
        border-top: 1px solid var(--border-color);
    }
}

/* === Prozentrechnungs Calculator Styles === */
.prozentrechnung-app {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.prozentrechnung-header {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.prozentrechnung-header h3 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 1.8rem;
}

.prozentrechnung-header p {
    color: var(--text-secondary);
    margin: 0;
}

.prozentrechnung-controls {
    margin-bottom: 2rem;
}

.prozentrechnung-problem {
    margin-bottom: 2rem;
}

.prozentrechnung-problem h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.prozentrechnung-inputs {
    margin-bottom: 2rem;
}

.prozentrechnung-inputs .input-row {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.prozentrechnung-inputs .input-group {
    flex: 1;
    min-width: 200px;
}

.prozentrechnung-inputs .input-group label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.prozentrechnung-answer {
    margin-bottom: 2rem;
}

.prozentrechnung-answer h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.prozentrechnung-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    justify-content: center;
}

.prozentrechnung-feedback {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    margin-top: 1rem;
}

.feedback-correct {
    background: linear-gradient(135deg, #e8f5e8, #f0f8f0);
    border: 1px solid #4caf50;
    color: #2e7d32;
}

.feedback-incorrect {
    background: linear-gradient(135deg, #ffebee, #fce4ec);
    border: 1px solid #f44336;
    color: #c62828;
}

.feedback-message {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.correct-answer {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-md);
}

.solution-path {
    background: rgba(255, 255, 255, 0.8);
    padding: 1rem;
    border-radius: var(--radius-md);
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
}

.formula-reference-area {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.formula-reference-area h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.formula-section {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.formula-section h5 {
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
}

.formula-text {
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--primary-color);
    margin: 0.5rem 0;
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    text-align: center;
}

.formula-explanation {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0.5rem 0 0 0;
    font-style: italic;
}

.formula-legend {
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
}

.formula-legend p {
    margin: 0;
    color: var(--text-secondary);
}

/* Responsive Design für Prozentrechnungs App */
@media (max-width: 768px) {
    .prozentrechnung-app {
        padding: 1rem;
    }
    
    .prozentrechnung-inputs .input-row {
        flex-direction: column;
        gap: 1rem;
    }
    
    .prozentrechnung-inputs .input-group {
        min-width: auto;
    }
    
    .prozentrechnung-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
    .formula-section {
        padding: 0.75rem;
    }
    
    .formula-text {
        font-size: 1rem;
    }
}

/* === Bruchrechnungs Calculator Styles === */
.bruchrechnung-app {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.bruchrechnung-header {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.bruchrechnung-header h3 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 1.8rem;
}

.bruchrechnung-header p {
    color: var(--text-secondary);
    margin: 0;
}

.bruchrechnung-controls {
    margin-bottom: 2rem;
}

.bruchrechnung-problem {
    margin-bottom: 2rem;
}

.bruchrechnung-problem h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.fraction-problem {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
    padding: 2rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.fraction-display {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.fraction-input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.fraction-input-group.user-input .fraction-input {
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
}

.fraction-input-group.user-input .fraction-input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.fraction-input {
    width: 60px;
    height: 40px;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 1.1rem;
    font-weight: 600;
}

.fraction-input[readonly] {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: default;
}

.fraction-line {
    width: 60px;
    height: 2px;
    background: var(--text-primary);
    margin: 2px 0;
}

.operator-display {
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary-color);
    padding: 0 1rem;
    min-width: 40px;
    text-align: center;
}

.equals-sign {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-primary);
    padding: 0 1rem;
    min-width: 40px;
    text-align: center;
}

.bruchrechnung-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    justify-content: center;
}

.bruchrechnung-feedback {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    margin-top: 1rem;
}

.feedback-correct {
    background: linear-gradient(135deg, #e8f5e8, #f0f8f0);
    border: 1px solid #4caf50;
    color: #2e7d32;
}

.feedback-incorrect {
    background: linear-gradient(135deg, #ffebee, #fce4ec);
    border: 1px solid #f44336;
    color: #c62828;
}

.feedback-message {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.correct-answer {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-md);
}

.solution-path {
    background: rgba(255, 255, 255, 0.8);
    padding: 1rem;
    border-radius: var(--radius-md);
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre-line;
}

.formula-reference-area {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.formula-reference-area h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

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

.formula-list li {
    padding: 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    color: var(--text-primary);
}

/* Responsive Design für Bruchrechnungs App */
@media (max-width: 768px) {
    .bruchrechnung-app {
        padding: 1rem;
    }
    
    .fraction-display {
        gap: 1rem;
    }
    
    .fraction-input {
        width: 50px;
        height: 35px;
        font-size: 1rem;
    }
    
    .fraction-line {
        width: 50px;
    }
    
    .operator-display,
    .equals-sign {
        font-size: 1.5rem;
        padding: 0 0.5rem;
    }
    
    .bruchrechnung-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

/* Elektrische Formeln Option - Standard Style wie andere Kacheln */
.electric-formulas-option {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.electric-formulas-option:hover {
    border-color: var(--primary-color);
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

/* Icon wird durch allgemeine .option-icon Klasse gestylt */

.electric-formulas-option h3 {
    color: var(--text-primary);
}

.electric-formulas-option p {
    color: var(--text-secondary);
}

.electric-formulas-option .start-btn {
    background: var(--primary-color);
    color: white;
    border: none;
}

.electric-formulas-option .start-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.scenario-text strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* === Quiz Result Details === */
.quiz-result-details {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.quiz-result-details h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.result-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.stat-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.stat-value {
    font-weight: 700;
    font-size: 1.1rem;
}

.stat-value.correct {
    color: var(--success-color);
}

.stat-value.incorrect {
    color: var(--danger-color);
}

/* === Checkbox Styles for Phishing Quiz === */
.checkbox-custom {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 4px;
    margin-right: 12px;
    vertical-align: middle;
    transition: all 0.3s ease;
}

.checkbox-custom::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.3s ease;
}

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"]:checked + .checkbox-custom {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

input[type="checkbox"]:checked + .checkbox-custom::after {
    opacity: 1;
}

input[type="checkbox"]:focus + .checkbox-custom {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Hover effect for checkboxes */
.answer-option:hover .checkbox-custom {
    border-color: var(--primary-color);
    transform: scale(1.05);
}

/* === Calculator Styles === */
.calculator-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

.task-display {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 2rem;
    margin-bottom: 2rem;
}

.task-display h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.task-content {
    color: var(--text-primary);
    line-height: 1.6;
}

.given-values {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.given-values h5 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.given-values ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.given-values li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.given-values li:last-child {
    border-bottom: none;
}

.given-values strong {
    color: var(--text-primary);
    font-weight: 600;
}

.input-section {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 2rem;
    margin-bottom: 2rem;
}

.input-section h4 {
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.input-group {
    margin-bottom: 1.5rem;
}

.input-group label {
    display: block;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.input-group input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.input-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.submit-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.feedback-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 2rem;
    margin-bottom: 2rem;
}

.feedback-content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.feedback-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.feedback-text {
    flex: 1;
}

/* === IP Planner (stacked view) === */
.ipplanner .scenario-box{background:var(--bg-secondary);border:1px solid var(--border-color);border-left:6px solid #3b82f6;border-radius:12px;padding:16px;margin:16px 0;color:var(--text-primary)}
.ipplanner .scenario-box h4{margin:0 0 8px 0;color:var(--text-primary)}
.ipplanner .scenario-meta{font-size:.85rem;color:var(--text-secondary);margin-top:8px}
.ipplanner .scenario-actions{margin-top:10px}
.ipplanner .stacked-sections{display:flex;flex-direction:column;gap:16px}
.ipplanner .planner-section{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;padding:16px}
.ipplanner .planner-section h3{margin:0 0 12px 0;color:var(--text-primary)}
.ipplanner .grid{display:grid;grid-template-columns:1fr 320px;gap:16px}
.ipplanner .grid .tips{background:var(--bg-secondary);border:1px dashed var(--border-color);border-radius:10px;padding:12px;color:var(--text-primary)}
.ipplanner .input-group{margin-bottom:10px}
.ipplanner .input-group label{display:block;font-weight:600;margin-bottom:6px;color:var(--text-primary)}
.ipplanner input[type="text"],
.ipplanner input[type="number"],
.ipplanner select{width:100%;padding:10px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-primary);color:var(--text-primary)}
.ipplanner .device-row{border:1px dashed var(--border-color);border-radius:10px;padding:12px;margin-bottom:10px;background:var(--bg-secondary)}
.ipplanner .device-title{font-weight:600;margin-bottom:8px;color:var(--text-primary)}
.ipplanner .switch-config{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;padding:12px}
.ipplanner .step-controls{margin-top:8px}
.ipplanner .result-box{margin-top:10px}

@media (max-width: 900px){
  .ipplanner .grid{grid-template-columns:1fr}
}

[data-theme="dark"] .ipplanner .scenario-box{background:#0f172a;border-left-color:#60a5fa}
[data-theme="dark"] .ipplanner .grid .tips{background:#0b1220}
[data-theme="dark"] .ipplanner .device-row{background:#0b1220}
[data-theme="dark"] .ipplanner .switch-config{background:#0b1220}

/* Device grid compact cards */
.ipplanner .device-section{margin-bottom:14px}
.ipplanner .device-section-title{margin:0 0 8px 0;font-weight:700;color:var(--text-primary)}
.ipplanner .device-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.ipplanner .device-card{border:1px solid var(--border-color);border-radius:12px;background:var(--bg-primary);padding:12px;display:flex;flex-direction:column;gap:10px}
.ipplanner .device-card-header{display:flex;align-items:center;gap:8px}
.ipplanner .device-card-icon{font-size:20px}
.ipplanner .device-card-title{font-weight:600;color:var(--text-primary)}
.ipplanner .device-meta{color:var(--text-secondary);font-size:.9rem}
.ipplanner .device-card-actions{display:flex;justify-content:flex-end}

/* Switch Port tiles */
.ipplanner .port-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.ipplanner .port-tile{border:1px solid var(--border-color);border-radius:10px;background:var(--bg-primary);padding:10px;cursor:pointer;transition:transform .12s ease, box-shadow .12s ease}
.ipplanner .port-tile:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.ipplanner .port-tile.uplink{border-color:#3b82f6}
.ipplanner .port-name{font-weight:700;color:var(--text-primary)}
.ipplanner .port-sub{color:var(--text-secondary);font-size:.9rem}

.feedback-text h4 {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.feedback-text p {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.calculation-steps {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-top: 1rem;
}

.calculation-steps h5 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.calculation-formula,
.calculation-detail,
.calculation-tip {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}

.calculation-formula {
    border-left: 4px solid var(--primary-color);
}

.calculation-detail {
    border-left: 4px solid var(--success-color);
}

.calculation-tip {
    border-left: 4px solid var(--warning-color);
}

.calculation-formula strong,
.calculation-detail strong,
.calculation-tip strong {
    color: var(--text-primary);
    font-weight: 600;
}

.next-btn {
    background: var(--success-color);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.next-btn:hover {
    background: #059669 !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.progress-section {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
}

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

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

.progress-text {
    text-align: center;
    color: var(--text-secondary);
    font-weight: 500;
}

.results-content {
    text-align: center;
}

.results-content h3 {
    color: var(--text-primary);
    margin-bottom: 2rem;
    font-size: 1.5rem;
    font-weight: 700;
}

.score-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.score-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--success-color));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
}

.score-number {
    font-size: 2.5rem;
    line-height: 1;
}

.score-total {
    font-size: 1rem;
    opacity: 0.8;
}

.score-percentage {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
}

.score-message {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.score-details {
    color: var(--text-secondary);
    font-size: 1rem;
}

.score-details p {
    margin-bottom: 0.5rem;
}

.score-details strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Responsive Design for Calculators */
/* === Exercise Statistics Styles === */
.exercise-statistics {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
}

.stat-item {
    text-align: center;
    padding: 0.75rem;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.exercise-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: border-color 0.2s ease;
}

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

.input-actions-top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
    gap: 0.75rem;
}

.input-actions-top .btn-secondary {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.input-actions-top .btn-secondary:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

[data-theme="dark"] .input-actions-top .btn-secondary {
    background: #1f2937;
    border-color: #374151;
    color: var(--text-primary);
}

[data-theme="dark"] .input-actions-top .btn-secondary:hover {
    background: #374151;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .calculator-container {
        padding: 1rem;
    }
    
    .task-display,
    .input-section,
    .feedback-section {
        padding: 1.5rem;
    }
    
    .exercise-statistics {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .stat-item {
        padding: 0.5rem;
    }
    
    .stat-label {
        font-size: 0.75rem;
    }
    
    .stat-value {
        font-size: 1.25rem;
    }
    
    .task-display h4,
    .input-section h4 {
        font-size: 1.1rem;
    }
    
    .task-content {
        font-size: 0.95rem;
    }
    
    .given-values {
        margin-top: 1rem;
    }
    
    .given-values ul {
        padding-left: 1.25rem;
    }
    
    .score-display {
        flex-direction: column;
        gap: 1rem;
    }
    
    .score-circle {
        width: 100px;
        height: 100px;
    }
    
    .score-number {
        font-size: 2rem;
    }
    
    .score-percentage {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .calculator-container {
        padding: 0.75rem;
    }
    
    .task-display,
    .input-section,
    .feedback-section {
        padding: 1rem;
    }
    
    .input-actions-top {
        justify-content: stretch;
    }
    
    .input-actions-top .btn-secondary {
        flex: 1;
        justify-content: center;
        padding: 0.625rem 0.875rem;
        font-size: 0.85rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .stat-value {
        font-size: 1.1rem;
    }
    
    .submit-btn,
    .next-btn {
        width: 100%;
        padding: 0.875rem;
        font-size: 0.95rem;
    }
}

/* === SQL Trainer Styles === */
.sql-trainer-container {
    height: calc(100vh - 80px);
    overflow: hidden;
}

.sql-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
    gap: 1rem;
    padding: 1rem;
}

.sql-left-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
}

.sql-right-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
}

.task-section,
.help-section,
.tables-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
}

.task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.task-header h4 {
    margin: 0;
    color: var(--text-primary);
}

.current-task h4 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.task-description {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.task-meta {
    display: flex;
    gap: 1rem;
}

.difficulty {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.difficulty.einfach {
    background: var(--success-color);
    color: white;
}

.difficulty.mittel {
    background: var(--warning-color);
    color: white;
}

.difficulty.schwer {
    background: var(--danger-color);
    color: white;
}

.category {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.help-tips ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.help-tips li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.help-tips li:last-child {
    border-bottom: none;
}

.help-tips li::before {
    content: "💡";
    margin-right: 0.5rem;
}

.tables-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.table-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

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

.editor-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.editor-header h4 {
    margin: 0;
    color: var(--text-primary);
}

.editor-controls {
    display: flex;
    gap: 0.5rem;
}

.sql-editor-container {
    flex: 1;
    position: relative;
}

#sql-editor {
    width: 100%;
    height: 100%;
    min-height: 200px;
    padding: 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 14px;
    line-height: 1.5;
    resize: none;
    outline: none;
    transition: border-color 0.3s ease;
}

#sql-editor:focus {
    border-color: var(--primary-color);
}

.results-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.results-header h4 {
    margin: 0;
    color: var(--text-primary);
}

.result-tabs {
    display: flex;
    gap: 0.5rem;
}

.tab-btn {
    padding: 0.5rem 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

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

.results-content {
    flex: 1;
    overflow: hidden;
}

.result-tab {
    display: none;
    height: 100%;
    overflow-y: auto;
}

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

.no-result,
.no-feedback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-secondary);
    text-align: center;
}

.no-result i,
.no-feedback i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.result-table {
    height: 100%;
    overflow-y: auto;
}

.result-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.result-count {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.sample-table,
.result-table table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.sample-table th,
.sample-table td,
.result-table th,
.result-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.sample-table th,
.result-table th {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
}

.sample-table td,
.result-table td {
    color: var(--text-secondary);
}

.error-result {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid var(--danger-color);
    border-radius: var(--radius-lg);
    color: var(--danger-color);
}

.feedback-message {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--radius-lg);
}

.feedback-message.success {
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid var(--success-color);
    color: var(--success-color);
}

.feedback-message.error {
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
}

.feedback-message.info {
    background: rgba(33, 150, 243, 0.1);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

/* Modal Styles */
.task-selection-modal,
.table-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    max-width: 800px;
    max-height: 80vh;
    width: 90%;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

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

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

.close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.close-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    max-height: 60vh;
}

.task-categories {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.category-btn {
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

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

.task-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.task-item {
    padding: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.3s ease;
}

.task-item:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.task-item .task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.task-item h4 {
    margin: 0;
    color: var(--text-primary);
}

.table-structure {
    color: var(--text-primary);
}

.column-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.column-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.column-list li:last-child {
    border-bottom: none;
}

.sample-data {
    margin-top: 1rem;
    overflow-x: auto;
}

/* Responsive Design for SQL Trainer */
@media (max-width: 1024px) {
    .sql-layout {
        grid-template-columns: 1fr;
        height: auto;
    }
    
    .sql-left-panel {
        max-height: 40vh;
    }
    
    .sql-right-panel {
        min-height: 60vh;
    }
}

@media (max-width: 768px) {
    .sql-trainer-container {
        height: calc(100vh - 60px);
    }
    
    .editor-controls {
        flex-direction: column;
    }
    
    .result-tabs {
        flex-direction: column;
    }
    
    .modal-content {
        width: 95%;
        margin: 1rem;
    }
    
    .task-categories {
        flex-direction: column;
    }
}

/* Projektmanagement Option Cards - Consistent with feature-icon design */
/* All security-options projekt icons now use the modern design by default */

.security-options .nutzwert-option:hover {
    border-color: #667eea;
}

.security-options .lastenheft-option:hover {
    border-color: #f093fb;
}

.security-options .projekt-calc-option:hover {
    border-color: #4facfe;
}

/* Nutzwertanalyse Calculator Styles - Dark Mode Compatible */
.nutzwert-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.nutzwert-layout {
    display: block;
    margin-bottom: 2rem;
}

.criteria-panel {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    margin-bottom: 2rem;
}

.results-panel {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
}

.criteria-section h4, .results-section h4 {
    margin: 0 0 1.5rem 0;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
}

.criteria-input, .alternatives-input {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
}

.input-group {
    margin-bottom: 1.5rem;
}

.input-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.input-group input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 1rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.input-group input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

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

/* Nutzwertanalyse Table Styles */
.nutzwert-controls {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.nutzwert-table {
    overflow-x: auto;
    margin-bottom: 2rem;
}

.nutzwert-table table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.nutzwert-table th {
    background: var(--primary-color);
    color: white;
    padding: 1rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.875rem;
}

.nutzwert-table .sub-header th {
    background: rgba(99, 102, 241, 0.8);
    font-size: 0.75rem;
    padding: 0.5rem;
}

.nutzwert-table td {
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
}

.nutzwert-table .weighted-input input {
    width: 80px;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    text-align: center;
}

.nutzwert-table .weighted-input input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.nutzwert-table .total-weighted input {
    width: 80px;
    padding: 0.5rem;
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    background: var(--bg-secondary);
    color: var(--primary-color);
    text-align: center;
    font-weight: bold;
}

.nutzwert-table .criterion-name {
    text-align: left;
    font-weight: 500;
    color: var(--text-primary);
}

.nutzwert-table .weight-display,
.nutzwert-table .rating-display {
    font-weight: 600;
    color: var(--text-primary);
}

.nutzwert-table .total-row {
    background: var(--bg-secondary);
    font-weight: bold;
}

.nutzwert-table .total-label {
    text-align: left;
    color: var(--text-primary);
}

.nutzwert-table .total-weight,
.nutzwert-table .total-score {
    color: var(--primary-color);
}

.user-input-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
}

.user-input-section h4 {
    margin: 0 0 1.5rem 0;
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 600;
}

.user-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.user-results .input-group {
    margin-bottom: 0;
}

.user-results .input-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.user-results .input-group input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 1rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    text-align: center;
}

.user-results .input-group input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.evaluation-section {
    text-align: center;
}

.evaluation-results {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
}

.evaluation-header {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    border-radius: var(--radius-lg);
}

.evaluation-header.success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: var(--success-color);
}

.evaluation-header.warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: var(--warning-color);
}

.evaluation-header h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.evaluation-header p {
    margin: 0;
    font-size: 1rem;
}

.results-comparison {
    margin-bottom: 2rem;
}

.results-comparison h5 {
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 600;
}

.comparison-table {
    overflow-x: auto;
}

.comparison-table table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.comparison-table th,
.comparison-table td {
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
}

.comparison-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-primary);
}

.comparison-table td {
    color: var(--text-primary);
}

.comparison-table tr.correct {
    background: rgba(16, 185, 129, 0.05);
}

.comparison-table tr.incorrect {
    background: rgba(239, 68, 68, 0.05);
}

.best-alternative {
    margin-bottom: 2rem;
}

.best-alternative h5 {
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 600;
}

.alternative-ranking {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.alternative-ranking .ranking-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.alternative-ranking .ranking-item.winner {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border-color: #ffc107;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}

.alternative-ranking .ranking-item.winner .alternative-name,
.alternative-ranking .ranking-item.winner .total-score {
    color: #1f2937;
}

.alternative-ranking .rank {
    font-weight: bold;
    font-size: 1.125rem;
    margin-right: 1rem;
    min-width: 30px;
    color: var(--text-primary);
}

.alternative-ranking .alternative-name {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
}

.alternative-ranking .total-score {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 1rem;
    margin-right: 1rem;
}

.progress-bar {
    width: 100px;
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.explanation {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.explanation h5 {
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 600;
}

.explanation p {
    margin: 0 0 0.5rem 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.explanation p:last-child {
    margin-bottom: 0;
}

.action-buttons {
    text-align: center;
}

.criteria-list, .alternatives-list {
    margin-bottom: 2rem;
}

.criteria-header, .alternatives-header {
    margin-bottom: 1.5rem;
}

.criteria-header h5, .alternatives-header h5 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
}

.criteria-header p, .alternatives-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.criterion-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
}

.criterion-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    margin-right: 1rem;
}

.criterion-name {
    font-weight: 500;
    color: var(--text-primary);
}

.criterion-weight {
    background: var(--primary-color);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

.alternatives-table {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.alternatives-table table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

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

.alternatives-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.alternatives-table td {
    font-size: 0.875rem;
    color: var(--text-primary);
}

.alternative-name {
    font-weight: 500;
    color: var(--text-primary);
}

.score-input {
    width: 60px;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: 0.875rem;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.score-input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.calculate-section {
    text-align: center;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.results-display {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    min-height: 200px;
}

.results-summary h5 {
    margin: 0 0 1.5rem 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
}

.ranking {
    margin-bottom: 2rem;
}

.ranking-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
}

.ranking-item.winner {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border-color: #ffc107;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}

.ranking-item.winner .alternative-name,
.ranking-item.winner .total-score {
    color: #1f2937;
}

.rank {
    font-weight: bold;
    font-size: 1.125rem;
    margin-right: 1rem;
    min-width: 30px;
    color: var(--text-primary);
}

.alternative-name {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
}

.total-score {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 1rem;
}

.detailed-results h6 {
    margin: 0 0 1.5rem 0;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 600;
}

.results-table {
    overflow-x: auto;
}

.results-table table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.results-table th,
.results-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.8125rem;
}

.results-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-primary);
}

.results-table td {
    color: var(--text-primary);
}

.score-cell {
    text-align: center;
}

.raw-score {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.weighted-score {
    font-weight: bold;
    color: var(--primary-color);
}

.total-score {
    font-weight: bold;
    color: var(--success-color);
    text-align: center;
}

.empty-message {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    padding: 2rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

/* Templates Styles - Dark Mode Compatible */
.templates-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.template-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 4px solid var(--primary-color);
}

.template-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-color);
}

.template-card:nth-child(1) {
    border-left-color: #2196f3;
}

.template-card:nth-child(2) {
    border-left-color: #28a745;
}

.template-card:nth-child(3) {
    border-left-color: #ffc107;
}

.template-card:nth-child(4) {
    border-left-color: #dc3545;
}

.template-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #2196f3;
}

.template-card:nth-child(1) .template-icon {
    color: #2196f3;
}

.template-card:nth-child(2) .template-icon {
    color: #28a745;
}

.template-card:nth-child(3) .template-icon {
    color: #ffc107;
}

.template-card:nth-child(4) .template-icon {
    color: #dc3545;
}

.template-card h4 {
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 600;
}

.template-card p {
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

.template-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.feature-tag {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
}

.template-card:nth-child(1) .feature-tag {
    background: rgba(33, 150, 243, 0.1);
    color: #2196f3;
    border-color: rgba(33, 150, 243, 0.2);
}

.template-card:nth-child(2) .feature-tag {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
    border-color: rgba(40, 167, 69, 0.2);
}

.template-card:nth-child(3) .feature-tag {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    border-color: rgba(255, 193, 7, 0.2);
}

.template-card:nth-child(4) .feature-tag {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border-color: rgba(220, 53, 69, 0.2);
}

.template-editor {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.editor-header {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.editor-header h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 600;
}

.editor-actions {
    display: flex;
    gap: 0.75rem;
}

.editor-content {
    padding: 0;
}

#template-content {
    width: 100%;
    height: 500px;
    padding: 1.5rem;
    border: none;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
    resize: vertical;
    background: var(--bg-primary);
    color: var(--text-primary);
}

#template-content:focus {
    outline: none;
    background: var(--bg-primary);
}

/* Responsive Design for Projektmanager Toolkit */
@media (max-width: 1024px) {
    .toolkit-layout, .nutzwert-layout {
        grid-template-columns: 1fr;
        height: auto;
    }
    
    .toolkit-left-panel, .criteria-panel, .alternatives-panel {
        max-height: 40vh;
    }
    
    .toolkit-right-panel {
        min-height: 60vh;
    }
}

@media (max-width: 768px) {
    .projekt-toolkit-container, .nutzwert-container, .templates-container {
        padding: 10px;
    }
    
    .tools-grid {
        grid-template-columns: 1fr;
    }
    
    .templates-grid {
        grid-template-columns: 1fr;
    }
    
    .template-editor {
        margin: 10px;
    }
    
    #template-content {
        height: 300px;
    }
}

/* === Stromverbrauch Apps Styles === */

/* Ensure Stromverbrauch views are visible when active */
#stromverbrauch-options-view.active,
#stromverbrauch-calculator-view.active,
#kostenkalkulation-view.active,
#netzteil-dimensionierung-view.active,
#tco-calculator-view.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Stromverbrauch Options View - Consistent with feature-icon design */
/* All security-options calculator icons now use the modern design by default */

.security-options .stromverbrauch-calculator-option:hover {
    border-color: #f59e0b;
}

.security-options .kostenkalkulation-option:hover {
    border-color: #10b981;
}

.security-options .netzteil-dimensionierung-option:hover {
    border-color: #3b82f6;
}

.security-options .tco-calculator-option:hover {
    border-color: #8b5cf6;
}

/* Stromverbrauch Calculator Specific Styles */
.task-description {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
}

.task-description h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.task-description p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.input-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.button-container {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.check-btn, .next-btn {
    padding: 0.75rem 2rem;
    border: none;
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.check-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

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

.next-btn:hover {
    background: var(--success-dark);
    transform: translateY(-1px);
}

.feedback-container {
    margin-top: 2rem;
}

.feedback {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid;
    margin-bottom: 1rem;
}

.feedback.correct {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--success-color);
}

.feedback.incorrect {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--error-color);
}

.feedback h4 {
    margin: 0 0 1rem 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.feedback.correct h4 {
    color: var(--success-color);
}

.feedback.incorrect h4 {
    color: var(--error-color);
}

.explanation {
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.explanation strong {
    color: var(--text-primary);
    font-weight: 600;
}

.correct-answers {
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.correct-answers h5 {
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
}

.correct-answers strong {
    color: var(--primary-color);
}

/* Responsive Design for Stromverbrauch Apps */
@media (max-width: 768px) {
    .input-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .button-container {
        flex-direction: column;
        align-items: center;
    }
    
    .check-btn, .next-btn {
        width: 100%;
        max-width: 300px;
    }
    
    .task-description {
        padding: 1rem;
    }
    
    .feedback {
        padding: 1rem;
    }
}

/* === Ohmsches Gesetz & Leistung Berechnungen App Styles === */
.ohms-law-app {
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.app-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--primary-color);
}

.app-header h2 {
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
}

.problem-area {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    border: 2px solid var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.problem-area h4 {
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.problem-statement {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    font-weight: 500;
}

.hint-box {
    background: var(--bg-primary);
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--primary-color);
    margin-top: 1rem;
    border: 1px solid var(--border-color);
}

.hint-box strong {
    color: var(--primary-color);
}

.answer-area {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
}

.answer-area label {
    display: block;
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
}

.input-group {
    position: relative;
}

.input-group input[type="number"] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1.1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.input-group input[type="number"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.formula-reference {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    margin-top: 2rem;
}

.formula-reference h4 {
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.formula-section {
    margin-bottom: 1.5rem;
}

.formula-section h5 {
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.formula-section p {
    margin: 0 0 0.5rem 0;
    color: var(--text-secondary);
}

.formula-section ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.formula-section li {
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    font-family: 'Courier New', monospace;
    font-weight: 500;
}

.units-section {
    background: var(--bg-primary);
    padding: 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}

.units-section p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.units-section strong {
    color: var(--text-primary);
}

.formula-option-label {
    display: block;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.formula-option-label:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.formula-option-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.formula-option-label input[type="radio"]:checked + .formula-text {
    color: var(--primary-color);
    font-weight: 600;
}

.formula-option-label input[type="radio"]:checked {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.formula-text {
    font-size: 1.1rem;
    color: var(--text-primary);
    display: block;
    padding-left: 0.5rem;
}

.formula-variable {
    color: var(--primary-color);
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}

.formula-operator {
    color: var(--text-secondary);
    font-weight: 500;
    margin: 0 0.25rem;
}

.formula-fraction {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    margin: 0 0.25rem;
}

.formula-numerator {
    display: block;
    border-bottom: 1px solid var(--text-secondary);
    padding-bottom: 0.1rem;
    margin-bottom: 0.1rem;
}

.formula-denominator {
    display: block;
    padding-top: 0.1rem;
}

.controls-area {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    justify-content: center;
}

.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

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

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

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

.btn-success {
    background: #4caf50;
    color: white;
}

.btn-success:hover {
    background: #45a049;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.feedback-area {
    padding: 1.5rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    border: 2px solid;
}

.feedback-correct {
    background: var(--success-light);
    border-color: var(--success-color);
    color: var(--success-dark);
}

.feedback-incorrect {
    background: var(--error-light);
    border-color: var(--error-color);
    color: var(--error-dark);
}

.feedback-area p {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    line-height: 1.5;
}

.feedback-area p:last-child {
    margin-bottom: 0;
}

.formula-legend-area {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    margin-top: 2rem;
}

.formula-legend-area h4 {
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.formula-legend-area h5 {
    color: var(--text-primary);
    margin: 1rem 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.formula-legend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.legend-item {
    background: var(--bg-primary);
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}

.formula-examples {
    margin-top: 1rem;
}

.formula-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.formula-item {
    background: var(--bg-primary);
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    text-align: center;
}

/* Responsive Design für Elektrische Formeln-App */
@media (max-width: 768px) {
    .electric-formula-app {
        padding: 1rem;
        margin: 0.5rem;
    }
    
    .problem-area, .formula-legend-area {
        padding: 1rem;
    }
    
    .formula-legend-grid {
        grid-template-columns: 1fr;
    }
    
    .controls-area {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 300px;
    }
    
    .formula-option-label {
        padding: 0.75rem;
    }
    
    .formula-text {
        font-size: 1rem;
    }
}

/* === Kabel- und Leitungsübersicht App Styles === */
.cable-overview-app {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.app-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--primary-color);
}

.app-header h2 {
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.app-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0;
}

.search-filter-area {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.search-box {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
}

.search-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 3rem;
    font-size: 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 1rem;
}

.filter-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 0.5rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

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

.cable-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.cable-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}

.cable-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.cable-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.cable-short-name {
    color: var(--primary-color);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
}

.cable-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.cable-card-body {
    margin-bottom: 1rem;
}

.cable-full-name {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

.cable-application {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 1rem 0;
}

.cable-colors-preview {
    margin-top: 1rem;
}

.color-group {
    margin-bottom: 0.75rem;
}

.color-group-label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.color-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.color-box {
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid rgba(0, 0, 0, 0.1);
    min-width: 60px;
    text-align: center;
}

/* Realistische Kabel-Darstellung */
.cable-visualization {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0;
    padding: 0.75rem;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.cable-sheath {
    position: relative;
    background: #f0f0f0;
    border: 2px solid #d0d0d0;
    border-radius: 8px;
    padding: 0.5rem;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cable-cores {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.cable-core {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.cable-core::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.8;
}

.cable-core.pe {
    background: linear-gradient(45deg, #32CD32, #FFD700);
    color: #000;
    border-color: #228B22;
}

.cable-core.n {
    background: #4169E1;
    color: white;
    border-color: #1E40AF;
}

.cable-core.l {
    background: #8B4513;
    color: white;
    border-color: #654321;
}

.cable-core.l-black {
    background: #000000;
    color: white;
    border-color: #333333;
}

.cable-core.l-grey {
    background: #808080;
    color: white;
    border-color: #696969;
}

.cable-core.blue {
    background: #4169E1;
    color: white;
    border-color: #1E40AF;
}

.cable-core.brown {
    background: #8B4513;
    color: white;
    border-color: #654321;
}

.cable-core.orange {
    background: #FFA500;
    color: #000;
    border-color: #FF8C00;
}

.cable-core.green {
    background: #008000;
    color: white;
    border-color: #006400;
}

.cable-core.orange-white {
    background: linear-gradient(45deg, #FFA500 50%, #FFFFFF 50%);
    color: #000;
    border-color: #FF8C00;
}

.cable-core.green-white {
    background: linear-gradient(45deg, #008000 50%, #FFFFFF 50%);
    color: #000;
    border-color: #006400;
}

.cable-core.blue-white {
    background: linear-gradient(45deg, #0000ff 50%, #FFFFFF 50%);
    color: #000;
    border-color: #1E40AF;
}

.cable-core.brown-white {
    background: linear-gradient(45deg, #8B4513 50%, #FFFFFF 50%);
    color: #000;
    border-color: #654321;
}

/* CAT-Kabel spezifische Adern */
.cable-core.grün-weiß {
    background: linear-gradient(45deg, #008000 50%, #FFFFFF 50%);
    color: #000;
    border-color: #006400;
}

.cable-core.grün {
    background: #008000;
    color: #ffffff;
    border-color: #006400;
}

.cable-core.orange-weiß {
    background: linear-gradient(45deg, #FFA500 50%, #FFFFFF 50%);
    color: #000;
    border-color: #FF8C00;
}

.cable-core.orange {
    background: #FFA500;
    color: #000;
    border-color: #FF8C00;
}

.cable-core.blau-weiß {
    background: linear-gradient(45deg, #0000ff 50%, #FFFFFF 50%);
    color: #000;
    border-color: #1E40AF;
}

.cable-core.blau {
    background: #0000ff;
    color: #ffffff;
    border-color: #1E40AF;
}

.cable-core.braun-weiß {
    background: linear-gradient(45deg, #8B4513 50%, #FFFFFF 50%);
    color: #000;
    border-color: #654321;
}

.cable-core.braun {
    background: #8B4513;
    color: #ffffff;
    border-color: #654321;
}

/* Spezielle Ader-Typen für Datenkabel */
.cable-core.weiß-blau {
    background: linear-gradient(45deg, #FFFFFF 50%, #4169E1 50%);
    color: #000;
    border-color: #1E40AF;
}

.cable-core.weiß-orange {
    background: linear-gradient(45deg, #FFFFFF 50%, #FFA500 50%);
    color: #000;
    border-color: #FF8C00;
}

.cable-core.weiß-grün {
    background: linear-gradient(45deg, #FFFFFF 50%, #008000 50%);
    color: #000;
    border-color: #006400;
}

.cable-core.weiß-braun {
    background: linear-gradient(45deg, #FFFFFF 50%, #8B4513 50%);
    color: #000;
    border-color: #654321;
}

.cable-core.weiß-grau {
    background: linear-gradient(45deg, #FFFFFF 50%, #808080 50%);
    color: #000;
    border-color: #696969;
}

/* Koaxialkabel Schichten */
.cable-core.innenleiter {
    background: #B87333;
    color: #000;
    border-color: #8B4513;
}

.cable-core.dielektrikum {
    background: #FFFFFF;
    color: #000;
    border-color: #E0E0E0;
}

.cable-core.abschirmung {
    background: #C0C0C0;
    color: #000;
    border-color: #A0A0A0;
}

.cable-core.außenmantel {
    background: #808080;
    color: #FFFFFF;
    border-color: #606060;
}

.cable-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-left: 0.5rem;
}

.cable-count {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-left: 0.25rem;
}

.color-note {
    font-style: italic;
    color: var(--text-secondary);
    font-size: 0.9rem;
    background: var(--bg-primary);
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary-color);
}

.cable-card-footer {
    text-align: center;
}

.details-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.details-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* Modal Styles */
.cable-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-content {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-header h3 {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

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

.close-modal:hover {
    background: var(--error-light);
    color: var(--error-color);
}

.modal-body {
    padding: 1.5rem;
}

.cable-details {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.detail-section h4 {
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-color);
}

.detail-section p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.colors-detail {
    margin-top: 1rem;
}

.color-group-detail {
    margin-bottom: 1.5rem;
}

.color-group-detail h5 {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

.color-boxes-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.color-box-detail {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    border: 2px solid rgba(0, 0, 0, 0.1);
    min-width: 120px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Detail-Ansicht Kabel-Darstellung */
.cable-visualization-detail {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.cable-sheath-detail {
    position: relative;
    background: #f0f0f0;
    border: 3px solid #d0d0d0;
    border-radius: 12px;
    padding: 1rem;
    min-width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.1);
}

.cable-cores-detail {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.cable-core-detail {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.3);
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cable-core-detail::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.9;
}

.cable-core-detail.pe {
    background: linear-gradient(45deg, #32CD32, #FFD700);
    color: #000;
    border-color: #228B22;
}

.cable-core-detail.n {
    background: #4169E1;
    color: white;
    border-color: #1E40AF;
}

.cable-core-detail.l {
    background: #8B4513;
    color: white;
    border-color: #654321;
}

.cable-core-detail.l-black {
    background: #000000;
    color: white;
    border-color: #333333;
}

.cable-core-detail.l-grey {
    background: #808080;
    color: white;
    border-color: #696969;
}

.cable-core-detail.blue {
    background: #4169E1;
    color: white;
    border-color: #1E40AF;
}

.cable-core-detail.brown {
    background: #8B4513;
    color: white;
    border-color: #654321;
}

.cable-core-detail.orange {
    background: #FFA500;
    color: #000;
    border-color: #FF8C00;
}

.cable-core-detail.green {
    background: #008000;
    color: white;
    border-color: #006400;
}

.cable-core-detail.orange-white {
    background: linear-gradient(45deg, #FFA500 50%, #FFFFFF 50%);
    color: #000;
    border-color: #FF8C00;
}

.cable-core-detail.green-white {
    background: linear-gradient(45deg, #008000 50%, #FFFFFF 50%);
    color: #000;
    border-color: #006400;
}

.cable-core-detail.blue-white {
    background: linear-gradient(45deg, #4169E1 50%, #FFFFFF 50%);
    color: #000;
    border-color: #1E40AF;
}

.cable-core-detail.brown-white {
    background: linear-gradient(45deg, #8B4513 50%, #FFFFFF 50%);
    color: #000;
    border-color: #654321;
}

/* CAT-Kabel spezifische Adern - Detail */
.cable-core-detail.grün-weiß {
    background: linear-gradient(45deg, #008000 50%, #FFFFFF 50%);
    color: #000;
    border-color: #006400;
}

.cable-core-detail.grün {
    background: #008000;
    color: #ffffff;
    border-color: #006400;
}

.cable-core-detail.orange-weiß {
    background: linear-gradient(45deg, #FFA500 50%, #FFFFFF 50%);
    color: #000;
    border-color: #FF8C00;
}

.cable-core-detail.orange {
    background: #FFA500;
    color: #000;
    border-color: #FF8C00;
}

.cable-core-detail.blau-weiß {
    background: linear-gradient(45deg, #0000ff 50%, #FFFFFF 50%);
    color: #000;
    border-color: #1E40AF;
}

.cable-core-detail.blau {
    background: #0000ff;
    color: #ffffff;
    border-color: #1E40AF;
}

.cable-core-detail.braun-weiß {
    background: linear-gradient(45deg, #8B4513 50%, #FFFFFF 50%);
    color: #000;
    border-color: #654321;
}

.cable-core-detail.braun {
    background: #8B4513;
    color: #ffffff;
    border-color: #654321;
}

/* Spezielle Ader-Typen für Datenkabel - Detail */
.cable-core-detail.weiß-blau {
    background: linear-gradient(45deg, #FFFFFF 50%, #4169E1 50%);
    color: #000;
    border-color: #1E40AF;
}

.cable-core-detail.weiß-orange {
    background: linear-gradient(45deg, #FFFFFF 50%, #FFA500 50%);
    color: #000;
    border-color: #FF8C00;
}

.cable-core-detail.weiß-grün {
    background: linear-gradient(45deg, #FFFFFF 50%, #008000 50%);
    color: #000;
    border-color: #006400;
}

.cable-core-detail.weiß-braun {
    background: linear-gradient(45deg, #FFFFFF 50%, #8B4513 50%);
    color: #000;
    border-color: #654321;
}

.cable-core-detail.weiß-grau {
    background: linear-gradient(45deg, #FFFFFF 50%, #808080 50%);
    color: #000;
    border-color: #696969;
}

/* Koaxialkabel Schichten - Detail */
.cable-core-detail.innenleiter {
    background: #B87333;
    color: #000;
    border-color: #8B4513;
}

.cable-core-detail.dielektrikum {
    background: #FFFFFF;
    color: #000;
    border-color: #E0E0E0;
}

.cable-core-detail.abschirmung {
    background: #C0C0C0;
    color: #000;
    border-color: #A0A0A0;
}

.cable-core-detail.außenmantel {
    background: #808080;
    color: #FFFFFF;
    border-color: #606060;
}

.cable-label-detail {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-left: 0.75rem;
}

.cable-count-detail {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-left: 0.5rem;
}

.core-legend {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-left: 1rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.legend-core {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.3);
    position: relative;
}

.legend-core::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.9;
}

/* Koaxialkabel Schnittansicht */
.coaxial-cross-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.coaxial-visualization {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #C0C0C0;
    border: 2px solid #A0A0A0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.coaxial-layer {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.coaxial-layer.innenleiter {
    width: 18px;
    height: 18px;
    background: #B87333;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px rgba(184, 115, 51, 0.5);
    border: 1px solid #8B4513;
}

.coaxial-layer.dielektrikum {
    width: 32px;
    height: 32px;
    background: #FFFFFF;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #E0E0E0;
}

.coaxial-layer.abschirmung {
    width: 48px;
    height: 48px;
    background: #C0C0C0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #A0A0A0;
}

.coaxial-layer.außenmantel {
    width: 80px;
    height: 80px;
    background: #808080;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #606060;
}

/* Karten-Ansicht in Detail-Ansicht */
.coaxial-card-preview {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.coaxial-card-preview h6 {
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
}

.coaxial-legend {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-left: 1rem;
}

.coaxial-legend-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
}

.coaxial-legend-core {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.3);
    position: relative;
}

.coaxial-legend-core::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.9;
}

/* CAT-Kabel Aderpaare */
.cat-pair {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.pair-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    text-align: center;
}

.pair-cores {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    justify-content: center;
}

.pair-cores .cable-core-detail {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.3);
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pair-cores .cable-core-detail::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.9;
}

.color-name {
    font-weight: 600;
}

.color-function {
    font-size: 0.8rem;
    opacity: 0.8;
}

.color-note-detail {
    font-style: italic;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary-color);
    margin: 1rem 0;
}

.app-footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.disclaimer {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
    text-align: center;
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.disclaimer strong {
    color: var(--primary-color);
}

/* Kabel-Übersicht Exercise Card */
.accent-cable {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: 2px solid #667eea;
}

.accent-cable:hover {
    border-color: #5a67d8;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

.accent-cable .exercise-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
}

.accent-cable:hover .exercise-icon {
    transform: translateY(-8px) scale(1.1);
    box-shadow: 0 16px 48px rgba(102, 126, 234, 0.4);
}

.accent-cable h4 {
    color: white;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

/* Alle Icons verwenden jetzt die Standard .exercise-icon Klasse */

/* Spezifische Icon-Farben überschreiben */
.exercise-card i.fa-project-diagram {
    color: white !important;
}

.exercise-card i.fa-layer-group {
    color: white !important;
}

.exercise-card i.fa-network-wired {
    color: white !important;
}

.exercise-card i.fa-calculator {
    color: white !important;
}

.exercise-card i.fa-ethernet {
    color: white !important;
}

.exercise-card i.fa-plug {
    color: white !important;
}

.exercise-card i.fa-exchange-alt {
    color: white !important;
}

.exercise-card i.fa-server {
    color: white !important;
}

.accent-cable p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.accent-cable .start-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    margin-top: 1rem;
}

.accent-cable .start-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

/* Responsive Design für Kabel-Übersicht */
@media (max-width: 768px) {
    .cable-overview-app {
        padding: 1rem;
    }
    
    .cable-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .search-filter-area {
        padding: 1rem;
    }
    
    .filter-buttons {
        justify-content: flex-start;
    }
    
    .modal-content {
        margin: 1rem;
        max-height: calc(100vh - 2rem);
    }
    
    .color-boxes-detail {
        justify-content: center;
    }
    
    .color-box-detail {
        min-width: 100px;
    }
}