/* Handwerk (zhw): Bad & Heizung Wagner, Blau #1F5FA8. HERO + B2 + linke Hälfte B3 = Kundenseite hell (Talqio buchen.css im Wagner-Branding),
   B1 + rechte Hälfte B3 = Dashboard dunkel (Talqio konto.css: Kontakt mit Anfrage, Liste). {n} = n Einheiten der Kartenbreite */

.zhw-hero,.zhw-b2,.zhw-ruf{--k:#1F5FA8}
.zhw-hero svg,.zhw-b1 svg,.zhw-b2 svg,.zhw-b3 svg{display:block;flex:none}
.zhw-hero svg,.zhw-b2 svg:not([fill]),.zhw-ruf svg,.zhw-b1 .zhw-lb svg,.zhw-r svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Logo der Demo-Firma: blaues Quadrat mit Tropfen, Wortmarke */
.zhw-logo{display:flex;align-items:center;gap:calc(9 * var(--e))}
.zhw-logo>i{display:grid;place-items:center;width:calc(30 * var(--e));height:calc(30 * var(--e));border-radius:calc(8 * var(--e));background:var(--k);color:#fff}
.zhw-logo>i svg{width:calc(16 * var(--e));height:calc(16 * var(--e));fill:#fff!important;stroke:none!important}
.zhw-logo b{display:block;font:700 calc(16 * var(--e))/1 var(--display);letter-spacing:-.02em;color:#0B0B0C}
.zhw-logo small{display:block;margin-top:calc(3 * var(--e));font-size:calc(11 * var(--e));font-weight:500;line-height:1;color:#5F5D58}

/* ---------- HERO: Anfrage am Handy (390 × 844, oben 58 frei für Statusleiste, unten 30 für den Home-Balken) ---------- */
.zhw-hero{padding-top:calc(56 * var(--e));background:#FFFFFF;color:#2B2A28}
.zhw-nav{display:flex;align-items:center;justify-content:space-between;height:calc(54 * var(--e));padding:0 calc(20 * var(--e));border-bottom:1px solid rgba(11,11,12,.08)}
.zhw-nav-r{display:flex;gap:calc(8 * var(--e))}
.zhw-rund{display:grid;place-items:center;width:calc(38 * var(--e));height:calc(38 * var(--e));border-radius:50%;box-shadow:inset 0 0 0 1px rgba(11,11,12,.14);color:#0B0B0C}
.zhw-rund svg{width:calc(16 * var(--e));height:calc(16 * var(--e));stroke-width:1.8}
.zhw-menu{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:calc(4 * var(--e))}
.zhw-menu i{display:block;width:calc(15 * var(--e));height:calc(1.8 * var(--e));border-radius:2px;background:#0B0B0C}
.zhw-seite{padding:calc(20 * var(--e)) calc(20 * var(--e)) 0}
.zhw-h{font:650 calc(25 * var(--e))/1.15 var(--display);letter-spacing:-.02em;color:#0B0B0C}
.zhw-sub{margin-top:calc(6 * var(--e));font-size:calc(14.5 * var(--e));line-height:1.45;color:#5F5D58}
.zhw-f{margin-top:calc(20 * var(--e))}
.zhw-lbl{display:flex;align-items:baseline;justify-content:space-between;gap:calc(8 * var(--e));margin-bottom:calc(9 * var(--e));font-size:calc(14.5 * var(--e));font-weight:600;line-height:1.3;color:#0B0B0C}
.zhw-lbl i{font-style:normal;font-weight:400;font-size:calc(13.5 * var(--e));color:#8F8D87}
.zhw-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(8 * var(--e))}
.zhw-chip{display:flex;align-items:center;gap:calc(10 * var(--e));height:calc(46 * var(--e));padding:0 calc(12 * var(--e));border-radius:calc(12 * var(--e));background:#F4F3F0;box-shadow:inset 0 0 0 1px rgba(11,11,12,.14);
  font-size:calc(14.5 * var(--e));font-weight:500;color:#0B0B0C;white-space:nowrap;transition:box-shadow .15s,background .15s}
.zhw-chip::before{content:"";flex:none;width:calc(18 * var(--e));height:calc(18 * var(--e));border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(11,11,12,.18);transition:background .15s,box-shadow .15s}
.zhw-hero .zhw-chip.on{background:color-mix(in srgb,var(--k) 9%,#F4F3F0);box-shadow:inset 0 0 0 1.5px var(--k)}
.zhw-hero .zhw-chip.on::before{background:var(--k) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/62% no-repeat;box-shadow:none}
.zhw-wert{font:600 calc(20 * var(--e))/1 var(--display);letter-spacing:-.02em;color:#0B0B0C;font-variant-numeric:tabular-nums}
.zhw-wert b{font-weight:inherit}
.zhw-sl{position:relative;height:calc(28 * var(--e))}
.zhw-sl::before,.zhw-sl-f{content:"";position:absolute;left:0;top:50%;height:calc(6 * var(--e));margin-top:calc(-3 * var(--e));border-radius:999px}
.zhw-sl::before{right:0;background:rgba(11,11,12,.12)}
.zhw-sl-f{display:block;width:var(--p);background:var(--k);transition:width .8s var(--ease)}
.zhw-sl-k{position:absolute;top:50%;left:var(--p);width:calc(26 * var(--e));height:calc(26 * var(--e));margin:calc(-13 * var(--e)) 0 0 calc(-13 * var(--e));border-radius:50%;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.08),0 calc(4 * var(--e)) calc(12 * var(--e)) rgba(0,0,0,.22);transition:left .8s var(--ease)}
.zhw-ends{display:flex;justify-content:space-between;margin-top:calc(4 * var(--e));font-size:calc(12.5 * var(--e));color:#8F8D87}
.zhw-fw{display:grid}
.zhw-fw>*{grid-area:1/1;transition:opacity .3s ease,transform .45s var(--ease)}
.zhw-drop{display:flex;align-items:center;justify-content:center;gap:calc(10 * var(--e));height:calc(104 * var(--e));border-radius:calc(12 * var(--e));border:1.5px dashed rgba(11,11,12,.22);background:#F4F3F0;font-size:calc(14.5 * var(--e));font-weight:600;color:#0B0B0C}
.zhw-drop svg{width:calc(20 * var(--e));height:calc(20 * var(--e));color:var(--k);stroke-width:1.8}
.zhw-fotos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(8 * var(--e))}
.zhw-fw.da .zhw-drop,.zhw-fw:not(.da) .zhw-fotos{opacity:0}
.zhw-fw:not(.da) .zhw-fotos{transform:scale(.97)}
.zhw-ft{position:relative;height:calc(104 * var(--e));border-radius:calc(12 * var(--e));overflow:hidden;background:#E9E7E2}
.zhw-ft img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .4s ease}
.zhw-ft:not(.fertig) img{opacity:.55}
.zhw-lade{position:absolute;left:calc(8 * var(--e));right:calc(8 * var(--e));bottom:calc(8 * var(--e));height:calc(5 * var(--e));border-radius:999px;background:rgba(255,255,255,.5);overflow:hidden;transition:opacity .3s ease}
.zhw-lade u{display:block;width:0;height:100%;border-radius:inherit;background:#fff}
.zhw-ft.laedt .zhw-lade u{width:100%;transition:width 1.3s cubic-bezier(.4,.1,.3,1)}
.zhw-ft.fertig .zhw-lade{opacity:0}
.zhw-ok{position:absolute;right:calc(6 * var(--e));top:calc(6 * var(--e));display:grid;place-items:center;width:calc(22 * var(--e));height:calc(22 * var(--e));border-radius:50%;background:var(--k);color:#fff;box-shadow:0 0 0 calc(2 * var(--e)) #fff;
  opacity:0;transform:scale(.5);transition:opacity .25s ease,transform .45s cubic-bezier(.3,1.6,.5,1)}
.zhw-ok svg{width:calc(12 * var(--e));height:calc(12 * var(--e));stroke-width:3}
.zhw-ft.fertig .zhw-ok{opacity:1;transform:none}
.zhw-plus{display:grid;place-items:center;height:calc(104 * var(--e));border-radius:calc(12 * var(--e));border:1.5px dashed rgba(11,11,12,.22);color:#5F5D58}
.zhw-plus svg{width:calc(20 * var(--e));height:calc(20 * var(--e))}
.zhw-in{position:relative;display:flex;align-items:center;height:calc(50 * var(--e));padding:0 calc(14 * var(--e));border-radius:calc(12 * var(--e));background:#F4F3F0;box-shadow:inset 0 0 0 1px rgba(11,11,12,.14);
  font-size:calc(17 * var(--e));color:#0B0B0C;font-variant-numeric:tabular-nums;transition:box-shadow .2s ease}
.zhw-hero .zhw-in.fokus,.zhw-b2 .zhw-in.fokus{box-shadow:inset 0 0 0 1.5px var(--k),0 0 0 calc(3 * var(--e)) color-mix(in srgb,var(--k) 22%,transparent)}
.zhw-hero .zhw-in.leer .zhw-plz,.zhw-b2 .zhw-in.leer .zhw-plz{color:#8F8D87}
.zhw-caret{display:inline-block;width:1.5px;height:1.15em;margin-left:1px;background:var(--k);opacity:0}
.zhw-hero .zhw-in.fokus .zhw-caret,.zhw-b2 .zhw-in.fokus .zhw-caret{opacity:1}
.zhw-hero .zhw-in.leer .zhw-caret,.zhw-b2 .zhw-in.leer .zhw-caret{order:-1;margin:0 1px 0 0}
.zhw-in-ok{position:absolute;right:calc(14 * var(--e));top:50%;display:grid;place-items:center;width:calc(22 * var(--e));height:calc(22 * var(--e));margin-top:calc(-11 * var(--e));border-radius:50%;background:#1F8A55;color:#fff;
  opacity:0;transform:scale(.5);transition:opacity .25s ease,transform .45s cubic-bezier(.3,1.6,.5,1)}
.zhw-in-ok svg{width:calc(12 * var(--e));height:calc(12 * var(--e));stroke-width:3}
.zhw-hero .zhw-in.ok .zhw-in-ok{opacity:1;transform:none}
.zhw-gebiet{display:flex;align-items:center;gap:calc(6 * var(--e));margin-top:calc(9 * var(--e));font-size:calc(14 * var(--e));font-weight:600;line-height:1.3;color:#1F7A4D;opacity:0;transform:translateY(calc(-3 * var(--e)));transition:opacity .3s ease,transform .45s var(--ease)}
.zhw-gebiet svg{width:calc(16 * var(--e));height:calc(16 * var(--e))}
.zhw-hero .zhw-gebiet.zeig{opacity:1;transform:none}
.zhw-b{position:relative;display:grid;height:calc(52 * var(--e));margin-top:calc(22 * var(--e));border-radius:999px;background:var(--k);color:#fff;font-size:calc(16 * var(--e));font-weight:600;transition:transform .14s ease,background .2s ease}
.zhw-b>span{grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:calc(8 * var(--e));transition:opacity .25s ease}
.zhw-b svg{width:calc(17 * var(--e));height:calc(17 * var(--e));stroke-width:2.6}
.zhw-b-ok{opacity:0}
.zhw-hero .zhw-b.druck{transform:scale(.97);background:color-mix(in srgb,var(--k) 84%,#000)}
.zhw-hero .zhw-b.weg .zhw-b-t{opacity:0}
.zhw-hero .zhw-b.weg .zhw-b-ok{opacity:1}
/* Finger statt Mauszeiger: runder, halbtransparenter Punkt wie beim Aufnehmen am iPhone */
.zhw-finger i{display:block;width:calc(34 * var(--e));height:calc(34 * var(--e));margin:calc(-17 * var(--e)) 0 0 calc(-17 * var(--e));border-radius:50%;background:rgba(40,40,46,.26);
  box-shadow:0 0 0 calc(1.5 * var(--e)) rgba(255,255,255,.85),0 calc(3 * var(--e)) calc(10 * var(--e)) rgba(0,0,0,.18);transition:transform .16s ease,background .16s ease}
.zhw-finger.tipp i{transform:scale(.8);background:rgba(40,40,46,.42)}

/* ---------- B1: Anfrage mit Fotos im Dashboard (Kontakt, Anfrage, Galerie) ---------- */
.zhw-b1{--e:calc(100cqw / 640);display:flex;flex-direction:column;padding:calc(18 * var(--e)) calc(20 * var(--e)) 0;background:#0B0B0C;color:#D6D4CE}
.zhw-k-kopf{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:calc(10 * var(--e));margin-bottom:calc(14 * var(--e))}
.zhw-k-kopf>div{min-width:0}
.zhw-k-h{display:block;font:600 calc(17 * var(--e))/1.15 var(--display);letter-spacing:-.015em;color:#F4F3F0}
.zhw-k-lead{display:block;margin-top:calc(4 * var(--e));font-size:calc(10.5 * var(--e));line-height:1.4;color:#A9A7A1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zhw-phase{display:inline-flex;align-items:center;gap:calc(5 * var(--e));height:calc(21 * var(--e));padding:0 calc(8 * var(--e));border-radius:999px;background:#1C1C1F;box-shadow:inset 0 0 0 1px rgba(244,243,240,.09);
  font-size:calc(10 * var(--e));font-weight:500;line-height:1;color:#F4F3F0;white-space:nowrap;flex:none}
.zhw-phase::before{content:"";width:calc(5.5 * var(--e));height:calc(5.5 * var(--e));border-radius:50%;background:#FF4800;flex:none}
.zhw-k-in{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,calc(226 * var(--e))) minmax(0,1fr);gap:calc(16 * var(--e));padding-bottom:calc(18 * var(--e))}
.zhw-k-links,.zhw-k-rechts{min-width:0;min-height:0;display:flex;flex-direction:column}
.zhw-tit{flex:none;display:flex;align-items:baseline;gap:calc(6 * var(--e));margin:0 0 calc(8 * var(--e));font-size:calc(9 * var(--e));font-weight:600;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:#F4F3F0}
.zhw-tit span{font-size:calc(9.5 * var(--e));font-weight:500;letter-spacing:0;text-transform:none;color:#A9A7A1}
.zhw-qa{display:grid;gap:calc(9 * var(--e));margin:0;padding:calc(11 * var(--e)) calc(12 * var(--e)) calc(12 * var(--e));border-radius:calc(10 * var(--e));background:#141416;border:1px solid rgba(244,243,240,.09)}
.zhw-qa>div{min-width:0;transition:opacity .4s ease,transform .5s var(--ease)}
.zhw-b1 .zhw-qa>div:not(.da){opacity:0;transform:translateY(calc(4 * var(--e)))}
.zhw-qa dt{font-size:calc(9.5 * var(--e));line-height:1.35;color:#A9A7A1}
.zhw-qa dd{margin:calc(1 * var(--e)) 0 0;font-size:calc(11.5 * var(--e));line-height:1.4;color:#F4F3F0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zhw-qa em{margin-left:calc(4 * var(--e));font-style:normal;font-size:calc(10 * var(--e));font-weight:500;color:#3DD68C}
.zhw-gal{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:calc(6 * var(--e))}
.zhw-g{position:relative;min-height:0;border-radius:calc(9 * var(--e));overflow:hidden;background:#1C1C1F;transition:opacity .45s ease,transform .6s var(--ease),box-shadow .25s ease}
.zhw-g::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(244,243,240,.1);transition:box-shadow .25s ease}
.zhw-g1{grid-row:1/3}
.zhw-g img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zhw-b1 .zhw-g:not(.da){opacity:0;transform:scale(.96)}
.zhw-b1 .zhw-g.hov::after{box-shadow:inset 0 0 0 calc(2 * var(--e)) #F4F3F0}
.zhw-lb{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:rgba(6,6,7,.985);opacity:0;pointer-events:none;transition:opacity .35s ease}
.zhw-lb>img{display:block;height:calc(252 * var(--e));width:calc(252 * var(--e));object-fit:cover;border-radius:calc(8 * var(--e));box-shadow:0 calc(20 * var(--e)) calc(50 * var(--e)) rgba(0,0,0,.6);transform:scale(.92);transition:transform .55s var(--ease)}
.zhw-b1 .zhw-lb.zeig{opacity:1}
.zhw-b1 .zhw-lb.zeig>img{transform:none}
.zhw-lb-top{position:absolute;left:calc(18 * var(--e));right:calc(18 * var(--e));top:calc(14 * var(--e));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;font-size:calc(10 * var(--e));color:#A9A7A1}
.zhw-lb-top span:nth-child(2){color:#F4F3F0;font-weight:500}
.zhw-lb-x{justify-self:end;display:grid;place-items:center;width:calc(26 * var(--e));height:calc(26 * var(--e));border-radius:50%;background:#1C1C1F;box-shadow:inset 0 0 0 1px rgba(244,243,240,.12);color:#F4F3F0;transition:background .2s}
.zhw-lb-x svg{width:calc(12 * var(--e));height:calc(12 * var(--e))}
.zhw-b1 .zhw-lb-x.hov{background:#33333A}
.zhw-lb-pf{position:absolute;top:50%;display:grid;place-items:center;width:calc(30 * var(--e));height:calc(30 * var(--e));margin-top:calc(-15 * var(--e));border-radius:50%;background:#1C1C1F;box-shadow:inset 0 0 0 1px rgba(244,243,240,.12);color:#F4F3F0}
.zhw-lb-pf svg{width:calc(14 * var(--e));height:calc(14 * var(--e))}
.zhw-lb-pf.l{left:calc(50% - calc(176 * var(--e)))}
.zhw-lb-pf.r{right:calc(50% - calc(176 * var(--e)))}
.zhw-b1 .d-toast{right:calc(80 * var(--e));top:calc(17 * var(--e))}

/* ---------- B2: Einzugsgebiet nach Postleitzahl (Kundenseite, gebaute Grafik mit Radius) ---------- */
.zhw-b2{--e:calc(100cqw / 440);--s:1.2;display:flex;flex-direction:column;background:#FFFFFF;color:#2B2A28}
.zhw-karte{position:relative;flex:1;min-height:0;overflow:hidden;background:#EEF2F6;border-bottom:1px solid rgba(11,11,12,.08);
  background-image:linear-gradient(rgba(31,95,168,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(31,95,168,.05) 1px,transparent 1px);background-size:calc(22 * var(--e)) calc(22 * var(--e));background-position:center}
.zhw-karte>*{position:absolute;left:calc(50% + var(--x,0) * var(--s) * var(--e));top:calc(50% + calc(8 * var(--e)) + var(--y,0) * var(--s) * var(--e))}
.zhw-ring{width:calc(140 * var(--s) * var(--e));height:calc(140 * var(--s) * var(--e));margin:calc(-70 * var(--s) * var(--e)) 0 0 calc(-70 * var(--s) * var(--e));border-radius:50%;
  background:radial-gradient(circle,rgba(31,95,168,.16),rgba(31,95,168,.08) 70%);box-shadow:inset 0 0 0 1.5px rgba(31,95,168,.55)}
.zhw-ring i{position:absolute;left:50%;top:calc(-8 * var(--e));transform:translateX(-50%);padding:calc(2 * var(--e)) calc(7 * var(--e));border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(31,95,168,.35);
  font-style:normal;font-size:calc(9.5 * var(--e));font-weight:600;line-height:1.3;color:var(--k);white-space:nowrap}
.zhw-ort{display:flex;align-items:center;gap:calc(5 * var(--e));transform:translate(calc(-2.5 * var(--e)),-50%);font-size:calc(9.5 * var(--e));font-weight:500;line-height:1;color:#6B7684;white-space:nowrap}
.zhw-ort::before{content:"";flex:none;width:calc(5 * var(--e));height:calc(5 * var(--e));border-radius:50%;background:#9AA6B4}
.zhw-ort.li{flex-direction:row-reverse;transform:translate(calc(-100% + calc(2.5 * var(--e))),-50%)}
.zhw-mitte{display:flex;align-items:center;gap:calc(6 * var(--e));transform:translate(calc(-10 * var(--e)),-50%)}
.zhw-mitte i{display:grid;place-items:center;width:calc(20 * var(--e));height:calc(20 * var(--e));border-radius:calc(6 * var(--e));background:var(--k);box-shadow:0 0 0 calc(2.5 * var(--e)) #fff,0 calc(2 * var(--e)) calc(6 * var(--e)) rgba(0,0,0,.25)}
.zhw-mitte i svg{width:calc(11 * var(--e));height:calc(11 * var(--e));fill:#fff!important;stroke:none!important}
.zhw-mitte b{padding:calc(3 * var(--e)) calc(7 * var(--e));border-radius:calc(6 * var(--e));background:#0B0B0C;font-size:calc(9.5 * var(--e));font-weight:600;line-height:1.25;color:#fff;white-space:nowrap}
.zhw-pin{display:flex;align-items:center;gap:calc(5 * var(--e));transform:translate(calc(-6 * var(--e)),-50%);transition:opacity .35s ease,transform .55s cubic-bezier(.3,1.5,.5,1)}
.zhw-pin i{display:block;width:calc(12 * var(--e));height:calc(12 * var(--e));border-radius:50%;box-shadow:0 0 0 calc(2.5 * var(--e)) #fff,0 calc(2 * var(--e)) calc(6 * var(--e)) rgba(0,0,0,.25)}
.zhw-pin b{padding:calc(3 * var(--e)) calc(7 * var(--e));border-radius:999px;font-size:calc(9.5 * var(--e));font-weight:600;line-height:1.25;white-space:nowrap}
.zhw-pin-a i{background:#1F8A55}
.zhw-pin-a b{background:#E3F2E9;color:#155C38;box-shadow:inset 0 0 0 1px rgba(31,138,85,.3)}
.zhw-pin-b{--x:96;--y:64;flex-direction:row-reverse;transform:translate(calc(-100% + calc(6 * var(--e))),-50%)}
.zhw-pin-b i{background:#C77700}
.zhw-pin-b b{background:#FBEFDC;color:#7A4600;box-shadow:inset 0 0 0 1px rgba(199,119,0,.32)}
.zhw-b2 .zhw-pin:not(.da){opacity:0;transform:translate(calc(-6 * var(--e)),-80%)}
.zhw-b2 .zhw-pin-b:not(.da){transform:translate(calc(-100% + calc(6 * var(--e))),-80%)}
.zhw-weit{width:calc(200 * var(--s) * var(--e));height:0;border-top:1.5px dashed rgba(199,119,0,.75);transform-origin:0 0;transform:rotate(34deg);transition:clip-path .7s var(--ease)}
.zhw-weit i{position:absolute;right:calc(-2 * var(--e));top:calc(-5.5 * var(--e));width:calc(8 * var(--e));height:calc(8 * var(--e));border:solid rgba(199,119,0,.85);border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
.zhw-b2 .zhw-weit:not(.da){clip-path:inset(-10px 100% -10px 0)}
.zhw-b2 .zhw-weit.da{clip-path:inset(-10px 0 -10px 0)}
.zhw-b2-unten{flex:none;padding:calc(14 * var(--e)) calc(20 * var(--e)) calc(18 * var(--e))}
.zhw-b2 .zhw-lbl{margin-bottom:calc(7 * var(--e));font-size:calc(12 * var(--e));}
.zhw-in-s{height:calc(40 * var(--e));padding:0 calc(12 * var(--e));border-radius:calc(10 * var(--e));font-size:calc(14 * var(--e))}
.zhw-msgs{display:grid;margin-top:calc(10 * var(--e))}
.zhw-msgs>*{grid-area:1/1}
.zhw-msg{display:flex;align-items:flex-start;gap:calc(8 * var(--e));padding:calc(9 * var(--e)) calc(11 * var(--e));border-radius:calc(10 * var(--e));font-size:calc(11.5 * var(--e));line-height:1.42;opacity:0;transform:translateY(calc(4 * var(--e)));transition:opacity .35s ease,transform .5s var(--ease)}
.zhw-msg svg{width:calc(15 * var(--e));height:calc(15 * var(--e));margin-top:calc(1 * var(--e))}
.zhw-msg b{font-weight:600}
.zhw-msg.gut{background:#E8F4EC;color:#1B4D33}
.zhw-msg.gut svg{color:#1F8A55;stroke-width:2.6}
.zhw-msg.weit{background:#FBF1E0;color:#5C3A06}
.zhw-msg.weit svg{color:#C77700}
.zhw-b2 .zhw-msg.zeig{opacity:1;transform:none}
.zhw-b2 .d-cur.gast span{background:#1F5FA8}
.zhw-in-s .zhw-plz.mark{background:color-mix(in srgb,var(--k) 22%,transparent)}

/* ---------- B3: Rückruf zum Wunschtermin (vorn die Kundenseite, hinten das Dashboard) ---------- */
.zhw-b3{--e:calc(100cqw / 640);background:#0B0B0C}
.zhw-dash{position:absolute;left:calc(262 * var(--e));top:calc(30 * var(--e));right:calc(-24 * var(--e));bottom:calc(-24 * var(--e));padding:calc(20 * var(--e)) calc(44 * var(--e)) calc(20 * var(--e)) calc(84 * var(--e));border-radius:calc(14 * var(--e));background:#0B0B0C;
  box-shadow:inset 0 0 0 1px rgba(244,243,240,.11),inset 0 1px 0 rgba(244,243,240,.12),0 0 calc(80 * var(--e)) calc(-20 * var(--e)) rgba(255,72,0,.18)}
.zhw-dash-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(10 * var(--e));margin-bottom:calc(14 * var(--e))}
.zhw-dash-kopf b{display:block;font:600 calc(16 * var(--e))/1.15 var(--display);letter-spacing:-.015em;color:#F4F3F0}
.zhw-dash-kopf div span{display:block;margin-top:calc(4 * var(--e));font-size:calc(10 * var(--e));color:#A9A7A1}
.zhw-zahl{display:inline-flex;align-items:center;gap:calc(4 * var(--e));height:calc(22 * var(--e));padding:0 calc(9 * var(--e));border-radius:999px;background:#1C1C1F;box-shadow:inset 0 0 0 1px rgba(244,243,240,.09);font-size:calc(10 * var(--e));font-weight:500;color:#A9A7A1;white-space:nowrap}
.zhw-zahl b{display:inline;font:600 calc(10.5 * var(--e))/1 var(--body);color:#F4F3F0;font-variant-numeric:tabular-nums}
.zhw-rl{border-radius:calc(10 * var(--e));background:#141416;border:1px solid rgba(244,243,240,.09);overflow:hidden}
.zhw-r{display:grid;grid-template-columns:calc(62 * var(--e)) minmax(0,1fr) auto;align-items:center;gap:calc(10 * var(--e));min-height:calc(48 * var(--e));padding:calc(7 * var(--e)) calc(12 * var(--e));transition:background 1.4s ease}
.zhw-rl>.zhw-r+.zhw-r,.zhw-rl>.zhw-r+.d-auf .zhw-r{border-top:1px solid rgba(244,243,240,.09)}
.zhw-r-t{font-size:calc(10.5 * var(--e));font-weight:600;color:#F4F3F0;font-variant-numeric:tabular-nums;white-space:nowrap}
.zhw-r-m{min-width:0}
.zhw-r-m b{display:block;font-size:calc(10.5 * var(--e));font-weight:600;line-height:1.3;color:#F4F3F0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zhw-r-m span{display:block;margin-top:calc(1 * var(--e));font-size:calc(9 * var(--e));line-height:1.35;color:#A9A7A1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zhw-r-c{display:inline-flex;align-items:center;gap:calc(5 * var(--e));font-size:calc(9.5 * var(--e));font-weight:500;color:#6F6D68;white-space:nowrap}
.zhw-r-c svg{width:calc(11 * var(--e));height:calc(11 * var(--e));stroke-width:2.2}
.zhw-r-c.knopf{height:calc(23 * var(--e));padding:0 calc(10 * var(--e));border-radius:999px;background:#1C1C1F;box-shadow:inset 0 0 0 1px rgba(244,243,240,.09);color:#F4F3F0}
.zhw-r.erledigt .zhw-r-t,.zhw-r.erledigt .zhw-r-m b{color:#6F6D68}
.zhw-r.erledigt .zhw-r-m b{text-decoration:line-through;text-decoration-color:rgba(111,109,104,.7)}
.zhw-r-neu .zhw-r-t{color:#FF6A2A}
.zhw-b3 .zhw-r.frisch{background:rgba(255,72,0,.09);transition:background .3s ease}
.zhw-b3 .d-toast{right:calc(44 * var(--e));bottom:calc(44 * var(--e))}
.zhw-ruf{position:absolute;left:calc(24 * var(--e));top:50%;z-index:2;width:calc(300 * var(--e));padding:calc(18 * var(--e)) calc(18 * var(--e)) calc(18 * var(--e));border-radius:calc(16 * var(--e));background:#FFFFFF;color:#2B2A28;transform:translateY(-50%);
  box-shadow:0 0 0 1px rgba(11,11,12,.08),0 calc(30 * var(--e)) calc(70 * var(--e)) calc(-18 * var(--e)) rgba(0,0,0,.85),0 calc(8 * var(--e)) calc(24 * var(--e)) rgba(0,0,0,.35)}
.zhw-logo-s>i{width:calc(26 * var(--e));height:calc(26 * var(--e));border-radius:calc(7 * var(--e))}
.zhw-logo-s>i svg{width:calc(14 * var(--e));height:calc(14 * var(--e))}
.zhw-logo-s b{font-size:calc(14 * var(--e))}
.zhw-logo-s small{font-size:calc(9.5 * var(--e))}
.zhw-ruf-h{margin-top:calc(16 * var(--e));font:650 calc(17.5 * var(--e))/1.2 var(--display);letter-spacing:-.02em;color:#0B0B0C}
.zhw-ruf-sub{margin-top:calc(4 * var(--e));font-size:calc(11.5 * var(--e));line-height:1.45;color:#5F5D58}
.zhw-ruf-tag{margin:calc(14 * var(--e)) 0 calc(6 * var(--e));font-size:calc(10.5 * var(--e));font-weight:600;color:#0B0B0C}
.zhw-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(6 * var(--e))}
.zhw-slot{display:grid;place-items:center;height:calc(32 * var(--e));border-radius:calc(9 * var(--e));box-shadow:inset 0 0 0 1px rgba(11,11,12,.14);font-size:calc(11 * var(--e));font-weight:600;color:#0B0B0C;white-space:nowrap;font-variant-numeric:tabular-nums;transition:background .15s,color .15s,box-shadow .15s}
.zhw-ruf .zhw-slot.on{background:var(--k);color:#fff;box-shadow:none}
.zhw-ruf-fuss{display:grid;margin-top:calc(16 * var(--e))}
.zhw-ruf-fuss>*{grid-area:1/1;transition:opacity .3s ease,transform .45s var(--ease)}
.zhw-ruf-b{display:grid;place-items:center;height:calc(38 * var(--e));border-radius:999px;background:var(--k);font-size:calc(12 * var(--e));font-weight:600;color:#fff}
.zhw-ruf-b.druck{transform:scale(.96);background:color-mix(in srgb,var(--k) 84%,#000)}
.zhw-ruf-ok{display:flex;align-items:center;gap:calc(8 * var(--e));min-height:calc(38 * var(--e));padding:0 calc(12 * var(--e));border-radius:calc(10 * var(--e));background:#E8F4EC;font-size:calc(11 * var(--e));font-weight:500;line-height:1.35;color:#1B4D33}
.zhw-ruf-ok svg{width:calc(15 * var(--e));height:calc(15 * var(--e));color:#1F8A55;stroke-width:2.6}
.zhw-ruf-fuss.fertig .zhw-ruf-b,.zhw-ruf-fuss:not(.fertig) .zhw-ruf-ok{opacity:0}
.zhw-ruf-fuss:not(.fertig) .zhw-ruf-ok{transform:translateY(calc(4 * var(--e)))}
.zhw-b3 .d-cur.gast span{background:#1F5FA8}

/* ---------- Tablet: Kacheln volle Breite im Format 16:10 ---------- */
@container (min-width:600px){
  .zhw-b2{--e:calc(100cqw / 640);--s:1.5;flex-direction:row}
  .zhw-karte{border-bottom:0;border-right:1px solid rgba(11,11,12,.08)}
  .zhw-b2-unten{width:calc(250 * var(--e));display:flex;flex-direction:column;justify-content:center;padding:calc(24 * var(--e))}
}
/* ---------- Handy: quadratische Kacheln, ca. 295 px ---------- */
@container (max-width:480px){
  .zhw-b1{--e:calc(100cqw / 360);padding:calc(16 * var(--e)) calc(16 * var(--e)) 0}
  .zhw-k-kopf{margin-bottom:calc(12 * var(--e))}
  .zhw-k-h{font-size:calc(16 * var(--e))}
  .zhw-k-lead{font-size:calc(10.5 * var(--e))}
  .zhw-k-lead .zhw-weg-h{display:none}
  .zhw-k-in{display:flex;flex-direction:column;gap:calc(12 * var(--e));padding-bottom:calc(16 * var(--e))}
  .zhw-k-rechts{order:-1;flex:1;min-height:0}
  .zhw-k-links{flex:none}
  .zhw-k-links .zhw-tit{display:none}
  .zhw-qa{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(7 * var(--e)) calc(12 * var(--e));padding:calc(9 * var(--e)) calc(11 * var(--e))}
  .zhw-qa>div:nth-child(n+5){display:none}
  .zhw-qa dt{font-size:calc(10 * var(--e))}
  .zhw-qa dd{font-size:calc(12 * var(--e))}
  .zhw-qa em{display:none}
  .zhw-lb>img{width:calc(240 * var(--e));height:calc(240 * var(--e))}
  .zhw-lb-pf{display:none}
  .zhw-lb-top{font-size:calc(10.5 * var(--e))}
  .zhw-lb-top span:first-child{visibility:hidden}
  .zhw-b1 .d-toast{left:calc(16 * var(--e));right:auto;top:calc(98 * var(--e))}

  .zhw-b3{--e:calc(100cqw / 360)}
  .zhw-ruf{left:calc(14 * var(--e));top:calc(14 * var(--e));width:calc(250 * var(--e));padding:calc(15 * var(--e));transform:none}
  .zhw-ruf-sub,.zhw-morgen{display:none}
  .zhw-ruf-h{margin-top:calc(12 * var(--e));font-size:calc(16 * var(--e))}
  .zhw-ruf-tag{margin:calc(10 * var(--e)) 0 calc(6 * var(--e));font-size:calc(11 * var(--e))}
  .zhw-slot{height:calc(32 * var(--e));font-size:calc(11.5 * var(--e))}
  .zhw-ruf-fuss{margin-top:calc(12 * var(--e))}
  .zhw-ruf-b{height:calc(36 * var(--e));font-size:calc(12 * var(--e))}
  .zhw-ruf-ok{font-size:calc(10.5 * var(--e));padding:0 calc(10 * var(--e))}
  .zhw-dash{left:calc(86 * var(--e));top:calc(150 * var(--e));right:calc(-16 * var(--e));bottom:calc(-16 * var(--e));padding:calc(70 * var(--e)) calc(30 * var(--e)) calc(16 * var(--e)) calc(16 * var(--e))}
  .zhw-dash-kopf{margin-bottom:calc(10 * var(--e))}
  .zhw-r{grid-template-columns:calc(58 * var(--e)) minmax(0,1fr);min-height:calc(44 * var(--e));padding:calc(6 * var(--e)) calc(10 * var(--e))}
  .zhw-r-c{display:none}
  .zhw-r.erledigt,.zhw-r.erledigt+.zhw-r{display:none}
  .zhw-rl>.zhw-r+.d-auf .zhw-r{border-top:1px solid rgba(244,243,240,.09)}
  .zhw-b3 .d-toast{display:none}
}
@container (max-width:360px){
  .zhw-b2{--e:calc(100cqw / 360);--s:1.05}
  .zhw-b2-unten{padding:calc(12 * var(--e)) calc(16 * var(--e)) calc(14 * var(--e))}
  .zhw-b2 .zhw-lbl{font-size:calc(12 * var(--e))}
  .zhw-in-s{height:calc(38 * var(--e));font-size:calc(14 * var(--e))}
  .zhw-msg{font-size:calc(11.5 * var(--e));padding:calc(8 * var(--e)) calc(10 * var(--e))}
  .zhw-ort{font-size:calc(10 * var(--e))}
  .zhw-ort-k{display:none}
}
@media (prefers-reduced-motion:reduce){.zhw-hero *,.zhw-b1 *,.zhw-b2 *,.zhw-b3 *{transition:none!important}}