/* =============================================================
   ATLANTIC BEREGNUNGSANLAGEN — Editorial Premium Organic
   Design System
   ============================================================= */

/* -- Fonts (self-hosted) ------------------------------------ */
/* Same latin variable files Google Fonts serves, hosted here so a page view sends
   no IP address to Google (LG München I, 3 O 17493/20). Latin covers ä ö ü ß „ “ ² €.
   Fraunces keeps its opsz/SOFT/WONK axes, Manrope is one file for 400 to 700. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/fraunces-var-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/fraunces-var-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/manrope-var-latin.woff2") format("woff2");
}
/* Width-matched fallbacks: until the web fonts are there, Georgia and Arial take up the same
   width, so headings do not re-wrap when Fraunces arrives and nothing jumps (CLS). Ratios
   measured on the site's own texts; Georgia italic is about 9 % wider than Fraunces italic. */
@font-face { font-family: "Fraunces Fallback"; font-style: normal; src: local("Georgia"); size-adjust: 84%; }
@font-face { font-family: "Fraunces Fallback"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 79%; }
@font-face { font-family: "Manrope Fallback"; font-style: normal; src: local("Arial"); size-adjust: 100.5%; }

/* -- Reset -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; color: inherit; }

/* -- Tokens ------------------------------------------------- */
:root {
  /* Color — Logo-derived palette: Marine Navy x Logo-Teal x Lime-Leaf x Cream */
  --c-ink: #163765;          /* deep marine — directly from logo */
  --c-ink-soft: #2C4D7C;
  --c-ink-mute: #52668C;     /* 4.5:1 on cream-2 and lighter (WCAG AA for small text) */
  --c-aqua: #29B5DD;         /* logo cyan/teal */
  --c-aqua-deep: #1A8AB0;
  --c-aqua-text: #136E8C;    /* aqua for small text, 4.5:1 on cream-2 and lighter */
  --c-wa: #167D47;           /* WhatsApp green, dark enough for white text (WhatsApp's own #25D366 is 2:1) */
  --c-wa-dark: #11643A;
  --c-aqua-soft: #DDF2F8;
  --c-lime: #B5D34B;         /* logo leaf-lime accent */
  --c-lime-deep: #8FAE32;
  --c-lime-soft: #ECF4D2;
  --c-sand: #E8DFCE;
  --c-cream: #F6F2EA;        /* page background */
  --c-cream-2: #EFE9DC;
  --c-paper: #FCFAF5;
  --c-line: rgba(22, 55, 101, 0.12);
  --c-line-soft: rgba(22, 55, 101, 0.06);
  --c-white: #FFFFFF;

  /* Type */
  --f-display: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --f-body: "Manrope", "Manrope Fallback", -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Scale */
  --t-2xs: 0.6875rem;     /* 11 */
  --t-xs:  0.8125rem;     /* 13 */
  --t-sm:  0.9375rem;     /* 15 */
  --t-md:  1.0625rem;     /* 17 */
  --t-lg:  1.25rem;       /* 20 */
  --t-xl:  1.5rem;        /* 24 */
  --t-2xl: 2rem;          /* 32 */
  --t-3xl: clamp(2.25rem, 4vw, 3.5rem);
  --t-4xl: clamp(3rem, 7vw, 6rem);
  --t-5xl: clamp(3.75rem, 9vw, 8rem);

  /* Space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* Radius */
  --r-sm: 4px; --r-md: 10px; --r-lg: 18px; --r-xl: 28px; --r-full: 999px;

  /* Layout */
  --container: 1320px;
  --gutter: clamp(20px, 4vw, 48px);

  /* Shadow */
  --sh-1: 0 1px 2px rgba(14, 42, 56, 0.04);
  --sh-2: 0 8px 24px rgba(14, 42, 56, 0.08);
  --sh-3: 0 24px 60px rgba(14, 42, 56, 0.14);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 200ms; --dur-2: 400ms; --dur-3: 700ms;
}

/* -- Base --------------------------------------------------- */
html, body {
  background: var(--c-cream);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 400;
  font-feature-settings: "ss01", "cv11";
  /* clip, not hidden: overflow-x:hidden on html AND body turns body into its own
     scroll container, and position:sticky on the header then silently stops working. */
  overflow-x: clip;
  max-width: 100vw;
}
@supports not (overflow: clip) {
  html { overflow-x: hidden; }
  body { overflow-x: visible; }
}
/* Scroll lock while the mobile menu is open (on html, so it reaches the viewport). */
html.nav-open { overflow: hidden; }

::selection { background: var(--c-ink); color: var(--c-cream); }

/* -- Focus -------------------------------------------------- */
/* Keyboard-only: mouse users never see the ring, tab users always do. */
:focus-visible {
  outline: 2px solid var(--c-aqua-deep);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
/* On dark ground (footer, CTA banner, hero, dark bands) the aqua ring loses contrast. */
.site-footer :focus-visible,
.cta-banner :focus-visible,
.hero-visual :focus-visible,
.dark-band :focus-visible,
.err__deco :focus-visible {
  outline-color: var(--c-lime);
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--c-ink);
  color: var(--c-cream);
  font-size: var(--t-sm);
  font-weight: 600;
  padding: 14px 24px;
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition: transform var(--dur-2) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

h1, h2:where(:not(.h3, .h4)), h3:where(:not(.h4)), h4, h5, h2:where(.h3), :is(h2, h3):where(.h4) {
  font-family: var(--f-display);
  font-weight: 380;
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  color: var(--c-ink);
}
h1 { font-size: var(--t-5xl); font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1; }
h2:where(:not(.h3, .h4)) { font-size: var(--t-4xl); }
h3:where(:not(.h4)), h2:where(.h3) { font-size: var(--t-3xl); }
h4, :is(h2, h3):where(.h4) { font-size: var(--t-2xl); line-height: 1.15; }

.eyebrow {
  font-family: var(--f-body);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--t-2xs);
  font-weight: 600;
  color: var(--c-aqua-text);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--c-aqua-deep);
}

p { color: var(--c-ink-soft); }
.lead { font-size: clamp(1.1rem, 1.4vw, 1.35rem); line-height: 1.55; color: var(--c-ink-soft); }

em, .italic-display {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 380;
}

/* -- Layout ------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 10vw, 160px); }
.section--tight { padding-block: clamp(48px, 6vw, 96px); }
.divider { height: 1px; background: var(--c-line); }

/* -- Buttons ----------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 28px;
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
  border-radius: var(--r-full);
  transition: all var(--dur-2) var(--ease);
  position: relative;
  overflow: hidden;
}
.btn--primary {
  background: var(--c-ink);
  color: var(--c-cream);
}
.btn--primary:hover { background: var(--c-aqua-deep); transform: translateY(-2px); }
.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--c-ink); background: var(--c-ink); color: var(--c-cream); }
.btn--accent { background: var(--c-aqua); color: var(--c-white); }
.btn--accent:hover { background: var(--c-aqua-deep); }
.btn .arrow {
  display: inline-block;
  transition: transform var(--dur-2) var(--ease);
}
.btn:hover .arrow { transform: translateX(4px); }

/* Link with underline animation */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: var(--t-sm);
  color: var(--c-ink);
  position: relative;
  padding-bottom: 4px;
}
.link-arrow::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform-origin: right; transform: scaleX(1);
  transition: transform var(--dur-2) var(--ease);
}
.link-arrow:hover::after { transform-origin: left; transform: scaleX(0.4); }
.link-arrow svg { transition: transform var(--dur-2) var(--ease); }
.link-arrow:hover svg { transform: translateX(6px); }

/* -- Top bar (utility strip) ------------------------------ */
.topbar {
  background: var(--c-ink);
  color: var(--c-cream);
  font-size: var(--t-xs);
  padding: 10px 0;
  letter-spacing: 0.02em;
}
.topbar__row { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.topbar a { display: inline-flex; align-items: center; gap: 8px; color: var(--c-cream); opacity: 0.85; transition: opacity var(--dur-1); }
.topbar a:hover { opacity: 1; color: var(--c-aqua); }
.topbar__sep { width: 1px; height: 14px; background: rgba(246, 242, 234, 0.2); }
.topbar__group { display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.topbar__group > span { display: inline-flex; align-items: center; gap: 6px; }
.topbar__group > span svg { color: var(--c-lime); }

@media (max-width: 720px) {
  .topbar__hours { display: none; }
}
/* Phones: one line only. Calling sits in the bottom bar anyway, the mail address would wrap. */
@media (max-width: 400px) {
  .topbar a.topbar__mail, .topbar__group > .topbar__sep { display: none; }
  .topbar__row { justify-content: center; }
}

/* -- Header / Nav ----------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 80;
  background: rgba(246, 242, 234, 0.85);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--c-line-soft);
  transition: background var(--dur-2) var(--ease), margin-bottom var(--dur-2) var(--ease);
}
/* padding-block only: .nav sits on .container, a padding shorthand here would
   wipe the side gutters and push logo and button against the screen edge. */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 18px;
  gap: 24px;
  transition: padding var(--dur-2) var(--ease);
}
.nav__logo {
  font-family: var(--f-display); font-size: 22px; font-weight: 400;
  letter-spacing: -0.02em;
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--c-ink);
}
.nav__logo img {
  height: 96px; width: auto; display: block;
  transition: transform var(--dur-3) var(--ease), height var(--dur-2) var(--ease);
}
.nav__logo:hover img { transform: rotate(-3deg) scale(1.03); }
@media (max-width: 900px) {
  .nav__logo img { height: 80px; }
}
@media (max-width: 600px) {
  .nav__logo img { height: 58px; }
}
/* Once the page scrolls, the sticky header slims down so it doesn't eat the screen.
   The header is in the flow, so it gives the lost height back as margin-bottom
   (--hdr-shrink, measured by main.js). Same duration and easing on all three
   transitions keeps the sum constant: the content below never jumps. */
.site-header.is-scrolled { margin-bottom: var(--hdr-shrink, 0px); }
.hdr-measuring, .hdr-measuring * { transition: none !important; }
.site-header.is-scrolled .nav { padding-block: 8px; }
.site-header.is-scrolled .nav__logo img { height: 64px; }
@media (max-width: 600px) {
  .site-header.is-scrolled .nav__logo img { height: 48px; }
}
.nav__menu { display: flex; align-items: center; gap: 4px; }
.nav__item { position: relative; }
.nav__link {
  display: inline-block;
  padding: 10px 14px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-ink);
  border-radius: var(--r-full);
  transition: all var(--dur-1);
}
.nav__link:hover, .nav__link[aria-current="page"] {
  background: var(--c-ink);
  color: var(--c-cream);
}
.nav__item--has-sub > .nav__link::after {
  content: "▾"; margin-left: 6px; font-size: 9px; opacity: 0.6;
}
.nav__sub {
  position: absolute; top: calc(100% + 8px); left: 0;
  background: var(--c-paper);
  box-shadow: var(--sh-3);
  border-radius: var(--r-lg);
  padding: 12px;
  min-width: 280px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all var(--dur-2) var(--ease);
}
.nav__item--has-sub:hover .nav__sub,
.nav__item--has-sub:focus-within .nav__sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__sub a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-ink-soft);
  transition: all var(--dur-1);
}
.nav__sub a:hover { background: var(--c-cream); color: var(--c-ink); }

.nav__cta { display: inline-flex; gap: 10px; align-items: center; }
.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--r-full);
  background: var(--c-ink);
  color: var(--c-cream);
  align-items: center; justify-content: center;
}
.nav__toggle .bars {
  width: 16px; height: 10px; position: relative;
}
.nav__toggle .bars::before, .nav__toggle .bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  transition: transform var(--dur-2) var(--ease);
}
.nav__toggle .bars::before { top: 0; }
.nav__toggle .bars::after { bottom: 0; }
html.nav-open .nav__toggle .bars::before { transform: translateY(4px) rotate(45deg); }
html.nav-open .nav__toggle .bars::after { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 1024px) {
  .nav__menu, .nav__cta .btn--primary { display: none; }
  .nav__toggle { display: inline-flex; }
}

/* Mobile drawer: a panel directly below the sticky header (top is set by main.js
   from the header's real bottom edge), page behind is scroll-locked. */
.mobile-drawer {
  position: fixed; left: 0; right: 0; bottom: 0;
  top: var(--drawer-top, 76px);
  z-index: 70;
  background: var(--c-cream);
  border-top: 1px solid var(--c-line);
  padding: 20px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}
