/* ===== V20 Preisrechner – CLEAN & FINAL ===== */

/* Fehlermeldung unter dem Feld */
.v20-field-error{
  display:block; margin-top:6px; font-size:.875rem; line-height:1.25; color:#ff5a5a;
}
.v20-field-error:empty{ display:none; }

/* Fehlerzustand (roter Rahmen/Glow) */
[v20-invalid="true"],
[aria-invalid="true"]{
  border-color:#ff6b6b;
  box-shadow:0 0 0 3px rgba(255,107,107,.15);
}

/* ===== Modal Sichtbarkeit & Stapelung (robust) ===== */

/* Sichtbarkeit über Body-Flag */
#inquiryOverlay, .modal-overlay { display: none !important; }
body.v20-modal-open #inquiryOverlay,
body.v20-modal-open .modal-overlay { display: block !important; }

/* Overlay (vollflächig) */
#inquiryOverlay, .modal-overlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483600 !important;     /* unter der Box, über Seite */
  pointer-events: auto !important;
  background: rgba(0,0,0,.65) !important;  /* Abdunklung */
  backdrop-filter: saturate(1.1) blur(1px);/* leichte Entkopplung (optional) */
  overflow: auto !important;
}

/* Modal-Box mittig */
#modalWrap, .modal-wrap{
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(92vw, 760px) !important;  /* konsistent zur App */
  z-index: 2147483601 !important;       /* über Overlay */
  pointer-events: auto !important;
}

/* Adminbar klickt NICHT, solange Modal offen */
body.v20-modal-open #wpadminbar,
body.v20-modal-open #wpadminbar *{
  pointer-events: none !important;
}

/* Body-Lock: Seite nicht verrutschen, Scroll sperren */
body.v20-lock{
  position: fixed !important;
  width: 100% !important;
  left: 0; right: 0;
  overflow: hidden !important;
}

/* ===== Modal-Inhalte – Look & Feel wie im Rechner ===== */

#inquiryOverlay .box,
.modal-overlay .box{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;

  background: var(--surface, #10141c) !important;
  color: var(--text, #e7eaee) !important;
  border: 1px solid var(--border, rgba(255,255,255,.10)) !important;
  border-radius: var(--radius, 12px) !important;
  padding: var(--pad, 14px) !important;
  box-shadow:
    0 20px 40px rgba(0,0,0,.40),
    0 2px  8px rgba(0,0,0,.25) !important;
}

/* Grid/Felder */
#inquiryOverlay .row,
.modal-overlay .row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap, 10px);
}
#inquiryOverlay .row + .row,
.modal-overlay .row + .row{ margin-top:var(--gap, 10px); }
@media (max-width:760px){
  #inquiryOverlay .row,
  .modal-overlay .row{ grid-template-columns:1fr }
}

