/** Shopify CDN: Minification failed

Line 82:0 All "@import" rules must come first
Line 99:14 Expected identifier but found whitespace
Line 99:16 Unexpected "{"
Line 99:26 Expected ":"
Line 99:68 Expected identifier but found ","

**/


/* CSS from section stylesheet tags */
/* --- Custom Announcement Bar Styles --- */
.custom-announcement-bar-wrapper {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 12px 25px;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
}
.announcement-bar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.announcement-bar-left a,
.announcement-bar-left span {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.announcement-bar-left svg {
  height: 16px;
  width: 16px;
  flex-shrink: 0;
}
.announcement-bar-right .beratung-button {
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  padding: 8px 16px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}
.announcement-bar-right .beratung-button:hover {
  opacity: 0.85;
}
[data-position="left"] {
  grid-column: 1;
  justify-self: start;
}
[data-position="center"] {
  grid-column: 2;
  justify-self: center;
}
[data-position="right"] {
  grid-column: 3;
  justify-self: end;
}
@media (max-width: 768px) {
  .custom-announcement-bar-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 10px;
  }
  .announcement-bar-left,
  .announcement-bar-right {
    grid-column: auto;
    justify-self: auto;
  }
}
/* Using CSS variables defined inline based on section settings */
/* Font Import bleibt, falls Inter nicht die Theme-Schrift ist */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* Globaler Body Font für alle Textelemente, wo keine spezielle Schrift gesetzt ist */
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--color-background-light);
}

.page-wrapper {
  max-width: 960px;
  margin: 0 auto;
}

/* Anpassung der Hauptüberschrift an die System-Schriftart */
.exclusive-text {
  text-align: center;
  /* Verwendung der globalen Theme-Schriftart für Überschriften */
  font-family: {{ settings.heading_font.family | default: 'Inter' }}, sans-serif;
}

/* NEU: CSS Grid für gleichmäßige Kachelbreite */
.pricing-container {
  display: grid;
  /* Erzeugt gleich breite Spalten, die mindestens 280px breit sind, bevor sie in eine Reihe umbrechen */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  justify-content: center;
  width: 100%;
}

.pricing-plan {
  background-color: var(--color-white);
  /* min-width entfernt, da Grid die Breite steuert */
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
  /* Gap wird vom Grid gesteuert, nicht vom Plan */
}

@media (max-width: 768px) {
  .pricing-container {
    /* Bei kleinen Bildschirmen eine Spalte */
    grid-template-columns: 1fr;
    /* Zentrieren ist bei 1fr nicht nötig, aber schadet nicht */
    align-items: center;
  }
  .pricing-plan {
    width: 100%; /* Füllt die Spalte aus */
  }
}

.popular-badge {
  position: absolute;
  top: 18px;
  right: -33px;
  background-color: var(--color-accent-blue);
  color: var(--color-white);
  padding: 6px 30px;
  transform: rotate(45deg);
}

.plan-header h2 {
  margin: 0 0 8px 0; /* 0.5rem -> 8px */
  color: var(--color-primary-dark);
}

.plan-header p {
  color: var(--color-text-dark);
  min-height: 60px;
  margin: 0;
}

.plan-price .price {
  font-weight: 700;
  color: var(--color-primary-dark);
  display: inline-flex;
  align-items: baseline;
  gap: 20px; /* 1.25rem -> 20px */
}

.original-price {
  font-weight: 400;
  text-decoration: line-through;
  color: var(--color-strikethrough);
}

.price .price-for-customer {
  display: inline-flex;
  align-items: baseline;
  gap: 20px; /* 1.25rem -> 20px */
}

.plan-price .period, .plan-price .ab-text {
  color: var(--color-text-dark);
}

.cta-button {
  width: 100%;
  padding: 16px; /* 1rem -> 16px */
  border-radius: 8px;
  font-size: 18pt; /* 1.1rem -> 18pt (ca.) */
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cta-button.primary {
  background-color: var(--color-accent-orange);
  color: var(--color-white);
  border: 2px solid var(--color-accent-orange);
}

.cta-button.secondary {
  background-color: var(--color-white);
  color: var(--color-accent-orange);
  border: 2px solid var(--color-accent-orange);
}

.plan-note {
  color: var(--color-text-dark);
  text-align: center;
  margin-top: 12px; /* 0.75rem -> 12px */
}

.features {
  list-style: none;
  padding: 0;
  margin-top: 32px; /* 2rem -> 32px */
  flex-grow: 1;
}

.features h3 {
  margin-bottom: 16px; /* 1rem -> 16px */
  color: var(--color-primary-dark);
}

.features li {
  margin-bottom: 12px; /* 0.75rem -> 12px */
  color: var(--color-text-dark);
  display: flex;
  align-items: center;
}

.features li::before {
  content: '✓';
  color: var(--color-success-check);
  font-weight: 700;
  margin-right: 12px; /* 0.75rem -> 12px */
  font-size: 20pt; /* 1.2rem -> 20pt (ca.) */
}