/* IT Consulting Kim (ITCK) — Design: Deep Green & Cream */

/* Montserrat self-hosted (variable font, weights 100–900 in one file) instead
   of Google Fonts — no connection to Google's servers, keeps the privacy
   policy's "no external font servers" claim actually true. Latin subset
   only; covers German incl. äöüß (all within U+0000–00FF). */
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Bodoni Moda (SIL OFL), self-hosted like Montserrat; variable opsz + wght,
   Latin subset. Same face as the ITCK wordmark, used for h1–h3. */
@font-face {
  font-family: 'Bodoni Moda';
  src: url('/assets/fonts/bodoni-moda-variable.woff') format('woff');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0d0d0d;
  --bg-alt: #171717;
  --bg-elevated: #1c1c1c;
  --bg-elevated-deep: #080808;
  --text: #f4f4f4;
  --text-dim: #a3a3a3;
  --accent: #EEEDE9;
  --accent-2: #f4f4f4;
  --on-accent: #111111;
  --on-accent-2: #111111;
  --accent-soft: rgba(200, 199, 195, 0.16);
  --accent-2-soft: rgba(244, 244, 244, 0.10);
  --border: rgba(244, 244, 244, 0.12);
  --shadow: 0 20px 60px rgba(0,0,0,0.55);
  --radius: 18px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #EBEAE7;
  --bg-alt: #EBEAE7;
  --bg-elevated: #E1E0DC;
  --bg-elevated-deep: #D6D5D0;
  --text: #111111;
  --text-dim: #3D3D3D;
  --accent: #224F3E;
  --accent-2: #224F3E;
  --on-accent: #EEEDE9;
  --on-accent-2: #EEEDE9;
  --accent-soft: rgba(34, 79, 62, 0.12);
  --accent-2-soft: rgba(34, 79, 62, 0.06);
  --border: rgba(34, 79, 62, 0.16);
  --shadow: 0 20px 60px rgba(26, 61, 48,0.14);
  --ink: #224F3E;
  --graphite: #1A3D30;
  --champagne: #EBEAE7;
  --champagne-light: #F3F2EF;
  --champagne-deep: #D6D5D0;
  --champagne-band: #C9C8C3;
  --footer-bg: #313131;
  --studio-gradient: radial-gradient(ellipse 70% 85% at 66% 42%, #F3F2EF 0%, #EBEAE7 30%, #E1E0DC 62%, #D9D8D3 100%);
  --led: 0 0 14px 2px rgba(255, 255, 255, 0.7);
  color-scheme: light;
}
* { box-sizing: border-box; }
/* No CSS smooth scrolling: Lenis smooths scroll and anchors. A CSS
   scroll-behavior: smooth makes ScrollTrigger's refresh measure mid-animation
   while scrolled, which hid every .reveal below the long home hero. */
html { background: var(--bg); }
body {
  margin: 0;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* Transparent on purpose: html keeps var(--bg) as the real fallback/dark-
     theme color, so the fixed background layer (.fixed-bg, a child of body)
     shows through .hero/#leistungen wherever they don't paint their own
     background — see .fixed-bg below. */
  background: transparent;
  color: var(--text);
  transition: background .4s ease, color .4s ease;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1360px; margin: 0 auto; padding: 0 clamp(24px, 4vw, 56px); }
h1, h2, h3 { font-family: 'Bodoni Moda', Didot, 'Bodoni 72', Georgia, serif; font-weight: 500; line-height: 1.1; margin: 0; letter-spacing: -0.01em; }
/* Tracking and leading follow size: large titles tighter, small headings open up. */
h1 { letter-spacing: -0.02em; line-height: 1.06; }
h3 { letter-spacing: 0; line-height: 1.25; }
h4 { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-weight: 600; line-height: 1.25; margin: 0; letter-spacing: 0; }
p { line-height: 1.7; color: var(--text-dim); margin: 0; }
ul, ol { margin: 0; padding: 0; }

/* Skip link (a11y) */
.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 200;
  background: var(--accent); color: var(--on-accent); padding: 10px 18px; border-radius: 10px; font-weight: 700; transition: top .2s;
}
.skip-link:focus { top: 16px; }

/* Header */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  backdrop-filter: blur(16px) saturate(140%);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom: 1px solid var(--border);
  transition: background .4s ease, border-color .4s ease, text-shadow .4s ease;
}
/* Fully transparent while a pinned scrub-hero video still shows behind it
   (toggled on <body> by that page's own hero script, e.g.
   home-scrub-hero.js) — only the logo/nav text sits directly
   over the footage until the visitor scrolls into the normal page below,
   where the header's usual blurred pill comes back. The text-shadow keeps
   the (normally dark) nav text readable against whatever the video shows. */
body.scrub-hero-active header {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  text-shadow:
    0 1px 3px color-mix(in srgb, var(--bg) 85%, transparent),
    0 2px 12px color-mix(in srgb, var(--bg) 60%, transparent);
}
.nav { display: flex; align-items: center; padding-top: 14px; padding-bottom: 14px; }
/* Wordmark displays in caps (IT CONSULTING KIM); the underlying text stays
   normal case in the markup for screen readers/SEO — text-transform only
   changes rendering, not the semantic value. */
.brand { display: flex; align-items: center; gap: 14px; font-weight: 400; font-size: 0.82rem; flex-shrink: 0; letter-spacing: 0.18em; }
.brand .logo-chip { display: flex; align-items: center; padding-right: 14px; border-right: 1px solid var(--border); }
.brand .logo-chip img { height: 26px; width: auto; }
/* The tracked name next to the wordmark needs room; on narrower headers
   the wordmark alone carries the brand so the nav never collides with it. */
@media (max-width: 960px) {
  header .brand { font-size: 0; gap: 0; }
  header .brand .logo-chip { border-right: 0; padding-right: 0; }
}
/* Everything but the brand is pulled into one tight, right-aligned cluster. */
.nav-cluster { display: flex; align-items: center; gap: 40px; margin-left: auto; }
nav.main-nav ul { list-style: none; display: flex; align-items: center; gap: 32px; margin: 0; padding: 0; }
nav.main-nav ul a {
  font-size: 0.86rem; color: var(--text-dim); font-weight: 600; transition: color .2s; position: relative;
  text-transform: uppercase; letter-spacing: 0.04em;
}
nav.main-nav ul a:hover, nav.main-nav ul a[aria-current="page"] { color: var(--text); }
nav.main-nav ul a[aria-current="page"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: var(--accent); border-radius: 2px;
}
/* Kontakt — styled as a standalone shiny CTA pill rather than a plain link */
nav.main-nav ul a[href="/kontakt/"], nav.main-nav ul a[href="/en/contact/"] {
  display: inline-flex; align-items: center;
  color: var(--text); padding: 9px 20px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--accent-2-soft);
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
nav.main-nav ul a[href="/kontakt/"]::after, nav.main-nav ul a[href="/en/contact/"]::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  background-size: 250% 100%; background-position: -150% 0;
  animation: shinePass 4.5s ease-in-out infinite;
}
nav.main-nav ul a[href="/kontakt/"][aria-current="page"], nav.main-nav ul a[href="/en/contact/"][aria-current="page"] { border-color: var(--accent); background: var(--accent-soft); }
nav.main-nav ul a[href="/kontakt/"][aria-current="page"]::after, nav.main-nav ul a[href="/en/contact/"][aria-current="page"]::after { content: none; }
@media (hover: hover) and (pointer: fine) {
  nav.main-nav ul a[href="/kontakt/"]:hover, nav.main-nav ul a[href="/en/contact/"]:hover { transform: translateY(-2px); border-color: var(--accent); background: var(--accent-soft); }
}
@media (prefers-reduced-motion: reduce) {
  nav.main-nav ul a[href="/kontakt/"]::after, nav.main-nav ul a[href="/en/contact/"]::after { animation: none; }
}
/* Über uns dropdown */
.main-nav li.has-dropdown { position: relative; }
.main-nav li.has-dropdown > a::after {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 5px; margin-bottom: 1px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease;
}
.main-nav li.has-dropdown:hover > a::after,
.main-nav li.has-dropdown:focus-within > a::after { transform: rotate(-135deg); }
/* The dropdown parent's ::after is its chevron, so the active-page
   underline must not land on it (that merge drew a stray tilted dash):
   keep the chevron intact and draw the underline with ::before instead. */
