/* =========================================================================
   a3-zaun.de — Design System
   Schriften: Archivo (Display) + Inter (Text) — beide serifenlos.
   Farbwelt abgeleitet vom Logo-Blau (#06256B) der bestehenden Seite.
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* Blau (Marke) */
  --ink:        #0A1729;
  --navy-900:   #071C3D;
  --navy-800:   #0B2A55;
  --navy:       #0F3A73;
  --navy-600:   #17508E;
  --navy-300:   #7E9CC4;
  --navy-100:   #D7E2F1;
  --navy-50:    #EEF3FA;

  /* Kupfer (Akzent, aus #954f00 der alten Seite) */
  --copper:     #C2762C;
  --copper-600: #A5601C;
  --copper-200: #F0D5B4;
  --copper-50:  #FBF2E7;

  /* Neutrale, warme Flächen */
  --paper:      #FAF8F5;
  --paper-2:    #F3EFE9;
  --paper-3:    #EBE5DC;
  --line:       #E3DDD3;
  --line-soft:  #EFEAE2;
  --muted:      #5A6B80;
  --white:      #FFFFFF;

  /* Metall (Zaun-Visualisierung) */
  --steel:      #B4BCC5;

  /* Typo */
  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Radien & Schatten */
  --r-xs: 8px;  --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(10,23,41,.05), 0 2px 8px rgba(10,23,41,.04);
  --sh-2: 0 2px 6px rgba(10,23,41,.05), 0 12px 28px rgba(10,23,41,.07);
  --sh-3: 0 4px 12px rgba(10,23,41,.07), 0 28px 60px rgba(10,23,41,.12);
  --sh-navy: 0 12px 34px rgba(15,58,115,.24);

  /* Raster */
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: clamp(52px, 5.4vw, 88px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.68;
  font-weight:400; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
hr{ border:0; border-top:1px solid var(--line); margin:0; }
::selection{ background:var(--copper-200); color:var(--navy-900); }
:focus-visible{ outline:3px solid var(--copper); outline-offset:3px; border-radius:4px; }

/* ---------- 3. Typo-Skala ------------------------------------------------ */
.h-display,h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.05; letter-spacing:-.035em; color:var(--navy-900); }
h1,.t-h1{ font-size:clamp(2.5rem, 1.4rem + 4.6vw, 4.6rem); }
h2,.t-h2{ font-size:clamp(2rem, 1.25rem + 3.1vw, 3.4rem); line-height:1.07; }
h3,.t-h3{ font-size:clamp(1.3rem, 1.1rem + .8vw, 1.7rem); line-height:1.18; letter-spacing:-.025em; }
h4,.t-h4{ font-size:1.06rem; line-height:1.3; letter-spacing:-.015em; font-weight:600; }
.t-lead{ font-size:clamp(1.05rem, .98rem + .42vw, 1.28rem); line-height:1.6; color:var(--muted); letter-spacing:-.01em; }
.t-body{ color:var(--muted); }
.t-small{ font-size:.9rem; line-height:1.55; }
.t-xs{ font-size:.8rem; line-height:1.5; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-size:.735rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--copper-600);
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--copper); border-radius:2px; flex:none; }
.eyebrow--light{ color:var(--copper-200); }
.eyebrow--light::before{ background:var(--copper-200); }

/* ---------- 4. Layout ---------------------------------------------------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container--wide{ max-width:1440px; }
.section{ padding-block:var(--section-y); position:relative; }
.section--tight{ padding-block:clamp(42px,4.8vw,68px); }
.section--paper2{ background:var(--paper-2); }
.section--navy{ background:var(--navy-900); color:#DCE6F3; }
.section--navy h2,.section--navy h3,.section--navy h4{ color:#fff; }
.section--navy .t-lead,.section--navy .t-body{ color:#A9BDD8; }

.section-head{ max-width:760px; }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head .eyebrow{ margin-bottom:20px; }
.section-head h2 + .t-lead{ margin-top:20px; }
.section-head--center .eyebrow{ justify-content:center; }

.grid{ display:grid; gap:clamp(18px,2.2vw,28px); }
.stack-8 > * + *{ margin-top:8px; }
.stack-12 > * + *{ margin-top:12px; }
.stack-16 > * + *{ margin-top:16px; }
.stack-24 > * + *{ margin-top:24px; }
.stack-32 > * + *{ margin-top:32px; }

/* ---------- 5. Buttons --------------------------------------------------- */
.btn{
  --btn-bg:var(--navy); --btn-fg:#fff; --btn-bd:transparent;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border-radius:var(--r-pill); border:1.5px solid var(--btn-bd);
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--font-display); font-weight:600; font-size:.965rem; letter-spacing:-.012em;
  cursor:pointer; text-align:center; white-space:nowrap;
  transition:transform .32s var(--ease-out), box-shadow .32s var(--ease-out), background-color .22s, color .22s, border-color .22s;
  box-shadow:var(--sh-1);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); }
.btn:active{ transform:translateY(0); }
.btn svg{ flex:none; }
.btn--primary{ --btn-bg:var(--copper); box-shadow:0 10px 26px rgba(194,118,44,.3); }
.btn--primary:hover{ --btn-bg:var(--copper-600); box-shadow:0 16px 36px rgba(194,118,44,.36); }
.btn--navy{ --btn-bg:var(--navy); box-shadow:var(--sh-navy); }
.btn--navy:hover{ --btn-bg:var(--navy-600); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--navy-900); --btn-bd:var(--line); box-shadow:none; }
.btn--ghost:hover{ --btn-bd:var(--navy-300); --btn-bg:var(--white); }
.btn--on-dark{ --btn-bg:rgba(255,255,255,.07); --btn-fg:#fff; --btn-bd:rgba(255,255,255,.26); box-shadow:none; }
.btn--on-dark:hover{ --btn-bg:rgba(255,255,255,.14); --btn-bd:rgba(255,255,255,.5); }
.btn--white{ --btn-bg:#fff; --btn-fg:var(--navy-900); }
.btn--sm{ padding:11px 19px; font-size:.9rem; }
.btn--lg{ padding:18px 32px; font-size:1.03rem; }
.btn--block{ width:100%; }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:600; font-size:.94rem; color:var(--navy);
  letter-spacing:-.012em; cursor:pointer; background:none; border:0; padding:0;
}
.link-arrow svg{ transition:transform .32s var(--ease-out); }
.link-arrow:hover svg{ transform:translateX(5px); }

/* ---------- 6. Chips / Badges -------------------------------------------- */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 15px; border-radius:var(--r-pill);
  background:var(--white); border:1px solid var(--line);
  font-size:.855rem; font-weight:500; color:var(--navy-800); box-shadow:var(--sh-1);
}
.chip svg{ color:var(--copper); flex:none; }
.chip--plain{ background:var(--paper-2); box-shadow:none; }

/* ---------- 7. Skip-Link & Topbar ---------------------------------------- */
.skip-link{
  position:absolute; left:16px; top:-100px; z-index:2000;
  background:var(--navy-900); color:#fff; padding:12px 20px; border-radius:var(--r-sm);
  font-weight:600; transition:top .2s;
}
.skip-link:focus{ top:16px; }

