@charset "utf-8";
/* CSS Document */

/* ======================== */
/*   FONTS/BASICS/GENERAL   */
/* ======================== */

@font-face {
  font-family: 'MMHeadlinePro';
  src: url('https://specials.mediamarkt.ch/x-fonts/MMHeadlinePro-Regular_1.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

* { padding: 0; margin: 0; box-sizing: border-box; }
body {
  font-family: 'Noto Sans', sans-serif;
  background: #245837 url("pattern-2-bg.png") repeat 0 0/500px 500px;	
}
html, body {
	overflow-x: hidden;
}

body[style*="position: fixed"] {
  overscroll-behavior: contain;
  touch-action: none;
}

#page-content {
	display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; 
}

/* ======================== */
/*   LAYOUT & GRID          */
/* ======================== */

#calendar-inner {
  padding: 2rem 2rem 2rem 2rem;
  padding-top: 0.5rem;
  max-width: 1400px;
  margin: auto;
  margin-top: -1rem;
}

#calendar-content {
  display: grid;
  gap: 1rem;
  padding: 1rem 1rem 1rem 1rem;
  padding-top: 0;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  grid-auto-flow: row;
  margin-top: -1.5rem;
}
@media (min-width: 600px) { #calendar-content { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { #calendar-content { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width:1400px){ #calendar-content { grid-template-columns: repeat(4,minmax(0,1fr)); } }
.size-1 { grid-column: span 1; }
.size-2 { grid-column: span 2; }

/* ======== Adventskalender-Kachel ========= */

#calendar-content > div {
  position: relative;
  border: 2px dotted #fff;
  background: #fff;
  text-align: center;
  border-radius: 0 1rem 1rem 0;
  min-width: 0;
  word-break: break-word;
  overflow: hidden;
}

/* Bilder & Titel */
img.prod-img { max-width:200px; height:auto; display:block; margin:0 auto 8px; padding-top:35px; }
img.e-label-img { max-width:75px; }
#calendar-content p.title {
  height: calc(1.3em * 2);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
#calendar-content p.title span {
  display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3; font-weight: bold;
}
.old-price { font-size: 1.3rem; text-decoration: line-through; }
p.price   { font-size: 2rem; color: #DF0000; font-family: 'MMHeadlinePro'; }

/* Responsive Anpassung 1-Column, Header */
@media (max-width: 599.98px){
  #calendar-content .size-2 { grid-column: span 1 !important; }
  #calendar-inner { padding: 0; }
  header { flex-direction: column; }
  header h1 { padding-top: 1rem!important; }
  #lang-switcher {width: 6rem;}
	footer ul {
		flex-direction: column!important;
	}
}

/* Türchen-Inhalt & Placeholder */
.door-content { padding: 1rem; height:100%; }
#calendar-content > div .door-placeholder {
  display: none; align-items: center; justify-content: center;
  padding: 2rem; height: 100%; color: #fff;
}
#calendar-content > div .door-placeholder i { font-size: 80px; line-height:1; }

/* =============================== */
/*   STATUS: LOGIK/ANZEIGE         */
/* =============================== */

/* --- Sichtbarkeit: Past/Today/Future --- */
#calendar-content > div.future .door-content,
#calendar-content > div.today .door-content { display: none; }
#calendar-content > div.future .door-placeholder,
#calendar-content > div.today  .door-placeholder { display: flex; }
#calendar-content > div.past .door-content, #calendar-content > div.is-open .door-content {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
#calendar-content > div.past .door-placeholder,
#calendar-content > div.is-open .door-placeholder { display: none; }

/* --- PAST: abgelaufen --- */
#calendar-content > div.past .door-content p:not(.title) { display: none; }
#calendar-content > div.past .door-content div:has(> img[alt="Energieeffizienzlabel"]) { display: none; }
@supports not (selector(:has(*))) {
  #calendar-content > div.past .door-content img[alt="Energieeffizienzlabel"] { display: none; }
}
#calendar-content > div.past {
  background: #f5f5f5; border-color: #e0e0e0; cursor: not-allowed;
}
#calendar-content > div.past .door-content { color: #7a7a7a; }
#calendar-content > div.past .door-content img { filter: grayscale(100%); opacity: .5; }
#calendar-content > div.past .door-number { filter: none; opacity: 1; }
#calendar-content > div.past .door-number {
  background: linear-gradient(145deg,#dcdcdc 0%,#c0c0c0 100%);
  border: 1px solid #aaa; color: #555;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 4px rgba(0,0,0,.1);
}

.past .promo-date {
	display: none;
}

/* --- Türchen-Nummer immer sichtbar --- */
.door-number {
  position: absolute; top: 12px; left: 12px;
  height: 2rem; min-width:2rem; padding: 0 .5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #fff7d4 0,rgba(255,255,255,0) 35%),
              linear-gradient(145deg,#f7e6ac 0,#e3c761 30%,#b4882c 50%,#e9d37b 70%,#b17d27 100%);
  border: 1px solid #b28328; color: #2b210a;
  font-weight: 700; line-height: 1; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 8px rgba(0,0,0,.18);
}

/* --- Heute: Fokus --- */
#calendar-content > div.today {
  outline: 3px solid #ffd54d; outline-offset: -3px; cursor:pointer; overflow: hidden;
}
/* Mindesthöhe je Türchen */
div[data-door] { min-height: 440px; }