.main-nav li.has-dropdown > a[aria-current="page"]::after {
  position: static; height: 6px; background: none; border-radius: 0;
}
.main-nav li.has-dropdown > a[aria-current="page"]::before {
  content: ''; position: absolute; left: 0; right: 11px; bottom: -8px; height: 2px; background: var(--accent); border-radius: 2px;
}
/* Current page inside the dropdown: a soft highlight, no underline. */
.main-nav .dropdown-inner a[aria-current="page"]::after { content: none; }
.main-nav .dropdown-inner a[aria-current="page"] { color: var(--accent); background: var(--accent-2-soft); }
.main-nav .dropdown {
  position: absolute; top: 100%; left: 50%; padding-top: 14px; min-width: 190px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity .2s ease, transform .2s cubic-bezier(0.23, 1, 0.32, 1), visibility .2s;
}
.main-nav li.has-dropdown:hover .dropdown,
.main-nav li.has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.dropdown-inner {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px;
  padding: 8px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px;
}
.dropdown-inner a {
  display: block; padding: 10px 14px; border-radius: 8px; font-size: 0.88rem;
  color: var(--text-dim); white-space: nowrap; font-weight: 500; transition: background .15s ease, color .15s ease;
}
.dropdown-inner a:hover { background: var(--accent-2-soft); color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .main-nav .dropdown { transition: opacity .2s ease, visibility .2s; }
  .main-nav li.has-dropdown:hover .dropdown, .main-nav li.has-dropdown:focus-within .dropdown { transform: translateX(-50%) translateY(0); }
}
.nav-right { display: flex; align-items: center; gap: 14px; }
/* Language switch (DE | EN): the active language sits on a fir-green thumb that slides across when the other language is chosen. Both options are real links to the matching page, so it works without JavaScript; main.js only delays navigation for the slide. */
.lang-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center; height: 36px; padding: 3px; border-radius: 999px; border: 1px solid var(--border); background: var(--accent-2-soft); flex-shrink: 0; transition: background .4s ease, border-color .4s ease; }
/* Over the homepage hero video the header is transparent; the switch follows it and gets its fill back once the visitor scrolls into the page. */
body.scrub-hero-active .lang-switch { background: transparent; }
body.scrub-hero-active .burger { background: transparent; }
.lang-switch .lang-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--accent); box-shadow: 0 4px 12px -6px rgba(26, 61, 48, .55); transition: transform .35s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.lang-switch[data-lang="en"] .lang-thumb { transform: translateX(100%); }
.lang-switch a { position: relative; z-index: 1; min-width: 38px; height: 100%; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: .08em; color: var(--text-dim); text-decoration: none; transition: color .35s; }
.lang-switch a:hover { color: var(--text); }
.lang-switch a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-switch[data-lang="de"] a[hreflang="de"], .lang-switch[data-lang="en"] a[hreflang="en"] { color: var(--on-accent); text-shadow: none; }
@media (prefers-reduced-motion: reduce) { .lang-switch .lang-thumb, .lang-switch a { transition: none; } }
.lang-note { margin-top: 12px; font-size: 0.9rem; color: var(--text-dim); }
.lang-note a { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.theme-toggle {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg-alt); display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text); transition: transform .3s ease, background .3s; flex-shrink: 0;
}
.theme-toggle:hover { transform: rotate(20deg); }
.theme-toggle svg { width: 18px; height: 18px; }
.icon-sun { display: none; }
:root[data-theme="light"] .icon-moon { display: none; }
:root[data-theme="light"] .icon-sun { display: block; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 0.92rem;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, filter .25s ease, border-color .25s ease, color .25s ease;
}
.btn-primary { background: var(--ink, var(--accent)); color: var(--on-accent); box-shadow: 0 10px 30px rgba(20, 20, 20, 0.16); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text); }
/* WhatsApp CTA — green outline, black label by default; fills solid green
   with dark label on hover. */
.btn-whatsapp {
  background: transparent; border-color: #25D366; color: var(--text);
}
.btn-whatsapp svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }


@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { transform: translateY(-2px); background: var(--graphite, var(--accent)); box-shadow: 0 16px 40px rgba(20, 20, 20, 0.22); }
  .btn-ghost:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
  .btn-whatsapp:hover { transform: translateY(-2px); background: #25D366; border-color: #25D366; color: #0b1a10; }
}
.btn:active { transform: scale(0.975); transition-duration: .1s; }
/* Focus ring in the brand green, only for keyboard focus (no blue ring after a click). */
.btn:focus-visible, .more:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn:focus:not(:focus-visible), .more:focus:not(:focus-visible) { outline: none; }
/* Primary buttons: a light streak sweeps once across on hover ("Glanzstreifen"). */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover::after { animation: btn-sweep .9s ease forwards; }
}
@keyframes btn-sweep { from { left: -60%; } to { left: 120%; } }
@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover::after { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:active { transition-property: box-shadow, background, filter, border-color, color; transform: none; }
}

.burger { display: none; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-alt); cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0; }
.burger span, .burger span::before, .burger span::after {
  content: ''; display: block; width: 18px; height: 2px; background: var(--text); position: relative; transition: transform .3s cubic-bezier(.16, 1, .3, 1), top .3s cubic-bezier(.16, 1, .3, 1), background-color .2s ease;
}
.burger span::before { position: absolute; top: -6px; }
.burger span::after { position: absolute; top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
.mobile-menu {
  position: fixed; inset: 0; z-index: 99; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .3s ease, visibility 0s linear .45s;
}
.mobile-menu.open { transform: translateY(0); opacity: 1; visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .mobile-menu.open { transform: none; transition: opacity .2s ease, visibility 0s linear .2s; }
  .mobile-menu.open { transition-delay: 0s; }
}
.mobile-menu a { font-size: 1.5rem; font-weight: 700; }
.mobile-menu a[aria-current="page"] { color: var(--accent); }
.mobile-menu a.mobile-sub { font-size: 1.05rem; font-weight: 500; color: var(--text-dim); margin-top: -16px; }

/* Reveal animation — initial hidden state and the animation itself are
   both owned by assets/js/scroll-fx.js (GSAP). No CSS opacity:0 here on
   purpose: if GSAP fails to load, .reveal elements stay visible instead
   of being permanently hidden. */
.reveal { will-change: opacity, transform, filter; }

/* Fixed Higgsfield background — see #fixedBg markup in index.html and the
   video-injection logic in scroll-fx.js. Sits behind everything (z-index
   -2), poster frame as an immediate CSS background so there's no flash of
   empty space before the video (if any) loads in. Light theme only: the
   cream/gold loop was generated for the light palette and would fight the
   near-black dark theme, so scroll-fx.js skips creating the <video> when
   data-theme="dark", and this rule hides the container outright. */
.fixed-bg {
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 60% 50% at 70% 0%, rgba(214, 213, 208, 0.5), transparent 70%),
    radial-gradient(ellipse 50% 40% at 10% 100%, rgba(243, 242, 239, 0.7), transparent 70%),
    var(--bg);
}
.fixed-bg video { width: 100%; height: 100%; object-fit: cover; display: block; }
:root[data-theme="dark"] .fixed-bg { display: none; }
/* Scrim above the video, below content — keeps text legible over the
   moving background without hiding it outright. */
@media (prefers-reduced-motion: reduce) {
  .fixed-bg { display: none; }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text);
  font-size: 0.78rem; font-weight: 700; margin-bottom: 16px; letter-spacing: 0.02em;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Pinned scroll-scrubbed hero (homepage only) — built
   to the scrub-pipeline skill's standard: a tall wrapper (420vh, ~one
   Tier-1 shot's worth of scroll) holding a sticky full-viewport stage.
   Scroll progress through the wrapper drives the video's currentTime
   (home-scrub-hero.js), so it plays once on the way down and
   reverses on the way up, then simply holds its last frame while the rest
   of the page (unrelated to this hero) scrolls past normally. Colors use
   var(--bg)/var(--text) instead of hardcoded values so the scrim and text
   glow both flip correctly if the visitor switches to dark mode. */
.scrub-hero { position: relative; height: 420vh; padding: 0; }
.scrub-hero-pin {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center;
}
.scrub-hero-media { position: absolute; inset: 0; z-index: 0; background: var(--bg-elevated-deep); }
.scrub-hero-poster {
  position: absolute; inset: 0; background-size: cover; background-position: center;
}
.scrub-hero-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .5s ease;
  will-change: transform; transform: translateZ(0);
}
.scrub-hero-media.video-ready video { opacity: 1; }
/* Global base scrim: near-transparent over the calm center, deepens toward
   var(--bg) at the edges, so the text bands (placed centrally) always sit
   on a slightly-lifted version of the footage regardless of its busiest
   frame, in either theme. */
.scrub-hero-media::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 130% 95% at 50% 48%,
    color-mix(in srgb, var(--bg) 0%, transparent) 30%,
    color-mix(in srgb, var(--bg) 58%, transparent) 100%);
}
.scrub-hero-content { position: relative; z-index: 2; width: 100%; }
.scrub-hero-content .breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 22px; flex-wrap: wrap; }
.scrub-hero-content .breadcrumb a:hover { color: var(--accent); }
.scrub-hero-content .breadcrumb span[aria-hidden] { opacity: .5; }
.scrub-band {
  opacity: 0; transform: translateY(18px); transition: none;
  display: inline-block; max-width: 100%;
  padding: 18px 26px; border-radius: var(--radius);
  backdrop-filter: blur(14px) saturate(140%);
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  text-shadow:
    0 1px 2px color-mix(in srgb, var(--bg) 92%, transparent),
    0 3px 14px color-mix(in srgb, var(--bg) 78%, transparent),
    0 10px 40px color-mix(in srgb, var(--bg) 65%, transparent);
}
/* The real photo behind this hero has no reserved calm zone for text (unlike
   a shot composed for the layout), so the chip backing above is load-bearing
   for legibility, not decorative — measured worst-case contrast without it
   dropped close to 2:1 wherever the band crossed the bright earcup. */
