.elementor-23227 .elementor-element.elementor-element-79d7b2c5{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-form .elementor-field-group > label, .elementor-widget-form .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group > label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-type-html{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-form .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .e-form__indicators__indicator__label{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-widget-form .e-form__indicators__indicator__progress__meter{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-23227 .elementor-element.elementor-element-db4ce04 > .elementor-widget-container{padding:0px 0px 0px 0px;border-style:none;}.elementor-23227 .elementor-element.elementor-element-db4ce04 .elementor-field-group{padding-right:calc( 20px/2 );padding-left:calc( 20px/2 );margin-bottom:20px;}.elementor-23227 .elementor-element.elementor-element-db4ce04 .elementor-form-fields-wrapper{margin-left:calc( -20px/2 );margin-right:calc( -20px/2 );margin-bottom:-20px;}.elementor-23227 .elementor-element.elementor-element-db4ce04 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-23227 .elementor-element.elementor-element-db4ce04 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-23227 .elementor-element.elementor-element-db4ce04 .elementor-labels-inline .elementor-field-group > label{padding-left:6px;}body:not(.rtl) .elementor-23227 .elementor-element.elementor-element-db4ce04 .elementor-labels-inline .elementor-field-group > label{padding-right:6px;}body .elementor-23227 .elementor-element.elementor-element-db4ce04 .elementor-labels-above .elementor-field-group > label{padding-bottom:6px;}.elementor-23227 .elementor-element.elementor-element-db4ce04 .elementor-field-group > label{font-weight:600;}.elementor-23227 .elementor-element.elementor-element-db4ce04 .elementor-field-type-html{padding-bottom:0px;}.elementor-23227 .elementor-element.elementor-element-db4ce04 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;border-color:#3F444B2B;}.elementor-23227 .elementor-element.elementor-element-db4ce04 .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;border-color:#3F444B2B;}.elementor-23227 .elementor-element.elementor-element-db4ce04 .elementor-field-group .elementor-select-wrapper::before{color:#3F444B2B;}.elementor-23227 .elementor-element.elementor-element-db4ce04 .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-23227 .elementor-element.elementor-element-db4ce04 .elementor-button[type="submit"]{color:#ffffff;}.elementor-23227 .elementor-element.elementor-element-db4ce04 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-23227 .elementor-element.elementor-element-db4ce04 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-23227 .elementor-element.elementor-element-db4ce04 .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-23227 .elementor-element.elementor-element-db4ce04 .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-23227 .elementor-element.elementor-element-db4ce04 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-23227 .elementor-element.elementor-element-db4ce04 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-23227 .elementor-element.elementor-element-db4ce04 .e-form__indicators__indicator, .elementor-23227 .elementor-element.elementor-element-db4ce04 .e-form__indicators__indicator__label{font-size:11px;}.elementor-23227 .elementor-element.elementor-element-db4ce04{--e-form-steps-indicators-spacing:40px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}.elementor-23227 .elementor-element.elementor-element-1a2d777a > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}@media(max-width:767px){.elementor-23227 .elementor-element.elementor-element-79d7b2c5{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}}/* Start custom CSS for form, class: .elementor-element-db4ce04 *//**
 * DMA (Digital Maturity Assessment) Stylesheet
 * -------------------------------------------
 * Dieses Stylesheet verschönert das Elementor Pro Formular und gestaltet 
 * das dynamische Ergebnis-Dashboard im modernen Premium-Design.
 * 
 * Einbinden in WordPress:
 * - Entweder unter Elementor -> Formular-Einstellungen -> Erweitert -> Custom CSS
 * - Oder im Customizer unter "Zusätzliches CSS"
 * - Oder über ein Stylesheet im Child-Theme
 */

.elementor-23227 .elementor-element.elementor-element-db4ce04 b, strong {
    color: #183553;
}

:root {
    --dma-primary: #3b82f6;
    --dma-secondary: #6366f1;
    --dma-success: #10b981;
    --dma-warning: #f59e0b;
    --dma-danger: #ef4444;
    
    --dma-bg-card: rgba(255, 255, 255, 0.85);
    --dma-border-color: rgba(226, 232, 240, 0.8);
    --dma-text-main: #1e293b;
    --dma-text-muted: #64748b;
    --dma-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    --dma-radius: 16px;
    --dma-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Dunkelmodus-Kompatibilität (optional, falls die Website Dark Mode nutzt) */
@media (prefers-color-scheme: dark) {
    .dma-dark-theme {
        --dma-bg-card: rgba(30, 41, 59, 0.85);
        --dma-border-color: rgba(51, 65, 85, 0.8);
        --dma-text-main: #f8fafc;
        --dma-text-muted: #94a3b8;
        --dma-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }
}

/* ==========================================================================
   1. STRUKTUR DER MATRIX-TABELLE (KMU MODULE 2.1)
   ========================================================================== */

.dma-matrix-container {
    font-family: var(--dma-font);
    background: var(--dma-bg-card);
    border: 1px solid var(--dma-border-color);
    padding: 24px;
    border-radius: var(--dma-radius);
    box-shadow: var(--dma-shadow);
    margin-bottom: 24px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dma-matrix-instruction {
    font-size: 16px;
    font-weight: 600;
    color: var(--dma-text-main);
    margin-bottom: 20px;
    line-height: 1.5;
}

.dma-table-wrapper {
    overflow-x: auto;
    margin-bottom: 16px;
    border-radius: 8px;
    border: 1px solid var(--dma-border-color);
}

.dma-matrix-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
    background: transparent;
}

.dma-matrix-table th {
    background: rgba(241, 245, 249, 0.5);
    color: var(--dma-text-main);
    font-weight: 600;
    font-size: 14px;
    padding: 14px 16px;
    text-align: left;
    border-bottom: 2px solid var(--dma-border-color);
}

.dma-matrix-table td {
    padding: 14px 16px;
    font-size: 14px;
    color: var(--dma-text-main);
    border-bottom: 1px solid var(--dma-border-color);
    line-height: 1.4;
}

.dma-matrix-table tr:hover {
    background: rgba(59, 130, 246, 0.03);
}

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

.dma-area-label {
    font-weight: 500;
    max-width: 350px;
}

.text-center {
    text-align: center !important;
}

/* Custom Checkboxen in der Matrix-Tabelle */
.dma-matrix-cb, 
.dma-matrix-cb-none {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e1;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    background-color: #fff;
}

.dma-matrix-cb:checked, 
.dma-matrix-cb-none:checked {
    background-color: var(--dma-primary);
    border-color: var(--dma-primary);
}

.dma-matrix-cb:checked::after, 
.dma-matrix-cb-none:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.dma-matrix-cb:hover, 
.dma-matrix-cb-none:hover {
    border-color: var(--dma-primary);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.dma-matrix-none-wrapper {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--dma-border-color);
}

.dma-none-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--dma-text-main);
    font-weight: 500;
}

/* ==========================================================================
   2. VISUELLE KARTEN-GESTALTUNG FÜR FORMULARFELDER
   ========================================================================== */

/* Elementor Formularfeld-Container stylen */
.elementor-field-group {
    margin-bottom: 24px !important;
}

/* Standard Elementor Checkboxen / Radios aufwerten */
.elementor-field-subgroup {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.elementor-field-option {
    display: flex !important;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    background: var(--dma-bg-card);
    border: 1px solid var(--dma-border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.elementor-field-option:hover {
    border-color: var(--dma-primary);
    background: rgba(59, 130, 246, 0.02);
    transform: translateY(-1px);
}

.elementor-field-option input[type="checkbox"],
.elementor-field-option input[type="radio"] {
    margin-top: 3px !important;
}

/* Spezielles Design für Radio-Skalen (z. B. M2.1 Q1, M2.2 Q4) nebeneinander */
.elementor-field-group[class*="q1_"],
.elementor-field-group[class*="q4_"], 
.elementor-field-group[class*="q9_"],
.elementor-field-group[class*="q11_"],
.elementor-field-group[class*="q2_"],
.elementor-field-group:has([name*="q1_"]),
.elementor-field-group:has([name*="q4_"]),
.elementor-field-group:has([name*="q9_"]),
.elementor-field-group:has([name*="q11_"]),
.elementor-field-group:has([name*="q2_"]) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Force horizontal layout for inline subgroups with equal width options */
.elementor-field-subgroup.elementor-subgroup-inline {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 12px;
}

.elementor-field-subgroup.elementor-subgroup-inline .elementor-field-option {
    flex: 1 1 0%;
    min-width: 150px;
}

/* Spezielles Design für Radio-Optionen von q11 (Nein, Teilweise, Ja) nebeneinander */
.elementor-field-group[class*="q11_"] .elementor-field-subgroup,
.elementor-field-group:has([name*="q11_"]) .elementor-field-subgroup {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.elementor-field-group[class*="q11_"] .elementor-field-option,
.elementor-field-group:has([name*="q11_"]) .elementor-field-option {
    flex: 1 1 0% !important;
    min-width: 100px !important;
    justify-content: flex-start !important;
}



/* ==========================================================================
   3. ERGEBNIS-DASHBOARD (MODULE 3 VISUALISIERUNG)
   ========================================================================== */

#dma-dashboard-container {
    font-family: var(--dma-font);
    margin-top: 20px;
    animation: fadeIn 0.5s ease-out;
}

.dma-db-card {
    background: var(--dma-bg-card);
    border: 1px solid var(--dma-border-color);
    border-radius: var(--dma-radius);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    padding: 32px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.dma-db-top-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px;
}

/* SVG Circular Chart */
.dma-db-chart-wrapper {
    position: relative;
    width: 140px;
    height: 140px;
    flex-shrink: 0;
}

.dma-db-svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.dma-db-svg-bg {
    fill: none;
    stroke: rgba(226, 232, 240, 0.8);
    stroke-width: 10;
}

.dma-db-svg-fill {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease-in-out;
}

.dma-db-chart-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
}

.dma-db-score-num {
    font-size: 36px;
    font-weight: 800;
    color: var(--dma-text-main);
    line-height: 1;
}

.dma-db-score-lbl {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--dma-text-muted);
    font-weight: 600;
    margin-top: 2px;
}

/* Info Box */
.dma-db-info {
    flex-grow: 1;
    min-width: 250px;
}

.dma-db-info h3 {
    margin: 0 0 8px 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--dma-text-main);
}

.dma-db-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dma-db-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--dma-text-muted);
    margin: 0;
}

.dma-db-divider {
    border: none;
    border-top: 1px solid var(--dma-border-color);
    margin: 28px 0;
}

/* Details Section (Linear Progress Bars) */
.dma-db-details-section h4 {
    margin: 24px 0 16px 0 !important;
    font-size: 16px;
    font-weight: 700;
    color: var(--dma-text-main);
}

.dma-db-dimensions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.dma-db-dim-row {
    background: rgba(248, 250, 252, 0.4);
    border: 1px solid var(--dma-border-color);
    padding: 16px;
    border-radius: 12px;
}

.dma-db-dim-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.dma-db-dim-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--dma-text-main);
}

