/* ==========================================================================
   Bernhardt Steuerberaterin - Stylesheet
   ========================================================================== */

/* Fonts are served from this site (no requests to Google; licenses in assets/fonts) */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/open-sans-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/poppins-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/poppins-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/poppins-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/poppins-latin-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand colors (from Bernhardt-Branding-Colors.png) */
  --color-forest: #26493f;
  --color-forest-dark: #16302a;
  --color-forest-light: #3a6558;
  --color-sage: #cce4cf;
  --color-sage-light: #e6f2e7;
  --color-mist: #d8e3e2;
  --color-white: #f9faf7; /* a soft off-white; the site uses no pure white */

  /* Derived neutrals for text/surfaces (tinted from forest, not new hues) */
  --color-ink: #1c2b27;
  --color-body: #3f4e4a;
  --color-muted: #566662;
  --color-border: #e1e9e6;
  --color-surface: #f6faf8;

  /* Semantic */
  --color-primary: var(--color-forest);
  /* Dark forest background with a soft sage glow (stats, testimonials) */
  --forest-bg:
    radial-gradient(ellipse 60% 55% at 88% 0%, rgba(204, 228, 207, 0.16), transparent 70%),
    radial-gradient(ellipse 45% 50% at 0% 100%, rgba(58, 101, 88, 0.55), transparent 70%),
    var(--color-forest);
  --color-primary-hover: var(--color-forest-dark);
  --color-accent: var(--color-sage);
  --color-on-primary: var(--color-white);

  /* Typography */
  --font-heading: 'Poppins', 'Open Sans', sans-serif;
  --font-body: 'Open Sans', sans-serif;

  /* Layout */
  --nav-height: 108px;
  --header-control-height: 56px; /* logo and "Termin vereinbaren" share this height */
  --max-width: 1200px;

  /* Brand corners: a rounded box's corner radius is 10% of its shorter side,
     the same proportion as the logo mark. JS measures each box and sets --r;
     the fixed radii below are only the fallback without JS. */
  --corner-ratio: 0.1;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
  /* Glass: the blur is the "frost". Lower = clearer glass, more of the photo shows through. */
  --glass-blur: 6px;
  --glass-saturate: 130%;
  /* Depth & refraction: a light rim (bright where light enters top-left, a glint
     where it leaves bottom-right, with a faint warm/cool split like light through
     a prism), a soft inner glow where the thick edge gathers light, a sheen on the
     surface, and layered shadows that lift the glass off the page. */
  --glass-rim: linear-gradient(135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 248, 236, 0.5) 18%,
    rgba(255, 255, 255, 0.08) 45%,
    rgba(234, 245, 255, 0.3) 76%,
    rgba(255, 255, 255, 0.85) 100%);
  --glass-sheen:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 42%),
    radial-gradient(ellipse 40% 30% at 100% 100%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 70%);
  --glass-depth:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 24px rgba(255, 255, 255, 0.2),
    inset -14px -16px 30px -22px rgba(22, 48, 42, 0.2),
    0 1px 2px rgba(22, 48, 42, 0.08),
    0 14px 32px rgba(22, 48, 42, 0.12),
    0 42px 84px rgba(22, 48, 42, 0.16);

  --shadow-sm: 0 2px 10px rgba(22, 48, 42, 0.06);
  --shadow-md: 0 12px 32px rgba(22, 48, 42, 0.12);
  --transition: 220ms ease;
}

/* The measured corner radius belongs to one box only, never its children */
@property --r { syntax: '*'; inherits: false; }

/* -------------------------------------------------------------------------
   Reset & base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-body);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-ink);
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: 600;
}

h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}


.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-sage-light);
  padding: 6px 14px;
  border-radius: var(--r, 5px);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

.section-head {
  max-width: 640px;
  margin: 0 0 48px;
}
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--color-muted); font-size: 1.05rem; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--r, 5px);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
  min-height: 44px;
  cursor: pointer;
}
.btn:focus-visible {
  outline: 3px solid var(--color-forest-light);
  outline-offset: 2px;
}
.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-secondary:hover { background: var(--color-primary); color: var(--color-on-primary); }
.btn-ghost {
  background: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-border);
}
.btn-ghost:hover { border-color: var(--color-primary); }
.btn-block { width: 100%; }

/* -------------------------------------------------------------------------
   Glass depth (shared by the hero panel, badge, testimonials, contact cards)
   ------------------------------------------------------------------------- */
/* Glass rim + sheen layers (see --glass-rim / --glass-sheen). They sit between
   the glass and its content, and replace the flat 1px border. */
.hero-copy, .testimonial-card, .kontakt-card { position: relative; }
/* keeps the rim and sheen layers above each surface's own background */
.hero-copy, .hero-floating-badge, .testimonial-card, .kontakt-card { isolation: isolate; }
.hero-copy::before, .hero-floating-badge::before, .testimonial-card::before, .kontakt-card::before,
.hero-copy::after, .hero-floating-badge::after, .testimonial-card::after, .kontakt-card::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
.hero-copy::before, .hero-floating-badge::before, .testimonial-card::before, .kontakt-card::before {
  inset: -1px;
  padding: 1.5px;
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--glass-rim-opacity, 0.85);
  transition: opacity var(--transition);
}
.hero-copy::after, .hero-floating-badge::after, .testimonial-card::after, .kontakt-card::after {
  inset: 0;
  background: var(--glass-sheen);
}

