/* ==========================================================================
   HANIK DESIGN SYSTEM — component & alias layer
   Gartencenter & Poolbau Hanik
   --------------------------------------------------------------------------
   This file is the second half of the design system. The first half lives in
   the MME Theme option (mme_design_system): colours, font families, fluid
   font sizes and spacing, which the child theme syncs into Elementor V3
   Global Colors/Fonts, Elementor V4 Variables and `--mme-*` custom properties.

   Everything the token engine cannot model — radii, glass surfaces, image
   scrims, shadows, easings, durations and the z-index ladder — is declared
   here, plus the shared component layer (buttons, badges, eyebrows, rules,
   section rhythm, world theming).

   §1 Aliases      `--mme-*` -> the short Hanik token names, so markup authored
                   against hanik-homepage/css/tokens.css works verbatim here.
   §2 Extra tokens shape, glass, scrims, motion, z-index.
   §3 World theming  [data-world="garten" | "pool"] repoints --c-accent.
   §4 Base         body typography + focus + selection.
   §5 Layout       .shell, .section and its tonal variants.
   §6 Typography   .display/.h1-.h4, .eyebrow, .section-lead, .prose.
   §7 Components   .btn, .link-arrow, .badge, .pill, .glass, .media, .rule.
   §8 Utilities    .hide-mobile, .visually-hidden, reduced motion.

   Edit colours/sizes/spacing in WP Admin -> MME Theme, never here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   §1  Token aliases — MME engine output mapped to the Hanik names
   -------------------------------------------------------------------------- */

