@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

body {
  margin: 0;
  font-family: 'Inter', 'Arial', sans-serif;
  min-height: 100vh;
  background: #161926;
  color: #ecf1fa;
  position: relative;
  overflow-x: hidden;
}

#bgCanvas {
  position: fixed;
  z-index: -10;
  left: 0; top: 0;
  width: 100vw; height: 100vh;
  background: linear-gradient(135deg, #1a2040 0%, #0b1323 100%);
  animation: bgfade 20s ease-in-out alternate infinite;
}
@keyframes bgfade {
  0% { filter: blur(0px);}
  100% { filter: blur(2.5px);}
}

header {
  text-align: center;
  padding: 68px 12px 38px 12px;
  background: transparent;
  animation: fadein 1.1s cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes fadein {
  from { opacity: 0; transform: translateY(-30px);}
  to   { opacity: 1; transform: none;}
}

h1 {
  font-size: 2.8rem;
  font-weight: 700;
  color: #eaf2fb;
  letter-spacing: 0.01em;
  text-shadow: 0 6px 52px #3789fabb, 0 1px 24px #62d1ec95;
  margin-bottom: .23em;
  background: linear-gradient(90deg, #16c8ee 20%, #8862fd 82%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: saturate(110%);
}

.header-underline {
  width: 250px;
  height: 4px;
  margin: 0 auto 2.4em auto;
  background: linear-gradient(90deg,#19cfff 0%,#8d5fff 100%);
  border-radius: 99px 99px 2px 2px;
  opacity: 0.68;
  box-shadow: 0 2px 22px #34e3e391;
}
main#app {
  width: 100%;
  max-width: 890px;
  margin: 0 auto;
  min-height: 420px;
  padding-bottom: 48px;
}

.section-title {
  text-align: center;
  font-size: 1.43rem;
  font-weight: 700;
  color: #b7cff6;
  letter-spacing: .018em;
  margin-top: .9em;
  margin-bottom: .38em;
}

.subjects-section-title {
  text-align: center;
  font-size: 1.13rem;
  margin-bottom: 2.1em;
  color: #a3bde0;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.1rem 3.3vw;
  margin-bottom: 2.5rem;
  margin-top: .3em;
}

.better-glow-card {
  background: linear-gradient(120deg,rgba(36,44,72,.96) 65%,rgba(45,54,97,0.97) 100%);
  border-radius: 26px;
  min-width: 220px;
  width: 305px;
  min-height: 122px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 2em;
  position: relative;
  border: none;
  box-shadow: 0 7px 50px 0 #0babe666, 0 3px 7px #4834ec17;
  transition: 
    transform .22s cubic-bezier(.55,1.4,.63,1),
    box-shadow .22s,background .17s;
  cursor: pointer;
  overflow: hidden;
  animation: popin 0.40s cubic-bezier(.09,1.2,.77,1) both;
}

@keyframes popin {
  0% { opacity: 0; transform: scale(0.96);}
  70%{ opacity: 1; transform: scale(1.06);}
  100%{ opacity:1; transform:scale(1);}
}
.better-glow-card:hover, .better-glow-card:focus {
  background: linear-gradient(95deg, #2cf2ea 0%, #6d71ff 100%);
  box-shadow: 0 15px 64px #2cf2ea44, 0 2px 24px #211b66a6;
  transform: scale(1.04) translateY(-8px);
  filter: saturate(1.03);
}
.card-emoji {
  font-size: 2.1em;
  margin-bottom: 0.27em;
  filter: drop-shadow(0 1px 0 #eee8) drop-shadow(0 4px 9px #3abcf038);
  animation: icon-float 2.5s infinite ease-in-out;
}
@keyframes icon-float {
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-9px);}
}
.card-label {
  color: #f7f9ff;
  font-weight: 700;
  letter-spacing: .01em;
  text-shadow: 0 2px 18px #2a469abb, 0 1px 0 #3451bc;
  font-size: 1.09em;
  text-align: center;
  margin-bottom:.3em;
  display:block;
}

.card-miniinfo {
  font-size: .95em;
  color: #9edaff;
  margin-top: 5px;
  font-weight: 500;
  opacity:.85;
  display: block;
  transition: color .2s;
}
.better-glow-card:hover .card-miniinfo{
  color: #181b1f;
}
.card-date {
  font-size: 0.93em;
  color: #8da5c4;
  margin-top: .5em;
}

/* ----- Lernmaterial ----- */
.cards-material { margin-top:19px; display: flex; flex-direction: column; gap: 17px;}
.material-card { background:linear-gradient(99deg,#242b3a,#282f46 77%); border-radius:20px;padding:1.2em 1.3em;box-shadow:0 2px 18px #37c5ed19;display:flex;align-items:center;gap:1.18em;}
.material-title{font-weight:500;font-size:1.02em;color:#e3f6fc;}
.material-date{font-size:.96em;color:#b5b9ca;}
.download-btn{background:linear-gradient(88deg,#02dffe 18%,#4282fc 92%);color:#181a24;border:none;border-radius:8px;padding:0.7em 1.25em;font-weight:700;cursor:pointer;transition:background .15s,color .15s,box-shadow .19s;margin-left:auto;box-shadow:0 1.5px 12px #1bc5fd1d;}
.download-btn:hover{background:linear-gradient(91deg,#13202c 26%,#c5e6ff 100%);color:#219de9;box-shadow:0 3.5px 20px #45bcfc36;}

/* ----- TABs oben ----- */
.tabs-row {
  display: flex;
  justify-content: center;
  gap: 1.1rem;
  margin-bottom: 2.25rem;
  margin-top: 1.3em;
}
.tab-btn {
  background: #212742;
  color: #b0b8fa;
  border: none;
  padding: 0.77em 2.36em;
  outline: none;
  border-radius: 2em;
  font-size: 1.03rem;
  font-weight: 600;
  letter-spacing: .012em;
  position:relative;
  cursor: pointer;
  margin-right: 0.1em;
  box-shadow: 0 1.5px 14px #1a1c243a;
  transition: 
    background .14s,
    color .20s,
    box-shadow .21s,
    transform .20s;
}
.tab-btn.active, .tab-btn:focus  {
  background: linear-gradient(90deg,#0be5f7 0%,#7e60ff 100%);
  color:#fff;
  transform: scale(1.065);
  box-shadow: 0 2px 18px #13e8ce58;
  z-index:1;
}
.tab-btn:hover:not(.active) {
  filter: brightness(1.13) saturate(1.2);
  transform: scale(1.035);
}
.quiz-question, .quiz-box {
  background: linear-gradient(118deg,rgba(33,36,53,.77) 90%,rgba(32,33,49,.89));
  border-radius: 20px;
  padding: 1.23rem 1.23rem 1.03rem 1.23rem;
  margin-bottom: 1.15em;
  box-shadow: 0 5px 35px #15e2fa1a, 0 1.5px 9px #4950e01e;
  border: 1.7px solid #263749;
  /*animation: fadeBoxIn .34s cubic-bezier(.16,.88,.49,1.34) both;*/
}
@keyframes fadeBoxIn {
  0%{opacity:0;transform:translateY(25px) scale(.95);}
  100%{opacity:1;transform:none;}
}
.quiz-options {
  margin-top: .74rem;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.quiz-opt-btn {
  background: linear-gradient(92deg, #232450 0%, #3c425c 100%);
  color: #eaf5fa;
  padding: 1.07em 1.5em;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 0.38em;
  text-align: left;
  box-shadow: 0 2.5px 13px #16cacc19;
  position: relative;
  overflow: hidden;
  transition:
    background 0.17s,
    color 0.15s,
    box-shadow 0.17s,
    transform 0.14s,
    outline 0.19s;
}

.quiz-opt-btn:hover:enabled:not(.selected):not(.correct):not(.incorrect) {
  background: linear-gradient(91deg, #29e6e6 2%, #5467ea 100%);
  color: #fff;
  outline: 2px solid #31dfff54;
  z-index: 1;
}

.quiz-opt-btn.selected {
  background: linear-gradient(90deg, #37c7e7 0%, #52d2ca 100%);
  color: #172544;
  border: none;
  font-weight: 700;
  outline: 2.7px solid #3be1ffbd;
  box-shadow: 0 0 0 2px #22fff722;
  /* Remove/soften scale: */
  transform: none;
}
.quiz-opt-btn.correct {
  background: linear-gradient(90deg, #10bc81 0%, #58e6ad 100%);
  color: #133220;
  font-weight: 800;
  outline: 2.5px solid #5fffcfbe;
  box-shadow: 0 2px 20px #11f9d479;
}
.quiz-opt-btn.incorrect {
  background: linear-gradient(93deg, #ef4857 9%, #bf3955 98%);
  color: #fff;
  font-weight: 800;
  outline: 2px solid #ff6a7983;
  box-shadow: 0 1px 12px #f973a323;
}
.quiz-opt-btn:disabled {
  opacity: 0.69;
  background: linear-gradient(91deg,#252b37 58%,#282c42 100%);
  color: #7383ad !important;
  cursor: not-allowed;
  text-decoration: line-through;
}
.quiz-finish {
  text-align: center;
  font-size: 1.23em;
  color: #41d6bc;
  margin-top: 2em;
  margin-bottom: 1.25em;
  font-weight:650;
}
.quiz-score-details {
  text-align: center;
  color: #b6baca;
  margin-bottom: 1.2em;
  font-size: 1.06em;
}
.quiz-action-row {
  display: flex;
  justify-content: center;
  gap: 1.09em;
  margin-bottom: 2em;
}
.quiz-action-btn {
  background: linear-gradient(90deg,#11e8ff 0%,#765bff 100%);
  color: #191e28;
  font-weight: 900;
  border: none;
  border-radius: 10px;
  padding: 1em 2.15em;
  font-size: 1.08em;
  cursor: pointer;
  margin:.5em 0;
  box-shadow:0 1.5px 14px #34e4eb38;
  transition: 
    background .18s,
    color .16s,
    transform .18s,
    box-shadow .19s;
}
.quiz-action-btn.secondary {
  background: linear-gradient(90deg,#2f3355 10%,#364067 100%);
  color: #c7d3fd;
  font-weight: 700;
  box-shadow: none!important;
}
.quiz-action-btn.secondary:hover {
  background: #2d3759;
  color: #e2edfd;
}
.quiz-action-btn:hover:not(.secondary) {
  background: linear-gradient(92deg,#a9ffec 1%,#2bf0f0 96%);
  color: #141c33;
  transform: scale(1.05);
  box-shadow:0 4.5px 26px #18eaeaec;
}

/* --- LOGIN OVERLAY --- */
.overlay-login {
  position: fixed;
  z-index: 9999;
  left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(18,21,40, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadein .55s cubic-bezier(.52,1.47,.57,1.19);
  backdrop-filter: blur(5px) saturate(120%);
}
.login-box {
  background: linear-gradient(131deg,rgba(25,32,56,0.86) 60%,rgba(39,41,78,0.98) 100%);
  border-radius: 23px;
  box-shadow: 0 22px 64px #00f2ff28, 0 4px 27px #2a60fd22;
  padding: 3.0em 2.3em 2.2em 2.3em;
  min-width: 278px;
  min-height:0;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: popin .46s cubic-bezier(.08,1.4,.41,1.15);
}
.login-box h2 {
  margin-top: 0;
  margin-bottom: 1.13em;
  font-size: 1.42em;
  font-weight:700;
  letter-spacing:.018em;
  color: #b3defc;
  text-shadow: 0 1px 14px #36dbfe13;
}
#loginCodeInput {
  outline:none;
  border: none;
  border-radius: 8px;
  padding: 0.7em 1.2em;
  font-size: 1.07em;
  margin-bottom: .8em;
  margin-top: 0.58em;
  background: linear-gradient(97deg, #212948 68%, #232950 100%);
  color: #beebfd;
  box-shadow: 0 1.5px 12px #1bc5fd19;
  transition: box-shadow .18s, background .16s;
  width: 190px;
}
#loginCodeInput:focus {
  box-shadow:0 2px 20px #23f8fc38;
  background:linear-gradient(89deg,#22336c 44%,#223876 100%);
}

#loginBtn {
  background: linear-gradient(90deg,#1fdffe 0%,#7f6fff 100%);
  color: #191c22;
  border: none;
  border-radius:13px;
  padding: 0.72em 1.62em;
  font-weight:700;
  margin-left:.7em;
  margin-right:.1em;
  cursor:pointer;
  font-size: 1.07em;
  box-shadow: 0 1.5px 15px #0efaef45;
  transition: background .16s, color .16s, box-shadow .19s, transform .19s;
}
#loginBtn:hover {
  background: linear-gradient(93deg,#8eacea 12%,#4ffbf4 98%);
  color: #1736e4;
  transform: scale(1.07);
  box-shadow:0 4.5px 28px #18eaeaec;
}
#loginError {
  color: #ea7171;
  margin-top:0.85em;
  text-align:center;
  min-height: 28px;
  font-size:.98em;
}

.glossar-container {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
}

.glossar-item {
  padding: 0.6em 0;
  border-bottom: 1px solid rgba(183, 207, 246, 0.1);
  line-height: 1.5;
}

.glossar-item:last-child {
  border-bottom: none;
}

footer {
  text-align: left;
  color: #565d77;
  font-size: .99rem;
  padding: 11px 19px 18px 11px;
  position: fixed; left: 0; bottom: 0;width:auto;z-index: 120;
  backdrop-filter: blur(9px);
  opacity:.7;
}

@media (max-width: 1025px) {
  .cards-container { gap: 1.5rem; }
  .better-glow-card { min-width: min(85vw, 210px); width: 97vw; max-width: 99vw; padding:19px 9px;}
}
@media (max-width: 670px) {
  h1 { font-size: 1.18rem; }
  main#app { padding: 0; }
  .header-underline { width: 92px; }
}