/* HAFA 2026 — gebündeltes Design-System (Contao). Fonts self-hosted. Generiert aus new_layout.zip */
/* HAFA Webfonts — self-hosted (DSGVO; ersetzt Google-Fonts-Import) */
@font-face{font-family:'Meta Headline';src:url('../assets/fonts/MetaHeadline-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Arimo';src:url('../assets/fonts/arimo-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Arimo';src:url('../assets/fonts/arimo-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Arimo';src:url('../assets/fonts/arimo-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Arimo';src:url('../assets/fonts/arimo-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Arimo';src:url('../assets/fonts/arimo-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Arimo';src:url('../assets/fonts/arimo-700i.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap;}
/* ==========================================================================
   HAFA Treppen — Color tokens
   Sampled directly from the print "Produktinformation" PDF vector layer.
   Primary HAFA red #e30613 · quality/eco green #76b82a · warm-neutral grays.
   ========================================================================== */

:root {
  /* ---- Brand red (primary accent, logo, CTAs) ------------------------- */
  --red-50:  #fdecec;
  --red-100: #f9c9cb;
  --red-500: #e30613;   /* HAFA RED — the brand color */
  --red-600: #cc0511;   /* hover */
  --red-700: #a8040e;   /* press / deep */

  /* ---- Quality green (usage-class, eco/PEFC, slip-resistance badges) --- */
  --green-50:  #eef6e3;
  --green-100: #d6ebbf;
  --green-500: #76b82a;  /* HAFA GREEN — secondary signal color */
  --green-600: #5fa01f;
  --green-700: #009940;  /* deep eco green */

  /* ---- Neutrals (warm-leaning grays from the print piece) ------------- */
  --white:    #ffffff;
  --gray-50:  #f6f6f6;   /* lightest surface fill */
  --gray-100: #ececec;
  --gray-200: #e2e2e1;   /* hairline borders */
  --gray-300: #cfcfce;
  --gray-400: #9d9d9c;   /* strong border / disabled text */
  --gray-500: #878787;   /* subtle text */
  --gray-600: #6e6e6d;
  --gray-700: #575756;   /* secondary text */
  --gray-800: #3c3c3b;   /* body text */
  --gray-900: #1c1c1c;   /* headlines / ink */
  --black:    #000000;

  /* ---- Semantic aliases ----------------------------------------------- */
  --color-brand:        var(--red-500);
  --color-brand-hover:  var(--red-600);
  --color-brand-press:  var(--red-700);
  --color-brand-tint:   var(--red-50);

  --color-accent:       var(--green-500);   /* quality / eco / "Made in Germany" */
  --color-accent-deep:  var(--green-700);
  --color-accent-tint:  var(--green-50);

  --text-strong:  var(--gray-900);   /* H1–H3, key figures */
  --text-body:    var(--gray-800);   /* paragraphs */
  --text-muted:   var(--gray-700);   /* captions, secondary */
  --text-subtle:  var(--gray-600);   /* meta, placeholders (gray-600 = 5.1:1 AA-Kontrast) */
  --text-on-brand: var(--white);
  --text-inverse:  var(--white);

  --surface:       var(--white);     /* default page / card */
  --surface-alt:   var(--gray-50);   /* zebra sections, fills */
  --surface-ink:   var(--gray-900);  /* dark footer / banners */

  --border:        var(--gray-200);  /* default hairline */
  --border-strong: var(--gray-400);  /* inputs, dividers with weight */

  --focus-ring:    var(--red-500);

  /* Status (derived from brand families; HAFA uses red for warnings,
     green for success/quality) */
  --color-success: var(--green-600);
  --color-danger:  var(--red-500);
}
/* ==========================================================================
   HAFA Treppen — Typography tokens
   Display: Meta Headline (bold, all-caps for the brand voice).
   Body:    Arimo (Helvetica-metric substitute for HelveticaNeue LT 67 Medium).
   The print piece sets headlines tight & bold, body in a clean grotesque,
   with the recurring slogan "Mit Sicherheit das richtige System!" as a kicker.
   ========================================================================== */

:root {
  /* ---- Families ------------------------------------------------------- */
  --font-display: 'Meta Headline', 'Arimo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Arimo', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* ---- Weights -------------------------------------------------------- */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */

  /* ---- Type scale (px / rem @16) — print-derived, generous headers ---- */
  --fs-display:  3.5rem;   /* 56px — hero headline */
  --fs-h1:       2.75rem;  /* 44px */
  --fs-h2:       2rem;     /* 32px */
  --fs-h3:       1.5rem;   /* 24px */
  --fs-h4:       1.25rem;  /* 20px */
  --fs-lead:     1.25rem;  /* 20px intro paragraph */
  --fs-body:     1rem;     /* 16px */
  --fs-sm:       0.875rem; /* 14px */
  --fs-xs:       0.75rem;  /* 12px — meta, badge labels */

  /* ---- Line heights --------------------------------------------------- */
  --lh-tight:   1.05; /* @kind font */   /* display headlines */
  --lh-heading: 1.15; /* @kind font */
  --lh-snug:    1.35; /* @kind font */
  --lh-body:    1.6; /* @kind font */

  /* ---- Letter spacing ------------------------------------------------- */
  --ls-display: -0.01em; /* @kind font */  /* Meta Headline sits tight */
  --ls-kicker:  0.08em; /* @kind font */   /* uppercase eyebrow / slogan */
  --ls-label:   0.04em; /* @kind font */   /* button & badge caps */
  --ls-body:    0; /* @kind font */
}
/* ==========================================================================
   HAFA Treppen — Spacing, radius, elevation, motion
   The print system is rectilinear and tidy: small radii, restrained shadows,
   confident hairline rules. Translate that to web with a 4px spacing base.
   ========================================================================== */

:root {
  /* ---- Spacing scale (4px base) --------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */

  /* ---- Layout --------------------------------------------------------- */
  --container-max: 1200px; /* @kind spacing */
  --container-pad: var(--space-5);
  --section-y:     var(--space-9);

  /* ---- Radii (print is square-ish; keep corners crisp) ---------------- */
  --radius-0:    0;
  --radius-sm:   3px;
  --radius-md:   6px;     /* default cards, inputs, buttons */
  --radius-lg:   10px;    /* feature cards / media */
  --radius-pill: 999px;   /* tags, usage-class chips */

  /* ---- Borders -------------------------------------------------------- */
  --border-width: 1px; /* @kind spacing */
  --border-width-strong: 2px; /* @kind spacing */

  /* ---- Elevation (soft, neutral — never colored glow) ----------------- */
  --shadow-xs: 0 1px 2px rgba(28, 28, 28, 0.06);
  --shadow-sm: 0 1px 3px rgba(28, 28, 28, 0.08), 0 1px 2px rgba(28, 28, 28, 0.06);
  --shadow-md: 0 4px 12px rgba(28, 28, 28, 0.08), 0 2px 4px rgba(28, 28, 28, 0.05);
  --shadow-lg: 0 12px 28px rgba(28, 28, 28, 0.12), 0 4px 8px rgba(28, 28, 28, 0.06);

  /* ---- Motion (functional, quick; no bounce) -------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}
/* ==========================================================================
   HAFA Treppen — Base element styles
   Sensible defaults wired to the tokens so any consuming page inherits the
   brand voice without extra work.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a { color: var(--color-brand); text-decoration: none; }
a:hover { color: var(--color-brand-hover); text-decoration: underline; }

/* The recurring HAFA slogan / eyebrow */
.hafa-kicker {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--color-brand);
}

::selection { background: var(--red-100); color: var(--gray-900); }

:focus-visible {
  outline: var(--border-width-strong) solid var(--focus-ring);
  outline-offset: 2px;
}
/* ============================================================
   HAFA Startseite — Version 2 (Conversion-Langform)
   Gleiche Layout-DNA wie der erste Entwurf, erweitert um den
   vollständigen Seitenaufbau aus der Zuarbeit.
   Akzent: ausschließlich HAFA Rot. Tokens aus ../styles.css.
   ============================================================ */
:root{ --hd:76px; }
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--surface);color:var(--text-body);font-family:var(--font-body);-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;}
a{color:inherit;}

.wrap{max-width:1320px;margin:0 auto;padding-inline:32px;}
.wrap--narrow{max-width:920px;}

/* ---------- Shared type bits ---------- */
.eyebrow{font-family:var(--font-body);font-weight:var(--fw-bold);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-brand);display:inline-flex;align-items:center;gap:10px;}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--color-brand);display:inline-block;}
.eyebrow--center{justify-content:center;}
.eyebrow--light{color:#fff;}
.eyebrow--light::before{background:#fff;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;color:var(--text-strong);letter-spacing:-0.015em;}

.section{padding-block:100px;}
.section--alt{background:var(--surface-alt);}
.section--ink{background:var(--gray-900);color:var(--gray-300);}
.section__head{max-width:680px;margin-bottom:54px;}
.section__head--center{margin-inline:auto;text-align:center;}
.section__head h2{font-size:46px;line-height:1.05;margin:14px 0 18px;}
.section--ink .section__head h2{color:#fff;}
.section__head p{font-size:19px;line-height:1.6;color:var(--text-muted);margin:0;}
.section--ink .section__head p{color:rgba(255,255,255,.72);}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-body);font-weight:var(--fw-bold);letter-spacing:.01em;border:2px solid transparent;border-radius:8px;cursor:pointer;text-decoration:none;white-space:nowrap;font-size:15px;padding:14px 24px;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard);}
.btn svg{width:19px;height:19px;flex:none;}
.btn:active{transform:translateY(1px);}
.btn--primary{background:var(--color-brand);color:#fff;border-color:var(--color-brand);box-shadow:0 8px 22px rgba(227,6,19,.28);}
.btn--primary:hover{background:var(--color-brand-hover);border-color:var(--color-brand-hover);box-shadow:0 12px 30px rgba(227,6,19,.36);transform:translateY(-1px);}
.btn--ghost{background:transparent;color:var(--text-strong);border-color:var(--border-strong);}
.btn--ghost:hover{border-color:var(--gray-900);background:var(--surface-alt);}
.btn--lg{font-size:17px;padding:17px 30px;}
.btn--ondark{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.5);backdrop-filter:blur(4px);box-shadow:none;}
.btn--ondark:hover{background:rgba(255,255,255,.18);border-color:#fff;}
.btn--white{background:#fff;color:var(--color-brand);border-color:#fff;}
.btn--white:hover{background:var(--gray-50);}
.btn--block{width:100%;}

/* ---------- Utility bar ---------- */
.util{background:var(--gray-900);color:var(--gray-400);font-size:13px;}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:40px;}
.util a{color:var(--gray-300);text-decoration:none;}
.util a:hover{color:#fff;}
.util__r{display:flex;gap:26px;align-items:center;}
.util__r b{color:#fff;}
.util__dot{display:inline-flex;align-items:center;gap:8px;}
.util__dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--color-brand);}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);transition:box-shadow var(--dur-base),background var(--dur-base);}
.header.is-scrolled{box-shadow:var(--shadow-md);background:rgba(255,255,255,.97);}
.header .wrap{display:flex;align-items:center;gap:38px;height:var(--hd);}
.logo{height:34px;}
.nav{display:flex;gap:30px;}
.nav a{font-size:15px;font-weight:var(--fw-medium);color:var(--text-body);text-decoration:none;position:relative;padding:6px 0;transition:color var(--dur-fast);}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--color-brand);transition:right var(--dur-base) var(--ease-standard);}
.nav a:hover{color:var(--color-brand);}
.nav a:hover::after{right:0;}
.header__cta{margin-left:auto;display:flex;align-items:center;gap:20px;}
.header__phone{display:flex;flex-direction:column;line-height:1.15;text-align:right;}
.header__phone span{font-size:11px;color:var(--text-subtle);}
.header__phone b{font-size:16px;color:var(--text-strong);font-weight:var(--fw-bold);}

