/* Feldmessen CSS v5.0 - Vollständiger Theme-Override & Lesbarkeits-Fix */

/* ============================================================
   DESIGN-TOKENS
   ============================================================ */
:root {
    --fm-primary:       #3b82f6;
    --fm-primary-hover: #2563eb;
    --fm-danger:        #ef4444;
    --fm-danger-hover:  #dc2626;
    --fm-secondary-bg:  #f1f5f9;
    --fm-text:          #1e293b;
    --fm-text-muted:    #64748b;
    --fm-text-light:    #ffffff;
    --fm-bg:            #f8fafc;
    --fm-card-bg:       #ffffff;
    --fm-border:        #e2e8f0;
    --fm-input-focus:   #3b82f6;
    --fm-radius:        12px;
    --fm-radius-sm:     6px;
}

/* ============================================================
   1. CONTAINER & LAYOUT - Auf 80% fixiert für visuelle Ruhe
   ============================================================ */
.feldmessen-app-container {
    width: 80% !important; 
    max-width: 1400px !important; 
    min-width: 320px !important; 
    margin: 40px auto !important; 
    padding: 2rem !important;
    border-radius: var(--fm-radius) !important;
    background-color: var(--fm-bg) !important;
    box-sizing: border-box !important;
    transition: height 0.2s ease-in-out !important; /* Macht Tab-Wechsel sanfter */
}

.fm-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
}
@media (min-width: 992px) {
    .fm-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ============================================================
   2. TYPOGRAFIE – alle Text-Elemente dunkel erzwingen
   ============================================================ */
.feldmessen-app-container h2,
.feldmessen-app-container h3,
.feldmessen-app-container h4,
.feldmessen-app-container h5,
.feldmessen-app-container p,
.feldmessen-app-container label,
.feldmessen-app-container span:not(.fm-modal-close):not(.fm-pkt-prev):not(.fm-pkt-station):not(.fm-pkt-next),
.feldmessen-app-container td,
.feldmessen-app-container li {
    color: var(--fm-text) !important;
}

/* ============================================================
   3. EINGABEFELDER – ALLE STATES (Kern des Fixes)
   Theme-Override durch maximale Spezifität + alle Pseudo-Klassen
   ============================================================ */

/* Basis: alle Inputs und Selects */
.feldmessen-app-container input[type="text"],
.feldmessen-app-container input[type="number"],
.feldmessen-app-container input[type="file"],
.feldmessen-app-container select,
.feldmessen-app-container textarea {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid var(--fm-border) !important;
    border-radius: var(--fm-radius-sm) !important;
    padding: 0.25rem 7px !important;
    font-size: 0.85rem !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
    outline: none !important;
    -webkit-text-fill-color: #1e293b !important; /* Safari/Chrome Override */
    opacity: 1 !important;
}

/* Fokus-State */
.feldmessen-app-container input[type="text"]:focus,
.feldmessen-app-container input[type="number"]:focus,
.feldmessen-app-container select:focus,
.feldmessen-app-container textarea:focus {
    background-color: #ffffff !important;
    color: #1e293b !important;
    -webkit-text-fill-color: #1e293b !important;
    border-color: var(--fm-input-focus) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

/* Hover-State */
.feldmessen-app-container input[type="text"]:hover,
.feldmessen-app-container input[type="number"]:hover,
.feldmessen-app-container select:hover {
    background-color: #ffffff !important;
    color: #1e293b !important;
    -webkit-text-fill-color: #1e293b !important;
    border-color: #94a3b8 !important;
}

/* Autofill (Chrome/Safari füllt mit blauem Hintergrund) */
.feldmessen-app-container input:-webkit-autofill,
.feldmessen-app-container input:-webkit-autofill:hover,
.feldmessen-app-container input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
    -webkit-text-fill-color: #1e293b !important;
    background-color: #ffffff !important;
    color: #1e293b !important;
}

/* Readonly-Felder (Mittelwert-Outputs) – leicht grauer Hintergrund zur Unterscheidung */
.feldmessen-app-container input[readonly],
.feldmessen-app-container input.fm-out-l-mean,
.feldmessen-app-container input.fm-out-hz-mean,
.feldmessen-app-container input.fm-out-hz-mean-360,
.feldmessen-app-container input.fm-out-vz-mean,
.feldmessen-app-container input.fm-out-vz-mean-360 {
    background-color: #f1f5f9 !important;
    color: var(--fm-primary) !important;
    -webkit-text-fill-color: var(--fm-primary) !important;
    font-weight: 600 !important;
    cursor: default !important;
}

/* Dynamisch aggregierte (gesperrte) Felder in der Haupttabelle */
.feldmessen-app-container input.fm-readonly-dynamic {
    background-color: #eff6ff !important;
    color: var(--fm-primary) !important;
    -webkit-text-fill-color: var(--fm-primary) !important;
    font-weight: 700 !important;
    border-color: #bfdbfe !important;
}

/* Placeholder */
.feldmessen-app-container input::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

/* ============================================================
   4. BUTTONS
   ============================================================ */
.feldmessen-app-container .fm-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0.55rem 1.2rem !important;
    border: none !important;
    border-radius: var(--fm-radius-sm) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.1s ease !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}
