.pk-ui {
  --pk-radius: 12px;
  --pk-border: #e5e7eb;
  --pk-muted: #6b7280;
  --pk-bg: #f8fafc;
  --pk-card: #ffffff;
  --pk-accent: #2563eb; /* <- CI-Farbe hier anpassen */
  --pk-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  --pk-gap: 12px;
  --pk-spacing: 16px;
  --pk-font-lg: 1.1rem;
  --pk-font-xl: 1.35rem;
}

  /* Überschriften etwas präsenter */
  .pk-ui h3,
  .pk-ui h4 {
    margin: 0 0 10px;
    line-height: 1.25;
  }
  .pk-ui h3 {
    font-weight: 800;
    font-size: 1.4rem;
  }
  .pk-ui h4 {
    font-weight: 700;
    font-size: 1.5rem;
    color: #111827;
  }
  .pk-ui h2 {
    font-weight: 900;
    font-size: 2.5rem;
    display: inline-flex;
    align-items: center;
  }

  /* Sektionen optisch zusammenfassen (z. B. Grunddaten, Optionen, Ergebnisse) */
  .pk-ui .pk-group {
    background: var(--pk-bg);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-radius);
    padding: var(--pk-spacing);
    margin: 0 0 calc(var(--pk-spacing) + 6px);
  }
  
  #ctrl_85 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    border: none;
    padding-inline: 0;
    margin-bottom: 0;
  }
  
  #ctrl_178 {
    padding: 0 10px;
    width: 100%;
    font-size: 0.93333em;
  }
  
  
  #buy {
    background: var(--primary);
    color: #fff;
  }
  
  #buy:hover {
    color: #fff !important;
  }

  /* Gesamter Ergebnis-Wrapper (optisch als "Blase") */
  .pk-results-wrapper {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    margin: 0 auto; /* zentrieren */
  }

  /* Untergruppen-Überschriften */
  .pk-subgroup {
    margin-bottom: 20px;
  }
  .pk-subgroup > h5 {
    margin: 0 0 12px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #111827;
  }

  /*  Das Grid NUR für die Karten (2 Spalten auf Desktop) */
  .pk-subgroup > .pk-results {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
    gap: 16px !important;
  }

  /* Manche Themes zwingen Breiten – neutralisieren */
  .pk-subgroup > .pk-results > .pk-card {
    width: auto !important;
    max-width: none !important;
  }

  @media (max-width: 760px) {
    .pk-subgroup > .pk-results {
      grid-template-columns: 1fr !important;
    }
  }

  /* Optik der Karten  */
  .pk-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  }
  .pk-card-title {
    font-size: 0.95rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
  }
  .pk-value {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.2px;
  }

  .pk-note {
    margin-top: 0.45rem;
    color: #6b7280;
    font-size: 0.85rem;
  }

  .pk-ui .pk-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: var(--pk-gap) calc(var(--pk-gap) + 6px);
  }
  @media (max-width: 760px) {
    .pk-ui .pk-grid {
      grid-template-columns: 1fr;
    }
  }

  /* Formfelder weicher */
  .inputField input,
  .pk-ui #ctrl_85 span {
    border: 1px solid var(--pk-border);
    border-radius: 10px;
    background: #fff;
    padding: 0.65rem 0.8rem;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
    transition:
      border-color 0.2s,
      box-shadow 0.2s;
  }
  

  .inputField:focus,
  .pk-ui select:focus {
    outline: 2px solid rgba(37, 99, 235, 0.18);
    border-color: var(--pk-accent) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  }

  /* Checkbox-Optionen als Chips/Karten */
  .pk-ui .pk-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: var(--pk-gap) calc(var(--pk-gap) + 6px);
    padding-bottom: 1em;
  }

  /* Mobile (< 769px): 1 Spalte */
  @media (max-width: 768px) {
    .pk-ui .pk-options {
      grid-template-columns: 1fr;
    }
  }

  .pk-ui .pk-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #fff;
    border: 1px solid var(--pk-border);
    border-radius: 10px;
    padding: 0.55rem 0.8rem;
    cursor: pointer;
    transition:
      border-color 0.2s,
      box-shadow 0.2s,
      transform 0.04s;
  }
  .pk-ui .pk-option:has(input:checked) {
    border-color: var(--pk-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  }
  .pk-ui .pk-option:hover {
    border-color: #cbd5e1;
  }
  .pk-ui .pk-option:active {
    transform: translateY(1px);
  }

  /* Ergebnis-Karten (Gesamt, Devicemanagement, HW-Preis, …) */
  .pk-ui .pk-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: calc(var(--pk-gap) + 4px);
    margin-top: 10px;
  }
  @media (max-width: 760px) {
    .pk-ui .pk-results {
      grid-template-columns: 1fr;
    }
  }
  .pk-ui .pk-card {
    background: var(--pk-card);
    border: 1px solid var(--pk-border);
    border-radius: 12px;
    padding: 14px;
    box-shadow: var(--pk-shadow);
  }
  .pk-ui .pk-card-title {
    font-size: 1.2rem;
    color: var(--pk-muted);
    margin-bottom: 0.25rem;
  }
  .pk-ui .pk-value {
    font-size: var(--pk-font-xl);
    font-weight: 800;
    letter-spacing: 0.2px;
  }
  .pk-ui .pk-note {
    margin-top: 0.45rem;
    color: var(--pk-muted);
    font-size: 0.85rem;
  }

  .pk-ui .pk-sep {
    height: 1px;
    background: var(--pk-border);
    margin: 0.75rem 0;
  }

  /* Hilfetexte unter Inputs */
  .pk-ui .pk-help {
    font-size: 0.85rem;
    color: var(--pk-muted);
  }

  /* Tabellen-/Listen-Ausgaben  konsistenter */
  .pk-ui ul {
    padding-left: 1.1rem;
    margin: 0.25rem 0 0;
  }
  .pk-ui li {
    margin: 0.15rem 0;
  }
  
  .pk-ui .pk-grid input[type="text"], .pk-ui .pk-grid input[type="number"], .pk-ui .pk-grid input[type="email"] {
    height: 36px; /* entspricht pk-option */
    font-size: 1.2rem; /* Zahl besser lesbar */
    font-weight: 600;
    padding: 0 0.8rem; /* identisch zu Checkboxen */
    line-height: 48px;
    width: 100%;
  }
  
  .pk-ui .typeButton {
    height: 18vh;
  }

  @media (max-width: 760px) {
    .pk-ui .preisrechner {
      padding: 16px;
    }
  }

  .pk-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* zwei Spalten */
    gap: 16px; /* Abstand zwischen Name und Email */
    margin-bottom: 16px;
  }

  /* Rundes Feld wie Name */
  #customeremail {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Responsive: Bei kleinen Bildschirmen untereinander */
  @media (max-width: 760px) {
    .pk-grid-two-columns {
      grid-template-columns: 1fr;
    }
  }
  .input-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  #emailError,
  #nameError {
    display: none;
  }

  .error-message {
    color: red;
    font-size: 0.7em;
    margin-top: 10px;
    padding-inline: 0.8rem;
  }
  
  @media (max-width: 400px) {
    #private-btn, #business-btn {
      width: 100%;
    }
  }