/* ========== Root ========== */
:root {
  --door-open: rgba(197, 7, 7, 0.323);
  --door: rgba(238, 4, 4, 0.601);
  --door-td: rgba(255, 0, 0, 0.715);
  --num: rgb(232, 221, 6);
  --btn: rgb(2, 108, 0);;
  --link: rgb(2, 108, 0);
  --text-form: black;
}

/* ========== Body & Wrapper ========== */
body {
  background: url("https://klixa-xmas.ch/img/muttenz-winter.jpg") center / cover no-repeat;
  margin-top: 10%;
}

@media (max-width: 860px){
  body{
    margin-top: 25%;
  }
}

/* === Logo-Marquee in der Navbar === */
.logo-slider{
  position: relative;
  overflow: hidden;
  width: 100%;
  pointer-events: auto;          /* Links bleiben klickbar */
}

.logo-track{
  display: flex;
  align-items: center;
  gap: 32px;                     /* Abstand zwischen Logos */
  will-change: transform;
  animation: logo-scroll linear infinite;
  animation-duration: 40s;       /* Fallback; JS setzt die echte Dauer */
}

.logo-track a{
  flex: 0 0 auto;                /* verhindert flexibles Umbrücken */
  display: inline-flex;
  align-items: center;
}

.logo-track img{
  display: block;                /* beseitigt kleine Lücken */
  height: 70px;                  /* wird pro Logo überschrieben, z.B. 90px */
  object-fit: contain;
  filter: saturate(1) contrast(1);
  transition: transform .2s ease;
}
.logo-track a:hover img{ transform: scale(1.03); }

.logo-slider:hover .logo-track{
  animation-play-state: paused;  /* Pause beim Hover */
}

/* Nahtloser Loop: von 0 bis -50% (weil der Inhalt verdoppelt wird) */
@keyframes logo-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-330%); }
}

/* Barrierefreiheit */
@media (prefers-reduced-motion: reduce){
  .logo-track{ animation: none; }
}

.brand{
  text-align: center;
  color: #ececec;
  background-color: var(--door);
}

@media (max-width: 860px) {
  .brand{
    margin-top: 40%;
  }
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
  box-sizing: border-box;
}

/* ========== Kalender-Grid ========== */
.calendar {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 110px;        /* h:2 ≈ 220px */
  gap: 18px;
  padding: 16px;
}
@media (max-width: 860px) {
  .calendar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ========== Türchen ========== */
.door {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: var(--door);
  color: var(--num);
  font-weight: 700;
  font-size: clamp(16px, 2.2vw, 22px);
  display: grid;
  place-items: center;
  user-select: none;
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px rgba(0,0,0,.2);
  cursor: default;
}
.door.locked { opacity: .9; }
.door.today  { background: var(--door-td); cursor: pointer; }
.door.today:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(0,0,0,.28);
}
.door.opened { background: var(--door-open); }

/*Fotograf*/
.person{
  color: var(--text-form);
}

/* ========== Modal (<dialog>) ========== */
.modal {
  border: none;
  padding: 0;
  width: min(92vw, 640px);  /* kompakter */
  max-width: 640px;
  max-height: 82vh;         /* passt in den Viewport */
  overflow: hidden;         /* Scroll nur innen */
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  color: var(--text-form);
}
.modal::backdrop {
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

/* Zwei Spalten im Dialog (links Form, rechts Logo+Gewinn) */
.modal-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 20px;
  padding: 24px 55px 28px;
  max-height: calc(82vh - 40px); /* Inhalt scrollt intern */
  overflow-y: auto;
}

/* rechte Spalte soll die volle Höhe bekommen (falls noch nicht drin) */
.modal-grid { align-items: stretch; }
.modal-aside { display:flex; flex-direction:column; gap:16px; min-height:100%; }

/* unten ausrichten – aber etwas höher als ganz unten */
:root { --aside-bump: 20px; } /* hier den Abstand nach Geschmack ändern */
.modal-aside.v-bottom {
  justify-content: flex-end;
  padding-bottom: var(--aside-bump);
}