:root {
  /* Canvas */
  --c-canvas:            var(--mme-color-canvas, #f8f7f4);
  --c-canvas-sunk:       var(--mme-color-canvas-sunk, #f1efe9);
  --c-obsidian:          var(--mme-color-obsidian, #141716);
  --c-obsidian-soft:     var(--mme-color-obsidian-soft, #1e2321);

  /* Gartencenter world */
  --c-garten:            var(--mme-color-garten, #2d4a3e);
  --c-garten-soft:       var(--mme-color-garten-soft, #52796f);
  --c-garten-wash:       var(--mme-color-garten-wash, #e8ede9);

  /* Poolbau world */
  --c-pool:              var(--mme-color-pool, #0e4d64);
  --c-pool-soft:         var(--mme-color-pool-soft, #1b7a9a);
  --c-pool-wash:         var(--mme-color-pool-wash, #e4edf1);

  /* Luxury metal */
  --c-brass:             var(--mme-color-brass, #c5a880);
  --c-brass-deep:        var(--mme-color-brass-deep, #a8875c);
  --c-brass-light:       var(--mme-color-brass-light, #e0cdb0);

  /* Text */
  --c-ink:               var(--mme-color-ink, #141716);
  --c-ink-muted:         var(--mme-color-ink-muted, #5c625e);
  --c-ink-faint:         var(--mme-color-ink-faint, #8b918c);
  --c-ink-invert:        var(--mme-color-ink-invert, #f4f2ec);
  --c-ink-invert-muted:  var(--mme-color-ink-invert-muted, #a9aea8);

  /* Lines */
  --c-rule:              var(--mme-color-rule, rgba(20, 23, 22, 0.12));
  --c-rule-strong:       var(--mme-color-rule-strong, rgba(20, 23, 22, 0.22));
  --c-rule-invert:       var(--mme-color-rule-invert, rgba(244, 242, 236, 0.16));

  /* Families */
  --font-display:        var(--mme-font-display, Fraunces, Playfair Display, Georgia, serif);
  --font-sans:           var(--mme-font-sans, Plus Jakarta Sans, Inter, system-ui, Segoe UI, Arial, sans-serif);

  /* Fluid type scale */
  --t-display:           var(--mme-size-display);
  --t-h1:                var(--mme-size-h1);
  --t-h2:                var(--mme-size-h2);
  --t-h3:                var(--mme-size-h3);
  --t-h4:                var(--mme-size-h4);
  --t-lead:              var(--mme-size-lead);
  --t-body:              var(--mme-size-body);
  --t-small:             var(--mme-size-small);
  --t-micro:             var(--mme-size-micro);

  --lh-display:          var(--mme-lh-display, 0.98);
  --lh-heading:          var(--mme-lh-h2, 1.08);
  --lh-lead:             var(--mme-lh-lead, 1.5);
  --lh-body:             var(--mme-lh-body, 1.65);

  --ls-display:          var(--mme-ls-display, -0.02em);
  --ls-heading:          var(--mme-ls-h3, -0.015em);
  --ls-badge:            var(--mme-ls-micro, 0.08em);
  --ls-label:            0.14em;

  /* Layout & spacing */
  --container:           var(--mme-space-container, 1440px);
  --container-text:      var(--mme-space-container-text, 980px);
  --gutter:              var(--mme-space-gutter, clamp(20px, 4vw, 80px));
  --section-y:           var(--mme-space-section-y, clamp(88px, 11vw, 180px));
  --section-y-tight:     var(--mme-space-section-y-tight, clamp(64px, 7vw, 112px));

  --space-2:             var(--mme-space-2, 2px);
  --space-4:             var(--mme-space-4, 4px);
  --space-8:             var(--mme-space-8, 8px);
  --space-12:            var(--mme-space-12, 12px);
  --space-16:            var(--mme-space-16, 16px);
  --space-24:            var(--mme-space-24, 24px);
  --space-32:            var(--mme-space-32, 32px);
  --space-48:            var(--mme-space-48, 48px);
  --space-64:            var(--mme-space-64, 64px);
  --space-96:            var(--mme-space-96, 96px);
  --space-120:           var(--mme-space-120, 120px);
  --space-160:           var(--mme-space-160, 160px);
}

/* --------------------------------------------------------------------------
   §2  Tokens the engine cannot model — shape, glass, scrims, motion, layers
   -------------------------------------------------------------------------- */

:root {
  /* Shape — architectural, near-square */
  --r-pill: 999px;
  --r-card: 6px;
  --r-media: 4px;
  --r-btn: 4px;

  /* Glassmorphism card surfaces */
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: 1px solid rgba(255, 255, 255, 0.4);
  --glass-blur: blur(16px);
  --glass-shadow: 0 1px 2px rgba(20, 23, 22, 0.04),
                  0 12px 32px -12px rgba(20, 23, 22, 0.14);
  --glass-shadow-lift: 0 2px 4px rgba(20, 23, 22, 0.05),
                       0 28px 60px -20px rgba(20, 23, 22, 0.24);

  /* Glass on a dark ground */
  --glass-bg-dark: rgba(255, 255, 255, 0.06);
  --glass-border-dark: 1px solid rgba(255, 255, 255, 0.14);

  /* Image scrims */
  --scrim-soft: linear-gradient(to top, rgba(20, 23, 22, 0.72) 0%,
                                        rgba(20, 23, 22, 0.28) 42%,
                                        rgba(20, 23, 22, 0) 78%);
  --scrim-full: linear-gradient(to top, rgba(20, 23, 22, 0.86) 0%,
                                        rgba(20, 23, 22, 0.42) 45%,
                                        rgba(20, 23, 22, 0.14) 100%);

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-power3:   cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-inout:    cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-fast: 0.28s;
  --dur-mid:  0.6s;
  --dur-slow: 1.1s;

  /* Z-index ladder */
  --z-scrim: 5;
  --z-sticky-footer: 60;
  --z-nav: 70;
  --z-cursor: 90;
  --z-lightbox: 100;
  --z-preloader: 120;
}

/* --------------------------------------------------------------------------
   §3  Per-world theming
   A section tagged data-world="garten" / "pool" re-points the accent tokens so
   shared components (buttons, badges, pills, rules) pick up the right world
   colour without a second class name. Gartencenter is the default.
   -------------------------------------------------------------------------- */

:root,
[data-world='garten'] {
  --c-accent:      var(--c-garten);
  --c-accent-soft: var(--c-garten-soft);
  --c-accent-wash: var(--c-garten-wash);
}

[data-world='pool'] {
  --c-accent:      var(--c-pool);
  --c-accent-soft: var(--c-pool-soft);
  --c-accent-wash: var(--c-pool-wash);
}

/* --------------------------------------------------------------------------
   §4  Base
   Kept deliberately small: Elementor and Hello Elementor own the reset, and
   any widget-level setting must still beat what we declare here.
   -------------------------------------------------------------------------- */

body {
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-heading);
  text-wrap: balance;
}

:focus-visible {
  outline: 2px solid var(--c-brass-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--c-brass); color: var(--c-obsidian); }

/* --------------------------------------------------------------------------
   §4b  Neutralising Hello Elementor's reset.css
   That sheet has opinions about bare <a> and <button> that leak into every
   atomic element we build, because our containers style classes, not tags:

     a            { color: #c36 }                 <- pink card headings
     a:hover      { color: #336 }                 <- navy on hover
     button       { border: 1px solid #c36; color: #c36;
                    padding: .5rem 1rem; white-space: nowrap; ... }
     button:hover { background-color: #c36 }      <- crimson accordion bar

   .elementor a:hover is (0,1,2) so it clears reset's (0,1,1); the whole block
   sits in §4 on purpose, so every component below — .btn, .link-arrow,
   .magnet, .nav__link, §24's link states — still wins on source order.
   -------------------------------------------------------------------------- */

.elementor a,
.elementor a:link,
.elementor a:visited,
.elementor a:hover,
.elementor a:active,
.elementor a:focus       { color: inherit; text-decoration: none; }

.elementor button {
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: inherit;
  white-space: normal;
}
.elementor button:hover,
.elementor button:focus  { background: none; color: inherit; }

/* --------------------------------------------------------------------------
   §5  Layout
   `.section` padding itself is emitted by the theme's Spacing tab; these are
   the tonal variants and the editorial measure that sit on top of it.
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  /* padding-inline lives ONLY in the `container` Global Class so it stays
     editable from the panel. Declaring it here too meant a panel edit had
     nothing to override and appeared to do nothing. */
}

.shell--text { max-width: calc(var(--container-text) + var(--gutter) * 2); }

.section { position: relative; }
.section--tight { padding-block: var(--section-y-tight); }

/* Tonal steps between adjacent light sections. A run of identical canvas bands
   reads as one flat sheet; these give each section an edge without resorting to
   a hard dark inversion every other block.
     --sunk  one step down from the canvas (~3% darker warm grey)
     --wash  the active world's tint, olive in Gartencenter, cyan in Poolbau  */
.section--sunk { background: var(--c-canvas-sunk); }
.section--wash { background: var(--c-accent-wash); }
.section--dark {
  background: var(--c-obsidian);
  color: var(--c-ink-invert);
}
.section--dark .eyebrow      { color: var(--c-brass); }
.section--dark .section-lead { color: var(--c-ink-invert-muted); }
.section--dark .rule         { background: var(--c-rule-invert); }

/* --------------------------------------------------------------------------
   §6  Typography
   -------------------------------------------------------------------------- */

.display,
.h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-heading);
  text-wrap: balance;
}

.display { font-size: var(--t-display); line-height: var(--lh-display); }
.h1 { font-size: var(--t-h1); }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); letter-spacing: var(--ls-heading); }

.h4 {
  font-family: var(--font-sans);
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* One-or-two-word italic serif accent inside a display headline */
.accent-italic {
  /* The italic's right side-bearing runs tight against the next upright word */
  margin-right: 0.1em;
  /* The accent is one or two short words and reads as a single spoken beat —
     it must never break across lines. */
  white-space: nowrap;
  font-style: italic;
  font-variation-settings: "SOFT" 30, "WONK" 1;
  font-weight: 400;
  color: var(--c-accent);
}

.section--dark .accent-italic { color: var(--c-brass); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-badge);
  color: var(--c-accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.section-lead {
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  color: var(--c-ink-muted);
  max-width: 62ch;
  text-wrap: pretty;
}

.prose p {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--c-ink-muted);
  max-width: 72ch;
  text-wrap: pretty;
}
.prose p + p { margin-top: 1.15em; }

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  margin-bottom: clamp(48px, 6vw, 88px);
}

/* --------------------------------------------------------------------------
   §7  Components
   -------------------------------------------------------------------------- */

/* ---------- Buttons ---------- */

.btn {
  --btn-fg: var(--c-canvas);
  --btn-bg: var(--c-accent);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  padding: 15px 30px;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease-out-expo),
              box-shadow var(--dur-fast) var(--ease-out-expo);
  will-change: transform;
}

/* The fill wipes up from the bottom edge on hover. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-obsidian);
  transform: translateY(101%);
  transition: transform var(--dur-mid) var(--ease-out-expo);
}

.btn:hover::after { transform: translateY(0); }
.btn:hover { box-shadow: 0 14px 30px -14px rgba(20, 23, 22, 0.5); }
.btn:active { transform: scale(0.98); }

.btn__arrow {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  transition: transform var(--dur-mid) var(--ease-out-expo);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink);
  border: 1px solid var(--c-rule-strong);
}
.btn--ghost::after { background: var(--c-accent); }
.btn--ghost:hover { --btn-fg: var(--c-canvas); border-color: transparent; }

.btn--brass { --btn-bg: var(--c-brass); --btn-fg: var(--c-obsidian); }
.btn--brass::after { background: var(--c-obsidian); }
.btn--brass:hover { --btn-fg: var(--c-brass); }

.btn--ondark {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink-invert);
  border: 1px solid var(--c-rule-invert);
}
.btn--ondark::after { background: var(--c-ink-invert); }
.btn--ondark:hover { --btn-fg: var(--c-obsidian); border-color: transparent; }

/* Text link with a wipe underline */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--c-accent);
  text-decoration: none;
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-mid) var(--ease-out-expo);
}
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow svg { transition: transform var(--dur-mid) var(--ease-out-expo); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Badges / pills ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-rule);
  background: rgba(255, 255, 255, 0.6);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-badge);
  color: var(--c-ink-muted);
  white-space: nowrap;
}

.badge--brass {
  border-color: rgba(197, 168, 128, 0.55);
  background: rgba(197, 168, 128, 0.13);
  color: var(--c-brass-deep);
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  border: 1px solid currentColor;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-accent-soft);
  opacity: 0.85;
}

/* ---------- Glass card ---------- */

.glass {
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: var(--r-card);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.glass--lift { box-shadow: var(--glass-shadow-lift); }

.section--dark .glass {
  background: var(--glass-bg-dark);
  border: var(--glass-border-dark);
  box-shadow: none;
}

/* ---------- Media & rules ---------- */

.media { border-radius: var(--r-media); overflow: hidden; }

/* Gradient wash over a photo so display type stays legible on top of it. */
.media--scrim { position: relative; }
.media--scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-scrim);
  background: var(--scrim-soft);
  pointer-events: none;
}
.media--scrim-full::after { background: var(--scrim-full); }

.rule { height: 1px; background: var(--c-rule); border: 0; }

/* --------------------------------------------------------------------------
   §8  Utilities
   -------------------------------------------------------------------------- */

/* Passages the source documents mark blue = "Kandidat zum Ausblenden auf
   Mobile". Hidden below the phone breakpoint so the long-form German copy
   stays readable on a small screen; every fact they carry is either repeated
   elsewhere on the page or lives on the matching sub-page. */
@media (max-width: 760px) {
  .hide-mobile { display: none !important; }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::after,
  .btn__arrow,
  .link-arrow,
  .link-arrow svg {
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   §9  World theming by class
   Elementor v4 cannot render custom attributes, so `data-world` is unreachable
   from the panel. These classes are the exact equivalent — put `world-pool` on
   a Poolbau section and every .btn / .eyebrow / .pill / .section--wash inside
   follows, with no `-pool` component variants.
   -------------------------------------------------------------------------- */

.world-garten {
  --c-accent:      var(--c-garten);
  --c-accent-soft: var(--c-garten-soft);
  --c-accent-wash: var(--c-garten-wash);
}

.world-pool {
  --c-accent:      var(--c-pool);
  --c-accent-soft: var(--c-pool-soft);
  --c-accent-wash: var(--c-pool-wash);
}

/* --------------------------------------------------------------------------
   §10  HERO — interactive 50/50 dual video split
   Ported verbatim from hanik-homepage/css/sections.css §2. Lives here rather
   than in style props because it is almost entirely pseudo-elements, filters,
   backdrop-filter and hover state — none of which the v4 style schema has.
   The Elementor tree supplies only the structure and these class names.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  height: 100svh;
  min-height: 620px;
  display: flex;
  overflow: hidden;
  background: var(--c-obsidian);
}

/* Umbrella brand lockup sitting above both hero worlds */
.hero__umbrella {
  position: absolute;
  left: 50%;
  top: clamp(88px, 13vh, 150px);
  transform: translateX(-50%);
  z-index: 4;
  text-align: center;
  color: var(--c-ink-invert);
  pointer-events: none;
  width: min(100%, 900px);
  padding-block: 0; /* beats Elementor's 10px atomic container default */
  padding-inline: var(--gutter);
}

.hero__umbrella .eyebrow {
  /* Neutral, not brass: the umbrella lockup spans both worlds and the hero
     reads cleaner without a third accent competing with the video. */
  color: rgba(244, 242, 236, 0.8);
  justify-content: center;
  margin-bottom: var(--space-16);
}
.hero__umbrella .eyebrow::before { display: none; }

.hero__umbrella h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 0.9rem + 2.9vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.45);
}
.hero__umbrella h1 i {
  font-style: italic;
  font-variation-settings: "SOFT" 30, "WONK" 1;
  font-weight: 400;
  /* The italic serif form alone separates the two brand halves — no colour needed. */
  color: rgba(244, 242, 236, 0.9);
}

.hero__panel {
  position: relative;
  flex: 0 0 50%;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

/* Hairline seam between the two worlds */
.hero__panel + .hero__panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.22);
  z-index: 3;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Rest state is slightly desaturated; the hovered panel sharpens */
  filter: saturate(0.72) contrast(0.94) brightness(0.72);
  transition: filter var(--dur-slow) var(--ease-power3);
  will-change: filter, transform;
}

/* `:hover` as well as `.is-active` — the class is added by the GSAP hero
   module; the hover selector keeps the effect alive before that ships. */
.hero__panel:hover .hero__media video,
.hero__panel:hover .hero__media img,
.hero__panel.is-active .hero__media video,
.hero__panel.is-active .hero__media img {
  filter: saturate(1.06) contrast(1.06) brightness(0.92);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--scrim-full);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--gutter);
  padding-bottom: clamp(48px, 8vh, 96px);
  color: var(--c-ink-invert);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-badge);
}
.hero__badge i,
.hero__badge .hero__dot {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 0.85rem + 3vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: var(--ls-display);
  max-width: 15ch;
  text-wrap: balance;
}

.hero__sub {
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
  line-height: 1.55;
  color: rgba(244, 242, 236, 0.82);
  max-width: 46ch;
  text-wrap: pretty;
}

