/* Healonic site styles: video hero, image bands with gentle parallax,
   scroll reveals and the scroll-driven Kreislauf. */

body { background: var(--color-bg); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: 76px;
  display: flex;
  align-items: center;
  transition: background var(--transition), border-color var(--transition);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(251, 250, 248, 0.92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--color-border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--color-text-on-dark);
  transition: color var(--transition);
}
.logo-word { margin-right: -0.26em; }
.site-header.is-scrolled .logo { color: var(--color-text); }

/* Mark swaps cream -> full colour as the header background turns light. */
.logo-mark { position: relative; flex: none; width: 34px; height: 34px; }
.logo-mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity var(--transition);
}
.logo-mark-light { filter: drop-shadow(0 1px 6px rgba(27, 25, 23, 0.45)); }
.logo-mark-dark { opacity: 0; }
.site-header.is-scrolled .logo-mark-light { opacity: 0; }
.site-header.is-scrolled .logo-mark-dark { opacity: 1; }
.nav-links { display: flex; align-items: center; gap: var(--space-lg); }
.nav-links a { font-size: 14px; font-weight: 300; color: var(--color-text-on-dark-soft); transition: color var(--transition); }
.site-header.is-scrolled .nav-links a { color: var(--color-text-secondary); }
.nav-links a:hover { color: var(--color-accent); font-weight: 300; }
.nav-links a[aria-current="page"] { color: var(--color-accent); font-weight: 500; }
.site-header.is-scrolled .nav-links a[aria-current="page"],
.site-header-solid .nav-links a[aria-current="page"] { color: var(--color-accent); font-weight: 500; }

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 14px;
}
.skip-link:focus { left: var(--space-md); top: var(--space-xs); }

/* Pages that do not open on a dark media hero need the solid header at rest. */
.site-header-solid {
  background: rgba(251, 250, 248, 0.92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--color-border);
}
.site-header-solid .logo,
.site-header-solid .nav-links a,
.site-header-solid .nav-more-trigger { color: var(--color-text); }
.site-header-solid .nav-links a { color: var(--color-text-secondary); }
.site-header-solid .logo-mark-light { opacity: 0; }
.site-header-solid .logo-mark-dark { opacity: 1; }

/* ---------- "Mehr" dropdown ---------- */
.nav-more { position: relative; }
.nav-more-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  min-height: 44px;
  line-height: 1;
  vertical-align: middle;
  background: none;
  border: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--color-text-on-dark-soft);
  cursor: pointer;
  transition: color var(--transition);
}
/* Links are inline text, the trigger is a button , give both the same box so
   they share one baseline instead of the button riding low. */
.nav-links > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  line-height: 1;
}
.site-header.is-scrolled .nav-more-trigger { color: var(--color-text-secondary); }
.nav-more-trigger:hover,
.nav-more-trigger[aria-expanded="true"] { color: var(--color-accent); font-weight: 300; }
.nav-more-trigger.is-current { color: var(--color-accent); font-weight: 500; }
.nav-more-chevron { transition: transform var(--transition); }
.nav-more-trigger[aria-expanded="true"] .nav-more-chevron { transform: rotate(180deg); }

.nav-more-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  padding: var(--space-xs) 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(27, 25, 23, 0.16);
}
.nav-more-menu[hidden] { display: none; }
.nav-more-menu a {
  padding: 11px var(--space-md);
  font-size: 15px;
  color: var(--color-text-secondary);
  transition: background var(--transition), color var(--transition);
}
.nav-more-menu a:hover { background: var(--color-bg-alt); color: var(--color-accent); }
.nav-more-menu a[aria-current="page"] { color: var(--color-accent); font-weight: 500; }
.site-header.is-scrolled .nav-more-trigger.is-current,
.site-header-solid .nav-more-trigger.is-current,
.company-page .site-header.is-scrolled .nav-more-trigger.is-current { color: var(--color-accent); font-weight: 500; }
.site-header-solid .nav-more-menu a[aria-current="page"],
.company-page .site-header .nav-more-menu a[aria-current="page"] { color: var(--color-accent); font-weight: 500; }

/* ---------- Mobile menu toggle ---------- */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-text-on-dark);
}
.site-header.is-scrolled .nav-toggle,
.site-header-solid .nav-toggle { color: var(--color-text); }
.nav-toggle-bar {
  position: relative;
  width: 22px;
  height: 1px;
  background: currentColor;
}
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform var(--transition);
}
.nav-toggle-bar::before { top: -6px; }
.nav-toggle-bar::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-text);
}

.hero-media { position: absolute; inset: -8% 0; }
.hero-media img,
.hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-media img { transform: scale(1.1); }

.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27,25,23,0.34) 0%, rgba(27,25,23,0.15) 40%, rgba(27,25,23,0.66) 100%);
}

/* Deliberately NOT in .container: the hero copy hugs the left edge of the
   viewport rather than sitting in the centred grid. */
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-left: clamp(24px, 6vw, 132px);
  padding-right: var(--space-md);
  padding-bottom: var(--space-2xl);
  max-width: 820px;
  color: var(--color-text-on-dark);
}

/* Mark and wordmark sit side by side: the mark is left-aligned, so the name
   reads outward to the right rather than stacking beneath it. */
.hero-lockup {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 26px);
  margin-bottom: var(--space-md);
}

.hero-mark {
  width: clamp(64px, 7vw, 112px);
  height: auto;
  flex: none;
  /* Keeps the mark readable over bright frames of the background video. */
  filter: drop-shadow(0 2px 14px rgba(27, 25, 23, 0.45));
}

/* Matched to the supplied logo artwork: Cormorant Garamond Light, all caps,
   0.26em tracking. Do not alter weight or tracking , this is the wordmark. */
.hero-wordmark {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3vw, 46px);
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  margin-right: -0.26em; /* absorb the trailing letter-space */
  color: var(--color-text-on-dark);
  text-shadow: 0 2px 14px rgba(27, 25, 23, 0.45);
}

.eyebrow-light { color: rgba(251,250,248,0.85); }

.hero-headline {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  margin: 0 0 var(--space-md);
}

.hero-subline {
  font-size: 19px;
  color: var(--color-text-on-dark-soft);
  max-width: 46ch;
  margin: 0 0 var(--space-lg);
}

.hero-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

/* ---------- Page hero (sub-pages) ----------
   Shorter than the home hero and scrimmed from the left, matching the bands,
   because the title sits on the left. Measured at 5.00:1 worst case across
   every image used here. */
.page-hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-text);
  padding: var(--space-2xl) 0 var(--space-xl);
}
.page-hero .band-media { position: absolute; inset: -8% 0; will-change: transform; }
.page-hero .band-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(27,25,23,0.85) 0%, rgba(27,25,23,0.33) 68%);
}
.page-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-w);
  color: var(--color-text-on-dark);
}
.page-hero-title {
  max-width: 720px;
  font-size: clamp(32px, 4.6vw, 58px);
  line-height: 1.06;
  margin: 0 0 var(--space-md);
}
.page-hero-body {
  max-width: 52ch;
  font-size: 18px;
  color: var(--color-text-on-dark-soft);
  margin: 0;
}

.band-cta { margin-top: var(--space-md); }


/* ---------- Zitat ---------- */
.quote-strip { padding: var(--space-xl) 0; background: var(--color-bg-alt); }
.quote-grid {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: var(--space-lg);
  align-items: center;
}
.quote-figure { margin: 0; }
.quote-figure img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(1);
}
.quote-body { margin: 0; max-width: 62ch; }
.quote-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(21px, 2.3vw, 30px);
  line-height: 1.38;
  color: var(--color-accent-hover);
  margin: 0 0 var(--space-sm);
  text-indent: -0.42em;
}
.quote-text::before { content: '\201E'; }
.quote-text::after { content: '\201C'; }
.quote-author { display: flex; align-items: baseline; gap: var(--space-xs); flex-wrap: wrap; }
.quote-name { font-size: 15px; color: var(--color-text); }
.quote-role {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.quote-strip-reverse .quote-grid {
  grid-template-columns: minmax(0, 1fr) 210px;
  column-gap: var(--space-lg);
}
.quote-strip-reverse .quote-figure { order: 2; justify-self: end; }
.quote-strip-reverse .quote-body { justify-self: end; text-align: right; }
.quote-strip-reverse .quote-author { justify-content: flex-end; }

/* ---------- Kacheln über Bild ---------- */
.tiles {
  position: relative;
  padding: var(--space-2xl) 0;
  overflow: hidden;
  color: var(--color-text-on-dark);
}
.tiles .band-media { position: absolute; inset: -14% 0; will-change: transform; }
.tiles .band-media img { width: 100%; height: 100%; object-fit: cover; }
.tiles-scrim { position: absolute; inset: 0; background: rgba(27, 25, 23, 0.62); }
.tiles-inner { position: relative; z-index: 1; }
.tiles-title { font-size: clamp(28px, 3.2vw, 42px); margin: 0 0 var(--space-lg); }
/* Three panels that expand on hover and push the others aside, revealing the
   explanation. flex-grow is animatable, so the neighbours move rather than the
   panel overlapping them. */
.panels {
  display: flex;
  align-items: stretch;
  gap: var(--space-md);
  /* Tallest panel in any state at any width measures 362px, so the row is
     pinned to a fixed 380px. min-height was not enough: the moment content
     exceeded it the section grew, the backdrop re-scaled and the image jumped. */
  height: clamp(400px, 31vw, 440px);
}
.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  padding: var(--space-lg) var(--space-md);
  /* No backdrop-filter here on purpose. Re-blurring the backdrop every frame
     of a width animation, on top of a promoted parallax layer, is what made the
     expansion stutter. The flat fill is raised slightly to compensate. */
  background: linear-gradient(180deg, rgba(169, 87, 58, 0.26) 0%, rgba(27, 25, 23, 0.38) 46%, rgba(27, 25, 23, 0.58) 100%);
  border: 1px solid rgba(251, 250, 248, 0.26);
  border-radius: var(--radius);
  cursor: pointer;
  /* Keeps each panel's reflow inside its own box instead of the whole row. */
  contain: layout paint;
  /* This is the LEAVING state. The short delay on flex-grow lets the
     explanation fade out first, so the panel never shrinks around live text. */
  transition: flex-grow 700ms 60ms var(--ease-panel),
              background 420ms var(--ease-panel),
              border-color 420ms var(--ease-panel);
}
.panel:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -4px; }

/* Small, quiet affordance: makes it unambiguous that a panel opens, without
   shouting. Rotates into a minus once open. */
.panel-toggle {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  display: none;
  color: var(--color-text-on-dark-soft);
  transition: color var(--transition), transform 420ms var(--ease-panel);
}
.panel-toggle-v { transform-origin: 7px 7px; transition: transform 420ms var(--ease-panel), opacity 240ms ease-out; }
.panel.is-open .panel-toggle { color: var(--color-text-on-dark); transform: rotate(90deg); }
.panel.is-open .panel-toggle-v { opacity: 0; }
@keyframes panelAffordance {
  0%, 100% { color: var(--color-text-on-dark-soft); transform: scale(1); }
  38% { color: var(--color-accent); transform: scale(1.12); }
}

.panel-index {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  transition: color var(--transition);
}
.panel h3 {
  width: 100%;
  max-width: 100%;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.04;
  margin: 0 0 var(--space-sm);
  color: var(--color-text-on-dark);
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}
.panel-lead { margin: 0; font-size: 16px; line-height: 1.45; color: var(--color-text-on-dark); }