/* ---------- Hero ---------- */
.hero{position:relative;color:#fff;overflow:hidden;}
.hero__bg{position:absolute;inset:0;}
.hero__bg img{width:100%;height:100%;object-fit:cover;}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(105deg,rgba(15,15,15,.88) 0%,rgba(15,15,15,.64) 44%,rgba(15,15,15,.14) 80%,rgba(15,15,15,.34) 100%);}
.hero .wrap{position:relative;padding-block:104px 92px;}
.hero__inner{max-width:680px;}
.hero h1{color:#fff;font-size:66px;line-height:1.02;margin:22px 0 0;}
.hero h1 em{font-style:normal;color:var(--red-500);background:#fff;padding:0 10px;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.hero__sub{font-size:21px;line-height:1.55;color:rgba(255,255,255,.92);margin:24px 0 36px;max-width:54ch;}
.hero__actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.hero__note{font-size:14px;color:rgba(255,255,255,.78);display:flex;align-items:center;gap:9px;margin-top:24px;}
.hero__note svg{width:18px;height:18px;color:var(--red-500);flex:none;}

/* ---------- Zielgruppen-Einstieg (overlapping cards) ---------- */
.entry{margin-top:-58px;position:relative;z-index:5;}
.entry__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.ecard{background:#fff;border:1px solid var(--border);border-radius:14px;padding:30px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:14px;transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base);}
.ecard:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(28,28,28,.16);}
.ecard__ico{width:50px;height:50px;border-radius:12px;background:var(--color-brand-tint);display:flex;align-items:center;justify-content:center;}
.ecard__ico svg{width:26px;height:26px;color:var(--color-brand);}
.ecard h3{font-size:21px;margin:0;}
.ecard p{font-size:14.5px;color:var(--text-muted);line-height:1.55;margin:0;flex:1;}
.ecard .plink{margin-top:4px;}
.ecard--b2b{background:var(--gray-900);border-color:var(--gray-900);}
.ecard--b2b h3{color:#fff;}
.ecard--b2b p{color:rgba(255,255,255,.72);}
.ecard--b2b .ecard__ico{background:rgba(255,255,255,.1);}
.ecard--b2b .ecard__ico svg{color:#fff;}
.ecard--b2b .plink{color:#fff;}

.plink{display:inline-flex;align-items:center;gap:7px;font-weight:var(--fw-bold);font-size:14.5px;color:var(--color-brand);text-decoration:none;}
.plink svg{width:17px;height:17px;transition:transform var(--dur-fast);}
.plink:hover svg{transform:translateX(4px);}

/* ---------- Vertrauensleiste ---------- */
.trust{padding-block:38px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.trust .wrap{display:flex;align-items:center;gap:30px;flex-wrap:wrap;justify-content:space-between;}
.trust__label{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-600);font-weight:var(--fw-bold);}
.trust__items{display:flex;gap:14px;flex-wrap:wrap;}
.seal{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 16px;}
.seal__ico{width:34px;height:34px;border-radius:8px;background:var(--color-brand-tint);display:flex;align-items:center;justify-content:center;flex:none;}
.seal__ico svg{width:19px;height:19px;color:var(--color-brand);}
.seal b{display:block;font-size:14px;color:var(--text-strong);font-weight:var(--fw-bold);line-height:1.1;}
.seal span{font-size:12px;color:var(--gray-600);}

/* ---------- Problem → Lösung ---------- */
.prob{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center;}
.prob__media{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg);}
.prob__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.3;}
.prob__media .tagpill{position:absolute;left:22px;bottom:22px;background:var(--color-brand);color:#fff;font-weight:var(--fw-bold);font-size:14px;padding:11px 18px;border-radius:8px;box-shadow:var(--shadow-md);}
.problist{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;}
.problist li{display:flex;gap:14px;align-items:flex-start;font-size:16.5px;color:var(--text-body);line-height:1.5;}
.problist svg{width:24px;height:24px;color:var(--color-brand);flex:none;margin-top:1px;}
.problist b{color:var(--text-strong);}

/* ---------- Treppenarten ---------- */
.types{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.tcard2{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:3/4;display:flex;align-items:flex-end;color:#fff;text-decoration:none;background:var(--gray-900);}
.tcard2 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-standard);}
.tcard2::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,15,15,.82) 0%,rgba(15,15,15,.12) 55%,rgba(15,15,15,0) 100%);}
.tcard2:hover img{transform:scale(1.06);}
.tcard2__t{position:relative;padding:18px;display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px;}
.tcard2__t b{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-0.01em;}
.tcard2__t svg{width:18px;height:18px;flex:none;opacity:.85;transition:transform var(--dur-fast);}
.tcard2:hover .tcard2__t svg{transform:translateX(4px);}

/* ---------- So funktioniert (timeline) ---------- */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:step;position:relative;}
.fstep{position:relative;padding:0 18px;}
.fstep::before{content:"";position:absolute;top:26px;left:50%;right:-50%;height:2px;background:var(--border);z-index:0;}
.fstep:last-child::before{display:none;}
.fstep__n{position:relative;z-index:1;width:54px;height:54px;border-radius:50%;background:#fff;border:2px solid var(--color-brand);color:var(--color-brand);font-family:var(--font-display);font-weight:700;font-size:22px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;}
.fstep h4{font-size:17px;margin:0 0 8px;text-align:center;}
.fstep p{font-size:14px;color:var(--text-muted);line-height:1.5;margin:0;text-align:center;}

/* ---------- Vorher / Nachher Slider ---------- */
.ba{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:16/8.6;user-select:none;}
.ba__after,.ba__before{position:absolute;inset:0;}
.ba__after img,.ba__before img{width:100%;height:100%;object-fit:cover;}
.ba__before{overflow:hidden;width:50%;border-right:3px solid #fff;}
.ba__before img{width:1320px;max-width:none;}
.ba__placeholder{position:absolute;inset:0;background-color:var(--gray-200);background-image:repeating-linear-gradient(135deg,var(--gray-100) 0 14px,var(--gray-200) 14px 28px);display:flex;align-items:center;justify-content:center;}
.ba__placeholder span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--gray-600);background:rgba(255,255,255,.7);padding:6px 12px;border-radius:6px;}
.ba__label{position:absolute;top:16px;font-size:12px;font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(15,15,15,.6);padding:6px 12px;border-radius:6px;backdrop-filter:blur(4px);z-index:3;}
.ba__label--before{left:16px;}
.ba__label--after{right:16px;}
.ba__handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;z-index:4;transform:translateX(-50%);}
.ba__knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;}
.ba__knob svg{width:24px;height:24px;color:var(--color-brand);}
.ba__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5;margin:0;}