html.nav-open .mobile-drawer {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s;
}
.mobile-drawer__label {
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-ink-mute);
  margin: 4px 0 10px;
}
.mobile-drawer__label + .mobile-drawer__tiles { margin-top: 0; }
.mobile-drawer__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mobile-drawer__tiles a {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  min-height: 92px;
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  font-weight: 600; font-size: var(--t-sm); line-height: 1.25; color: var(--c-ink);
}
.mobile-drawer__tiles a .ico {
  width: 36px; height: 36px; border-radius: var(--r-full);
  background: var(--c-aqua-soft); color: var(--c-aqua-deep);
  display: inline-flex; align-items: center; justify-content: center;
}
.mobile-drawer__tiles a .ico svg { width: 19px; height: 19px; }
.mobile-drawer__tiles a[aria-current="page"] { background: var(--c-ink); color: var(--c-cream); border-color: var(--c-ink); }
.mobile-drawer__tiles a[aria-current="page"] .ico { background: rgba(255,255,255,0.12); color: var(--c-lime); }
.mobile-drawer__all {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 12px 0 22px;
  font-size: var(--t-sm); font-weight: 600; color: var(--c-aqua-text);
}
.mobile-drawer__list { border-top: 1px solid var(--c-line); }
.mobile-drawer__list a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 54px;
  padding: 0 4px;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--f-display);
  font-size: 1.35rem; line-height: 1.1;
  color: var(--c-ink);
}
.mobile-drawer__list a svg { width: 16px; height: 16px; color: var(--c-ink-mute); flex: none; }
.mobile-drawer__list a[aria-current="page"] { color: var(--c-aqua-text); }
.mobile-drawer__list a[aria-current="page"]::before {
  content: ""; width: 4px; height: 22px; border-radius: 2px; background: var(--c-aqua);
  margin-right: 12px; margin-left: -4px;
}
.mobile-drawer__list a[aria-current="page"] span { margin-right: auto; }
.mobile-drawer__subs { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 14px; border-bottom: 1px solid var(--c-line); }
.mobile-drawer__subs a {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 14px;
  border-radius: var(--r-full);
  background: var(--c-paper); border: 1px solid var(--c-line);
  font-size: var(--t-sm); font-weight: 500; color: var(--c-ink-soft);
}
.mobile-drawer__subs a[aria-current="page"] { background: var(--c-ink); color: var(--c-cream); border-color: var(--c-ink); }
.mobile-drawer__cta { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mobile-drawer__cta .btn { width: 100%; justify-content: center; padding: 15px 16px; }
.mobile-drawer__cta .btn--primary { grid-column: 1 / -1; }
.mobile-drawer__cta .btn--wa { background: var(--c-wa); color: #fff; }
.mobile-drawer__meta { margin-top: 16px; font-size: var(--t-xs); color: var(--c-ink-mute); text-align: center; }
@media (min-width: 1025px) { .mobile-drawer { display: none; } }

/* -- Hero (visual / image-led, full-bleed) ------------------ */
.hero-visual {
  position: relative;
  margin-top: 0;
  padding-bottom: 0;
  background: var(--c-ink);
}
.hero-visual__frame {
  position: relative;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  height: clamp(620px, 88vh, 880px);
}
@media (max-width: 720px) {
  .hero-visual__frame { height: 92vh; max-height: 760px; min-height: 580px; margin: 0; border-radius: 0; }
}
.hero-visual__media {
  position: absolute; inset: 0;
}
.hero-visual__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1500ms var(--ease);
}
.hero-visual__frame:hover .hero-visual__media img { transform: scale(1.02); }
.hero-visual__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(22, 55, 101, 0.0) 0%, rgba(22, 55, 101, 0.15) 40%, rgba(22, 55, 101, 0.85) 100%),
    linear-gradient(90deg, rgba(22, 55, 101, 0.5) 0%, rgba(22, 55, 101, 0.1) 50%);
}
.hero-visual__content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(28px, 5vw, 64px);
  color: var(--c-cream);
  z-index: 2;
}
/* Sits inside the H1 (search term in the headline), so it resets the H1 typography. */
.hero-visual__eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-body); font-style: normal; line-height: 1.3; font-variation-settings: normal;
  text-transform: uppercase;
  font-size: var(--t-2xs);
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--c-cream);
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 8px 16px;
  border-radius: var(--r-full);
  width: fit-content;
  margin-bottom: 28px;
}
.hero-visual__eyebrow .dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--c-lime); box-shadow: 0 0 0 4px rgba(181,211,75,0.25); animation: dot-pulse 2.4s ease infinite; }
@keyframes dot-pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(181,211,75,0.25); } 50% { box-shadow: 0 0 0 10px rgba(181,211,75,0.05); } }
.hero-visual__title {
  font-family: var(--f-display);
  font-weight: 320;
  line-height: 0.92;
  letter-spacing: -0.035em;
  font-size: clamp(2.75rem, 8.5vw, 8rem);
  color: var(--c-cream);
  max-width: 16ch;
}
.hero-visual__title em {
  font-style: italic;
  color: var(--c-lime);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.hero-visual__sub {
  margin-top: 28px;
  max-width: 52ch;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: rgba(246, 242, 234, 0.92);
  line-height: 1.5;
}
.hero-visual__cta {
  margin-top: 36px;
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
.hero-visual__cta .btn--primary {
  background: var(--c-cream);
  color: var(--c-ink);
}
.hero-visual__cta .btn--primary:hover { background: var(--c-lime); color: var(--c-ink); }
.hero-visual__cta .btn--ghost {
  background: transparent;
  color: var(--c-cream);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}
.hero-visual__cta .btn--ghost:hover { background: rgba(255,255,255,0.12); box-shadow: inset 0 0 0 1px var(--c-cream); }

/* Hero badges row (under photo, on cream) */
.hero-badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: clamp(24px, 4vw, 48px);
}
.hero-badge {
  background: var(--c-paper);
  padding: 24px;
  display: flex; flex-direction: column; gap: 6px;
}
.hero-badge__icon {
  width: 36px; height: 36px;
  border-radius: var(--r-full);
  background: var(--c-aqua-soft);
  color: var(--c-aqua-deep);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.hero-badge__icon svg { width: 18px; height: 18px; }
.hero-badge__label { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--c-ink-mute); }
.hero-badge__value { font-weight: 600; font-size: var(--t-md); color: var(--c-ink); }
@media (max-width: 900px) {
  .hero-badges { grid-template-columns: repeat(2, 1fr); }
}

/* Old hero kept (legacy) */
.hero {
  position: relative;
  padding-block: clamp(64px, 9vw, 120px) clamp(80px, 10vw, 160px);
  overflow: hidden;
  background: var(--c-cream);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }

.hero__title {
  font-size: clamp(3rem, 9.5vw, 9rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  font-weight: 320;
}
.hero__title em {
  font-style: italic;
  color: var(--c-aqua-deep);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.hero__title .accent-line { display: inline-block; position: relative; }
.hero__title .accent-line::after {
  content: "";
  position: absolute;
  left: -4%; right: -4%; bottom: 8%;
  height: 8px;
  background: var(--c-aqua);
  border-radius: var(--r-full);
  z-index: -1;
  opacity: 0.55;
}

.hero__sidecard {
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-xl);
  padding: 32px;
  box-shadow: var(--sh-2);
}
.hero__meta { display: flex; flex-direction: column; gap: 18px; }
.hero__meta-row { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 16px; border-bottom: 1px dashed var(--c-line); }
.hero__meta-row:last-child { border: 0; padding-bottom: 0; }
.hero__meta-row svg { width: 20px; height: 20px; color: var(--c-aqua-deep); flex-shrink: 0; margin-top: 2px; }
.hero__meta-label { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: 0.16em; color: var(--c-ink-mute); margin-bottom: 4px; }
.hero__meta-value { font-weight: 600; font-size: var(--t-md); color: var(--c-ink); }

.hero__media {
  position: absolute;
  right: -4%; bottom: -10%;
  width: 46%;
  max-width: 600px;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  overflow: hidden;
  z-index: -1;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Wave SVG decoration */
.wave-deco {
  position: absolute;
  pointer-events: none;
  opacity: 0.5;
}

/* -- Stats -------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
  padding-block: 56px;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.stat__num {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 320;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}
.stat__num em { color: var(--c-aqua-deep); font-style: italic; }
/* Equal-width digits plus a min-width for the final value (set by main.js):
   counting up must not change the width, or neighbouring text re-wraps every frame. */
.stat__num [data-counter] { display: inline-block; font-variant-numeric: tabular-nums; }
.stat__label {
  margin-top: 12px;
  font-size: var(--t-sm);
  color: var(--c-ink-mute);
  letter-spacing: 0.04em;
  max-width: 28ch;
}
@media (max-width: 720px) { .stats { grid-template-columns: 1fr; gap: 32px; } }
/* Intro stats on the home page: three columns beside the text, rows on phones. */
/* Columns size to their number: "300.000 m²" is twice as wide as "150+" and ran into its neighbour. */
.stats--compact { border: 0; padding: 0; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: clamp(16px, 2vw, 28px); }
.stats--compact .stat__num { font-size: clamp(2rem, 2.9vw, 2.9rem); white-space: nowrap; }
@media (max-width: 1100px) and (min-width: 901px) { .stats--compact { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 720px) {
  .stats--compact { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--c-line); }
  .stats--compact > div { display: flex; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--c-line); }
  .stats--compact .stat__num { font-size: 2.2rem; flex: none; }
  .stats--compact .stat__label { margin-top: 0; }
}

/* -- Section heads ----------------------------------------- */
.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; margin-bottom: clamp(32px, 5vw, 64px); }
.section-head .lead { max-width: 50ch; }
@media (max-width: 800px) { .section-head { grid-template-columns: 1fr; } }

/* -- Service cards ----------------------------------------- */
.services {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
/* Photo on top, text below on solid paper. Text used to sit directly on the photo
   and vanished on bright motifs (flower beds, lawn in sunlight). Never put copy
   back onto the image without a solid backing. */
.svc-card {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--c-paper);
  color: var(--c-ink);
  border: 1px solid var(--c-line-soft);
  display: flex; flex-direction: column;
  padding: 0 0 28px;
  box-shadow: var(--sh-1);
  transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.svc-card__media {
  position: relative;
  height: clamp(220px, 24vw, 320px);
  overflow: hidden;
  background: var(--c-cream-2);
  margin-bottom: 24px;
}
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease); }
.svc-card:hover .svc-card__media img { transform: scale(1.05); }
/* Label sits on the photo, so it gets its own solid chip. */
.svc-card__num {
  position: absolute; top: 18px; left: 18px; z-index: 1;
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink);
  background: rgba(252, 250, 245, 0.94);
  padding: 7px 12px;
  border-radius: var(--r-full);
  box-shadow: var(--sh-1);
}
.svc-card__title,
.svc-card__desc,
.svc-card__more { margin-inline: clamp(22px, 2.4vw, 32px); }
.svc-card__title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.12;
  color: var(--c-ink);
  margin-bottom: 10px;
}
.svc-card__desc { color: var(--c-ink-soft); font-size: var(--t-md); line-height: 1.6; max-width: 48ch; }
.svc-card__more {
  margin-top: auto;
  padding-top: 20px;
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: var(--t-sm);
  color: var(--c-aqua-text);
}
.svc-card__more svg { transition: transform var(--dur-2) var(--ease); }
.svc-card:hover .svc-card__more svg { transform: translateX(6px); }
.svc-card:hover .svc-card__title { color: var(--c-aqua-deep); }

.svc-card.span-7 { grid-column: span 7; }
.svc-card.span-5 { grid-column: span 5; }
.svc-card.span-6 { grid-column: span 6; }
.svc-card.span-4 { grid-column: span 4; }
.svc-card.span-8 { grid-column: span 8; }
@media (max-width: 900px) {
  .svc-card.span-7, .svc-card.span-5, .svc-card.span-6, .svc-card.span-4, .svc-card.span-8 { grid-column: 1 / -1; }
  .svc-card__media { height: clamp(200px, 52vw, 300px); }
}

/* -- Featured / Editorial split --------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: stretch;
}
.split--reverse > :first-child { order: 2; }
.split--center { align-items: center; }
.split__media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  min-height: clamp(380px, 56vw, 600px);
  align-self: stretch;
}
.split__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.split__body { max-width: 56ch; align-self: center; padding-block: 8px; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse > :first-child { order: 0; }
  .split__media { min-height: 0; aspect-ratio: 4/3; width: 100%; } /* min-height + aspect-ratio would force a width wider than the phone */
}

/* -- Process timeline ------------------------------------- */
.process { display: flex; flex-direction: column; gap: 0; }
.process__item {
  display: grid;
  grid-template-columns: 80px 1fr 240px;
  gap: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--c-line);
  align-items: start;
  transition: background var(--dur-2);
}
.process__item:last-child { border-bottom: 1px solid var(--c-line); }
.process__item:hover { background: rgba(43, 182, 167, 0.04); }
.process__num {
  font-family: var(--f-display);
  font-size: 56px;
  line-height: 1;
  font-style: italic;
  color: var(--c-aqua-deep);
  font-variation-settings: "opsz" 144, "SOFT" 80;
}
.process__title { font-size: var(--t-2xl); margin-bottom: 12px; }
.process__desc { font-size: var(--t-md); color: var(--c-ink-soft); max-width: 60ch; }
.process__tag {
  font-size: var(--t-2xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-ink-mute);
  text-align: right;
  padding-top: 12px;
}
@media (max-width: 800px) {
  .process__item { grid-template-columns: 60px 1fr; }
  .process__tag { display: none; }
  .process__num { font-size: 40px; }
}

/* -- Feature list ------------------------------------------ */
.feature-list { display: flex; flex-direction: column; gap: 4px; }
.feature-list li {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-line-soft);
}
.feature-list svg { width: 22px; height: 22px; color: var(--c-aqua-deep); flex-shrink: 0; margin-top: 2px; }
/* Bullets are water drops with a check instead of plain check circles. The inline
   check SVGs stay in the HTML as fallback, CSS swaps them for the drop. */
.feature-list li > svg { display: none; }
.feature-list li::before {
  content: "";
  flex: none;
  width: 22px; height: 26px;
  margin-top: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 26'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2329B5DD'/%3E%3Cstop offset='1' stop-color='%231A8AB0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M11 1C11 1 2 11 2 17a9 9 0 0 0 18 0C20 11 11 1 11 1z' fill='url(%23g)'/%3E%3Cpath d='M7 17.2l2.7 2.6L15.2 14' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.feature-list strong { display: block; font-weight: 600; color: var(--c-ink); margin-bottom: 4px; }
.feature-list span { color: var(--c-ink-soft); font-size: 1rem; line-height: 1.55; }

/* -- USPs row ---------------------------------------------- */
.usps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
}
.usp { padding: 32px; background: var(--c-paper); border-radius: var(--r-lg); border: 1px solid var(--c-line-soft); transition: transform var(--dur-2), box-shadow var(--dur-2); }
.usp:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.usp__icon {
  width: 56px; height: 56px;
  border-radius: var(--r-full);
  background: var(--c-aqua-soft);
  color: var(--c-aqua-deep);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.usp__icon svg { width: 26px; height: 26px; }
.usp h4, .usp :is(h2, h3):where(.h4) { font-size: var(--t-xl); margin-bottom: 8px; }
.usp p { font-size: var(--t-md); line-height: 1.6; }
/* Three cards fill three columns instead of leaving the fourth slot empty. */
@media (min-width: 1001px) {
  .usps:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1000px) { .usps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .usps { grid-template-columns: 1fr; } .usp { padding: 26px; } }

/* -- Partners ---------------------------------------------- */
.partners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px;
  align-items: center;
  justify-items: center;
  padding: 40px 0;
}
.partners__item {
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all var(--dur-2);
  max-height: 60px;
  width: auto; /* keeps the logo's proportions when max-height kicks in */
}
.partners__item:hover { filter: none; opacity: 1; }

/* -- Page hero (subpages) --------------------------------- */
.pagehero {
  padding-block: clamp(80px, 9vw, 140px) clamp(40px, 5vw, 80px);
  position: relative;
  border-bottom: 1px solid var(--c-line);
}
.pagehero__crumb {
  font-size: var(--t-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
  margin-bottom: 24px;
}
.pagehero__crumb a:hover { color: var(--c-ink); }
.pagehero__crumb span { margin: 0 10px; opacity: 0.5; }
.pagehero h1 {
  font-size: clamp(2.75rem, 7vw, 6rem);
  max-width: 18ch;
  margin-bottom: 24px;
}
.pagehero__lead { max-width: 36.6em; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--c-ink-soft); }