/* BG für future/today */
#calendar-content div[data-door].future,
#calendar-content div[data-door].today {
  background-image: url("door-8-bg.jpg");
  background-size: cover;
  background-position: center;
}
#calendar-content div[data-door].future.size-2,
#calendar-content div[data-door].today.size-2 { background-size: contain; }

/* === Corner-Peel (nur für .today) === */
#calendar-content > div.today { overflow: hidden; }
#calendar-content > div.today .door-content,
#calendar-content > div.today .door-placeholder { border-radius: inherit; overflow: hidden; }
#calendar-content > div.today::after {
  --peel: 80px;
  content:""; position:absolute; top:0; right:0;
  width:var(--peel); height:var(--peel);
  background: linear-gradient(135deg,#b30404 0 40%,#fff 40% 100%);
  border-top-left-radius:8px; box-shadow:0 6px 12px rgba(0,0,0,.35);
  transform-origin:100% 0%;
  transform: translate(-70%,-30%) rotate(-90deg);
  pointer-events: none;
  animation: peelPulse 4s infinite ease-in-out;
}
@keyframes peelPulse {
  0%,40%{ transform:translate(-70%,-30%) rotate(-90deg); box-shadow:0 6px 12px rgba(0,0,0,.35);}
  50%{transform:translate(-80%,-20%) rotate(-90deg);box-shadow:0 14px 22px rgba(0,0,0,.45);}
  60%,100%{transform:translate(-70%,-30%) rotate(-90deg);box-shadow:0 6px 12px rgba(0,0,0,.35);}
}

/* ========================= */
/*   HEADER / TOP-Deko / Footer */
/* ========================= */

div#logo-box {
    display: flex;
    justify-content: space-between;
}

header {
  background-color: #DF0000; padding: 1rem;
  display: flex; justify-content: flex-start;
}
header #logo {
  max-width: 10rem; display: flex; justify-content: center; align-items: center; padding-right: 1rem;
}
header img.logo-svg { max-width: 100%; display: block; }
#calendar-header {
  display: flex; justify-content: center; align-items: center; flex-direction: column;
}
#calendar-header img { padding-left: 1em; z-index: 2; }
header h1 {
  text-align: center; font-family: 'MMHeadlinePro'; color: white; font-size: 35px; line-height: 1em;
  margin: auto; padding-left: 0.5rem; padding-right: 0.5rem;
}

div#title-area {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

footer {
    background-color: rgb(58, 58, 58);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 1.5rem;
}

footer span.legal {
    padding: 0.5rem;
    text-align: left;
    color: white;
    margin: auto;
    font-size: 12px;
    font-style: italic;
}

footer ul {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	list-style-type: none;
}

footer ul li {
    padding-left: 1rem;
    padding-right: 1rem;
}

footer ul a {
	color: white;
} 

/* ========================= */
/*   SPECIAL STATES/EFFECTS  */
/* ========================= */

/*#calendar-content > div.past::before {
  content: "Abgelaufen"; display: flex; justify-content:center; align-items:center;
  color: white; font-weight: bold;
  position: absolute; top: 50%; left: -20px; width: calc(100% + 20px); height: 10px; padding: 10px;
  background: rgba(223,0,0,1); transform: rotate(-7deg); z-index: 30; pointer-events: none;
}*/

#calendar-content > div.today,
#calendar-content > div.is-open {
  outline: 1px solid #ffd54d;
  outline-offset: 0px;
  box-shadow: 0 0 0 4px rgba(255,213,77,0.26);
  animation: advent-blink 1s cubic-bezier(.4,0,.2,1) infinite alternate;
  z-index: 2;
}

/* Pulsierende Animation */
@keyframes advent-blink {
  0%   { outline-width: 2px; box-shadow: 0 0 0 4px rgba(255,213,77,0.26);}
  50%  { outline-width: 4px; box-shadow: 0 0 0 6px rgba(255,213,77,0.36);}
  100% { outline-width: 2px; box-shadow: 0 0 0 4px rgba(255,213,77,0.26);}
}

.door-expired-label {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: -20px;
  width: calc(100% + 40px); /* Mehr Breite für dickes Padding? */
  min-height: 30px;           /* Fix: Mindesthöhe für bessere Lesbarkeit */
  padding: 6px 0 6px 0;       /* Vertikal Platz lassen, nach Bedarf anpassen */
  background: rgba(223, 0, 0, 1);
  transform: translateY(-50%) rotate(-7deg); /* Vertikal zentriert */
  z-index: 30;
  pointer-events: none;
  box-sizing: border-box;
  font-size: 1.1em;           /* Optional etwas größer */
  border-radius: 4px;         /* Optional etwas runder machen */
  letter-spacing: 1px;        /* Optional für bessere Sichtbarkeit */
}