.dma-db-dim-score {
    font-size: 13px;
    font-weight: 700;
    color: var(--dma-primary);
}

.dma-db-dim-bar-bg {
    height: 8px;
    background: #e2e8f0;
    border-radius: 50px;
    overflow: hidden;
}

.dma-db-dim-bar-fill {
    height: 100%;
    border-radius: 50px;
    width: 0; /* Wird per JS gesetzt */
    transition: width 1s ease-in-out;
}

.dma-db-footer {
    margin-top: 28px;
    padding: 16px;
    background: rgba(59, 130, 246, 0.05);
    border-radius: 8px;
    border-left: 4px solid var(--dma-primary);
}

.dma-db-footer p {
    margin: 0;
    font-size: 12.5px;
    color: var(--dma-text-main);
    line-height: 1.5;
}

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

/* Mobilitäts-Optimierungen */
@media (max-width: 768px) {
    .dma-matrix-container {
        padding: 16px;
    }
    .dma-db-card {
        padding: 20px;
    }
    .dma-db-top-section {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
}

/* ==========================================================================
   4. ERFOLGS-POPUP / OVERLAY (FORMULAR-ABSENDUNG)
   ========================================================================== */

.dma-success-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.dma-success-overlay.dma-show {
    opacity: 1;
    visibility: visible;
}

.dma-success-modal {
    background: var(--dma-bg-card);
    border: 1px solid var(--dma-border-color);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border-radius: 24px;
    padding: 40px;
    width: 90%;
    max-width: 480px;
    text-align: center;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.dma-success-overlay.dma-show .dma-success-modal {
    transform: translateY(0);
}

.dma-success-icon-wrapper {
    width: 72px;
    height: 72px;
    background-color: rgba(16, 185, 129, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px auto;
    color: var(--dma-success);
}

.dma-success-icon {
    width: 36px;
    height: 36px;
}

.dma-success-title {
    font-family: var(--dma-font);
    font-size: 24px;
    font-weight: 700;
    color: var(--dma-text-main);
    margin: 0 0 12px 0;
}

.dma-success-text {
    font-family: var(--dma-font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--dma-text-muted);
    margin: 0 0 28px 0;
}

.dma-success-button {
    font-family: var(--dma-font);
    background-color: var(--dma-primary);
    color: white;
    font-weight: 600;
    font-size: 15px;
    padding: 12px 32px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    width: 100%;
}

.dma-success-button:hover {
    background-color: #2563eb;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
    transform: translateY(-1px);
}

.dma-success-button:active {
    transform: translateY(0);
}

/* Standard Elementor Erfolgsmeldung verbergen, da wir unser eigenes Popup nutzen */
.elementor-message.elementor-message-success {
    display: none !important;
}


/* DMA-FONTFACE-v136 */
/* Satoshi Medium wird von Elementor nur ausgeliefert, wenn die Familie in den
   Elementor-Einstellungen gewaehlt ist. Da sie hier ausschliesslich per CSS
   verwendet wird, deklarieren wir sie selbst. */
@font-face {
    font-family: 'Satoshi Medium';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/wp-content/uploads/2026/09/Satoshi-Medium.ttf') format('truetype');
}

/* DMA-TYPO-v135 */
/* ==========================================================================
   TYPOGRAFIE FORMULARFELDER (v1.3.5)
   Feld-Labels kraeftig in der Hausschrift, Optionstexte und Einwilligung
   in "Satoshi Medium" als eigene, leichtere Schriftfamilie.
   ========================================================================== */

/* Feld-Label (Frage bzw. Bereichsbezeichnung) betont */
.elementor-field-group > .elementor-field-label,
.elementor-field-group > label.elementor-field-label {
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

/* Optionstexte (Checkbox-/Radio-Beschriftung) in Satoshi Medium */
.elementor-field-option label,
.elementor-field-subgroup .elementor-field-option label,
.elementor-field-option > label {
    font-family: 'Satoshi Medium', 'Satoshi', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
}

/* Einwilligungstext (Acceptance-Feld) ebenfalls in Satoshi Medium */
.elementor-field-type-acceptance .elementor-field-option label,
.elementor-field-type-acceptance label:not(.elementor-field-label),
.elementor-field-type-acceptance .elementor-field-option {
    font-family: 'Satoshi Medium', 'Satoshi', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
}

/* Matrix-Tabelle: Zeilenbezeichnung betont, Optionen in Satoshi Medium */
.dma-area-label {
    font-weight: 600 !important;
}

.dma-matrix-table td label,
.dma-none-label {
    font-family: 'Satoshi Medium', 'Satoshi', sans-serif !important;
    font-weight: 400 !important;
}

/* DMA-TILES-v133 */
/* Modul-2-Kacheln (per Shortcode eingebunden): Ueberschriften im Dunkelblau
   des Fliesstexts. Noetig, weil Elementor das CSS des Kachel-Templates bei
   Shortcode-Einbindung nicht mitlaedt. */
.elementor-21220 .elementor-widget-heading .elementor-heading-title,
.elementor-23217 .elementor-widget-heading .elementor-heading-title,
.elementor-23225 .elementor-widget-heading .elementor-heading-title,
.elementor-23232 .elementor-widget-heading .elementor-heading-title {
    color: #001D58 !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-79d7b2c5 *//**
 * DMA (Digital Maturity Assessment) Stylesheet
 * -------------------------------------------
 * Dieses Stylesheet verschönert das Elementor Pro Formular und gestaltet 
 * das dynamische Ergebnis-Dashboard im modernen Premium-Design.
 * 
 * Einbinden in WordPress:
 * - Entweder unter Elementor -> Formular-Einstellungen -> Erweitert -> Custom CSS
 * - Oder im Customizer unter "Zusätzliches CSS"
 * - Oder über ein Stylesheet im Child-Theme
 */

.elementor-23227 .elementor-element.elementor-element-79d7b2c5 b, strong {
    color: #183553;
}

:root {
    --dma-primary: #3b82f6;
    --dma-secondary: #6366f1;
    --dma-success: #10b981;
    --dma-warning: #f59e0b;
    --dma-danger: #ef4444;
    
    --dma-bg-card: rgba(255, 255, 255, 0.85);
    --dma-border-color: rgba(226, 232, 240, 0.8);
    --dma-text-main: #1e293b;
    --dma-text-muted: #64748b;
    --dma-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    --dma-radius: 16px;
    --dma-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Dunkelmodus-Kompatibilität (optional, falls die Website Dark Mode nutzt) */
@media (prefers-color-scheme: dark) {
    .dma-dark-theme {
        --dma-bg-card: rgba(30, 41, 59, 0.85);
        --dma-border-color: rgba(51, 65, 85, 0.8);
        --dma-text-main: #f8fafc;
        --dma-text-muted: #94a3b8;
        --dma-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }
}

/* ==========================================================================
   1. STRUKTUR DER MATRIX-TABELLE (KMU MODULE 2.1)
   ========================================================================== */

.dma-matrix-container {
    font-family: var(--dma-font);
    background: var(--dma-bg-card);
    border: 1px solid var(--dma-border-color);
    padding: 24px;
    border-radius: var(--dma-radius);
    box-shadow: var(--dma-shadow);
    margin-bottom: 24px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dma-matrix-instruction {
    font-size: 16px;
    font-weight: 600;
    color: var(--dma-text-main);
    margin-bottom: 20px;
    line-height: 1.5;
}

.dma-table-wrapper {
    overflow-x: auto;
    margin-bottom: 16px;
    border-radius: 8px;
    border: 1px solid var(--dma-border-color);
}

.dma-matrix-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
    background: transparent;
}

.dma-matrix-table th {
    background: rgba(241, 245, 249, 0.5);
    color: var(--dma-text-main);
    font-weight: 600;
    font-size: 14px;
    padding: 14px 16px;
    text-align: left;
    border-bottom: 2px solid var(--dma-border-color);
}

.dma-matrix-table td {
    padding: 14px 16px;
    font-size: 14px;
    color: var(--dma-text-main);
    border-bottom: 1px solid var(--dma-border-color);
    line-height: 1.4;
}

.dma-matrix-table tr:hover {
    background: rgba(59, 130, 246, 0.03);
}

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

.dma-area-label {
    font-weight: 500;
    max-width: 350px;
}

.text-center {
    text-align: center !important;
}

/* Custom Checkboxen in der Matrix-Tabelle */
.dma-matrix-cb, 
.dma-matrix-cb-none {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e1;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    background-color: #fff;
}

.dma-matrix-cb:checked, 
.dma-matrix-cb-none:checked {
    background-color: var(--dma-primary);
    border-color: var(--dma-primary);
}

.dma-matrix-cb:checked::after, 
.dma-matrix-cb-none:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.dma-matrix-cb:hover, 
.dma-matrix-cb-none:hover {
    border-color: var(--dma-primary);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.dma-matrix-none-wrapper {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--dma-border-color);
}

.dma-none-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--dma-text-main);
    font-weight: 500;
}

/* ==========================================================================
   2. VISUELLE KARTEN-GESTALTUNG FÜR FORMULARFELDER
   ========================================================================== */

/* Elementor Formularfeld-Container stylen */
.elementor-field-group {
    margin-bottom: 24px !important;
}

/* Standard Elementor Checkboxen / Radios aufwerten */
.elementor-field-subgroup {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.elementor-field-option {
    display: flex !important;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    background: var(--dma-bg-card);
    border: 1px solid var(--dma-border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.elementor-field-option:hover {
    border-color: var(--dma-primary);
    background: rgba(59, 130, 246, 0.02);
    transform: translateY(-1px);
}

.elementor-field-option input[type="checkbox"],
.elementor-field-option input[type="radio"] {
    margin-top: 3px !important;
}

/* Spezielles Design für Radio-Skalen (z. B. M2.1 Q1, M2.2 Q4) nebeneinander */
.elementor-field-group[class*="q1_"],
.elementor-field-group[class*="q4_"], 
.elementor-field-group[class*="q9_"],
.elementor-field-group[class*="q11_"],
.elementor-field-group[class*="q2_"],
.elementor-field-group:has([name*="q1_"]),
.elementor-field-group:has([name*="q4_"]),
.elementor-field-group:has([name*="q9_"]),
.elementor-field-group:has([name*="q11_"]),
.elementor-field-group:has([name*="q2_"]) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Force horizontal layout for inline subgroups with equal width options */
.elementor-field-subgroup.elementor-subgroup-inline {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 12px;
}

.elementor-field-subgroup.elementor-subgroup-inline .elementor-field-option {
    flex: 1 1 0%;
    min-width: 150px;
}

/* Spezielles Design für Radio-Optionen von q11 (Nein, Teilweise, Ja) nebeneinander */
.elementor-field-group[class*="q11_"] .elementor-field-subgroup,
.elementor-field-group:has([name*="q11_"]) .elementor-field-subgroup {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.elementor-field-group[class*="q11_"] .elementor-field-option,
.elementor-field-group:has([name*="q11_"]) .elementor-field-option {
    flex: 1 1 0% !important;
    min-width: 100px !important;
    justify-content: flex-start !important;
}



/* ==========================================================================
   3. ERGEBNIS-DASHBOARD (MODULE 3 VISUALISIERUNG)
   ========================================================================== */

#dma-dashboard-container {
    font-family: var(--dma-font);
    margin-top: 20px;
    animation: fadeIn 0.5s ease-out;
}

.dma-db-card {
    background: var(--dma-bg-card);
    border: 1px solid var(--dma-border-color);
    border-radius: var(--dma-radius);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    padding: 32px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.dma-db-top-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px;
}

/* SVG Circular Chart */
.dma-db-chart-wrapper {
    position: relative;
    width: 140px;
    height: 140px;
    flex-shrink: 0;
}

.dma-db-svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.dma-db-svg-bg {
    fill: none;
    stroke: rgba(226, 232, 240, 0.8);
    stroke-width: 10;
}

.dma-db-svg-fill {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease-in-out;
}

.dma-db-chart-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
}

.dma-db-score-num {
    font-size: 36px;
    font-weight: 800;
    color: var(--dma-text-main);
    line-height: 1;
}

.dma-db-score-lbl {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--dma-text-muted);
    font-weight: 600;
    margin-top: 2px;
}

/* Info Box */
.dma-db-info {
    flex-grow: 1;
    min-width: 250px;
}

.dma-db-info h3 {
    margin: 0 0 8px 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--dma-text-main);
}

.dma-db-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dma-db-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--dma-text-muted);
    margin: 0;
}

.dma-db-divider {
    border: none;
    border-top: 1px solid var(--dma-border-color);
    margin: 28px 0;
}

/* Details Section (Linear Progress Bars) */
.dma-db-details-section h4 {
    margin: 24px 0 16px 0 !important;
    font-size: 16px;
    font-weight: 700;
    color: var(--dma-text-main);
}

.dma-db-dimensions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.dma-db-dim-row {
    background: rgba(248, 250, 252, 0.4);
    border: 1px solid var(--dma-border-color);
    padding: 16px;
    border-radius: 12px;
}

.dma-db-dim-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.dma-db-dim-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--dma-text-main);
}