.hero__cta {
  --btn-bg: rgba(255, 255, 255, 0.12);
  --btn-fg: var(--c-ink-invert);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero__cta::after { background: var(--c-canvas); }
.hero__panel:hover .hero__cta,
.hero__panel.is-active .hero__cta { border-color: transparent; --btn-bg: var(--c-accent); }
.hero__cta:hover { --btn-fg: var(--c-obsidian); }

/* Scroll cue */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 3vh, 34px);
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(244, 242, 236, 0.7);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  pointer-events: none;
}
.hero__cue-line {
  width: 1px;
  height: 42px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(255,255,255,0.75));
  position: relative;
  overflow: hidden;
}
.hero__cue-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-brass);
  animation: cue-run 2.4s var(--ease-inout) infinite;
}
@keyframes cue-run {
  0%   { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

@media (max-width: 900px) {
  .hero {
    height: auto;
    min-height: 0;
    flex-direction: column;
    padding-top: 0;
  }
  .hero__umbrella {
    position: static;
    transform: none;
    padding-top: clamp(72px, 12vh, 108px);
    padding-bottom: clamp(20px, 4vh, 36px);
    background: var(--c-obsidian);
    width: 100%;
  }
  .hero__panel {
    flex: 0 0 auto;
    height: 68svh;
    min-height: 440px;
  }
  .hero__panel + .hero__panel::before {
    left: 0; right: 0; top: 0;
    width: auto; height: 1px;
  }
  .hero__media video,
  .hero__media img { filter: saturate(1) contrast(1.02) brightness(0.82); }
  .hero__cue { display: none; }
}

/* --------------------------------------------------------------------------
   §12  HERO — pseudo-element decoration
   `.hero__scrim` and the badge dot used to be empty containers. Elementor's
   editor gives any empty atomic container min-height:120px so it can be
   dropped into, which made the badge balloon on the canvas. Same pixels,
   no elements.
   -------------------------------------------------------------------------- */

.hero__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--scrim-full);
  pointer-events: none;
}
/* content must sit above the scrim */
.hero__content { z-index: 2; }

/* --------------------------------------------------------------------------
   §13  TRUST BAR — infinite marquee
   Ported from hanik-homepage/css/sections.css §3.
   -------------------------------------------------------------------------- */

.trust {
  position: relative;
  background: var(--c-obsidian);
  color: var(--c-ink-invert);
  overflow: hidden;
  border-block: 1px solid rgba(255, 255, 255, 0.08);
}

/* Edge fades so items dissolve rather than clip */
.trust::before,
.trust::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(60px, 10vw, 180px);
  z-index: 2;
  pointer-events: none;
}
.trust::before { left: 0;  background: linear-gradient(to right, var(--c-obsidian), transparent); }
.trust::after  { right: 0; background: linear-gradient(to left,  var(--c-obsidian), transparent); }

.marquee { will-change: transform; }

.marquee__group {
  align-items: center;
  gap: clamp(32px, 4.4vw, 76px);
  flex: none;
}

.trust__item {
  position: relative;
  align-items: center;
  gap: var(--space-16);
  flex: none;
  transition: opacity var(--dur-mid) var(--ease-power3);
}

/* The separator dot, centred in the gap. Was an empty container per gap;
   a pseudo-element on every item after the first is the same 5px dot. */
.marquee__group .trust__item + .trust__item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-1 * clamp(32px, 4.4vw, 76px) / 2 - 2.5px);
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

.trust__seal {
  flex: none;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(197, 168, 128, 0.45);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(224, 205, 176, 0.28), rgba(197, 168, 128, 0.06) 60%);
  color: var(--c-brass);
}
.trust__seal svg { width: 60%; height: 60%; }

.trust__label {
  gap: 3px;
  white-space: nowrap;
}
/* `b` / `span` in the source; e-paragraph carries these classes instead. */
.trust__label b,
.trust__label .t-name {
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.trust__label span,
.trust__label .t-meta {
  font-size: var(--t-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-badge);
  color: var(--c-brass);
}

/* Non-hovered items dim while one is under the cursor */
.trust.is-hovered .trust__item { opacity: 0.4; }
.trust.is-hovered .trust__item:hover { opacity: 1; }
/* --------------------------------------------------------------------------
   §14  USP / ÜBER UNS — pinned portrait + kinetic copy + counters
   Ported from hanik-homepage/css/sections.css §4.
   Layout properties (display/padding/width/margin) live in the Global
   Classes, per §2.5 — only what Elementor's base styles cannot touch is here.
   -------------------------------------------------------------------------- */

.usp { background: var(--c-canvas); }

.usp__grid {
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 88px);
  align-items: start;
}

@media (min-width: 1000px) {
  .usp__grid { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr); gap: clamp(56px, 6vw, 112px); }
}

.usp__media {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-canvas-sunk);
  aspect-ratio: 4 / 5;
}

/* The portrait is pinned (JS) once its own top reaches the nav offset, so it
   parks near the top of the screen and holds there for the whole story. Capping
   the height keeps the entire frame above the fold on a laptop. */
@media (min-width: 1000px) {
  .usp__media { max-height: 68svh; }
}
.usp__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.usp__media-caption {
  position: absolute;
  left: var(--space-24);
  right: var(--space-24);
  bottom: var(--space-24);
  z-index: 2;
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.75);
  border: var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
/* `b` / `span` in the source; the Elementor paragraphs carry these classes. */
.usp__media-caption b,
.usp__media-caption .cap-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.usp__media-caption span.cap-role,
.usp__media-caption > span:first-child {
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-badge);
  color: var(--c-garten-soft);
}

.usp__copy { gap: clamp(28px, 3vw, 44px); }

/* Kinetic line-by-line reveal target.
   The source used `.kinetic p + p { margin-top: .9em }`, but the atomic base
   style `.elementor .e-paragraph-base { margin: 0 }` is (0,2,0) and outranks it,
   so the rhythm comes from a column gap on the wrapper instead. */
.kinetic { gap: 0.9em; }
.kinetic p {
  font-size: clamp(1.0625rem, 0.96rem + 0.5vw, 1.375rem);
  line-height: 1.62;
  color: var(--c-ink);
  text-wrap: pretty;
}
.kinetic .k-line { display: inline; will-change: opacity, transform; }
/* Set in CSS, not inline, so the .hide-mobile rule can still win on phones. */
.kinetic .k-word { display: inline-block; }

.usp__counters {
  /* Four milestones on one line — 3+1 left an orphan hanging under the row. */
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  /* On phones a clean 2x2 beats 3+1 with a stranded fourth. */
  gap: var(--space-16) var(--space-24);
  border-top: 1px solid var(--c-rule);
}

@media (max-width: 760px) {
  .usp__counters { grid-template-columns: 1fr 1fr; }
}

.counter__num {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--c-garten);
  font-variant-numeric: tabular-nums;
  align-items: baseline;
  gap: 2px;
}
.counter__suffix { font-size: 0.5em; color: var(--c-brass-deep); }
.counter__label {
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-badge);
  color: var(--c-ink-faint);
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   §15  html-v3 strips ATTRIBUTES from inline tags
   `<span class="accent-italic">ein</span>` renders as a bare `<span>` and
   `<span class="hide-mobile">` loses its marker entirely. Bare tags survive
   (`<i>`, `<b>`, `<strong>`, `<br>`), so the italic accent is an `<i>` styled by
   element selector, and a hide-on-mobile RUN has to become its own element
   carrying the `mobhide` Global Class.
   -------------------------------------------------------------------------- */

.display i,
.h1 i, .h2 i, .h3 i,
.section-head h1 i, .section-head h2 i, .section-head h3 i {
  /* The italic's right side-bearing runs tight against the next upright word */
  margin-right: 0.1em;
  /* one or two short words, one spoken beat — never break across lines */
  white-space: nowrap;
  font-style: italic;
  font-variation-settings: "SOFT" 30, "WONK" 1;
  font-weight: 400;
  color: var(--c-accent);
}

.section--dark .display i,
.section--dark .h1 i,
.section--dark .h2 i,
.section--dark .h3 i { color: var(--c-brass); }

/* A trailing sentence that was inside a paragraph in the source becomes a
   sibling paragraph so it can carry `mobhide`. Cancelling the wrapper's row
   gap keeps it reading as one continuous block on desktop. */
.kinetic .k-cont { margin-block-start: -0.9em; }

/* Distance a pinned element parks from the top of the viewport. Set to the
   header height once a Theme Builder header exists; 40px until then. */
:root { --pin-offset: 40px; }

/* --------------------------------------------------------------------------
   §16  ZERTIFIZIERUNGEN & PARTNER
   Ported from hanik-homepage/css/sections.css §4b. Layout props live in the
   Global Classes (§2.5); everything below is uncontested.
   -------------------------------------------------------------------------- */

.certs__grid {
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 40px);
}
@media (min-width: 820px) { .certs__grid { grid-template-columns: 1fr 1fr; } }

.cert {
  gap: clamp(20px, 2.4vw, 32px);
  align-items: flex-start;
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--c-rule);
}
.section--dark .cert {
  background: var(--glass-bg-dark);
  border: var(--glass-border-dark);
}

.cert__logo {
  flex: none;
  aspect-ratio: 2 / 1;          /* both partner marks are wide lockups */
  place-items: center;
}
/* Only on a dark ground do the marks need a plate to stay legible.
   Two classes = (0,2,0), which ties the atomic base padding and wins on order
   because this stylesheet loads after base-desktop.css. */
.section--dark .cert__logo {
  padding: clamp(12px, 1.2vw, 18px);
  border-radius: var(--r-card);
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.8);
}
.cert__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Without min-width:0 the body refuses to shrink below its longest unbreakable
   run — the nowrap badges were forcing the card wider than the phone viewport. */
.cert__body { flex: 1 1 auto; }

/* On a phone the side-by-side lockup leaves ~210px for the text. Stack instead. */
@media (max-width: 620px) {
  .cert { flex-direction: column; gap: var(--space-16); }
  .cert__logo { width: clamp(150px, 44vw, 200px); }
  .cert__meta .badge { white-space: normal; }
}