/* ---------- Produkte ---------- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),border-color var(--dur-base);}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent;}
.pcard__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-alt);}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-standard);}
.pcard:hover .pcard__media img{transform:scale(1.05);}
.pcard__tag{position:absolute;top:14px;left:14px;background:var(--color-brand);color:#fff;font-size:12px;font-weight:var(--fw-bold);letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;border-radius:6px;}
.pcard__body{padding:24px;display:flex;flex-direction:column;flex:1;gap:9px;}
.pcard__body h3{font-size:21px;margin:0;}
.pcard__body p{font-size:14.5px;color:var(--text-muted);line-height:1.55;margin:0;flex:1;}
.pcard__foot{margin-top:14px;}

/* ---------- Konfigurator ---------- */
.konf{position:relative;border-radius:20px;overflow:hidden;background:var(--gray-900);color:#fff;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;}
.konf__text{padding:64px;}
.konf__text h2{color:#fff;font-size:42px;line-height:1.07;margin:16px 0 18px;}
.konf__text p{font-size:18px;color:rgba(255,255,255,.82);line-height:1.6;margin:0 0 30px;max-width:44ch;}
.konf__media{position:relative;align-self:stretch;min-height:460px;}
.konf__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.konf__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--gray-900) 0%,rgba(28,28,28,0) 32%);}
.konf__steps{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px;}
.konf__step{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:var(--fw-medium);color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:9px 15px;}
.konf__step b{font-family:var(--font-display);color:var(--red-500);}

