/* Grundlayout für Calculator */
#ac-quote-wrap {
  margin: 1rem 0 2rem;
  font-family: Arial, sans-serif;
  font-size: 15px;
  color: #222;
  counter-reset: ac-section;
}

/* Nummerierte Überschriften */
.ac-section-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  position: relative;
}

.ac-section-title::before {
  counter-increment: ac-section;
  content: counter(ac-section);
  position: absolute;
  left: 0;
  top: -2px;
  background: #f28e39;
  color: #fff;
  border-radius: 50%;
  width: 1.8rem;
  height: 1.8rem;
  text-align: center;
  line-height: 1.8rem;
  font-size: 14px;
  font-weight: 700;
}


/* Box-Stil */
.ac-section {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin: 1rem 0;
  padding: .5rem 1rem 1rem;
  background:#f8f8f8;
}


/* Headrow */
.ac-headrow {
  border-bottom: 2px solid #ddd;
  padding-bottom: 4px;
  margin-bottom: 8px;
  display: flex;
}
.ac-headrow > div:first-child { flex: 1; }
.ac-headrow > div { text-align: right; width: 180px; }

/* Zeilen */
.ac-section .container {
  display: flex;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
}
.ac-section .container > div:first-child { flex: 1; }
.ac-section .container > div:last-child { text-align: right; }

/* Abwechselnde Hintergrundfarbe */
.ac-section .container:nth-child(even) {
  background: #fff;
}
.ac-section .container:nth-child(odd) {
  background: #fafafa;
}

.ac-section label {
  font-weight: 600;
}

/* Preis-Spalten */
#ac-quote-wrap [id^="ac_price_"] {
  font-weight: 600;
}

/* Zusammenfassung */
.ac-summary {
  background: #f0f6fb;
  border: 1px solid #f28e39;
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem 0;
}
.ac-summary strong {
  font-size: 16px;
  color: #f28e39;
}
.ac-summary .meta {
  font-size: 12px;
  color: #666;
}