.cert__body h3,
.cert__body .cert-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem);
  font-weight: 600;
  letter-spacing: var(--ls-heading);
}
.cert__body p {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--c-ink-muted);
}
.section--dark .cert__body p { color: var(--c-ink-invert-muted); }

.cert__meta { flex-wrap: wrap; gap: 8px; }
.section--dark .cert__meta .badge {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--c-ink-invert-muted);
}

/* --------------------------------------------------------------------------
   §17  HSCROLL — pinned horizontal service rows
   Ported from hanik-homepage/css/sections.css §5. Layout props live in the
   Global Classes (§2.5); the rest is uncontested.

   NOTE: this track is NOT a native scroller — vertical scroll drives it via
   ScrollTrigger. So it must NOT carry `lenis-prevent`; that class is only for
   real `overflow:auto` scrollers, and here it would block the very gesture the
   animation reads.
   -------------------------------------------------------------------------- */

.hscroll {
  position: relative;
  overflow: hidden;
  /* Pinned sections hold the viewport, so the head + track have to fit inside
     one screen. Centre the stack and pay for the padding out of the leftover. */
  min-height: 100svh;
  justify-content: center;
}

/* While pinned the whole beat has to survive on one screen, so the headline and
   the cards are additionally capped against viewport height — a 1440x700 laptop
   would otherwise cut the card bodies off. */
@media (min-width: 860px) {
  .hscroll .section-head { gap: clamp(12px, 1.6svh, 24px); }
  .hscroll .section-head .h1 { font-size: min(var(--t-h1), 7.4svh); }
  .hscroll .section-lead { font-size: min(var(--t-lead), 2.4svh); }
}

/* On phones only the card strip is pinned, so the section itself flows normally
   and the cards get the full screen height to themselves. */
@media (max-width: 859px) {
  .hscroll { min-height: 0; display: block; }
  .scard { width: clamp(240px, 70vw, 320px); }
  .scard__media { max-height: 38svh; }
}

.hscroll__head {
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-32);
  flex-wrap: wrap;
}

.hscroll__progress {
  flex: none;
  height: 2px;
  background: var(--c-rule);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
/* The fill is a pseudo-element driven by a custom property, so the progress
   track needs no empty child container (which the editor would give a 120px
   placeholder). GSAP animates --hp directly. */
.hscroll__progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-accent);
  transform: scaleX(var(--hp, 0));
  transform-origin: 0 50%;
}

.hscroll__viewport { overflow: hidden; }

.hscroll__track {
  gap: clamp(20px, 2.4vw, 34px);
  will-change: transform;
}

/* Gartencenter card — 4 up */
.scard {
  position: relative;
  flex: none;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-canvas);
  border: 1px solid var(--c-rule);
  transform-style: preserve-3d;
  transition: box-shadow var(--dur-mid) var(--ease-out-expo),
              border-color var(--dur-mid) var(--ease-out-expo);
  will-change: transform;
}
@media (hover: hover) {
  .scard:hover { box-shadow: var(--glass-shadow-lift); border-color: transparent; }
}

.scard__media {
  position: relative;
  flex: none;
  aspect-ratio: 4 / 3;
  max-height: 46svh;
  overflow: hidden;
  background: var(--c-canvas-sunk);
}
.scard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out-expo);
  will-change: transform;
}
@media (hover: hover) {
  .scard:hover .scard__media img { transform: scale(1.05); }
}

.scard__index {
  position: absolute;
  top: var(--space-16);
  left: var(--space-16);
  z-index: 2;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--ls-badge);
  color: var(--c-ink-invert);
  border-radius: var(--r-pill);
  background: rgba(20, 23, 22, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.scard__body {
  flex: 1;
  gap: clamp(8px, 1.1svh, 14px);
  transform: translateZ(24px);
}
.scard__body h3,
.scard__body .scard-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  font-weight: 600;
  letter-spacing: var(--ls-heading);
}
.scard__body p {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--c-ink-muted);
}
.scard__body .link-arrow { margin-top: auto; align-self: flex-start; }

.hscroll__hint {
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-badge);
  color: var(--c-ink-faint);
  align-items: center;
  gap: 10px;
}
.section--dark .hscroll__hint { color: var(--c-ink-invert-muted); }

/* These two absorbed the .shell wrapper that used to sit around them —
   one element instead of two. max-width/margin-inline are uncontested, so
   the stylesheet can own them; the gutter had to move into the Global Class
   because padding is (0,2,0) and would have fought .shell's padding. */
.hscroll__head,
.hscroll__hint {
  max-width: var(--container);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   §18  POOLBAU feature cards — 3 large, dark, scrimmed
   Ported from hanik-homepage/css/sections.css §5b.
   -------------------------------------------------------------------------- */

.fcard {
  position: relative;
  flex: none;
  min-height: min(clamp(420px, 46vw, 580px), 58svh);
  border-radius: var(--r-card);
  overflow: hidden;
  align-items: flex-end;
  isolation: isolate;
  background: var(--c-obsidian);
}
.fcard__media { position: absolute; inset: 0; z-index: 0; }
.fcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out-expo);
  will-change: transform;
}
@media (hover: hover) { .fcard:hover .fcard__media img { transform: scale(1.045); } }

/* the scrim is a pseudo-element, so the card needs no empty overlay child */
.fcard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--scrim-full);
}
.fcard__body {
  position: relative;
  z-index: 2;
  color: var(--c-ink-invert);
  gap: var(--space-16);
}
.fcard__body h3,
.fcard__body .fcard-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.4rem);
  font-weight: 600;
  letter-spacing: var(--ls-display);
  line-height: 1.08;
  max-width: 16ch;
}
.fcard__body p {
  font-size: var(--t-small);
  line-height: 1.6;
  color: rgba(244, 242, 236, 0.82);
  max-width: 44ch;
}
.fcard__pills { flex-wrap: wrap; gap: 8px; }
.fcard__pills .pill {
  color: rgba(244, 242, 236, 0.85);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fcard .link-arrow { color: var(--c-brass); align-self: flex-start; }

.hscroll__foot { display: flex; justify-content: center; margin-top: var(--space-24); }
@media (max-width: 859px) { .fcard { width: clamp(260px, 80vw, 380px); min-height: min(56svh, 480px); } }

/* --------------------------------------------------------------------------
   §19  BERATUNG — pricing cards + credit badge
   Ported from hanik-homepage/css/sections.css §6.
   The checklist ticks are a masked pseudo-element rather than an e-svg per
   row: three paragraphs instead of three containers + three svg widgets.
   -------------------------------------------------------------------------- */

.pricing__grid { grid-template-columns: 1fr; gap: clamp(20px, 2.4vw, 32px); }
@media (min-width: 860px) { .pricing__grid { grid-template-columns: 1fr 1fr; } }

.pcard {
  position: relative;
  gap: var(--space-24);
  border-radius: var(--r-card);
  overflow: hidden;
}
/* the accent rule down the left edge */
.pcard::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--c-accent);
}

.pcard__head { align-items: flex-start; gap: var(--space-12); }
.pcard__head h3,
.pcard__head .pcard-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 2rem);
  font-weight: 600;
  letter-spacing: var(--ls-heading);
}

.pcard__price {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1.9rem + 3vw, 4.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}
.pcard__price small {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-badge);
  color: var(--c-ink-faint);
  margin-left: 10px;
}

.pcard__list { gap: var(--space-12); }
.pcard__list .tick {
  position: relative;
  padding-left: 27px;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--c-ink-muted);
}
.pcard__list .tick::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 15px;
  height: 15px;
  background: var(--c-accent-soft);
  -webkit-mask: var(--tick-mask) center / contain no-repeat;
  mask: var(--tick-mask) center / contain no-repeat;
}
:root {
  --tick-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><path d="m3 8.4 3.2 3.2L13 4.8" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.pcard .btn { align-self: flex-start; margin-top: auto; }

/* Animated brass credit badge */
.credit-badge {
  position: relative;
  align-items: center;
  gap: var(--space-16);
  border-radius: var(--r-card);
  border: 1px solid rgba(197, 168, 128, 0.5);
  background: linear-gradient(100deg,
              rgba(197, 168, 128, 0.16),
              rgba(197, 168, 128, 0.05) 55%,
              rgba(197, 168, 128, 0.16));
  overflow: hidden;
}
/* Brass sheen sweep */
.credit-badge::after {
  content: "";
  position: absolute;
  top: -50%; bottom: -50%;
  width: 42%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  animation: sheen 5.5s var(--ease-inout) infinite;
  pointer-events: none;
}
@keyframes sheen {
  0%, 62%   { left: -60%; }
  92%, 100% { left: 130%; }
}

.credit-badge__mark {
  flex: none;
  border-radius: 50%;
  place-items: center;
  background: var(--c-brass);
  color: var(--c-obsidian);
}
.credit-badge__mark svg { width: 55%; height: 55%; }

.credit-badge .cb-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--c-obsidian);
}
.credit-badge .cb-sub {
  font-size: var(--t-small);
  color: var(--c-ink-muted);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   §20  VORHER / NACHHER
   Ported from sections.css §7. The divider line and the round knob are both
   pseudo-elements on the stage, driven by --ba, so each slider needs two
   fewer containers. Position comes from --ba (a percentage) set by the
   section script.
   -------------------------------------------------------------------------- */

.ba__grid { grid-template-columns: 1fr; gap: clamp(28px, 3.4vw, 48px); }
@media (min-width: 980px) { .ba__grid { grid-template-columns: 1fr 1fr; } }

.ba { gap: var(--space-16); }

.ba__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-canvas-sunk);
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.ba__stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* The "before" frame sits on top, clipped to everything left of the handle, so
   the handle reads left = Vorher, right = Nachher. */
