/* Ruhige Farben, große Bedienelemente und flexible Spalten für Tablet/Desktop. */
:root { color-scheme: light; --paper:#f5f3ed; --surface:#fffefa; --ink:#293b34; --muted:#68736d; --line:#dce1d8; --accent:#355f4c; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.page-header,.workspace,.page-footer { max-width:1400px; margin:auto; }
.page-header { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:42px 32px 28px; }
h1 { font:500 clamp(32px,4vw,46px)/1.2 Georgia,serif; margin:8px 0; } h2 { font:500 26px/1.3 Georgia,serif; margin:0; } h3 { font-size:18px; margin:0 0 8px; } p { margin:8px 0; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:.13em; color:var(--muted); }
.workspace { display:grid; grid-template-columns:minmax(300px, .85fr) minmax(420px,1.6fr); gap:24px; padding:0 32px; align-items:start; }
.library,.editor { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:24px; }
.badge { flex-shrink:0; background:#edf1e9; border-radius:20px; padding:5px 11px; font-size:12px; }
label { display:block; font-weight:600; font-size:15px; margin:18px 0 7px; }
input,textarea,button { font:inherit; }
input,textarea { display:block; width:100%; padding:13px 14px; border:1px solid #bfc9bd; border-radius:9px; background:#fff; color:var(--ink); font-size:17px; }
textarea { resize:vertical; min-height:300px; line-height:1.7; }
button { min-height:48px; padding:11px 17px; border:1px solid #bfc9bd; border-radius:9px; background:var(--surface); color:var(--ink); cursor:pointer; font-weight:600; font-size:15px; touch-action:manipulation; }
button:hover { background:#edf1e9; } button.primary { background:var(--accent); color:white; border-color:var(--accent); } button.primary:hover { background:#284b3b; }
button:disabled { opacity:.5; cursor:wait; } :focus-visible { outline:3px solid #9baf67; outline-offset:3px; }
.field-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:18px; } fieldset { border:0; padding:0; margin:0; min-width:0; }
.hint,.muted,.optional { font-size:13px; color:var(--muted); font-weight:400; } .hint { margin-top:7px; }
.episode-list { padding:0; margin:18px 0; list-style:none; display:grid; gap:10px; }
.episode-card { width:100%; text-align:left; padding:16px; font-weight:400; overflow-wrap:anywhere; }
.episode-card[aria-current="true"] { border-color:var(--accent); background:#edf2e9; box-shadow:inset 3px 0 var(--accent); }
.episode-card strong { display:block; font-size:17px; margin-bottom:4px; } .episode-card span { display:block; font-size:13px; color:var(--muted); } .episode-card .excerpt { margin-top:8px; font-size:14px; }
.empty-state { text-align:center; padding:38px 10px; color:var(--muted); } .empty-state > span { font-size:40px; } .empty-state h3 { font-weight:500; }
.backup { border-top:1px solid var(--line); padding-top:22px; margin-top:26px; } .backup p { font-size:13px; color:var(--muted); }
.button-row,.editor-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; } .editor-actions { justify-content:space-between; } .danger { color:#944537; border-color:#ddbeb6; }
.status { max-width:1336px; margin:20px auto 0; padding:12px 20px; background:#e9eee3; border-radius:9px; font-size:14px; overflow-wrap:anywhere; } .status.error { background:#f7e6df; color:#833c30; }
.page-footer { padding:20px 32px 30px; color:var(--muted); font-size:12px; text-align:center; }
[hidden] { display:none !important; }
@media(max-width:1000px) { .workspace { grid-template-columns:minmax(260px, .85fr) minmax(350px,1.4fr); gap:16px; padding:0 20px; } .library,.editor { padding:20px; } .section-heading { flex-wrap:wrap; } .status { margin:20px; } }
@media(max-width:740px) { .page-header { padding:26px 18px; flex-wrap:wrap; } .workspace { grid-template-columns:1fr; padding:0 14px; } .field-grid { grid-template-columns:1fr; gap:0; } .episode-list { max-height:380px; overflow-y:auto; } .page-header > button { width:100%; } }
/* Version 0.2: Filter, Spracherfassung und Importvorschau. */
select { width:100%; min-height:48px; font:inherit; color:var(--ink); background:white; border:1px solid #bfc9bd; border-radius:9px; padding:10px; }
.filter-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.trash-toggle { margin-top:18px; width:100%; }.trash-toggle[aria-pressed="true"] { background:#edf2e9; border-color:var(--accent); }
.voice { background:#edf2e9; border:1px solid #cbd7c6; border-radius:12px; margin-top:24px; padding:20px; }
.voice p { font-size:14px; }.voice textarea { min-height:120px; }
#record-stop { background:#944537; color:white; } .audio-list { list-style:none; padding:0; display:grid; gap:14px; }.audio-list li { border-top:1px solid #cbd7c6; padding-top:14px; }.audio-list audio { width:100%; display:block; margin:8px 0; }
#backup-reminder { color:#815421; font-weight:600; }
dialog { width:min(560px,calc(100% - 32px)); border:1px solid var(--line); border-radius:18px; padding:26px; background:var(--surface); color:var(--ink); } dialog::backdrop { background:#20362e88; }