/* Shake für gesperrte Türchen */
@keyframes shake-door {
  0% { transform: translateX(0);}
  20% { transform: translateX(-10px);}
  40% { transform: translateX(8px);}
  60% { transform: translateX(-6px);}
  80% { transform: translateX(4px);}
  100% { transform: translateX(0);}
}
.door-shake {
  animation: shake-door 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

/* Timer-Anzeige */
.door-timer {
  position: absolute; top: 18px; right: 18px;
  background: #DF0000; color: #fff;
  font-size: 1.05rem; font-family: 'Noto Sans', Arial, sans-serif; font-weight: bold;
  padding: 5px 14px 5px 12px; border-radius: 36px;
  box-shadow: 0 2px 12px rgba(200,0,0,.20);
  z-index: 50; min-width: 106px;
  display: flex; align-items: center; gap: 0.5em; letter-spacing: 0.03em;
}
.door-timer i { font-size: 1rem; margin-right: 0.5em; }

/* PopUp für "Noch nicht verfügbar" */
.door-popup {
  position: fixed; left:10px; bottom:10px;
  background: black; color: #fff;
  font-family: 'Noto Sans', Arial, sans-serif; font-size:1.15rem; font-weight:bold; line-height:1.5;
  border-radius: 15px; padding: 10px 23px 10px 25px;
  box-shadow: 0 8px 36px rgba(80,0,0,0.17); z-index: 5555; opacity: 1;
  pointer-events: none; display: flex; align-items: center; gap: 0.7em;
  animation: popup-fadeout 2s 1.1s forwards;
}
.door-popup i { font-size: 1.3em; }
@keyframes popup-fadeout {
  0%,80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(30px);}
}

/* Language Switcher */

#lang-switcher {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  width: 10rem;
}
.lang-btn {
  background: #d1011c;
  color: #fff;
  border-radius: 4px;
  padding: 3px 12px;
  font-weight: bold;
  text-decoration: none;
  font-size: 1em;
  transition: background 0.2s;
}
.lang-btn:hover,
.lang-btn:focus {
  background: #b50016;
}

/* Welcome Pop up */

#welcome-popup {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.popup-inner {
  background: #fff;
  border-radius: 14px;
  padding: 1.3em 1.7em;
  box-shadow: 0 4px 24px rgba(0,0,0,0.26);
  max-width: 380px;
  width: 90vw;
  max-height: 90vh;
  margin: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.popup-text {
  font-size: 1.08em;
  padding: 0 0.3em;
  margin-bottom: 0.8em;
  text-align: center;
}

#popup-close-btn {
  background: #df0000;
  color: #fff;
  border: none;
  padding: 0.6em 1.2em;
  border-radius: 7px;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 0.3em;
}

/* Kaya Gif Door */

div#outer-kaya-door{
    border: dashed 2px black;
    border-radius: 0 10px 10px 0px;
    overflow: hidden;
    margin-bottom: 1rem;
}

#outer-kaya-door-mini{
    border: dashed 2px black;
    border-radius: 0 10px 10px 0px;
    overflow: hidden;
}

#kaya-mini-popup p{
	font-size: 12px;
    text-align: center;
    margin-top: 0.5rem;
}

.popup-kaya-door {
  position: relative;
  overflow: hidden;
}
/* Bild evtl. kleiner machen, wenn gewünscht */
.popup-kaya-door .popup-image {
  display: block;
  max-width: 220px;
}
/* Animierte Ecke */
.popup-kaya-door::after {
  --peel: 40px;
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: var(--peel);
  height: var(--peel);
  background: linear-gradient(135deg, #b30404 0 40%, #fff 40% 100%);
  border-top-left-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,.22);
  transform-origin: 100% 0%;
  transform: translate(-60%,-35%) rotate(-90deg);
  pointer-events: none;
  animation: peelPulse 4s infinite ease-in-out;
  z-index: 2;
}

#kaya-mini-popup {
    display: block;
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 10000;
    background: rgb(255, 255, 255);
    border-radius: 10px;
    padding: 0.5rem;
    box-shadow: rgba(20, 20, 20, 0.3) 0px 2px 18px;
    font-size: 1.08em;
    font-weight: bold;
    cursor: pointer;
}

.popup-kaya-door .popup-image.mini-image {
	max-width: 110px!important;
}

.promo-date {
    display: block;
    font-size: 0.7em;
    color: #444;
    margin-top: 6px;
    line-height: 1.2em;
    font-style: italic;
}

.door-fade-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: rgba(255,255,255,0.0);
  display: flex;
  transition: opacity 1s cubic-bezier(.86,0,.07,1);
  opacity: 1;
  pointer-events: all;
}
.door-fade-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}
.door-fade-overlay img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: 0.4em;
  background: transparent;
  margin: 0 auto;
}