:root{--primary-color:#B42344;/* Rot aus der vorhandenen CSS-Datei */ --secondary-color:#C3F0EB;/* Hellblau aus der vorhandenen CSS-Datei */ --accent-color:#2DA096;/* Dunkelblau aus der vorhandenen CSS-Datei */ --text-color:#363636;/* Text-Farbe aus der vorhandenen CSS-Datei */ --bg-color:#fcf7f0;/* Hintergrundfarbe aus der vorhandenen CSS-Datei */ --bg-dark:#E8DCCD;/* Dunklere Hintergrundfarbe aus der vorhandenen CSS-Datei */ --selected-color:#7DDCCD;/* Ausgewählte Farbe für Tabs und Elemente */ --error-color:#B42344;/* Rot für Fehlermeldungen */ --success-color:#0F463C;/* Erfolgsfarbe */ --border-radius:8px;/* Standardmäßiger Radius für abgerundete Ecken */ --box-shadow:0 2px 8px rgba(0,0,0,0.1);/* Standardmäßiger Schatten für Elemente */ --tif-red:#B42344;/* Explizite Definition von tif-red */}.tif-form-group{margin-bottom:12px}.tif-file-upload{align-items:center;background-color:white;border:2px dashed var(--bg-dark);border-radius:var(--border-radius);cursor:pointer;display:flex;flex-direction:column;justify-content:center;padding:30px;position:relative;text-align:center;transition:all 0.3s ease}.tif-file-upload:hover{border-color:var(--accent-color)}.tif-file-upload-icon{margin-bottom:15px}.tif-file-upload-icon img{height:48px;width:48px}.tif-file-upload-text{color:var(--text-color);font-size:14px;line-height:1.5}.tif-file-upload-text small{display:block;margin-top:5px;opacity:0.7}.tif-file-input{cursor:pointer;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.tif-checkbox{align-items:center;display:flex}.tif-checkbox input[type="checkbox"]{flex-shrink:0;height:20px;margin-right:10px;width:20px}.tif-checkbox label{display:inline !important;line-height:1.4;margin-bottom:0 !important}@media(max-width:599px){input[type="date"],input[type="time"]{min-height:40px}}@media(max-width:768px){.radio_wrapper{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:0.5rem}}.select2-container--default .select2-selection--single,.select2-container--default .select2-selection--multiple{border:1px solid var(--tif-light-grey);border-radius:0;height:auto;min-height:45px;font-family:inherit;font-size:inherit}.select2-container--default .select2-selection--single,.select2-container--default .select2-selection--multiple{transition:all 0.2s ease}.select2-container .select2-selection[style*="border-color:var(--tif-red)"]{border-width:2px !important}#source_language+.select2-container .select2-selection,#target_language_select+.select2-container .select2-selection{transition:all 0.2s ease}.radio_wrapper{position:relative;display:flex;align-items:center;margin-bottom:10px;z-index:1}.ragunathan-input{padding:12px;border:1px solid #ccc;border-radius:8px;width:100%;box-sizing:border-box;margin-bottom:15px}.tif-selected-files{margin-top:15px;display:none}.tif-selected-files b{font-size:16px !important;margin-bottom:8px;color:var(--primary-color)}.tif-file-list{list-style:none;padding:0 !important;margin:0;max-height:200px;overflow-y:auto;border:1px solid #ddd;border-radius:5px}.tif-file-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid #eee;background-color:#f9f9f9}.tif-file-item:last-child{border-bottom:none}.tif-file-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:10px;font-size:14px}.tif-remove-file{background:none;border:none;color:#B42344;cursor:pointer;font-size:16px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color 0.2s}.tif-remove-file:hover{background-color:#ffeeee}

/* ============================================================
   Interaktive Zustaende
   Alle bestehenden Regeln oben unveraendert erhalten
   ============================================================ */

/* 1. Drag-Over-Zustand (UIUX-06) */
.tif-file-upload.drag-over {
    border-color: #2DA096;
    background-color: #C3F0EB;
}

/* 2. Fehler-Zustand (.error auf Inputs/Selects/Upload-Zone) */
.error {
    border-color: #B42344 !important;
    border-width: 2px !important;
}
.tif-file-upload-error-message {
    color: #B42344;
    font-size: 12px;
    margin-top: 5px;
}

/* 3. Upload-Spinner */
.tif-upload-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
}
.tif-spinner-ring {
    width: 32px;
    height: 32px;
    border: 3px solid #E8DCCD;
    border-top-color: #2DA096;
    border-radius: 50%;
    animation: tif-spin 0.8s linear infinite;
}
@keyframes tif-spin {
    to { transform: rotate(360deg); }
}
.tif-upload-spinner span {
    font-size: 12px;
    opacity: 0.7;
}

