/* ============================================
   VERGLEICHSRECHNER CUSTOM CSS
   Fuer: partner_css_layout3.php
   Einfuegen unter: "Zusaetzliche eigene CSS-Styles"
   Stand: 28.03.2026
   ============================================ */

/* HINWEIS: Google Fonts Import noetig da im iFrame keine lokalen Fonts verfuegbar.
   In der Datenschutzerklaerung erwaehnen! */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&family=Source+Sans+3:wght@400;600;700&display=swap');


/* ============================================
   1. FARBEN & VARIABLEN (Referenz)
   Navy:   #1E3A5F
   Accent: #3b82f6
   Warm:   #faf9f7
   Border: #d1d9e6
   Text:   #334155
   ============================================ */


/* ============================================
   2. GRUNDLEGENDE TYPOGRAFIE
   ============================================ */

/* Ueberschriften: Outfit */
h1, h2, h3, h4, .titel, .headline,
.vvgl-aufnahme-head::after,
.sub-header strong::after,
.sub-sub-header,
.zusatzfragen strong::after {
  font-family: 'Outfit', sans-serif !important;
  color: #1E3A5F !important;
  font-weight: 700 !important;
}

/* Fliesstext: Source Sans 3 */
body, td, th, div, span, p, label, input, select, textarea, button,
#vvergleich, #vvergleich .eingabeBox,
#vvergleich .cell.sp1::after,
#vvergleich select, #vvergleich input,
#vvergleich label, #vvergleich p, #vvergleich span {
  font-family: 'Source Sans 3', 'Open Sans', sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

body {
  background: #faf9f7 !important;
  color: #334155 !important;
  line-height: 1.6 !important;
}


/* ============================================
   3. EINGABEFELDER
   ============================================ */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="password"],
select,
textarea {
  border: 1.5px solid #d1d9e6 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  background: #ffffff !important;
  color: #334155 !important;
  outline: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8.825a.5.5 0 0 1-.354-.146l-4-4a.5.5 0 0 1 .708-.708L6 7.617l3.646-3.646a.5.5 0 0 1 .708.708l-4 4A.5.5 0 0 1 6 8.825z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 36px !important;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: #3b82f6 !important;
  width: 18px !important;
  height: 18px !important;
  cursor: pointer !important;
}


/* ============================================
   4. BUTTONS
   ============================================ */
input[type="submit"],
input[type="button"],
button,
.button,
a.button {
  background: #3b82f6 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 28px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
  box-shadow: none !important;
  text-transform: none !important;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover,
a.button:hover {
  background: #2563eb !important;
}

/* Ergebnisseite: Antrag-Button IMMER weisse Schrift */
a.antrag,
.button-antrag-outer-box a {
  color: #ffffff !important;
}
a.antrag:hover,
.button-antrag-outer-box a:hover {
  color: #ffffff !important;
}


/* ============================================
   5. LINKS
   ============================================ */
a {
  color: #3b82f6 !important;
  text-decoration: none !important;
}
a:hover {
  color: #1d4ed8 !important;
  text-decoration: underline !important;
}


/* ============================================
   6. TRENNLINIEN
   ============================================ */
hr {
  border: none !important;
  height: 1px !important;
  background: #e8edf4 !important;
  margin: 20px 0 !important;
}


/* ============================================
   7. PREIS-HERVORHEBUNG
   ============================================ */
.preis, .beitrag, .monatsbeitrag {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #10b981 !important;
}


/* ============================================
   8. HINTERGRUND & EINGABEBOX
   ============================================ */
#vvergleich {
  background: #faf9f7 !important;
}

.eingabeBox {
  background: #faf9f7 !important;
}


/* ============================================
   9. VERTIKALES LAYOUT (Labels ueber Feldern)
   ============================================ */
#vvergleich .eingabeBox {
  max-width: 620px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

