:root{
      --brand-primary: #a04733;
      --brand-accent:#36353536;
      --card-radius: 12px;
      --muted: rgb(255, 255, 255);
      --door-bg: rgba(255,255,255,0.02);
    }

    /* Grund: dunkler Nachthimmel oben, unten etwas heller */
    

    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      /* Dunkel oben -> unten etwas heller (dein Wunsch) */
      background: linear-gradient(180deg, #020818 0%, #123a69 60%, #1b4f85 100%);
      color: #eaf6ff;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      min-height:100vh;
      display:flex;
      flex-direction:column;
      
    }

    /* Header mit geschwungener Schneedecke */
    .site-header{
      position:relative;
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:20px 20px 8px;
      z-index:10;
      /* leichtes Glas über dem Hintergrund */
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      
    }
    .brand{
      display:flex;
      align-items:center;
      gap:20px;
      text-align: center;
      
    }
    .logo{
      height: 60px;
      width:auto;
      filter:drop-shadow(0 2px 8px rgba(0,0,0,0.6));
    }
    .site-header h1{
      font-size:1.35rem;
      margin:0;
      color:var(--clr-red);
      letter-spacing:0.6px;
    }
    .header-controls button{
      border:0;background:transparent;font-size:22px;cursor:pointer;color:var(--muted);
    }

    /* geschwungene Schneedecke als SVG (positioniert am unteren Rand des Headers) */
    .header-snow {
      position:absolute;
      left:0; right:0; bottom:-2px;
      pointer-events:none;
      z-index:-9;
      height:72px;
      overflow:visible;
    }

    /* Intro */
    .intro{padding:18px 20px;color:rgba(234,246,255,0.65);max-width:1100px;margin:0 auto}

    

    

    /* Türchen */
    .door{
      position:relative;
      border-radius:12px;
      background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
      border:1px solid rgba(255,255,255,0.04);
      box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 0 40px rgba(143,211,255,0.02) inset;
      padding:10px;
      min-height:120px;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      color:var(--brand-primary);
      transition: transform .24s ease, opacity .24s ease;
      overflow:hidden;
      backdrop-filter: blur(2px);
    }
    .door:hover{ transform: translateY(-6px) }

    /* Nummer oben rechts (rot-ähnlich auf deinem Bild) */
    .door .num{
      position:absolute;
      top:8px;
      left:10px;
      color:#ff6b6b;
      font-weight:700;
      font-size:24px;
      text-shadow: 0 1px 0 rgba(0,0,0,0.3);
    }

    /* Icon mittig */
    .door .motif{
      width:72%;
      max-width:84px;
      height:84px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .door .motif img, .door .motif svg { 
      width:72px; 
      height:72px; 
      display:block; 
    }

   


    /* Lock overlay for locked doors (Schloss oben) */
    .lock-top {
      position:absolute;
      top:6px;
      right:8px;
      font-size:20px;
      color: #ffffff;
      background: rgba(0,0,0,0.25);
      padding:6px 8px;
      border-radius:8px;
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow: 0 4px 10px rgba(0,0,0,0.35);
    }

    /* locked style: visually subdued and non-interactive */
    .door.locked{
      filter: grayscale(.45) contrast(.85) brightness(.85);
      opacity:0.78;
      cursor: default;
      pointer-events: none; /* disable clicks when locked */
    }

    /* opening animation (kleine Bewegung beim Anklicken) */
    .door.opening{
      animation: doorOpen 420ms ease forwards;
    }
    @keyframes doorOpen {
      0%{ transform: scaleY(1); }
      50%{ transform: scaleY(1.06) rotateX(4deg); }
      100%{ transform: scaleY(1) rotateX(0deg); }
    }

    /* opened visual (nützlich wenn einmal geöffnet) */
    /* .door.opened{
      outline: 1.5px solid rgba(255, 255, 255, 0.333);
      
      box-shadow: 0 14px 38px rgba(0,0,0,0.5);
    } */

    /* Weißer Outline NUR wenn Türchen geöffnet ist */
.door.opened .motif img,
.door.opened .motif svg {
  filter: drop-shadow(0 0 1px white)
          drop-shadow(0 0 30px white);
}


    /* Modal */
    .modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1200; }
    .modal[aria-hidden="false"]{ display:flex; }
    .modal-backdrop{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.5)); }
    .modal-panel{border: 1px solid var(--clr-red); 
      position:relative;
       z-index:1210; width:92%; 
       max-width:440px; 
       border-radius:12px; 
       padding:16px;
       padding-top: 40px;
       padding-bottom: 30px;
      background: linear-gradient(180deg, rgba(6,16,28,0.95), rgba(8,22,36,0.98));
      color: var(--clr-grey);
      box-shadow: 0 22px 60px rgba(0,0,0,0.7);
      border:1px solid rgba(255,255,255,0.02);
    }
    .modal-body{ 
      width:100%; 
      max-width:100%; 
      gap:16px; 
      align-items:center; 
    }
    .modal-body img{ 
      width:100%; 
      max-width:100%; 
      border-radius:8px; 
      
      }
    .modal-text{ color: rgba(234,246,255,0.9); flex:1; }

    .close-btn{ 
      position:absolute; 
      right:10px; top:8px; border:0; 
      background:transparent; 
      font-size:20px; color:var(--muted); 
      cursor:pointer; }
      .modal-footer #downloadBtn {
        padding:8px 12px;  
        background:var(--clr-grey); 
        color:var(--clr-red);
        margin-top: 20px;
         text-decoration:none;
      }









   
    

    /* Passwort Prompt */
    .pw-prompt{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1300; }
    .pw-prompt[aria-hidden="false"]{ display:flex; }
    .pw-panel{ background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,1.82)); color:var(--clr-light); padding:16px; border-radius:10px; box-shadow: 0 12px 40px rgba(0,0,0,0.6); max-width:420px; width:92%; }
    .pw-panel input{ width:100%; padding:10px; margin:8px 0; border-radius:8px; border:1.5px solid var(--clr-light); background:transparent; color:var(---clr-grey); }
    .btn{ padding:8px 12px; border-radius:8px; border:0; cursor:pointer; background:var(--clr-lightgrey); color:#053502; }
    .btn.secondary{ background:transparent; color:var(--clr-red); border:1.5px solid rgba(123, 114, 114, 0.6); }

    /* Snow: white flakes */
    .snowflake { position:fixed; top:-10px; left:0; right:0; pointer-events:none; z-index:1000; }
    .snowflake i{ position:absolute; top:-2rem; font-style:normal; user-select:none; opacity:.95; color:white; animation-name:fall; animation-timing-function:linear; animation-iteration-count:infinite; }
    @keyframes fall { to{ transform: translateY(110vh) rotate(360deg); } }

    /* Responsive tweaks */
    @media (max-width:420px){
      .site-header h1 { font-size:1rem; }
      .door .num { font-size:18px; left:8px; }
    }



footer.site-footer {
    position: relative;
    width: 100%;
    background: transparent;
    padding-top: 50px;
    padding-bottom: 0px;
    color: var(--clr-grey);
    text-align: center;
}

/* SVG bleibt im Footer, wächst in voller Breite mit */
footer .footer-snow {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height: 140px;      /* ← bei Desktop/Tablet größer machen */
    display:block;
    z-index:-1;        /* Schnee hinter Inhalt */
}

/* Responsive Höhe je nach Gerät */



  

/* Adventskalender Grund-Grid */
.calendar-grid {
    display:grid; 
    gap:12px;
    padding:18px;
    grid-template-columns:repeat(3, minmax(90px,1fr));   /* <<< Standard: 3er Grid */
    max-width:1100px;
    margin:20px auto 50px;
}


/* ========== DEINE BREAKPOINTS IMPLEMENTIERT ========== */

/* XS = min 475px → 4 Spalten */
@media (min-width: 475px){
    .calendar-grid{
        grid-template-columns:repeat(4, minmax(90px,1fr));
    }

    .containerlayout{
        width:100%;
    }
    .modal-panel{
      width:82%; 
    }
    .brand{
      gap:30px;
    }
}


/* SM = min 640px → 6 Spalten (wie dein großes Layout) */
@media (min-width: 640px){
    .calendar-grid{
        grid-template-columns:repeat(6, minmax(100px,1fr));
    }
    .containerlayout{
        max-width:640px;
    }
    .modal-panel{
      width:62%; 
      
    }
    .brand{
      gap:100px;
    }
    
    
}


/* MD – optional falls du später feiner skalieren willst */
@media (min-width: 768px){
    .containerlayout{max-width:768px;}
    .brand{
      gap:200px;
    }
  
}

/* LG */
@media (min-width: 1024px){
    .containerlayout{max-width:1024px;}
}

/* XL */
@media (min-width: 1280px){
    .containerlayout{max-width:1280px;}
    .brand{
      gap:350px;
    }
}

/* 2XL */
@media (min-width: 1536px){
    .containerlayout{max-width:1536px;}
    .brand{
      gap:500px;
    }
}