#inquiryOverlay label,
.modal-overlay label{
  display:block; margin:0 0 4px;
  color:var(--muted, #9aa3ad);
  font-weight:600; font-size:var(--fs-label, 13px);
}

/* Eingaben */
#inquiryOverlay input[type=text],
#inquiryOverlay input[type=email],
#inquiryOverlay input[type=tel],
#inquiryOverlay select,
.modal-overlay input[type=text],
.modal-overlay input[type=email],
.modal-overlay input[type=tel],
.modal-overlay select{
  width:100%;
  height:var(--field-h, 42px);
  background:var(--surface-2, #0b1118);
  color:var(--text, #e7eaee);
  border:1px solid var(--border, rgba(255,255,255,.10));
  border-radius:8px;
  padding:0 12px;
  outline:0;
  transition:border-color .15s ease, box-shadow .15s ease;
}

#inquiryOverlay textarea,
.modal-overlay textarea{
  min-height:110px; height:auto; padding:10px 12px; resize:vertical;
  background:var(--surface-2, #0b1118);
  color:var(--text, #e7eaee);
  border:1px solid var(--border, rgba(255,255,255,.10));
  border-radius:8px; outline:0;
}

/* Fokus */
#inquiryOverlay input:focus,
#inquiryOverlay select:focus,
#inquiryOverlay textarea:focus,
.modal-overlay input:focus,
.modal-overlay select:focus,
.modal-overlay textarea:focus{
  border-color: var(--focus, #6aa9ff);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus, #6aa9ff) 25%, transparent);
}

/* Buttons */
#inquiryOverlay .btn,
.modal-overlay .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--field-h, 42px); padding:0 14px;
  border-radius:8px; border:0; cursor:pointer;
  background:var(--accent, #59A6FF); color:var(--accent-fg, #051022);
  font-weight:700; text-decoration:none;
}
#inquiryOverlay .btn.secondary,
.modal-overlay .btn.secondary{
  background:transparent;
  border:1px solid var(--border, rgba(255,255,255,.10));
  color:var(--text, #e7eaee);
}

/* Fehler-UI im Modal */
#inquiryOverlay .v20-field-error,
.modal-overlay .v20-field-error{
  display:block !important;
  margin-top:6px !important;
  font-size:.875rem !important;
  line-height:1.25 !important;
  color:#ff5a5a !important;
}

/* Sendebutton garantiert ganz oben (aber im Modal-Kontext) */
#v20SendBtn{
  position: relative !important;
  z-index: 2147483602 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Inputs im Modal – Focus & Übergänge (Zusatz, falls oben nicht greift) */
#inquiryOverlay input,
#inquiryOverlay textarea,
#inquiryOverlay select,
.modal-overlay input,
.modal-overlay textarea,
.modal-overlay select{
  width:100%; box-sizing:border-box;
  transition:border-color .15s ease, box-shadow .15s ease;
}
#inquiryOverlay input:focus-visible,
#inquiryOverlay textarea:focus-visible,
#inquiryOverlay select:focus-visible,
.modal-overlay input:focus-visible,
.modal-overlay textarea:focus-visible,
.modal-overlay select:focus-visible{
  outline:2px solid #6aa9ff; outline-offset:2px;
}


#v20DebugBadge:hover{
  opacity: 1 !important;
  background: rgba(40,80,120,0.95) !important;
}


#modalWrap {
  max-height: 92vh;          /* Modal nicht größer als Bildschirm */
  overflow-y: auto;           /* intern scrollbar */
  overscroll-behavior: contain; /* verhindert Page-Scroll dahinter */
  -webkit-overflow-scrolling: touch; /* sanftes iOS-Scrollen */
}

/* ===== iOS & Chrome Autofill-Fix (dezente Integration ins Dark-Theme) ===== */
#inquiryOverlay input:-webkit-autofill,
#inquiryOverlay textarea:-webkit-autofill,
#inquiryOverlay select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--surface-2, #0b1118) inset !important;
  -webkit-text-fill-color: var(--text, #e7eaee) !important;
  caret-color: var(--text, #e7eaee) !important;
  transition: background-color 9999s ease-in-out 0s; /* Safari-Farb-Flash unterdrücken */
}

/* iOS: kein Auto-Zoom beim Fokus */
#inquiryOverlay input,
#inquiryOverlay select,
#inquiryOverlay textarea {
  font-size: 16px; /* wichtig für iOS */
}



/* ===========================
   V20 MODAL-FORM STYLING
   (ergänzt am 2025-10-20)
   =========================== */



/* ===== Modal-Form Layout ===== */
#v20-short-form {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  font-size: 15px;
}

/* Grid-Layout für die Inputzeilen */
#v20-short-form .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap);
}

/* Label- und Eingabestil */
#v20-short-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  color: #333;
}

#v20-short-form input,
#v20-short-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.4;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Fokuszustand */
#v20-short-form input:focus,
#v20-short-form textarea:focus {
  outline: none;
  border-color: #0066cc;
  box-shadow: 0 0 0 2px rgba(0,102,204,0.15);
}

/* Textarea größer & angenehmer */
#v20-short-form textarea {
  min-height: 90px;
  resize: vertical;
}

