/* Adventskalender Responsive Anpassungen */

/* Kleine Bildschirme (unter 640px) */
@media (max-width: 640px) {
  

  .adventskalender-container {
    transform: none !important;
    scale: 1 !important;
    gap: 0.5rem !important;
    padding: 1rem !important;
  }

  .adventskalender-group {
    flex-direction: column !important;
  }

  /* Türchen 24 soll volle Breite nutzen */
  .adventskalender-tuer24 {
    grid-column: span 1 !important;
    width: 100% !important;
  }
}

/* Mittlere Bildschirme (zwischen 641px und 1023px) */
@media (min-width: 641px) and (max-width: 1023px) {
 

  .adventskalender-tuer24 {
    grid-column: span 2 !important;
    width: 100% !important;
  }
}

/* Muster-Overlays für Türchen */
.pattern-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* Kugel-Muster: Blau mit roten und weißen Kugeln (wie Template 1) */
.pattern-kugel::before,
.pattern-kugel::after {
    content: '';
    position: absolute;
    border-radius: 50%;
}

.pattern-kugel {
    /* Weiße und rote Kugeln oben */
}

.pattern-kugel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    background-image: 
        radial-gradient(circle at 10% 50%, white 6px, transparent 6px),
        radial-gradient(circle at 30% 70%, #b91c1c 5px, transparent 5px),
        radial-gradient(circle at 50% 60%, white 6px, transparent 6px),
        radial-gradient(circle at 70% 40%, #b91c1c 5px, transparent 5px),
        radial-gradient(circle at 90% 50%, white 6px, transparent 6px);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0.9;
}

.pattern-kugel::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background-image: 
        radial-gradient(circle at 15% 50%, white 5px, transparent 5px),
        radial-gradient(circle at 40% 60%, #b91c1c 6px, transparent 6px),
        radial-gradient(circle at 65% 40%, white 5px, transparent 5px),
        radial-gradient(circle at 85% 55%, #b91c1c 5px, transparent 5px);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0.85;
}

/* Stern-Muster: Rot mit weißen Sternen (wie Template 9) */
.pattern-stern {
    background-image: 
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white"><polygon points="10,1 12,7 18,7 13,11 15,17 10,13 5,17 7,11 2,7 8,7"/></svg>'),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white"><polygon points="10,1 12,7 18,7 13,11 15,17 10,13 5,17 7,11 2,7 8,7"/></svg>');
    background-size: 16px 16px, 20px 20px;
    background-position: 10px 10px, 80% 70%;
    background-repeat: no-repeat;
    opacity: 0.4;
}

/* Streifen-Muster: Blau mit weißen Streifen (wie Template 2) */
.pattern-streifen {
    background-image: repeating-linear-gradient(
        45deg, 
        transparent 0 10px, 
        var(--pattern-color) 10px 20px
    );
    opacity: 0.5;
}

/* Dreieck-Muster: Einfache Dreiecke */
.pattern-dreieck {
    background-image: 
        linear-gradient(45deg, var(--pattern-color) 50%, transparent 50%),
        linear-gradient(-45deg, var(--pattern-color) 50%, transparent 50%);
    background-size: 40px 40px;
    background-position: 0 0, 20px 0;
    opacity: 0.3;
}

/* Türchen-Card Anpassungen */
.tuerchen-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tuerchen-card img,
.tuerchen-card svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    width: auto;
    height: auto;
}

/* ===================================
   ANIMATION FÜR HEUTIGES TÜRCHEN
   =================================== */
@keyframes pulse-glow {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
    }
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-1deg); }
    75% { transform: rotate(1deg); }
}

.tuerchen-heute {
    animation: pulse-glow 2s ease-in-out infinite,
               wiggle 4s ease-in-out infinite;
    border: 3px solid #FFD700 !important;
    z-index: 10 !important;
    position: relative;
}

.tuerchen-heute::before {
    content: '⭐ HEUTE';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 900;
    z-index: 20;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.tuerchen-heute:hover {
    animation: none;
    transform: scale(1.08) !important;
}