/* ---------- Musterpaket ---------- */
.sample{display:grid;grid-template-columns:1fr .82fr;gap:56px;align-items:center;}
.sample__list{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.sample__list li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--text-body);line-height:1.45;}
.sample__list svg{width:22px;height:22px;color:var(--color-brand);flex:none;margin-top:1px;}
.sample__list b{color:var(--text-strong);display:block;}
.sample__list span{font-size:13.5px;color:var(--text-muted);}
.sform{background:#fff;border:1px solid var(--border);border-radius:16px;padding:34px;box-shadow:var(--shadow-lg);}
.sform h3{font-size:24px;margin:0 0 6px;}
.sform__sub{font-size:14.5px;color:var(--text-muted);margin:0 0 22px;}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;}
.field label{font-size:13px;font-weight:var(--fw-bold);color:var(--text-strong);}
.field input{font-family:var(--font-body);font-size:15px;padding:13px 14px;border:1.5px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--text-body);transition:border-color var(--dur-fast),box-shadow var(--dur-fast);}
.field input:focus{outline:none;border-color:var(--color-brand);box-shadow:0 0 0 3px var(--color-brand-tint);}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.sform__note{font-size:12.5px;color:var(--text-subtle);margin:14px 0 0;text-align:center;line-height:1.5;}