/* Buttons */
#v20-short-form .inq-actions .btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

#v20-short-form .inq-actions .btn.secondary {
  background: #f5f5f5;
  border: 1px solid #ccc;
}

#v20-short-form .inq-actions .btn:not(.secondary) {
  background: #0066cc;
  color: #fff;
  border: none;
}

#v20-short-form .inq-actions .btn:not(.secondary):hover {
  background: #0051a8;
}

/* Responsive Optimierung */
@media (max-width: 480px) {
  #v20-short-form .row {
    grid-template-columns: 1fr;
  }
}


/* ===== Pflichtfeld-Markierung (✱) ===== */
#v20-short-form label.required::after {
  content: " *";
  color: #c62828; /* Rotton für Pflichtfelder */
  font-weight: 700;
}

/* Optional etwas Abstand für klarere Darstellung */
#v20-short-form label.required {
  position: relative;
  padding-right: 4px;
}


/* Button-Reihenfolge & Ausrichtung */
#v20-short-form .inq-actions {
  display: flex;
  gap: 30px; /* 👈 hier Abstand zwischen Abbrechen und An Dispo senden */
  margin-top: var(--gap);
  align-items: center;
}

#v20SendBtn { margin-left: auto; }      /* schiebt Senden nach rechts */
#inqCancel  { order: 0; }
#v20SendBtn { order: 1; }

/* Optional: Mobile untereinander */
@media (max-width: 480px){
  #v20-short-form .inq-actions { flex-direction: column; }
  #v20SendBtn { margin-left: 0; width: 100%; }
  #inqCancel  { width: 100%; }
}


/* ===== Button-Layout-Feinschliff ===== */

/* Abstand zwischen den Buttons */
#v20-short-form .inq-actions .btn {
  margin: 0;
}

/* Speziell für "Abbrechen" */
#v20-short-form .inq-actions .btn.secondary {
  background: #111;                /* tiefes Schwarz */
  color: #fff;                     /* weiße Schrift */
  border: 1px solid #111;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}

/* Hover-Effekt */
#v20-short-form .inq-actions .btn.secondary:hover {
  background: #000;
  opacity: 0.85;
}

/* Etwas mehr Abstand zwischen den Buttons */
#v20-short-form .inq-actions {
  gap: 10px; /* zuvor evtl. var(--gap); das hier überschreibt es */
   flex-direction: column; /* Buttons untereinander */
  align-items: stretch;   /* beide gleich breit */
}



/* ===== Button-Layout (Abbrechen + Senden) ===== */
#v20-short-form .inq-actions {
  display: flex;
  gap: 12px; /* Abstand zwischen Buttons */
  margin-top: var(--gap);
  align-items: center;
}

/* Abbrechen-Button – schwarz mit weißem Rahmen */
#v20-short-form .inq-actions .btn.secondary {
  background: #111;                 /* tiefes Schwarz */
  color: #fff;                      /* weiße Schrift */
  border: 1px solid #fff;           /* weißer Rahmen */
  border-radius: 6px;               /* leicht abgerundet, wie Inputs */
  margin-bottom: 12px; /* 👈 konkreter Abstand zwischen Abbrechen und An Dispo senden */
  margin-top: 12px; /* 👈 konkreter Abstand zwischen Abbrechen und Name */
 
  padding: 10px 18px;
  font-weight: 500;
  transition: background 0.2s, color 0.2s, opacity 0.2s, border-color 0.2s;
}

/* Hover- und Active-Effekte */
#v20-short-form .inq-actions .btn.secondary:hover {
  background: #000;
  border-color: #fff;
  opacity: 0.85;
}

#v20-short-form .inq-actions .btn.secondary:active {
  background: #222;
  border-color: #ccc;
}

/* Optional: mobile untereinander */
@media (max-width: 480px){
  #v20-short-form .inq-actions {
    flex-direction: column;
  }
  #v20-short-form .inq-actions .btn {
    width: 100%;
  }
}


