/* Reset (vorgefertigte Abstände vernichten) */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: "Minecraftia-Regular";
  src: url('fonts/Minecraftia-Regular.ttf');
}

html,
body {
  font-size: 1vw; /* 1rem entspricht nun exakt 1vw */
  min-height: 141.4vw; /* NEU: Erzwingt die exakte A2-Mindesthöhe für echtes Scrollen */
}

/* BODY */
body {
  font-family: Helvetica, sans-serif;
  background-color: rgb(255, 48, 210);
  background-image: url("image/hintergrund.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-blend-mode: color-dodge;
  margin: 0;
  position: relative;
  aspect-ratio: 420 / 594; /* Hält das A2-Verhältnis auf Screens perfekt stabil */
  width: 100%;
}

.container {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 2rem;
  padding-right: 10rem; /* Platzhalter für den seitlichen Titel */
  z-index: 1;
}

.grid-layout {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  grid-auto-flow: row;
  gap: 0;
}

/* Schriften */
h1 {
  color: rgb(48, 0, 77);
  font-size: 3rem;
  line-height: 0.9;
  text-align: left;
  margin-left: 0.5rem;
  margin-right: 2rem;
  margin-top: 0;
  align-self: flex-start;
}

.side-title {
  position: absolute;
  top: -0.8rem;
  right: 0rem;
  padding: 3rem;
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-size: 3.7rem;
  font-weight: bold;
  font-family: "Minecraftia-Regular";
  color: rgb(48, 0, 77);
}

h2 {
  font-size: 1.5rem;
  line-height: 130%;
  text-align: center;
  color: rgb(255, 255, 255);
  font-family: "Minecraftia-Regular";
}

h3 {
  font-size: 1.5rem;
  margin-top: 0.8rem;
  margin-left: 0.5rem;
  margin-bottom: 0.4rem;
  line-height: 1.1;
  color: rgb(48, 0, 77);
  font-family: "Minecraftia-Regular";
}

h4 {
  font-size: 2.4rem;
  margin-top: 1.1rem;
  margin-left: 0.9rem;
  margin-bottom: 0.3rem;
  line-height: 1.1;
  color: rgb(48, 0, 77);
  font-family: "Minecraftia-Regular";
}

h5 {
  font-size: 1.5rem;
  line-height: 130%;
  text-align: center;
  color: rgb(255, 255, 255);
  font-family: "Minecraftia-Regular";
  text-align: left;
}

h6 {
  font-size: 1.5rem;
  line-height: 130%;
  text-align: center;
  margin-left: 16rem;
  color: rgb(255, 255, 255);
  font-family: "Minecraftia-Regular";
}



h3, h4, h5, .question {
  white-space: normal !important;      /* Erzwingt, dass Text bei Platzmangel in die nächste Zeile springt */
  word-wrap: break-word !important;     /* Bricht extrem lange Wörter zur Not mitten im Wort um */
  overflow-wrap: break-word !important;/* Moderne Variante für sicheren Wortumbruch */
  max-width: 100% !important;          /* Verhindert, dass der Text breiter wird als die Box selbst */
}

/* Header */ 
.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  gap: 0.1rem;
  margin-bottom: 0.5rem;
}

/* Antworte-Grid */
.answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
  margin-top: 0.3rem;
  font-size: 1rem;
}

.answer-box {
  border: 0.08rem solid rgb(48, 0, 77);
  padding: 0.5rem;
  font-size: 1rem;
  line-height: 1.1;
  cursor: pointer;
  user-select: none;
  color: rgb(0, 0, 0);
}

.answer-box:hover {
  border-width: 0.15rem;
  border-color: rgb(255, 48, 210);
  padding: 0.4rem;
}

