@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Hanken+Grotesk:wght@400;500;700&display=swap');

/* ====================================================
   RESET
==================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:'Hanken Grotesk',-apple-system,sans-serif;color:#1C1009;background:#F7F5EF;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100%}
h1,h2,h3,.stat-val,.counter-val,.btn,.review-agg-score{font-family:'Archivo','Hanken Grotesk',-apple-system,sans-serif;letter-spacing:-.02em}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}

/* ====================================================
   DESIGN TOKENS — KATZBACH: "HARTMANN LAYOUT, KATZBACH CHARTER"
   The kammer-jaeger.com UI language in the client's own brand colours:
   bronze #AA865C from the logo bug as THE brand colour, espresso ink
   #1C1009 for dark bands and headings, ivory #F7F5EF as the page ground,
   signal red reserved for phone CTAs. Bronze NEVER carries white text
   (3.35:1) — every bronze fill is paired with espresso (5.56:1).
   Variable NAMES are unchanged so every stored page keeps working;
   only the values moved.
==================================================== */
:root{
  /* Bronze/espresso ramp — deep to airy */
  --b950:#1C1009;
  --b900:#1C1009;
  --b800:#2B1D12;
  --b700:#82613C;
  --b600:#AA865C;
  --b500:#AA865C;
  --b400:#C09F79;
  --b100:#F1E8DA;
  --b200:#E9DCC9;
  --b50:#F7F5EF;
  /* Espresso — primary action colour (white text, 18.6:1) */
  --am:#1C1009;
  --am-h:#2B1D12;
  --am-l:#AA865C;
  /* The bronze, for large fills and non-text surfaces only. */
  --am-lt:#AA865C;
  /* Dark bronze that clears 4.5:1 on white for SMALL text (5.64:1) */
  --am-txt:#82613C;
  /* Signal red — phone CTAs + emergency only */
  --rd:#DC2626;
  --rd-h:#B91C1C;
  /* Warm neutrals, re-based on the espresso ink */
  --n900:#1C1009;
  --n800:#2B211A;
  --n700:#55493D;
  --n600:#6B5F53;
  --n500:#71655A;
  --n400:#988C7F;
  --n300:#CFC6BA;
  --n200:#E4DDD2;
  --n100:#F0EBE2;
  --n50:#FAF8F3;
  --white:#ffffff;
  /* Bronze — the brand accent. ALWAYS paired with #1C1009 text, never white. */
  --amber:#AA865C;
  /* Soft, espresso-tinted layered shadows. No hard offsets anywhere. */
  --sh-sm:0 1px 2px rgba(28,16,9,.08);
  --sh-md:0 1px 2px rgba(28,16,9,.06),0 8px 24px -8px rgba(28,16,9,.14);
  --sh-lg:0 1px 2px rgba(28,16,9,.06),0 8px 24px -8px rgba(28,16,9,.14);
  --sh-xl:0 2px 4px rgba(28,16,9,.06),0 16px 40px -12px rgba(28,16,9,.18);
  --sh-am:0 1px 2px rgba(28,16,9,.06),0 8px 24px -8px rgba(28,16,9,.14);
  --sh-rd:0 1px 2px rgba(28,16,9,.06),0 8px 24px -8px rgba(28,16,9,.14);
  /* Espresso ink — hairline borders + shadow tints + footer */
  --ink:#1C1009;
  /* The header/drawer surface of the design system */
  --cream:#F7F5EF;
  /* Radius — softer rectangles; buttons are full pills. */
  --r-sm:6px;--r-md:10px;--r-lg:16px;--r-xl:18px;--r-2xl:22px;--r-full:999px;
  /* SIGNATURE — the Hartmann pill button. */
  --r-btn:999px;
  /* SIGNATURE — the logo's crosshair: an open ring broken by four ticks.
     Carried as a mask so any use can be tinted with currentColor. */
  --crosshair:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 3.8a8.2 8.2 0 0 1 8.2 8.2'/%3E%3Cpath d='M20.2 12a8.2 8.2 0 0 1-8.2 8.2'/%3E%3Cpath d='M12 20.2A8.2 8.2 0 0 1 3.8 12'/%3E%3Cpath d='M3.8 12A8.2 8.2 0 0 1 12 3.8'/%3E%3Cpath d='M12 .9v3.4M23.1 12h-3.4M12 23.1v-3.4M.9 12h3.4'/%3E%3C/svg%3E");
}

/* ====================================================
   LAYOUT
==================================================== */
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}
.section{padding:5rem 0}
.section-alt{background:var(--b50)}
.section-header{text-align:center;margin-bottom:4rem}
/* Kicker: an espresso pill carrying the crosshair bullet. */
.section-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;background:var(--am);color:var(--white);
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  border-radius:var(--r-sm);border:none;margin-bottom:1rem
}
/* SIGNATURE 1/3 — the logo's crosshair as the kicker bullet. */
.section-badge::before{
  content:'';width:12px;height:12px;flex:none;
  background:currentColor;
  -webkit-mask:var(--crosshair) center/contain no-repeat;
          mask:var(--crosshair) center/contain no-repeat
}
.section-title{font-size:clamp(1.6rem,3.2vw,2.5rem);font-weight:800;color:var(--n900);line-height:1.08;letter-spacing:-.025em;margin-bottom:1.25rem}
.section-sub{font-size:1.0625rem;color:var(--n500);max-width:560px;margin:0 auto;line-height:1.75}

/* ====================================================
   BUTTONS
==================================================== */
/* Solid, borderless PILL buttons — the Hartmann shape. Every variant
   shares the geometry; only the fill changes. Bronze fills always carry
   espresso text, never white. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 26px;border-radius:var(--r-btn);font-family:'Archivo','Hanken Grotesk',-apple-system,sans-serif;font-size:1rem;font-weight:800;letter-spacing:-.005em;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;white-space:nowrap;cursor:pointer;border:none;box-shadow:var(--sh-sm)}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh-md)}
.btn:active{transform:translateY(0);box-shadow:var(--sh-sm)}
.btn-amber{background:var(--am);color:var(--white)}
.btn-amber:hover{background:var(--am-h)}
.btn-red{background:var(--rd);color:var(--white)}
.btn-red:hover{background:var(--rd-h)}
/* Secondary highlight — bronze fill, always with espresso text (5.56:1). */
.btn-accent{background:var(--amber);color:var(--ink)}
.btn-accent:hover{background:#C09F79}
/* Outline button, for use on light/ivory surfaces. */
.btn-outline{background:transparent;color:var(--am);border:1.5px solid var(--am)}
.btn-outline:hover{background:var(--b50)}
/* Ghost — on dark bands only; a hairline of white instead of a fill. */
.btn-ghost{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.55);box-shadow:none}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:var(--white);box-shadow:none}
.btn-white{background:var(--white);color:var(--am)}
.btn-white:hover{background:var(--b50)}
.btn-lg{padding:18px 36px;font-size:1.125rem}
.btn-xl{padding:20px 44px;font-size:1.25rem}

/* ====================================================
   NAVIGATION
==================================================== */
/* Sticky light header on an espresso hairline — matches the Blade
   <x-organisms.header>. Was an absolute transparent overlay on the hero. */
.nav{position:sticky;top:0;z-index:100;padding:12px 0;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(28,16,9,.10)}
/* site.js strips any serialised .scrolled class; the bar is permanently
   white + hairlined, so the hook only adds a soft shadow. */
.nav.scrolled{background:rgba(255,255,255,.98);box-shadow:var(--sh-sm)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:48px}
.nav-logo{display:flex;align-items:center;gap:0;color:var(--ink);font-weight:900;font-size:1.0625rem;letter-spacing:-.01em;flex-shrink:0}
/* The stored markup points most pages at /images/logo.png (white wordmark),
   which would vanish on the light bar — force the dark variant. No filter:
   the real espresso+bronze logo IS the charter.
   .footer-logo-img is deliberately untouched: the footer stays ink. */