.panel-more {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: max-height 760ms var(--ease-panel), margin-top 760ms var(--ease-panel), opacity 180ms ease-out;
}
.panel-more p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--color-text-on-dark); }
.panel-bullets { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--color-text-on-dark); }
.panel-bullets li { position: relative; padding-left: 14px; font-size: 15px; line-height: 1.45; color: var(--color-text-on-dark); overflow-wrap: break-word; }
.panel-bullets li::before { content: ''; position: absolute; top: 0.65em; left: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--color-accent-dark); }
/* Company results: the trend arrows are the only variant of the shared panel. */
.company-results .panel { min-height: 320px; }
.company-results .panel-lead { max-width: 28ch; }
.company-result-word { white-space: nowrap; }
.company-result-trend { --trend-rotation: 45deg; position: absolute; top: 68%; left: 50%; z-index: 2; display: block; width: clamp(68px, 8vw, 96px); height: clamp(68px, 8vw, 96px); color: var(--color-accent); transform: translate(-50%, -50%) rotate(var(--trend-rotation)); transition: opacity 520ms 1000ms ease, transform 760ms 1000ms var(--ease-premium), visibility 0s linear 1000ms; }
.company-result-trend::before { content: ''; position: absolute; top: 18%; left: calc(50% - 2px); width: 4px; height: 64%; background: currentColor; }
.company-result-trend::after { content: ''; position: absolute; top: 10%; left: 50%; width: 24px; height: 24px; border-top: 4px solid currentColor; border-left: 4px solid currentColor; transform: translateX(-50%) rotate(45deg); }
.company-result-trend-down { --trend-rotation: 135deg; }
.company-results .panel:hover .company-result-trend,
.company-results .panel:focus-within .company-result-trend,
.company-results .panel.is-open .company-result-trend { visibility: hidden; opacity: 0; transform: translate(-50%, -50%) rotate(var(--trend-rotation)) scale(0.72); transition: opacity 900ms ease, transform 1100ms var(--ease-premium), visibility 0s linear 900ms; }

.company-results .panel:hover,
.company-results .panel:focus-within,
.company-results .panel.is-open { transition: flex-grow 760ms 0ms var(--ease-panel), background 420ms var(--ease-panel), border-color 420ms var(--ease-panel); }

@media (min-width: 901px) {
  /* The closed state keeps the explanation out of the flex layout. This
     gives the headline a real lower anchor, leaving the arrow its own space.
     When a panel opens, the explanation grows into the layout and the
     headline rises with it. */
  .company-results .panel-more { max-height: 0; overflow: hidden; transition: max-height 760ms var(--ease-panel), margin-top 760ms var(--ease-panel), opacity 220ms ease-out; }
  .company-results .panel:hover .panel-more,
  .company-results .panel:focus-within .panel-more,
  .company-results .panel.is-open .panel-more { max-height: 220px; transition: max-height 760ms var(--ease-panel), margin-top 760ms var(--ease-panel), opacity 320ms 360ms ease-out; }
}

/* Expanded: on hover, on keyboard focus, and on the panel scrolled into view
   on touch, so every input method reaches the same content. */
.panel:hover,
.panel:focus-within,
.panel.is-open {
  flex-grow: 2.6;
  background: linear-gradient(180deg, rgba(169, 87, 58, 0.34) 0%, rgba(27, 25, 23, 0.42) 42%, rgba(27, 25, 23, 0.62) 100%);
  border-color: rgba(251, 250, 248, 0.42);
  /* Entering: slightly slower than the return, and no delay. */
  transition: flex-grow 760ms 0ms var(--ease-panel),
              background 420ms var(--ease-panel),
              border-color 420ms var(--ease-panel);
}
.panel:hover .panel-index,
.panel:focus-within .panel-index,
.panel.is-open .panel-index { color: var(--color-text-on-dark); }
.panel:hover .panel-more,
.panel:focus-within .panel-more,
.panel.is-open .panel-more {
  max-height: 220px;
  margin-top: var(--space-md);
  opacity: 1;
  pointer-events: auto;
  transition: max-height 760ms var(--ease-panel), margin-top 760ms var(--ease-panel), opacity 320ms 360ms ease-out;
}

@media (min-width: 901px) {
  /* If a touch-open panel is being held open, hovering or focusing another
     panel must not create a second expanded state. */
  .panels:has(.panel.is-open) .panel:not(.is-open):hover,
  .panels:has(.panel.is-open) .panel:not(.is-open):focus-within {
    flex-grow: 1;
    background: linear-gradient(180deg, rgba(169, 87, 58, 0.26) 0%, rgba(27, 25, 23, 0.38) 46%, rgba(27, 25, 23, 0.58) 100%);
    border-color: rgba(251, 250, 248, 0.16);
    transition: flex-grow 700ms 60ms var(--ease-panel),
                background 420ms var(--ease-panel),
                border-color 420ms var(--ease-panel);
  }
  .panels:has(.panel.is-open) .panel:not(.is-open):hover .panel-more,
  .panels:has(.panel.is-open) .panel:not(.is-open):focus-within .panel-more {
    opacity: 0;
    pointer-events: none;
    transition: opacity 90ms ease-out;
  }
}

/* ---------- Kreislauf (scroll-getrieben) ---------- */
.cycle { position: relative; height: 340vh; background: var(--color-bg); }
.cycle-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.cycle-grid {
  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr;
  grid-template-areas:
    "visual title"
    "visual steps";
  gap: 0 var(--space-xl);
  align-content: center;
  align-items: center;
  width: 100%;
}
.cycle-title { grid-area: title; margin-bottom: var(--space-md); }
.cycle-visual { grid-area: visual; }
.cycle-copy { grid-area: steps; }
.cycle-visual { position: relative; }
.cycle-svg { width: 100%; height: auto; }
.cycle-track { stroke: var(--color-border-strong); }
.cycle-arc {
  stroke: var(--color-accent);
  stroke-dasharray: 1005;
  stroke-dashoffset: 1005;
  transition: stroke-dashoffset 120ms linear;
}
/* Always visible: it marks the slot the wheel turns each step into, so it
   carries meaning rather than appearing at an arbitrary moment. */
.cycle-marker { stroke: var(--color-accent); opacity: 0.45; }
.cycle-dot { fill: var(--color-border-strong); transition: fill 400ms var(--ease-premium), r 400ms var(--ease-premium); }
.cycle-svg g[data-cycle-rotor] { transition: transform 620ms var(--ease-premium); }
.cycle-dot.is-active { fill: var(--color-accent); r: 12; }
.cycle-dot:focus-visible { stroke: var(--color-accent); stroke-width: 3; }
.cycle-logo { opacity: 0.86; }

.cycle-captions {
  position: relative;
  margin-top: var(--space-md);
  min-height: 3.4em;
  text-align: center;
}
.cycle-caption {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 400ms var(--ease-premium), transform 400ms var(--ease-premium);
}
.cycle-caption span {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--color-accent);
  opacity: 0.65;
}
.cycle-caption.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.cycle-caption:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 5px; }

.cycle-steps {
  position: relative;
  list-style: none;
  height: 160px;
  margin: var(--space-lg) 0 0;
  padding: 0;
}
.cycle-step-item {
  position: absolute;
  inset: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-md);
  align-items: start;
  /* Matches the square below, so the rule and the image are the same length on
     every step. 160px is the smallest size that still clears the tallest step
     text (156px at 900px), so no row is ever driven taller by its copy. */
  min-height: 160px;
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-border);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 420ms var(--ease-panel), transform 420ms var(--ease-panel), border-color 420ms var(--ease-panel), visibility 0s linear 420ms;
}
.cycle-step-item.is-shown { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.cycle-step-item.is-current { border-left-color: var(--color-accent); }
.cycle-step-item h3 { font-size: clamp(20px, 2vw, 26px); line-height: 1.2; margin: 4px 0 6px; }

/* Uniform square thumbnails: same crop and treatment on all three, so they
   read as a set rather than three unrelated photos. */
.cycle-thumb {
  display: block;
  width: 160px;
  height: 160px;
  overflow: hidden;
  border-radius: var(--radius);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 620ms var(--ease-premium), transform 620ms var(--ease-premium);
}
/* Fixed square on the wrapper, not the <img>: sizing the image directly let
   the portrait source (992x1586) render taller than the other two. */
.cycle-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cycle-step-item.is-shown .cycle-thumb { opacity: 1; transform: scale(1); }
.cycle-step-item p { margin: 0; font-size: 15px; color: var(--color-text-secondary); max-width: 52ch; }

/* ---------- Abschluss / Erstgespraech ----------
   Sits on a photograph so it separates from the calm cycle above and gives the
   page a defined bottom edge. The section MUST stay position:relative: the
   .band-media inside is absolutely positioned and would otherwise escape to the
   top of the document and cover the hero. */
.closing {
  position: relative;
  overflow: hidden;
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: var(--space-2xl) 0;
  color: var(--color-text-on-dark);
}
.closing .band-media { position: absolute; inset: -8% 0; will-change: transform; }
.closing .band-media img { width: 100%; height: 100%; object-fit: cover; }
.closing-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(27,25,23,0.84) 0%, rgba(27,25,23,0.52) 70%);
}
.closing-inner { position: relative; z-index: 1; max-width: 640px; }
.closing-title {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.08;
  margin: 0 0 var(--space-sm);
  color: var(--color-text-on-dark);
}
.closing-inner .section-body { color: var(--color-text-on-dark-soft); margin-bottom: var(--space-lg); }

/* Home closing: a quiet text and image composition instead of a second full
   width photo band. */
.closing-home {
  min-height: 0;
  overflow: visible;
  padding: clamp(80px, 10vw, 144px) 0;
  background: var(--color-bg-alt);
  color: var(--color-text);
}
.closing-home-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
  align-items: center;
  gap: clamp(48px, 9vw, 136px);
}
.closing-home-copy { max-width: 600px; padding-left: clamp(0px, 2vw, 28px); }
.closing-home .closing-title { color: var(--color-text); }
.closing-home .section-body { max-width: 52ch; margin-bottom: var(--space-lg); color: var(--color-text-secondary); }
.closing-home-media {
  width: min(100%, 360px);
  aspect-ratio: 1 / 1;
  justify-self: end;
  margin: 0;
  padding: 10px;
  background: var(--color-surface);
  box-shadow: 0 22px 48px rgba(27, 25, 23, 0.16);
  transform: translateY(-18px);
}
.closing-home-media img { width: 100%; height: 100%; object-fit: cover; }

/* Home closing CTA as a full-width contact field with the existing image. */
.closing-home-image { min-height: min(680px, 78vh); overflow: hidden; background: var(--color-text); color: var(--color-text-on-dark); }
.closing-home-background { position: absolute; inset: -8% 0; z-index: 0; }
.closing-home-background img { width: 100%; height: 100%; object-fit: cover; }
.closing-home-image .closing-scrim { z-index: 0; background: linear-gradient(90deg, rgba(27, 25, 23, 0.84) 0%, rgba(27, 25, 23, 0.42) 72%, rgba(27, 25, 23, 0.26) 100%); }
.closing-home-image .closing-home-inner { position: relative; z-index: 1; display: block; width: 100%; flex: 0 1 var(--container-w); }
.closing-home-image .closing-home-inner,
.closing-home-image .closing-home-copy { text-align: left; }
.closing-home-image .closing-home-copy { max-width: 620px; margin-left: 0; margin-right: auto; padding-left: 0; }
.closing-home-image .closing-title { color: var(--color-text-on-dark); }
.closing-home-image .section-body { color: var(--color-text-on-dark-soft); }
.company-page .closing-home-image .closing-home-inner,
.private-page .closing-home-image .closing-home-inner,
.performance-page .closing-home-image .closing-home-inner {
  width: 100%;
  max-width: var(--container-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

/* ---------- Analyse / form sections ---------- */
.analyse { padding: var(--space-xl) 0 var(--space-2xl); background: var(--color-bg-alt); }
.analyse-inner { max-width: 760px; }
.analyse-text { margin-bottom: var(--space-lg); }
.hub-field-wide { grid-column: 1 / -1; }
.hub-field textarea { width: 100%; resize: vertical; }

/* ---------- Stub pages ---------- */
.stub { position: relative; min-height: min(620px, 74vh); display: flex; align-items: flex-end; overflow: hidden; padding: calc(76px + var(--space-2xl)) 0 var(--space-xl); color: var(--color-text-on-dark); background: var(--color-text); }
.stub::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(27, 25, 23, 0.86) 0%, rgba(27, 25, 23, 0.42) 68%, rgba(27, 25, 23, 0.28) 100%); }
.stub-inner { position: relative; z-index: 1; max-width: 640px; width: 100%; }
.stub-title { color: var(--color-text-on-dark); font-size: clamp(42px, 6.2vw, 74px); line-height: 0.99; margin: 0 0 var(--space-md); }
.stub-note { max-width: 52ch; font-size: 18px; color: var(--color-text-on-dark-soft); margin: 0 0 var(--space-md); }
.stub-flag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-on-dark-soft);
  margin: 0 0 var(--space-lg);
}
.stub-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); flex: none; }

