:root { --bg:#fbfaf7; --fg:#222; --muted:#777; --accent:#b3261e; --line:#e4e0d8; --learn:#fff3c4; --new:#e8f0fe; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--bg); color:var(--fg); }
.nav { display:flex; gap:1.2rem; align-items:center; padding:.7rem 1.2rem; background:#fff; border-bottom:1px solid var(--line); }
.nav a { text-decoration:none; color:var(--fg); }
.nav .brand { font-weight:700; color:var(--accent); margin-right:1rem; }
.nav-right { margin-left:auto; }
.voice-pick { display:flex; align-items:center; gap:.4rem; margin:0; }
.voice-pick select { width:auto; margin:0; padding:.2rem .4rem; max-width:220px; }
.container { max-width: 960px; margin: 0 auto; padding: 1.2rem; }
h1 { display:flex; align-items:center; gap:1rem; }
.right { margin-left:auto; }
.muted { color:var(--muted); } .small { font-size:.85rem; }
.btn { display:inline-block; padding:.45rem .9rem; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--fg); text-decoration:none; cursor:pointer; font:inherit; }
.btn.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn.danger { color:var(--accent); } .btn.small { padding:.25rem .6rem; font-size:.85rem; }
.btn.active { outline:2px solid var(--accent); }
.flash { padding:.6rem .9rem; border-radius:6px; margin-bottom:1rem; background:#eef; }
.flash-error { background:#fde8e6; } .flash-warning { background:#fff3c4; }
.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap:1rem; margin:1rem 0; }
.card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:1rem; text-decoration:none; color:inherit; text-align:center; }
.card .big { font-size:2.2rem; font-weight:700; color:var(--accent); }
.actions { display:flex; gap:.6rem; margin:1rem 0; }
.hint { background:var(--learn); padding:.8rem 1rem; border-radius:8px; }
.list { list-style:none; padding:0; } .list li { padding:.4rem 0; border-bottom:1px solid var(--line); }
.table { width:100%; border-collapse:collapse; background:#fff; }
.table th, .table td { text-align:left; padding:.45rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }
.table .hanzi { font-size:1.4rem; word-break:keep-all; }  /* chinesische Woerter nicht zwischen Zeichen umbrechen */
.vocab .reading-under { display:none; }
.vocab tr.status-learning td.hanzi { background:var(--learn); }
.vocab tr.status-new td.hanzi { background:var(--new); }
.vocab th.sel, .vocab td.sel { width:2rem; padding-right:0; }
.vocab td.sel input, .vocab th.sel input { width:1.15rem; height:1.15rem; margin:.35rem 0 0; cursor:pointer; }
.vocab tr.selected td { box-shadow: inset 0 0 0 9999px rgba(179,38,30,.06); }
.sel-bar { position:sticky; top:0; z-index:5; margin:1rem 0; display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.sel-bar[hidden] { display:none; }
.two-col { display:grid; grid-template-columns: 1fr 1fr; gap:1.2rem; }
@media (max-width:720px) { .two-col { grid-template-columns:1fr; } }
.panel { background:#fff; border:1px solid var(--line); border-radius:10px; padding:1rem 1.2rem; }
.panel.bulk { margin:1rem 0; display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }
label { display:block; margin:.6rem 0; font-size:.9rem; color:var(--muted); }
input, textarea, select { width:100%; padding:.45rem .6rem; border:1px solid var(--line); border-radius:6px; font:inherit; margin-top:.2rem; background:#fff; }
.filters { display:flex; gap:.5rem; flex-wrap:wrap; } .filters select, .filters input { width:auto; margin:0; }
form.inline { display:inline; } form.inline select { width:auto; margin:0; }

/* Reader */
.reader-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem; }
.toolbar { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.toolbar .sep { width:1px; height:1.4rem; background:var(--line); margin:0 .3rem; }
.reader { font-size:1.9rem; line-height:2.6; white-space:normal; background:#fff; border:1px solid var(--line); border-radius:10px; padding:1.2rem 1.5rem; margin-top:1rem; }
.reader ruby { cursor:pointer; border-radius:4px; padding:0 1px; ruby-position:over; }
.reader ruby:hover { background:#f0ede6; }
.reader ruby[data-status="new"] { border-bottom:2px dotted #6b8cd8; }
.reader ruby[data-status="learning"] { background:var(--learn); }
.reader rt { font-size:.45em; color:#555; }
/* Pinyin ausblenden ohne Layoutsprung: Platz bleibt reserviert, beim Ueberfahren sichtbar */
.reader.mode-none rt,
.reader.mode-unknown ruby[data-status="known"] rt { visibility:hidden; }
.reader.mode-none ruby:hover rt,
.reader.mode-unknown ruby[data-status="known"]:hover rt { visibility:visible; }
.reader ruby.selected { outline:2px solid var(--accent); }
.reader .sent { border-radius:6px; }
.reader .sent.playing { background:#eef6ff; }
.reader .sent-play { border:0; background:none; color:#bbb; cursor:pointer; font-size:.55em; padding:0 .3em; vertical-align:middle; }
.reader .sent:hover .sent-play, .reader .sent.playing .sent-play { color:var(--accent); }
.popup { position:fixed; right:1rem; bottom:1rem; width:min(360px, calc(100vw - 2rem)); background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.15); padding:1rem 1.2rem; }
.popup .close { position:absolute; top:.4rem; right:.6rem; border:0; background:none; font-size:1.3rem; cursor:pointer; }
.popup-hanzi { font-size:2.4rem; } .popup-pinyin { color:var(--accent); font-size:1.1rem; }
.popup-meaning { margin:.4rem 0 .8rem; } .popup-actions { display:flex; flex-wrap:wrap; gap:.4rem; }
.popup-explain { margin-top:.8rem; font-size:.95rem; } .popup-explain .zh { font-size:1.3rem; }

/* Trainer */
.trainer { background:#fff; border:1px solid var(--line); border-radius:12px; padding:2rem; text-align:center; margin-top:1rem; }
.card-mode { margin-bottom:1rem; text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; }
.card-front { font-size:3.2rem; min-height:4.5rem; }
.card-back { font-size:1.3rem; margin-top:1rem; } .card-back .zh { font-size:2.4rem; } .card-back .py { color:var(--accent); }
.trainer-actions, .grades { display:flex; justify-content:center; gap:.6rem; margin-top:1.5rem; flex-wrap:wrap; }
kbd { font-size:.7rem; background:#eee; padding:0 .3rem; border-radius:3px; margin-left:.3rem; }
.grade.again { border-color:#d33; } .grade.good { border-color:#3a3; } .grade.easy { border-color:#39c; }

/* Import */
.dropzone { margin:.6rem 0; padding:1.2rem; border:2px dashed var(--line); border-radius:8px; text-align:center; color:var(--muted); cursor:text; outline:none; }
.dropzone:focus, .dropzone.over { border-color:var(--accent); background:#fff8f7; }
@media (hover:none) { .dropzone { display:none; } }  /* Handy: Fotoknoepfe statt Strg+V */
@media (max-width:720px) { .import-panel { order:-1; } }  /* am Handy zuerst: Fotos importieren */
.photo-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin:.6rem 0 .2rem; }
.photo-btn { margin:0; color:inherit; font-size:1rem; }
.photo-btn.primary { color:#fff; }
.photo-list { display:flex; flex-wrap:wrap; gap:.5rem; margin:.4rem 0; }
.photo { display:flex; flex-direction:column; align-items:center; width:84px; font-size:.75rem; color:var(--muted); text-align:center; }
.photo img { width:84px; height:84px; object-fit:cover; border-radius:6px; border:2px solid var(--line); }
.photo.busy img { border-color:#e0a800; } .photo.done img { border-color:#2e7d32; } .photo.error img { border-color:var(--accent); }
.photo.error { color:var(--accent); }

.import-box { margin:1rem 0; } .import-box summary { cursor:pointer; font-weight:600; } .import-box form { margin-top:.6rem; }

/* Trainer: Lernkarte, Eintippen, Sprechen */
.trainer-settings { display:flex; gap:1rem; align-items:center; margin:.4rem 0; }
.inline-check { display:inline-flex; align-items:center; gap:.4rem; margin:0; } .inline-check input { width:auto; margin:0; }
.card-front .zh { font-size:3.2rem; } .card-front .py { color:var(--accent); font-size:1.4rem; } .card-front .de { font-size:1.2rem; margin-top:.3rem; }
.card-example { font-size:1.4rem; margin-top:.8rem; }
.type-box { max-width:420px; margin:1rem auto 0; } .type-box input { font-size:1.2rem; text-align:center; }
.type-result { margin-top:.6rem; font-size:1.1rem; }
.syl { padding:0 .3rem; border-radius:4px; } .syl.ok { background:#dff5dd; } .syl.tone { background:#fff3c4; } .syl.sound, .syl.wrong { background:#fde0dd; }
.speak-box { margin-top:1rem; } .speak-result { margin-top:.6rem; text-align:left; max-width:520px; margin-left:auto; margin-right:auto; }
.speak-result ul { margin:.3rem 0 0 1.2rem; }
.grade-help { max-width:560px; margin:.8rem auto 0; }

/* Nachsprechen im Lesetext */
.reader .sent-rec { border:0; background:none; color:#bbb; cursor:pointer; font-size:.55em; padding:0 .3em; vertical-align:middle; }
.reader .sent:hover .sent-rec { color:var(--accent); } .reader .sent-rec.recording { color:#d33; }
.shadow-result { font-size:.5em; line-height:1.5; color:#444; background:#f6f4ef; border-radius:6px; padding:.4em .8em; margin:.2em 0 .6em; white-space:normal; }

/* Vokabeltabelle: Bearbeiten */
.vocab td.editable { cursor:text; overflow-wrap:anywhere; }
@media (max-width:1000px) { .vocab .col-wide { display:none; } }
.vocab td.editable:hover { background:#f6f4ef; outline:1px dashed var(--line); }
.vocab td.editable input { width:100%; min-width:8rem; margin:0; padding:.2rem .4rem; font:inherit; }
.vocab td.saved { animation: saved 1.2s; } @keyframes saved { from { background:#dff5dd; } to { background:transparent; } }
.row-actions { white-space:nowrap; } .row-actions .btn { padding:.15rem .4rem; }

.footer { max-width:960px; margin:2rem auto 1rem; padding:0 1.2rem; text-align:right; } .footer a { color:inherit; }

/* Saetze als Bloecke mit Uebersetzung darunter */
.reader .sentence { margin:.1em 0 .6em; }
.reader .para-break { height:1.2em; }
.reader .trans { font-size:.5em; line-height:1.5; color:#666; margin:-.4em 0 0 1.6em; min-height:1.2em; transition: filter .15s, opacity .15s; }
.reader.trans-blur .trans { filter: blur(4px); opacity:.55; cursor:help; user-select:none; }
.reader.trans-blur .trans:hover { filter:none; opacity:1; user-select:text; }
.reader.trans-off .trans { display:none; }
.reader .trans.loading { font-style:italic; filter:none; opacity:.6; }

/* HSK-Stufen als sanfte Farbflaechen (Knopf "HSK"); im HSK-Modus ersetzt die Stufenfarbe die Statusfarbe */
.reader.hsk-on ruby[data-hsk] { background-color: transparent; }
.reader.hsk-on ruby[data-hsk="1"], .hsk-legend .l1 { background-color: #dff3e3; }
.reader.hsk-on ruby[data-hsk="2"], .hsk-legend .l2 { background-color: #dbe9f8; }
.reader.hsk-on ruby[data-hsk="3"], .hsk-legend .l3 { background-color: #ece3f7; }
.reader.hsk-on ruby[data-hsk="4"], .hsk-legend .l4 { background-color: #fbe9d6; }
.reader.hsk-on ruby[data-hsk="5"], .hsk-legend .l5 { background-color: #f9dfdf; }
.reader.hsk-on ruby[data-hsk="6"], .hsk-legend .l6 { background-color: #e6e6e6; }
.reader.hsk-on ruby[data-hsk="0"], .hsk-legend .l0 { background-color: #f3f1ec; }
.reader.hsk-on ruby:hover { filter: brightness(.95); }
.hsk-legend { display:none; gap:.6rem; flex-wrap:wrap; font-size:.85rem; margin:.4rem 0; }
.hsk-legend.on { display:flex; }
.hsk-legend span { padding:.1rem .6rem; border-radius:4px; }

/* Trainer: Einstellungen und Begruendung */
.settings summary { cursor:pointer; font-weight:600; }
.settings-grid { display:grid; grid-template-columns: 1fr 1fr; gap:.6rem 1.2rem; margin-top:.6rem; align-items:start; }
@media (max-width:720px) { .settings-grid { grid-template-columns:1fr; } }
.settings-grid .modes { grid-column: 1 / -1; border:1px solid var(--line); border-radius:6px; padding:.4rem .8rem; display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; }
.settings-grid .modes legend { color:var(--muted); font-size:.85rem; padding:0 .3rem; }
.settings-grid label { margin:0; }
.card-why { min-height:1.2em; margin-bottom:.3rem; }

/* Texte: Ordnerstruktur */
.texts-layout { display:grid; grid-template-columns: 240px 1fr; gap:1.2rem; align-items:start; }
@media (max-width:760px) { .texts-layout { grid-template-columns:1fr; } }
.folder-side { padding:.8rem; position:sticky; top:1rem; }
.folder-tree { list-style:none; margin:0; padding:0 0 0 .9rem; }
.folder-tree.root, .folder-side > .folder-tree { padding-left:0; }
.folder-tree li { margin:.1rem 0; }
.folder-tree a { display:flex; justify-content:space-between; gap:.4rem; padding:.2rem .4rem; border-radius:5px; text-decoration:none; color:inherit; }
.folder-tree a:hover { background:#f3f1ec; }
.folder-tree a.active { background:#fde8e6; font-weight:600; }
.folder-new { display:flex; gap:.3rem; margin-top:.8rem; } .folder-new input { margin:0; }
.folder-head { margin-bottom:.8rem; }
.folder-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.5rem; }
.folder-actions input, .folder-actions select { width:auto; margin:0; }
.breadcrumb a { color:inherit; }
.breadcrumb select { width:auto; margin:0; padding:.1rem .3rem; font-size:.85rem; }
.texts-table select { margin:0; min-width:9rem; }
.text-title.editable { cursor:text; border-bottom:1px dashed transparent; }
.text-title.editable:hover { border-bottom-color:var(--line); }
.title-input { font:inherit; width:100%; min-width:12rem; margin:0; }
.open-link { margin-left:.6rem; }
.dup-hint { background:#fff3c4; border-radius:8px; padding:.5rem .8rem; margin:.6rem 0; display:flex; gap:.8rem; align-items:center; }
select.saved { animation: saved 1.2s; }

/* Sprachumschalter, griechische Tastatur */
.lang-switch { display:inline-flex; gap:.2rem; margin-right:1rem; }
.lang-switch a { text-decoration:none; color:var(--muted); padding:.15rem .5rem; border-radius:5px; border:1px solid transparent; }
.lang-switch a.active { color:var(--fg); border-color:var(--line); background:#fff; font-weight:600; }
.greek-keys { display:flex; flex-wrap:wrap; gap:.2rem; justify-content:center; margin-top:.5rem; }
.greek-keys .btn { min-width:2rem; padding:.2rem .3rem; }
.popup-lemma { margin-top:-.2rem; }
.type-hint { font-size:.9rem; color:#555; margin-top:.3rem; }
.reader:lang(el) { line-height:2.4; }

/* Anmeldung und Datensicherung */
.login-box { max-width:22rem; margin:3rem auto; }
.login-box .btn { width:100%; margin-top:.6rem; }
.backup-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:720px) { .backup-grid { grid-template-columns:1fr; } }

/* Handy */
@media (max-width:720px) {
  .nav { flex-wrap:wrap; gap:.4rem .9rem; padding:.5rem .8rem; }
  .nav .brand { margin-right:.2rem; }
  .nav-right { margin-left:0; width:100%; display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem; }
  .lang-switch { margin-right:0; }
  .voice-pick select { max-width:9rem; }
  .container { padding-left:.8rem; padding-right:.8rem; }
  h1 { flex-wrap:wrap; gap:.2rem .8rem; font-size:1.6rem; }
  .table th, .table td { padding:.4rem .3rem; }
  .vocab .row-actions { display:flex; flex-direction:column; gap:.3rem; }
  .vocab .row-actions .btn { padding:.2rem .35rem; }
  .vocab form.inline select { max-width:4.9rem; padding:.25rem .2rem; font-size:.8rem; }
  .vocab td.hanzi { font-size:1.15rem; }
  .vocab .col-reading { display:none; }
  .vocab .reading-under { display:block; font-size:.8rem; color:var(--muted); word-break:normal; }  /* Pinyin/Lautschrift unter dem Wort */
  .vocab td.hanzi .word:lang(el) { font-size:.8em; }
  .vocab th { font-size:.8rem; }
  .vocab td.sel input, .vocab th.sel input { width:1.4rem; height:1.4rem; }
}