.nav-logo-img{height:46px;width:auto;object-fit:contain;flex-shrink:0;content:url('/images/logo-dark.png')}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{color:var(--n700);font-size:.875rem;font-weight:500;transition:color .15s}
.nav-links a:hover{color:#1C1009}
.nav-phone-btn{display:flex;align-items:center;gap:8px;background:var(--rd);color:var(--white);padding:10px 18px;border-radius:var(--r-btn);font-weight:700;font-size:.9rem;font-family:'Archivo',inherit;border:none;box-shadow:0 1px 2px rgba(28,16,9,.08);transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
.nav-phone-btn:hover{background:var(--rd-h);transform:translateY(-1px);box-shadow:0 1px 2px rgba(28,16,9,.06),0 8px 24px -8px rgba(28,16,9,.14)}
/* Soft square button, same as the Blade header's <summary>. */
.nav-hamburger{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;color:var(--ink);background:var(--white);border:1px solid rgba(28,16,9,.12);border-radius:var(--r-md);box-shadow:var(--sh-sm)}

/* Leistungen dropdown — old site's service panel under the nav item */
.nav-dd{position:relative}
.nav-dd-trigger{display:inline-flex;align-items:center;gap:5px;color:var(--n700)}
.nav-dd-trigger:hover,.nav-dd:hover .nav-dd-trigger,.nav-dd:focus-within .nav-dd-trigger{color:#1C1009}
.nav-dd-caret{transition:transform .15s ease}
.nav-dd:hover .nav-dd-caret,.nav-dd:focus-within .nav-dd-caret{transform:rotate(180deg)}
.nav-dd-panel{position:absolute;top:100%;left:50%;transform:translate(-50%,6px);padding-top:14px;opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease,visibility .15s}
.nav-dd:hover .nav-dd-panel,.nav-dd:focus-within .nav-dd-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
/* New card language: white surface, espresso hairline, soft layered shadow.
   Applied to the inner wrappers so the panel's hover padding stays clickable
   without drawing a box of its own. */
.nav-dd-grid{display:grid;grid-template-columns:repeat(4,1fr);background:var(--white);border:1px solid rgba(28,16,9,.12);border-radius:var(--r-lg);box-shadow:var(--sh-md);overflow:hidden}
.nav-dd-item{display:flex;flex-direction:column;align-items:center;gap:10px;width:132px;padding:20px 14px 16px;transition:background-color .15s ease}
.nav-dd-item+.nav-dd-item{border-left:1px solid rgba(28,16,9,.10)}
.nav-dd-item:hover{background:#F7F5EF}
.nav-dd-icon{width:64px;height:64px;object-fit:contain}
.nav-dd-label{font-family:'Archivo','Hanken Grotesk',sans-serif;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--n800)}
/* Sits on the transparent panel, so it must carry its own fill: white text
   on the espresso block clears AA (18.6:1) whatever the page behind it is. */
.nav-dd-all{display:block;text-align:center;margin-top:10px;background:var(--am);border:none;border-radius:var(--r-btn);padding:9px 14px;font-family:'Archivo','Hanken Grotesk',sans-serif;font-size:.8rem;font-weight:700;box-shadow:var(--sh-sm);transition:background-color .15s ease}
.nav-links .nav-dd-all,.nav-links .nav-dd-all:hover,.nav-light .nav-links .nav-dd-all,.nav-light .nav-links .nav-dd-all:hover{color:var(--white)}
.nav-dd-all:hover{background:var(--am-h)}
/* Panel links keep their own ink color on the light header band */
.nav-links .nav-dd-label{color:var(--n800)}

/* Mobile drawer */
/* White drawer with espresso-ink type — the show/hide mechanics (.open,
   body.nav-open) are untouched; site.js depends on them. */
.nav-drawer{display:none;position:fixed;inset:0;background:var(--white);z-index:200;padding:88px 24px 32px;flex-direction:column;gap:2rem}
.nav-drawer.open{display:flex}
.nav-drawer-links{display:flex;flex-direction:column}
.nav-drawer-links a{color:var(--n900);font-size:1.75rem;font-weight:800;padding:12px 0;border-bottom:1px solid rgba(28,16,9,.10)}
.nav-drawer-links a.dl-sub{font-size:1.125rem;font-weight:500;color:var(--n700);padding:9px 0 9px 20px}
.nav-drawer-close{position:absolute;top:20px;right:22px;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;color:var(--ink);background:var(--white);border:1px solid rgba(28,16,9,.12);border-radius:var(--r-md);box-shadow:var(--sh-sm)}
.nav-drawer-cta{margin-top:auto}

/* ====================================================
   HERO
==================================================== */
/* HOME HERO — a warm espresso band over the wide photo: copy left, white
   quick-form card right. Only this home-style hero goes dark; every
   subpage surface (.page-head, .hero-page) stays light and airy. */
.hero{position:relative;display:flex;align-items:center;overflow:hidden;background:linear-gradient(90deg,rgba(28,16,9,.95) 0%,rgba(43,29,18,.85) 45%,rgba(43,29,18,.55) 100%),url('/images/hero-wide.webp') right center/cover no-repeat var(--ink);padding:4.5rem 0 4.5rem}

/* --- Text on the espresso hero. Scoped to .hero so the light subpage heads
   that reuse these classes keep their ink-on-white treatment. --- */
.hero .hero-title{color:#FFFFFF}                       /* 18.6:1 on #1C1009 */
.hero .hero-sub{color:#E9DCC9}                         /* 13.8:1 on #1C1009 */
.hero .hero-trust-item{color:#E9DCC9}
.hero .hero-trust-item svg{color:#C09F79}
.hero .city-highlight{color:#C09F79}                   /* 7.52:1 on #1C1009 */
/* Bronze chip with espresso text (5.56:1) — never white on bronze. */
.hero .hero-live-badge{background:var(--amber);color:var(--ink)}
.hero .hero-live-badge .live-dot{background:var(--ink)}
/* The accent word in the H1 reads bronze on the espresso band (7.52:1). */
.hero .hero-title em{color:#C09F79;background:none}
/* Primary CTA on the espresso band needs its own contrast: bronze fill. */
.hero .btn-amber{background:var(--amber);color:var(--ink)}
.hero .btn-amber:hover{background:#C09F79}

/* .split-row also rides on this element so the layout comparator reads the
   hero as the sided row it is; the hero's own grid must win over it. */
.hero .hero-layout.split-row{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;align-items:center;width:100%;padding-top:0;margin:0}
.hero-live-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;background:var(--am);border:none;border-radius:var(--r-sm);color:var(--white);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1.5rem;backdrop-filter:none;-webkit-backdrop-filter:none}
.live-dot{width:8px;height:8px;background:var(--white);border-radius:50%}
.hero-title{font-size:clamp(2rem,4.1vw,3.15rem);font-weight:800;color:var(--ink);line-height:1.06;letter-spacing:-.03em;margin-bottom:1.5rem;text-shadow:none}
/* A thick marker stroke sitting under the promise — drawn low and thin
   enough to stay an underline rather than a highlight block. */
.hero-title em{font-style:normal;color:var(--am-txt);background:none;padding:0 .04em}
.city-highlight{color:var(--am-txt);font-style:normal;display:inline-block}
@keyframes cityIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes cityOut{from{opacity:1}to{opacity:0}}
.city-highlight.city-in{animation:cityIn .35s ease-out forwards}
.city-highlight.city-out{animation:cityOut .25s ease-in forwards}
.hero-sub{font-size:clamp(1rem,1.8vw,1.125rem);color:var(--n700);line-height:1.75;max-width:520px;margin-bottom:2.25rem;text-shadow:none}
.hero-actions{display:flex;flex-wrap:nowrap;gap:10px;margin-bottom:2rem}
.hero-actions .btn{padding:14px 20px;font-size:.9875rem;white-space:nowrap}
@media(max-width:1080px){.hero-actions{flex-wrap:wrap}}
.hero-trust-row{display:flex;flex-wrap:wrap;gap:1.25rem 1.75rem}
.hero-google-badge{margin-top:1.5rem}
.hero-google-badge img{display:block;width:290px;max-width:80%;height:auto;background:#fff;border:1px solid rgba(28,16,9,.12);border-radius:var(--r-lg);padding:10px 14px;box-shadow:var(--sh-md)}
.hero-trust-item{display:flex;align-items:center;gap:7px;color:var(--n800);font-size:.875rem;font-weight:600;text-shadow:none}
.hero-trust-item svg{color:var(--am-txt);flex-shrink:0}

/* Hero photo in a white card, with SIGNATURE 2/3 — the large, faint
   outlined crosshair sitting behind it on the espresso band. */
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center}
.hero-visual::before{
  content:'';position:absolute;z-index:0;
  width:420px;height:420px;aspect-ratio:1;
  top:-8%;left:-14%;
  background:#FFFFFF;opacity:.14;
  -webkit-mask:var(--crosshair) center/contain no-repeat;
          mask:var(--crosshair) center/contain no-repeat;
  pointer-events:none
}
.hero-photo-card{position:relative;z-index:1;border:1px solid rgba(255,255,255,.18);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-xl);background:var(--white);width:100%}
.hero-photo-card img{display:block;width:100%;height:400px;object-fit:cover}

/* ====================================================
   STATS BAR
==================================================== */
/* Flat espresso band, bronze numerals — mirrors the about page's counter strip.
   The reference's scrolling marquee is gone (see .stats-ticker below). */
.stats{background:var(--ink);padding:2.75rem 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.stat{text-align:center;padding:.75rem 1rem;border-right:1px solid rgba(255,255,255,.14)}
.stat:last-child{border-right:none}
.stat-val{display:block;font-size:clamp(2rem,3.5vw,2.85rem);font-weight:800;color:#C09F79;letter-spacing:-.03em;line-height:1;margin-bottom:6px}
.stat-lbl{font-size:.8125rem;color:rgba(255,255,255,.82);font-weight:500;line-height:1.35}
/* The reference's scrolling stat marquee is retired outright — markup and
   styles both gone; the static strip reflows 2x2 on narrow screens. */

/* ====================================================
   SERVICES
==================================================== */
/* Service tiles: flat pest illustration over an espresso caption bar, matching
   the .pest-tile component the city pages already use. No emoji, no soft
   shadows, no lift-and-glow. */
/* .split-extra rides along so the row reads as the tile gallery it is; the
   services grid's own columns must win over that helper's. */
.services-grid.split-extra{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));justify-content:stretch;gap:1.25rem;margin:0}
.svc-card > a{display:flex;flex-direction:column;height:100%;color:inherit}
.svc-card{background:var(--white);border:1px solid rgba(28,16,9,.12);border-radius:var(--r-lg);text-align:center;transition:transform .15s ease,box-shadow .15s ease;position:relative;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(28,16,9,.06),0 8px 24px -8px rgba(28,16,9,.14)}
.svc-card:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(28,16,9,.06),0 8px 24px -8px rgba(28,16,9,.14)}
/* One treatment for all nine tiles: the illustration centred on a cream
   disc, so the flat pest drawings and the outlined treatment icons read as
   a single set rather than two. */
.svc-icon{width:100%;height:150px;margin:0;background:var(--white);display:flex;align-items:center;justify-content:center;padding:1rem}
.svc-icon img{width:110px;height:110px;object-fit:contain;display:block;background:var(--b50);border-radius:50%;padding:12px}
.svc-body{padding:1.125rem 1rem 1.25rem;display:flex;flex-direction:column;flex:1}
.svc-name{font-weight:700;font-size:.9375rem;color:var(--n900);margin-bottom:6px}
.svc-desc{font-size:.8125rem;color:var(--n500);line-height:1.55}
.svc-cta{display:inline-flex;align-items:center;gap:5px;margin-top:auto;padding-top:12px;font-size:.8125rem;font-weight:700;color:var(--am-txt)}

/* ====================================================
   WHY US
==================================================== */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.why-visual img{display:block;width:100%;height:auto;border-radius:0;position:relative}
.why-features{display:flex;flex-direction:column;gap:1.75rem}
.why-feat{display:flex;gap:1.125rem;align-items:flex-start}
.why-feat-icon{width:50px;height:50px;flex-shrink:0;background:var(--b50);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;color:var(--am)}
.why-feat-title{font-weight:700;font-size:1.0625rem;color:var(--n900);margin-bottom:3px}
.why-feat-desc{font-size:.9rem;color:var(--n500);line-height:1.65}
/* The photo sits in the same bordered card as the hero's, instead of the
   reference's dark gradient panel with its soft radial glow. */
.why-visual{background:var(--white);border:1px solid rgba(28,16,9,.12);border-radius:var(--r-lg);padding:0;position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(28,16,9,.06),0 8px 24px -8px rgba(28,16,9,.14)}
.why-visual-title{color:var(--n900);font-weight:800;font-size:1.125rem;margin-bottom:1.5rem;position:relative}
.cert-list{display:flex;flex-direction:column;gap:12px;position:relative}
.cert-item{display:flex;align-items:center;gap:1rem;padding:14px 16px;background:var(--b50);border:1px solid rgba(28,16,9,.12);border-radius:var(--r-lg)}
.cert-ico{width:42px;height:42px;flex-shrink:0;background:var(--am);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center}
.cert-txt h4{font-weight:700;font-size:.875rem;color:var(--n900)}
.cert-txt p{font-size:.75rem;color:var(--n500);margin-top:1px}

/* ====================================================
   PROCESS
==================================================== */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;position:relative}
.process-grid::before{content:'';position:absolute;top:28px;left:calc(12.5% + 28px);right:calc(12.5% + 28px);height:2px;background:linear-gradient(90deg,var(--b500),var(--b400));opacity:.5}
.process-step{text-align:center}
.process-num{width:56px;height:56px;background:var(--am);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.25rem;color:var(--white);margin:0 auto 1.5rem;position:relative;z-index:1;box-shadow:0 0 0 8px var(--white),0 0 0 10px var(--n200)}
.process-title{font-weight:700;font-size:1.0625rem;color:var(--n900);margin-bottom:.625rem}
.process-desc{font-size:.875rem;color:var(--n500);line-height:1.65}

/* ====================================================
   REVIEWS — Infinite Scroll Columns
==================================================== */
.reviews-cols-wrap{max-height:720px;overflow:hidden;mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent)}
.reviews-cols{display:flex;justify-content:center;gap:1.25rem}
.reviews-col{flex:1;max-width:340px;overflow:hidden}
.reviews-col-inner{display:flex;flex-direction:column;gap:1.125rem;animation:colScroll linear infinite}
.reviews-col-inner:hover{animation-play-state:paused}
@keyframes colScroll{to{transform:translateY(-50%)}}
.review-col-card{background:var(--white);border:1px solid rgba(28,16,9,.12);border-radius:var(--r-lg);padding:1.625rem;box-shadow:0 1px 2px rgba(28,16,9,.06),0 8px 24px -8px rgba(28,16,9,.14)}
.review-col-stars{color:var(--amber);font-size:.95rem;margin-bottom:.75rem}
.review-col-text{font-size:.875rem;color:var(--n700);line-height:1.7;font-style:italic;margin-bottom:1.125rem}
.review-col-author{display:flex;align-items:center;gap:10px}
.review-col-avatar{width:38px;height:38px;flex-shrink:0;background:var(--b50);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.775rem;color:var(--b700)}
.review-col-name{font-weight:700;color:var(--n900);font-size:.875rem}
.review-col-loc{font-size:.775rem;color:var(--n400);margin-top:1px}
/* Aggregate */
.review-agg{display:flex;justify-content:center;margin-top:2.5rem}
.review-agg-inner{display:inline-flex;align-items:center;gap:1.25rem;padding:1rem 2rem;background:var(--white);border:1px solid rgba(28,16,9,.12);border-radius:var(--r-lg);box-shadow:0 1px 2px rgba(28,16,9,.06),0 8px 24px -8px rgba(28,16,9,.14)}
.review-agg-stars{color:var(--amber);font-size:1.5rem;display:flex;gap:2px}
.review-agg-score{font-weight:900;font-size:1.75rem;color:var(--n900);line-height:1}
.review-agg-count{font-size:.8125rem;color:var(--n500);margin-top:2px}
@media(max-width:900px){.reviews-col:last-child{display:none}.reviews-col{max-width:none}}
@media(max-width:600px){.reviews-col:nth-child(2){display:none}}

/* ====================================================
   EMERGENCY
==================================================== */
/* Flat espresso band — the reference's red grid-texture panel is gone. Signal
   red is reserved for the phone button inside it. */
.emergency{background:var(--ink);padding:5rem 0;position:relative;overflow:hidden}
.emergency-inner{position:relative;text-align:center}
.emg-title{font-size:clamp(1.75rem,3.6vw,2.5rem);font-weight:800;color:var(--white);letter-spacing:-.03em;line-height:1.08;margin-bottom:1.25rem}
.emg-sub{font-size:1.0625rem;color:rgba(255,255,255,.78);max-width:480px;margin:0 auto 2.5rem;line-height:1.75}
/* On the espresso band the soft shadow disappears, so the buttons rely on
   their fills alone; the secondary CTA becomes bronze with espresso text. */
.emergency .btn{box-shadow:none}
.emergency .btn:hover{box-shadow:none}
.emergency .btn-amber{background:var(--amber);color:var(--ink)}
.emergency .btn-amber:hover{background:#C09F79}
.emg-ctas{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}

/* ====================================================
   CONTACT
==================================================== */
.contact-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:5rem;align-items:start}
.contact-left h2{font-size:clamp(1.5rem,2.6vw,1.75rem);font-weight:900;color:var(--n900);letter-spacing:-.025em;line-height:1.2;margin-bottom:1rem}
.contact-left p{color:var(--n500);line-height:1.75;margin-bottom:2rem}
.contact-details{display:flex;flex-direction:column;gap:1.25rem}
.cd{display:flex;align-items:center;gap:1rem}
.cd-icon{width:46px;height:46px;flex-shrink:0;background:var(--b50);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;color:var(--am)}
.cd-lbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--n400);font-weight:700;margin-bottom:2px}
.cd-val{font-weight:700;font-size:1.0625rem;color:var(--n900)}
.form-card{background:var(--white);border:1px solid rgba(28,16,9,.12);border-radius:var(--r-lg);padding:2.5rem;box-shadow:0 1px 2px rgba(28,16,9,.06),0 8px 24px -8px rgba(28,16,9,.14)}
.form-card h3{font-size:1.375rem;font-weight:900;color:var(--n900);letter-spacing:-.02em;margin-bottom:4px}
.form-sub{font-size:.875rem;color:var(--n500);margin-bottom:1.75rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.125rem}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group.span2{grid-column:1 / -1}
.form-label{font-size:.8125rem;font-weight:600;color:var(--n700)}
.form-label span{color:var(--rd)}
.form-input,.form-select,.form-textarea{padding:11px 14px;background:var(--n50);border:1px solid rgba(28,16,9,.12);border-radius:var(--r-md);font-size:.9375rem;font-family:inherit;color:var(--n900);transition:all .15s;width:100%}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--am);background:var(--white);box-shadow:0 0 0 4px rgba(28,16,9,.22)}
.form-textarea{resize:vertical;min-height:110px}
.form-btn{width:100%;padding:15px;background:var(--am);color:var(--white);border-radius:var(--r-btn);font-size:1rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;border:none;box-shadow:0 1px 2px rgba(28,16,9,.08);font-family:"Archivo",inherit;cursor:pointer}
.form-btn:hover{background:var(--am-h);transform:translateY(-1px);box-shadow:0 1px 2px rgba(28,16,9,.06),0 8px 24px -8px rgba(28,16,9,.14)}
.form-note{font-size:.72rem;color:var(--n400);text-align:center;margin-top:10px}

/* ====================================================
   FOOTER
==================================================== */
/* Near-black warm footer matching <x-organisms.footer>: bronze column
   heads, warm ivory-grey body copy. Every text colour below clears WCAG
   AA on #16100A (the old low-alpha whites did not). */
.footer{background:#16100A;color:var(--n200);padding:4rem 0 2rem;border-top:1px solid rgba(255,255,255,.10)}
.footer-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:3rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:2rem}
.footer-logo{display:flex;align-items:center;gap:10px;color:var(--white);font-weight:900;font-size:1.0625rem;margin-bottom:1rem}
.footer-logo-img{height:56px;width:auto;object-fit:contain;flex-shrink:0}
.footer-desc{font-size:.8125rem;line-height:1.75;margin-bottom:1.5rem;color:#CFC6BA}
.footer-phone-link{display:inline-flex;align-items:center;gap:8px;color:var(--white);font-weight:700;font-size:1.125rem;transition:color .15s}
.footer-phone-link:hover{color:#C09F79}
.footer-col-head{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#C09F79;margin-bottom:1.25rem}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{font-size:.875rem;color:#E4DDD2;transition:color .15s}
.footer-links a:hover{color:var(--white)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;font-size:.8125rem;color:#CFC6BA}
.footer-legal{display:flex;gap:1.5rem}
.footer-legal a{color:#CFC6BA;transition:color .15s}
.footer-legal a:hover{color:var(--white)}

/* ====================================================
   EINSATZGEBIETE HUB (city link grid)
   ==================================================== */
.city-region-head{font-size:1.375rem;font-weight:900;color:var(--n900);letter-spacing:-.02em;margin:2.75rem 0 1.25rem}
.city-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.city-card{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid rgba(28,16,9,.12);border-radius:var(--r-lg);padding:.875rem 1rem;font-weight:700;font-size:.9375rem;color:var(--n800);box-shadow:0 1px 2px rgba(28,16,9,.06),0 8px 24px -8px rgba(28,16,9,.14);transition:transform .15s ease,box-shadow .15s ease}
.city-card:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(28,16,9,.06),0 8px 24px -8px rgba(28,16,9,.14);color:var(--n900)}
.city-card svg{flex:none;color:var(--am)}
@media (max-width:640px){.city-grid{grid-template-columns:repeat(2,1fr)}.city-card{padding:.75rem;font-size:.875rem}}

/* ====================================================
   MOBILE STICKY BAR
==================================================== */
.mobile-bar{display:none;position:fixed;bottom:0;left:0;right:0;padding:12px 1rem;background:var(--ink);border-top:1px solid rgba(255,255,255,.12);z-index:90;gap:10px}
.mobile-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:13px 10px;border-radius:var(--r-btn);font-weight:700;font-family:'Archivo',inherit;font-size:.9375rem;color:var(--white);border:none;box-shadow:none}
.mbar-call{background:var(--rd)}
.mbar-form{background:var(--amber);color:var(--ink)}

/* ====================================================
   SCROLL REVEAL
==================================================== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.07s}
.reveal-d2{transition-delay:.14s}
.reveal-d3{transition-delay:.21s}

/* ====================================================
   FUNNEL MODAL
==================================================== */
.funnel-overlay{
  display:none;position:fixed;inset:0;z-index:200;
  background:rgba(28,16,9,.75);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  align-items:center;justify-content:center;padding:1rem
}
.funnel-overlay.open{display:flex}
.funnel-modal{
  background:var(--white);border-radius:var(--r-2xl);width:100%;max-width:520px;
  box-shadow:0 1px 2px rgba(28,16,9,.06),0 8px 24px -8px rgba(28,16,9,.14);border:1px solid rgba(28,16,9,.12);overflow:hidden;position:relative
}
/* Progress bar */
.funnel-progress{height:4px;background:var(--n200)}
.funnel-progress-fill{height:100%;background:var(--am);transition:width .4s ease}
/* Header */
.funnel-header{padding:1.5rem 2rem 0;display:flex;align-items:center;justify-content:space-between}
.funnel-pest-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;background:var(--b50);border:1px solid rgba(28,16,9,.12);
  border-radius:var(--r-full);font-size:.875rem;font-weight:700;color:var(--b700)
}
.funnel-close{width:32px;height:32px;border-radius:50%;background:var(--n100);display:flex;align-items:center;justify-content:center;color:var(--n600);transition:all .15s;flex-shrink:0}
.funnel-close:hover{background:var(--n200);color:var(--n900)}
/* Steps container */
.funnel-steps{overflow:hidden;position:relative}
.funnel-step{padding:1.5rem 2rem 2rem;display:none}
.funnel-step.active{display:block}
.funnel-step h3{font-size:1.25rem;font-weight:900;color:var(--n900);letter-spacing:-.02em;margin-bottom:.5rem}
.funnel-step .funnel-hint{font-size:.875rem;color:var(--n500);margin-bottom:1.5rem}
/* Option cards */
.funnel-options{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1.5rem}
.funnel-option{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:1.125rem 1rem;background:var(--n50);border:1px solid rgba(28,16,9,.12);
  border-radius:var(--r-lg);cursor:pointer;transition:all .2s;text-align:center
}
.funnel-option:hover{border-color:var(--am);background:var(--b50)}
.funnel-option.selected{border-color:var(--am);background:var(--b50);box-shadow:0 0 0 3px rgba(28,16,9,.22)}
.funnel-option-icon{font-size:1.75rem}
.funnel-option-label{font-size:.875rem;font-weight:700;color:var(--n800)}
.funnel-option-sub{font-size:.75rem;color:var(--n500)}
/* Contact step */
.funnel-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.875rem;margin-bottom:1.25rem}
.funnel-field{display:flex;flex-direction:column;gap:5px}
.funnel-field.full{grid-column:1/-1}
.funnel-field label{font-size:.8rem;font-weight:700;color:var(--n700)}
.funnel-field label span{color:var(--rd)}
.funnel-input{padding:10px 13px;background:var(--n50);border:1px solid rgba(28,16,9,.12);border-radius:var(--r-md);font-size:.9375rem;font-family:inherit;color:var(--n900);width:100%;transition:all .15s}
.funnel-input:focus{outline:none;border-color:var(--am);background:var(--white);box-shadow:0 0 0 3px rgba(28,16,9,.22)}
/* Nav buttons */
.funnel-nav{display:flex;gap:.75rem}
.funnel-btn-next{flex:1;padding:14px;background:var(--am);color:var(--white);border-radius:var(--r-btn);font-weight:700;font-size:1rem;display:flex;align-items:center;justify-content:center;gap:7px;border:none;box-shadow:0 1px 2px rgba(28,16,9,.08);font-family:"Archivo",inherit;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
.funnel-btn-next:hover{background:var(--am-h)}
.funnel-btn-next:disabled{opacity:.5;cursor:not-allowed;transform:none}
.funnel-btn-back{padding:14px 18px;background:var(--white);color:var(--am);border-radius:var(--r-btn);font-weight:600;font-size:.9rem;border:1.5px solid var(--am);box-shadow:0 1px 2px rgba(28,16,9,.08);font-family:"Archivo",inherit;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
.funnel-btn-back:hover{background:var(--b50)}
/* Success step */
.funnel-success{padding:2.5rem 2rem;text-align:center}
.funnel-success-icon{width:72px;height:72px;background:var(--b50);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;font-size:2rem}
.funnel-success h3{font-size:1.375rem;font-weight:900;color:var(--n900);margin-bottom:.75rem}
.funnel-success p{font-size:.9375rem;color:var(--n500);line-height:1.7;margin-bottom:2rem}
.funnel-success .big-phone{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--rd);color:var(--white);padding:15px 28px;border-radius:var(--r-btn);font-size:1.125rem;font-weight:800;border:none;box-shadow:0 1px 2px rgba(28,16,9,.08);font-family:"Archivo",inherit;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
.funnel-success .big-phone:hover{background:var(--rd-h);transform:translateY(-1px);box-shadow:0 1px 2px rgba(28,16,9,.06),0 8px 24px -8px rgba(28,16,9,.14)}

/* ====================================================
   RESPONSIVE
==================================================== */
@media(max-width:1024px){
  .hero .hero-layout.split-row{grid-template-columns:1fr;gap:2.5rem;padding-top:0}
  .why-grid{grid-template-columns:1fr;gap:2.5rem}
  .why-visual{order:-1}
  .contact-grid{grid-template-columns:1fr;gap:2.5rem}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2.5rem}
}
@media(max-width:768px){
  .nav-links,.nav-cta-wrap{display:none}
  .nav-hamburger{display:inline-flex}
  .stats{padding:2rem 0}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem 1rem}
  .stat:nth-child(2n){border-right:none}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .services-grid.split-extra{grid-template-columns:repeat(2,1fr);gap:.875rem}
  .process-grid{grid-template-columns:repeat(2,1fr)}
  .process-grid::before{display:none}

  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:1rem;text-align:center}
  .mobile-bar{display:flex}
  .section{padding:3.5rem 0}
  body{padding-bottom:78px}
  .funnel-options{grid-template-columns:1fr 1fr}
  .funnel-form-grid{grid-template-columns:1fr}
  .funnel-modal{border-radius:var(--r-xl) var(--r-xl) 0 0;position:fixed;bottom:0;left:0;right:0;max-width:100%}
  .funnel-overlay{align-items:flex-end;padding:0}
  .hero-title{font-size:clamp(1.7rem,7vw,2.5rem);word-break:break-word;overflow-wrap:break-word}
  .hero-sub{max-width:100%;font-size:.9375rem}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%;justify-content:center;font-size:1rem;padding:15px 24px}
  .emg-ctas{flex-direction:column;align-items:center}
  .emg-ctas a{width:100%;max-width:340px;justify-content:center}
}
@media(max-width:480px){
  .funnel-options{grid-template-columns:1fr 1fr}
}