/* Buttons */
#ac-quote-wrap .button {
  margin-top: 10px;
  margin-right: 6px;
}
#ac-quote-wrap .button--secondary {
  background: #f8f8f8;
  border: 1px solid #ccc;
  color: #333;
}
#ac-quote-wrap .button--secondary:hover {
  background: #eee;
}
/* Zusammenfassung im gleichen 3-Spalten-Raster */
.ac-summary {
  background: #f0f6fb;
  border: 1px solid #f28e39;
  border-radius: 6px;
  padding: 16px;
  margin: 20px 0;
}
.ac-summary .ac-headrow {
  display: flex;
  font-weight: 700;
  border-bottom: 1px solid #cfe2f3;
  padding: 6px 0;
  margin-bottom: 8px;
}
.ac-summary .ac-headrow > div:first-child { flex: 1; }
.ac-summary .ac-headrow > div { width: 180px; text-align: right; }
.ac-summary .ac-row { background: transparent; }
.ac-summary .ac-row:nth-child(even) { background: #eaf2fb; }

/* Eine Kalkulationszeile: 4 Spalten */
.ac-row {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 6px 0;
}
.ac-row > .ac-col-label { flex: 1; }
.ac-row > .ac-col-field { width: 260px; }
.ac-row > .ac-col-price { width: 180px; text-align: right; }


/* --- Segment Switcher --- */
.ac-mode { margin: 8px 0 16px; }
.ac-mode__title { font-weight: 700; margin-bottom: 2px; }
.ac-mode__hint { color:#6b7280; font-size: 13px; margin-bottom: 10px; }

.ac-segment .form-item__label,
.ac-segment .option {
  display:none; /* Drupal-Label ausblenden; wir stylen die Radios direkt als Buttons */
}

/* Radios als Buttons: */
.ac-segment .form-radios {
  display:flex; gap:8px; flex-wrap:wrap;
}
.ac-segment .form-type-radio {
  position:relative;
}
.ac-segment .form-type-radio input[type="radio"] {
  position:absolute; inset:0; opacity:0; cursor:pointer;
}
.ac-segment .form-type-radio::before {
  content: attr(data-label);
  display:inline-block;
  padding:8px 14px;
  border:1px solid #d1d5db;
  border-radius:9999px;
  background:#fff;
  font-weight:600;
  transition:all .15s ease;
}
.ac-segment .form-type-radio:hover::before { border-color:#9ca3af; }
.ac-segment .form-type-radio input[type="radio"]:checked + label,
.ac-segment .form-type-radio input[type="radio"]:checked ~ * {}
.ac-segment .form-type-radio input[type="radio"]:checked + .option,
.ac-segment .form-type-radio input[type="radio"]:checked ~ .option {}

.ac-segment .form-type-radio input[type="radio"]:checked ~ .option,
.ac-segment .form-type-radio input[type="radio"]:checked ~ label {}

.ac-segment .form-type-radio input[type="radio"]:checked ~ * {}
.ac-segment .form-type-radio input[type="radio"]:checked ~ * {} /* keeps Drupal happy */

.ac-segment .form-type-radio input[type="radio"]:checked ~ .option::before,
.ac-segment .form-type-radio input[type="radio"]:checked ~ label::before {}
/* Workaround: wir setzen den Button-Style über das Elternelement: */
.ac-segment .form-type-radio input[type="radio"]:checked ~ * {}
.ac-segment .form-type-radio input[type="radio"]:checked ~ * {}

.ac-segment .form-type-radio input[type="radio"]:checked ~ * {}
/* Einfacher: selektiere den Radio-Container über :has() (moderne Browser): */
@supports(selector(:has(*))) {
  .ac-segment .form-type-radio:has(input[type="radio"]:checked)::before {
    background:#f28e39; color:#fff; border-color:#f28e39;
  }
}

/* --- Bereichs-Toggle --- */
.ac-disabled {
  opacity:.55;
  filter: grayscale(15%);
  pointer-events:none;
}
/* --- Wrapper erbt Typo/Abstände der Pricing-Tabelle --- */
.op-table-pricing#ac-quote-wrap {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 15px;
  color: #222;
}

/* Abschnitt-Box wie die Pricing-Blöcke */
.op-table-pricing .ac-section {
  border: 1px solid #eee;
  border-radius: 10px;
  background: #f9f9f9;
  margin: 18px 0;
  padding: 16px 16px 8px;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

/* nummerierte Überschriften im CI */
.op-table-pricing .ac-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Work Sans", system-ui, Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 10px;
}
.op-table-pricing .ac-section-title .op-step {
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:#f28e39;color:#fff;font-weight:700;
}

/* Kopfzeile für die Preis-Spalten wie Spaltenüberschriften */
.op-table-pricing .ac-headrow {
  display:flex;gap:16px;align-items:center;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 10px 4px;
  margin: 8px 0 12px;
  font-weight: 700;
}
.op-table-pricing .ac-headrow .ac-col-price { font-weight:700; }

/* Zeilenlayout: Label | Field | Preis | Summe  */
.op-table-pricing .ac-row {
  display:flex; gap:16px;
  padding: 8px 4px;
  border-bottom: 1px dashed #eee;
}
.op-table-pricing .ac-row:last-child { border-bottom:0; }

.op-table-pricing .ac-col-label { flex: 1; min-width: 260px; }
.op-table-pricing .ac-col-field { width: 280px; }
.op-table-pricing .ac-col-price { width: 180px; text-align:right; }

/* kleine Beschreibung unter Labels */
.op-table-pricing .desc { color:#666; font-size:12px; }

/* Buttons wie auf der Preisseite */
.op-table-pricing .button--primary { 
  background:#f28e39; border:1px solid #f28e39; color:#fff;
  padding:.6rem 1rem; border-radius:6px; text-decoration:none;
}
.op-table-pricing .button--primary:hover { filter:brightness(.95); }

.op-table-pricing .button--secondary {
  background:#fff; border:1px solid #ddd; color:#222;
  padding:.6rem 1rem; border-radius:6px; text-decoration:none;
}
.op-table-pricing .button--secondary:hover { background:#f8f8f8; }

/* Zusammenfassung-Box angelehnt */
.op-table-pricing .ac-summary {
  background:#fff7f1; border:1px solid #f9d1b4;
  border-radius:10px; padding:14px 16px;
}

/* --- Formular-Inputs im OP-Look ----------------------------------------- */
.op-table-pricing input.form-text,
.op-table-pricing input.form-number,
.op-table-pricing input[type="text"],
.op-table-pricing input[type="email"],
.op-table-pricing input[type="number"],
.op-table-pricing select.form-select,
.op-table-pricing textarea.form-textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: .6rem .75rem;
  border: 1px solid #dadde2;
  border-radius: 8px;
  background: #fff;
  color: #1d1d1f;
  font-size: 15px;
  line-height: 1.35;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* kompaktes Feld in der mittleren Spalte */
.op-table-pricing .ac-col-field input,
.op-table-pricing .ac-col-field select {
  max-width: 260px;        /* wirkt auf Desktop sauber */
}

/* Placeholder dezent */
.op-table-pricing ::placeholder { color: #8a8f98; }

/* Hover */
.op-table-pricing input:hover,
.op-table-pricing select:hover,
.op-table-pricing textarea:hover {
  border-color: #f28e39;
  background: #fcfdff;
  color: #f28e39;
}

/* Focus (CI-Orange) */
.op-table-pricing input:focus,
.op-table-pricing select:focus,
.op-table-pricing textarea:focus {
  outline: none;
  border-color: #f28e39;
  box-shadow: 0 0 0 3px rgba(242, 142, 57, .18);
}

/* Disabled/readonly */
.op-table-pricing input[disabled],
.op-table-pricing select[disabled],
.op-table-pricing textarea[disabled] {
  background: #f7f8fa;
  color: #9aa1aa;
  cursor: not-allowed;
}

/* Number-Spinner ausblenden (Chrome/Edge) */
.op-table-pricing input[type=number]::-webkit-outer-spin-button,
.op-table-pricing input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Number-Spinner ausblenden (Firefox) */
.op-table-pricing input[type=number] { -moz-appearance: textfield; }

/* Radios/Checkboxen hübsch und inline */
.op-table-pricing .form-radios,
.op-table-pricing .form-checkboxes { display: flex; gap: 14px; flex-wrap: wrap; }

.op-table-pricing .form-radio,
.op-table-pricing .form-checkbox {
  width: 18px; height: 18px; vertical-align: -3px; cursor: pointer;
}

.op-table-pricing label.option {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; cursor: pointer;
}

/* Fehlermeldungen / error states (Drupal) */
.op-table-pricing .form-item--error input,
.op-table-pricing .form-item--error select,
.op-table-pricing .form-item--error textarea {
  border-color: #c9252d;
  box-shadow: 0 0 0 3px rgba(201, 37, 45, .12);
}

.op-table-pricing .form-item .form-item--error-message,
.op-table-pricing .form-item .error {
  color: #c9252d; font-size: 13px; margin-top: 6px;
}

/* Preis-Zellen: tabellarische Ziffern für saubere Spalten */
.op-table-pricing .ac-col-price,
.op-table-pricing [id^="ac_price_"],
.op-table-pricing #ac_sum_month,
.op-table-pricing #ac_sum_once,
.op-table-pricing #ac_sum_month_gross,
.op-table-pricing #ac_sum_once_gross {
  font-variant-numeric: tabular-nums;
}

/* Buttons auseinanderziehen */
.form-actions {
  display: flex;
  justify-content: space-between;
}


/* 1) Doppelte Texte entfernen: evtl. vorhandene pseudo-buttons abschalten */
#ac-quote-wrap .ac-segment .form-type-radio::before,
#ac-quote-wrap .ac-segment .form-type-radio::after {
  content: none !important;
  display: none !important;
}

/* 2) Radios als „Pill Buttons“ nur über das Label stylen */
#ac-quote-wrap fieldset.ac-segment .fieldset-wrapper { display: flex; gap: 12px; align-items: center; }
#ac-quote-wrap .ac-segment .form-type-radio { position: relative; margin: 0; }

/* Radio selbst unsichtbar, aber zugänglich lassen */
#ac-quote-wrap .ac-segment .form-type-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

/* Das sichtbare „Pill“ ist das <label> */
#ac-quote-wrap .ac-segment .form-type-radio label.option {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid #cfd6df;
  border-radius: 999px;
  background: #fff;
  color: #1a1a1a;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

/* Checked-State */
#ac-quote-wrap .ac-segment .form-type-radio input[type="radio"]:checked + label.option {
  background: #f28e39;
  color: #fff;
  border-color: #f28e39;
}

/* Fokus sichtbar machen */
#ac-quote-wrap .ac-segment .form-type-radio input[type="radio"]:focus + label.option {
  outline: 2px solid #f28e39;
  outline-offset: 2px;
}


/* Mobile-Feinschliff */
@media (max-width: 900px) {
  .op-table-pricing .ac-row { flex-wrap: wrap; }
  .op-table-pricing .ac-col-field { width: 100%; }
  .op-table-pricing .ac-col-price { width: 50%; }
  .op-table-pricing .ac-headrow { display: none; } /* Kopfzeile ausblenden */
}
/* ==== Angebotskalkulator – mobile Darstellung ==== */
@media (max-width: 700px) {

  /* Kopfzeilen ausblenden */
  .op-table-pricing .ac-headrow {
    display: none;
  }

  /* Zeilen-Layout */
  .op-table-pricing .ac-row {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid #e6e6e6;
  }

  .op-table-pricing .ac-col-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
  }

  .op-table-pricing .ac-col-field {
    width: 100%;
    margin-bottom: 10px;
  }

  .op-table-pricing .ac-col-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 6px;
    font-size: 15px;
  }

  /* ================================
     Standard-Sektionen (alles außer Entgelte & Zusammenfassung)
     ================================ */
  .op-table-pricing .ac-section:not(.ac-section--fees):not(.ac-summary)
  .ac-row .ac-col-price:first-of-type::before {
    content: "Einzelpreis netto";
    font-weight: 500;
    color: #555;
  }

  .op-table-pricing .ac-section:not(.ac-section--fees):not(.ac-summary)
  .ac-row .ac-col-price:last-of-type::before {
    content: "Gesamtpreis netto";
    font-weight: 500;
    color: #555;
  }

  /* ================================
     Entgelte (nur Gesamtpreis anzeigen)
     ================================ */
  .op-table-pricing .ac-section--fees .ac-row .ac-col-price:first-of-type {
    display: none !important;
  }

  .op-table-pricing .ac-section--fees .ac-row .ac-col-price:last-of-type::before {
    content: "Gesamtpreis netto";
    font-weight: 500;
    color: #555;
  }

  /* ================================
     Zusammenfassung (eigene Labels)
     ================================ */
  /* Erste Preiszeile = monatlich */
  .op-table-pricing .ac-summary #edit-row-month .ac-col-price:first-of-type::before {
    content: "Ihre monatlichen Kosten";
    font-weight: 600;
    color: #333;
  }

  /* Zweite Preiszeile = einmalig */
  .op-table-pricing .ac-summary #edit-row-once .ac-col-price:first-of-type::before {
    content: "Ihre einmaligen Kosten";
    font-weight: 600;
    color: #333;
  }

  /* Rechte Spalte = inkl. MwSt. */
  .op-table-pricing .ac-summary .ac-col-price:last-of-type::before {
    content: "inkl. MwSt.";
    font-weight: 500;
    color: #555;
  }

  /* Tooltip etwas lockerer */
  .op-table-pricing .op-tooltip {
    margin-left: 6px;
    transform: translateY(1px);
  }
}