#vvergleich .eingabeBox .line {
  flex-direction: column !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  position: relative !important;
  padding-right: 30px !important;
  max-width: 400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 24px !important;
  padding-bottom: 4px !important;
  gap: 8px !important;
}

#vvergleich .eingabeBox .line .cell.sp1 {
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 4px !important;
  font-weight: 600 !important;
  color: #1E3A5F !important;
}

#vvergleich .eingabeBox .cell.sp2 {
  width: 100% !important;
  max-width: 100% !important;
}

#vvergleich .eingabeBox .cell.sp3 {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  order: 0 !important;
}

/* Eingabefelder begrenzt auf 380px */
#vvergleich .eingabeBox .cell.sp2 input[type="text"],
#vvergleich .eingabeBox .cell.sp2 input[type="number"],
#vvergleich .eingabeBox .cell.sp2 input[type="date"],
#vvergleich .eingabeBox .cell.sp2 input[type="email"],
#vvergleich .eingabeBox .cell.sp2 input[type="tel"],
#vvergleich .eingabeBox .cell.sp2 select,
#vvergleich .eingabeBox .cell.sp2 textarea {
  width: 100% !important;
  max-width: 380px !important;
  box-sizing: border-box !important;
}

/* Header-Zeilen nicht beeinflussen */
#vvergleich .eingabeBox .line.header_line {
  flex-direction: row !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  text-align: center !important;
}

#vvergleich .eingabeBox .line.header_line .cell {
  width: 100% !important;
  text-align: center !important;
}

/* Zwischenueberschriften zentriert */
#vvergleich .eingabeBox .line.zwischenueberschrift {
  max-width: 400px !important;
  text-align: center !important;
}

#vvergleich .eingabeBox .line.zwischenueberschrift .cell {
  width: 100% !important;
  text-align: center !important;
}

/* Berechnen-Button zentriert */
#vvergleich .eingabe-submit-btn {
  justify-content: center !important;
  text-align: center !important;
}


/* ============================================
   10. AUSGEBLENDETE FELDER
   ============================================ */
#delikt,
#delikt_label,
#Hundn,
#Hundn_label,
select#delikt,
select#Hundn {
  display: none !important;
}

.line:has(#delikt),
.line:has(#Hundn) {
  display: none !important;
}

/* Fallback fuer Browser ohne :has() */
.hide-line {
  display: none !important;
}


/* ============================================
   11. INFO-ICONS (i)
   ============================================ */
#vvergleich .infoicon {
  background-image: none !important;
  width: 18px !important;
  height: 18px !important;
  border: 1.5px solid #94a3b8 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-style: italic !important;
  color: #64748b !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

#vvergleich .infoicon::after {
  content: "i" !important;
  font-style: italic !important;
  font-size: 11px !important;
  color: #64748b !important;
  font-weight: 600 !important;
  font-family: Georgia, 'Times New Roman', serif !important;
}

/* Kein CSS-Tooltip (nutzt helpBox) */
#vvergleich .infoicon::before {
  content: none !important;
  display: none !important;
}

#vvergleich .infoicon:hover {
  border-color: #3b82f6 !important;
  color: #3b82f6 !important;
  background-color: #eff6ff !important;
}

#vvergleich .infoicon:hover::after {
  color: #3b82f6 !important;
}

.tooltip, .info-icon, .hilfe {
  color: #6b7280 !important;
  cursor: help !important;
}


/* ============================================
   12. TOOLTIP-HILFETEXT (Hover-Karte)
   Helpbox nur sichtbar bei Hover auf Info-Icon
   ============================================ */
#helpBoxRight,
#helpBoxLeft {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid #e2e8f0 !important;
  padding: 14px 16px !important;
  max-width: 280px !important;
  width: 280px !important;
  z-index: 9999 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #334155 !important;
  pointer-events: none !important;
}