.ba__layer-top {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: clip-path;
  clip-path: inset(0 calc(100% - var(--ba, 50%)) 0 0);
}

/* divider line */
.ba__stage::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ba, 50%);
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(20, 23, 22, 0.16), 0 0 24px rgba(0, 0, 0, 0.35);
  z-index: 3;
  pointer-events: none;
}
/* round knob */
.ba__stage::after {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--ba, 50%);
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--c-canvas) var(--ba-knob) center / 18px 18px no-repeat;
  box-shadow: 0 8px 26px -8px rgba(0, 0, 0, 0.6);
  z-index: 4;
  pointer-events: none;
  transition: width var(--dur-fast) var(--ease-out-expo),
              height var(--dur-fast) var(--ease-out-expo);
}
.ba__stage:hover::after { width: 58px; height: 58px; }
:root {
  --ba-knob: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none"><path d="M7 4 3 9l4 5M11 4l4 5-4 5" stroke="%23141716" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.ba__stage:focus-visible { outline: 2px solid var(--c-brass-deep); outline-offset: 3px; }

.ba__tag {
  position: absolute;
  top: var(--space-16);
  z-index: 2;
  border-radius: var(--r-pill);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-badge);
  background: rgba(20, 23, 22, 0.55);
  color: var(--c-ink-invert);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}
.ba__tag--before { left: var(--space-16); }
.ba__tag--after  { right: var(--space-16); background: rgba(197, 168, 128, 0.9); color: var(--c-obsidian); }

.ba__caption { gap: 2px; }
.ba__caption .ba-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ba__caption .ba-sub { font-size: var(--t-small); color: var(--c-ink-muted); line-height: 1.5; }

/* --------------------------------------------------------------------------
   §21  BENTO media wall — sections.css §8
   -------------------------------------------------------------------------- */

.bento { gap: clamp(10px, 1.2vw, 18px); }

/* Horizontal bands rather than a span-based grid: mixed aspect ratios in one
   grid leave holes, whereas a fixed-height row always tiles flush. */
.bento__row { gap: clamp(10px, 1.2vw, 18px); height: clamp(260px, 30vw, 430px); }
.bento__row--tall { height: clamp(300px, 34vw, 500px); }

.tile {
  position: relative;
  flex: 1 1 0;
  height: 100%;
  overflow: hidden;
  border-radius: var(--r-media);
  background: var(--c-canvas-sunk);
  cursor: pointer;
  isolation: isolate;
}
/* 9:16 short-form keeps its true shape and lets the row set its height */
.tile--reel  { flex: 0 0 auto; aspect-ratio: 9 / 16; }
.tile--grow2 { flex: 2 1 0; }

.tile img,
.tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out-expo);
  will-change: transform;
}
.tile:hover img,
.tile:hover video { transform: scale(1.05); }

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 23, 22, 0.55), rgba(20, 23, 22, 0) 55%);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-power3);
  pointer-events: none;
}
.tile:hover::after { opacity: 1; }

.tile__meta {
  position: absolute;
  left: var(--space-16);
  bottom: var(--space-16);
  z-index: 2;
  color: var(--c-ink-invert);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-badge);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-mid) var(--ease-power3),
              transform var(--dur-mid) var(--ease-power3);
  pointer-events: none;
}
.tile:hover .tile__meta { opacity: 1; transform: translateY(0); }

@media (max-width: 760px) {
  .bento__row { display: block; height: auto; columns: 2; column-gap: clamp(10px, 1.2vw, 18px); }
  .tile { height: auto; aspect-ratio: 3 / 4; break-inside: avoid; margin-bottom: clamp(10px, 1.2vw, 18px); }
  .tile--reel { aspect-ratio: 9 / 16; }
}

.insta__foot { flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-24); }

/* Scoped lightbox, created by the section script — no elements in the tree. */
.hanik-lb {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 64px);
  background: rgba(10, 12, 11, 0.94);
  backdrop-filter: blur(8px);
}
.hanik-lb img, .hanik-lb video {
  max-width: 100%; max-height: 88vh; width: auto;
  border-radius: var(--r-media);
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.9);
}
.hanik-lb__x {
  position: absolute; top: clamp(16px, 3vw, 36px); right: clamp(16px, 3vw, 36px);
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--c-rule-invert); background: none;
  color: var(--c-ink-invert); font-size: 22px; line-height: 1; cursor: pointer;
}

/* --------------------------------------------------------------------------
   §22  REGION — accordion + SEO prose — sections.css §9
   The +/x sign is a masked pseudo-element on the trigger, so each of the seven
   rows needs one fewer container and one fewer svg widget.
   -------------------------------------------------------------------------- */

.region__grid { grid-template-columns: 1fr; gap: clamp(40px, 5vw, 80px); align-items: start; }
@media (min-width: 1000px) { .region__grid { grid-template-columns: 0.9fr 1.1fr; } }

.region__row { border-top: 1px solid var(--c-rule-invert); }
.region__row:last-child { border-bottom: 1px solid var(--c-rule-invert); }

.region__trigger {
  position: relative;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  text-align: left;
  color: var(--c-ink-invert);
  cursor: pointer;
  transition: color var(--dur-fast);
}
.region__trigger:hover { color: var(--c-brass); }

.region__idx {
  flex: none;
  width: 2.2em;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--ls-badge);
  color: var(--c-ink-invert-muted);
  font-variant-numeric: tabular-nums;
}
.region__name {
  flex: 1;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2.1rem);
  font-weight: 600;
  letter-spacing: var(--ls-display);
  line-height: 1.1;
}
/* the round + sign */
.region__trigger::after {
  content: "";
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--c-rule-invert);
  background: var(--sign-mask) center / 14px 14px no-repeat;
  transition: transform var(--dur-mid) var(--ease-out-expo),
              background-color var(--dur-fast), border-color var(--dur-fast);
}
.region__row.is-open .region__trigger::after {
  transform: rotate(45deg);
  background-color: var(--c-brass);
  border-color: transparent;
}
:root {
  --sign-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="none"><path d="M7 1v12M1 7h12" stroke="%23f4f2ec" stroke-width="1.4" stroke-linecap="round"/></svg>');
}

.region__panel { overflow: hidden; height: 0; transition: height var(--dur-mid) var(--ease-out-expo); }
.region__panel-inner {
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--c-ink-invert-muted);
  max-width: 56ch;
}
.region__tags { flex-wrap: wrap; gap: 8px; }
.region__tags .badge {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--c-ink-invert-muted);
}

.seo__prose { gap: 1.15em; }
.seo__prose p { color: var(--c-ink-invert-muted); max-width: 68ch; font-size: var(--t-body); line-height: var(--lh-body); }
/* a run split out of a paragraph so it can carry mobhide */
.seo__prose .cont { margin-block-start: -1.15em; }

/* --------------------------------------------------------------------------
   §23  ABSCHLUSS-CTA — sections.css §10
   -------------------------------------------------------------------------- */

.cta-final { background: var(--c-canvas); }
.cta-final__head { text-align: center; }
.cta-final__head .eyebrow { justify-content: center; }
.cta-final__head .eyebrow::before { display: none; }
.cta-final__head .section-lead { margin-inline: auto; }

.cta-final__pair { grid-template-columns: 1fr; gap: clamp(16px, 2vw, 26px); }
@media (min-width: 780px) { .cta-final__pair { grid-template-columns: 1fr 1fr; } }

.magnet {
  position: relative;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  border-radius: var(--r-card);
  overflow: hidden;
  isolation: isolate;
  background: var(--c-accent);
  color: var(--c-ink-invert);
  text-decoration: none;
  transition: transform var(--dur-mid) var(--ease-out-expo),
              box-shadow var(--dur-mid) var(--ease-out-expo);
}
.magnet:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(20, 23, 22, 0.6); }
.magnet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-obsidian);
  transform: translateY(101%);
  transition: transform var(--dur-mid) var(--ease-out-expo);
}
.magnet:hover::before { transform: translateY(0); }
/* the round arrow badge, so no icon element is needed */
.magnet::after {
  content: "";
  flex: none;
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: var(--magnet-arrow) center / 20px 20px no-repeat;
  transition: transform var(--dur-mid) var(--ease-out-expo);
}
.magnet:hover::after { transform: translateX(4px); }
:root {
  --magnet-arrow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="M2 10h15M12 5l5 5-5 5" stroke="%23f4f2ec" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.magnet__label { gap: 8px; }
.magnet__label .m-kicker {
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-badge);
  opacity: 0.75;
}
.magnet__label .m-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.9rem);
  font-weight: 600;
  letter-spacing: var(--ls-heading);
  line-height: 1.15;
}

/* --------------------------------------------------------------------------
   §24  LINK STATES on interactive components
   Every CTA here is an `e-flexbox` with `tag: "a"`. A bare `.btn { color: … }`
   colours the anchor in the default state only — the moment the browser
   applies its own :link / :visited / :hover colouring, the label turns the
   UA blue-purple, which is what was showing on hovered buttons and magnets.
   Anchors need their states declared explicitly, and the inner text widgets
   need `color: inherit` so they follow the anchor rather than keeping a
   stale computed colour of their own.
   -------------------------------------------------------------------------- */

.btn,
.btn:link,
.btn:visited,
.btn:hover,
.btn:active,
.btn:focus,
.btn:focus-visible          { color: var(--btn-fg); text-decoration: none; }
.btn > *,
.btn .e-paragraph-base,
.btn .btn__arrow            { color: inherit; }