/* Search term inside the H1 of subpages, styled like an eyebrow above the slogan. */
.h1-kicker {
  display: block;
  font-family: var(--f-body); font-style: normal; font-weight: 600;
  font-size: var(--t-xs); line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase;
  font-variation-settings: normal;
  color: var(--c-aqua-text);
  margin-bottom: 18px;
}

/* -- Ratgeber & Einsatzgebiet ------------------------------- */
/* "Kurz gesagt": the direct answer right under the H1. Search snippets and AI
   assistants quote this paragraph, so it states the facts in full sentences. */
.answer {
  position: relative;
  max-width: 880px;
  padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 36px);
  background: var(--c-white);
  border: 1px solid var(--c-line-soft);
  border-left: 4px solid var(--c-aqua);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.answer__label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-aqua-text);
  margin-bottom: 10px;
}
.answer__label::before { content: ""; width: 10px; height: 13px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 0C12 0 2 12 2 20a10 10 0 0 0 20 0C22 12 12 0 12 0z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 0C12 0 2 12 2 20a10 10 0 0 0 20 0C22 12 12 0 12 0z'/%3E%3C/svg%3E") center / contain no-repeat; }
.answer p { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.65; color: var(--c-ink); }
.answer strong { color: var(--c-ink); }
.article-meta { margin-top: 14px; font-size: var(--t-xs); color: var(--c-ink-mute); letter-spacing: 0.04em; }
.prose ol.steps { counter-reset: step; padding-left: 0; }
.prose ol.steps li { list-style: none; position: relative; padding-left: 52px; margin-bottom: 18px; counter-increment: step; }
.prose ol.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -2px;
  width: 34px; height: 34px; border-radius: var(--r-full);
  background: var(--c-ink); color: var(--c-cream);
  font-size: var(--t-sm); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.place-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.place-chips li {
  padding: 8px 14px; border-radius: var(--r-full);
  background: var(--c-paper); border: 1px solid var(--c-line);
  font-size: var(--t-sm); color: var(--c-ink);
}
.link-list { max-width: 880px; border-top: 1px solid var(--c-line); }
.link-list li { border-bottom: 1px solid var(--c-line); }
.link-list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 4px; font-family: var(--f-display); font-size: clamp(1.15rem, 1.8vw, 1.4rem); color: var(--c-ink); }
.link-list a::after { content: "→"; font-family: var(--f-body); color: var(--c-aqua-text); transition: transform var(--dur-2) var(--ease); }
.link-list a:hover { color: var(--c-aqua-text); }
.link-list a:hover::after { transform: translateX(6px); }
.split > .split__body + .split__body { align-self: start; }

/* -- Subpage hero: rotor throw arcs as background, optional photo ------ */
.pagehero { overflow: hidden; isolation: isolate; }
.pagehero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -120px; bottom: -160px; width: 620px; height: 620px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%2329B5DD' stroke-linecap='round' stroke-width='3' stroke-dasharray='0 14'%3E%3Cpath d='M300 400A100 100 0 0 1 400 300' opacity='.9'/%3E%3Cpath d='M220 400A180 180 0 0 1 400 220' opacity='.7'/%3E%3Cpath d='M140 400A260 260 0 0 1 400 140' opacity='.5'/%3E%3Cpath d='M60 400A340 340 0 0 1 400 60' opacity='.3'/%3E%3C/svg%3E") no-repeat right bottom / contain;
  opacity: 0.55;
}
@media (max-width: 720px) { .pagehero::after { width: 340px; height: 340px; right: -90px; bottom: -110px; opacity: 0.4; } }
.pagehero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.pagehero--media h1 { font-size: clamp(2.6rem, 5.6vw, 5rem); }
.pagehero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pagehero__media { position: relative; margin: 0; }
.pagehero__media img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--sh-3); }
.pagehero__badge {
  position: absolute; left: -22px; bottom: 28px;
  display: flex; align-items: center; gap: 12px;
  max-width: 280px;
  padding: 14px 18px;
  background: var(--c-white); border-radius: var(--r-lg); box-shadow: var(--sh-3);
  font-size: var(--t-sm); line-height: 1.35; color: var(--c-ink);
}
.pagehero__badge b { display: block; font-size: var(--t-md); }
.pagehero__badge .ico { flex: none; width: 42px; height: 42px; border-radius: var(--r-full); background: var(--c-lime-soft); color: var(--c-lime-deep); display: grid; place-items: center; }
.pagehero__badge .ico svg { width: 22px; height: 22px; }
/* Map hero: the badge sits below the map, it must not cover any towns. */
.pagehero__media--map .pagehero__badge { position: static; max-width: none; margin-top: 14px; box-shadow: var(--sh-1); }
.pagehero__media--map .area-map { box-shadow: var(--sh-2); }
@media (max-width: 900px) {
  .pagehero__grid { grid-template-columns: 1fr; }
  .pagehero__media img { aspect-ratio: 16 / 10; }
  .pagehero__badge { left: 14px; bottom: -22px; }
  .pagehero--media { padding-bottom: 56px; }
}

/* -- Photo hero for subpages (.subhero) ---------------------------------- */
/* Full-bleed photo (or a three-photo collage), navy gradient for legibility, a subtle
   water effect (data-water / data-season-dial, filled by main.js) and fact chips.
   Straight lower edge, no wave. The H1 keeps its search-term kicker. */
.subhero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--c-ink); color: var(--c-cream);
  min-height: clamp(460px, 64vh, 640px);
  display: flex; align-items: flex-end;
  padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 7vw, 96px);
}
.subhero--compact { min-height: 0; padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(56px, 6vw, 80px); }
.subhero--compact h1 { font-size: clamp(2.3rem, 4.6vw, 4.2rem); }
.subhero__media { position: absolute; inset: 0; z-index: -3; }
.subhero__media img { width: 100%; height: 100%; object-fit: cover; }
.subhero__media--collage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--c-ink); }
.subhero__media--collage img { animation: subhero-zoom 18s var(--ease) both; }
.subhero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(14, 36, 70, 0.92) 0%, rgba(14, 36, 70, 0.72) 42%, rgba(14, 36, 70, 0.2) 100%),
    linear-gradient(0deg, rgba(14, 36, 70, 0.75) 0%, rgba(14, 36, 70, 0) 45%);
}
.subhero__media > img:only-child, .subhero__media > picture:only-child img { animation: subhero-zoom 18s var(--ease) both; }
/* <picture> only swaps the file (portrait crop on phones), the img keeps filling the box */
.hero-visual__media picture, .subhero__media picture { display: contents; }
@keyframes subhero-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.subhero__fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.subhero__inner { position: relative; }
.subhero .pagehero__crumb { color: rgba(246, 242, 234, 0.7); }
.subhero .pagehero__crumb a:hover { color: var(--c-cream); }
.subhero h1 { color: var(--c-cream); font-size: clamp(2.6rem, 6vw, 5.4rem); max-width: 9.37em; /* = 16ch of Fraunces; em does not change with the fallback font */ margin-bottom: 20px; line-height: 0.98; }
.subhero h1 em { color: var(--c-lime); }
.subhero .h1-kicker { color: var(--c-lime); }
.subhero .pagehero__lead { color: rgba(246, 242, 234, 0.9); max-width: 35.38em; } /* = 58ch of Manrope, in em so the fallback font wraps alike */
.subhero .pagehero__actions .btn--primary { background: var(--c-cream); color: var(--c-ink); }
.subhero .pagehero__actions .btn--primary:hover { background: var(--c-lime); }
.subhero .pagehero__actions .btn--ghost { color: var(--c-cream); box-shadow: inset 0 0 0 1px rgba(246, 242, 234, 0.45); }
.subhero .pagehero__actions .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }
.subhero :focus-visible { outline-color: var(--c-lime); }
.subhero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.subhero__chips li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--c-cream);
}
.subhero__chips li::before { content: ""; width: 8px; height: 11px; background: var(--c-lime); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 0C12 0 2 12 2 20a10 10 0 0 0 20 0C22 12 12 0 12 0z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 0C12 0 2 12 2 20a10 10 0 0 0 20 0C22 12 12 0 12 0z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Photo credit for licensed hero photos (CC BY-SA needs the author next to the image) */
.subhero__credit { position: absolute; right: clamp(12px, 2vw, 24px); bottom: 10px; z-index: 1; margin: 0; font-size: 11px; line-height: 1.3; color: rgba(246, 242, 234, 0.6); text-align: right; }
.subhero__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.subhero__credit a:hover { color: var(--c-cream); }
/* Mowing stripes (Mähroboter): wide translucent bands that drift slowly. */
.subhero__fx--stripes::before {
  content: ""; position: absolute; inset: -20% -40%;
  background: repeating-linear-gradient(115deg, rgba(181, 211, 75, 0.07) 0 90px, rgba(181, 211, 75, 0) 90px 180px);
  animation: mow 26s linear infinite;
}
@keyframes mow { to { transform: translateX(196px); } }
/* Season dial (Wartung) */
.season-dial {
  position: absolute; right: clamp(20px, 6vw, 96px); top: 50%; transform: translateY(-44%);
  width: 300px; padding: 22px 22px 18px; text-align: center;
  background: rgba(14, 36, 70, 0.55); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--r-xl);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  pointer-events: auto;
}
.season-dial svg { width: 100%; height: auto; }
.season-dial__now { margin-top: 8px; font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-lime); }
.season-dial__task { font-family: var(--f-display); font-size: 1.45rem; line-height: 1.15; color: var(--c-cream); margin-top: 4px; }
.season-dial a { display: inline-flex; margin-top: 12px; font-size: var(--t-sm); font-weight: 600; color: var(--c-lime); text-decoration: underline; text-underline-offset: 3px; }
.season-dial .now-pulse { transform-box: fill-box; transform-origin: center; animation: hq-pulse 2.4s var(--ease) infinite; }
@media (max-width: 1100px) { .season-dial { display: none; } }
@media (max-width: 720px) {
  .subhero { min-height: 0; padding: 48px 0 52px; }
  .subhero__media::after { background: linear-gradient(0deg, rgba(14, 36, 70, 0.95) 0%, rgba(14, 36, 70, 0.78) 55%, rgba(14, 36, 70, 0.45) 100%); }
  .subhero h1 { font-size: clamp(2.3rem, 10vw, 3.2rem); }
  .subhero__media--collage { grid-template-columns: 1fr 1fr; }
  .subhero__media--collage img:nth-child(3) { display: none; }
  /* The sticky bottom bar already offers "Anrufen", so the hero keeps one button. */
  .subhero .pagehero__actions .btn--ghost[href^="tel:"] { display: none; }
  .subhero__chips { gap: 6px; margin-top: 20px; }
  .subhero__chips li { padding: 6px 11px; gap: 6px; font-size: 0.76rem; }
}
@media (prefers-reduced-motion: reduce) {
  .subhero__media img, .subhero__fx--stripes::before { animation: none; }
}

/* -- Content blocks for Ratgeber & Einsatzgebiet ------------------------- */
.block-head { max-width: 760px; margin-bottom: clamp(24px, 3vw, 40px); }
.block-head h2:where(:not(.h3, .h4)) { font-size: clamp(2rem, 4vw, 3rem); }
.block-head p { margin-top: 14px; font-size: var(--t-md); line-height: 1.65; }
.icon-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.icon-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.icon-card {
  padding: clamp(22px, 2.4vw, 30px);
  background: var(--c-paper); border: 1px solid var(--c-line-soft); border-radius: var(--r-lg);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
a.icon-card:hover, .icon-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.icon-card .ico { width: 52px; height: 52px; border-radius: var(--r-full); background: var(--c-aqua-soft); color: var(--c-aqua-deep); display: grid; place-items: center; margin-bottom: 18px; }
.icon-card .ico svg { width: 26px; height: 26px; }
.icon-card h3:where(:not(.h4)), .icon-card h2:where(.h3) { font-size: var(--t-xl); line-height: 1.2; margin-bottom: 8px; }
.icon-card p { font-size: 1rem; line-height: 1.6; }
.icon-card__link { display: inline-flex; margin-top: 14px; font-weight: 600; font-size: var(--t-sm); color: var(--c-aqua-text); }
.dark-band .icon-card__link { color: var(--c-lime); }
.dark-band .icon-card { background: rgba(246, 242, 234, 0.06); border-color: rgba(246, 242, 234, 0.12); }
.dark-band .icon-card .ico { background: rgba(181, 211, 75, 0.14); color: var(--c-lime); }
.dark-band .icon-card h3:where(:not(.h4)), .dark-band .icon-card h2:where(.h3) { color: var(--c-cream); }
@media (max-width: 1000px) { .icon-cards, .icon-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .icon-cards, .icon-cards--4 { grid-template-columns: 1fr; } }

/* Numbered step cards, connected by a dotted water line on wide screens */
.step-cards { display: grid; grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); counter-reset: sc; position: relative; }
.step-card { position: relative; padding: 26px 24px 24px; background: var(--c-white); border: 1px solid var(--c-line-soft); border-radius: var(--r-lg); box-shadow: var(--sh-1); counter-increment: sc; }
.step-card::before {
  content: counter(sc, decimal-leading-zero);
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-full);
  background: var(--c-ink); color: var(--c-cream);
  font-family: var(--f-display); font-style: italic; font-size: 1.1rem;
  margin-bottom: 16px;
}
.step-card h3:where(:not(.h4)), .step-card h2:where(.h3) { font-size: var(--t-lg); line-height: 1.25; margin-bottom: 6px; }
.step-card p { font-size: var(--t-sm); line-height: 1.6; }
@media (min-width: 901px) {
  .step-cards::before { content: ""; position: absolute; left: 6%; right: 6%; top: 48px; border-top: 3px dotted var(--c-aqua); opacity: 0.5; z-index: 0; }
  .step-card { z-index: 1; }
}
@media (max-width: 900px) { .step-cards { grid-template-columns: 1fr; } }

/* Checklist in two columns, drop bullets from .feature-list */
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
.check-grid li { border-bottom: 1px solid var(--c-line); }
@media (max-width: 700px) { .check-grid { grid-template-columns: 1fr; } }

