*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}

:root{
  --ink:#1a1814;--cream:#f0ede4;--accent:#c8441a;--muted:#8a8478;
  --border:#e0dbd0;--shadow:0 4px 32px rgba(26,24,20,.13);
  --a4w:794px;--mg:63px;--a4h:1123px;
}

body{font-family:'DM Sans',sans-serif;background:var(--cream);color:var(--ink);display:flex;flex-direction:column}

/* ── Header ── */
#hdr{background:#1a1814;color:#faf9f6;display:flex;align-items:center;padding:0 16px;height:62px;flex-shrink:0;position:relative}
.logo{font-family:'DM Serif Display',serif;font-size:42px;color:#faf9f6;letter-spacing:-1px;line-height:1;flex-shrink:0}
.logo em{color:var(--accent);font-style:normal}
#dtitle{background:transparent;border:none;border-bottom:1px solid transparent;color:#faf9f6;font-family:'DM Sans',sans-serif;font-size:13px;opacity:.6;outline:none;width:220px;padding:2px 4px;transition:.2s;position:absolute;left:208px;bottom:10px}
#dtitle::placeholder{color:#faf9f6;opacity:.5}
#dtitle:focus{opacity:1;border-bottom-color:var(--accent)}
.hbtns{display:flex;gap:6px;margin-left:auto;align-items:center}
.hbtn{background:transparent;border:1px solid rgba(255,255,255,.25);color:#faf9f6;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;padding:5px 12px;border-radius:4px;cursor:pointer}
.hbtn:hover{background:rgba(255,255,255,.1)}
.hbtn.p{background:var(--accent);border-color:var(--accent)}
.hbtn.p:hover{background:#b03a14}

/* ── Mode toggle buttons — centered in header ── */
.mode-btns{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:4px;background:rgba(255,255,255,.08);border-radius:6px;padding:3px}
.mode-btn{background:transparent;border:none;color:rgba(250,249,246,.55);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;padding:5px 14px;border-radius:4px;cursor:pointer;transition:all .2s;letter-spacing:.5px}
.mode-btn:hover{color:#faf9f6}
.mode-btn.mode-active{background:var(--accent);color:#fff}

/* ── Toolbar locked in A4 mode ── */
body.a4-locked #tb .tbtn,
body.a4-locked #tb .sel{opacity:.3;pointer-events:none;cursor:default}

/* ── Toolbar ── */
#tb{background:#faf9f6;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 14px;height:42px;gap:1px;flex-shrink:0;overflow-x:auto;scrollbar-width:none}
#tb::-webkit-scrollbar{display:none}
.sep{width:1px;height:20px;background:var(--border);margin:0 5px;flex-shrink:0}
.tbtn{background:transparent;border:none;cursor:pointer;border-radius:5px;min-width:28px;height:28px;padding:0 4px;display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:12px;font-family:'DM Sans',sans-serif;flex-shrink:0}
.tbtn:hover{background:var(--cream)}.tbtn.on{background:var(--ink);color:#faf9f6}
.tbtn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sel{background:transparent;border:1px solid var(--border);border-radius:5px;color:var(--ink);font-family:'DM Sans',sans-serif;font-size:12px;padding:2px 5px;cursor:pointer;height:26px;outline:none;flex-shrink:0}

/* ── Layout ── */
#main{display:flex;flex:1;overflow:hidden}
#side{width:200px;background:#1e1c18;display:flex;flex-direction:column;padding:14px 0;flex-shrink:0}
.slbl{font-size:10px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;color:rgba(250,249,246,.3);margin:0 14px 7px}
.sdoc{padding:6px 10px;margin:0 7px;border-radius:5px;font-size:12px;color:rgba(250,249,246,.65);cursor:pointer}
.sdoc.on{background:rgba(200,68,26,.2);color:#faf9f6}
.snew{margin:10px 14px 0;background:rgba(250,249,246,.07);border:1px dashed rgba(250,249,246,.2);color:rgba(250,249,246,.5);border-radius:5px;padding:7px;font-size:12px;text-align:center;cursor:pointer;font-family:'DM Sans',sans-serif}
.snew:hover{color:#faf9f6}

#cv{flex:1;overflow-y:auto;background:var(--cream);padding:16px 24px 80px;display:flex;flex-direction:column;align-items:center}
#cv::-webkit-scrollbar{width:5px}
#cv::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
#pages{display:flex;flex-direction:column;align-items:center;gap:0}

/* ── Line selection gutter overlay ── */
.pg-gutter{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:79px;
  cursor:url('/cursor2.png') 2 1, default;
  z-index:10;
  user-select:none;
  -webkit-user-select:none;
}

/* ── Endless page (writing mode) ── */
.pg--endless{
  width:var(--a4w);
  min-height:calc(var(--a4h) - 38px);
  background:white;
  box-shadow:var(--shadow),0 0 0 1px rgba(0,0,0,.04);
  border-radius:2px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
}
.pg--endless .pg-body{
  flex:1;
  padding:0 var(--mg) 40px;
  padding-left:79px;
  position:relative;
}
.pg--endless .pg-body--normal{
  padding-top:68px;
}
.pg--endless .pg-ed{
  width:100%;
  min-height:900px;
  outline:none;
  caret-color:var(--accent);
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:12pt;
  line-height:1.25;
  color:var(--ink);
  word-wrap:break-word;
  cursor:text;
}

/* ── A4 pages (preview mode) ── */
#pages.a4-mode{gap:20px;margin-top:16px}
.pg--a4{
  width:var(--a4w);
  height:var(--a4h);
  background:white;
  box-shadow:var(--shadow),0 0 0 1px rgba(0,0,0,.04);
  border-radius:2px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
}
.pg--a4 .pg-body{
  flex:1;
  min-height:0;
  overflow:hidden;
  padding:0 var(--mg) 0;
}
.pg--a4 .pg-body--normal{
  padding-top:68px;
  padding-left:79px;
}
.pg--a4 .pg-body--brief-p1{
  padding-top:8px;
}
.pg--a4 .pg-body--cont{
  padding-top:20px;
  padding-left:79px;
}
/* Brief-Folgeseiten: original 70px linker Rand */
.pg--a4 .pg-body--brief-cont{
  padding-top:20px;
}
.pg--a4 .pg-ed{
  width:100%;
  height:100%;
  outline:none;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:12pt;
  line-height:1.25;
  color:var(--ink);
  word-wrap:break-word;
  overflow:hidden;
  padding-bottom:28px;
}

/* ── Brief page-1 header: Logo links + Kontakt rechts ── */
.pg-brief-hdr1{
  flex-shrink:0;
  padding:20px var(--mg) 0;
}

/* ── Brief page-2 header: zentriertes Logo ── */
.pg-brief-hdr2{
  flex-shrink:0;
  height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px var(--mg) 0;
}
.pg-brief-hdr2 img{
  height:66px;
  width:auto;
}

/* ── Shared editor styles ── */
.pg-ed *{margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important;}
.pg-ed:empty::before{content:'Beginne zu schreiben …';color:rgba(26,24,20,.18);pointer-events:none}
.pg-ed div,.pg-ed p{margin:0}
.pg-ed h1{font-family:'DM Serif Display',serif;font-size:24px;line-height:1.2;margin:0}
.pg-ed h2{font-family:'DM Serif Display',serif;font-size:18px;line-height:1.3;margin:0}
.pg-ed h3{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;margin:0}
.pg-ed ul,.pg-ed ol{margin:0 0 0 22px}
.pg-ed table{border-collapse:collapse;width:100%;font-size:10.5px}
.pg-ed td,.pg-ed th{border:1px solid var(--border);padding:4px 8px}
.pg-ed th{background:var(--cream);font-family:'DM Sans',sans-serif;font-size:10px;font-weight:600}

.betreff-line{font-size:15pt!important;font-weight:bold!important;line-height:1.6!important}
.betreff-line *{font-size:15pt!important;font-weight:bold!important}

.betreff-datum{display:flex!important;align-items:baseline;font-size:12pt;line-height:1.5;margin-bottom:8px}
.betreff-datum .betreff-line{flex:1}
.betreff-datum .datum-span{width:33%;text-align:left;flex-shrink:0;padding-left:3px;font-size:12pt!important;font-weight:normal!important}

/* ── Footer ── */
.pg-ftr{
  flex-shrink:0;height:38px;padding:6px var(--mg) 0;padding-left:79px;
  display:flex;align-items:flex-start;justify-content:space-between;
  border-top:1px solid var(--border);
  font-size:9px;color:var(--ink);font-family:'DM Sans',sans-serif;
}
.pg-fname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-num{flex-shrink:0;padding-left:16px}

/* ── A4 preview indicator ── */
#pages.a4-mode::before{
  content:'Vorschau – Zum Bearbeiten auf ∞ klicken';
  font-family:'DM Sans',sans-serif;
  font-size:11px;
  color:var(--muted);
  margin-bottom:12px;
  text-align:center;
  display:block;
  width:100%;
}

/* ── Ruler ── */
#ruler *{margin:0!important;padding:0!important;}
#ruler{
  position:fixed;left:-9999px;top:0;visibility:hidden;
  width:654px;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:12pt;line-height:1.25;
  color:var(--ink);word-wrap:break-word;
}
#ruler div,#ruler p{margin:0;line-height:1.25;font-size:12pt}
#ruler .r-empty{height:1.25em;display:block}
#ruler h1{font-family:'DM Serif Display',serif;font-size:24px;line-height:1.2;margin:0}
#ruler h2{font-family:'DM Serif Display',serif;font-size:18px;line-height:1.3;margin:0}
#ruler h3{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;margin:0}
#ruler ul,#ruler ol{margin:0 0 0 22px}

/* ── Status bar ── */
#sb{background:#1a1814;color:rgba(250,249,246,.42);font-family:'DM Sans',sans-serif;font-size:10.5px;padding:4px 18px;display:flex;gap:20px;flex-shrink:0;align-items:center}
.sv{color:rgba(250,249,246,.8);font-weight:500}
#saved{margin-left:auto;transition:color .3s}
#saved.ok{color:#6fcf97}

/* ── Modals ── */
.mo{display:none;position:fixed;inset:0;background:rgba(26,24,20,.65);z-index:999;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.mo.open{display:flex}
.md{background:white;border-radius:10px;padding:26px 28px;min-width:300px;max-width:92vw;box-shadow:0 24px 64px rgba(0,0,0,.28)}
.md h3{font-family:'DM Serif Display',serif;font-size:20px;margin-bottom:16px}
.mrow{display:flex;flex-direction:column;gap:4px;margin-bottom:13px}
.mrow label{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.mrow input{border:1px solid var(--border);border-radius:6px;padding:8px 10px;font-size:14px;font-family:'DM Sans',sans-serif;outline:none;width:100%;color:var(--ink)}
.mrow input:focus{border-color:var(--accent)}
.mbtns{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.mbtns button{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;padding:8px 18px;border-radius:6px;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--ink)}
.mbtns button.p{background:var(--accent);color:white;border-color:var(--accent)}
.fmtg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 4px}
.fmto{border:1.5px solid var(--border);border-radius:8px;padding:10px 12px;cursor:pointer;text-align:center;background:white;font-family:'DM Sans',sans-serif}
.fmto:hover,.fmto.sf{border-color:var(--accent)}
.fmto.sf{background:rgba(200,68,26,.06)}
.fmto span{font-size:20px;display:block;margin-bottom:3px}
.fmto b{font-size:13px;display:block}
.fmto small{font-size:10px;color:var(--muted)}

/* ── Mobile ── */
@media (max-width:600px){
  #dtitle{display:none}
  #side{display:none!important}
  #hdr{padding:0 10px;height:52px}
  .logo{font-size:28px}
  .hbtn{font-size:10px;padding:3px 7px}
  #tb{padding:0 6px;height:38px}
  .sel{font-size:11px;padding:1px 3px;height:24px}
  .tbtn{min-width:24px;height:24px}
  #cv{padding:8px 0 60px}
  #pages{width:100%}
  .pg--endless{width:100%!important;border-radius:0;box-shadow:none;border-bottom:1px solid var(--border)}
  .pg--endless .pg-body{padding:20px 16px 40px}
  .pg--a4{width:100%!important;border-radius:0;box-shadow:none}
  .pg-ed{font-size:14px!important;line-height:1.6!important}
  .pg-ftr{padding:6px 16px 0}
  #sb{font-size:10px;padding:3px 10px;gap:10px}
  .mode-btn{font-size:10px;padding:3px 7px}
}
@media (min-width:601px) and (max-width:900px){
  #side{width:94px;padding:10px 0}
  .slbl{font-size:9px;margin:0 7px 5px}
  .sdoc{font-size:10px;padding:4px 6px;margin:0 4px}
  .snew{font-size:10px;margin:6px 7px 0;padding:5px}
}

/* ── Leerzeilen im Druck sichtbar ── */
@media print {
  .pg-ed br { display: block; margin-bottom: 1.25em; }
}
@media print{
  @page { size:A4; margin:0; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body > *:not(#main) { display:none!important; }
  #main > *:not(#cv) { display:none!important; }
  #cv > *:not(#pages) { display:none!important; }
  #hdr,#tb,#side,#sb,#ruler { display:none!important; }
  body,html { height:auto!important; overflow:visible!important; }
  #main { display:block!important; overflow:visible!important; height:auto!important; }
  #cv { display:block!important; overflow:visible!important; padding:0!important; background:white!important; height:auto!important; }
  #pages { display:block!important; margin:0!important; padding:0!important; }
  #pages.a4-mode::before { display:none!important; }
  .pg--endless { display:none!important; visibility:hidden!important; }

  /* ── A4-Seite: blockbasiert, kein Flexbox ── */
  .pg--a4 {
    display:block!important;
    position:relative!important;
    width:210mm!important;
    height:297mm!important;
    overflow:hidden!important;
    margin:0!important;
    padding:0!important;
    background:white!important;
    box-shadow:none!important;
    border-radius:0!important;
    page-break-after:always!important;
    break-after:page!important;
    page-break-inside:avoid!important;
    break-inside:avoid!important;
  }
  .pg--a4:last-child { page-break-after:avoid!important; break-after:avoid!important; }

  /* ── pg-body: block, kein flex ── */
  .pg--a4 .pg-body {
    display:block!important;
    margin:0!important;
    padding:0 20mm!important;
    overflow:hidden!important;
  }

  /* ── Normale Seite (Seite 1): padding-top 14mm ── */
  .pg--a4 .pg-body--normal {
    padding-top:14mm!important;
    padding-left:15mm!important;
  }

  /* ── Folgeseiten normal: padding-top 10mm ── */
  .pg--a4 .pg-body--cont {
    padding-top:10mm!important;
    padding-left:15mm!important;
  }

  /* ── Brief-Folgeseiten: original 20mm linker Rand ── */
  .pg--a4 .pg-body--brief-cont {
    padding-top:15mm!important;
  }

  /* ── Editor: feste Höhe, kein flex ── */
  /* normal: 297 - 14 (top) - 18 (footer) = 265mm */
  .pg--a4 .pg-body--normal .pg-ed {
    display:block!important;
    width:175mm!important;
    height:265mm!important;
    overflow:hidden!important;
  }

  /* cont: 297 - 10 (top) - 18 (footer) = 269mm */
  .pg--a4 .pg-body--cont .pg-ed {
    display:block!important;
    width:175mm!important;
    height:269mm!important;
    overflow:hidden!important;
  }

  /* brief-cont: original 170mm */
  .pg--a4 .pg-body--brief-cont .pg-ed {
    display:block!important;
    width:175mm!important;
    height:248mm!important;
    overflow:hidden!important;
  }

  /* ── Footer (nur bei normalen Dokumenten, Briefe haben keinen) ── */
  .pg-ftr {
    display:block!important;
    position:static!important;
    float:none!important;
    flex-shrink:unset!important;
    width:175mm!important;
    margin:10mm 20mm 0!important;
    margin-left:15mm!important;
    padding:3mm 0 0!important;
    height:auto!important;
    font-size:8pt!important;
    border-top:1px solid var(--border)!important;
  }

  /* ── Brief-Layout: unverändert lassen ── */
  .pg-brief-hdr1 { padding:20px 20mm 0!important; overflow:visible!important; }
  .pg-brief-hdr1 img { display:block!important; }
  .pg-brief-hdr2 { padding:16px 20mm 0!important; }
}