.team-page .stub { background: var(--color-text) url('../stills/training-mit-coach.webp') center / cover no-repeat; }
.contact-page .stub { background: var(--color-text) url('../stills/closing-analyse.png') center / cover no-repeat; }
.contact-page.is-first-conversation .stub { background-image: url('../stills/closing-erstgespraech.png'); }
.faq-page .stub { background: var(--color-text) url('../stills/werte-im-gespraech.webp') center / cover no-repeat; }

/* ---------- Legal pages ---------- */
.legal-hero { position: relative; min-height: min(540px, 68vh); display: flex; align-items: flex-end; overflow: hidden; padding: calc(76px + var(--space-xl)) 0 var(--space-xl); color: var(--color-text-on-dark); background: var(--color-text) url('../stills/studio-abendlicht.webp') center / cover no-repeat; }
.legal-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(27, 25, 23, 0.86) 0%, rgba(27, 25, 23, 0.45) 68%, rgba(27, 25, 23, 0.28) 100%); }
.legal-hero-inner { position: relative; z-index: 1; max-width: 900px; width: 100%; }
.legal-hero .eyebrow, .legal-hero h1 { color: var(--color-text-on-dark); }
.legal-hero h1 { font-size: clamp(48px, 7vw, 84px); line-height: 0.98; letter-spacing: -0.02em; }
.legal-content { padding: clamp(64px, 9vw, 128px) 0 var(--space-2xl); }
.legal-content-inner { max-width: 780px; }
.legal-block-first { padding-top: 0; border-top: 0; }
.legal-lead { margin: 0 0 var(--space-xl); font-size: clamp(20px, 2vw, 25px); color: var(--color-text); }
.legal-block { padding: var(--space-lg) 0; border-top: 1px solid var(--color-border-strong); }
.legal-block h2 { max-width: 650px; margin: 0 0 var(--space-sm); font-size: clamp(26px, 3vw, 38px); line-height: 1.05; }
.legal-block p { max-width: 65ch; margin: 0; color: var(--color-text-secondary); font-size: 16px; line-height: 1.7; }
.legal-block p + p { margin-top: var(--space-md); }
.legal-list { display: grid; gap: 8px; margin: var(--space-sm) 0 var(--space-md); padding-left: 20px; color: var(--color-text-secondary); font-size: 16px; line-height: 1.6; }

/* Rechtstexte bleiben bewusst ruhig und kompakt. Die Informationen sollen
   vollständig lesbar sein, ohne den Charakter einer Landingpage zu bekommen. */
.legal-page .legal-hero { min-height: min(390px, 52vh); padding: calc(76px + var(--space-lg)) 0 var(--space-lg); }
.legal-page .legal-hero h1 { font-size: clamp(36px, 5vw, 58px); }
.legal-page .legal-content { padding: clamp(48px, 6vw, 88px) 0 var(--space-xl); }
.legal-page .legal-content-inner { max-width: 760px; }
.legal-page .legal-lead { margin-bottom: var(--space-lg); font-size: 17px; }
.legal-page .legal-block { padding: 20px 0; }
.legal-page .legal-block h2 { margin-bottom: 6px; font-size: clamp(21px, 2.2vw, 29px); }
.legal-page .legal-block p,
.legal-page .legal-list { font-size: 14px; line-height: 1.55; }
.legal-page .legal-block p + p { margin-top: 10px; }
.legal-page .legal-list { gap: 4px; margin-top: 10px; margin-bottom: 14px; }

/* ---------- Downloads ---------- */
.downloads { padding: 0 0 var(--space-xl); }
.download-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border-strong); }
.download-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border-strong);
}
.download-meta h2 { font-size: 24px; margin: var(--space-xs) 0 4px; }
.download-meta p { margin: 0; font-size: 15px; color: var(--color-text-secondary); max-width: 52ch; }

/* ---------- Downloads page ---------- */
.downloads-page .downloads-hero {
  position: relative;
  min-height: min(600px, 72vh);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: calc(76px + var(--space-xl)) 0 var(--space-xl);
  color: var(--color-text-on-dark);
  background: var(--color-text) url('../stills/scan-und-app.webp') center / cover no-repeat;
}
.downloads-page .downloads-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(27, 25, 23, 0.86) 0%, rgba(27, 25, 23, 0.42) 68%, rgba(27, 25, 23, 0.26) 100%); }
.downloads-page .downloads-hero-inner { position: relative; z-index: 1; max-width: 760px; width: 100%; }
.downloads-page .downloads-hero .eyebrow, .downloads-page .downloads-hero .stub-title, .downloads-page .downloads-hero .stub-note { color: var(--color-text-on-dark); }
.downloads-page .downloads-overview { padding: 0 0 var(--space-2xl); }
.downloads-page .downloads-columns {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(32px, 5vw, 84px);
  align-items: start;
}
.downloads-page .download-group {
  padding: clamp(28px, 4vw, 52px) 0 0;
  border-top: 1px solid var(--color-border-strong);
}
.downloads-page .download-group-heading { max-width: 720px; margin-bottom: clamp(28px, 4vw, 52px); }
.downloads-page .download-group-heading .section-title { margin: var(--space-xs) 0 var(--space-sm); }
.downloads-page .download-group-heading .section-body { max-width: 60ch; color: var(--color-text-secondary); }
.downloads-page .download-resource-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.downloads-page .download-resource-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 12px 26px rgba(61, 50, 40, 0.06);
}
.downloads-page .download-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 92px;
  aspect-ratio: 1 / 1.414;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
}
.downloads-page .download-preview::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 13px;
  height: 13px;
  background: var(--color-surface);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.downloads-page .download-preview-label {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}
.downloads-page .download-preview img { width: 34px; height: 34px; object-fit: contain; }
.downloads-page .download-preview-wordmark { font-family: var(--font-serif); font-size: 14px; color: var(--color-text); }
.downloads-page .download-resource-content { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; padding: 4px 0; }
.downloads-page .download-resource-content h3 { max-width: 100%; margin: 6px 0 6px; font-size: clamp(21px, 2vw, 28px); line-height: 1.06; hyphens: auto; overflow-wrap: break-word; }
.downloads-page .download-resource-content p { max-width: 30ch; margin: 0 0 14px; color: var(--color-text-secondary); font-size: 14px; }
.downloads-page .download-resource-content .btn { margin-top: auto; }
.downloads-page .download-blog-group { padding-bottom: 0; }
.downloads-page .download-blog-group .download-group-heading .section-title { font-size: clamp(24px, 2.6vw, 34px); }
.downloads-page .download-blog-group .download-group-heading .section-body { font-size: 14px; }
.downloads-page .download-article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.downloads-page .download-article-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: transform 350ms var(--ease-premium), box-shadow 350ms var(--ease-premium);
}
.downloads-page .download-article-card:hover,
.downloads-page .download-article-card:focus-within { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(61, 50, 40, 0.10); }
.downloads-page .download-article-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-bg-alt); }
.downloads-page .download-article-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-premium); }
.downloads-page .download-article-card:hover .download-article-media img,
.downloads-page .download-article-card:focus-within .download-article-media img { transform: scale(1.035); }
.downloads-page .download-article-content { min-width: 0; padding: 4px 6px 4px 0; }
.downloads-page .download-article-content h3 { max-width: 100%; margin: 8px 0 0; font-size: clamp(17px, 1.55vw, 22px); line-height: 1.08; hyphens: auto; overflow-wrap: break-word; }
.downloads-page .download-article-request { display: inline-flex; margin-top: 14px; padding: 10px 14px; font-size: 12px; }

/* ---------- Section intro ---------- */
.band-intro { padding: var(--space-2xl) 0 var(--space-lg); }
.section-title { font-size: clamp(28px, 3.2vw, 42px); margin-bottom: 0; }

/* ---------- Full-bleed parallax bands ---------- */
.band {
  position: relative;
  height: 86vh;
  min-height: 480px;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-bottom: 2px;
}

.band-media { position: absolute; inset: -10% 0; will-change: transform; }
.band-media img,
.band-media video { width: 100%; height: 100%; object-fit: cover; }

.band-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(27,25,23,0.82) 0%, rgba(27,25,23,0.30) 65%);
}
.band-scrim-strong { background: linear-gradient(90deg, rgba(27,25,23,0.82) 0%, rgba(27,25,23,0.40) 75%); }

.band-copy {
  position: relative;
  z-index: 1;
  max-width: 44ch;
  color: var(--color-text-on-dark);
}
.band-copy h3 { font-size: clamp(26px, 3vw, 36px); margin: var(--space-xs) 0 var(--space-sm); }
.band-copy p { color: var(--color-text-on-dark-soft); font-size: 16px; margin: 0; }
.index-mono-light { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(251,250,248,0.72); }

/* ---------- Light chapters (alternate with the full-bleed image bands) ---------- */
.info-section { padding: var(--space-2xl) 0; }
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}
/* Flips the picture to the left so consecutive light chapters don't repeat
   the same reading order. */
.info-media-first .info-media { order: -1; }

.info-title { font-size: clamp(28px, 3.2vw, 42px); margin: var(--space-xs) 0 var(--space-sm); }
.index-mono { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); }
.tag-line-dark { color: var(--color-muted); }

.info-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-bg-alt); }
.info-media img,
.info-media video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Location ---------- */
.location-section { padding: clamp(72px, 10vw, 136px) 0; }
.location-intro { max-width: 780px; margin-bottom: clamp(42px, 6vw, 84px); }
.location-title {
  font-size: clamp(36px, 5.2vw, 68px);
  line-height: 1.02;
  margin: var(--space-xs) 0 var(--space-md);
}
.location-intro .section-body { max-width: 62ch; color: var(--color-text-secondary); }
.location-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); }
.location-card { display: grid; grid-template-rows: auto 1fr; min-width: 0; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 18px 40px rgba(61, 50, 40, 0.08); }
.location-card-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-bg-alt); }
.location-card-media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 700ms var(--ease-premium); }
.location-card:hover .location-card-media img, .location-card:focus-within .location-card-media img { transform: scale(1.035); }
.location-card-content { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(24px, 3vw, 42px); }
.location-card-content h3 { margin: var(--space-xs) 0 6px; font-size: clamp(27px, 3vw, 40px); line-height: 1.04; }
.location-card-content address { font-style: normal; color: var(--color-text-secondary); font-size: 16px; }
.location-card-content > p:not(.index-mono) { max-width: 36ch; margin: var(--space-md) 0 var(--space-lg); color: var(--color-text-secondary); }
.location-card-content .btn { margin-top: auto; }
.location-card-content .btn:disabled { cursor: not-allowed; opacity: 0.52; }