.topbar{
  background:var(--navy-900); color:#B8CCE6; font-size:.83rem; position:relative; z-index:60;
}
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:42px; padding-block:8px; }
.topbar__note{ display:flex; align-items:center; gap:9px; }
.topbar__note svg{ color:var(--copper-200); flex:none; }
.topbar__links{ display:flex; align-items:center; gap:22px; }
.topbar a{ transition:color .2s; }
.topbar a:hover{ color:#fff; }
.topbar__phone{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:#fff; }
@media (max-width:860px){ .topbar__note{ display:none; } .topbar__inner{ justify-content:center; } }
@media (max-width:480px){ .topbar__links{ gap:14px; font-size:.78rem; } }

/* ---------- 8. Header ---------------------------------------------------- */
.header{ position:sticky; top:0; z-index:100; transition:box-shadow .3s, background-color .3s; }
.header__bar{
  display:flex; align-items:center; gap:clamp(16px,3vw,44px);
  min-height:78px; padding-block:12px;
  transition:min-height .3s var(--ease);
}
.header{ background:rgba(250,248,245,.82); backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px); }
.header.is-stuck{ background:rgba(250,248,245,.95); box-shadow:0 1px 0 var(--line), 0 8px 28px rgba(10,23,41,.07); }
.header.is-stuck .header__bar{ min-height:66px; }

.brand{ display:inline-flex; align-items:center; gap:11px; flex:none; color:var(--navy); }
.brand__mark{ height:40px; width:auto; flex:none; transition:height .3s var(--ease); }
.header.is-stuck .brand__mark{ height:34px; }
.brand--footer{ display:block; }
.brand--footer img{ width:clamp(158px,17vw,196px); height:auto; }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-family:var(--font-display); font-weight:700; font-size:1.18rem; letter-spacing:-.045em; color:var(--navy-900); }
.brand__name span{ color:var(--copper); }
.brand__tag{ font-size:.665rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-top:4px; }

.nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav a{
  position:relative; padding:9px 14px; border-radius:var(--r-pill);
  font-size:.925rem; font-weight:500; color:var(--navy-800);
  transition:color .2s, background-color .2s;
}
.nav a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  background:var(--copper); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .34s var(--ease-out);
}
.nav a:hover{ color:var(--navy-900); }
.nav a:hover::after,.nav a.is-active::after{ transform:scaleX(1); }

.header__cta{ display:flex; align-items:center; gap:12px; flex:none; }
.header__phone{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:600; font-size:.93rem; color:var(--navy-900); padding:9px 4px; }
.header__phone svg{ color:var(--copper); }

.burger{
  display:none; width:46px; height:46px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--white); cursor:pointer;
  align-items:center; justify-content:center; flex:none; margin-left:auto;
}
.burger span{ display:block; width:19px; height:1.8px; background:var(--navy-900); border-radius:2px; position:relative; transition:transform .3s var(--ease), background-color .2s; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:19px; height:1.8px; background:var(--navy-900); border-radius:2px; transition:transform .3s var(--ease), top .2s .12s; }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.burger.is-open span{ background:transparent; }
.burger.is-open span::before{ top:0; transform:rotate(45deg); transition:top .2s, transform .3s .12s var(--ease); }
.burger.is-open span::after{ top:0; transform:rotate(-45deg); transition:top .2s, transform .3s .12s var(--ease); }

.mobile-nav{
  position:fixed; inset:0 0 0 0; z-index:99; background:var(--paper);
  padding:104px var(--gutter) 40px; overflow-y:auto;
  transform:translateY(-100%); opacity:0; visibility:hidden;
  transition:transform .48s var(--ease-out), opacity .32s, visibility .48s;
}
.mobile-nav.is-open{ transform:translateY(0); opacity:1; visibility:visible; }
.mobile-nav a.mnav-link{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--font-display); font-size:1.55rem; font-weight:600; letter-spacing:-.03em;
  color:var(--navy-900); padding:16px 0; border-bottom:1px solid var(--line-soft);
}
.mobile-nav a.mnav-link svg{ color:var(--copper); }
.mobile-nav__foot{ margin-top:34px; display:grid; gap:12px; }

@media (max-width:1080px){
  .nav{ display:none; }
  .header__cta{ display:none; }
  .burger{ display:inline-flex; }
}

/* ---------- 9. Zaun-Motiv (SVG-Grafik, Ablauf + Fußzeile) ---------------- */
.fence-motif{ display:block; width:100%; height:auto; color:var(--navy-800); }
/* ---------- 10. Hero ----------------------------------------------------- */
.hero{ position:relative; padding-top:clamp(40px,5.5vw,72px); padding-bottom:clamp(60px,7vw,104px); overflow:hidden; }
.hero__bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 78% 8%, rgba(194,118,44,.10), transparent 62%),
    radial-gradient(900px 560px at 6% 84%, rgba(15,58,115,.09), transparent 60%);
}
.hero__grid-lines{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(to right, rgba(15,58,115,.055) 1px, transparent 1px);
  background-size:clamp(60px,7vw,96px) 100%;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 78%);
  mask-image:linear-gradient(to bottom, #000 0%, transparent 78%);
}
.hero__inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(32px,5vw,72px); align-items:center;
}
.hero__copy{ max-width:640px; }
.hero__copy .eyebrow{ margin-bottom:24px; }
.hero h1{ text-wrap:balance; }
.hero h1 em{ font-style:normal; color:var(--navy); position:relative; white-space:nowrap; }
.hero h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:.07em; height:.13em;
  background:var(--copper-200); border-radius:99px; z-index:-1;
  transform:scaleX(0); transform-origin:left;
  animation:underline 1s .5s var(--ease-out) forwards;
}
@keyframes underline{ to{ transform:scaleX(1); } }
@media (prefers-reduced-motion:reduce){ .hero h1 em::after{ animation:none; transform:scaleX(1); } }
.hero__sub{ margin-top:24px; max-width:560px; }
.hero__actions{ margin-top:34px; display:flex; flex-wrap:wrap; gap:13px; }
.hero__trust{ margin-top:38px; display:flex; flex-wrap:wrap; gap:10px 9px; }

/* Bild-Komposition rechts */
.hero__visual{ position:relative; }
.hero__visual{ align-self:start; }
.hero__frame{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  aspect-ratio:4/5; box-shadow:var(--sh-3); background:var(--paper-3);
  z-index:2;
}
.hero__frame img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
.hero__frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(7,28,61,0) 42%, rgba(7,28,61,.42) 100%);
}
.hero__badge{
  position:absolute; z-index:3; left:-22px; bottom:34px;
  background:var(--white); border-radius:var(--r-md); padding:16px 20px;
  box-shadow:var(--sh-3); display:flex; align-items:center; gap:14px; max-width:270px;
}
.hero__badge .hb-ico{
  width:42px; height:42px; border-radius:12px; background:var(--copper-50);
  display:grid; place-items:center; color:var(--copper-600); flex:none;
}
.hero__badge strong{ display:block; font-family:var(--font-display); font-size:.98rem; letter-spacing:-.02em; color:var(--navy-900); }
.hero__badge strong + span{ font-size:.79rem; color:var(--muted); line-height:1.4; display:block; margin-top:2px; }

@media (max-width:1000px){
  .hero__inner{ grid-template-columns:1fr; gap:44px; }
  .hero__copy{ max-width:none; }
  .hero__visual{ align-self:auto; }
  .hero__frame{ aspect-ratio:16/11; }
  .hero__badge{ left:auto; right:14px; bottom:-18px; }
}
@media (max-width:560px){
  .hero__badge{ position:static; margin-top:16px; max-width:none; }
  .hero__actions .btn{ width:100%; }
}

