:root{
  --bg:#f1e8d6; --paper:#fffdf7; --paper-2:#faf4e6;
  --ink:#2b2620; --accent:#8a3b2e; --accent-dark:#6e2f25; --gold:#a9791f;
  --line:#ddd0b6; --line-soft:#e8ddc6; --danger:#9c2b22; --muted:#857a63;
  --serif:'Iowan Old Style','Palatino Linotype','Book Antiqua',Palatino,Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -200px, #f6efde 0%, rgba(246,239,222,0) 70%),
    var(--bg);
  color:var(--ink);}
h1,h2,h3,h4{font-family:var(--serif);color:#2a231c;font-weight:700;line-height:1.25;}

.app-shell{min-height:100vh;display:flex;flex-direction:column;}
.app-header{display:flex;align-items:center;gap:1rem;padding:.6rem 1.3rem;
  background:linear-gradient(#fffdf6,#f6eedd);
  border-bottom:2px solid var(--gold);box-shadow:0 1px 0 #fff inset, 0 2px 8px rgba(80,60,20,.07);}
.brand{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--serif);font-weight:700;
  font-size:1.3rem;text-decoration:none;color:#3a2c1d;letter-spacing:.01em;}
.brand-emblem{font-size:1.35rem;filter:saturate(.85);}
.tagline{color:var(--muted);font-size:.85rem;font-style:italic;}
.header-spacer{flex:1;}
.header-link{color:var(--accent);text-decoration:none;font-size:.9rem;}
.header-link:hover{text-decoration:underline;}
.header-user{color:var(--muted);font-size:.88rem;}
.app-main{flex:1;padding:1.4rem 1.2rem;max-width:1400px;width:100%;margin:0 auto;}
.app-footer{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem 1.2rem;
  text-align:center;color:var(--muted);font-size:.8rem;padding:1rem;border-top:1px solid var(--line-soft);}
.footer-links{display:inline-flex;gap:1rem;}
.footer-links a{color:var(--muted);text-decoration:none;}
.footer-links a:hover{color:var(--accent);text-decoration:underline;}

/* Impressum / Datenschutz */
.legal{max-width:760px;line-height:1.6;}
.legal h1{margin-bottom:.3rem;}
.legal h2{margin:1.4rem 0 .3rem;font-size:1.15rem;color:var(--accent);}
.legal h3{margin:.9rem 0 .2rem;font-size:1rem;}
.legal p,.legal li{color:var(--ink);}
.legal ul{padding-left:1.3rem;}

h1{font-size:1.8rem;margin:.2rem 0 1rem;}
h2{font-size:1.25rem;margin:.1rem 0 .7rem;}

.card{background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:1rem 1.2rem;margin-bottom:1.2rem;box-shadow:0 6px 18px rgba(90,65,25,.06);}
.card h2{margin-top:0;}

.btn{border:1px solid var(--line);background:linear-gradient(#fffdf7,#f4ecda);border-radius:8px;
  padding:.42rem .85rem;cursor:pointer;font-size:.9rem;text-decoration:none;color:#3a2f22;
  transition:background .12s,border-color .12s;}
.btn:hover{background:linear-gradient(#fff,#efe4cd);border-color:var(--gold);}
.btn.primary{background:linear-gradient(#9a4636,var(--accent));color:#fff8ef;border-color:var(--accent-dark);
  box-shadow:0 2px 6px rgba(120,45,30,.25);}
.btn.primary:hover{filter:brightness(1.06);background:linear-gradient(#9a4636,var(--accent));}
.btn.danger{color:var(--danger);}
.btn.small{padding:.25rem .6rem;font-size:.8rem;}
.btn.block{display:block;width:100%;text-align:center;margin-top:.4rem;}
.btn:disabled{opacity:.5;cursor:default;}

.txt,input,textarea{font:inherit;padding:.45rem .6rem;border:1px solid var(--line);
  border-radius:7px;background:var(--paper);width:100%;color:var(--ink);}
.txt:focus,input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(169,121,31,.15);}
select{font:inherit;padding:.45rem .6rem;border:1px solid var(--line);border-radius:7px;background:var(--paper);width:100%;color:var(--ink);}

/* home / welcome */
.hero{background:linear-gradient(#fffdf6,#f7efdd);border:1px solid var(--line);border-radius:14px;
  padding:1.6rem 1.8rem;margin-bottom:1.4rem;box-shadow:0 8px 24px rgba(90,65,25,.08);
  position:relative;overflow:hidden;}
.hero::before{content:"";position:absolute;inset:6px;border:1px solid var(--line-soft);border-radius:10px;pointer-events:none;}
.hero-emblem{font-size:2.4rem;}
.hero h1{font-size:2rem;margin:.3rem 0 .5rem;}
.hero-lead{font-size:1.05rem;max-width:60ch;line-height:1.6;color:#3b332a;}
.hero-steps{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:1rem 0 .6rem;}
.hero-step{display:inline-flex;align-items:center;gap:.4rem;background:var(--paper);border:1px solid var(--line);
  border-radius:999px;padding:.3rem .8rem;font-size:.9rem;}
.hero-step .hs-ico{font-size:1.05rem;}
.hero-arrow{color:var(--gold);font-weight:700;}
.hero-note{font-size:.9rem;color:var(--muted);max-width:64ch;border-left:3px solid var(--gold);padding-left:.7rem;margin-top:.6rem;}

.new-project-row{display:flex;gap:.6rem;max-width:560px;}

.muted{color:var(--muted);font-size:.85rem;}

/* ---- book overview cards ---- */
.count-badge{display:inline-block;vertical-align:middle;margin-left:.4rem;background:var(--gold);color:#fff;
  border-radius:999px;font-size:.78rem;font-weight:700;padding:.05rem .5rem;}
.book-grid{list-style:none;padding:0;margin:0;display:grid;gap:.9rem;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));}
.book-card{display:flex;gap:.8rem;background:linear-gradient(#fffdf8,#f7efdd);
  border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:11px;
  padding:.8rem .9rem;box-shadow:0 1px 3px rgba(80,60,20,.06);transition:box-shadow .15s,transform .15s;}
.book-card:hover{box-shadow:0 5px 16px rgba(80,60,20,.12);transform:translateY(-1px);}
.bc-cover{flex:0 0 auto;align-self:flex-start;display:block;line-height:0;}
.bc-cover img{width:62px;height:90px;object-fit:cover;border-radius:5px;
  border:1px solid var(--line);box-shadow:0 2px 6px rgba(80,60,20,.18);}
.bc-body{flex:1;min-width:0;}
.bc-title{font-family:var(--serif);font-weight:700;font-size:1.18rem;text-decoration:none;color:var(--accent);
  display:block;line-height:1.25;}
.bc-title:hover{text-decoration:underline;}
.bc-subtitle{font-family:var(--serif);font-style:italic;color:var(--ink);font-size:.92rem;margin-top:.1rem;}
.bc-meta{display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin-top:.5rem;font-size:.85rem;color:var(--ink);}
.bc-specs{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem;}
.bc-chip{font-size:.74rem;color:#6c6552;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:.1rem .5rem;white-space:nowrap;}
.bc-stats{display:flex;flex-wrap:wrap;gap:.25rem .9rem;margin-top:.6rem;padding-top:.55rem;
  border-top:1px dashed var(--line-soft);font-size:.82rem;color:var(--muted);}
.bc-stats strong{color:var(--ink);font-weight:700;}
.bc-stats .bc-pages{color:var(--accent);font-weight:600;}
.bc-side{display:flex;flex-direction:column;align-items:stretch;gap:.4rem;flex:0 0 auto;
  text-align:center;justify-content:flex-start;}
.bc-modified{font-size:.74rem;line-height:1.3;}
.bc-side .btn{white-space:nowrap;}

/* numbered guided workflow (step bar in the editor) */
.guide{background:linear-gradient(#fffdf6,#f7efdd);border:1px solid var(--line);border-radius:12px;
  padding:.8rem 1rem;margin-bottom:.9rem;box-shadow:0 1px 4px rgba(80,60,20,.06);}
.guide-steps{display:flex;flex-wrap:wrap;gap:.3rem;list-style:none;padding:0;margin:0 0 .8rem;}
.guide-step{flex:1 1 auto;min-width:9rem;}
.guide-chip{width:100%;display:flex;align-items:center;gap:.45rem;background:#fff;border:1px solid var(--line);
  border-radius:9px;padding:.4rem .6rem;cursor:pointer;color:var(--ink);font:inherit;text-align:left;}
.guide-chip:hover:not(:disabled){border-color:var(--gold);}
.guide-chip:disabled{opacity:.5;cursor:not-allowed;}
.guide-num{display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;flex:0 0 auto;
  border-radius:50%;border:1px solid var(--line);font-weight:700;font-size:.85rem;background:#faf6ee;}
.guide-label{font-size:.82rem;line-height:1.15;}
.guide-step.current .guide-chip{border-color:var(--accent);box-shadow:0 0 0 2px rgba(138,59,46,.12);}
.guide-step.current .guide-num{background:var(--accent);color:#fff;border-color:var(--accent);}
.guide-step.done .guide-num{background:var(--gold);color:#fff;border-color:var(--gold);}
.guide-step.viewing .guide-chip{background:#fff7e6;}
.guide-panel{border-top:1px dashed var(--line-soft);padding-top:.7rem;}
/* Expertenansicht: alle Schritte gestapelt — jede Etappe als eigene Karte mit Luft dazwischen. */
.guide-expert .guide-panel{border:1px solid var(--line);border-radius:10px;background:var(--paper);
  padding:.9rem 1rem;margin-top:.8rem;}
.guide-expert .guide-panel:first-of-type{margin-top:0;}
.guide-panel h3{margin:0 0 .25rem;color:var(--accent);}
/* Honesty label on a step: 🔒 changes text · 💡 only suggests. */
.step-etikett{display:inline-block;vertical-align:middle;margin-left:.5rem;font-size:.7rem;font-weight:700;
  padding:.12rem .5rem;border-radius:20px;letter-spacing:.01em;white-space:nowrap;}
.step-etikett.lock{background:#fbf1da;color:#92400e;border:1px solid #e7c98b;}
.step-etikett.hint{background:#e6f0e6;color:#3f7a44;border:1px solid #b6d6bd;}
/* Subtitle in a modal title (⚙ – Darstellung / 🎚 – Inhalt & Sprache). */
.head-sub{font-size:.8rem;font-weight:400;color:var(--muted);}
.guide-intro{margin:.1rem 0 .7rem;color:var(--ink);max-width:70ch;}
.guide-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;}
.btn.big{font-size:1rem;padding:.55rem 1rem;}
.guide-next{margin-left:auto;}

/* status / undo bar */
.status-bar{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;padding:.55rem .8rem;
  background:#eef3ea;border:1px solid var(--line);border-radius:9px;font-size:.9rem;color:var(--ink);}
.status-bar .ghost{margin-left:auto;background:transparent;border-style:dashed;color:var(--muted);}

/* trash */
.trash-card{background:#fbf8f1;}
.trash-list{list-style:none;padding:0;margin:.4rem 0 0;}
.trash-list li{display:flex;align-items:center;gap:.8rem;padding:.55rem .2rem;border-bottom:1px solid var(--line-soft);}
.trash-list li:last-child{border-bottom:none;}
.tl-title{font-family:var(--serif);font-weight:700;color:var(--ink);flex:1;min-width:0;}
.tl-actions{display:flex;gap:.4rem;flex:0 0 auto;}

/* ---- new-book wizard ---- */
.wizard{max-width:760px;margin:0 auto;}
.wiz-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.wiz-head h2{margin:0;}
.wiz-steps{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;list-style:none;padding:0;margin:1rem 0 1.4rem;
  border-bottom:1px solid var(--line-soft);padding-bottom:1rem;}
.wiz-steps li{display:flex;align-items:center;gap:.45rem;font-size:.88rem;color:var(--muted);}
.wiz-steps li.active{color:var(--accent);font-weight:700;}
.wiz-steps li.done{color:var(--ink);}
.wiz-num{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;
  border:1px solid var(--line);background:#fff;font-size:.8rem;font-weight:700;}
.wiz-steps li.active .wiz-num{background:var(--accent);color:#fff;border-color:var(--accent);}
.wiz-steps li.done .wiz-num{background:var(--gold);color:#fff;border-color:var(--gold);}
.wiz-body{min-height:200px;}
.wiz-body h3{margin-top:0;}
.wiz-body .req{color:var(--danger);}
.wiz-error{display:block;margin-top:.3rem;color:var(--danger);font-weight:600;font-size:.82rem;}
.field-invalid{border-color:var(--danger) !important;box-shadow:0 0 0 2px rgba(156,43,34,.12);}
.wiz-cover{display:flex;gap:1.2rem;align-items:flex-start;flex-wrap:wrap;margin-top:.4rem;}
.wiz-cover-frame{flex:0 0 auto;width:150px;max-width:40vw;border:1px solid var(--line);border-radius:8px;
  background:var(--paper-2);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.wiz-cover-frame img{width:100%;height:100%;object-fit:cover;}
.wiz-cover-empty{color:var(--muted);font-size:.82rem;text-align:center;padding:.5rem;}
.wiz-cover-actions{flex:1;min-width:220px;display:flex;flex-direction:column;gap:.6rem;align-items:flex-start;}
.wiz-cover-ai{width:100%;display:flex;flex-direction:column;gap:.35rem;}
.wiz-cover-ai label{display:flex;flex-direction:column;gap:.2rem;font-size:.8rem;color:var(--muted);width:100%;}
.wiz-cover-ai input{width:100%;}
.wiz-import-info{margin-top:.7rem;padding:.5rem .7rem;background:#eef3ea;border:1px solid var(--line);
  border-radius:8px;font-size:.9rem;}
.wiz-summary{margin-top:1.2rem;background:#faf6ee;border:1px solid var(--line-soft);border-radius:9px;padding:.7rem .9rem;}
.wiz-summary h4{margin:0 0 .4rem;}
.wiz-summary ul{margin:0;padding-left:1.1rem;font-size:.9rem;color:var(--ink);}
.wiz-nav{display:flex;justify-content:space-between;gap:.6rem;margin-top:1.4rem;
  border-top:1px solid var(--line-soft);padding-top:1rem;}

/* editor onboarding (preparation steps after creating/importing a book) */
.onboard{background:linear-gradient(#fffdf6,#f7efdd);border:1px solid var(--gold);border-radius:11px;
  padding:.8rem 1rem;margin-bottom:.9rem;box-shadow:0 2px 10px rgba(80,60,20,.08);}
.onboard-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.4rem;}
.onboard-head strong{font-size:1.05rem;color:var(--accent);}
.onboard p{margin:.2rem 0 .6rem;color:var(--ink);}
.onboard-steps{display:flex;flex-wrap:wrap;gap:.6rem;}
.onboard-hint{font-size:.85rem;color:var(--muted);margin:.6rem 0 0 !important;}
.onboard .ghost{background:transparent;border-style:dashed;color:var(--muted);}

/* invitation codes (admin) */
.code-pill{font-family:ui-monospace,Consolas,monospace;font-size:1rem;letter-spacing:.04em;
  background:#fff;border:1px solid var(--line);border-radius:7px;padding:.18rem .5rem;color:var(--ink);}
.new-code{margin-top:.7rem;}
.code-list{list-style:none;padding:0;margin:.4rem 0 0;}
.code-list li{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;padding:.55rem .2rem;border-bottom:1px solid var(--line-soft);}
.code-list li:last-child{border-bottom:none;}
.code-when{font-size:.8rem;}
.code-status{font-size:.74rem;padding:.06rem .5rem;border-radius:999px;white-space:nowrap;}
.code-status.open{background:#fff7e0;color:#8a6a16;border:1px solid var(--gold);}
.code-status.redeemed{background:#dcebd7;color:#2f5b29;}
.code-status.expired{background:#eee;color:#777;}

/* prompt admin */
.prompt-item{padding:.7rem 0;border-bottom:1px solid var(--line-soft);}
.prompt-item:last-child{border-bottom:none;}
.prompt-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.2rem;}
.prompt-text{width:100%;font-family:ui-monospace,Consolas,monospace;font-size:.82rem;line-height:1.4;}
.prompt-actions{display:flex;gap:.5rem;margin-top:.4rem;}

.rerun-hint{margin:.5rem 0 0;font-size:.85rem;}

/* Datensicherung */
.backup-ok{color:#2e6b2e;font-weight:600;}
.backup-bad{color:var(--accent);font-weight:600;}
.backup-table{width:100%;border-collapse:collapse;margin:.5rem 0;font-size:.9rem;}
.backup-table th,.backup-table td{text-align:left;padding:.3rem .5rem;border-bottom:1px solid var(--line);}
.backup-table th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);}
.backup-mail{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.4rem 0;}
.backup-mail input{flex:1;min-width:220px;}

/* Mein Konto */
.kv{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.2rem;margin:.3rem 0 0;}
.kv dt{color:var(--muted);}
.kv dd{margin:0;font-weight:600;}
.kv-form{max-width:420px;margin-bottom:.6rem;}

/* Verwaltung (admin hub) */
.admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin-top:1rem;}
.admin-tile{display:flex;flex-direction:column;gap:.3rem;padding:1.1rem 1.2rem;background:var(--paper);
  border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.05);transition:border-color .12s,box-shadow .12s,transform .08s;}
.admin-tile:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(0,0,0,.1);transform:translateY(-1px);}
.admin-tile-icon{font-size:1.7rem;}
.admin-tile-title{font-weight:700;font-size:1.05rem;color:var(--accent);}
.admin-tile-desc{font-size:.85rem;color:var(--muted);}

/* raw-reply debug dialog (local only) */
.debug-pre{max-height:60vh;overflow:auto;white-space:pre-wrap;word-break:break-word;
  font-size:.78rem;background:#1e1b16;color:#e8e2d2;border-radius:8px;padding:.7rem .8rem;margin:0;}

/* login */
.login-wrap{min-height:60vh;display:flex;align-items:center;justify-content:center;}
.login-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:1.8rem 2rem;width:min(380px,92vw);text-align:center;
  box-shadow:0 14px 40px rgba(90,65,25,.16);position:relative;}
.login-card::before{content:"";position:absolute;inset:7px;border:1px solid var(--line-soft);border-radius:10px;pointer-events:none;}
.login-emblem{font-size:2.6rem;}
.login-card h1{font-size:1.6rem;margin:.2rem 0 .3rem;}
.login-card .field{display:block;text-align:left;font-size:.85rem;color:var(--muted);margin:.7rem 0 0;}
.login-card .field input{margin-top:.2rem;}
.login-error{color:var(--danger);font-size:.85rem;margin:.6rem 0 0;}

/* user management */
.user-add{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;}
.user-add .txt{max-width:220px;}
.user-add .chk{display:flex;align-items:center;gap:.3rem;white-space:nowrap;}
.user-list{list-style:none;margin:0;padding:0;}
.user-list li{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.55rem .2rem;border-bottom:1px solid var(--line-soft);}
.user-list .u-name{font-weight:600;min-width:9rem;}
.user-list .txt{max-width:200px;}
.role-badge{display:inline-block;margin-left:.35rem;background:var(--gold);color:#fff;border-radius:999px;
  font-size:.68rem;padding:.04rem .45rem;vertical-align:middle;}

/* editor */
.editor-toolbar{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap;
  padding:.5rem .6rem;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;}
.status{color:var(--gold);font-weight:600;}

/* Toasts — the single transient-message channel. Success/info self-dismiss; errors stay until closed. */
.toast-stack{position:fixed;top:14px;right:14px;z-index:1600;display:flex;flex-direction:column;gap:.5rem;
  max-width:min(420px,calc(100vw - 28px));pointer-events:none;}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:.6rem;background:var(--paper);
  border:1px solid var(--line);border-left:4px solid var(--muted);border-radius:9px;
  padding:.6rem .7rem .6rem .85rem;box-shadow:0 6px 20px rgba(43,38,32,.16);font-size:.9rem;color:var(--ink);
  animation:toast-in .18s ease-out;}
.toast-success{border-left-color:#3f7a44;}
.toast-info{border-left-color:var(--gold);}
.toast-error{border-left-color:var(--danger);}
.toast-msg{flex:1;line-height:1.4;white-space:pre-line;}
.toast-x{flex:0 0 auto;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:.85rem;
  line-height:1;padding:2px 5px;border-radius:5px;}
.toast-x:hover{background:var(--line-soft);color:var(--ink);}
@keyframes toast-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.toast{animation:none;}}
.status.warn{color:#92400e;font-weight:600;background:#fef3c7;border:1px solid #fcd34d;
  border-radius:7px;padding:.5rem .7rem;max-width:560px;}
.warn-btn{border-color:#fcd34d;background:#fef3c7;color:#92400e;font-weight:600;}
.notice-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;}
.notice-list li{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;
  background:var(--paper-2);border:1px solid var(--line);border-radius:8px;}
.notice-icon{font-size:1.15rem;flex:none;}
.notice-text{flex:1;}
.notice-clickable{cursor:pointer;transition:border-color .12s,background .12s,transform .08s;}
.notice-clickable:hover{border-color:var(--accent);background:var(--paper);transform:translateX(2px);}
.notice-go{flex:none;color:var(--accent);font-weight:600;font-size:.85rem;white-space:nowrap;}
.scroll-top{position:fixed;right:1.1rem;bottom:1.1rem;z-index:900;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:var(--paper);color:var(--accent);font-size:1.35rem;line-height:1;
  cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.18);opacity:0;visibility:hidden;
  transition:opacity .2s,visibility .2s,background .15s,color .15s;}
.scroll-top.show{opacity:1;visibility:visible;}
.scroll-top:hover{background:var(--accent);color:#fff;}

.mode-toggle{border-color:var(--accent);color:var(--accent);font-weight:600;}
.mode-toggle:hover{background:var(--accent);color:#fff;}
.book-title{font-family:var(--serif);font-weight:600;font-size:1.02rem;color:var(--ink);
  max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 .25rem;}

/* "⋯ Mehr" overflow menu — seldom-used header actions, kept one click away */
.more-wrap{position:relative;display:inline-block;}
.more-overlay{position:fixed;inset:0;z-index:40;background:transparent;}
.more-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:50;min-width:236px;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 26px rgba(43,38,32,.18);padding:.35rem;display:flex;flex-direction:column;gap:.1rem;}
.more-item{display:block;width:100%;text-align:left;background:transparent;border:none;border-radius:7px;
  padding:.5rem .6rem;font-size:.92rem;color:var(--ink);cursor:pointer;text-decoration:none;position:relative;}
.more-item:hover{background:var(--paper-2);}
.more-item.disabled{opacity:.5;pointer-events:none;}
.more-sep{height:1px;background:var(--line-soft);margin:.25rem .2rem;}

.toolbar-right{margin-left:auto;display:flex;align-items:flex-start;gap:.5rem;}
.save-cluster{display:flex;flex-direction:column;align-items:center;gap:.15rem;}
.save-meta{display:flex;flex-direction:column;align-items:center;font-size:.7rem;line-height:1.3;
  min-height:1em;text-align:center;white-space:nowrap;}
.save-meta .unsaved{color:var(--accent);font-weight:700;}
.save-meta .saved{color:var(--muted);}

/* settings dialog tabs */
.meta-tabs{display:flex;gap:.25rem;flex-wrap:wrap;border-bottom:2px solid var(--line);margin-bottom:1rem;}
.meta-tab{appearance:none;background:transparent;border:none;border-bottom:3px solid transparent;
  margin-bottom:-2px;padding:.5rem .9rem;font-size:.92rem;font-weight:600;color:var(--muted);cursor:pointer;}
.meta-tab:hover{color:var(--ink);}
.meta-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
/* The one tab whose settings shape the content (not just presentation) — Zone ①-Vorstufe. */
.meta-tab.content-tab{color:#92400e;}
.meta-tab.content-tab.active{color:#92400e;border-bottom-color:#d97706;}
.content-warn{background:#fef3c7;border:1px solid #fcd34d;color:#92400e;border-radius:8px;
  padding:.5rem .75rem;margin:0 0 .8rem;font-size:.9rem;line-height:1.45;}
.mscheck-head{font-weight:600;padding:.55rem .8rem;border-radius:8px;margin:.2rem 0 .7rem;line-height:1.45;}
.mscheck-head.ok{background:#e6f0e6;color:#3f7a44;border:1px solid #b6d6bd;}
.mscheck-head.warn{background:#fef3c7;color:#92400e;border:1px solid #fcd34d;}
.mscheck-list{margin:.3rem 0 .7rem;padding-left:1.2rem;max-height:40vh;overflow-y:auto;}
.mscheck-list li{margin:.4rem 0;line-height:1.5;color:var(--ink);}
/* Passage highlighting: the missing core stands out, the surrounding (still-present) context is greyed. */
.ms-missing{color:#b3261e;font-weight:600;}
.ms-context{color:#9a948b;}
.ol-how{margin:.7rem 0 0;border:1px solid var(--line);border-radius:8px;background:var(--paper);padding:.3rem .7rem;}
.ol-how summary{cursor:pointer;font-weight:600;color:var(--ink);padding:.3rem 0;}
.ol-how ol{margin:.5rem 0 .4rem 1.1rem;padding:0;}
.ol-how li{margin:.4rem 0;line-height:1.5;}
.ol-how>p{margin:.5rem 0 .3rem;font-size:.9rem;line-height:1.5;}

/* Cover */
.cover-edit{display:flex;gap:1.2rem;align-items:flex-start;flex-wrap:wrap;}
.cover-preview{max-width:210px;max-height:300px;border:1px solid var(--line);border-radius:6px;
  box-shadow:0 3px 12px rgba(0,0,0,.18);}
.cover-actions{display:flex;flex-direction:column;gap:.5rem;}
/* crop-to-format: a frame in the book's aspect ratio, image object-fit:cover shows the exact PDF result */
.cover-crop{margin-top:.6rem;padding:.6rem;border:1px solid var(--line);border-radius:8px;background:#faf6ec;}
.cover-crop-frame{width:100%;max-width:240px;border:2px solid var(--gold);border-radius:6px;
  overflow:hidden;background:#000;margin:.4rem 0;}
.cover-crop-frame img{width:100%;height:100%;object-fit:cover;display:block;}
.cover-prompt{width:100%;max-width:560px;display:block;margin:.3rem 0 .6rem;min-height:7rem;resize:vertical;}
.cover-src-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.2rem 0 .7rem;}
.cover-src-thumb{width:42px;height:60px;object-fit:cover;border-radius:4px;border:1px solid var(--line);}
/* Cover dialog: preview left, controls right — wide enough to avoid scrolling */
.cover-modal{max-width:880px;}
.modal-actions.cover-foot{justify-content:space-between;}
/* cover status/error: always visible above the footer buttons, keep line breaks from the hint */
.cover-msg{white-space:pre-line;margin:.2rem 1rem;padding:.5rem .7rem;border-radius:6px;
  background:#fdf6e6;border:1px solid #e6c98a;}
.cover-grid{display:flex;gap:1.4rem;align-items:flex-start;flex-wrap:wrap;}
.cover-grid-left{flex:0 0 270px;max-width:300px;}
.cover-grid-left .cover-edit{flex-direction:column;}
.cover-grid-left .cover-preview{max-width:100%;max-height:440px;}
.cover-grid-right{flex:1 1 340px;min-width:290px;}
.cover-grid-right .cover-layout{margin-top:0;}
.cover-layout{margin-top:1rem;max-width:560px;}
/* Names the source a preview is made of — a stand-in must never pass for a deliberate choice. */
.src-badge{display:inline-block;margin:0 0 .4rem;padding:.15rem .5rem;border-radius:999px;
  font-size:.78rem;font-weight:600;color:var(--muted);background:#f3f4f6;border:1px solid var(--line);}
.src-badge.own{color:#166534;background:#ecfdf5;border-color:#a7f3d0;}
/* The one decision above the tabs: what of the cover lands in the book PDF, plus the single-sheet downloads. */
.cover-usage{border:1px solid var(--line);border-radius:6px;padding:.7rem .9rem;margin-bottom:1rem;}
.cover-usage h4{margin:0 0 .4rem;}
/* A toggle group: plain buttons, the chosen one carries .primary — no styling of its own to get wrong. */
.choice-row{display:flex;flex-wrap:wrap;gap:.35rem;margin:.4rem 0 .3rem;}
/* The plain native colour field (see ColorPick) — sized like the other inputs in a .cl-row. */
.colorpick{width:3rem;height:1.7rem;padding:0;border:1px solid var(--line);border-radius:4px;cursor:pointer;}
.cover-sheets{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;justify-content:flex-start;
  margin-top:.7rem;padding-top:.6rem;border-top:1px solid var(--line);}
/* The one switch a panel turns on — set apart from the settings it governs. */
.big-chk{display:flex;align-items:center;gap:.5rem;margin:.2rem 0 .5rem;font-size:1rem;}
/* The unfolded wrapper: back cover | spine | front cover, in the proportions of the real sheet. */
.wrap-preview{display:flex;align-items:stretch;max-width:560px;border:1px solid var(--line);
  border-radius:4px;overflow:hidden;background:var(--line);}
.wrap-preview img{flex:1 1 0;min-width:0;object-fit:cover;display:block;}
.wrap-spine{flex:0 0 auto;align-self:stretch;display:flex;align-items:center;justify-content:center;overflow:hidden;}
/* Spine lettering, read BOTTOM TO TOP — upright when the book stands on a shelf and you read it from the
   right. vertical-rl turned 180° rather than sideways-lr, which only Firefox understands. */
.spine-text{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;line-height:1;
  max-height:92%;overflow:hidden;}
.cl-row{display:grid;grid-template-columns:8.5rem 1fr auto;align-items:center;gap:.6rem;margin:.35rem 0;font-size:.9rem;}
.cl-row input[type=range]{width:100%;}
.cl-num{width:4.4rem;}
.cl-row.chk-row{grid-template-columns:auto 1fr;}
/* Eine Wahl aus wenigen Möglichkeiten, wo sonst ein Regler stünde (Reihe & Band). */
.cl-choice{display:flex;flex-wrap:wrap;gap:.3rem;}

/* confirm dialog always above any other modal (two classes → beats .modal-overlay regardless of order) */
.modal-overlay.confirm-overlay{z-index:1500;}

/* "Frühere Fassungen" (snapshots) */
.versions-bar{display:flex;align-items:flex-start;gap:1rem;margin-bottom:.5rem;}
.versions-hint{flex:1;margin:0;font-size:.85rem;line-height:1.45;}
.versions-bar .btn{white-space:nowrap;flex:none;}
.versions-msg{display:inline-block;margin:.1rem 0 .7rem;padding:.45rem .9rem;border-radius:8px;
  font-weight:700;border:1px solid;}
.versions-msg.ok{background:#eaf6ea;border-color:#4a9a4a;color:#2e6b2e;}
.versions-msg.info{background:#fff3d6;border-color:var(--gold);color:#7a5a10;}
.versions-msg.flash{animation:versions-flash 1.3s ease;}
@keyframes versions-flash{
  0%{transform:scale(1.09);box-shadow:0 0 0 5px rgba(169,121,31,.4);}
  14%{transform:scale(1.09);}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(169,121,31,0);}
}
.versions{display:flex;gap:1.1rem;align-items:stretch;}
.version-list{flex:1 1 56%;list-style:none;margin:0;padding:0;max-height:46vh;overflow:auto;
  display:flex;flex-direction:column;gap:.4rem;}
.version-item{display:flex;align-items:center;gap:.4rem;border:1px solid var(--line);border-radius:9px;
  background:#fff;transition:border-color .12s,box-shadow .12s;}
.version-item:hover{border-color:var(--gold);}
.version-item.sel{border-color:var(--accent);background:#faf4e6;box-shadow:0 1px 5px rgba(138,59,46,.13);}
.version-row{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:.18rem;
  background:transparent;border:none;text-align:left;cursor:pointer;padding:.55rem .7rem;border-radius:8px;}
.version-reason{font-weight:600;color:var(--ink);}
.version-meta{display:flex;gap:.8rem;font-size:.76rem;color:var(--muted);}
.restore-btn{margin-right:.5rem;white-space:nowrap;flex:none;}
.version-preview{flex:1 1 44%;max-height:46vh;overflow:auto;border:1px solid var(--line);border-radius:9px;
  background:var(--paper-2);padding:.7rem .9rem;}
.version-preview-head{font-size:.72rem;font-weight:700;color:var(--accent);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:.5rem;}
.version-outline{list-style:none;margin:0;padding:0;}
.version-outline li{padding:.14rem 0;line-height:1.4;}
.vo-chapter{font-weight:700;color:var(--ink);}
.vo-section{padding-left:1.1rem;color:var(--muted);}

.ai-group{display:inline-flex;align-items:center;gap:.4rem;padding:.28rem .55rem;
  border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05);}
.ai-group .ai-label{font-size:.74rem;font-weight:700;color:var(--accent);white-space:nowrap;}
.ai-group.prep{background:#f4f1ea;}
.ai-group.prep .ai-label{color:var(--muted);}
.ai-group .btn.small{background:var(--paper);}
.saved-badge{display:inline-block;margin-left:.35rem;background:var(--gold);color:#fff;border-radius:999px;
  font-size:.7rem;font-weight:700;padding:.02rem .42rem;line-height:1.4;vertical-align:middle;}

/* in-app dialog */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;
  justify-content:center;z-index:1000;}
/* Session ended (logged in elsewhere): above every other layer, including toasts and confirm dialogs. */
.modal-overlay.session-ended-overlay{z-index:2000;background:rgba(0,0,0,.6);}
.modal{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.2rem 1.4rem;
  max-width:480px;width:90%;box-shadow:0 24px 70px rgba(0,0,0,.3);}
.modal h3{margin:0 0 .6rem;}
.modal p{margin:0 0 1.1rem;white-space:pre-line;color:var(--ink);line-height:1.5;}
.modal-actions{display:flex;justify-content:flex-end;gap:.6rem;}

/* KI-Fortschritt */
.ai-overlay{position:fixed;inset:0;background:rgba(40,30,15,.45);display:flex;
  align-items:center;justify-content:center;z-index:1200;}
.ai-progress{background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:1.6rem 2rem;width:min(360px,90vw);text-align:center;
  box-shadow:0 22px 64px rgba(80,60,20,.34);}
.ai-spinner{width:50px;height:50px;margin:0 auto 1rem;border-radius:50%;
  border:5px solid var(--line);border-top-color:var(--accent);animation:ai-spin .9s linear infinite;}
@keyframes ai-spin{to{transform:rotate(360deg);}}
.ai-progress-label{font-family:var(--serif);font-size:1.1rem;font-weight:700;color:var(--accent);}
.ai-bar{height:6px;margin:1rem 0 .5rem;background:var(--line);border-radius:99px;overflow:hidden;}
.ai-bar-fill{height:100%;width:40%;background:var(--accent);border-radius:99px;animation:ai-bar 1.2s ease-in-out infinite;}
@keyframes ai-bar{0%{margin-left:-42%;}100%{margin-left:100%;}}
.ai-progress-hint{font-size:.85rem;color:var(--muted);}
.modal-wide{max-width:700px;width:94%;}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.6rem;}
.modal-head h3{margin:0;}
.modal-body{max-height:68vh;overflow:auto;padding-right:.2rem;}
.modal-body h4{margin:1rem 0 .4rem;}
/* Options in the print dialog: checkbox left, label right, a sub-option greys out when its master is off. */
.print-opt{display:flex;align-items:flex-start;gap:.55rem;margin:.5rem 0;line-height:1.4;cursor:pointer;}
.print-opt input{margin-top:.2rem;flex:0 0 auto;}
.print-opt.disabled{opacity:.45;cursor:default;}

.credit{margin-left:auto;font-size:.82rem;color:var(--muted);white-space:nowrap;
  border:1px solid var(--line);border-radius:7px;padding:.2rem .5rem;background:#fff;}

.save-bar{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;padding:.5rem .8rem;
  background:#fff7e0;border:1px solid var(--gold);border-radius:9px;}
.save-bar span{flex:1;font-size:.9rem;}
.review-resume{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem;padding:.5rem .8rem;
  background:#eef3ea;border:1px solid var(--line);border-radius:9px;}
.review-resume span{flex:1;font-size:.9rem;}
.back-btn{display:block;width:100%;text-align:center;font-size:1rem;font-weight:700;
  padding:.6rem;margin-bottom:.7rem;border:1px solid var(--gold);color:var(--accent);
  background:linear-gradient(#fffdf7,#f1e7d3);}
.back-btn:hover{background:linear-gradient(#fff,#ece0c8);border-color:var(--accent);}

.issue-panel{background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:.8rem 1rem;margin-bottom:1rem;}
input[type=checkbox]{width:auto;}
.issue-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;flex-wrap:wrap;}
.issue-head .muted{flex:0 0 auto;}
.issue-head .chk{display:flex;align-items:center;gap:.3rem;font-size:.85rem;color:var(--muted);}
.head-sep{flex:1;}
.issue-chk{flex:0 0 auto;margin:0;}
.issue{cursor:pointer;}
.issue:hover{background:#f1ece1;}
.issue.focused{outline:2px solid var(--accent);outline-offset:1px;background:#fbf7ec;}
/* Non-breaking-space marker: a small CSS chip (renders in any font, unlike a special glyph). */
.ws-nbsp{display:inline-block;width:.4em;height:.72em;vertical-align:-.02em;margin:0 .04em;
  background:#dce7ff;border:1px solid #a7bfe6;border-radius:2px;}
.issue-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem;
  max-height:38vh;overflow-y:auto;}
.issue{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.4rem .55rem;
  border:1px solid var(--line);border-left:4px solid #6f86e0;border-radius:8px;background:#fbfaf6;}
.issue.spelling{border-left-color:var(--danger);}
.issue.grammar{border-left-color:var(--accent);}
.issue.punctuation{border-left-color:var(--gold);}
.issue-kind{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);min-width:7.5rem;}
.issue-where{font-size:.7rem;padding:.05rem .35rem;border-radius:.5rem;background:var(--chip,#eef1f5);color:var(--muted);white-space:nowrap;}
.issue-diff{font-size:.95rem;}
.issue-diff del{color:var(--danger);text-decoration:line-through;}
.issue-diff ins{color:#1f7a3d;text-decoration:none;}
/* „Auf Zitate umstellen": abgehakter Absatz gedämpft; die Vorschau zeigt den künftigen Zitattext. */
.issue.off{opacity:.5;}
.issue-kind input[type=checkbox]{margin-right:.35rem;vertical-align:middle;}
.issue-kind{display:flex;align-items:center;cursor:pointer;}
.quote-preview{display:block;color:var(--ink);}
/* Impressum-Vorlage: das editierbare Template-Feld mit Platzhalter-Chips. */
.imprint-tmpl{margin-top:.9rem;}
textarea.mono{font-family:'Cascadia Code','Consolas','Courier New',monospace;font-size:.85rem;line-height:1.5;white-space:pre-wrap;}
.tmpl-tags{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin:.4rem 0;font-size:.85rem;}
.tag-chip{background:var(--paper-2);border:1px solid var(--line);border-radius:6px;padding:.05rem .4rem;
  font-family:'Cascadia Code','Consolas',monospace;font-size:.8rem;color:var(--accent);cursor:default;}
.issue-diff .arrow{color:var(--muted);margin:0 .15rem;}
.issue-reason{font-size:.82rem;color:var(--muted);flex:1;min-width:8rem;}
.issue-actions{display:flex;gap:.35rem;margin-left:auto;}

.help-content h4{margin:1.2rem 0 .3rem;font-size:1.02rem;color:var(--accent);}
.help-content h4:first-child{margin-top:0;}
.help-content p{margin:.3rem 0 .6rem;line-height:1.55;white-space:normal;}
.help-content ul,.help-content ol{margin:.2rem 0 .7rem;padding-left:1.3rem;}
.help-content li{margin:.25rem 0;line-height:1.5;}
.help-content code{background:#f3f0e8;border-radius:4px;padding:0 .25em;font-size:.9em;}
.help-content ol.steps{padding-left:1.4rem;}
.help-content ol.steps>li{margin:.5rem 0;}
.help-note{background:#fff7e0;border:1px solid var(--gold);border-radius:8px;
  padding:.6rem .8rem;font-size:.9rem;margin-top:.8rem;}

/* FAQ (structured help) */
.faq-search{width:100%;padding:.55rem .7rem;border:1px solid var(--line);border-radius:9px;
  font-size:.95rem;margin-bottom:.6rem;background:var(--paper);}
.faq-cat{margin:1.1rem 0 .35rem;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:700;}
.faq-cat:first-of-type{margin-top:.2rem;}
.faq-item{border:1px solid var(--line);border-radius:9px;margin:.4rem 0;background:var(--paper-2);overflow:hidden;}
.faq-item.open{background:var(--paper);}
.faq-q{display:flex;align-items:baseline;gap:.5rem;width:100%;text-align:left;background:transparent;
  border:none;cursor:pointer;padding:.6rem .75rem;font-size:.95rem;font-weight:600;color:var(--ink);line-height:1.35;}
.faq-q:hover{color:var(--accent);}
.faq-caret{color:var(--accent);font-size:.8rem;flex:0 0 auto;}
.faq-a{padding:0 .8rem .3rem 1.75rem;}
.faq-a p{margin:.2rem 0 .5rem;line-height:1.55;}
.faq-a ul,.faq-a ol{margin:.2rem 0 .5rem;padding-left:1.2rem;}
.faq-a li{margin:.2rem 0;line-height:1.5;}
@keyframes faqFlash{0%{box-shadow:0 0 0 3px var(--gold);}100%{box-shadow:0 0 0 0 transparent;}}
.faq-item.faq-flash{animation:faqFlash 1.4s ease-out;}
@media (prefers-reduced-motion:reduce){.faq-item.faq-flash{animation:none;}}

.meta-panel{background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:1rem;margin-bottom:1rem;}
.meta-panel h3{margin:0 0 .6rem;}
.meta-panel h4{margin:.8rem 0 .4rem;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem .7rem;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;}
.grid2 label,.grid3 label,.grid4 label{display:flex;flex-direction:column;gap:.2rem;font-size:.8rem;color:var(--muted);}
.grid2 .wide{grid-column:1 / -1;}

/* Metadaten-Dialog: Steuerung links, Doppelseiten-Vorschau rechts */
.modal-meta{max-width:960px;width:96%;align-self:flex-start;margin-top:5vh;
  height:min(82vh,780px);display:flex;flex-direction:column;}
.modal-meta .modal-body{flex:1;max-height:none;min-height:0;}
/* Settings left (scroll with the body), the double-page preview right and sticky so it is always visible. */
.meta-format{display:flex;flex-direction:row;gap:1.4rem;align-items:flex-start;}
.meta-controls{flex:1 1 auto;min-width:0;}
/* Short explanation under a settings control. */
.field-help{display:block;margin-top:.28rem;font-size:.74rem;line-height:1.35;color:var(--muted);font-weight:400;}

/* ⓘ help icon + click-popover, replacing the per-field "Wand aus Erklärungen" in the settings. */
.infotip{position:relative;display:inline-block;margin-left:.3rem;vertical-align:middle;font-weight:400;}
.infotip-btn{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;padding:0;
  border:1.4px solid var(--muted);border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;
  transition:border-color .12s,color .12s,background .12s;}
.infotip-i{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:700;font-size:.66rem;
  line-height:1;transform:translateY(.2px);}
.infotip-btn:hover,.infotip-btn.open{border-color:var(--accent);background:var(--accent);color:#fff;}
/* Keep the ⓘ on the label's line (grid labels stack their children as flex-column). The icon sits at the
   right of the label row; the control spans the full width below. chk-row labels are already flex-row. */
.grid2 label:has(> .infotip):not(.chk-row),.grid3 label:has(> .infotip):not(.chk-row){display:grid;
  grid-template-columns:1fr auto;align-items:center;gap:.2rem .35rem;}
.grid2 label:has(> .infotip):not(.chk-row) > select,.grid2 label:has(> .infotip):not(.chk-row) > input,
.grid3 label:has(> .infotip):not(.chk-row) > select,.grid3 label:has(> .infotip):not(.chk-row) > input{grid-column:1 / -1;}
.infotip-pop{position:absolute;top:calc(100% + 5px);left:0;z-index:70;width:max-content;max-width:300px;
  background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 20px rgba(43,38,32,.18);
  padding:.5rem .65rem;font-size:.78rem;font-weight:400;line-height:1.45;color:var(--ink);white-space:normal;
  text-transform:none;letter-spacing:normal;}
.infotip-more{display:block;margin-top:.45rem;background:transparent;border:none;padding:0;cursor:pointer;
  color:var(--accent);font-weight:700;font-size:.76rem;text-align:left;}
.infotip-more:hover{text-decoration:underline;}
/* Grouped, labelled block of related settings inside a meta tab (e.g. "Kapitelanfang"). */
.meta-group{border:1px solid var(--line);border-radius:6px;padding:.55rem .7rem .65rem;margin-top:.9rem;
  display:flex;flex-direction:column;gap:.5rem;}
.meta-group-title{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);}
.meta-group .chk-row{display:flex;}
/* "Quellen prüfen" result: what was checked + outcome, shown even when all clean. */
.src-summary{margin-top:.6rem;border:1px solid var(--line);border-radius:8px;padding:.55rem .7rem;background:var(--paper-2);}
.src-summary.ok{border-color:#bcd8b6;}
.src-summary-head{font-weight:600;font-size:.9rem;}
.src-checks{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.22rem;font-size:.85rem;}
.src-ok{color:#2e7d32;} .src-warn{color:var(--danger);font-weight:600;} .src-skip{color:var(--muted);}
.meta-preview-col{flex:0 0 460px;max-width:460px;position:sticky;top:0;align-self:flex-start;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;}
@media (max-width:900px){
  .meta-format{flex-direction:column;}
  .meta-preview-col{flex-basis:auto;max-width:100%;width:100%;position:static;}
}
.mp-caption{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
.mp-dim{font-size:.72rem;color:var(--muted);}
.mp-zoom{display:flex;align-items:center;gap:.5rem;width:min(100%,300px);}
.mp-zoom input[type=range]{flex:1;width:auto;min-width:0;}
.mp-stage{width:100%;max-width:100%;height:440px;overflow:auto;background:#efe9da;
  border:1px solid var(--line);border-radius:8px;padding:12px;box-sizing:border-box;}
.mp-spread{display:flex;width:fit-content;margin:0 auto;box-shadow:0 5px 16px rgba(80,60,20,.25);}
.mp-page{background:#fffdf8;box-sizing:border-box;overflow:hidden;color:#241f18;display:flex;flex-direction:column;}
.mp-head{flex:0 0 auto;font-style:italic;color:#6b6152;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-bottom:.5em;}
.mp-foot{flex:0 0 auto;color:#6b6152;padding-top:.5em;}
.mp-verso{border-right:1px solid #cdbfa0;box-shadow:inset -7px 0 9px -7px rgba(0,0,0,.28);}
.mp-recto{box-shadow:inset 7px 0 9px -7px rgba(0,0,0,.28);}
.mp-body{flex:1 1 auto;min-height:0;overflow:hidden;}
.mp-chapter{font-weight:700;font-size:1.5em;margin:0 0 .6em;line-height:1.15;}
.chead-klein .mp-chapter{font-size:1.25em;} .chead-gross .mp-chapter{font-size:1.85em;}
/* Chapter title centered on its own page (the flow preview can only hint the horizontal centering). */
.chap-centered .pv-chapter{text-align:center;}
.mp-body p{margin:0 0 .55em;text-align:justify;line-height:inherit;hyphens:auto;text-indent:0;}
.mp-body.para-indent p{margin:0;text-indent:1.2em;}
.mp-body.para-indent p:first-child,.mp-body.para-indent .mp-chapter + p{text-indent:0;}

/* Gliederung | Dokument | (Prüfung oder Bilder) */
.editor-split{display:grid;grid-template-columns:230px minmax(0,1fr);gap:1.2rem;align-items:start;}
.editor-split.with-side{grid-template-columns:230px minmax(0,1fr) minmax(320px,26rem);}
@media(max-width:1100px){.editor-split,.editor-split.with-side{grid-template-columns:1fr;}}

/* ---------- Gliederung ---------- */
.outline-nav{position:sticky;top:1rem;align-self:start;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:.7rem .55rem;max-height:82vh;overflow:auto;}
.outline-head{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 .3rem .5rem;}
.outline-empty{padding:.3rem .4rem;font-size:.84rem;line-height:1.4;}
.outline-list{list-style:none;margin:0;padding:0;}
.outline-item{display:flex;align-items:center;gap:.15rem;border-radius:7px;}
.outline-item:hover{background:#f0ece2;}
.outline-item.here{background:#fdf6e3;box-shadow:inset 3px 0 0 var(--accent);}
.outline-jump{flex:1;min-width:0;text-align:left;border:none;background:none;cursor:pointer;
  padding:.28rem .4rem;font:inherit;font-size:.88rem;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.outline-item.lvl0>.outline-jump{font-family:var(--serif);font-weight:700;}
.outline-item.lvl1>.outline-jump{font-weight:600;}
.outline-item.lvl2>.outline-jump{padding-left:1.1rem;font-size:.84rem;color:#4a463d;}
.outline-item.lvl3>.outline-jump{padding-left:1.9rem;font-size:.8rem;color:#5d574a;}
.outline-actions{display:flex;gap:.1rem;flex:0 0 auto;visibility:hidden;}
.outline-item:hover .outline-actions,.outline-item:focus-within .outline-actions{visibility:visible;}

/* ---------- Werkzeugleiste ---------- */
.doc-pane{display:flex;flex-direction:column;gap:.7rem;min-width:0;}
.doc-toolbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:.4rem .6rem;}
.kind-select{padding:.3rem .45rem;border:1px solid var(--line);border-radius:7px;font-size:.86rem;
  background:var(--paper);color:var(--ink);width:auto;}
.tb-btn{min-width:1.9rem;height:1.8rem;padding:0 .4rem;border:1px solid transparent;border-radius:6px;
  background:transparent;cursor:pointer;font-size:.86rem;line-height:1;color:var(--ink);}
.tb-btn:hover{border-color:var(--line);background:var(--paper-2);}
.tb-btn.on{border-color:var(--gold);background:#fdf6e3;color:var(--accent);}
.tb-btn:disabled{opacity:.35;cursor:default;}
.tb-btn sup{font-size:.6em;}
.tb-sep{width:1px;height:1.3rem;background:var(--line);margin:0 .25rem;}
.tb-spacer{flex:1;}
.doc-find{display:flex;align-items:center;gap:.35rem;}
.doc-find .txt{width:12rem;padding:.28rem .5rem;font-size:.84rem;}
.find-hits{font-size:.76rem;color:var(--muted);white-space:nowrap;}

/* ---------- Das Dokument ---------- */
/* Der Text sieht schon beim Schreiben aus wie ein Buch: Serifen, Buchbreite, echte
   Überschriften-Hierarchie. Das ersetzt die frühere Kachelliste samt Live-Vorschau. */
.doc-flow{background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:2.4rem clamp(1rem,5vw,3.4rem);min-height:70vh;
  font-family:var(--serif);font-size:1.06rem;line-height:1.65;color:var(--ink);
  hyphens:auto;overflow-wrap:anywhere;}
.doc-flow:focus{outline:none;}

/* Wo der Setzer die Seite wirklich umbricht. Liegt ÜBER dem Text, nie darin: eine Marke im
   contenteditable käme als Textänderung zurück und landete im Undo-Stack des Browsers.
   pointer-events:none, damit die Linie nie zwischen Cursor und Wort gerät. */
.pb-layer{position:absolute;inset:0;pointer-events:none;z-index:2;}
/* left kommt aus dem JS: die Linie BEGINNT am Umbruch und läuft nach rechts. Quer über die Spalte wäre sie
   eine Lüge — der Editor bricht Zeilen anders um als der Setzer, und alles rechts vom Beginn steht im Buch
   schon auf der nächsten Seite. Der senkrechte Anstrich links markiert die Stelle selbst. */
/* Keine Seitenzahl: die Linie sagt „ab hier nächste Seite", und das ist die Aussage, die zutrifft.
   Der senkrechte Anstrich links markiert die Stelle selbst. */
.pb-line{position:absolute;right:0;border-top:1px dashed var(--gold);opacity:.8;}
.pb-line::before{content:"";position:absolute;left:0;top:-.5rem;height:.5rem;
  border-left:2px solid var(--gold);}
@media(prefers-reduced-motion:reduce){.pb-line{transition:none;}}

/* Dezenter Marker für manuelle Zeilenumbrüche (Shift+Enter / aus Word mitgekommen). Über den Text gezeichnet,
   nie hinein: ein Zeichen im contenteditable käme als Bearbeitung zurück und läge im Undo-Stack. left/top aus
   dem JS, an der Stelle, wo der <br> die Zeile bricht. */
.br-layer{position:absolute;inset:0;pointer-events:none;z-index:2;}
.br-mark{position:absolute;color:var(--muted);opacity:.4;font-size:.8em;line-height:1;transform:translate(1px,-1px);}

/* „Seiten werden berechnet" — ein Zustand, keine Meldung, darum kein Toast (das hier erscheint nach jeder
   Schreibpause). Unten rechts, weil die Toasts oben rechts fixiert sind. Leise: es soll beruhigen, nicht rufen. */
.pb-busy{position:fixed;right:14px;bottom:14px;z-index:1500;display:flex;align-items:center;gap:.45rem;
  background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.3rem .75rem;
  font-family:var(--sans);font-size:.72rem;color:var(--muted);
  box-shadow:0 2px 8px rgba(90,65,25,.10);pointer-events:none;}
.pb-busy-dot{width:.48rem;height:.48rem;border-radius:50%;background:var(--gold);flex:0 0 auto;
  animation:pb-pulse 1.1s ease-in-out infinite;}
@keyframes pb-pulse{0%,100%{opacity:.25;}50%{opacity:1;}}
@media(prefers-reduced-motion:reduce){.pb-busy-dot{animation:none;opacity:.85;}}
.pb-busy-warn{border-color:var(--gold);color:var(--ink);}
/* Das Zeilenmaß in rem, nicht em: em rechnet gegen die EIGENE Schriftgröße, eine Überschrift bekäme also
   eine breitere Spalte als der Fließtext und stünde links daneben. rem hängt an der Wurzel — damit haben
   Überschrift, Absatz, Zitat und Bild dieselbe Kante. */
.doc-flow>.blk{max-width:36rem;margin-inline:auto;}
/* Der senkrechte Rhythmus wird ausschließlich über margin-block gesetzt. Die Kurzform `margin:` würde die
   linken/rechten Ränder auf 0 zurücksetzen und damit das margin-inline:auto oben erschlagen — dann steht die
   Überschrift über die volle Breite und der Absatz zentriert daneben. */
.blk{margin-block:0 .75em;}
/* pre-wrap, damit ein gerade getipptes Leerzeichen am Zeilenende SICHTBAR bleibt. Der Editor macht aus jeder
   getippten Leertaste bewusst ein gewöhnliches Leerzeichen (nicht das geschützte, das Chrome an solchen Stellen
   einsetzt) — unter white-space:normal fällt so ein Leerzeichen am Textende aber in sich zusammen und wirkt
   „verschluckt", bis das nächste Zeichen kommt. pre-wrap hält es stehen; einzelne Wortabstände sehen genau wie
   vorher aus, nur mehrfach getippte Leerzeichen bleiben nun sichtbar (was der Autor auch so gemeint hat). */
.doc-flow{white-space:pre-wrap;}
.blk.para{text-align:justify;}
.blk.part{font-size:1.9em;font-weight:800;text-align:center;margin-block:2.2em 1.2em;}
.blk.chapter{font-size:1.55em;font-weight:700;margin-block:1.8em .7em;}
.blk.section{font-size:1.2em;font-weight:700;margin-block:1.3em .5em;}
.blk.subsection{font-size:1.05em;font-weight:700;margin-block:1.1em .4em;}
.doc-flow>.blk.part:first-child,.doc-flow>.blk.chapter:first-child{margin-block-start:0;}
/* Zitat: NICHT kursiv und nicht grau. Das war der Editor lange, das PDF nie, und wer im Editor Kursives
   sieht, erwartet es auch gedruckt. Die Einrückung folgt der Buch-Einstellung „Zitate eingerückt setzen"
   (Klasse .quotes-plain am Container), damit hier steht, was dort herauskommt.
   Die Kante links bleibt in beiden Fällen — sie ist eine Lesehilfe des Editors, keine Satzanweisung: Sie
   zeigt, dass dieser Absatz ein Zitat IST und darum von der Grammatikprüfung ausgenommen wird, auch wenn
   das Buch ihn unauffällig setzt. Heller als die Kante der Quellenangabe (--line), damit die beiden
   Absatzarten auf einen Blick auseinanderzuhalten sind. */
.blk.quote{margin-block:.9em;padding-inline:var(--quote-indent,2em);border-left:2px solid var(--line-soft);
  font-size:calc(1em * var(--quote-size,1));}
.doc-flow.quotes-plain .blk.quote{padding-inline:.7em 0;}

/* Inline-Schrift („Schrift"-Box): ein Lauf rennt in der Größe einer anderen Rolle, bleibt aber im Block.
   Absolute rem-Größen, nicht relativ zum Block — so springt ein „Fließtext"-Wort im kleinen Zitat wieder
   auf Textgröße, egal wie klein der Block gesetzt ist. Nur Größe; Betonung bleibt bei F/K/U. */
.sf-flt{font-size:1rem;}
.sf-zit{font-size:calc(1rem * var(--quote-size,1));}
.sf-qng{font-size:calc(1rem * var(--source-size,.88));}
/* Ein Fußnotenzeichen ist contenteditable=false — der Browser malt die Auswahl-Markierung nicht darüber, sodass
   man beim Markieren eines Wortes nicht sieht, ob die Ziffer mit drin ist. Diese Klasse setzt JS auf jedes
   Zeichen, das die aktuelle Auswahl erfasst (und genau das wird beim Auszeichnen in den Lauf gezogen). */
.doc-flow sup.fn.sel{background:Highlight;color:HighlightText;border-radius:2px;}
.blk.src{font-size:.88em;color:var(--muted);border-left:2px solid var(--line);padding-left:.7em;}
/* „Quellenangaben einrücken": beidseitig eingezogen wie die Zitate (gleiche Breite über --quote-indent). Die
   linke Lesehilfe-Kante bleibt; der Einzug kommt zusätzlich rechts und weiter links. */
.doc-flow.sources-indented .blk.src{padding-inline:var(--quote-indent,2em);}
/* Fußnote: kleiner Chip an der Belegstelle. Anklicken öffnet den Notentext zum Bearbeiten. */
.doc-flow sup.fn{position:relative;vertical-align:super;font-size:.62em;font-weight:700;color:var(--accent);
  background:#f6efe0;border-radius:3px;padding:0 .28em;margin:0 .05em;cursor:pointer;user-select:none;}
.doc-flow sup.fn:hover{background:var(--gold);color:#fff;}
/* Der Notentext beim Überfahren — der Sinn eines Fußnotenzeichens ist, die Quelle zu sehen, ohne sie erst
   aufklappen zu müssen. Eigener Tooltip statt title=, weil der native erst nach einer Sekunde erscheint.
   Alle Schrift-Angaben absolut (rem), sonst erbte er die .62em des Chips. */
.doc-flow sup.fn::after{
  content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + .5em);transform:translateX(-50%);
  z-index:80;width:max-content;max-width:22rem;white-space:normal;text-align:left;
  font-family:'Segoe UI',system-ui,sans-serif;font-size:.78rem;font-weight:400;font-style:normal;
  line-height:1.4;vertical-align:baseline;letter-spacing:0;
  background:var(--ink);color:#fff;border-radius:7px;padding:.4rem .6rem;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;transition:opacity .12s ease;pointer-events:none;}
.doc-flow sup.fn:hover::after{opacity:1;visibility:visible;}
@media(prefers-reduced-motion:reduce){.doc-flow sup.fn::after{transition:none;}}
/* Fußnotenzeichen versetzen: mit der Maus (oder dem Finger) greifen und ziehen. touch-action:none lässt die
   Geste auf dem Tablet ziehen statt scrollen; ein kurzer Tipp bleibt ein Klick und öffnet den Notentext.
   Beim Ziehen blasst das Zeichen ab; ein senkrechter Strich zeigt die künftige Belegstelle. Der Strich liegt
   fix im Fenster (Koordinaten aus getBoundingClientRect) und fängt keine Klicks. */
.doc-flow sup.fn{cursor:grab;touch-action:none;}
.doc-flow sup.fn.fn-dragging{opacity:.35;cursor:grabbing;}
/* Kurzes Aufleuchten der Fußnoten-Marke, wenn ein Prüf-Finding in ihrem Text sitzt (im Fließtext nicht markierbar). */
.doc-flow sup.fn.fn-flash{animation:fnFlash 1.6s ease;border-radius:3px;}
@keyframes fnFlash{0%,40%{background:#ffd24d;color:var(--ink);box-shadow:0 0 0 3px #ffd24d;}100%{background:transparent;box-shadow:0 0 0 0 transparent;}}
.fn-drop-caret{position:fixed;width:2px;background:var(--accent);border-radius:1px;z-index:90;
  pointer-events:none;box-shadow:0 0 0 1px rgba(255,255,255,.65);}
/* Bildkarte im Fluss — anklicken öffnet das Bildfeld rechts. Löschen geht nur dort. */
.doc-flow .fig{max-width:36rem;margin:1.1em auto;padding:.5rem;border:1px solid var(--line-soft);
  border-radius:9px;background:#fff;text-align:center;cursor:pointer;}
.doc-flow .fig:hover{border-color:var(--gold);}
.doc-flow .fig img{max-width:100%;max-height:280px;border-radius:5px;}
/* Eine Bildkarte wird gerade auf einen anderen Absatz gezogen; der Zielabsatz leuchtet dezent auf. */
.doc-flow .fig.fig-dragging{opacity:.4;cursor:grabbing;}
.doc-flow p.blk.fig-drop-into{box-shadow:0 0 0 2px var(--gold);border-radius:4px;}
.doc-flow .fig-cap{display:block;margin-top:.35rem;font-size:.78rem;font-style:italic;color:var(--muted);}
.blk-flash{animation:blkFlash 1.4s ease;}
@keyframes blkFlash{0%{box-shadow:0 0 0 2px var(--accent);}100%{box-shadow:0 0 0 0 transparent;}}
/* Suche und Prüf-Markierung färben Bereiche, ohne den DOM anzufassen — sonst litte das Rückgängig. */
::highlight(buch-find){background:#ffe8a3;color:var(--ink);}
::highlight(buch-focus){background:#ffd24d;color:var(--ink);}
/* Geschütztes Leerzeichen im Buch: eine dezent graue Marke auf dem Zeichen selbst, damit der Autor sieht,
   wo ein Leerzeichen nicht umbricht. Gefärbt, nicht in den Text geschrieben — das Rückgängig bleibt heil. */
::highlight(buch-nbsp){background:#e2dccb;}

/* ---------- Seitenpanel (Bilder) ---------- */
.doc-side{position:sticky;top:1rem;align-self:start;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:.7rem;max-height:82vh;overflow:auto;display:flex;flex-direction:column;gap:.55rem;}
.doc-side-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-weight:600;}
.doc-side-hint{margin:0;font-size:.8rem;font-style:italic;}

/* ---------- Fußnoten-Fenster ---------- */
.fn-overlay{position:fixed;inset:0;z-index:60;}
.fn-pop{position:fixed;z-index:70;width:min(26rem,90vw);background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 10px 34px rgba(0,0,0,.16);padding:.7rem;
  display:flex;flex-direction:column;gap:.5rem;}
.fn-pop-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-weight:600;}
.fn-text{width:100%;font-size:.9rem;line-height:1.45;resize:vertical;}
.fn-hint{margin:0;font-size:.78rem;line-height:1.35;color:var(--muted);}

/* review mode: change list as the left column next to the preview */
.review-pane{position:sticky;top:1rem;align-self:start;margin-bottom:0;}
.review-pane .issue-list{max-height:76vh;}


/* redundant author-typed directory warning (structure step) */
/* Import-Aufräumen-Checkliste (Schritt 2) */
.cleanup{margin:.4rem 0 .9rem;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;}
.cleanup-head{padding:.5rem .8rem;background:#faf7f0;border-bottom:1px solid var(--line);font-size:.84rem;color:var(--muted);}
.step-done{color:#3f7a44;font-weight:600;margin:.4rem 0;}
.clitem{border-top:1px solid var(--line);}
.clitem:first-of-type{border-top:none;}
.clitem-head{cursor:pointer;display:flex;align-items:center;gap:.6rem;padding:.55rem .8rem;font-size:.92rem;}
.clitem-head::before{content:"▸";color:var(--muted);font-size:.8rem;flex:0 0 auto;transition:transform .12s;}
.clitem:not(.clitem-done) .clitem-head::before,.clitem-head.open::before{}
.clitem-head:hover{background:#faf8f3;}
.clitem-done .clitem-head{opacity:.85;}
.cl-t{flex:1;font-weight:600;}
.cl-s{flex:0 0 auto;font-size:.72rem;font-weight:700;padding:.1rem .5rem;border-radius:20px;white-space:nowrap;}
.cl-s.warn{background:#fbeed3;color:#8a6d1f;}
.cl-s.cfg{background:#eef1f5;color:#516079;}
.cl-s.done{background:#e3efe2;color:#3f7a44;}
.guide-gate{margin-left:.6rem;font-size:.82rem;color:#8a6d1f;font-weight:600;}
.cl-b{padding:.2rem .8rem .8rem 1.9rem;border-top:1px solid var(--line-soft,#eee);}
.cl-line{padding:.2rem 0;font-size:.9rem;}
.cl-actions{display:flex;gap:.4rem;justify-content:flex-end;align-items:center;margin-top:.5rem;}
/* Outline review: show the real text (before → after) and what each button does, in plain language. */
.ol-q{margin:.1rem 0 .5rem;font-weight:600;}
.ol-preview{display:flex;flex-direction:column;gap:.35rem;}
.ol-snip{display:flex;gap:.55rem;align-items:baseline;padding:.4rem .6rem;border-radius:8px;
  background:#f6f6f4;border:1px solid var(--line-soft,#eee);}
.ol-snip-label{flex:0 0 auto;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:#8a8a80;padding-top:.05rem;}
.ol-snip-text{min-width:0;font-size:.9rem;line-height:1.4;}
.ol-arrow{font-size:.8rem;font-weight:600;color:#6b7a52;padding-left:.2rem;}
.ol-snip-after{background:#eef5ea;border-color:#cfe3c4;}
.ol-rec{margin-right:auto;font-size:.78rem;color:#7a7a70;font-style:italic;}
.ol-hints{margin:.6rem 0 0;padding-left:1.1rem;font-size:.84rem;color:#555;line-height:1.5;}
.ol-hints li{margin:.15rem 0;}
.dir-warn{margin:.6rem 0;padding:.6rem .8rem;border:1px solid #e6c98a;background:#fdf6e6;border-radius:8px;}
.dir-warn-head{margin:0 0 .2rem;font-weight:700;color:#8a6d3b;}
.dir-conflict{margin:.6rem 0;padding:.6rem .8rem;border:1px solid #e6c98a;background:#fdf6e6;border-radius:8px;font-size:.9rem;}
.dir-conflict-head{margin:0 0 .2rem;font-weight:700;color:#8a6d3b;}
.dir-conflict p{margin:0 0 .45rem;}
.dir-warn-item{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  padding:.4rem 0;border-top:1px solid #eadfc4;flex-wrap:wrap;}
.dir-warn-txt{min-width:0;}
.dir-warn-btns{display:flex;gap:.4rem;flex:0 0 auto;}
.dir-warn-btns .btn.danger{background:#c0392b;color:#fff;border-color:#a93226;}

/* attached images on a block */
.bimg{display:flex;gap:.6rem;align-items:flex-start;background:#faf4e6;
  border:1px solid var(--line-soft);border-radius:8px;padding:.45rem;}
.bimg-left{display:flex;flex-direction:column;align-items:center;gap:.25rem;flex:0 0 auto;}
.bimg-thumb{width:72px;height:72px;object-fit:cover;border-radius:6px;border:1px solid var(--line);flex:0 0 auto;}
.bimg-move{display:flex;align-items:center;gap:.15rem;}
.bimg-pos{font-size:.68rem;color:var(--muted);min-width:2.1em;text-align:center;}
/* The file input is stretched over the label, the way .img-drop does it — the label is the button. */
.bimg-swap{position:relative;overflow:hidden;font-size:.68rem;white-space:nowrap;cursor:pointer;}
.bimg-swap input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}
/* Bild an den vorigen/nächsten Absatz hängen — deutlich getrennt von den ↑/↓ oben, die nur die Reihenfolge
   innerhalb desselben Absatzes ändern. */
.bimg-reassign{display:flex;flex-direction:column;align-items:center;gap:.12rem;}
.bimg-reassign-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:center;}
.bimg-reassign-btns{display:flex;gap:.15rem;}
.bimg-reassign-btns .mini{font-size:.66rem;white-space:nowrap;}
.bimg-fields{flex:1;display:flex;flex-direction:column;gap:.4rem;min-width:0;}
.bimg-field{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.bimg-field-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.bimg-field-inline{flex:0 0 auto;}
.bimg-opts{display:flex;align-items:flex-end;gap:.6rem;flex-wrap:wrap;}
.bimg-opts select{width:auto;}
.bimg-w{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--muted);white-space:nowrap;}
.bimg-w input[type=range]{width:90px;}
.bimg-dpi{font-size:.74rem;padding:.06rem .4rem;border-radius:999px;white-space:nowrap;}
.bimg-dpi.optimal{background:#dcebd7;color:#2f5b29;}
.bimg-dpi.okay{background:#e8efd3;color:#5c6b1e;}
.bimg-dpi.mittel{background:#fbf0d3;color:#8a6a16;}
.bimg-dpi.unbrauchbar{background:#f7dcd9;color:#9c2b22;}
.meta-subhead{margin:1.1rem 0 .4rem;font-size:.95rem;font-weight:700;}
.img-overview{margin:.5rem 0;border:1px solid var(--line);border-radius:9px;padding:.2rem .6rem;background:#fff;}
.img-overview>summary{cursor:pointer;padding:.35rem 0;font-size:.9rem;font-weight:600;}
.img-badge{font-size:.72rem;padding:.05rem .4rem;border-radius:999px;background:#eef4fb;color:#2c5a86;white-space:nowrap;}
.isrc-actions-top{display:flex;gap:.4rem;margin:.3rem 0 .5rem;}
.isrc-item{display:flex;align-items:center;gap:.6rem;padding:.4rem 0;border-top:1px solid #eadfc4;flex-wrap:wrap;}
.isrc-thumb{width:52px;height:52px;object-fit:cover;border-radius:5px;border:1px solid var(--line);flex:0 0 auto;}
.isrc-txt{display:flex;flex-direction:column;min-width:0;flex:1;gap:.1rem;}
.isrc-cap{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.isrc-src{font-size:.8rem;color:var(--muted);}
.isrc-warn-item{background:#fef3c7;border-radius:6px;padding-left:.4rem;padding-right:.4rem;}
.isrc-mismatch{font-size:.78rem;color:#92400e;white-space:normal;line-height:1.35;}
.isrc-picker{flex-basis:100%;margin:.3rem 0 .1rem;padding:.5rem .6rem;border:1px solid var(--line);border-radius:8px;background:var(--paper);}
.isrc-picker-grid{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem;}
.isrc-pick{display:flex;flex-direction:column;align-items:center;gap:.2rem;width:100px;padding:.3rem;border:1px solid var(--line);
  border-radius:7px;background:transparent;cursor:pointer;font-size:.72rem;text-align:center;color:var(--ink);}
.isrc-pick:hover{border-color:var(--accent);}
.isrc-pick.sel{border-color:var(--accent);background:#fdf6e3;}
.isrc-pick img{width:84px;height:60px;object-fit:cover;border-radius:4px;border:1px solid var(--line);}
.isrc-pick span{display:block;line-height:1.2;max-height:3.6em;overflow:hidden;}
.imgrole-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.4rem;flex-wrap:wrap;}
.imgrole-bulk{display:flex;gap:.35rem;}
.imgrole-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem;max-height:340px;overflow-y:auto;}
.imgrole-item{display:flex;align-items:center;gap:.6rem;padding:.3rem;border:1px solid var(--line);border-radius:8px;}
.imgrole-thumb{width:48px;height:48px;object-fit:cover;border-radius:5px;border:1px solid var(--line);flex:0 0 auto;}
.imgrole-txt{display:flex;flex-direction:column;min-width:0;flex:1;}
.imgrole-where{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.imgrole-cap{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.imgrole-sel{flex:0 0 auto;}
.imgrole-sel.is-fill{background:#eef4fb;}
.img-drop{position:relative;display:flex;align-items:center;justify-content:center;gap:.5rem;
  border:2px dashed var(--line);border-radius:9px;padding:.6rem;color:var(--muted);
  font-size:.85rem;cursor:pointer;background:#fffdf7;}
.img-drop:hover{border-color:var(--gold);background:#fff;color:var(--ink);}
.img-drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}

.chk-row{flex-direction:row !important;align-items:center;gap:.45rem;color:var(--ink) !important;}
.chk-row input[type=checkbox]{width:auto;}



.log{margin-top:1rem;background:#fff;border:1px solid var(--line);border-radius:10px;padding:.6rem;}
.log pre{max-height:300px;overflow:auto;font-size:.75rem;white-space:pre-wrap;}