/***********************************************
 * CUSTOM.CSS
 *
 * Diese Datei ist für Administratoren,
 * Entwickler und Inhaltspfleger gedacht.
 *
 * Hier können Styles überschrieben oder ergänzt
 * werden, ohne den Core zu verändern.
 *
 * Alle verfügbaren Variablen sind unten als
 * Kommentar aufgeführt. Einfach auskommentieren
 * und überschreiben.
 ***********************************************/


/* ---------------------------------------------
   DESIGN-TOKENS (Überschreibbar)
   Einfach auskommentieren und anpassen.
---------------------------------------------- */

/*
:root {
  --ms-font-base: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --ms-font-size-base: 1rem;
  --ms-line-height-base: 1.6;

  --ms-color-bg: #ffffff;
  --ms-color-text: #111111;
  --ms-color-accent: #0066cc;
  --ms-color-border: #dddddd;

  --ms-radius: .5rem;

  --ms-spacing-xs: .25rem;
  --ms-spacing-s: .5rem;
  --ms-spacing-m: 1rem;
  --ms-spacing-l: 2rem;
  --ms-spacing-xl: 3rem;

  --ms-shadow-soft: 0 4px 12px rgba(0,0,0,0.08);
  --ms-shadow-medium: 0 6px 20px rgba(0,0,0,0.12);
}
*/


/* ---------------------------------------------
   DARK-MODE OVERRIDES (Optional)
   Diese überschreiben theme-dark.css.
---------------------------------------------- */

/*
body.dark {
  --ms-color-bg: #111111;
  --ms-color-text: #eeeeee;
  --ms-color-accent: #4da3ff;
  --ms-color-border: #333333;
}
*/


/* ---------------------------------------------
   BEISPIELE FÜR EIGENE ANPASSUNGEN
---------------------------------------------- */

/* Beispiel: Abstand anpassen */
/*
.my-special-section {
  margin-top: 3rem;
}
*/

/* Beispiel: Farbe überschreiben */
/*
:root {
  --ms-color-accent: #ff6600;
}
*/

/* Beispiel: Element verstecken */
/*
.hide-this {
  display: none !important;
}
*/

/* Beispiel: Landingpage-Sonderlösung */
/*
.landingpage .hero {
  padding-top: 6rem;
}
*/


/* -------------------------------------------------- */
/* Debug Box                                          */
/* -------------------------------------------------- */

.ms-debug {
  margin: var(--ms-space-6) 0;
  padding: var(--ms-space-5);
  background: var(--ms-debug-bg);
  color: var(--ms-debug-text);
  border: 1px solid var(--ms-debug-border);
  border-radius: var(--ms-radius);
  font-family: var(--ms-font-mono);
  font-size: var(--ms-font-size-sm);
  line-height: var(--ms-line-normal);
}

.ms-debug strong {
  font-weight: var(--ms-fw-bold);
}

.ms-debug code {
  display: inline-block;
  padding: 0.15rem 0.35rem;
  background: var(--ms-bg-light-2);
  border-radius: var(--ms-radius-sm);
  font-size: 0.85em;
}

/* -------------------------------------------------- */
/* Helper: Sichtbarkeit                               */
/* -------------------------------------------------- */


.is-visible {
  display: block !important;
}

/* -------------------------------------------------- */
/* Helper: Textausrichtung                            */
/* -------------------------------------------------- */

.text-left   { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }

/* -------------------------------------------------- */
/* Helper: Abstände                                   */
/* -------------------------------------------------- */

.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }

.mt-s { margin-top: var(--ms-space-3) !important; }
.mb-s { margin-bottom: var(--ms-space-3) !important; }

.mt-m { margin-top: var(--ms-space-5) !important; }
.mb-m { margin-bottom: var(--ms-space-5) !important; }

.mt-l { margin-top: var(--ms-space-7) !important; }
.mb-l { margin-bottom: var(--ms-space-7) !important; }

/* -------------------------------------------------- */
/* Helper: Breiten                                    */
/* -------------------------------------------------- */

.w-100 { width: 100% !important; }
.max-w-content { max-width: 75ch; }

/* -------------------------------------------------- */
/* Helper: Karten-Reset                               */
/* -------------------------------------------------- */

.no-card {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* -------------------------------------------------- */
/* Print Overrides                                    */
/* -------------------------------------------------- */

@media print {
  body {
    background: var(--ms-white);
    color: var(--ms-black);
  }

  .ms-header,
  .ms-footer,
  .ms-sidebar-left,
  .ms-sidebar-right,
  .ms-back-to-top {
    display: none !important;
  }

  a {
    color: var(--ms-black);
    text-decoration: underline;
  }
}

/* ========================================================================== */
/* 8) PRICE CARDS                                                             */
/* ========================================================================== */

.ms-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ms-space-6);
  margin: var(--ms-section-gap) 0;
}

.ms-price-card {
  background: var(--ms-card-bg);
  border: var(--ms-border);
  border-radius: var(--ms-radius);
  padding: var(--ms-space-6);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;

  &:hover {
    transform: translateY(-8px);
    border-color: var(--ms-primary);
    box-shadow: 0 15px 30px var(--ms-shadow-medium);
  }

  &.featured::before {
    content: "Beliebt";
    position: absolute;
    top: var(--ms-space-4);
    right: -2rem;
    background: var(--ms-primary);
    color: var(--ms-white);
    padding: 0.25rem 2.5rem;
    transform: rotate(45deg);
    font-size: var(--ms-font-size-xs);
    font-weight: var(--ms-fw-bold);
  }

  h3 {
    margin-top: 0;
    color: var(--ms-dark);
    font-size: var(--ms-font-size-xl);
    border-bottom: 2px solid var(--ms-primary);
    display: inline-block;
    width: fit-content;
    margin-bottom: var(--ms-space-5);
  }

  .price-value {
    font-size: 2.5rem;
    font-weight: var(--ms-fw-black);
    color: var(--ms-dark);
    margin-bottom: var(--ms-space-5);

    span {
      font-size: var(--ms-font-size-base);
      font-weight: var(--ms-fw-normal);
      color: var(--ms-text);
    }
  }

  ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--ms-space-6) 0;
    flex-grow: 1;

    li {
      padding: var(--ms-space-2) 0;
      display: flex;
      align-items: center;
      gap: var(--ms-space-3);
      font-size: 0.95rem;

      &::before {
        content: "✓";
        color: var(--ms-primary);
        font-weight: var(--ms-fw-bold);
      }
    }
  }

  .ms-button {
    width: 100%;
    justify-content: center;
  }
}