/* ---------- 11. USP-Band ------------------------------------------------- */
.usp{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); }
.usp__card{
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:clamp(26px,3vw,36px); box-shadow:var(--sh-1);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s;
  position:relative; overflow:hidden;
}
.usp__card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--copper); transform:scaleY(0); transform-origin:top;
  transition:transform .45s var(--ease-out);
}
.usp__card:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); border-color:var(--line); }
.usp__card:hover::before{ transform:scaleY(1); }
.usp__ico{
  width:52px; height:52px; border-radius:15px; background:var(--navy-50); color:var(--navy);
  display:grid; place-items:center; margin-bottom:22px;
}
.usp__card h3{ font-size:1.22rem; margin-bottom:11px; }
@media (max-width:860px){ .usp{ grid-template-columns:1fr; } }

/* ---------- 12. Leistungen ----------------------------------------------- */
.services{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.2vw,26px); margin-top:clamp(40px,5vw,64px); }
.svc{
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
  box-shadow:var(--sh-1);
}
.svc:hover{ transform:translateY(-6px); box-shadow:var(--sh-3); }
.svc__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper-3); }
.svc__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.svc:hover .svc__media img{ transform:scale(1.06); }
.svc__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(7,28,61,.36), transparent 46%); }
.svc__num{
  position:absolute; z-index:2; top:14px; left:14px;
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:rgba(250,248,245,.92); backdrop-filter:blur(6px);
  font-family:var(--font-display); font-weight:700; font-size:.8rem; color:var(--navy);
}
.svc__body{ padding:clamp(22px,2.4vw,28px); display:flex; flex-direction:column; flex:1; }
.svc__body h3{ font-size:1.28rem; }
.svc__body > p{ margin-top:11px; color:var(--muted); font-size:.955rem; line-height:1.62; }
.svc__tags{ margin-top:16px; display:flex; flex-wrap:wrap; gap:6px; }
.svc__tags li{
  font-size:.775rem; color:var(--navy-800); background:var(--paper-2);
  padding:5px 11px; border-radius:var(--r-pill); line-height:1.35;
}
.svc__foot{ margin-top:auto; padding-top:18px; }
@media (max-width:1000px){ .services{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:660px){ .services{ grid-template-columns:1fr; } }

/* ---------- 13. Konfigurator --------------------------------------------- */
.cfg{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(24px,3vw,40px); margin-top:clamp(40px,5vw,60px); align-items:start; }
.cfg__panel{
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:clamp(24px,2.8vw,34px); box-shadow:var(--sh-2);
}
.cfg__group + .cfg__group{ margin-top:30px; padding-top:30px; border-top:1px solid var(--line-soft); }
.cfg__label{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:15px;
}
.cfg__label span:first-child{
  font-family:var(--font-display); font-weight:600; font-size:.79rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
}
.cfg__val{ font-family:var(--font-display); font-weight:700; font-size:1.06rem; color:var(--navy-900); letter-spacing:-.02em; }

.cfg__opts{ display:flex; flex-wrap:wrap; gap:9px; }
.opt{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 17px; border-radius:var(--r-pill);
  border:1.5px solid var(--line); background:var(--paper); cursor:pointer;
  font-size:.9rem; font-weight:500; color:var(--navy-800);
  transition:border-color .25s, background-color .25s, color .25s, transform .25s var(--ease-out);
}
.opt:hover{ border-color:var(--navy-300); transform:translateY(-1px); }
.opt[aria-pressed="true"]{ background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:var(--sh-navy); }
.opt__dot{ width:15px; height:15px; border-radius:50%; border:1.5px solid rgba(10,23,41,.18); flex:none; }
.opt[aria-pressed="true"] .opt__dot{ border-color:rgba(255,255,255,.55); box-shadow:0 0 0 2px rgba(255,255,255,.22); }

/* Slider */
.slider{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:99px; background:var(--paper-3); outline:none; margin:6px 0 0; cursor:pointer; }
.slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:26px; height:26px; border-radius:50%;
  background:var(--white); border:2px solid var(--navy); cursor:grab;
  box-shadow:0 3px 10px rgba(10,23,41,.2); transition:transform .18s var(--ease-out);
}
.slider::-webkit-slider-thumb:hover{ transform:scale(1.12); }
.slider::-webkit-slider-thumb:active{ cursor:grabbing; }
.slider::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--white); border:2px solid var(--navy); box-shadow:0 3px 10px rgba(10,23,41,.2); cursor:grab; }
.slider::-moz-range-track{ height:6px; border-radius:99px; background:var(--paper-3); }
.cfg__scale{ display:flex; justify-content:space-between; margin-top:9px; font-size:.75rem; color:var(--muted); }

/* Vorschau */
.cfg__preview{ position:sticky; top:104px; }
.cfg__stage{
  border-radius:var(--r-lg); overflow:hidden; position:relative;
  background:linear-gradient(178deg,#E8EFF7 0%,#F4F1EA 58%,#EDE7DB 100%);
  border:1px solid var(--line-soft); box-shadow:var(--sh-2); aspect-ratio:800/430;
}
.cfg__stage svg{ position:absolute; inset:0; width:100%; height:100%; }
.cfg__stagetag{
  position:absolute; z-index:3; left:16px; top:16px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(6px);
  border-radius:var(--r-pill); padding:7px 14px; font-size:.78rem; font-weight:600; color:var(--navy-800);
}
.cfg__result{
  margin-top:18px; background:var(--navy-900); color:#fff; border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,30px); box-shadow:var(--sh-navy);
}
.cfg__resultrow{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.cfg__price{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.9rem,1.3rem + 2vw,2.7rem); letter-spacing:-.04em; line-height:1; color:#fff; }
.cfg__price small{ font-size:.42em; font-weight:600; color:var(--copper-200); letter-spacing:-.01em; display:block; margin-bottom:8px; }
.cfg__permeter{ text-align:right; font-size:.85rem; color:#A9BDD8; }
.cfg__permeter b{ display:block; color:#fff; font-family:var(--font-display); font-size:1.15rem; letter-spacing:-.02em; }
.cfg__note{ margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.14); font-size:.78rem; line-height:1.55; color:#8FA7C6; }
.cfg__result .btn{ margin-top:20px; }
@media (max-width:960px){
  .cfg{ grid-template-columns:minmax(0,1fr); }
  .cfg__preview{ position:static; order:-1; }
}

/* ---------- 14. Split (Warum wir) ---------------------------------------- */
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:center; }
.split--rev .split__media{ order:2; }
.split__media{ position:relative; }
.split__media img{ width:100%; border-radius:var(--r-xl); box-shadow:var(--sh-3); aspect-ratio:7/5; object-fit:cover; }
.split__media .split__inset{
  position:absolute; right:-24px; bottom:-30px; width:44%; border-radius:var(--r-lg);
  box-shadow:var(--sh-3); border:5px solid var(--paper); aspect-ratio:5/6; object-fit:cover;
}
.checklist{ display:grid; gap:14px; margin-top:30px; }
.checklist li{ display:flex; align-items:flex-start; gap:13px; }
.checklist .ck{
  width:25px; height:25px; border-radius:50%; background:var(--copper-50); color:var(--copper-600);
  display:grid; place-items:center; flex:none; margin-top:2px;
}
.section--navy .checklist .ck{ background:rgba(194,118,44,.2); color:var(--copper-200); }
.checklist b{ font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; }
.checklist p{ color:var(--muted); font-size:.925rem; margin-top:3px; }
.section--navy .checklist p{ color:#9EB4D0; }
@media (max-width:900px){
  .split{ grid-template-columns:1fr; }
  .split--rev .split__media{ order:0; }
  .split__media .split__inset{ width:38%; right:-8px; bottom:-20px; }
}

/* Stats */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,22px); margin-top:clamp(44px,5vw,64px); }
.stat{ padding:26px 22px; border-radius:var(--r-lg); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11); }
.stat__n{ font-family:var(--font-display); font-weight:700; font-size:clamp(2rem,1.4rem + 2vw,2.8rem); letter-spacing:-.045em; color:#fff; line-height:1; }
.stat__n span{ color:var(--copper-200); }
.stat__l{ margin-top:10px; font-size:.87rem; color:#A9BDD8; line-height:1.45; }
.stats--light .stat{ background:var(--white); border-color:var(--line-soft); box-shadow:var(--sh-1); }
.stats--light .stat__n{ color:var(--navy-900); }
.stats--light .stat__n span{ color:var(--copper); }
.stats--light .stat__l{ color:var(--muted); }
@media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); } }

