/* Beispiel-Website „Musterbetrieb Haustechnik“ — fiktiv, Hanper GmbH.
   Eigenes Namespace .hwdemo, eigene Schriftfamilien-Namen.
   Schriften aus dem site-v2-Paket, lokal, keine Google Fonts. */

@font-face{
  font-family:"HwDemo DM Sans";
  src:url("/hanper/hpv2-assets/fonts/dm-sans-latin-var.woff2") format("woff2");
  font-weight:100 1000;font-style:normal;font-display:swap}
@font-face{
  font-family:"HwDemo Outfit";
  src:url("/hanper/hpv2-assets/fonts/outfit-latin-var.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}

.hwdemo{
  --ink:#142033; --muted:#526075; --paper:#f4f7fb; --card:#fff;
  --line:#d7e0ec; --blue:#0b5ea8; --blue-2:#1473c4; --amber:#e08a1e;
  --ok:#0f7a45; --max:1080px;
  --font:"HwDemo DM Sans",system-ui,sans-serif;
  --display:"HwDemo Outfit",var(--font);
  margin:0;color:var(--ink);background:var(--paper);color-scheme:light;
  font-family:var(--font);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased}
.hwdemo *,.hwdemo *::before,.hwdemo *::after{box-sizing:border-box}
.hwdemo img,.hwdemo svg{max-width:100%;height:auto}
.hwdemo a{color:var(--blue)}
.hwdemo h1,.hwdemo h2,.hwdemo h3{font-family:var(--display);line-height:1.15;letter-spacing:-.02em;margin:0 0 .45em}
.hwdemo h1{font-size:clamp(1.9rem,4.6vw,3rem)}
.hwdemo h2{font-size:clamp(1.45rem,3vw,2rem)}
.hwdemo p{margin:0 0 .8em}
.hwdemo .wrap{width:min(100% - 2rem,var(--max));margin-inline:auto}

.hwdemo .banner{
  background:#0b3e73;color:#fff;text-align:center;font-size:.92rem;padding:.7rem 1rem}
.hwdemo .banner a{color:#fff;font-weight:700}
.hwdemo .banner strong{letter-spacing:.04em}

.hwdemo header.top{
  position:sticky;top:0;z-index:5;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hwdemo .nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px}
.hwdemo .logo{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink);font-weight:700}
.hwdemo .logo span{display:block;font-size:.78rem;font-weight:500;color:var(--muted)}
.hwdemo .links{display:flex;gap:1.05rem}
.hwdemo .links a{text-decoration:none;color:var(--ink);font-size:.95rem}
.hwdemo .links a:hover{color:var(--blue)}

.hwdemo .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:46px;padding:.55rem 1.1rem;border-radius:999px;border:0;cursor:pointer;
  font:inherit;font-weight:700;text-decoration:none;color:#fff;background:var(--blue)}
.hwdemo .btn.call{background:linear-gradient(135deg,var(--blue-2),var(--blue))}
.hwdemo .btn.ghost{background:#fff;color:var(--blue);border:1px solid #b9cbe0}
.hwdemo .btn.full{width:100%}
.hwdemo .btn.small{min-height:40px;padding:.4rem .9rem;font-size:.92rem}
.hwdemo .btn:disabled{opacity:.6;cursor:default}

.hwdemo .hero{padding:2.6rem 0 1.4rem;background:
  radial-gradient(700px 280px at 85% 0%,rgba(20,115,196,.16),transparent 70%),
  linear-gradient(180deg,#fff,#f4f7fb)}
.hwdemo .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:center}
.hwdemo .eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;font-weight:700;color:var(--blue);margin:0 0 .6rem}
.hwdemo .lead{font-size:1.08rem;color:var(--muted);max-width:38rem}
.hwdemo .cta-row{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.1rem 0 .9rem}
.hwdemo .trust{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem .9rem;color:var(--muted);font-size:.92rem}
.hwdemo .trust b{color:var(--ink)}

.hwdemo .scene{
  background:#fff;border:1px solid var(--line);border-radius:22px;padding:1rem;
  box-shadow:0 18px 40px rgba(20,40,70,.08)}
.hwdemo .scene svg{display:block;width:100%;height:auto}

.hwdemo .section{padding:2.6rem 0}
.hwdemo .sub{color:var(--muted);max-width:40rem}
.hwdemo .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;margin-top:1.1rem}
.hwdemo .card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.05rem}
.hwdemo .card p{color:var(--muted);margin:0;font-size:.95rem}
.hwdemo .card.accent{background:#142033;color:#fff;border-color:#142033}
.hwdemo .card.accent p{color:#c9d4e4}
.hwdemo .ic{font-size:1.4rem;margin-bottom:.35rem}

.hwdemo .band{background:#102033;color:#e8eef6;padding:2.6rem 0}
.hwdemo .band h2,.hwdemo .band p{color:#e8eef6}
.hwdemo .band .eyebrow{color:#8ec5f5}
.hwdemo .two{display:grid;grid-template-columns:1.2fr .8fr;gap:1.6rem;align-items:start}
.hwdemo .checks{list-style:none;padding:0;margin:0 0 1rem}
.hwdemo .checks li{padding-left:1.3rem;position:relative;margin:.35rem 0}
.hwdemo .checks li::before{content:"✓";position:absolute;left:0;color:#7ddea8}
.hwdemo .widget-box{
  background:rgba(255,255,255,.06);border:1px dashed rgba(142,197,245,.55);
  border-radius:16px;padding:1rem;min-height:88px}
.hwdemo .widget-box p{font-size:.9rem;color:#c5d2e4}

.hwdemo .steps{list-style:none;padding:0;margin:1rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;counter-reset:s}
.hwdemo .steps li{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1rem}
.hwdemo .steps b{display:block;margin-bottom:.25rem}
.hwdemo .steps span{color:var(--muted);font-size:.95rem}
.hwdemo .area{margin-top:1rem;background:#fff;border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;color:var(--muted)}

.hwdemo .form-wrap{align-items:start}
.hwdemo .form{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.15rem;box-shadow:0 10px 30px rgba(20,40,70,.05)}
.hwdemo .form label{display:block;font-weight:650;font-size:.9rem;margin-bottom:.7rem}
.hwdemo .form input,.hwdemo .form select,.hwdemo .form textarea{
  display:block;width:100%;margin-top:.3rem;padding:.65rem .7rem;border:1px solid #c5d2e2;border-radius:10px;
  font:inherit;background:#fff;color:var(--ink)}
.hwdemo .form input.err,.hwdemo .form select.err,.hwdemo .form textarea.err{border-color:#b42318}
.hwdemo .row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.hwdemo .chk{display:flex;gap:.5rem;align-items:flex-start;font-weight:500}
.hwdemo .chk input{width:auto;margin-top:.2rem}
.hwdemo .ok{background:#e8f7ee;color:var(--ok);border-radius:12px;padding:.75rem .85rem;margin:.6rem 0 0}
.hwdemo .contact-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1rem}
.hwdemo .muted{color:var(--muted);font-size:.9rem}

.hwdemo details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.75rem .9rem;margin:.45rem 0}
.hwdemo summary{cursor:pointer;font-weight:700}
.hwdemo details p{margin:.45rem 0 0;color:var(--muted)}

.hwdemo .mail{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:1rem 1.1rem;font-size:.95rem}
.hwdemo .mail .meta{color:var(--muted);font-size:.85rem}
.hwdemo .band .mail p{color:#142033} /* QA 08.10.: .band p machte den Mailtext fast unsichtbar */
.hwdemo .band .mail p.meta{color:#4a5a70}
.hwdemo .banner a{display:inline-block;min-height:24px;line-height:24px} /* QA 08.10.: Tippziel */

.hwdemo footer.foot{background:#0e1a2b;color:#c5d0de;padding:1.6rem 0 5.2rem;font-size:.9rem}
.hwdemo footer.foot a{color:#fff}
.hwdemo .mobile-bar{display:none}

@media (max-width:900px){
  .hwdemo .hero-grid,.hwdemo .two{grid-template-columns:1fr}
  .hwdemo .cards{grid-template-columns:1fr 1fr}
  .hwdemo .steps{grid-template-columns:1fr}
}
@media (max-width:700px){
  .hwdemo .links{display:none}
  .hwdemo .cards,.hwdemo .row{grid-template-columns:1fr}
  .hwdemo .cta-row .btn{width:100%}
  .hwdemo .mobile-bar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:6;background:#fff;border-top:1px solid var(--line)}
  .hwdemo .mobile-bar a{flex:1;text-align:center;padding:.85rem .4rem;text-decoration:none;font-weight:700}
  .hwdemo .mobile-bar .m-call{background:var(--blue);color:#fff}
  .hwdemo .mobile-bar .m-req{color:var(--blue)}
}

/* ——— Demo Website-Chat (links unten) ——— */
.hwdemo .hwchat{position:fixed;z-index:40;left:1rem;bottom:1rem;font-family:var(--font)}
.hwdemo .hwchat-launcher{
  display:inline-flex;align-items:center;gap:.45rem;min-height:48px;padding:.55rem 1.05rem;
  border:0;border-radius:999px;cursor:pointer;font:inherit;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#e08a1e,#c56f0c);
  box-shadow:0 10px 28px rgba(20,40,70,.22)}
.hwdemo .hwchat-launcher::before{content:"💬";font-size:1.05rem}
.hwdemo .hwchat-panel{
  position:absolute;left:0;bottom:3.6rem;width:min(92vw,360px);max-height:min(72vh,560px);
  display:flex;flex-direction:column;background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 22px 50px rgba(20,40,70,.22)}
.hwdemo .hwchat-panel[hidden]{display:none!important}
.hwdemo .hwchat-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:.6rem;
  padding:.85rem 1rem;background:#102033;color:#e8eef6}
.hwdemo .hwchat-head strong{display:block;font-family:var(--display)}
.hwdemo .hwchat-badge{display:block;font-size:.72rem;color:#8ec5f5;margin-top:.2rem;line-height:1.35}
.hwdemo .hwchat-close{
  border:0;background:transparent;color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;padding:.1rem .35rem}
.hwdemo .hwchat-note{
  margin:0;padding:.55rem .9rem;font-size:.78rem;color:#526075;background:#eef4fb;border-bottom:1px solid var(--line)}
.hwdemo .hwchat-msgs{flex:1;overflow:auto;padding:.75rem .9rem;display:flex;flex-direction:column;gap:.45rem;min-height:160px}
.hwdemo .hwchat-msg{max-width:92%;padding:.55rem .7rem;border-radius:12px;font-size:.92rem;line-height:1.4;white-space:pre-wrap}
.hwdemo .hwchat-msg--bot{align-self:flex-start;background:#eef4fb;border:1px solid #d7e0ec}
.hwdemo .hwchat-msg--user{align-self:flex-end;background:#0b5ea8;color:#fff}
.hwdemo .hwchat-quick{display:flex;flex-wrap:wrap;gap:.35rem;padding:0 .75rem .55rem}
.hwdemo .hwchat-chip{
  border:1px solid #b9cbe0;background:#fff;color:var(--blue);border-radius:999px;
  padding:.28rem .65rem;font:inherit;font-size:.8rem;font-weight:650;cursor:pointer}
.hwdemo .hwchat-form{display:flex;gap:.4rem;padding:.55rem .7rem .75rem;border-top:1px solid var(--line)}
.hwdemo .hwchat-form input{
  flex:1;border:1px solid #c5d2e2;border-radius:10px;padding:.55rem .65rem;font:inherit}
.hwdemo .hwchat-form button,.hwdemo .hwchat-lead button[type=submit]{
  border:0;border-radius:10px;padding:.55rem .75rem;font:inherit;font-weight:700;color:#fff;background:var(--blue);cursor:pointer}
.hwdemo .hwchat-lead{padding:.7rem .85rem .9rem;display:flex;flex-direction:column;gap:.45rem;border-top:1px solid var(--line)}
.hwdemo .hwchat-lead[hidden]{display:none!important}
.hwdemo .hwchat-lead-title{margin:0;font-weight:700;font-size:.9rem}
.hwdemo .hwchat-lead input,.hwdemo .hwchat-lead select,.hwdemo .hwchat-lead textarea{
  width:100%;border:1px solid #c5d2e2;border-radius:10px;padding:.5rem .6rem;font:inherit}
.hwdemo .hwchat-chk{display:flex;gap:.45rem;align-items:flex-start;font-size:.82rem;color:var(--muted)}
.hwdemo .hwchat-chk input{width:auto;margin-top:.15rem}
.hwdemo .hwchat-lead-actions{display:flex;gap:.45rem;justify-content:flex-end}
.hwdemo .hwchat-cancel{border:1px solid #b9cbe0;background:#fff;color:var(--blue);border-radius:10px;padding:.5rem .7rem;font:inherit;font-weight:650;cursor:pointer}
.hwdemo .hwchat-lead-ok{margin:0;background:#e8f7ee;color:var(--ok);border-radius:10px;padding:.55rem .65rem;font-size:.85rem}
.hwdemo .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
@media (max-width:700px){
  .hwdemo .hwchat{left:.65rem;bottom:4.4rem}
  .hwdemo .hwchat-panel{width:min(94vw,360px);bottom:3.4rem}
}