.map-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--space-xs);
  aspect-ratio: 4 / 3;
  padding: var(--space-md);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-strong);
  overflow: hidden;
  transition: border-color var(--transition);
}
.map-card:hover { border-color: var(--color-accent); }
.map-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Cream plate keeps the address legible wherever it lands on the map. */
.map-card-place {
  position: relative;
  padding: 10px 14px;
  background: var(--color-bg);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.3;
  color: var(--color-text);
}

/* ---------- Pakete (B2B package comparison) ---------- */
.pkg-section { padding: var(--space-xl) 0; background: var(--color-bg-alt); }
.pkg-table {
  margin-top: var(--space-md);
  max-width: 820px;
  border-top: 1px solid var(--color-border-strong);
}

.pkg-row,
.pkg-row-head {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: var(--space-sm);
  padding: 11px 0;
  border-bottom: 1px solid var(--color-border-strong);
  font-size: 14px;
}
.pkg-row-head {
  font-family: var(--font-sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}

/* The training frequency is the one number that actually separates the tiers. */
.pkg-row-key span:not(:first-child) {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.1;
}

.pkg-group {
  padding: var(--space-sm) 0 4px;
  font-family: var(--font-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.pkg-footnote { margin-top: var(--space-md); font-size: 15px; }

/* ---------- Feature section (Studio / Technologie / Für Unternehmen) ---------- */
.feature-section {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  color: var(--color-text-on-dark);
  overflow: hidden;
}
.feature-text { max-width: 46ch; padding: var(--space-2xl) 0; position: relative; z-index: 1; }
.feature-text .section-body { color: var(--color-text-on-dark-soft); }
.feature-text .btn { margin-top: var(--space-sm); }

.tag-line {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-on-dark-soft);
  margin: var(--space-sm) 0 0;
}

/* ---------- Content Hub (gated download / lead capture) ---------- */
.content-hub {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--color-text-on-dark);
  text-align: left;
  overflow: hidden;
  padding: var(--space-2xl) 0;
}
.content-hub-inner { position: relative; z-index: 1; max-width: 620px; padding: 0 var(--space-md); }
.content-hub-inner .section-title { color: var(--color-text-on-dark); }
.content-hub-inner .section-body { color: var(--color-text-on-dark-soft); margin: var(--space-sm) 0 var(--space-lg); }

/* The form now sits on a light background, so labels, fills and rules are all
   dark-on-light. Underlines use --color-muted: the previous hairline failed
   the 3:1 minimum for a UI boundary against the section background. */
.hub-form { display: flex; flex-direction: column; gap: var(--space-md); text-align: left; }
.hub-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); min-width: 0; }
.hub-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 6px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}
.hub-field input,
.hub-field select,
.hub-field textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--color-text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-muted);
  border-radius: 0;
  padding: 10px 2px;
  transition: border-color var(--transition);
}
.hub-field input::placeholder,
.hub-field textarea::placeholder { color: var(--color-muted); }
.hub-field input:focus,
.hub-field select:focus,
.hub-field textarea:focus { outline: none; border-bottom-color: var(--color-accent); border-bottom-width: 2px; }
.hub-field input:focus-visible,
.hub-field select:focus-visible,
.hub-field textarea:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.hub-field select { appearance: none; -webkit-appearance: none; }
.hub-field select option { color: var(--color-text); }

.hub-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--color-text-secondary); }
.hub-consent input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--color-accent); }
.hub-consent input { margin-top: 3px; flex: none; }

.hub-success-title { font-family: var(--font-serif); font-size: 22px; margin: 0 0 var(--space-xs); }

.section-body { color: var(--color-text-secondary); font-size: 17px; max-width: 52ch; }
.btn-large { min-height: 52px; padding: 0 32px; font-size: 15px; }

/* ---------- Footer ---------- */
.site-footer { padding: var(--space-lg) 0; border-top: 1px solid var(--color-border); }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--color-muted);
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.26em;
}
.footer-logo .logo-word { margin-right: -0.26em; }
.footer-logo img { width: 28px; height: auto; flex: none; }
.footer-legal { display: flex; gap: var(--space-md); }
.footer-legal a { color: var(--color-muted); transition: color var(--transition); }
.footer-legal a:hover { color: var(--color-accent); }

/* ---------- Scroll reveals ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-premium), transform 700ms var(--ease-premium); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.hero .reveal { transition-delay: 120ms; }
.hero .reveal:nth-child(2) { transition-delay: 260ms; }
.hero .reveal:nth-child(3) { transition-delay: 400ms; }
.hero .reveal:nth-child(4) { transition-delay: 520ms; }
.hero .reveal:nth-child(5) { transition-delay: 640ms; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .panel { padding: var(--space-md); }
}

@media (max-width: 1024px) {
  .band { height: 70vh; }
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }

  /* Nav becomes a full panel below the bar , it used to simply disappear. */
  .nav-links {
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-sm) var(--space-md) var(--space-lg);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 18px 40px rgba(27, 25, 23, 0.12);
    max-height: calc(100vh - 76px);
    overflow-y: auto;
  }
  .nav-links:not(.is-open) { display: none; }
  .nav-links a,
  .nav-more-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 52px;
    font-size: 17px;
    color: var(--color-text) !important;
    border-bottom: 1px solid var(--color-border);
  }
  .nav-more { width: 100%; }
  .nav-more-trigger { justify-content: space-between; }
  .nav-more-menu {
    position: static;
    min-width: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0 0 0 var(--space-md);
  }
  .nav-more-menu a { padding: 0; font-size: 16px; }

  /* Stacked: tapping a panel opens it, rather than everything being open at
     once or expanding on a hover that does not exist on touch. */
  .panels { flex-direction: column; gap: var(--space-sm); height: auto; }
  .panel { flex: 0 0 auto; cursor: pointer; }
  .panel:hover, .panel:focus-within { flex-grow: 0; }
  .panel-toggle {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    top: var(--space-sm);
    right: var(--space-sm);
    border: 1px solid rgba(251, 250, 248, 0.28);
    color: var(--color-text-on-dark-soft);
    opacity: 0.9;
    animation: none;
  }
  .panel.reveal.is-visible:not(.is-open) .panel-toggle { animation: panelAffordance 2.8s 350ms ease-out 1; }
  .panel.is-open .panel-toggle { border-color: rgba(251, 250, 248, 0.52); }
  .panel .panel-more {
    display: grid;
    grid-template-rows: 0fr;
    max-height: none;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    transition: grid-template-rows 280ms var(--ease-panel), opacity 140ms ease-out;
  }
  /* Mobile cards must grow with their complete explanation. The desktop
     max-height rule is more specific because focus/hover is also active on
     touch, so the open state explicitly removes that cap here. */
  .panel.is-open .panel-more { max-height: none; }
  /* The 0fr collapse needs exactly one child, hence .panel-more-inner. */
  .panel .panel-more-inner { min-height: 0; }
  .panel.is-open .panel-more {
    grid-template-rows: 1fr;
    margin-top: var(--space-md);
    opacity: 1;
    transition: grid-template-rows 280ms var(--ease-panel), opacity 160ms 60ms ease-out;
  }
  .panel:hover:not(.is-open) { background: rgba(27, 25, 23, 0.52); border-color: rgba(251, 250, 248, 0.16); }
  .closing-scrim { background: linear-gradient(0deg, rgba(27,25,23,0.86) 0%, rgba(27,25,23,0.55) 80%); }
  /* On touch the wheel stays pinned while the page scroll advances one active
     step at a time. The inactive copy is replaced, never stacked below it. */
  .cycle-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "visual" "steps";
    gap: var(--space-sm);
    align-content: center;
  }
  .cycle { height: 340vh; }
  .cycle-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 640px;
    padding: 76px 0 var(--space-md);
    overflow: hidden;
  }
  .cycle-title { margin-bottom: 0; }
  .cycle-visual { position: relative; width: min(100%, 320px); margin: 0 auto; }
  .cycle-captions {
    position: relative;
    margin-top: var(--space-xs);
    min-height: 2.8em;
    pointer-events: none;
  }
  .cycle-caption {
    inset: 0;
    width: 100%;
    display: block;
    min-height: 0;
    padding: 4px;
    font-size: 11px;
    letter-spacing: 0.1em;
    line-height: 1.25;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: color 300ms var(--ease-panel), opacity 300ms var(--ease-panel), transform 300ms var(--ease-panel);
  }
  .cycle-caption span { display: block; font-size: 10px; margin-bottom: 2px; }
  .cycle-caption.is-active { color: var(--color-accent-dark); opacity: 1; transform: translateY(0); pointer-events: auto; }
  .cycle-step-item,
  .cycle-step-item.is-shown {
    position: absolute;
    inset: 0;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: var(--space-sm);
    min-height: 190px;
    padding-left: var(--space-sm);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 420ms var(--ease-panel), transform 420ms var(--ease-panel), visibility 0s linear 420ms;
  }
  .cycle-steps { position: relative; display: block; height: 190px; margin-top: var(--space-xs); }
  .cycle-step-item.is-current {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }
  .cycle-thumb,
  .cycle-step-item.is-shown .cycle-thumb {
    width: 104px;
    height: 104px;
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 420ms var(--ease-panel), transform 420ms var(--ease-panel);
  }
  .cycle-step-item.is-current .cycle-thumb { opacity: 1; transform: scale(1); }
  .download-item { flex-direction: column; align-items: flex-start; }
}

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

  .pkg-row-head { display: none; }
  .pkg-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: var(--space-md) 0;
  }
  .pkg-row > span:first-child { font-family: var(--font-serif); font-size: 17px; }
  .pkg-row span:not(:first-child) { text-align: left; color: var(--color-text-secondary); }
  .pkg-row span:not(:first-child)::before {
    content: attr(data-label) ": ";
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
  }

  .band { height: 64vh; align-items: flex-end; padding-bottom: var(--space-lg); }
  /* Text drops to the bottom on mobile, so the scrim weights the bottom too. */
  .page-hero { min-height: 56vh; align-items: flex-end; padding: var(--space-xl) 0 var(--space-lg); }
  .page-hero-scrim { background: linear-gradient(0deg, rgba(27,25,23,0.84) 0%, rgba(27,25,23,0.42) 75%); }
  .band-scrim,
  .band-scrim-strong { background: linear-gradient(0deg, rgba(27,25,23,0.80) 0%, rgba(27,25,23,0.30) 70%); }
  .hero-inner { padding-bottom: var(--space-xl); }
  .hero-lockup { margin-bottom: var(--space-sm); }

  .feature-section { min-height: 520px; text-align: left; padding: var(--space-xl) 0; }
  .feature-text { padding: var(--space-lg) 0; max-width: 100%; }

  .location-section { padding: var(--space-xl) 0; }
  .location-title { margin-bottom: var(--space-lg); }
  .location-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .map-card { aspect-ratio: 3 / 2; }

  .info-section { padding: var(--space-xl) 0; }
  .info-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  /* Stacked: drop the desktop side-flip so every chapter reads text then picture. */
  .info-media-first .info-media { order: 0; }
  .info-media { aspect-ratio: 3 / 2; }

  .content-hub { text-align: left; padding: var(--space-xl) 0; }
  .content-hub-inner .section-body { margin-left: 0; }
  .hub-form-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .quote-grid { grid-template-columns: 130px 1fr; gap: var(--space-md); align-items: start; }
  .quote-strip-reverse .quote-grid {
    grid-template-columns: minmax(0, 1fr) 130px;
    column-gap: var(--space-md);
  }
  .tiles { padding: var(--space-xl) 0; }
}

@media (max-width: 700px) {
  .cycle-title { font-size: clamp(28px, 8vw, 34px); }
  .cycle-stage { padding-top: 72px; }
  .cycle-visual { width: min(100%, 190px); }
  .cycle-step-item,
  .cycle-step-item.is-shown { grid-template-columns: 96px minmax(0, 1fr); min-height: 205px; }
  .cycle-thumb,
  .cycle-step-item.is-shown .cycle-thumb { width: 96px; height: 96px; }
  .cycle-steps { height: 205px; }
  .cycle-step-item p { font-size: 13px; line-height: 1.35; }
}