/* ---------- 15. Ablauf (Scroll-Animation) -------------------------------- */
.process{ position:relative; margin-top:clamp(44px,5vw,72px); }
.process__track{
  position:absolute; left:0; right:0; top:38px; height:3px; border-radius:3px;
  background:rgba(255,255,255,.13); overflow:hidden;
}
.process__fill{
  position:absolute; inset:0; transform-origin:left; transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--copper),var(--copper-200));
  transition:transform .18s linear;
}
.process__steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,30px); position:relative; }
.pstep{ position:relative; padding-top:78px; }
.pstep__post{
  position:absolute; top:0; left:0; width:40px; height:78px; display:flex; align-items:flex-start; justify-content:center;
}
.pstep__badge{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--navy-800); border:2px solid rgba(255,255,255,.22); color:#8FA7C6;
  font-family:var(--font-display); font-weight:700; font-size:.9rem;
  transition:background-color .4s var(--ease), color .4s, border-color .4s, transform .5s var(--ease-out);
  position:relative; z-index:2;
}
.pstep.is-on .pstep__badge{ background:var(--copper); border-color:var(--copper-200); color:#fff; transform:scale(1.08); }
/* kleiner Zaun, der unter dem Badge „wächst“ */
.pstep__fence{
  position:absolute; top:44px; left:0; right:0; height:30px; color:rgba(255,255,255,.2);
  transition:color .5s;
}
.pstep.is-on .pstep__fence{ color:rgba(194,118,44,.5); }
.pstep__fence svg{ width:100%; height:100%; }
.pstep h3{ font-size:1.16rem; }
.pstep p{ margin-top:10px; font-size:.925rem; color:#9EB4D0; line-height:1.6; }
@media (max-width:900px){
  .process__steps{ grid-template-columns:1fr 1fr; gap:30px; }
  .process__track{ display:none; }
}
@media (max-width:540px){ .process__steps{ grid-template-columns:1fr; } }

/* ---------- 16. Referenz-Galerie ----------------------------------------- */
.gallery{
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(118px, 14.6vw, 218px);
  gap:clamp(12px,1.5vw,18px); margin-top:clamp(40px,5vw,60px);
}
.gitem{
  position:relative; border-radius:var(--r-md); overflow:hidden; cursor:zoom-in;
  background:var(--paper-3); box-shadow:var(--sh-1); border:0; padding:0;
  grid-column:span 1; grid-row:span 1;
}
.gitem--feature{ grid-column:span 2; grid-row:span 2; }
.gitem--wide{ grid-column:span 2; }
.gitem img{ width:100%; height:100%; object-fit:cover; transition:transform .85s var(--ease-out); }
.gitem:hover img{ transform:scale(1.055); }
.gitem__cap{
  position:absolute; z-index:2; left:0; right:0; bottom:0; padding:34px 18px 16px; text-align:left;
  background:linear-gradient(to top, rgba(7,28,61,.86), transparent);
  color:#fff; font-family:var(--font-display); font-weight:600; font-size:.925rem; letter-spacing:-.02em;
  opacity:0; transform:translateY(8px); transition:opacity .4s, transform .45s var(--ease-out);
}
.gitem__cap em{ display:block; font-style:normal; font-weight:400; font-family:var(--font-body); font-size:.79rem; color:#C6D6EA; margin-top:3px; }
.gitem:hover .gitem__cap,.gitem:focus-visible .gitem__cap{ opacity:1; transform:translateY(0); }
.gitem__zoom{
  position:absolute; z-index:2; top:12px; right:12px; width:34px; height:34px; border-radius:50%;
  background:rgba(250,248,245,.9); backdrop-filter:blur(6px); display:grid; place-items:center; color:var(--navy);
  opacity:0; transform:scale(.85); transition:opacity .35s, transform .35s var(--ease-out);
}
.gitem:hover .gitem__zoom{ opacity:1; transform:scale(1); }
@media (max-width:900px){
  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(120px,26vw,190px); }
  .gitem--feature{ grid-column:span 2; grid-row:span 2; }
  .gitem--wide{ grid-column:span 2; grid-row:span 1; }
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:300; background:rgba(7,23,41,.94);
  display:grid; place-items:center; padding:clamp(16px,4vw,48px);
  opacity:0; visibility:hidden; transition:opacity .32s, visibility .32s;
  backdrop-filter:blur(8px);
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:min(1100px,100%); max-height:82vh; border-radius:var(--r-md); box-shadow:0 40px 90px rgba(0,0,0,.5); object-fit:contain; }
.lightbox__cap{ color:#C6D6EA; text-align:center; margin-top:18px; font-size:.92rem; }
.lightbox__close,.lightbox__nav{
  position:absolute; width:50px; height:50px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08); color:#fff; display:grid; place-items:center; cursor:pointer;
  transition:background-color .25s, transform .25s var(--ease-out);
}
.lightbox__close:hover,.lightbox__nav:hover{ background:rgba(255,255,255,.2); transform:scale(1.06); }
.lightbox__close{ top:22px; right:22px; }
.lightbox__nav--prev{ left:clamp(10px,2.4vw,30px); top:50%; margin-top:-25px; }
.lightbox__nav--next{ right:clamp(10px,2.4vw,30px); top:50%; margin-top:-25px; }
@media (max-width:640px){ .lightbox__nav{ display:none; } }

/* ---------- 17. Standorte ------------------------------------------------ */
.locations{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,22px); margin-top:clamp(40px,5vw,60px); }
.loc{
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,28px); box-shadow:var(--sh-1); position:relative; overflow:hidden;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.loc:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); }
.loc__pin{ width:40px; height:40px; border-radius:12px; background:var(--navy-50); color:var(--navy); display:grid; place-items:center; margin-bottom:18px; }
.loc h3{ font-size:1.16rem; }
.loc__badge{ display:inline-block; margin-left:8px; font-family:var(--font-body); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; font-weight:600; color:var(--copper-600); background:var(--copper-50); padding:3px 8px; border-radius:99px; vertical-align:middle; }
.loc address{ font-style:normal; margin-top:11px; color:var(--muted); font-size:.925rem; line-height:1.6; }
.loc__tel{ margin-top:16px; display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:600; color:var(--navy); font-size:1.02rem; letter-spacing:-.02em; transition:color .2s; }
.loc__tel:hover{ color:var(--copper-600); }
.areas{ margin-top:clamp(34px,4vw,48px); padding:clamp(24px,3vw,34px); background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-lg); }
.areas h3{ font-size:1.06rem; }
.areas__list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.areas__list li{ padding:7px 14px; border-radius:99px; background:var(--paper-2); font-size:.85rem; color:var(--navy-800); }
@media (max-width:1000px){ .locations{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .locations{ grid-template-columns:1fr; } }

/* ---------- 18. Stimmen -------------------------------------------------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); margin-top:clamp(40px,5vw,60px); }
.quote{
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,32px); box-shadow:var(--sh-1); display:flex; flex-direction:column;
}
.quote__stars{ display:flex; gap:3px; color:var(--copper); margin-bottom:16px; }
.quote p{ font-family:var(--font-display); font-weight:500; font-size:1.03rem; line-height:1.52; letter-spacing:-.02em; color:var(--navy-900); }
.quote__by{ margin-top:auto; padding-top:22px; display:flex; align-items:center; gap:12px; }
.quote__av{ width:42px; height:42px; border-radius:50%; background:var(--navy-50); color:var(--navy); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:.86rem; flex:none; }
.quote__by b{ display:block; font-size:.92rem; font-family:var(--font-display); letter-spacing:-.02em; }
.quote__by span{ display:block; font-size:.79rem; color:var(--muted); }
@media (max-width:900px){ .quotes{ grid-template-columns:1fr; } }

/* ---------- 19. FAQ ------------------------------------------------------ */
.faq{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(30px,4vw,64px); align-items:start; }
.faq__list{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 0; font-family:var(--font-display); font-weight:600; font-size:1.06rem;
  letter-spacing:-.022em; color:var(--navy-900); transition:color .2s;
}
.faq__q:hover{ color:var(--navy); }
.faq__ico{ width:30px; height:30px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; flex:none; transition:transform .4s var(--ease), background-color .3s, border-color .3s, color .3s; }
.faq__item.is-open .faq__ico{ transform:rotate(45deg); background:var(--copper); border-color:var(--copper); color:#fff; }
.faq__a{ overflow:hidden; height:0; transition:height .42s var(--ease-out); }
.faq__a > div{ padding-bottom:26px; color:var(--muted); font-size:.965rem; line-height:1.68; max-width:62ch; }
.faq__aside{ position:sticky; top:110px; }
@media (max-width:900px){ .faq{ grid-template-columns:1fr; } .faq__aside{ position:static; } }

/* ---------- 20. CTA-Band ------------------------------------------------- */
.cta-band{ position:relative; overflow:hidden; padding-block:0; }  /* Innenabstand kommt von __inner */
.cta-band__bg{ position:absolute; inset:0; z-index:0; }
.cta-band__bg img{ width:100%; height:100%; object-fit:cover; }
.cta-band__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(105deg, rgba(7,28,61,.95) 12%, rgba(7,28,61,.78) 52%, rgba(7,28,61,.5) 100%); }
.cta-band__inner{ position:relative; z-index:2; padding-block:clamp(56px,6vw,92px); max-width:720px; }
.cta-band h2{ color:#fff; }
.cta-band .t-lead{ color:#B6C9E2; margin-top:20px; }
.cta-band__actions{ margin-top:32px; display:flex; flex-wrap:wrap; gap:13px; }
@media (max-width:560px){ .cta-band__actions .btn{ width:100%; } }

/* ---------- 21. Kontakt / Formular --------------------------------------- */
.contact{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,4vw,58px); align-items:start; }
.form-card{
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-xl);
  padding:clamp(26px,3.2vw,40px); box-shadow:var(--sh-3);
}
.fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field--full{ grid-column:1/-1; }
.field label{ font-family:var(--font-display); font-weight:600; font-size:.815rem; letter-spacing:.02em; color:var(--navy-800); }
.field label .req{ color:var(--copper); }
.field input,.field select,.field textarea{
  width:100%; padding:14px 16px; border-radius:var(--r-sm);
  border:1.5px solid var(--line); background:var(--paper); color:var(--ink);
  font-size:.965rem; transition:border-color .22s, background-color .22s, box-shadow .22s;
}
.field textarea{ resize:vertical; min-height:126px; line-height:1.6; }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A6B80' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:44px; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--navy); background:var(--white); box-shadow:0 0 0 4px rgba(15,58,115,.1); }
.field input::placeholder,.field textarea::placeholder{ color:#9AA7B7; }
.err{ font-size:.79rem; color:#B4361F; display:none; }
.field.has-error .err,
.consent.has-error ~ .err{ display:block; }
.field.has-error input,.field.has-error select,.field.has-error textarea{ border-color:#D9583D; background:#FEF6F4; }
.consent.has-error input{ outline:2px solid #D9583D; outline-offset:2px; border-radius:4px; }
.field.has-error .err{ display:block; }

.consent{ grid-column:1/-1; display:flex; align-items:flex-start; gap:12px; margin-top:4px; }
.consent input{ width:20px; height:20px; margin-top:2px; flex:none; accent-color:var(--navy); cursor:pointer; }
.consent label{ font-size:.855rem; line-height:1.55; color:var(--muted); font-family:var(--font-body); font-weight:400; letter-spacing:0; }
.consent a{ color:var(--navy); text-decoration:underline; text-underline-offset:2px; }
.form-foot{ margin-top:26px; display:flex; flex-direction:column; gap:14px; }
.form-note{ font-size:.79rem; color:var(--muted); }
.form-error{
  display:flex; align-items:flex-start; gap:10px;
  padding:14px 16px; border-radius:var(--r-sm);
  background:#FEF6F4; border:1.5px solid #E8B4A6;
  font-size:.885rem; line-height:1.5; color:#8C2F17;
}
.form-error[hidden]{ display:none; }
.form-error svg{ flex:none; margin-top:2px; color:#C0492A; }
.form-error a{ color:#8C2F17; font-weight:600; text-decoration:underline; text-underline-offset:2px; }

.form-success{
  display:none; text-align:center; padding:clamp(30px,4vw,50px) 10px;
}
.form-success.is-on{ display:block; }
.fs-ico{ width:66px; height:66px; border-radius:50%; background:var(--copper-50); color:var(--copper-600); display:grid; place-items:center; margin:0 auto 22px; }
.form-card.is-sent .form-inner{ display:none; }

/* Kontakt-Seitenspalte */
.contact-aside{ display:grid; gap:14px; }
.cbox{
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:clamp(20px,2.4vw,26px); box-shadow:var(--sh-1);
  display:flex; align-items:center; gap:16px;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
a.cbox:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }
.cbox__ico{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; flex:none; background:var(--navy-50); color:var(--navy); }
.cbox--wa .cbox__ico{ background:#E7F7EC; color:#128C4A; }
.cbox--copper .cbox__ico{ background:var(--copper-50); color:var(--copper-600); }
.cbox b{ display:block; font-family:var(--font-display); font-size:1.02rem; letter-spacing:-.022em; color:var(--navy-900); }
.cbox b + span{ display:block; font-size:.885rem; color:var(--muted); margin-top:3px; line-height:1.5; }
.hours{ background:var(--navy-900); color:#fff; border-radius:var(--r-lg); padding:clamp(22px,2.6vw,28px); }
.hours h4{ color:#fff; margin-bottom:14px; }
.cbox-head{ font-size:1.06rem; line-height:1.3; letter-spacing:-.015em; font-weight:600; }
.hours dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:9px 18px; font-size:.9rem; }
.hours dt{ color:#A9BDD8; } .hours dd{ margin:0; text-align:right; font-weight:500; }
@media (max-width:900px){ .contact{ grid-template-columns:1fr; } }
@media (max-width:560px){ .fgrid{ grid-template-columns:1fr; } }

/* ---------- 22. Footer --------------------------------------------------- */
.footer{ background:var(--navy-900); color:#9EB4D0; padding-top:clamp(56px,6vw,84px); position:relative; overflow:hidden; }
.footer__fence{ position:absolute; left:0; right:0; top:0; height:56px; color:rgba(255,255,255,.055); pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent); mask-image:linear-gradient(to bottom,#000,transparent); }
.footer__fence svg{ width:100%; height:100%; }
.footer__top{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:clamp(28px,4vw,48px); position:relative; z-index:2; }
.footer .brand__name{ color:#fff; }
.footer .brand__tag{ color:#7E9CC4; }
.footer__about{ margin-top:22px; font-size:.925rem; line-height:1.68; max-width:38ch; }
.footer__social{ display:flex; gap:10px; margin-top:24px; }
.footer__social a{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.11); color:#C6D6EA;
  transition:background-color .25s, transform .25s var(--ease-out), color .25s;
}
.footer__social a:hover{ background:var(--copper); color:#fff; transform:translateY(-3px); border-color:var(--copper); }
.footer h4,.footer__head{ color:#fff; font-family:var(--font-display); font-size:.79rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:20px; font-weight:600; line-height:1.3; }
.footer__links{ display:grid; gap:11px; font-size:.92rem; }
.footer__links a{ transition:color .2s, padding-left .25s var(--ease-out); display:inline-block; }
.footer__links a:hover{ color:#fff; padding-left:5px; }
.footer__bottom{
  margin-top:clamp(44px,5vw,64px); border-top:1px solid rgba(255,255,255,.1);
  padding-block:26px; display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap; font-size:.83rem; position:relative; z-index:2;
}
.footer__bottom a:hover{ color:#fff; }
.footer__legal{ display:flex; gap:20px; flex-wrap:wrap; }
@media (max-width:960px){ .footer__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer__top{ grid-template-columns:1fr; } }

/* ---------- 23. Sticky Mobile-CTA ---------------------------------------- */
.mobile-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:90; display:none;
  gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(250,248,245,.94); backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .42s var(--ease-out);
}
.mobile-cta.is-on{ transform:translateY(0); }
.mobile-cta .btn{ flex:1; padding:14px 12px; font-size:.9rem; }
@media (max-width:760px){ .mobile-cta{ display:flex; } body{ padding-bottom:0; } }

/* ---------- 24. Reveal-Animationen --------------------------------------- */
.js [data-reveal]{ opacity:0; transform:translateY(26px); }
.js [data-reveal].is-in{
  opacity:1; transform:none;
  transition:opacity .78s var(--ease-out), transform .78s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.js [data-reveal="fade"]{ transform:none; }
.js [data-reveal="left"]{ transform:translateX(-28px); }
.js [data-reveal="right"]{ transform:translateX(28px); }
.js [data-reveal="zoom"]{ transform:scale(.965); }
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---------- 25. Rechtstexte / Subseiten ---------------------------------- */
.legal{ max-width:820px; }
.legal h1{ font-size:clamp(2rem,1.4rem + 2.4vw,3rem); }
.legal h2{ font-size:clamp(1.25rem,1.1rem + .8vw,1.6rem); margin-top:48px; }
.legal h3{ font-size:1.08rem; margin-top:30px; }
.legal p,.legal li{ color:var(--muted); font-size:.985rem; line-height:1.75; }
.legal p{ margin-top:14px; }
.legal ul{ list-style:disc; padding-left:22px; margin-top:14px; display:grid; gap:8px; }
.legal a{ color:var(--navy); text-decoration:underline; text-underline-offset:2px; }
.legal strong{ color:var(--navy-900); }
.legal address{ font-style:normal; margin-top:14px; color:var(--muted); line-height:1.8; }

/* 404 */
.err404{ min-height:64vh; display:grid; place-items:center; text-align:center; padding-block:clamp(60px,8vw,120px); }
.err404__code{ font-family:var(--font-display); font-weight:700; font-size:clamp(5rem,4rem + 8vw,11rem); line-height:.9; letter-spacing:-.06em; color:var(--navy-100); }

/* ---------- 26. Utilities ------------------------------------------------ */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.no-scroll{ overflow:hidden; }
.text-center{ text-align:center; }
.mt-auto{ margin-top:auto; }


/* ---------- 27. Mobile-Feinschliff --------------------------------------- */
@media (max-width:600px){
  body{ font-size:16px; line-height:1.6; }
  h1,.t-h1{ font-size:clamp(2.05rem, 1.35rem + 3.6vw, 2.7rem); letter-spacing:-.032em; }
  h2,.t-h2{ font-size:clamp(1.68rem, 1.2rem + 2.6vw, 2.2rem); }
  h3,.t-h3{ font-size:1.16rem; }
  .t-lead{ font-size:1rem; line-height:1.58; }
  .eyebrow{ font-size:.685rem; letter-spacing:.13em; }

  .btn{ padding:13px 20px; font-size:.925rem; }
  .btn--lg{ padding:15px 22px; font-size:.95rem; }
  .chip{ padding:6px 12px; font-size:.775rem; gap:6px; }

  .hero{ padding-top:24px; padding-bottom:40px; }
  .hero__copy .eyebrow{ margin-bottom:15px; }
  .hero__sub{ margin-top:16px; }
  .hero__actions{ margin-top:24px; gap:10px; }
  .hero__trust{ margin-top:24px; gap:7px 6px; }
  .hero__badge{ margin-top:14px; padding:13px 16px; gap:12px; }
  .hero__badge .hb-ico{ width:36px; height:36px; border-radius:10px; }
  .hero__frame{ aspect-ratio:4/3; border-radius:var(--r-lg); }

  .section-head h2 + .t-lead{ margin-top:14px; }
  .services{ gap:14px; margin-top:28px; }
  .svc__media{ aspect-ratio:16/10; }
  .svc__body{ padding:20px; }
  .svc__body > p{ font-size:.92rem; margin-top:9px; }

  .cfg{ margin-top:28px; gap:16px; }
  .cfg__panel{ padding:20px; }
  .cfg__group + .cfg__group{ margin-top:22px; padding-top:22px; }
  .cfg__result{ padding:20px; }
  .opt{ padding:9px 14px; font-size:.85rem; }
  .split{ gap:32px; }
  .split__media img{ aspect-ratio:4/3; }
  .checklist{ gap:12px; margin-top:24px; }
  .checklist p{ font-size:.88rem; }
  .stats{ margin-top:32px; gap:12px; }
  .stat{ padding:18px 16px; }
  .loc,.quote,.areas{ padding:20px; }
  .locations,.gallery,.quotes,.faq,.contact{ margin-top:28px; }
  /* Zwei Spalten statt Endlos-Stapel */
  .locations{ grid-template-columns:1fr 1fr; gap:12px; }
  .loc{ padding:16px 15px; }
  .loc__pin{ width:32px; height:32px; border-radius:10px; margin-bottom:12px; }
  .loc h3{ font-size:1.02rem; }
  .loc__badge{ margin-left:6px; font-size:.58rem; padding:2px 6px; }
  .loc address{ font-size:.84rem; margin-top:8px; }
  .loc__tel{ margin-top:11px; font-size:.92rem; gap:7px; }
  .footer__top{ grid-template-columns:1fr 1fr; gap:26px 20px; }
  .footer__top > :first-child{ grid-column:1/-1; }
  .footer__about{ margin-top:16px; max-width:none; }
  .fgrid{ grid-template-columns:1fr 1fr; gap:13px; }
  .field label{ font-size:.76rem; }
  .field input,.field select,.field textarea{ padding:12px 13px; font-size:.92rem; }
  .svc__media{ aspect-ratio:2/1; }
  .svc__tags li{ font-size:.74rem; padding:4px 9px; }
  .form-card{ padding:20px; border-radius:var(--r-lg); }
  .faq__q{ padding:19px 0; font-size:1rem; }
  .cta-band__inner{ padding-block:52px; }
  .footer{ padding-top:48px; }
  .footer__top{ gap:32px; }
  .footer__bottom{ margin-top:34px; }
  .areas__list li{ padding:6px 11px; font-size:.8rem; }
}

@media (max-width:400px){
  .brand__mark{ height:34px; }
  .brand__name{ font-size:1.06rem; }
  .brand__tag{ font-size:.6rem; letter-spacing:.12em; }
}

@media (max-width:380px){
  .fgrid{ grid-template-columns:1fr; }
  .locations{ grid-template-columns:1fr; }
}

/* ---------- 28. Zaun-Planer auf schmalen Bildschirmen -------------------- */
/* Kein Dialog, keine Schritte: Das Zaunbild bleibt beim Scrollen oben kleben,
   die Auswahl läuft darunter durch. Jede Änderung ist dadurch sofort sichtbar,
   ohne dass man irgendwo hin- und zurückspringen muss.                       */
@media (max-width:860px){
  .cfg{ display:flex; flex-direction:column; gap:0; align-items:stretch; }
  .cfg__preview{ display:contents; }

  .cfg__stagewrap{
    order:1; position:sticky; top:62px; z-index:5;
    margin-inline:calc(var(--gutter) * -1);
    padding:12px var(--gutter) 14px;
    background:var(--paper);
  }
  .cfg__stagewrap::after{
    content:""; position:absolute; left:0; right:0; bottom:-16px; height:16px;
    background:linear-gradient(to bottom, var(--paper), transparent);
    pointer-events:none;
  }
  .cfg__panel{ order:2; background:none; border:0; box-shadow:none; padding:20px 0 0; }
  .cfg__result{ order:3; margin-top:22px; }

  .cfg__group + .cfg__group{ margin-top:24px; padding-top:24px; }
  .cfg__label{ flex-direction:column; align-items:flex-start; gap:4px; margin-bottom:13px; }
  .cfg__label span:first-child{ font-size:.72rem; }
  .cfg__val{ font-size:1.22rem; line-height:1.2; }
  .opt{ padding:11px 16px; font-size:.92rem; }
  .slider{ margin-top:12px; height:8px; }
}

/* Kurze Entscheidungshilfe je Auswahl – auf dem Desktop bleibt die Spalte
   dadurch kompakt, auf dem Handy ist Platz und der Hinweis hilft wirklich. */
.cfg__hint{ display:none; }
@media (max-width:860px){
  .cfg__hint{
    display:block; margin-top:14px; padding:12px 15px;
    background:var(--navy-50); border-radius:var(--r-md);
    font-size:.855rem; line-height:1.5; color:var(--navy-800);
  }
}

/* Auf schmalen Bildschirmen blenden Elemente von unten ein statt von der
   Seite – seitliche Versätze würden sonst kurzzeitig über den Rand ragen. */
@media (max-width:760px){
  .js [data-reveal="left"],
  .js [data-reveal="right"]{ transform:translateY(22px); }
}

/* ---------- 29. Unterseiten (Leistungen & Standorte) --------------------- */
.crumbs{ background:var(--paper-2); border-bottom:1px solid var(--line-soft); font-size:.82rem; }
.crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding-block:13px; color:var(--muted); }
.crumbs li{ display:inline-flex; align-items:center; gap:6px; }
.crumbs svg{ color:var(--navy-300); flex:none; }
.crumbs a{ color:var(--navy); transition:color .2s; }
.crumbs a:hover{ color:var(--copper-600); text-decoration:underline; text-underline-offset:2px; }
.crumbs [aria-current]{ color:var(--navy-900); font-weight:600; }

.sub-hero{ padding-block:clamp(38px,5vw,72px); }
.sub-hero h1{ font-size:clamp(1.95rem,1.3rem+2.6vw,3.15rem); text-wrap:balance; }
.sub-hero .split{ align-items:center; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); }
.sub-hero__bild{ margin:0; }
.sub-hero__bild img{ width:100%; border-radius:var(--r-xl); box-shadow:var(--sh-3); aspect-ratio:4/3; object-fit:cover; }

.standort-karte{
  margin-top:30px; display:flex; align-items:flex-start; gap:16px;
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:22px 24px; box-shadow:var(--sh-1);
}
.standort-karte .loc__pin{ margin-bottom:0; }
.standort-karte strong{ font-family:var(--font-display); font-size:1.04rem; letter-spacing:-.022em; color:var(--navy-900); display:block; }
.standort-karte address{ font-style:normal; margin-top:6px; color:var(--muted); font-size:.92rem; line-height:1.6; }
.standort-karte .loc__tel{ margin-top:12px; }

/* Fließtext der Unterseiten */
.prosa > *{ max-width:74ch; }   /* Zeilenlänge begrenzen, Spalte bleibt aber linksbündig */
.prosa h2{ font-size:clamp(1.42rem,1.15rem+1.2vw,2rem); margin-top:52px; }
.prosa h2:first-child{ margin-top:0; }
.prosa h3{ font-size:1.12rem; margin-top:30px; }
.prosa p{ margin-top:16px; color:var(--muted); font-size:1.005rem; line-height:1.75; }
.prosa p strong{ color:var(--navy-900); font-weight:600; }
.prosa a{ color:var(--navy); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.prosa a:hover{ color:var(--copper-600); }

.tabelle-wrap{ overflow-x:auto; margin-top:22px; -webkit-overflow-scrolling:touch; }
.datentabelle{ width:100%; border-collapse:collapse; font-size:.945rem; min-width:420px; }
.datentabelle th,.datentabelle td{ text-align:left; padding:13px 16px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.datentabelle th{ font-family:var(--font-display); font-weight:600; color:var(--navy-900); white-space:nowrap; width:1%; }
.datentabelle td{ color:var(--muted); }
.datentabelle tr:nth-child(odd) th,.datentabelle tr:nth-child(odd) td{ background:var(--paper-2); }

.hinweis-box{
  margin-top:44px; padding:clamp(20px,2.6vw,28px);
  background:var(--navy-50); border-left:3px solid var(--copper); border-radius:0 var(--r-md) var(--r-md) 0;
}
.hinweis-box h3{ margin-top:0; font-size:1.02rem; letter-spacing:.02em; text-transform:uppercase; color:var(--navy); }
.hinweis-box p{ margin-top:10px; color:var(--navy-800); }

.verweise{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); }
.verweise h2{ margin-bottom:16px; }
.chip-reihe{ display:flex; flex-wrap:wrap; gap:8px; }
.chip-reihe .chip{ transition:transform .28s var(--ease-out), border-color .2s, color .2s; }
.chip-reihe a.chip:hover{ transform:translateY(-2px); border-color:var(--navy-300); color:var(--navy); }

@media (max-width:900px){
  .sub-hero .split{ grid-template-columns:1fr; gap:34px; }
  .sub-hero__bild{ order:-1; }
  .verweise{ grid-template-columns:1fr; gap:30px; }
}
@media (max-width:600px){
  .prosa h2{ margin-top:38px; }
  .standort-karte{ padding:18px 18px; gap:14px; }
  .hinweis-box{ margin-top:32px; }
}

/* Leistungskarte: zwei Wege – zur Detailseite oder direkt in die Anfrage */
.svc__foot{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.svc__body h3 a{ color:inherit; transition:color .2s; }
.svc__body h3 a:hover{ color:var(--navy); }
.link-arrow--zart{ color:var(--muted); font-weight:500; }
.link-arrow--zart:hover{ color:var(--navy); }
.loc h3 a{ color:inherit; transition:color .2s; }
.loc h3 a:hover{ color:var(--navy); }

/* Lange deutsche Komposita ("Doppelstabmattenzaun") sprengen auf schmalen
   Displays jede Überschrift. Mit lang="de" trennt der Browser korrekt. */
/* Silbentrennung in jeder Breite: Ohne sie bricht der Browser lange Komposita
   wie "Doppelstabmattenzaun" irgendwo mitten im Wort um – und zwar ohne
   Trennstrich. Mit lang="de" trennt er stattdessen korrekt nach Silben.
   overflow-wrap bleibt als letzte Reißleine für Wörter ohne Trennstelle. */
h1,h2,h3,h4{ hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word; }
/* Die FAQ-Spalte ist schmal – hier immer trennen dürfen */
.faq__aside h2{ hyphens:auto; -webkit-hyphens:auto; font-size:clamp(1.7rem,1.2rem+1.6vw,2.5rem); }

/* ---------- 30. Bausteine der Unterseiten -------------------------------- */
.fakten-band{ background:var(--paper-2); border-block:1px solid var(--line-soft); }
.fakten{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,26px); }
.fakt{
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:clamp(20px,2.2vw,26px); box-shadow:var(--sh-1);
  display:flex; flex-direction:column; gap:8px;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.fakt:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); }
.fakt__wert{
  font-family:var(--font-display); font-weight:700; line-height:1.05; letter-spacing:-.04em;
  font-size:clamp(1.5rem,1.1rem+1.5vw,2.1rem); color:var(--navy-900);
}
.fakt__label{ font-size:.875rem; line-height:1.45; color:var(--muted); }
@media (max-width:860px){ .fakten{ grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .fakt{ padding:16px; } .fakt__wert{ font-size:1.35rem; } }

.split__text h2{ font-size:clamp(1.5rem,1.15rem+1.5vw,2.25rem); }
.split__text p{ margin-top:16px; color:var(--muted); font-size:1.005rem; line-height:1.75; }
.split__text p strong{ color:var(--navy-900); font-weight:600; }
.split__text a{ color:var(--navy); text-decoration:underline; text-underline-offset:2px; }
.split__text a:hover{ color:var(--copper-600); }
.split__media figure,.split figure{ margin:0; }

.merkmale{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); margin-top:clamp(34px,4vw,50px); }
.merkmal{
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,32px); box-shadow:var(--sh-1);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.merkmal:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); }
.merkmal__ico{
  width:50px; height:50px; border-radius:15px; background:var(--copper-50); color:var(--copper-600);
  display:grid; place-items:center; margin-bottom:20px;
}
.merkmal h3{ font-size:1.14rem; }
.merkmal p{ margin-top:11px; color:var(--muted); font-size:.95rem; line-height:1.65; }
@media (max-width:900px){ .merkmale{ grid-template-columns:1fr; } }

.preis-band{
  background:var(--navy-900); color:#fff; border-radius:var(--r-xl);
  padding:clamp(28px,3.4vw,46px); box-shadow:var(--sh-navy);
  display:grid; grid-template-columns:1fr auto; gap:clamp(24px,3vw,44px); align-items:center;
}
.preis-band__zahl{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.04em; line-height:1;
  font-size:clamp(2.1rem,1.5rem+2.2vw,3.1rem); color:#fff; margin-top:16px;
}
.preis-band__zahl small{ display:block; font-size:.3em; font-weight:600; letter-spacing:0; color:var(--copper-200); margin-top:10px; }
.preis-band__text{ margin-top:18px; color:#A9BDD8; font-size:.93rem; line-height:1.6; max-width:46ch; }
.preis-band__aktion{ display:flex; flex-direction:column; gap:12px; }
.preis-band__aktion .btn{ white-space:nowrap; }
@media (max-width:860px){
  .preis-band{ grid-template-columns:1fr; }
  .preis-band__aktion .btn{ width:100%; }
}

/* ---------- 31. Redaktionsblock, Tabellenkarte, Aktionsband -------------- */
.editorial__grid{ display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(30px,5vw,72px); align-items:start; }
.editorial__kopf{ position:sticky; top:104px; }
.editorial__kopf h2{ margin-top:18px; font-size:clamp(1.55rem,1.15rem+1.6vw,2.35rem); }
.editorial__text > p{ margin-top:0; color:var(--muted); font-size:1.03rem; line-height:1.78; }
.editorial__text > p + p{ margin-top:20px; }
.editorial__text h3{ margin-top:34px; font-size:1.16rem; letter-spacing:-.02em; }
.editorial__text h3 + p{ margin-top:12px; }
.editorial__text strong{ color:var(--navy-900); font-weight:600; }
.editorial__text a{ color:var(--navy); text-decoration:underline; text-underline-offset:2px; }
.editorial__text a:hover{ color:var(--copper-600); }

.fazit{
  margin-top:34px; padding:clamp(22px,2.6vw,28px);
  background:var(--paper-2); border-radius:var(--r-lg); border-left:3px solid var(--copper);
}
.fazit__marke{
  display:inline-block; font-family:var(--font-display); font-weight:600; font-size:.72rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--copper-600); margin-bottom:10px;
}
.fazit p{ margin:0; color:var(--navy-800); font-size:1rem; line-height:1.7; }

.tabellen-karte{
  margin-top:clamp(34px,4vw,48px); background:var(--white);
  border:1px solid var(--line-soft); border-radius:var(--r-xl);
  padding:clamp(10px,1.6vw,20px); box-shadow:var(--sh-2); overflow:hidden;
}
.tabellen-karte .datentabelle th,.tabellen-karte .datentabelle td{ padding:15px 20px; font-size:.98rem; }
.tabellen-karte .datentabelle th{ font-size:1.02rem; color:var(--navy-900); }
.tabellen-karte .datentabelle tr:last-child th,.tabellen-karte .datentabelle tr:last-child td{ border-bottom:0; }

.aktion{
  background:var(--navy-900); color:#fff; border-radius:var(--r-xl);
  padding:clamp(30px,4vw,56px); box-shadow:var(--sh-navy);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr); gap:clamp(30px,4vw,60px); align-items:center;
}
.aktion h2{ color:#fff; font-size:clamp(1.6rem,1.2rem+1.7vw,2.4rem); margin-top:18px; }
.aktion__text > p{ margin-top:18px; color:#B6C9E2; font-size:1.05rem; line-height:1.65; max-width:46ch; }
.aktion__knoepfe{ margin-top:30px; display:flex; flex-wrap:wrap; gap:12px; }
.aktion__schritte{ display:grid; gap:18px; }
.aktion__schritte li{ display:flex; align-items:flex-start; gap:16px; }
.aktion__nr{
  width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  font-family:var(--font-display); font-weight:700; font-size:.95rem; color:var(--copper-200);
}
.aktion__schritte strong{ display:block; font-family:var(--font-display); font-size:1.06rem; letter-spacing:-.02em; color:#fff; }
.aktion__schritte span:last-child{ display:block; margin-top:5px; font-size:.93rem; line-height:1.55; color:#A9BDD8; }

@media (max-width:900px){
  .editorial__grid{ grid-template-columns:1fr; gap:24px; }
  .editorial__kopf{ position:static; }
  .aktion{ grid-template-columns:1fr; }
}
@media (max-width:560px){ .aktion__knoepfe .btn{ width:100%; } }