/* RentnerBüro – Gestaltung
   Farbwelten: t-mix (Salbei + Nordisch, Standard), t-salbei, t-nordisch */

@font-face{font-family:"Nunito";src:url("../vendor/nunito/nunito-latin-wght-normal.woff2") format("woff2");font-weight:200 1000;font-display:swap}

/* Briefschriften = dieselben Dateien wie im PDF, damit Zeilenumbrüche übereinstimmen */
@font-face{font-family:"RB Arial";src:url("../fonts/LiberationSans-Regular.ttf")}
@font-face{font-family:"RB Arial";src:url("../fonts/LiberationSans-Bold.ttf");font-weight:700}
@font-face{font-family:"RB Arial";src:url("../fonts/LiberationSans-Italic.ttf");font-style:italic}
@font-face{font-family:"RB Arial";src:url("../fonts/LiberationSans-BoldItalic.ttf");font-weight:700;font-style:italic}
@font-face{font-family:"RB Calibri";src:url("../fonts/Carlito-Regular.ttf")}
@font-face{font-family:"RB Calibri";src:url("../fonts/Carlito-Bold.ttf");font-weight:700}
@font-face{font-family:"RB Calibri";src:url("../fonts/Carlito-Italic.ttf");font-style:italic}
@font-face{font-family:"RB Calibri";src:url("../fonts/Carlito-BoldItalic.ttf");font-weight:700;font-style:italic}
@font-face{font-family:"RB Times";src:url("../fonts/LiberationSerif-Regular.ttf")}
@font-face{font-family:"RB Times";src:url("../fonts/LiberationSerif-Bold.ttf");font-weight:700}
@font-face{font-family:"RB Times";src:url("../fonts/LiberationSerif-Italic.ttf");font-style:italic}
@font-face{font-family:"RB Times";src:url("../fonts/LiberationSerif-BoldItalic.ttf");font-weight:700;font-style:italic}
@font-face{font-family:"RB Verdana";src:url("../fonts/DejaVuSans-Regular.ttf")}
@font-face{font-family:"RB Verdana";src:url("../fonts/DejaVuSans-Bold.ttf");font-weight:700}
@font-face{font-family:"RB Verdana";src:url("../fonts/DejaVuSans-Italic.ttf");font-style:italic}
@font-face{font-family:"RB Verdana";src:url("../fonts/DejaVuSans-BoldItalic.ttf");font-weight:700;font-style:italic}
@font-face{font-family:"RB Georgia";src:url("../fonts/Gelasio-Regular.ttf")}
@font-face{font-family:"RB Georgia";src:url("../fonts/Gelasio-Bold.ttf");font-weight:700}
@font-face{font-family:"RB Georgia";src:url("../fonts/Gelasio-Italic.ttf");font-style:italic}
@font-face{font-family:"RB Georgia";src:url("../fonts/Gelasio-BoldItalic.ttf");font-weight:700;font-style:italic}