.scrub-band h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); max-width: 780px; }
.scrub-band p.lead { margin-top: 0; font-size: 1.08rem; max-width: 620px; }
/* JS drives opacity/transform per frame via inline style (delta-gated, see
   the script) — the transition above stays 'none' so scrubbing (including
   scrolling back up) tracks the finger/wheel exactly instead of chasing an
   eased transition meant for hover-style one-shot state changes. */

@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce) {
  .scrub-hero { height: auto; }
  .scrub-hero-pin { position: relative; height: auto; padding: 168px 0 60px; display: block; }
  .scrub-hero-media video { display: none; }
  .scrub-hero-media { position: absolute; background: var(--studio-gradient, var(--bg-elevated-deep)); }
  .scrub-hero-content .breadcrumb { color: #111111; }
  .scrub-band { opacity: 1 !important; transform: none !important; }
  /* Home: the touch-and-light still stands in for the journey; it is only
     requested inside this gate, so scrub-capable screens never fetch it. */
  .scrub-hero.scrub-hero--home { height: auto; }
  .scrub-hero--home .scrub-hero-pin { display: flex; align-items: flex-end; min-height: 82vh; padding: 120px 0 40px; }
  .scrub-hero--home .scrub-hero-media { background: var(--bg) url('/assets/img/home-hero/hero-static.webp?v=20261018') 42% center / cover no-repeat; }
  .scrub-ring, .scroll-cue { display: none; }
}
@media (max-width: 720px) {
  .scrub-hero-pin { padding: 132px 0 48px; }
}

/* Home scrub hero (home-scrub-hero.js): hands touch, the light opens into a
   portal, the office fills the frame. Two-speed scrub (see home-scrub-hero.js):
   the hands shot moves briskly, the ring-opening shot keeps the original
   calm pace; 620vh = about 5.2 screens of scroll in total so visitors reach the
   content quickly; the lerp keeps the faster scrub smooth. Both bands share one grid cell
   in the calm lower-left of the frame (cloud sky first, office wall last). */
.scrub-hero--home { height: 620vh; }
.scrub-hero--home .scrub-hero-pin { align-items: flex-end; }
.scrub-hero--home .scrub-hero-content { display: grid; padding-bottom: clamp(48px, 12vh, 120px); }
/* No glass chip: black text over the light cloud sky measured 4.7:1 at its
   worst pixel (8–10:1 on average), so the bands stand as bare type. */
.scrub-hero--home .scrub-band { grid-area: 1 / 1; justify-self: start; align-self: end; background: none; backdrop-filter: none; padding: 0; }
.hero-title {
  margin: 0; color: var(--text); font-size: clamp(1.4rem, 3.2vw, 2.6rem);
  line-height: 1.12; letter-spacing: -0.02em;
}
.scrub-ring {
  position: absolute; z-index: 2; right: clamp(20px, 4vw, 48px); bottom: clamp(20px, 4vh, 40px);
  width: 40px; height: 40px; color: var(--accent); transform: rotate(-90deg); transition: opacity .4s ease;
}
.scrub-hero-media.video-ready .scrub-ring, .scrub-hero-media.video-failed .scrub-ring { opacity: 0; }
/* Desktop scroll cue: three chevrons in the headline ink that float up and
   down together at the bottom centre of the pinned hero (lighter at the top,
   full strength at the bottom, so they read as one arrow pointing down), so
   visitors notice the video plays by scrolling. It fades in shortly after
   load and leaves for good on the first scroll (home-scrub-hero.js); the
   static phone hero never shows it. */
.scroll-cue {
  position: absolute; left: 50%; bottom: clamp(22px, 4vh, 40px); z-index: 3; translate: -50% 0;
  color: var(--text); opacity: 0; pointer-events: none; transition: opacity .6s ease;
}
.scroll-cue.is-visible { opacity: 1; }
.scroll-cue-stack { display: flex; flex-direction: column; align-items: center; animation: cueFloat 2s cubic-bezier(.45, 0, .55, 1) infinite; }
.scroll-cue-stack i {
  display: block; width: 16px; height: 16px; rotate: 45deg;
  border-right: 2.2px solid currentColor; border-bottom: 2.2px solid currentColor;
}
.scroll-cue-stack i + i { margin-top: -1px; }
.scroll-cue-stack i:nth-child(1) { opacity: .35; }
.scroll-cue-stack i:nth-child(2) { opacity: .65; }
@keyframes cueFloat { 0%, 100% { translate: 0 -4px; } 50% { translate: 0 5px; } }
@media (prefers-reduced-motion: reduce) {
  .scroll-cue-stack { animation: none; }
}

/* Page hero (inner pages) */
.page-hero {
  position: relative; padding: 168px 0 96px; overflow: hidden;
  /* Champagne (the CTA band tone) easing into the page cream; the stops
     follow a smootherstep curve so no edge or band shows. */
  background: linear-gradient(180deg, var(--champagne-band) 10%, color-mix(in srgb, var(--champagne-band) 94%, var(--bg)) 20%, color-mix(in srgb, var(--champagne-band) 84%, var(--bg)) 30%, color-mix(in srgb, var(--champagne-band) 68%, var(--bg)) 40%, color-mix(in srgb, var(--champagne-band) 50%, var(--bg)) 50%, color-mix(in srgb, var(--champagne-band) 32%, var(--bg)) 60%, color-mix(in srgb, var(--champagne-band) 16%, var(--bg)) 70%, color-mix(in srgb, var(--champagne-band) 6%, var(--bg)) 80%, var(--bg) 90%);
  /* Darker secondary text and accent on the champagne top. */
  --text-dim: #111111; --accent: var(--ink);
}
/* While the champagne top of a page hero sits under the fixed header, tint
   the header to match so no light strip floats over it (toggled in main.js). */
body.at-page-hero header {
  background: color-mix(in srgb, var(--champagne-band) 72%, transparent);
  border-bottom-color: rgba(17, 17, 17, 0.10);
}
.page-hero > .wrap { position: relative; z-index: 1; }
.page-hero .breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 22px; flex-wrap: wrap; }
.page-hero .breadcrumb a:hover { color: var(--accent); }
.page-hero .breadcrumb span[aria-hidden] { opacity: .5; }
.page-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); max-width: 780px; }
.page-hero p.lead { margin-top: 22px; font-size: 1.08rem; max-width: 620px; }
.page-hero p.lead + p { margin-top: 14px; max-width: 620px; }
/* Service header image: sits on the right and dissolves leftward into the
   champagne gradient and downward into the page, so the headline column on
   the left stays a calm surface. Below 860px it moves under the text. */
.page-hero-media {
  position: absolute; top: 0; right: 0; bottom: 0; width: 64%; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, #000 62%, transparent 100%);
  mask-composite: intersect;
}
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; display: block; }
@media (max-width: 1180px) {
  .page-hero-media {
    width: 52%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%), linear-gradient(180deg, #000 62%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 55%), linear-gradient(180deg, #000 62%, transparent 100%);
  }
  .page-hero-media img { object-position: 85% center; }
  .page-hero--image h1, .page-hero--image p.lead, .page-hero--image p.lead + p { max-width: 460px; }
}
@media (max-width: 860px) {
  .page-hero.page-hero--image { padding-bottom: calc(56vw + 24px); }
  .page-hero-media {
    top: auto; width: 100%; height: 64vw;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 72%, transparent 100%);
  }
  .page-hero-media img { object-position: 78% center; }
  .page-hero--image h1, .page-hero--image p.lead, .page-hero--image p.lead + p { max-width: none; }
}
/* Small brand mark capping off a tagline that ends on "IT" (leistungen/
   hero) — sized to the text's own line height rather than a fixed px
   value, so it scales with the fluid lead font-size instead of looking
   oversized or cramped at different widths. */