.feldmessen-app-container .fm-btn:active {
    transform: scale(0.97) !important;
}

.feldmessen-app-container .fm-btn-primary {
    background-color: var(--fm-primary) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
.feldmessen-app-container .fm-btn-primary:hover {
    background-color: var(--fm-primary-hover) !important;
    color: #ffffff !important;
}

.feldmessen-app-container .fm-btn-secondary {
    background-color: var(--fm-secondary-bg) !important;
    color: var(--fm-text) !important;
    -webkit-text-fill-color: var(--fm-text) !important;
    border: 1px solid var(--fm-border) !important;
}
.feldmessen-app-container .fm-btn-secondary:hover {
    background-color: #e2e8f0 !important;
}

.feldmessen-app-container .fm-btn-danger {
    background-color: var(--fm-danger) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    padding: 0.3rem 0.65rem !important;
    font-size: 0.8rem !important;
}
.feldmessen-app-container .fm-btn-danger:hover {
    background-color: var(--fm-danger-hover) !important;
}

/* ============================================================
   5. TAB-STABILITÄT - Verhindert das "Hüpfen"
   ============================================================ */
.fm-tab-content {
    width: 100% !important;
    box-sizing: border-box !important;
}

.feldmessen-app-container .fm-tab-btn {
    background: transparent !important;
    border: none !important;
    padding: 0.6rem 1.2rem !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--fm-text-muted) !important;
    -webkit-text-fill-color: var(--fm-text-muted) !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
    border-radius: var(--fm-radius-sm) var(--fm-radius-sm) 0 0 !important;
}
.feldmessen-app-container .fm-tab-btn:hover {
    color: var(--fm-primary) !important;
    -webkit-text-fill-color: var(--fm-primary) !important;
    background-color: rgba(59,130,246,0.06) !important;
}
.feldmessen-app-container .fm-tab-btn.active {
    color: var(--fm-primary) !important;
    -webkit-text-fill-color: var(--fm-primary) !important;
    border-bottom: 3px solid var(--fm-primary) !important;
}

.fm-tab-content          { display: none !important; }
.fm-tab-content.active   { display: block !important; }

/* ============================================================
   6. KARTEN & CONTAINER
   ============================================================ */
.fm-settings,
.fm-table-container,
.fm-card {
    background: var(--fm-card-bg) !important;
    padding: 1.25rem !important;
    border-radius: var(--fm-radius) !important;
    border: 1px solid var(--fm-border) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
    margin-bottom: 1rem !important;
}

.fm-form-group {
    margin-bottom: 0.75rem !important;
}
.fm-form-group label {
    display: block !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--fm-text-muted) !important;
    -webkit-text-fill-color: var(--fm-text-muted) !important;
    margin-bottom: 0.3rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}
.fm-form-group input,
.fm-form-group select {
    width: 100% !important;
}

/* ============================================================
   7. TABELLEN – ALLGEMEIN
   ============================================================ */
.feldmessen-app-container .fm-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 0.88rem !important;
}

/* Kopfzeilen: dunkler Hintergrund, weiße Schrift */
.feldmessen-app-container .fm-table th,
.feldmessen-app-container .fm-group-table th {
    background-color: #1e293b !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    padding: 0.65rem 0.75rem !important;
    text-align: left !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap !important;
}