/* ====================================================
   PHOTO BLOCKS
==================================================== */
.photo-banner{border-radius:var(--r-2xl);overflow:hidden;box-shadow:var(--sh-xl);margin-bottom:3.5rem;position:relative}
.photo-banner img{width:100%;height:auto;display:block}
.photo-banner-caption{position:absolute;bottom:0;left:0;right:0;padding:1.875rem 2.5rem;background:linear-gradient(to top,rgba(28,16,9,.92) 0%,rgba(28,16,9,.5) 60%,transparent 100%)}
.photo-banner-caption strong{display:block;color:var(--white);font-weight:800;font-size:1.125rem;letter-spacing:-.01em;margin-bottom:5px}
.photo-banner-caption span{color:rgba(255,255,255,.62);font-size:.875rem}

.services-intro{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;margin-bottom:3.5rem}
.svc-intro-img{border-radius:var(--r-2xl);overflow:hidden;box-shadow:var(--sh-xl)}
.svc-intro-img img{width:100%;height:380px;object-fit:cover;display:block}
.svc-intro-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 14px;background:var(--b50);color:var(--b700);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;border-radius:var(--r-full);border:1px solid rgba(28,16,9,.12);margin-bottom:.875rem}
.svc-intro-title{font-size:1.625rem;font-weight:900;color:var(--n900);letter-spacing:-.025em;line-height:1.18;margin-bottom:.875rem}
.svc-intro-text{color:var(--n500);line-height:1.75;margin-bottom:1.625rem;font-size:.9375rem}
.svc-intro-list{display:flex;flex-direction:column;gap:.875rem}
.svc-intro-list li{display:flex;align-items:center;gap:.875rem;font-size:.9375rem;color:var(--n800);font-weight:500}
.svc-intro-dot{width:9px;height:9px;border-radius:50%;background:var(--am);flex-shrink:0}

