:root {
  --brand-yellow: #f6c642;
  --bg: #fff;
  --fg: #0c0c0c;
  --fg-soft: #4a4a4a;
  --fg-invert: #fff;
  --radius: 18px;
  --dur: 220ms;
}

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-synthesis-weight: none;
}

* {
  box-sizing: border-box;
}

.site-header .custom-logo {
	margin-top: 10vh;
}

/* ---------- App unter Header ---------- */
.quiz-app {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: var(--bg);
}

.qa-stage {
  width: 100vw;
  height: 100%;
  overflow: hidden;
}

/* ---------- Slider ---------- */
.slider {
  width: 100%;
  height: 100%;
  display: flex;
  will-change: transform;
  transition: none;
}

.slider.animate {
  transition: transform var(--dur) ease;
}

.step {
  flex: 0 0 100%;
  height: 100%;
  overflow: auto;
}

/* ---------- Intro ---------- */
.intro {
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 25vh 6vw 4vh 6vw;
}

.intro-inner { }

.intro h1 {
  font-family: 'Avenir Next Heavy', system-ui, sans-serif;
  font-weight: 900;
  line-height: 1.2;
  font-size: min(12vw, 150px);
  margin: 0 0 38px 0;
  letter-spacing: .2px;
}

/* ---------- Buttons ---------- */
.btn,
.start {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border-radius: 999px;
  border: 2px solid var(--brand-yellow);
  padding: 18px 30px;
  font: 800 24px/1 'Avenir Next Heavy', system-ui, sans-serif;
  text-decoration: none;
}

.btn svg,
.start svg {
  width: 26px;
  height: 26px;
  display: block;
  flex-shrink: 0;
}

.start {
  background: var(--brand-yellow);
  color: #fff;
  border-color: var(--brand-yellow);
}

