/* ============================================================
   KlimaCraft - Vorlagen-Personalisierung
   Nutzt die Farb- und Schrift-Tokens aus style.css.
   Eigene Datei, damit das Design-System unangetastet bleibt.
   ============================================================ */

.pz-hero{padding:118px 0 26px;background:linear-gradient(180deg,var(--sky-mid),var(--sky-low) 70%,#fff)}
.pz-hero .breadcrumb{margin-bottom:14px}
.pz-hero h1{font-size:34px;font-weight:800;color:var(--navy);margin:8px 0 8px}
.pz-hero p.lead{font-size:16.5px;color:var(--slate);max-width:660px}

/* ---------- Schrittanzeige ---------- */
.pz-steps{display:flex;align-items:center;gap:14px;margin:22px 0 4px;flex-wrap:wrap}
.pz-steps .pz-bar{flex:1 1 220px;height:7px;border-radius:99px;background:var(--line);overflow:hidden;min-width:180px}
.pz-steps .pz-bar i{display:block;height:100%;width:50%;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .35s ease}
.pz-steps .pz-lab{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);white-space:nowrap}
.pz-steps .pz-sub{font-size:14px;color:var(--slate)}

/* ---------- Zweispaltiges Grundgeruest ---------- */
.pz-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:start;padding-bottom:70px}
@media(max-width:1000px){.pz-grid{grid-template-columns:1fr;gap:22px}}

.pz-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow-sm)}
.pz-card h2{font-size:21px;color:var(--navy);margin-bottom:6px}
.pz-card .pz-hint{font-size:14px;color:var(--slate);margin-bottom:20px}