/* Season timeline (Winterfest) */
.season { background: var(--c-white); border: 1px solid var(--c-line-soft); border-radius: var(--r-xl); padding: clamp(22px, 3vw, 36px); box-shadow: var(--sh-1); }
.season__months { display: grid; grid-template-columns: repeat(8, 1fr); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-mute); text-align: center; }
.season__months span { padding-bottom: 10px; border-bottom: 1px solid var(--c-line); }
.season__track { position: relative; height: 128px; margin-top: 14px; }
.season__bar { position: absolute; height: 34px; border-radius: var(--r-full); display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: var(--t-xs); font-weight: 700; white-space: nowrap; }
.season__bar svg { width: 16px; height: 16px; flex: none; }
.season__bar--fest { top: 0; left: calc(100% / 8 * 1.5); width: calc(100% / 8 * 1.5); background: var(--c-ink); color: var(--c-cream); }
.season__bar--frost { top: 46px; left: calc(100% / 8 * 3); width: calc(100% / 8 * 3); background: var(--c-aqua-soft); color: var(--c-aqua-text); }
.season__bar--start { top: 92px; left: calc(100% / 8 * 6); width: calc(100% / 8 * 2); background: var(--c-lime); color: var(--c-ink); }
.season__note { margin-top: 18px; font-size: var(--t-sm); color: var(--c-ink-soft); }
@media (max-width: 640px) {
  .season__months { font-size: 10px; letter-spacing: 0; }
  .season__bar { font-size: 10px; padding: 0 8px; gap: 5px; height: 30px; }
  .season__bar span { overflow: hidden; text-overflow: ellipsis; }
  .season__bar--fest { width: calc(100% / 8 * 2.2); left: calc(100% / 8 * 1.2); }
}

/* Callout with illustration */
.callout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; background: var(--c-ink); color: var(--c-cream); border-radius: var(--r-xl); padding: clamp(26px, 4vw, 52px); overflow: hidden; }
.callout h2:where(:not(.h3, .h4)) { color: var(--c-cream); font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.callout h2 em { color: var(--c-lime); }
.callout p { color: rgba(246, 242, 234, 0.82); margin-top: 14px; line-height: 1.65; }
.callout svg { width: 100%; height: auto; }
@media (max-width: 800px) { .callout { grid-template-columns: 1fr; } }

/* Two-column comparison */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.compare__col { padding: clamp(22px, 3vw, 32px); border-radius: var(--r-lg); border: 1px solid var(--c-line-soft); background: var(--c-paper); }
.compare__col--pro { background: var(--c-white); border-color: rgba(41, 181, 221, 0.4); box-shadow: var(--sh-2); }
.compare__col h3:where(:not(.h4)), .compare__col h2:where(.h3) { font-size: var(--t-xl); margin-bottom: 14px; }
.compare__col li { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--c-line-soft); font-size: 1rem; line-height: 1.5; color: var(--c-ink-soft); }
.compare__col li::before { content: "•"; color: var(--c-ink-mute); flex: none; width: 14px; }
.compare__col--pro li::before { content: "✓"; color: var(--c-aqua-text); font-weight: 700; }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }

/* Water source cards */
.source-card { position: relative; padding: clamp(24px, 2.6vw, 32px); background: var(--c-white); border: 1px solid var(--c-line-soft); border-radius: var(--r-xl); box-shadow: var(--sh-1); }
.source-card .ico { width: 58px; height: 58px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--c-aqua-soft), #fff); color: var(--c-aqua-deep); display: grid; place-items: center; margin-bottom: 18px; }
.source-card .ico svg { width: 30px; height: 30px; }
.source-card h3:where(:not(.h4)), .source-card h2:where(.h3) { font-size: var(--t-xl); margin-bottom: 6px; }
.source-card > p { font-size: var(--t-sm); line-height: 1.6; }
.source-card dl { margin-top: 16px; display: grid; gap: 10px; }
.source-card dt { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-aqua-text); }
.source-card dd { font-size: var(--t-sm); line-height: 1.55; color: var(--c-ink); }

/* Flow diagram */
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; align-items: stretch; }
.flow__step { position: relative; padding: 22px 18px; text-align: center; background: var(--c-white); border: 1px solid var(--c-line-soft); border-radius: var(--r-lg); margin: 0 14px; }
.flow__step .ico { width: 46px; height: 46px; margin: 0 auto 12px; border-radius: var(--r-full); background: var(--c-aqua-soft); color: var(--c-aqua-deep); display: grid; place-items: center; }
.flow__step .ico svg { width: 24px; height: 24px; }
.flow__step b { display: block; font-size: var(--t-md); margin-bottom: 4px; }
.flow__step span { font-size: var(--t-xs); color: var(--c-ink-mute); line-height: 1.45; display: block; }
.flow__step + .flow__step::before { content: "→"; position: absolute; left: -24px; top: 50%; transform: translateY(-50%); color: var(--c-aqua-deep); font-size: 1.3rem; }
@media (max-width: 800px) {
  .flow { grid-template-columns: 1fr; gap: 26px; }
  .flow__step { margin: 0; }
  .flow__step + .flow__step::before { content: "↓"; left: 50%; top: -24px; transform: translateX(-50%); }
}

/* Service area map */
.area-map { margin: 0; background: var(--c-white); border-radius: var(--r-xl); box-shadow: var(--sh-3); padding: 14px; }
.area-map svg { width: 100%; height: auto; display: block; }
.area-map .town text, .area-map .label { font-family: var(--f-body); font-size: 15px; fill: var(--c-ink); font-weight: 600; }
.area-map .town--minor text { font-weight: 500; fill: var(--c-ink-soft); font-size: 13px; }
.area-map .hq-pulse { transform-box: fill-box; transform-origin: center; animation: hq-pulse 2.6s var(--ease) infinite; }
/* A10, Havel and the eight districts around Berlin (map built in build-pages / areamap.js).
   No focus areas on purpose: the soft area fades out at the edge, the work goes on beyond. */
.area-map .a10 { fill: none; stroke: #AEB9CB; stroke-width: 4; stroke-linejoin: round; }
.area-map .havel { fill: none; stroke: #29B5DD; stroke-width: 5; stroke-linecap: round; opacity: 0.45; }
.area-map .havel--core { stroke: #CBEFF8; stroke-width: 1.4; opacity: 0.9; }
.area-map .town text, .area-map .map-county, .area-map .map-note { paint-order: stroke; stroke: #F7FAF8; stroke-width: 4px; stroke-linejoin: round; }
.area-map .map-county { font-family: var(--f-body); font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; fill: #8A97AE; }
.area-map .map-note--water { font-family: var(--f-display); font-style: italic; font-size: 13px; fill: #1A8AB0; }
.area-map .shield { font-family: var(--f-body); font-size: 11px; font-weight: 800; fill: #fff; }
.area-map .map-scale text { font-family: var(--f-body); font-size: 11.5px; font-weight: 600; fill: var(--c-ink-soft); }
.place-chips--links li { padding: 0; }
.place-chips--links a { display: block; padding: 8px 14px; border-radius: inherit; color: var(--c-ink); font-weight: 600; transition: background var(--dur-1); }
.place-chips--links a:hover { background: var(--c-lime-soft); }
.place-group { font-family: var(--f-body); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-mute); margin: 18px 0 10px; }
@keyframes hq-pulse { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(2.4); opacity: 0; } }
.area-map figcaption { padding: 10px 8px 4px; font-size: var(--t-xs); color: var(--c-ink-mute); }
.place-card { padding: clamp(22px, 3vw, 32px); background: var(--c-paper); border: 1px solid var(--c-line-soft); border-radius: var(--r-xl); }
.place-card h3:where(:not(.h4)), .place-card h2:where(.h3) { font-size: var(--t-2xl); margin-bottom: 8px; }
.place-card > p { font-size: 1rem; line-height: 1.6; margin-bottom: 18px; }

/* Ratgeber teaser on service pages */
.guide-teaser { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.guide-teaser a {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 18px 20px; background: var(--c-white); border: 1px solid var(--c-line-soft); border-radius: var(--r-lg);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2);
}
.guide-teaser a:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: rgba(41, 181, 221, 0.4); }
.guide-teaser .ico { width: 52px; height: 52px; border-radius: var(--r-full); background: var(--c-aqua-soft); color: var(--c-aqua-deep); display: grid; place-items: center; }
.guide-teaser .ico svg { width: 24px; height: 24px; }
.guide-teaser small { display: block; font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-aqua-text); margin-bottom: 3px; }
.guide-teaser b { font-family: var(--f-display); font-weight: 400; font-size: var(--t-lg); line-height: 1.2; color: var(--c-ink); }
.guide-teaser .go { color: var(--c-aqua-deep); font-size: 1.2rem; transition: transform var(--dur-2) var(--ease); }
.guide-teaser a:hover .go { transform: translateX(5px); }

/* -- Google reviews block ------------------------------------------------ */
/* One source of truth in the HTML (each review once, readable without JS).
   main.js clones the cards into a slowly drifting band; phones swipe instead. */
.g-reviews__head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(18px, 3vw, 36px); align-items: center;
  padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 36px);
  background: var(--c-white); border: 1px solid var(--c-line-soft); border-radius: var(--r-xl); box-shadow: var(--sh-2);
}
.g-reviews__logo { width: 64px; height: 64px; border-radius: var(--r-lg); background: var(--c-cream); display: grid; place-items: center; }
.g-reviews__logo svg { width: 34px; height: 34px; }
.g-reviews__title { font-family: var(--f-display); font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.1; color: var(--c-ink); }
.g-reviews__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; font-size: var(--t-sm); color: var(--c-ink-soft); }
.g-reviews__score { font-family: var(--f-display); font-size: 1.6rem; color: var(--c-ink); line-height: 1; }
.g-stars { display: inline-flex; gap: 2px; color: #F4B400; }
.g-stars svg { width: 20px; height: 20px; }
.g-reviews__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.g-reviews__actions .btn { padding: 13px 20px; }
/* position: relative is required: the .sr-only spans in the cards are absolutely
   positioned and would otherwise escape the clipping and widen the whole page. */
.g-reviews__viewport {
  position: relative;
  margin-top: clamp(20px, 3vw, 32px);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.g-reviews__track { display: flex; gap: 18px; width: max-content; padding: 6px 0 14px; }
.g-reviews.is-drifting .g-reviews__track { animation: g-drift var(--g-dur, 60s) linear infinite; }
.g-reviews.is-drifting .g-reviews__viewport:hover .g-reviews__track,
.g-reviews.is-drifting .g-reviews__viewport:focus-within .g-reviews__track { animation-play-state: paused; }
@keyframes g-drift { to { transform: translateX(calc(-50% - 9px)); } }
.g-review {
  flex: 0 0 340px;
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px;
  background: var(--c-white); border: 1px solid var(--c-line-soft); border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.g-review__top { display: flex; align-items: center; gap: 12px; }
.g-review__avatar { width: 44px; height: 44px; flex: none; border-radius: var(--r-full); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1.05rem; background: var(--av, var(--c-aqua-deep)); }
.g-review__name { font-weight: 700; color: var(--c-ink); line-height: 1.2; }
.g-review__src { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--c-ink-mute); }
.g-review__src svg { width: 13px; height: 13px; }
.g-review__g { margin-left: auto; width: 22px; height: 22px; flex: none; }
.g-review blockquote { font-size: 1rem; line-height: 1.6; color: var(--c-ink); }
.g-reviews__note { margin-top: 6px; font-size: var(--t-xs); color: var(--c-ink-mute); }
@media (max-width: 900px) {
  .g-reviews__head { grid-template-columns: auto minmax(0, 1fr); }
  .g-reviews__actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 640px) {
  .g-reviews__viewport { overflow-x: auto; scroll-snap-type: x mandatory; mask-image: none; -webkit-mask-image: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .g-reviews__viewport::-webkit-scrollbar { display: none; }
  .g-review { flex-basis: 84vw; scroll-snap-align: center; }
  .g-reviews__logo { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .g-reviews.is-drifting .g-reviews__track { animation: none; }
}

/* Fact box (Über uns): plain facts in a readable two-column list. */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); border-top: 1px solid var(--c-line); }
.facts > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.facts dt { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-mute); padding-top: 3px; }
.facts dd { color: var(--c-ink); line-height: 1.55; }
.facts a { color: var(--c-aqua-text); text-decoration: underline; }
@media (max-width: 800px) { .facts { grid-template-columns: 1fr; } .facts > div { grid-template-columns: 110px minmax(0, 1fr); } }

/* -- Blog cards -------------------------------------------- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); }
.post-card { display: flex; flex-direction: column; }
.post-card__media { aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--c-cream-2); margin-bottom: 20px; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__meta { font-size: var(--t-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-mute); margin-bottom: 10px; }
.post-card__title { font-size: var(--t-2xl); margin-bottom: 12px; transition: color var(--dur-1); }
.post-card:hover .post-card__title { color: var(--c-aqua-deep); }
.post-card__excerpt { color: var(--c-ink-soft); font-size: var(--t-sm); }
@media (max-width: 1000px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .posts { grid-template-columns: 1fr; } }

/* -- Gallery ----------------------------------------------- */
.gallery__tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
  padding: 6px 10px; border-radius: var(--r-full);
  background: rgba(246,242,234,0.92); color: var(--c-ink);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(-4px);
  transition: all var(--dur-2);
}
.gallery__item:hover .gallery__tag { opacity: 1; transform: translateY(0); }
.gallery__item .gallery__cap em {
  font-style: normal; color: var(--c-lime);
  display: block; font-size: var(--t-2xs); letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 700; margin-bottom: 4px;
}

.gallery {
  column-count: 3;
  column-gap: 20px;
}
.gallery__item {
  display: block;
  margin-bottom: 20px;
  break-inside: avoid;
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
  background: var(--c-cream-2);
}
.gallery__item img { width: 100%; height: auto; display: block; transition: transform var(--dur-3) var(--ease); }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(14, 42, 56, 0.5));
  opacity: 0; transition: opacity var(--dur-2);
}
.gallery__item:hover::after { opacity: 1; }
.gallery__cap {
  position: absolute; left: 16px; bottom: 16px; right: 16px;
  color: var(--c-cream);
  font-size: var(--t-sm); font-weight: 600;
  z-index: 2; opacity: 0; transform: translateY(8px);
  transition: all var(--dur-2);
}
.gallery__item:hover .gallery__cap { opacity: 1; transform: translateY(0); }
@media (max-width: 1000px) { .gallery { column-count: 2; } }
@media (max-width: 600px) { .gallery { column-count: 1; } }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(14, 42, 56, 0.96);
  display: none;
  align-items: center; justify-content: center;
  padding: 5vw;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: var(--r-md); }