/* Sichtbar wenn ein Info-Icon gehovered wird */
.eingabeBox:has(.infoicon:hover) #helpBoxRight,
.eingabeBox:has(.infoicon:hover) #helpBoxLeft {
  opacity: 1 !important;
  visibility: visible !important;
}

#helpBoxRight .htext,
#helpBoxLeft .htext {
  color: #334155 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}


/* ============================================
   13. DIALOG BOX (Info-Popup)
   ============================================ */
#dialog-overlay {
  background: rgba(0, 0, 0, 0.45) !important;
}

#dialog-box {
  background: #ffffff !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
  border: none !important;
  padding: 0 !important;
  max-width: 500px !important;
  width: 90% !important;
  overflow: hidden !important;
}

#dialog-box .dialog-content {
  padding: 24px !important;
  max-height: 60vh !important;
  overflow-y: auto !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: none !important;
  font-family: 'Source Sans 3', 'Open Sans', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: #334155 !important;
}

#dialog-box .dialog-content b,
#dialog-box .dialog-content strong {
  color: #1E3A5F !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  display: block !important;
  margin-bottom: 8px !important;
}

#dialog-box .dialog-content .buttons {
  display: none !important;
}

/* X-Button (Schliessen) */
#dialog-box .button.ecke {
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 10 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
}

#dialog-box .button.ecke:hover {
  color: #1e293b !important;
  background: #f1f5f9 !important;
}

/* Fallback X-Button */
#dialog-box a,
#dialog-box .close {
  position: absolute !important;
  top: 12px !important;
  right: 16px !important;
  font-size: 20px !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  background: none !important;
  border: none !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  transition: background 0.2s !important;
}

#dialog-box a:hover,
#dialog-box .close:hover {
  background: #f1f5f9 !important;
  color: #1e293b !important;
}


/* ============================================
   14. DU-FORM LABEL-ERSETZUNGEN
   Unicode-Escapes statt UTF-8 (Mr-Money speichert nicht als UTF-8)
   Leerzeichen nach Escape = CSS-Delimiter, wird nicht angezeigt
   Nur noetig wenn naechstes Zeichen ein Hex-Zeichen ist (0-9, a-f)
   ============================================ */

/* Header: "Deine Angaben" */
#tr_info_versicherungsbedarf .vvgl-aufnahme-head {
  font-size: 0 !important;
  visibility: hidden !important;
}
#tr_info_versicherungsbedarf .vvgl-aufnahme-head::after {
  content: "Deine Angaben" !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1E3A5F !important;
  visibility: visible !important;
  display: block !important;
  text-align: center !important;
}

/* Subtext ausblenden */
#tr_info_versicherungsbedarf .vvgl-aufnahme-body {
  display: none !important;
}
#tr_info_versicherungsbedarf .sub-sub-header {
  text-align: center !important;
}

/* Rabattrelevante Angaben */
#tr_rabattangaben .sub-header strong {
  font-size: 0 !important;
  visibility: hidden !important;
}
#tr_rabattangaben .sub-header strong::after {
  content: "Angaben f\00FCr m\00F6gliche Rabatte" !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1E3A5F !important;
  visibility: visible !important;
}

/* Filter Header */
.mrmoBoxZusatzfragenOptions > .zusatzfragen:first-child strong {
  font-size: 0 !important;
  visibility: hidden !important;
}
.mrmoBoxZusatzfragenOptions > .zusatzfragen:first-child strong::after {
  content: "W\00E4hle eine Filteroption" !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1E3A5F !important;
  visibility: visible !important;
}

/* Einzelne Labels
   Regel: Leerzeichen nach \00XX noetig wenn naechstes Zeichen hex ist (a-f, 0-9)
   \00F6 = oe | \00FC = ue | \00E4 = ae | \00D6 = Oe | \00DC = Ue | \00C4 = Ae */

