/* ============================================
   MKPI PREISRECHNER – Komponenten-Styles
   Alle Werte referenzieren Design-Tokens aus mkpi-design.css.
   Keine hartcodierten Farben, Schriftgroessen oder Abstaende.
   ============================================ */


/* ---- Section-Hintergrund mit Ambient Glow ---- */

.preisrechner-section {
  background:
    radial-gradient(
      ellipse 100% 100% at 50% 100%,
      rgba(0, 114, 227, 0.25) 0%,
      rgba(0, 150, 190, 0.15) 20%,
      rgba(0, 180, 160, 0.08) 40%,
      rgba(0, 114, 227, 0.03) 65%,
      transparent 90%
    ),
    var(--mkpi-bg-dark) !important;
}


/* ---- Subline-Aufwertung ---- */

.preisrechner-subline {
  color: var(--mkpi-text-primary-dark) !important;
  font-weight: var(--mkpi-weight-medium) !important;
  opacity: 0.85;
}


/* ---- Standform-Karten Grid ---- */

.preisrechner-standformen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-l);
  max-width: var(--mkpi-content-width);
  margin: 0 auto var(--mkpi-section-gap);
}

.preisrechner-step-hint {
  font-size: var(--mkpi-text-body) !important;
  font-weight: var(--mkpi-weight-medium) !important;
  color: var(--mkpi-text-secondary-dark) !important;
  margin-bottom: var(--space-m) !important;
  max-width: none !important;
  text-align: center;
}

.preisrechner-standform-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-l) var(--space-m);
  aspect-ratio: 1 / 1;
  background: var(--mkpi-bg-darker) center / 90% no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--mkpi-radius-lg);
  cursor: pointer;
  transition: all var(--mkpi-transition-base);
  outline: none;
  -webkit-user-select: none;
  user-select: none;
}