section { padding: 88px 0; position: relative; }
.section-head { max-width: 620px; margin: 0 auto 44px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.section-head p { margin-top: 16px; font-size: 1.05rem; }
.section-head a { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.section-head a:hover { color: var(--accent); }

/* trust strip */
.trust { padding: 46px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.trust .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 28px; }
.trust-item { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: var(--text-dim); font-weight: 500; }
.trust-item svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

/* services */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.services-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.services-grid.bento { grid-template-columns: repeat(12, 1fr); }
.services-grid.bento .service-card--sm { grid-column: span 4; }
.services-grid.bento .service-card--wide { grid-column: span 6; }
.services-grid.bento .service-card--feature { grid-column: 1 / -1; }
.service-card {
  background: var(--bg-elevated-deep); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 38px 30px; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
  display: flex; flex-direction: column;
}
a.service-card { color: inherit; }
.service-card:hover { transform: translateY(-8px); border-color: var(--accent); box-shadow: var(--shadow); }
.service-num { font-size: 0.8rem; font-weight: 700; color: var(--accent); letter-spacing: 0.08em; }
.service-icon {
  width: 52px; height: 52px; border-radius: 14px; background: var(--accent-2-soft);
  display: flex; align-items: center; justify-content: center; margin: 18px 0 22px; color: var(--accent);
}
.service-icon svg { width: 26px; height: 26px; }
.service-card h3 { font-size: 1.2rem; margin-bottom: 12px; }
.service-card p { font-size: 0.95rem; }
.service-card .more { margin-top: 20px; }
.service-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; }
.service-tags li { font-size: 0.76rem; font-weight: 600; color: var(--text-dim); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; }

/* service card — photo header variant */
.service-card--photo { padding: 0; overflow: hidden; }
.service-card--photo .service-card-media { aspect-ratio: 800 / 436; overflow: hidden; }
.service-card--photo .service-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-card--photo .service-card-body { padding: 30px; }
.service-card--photo .service-icon { margin-top: 0; }

/* service card — feature variant (flagship service, full-width banner) */
.service-card--feature { flex-direction: row; align-items: center; gap: 36px; padding: 42px 46px; }
.service-card--feature .service-icon { width: 72px; height: 72px; margin: 0; flex-shrink: 0; }
.service-card--feature .service-icon svg { width: 34px; height: 34px; }
.service-card--feature .service-feature-body { flex: 1; min-width: 0; }
.service-card--feature .service-num { display: block; margin-bottom: 10px; }
.service-card--feature h2, .service-card--feature h3 { font-size: 1.5rem; margin-bottom: 10px; }
.service-card--feature p { max-width: 520px; }
.service-card--feature .more { margin-top: 0; flex-shrink: 0; white-space: nowrap; }

/* service card — wide variant (two-up row) */
.service-card--wide { position: relative; }
.service-card--wide .service-wide-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.service-card--wide .service-icon { width: 48px; height: 48px; margin: 0; flex-shrink: 0; }
.service-card--wide .service-icon svg { width: 22px; height: 22px; }
.service-card--wide h2, .service-card--wide h3 { margin-bottom: 0; }
.service-card--wide .service-num { position: absolute; top: 38px; right: 30px; opacity: .5; }

@media (max-width: 720px) {
  .service-card--feature { flex-direction: column; align-items: flex-start; gap: 0; padding: 38px 30px; }
  .service-card--feature .service-icon { margin: 0 0 22px; }
  .service-card--feature .more { margin-top: 20px; }
}

/* Service rows (home): alternating text/media halves on the same 1360px
   container and side padding as .wrap, so every block lines up with the
   rest of the page; text starts flush at its column edge. */
.services-rows {
  display: flex; flex-direction: column; gap: clamp(64px, 9vw, 112px);
  max-width: 1360px; margin: 36px auto 0; padding: 0 clamp(24px, 4vw, 56px);
}
.service-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 6vw, 96px); align-items: center; }
.service-row-text { display: flex; flex-direction: column; justify-content: center; padding: 0; }
.service-row-text .service-num { display: block; margin-bottom: 14px; font-size: 1rem; color: var(--text); }
.service-row-text h3 { font-size: 1.6rem; margin-bottom: 14px; }
.service-row-text p { font-size: 1rem; max-width: 460px; }
.service-row-text .service-tags { margin-top: 20px; }
.service-row-text .more { margin-top: 24px; align-self: flex-start; }
@keyframes shinePass {
  0%, 88%, 100% { background-position: -150% 0; }
  38%, 58% { background-position: 150% 0; }
}

/* "Mehr erfahren" pill button — dark metallic pill with an animated sheen
   sweep, a CSS approximation of the reference liquid-metal shader button
   (this static site has no bundler to run the real WebGL version). Shared
   by every standalone "Mehr erfahren" CTA (service rows, service cards,
   coverflow caption) — kept separate from .btn.btn-primary so the Kontakt
   CTA elsewhere is unaffected. */
.more {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: fit-content;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 0.85rem; font-weight: 600;
  color: #EEEDE9;
  background: linear-gradient(180deg, #2E6B55 0%, #1A3D30 100%);
  box-shadow:
    0 0 0 1px rgba(26, 61, 48, 0.35),
    0 10px 22px -10px rgba(26, 61, 48, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.more::before {
  content: '';
  position: absolute; inset: -60% -20%;
  background: linear-gradient(75deg, transparent 42%, rgba(255, 255, 255, 0.35) 50%, transparent 58%);
  background-size: 55% 100%; background-repeat: no-repeat; background-position: -80% 0;
  animation: moreSheen 6s ease-in-out infinite;
  pointer-events: none; z-index: 0;
}
@keyframes moreSheen {
  0%, 15% { background-position: -80% 0; }
  50%, 70% { background-position: 180% 0; }
  100% { background-position: 180% 0; }
}
@media (hover: hover) and (pointer: fine) {
  .more:hover {
    transform: translateY(-2px);
    box-shadow:
      0 0 0 1px rgba(26, 61, 48, 0.4),
      0 16px 30px -10px rgba(26, 61, 48, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}
.more:active { transform: translateY(0) scale(0.975); transition-duration: .1s; }
@media (prefers-reduced-motion: reduce) {
  .more::before { animation: none; }
}
.service-row-media { position: relative; overflow: hidden; }
.service-row-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Contained variant for portrait/headshot images that would crop badly
   under the default full-bleed cover treatment (see index.html "Über uns"
   teaser, which reuses profilbild.png rather than a landscape photo). */
.service-row-media--contain { display: flex; align-items: center; justify-content: center; background: transparent; }
.service-row-media--contain img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
/* The SVG logo would otherwise fill the whole stretched row height. */
.service-row-media--logo { justify-content: flex-end; }
.service-row-media--logo img { max-width: 360px; max-height: 225px; }
@media (max-width: 860px) {
  .service-row-media--contain img { max-width: 80%; max-height: 85%; }
  .service-row-media--logo img { max-width: min(80%, 300px); }
}
/* Alternate sides row by row: image left / text right on every second row. */
.services-rows .service-row:nth-child(even) .service-row-media { order: -1; }
@media (hover: hover) and (pointer: fine) {
  .service-row-media img { transition: transform .4s ease; }
  .service-row:hover .service-row-media img { transform: scale(1.05); }
  /* Leistungen-Übersicht zeigt sieben einzelne Karten in einem Bild — ein
     Zoom auf das Gesamtbild wirkt hier unruhig statt hilfreich, anders als
     bei den Einzelfotos der übrigen Service-Rows. */
  .service-row:hover .service-row-media--leistungen img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .service-row-media img { transition: none; }
}
@media (max-width: 860px) {
  .service-row { grid-template-columns: 1fr; row-gap: 32px; }
  .service-row-text p { max-width: none; }
  .service-row-media { aspect-ratio: 16 / 10; }
  .service-row-media--tiles, .service-row-media--logo { aspect-ratio: auto; }
  .service-row-media--logo { justify-content: flex-start; }
  /* Keep a consistent text-then-image reading order on mobile regardless
     of the desktop alternation. */
  .services-rows .service-row:nth-child(even) .service-row-media { order: 0; }
}

/* Leistungen-Übersicht tiles (home) — same layout slot, same photos/icons/
   copy as the flat leistungen-uebersicht-7.png it replaces, but as seven
   real tiles so each can fly in on its own (.reveal, staggered by
   scroll-fx.js) and carry a cursor-spotlight hover, vanilla port of the
   sibling Next.js project's GlowCard (same technique already used on
   /leistungen/'s coverflow-card). Deliberately kept inside the existing
   half-width media slot rather than widened, so the row's layout doesn't
   change. */
.service-row-media--tiles { display: flex; align-items: center; background: transparent; overflow: visible; } /* lets the hover glow show on all sides */
.leistungen-tiles {
  display: flex; flex-wrap: wrap; justify-content: center; align-content: center;
  gap: 12px; width: 100%;
}
.leistung-tile {
  position: relative; flex: 0 1 calc(25% - 9px); min-width: 90px;
  border-radius: 12px; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; color: var(--text); text-decoration: none;
  background: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
  border: 1px solid var(--border);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.leistung-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Photo at full strength like the cards on /leistungen/ (.svc-card); the
   original centered bold label sits below it on the card surface. */
.leistung-tile-media {
  display: block; aspect-ratio: 6 / 5; background-size: cover; background-position: center;
  background-color: var(--bg-elevated-deep); transition: transform .4s ease;
}
.leistung-tile-body { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 9px 8px 10px; flex: 1; text-align: center; }
@media (hover: hover) {
  .leistung-tile:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 16px 34px -22px rgba(26, 61, 48, .55); }
  .leistung-tile:hover .leistung-tile-media { transform: scale(1.04); }
}
.leistung-tile h4 { font-size: 0.68rem; font-weight: 700; line-height: 1.25; margin: 0; max-width: 100%; hyphens: auto; overflow-wrap: anywhere; }
@media (min-width: 480px) {
  .leistung-tile h4 { font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .leistung-tile, .leistung-tile-media { transition: none; }
}
@media (max-width: 860px) {
  .service-row-media--tiles { padding: 0; }
}
/* Phones, home row 02: one card with the shelf of all seven service symbols
   and the "Mehr erfahren" button below the picture instead of the seven
   tiles (and instead of the button in the text column). Desktop keeps the
   tiles. */
.leistungen-card {
  display: none; flex-direction: column; width: 100%; overflow: hidden;
  color: var(--text); text-decoration: none; border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-elevated) 82%, transparent); border: 1px solid var(--border);
}
.leistungen-card-media { display: block; aspect-ratio: 1200 / 1060; overflow: hidden; }
.service-row-media .leistungen-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.leistungen-card-body { display: flex; justify-content: center; padding: 18px 18px 20px; }
.leistungen-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .service-row:hover .service-row-media--leistungen .leistungen-card:hover img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .service-row-media .leistungen-card-media img { transition: none; }
}
@media (max-width: 720px) {
  .service-row-media--leistungen .leistungen-tiles, .more--desktop { display: none; }
  .service-row-media--leistungen .leistungen-card { display: flex; }
}

/* Vorteile (Warum ITCK) — no hover effect; the scroll-drawn trace
   (process-trace.js) highlights these cards. */
.vorteile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.vorteile-card {
  position: relative; overflow: hidden;
  padding: 24px 22px; border-radius: var(--radius); border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
  backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.vorteile-card .num, .vorteile-card h3, .vorteile-card p { position: relative; z-index: 1; }
.vorteile-card .num { font-size: 0.85rem; font-weight: 800; color: var(--accent); letter-spacing: 0.08em; margin-bottom: 14px; }
.vorteile-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.vorteile-card p { font-size: 0.92rem; }
@media (prefers-reduced-motion: reduce) {
  .vorteile-card { transition: none; }
}

/* Ablauf (process) */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; counter-reset: process; }
.process-card {
  position: relative; padding: 24px 22px; border-radius: var(--radius); border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
  backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%);
}
.process-card .num {
  width: 44px; height: 44px; border-radius: 12px; background: var(--accent-2-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-weight: 800; margin-bottom: 18px;
}
.process-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.process-card p { font-size: 0.92rem; }
.process-grid .process-card:not(:last-child)::after {
  content: ''; position: absolute; top: 46px; left: calc(100% + 13px); width: calc(26px - 0px);
  border-top: 2px dashed var(--border);
}
/* Scroll-drawn fir-green trace around the cards (process-trace.js). The
   script adds .is-traced; without it the dashed connectors above stay. */
.process-grid { position: relative; }
.process-grid.is-traced .process-card::after { display: none; }
.trace-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 3; }
.trace-track { fill: none; stroke: var(--border); stroke-width: 2; stroke-dasharray: 3 5; }
.trace-glow { filter: drop-shadow(0 0 3px rgba(34, 79, 62, 0.55)) drop-shadow(0 0 10px rgba(34, 79, 62, 0.28)); }
.trace-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.trace-spark {
  fill: #fff; opacity: 0; transition: opacity .2s ease;
  filter: drop-shadow(0 0 3px var(--accent)) drop-shadow(0 0 9px rgba(34, 79, 62, 0.7));
}
.trace-spark.on { opacity: 1; }
.process-card .num { transition: background .45s ease, color .45s ease, box-shadow .45s ease; }
.process-grid.is-traced .process-card { transition: border-color .45s ease; }
.process-card.is-lit { border-color: transparent; }
.process-card.is-lit .num { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 16px -6px rgba(34, 79, 62, 0.6); }
/* Unser Anspruch principles fold open on scroll (fold-cards.js). Its inline
   transform must not be eased or overridden by the phone reveal. */
[data-fold] { position: relative; }
[data-fold] .vorteile-card { transition: border-color 0.3s ease, box-shadow 0.3s ease; animation: none; }
/* Closed from the first paint on, so the cards don't flash before the script */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-fold]:not(.is-ready) .vorteile-card:nth-child(n+2) { opacity: 0; }
}
@media print { [data-fold] .vorteile-card { opacity: 1 !important; transform: none !important; } }

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.pricing-grid--two { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin-inline: auto; }
.pricing-grid--two + .pricing-note { max-width: 820px; margin-inline: auto; }
.price-card {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 36px 30px; display: flex; flex-direction: column;
  position: relative; overflow: hidden; transform-style: preserve-3d;
  transition: box-shadow .35s ease;
}
.price-card > * { position: relative; z-index: 1; }
.price-card--highlight { border-color: var(--accent); box-shadow: var(--shadow); }
@media (prefers-reduced-motion: reduce) {
  .price-card { transition: none; }
}
.price-card .eyebrow { margin-bottom: 16px; }
.price-card h3 { font-size: 1.3rem; margin-bottom: 8px; }
.price-card .price-desc { font-size: 0.92rem; margin-bottom: 20px; }
.price-card .price-tag { font-size: 1rem; font-weight: 700; color: var(--accent); margin-bottom: 24px; }
.price-card ul { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; flex-grow: 1; }
.price-card ul li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: var(--text); }
.price-card ul li svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.price-card .btn { justify-content: center; width: 100%; }
.pricing-note { text-align: center; font-size: 0.9rem; margin-top: 28px; }