#tr_vorvers5 .cell.sp1 { font-size: 0 !important; line-height: 0 !important; color: transparent !important; }
#tr_vorvers5 .cell.sp1::after { content: "Warst du in den letzten 5 Jahren bereits versichert?" !important; font-size: 15px !important; line-height: 1.5 !important; color: #1E3A5F !important; font-weight: 600 !important; }

#tr_versbeginn .cell.sp1 { font-size: 0 !important; line-height: 0 !important; color: transparent !important; }
#tr_versbeginn .cell.sp1::after { content: "Wann soll dein Vertrag beginnen?" !important; font-size: 15px !important; line-height: 1.5 !important; color: #1E3A5F !important; font-weight: 600 !important; }

#tr_single .cell.sp1 { font-size: 0 !important; line-height: 0 !important; color: transparent !important; }
#tr_single .cell.sp1::after { content: "Wen m\00F6 chtest du versichern?" !important; font-size: 15px !important; line-height: 1.5 !important; color: #1E3A5F !important; font-weight: 600 !important; }

#tr_plz .cell.sp1 { font-size: 0 !important; line-height: 0 !important; color: transparent !important; }
#tr_plz .cell.sp1::after { content: "Deine Postleitzahl" !important; font-size: 15px !important; line-height: 1.5 !important; color: #1E3A5F !important; font-weight: 600 !important; }

#tr_beamte .cell.sp1 { font-size: 0 !important; line-height: 0 !important; color: transparent !important; }
#tr_beamte .cell.sp1::after { content: "Arbeitest du im \00F6 ffentlichen Dienst?" !important; font-size: 15px !important; line-height: 1.5 !important; color: #1E3A5F !important; font-weight: 600 !important; }

#tr_gebdatum .cell.sp1 { font-size: 0 !important; line-height: 0 !important; color: transparent !important; }
#tr_gebdatum .cell.sp1::after { content: "Dein Geburtsdatum" !important; font-size: 15px !important; line-height: 1.5 !important; color: #1E3A5F !important; font-weight: 600 !important; }

#tr_laufzeit .cell.sp1 { font-size: 0 !important; line-height: 0 !important; color: transparent !important; }
#tr_laufzeit .cell.sp1::after { content: "Gew\00FCnschte Vertragslaufzeit" !important; font-size: 15px !important; line-height: 1.5 !important; color: #1E3A5F !important; font-weight: 600 !important; }

#tr_schaeden5 .cell.sp1 { font-size: 0 !important; line-height: 0 !important; color: transparent !important; }
#tr_schaeden5 .cell.sp1::after { content: "Hattest du in den letzten 5 Jahren Sch\00E4 den?" !important; font-size: 15px !important; line-height: 1.5 !important; color: #1E3A5F !important; font-weight: 600 !important; }

#tr_kombirabatte .cell.sp1 { font-size: 0 !important; line-height: 0 !important; color: transparent !important; }
#tr_kombirabatte .cell.sp1::after { content: "M\00F6 chtest du Kombirabatte nutzen?" !important; font-size: 15px !important; line-height: 1.5 !important; color: #1E3A5F !important; font-weight: 600 !important; }


/* ============================================
   14b. ERGEBNISSEITE STYLING
   (Selektoren aus DOM-Analyse 30.03.2026)
   ============================================ */

/* --- Eingaben aendern Button --- */
.btn-neuervgl,
input.btn-neuervgl {
  background: #ffffff !important;
  color: #1E3A5F !important;
  border: 1.5px solid #d1d9e6 !important;
  border-radius: 10px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: 'Source Sans 3', 'Open Sans', sans-serif !important;
  cursor: pointer !important;
}
.btn-neuervgl:hover {
  border-color: #3b82f6 !important;
  background: #f8fafc !important;
}

/* --- E-Mail senden Button --- */
.btn_sendtoemail_default,
a.btn_sendtoemail_default {
  background: #ffffff !important;
  color: #1E3A5F !important;
  border: 1.5px solid #d1d9e6 !important;
  border-radius: 10px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: 'Source Sans 3', 'Open Sans', sans-serif !important;
  text-decoration: none !important;
}
.btn_sendtoemail_default:hover {
  border-color: #3b82f6 !important;
  background: #f8fafc !important;
}