/* === Formular-Layout: Felder sauber anordnen ==================== */
#v20-short-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 Spalten nebeneinander */
  gap: 16px 20px;                /* vertikal 16px, horizontal 20px Abstand */
  margin-top: 16px;
}

/* Eingabefelder füllen die Spalte komplett */
#v20-short-form .row > div {
  display: flex;
  flex-direction: column;
}

/* Labels etwas absetzen */
#v20-short-form label {
  margin-bottom: 4px;
  font-weight: 500;
  color: #bbb;
}

/* Inputs & Textareas angleichen */
#v20-short-form input[type="text"],
#v20-short-form input[type="email"],
#v20-short-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #666;
  background: #0f1113;
  color: #fff;
}

/* === Mobile: alles untereinander ==================== */
@media (max-width: 600px) {
  #v20-short-form .row {
    grid-template-columns: 1fr; /* nur 1 Spalte */
    gap: 14px; /* enger, aber sauber getrennt */
  }
}



/* =========================================================
   V20 • Modal/Short-Form – Clean Overrides (safe to append)
   - Ziel: einheitliche Abstände, Farben, Buttons, Labels
   - Keine bestehenden Selektoren überschreiben, nur scopen
   ========================================================= */

/* Design-Tokens nur für das Formular */
#v20-short-form, .modal-overlay #v20-short-form {
  --v20-gap-y: 16px;      /* vertikaler Abstand */
  --v20-gap-x: 20px;      /* horizontaler Abstand */
  --v20-radius: 10px;
  --v20-border: 1px;
  --v20-clr-bg: #0f1113;  /* Felder-Hintergrund */
  --v20-clr-fg: #ffffff;  /* Textfarbe */
  --v20-clr-border: #666;
  --v20-clr-border-strong: #A4AAB4;
  --v20-clr-muted: #bbb;
  --v20-clr-danger: #e11;
  --v20-btn-primary: #2f66cf; /* Blau */
  --v20-btn-primary-hover: #2553aa;
  --v20-btn-cancel-bg: #111;  /* Schwarz für „Abbrechen“ */
}

/* Grid-Layout für die Felder */
#v20-short-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--v20-gap-y) var(--v20-gap-x);
  margin-top: var(--v20-gap-y);
}
#v20-short-form .row > div {
  display: flex;
  flex-direction: column;
}

/* Labels */
#v20-short-form label {
  margin-bottom: 4px;
  font-weight: 500;
  color: var(--v20-clr-muted);
}
#v20-short-form label.required::after {
  content: " *";
  color: #e66;
}

/* Inputs / Textareas */
#v20-short-form input[type="text"],
#v20-short-form input[type="email"],
#v20-short-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: var(--v20-radius);
  border: var(--v20-border) solid var(--v20-clr-border);
  background: var(--v20-clr-bg);
  color: var(--v20-clr-fg);
}

/* Fehler-Optik (nutzt deine .v20-field-error + aria-invalid) */
#v20-short-form input[aria-invalid="true"],
#v20-short-form textarea[aria-invalid="true"],
#v20-short-form .v20-error {
  border-color: var(--v20-clr-danger) !important;
  box-shadow: 0 0 0 1px rgba(225,17,17,.25);
}
#v20-short-form .v20-field-error {
  margin-top: 6px;
  font-size: .95rem;
  line-height: 1.35;
  color: #ff9b94;
}

/* Aktionen (Buttons) */
#v20-short-form .inq-actions {
  display: flex;
  flex-direction: column;   /* mobile: untereinander */
  gap: 12px;                /* Abstand zwischen Buttons */
  margin-top: calc(var(--v20-gap-y) + 4px);
}

/* Primärbutton */
#v20-short-form .inq-actions #v20SendBtn.btn {
  background: var(--v20-btn-primary);
  color: #fff;
  border: none;
  border-radius: var(--v20-radius);
  padding: 12px 16px;
  font-weight: 700;
}
#v20-short-form .inq-actions #v20SendBtn.btn:hover {
  background: var(--v20-btn-primary-hover);
}