.draw-info{ margin-top:.5rem; font-weight:600; }


/* LOGO-CARD: dunkler Hintergrund + Centering */
.logo-wrap{
  border-radius:12px;
  padding:12px;              /* kompakter */
  min-height:120px;          /* kompakter */
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg,#1e243b,#2d335a);
  border: none;
}
.logo-wrap img{
  display:block;
  max-width:100%;
  max-height:90px;           /* kompakter */
  width:auto; height:auto;
  object-fit:contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

/* Optional: Light-Variante, falls Logo dunkel ist */
.logo-wrap.theme-light{
  background:#f6f6f6;
  border:1px solid #ececec;
}

/* GEWINN-Karte */
.prize-card{
  background:#fff;
  border:1px solid #ececec;
  border-radius:12px;
  padding:16px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.prize-card h3{ margin:0 0 8px 0; font-size:1.05rem; }

/* Mobile: Aside vor Formular + Höhen-Anpassung */
@media (max-width:720px){
  .modal{ max-height: 88vh; }
  .modal-grid{ grid-template-columns:1fr; max-height: calc(88vh - 36px); }
  .modal-aside{ order:-1; }
  .logo-wrap{ min-height:100px; }
  .logo-wrap img{ max-height:80px; }
}

.actions-center{
  grid-column: 1 / -1;       /* über beide Spalten */
  justify-self: center;      /* horizontal zentrieren */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
  padding: 8px 0 0;
}

.actions-center .agree{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.actions-center .agree a{
  color: var(--link);
  text-decoration: underline;
}

.actions-center .sponsor a{
  color: var(--link);
  text-decoration: underline;
}


/* Close-Button */
.modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #444;
}
.modal-close:hover { color: #000; }

/* Fallback (falls showModal nicht unterstützt) + Sichtbarkeits-Overrides */
#modal { display: block !important; }
#modal:not([open]) { display: none !important; }
#modal[open] { display: grid !important; }
.modal.is-open { position: fixed; inset: 0; margin: auto; z-index: 1000; }
html.modal-open { overflow: hidden; }
html.modal-open::before {
  content: "";
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index: 999;
}

/* ========== Formular ========== */
#participation-form input[type="text"],
#participation-form input[type="email"]{
  border: 1px solid #d6d6d6;
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
}
#participation-form input:focus{
  border-color: #b41717;
  box-shadow: 0 0 0 3px rgba(180, 23, 23, .15);
}
#participation-form button[type="submit"]{
  display: inline-block;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  background: var(--btn);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
#participation-form button[type="submit"]:hover { filter: brightness(1.2); }


/* Dialog sichtbar machen, falls alte Regeln noch display:none setzen */
#modal { display: block !important; }
#modal:not([open]) { display: none !important; } /* geschlossen bleibt unsichtbar */
#modal[open] { display: grid !important; }

/* hübscher Backdrop */
#modal::backdrop {
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

/* Fallback-Overlay falls showModal nicht geht */
.modal.is-open {
  position: fixed;
  inset: 0;
  margin: auto;
  z-index: 1000;
}
html.modal-open { overflow: hidden; }
html.modal-open::before {
  content: "";
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index: 999;
}

/*POP-up Tägliche Erinnerung*/
.reminder-dialog::backdrop {
  background: rgba(0,0,0,.4);
}
.reminder-wrap {
  background: #ffffff;
  padding: 1.5rem 2rem;
  max-width: 400px;
}
.btn-primary, .btn-secondary {
  border: none;
  padding: .5rem 1rem;
  border-radius: .5rem;
  cursor: pointer;
}
.btn-primary {
  background: #d00;
  color: #fff;
}
.btn-secondary {
  background: #eee;
  color: #333;
}



footer{
  background-color: #ffffff;
  margin-top: 5%;
}