/* BWS Uster Lebenslauf-Generator – css/templates.css: Lebenslauf-Seite (Basis und je Vorlage), Titelblätter, Bewerbungsschreiben, Druck (Abschnitte 2–4) */

/* =========================================================
   2. Lebenslauf-Seite (A4) – gemeinsame Basis
   Variablen (von der Fit-Logik gesetzt): --fs Schriftgrösse, --sp Abstandsfaktor, --ph Fotogrösse,
   --nk Namensverkleinerung, --xg Zusatzabstand pro Abschnitt (pro Spalte).
   Farben: --c1 Fläche, --c2 Akzent; abgeleitet: --c2-text, --c2-soft, --c1-light, --side-text, --side-muted, --side-head, --rule.
   Schrift: --head-font (Name, Titel), --body-font.
   ========================================================= */
.page{
  --fs:10.5pt; --sp:1; --ph:1; --xg:0px;
  --c1:#BFC6D8; --c2:#2F3446; --c2-text:#2F3446; --c2-soft:rgba(47,52,70,.55); --c1-light:#EEF0F4;
  --side-text:#1F2230; --side-muted:rgba(31,34,48,.72); --side-head:#2F3446; --rule:#BFC6D8;
  --head-font:Georgia,serif; --body-font:Georgia,serif;
  width:210mm;height:297mm;background:#fff;overflow:hidden;display:flex;
  color:#232633;font-family:var(--body-font);font-size:var(--fs);line-height:1.38;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.page .col{overflow:hidden;min-width:0}
.page .col-inner{display:flow-root}
.page .ph{color:#9AA0AE}
.page .name{--nb:2.75;--nk:1;font-family:var(--head-font);font-size:calc(var(--fs)*var(--nb)*var(--nk));white-space:nowrap;margin:0;font-weight:400;line-height:1.1}
.page .name.wrap{white-space:normal}
.page .sec-title{font-family:var(--head-font);font-size:calc(var(--ts,var(--fs))*var(--tk,1));margin-top:calc(var(--st-top,6mm) + var(--xg,0px))}
.page .subtitle{font-size:calc(var(--ss,var(--fs))*var(--tk,1))}
.page .fit1{white-space:nowrap}
.page .fit1.wrap{white-space:normal}
.page .sec-title.sec-first{margin-top:calc(var(--st-first,var(--st-top,6mm)) + var(--xg,0px)*.6)}
.page .bul{list-style:none;margin:1.2mm 0 0;padding:0}
.page .bul li{position:relative;padding-left:3.2mm;font-size:calc(var(--fs)*.86);line-height:1.38;margin-top:.7mm;color:#4A4E5C}
.page .bul li::before{content:"•";position:absolute;left:0;top:0;color:var(--bullet,var(--c2-text))}
.page .slist{list-style:none;margin:0;padding:0}
.page .slist li{position:relative;padding-left:3.2mm;font-size:calc(var(--fs)*.9);line-height:1.4;margin-bottom:calc(1.4mm*var(--sp))}
.page .slist li::before{content:"•";position:absolute;left:0;color:var(--bullet,var(--c2-text))}
.page .slist.plain li{padding-left:0}
.page .slist.plain li::before{content:none}
.page .slist.two{columns:2;column-gap:6mm}
.page .fam .fsub{font-weight:700;margin-top:calc(2.2mm*var(--sp))}
.page .fam .fsub:first-child{margin-top:0}
.page .contact{list-style:none;margin:0;padding:0}
.page .contact li{display:flex;gap:2.6mm;align-items:flex-start;font-size:calc(var(--fs)*.88);line-height:1.4;margin-bottom:calc(1.9mm*var(--sp))}
.page .nb{white-space:nowrap}
.page .ct{display:block;min-width:0;flex:1 1 auto;white-space:nowrap;overflow:hidden;font-size:calc(1em*var(--ck,1))}
.page .ct.wrap{white-space:normal;overflow:visible}
.page .ct.hard .nb{white-space:normal;overflow-wrap:anywhere}
.page .ct .wb{display:none}
.page .ct.wrap .wb{display:inline}
.page .ct.wrap .wb::after{content:"\200B"}
.page .contact svg{width:3.6mm;height:3.6mm;flex:none;margin-top:.5mm;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--icon,currentColor)}
.page .lines div{font-size:calc(var(--fs)*.9*var(--ck,1));line-height:1.5}   /* --ck: fitText verkleinert zu lange Kontaktzeilen */
.page .kv{margin-bottom:calc(2.4mm*var(--sp));font-size:calc(var(--fs)*.9);line-height:1.4}
.page .kv b{display:block}
.page .photo{overflow:hidden;background:rgba(127,127,127,.15)}
.page .photo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.page .photo.empty{display:flex;align-items:center;justify-content:center;border:1px dashed rgba(0,0,0,.3);font-size:calc(var(--fs)*.85);font-style:italic;color:inherit;opacity:.7}
.page .photo.round{border-radius:50%}
.page .sep{padding:0 .3em;opacity:.55}
.page .lvl{opacity:.72}
.page .lbar{height:1.3mm;background:rgba(127,127,127,.28);border-radius:1mm;margin-top:1.1mm;overflow:hidden}
.page .lbar i{display:block;height:100%;background:currentColor;opacity:.85;border-radius:1mm}
.page .lang{margin-bottom:calc(2.2mm*var(--sp));font-size:calc(var(--fs)*.9)}
.page .lang .row{display:flex;justify-content:space-between;gap:3mm}
.page .e-title{font-weight:700;line-height:1.3}
.page .e-org{font-weight:700;font-size:calc(var(--fs)*.88);margin-top:.3mm}
.page .e-org .place{font-weight:400;opacity:.78}
.page .e-dates{font-size:calc(var(--fs)*.86);opacity:.75}
.page .about{margin:0;font-size:calc(var(--fs)*.9);line-height:1.5}
.page .refs{display:grid;grid-template-columns:repeat(auto-fit,minmax(44mm,1fr));gap:calc(3mm*var(--sp)) 5mm}
.page .ref{font-size:calc(var(--fs)*.88);line-height:1.4;color:#3A3E4C}
.page .ref .rn{font-weight:700;color:#232633}
.page .col-side .ref,.page .col-side .ref .rn{color:inherit}
.page .col-side .refs{grid-template-columns:minmax(0,1fr)}   /* minmax(0,…): eine lange E-Mail macht die Seitenspalte nicht breiter */

/* === Vorlage 1: Klassisch – Seitenleiste rechts, Serifen ============ */
.tpl-t1 .col-main{flex:0 0 62%;padding:calc(13mm*var(--sp)) 8mm calc(9mm*var(--sp)) 13mm;position:relative}
.tpl-t1 .col-main::before{content:"";position:absolute;left:13.15mm;top:0;bottom:0;width:.35mm;background:var(--c2-line)}
.tpl-t1 .name-block,.tpl-t1 .col-main .sec-title,.tpl-t1 .col-main .about{margin-left:2.9mm}
.tpl-t1 .col-side{flex:0 0 38%;background:var(--c1);color:var(--side-text);padding:calc(11mm*var(--sp)) 8mm calc(9mm*var(--sp));--bullet:var(--side-head);--icon:var(--side-head)}
.tpl-t1 .name-block{display:block;text-align:left;margin-bottom:calc(2mm*var(--sp))}
.tpl-t1 .name{letter-spacing:.06em;text-transform:uppercase;line-height:1.05;color:var(--c2-text)}
.tpl-t1 .name.wrap{text-align:left}
.tpl-t1 .subtitle{font-style:italic;--ss:calc(var(--fs)*1.05);margin-top:1.2mm;color:#4A4E5C}
.tpl-t1 .sec-title{--st-top:calc(7mm*var(--sp));--st-first:calc(7mm*var(--sp));--ts:calc(var(--fs)*.8);font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--c2-text);margin-bottom:calc(3.5mm*var(--sp))}
.tpl-t1 .col-side .sec-title{--st-top:calc(6mm*var(--sp));--st-first:calc(6mm*var(--sp));color:var(--side-head)}
.tpl-t1 .entry{display:grid;grid-template-columns:23mm minmax(0,1fr);column-gap:3mm;margin-bottom:calc(3.5mm*var(--sp))}
.tpl-t1 .dates{border-left:.7mm solid var(--c2-soft);padding-left:2.2mm;font-size:calc(var(--fs)*.88);line-height:1.4;color:#3A3E4C;align-self:start}
.tpl-t1 .e-title{letter-spacing:.09em;text-transform:uppercase;font-size:calc(var(--fs)*.9)}
.cv.tpl-t1 .photo{width:calc(82%*var(--ph));aspect-ratio:3/4;margin:0 auto calc(6mm*var(--sp))}
.tpl-t1 .ref{border-left:.7mm solid var(--c2-soft);padding-left:2.2mm}

/* === Vorlage 2: Bündig – Seitenleiste links, Foto randlos =========== */
.tpl-t2 .col-side{flex:0 0 31%;background:var(--c1);color:var(--side-text);padding:0 0 calc(8mm*var(--sp));--bullet:var(--side-head)}
.cv.tpl-t2 .photo{width:100%;height:calc(86.7mm*var(--ph));margin:0 0 calc(7mm*var(--sp))}
.tpl-t2 .side-body{padding:0 6mm 0 7mm}
.tpl-t2 .col-side .sec-title{--st-top:calc(7mm*var(--sp));--st-first:calc(1mm*var(--sp));--ts:calc(var(--fs)*1.02);letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--side-head);border-bottom:.4mm solid var(--side-head);padding-bottom:1.4mm;margin-bottom:calc(3.5mm*var(--sp))}
.tpl-t2 .col-main{flex:1;padding:calc(13mm*var(--sp)) 12mm calc(9mm*var(--sp)) 10mm}
.tpl-t2 .name{--nb:2.7;font-weight:300;letter-spacing:.3em;text-transform:uppercase;line-height:1.12;color:var(--c2-text)}
.tpl-t2 .name .ln{opacity:.55}
.page.tpl-t2 .subtitle{display:block;margin:calc(3mm*var(--sp)) -12mm 0 0;padding:1.6mm 0 1.6mm 3mm;background:var(--c1);color:var(--side-text)!important;text-transform:uppercase;letter-spacing:.22em;--ss:calc(var(--fs)*1.05)}
.tpl-t2 .col-main .sec-title{--st-top:calc(6.5mm*var(--sp));--st-first:calc(7mm*var(--sp));--ts:calc(var(--fs)*1.15);letter-spacing:.25em;text-transform:uppercase;font-weight:600;color:var(--c2-text);border-bottom:.5mm solid var(--c2-text);padding-bottom:1.5mm;margin-bottom:calc(4mm*var(--sp))}
.tpl-t2 .entry{margin-bottom:calc(3.2mm*var(--sp))}
.tpl-t2 .e-title{font-size:calc(var(--fs)*1)}
.tpl-t2 .e-org{font-weight:400;font-size:calc(var(--fs)*.9);color:#3A3E4C}
.tpl-t2 .e-org .place{opacity:1}
.tpl-t2 .bul li{padding-left:5mm}
.tpl-t2 .bul li::before{left:1.5mm}
.tpl-t2 .kv b{font-weight:700}

/* === Vorlage 3: Dunkel – dunkle Seitenleiste, rundes Foto =========== */
.tpl-t3 .col-side{flex:0 0 35%;background:var(--c1);color:var(--side-text);padding:calc(12mm*var(--sp)) 8mm calc(9mm*var(--sp));--bullet:var(--side-head)}
.cv.tpl-t3 .photo{width:calc(84%*var(--ph));aspect-ratio:1;border-radius:50%;margin:0 auto calc(8mm*var(--sp))}
.tpl-t3 .col-side .sec-title{--st-top:calc(7mm*var(--sp));--st-first:calc(1mm*var(--sp));--ts:calc(var(--fs)*.92);letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--side-head);border-bottom:.3mm solid var(--side-muted);padding-bottom:1.5mm;margin-bottom:calc(3mm*var(--sp))}
.tpl-t3 .col-main{flex:1;padding:calc(13mm*var(--sp)) 11mm calc(9mm*var(--sp)) 10mm}
.tpl-t3 .name{--nb:2.6;font-weight:700;color:var(--c2-text)}
.tpl-t3 .subtitle{margin-top:1.5mm;--ss:calc(var(--fs)*.95);letter-spacing:.12em;text-transform:uppercase;color:#5A5E6C}
.tpl-t3 .head-contact{margin-top:calc(4mm*var(--sp));color:#4A4E5C}
.tpl-t3 .col-main .sec-title{--st-top:calc(7mm*var(--sp));--st-first:calc(7mm*var(--sp));--ts:calc(var(--fs)*.92);letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--c2-text);border-bottom:.3mm solid var(--c2-soft);padding-bottom:1.5mm;margin-bottom:calc(3.5mm*var(--sp))}
.tpl-t3 .entry{margin-bottom:calc(4mm*var(--sp))}
.tpl-t3 .e-dates{color:#5A5E6C;opacity:1}

/* === Vorlage 4: Kopfband – Farbband oben, rundes Foto ================ */
.tpl-t4{flex-direction:column}
.cv.tpl-t4 .band{height:calc(58mm*var(--ph));flex:none;background:var(--c1);color:var(--side-text);display:flex;align-items:center;gap:9mm;padding:0 12mm 0 11mm}
.cv.tpl-t4 .band .photo{width:calc(46mm*var(--ph));aspect-ratio:1;border-radius:50%;flex:none;margin:0;border:1.2mm solid rgba(255,255,255,.55)}
.cv.tpl-t4 .band .txt{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.cv.tpl-t4 .band .name-block{display:inline-block;text-align:right;max-width:100%}
.tpl-t4 .name{--nb:2.6;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--side-head);line-height:1.05}
.tpl-t4 .name.wrap{text-align:left}
.tpl-t4 .subtitle{text-transform:uppercase;letter-spacing:.12em;--ss:calc(var(--fs)*1.2);font-weight:300;margin-top:1.5mm}
.tpl-t4 .cols{display:flex;flex:1;min-height:0}
.tpl-t4 .col-side{flex:0 0 30%;background:var(--c1-light);color:#232633;padding:calc(8mm*var(--sp)) 5mm calc(8mm*var(--sp));text-align:center}
.tpl-t4 .col-side .sec-title{--st-top:calc(7mm*var(--sp));--st-first:calc(2mm*var(--sp));background:var(--c1);color:var(--side-head);--ts:calc(var(--fs)*.88);letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:1.3mm 2mm;margin-bottom:calc(3mm*var(--sp))}
.tpl-t4 .col-side .kv b{text-transform:uppercase;letter-spacing:.04em;font-size:calc(var(--fs)*.84)}
.tpl-t4 .col-main{flex:1;padding:calc(9mm*var(--sp)) 12mm calc(8mm*var(--sp)) 9mm}
.tpl-t4 .col-main .sec-title{--st-top:calc(7mm*var(--sp));--st-first:calc(2mm*var(--sp));--ts:calc(var(--fs)*1.05);letter-spacing:.28em;text-transform:uppercase;font-weight:700;color:var(--c2-text);border-bottom:.3mm solid var(--rule);padding-bottom:1.5mm;margin-bottom:calc(4mm*var(--sp))}
.tpl-t4 .entry{margin-bottom:calc(4mm*var(--sp))}
.tpl-t4 .e-row{display:flex;justify-content:space-between;gap:4mm;align-items:baseline}
.tpl-t4 .e-title{text-transform:uppercase;letter-spacing:.06em;font-size:calc(var(--fs)*.92)}
.tpl-t4 .e-dates{white-space:nowrap;color:#5A5E6C;opacity:1}
.tpl-t4 .e-org{font-weight:400;color:#4A4E5C;font-size:calc(var(--fs)*.9)}
.tpl-t4 .e-org .place{opacity:1}

/* === Vorlage 5: Minimal – weiss mit Trennlinie ======================= */
.tpl-t5{flex-direction:column;padding:calc(14mm*var(--sp)) 14mm calc(9mm*var(--sp))}
.tpl-t5 .head{display:flex;justify-content:space-between;align-items:center;gap:8mm;flex:none;height:calc(56mm*var(--ph));margin-bottom:calc(7mm*var(--sp))}
.tpl-t5 .head .txt{flex:1;min-width:0}
.tpl-t5 .name{--nb:2.1;letter-spacing:.3em;text-transform:uppercase;line-height:1.35;color:var(--c2-text)}
.tpl-t5 .subtitle{display:inline-block;margin-top:2.5mm;padding-top:2.5mm;border-top:.3mm solid var(--rule);text-transform:uppercase;letter-spacing:.25em;--ss:calc(var(--fs)*.9);color:#4A4E5C}
.tpl-t5 .head .photo{width:calc(52mm*var(--ph));aspect-ratio:1;border-radius:50%;flex:none;margin:0}
.tpl-t5 .cols{display:flex;flex:1;min-height:0}
.tpl-t5 .col-side{flex:0 0 33%;padding-right:7mm;border-right:.3mm solid var(--rule)}
.tpl-t5 .col-main{flex:1;padding-left:8mm}
.tpl-t5 .sec-title{--st-top:calc(8mm*var(--sp));--st-first:calc(1mm*var(--sp));--ts:calc(var(--fs)*.88);letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--c2-text);margin-bottom:calc(4mm*var(--sp))}
.tpl-t5 .entry{margin-bottom:calc(4mm*var(--sp))}
.tpl-t5 .e-dates{letter-spacing:.1em;font-size:calc(var(--fs)*.84);color:#5A5E6C;opacity:1}
.tpl-t5 .e-org{font-weight:400;color:#5A5E6C}
.tpl-t5 .contact svg{color:var(--c2-text)}

/* === Vorlage 6: Rahmen – dunkle Spalte links, helles Kopfband ======== */
.tpl-t6{position:relative;flex-direction:column}
.cv.tpl-t6 .band{height:calc(36mm*var(--ph));flex:none;background:var(--c1-light);padding:0 12mm 0 calc(31% + 13mm);display:flex;flex-direction:column;justify-content:center}
.tpl-t6 .name{--nb:2.5;letter-spacing:.28em;text-transform:uppercase;color:var(--c2-text);line-height:1.1}
.tpl-t6 .subtitle{margin-top:2mm;text-transform:uppercase;letter-spacing:.14em;--ss:calc(var(--fs)*1);color:#4A4E5C}
.tpl-t6 .col-side{position:absolute;left:5mm;top:5mm;bottom:8mm;width:31%;background:var(--c1);color:var(--side-text);padding:calc(8mm*var(--sp)) 6mm calc(8mm*var(--sp));--bullet:var(--side-head);--icon:var(--side-head)}
.cv.tpl-t6 .photo{width:calc(72%*var(--ph));aspect-ratio:1;border-radius:50%;margin:0 auto calc(7mm*var(--sp));border:1.2mm solid rgba(255,255,255,.7)}
.tpl-t6 .col-side .sec-title{--st-top:calc(7mm*var(--sp));--st-first:calc(2mm*var(--sp));--ts:calc(var(--fs)*.9);letter-spacing:.28em;text-transform:uppercase;font-weight:600;color:var(--side-head);border-bottom:.3mm solid var(--side-muted);padding-bottom:1.6mm;margin-bottom:calc(3.5mm*var(--sp))}
.tpl-t6 .cols{display:flex;flex:1;min-height:0}
.tpl-t6 .col-main{flex:1;margin-left:calc(31% + 13mm);padding:calc(8mm*var(--sp)) 12mm calc(9mm*var(--sp)) 0}
.tpl-t6 .col-main .sec-title{--st-top:calc(7mm*var(--sp));--st-first:calc(3mm*var(--sp));--ts:calc(var(--fs)*.95);letter-spacing:.28em;text-transform:uppercase;font-weight:600;color:var(--c2-text);border-bottom:.3mm solid var(--rule);padding-bottom:1.6mm;margin-bottom:calc(3.5mm*var(--sp))}
.tpl-t6 .entry{margin-bottom:calc(4mm*var(--sp))}
.tpl-t6 .e-dates{color:#5A5E6C;opacity:1}

/* =========================================================
   3. Titelblätter (feste Layouts, übernehmen Farben/Schrift der Vorlage)
   ========================================================= */
.page.cover{display:block}
.page.cover .cv-head .name{--nb:3.2}
.page.cover .cv-title{font-family:var(--head-font);text-transform:uppercase;letter-spacing:.3em;font-size:calc(var(--fs)*3.2*var(--tk,1));line-height:1.15;margin:0;color:var(--c2-text)}
.page.cover .cv-lines{margin-top:4mm;font-size:calc(var(--fs)*1.25);line-height:1.55;color:#4A4E5C}
.page.cover .cv-contact .contact li{font-size:calc(var(--fs)*.95)}
.page.cover .cv-contact .lines div{font-size:calc(var(--fs)*.95*var(--ck,1))}
.page.cover .cv-contact .lbl{font-family:var(--head-font);text-transform:uppercase;letter-spacing:.2em;font-size:calc(var(--fs)*.85);font-weight:700;margin-bottom:2.5mm}
.page.cover .cv-photo{position:absolute;overflow:hidden;height:auto;margin:0}
.page.cover .band{position:absolute;background:var(--c1)}

.cover.tpl-t1 .band{top:0;right:0;bottom:0;width:38%}
.cover.tpl-t1::before{content:"";position:absolute;left:13.15mm;top:0;bottom:0;width:.35mm;background:var(--c2-line)}
.cover.tpl-t1 .cv-head{position:absolute;left:13mm;top:22mm;width:113mm}
.cover.tpl-t1 .cv-head .name-block{margin:0;padding-left:2.9mm}
.cover.tpl-t1 .cv-head .name{border-left:.7mm solid var(--c2-soft);padding-left:2.2mm;margin-left:-2.9mm}
.cover.tpl-t1 .cv-photo{left:92mm;top:78mm;width:78mm;aspect-ratio:3/4}
.cover.tpl-t1 .cv-body{position:absolute;left:13mm;top:200mm;width:113mm}
.cover.tpl-t1 .cv-title{border-left:.7mm solid var(--c2-soft);padding-left:2.2mm}
.cover.tpl-t1 .cv-lines{margin-left:2.9mm}
.cover.tpl-t1 .cv-contact{position:absolute;left:138mm;right:8mm;bottom:20mm;color:var(--side-text);--icon:var(--side-head)}

.cover.tpl-t2 .band{left:0;top:0;bottom:0;width:31%}
.cover.tpl-t2 .cv-head{position:absolute;left:76mm;top:16mm;right:0}
.cover.tpl-t2 .cv-head .subtitle{margin-right:0}
.cover.tpl-t2 .cv-photo{left:40mm;top:72mm;width:96mm;aspect-ratio:3/4}
.cover.tpl-t2 .cv-body{position:absolute;left:76mm;top:214mm;right:14mm}
.cover.tpl-t2 .cv-contact{position:absolute;left:10mm;bottom:16mm;width:46mm;color:var(--side-text)}
.cover.tpl-t2 .cv-contact .lbl{color:var(--side-head)}

.cover.tpl-t3 .band{left:0;top:0;bottom:0;width:35%;color:var(--side-text)}
.cover.tpl-t3 .cv-photo{left:11.5mm;top:26mm;width:50.5mm;aspect-ratio:1;border-radius:50%}
.cover.tpl-t3 .cv-contact{position:absolute;left:9mm;width:56mm;bottom:22mm;color:var(--side-text);--icon:var(--side-head)}
.cover.tpl-t3 .cv-head{position:absolute;left:86mm;top:30mm;right:12mm}
.cover.tpl-t3 .cv-body{position:absolute;left:86mm;right:12mm;top:125mm}
.cover.tpl-t3 .cv-title{border-bottom:.3mm solid var(--c2-soft);padding-bottom:3mm}

.cover.tpl-t4 .band{left:0;right:0;top:0;height:64mm;color:var(--side-text)}
.cover.tpl-t4 .cv-head{position:absolute;left:14mm;right:14mm;top:17mm;text-align:center;color:var(--side-text)}
.cover.tpl-t4 .cv-head .name{color:var(--side-head)}
.cover.tpl-t4 .cv-head .subtitle{color:var(--side-text)}
.cover.tpl-t4 .cv-photo{left:73mm;top:44mm;width:64mm;aspect-ratio:1;border-radius:50%;border:2mm solid #fff}
.cover.tpl-t4 .cv-body{position:absolute;left:20mm;right:20mm;top:128mm;text-align:center}
.cover.tpl-t4 .cv-contact{position:absolute;left:35mm;right:35mm;bottom:20mm;text-align:center}
.cover.tpl-t4 .cv-contact .lbl{background:var(--c1);color:var(--side-head);padding:1.3mm 2mm;display:block}

.cover.tpl-t5 .cv-head{position:absolute;left:18mm;right:18mm;top:22mm;text-align:center}
.cover.tpl-t5 .cv-photo{left:74mm;top:92mm;width:62mm;aspect-ratio:1;border-radius:50%}
.cover.tpl-t5 .cv-body{position:absolute;left:18mm;right:18mm;top:172mm;text-align:center}
.cover.tpl-t5 .cv-contact{position:absolute;left:18mm;right:18mm;bottom:18mm;text-align:center;border-top:.3mm solid var(--rule);padding-top:5mm;letter-spacing:.04em}

.cover.tpl-t6 .band{left:0;right:0;top:0;height:44mm;width:auto;background:var(--c1-light)}
.cover.tpl-t6 .side{position:absolute;left:5mm;top:5mm;bottom:8mm;width:31%;background:var(--c1)}
.cover.tpl-t6 .cv-photo{left:32mm;top:60mm;width:76mm;height:76mm;aspect-ratio:auto;border-radius:50%;border:3mm solid #fff}
.cover.tpl-t6 .cv-head{position:absolute;left:82mm;right:12mm;top:0;height:44mm;display:flex;flex-direction:column;justify-content:center}
.cover.tpl-t6 .cv-head .name{--nb:2.6;letter-spacing:.28em;text-transform:uppercase;color:var(--c2-text)}
.cover.tpl-t6 .cv-head .subtitle{text-transform:uppercase;letter-spacing:.14em;--ss:calc(var(--fs)*1);color:#4A4E5C;margin-top:2mm}
.cover.tpl-t6 .cv-body{position:absolute;left:82mm;right:12mm;top:170mm}
.cover.tpl-t6 .cv-title{border-bottom:.3mm solid var(--rule);padding-bottom:4mm}
.cover.tpl-t6 .cv-contact{position:absolute;left:9mm;width:58mm;bottom:20mm;color:var(--side-text);--icon:var(--side-head)}

.page.cover .cv-logo{position:absolute;display:flex;align-items:flex-end;min-width:46mm}   /* SVG ohne width/height: Chrome gibt dem Bild sonst 0 Breite */
.page.cover .cv-logo img{max-width:46mm;max-height:22mm;width:auto;height:auto;display:block}
.cover.tpl-t1 .cv-logo{left:15.9mm;bottom:20mm}
.cover.tpl-t2 .cv-logo{right:14mm;bottom:18mm;justify-content:flex-end}
.cover.tpl-t3 .cv-logo{right:12mm;bottom:20mm;justify-content:flex-end}
.cover.tpl-t4 .cv-logo{left:0;right:0;top:206mm;justify-content:center}
.cover.tpl-t5 .cv-logo{left:0;right:0;top:222mm;justify-content:center}
.cover.tpl-t6 .cv-logo{right:12mm;bottom:20mm;justify-content:flex-end}

/* =========================================================
   3b. Bewerbungsschreiben – dritte Seite, serifenlose Schrift, dezente Anklänge an die Vorlage
   ========================================================= */
.page.letter{--lfs:10.5pt;--letter-font:"Helvetica Neue",Helvetica,Arial,sans-serif;display:block;font-family:var(--letter-font);font-size:var(--lfs);line-height:1.45;color:#232633}
.page.letter .strip{position:absolute}
.page.letter .lhead .name-block{margin:0}
.page.letter .lsender{position:absolute;font-family:var(--letter-font);font-size:calc(var(--lfs)*.85);line-height:1.5;color:#4A4E5C}
.page.letter .lsender div{overflow:visible;flex:none}   /* flex:none: in Vorlage 4 und 6 ist der Absender eine Flex-Spalte im Balken, .ct würde sonst die Zeilen auf die ganze Balkenhöhe dehnen */
.page.letter .lmain{position:absolute;bottom:18mm;overflow:hidden}
.page.letter .lrecip{white-space:pre-line;margin-bottom:9mm}
.page.letter .ldate{margin-bottom:7mm}
.page.letter .lsubject{font-weight:700;margin-bottom:5mm;font-size:calc(var(--lfs)*1.05)}
.page.letter .ltext p{margin:0 0 3.2mm}
.page.letter .ltext ul,.page.letter .ltext ol{margin:0 0 3.2mm;padding-left:6mm}
.page.letter .ltext li{margin:0 0 1mm}
.page.letter .ltext li p{margin:0}
.page.letter .ltext.ph{color:#9AA0AE;font-style:italic}
.page.letter .lsign{height:13.5mm;margin:-1.2mm 0 1.2mm}   /* Unterschrift zwischen Grussformel und Name: feste Höhe, damit renderLetter schon vor dem Laden des Bildes richtig misst */
.page.letter .lsign img{display:block;height:100%;width:auto;max-width:60mm;object-fit:contain;object-position:left center}
.page.letter .lattach{margin-top:7mm;font-size:calc(var(--lfs)*.9);color:#4A4E5C}
.page.letter .lrule{position:absolute;height:.3mm;background:var(--rule)}
.page.letter.overflow .lmain{outline:1.5mm solid rgba(178,58,46,.6);outline-offset:2mm}
.letter.tpl-t1::before{content:"";position:absolute;left:13.15mm;top:0;bottom:0;width:.35mm;background:var(--c2-line)}
.letter.tpl-t1 .lhead{position:absolute;left:13mm;top:18mm;width:110mm}
.letter.tpl-t1 .lhead .name{--nb:2.1;border-left:.7mm solid var(--c2-soft);padding-left:2.2mm}
.letter.tpl-t1 .lhead .subtitle{margin-left:2.9mm}
.letter.tpl-t1 .lsender{right:14mm;top:19mm;text-align:right}
.letter.tpl-t1 .lmain{left:15.9mm;right:14mm;top:60mm}
.letter.tpl-t2 .strip{left:0;top:0;bottom:0;width:12mm;background:var(--c1)}
.letter.tpl-t2 .lhead{position:absolute;left:24mm;right:calc(var(--lsw,10mm) + 4mm);top:16mm}   /* --lsw: Breite des Absenders rechts (renderLetter), der Name bleibt links davon */
.letter.tpl-t2 .lhead .name{--nb:2.2;min-height:calc(var(--fs)*2.2*2.24)}   /* immer zwei Zeilen hoch: verkleinerter oder einzeiliger Name hebt den Balken nicht in den Absender */
.letter.tpl-t2 .lhead .subtitle{margin-right:calc(-4mm - var(--lsw,10mm))}   /* Balken reicht weiter bis zum Seitenrand */
.letter.tpl-t2 .lsender{right:14mm;top:16mm;text-align:right}
.letter.tpl-t2 .lmain{left:24mm;right:14mm;top:64mm}
.letter.tpl-t3 .strip{left:0;top:0;bottom:0;width:14mm;background:var(--c1)}
.letter.tpl-t3 .lhead{position:absolute;left:26mm;top:18mm;width:100mm}
.letter.tpl-t3 .lhead .name{--nb:2.2}
.letter.tpl-t3 .lsender{right:14mm;top:19mm;text-align:right}
.letter.tpl-t3 .lrule{left:26mm;right:14mm;top:48mm;background:var(--c2-soft)}
.letter.tpl-t3 .lmain{left:26mm;right:14mm;top:58mm}
.letter.tpl-t4 .strip{left:0;right:0;top:0;height:32mm;background:var(--c1)}
.letter.tpl-t4 .lhead{position:absolute;left:14mm;top:0;height:32mm;width:105mm;display:flex;flex-direction:column;justify-content:center;color:var(--side-text)}
.letter.tpl-t4 .lhead .name{--nb:2;color:var(--side-head)}
.letter.tpl-t4 .lhead .subtitle{--ss:calc(var(--fs)*.95);margin-top:1mm}
.letter.tpl-t4 .lsender{right:14mm;top:0;height:32mm;display:flex;flex-direction:column;justify-content:center;text-align:right;color:var(--side-text)}
.letter.tpl-t4 .lmain{left:14mm;right:14mm;top:46mm}
.letter.tpl-t5 .lhead{position:absolute;left:18mm;top:18mm;width:100mm}
.letter.tpl-t5 .lhead .name{--nb:1.8}
.letter.tpl-t5 .lsender{right:18mm;top:19mm;text-align:right}
.letter.tpl-t5 .lrule{left:18mm;right:18mm;top:50mm}
.letter.tpl-t5 .lmain{left:18mm;right:18mm;top:60mm}
.letter.tpl-t6 .strip{left:0;right:0;top:0;height:32mm;background:var(--c1-light)}
.letter.tpl-t6 .strip2{position:absolute;left:5mm;top:5mm;bottom:8mm;width:9mm;background:var(--c1)}
.letter.tpl-t6 .lhead{position:absolute;left:24mm;top:0;height:32mm;width:105mm;display:flex;flex-direction:column;justify-content:center}
.letter.tpl-t6 .lhead .name{--nb:2.1}
.letter.tpl-t6 .lsender{right:14mm;top:0;height:32mm;display:flex;flex-direction:column;justify-content:center;text-align:right}
.letter.tpl-t6 .lmain{left:24mm;right:16mm;top:46mm}

/* =========================================================
   4. Druck – Titelblatt (falls aktiviert) und Lebenslauf, je eine Seite
   ========================================================= */
@media print{
  @page{size:A4;margin:0}
  html,body{height:auto;margin:0;background:#fff}
  .topbar,#form,.status,#toast,.screen-only,.modal,.draftbar,.dash,.pop,#tourOverlay{display:none!important}
  .page .ltext mark.fix{background:transparent}
  #app{display:block;height:auto}
  #preview,#viewport{display:block;padding:0;background:#fff;overflow:visible;height:auto}
  #scaler{width:210mm!important;height:auto!important;position:static}
  .page{position:relative!important;transform:none!important;box-shadow:none;outline:none;visibility:visible!important;break-inside:avoid;page-break-inside:avoid;height:296mm!important;max-height:296mm;overflow:hidden}
  #scaler .page,#scaler .page.overflow,.page.letter.overflow .lmain{box-shadow:none!important;outline:none!important}   /* Schatten und rote Warnrahmen der Vorschau nie drucken */
  #scaler .page:not(.off){break-after:page;page-break-after:always}
  #scaler .page:not(.off):last-of-type{break-after:auto;page-break-after:auto}
  .page.cover.off{display:none!important}
  .page.letter.off{display:none!important}
  .page.letter .lmain{bottom:17mm}   /* Druckseite 296 mm: Textbereich bleibt so hoch wie in der Vorschau (renderLetter misst dort), sonst fehlt die letzte Zeile */
  #scaler .page:not(.off) ~ .page:not(.off){break-before:page;page-break-before:always}
}