@media (max-width: 480px) {
  .header-inner { height: 64px; }
  .hero { min-height: 560px; }
  .logo-mark { width: 28px; height: 28px; }
  .logo { gap: 9px; font-size: 20px; }
  .cycle-visual { width: min(100%, 190px); }
  .cycle-title h2 { font-size: 29px; }
  .cycle-title .section-body { font-size: 14px; line-height: 1.45; }
}

@media (prefers-reduced-motion: reduce) {
  .panel { transition: none; }
  .panel-toggle { animation: none !important; }
  .panel .panel-more { opacity: 1; pointer-events: auto; transition: none; }
  .cycle { height: 340vh; }
  .cycle-stage { position: sticky; top: 0; height: 100svh; min-height: 640px; padding: 76px 0 var(--space-md); }
  .cycle-step-item { transition: none; }
  .cycle-caption { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-media img { transform: none; }
  [data-parallax] { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .cycle-step-item:not(.is-current) { opacity: 0; visibility: hidden; }
  .cycle-caption { position: absolute; opacity: 0; transform: none; }
  .cycle-caption.is-active { opacity: 1; transform: none; }
}

/* ---------- Für Unternehmen ---------- */
.company-page {
  --color-bg: #FAF6F1;
  --color-bg-alt: #EDE6DC;
  --color-surface: #FFFFFF;
  --color-border: #D9CFC2;
  --color-border-strong: #C8B9A8;
  --color-text: #3D3228;
  --color-text-secondary: #685A4D;
  --color-muted: #806F60;
  --color-accent: #B8946A;
  --color-accent-hover: #9D7852;
  --color-accent-dark: #80603F;
  --color-text-on-dark: #FFFFFF;
  --color-text-on-dark-soft: rgba(255, 255, 255, 0.86);
}
.company-page .site-header { background: transparent; border-bottom-color: transparent; }
.company-page .site-header .logo,
.company-page .site-header .nav-links a,
.company-page .site-header .nav-more-trigger,
.company-page .site-header .nav-toggle { color: var(--color-text-on-dark); }
.company-page .site-header.is-scrolled { background: rgba(250, 246, 241, 0.94); border-bottom-color: var(--color-border); }
.company-page .site-header.is-scrolled .logo,
.company-page .site-header.is-scrolled .nav-links a,
.company-page .site-header.is-scrolled .nav-more-trigger,
.company-page .site-header.is-scrolled .nav-toggle { color: var(--color-text); }
.company-page .site-header .nav-more-menu a { color: var(--color-text-secondary); }
.company-page .site-header .nav-more-menu a:hover { color: var(--color-accent); }
/* ---------- Header navigation states, shared across every header variant ---------- */
.site-header:not(.is-scrolled):not(.site-header-solid) .nav-links > a,
.site-header:not(.is-scrolled):not(.site-header-solid) .nav-more-trigger { color: var(--color-text-on-dark-soft); font-weight: 300; }
.site-header:not(.is-scrolled):not(.site-header-solid) .nav-links > a:hover,
.site-header:not(.is-scrolled):not(.site-header-solid) .nav-more-trigger:hover,
.site-header:not(.is-scrolled):not(.site-header-solid) .nav-more-trigger[aria-expanded="true"] { color: var(--color-header-accent); font-weight: 300; }
.site-header:not(.is-scrolled):not(.site-header-solid) .nav-links > a[aria-current="page"],
.site-header:not(.is-scrolled):not(.site-header-solid) .nav-more-trigger.is-current { color: var(--color-header-accent); font-weight: 500; }

.site-header.is-scrolled .nav-links > a,
.site-header.is-scrolled .nav-more-trigger,
.site-header-solid .nav-links > a,
.site-header-solid .nav-more-trigger { color: var(--color-text-secondary); font-weight: 300; }
.site-header.is-scrolled .nav-links > a:hover,
.site-header.is-scrolled .nav-more-trigger:hover,
.site-header.is-scrolled .nav-more-trigger[aria-expanded="true"],
.site-header-solid .nav-links > a:hover,
.site-header-solid .nav-more-trigger:hover,
.site-header-solid .nav-more-trigger[aria-expanded="true"] { color: var(--color-header-accent); font-weight: 300; }
.site-header.is-scrolled .nav-links > a[aria-current="page"],
.site-header.is-scrolled .nav-more-trigger.is-current,
.site-header-solid .nav-links > a[aria-current="page"],
.site-header-solid .nav-more-trigger.is-current { color: var(--color-text); font-weight: 500; }

.site-header .nav-more-menu a { font-weight: 300; }
.site-header .nav-more-menu a:hover,
.company-page .site-header .nav-more-menu a:hover { background: transparent; color: var(--color-header-accent); font-weight: 300; }
.site-header:not(.is-scrolled):not(.site-header-solid) .nav-more-menu a[aria-current="page"] { color: var(--color-header-accent); font-weight: 500; }
.site-header.is-scrolled .nav-more-menu a[aria-current="page"],
.site-header-solid .nav-more-menu a[aria-current="page"] { color: var(--color-text); font-weight: 500; }

@media (max-width: 900px) {
  .site-header .nav-links a,
  .company-page .site-header .nav-links a,
  .site-header .nav-more-trigger,
  .company-page .site-header .nav-more-trigger { color: var(--color-text-secondary); font-weight: 300; }
  .site-header .nav-links a:hover,
  .company-page .site-header .nav-links a:hover,
  .site-header .nav-more-trigger:hover,
  .company-page .site-header .nav-more-trigger:hover,
  .site-header .nav-more-trigger[aria-expanded="true"],
  .company-page .site-header .nav-more-trigger[aria-expanded="true"] { color: var(--color-header-accent); font-weight: 300; }
  .site-header .nav-links a[aria-current="page"],
  .company-page .site-header .nav-links a[aria-current="page"],
  .site-header .nav-more-trigger.is-current,
  .company-page .site-header .nav-more-trigger.is-current,
  .site-header .nav-more-menu a[aria-current="page"],
  .company-page .site-header .nav-more-menu a[aria-current="page"] { color: var(--color-text); font-weight: 500; }
  .site-header .nav-more-menu a:hover,
  .company-page .site-header .nav-more-menu a:hover { background: transparent; color: var(--color-header-accent); font-weight: 300; }
}

.company-page .btn-primary { background: var(--color-accent); color: var(--color-text); }
.company-page .btn-primary:hover { background: var(--color-accent-hover); color: var(--color-text); }
.company-page .btn-primary:focus-visible { outline-color: var(--color-accent-dark); }
.btn-light { background: var(--color-surface); color: var(--color-text); border-color: var(--color-surface); }
.btn-light:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text); }
.btn-light:focus-visible { outline: 2px solid var(--color-surface); outline-offset: 3px; }