/* 4. Custom-Alert-Modal */
.custom-alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.custom-alert-dialog {
    background: white;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    overflow: hidden;
    animation: tif-fade-in 0.2s ease-out;
}
@keyframes tif-fade-in {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.custom-alert-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}
.custom-alert-title-area {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    flex: 1;
}
.custom-alert-title-area.alert-error {
    background-color: #DC3545;
    color: white;
}
.custom-alert-title-area.alert-info {
    background-color: #0D6EFD;
    color: white;
}
.custom-alert-title-area.alert-success {
    background-color: #198754;
    color: white;
}
.custom-alert-title-area h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: white;
}
.custom-alert-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 16px 20px;
    color: white;
    line-height: 1;
}
.custom-alert-close:hover {
    opacity: 0.7;
}
.custom-alert-content {
    padding: 20px;
    line-height: 1.5;
}
.custom-alert-content.alert-error {
    color: #721c24;
}
.custom-alert-content.alert-info {
    color: #0c5460;
}
.custom-alert-footer {
    padding: 12px 20px 20px;
    text-align: right;
}
.custom-alert-ok-button {
    background: #B42344;
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
}
.custom-alert-ok-button:hover {
    opacity: 0.9;
}

/* 5. Body no-scroll beim offenen Modal */
body.no-scroll {
    overflow: hidden;
}

/* 6. Loeschen-Button Touch-Target 44x44px (WCAG 2.5.5) */
.tif-remove-file {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
}

/* 7. Responsive Alert */
@media (max-width: 768px) {
    .custom-alert-dialog { width: 90%; }
}
@media (max-width: 576px) {
    .custom-alert-dialog { width: 95%; }
    .custom-alert-content { padding: 15px; }
    .custom-alert-footer { padding: 10px 15px 15px; }
}

/* ============================================================
   Step-1-Zusammenfassung
   ============================================================ */

/* Step-1 Summary Box (per 09-UI-SPEC.md) */
.tif-summary-box {
    background: white;
    border-left: 4px solid #2DA096;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 20px;
    margin-bottom: 32px;
}

.tif-summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
}

.tif-summary-label {
    font-weight: 700;
    color: #363636;
    min-width: 120px;
}

.tif-summary-value {
    color: #363636;
    flex: 1;
}

/* ============================================================
   Responsive Layout und Info-Tooltips
   ============================================================ */

/* === Responsive Media Queries === */

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
    .tif-form-row { flex-direction: column; gap: 0; }
    .tif-form-col { flex: 0 0 auto !important; width: 100% !important; }
    .tif-form-container { padding: 20px 15px; }
    .tif-button { width: 100%; }
    .tif-interpreting-types { flex-wrap: wrap; }
    .tif-interpreting-types label { width: 100%; }
    /* font-size: 16px verhindert automatischen iOS-Safari-Zoom */
    .ragunathan-input, .tif-select { font-size: 16px; }
    .tif-summary-box { padding: 15px; }
    .radio_wrapper { flex-wrap: wrap; gap: 8px; }
    /* Tooltip-Anpassung */
    .information-container { margin-left: 0.25rem; }
    .information-icon { width: 1.25rem; height: 1.25rem; font-size: 0.75rem; }
    .information-text { width: 200px; }
}

/* Kleine Mobile-Geraete (max-width: 599px) */
@media (max-width: 599px) {
    .tif-form-container { padding: 15px 10px; }
    /* input[type="date"]/[type="time"] min-height:40px bereits in vorhandenem Block vorhanden */
    .ragunathan-input, .tif-select { font-size: 14px; padding: 10px; }
    .tif-summary-label { min-width: 90px; }
}

/* Tablet (768px-1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .tif-interpreting-types label { max-width: 150px; }
    .tif-form-col { flex: 1 1 45%; }
}

/* === Info-Tooltips === */

/* Tooltip-Container — relativ positioniert, damit .information-text absolut darin liegt */
.information-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* Radio-Wrapper: vertikale Zentrierung und kompakter Abstand (Auftrag-Seite) */
.tif-form-container .radio_wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
}

