/* ===================================================================
   LPE Trainer – PHP/MySQL-Version – eigenständiges Stylesheet
   (Basis + Layout + LPE-Design, ohne Framework)
   =================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #1c2733; background: #f5f8fb; line-height: 1.5;
}
a { color: #1b6ec2; }

:root {
    --lpe-navy: #0b2545;
    --lpe-blue: #13315c;
    --lpe-accent: #1b6ec2;
    --lpe-sky: #e7f0fa;
    --lpe-ok: #1f8a4c;
    --lpe-bad: #c0392b;
    --lpe-amber: #e08a00;
    --lpe-line: #d5dee8;
}

/* --- Layout: Sidebar + Content --- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
    width: 250px; flex: 0 0 250px; background: linear-gradient(180deg, var(--lpe-navy), #14395f);
    color: #fff; display: flex; flex-direction: column;
}
.sidebar .brand {
    font-size: 1.2rem; font-weight: 700; padding: 1.1rem 1.2rem; color: #fff;
    text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.12);
}
.sidebar nav { display: flex; flex-direction: column; padding: .5rem 0; }
.sidebar nav a {
    color: #cfe0f2; text-decoration: none; padding: .6rem 1.2rem; font-size: .97rem;
    border-left: 3px solid transparent;
}
.sidebar nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar nav a.active { background: rgba(255,255,255,.10); color: #fff; border-left-color: var(--lpe-amber); font-weight: 600; }
.main { flex: 1; min-width: 0; padding: 1.4rem 1.8rem 3rem; }
.nav-toggle { display: none; }

@media (max-width: 800px) {
    .app-shell { flex-direction: column; }
    .sidebar { width: 100%; flex-basis: auto; }
    .sidebar nav { display: none; }
    .sidebar nav.open { display: flex; }
    .nav-toggle {
        display: block; position: absolute; top: .8rem; right: 1rem; background: transparent;
        border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: 6px; padding: .3rem .6rem; cursor: pointer;
    }
    .sidebar .brand { position: relative; }
    .main { padding: 1.1rem 1.1rem 2.5rem; }
}

h1 { color: var(--lpe-navy); font-weight: 700; }
.lead { font-size: 1.05rem; }

/* --- Startseite --- */
.hero {
    background: linear-gradient(135deg, var(--lpe-navy), var(--lpe-accent));
    color: #fff; padding: 1.6rem 1.8rem; border-radius: 14px; margin-bottom: 1.6rem;
}
.hero h1 { color: #fff; margin-bottom: .4rem; }
.hero .lead { font-size: 1.15rem; }
.hero a { color: #ffe08a; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin-bottom: 1.8rem; }
.module-card {
    display: block; background: #fff; border: 1px solid var(--lpe-line); border-radius: 12px;
    padding: 1.1rem 1.2rem; text-decoration: none; color: inherit;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s;
}
.module-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(11,37,69,.14); border-color: var(--lpe-accent); }
.module-icon { font-size: 2rem; }
.module-card h3 { font-size: 1.15rem; margin: .35rem 0; color: var(--lpe-navy); }
.module-card p { color: #4a5a6a; font-size: .92rem; margin-bottom: .5rem; }
.module-go { color: var(--lpe-accent); font-weight: 600; }

.info-box { background: var(--lpe-sky); border-left: 4px solid var(--lpe-accent); border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.info-box h4 { color: var(--lpe-navy); margin-bottom: .5rem; }
.footer-note { color: #5a6b7b; font-size: .88rem; }

/* --- Übungs-Layout --- */
.exercise { background: #fff; border: 1px solid var(--lpe-line); border-radius: 12px; padding: 1.4rem 1.5rem; max-width: 820px; box-shadow: 0 2px 10px rgba(11,37,69,.05); }
.exercise-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.pill { background: var(--lpe-navy); color: #fff; font-size: .78rem; font-weight: 600; padding: .22rem .7rem; border-radius: 999px; letter-spacing: .3px; }
.counter { color: #7a8896; font-weight: 600; font-size: .9rem; }
.situation { color: #34404d; margin-bottom: 1rem; }
.listen-title { color: var(--lpe-navy); margin-bottom: .8rem; }

.atc-line, .prompt-box { background: var(--lpe-sky); border-radius: 8px; padding: .8rem 1rem; margin-bottom: 1rem; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.prompt-box.big { font-size: 1.08rem; }
.atc-text { font-style: italic; color: var(--lpe-blue); }
.prompt-text { color: var(--lpe-blue); font-weight: 500; }

.listen-controls { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.question { font-weight: 600; color: var(--lpe-navy); margin: 1rem 0 .6rem; }

/* Buttons */
.btn-audio, .btn-nav, .btn-record, .btn-reveal {
    border: 1px solid var(--lpe-accent); background: #fff; color: var(--lpe-accent);
    border-radius: 8px; padding: .5rem .9rem; font-weight: 600; cursor: pointer; transition: background .12s, color .12s; font-family: inherit;
}
.btn-audio:hover, .btn-nav:hover, .btn-reveal:hover { background: var(--lpe-accent); color: #fff; }
.btn-audio.big { font-size: 1.05rem; padding: .6rem 1.2rem; }
.btn-audio:disabled, .btn-record:disabled, .btn-nav:disabled { opacity: .5; cursor: not-allowed; }
.btn-record { border-color: var(--lpe-bad); color: var(--lpe-bad); }
.btn-record:hover { background: var(--lpe-bad); color: #fff; }
.btn-record.recording { background: var(--lpe-bad); color: #fff; animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .6; } }
.btn-reveal { border-color: var(--lpe-amber); color: var(--lpe-amber); margin: 1rem 0; }
.btn-reveal:hover { background: var(--lpe-amber); color: #fff; }

/* Optionen (Multiple Choice) */
.options { display: flex; flex-direction: column; gap: .5rem; }
.option { text-align: left; background: #fff; border: 1.5px solid var(--lpe-line); border-radius: 8px; padding: .7rem .9rem; cursor: pointer; font-size: .98rem; transition: border-color .12s, background .12s; font-family: inherit; }
.option:hover:not(:disabled) { border-color: var(--lpe-accent); background: var(--lpe-sky); }
.option.correct { border-color: var(--lpe-ok); background: #e6f6ec; font-weight: 600; }
.option.wrong { border-color: var(--lpe-bad); background: #fbe9e7; }
.option:disabled { cursor: default; }

.feedback { margin: 1rem 0 .5rem; font-weight: 700; font-size: 1.05rem; }
.feedback.ok { color: var(--lpe-ok); }
.feedback.bad { color: var(--lpe-bad); }
.explanation { background: #f0f4f8; border-radius: 8px; padding: .8rem 1rem; margin: .6rem 0; color: #33414f; }

/* Readback / Musterantwort */
.readback-box { background: var(--lpe-sky); border-radius: 8px; padding: 1rem; margin: 1rem 0; }
.readback-head { font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; color: #6a7889; font-weight: 700; }
.readback-text { font-style: italic; color: var(--lpe-blue); margin: .3rem 0 .7rem; font-size: 1.05rem; }
.model-answer { color: #26333f; line-height: 1.55; margin: .3rem 0 .7rem; }

.record-row { margin: 1rem 0 .5rem; }
.recognized { font-style: italic; color: #4a5a6a; margin: .5rem 0; }
.score-bar { height: 12px; background: #e2e8ef; border-radius: 999px; overflow: hidden; margin: .3rem 0; }
.score-fill { height: 100%; background: linear-gradient(90deg, var(--lpe-accent), var(--lpe-ok)); transition: width .3s; }
.score-label { font-size: .9rem; color: #4a5a6a; }
.hits-inline { color: var(--lpe-ok); }
.hint-small { font-size: .85rem; color: #8a97a5; margin-top: .5rem; }

/* Vokabular-Chips */
.vocab { margin: 1rem 0; }
.vocab-label { font-weight: 600; color: var(--lpe-navy); margin-right: .4rem; }
.vocab-chip { display: inline-block; background: #eef2f7; color: #3a4a5a; border: 1px solid var(--lpe-line); border-radius: 999px; padding: .2rem .7rem; margin: .2rem .25rem .2rem 0; font-size: .85rem; }
.vocab-chip.hit { background: #e6f6ec; color: var(--lpe-ok); border-color: var(--lpe-ok); font-weight: 600; }

.tips { margin-top: .8rem; color: #3a4a5a; }
.tips ul { margin: .3rem 0 0 1.1rem; }
.nav-row { display: flex; justify-content: space-between; margin-top: 1.4rem; gap: .5rem; flex-wrap: wrap; }

/* --- ICAO Rating Scale --- */
.level-card { background: #fff; border: 1px solid var(--lpe-line); border-left-width: 6px; border-radius: 10px; padding: 1.1rem 1.3rem; margin-bottom: 1rem; }
.level-ok { border-left-color: var(--lpe-ok); }
.level-fail { border-left-color: var(--lpe-bad); }
.level-head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .4rem; }
.level-badge { background: var(--lpe-navy); color: #fff; font-weight: 700; padding: .2rem .7rem; border-radius: 6px; }
.level-name { font-size: 1.2rem; font-weight: 700; color: var(--lpe-navy); }
.level-validity { margin-left: auto; font-size: .85rem; color: #6a7889; }
.level-summary { color: #34404d; margin-bottom: .8rem; }
.descriptor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .6rem; }
.descriptor { background: #f6f9fc; border-radius: 6px; padding: .6rem .8rem; }
.descriptor-key { display: block; font-weight: 700; color: var(--lpe-accent); font-size: .82rem; text-transform: uppercase; letter-spacing: .3px; }
.descriptor-val { font-size: .9rem; color: #3a4a5a; }

/* --- NATO-Alphabet --- */
.phonetic-hint { background: #fff6e5; border: 1px solid #f0d9a8; border-radius: 8px; padding: .55rem .8rem; margin: .2rem 0 .8rem; font-size: .92rem; color: #6b4e00; }
.alphabet-ref { background: #fff; border: 1px solid var(--lpe-line); border-radius: 10px; padding: .7rem 1rem; margin-bottom: 1.2rem; max-width: 820px; }
.alphabet-ref summary { cursor: pointer; font-weight: 600; color: var(--lpe-navy); }
.alphabet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .35rem; margin-top: .8rem; }
.alpha-cell { background: #f6f9fc; border-radius: 6px; padding: .3rem .6rem; font-size: .9rem; color: #3a4a5a; }
.alpha-letter { display: inline-block; width: 1.4rem; font-weight: 700; color: var(--lpe-accent); }

/* --- Einstellungen: Geschwindigkeit --- */
.speed-control { display: flex; align-items: center; gap: 1rem; margin: 1.2rem 0 .4rem; }
.speed-slider { flex: 1; height: 6px; accent-color: var(--lpe-accent); cursor: pointer; }
.speed-value { min-width: 4.2rem; text-align: center; font-weight: 700; font-size: 1.25rem; color: var(--lpe-navy); background: var(--lpe-sky); border-radius: 8px; padding: .3rem .5rem; }
.speed-marks { display: flex; justify-content: space-between; color: #7a8896; font-size: .8rem; margin-bottom: 1.2rem; }
.speed-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }

/* --- Mikrofontest / Oszilloskop --- */
.mic-scope { width: 100%; max-width: 760px; height: auto; display: block; background: #0b2545; border-radius: 10px; border: 1px solid var(--lpe-line); margin: .3rem 0 .8rem; }
.mic-status { font-size: .92rem; color: #4a5a6a; margin-bottom: .6rem; }
.mic-status.recording { color: var(--lpe-bad); font-weight: 700; }
.mic-gain-label { font-weight: 600; color: var(--lpe-navy); min-width: 8.5rem; }

/* --- Listening: Funk-Simulation --- */
.radio-toggle { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--lpe-navy); cursor: pointer; margin-left: .3rem; }
.radio-toggle input { width: 1.05rem; height: 1.05rem; accent-color: var(--lpe-accent); }

/* --- Mikrofon: Geräteauswahl & Anleitung --- */
.device-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: .4rem 0 .3rem; }
.device-select { flex: 1; min-width: 12rem; padding: .45rem .6rem; border: 1px solid var(--lpe-line); border-radius: 8px; background: #fff; color: #1c2733; font-size: .95rem; font-family: inherit; }
.mic-guide { margin-top: 1rem; border-top: 1px dashed var(--lpe-line); padding-top: .8rem; }
.mic-guide summary { cursor: pointer; font-weight: 600; color: var(--lpe-navy); }
.guide-intro { color: #34404d; margin: .7rem 0; }
.guide-block { background: #f6f9fc; border-radius: 8px; padding: .7rem 1rem; margin-bottom: .7rem; }
.guide-block h4 { color: var(--lpe-accent); margin-bottom: .4rem; font-size: 1rem; }
.guide-block ol { margin: 0 0 0 1.1rem; color: #3a4a5a; }
.guide-block li { margin: .2rem 0; }

/* --- Picture Description --- */
.picture-frame { background: #0b2545; border-radius: 10px; padding: .5rem; margin-bottom: 1rem; display: flex; justify-content: center; }
.picture-frame img { max-width: 100%; max-height: 460px; border-radius: 6px; object-fit: contain; }

/* --- 30-Sekunden-Countdown --- */
.countdown { margin: .6rem 0 .4rem; }
.countdown-time { font-weight: 700; color: var(--lpe-navy); margin-bottom: .3rem; }
.countdown-time.low { color: var(--lpe-bad); }
.countdown-bar { height: 12px; background: #e2e8ef; border-radius: 999px; overflow: hidden; }
.countdown-fill { height: 100%; background: linear-gradient(90deg, var(--lpe-ok), var(--lpe-accent)); transition: width 1s linear; }
.countdown-fill.low { background: var(--lpe-bad); }

/* --- Vokabeltrainer --- */
.vocab-toolbar { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.mode-switch { display: inline-flex; border: 1px solid var(--lpe-line); border-radius: 8px; overflow: hidden; }
.mode-btn { background: #fff; border: none; padding: .5rem .9rem; font-weight: 600; color: var(--lpe-accent); cursor: pointer; font-family: inherit; }
.mode-btn.active { background: var(--lpe-accent); color: #fff; }
.cat-select { max-width: 20rem; flex: 1; }
.flashcard { text-align: center; padding: 1.4rem 1rem 1rem; }
.flash-term { font-size: 2.2rem; font-weight: 700; color: var(--lpe-navy); margin-bottom: .8rem; }
.flash-back { background: var(--lpe-sky); border-radius: 10px; padding: 1rem 1.2rem; margin: 1rem 0; text-align: left; }
.flash-back > div { margin: .35rem 0; color: #26333f; }
.flash-label { font-weight: 700; color: var(--lpe-accent); margin-right: .3rem; }
.flash-example { font-style: italic; }
.btn-audio.small { padding: .2rem .5rem; font-size: .85rem; margin-left: .4rem; }
.quiz-question { font-size: 1.15rem; color: var(--lpe-navy); margin-bottom: .9rem; }

/* --- Erfüllungsbalken (Aufnahme, füllt sich mit Farbphasen) --- */
.fillbar-wrap { margin: .7rem 0 .4rem; }
.fillbar-time { font-weight: 700; color: var(--lpe-navy); margin-bottom: .35rem; }
.fillbar-track { position: relative; height: 16px; background: #e2e8ef; border-radius: 999px; overflow: hidden; }
.fillbar { height: 100%; border-radius: 999px; transition: width 1s linear, background-color .4s; }
.fillbar.fill-red { background: #c0392b; }
.fillbar.fill-yellow { background: #e08a00; }
.fillbar.fill-green { background: #1f8a4c; }
.fillbar.fill-darkgreen { background: #0b5c33; }
.fillbar-tick { position: absolute; top: 0; width: 2px; height: 16px; background: rgba(11,37,69,.35); }
.fillbar-legend { font-size: .8rem; color: #7a8896; margin-top: .3rem; }