.company-hero { position: relative; min-height: min(780px, 92vh); display: flex; align-items: flex-end; overflow: hidden; background: var(--color-text); color: var(--color-text-on-dark); }
.company-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.company-hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(61, 50, 40, 0.84) 0%, rgba(61, 50, 40, 0.46) 64%, rgba(61, 50, 40, 0.3) 100%), linear-gradient(0deg, rgba(61, 50, 40, 0.7) 0%, transparent 70%); }
.company-hero-inner { position: relative; z-index: 1; width: 100%; max-width: 820px; margin-left: 0; padding-left: clamp(24px, 6vw, 132px); padding-right: var(--space-md); padding-top: 170px; padding-bottom: clamp(72px, 11vh, 140px); }
.company-eyebrow { color: var(--color-accent); }
.company-hero h1 { max-width: 760px; font-size: clamp(44px, 7vw, 82px); line-height: 0.98; letter-spacing: -0.02em; margin: 0 0 var(--space-md); color: var(--color-text-on-dark); }
.company-hero-subline { max-width: 610px; margin: 0 0 var(--space-lg); font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: var(--color-text-on-dark-soft); }
.company-hero .hero-actions { align-items: center; }
.btn-conversation { background: #A9573A; border-color: #A9573A; color: #FFFFFF; }
.btn-conversation:hover { background: #984A2E; border-color: #984A2E; color: #FFFFFF; }
.btn-conversation:focus-visible { outline: 2px solid #A9573A; outline-offset: 2px; }
.hero-actions .btn-outline-light { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.55); }
.hero-actions .btn-outline-light:hover { color: #FFFFFF; border-color: #FFFFFF; background: rgba(255, 255, 255, 0.1); }
.private-page .private-hero .company-hero-media { object-position: center 48%; }

/* All top-level page copy uses the same viewport inset as the home hero. */
.page-hero-inner,
.stub-inner,
.legal-hero-inner,
.downloads-page .downloads-hero-inner {
  margin-left: 0;
  padding-left: clamp(24px, 6vw, 132px);
  padding-right: var(--space-md);
}
.private-page .company-value-kicker { max-width: 15ch; height: clamp(140px, 13vw, 170px); min-height: 0; font-size: clamp(28px, 3.7vw, 50px); }
.private-page .private-value-kicker-personal { max-width: 15ch; white-space: normal; font-size: clamp(28px, 3.45vw, 48px); letter-spacing: -0.03em; }
.private-page .private-value-kicker-advice { max-width: 15ch; font-size: clamp(24px, 3.15vw, 42px); letter-spacing: -0.03em; }
.private-page .company-value-title { min-height: 2.7em; }
.private-page .company-value-card:has(.company-value-toggle[aria-expanded="true"]) .company-value-kicker { height: auto; min-height: 0; }
.private-page .company-values { padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(36px, 5vw, 68px); }
.private-value-detail-heading { margin: 0 0 10px; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.25; color: var(--color-text-on-dark); }

/* ---------- Private app presentation ---------- */
.private-app { padding: clamp(44px, 6vw, 84px) 0; background: var(--color-bg); color: var(--color-text); }
.private-app-intro { max-width: 780px; margin-bottom: clamp(34px, 5vw, 68px); }
.private-app-intro h2 { max-width: 760px; font-size: clamp(36px, 5vw, 60px); line-height: 1.02; letter-spacing: -0.015em; }
.private-app-intro .section-body { max-width: 60ch; margin: var(--space-sm) 0 0; padding: 0; color: var(--color-text-secondary); font-size: clamp(14px, 1.15vw, 16px); line-height: 1.5; background: transparent; border: 0; box-shadow: none; }
.private-app-layout { position: relative; display: grid; grid-template-columns: minmax(300px, 0.92fr) minmax(360px, 1fr); gap: clamp(48px, 8vw, 120px); align-items: center; }
.private-app-visual { position: relative; width: min(100%, 520px); aspect-ratio: 2 / 3; margin: 0 auto; isolation: isolate; }
.private-app-visual::after { display: none; }
.private-app-visual img { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 24px 48px rgba(61, 50, 40, 0.14); }
.private-app-hotspot { position: absolute; z-index: 3; width: 16px; height: 16px; margin: 0; padding: 0; border: 2px solid var(--color-accent); border-radius: 50%; background: rgba(255, 255, 255, 0.88); box-shadow: 0 0 0 7px rgba(184, 148, 106, 0.16); cursor: pointer; appearance: none; animation: private-app-pulse 2.8s ease-in-out infinite; transition: opacity 260ms ease, background var(--transition), box-shadow var(--transition), transform var(--transition); }
.private-app-hotspot:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 5px; }
.private-app-hotspot-avatar { top: 35%; left: 54%; }
.private-app-hotspot-calendar { top: 67%; left: 55%; animation-delay: 260ms; }
.private-app-hotspot-chat { top: 72%; left: 65%; animation-delay: 520ms; }
.private-app-hotspot-data { top: 51%; left: 73%; animation-delay: 780ms; }
.private-app-features { display: grid; gap: clamp(18px, 2vw, 30px); }
.private-app-connectors { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.private-app-connectors path { fill: none; stroke: var(--color-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.78; animation: none; }
.private-app-mobile-callout { display: none; }
.private-app:has([data-app-feature="progress"].is-active) [data-app-connector="progress"],
.private-app:has([data-app-feature="calendar"].is-active) [data-app-connector="calendar"],
.private-app:has([data-app-feature="chat"].is-active) [data-app-connector="chat"],
.private-app:has([data-app-feature="data"].is-active) [data-app-connector="data"] { opacity: 1; }
.private-app-feature { position: relative; display: grid; gap: 6px; width: 100%; padding: 0 0 clamp(20px, 2vw, 28px) 0; text-align: left; color: var(--color-text); background: transparent; border: 0; border-bottom: 1px solid var(--color-border); cursor: pointer; font: inherit; transition: border-color var(--transition); }
.private-app-feature:last-child { border-bottom: 0; }
.private-app-feature:hover, .private-app-feature:focus-visible, .private-app-feature.is-active { border-bottom-color: var(--color-accent); }
.private-app-feature:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 8px; }
.private-app-feature-kicker { font-size: 11px; line-height: 1.2; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-accent-dark); }
.private-app-feature strong { font-family: var(--font-sans); font-size: clamp(18px, 1.65vw, 25px); font-weight: 500; line-height: 1.14; hyphens: none; overflow-wrap: normal; word-break: normal; }
.private-app-feature > span:last-child { max-width: 42ch; color: var(--color-text-secondary); font-size: 15px; line-height: 1.45; }
.private-app:has([data-app-feature="progress"].is-active) [data-app-hotspot="progress"],
.private-app:has([data-app-feature="calendar"].is-active) [data-app-hotspot="calendar"],
.private-app:has([data-app-feature="chat"].is-active) [data-app-hotspot="chat"],
.private-app:has([data-app-feature="data"].is-active) [data-app-hotspot="data"] { background: var(--color-accent); box-shadow: 0 0 0 9px rgba(184, 148, 106, 0.24), 0 0 24px rgba(184, 148, 106, 0.46); transform: scale(1.18); }
@keyframes private-app-pulse { 0%, 100% { opacity: 0.68; transform: scale(0.88); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes private-app-line { 0%, 100% { opacity: 0.58; transform: scaleX(0.84); } 50% { opacity: 1; transform: scaleX(1); } }

@media (max-width: 900px) {
  .private-app-intro { margin-bottom: 42px; }
  .private-app-intro .section-body { margin-top: 16px; }
  .private-app-layout { grid-template-columns: 1fr; gap: clamp(48px, 9vw, 80px); }
  .private-app-visual { width: min(100%, 500px); }
  .private-app-features { display: none; }
  .private-app-connectors { display: none; }
  .private-app-mobile-callout { position: absolute; z-index: 4; top: 16px; right: 14px; left: 14px; width: auto; display: grid; gap: 7px; padding: 18px 18px 20px; color: var(--color-text-on-dark); background: rgba(61, 50, 40, 0.94); border-left: 2px solid var(--color-accent); box-shadow: 0 18px 34px rgba(61, 50, 40, 0.22); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 220ms ease, transform 220ms ease; }
  .private-app-mobile-callout.is-visible { opacity: 1; transform: translateY(0); }
  .private-app-mobile-callout > span:first-child { font-size: 10px; line-height: 1.2; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-accent-light); }
  .private-app-mobile-callout strong { font-family: var(--font-sans); font-size: clamp(16px, 4.5vw, 21px); font-weight: 500; line-height: 1.15; }
  .private-app-mobile-callout > span:last-child { color: var(--color-text-on-dark-soft); font-size: 13px; line-height: 1.42; }
}

.company-values, .company-packages, .company-process, .company-contact { padding: clamp(88px, 11vw, 160px) 0; }
.company-values { background: var(--color-bg); color: var(--color-text); }
.company-packages { position: relative; overflow: hidden; background: var(--color-text); color: var(--color-text-on-dark); }
.company-packages-media, .company-packages-scrim { position: absolute; inset: 0; overflow: hidden; }
/* The backdrop has its own stable frame. It must not inherit the changing
   height of an opening card, otherwise the image visibly zooms whenever the
   active package changes. */
.company-packages-media { right: 0; bottom: auto; left: 0; height: 1500px; }
.company-packages-media img { position: absolute; top: 0; left: 50%; width: 100%; height: 100%; min-height: 0; object-fit: cover; transform: translateX(-50%); transform-origin: top center; transition: none; }
.company-packages-scrim { background: rgba(61, 50, 40, 0.76); }
.company-packages > .container { position: relative; z-index: 1; }
.company-packages .company-section-intro h2 { color: var(--color-text-on-dark); }
.company-packages .company-section-intro .section-body { color: var(--color-text-on-dark-soft); }
.company-process { background: var(--color-bg); }
.company-contact { background: var(--color-text); color: var(--color-text-on-dark); }
.company-section-intro { max-width: 720px; margin-bottom: var(--space-lg); }
.company-section-intro h2, .company-contact-copy h2 { max-width: 760px; font-size: clamp(36px, 5vw, 60px); line-height: 1.02; letter-spacing: -0.015em; }
.company-section-intro .section-body { margin: var(--space-md) 0 0; }

.company-value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 34px); align-items: start; }
.company-value-card { position: relative; min-width: 0; overflow: hidden; background: var(--color-text); border: 1px solid var(--color-border); transition: background var(--transition), border-color var(--transition), box-shadow var(--transition); }
.company-value-card:has(.company-value-toggle[aria-expanded="true"]) { background: rgba(184, 148, 106, 0.35); border-color: rgba(255, 255, 255, 0.56); color: var(--color-text-on-dark); }
.company-value-toggle { position: relative; display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: clamp(540px, 70vh, 760px); padding: clamp(24px, 3vw, 44px); overflow: hidden; text-align: left; color: var(--color-text-on-dark); background: transparent; border: 0; cursor: pointer; }
.company-value-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -4px; }
.company-value-image { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.company-value-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(61, 50, 40, 0.32) 0%, rgba(61, 50, 40, 0.14) 38%, rgba(61, 50, 40, 0.82) 100%); }
.company-value-image img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 900ms var(--ease-premium), filter 500ms ease; }
.company-value-card:hover .company-value-image img, .company-value-toggle:focus-visible .company-value-image img { transform: scale(1.07); }
.company-value-toggle > span:not(.company-value-image) { position: relative; z-index: 1; }
.company-value-index, .company-package-index, .company-process-number { font-size: 12px; line-height: 1; letter-spacing: 0.16em; color: var(--color-accent); }
.company-value-trend { --trend-rotation: 45deg; position: absolute; top: 38%; left: 50%; z-index: 3; display: block; width: clamp(72px, 9vw, 112px); height: clamp(72px, 9vw, 112px); color: var(--color-accent); transform: translate(-50%, -50%) rotate(var(--trend-rotation)); transition: opacity 260ms ease, transform 360ms var(--ease-premium), visibility 0s linear 0s; }
.company-value-toggle > span.company-value-trend { position: absolute; z-index: 3; }
.company-value-trend::before { content: ''; position: absolute; top: 18%; left: calc(50% - 2px); width: 4px; height: 64%; background: currentColor; }
.company-value-trend::after { content: ''; position: absolute; top: 10%; left: 50%; width: 24px; height: 24px; border-top: 4px solid currentColor; border-left: 4px solid currentColor; transform: translateX(-50%) rotate(45deg); }
.company-value-trend-down { --trend-rotation: 135deg; }
.company-value-card:has(.company-value-toggle[aria-expanded="true"]) .company-value-trend { visibility: hidden; opacity: 0; transform: translate(-50%, -50%) rotate(var(--trend-rotation)) scale(0.72); transition: opacity 220ms ease, transform 300ms var(--ease-premium), visibility 0s linear 220ms; }
.company-value-kicker { position: relative; z-index: 3; width: 100%; max-width: 11ch; min-height: calc(3 * 0.96em); margin-top: auto; font-family: var(--font-serif); font-size: clamp(32px, 4.3vw, 58px); line-height: 0.96; letter-spacing: -0.02em; color: var(--color-text-on-dark); hyphens: auto; overflow-wrap: break-word; word-break: normal; transition: transform 420ms var(--ease-premium); }
.company-value-word { white-space: nowrap; }
.company-value-kicker-productivity { font-size: clamp(30px, 3.9vw, 52px); }
.company-value-title { position: relative; z-index: 3; width: 100%; max-width: 30ch; margin-top: var(--space-sm); font-family: var(--font-sans); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.35; letter-spacing: 0.01em; color: var(--color-text-on-dark-soft); hyphens: auto; overflow-wrap: break-word; word-break: normal; transition: transform 420ms var(--ease-premium); }
.company-value-plus { position: absolute; top: var(--space-md); right: var(--space-md); width: 17px; height: 17px; }
.company-value-plus::before, .company-value-plus::after { content: ''; position: absolute; top: 8px; left: 0; width: 17px; height: 1px; background: currentColor; transition: transform var(--transition); }
.company-value-plus::after { transform: rotate(90deg); }
.company-value-toggle[aria-expanded="true"] .company-value-plus::after { transform: rotate(0); }
.company-value-detail { position: absolute; top: 44%; right: 0; bottom: 0; left: 0; z-index: 2; display: flex; align-items: flex-start; padding: clamp(24px, 3vw, 32px) clamp(24px, 3vw, 44px); visibility: hidden; opacity: 0; pointer-events: none; background: linear-gradient(180deg, rgba(61, 50, 40, 0.94) 0%, rgba(61, 50, 40, 0.98) 100%); transition: opacity 300ms ease, visibility 0s linear 300ms; }
.company-value-detail-inner { width: 100%; min-height: 0; overflow: visible; }
.company-value-detail p { max-width: 54ch; margin: 0; font-size: clamp(13.5px, 1.1vw, 15px); line-height: 1.48; color: var(--color-text-on-dark-soft); }
.company-value-card:has(.company-value-toggle[aria-expanded="true"]) .company-value-detail { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 360ms ease, visibility 0s linear 0s; }
.company-value-card:has(.company-value-toggle[aria-expanded="true"]) .company-value-kicker,
.company-value-card:has(.company-value-toggle[aria-expanded="true"]) .company-value-title { transform: translateY(calc(-1 * clamp(220px, 38vh, 320px))); }
.company-value-card:has(.company-value-toggle[aria-expanded="true"]) .company-value-kicker { font-size: clamp(25px, 3.2vw, 42px); line-height: 1; }
.company-value-card:has(.company-value-toggle[aria-expanded="true"]) .company-value-title { font-size: clamp(13px, 1vw, 15px); }
.company-value-card:has(.company-value-toggle[aria-expanded="true"]) .company-value-title { max-width: 26ch; }
.company-sources { display: grid; gap: 5px; margin: 12px 0 0; padding: 0; list-style: none; }
.company-sources a { font-size: 10px; line-height: 1.35; color: rgba(255, 255, 255, 0.68); text-decoration: underline; text-decoration-color: rgba(184, 148, 106, 0.55); text-underline-offset: 3px; }
.company-sources a:hover { color: var(--color-text-on-dark); }

