/* Liedtexte — sachliches Design in Pastelltönen, für iPad/Safari (Querformat) */

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

:root {
    --bg: #F7F6F3;
    --ink: #2B2E33;
    --ink-soft: #5B6068;
    --card-bg: #FFFFFF;
    --border: #E4E1DA;

    --klasse5: #D3C2E8;
    --klasse5-dark: #8F6BB5;
    --klasse5-bg: #F5F0FA;

    --klasse6: #AFD1E3;
    --klasse6-dark: #5C93B4;
    --klasse6-bg: #EEF5F9;

    --klasse7: #BFE0C6;
    --klasse7-dark: #5E9E6C;
    --klasse7-bg: #EFF6F0;

    --ok: #6DA97C;
    --ok-bg: #E3F1E5;
    --bad: #C97B72;
    --bad-bg: #FBEAE8;
    --solution: #B8935C;
    --solution-bg: #F7EDDD;
    --solution-text: #6B5636;

    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 2px 10px rgba(43,46,51,0.06);

    --font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

/* Das hidden-Attribut muss IMMER wirken, auch wenn ein Element zusätzlich
   eine Klasse mit eigenem display-Wert hat (z.B. .btn) - ohne diese Regel
   überschreibt die Klasse sonst die Browser-Vorgabe für [hidden]. */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 18px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

h1, h2, h3 { font-weight: 800; margin: 0 0 0.3em; letter-spacing: -0.01em; }
p { margin: 0 0 0.8em; }
a { color: inherit; }

.hint { color: var(--ink-soft); font-size: 0.95em; }
.main-hint { padding: 2rem; text-align: center; }

/* ---------- Dachzeile (gleich in allen dorokcloud-Bereichen) ---------- */
.dachzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    min-height: 46px;
    padding: 6px 24px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    font-size: 15px;
    line-height: 1.3;
    font-weight: 700;
}
.dachzeile a { text-decoration: none; }
.dachzeile a:hover { text-decoration: underline; }
.dach-start { color: var(--ink); font-weight: 800; }
.dach-pfeil { color: #B5B0A6; }
.dach-bereich { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); }
.dach-bereich img { width: 20px; height: 20px; display: block; }
.dach-rechts { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.dach-rechts a { color: var(--ink-soft); font-weight: 600; }

/* ---------- Klassen-Themes ---------- */
body.klasse-5 { --theme: var(--klasse5); --theme-dark: var(--klasse5-dark); --theme-bg: var(--klasse5-bg); }
body.klasse-6 { --theme: var(--klasse6); --theme-dark: var(--klasse6-dark); --theme-bg: var(--klasse6-bg); }
body.klasse-7 { --theme: var(--klasse7); --theme-dark: var(--klasse7-dark); --theme-bg: var(--klasse7-bg); }

/* ---------- Startseite: Klassenwahl ---------- */
.klassenwahl-body {
    background: linear-gradient(180deg, #F7F6F3 0%, #EFEEE9 100%);
}
.klassenwahl {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 1.5rem 2rem;
    text-align: center;
}
.site-title { font-size: 34px; line-height: 1.15; margin: 0; }
.site-sub { color: var(--ink-soft); font-size: 17px; margin: 8px 0 2.5rem; }

.klassen-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 1.5rem;
    max-width: 820px;
    margin: 0 auto;
}
.klassen-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 2.5rem 1rem;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--ink);
    box-shadow: var(--shadow);
    transition: transform 0.15s ease;
    min-height: 160px;
}
.klassen-card:active { transform: scale(0.97); }
.klassen-card.klasse-5 { background: var(--klasse5-bg); border: 2px solid var(--klasse5); }
.klassen-card.klasse-6 { background: var(--klasse6-bg); border: 2px solid var(--klasse6); }
.klassen-card.klasse-7 { background: var(--klasse7-bg); border: 2px solid var(--klasse7); }
.klassen-nummer { font-size: 3rem; font-weight: 800; }
.klasse-5 .klassen-nummer { color: var(--klasse5-dark); }
.klasse-6 .klassen-nummer { color: var(--klasse6-dark); }
.klasse-7 .klassen-nummer { color: var(--klasse7-dark); }
.klassen-label { font-size: 1.1rem; font-weight: 600; color: var(--ink-soft); }

