:root {
    --bg: #f4f6fb;
    --card: #ffffff;
    --ink: #1f2733;
    --muted: #6b7684;
    --primary: #3b5bdb;
    --primary-dark: #2f49b0;
    --success: #2f9e44;
    --danger: #e03131;
    --border: #e2e6ee;
    --radius: 12px;
    --shadow: 0 2px 10px rgba(20, 30, 60, .06);
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.5;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; margin: .2em 0; }
h2 { font-size: 1.2rem; }
.muted { color: var(--muted); font-size: .92rem; }
.hidden { display: none !important; }

/* Topbar */
.topbar {
    display: flex; align-items: center; gap: 1rem;
    background: var(--card); border-bottom: 1px solid var(--border);
    padding: .7rem 1.2rem; box-shadow: var(--shadow); flex-wrap: wrap;
}
.brand { font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.topbar nav { margin-left: auto; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.topbar nav a { color: var(--muted); font-weight: 500; }
.topbar nav a.active { color: var(--primary); }
.topbar .who { color: var(--ink); font-weight: 600; }

/* Burger-Button: nur in der Mobilansicht sichtbar */
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--border);
    border-radius: 8px; font-size: 1.4rem; line-height: 1; padding: .25rem .55rem; cursor: pointer;
    color: var(--ink); }
@media (max-width: 640px) {
    .nav-toggle { display: inline-flex; align-items: center; }
    .topbar nav { display: none; margin-left: 0; flex-basis: 100%; flex-direction: column;
        align-items: flex-start; gap: .6rem; margin-top: .7rem; }
    .topbar nav.open { display: flex; }
    .topbar nav a, .topbar nav .who { padding: .2rem 0; }
}

.container { max-width: 960px; margin: 1.5rem auto; padding: 0 1rem; }