/* ==== Mobile Labels robust über Position (vom Zeilenende gezählt) ==== */
@media (max-width: 700px) {

  /* Kopfzeile mobil ausblenden */
  .op-table-pricing .ac-headrow { display: none; }

  /* Grundlayout für mobile Zeilen */
  .op-table-pricing .ac-row { display: block; padding: 12px 0; border-bottom: 1px solid #e6e6e6; }
  .op-table-pricing .ac-col-label { display:block; font-weight:600; margin-bottom:8px; }
  .op-table-pricing .ac-col-field { width:100%; margin-bottom:10px; }
  .op-table-pricing .ac-col-price {
    display:flex; justify-content:space-between; align-items:center;
    width:100%; margin-bottom:6px; font-size:15px;
  }

  /* 1) Standard-Sektionen: beide Spalten beschriften */
  .op-table-pricing .ac-section:not(.ac-section--fees):not(.ac-summary) 
  .ac-row > .ac-col-price:nth-last-child(2)::before {
    content: "Einzelpreis netto";
    font-weight: 500; color:#555;
  }
  .op-table-pricing .ac-section:not(.ac-section--fees):not(.ac-summary) 
  .ac-row > .ac-col-price:last-child::before {
    content: "Gesamtpreis netto";
    font-weight: 500; color:#555;
  }

  /* 2) Entgelte: nur Gesamtpreis zeigen (Einzelpreis-Spalte ausblenden) */
  .op-table-pricing .ac-section--fees .ac-row > .ac-col-price:nth-last-child(2) {
    display: none !important;
  }
  .op-table-pricing .ac-section--fees .ac-row > .ac-col-price:last-child::before {
    content: "Gesamtpreis netto";
    font-weight: 500; color:#555;
  }

  /* 3) Zusammenfassung: eigene Texte */
  .op-table-pricing .ac-summary #edit-row-month > .ac-col-price:nth-last-child(2)::before {
    content: "Ihre monatlichen Kosten";
    font-weight: 600; color:#333;
  }
  .op-table-pricing .ac-summary #edit-row-once  > .ac-col-price:nth-last-child(2)::before {
    content: "Ihre einmaligen Kosten";
    font-weight: 600; color:#333;
  }
  .op-table-pricing .ac-summary .ac-row > .ac-col-price:last-child::before {
    content: "inkl. MwSt.";
    font-weight: 500; color:#555;
  }

  /* Tooltips leicht versetzen */
  .op-table-pricing .op-tooltip { margin-left:6px; transform:translateY(1px); }
}

@media (max-width: 700px) {
  /* Preise: Text und Euro-Zeichen nebeneinander, rechts ausgerichtet */
  .op-table-pricing .ac-col-price {
    display: flex;
    justify-content: flex-end;   /* alles rechtsbündig */
    align-items: center;
    gap: 4px;                    /* kleiner Abstand zwischen Zahl und € */
    width: 100%;
    margin-bottom: 6px;
    font-size: 15px;
    text-align: right;
  }

  /* Label vor den Preisen bleibt links stehen */
  .op-table-pricing .ac-col-price::before {
    margin-right: auto;
    text-align: left;
  }
}