/* -------------------------------------------------------------------------
   Header / Navigation
   ------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  z-index: 1000;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.36));
  backdrop-filter: blur(calc(var(--glass-blur) * 1.6)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.6)) saturate(var(--glass-saturate));
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.5);
  transition: height 260ms ease, background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.site-header.is-scrolled {
  height: 76px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.56));
  border-bottom-color: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(22, 48, 42, 0.06), 0 10px 30px rgba(22, 48, 42, 0.12);
}
.site-header .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
}
.brand img { height: var(--header-control-height); width: auto; }
.header-actions .btn { height: var(--header-control-height); }

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-forest), var(--color-sage));
  z-index: 1100;
  transition: width 80ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { transition: none; }
}

.main-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-indicator {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: 0;
  border-radius: var(--r, 5px);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(22, 48, 42, 0.05), 0 2px 8px rgba(22, 48, 42, 0.1);
  opacity: 0;
  z-index: 0;
  transform: translateX(0);
  transition: transform 320ms cubic-bezier(.4,0,.2,1), width 320ms cubic-bezier(.4,0,.2,1), opacity 200ms ease;
}
.main-nav a {
  position: relative;
  z-index: 1;
  padding: 10px 16px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-ink);
  border-radius: var(--r, 5px);
  transition: color var(--transition);
}
.main-nav a.is-active { color: var(--color-primary); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .nav-indicator { transition: opacity 200ms ease; }
}

.header-actions { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--r, 10px);
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-ink);
  position: relative;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: var(--nav-height);
  min-height: 760px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 30%;
  transform: scale(1.06);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg img { transform: none; }
}
.hero-bg-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(22,48,42,0.16) 0%,
      rgba(22,48,42,0.06) 30%,
      rgba(22,48,42,0) 55%);
}

.hero-inner {
  position: relative;
  width: 100%;
  padding: 0 24px 0 clamp(24px, 6vw, 100px);
}

.hero-copy {
  max-width: 760px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.36) 60%, rgba(255, 255, 255, 0.16));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid transparent; /* the lit rim (::before) draws the edge */
  border-left: none;
  border-radius: 0 var(--r, var(--radius-lg)) var(--r, var(--radius-lg)) 0;
  padding: 48px 44px 48px 140px;
  box-shadow: var(--glass-depth);
  will-change: transform, opacity;
}
@media (min-width: 881px) {
  .hero-copy { margin-left: calc(-1 * clamp(24px, 6vw, 100px) - 64px); }
}
.hero-copy h1 {
  margin-bottom: 20px;
  font-size: clamp(3rem, 5.2vw, 4.6rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.hero-copy .lede {
  font-size: 1.15rem;
  color: var(--color-ink);
  max-width: 46ch;
  margin-bottom: 32px;
  font-weight: 500;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-floating-badge {
  position: absolute;
  right: 40px;
  bottom: 40px;
  z-index: 1;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid transparent;
  border-radius: var(--r, var(--radius-md));
  padding: 16px 20px;
  box-shadow: var(--glass-depth);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 260px;
}
.hero-floating-badge .icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(204, 228, 207, 0.8);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hero-floating-badge strong { display: block; font-family: var(--font-heading); font-size: 0.95rem; color: var(--color-ink); }
.hero-floating-badge span { font-size: 0.82rem; color: var(--color-muted); }

/* -------------------------------------------------------------------------
   Zahlen & Fakten (stats)
   ------------------------------------------------------------------------- */
/* Default (no JS / reduced motion): a normal four-column grid */
.stats-section {
  padding: 100px 0;
  background: var(--forest-bg); /* light boxes on the dark sheet for contrast */
}
.stats-section .section-head h2,
.mandantenstimmen .section-head h2 { color: var(--color-white); }
.stats-section .section-head p,
.mandantenstimmen .section-head p { color: var(--color-mist); }
.stats-section .eyebrow,
.mandantenstimmen .eyebrow { background: rgba(255, 255, 255, 0.12); color: var(--color-sage); }
.stats-section .eyebrow::before,
.mandantenstimmen .eyebrow::before { background: var(--color-sage); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 24px;
  row-gap: 0;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Scroll mode (JS adds .is-scrolly): the section slides up over the hero,
   pins, and the big boxes travel from the right edge to the left. JS sets
   the section height (pin distance) and the track's translateX. */
.stack { position: relative; }
.hero.is-stacked { position: sticky; z-index: 1; min-height: max(760px, 100vh); }
/* The rest of the page then rises over the pinned stats (JS sets the negative margin) */
.after-stack.is-overlapping {
  position: relative;
  z-index: 3;
  background: var(--color-white);
  border-radius: var(--after-radius, 40px) var(--after-radius, 40px) 0 0;
  box-shadow: 0 -24px 60px rgba(22, 48, 42, 0.18);
}
/* The first section has its own background, so it must share the sheet's rounded top */
.after-stack.is-overlapping > :first-child {
  border-radius: var(--after-radius, 40px) var(--after-radius, 40px) 0 0;
}

.stats-section.is-scrolly {
  position: relative;
  z-index: 2;
  padding: 0;
  background: transparent;
}
.is-scrolly .stats-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(76px + 16px) 0 32px;
  background: var(--forest-bg);
  border-radius: var(--stats-radius, 40px) var(--stats-radius, 40px) 0 0;
  box-shadow: 0 -24px 60px rgba(22, 48, 42, 0.18);
}
.is-scrolly .stats-sticky > .container { width: 100%; } /* full page width, so JS can line the boxes up with it */
.is-scrolly .section-head { margin-bottom: clamp(24px, 4vh, 48px); }
.is-scrolly .stats-grid {
  display: grid;
  grid-auto-flow: column;
  --stat-card-w: clamp(280px, 30vw, 440px);
  grid-auto-columns: var(--stat-card-w);
  grid-template-rows: auto 1fr auto auto auto;
  column-gap: 32px;
  min-height: clamp(280px, 46vh, 440px);
  width: max-content;
  max-width: none;
  margin: 0;
  padding: 0;
  will-change: transform;
}
.is-scrolly .stat-card {
  grid-row: 1 / -1;
  padding: clamp(28px, 3vw, 44px);
  border-radius: var(--r, var(--radius-lg));
  box-shadow: var(--shadow-sm);
}
.is-scrolly .stat-card .icon {
  width: clamp(56px, 5vw, 76px);
  height: clamp(56px, 5vw, 76px);
  border-radius: var(--r, 20px);
  margin-bottom: 0;
}
.is-scrolly .stat-card .icon svg { width: 44%; height: 44%; }
.is-scrolly .stat-card .icon { grid-row: 1; }
.is-scrolly .stat-card-value { grid-row: 3; }
.is-scrolly .stat-card-title { grid-row: 4; }
.is-scrolly .stat-card-label { grid-row: 5; }
.is-scrolly .stat-card-value {
  font-size: clamp(2.6rem, calc(var(--stat-card-w) * 0.18), 5rem); /* scales with the box so edited values still fit */
  line-height: 1;
  margin: 24px 0 10px;
}
.is-scrolly .stat-card-title { font-size: clamp(1.15rem, 1.5vw, 1.4rem); margin-bottom: 10px; }
.stat-unit {
  display: inline-block; /* a long unit ("Jahre Erfahrung") moves to its own line as a whole */
  font-size: 0.42em;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
/* A small space before the unit that disappears when the unit wraps to its own line */
.stat-unit-gap { font-size: 0.42em; }
.is-scrolly .stat-card-label { font-size: clamp(0.95rem, 1.1vw, 1.08rem); max-width: 28ch; }
.stat-card {
  grid-row: span 4;
  display: grid;
  grid-template-rows: subgrid;
  align-content: start;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--r, var(--radius-md));
  padding: 32px 24px;
  transition: transform 150ms ease-out, box-shadow var(--transition), border-color var(--transition);
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-sage); }
.stats-section .stat-card { border-color: transparent; box-shadow: 0 18px 40px rgba(10, 26, 22, 0.28); }
.stats-section .stat-card:hover { border-color: var(--color-sage); box-shadow: 0 24px 50px rgba(10, 26, 22, 0.36); }
/* See .service-card note: keeps hover instant instead of inheriting the
   reveal animation's stagger delay/duration. */
.stats-section .stats-grid .stat-card {
  transition: transform 150ms ease-out, box-shadow var(--transition), border-color var(--transition);
  transition-delay: 0s;
}
.stat-card .icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r, 14px);
  background: var(--color-sage-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.stat-card-value {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--color-forest-dark);
  margin-bottom: 6px;
}
.stat-count { font-variant-numeric: tabular-nums; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.stat-card-title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--color-forest-dark);
  margin-bottom: 8px;
}
.stat-card-label { font-size: 0.92rem; color: var(--color-muted); }

/* -------------------------------------------------------------------------
   Leistungen
   ------------------------------------------------------------------------- */
.leistungen { position: relative; padding: 100px 0; background: var(--color-white); overflow: hidden; }
.leistungen .container { position: relative; z-index: 1; }
.leistungen .bg-blob { position: absolute; z-index: 0; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.leistungen .bg-blob--1 { top: -120px; right: -80px; width: 420px; height: 420px; background: var(--color-sage); opacity: 0.4; }
.leistungen .bg-blob--2 { bottom: 40px; left: -140px; width: 380px; height: 380px; background: var(--color-mist); opacity: 0.55; }

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr; /* every card the same height */
  gap: 24px;
}
/* Leistungen cards: dark forest cards that tilt with the mouse (main.js sets
   the transform); a click opens the larger box with the full list. */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px 28px;
  border-radius: var(--r, var(--radius-md));
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(204, 228, 207, 0.16), transparent 70%),
    linear-gradient(160deg, var(--color-forest) 0%, var(--color-forest-dark) 100%);
  box-shadow: 0 14px 34px rgba(22, 48, 42, 0.18);
  transform-style: preserve-3d; /* lets the icon float above the card while it tilts */
  transition: transform 150ms ease-out, box-shadow var(--transition), border-color var(--transition);
}
/* Higher specificity than .reveal-group > *:nth-child(n) so the tilt stays
   instant-feeling after the scroll-reveal animation settles - otherwise every
   card but the first inherits that animation's delay and feels unresponsive. */
.leistungen .service-grid .service-card {
  transition: transform 150ms ease-out, box-shadow var(--transition), border-color var(--transition);
  transition-delay: 0s;
}
.service-card.has-more { cursor: pointer; }
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(22, 48, 42, 0.28);
  border-color: rgba(204, 228, 207, 0.55);
}

/* 3D service icons: large enough to show their details, with a deep shadow so
   they sit on the card; they float slightly above it when the card tilts. */
.service-icon {
  display: block;
  width: clamp(96px, 8.4vw, 120px);
  height: auto;
  margin-bottom: 20px;
  filter: drop-shadow(0 3px 4px rgba(5, 18, 14, 0.35)) drop-shadow(0 16px 20px rgba(5, 18, 14, 0.45));
  transform: translateZ(36px);
  transition: transform 260ms cubic-bezier(.34, 1.56, .64, 1), filter var(--transition);
}
.service-card:hover .service-icon {
  transform: translateZ(36px) translateY(-6px) scale(1.04);
  filter: drop-shadow(0 4px 6px rgba(5, 18, 14, 0.35)) drop-shadow(0 24px 28px rgba(5, 18, 14, 0.5));
}
.service-card h3 { margin-bottom: 10px; color: var(--color-white); }
.service-card p { color: var(--color-mist); font-size: 0.96rem; margin-bottom: 0; }
.service-tagline { font-size: 1.02rem; }
.nowrap { white-space: nowrap; }

