:root{--bc-blue:#173f6d;--bc-orange:#f7a400;--bc-bg1:#eef6ff;--bc-bg2:#fff8ea;--bc-card:#fff;--bc-text:#0b2748;--bc-muted:#52627a;--bc-line:#dce6f1;--bc-good:#16876b;--bc-danger:#d64545;--bc-shadow:0 18px 45px rgba(11,39,72,.14)}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;padding:10px;color:var(--bc-text);background:radial-gradient(circle at 20% 0%,rgba(247,164,0,.18),transparent 32%),radial-gradient(circle at 95% 90%,rgba(22,135,107,.16),transparent 28%),linear-gradient(145deg,var(--bc-bg1),var(--bc-bg2))}.app-container{display:flex;flex-direction:column;align-items:center;margin:0 auto;width:100%;max-width:500px}.flashcard-container{width:100%}.header-box{width:100%;background:rgba(255,255,255,.96);border:1px solid var(--bc-line);border-radius:18px;padding:10px 12px;margin-bottom:10px;box-shadow:0 10px 26px rgba(11,39,72,.10)}.bc-brand-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.bc-brand-text b{display:block;font-size:17px;line-height:1.05;color:var(--bc-blue)}.bc-brand-text span{display:block;font-size:12px;color:var(--bc-muted);margin-top:3px}.bc-logo{width:48px;height:48px;object-fit:contain;border-radius:12px}.topic-selector{margin-bottom:8px;width:100%}#topic-select{width:100%;padding:12px 14px;font-size:.98rem;font-weight:750;border-radius:16px;border:1px solid var(--bc-line);background:#fff;color:var(--bc-text);box-shadow:0 8px 18px rgba(11,39,72,.07);cursor:pointer;outline:none}.card{width:100%;aspect-ratio:1712/1675;perspective:1000px;position:relative;margin-bottom:10px}.card.is-exam-card{height:min(64dvh,620px);min-height:500px;perspective:none;aspect-ratio:auto}.card-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s;box-shadow:var(--bc-shadow);border-radius:22px}.card.flipped .card-inner{transform:rotateY(180deg)}.card-front,.card-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px;border-radius:22px;font-size:clamp(1.05rem,4.2vw,1.52rem);overflow-y:auto;color:var(--bc-text);background:linear-gradient(180deg,#fff,#f8fbff);border:1px solid var(--bc-line);z-index:1}.card-front{border-top:5px solid var(--bc-blue)}.card-back{transform:rotateY(180deg);border-top:5px solid var(--bc-orange)}.card.is-exam-card .card-inner{transform:none!important;transition:none;transform-style:flat;background:transparent;box-shadow:none}.card.is-exam-card .card-front,.card.is-exam-card .card-back{position:relative;transform:none!important;backface-visibility:visible;height:100%;display:flex;justify-content:flex-start;align-items:stretch;text-align:left;padding:16px;box-shadow:var(--bc-shadow)}.card.is-exam-card .card-back{display:none}.card.is-exam-card.flipped .card-front{display:none}.card.is-exam-card.flipped .card-back{display:flex}.card-buttons{margin-top:10px;display:flex;flex-direction:column;align-items:center;width:100%;gap:8px}.button-row{display:flex;justify-content:center;width:100%;gap:10px}button{padding:11px 12px;font-size:1rem;cursor:pointer;border:1px solid var(--bc-line);border-radius:16px;background:#fff;color:var(--bc-blue);transition:.18s ease;flex-grow:1;flex-basis:0;font-weight:800;box-shadow:0 8px 18px rgba(11,39,72,.08)}button:hover{transform:translateY(-1px)}.button-row:not(.secondary-actions) button:nth-child(2){background:var(--bc-orange);border-color:var(--bc-orange);color:#111}.button-row:not(.secondary-actions) button:nth-child(3){background:var(--bc-blue);border-color:var(--bc-blue);color:#fff}.btn-schwer{border-color:#f44336;color:#9b1c1c}.btn-mittel{border-color:#ffc107;color:#8a5b00}.btn-einfach{border-color:#4CAF50;color:#176331}#difficulty-buttons button{padding:8px 10px;font-size:.85rem}.difficulty-note{font-size:.9rem;color:var(--bc-blue);font-weight:800;text-align:center;margin-top:4px}.secondary-actions button{font-size:.82rem;padding:9px 12px;background:#f3f7fb;color:var(--bc-muted);flex-grow:0;flex-basis:auto;box-shadow:none}.controls{margin:14px 0;display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px}.control-btn{font-size:.86rem;padding:10px 12px}.active{background:var(--bc-blue)!important;color:white!important}.progress-text{width:100%;text-align:center;margin-bottom:6px;font-size:.9rem;color:var(--bc-muted)}.progress-container{width:100%;background:#e6edf5;border-radius:999px;margin-bottom:12px;overflow:hidden}.progress-bar{width:0%;height:12px;background:linear-gradient(90deg,var(--bc-orange),#ffc857);border-radius:999px;transition:width .4s ease-in-out}.timer-container{display:flex;flex-flow:row wrap;justify-content:center;align-items:center;gap:10px;margin:10px 0 16px;width:100%;background:rgba(255,255,255,.94);border:1px solid var(--bc-line);border-radius:22px;padding:14px;box-shadow:var(--bc-shadow)}.timer-label{font-weight:900;color:var(--bc-blue)}#timer-display{font-size:1.05rem;color:#d32f2f;font-weight:900;background:#fff;padding:7px 12px;border-radius:12px;border:1px solid var(--bc-line);text-align:center;font-family:'Courier New',Courier,monospace;min-width:106px}#exam-score{font-size:.93rem;background:#f8fbff;padding:9px;border-radius:14px;border:1px solid var(--bc-line);text-align:center;width:100%;font-weight:700}.timer-btn{display:flex;justify-content:center;align-items:center;padding:0;font-size:1.1rem;border-radius:50%;flex-grow:0;width:38px;height:38px}.hidden{display:none!important}.mc-question{margin:0 0 12px;padding:0 2px 10px;border-bottom:1px solid var(--bc-line);font-weight:900;font-size:clamp(.96rem,3.3vw,1.15rem);line-height:1.28;color:var(--bc-blue)}.mc-question small{display:block;font-size:.82rem;font-weight:700;color:var(--bc-muted);margin-top:6px}.mc-options-list{list-style-type:none;padding:0;text-align:left;width:100%;margin:0}.mc-options-list li{border:1px solid var(--bc-line);border-radius:16px;margin-bottom:8px;background:#fff;padding:10px 11px;box-shadow:0 5px 12px rgba(11,39,72,.05);font-size:.92rem;line-height:1.28}.mc-options-list li label{display:flex;align-items:flex-start;cursor:pointer;margin:0;gap:10px}.mc-options-list li input[type="checkbox"]{margin:2px 0 0;min-width:20px;width:20px;height:20px;cursor:pointer;accent-color:var(--bc-orange)}.user-correct{background-color:#d7f4e8!important;border-color:#16876b!important;font-weight:bold}.user-incorrect{background-color:#ffe0e0!important;border-color:#d64545!important;text-decoration:line-through}.missed-correct{background-color:#eefaf5!important;border-style:dashed!important;border-color:#16876b!important;font-weight:bold}.mc-per-question-result{margin:0 0 12px;font-size:.9rem;font-weight:900;padding:10px 12px;border-radius:16px;background:#fff8ea;border:1px solid #ffd891;color:var(--bc-blue)}.explanation-box{margin-top:12px;padding:12px;background:#eef6ff;border-left:5px solid var(--bc-blue);color:var(--bc-text);text-align:left;font-size:.88rem;border-radius:12px;line-height:1.4}.explanation-box strong{color:var(--bc-blue);display:block;margin-bottom:5px}#visitor-counter{text-align:center;margin-top:28px;margin-bottom:14px;font-size:.85rem;color:var(--bc-muted)}#printable-content{display:none}@media(max-width:520px){body{padding:8px}.card.is-exam-card{height:min(62dvh,560px);min-height:470px}.controls{flex-direction:column}.button-row{gap:7px}button{padding:10px 9px}.timer-container{padding:8px;margin:7px 0 8px}}@media print{body *{display:none}#printable-content,#printable-content *{display:block}.printable-card{page-break-inside:avoid;border:1px solid #ccc;border-radius:8px;padding:15px;margin-bottom:20px}.printable-card h3{font-size:14pt;margin:0 0 10px;color:#000}.printable-card div{font-size:12pt;color:#333}}

.login-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;background:linear-gradient(145deg,var(--bc-bg1),var(--bc-bg2));z-index:50}.login-card{width:min(460px,100%);background:rgba(255,255,255,.97);border:1px solid var(--bc-line);border-radius:24px;padding:24px;box-shadow:var(--bc-shadow)}.login-card h1{margin:8px 0;color:var(--bc-blue)}.login-card p{color:var(--bc-muted)}.login-logo{width:72px;height:72px;border-radius:16px}.login-card label,.admin-form label{font-weight:800;color:var(--bc-blue);margin-top:12px}.login-card input,.admin-form input,.admin-form textarea{width:100%;padding:12px 14px;border:1px solid var(--bc-line);border-radius:14px;font:inherit;margin-top:6px}.login-card button,.admin-form button,.admin-head button,.class-card button{background:var(--bc-blue);color:#fff;border-color:var(--bc-blue);width:100%;margin-top:16px}.form-error{color:var(--bc-danger);font-weight:800;margin-top:12px}.form-ok{color:var(--bc-good);font-weight:800;margin-top:12px}.admin-wrap{max-width:980px;margin:0 auto;padding:24px}.admin-panel{display:grid;gap:18px}.admin-head,.class-card,.admin-form{background:#fff;border:1px solid var(--bc-line);border-radius:22px;padding:18px;box-shadow:0 10px 26px rgba(11,39,72,.10)}.admin-head{display:flex;justify-content:space-between;gap:16px;align-items:center}.admin-head h1,.admin-head p{margin:0}.class-list{display:grid;gap:10px}.class-card{display:flex;justify-content:space-between;gap:12px;align-items:center}.class-card b,.class-card span,.class-card small{display:block}.class-card span,.class-card small{color:var(--bc-muted)}.class-card button{width:auto;margin:0;padding:8px 12px}.class-card .danger{background:#fff;color:var(--bc-danger);border-color:#ffcaca}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.check{display:flex!important;align-items:center;gap:10px}.check input{width:auto!important}.hidden{display:none!important}@media(max-width:640px){.admin-head,.class-card{flex-direction:column;align-items:stretch}.form-grid{grid-template-columns:1fr}}


/* Komfort-Update: größere Lesbarkeit und schneller Passwort-Login */
body{font-size:16px}.app-container{max-width:560px}.login-card{padding:28px}.login-card h1{font-size:clamp(1.75rem,5vw,2.25rem);line-height:1.1}.login-card p{font-size:1.02rem;line-height:1.45}.login-card label{display:block;font-size:1.05rem}.login-card input{font-size:1.25rem;padding:16px 18px;border-radius:18px}.login-card button{font-size:1.15rem;padding:15px 18px;border-radius:18px}.form-error{font-size:1rem;line-height:1.35}.bc-brand-text b{font-size:18px}.bc-brand-text span{font-size:13px}#topic-select{font-size:1.04rem}.card-front,.card-back{font-size:clamp(1.12rem,4.6vw,1.6rem);line-height:1.35}.mc-question{font-size:clamp(1.06rem,3.8vw,1.28rem);line-height:1.34}.mc-question small{font-size:.9rem}.mc-options-list li{font-size:clamp(.98rem,3.4vw,1.08rem);line-height:1.35;padding:12px 13px}.explanation-box{font-size:clamp(.96rem,3.2vw,1.05rem);line-height:1.48}button{font-size:1.04rem}.secondary-actions button{font-size:.92rem}
@media(max-width:520px){body{padding:7px}.app-container{max-width:100%}.header-box{margin-bottom:7px}.bc-logo{width:42px;height:42px}.card.is-exam-card{height:min(66dvh,610px);min-height:500px}.card.is-exam-card .card-front,.card.is-exam-card .card-back{padding:14px}.mc-options-list li{padding:11px 12px;margin-bottom:8px}.button-row{gap:6px}button{font-size:.98rem;padding:11px 8px}.secondary-actions button{font-size:.86rem}.login-screen{align-items:flex-start;padding-top:max(18px,env(safe-area-inset-top))}.login-card{margin-top:8px;padding:22px}.login-logo{width:64px;height:64px}.login-card input{font-size:1.22rem;padding:15px 16px}.login-card button{font-size:1.1rem;padding:14px 16px}}



/* Smartphone-Optimierung v4: kompakter Login, flachere Karten, Icon-Navigation */
@media(max-width:520px){
  html,body{min-height:100%;overflow-x:hidden}
  body{padding:6px;font-size:15px}
  .login-screen{
    align-items:flex-start;
    min-height:100dvh;
    padding:14px 8px 8px;
  }
  .login-card{
    width:min(100%,390px);
    margin:0 auto;
    padding:16px 18px 18px;
    border-radius:22px;
  }
  .login-logo{width:54px;height:54px;margin-bottom:8px}
  .login-card h1{
    font-size:clamp(1.45rem,8vw,1.85rem);
    line-height:1.05;
    margin:4px 0 8px;
    letter-spacing:-.03em;
  }
  .login-card p{
    margin:0 0 14px;
    font-size:1rem;
    line-height:1.25;
  }
  .login-card label{font-size:1rem;margin-bottom:8px}
  .login-card input{
    font-size:1.1rem;
    padding:12px 14px;
    border-radius:16px;
  }
  .login-card button{
    margin-top:12px;
    padding:12px 14px;
    font-size:1.05rem;
    border-radius:16px;
  }

  .app-container{max-width:100%;padding-bottom:72px}
  .header-box{
    padding:7px 9px;
    border-radius:14px;
    margin-bottom:6px;
    box-shadow:0 4px 12px rgba(11,39,72,.08);
  }
  .bc-logo{width:34px;height:34px;border-radius:9px}
  .bc-brand-text b{font-size:14px}
  .bc-brand-text span{font-size:11px;margin-top:1px}
  .topic-selector{margin-bottom:5px}
  #topic-select{
    padding:9px 11px;
    border-radius:13px;
    font-size:.92rem;
  }

  .controls{margin:6px 0;gap:6px;flex-direction:row}
  .control-btn{font-size:.78rem;padding:8px 7px;border-radius:12px}
  .progress-text{font-size:.78rem;margin:3px 0}
  .progress-container{margin-bottom:6px}
  .progress-bar{height:8px}

  .timer-container{
    margin:5px 0 7px;
    padding:8px;
    border-radius:14px;
    gap:6px;
    box-shadow:0 4px 12px rgba(11,39,72,.08);
  }
  .timer-label{display:none}
  #timer-display{font-size:.9rem;padding:5px 8px;min-width:88px}
  .timer-btn{width:32px;height:32px}
  #exam-score{font-size:.78rem;padding:6px;margin-top:2px}

  .card{
    margin-bottom:6px;
  }
  .card.is-exam-card{
    height:auto;
    min-height:0;
  }
  .card-inner{
    box-shadow:none;
    border-radius:0;
  }
  .card-front,.card-back,
  .card.is-exam-card .card-front,
  .card.is-exam-card .card-back{
    padding:10px;
    border-radius:16px;
    box-shadow:0 6px 16px rgba(11,39,72,.08);
    border:1px solid var(--bc-line);
    border-top:4px solid var(--bc-blue);
    background:rgba(255,255,255,.96);
    text-align:left;
  }
  .card.is-exam-card .card-back{border-top-color:var(--bc-orange)}
  .card-front p,.card-back p{margin:.2em 0}

  .card.is-exam-card .mc-question,
  .mc-question{
    font-size:clamp(.94rem,4.1vw,1.08rem);
    line-height:1.22;
    margin:0 0 8px;
    padding:0 0 7px;
  }
  .mc-question small{
    font-size:.76rem;
    line-height:1.2;
    margin-top:4px;
  }
  .mc-options-list{width:100%}
  .card.is-exam-card .mc-options-list li,
  .mc-options-list li{
    margin-bottom:5px;
    padding:7px 8px;
    border-radius:11px;
    border:1px solid #e5edf6;
    box-shadow:none;
    font-size:clamp(.84rem,3.7vw,.98rem);
    line-height:1.22;
  }
  .card.is-exam-card .mc-options-list li label{
    gap:8px;
  }
  .card.is-exam-card .mc-options-list li input[type="checkbox"],
  .mc-options-list li input[type="checkbox"]{
    min-width:18px;
    width:18px;
    height:18px;
    margin-top:1px;
  }
  .card.is-exam-card .mc-options-list li span,
  .card-front .mc-options-list li span,
  .card-back .mc-options-list li{
    font-size:inherit;
    line-height:inherit;
  }
  .explanation-box,
  .card.is-exam-card .explanation-box{
    margin-top:8px;
    padding:9px;
    border-radius:11px;
    font-size:.84rem;
    line-height:1.28;
  }
  .card.is-exam-card .mc-per-question-result{
    margin:0 0 7px;
    padding:7px 8px;
    font-size:.82rem;
    border-radius:11px;
  }

  .card-buttons{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:20;
    width:100%;
    padding:6px 7px calc(6px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);
    border-top:1px solid var(--bc-line);
    box-shadow:0 -8px 22px rgba(11,39,72,.10);
    gap:4px;
  }
  .card-buttons .button-row{
    gap:4px;
    align-items:stretch;
  }
  .card-buttons button{
    min-width:0;
    padding:5px 3px 6px;
    border-radius:12px;
    font-size:.68rem;
    line-height:1.05;
    box-shadow:none;
    font-weight:800;
  }
  .card-buttons .button-row:not(.secondary-actions) button::before,
  #difficulty-buttons button::before{
    display:block;
    font-size:1.15rem;
    line-height:1;
    margin-bottom:2px;
  }
  #prev-card::before{content:'←'}
  #flip-card::before{content:'↻'}
  #next-card::before{content:'✓'}
  #random-card::before{content:'🎲'}
  #difficulty-buttons .btn-schwer::before{content:'!'}
  #difficulty-buttons .btn-mittel::before{content:'~'}
  #difficulty-buttons .btn-einfach::before{content:'✓'}
  #next-card{background:var(--bc-good);border-color:var(--bc-good);color:#fff}
  #random-card{background:#fff;border-color:var(--bc-line);color:var(--bc-blue)}
  #difficulty-buttons{
    order:2;
  }
  #difficulty-buttons button{
    font-size:.66rem;
    padding:4px 3px;
  }
  .difficulty-note{display:none!important}
  .secondary-actions{
    display:none;
  }
  #visitor-counter{display:none}
}

@media(max-width:380px){
  .login-card{padding:14px 16px}
  .login-logo{width:46px;height:46px}
  .login-card h1{font-size:1.38rem}
  .card-front,.card-back,
  .card.is-exam-card .card-front,
  .card.is-exam-card .card-back{padding:8px}
  .card.is-exam-card .mc-options-list li,
  .mc-options-list li{padding:6px 7px;font-size:.82rem}
}