/* Ab 1.63.0: „Ihr Kundenbereich“ – Zugang aus dem Angebotslink. Eigenständig (Präfix zg-), damit Angebotsseite und Mein NT
   dasselbe Element zeigen. Navy mit Bauzeichnungs-Raster wie der Kopf der Angebotsseite, Oliv für Erreichtes und die Aktion. */
.zg{
  --zg-navy:#00294b; --zg-navy-2:#0b3a63; --zg-sky:#669cca; --zg-olive:#c7ca66; --zg-olive-2:#d6d88a; --zg-ink:#1d2a3a; --zg-steel:#5b6b7d;
  --zg-line:#d5dde6; --zg-tint:#e6eef7; --zg-white:#fff; --zg-red:#b23b3b;
  --zg-head:'Roboto Condensed','Arial Narrow',Roboto,Arial,sans-serif;
  position:relative; border-radius:14px; overflow:hidden; color:#fff; background-color:var(--zg-navy);
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:24px 24px; border-top:5px solid var(--zg-olive); font-size:16px; line-height:1.55; text-align:left;
  -webkit-print-color-adjust:exact; print-color-adjust:exact; container-type:inline-size;
}
.zg *,.zg *::before,.zg *::after{box-sizing:border-box;}
.zg h2{font-family:var(--zg-head); font-weight:700; color:#fff; font-size:27px; line-height:1.15; margin:0 0 8px; letter-spacing:0; text-wrap:balance;}
.zg p{margin:0 0 12px; color:rgba(255,255,255,.84);}
.zg b{color:#fff;}
.zg-in{padding:24px 22px 22px; display:grid; grid-template-columns:minmax(0,1fr); gap:18px;}
.zg-lead{font-size:16.5px;}
.zg-art{margin:-4px -6px 0;}
.zg-route{width:100%; max-width:430px; height:auto; display:block; overflow:visible;}
.zg-road{stroke:rgba(255,255,255,.28); stroke-width:3; stroke-dasharray:7 7; fill:none;}
.zg-road-done{stroke:var(--zg-olive); stroke-width:3.5; fill:none; stroke-linecap:round;}
.zg-st circle{fill:var(--zg-navy); stroke:rgba(255,255,255,.55); stroke-width:2.2;}
.zg-st .zg-dot{fill:rgba(255,255,255,.55); stroke:none;}
.zg-st.on circle{fill:var(--zg-olive); stroke:var(--zg-olive);}
.zg-st path{fill:none; stroke:var(--zg-navy); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;}
.zg-st text{fill:rgba(255,255,255,.82); font:600 11.5px Roboto,Arial,sans-serif;}
.zg-st.on text{fill:#fff;}
.zg-van rect,.zg-van path{fill:#fff;}
.zg-van .zg-van-band{fill:var(--zg-olive);}
.zg-van .zg-wheel{fill:#0e1d2e; stroke:#fff; stroke-width:1.4;}
.zg-van{transition:transform 1.6s cubic-bezier(.3,.7,.25,1);}
.zg-teaser:not(.zg-go) .zg-van{transform:translate(8px,26px);}
.zg-teaser.zg-go .zg-st:nth-of-type(1) circle{animation:zg-pop .5s 1.3s both;}
@keyframes zg-pop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}
.zg-benefits{list-style:none; margin:4px 0 18px; padding:0; display:grid; gap:10px;}
.zg-benefits li{display:flex; gap:12px; align-items:center; color:#fff; font-size:15.5px;}
.zg-ico{flex:0 0 34px; width:34px; height:34px; padding:7px; border-radius:9px; background:rgba(102,156,202,.22); stroke:var(--zg-olive); fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.zg-actions{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center;}
.zg-cta{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 24px; border-radius:9px; border:0; cursor:pointer;
  background:var(--zg-olive); color:var(--zg-navy) !important; font:700 17px var(--zg-head); text-decoration:none; white-space:nowrap;
  box-shadow:0 6px 18px rgba(199,202,102,.25);}
.zg-cta:hover{background:var(--zg-olive-2);}
.zg-cta:focus-visible,.zg-link:focus-visible,.zg input:focus-visible{outline:3px solid var(--zg-sky); outline-offset:2px;}
.zg-cta[disabled]{opacity:.55; cursor:wait;}
.zg-note{font-size:13.5px; color:rgba(255,255,255,.7);}
.zg-link{background:none; border:0; padding:4px 0; color:#fff; font:500 15px Roboto,Arial,sans-serif; text-decoration:underline; text-underline-offset:3px; cursor:pointer;}
.zg-row{grid-template-columns:auto; align-items:center;}
.zg-row .zg-body p:last-of-type{margin-bottom:0;}

/* Formularschritte: helle Fläche in der Navy-Karte */
.zg-active{background-image:none;}
.zg-form-in{gap:6px;}
.zg-steps{display:flex; align-items:center; gap:6px; margin-bottom:10px;}
.zg-steps span{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font:700 13px Roboto,Arial,sans-serif;
  background:rgba(255,255,255,.12); color:rgba(255,255,255,.75);}
.zg-steps span.on{background:#fff; color:var(--zg-navy);}
.zg-steps span.done{background:var(--zg-olive); color:var(--zg-navy);}
.zg-steps i{flex:0 0 28px; height:3px; border-radius:2px; background:rgba(255,255,255,.2);}
.zg-steps i.on{background:var(--zg-olive);}
.zg-form{display:grid; gap:12px; margin-top:6px; background:#fff; color:var(--zg-ink); border-radius:11px; padding:18px 16px;}
.zg-form label{display:grid; gap:5px; font-size:14px; font-weight:500; color:var(--zg-steel); margin:0;}
.zg-form input:not([type=checkbox]){font:16px Roboto,Arial,sans-serif; color:var(--zg-ink); padding:11px 12px; border:1px solid #b9c4d0; border-radius:7px; background:#fff;
  width:100%; min-height:46px;}
.zg-opt{font-weight:400;}
.zg-two{display:grid; gap:12px;}
.zg-msg{min-height:1.2em; margin:0 !important; font-size:14.5px; color:var(--zg-steel) !important;}
.zg-msg.is-err{color:var(--zg-red) !important;}
.zg-msg.is-ok{color:#3f6b1d !important;}
.zg-form .zg-link{color:var(--zg-navy);}
.zg-form .zg-cta{box-shadow:none; background:var(--zg-navy); color:#fff !important;}
.zg-form .zg-cta:hover{background:var(--zg-navy-2);}
.zg-otp{border:0; padding:0; margin:0 0 4px; min-width:0;}
.zg-otp legend{font-size:14px; font-weight:500; color:var(--zg-steel); padding:0; margin-bottom:6px;}
.zg-otp-boxes{display:grid; grid-template-columns:repeat(6,minmax(0,52px)); gap:8px;}
.zg-otp-boxes input{width:100% !important; min-width:0; height:56px; padding:0 !important; text-align:center; font:700 26px var(--zg-head) !important;
  color:var(--zg-navy) !important; border:2px solid var(--zg-line) !important; border-radius:9px !important; background:var(--zg-tint) !important;
  transition:border-color .15s, background-color .15s;}
.zg-otp-boxes input.has{border-color:var(--zg-navy) !important; background:#fff !important;}
.zg-otp-boxes input:focus{border-color:var(--zg-sky) !important; outline:none; box-shadow:0 0 0 3px rgba(102,156,202,.35);}
.zg-meter{height:6px; border-radius:3px; background:#e5eaf0; overflow:hidden; margin-top:-4px;}
.zg-meter span{display:block; height:100%; width:0; background:var(--zg-red); transition:width .25s, background-color .25s;}
.zg-meter.ok span{background:var(--zg-sky);}
.zg-meter.strong span{background:var(--zg-olive);}
.zg-meter-t{font-size:12.5px; color:var(--zg-steel) !important; margin:-6px 0 0 !important;}
.zg-check{display:flex !important; grid-template-columns:none; gap:10px !important; align-items:flex-start; color:var(--zg-ink) !important; font-weight:400 !important; font-size:14.5px !important;}
.zg-check input{width:22px; height:22px; flex:0 0 22px; margin:1px 0 0; accent-color:var(--zg-navy);}

/* Fertig: Häkchen zeichnet sich einmal */
.zg-ok{width:56px; height:56px; flex:0 0 56px;}
.zg-ok circle{fill:var(--zg-olive);}
.zg-ok path{fill:none; stroke:var(--zg-navy); stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:0;}
.zg-done.zg-go .zg-ok circle{animation:zg-pop .55s both;}
.zg-done.zg-go .zg-ok path{animation:zg-draw .5s .3s both;}
@keyframes zg-draw{from{stroke-dashoffset:40}to{stroke-dashoffset:0}}
.zg-signed{background-image:none;}

.zg-compact .zg-in{padding:20px 18px;}
.zg-compact h2{font-size:22px;}

@container (min-width:620px){
  .zg-teaser .zg-in{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:center; gap:26px; padding:30px 30px 28px;}
  .zg-teaser .zg-art{order:2; margin:0;}
  .zg-row{grid-template-columns:auto minmax(0,1fr) auto; gap:20px; padding:24px 28px;}
  .zg-two{grid-template-columns:1fr 1fr;}
  .zg-form{padding:22px 22px;}
  .zg-form-in{padding:26px 28px;}
}
@media (max-width:380px){ .zg-otp-boxes{gap:5px;} .zg-otp-boxes input{height:50px;} }
@media (prefers-reduced-motion: reduce){ .zg *{animation:none !important; transition:none !important;} .zg-teaser .zg-van{transform:translate(62px,26px) !important;} }
@media print{ .zg{display:none !important;} }