/*
 * Zentrales Stylesheet der Berufsorientierungs-Anwendung.
 * Mobile-first, ohne externes CSS-Framework, um die Frontend-only-Vorgabe
 * schlank zu halten und keine zusaetzlichen Build-Schritte zu erzwingen.
 */

/* Design-Tokens als CSS-Variablen fuer konsistente Farben/Abstaende */
:root {
    --color-primary: #1f6feb;
    --color-primary-dark: #1856b8;
    --color-secondary: #2ea043;
    --color-bg: #f4f6fb;
    --color-card: #ffffff;
    --color-text: #1c2333;
    --color-muted: #5b6478;
    --color-error: #d1242f;
    --color-warn: #9a6700;
    --radius: 12px;
    --shadow: 0 4px 16px rgba(20, 30, 60, 0.08);
    
    /* Neue Tokens für das erweiterte Admin-Layout */
    --sidebar-width: 290px;
    --color-border: #e3e7ef;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
}

/* Layout-Container */
.container {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 16px 64px;
}
.container-wide { max-width: 1040px; }

/* Kopfbereich */
.hero { text-align: center; margin: 16px 0 24px; }
.hero h1 { margin: 0 0 4px; font-size: 1.8rem; }
.subtitle { color: var(--color-muted); margin: 0; }