.tif-form-container .radio_wrapper label {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    cursor: pointer;
}

.tif-form-container .radio_wrapper input[type="radio"] {
    margin: 0 !important;
    flex-shrink: 0;
}

/* ?-Button (wie im alten WP-Plugin: kleiner, mit Border) */
.information-icon {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background-color: #B42344;
    color: #fff;
    border: 2px solid #B42344;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
    padding: 0;
}

.information-icon:hover,
.information-icon:focus {
    background-color: #92183a;
    outline: 2px solid #92183a;
    outline-offset: 2px;
}

/* Tooltip-Inhalt (wie im alten WP-Plugin: grauer Hintergrund, dicker Rand, Dreieck-Pfeil) */
.information-text {
    position: fixed;
    z-index: 9999;
    width: 250px;
    max-width: calc(100vw - 40px);
    border-radius: 4px;
    background-color: rgb(230, 230, 230);
    border: 2px solid #666;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    padding: 0.75rem;
    padding-right: 2rem;
    color: #333;
    font-size: 0.875rem;
    line-height: 1.4;
}

/* Dreieck-Pfeil oben */
.information-text:before {
    content: '';
    position: absolute;
    top: -8px;
    left: 10px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid rgb(230, 230, 230);
    filter: drop-shadow(0 -1px 0 #666);
}

/* Schliessen-X im Tooltip (runder Button wie im WP-Plugin) */
.information-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    z-index: 3;
}

.information-close:hover,
.information-close:focus {
    background-color: #e0e0e0;
    color: #333;
    outline: none;
}

/* ============================================================
   Portierte Layout-Klassen aus dem alten WordPress-Plugin
   (ragunathan-form/assets/css/form-style.css)
   ============================================================ */

/* Formular-Container (kein eigener Hintergrund — Formular sitzt auf Seiten-BG wie im WP-Original) */
.tif-form-container {
    margin: 30px auto;
    max-width: 800px;
    padding: 0 20px;
    font-family: 'Noto Sans', Helvetica, sans-serif;
}

/* Formular-Row (Zwei-Spalten-Layout) */
.tif-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 10px;
}

/* Sektions-Ueberschriften: mehr Abstand DAVOR fuer visuelle Trennung */
.tif-form-container h3 {
    margin-top: 28px;
    margin-bottom: 10px;
}

/* Erste h3 direkt nach h1 braucht keinen Extra-Abstand */
.tif-form-container h1 + h3 {
    margin-top: 16px;
}

/* Formular-Spalte (!important noetig wegen Divi-Theme-Override) */
.tif-form-col {
    flex: 1 1 250px !important;
}

/* Label-Styling (normal-weight wie im WP-Original, nur h3-Headings fett) */
.tif-form-container label,
.ragunathan-form label {
    color: #363636 !important;
    display: block !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    margin-bottom: 8px !important;
}

/* Checkbox-Label: vertikal mittig zur Checkbox — ueberschreibt generische Label-Regel oben
   (gleiche Spezifitaet, aber spaeter im File → gewinnt trotz !important auf beiden Seiten) */
.tif-form-container .tif-checkbox label,
.ragunathan-form .tif-checkbox label {
    display: inline !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    align-self: center;
}

/* Proportionale Spaltenbreiten (wie im alten WP-Plugin) */
.tif-form-col-8 { flex: 2 1 300px !important; }
.tif-form-col-4 { flex: 1 1 120px !important; }

/* Input-/Select-Styling mit Focus-State */
/* .tif-form-container Prefix schlaegt main-optimized.css (.ragunathan-form input.ragunathan-input) */
.tif-form-container .ragunathan-form input.ragunathan-input,
.tif-form-container .ragunathan-form textarea.ragunathan-input,
.tif-form-container .ragunathan-form .select2-selection,
.tif-input,
.tif-select {
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    border-width: 1px !important;
    border-radius: 8px !important;
    color: #363636 !important;
    font-family: 'Noto Sans', Helvetica, sans-serif !important;
    font-size: 16px !important;
    padding: 12px 15px !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.tif-input:focus,
.tif-select:focus {
    border-color: #2DA096 !important;
    box-shadow: 0 0 0 3px #C3F0EB !important;
    outline: none;
}

/* Formular-Sektionen */
.form_section {
    margin-bottom: 24px;
}

/* Submit-Button (wie im WP-Original: kein Uppercase) */
.tif-button {
    background-color: #2DA096;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Noto Sans', Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 700;
    padding: 14px 40px;
    transition: all 0.3s ease;
}

/* Sprach-Tags (Select2-aehnliche Darstellung der gewaehlten Sprachen) */
.tif-language-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #fff;
    min-height: 45px;
    align-items: center;
    margin-bottom: 15px;
}