/* ---------- Einwände (objections) ---------- */
.obj{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.ocard{background:#fff;border:1px solid var(--border);border-radius:14px;padding:28px 30px;display:flex;gap:18px;align-items:flex-start;}
.ocard__q{flex:none;width:40px;height:40px;border-radius:10px;background:var(--color-brand-tint);color:var(--color-brand);font-family:var(--font-display);font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center;}
.ocard h4{font-size:18px;margin:0 0 8px;}
.ocard p{font-size:15px;color:var(--text-muted);line-height:1.6;margin:0;}

/* ---------- Kundenstimmen ---------- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.tcard{background:#fff;border:1px solid var(--border);border-radius:14px;padding:32px;display:flex;flex-direction:column;gap:18px;}
.tcard__stars{display:flex;gap:3px;color:var(--color-brand);}
.tcard__stars svg{width:18px;height:18px;}
.tcard p{font-size:16px;line-height:1.62;color:var(--text-body);margin:0;flex:1;}
.tcard__who{display:flex;align-items:center;gap:13px;}
.tcard__av{width:46px;height:46px;border-radius:50%;background:var(--color-brand);color:#fff;font-family:var(--font-display);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:17px;flex:none;}
.tcard__who b{display:block;font-size:14.5px;color:var(--text-strong);}
.tcard__who span{font-size:13px;color:var(--text-subtle);}
.tcard__who span.tcard__av{font-size:17px;color:#fff;}

/* ---------- Marke / Unternehmen ---------- */
.brand{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center;}
.brand__media{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg);}
.brand__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.4;}
.brand__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px;border-top:1px solid var(--border);padding-top:30px;}
.bstat .n{font-family:var(--font-display);font-weight:700;font-size:40px;line-height:1;color:var(--color-brand);}
.bstat .l{font-size:14px;color:var(--text-muted);margin-top:8px;line-height:1.4;}