/* Datenzellen */
.feldmessen-app-container .fm-table td,
.feldmessen-app-container .fm-group-table td {
    padding: 0.35rem 7px !important;
    border-bottom: 1px solid var(--fm-border) !important;
    color: var(--fm-text) !important;
    -webkit-text-fill-color: var(--fm-text) !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

/* Zebra-Streifen */
.feldmessen-app-container .fm-table tbody tr:nth-child(even) td,
.feldmessen-app-container .fm-group-table tbody tr:nth-child(even) td {
    background-color: #f8fafc !important;
}
.feldmessen-app-container .fm-table tbody tr:hover td,
.feldmessen-app-container .fm-group-table tbody tr:hover td {
    background-color: #eff6ff !important;
}

/* Mittelwert-Spalten hervorheben */
.feldmessen-app-container .fm-col-mean {
    background-color: #f0f9ff !important;
    border-left: 2px solid #bfdbfe !important;
}

/* ============================================================
   8. FELDBREITEN – für Lesbarkeit optimiert
   ============================================================ */

/* Schülertabelle */
.feldmessen-app-container #fm-student-table .fm-input-student-name {
    width: 100% !important;
    min-width: 160px !important;
}
.feldmessen-app-container #fm-student-table .fm-input-student-group {
    width: 80px !important;
    text-align: center !important;
}

/* Haupt-Messtabelle (aggregiert) */
.feldmessen-app-container #fm-data-table .fm-input-l   { width: 90px !important; }
.feldmessen-app-container #fm-data-table .fm-input-hz  { width: 100px !important; }
.feldmessen-app-container #fm-data-table .fm-input-vz  { width: 100px !important; }

/* Gruppen-Messtabellen (Doppelmessungen) */
.feldmessen-app-container .fm-group-table .fm-input-l1,
.feldmessen-app-container .fm-group-table .fm-input-l2  { width: 50% !important; }
.feldmessen-app-container .fm-group-table .fm-input-s1,
.feldmessen-app-container .fm-group-table .fm-input-s2 { width: 50% !important; }
.feldmessen-app-container .fm-group-table .fm-out-s-mean,
.feldmessen-app-container .fm-group-table .fm-out-s-meter { width: 50% !important; }
.feldmessen-app-container .fm-group-table .fm-input-esthz,
.feldmessen-app-container .fm-group-table .fm-input-estvz { width: 50% !important; }
.feldmessen-app-container .fm-group-table .fm-out-est-mean { width: 50% !important; }

.feldmessen-app-container .fm-group-table .fm-input-hz1,
.feldmessen-app-container .fm-group-table .fm-input-hz2 { width: 50% !important; }
.feldmessen-app-container .fm-group-table .fm-input-vz1,
.feldmessen-app-container .fm-group-table .fm-input-vz2 { width: 50% !important; }
.feldmessen-app-container .fm-group-table .fm-out-l-mean      { width: 50% !important; }
.feldmessen-app-container .fm-group-table .fm-out-hz-mean,
.feldmessen-app-container .fm-group-table .fm-out-hz-mean-360 { width: 50% !important; }
.feldmessen-app-container .fm-group-table .fm-out-vz-mean,
.feldmessen-app-container .fm-group-table .fm-out-vz-mean-360 { width: 50% !important; }

/* Start-Azimut & Messpunkte-Anzahl */
.feldmessen-app-container #fm-start-azimut  { width: 130px !important; }
.feldmessen-app-container #fm-num-points    { width: 80px !important; }

/* Alle Inputs in Tabellen: minimale Höhe für Fingereingabe */
.feldmessen-app-container .fm-table input,
.feldmessen-app-container .fm-group-table input {
    min-height: 34px !important;
    text-align: right !important;
}
/* Namenfelder linksbündig */
.feldmessen-app-container .fm-input-student-name {
    text-align: left !important;
}

/* ============================================================
   9. HEADER & AKTIONS-BEREICH
   ============================================================ */
.fm-header {
    text-align: center !important;
    margin-bottom: 1.5rem !important;
}
.fm-header h2 {
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: var(--fm-text) !important;
    -webkit-text-fill-color: var(--fm-text) !important;
    margin: 0 0 0.5rem 0 !important;
}
.fm-header p {
    color: var(--fm-text-muted) !important;
    -webkit-text-fill-color: var(--fm-text-muted) !important;
    margin: 0 !important;
}
.fm-project-actions,
.fm-top-actions {
    display: flex !important;
    gap: 0.75rem !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin-top: 1rem !important;
}
.fm-actions {
    margin-top: 1rem !important;
    display: flex !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
}

/* ============================================================
   10. GRUPPEN-NAVIGATION (Schüler-Links innerhalb Gruppen-Tab)
   ============================================================ */
.fm-group-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    align-items: center !important;
    margin-bottom: 1rem !important;
    padding: 0.75rem 1rem !important;
    background: var(--fm-secondary-bg) !important;
    border-radius: var(--fm-radius-sm) !important;
}
.fm-student-nav-link {
    display: inline-block !important;
    padding: 0.3rem 0.75rem !important;
    background: var(--fm-primary) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background-color 0.2s !important;
}
.fm-student-nav-link:hover {
    background: var(--fm-primary-hover) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-decoration: none !important;
}