.lightbox__close {
  position: absolute; top: 24px; right: 24px;
  width: 48px; height: 48px; border-radius: var(--r-full);
  background: var(--c-cream); color: var(--c-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: var(--r-full); background: rgba(246, 242, 234, 0.1); color: var(--c-cream); display: flex; align-items: center; justify-content: center; transition: background var(--dur-1); }
.lightbox__nav:hover { background: var(--c-cream); color: var(--c-ink); }
.lightbox__prev { left: 24px; }
.lightbox__next { right: 24px; }

/* -- Contact form ----------------------------------------- */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field label { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--c-ink-mute); font-weight: 600; }
.field input, .field select, .field textarea {
  padding: 14px 16px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: var(--t-md);
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--c-aqua);
  box-shadow: 0 0 0 3px var(--c-aqua-soft);
}
.field textarea { min-height: 160px; resize: vertical; }
/* minmax(0,1fr): a long label must not widen its column. Labels stay on one line so both inputs of a row line up. */
.field--row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin-bottom: 20px; }
.field--row .field { margin: 0; }
.field--row .field > label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.checkbox { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-xs); color: var(--c-ink-soft); }
.checkbox input { margin-top: 1px; width: 22px; height: 22px; flex: none; accent-color: var(--c-aqua-deep); cursor: pointer; }
.checkbox { font-size: var(--t-sm); line-height: 1.5; cursor: pointer; }

/* Contact split */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.95fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
/* Form card: white on the cream page, inputs a shade darker, so fields read as fields. */
.form-card {
  background: var(--c-white);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-xl);
  padding: clamp(22px, 3.6vw, 48px);
  box-shadow: var(--sh-2);
}
.form-card h2:where(:not(.h3, .h4)) { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
.form-card .lead { font-size: clamp(1rem, 1.2vw, 1.15rem); }
.form-card__form { margin-top: 28px; }
.form-card .field input, .form-card .field select, .form-card .field textarea { background: var(--c-cream); border-color: rgba(22, 55, 101, 0.14); }
.form-card .field input:focus, .form-card .field select:focus, .form-card .field textarea:focus { background: var(--c-white); }
.form-card .chip span { background: var(--c-cream); border-color: rgba(22, 55, 101, 0.14); }
.form-card .form-step + .form-step { border-top: 1px solid var(--c-line); padding-top: 28px; }
.form-card .field textarea { min-height: 130px; }
@media (max-width: 540px) {
  .form-card { margin-inline: calc(var(--gutter) * -0.5); border-radius: var(--r-lg); padding: 22px 18px; }
}

/* Contact column: compact so it fits the viewport and can stick next to the form. */
.contact-aside { display: grid; gap: 20px; }
@media (min-width: 901px) and (min-height: 780px) {
  .contact-aside { position: sticky; top: 96px; }
}
.contact-card {
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-xl);
  padding: clamp(22px, 2.6vw, 32px);
}
.contact-card__title { font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin-top: 12px; }
.contact-card__lead { margin-top: 10px; font-size: var(--t-sm); line-height: 1.55; }
.contact-card__phone {
  display: flex; align-items: center; gap: 12px;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: var(--r-lg);
  background: var(--c-ink); color: var(--c-cream);
  font-family: var(--f-display); font-size: clamp(1.3rem, 2vw, 1.6rem);
  transition: background var(--dur-1);
}
.contact-card__phone:hover { background: var(--c-aqua-deep); }
.contact-card__phone svg { width: 22px; height: 22px; color: var(--c-lime); flex: none; }
.contact-card__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.contact-card__btns .btn { justify-content: center; padding: 13px 14px; }
.contact-card__btns .btn svg { width: 17px; height: 17px; }
.btn--wa { background: var(--c-wa); color: var(--c-white); }
.btn--wa:hover { background: var(--c-wa-dark); }
.contact-card__facts { margin-top: 18px; border-top: 1px solid var(--c-line); }
.contact-card__facts > div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--c-line-soft); font-size: var(--t-sm); }
.contact-card__facts dt { color: var(--c-ink-mute); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em; padding-top: 2px; }
.contact-card__facts dd { color: var(--c-ink); font-weight: 500; }
.contact-card__facts a:hover { color: var(--c-aqua-text); }

.contact-info { display: flex; flex-direction: column; gap: 24px; }
.contact-info__row { padding: 24px 0; border-bottom: 1px dashed var(--c-line); display: grid; grid-template-columns: 28px 1fr; gap: 18px; align-items: start; }
.contact-info__row svg { width: 22px; height: 22px; color: var(--c-aqua-deep); margin-top: 2px; }
.contact-info__label { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--c-ink-mute); margin-bottom: 6px; }
.contact-info__value { font-size: var(--t-lg); font-weight: 500; color: var(--c-ink); }
.contact-info__value a:hover { color: var(--c-aqua-text); }

.map-wrap { aspect-ratio: 16 / 11; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-2); }
.map-wrap iframe { width: 100%; height: 100%; border: 0; filter: saturate(0.9); }

/* -- Final CTA banner ------------------------------------- */
.cta-banner {
  background: var(--c-ink);
  color: var(--c-cream);
  border-radius: var(--r-xl);
  padding: clamp(48px, 8vw, 96px);
  position: relative;
  overflow: hidden;
}
.cta-banner h2:where(:not(.h3, .h4)) { color: var(--c-cream); max-width: 10.54em; margin-bottom: 20px; }
.cta-banner h2 em { color: var(--c-aqua); }
.cta-banner p { color: rgba(246, 242, 234, 0.8); max-width: 50ch; margin-bottom: 32px; }
.cta-banner .btn--primary { background: var(--c-aqua); color: var(--c-ink); }
.cta-banner .btn--primary:hover { background: var(--c-cream); }
.cta-banner__deco {
  position: absolute;
  right: -10%; top: -30%;
  width: 70%;
  opacity: 0.08;
  pointer-events: none;
}
.cta-banner--water .cta-banner__deco { display: none; } /* replaced by the rotor below */

/* -- Water details in CTA banners (injected by main.js) ---------- */
/* Drops form at the top edge, swell and fall. A pop-up rotor sprinkler in top
   view sweeps its jet across the throw arcs in the corner. Only transform and
   opacity are animated, so it runs on the compositor; animations pause while
   the banner is off screen (.is-playing) and stop for reduced motion. */
.cta-banner > :not(.cta-water):not(.cta-banner__deco) { position: relative; z-index: 1; }
.cta-water { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cta-water::before {   /* wet top edge the drops hang from */
  content: ""; position: absolute; left: 45%; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(41, 181, 221, 0.55) 30%, rgba(181, 211, 75, 0.45));
}
/* A clear water drop: almost transparent body with a dark rim, bright caustic at the
   bottom and a highlight top left, so it reads as real water on any photo. */
:root {
  --water-drop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 28'%3E%3Cdefs%3E%3CradialGradient id='b' cx='.42' cy='.62' r='.62'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.08'/%3E%3Cstop offset='.62' stop-color='%23d8f1fb' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%2306213d' stop-opacity='.6'/%3E%3C/radialGradient%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23f2fbff' stop-opacity='.9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M10 .8C10 .8 1.6 11.6 1.6 18.4a8.4 8.4 0 0 0 16.8 0C18.4 11.6 10 .8 10 .8z' fill='url(%23b)' stroke='%23fff' stroke-opacity='.4' stroke-width='.7'/%3E%3Cpath d='M4.4 20.6a6 6 0 0 0 11.2 0' fill='none' stroke='url(%23c)' stroke-width='1.5' stroke-linecap='round'/%3E%3Cellipse cx='6.9' cy='15.2' rx='1.5' ry='2.7' transform='rotate(24 6.9 15.2)' fill='%23fff' fill-opacity='.9'/%3E%3Ccircle cx='13.4' cy='22.4' r='.75' fill='%23fff' fill-opacity='.55'/%3E%3C/svg%3E");
}
.cta-water__drop {
  position: absolute; top: 0;
  width: 11px; height: 15px; margin-left: -5px;
  background: var(--water-drop) no-repeat center / contain;
  transform-origin: 50% 0;
  opacity: 0;
  animation: cta-drip 9s linear infinite;
  animation-play-state: paused;
}
@keyframes cta-drip {
  0%   { opacity: 0;   transform: translateY(-4px) scale(0.25); animation-timing-function: ease-out; }
  10%  { opacity: 0.95; }
  46%  { opacity: 0.95; transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  68%  { opacity: 0.85; transform: translateY(var(--fall, 240px)) scale(0.8, 1.2); }
  72%  { opacity: 0;   transform: translateY(var(--fall, 240px)) scale(0.8, 1.2); }
  100% { opacity: 0;   transform: translateY(var(--fall, 240px)) scale(0.8, 1.2); }
}
.cta-water__range, .cta-water__jet {
  position: absolute; right: 0; bottom: 0;
  width: min(46%, 430px); height: auto;
}
.cta-water__range { opacity: 0.32; }
.cta-water__jet {
  opacity: 0.75;
  transform-origin: 90% 90%;   /* = sprinkler head at (360, 360) of the 400 viewBox */
  animation: rotor-sweep 11s ease-in-out infinite alternate;
  animation-play-state: paused;
  will-change: transform;
}
@keyframes rotor-sweep {
  from { transform: rotate(-36deg); }
  to   { transform: rotate(36deg); }
}
.cta-water.is-playing .cta-water__drop,
.cta-water.is-playing .cta-water__jet { animation-play-state: running; }
@media (max-width: 720px) {
  .cta-water__range, .cta-water__jet { width: 62%; }
  .cta-water__jet { opacity: 0.55; }
  .cta-water__drop:nth-child(n+6) { display: none; } /* fewer drops over the narrow text column */
}
@media (prefers-reduced-motion: reduce) {
  .cta-water__drop { display: none; }
  .cta-water__jet { animation: none; transform: none; }
}

/* -- Water in the photo heroes (.subhero, injected by main.js) --------------- */
/* Deliberately quiet: a side-view sprinkler jet from the lower right edge that sways a
   little and glints (two droplet layers cross-fade), plus a few single drops that form at
   the top edge and fall. Transform and opacity only, paused off screen. */
.hero-water { position: absolute; inset: 0; pointer-events: none; }
.hero-drop {
  position: absolute; top: 0;
  width: 9px; height: 13px; margin-left: -4px;
  background: var(--water-drop) no-repeat center / contain;
  transform-origin: 50% 0; opacity: 0;
  animation: hero-drip 16s linear infinite; animation-play-state: paused;
}
@keyframes hero-drip {
  0%   { opacity: 0;    transform: translateY(-3px) scale(0.3); animation-timing-function: ease-out; }
  8%   { opacity: 0.8; }
  36%  { opacity: 0.8;  transform: translateY(0) scale(1); animation-timing-function: ease-in-out; }
  41%  { opacity: 0.8;  transform: translateY(2px) scale(0.94, 1.1); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.6); }
  50%  { opacity: 0;    transform: translateY(var(--fall, 300px)) scale(0.75, 1.3); }
  100% { opacity: 0;    transform: translateY(var(--fall, 300px)) scale(0.75, 1.3); }
}
.hero-spray {
  position: absolute; right: 0; bottom: 0;
  width: min(46%, 600px); aspect-ratio: 600 / 340;
  opacity: 0.5;
  transform-origin: 98% 99%;   /* = nozzle at (588, 338) of the 600×340 box */
  animation: spray-sway 8s ease-in-out infinite alternate; animation-play-state: paused;
  will-change: transform;
}
.hero-spray svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-spray__a { animation: spray-glint 1.3s ease-in-out infinite alternate; animation-play-state: paused; }
.hero-spray__b { opacity: 0.35; animation: spray-glint 1.3s ease-in-out infinite alternate-reverse; animation-play-state: paused; }
@keyframes spray-glint { from { opacity: 1; } to { opacity: 0.35; } }
@keyframes spray-sway { from { transform: rotate(-2.2deg); } to { transform: rotate(1.6deg); } }
.hero-water.is-playing .hero-drop,
.hero-water.is-playing .hero-spray,
.hero-water.is-playing .hero-spray svg { animation-play-state: running; }
@media (max-width: 720px) {
  .hero-spray { width: 82%; opacity: 0.3; }
  .hero-drop--wide { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-drop { display: none; }
  .hero-spray, .hero-spray svg { animation: none; }
}

/* -- Footer ------------------------------------------------ */
/* Contact strip with icons on top, then brand + three link columns, legal links, credit.
   A thin water line (aqua to lime) on top and a faint drop as watermark. */
.site-footer {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--c-ink);
  color: var(--c-cream);
  padding: clamp(48px, 6vw, 72px) 0 28px;
}
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--c-aqua), var(--c-lime)); }
.site-footer__drop { position: absolute; z-index: -1; right: -70px; bottom: -90px; width: clamp(220px, 26vw, 360px); height: auto; fill: rgba(246, 242, 234, 0.035); pointer-events: none; }
.footer-contact { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: clamp(40px, 5vw, 60px); }
.footer-contact > li > a, .footer-contact > li > div {
  display: flex; align-items: center; gap: 14px; height: 100%;
  padding: 16px 18px; border-radius: var(--r-lg);
  background: rgba(246, 242, 234, 0.05); border: 1px solid rgba(246, 242, 234, 0.1);
  color: var(--c-cream); font-size: var(--t-sm); font-weight: 600; line-height: 1.35;
  transition: background var(--dur-1), border-color var(--dur-1), transform var(--dur-1);
}
.footer-contact > li > a:hover { background: rgba(246, 242, 234, 0.09); border-color: rgba(181, 211, 75, 0.5); transform: translateY(-2px); }
.footer-contact small { display: block; margin-bottom: 3px; font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-lime); }
.footer-contact > li span:last-child { min-width: 0; overflow-wrap: anywhere; }
.footer-contact__ico { flex: none; width: 44px; height: 44px; border-radius: var(--r-full); display: grid; place-items: center; background: rgba(41, 181, 221, 0.16); color: var(--c-aqua); }
.footer-contact__ico svg { width: 20px; height: 20px; }
.footer-contact__ico--wa { background: rgba(37, 211, 102, 0.16); color: #4ADE80; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1.15fr 0.9fr;
  gap: 48px;
  margin-bottom: 48px;
}
@media (max-width: 1100px) {
  .footer-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-about { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 0 32px; align-items: start; }
  .footer-about .footer-brand { grid-row: span 3; }
}
@media (max-width: 640px) {
  .footer-contact > li > a, .footer-contact > li > div { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  /* E-mail address and hours need the full width, side by side they break mid-word */
  .footer-contact > li:nth-child(n+3) { grid-column: 1 / -1; }
  .footer-contact > li:nth-child(n+3) > a, .footer-contact > li:nth-child(n+3) > div { flex-direction: row; align-items: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .footer-about { display: block; }
  .footer-grid > nav:nth-of-type(2) { grid-column: 1 / -1; order: 3; } /* Ratgeber: long labels get the full width */
}
.footer-brand { display: inline-block; margin-bottom: 18px; }
.footer-brand img { height: 124px; width: auto; display: block; filter: brightness(0) invert(1); opacity: 0.95; }
@media (max-width: 600px) {
  .footer-brand img { height: 104px; }
}
.footer-tagline { color: rgba(246, 242, 234, 0.7); max-width: 36ch; font-size: var(--t-sm); }
.footer-address { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: var(--t-sm); line-height: 1.5; color: rgba(246, 242, 234, 0.82); }
.footer-address svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--c-lime); }
.footer-trust { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.footer-rating { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-full); background: rgba(246, 242, 234, 0.08); font-size: var(--t-xs); color: var(--c-cream); transition: background var(--dur-1); }
.footer-rating:hover { background: rgba(246, 242, 234, 0.14); }
.footer-rating b { font-weight: 800; }
.footer-rating__stars { display: inline-flex; gap: 1px; color: #FBBC05; }
.footer-rating__stars svg { width: 13px; height: 13px; }
/* Static footer in the HTML (no-JS visitors and crawlers); layout.js swaps it for the full one. */
.site-footer--static { padding: 40px 0; font-size: var(--t-sm); }
.site-footer--static p { color: rgba(246, 242, 234, 0.8); margin-bottom: 10px; }
.site-footer--static nav { color: rgba(246, 242, 234, 0.4); line-height: 2; }
.site-footer--static a { color: var(--c-cream); text-decoration: underline; text-underline-offset: 3px; }
.footer-col__title {
  line-height: 1.04;
  display: flex; align-items: center; gap: 10px;
  color: rgba(246, 242, 234, 0.75);
  font-family: var(--f-body);
  font-weight: 700;
  font-size: var(--t-2xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 16px;
}
.footer-col__title::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--c-lime); }
.footer-links li { margin-bottom: 2px; }
.footer-links a { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; color: rgba(246, 242, 234, 0.85); font-size: var(--t-sm); line-height: 1.4; transition: color var(--dur-1), transform var(--dur-1); }
.footer-links a:hover { color: var(--c-cream); transform: translateX(3px); }
.footer-links--ico a svg { flex: none; width: 18px; height: 18px; color: var(--c-aqua); }
.footer-links--ico a:hover svg { color: var(--c-lime); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 12px 24px;
  padding-top: 24px; border-top: 1px solid rgba(246, 242, 234, 0.12);
  font-size: var(--t-xs); color: rgba(246, 242, 234, 0.6);
  flex-wrap: wrap;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer-bottom a { padding: 6px 0; }
.footer-bottom a:hover { color: var(--c-aqua); }
.socials { display: inline-flex; gap: 10px; }
.socials a {
  width: 36px; height: 36px; border-radius: var(--r-full);
  background: rgba(246, 242, 234, 0.08);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--dur-1);
}
.socials a:hover { background: var(--c-aqua); color: var(--c-ink); }
.socials svg { width: 16px; height: 16px; }

