/* ============================================================
   Relaxx Landingpage-Elemente (Diesel / Zapfwellen) — Bricks
   Alles unter .rel-lp gescopet (keine Kollision mit Theme/WindPress/Bricks).
   Header/Footer kommen global aus dem Bricks-Theme. Clash Grotesk lädt das Theme.
   ============================================================ */

.rel-lp{
  --blue:#2180E8; --blue-deep:#125BAB; --blue-ink:#0F2238;
  --yellow:#FFFD85; --yellow-2:#FFFC39;
  --ink:#111315; --surface:#17202D; --slate:#536176; --white:#fff;
  --off:#F6F6F4; --gray:#E7E4E4;
  --line:rgba(23,32,45,.12); --line-2:rgba(23,32,45,.22);
  --blue-soft:rgba(33,128,232,.10);
  --w70:rgba(255,255,255,.72); --w22:rgba(255,255,255,.22);
  --font:"Clash Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --fs-base:18px;
  --fs-h1:clamp(2.6rem,5.6vw,4.6rem); --fs-h2:clamp(2rem,3.8vw,3.1rem);
  --fs-h3:clamp(1.2rem,1.7vw,1.5rem); --fs-lead:clamp(1.08rem,1.5vw,1.28rem);
  --fs-eyebrow:.8rem; --lh-tight:1.06; --hero-weight:500;
  --space-section:clamp(72px,8.5vw,128px);
  --gap:24px; --gap-lg:36px; --gap-xl:64px;
  --gutter:clamp(20px,4vw,40px); --container:1200px;
  --r-btn:0px; --r-sm:3px; --r:6px; --r-lg:8px; --r-pill:3px;
  --shadow:0 14px 36px -18px rgba(15,34,56,.34);
  --shadow-lg:0 30px 70px -28px rgba(15,34,56,.50);
  --ease:cubic-bezier(.22,1,.36,1);
  font-family:var(--font); font-size:var(--fs-base); line-height:1.62;
  color:var(--ink); -webkit-font-smoothing:antialiased;
}
.rel-lp *{box-sizing:border-box;margin:0;padding:0}
.rel-lp img{max-width:100%;display:block}
.rel-lp a{color:inherit;text-decoration:none}
.rel-lp h1,.rel-lp h2,.rel-lp h3,.rel-lp h4{font-weight:600;line-height:var(--lh-tight);letter-spacing:-.022em;color:var(--ink)}
.rel-lp h1{font-size:var(--fs-h1);font-weight:700}
.rel-lp h2{font-size:var(--fs-h2);line-height:1.1}
.rel-lp h3{font-size:var(--fs-h3)}
.rel-lp .container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.rel-lp section{padding:var(--space-section) 0}
.rel-lp .eyebrow{font-weight:600;text-transform:uppercase;letter-spacing:.15em;font-size:var(--fs-eyebrow);color:var(--blue)}
.rel-lp .lead{font-size:var(--fs-lead);line-height:1.6;max-width:60ch;color:var(--slate)}

/* Skew-Marker */
.rel-lp .mark{position:relative;display:inline-block;z-index:0;padding:0 .12em}
.rel-lp .mark::before{content:"";position:absolute;inset:6% -2px 8% -2px;background:var(--yellow);transform:skewX(-10deg);z-index:-1}