.fm-student-block {
    margin-bottom: 2rem !important;
    padding-top: 0.5rem !important;
    border-top: 1px solid var(--fm-border) !important;
}
.fm-student-block h4 {
    color: var(--fm-primary) !important;
    -webkit-text-fill-color: var(--fm-primary) !important;
    font-size: 1rem !important;
    margin: 1rem 0 0.5rem 0 !important;
}

/* ============================================================
   11. CHARTS / CANVAS
   ============================================================ */
.fm-card canvas {
    max-height: 320px !important;
    width: 100% !important;
    display: block !important;
}

/* ============================================================
   12. 3D-MODAL - Jetzt in "Groß" (Vollbild-nah)
   ============================================================ */
#fm-modal .fm-modal-content {
    width: 80vw !important;
    max-width: 1600px !important;
    height: 80vh !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: var(--fm-card-bg) !important;
}

#fm-modal .fm-modal-content h3 {
    padding: 20px 20px 0 20px !important;
    margin: 0 !important;
}

#fm-modal .fm-modal-canvas-container {
    flex-grow: 1 !important;
    height: 100% !important;
    position: relative !important;
    padding: 20px !important;
    background: #f8fafc !important;
}

#fm-3d-modal .fm-modal-content {
    width: 95vw !important;
    max-width: 1600px !important;
    height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.fm-modal-canvas-container {
    flex-grow: 1 !important;
    height: 100% !important;
    background: #000; /* Dunkler Hintergrund für 3D sieht oft besser aus */
}

#fm-3d-iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

/* ============================================================
   13. WARN-ANIMATION (DMS-Eingabefehler)
   ============================================================ */
@keyframes fm-blink-red {
    0%, 100% { border-color: var(--fm-border); }
    33%       { border-color: var(--fm-danger); box-shadow: 0 0 0 3px rgba(239,68,68,0.25); }
    66%       { border-color: var(--fm-danger); box-shadow: 0 0 0 3px rgba(239,68,68,0.25); }
}
.fm-warning-blink {
    animation: fm-blink-red 0.9s ease !important;
}

/* ============================================================
   14. PKT-SPALTE (Dreizeilige Stationsanzeige in Gruppen-Tabs)
   ============================================================ */
.feldmessen-app-container .fm-pkt-cell {
    text-align: center !important;
    padding: 0.25rem 7px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    min-width: 50px !important;
    border-left: 2px solid #bfdbfe !important; /* Sichtbare Trennung vor Hz */
    background-color: #f0f9ff !important;
}

/* Einfache erste PKT-Spalte (Segment P1–P2) */
.feldmessen-app-container td.fm-pkt-simple {
    text-align: center !important;
    white-space: nowrap !important;
    font-size: 0.82rem !important;
    color: var(--fm-text-muted) !important;
    -webkit-text-fill-color: var(--fm-text-muted) !important;
    font-weight: 500 !important;
    min-width: 45px !important;
    padding: 0.25rem 7px !important;
}

/* Station-Spalten-Header */
.feldmessen-app-container th.fm-pkt-header {
    background-color: #1e3a5f !important;
    color: #bfdbfe !important;
    -webkit-text-fill-color: #bfdbfe !important;
    border-left: 2px solid #bfdbfe !important;
    text-align: center !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.08em !important;
}

/* Wir setzen die Spans als Block untereinander */
.feldmessen-app-container .fm-pkt-prev,
.feldmessen-app-container .fm-pkt-station,
.feldmessen-app-container .fm-pkt-next {
    display: block !important;
    line-height: 1.3 !important;
    color: var(--fm-text-muted) !important;
    -webkit-text-fill-color: var(--fm-text-muted) !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    font-family: 'Inter', monospace, system-ui !important;
}

/* Mittlerer Wert: Station = fett, größer, Primärfarbe */
.feldmessen-app-container .fm-pkt-station {
    color: var(--fm-primary) !important;
    -webkit-text-fill-color: var(--fm-primary) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
}

/* Trennlinie zwischen den Spans (optional – kleine horizontale Linie) */
.feldmessen-app-container .fm-pkt-prev::after {
    content: '' !important;
    display: block !important;
    width: 20px !important;
    height: 1px !important;
    background: var(--fm-border) !important;
    margin: 1px auto !important;
}
.feldmessen-app-container .fm-pkt-station::after {
    content: '' !important;
    display: block !important;
    width: 20px !important;
    height: 1px !important;
    background: var(--fm-border) !important;
    margin: 1px auto !important;
}

