@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@600&family=Inter:wght@400;600&display=swap");

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  background: #021427 url("./hintergrund.png") center/cover no-repeat fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.page-title {
  width: min(1200px, 100vw);
  padding: clamp(1rem, 2vw, 2.5rem) clamp(1rem, 3vw, 3rem) 0;
  font-family: "Cinzel", "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  text-align: center;
  letter-spacing: 0.1em;
  color: #ffeac1;
  text-shadow: 0 5px 18px rgba(4, 8, 24, 0.9);
}

.calendar {
  width: min(1200px, 100vw);
  flex: 1 0 auto;
  padding: clamp(0.5rem, 2vw, 2rem);
  display: grid;
  gap: clamp(0.5rem, 1.5vw, 1.5rem);
  position: relative;
  justify-content: center;
  align-content: center;
  overflow: visible;
}

/* Standard: 4x6 Grid (4 Spalten, 6 Zeilen) - für breitere Bildschirme */
.calendar {
  grid-template-columns: repeat(4, var(--item-size, 100px));
  grid-template-rows: repeat(6, var(--item-size, 100px));
}

/* 6x4 Grid (6 Spalten, 4 Zeilen) - für höhere Bildschirme */
.calendar.grid-6x4 {
  grid-template-columns: repeat(6, var(--item-size, 100px));
  grid-template-rows: repeat(4, var(--item-size, 100px));
}

.grid-item {
  width: var(--item-size, 100px);
  height: var(--item-size, 100px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 234, 193, 0.5);
  border-radius: 0;
  background: transparent;
  color: #ffeac1;
  font-family: "Cinzel", "Times New Roman", serif;
  font-size: clamp(0.75rem, 2.5vw, 1.8rem);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
  overflow: hidden;
}

.grid-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.grid-item:hover {
  transform: scale(1.06);
  border-color: rgba(255, 210, 127, 0.5);
  box-shadow: 0 0 15px rgba(255, 210, 127, 0.3);
}

/* Türchenbilder beim Hover anzeigen */
.grid-item[data-tuer="1"]::before { background-image: url("./tueren/tuer-01.png"); }
.grid-item[data-tuer="2"]::before { background-image: url("./tueren/tuer-02.png"); }
.grid-item[data-tuer="3"]::before { background-image: url("./tueren/tuer-03.png"); }
.grid-item[data-tuer="4"]::before { background-image: url("./tueren/tuer-04.png"); }
.grid-item[data-tuer="5"]::before { background-image: url("./tueren/tuer-05.png"); }
.grid-item[data-tuer="6"]::before { background-image: url("./tueren/tuer-06.png"); }
.grid-item[data-tuer="7"]::before { background-image: url("./tueren/tuer-07.png"); }
.grid-item[data-tuer="8"]::before { background-image: url("./tueren/tuer-08.png"); }
.grid-item[data-tuer="9"]::before { background-image: url("./tueren/tuer-09.png"); }
.grid-item[data-tuer="10"]::before { background-image: url("./tueren/tuer-10.png"); }
.grid-item[data-tuer="11"]::before { background-image: url("./tueren/tuer-11.png"); }
.grid-item[data-tuer="12"]::before { background-image: url("./tueren/tuer-12.png"); }
.grid-item[data-tuer="13"]::before { background-image: url("./tueren/tuer-13.png"); }
.grid-item[data-tuer="14"]::before { background-image: url("./tueren/tuer-14.png"); }
.grid-item[data-tuer="15"]::before { background-image: url("./tueren/tuer-15.png"); }
.grid-item[data-tuer="16"]::before { background-image: url("./tueren/tuer-16.png"); }
.grid-item[data-tuer="17"]::before { background-image: url("./tueren/tuer-17.png"); }
.grid-item[data-tuer="18"]::before { background-image: url("./tueren/tuer-18.png"); }
.grid-item[data-tuer="19"]::before { background-image: url("./tueren/tuer-19.png"); }
.grid-item[data-tuer="20"]::before { background-image: url("./tueren/tuer-20.png"); }
.grid-item[data-tuer="21"]::before { background-image: url("./tueren/tuer-21.png"); }
.grid-item[data-tuer="22"]::before { background-image: url("./tueren/tuer-22.png"); }
.grid-item[data-tuer="23"]::before { background-image: url("./tueren/tuer-23.png"); }
.grid-item[data-tuer="24"]::before { background-image: url("./tueren/tuer-24.png"); }

.grid-item:hover::before,
.grid-item.mobile-active::before {
  opacity: 1;
}