/* Basis-Box-Stil */
.box {
  background: #fefefe92;
  background-blend-mode: luminosity;
  border: 0 solid rgb(48, 0, 77);
  padding: 0.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Grid-Zuweisungen */
.q1 { grid-column: 1 / span 2; grid-row: 1; background: #fefefe92; background-blend-mode: luminosity; }
.q1 .answers { grid-template-columns: 1fr; gap: 0.4rem; }

.q2 { grid-column: 3; grid-row: 1; background: #fefefed5; background-blend-mode: luminosity; }
.q2 .answers { grid-template-columns: 1fr; gap: 0.4rem; }

.q3 { grid-column: 5; grid-row: 1 / span 1; background: #fefefed5; background-blend-mode: luminosity; }
.q3 .answers { grid-template-columns: 1fr; gap: 0.4rem; }

.fakt1 { grid-column: 1 ; grid-row: 2; }

.q4 { grid-column: 3 / span 2; grid-row: 2; }
.q4 .answers { grid-template-columns: 1fr; gap: 0.4rem; }

.q5 { grid-column: 1; grid-row: 3; background: #fefefed5; background-blend-mode: luminosity; }
.q5 .answers { grid-template-columns: 1fr; gap: 0.4rem; }

.q6 { grid-column: 3; grid-row: 3; background: #fefefed5; background-blend-mode: luminosity; }
.q6 .answers { grid-template-columns: 1fr; gap: 0.4rem; }

.q7 { grid-column: 4; grid-row: 3 / span 2; background: #ffaee8bd; background-blend-mode: luminosity; }
.q7 .answers { grid-template-columns: 1fr; gap: 0.4rem; }

.q8 { grid-column: 1; grid-row: 4 / span 2; background: #ffaee8bd; background-blend-mode: luminosity; }
.q8 .answers { grid-template-columns: 1fr; gap: 0.4rem; }

.fakt2 { grid-column: 2; grid-row: 3; }

.q9 { grid-column: 2 / span 1; grid-row: 4; background: #fefefed5; background-blend-mode: luminosity; }
.q9 .answers { grid-template-columns: 1fr; gap: 0.4rem; }

.fakt3 { grid-column: 1; grid-row: 5; }

.q10 { grid-column: 3; grid-row: 4; }
.q10 .answers { grid-template-columns: 1fr; gap: 0.4rem; }

.q11 { grid-column: 5; grid-row: 3; background: #fefefed5; background-blend-mode: luminosity; }
.q11 .answers { grid-template-columns: 1fr; gap: 0.4rem; }

.fakt4 { grid-column: 5; grid-row: 4; }

.q12 { grid-column: 2 / span 2; grid-row: 5; }
.q12 .answers { grid-template-columns: 1fr; gap: 0.4rem; }

.q13 { grid-column: 4 / span 1; grid-row: 5; background: #fefefed5; background-blend-mode: luminosity; }
.q13 .answers { grid-template-columns: 1fr; gap: 0.4rem; }

.fakt5 { grid-column: 4; grid-row: 1; }

.q14 { grid-column: 1; grid-row: 6; background: #fefefed5; background-blend-mode: luminosity; }
.q14 .answers { grid-template-columns: 1fr; gap: 0.4rem; }

.q15 { grid-column: 4; grid-row: 6; background: #fefefe92; background-blend-mode: luminosity; }
.q15 .answers { grid-template-columns: 1fr; gap: 0.4rem; }

.leer { background: transparent; border: none; }
.boxfakten { padding: 0.5rem; display: flex; justify-content: center; align-items: center; text-align: center; }

#final-results { 
  display: none; grid-column: 2/ span 2; 
  grid-row: 6; 
  background: transparent;
  padding-top: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  justify-items: start;
  align-items: start }
#final-results.logged { display: block; }
#final-results .final-result { display: none; }

.logged-final-result-a .final-result-a { display: block !important; }
.logged-final-result-b .final-result-b { display: block !important; }
.logged-final-result-c .final-result-c { display: block !important; }
.logged-final-result-d .final-result-d { display: block !important; }

/* ==========================================
   NEUES RESPONSIVES MOSAIK-HINTERGRUND-SYSTEM
   ========================================== */
   .box[class*="logged-result-"] {
    background-repeat: no-repeat;
    background-attachment: scroll !important; /* Bild scrollt natürlich mit */
    background-size: 100vw 141.4vw !important; /* Perfektes A2-Verhältnis für den Bildschirm */
    background-blend-mode: normal !important;
    background-color: transparent !important;
  }
/* SVGs / Bilder verlinken */
.box.logged-result-a { background-image: url("image/bild-TYP-A.png"); }
.box.logged-result-b { background-image: url("image/bild-TYP-B.png"); }
.box.logged-result-c { background-image: url("image/bild-TYP-C.png"); }
.box.logged-result-d { background-image: url("image/bild-TYP-D.png"); }

/* HINWEIS: Die alten Klassen .q1 bis .q15 benötigen nun KEINE 
   einzelnen "background-position" Werte mehr, da das Bild durch 
   "background-attachment: fixed" automatisch absolut positionsgetreu sitzt!
   Du kannst die alten ".q1 { background-position: ... }" Zeilen einfach so belassen oder löschen.
*/
/* --- SCREEN-POSITIONEN (JETZT KORREKT AUSSERHALB VON MEDIA PRINT) --- */
.box[class*="logged-result-"].q1 { background-position: -2vw -2vw !important; }
.box[class*="logged-result-"].q2 { background-position: -37.2vw -2vw !important; }
.box[class*="logged-result-"].q3 { background-position: -72.4vw -2vw !important; }
.box[class*="logged-result-"].q4 { background-position: -37.2vw -24.9vw !important; }
.box[class*="logged-result-"].q5 { background-position: -2vw -47.8vw !important; }
.box[class*="logged-result-"].q6 { background-position: -37.2vw -47.8vw !important; }
.box[class*="logged-result-"].q11 { background-position: -72.4vw -47.8vw !important; }
.box[class*="logged-result-"].q9 { background-position: -19.6vw -70.7vw !important; }
.box[class*="logged-result-"].q10 { background-position: -37.2vw -70.7vw !important; }
.box[class*="logged-result-"].q12 { background-position: -19.6vw -93.6vw !important; }
.box[class*="logged-result-"].q13 { background-position: -54.8vw -93.6vw !important; }
.box[class*="logged-result-"].q14 { background-position: -2vw -116.5vw !important; }
.box[class*="logged-result-"].q15 { background-position: -54.8vw -116.5vw !important; }
.box[class*="logged-result-"].q7 { background-position: -54.8vw -47.8vw !important; }   
.box[class*="logged-result-"].q8 { background-position: -2vw -70.7vw !important; }



/* Macht alle Texte, Überschriften und Antworten in gelösten Boxen unsichtbar */
.box[class*="logged-result-"] > * {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================
   DYNAMISCHER ERGEBNISTYP (90° GEDREHT UNTEN RECHTS)
   ========================================== */

   .container .final-side-title {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  
  .final-side-title {
    position: absolute;
    bottom: -0.5rem;   
    right: 0rem;       
    padding: 3rem;     
    writing-mode: vertical-rl; 
    white-space: nowrap;
    font-size: 3.7rem; 
    font-weight: bold;
    font-family: "Minecraftia-Regular", sans-serif;
    color: rgb(48, 0, 77); 
    z-index: 98;
  }
  
  /* ==========================================
   DOWNLOAD-BEREICH (DIE KÄSTEN RUTSCHEN RECHTS WEITER HOCH)
   ========================================== */

.container .download-container {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* UNTERE BOX (Screensaver): Von bottom: 2rem auf bottom: 14rem angehoben */
.download-container {
  position: absolute;
  bottom: 9rem;  
  right: 12rem;  
  display: flex;
  flex-direction: column; 
  align-items: baseline; 
  gap: 0.3rem;           
  z-index: 99; 
}

/* OBERE BOX (Poster): Von bottom: 15rem auf bottom: 27rem angehoben */
.download-container.poster-container {
  bottom: 22rem; 
  right: 18.5rem; /* Auf 12rem korrigiert, damit sie exakt bündig übereinander stehen */
}

/* Der Einladungstext über den QR-Codes */
.download-text {
  font-family: "Minecraftia-Regular", sans-serif; 
  font-size: 1.6rem;
  line-height: 1.3;
  color: rgb(255, 255, 255); 
  font-weight: normal;
  margin: 0;
  text-align: left; 
}

/* Gemeinsames Basis-Design für beide QR-Boxen */
.qr-code-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  padding: 0.5rem; 
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  flex-shrink: 0; 
}

/* Die spezifischen Farben für die QR-Boxen im CSS */
.qr-code-box.qr-green {
  background-color:  #c1ff6c !important; /* Giftgrün */
}

.qr-code-box.qr-pink {
  background-color: #7d56ff !important; /* Pink */
}

/* Hover-Effekte */
.qr-code-box:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
}

/* Das QR-Bild im Inneren */
.qr-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ==========================================
   NEU: EXTRA TEXT RECHTS UNTEN (UNTER DEN QR-CODES)
   ========================================== */
.extra-bottom-text {
  position: absolute;
  bottom: 3rem;  /* Sitzt ganz unten im freien Raum */
  right: 8.9rem;  /* Bündig mit der linken Kante der QR-Codes */
  font-family: "Minecraftia-Regular", sans-serif;
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgb(48, 0, 77);
  max-width: 18rem; /* Verhindert, dass der Text in den großen gedrehten Titel läuft */
  text-align: left;
  z-index: 99;
}

/* ==========================================
   DRUCK-ANPASSUNG
   ========================================== */
@media print {
  .container .download-container,
  .container .download-container.poster-container,
  .container .extra-bottom-text,
  .container .final-side-title {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-print-color-adjust: exact; 
    print-color-adjust: exact;
  }
  
  .container .extra-bottom-text {
    display: block !important;
  }
  
  .container .final-side-title {
    display: block !important;
  }
}