/* ---------- Navigations-Buttons ---------- */
.nav {
  display: flex;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.btn {
  background: #fff;
  color: var(--brand-yellow);
  font-size: 18px;
  padding: 16px 22px;
}

.q1 .btn,
.q2 .btn,
.q3 .btn,
.q4 .btn,
.q5 .btn,
.q6 .btn {color: #E2A500; border-color: #E2A500;}

.btn-primary {
  background: var(--brand-yellow);
  color: #fff !important;
  border-color: var(--brand-yellow) !important;
}

.btn:disabled {
  opacity: .4;
  pointer-events: none;
}

/* ---------- Fragenbereich ---------- */
/* ---------- Fragenbereich (stabil & bildsicher) ---------- */
.qwrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 30vh 5vw 0 5vw;
  box-sizing: border-box;
  overflow: hidden;
}

.qinner {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.qgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5vw;
  align-items: stretch;
  height: 100%;
}

.stepper {
  font: 600 26px/1 'Avenir Next', system-ui, sans-serif;
  font-weight: 500;	
  color: var(--fg-soft);
  margin: 0 0 12px;
}

.question {
  font-family: 'Avenir Next Heavy', system-ui, sans-serif;
  font-weight: 900;
  font-size: min(5vw, 72px);
  line-height: 1.2;
  margin: 0 0 12px;
}

/* --- Linke Spalte: Frage oben + Bild wirklich unten fix --- */
.qleft {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.qimage {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
  position: relative;
  overflow: hidden;
  height: 40vh; /* feste Höheneinheit -> Bild bleibt im Container */
}

.qimage img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Bild immer vollständig sichtbar */
  display: block;
  object-position: left bottom; /* unten links andocken */
}


/* ---------- Antworten rechts ---------- */
.options {
  display: grid;
  gap: 16px;
  margin-top: 8px;
}

.option {
  border: 2px solid var(--brand-yellow);
  border-radius: var(--radius);
  padding: 22px 26px;
  font: 500 20px/1.25 'Avenir Next', system-ui, sans-serif;
  background: #fff;
  transition:
    background var(--dur),
    color var(--dur),
    transform var(--dur),
    border-color var(--dur),
    box-shadow var(--dur);
  text-align: left;
}

.option:hover {
  transform: translateY(-1px);
}

.option.is-active {
  background: var(--brand-yellow);
  color: var(--fg-invert);
  border-color: var(--brand-yellow);
  box-shadow: 0 2px 0 #d9b135;
}


/* Antworten rechts */
.options{display:grid;gap:16px;margin-top:8px}
.option{
  border:2px solid var(--brand-yellow);
  border-radius:var(--radius);
  padding:22px 26px;
  font:500 25px/1.25 'Avenir Next',system-ui,sans-serif;
  background:#fff;
  transition:background var(--dur), color var(--dur), transform var(--dur), border-color var(--dur), box-shadow var(--dur);
  text-align:left;
}
.option:hover{transform:translateY(-1px)}
.option.is-active{background:var(--brand-yellow);color:var(--fg-invert);border-color:var(--brand-yellow);box-shadow:0 2px 0 #d9b135}

/* Loading */
.center{display:flex;align-items:center;justify-content:center;text-align:center;height:100%}
.loader{height:6px;border-radius:99px;background:#eee;overflow:hidden;margin-top:22px}
.loader > i{display:block;height:100%;width:0;background:var(--brand-yellow);animation:load 1.1s ease-out forwards}
@keyframes load {to{width:100%}}


.center .question {
  letter-spacing: 0.025em;      /* leicht auseinanderziehen */
  font-kerning: none;           /* Browser-Kerning deaktivieren */
}

/* ---------- Ergebnis ---------- */
.result-screen {
    height: 100%;
    background: var(--brand-yellow);
    color: #121212;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 9vh 6vw 3vh 6vw;
}
.result-inner{width: 100%; height: 100%}
.result-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:5vw;align-items:center; height: 100%;}
.result-titleTop{ font:900 42px/1.1 'Avenir Next Heavy',system-ui,sans-serif; color: #6C6C6C;margin:0 0 6px }
.result-name{ font:900 min(8.5vw,110px)/1 'Avenir Next Heavy',system-ui,sans-serif;margin:0 0 18px;color:#fff }
.result-list{margin:0; padding:0; list-style:none}
.result-list li{
  position:relative;
  padding-left:48px;
  margin:1rem 0;
  font:500 20px/1.45 'Avenir Next',system-ui,sans-serif;
}
.result-list li::before{
  content:"";
  position:absolute; left:0; top:50%;
  width:28px; height:28px; border-radius:50%;
  border:3px solid #121212;
  transform:translateY(-50%);
}
.result-list li::after{
  content:"";
  position:absolute; left:8px; top:50%;
  width:12px; height:7px;
  border:3px solid #121212;
  border-top:0; border-right:0;
  transform:translateY(-60%) rotate(-45deg);
}
.result-ill img{max-width:100%;height:auto;display:block;}
.result-actions{
  grid-column:1 / -1;
  display:flex; justify-content:center; gap:18px;
  margin-top:36px; flex-wrap:wrap
}
.btn-white,.btn-white:visited,.btn-white:hover{
  background:#fff; border-color:#fff; color:var(--brand-yellow); text-decoration:none;
}

/* ---------- Gewinnspielseite (Mockup) ---------- */
.lottery-screen {
    height: 100%;
    display: flex;
    align-items: flex-start;
    padding: 25vh 6vw 3vh 6vw;
}

.lottery-inner{
  margin:0 auto;
}
.lottery-title{
  font:900 clamp(32px,8.5vw,128px)/1.05 'Avenir Next Heavy',system-ui,sans-serif;
  margin:0 0 36px 0;
  letter-spacing:.2px;
}
.lottery-label{
  display:block;
  font:600 18px/1 'Avenir Next',system-ui,sans-serif;
  color:var(--fg-soft);
  margin:0 0 12px 0;
	display: none;
}
.lottery-inputRow{
  max-width:620px;
  border-bottom:2px solid #000; /* leicht dunkleres Gelb */
  margin-bottom:2%;
}
.lottery-input{
  width:100%;
  border:0;
  outline:0;
  padding:12px 6px 10px 0;
  font:500 30px/1.25 'Avenir Next',system-ui,sans-serif;
  background:transparent;
  color:var(--fg);
  line-height: 3;
  font-weight: 600;
}
.lottery-input::placeholder{ color:#9a9a9a }
.lottery-input.is-invalid{ box-shadow:none; }
.lottery-actions{ margin-top:14px }

/* gelber CTA mit weißem Text/Icons */
.btn-cta{
  background:var(--brand-yellow)!important;
  color:#fff!important;
  border-color:var(--brand-yellow)!important;
  padding:18px 28px;
}
.btn-cta svg{ color:#fff }  /* currentColor -> weißer Kreis/Icon */

.lottery-legal{
  margin-top: 5%;
  font:500 13px/1.35 'Avenir Next',system-ui,sans-serif;
  color:#3b3b3b;
}

.lottery-legal a {color:#3b3b3b;}

/* ---------- Done-Screen (Mockup) ---------- */
.done-screen{
  height:100%;
  display:flex;
  align-items:center;          /* vertikal mittig */
  padding:3vh 6vw 3vh 6vw;
}
.done-inner{
  margin:0 auto;
}
.done-title{
  font:900 clamp(36px,6vw,76px)/1.05 'Avenir Next Heavy',system-ui,sans-serif;
  margin:0 0 50px 0;
  letter-spacing:.2px;
}
.done-text{
  max-width:720px;
  font:500 26px/1.45 'Avenir Next',system-ui,sans-serif;
  margin:0 0 50px 0;
  color:#1a1a1a;
}
.done-actions .btn{ gap:12px; }

/* Header: Ergebnis (8) gelb + invertiertes Logo.
   Done (10) wieder normal/schwarz. */
body[data-quiz-step="8"] .site-header{
  background:#f6c642; padding:10px 14px; border-radius:12px;
}
body[data-quiz-step="8"] .site-header .custom-logo{
  filter:brightness(0) invert(1);
}
body[data-quiz-step="10"] .site-header{
  background:transparent; padding:0;
}
body[data-quiz-step="10"] .site-header .custom-logo{
  filter:none;
}


/* ---------- Idle-Modal (Countdown) ---------- */
.idle-modal{
  position:fixed; inset:0; z-index:9999;
  display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.35);
}
.idle-modal.is-open{ display:flex; }
.idle-card{
  background:#fff; border-radius:20px; padding:26px 28px;
  box-shadow:0 12px 45px rgba(0,0,0,.2); width:min(680px,92vw);
}
.idle-title{ font:900 32px/1.1 'Avenir Next Heavy',system-ui,sans-serif; margin:0 0 2px; }
.idle-text{  font:500 18px/1.45 'Avenir Next',system-ui,sans-serif; margin:0; color:#222; }
.idle-row{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:16px; }
.idle-count{ font:900 40px/1 'Avenir Next Heavy',system-ui,sans-serif; color:#b23b27; }
.idle-actions .btn{ gap:10px; }

.result-ill {height: 100%;
    align-items: flex-end;
    display: flex;}

  /* Nav-Buttons größer */
  .nav { gap: 20px; margin-top: 15%; }
  .btn { font-size: 28px; padding: 15px 35px; }
  .start { font-size: 40px; padding: 20px 40px; }
  .btn svg { width: 40px; height: 40px; }
  .start svg { width: 65px; height: 65px; }
	
  .q1 .qimage img {padding: 20px 10% 40px 20%; }
  .q2 .qimage img {padding: 30px 0 0 30%}
  .q3 .qimage img {padding: 0;}	
  .q4 .qimage img {padding: 30px 0 30px 45%;}
  .q5 .qimage img {padding: 0 0 0 20%;}	
  .q6 .qimage img {padding: 30px 0 80px 0;}	
	


/* Datenschutz-Popup */
.privacy-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.privacy-modal.is-open { display: flex; }

.privacy-card {
  background: #fff;
  max-width: 800px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 18px;
  padding: 40px 50px;
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
  position: relative;
  font-family: 'Avenir Next', system-ui, sans-serif;
  color: #222;
}

.privacy-card h3 {
  font-size: 26px;
  margin: 0 0 20px;
  line-height: 1.3;
}

.privacy-card p {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.5;
}

.privacy-close {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 32px;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 1;
  color: #000;
}

.privacy-close:hover { opacity: .6; }



/* Responsive */
@media (max-width: 1200px){
  .qgrid{grid-template-columns:1fr;gap:24px}
  .result-grid{grid-template-columns:1fr}
  .question{font-size:48px}
  .result-name{font-size:64px}
  .result-actions{margin-top:24px}
}



/* =========================
   QHD / 1440p (ab 1921px)
   ========================= */
@media (min-width: 1920px) {
  /* Container breiter */
  
  /*
  .intro-inner,
  .qinner,
  .result-inner,
  .lottery-inner,
  .done-inner { width: min(2000px, 95vw); }
  */
	
  .intro {
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 28vh 6vw 4vh 6vw;
  }	
	
  .intro h1 {
    font-family: 'Avenir Next Heavy', system-ui, sans-serif;
    font-weight: 900;
    line-height: 1.2;
    font-size: 170px;
    margin: 0 0 38px 0;
    letter-spacing: .2px;
  }	
	
	.qwrap {
		padding: 25vh 5vw 0 5vw;
	}
	
  .site-header .custom-logo {
        height: 65px;
        margin-top: 7vh;
        margin-right: 6vh;
   }
	
  /* Mehr Platz für die Frage links */
  .qgrid {
        grid-template-columns: 1fr 1fr;
        gap: 5.5vw;
    }

  /* Frage/Stepper größer */
  .stepper  { font-size: 26px; }
  .question { font-size: min(4.1vw, 90px); line-height: 1.1 }

  /* Antworten spürbar größer, aber begrenzt breit */
  .options { max-width: 820px; }
  .option {
    font-size: 28px;
    padding: 30px 36px;
    border-radius: 20px;
  }

  /* Nav-Buttons größer */
  .nav { gap: 20px; margin-top: 15%; }
  .btn { font-size: 28px; padding: 15px 35px; }
  .start { font-size: 40px; padding: 20px 40px; }
  .btn svg { width: 40px; height: 40px; }
  .start svg { width: 65px; height: 65px; }
	
  .q1 .qimage img {padding: 20px 10% 40px 20%; }
  .q2 .qimage img {padding: 30px 0 0 30%}
  .q3 .qimage img {padding: 0;}	
  .q4 .qimage img {padding: 30px 0 30px 45%;}
  .q5 .qimage img {padding: 0 0 0 20%;}	
  .q6 .qimage img {padding: 30px 0 80px 0;}	
	

/* 
  .qimage img { max-width: 110%; }
*/	
	.result-screen {
		padding: 12vh 6vw 3vh 6vw;
	}	
	
  .result-grid {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 0vw 5vw;
    align-items: flex-start;
    height: 100%; }	

  /* Ergebnis-Screen Typo */
  .result-titleTop { font-size: 65px; }
  .result-name     { font-size: 120px; margin: 0 0 70px;}
  .result-list li {
      font-size: 30px;
      padding-left: 54px;
      max-width: 750px;
      line-height: 1.2;
	  margin: 2rem 0;
    }
  .result-list li::before { width: 30px; height: 30px; }
  .result-list li::after  { left: 9px; width: 14px; height: 8px; }
  .result-actions { gap: 20px; margin-top: 50px; }
	
  .result-ill img { }

  /* Gewinnspiel */
  .lottery-title    { font-size: clamp(40px, 7vw, 132px); }
  .lottery-inputRow { max-width: 760px; border-bottom-width: 3px; margin-bottom: 60px; }
  .lottery-input    { font-size: 32px; padding: 16px 6px 12px 0; }
	
  .lottery-legal {
    margin-top: 4%;}	
  	

  /* Done-Screen */
  .done-title { font-size: clamp(42px, 6.2vw, 108px); }
  .done-text  { font-size: 20px; max-width: 940px; }

  /* Header-Logo etwas größer */
  .site-header .custom-logo { max-height: 104px; }
		
	
}

/* =========================
   2560×1440 (QHD groß)
   ========================= */
@media (min-width: 2560px) {
  /* Container deutlich breiter */

  /* Mehr Fläche für die Frage links */
  .qgrid { grid-template-columns: 1fr 1fr; gap: 4vw; }

  /* Typo – groß & präsent */
  .intro h1 { font-size: min(10vw, 230px); line-height: 1.2; margin: 0 0 80px 0; }
  .stepper {font-size: 35px; font-weight: 400; margin: 0 0 40px; }
  .question {font-size: clamp(84px, 4vw, 100px); line-height: 1.2; max-width: 1000px; }

  /* Antworten: breiter & höher */
  .options { max-width: 1100px; gap: 30px; margin-top: 35px; }
  .option {font-size: 40px; padding: 36px 44px; border-radius: 22px; text-align: left; }

  /* Nav/CTAs kräftiger */
  .nav { gap: 30px; margin-top: 150px; }
  .start { font-size: 55px; padding: 40px 60px; }
  .start svg { width: 70px; height: 70px; }
  .btn { font-size: 40px; padding: 26px 45px; }
  .btn svg { width: 50px; height: 50px; }

/* 
  .qimage img { max-width: 120%; }
*/
	
  /* Ergebnis-Screen */
	
  .result-grid {grid-template-columns: 1.3fr .7fr; gap: 0 4vw;}	
  .result-titleTop { font-size: 90px; }
  .result-name     { font-size: clamp(120px, 7vw, 170px); margin: 0 0 100px; line-height: 1.1}
  .result-list li  { font-size: 38px; padding-left: 80px; line-height: 1.2; margin: 2rem 0; max-width: 1000px; }
  .result-list li::before { width: 45px; height: 45px; }
  .result-list li::after  { left: 16px; width: 18px; height: 14px; }
  .result-actions { margin-top: 48px; gap: 24px; }
  .result-ill img { max-width: 100%; height: 700px; padding-top: 0;}
	
  .result-ill {height: 100%; align-items: flex-end; display: flex; min-height: 800px; padding-bottom: 80px}	

  /* Gewinnspiel */
  .lottery-title {
        font-size: clamp(48px, 7vw, 165px);
        max-width: 90%;
   }
  .lottery-inputRow { max-width: 900px; border-bottom-width: 3px; }
  .lottery-input    { font-size: 24px; padding: 18px 6px 14px 0; }

  /* Done-Screen */
  .done-title { font-size: clamp(56px, 6.0vw, 100px); line-height: 1.1; max-width: 70%; margin: 0 0 50px 0; }
  .done-text  { font-size: 39px; max-width: 60%; margin: 0 0 50px 0; }

  /* Header-Logo größer */
  .site-header .custom-logo {
        max-height: 120px;
        height: 90px;
        margin-top: 8vh;
        margin-right: 6vh;
    }


  .q1 .qimage img {padding: 30px 10% 50px 20%; }
  .q2 .qimage img {padding: 30px 0 0 30%}
  .q3 .qimage img {padding: 0;}	
  .q4 .qimage img {padding: 30px 0 30px 45%;}
  .q5 .qimage img {padding: 0 0 0 20%;}	
  .q6 .qimage img {padding: 3% 0 90px 0;}

  .lottery-input {font-size: 40px;}

  .lottery-legal {
    margin-top: 120px;
    font-size: 21px;
   }
	
   .done-actions .btn {
    gap: 40px; 
	font-size: 55px;
    padding: 40px 60px;}	
	
	.done-actions .btn svg {
        width: 100px;
        height: 100px;
    }
	
   .privacy-card {
	  max-width: 950px;
	  width: 90%;
	  overflow-y: auto;
	  border-radius: 18px;
	}

	.privacy-card h3 {
	  font-size: 30px;
	  line-height: 1.3;
	}

	.privacy-card p {
	  font-size: 20px;
	  line-height: 1.5;
	}

	.privacy-close {
	  top: 20px;
	  right: 24px;
	  font-size: 40px;
	  line-height: 1;
	}	
	
	
}

/* =========================
   4K / UHD (3840×2160)
   ========================= */
@media (min-width: 3200px) {
  
  /*
  .intro-inner,
  .qinner,
  .result-inner,
  .lottery-inner,
  .done-inner { width: min(3200px, 92vw); }
  */
	
  .qwrap {padding: 25vh 6vw 0 6vw;}	

  .qgrid {grid-template-columns: 1fr 1fr; gap: 4.1vw; }

  .intro h1 {font-size: min(9.5vw, 350px); line-height: 1.2; margin: 0 0 100px 0;}
  .stepper  { font-size: 60px; margin: 0 0 30px;}
  .question { font-size: clamp(120px, 4.9vw, 160px); line-height: 1.2; max-width: 1460px; }

  .options { max-width: inherit; gap: 40px; padding-top: 130px; }
  .option  { font-size: 60px; padding: 50px 70px; border-radius: 24px; text-align: left; border: 3px solid var(--brand-yellow); }

  .btn { font-size: 60px; padding: 40px 60px; gap: 30px; }
  .btn svg { width: 60px; height: 60px; }
  .start { font-size: 90px; padding: 50px 100px; gap: 40px; }
  .start svg { width: 140px; height: 140px; }
	
  .done-actions .btn {
        font-size: 80px;
        padding: 57px 74px;
        gap: 50px;
    }	
	
   .done-actions .btn svg {
        width: 150px;
        height: 150px;
    }	

/*	
  .qimage img { max-width: 130%; }
*/
	
  .result-titleTop { font-size: 135px; margin: 0 0 0 0;}
  .result-name     { font-size: clamp(160px, 7vw, 240px); line-height: 1.1; margin-bottom: 100px; }
  .result-list li  { font-size: 60px; padding-left: 100px; padding-right: 0; max-width: 1300px;}
  .result-list li::before { width: 60px; height: 60px; }
  .result-list li::after  { left: 22px; width: 20px; height: 20px; }

  .lottery-title    { font-size: clamp(64px, 6.5vw, 250px); margin: 0 0 200px 0; }
  .lottery-inputRow { max-width: 1040px; }
  .lottery-input    { font-size: 60px; }

  .done-text { font-size: 60px; max-width: 1780px; margin: 0 0 160px 0;}

  .site-header .custom-logo { max-height: 140px; height: 140px; margin-right: 5vw; margin-top: 9vh;}
	
/*  
  .qimage img {max-width: 100%; height: 750px; }
*/
	
  .result-ill img {
        max-width: 100%;
        height: 100%;
        max-height: 980px;
    } 
	

  .q1 .qimage img {padding: 30px 10% 50px 20%;}
  .q2 .qimage img {padding: 30px 0 0 30%}
  .q3 .qimage img {padding: 0;}	
  .q4 .qimage img {padding: 30px 0 30px 45%;}
  .q5 .qimage img {padding: 0 0 0 20%;}	
  .q6 .qimage img {padding: 90px 0 90px 0;}


	
  .nav {gap: 60px; padding-top: 200px;}
	
  .q3 .nav, .q5 .nav {padding-top: 100px;}	
  
  .q3 .question {margin-bottom: -50px;}

  .result-grid {grid-template-columns: 1.2fr .8fr; gap: 0 10vw;}
	
  .result-actions {gap: 60px;}
	
  .lottery-label {font: 400 60px / 1 'Avenir Next', system-ui, sans-serif; margin: 0 0 60px 0;}

  .lottery-input {font-size: 60px;}
  .lottery-actions {margin-top: 70px;}
  .lottery-legal {margin-top: 4%; font-size: 40px}
  .done-title {font-size: clamp(56px, 6.2vw, 160px); padding-right: 800px; line-height: 1.2; margin: 0 0 90px 0; max-width: 100%;}
	
  .idle-card {padding: 50px 50px; box-shadow: 0 12px 45px rgba(0, 0, 0, .2); width: min(680px, 92vw);}
  .idle-title {font: 900 60px / 1.1 'Avenir Next Heavy', system-ui, sans-serif; margin: 0 0 10px;}
  .idle-text {font: 500 40px / 1.45 'Avenir Next', system-ui, sans-serif; }	
  .idle-count {font: 900 80px / 1 'Avenir Next Heavy', system-ui, sans-serif;}
	
	
   .privacy-card {
	  max-width: 1400px;
	  width: 90%;
	  overflow-y: auto;
	  border-radius: 18px;
	}

	.privacy-card h3 {
	  font-size: 45px;
	  line-height: 1.3;
	}

	.privacy-card p {
	  font-size: 30px;
	  line-height: 1.5;
	}

	.privacy-close {
	  top: 20px;
	  right: 24px;
	  font-size: 80px;
	  line-height: 1;
	}		
	
}