/* --- Vergleichen Button --- */
.btn-success {
  background: #1E3A5F !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: 'Source Sans 3', 'Open Sans', sans-serif !important;
}
.btn-success:hover {
  background: #2a4d7a !important;
}

/* --- Tipp-Header (*** Preis-Tipp *** etc.) --- */
.tipp_header {
  background: #1E3A5F !important;
  padding: 12px 16px !important;
  text-align: center !important;
  border-radius: 10px 10px 0 0 !important;
  border: none !important;
}
.tipp-header-caption {
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.03em !important;
}

/* --- Tarifkarten --- */
.ergebnisBox {
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid #eee9e2 !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
}
.ergebnisBox.tipp {
  border: 1.5px solid #d1d9e6 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

/* Spalten-Header */
.ergebnisBox.ergebnisHeader {
  background: #faf9f7 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: 1px solid #eee9e2 !important;
  margin-bottom: 0 !important;
}
.ergebnisHeader .cell {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* --- Tarifname hervorheben --- */
p.tarif-name,
.tarif-name {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #3b82f6 !important;
}
.tarif_gesinfo {
  text-decoration: none !important;
}

/* --- Preis --- */
.betrag,
span.betrag {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1E3A5F !important;
  font-family: 'Outfit', sans-serif !important;
}
.betrag-wert {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1E3A5F !important;
  font-family: 'Outfit', sans-serif !important;
}

/* --- Online-Antrag Button: IMMER weisse Schrift --- */
a.antrag,
.antrag,
.button-antrag-outer-box a,
.button-antrag-outer-box .antrag {
  background: #3b82f6 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: 'Source Sans 3', 'Open Sans', sans-serif !important;
  text-decoration: none !important;
  display: inline-block !important;
}
a.antrag:hover,
.antrag:hover,
.button-antrag-outer-box a:hover {
  background: #2563eb !important;
  color: #ffffff !important;
}
a.antrag:visited,
.antrag:visited,
.button-antrag-outer-box a:visited {
  color: #ffffff !important;
}
a.antrag:active,
.antrag:active {
  color: #ffffff !important;
}

/* --- Tarifdetails Link --- */
a.tarifdetails,
.tarifdetails a {
  color: #3b82f6 !important;
  font-size: 13px !important;
  text-decoration: none !important;
}
a.tarifdetails:hover {
  text-decoration: underline !important;
}

/* --- Filter-Bereich (Slider) --- */
.slide_filterbox {
  font-family: 'Source Sans 3', 'Open Sans', sans-serif !important;
  font-size: 14px !important;
  color: #334155 !important;
}

/* --- Sortierung / Tipps Info --- */
.sortInfo {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  color: #1E3A5F !important;
  font-size: 14px !important;
}

/* --- Suchfeld --- */
.searchQueryBox input[type="text"],
input.form-text {
  border: 1.5px solid #d1d9e6 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  background: #ffffff !important;
  font-family: 'Source Sans 3', 'Open Sans', sans-serif !important;
}
.searchQueryBox .form-button,
input.form-button {
  background: #3b82f6 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border: none !important;
  font-family: 'Source Sans 3', 'Open Sans', sans-serif !important;
}

/* --- Checkbox --- */
input[type="checkbox"] {
  accent-color: #3b82f6 !important;
}

/* --- Leistungspunkte --- */
.ergebnis_punkte {
  font-size: 13px !important;
  color: #334155 !important;
}

/* --- Ergebnisseite Responsive (Mobil) --- */
@media (max-width: 768px) {
  .ergebnisBox {
    border-radius: 10px !important;
    margin-bottom: 16px !important;
  }
  .betrag,
  .betrag-wert {
    font-size: 20px !important;
  }
  a.antrag,
  .antrag,
  .button-antrag-outer-box a {
    padding: 10px 20px !important;
    font-size: 14px !important;
    color: #ffffff !important;
  }
}


/* ============================================
   15. ANTRAG-SEITE
   ============================================ */

/* Vertikales Layout */
#antrag#antrag#antrag div.zeile {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 14px !important;
  padding: 0 !important;
  clear: both !important;
}

#antrag#antrag#antrag div.zeile .sp1 {
  float: none !important;
  width: 100% !important;
  text-align: left !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  margin-bottom: 4px !important;
  display: block !important;
  padding: 0 !important;
}