/* ============================================================
   15. RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .feldmessen-app-container { padding: 1rem !important; }
    .fm-tab-btn { padding: 0.5rem 0.75rem !important; font-size: 0.8rem !important; }
    .fm-table-container { overflow-x: auto !important; }
    .fm-group-table { font-size: 0.8rem !important; }
    .feldmessen-app-container .fm-group-table .fm-input-l1,
    .feldmessen-app-container .fm-group-table .fm-input-l2  { width: 50% !important; }
    .feldmessen-app-container .fm-group-table .fm-input-s1,
    .feldmessen-app-container .fm-group-table .fm-input-s2 { width: 50% !important; }
    .feldmessen-app-container .fm-group-table .fm-out-s-mean,
    .feldmessen-app-container .fm-group-table .fm-out-s-meter { width: 50% !important; }
    .feldmessen-app-container .fm-group-table .fm-input-esthz,
    .feldmessen-app-container .fm-group-table .fm-input-estvz { width: 50% !important; }
    .feldmessen-app-container .fm-group-table .fm-out-est-mean { width: 50% !important; }

    .feldmessen-app-container .fm-group-table .fm-input-hz1,
    .feldmessen-app-container .fm-group-table .fm-input-hz2 { width: 50% !important; }
    .feldmessen-app-container .fm-group-table .fm-input-vz1,
    .feldmessen-app-container .fm-group-table .fm-input-vz2 { width: 50% !important; }
}
/* ============================================================
   16. CHART-FILTER UI (Gruppen-Auswahl über den Charts)
   ============================================================ */
.feldmessen-app-container .fm-chart-filter {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    align-items: center !important;
    padding: 0.75rem 1rem !important;
    background: var(--fm-card-bg) !important;
    border: 1px solid var(--fm-border) !important;
    border-radius: var(--fm-radius) !important;
    margin-bottom: 1rem !important;
    min-height: 0 !important;
}

/* Leer = kein Abstand */
.feldmessen-app-container .fm-chart-filter:empty {
    display: none !important;
}

.feldmessen-app-container .fm-chart-filter-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    padding: 0.3rem 0.75rem !important;
    background: var(--fm-secondary-bg) !important;
    border: 1px solid var(--fm-border) !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--fm-text) !important;
    -webkit-text-fill-color: var(--fm-text) !important;
    transition: background 0.15s, border-color 0.15s !important;
    user-select: none !important;
}

.feldmessen-app-container .fm-chart-filter-item:has(input:checked) {
    background: #eff6ff !important;
    border-color: var(--fm-primary) !important;
}

.feldmessen-app-container .fm-chart-filter-item input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    accent-color: var(--fm-primary) !important;
    cursor: pointer !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    min-height: unset !important;
}

.feldmessen-app-container .fm-filter-dot {
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}
/* ============================================================
   17. RESPONSIVE - Korrektur für schmale Schirme
   ============================================================ */
@media (max-width: 1024px) {
    .feldmessen-app-container {
        width: 95% !important; /* Auf Tablets geben wir der App wieder mehr Platz */
        margin: 10px auto !important;
        padding: 1rem !important;
    }
}
/* ============================================================
   18. MODAL-SICHERHEIT - Erzwingt das Verstecken außerhalb der Ansicht
   ============================================================ */

/* Versteckt beide Modals standardmäßig mit maximaler Priorität */
#fm-modal, 
#fm-3d-modal {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
    z-index: 999999 !important; /* Über alles andere legen */
    align-items: center !important;
    justify-content: center !important;
}

/* Zeigt das Modal nur, wenn es die Klasse .open hat */
#fm-modal.open, 
#fm-3d-modal.open {
    display: flex !important;
}

/* Verhindert, dass die Titel innerhalb der Modals das Layout sprengen */
.fm-modal-content h3 {
    margin-top: 0 !important;
    color: var(--fm-text) !important;
}
/* FIX FOR READONLY ANGLE OUTPUTS GETTING CUT OFF */
.feldmessen-app-container td.fm-col-mean input,
.feldmessen-app-container td.fm-col-hz-360 input,
.feldmessen-app-container td.fm-col-vz-360 input,
.feldmessen-app-container td.fm-col-estimate input {
    text-align: center !important;
}

/* 3D Modal Close Button Fix */
.fm-modal-close {
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 45px !important;
    font-weight: bold;
    color: #ffffff !important;
    cursor: pointer;
    z-index: 1000;
    line-height: 1;
    background: #1e293b;
    border: 3px solid #ffffff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
.fm-modal-close:hover {
    color: #ef4444 !important;
    border-color: #ef4444;
    background: #0f172a;
}