/* Karten */
.card {
    background: var(--color-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
    margin-bottom: 20px;
    width: 100%;
    max-width: 100%;
}

/* Das originale Design des ID-Badges, jetzt sauber im CSS 
für IDs
*/
.id-badge {
    font-size: 11px;
    background-color: #e2e8f0;
    color: #475569;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: monospace;
    white-space: nowrap;
    user-select: all;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.id-badge:hover {
    background-color: #cbd5e1;
}

.center { text-align: center; }

/* Buttons */
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    justify-content: center;
}
.btn {
    display: inline-block;
    padding: 12px 20px;
    border-radius: var(--radius);
    border: none;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-secondary { background: var(--color-secondary); color: #fff; }
.btn-ghost { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); }
.file-btn { position: relative; overflow: hidden; }

/* Neue kompakte Button-Varianten für Admin-Aktionen */
.btn-sm { padding: 8px 14px; font-size: 0.875rem; border-radius: 6px; }
.btn-outline { background: transparent; border: 1px solid #cdd3df; color: var(--color-text); }
.btn-outline:hover { background: #f8fafc; border-color: #b1b9c9; }
.btn-outline-danger { background: transparent; border: 1px solid #fecaca; color: var(--color-error); }
.btn-outline-danger:hover { background: #fef2f2; }

/* Formularelemente */
.fieldset { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; margin: 20px 0; }
.field-label { display: block; font-weight: 600; margin: 12px 0 4px; }
.input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cdd3df;
    border-radius: 8px;
    font-size: 1rem;
}
.checkbox-label { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; cursor: pointer; }

/* Frage-Bloecke */
.question { border-bottom: 1px solid #eef1f6; padding: 16px 0; }
.question:last-child { border-bottom: none; }
.question-title { font-weight: 700; margin: 0 0 12px; }
.option-label {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
}
.option-label:hover { background: #f0f4ff; }

/* Fortschrittsbalken */
.progress { background: #e3e7ef; border-radius: 999px; height: 8px; overflow: hidden; margin-bottom: 16px; }
.progress-bar { height: 100%; background: var(--color-primary); transition: width .3s ease; }

/* Fehlermeldungen */
.error-box {
    background: #ffe9ea;
    color: var(--color-error);
    border: 1px solid var(--color-error);
    border-radius: 8px;
    padding: 12px;
    margin: 12px 0;
}
.warn { color: var(--color-warn); background: #fff8e1; padding: 10px 12px; border-radius: 8px; }

/* QR-Box */
.qr-box { display: inline-block; padding: 12px; background: #fff; }
.hint { color: var(--color-muted); }

/* Ergebnisdarstellung */
.result-field { border-left: 4px solid var(--color-primary); padding: 12px 16px; margin: 12px 0; background: #f7faff; border-radius: 8px; }
.result-field h3 { margin: 0 0 8px; }
.company-item { padding: 4px 0; color: var(--color-muted); }
.score-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed #e3e7ef; }

/* Altes Admin-Fallback */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tab { padding: 10px 14px; border: 1px solid #cdd3df; background: #fff; border-radius: 8px; cursor: pointer; font-weight: 600; }
.tab.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.admin-item { border: 1px solid var(--color-border); border-radius: 8px; padding: 12px; margin-bottom: 12px; background: #fff; }
.admin-item input { margin: 4px 0; }

/* Flex-Ausrichtung für die Zeilen in Admin-Karten */
.admin-item div[style*="display: flex"],
.admin-item .card-main-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
}

.admin-item div[style*="display: flex"] input[type="text"]:not([readonly]) {
    flex: 1 1 auto !important;
    min-width: 50px !important;
}

/* 
 * TRANSFORMATION: Schreibgeschützte ID-Felder als runde, klickbare Info-Buttons 
 * Verhindert Squeezing und sieht auf Desktop & Mobile modern aus!
 */
.admin-item input[readonly] {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background-color: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    
    /* Text unsichtbar machen */
    color: transparent !important;
    text-shadow: none !important;
    user-select: none !important;
    
    /* Blaues Info-Icon zentriert als Hintergrundbild laden */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231f6feb'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

.admin-item input[readonly]:hover {
    background-color: #dbeafe !important;
    border-color: #3b82f6 !important;
    transform: scale(1.08);
}

.admin-item input[readonly]:active {
    transform: scale(0.95);
}

.points-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.points-grid label { font-size: .8rem; color: var(--color-muted); }
.points-grid input { width: 100%; }
.preview { overflow-x: auto; margin-top: 12px; background: #fff; border-radius: 8px; border: 1px solid var(--color-border); }
.preview table { border-collapse: collapse; width: 100%; }
.preview th, .preview td { border: 1px solid var(--color-border); padding: 8px 12px; font-size: .85rem; text-align: left; }
.preview th { background: #f8fafc; font-weight: 600; color: #334155; }
.guide { font-size: .9rem; }

/* Footer */
.footer { text-align: center; color: var(--color-muted); font-size: .85rem; margin-top: 32px; }


/* =====================================================================
 * ARMORED ADMIN-V2 ARCHITEKTUR-LAYOUTS (SIDEBAR & WRAPPER)
 * ===================================================================== */

/* Globale Shell für den Admin-Bereich */
.admin-wrapper {
    display: flex;
    min-height: 100vh;
    background-color: var(--color-bg);
}

/* Hauptinhaltsbereich (Links auf Desktops) */
.admin-main-content {
    flex: 1;
    padding: 24px;
}

/* Top-Level Menü als Sidebar (Rechts auf Desktops) */
.admin-sidebar {
    width: var(--sidebar-width);
    background-color: #ffffff;
    border-left: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    padding: 24px 16px;
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.02);
}

.sidebar-brand {
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
}
.sidebar-brand h3 { margin: 0; font-size: 1.2rem; color: var(--color-text); }
.sidebar-brand p { margin: 4px 0 0; font-size: 0.8rem; color: var(--color-muted); }

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Sidebar Nav-Items */
.sidebar-nav .nav-item {
    display: block;
    width: 100%;
    padding: 10px 14px;
    text-align: left;
    border: none;
    background: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.925rem;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
}
.sidebar-nav .nav-item:hover {
    background-color: #f1f5f9;
    color: var(--color-text);
}
.sidebar-nav .nav-item.active {
    background-color: var(--color-primary);
    color: #ffffff;
}

/* Mobiler Hamburger Trigger-Button */
.menu-toggle {
    display: none;
    position: fixed;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    z-index: 1100;
    box-shadow: var(--shadow);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
}
.menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background-color: var(--color-text);
    transition: transform 0.2s, opacity 0.2s;
}


/* =====================================================================
 * AKTIONSLEISTE & PAGINATION
 * ===================================================================== */
.action-toolbar {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.primary-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.secondary-actions-accordion {
    margin-top: 12px;
    border-top: 1px solid #f1f5f9;
    padding-top: 12px;
}

.accordion-trigger {
    background: none;
    border: none;
    color: var(--color-muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.accordion-trigger:hover { color: var(--color-text); }
.accordion-trigger .arrow {
    display: inline-block;
    transition: transform 0.2s;
    font-size: 0.7rem;
}
.secondary-actions-accordion.open .accordion-trigger .arrow {
    transform: rotate(180deg);
}

.accordion-content {
    display: none;
    padding-top: 12px;
}
.secondary-actions-accordion.open .accordion-content {
    display: block;
}

.action-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.list-pagination-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 12px 16px;
    font-size: 0.875rem;
}

.pagination-per-page {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-muted);
}
.pagination-per-page select {
    padding: 5px 24px 5px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background-color: #f8fafc;
    color: #334155;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
}

.pagination-navigation {
    display: flex;
    align-items: center;
    gap: 4px;
}
.page-numbers {
    display: flex;
    gap: 4px;
}
.page-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    background-color: #ffffff;
    color: #334155;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
}
.page-btn:hover {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}
.page-btn.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}
.page-btn.page-edge {
    padding: 0 12px;
    color: var(--color-muted);
}
.page-dots {
    color: #94a3b8;
    padding: 0 4px;
    line-height: 32px;
}


/* =====================================================================
 * STEUERUNGS-PANEL & STANDARD DATEN-KARTEN
 * ===================================================================== */
.admin-control-panel {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1040;
    background-color: #ffffff;
    padding: 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e2e8f0; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.admin-data-card, .card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    width: 100% !important;
    max-width: 100% !important;
}

.control-row-1 {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.control-row-1 input[type="search"] {
    flex-grow: 1;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 16px;
}
.control-row-2 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.control-row-3 {
    display: flex;
	flex-wrap: nowrap !important;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #334155;
}

.card-main-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.card-main-row input[type="text"] {
    flex-grow: 1;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 15px;
}
.card-meta-row {
    margin-left: 28px;
    margin-top: 8px;
    font-style: italic;
    color: #64748b;
    font-size: 14px;
}

/* Button Definitionen */
.btn-admin {
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
}
.btn-blue { background-color: #2563eb; color: white; }
.btn-green { background-color: #16a34a; color: white; }
.btn-outline { background-color: white; border-color: #cbd5e1; color: #1e293b; }

.btn-icon {
    padding: 8px 12px;
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}
.btn-delete { color: #dc2626; border-color: #cbd5e1; }
.btn-dropdown { color: #2563eb; border-color: #cbd5e1; }

input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

[hidden] { 
    display: none !important; 
}


/* =====================================================================
 * RESPONSIVE MEDIA QUERIES (DESKTOP & TABLET SWAP)
 * ===================================================================== */

/* Desktop & Laptop View (Ab 1024px Breite) */
@media (min-width: 1024px) {
    .admin-wrapper {
        flex-direction: row;
    }
    .admin-main-content {
        order: 1;
    }
    .admin-sidebar {
        order: 2;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        height: 100vh;
    }
}

/* Tablet & Mobile View (< 1024px Breite) */
@media (max-width: 1023px) {
    .admin-wrapper {
        flex-direction: column;
    }
    .menu-toggle {
        display: flex;
    }
    .admin-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        z-index: 1050;
        box-shadow: -4px 0 24px rgba(0,0,0,0.15);
        transform: translateX(100%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .admin-sidebar.open {
        transform: translateX(0);
    }
    .menu-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .menu-toggle.open span:nth-child(2) { opacity: 0; }
    .menu-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* =====================================================================
 * BASIS-STYLES FÜR DIE DYNAMISCHEN AUSBILDUNGSFELDER (Aus JS ausgelagert)
 * ===================================================================== */
.btn-add-training {
    align-self: flex-start;
    margin-bottom: 12px;
}

.training-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.training-row .input {
    flex: 1;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: white;
}

.id-badge {
    font-size: 11px;
    background: #e2e8f0;
    color: #475569;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: monospace;
    white-space: nowrap;
    user-select: all;
}

/* =====================================================================
 * MODERNES STYLING FÜR INPUTS & DROPDOWNS (Wie in Bild 2)
 * ===================================================================== */
.tab-panel input[type="text"],
.tab-panel select {
    width: 100% !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    border: 1px solid #cbd5e1 !important; /* Heller, moderner Rahmen */
    border-radius: 8px !important;        /* Schön abgerundete Ecken */
    background-color: #ffffff !important;
    color: #1e293b !important;             /* Dunkles Slate-Grau für den Text */
    outline: none !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; /* Minimaler, edler Schatten */
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
}

/* Eleganter blauer Leuchteffekt, wenn man in ein Feld klickt (Fokus) */
.tab-panel input[type="text"]:focus,
.tab-panel select:focus {
    border-color: #2563eb !important; /* Modernes Blau */
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* Styling für das Dropdown (Select), damit auch der Pfeil modern aussieht */
.tab-panel select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    /* Ersetzt den Standard-Pfeil durch ein cleanes SVG-Icon */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    padding-right: 40px !important; /* Platzhalter rechts, damit Text nicht unter dem Pfeil liegt */
    cursor: pointer;
}

/* =====================================================================
 * THE ULTIMATE MOBILE RENDERING MATRIX (< 768px - FIX FÜR 352px/353px)
 * ===================================================================== */
@media (max-width: 768px) {
	
/* 1. Einrückung der Ausbildungszeilen auf Mobile verringern */
    .card-meta-row {
        margin-left: 12px !important;
    }

    /* 2. Abstände und Padding in den Ausbildungszeilen kompakt halten */
    .training-row {
        gap: 6px !important;
        padding: 6px 8px !important;
    }

    /* 3. ID-Badge flexibel begrenzen (Text bricht nicht um, wird elegant mit ... abgekürzt) */
    .id-badge {
        font-size: 10px !important;
        padding: 3px 6px !important;
        max-width: 60px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* 4. Dem Eingabefeld eine sichere Mindestbreite zusichern */
    .training-row .input {
        flex: 1 1 auto !important;
        min-width: 80px !important;
    }
	
    
    /* 1. Scroll-Verhalten anpassen */
    .admin-wrapper,
    .admin-main-content {
        overflow: visible !important;
    }

    .admin-main-content {
        padding: 8px !important;
    }

    /* 2. Top-Toolbar (Suchen, Speichern, Backup) sauber anordnen */
    .action-toolbar {
        padding: 12px !important;
    }
	
	.control-row-1 {
		width: 85% !important;
    }
    .primary-actions, .control-row-1, .control-row-2 {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .control-row-1 input[type="search"],
    .action-toolbar input[type="text"] {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    /* Buttons in der Toolbar nebeneinander fließen lassen */
    .action-toolbar button.btn,
    .action-toolbar .btn-primary,
    .action-toolbar .btn-secondary,
    .control-row-2 button {
        flex: 1 1 calc(50% - 4px) !important;
        font-size: 13px !important;
        padding: 8px 6px !important;
        white-space: normal !important;
        word-break: break-all !important;
    }
    .action-toolbar .checkbox-label {
        width: 100% !important;
        margin-top: 4px !important;
    }

    /* 3. NEU: OPTIONALE FELDER GRID (PLZ / E-Mail Zeilen stapeln) */
    body .admin-main-content .tab-panel div:has(> input[type="text"] + input[type="text"]):has(> .btn-icon, > button) {
        display: grid !important;
        grid-template-areas: 
            "input-one del-btn"
            "input-two del-btn" !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;
        gap: 6px 8px !important;
        align-items: center !important;
        width: 100% !important;
        padding: 8px !important;
        border: 1px solid var(--color-border) !important;
        border-radius: 8px !important;
        margin-bottom: 12px !important;
    }
    body .admin-main-content .tab-panel div:has(> input[type="text"] + input[type="text"]) > input[type="text"]:first-of-type {
        grid-area: input-one !important;
        width: 100% !important;
    }
    body .admin-main-content .tab-panel div:has(> input[type="text"] + input[type="text"]) > input[type="text"]:nth-of-type(2) {
        grid-area: input-two !important;
        width: 100% !important;
    }
    body .admin-main-content .tab-panel div:has(> input[type="text"] + input[type="text"]) > button,
    body .admin-main-content .tab-panel div:has(> input[type="text"] + input[type="text"]) > .btn-icon {
        grid-area: del-btn !important;
        align-self: stretch !important;
        height: auto !important;
        min-height: 76px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 4. DIE KOMPLEXE AUSBILDUNGS-STAPELUNG WURDE ENTFERNT.
       Da die ID jetzt nur noch ein kompakter 32px-Kreis ist, passt alles problemlos einzeilig! */

    /* 5. Standard-Fragezeilen (Kein Umbruch bei den Standardfeldern) */
    body .admin-main-content .tab-panel .card-main-row,
    body .admin-main-content .admin-data-card .card-main-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        padding: 4px 0 !important;
    }

    body .admin-main-content .tab-panel .card-main-row input[type="text"],
    body .admin-main-content .admin-data-card .card-main-row input[type="text"] {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 50px !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        font-size: 14px !important;
    }

    /* Quadratische Steuerungsbuttons (X und Pfeile) */
    body .admin-main-content .tab-panel .card-main-row button,
    body .admin-main-content .admin-data-card .card-main-row button,
    body .admin-main-content .tab-panel .card-main-row .btn-icon,
    body .admin-main-content .admin-data-card .card-main-row .btn-icon,
    body .admin-main-content .admin-item .btn-icon {
        flex: 0 0 36px !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        border: 1px solid #cbd5e1 !important;
        background: #ffffff !important;
        font-size: 14px !important;
    }

    /* Farbanpassungen für Zeilen-Buttons */
    body .admin-main-content .admin-item button.btn-outline-danger,
    body .admin-main-content .card-main-row button.btn-delete,
    body .admin-main-content .admin-item button[style*="color: var(--color-error)"] {
        color: #d1242f !important;
        font-weight: bold !important;
    }
    body .admin-main-content .admin-item button.btn-outline-danger:hover {
        background: #fef2f2 !important;
    }
    body .admin-main-content .admin-item button.btn-ghost,
    body .admin-main-content .card-main-row button.btn-dropdown,
    body .admin-main-content .admin-item button.btn-outline {
        color: #1f6feb !important;
    }

    /* 6. Checkboxen kompakt am Zeilenstart */
    body .admin-main-content .card-main-row input[type="checkbox"],
    body .admin-main-content .admin-item input[type="checkbox"] {
        flex: 0 0 18px !important;
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
    }

    /* 7. Punkte-Grid (AI, IT, TEC) auf 352px elegant nebeneinander halten */
    .points-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 4px !important;
        margin-top: 8px !important;
        width: 100% !important;
    }
    .points-grid label {
        font-size: 11px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 2px !important;
    }
    .points-grid input {
        width: 100% !important;
        padding: 6px !important;
        font-size: 12px !important;
        text-align: center !important;
    }

    /* 8. Globale Einstellungsseiten (Tab-Panels) fließen untereinander */
    .tab-panel fieldset,
    .tab-panel .card-main-row:not(.card-main-row) {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        border: none !important;
        padding: 0 !important;
    }
    .tab-panel select, 
    .tab-panel select.input {
        width: 100% !important;
    }
    .tab-panel div:has(> input[type="radio"]) {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: auto !important;
        gap: 8px !important;
    }

    /* Tabellen (Submissions / Excel-Vorschau) */
    .preview, 
    #importPreview,
    .tab-panel div[style*="overflow-x: auto"] {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .preview table {
        min-width: 500px;
    }
	
	
	/* =====================================================================
 * AUTO-GROW TEXTAREAS (Für Fragen & Optionen)
 * ===================================================================== */
textarea.input-auto-grow {
    width: 100% !important;
    min-height: 38px !important;
    height: auto;
    resize: none !important;            /* Verhindert manuelles Ziehen an der Ecke */
    overflow: hidden !important;        /* Blendet Scrollbalken aus */
    line-height: 1.4 !important;
    padding: 8px 10px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    /* Moderne Browser-Eigenschaft für automatisches Mitwachsen */
    field-sizing: content;
}

textarea.input-auto-grow:focus {
    border-color: #2563eb !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* =====================================================================
 * PUNKTE-GRID (3 in einer Reihe)
 * ===================================================================== */
.points-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* Genau 3 Spalten */
    gap: 8px !important;
    margin-top: 8px !important;
    width: 100% !important;
}

.points-grid label {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--color-muted) !important;
    background: #f8fafc;
    padding: 6px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.points-grid input[type="number"] {
    width: 100% !important;
    padding: 6px !important;
    font-size: 14px !important;
    text-align: center !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
}
}