.company-package-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); max-width: 1040px; margin: 0 auto; align-items: start; }
.company-package { min-width: 0; min-height: 240px; overflow: hidden; color: var(--color-text-on-dark); border: 1px solid rgba(255, 255, 255, 0.28); border-top-color: rgba(255, 255, 255, 0.52); border-radius: 4px; box-shadow: 0 18px 38px rgba(27, 25, 23, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18); backdrop-filter: blur(6px); transition: box-shadow 420ms var(--ease-premium), border-color 420ms var(--ease-premium), background 420ms ease; }
.company-package:nth-child(1) { background: linear-gradient(145deg, rgba(237, 230, 220, 0.30), rgba(237, 230, 220, 0.14)); }
.company-package:nth-child(2) { background: linear-gradient(145deg, rgba(184, 148, 106, 0.38), rgba(184, 148, 106, 0.20)); }
.company-package:nth-child(3) { background: linear-gradient(145deg, rgba(61, 50, 40, 0.56), rgba(61, 50, 40, 0.38)); }
.company-package:hover, .company-package:focus-within { border-color: rgba(255, 255, 255, 0.52); box-shadow: 0 24px 46px rgba(27, 25, 23, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.company-package.is-open { border-color: rgba(255, 255, 255, 0.56); box-shadow: 0 24px 44px rgba(27, 25, 23, 0.27), inset 0 1px 0 rgba(255, 255, 255, 0.26); }
.company-package:nth-child(1):hover, .company-package:nth-child(1):focus-within { background: linear-gradient(145deg, rgba(237, 230, 220, 0.38), rgba(237, 230, 220, 0.20)); }
.company-package:nth-child(2):hover, .company-package:nth-child(2):focus-within { background: linear-gradient(145deg, rgba(184, 148, 106, 0.46), rgba(184, 148, 106, 0.26)); }
.company-package:nth-child(3):hover, .company-package:nth-child(3):focus-within { background: linear-gradient(145deg, rgba(61, 50, 40, 0.64), rgba(61, 50, 40, 0.46)); }
.company-package-toggle { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'name icon' 'summary icon'; align-items: end; gap: 12px 20px; width: 100%; min-height: 240px; padding: clamp(26px, 3vw, 40px); text-align: left; font: inherit; color: var(--color-text-on-dark); background: transparent; border: 0; cursor: pointer; }
.company-package-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -5px; }
.company-package-name { grid-area: name; font-family: var(--font-serif); font-size: clamp(34px, 3.6vw, 52px); font-weight: 500; line-height: 0.98; letter-spacing: -0.02em; }
.company-package-summary { grid-area: summary; display: flex; flex-wrap: wrap; gap: 5px 10px; margin: 0; color: var(--color-text-on-dark-soft); font-size: 14px; line-height: 1.35; }
.company-package-summary span { color: var(--color-accent); white-space: nowrap; }
.company-package-icon { position: relative; grid-area: icon; align-self: start; width: 18px; height: 18px; margin-top: 2px; color: var(--color-accent); }
.company-package-icon::before, .company-package-icon::after { content: ''; position: absolute; top: 8px; left: 0; width: 18px; height: 1px; background: currentColor; transition: transform 360ms var(--ease-premium); }
.company-package-icon::after { transform: rotate(90deg); }
.company-package.is-open .company-package-icon::after { transform: rotate(0); }
.company-package-detail { max-height: 0; padding: 0 clamp(26px, 3vw, 40px); overflow: hidden; opacity: 0; border-top: 1px solid transparent; transition: max-height 620ms var(--ease-premium), padding 620ms var(--ease-premium), opacity 260ms ease, border-color 260ms ease; }
.company-package.is-open .company-package-detail { max-height: 720px; padding-top: clamp(26px, 3vw, 40px); padding-bottom: clamp(26px, 3vw, 40px); opacity: 1; border-top-color: var(--color-border); }
.company-package-detail p { max-width: 36ch; margin: 0 0 var(--space-md); color: var(--color-text-on-dark-soft); font-size: 15px; line-height: 1.45; }
.company-package ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.company-package li { position: relative; padding: 6px 0 6px 16px; font-size: 14px; line-height: 1.4; color: var(--color-text-on-dark-soft); }
.company-package li::before { content: ''; position: absolute; top: 0.72em; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent); }
.company-package-training { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.company-package-training-count { flex: none; color: var(--color-accent-dark); font-size: 12px; letter-spacing: 0.04em; white-space: nowrap; }

.company-process-flow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: clamp(12px, 1.8vw, 26px); }
.company-process-flow::before { content: ''; position: absolute; top: 50%; right: 7%; left: 7%; z-index: 0; height: 1px; background: var(--color-border-strong); }
.company-process-step { position: relative; z-index: 1; min-width: 0; min-height: clamp(228px, 25vw, 300px); display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; overflow: hidden; isolation: isolate; padding: clamp(22px, 3vw, 38px); color: var(--color-text-on-dark); background: var(--color-text); border: 1px solid rgba(255, 255, 255, 0.28); border-top: 2px solid var(--color-accent); box-shadow: 0 12px 28px rgba(61, 50, 40, 0.12); }
.company-process-step::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(61, 50, 40, 0.08) 0%, rgba(61, 50, 40, 0.16) 34%, rgba(61, 50, 40, 0.84) 100%); }
.company-process-image { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-premium); }
.company-process-step:hover .company-process-image, .company-process-step:focus-within .company-process-image { transform: scale(1.04); }
.company-process-number, .company-process-step h3 { position: relative; z-index: 2; }
.company-process-number { color: var(--color-text-on-dark); }
.company-process-step h3 { max-width: 16ch; margin: auto 0 0; font-family: var(--font-sans); font-size: clamp(18px, 1.55vw, 25px); font-weight: 500; font-style: normal; line-height: 1.08; letter-spacing: 0.01em; hyphens: none; overflow-wrap: normal; word-break: normal; text-wrap: balance; }
.company-process-arrow { position: relative; z-index: 2; align-self: center; display: grid; place-items: center; width: clamp(34px, 3.5vw, 46px); height: clamp(34px, 3.5vw, 46px); color: var(--color-accent); background: var(--color-bg); border: 1px solid var(--color-accent); border-radius: 50%; font-size: clamp(22px, 2.4vw, 30px); line-height: 1; }

/* ---------- Mitgliedschaft als fokussierter Kartenfächer ---------- */
.company-process-heading { max-width: 760px; margin-bottom: clamp(34px, 5vw, 64px); }
.company-process-heading h2 { max-width: 720px; margin: 0; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.04; letter-spacing: -0.015em; }
.company-process-heading .section-body { margin: var(--space-md) 0 0; color: var(--color-text-secondary); font-size: clamp(17px, 1.7vw, 21px); }
.process-slider { position: relative; }
.process-slider-track { display: flex; gap: clamp(18px, 3vw, 32px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 14px max(26px, calc((100% - min(38vw, 420px)) / 2)) 30px; overscroll-behavior-x: contain; }
.process-slider-track::-webkit-scrollbar { display: none; }
.process-slide { position: relative; flex: 0 0 clamp(220px, 38vw, 420px); height: clamp(250px, 28vw, 320px); overflow: hidden; isolation: isolate; scroll-snap-align: center; opacity: 0.3; transform: scale(0.84); filter: saturate(0.45) blur(0.35px); transition: opacity 500ms var(--ease-premium), transform 600ms var(--ease-premium), filter 500ms var(--ease-premium), box-shadow 500ms var(--ease-premium); }
.process-slide.is-active { z-index: 1; opacity: 1; transform: scale(1); filter: none; box-shadow: 0 24px 52px rgba(61, 50, 40, 0.18); }
.process-slide-image, .process-slide-scrim { position: absolute; inset: 0; width: 100%; height: 100%; }
.process-slide-image { z-index: 0; object-fit: cover; transition: transform 800ms var(--ease-premium); }
.process-slide.is-active .process-slide-image { transform: scale(1.035); }
.process-slide-scrim { z-index: 1; background: linear-gradient(180deg, rgba(61, 50, 40, 0.08) 0%, rgba(61, 50, 40, 0.16) 36%, rgba(61, 50, 40, 0.88) 100%); }
.process-slide-copy { position: absolute; right: clamp(24px, 4vw, 54px); bottom: clamp(24px, 4vw, 54px); left: clamp(24px, 4vw, 54px); z-index: 2; color: var(--color-text-on-dark); }
.process-slide-copy .company-process-number { display: block; margin-bottom: var(--space-sm); }
.process-slide-copy h3 { max-width: 16ch; margin: 0; font-family: var(--font-sans); font-size: clamp(20px, 2.8vw, 34px); font-weight: 500; line-height: 1.06; letter-spacing: 0.01em; }
.process-slider-control { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 48px; height: 48px; color: var(--color-text); background: rgba(250, 246, 241, 0.94); border: 1px solid var(--color-accent); border-radius: 50%; box-shadow: 0 12px 24px rgba(61, 50, 40, 0.16); font: 24px/1 var(--font-sans); transform: translateY(-50%); cursor: pointer; transition: background var(--transition), color var(--transition), opacity var(--transition), transform var(--transition); }
.process-slider-control:hover, .process-slider-control:focus-visible { color: var(--color-text-on-dark); background: var(--color-accent); }
.process-slider-control:focus-visible { outline: 2px solid var(--color-text); outline-offset: 4px; }
.process-slider-control:disabled { opacity: 0.35; cursor: default; }
.process-slider-control:disabled:hover { color: var(--color-text); background: rgba(250, 246, 241, 0.94); }
.process-slider-prev { left: 6px; }
.process-slider-next { right: 6px; }
.process-slider-status { margin-top: 4px; color: var(--color-accent-dark); font-size: 12px; letter-spacing: 0.14em; text-align: center; }

.company-contact-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(48px, 10vw, 150px); align-items: start; }
.company-contact-copy { position: sticky; top: 120px; }
.company-contact-copy h2 { color: var(--color-text-on-dark); }
.company-contact-copy .section-body { margin-top: var(--space-md); color: var(--color-text-on-dark-soft); }
.company-form-shell { padding: var(--space-lg); background: var(--color-bg); color: var(--color-text); }
.company-form-shell .hub-field input, .company-form-shell .hub-field select, .company-form-shell .hub-field textarea { border-bottom-color: var(--color-border-strong); }
.company-form-shell .hub-field input:focus, .company-form-shell .hub-field select:focus, .company-form-shell .hub-field textarea:focus { border-bottom-color: var(--color-accent); }