.link-arrow,
.link-arrow:link,
.link-arrow:visited,
.link-arrow:hover,
.link-arrow:active,
.link-arrow:focus,
.link-arrow:focus-visible   { color: var(--c-accent); text-decoration: none; }
.link-arrow > *,
.link-arrow .e-paragraph-base { color: inherit; }

/* the Poolbau cards sit on a dark scrim, where the accent would disappear */
.fcard .link-arrow,
.fcard .link-arrow:link,
.fcard .link-arrow:visited,
.fcard .link-arrow:hover,
.fcard .link-arrow:focus-visible { color: var(--c-brass); }

.magnet,
.magnet:link,
.magnet:visited,
.magnet:hover,
.magnet:active,
.magnet:focus,
.magnet:focus-visible       { color: var(--c-ink-invert); text-decoration: none; }
.magnet > *,
.magnet .m-kicker,
.magnet .m-title            { color: inherit; }

/* hero CTA keeps the button token, but on hover the fill inverts to canvas */
.hero__cta:hover,
.hero__cta:focus-visible    { color: var(--c-obsidian); }
/* --------------------------------------------------------------------------
   §25  NAV — Theme Builder header
   Ported from hanik-homepage/css/base.css. The burger's three bars are drawn
   with the button's own background plus two pseudo-elements, so the header
   needs no empty child containers.
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  color: var(--c-ink-invert);
  transition: background var(--dur-mid) var(--ease-power3),
              color var(--dur-mid) var(--ease-power3),
              box-shadow var(--dur-mid) var(--ease-power3),
              transform var(--dur-mid) var(--ease-power3);
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(20, 23, 22, 0.55), rgba(20, 23, 22, 0));
  opacity: 1;
  transition: opacity var(--dur-mid) var(--ease-power3);
}

/* Solid state once the hero is behind us */
.nav.is-pinned {
  color: var(--c-ink);
  background: rgba(248, 247, 244, 0.82);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 1px 0 var(--c-rule);
}
.nav.is-pinned::before { opacity: 0; }
.nav.is-hidden { transform: translateY(-100%); }

.nav__brand { position: relative; flex: none; line-height: 0; }

/* The full lockup, matching the footer. Two cuts cross-fade with the nav state:
   white wordmark while it floats over the dark hero, black once it pins onto
   the light canvas. */
.nav__logo {
  display: block;
  height: clamp(40px, 3.9vw, 58px);
  width: auto;
  transition: opacity var(--dur-mid) var(--ease-power3),
              filter var(--dur-mid) var(--ease-power3);
}
.nav__logo--ondark  { filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.55)); }
.nav__logo--onlight { position: absolute; left: 0; top: 0; opacity: 0; }
.nav.is-pinned .nav__logo--ondark  { opacity: 0; }
.nav.is-pinned .nav__logo--onlight { opacity: 1; }

@media (max-width: 560px) { .nav__logo { height: 46px; } }

.nav__links { align-items: center; gap: clamp(18px, 2.2vw, 34px); font-size: var(--t-small); font-weight: 500; }
.nav__links a { position: relative; padding-block: 4px; color: inherit; text-decoration: none; }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform var(--dur-mid) var(--ease-out-expo);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

.nav__cta { display: none; }
@media (min-width: 1080px) { .nav__cta { display: inline-flex; } }

/* ---------- Burger: three bars, no child elements ---------- */
.nav__burger {
  display: none;
  position: relative;
  flex: none;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: none;
  cursor: pointer;
  /* the middle bar */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 1.5px;
  transition: background-size var(--dur-fast) linear;
}
.nav__burger::before,
.nav__burger::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1.5px;
  margin-left: -9px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-mid) var(--ease-out-expo);
}
.nav__burger::before { top: 15px; }
.nav__burger::after  { bottom: 15px; }

body.menu-open .nav__burger { background-size: 0 1.5px; }
body.menu-open .nav__burger::before { transform: translateY(6px) rotate(45deg); }
body.menu-open .nav__burger::after  { transform: translateY(-6px) rotate(-45deg); }

/* While the panel is open the nav always sits on the dark overlay */
body.menu-open .nav { color: var(--c-ink-invert); background: transparent; box-shadow: none; }
body.menu-open .nav .nav__logo--onlight { opacity: 0; }
body.menu-open .nav .nav__logo--ondark  { opacity: 1; }

/* ---------- Mobile menu ---------- */
.mmenu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  background: var(--c-obsidian);
  color: var(--c-ink-invert);
  justify-content: center;
  gap: var(--space-32);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-mid) var(--ease-power3), visibility var(--dur-mid);
}
.mmenu.is-open { opacity: 1; visibility: visible; }

.mmenu__links a {
  display: flex;
  align-items: baseline;
  gap: var(--space-16);
  padding-block: clamp(14px, 2.2vh, 22px);
  border-bottom: 1px solid var(--c-rule-invert);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.1rem + 3.4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: var(--ls-display);
  line-height: 1.05;
  color: inherit;
  text-decoration: none;
}
.mmenu__links { counter-reset: mm; }
.mmenu__links a::before {
  counter-increment: mm;
  content: counter(mm, decimal-leading-zero);
}
.mmenu__links a::before,
.mmenu__links a i {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--ls-badge);
  color: var(--c-brass);
  font-variant-numeric: tabular-nums;
}
.mmenu__foot .btn { width: 100%; }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
}
@media (min-width: 901px) { .mmenu { display: none; } }

/* The page sits under a fixed header; give the anchors somewhere to land. */
:root { --nav-h: clamp(72px, 8vw, 110px); }
[id] { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* --------------------------------------------------------------------------
   §26  NAV layout restored for custom markup
   These declarations previously lived in the `gc-nav*` Global Classes. The
   header is a single HTML widget now, so they belong here with the rest of
   the nav CSS — and there is no atomic base style competing for them.
   -------------------------------------------------------------------------- */

.nav {
  display: flex;
  width: 100%;
  padding: clamp(16px, 2vw, 26px) var(--gutter);
}

.nav__brand { display: block; }

.nav__links { display: flex; }

.nav__burger { width: 46px; height: 46px; padding: 0; }

.mmenu {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: calc(var(--gutter) + 88px) var(--gutter) var(--gutter);
}

.mmenu__links { display: flex; flex-direction: column; }

.mmenu__foot { display: flex; flex-direction: column; gap: var(--space-12); }

/* The counter was a workaround for html-v3 stripping nested tags; the raw
   markup carries real <i>01</i> elements, so the generated one would double up. */
.mmenu__links a::before { content: none; }
/* --------------------------------------------------------------------------
   §27  NAV responsive — must stay last
   Re-stated after §26 so the breakpoints win. If you add more nav layout
   rules, add them ABOVE this block, never below it.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .nav__links  { display: none; }
  .nav__burger { display: block; }
}

@media (min-width: 901px) {
  .mmenu { display: none; }
}

@media (max-width: 560px) {
  .nav__logo { height: 40px; }
  .nav { padding-inline: var(--space-16); gap: var(--space-12); }
}

/* Nothing in the bar may push the page wider than the screen. */
.nav { max-width: 100vw; box-sizing: border-box; }
.nav__brand { min-width: 0; }
/* --------------------------------------------------------------------------
   §28  NAV specificity fixes  (keep below §27)
   The header template renders inside `<div class="elementor elementor-364">`,
   so the `btn` Global Class emits `.elementor .btn{display:inline-flex}` at
   (0,2,0) and out-ranked `.nav__cta{display:none}` at (0,1,0) — the Kontakt
   button could not be hidden on phones. Two classes match that weight, and
   this stylesheet loads after the generated one, so it wins the tie.
   -------------------------------------------------------------------------- */

.nav .nav__cta { display: none; }
@media (min-width: 1080px) { .nav .nav__cta { display: inline-flex; } }

/* The burger is a <button>: strip the UA chrome explicitly rather than
   relying on `background: none` alone. */
.nav .nav__burger {
  -webkit-appearance: none;
  appearance: none;
  color: inherit;
  background-color: transparent;
  border-color: currentColor;
  -webkit-tap-highlight-color: transparent;
}
/* --------------------------------------------------------------------------
   §29  HERO mobile — solid ground, panels stacked, full width
   Below 900px the hero stops being a 50/50 split: the umbrella lockup sits on
   a solid obsidian band and each world becomes its own full-width panel with
   its own video underneath. Scoped to `.elementor` to out-rank the atomic
   base styles, which own flex-direction and width.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .elementor .hero {
    flex-direction: column;
    height: auto;
    min-height: 0;
    width: 100%;
    padding-top: 0;
    background: var(--c-obsidian);
  }

  .elementor .hero__umbrella {
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    background: var(--c-obsidian);
    padding: clamp(72px, 12vh, 108px) var(--gutter) clamp(20px, 4vh, 36px);
    text-align: center;
  }

  .elementor .hero__panel {
    flex: 0 0 auto;
    width: 100%;
    /* Kept in step with the earlier .hero__panel rule in this same
       breakpoint - this one sits later in the file and was silently
       winning, so editing only the first had no effect on tablet. */
    height: 68svh;
    min-height: 440px;
  }

  /* the seam between the two worlds runs across, not down */
  .hero__panel + .hero__panel::before {
    left: 0; right: 0; top: 0;
    width: auto; height: 1px;
  }

  .elementor .hero__cue { display: none; }
}

/* Nothing may widen the document. The source guards this on <html>; the same
   guard here keeps a stray fixed or 100vw child from adding a scrollbar. */