.service-toggle {
  margin-top: auto;
  padding: 18px 0 0;
  background: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-sage);
}
.service-toggle::after {
  content: '+';
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 1rem;
  line-height: 1;
}
.service-toggle:focus-visible { outline: 3px solid var(--color-sage); outline-offset: 4px; border-radius: 4px; }

/* The larger box: grows out of the clicked card (main.js animates it from the
   card's position), floats on a soft layered shadow, and the rest of the
   screen turns to frosted glass behind it. Scrolling or clicking outside
   closes it. */
.service-modal {
  width: min(880px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--modal-r, 32px);
  color: var(--color-mist);
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(204, 228, 207, 0.18), transparent 70%),
    linear-gradient(160deg, var(--color-forest) 0%, var(--color-forest-dark) 100%);
  box-shadow:
    0 1px 2px rgba(10, 26, 22, 0.12),
    0 8px 16px rgba(10, 26, 22, 0.14),
    0 24px 48px rgba(10, 26, 22, 0.22),
    0 64px 120px rgba(10, 26, 22, 0.3);
  overflow: auto;
  overscroll-behavior: contain;
  transform-origin: 50% 50%;
  transition: transform 560ms cubic-bezier(.2, .85, .25, 1), opacity 300ms ease;
}
.service-modal.no-anim { transition: none; }
.service-modal:focus { outline: none; }
.service-modal::backdrop {
  background: rgba(230, 242, 231, 0.2);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  animation: serviceBackdropIn 450ms ease both;
}
.service-modal.is-closing::backdrop { animation: serviceBackdropOut 320ms ease both; }
@keyframes serviceBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes serviceBackdropOut { from { opacity: 1; } to { opacity: 0; } }

.service-modal-body {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.service-modal.is-open .service-modal-body {
  opacity: 1;
  transform: none;
  transition: opacity 320ms ease 220ms, transform 320ms ease 220ms;
}
@media (min-width: 720px) {
  .service-modal-body {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(24px, 4vw, 52px);
    align-items: start;
  }
}
.service-modal .service-icon { width: clamp(88px, 7vw, 112px); margin-bottom: 18px; transform: none; }
.service-modal h3 { color: var(--color-white); font-size: clamp(1.3rem, 1.8vw, 1.55rem); margin-bottom: 10px; padding-right: 40px; }
.service-modal .service-tagline { color: var(--color-sage); font-size: 1.08rem; margin: 0; }
.service-modal .service-more { margin-top: 24px; }
@media (min-width: 720px) { .service-modal .service-more { margin-top: 4px; } }
.service-modal .service-intro { color: var(--color-white); font-weight: 600; margin-bottom: 14px; }
.service-modal ul { display: grid; gap: 10px; }
.service-modal li {
  position: relative;
  padding-left: 30px;
  color: var(--color-mist);
  line-height: 1.5;
}
.service-modal li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5a48' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.service-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  transition: background var(--transition);
}
.service-modal-close:hover { background: rgba(255, 255, 255, 0.16); }
.service-modal-close:focus-visible { outline: 3px solid var(--color-sage); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .service-card, .service-card:hover { transform: none; }
  .service-icon, .service-card:hover .service-icon { transform: none; transition: none; }
  .service-modal { transition: opacity 200ms ease; }
  .service-modal-body, .service-modal.is-open .service-modal-body { transform: none; transition: opacity 200ms ease; }
}

.leistungen-note {
  margin-top: 40px;
  padding: 20px 24px;
  background: var(--color-sage-light);
  border-radius: var(--r, var(--radius-md));
  color: var(--color-forest-dark);
  font-size: 0.95rem;
  text-align: center;
}
.leistungen-note p { margin: 0; }

/* -------------------------------------------------------------------------
   Honorare
   ------------------------------------------------------------------------- */
.honorare { padding: 100px 0; background: var(--color-sage-light); }
.honorare .eyebrow { background: var(--color-white); } /* the default pill matches this section's background */
.honorare-inner { max-width: 820px; margin: 0 auto; }
.honorare-inner h2 { margin-bottom: 24px; }
.honorare-inner p { font-size: 1.05rem; color: var(--color-body); margin-bottom: 20px; }
.honorare-quote {
  margin: 32px 0 0;
  padding: 28px 32px;
  background: var(--color-white);
  border-left: 4px solid var(--color-forest);
  border-radius: var(--r, var(--radius-md));
  display: flex;
  gap: 18px;
  align-items: flex-start;
  box-shadow: var(--shadow-sm);
}
.honorare-quote svg { flex-shrink: 0; margin-top: 2px; color: var(--color-forest); }
.honorare-quote p {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--color-forest-dark);
}

/* -------------------------------------------------------------------------
   Mandantenstimmen
   ------------------------------------------------------------------------- */
.mandantenstimmen { position: relative; padding: 100px 0; background: var(--forest-bg); overflow: hidden; }
.mandantenstimmen .container { position: relative; z-index: 1; }
.mandantenstimmen .bg-blob { position: absolute; z-index: 0; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.mandantenstimmen .bg-blob--1 { top: -100px; left: -100px; width: 380px; height: 380px; background: var(--color-forest-light); opacity: 0.6; }
.mandantenstimmen .bg-blob--2 { bottom: -120px; right: -100px; width: 420px; height: 420px; background: var(--color-sage); opacity: 0.1; }

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}
.testimonial-card {
  grid-column: span 2; /* three in a row */
  background: var(--color-sage-light);
  border: 1px solid transparent;
  border-radius: var(--r, var(--radius-md));
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  /* same lit rim, sheen and inner glow as the glass, with shadows deep enough for the dark section */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 0 24px rgba(255, 255, 255, 0.25),
    0 1px 2px rgba(10, 26, 22, 0.2),
    0 18px 40px rgba(10, 26, 22, 0.3);
}
.testimonial-card:nth-child(-n+2) { grid-column: span 3; } /* the two newest, longer reviews: two in a row */
/* Higher specificity than .reveal-group > *:nth-child(n) keeps the hover
   response instant instead of inheriting the reveal stagger. */
.mandantenstimmen .testimonial-grid .testimonial-card {
  transition: transform 350ms cubic-bezier(.2, .8, .2, 1), filter 350ms ease, opacity 350ms ease, box-shadow var(--transition);
  transition-delay: 0s;
}

/* Hovering one review brings it forward (slightly larger) and softly blurs the others */
@media (hover: hover) and (pointer: fine) {
  .testimonial-card:hover {
    z-index: 2;
    transform: translateY(-4px) scale(1.035);
    --glass-rim-opacity: 1;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      inset 0 0 24px rgba(255, 255, 255, 0.3),
      0 2px 4px rgba(10, 26, 22, 0.2),
      0 30px 60px rgba(10, 26, 22, 0.4);
  }
  .testimonial-grid:has(.testimonial-card:hover) .testimonial-card:not(:hover) {
    filter: blur(3px) saturate(0.85);
    opacity: 0.55;
    transform: scale(0.985);
  }
}

/* Five gold stars: they pop in one after another when the reviews appear,
   and lift in a small wave when a review is hovered */
.stars {
  display: flex;
  gap: 5px;
  margin-bottom: 18px;
  filter: drop-shadow(0 1px 1.5px rgba(140, 90, 10, 0.35));
}
.stars span {
  width: 20px;
  height: 20px;
  background: linear-gradient(150deg, #fbe08a 0%, #edb740 45%, #cf8c1a 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.86 6.06 6.64.82-4.9 4.57 1.26 6.58L12 17.4l-5.86 3.23 1.26-6.58-4.9-4.57 6.64-.82Z'/%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 24'%3E%3Cpath d='M12 2.6l2.86 6.06 6.64.82-4.9 4.57 1.26 6.58L12 17.4l-5.86 3.23 1.26-6.58-4.9-4.57 6.64-.82Z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: scale(0.3) rotate(-35deg);
  transition: translate 260ms cubic-bezier(.34, 1.56, .64, 1);
}
.stars span:nth-child(2) { --s: 1; }
.stars span:nth-child(3) { --s: 2; }
.stars span:nth-child(4) { --s: 3; }
.stars span:nth-child(5) { --s: 4; }
.reveal-group.is-visible .stars span {
  animation: starPop 560ms cubic-bezier(.34, 1.56, .64, 1) forwards;
  animation-delay: calc(450ms + var(--s, 0) * 90ms);
}
@keyframes starPop {
  to { opacity: 1; transform: none; }
}
.testimonial-card:hover .stars span {
  translate: 0 -3px;
  transition-delay: calc(var(--s, 0) * 45ms);
}
@media (prefers-reduced-motion: reduce) {
  .stars span, .reveal-group.is-visible .stars span { animation: none; opacity: 1; transform: none; }
  .testimonial-card:hover .stars span { translate: none; }
}

.testimonial-quote {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--color-ink);
  margin: 0 0 22px;
  flex-grow: 1;
}
.testimonial-quote p { margin: 0 0 10px; }
.testimonial-quote p:last-child { margin-bottom: 0; }
.testimonial-author strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--color-forest-dark);
}
.testimonial-author span { font-size: 0.85rem; color: var(--color-muted); }