/* Images carried over from the old pages, rendered inside the prose column. */
.content-img{margin:2.5rem auto;max-width:100%}
.content-img img{display:block;width:100%;height:auto;border-radius:var(--r-lg);box-shadow:var(--sh-md)}

.contact-photo-wrap{border-radius:var(--r-xl);overflow:hidden;margin-bottom:1.875rem;box-shadow:var(--sh-lg)}
.contact-photo-wrap img{width:100%;height:270px;object-fit:cover;object-position:center 18%;display:block}
.contact-photo-cap{padding:.875rem 1.25rem;background:var(--b50);border:1px solid rgba(28,16,9,.12);border-top:none;border-radius:0 0 var(--r-xl) var(--r-xl)}
.contact-photo-cap strong{display:block;font-size:.875rem;font-weight:700;color:var(--n800)}
.contact-photo-cap span{font-size:.8125rem;color:var(--n500);margin-top:2px;display:block}

@media(max-width:768px){
  .photo-banner img{height:260px;object-fit:cover;object-position:center 30%}
  .photo-banner-caption{padding:1.25rem 1.5rem}
  .photo-banner-caption strong{font-size:1rem}
  .services-intro{grid-template-columns:1fr;gap:2rem}
  .svc-intro-img img{height:260px}
  .contact-photo-wrap img{height:220px}
}