/* ---------- Seiten-Header (Liedliste / Übung) ---------- */
.page-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 20px 24px;
    background: var(--theme-bg, #fff);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.page-header h1 { font-size: 1.4rem; margin: 0; flex: 1 1 auto; line-height: 1.2; }
.back-link {
    text-decoration: none;
    font-weight: 600;
    color: var(--theme-dark, var(--ink-soft));
    white-space: nowrap;
    align-self: center;
    line-height: 1.2;
}
.learned-badge {
    background: var(--ok-bg);
    color: var(--ok);
    font-weight: 700;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.9rem;
}

/* ---------- Fortschritt ---------- */
.progress-banner {
    max-width: 1100px;
    margin: 1.2rem auto 0;
    padding: 0 1.5rem;
}
.progress-text { font-weight: 600; margin-bottom: 0.4rem; }
.progress-bar {
    background: var(--border);
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}
.progress-bar-fill {
    background: var(--theme-dark, var(--ok));
    height: 100%;
    width: 0%;
    transition: width 0.3s ease;
}

/* ---------- Karten-Grids (Lieder / Übungen) ---------- */
.song-grid, .uebung-grid {
    max-width: 1100px;
    margin: 1.5rem auto;
    padding: 0 1.5rem 3rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.1rem;
}

.song-card, .uebung-card {
    --card-bg-color: hsl(var(--card-hue, 200), 55%, 92%);
    --card-border-color: hsl(var(--card-hue, 200), 45%, 78%);
    background: var(--card-bg-color);
    border: 2px solid var(--card-border-color);
    border-radius: var(--radius);
    padding: 1.3rem;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 110px;
    box-shadow: var(--shadow);
    transition: transform 0.15s ease;
}
.song-card:active, .uebung-card:active { transform: scale(0.97); }

.song-card-title, .uebung-card-title { font-weight: 700; font-size: 1.15rem; }
.song-card-status {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-soft);
    align-self: flex-start;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.6);
}
.song-card.is-learned .song-card-status { color: var(--ok); background: var(--ok-bg); }
.uebung-card-desc { color: var(--ink-soft); font-size: 0.95rem; }
.song-card-bottom {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: auto;
}

/* ---------- Konzert-/Kategorie-Badges (Tags) ---------- */
.tag-badge {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--theme-dark, #5C5240);
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    margin: 0 0.3rem 0.3rem 0;
    white-space: nowrap;
}
.song-card-tags { display: flex; flex-wrap: wrap; }
.song-tags-banner {
    max-width: 1100px;
    margin: 1.1rem auto 0;
    padding: 0 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem;
}
.song-tags-label { font-weight: 700; color: var(--ink-soft); margin-right: 0.3rem; font-size: 0.9rem; }

/* ---------- Übungsseiten ---------- */
.uebung-main, .test-main {
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 4rem;
}
.teil-nav {
    font-weight: 700;
    color: var(--theme-dark, var(--ink));
    margin-bottom: 1rem;
}
.uebung-text {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.2rem;
    font-size: 1.15rem;
    line-height: 2.1;
}
.text-line { margin: 0 0 0.4em; }

