/* @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Montserrat:wght@400;600;700&display=swap'); */

 @font-face {
  font-family: "Roboto_Slab";
  font-style: normal;
  font-weight:100 900;
  font-display: swap;
  src: url("../font/Roboto_Slab/RobotoSlab-VariableFont_wght.ttf");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight:400;
  font-display: swap;
  src: url("../font/Roboto/Roboto-Regular.ttf");
}

@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight:100 900;
  font-display: swap;
  src: url("../font/Raleway/Raleway-VariableFont_wght.ttf");
}
@font-face {
  font-family: "Raleway-Italic";
  font-style: normal;
  font-weight:100 900;
  font-display: swap;
  src: url("../font/Raleway/Raleway-Italic-VariableFont_wght.ttf");
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight:400 700;
  font-display: swap;
  src: url("../font/Lora/Lora-VariableFont_wght.ttf");
}
@font-face {
  font-family: "Lora-Italic";
  font-style: normal;
  font-weight:400 700;
  font-display: swap;
  src: url("../font/Lora/Lora-Italic-VariableFont_wght.ttf");
}
@font-face {
  font-family: "Poor Story";
  font-style: normal;
  font-weight:400;
  font-display: swap;
  src: url("../font/Poor_Story/PoorStory-Regular.ttf");
}
@font-face {
  font-family: "Indie Flower";
  font-style: normal;
  font-weight:400;
  font-display: swap;
  src: url("../font/Indie_Flower/IndieFlower-Regular.ttf");
}
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../font/Montserrat/Montserrat-VariableFont_wght.ttf");
}
@font-face {
    font-family: "Open_Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../font/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf");
   
}

@font-face {
  font-family: "Cormorant";
  font-style: normal;
  font-weight:100 900;
  font-display: swap;
  src: url("../font/Cormant_Garamond/CormorantGaramond-VariableFont_wght.ttf");
}

:root { 
    --red:#8f1d2c; 
    --red-dark:#4b0e18; 
    --gold:#d9b56d; 
    --cream:#fff8e9;
    --green:#173f35;
    --color-dds: #e45177;
    --color-alarm: red;
 }
* { box-sizing: border-box; }
body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--cream); font-family:'Montserrat',sans-serif; background:radial-gradient(circle at 50% -10%,#296353 0,var(--green) 34%,#09231e 100%); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.22; background-image:radial-gradient(circle,#fff 1px,transparent 1.5px); background-size:43px 43px; }
.hero { padding:4.5rem 1rem 3rem; }
.eyebrow { color:var(--gold); font-size:.75rem; font-weight:700; letter-spacing:.34em; text-transform:uppercase; }
h1 { margin:0; font-family:'Raleway',serif; font-size:clamp(4rem,10vw,7rem); font-weight:700; letter-spacing:-.06em; line-height:.8; text-shadow:0 4px 25px #0007; }
h1 span { display:block; color:var(--gold); font-size:.58em; font-style:italic; letter-spacing:.02em; }
.lead { max-width:580px; margin-top:1.5rem; color:#e8ded0; font-family:'Raleway',serif; font-size:1.35rem; }
.countdown { display:inline-flex; align-items:center; gap:.9rem; padding:.65rem 1.1rem; border:1px solid #d9b56d66; border-radius:99px; background:#061d1999; box-shadow:0 8px 30px #0003; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; }
.countdown strong { color:var(--gold); }
.calendar-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; max-width:1100px; margin:0 auto; }
.calendar-door { position:relative; min-height:160px; overflow:hidden; padding:0; border:1px solid #e3c68155; border-radius:4px; color:var(--cream); background:#6e1421; box-shadow:0 10px 25px #0004; isolation:isolate; transition:transform .25s ease,box-shadow .25s ease; }
.calendar-door:nth-child(3n+2) { background:#a12a39; }
.calendar-door:nth-child(4n) { background:#752333; }
.calendar-door::before { content:""; position:absolute; inset:7px; border:1px solid #d9b56d66; pointer-events:none; z-index:4; }
.calendar-door:hover,.calendar-door:focus-visible { transform:translateY(-6px); box-shadow:0 18px 34px #0007; outline:none; }
.door-front,.door-content { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.door-front { z-index:3; transform-origin:left; background:inherit; transition:transform .8s cubic-bezier(.2,.75,.2,1); }
.calendar-door.was-opened .door-front { transform:perspective(700px) rotateY(-105deg); }
.door-content { background:radial-gradient(circle,#fff9de,#d8ae62); color:var(--red-dark); }
.door-star { position:absolute; top:15px; color:var(--gold); font-size:.8rem; }
.door-number { font-family:'Cormorant',serif; font-size:3.5rem; font-weight:700; line-height:1; }
.door-status { margin-top:.6rem; opacity:.65; font-size:.55rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
/* .door-icon { font-size:3.2rem; } */
/* Bild im Türchen */
.door-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position:center;
}

/* Bild im geöffneten Fenster */
.modal-door-image {
    display: block;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    object-fit: contain;
}
#modalIcon {
    width: 100%;
    overflow: hidden;
}

#modalIcon .modal-door-image {
    display: block;
    width: 100%;
    height: 300px;
    margin: 0;
    object-fit: contain;
    object-position: center;
}
/* Breite des Dialogs */
#doorModal .modal-dialog {
    max-width: 600px;
    margin: 1rem auto;
    width: calc(100% - 2rem);
}

/* Rechteckiger Dialog ohne abgerundete Ecken */
#doorModal .modal-content {
    border-radius: 0;
    overflow: hidden;
}

/* Bootstrap-Abstand p-5 überschreiben */
#doorModal .modal-body {
    padding: 0 !important;
}

/* Quadratischer Bildbereich */
#doorModal #modalIcon {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

#doorModal .modal-door-image {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
}


.is-locked { filter:saturate(.72); }
.modal-content { border:1px solid var(--gold); border-radius:4px; color:var(--red-dark); background:linear-gradient(145deg,#fffaf0,#eee0bf); box-shadow:0 25px 80px #0008; }
.btn-close { position:absolute; top:1rem; right:1rem; z-index:2; }
.modal-icon { font-size:4.2rem; }
.modal-day { margin:.8rem 0 .2rem; color:#9c7340; font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.modal h2 { font-family:'Raleway',serif; font-size:2.5rem; font-weight:700; }
.modal-copy { color:#594c3e; line-height:1.7; }
footer { color:#a7bdb6; font-family:'Raleway',serif; font-size:1.1rem; }
footer span { margin:0 .65rem; color:var(--gold); }
@media (max-width:991px) { .calendar-grid { grid-template-columns:repeat(4,1fr); } }
@media (max-width:575px) { .hero { padding-top:3rem; } .calendar-grid { grid-template-columns:repeat(3,1fr); gap:.55rem; } .calendar-door { min-height:115px; } .door-number { font-size:2.6rem; } .countdown { flex-direction:column; gap:.2rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }
.calendar-door.is-locked .door-status {
    font-size: 1.2rem;
    letter-spacing: normal;
    opacity: 1;
}