/** Shopify CDN: Minification failed

Line 19:0 Unexpected "<"
Line 22:19 Expected identifier but found whitespace
Line 22:21 Unexpected "{"
Line 22:30 Expected ":"
Line 23:8 Expected identifier but found whitespace
Line 23:10 Unexpected "{"
Line 23:19 Expected ":"
Line 24:12 Expected identifier but found whitespace
Line 24:14 Unexpected "{"
Line 24:23 Expected ":"
... and 22 more hidden warnings

**/


/* CSS from section stylesheet tags */
<style>

  .countdown-timer {
  background-color: {{ section.settings.background_color }};
  color: {{ section.settings.text_color }};
  font-size: {{ section.settings.font_size }}px;
  text-align: {{ section.settings.text_alignment }};
  margin-left: {{ section.settings.margin_sides }}px;
  margin-right: {{ section.settings.margin_sides }}px;
  padding-top: {{ section.settings.padding_top }}px;
  padding-bottom: {{ section.settings.padding_bottom }}px;
  border-radius: 5px;
  max-width: 600px;
  margin: 0 auto; /* Zentriert den Countdown */
}

.countdown-timer .countdown-header-and-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px; /* Abstand zwischen Header und Countdown */
  font-weight: 900; /* Header fett machen */
}

.countdown-timer #countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px; /* Abstand zwischen den Zeitboxen */
}

.countdown-timer .time-container {
  display: flex;
  flex-direction: column; /* Zahlen und Beschriftungen untereinander */
  align-items: center;
}

.countdown-timer .time {
  font-size: 18px; /* Schriftgröße der Zahlen */
  font-weight: bold; /* Fettgedruckt */
  padding: 5px 8px; /* Abstand innerhalb der Boxen */
  background-color: rgba(0, 0, 0, 0.1); /* Hintergrund der Boxen */
  border-radius: 5px; /* Abgerundete Ecken */
  text-align: center; /* Zentriert die Zahlen */
}

.countdown-timer .label {
  font-size: 6px; /* Kleine Schriftgröße für die Labels */
  color: white; /* Beschriftungsfarbe */
  margin-top: 1px; /* Abstand zwischen Zahlen und Labels */
}

.countdown-timer .colon {
  font-size: 24px; /* Größe der Doppelpunkte */
  font-weight: bold;
  line-height: 1; /* Zentriert vertikal */
}

@media (max-width: 768px) {
  .countdown-timer .time {
    font-size: 12px; /* Kleinere Zahlen in der mobilen Ansicht */
    padding: 5px 2px; /* Kompaktere Boxen */
    border-radius: 3px; /* Weniger abgerundete Ecken */
    min-width: 30px; /* Kleinere Mindestbreite */
  }

  .countdown-timer .label {
    font-size: 6px !important; /* Kleinere Schriftgröße für Labels */
    margin-top: 1px; /* Weniger Abstand zwischen Zahl und Label */
  }

  .countdown-timer .countdown-header {
    font-size: 12px; /* Kleinere Schriftgröße für Header */
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap; /* Kein Zeilenumbruch */
    max-width: 50%; /* Begrenzte Breite des Headers */
    flex-shrink: 1; /* Verkleinert Header, wenn Platz knapp ist */
    font-weight: 900; /* Header fett machen */
  }

  .countdown-timer .countdown-header-and-timer {
    gap: 13px; /* Weniger Abstand zwischen Header und Countdown */
    padding-left: 15px; /* Linker Abstand */
    padding-right: 15px; /* Rechter Abstand */
  }

  .countdown-timer #countdown {
    gap: 2px !important; /* Noch weniger Abstand zwischen den Boxen */
  }

  .countdown-timer #countdown span:not(.time) {
    font-size: 10px; /* Kleinere Doppelpunkte */
  }
}

  
</style>
<style>
  .kategorie-section {
    padding: 2rem;
    background: #f9f9f9;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }

  .kategorie-section h2 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
  }

  .kategorie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem 2rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .kategorie-grid li a {
    font-weight: 600;
    text-decoration: none;
    color: #222;
    display: block;
    padding: 0.3rem 0;
    transition: color 0.2s ease;
  }

  .kategorie-grid li a:hover {
    color: #0070f3;
    text-decoration: underline;
  }

  @media (max-width: 600px) {
    .kategorie-grid {
      grid-template-columns: 1fr;
    }
  }
</style>