/* ---------- Fachbetrieb finder ---------- */
.finder{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:20px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-md);background:#fff;}
.finder__text{padding:56px;}
.finder__text h2{font-size:38px;line-height:1.08;margin:14px 0 16px;}
.finder__text p{font-size:17px;color:var(--text-muted);line-height:1.6;margin:0 0 26px;max-width:42ch;}
.finder__form{display:flex;gap:12px;max-width:440px;}
.finder__form input{flex:1;font-family:var(--font-body);font-size:16px;padding:15px 16px;border:1.5px solid var(--border-strong);border-radius:8px;}
.finder__form input:focus{outline:none;border-color:var(--color-brand);box-shadow:0 0 0 3px var(--color-brand-tint);}
.finder__map{position:relative;background:var(--surface-alt);min-height:380px;overflow:hidden;}
.finder__map .grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:38px 38px;opacity:.7;}
.pin{position:absolute;width:18px;height:18px;border-radius:50% 50% 50% 0;background:var(--color-brand);transform:rotate(-45deg);box-shadow:var(--shadow-sm);}
.pin::after{content:"";position:absolute;top:5px;left:5px;width:8px;height:8px;border-radius:50%;background:#fff;}
.pin--lg{width:26px;height:26px;}
.pin--lg::after{top:7px;left:7px;width:12px;height:12px;}

/* ---------- Handwerksbetriebe (B2B) ---------- */
.b2b{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.b2b h2{color:#fff;font-size:42px;line-height:1.07;margin:14px 0 18px;}
.b2b p.lead{font-size:18px;color:rgba(255,255,255,.78);line-height:1.6;margin:0 0 28px;max-width:44ch;}
.b2b__list{list-style:none;margin:0 0 32px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.b2b__list li{display:flex;gap:12px;align-items:flex-start;color:rgba(255,255,255,.9);font-size:15.5px;line-height:1.45;}
.b2b__list svg{width:22px;height:22px;color:var(--red-500);flex:none;margin-top:1px;}
.b2b__panel{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:44px;}
.b2b__panel h3{color:#fff;font-size:24px;margin:0 0 8px;}
.b2b__panel p{color:rgba(255,255,255,.7);font-size:15px;line-height:1.6;margin:0 0 24px;}
.b2b__metrics{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:28px;}
.b2b__metric .n{font-family:var(--font-display);font-weight:700;font-size:34px;color:#fff;line-height:1;}
.b2b__metric .l{font-size:13px;color:rgba(255,255,255,.62);margin-top:6px;}

/* ---------- FAQ ---------- */
.faq{max-width:840px;margin-inline:auto;}
.faq details{border-bottom:1px solid var(--border);}
.faq summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--text-strong);letter-spacing:-0.01em;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .pm{flex:none;width:30px;height:30px;border-radius:8px;border:2px solid var(--border-strong);display:flex;align-items:center;justify-content:center;position:relative;transition:border-color var(--dur-fast),background var(--dur-fast);}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--text-muted);transition:transform var(--dur-base) var(--ease-standard),background var(--dur-fast);}
.faq summary .pm::before{width:12px;height:2px;}
.faq summary .pm::after{width:2px;height:12px;}
.faq details[open] summary .pm{background:var(--color-brand);border-color:var(--color-brand);}
.faq details[open] summary .pm::before,.faq details[open] summary .pm::after{background:#fff;}
.faq details[open] summary .pm::after{transform:rotate(90deg) scaleX(0);}
.faq summary:hover{color:var(--color-brand);}
.faq__a{padding:0 50px 26px 0;color:var(--text-muted);font-size:16px;line-height:1.65;}

/* ---------- Final CTA ---------- */
.cta{background:var(--color-brand);color:#fff;border-radius:20px;padding:74px;text-align:center;position:relative;overflow:hidden;}
.cta::before,.cta::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.07);}
.cta::before{width:340px;height:340px;top:-120px;right:-80px;}
.cta::after{width:240px;height:240px;bottom:-110px;left:-50px;}
.cta__inner{position:relative;max-width:700px;margin-inline:auto;}
.cta h2{color:#fff;font-size:48px;line-height:1.05;margin:0 0 18px;}
.cta p{font-size:19px;color:rgba(255,255,255,.92);line-height:1.6;margin:0 0 34px;}
.cta__actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

/* ---------- Footer ---------- */
.footer{background:var(--gray-900);color:var(--gray-400);padding-block:72px 32px;}
.footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;}
.footer__logo{height:30px;margin-bottom:22px;}
.footer p{font-size:14.5px;line-height:1.65;margin:0 0 14px;}
.footer h4{color:#fff;font-family:var(--font-body);font-size:13px;font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase;margin:0 0 18px;}
.footer a{color:var(--gray-400);font-size:14.5px;text-decoration:none;display:block;margin-bottom:11px;transition:color var(--dur-fast);}
.footer a:hover{color:#fff;}
.footer__contact{display:flex;align-items:center;gap:10px;color:var(--gray-300);}
.footer__contact svg{width:17px;height:17px;color:var(--color-brand);flex:none;}
.footer__legal{border-top:1px solid #313130;margin-top:54px;padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--gray-400);}
.footer__legal a{display:inline;color:var(--gray-300);margin:0;}
.footer__slogan{color:var(--gray-500);font-weight:var(--fw-bold);}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .nav,.header__phone{display:none;}
}
@media (max-width:1080px){
  .hero h1{font-size:50px;}
  .entry__grid,.pgrid,.tgrid,.obj{grid-template-columns:1fr 1fr;}
  .types{grid-template-columns:repeat(3,1fr);}
  .flow{grid-template-columns:1fr 1fr;gap:34px 0;}
  .fstep::before{display:none;}
  .konf,.sample,.brand,.finder,.b2b{grid-template-columns:1fr;}
  .konf__media,.finder__map{min-height:300px;}
  .prob{grid-template-columns:1fr;gap:40px;}
}
@media (max-width:720px){
  .entry__grid,.pgrid,.tgrid,.obj,.types,.sample__list,.b2b__list{grid-template-columns:1fr;}
  .hero h1{font-size:40px;}
  .section{padding-block:72px;}
  .konf__text,.finder__text,.b2b__panel{padding:38px;}
  .cta{padding:48px 28px;}
  .footer .cols{grid-template-columns:1fr 1fr;}
}

/* Util-Bar mobil: Claim raus, kompakte einzeilige Leiste (Fix 04.09.2026) */
@media (max-width: 860px){
  .util__dot{display:none;}
  .util .wrap{height:36px;}
  .util__r{width:100%;justify-content:space-between;gap:12px;white-space:nowrap;}
}
@media (max-width: 420px){
  .util__ber{display:none;}
  .util{font-size:12.5px;}
}