/**
 * @package GO Medical Rechner Framework - Elite Dark Edition
 * v3.3 - ULTIMATE FIX: Forced 70/30 Split via Structure Targeting
 */

:root {
    --gm-major-color: #38b2e4;
    --gm-bg-deep: #020617;
    --gm-card-bg: #0f172a;
    --gm-text-main: #ffffff;
    --gm-text-body: #e2e8f0;
    --gm-text-dim: #94a3b8;
    --gm-input-bg: rgba(255, 255, 255, 0.05);
    --gm-border-alpha: rgba(255, 255, 255, 0.1);
}

/* --- SEITEN-TRIGGER & DARK BACKGROUND --- */
body:has(.formula-header) #sp-main, body.com_finder #sp-main {
    background-color: var(--gm-bg-deep) !important;
    background-image: 
        radial-gradient(at 0% 0%, rgba(30, 58, 138, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(15, 23, 42, 0.8) 0px, transparent 50%) !important;
    padding-top: 60px !important;
    min-height: 100vh;
}

/* Neutralisierung der Helix-Flächen */
body:has(.formula-header) #sp-main-body, body.com_finder #sp-main-body,
body:has(.formula-header) .body-innerwrapper, body.com_finder .body-innerwrapper,
body:has(.formula-header) .sp-column, body.com_finder .sp-column {
    background: transparent !important; border: none !important; box-shadow: none !important;
}

/* --- TYPOGRAFIE --- */
.formula-header { color: #fff !important; }
.formula-header::after { background: linear-gradient(to right, var(--gm-major-color) 60%, rgba(255, 255, 255, 0.1) 60%) !important; }
.intro-text, .rechner-content p, .interpretation-box p, .bib-item { color: var(--gm-text-body) !important; font-size: 16px; line-height: 1.6; font-weight: 300; }

/* --- RECHNER KOMPONENTEN --- */
.rechner-card { 
    background-color: var(--gm-card-bg); 
    background-image: radial-gradient(at 50% 0%, rgba(30, 58, 138, 0.3) 0px, transparent 60%);
    border: 1px solid var(--gm-border-alpha); border-radius: 24px; 
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5); overflow: hidden; margin-bottom: 50px; 
}
.rechner-content { padding: 40px; }
.label { color: var(--gm-text-main); font-size: 13px; font-weight: 700; margin-bottom: 12px; display: block; text-transform: uppercase; letter-spacing: 0.5px; }

/* ============================================================
   DER DEFINITIVE FIX FÜR DIE EINHEITEN (SIDE-BY-SIDE)
   Wir suchen den Container, der sowohl Input als auch Schalter enthält.
   ============================================================ */

/* 1. Wir erzwingen Flexbox für den Container, der ein Input und eine Toggle-Group hat */
.form-group:has(.form-control):has(.gm-toggle-group) > div,
.form-group > div:has(.form-control):has(.gm-toggle-group) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 15px !important;
    width: 100% !important;
}

/* 2. Das Eingabefeld bekommt exakt 70% */
.form-group:has(.gm-toggle-group) .form-control {
    width: 70% !important;
    flex: 0 0 70% !important;
    margin-bottom: 0 !important;
}

/* 3. Der Schalter bekommt die restlichen 30% */
.form-group:has(.form-control) .gm-toggle-group {
    width: calc(30% - 15px) !important;
    flex: 0 0 calc(30% - 15px) !important;
    margin-bottom: 0 !important;
}

/* Falls ein Schalter ALLEINE unter einem Label steht (z.B. FEU/DDU), soll er 100% haben */
.form-group > .gm-toggle-group {
    width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 30px !important;
}

/* Standard Form-Controls */
.form-control { 
    display: block !important; height: 50px !important; padding: 0 15px !important;
    background-color: var(--gm-input-bg) !important; border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 8px !important; color: #fff !important; 
}

/* Toggle-Buttons */
.gm-toggle-group { display: flex; background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 4px; gap: 4px; border: 1px solid var(--gm-border-alpha); }
.gm-btn-toggle { flex: 1; background: transparent; border: none; color: var(--gm-text-dim); padding: 12px; font-size: 14px; font-weight: 600; cursor: pointer; border-radius: 6px; }
.gm-btn-toggle.active { background: var(--gm-major-color) !important; color: #fff !important; }

/* BERECHNEN BUTTON */
.btn-calculate { width: 100%; height: 56px; background: transparent; border: 1px solid var(--gm-major-color); color: var(--gm-major-color); text-transform: uppercase; font-weight: 700; cursor: pointer; border-radius: 12px; margin-top: 10px; }
.btn-calculate:hover { background: var(--gm-major-color); color: #fff; }

/* ERGEBNIS & SUCHE */
.res-area { background: rgba(255,255,255,0.02); padding: 45px 40px; text-align: center; border-top: 1px solid var(--gm-border-alpha); }
.result-val { font-size: 64px; font-weight: 800; color: var(--gm-major-color); font-family: 'Montserrat'; }
.com-content-category-blog .article { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid var(--gm-border-alpha) !important; border-radius: 12px !important; padding: 25px !important; }
.mod-finder__search-input, #q.js-finder-searchword { background: var(--gm-input-bg) !important; border: 1px solid var(--gm-border-alpha) !important; color: #fff !important; border-radius: 8px !important; padding: 10px 15px !important; }

/* CLEANUP */
article:has(.formula-header) .entry-header, article:has(.formula-header) .article-info { display: none !important; }