/* -------------------------------------------------------------------------
   Über uns
   ------------------------------------------------------------------------- */
.ueber-uns { padding: 0 0 100px; background: var(--color-surface); }

/* Full-bleed intro: photo runs to the true left edge of the viewport,
   copy sits in a normal right-hand gutter */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: 620px;
}
.about-media { position: relative; overflow: hidden; }
.about-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
  transition: transform 500ms ease;
}
.about-media:hover img { transform: scale(1.04); }

.about-copy-wrap {
  display: flex;
  align-items: center;
  padding: 64px clamp(24px, 5vw, 100px) 64px 56px;
}
.about-copy { max-width: 560px; }

.values-lead { margin: 24px 0 0; font-weight: 600; color: var(--color-forest-dark); }
.about-copy .values {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}
.value-item { display: flex; gap: 14px; align-items: center; }
.value-item .icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r, 10px);
  background: var(--color-sage-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.value-item h4 { margin-bottom: 4px; font-size: 1.02rem; }
.value-item p { margin: 0; font-size: 1rem; font-weight: 500; color: var(--color-ink); }

/* Shared hover-zoom frame used by the founder note and team photos */
.img-frame {
  border-radius: var(--r, var(--radius-lg));
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms ease;
}
.img-frame:hover img { transform: scale(1.06); }

.founder-note {
  margin: 80px 0 88px;
  background: var(--color-white);
  border-radius: var(--r, var(--radius-lg));
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: grid;
  grid-template-columns: clamp(300px, 36%, 400px) 1fr;
  align-items: stretch;
}
/* A tall frame so Antje is shown large, almost head to toe */
.founder-note-media { border-radius: 0; box-shadow: none; aspect-ratio: 4 / 5; }
.founder-note-media img { object-position: 50% 45%; }
.founder-note-quote {
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.founder-note-quote svg { color: var(--color-sage); }
.founder-note-quote p {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--color-forest-dark);
}
.founder-points { display: grid; gap: 10px; }
.founder-points li {
  position: relative;
  padding-left: 30px;
  color: var(--color-ink);
  line-height: 1.5;
}
.founder-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-sage-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5a48' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.founder-note-quote cite { font-style: normal; font-size: 0.9rem; color: var(--color-muted); }

.team-intro { max-width: 640px; margin: 0 auto 40px; text-align: center; }

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.team-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--r, var(--radius-md));
  padding: 24px;
  display: flex;
  gap: 20px;
  align-items: center;
  transition: transform 150ms ease-out, box-shadow var(--transition), border-color var(--transition);
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-sage); }
/* See .service-card note: keeps hover instant instead of inheriting the
   reveal animation's stagger delay/duration. */
.ueber-uns .team-grid .team-card {
  transition: transform 150ms ease-out, box-shadow var(--transition), border-color var(--transition);
  transition-delay: 0s;
}
.team-card-photo {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px var(--color-sage-light);
}
.team-card-photo img { object-position: top center; }
.team-card-photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-sage-light);
  color: var(--color-muted);
  border: 2px dashed var(--color-border);
  box-shadow: none;
}
.team-card-photo--placeholder svg { width: 40px; height: 40px; }
.team-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.team-card-body strong { font-family: var(--font-heading); font-size: 1rem; color: var(--color-forest-dark); }
.team-card-role { font-size: 0.86rem; color: var(--color-body); font-weight: 600; }
.team-card-title { font-size: 0.82rem; color: var(--color-muted); }
.team-card-contact { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.team-card-contact a { font-size: 0.82rem; color: var(--color-primary); word-break: break-word; }
.team-card-contact a:hover { text-decoration: underline; }
.team-card--placeholder { border-style: dashed; }

/* -------------------------------------------------------------------------
   Kontakt
   ------------------------------------------------------------------------- */
.kontakt { padding: 100px 0 110px; background: var(--color-forest); color: var(--color-white); position: relative; overflow: hidden; }
.kontakt::before {
  content: '';
  position: absolute;
  bottom: -140px;
  left: -140px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: var(--color-forest-light);
  opacity: 0.35;
}
.kontakt .container { position: relative; z-index: 1; }
.kontakt .section-head h2,
.kontakt .section-head p { color: var(--color-white); }
.kontakt .section-head p { color: var(--color-mist); }
.kontakt .eyebrow { background: rgba(255,255,255,0.12); color: var(--color-sage); }
.kontakt .eyebrow::before { background: var(--color-sage); }

.kontakt-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
}

.kontakt-info { display: grid; gap: 24px; align-content: start; }
.kontakt-card {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid transparent;
  border-radius: var(--r, var(--radius-md));
  padding: 22px 24px;
  display: flex;
  gap: 16px;
  --glass-rim: linear-gradient(135deg, rgba(255,255,255,0.5), rgba(255,248,236,0.16) 20%, rgba(255,255,255,0.03) 48%, rgba(234,245,255,0.12) 76%, rgba(255,255,255,0.38));
  --glass-sheen: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 45%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 22px rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.12), 0 16px 36px rgba(0,0,0,0.18);
  transition: background var(--transition);
}
.kontakt-card:hover { background: rgba(255,255,255,0.14); --glass-rim-opacity: 1; }
.kontakt-card .icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r, 12px);
  background: rgba(255,255,255,0.12);
  color: var(--color-sage);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kontakt-card h4 { color: var(--color-white); margin-bottom: 4px; font-size: 1rem; }
.kontakt-card p, .kontakt-card a { color: var(--color-mist); font-size: 0.94rem; margin: 0; }
.kontakt-card a:hover { color: var(--color-white); text-decoration: underline; }

.kontakt-form {
  background: var(--color-white);
  border-radius: var(--r, var(--radius-lg));
  padding: 40px;
  box-shadow: var(--shadow-md);
}
.kontakt-form h3 { color: var(--color-ink); }
.kontakt-form .form-note { color: var(--color-muted); font-size: 0.9rem; margin-bottom: 24px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--color-ink);
  margin-bottom: 6px;
}
.form-group .required { color: var(--color-forest); }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--r, var(--radius-sm));
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--color-ink);
  background: var(--color-white);
  transition: border-color var(--transition), box-shadow var(--transition);
  min-height: 44px;
}
.form-group textarea { min-height: 120px; resize: vertical; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-sage-light);
}
.form-group .hint { font-size: 0.82rem; color: var(--color-muted); margin-top: 6px; }
.form-consent { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 22px; }
.form-consent input { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; }
.form-consent label { font-size: 0.86rem; color: var(--color-muted); font-family: var(--font-body); font-weight: 400; }
.form-consent a { color: var(--color-primary); text-decoration: underline; }

/* Floating labels (Name, E-Mail, Telefon, Nachricht) */
.form-float { position: relative; margin-bottom: 18px; }
.form-float input,
.form-float textarea {
  width: 100%;
  padding: 26px 16px 10px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--r, var(--radius-sm));
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--color-ink);
  background: var(--color-white);
  transition: border-color var(--transition), box-shadow var(--transition);
  min-height: 54px;
}
.form-float textarea { min-height: 130px; padding-top: 28px; resize: vertical; }
.form-float input:focus,
.form-float textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-sage-light);
}
.form-float label {
  position: absolute;
  left: 17px;
  top: 18px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.98rem;
  color: var(--color-muted);
  pointer-events: none;
  transition: top 180ms ease, font-size 180ms ease, color 180ms ease, font-weight 180ms ease, font-family 180ms ease;
}
.form-float input:focus + label,
.form-float input:not(:placeholder-shown) + label,
.form-float textarea:focus + label,
.form-float textarea:not(:placeholder-shown) + label {
  top: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-primary);
  font-family: var(--font-heading);
}
.form-float .required { color: var(--color-forest); }
@media (prefers-reduced-motion: reduce) {
  .form-float label { transition: none; }
}