.blank-input {
    font-family: var(--font);
    font-size: 1em;
    border: none;
    border-bottom: 2px solid var(--theme-dark, #999);
    background: var(--theme-bg, #f2f2f2);
    border-radius: 4px 4px 0 0;
    padding: 0.05em 0.3em;
    margin: 0 0.1em;
    text-align: center;
}
.blank-input.is-correct { background: var(--ok-bg); border-color: var(--ok); }
.blank-input.is-wrong { background: var(--bad-bg); border-color: var(--bad); }
.blank-input.is-solution { background: var(--solution-bg); border-color: var(--solution); color: var(--solution-text); font-style: italic; }

.blank-slot {
    font-family: var(--font);
    font-size: 1em;
    border: none;
    border-bottom: 2px dashed var(--theme-dark, #999);
    background: var(--theme-bg, #f2f2f2);
    border-radius: 4px 4px 0 0;
    padding: 0.05em 0.9em;
    margin: 0 0.15em;
    min-width: 3.5em;
    display: inline-block;
    cursor: pointer;
}
.blank-slot.is-filled { border-style: solid; }
.blank-slot.is-correct { background: var(--ok-bg); border-color: var(--ok); }
.blank-slot.is-wrong { background: var(--bad-bg); border-color: var(--bad); }
.blank-slot.is-solution { background: var(--solution-bg); border-color: var(--solution); color: var(--solution-text); border-style: solid; font-style: italic; }

.word-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.2rem;
}
.bank-word {
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 600;
    background: var(--card-bg);
    border: 2px solid var(--theme-dark, var(--border));
    color: var(--ink);
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    cursor: pointer;
}
.bank-word:disabled { opacity: 0.3; }
.bank-word:active:not(:disabled) { transform: scale(0.95); }

.puzzle-list {
    list-style: none;
    margin: 0 0 1.2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.puzzle-line {
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.9rem 1.1rem;
    font-size: 1.1rem;
    cursor: pointer;
}
.puzzle-line.is-selected { border-color: var(--theme-dark, #888); background: var(--theme-bg, #f2f2f2); }
.puzzle-line.is-correct { border-color: var(--ok); background: var(--ok-bg); }
.puzzle-line.is-wrong { border-color: var(--bad); background: var(--bad-bg); }
.puzzle-line.is-solution { border-color: var(--solution); background: var(--solution-bg); color: var(--solution-text); font-style: italic; cursor: default; }

.uebung-controls { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.8rem; }

.btn {
    font-family: var(--font);
    font-weight: 700;
    font-size: 1rem;
    border: none;
    border-radius: 999px;
    padding: 0.75rem 1.6rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.btn-primary { background: var(--theme-dark, var(--ink)); color: #fff; }
.btn-secondary { background: var(--card-bg); color: var(--ink); border: 2px solid var(--border); }
.btn:active { transform: scale(0.97); }

.uebung-feedback { font-weight: 700; min-height: 1.4em; }
.uebung-feedback.is-correct { color: var(--ok); }
.uebung-feedback.is-wrong { color: var(--bad); }

/* ---------- Selbsttest ---------- */
.test-progress { font-weight: 700; color: var(--theme-dark, var(--ink)); margin-bottom: 0.6rem; }
.test-part-label { font-weight: 700; color: var(--ink-soft); margin-bottom: 0.3rem; }
#test-input {
    width: 100%;
    font-family: var(--font);
    font-size: 1.15rem;
    padding: 0.9rem 1rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    resize: vertical;
    margin-bottom: 0.8rem;
}
.test-result {
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 1.6rem;
    text-align: center;
}
.test-result .btn { margin: 0.4rem; }

/* Einsetzübung: ausgewählte Lücke, in die das nächste Wort kommt */
.blank-slot.is-active { outline: 3px solid var(--theme, #AFD1E3); outline-offset: 2px; background: #fff; }
/* Puzzle: grün geprüfte Zeilen stehen fest */
.puzzle-line.is-fest { cursor: default; }

/* ---------- Text lesen ---------- */
.lesetext-teil + .lesetext-teil { margin-top: 1.6rem; }
.lesetext-teil .teil-nav { font-size: 1rem; margin-bottom: 0.5rem; }
.lesetext { line-height: 1.7; }
.lesetext .text-line { margin: 0 0 0.15em; }

/* ---------- Prüfungen: Vorschau im Adminbereich ---------- */
.blatt-vorschau {
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.2rem;
}
.blatt-vorschau h3 { margin-bottom: 0.6rem; }
.vorschau-teil { font-weight: 700; color: var(--ink-soft); margin: 0.8rem 0 0.3rem; font-size: 0.95rem; }
.vorschau-luecke {
    display: inline-block;
    background: var(--solution-bg);
    color: var(--solution-text);
    border-bottom: 2px solid var(--solution);
    border-radius: 4px 4px 0 0;
    padding: 0.05em 0.4em;
    font-style: italic;
}

/* ---------- Prüfungsmodus ---------- */
.blatt-pruefung {
    background: var(--card-bg);
    border: 2px solid var(--theme, var(--border));
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.4rem 1.6rem;
    margin: 1.4rem 0;
    max-width: 34rem;
}
.blatt-pruefung .auth-form { margin-top: 1.1rem; }
.blatt-pruefung .btn { margin-top: 0.6rem; }
.pruefung-name { font-weight: 700; color: var(--theme-dark, var(--ink-soft)); white-space: nowrap; }
.pruefung-status { min-height: 1.4em; font-weight: 600; color: var(--ink-soft); }
.pruefung-status.ist-ok { color: var(--ok); }
.pruefung-status.ist-warnung { color: var(--bad); }
.btn-klein { padding: 0.4rem 1rem; font-size: 0.9rem; }

/* Abmelden mitten in der Prüfung: klein und unauffällig, mit Rückfrage. */
.abmelden-zeile { margin: -0.4rem 0 1rem; }
.abmelden-klein {
    background: none;
    border: 0;
    padding: 0;
    color: var(--ink-soft);
    font: inherit;
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
}
.abmelden-klein:hover { color: var(--ink); }

/* ---------- Auswertung der Prüfungen ---------- */
.abgabe-details {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.7rem 1.1rem;
    margin-bottom: 0.6rem;
}
.abgabe-details summary { cursor: pointer; font-weight: 700; }
.abgabe-details .admin-table { margin-top: 0.9rem; box-shadow: none; }
.admin-table tr.ist-grenzfall { background: var(--solution-bg); }
.admin-toolbar form { display: inline; margin-left: 0.6rem; }

/* ---------- Footer ---------- */
.site-footer {
    width: calc(100% - 48px);
    max-width: 1052px;
    margin: 8px auto 0;
    padding: 18px 0 40px;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--ink-soft);
    font-size: 14px;
}
.site-footer a { color: var(--ink-soft); text-decoration: underline; }

/* ---------- Admin-Backend ---------- */
.admin-body { background: #F2F1ED; }
.auth-card {
    max-width: 380px;
    margin: 8vh auto;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem;
    text-align: center;
}
.auth-sub { color: var(--ink-soft); margin-top: -0.6em; }
.auth-form { display: flex; flex-direction: column; gap: 1rem; text-align: left; margin-top: 1.2rem; }
.auth-form label { font-weight: 600; font-size: 0.95rem; display: flex; flex-direction: column; gap: 0.3rem; }
.auth-form input {
    font-family: var(--font);
    font-size: 1rem;
    padding: 0.6rem 0.8rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
}
.auth-form button {
    margin-top: 0.4rem;
    font-family: var(--font);
    font-weight: 700;
    font-size: 1rem;
    background: var(--ink);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.75rem;
    cursor: pointer;
}
.error { color: var(--bad); font-weight: 600; }
.admin-back-link { display: inline-block; margin-top: 1rem; text-decoration: none; font-weight: 600; color: var(--ink-soft); }

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.8rem;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
}
.admin-header nav a { margin-left: 1.2rem; text-decoration: none; font-weight: 600; color: var(--ink-soft); }
.admin-main { max-width: 900px; margin: 0 auto; padding: 1.8rem; }
.admin-toolbar { margin-bottom: 1.2rem; }

.admin-table { width: 100%; border-collapse: collapse; background: var(--card-bg); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.admin-table th, .admin-table td { text-align: left; padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table th { white-space: nowrap; }
.admin-table th.sortable-th { cursor: pointer; user-select: none; }
.admin-table th.sortable-th:hover { color: var(--ink); }
.admin-table th.sortable-th::after {
    content: '▲';
    display: inline-block;
    width: 0.9em;
    font-size: 0.65em;
    vertical-align: middle;
    opacity: 0;
}
.admin-table th.sort-asc::after { opacity: 1; }
.admin-table th.sort-desc::after { content: '▼'; opacity: 1; }
.admin-table th { background: #F2F1ED; font-size: 0.9rem; color: var(--ink-soft); }
.admin-actions { display: flex; gap: 1rem; align-items: center; }
.admin-actions form { display: inline; }
.link-danger { background: none; border: none; color: var(--bad); font-weight: 600; cursor: pointer; padding: 0; font-family: var(--font); font-size: 1em; }

.song-form { display: flex; flex-direction: column; gap: 1.1rem; max-width: 700px; }
.song-form label { font-weight: 600; display: flex; flex-direction: column; gap: 0.3rem; }
.song-form input[type=text], .song-form select, .song-form textarea {
    font-family: var(--font);
    font-size: 1rem;
    padding: 0.6rem 0.8rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
}
.checkbox-label { flex-direction: row !important; align-items: center; gap: 0.6rem !important; }
.klassen-fieldset {
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.8rem 1rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}
.klassen-fieldset legend { font-weight: 600; padding: 0 0.3rem; }
.klassen-fieldset .checkbox-label { font-weight: 400; }
.part-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    background: #FBFAF8;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.9rem;
    position: relative;
}
.part-row textarea { min-height: 90px; }
.btn-remove-part {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: var(--bad-bg);
    color: var(--bad);
    border: none;
    border-radius: 999px;
    width: 28px;
    height: 28px;
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
}
#add-part { align-self: flex-start; }
.form-actions { margin-top: 0.5rem; }

/* ---------- Querformat / iPad ---------- */
@media (min-width: 700px) and (orientation: landscape) {
    .uebung-main, .test-main { padding-left: 2.5rem; padding-right: 2.5rem; }
}

@media (max-width: 480px) {
    .klassen-cards { grid-template-columns: 1fr; }
    html, body { font-size: 17px; }
    .dachzeile, .page-header { padding-left: 16px; padding-right: 16px; }
    .site-title { font-size: 28px; }
    .klassenwahl { padding-top: 28px; }
    .site-footer { width: calc(100% - 32px); }
}