/* ---------- Farbwelten ---------- */
body.t-mix{
  --kopf1:#2b3a4a;--kopf2:#46607a;--kopf3:#6f8aa3;--logo1:#b7cdb9;--logo2:#6f927c;
  --haupt1:#f3d9a4;--haupt2:#e2b56d;--haupt-text:#4a3413;--haupt-schatten:rgba(190,140,70,.35);
  --tisch1:#f1efe8;--tisch2:#e6e4dc;
  --tx:#5f7f6d;--tx-l:#eef3ee;--tx-an1:#83a28f;--tx-an2:#5c7d6a;--tx-schatten:rgba(92,125,106,.32);
  --br:#5b7896;--br-l:#edf2f7;--br-an1:#7f9bb8;--br-an2:#58769a;--br-schatten:rgba(88,118,154,.32);
  --zoom:#5f7f6d}
body.t-salbei{
  --kopf1:#2f4a3f;--kopf2:#4b6b5c;--kopf3:#7a9383;--logo1:#b7cdb9;--logo2:#6f927c;
  --haupt1:#f3d9a4;--haupt2:#e2b56d;--haupt-text:#4a3413;--haupt-schatten:rgba(190,140,70,.35);
  --tisch1:#f1efe8;--tisch2:#e7e4da;
  --tx:#5f7f6d;--tx-l:#eef3ee;--tx-an1:#83a28f;--tx-an2:#5c7d6a;--tx-schatten:rgba(92,125,106,.32);
  --br:#a0775a;--br-l:#f7efe7;--br-an1:#c19a7b;--br-an2:#9a7152;--br-schatten:rgba(154,113,82,.3);
  --zoom:#6f927c}
body.t-nordisch{
  --kopf1:#2b3a4a;--kopf2:#46607a;--kopf3:#6f8aa3;--logo1:#b9cde0;--logo2:#6f8fad;
  --haupt1:#f2c9b4;--haupt2:#e29f86;--haupt-text:#4b2416;--haupt-schatten:rgba(214,130,100,.32);
  --tisch1:#eef1f4;--tisch2:#e3e8ed;
  --tx:#5b7896;--tx-l:#edf2f7;--tx-an1:#7f9bb8;--tx-an2:#58769a;--tx-schatten:rgba(88,118,154,.32);
  --br:#5f8f8b;--br-l:#ebf4f3;--br-an1:#86b0ac;--br-an2:#5b8a86;--br-schatten:rgba(91,138,134,.3);
  --zoom:#5b7896}

:root{--ink:#1e293b;--muted:#64748b}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Nunito,system-ui,sans-serif;color:var(--ink);background:linear-gradient(180deg,var(--tisch1) 0%,var(--tisch2) 100%);min-height:100vh;-webkit-text-size-adjust:100%}
button{font-family:inherit}

/* ---------- Kopfzeile ---------- */
.kopf{background:linear-gradient(120deg,var(--kopf1) 0%,var(--kopf2) 55%,var(--kopf3) 100%);color:#fff;
  padding:calc(12px + env(safe-area-inset-top)) 22px 56px;display:flex;align-items:center;gap:12px;position:relative;overflow:clip}
.kopf::after{content:"";position:absolute;right:-80px;top:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),rgba(255,255,255,0) 70%);pointer-events:none}
.marke{display:flex;align-items:center;gap:11px;flex-shrink:1;min-width:0}
.marke-text{min-width:0}
.logo{width:44px;height:44px;border-radius:13px;background:linear-gradient(145deg,var(--logo1),var(--logo2));display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.35)}
.logo i{font-size:25px}
.marke b{font-size:21px;font-weight:800;letter-spacing:.2px}
.marke small{display:block;font-size:13px;opacity:.85;font-weight:600;white-space:nowrap;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.nav{display:flex;gap:2px;margin-left:4px;background:rgba(255,255,255,.1);padding:5px;border-radius:15px;border:1px solid rgba(255,255,255,.15)}
.nav button{all:unset;white-space:nowrap;cursor:pointer;display:flex;align-items:center;gap:6px;padding:9px 11px;border-radius:11px;font-weight:700;font-size:15px;color:#fff}
.nav button.nur-symbol{padding:9px 10px}
.nav button i{font-size:20px}
.nav button:hover,.nav button:focus-visible{background:rgba(255,255,255,.14)}
.leer{flex:1}
.fertig{display:flex;gap:8px;position:relative;z-index:1}
.fertig button{all:unset;white-space:nowrap;cursor:pointer;display:flex;align-items:center;gap:7px;padding:11px 13px;border-radius:13px;font-weight:700;font-size:15px;color:#fff;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2)}
.fertig button:hover,.fertig button:focus-visible{background:rgba(255,255,255,.22)}
.fertig button i{font-size:21px}
.fertig .haupt{background:linear-gradient(145deg,var(--haupt1),var(--haupt2));border:none;color:var(--haupt-text);box-shadow:0 6px 18px var(--haupt-schatten),inset 0 1px 0 rgba(255,255,255,.5)}
.fertig .haupt:hover{background:linear-gradient(145deg,var(--haupt1),var(--haupt2));filter:brightness(1.05)}

/* ---------- Werkzeugleiste ---------- */
.leiste{margin:-40px 22px 0;position:sticky;top:8px;z-index:10;background:#fff;border-radius:22px;box-shadow:0 14px 38px rgba(15,23,42,.13),0 2px 6px rgba(15,23,42,.06);padding:12px;display:flex;flex-direction:column;gap:10px}
.zeile{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.gruppe{border-radius:16px;padding:7px 9px 9px;display:flex;flex-direction:column;gap:6px}
.gruppe .titel{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;letter-spacing:.3px;padding-left:3px;white-space:nowrap}
.gruppe .titel i{font-size:15px}
.knoepfe{display:flex;gap:6px;align-items:stretch}
.k{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:60px;height:60px;padding:0 9px;border-radius:13px;background:#fff;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;
  box-shadow:0 1px 2px rgba(15,23,42,.08),0 0 0 1px rgba(15,23,42,.07);transition:transform .12s,box-shadow .15s,background .15s;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.k i{font-size:23px}
.k.schmal{min-width:52px}
.k:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(15,23,42,.12),0 0 0 1px rgba(15,23,42,.09)}
.k:active{transform:translateY(0) scale(.97)}
.k:focus-visible{outline:3px solid var(--br-an1);outline-offset:2px}
.k .aa{font-size:22px;line-height:1}
.wert{display:flex;align-items:center;justify-content:center;min-width:64px;font-size:18px;font-weight:800;background:#fff;border-radius:13px;box-shadow:inset 0 0 0 1px rgba(15,23,42,.07)}
.k.datum{flex-direction:row;gap:9px;min-width:160px;font-size:16px;position:relative}
.k.datum input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0;margin:0;font-size:16px}

.g-text{background:var(--tx-l)} .g-text .titel{color:var(--tx)} .g-text .k i{color:var(--tx)}
.g-brief{background:var(--br-l)} .g-brief .titel{color:var(--br)} .g-brief .k i{color:var(--br)}
.g-edit{background:#f1f5f9} .g-edit .titel{color:var(--muted)} .g-edit .k i{color:#475569}
.g-text .k.an{background:linear-gradient(145deg,var(--tx-an1),var(--tx-an2));color:#fff;box-shadow:0 6px 14px var(--tx-schatten),inset 0 1px 0 rgba(255,255,255,.3)}
.g-brief .k.an{background:linear-gradient(145deg,var(--br-an1),var(--br-an2));color:#fff;box-shadow:0 6px 14px var(--br-schatten),inset 0 1px 0 rgba(255,255,255,.3)}
.k.an i{color:#fff !important}
.k.gesperrt{opacity:.45}

/* ---------- Schreibtisch + Blatt ---------- */
.tisch{padding:26px 22px 120px;overflow-x:auto}
.blatt-huelle{width:max-content;margin:0 auto;zoom:var(--zoom-faktor,1)}
.blatt{
  --brief-schrift:"RB Arial";--brief-pt:11pt;--brief-lh:1.2848;
  position:relative;width:210mm;min-height:297mm;background:#fff;color:#111;
  font-family:var(--brief-schrift),sans-serif;font-size:var(--brief-pt);line-height:var(--brief-lh);
  box-shadow:0 18px 40px rgba(15,23,42,.16),0 2px 6px rgba(15,23,42,.08);border-radius:3px;
  -webkit-font-smoothing:antialiased;font-kerning:normal}
.falz{position:absolute;left:0;width:6mm;border-top:1px solid #aaa;pointer-events:none}

.feld{outline:none;white-space:pre-wrap;overflow-wrap:break-word;border-radius:3px;min-height:calc(var(--brief-pt) * var(--brief-lh));
  transition:background .15s,box-shadow .15s;cursor:text;caret-color:var(--br-an2)}
.feld:hover{background:rgba(111,143,173,.06)}
.feld:focus{background:rgba(111,143,173,.09);box-shadow:0 0 0 2px rgba(111,143,173,.35)}
.feld.leer::before{content:attr(data-platzhalter);color:#9aa5b1;pointer-events:none;white-space:pre-wrap}
.feld.leer{position:relative}
.feld.leer::before{position:absolute;left:0;top:0;right:0}

.absender{position:absolute;left:22mm;top:15mm;width:95mm}
.adressblock{position:absolute;width:80mm;top:var(--adr-top,55mm)}
.adressblock.fenster-l{left:22mm;width:79mm}
.adressblock.fenster-r{left:118mm}
.rueckzeile{font-size:var(--rueck-pt,7pt);line-height:var(--rueck-lh,1.2848);text-decoration:underline;white-space:nowrap;overflow:hidden;text-overflow:clip;display:none}
.vermerk{font-weight:700;display:none}
.vermerk,.adressblock .empfaenger{font-size:var(--adr-pt,var(--brief-pt));line-height:var(--adr-lh,var(--brief-lh))}
.adressblock .empfaenger{min-height:calc(var(--adr-pt,var(--brief-pt)) * var(--adr-lh,var(--brief-lh)))}
.mit-einschreiben .rueckzeile{display:block;height:calc(7pt * var(--rueck-lh,1.1172));margin-bottom:calc(7pt * var(--rueck-lh,1.1172))}
.mit-einschreiben .vermerk{display:block}
.warnung{position:absolute;display:none;align-items:center;gap:6px;font:700 12px/1.3 Nunito,sans-serif;color:#7a4b0b;background:#fdf1d8;border:1px solid #f0cf8a;border-radius:10px;padding:6px 10px;max-width:80mm}
.warnung.sichtbar{display:flex}
.warnung i{font-size:16px}
.ortdatum{position:absolute;left:22mm;top:95mm;white-space:nowrap}
.fluss{position:absolute;left:22mm;right:20mm;top:107mm}
.betreff{font-weight:700}
.brieftext{text-align:var(--ausrichtung,left)}
.leerzeile{height:calc(var(--brief-pt) * var(--brief-lh))}
.unterschrift-platz{height:16mm;display:flex;align-items:center}
.unterschrift-platz img{max-height:15mm;max-width:60mm;display:none;object-fit:contain}
.mit-unterschrift .unterschrift-platz img[src]{display:block}
.beilagen-block{display:none}
.mit-beilagen .beilagen-block{display:block}
.beilagen-titel{font-weight:400}

.seitenmarke{position:absolute;left:0;right:0;height:0;border-top:2px dashed #c3ccd6;pointer-events:none}
.seitenmarke span{position:absolute;right:6mm;top:-11px;background:#fff;padding:0 8px;font:700 12px/20px Nunito,sans-serif;color:#7b8794;border-radius:10px;box-shadow:0 0 0 1px #d6dde5}

/* ---------- Zoom-Kapsel ---------- */
.zoomkapsel{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:20;background:#fff;border-radius:18px;padding:8px;box-shadow:0 12px 30px rgba(15,23,42,.2);display:flex;gap:6px;align-items:center}
.zoomkapsel .k i{color:var(--zoom)}

/* ---------- Meldung + Dialog ---------- */
.toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translate(-50%,30px);opacity:0;pointer-events:none;background:#243140;color:#fff;font-weight:700;font-size:16px;padding:14px 20px;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.25);transition:opacity .2s,transform .2s;z-index:50;max-width:min(560px,90vw);text-align:center}
.toast.sichtbar{opacity:1;transform:translate(-50%,0)}
.dialog-grund{position:fixed;inset:0;background:rgba(20,28,38,.45);display:flex;align-items:center;justify-content:center;z-index:60;padding:20px}
.dialog-grund[hidden]{display:none}
.dialog{background:#fff;border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.3);padding:26px 28px;width:min(580px,100%);text-align:center}
.dialog-symbol{width:64px;height:64px;border-radius:18px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,var(--tx-an1),var(--tx-an2));color:#fff;box-shadow:0 8px 20px var(--tx-schatten)}
.dialog-symbol i{font-size:34px}
.dialog h2{margin:6px 0 8px;font-size:22px;font-weight:800}
.dialog-inhalt{font-size:17px;line-height:1.5;color:#334155}
.dialog-inhalt .dateiname{display:inline-block;margin-top:6px;font-weight:800;background:#f1f5f9;border-radius:10px;padding:6px 12px;word-break:break-word}
.dialog-inhalt ol{text-align:left;margin:12px auto 0;padding-left:24px;max-width:400px}
.dialog-knoepfe{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.dk{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;padding:14px 22px;border-radius:14px;font-weight:800;font-size:17px;background:#f1f5f9;color:var(--ink)}
.dk i{font-size:22px}
.dk.primaer{background:linear-gradient(145deg,var(--haupt1),var(--haupt2));color:var(--haupt-text);box-shadow:0 6px 18px var(--haupt-schatten)}
.dk:focus-visible{outline:3px solid var(--br-an1);outline-offset:2px}
.auswahl{display:flex;gap:10px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.auswahl .k{min-width:110px}
.auswahl .k.an{background:linear-gradient(145deg,var(--br-an1),var(--br-an2));color:#fff}

/* Unterschrift zeichnen */
.zeichenflaeche{width:100%;height:190px;border-radius:14px;background:#fbfbf8;box-shadow:inset 0 0 0 2px #dfe3e8;touch-action:none;display:block;margin-top:12px}

/* ---------- Listen: Meine Briefe, Adressen ---------- */
.dialog.breit{width:min(820px,100%);text-align:left}
.dialog.breit h2,.dialog.breit .dialog-symbol{text-align:center}
.dialog.breit .dialog-knoepfe{justify-content:flex-end}
.liste-kopf{display:flex;gap:10px;align-items:stretch;margin-top:6px;flex-wrap:wrap}
.suche{flex:1;min-width:240px;display:flex;align-items:center;gap:8px;background:#f1f5f9;border-radius:14px;padding:0 14px;height:60px}
.suche i{font-size:22px;color:var(--muted)}
.suche input{all:unset;flex:1;font-size:17px;font-weight:600;color:var(--ink)}
.suche input::placeholder{color:#94a3b8;font-weight:500}
.k.liste-knopf{flex-direction:row;gap:8px;font-size:15px;padding:0 16px}
.k.liste-knopf i{color:var(--br)}
.liste{margin-top:12px;max-height:min(52vh,520px);overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:2px}
.eintrag{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(15,23,42,.08)}
.eintrag.offen{box-shadow:0 0 0 2px var(--tx-an1);background:var(--tx-l)}
.e-datum{width:62px;flex-shrink:0;text-align:center;border-radius:12px;background:var(--br-l);color:var(--br);padding:6px 0;line-height:1.2}
.e-datum b{display:block;font-size:17px}
.e-datum span{font-size:12px;font-weight:700}
.e-symbol{width:48px;height:48px;flex-shrink:0;border-radius:12px;background:var(--br-l);color:var(--br);display:flex;align-items:center;justify-content:center}
.e-symbol i{font-size:24px}
.e-text{flex:1;min-width:0}
.e-text b{display:block;font-size:16.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.e-text span{display:block;font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.e-text em{font-style:normal;color:var(--tx);font-weight:800}
.e-knoepfe{display:flex;gap:6px;flex-shrink:0}
.e-knoepfe .k{height:54px;min-width:54px}
.e-knoepfe .k i{color:var(--br)}
.e-knoepfe .k-loeschen i{color:#b4533b}
.liste-leer{padding:30px 10px;text-align:center;color:var(--muted);font-size:16px;font-weight:600}
.liste-hinweis{margin-top:10px;font-size:13.5px;color:var(--muted)}
.auswahl label.k{flex-direction:row;gap:8px}

/* ---------- Hochformat iPad ---------- */
@media (max-width:1100px){
  .nav button span{display:none}
  .nav button{padding:9px 10px}
  .marke small{max-width:150px}
  .kopf{padding-left:14px;padding-right:14px}
  .leiste{margin-left:12px;margin-right:12px;position:relative;top:auto} /* Hochformat: Leiste scrollt mit, damit Platz zum Schreiben bleibt */
  .tisch{padding-left:12px;padding-right:12px}
}