.form-status {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--r, var(--radius-sm));
  font-size: 0.92rem;
  overflow: hidden;
  max-height: 0;
  padding: 0 16px;
  margin-top: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 300ms ease, transform 300ms ease, max-height 300ms ease, padding 300ms ease, margin-top 300ms ease;
}
.form-status.is-visible {
  max-height: 160px;
  padding: 14px 16px;
  margin-top: 16px;
  opacity: 1;
  transform: none;
}
.form-status.is-success { background: var(--color-sage-light); color: var(--color-forest-dark); }
.form-status.is-error { background: #fdecec; color: #a3312a; }
.status-check { flex-shrink: 0; }
.status-check circle { stroke-dasharray: 63; stroke-dashoffset: 63; transition: stroke-dashoffset 500ms ease 150ms; }
.status-check .status-check-mark { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 350ms ease 480ms; }
.form-status.is-visible .status-check circle,
.form-status.is-visible .status-check .status-check-mark { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .form-status { transition: opacity 200ms ease; }
  .status-check circle, .status-check .status-check-mark { transition: none; stroke-dashoffset: 0; }
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer { background: var(--color-forest-dark); color: var(--color-mist); padding: 64px 0 28px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-brand img { height: var(--header-control-height); margin-bottom: 18px; }
.footer-brand p { color: rgba(216,227,226,0.75); font-size: 0.92rem; max-width: 34ch; }
.footer-col h4 {
  color: var(--color-white);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}
.footer-col ul { display: grid; gap: 12px; }
.footer-col a {
  color: rgba(216,227,226,0.85);
  font-size: 0.94rem;
  transition: color var(--transition);
}
.footer-col a:hover { color: var(--color-white); }
.footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.85rem;
  color: rgba(216,227,226,0.6);
}
.footer-bottom a { color: rgba(216,227,226,0.6); }
.footer-bottom a:hover { color: var(--color-white); }

/* -------------------------------------------------------------------------
   Scroll reveal
   ------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 800ms cubic-bezier(.16,.8,.3,1), transform 800ms cubic-bezier(.16,.8,.3,1);
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal-group > * {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 700ms cubic-bezier(.16,.8,.3,1), transform 700ms cubic-bezier(.16,.8,.3,1);
}
.reveal-group.is-visible > * { opacity: 1; transform: none; }
.reveal-group > *:nth-child(1) { transition-delay: 0ms; }
.reveal-group > *:nth-child(2) { transition-delay: 90ms; }
.reveal-group > *:nth-child(3) { transition-delay: 180ms; }
.reveal-group > *:nth-child(4) { transition-delay: 270ms; }
.reveal-group > *:nth-child(5) { transition-delay: 360ms; }
.reveal-group > *:nth-child(6) { transition-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-group > * { opacity: 1; transform: none; transition: none; }
}

/* Headings: each word rises into place from below its own mask.
   JS wraps words in .rise-word > .rise-inner and sets --i for the stagger. */
.rise-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.rise-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 900ms cubic-bezier(.16,.8,.3,1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.is-risen .rise-inner { transform: none; }

/* Stat icons pop once their number finishes counting up */
@keyframes iconPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.28) rotate(-6deg); }
  60%  { transform: scale(0.92) rotate(2deg); }
  80%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.stat-card .icon.icon-pop { animation: iconPop 650ms cubic-bezier(.34,1.56,.64,1); }

/* -------------------------------------------------------------------------
   Skip link / a11y
   ------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 12px 20px;
  border-radius: var(--r, var(--radius-sm));
  z-index: 2000;
  transition: top var(--transition);
}
.skip-link:focus { top: 16px; }

:focus-visible {
  outline: 3px solid var(--color-forest-light);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Simple pages (Impressum / Datenschutz / Karriere)
   ------------------------------------------------------------------------- */
.simple-page-hero {
  padding: calc(var(--nav-height) + 56px) 0 56px;
  background: var(--color-sage-light);
}
.simple-page-hero h1 { margin-bottom: 12px; }
.simple-page-hero p { color: var(--color-muted); margin: 0; }
.simple-page-content { padding: 64px 0 100px; }
.simple-page-content .container { max-width: 820px; }
.simple-page-content h2 { margin-top: 40px; }
.simple-page-content h2:first-child { margin-top: 0; }
.simple-page-content p, .simple-page-content li { color: var(--color-body); }
.simple-page-content ul { list-style: disc; padding-left: 22px; margin-bottom: 1em; }
.simple-page-content ul li { margin-bottom: 6px; }
.placeholder-note {
  background: #fff8e6;
  border: 1px solid #f0dca0;
  color: #6b5a12;
  padding: 16px 20px;
  border-radius: var(--r, var(--radius-sm));
  font-size: 0.92rem;
  margin-bottom: 32px;
}

.job-card {
  border: 1px solid var(--color-border);
  border-radius: var(--r, var(--radius-md));
  padding: 28px;
  margin-bottom: 20px;
}
.job-card h3 { margin-bottom: 6px; }
.job-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.job-meta span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-sage-light);
  padding: 5px 12px;
  border-radius: var(--r, 5px);
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .is-scrolly .stats-grid { --stat-card-w: clamp(300px, 42vw, 400px); }
  .testimonial-grid { grid-template-columns: 1fr; }
  .testimonial-card, .testimonial-card:nth-child(-n+2) { grid-column: auto; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; min-height: 0; }
  .about-media { min-height: 320px; }
  .about-copy-wrap { padding: 48px clamp(24px, 5vw, 100px); }
  .founder-note { grid-template-columns: 1fr; }
  .founder-note-media { aspect-ratio: 4 / 3; }
  .founder-note-media img { object-position: 50% 30%; }
  .kontakt-grid { grid-template-columns: 1fr; }
}

@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; }
  .main-nav {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    flex-direction: column;
    align-items: stretch;
    padding: 16px 24px 24px;
    gap: 4px;
    box-shadow: var(--shadow-md);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition), opacity var(--transition);
  }
  .main-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .main-nav a { padding: 14px 16px; }
  .main-nav a:hover, .main-nav a.is-active { background: var(--color-sage-light); }
  .nav-indicator { display: none; }
  .header-actions .btn-primary { display: none; }
  .header-actions.nav-open-actions { display: none; }

  .hero { min-height: 640px; flex-direction: column; padding-bottom: 32px; }
  .hero-bg img { object-position: 75% 24%; }
  .hero-copy {
    max-width: 100%;
    margin-left: 0;
    padding: 36px 30px;
    background: rgba(255, 255, 255, 0.44);
    border-left: 1px solid transparent;
    border-radius: var(--r, var(--radius-lg));
  }
  .hero-copy .lede { max-width: none; }
  .hero-floating-badge { position: relative; right: auto; bottom: auto; margin: 20px auto 0; max-width: none; }

  .service-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .stats-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 560px) {
  .hero { min-height: 580px; padding-top: calc(var(--nav-height) + 24px); }
  .hero-bg img { object-position: 82% 22%; }
  .hero-copy { padding: 28px 22px; }
  .hero-floating-badge { flex-direction: row; }
  .about-copy-wrap { padding: 40px 22px; }
  .team-card { padding: 20px; gap: 16px; }
  .team-card-photo { width: 88px; height: 88px; }
  .is-scrolly .stats-grid { --stat-card-w: 82vw; column-gap: 20px; }
  .kontakt-form { padding: 28px 22px; }
  .founder-note-media { aspect-ratio: 4 / 5; }
  .founder-note-media img { object-position: 50% 45%; }
}

/* Phones and tablets: the photo fills the first screen and stays put, so her
   face is seen first. The glass panel starts low and slides up over it; JS
   then lets it sink under the stats page as that slides up. */
@media (max-width: 880px) {
  .hero,
  .hero.is-stacked {
    display: block;
    min-height: 0;
    padding: 64svh 0 32px; /* the panel starts low, below her face */
    overflow: clip; /* unlike hidden, this keeps the photo below sticky */
  }
  .hero-bg img {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100lvh; /* the tallest screen, so no gap shows when the address bar hides */
    object-position: 74% 34%;
    transform: none;
  }
  .hero-inner { padding: 0 20px; }
  .hero-floating-badge { margin: 20px 20px 0; }
}
@media (max-width: 560px) {
  .hero-bg img { object-position: 76% 34%; }
}

/* Stats boxes moved by the browser's own scroll timeline (JS sets the values) */
@keyframes statsTravel {
  from { transform: translate3d(var(--track-from, 0px), 0, 0); }
  to { transform: translate3d(var(--track-to, 0px), 0, 0); }
}
.is-scrolly .stats-grid.is-timeline {
  animation: statsTravel linear both;
  animation-timeline: scroll(root block);
  animation-range: var(--track-start, 0px) var(--track-end, 1px);
}

