:root{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  color:#fff;
  background:#05090d;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#05090d}
body{overflow-x:hidden}
button,input,select{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}

.app{
  width:100%;
  max-width:430px;
  min-height:100vh;
  margin:0 auto;
  background:#05090d;
}

/* ---------- STARTSEITE ---------- */
.home-screen{padding-bottom:22px}
.home-hero{
  height:620px;
  position:relative;
  overflow:hidden;
  background:url("asla-tirol-hero.png") center 31%/cover no-repeat;
}
.hero-shade{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(2,8,14,.28) 0%,rgba(2,8,14,.04) 35%,rgba(2,8,14,.18) 57%,rgba(5,9,13,.92) 88%,#05090d 100%);
}
.home-brand{
  position:absolute;
  z-index:2;
  left:18px; right:18px;
  top:calc(env(safe-area-inset-top,0px) + 44px);
  display:flex;
  align-items:center;
  gap:13px;
}
.ats-logo{
  width:62px;height:62px;border-radius:16px;
  display:grid;place-items:center;
  background:#ef1725;
  font-weight:900;font-size:24px;
  box-shadow:0 10px 24px #0008;
  flex:0 0 auto;
}
.home-brand h1{
  margin:0;
  font-size:25px;
  line-height:1.05;
  letter-spacing:-.7px;
  white-space:nowrap;
  text-shadow:0 2px 10px #000a;
}
.home-brand p{
  margin:4px 0 0;
  color:#e0e6eb;
  font-size:13px;
  text-shadow:0 2px 8px #000a;
}
.hero-copy{
  position:absolute;
  z-index:2;
  left:24px;right:24px;
  bottom:80px;
}
.script-text{
  font-family:"Snell Roundhand","Segoe Script","Bradley Hand",cursive;
  font-size:25px;
  line-height:.95;
  font-style:italic;
  margin-bottom:18px;
  transform:rotate(-4deg);
  text-shadow:0 3px 10px #000c;
}
.hero-copy h2{
  margin:0;
  font-size:36px;
  line-height:1;
  letter-spacing:-1.1px;
  text-shadow:0 3px 12px #000c;
}
.red-line{width:64px;height:4px;border-radius:99px;background:#ff1827;margin:13px 0}
.hero-copy p{margin:0;font-size:15px;line-height:1.35;color:#f1f3f5;text-shadow:0 2px 8px #000c}

.level-grid{
  position:relative;
  z-index:5;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  padding:0 12px;
  margin-top:-75px;
}
.level-card{
  min-width:0;
  min-height:190px;
  border-radius:16px;
  border:1px solid #ffffff44;
  color:#fff;
  padding:10px 7px 9px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  box-shadow:0 12px 25px #0007;
}
.level-card.bronze{background:linear-gradient(180deg,#7c3b1d,#3b1b10);border-color:#c5734e}
.level-card.silver{background:linear-gradient(180deg,#4a5865,#232d36);border-color:#8996a0}
.level-card.gold{background:linear-gradient(180deg,#ad8204,#594200);border-color:#e8bd29}
.medal{font-size:37px;line-height:1}
.level-card strong{font-size:16px;margin-top:8px}
.level-card span{font-size:12px;color:#edf0f2;margin-top:5px}
.level-card em{
  width:100%;
  margin-top:auto;
  border-radius:10px;
  padding:9px 5px;
  background:#ff1724;
  font-style:normal;
  font-size:12px;
  font-weight:800;
}
.home-footer{
  text-align:center;
  padding:25px 16px 4px;
  color:#d0d6db;
  font-size:8px;
  letter-spacing:2.2px;
}
.mountain{font-size:27px;letter-spacing:-7px;color:#fff;margin-bottom:5px}

/* ---------- ALLE UNTERSEITEN ---------- */
.content-screen{
  min-height:100vh;
  padding:
    calc(env(safe-area-inset-top,0px) + 72px)
    18px
    calc(env(safe-area-inset-bottom,0px) + 40px);
  background:#05090d;
}
.screen-card{
  width:100%;
  margin:0 auto;
  padding:24px 20px;
  border:1px solid #2c3540;
  border-radius:24px;
  background:#12171d;
  box-shadow:0 16px 40px #0006;
}
.screen-card h2{
  margin:0 0 22px;
  font-size:30px;
  line-height:1.15;
}
.screen-intro{margin:-10px 0 20px;color:#aab3bd}

/* Gold Auswahl */
.gold-choices{display:grid;gap:14px}
.choice{
  border:1px solid #806a23;
  border-radius:18px;
  padding:20px 18px;
  background:linear-gradient(135deg,#5a491b,#2d2818);
  color:#fff;
  text-align:left;
}
.choice strong{display:block;font-size:18px}
.choice span{display:block;color:#d8cb90;margin-top:6px;font-size:14px}

/* Bronze/Silber/Gold gleicher Aufbau */
.menu-card{padding-top:30px}
.mode-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  margin:20px 0 26px;
}
.mode-btn{
  width:min(100%,340px);
  min-height:78px;
  border:0;
  border-radius:18px;
  background:#252c34;
  color:#fff;
  font-size:22px;
  font-weight:650;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.select-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  font-size:18px;
  margin-top:12px;
}
select,input{
  min-width:0;
  background:#0d1116;
  color:#fff;
  border:1px solid #3a4652;
  border-radius:12px;
  padding:12px;
  font-size:16px;
}
.bottom-back{
  width:100%;
  margin-top:30px;
  padding:15px 18px;
  border:1px solid #3a4652;
  border-radius:15px;
  background:#20272e;
  color:#fff;
  font-size:17px;
  font-weight:700;
}

/* Lernmodus */
.topbar,.quiz-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}
.nav-btn,.cancel-btn{
  border:1px solid #3d4854;
  border-radius:12px;
  background:#20272e;
  color:#fff;
  padding:11px 14px;
  font-weight:700;
}
#search{flex:1}
.learnItem{border-top:1px solid #2d3640;padding:15px 0}
.learnItem button{
  width:100%;
  text-align:left;
  background:none;
  border:0;
  color:#fff;
  padding:0;
  font-size:16px;
  font-weight:700;
}
.answerReveal{
  margin-top:10px;
  padding:13px;
  border-radius:12px;
  background:#10331e;
  color:#c7ffd8;
}

/* Test – bewusst KEIN Header darüber */
.quiz-wrap{padding-top:20px}
.quiz-topbar{
  position:relative;
  z-index:5;
}
.cancel-btn{
  background:#20272e;
  color:#fff;
}
#progressText{color:#c7cdd3;font-weight:700}
.progress{
  height:9px;
  background:#2a3139;
  border-radius:99px;
  overflow:hidden;
  margin:8px 0 18px;
}
#progressBar{height:100%;width:0;background:#d71920}
.question-card{
  background:#0d1116;
  border:1px solid #252e37;
  border-radius:20px;
  padding:18px;
}
.question-card small{color:#9ba6b0}
.question-card h2{
  margin:9px 0 16px;
  font-size:23px;
  line-height:1.3;
}
.answer{
  width:100%;
  text-align:left;
  margin:8px 0;
  padding:14px;
  border-radius:14px;
  border:1px solid #37424d;
  background:#20272e;
  color:#fff;
  font-size:16px;
}
.answer.correct{background:#103f23;border-color:#24b15a}
.answer.wrong{background:#4a1619;border-color:#e84d54}
.feedback{padding:12px;border-radius:12px;background:#232931;margin-top:12px}
.primary{
  width:100%;
  margin-top:14px;
  padding:15px 18px;
  border:0;
  border-radius:15px;
  background:#d71920;
  color:#fff;
  font-size:17px;
  font-weight:800;
}
.score{
  font-size:26px;
  font-weight:800;
  text-align:center;
  padding:20px;
  border-radius:18px;
  background:#20272e;
  margin-bottom:16px;
}
.mistake{padding:12px 0;border-top:1px solid #2e3740}
.mistake .good{color:#6ee393}
.mistake .bad{color:#ff7b80}

/* Hinweis nur auf Startseite sichtbar */
.legal-footer{
  display:none;
}

@media(max-width:380px){
  .home-brand h1{font-size:22px}
  .home-brand p{font-size:11px}
  .ats-logo{width:56px;height:56px;font-size:22px}
  .home-hero{height:590px}
  .hero-copy h2{font-size:32px}
  .level-card{min-height:180px}
  .mode-btn{font-size:20px}
}


/* =========================================================
   V19 – Gold-Auswahl sauber mittig + Zurück immer sichtbar
   ========================================================= */
.gold-menu-card{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.gold-menu-card h2{
  width:100%;
  text-align:center;
  margin-bottom:16px;
}

.gold-menu-card .screen-intro{
  width:100%;
  max-width:340px;
  text-align:center;
  margin:0 auto 22px;
}

.gold-choices{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

.gold-choice{
  width:min(100%,340px);
  min-height:96px;
  margin:0 auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.gold-choice strong{
  font-size:18px;
}

.gold-choice span{
  margin-top:7px;
}

.gold-back{
  width:min(100%,340px);
  margin:28px auto 0;
  display:block;
}

/* Gold nach Auswahl exakt wie Bronze/Silber */
#menu .mode-actions{
  width:100%;
  align-items:center;
}

#menu .mode-btn{
  width:min(100%,340px);
  margin-left:auto;
  margin-right:auto;
}

/* Zurück auf der Stufenseite ebenfalls mittig */
#menu #backHome{
  width:min(100%,340px);
  margin:30px auto 0;
  display:block;
}

/* Test-Abbrechen klar sichtbar und niemals von Inhalten überlagert */
#quiz .quiz-topbar{
  position:relative;
  z-index:20;
}
#quiz #backMenu2{
  pointer-events:auto;
  position:relative;
  z-index:30;
}

/* Erste Frage bekommt zusätzlichen Abstand unter der Testleiste */
#quiz .question-card{
  margin-top:4px;
}

@media(max-width:380px){
  .gold-choice,
  .gold-back,
  #menu .mode-btn,
  #menu #backHome{
    width:100%;
  }
}


/* =========================================================
   V20 – Lange Fragen/Antworten vollständig lesbar
   Lernmodus + Testmodus
   ========================================================= */

/* Unterseiten dürfen bei langen Inhalten immer vollständig scrollen */
.content-screen,
#learn,
#quiz{
  height:auto;
  min-height:100dvh;
  overflow:visible;
}

.screen-card,
.question-card,
#learnList,
#answers{
  min-width:0;
  max-width:100%;
}

/* Lange Wörter/Zeilen können nichts mehr aus dem Bildschirm drücken */
.learnItem button,
.answerReveal,
.question-card h2,
.answer,
.feedback{
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;
}

/* Lernmodus kompakter, aber weiterhin gut lesbar */
.learnItem{
  padding:13px 0;
}
.learnItem button{
  font-size:15px;
  line-height:1.35;
}
.answerReveal{
  font-size:14px;
  line-height:1.42;
  padding:11px 12px;
}

/* Testmodus: mehr Platz für lange Fragen und Antworten */
.question-card{
  padding:15px;
}
.question-card h2{
  font-size:20px;
  line-height:1.28;
  margin:8px 0 13px;
}
.answer{
  font-size:14.5px;
  line-height:1.35;
  padding:11px 12px;
  margin:7px 0;
}
.feedback{
  font-size:14px;
  line-height:1.4;
  padding:10px 11px;
}
.primary{
  padding:13px 16px;
}

/* Auf kleineren iPhones noch etwas kompakter */
@media(max-width:390px){
  .content-screen{
    padding-left:12px;
    padding-right:12px;
  }
  .screen-card{
    padding-left:15px;
    padding-right:15px;
  }
  .question-card{
    padding:13px;
  }
  .question-card h2{
    font-size:18px;
    line-height:1.27;
  }
  .answer{
    font-size:13.5px;
    line-height:1.32;
    padding:10px 11px;
  }
  .learnItem button{
    font-size:14.5px;
  }
  .answerReveal{
    font-size:13.5px;
  }
}

/* Sehr kleine Displays */
@media(max-width:350px){
  .question-card h2{font-size:17px}
  .answer{font-size:13px;padding:9px 10px}
  .answerReveal{font-size:13px}
}

/* =========================================================
   V22 – Startseiten-Design Feuerwehr Zirl
   Nur Startseite/Branding geändert; Lern- und Testansichten bleiben V21.
   ========================================================= */
.home-hero{
  height:620px;
  background:url("asla-tirol-hero-v22.jpg") center 48%/cover no-repeat;
}
.hero-shade{
  background:
    linear-gradient(180deg,rgba(2,5,9,.12) 0%,rgba(2,5,9,.02) 34%,rgba(2,5,9,.12) 56%,rgba(5,9,13,.82) 88%,#05090d 100%),
    linear-gradient(90deg,rgba(2,5,9,.28),transparent 55%);
}
.home-brand{
  top:calc(env(safe-area-inset-top,0px) + 24px);
  left:18px;
  gap:11px;
}
.ffz-crest{
  width:54px;
  height:64px;
  object-fit:cover;
  object-position:center;
  border-radius:8px;
  box-shadow:0 8px 22px #0008;
}
.home-brand h1{font-size:25px;letter-spacing:-.5px}
.home-brand p{font-size:20px;margin-top:2px;color:#c8d4df}
.hero-copy{left:24px;right:24px;bottom:82px}
.hero-copy h2{font-size:42px;line-height:.92;letter-spacing:-1.4px}
.hero-copy h2 span{color:#fff}
.hero-copy h2 b{color:#f0222e;font-weight:900}
.hero-copy h3{margin:13px 0 0;font-size:25px;line-height:1.05}
.hero-copy p{font-size:15px}
.level-grid{margin-top:-72px}
.ffz-footer{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:11px;
  text-align:left;
  padding:26px 18px 7px;
  letter-spacing:0;
}
.ffz-footer-crest{
  width:42px;
  height:50px;
  object-fit:cover;
  border-radius:6px;
  flex:0 0 auto;
}
.ffz-footer-copy{display:flex;flex-direction:column;gap:3px}
.ffz-footer-copy strong{font-size:13px;color:#fff;letter-spacing:0}
.ffz-footer-copy span{font-size:10px;color:#aeb9c3;letter-spacing:.1px}
@media(max-width:350px){
  .hero-copy h2{font-size:37px}
  .home-brand h1{font-size:22px}
  .home-brand p{font-size:18px}
  .ffz-footer-copy strong{font-size:12px}
}


/* =========================================================
   V23 – Copyright + echte Querformat-/Vollbild-Anpassung
   Fragen, Antworten und Content-Schriftgrößen bleiben unverändert.
   ========================================================= */
.home-copyright{
  margin-left:auto;
  align-self:flex-end;
  padding:0 2px 2px 8px;
  color:#aeb9c3;
  font-size:16px;
  line-height:1;
  font-weight:600;
}

/* Im Querformat die bisherige 430px-Handybegrenzung aufheben. */
@media (orientation:landscape) and (min-width:560px){
  .app{max-width:none;width:100%;min-height:100dvh}
  .home-screen{min-height:100dvh;padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}
  .home-hero{height:100dvh;min-height:390px;background-position:center 50%}
  .home-brand{
    top:calc(env(safe-area-inset-top,0px) + 18px);
    left:calc(env(safe-area-inset-left,0px) + 24px);
  }
  .hero-copy{
    left:calc(env(safe-area-inset-left,0px) + 28px);
    right:auto;
    bottom:132px;
    width:min(46vw,560px);
  }
  .hero-copy h2{font-size:clamp(38px,5.4vw,66px)}
  .hero-copy h3{font-size:clamp(22px,2.6vw,31px)}
  .hero-copy p{font-size:clamp(14px,1.55vw,18px)}
  .level-grid{
    position:absolute;
    left:calc(env(safe-area-inset-left,0px) + 28px);
    right:calc(env(safe-area-inset-right,0px) + 28px);
    bottom:18px;
    margin:0;
    padding:0;
    gap:12px;
  }
  .level-card{min-height:104px;padding:8px 12px;border-radius:14px}
  .medal{font-size:28px}
  .level-card strong{font-size:16px;margin-top:3px}
  .level-card span{font-size:11px;margin-top:2px}
  .level-card em{padding:6px 5px;margin-top:6px;font-size:11px}
  .ffz-footer{
    position:absolute;
    z-index:8;
    top:calc(env(safe-area-inset-top,0px) + 18px);
    right:calc(env(safe-area-inset-right,0px) + 24px);
    width:auto;
    padding:0;
    background:rgba(5,9,13,.38);
    border-radius:12px;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    padding:8px 10px;
  }
  .ffz-footer-crest{width:32px;height:38px}
  .ffz-footer-copy strong{font-size:12px}
  .ffz-footer-copy span{font-size:9px}
  .home-copyright{font-size:14px;padding-left:5px}

  /* Unterseiten nutzen im Querformat ebenfalls die volle Breite. */
  .content-screen{
    min-height:100dvh;
    padding:calc(env(safe-area-inset-top,0px) + 22px)
            calc(env(safe-area-inset-right,0px) + 24px)
            calc(env(safe-area-inset-bottom,0px) + 24px)
            calc(env(safe-area-inset-left,0px) + 24px);
  }
  .screen-card{max-width:900px}
}

/* V24 – Feuerwehr-Zirl-Logo im Footer; Inhalte/Fragen unverändert */
.ffz-footer-logo{
  width:min(235px,68vw);
  height:auto;
  display:block;
  object-fit:contain;
  flex:0 1 auto;
}
@media (orientation:landscape) and (min-width:560px){
  .ffz-footer-logo{width:min(210px,25vw)}
}

/* =========================================================
   V25 – Startseiten-Branding kompakter
   Nur Optik der Startseite; Fragen/Antworten/Logik unverändert.
   ========================================================= */
.home-brand{gap:9px}
.ffz-crest{width:46px;height:55px}
.home-brand h1{font-size:21px}
.home-brand p{font-size:16px}
.hero-copy h2{font-size:36px;line-height:.93;letter-spacing:-1.1px}
.ffz-footer-logo{width:min(185px,55vw)}
.home-copyright{font-size:13px}

@media(max-width:350px){
  .ffz-crest{width:42px;height:50px}
  .home-brand h1{font-size:19px}
  .home-brand p{font-size:15px}
  .hero-copy h2{font-size:33px}
  .ffz-footer-logo{width:min(170px,54vw)}
  .home-copyright{font-size:12px}
}

@media (orientation:landscape) and (min-width:560px){
  .ffz-crest{width:42px;height:50px}
  .home-brand h1{font-size:20px}
  .home-brand p{font-size:15px}
  .hero-copy h2{font-size:clamp(34px,4.6vw,56px)}
  .ffz-footer-logo{width:min(170px,21vw)}
  .home-copyright{font-size:12px}
}

/* =========================================================
   V27 – Footer-Logo und Copyright dezenter/kleiner
   Nur Optik der Startseite; Fragen/Antworten/Logik unverändert.
   ========================================================= */
.ffz-footer-logo{width:min(125px,38vw)}
.home-copyright{font-size:10px;font-weight:500}
@media(max-width:350px){
  .ffz-footer-logo{width:min(112px,37vw)}
  .home-copyright{font-size:9px}
}
@media (orientation:landscape) and (min-width:560px){
  .ffz-footer-logo{width:min(120px,15vw)}
  .home-copyright{font-size:10px}
}