html, body { overflow-x: clip; }
/* --------------------------------------------------------------------------
   §30  HERO mobile scrim
   Stacked full-width panels put the copy over the brightest part of the
   footage, where --scrim-full (0.14 at the top) leaves white text washed out.
   Lift the whole gradient on phones: still clearly a photo, but the badge,
   headline and sub all clear contrast. Two classes to out-rank the base rule.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .elementor .hero__panel::after {
    background: linear-gradient(to top,
                rgba(20, 23, 22, 0.92) 0%,
                rgba(20, 23, 22, 0.66) 45%,
                rgba(20, 23, 22, 0.38) 100%);
  }
}
/* --------------------------------------------------------------------------
   §31  Script-only html widgets take no space
   -------------------------------------------------------------------------- */

.elementor-element-trust-js,
.elementor-element-usp-js,
.elementor-element-gc-js,
.elementor-element-pb-js,
.elementor-element-ba-js { display: none; }

/* The trust bar centres its row regardless of what else sits in the section. */
.elementor .trust { display: flex; flex-direction: column; justify-content: center; }
.elementor .trust__item { align-items: center; }
/* --------------------------------------------------------------------------
   §32  POOLBAU HERO — scrubbed process video
   Ported from hanik-homepage/css/pool.css. The grain, the scrim and the
   progress fill are all pseudo-elements, so the section carries no empty
   decorative containers. Phase numbers come from a CSS counter because
   html-v3 strips tags nested inside another tag.
   -------------------------------------------------------------------------- */

.phero {
  position: relative;
  min-height: 100svh;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-obsidian);
  isolation: isolate;
}

/* scrim: heavy at the foot where the copy sits, light across the middle so the
   pool stays readable, mild at the top behind the nav */
.phero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
              rgba(20, 23, 22, 0.90) 0%,  rgba(20, 23, 22, 0.62) 26%,
              rgba(20, 23, 22, 0.22) 58%, rgba(20, 23, 22, 0.48) 100%);
}

.phero__media { position: absolute; inset: 0; z-index: 0; }
.phero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1) contrast(1.03) brightness(0.76);
  will-change: transform;
}

/* Very fine grain keeps a dark, heavily-scrimmed video from banding */
.phero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.phero__inner {
  position: relative;
  z-index: 2;
  color: var(--c-ink-invert);
  gap: var(--space-24);
  /* was inherited from `shell`, which is no longer on this element because
     the two classes fought over padding and `shell` won by emit order */
  max-width: var(--container);
  margin-inline: auto;
  align-items: flex-start;
}

/* Hero text stays neutral, matching the Startseite: no brass, no pool-blue
   accent word. Both sat murky against the darkened footage, and the italic
   serif form already separates the accent word without needing colour. */
.phero__inner .eyebrow { color: rgba(244, 242, 236, 0.8); }
.phero__title i { color: rgba(244, 242, 236, 0.9); }

.phero__title {
  max-width: 14ch;
  text-shadow: 0 2px 60px rgba(0, 0, 0, 0.5);
}

.phero__sub {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: rgba(244, 242, 236, 0.86);
  max-width: 56ch;
  text-wrap: pretty;
}

.phero__actions { flex-wrap: wrap; gap: var(--space-16); }

/* Phase readout — advances as the process video scrubs */
.phases {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(34px, 5vh, 62px);
  z-index: 3;
  gap: clamp(14px, 2.4vw, 40px);
  max-width: var(--container);
  margin-inline: auto;
  overflow-x: auto;
  scrollbar-width: none;
  counter-reset: ph;
}
.phases::-webkit-scrollbar { display: none; }

.phases__item {
  align-items: baseline;
  gap: 9px;
  flex: none;
  color: rgba(244, 242, 236, 0.42);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-badge);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  min-width: clamp(110px, 15vw, 190px);
  transition: color var(--dur-mid) var(--ease-power3),
              border-color var(--dur-mid) var(--ease-power3);
}
/* the 01..05 numerals, generated so each item stays a single element */
.phases__item::before {
  counter-increment: ph;
  content: counter(ph, decimal-leading-zero);
  color: var(--c-brass);
  font-variant-numeric: tabular-nums;
  margin-right: 9px;
}
.phases__item.is-active { color: var(--c-ink-invert); border-color: var(--c-brass); }

.phero__progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.phero__progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-brass);
  transform: scaleX(var(--hp, 0));
  transform-origin: 0 50%;
}

@media (max-width: 760px) {
  .phases { gap: 14px; }
  .phases__item { min-width: 120px; }
}

/* --------------------------------------------------------------------------
   §33  KONFIGURATOR-EINSTIEG
   Ported from hanik-homepage/css/pool.css. The 01..04 numerals are a CSS
   counter, so each step stays a single element (html-v3 strips tags nested
   inside another tag).

   NOTE: this section carries `section--tight` INSTEAD of `section`, not as well
   as it. Two Global Classes that both declare padding fight, and the winner is
   emit order rather than intent — which is what flattened the Poolbau hero.
   `section--tight` therefore owns its own rhythm outright.
   -------------------------------------------------------------------------- */

.konf__card {
  position: relative;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 64px);
  border-radius: var(--r-card);
  overflow: hidden;
}
@media (min-width: 900px) {
  .konf__card { grid-template-columns: 1.15fr 0.85fr; align-items: center; }
}
.konf__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 140% at 100% 0%, rgba(27, 122, 154, 0.14), transparent 60%);
  pointer-events: none;
}

.konf__body { align-items: flex-start; gap: var(--space-16); position: relative; }

.konf__steps { gap: var(--space-12); position: relative; counter-reset: kf; }
.konf__steps .konf-step {
  align-items: center;
  gap: var(--space-16);
  border-radius: var(--r-btn);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--c-rule);
  font-size: var(--t-small);
  font-weight: 500;
}
.konf__steps .konf-step::before {
  counter-increment: kf;
  content: counter(kf, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--c-pool-soft);
  font-variant-numeric: tabular-nums;
  margin-right: var(--space-16);
}

/* --------------------------------------------------------------------------
   §34  POOLARTEN — two feature cards + the three biological systems
   Ported from sections.css (.art*) and pool.css (.bio, .bcard*). The source
   wraps each card in an <article> around an <a>; the anchor carries both
   classes here instead, which is one fewer element per card.
   -------------------------------------------------------------------------- */

.arts { grid-template-columns: 1fr; gap: clamp(20px, 2.4vw, 32px); }
@media (min-width: 880px) { .arts { grid-template-columns: 1fr 1fr; } }

.art__link {
  /* Both rows were `auto`, so the grid split leftover height between them and
     the media row grew on cards with shorter copy — pushing those headings out
     of line. Pinning the media to its content and letting the body absorb the
     slack keeps every heading on one baseline. */
  grid-template-rows: auto 1fr;
  height: 100%;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-canvas);
  border: 1px solid var(--c-rule);
  transition: box-shadow var(--dur-mid) var(--ease-out-expo),
              border-color var(--dur-mid) var(--ease-out-expo),
              transform var(--dur-mid) var(--ease-out-expo);
}
@media (hover: hover) {
  .art__link:hover { box-shadow: var(--glass-shadow-lift); border-color: transparent; transform: translateY(-3px); }
}

.art__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-canvas-sunk); }
.art__media img { width: 100%; height: 100%; object-fit: cover;
                  transition: transform var(--dur-slow) var(--ease-out-expo); }
@media (hover: hover) { .art__link:hover .art__media img { transform: scale(1.05); } }

/* Overlay on the image, not a line in the body: in the body a longer tag wraps
   and shoves that card's heading out of line with its neighbour. */
.art__tag, .bcard__flag {
  position: absolute;
  top: var(--space-16);
  left: var(--space-16);
  z-index: 2;
  border-radius: var(--r-pill);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-badge);
  white-space: nowrap;
}
.art__tag { color: var(--c-ink-invert); background: rgba(20, 23, 22, 0.5);
            backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.bcard__flag { background: var(--c-brass); color: var(--c-obsidian); top: var(--space-12); left: var(--space-12); }

.art__body { align-items: flex-start; gap: var(--space-12); }
.art__body .art-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.2rem + 1vw, 2.1rem);
  font-weight: 600;
  letter-spacing: var(--ls-heading);
}
.art__body p { font-size: var(--t-small); line-height: 1.6; color: var(--c-ink-muted); }
.art__body .link-arrow { margin-top: auto; }

/* ---- Biologische Systeme ---- */

.bio {
  margin-top: clamp(56px, 7vw, 104px);
  padding-top: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--c-rule);
}
.bio__head { gap: var(--space-16); max-width: 70ch; }
.bio__grid { grid-template-columns: 1fr; gap: clamp(20px, 2.4vw, 32px); }
@media (min-width: 900px) { .bio__grid { grid-template-columns: repeat(3, 1fr); } }

.bcard__link {
  height: 100%;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-canvas);
  border: 1px solid var(--c-rule);
  transition: box-shadow var(--dur-mid) var(--ease-out-expo),
              border-color var(--dur-mid) var(--ease-out-expo),
              transform var(--dur-mid) var(--ease-out-expo);
}
@media (hover: hover) {
  .bcard__link:hover { box-shadow: var(--glass-shadow-lift); border-color: transparent; transform: translateY(-3px); }
}
.bcard--featured .bcard__link {
  border-color: rgba(197, 168, 128, 0.55);
  background: linear-gradient(180deg, rgba(197, 168, 128, 0.06), transparent 40%);
}

.bcard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-canvas-sunk); }
.bcard__media img { width: 100%; height: 100%; object-fit: cover;
                    transition: transform var(--dur-slow) var(--ease-out-expo); }
@media (hover: hover) { .bcard__link:hover .bcard__media img { transform: scale(1.05); } }

.bcard__body { align-items: flex-start; gap: 10px; flex: 1; }
.bcard__body .bcard-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem);
  font-weight: 600;
  letter-spacing: var(--ls-heading);
}
.bcard__body p { font-size: var(--t-small); line-height: 1.6; color: var(--c-ink-muted); }
.bcard__body .link-arrow { margin-top: auto; }