.dma-db-dim-score {
    font-size: 13px;
    font-weight: 700;
    color: var(--dma-primary);
}

.dma-db-dim-bar-bg {
    height: 8px;
    background: #e2e8f0;
    border-radius: 50px;
    overflow: hidden;
}

.dma-db-dim-bar-fill {
    height: 100%;
    border-radius: 50px;
    width: 0; /* Wird per JS gesetzt */
    transition: width 1s ease-in-out;
}

.dma-db-footer {
    margin-top: 28px;
    padding: 16px;
    background: rgba(59, 130, 246, 0.05);
    border-radius: 8px;
    border-left: 4px solid var(--dma-primary);
}

.dma-db-footer p {
    margin: 0;
    font-size: 12.5px;
    color: var(--dma-text-main);
    line-height: 1.5;
}

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

/* Mobilitäts-Optimierungen */
@media (max-width: 768px) {
    .dma-matrix-container {
        padding: 16px;
    }
    .dma-db-card {
        padding: 20px;
    }
    .dma-db-top-section {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
}

/* ==========================================================================
   4. ERFOLGS-POPUP / OVERLAY (FORMULAR-ABSENDUNG)
   ========================================================================== */

.dma-success-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.dma-success-overlay.dma-show {
    opacity: 1;
    visibility: visible;
}

.dma-success-modal {
    background: var(--dma-bg-card);
    border: 1px solid var(--dma-border-color);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border-radius: 24px;
    padding: 40px;
    width: 90%;
    max-width: 480px;
    text-align: center;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.dma-success-overlay.dma-show .dma-success-modal {
    transform: translateY(0);
}

.dma-success-icon-wrapper {
    width: 72px;
    height: 72px;
    background-color: rgba(16, 185, 129, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px auto;
    color: var(--dma-success);
}

.dma-success-icon {
    width: 36px;
    height: 36px;
}

.dma-success-title {
    font-family: var(--dma-font);
    font-size: 24px;
    font-weight: 700;
    color: var(--dma-text-main);
    margin: 0 0 12px 0;
}

.dma-success-text {
    font-family: var(--dma-font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--dma-text-muted);
    margin: 0 0 28px 0;
}

.dma-success-button {
    font-family: var(--dma-font);
    background-color: var(--dma-primary);
    color: white;
    font-weight: 600;
    font-size: 15px;
    padding: 12px 32px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    width: 100%;
}

.dma-success-button:hover {
    background-color: #2563eb;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
    transform: translateY(-1px);
}

.dma-success-button:active {
    transform: translateY(0);
}

/* Standard Elementor Erfolgsmeldung verbergen, da wir unser eigenes Popup nutzen */
.elementor-message.elementor-message-success {
    display: none !important;
}


/* DMA-FONTFACE-v136 */
/* Satoshi Medium wird von Elementor nur ausgeliefert, wenn die Familie in den
   Elementor-Einstellungen gewaehlt ist. Da sie hier ausschliesslich per CSS
   verwendet wird, deklarieren wir sie selbst. */
@font-face {
    font-family: 'Satoshi Medium';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/wp-content/uploads/2026/09/Satoshi-Medium.ttf') format('truetype');
}

/* DMA-TYPO-v135 */
/* ==========================================================================
   TYPOGRAFIE FORMULARFELDER (v1.3.5)
   Feld-Labels kraeftig in der Hausschrift, Optionstexte und Einwilligung
   in "Satoshi Medium" als eigene, leichtere Schriftfamilie.
   ========================================================================== */

/* Feld-Label (Frage bzw. Bereichsbezeichnung) betont */
.elementor-field-group > .elementor-field-label,
.elementor-field-group > label.elementor-field-label {
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

/* Optionstexte (Checkbox-/Radio-Beschriftung) in Satoshi Medium */
.elementor-field-option label,
.elementor-field-subgroup .elementor-field-option label,
.elementor-field-option > label {
    font-family: 'Satoshi Medium', 'Satoshi', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
}

/* Einwilligungstext (Acceptance-Feld) ebenfalls in Satoshi Medium */
.elementor-field-type-acceptance .elementor-field-option label,
.elementor-field-type-acceptance label:not(.elementor-field-label),
.elementor-field-type-acceptance .elementor-field-option {
    font-family: 'Satoshi Medium', 'Satoshi', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
}

/* Matrix-Tabelle: Zeilenbezeichnung betont, Optionen in Satoshi Medium */
.dma-area-label {
    font-weight: 600 !important;
}

.dma-matrix-table td label,
.dma-none-label {
    font-family: 'Satoshi Medium', 'Satoshi', sans-serif !important;
    font-weight: 400 !important;
}

/* DMA-TILES-v133 */
/* Modul-2-Kacheln (per Shortcode eingebunden): Ueberschriften im Dunkelblau
   des Fliesstexts. Noetig, weil Elementor das CSS des Kachel-Templates bei
   Shortcode-Einbindung nicht mitlaedt. */
.elementor-21220 .elementor-widget-heading .elementor-heading-title,
.elementor-23217 .elementor-widget-heading .elementor-heading-title,
.elementor-23225 .elementor-widget-heading .elementor-heading-title,
.elementor-23232 .elementor-widget-heading .elementor-heading-title {
    color: #001D58 !important;
}/* End custom CSS */