/* Buttons */
.btn {
    display: inline-block; border: 1px solid var(--border); background: #fff;
    color: var(--ink); padding: .55rem 1rem; border-radius: 8px; cursor: pointer;
    font-size: .95rem; font-weight: 600; transition: .15s;
}
.btn:hover { text-decoration: none; border-color: var(--primary); }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-success { background: var(--success); color: #fff; border-color: var(--success); }
.btn-danger { background: #fff; color: var(--danger); border-color: #f1c6c6; }
.btn-danger:hover { background: var(--danger); color: #fff; }
/* Auffälliger roter „Übung starten"-Button */
.btn-start { background: var(--danger); color: #fff; border-color: var(--danger); font-weight: 700;
    box-shadow: 0 2px 10px rgba(224,49,49,.35); }
.btn-start:hover { background: #c92a2a; border-color: #c92a2a; color: #fff; }
.btn-small { padding: .3rem .6rem; font-size: .82rem; }

/* Nativen Datei-Auswahl-Button im üblichen Blau darstellen */
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    background: var(--primary); color: #fff; border: 1px solid var(--primary);
    padding: .5rem .9rem; border-radius: 8px; font-weight: 600; font-size: .95rem;
    cursor: pointer; margin-right: .7rem; transition: .15s;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover { background: var(--primary-dark); }
.btn-wide { flex: 1; }
.btn-link { color: var(--muted) !important; }

/* Cards & forms */
.card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.2rem 1.4rem; box-shadow: var(--shadow); margin-bottom: 1.4rem;
}
.card.narrow { max-width: 420px; margin: 2rem auto; }
label { display: block; margin: .7rem 0; font-weight: 600; font-size: .92rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=file], select {
    width: 100%; padding: .55rem .7rem; border: 1px solid var(--border);
    border-radius: 8px; font-size: 1rem; margin-top: .25rem; background: #fff;
}
select { width: auto; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
/* min-width:0, sonst zwingt langer, nicht umbrechbarer Inhalt (z. B. ein Select
   mit langem Options-Text) die Spalte breiter als den Bildschirm. */
.grid2 > * { min-width: 0; }
.grid2 .full { grid-column: 1 / -1; margin-top: .5rem; }
@media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } }

/* Flash */
.flash { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-weight: 500; }
.flash-success { background: #e7f6ec; color: #1c7a34; }
.flash-error { background: #fdeaea; color: #b02525; }
.flash-warn { background: #fff4e0; color: #9a5b00; }
.class-dup-note { background: #fff4e0; color: #7a4a00; border-radius: 8px;
    padding: .55rem .8rem; margin: .2rem 0 .7rem; font-size: .9rem; }
.class-dup-note ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.class-dup-note li { margin: .1rem 0; }

/* Anleitung / Hilfe-Seite */
.help-toc ol { margin: .4rem 0 0; padding-left: 1.3rem; }
.help-toc li { margin: .2rem 0; }
.help-toc a { text-decoration: none; }
.help-toc a:hover { text-decoration: underline; }
.help-section { scroll-margin-top: 70px; }
.help-section h2 { margin-top: 0; }
.help-section h3 { margin: .2rem 0 .3rem; }
.help-section ul { padding-left: 1.2rem; }
.help-section li { margin: .3rem 0; }
.help-modes { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.help-mode { background: #f3f5fb; border-radius: 10px; padding: .7rem .9rem; }
.help-mode p { margin: 0; }
.help-table { width: 100%; border-collapse: collapse; margin: .4rem 0; }
.help-table th, .help-table td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--border, #e3e6ee); }
.help-table th { font-size: .9rem; color: #555; }

/* Bearbeiten-Icon neben dem Lerneinheit-Titel */
.title-edit-btn { background: none; border: none; cursor: pointer; padding: 0 .2rem;
    font-size: .65em; line-height: 1; vertical-align: middle; opacity: .75; }
.title-edit-btn:hover { opacity: 1; }

/* Merkbild-Symbol in der Lerneinheit-Kachel (Übersicht) – halbe Größe */
.unit-img-ico { margin-left: .15rem; font-size: .5em; vertical-align: middle; }

/* Landing */
.hero { text-align: center; padding: 2rem 0; }
.hero .lead { max-width: 620px; margin: 1rem auto; font-size: 1.15rem; color: var(--muted); }
.cta { display: flex; gap: .8rem; justify-content: center; margin: 1.5rem 0; flex-wrap: wrap; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1rem; padding: 0; margin-top: 2rem; text-align: left; }
.steps li { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1rem; box-shadow: var(--shadow); }
@media (max-width: 640px) { .steps { grid-template-columns: 1fr; } }

/* Page head */
.page-head { display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.back-link { display: inline-block; font-size: 1.05rem; font-weight: 600; margin-bottom: .3rem; }
/* Einheitlicher „Zurück"-Button: grauer Kreis mit dunklem Pfeil nach links. */
.back-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 34px; height: 34px; border-radius: 50%; background: #eef1f4; color: #3a4149;
    box-shadow: 0 1px 3px rgba(20,30,50,.18); border: none; padding: 0; cursor: pointer;
    text-decoration: none; }
.back-btn:hover { background: #e3e7ec; color: #3a4149; text-decoration: none; }
.back-btn svg { display: block; }

/* Sprach-Umschaltung per Länderflagge */
.lang-switch { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.lang-flag { display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .7rem; border: 2px solid var(--border); border-radius: 999px;
    background: var(--card); color: var(--ink); line-height: 1; transition: .15s; }
.lang-flag:hover { text-decoration: none; border-color: var(--primary); transform: translateY(-1px); }
.lang-flag.active { border-color: var(--primary); background: var(--primary); color: #fff; }
.lang-flag-emoji { font-size: 1.3rem; display: inline-flex; align-items: center; }
.flag-svg { width: 1.6em; height: 1.07em; border-radius: 2px; display: block; }
.lang-flag-name { font-weight: 600; font-size: .95rem; }

/* Units */
.class-head { margin: 1.4rem 0 .6rem; border-bottom: 2px solid var(--border); padding-bottom: .3rem; }
/* Smartphone: eine Kachel über die volle Breite. Ab Tablet/Laptop zwei
   Kacheln nebeneinander (je halbe Breite) – so sind sie am PC nicht winzig. */
.unit-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .unit-grid { grid-template-columns: 1fr 1fr; } }
/* Grid-Element darf unter seine Inhalts-Mindestbreite schrumpfen (sonst
   überläuft die Box-Reihe auf schmalen Smartphones). */
.unit-item { min-width: 0; }
.unit-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1rem; box-shadow: var(--shadow); color: var(--ink); display: block; transition: .15s; }
.unit-card:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--primary); }
.unit-title { font-weight: 700; font-size: 1.05rem; }
.unit-langs { color: var(--primary); font-size: .85rem; margin: .2rem 0; }
.unit-meta { font-size: .85rem; }
.progress { background: #edf0f7; border-radius: 20px; height: 8px; margin: .5rem 0 .3rem; overflow: hidden; }
.progress.big { height: 12px; margin-bottom: 1.5rem; }
.progress-bar { background: var(--success); height: 100%; transition: width .3s; }

/* Photos */
.photo-strip { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.photo-thumb { position: relative; width: 90px; height: 90px; border-radius: 8px; overflow: hidden;
    border: 2px solid var(--border); }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-thumb img.photo-zoom { cursor: zoom-in; }
/* Lightbox für das Original (zugeschnittene Version) */
.photo-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex;
    align-items: center; justify-content: center; padding: 20px;
    background: rgba(0,0,0,.85); cursor: zoom-out; }
.photo-lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px;
    box-shadow: 0 4px 30px rgba(0,0,0,.5); }
.photo-thumb .badge { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.6);
    color: #fff; border-radius: 50%; width: 20px; height: 20px; display: flex;
    align-items: center; justify-content: center; font-size: .75rem; }
.photo-thumb.status-analyzed { border-color: var(--success); }
.photo-thumb.status-error { border-color: var(--danger); }

/* Vocab table */
.add-card { margin: 1rem 0; }
.add-card h3 { margin: 0 0 .6rem; }
.add-card .card-add { margin: 0; }
.card-add { display: flex; align-items: center; gap: .5rem; margin: .8rem 0; flex-wrap: wrap; }
.card-add input { flex: 1; min-width: 120px; margin: 0; }
.vocab-table, .admin-table { width: 100%; border-collapse: collapse; }
.vocab-table th, .vocab-table td, .admin-table th, .admin-table td {
    text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--border); }
.vocab-table input { margin: 0; }
.vocab-table td { vertical-align: middle; }
.row-actions { display: flex; gap: .4rem; align-items: center; }
.row-actions form { display: inline; margin: 0; }
.pw-set-form { display: inline-flex !important; gap: .3rem; align-items: center; }
.pw-set-form input[type="text"] { width: 8.5rem; padding: .25rem .4rem; font-size: .85rem; }
.table-scroll { overflow-x: auto; }

/* Schlanke Vokabelliste (Textdarstellung, Bearbeiten auf Klick) */
.vocab-list { display: flex; flex-direction: column; margin-top: .5rem; }
.vocab-row { padding: .6rem 0; border-bottom: 1px solid var(--border); }
.vocab-de-line { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.vocab-de { font-weight: 700; }
.vocab-num { color: var(--muted); font-weight: 600; }

/* Doppelte-Vokabeln-Seite */
.dup-group h3 { margin: 0 0 .6rem; }
.dup-item { display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    padding: .5rem 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.dup-item:first-of-type { border-top: none; }
.dup-content { flex: 1; min-width: 180px; }
.dup-image { border-radius: 6px; border: 1px solid var(--border); margin-top: .35rem; object-fit: cover; }
.dup-actions { display: flex; gap: .4rem; align-items: center; }
.dup-actions form { margin: 0; }
.dup-kept { opacity: .5; }
.dup-kept .dup-actions { display: none; }
.vocab-fl-line { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .1rem; }
.vocab-info { font-size: .9rem; margin-top: .1rem; }
.vocab-ki { font-size: .78rem; white-space: nowrap; flex: 0 0 auto; }
.vocab-edit-btn { flex: 0 0 auto; line-height: 1; padding: .25rem .45rem; font-size: 1rem; }
.vocab-ki-btn { background: none; border: 1px solid var(--border); border-radius: 999px;
    padding: .12rem .5rem; font: inherit; font-size: .78rem; cursor: pointer;
    white-space: nowrap; flex: 0 0 auto; }
.vocab-ki-btn:hover { border-color: var(--primary); }
.vocab-edit { display: flex; flex-direction: column; margin: 0; }
.vocab-edit > input { margin: 0 0 .15rem; }
.vedit-image { width: 200px; height: 100px; object-fit: cover; border-radius: 8px;
    border: 1px solid var(--border); margin-bottom: .3rem; }
.vedit-lbl { font-size: .78rem; font-weight: 600; color: var(--muted); margin: .7rem 0 .3rem; }
.vedit-pair { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .25rem; }
.vedit-pair input { width: 100%; margin: 0; }
.vedit-wrongs { display: flex; flex-direction: column; gap: .25rem; }
.vedit-wrongs input { width: 100%; margin: 0; }
.vocab-edit-actions { display: flex; gap: .4rem; align-items: center; margin-top: .7rem; flex-wrap: wrap; }
.vocab-delete-form { display: none; }
.spinner { color: var(--primary); font-weight: 600; margin-left: .6rem;
    display: inline-flex; align-items: center; gap: .45rem; }
.spin-ring { display: inline-block; width: 1.05em; height: 1.05em; border-radius: 50%;
    border: 2px solid rgba(59,91,219,.25); border-top-color: var(--primary);
    animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.danger-zone { margin: 2rem 0; text-align: right; }
.excel-tools { display: flex; gap: .5rem; flex-wrap: wrap; }
/* Gleiche Höhe für alle Buttons hier (Button vs. Link haben sonst unterschiedliche line-height) */
.excel-tools .btn { line-height: 1.5; }
.tool-stack { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.import-box { background: #f8f9fc; border: 1px dashed var(--border); border-radius: 8px;
    padding: 1rem; margin-bottom: 1rem; }
.import-box input[type=file] { display: inline-block; width: auto; }
.inline-check { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; margin: 0 .8rem; }
.inline-check input { width: auto; margin: 0; }

/* Flashcard */
.flashcard-wrap { max-width: 560px; margin: 1rem auto; }
.flashcard { background: var(--card); border: 1px solid var(--border); border-radius: 16px;
    box-shadow: var(--shadow); min-height: 220px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 2rem; text-align: center; gap: 1rem; }
.fc-image { width: 200px; height: 100px; object-fit: cover; border-radius: 8px;
    border: 1px solid var(--border); }
.fc-prompt { font-size: 1.8rem; font-weight: 700; }
.fc-answer { font-size: 1.5rem; color: var(--success); border-top: 1px dashed var(--border);
    padding-top: 1rem; width: 100%; }
.fc-info { font-size: .95rem; color: var(--muted); background: #f8f9fc; border-radius: 8px;
    padding: .5rem .8rem; width: 100%; }
.fc-example { width: 100%; background: #f1f6ff; border-radius: 8px; padding: .6rem .8rem;
    display: flex; flex-direction: column; gap: .2rem; animation: fadeInUp .3s ease; }
.fc-example .ex-b { font-weight: 600; color: var(--primary); }
.fc-example .ex-a { color: var(--muted); font-size: .92rem; }

/* Karten-Feedback (Text-Overlay) */
.flashcard { position: relative; overflow: hidden; }
.fc-feedback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; font-weight: 800; opacity: 0; pointer-events: none;
    background: rgba(255,255,255,.82); transition: opacity .15s; }
.fc-feedback.show { opacity: 1; }
.fc-feedback.ok { color: var(--success); }
.fc-feedback.cheer { color: var(--primary); }

/* richtig: grüner Puls */
.anim-correct { animation: pulseGreen .6s ease; }
@keyframes pulseGreen {
    0% { box-shadow: 0 0 0 0 rgba(47,158,68,.5); }
    50% { box-shadow: 0 0 0 14px rgba(47,158,68,0); transform: scale(1.02); }
    100% { box-shadow: 0 0 0 0 rgba(47,158,68,0); transform: scale(1); }
}
/* falsch: sanftes Wackeln (nicht entmutigend) */
.anim-wrong { animation: shake .5s ease; }
@keyframes shake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(3px); }
}
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Funken bei richtiger Antwort */
.spark { position: absolute; bottom: 40%; font-size: 1.3rem; pointer-events: none;
    animation: sparkUp .85s ease-out forwards; }
@keyframes sparkUp {
    0% { opacity: 0; transform: translate(0, 0) scale(.6); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx, 0), -120px) scale(1.2); }
}

/* Konfetti am Ende */
.confetti-piece { position: fixed; top: -12px; width: 9px; height: 14px; border-radius: 2px;
    z-index: 1000; pointer-events: none; animation-name: confettiFall; animation-timing-function: linear; }
@keyframes confettiFall {
    0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
    100% { transform: translateY(105vh) rotate(720deg); opacity: .9; }
}
.done-screen h2 { animation: popIn .5s cubic-bezier(.17,.89,.32,1.28); }
@keyframes popIn { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Feier-Effekt bei erreichtem Tagesziel (X Vokabeln ein Fach höher) */
.goal-celebrate { position: fixed; inset: 0; z-index: 1200; display: flex;
    align-items: center; justify-content: center; pointer-events: none;
    background: rgba(0,0,0,0); transition: background .35s ease; }
.goal-celebrate.show { background: rgba(0,0,0,.35); }
.goal-celebrate-box { text-align: center; background: #fff; color: #212529;
    border-radius: 22px; padding: 1.8rem 2.4rem; box-shadow: 0 18px 50px rgba(0,0,0,.3);
    transform: scale(.4); opacity: 0; transition: transform .45s cubic-bezier(.17,.89,.32,1.28), opacity .3s ease; }
.goal-celebrate.show .goal-celebrate-box { transform: scale(1); opacity: 1; }
.goal-celebrate-emoji { font-size: 3.4rem; line-height: 1; }
.goal-celebrate-title { font-size: 1.6rem; font-weight: 800; margin-top: .4rem; color: #2f9e44; }
.goal-celebrate-sub { font-size: 1rem; margin-top: .3rem; color: #495057; max-width: 22rem; }
/* Bronze-Party: Tagesziel (1×) erreicht */
.goal-celebrate-bronze .goal-celebrate-box {
    background: linear-gradient(160deg, #fff3e8 0%, #f3d3b3 100%);
    border: 2px solid #b87333; box-shadow: 0 18px 55px rgba(150,90,30,.45); }
.goal-celebrate-bronze .goal-celebrate-title { color: #a9691f; }
.goal-celebrate-bronze .goal-celebrate-sub { color: #6b4a20; }
/* Silber-Party: doppeltes Tagesziel (2×) erreicht */
.goal-celebrate-silver.show { background: rgba(40,45,55,.4); }
.goal-celebrate-silver .goal-celebrate-box {
    background: linear-gradient(160deg, #ffffff 0%, #dfe3e8 100%);
    border: 2px solid #a8adb4; box-shadow: 0 18px 55px rgba(90,100,110,.45); }
.goal-celebrate-silver .goal-celebrate-emoji { font-size: 4rem; }
.goal-celebrate-silver .goal-celebrate-title { color: #6b7280; }
.goal-celebrate-silver .goal-celebrate-sub { color: #495057; }
/* Gold-Party: dreifaches Tagesziel erreicht */
.goal-celebrate-gold.show { background: rgba(60,40,0,.45); }
.goal-celebrate-gold .goal-celebrate-box {
    background: linear-gradient(160deg, #fff9e6 0%, #ffe9a8 100%);
    border: 2px solid #d4af37; box-shadow: 0 18px 55px rgba(180,140,0,.5); }
.goal-celebrate-gold .goal-celebrate-emoji { font-size: 4rem; filter: drop-shadow(0 2px 4px rgba(150,110,0,.4)); }
.goal-celebrate-gold .goal-celebrate-title { color: #b8860b; }
.goal-celebrate-gold .goal-celebrate-sub { color: #6b5200; }
/* Platin-Party: vierfaches Tagesziel erreicht */
.goal-celebrate-platinum.show { background: rgba(30,45,65,.45); }
.goal-celebrate-platinum .goal-celebrate-box {
    background: linear-gradient(160deg, #ffffff 0%, #cdd8e6 100%);
    border: 2px solid #7f90ab; box-shadow: 0 18px 55px rgba(60,80,110,.5); }
.goal-celebrate-platinum .goal-celebrate-emoji { font-size: 4rem; filter: drop-shadow(0 2px 4px rgba(60,80,110,.35)); }
.goal-celebrate-platinum .goal-celebrate-title { color: #3a5170; }
.goal-celebrate-platinum .goal-celebrate-sub { color: #2b3a4d; }

@media (prefers-reduced-motion: reduce) {
    .anim-correct, .anim-wrong, .spark, .confetti-piece, .done-screen h2, .fc-example { animation: none !important; }
    .goal-celebrate, .goal-celebrate-box { transition: none !important; }
}

/* Profil: Erfolgs-Benachrichtigungen – Label, Feld, Button jeweils in eigener Zeile */
.profile-form label { display: block; margin: 0 0 .4rem; }
.profile-form textarea { display: block; width: 100%; padding: .55rem .7rem;
    border: 1px solid var(--border); border-radius: 8px; font: inherit; box-sizing: border-box; }
.profile-form button { display: block; margin-top: .8rem; }
.goal-progress { margin: .3rem 0 0; padding-left: 1.2rem; }
.goal-progress li { margin: .2rem 0; }

/* 7-Tage-Erfolgskalender auf der Übersicht */
.success-cal { margin-bottom: 1rem; }
.sc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; margin-bottom: .7rem; }
.sc-title { font-weight: 700; }
.sc-strip { display: flex; gap: .5rem; flex-wrap: wrap; }
.sc-day { flex: 0 0 auto; width: 56px; box-sizing: border-box; text-align: center;
    border: 1px solid var(--border); border-radius: 12px; padding: .55rem .3rem;
    background: #fff; line-height: 1.2; }
.sc-day .sc-date { display: block; font-size: .8rem; color: var(--muted); }
.sc-day .sc-count { display: block; font-size: 1.15rem; font-weight: 700; }
/* Bronze: Tagesziel (1×) an diesem Tag erreicht */
.sc-day.sc-bronze { background: linear-gradient(160deg, #e6a45c 0%, #b87333 100%);
    border-color: #a9691f; color: #fff; }
.sc-day.sc-bronze .sc-date { color: rgba(255,255,255,.9); }
/* Silber: doppeltes Tagesziel (2×) */
.sc-day.sc-silver { background: linear-gradient(160deg, #f5f7fa 0%, #c0c4cc 100%);
    border-color: #a8adb4; color: #3a4149; }
.sc-day.sc-silver .sc-date { color: #5b636b; }
/* Gold: dreifaches Tagesziel (3×) */
.sc-day.sc-gold { background: linear-gradient(160deg, #ffe27a 0%, #d4af37 100%);
    border-color: #c9a227; color: #5a4300; position: relative; }
.sc-day.sc-gold .sc-date { color: #7a5c00; }
/* Platin: vierfaches Tagesziel (4×) */
.sc-day.sc-platinum { background: linear-gradient(160deg, #eef3f9 0%, #9fb0c9 100%);
    border-color: #7f90ab; color: #2b3a4d; }
.sc-day.sc-platinum .sc-date { color: #4a5a70; }
.sc-day .sc-medal { font-size: .85em; margin-right: .1em; }   /* vor der Zahl, gleiche Zeile */
.sc-day.sc-today { box-shadow: 0 0 0 2px var(--primary) inset; }
/* Legenden-Boxen (Ziel/Gold) rund ein Drittel kleiner als die Tages-Kacheln,
   vertikal zentriert, mit entsprechend kleinerer Schrift. */
.sc-day.sc-legend { width: 40px; padding: .32rem .18rem; align-self: center; }
.sc-day.sc-legend .sc-date { font-size: .6rem; }
.sc-day.sc-legend .sc-count { font-size: .8rem; }
/* Einheitlicher Abstand zwischen den drei Legenden-Boxen; nur die letzte
   Legende (vor den Tages-Kacheln) bekommt eine etwas größere Trennung. */
.sc-legend-end { margin-right: .5rem; }

.ki-cell { white-space: nowrap; font-size: .85rem; }

/* Schreibweise-Quiz */
.quiz-prompt { font-size: 1.8rem; font-weight: 700; text-align: center; background: var(--card);
    border: 1px solid var(--border); border-radius: 16px; padding: 1.6rem; box-shadow: var(--shadow); }
.quiz-options { display: grid; gap: .6rem; margin-top: 1rem; }
.quiz-option { text-align: center; font-size: 1.1rem; padding: .8rem; }
.quiz-option.opt-correct { background: var(--success); color: #fff; border-color: var(--success);
    animation: pulseGreen .6s ease; }
.quiz-option.opt-wrong { background: var(--danger); color: #fff; border-color: var(--danger);
    animation: shake .5s ease; }

/* „Mehr"-Seite: Feature-Boxen (Überschrift, Kurztext, Start-Button) */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem; margin-top: 1rem; }
.feature-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.2rem; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.feature-title { margin: 0 0 .5rem; font-size: 1.25rem; }
.feature-text { margin: 0 0 1rem; color: var(--muted); flex: 1; }
.feature-card .btn { align-self: flex-start; }
.subject-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem; margin-top: 1rem; }
.subject-btn { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem;
    min-height: 4rem; padding: 1rem 1.2rem; text-align: left;
    background: #cfe0f5; border: 1px solid #aecbee; color: #1f2328; }
.subject-btn:hover { background: #bed4f0; }
.subject-btn-name { font-size: 1.3rem; font-weight: 700; }
.subject-btn-count { font-size: .9rem; }

/* Kontinente-Quiz: Umriss-Karte, Frage, Feedback */
.cont-map { display: flex; justify-content: center; align-items: center; background: var(--card);
    border: 1px solid var(--border); border-radius: 16px; padding: 1rem; margin: .4rem auto 0;
    max-width: 560px; box-shadow: var(--shadow); }
.cont-map svg { width: 100%; height: 220px; max-height: 42vh; display: block; }
/* Gleichfarbiger Rand schließt die feinen Fugen zwischen den Ländergrenzen. */
.cont-map svg path { fill: var(--ink); stroke: var(--ink); stroke-width: .6; stroke-linejoin: round; }

/* Ozeane-Quiz: Weltkarte mit anklickbaren Meer-Punkten. */
.oc-map { position: relative; max-width: 560px; margin: .4rem auto 0; background: var(--card);
    border: 1px solid var(--border); border-radius: 16px; padding: .5rem; box-shadow: var(--shadow); }
.oc-world { display: block; width: 100%; height: auto; border-radius: 10px; }
.oc-sea { fill: #cfe6f5; }
.oc-land { fill: #cdeccd; stroke: #8fc98f; stroke-width: .5; stroke-linejoin: round; }
.oc-hotspots { position: absolute; inset: .5rem; pointer-events: none; }
.oc-spot { position: absolute; width: 26px; height: 26px; transform: translate(-50%, -50%);
    border-radius: 50%; border: 2px solid #fff; background: #3b5bdb; box-shadow: 0 0 0 2px rgba(59,91,219,.35);
    cursor: pointer; padding: 0; pointer-events: auto; }
.oc-spot:disabled { cursor: default; }
.oc-hidden { display: none; }
.oc-target { background: #f6c343; border-color: #fff; box-shadow: 0 0 0 3px rgba(246,195,67,.5);
    animation: ocPulse 1.1s ease-in-out infinite; }
.oc-target::after { content: '?'; color: #5a4300; font-weight: 700; font-size: .95rem;
    line-height: 22px; display: block; text-align: center; }
.oc-correct { background: #1c7a34 !important; box-shadow: 0 0 0 3px rgba(28,122,52,.4) !important; }
.oc-wrong { background: #b02525 !important; box-shadow: 0 0 0 3px rgba(176,37,37,.4) !important; }
@keyframes ocPulse { 0%,100% { transform: translate(-50%,-50%) scale(1); }
    50% { transform: translate(-50%,-50%) scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .oc-target { animation: none; } }
.cont-prompt { text-align: center; font-size: 1.25rem; font-weight: 700; margin: .9rem 0 .2rem; }
.cont-name-row { max-width: 560px; margin: .4rem auto 0; }
.cont-feedback { min-height: 1.6rem; margin-top: .8rem; text-align: center; font-size: 1.15rem;
    font-weight: 700; }
.cont-feedback.show.ok { color: var(--success); }
.cont-feedback.show.cheer { color: var(--primary); }

/* Lückentext */
.cloze-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px;
    padding: 1.6rem; box-shadow: var(--shadow); }
.cloze-sentence { font-size: 1.4rem; line-height: 2.2; text-align: center; }
#clozeInput { display: inline-block; width: auto; min-width: 8em; text-align: center;
    border: none; border-bottom: 3px solid var(--primary); border-radius: 0; background: #f8f9fc;
    font-size: 1.4rem; padding: .1rem .4rem; margin: 0 .2rem; }
#clozeInput:focus { outline: none; background: #eef3ff; }
#clozeInput.cloze-correct { border-color: var(--success); color: var(--success); background: #e7f6ec;
    animation: pulseGreen .6s ease; }
#clozeInput.cloze-wrong { border-color: var(--danger); color: var(--danger); background: #fdeaea;
    animation: shake .5s ease; }
.cloze-controls { display: flex; align-items: center; gap: .8rem; justify-content: center;
    margin-top: 1.4rem; flex-wrap: wrap; }
.hint-btn { font-size: 1.3rem; padding: .35rem .7rem; line-height: 1; }
.cloze-hint { font-weight: 700; color: var(--primary); background: #fff3bf; border-radius: 8px;
    padding: .3rem .7rem; animation: fadeInUp .25s ease; }
.cloze-solution { display: inline-block; margin-left: .4rem; color: var(--ink); font-weight: 500; }
.fc-controls { margin-top: 1.2rem; }
.fc-controls .btn { width: 100%; margin-bottom: .6rem; }

/* Fokus-Modus im Training (ohne Kopfzeile/Menü) */
body.focus-mode .container { margin-top: 0; padding-top: 30px; }
/* Touch im Training (Lernen UND Prüfen): „Zurück" ganz links oben, die Boxen
   (Fächer bzw. gewusst/nicht gewusst) ganz rechts oben (aus dem Fluss genommen),
   damit die Karteikarte nach oben rückt. Im Prüf-Modus bleibt unten Platz für
   die eigene Bildschirmtastatur. */
body.focus-compact .container { position: relative; padding-top: 50px; }
/* Tablet: Auf breiten Touch-Geräten nimmt die 960px-Seite nur einen Teil der
   Breite ein – „Zurück" (links) und die Boxen (rechts) sitzen dann weit innen
   und überlagern die mittige Karteikarte. Seite hier breiter (1056px + 15 %). */
@media (min-width: 700px) {
    body.focus-compact .container { max-width: 1214px; }
}
body.focus-compact .focus-head { position: absolute; top: 30px; left: 1rem; right: 1rem;
    max-width: none; margin: 0; justify-content: space-between; z-index: 5; }
body.focus-compact .focus-head .focus-boxes { margin: 0; max-width: none; width: auto; }
body.focus-compact .flashcard-wrap { margin-top: 0; }
/* Smartphone: Karteikarte 40px tiefer, damit sie nicht mit Kopfzeile/Boxen
   (die auf schmalen Geräten mehr Platz brauchen) überlappt. */
@media (max-width: 600px) {
    body.focus-compact .container { padding-top: 75px; }
    body.focus-compact .focus-head { top: 12px; }
}
body.quiz-focus .container { padding-top: 20px; }
.focus-head { display: flex; align-items: center; gap: .15rem; max-width: 560px; margin: 0 auto; }
.focus-back { font-size: 2.3rem; font-weight: 800; line-height: 1; text-decoration: none;
    color: var(--ink); padding: .1rem .15rem; border-radius: 8px; position: relative; top: -5px; }
.focus-back:hover { background: #eef1f6; text-decoration: none; }
.focus-title { font-size: 1.5rem; margin: 0; }
/* Kompakter „Beenden"-Link statt großer Titelzeile (spart Höhe für die
   Bildschirmtastatur im Prüf-Modus). */
.focus-exit { display: inline-flex; align-items: center; gap: .3rem; font-size: 1.05rem;
    font-weight: 700; color: var(--ink); text-decoration: none; padding: .2rem .1rem; }
.focus-exit:hover { color: var(--primary); text-decoration: none; }
.leitner-boxes.focus-boxes { max-width: 560px; margin: .35rem auto .2rem; justify-content: flex-start; }
.focus-dir { display: block; max-width: 560px; margin: .8rem auto 0; }

/* Box-Übersicht mit Punktezähler links davor */
.focus-overview { display: flex; align-items: center; gap: .6rem; max-width: 560px; margin: .8rem auto 0; }
.focus-overview .leitner-boxes { margin: 0; flex: 1; }
.score-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%; background: #eef0f3;
    border: 2px solid var(--ink); color: var(--ink); font-weight: 700; font-size: 1.1rem; }
.score-badge.done { background: #e6f5ec; border-color: var(--success); color: var(--success); }

/* Quiz-Ergebnis als Box (wie die Fach-Boxen, grau, Rand wie die anderen) */
.lbox.lbox-quiz { background: #e2d4f0; border-color: #cbb6e6; }   /* helleres Lila (Zähl-Box) */
.lbox.lbox-quiz.done { background: #e6f5ec; border-color: var(--success); }
.lbox.lbox-quiz.done .lbox-n { color: var(--success); }

/* Box-Übersicht in der Detailansicht */
.unit-overview { margin: 0 0 1rem; max-width: 560px; }
.unit-overview .leitner-boxes { margin: 0; }

/* Segmentierter Fortschrittsbalken (grün = richtig, rot = falsch) */
.quiz-track { display: flex; gap: 2px; width: 100%; min-height: 12px; margin-bottom: 1rem;
    background: #eef0f3; border-radius: 6px; overflow: hidden; }
.quiz-seg { flex: 1 1 0; min-width: 3px; }
.quiz-seg.seg-ok { background: var(--success); }
.quiz-seg.seg-wrong { background: var(--danger); }

/* Ecken-Icons in der Karteikarte (Graustufen) */
.fc-icon { position: absolute; top: 8px; background: none; border: none; cursor: pointer;
    font-size: 1.35rem; line-height: 1; padding: .25rem; z-index: 3;
    filter: grayscale(1); opacity: .55; transition: opacity .15s; }
.fc-icon:hover { opacity: 1; }
.fc-edit { left: 8px; }
.fc-speak { right: 8px; }

/* Eingabe der Übersetzung + Spracheingabe */
.answer-row { display: flex; gap: .5rem; align-items: stretch; margin-top: 1rem; }
.answer-row .answer-input { flex: 1; margin: 0; font-size: 1.05rem; }
.answer-input.correct { background: #cdeccd; border-color: #a9d9a9; }
.answer-input.wrong { background: #f7d3d3; border-color: #e6a6a6; }
/* Prüf-Modus: Prüfung per Enter/Enter-Icon – Umdrehen/Bewertungs-Buttons weg. */
#trainer[data-mode="check"] .fc-controls { display: none; }
/* Lern-Modus: kein Eingabefeld/Mikrofon; „Umdrehen" ist der große Button oben. */
#trainer[data-mode="learn"] .answer-row { display: none; }
#trainer[data-mode="learn"] #revealBtn { display: none; }
.mic-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    min-width: 3rem; border: 1px solid var(--border); border-radius: 8px; background: #fff;
    cursor: pointer; font-size: 1.25rem; line-height: 1; }
.mic-btn:hover { border-color: var(--primary); }
.mic-btn.recording { background: #ffe3e3; border-color: var(--danger); animation: micPulse 1s infinite; }
@keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(224,49,49,.5); } 50% { box-shadow: 0 0 0 6px rgba(224,49,49,0); } }
/* Eigene Bildschirmtastatur (Touch-Geräte, Prüf-Modus) */
.vkeyboard { max-width: 560px; margin: .7rem auto 0; display: flex; flex-direction: column; gap: 6px;
    -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.vk-row { display: flex; gap: 6px; justify-content: center; }
.vk-key { flex: 1 1 0; min-width: 0; min-height: 46px; padding: 0; border: 1px solid var(--border);
    background: #fff; color: var(--ink); border-radius: 8px; font-family: inherit; font-size: 1.15rem;
    font-weight: 600; cursor: pointer; -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none; touch-action: manipulation; }
.vk-key:active { background: #e7ebf3; }
.vk-specials { flex-wrap: wrap; }
.vk-specials .vk-key { flex: 0 0 auto; min-width: 2.6rem; padding: 0 .4rem; background: #f5f3fb; }
.vk-numtoggle { font-weight: 600; }
.vk-numtoggle-on { background: #dfe6ff; border-color: #b9c6f6; }
.vk-shift { flex: 1.6 1 0; font-size: 1.3rem; background: #f1f3f5; }
.vk-shift.vk-shift-on { background: #dfe7fb; border-color: var(--primary); color: var(--primary); }
.vk-back { flex: 2 1 0; }
/* Buchstabentaste mit Umlaut-Hinweis (klein und heller, oben rechts).
   Langer Druck (>300 ms) auf a/o/u schreibt ä/ö/ü. */
.vk-letter { position: relative; }
.vk-umlaut { position: absolute; top: 3px; right: 5px; font-size: .62rem; font-weight: 600;
    line-height: 1; color: var(--muted); opacity: .55; pointer-events: none; }
.vk-space { flex: 4 1 0; }
.vk-enter { flex: 2 1 0; background: #cdeecd; border-color: #a9d9a9; color: #256b25; }
.vk-enter:active { background: #bde6bd; }
/* Zeile mit „Überspringen" und (im Prüf-Modus) dem Erledigt-Zähler. */
.skip-row { display: flex; gap: .6rem; align-items: stretch; margin-top: .6rem; }
.skip-btn { display: block; flex: 1 1 auto; min-height: 3rem;
    font-size: 1.05rem; font-weight: 600; background: #f1f3f5; }
/* Im Prüf-Modus nimmt „Überspringen" nur die halbe Breite ein, der Zähler die andere. */
#trainer[data-mode="check"] .skip-btn { flex: 0 0 50%; }
.skip-btn:disabled { opacity: .45; cursor: not-allowed; }
.done-counter { flex: 1 1 auto; display: flex; flex-direction: column;
    align-items: center; justify-content: center; min-height: 3rem;
    border: 1px solid var(--border); border-radius: 8px; background: #f6f8fc; line-height: 1.15; }
.done-counter .dc-label { font-size: .72rem; color: var(--muted); }
.done-counter .dc-val { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
/* „Weiter" nach falscher Antwort im Prüf-Modus (Lösung bleibt sichtbar). */
.next-btn { display: block; width: 100%; margin-top: .6rem; min-height: 3rem;
    font-size: 1.1rem; font-weight: 700; }

/* Bearbeiten-Panel im Training */
.fc-edit-panel { display: flex; flex-direction: column; margin-top: 1rem;
    background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; }
.fc-edit-panel input { margin: 0; }
.fc-edit-actions { display: flex; gap: .4rem; margin-top: .6rem; }
.fc-grade { display: flex; gap: .6rem; }
.direction-toggle { font-weight: 600; font-size: .9rem; }
.done-screen { text-align: center; background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); }
.done-screen .btn { margin: .3rem; }

/* Admin */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
@media (max-width: 560px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1rem; text-align: center; box-shadow: var(--shadow); }
.stat-num { font-size: 1.8rem; font-weight: 700; color: var(--primary); }
.stat-label { color: var(--muted); font-size: .85rem; }
.tag { font-size: .72rem; padding: .1rem .5rem; border-radius: 20px; font-weight: 700; text-transform: uppercase; }
.tag-admin { background: #fff3bf; color: #a07800; }
.tag-user { background: #e7f5ff; color: #1971c2; }
.tag-locked { background: #fdeaea; color: #b02525; }

/* Freigaben */
.share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 560px) { .share-grid { grid-template-columns: 1fr; } }
.share-grid h3 { margin: .2rem 0 .6rem; font-size: 1rem; }
.share-form { display: flex; gap: .5rem; align-items: stretch; margin-bottom: .6rem; }
.share-form .btn { align-self: stretch; white-space: nowrap; }
/* Kombiniertes Eingabefeld mit Vorschlägen (Autocomplete) */
.user-combo { position: relative; flex: 1; min-width: 180px; display: flex; }
.user-combo .user-combo-input { flex: 1; width: 100%; margin: 0; }
.user-combo-list { position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
    margin: 2px 0 0; padding: 0; list-style: none; background: var(--card);
    border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow);
    max-height: 220px; overflow-y: auto; }
.user-combo-list li { padding: .45rem .6rem; cursor: pointer; }
.user-combo-list li:hover, .user-combo-list li.active { background: var(--primary); color: #fff; }
.share-list { list-style: none; padding: 0; margin: .4rem 0 0; }
.share-list li { display: flex; justify-content: space-between; align-items: center;
    padding: .3rem 0; border-bottom: 1px solid var(--border); }
.share-list form { margin: 0; }

/* Schwerpunkt-Auswahl */
.schwerpunkt-group { border: 1px solid var(--border); border-radius: 8px; padding: .6rem 1rem;
    margin: .8rem 0; }
.schwerpunkt-group legend { font-weight: 700; padding: 0 .4rem; }

/* Ausklappbare Aufteilung: Schule (Ort) > Klasse > Lerneinheiten */
.sp-collapse { border: 1px solid var(--border); border-radius: 10px; background: #fff; margin: .5rem 0; }
.sp-collapse > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem;
    padding: .6rem .8rem; -webkit-user-select: none; user-select: none; }
.sp-collapse > summary::-webkit-details-marker { display: none; }
.sp-collapse > summary::before { content: '▸'; color: var(--muted); font-size: .9em;
    transition: transform .15s ease; }
.sp-collapse[open] > summary::before { transform: rotate(90deg); }
.sp-school > summary { font-weight: 700; }
.sp-school { background: #f8f9fc; }
.sp-class { margin: .5rem .6rem; }
.sp-class > summary { font-weight: 600; }
.sp-class > .sp-item, .sp-class > .sp-class-all { padding-left: .8rem; padding-right: .8rem; }
.sp-class-all { display: flex; margin: .6rem 0 .2rem; }
/* Dashboard: Kacheln der Klasse mit etwas Innenabstand; Bearbeiten-Stift rechts. */
.sp-class > .unit-grid { padding: 0 .8rem .7rem; }
.sp-class > summary .class-edit-btn { margin-left: auto; }
.schwerpunkt-item { display: flex; margin: .3rem 0; }
.direction-switch { margin-bottom: .8rem; }
.direction-switch .btn { display: inline-flex; align-items: center; justify-content: center;
    min-height: 3rem; font-size: 1.05rem; font-weight: 600; }
.direction-switch .dir-ico { color: #fff; font-size: 1.25rem; margin-right: .45rem; line-height: 1; }
.practice-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
/* Hinweis unter „Karteikarten prüfen". */
.mode-hint { background: #fff8e1; border: 1px solid #f2d98a; color: #7a5b00;
    border-radius: 8px; padding: .55rem .7rem; font-size: .9rem; line-height: 1.4;
    margin-top: -.15rem; }
/* Warnung bei aktiver Feststelltaste (externe Tastatur). */
.caps-warn { max-width: 560px; margin: .4rem auto 0; background: #fff3cd;
    border: 1px solid #f2d98a; color: #7a5b00; border-radius: 8px;
    padding: .4rem .6rem; font-size: .85rem; text-align: center; }
/* Übungs-Buttons: gleiche Höhe, untereinander, je Modus eine Pastellfarbe */
.mode-btn { display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 3rem; font-size: 1.05rem; font-weight: 600;
    border: 1px solid transparent; color: #1f2328; }
.mode-cards { background: linear-gradient(160deg, #ffe27a 0%, #f6c343 100%);
    border-color: #e0b93a; color: #5a4300; }   /* Gold */
.mode-cards:hover { background: linear-gradient(160deg, #ffd95a 0%, #eab520 100%); }
.mode-learn { background: #a9d6f5; border-color: #7bb8e6; }   /* kräftiges Himmelblau */
.mode-learn:hover { background: #93c9f0; }
.mode-quiz  { background: #c4a7e7; border-color: #ab8bd8; }   /* kräftiges Violett */
.mode-quiz:hover  { background: #b492df; }
.mode-cloze { background: #cfe0f5; border-color: #aecbee; }   /* pastellblau */
.mode-cloze:hover { background: #bed4f0; }
.mode-test  { background: #f5b7b1; border-color: #e79a92; color: #5a1a14; }   /* kräftiges Rot (Test) */
.mode-test:hover  { background: #f0a49c; }
.admin-table select { padding: .25rem; }

/* Vokabeltest */
.vt-progress { text-align: center; font-weight: 600; color: #555; margin: .3rem 0 .6rem; min-height: 1.2rem; }
.vt-title { text-align: center; font-size: .9rem; margin-bottom: .4rem; }
#vtest .fc-feedback { position: static; inset: auto; opacity: 1; min-height: 1.6rem; margin: .5rem 0; font-weight: 600; }
#vtest .fc-feedback.fb-ok { color: var(--success, #1c7a34); }
#vtest .fc-feedback.fb-no { color: var(--danger, #b02525); }
.vt-score { font-size: 1.2rem; font-weight: 600; margin: .4rem 0; }
.vt-note { font-size: 1.1rem; margin: .2rem 0 .6rem; }
.vt-note-num { display: inline-block; min-width: 1.8rem; padding: .1rem .5rem; border-radius: 8px;
    background: #3b5bdb; color: #fff; font-weight: 700; }

/* Schule/Klasse-Auswahl beim Anlegen einer Lerneinheit */
.picker { display: flex; gap: .4rem; align-items: stretch; margin-top: .25rem; }
/* min-width:0, damit das Select im Flex-Container schrumpfen darf und lange
   Options-Texte die Box auf dem Smartphone nicht überschreiten. */
.picker select { flex: 1; min-width: 0; margin-top: 0; }
/* „+"-Buttons: gleich große Quadrate, exakt auf Höhe des Auswahlfelds. */
.picker .btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 2.6rem; padding: 0; margin: 0; font-size: 1.15rem; line-height: 1; }
.new-fields { display: flex; gap: .5rem; margin-top: .4rem; flex-wrap: wrap; }
.new-fields input { flex: 1 1 140px; min-width: 0; margin: 0; }
.school-head { margin: 1.6rem 0 .4rem; font-size: 1.3rem; }
.school-head .muted { font-size: .95rem; font-weight: 400; }

/* Foto zuschneiden vor dem Upload */
.crop-area { margin: .9rem 0; display: flex; flex-direction: column; gap: 1rem; }
.crop-editor { border: 1px solid var(--border); border-radius: 10px; padding: .6rem; background: #fff; }
.crop-stage { position: relative; display: inline-block; max-width: 100%; overflow: hidden;
    line-height: 0; touch-action: none; }
.crop-img { display: block; max-width: 100%; max-height: 60vh; user-select: none; -webkit-user-drag: none; }
.crop-rect { position: absolute; box-sizing: border-box; border: 2px solid var(--primary);
    box-shadow: 0 0 0 100vmax rgba(0,0,0,.4); cursor: move; touch-action: none; }
.crop-handle { position: absolute; width: 48px; height: 48px; background: rgba(59,91,219,.25);
    border: 3px solid var(--primary); border-radius: 50%; touch-action: none; }
.h-nw { left: -24px; top: -24px; cursor: nwse-resize; }
.h-ne { right: -24px; top: -24px; cursor: nesw-resize; }
.h-sw { left: -24px; bottom: -24px; cursor: nesw-resize; }
.h-se { right: -24px; bottom: -24px; cursor: nwse-resize; }
.crop-hint { margin-top: .5rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.crop-filerow { padding: .5rem .7rem; background: #f8f9fc; border: 1px dashed var(--border);
    border-radius: 8px; font-size: .9rem; }
.pdf-thumb { display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; height: 100%; color: var(--danger); text-decoration: none; font-size: 1.7rem; }
.pdf-thumb span { font-size: .68rem; font-weight: 700; }

/* Foto-Kachel: Löschen-Button */
.photo-del { position: absolute; top: 2px; left: 2px; margin: 0; }
.photo-del button { border: none; cursor: pointer; width: 20px; height: 20px; border-radius: 50%;
    background: rgba(224,49,49,.85); color: #fff; font-size: .8rem; line-height: 1; padding: 0; }
.photo-del button:hover { background: var(--danger); }

/* Vollbild-Crop */
body.no-scroll { overflow: hidden; }
.crop-overlay { position: fixed; inset: 0; z-index: 1000; background: #0f141e;
    display: flex; flex-direction: column; }
.crop-overlay-top { flex: 0 0 auto; text-align: center; color: #fff; font-weight: 600;
    font-size: .85rem; padding: .5rem 1rem; }
/* Horizontal zuverlässig über text-align + inline-block zentriert (keine
   Flexbox-/Absolut-Tricks). Abstand oben über padding-top. */
.crop-overlay-inner { flex: 1 1 auto; min-height: 0; width: 100%; overflow: hidden;
    text-align: left; padding-left: 12px; padding-top: 65px; touch-action: none; }
/* Breite 1% größer als 110vw-69 (= 1,111x von 100vw-63); Linksrand fix 15px. */
.crop-overlay .crop-stage { position: relative; display: inline-block; margin: 0;
    max-width: calc(111.1vw - 70px); max-height: 100%; }
.crop-overlay .crop-img { display: block; max-width: calc(111.1vw - 70px); }
.crop-overlay-actions { flex: 0 0 auto; display: flex; gap: .8rem; justify-content: center;
    align-items: center; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: rgba(0,0,0,.4); }
.crop-overlay-actions .btn { flex: 0 0 auto; min-width: 150px; padding: .7rem 1rem;
    font-size: 1rem; text-align: center; transform: translateX(-20px); }

/* Lerneinheit: Nummerierung & Reihenfolge */
.unit-item { display: flex; flex-direction: column; }
.unit-card { position: relative; }
.unit-num-badge { position: absolute; top: .5rem; right: .5rem; background: var(--primary);
    color: #fff; font-size: .7rem; font-weight: 700; padding: .12rem .5rem; border-radius: 20px; }
/* Reihenfolge-Pfeile erst nach Klick auf den Bleistift zeigen. */
.unit-order { display: none; gap: .4rem; justify-content: flex-end; margin-top: .4rem; }
.unit-grid.show-order .unit-order { display: flex; }
.class-edit-btn { background: none; border: none; cursor: pointer; font-size: 1rem;
    line-height: 1; padding: .1rem .3rem; margin-left: .4rem; vertical-align: middle;
    filter: grayscale(1); opacity: .55; transition: opacity .15s; }
.class-edit-btn:hover, .class-edit-btn.active { opacity: 1; }
.unit-order form { margin: 0; display: inline; }
.unit-order button { width: 36px; height: 30px; border: 1px solid var(--border); background: #fff;
    border-radius: 8px; cursor: pointer; font-size: 1rem; line-height: 1; }
.unit-order button:hover:not(:disabled) { border-color: var(--primary); }
.unit-order button:disabled { opacity: .35; cursor: default; }

/* Foto-Zelle: Vorschau mit sichtbarem Löschen-Button darunter */
.photo-strip { align-items: flex-start; }
.photo-cell { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.photo-cell form { margin: 0; }

/* Leitner-Fächer je Lerneinheit auf der Übungs-Auswahlseite */
.sp-item { margin: .5rem 0 .9rem; }
.sp-item-mastered { background: #cdeccd; border: 1px solid #a9d9a9; border-radius: 10px;
    padding: .5rem .7rem; }
.sp-item-mastered .lbox { background: #fff; }
.sp-head { display: inline-flex; align-items: center; gap: 8px; margin: 0;
    font-weight: 600; cursor: pointer; }
.sp-head .unit-check { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; }
.sp-head .muted { font-weight: 400; }
/* Boxen unter dem Namen ausrichten (Checkbox 18px + 8px Abstand). */
.leitner-boxes { display: flex; gap: 6px; flex-wrap: wrap; margin: .35rem 0 .2rem 26px; }
.lbox { min-width: 48px; padding: .3rem .25rem; border: 1px solid var(--border);
    border-radius: 8px; text-align: center; line-height: 1.15; background: #fff;
    cursor: pointer; font-family: inherit; appearance: none; -webkit-appearance: none; }
.lbox.selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.lbox-empty { opacity: .4; cursor: default; }
.lbox-n { display: block; font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.lbox-cap { display: block; font-size: .62rem; color: var(--muted); white-space: nowrap; }

/* Über 90 % der Vokabeln in Fach 5 -> ganze Kachel pastellgrün. */
.unit-card.unit-mastered { background: #cdeccd; border-color: #a9d9a9; }
.unit-card.unit-mastered:hover { background: #bce4bc; border-color: #a9d9a9; }
.unit-card.unit-mastered .lbox { background: #fff; }

/* Boxen innerhalb einer Lerneinheit-Kachel: Quiz + nicht/gewusst + Fach 1–5 in
   einer Reihe, jede Box exakt gleich breit. Die Gruppen werden per
   display:contents aufgelöst, damit alle acht Boxen gleichwertige Flex-Elemente
   sind. Innerhalb der Gruppen kein Abstand und nur außen gerundet (die
   Basis-Regeln der Gruppen greifen weiter) – wie in der Detailansicht; ein
   kleiner Abstand nur ZWISCHEN den Gruppen. */
.unit-card .leitner-boxes { margin: .6rem 0 0 0; display: flex; flex-wrap: nowrap; gap: 0; }
.unit-card .known-group, .unit-card .fach-group, .unit-card .quiz-group { display: contents; }
.unit-card .leitner-boxes .lbox { min-width: 0; flex: 1 1 0; padding: .3rem .1rem; }
.unit-card .known-group .lbox:first-child,
.unit-card .fach-group .lbox:first-child { margin-left: 6px; }
.lbox-1 { background: #fdf0f0; border-color: #f1c6c6; }
.lbox-2 { background: #fdf5ea; border-color: #f0d9b8; }
.lbox-3 { background: #fbf8e6; border-color: #e8e0a6; }
.lbox-4 { background: #f1f8ea; border-color: #cfe6b0; }
.lbox-5 { background: #e9f9ef; border-color: #b9e3c6; }

/* Fach 1–5 als zusammenhängender Block ohne Lücke; Rand im Grün des
   „Karteikarten üben"-Buttons. Fach 1 nur links gerundet, Fach 5 nur rechts. */
/* Führende Icon-Box, die eine Box-Gruppe kennzeichnet: 🎯 (gold) vor den
   fünf Fächern („Karteikarten prüfen"), 📖 (grün) vor „nicht gewusst /
   gewusst" („Karteikarten lernen"). Farbe jeweils vom zugehörigen Button. */
.lbox-target, .lbox-learn, .lbox-quiz-ico { display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; cursor: default; }
.lbox-target { background: linear-gradient(160deg, #ffe27a 0%, #f6c343 100%); border-color: #e0b93a; }
.lbox-learn { background: #a9d6f5; border-color: #7bb8e6; }   /* kräftiges Himmelblau */
.lbox-quiz-ico { background: #c4a7e7; border-color: #ab8bd8; }   /* kräftiges Lila wie Quiz-Box */
.fach-group, .quiz-group { display: flex; }
.quiz-group .lbox { border-radius: 0; margin-left: -1px; }
.quiz-group .lbox:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.quiz-group .lbox:last-child { border-radius: 0 8px 8px 0; }
.fach-group .lbox { border-radius: 0; border-color: #a9d9a9; margin-left: -1px; }
.fach-group .lbox:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.fach-group .lbox:last-child { border-radius: 0 8px 8px 0; }
.fach-group .lbox.selected, .fach-group .lbox:hover { position: relative; z-index: 1; }
.unit-card .fach-group { flex: 5 1 0; }

/* Mobil: In der Lerneinheiten-Übersicht wandern die „Karteikarten prüfen"-Boxen
   (🎯 + Fach 1–5) in die nächste Zeile, damit sie nicht gequetscht werden. */
@media (max-width: 560px) {
    .unit-card .leitner-boxes { flex-wrap: wrap; gap: 6px; }
    .unit-card .quiz-group, .unit-card .known-group, .unit-card .fach-group { display: flex; }
    .unit-card .quiz-group .lbox:first-child,
    .unit-card .known-group .lbox:first-child,
    .unit-card .fach-group .lbox:first-child { margin-left: 0; }
    .unit-card .quiz-group .lbox,
    .unit-card .known-group .lbox { flex: 0 0 auto; min-width: 40px; }
    .unit-card .fach-group { flex: 1 1 100%; }          /* eigene Zeile */
    .unit-card .fach-group .lbox { flex: 1 1 0; }
}

/* Zwei-Box-Gruppe „nicht gewusst / gewusst" (gleicher Stil, 2 Boxen). */
.known-group { display: flex; }
.known-group .lbox { border-radius: 0; margin-left: -1px; }
.known-group .lbox:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.known-group .lbox:last-child { border-radius: 0 8px 8px 0; }
.known-group .lbox .lbox-n { color: var(--ink); }
.lbox-unknown { background: #f7d3d3; border-color: #e6a6a6; }
.lbox-known { background: #cdeccd; border-color: #a9d9a9; }
.unit-card .known-group { flex: 2 1 0; }

/* Admin: „Zurück zum Admin" (roter Button in der Kopfzeile) */
/* Eltern-Ansicht: Schaltflächen der Kinder (Impersonation) ganz oben. */
.child-switch { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 20px; }
.child-switch-form { margin: 0; }
.child-btn { background: #eef1f4; border-color: #cdd4de; color: var(--ink); font-weight: 600; }
.child-btn:hover { background: #e3e7ec; }
/* Profil: Liste der hinterlegten Kinder. */
.child-list { list-style: none; padding: 0; margin: .2rem 0 1rem; }
/* Jedes Kind (und das Anlege-Formular) als eigene, abgesetzte Unterbox. */
.child-box { border: 1px solid var(--border); border-radius: 10px;
    background: #fbfcff; padding: .8rem .9rem; margin: 0 0 .9rem; }
.child-box:last-child { margin-bottom: 0; }
.child-box-new { background: #f4f7ff; }
.child-box-new h3 { margin: 0 0 .6rem; }
.child-row { display: flex; flex-direction: column; align-items: stretch; gap: .4rem; margin: 0; }
.child-row .child-email { word-break: break-all; }
.child-row input[type=text] { width: 100%; }
.child-row-actions { display: flex; gap: .5rem; }
.soft-sep { border: none; border-top: 1px solid var(--border); margin: 1.1rem 0; }

/* Überschrift über den Kind-Wechsel-Buttons. */
.child-switch-title { margin: 0 0 .4rem; font-weight: 600; color: var(--ink); }

/* Icon-Gruppe (Teilen + Sortieren) rechts in der Klassen-Zeile. */
.class-actions { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
.class-actions .class-edit-btn { margin-left: 0; }
.class-share-btn { display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; background: #eef1f4; color: #6b7280;
    text-decoration: none; transition: background .15s, color .15s; }
.class-share-btn:hover { background: #e3e7ec; color: #3a4149; }
/* Eingerichtete Freigabe: grünes Teilen-Icon. */
.class-share-btn.shared { background: #d7f5e3; color: #1c9d5a; }
.class-share-btn.shared:hover { background: #c4efd5; color: #157a46; }

/* Kinder-Verwaltung im Profil. */
.child-head { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; }
.child-name-lbl { font-weight: 600; }
.child-username { word-break: break-all; }
.child-pw-line { display: flex; align-items: center; gap: .5rem; margin: .3rem 0 .5rem; flex-wrap: wrap; }
.child-pw { background: #f2f4f7; padding: .15rem .5rem; border-radius: 6px; font-size: .95rem; letter-spacing: .05em; }
.child-pw-form { margin-top: .4rem; }
.pw-gen-row { display: flex; gap: .5rem; align-items: stretch; margin-top: .25rem; }
.pw-gen-row .pw-field { flex: 1 1 auto; margin-top: 0; }
/* Doppelte Klasse erhöht die Spezifität, damit .profile-form button (display:block,
   margin-top) den Würfel-Button nicht verzerrt – in beiden Formularen identisch. */
.pw-gen-btn.pw-gen-btn { display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 3rem; padding: 0; margin: 0; font-size: 1.2rem; line-height: 1; }
.share-target-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.share-target-name { font-weight: 600; }

/* Übersicht aller bereits erteilten Freigaben. */
/* Admin: Schulen & Klassen bearbeiten. */
.sc-fields { display: flex; gap: .8rem; flex-wrap: wrap; }
.sc-fields label { flex: 1 1 200px; min-width: 0; }
.sc-actions { display: flex; align-items: center; gap: .8rem; margin-top: .6rem; }
.sc-sub { margin: 1rem 0 .5rem; }
.class-edit-row { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; }
.class-edit-row input[type=text] { flex: 1 1 auto; min-width: 0; margin: 0; }
.class-edit-row .sc-count { flex: 0 0 auto; min-width: 1.5rem; text-align: right; }

.share-overview { list-style: none; padding: 0; margin: 0; }
.share-overview-row { padding: .6rem 0; border-bottom: 1px solid var(--border); }
.share-overview-row:last-child { border-bottom: none; }
.share-overview-row.current { background: #f6f8fc; border-radius: 8px; padding: .6rem .7rem; }
.share-overview-class { margin-bottom: .35rem; }
.share-overview-targets { display: flex; flex-wrap: wrap; gap: .4rem; }
.share-chip { background: #d7f5e3; color: #157a46; font-weight: 600;
    padding: .12rem .55rem; border-radius: 999px; font-size: .88rem; }

.impersonate-back { display: inline-block; background: var(--danger); color: #fff;
    font-weight: 700; padding: .35rem .7rem; border-radius: 8px; white-space: nowrap; }
.impersonate-back:hover { text-decoration: none; opacity: .9; }
/* Dashboard: Hinweis auf angebotene Übertragung(en) */
.transfer-notice { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem;
    justify-content: space-between; background: #fffef2; border: 1px solid #ece6bf;
    border-left: 5px solid #e6c34a; border-radius: 10px; padding: .9rem 1.1rem; margin: 0 0 1rem; }
.transfer-notice-text { margin: 0; }
.transfer-notice-actions { display: flex; gap: .6rem; }
.btn-pastel-green, .btn-pastel-red { border: 1px solid; border-radius: 8px; cursor: pointer;
    font-weight: 700; padding: .5rem 1.1rem; font-size: 1rem; }
.btn-pastel-green { background: #cdeecd; border-color: #a9d9a9; color: #256b25; }
.btn-pastel-green:hover { background: #bde6bd; }
.btn-pastel-red { background: #f6cfcf; border-color: #e2a3a3; color: #8a2b2b; }
.btn-pastel-red:hover { background: #f0bcbc; }
/* Detailansicht: kleines Icon hinter Vokabeln mit KI-Merkbild */
.vocab-img-icon { font-size: .85em; margin-left: .25rem; vertical-align: middle; cursor: help; }
/* Admin: Punkte-Status-Zeile unter jedem Benutzer */
.stat-strip-row td { padding-top: 0; }
.stat-strip-row .leitner-boxes { margin: 0 0 .3rem; }
/* Fach-Boxen nie ausgegraut: volle Farbe, schwarzer Text – auch wenn leer/disabled. */
.fach-group .lbox-empty, .fach-group .lbox:disabled { opacity: 1; }
.fach-group .lbox .lbox-n { color: var(--ink); }

/* ---- Biologie: Skelett-Bildübung ------------------------------------- */
.sk-map { position: relative; max-width: 300px; margin: .5rem auto 0; }
.sk-svg { display: block; width: 100%; height: auto; }
.sk-spots { position: absolute; inset: 0; }
.sk-spot { position: absolute; width: 22px; height: 22px; transform: translate(-50%, -50%);
    border-radius: 50%; border: 2px solid rgba(0,0,0,.12); background: transparent;
    padding: 0; cursor: default; }
.sk-map.sk-clickable .sk-spot { background: rgba(59,91,219,.18); border-color: rgba(59,91,219,.55);
    box-shadow: 0 0 0 2px rgba(59,91,219,.12); cursor: pointer; }
.sk-map.sk-clickable .sk-spot:hover { background: rgba(59,91,219,.4); }
.sk-spot.sk-off { display: none; }
.sk-spot.sk-target { background: #f6c343; border-color: #fff; box-shadow: 0 0 0 3px rgba(246,195,67,.5);
    animation: ocPulse 1.1s ease-in-out infinite; }
.sk-spot.sk-target::after { content: '?'; color: #5a4300; font-weight: 700; font-size: .9rem;
    line-height: 18px; display: block; text-align: center; }
.sk-spot.sk-correct { background: #1c7a34; border-color: #fff; box-shadow: 0 0 0 3px rgba(28,122,52,.45); }
.sk-spot.sk-wrong { background: #b02525; border-color: #fff; box-shadow: 0 0 0 3px rgba(176,37,37,.45); }
@media (prefers-reduced-motion: reduce) { .sk-spot.sk-target { animation: none; } }

/* ---- Biologie: Kennzeichen-Liste im Fragetext ------------------------ */
.kz-list { display: inline-block; text-align: left; font-size: .95rem; font-weight: 400;
    margin-top: .4rem; line-height: 1.5; }

/* ---- Biologie: Versuchsprotokoll ------------------------------------- */
.vp-quote { display: inline-block; font-weight: 400; font-style: italic; font-size: .98rem;
    margin-top: .4rem; color: var(--ink); }
.seq-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1rem; }
.seq-chip { flex: 0 0 auto; }
.seq-chip.seq-done { background: var(--success); color: #fff; border-color: var(--success); }
.seq-chip.seq-bad { animation: shake .4s; border-color: var(--danger); }

/* ---- Biologie: Lernstatus in der Übersicht --------------------------- */
.learn-status { margin: .1rem 0 .9rem; }
.learn-bar { height: 9px; background: var(--border); border-radius: 999px; overflow: hidden; }
.learn-bar span { display: block; height: 100%; background: var(--success);
    border-radius: 999px; transition: width .4s ease; }
.learn-label { font-size: .85rem; color: var(--muted); margin-top: .3rem; }
.learn-status.is-complete .learn-label { color: var(--success); font-weight: 600; }

/* Lernstatus-Kopf auf den Übungs-Startseiten */
.learn-status-summary { max-width: 560px; margin: 0 auto 1rem; }
.learn-status-title { display: block; font-size: .9rem; font-weight: 600; color: var(--muted);
    margin-bottom: .35rem; }

/* ---- Biologie: Wiederholungs-Runden (3 Sterne) ----------------------- */
.learn-rounds { display: flex; align-items: center; gap: 2px; margin-bottom: 4px; }
.lr-star { color: var(--border); font-size: 1.05rem; line-height: 1; }
.lr-star.on { color: #f6b429; }
.lr-rounds-cap { font-size: .72rem; color: var(--muted); margin-left: 5px;
    text-transform: uppercase; letter-spacing: .03em; }

/* ---- Biologie: Profi-Wissen (Schreib-Übungen) ------------------------ */
.pf-area { margin-top: 1rem; }
.pf-group { display: grid; gap: .5rem; }
.pf-field { display: flex; align-items: center; gap: .5rem; }
.pf-field .pf-num { width: 1.7rem; text-align: right; color: var(--muted); font-weight: 600; }
.pf-field .answer-input { flex: 1; margin: 0; }
.pf-check { width: 100%; margin-top: .9rem; min-height: 3rem; }
.feature-card-profi { border-color: #f6b429; box-shadow: 0 0 0 1px #f6b429 inset; }

/* ---- Biologie: Profi-Ergebnis (Note + Fehlerliste) ------------------- */
.pf-wrong { text-align: left; max-width: 520px; margin: .7rem auto; }
.pf-wrong > p { font-weight: 600; margin: 0 0 .2rem; }
.pf-wrong ul { margin: .2rem 0 0; padding-left: 1.2rem; }
.pf-wrong li { margin: .25rem 0; }
.pf-allright { color: var(--success); font-weight: 600; margin: .6rem 0; }