@media (max-width: 900px) {
  .company-value-grid, .company-package-grid { grid-template-columns: 1fr; }
  .company-value-toggle { min-height: clamp(480px, 76svh, 680px); }
  .company-package { min-height: 0; }
  .company-packages-media { height: 2200px; }
  .company-contact-grid { grid-template-columns: 1fr; }
  .company-contact-copy { position: static; }
  .closing-home-inner { grid-template-columns: 1fr; gap: var(--space-lg); }
  .closing-home-copy { max-width: 640px; padding-left: 0; }
  .closing-home-media { justify-self: start; width: min(100%, 340px); transform: none; }
}
@media (max-width: 600px) {
  .company-hero { min-height: 720px; }
  .company-hero-media { object-position: 58% center; }
  .company-hero-scrim { background: linear-gradient(0deg, rgba(61, 50, 40, 0.88) 0%, rgba(61, 50, 40, 0.46) 78%, rgba(61, 50, 40, 0.25) 100%); }
  .company-hero-inner { padding-top: 140px; padding-bottom: 64px; }
  .company-hero h1 { max-width: 12ch; font-size: clamp(42px, 13vw, 64px); }
  .company-hero-subline { font-size: 17px; }
  .company-value-toggle { min-height: 520px; }
  .company-value-detail { top: 40%; padding: 24px; }
  .company-value-card:has(.company-value-toggle[aria-expanded="true"]) .company-value-kicker,
  .company-value-card:has(.company-value-toggle[aria-expanded="true"]) .company-value-title { transform: translateY(calc(-1 * clamp(150px, 27vh, 210px))); }
  .company-value-kicker { max-width: 12ch; font-size: clamp(34px, 10vw, 50px); }
  .company-value-title { max-width: 30ch; font-size: 15px; }
  .company-results .panel h3, .company-results .panel .panel-lead { transform: translateY(0); }
  .company-result-trend { top: 68%; }
  .company-process-flow { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-sm); }
  .company-process-flow::before { top: 0; right: auto; bottom: 0; left: 50%; width: 1px; height: auto; }
  .company-process-step { min-height: 196px; }
  .company-process-step h3 { max-width: 18ch; font-size: clamp(18px, 5vw, 23px); }
  .company-process-arrow { transform: rotate(90deg); align-self: center; }
  .company-process-heading { margin-bottom: 28px; }
  .process-slider-track { gap: 16px; padding-inline: max(22px, calc((100% - 64vw) / 2)); }
  .process-slide { flex-basis: 64vw; height: 270px; }
  .process-slider-control { width: 40px; height: 40px; font-size: 20px; }
  .process-slider-prev { left: 0; }
  .process-slider-next { right: 0; }
  .company-form-shell { padding: var(--space-md); }
}
@media (max-width: 900px) {
  .downloads-page .downloads-columns { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .downloads-page .downloads-hero { padding-top: calc(68px + var(--space-xl)); }
  .downloads-page .download-resource-grid,
  .downloads-page .download-article-grid { grid-template-columns: 1fr; }
  .downloads-page .download-resource-card { grid-template-columns: 92px minmax(0, 1fr); }
  .downloads-page .download-preview { min-height: 220px; }
}

/* ---------- Leistungssport page ---------- */
.performance-page .performance-hero-media { object-position: center 38%; }
.performance-page .performance-intro,
.performance-page .performance-services,
.performance-page .performance-method,
.performance-page .performance-references { padding: clamp(78px, 10vw, 140px) 0; }
.performance-page .performance-intro { background: var(--color-bg); }
.performance-intro-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(42px, 9vw, 140px); align-items: end; }
.performance-intro-heading h2,
.performance-section-heading h2,
.performance-method-copy h2 { max-width: 720px; font-size: clamp(38px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.015em; }
.performance-intro-copy { max-width: 58ch; }
.performance-intro-copy .section-body { margin: 0; color: var(--color-text-secondary); font-size: clamp(17px, 1.7vw, 21px); line-height: 1.52; }
.performance-intro-note { margin: var(--space-lg) 0 0; color: var(--color-accent-dark); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.performance-intro-logos { grid-column: 1 / -1; margin-top: clamp(32px, 5vw, 68px); }
.performance-intro-logos .performance-logo-card { min-height: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.performance-intro-logos .performance-logo-card:hover,
.performance-intro-logos .performance-logo-card:focus-visible { transform: translateY(-4px); box-shadow: none; }
.performance-intro-logos .performance-logo-card img { width: min(100%, 180px); height: 86px; }
.performance-intro-logos .performance-logo-card img[src*="dhb-logo"],
.performance-intro-logos .performance-logo-card img[src*="msc-logo"] { filter: brightness(0.28); }
.performance-intro-logos .performance-logo-card span { color: var(--color-muted); }
.performance-page .performance-services { background: var(--color-bg-alt); }
.performance-section-heading { max-width: 760px; margin-bottom: clamp(34px, 5vw, 64px); }
.performance-section-heading .section-body { max-width: 48ch; margin: var(--space-md) 0 0; color: var(--color-text-secondary); }
.performance-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 34px); }
.performance-service { min-width: 0; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 18px 38px rgba(61, 50, 40, 0.08); }
.performance-service-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-text); }
.performance-service-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-premium); }
.performance-service:hover .performance-service-media img,
.performance-service:focus-within .performance-service-media img { transform: scale(1.035); }
.performance-service-content { padding: clamp(22px, 3vw, 38px); }
.performance-number { display: block; margin-bottom: var(--space-md); color: var(--color-accent); font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.16em; }
.performance-service-content h3 { margin: 0 0 var(--space-sm); font-size: clamp(28px, 3vw, 40px); line-height: 1.02; }
.performance-service-content p { max-width: 34ch; margin: 0; color: var(--color-text-secondary); font-size: 15px; line-height: 1.5; }
.performance-page .performance-method { background: var(--color-text); color: var(--color-text-on-dark); }
.performance-method-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(42px, 8vw, 120px); align-items: center; }
.performance-method-media { aspect-ratio: 4 / 3; overflow: hidden; }
.performance-method-media img { width: 100%; height: 100%; object-fit: cover; }
.performance-method-copy .eyebrow { color: var(--color-accent); }
.performance-method-copy h2 { color: var(--color-text-on-dark); }
.performance-method-copy .section-body { max-width: 48ch; margin: var(--space-md) 0 0; color: var(--color-text-on-dark-soft); }
.performance-checklist { display: grid; gap: 0; max-width: 48ch; margin: var(--space-lg) 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,0.26); }
.performance-checklist li { padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.26); color: var(--color-text-on-dark-soft); }
.performance-checklist li::before { content: '↗'; display: inline-block; margin-right: 12px; color: var(--color-accent); }
.performance-page .performance-references { background: var(--color-bg); }
.performance-references-heading { max-width: 700px; }
.performance-logo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.performance-logo-card { display: flex; min-height: 190px; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 28px; background: var(--color-text); border: 1px solid rgba(255,255,255,0.22); transition: transform 300ms var(--ease-premium), box-shadow 300ms var(--ease-premium); }
.performance-logo-card:hover, .performance-logo-card:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(61, 50, 40, 0.10); }
.performance-logo-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.performance-logo-card img { width: min(100%, 170px); height: 76px; object-fit: contain; }
.performance-logo-card span { color: var(--color-text-on-dark-soft); font-size: 13px; letter-spacing: 0.05em; text-align: center; }
.performance-contact { background: var(--color-text); }

/* Leistungssport: ruhige Referenzen, danach drei bildbasierte Angebote. */
.performance-page .performance-intro { padding-top: clamp(32px, 5vw, 64px); }
.performance-page .performance-intro { opacity: 0; transform: translateY(24px); pointer-events: none; transition: opacity 700ms var(--ease-premium), transform 700ms var(--ease-premium); }
.performance-page.has-scrolled .performance-intro { opacity: 1; transform: translateY(0); pointer-events: auto; }
.performance-intro-simple { padding-top: 0; }
.performance-intro-simple > h2 { max-width: 720px; font-size: clamp(28px, 3.2vw, 42px); font-weight: 500; line-height: 1.04; letter-spacing: -0.01em; }
.performance-intro-simple .performance-intro-logos { margin-top: clamp(42px, 6vw, 78px); }
.performance-intro-simple .performance-logo-grid { align-items: center; }
.performance-intro-simple .performance-logo-card { min-height: 116px; }
.performance-intro-simple .performance-logo-card img { width: min(100%, 190px); height: 88px; }
.performance-intro-simple .performance-logo-card img[src*="nba-basketball-school"] { width: min(100%, 220px); }
.performance-intro-simple .performance-logo-card span { display: none; }
.performance-offerings { position: relative; isolation: isolate; padding: clamp(56px, 7vw, 88px) 0; background: linear-gradient(rgba(61, 50, 40, 0.34), rgba(61, 50, 40, 0.34)), url('../stills/leistungssport-offerings.png') center / cover no-repeat; }
.performance-offering-panels { height: clamp(400px, 31vw, 440px); gap: clamp(18px, 2.4vw, 32px); }
.performance-offering { container-type: inline-size; display: flex; flex-direction: column; justify-content: flex-start; padding: clamp(26px, 3vw, 42px); background: transparent; border-color: rgba(251, 250, 248, 0.26); }
.performance-offering-media, .performance-offering-scrim { position: absolute; inset: 0; }
.performance-offering-media { z-index: 0; }
.performance-offering-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-premium); }
.performance-offering-scrim { z-index: 1; background: linear-gradient(180deg, rgba(169, 87, 58, 0.26) 0%, rgba(27, 25, 23, 0.38) 46%, rgba(27, 25, 23, 0.58) 100%); }
.performance-offering-content { position: relative; z-index: 2; min-width: 0; max-width: 100%; margin-top: 0; }
.performance-offering-content h3 { width: 100%; max-width: 100%; margin: 0 0 var(--space-sm); color: var(--color-text-on-dark); font-size: clamp(26px, 2.4vw, 36px); line-height: 1.04; overflow-wrap: normal; word-break: normal; hyphens: none; text-wrap: balance; }
.performance-offering .panel-lead { width: 100%; max-width: 28ch; color: var(--color-text-on-dark-soft); overflow-wrap: break-word; }
.performance-offering .panel-more { width: 100%; max-width: 36ch; margin-top: var(--space-md); }
.performance-offering .panel-more p { width: 100%; max-width: 100%; color: var(--color-text-on-dark-soft); overflow-wrap: break-word; }
.performance-offering:hover .performance-offering-media img,
.performance-offering:focus-within .performance-offering-media img,
.performance-offering.is-open .performance-offering-media img { transform: scale(1.035); }
.performance-quote { background: var(--color-bg); }

@container (max-width: 300px) {
  .performance-offering-content h3 { font-size: clamp(21px, 9cqw, 28px); }
}

@media (min-width: 901px) {
  /* The title moves upward while the explanation unfolds directly below it.
     Both stay in the card's own layout and clipped area. */
  .performance-offering-content { height: auto; display: flex; flex-direction: column; justify-content: flex-start; }
  .performance-offering .panel-more { position: static; max-height: 0; margin-top: 0; padding: 0; overflow: hidden; background: transparent; transition: max-height 760ms var(--ease-panel), opacity 220ms ease-out, margin-top 760ms var(--ease-panel); }
  .performance-offering:hover .panel-more,
  .performance-offering:focus-within .panel-more,
  .performance-offering.is-open .panel-more { max-height: 220px; margin-top: var(--space-md); opacity: 1; pointer-events: auto; transition: max-height 760ms var(--ease-panel), opacity 320ms 360ms ease-out, margin-top 760ms var(--ease-panel); }
}

@media (max-width: 900px) {
  .performance-intro-grid, .performance-method-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .performance-service-grid, .performance-logo-grid { grid-template-columns: 1fr; }
  .performance-service-content p { max-width: 52ch; }
  .performance-logo-card { min-height: 160px; }
  .performance-offering-panels { height: auto; display: grid; grid-template-columns: 1fr; }
  .performance-offering { min-height: 360px; }
  .performance-offering .panel-more { margin-top: 0; }
  .performance-offering.is-open .panel-more { margin-top: var(--space-md); }
}
@media (max-width: 600px) {
  .performance-page .performance-hero-media { object-position: 58% center; }
  .performance-page .performance-intro,
  .performance-page .performance-services,
  .performance-page .performance-method,
  .performance-page .performance-references { padding: 72px 0; }
  .performance-intro-heading h2,
  .performance-section-heading h2,
  .performance-method-copy h2 { font-size: clamp(38px, 12vw, 54px); }
  .performance-intro-note { line-height: 1.45; }
  .performance-service-content { padding: 24px; }
  .performance-method-media { aspect-ratio: 1 / 0.85; }
  .performance-intro-simple .performance-logo-grid { grid-template-columns: 1fr; }
  .performance-intro-simple .performance-logo-card { min-height: 108px; }
  .performance-page .performance-intro { padding-top: 32px; }
  .performance-offerings { padding: 56px 0; }
  .performance-offering { min-height: 320px; padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .company-package:hover, .company-package:focus-within, .company-package:active { transform: none; }
  .company-value-detail, .company-value-card:has(.company-value-toggle[aria-expanded="true"]) .company-value-detail,
  .company-value-kicker, .company-value-title { transition: none; }
  .private-app-hotspot, .private-app-connectors path { animation: none; }
  .private-app-feature:hover, .private-app-feature:focus-visible, .private-app-feature.is-active { transform: none; }
}