/* -- Chatbot widget --------------------------------------- */
.chatbot-toggle {
  position: fixed; bottom: 24px; right: 24px; z-index: 75;
  width: 64px; height: 64px;
  border-radius: var(--r-full);
  background: var(--c-aqua-deep);
  color: var(--c-cream);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(22, 55, 101, 0.3);
  transition: all var(--dur-2) var(--ease);
  cursor: pointer;
  border: none;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.chatbot-toggle:hover { transform: scale(1.06); background: var(--c-ink); }
.chatbot-toggle svg { width: 28px; height: 28px; }
.chatbot-toggle__badge {
  position: absolute;
  top: -2px; right: -2px;
  width: 14px; height: 14px;
  border-radius: var(--r-full);
  background: var(--c-lime);
  border: 2px solid var(--c-cream);
}

.chatbot {
  position: fixed; bottom: 24px; right: 24px; z-index: 95;
  width: min(420px, calc(100vw - 24px));
  height: min(640px, calc(100vh - 48px));
  background: var(--c-paper);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 60px rgba(22, 55, 101, 0.35);
  display: none;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-line);
}
.chatbot.is-open { display: flex; animation: chatbot-in 350ms var(--ease) both; }
@keyframes chatbot-in {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.chatbot__head {
  background: var(--c-ink);
  color: var(--c-cream);
  padding: 18px 20px;
  display: flex; align-items: center; gap: 12px;
}
.chatbot__avatar {
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  background: var(--c-aqua);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chatbot__avatar svg { width: 20px; height: 20px; color: var(--c-ink); }
.chatbot__name { font-weight: 600; font-size: var(--t-sm); }
.chatbot__status { font-size: var(--t-2xs); color: rgba(246, 242, 234, 0.65); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
/* Static dot on purpose: Flora is scripted, a pulsing "online" dot would promise a live person. */
.chatbot__status::before { content: ""; width: 7px; height: 7px; border-radius: var(--r-full); background: var(--c-lime); }
.chatbot__close {
  margin-left: auto;
  width: 32px; height: 32px;
  border-radius: var(--r-full);
  background: rgba(246, 242, 234, 0.1);
  color: var(--c-cream);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.chatbot__close:hover { background: rgba(246, 242, 234, 0.2); }
.chatbot__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--c-cream);
}
.chat-msg {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: var(--r-lg);
  font-size: var(--t-sm);
  line-height: 1.5;
  animation: msg-in 320ms var(--ease) both;
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.chat-msg--bot { background: var(--c-paper); color: var(--c-ink); align-self: flex-start; border-bottom-left-radius: 4px; box-shadow: 0 2px 4px rgba(22,55,101,0.06); }
.chat-msg--user { background: var(--c-aqua-deep); color: var(--c-cream); align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-msg strong { color: var(--c-aqua-text); }
.chat-msg--user strong { color: var(--c-lime); }
.chat-msg--summary { background: linear-gradient(180deg, var(--c-aqua-soft), var(--c-paper)); color: var(--c-ink); align-self: stretch; max-width: 100%; border: 1px solid var(--c-aqua); padding: 18px; }
.chat-msg--summary h5 { font-family: var(--f-display); font-size: 18px; margin-bottom: 10px; color: var(--c-ink); }
.chat-msg--summary dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: var(--t-xs); }
.chat-msg--summary dt { color: var(--c-ink-mute); font-weight: 500; }
.chat-msg--summary dd { color: var(--c-ink); font-weight: 600; }
.chat-options {
  display: flex; flex-direction: column; gap: 6px;
  align-self: stretch;
  margin-top: 4px;
}
.chat-option {
  text-align: left;
  padding: 11px 14px;
  border-radius: var(--r-md);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  font-size: var(--t-sm);
  color: var(--c-ink);
  cursor: pointer;
  transition: all var(--dur-1);
}
.chat-option:hover { border-color: var(--c-aqua); background: var(--c-aqua-soft); transform: translateX(2px); }
.chat-option--primary { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-cream); font-weight: 600; }
.chat-option--primary:hover { background: var(--c-aqua-deep); border-color: var(--c-aqua-deep); color: var(--c-cream); }
.chat-note { align-self: stretch; font-size: var(--t-2xs); line-height: 1.5; color: var(--c-ink-mute); padding: 0 4px; }
.chat-note a { color: var(--c-aqua-text); text-decoration: underline; }
.chatbot__skip {
  display: none;
  padding: 0 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--c-line);
  font-size: var(--t-xs); font-weight: 600; color: var(--c-ink-soft);
  white-space: nowrap;
}
.chatbot__skip.is-shown { display: inline-flex; align-items: center; }
.chatbot__skip:hover { border-color: var(--c-aqua); color: var(--c-ink); }
.chat-typing {
  display: inline-flex; gap: 4px;
  padding: 12px 16px;
  background: var(--c-paper);
  border-radius: var(--r-lg);
  align-self: flex-start;
  box-shadow: 0 2px 4px rgba(22,55,101,0.06);
}
.chat-typing span { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--c-ink-mute); animation: typing 1.2s ease infinite; }
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.chatbot__foot {
  padding: 14px 16px;
  border-top: 1px solid var(--c-line);
  background: var(--c-paper);
  display: flex; gap: 8px;
}
.chatbot__input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  background: var(--c-cream);
}
.chatbot__input:focus { outline: none; border-color: var(--c-aqua); }
.chatbot__send {
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  background: var(--c-ink);
  color: var(--c-cream);
  display: flex; align-items: center; justify-content: center;
}
.chatbot__send:hover { background: var(--c-aqua-deep); }

.chatbot__input { font-size: 16px; } /* prevent iOS auto-zoom on focus */
.chat-option { min-height: 48px; }   /* a11y touch target */

/* Body lock while chat is open on mobile */
body.chatbot-open { overflow: hidden; }

@media (max-width: 720px) {
  /* Fullscreen chatbot on phones */
  .chatbot {
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100dvh !important; height: 100vh;
    max-width: none !important; max-height: none !important;
    border-radius: 0;
    border: 0;
  }
  .chatbot__head { padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top)); }
  .chatbot__body { padding: 16px; padding-bottom: 16px; }
  .chatbot__foot { padding: 12px 14px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .chatbot__close { width: 40px; height: 40px; font-size: 24px; }
  .chatbot__avatar { width: 36px; height: 36px; }
  .chat-msg { max-width: 92%; font-size: 15px; }
  .chat-option { padding: 14px 16px; font-size: 15px; }
  .chatbot-toggle {
    right: 16px;
    bottom: calc(56px + 12px + env(safe-area-inset-bottom, 0px)); /* über dem 56px Aktions-Balken */
    width: 56px; height: 56px;
    z-index: 75;
  }
}

/* When chat is open, hide everything except the chatbot itself */
body.chatbot-open .chatbot-toggle,
body.chatbot-open .floating-cta,
body.chatbot-open .cookie,
body.chatbot-open .site-header,
body.chatbot-open .topbar { display: none !important; }

/* -- Floating CTAs (Mobile-only sticky bar) ----------------- */
/* Desktop: nicht angezeigt — Telefon steht im Topbar, Chatbot rechts unten */
.floating-cta { display: none; }

/* Chat-Bar-Button (im Mobile-Balken; nicht auf Desktop sichtbar) */
.chat-bar-btn { display: none; }

@media (max-width: 720px) {
  /* Mobile: voll-breiter sticky Balken mit 3 CTAs (Anrufen | WhatsApp | Chat) */
  .floating-cta {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100%;
    z-index: 60;
    background: var(--c-ink);
    box-shadow: 0 -8px 24px rgba(22, 55, 101, 0.18);
    border-top: 1px solid rgba(246, 242, 234, 0.08);
  }
  .floating-cta > * {
    height: 56px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: content-box;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    color: var(--c-cream);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: background var(--dur-1);
  }
  .floating-cta > * svg { width: 18px; height: 18px; }
  .floating-cta .phone { background: var(--c-aqua-text); }
  .floating-cta .phone:active, .floating-cta .phone:hover { background: var(--c-ink); }
  .floating-cta .whatsapp { background: var(--c-wa); }
  .floating-cta .whatsapp:active, .floating-cta .whatsapp:hover { background: var(--c-wa-dark); }
  .floating-cta .chat-bar-btn { display: inline-flex; background: var(--c-aqua); color: var(--c-ink); }
  .floating-cta .chat-bar-btn:active, .floating-cta .chat-bar-btn:hover { background: var(--c-lime); }
  .floating-cta .phone::after { content: "Anrufen"; }
  .floating-cta .whatsapp::after { content: "WhatsApp"; }
  .floating-cta .chat-bar-btn::after { content: "Chat"; font-weight: 600; }
  .floating-cta .phone-pulse::before { display: none; }

  /* Schwebender Chatbot-Toggle wird auf Mobile vom Balken-Button ersetzt */
  .chatbot-toggle { display: none !important; }

  /* Body bekommt unten Platz für den Balken, damit Footer sichtbar bleibt */
  body.has-chatbot { padding-bottom: 56px; }
  body.has-chatbot.chatbot-open { padding-bottom: 0; }
}

/* -- Cookie bar + Settings-Modal --------------------------- */
/* Calm bar across the full width at the bottom (covers the mobile action bar while open).
   "Ablehnen" and "Akzeptieren" are the same button style on purpose, "Anpassen" opens the
   modal with the single services. While open, html.cookie-open + --cookie-h (set by main.js)
   pad the page end and lift the chat button. */
.cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--c-paper);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -10px 30px rgba(22, 55, 101, 0.10);
  padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%); visibility: hidden;
  transition: transform var(--dur-3) var(--ease), visibility 0s linear var(--dur-3);
}
.cookie.is-open { transform: none; visibility: visible; transition: transform var(--dur-3) var(--ease); }
.cookie__inner { display: flex; align-items: center; gap: 14px 28px; }
/* Atlantic drop as signet instead of the usual cookie icon */
.cookie__logo { flex: none; width: 72px; height: auto; margin: -8px -10px; }
.cookie-modal__logo { flex: none; width: 60px; height: auto; margin: -6px -6px 0 -10px; }
.cookie__text { flex: 1; margin: 0; max-width: 96ch; font-size: var(--t-xs); line-height: 1.55; color: var(--c-ink-soft); }
.cookie__text strong { color: var(--c-ink); font-weight: 700; }
.cookie__text a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.cookie__actions { flex: none; display: flex; align-items: center; gap: 8px; }
.cookie .btn { min-width: 124px; justify-content: center; padding: 10px 20px; font-size: var(--t-xs); }
.cookie__more {
  background: none; border: 0; padding: 10px 12px; cursor: pointer;
  font: inherit; font-size: var(--t-xs); font-weight: 600; color: var(--c-ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.cookie__more:hover { color: var(--c-aqua-text); }
html.cookie-open body { padding-bottom: var(--cookie-h, 0px); }
html.cookie-open .chatbot-toggle { bottom: calc(var(--cookie-h, 0px) + 16px); }
@media (max-width: 900px) {
  .cookie__inner { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 12px 14px; }
  .cookie__logo { width: 68px; margin: -10px -14px 0 -12px; }
  .cookie__actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .cookie .btn { min-width: 0; }
  .cookie__more { grid-column: 1 / -1; order: 3; padding: 2px; }
}

/* Modal — appears from cookie banner OR footer link */
.cookie-modal {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(14, 30, 50, 0.6);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.cookie-modal.is-open { display: flex; animation: fade-in 280ms var(--ease) both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.cookie-modal__panel {
  background: var(--c-paper);
  border-radius: var(--r-xl);
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(22,55,101,0.4);
  animation: panel-in 320ms var(--ease) both;
}
@keyframes panel-in { from { transform: translateY(20px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
.cookie-modal__head {
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--c-line-soft);
  display: flex; align-items: flex-start; gap: 16px;
}
.cookie-modal__head h2:where(:not(.h3, .h4)) { font-family: var(--f-display); font-size: 28px; line-height: 1.1; margin-bottom: 6px; }
.cookie-modal__head p { font-size: var(--t-xs); color: var(--c-ink-soft); }
.cookie-modal__close {
  margin-left: auto; flex: none;
  width: 36px; height: 36px;
  border-radius: var(--r-full);
  background: var(--c-cream);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--c-ink);
}
.cookie-modal__body { padding: 8px 28px 16px; }
.cookie-cat {
  padding: 16px 0;
  border-bottom: 1px solid var(--c-line-soft);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 16px;
  align-items: start;
}
.cookie-cat:last-child { border-bottom: 0; }
.cookie-cat__name { font-weight: 600; font-size: var(--t-md); color: var(--c-ink); }
.cookie-cat__desc { font-size: var(--t-xs); color: var(--c-ink-soft); margin-top: 4px; line-height: 1.5; max-width: 38ch; }
.cookie-cat__locked { font-size: var(--t-2xs); color: var(--c-aqua-text); margin-top: 4px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

/* Toggle switch */
.toggle {
  position: relative;
  width: 44px; height: 24px;
  background: var(--c-line);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background var(--dur-1);
  flex-shrink: 0;
  border: 0;
  padding: 0;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: var(--r-full);
  background: var(--c-paper);
  box-shadow: 0 1px 3px rgba(22,55,101,0.2);
  transition: transform var(--dur-2) var(--ease);
}
.toggle[aria-checked="true"] { background: var(--c-aqua-deep); }
.toggle[aria-checked="true"]::after { transform: translateX(20px); }
.toggle[aria-disabled="true"] { background: var(--c-aqua); opacity: 0.7; cursor: not-allowed; }
.toggle[aria-disabled="true"]::after { transform: translateX(20px); }

.cookie-modal__foot {
  padding: 18px 28px 24px;
  background: var(--c-cream);
  border-top: 1px solid var(--c-line-soft);
  display: flex; gap: 10px; flex-wrap: wrap;
}
.cookie-modal__foot .btn { font-size: var(--t-xs); padding: 11px 18px; justify-content: center; }

.cookie-modal__head p a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 540px) {
  .cookie-modal { padding: 0; align-items: flex-end; }
  .cookie-modal__panel { border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 92vh; }
  .cookie-modal__foot { display: grid; grid-template-columns: 1fr 1fr; }
  .cookie-modal__foot [data-cookie-modal-save] { grid-column: 1 / -1; order: 3; }
}

/* -- Reveal animation (graceful — content visible by default) - */
.js [data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: 80ms; }
[data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal-delay="3"] { transition-delay: 240ms; }
[data-reveal-delay="4"] { transition-delay: 320ms; }

/* -- Partners strip (homepage logo bar) -------------------- */
.partners-strip {
  padding-block: clamp(48px, 6vw, 80px);
  text-align: center;
}
.partners-strip__head { margin-bottom: 32px; }
.partners-strip__track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 8vw, 100px);
  flex-wrap: wrap;
  padding: 32px;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.partners-strip__track img {
  max-height: 56px;
  max-width: 200px;
  object-fit: contain;
  filter: grayscale(100%) brightness(0.6);
  opacity: 0.7;
  transition: all var(--dur-2);
}
.partners-strip__track img:hover {
  filter: none;
  opacity: 1;
}
@media (max-width: 720px) {
  .partners-strip__track { gap: 32px; padding: 20px; }
  .partners-strip__track img { max-height: 40px; max-width: 130px; }
}

/* -- Marquee ------------------------------------------------ */
.marquee { overflow: hidden; padding: 32px 0; mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); }
.marquee__track { display: inline-flex; gap: 80px; animation: marquee 36s linear infinite; }
.marquee__track span { font-family: var(--f-display); font-size: clamp(2.5rem, 5vw, 5rem); font-style: italic; color: var(--c-ink); white-space: nowrap; opacity: 0.85; }
.marquee__track svg { width: 28px; color: var(--c-aqua); align-self: center; }
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* -- Misc helpers ------------------------------------------ */
.text-center { text-align: center; }
.text-right { text-align: right; }
.flex { display: flex; }
.gap-4 { gap: 16px; }
.gap-2 { gap: 8px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 32px; }
.mt-8 { margin-top: 48px; }
.mb-4 { margin-bottom: 16px; }
.mb-8 { margin-bottom: 48px; }
.max-prose { max-width: 70ch; }
/* Visible to screen readers only — for text that carries meaning the visuals imply. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.tag { display: inline-block; padding: 6px 12px; border-radius: var(--r-full); background: var(--c-aqua-soft); color: var(--c-aqua-text); font-size: var(--t-2xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* -- FAQ -------------------------------------------------- */
.faq { max-width: 880px; margin: 0 auto; border-top: 1px solid var(--c-line); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__item > summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 56px 24px 0;
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 380;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  position: relative;
  transition: color var(--dur-1);
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary:hover { color: var(--c-aqua-text); }
.faq__item > summary::after {
  content: "";
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px;
  border-radius: var(--r-full);
  background: var(--c-aqua-soft);
  background-image:
    linear-gradient(var(--c-aqua-deep), var(--c-aqua-deep)),
    linear-gradient(var(--c-aqua-deep), var(--c-aqua-deep));
  background-size: 12px 2px, 2px 12px;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: transform var(--dur-2) var(--ease), background-color var(--dur-1);
}
.faq__item[open] > summary::after {
  transform: translateY(-50%) rotate(45deg);
  background-color: var(--c-ink);
  background-image:
    linear-gradient(var(--c-cream), var(--c-cream)),
    linear-gradient(var(--c-cream), var(--c-cream));
}
.faq__item > p {
  padding: 0 56px 28px 0;
  font-size: var(--t-md);
  line-height: 1.7;
  color: var(--c-ink-soft);
  max-width: 70ch;
}

/* Prose for legal pages */
.prose { max-width: 72ch; }
.prose h2:where(:not(.h3, .h4)) { font-size: var(--t-2xl); margin-top: 48px; margin-bottom: 16px; }
.prose h3:where(:not(.h4)), .prose h2:where(.h3) { font-size: var(--t-xl); margin-top: 32px; margin-bottom: 12px; }
.prose p, .prose li { font-size: var(--t-md); margin-bottom: 16px; line-height: 1.7; color: var(--c-ink-soft); }
.prose ul { padding-left: 20px; }
.prose ul li { list-style: disc; margin-bottom: 8px; }
.prose a { color: var(--c-aqua-text); text-decoration: underline; }
.prose code { font-family: var(--f-mono); font-size: 0.85em; background: var(--c-cream-2); border-radius: var(--r-sm); padding: 1px 6px; overflow-wrap: anywhere; }
.prose h2[id] { scroll-margin-top: 110px; } /* anchor targets clear the sticky header */

/* -- Agency card (Impressum): EVERSPICE credit, look of the footer credit dialog -- */
/* Selectors start with .prose so they beat the prose list and link rules. */
.prose .agency-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(180px, 0.8fr) 1.4fr; gap: clamp(20px, 4vw, 44px); align-items: center;
  margin-top: clamp(36px, 5vw, 56px); padding: clamp(24px, 4vw, 40px);
  background: var(--c-ink); border-radius: var(--r-xl); box-shadow: var(--sh-3);
}
.prose .agency-card::before, .prose .agency-card::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.prose .agency-card::before { width: 420px; height: 420px; right: -150px; top: -190px; background: radial-gradient(circle, rgba(181, 211, 75, 0.26), rgba(181, 211, 75, 0) 70%); }
.prose .agency-card::after { width: 380px; height: 380px; left: -170px; bottom: -210px; background: radial-gradient(circle, rgba(41, 181, 221, 0.24), rgba(41, 181, 221, 0) 70%); }
.prose .agency-card__brand img { display: block; width: min(230px, 100%); height: auto; }
.prose .agency-card__claim { margin: 14px 0 0; font-family: var(--f-display); font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.25; color: rgba(246, 242, 234, 0.86); }
.prose .agency-card__claim em { color: var(--c-lime); }
.prose .agency-card h3:where(:not(.h4)), .prose .agency-card h2:where(.h3) { margin: 0 0 10px; font-family: var(--f-body); font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-lime); }
.prose .agency-card__body p { margin: 0 0 16px; font-size: var(--t-sm); line-height: 1.6; color: rgba(246, 242, 234, 0.82); }
.prose .agency-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 0; }
.prose .agency-card__tags li { list-style: none; margin: 0; padding: 5px 11px; border-radius: var(--r-full); border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06); font-size: var(--t-2xs); font-weight: 600; line-height: 1.4; color: var(--c-cream); }
.prose .agency-card__link { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: var(--r-full); background: var(--c-cream); color: var(--c-ink); font-size: var(--t-sm); font-weight: 700; text-decoration: none; transition: background var(--dur-1); }
.prose .agency-card__link:hover { background: var(--c-lime); }
@media (max-width: 720px) { .prose .agency-card { grid-template-columns: 1fr; } }

/* -- Dark band (color-block sections for rhythm) --------- */
.dark-band {
  background: var(--c-ink);
  color: var(--c-cream);
  position: relative;
  overflow: hidden;
}
.dark-band h2:where(:not(.h3, .h4)), .dark-band h3:where(:not(.h4)), .dark-band h4, .dark-band h2:where(.h3), .dark-band :is(h2, h3):where(.h4) { color: var(--c-cream); }
.dark-band p { color: rgba(246, 242, 234, 0.78); }
.dark-band .eyebrow { color: var(--c-lime); }
.dark-band .eyebrow::before { background: var(--c-lime); }
.dark-band em { color: var(--c-lime); }
.dark-band .section-head .lead { color: rgba(246, 242, 234, 0.85); }
.dark-band .feature-list li { border-bottom-color: rgba(246, 242, 234, 0.12); }
.dark-band .feature-list strong { color: var(--c-cream); }
.dark-band .feature-list span { color: rgba(246, 242, 234, 0.72); }
.dark-band .feature-list svg { color: var(--c-lime); }
.dark-band__deco-grid {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image:
    linear-gradient(var(--c-cream) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-cream) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at top right, black 30%, transparent 70%);
}
.dark-band__deco-blur {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.18;
  pointer-events: none;
}
.dark-band__deco-blur--lime { background: var(--c-lime); top: -200px; right: -200px; }
.dark-band__deco-blur--aqua { background: var(--c-aqua); bottom: -300px; left: -200px; opacity: 0.15; }
.dark-band--soft { background: linear-gradient(180deg, #0E2B57 0%, var(--c-ink) 100%); }

/* -- Service icon strip (à la alte Seite, klar & simpel) ---- */
.icon-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.icon-strip > a {
  background: var(--c-paper);
  padding: 36px 28px;
  display: flex; flex-direction: column; gap: 10px;
  transition: background var(--dur-2);
  position: relative;
}
.icon-strip > a:hover { background: var(--c-cream); }
.icon-strip > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--c-lime);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-2) var(--ease);
}
.icon-strip > a:hover::after { transform: scaleX(1); }
.icon-strip__icon {
  width: 56px; height: 56px;
  border-radius: var(--r-full);
  background: var(--c-aqua-soft);
  color: var(--c-aqua-deep);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.icon-strip__icon svg { width: 28px; height: 28px; }
.icon-strip__num {
  font-size: var(--t-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
}
.icon-strip h4, .icon-strip :is(h2, h3):where(.h4) { font-size: var(--t-xl); margin-top: 4px; }
.icon-strip p { font-size: var(--t-sm); color: var(--c-ink-soft); margin-top: 6px; }
.icon-strip__more {
  margin-top: 14px;
  font-size: var(--t-xs); font-weight: 600;
  color: var(--c-aqua-deep);
  display: inline-flex; gap: 6px; align-items: center;
}
.icon-strip__more svg { transition: transform var(--dur-2); }
.icon-strip > a:hover .icon-strip__more svg { transform: translateX(4px); }
@media (max-width: 1000px) { .icon-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .icon-strip { grid-template-columns: 1fr; } }

/* -- Big editorial image+text (full-bleed image with frame inside) -- */
.big-image {
  position: relative;
  height: clamp(420px, 60vw, 720px);
  overflow: hidden;
  background: var(--c-ink);
}
.big-image img { width: 100%; height: 100%; object-fit: cover; }
.big-image__caption {
  position: absolute; left: var(--gutter); bottom: 32px;
  color: var(--c-cream);
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.1;
  max-width: 30ch;
  text-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.big-image__caption em { color: var(--c-lime); }

/* -- Image gallery grid (project mosaic) ------------------- */
.mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 160px;
  gap: 12px;
}
.mosaic > a {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  display: block;
}
.mosaic > a img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease); }
.mosaic > a:hover img { transform: scale(1.05); }
.mosaic > a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(22,55,101,0.6)); opacity: 0; transition: opacity var(--dur-2); }
.mosaic > a:hover::after { opacity: 1; }
.mosaic .m-cap { position: absolute; left: 14px; bottom: 14px; right: 14px; color: var(--c-cream); font-size: var(--t-xs); font-weight: 600; z-index: 2; opacity: 0; transition: opacity var(--dur-2); }
.mosaic > a:hover .m-cap { opacity: 1; }
.m-a { grid-column: span 7; grid-row: span 3; }
.m-b { grid-column: span 5; grid-row: span 2; }
.m-c { grid-column: span 5; grid-row: span 1; }
.m-d { grid-column: span 4; grid-row: span 2; }
.m-e { grid-column: span 8; grid-row: span 2; }
@media (max-width: 800px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
  .m-a, .m-b, .m-c, .m-d, .m-e { grid-column: span 1; grid-row: span 2; }
}