/* Abbrechen-Button schwarz, mit weißem Rahmen */
#v20-short-form .inq-actions #inqCancel.btn.secondary {
  background: var(--v20-btn-cancel-bg);
  color: #fff;
  border: var(--v20-border) solid var(--v20-clr-border-strong);
  border-radius: var(--v20-radius);
  padding: 12px 16px;
  font-weight: 600;
}

/* Desktop: Buttons nebeneinander und weiter auseinander */
@media (min-width: 640px) {
  #v20-short-form .inq-actions {
    flex-direction: row;
    justify-content: flex-end;
    gap: 14px;                         /* Abstand zw. Abbrechen & Senden */
  }
  /* form-grid zweispaltig, mobile bleibt 1 Spalte */
  #v20-short-form .row {
    grid-template-columns: 1fr 1fr;
  }
}
/* Mobile: einspaltig */
@media (max-width: 639.98px) {
  #v20-short-form .row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* Extra: Abstand oberhalb/unterhalb der Nachricht & Buttons konsistent */
#v20-short-form textarea#inqMsg {
  min-height: 160px;
  margin-top: 6px;
}

/* --- Button-Leiste (Abbrechen / An Dispo senden) --- */
#v20-short-form .inq-actions {
  display: flex;
  justify-content: flex-end;    /* Buttons rechtsbündig */
  align-items: center;
  gap: 20px;                    /* horizontaler Abstand zwischen Buttons */
  margin-top: 18px;             /* vertikaler Abstand zur Textarea */
  position: relative;
  z-index: 3;                   /* sichert Klickbarkeit */
}

/* Abbrechen-Button: dunkler Stil mit weißem Rand */
#inqCancel.btn.secondary {
  background: #111;
  color: #fff;
  border: 1px solid #fff;
  border-radius: var(--v20-radius, 8px);
  font-weight: 600;
  padding: 10px 18px;
  transition: background 0.2s, border-color 0.2s;
}
#inqCancel.btn.secondary:hover {
  background: #000;
  border-color: #aaa;
}

/* An Dispo senden – unverändert, aber leicht harmonisiert */
#v20SendBtn.btn {
  background: #3267db;
  color: #fff;
  border: none;
  border-radius: var(--v20-radius, 8px);
  font-weight: 600;
  padding: 10px 20px;
  transition: background 0.2s;
}
#v20SendBtn.btn:hover {
  background: #2b56b8;
}

#v20-short-form .inq-actions {
  gap: 40px !important;  /* Erhöht den Abstand zwischen Abbrechen und An Dispo senden */
}


/* === V20 Result Modal – single source of truth === */
#v20ResultModal{
  position: fixed;
  inset: 0;
  display: none;                 /* per JS -> .show */
  align-items: center;           /* vertikal zentriert */
  justify-content: center;       /* horizontal zentriert */
  background: rgba(10,12,16,.55);
  z-index: 2147483646;           /* ganz oben */
  padding: 0 !important;         /* kein Theme-Offset */
}
#v20ResultModal.show{ display: flex; }

#v20ResultModal .modal-dialog{
  /* Neutralisiere Bootstrap/Theme-Logik komplett */
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  transition: none !important;

  margin: 0 !important;          /* kein auto-Margin rechts/links */
  max-width: min(560px, 92vw);
  width: auto;
  pointer-events: auto;
}

#v20ResultModal .modal-content{
  background: #0b1118;
  color: #e7eaee;
  border-radius: 12px;
  padding: 20px 22px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  text-align: left;
}

#v20-result-title{
  font-weight: 800;
  font-size: 16px;
  margin: 0 0 8px;
}
#v20-result-body{
  font-size: 15px;
  margin: 0;
  line-height: 1.45;
}

body.modal-open{ overflow: hidden; padding-right: 0 !important; }
#v20ResultModal{ padding-right: 0 !important; } /* kein Scrollbar-Compensating */