/* FAQ */
.faq-list { display: grid; gap: 14px; max-width: 780px; margin: 0 auto; }
.faq-item { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; padding: 4px 26px; }
.faq-item summary {
  cursor: pointer; padding: 20px 0; font-weight: 700; font-size: 1rem; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-size: 1.4rem; color: var(--accent); flex-shrink: 0; transition: transform .25s ease; font-weight: 400;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding-bottom: 22px; font-size: 0.95rem; margin: 0; }

/* Leistungen overview: all seven services as a card grid right under the
   hero, so every service is visible without scrolling sideways. Whole card
   is the link; an eighth fir-green card points undecided visitors to the
   free first meeting. On phones the cards turn into compact rows. */
#leistungen-hero.page-hero { padding-top: 150px; padding-bottom: 28px; }
#leistungen-services { padding-top: 8px; }
.svc-head { margin-bottom: 22px; max-width: none; }
.svc-head h2 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.svc-head p { margin-top: 6px; font-size: 1rem; }
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.svc-card {
  display: flex; flex-direction: column; overflow: hidden; color: var(--text); text-decoration: none;
  background: color-mix(in srgb, var(--bg-elevated) 82%, transparent); border: 1px solid var(--border); border-radius: var(--radius);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.svc-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.svc-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.svc-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.svc-num { font-size: .78rem; font-weight: 800; letter-spacing: .08em; color: var(--accent); }
.svc-title { font-family: 'Bodoni Moda', serif; font-weight: 500; font-size: 1.2rem; line-height: 1.2; }
.svc-desc { font-size: .9rem; line-height: 1.55; color: var(--text-dim); flex: 1; }
.svc-more { margin-top: 6px; font-size: .86rem; font-weight: 700; color: var(--accent); }
@media (hover: hover) {
  .svc-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 16px 34px -22px rgba(26, 61, 48, .55); }
  .svc-card:hover .svc-media img { transform: scale(1.04); }
}
.svc-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.svc-card--cta { background: var(--accent); border-color: var(--accent); color: var(--on-accent); justify-content: center; }
.svc-card--cta .svc-body { justify-content: center; padding: 26px 22px; }
.svc-card--cta .svc-num { color: var(--on-accent); opacity: .7; font-size: 1.6rem; font-family: 'Bodoni Moda', serif; }
.svc-card--cta .svc-desc { color: color-mix(in srgb, var(--on-accent) 85%, transparent); flex: 0; }
.svc-card--cta .svc-more { color: var(--on-accent); }
@media (prefers-reduced-motion: reduce) {
  .svc-card, .svc-media img { transition: none; }
}
@media (max-width: 1100px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .svc-grid { grid-template-columns: 1fr; gap: 16px; }
  /* Phones: picture on top at its full 4:3 format (nothing cropped), text below. */
  .svc-media { aspect-ratio: 1600 / 1195; }
  .svc-body { padding: 14px 16px 16px; gap: 4px; }
  .svc-title { font-size: 1.05rem; }
  .svc-desc { font-size: .84rem; }
  .svc-more { font-size: .8rem; margin-top: 2px; }
}
#leistungen-cta { padding-top: clamp(48px, 7vh, 80px); }

/* Einsatzgebiet: radius map (drawn from real coordinates, no third-party
   map so nothing is sent to Google on load) next to the towns grouped by
   distance, then remote vs on-site and the services chips. */