/* --------------------------------------------------------------------------
   §35  WARUM POOLBAU HANIK
   Ported from hanik-homepage/css/pool.css. Each pillar is ONE paragraph
   holding <b> and <span> as siblings — html-v3 keeps sibling inline tags and
   only strips nested ones, so this is three elements instead of nine.
   -------------------------------------------------------------------------- */

.why { grid-template-columns: 1fr; gap: clamp(36px, 5vw, 80px); align-items: start; }
@media (min-width: 1000px) { .why { grid-template-columns: 0.85fr 1.15fr; } }

.why__media {
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-canvas-sunk);
  aspect-ratio: 4 / 3;
}
@media (min-width: 1000px) { .why__media { position: sticky; top: clamp(96px, 12vh, 130px); } }
.why__media img { width: 100%; height: 100%; object-fit: cover; }

.why__copy { gap: clamp(26px, 3vw, 40px); }

.why__pillars {
  grid-template-columns: 1fr;
  gap: var(--space-16);
  border-top: 1px solid var(--c-rule);
}
@media (min-width: 640px) { .why__pillars { grid-template-columns: repeat(3, 1fr); } }

/* the two runs stack because the paragraph is the grid cell, not a flex column */
.pillar b {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.pillar span { display: block; font-size: var(--t-small); line-height: 1.5; color: var(--c-ink-faint); }

/* "Nur der Pool, dafür richtig" */
.focus {
  align-items: flex-start;
  gap: clamp(20px, 2.4vw, 32px);
  border-radius: var(--r-card);
  border-left: 3px solid var(--c-pool);
  background: var(--c-pool-wash);
}
.focus__mark { color: var(--c-pool); }
.focus__mark svg { width: 100%; height: 100%; }
.focus .focus-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  font-weight: 600;
  letter-spacing: var(--ls-heading);
}
.focus p { font-size: var(--t-small); line-height: 1.65; color: var(--c-ink-muted); max-width: 70ch; }

/* --------------------------------------------------------------------------
   §36  ABLAUF & BUDGET  +  the shared accordion (FAQ / Region)
   Steps numerals and the accordion's +/- sign are both generated, so a step is
   three elements and an accordion row is five.
   -------------------------------------------------------------------------- */

.steps { grid-template-columns: 1fr; gap: 0; counter-reset: step; }
@media (min-width: 760px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1140px) { .steps { grid-template-columns: repeat(5, 1fr); } }

.steps__item { position: relative; border-top: 1px solid var(--c-rule-invert); }
@media (min-width: 1140px) {
  .steps__item { border-left: 1px solid var(--c-rule-invert); }
  .steps__item:first-child { border-left: 0; }
}
.steps__item::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  /* .e-con:before is Elementor's background-overlay layer: position:absolute,
     inset 0, width/height 100%. Every ::before on a container inherits that
     geometry unless it is overridden, which pinned this numeral to the item's
     border-box corner, outside the padding and out of flow. The decorative
     ::before rules elsewhere in this file all set position:absolute of their
     own accord, so this is the only one that had to be put back in flow. */
  position: static;
  width: auto;
  height: auto;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--c-brass);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-12);
}
.steps__item .steps-title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem);
  font-weight: 600;
  letter-spacing: var(--ls-heading);
}
.steps__item p { font-size: var(--t-small); line-height: 1.6; color: var(--c-ink-invert-muted); }

/* On a light ground the lines and text colour invert. */
.section:not(.section--dark) .steps__item { border-color: var(--c-rule); }
.section:not(.section--dark) .steps__item p { color: var(--c-ink-muted); }

.budget {
  grid-template-columns: 1fr;
  gap: clamp(28px, 3.4vw, 56px);
  align-items: center;
  border-radius: var(--r-card);
  background: var(--glass-bg-dark);
  border: var(--glass-border-dark);
}
@media (min-width: 880px) { .budget { grid-template-columns: auto 1fr; } }

.budget__figure { gap: 4px; }
.budget__from {
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-badge);
  color: var(--c-ink-invert-muted);
}
.budget__num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1.8rem + 3.2vw, 4.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--c-brass);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.budget__copy { align-items: flex-start; gap: var(--space-12); }
.budget__copy .budget-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  font-weight: 600;
  letter-spacing: var(--ls-heading);
}
.budget__copy p { font-size: var(--t-small); line-height: 1.65; color: var(--c-ink-invert-muted); max-width: 62ch; }

/* ---- accordion, shared by FAQ and the Region list ---- */

.region__row { border-top: 1px solid var(--c-rule-invert); }
.region__row:last-child { border-bottom: 1px solid var(--c-rule-invert); }

.region__trigger {
  position: relative;
  width: 100%;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  text-align: left;
  color: var(--c-ink-invert);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--dur-fast);
}
.region__trigger:hover { color: var(--c-brass); }

.region__name {
  flex: 1;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2.1rem);
  font-weight: 600;
  letter-spacing: var(--ls-display);
  line-height: 1.1;
}

/* the +/- sign is generated, so a row needs no icon element */
.region__trigger::after {
  content: "";
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--c-rule-invert);
  background: var(--sign-plus) center / 14px 14px no-repeat;
  transition: transform var(--dur-mid) var(--ease-out-expo),
              background-color var(--dur-fast), border-color var(--dur-fast);
}
.region__row.is-open .region__trigger::after {
  transform: rotate(45deg);
  background-color: var(--c-brass);
  border-color: transparent;
}
:root {
  --sign-plus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M7 1v12M1 7h12" stroke="%23f4f2ec" stroke-width="1.4" stroke-linecap="round" fill="none"/></svg>');
}

.region__panel { overflow: hidden; height: 0; }
.region__panel-inner {
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--c-ink-invert-muted);
  max-width: 56ch;
}

/* FAQ sits on a light ground: flip the lines, the sign and the copy. */
.faq .region__row { border-top-color: var(--c-rule); }
.faq .region__row:last-child { border-bottom-color: var(--c-rule); }
.faq .region__trigger { color: var(--c-ink); }
.faq .region__trigger:hover { color: var(--c-accent); }
.faq .region__trigger::after {
  border-color: var(--c-rule-strong);
  background-image: var(--sign-plus-dark);
}
.faq .region__panel-inner { color: var(--c-ink-muted); }
:root {
  --sign-plus-dark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M7 1v12M1 7h12" stroke="%23141716" stroke-width="1.4" stroke-linecap="round" fill="none"/></svg>');
}

/* --------------------------------------------------------------------------
   §37  SEO TEXT BLOCK  +  the third closing CTA
   .seo__cols flows its paragraphs into two newspaper columns. The paragraph
   rules are prefixed with .elementor so they outrank .e-paragraph-base (0,2,0),
   which claims margin — that is why .prose is not stacked on here.
   -------------------------------------------------------------------------- */

.seo__cols { columns: 1; }
@media (min-width: 900px) {
  .seo__cols { columns: 2; column-gap: clamp(40px, 5vw, 88px); }
  .elementor .seo__cols p { break-inside: avoid; }
}
.elementor .seo__cols p {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--c-ink-muted);
  max-width: none;
}
.elementor .seo__cols p + p { margin-block-start: 1.15em; }

.magnet--alt { background: var(--c-obsidian); }

/* The brief closes with three calls to action, not the demo's two. */
@media (min-width: 1080px) {
  .cta-final__pair:has(> :nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   §38  Hardening the interactive components against §4b
   §4b neutralises Hello Elementor's `a:hover{color:#336}`, which forces it to
   specificity (0,1,1) — one notch above a bare component class like
   `.magnet` (0,1,0). §24 covers the pseudo-class states, so the two tie and
   source order decides, which is far too fragile to rely on for the one thing
   a CTA cannot get wrong. These are (0,2,1) and settle it outright.
   -------------------------------------------------------------------------- */

.elementor .magnet,
.elementor .magnet:link,
.elementor .magnet:visited,
.elementor .magnet:hover,
.elementor .magnet:active,
.elementor .magnet:focus,
.elementor .magnet:focus-visible  { color: var(--c-ink-invert); text-decoration: none; }

.elementor .magnet .m-kicker,
.elementor .magnet .m-title       { color: inherit; }

.elementor .btn,
.elementor .btn:link,
.elementor .btn:visited,
.elementor .btn:hover,
.elementor .btn:active,
.elementor .btn:focus,
.elementor .btn:focus-visible     { color: var(--btn-fg); }

.elementor .btn > *,
.elementor .btn .btn__arrow       { color: inherit; }


/* ==========================================================================
   Hero typography, tablet and mobile only            [hnk-hero-responsive]
   --------------------------------------------------------------------------
   The base .hero__title clamp above is left alone so the desktop size does
   not move. Breakpoints match Elementor's own (mobile 767, tablet 1024) so
   these line up with the main H1, whose sizes are set in the editor on the
   same two breakpoints - not with the 900px the hero layout switches at.
   ========================================================================== */
@media (max-width: 1024px) {
  .hero__title { font-size: 30px; }
}
@media (max-width: 767px) {
  /* Everything here carries the .elementor prefix on purpose. The rules
     these override live at .elementor .hero__panel / .hero__content,
     which is (0,2,0) - a bare .hero__panel loses to it no matter how far
     down the file it sits, which is why the earlier mobile block never
     took effect and the panel stayed at 68svh (609px on a 896px screen). */

  .elementor .hero__title { font-size: 21px; }
  .elementor .hero__sub   { font-size: 14px; }

  .elementor .hero__panel {
    height: 68svh;
    min-height: 370px;
    max-height: 500px;
  }

  .elementor .hero__content {
    gap: 12px;
    padding-bottom: 22px;
  }
}