/* ---------- Formular ---------- */
.pz-feld{margin-bottom:17px}
.pz-feld label{display:block;font-size:13.5px;font-weight:600;color:var(--navy);margin-bottom:6px}
.pz-feld label .pz-opt{font-weight:500;color:var(--slate-l);font-size:12.5px;margin-left:6px}
.pz-feld input[type=text],.pz-feld input[type=email],.pz-feld input[type=tel]{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;
  font-family:inherit;font-size:15px;color:var(--ink);background:#fff;transition:.15s}
.pz-feld input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.pz-feld .pz-tip{font-size:12.5px;color:var(--slate-l);margin-top:5px}
.pz-feld.pz-fehler input{border-color:var(--red);background:var(--redbg)}
.pz-feld .pz-fehlertext{display:none;font-size:12.5px;color:var(--red);margin-top:5px}
.pz-feld.pz-fehler .pz-fehlertext{display:block}
.pz-zwei{display:grid;grid-template-columns:110px 1fr;gap:12px}
@media(max-width:430px){.pz-zwei{grid-template-columns:1fr}}

.pz-frei{display:flex;align-items:flex-start;gap:9px;background:var(--bg2);border:1px solid var(--line2);
  border-radius:12px;padding:13px 15px;font-size:13.5px;color:var(--slate);margin-bottom:20px}
.pz-frei svg{flex:0 0 18px;width:18px;height:18px;color:var(--blue);margin-top:1px}

/* ---------- Logo ---------- */
.pz-logo{border:1.5px dashed var(--line);border-radius:13px;padding:18px;text-align:center;background:var(--bg2);transition:.15s}
.pz-logo.pz-ueber{border-color:var(--blue);background:var(--bg3)}
/* Schlaegt das Hochladen fehl, muss man das sehen. Vorher stand der
   Hinweis klein und grau unter einer Vorschau, die so aussah, als waere
   alles in Ordnung - und der Nutzer lief erst im zweiten Schritt in eine
   Fehlermeldung, die er sich nicht erklaeren konnte. */
.pz-logo.pz-fehler{border-color:#DC2626;border-style:solid;background:#FEF2F2}
.pz-feld .pz-tip.pz-tip-fehler{color:#B91C1C;font-weight:600}
.pz-logo p{font-size:13.5px;color:var(--slate);margin-bottom:10px}
.pz-logo .pz-klein{font-size:12px;color:var(--slate-l);margin-top:9px;margin-bottom:0}
.pz-logo-vorschau{display:flex;align-items:center;gap:14px;justify-content:space-between;text-align:left}
.pz-logo-vorschau img{max-height:54px;max-width:190px;width:auto}
.pz-logo-vorschau .pz-name{font-size:13px;color:var(--slate);word-break:break-all}

/* ---------- Knopfleiste ---------- */
.pz-aktionen{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;align-items:center}
.pz-aktionen .pz-spacer{flex:1}

/* ---------- Vorschau ---------- */
.pz-preview-spalte{position:sticky;top:96px}
@media(max-width:1000px){.pz-preview-spalte{position:static}}
.pz-preview-kopf{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.pz-preview-kopf b{font-family:'Sora',sans-serif;font-size:15px;color:var(--navy)}
.pz-preview-kopf span{font-size:12.5px;color:var(--slate-l)}
.pz-buehne{background:var(--bg3);border:1px solid var(--line);border-radius:var(--r);padding:18px;overflow:hidden}
.pz-blattbox{position:relative;width:100%}
/* Der Stapel traegt keine eigene Flaeche mehr - jedes Blatt ist ein
   eigenes weisses Papier. So sieht man auf einen Blick, wo eine Seite
   endet und die naechste anfaengt. */
.pz-blatt{width:794px;transform-origin:top left;position:absolute;top:0;left:0}
.dk-stapel{display:flex;flex-direction:column;gap:22px}
.dk-seite{width:794px;min-height:1123px;background:#fff;border-radius:3px;
  box-shadow:0 18px 44px -20px rgba(13,38,84,.45);display:flex;flex-direction:column}
.dk-seite>.dk{flex:1;display:flex;flex-direction:column}
.dk-seite .dk-fuss{margin-top:auto}

/* ---------- Das Dokument selbst (Abbild der PDF-Vorlage) ---------- */
.dk{font-family:'Inter',sans-serif;color:#0B1220;padding:46px 52px 34px;font-size:11px;line-height:1.45}
.dk-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;min-height:40px}
.dk-marke{display:flex;align-items:center;gap:8px;font-family:'Sora',sans-serif;font-weight:800;font-size:18px;color:#0A1B3D;letter-spacing:-.02em}
.dk-marke img{max-height:38px;max-width:210px;width:auto}
.dk-eyebrow{font-size:8.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#5B6573;text-align:right;max-width:290px}
.dk-regel{height:3px;border-radius:2px;margin:13px 0 20px;background:linear-gradient(90deg,#0A1B3D 0%,#2563EB 55%,#22D3EE 100%)}
.dk h1{font-family:'Sora',sans-serif;font-size:21px;font-weight:800;color:#0A1B3D;margin-bottom:16px;letter-spacing:-.02em}
.dk h2{font-family:'Sora',sans-serif;font-size:13px;font-weight:700;color:#0A1B3D;margin:0 0 9px}
.dk h2 .nr{color:#2563EB;margin-right:7px}
.dk table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #E4E9F2;border-radius:7px;overflow:hidden;margin-bottom:18px}
.dk td,.dk th{border-bottom:1px solid #EEF2FB;padding:7px 9px;vertical-align:top}
.dk tr:last-child td{border-bottom:none}
.dk td.lab{background:#F5F8FF;font-weight:600;color:#0A1B3D;width:24%}
.dk td.val{width:26%;color:#2563EB;font-weight:600}
.dk thead th{background:#F5F8FF;font-size:9.5px;font-weight:700;color:#0A1B3D;text-align:left}
.dk .kasten{display:inline-block;width:11px;height:11px;border:1.3px solid #8B95A6;border-radius:3px}
.dk-fuss{margin-top:16px;padding-top:9px;border-top:1px solid #E4E9F2;display:flex;justify-content:space-between;
  gap:18px;font-size:8.5px;color:#8B95A6;line-height:1.5}
.dk-fuss b{color:#5B6573}

/* ---------- weitere Bausteine des hellen Stils ---------- */
.dk .dk-sub{font-size:10px;color:#5B6573;margin:-10px 0 16px}
.dk .dk-text{font-size:9px;color:#5B6573;margin:-8px 0 16px;line-height:1.55}
.dk .dk-ph{color:#2563EB;font-weight:600;background:#EAF1FE;border-radius:3px;padding:0 3px}
.dk .dk-wahl{display:inline-flex;align-items:center;gap:4px;margin-right:14px;color:#0B1220;font-weight:400}
.dk .dk-hinweis{background:#F5F8FF;border:1px solid #E4E9F2;border-radius:7px;padding:12px 14px;margin-bottom:18px}
.dk .dk-hinweis p{font-size:9px;line-height:1.6;color:#2A3342;margin-bottom:7px}
.dk .dk-hinweis p:last-child{margin-bottom:0}
.dk .dk-hinweis b{color:#0A1B3D}
.dk .dk-parteien{background:#F5F8FF;border:1px solid #E4E9F2;border-radius:7px;padding:15px 17px;margin-bottom:20px}
.dk .dk-plab{font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#5B6573}
.dk .dk-pwert{margin:5px 0 2px;font-size:11px;font-weight:600;color:#2563EB}
.dk .dk-pzus{font-size:8.5px;color:#5B6573;margin-bottom:11px}
.dk .dk-pend{font-size:9px;color:#2A3342;margin-top:9px}
.dk .dk-par{margin-bottom:15px}
.dk .dk-par h3{font-family:'Sora',sans-serif;font-size:11px;font-weight:700;color:#0A1B3D;margin-bottom:5px}
.dk .dk-par p{font-size:9px;line-height:1.65;color:#2A3342;text-align:justify}
.dk .dk-linie{border-bottom:1px solid #E4E9F2;height:20px}
.dk .dk-sig{display:flex;gap:26px;margin-top:26px}
.dk .dk-sig>div{flex:1}
.dk .dk-sigline{display:block;border-top:1px solid #5B6573;margin-bottom:4px}
.dk .dk-sig small{font-size:8.5px;color:#5B6573}

/* ---------- dunkler Stil (Brandschutzklappen) ---------- */
.dk.dk-band{padding:0 0 22px}
.dk-band .dkb-kopf{background:#0A1B3D;color:#fff;padding:26px 40px 22px}
.dk-band .dkb-marke{font-family:'Sora',sans-serif;font-size:9px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:#67E8F9;margin-bottom:9px}
.dk-band .dkb-marke img{max-height:26px;max-width:150px;width:auto;filter:brightness(0) invert(1)}
.dk-band .dkb-kopf h1{color:#fff;font-size:19px;margin-bottom:6px}
.dk-band .dkb-kopf p{font-size:9px;color:#A5C4F0}
.dk-band .dkb-inhalt{padding:22px 40px 0}
.dk-band .dkb-band{background:#0A1B3D;color:#fff;border-radius:6px;padding:7px 14px;margin:18px 0 12px;
  display:flex;justify-content:space-between;align-items:center;font-size:10.5px;font-weight:600}
.dk-band .dkb-band i{font-style:normal;font-size:8.5px;color:#A5C4F0;font-weight:500}
.dk-band .dkb-felder{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:6px}
.dk-band .dkb-feld{border:1px solid #D7DEEA;border-radius:5px;padding:7px 10px 17px;min-width:120px}
.dk-band .dkb-feld span{font-size:7.5px;letter-spacing:.09em;text-transform:uppercase;color:#8B95A6}
.dk-band .dkb-pkopf{display:flex;justify-content:flex-end;gap:20px;padding-right:6px;margin-bottom:2px}
.dk-band .dkb-pkopf span{width:28px;text-align:center;font-size:7px;color:#8B95A6}
.dk-band .dkb-pz{display:flex;align-items:center;gap:20px;border-bottom:1px solid #EEF2FB;padding:6px 6px 6px 0}
.dk-band .dkb-ptext{flex:1;font-size:9px;color:#1A2230}
.dk-band .dkb-pk{width:28px;display:flex;justify-content:center}
.dk-band .dkb-pk::before{content:"";width:11px;height:11px;border:1.3px solid #8B95A6;border-radius:3px;display:block}
.dk-band .dk-fuss{margin:20px 40px 0}
.dk-band .dk-linie{margin:0 0 2px}
.dk-neu{background:#FFF7E8;border-radius:3px;box-shadow:0 0 0 2px #FFE2B0;transition:background .5s,box-shadow .5s}

/* ---------- Mobile: Vorschau als eigene Ebene ----------
   Auf schmalen Bildschirmen sind zwei Spalten unbrauchbar. Das
   Formular bekommt die volle Breite, die Vorschau liegt hinter
   einem Knopf in der Leiste am unteren Rand und oeffnet sich als
   vollflaechige weisse Ebene ueber allem anderen. ---------- */
.pz-mobilleiste{display:none}
@media(max-width:1000px){
  .pz-preview-spalte{display:none}
  .pz-preview-spalte.pz-offen{
    display:block;position:fixed;inset:0;z-index:200;background:#fff;
    padding:64px 16px 26px;overflow:auto;-webkit-overflow-scrolling:touch}
  .pz-preview-spalte.pz-offen .pz-preview-kopf{
    position:fixed;top:0;left:0;right:0;z-index:201;background:#fff;
    border-bottom:1px solid var(--line);padding:15px 16px;margin:0;
    display:flex;align-items:center;gap:12px}
  .pz-preview-spalte.pz-offen .pz-preview-kopf span{display:none}
  .pz-preview-spalte.pz-offen .pz-buehne{padding:12px;background:var(--bg3)}
  .pz-zu{position:fixed;top:8px;right:12px;z-index:202;background:var(--navy);border:none;
    border-radius:10px;padding:9px 16px;font-family:inherit;font-weight:600;font-size:14px;
    color:#fff;cursor:pointer}
  .pz-mobilleiste{display:flex;position:sticky;bottom:0;z-index:40;gap:10px;align-items:center;
    background:rgba(255,255,255,.97);border-top:1px solid var(--line);padding:11px 16px;margin:0 -26px -1px;
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .pz-mobilleiste .pz-mtext{flex:1;font-size:13px;color:var(--slate)}
  .pz-hero h1{font-size:27px}
  .pz-card{padding:20px}
}

/* ---------- Schritt 2 und Abschluss ---------- */
.pz-check{display:flex;align-items:flex-start;gap:11px;padding:15px;border:1px solid var(--line);
  border-radius:12px;background:#fff;margin-top:6px}
.pz-check input{margin-top:3px;width:18px;height:18px;flex:0 0 18px;accent-color:var(--blue)}
.pz-check label{font-size:13.5px;color:var(--slate);line-height:1.55;cursor:pointer}
.pz-check label b{color:var(--navy);display:block;margin-bottom:3px;font-weight:600}
.pz-check label span{display:block;font-size:12.5px;color:var(--slate-l);line-height:1.5}
.pz-check.pz-pflicht{border-color:var(--sky-l);background:var(--bg2)}
.pz-check.pz-fehler{border-color:var(--red);background:var(--redbg)}
.pz-check .pz-muss{display:block;font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--blue);margin-bottom:5px}
.pz-check.pz-fehler .pz-muss{color:var(--red)}
.pz-checkfehler{display:none;font-size:13px;color:var(--red);margin-top:9px;padding-left:2px;line-height:1.5}
.pz-checkfehler.an{display:block}
.pz-zweck{background:var(--bg2);border-left:3px solid var(--blue);border-radius:0 10px 10px 0;
  padding:14px 16px;font-size:13.5px;color:var(--slate);margin:18px 0}
.pz-zweck b{color:var(--navy)}
.pz-meldung{display:none;border-radius:12px;padding:14px 16px;font-size:14px;margin-top:16px}
.pz-meldung.an{display:block}
.pz-meldung.warn{background:var(--redbg);color:#8A1C1C;border:1px solid #F3C7C7}
.pz-meldung.info{background:var(--amberbg);color:#7A4A05;border:1px solid #F3DDB6}
.pz-fertig{text-align:center;padding:14px 0}
.pz-fertig .pz-haken{width:64px;height:64px;border-radius:50%;background:var(--greenbg);color:var(--green);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.pz-fertig h2{font-size:24px;margin-bottom:10px}
.pz-fertig p{color:var(--slate);font-size:15px;max-width:460px;margin:0 auto 10px}
.pz-lade{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;border-radius:50%;animation:pzdreh .7s linear infinite}
@keyframes pzdreh{to{transform:rotate(360deg)}}
.pz-verborgen{display:none !important}

/* Fertig-Ansicht: die Vorschauspalte ist weg, also eine Spalte,
   mittig und nicht breiter als noetig. */
.pz-grid.pz-einspaltig{grid-template-columns:minmax(0,620px);justify-content:center}

/* ===== Paket: weitere Vorlagen mit denselben Angaben (29.09.2026) ===== */
.pz-dazu{margin-top:6px;padding-top:18px;border-top:1px solid var(--line)}
.pz-dazu-liste{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pz-dazu-z{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;font-size:13.5px;color:var(--navy);cursor:pointer;background:#fff;line-height:1.35}
.pz-dazu-z input{width:17px;height:17px;flex:0 0 17px;accent-color:var(--blue);margin:0}
.pz-dazu-z.an{border-color:var(--blue);background:var(--bg2)}
.pz-dazu-alle{margin-top:10px;background:none;border:0;padding:0;color:var(--blue);font:600 13px var(--font, inherit);cursor:pointer}
.pz-paketinfo{background:var(--bg2);border:1px solid var(--sky-l);border-radius:10px;padding:11px 13px;margin-top:14px;color:var(--slate)}
.pz-paketinfo b{color:var(--navy)}
@media (max-width:640px){.pz-dazu-liste{grid-template-columns:1fr}}