.grid-item.locked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(40px, 8vw, 70px);
  height: clamp(40px, 8vw, 70px);
  background-image: url("data:image/svg+xml,%3Csvg width='98' height='97' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(-382 -264)'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath d='M452.025 309.015 452.025 297.031C452.025 285.419 442.611 276.005 430.999 276.005 419.387 276.005 409.973 285.419 409.973 297.031L409.973 309.014 402.997 309.514 402.997 347.523 430.997 349.523 458.997 347.523 458.997 309.512ZM411.973 297.031C411.973 286.523 420.491 278.005 430.999 278.005 441.507 278.005 450.025 286.523 450.025 297.031L450.025 308.881 447 308.679 447 297.006C447 288.169 439.837 281.006 431 281.006 422.163 281.006 415 288.169 415 297.006L415 308.679 411.975 308.879ZM445 308.539 431 307.512 417 308.539 417 297.006C417 289.274 423.268 283.006 431 283.006 438.732 283.006 445 289.274 445 297.006ZM457 345.661 431 347.519 405 345.661 405 311.375 410.134 311.008 416.147 310.608 431 309.517 445.867 310.608 451.858 311.008 457 311.375Z' fill='%23ffeac1' fill-opacity='0.5'/%3E%3Cpath d='M431 320.516C427.117 320.532 423.983 323.692 423.999 327.575 424.01 330.273 425.565 332.727 428 333.89L428 339.521 434 339.521 434 333.866C436.418 332.667 437.962 330.216 438 327.518 437.996 323.653 434.865 320.521 431 320.516ZM432.635 332.288 432 332.537 432 337.521 430 337.521 430 332.508 429.328 332.275C426.711 331.362 425.329 328.5 426.242 325.883 427.155 323.266 430.017 321.884 432.634 322.797 434.643 323.498 435.992 325.39 436 327.518 435.956 329.646 434.624 331.534 432.634 332.288Z' fill='%23ffeac1' fill-opacity='0.5'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.grid-item.locked:hover::after,
.grid-item.locked.mobile-active::after {
  opacity: 0;
}

/* Schüttel-Animation für verschlossene Türchen */
@keyframes shake {
  0%, 100% { transform: translateX(0) scale(1.06); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px) scale(1.06); }
  20%, 40%, 60%, 80% { transform: translateX(5px) scale(1.06); }
}

@keyframes shakeNoHover {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.grid-item.shake {
  animation: shakeNoHover 0.5s ease-in-out;
}

.grid-item.shake:hover {
  animation: shake 0.5s ease-in-out;
}

.grid-item.mobile-active {
  transform: scale(1.06);
  border-color: rgba(255, 210, 127, 0.5);
  box-shadow: 0 0 15px rgba(255, 210, 127, 0.3);
}

/* Rüge-Banner */
.ruege-banner {
  position: fixed;
  top: clamp(1rem, 3vw, 2rem);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(2, 20, 39, 0.95);
  border: 2px solid rgba(255, 234, 193, 0.5);
  padding: clamp(1rem, 2vw, 1.5rem) clamp(2.5rem, 5vw, 3.5rem) clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 3vw, 2rem);
  border-radius: 0;
  max-width: 600px;
  width: 90%;
  text-align: center;
  box-shadow: 0 10px 40px rgba(4, 8, 24, 0.8);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.ruege-banner-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.ruege-title {
  font-family: "Cinzel", "Times New Roman", serif;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  color: #ffeac1;
  margin: 0;
  letter-spacing: 0.1em;
  text-shadow: 0 5px 18px rgba(4, 8, 24, 0.9);
}

.ruege-text {
  font-family: "Cinzel", "Times New Roman", serif;
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  color: #ffeac1;
  line-height: 1.6;
  margin: 0;
  letter-spacing: 0.05em;
}

.ruege-close {
  background: none;
  border: none;
  color: #ffeac1;
  font-size: clamp(1.5rem, 3vw, 2rem);
  cursor: pointer;
  padding: 0;
  width: clamp(24px, 4vw, 32px);
  height: clamp(24px, 4vw, 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
  line-height: 1;
}

.ruege-close:hover {
  transform: scale(1.1);
  color: rgba(255, 210, 127, 1);
}

.ruege-close:active {
  transform: scale(0.95);
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
}


@media (max-width: 480px) {
  .page-title {
    letter-spacing: 0.06em;
  }
  
  .calendar {
    padding-bottom: clamp(5rem, 15vh, 8rem);
    gap: clamp(0.75rem, 2vw, 1.25rem);
  }
  
  .ruege-modal-content {
    padding: clamp(1.5rem, 3vw, 2rem);
  }
}