/* =========================================================
   Smith Visuals — Paket-Modal
   Bildschirmfuellendes Overlay mit geblurtem Hintergrund, zeigt die
   Content-Pakete (Basic/Pro/Premium + Foto-Add-on) als scrollbare
   Karten-Uebersicht. Wird von den "Pakete"-Buttons in der Services-
   Section geoeffnet (js/paket-modal.js).
   ========================================================= */

.paket-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-soft);
}

.paket-modal[data-open] {
  opacity: 1;
  pointer-events: auto;
}

.paket-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 9, 0.6);
  border: none;
  cursor: pointer;
}

.paket-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 68rem);
  max-height: min(90vh, 52rem);
  overflow-y: auto;
  background: var(--c-bg);
  color: var(--c-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  transform: translateY(16px) scale(0.98);
  transition: transform var(--dur-base) var(--ease-soft);
  /* Dunkler Scrollbar-Track statt des globalen weissen (base.css) --
     das Modal selbst ist dunkel, ein weisser Track wuerde hier hart
     herausstechen. */
  scrollbar-color: rgba(161, 25, 25, 0.45) var(--c-bg-elevated);
}

.paket-modal__panel::-webkit-scrollbar-track {
  background: var(--c-bg-elevated);
}

.paket-modal[data-open] .paket-modal__panel {
  transform: translateY(0) scale(1);
}

.paket-modal__close {
  /* sticky statt absolute: .paket-modal__panel ist selbst der scrollende
     Container (overflow-y:auto) -- ein absolut positioniertes Kind scrollt
     mit dem Inhalt mit und verschwindet nach oben aus dem Sichtbereich.
     sticky haelt den Button oben im sichtbaren Bereich, waehrend man durch
     die Pakete scrollt. "display: flex" macht die Box block-level, damit
     "margin-left: auto" sie an den rechten Rand schiebt (ersetzt die
     vorherige absolute right-Positionierung). */
  position: sticky;
  top: var(--space-3);
  margin-left: auto;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--c-border-hair);
  background: var(--c-bg);
  color: var(--c-white);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-soft);
}

.paket-modal__close:hover,
.paket-modal__close:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}

.paket-modal__header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.paket-modal__title {
  color: var(--c-white);
}

/* ---------- "Warum Smith Visuals" ---------- */
.paket-modal__why {
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background: var(--c-bg-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border-hair);
}

.paket-modal__why-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  color: var(--c-white);
  margin-bottom: var(--space-3);
}

.paket-modal__why-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.paket-modal__why-list li {
  position: relative;
  padding-left: 1.6em;
  font-size: var(--fs-body-sm);
  color: var(--c-text-dim);
  line-height: var(--lh-body);
}

.paket-modal__why-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-accent-on-dark);
  font-weight: 700;
}

/* ---------- Paket-Karten ---------- */
.paket-modal__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  overflow-y: auto;
}

@media (min-width: 60rem) {
  .paket-modal__cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.paket-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-card-pad);
  background: var(--c-bg-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border-hair);
}

.paket-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  color: var(--c-white);
}

.paket-card__tagline {
  margin-top: calc(var(--space-3) * -1);
  font-weight: 700;
  font-size: var(--fs-body-sm);
  color: var(--c-accent-on-dark);
}

.paket-card__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.paket-card__list li {
  position: relative;
  padding-left: 1.1em;
  font-size: var(--fs-body-sm);
  color: var(--c-text-dim);
  line-height: var(--lh-body);
}

.paket-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-accent);
}

.paket-card__note {
  font-size: var(--fs-body-xs);
  font-style: italic;
  color: var(--c-text-dim);
}

.paket-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border: none;
  border-radius: var(--radius-xs);
  background: var(--c-accent);
  color: var(--c-white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-label-btn);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-soft);
}

.paket-card__cta:hover,
.paket-card__cta:focus-visible {
  background: var(--c-accent-hover);
}

/* ---------- Foto-Add-on (kein eigener Tarif, sondern Zusatzbuchung) --------
   Jetzt kompakt innerhalb jeder Paket-Card statt als einzelner, geteilter
   Block am Ende -- passt zur "Add-on in jeder Innenansicht"-Anforderung. */
.paket-card__addon {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: transparent;
  border: 1px dashed var(--c-border-hair);
  border-radius: var(--radius-xs);
}

.paket-card__addon-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--c-white);
}

.paket-card__addon-text {
  font-size: var(--fs-body-xs);
  color: var(--c-text-dim);
  line-height: var(--lh-body);
}

.paket-card__addon--included {
  border-style: solid;
  border-color: var(--c-accent);
}

.paket-modal__footer {
  margin-top: var(--space-5);
  text-align: center;
  font-size: var(--fs-body-sm);
  color: var(--c-text-dim);
}

/* Blur auf den Rest der Seite, waehrend das Modal offen ist. */
body.paket-modal-open #main-content {
  filter: blur(8px);
  transition: filter var(--dur-base) var(--ease-soft);
}

body.paket-modal-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .paket-modal,
  .paket-modal__panel,
  body.paket-modal-open #main-content {
    transition: none;
  }
}