/* ====================================================
   WHATSAPP
==================================================== */
/* WhatsApp keeps its brand green; only the shape language changes. */
.btn-whatsapp{background:#25D366;color:var(--ink)}
.btn-whatsapp:hover{background:#1da851}
.mbar-wa{background:#25D366;color:var(--ink)}
/* Floating button — desktop only. A round WhatsApp bug. */
.wa-float{
  display:none;position:fixed;bottom:28px;right:24px;z-index:88;
  align-items:center;justify-content:center;
  width:56px;height:56px;
  background:#25D366;color:var(--ink);
  border:none;border-radius:50%;
  box-shadow:var(--sh-md);
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease
}
.wa-float:hover{background:#1da851;transform:translateY(-1px);box-shadow:0 1px 2px rgba(28,16,9,.06),0 8px 24px -8px rgba(28,16,9,.14)}
@media(min-width:769px){.wa-float{display:flex}}

/* Hinweis vor dem Absenden */
.vm-hinweis{font-size:.68rem;line-height:1.45;text-align:center;margin:8px 0 2px;opacity:.55}
.vm-hinweis--hell{color:rgba(255,255,255,.5);opacity:1}

/* Klarstellung Vermittlungsmodell im Footer */
.vm-vertragspartner{font-size:.66rem;line-height:1.5;opacity:.55;margin:0 0 14px;max-width:78ch}

/* SICHTBARKEITS-NETZ — Inhalte duerfen nie an JavaScript haengen.
   Ohne die js-Klasse (JS aus, Skriptfehler, Consent-Blocker) sind alle
   animierten Bloecke sofort sichtbar statt dauerhaft opacity:0. */
html:not(.js) .reveal, .rv, .rv-left, .rv-right, .reveal-left, .reveal-right, .tl-step, .hero-animate { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .rv, .rv-left, .rv-right, .reveal-left, .reveal-right, .tl-step, .hero-animate { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* HINTERGRUND-DESKTOP — background-attachment:fixed nur dort, wo es
   zuverlaessig neu gezeichnet wird. Auf iOS fuehrt es bei langen
   Seiten zu grossen leeren Flaechen. */
@media (min-width:1025px) and (hover:hover) and (pointer:fine){
  body{background-attachment:fixed}
}

/* ====================================================
   RELAUNCH ADDITIONS — inquiry form, honeypot, misc
   (uses the design tokens defined above)
==================================================== */

/* Honeypot — visually hidden but not display:none, so bots still fill it */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Reviews section can be hidden per page via [hidden] */
.reviews-section[hidden]{display:none!important}

/* Seamless review-column loop. site.js measures the exact offset between a
   card and its duplicate (flex gap included) and sets --kk-scroll-distance,
   so the loop restarts with no half-gap jump. */
@keyframes kkColScroll{to{transform:translateY(var(--kk-scroll-distance,-50%))}}

/* ---- Inquiry form (rendered into [data-inquiry-form] by inquiry.js) ---- */
.inquiry{background:var(--white);border:1px solid rgba(28,16,9,.12);border-radius:var(--r-2xl);box-shadow:var(--sh-xl);overflow:hidden;max-width:560px;margin:0 auto}
.inquiry-progress{height:4px;background:var(--n200)}
.inquiry-progress-fill{height:100%;width:33.333%;background:var(--am);transition:width .4s ease}
.inquiry-steps{position:relative}
.inquiry-step{padding:1.75rem 2rem 2rem}
.inquiry-step[hidden]{display:none}
.inquiry-step h3{font-size:1.25rem;font-weight:900;color:var(--n900);letter-spacing:-.02em;margin-bottom:.5rem}
.inquiry-hint{font-size:.875rem;color:var(--n500);margin-bottom:1.5rem}

/* Option cards (steps 1 + 2) */
.inquiry-options{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1.5rem}
.inquiry-option{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:1.125rem 1rem;background:var(--n50);border:1px solid rgba(28,16,9,.12);border-radius:var(--r-lg);cursor:pointer;transition:all .2s;text-align:center;font-family:inherit;width:100%}
.inquiry-option:hover{border-color:var(--am);background:var(--b50)}
.inquiry-option:focus-visible{outline:none;border-color:var(--am);box-shadow:0 0 0 3px rgba(28,16,9,.35)}
.inquiry-option.selected{border-color:var(--am);background:var(--b50);box-shadow:0 0 0 3px rgba(28,16,9,.22)}
.inquiry-option-icon{font-size:1.75rem;line-height:1}
.inquiry-option-label{font-size:.875rem;font-weight:700;color:var(--n800)}
.inquiry-option-sub{font-size:.75rem;color:var(--n500)}

/* Contact step */
.inquiry-grid{display:grid;grid-template-columns:1fr 1fr;gap:.875rem;margin-bottom:1.25rem}
.inquiry-field{display:flex;flex-direction:column;gap:5px}
.inquiry-field.full{grid-column:1/-1}
.inquiry-field label{font-size:.8rem;font-weight:700;color:var(--n700)}
.inquiry-field label span{color:var(--rd)}
.inquiry-input{padding:10px 13px;background:var(--n50);border:1px solid rgba(28,16,9,.12);border-radius:var(--r-md);font-size:.9375rem;font-family:inherit;color:var(--n900);width:100%;transition:all .15s}
.inquiry-input:focus{outline:none;border-color:var(--am);background:var(--white);box-shadow:0 0 0 3px rgba(28,16,9,.22)}
textarea.inquiry-input{resize:vertical;min-height:96px}
.inquiry-input.has-error{border-color:var(--rd);background:#FDF2F2}
.inquiry-input.has-error:focus{border-color:var(--rd);box-shadow:0 0 0 3px rgba(220,38,38,.22)}

/* Inline field errors */
.inquiry-error{font-size:.775rem;font-weight:600;color:var(--rd);line-height:1.45}
.inquiry-error:empty{display:none}

/* Error box (429 / 5xx / network) */
.inquiry-errorbox{margin-bottom:1.125rem;padding:1rem 1.125rem;background:#FDF2F2;border:1px solid rgba(220,38,38,.30);border-radius:var(--r-lg);color:var(--rd-h);font-size:.875rem;line-height:1.6}
.inquiry-errorbox a{display:inline-flex;align-items:center;gap:7px;margin-top:.625rem;background:var(--rd);color:var(--white);padding:10px 18px;border-radius:var(--r-btn);font-weight:800;font-size:.9375rem;border:none;box-shadow:0 1px 2px rgba(28,16,9,.08);font-family:"Archivo",inherit;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
.inquiry-errorbox a:hover{background:var(--rd-h);transform:translateY(-1px);box-shadow:0 1px 2px rgba(28,16,9,.06),0 8px 24px -8px rgba(28,16,9,.14)}

/* Nav buttons */
.inquiry-nav{display:flex;gap:.75rem}
.inquiry-btn-next{flex:1;padding:14px;background:var(--am);color:var(--white);border-radius:var(--r-btn);font-weight:700;font-size:1rem;display:flex;align-items:center;justify-content:center;gap:7px;border:none;box-shadow:0 1px 2px rgba(28,16,9,.08);font-family:"Archivo",inherit;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
.inquiry-btn-next:hover{background:var(--am-h)}
.inquiry-btn-next:disabled{opacity:.5;cursor:not-allowed;transform:none}
.inquiry-btn-back{padding:14px 18px;background:var(--white);color:var(--am);border-radius:var(--r-btn);font-weight:600;font-size:.9rem;border:1.5px solid var(--am);box-shadow:0 1px 2px rgba(28,16,9,.08);font-family:"Archivo",inherit;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
.inquiry-btn-back:hover{background:var(--b50)}
.inquiry-note{font-size:.72rem;color:var(--n400);text-align:center;margin-top:10px}

/* Success panel */
.inquiry-success{padding:2.5rem 2rem;text-align:center}
.inquiry-success-icon{width:72px;height:72px;background:var(--b50);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;font-size:2rem}
.inquiry-success h3{font-size:1.375rem;font-weight:900;color:var(--n900);margin-bottom:.75rem}
.inquiry-success h3:focus{outline:none}
.inquiry-success h3:focus-visible{outline:2px solid var(--am);outline-offset:4px;border-radius:var(--r-sm)}
.inquiry-success p{font-size:.9375rem;color:var(--n500);line-height:1.7;margin-bottom:2rem}
.inquiry-success .big-phone{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--rd);color:var(--white);padding:15px 28px;border-radius:var(--r-btn);font-size:1.125rem;font-weight:800;border:none;box-shadow:0 1px 2px rgba(28,16,9,.08);font-family:"Archivo",inherit;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
.inquiry-success .big-phone:hover{background:var(--rd-h);transform:translateY(-1px);box-shadow:0 1px 2px rgba(28,16,9,.06),0 8px 24px -8px rgba(28,16,9,.14)}

@media(max-width:600px){
  .inquiry-step{padding:1.5rem 1.25rem 1.5rem}
  .inquiry-options{grid-template-columns:1fr}
  .inquiry-grid{grid-template-columns:1fr}
  .inquiry-success{padding:2rem 1.25rem}
}

@media(prefers-reduced-motion:reduce){
  .reviews-col-inner{animation:none}
  .inquiry-progress-fill{transition:none}
}

/* ====================================================
   IN DER NÄHE? — availability checker
==================================================== */
.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}
.near-box{max-width:640px;margin:0 auto;text-align:center}
.near-sub{color:var(--n500);line-height:1.7;margin-bottom:1.75rem}
.near-form{position:relative;max-width:420px;margin:0 auto}
.near-form input{width:100%;padding:16px 22px;border:1px solid rgba(28,16,9,.12);border-radius:var(--r-md);font:inherit;font-size:1rem;background:var(--white);box-shadow:var(--sh-sm);transition:border-color .2s ease}
.near-form input:focus{outline:2px solid var(--am);outline-offset:2px;border-color:var(--am)}
.near-suggestions{list-style:none;margin:6px 0 0;padding:6px;position:absolute;inset-inline:0;top:100%;background:var(--white);border:1px solid var(--b200);border-radius:var(--r-lg);box-shadow:var(--sh-lg);z-index:20;text-align:left}
.near-suggestions li{padding:10px 16px;border-radius:var(--r-md);cursor:pointer;font-size:.9375rem}
.near-suggestions li:hover,.near-suggestions li:focus{background:var(--b100);outline:none}
.near-result{margin-top:1.75rem}
.near-result-text{font-weight:700;color:#15803D;margin-bottom:1rem}
.near-hint{margin-top:1.5rem;font-size:.875rem;color:var(--n500)}
.near-hint a{color:var(--am);font-weight:600}

/* Pre-footer CTA band */
.more-cta{padding-top:3rem;padding-bottom:5rem}

/* ====================================================
   INQUIRY WIZARD (5-step funnel, old-site flow)
==================================================== */
.inquiry{max-width:720px;margin:0 auto}
.inquiry-progress{display:flex;justify-content:center;gap:8px;margin-bottom:2rem}
.inquiry-progress-dot{width:34px;height:5px;border-radius:var(--r-full);background:var(--n200);transition:background .2s ease}
.inquiry-progress-dot.active{background:var(--am)}
.inquiry-step-title{font-size:clamp(1.25rem,2.6vw,1.75rem);font-weight:800;color:var(--n900);text-align:center;margin-bottom:.75rem;outline:none}
.inquiry-step-sub{color:var(--n500);text-align:center;margin-bottom:2rem;line-height:1.6}
.inquiry-pest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:2rem}
.inquiry-pest-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 12px;background:var(--white);border:1px solid rgba(28,16,9,.12);border-radius:var(--r-lg);transition:all .18s ease;font-family:inherit}
.inquiry-pest-card:hover{border-color:var(--am);transform:translateY(-3px);box-shadow:var(--sh-md)}
.inquiry-pest-card.selected{border-color:var(--am);background:var(--b50)}
.inquiry-pest-card img{width:72px;height:72px;object-fit:contain}
.inquiry-pest-emoji{font-size:3rem;line-height:72px}
.inquiry-pest-label{font-weight:700;font-size:.9375rem;color:var(--n800)}
.inquiry-loc-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:2rem}
.inquiry-loc-pill{padding:14px 26px;background:var(--white);border:1px solid rgba(28,16,9,.12);border-radius:var(--r-lg);font-weight:700;font-size:.9375rem;color:var(--n800);transition:all .18s ease;font-family:inherit}
.inquiry-loc-pill:hover{border-color:var(--am);transform:translateY(-2px);box-shadow:var(--sh-sm)}
.inquiry-loc-pill.selected{border-color:var(--am);background:var(--b50)}
.inquiry-field{margin-bottom:1.25rem;text-align:left}
.inquiry-field label{display:block;font-weight:600;font-size:.875rem;color:var(--n700);margin-bottom:6px}
.inquiry-field input{width:100%;padding:14px 18px;border:1px solid rgba(28,16,9,.12);border-radius:var(--r-md);font:inherit;background:var(--white);transition:border-color .18s ease}
.inquiry-field input:focus{outline:none;border-color:var(--am)}
.inquiry-next{display:flex;margin:0 auto 1.5rem}
.inquiry-drop{border:2px dashed var(--n300);border-radius:var(--r-lg);padding:2.5rem 1.5rem;text-align:center;background:var(--white);cursor:pointer;transition:all .18s ease;margin-bottom:1rem}
.inquiry-drop:hover,.inquiry-drop.drag{border-color:var(--am);background:var(--b50)}
.inquiry-drop-text{font-weight:700;color:var(--n800)}
.inquiry-drop-hint{font-size:.8125rem;color:var(--n500);margin-top:4px}
.inquiry-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.inquiry-contact-grid .inquiry-field{grid-column:1 / -1}
.inquiry-contact-grid .inquiry-field.half{grid-column:auto}
.inquiry-consent{display:flex;align-items:flex-start;gap:10px;text-align:left;padding:14px 16px;background:var(--white);border:1px solid rgba(28,16,9,.12);border-radius:var(--r-md);margin-bottom:.5rem;font-size:.875rem;color:var(--n700)}
.inquiry-consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--am)}
.inquiry-consent a{color:var(--am);text-decoration:underline}
.inquiry-submit{display:flex;width:100%;margin-top:1rem}
.inquiry-footer{display:flex;justify-content:center;align-items:center;gap:1.5rem;margin-top:1.5rem}
.inquiry-back{font-family:inherit;font-weight:600;color:var(--n500);font-size:.9375rem}
.inquiry-back:hover{color:var(--n800)}
.inquiry-phone-fallback{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border:1.5px solid var(--am);border-radius:var(--r-btn);font-family:'Archivo','Hanken Grotesk',sans-serif;font-weight:700;font-size:.9375rem;color:var(--am);box-shadow:0 1px 2px rgba(28,16,9,.08);transition:transform .15s ease,box-shadow .15s ease}
.inquiry-phone-fallback:hover{transform:translateY(-1px);box-shadow:0 1px 2px rgba(28,16,9,.06),0 8px 24px -8px rgba(28,16,9,.14)}
.inquiry-error{color:var(--rd);font-size:.8125rem;font-weight:600;min-height:1rem;margin-top:4px}
.inquiry-error-box{background:#FDF2F2;border:1px solid rgba(220,38,38,.30);color:var(--rd-h);padding:14px 18px;border-radius:var(--r-md);margin-bottom:1.25rem;font-size:.9375rem}
.inquiry-error-phone{font-weight:800;text-decoration:underline}
.inquiry-note{text-align:center;color:var(--n500);font-size:.8125rem;margin-top:1rem}
.inquiry-success{text-align:center;padding:2rem 0}
.inquiry-success-icon{font-size:3rem;margin-bottom:1rem}
@media(max-width:768px){
  .inquiry-pest-grid{grid-template-columns:repeat(2,1fr)}
  .inquiry-contact-grid{grid-template-columns:1fr}
  .inquiry-contact-grid .inquiry-field.half{grid-column:1 / -1}
}

/* ====================================================
   SUBPAGE HERO — compact, per-page background
==================================================== */
/* Subpage hero: the same layout, but a LIGHT surface — subpages stay airy
   while only the home .hero carries the espresso band. */
.hero-page{min-height:56vh;background:var(--b50)}
.hero-page .hero-title,.hero-page .hero-form-card .hero-form-head{color:var(--n900)}
.hero-page .hero-sub{color:var(--n700)}
.hero-page .hero-trust-item{color:var(--n800)}
.hero-page .hero-trust-item svg{color:var(--am)}
.hero-page .city-highlight{color:var(--am)}
.hero-page .hero-live-badge{background:var(--am);color:var(--white)}
.hero-page .hero-live-badge .live-dot{background:var(--white)}
.hero-page .hero-title em{color:var(--am-txt);background:none}
.hero-page .btn-amber{background:var(--am);color:var(--white)}
.hero-page .btn-amber:hover{background:var(--am-h)}
.hero-page .hero-visual::before{background:var(--am-lt);opacity:.14}
.hero-page .hero-photo-card,.hero-page .hero-form-card{border-color:rgba(28,16,9,.12);box-shadow:var(--sh-md)}
.hero-page .hero-layout{padding-top:3.5rem;padding-bottom:3rem}
.hero-page .hero-title{font-size:clamp(2rem,4.2vw,3.25rem)}

/* ====================================================
   SUBPAGE HEADER — slim LIGHT title band (no hero).
   Subpages stay airy: ivory #F7F5EF ground with espresso-ink type.
==================================================== */
.page-head{background:var(--b50);padding:4rem 0 3.5rem}
.page-head-title{font-size:clamp(1.875rem,3.6vw,2.75rem);font-weight:900;color:var(--n900);line-height:1.1;letter-spacing:-.025em;margin:0}
.page-head-sub{color:var(--n600);line-height:1.7;max-width:640px;margin-top:1rem}
.page-head .hero-live-badge{margin-bottom:1.25rem}

/* ====================================================
   SUBPAGE HEADER — text left, photo right (old-site layout)
==================================================== */
.page-head-grid{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center}
.page-head.has-img .page-head-grid{grid-template-columns:1.1fr .9fr}
.page-head-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.75rem}
.page-head-img img{display:block;width:100%;height:auto;max-height:340px;object-fit:cover;border-radius:var(--r-lg);border:1px solid rgba(28,16,9,.12);box-shadow:var(--sh-md)}

/* ====================================================
   PROSE — two-column sections (text left, image right)
==================================================== */
.prose-flow{max-width:1200px}
.prose-flow > .rv{max-width:none;margin:0 auto 3rem}
.split-row{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center;margin:0 0 4rem}
.split-img .content-img{margin:0;max-width:100%}
.split-extra{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,420px));justify-content:center;gap:1.5rem;margin:0}
.split-extra .content-img{margin:0;max-width:100%}
/* Full-width photos stacked under the copy — the shape the old pages used
   when the image sat below the text rather than beside it. Three or more
   photos tile as .split-extra instead. */
.img-wide{margin:0}
.img-wide .content-img{margin:0 auto;max-width:780px}
.img-wide .content-img img{width:100%;height:auto}
@media(max-width:860px){
  .page-head.has-img .page-head-grid{grid-template-columns:1fr}
  .split-row{grid-template-columns:1fr;gap:1.75rem}
  .split-img{order:-1}
}

/* ====================================================
   INFO CARDS — h3/p pairs inside prose sections
==================================================== */
.info-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem;margin:0 0 3.5rem}
.info-card{background:var(--white);border:1px solid rgba(28,16,9,.12);border-radius:var(--r-lg);padding:1.5rem 1.5rem 1.25rem;box-shadow:var(--sh-sm);transition:all .2s ease}
.info-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.info-card h3{font-size:1.0625rem;font-weight:800;color:var(--n900);margin:0 0 .5rem;letter-spacing:-.01em}
.info-card p{color:var(--n500);font-size:.9375rem;line-height:1.65;margin:0}
.info-card p + p{margin-top:.5rem}

/* Header topic list (old pages' linked list) + image-side control */
.page-head-list{list-style:none;margin:1.5rem 0 0;padding:0;max-width:480px}
.page-head-list li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(28,16,9,.12);color:var(--n800);font-size:.9375rem;font-weight:600}
/* SIGNATURE 3/3 — the crosshair replaces the arrow as the list marker. */
.page-head-list li svg{display:none}
.page-head-list li::before{
  content:'';width:14px;height:14px;flex:none;
  background:var(--am);
  -webkit-mask:var(--crosshair) center/contain no-repeat;
          mask:var(--crosshair) center/contain no-repeat
}
.split-row.img-left .split-img{order:-1}
@media(max-width:860px){.split-row.img-left .split-img{order:-1}}

/* ====================================================
   LIGHT SUBPAGE THEME — cream header, alternating bands
==================================================== */
.nav-light .nav-links a{color:var(--n700)}
.nav-light .nav-links a:hover{color:#1C1009}
.nav-light .nav-hamburger{color:var(--n900)}
.page-head .page-head-title{color:var(--n900);text-shadow:none}
.page-head .page-head-sub{color:var(--n600)}
.page-head .hero-live-badge{background:var(--am);border-color:var(--am);color:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
.page-head .hero-live-badge .live-dot{background:#fff}
.page-head-list li{color:var(--n800);border-bottom:1px solid rgba(28,16,9,.12)}
.page-head-list li svg{color:var(--am)}
.page-head-img img{box-shadow:var(--sh-md);border:1px solid rgba(28,16,9,.12)}
.content-band{padding:4rem 0}
.band-white{background:#fff}
.band-cream{background:#F7F5EF}
/* The modern service template's own bands, matching the old site's palette:
   ivory behind the centred aside, espresso behind the reassurance band. */
.band-interstitial{background:#F7F5EF;text-align:center}
.interstitial-line{margin:0;font-size:clamp(1.35rem,3vw,2rem);font-style:italic;font-weight:600;color:var(--n800);line-height:1.4}
.band-accent{background:var(--am);color:#fff}
.accent-inner{text-align:center;max-width:820px}
.accent-title{margin:0 0 1rem;font-size:clamp(1.5rem,3.2vw,2.25rem);font-weight:800;color:#fff;line-height:1.25}
.accent-text{margin:0 auto 1.5rem;max-width:680px;color:#fff;opacity:.95;line-height:1.75}
.band-accent .btn-white{color:var(--am)}

/* Three-up icon cards: each keeps the circular icon the old page paired it
   with, side by side rather than stacked. */
.icon-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;margin:0}
.icon-card{text-align:center}
.icon-card-icon{margin:0 auto 1.25rem;max-width:150px}
.icon-card-icon .content-img{margin:0}
.icon-card-icon img{width:100%;height:auto;border-radius:50%}
.icon-card-title{margin:0 0 .625rem;font-size:1.125rem;font-weight:800;color:var(--n800)}
.icon-card-text{margin:0 0 .75rem;color:var(--n600);line-height:1.7;font-size:.9375rem}
.icon-cards-cta{margin-top:2.5rem;text-align:center}

/* City template: the place-name h1 leads at full size (SEO: the h1 must be
   the most prominent heading), with the promise headline demoted below it. */
.page-head-title-sm{margin-bottom:.75rem}
.page-head-hl{margin:0 0 1rem;font-size:clamp(1.125rem,2.2vw,1.45rem);font-weight:700;line-height:1.35;color:var(--am)}

/* Spezialgebiete: heading beside its intro, then labelled pest tiles. */
.tiles-head{display:grid;grid-template-columns:minmax(220px,1fr) 1.4fr;gap:2rem;align-items:start;margin-bottom:2.5rem}
.tiles-head-copy p{margin:0;color:var(--n600);line-height:1.8}
.pest-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.5rem;margin:0}
.pest-tile{margin:0;border:1px solid rgba(28,16,9,.12);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md)}
.pest-tile .content-img{margin:0}
.pest-tile img{width:100%;height:auto;display:block}
.pest-tile-cap{background:var(--am);color:#fff;text-align:center;padding:.625rem .5rem;font-weight:700;font-size:.9375rem;letter-spacing:.02em;text-transform:uppercase}

/* The "25 +" experience card overlaid on the Über-uns photo. */
.split-img{position:relative}
.counter-card{position:absolute;left:1rem;bottom:1rem;background:var(--am);color:#fff;border:none;border-radius:var(--r-lg);padding:1rem 1.25rem;text-align:center;box-shadow:var(--sh-md)}
.counter-val{display:block;font-size:2rem;font-weight:900;line-height:1}
.counter-plus{font-size:1.25rem;margin-left:.125rem}
.counter-lbl{display:block;margin-top:.25rem;font-size:.8125rem;font-weight:600;opacity:.95}

/* Closing cream band holding the CTA and the three feature cards. */
.band-feature{background:#F7F5EF;text-align:center}
.feature-band-lead p{margin:0 auto 1rem;max-width:640px;color:var(--n600);line-height:1.8}
.feature-band-cta{margin:1.5rem 0 2.5rem}
.feature-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;margin:0}
.feature-card{background:#fff;border:1px solid rgba(28,16,9,.12);border-radius:var(--r-lg);padding:2rem 1.5rem;box-shadow:var(--sh-sm)}
.feature-card-icon{margin:0 auto 1rem;width:72px;height:72px;border-radius:50%;background:var(--b50);display:grid;place-items:center;overflow:hidden}
.feature-card-icon img{width:100%;height:auto;border-radius:50%}
.feature-card-title{margin:0 0 .5rem;font-size:1.0625rem;font-weight:800;color:var(--n800)}
.feature-card-text{margin:0;color:var(--n600);line-height:1.7;font-size:.9375rem}

@media(max-width:860px){
  .tiles-head{grid-template-columns:1fr;gap:1rem}
}

/* About template: Mission | mascot | Vision, the artwork between the cards. */
.mission-lead{text-align:center}
.mission-lead p{margin:0 auto 1rem;max-width:680px;color:var(--n600);line-height:1.8}
.mission-row{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:2.5rem;align-items:center;margin:0}
.mission-row .icon-card-icon{max-width:96px}
.mission-art{margin:0}
.mission-art img{width:100%;height:auto;display:block}
@media(max-width:860px){
  .mission-row{grid-template-columns:1fr;gap:2rem}
  .mission-art{order:-1;max-width:260px;margin:0 auto}
}

/* Hero feature pills: bordered label rows under the header photo. */
.page-head-pills{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.625rem}
.page-head-pills li{display:flex;align-items:center;gap:.625rem;padding:.75rem 1rem;border:1px solid rgba(28,16,9,.12);border-radius:var(--r-md);background:#fff;font-weight:600;font-size:.9375rem;color:var(--n800)}
.page-head-pills li svg{flex:none;color:var(--am)}
.content-band .rv{margin-bottom:0}

/* Definition list (old page style) + heading divider */
.def-list{list-style:disc;margin:1.5rem 0 0;padding-left:1.25rem}
.def-list li{margin-bottom:1.1rem;color:var(--n600);line-height:1.65}
.def-list li strong{display:block;color:var(--n900);font-weight:700}
.split-text h2:first-child:after,.rv > h2:first-of-type:after{content:'';display:block;width:64px;height:2px;background:var(--n900);margin-top:16px}

/* Pest tiles are links to their service pages */
.pest-tile-link{display:block;transition:transform .18s ease}
.pest-tile-link:hover{transform:translateY(-4px)}
.pest-tile-link:hover .pest-tile-cap{background:var(--am)}

/* ====================================================
   FOCUS — a visible ink ring on every interactive element.
   Offset so it reads clearly against both cream and ink bands.
==================================================== */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--r-sm)}
.emergency a:focus-visible,.stats a:focus-visible,.footer a:focus-visible,
.mobile-bar a:focus-visible{outline-color:var(--white)}
/* The drawer is white now, so its ring stays espresso ink (the default). */
.nav-drawer a:focus-visible{outline-color:var(--ink)}

/* Hover transforms are the only motion added by this re-skin; drop them
   for anyone who asked for reduced motion. */
@media (prefers-reduced-motion: reduce){
  .btn,.btn:hover,.nav-phone-btn:hover,.svc-card:hover,.wa-float:hover,
  .form-btn:hover,.funnel-btn-next:hover,.inquiry-btn-next:hover,
  .pest-tile-link:hover,.info-card:hover,.inquiry-phone-fallback:hover{
    transform:none
  }
  *{transition-duration:.01ms!important}
}

/* ====================================================
   HOME HERO — narrow screens
   The hero borrows .split-row so the layout comparator reads it as the
   sided row it is; these rules keep that helper's generic mobile
   behaviour (order flips, collapsed widths) from reaching the hero.
==================================================== */
@media(max-width:1024px){
  .hero{padding:3rem 0 3.5rem}
  .hero .hero-visual{order:0}
  .hero .hero-photo-card img{height:320px}
}
@media(max-width:768px){
  .hero{padding:2.5rem 0 3rem}
  /* Same de-compensation as .hero: the sticky nav now takes its own space. */
  .page-head{padding:2.5rem 0 2.5rem}
  .hero-page .hero-layout{padding-top:2.5rem}
  .hero .hero-photo-card img{height:260px}
  /* Keep the signature visible but proportional to the smaller card. */
  .hero .hero-visual::before{width:280px;height:280px;top:-6%;left:-10%}
  .hero-actions .btn{width:100%}
  .hero-trust-row{gap:.75rem 1.25rem}
}

/* The kontakt section's .form-card already provides the card chrome —
   the wizard inside it must not draw a second nested card. */
.form-card .inquiry{background:none;border:none;border-radius:0;box-shadow:none;max-width:none;overflow:visible}
.form-card .inquiry-step{padding:0}

/* Hero quick-inquiry card (replaces the hero photo card) */
.hero-form-card{position:relative;z-index:1;background:var(--white);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-xl);box-shadow:var(--sh-xl);padding:1.5rem 1.5rem 1.75rem;width:100%;max-width:560px}
.hero-form-card .hero-form-head{font-family:'Archivo','Hanken Grotesk',-apple-system,sans-serif;font-weight:800;font-size:1.05rem;color:var(--n900);text-align:center;margin-bottom:.5rem}
.hero-form-card .inquiry{background:none;border:none;border-radius:0;box-shadow:none;max-width:none;overflow:visible}
.hero-form-card .inquiry-step{padding:0}
.hero-form-card .inquiry-step-title{font-size:1.05rem}
.hero-form-card .inquiry-pest-card{padding:12px 8px}
.hero-form-card .inquiry-pest-card img{width:52px;height:52px}
.hero-form-card .inquiry-pest-emoji{font-size:2rem;line-height:52px}
.hero-form-card .inquiry-progress{margin-bottom:1.1rem}
@media(max-width:1080px){.hero-form-card{max-width:100%}}

/* Compact quick form (hero card) */
.inquiry-compact .inquiry-field{margin-bottom:.9rem}
.inquiry-compact .inquiry-field input{padding:12px 14px}
.inquiry-compact .inquiry-submit{width:100%;margin-top:.75rem}
.inquiry-compact .inquiry-consent{margin-top:.25rem;padding:10px 12px}

/* Dropdown in the quick form */
.inquiry-select{width:100%;padding:12px 14px;border:1px solid rgba(28,16,9,.12);border-radius:var(--r-md);font:inherit;background:var(--white);color:var(--ink);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='%231C1009' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;cursor:pointer}
.inquiry-select:focus{outline:none;border-color:var(--am)}

/* ====================================================
   STRUCTURAL REDESIGN — HARTMANN LAYOUT, KATZBACH CHARTER
   Layout overhaul of the generated pages: espresso authority crossed
   with an airy, friendly ivory service page. Only NEW selectors live
   here, plus a few deliberate overrides of earlier rules where the new
   structure demands it. Nothing above is renamed or removed.
==================================================== */

/* ---- Premium vertical rhythm ---- */
@media(min-width:1025px){
  .section{padding:7rem 0}
  .content-band{padding:6rem 0}
}

/* ---- HOME HERO: espresso band, generous height ---- */
@media(min-width:1025px){
  .hero{padding:6rem 0 6.5rem}
}
.hero .hero-layout.split-row{align-items:center;gap:4.5rem}
/* Bronze uppercase kicker replacing the chip badge (7.52:1 on espresso). */
.hero-eyebrow,.hero-kicker{
  font-family:'Archivo','Hanken Grotesk',-apple-system,sans-serif;
  font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#C09F79;margin:0 0 1.125rem
}
/* The H1 gets the big display jump asked for by the brief. */
.hero .hero-title{font-size:clamp(2.5rem,5vw,4rem);line-height:1.02;margin-bottom:1.375rem}
.hero .hero-sub{max-width:560px;margin-bottom:2rem}

/* Checkmark benefit list: espresso tick in a bronze circle. */
.hero-checklist{list-style:none;margin:0 0 2.25rem;padding:0;display:flex;flex-direction:column;gap:.875rem}
.hero-checklist li{display:flex;align-items:flex-start;gap:.875rem;color:#E9DCC9;font-size:1rem;line-height:1.5;font-weight:500}
.hero-check-ico{
  flex:none;display:grid;place-items:center;width:26px;height:26px;margin-top:1px;
  border-radius:50%;background:#AA865C;color:#1C1009
}
/* On the light subpage hero the same list flips to ink-on-tint. */
.hero-page .hero-checklist li{color:var(--n700)}
.hero-page .hero-check-ico{background:var(--b50);color:var(--am)}

/* Google rating badge sits closer to the CTAs in the new stack. */
.hero .hero-trust-row{gap:1rem 1.75rem}
.hero .hero-google-badge{margin-top:1.25rem}

/* ---- CREDENTIAL STRIP under the hero ---- */
.cred-strip{background:var(--white);border-bottom:1px solid rgba(28,16,9,.12)}
.cred-list{
  list-style:none;margin:0;padding:1.125rem 0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem
}
.cred-item{
  display:flex;align-items:center;gap:.625rem;
  font-family:'Archivo','Hanken Grotesk',-apple-system,sans-serif;
  font-size:.875rem;font-weight:700;letter-spacing:.01em;color:var(--n800);
  min-height:44px
}
.cred-item svg{flex:none;color:var(--am)}
@media(max-width:900px){
  .cred-list{justify-content:flex-start;gap:.5rem 1.5rem;padding:1rem 0}
  .cred-item{font-size:.8125rem;min-height:36px}
}

/* ---- NEAR CHECK: white panel on the light tint ---- */
.near-box{
  background:var(--white);border:1px solid rgba(28,16,9,.12);border-radius:var(--r-xl);
  box-shadow:var(--sh-md);padding:3rem 2rem;max-width:720px
}
@media(max-width:640px){.near-box{padding:2rem 1.25rem}}
.near-form input{min-height:52px}
.near-result .btn{min-height:48px}

/* ---- SERVICES: bigger, airier white cards ---- */
.services-grid.split-extra{grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:1.75rem}
.svc-card{border-radius:var(--r-xl);text-align:left;box-shadow:var(--sh-md)}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--sh-xl)}
/* Illustration sits on the ivory tint as a full-width image top. */
.svc-icon{height:172px;background:var(--b50);padding:1.5rem}
.svc-icon img{width:132px;height:132px;background:none;border-radius:0;padding:0}
.svc-body{padding:1.5rem 1.5rem 1.625rem}
.svc-name{font-family:'Archivo','Hanken Grotesk',-apple-system,sans-serif;font-size:1.1875rem;font-weight:800;color:var(--am);margin-bottom:.5rem;letter-spacing:-.01em}
.svc-desc{font-size:.9375rem;color:var(--n700);line-height:1.6}
.svc-cta{padding-top:1.125rem;font-size:.875rem;color:var(--am);gap:7px}
.svc-card:hover .svc-cta svg{transform:translateX(3px)}
.svc-cta svg{transition:transform .15s ease}
@media(max-width:768px){
  .services-grid.split-extra{grid-template-columns:repeat(2,1fr);gap:1rem}
  .svc-icon{height:120px;padding:1rem}
  .svc-icon img{width:84px;height:84px}
  .svc-body{padding:1rem}
  .svc-name{font-size:1rem}
  .svc-desc{font-size:.8125rem}
}

/* ---- STATS: full-bleed espresso band, bronze numerals ---- */
.stats{padding:4.5rem 0}
.stat{border-right-color:rgba(255,255,255,.16)}
.stat-val{font-size:clamp(2.25rem,4vw,3.25rem)}
.stat-lbl{font-size:.875rem;color:#E9DCC9}
@media(max-width:768px){.stats{padding:3rem 0}}

/* ---- ABOUT / WHY: lighter and airier ---- */
.why-lead{color:var(--n700);line-height:1.8;max-width:520px;margin-bottom:2.5rem;font-size:1.0625rem}
.why-visual{border-radius:var(--r-xl);box-shadow:var(--sh-xl)}
.why-feat-icon{border-radius:var(--r-xl);background:var(--b50);color:var(--am)}
.why-feat-desc{color:var(--n700);font-size:.9375rem}

/* ---- PROCESS: numbered espresso timeline ---- */
.process-grid{gap:2.5rem}
.process-grid::before{background:rgba(170,134,92,.55);opacity:1;height:2px}
.process-num{
  background:var(--am);color:var(--white);width:64px;height:64px;font-size:1.5rem;
  box-shadow:0 0 0 10px var(--white),0 0 0 12px rgba(28,16,9,.12)
}
.section-alt .process-num{box-shadow:0 0 0 10px var(--b50),0 0 0 12px rgba(28,16,9,.12)}
.process-title{font-size:1.125rem}
.process-desc{color:var(--n700);font-size:.9375rem}

/* ---- EMERGENCY: espresso band, red phone CTA ---- */
@media(min-width:1025px){.emergency{padding:6.5rem 0}}
.emg-sub{color:#E9DCC9;max-width:560px}
.emergency .btn{min-height:56px}

/* ---- CONTACT: wizard card carries the weight ---- */
.contact-grid{gap:4rem}
.contact-left p{color:var(--n700)}
.form-card{border-radius:var(--r-xl);box-shadow:var(--sh-xl)}
@media(min-width:1025px){.form-card{padding:3rem}}
.cd-val{color:var(--am)}
.cd-lbl{color:var(--n500)}

/* ---- SUBPAGE HEAD: light, airy, ink on white ---- */
.page-head{
  background:var(--white);
  border-bottom:1px solid rgba(28,16,9,.12);
  padding:4.5rem 0 4rem
}
@media(min-width:1025px){.page-head{padding:5.5rem 0 5rem}}
/* Espresso uppercase eyebrow replaces the old chip badge on subpages. */
.page-head-eyebrow{
  font-family:'Archivo','Hanken Grotesk',-apple-system,sans-serif;
  font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--am);margin:0 0 1rem
}
.page-head-title{font-size:clamp(2.25rem,4.4vw,3.5rem);font-weight:800;line-height:1.05;letter-spacing:-.03em}
.page-head-sub{color:var(--n700);font-size:1.0625rem;line-height:1.75;max-width:62ch}
.page-head-actions .btn{min-height:48px}
.page-head-img img{max-height:400px;border-radius:var(--r-xl);box-shadow:var(--sh-xl)}
.page-head-pills li{background:var(--b50);border-color:rgba(28,16,9,.12);min-height:48px}
.page-head-hl{color:var(--n800);font-weight:700}
/* The head sits on white, so the first content band must not repeat it. */
.page-head + .content-band.band-white{padding-top:4rem}

/* ---- CONTENT BANDS: cleaner prose measure ---- */
.band-cream{background:var(--b50)}
.split-row{gap:4.5rem}
.split-text h2:first-child:after,.rv > h2:first-of-type:after{background:var(--amber);width:56px;height:3px}
.info-card{border-radius:var(--r-xl);box-shadow:var(--sh-md);padding:1.75rem}
.info-card:hover{box-shadow:var(--sh-xl)}
.info-card p{color:var(--n700)}

/* ---- ACCENT BAND → espresso with bronze accents ---- */
.band-accent{background:var(--ink);color:var(--white)}
.accent-title{color:var(--white)}
.accent-title::after{
  content:'';display:block;width:56px;height:3px;background:var(--amber);
  margin:1.125rem auto 0
}
.accent-text{color:#E9DCC9;opacity:1}
/* Signal red stays the phone CTA even on the espresso band. */
.band-accent .btn-white{background:var(--rd);color:var(--white);box-shadow:none}
.band-accent .btn-white:hover{background:var(--rd-h)}

/* ---- INTERSTITIAL: quiet bronze rule instead of a tinted band ---- */
.band-interstitial{background:var(--white);border-block:1px solid rgba(28,16,9,.12)}
.interstitial-line{max-width:26ch;margin:0 auto;color:var(--am);font-style:normal;font-weight:700;font-family:'Archivo','Hanken Grotesk',-apple-system,sans-serif}
.interstitial-line::before{
  content:'';display:block;width:40px;height:3px;background:var(--amber);margin:0 auto 1.5rem
}

/* ---- CARD / TILE / FEATURE ROWS re-skinned to the card language ---- */
.icon-card{
  background:var(--white);border:1px solid rgba(28,16,9,.12);border-radius:var(--r-xl);
  padding:2rem 1.5rem;box-shadow:var(--sh-md)
}
.band-cream .icon-card{background:var(--white)}
.icon-card-title{color:var(--am);font-family:'Archivo','Hanken Grotesk',-apple-system,sans-serif}
.icon-card-text{color:var(--n700)}
.mission-row .icon-card{padding:2rem 1.5rem}
.mission-art{background:none;border:none;box-shadow:none}
.feature-card{border-radius:var(--r-xl);box-shadow:var(--sh-md)}
.feature-card-title{color:var(--am)}
.feature-card-text{color:var(--n700)}
.band-feature{background:var(--b50)}
.feature-band-lead p{color:var(--n700)}
.pest-tile{border-radius:var(--r-xl)}
.pest-tile-cap{background:var(--am);letter-spacing:.06em;font-size:.875rem;padding:.75rem .5rem}
.tiles-head-copy p{color:var(--n700)}

/* ---- CITY / HUB link grids: airier cards ---- */
.city-region-head{font-size:1.5rem;margin:3.5rem 0 1.5rem}
.city-grid{gap:1rem}
.city-card{border-radius:var(--r-xl);padding:1.125rem 1.25rem;min-height:56px;box-shadow:var(--sh-sm)}
.city-card:hover{box-shadow:var(--sh-md);border-color:rgba(28,16,9,.2)}

/* ---- LEGAL / COOKIES: narrow, quiet measure ---- */
.legal-measure{max-width:none}
.legal-page .rv{max-width:70ch}
.legal-page .section-title{max-width:70ch;margin-bottom:2rem}
.legal-page .rv p{color:var(--n700)}

/* ---- Touch targets ---- */
.btn,.nav-phone-btn,.mobile-bar a{min-height:44px}
.footer-links a,.footer-legal a{display:inline-flex;align-items:center;min-height:32px}

/* ---- Prose colour floor: body copy never lighter than --n700 ---- */
.prose-flow p,.content-band p{color:var(--n700)}
.def-list li{color:var(--n700)}

/* ====================================================
   HOME HERO — rotating H1 location + promise line
   The H1 reads "Ihr Kammerjäger <Ort> für Schädlingsbekämpfung"; the
   <Ort> half cycles through the Einsatzgebiete that have their own city
   page. Pure CSS: the words are stacked absolutely inside a clipping
   box, share one keyframe and are offset by an inline animation-delay
   (inline styles are permitted by the CSP, inline scripts are not).
==================================================== */
/* A deliberate three-liner: the intent line, the rotating location on
   its own line (so the cycling words never reflow the rest of the
   sentence), then the service. The selector is scoped to .hero so it
   outranks the earlier `.hero .hero-title` display size — three lines
   need a smaller maximum than the old two-line headline had. */
.hero .hero-title-rotator{font-size:clamp(1.6rem,2.8vw,2.25rem);margin-bottom:.85rem;max-width:22ch}

.rotate-words{
  /* Own line by design — a block-level clipping box. It reserves the
     height of one line and, at this measure, comfortably holds the
     longest phrase ("in Blankenfelde-Mahlow") without reflowing. */
  display:block;position:relative;width:100%;
  height:1.12em;overflow:hidden
}
.rotate-stack{display:block;position:relative;width:100%;height:100%}
/* Kicker line inside the H1 — the old site's h1 carried it as its first
   line; it resets the display-size metrics it inherits from the H1. */
.hero-kicker{display:block;font-size:clamp(.9375rem,1.4vw,1.125rem);line-height:1.5;margin:0 0 .875rem}
/* Rotator inside the subline: inline box wide enough for the longest
   phrase ("in Blankenfelde-Mahlow"); it sits last in the line, so the
   trailing slack is invisible. */
.hero-sub-rotator .rotate-words{
  display:inline-block;width:12.5em;max-width:100%;
  height:1.2em;vertical-align:text-bottom;text-align:left
}
.hero-sub-rotator .rotate-word{font-weight:700;line-height:1.2}
.rotate-word{
  position:absolute;left:0;top:0;white-space:nowrap;
  color:#C09F79;opacity:0;
  animation:heroRotateWord var(--rotate-cycle,17.5s) infinite both
}
/* Each word owns one seventh of the cycle (14.286%). It slides up into
   place over the first ~2%, holds its slot, then leaves over the two
   percent AFTER its slot ends — that tail overlaps the next word's
   entrance, so the line crossfades instead of blinking empty. */
@keyframes heroRotateWord{
  0%    {opacity:0;transform:translateY(.5em)}
  2.2%  {opacity:1;transform:translateY(0)}
  14.29%{opacity:1;transform:translateY(0)}
  16.5% {opacity:0;transform:translateY(-.5em)}
  100%  {opacity:0;transform:translateY(-.5em)}
}
/* Fallback for engines that ignore the animation: the resting word is
   the only one that is laid out in flow terms anyway, so keep it lit. */
.rotate-word:first-child{opacity:1}

/* The old site's guarantee stays in the hero, directly under the H1:
   Archivo 800, white with the promise half bronze — the same em-split
   treatment it had when it was the headline. */
.hero-promise{
  font-family:'Archivo','Hanken Grotesk',-apple-system,sans-serif;
  font-weight:800;letter-spacing:-.02em;line-height:1.15;
  font-size:clamp(1.125rem,1.9vw,1.5rem);
  color:#FFFFFF;margin:0 0 1.25rem;max-width:22ch
}
.hero-promise em{font-style:normal;color:#C09F79}
@media(max-width:900px){
  .hero .hero-title-rotator{font-size:clamp(1.45rem,5.6vw,2rem);max-width:none}
  .hero-promise{max-width:none;font-size:1.0625rem}
}

/* ====================================================
   SCROLL-REVEAL VARIANTS
   All build on the existing .reveal / .reveal.in toggle from site.js —
   the default translateY reveal is untouched.
==================================================== */
.reveal-zoom{transform:scale(.9);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.68,.36,1)}
.reveal-zoom.in{transform:scale(1)}
.reveal-fade{transform:none;transition:opacity .6s ease}
.reveal-fade.in{transform:none}
.reveal-pop{transform:scale(.85);transition:opacity .3s ease}
.reveal-pop.in{transform:scale(1);animation:revealPop .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes revealPop{
  0%  {transform:scale(.85)}
  60% {transform:scale(1.04)}
  100%{transform:scale(1)}
}
/* Extra stagger steps for the four-up strips (cred list, checklist). */
.reveal-d4{transition-delay:.28s;animation-delay:.28s}
.reveal-d1.reveal-pop.in{animation-delay:.07s}
.reveal-d2.reveal-pop.in{animation-delay:.14s}
.reveal-d3.reveal-pop.in{animation-delay:.21s}

/* ====================================================
   AMBIENT MOTION — small, ongoing, never loud
==================================================== */
.hero .hero-live-badge .live-dot{animation:heroDotPulse 2.4s ease-in-out infinite}
@keyframes heroDotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}

.wa-float{animation:waBob 3s ease-in-out infinite}
@keyframes waBob{0%,100%{transform:translateY(3px)}50%{transform:translateY(-3px)}}
/* The hover rule already sets its own transform; stop the bob so the two
   never fight over the same property. */
.wa-float:hover{animation:none}

.svc-card .svc-icon img{transition:transform .2s ease}
.svc-card:hover .svc-icon img{transform:scale(1.06)}

/* ====================================================
   REDUCED MOTION — everything added above stops here
   The global reduce block only pins transitions, so the keyframe
   animations need their own switch-off. The rotator in particular must
   not flash its whole stack: it collapses to the resting word.
==================================================== */
@media (prefers-reduced-motion: reduce){
  .rotate-word{animation:none;opacity:0}
  .rotate-word:first-child{opacity:1;transform:none}
  .reveal-zoom,.reveal-fade,.reveal-pop,
  .reveal-zoom.in,.reveal-fade.in,.reveal-pop.in{
    opacity:1!important;transform:none!important;
    transition:none!important;animation:none!important
  }
  .hero .hero-live-badge .live-dot,.wa-float{animation:none}
  .svc-card .svc-icon img,.svc-card:hover .svc-icon img{transform:none;transition:none}
}

/* ====================================================
   LIGHT-SECTION PLANES
   --b50 and the page ground are the same ivory, so .section and
   .section-alt rendered identically — adjacent light sections had no
   visible edge. The alternate plane carries a very soft bronze tint;
   sections otherwise meet on plain straight edges (no shape dividers).
==================================================== */
.section-alt{background:#F3ECE1}
.content-band.band-cream{background:#F3ECE1}

/* ====================================================
   HERO H1 COLOR/SIZE PASS (client request 2026-08-19)
   The kicker line matches the headline size; the colours alternate
   white / bronze / white down the three lines.
==================================================== */
.hero .hero-kicker{
  font-size:1em;line-height:inherit;font-weight:inherit;
  letter-spacing:-.02em;color:#fff;margin:0
}
.hero .hero-title{color:#C09F79}
.hero .hero-title em{color:#fff}
/* Slightly smaller hero headline (client request). */
.hero .hero-title{font-size:clamp(2.1rem,3.9vw,3.1rem)}

/* ====================================================
   MOBILE PASS
   The late hero/stat size passes above sit after the main
   responsive block, so their desktop-sized clamp minimums won
   the cascade on phones (34px hero, 36px stat numerals), and
   several 1fr grid tracks blew past the viewport on min-content
   (long German compounds, the e-mail address, the form select) —
   clipped invisibly by the body's overflow-x:hidden. This block
   is last on purpose.
==================================================== */
@media(max-width:767px){
  .hero-title,.hero .hero-title{font-size:clamp(1.7rem,7vw,2.2rem);line-height:1.06}
  .hero-sub{font-size:.9375rem}
  .page-head-title{font-size:clamp(1.55rem,6.6vw,1.875rem)}
  .stat-val{font-size:clamp(1.7rem,7.2vw,2rem)}
  .stat-lbl{font-size:.78rem}
  h1,h2,h3,.hero-title,.section-title,.page-head-title,.emg-title,.stat-val{overflow-wrap:break-word}

  /* Min-content overflow guards */
  .nav-logo{min-width:0;overflow:hidden;flex-shrink:1}
  .nav-logo-img{flex-shrink:1;max-width:100%;object-fit:contain;object-position:left center}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats-grid .stat,.process-step{min-width:0}
  .process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-title,.process-desc{overflow-wrap:break-word}
  .services-grid,.services-grid.split-extra{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-grid,.why-grid,.footer-grid{grid-template-columns:minmax(0,1fr)}
  .contact-left,.form-card{min-width:0}
  .contact-details{grid-template-columns:minmax(0,1fr)}
  .cd{min-width:0}
  .cd-icon+div{min-width:0}
  .cd-val{overflow-wrap:anywhere}
  .form-input,.form-select,.form-textarea,.inquiry-input{min-width:0;max-width:100%}
  .footer-links a,.footer-desc{overflow-wrap:break-word}
  .city-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .city-card{min-width:0}
  .city-card span{overflow-wrap:break-word;min-width:0}
}
@media(max-width:480px){
  .process-grid{grid-template-columns:1fr;gap:1.75rem}
}