/* -- Quote / testimonial block ----------------------------- */
.quote {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.quote__media { aspect-ratio: 4 / 5; border-radius: var(--r-xl); overflow: hidden; }
.quote__media img { width: 100%; height: 100%; object-fit: cover; }
.quote__body { padding: clamp(8px, 2vw, 24px); }
.quote__mark { font-family: var(--f-display); font-style: italic; font-size: 96px; line-height: 0.5; color: var(--c-aqua); }
.quote__text { font-family: var(--f-display); font-weight: 360; line-height: 1.15; font-size: clamp(1.5rem, 3vw, 2.5rem); margin-top: 24px; }
.quote__text em { color: var(--c-aqua-deep); font-variation-settings: "opsz" 144, "SOFT" 80; }
.dark-band .quote__text em { color: var(--c-lime); } /* aqua-deep on navy is too low in contrast */
.quote__cite { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--c-line); font-size: var(--t-sm); color: var(--c-ink-mute); }
@media (max-width: 800px) { .quote { grid-template-columns: 1fr; } }

/* -- Service-area badge (replaces map on contact) ---------- */
.area-card {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: linear-gradient(135deg, var(--c-ink) 0%, #0F2447 100%);
  color: var(--c-cream);
  padding: clamp(24px, 3vw, 36px);
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--sh-2);
}
.area-card svg.bg-grid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0.2;
  pointer-events: none;
}
.area-card__head, .area-card__cities { position: relative; z-index: 2; }
.area-card__title { font-family: var(--f-display); font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.08; color: var(--c-cream); }
.area-card__title em { color: var(--c-lime); font-style: italic; }
.area-card__cities { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.area-card__city { padding: 6px 14px; border: 1px solid rgba(255,255,255,0.2); border-radius: var(--r-full); font-size: var(--t-2xs); letter-spacing: 0.06em; background: rgba(255,255,255,0.06); }

/* -- Mobile typography polish ------------------------------ */
@media (max-width: 720px) {
  body { font-size: 16px; }
  h1 { font-size: clamp(2.5rem, 12vw, 4rem); line-height: 0.95; letter-spacing: -0.03em; }
  h2:where(:not(.h3, .h4)) { font-size: clamp(2rem, 9vw, 3rem); line-height: 1; }
  h3:where(:not(.h4)), h2:where(.h3) { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  h4, :is(h2, h3):where(.h4) { font-size: clamp(1.25rem, 5vw, 1.5rem); }
  .lead { font-size: 1.05rem; line-height: 1.55; }
  .pagehero { padding-block: clamp(48px, 8vw, 80px) clamp(24px, 4vw, 40px); }
  .section { padding-block: clamp(56px, 12vw, 96px); }
  .topbar { font-size: 11px; padding: 8px 0; }
  .topbar__group { gap: 12px; }
  .nav { padding-block: 10px; }
  .cta-banner { padding: 40px 24px; }
  .feature-list li { padding: 14px 0; }
  .stat__num { font-size: clamp(2.25rem, 11vw, 3.5rem); }
  .marquee__track { gap: 50px; }
  .marquee__track span { font-size: 2.25rem; }
  .footer-grid { gap: 32px; }
}

/* -- 404 ---------------------------------------------------- */
.err {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 9vw, 120px) clamp(48px, 7vw, 96px);
  text-align: center;
  isolation: isolate;
}
/* Concentric rings, same motif as .cta-banner__deco — sits behind the numeral. */
.err__deco {
  position: absolute;
  left: 50%; top: clamp(40px, 8vw, 90px);
  width: clamp(320px, 46vw, 620px);
  transform: translateX(-50%);
  opacity: 0.07;
  z-index: -1;
  pointer-events: none;
}
.err__inner { max-width: 780px; margin: 0 auto; }

.err__num {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1vw, 14px);
  font-family: var(--f-display);
  font-size: clamp(6.5rem, 22vw, 15rem);
  font-weight: 300;
  line-height: 0.85;
  letter-spacing: -0.05em;
  font-variation-settings: "opsz" 144, "SOFT" 70, "WONK" 1;
  color: var(--c-ink);
  margin-bottom: clamp(16px, 3vw, 32px);
}
/* The zero is a water drop. Sized in em so it tracks the numeral at every breakpoint. */
.err__drop {
  width: 0.62em;
  height: 0.82em;
  flex: none;
  color: var(--c-aqua);
  animation: err-drop 4.5s var(--ease) infinite;
  transform-origin: 50% 100%;
}
@keyframes err-drop {
  0%, 62%, 100% { transform: translateY(0) scaleY(1); }
  72%           { transform: translateY(-6%) scaleY(1.04); }
  86%           { transform: translateY(3%)  scaleY(0.97); }
}

.err__title { font-size: clamp(1.9rem, 4.6vw, 3.25rem); max-width: 11.71em; margin: 0 auto clamp(16px, 2vw, 24px); }
.err__title em { color: var(--c-aqua-deep); }
.err__lead { max-width: 54ch; margin: 0 auto; color: var(--c-ink-soft); }
.err__actions {
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: center;
  margin-top: clamp(28px, 4vw, 44px);
}
/* Requested path, filled in by main.js. Hidden until there is something to show. */
.err__path {
  display: none;
  margin-top: 28px;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-ink-mute);
  word-break: break-all;
}
.err__path.is-shown { display: block; }
.err__path code {
  background: var(--c-cream-2);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
  padding: 3px 8px;
  color: var(--c-ink-soft);
}

/* Rescue links — where a lost visitor most likely wanted to go. */
.err__nav { border-top: 1px solid var(--c-line); }
.err__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(28px, 4vw, 44px);
  text-align: left;
}
.err__card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2);
}
.err__card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--c-line); }
.err__card svg { flex: none; width: 20px; height: 20px; color: var(--c-aqua-deep); }
.err__card b { display: block; font-weight: 600; font-size: var(--t-sm); }
.err__card span { font-size: var(--t-xs); color: var(--c-ink-mute); }
.err__card .arrow { margin-left: auto; width: 15px; height: 15px; color: var(--c-ink-mute); transition: transform var(--dur-2) var(--ease); }
.err__card:hover .arrow { transform: translateX(4px); color: var(--c-aqua-deep); }

@media (max-width: 900px) { .err__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .err__grid { grid-template-columns: 1fr; }
  .err__actions .btn { width: 100%; justify-content: center; }
}

/* -- Google reviews ----------------------------------------- */
/* Real reviews from the Google Business Profile, quoted with first name + initial.
   Never add invented quotes here: fake testimonials are an UWG risk. */
.reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.review {
  display: flex; flex-direction: column; gap: 16px;
  padding: clamp(24px, 2.6vw, 32px);
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.review__stars { display: flex; gap: 3px; color: #E8B53A; }
.review__stars svg { width: 18px; height: 18px; }
.review__text { font-size: var(--t-md); line-height: 1.6; color: var(--c-ink); flex: 1; }
.review__author { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--c-line-soft); }
.review__avatar {
  width: 40px; height: 40px; flex: none;
  border-radius: var(--r-full);
  background: var(--c-aqua-soft); color: var(--c-aqua-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.review__author b { display: block; font-weight: 600; color: var(--c-ink); }
.review__author small { display: block; font-size: var(--t-xs); color: var(--c-ink-mute); }
.reviews__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: clamp(24px, 3vw, 36px);
}
.reviews__badge { display: inline-flex; align-items: center; gap: 12px; font-size: var(--t-sm); color: var(--c-ink-soft); }
.reviews__badge svg { width: 26px; height: 26px; flex: none; }
.dark-band .review { background: rgba(246, 242, 234, 0.06); border-color: rgba(246, 242, 234, 0.12); box-shadow: none; }
.dark-band .review__text { color: var(--c-cream); }
.dark-band .review__author { border-top-color: rgba(246, 242, 234, 0.12); }
.dark-band .review__author b { color: var(--c-cream); }
.dark-band .review__author small { color: rgba(246, 242, 234, 0.6); }
@media (max-width: 1000px) { .reviews { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .reviews { grid-template-columns: 1fr; }
  /* On phones: swipeable row instead of a wall of cards. */
  .reviews--scroll {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px;
    scrollbar-width: none;
  }
  .reviews--scroll::-webkit-scrollbar { display: none; }
  .reviews--scroll .review { flex: 0 0 86%; scroll-snap-align: center; }
}

/* -- Contact form: extended request ------------------------- */
.form-step {
  border: 0;
  padding: 0;
  margin: 0 0 28px;
  min-width: 0;
}
/* float takes the legend out of the fieldset border, otherwise the top line runs through it. */
.form-step > legend {
  float: left; width: 100%;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-display);
  font-size: var(--t-xl);
  color: var(--c-ink);
  margin-bottom: 18px;
  padding: 0;
}
.form-step > legend + * { clear: both; }
.form-step > legend .form-step__no {
  width: 30px; height: 30px; flex: none;
  border-radius: var(--r-full);
  background: var(--c-ink); color: var(--c-cream);
  font-family: var(--f-body); font-size: var(--t-xs); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.field__label {
  display: block;
  font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--c-ink-mute); font-weight: 600;
  margin-bottom: 10px;
}
.field__label .opt, .field label .opt { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--c-ink-mute); }
.field__hint { font-size: var(--t-xs); color: var(--c-ink-mute); line-height: 1.5; }
.field__error { display: none; font-size: var(--t-xs); color: #B3261E; font-weight: 600; }
.field.is-invalid .field__error, .choice-group.is-invalid .field__error { display: block; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #B3261E; }

/* Pill-shaped radio choices: big tap targets, readable at a glance on phones. */
.choice-group { margin-bottom: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px;
  padding: 10px 16px;
  border-radius: var(--r-full);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  font-size: var(--t-sm); font-weight: 500; color: var(--c-ink);
  cursor: pointer;
  transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1);
}
.chip span svg { width: 18px; height: 18px; color: var(--c-aqua-deep); flex: none; }
.chip:hover span { border-color: var(--c-aqua); }
.chip input:checked + span { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-cream); }
.chip input:checked + span svg { color: var(--c-lime); }
.chip input:focus-visible + span { outline: 2px solid var(--c-aqua-deep); outline-offset: 3px; }
.chips--tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.chips--tiles .chip span { width: 100%; border-radius: var(--r-md); min-height: 58px; padding: 12px 14px; font-weight: 600; }
.chips--tiles .chip:last-child:nth-child(odd) { grid-column: 1 / -1; } /* 5 topics: the fifth spans the row */
.chips--tiles .chip span svg { width: 32px; height: 32px; padding: 7px; border-radius: var(--r-full); background: var(--c-aqua-soft); }
.chips--tiles .chip input:checked + span svg { background: rgba(255,255,255,0.12); }

.field input[type="file"] {
  padding: 12px;
  background: var(--c-paper);
  border: 1px dashed var(--c-line);
  font-size: var(--t-sm);
  cursor: pointer;
}
.field input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 9px 16px;
  border: 0; border-radius: var(--r-full);
  background: var(--c-aqua-soft); color: var(--c-aqua-deep);
  font: inherit; font-weight: 600; cursor: pointer;
}
/* Honeypot: off-screen for people, still in the DOM for bots. */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { display: none; margin-top: 18px; padding: 16px 18px; border-radius: var(--r-md); font-size: var(--t-sm); line-height: 1.55; }
.form-status.is-shown { display: block; }
.form-status--ok { background: var(--c-lime-soft); color: #3E5412; border: 1px solid rgba(143, 174, 50, 0.4); }
.form-status--error { background: #FBEAE8; color: #8C1D18; border: 1px solid rgba(179, 38, 30, 0.25); }
.form-status a { text-decoration: underline; font-weight: 600; }
.form-promise { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; font-size: var(--t-xs); color: var(--c-ink-mute); }
.form-promise span { display: inline-flex; align-items: center; gap: 6px; }
.form-promise svg { width: 15px; height: 15px; color: var(--c-lime-deep); }
.btn[disabled] { opacity: 0.6; pointer-events: none; }
@media (max-width: 540px) {
  .field--row { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
  .chips--tiles { grid-template-columns: 1fr; gap: 8px; }
  .chips--tiles .chip span { min-height: 52px; }
  .field--row .field { margin-bottom: 20px; }
}

/* -- Footer credit + EVERSPICE dialog ------------------------ */
.footer-credit {
  margin-top: 20px;
  text-align: center;
  font-size: var(--t-xs);
  color: rgba(246, 242, 234, 0.66); /* 4.5:1 on navy */
}
.footer-credit a { display: inline-block; padding: 10px 6px; line-height: 1.5; transition: color var(--dur-1); }
.footer-credit b { color: rgba(246, 242, 234, 0.85); font-weight: 700; letter-spacing: 0.08em; }
.footer-credit a:hover, .footer-credit a:hover b { color: var(--c-lime); }

html.es-open { overflow: hidden; }
dialog.es {
  margin: auto; padding: 0; border: 0; background: transparent;
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: visible;
  color: rgba(246, 242, 234, 0.8);
}
dialog.es::backdrop { background: rgba(8, 22, 44, 0.66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.es__card {
  position: relative; overflow: auto;
  max-height: calc(100dvh - 24px);
  border-radius: var(--r-xl);
  padding: clamp(26px, 5vw, 40px);
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(41, 181, 221, 0.18), transparent 60%),
    radial-gradient(90% 60% at 0% 100%, rgba(181, 211, 75, 0.14), transparent 60%),
    #0F2A52;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
/* Drip line along the top edge, the brand's aqua running into lime. */
.es__card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--c-aqua), var(--c-lime) 55%, transparent); }
dialog.es[open] .es__card { animation: es-in 500ms var(--ease-out) both; }
@keyframes es-in { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }
.es__close {
  position: absolute; top: 12px; right: 12px;
  width: 44px; height: 44px; border-radius: var(--r-full);
  display: grid; place-items: center;
  color: var(--c-cream); background: rgba(255, 255, 255, 0.08);
  transition: background var(--dur-1);
}
.es__close:hover { background: rgba(255, 255, 255, 0.16); }
.es__close svg { width: 20px; height: 20px; }
.es__claim { margin-top: 10px; font-family: var(--f-display); font-style: italic; font-size: 1rem; color: rgba(246, 242, 234, 0.7); }
.es__eyebrow { display: block; margin-top: 26px; font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-lime); }
.es h2:where(:not(.h3, .h4)) { margin-top: 8px; color: var(--c-cream); font-size: clamp(1.55rem, 4.2vw, 2.1rem); line-height: 1.12; }
.es h2 em { color: var(--c-aqua); }
.es__lead { margin-top: 12px; font-size: var(--t-sm); line-height: 1.6; color: rgba(246, 242, 234, 0.8); }
.es__cta { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.es__cta .btn--primary { background: var(--c-lime); color: var(--c-ink); }
.es__cta .btn--primary:hover { background: var(--c-cream); }
.es__cta span { flex: 1 1 200px; font-size: var(--t-xs); color: rgba(246, 242, 234, 0.6); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}