/* -------------------------------------------------------------------------
   Photos under glass (Honorare, Leistungen band, Meine Geschichte, pop-ups)
   ------------------------------------------------------------------------- */
/* Light glass panel in the site's own glass style: clear enough that the
   photo behind shows through, with the same rim and sheen as the hero panel */
.glass-panel {
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.46) 55%, rgba(255, 255, 255, 0.34));
  backdrop-filter: blur(calc(var(--glass-blur) * 1.8)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.8)) saturate(var(--glass-saturate));
  border: 1px solid transparent;
  border-radius: var(--r, var(--radius-lg));
  box-shadow: var(--glass-depth);
}
.glass-panel::before,
.glass-panel::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
.glass-panel::before {
  inset: -1px;
  padding: 1.5px;
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.85;
}
.glass-panel::after { inset: 0; background: var(--glass-sheen); }

/* Honorare: the photo fills the section, the text panel sits on the left so
   the right half of the photo stays clear */
.honorare { position: relative; isolation: isolate; overflow: hidden; padding: clamp(80px, 9vw, 120px) 0; }
.honorare-photo { position: absolute; inset: 0; z-index: -1; }
.honorare-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
.honorare-inner {
  max-width: 620px;
  margin: 0;
  padding: clamp(28px, 3.6vw, 48px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.5) 55%, rgba(255, 255, 255, 0.4));
  backdrop-filter: blur(calc(var(--glass-blur) * 1.8)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.8)) saturate(var(--glass-saturate));
  border: 1px solid transparent;
  border-radius: var(--r, var(--radius-lg));
  box-shadow: var(--glass-depth);
}
.honorare-inner p { color: var(--color-ink); }
.honorare-quote { background: rgba(255, 255, 255, 0.72); }

/* Meine Geschichte: Antje's portrait on the right, the story on glass
   overlapping its edge; behind both, a soft haze from the painting */
.geschichte {
  position: relative;
  isolation: isolate;
  overflow: clip; /* not hidden: that would make the section its own scroller and freeze the scroll animations */
  padding: clamp(80px, 9vw, 120px) 0;
  background: var(--color-surface);
}
.geschichte-aura {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../assets/img/geschichte-aura.jpg") center / cover no-repeat;
  opacity: 0.5;
}
.geschichte-aura::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(246, 250, 248, 0.7), rgba(246, 250, 248, 0.2));
}
.geschichte-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
}
.geschichte-photo {
  grid-column: 7 / 13;
  grid-row: 1;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r, var(--radius-lg));
  box-shadow: var(--shadow-md);
}
.geschichte-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.geschichte-copy {
  grid-column: 1 / 8;
  grid-row: 1;
  z-index: 1;
  padding: clamp(30px, 4vw, 52px);
}
.geschichte-copy h2 { margin: 14px 0 20px; }
.geschichte-copy h3 { font-size: 1.12rem; color: var(--color-forest); margin-bottom: 10px; }
.geschichte-copy p { color: var(--color-ink); font-size: 1.03rem; margin-bottom: 16px; }
.geschichte-copy .geschichte-closer {
  margin: 26px 0 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.4;
  color: var(--color-forest-dark);
}

/* Leistungen pop-up with a photo: more of the photo stays clear at the top,
   and the dark glass is lighter so the photo shows through */
.service-modal.has-photo {
  background: var(--modal-photo) center 35% / cover no-repeat, #16302a;
  padding: clamp(160px, 30vh, 270px) clamp(14px, 2vw, 22px) clamp(14px, 2vw, 22px);
}
.service-modal.has-photo .service-modal-body {
  padding: clamp(24px, 3.4vw, 40px);
  background: linear-gradient(135deg, rgba(22, 48, 42, 0.58), rgba(22, 48, 42, 0.68));
  backdrop-filter: blur(calc(var(--glass-blur) * 1.8)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.8)) saturate(var(--glass-saturate));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: calc(var(--modal-r, 24px) * 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.service-modal.has-photo .service-modal-close {
  background: rgba(22, 48, 42, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 880px) {
  .geschichte-grid { grid-template-columns: minmax(0, 1fr); }
  .geschichte-photo { grid-column: 1; grid-row: 1; max-width: 520px; width: 100%; justify-self: center; }
  .geschichte-copy { grid-column: 1; grid-row: 2; margin: -56px 12px 0; }
}

@media (max-width: 720px) {
  /* Phones: the photo shows clear at the top, the panel overlaps its lower edge */
  .honorare { padding-top: 62vw; background: var(--color-sage-light); }
  .honorare-photo { bottom: auto; height: 78vw; }
  .honorare-photo img { object-position: 55% 40%; }
}

/* Zahlen & Fakten without the scroll scene (reduced motion): the calculator
   photo behind the boxes, tinted just enough for the white heading */
.stats-section {
  background:
    linear-gradient(180deg, rgba(22, 48, 42, 0.74) 0%, rgba(22, 48, 42, 0.42) 42%, rgba(22, 48, 42, 0.5) 100%),
    url("../assets/img/foto-schreibtisch.jpg") center 55% / cover no-repeat,
    var(--color-forest-dark);
}

/* Kontakt: the signing photo behind the contact cards and the form; the
   glass cards blur the part of the photo under them */
.kontakt {
  background:
    linear-gradient(180deg, rgba(22, 48, 42, 0.72) 0%, rgba(22, 48, 42, 0.46) 45%, rgba(22, 48, 42, 0.62) 100%),
    url("../assets/img/foto-unterschrift.jpg") center / cover no-repeat,
    var(--color-forest);
}
.kontakt::before { display: none; }

@media (max-width: 720px) {
  /* Phones: the section is very tall, so the photo sits at the top and
     fades into the green instead of being stretched over everything */
  .kontakt {
    background:
      linear-gradient(180deg, rgba(22, 48, 42, 0.6) 0, rgba(22, 48, 42, 0.5) 260px, var(--color-forest) 460px),
      url("../assets/img/foto-unterschrift.jpg") center top / auto 460px no-repeat,
      var(--color-forest);
  }
}


/* Zahlen & Fakten scroll scene: the desk photo fills the pinned sheet, the
   calculator (a cut-out of the same photo) sits exactly in its gap. JS sizes
   both like background-size: cover and sets the scroll positions. */
.stats-scene { display: none; }
.is-scrolly .stats-sticky { background: var(--color-forest-dark); }
.is-scrolly .stats-scene {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.is-scrolly .stats-sticky > .container,
.is-scrolly .stats-grid { position: relative; z-index: 1; }
.stats-desk,
.stats-calc { position: absolute; max-width: none; }
.stats-calc { transform-origin: 48.5% 37.9%; } /* the calculator body's centre */
.stats-calc-rise {
  position: absolute;
  inset: 0;
  transform-origin: 48.5% 37.9%;
}
.stats-calc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}
.stats-calc-shadow {
  position: absolute;
  left: -12.66%;
  top: -6%;
  width: 125.3%;
  height: 112%;
  max-width: none;
  opacity: 0.5;
  transform: translate(1.2%, 1.6%);
}
.stats-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 48, 42, 0.74) 0%, rgba(22, 48, 42, 0.42) 42%, rgba(22, 48, 42, 0.5) 100%);
}

/* The intro (only where the browser runs animations from the scroll position):
   1. the hand brings the calculator up from below the sheet's edge, shrinking
   into its spot, 2. it turns into the first box while
   the other boxes, the tint and the heading come in. Each element's scroll
   range (--a-start, --a-end) and target values are set by JS. */