.preisrechner-standform-card:hover {
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.preisrechner-standform-card:focus-visible {
  outline: 2px solid var(--mkpi-accent);
  outline-offset: 3px;
}

.preisrechner-standform-card[aria-checked="true"] {
  border-color: var(--mkpi-accent);
  box-shadow: 0 0 0 1px var(--mkpi-accent),
              0 4px 16px rgba(0, 114, 227, 0.25);
}

/* Light-Section Variante */
.section-light .preisrechner-standform-card {
  background: var(--mkpi-bg-secondary);
  border-color: var(--mkpi-border-light);
}

.section-light .preisrechner-standform-card:hover {
  background: var(--mkpi-bg-primary);
  border-color: var(--mkpi-text-tertiary);
  box-shadow: var(--mkpi-card-shadow);
}

.section-light .preisrechner-standform-card[aria-checked="true"] {
  background: var(--mkpi-bg-primary);
  border-color: var(--mkpi-accent);
  box-shadow: 0 0 0 1px var(--mkpi-accent),
              var(--mkpi-card-shadow-hover);
}

/* Gray-Section Variante */
.section-gray .preisrechner-standform-card {
  background: var(--mkpi-bg-primary);
  border-color: var(--mkpi-border-light);
}

.section-gray .preisrechner-standform-card:hover {
  border-color: var(--mkpi-text-tertiary);
  box-shadow: var(--mkpi-card-shadow);
}

.section-gray .preisrechner-standform-card[aria-checked="true"] {
  border-color: var(--mkpi-accent);
  box-shadow: 0 0 0 1px var(--mkpi-accent),
              var(--mkpi-card-shadow-hover);
}


.preisrechner-standform-card[data-standform="reihenstand"] {
  background-image: url('/images/preisrechner/reihenstand.png');
}

.preisrechner-standform-card[data-standform="eckstand"] {
  background-image: url('/images/preisrechner/eckstand.png');
}

.preisrechner-standform-card[data-standform="kopfstand"] {
  background-image: url('/images/preisrechner/kopfstand.png');
}

.preisrechner-standform-card[data-standform="inselstand"] {
  background-image: url('/images/preisrechner/inselstand.png');
}


/* ---- Standform-Label & Info ---- */

.preisrechner-standform-label {
  font-size: var(--mkpi-text-body);
  font-weight: var(--mkpi-weight-bold);
  line-height: 1.3;
  text-align: center;
  color: var(--mkpi-text-secondary-dark);
}

.preisrechner-standform-info {
  font-size: var(--mkpi-text-small);
  font-weight: var(--mkpi-weight-regular);
  text-align: center;
  color: var(--mkpi-text-secondary-dark);
}


/* ---- Abmessungen (Dropdowns) ---- */

.preisrechner-abmessungen {
  max-width: var(--mkpi-content-medium);
  margin: 0 auto;
  animation: preisrechnerFadeIn var(--mkpi-transition-slow) ease-out;
}

.preisrechner-label {
  display: block;
  font-size: var(--mkpi-text-small);
  font-weight: var(--mkpi-weight-medium);
  margin-bottom: var(--space-s);
}

.preisrechner-select {
  display: block;
  width: 100%;
  padding: var(--mkpi-btn-s-py) var(--space-m);
  font-size: var(--mkpi-text-body);
  font-weight: var(--mkpi-weight-regular);
  font-family: var(--mkpi-font);
  line-height: 1.5;
  color: var(--mkpi-text-primary);
  background-color: var(--mkpi-bg-primary);
  border: 1.5px solid var(--mkpi-border-light);
  border-radius: var(--mkpi-radius-md);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236E6E73'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-m) center;
  background-size: 14px;
  padding-right: var(--space-xl);
  transition: border-color var(--mkpi-transition-fast);
  min-height: var(--mkpi-btn-s-height);
  cursor: pointer;
}

.preisrechner-select:focus {
  border-color: var(--mkpi-accent);
  outline: 2px solid var(--mkpi-accent);
  outline-offset: -1px;
}

/* Selects auf dunklem Hintergrund */
.section-dark .preisrechner-select {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--mkpi-text-primary-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23A1A1A6'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

.section-dark .preisrechner-select:focus {
  border-color: var(--mkpi-accent);
}



/* ---- Ergebnis-Box ---- */

.preisrechner-ergebnis {
  max-width: var(--mkpi-content-medium);
  margin: 0 auto;
  animation: preisrechnerSlideUp 400ms ease-out;
}

.preisrechner-ergebnis-inner {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--mkpi-radius-xl);
  padding: var(--space-xxl) var(--space-xl);
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.section-light .preisrechner-ergebnis-inner {
  background: var(--mkpi-bg-secondary);
  border-color: var(--mkpi-border-light);
  backdrop-filter: none;
}

.section-gray .preisrechner-ergebnis-inner {
  background: var(--mkpi-bg-primary);
  border-color: var(--mkpi-border-light);
  box-shadow: var(--mkpi-card-shadow);
  backdrop-filter: none;
}

.preisrechner-ergebnis-titel {
  font-size: var(--mkpi-text-h4) !important;
  font-weight: var(--mkpi-weight-semibold) !important;
  margin-bottom: var(--space-s) !important;
}

.preisrechner-ergebnis-config {
  font-size: var(--mkpi-text-body) !important;
  font-weight: var(--mkpi-weight-regular) !important;
  opacity: 0.85;
  margin-bottom: var(--space-xl) !important;
  max-width: none !important;
}

.preisrechner-ergebnis-preis {
  font-size: var(--mkpi-text-h1);
  font-weight: var(--mkpi-weight-bold);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-xl);
  background: var(--mkpi-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* ---- Leistungen-Checkliste ---- */

.preisrechner-leistungen {
  text-align: left;
  max-width: 480px;
  margin: 0 auto var(--space-xl);
}

.preisrechner-leistungen-titel {
  font-size: var(--mkpi-text-body) !important;
  font-weight: var(--mkpi-weight-semibold) !important;
  margin-bottom: var(--space-m) !important;
  max-width: none !important;
  text-align: left !important;
  margin-left: 0 !important;
}

.preisrechner-leistungen-liste {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.preisrechner-leistungen-liste li {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--space-s) !important;
  padding: var(--space-xs) 0 !important;
  margin: 0 !important;
  font-size: var(--mkpi-text-small) !important;
  line-height: 1.5 !important;
}

.preisrechner-leistungen-liste li i {
  color: var(--mkpi-success);
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.section-dark .preisrechner-leistungen-liste li {
  color: var(--mkpi-text-primary-dark) !important;
  opacity: 0.85;
}


/* ---- Inselstand-Hinweis ---- */

.preisrechner-insel-hinweis {
  max-width: 480px;
  margin: 0 auto var(--space-xl);
  text-align: left;
}

.preisrechner-insel-hinweis p {
  font-size: var(--mkpi-text-small) !important;
  line-height: 1.6 !important;
  opacity: 0.8;
  margin: 0 !important;
  max-width: none !important;
}


/* ---- Berlin-Konditionen Hinweis (Standard-Seite) – direkt unter Inklusive ---- */
/* Hierarchie-Stufe 6: gleiche Ebene wie Leistungen-Liste (text-small) */

.price-calculator-note {
  max-width: 480px !important;
  margin: 0 auto var(--space-xl) !important;
  padding: var(--space-m) var(--space-l) !important;
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 0 var(--mkpi-radius-sm) var(--mkpi-radius-sm) 0;
  text-align: left;
}

.price-calculator-note p {
  margin: 0 !important;
  font-size: var(--mkpi-text-small) !important;
  line-height: 1.5 !important;
  font-weight: var(--mkpi-weight-regular) !important;
  color: var(--mkpi-text-primary-dark) !important;
  opacity: 0.85;
}

.price-calculator-note strong {
  font-size: var(--mkpi-text-small) !important;
  font-weight: var(--mkpi-weight-semibold) !important;
  color: var(--mkpi-text-primary-dark) !important;
}

.preisrechner-cta {
  text-align: center;
  margin-bottom: var(--space-xl) !important;
}

.preisrechner-disclaimer {
  font-size: var(--mkpi-text-caption) !important;
  line-height: 1.5 !important;
  opacity: 0.85;
  max-width: 480px !important;
  margin: 0 auto !important;
}

.section-dark .preisrechner-disclaimer {
  color: var(--mkpi-text-secondary-dark) !important;
}


/* ---- Modal-Styles ---- */

.preisrechner-modal-summary {
  background: var(--mkpi-bg-secondary);
  border-radius: var(--mkpi-radius-md);
  padding: var(--space-l);
  margin-bottom: var(--space-xl);
  font-size: var(--mkpi-text-small);
  line-height: 1.5;
}

.preisrechner-modal-summary strong {
  font-weight: var(--mkpi-weight-semibold);
}


/* ---- Animationen ---- */

@keyframes preisrechnerFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes preisrechnerSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ---- Responsive ---- */

@media (max-width: 991px) {
  .preisrechner-standformen {
    grid-template-columns: repeat(2, 1fr);
  }

  .preisrechner-ergebnis-inner {
    padding: var(--space-xl) var(--space-l);
  }
}

@media (max-width: 575px) {
  .preisrechner-standformen {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-m);
  }

  .preisrechner-standform-card {
    padding: var(--space-l) var(--space-m);
  }

  .preisrechner-ergebnis-preis {
    font-size: var(--mkpi-text-h2);
  }

  .preisrechner-ergebnis-inner {
    padding: var(--space-xl) var(--space-m);
    border-radius: var(--mkpi-radius-lg);
  }
}