#antrag#antrag#antrag div.zeile .sp1 .sp1-inner {
  justify-content: flex-start !important;
  text-align: left !important;
}

#antrag#antrag#antrag div.zeile .sp2 {
  float: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  display: block !important;
  padding: 0 !important;
}

/* Hintergrund & Container */
#antrag#antrag {
  background: #faf9f7 !important;
  max-width: 700px !important;
  margin: 0 auto !important;
  padding: 20px !important;
}

/* Bereichbox Karten */
#antrag#antrag .bereichbox {
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

/* Section Headers */
#antrag#antrag .ant_ue {
  font-family: 'Outfit', sans-serif !important;
  color: #1E3A5F !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-align: center !important;
  padding: 20px 0 10px !important;
  border-bottom: 2px solid #e2e8f0 !important;
  margin-bottom: 12px !important;
}

/* Eingabefelder */
#antrag#antrag input[type="text"],
#antrag#antrag input[type="email"],
#antrag#antrag input[type="tel"],
#antrag#antrag input[type="number"],
#antrag#antrag select,
#antrag#antrag textarea {
  border: 1.5px solid #d1d9e6 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
}

/* Pflichtfeld rote Border ueberschreiben - ALLE Varianten */
#antrag#antrag#antrag .field-is-empty,
#antrag#antrag#antrag input.field-is-empty,
#antrag#antrag#antrag input[type="text"].field-is-empty,
#antrag#antrag#antrag input[type="email"].field-is-empty,
#antrag#antrag#antrag input[type="tel"].field-is-empty,
#antrag#antrag#antrag input[type="number"].field-is-empty,
#antrag#antrag#antrag select.field-is-empty,
#antrag#antrag#antrag textarea.field-is-empty {
  border: 1.5px solid #d1d9e6 !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Auch :required :invalid abfangen */
#antrag#antrag#antrag input:required:invalid,
#antrag#antrag#antrag select:required:invalid {
  border-color: #d1d9e6 !important;
  box-shadow: none !important;
}
/* Erst bei Submit-Versuch rote Border zeigen */
#antrag#antrag .antragFehlerinfo {
  color: #dc2626 !important;
  font-size: 13px !important;
  font-family: 'Source Sans 3', 'Open Sans', sans-serif !important;
}

/* Fokus */
#antrag#antrag input:focus,
#antrag#antrag select:focus,
#antrag#antrag textarea:focus {
  border-color: #3b82f6 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

/* Grundfarbe (nicht fuer Links/Buttons) */
#antrag#antrag {
  color: #1E3A5F !important;
}

/* Links */
#antrag#antrag a {
  color: #3b82f6 !important;
  text-decoration: none !important;
}
#antrag#antrag a:hover {
  text-decoration: underline !important;
}

/* Buttons */
#antrag#antrag .pb_button,
#antrag#antrag .antrag_nav_next,
#antrag#antrag input[type="button"],
#antrag#antrag button {
  background: #3b82f6 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 24px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: 'Source Sans 3', 'Open Sans', sans-serif !important;
  cursor: pointer !important;
}
#antrag#antrag .pb_button:hover,
#antrag#antrag .antrag_nav_next:hover,
#antrag#antrag input[type="button"]:hover,
#antrag#antrag button:hover {
  background: #2563eb !important;
  color: #ffffff !important;
}
/* Inaktiver Button (Zurueck am Anfang) */
#antrag#antrag .button_inactive,
#antrag#antrag .antrag_nav_prev.button_inactive {
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
  cursor: default !important;
}