@keyframes calcRise {
  from { transform: translateY(var(--rise-y, 100vh)) scale(var(--rise-s, 1.5)); }
  to { transform: none; }
}
@keyframes calcShadow {
  from { opacity: 0.22; transform: translate(7%, 9%) scale(1.12); }
  to { opacity: 0.5; transform: translate(1.2%, 1.6%); }
}
@keyframes calcMorph {
  0% { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; }
  30% { opacity: 1; }
  85% { opacity: 0; }
  100% { translate: var(--mx) var(--my); rotate: 13deg; scale: var(--ms); opacity: 0; }
}
@keyframes cardMorph {
  0% { translate: var(--cx) var(--cy); rotate: -13deg; scale: var(--csx) var(--csy); opacity: 0; }
  35% { opacity: 0; }
  80% { opacity: 1; }
  100% { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; }
}
@keyframes cardFollow {
  from { opacity: 0; translate: 90px 0; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes sceneFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes sceneRiseIn {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}
.has-intro .stats-calc-rise,
.has-intro .stats-calc-shadow,
.has-intro .stats-calc,
.has-intro .stat-card,
.has-intro .stats-tint,
.has-intro .stats-sticky .section-head {
  animation-duration: auto;
  animation-fill-mode: both;
  animation-timing-function: linear;
  animation-timeline: scroll(root block);
  animation-range: var(--a-start, 0px) var(--a-end, 1px);
}
.has-intro .stats-calc-rise { animation-name: calcRise; animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
.has-intro .stats-calc-shadow { animation-name: calcShadow; animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
.has-intro .stats-calc { animation-name: calcMorph; animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1); }
.has-intro .stat-card { animation-name: cardFollow; animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
.has-intro .stat-card:first-child { animation-name: cardMorph; animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1); }
.has-intro .stats-tint { animation-name: sceneFadeIn; }
.has-intro .stats-sticky .section-head { animation-name: sceneRiseIn; }

/* -------------------------------------------------------------------------
   Kontakt call scene (JS adds .has-call where the browser runs animations
   from the scroll position). While the section scrolls up, the phone slides
   in from the right and shrinks into its spot. The stage then pins briefly:
   the phone rings (glowing screen, ring waves), the contact boxes fly out of
   it one by one, and the form slides up next to them (desktop) or follows
   below (narrower screens). JS wraps the heading and boxes in the pinned
   stage, moves the form into a layer after it and sets every position.
   ------------------------------------------------------------------------- */
.kontakt-scene { display: none; }
.kontakt.has-call { padding: 0; background: var(--color-forest); overflow: clip; } /* clip (not hidden) so the stage can pin */
.kontakt.has-call .kontakt-pin { position: relative; }
.kontakt.has-call .kontakt-stage {
  position: sticky;
  top: 0;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-height) + 20px) 0 36px;
}
.kontakt.has-call .kontakt-scene {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.kontakt.has-call .kontakt-stage > .container { position: relative; z-index: 1; width: 100%; }
.kontakt.has-call .kontakt-stage .section-head { margin-bottom: clamp(20px, 4vh, 44px); }
.kontakt.has-call .kontakt-info { gap: clamp(12px, 2.2vh, 24px); }
.kontakt.has-call .kontakt-card { padding: clamp(14px, 2.2vh, 22px) 24px; }
.kontakt.has-call .kontakt-form-layer { position: relative; z-index: 2; }

.kontakt-desk,
.kontakt-phone,
.kontakt-waves { position: absolute; max-width: none; }
.kontakt-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 48, 42, 0.74) 0%, rgba(22, 48, 42, 0.5) 50%, rgba(22, 48, 42, 0.66) 100%);
}
.kontakt-phone-ring { position: absolute; inset: 0; }
.kontakt-phone-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.kontakt-phone-shadow {
  position: absolute;
  left: -9.9%;
  top: -4.6%;
  width: 119.8%;
  height: 109.3%;
  max-width: none;
  opacity: 0.55;
  transform: translate(4%, 2.5%);
}
/* The phone's screen, lit up while it rings (matches the screen's tilt) */
.kontakt-phone-glow {
  position: absolute;
  left: 20%;
  top: 16.6%;
  width: 45.4%;
  height: 29.8%;
  rotate: -10.5deg;
  border-radius: 7%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1d5b3c;
  background: radial-gradient(circle at 50% 45%, rgba(222, 255, 230, 0.96), rgba(150, 232, 176, 0.75) 62%, rgba(118, 212, 150, 0.55));
  box-shadow: 0 0 14px 4px rgba(170, 245, 195, 0.6);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.kontakt-phone-glow svg { width: 48%; height: auto; }
/* Ring waves around the phone */
.kontakt-waves { opacity: 0; transition: opacity 0.5s ease; }
.kontakt-waves span,
.kontakt-wave-burst {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(204, 228, 207, 0.9);
  box-shadow: 0 0 26px rgba(204, 228, 207, 0.35), inset 0 0 26px rgba(204, 228, 207, 0.22);
}
.kontakt-waves span { opacity: 0; animation: ringWave 1.6s cubic-bezier(0.2, 0.6, 0.35, 1) infinite paused; }
.kontakt-waves span:nth-child(2) { animation-delay: 0.5s; }
.kontakt-wave-burst { border-width: 3px; animation: ringBurst 0.95s cubic-bezier(0.2, 0.6, 0.35, 1) forwards; }
/* Ringing (JS adds .is-ringing while the phone lies there): the screen
   glows and the waves pulse out; the phone itself stays still */
.is-ringing .kontakt-waves { opacity: 1; }
.is-ringing .kontakt-waves span { animation-play-state: running; }
.is-ringing .kontakt-phone-glow { opacity: 1; animation: phoneGlow 1.6s ease-in-out infinite; }
@keyframes phoneGlow {
  0%, 31% { opacity: 1; }
  20%, 51% { opacity: 0.6; }
  100% { opacity: 0.55; }
}
@keyframes ringWave {
  0% { transform: scale(0.45); opacity: 0.95; }
  55%, 100% { transform: scale(2.8); opacity: 0; }
}
@keyframes ringBurst {
  from { transform: scale(0.5); opacity: 1; }
  to { transform: scale(3.4); opacity: 0; }
}

/* Scroll-driven parts. JS sets each element's range (--a-start, --a-end). */
@keyframes phoneSlide {
  from { translate: var(--px, 100vw) var(--py, 0px); rotate: 38deg; scale: 1.8; }
  to { translate: 0 0; rotate: 0deg; scale: 1; }
}
@keyframes cardFly {
  0% { translate: var(--fx) var(--fy); scale: 0.14; rotate: var(--fr); opacity: 0; }
  15% { opacity: 1; }
  55% { translate: calc(var(--fx) * 0.3) calc(var(--fy) * 0.3 - var(--lift, 48px)); scale: 0.97; rotate: calc(var(--fr) * 0.25); }
  100% { translate: 0 0; scale: 1; rotate: 0deg; opacity: 1; }
}
/* Once answered, the phone dims into the tinted desk */
@keyframes phoneDim {
  from { opacity: 1; }
  to { opacity: 0.3; }
}
@keyframes phoneShadowDim {
  from { opacity: 0.55; }
  to { opacity: 0.15; }
}
.has-call .kontakt-phone,
.has-call .kontakt-tint,
.has-call .kontakt-stage .section-head,
.has-call .kontakt-card,
.has-call .kontakt-phone-img,
.has-call .kontakt-phone-shadow {
  animation-duration: auto;
  animation-fill-mode: both;
  animation-timing-function: linear;
  animation-timeline: scroll(root block);
  animation-range: var(--a-start, 0px) var(--a-end, 1px);
}
.has-call .kontakt-phone { animation-name: phoneSlide; animation-timing-function: cubic-bezier(0.3, 0.65, 0.35, 1); }
.has-call .kontakt-tint { animation-name: sceneFadeIn; }
.has-call .kontakt-stage .section-head { animation-name: sceneRiseIn; }
.has-call .kontakt-card { animation-name: cardFly; animation-timing-function: cubic-bezier(0.3, 0.7, 0.4, 1); }
.has-call .kontakt-phone-img,
.has-call .kontakt-phone-shadow { animation-range: var(--dim-start, 0px) var(--dim-end, 1px); }
.has-call .kontakt-phone-img { animation-name: phoneDim; }
.has-call .kontakt-phone-shadow { animation-name: phoneShadowDim; }
/* While JS measures where the boxes rest, their animation is switched off */
.kontakt.is-measuring .kontakt-card { animation: none; }

/* -------------------------------------------------------------------------
   Meine Geschichte: Antje steps out of the picture. The painting and Antje
   are separate layers (same size, so they line up exactly). Scrolling in,
   the frame first shows only the painting; Antje rises into it, then steps
   slightly forward and out over its top edge while the painting softens
   behind her. On wide screens she stands in front of the glass panel, which
   slides in between her and the painting; the text follows line by line.
   ------------------------------------------------------------------------- */
.geschichte-photo { position: relative; }
.geschichte-bg-blur { position: absolute; inset: 0; opacity: 0; }
.geschichte-person {
  grid-column: 7 / 13;
  grid-row: 1;
  aspect-ratio: 4 / 5;
  position: relative;
  z-index: 2;
  pointer-events: none;
  /* clipped to the frame's sides and rounded bottom, but open at the top */
  clip-path: inset(-30% 0 0 0 round 0 0 var(--r, 28px) var(--r, 28px));
}
.geschichte-person img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 16px 26px rgba(10, 26, 22, 0.24));
}
@media (min-width: 881px) {
  /* The panel overlaps the photo by one column: keep the text out of that
     strip, so Antje (in front of the glass) never covers a line */
  .geschichte-copy { padding-right: calc(100% / 7 + 30px); }
}
@media (max-width: 880px) {
  .geschichte-person { grid-column: 1; grid-row: 1; max-width: 520px; width: 100%; justify-self: center; z-index: 0; }
}