.tif-language-tag {
    display: inline-flex;
    align-items: center;
    background-color: #C3F0EB;
    color: #0F463C;
    border: 1px solid #2DA096;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 14px;
    line-height: 1.3;
}

.tif-button:hover {
    background-color: #0F463C;
}

.tif-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.tif-button--loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.tif-button--loading::after {
    content: '';
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tif-spin 0.6s linear infinite;
}

@keyframes tif-spin {
    to { transform: rotate(360deg); }
}

/* Info-Box (Erfolg/Fehler) */
.info {
    padding: 15px;
    margin: 15px 0;
    border-radius: 8px;
    background-color: #f8f9fa;
    border-left: 5px solid #2DA096;
}

.info.error {
    border-left-color: #B42344;
    background-color: #fff5f5;
}

/* Kundenbetreuer-Info-Box */
.tif-info-box {
    background-color: white;
    border-left: 4px solid #2DA096;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    margin: 30px auto 0;
    overflow: hidden;
}

.tif-info-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20px;
}

.tif-info-image {
    flex-shrink: 0;
    margin-right: 20px;
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid #2DA096;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.tif-info-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.tif-info-text {
    flex-grow: 1;
}

.tif-info-text h3 {
    color: #0F463C;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    margin-top: 0;
}

.tif-info-text p {
    margin-bottom: 5px;
    color: #363636;
}

.tif-phone-number {
    font-size: 18px;
    font-weight: 700;
    color: #2DA096;
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.tif-phone-icon {
    margin-right: 8px;
}

.tif-phone-number a {
    color: #2DA096;
    text-decoration: none;
}

.tif-phone-number a:hover {
    text-decoration: underline;
}

/* Spacing-Hilfeklassen */
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mt-3 { margin-top: 24px; }
.pb-0 { padding-bottom: 0; }

/* Tablet: Info-Box braucht Abstand zum Divi-Mobile-Header (wird sonst verdeckt) */
@media (min-width: 768px) and (max-width: 980px) {
    .tif-info-box { margin-top: 70px !important; }
}

/* Responsive: Mobile-Abstände, Info-Box und proportionale Spalten */
@media (max-width: 767px) {
    .tif-form-container { padding: 0 15px; margin: 15px auto; }
    .tif-info-content { flex-direction: column; text-align: center; }
    .tif-info-image { margin-right: 0; margin-bottom: 15px; }
    .tif-phone-number { justify-content: center; }
    .tif-form label, .ragunathan-form label, .tif-form-container label { font-size: 14px !important; }
    .tif-form-col-8, .tif-form-col-4 { flex: 0 0 auto !important; width: 100% !important; }

    /* Spalten auf auto-Hoehe im Column-Layout (muss NACH Desktop-Regel stehen) */
    .tif-form-col { flex: 0 0 auto !important; width: 100% !important; }
    .tif-form-col-8, .tif-form-col-4 { flex: 0 0 auto !important; width: 100% !important; }

    /* Kompakte Abstände auf Mobile — verhindert gestapelte Margins */
    .tif-form-row { flex-direction: column !important; gap: 0 !important; margin-bottom: 0 !important; }
    .tif-form-group { margin-bottom: 10px !important; }
    .ragunathan-input, .tif-input { margin-bottom: 2px !important; margin-top: 0 !important; }
    .form_section { margin-bottom: 14px !important; }
    .tif-form-container h1 { font-size: 24px; margin-bottom: 10px !important; }
    .tif-form-container h3 { margin-top: 14px !important; margin-bottom: 6px !important; padding-bottom: 0 !important; }
    .tif-checkbox { margin-bottom: 10px; }
    .tif-language-tags { margin-bottom: 6px !important; }
    .tif-info-box { margin: 70px 15px 0 !important; }
}

@media (max-width: 599px) {
    .tif-form-container { padding: 0 10px; }
    .tif-info-text h3 { font-size: 16px; }
    .tif-form-group { margin-bottom: 10px; }
}