/* Step-Navigation */
#antrag#antrag .step {
  font-family: 'Source Sans 3', 'Open Sans', sans-serif !important;
}
#antrag#antrag .step .number {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
}
#antrag#antrag .step .caption {
  font-size: 13px !important;
  font-weight: 600 !important;
}
#antrag#antrag .step.active {
  background: #3b82f6 !important;
}
#antrag#antrag .step.active .number,
#antrag#antrag .step.active .caption {
  color: #ffffff !important;
}

/* Versicherungsschutz Info */
#antrag#antrag #bereich_versicherungsschutz .ant_box {
  background: #f0f4f8 !important;
  border-radius: 8px !important;
  padding: 12px !important;
}

/* Tarif/Vermittler Boxen ausblenden */
#antrag#antrag #bereich_tarif,
#antrag#antrag #bereich_vermittlerdaten {
  display: none !important;
}

/* Checkboxen */
#antrag#antrag input[type="checkbox"] {
  accent-color: #3b82f6 !important;
  width: 18px !important;
  height: 18px !important;
}

/* Typografie */
#antrag#antrag h1, #antrag#antrag h2, #antrag#antrag h3 {
  font-family: 'Outfit', sans-serif !important;
  color: #1E3A5F !important;
}

/* Head-Bereich (Antrag + Sparte) */
#antrag#antrag .head {
  font-family: 'Outfit', sans-serif !important;
  color: #1E3A5F !important;
}
#antrag#antrag .head_ue {
  font-family: 'Outfit', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1E3A5F !important;
}
#antrag#antrag .head_sparte {
  font-family: 'Source Sans 3', 'Open Sans', sans-serif !important;
  font-size: 14px !important;
  color: #64748b !important;
}

/* Hinweis-Texte dezenter */
#antrag#antrag .hinweis,
#antrag#antrag .hinweise {
  font-size: 12px !important;
  color: #94a3b8 !important;
  font-family: 'Source Sans 3', 'Open Sans', sans-serif !important;
}

/* Beitrag im Header */
#antrag#antrag .head_jahresbeitrag,
#antrag#antrag .jahresbeitrag {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  color: #1E3A5F !important;
  font-size: 20px !important;
}

/* Labels in Zeilen */
#antrag#antrag#antrag div.zeile .sp1 {
  font-family: 'Source Sans 3', 'Open Sans', sans-serif !important;
  color: #334155 !important;
}

/* Zeilen-AbstÀnde verbessern */
#antrag#antrag#antrag div.zeile {
  margin-bottom: 8px !important;
  padding: 4px 0 !important;
}

/* Dokumente / Beratungsdok */
#antrag#antrag .dokumente,
#antrag#antrag .beratungsdok {
  font-size: 13px !important;
  color: #334155 !important;
}

/* SEPA Überschrift */
#antrag#antrag .ant_ue_sepa {
  font-family: 'Outfit', sans-serif !important;
  color: #1E3A5F !important;
  font-weight: 600 !important;
}

/* Eingabefelder kuerzer */
#antrag#antrag#antrag div.zeile .sp2 input[type="text"],
#antrag#antrag#antrag div.zeile .sp2 input[type="number"],
#antrag#antrag#antrag div.zeile .sp2 input[type="email"],
#antrag#antrag#antrag div.zeile .sp2 input[type="tel"],
#antrag#antrag#antrag div.zeile .sp2 select,
#antrag#antrag#antrag div.zeile .sp2 textarea {
  max-width: 380px !important;
}


/* ============================================
   16. RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  input[type="submit"],
  input[type="button"],
  button {
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
  }
}