@keyframes storySoften {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes storyZoom {
  from { scale: 1.12; }
  to { scale: 1; }
}
@keyframes storyStep {
  0% { opacity: 0; transform: translateY(14%) scale(0.96); }
  35% { opacity: 1; }
  100% { opacity: 1; transform: scale(1.09); } /* grows from the bottom edge, so she stays flush with it */
}
@keyframes storyPanel {
  from { opacity: 0; translate: -56px 0; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes storyLine {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes storyCloser {
  from { opacity: 0; scale: 0.9; translate: 0 12px; }
  to { opacity: 1; scale: 1; translate: 0 0; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .geschichte-photo { view-timeline: --story-photo block; }
    .geschichte-person { view-timeline: --story-person block; }
    .geschichte-bg,
    .geschichte-bg-blur,
    .geschichte-person img,
    .geschichte-copy,
    .geschichte-copy > * {
      animation-duration: auto;
      animation-fill-mode: both;
      animation-timing-function: linear;
    }
    .geschichte-bg,
    .geschichte-bg-blur {
      animation-name: storyZoom;
      animation-timeline: --story-photo;
      animation-range: entry 20% cover 50%;
    }
    .geschichte-bg-blur {
      animation-name: storyZoom, storySoften;
      animation-range: entry 20% cover 50%, entry 55% cover 50%;
    }
    .geschichte-person img {
      animation-name: storyStep;
      animation-timeline: --story-person;
      animation-range: entry 25% cover 50%;
      animation-timing-function: cubic-bezier(0.3, 0.6, 0.35, 1);
    }
    .geschichte-copy {
      animation-name: storyPanel;
      animation-timeline: view();
      animation-range: entry 15% cover 35%;
      animation-timing-function: cubic-bezier(0.25, 0.7, 0.35, 1);
    }
    .geschichte-copy > * {
      animation-name: storyLine;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
    .geschichte-copy > .geschichte-closer {
      animation-name: storyCloser;
      animation-range: entry 10% cover 35%;
      transform-origin: 0 50%;
    }
  }
}

/* -------------------------------------------------------------------------
   Team: tall portrait cards with name, role and contact on a glass strip.
   Desktop: five in a row, dealt onto the table one after another (from a
   pile in the middle, slightly turned) as the row scrolls in. Tablets and
   phones: a row to swipe through.
   ------------------------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}
.team-card,
.ueber-uns .team-grid .team-card {
  position: relative;
  display: block;
  padding: 0;
  aspect-ratio: 3 / 4;
  border: 0;
  border-radius: var(--r, var(--radius-lg));
  overflow: hidden;
  background: var(--color-mist);
  box-shadow: 0 2px 6px rgba(22, 48, 42, 0.08), 0 18px 40px rgba(22, 48, 42, 0.16);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.35s ease;
}
.team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 4px 10px rgba(22, 48, 42, 0.1), 0 30px 60px rgba(22, 48, 42, 0.26);
}
.team-card .team-card-photo {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}
.team-card .team-card-photo img {
  object-position: 50% 0;
  transition: scale 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.team-card .img-frame:hover img { transform: none; }
.team-card:hover .team-card-photo img { scale: 1.06; }
/* The glass strip */
.team-card .team-card-body {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 12px 14px 13px;
  gap: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.6));
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--r, 14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 24px rgba(22, 48, 42, 0.18);
}
.team-card .team-card-body strong { font-size: 0.98rem; line-height: 1.25; }
.team-card .team-card-role { font-size: 0.8rem; line-height: 1.35; }
.team-card .team-card-title { font-size: 0.78rem; }
.team-card .team-card-contact { margin-top: 6px; gap: 1px; }
.team-card .team-card-contact a { font-size: 0.78rem; line-height: 1.4; }

@media (max-width: 1024px) {
  /* A row to swipe through, running from edge to edge of the screen */
  .team-grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 -24px;
    padding: 6px 24px 28px;
    scroll-padding: 0 24px;
    scrollbar-width: none;
  }
  .team-grid::-webkit-scrollbar { display: none; }
  .team-card,
  .ueber-uns .team-grid .team-card { flex: 0 0 clamp(240px, 66vw, 300px); scroll-snap-align: start; padding: 0; }
}

@keyframes teamDeal {
  0% { opacity: 0; translate: var(--deal-x, 0px) 150px; rotate: var(--deal-r, 0deg); scale: 0.86; }
  20% { opacity: 1; }
  100% { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; }
}
@keyframes teamRise {
  /* vertical only: a sideways shift would make the swipe row snap off its start */
  from { opacity: 0; translate: 0 36px; }
  to { opacity: 1; translate: 0 0; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .team-grid { view-timeline: --team block; }
    .team-card {
      animation: teamDeal linear both;
      animation-timeline: --team;
      animation-timing-function: cubic-bezier(0.25, 0.7, 0.3, 1);
    }
    /* Dealt from a pile in the middle: the first card travels furthest left */
    .team-card:nth-child(1) { --deal-x: calc(2 * (100% + 20px)); --deal-r: -14deg; animation-range: cover 6% cover 30%; }
    .team-card:nth-child(2) { --deal-x: calc(100% + 20px); --deal-r: -7deg; animation-range: cover 12% cover 36%; }
    .team-card:nth-child(3) { --deal-x: 0px; --deal-r: 5deg; animation-range: cover 18% cover 42%; }
    .team-card:nth-child(4) { --deal-x: calc(-1 * (100% + 20px)); --deal-r: 10deg; animation-range: cover 24% cover 48%; }
    .team-card:nth-child(5) { --deal-x: calc(-2 * (100% + 20px)); --deal-r: 16deg; animation-range: cover 30% cover 54%; }
    @media (max-width: 1024px) {
      /* In the swipe row they simply glide in one after another */
      .team-card { animation-name: teamRise; }
    }
  }
}

/* Team on a full-width dark green band (the green of Zahlen and
   Mandantenstimmen); it closes the Über uns section */
.ueber-uns { padding-bottom: 0; overflow-x: clip; }
.team-block { position: relative; isolation: isolate; padding: clamp(72px, 8vw, 104px) 0; }
.team-block::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: var(--forest-bg);
}
.team-block .team-intro h2 { color: var(--color-white); }
.team-block .eyebrow { background: rgba(255, 255, 255, 0.12); color: var(--color-sage); }
.team-block .eyebrow::before { background: var(--color-sage); }
.team-block .team-card { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 18px 40px rgba(0, 0, 0, 0.3); }
.team-block .team-card:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), 0 30px 60px rgba(0, 0, 0, 0.4); }

/* Team cards, v2: the photo sits on top, framed so face and neck stay clear;
   the details box sits below it and only overlaps the shoulders. Each card
   is a subgrid of the row, so all five details boxes share one row height
   (the tallest one's) and are always the same size. */
.team-grid { grid-template-rows: auto auto; row-gap: 0; }
.team-card,
.ueber-uns .team-grid .team-card {
  aspect-ratio: auto;
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  align-items: stretch; /* the boxes fill their shared row, so they're all the same height */
  background: linear-gradient(180deg, var(--color-mist), #c9d6d3);
}
.team-card .team-card-photo {
  position: relative;
  inset: auto;
  grid-row: 1;
  aspect-ratio: 1 / 1.08;
}
.team-card .team-card-photo img { object-position: 50% 6%; }
.team-card .team-card-body {
  position: relative;
  grid-row: 2;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 1;
  margin: -30px 10px 10px; /* overlaps the photo's lower edge (the shoulders) only */
}
@media (max-width: 1024px) {
  /* The swipe row as a grid too, so the boxes stay equal here as well */
  .team-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(240px, 66vw, 300px);
    grid-template-columns: none;
  }
  .team-card,
  .ueber-uns .team-grid .team-card { flex: none; }
}

/* Contact form spam trap: off screen, so people never see or reach it */
.form-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.kontakt-form { position: relative; }
.kontakt-form button[disabled] { opacity: 0.7; cursor: progress; }