/* Buttons (eckig) */
.rel-lp .btn{display:inline-flex;align-items:center;gap:11px;font-family:inherit;font-weight:600;font-size:16px;line-height:1.1;cursor:pointer;padding:16px 28px;border-radius:var(--r-btn);border:2px solid transparent;transition:transform .16s var(--ease),background .16s,color .16s,border-color .16s;white-space:nowrap}
.rel-lp .btn .arr{transition:transform .2s var(--ease)}
.rel-lp .btn:hover .arr{transform:translateX(4px)}
.rel-lp .btn-primary{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.rel-lp .btn-primary:hover{background:var(--yellow-2);border-color:var(--yellow-2)}
.rel-lp .btn-primary:active{transform:scale(.98)}
.rel-lp .btn-ghost{background:transparent;border:2px solid var(--line-2);color:var(--ink)}
.rel-lp .btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.rel-lp .btn-ghost.on-dark{border-color:var(--w22);color:#fff}
.rel-lp .btn-ghost.on-dark:hover{background:#fff;border-color:#fff;color:var(--ink)}
.rel-lp .btn-block{width:100%;justify-content:center}
.rel-lp .arr{display:inline-block;width:18px;height:1.8px;background:currentColor;position:relative;flex:0 0 auto}
.rel-lp .arr::after{content:"";position:absolute;right:-1px;top:-4px;width:9px;height:9px;border-right:1.8px solid currentColor;border-top:1.8px solid currentColor;transform:rotate(45deg)}

/* Hero (Bolt-Blue mit Background-Image + Overlay) */
.rel-lp .hero{background:var(--blue);color:#fff;position:relative;overflow:hidden;padding:0}
.rel-lp .hero-bg{position:absolute;inset:0;z-index:0}
.rel-lp .hero-bg img{width:100%;height:100%;object-fit:cover;display:block}
.rel-lp .hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(15,34,56,.92) 0%,rgba(33,128,232,.80) 48%,rgba(33,128,232,.42) 100%)}
.rel-lp .hero .container{position:relative;z-index:2}
.rel-lp .hero-inner{max-width:820px;padding:clamp(64px,8vw,120px) 0}
.rel-lp .hero .eyebrow{color:var(--yellow);display:inline-flex;align-items:center;gap:10px;font-weight:600}
.rel-lp .hero .eyebrow .ic{width:18px;height:18px}
.rel-lp .hero-stamp{display:inline-block;background:var(--yellow);color:var(--ink);font-weight:600;font-size:13px;padding:9px 14px;border-radius:var(--r-sm);margin:0 0 18px}
.rel-lp .hero h1{color:#fff;margin-top:8px;letter-spacing:-.028em;font-weight:var(--hero-weight)}
.rel-lp .hero h1 .mark{color:var(--ink)}
.rel-lp .hero p.lead{color:#fff;opacity:.96;margin-top:20px;max-width:52ch;font-weight:400}
.rel-lp .hero-bullets{list-style:none;display:flex;flex-direction:column;gap:13px;margin-top:26px}
.rel-lp .hero-bullets li{display:flex;align-items:center;gap:12px;color:#fff;font-weight:500;font-size:1.12rem}
.rel-lp .hero-bullets .chk{width:26px;height:26px;flex:0 0 26px;background:var(--yellow);color:var(--ink);display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm)}
.rel-lp .hero-bullets .chk svg{width:15px;height:15px;stroke-width:3}
.rel-lp .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.rel-lp .hero-trust{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding:18px 0;border-top:1px solid rgba(255,255,255,.22)}
.rel-lp .hero-trust .t{display:inline-flex;align-items:center;gap:9px;color:#fff;font-size:.94rem;opacity:.92}
.rel-lp .hero-trust .t b{font-weight:600;opacity:1}
.rel-lp .hero-trust .t svg{width:18px;height:18px;color:var(--yellow)}
.rel-lp .hero-trust .stars{color:var(--yellow);letter-spacing:2px}

/* Section-Head */
.rel-lp .head{max-width:66ch}
.rel-lp .head.center{margin:0 auto;text-align:center}
.rel-lp .head .eyebrow{margin-bottom:14px;display:block}
.rel-lp .head p{margin-top:16px;color:var(--slate);font-size:1.1rem}

/* Vorteile */
.rel-lp .why{background:var(--off)}
.rel-lp .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:52px}
.rel-lp .vcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:34px 30px;transition:box-shadow .2s var(--ease),transform .2s var(--ease),border-color .2s}
.rel-lp .vcard:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:transparent}
.rel-lp .vcard .ic{width:52px;height:52px;border-radius:14px;background:var(--blue-soft);color:var(--blue);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.rel-lp .vcard .ic svg{width:27px;height:27px;stroke-width:1.7}
.rel-lp .vcard h3{margin-bottom:10px}
.rel-lp .vcard p{font-size:1rem;color:var(--slate)}

/* Beratungs-Band */
.rel-lp .nudge{background:var(--blue);color:#fff}
.rel-lp .nudge .container{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--gap-xl);align-items:center}
.rel-lp .nudge .eyebrow{color:var(--yellow)}
.rel-lp .nudge h2{color:#fff;margin-top:12px}
.rel-lp .nudge p{color:rgba(255,255,255,.85);margin-top:14px;font-size:1.1rem;max-width:54ch}
.rel-lp .nudge-side{display:flex;flex-direction:column;gap:14px}
.rel-lp .nudge-side .btn{justify-content:center}
.rel-lp .nudge-side .pts{list-style:none;margin-top:6px}
.rel-lp .nudge-side .pts li{display:flex;gap:11px;align-items:flex-start;color:#fff;font-size:1rem;margin-bottom:10px}
.rel-lp .nudge-side .pts svg{width:20px;height:20px;color:var(--yellow);flex:0 0 auto;margin-top:2px}

/* Anwendungsbereiche */
.rel-lp .apps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:50px}
.rel-lp .app{position:relative;border-radius:var(--r);overflow:hidden;min-height:300px;display:flex;align-items:flex-end;color:#fff;isolation:isolate}
.rel-lp .app img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s var(--ease)}
.rel-lp .app::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(15,34,56,.92) 8%,rgba(15,34,56,.30) 60%,rgba(15,34,56,.12) 100%)}
.rel-lp .app:hover img{transform:scale(1.05)}
.rel-lp .app .txt{padding:26px}
.rel-lp .app h3{color:#fff;font-size:1.32rem}
.rel-lp .app .tags{color:var(--yellow);font-size:.86rem;font-weight:500;margin-top:6px}

/* Modell-Katalog */
.rel-lp .models{background:var(--off)}
.rel-lp .model-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:38px}
.rel-lp .filters{display:inline-flex;flex-wrap:wrap;gap:6px;background:var(--off);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px}
.rel-lp .filters button{border:0;background:none;font-family:inherit;font-weight:500;font-size:14px;padding:11px 22px;border-radius:var(--r-pill);cursor:pointer;color:var(--slate);transition:color .2s,background .2s}
.rel-lp .filters button.active{background:var(--blue);color:#fff}
.rel-lp .toolbar-note{font-size:.92rem;color:var(--slate)}
.rel-lp .model-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:30px}
.rel-lp .model{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.rel-lp .model:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.rel-lp .model .pic{position:relative;aspect-ratio:4/3;background:#fff;overflow:hidden;border-bottom:1px solid var(--line)}
.rel-lp .model .pic img{width:100%;height:100%;object-fit:contain;padding:16px}
.rel-lp .model .tag{position:absolute;left:14px;top:14px;font-weight:600;font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-pill);color:#fff}
.rel-lp .model .tag.v{background:#1f9d57}
.rel-lp .model .tag.iii{background:var(--surface)}
.rel-lp .model .tag.pto{background:var(--blue)}
.rel-lp .model .body{padding:24px;display:flex;flex-direction:column;flex:1}
.rel-lp .model .name{font-weight:600;font-size:1.34rem;color:var(--ink);letter-spacing:-.02em}
.rel-lp .model .pwr{display:flex;align-items:baseline;gap:8px;margin:6px 0 16px}
.rel-lp .model .pwr .kw{font-weight:700;font-size:1.55rem;color:var(--blue)}
.rel-lp .model .pwr .kva{font-weight:500;color:var(--slate);font-size:1rem}
.rel-lp .specs{list-style:none;font-size:.92rem;margin-bottom:20px}
.rel-lp .specs li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px dashed var(--line)}
.rel-lp .specs li .k{color:var(--slate)}
.rel-lp .specs li .v{font-weight:500;color:var(--ink);text-align:right}
.rel-lp .model .foot{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.rel-lp .model .price{font-size:.86rem;color:var(--slate)}
.rel-lp .model .price b{font-weight:600;color:var(--ink);font-size:1.05rem}
.rel-lp .model .req{width:100%;justify-content:center;padding:14px}

/* Lead-Formular */
.rel-lp .lead-sec{background:var(--off)}
.rel-lp .lead-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:var(--gap-xl);align-items:center;min-width:0}
.rel-lp .lead-grid>*{min-width:0}
.rel-lp .form-card{min-width:0;max-width:100%}
.rel-lp .row2{min-width:0}
.rel-lp .field input,.rel-lp .field select,.rel-lp .field textarea{min-width:0;max-width:100%}
.rel-lp .lead-sec .eyebrow{color:var(--blue)}
.rel-lp .checklist{list-style:none;margin-top:26px}
.rel-lp .checklist li{display:flex;gap:13px;align-items:flex-start;margin-bottom:14px;font-size:1.06rem;color:var(--ink)}
.rel-lp .checklist .tick{width:24px;height:24px;flex:0 0 24px;color:var(--ink);background:var(--yellow);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:2px}
.rel-lp .checklist .tick svg{width:14px;height:14px;stroke-width:2.8}
.rel-lp .assurance{margin-top:28px;display:flex;gap:22px;flex-wrap:wrap;font-size:.9rem;color:var(--slate)}
.rel-lp .assurance span{display:inline-flex;align-items:center;gap:8px}
.rel-lp .assurance svg{width:18px;height:18px;color:var(--blue)}
.rel-lp .form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,3vw,42px);box-shadow:var(--shadow)}
.rel-lp .form-card h3{margin-bottom:6px}
.rel-lp .form-card .sub{color:var(--slate);font-size:1rem;margin-bottom:24px}
.rel-lp .field{margin-bottom:17px}
.rel-lp .field label{display:block;font-weight:500;font-size:.85rem;margin-bottom:7px;color:var(--ink)}
.rel-lp .field input,.rel-lp .field select,.rel-lp .field textarea{width:100%;padding:15px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);font-family:inherit;font-size:1rem;background:#fff;color:var(--ink);transition:border .18s,box-shadow .18s}
.rel-lp .field textarea{resize:vertical;min-height:88px}
.rel-lp .field input:focus,.rel-lp .field select:focus,.rel-lp .field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.rel-lp .field select{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317202D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 15px center;background-size:16px;padding-right:46px}
.rel-lp .row2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.rel-lp .consent{display:flex;gap:10px;align-items:flex-start;font-size:.8rem;color:var(--slate);margin:6px 0 20px;line-height:1.45}
.rel-lp .consent input{margin-top:3px;flex:0 0 auto;width:auto}
.rel-lp .consent a{color:var(--blue);text-decoration:underline}
.rel-lp .form-note{text-align:center;font-size:.82rem;color:var(--slate);margin-top:14px}
.rel-lp .form-note a{color:var(--blue);font-weight:500}
.rel-lp .success{display:none;text-align:center;padding:34px 6px}
.rel-lp .success.show{display:block}
.rel-lp .success .ck{width:66px;height:66px;border-radius:50%;background:var(--yellow);color:var(--ink);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.rel-lp .success .ck svg{width:32px;height:32px;stroke-width:2.8}
.rel-lp .success h3{margin-bottom:10px}
.rel-lp .success p{color:var(--slate)}

/* Kontakt */
.rel-lp .kontakt .grid{display:grid;grid-template-columns:auto 1fr auto;gap:var(--gap-lg);align-items:center;background:var(--surface);color:#fff;border-radius:var(--r-lg);padding:clamp(30px,4vw,48px)}
.rel-lp .kontakt .grid h3{color:#fff}
.rel-lp .kontakt .pf{width:120px;height:120px;border-radius:var(--r);background:var(--blue-soft);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.rel-lp .kontakt .pf svg{width:56px;height:56px;color:var(--yellow)}
.rel-lp .kontakt .role{color:var(--yellow);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.8rem}
.rel-lp .kontakt h3{margin:8px 0 12px}
.rel-lp .kontakt .grid p{color:var(--w70);max-width:50ch}
.rel-lp .kontakt .meta{display:flex;flex-direction:column;gap:12px;flex:0 0 auto}
.rel-lp .kontakt .meta a{font-weight:600;display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.rel-lp .kontakt .meta a svg{width:18px;height:18px;color:var(--yellow)}
.rel-lp .kontakt .meta a:hover{color:var(--yellow)}

/* FAQ */
.rel-lp .faq-wrap{max-width:860px;margin:46px auto 0}
.rel-lp .faq{border-bottom:1px solid var(--line)}
.rel-lp .faq button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;background:none;border:0;font-family:inherit;text-align:left;padding:24px 0;cursor:pointer;font-weight:600;font-size:1.12rem;color:var(--ink)}
.rel-lp .faq .pm{width:30px;height:30px;flex:0 0 30px;border-radius:50%;border:2px solid var(--line-2);position:relative;transition:background .2s,border-color .2s}
.rel-lp .faq .pm::before,.rel-lp .faq .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .25s var(--ease),background .2s}
.rel-lp .faq .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.rel-lp .faq.open .pm{background:var(--blue);border-color:var(--blue)}
.rel-lp .faq.open .pm::before,.rel-lp .faq.open .pm::after{background:#fff}
.rel-lp .faq.open .pm::after{transform:translate(-50%,-50%) rotate(0)}
.rel-lp .faq .ans{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.rel-lp .faq .ans p{padding:0 0 24px;color:var(--slate);font-size:1.02rem;max-width:74ch}

/* Partner-Strip (autorisierter Händler von) */
.rel-lp .partners{padding:clamp(34px,4vw,52px) 0;border-bottom:1px solid var(--line)}
.rel-lp .partners-row{display:flex;align-items:center;gap:clamp(20px,4vw,56px);flex-wrap:wrap;justify-content:center}
.rel-lp .partners-label{font-weight:600;color:var(--slate);font-size:.95rem;white-space:nowrap}
.rel-lp .partners-logos{display:flex;align-items:center;gap:clamp(24px,4vw,56px);flex-wrap:wrap;justify-content:center}
.rel-lp .partner img{height:42px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .2s,opacity .2s}
.rel-lp .partner:hover img{filter:none;opacity:1}
.rel-lp .partner--text{font-weight:700;font-size:1.2rem;color:var(--slate)}

/* Kundenstimmen */
.rel-lp .reviews-badge{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:36px}
.rel-lp .reviews-badge .stars,.rel-lp .review .stars{color:#FFB400;letter-spacing:3px;font-size:1.4rem}
.rel-lp .reviews-badge .rating-num{font-size:3rem;font-weight:700;color:var(--ink);line-height:1}
.rel-lp .reviews-badge .rating-meta{color:var(--slate);font-size:.95rem;margin-bottom:12px}
.rel-lp .reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:46px}
.rel-lp .review{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px}
.rel-lp .review .stars{font-size:1.05rem;margin-bottom:14px}
.rel-lp .review blockquote{font-size:1.08rem;line-height:1.5;color:var(--ink);margin-bottom:16px}
.rel-lp .review figcaption{color:var(--slate);font-size:.92rem}
.rel-lp .review figcaption b{color:var(--ink)}
.rel-lp .reviews-embed{margin-top:36px}
.rel-lp .form-consent{font-size:.8rem;color:var(--slate);margin-top:14px;line-height:1.5;text-align:center}
.rel-lp .form-consent a{color:var(--blue);text-decoration:underline}

/* Alternierende Section-Backgrounds */
.rel-lp #faq{background:var(--off)}

/* Responsive */
@media(max-width:1080px){
  .rel-lp .apps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
  .rel-lp .why-grid,.rel-lp .model-grid,.rel-lp .reviews-grid{grid-template-columns:repeat(2,1fr)}
  .rel-lp .partners-row{flex-direction:column;gap:18px}
  .rel-lp .nudge .container{grid-template-columns:1fr;gap:var(--gap-lg)}
  .rel-lp .lead-grid{grid-template-columns:1fr;gap:var(--gap-lg)}
  .rel-lp .hero-grid{grid-template-columns:1fr;gap:32px}
  .rel-lp .hero-media{order:-1}
  .rel-lp .hero-media img{height:clamp(220px,42vw,320px)}
  .rel-lp .kontakt .grid{grid-template-columns:1fr;text-align:center;justify-items:center}
  .rel-lp .kontakt .meta{align-items:center}
}
@media(max-width:680px){
  .rel-lp{--fs-base:16px}
  .rel-lp .why-grid,.rel-lp .model-grid,.rel-lp .apps,.rel-lp .reviews-grid{grid-template-columns:1fr}
  .rel-lp .row2{grid-template-columns:1fr}
}