.einsatz-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.einsatz-map-wrap { background: color-mix(in srgb, var(--bg-elevated) 82%, transparent); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.einsatz-map { width: 100%; height: auto; display: block; }
.em-ring { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 4 6; opacity: .55; }
.em-ring--10 { fill: color-mix(in srgb, var(--accent) 7%, transparent); opacity: .8; }
.em-ring-label { font: 600 12px 'Montserrat', sans-serif; fill: var(--accent); opacity: .8; }
.em-dot { fill: var(--text); }
.em-dot--small { fill: var(--text-dim); opacity: .55; }
.em-label { font: 500 13px 'Montserrat', sans-serif; fill: var(--text); }
.em-label, .em-home-label, .em-ring-label { paint-order: stroke; stroke: var(--bg-elevated); stroke-width: 4px; stroke-linejoin: round; }
.em-home { fill: var(--accent); }
.em-home-halo { fill: color-mix(in srgb, var(--accent) 22%, transparent); }
.em-home-label { font: 700 14px 'Montserrat', sans-serif; fill: var(--accent); }
.em-north { font: 700 12px 'Montserrat', sans-serif; fill: var(--text-dim); }
.em-north-arrow { fill: var(--text-dim); }
/* Radar pulse: three rings grow from Bad Schönborn out to the 30 km ring and fade, staggered so one is always on its way. Scaled with transform (not r) so it stays on the compositor; the stroke keeps its width while scaling. */
.em-pulse circle { fill: color-mix(in srgb, var(--accent) 8%, transparent); stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; transform-box: view-box; transform-origin: 300px 300px; transform: scale(.036); opacity: 0; animation: emPulse 6.6s cubic-bezier(.2, .55, .35, 1) infinite; }
.em-pulse circle:nth-child(2) { animation-delay: 2.2s; }
.em-pulse circle:nth-child(3) { animation-delay: 4.4s; }
@keyframes emPulse { 0% { transform: scale(.036); opacity: .75; } 65% { opacity: .3; } 100% { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .em-pulse { display: none; } }
.einsatz-zones { display: grid; gap: 16px; }
.zone-card { background: color-mix(in srgb, var(--bg-elevated) 82%, transparent); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px; }
.zone-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.zone-card ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
.zone-card li { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; border-bottom: 1px solid var(--border); padding: 4px 0; }
.zone-km { color: var(--text-dim); font-size: .82rem; white-space: nowrap; }
.einsatz-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.way-card { background: color-mix(in srgb, var(--bg-elevated) 82%, transparent); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; }
.way-card h3 { font-size: 1.2rem; margin-bottom: 12px; }
.way-card ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.way-card li { font-size: .95rem; color: var(--text-dim); }
.area-services { margin-top: 36px; }
.area-services h3 { font-size: 1.15rem; margin-bottom: 14px; }
.area-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.area-chip { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); font-size: .9rem; font-weight: 600; text-decoration: none; transition: border-color .2s ease, color .2s ease; }
.area-chip:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 980px) { .einsatz-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .einsatz-ways { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .zone-card ul { grid-template-columns: 1fr; } }

@media (max-width: 980px) {
  .vorteile-grid, .process-grid, .pricing-grid { grid-template-columns: 1fr 1fr; }
  .process-grid .process-card::after { display: none; }
}

/* about */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.about-visual {
  position: relative; border-radius: var(--radius); background: var(--bg);
  aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.about-visual .glow { position: absolute; width: 260px; height: 260px; background: radial-gradient(circle, var(--accent-soft), transparent 70%); filter: blur(10px); }
.about-visual .logo-big { width: 240px; max-width: 60%; height: auto; opacity: 0.96; position: relative; z-index: 2; }
.about-visual--photo { padding: 0; }
.about-visual .profile-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; position: relative; z-index: 2; }
.about-visual--diagram { aspect-ratio: 1400 / 939; }
.about-visual--diagram img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 2; }
.about-text ul { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
@media (max-width: 640px) {
  .about-text ul { grid-template-columns: 1fr; }
}
.about-text li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.98rem; color: var(--text); }
.about-text li svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
/* Team & Partner — hero heading and bio now live in one right-hand column
   next to the photo (previously a separate full-width hero section above
   a two-column bio); the bio's own heading needs its own top gap since it
   no longer has a section boundary to supply one. */
/* Über uns: one moderate rhythm (about 90px between blocks) instead of the
   full hero + section padding stacked on top of each other. */
#ueber-uns-hero { padding-bottom: 40px; }
#ueber-uns-about { padding-top: 48px; padding-bottom: 46px; }
#ueber-uns-arbeitsweise { padding-top: 46px; padding-bottom: 46px; }
#ueber-uns-ablauf { padding-top: 46px; }
#team-bio .about-text h2 { margin-top: 32px; }
/* Sits a bit higher than the standard .page-hero top gap, so the checklist
   further down the column needs less scrolling to reach. */
#team-bio.page-hero { padding-top: 120px; }
/* Photo shows at its own (near-square) aspect ratio instead of being force-
   cropped into 16:9 — Johannes wants the original framing back, sized to
   match the text column rather than an arbitrary box. */
#team-bio .about-visual--photo { aspect-ratio: auto; background: none; }
#team-bio .about-visual--photo .profile-photo { height: auto; object-fit: contain; }

/* prose (legal / long-form content) */
.prose { max-width: 780px; position: relative; }
.prose h2 { font-size: 1.5rem; margin-top: 34px; margin-bottom: 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.15rem; margin-top: 22px; margin-bottom: 10px; color: var(--text); }
.prose p { margin-bottom: 16px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { color: var(--text-dim); margin-bottom: 8px; line-height: 1.7; }
.prose a { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.prose a:hover { color: var(--accent); }
.prose strong { color: var(--text); }
.prose-image { margin: 28px 0; }
.prose-image img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; height: auto; }
.callout {
  border: 1px solid var(--border); background: var(--accent-soft); border-radius: 14px; padding: 18px 22px;
  font-size: 0.9rem; color: var(--text); margin: 24px 0;
}

/* Ratgeber (guide articles): byline under the lead, cost tables, overview cards */
.article-meta { font-size: 0.9rem; color: var(--text-dim); margin-top: 18px; }
.article-meta a { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.prose .callout { font-size: 0.95rem; line-height: 1.7; }
.prose .sources { font-size: 0.88rem; color: var(--text-dim); }
.table-scroll { overflow-x: auto; margin: 0 0 16px; }
.cost-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; background: color-mix(in srgb, var(--bg-elevated) 82%, transparent); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.cost-table th, .cost-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); color: var(--text-dim); line-height: 1.55; }
.cost-table thead th { color: var(--text); font-weight: 700; background: var(--accent-2-soft); }
.cost-table td:last-child, .cost-table th:last-child { text-align: right; white-space: nowrap; }
.cost-table tfoot th, .cost-table tfoot td { color: var(--text); font-weight: 700; border-bottom: 0; }
.cost-note { font-size: 0.9rem; color: var(--text-dim); }
.pricing-note a { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.article-card {
  display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 22px; color: var(--text); text-decoration: none;
  background: color-mix(in srgb, var(--bg-elevated) 82%, transparent); border: 1px solid var(--border); border-radius: var(--radius);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.article-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.article-card-meta { font-size: 0.82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.article-card-title { font-family: 'Bodoni Moda', serif; font-weight: 500; font-size: 1.5rem; line-height: 1.2; }
.article-card-desc { font-size: 0.92rem; line-height: 1.6; color: var(--text-dim); flex: 1; }
.article-card-more { margin-top: 4px; font-size: 0.9rem; font-weight: 700; color: var(--accent); }
@media (hover: hover) {
  .article-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 16px 34px -22px rgba(26, 61, 48, .55); }
}
@media (max-width: 980px) { .article-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .article-grid { grid-template-columns: 1fr; }
  .cost-table th, .cost-table td { padding: 10px 12px; }
}

/* Numbered step list (service detail pages) */
.steps { display: grid; gap: 22px; margin-top: 20px; }
.step { display: flex; gap: 20px; align-items: flex-start; }
.step .num {
  width: 40px; height: 40px; border-radius: 12px; background: var(--accent-2-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0;
}
.step h3 { font-size: 1.05rem; margin-bottom: 6px; }
.step p { font-size: 0.95rem; }

.cta-band {
  position: relative; overflow: hidden;
  background: var(--champagne-band, #C9C8C3); color: var(--text); border-radius: 24px;
  padding: 46px 46px 64px; text-align: center; margin-top: 0;
  --text-dim: #2A2A2A; --border: rgba(17, 17, 17, 0.16);
}
/* The signature: a thin glowing light line, like the car's daytime running light. */
.cta-band::after {
  content: ''; position: absolute; left: 10%; right: 10%; bottom: 26px; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #fff 15%, #fff 85%, transparent);
  box-shadow: var(--led, 0 0 14px 2px rgba(255, 255, 255, 0.7));
}
/* A brighter white light point sweeps along the line and back, like a
   scanner bar. Transform-only so it stays on the compositor; the 344%
   travel is (80% line - 18% spot) / 18% spot width. */
.cta-band::before {
  content: ''; position: absolute; left: 10%; bottom: 25px; width: 18%; height: 4px; z-index: 1; pointer-events: none;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 30%, #fff 70%, rgba(255, 255, 255, 0));
  box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.95), 0 0 30px 9px rgba(255, 255, 255, 0.6), 0 0 64px 18px rgba(255, 255, 255, 0.3);
  animation: ledScan 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
@keyframes ledScan {
  from { transform: translateX(0); }
  to { transform: translateX(344%); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-band::before { display: none; }
}
.cta-band .service-num { display: block; margin-bottom: 14px; font-size: 1rem; color: var(--text); }
.cta-band .btn-primary { box-shadow: none; }
/* Every page's closing CTA section (home-cta, leistung-cta, ueber-uns-cta,
   anspruch-cta, team-cta, ...) — matched generically by id suffix so this
   applies sitewide without touching every page's markup.
   padding-top alone doesn't help the gap actually seen when the page is
   scrolled to its true end: at max-scroll the footer's top is pinned to
   (viewport height - footer height) regardless of how much padding sits
   above this section, so extra padding-top just becomes dead space that
   scrolls past unseen. padding-bottom is what controls how much clearance
   shows above the card at that final scroll position. */
section[id$="-cta"] { padding-top: clamp(200px, 30vh, 320px); padding-bottom: 32px; }
/* Home: the rows above already end with generous space; keep the gap calm. */
#home-cta { padding-top: clamp(48px, 7vh, 80px); }
.cta-band h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 12px; }
.cta-band p { max-width: 480px; margin: 0 auto 24px; }
/* Flex row with centered items: as inline boxes the buttons aligned on their
   text baseline, which the WhatsApp icon shifted, leaving them 4px apart. */
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cta-band .hero-cta { justify-content: center; margin-top: 0; }

.cta-band--media {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 44px; align-items: center;
  text-align: left; padding: 46px;
}
.cta-band--media .eyebrow { justify-content: flex-start; }
.cta-band--media p { margin: 0 0 24px; max-width: 440px; }
.cta-band--media .hero-cta { justify-content: flex-start; }
.cta-band-media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow); }
.cta-band-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
  .cta-band--media { grid-template-columns: 1fr; padding: 36px 24px; text-align: center; }
  .cta-band--media .eyebrow { justify-content: center; }
  .cta-band--media p { margin-left: auto; margin-right: auto; }
  .cta-band--media .hero-cta { justify-content: center; }
  .cta-band-media { order: -1; }
}

/* contact */
.contact-panel {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 24px;
  padding: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
}
.contact-info h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 18px; }
.contact-list { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 18px; }
.contact-list li { display: flex; align-items: center; gap: 14px; font-size: 0.98rem; }
.contact-list svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
.contact-list a:hover { color: var(--accent); }
.contact-list address { font-style: normal; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 0.82rem; color: var(--text-dim); margin-bottom: 8px; font-weight: 500; }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 16px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-family: inherit; font-size: 0.95rem; transition: border-color .2s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 110px; }
.field-check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.82rem; color: var(--text-dim); margin-bottom: 18px; }
.field-check input { margin-top: 3px; }
.field-check a { color: var(--accent); }
.form-note { font-size: 0.8rem; color: var(--text-dim); margin-top: 14px; }
.form-success, .form-error { display: none; padding: 14px 16px; border-radius: 10px; font-size: 0.9rem; font-weight: 600; margin-top: 14px; }
.form-success { background: var(--accent-soft); color: var(--accent); }
.form-error { background: rgba(220,90,80,0.12); color: #e07a6f; }
.form-success.show, .form-error.show { display: block; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* Map (click-to-load — keine Datenübertragung an Google vor Klick, DSGVO-konform) */
.map-block { margin-top: 40px; }
.map-preview {
  position: relative; border: 1px solid var(--border); border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; width: 100%;
  aspect-ratio: 16 / 7; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 24px; text-align: center; cursor: pointer; background: var(--bg-elevated);
  font: inherit; color: inherit; appearance: none;
}
.map-preview::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 22% 30%, var(--accent-soft), transparent 45%),
    radial-gradient(circle at 78% 68%, var(--accent-soft), transparent 45%),
    linear-gradient(var(--border) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, var(--border) 1px, transparent 1px) 0 0 / 34px 34px;
  opacity: .8;
}
.map-preview > * { position: relative; z-index: 1; }
.map-preview .pin { width: 46px; height: 46px; border-radius: 50%; background: var(--accent-2-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.map-preview .pin svg { width: 22px; height: 22px; }
.map-preview strong { font-size: 1rem; color: var(--text); }
.map-preview .hint { font-size: 0.8rem; color: var(--text-dim); max-width: 340px; }
.map-preview .hint a { color: var(--accent); }
.map-preview .btn { margin-top: 4px; pointer-events: none; }
.map-iframe { width: 100%; aspect-ratio: 16 / 7; border: 0; display: block; border-radius: var(--radius) var(--radius) 0 0; }

.map-cta {
  display: flex; align-items: center; gap: 16px; border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius); background: var(--bg-elevated); padding: 22px 24px;
}
.map-cta .icon { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-2-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.map-cta .icon svg { width: 22px; height: 22px; }
.map-cta p { font-size: 0.85rem; margin-top: 2px; }
.map-cta strong { color: var(--text); font-size: 0.98rem; }
.map-cta a { color: var(--accent); font-weight: 700; font-size: 0.9rem; white-space: nowrap; margin-left: auto; }
@media (max-width: 480px) { .map-cta { flex-wrap: wrap; } .map-cta a { margin-left: 0; } }

footer {
  padding: 70px 0 40px; background: var(--footer-bg, var(--bg)); color: #EEEDE9;
  --text-dim: #D9D7D1; --accent: #EEEDE9; --border: rgba(238, 237, 233, 0.16);
}
footer p { color: #D9D7D1; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 50px; margin-bottom: 50px; }
.footer-brand p { margin-top: 16px; max-width: 300px; font-size: 0.92rem; }
footer h3 { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 18px; color: var(--champagne-deep, var(--text-dim)); }
footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
footer ul a, footer ul span { font-size: 0.92rem; color: var(--text-dim); }
footer ul a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 26px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.82rem; color: var(--text-dim); }
.footer-bottom ul { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0; }
.footer-bottom-end { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; }
.footer-social { display: flex; align-items: center; gap: 14px; }
.footer-social a { display: inline-flex; width: 20px; height: 20px; color: #D9D7D1; opacity: .8; transition: opacity .2s, color .2s, transform .2s; }
.footer-social a:hover { opacity: 1; color: #EEEDE9; transform: translateY(-1px); }
.footer-social a:focus-visible { outline: 2px solid #EEEDE9; outline-offset: 3px; border-radius: 6px; }
.footer-social svg { width: 100%; height: 100%; }
/* Channels without a profile yet: shown as quiet icons, not links, until the profile URL exists. */
.footer-social-soon { display: inline-flex; width: 20px; height: 20px; color: #D9D7D1; opacity: .8; }

@media (min-width: 1600px) {
  .wrap { max-width: 1520px; }
  .hero-inner { max-width: 880px; }
}
@media (max-width: 980px) {
  .services-grid, .services-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .services-grid.bento .service-card--sm { grid-column: span 6; }
  .about { grid-template-columns: 1fr; }
  .contact-panel { grid-template-columns: 1fr; padding: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  nav.main-nav ul, .nav-right .btn-ghost { display: none; }
  .burger { display: flex; }
  .services-grid, .services-grid.cols-2 { grid-template-columns: 1fr; }
  .services-grid.bento .service-card--sm, .services-grid.bento .service-card--wide { grid-column: span 12; }
  .service-card--wide .service-num { display: none; }
  .vorteile-grid, .process-grid, .pricing-grid { grid-template-columns: 1fr; }
  .hero { padding: 100px 0 48px; min-height: auto; }
  .page-hero { padding: 132px 0 48px; }
  .hero-stats { gap: 30px; }
  section { padding: 64px 0; }
  .contact-panel { padding: 30px 22px; border-radius: 18px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .trust .wrap { flex-direction: column; }
  .cta-band { padding: 36px 24px; }
  .step { flex-direction: column; gap: 12px; }
}

/* Card hover "Grüner Schein": every card family gets a fir-green border with
   a soft green halo on hover, no movement and nothing that follows the
   cursor. The halo uses the fixed brand green in both themes. Not on the
   traced cards (Grundsätze, Ablauf): their scroll-drawn line is the effect. */
.price-card, .svc-card, .service-card, .leistung-tile, .leistungen-card, .article-card, .zone-card, .way-card {
  transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
@media (hover: hover) {
  .price-card:hover, .svc-card:hover, .service-card:hover, .leistung-tile:hover, .leistungen-card:hover, .article-card:hover,
  .zone-card:hover, .way-card:hover {
    transform: none; border-color: #2E6B55;
    box-shadow: 0 0 0 1px #2E6B55, 0 0 28px 2px rgba(46, 107, 85, 0.32), 0 18px 40px -24px rgba(26, 61, 48, 0.55);
  }
}
@media (prefers-reduced-motion: reduce) {
  .price-card, .svc-card, .service-card, .leistung-tile, .leistungen-card, .article-card, .zone-card, .way-card { transition: none; }
}

/* Press feedback on linked cards: they sink in slightly the moment they are
   pressed (touch or mouse), like the buttons. */
a.svc-card, a.leistung-tile, a.leistungen-card, a.article-card, a.service-card, a.zone-card, a.way-card {
  transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease, scale .1s ease-out;
}
/* The standalone `scale` property, not `transform`: the GSAP reveal leaves an
   inline transform on these cards, which would override a transform here. */
a.svc-card:active, a.leistung-tile:active, a.leistungen-card:active, a.article-card:active, a.service-card:active, a.zone-card:active, a.way-card:active {
  scale: 0.98;
}
@media (prefers-reduced-motion: reduce) {
  a.svc-card:active, a.leistung-tile:active, a.leistungen-card:active, a.article-card:active, a.service-card:active, a.zone-card:active, a.way-card:active { scale: none; }
}

/* Reduced transparency: solid surfaces instead of frosted glass. */
@media (prefers-reduced-transparency: reduce) {
  header, .scrub-band, .vorteile-card, .process-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
  header { background: var(--bg); }
  .scrub-band { background: var(--bg); }
  .vorteile-card, .process-card { background: var(--bg-elevated); }
}
/* More contrast: firmer borders and darker secondary text. */
@media (prefers-contrast: more) {
  :root[data-theme="light"] { --border: rgba(17, 17, 17, 0.5); --text-dim: #1a1a1a; }
  :root:not([data-theme="light"]) { --border: rgba(244, 244, 244, 0.5); --text-dim: #e6e6e6; }
}

/* Mobile home hero (phones only, desktop untouched): .is-mobile-hero is set by
   home-scrub-hero.js for touch/size gates, not for desktop reduced-motion users.
   A portrait version shows both arms in full (the landscape picture only showed
   the fingertips here), built from three layers: the cloudy sky and the two
   cut-out arms. Requested only inside the phone gates, the same four queries
   as GATE_QUERIES 1-4 in home-scrub-hero.js. Like the scroll video on the
   desktop, the arms glide a short way towards each other in step with the
   headline (same 3.9 s and curve), arriving as its last line lands, and a
   soft light blooms between the fingertips; the whole stage pushes in
   slowly, centred on that point so it stays put. The script places --gx/--gy
   with the same cover maths as the layers (position 50% 32%). Without the
   script the arms simply rest in place. */
.hero-still { display: none; }
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px) {
  .scrub-hero--home .scrub-hero-media { background: var(--bg); }
  .scrub-hero--home .hero-still { display: block; position: absolute; inset: 0; overflow: hidden; }
  .hs-stage, .hs-arm { position: absolute; inset: 0; background: 50% 32% / cover no-repeat; }
  .hs-stage { background-image: url('/assets/img/home-hero/hero-mobile-sky.webp?v=20261020'); transform-origin: var(--gx, 50%) var(--gy, 32%); }
  .hs-arm--l { background-image: url('/assets/img/home-hero/hero-mobile-arm-l.webp?v=20261020'); }
  .hs-arm--r { background-image: url('/assets/img/home-hero/hero-mobile-arm-r.webp?v=20261020'); }
  .hero-still::after {
    content: ''; position: absolute; left: var(--gx, 50%); top: var(--gy, 32%);
    width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.55) 18%, rgba(255, 255, 255, 0.18) 42%, rgba(255, 255, 255, 0) 70%);
    mix-blend-mode: screen; opacity: 0;
  }
  .scrub-hero--home.is-mobile-hero .hero-still::after { opacity: 0; }
  .scrub-hero--home.is-mobile-hero:not(.still-run) .hs-arm--l { transform: translateX(-11%); }
  .scrub-hero--home.is-mobile-hero:not(.still-run) .hs-arm--r { transform: translateX(11%); }
}
.hero-still::after { opacity: .75; }
.scrub-hero--home.is-mobile-hero.still-run .hs-stage { animation: heroStillPush 9s cubic-bezier(.25, .6, .3, 1) both; }
.scrub-hero--home.is-mobile-hero.still-run .hs-arm--l { animation: heroArmLeft 3.9s cubic-bezier(.4, 0, .2, 1) both; }
.scrub-hero--home.is-mobile-hero.still-run .hs-arm--r { animation: heroArmRight 3.9s cubic-bezier(.4, 0, .2, 1) both; }
.scrub-hero--home.is-mobile-hero.still-run .hero-still::after { animation: heroStillLight 1.6s cubic-bezier(.4, 0, .2, 1) 3.3s both; }
@keyframes heroStillPush { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes heroArmLeft { from { transform: translateX(-11%); } to { transform: none; } }
@keyframes heroArmRight { from { transform: translateX(11%); } to { transform: none; } }
@keyframes heroStillLight {
  0% { opacity: 0; transform: scale(.3); }
  55% { opacity: 1; transform: scale(1.15); }
  100% { opacity: .75; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .scrub-hero--home.is-mobile-hero .hs-arm { transform: none !important; }
  .scrub-hero--home.is-mobile-hero.still-run .hs-stage, .scrub-hero--home.is-mobile-hero.still-run .hs-arm { animation: none; }
  .scrub-hero--home.is-mobile-hero.still-run .hero-still::after { animation: none; opacity: .75; }
}
/* The headline lines arrive one by one while the arms meet (3.9 s in all):
   the animations sit paused until home-scrub-hero.js adds .text-run once the
   layers have loaded. */
.scrub-hero--home.is-mobile-hero .hero-line {
  display: inline-block; animation: heroLineIn 1.47s cubic-bezier(.4, 0, .2, 1) both; animation-play-state: paused;
}
.scrub-hero--home.is-mobile-hero.text-run .hero-line { animation-play-state: running; }
.scrub-hero--home.is-mobile-hero .hero-line:nth-of-type(1) { animation-delay: 0s; }
.scrub-hero--home.is-mobile-hero .hero-line:nth-of-type(2) { animation-delay: 1.2s; }
.scrub-hero--home.is-mobile-hero .hero-line:nth-of-type(3) { animation-delay: 2.43s; }
@keyframes heroLineIn { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
/* Desktop (the scroll-scrubbed hero): the same entrance as on phones, a
   little brisker, running once on load: the three lines slide up one after
   another (3.1 s in all). Pure CSS so nothing flashes before the scripts run;
   the query is the exact inverse of the static-hero gate (GATE_QUERIES in
   home-scrub-hero.js), so phones, portrait tablets and reduced motion never
   get it. Browsers without "not (… or …)" simply show the headline. */
@media not ((max-width: 720px) or ((orientation: portrait) and (max-width: 1024px)) or ((orientation: portrait) and (pointer: coarse)) or ((orientation: landscape) and (pointer: coarse) and (max-height: 560px)) or (prefers-reduced-motion: reduce)) {
  .scrub-hero--home .hero-line { display: inline-block; animation: heroLineIn 1.4s cubic-bezier(.4, 0, .2, 1) both; }
  .scrub-hero--home .hero-line:nth-of-type(1) { animation-delay: .2s; }
  .scrub-hero--home .hero-line:nth-of-type(2) { animation-delay: .95s; }
  .scrub-hero--home .hero-line:nth-of-type(3) { animation-delay: 1.7s; }
}
@media (prefers-reduced-motion: reduce) {
  .scrub-hero--home.is-mobile-hero .hero-line { animation: none; }
}

/* Phones: scroll-driven 3D reveal. Each card and .reveal element arrives tilted back,
   a little lower and smaller, and straightens up in step with the finger as
   it scrolls into view (scroll-scrubbed, no JS). Desktop keeps the GSAP
   reveal; phones without scroll-driven animations keep it too (scroll-fx.js
   decides). The keyframes animate `transform`; the press feedback on cards
   uses the separate `scale` property, so both still combine. */
@supports (animation-timeline: view()) {
  @media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
    .reveal, .service-card, .price-card, .article-card, .zone-card, .way-card, .vorteile-card, .process-card {
      animation: revealTilt linear both; animation-timeline: view(); animation-range: entry 0% entry 70%;
    }
  }
}
@keyframes revealTilt {
  0% { opacity: .2; transform: perspective(1000px) translateY(70px) rotateX(14deg) scale(.96); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* Phones: stacking cards (21st "Stacking Cards", vanilla port) on any grid
   marked [data-stack] (prices). Each card sticks below the
   header, the next slides over it, the cards underneath shrink a little
   (stack-cards.js sets the inner transform). Desktop untouched. */
@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  [data-stack].is-stacking { display: block; }
  [data-stack].is-stacking > * {
    position: sticky; top: calc(var(--stack-top, 84px) + var(--i, 0) * 12px);
    margin-bottom: 22px; transform-origin: top center; will-change: transform; animation: none;
    box-shadow: 0 -10px 30px -18px rgba(26, 61, 48, 0.35);
  }
  [data-stack].is-stacking > :last-child { margin-bottom: 0; }

}

/* Phones, Leistungen: fly-away card stack ([data-flystack], fly-stack.js).
   A tall track gives the scroll distance, a sticky stage holds the fanned
   cards; the stage reaches the screen edges so tilted corners aren't cut. */
@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  [data-flystack].is-fly { display: block; }
  .fly-track { position: relative; height: calc((var(--n, 7) - 1) * 55vh + 100svh); margin-bottom: 24px; }
  .fly-stage {
    position: sticky; top: var(--hdr, 64px); height: calc(100svh - var(--hdr, 64px));
    display: flex; align-items: center; overflow: hidden;
    margin-inline: calc(-1 * clamp(24px, 4vw, 56px)); padding-inline: clamp(24px, 4vw, 56px);
  }
  .fly-box { position: relative; width: 100%; height: var(--card-h, 420px); }
  .fly-box > .svc-card {
    position: absolute; inset: 0 0 auto 0; height: var(--card-h, 420px); margin: 0;
    transform-origin: center center; will-change: transform; backface-visibility: hidden; animation: none;
    background: var(--bg-elevated); box-shadow: 0 16px 34px -20px rgba(26, 61, 48, 0.5);
  }
}