/* scrollcraft.css */
/* ============================================================================
   scrollcraft.css: the taste floor
   ----------------------------------------------------------------------------
   Two layers, and the split matters:

     TOKENS   what you override per brand. Colour roles, the type ramp, the
              spacing scale, elevation, motion. A brand is ~12 values.
     DEVICES  what the engine drives. Do not restyle these to taste; they are
              the mechanism. Style your own markup instead.

   Nothing here draws a "component". There are no card, badge, or pill classes,
   because a stylesheet that ships those is how every page built on it ends up
   with the same shapes. You get a floor and a vocabulary; the composition is
   yours.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* --- colour roles. Override these six and the page is rebranded. -------- */
  --sc-canvas:      #08090b;   /* the page ground. Drift interpolates this.   */
  --sc-surface:     #101217;   /* anything raised off the ground             */
  --sc-ink:         #f4f2ef;   /* primary text                               */
  --sc-ink-soft:    #9a9ba1;   /* secondary text. Tinted, never flat gray.   */
  --sc-accent:      #d8ff3e;   /* ONE accent. It owns a region, not confetti. */
  --sc-accent-ink:  #08090b;   /* text that sits on the accent               */

  --sc-hairline:    color-mix(in oklab, var(--sc-ink) 12%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 22%, transparent);

  /* --- type. Two families max. Display carries voice, text carries prose. - */
  --sc-font-display: "Instrument Sans", "Geist", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, monospace;

  /* Fluid ramp. Tracking tightens as size grows because a face set at 6rem
     with 0 tracking reads loose; this is optical correction, not decoration. */
  --sc-t-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --sc-t-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --sc-t-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --sc-t-lg:   clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --sc-t-xl:   clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
  --sc-t-2xl:  clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  --sc-t-3xl:  clamp(2.8rem, 1.9rem + 4.2vw, 5rem);
  --sc-t-4xl:  clamp(3.4rem, 1.9rem + 6.6vw, 7.5rem);

  --sc-track-tight:  -0.035em;
  --sc-track-snug:   -0.02em;
  --sc-track-normal: -0.005em;
  --sc-track-wide:    0.08em;

  --sc-leading-none: 0.94;
  --sc-leading-tight: 1.06;
  --sc-leading-body: 1.62;

  --sc-measure: 62ch;

  /* --- space. 4px base: the useful middle steps an 8-only scale misses. --- */
  --sc-1: 0.25rem;  --sc-2: 0.5rem;   --sc-3: 0.75rem;  --sc-4: 1rem;
  --sc-5: 1.5rem;   --sc-6: 2rem;     --sc-7: 3rem;     --sc-8: 4rem;
  --sc-9: 6rem;     --sc-10: 8rem;    --sc-11: 12rem;

  /* Section rhythm is fluid so a phone doesn't inherit desktop air. */
  --sc-section: clamp(4.5rem, 9vw, 11rem);
  --sc-gutter:  clamp(1.25rem, 5vw, 5.5rem);
  --sc-maxw:    82rem;

  /* --- radius. Pick one scale for the page and hold it. ------------------- */
  --sc-r-sm: 6px;  --sc-r-md: 12px;  --sc-r-lg: 20px;  --sc-r-pill: 999px;

  /* --- elevation. Every shadow has an offset AND a soft blur, and is tinted
         to the canvas hue. A zero-offset coloured halo is decoration, not
         depth, so there isn't one here. ---------------------------------- */
  --sc-shadow-color: 220 40% 2%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.28),
           0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.20);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.24),
           0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.30);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.22),
           0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.38),
           0 48px 90px -24px hsl(var(--sc-shadow-color) / 0.30);

  /* Edge light: a 1px top highlight sells a raised surface better than any
     amount of blur, because real raised things catch light on their lip. */
  --sc-edge: inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 10%, transparent);

  /* --- motion. Built-in CSS easings are too weak for UI. ------------------ */
  --sc-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --sc-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --sc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --sc-d-fast: 160ms;  --sc-d-base: 240ms;  --sc-d-slow: 420ms;

  --sc-z-stage: 1; --sc-z-copy: 20; --sc-z-chrome: 60;
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  letter-spacing: var(--sc-track-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ------------------------------------------------- the browser surfaces --
   The parts you did not draw still carry the design. Selection, caret, focus
   ring, scrollbar and tabular numerals all ship with defaults that belong to no
   design system. Theming them is the cheapest signal that a page was built
   rather than assembled, and it is the step that gets skipped most reliably. */
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:root { caret-color: var(--sc-accent); accent-color: var(--sc-accent); }
:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
  border-radius: var(--sc-r-sm);
}
:where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
@supports (scrollbar-color: auto) {
  html { scrollbar-color: color-mix(in oklab, var(--sc-ink) 26%, transparent) transparent; scrollbar-width: thin; }
}
:where(table, .sc-nums, [data-sc-count]) { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- typography -- */
.sc-display {
  font-family: var(--sc-font-display);
  font-weight: 500;
  line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
  margin: 0;
}
.sc-display--xl { font-size: var(--sc-t-4xl); }
.sc-display--lg { font-size: var(--sc-t-3xl); }
.sc-display--md { font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); }
.sc-lede {
  font-size: var(--sc-t-lg);
  line-height: 1.44;
  letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink);
  max-width: 46ch;
  text-wrap: pretty;
  margin: 0;
}
.sc-body { max-width: var(--sc-measure); color: var(--sc-ink-soft); text-wrap: pretty; margin: 0; }
.sc-label {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}

/* ---------------------------------------------------------------- layout -- */
.sc-wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.sc-section { padding-block: var(--sc-section); }
/* More space above a heading than below it: the gap belongs to the boundary,
   not to the pair. */
.sc-stack > * + * { margin-top: var(--sc-4); }
.sc-stack > :is(h1,h2,h3) { margin-top: var(--sc-7); }
.sc-stack > :is(h1,h2,h3):first-child { margin-top: 0; }
.sc-rule { height: 1px; border: 0; background: var(--sc-hairline); margin: 0; }

/* =============================================================== DEVICES ==
   Driven by the engine. Restyle your own markup, not these.                */

.sc-act--pinned { position: relative; }
.sc-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: clip;
  z-index: var(--sc-z-stage);
}

/* scrub / sequence media */
.sc-stage :is(video[data-sc-scrub], canvas[data-sc-sequence], .sc-stage__poster) {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
video[data-sc-scrub] { opacity: 0; transition: opacity 380ms var(--sc-ease-out); }
.sc-has-clip video[data-sc-scrub] { opacity: 1; }
/* The poster is a live frame-holder, not a placeholder: it stays up until a
   real video frame has painted, which is what stops the blank-stage flash. */
.sc-stage__poster { z-index: 0; transition: opacity 380ms var(--sc-ease-out); }
.sc-has-clip .sc-stage__poster { opacity: 0; }

/* A scrim only where text sits. A full-frame darkening layer flattens the
   image everywhere to fix contrast in one corner. */
.sc-scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(
    var(--sc-scrim-angle, 180deg),
    color-mix(in oklab, var(--sc-canvas) var(--sc-scrim-a, 78%), transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
    transparent 68%);
}
/* Point the scrim at the copy. A scrim gradient that darkens the top while the
   copy sits at the bottom fixes contrast nowhere and flattens the image
   everywhere, which is the most common way text-over-video goes wrong. */
.sc-scrim--bottom { --sc-scrim-angle: 0deg; }
.sc-scrim--left   { --sc-scrim-angle: 90deg; }
.sc-scrim--right  { --sc-scrim-angle: 270deg; }

/* Corner scrims, for copy anchored to a corner. An edge gradient has to darken
   a whole band across the frame to cover one corner; a corner gradient puts the
   density where the text is and leaves the rest of the image alone. Pair with
   .sc-copy--lead / .sc-copy--trail. */
.sc-scrim--lead {
  background: linear-gradient(to top right,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%,
    transparent 72%);
}
.sc-scrim--trail {
  background: linear-gradient(to top left,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%,
    transparent 72%);
}
/* A band across the bottom, for copy that spans the full width of the frame.
   That is what both corner anchors become below 860px, and it is also the right
   shape whenever the copy block is wider than a corner. */
.sc-scrim--band {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
    transparent 58%);
}
.sc-scrim--vignette {
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%,
              color-mix(in oklab, var(--sc-canvas) 70%, transparent) 100%);
}

/* copy over a stage.
   max-width is in rem, never ch. A `ch` on this container resolves against the
   CONTAINER's font-size (body size), not the display size of the heading inside
   it, so `max-width: 20ch` here silently produces a ~180px column and wraps a
   hero headline to six lines. Set a ch measure on the text element itself. */
.sc-copy {
  position: absolute; z-index: var(--sc-z-copy);
  inset-inline: var(--sc-gutter);
  max-width: min(46rem, 76vw);
  will-change: opacity, transform;
}
.sc-copy--lead   { left: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); }
/* inset-inline FIRST. It is the shorthand for left+right, so declaring it after
   `left: 50%` resets left to auto and the block drifts off the left edge. */
.sc-copy--center { inset-inline: auto; left: 50%; top: 50%; translate: -50% -50%; text-align: center; }
.sc-copy--trail  { inset-inline: auto; right: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); text-align: right; }

/* cue defaults: the engine writes opacity/transform inline, these are the
   pre-paint state so nothing flashes before the first read() */
[data-sc-cue] { opacity: 0; will-change: opacity, transform; }
.sc-ready [data-sc-cue] { transition: none; }

/* kinetic split */
.sc-split { display: inline-block; overflow: hidden; vertical-align: top; }
/* Descenders live below the baseline; a line mask clipped to the line box eats
   the tails off g, y, p, j. The padding buys them room back. */
.sc-split--line { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.sc-split__i { display: inline-block; will-change: transform, opacity; }
.sc-is-split { opacity: 1 !important; }

/* horizontal rail */
[data-sc-pan] { display: flex; will-change: transform; }

/* reveal + parallax */
[data-sc-reveal] { will-change: clip-path; }
[data-sc-parallax] { will-change: transform; }

/* flow reveal (fires once) */
[data-sc-in], [data-sc-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out);
}
[data-sc-in].sc-in, [data-sc-stagger] > .sc-in { opacity: 1; transform: none; }

/* pointer devices */
[data-sc-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-sc-magnet] { will-change: transform; }
/* isolation always; position only if nothing more specific already set it.
   Written with :where() (zero specificity) on purpose: a plain `position:
   relative` here has the same weight as `.sc-stage` and, being later in the
   file, silently wins. A stage carrying both attributes then stops being
   sticky and the whole act scrolls away instead of pinning. */
[data-sc-spotlight] { isolation: isolate; }
:where([data-sc-spotlight]) { position: relative; }
[data-sc-spotlight]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(
    28rem 28rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%),
    color-mix(in oklab, var(--sc-accent) 16%, transparent), transparent 70%);
  opacity: 0; transition: opacity var(--sc-d-slow) var(--sc-ease-out);
}
[data-sc-spotlight]:hover::after { opacity: 1; }

/* =========================================================== WORLDFLIGHT ==
   One fixed stage for the whole page. The only thing in document flow is the
   spacer, and it is empty. If you find yourself adding a section here, you want
   act mode instead: the moment a real block scrolls past the fixed stage, the
   page has a seam again and the whole point is gone.                        */

[data-sc-mode="worldflight"] { position: relative; }

.sc-world {
  position: fixed; inset: 0;
  overflow: clip;
  z-index: var(--sc-z-stage);
  background: var(--sc-canvas);
}

/* Every leg is mounted for the life of the page and stacked in the same box.
   The engine owns opacity, visibility and z-index here; do not set them. */
.sc-world__seg {
  position: absolute; inset: 0;
  opacity: 0;
  will-change: opacity;
}
.sc-world__seg > :is(video, img, canvas) {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* The poster is the frame-holder AND the first camera move: the engine pushes
   it in slowly until a real decoded frame is available to replace it. */
.sc-world__poster {
  z-index: 0;
  transform-origin: 50% 50%;
  transition: opacity 420ms var(--sc-ease-out);
}
.sc-world__seg > video { z-index: 1; }
.sc-world__seg.sc-has-clip .sc-world__poster { opacity: 0; }
/* The act stylesheet lights a clip through its ancestor act. A worldflight leg
   has no act, so match the class the engine also writes on the clip itself. */
video[data-sc-scrub].sc-has-clip { opacity: 1; }

/* The copy layer is fixed too, and inert by default: the engine hands
   pointer-events back to a block only while it is actually legible. */
.sc-world__copy {
  position: fixed; inset: 0;
  z-index: var(--sc-z-copy);
  pointer-events: none;
}
.sc-world__scrim { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
[data-sc-copy] {
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.sc-ready [data-sc-copy] { transition: none; }

/* The track. Empty on purpose. */
.sc-world__spacer { pointer-events: none; }

/* scroll progress */
[data-sc-progress] {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: var(--sc-z-chrome);
  background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(0);
  will-change: transform;
}

/* ----------------------------------------------------------- atmosphere --
   Depth is not only shadow. Grain keeps a flat dark ground from banding, and
   it is the difference between "a dark page" and "a lit room". */
.sc-grain { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0.045; }
.sc-grain::before {
  content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  /* Fewer and gentler, not zero. Opacity still carries the reveal so the page
     is comprehensible; every position change is dropped. */
  [data-sc-in], [data-sc-stagger] > * { transform: none; transition-duration: 220ms; }
  [data-sc-parallax], [data-sc-pan], .sc-split__i { transform: none !important; }
  /* A wipe is a position change too. Show reveal content settled. */
  [data-sc-reveal] { clip-path: none !important; }
  /* A rail's transform IS its navigation, not decoration. Zeroing it the way
     parallax and kinetic type are zeroed parks the act on its first screenful
     and makes everything past the fold unreachable: a device degrading into
     missing content. Hand the travel back to the reader as an ordinary scroll
     region instead, so the same items are all still gettable without motion.
     A build that would rather re-lay the rail out as a grid can still do that;
     this is the floor, not the ceiling. */
  [data-sc-act="pan"] .sc-stage,
  [data-sc-act="pan"] [data-sc-stage] {
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }
  [data-sc-pan] > * { scroll-snap-align: center; }
  [data-sc-spotlight]::after { display: none; }
  /* A worldflight keeps its whole story here. No clip is ever fetched, so the
     posters are the film, and they cross-dissolve through exactly the same
     seams at exactly the same scroll positions. The push-in and the copy drift
     are the only things that go. */
  .sc-world__poster, [data-sc-copy] { transform: none !important; }
}

/* --------------------------------------------------------------- mobile -- */
@media (max-width: 860px) {
  .sc-copy { inset-inline: var(--sc-gutter); max-width: none; }
  .sc-copy--trail { text-align: left; }
  .sc-stage { height: 100svh; }
  /* .sc-copy--trail re-anchors to the left and spans the full width here, so a
     bottom-RIGHT corner gradient darkens the one corner the copy just left and
     guarantees a contrast failure over any bright clip. Point the density at
     the copy: the same band .sc-scrim--band paints. */
  .sc-scrim--trail {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%,
      color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
      transparent 58%);
  }
}

/* site.css */
/* ImmoGroup · site.css
   Privatbank-Editorial (Headlines: Plus Jakarta Sans, Text: Red Hat Text): Tinte (Navy), Papier (Ivory), Wald (Grün), ein Akzent (Champagner/Bronze).
   Tokens zuerst, dann Grundflächen, dann Kapitel in Seitenreihenfolge. Siehe DESIGN.md. */

@font-face { font-family: "Plus Jakarta Sans"; src: url(https://26761261.fs1.hubspotusercontent-eu1.net/hubfs/26761261/immogroup-lp/fonts/plusjakarta-latin.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; src: url(https://26761261.fs1.hubspotusercontent-eu1.net/hubfs/26761261/immogroup-lp/fonts/plusjakarta-latin-ext.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Red Hat Text"; src: url(https://26761261.fs1.hubspotusercontent-eu1.net/hubfs/26761261/immogroup-lp/fonts/redhattext-latin.woff2) format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Red Hat Text"; src: url(https://26761261.fs1.hubspotusercontent-eu1.net/hubfs/26761261/immogroup-lp/fonts/redhattext-latin-ext.woff2) format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Palette „Midnight, Elfenbein & Champagner“: Tinte, zwei helle Töne mit klarem Abstand, ein Metall. Kein Grün. */
  --navy: #0c1a2c;
  --navy-2: #13243a;
  --navy-deep: #07111d;
  --paper: #f6f2eb;
  --paper-2: #efe8dc;
  --paper-3: #ddd2bf;
  --stone: #e6dccb;
  --card: #fcfaf6;
  --champ: #c9a96e;
  --champ-hi: #e6d2a8;
  --gold-grad: linear-gradient(172deg, #f3e3bd 0%, #d8bb84 38%, #b8935a 72%, #9c7a45 100%);
  --bronze: #7a5c2c;
  --oxblood: #a3473b;
  --rose: #eab3a7;
  --ink-dark: #111e30;
  --ink-dark-soft: #4b5667;
  --ink-light: #f6f2eb;
  --ink-light-soft: #b3bcc9;

  --sc-canvas: var(--navy);
  --sc-surface: var(--navy-2);
  --sc-ink: var(--ink-light);
  --sc-ink-soft: var(--ink-light-soft);
  --sc-accent: var(--champ);
  --sc-accent-ink: var(--navy);
  --sc-font-display: "Plus Jakarta Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --sc-font-text: "Red Hat Text", system-ui, -apple-system, sans-serif;
  --sc-shadow-color: 215 45% 5%;

  --t-hero: clamp(2.3rem, 1.1rem + 3.6vw, 4.6rem);
  --t-lg: clamp(2.05rem, 1.2rem + 2.7vw, 3.9rem);
  --t-md: clamp(1.75rem, 1.25rem + 1.6vw, 2.8rem);
  --t-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-small: 0.9375rem;
  --t-micro: 0.8125rem;

  --radius: 3px;
  --bar-h: 76px;
  --gable: clamp(28px, 4vw, 64px);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ------------------------------------------------------------- basics -- */
/* Körnung und Papierstruktur als fertige Kacheln statt SVG-Rauschfilter: der Filter musste beim Scrollen
   ständig neu gerastert werden, Chrome zeigte dann kurz leere (dunkelblaue) Kacheln. */
.sc-grain::before { background-image: url(https://26761261.fs1.hubspotusercontent-eu1.net/hubfs/26761261/immogroup-lp/img/grain.jpg); background-size: 180px; }
html { scroll-padding-top: calc(var(--bar-h) + 1rem); }
body { font-size: var(--t-body); line-height: 1.62; background: var(--navy); color: var(--ink-light); }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
img { height: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: 84rem; margin-inline: auto; padding-inline: var(--sc-gutter); }
.skip { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 100; padding: 0.7rem 1rem; background: var(--champ); color: var(--navy); border-radius: var(--radius); transform: translateY(-160%); transition: transform 160ms var(--ease); text-decoration: none; font-weight: 600; }
.skip:focus-visible { transform: none; }

.display {
  font-family: var(--sc-font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  hyphens: manual;
  min-width: 0;
}
.display--hero { font-size: min(4rem, calc((100vw - 2 * var(--sc-gutter) - 19rem) / 12.9)); font-weight: 650; letter-spacing: -0.018em; }
/* Hero-Headline immer in drei festen Zeilen (auch am Desktop): max. 4rem, damit die längste Zeile in 50rem passt */
.display--hero .m-br { display: inline; }
.display--lg { font-size: var(--t-lg); }
.display--md { font-size: var(--t-md); }
.lede { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); line-height: 1.55; }
p { text-wrap: pretty; }
h3, summary, blockquote p, figcaption, .kicker, .case__no, .lane__stat { text-wrap: balance; }
.m-only, .m-br { display: none; }
@media (max-width: 860px) {
  .d-only { display: none; }
  .m-only { display: inline; }
  .m-br { display: inline; }
  .kicker { letter-spacing: 0.14em; }
}

/* Kicker: kleine Zeile über Überschriften, mit Linie (Exposé-Anmutung) */
.kicker { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.2rem; font: 600 0.78rem/1.2 var(--sc-font-text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-accent); }
.kicker::before { content: ""; width: 2rem; height: 1px; background: currentColor; opacity: 0.7; }

/* Grundflächen: jedes Kapitel setzt Ton und Tinte gemeinsam (color neu setzen, sonst erbt Text die alte Tinte). */
.g-paper, .g-paper2, .g-stone {
  --sc-ink: var(--ink-dark); --sc-ink-soft: var(--ink-dark-soft); --sc-accent: var(--bronze); --sc-accent-ink: var(--paper);
  --sc-hairline: rgba(19, 32, 51, 0.14);
  color: var(--ink-dark);
  background-color: var(--paper);
  background-image:
    radial-gradient(120% 80% at 85% 0%, rgba(205, 176, 122, 0.10), transparent 60%),
    url(https://26761261.fs1.hubspotusercontent-eu1.net/hubfs/26761261/immogroup-lp/img/noise-paper.png);
}
.g-paper2 { background-color: var(--paper-2); }
.g-stone { background-color: var(--stone); background-image: radial-gradient(90% 70% at 10% 0%, rgba(255, 255, 255, 0.45), transparent 60%), url(https://26761261.fs1.hubspotusercontent-eu1.net/hubfs/26761261/immogroup-lp/img/noise-stone.png); }
.g-navy, .g-deep { color: var(--ink-light); --sc-hairline: rgba(244, 239, 230, 0.14); }
.g-navy {
  background-color: var(--navy);
  background-image:
    radial-gradient(70% 60% at 12% 0%, rgba(201, 169, 110, 0.11), transparent 70%),
    radial-gradient(60% 50% at 100% 100%, rgba(46, 78, 122, 0.30), transparent 70%),
    linear-gradient(rgba(244, 239, 230, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 239, 230, 0.028) 1px, transparent 1px);
  background-size: auto, auto, 96px 96px, 96px 96px;
}
.g-deep {
  background-color: var(--navy-deep);
  background-image: radial-gradient(80% 50% at 50% 0%, rgba(205, 176, 122, 0.07), transparent 70%), radial-gradient(50% 40% at 0% 60%, rgba(40, 70, 110, 0.25), transparent 70%);
}

/* Giebelkante: dunkle Kapitel schieben sich mit einem flachen Dach über das vorige (Logo-Dach).
   Beim Hereinscrollen flacht das Dach ab (flow: --sc-p, gepinnt bleibt es bis zum Pin). */
.gable { position: relative; z-index: 2; }
.gable::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px);
  height: calc(var(--gable) * (1 - min(1, var(--sc-p, 0) * 5)));
  background: inherit; background-attachment: scroll;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  pointer-events: none;
}
.g-navy.gable::before { background: var(--navy); }
.g-deep.gable::before { background: var(--navy-deep); }
.g-paper.gable::before { background-color: var(--paper); background-image: url(https://26761261.fs1.hubspotusercontent-eu1.net/hubfs/26761261/immogroup-lp/img/noise-paper.png); }

/* ------------------------------------------------------------ buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 52px; padding: 0.85rem 1.5rem;
  border: 1px solid transparent; border-radius: var(--radius);
  background: var(--champ); color: var(--navy);
  font: 600 1rem/1.2 var(--sc-font-text); letter-spacing: 0.005em; text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 10px 24px -12px rgba(0, 0, 0, 0.45);
  transition: background-color 160ms var(--ease), transform 120ms var(--ease), box-shadow 160ms var(--ease);
  cursor: pointer;
}
.btn::after { content: ""; width: 0.9em; height: 0.9em; background: currentColor; clip-path: polygon(0 45%, 70% 45%, 45% 18%, 55% 8%, 100% 50%, 55% 92%, 45% 82%, 70% 55%, 0 55%); transition: transform 160ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--champ-hi); }
  .btn:hover::after { transform: translateX(3px); }
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--champ-hi); outline-offset: 3px; }
.g-paper .btn, .g-paper2 .btn, .g-stone .btn { background: var(--navy); color: var(--paper); box-shadow: 0 10px 24px -14px rgba(13, 27, 46, 0.6); }
@media (hover: hover) and (pointer: fine) { .g-paper .btn:hover, .g-paper2 .btn:hover { background: var(--navy-2); } }
.g-paper .btn:focus-visible, .g-paper2 .btn:focus-visible { outline-color: var(--bronze); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn--full { width: 100%; }
.btn--bar { min-height: 44px; padding: 0.6rem 1.1rem; font-size: 0.9375rem; }

.link { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); transition: text-decoration-color 160ms var(--ease); }
.link:hover { text-decoration-color: currentColor; }

.play { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 52px; padding: 0.4rem 0.2rem; background: none; border: 0; color: var(--ink-light); font: 500 1rem/1.2 var(--sc-font-text); cursor: pointer; }
.play__icon { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(244, 239, 230, 0.55); display: grid; place-items: center; transition: background-color 160ms var(--ease), border-color 160ms var(--ease); }
.play__icon::before { content: ""; width: 11px; height: 13px; margin-left: 3px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.play__len { color: var(--ink-light-soft); font-size: 0.875rem; }
@media (hover: hover) and (pointer: fine) { .play:hover .play__icon { background: rgba(244, 239, 230, 0.12); border-color: var(--champ); } }
.play:focus-visible { outline: 2px solid var(--champ); outline-offset: 4px; border-radius: var(--radius); }
.play--dark { color: var(--ink-dark); }
.play--dark .play__icon { border-color: rgba(19, 32, 51, 0.4); }
.play--dark .play__len { color: var(--ink-dark-soft); }
@media (hover: hover) and (pointer: fine) { .play--dark:hover .play__icon { background: rgba(19, 32, 51, 0.06); border-color: var(--bronze); } }

/* ---------------------------------------------------------------- bar -- */
.bar { position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome); height: var(--bar-h); color: var(--ink-light); transition: background-color 240ms var(--ease), box-shadow 240ms var(--ease), transform 320ms var(--ease); }
.bar::before { content: ""; position: absolute; inset: 0 0 -40px 0; background: linear-gradient(rgba(8, 18, 31, 0.55), transparent); pointer-events: none; transition: opacity 240ms var(--ease); }
.bar.is-solid { background: rgba(13, 27, 46, 0.97); box-shadow: 0 1px 0 rgba(244, 239, 230, 0.08), 0 12px 30px -18px rgba(0, 0, 0, 0.6); }
.bar.is-solid::before { opacity: 0; }
.bar.is-hidden { transform: translateY(-100%); }
.bar__in { position: relative; height: 100%; max-width: 92rem; margin-inline: auto; padding-inline: var(--sc-gutter); display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.bar__logo { display: block; flex: none; padding: 6px 0; border-radius: var(--radius); }
.logo { display: block; width: 172px; height: auto; }
.bar__nav { display: flex; gap: clamp(1rem, 1.8vw, 1.9rem); margin-left: auto; }
.bar__nav a { position: relative; padding: 0.5rem 0; font-size: 0.9375rem; font-weight: 500; text-decoration: none; white-space: nowrap; color: rgba(244, 239, 230, 0.86); transition: color 160ms var(--ease); }
.bar__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.2rem; height: 1px; background: var(--champ); transform: scaleX(0); transform-origin: left; transition: transform 200ms var(--ease); }
.bar__nav a:hover, .bar__nav a[aria-current] { color: var(--ink-light); }
.bar__nav a:hover::after, .bar__nav a[aria-current]::after { transform: scaleX(1); }
.bar__tel { font-size: 0.9375rem; font-weight: 600; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar__menu { display: none; width: 48px; height: 48px; margin-left: auto; background: none; border: 1px solid rgba(244, 239, 230, 0.3); border-radius: var(--radius); color: inherit; cursor: pointer; }
.bar__menu-lines, .bar__menu-lines::before, .bar__menu-lines::after { display: block; width: 18px; height: 1.5px; margin: auto; background: currentColor; transition: transform 200ms var(--ease), opacity 160ms; }
.bar__menu-lines { position: relative; }
.bar__menu-lines::before, .bar__menu-lines::after { content: ""; position: absolute; left: 0; }
.bar__menu-lines::before { top: -6px; } .bar__menu-lines::after { top: 6px; }
.bar__menu[aria-expanded="true"] .bar__menu-lines { background: transparent; }
.bar__menu[aria-expanded="true"] .bar__menu-lines::before { transform: translateY(6px) rotate(45deg); }
.bar__menu[aria-expanded="true"] .bar__menu-lines::after { transform: translateY(-6px) rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: calc(var(--sc-z-chrome) - 1); padding: calc(var(--bar-h) + 1.5rem) var(--sc-gutter) 2rem; background: var(--navy); display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; }
.menu[hidden] { display: none; }
.menu__nav { display: flex; flex-direction: column; }
.menu__nav a { padding: 0.9rem 0; border-bottom: 1px solid rgba(244, 239, 230, 0.12); font-family: var(--sc-font-display); font-size: 1.85rem; font-weight: 600; text-decoration: none; }
.menu__nav a[aria-current] { color: var(--champ); }
.menu__foot { display: grid; gap: 1rem; padding-top: 2rem; }
.menu__tel { font-weight: 600; text-decoration: none; }

@media (max-width: 1180px) { .bar__tel { display: none; } }
@media (max-width: 1040px) {
  .bar__nav, .bar .btn--bar { display: none; }
  .bar__menu { display: grid; place-items: center; }
  :root { --bar-h: 68px; }
}

/* --------------------------------------------------------------- hero -- */
/* Echtes Foto der fertigen Seniorenresidenz Verl (Gartenweg zum Haus). */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: clip; background: var(--navy-deep); color: var(--ink-light); }
.hero__media { position: absolute; inset: 0; }
.hero__media picture, .hero__media img { display: block; width: 100%; height: 100%; }
.hero__media img { object-fit: cover; object-position: 60% 46%; transform: translateY(calc((var(--sc-p, 0.5) - 0.5) * 22vh)) scale(1.06); transform-origin: 60% 60%; will-change: transform; }
.hero__shade { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 17, 29, 0.9) 0%, rgba(7, 17, 29, 0.72) 30%, rgba(7, 17, 29, 0.18) 58%, transparent 72%),
    linear-gradient(0deg, var(--navy) 0%, rgba(12, 26, 44, 0.55) 18%, transparent 40%),
    linear-gradient(180deg, rgba(7, 17, 29, 0.55) 0%, transparent 20%);
}
.hero__in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem; padding-top: calc(var(--bar-h) + 3rem); padding-bottom: clamp(4.5rem, 13vh, 8.5rem); }
.hero__copy { max-width: 50rem; }
.hero__kicker { color: var(--champ-hi); }
.hero__copy .display { color: var(--ink-light); text-shadow: 0 2px 30px rgba(7, 17, 29, 0.35); }
.hero__sub { margin-top: 1.5rem; max-width: 34rem; font-size: clamp(1.08rem, 1rem + 0.35vw, 1.28rem); color: rgba(246, 242, 235, 0.88); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2.3rem; }
.hero__caption { justify-self: end; max-width: 17rem; padding-left: 1rem; border-left: 1px solid rgba(201, 169, 110, 0.6); font-size: var(--t-micro); line-height: 1.5; color: rgba(246, 242, 235, 0.72); }
.hero__caption span { display: block; color: var(--ink-light); font-weight: 600; }
.hero__scroll { position: absolute; z-index: 3; left: 50%; bottom: 1.4rem; width: 26px; height: 42px; margin-left: -13px; border: 1px solid rgba(246, 242, 235, 0.45); border-radius: 14px; }
.hero__scroll span { position: absolute; left: 50%; top: 8px; width: 2px; height: 8px; margin-left: -1px; border-radius: 2px; background: var(--champ-hi); animation: wheel 1.8s var(--ease-io) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
/* Handy: Das Bild bekommt die obere Hälfte ganz für sich (Turm des Salzmann Quartiers),
   der Text sitzt kompakt unten. Die Headline läuft in drei festen Zeilen, Größe folgt der Bildschirmbreite. */
@media (max-width: 860px) {
  .hero { align-items: flex-end; }
  .hero__media img { object-position: 50% 0%; }
  .hero__shade { background:
    linear-gradient(0deg, var(--navy-deep) 0%, rgba(7, 17, 29, 0.94) 30%, rgba(7, 17, 29, 0.62) 50%, rgba(7, 17, 29, 0.12) 68%, transparent 78%),
    linear-gradient(180deg, rgba(7, 17, 29, 0.6) 0%, transparent 16%); }
  .hero__scroll, .hero__caption, .hero__kicker { display: none; }
  .hero__in { grid-template-columns: 1fr; padding-bottom: calc(2.4rem + env(safe-area-inset-bottom)); }
  .display--hero { font-size: min(2.3rem, calc((100vw - 2 * var(--sc-gutter)) / 12.9)); line-height: 1.12; letter-spacing: -0.018em; }
  .hero__sub { margin-top: 1rem; font-size: 1rem; line-height: 1.55; max-width: 30rem; }
  .hero__actions { margin-top: 1.6rem; gap: 0.9rem 1.5rem; }
}

/* Play-Knopf: Kreis mit leisem Puls, zweizeilige Beschriftung */
.play__txt { display: grid; text-align: left; line-height: 1.25; }
.play__txt .play__len { font-size: 0.8125rem; }
.play--hero .play__icon { position: relative; width: 58px; height: 58px; border-color: var(--champ); background: rgba(201, 169, 110, 0.14); }
.play--hero .play__icon::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--champ); animation: ring 2.6s var(--ease) infinite; }
@keyframes ring { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.7); opacity: 0; } }

/* -------------------------------------------------------------- proof -- */
/* Kennzahlen + Imagefilm: dunkles Kapitel, vergoldete Ziffern, Fassaden-Zeichnung im Hintergrund */
.proof { position: relative; padding-block: clamp(4.5rem, 8vw, 7.5rem) clamp(4.5rem, 8vw, 7rem); overflow: clip; }
.proof::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.35), transparent); }
.proof__drawing { position: absolute; right: -4vw; top: 2rem; width: min(70vw, 1100px); aspect-ratio: 1400 / 620; background: url(https://26761261.fs1.hubspotusercontent-eu1.net/hubfs/26761261/immogroup-lp/img/facade-line.svg) no-repeat center / contain; opacity: 0.12; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
.proof .wrap { position: relative; }
.proof__head { max-width: 46rem; }
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(3rem, 6vw, 4.5rem); border-block: 1px solid rgba(201, 169, 110, 0.28); }
.figure { position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.9rem; padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1rem, 2vw, 2rem); }
.figure + .figure::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: linear-gradient(transparent, rgba(201, 169, 110, 0.45), transparent); }
.figure::after { content: ""; position: absolute; left: clamp(1rem, 2vw, 2rem); top: -4px; width: 7px; height: 7px; background: var(--champ); transform: rotate(45deg); }
.figure dd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.4rem; }
.figure__num { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(3rem, 1.6rem + 3.8vw, 5.6rem); line-height: 0.95; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.figure__plus { margin-left: 0.06em; font: 300 0.5em/1 var(--sc-font-text); vertical-align: 0.75em; }
.figure__unit { font: 600 0.82rem/1 var(--sc-font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--champ-hi); }
.figure dt { font-size: var(--t-small); color: var(--ink-light-soft); max-width: 14rem; }
.figure__stars { position: absolute; right: clamp(1rem, 2vw, 2rem); top: clamp(1.8rem, 3vw, 2.6rem); display: flex; gap: 3px; }
.figure__stars i { width: 12px; height: 12px; background: var(--champ); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.figure__stars .is-part { background: linear-gradient(90deg, var(--champ) 75%, rgba(201, 169, 110, 0.3) 75%); }
.proof__src { margin-top: 1rem; font-size: var(--t-micro); color: var(--ink-light-soft); }

/* Imagefilm: Titel und Beschreibung stehen über dem Video, das Video selbst bleibt frei
   (die Vorschau ist ein stummer Zusammenschnitt ohne eingebrannte Texte). Im Bild nur Play-Knopf und Etikett. */
.film { margin-top: clamp(3.5rem, 7vw, 6rem); }
.film__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 1rem clamp(2rem, 5vw, 5rem); margin-bottom: clamp(1.4rem, 2.6vw, 2.2rem); }
.film__headline { display: grid; gap: 0.9rem; }
.film__kicker { display: flex; align-items: center; gap: 0.8rem; font: 600 0.78rem/1 var(--sc-font-text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--champ); }
.film__kicker::before { content: ""; width: 2rem; height: 1px; background: currentColor; opacity: 0.7; }
.film__title { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--t-md); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.film__cap { justify-self: end; max-width: 26rem; font-size: var(--t-small); color: var(--ink-light-soft); text-wrap: pretty; }
.film__frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 1px solid rgba(201, 169, 110, 0.35); border-radius: 4px; overflow: hidden; background: #000; color: var(--ink-light); cursor: pointer; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.8); }
.film__poster, .film__loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease), opacity 600ms var(--ease); }
.film__loop { opacity: 0; }
.film.is-playing .film__loop { opacity: 1; }
.film__shade { position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 50%, rgba(7, 17, 29, 0.28), transparent 70%), linear-gradient(0deg, rgba(7, 17, 29, 0.55), transparent 32%); pointer-events: none; }
.film__play { position: absolute; left: 50%; top: 50%; width: clamp(64px, 6.5vw, 92px); aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center; border-radius: 50%; background: var(--champ); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.6); transition: transform 300ms var(--ease), background-color 200ms var(--ease); }
.film__play::before, .film__play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--champ-hi); animation: ring 2.8s var(--ease) infinite; }
.film__play::after { animation-delay: 1.4s; }
.film__play span { width: 24%; height: 28%; margin-left: 8%; background: var(--navy); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.film__badge { position: absolute; left: clamp(0.8rem, 2vw, 1.5rem); bottom: clamp(0.8rem, 2vw, 1.5rem); display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.8rem 0.55rem 0.7rem; border: 1px solid rgba(246, 242, 235, 0.22); border-radius: 999px; background: rgba(7, 17, 29, 0.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 600 0.82rem/1 var(--sc-font-text); }
.film__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--champ); box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.25); }
.film__len { padding-left: 0.6rem; border-left: 1px solid rgba(246, 242, 235, 0.25); color: var(--ink-light-soft); font-weight: 500; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .film__frame:hover .film__play { transform: scale(1.07); background: var(--champ-hi); }
  .film__frame:hover .film__poster, .film__frame:hover .film__loop { transform: scale(1.025); }
}
.film__frame:focus-visible { outline: 2px solid var(--champ); outline-offset: 4px; }
.press { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem clamp(1.5rem, 3.5vw, 3rem); margin-top: clamp(3rem, 6vw, 4.5rem); color: rgba(246, 242, 235, 0.78); }
.press__label { font: 600 0.75rem/1 var(--sc-font-text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-light-soft); }
.press__logo { display: block; height: 22px; width: auto; }
.press__logo--wm { height: 30px; }
.press__tp { display: flex; align-items: center; gap: 0.7rem; margin-left: auto; font-size: var(--t-small); color: var(--ink-light-soft); }
/* Handy: Kennzahlen auf hellem Stein (klarer Wechsel nach dem dunklen Hero), kleinere Ziffern in Tinte,
   zentriert in einem feinen Kreuzraster. Film und Presse bleiben darunter dunkel. */
@media (max-width: 860px) {
  .proof { position: relative; z-index: 3; overflow: visible; padding-top: 0; }
  .proof::before, .proof__drawing { display: none; }
  .proof__top {
    --sc-accent: var(--bronze);
    position: relative; margin-inline: calc(-1 * var(--sc-gutter)); padding: 3.4rem var(--sc-gutter) 2.8rem;
    color: var(--ink-dark); text-align: center;
    background-color: var(--stone);
    background-image: radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, 0.5), transparent 70%), url(https://26761261.fs1.hubspotusercontent-eu1.net/hubfs/26761261/immogroup-lp/img/noise-stone.png);
  }
  /* Giebel: der helle Block schiebt sich mit einem flachen Dach in den Hero */
  .proof__top::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: var(--gable); background: var(--stone); clip-path: polygon(0 100%, 50% 0, 100% 100%); pointer-events: none; }
  .proof__head { margin-inline: auto; }
  .proof__head .kicker { justify-content: center; }
  .proof__head .kicker::after { content: ""; width: 2rem; height: 1px; background: currentColor; opacity: 0.7; }
  .proof__head .display { font-size: clamp(1.5rem, 1.05rem + 2.3vw, 1.9rem); line-height: 1.16; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2rem; border: 0; }
  .figure { align-items: center; gap: 0.45rem; padding: 1.35rem 0.4rem 1.3rem; }
  .figure::after, .figure + .figure::before, .figure__stars { display: none; }
  .figure:nth-child(odd) { border-right: 1px solid rgba(19, 32, 51, 0.13); }
  .figure:nth-child(n+3) { border-top: 1px solid rgba(19, 32, 51, 0.13); }
  .figure dd { justify-content: center; align-items: baseline; gap: 0 0.3rem; }
  .figure__num { font-size: clamp(1.95rem, 1.3rem + 3vw, 2.4rem); font-weight: 650; background: none; color: var(--navy); }
  .figure__plus { color: var(--bronze); font-weight: 500; }
  .figure__unit { font-size: 0.66rem; letter-spacing: 0.1em; color: var(--bronze); }
  .figure dt { max-width: 11rem; font: 600 0.68rem/1.35 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dark-soft); }
  .proof__src { margin-top: 1.2rem; color: var(--ink-dark-soft); }
  .film { margin-top: 3.2rem; }
  .film__head { text-align: center; justify-items: center; }
  .film__headline { justify-items: center; }
  .film__kicker::after { content: ""; width: 2rem; height: 1px; background: currentColor; opacity: 0.7; }
  .film__title { font-size: clamp(1.5rem, 1.05rem + 2.3vw, 1.9rem); }
  .film__cap { justify-self: center !important; max-width: 22rem; }
  .film__badge { left: 50%; translate: -50% 0; white-space: nowrap; }
  .press { justify-content: center; margin-top: 2.6rem; }
  .press__label { width: 100%; text-align: center; }
}
@media (max-width: 900px) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figure:nth-child(3)::before { display: none; }
  .figure:nth-child(n+3) { border-top: 1px solid rgba(201, 169, 110, 0.2); }
  .figure__stars { position: static; order: -1; }
  .film__head { grid-template-columns: 1fr; }
  .film__cap { justify-self: start; }
  .film__frame { aspect-ratio: 4 / 3; }
  .press__tp { margin-left: 0; }
}

/* ----------------------------------------------------------- landlord -- */
/* Vier klare Schritte statt Überblendung: Das Haus zeichnet sich, Probleme tauchen auf,
   Sie werden Makler, Verwalter und Hausmeister, dann wird es Nacht und das Licht geht an. */
.landlord__stage { isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 6rem); padding: calc(var(--bar-h) + 2rem) max(var(--sc-gutter), calc((100vw - 92rem) / 2)) 3rem; color: var(--ink-dark); background: var(--paper) url(https://26761261.fs1.hubspotusercontent-eu1.net/hubfs/26761261/immogroup-lp/img/noise-paper.png); transition: color 300ms var(--ease-io) 250ms; }
/* Nacht: dunkler Grund wächst als Kreis vom Mond aus über die Bühne. Keine Mischfarben, gleicher Ton wie das folgende Kapitel. */
.landlord__stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy-deep); background-image: radial-gradient(80% 50% at 50% 100%, rgba(40, 70, 110, 0.25), transparent 70%); clip-path: circle(0% at var(--moon-x, 34%) var(--moon-y, 24%)); transition: clip-path 450ms var(--ease-io); pointer-events: none; }
.landlord__stage[data-step="3"]::before { clip-path: circle(150% at var(--moon-x, 34%) var(--moon-y, 24%)); transition-duration: 750ms; }
.landlord__stage[data-step="3"] { color: var(--ink-light); }

.house { position: relative; width: min(100%, calc(70vh * 560 / 520)); aspect-ratio: 560 / 520; margin-inline: auto; }
.house__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Nachts ein weicher Lichtschein hinter dem Haus (ein Verlauf statt Filter auf jedem Fenster) */
.house::before { content: ""; position: absolute; inset: 12% 8% 4%; background: radial-gradient(closest-side, rgba(255, 214, 140, 0.2), transparent); opacity: 0; transition: opacity 500ms var(--ease); pointer-events: none; }
[data-step="3"] .house::before { opacity: 1; transition: opacity 1200ms var(--ease) 700ms; }
.house__sky { fill: none; }
.house__moon circle { fill: var(--champ-hi); opacity: 0; transform: translateY(20px); transition: opacity 900ms var(--ease) 300ms, transform 1200ms var(--ease) 300ms; }
.house__draw path { fill: none; stroke: var(--ink-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--draw, 0)); transition: stroke 800ms var(--ease-io); }
.house__draw .house__wall, .house__draw .house__roof { stroke-width: 3.2; }
.house__draw .house__ground { stroke-width: 1.4; opacity: 0.6; }
.house__roof-fill { fill: url(#hatch); opacity: 0; transition: opacity 500ms var(--ease); }
.house__windows > * { fill: rgba(17, 30, 48, 0); stroke: var(--ink-dark); stroke-width: 1.6; opacity: clamp(0, calc((var(--draw, 0) - 0.55) * 3), 1); transition: fill 600ms var(--ease-io), stroke 800ms var(--ease-io); }
.house__mullions path { fill: none; stroke: var(--ink-dark); stroke-width: 1; opacity: clamp(0, calc((var(--draw, 0) - 0.7) * 2), 0.5); transition: stroke 800ms var(--ease-io); }
[data-step="1"] .house__roof-fill { opacity: 0.5; }
[data-step="2"] .house__roof-fill { opacity: 0.18; }
[data-step="1"] [data-w="b"], [data-step="2"] [data-w="b"] { fill: rgba(17, 30, 48, 0.82); }
[data-step="1"] [data-w="c"] { fill: url(#hatch); }
[data-step="1"] [data-w="d"] { fill: rgba(163, 71, 59, 0.18); }
[data-step="3"] .house__draw path { stroke: var(--champ); }
[data-step="3"] .house__windows > * { fill: #f4d99c; stroke: var(--champ-hi); transition-delay: 450ms; }
[data-step="3"] .house__windows > :nth-child(2) { transition-delay: 570ms; } [data-step="3"] .house__windows > :nth-child(3) { transition-delay: 690ms; }
[data-step="3"] .house__windows > :nth-child(4) { transition-delay: 810ms; } [data-step="3"] .house__windows > :nth-child(5) { transition-delay: 930ms; }
[data-step="3"] .house__windows > :nth-child(6) { transition-delay: 1050ms; } [data-step="3"] .house__windows > :nth-child(7) { transition-delay: 1170ms; }
[data-step="3"] .house__windows > :nth-child(8) { transition-delay: 1290ms; } [data-step="3"] .house__windows > :nth-child(9) { transition-delay: 1410ms; }
[data-step="3"] .house__mullions path { stroke: var(--navy); opacity: 0.55; }
[data-step="3"] .house__moon circle { opacity: 0.9; transform: none; }

.tag, .role, .seal { position: absolute; left: var(--x, 50%); top: var(--y, 50%); z-index: 2; opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 220ms var(--ease), transform 300ms var(--ease); pointer-events: none; white-space: nowrap; }
.tag { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.8rem 0.45rem 0.6rem; border: 1px solid rgba(163, 71, 59, 0.35); border-radius: 999px; background: var(--card); color: #8a3328; font: 600 0.82rem/1 var(--sc-font-text); box-shadow: 0 10px 24px -12px rgba(17, 30, 48, 0.45); }
.tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--oxblood); box-shadow: 0 0 0 0 rgba(163, 71, 59, 0.5); animation: blip 1.8s var(--ease) infinite; }
@keyframes blip { 0% { box-shadow: 0 0 0 0 rgba(163, 71, 59, 0.55); } 100% { box-shadow: 0 0 0 9px rgba(163, 71, 59, 0); } }
.role { padding: 0.5rem 0.85rem; border-radius: 2px; background: var(--navy); color: var(--paper); font: 600 0.82rem/1 var(--sc-font-text); letter-spacing: 0.02em; box-shadow: 0 12px 26px -12px rgba(17, 30, 48, 0.6); }
.role::before { content: "Du als "; font-weight: 400; color: var(--champ-hi); }
.seal { left: 50%; top: -2%; transform: translate(-50%, 10px); display: grid; justify-items: center; gap: 0.2rem; padding: 0.8rem 1.3rem 0.85rem; border: 1px solid var(--champ); background: rgba(7, 17, 29, 0.7); color: var(--ink-light-soft); font: 500 0.78rem/1.2 var(--sc-font-text); letter-spacing: 0.04em; }
.seal b { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: 0; color: var(--champ-hi); }
[data-step="1"] .tag { opacity: 1; transform: none; transition-duration: 420ms, 520ms; transition-delay: calc(var(--d, 0) * 150ms); }
[data-step="2"] .role { opacity: 1; transform: none; transition-duration: 420ms, 520ms; transition-delay: calc(200ms + var(--d, 0) * 180ms); }
[data-step="3"] .seal { opacity: 1; transform: translate(-50%, 0); transition-duration: 420ms, 520ms; transition-delay: 900ms; }

.lsteps { position: relative; max-width: 36rem; }
.lsteps__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: clamp(2rem, 5vh, 3.5rem); counter-reset: s; }
.lsteps__nav li { font: 600 0.7rem/1.3 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(17, 30, 48, 0.4); transition: color 400ms var(--ease); }
.lsteps__bar { display: block; height: 2px; margin-bottom: 0.7rem; background: rgba(17, 30, 48, 0.12); overflow: hidden; }
.lsteps__bar i { display: block; height: 100%; background: var(--bronze); transform-origin: left; transform: scaleX(var(--f, 0)); }
.lsteps__nav li.is-on { color: var(--ink-dark); }
[data-step="3"] .lsteps__nav li { color: rgba(246, 242, 235, 0.45); }
[data-step="3"] .lsteps__nav li.is-on { color: var(--champ-hi); }
[data-step="3"] .lsteps__bar { background: rgba(246, 242, 235, 0.14); }
[data-step="3"] .lsteps__bar i { background: var(--champ); }
.lsteps__body { position: relative; min-height: 22rem; }
.lstep { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(32px); transition: opacity 320ms var(--ease), transform 520ms var(--ease); pointer-events: none; }
.lstep.is-past { transform: translateY(-40px); }
.lstep.is-on { opacity: 1; transform: none; pointer-events: auto; transition-delay: 300ms; }
.landlord__stage[data-step="3"] .lstep.is-on { transition-delay: 520ms; }
.lstep__k { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 1.4rem; font: 600 0.78rem/1 var(--sc-font-text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze); }
.lstep__k b { font-family: var(--sc-font-display); font-weight: 700; font-size: 2.4rem; letter-spacing: 0; line-height: 0.8; }
.lstep__k--bad { color: var(--oxblood); }
.lstep__k--good { color: var(--champ); }
.lstep__t { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.75rem, 1.15rem + 2vw, 3rem); line-height: 1.13; letter-spacing: -0.012em; text-wrap: balance; }
.lstep--quote blockquote p { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.6rem); line-height: 1.16; text-wrap: balance; }
.lstep--quote figcaption { display: flex; align-items: center; gap: 1rem; margin-top: 1.6rem; font-size: var(--t-small); color: var(--ink-dark-soft); }
.lstep--quote figcaption img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; object-position: 38% 30%; border: 2px solid var(--card); box-shadow: 0 0 0 1px rgba(122, 92, 44, 0.5); }
.lstep--quote figcaption b { display: block; color: var(--ink-dark); }
.lstep--turn .link { margin-top: 1.8rem; color: var(--champ-hi); }
.lsteps__hint { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.5rem; font: 600 0.72rem/1 var(--sc-font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dark-soft); transition: opacity 300ms var(--ease); }
.lsteps__hint span { position: relative; width: 1px; height: 34px; background: rgba(17, 30, 48, 0.2); overflow: hidden; }
.lsteps__hint span::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--bronze); animation: drip 1.6s var(--ease-io) infinite; }
@keyframes drip { to { top: 100%; } }
[data-step="3"] .lsteps__hint { opacity: 0; }
@media (max-width: 860px) {
  .landlord__stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: center; justify-items: center; gap: 1.1rem; padding-top: calc(var(--bar-h) + 0.6rem); padding-bottom: 1rem; }
  .house { width: min(100%, calc(33svh * 560 / 520)); }
  .lsteps { width: 100%; text-align: center; }
  .lsteps__nav li { font-size: 0; }
  .lsteps__bar { margin-bottom: 0; }
  .lstep__k { justify-content: center; }
  .lstep--quote figcaption { justify-content: center; text-align: left; }
  .lstep { transform: translateY(24px); }
  .lstep.is-past { transform: translateY(-24px); }
  .lstep.is-on { transform: none; }
  .tag, .role { font-size: 0.68rem; padding: 0.35rem 0.55rem; }
  .role { left: min(var(--x), calc(100% - 8.5rem)); }
  .tag { left: min(var(--x), calc(100% - 9.5rem)); }
  .seal b { font-size: 1.05rem; } .seal { font-size: 0.66rem; padding: 0.5rem 0.8rem; }
  .lsteps__nav { margin-bottom: 1.2rem; gap: 0.4rem; }
  .lsteps__body { min-height: 15rem; }
  .lstep__k { margin-bottom: 0.8rem; } .lstep__k b { font-size: 1.6rem; }
  .lstep__t { font-size: clamp(1.3rem, 0.95rem + 2.1vw, 1.65rem); line-height: 1.18; }
  .lstep--quote blockquote p { font-size: clamp(1.25rem, 0.95rem + 1.9vw, 1.55rem); }
  .lstep--quote figcaption { margin-top: 1.1rem; }
  .lstep--turn .link { margin-top: 1.1rem; }
  .lsteps__hint { display: none; }
}

/* ------------------------------------------------------------ 25 Jahre -- */
/* Kein Pin mehr (Kunde: zu langes Scrollen). Zwei Karten im direkten Vergleich, je 25 Felder und die Ereignisse als Liste.
   Beim Hereinscrollen laufen die Jahre einmal in gut drei Sekunden durch, die Uhr zählt mit (site.js). */
.years { padding-top: clamp(5rem, 9vw, 7.5rem); }
.years__stage { --t: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(1rem, 2vw, 1.75rem); max-width: 84rem; margin-inline: auto; padding: 0 var(--sc-gutter); color: var(--ink-light); background: transparent; }
.years__head { grid-column: 1 / -1; max-width: 46rem; margin-inline: auto; text-align: center; }
.years__head .kicker { justify-content: center; }
.years__head .kicker::after { content: ""; width: 2rem; height: 1px; background: currentColor; opacity: 0.7; }
.years__head .display { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.4rem); }
.years__sub { margin: 1rem auto 0; max-width: 34rem; color: var(--ink-light-soft); }
.years__clock { grid-column: 1 / -1; justify-self: center; position: relative; width: 112px; aspect-ratio: 1; margin: 0.6rem 0 0.4rem; display: grid; place-content: center; justify-items: center; line-height: 1; }
.years__clock svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.years__ring-bg { fill: none; stroke: rgba(246, 242, 235, 0.1); stroke-width: 1.5; }
.years__ring { fill: none; stroke: var(--champ); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--t)); }
.years__word, .years__of { font: 600 0.6rem/1 var(--sc-font-text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-light-soft); }
.years__num { margin: 0.2rem 0 0.3rem; font-family: var(--sc-font-display); font-weight: 700; font-size: 2.5rem; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.lane { padding: clamp(1.2rem, 2vw, 1.8rem); border: 1px solid rgba(246, 242, 235, 0.1); border-radius: 4px; background: linear-gradient(180deg, rgba(246, 242, 235, 0.035), rgba(246, 242, 235, 0.01)); }
.lane--si { border-color: rgba(201, 169, 110, 0.3); box-shadow: 0 30px 60px -40px rgba(201, 169, 110, 0.35); }
.lane__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.lane__name { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.7rem; font-weight: 600; font-size: 1.15rem; }
.lane__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rose); }
.lane--si .lane__dot { background: var(--champ); box-shadow: 0 0 12px rgba(201, 169, 110, 0.8); }
.lane__sub { grid-column: 2; font-weight: 400; font-size: var(--t-micro); color: var(--ink-light-soft); }
.lane__stat { flex: none; max-width: 12rem; text-align: right; font: 600 0.64rem/1.35 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-light-soft); }
.lane__stat b { display: block; margin-top: 0.3rem; font-family: var(--sc-font-display); font-weight: 750; font-size: 2rem; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--rose); font-variant-numeric: lining-nums tabular-nums; }
.lane--si .lane__stat b { font-size: 1.35rem; color: var(--champ-hi); }
.lane__stat b.is-bump { animation: bump 500ms var(--ease); }
@keyframes bump { 30% { transform: scale(1.25); } }
.lane__track { padding-top: 1.4rem; }
.lane__cells { display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 3px; height: 14px; }
.lane__cells i { border-radius: 1px; background: rgba(246, 242, 235, 0.07); transition: background-color 220ms var(--ease), box-shadow 220ms var(--ease), transform 220ms var(--ease); }
.lane--etw .lane__cells i.is-on { background: rgba(246, 242, 235, 0.5); }
.lane--etw .lane__cells i.is-hot.is-on { background: repeating-linear-gradient(135deg, var(--oxblood) 0 3px, #c46a5c 3px 6px); box-shadow: 0 0 14px rgba(163, 71, 59, 0.6); transform: scaleY(1.35); }
.lane--si .lane__cells i.is-on { background: linear-gradient(180deg, #e6d2a8, #b8935a); }
.lane--si .lane__cells i.is-band.is-on { background: linear-gradient(180deg, #fff1d0, #d8bb84); box-shadow: 0 0 12px rgba(230, 210, 168, 0.55); }
.lane__cells i.is-now { outline: 1px solid var(--ink-light); outline-offset: 2px; }
.lane__axis { position: relative; height: 1rem; margin-top: 0.4rem; }
.lane__axis span { position: absolute; left: calc((var(--y) - 0.5) / 25 * 100%); translate: -50% 0; font-size: 0.7rem; color: var(--ink-light-soft); font-variant-numeric: tabular-nums; }
.lane__list { display: grid; margin-top: 1.1rem; }
.lane__list li { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0.8rem; padding: 0.7rem 0; border-top: 1px solid rgba(246, 242, 235, 0.08); font-size: 1rem; line-height: 1.4; text-wrap: balance; transition: opacity 380ms var(--ease), transform 480ms var(--ease); }
.lane__list li span { font: 600 0.68rem/2.05 var(--sc-font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose); font-variant-numeric: tabular-nums; }
.lane--etw .lane__list li { color: #f1d8d2; }
.lane--si .lane__list li span { color: var(--champ); }
.is-auto .lane__list li { opacity: 0.22; transform: translateX(-6px); }
.is-auto .lane__list li.is-on { opacity: 1; transform: none; }
.years__end { grid-column: 1 / -1; display: flex; justify-content: center; padding: clamp(1.6rem, 3vw, 2.6rem) 0 0.5rem; text-align: center; }
.years__verdict { max-width: 40ch; font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); line-height: 1.22; text-wrap: balance; color: var(--champ-hi); opacity: calc(min(1, max(0, (var(--t) - 0.9) * 10))); transform: translateY(calc((1 - min(1, max(0, (var(--t) - 0.9) * 10))) * 14px)); }
/* Auslauf: Quellenhinweis im gleichen Grund, unten Platz für den Giebel des hellen Kapitels. */
.years-after { background-image: none; padding: 1.4rem 0 calc(var(--gable) + clamp(2.5rem, 6vw, 4.5rem)); }
.years-after .wrap { max-width: 84rem; }
.years__note { max-width: 62rem; margin-inline: auto; padding-top: 1rem; border-top: 1px solid rgba(246, 242, 235, 0.1); font-size: 0.75rem; line-height: 1.55; text-align: center; color: var(--ink-light-soft); }
@media (max-width: 860px) {
  .years { padding-top: clamp(4rem, 14vw, 5.5rem); }
  .years__stage { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .years__head { max-width: 32rem; }
  .years__head .display { font-size: clamp(1.7rem, 1.1rem + 3vw, 2.2rem); }
  .years__sub { font-size: 0.98rem; }
  .years__clock { display: none; }
  .lane { padding: 1.1rem 1rem 1rem; }
  .lane--etw { margin-top: 1.2rem; }
  .lane__name { font-size: 1.02rem; }
  .lane__stat { font-size: 0.6rem; }
  .lane__stat b { margin-top: 0.2rem; font-size: 1.6rem; }
  .lane--si .lane__stat b { font-size: 1.1rem; }
  .lane__track { padding-top: 1rem; }
  .lane__cells { height: 10px; gap: 2px; }
  .lane__axis { margin-top: 0.35rem; }
  .lane__list { margin-top: 0.9rem; }
  .lane__list li { grid-template-columns: 4.3rem minmax(0, 1fr); gap: 0.6rem; padding: 0.6rem 0; font-size: 0.92rem; }
  .lane__list li span { font-size: 0.66rem; line-height: 2.1; }
  .years__end { padding-top: 1.2rem; }
  .years__verdict { font-size: clamp(1.2rem, 0.95rem + 1.4vw, 1.45rem); line-height: 1.25; }
  .years__note { font-size: 0.72rem; text-align: left; }
}

/* -------------------------------------------------------------- check -- */
.check { padding-block: clamp(5rem, 10vw, 9rem); }
.check__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
.check__list { margin-top: clamp(2.5rem, 5vw, 4rem); counter-reset: c; }
.check__list li { counter-increment: c; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); column-gap: 1rem; padding: 1.7rem 0; border-top: 1px solid var(--sc-hairline); }
.check__list li::before { content: counter(c); grid-row: 1 / span 2; font-family: var(--sc-font-display); font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--bronze); }
.check__list h3 { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem); line-height: 1.2; letter-spacing: -0.01em; }
.check__list p { margin-top: 0.6rem; color: var(--ink-dark-soft); max-width: 36rem; }
.check__quote { margin-top: 2.5rem; padding: 1.8rem 0 0; border-top: 2px solid var(--navy); }
.check__quote blockquote p { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.3; }
.check__quote figcaption { display: flex; align-items: center; gap: 0.9rem; margin-top: 1.2rem; font-size: var(--t-small); color: var(--ink-dark-soft); }
.check__quote figcaption img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; }
.check__media { position: sticky; top: calc(var(--bar-h) + 2rem); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 0.9rem; }
.check__m { overflow: hidden; border-radius: 2px; box-shadow: var(--sc-e2); }
.check__m img { width: 100%; height: 100%; object-fit: cover; }
.check__m--a { grid-column: 1 / 5; grid-row: 1 / 3; aspect-ratio: 4 / 5; }
.check__m--b { grid-column: 5 / 7; grid-row: 1; aspect-ratio: 3 / 4; }
.check__m--c { grid-column: 5 / 7; grid-row: 2; aspect-ratio: 3 / 4; }
.check__cap { grid-column: 1 / -1; font-size: var(--t-micro); color: var(--ink-dark-soft); max-width: 38rem; }
@media (max-width: 900px) { .check__grid { grid-template-columns: 1fr; } .check__media { position: static; order: -1; } }
@media (max-width: 860px) {
  .check__media { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .check__m--a { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .check__m--b, .check__m--c { grid-column: auto; grid-row: auto; aspect-ratio: 1; }
  .check__list li { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .check__list li::before { font-size: 1.8rem; }
}

/* ------------------------------------------------------------ objects -- */
.objects__stage { color: var(--ink-light); background: transparent; display: flex; align-items: center; overflow: hidden; padding-top: var(--bar-h); }
.objects__rail { gap: clamp(1.25rem, 2.5vw, 2.5rem); padding-inline: var(--sc-gutter); align-items: stretch; }
.objects__lead { flex: none; width: min(30rem, 80vw); display: flex; flex-direction: column; justify-content: center; gap: 1.4rem; padding-right: 2rem; }
.objects__lead .kicker { margin-bottom: -0.4rem; }
.objects__lead p:not(.kicker) { color: var(--ink-light-soft); }
.dossier {
  flex: none; width: clamp(19rem, 30vw, 27rem); display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(246, 242, 235, 0.06), rgba(246, 242, 235, 0.02)); border: 1px solid rgba(201, 169, 110, 0.28); border-radius: var(--radius);
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(246, 242, 235, 0.08);
  padding: 0.75rem 0.75rem 1.4rem;
}
.dossier__img { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 2px; }
.dossier__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .dossier:hover .dossier__img img { transform: scale(1.03); } }
.dossier__place { margin: 1.2rem 0.6rem 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--champ); }
.dossier__name { margin: 0.5rem 0.6rem 0; font-family: var(--sc-font-display); font-weight: 650; font-size: 1.45rem; line-height: 1.18; text-wrap: balance; }
.dossier__sub { margin: 0.4rem 0.6rem 0; font-size: 1rem; line-height: 1.4; color: var(--ink-light); opacity: 0.86; text-wrap: balance; }
.dossier__note { margin: 0.7rem 0.6rem 0; font-size: var(--t-small); color: var(--ink-light-soft); }
.dossier__facts { margin: 1.1rem 0.6rem 0; }
.dossier__facts div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-top: 1px solid rgba(246, 242, 235, 0.1); font-size: var(--t-small); }
.dossier__facts dt { color: var(--ink-light-soft); }
.dossier__facts dd { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.dossier__link { margin: auto 0.6rem 0; padding-top: 1.2rem; font-weight: 600; font-size: var(--t-small); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: rgba(201, 169, 110, 0.6); }
.dossier__link:hover { color: var(--champ-hi); }
.objects__end { flex: none; width: min(26rem, 80vw); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.6rem; padding-left: 1rem; }
.objects__endline { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1.15; text-wrap: balance; }
.objects__fn { font-size: 0.75rem; line-height: 1.5; color: var(--ink-light-soft); }
@media (prefers-reduced-motion: no-preference) {
  .dossier { opacity: calc(0.55 + 0.45 * min(1, max(0, (var(--sc-p, 0) * 4 - var(--i, 0) * 0.8) + 0.4))); }
}

/* Desktop: die Hülle der Karten zählt nicht, die Karten bleiben Glieder der Querreihe. */
.objects__stack { display: contents; }
/* Objekte auf dem Handy: gestapelte Karten (Dominic, 29.10.2026). Der Querschwenk wackelte in Safari,
   weil er dem Scrollen per Skript folgen muss. Hier macht position: sticky alles, das scrollt der Browser
   selbst: jede Karte bleibt unter der Leiste stehen, die nächste schiebt sich darüber, ein Rand der
   vorigen bleibt sichtbar. Die Karten sind kompakt, damit eine ganze Karte zwischen Leiste und
   Termin-Leiste (.mcta) passt; sonst wäre ihr unteres Ende nie zu sehen. */
@media (max-width: 860px) {
  .objects__stage { display: block; height: auto; overflow: visible; padding: calc(var(--gable) + 3rem) 0 4rem; }
  .objects__rail { display: block; padding-inline: var(--sc-gutter); }
  .objects__lead, .objects__end { width: auto; max-width: 34rem; padding: 0; gap: 1.1rem; }
  .objects__lead { margin-bottom: 2.4rem; }
  .objects__lead .kicker { margin-bottom: 0; }
  .objects__lead .display { font-size: clamp(1.9rem, 1.2rem + 3.6vw, 2.5rem); }
  .objects__end { margin-top: 2.6rem; }
  .objects__endline { font-size: clamp(1.4rem, 1.1rem + 1.6vw, 1.8rem); }
  .objects__stack { display: block; }
  .objects__rail .dossier {
    position: sticky; top: calc(var(--bar-h) + 0.75rem + (var(--i, 1) - 1) * 0.25rem);
    width: auto; max-width: 30rem; margin: 0 auto 1.6rem; padding: 0.6rem 0.6rem 1.1rem; opacity: 1;
    background: linear-gradient(180deg, rgba(246, 242, 235, 0.06), rgba(246, 242, 235, 0.02)), var(--navy);
    box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(246, 242, 235, 0.08);
  }
  .objects__rail .dossier:last-child { margin-bottom: 0; }
  /* Sticky hält nur, solange die Hülle weiterläuft. Ohne Nachlauf hinter der letzten Karte erreichte sie
     ihren Platz nur kurz und der Stapel zog sofort weg. Ein leerer Block (kein margin: der zählt bei
     sticky zur Karte) lässt sie oben ankommen und stehen bleiben wie die anderen. */
  .objects__stack::after { content: ""; display: block; height: 30vh; height: 30svh; }
  .dossier__img { aspect-ratio: 2 / 1; }
  .dossier__place { margin-top: 0.8rem; font-size: 0.68rem; }
  .dossier__name { margin-top: 0.35rem; font-size: 1.2rem; }
  .dossier__sub { margin-top: 0.3rem; font-size: 0.9rem; }
  .dossier__note { margin-top: 0.35rem; font-size: 0.8rem; line-height: 1.4; }
  .dossier__facts { margin-top: 0.7rem; }
  .dossier__facts div { flex-wrap: nowrap; padding: 0.32rem 0; font-size: 0.8rem; line-height: 1.35; }
  .dossier__link { padding-top: 0.8rem; }
}
/* Kleine Handys (iPhone SE): flacheres Bild und engerer Stapel, damit auch die sechste Karte samt
   „Zum Objekt“ über der Termin-Leiste endet. */
@media (max-width: 860px) and (max-height: 700px) {
  .objects__rail .dossier { top: calc(var(--bar-h) + 0.5rem + (var(--i, 1) - 1) * 0.2rem); }
  .dossier__img { aspect-ratio: 12 / 5; }
}

/* --------------------------------------------------- Fallstudien (voices) -- */
/* Gleichmäßiges Raster auf Stein, jede Fallstudie als Karte mit Passepartout. Keine versetzte Mittelspalte. */
.voices { padding-block: clamp(5rem, 10vw, 9rem); }
.voices__head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; }
.voices__head > p { color: var(--ink-dark-soft); max-width: 30rem; }
.feature { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; margin-top: clamp(3rem, 6vw, 4.5rem); padding: clamp(10px, 1.2vw, 16px); padding-right: clamp(1.2rem, 4vw, 3.5rem); background: var(--card); border: 1px solid rgba(17, 30, 48, 0.07); box-shadow: 0 40px 80px -50px rgba(17, 30, 48, 0.55); }
.feature__media, .case__media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; overflow: hidden; background: var(--navy); border-radius: 2px; cursor: pointer; }
.feature__media img, .case__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.feature__media::after, .case__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 17, 29, 0.5), transparent 45%); pointer-events: none; }
.case__play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; display: grid; place-items: center; border-radius: 50%; background: rgba(12, 26, 44, 0.66); border: 1px solid rgba(230, 210, 168, 0.7); backdrop-filter: blur(6px); transition: transform 260ms var(--ease), background-color 200ms var(--ease); }
.case__play::before { content: ""; width: 13px; height: 15px; margin-left: 3px; background: var(--ink-light); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.case__play--lg { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
.case__play--lg::before { width: 18px; height: 21px; }
.case__len { position: absolute; z-index: 1; right: 0.7rem; bottom: 0.7rem; padding: 0.22rem 0.5rem; border-radius: 2px; background: rgba(7, 17, 29, 0.78); color: var(--ink-light); font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .feature__media:hover img, .case:hover .case__media img { transform: scale(1.04); }
  .feature__media:hover .case__play, .case:hover .case__play { background: var(--champ); transform: scale(1.08); }
  .feature__media:hover .case__play::before, .case:hover .case__play::before { background: var(--navy); }
}
.feature__media:focus-visible, .case__media:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; }
.feature__text blockquote p { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.16; text-wrap: balance; }
.case__no { font: 600 0.7rem/1 var(--sc-font-text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze); }
.feature__text .case__no { margin-bottom: 1.2rem; }
.case__who { margin-top: 1.3rem; font-size: var(--t-small); color: var(--ink-dark-soft); }
.case__who b { display: block; font-size: 1.02rem; color: var(--ink-dark); }
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.4vw, 2.2rem); margin-top: clamp(2rem, 4vw, 3rem); align-items: stretch; }
.case { position: relative; display: flex; flex-direction: column; padding: 10px 10px 1.5rem; background: var(--card); border: 1px solid rgba(17, 30, 48, 0.07); box-shadow: 0 24px 50px -40px rgba(17, 30, 48, 0.6); transition: transform 400ms var(--ease), box-shadow 400ms var(--ease); }
.case::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 2px; background: var(--champ); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .case:hover { transform: translateY(-5px); box-shadow: 0 40px 70px -40px rgba(17, 30, 48, 0.7); } .case:hover::before { transform: scaleX(1); } }
.case .case__no { margin: 1.3rem 0.7rem 0; }
.case__q { flex: 1; margin: 0.8rem 0.7rem 0; }
.case__q p { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.12rem, 1.02rem + 0.35vw, 1.32rem); line-height: 1.35; }
.case .case__who { margin: 1.3rem 0.7rem 0; padding-top: 1rem; border-top: 1px solid rgba(17, 30, 48, 0.1); }
.voices__tp { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.6rem; border-top: 1px solid rgba(17, 30, 48, 0.14); color: var(--ink-dark-soft); }
.voices__tp .link { margin-left: auto; color: var(--ink-dark); }
.tp { width: 92px; height: auto; color: #00b67a; }
.link--light { color: var(--ink-light); }
@media (max-width: 1000px) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .voices__head, .feature { grid-template-columns: 1fr; }
  .feature { padding-right: clamp(10px, 1.2vw, 16px); } .feature__text { padding: 0.5rem 0.6rem 1.2rem; }
  .voices__tp .link { margin-left: 0; }
}
@media (max-width: 860px) {
  .voices__head { text-align: center; justify-items: center; }
  .voices__head .kicker { justify-content: center; }
  .voices__head .kicker::after { content: ""; width: 2rem; height: 1px; background: currentColor; opacity: 0.7; }
  .feature__text .case__no { line-height: 1.5; }
}
@media (max-width: 640px) { .cases { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ founder -- */
.founder { padding-block: clamp(5.5rem, 10vw, 9rem) clamp(4rem, 8vw, 7rem); overflow: clip; }
.founder__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(3rem, 7vw, 8rem); align-items: center; }
/* Porträt im Bogenrahmen: Architektur-Motiv, versetzte Goldlinie, feines Passepartout, Siegel */
.portrait { position: relative; margin: 0; isolation: isolate; }
.portrait__box { position: relative; display: block; margin-right: clamp(18px, 2.2vw, 30px); margin-bottom: clamp(18px, 2.2vw, 30px); }
.portrait__arch, .portrait__frame { border-radius: 50% 50% 3px 3px / 34% 34% 3px 3px; }
.portrait__arch { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--navy-2); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.85); }
.portrait__arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; transform: scale(1.02); }
.portrait__arch::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(230, 210, 168, 0.55); border-radius: inherit; pointer-events: none; }
.portrait__frame { position: absolute; z-index: -1; inset: clamp(18px, 2.2vw, 30px) calc(-1 * clamp(18px, 2.2vw, 30px)) calc(-1 * clamp(18px, 2.2vw, 30px)) clamp(18px, 2.2vw, 30px); border: 1px solid var(--champ); background: linear-gradient(160deg, rgba(201, 169, 110, 0.12), transparent 60%); }
.portrait__badge { position: absolute; right: calc(-1 * clamp(34px, 3.4vw, 52px)); top: 58%; display: grid; place-content: center; justify-items: center; width: clamp(112px, 10vw, 138px); aspect-ratio: 1; padding: 0.8rem; border-radius: 50%; background: var(--champ); color: var(--navy); text-align: center; font: 600 0.62rem/1.25 var(--sc-font-text); letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.7); }
.portrait__badge::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px solid rgba(12, 26, 44, 0.35); }
.portrait__badge b { font-family: var(--sc-font-display); font-weight: 700; font-size: 2.1rem; line-height: 1; letter-spacing: 0; text-transform: none; }
.portrait__plate { display: flex; align-items: baseline; gap: 0.9rem; margin-top: clamp(1.8rem, 3.5vw, 3rem); font-size: var(--t-small); color: var(--ink-light-soft); }
.portrait__plate b { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.35rem; color: var(--ink-light); }
.founder__text > * + * { margin-top: 1.4rem; }
.founder__text .kicker + .display { margin-top: 0; }
.founder__text .lede { margin-top: 1.8rem; color: rgba(246, 242, 235, 0.9); }
.founder__text p:not(.lede):not(.kicker) { color: var(--ink-light-soft); max-width: 38rem; }
.founder__motto { margin-top: 2.2rem !important; padding: 0.4rem 0 0.4rem 1.4rem; border-left: 2px solid var(--champ); }
.founder__motto p { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); line-height: 1.25; color: var(--ink-light) !important; }
.founder__motto footer { margin-top: 0.5rem; font-size: var(--t-small); color: var(--ink-light-soft); }
.stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); margin-top: clamp(5rem, 10vw, 8rem); align-items: start; }
.stage figure img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.stage figcaption { margin-top: 0.7rem; font-size: var(--t-micro); color: var(--ink-light-soft); }
.stage__big { grid-column: 1 / 8; }
.stage__big img { aspect-ratio: 4 / 3; }
.stage__small { grid-column: 9 / 13; margin-top: 5rem; }
.stage__small img { aspect-ratio: 1; }
.team { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2.5rem); margin-top: clamp(3.5rem, 7vw, 6rem); padding-top: 2rem; border-top: 1px solid rgba(246, 242, 235, 0.14); align-items: start; }
.team__intro { grid-column: 1 / -1; font-family: var(--sc-font-display); font-size: var(--t-md); font-weight: 600; line-height: 1.1; }
.person img { aspect-ratio: 5 / 5.4; width: 100%; object-fit: cover; object-position: 50% 18%; border-radius: 2px; filter: saturate(0.9); }
.person figcaption { margin-top: 0.9rem; font-size: var(--t-small); color: var(--ink-light-soft); }
.person strong { display: block; margin-bottom: 0.2rem; font-size: 1.05rem; color: var(--ink-light); }
.team__quote { align-self: end; padding: 1.4rem 0 0.2rem; border-top: 2px solid var(--champ); }
.team__quote p { font-family: var(--sc-font-display); font-weight: 500; font-size: 1.22rem; line-height: 1.32; }
.team__quote footer { margin-top: 0.7rem; font-size: var(--t-small); color: var(--ink-light-soft); }
/* Team auf hellen Unterseiten (Über uns) behält dunkle Schrift */
.g-paper .person figcaption, .g-paper2 .person figcaption { color: var(--ink-dark-soft); }
.g-paper .person strong, .g-paper2 .person strong { color: var(--ink-dark); }
@media (max-width: 900px) {
  .founder__grid { grid-template-columns: 1fr; }
  .portrait { max-width: 28rem; }
  .stage__big, .stage__small { grid-column: 1 / -1; margin-top: 0; }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team__quote { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------- risks -- */
/* Sechs Risiken als Register: links die Liste, rechts eine Karte. Immer nur ein Text zur Zeit. */
.risks { padding-block: clamp(5rem, 10vw, 9rem); }
.risks__head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; }
.risks__head > p { color: var(--ink-dark-soft); max-width: 30rem; }
.rtabs { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 4rem); margin-top: clamp(3rem, 6vw, 4.5rem); align-items: stretch; }
.rtabs__list { display: grid; align-content: start; border-top: 1px solid rgba(17, 30, 48, 0.14); }
.rtabs__list button { position: relative; display: grid; grid-template-columns: 2.4rem 1.6rem minmax(0, 1fr); align-items: center; gap: 0.9rem; width: 100%; padding: 1.15rem 1.2rem 1.15rem 1rem; border: 0; border-bottom: 1px solid rgba(17, 30, 48, 0.14); background: transparent; color: var(--ink-dark-soft); text-align: left; font: 600 clamp(1.1rem, 1rem + 0.35vw, 1.3rem)/1.25 var(--sc-font-display); cursor: pointer; transition: background-color 250ms var(--ease), color 200ms var(--ease), padding 300ms var(--ease); }
.rtabs__list button::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--champ); transform: scaleY(0); transition: transform 350ms var(--ease); }
.rtabs__list button:hover { color: var(--ink-dark); background: rgba(252, 250, 246, 0.6); }
.rtabs__list button[aria-selected="true"] { color: var(--ink-dark); background: var(--card); padding-left: 1.5rem; box-shadow: 0 16px 34px -28px rgba(17, 30, 48, 0.7); }
.rtabs__list button[aria-selected="true"]::before { transform: scaleY(1); }
.rtabs__list button:focus-visible { outline: 2px solid var(--bronze); outline-offset: -2px; }
.rtabs__n { font: 600 0.75rem/1 var(--sc-font-text); letter-spacing: 0.12em; color: var(--bronze); }
.ico { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rtabs__list .ico { color: var(--bronze); }
.rtabs__panels { position: relative; display: flex; flex-direction: column; padding: clamp(1.8rem, 4vw, 3.4rem); background: var(--navy); color: var(--ink-light); border-radius: 4px; overflow: hidden; box-shadow: 0 50px 90px -50px rgba(12, 26, 44, 0.9); }
.rtabs__panels::before { content: ""; position: absolute; right: -12%; top: -18%; width: 60%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(201, 169, 110, 0.2); box-shadow: 0 0 0 40px rgba(201, 169, 110, 0.03), 0 0 0 80px rgba(201, 169, 110, 0.02); pointer-events: none; }
.rpanel { position: relative; flex: 1; animation: rp-in 520ms var(--ease) both; }
.rpanel[hidden] { display: none; }
@keyframes rp-in { from { opacity: 0; transform: translateY(14px); } }
.rpanel__k { font: 600 0.72rem/1 var(--sc-font-text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--champ); }
.rpanel h3 { margin-top: 1.1rem; font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.8rem, 1.3rem + 1.5vw, 2.6rem); line-height: 1.1; text-wrap: balance; }
.rpanel__risk { margin-top: 1.1rem; font-size: 1.1rem; color: var(--ink-light-soft); max-width: 34rem; }
.rpanel__do { margin-top: clamp(1.6rem, 3vw, 2.4rem); padding: 1.3rem 1.4rem; border: 1px solid rgba(201, 169, 110, 0.3); border-left: 3px solid var(--champ); background: rgba(201, 169, 110, 0.08); }
.rpanel__dok { display: flex; align-items: center; gap: 0.6rem; font: 600 0.72rem/1 var(--sc-font-text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--champ-hi); }
.rpanel__dok::before { content: ""; width: 12px; height: 7px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg) translateY(-2px); }
.rpanel__do p:last-child { margin-top: 0.8rem; font-size: 1.1rem; line-height: 1.55; }
.rpanel__nav { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid rgba(246, 242, 235, 0.12); }
.rpanel__nav .link { color: var(--ink-light-soft); font-weight: 500; font-size: var(--t-small); }
.rpanel__next { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0 0.2rem; border: 0; background: none; color: var(--champ-hi); font: 600 0.95rem var(--sc-font-text); cursor: pointer; }
.rpanel__next::after { content: ""; width: 0.9em; height: 0.9em; background: currentColor; clip-path: polygon(0 45%, 70% 45%, 45% 18%, 55% 8%, 100% 50%, 55% 92%, 45% 82%, 70% 55%, 0 55%); transition: transform 160ms var(--ease); }
.rpanel__next:hover::after { transform: translateX(3px); }
.rpanel__next:focus-visible { outline: 2px solid var(--champ); outline-offset: 3px; }
@media (max-width: 900px) {
  .risks__head, .rtabs { grid-template-columns: 1fr; }
  .rtabs__list { grid-auto-flow: column; grid-auto-columns: minmax(13rem, 70%); overflow-x: auto; scroll-snap-type: x mandatory; border: 0; gap: 0.5rem; padding-bottom: 0.4rem; scrollbar-width: none; }
  .rtabs__list button { scroll-snap-align: start; border: 1px solid rgba(17, 30, 48, 0.14); border-radius: 3px; grid-template-columns: auto 1fr; font-size: 1.02rem; padding: 0.9rem 1rem; }
  .rtabs__list button .ico { display: none; }
  .rtabs__list button[aria-selected="true"] { padding-left: 1rem; }
}

/* -------------------------------------------------------------- steps -- */
/* Ablauf als Weg: eine Linie zeichnet sich, ein Schlüssel fährt sie ab, fünf Stationen leuchten auf. */
.steps__stage { display: grid; grid-template-rows: auto auto 1fr; align-content: center; padding: calc(var(--bar-h) + 2rem) max(var(--sc-gutter), calc((100vw - 92rem) / 2)) 2.5rem; color: var(--ink-light); background: transparent; --rp: 0; }
.steps__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem 4rem; align-items: end; }
.steps__head .kicker { grid-column: 1 / -1; margin-bottom: 0; }
.steps__head p:not(.kicker) { color: var(--ink-light-soft); max-width: 28rem; }
.route { position: relative; height: clamp(110px, 17vh, 170px); margin-top: clamp(1.5rem, 5vh, 3.5rem); }
.route__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.route__base { fill: none; stroke: rgba(246, 242, 235, 0.2); stroke-width: 1.5; stroke-dasharray: 2 8; stroke-linecap: round; }
.route__line { fill: none; stroke: var(--champ); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(201, 169, 110, 0.5)); }
.route__car { position: absolute; left: 0; top: 0; z-index: 3; width: 50px; height: 50px; margin: -25px 0 0 -25px; display: grid; place-items: center; border-radius: 50%; background: var(--champ); color: var(--navy); box-shadow: 0 0 0 6px rgba(201, 169, 110, 0.18), 0 0 30px rgba(201, 169, 110, 0.55); will-change: transform; }
.route__car svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.route .station__node { position: absolute; z-index: 2; margin: -24px 0 0 -24px; }
.station__node { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--navy); border: 1px solid rgba(201, 169, 110, 0.45); color: var(--champ); transition: background-color 400ms var(--ease), color 400ms var(--ease), transform 500ms var(--ease), box-shadow 400ms var(--ease); }
.station__node .ico { width: 22px; height: 22px; }
.station__node.is-on { background: #1c2f48; border-color: var(--champ); color: var(--champ-hi); transform: scale(1.12); box-shadow: 0 0 0 8px rgba(201, 169, 110, 0.08); }
.stations { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); margin-top: clamp(1.5rem, 4vh, 2.5rem); }
.station { position: relative; padding: 1.3rem 1.1rem 1.4rem; border-top: 1px solid rgba(246, 242, 235, 0.14); opacity: 0.38; transition: opacity 500ms var(--ease), background-color 500ms var(--ease), border-color 500ms var(--ease), transform 500ms var(--ease); }
.station.is-on { opacity: 1; }
.station.is-cur { background: linear-gradient(180deg, rgba(201, 169, 110, 0.1), rgba(201, 169, 110, 0)); border-top-color: var(--champ); transform: translateY(-4px); }
.station__n { display: block; font-family: var(--sc-font-display); font-weight: 700; font-size: 1.9rem; line-height: 1; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.station h3 { margin-top: 0.8rem; font-family: var(--sc-font-display); font-weight: 650; font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.4rem); line-height: 1.2; text-wrap: balance; }
.station p { margin-top: 0.6rem; font-size: 0.94rem; line-height: 1.5; color: var(--ink-light-soft); }
.stations .station__node { display: none; }
@media (max-width: 860px) {
  .steps { padding-block: clamp(5rem, 10vw, 7rem); }
  .steps__stage { padding: 0 var(--sc-gutter); }
  .steps__head { grid-template-columns: 1fr; }
  .route { display: none; }
  .stations { grid-template-columns: 1fr; gap: 0; margin-top: 2.5rem; position: relative; }
  .stations::before { content: ""; position: absolute; left: 24px; top: 24px; bottom: 24px; width: 1px; background: linear-gradient(var(--champ), rgba(201, 169, 110, 0.15)); }
  .station { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 1.2rem; padding: 0 0 2rem; border: 0; opacity: 1; transform: none !important; background: none !important; }
  .stations .station__node { display: grid; grid-row: 1 / span 3; position: relative; z-index: 1; }
  .station__n { font-size: 1.3rem; margin-top: 0.6rem; }
  .station h3 { margin-top: 0.4rem; }
}

/* ------------------------------------------ Unterseiten: ältere Bausteine -- */
.vposter { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #000; border-radius: 2px; overflow: hidden; cursor: pointer; aspect-ratio: 16 / 9; }
.vposter img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease), opacity 300ms var(--ease); opacity: 0.92; }
.vposter__play { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(7, 17, 29, 0.66); border: 1px solid rgba(230, 210, 168, 0.7); display: grid; place-items: center; transition: background-color 180ms var(--ease), transform 180ms var(--ease); }
.vposter__play::before { content: ""; width: 12px; height: 14px; margin-left: 3px; background: var(--ink-light); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.vposter__len { position: absolute; right: 0.8rem; bottom: 0.8rem; padding: 0.2rem 0.5rem; border-radius: 2px; background: rgba(7, 17, 29, 0.72); color: var(--ink-light); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .vposter:hover img { transform: scale(1.03); opacity: 1; }
  .vposter:hover .vposter__play { background: var(--champ); transform: scale(1.06); }
  .vposter:hover .vposter__play::before { background: var(--navy); }
}
.vposter:focus-visible { outline: 2px solid var(--champ); outline-offset: 4px; }
.voices__feature { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; margin-top: clamp(3rem, 6vw, 5rem); }
.voices__feature blockquote p { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.6rem); line-height: 1.16; text-wrap: balance; }
.who { margin-top: 1.2rem; font-weight: 600; }
.who span { display: block; font-weight: 400; font-size: var(--t-small); color: var(--ink-light-soft); }
@media (max-width: 900px) { .voices__feature { grid-template-columns: 1fr; } }
.founder__portrait { position: relative; aspect-ratio: 5 / 6; overflow: hidden; border-radius: 2px; background: var(--paper-3); box-shadow: var(--sc-e3); }
.founder__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.g-paper .founder__text p:not(.lede):not(.kicker), .g-paper2 .founder__text p:not(.lede):not(.kicker) { color: var(--ink-dark-soft); }
.g-paper .founder__text .lede { color: var(--ink-dark); }
.g-paper .founder__motto { border-left-color: var(--bronze); }
.g-paper .founder__motto p { color: var(--ink-dark) !important; }
.g-paper .founder__motto footer { color: var(--ink-dark-soft); }
/* Kennzahlen auf Papier (Über uns) */
.g-paper .figures, .g-paper2 .figures { border-color: rgba(122, 92, 44, 0.3); }
.g-paper .figure dd > span:first-child, .g-paper2 .figure dd > span:first-child { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(2.6rem, 1.6rem + 3vw, 4.6rem); line-height: 1; font-variant-numeric: lining-nums tabular-nums; color: var(--ink-dark); }
.g-paper .figure__unit, .g-paper2 .figure__unit { color: var(--bronze); }
.g-paper .figure dt, .g-paper2 .figure dt { color: var(--ink-dark-soft); }
.g-paper .figure + .figure::before, .g-paper2 .figure + .figure::before { background: linear-gradient(transparent, rgba(122, 92, 44, 0.4), transparent); }
.g-paper .figure::after, .g-paper2 .figure::after { background: var(--bronze); }
.risk__do { color: var(--ink-dark) !important; }
.risk__do span { font-weight: 600; color: var(--bronze); }
.g-paper .play, .g-paper2 .play { color: var(--ink-dark); }
.g-paper .play .play__icon, .g-paper2 .play .play__icon { border-color: rgba(17, 30, 48, 0.4); }
.g-paper .play__len, .g-paper2 .play__len { color: var(--ink-dark-soft); }

/* ---------------------------------------------------------------- faq -- */
.faq { padding-block: clamp(5rem, 10vw, 9rem); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.faq__head { position: sticky; top: calc(var(--bar-h) + 2.5rem); }
.faq__head p { margin-top: 1.2rem; color: var(--ink-dark-soft); }
.faq__head a { font-weight: 600; white-space: nowrap; }
.faq__list details { border-top: 1px solid rgba(19, 32, 51, 0.2); }
.faq__list details:last-child { border-bottom: 1px solid rgba(19, 32, 51, 0.2); }
.faq__list summary { position: relative; display: block; padding: 1.4rem 3rem 1.4rem 0; font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem); line-height: 1.3; cursor: pointer; list-style: none; border-radius: var(--radius); }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::before, .faq__list summary::after { content: ""; position: absolute; right: 0.5rem; top: 50%; width: 16px; height: 1.5px; background: var(--bronze); transition: transform 220ms var(--ease); }
.faq__list summary::after { transform: rotate(90deg); }
.faq__list details[open] summary::after { transform: rotate(0deg); }
.faq__list summary:hover { color: var(--navy-2); }
.faq__list summary:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; }
.faq__list details p { padding: 0 3rem 1.6rem 0; color: var(--ink-dark-soft); max-width: 44rem; }
.faq__list details p a { color: var(--ink-dark); font-weight: 600; }
@media (max-width: 900px) { .faq__grid { grid-template-columns: 1fr; } .faq__head { position: static; } }

/* -------------------------------------------------------------- close -- */
.close { padding-block: clamp(5.5rem, 11vw, 10rem); }
.close[data-sc-spotlight]::after { background: radial-gradient(600px circle at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%), rgba(205, 176, 122, 0.09), transparent 60%); }
.close { position: relative; overflow: clip; }
.close__mark { position: absolute; right: -6vw; bottom: -8vw; width: min(52vw, 760px); color: rgba(244, 239, 230, 0.035); pointer-events: none; }
.mark { display: block; width: 100%; height: auto; }
.close__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
.close__text .lede { margin-top: 1.6rem; color: rgba(244, 239, 230, 0.86); max-width: 34rem; }
.close__facts { margin-top: 2rem; display: grid; gap: 0.7rem; }
.close__facts li { display: flex; gap: 0.8rem; align-items: baseline; }
.close__facts li::before { content: ""; flex: none; width: 14px; height: 8px; margin-top: 0.1em; border-left: 1.5px solid var(--champ); border-bottom: 1.5px solid var(--champ); transform: rotate(-45deg) translateY(-2px); }
.close__tel { margin-top: 2.2rem; color: var(--ink-light-soft); }
.close__tel a { color: var(--ink-light); font-weight: 600; font-size: 1.15rem; margin-left: 0.3rem; text-decoration: none; border-bottom: 1px solid var(--champ); }
@media (max-width: 900px) { .close__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- form -- */
.lead { position: relative; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--paper); color: var(--ink-dark); border-radius: var(--radius); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.6) inset; display: grid; gap: 1.1rem; }
.lead__title { font-family: var(--sc-font-display); font-size: 1.7rem; font-weight: 600; line-height: 1.1; }
.lead__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.field { display: grid; gap: 0.35rem; }
.field label { font-size: 0.875rem; font-weight: 600; }
.opt { font-weight: 400; color: var(--ink-dark-soft); }
.field input, .field select { width: 100%; min-height: 50px; padding: 0.7rem 0.85rem; border: 1px solid rgba(19, 32, 51, 0.28); border-radius: var(--radius); background: #fbf8f2; color: var(--ink-dark); font-size: 1rem; transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-dark) 50%), linear-gradient(135deg, var(--ink-dark) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.4rem; }
.field input:hover, .field select:hover { border-color: rgba(19, 32, 51, 0.5); }
.field input:focus-visible, .field select:focus-visible { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(116, 88, 43, 0.35); }
.field__err { display: none; font-size: 0.8125rem; color: #9b2f22; }
.field.is-invalid input { border-color: #9b2f22; }
.field.is-invalid .field__err { display: block; }
.check-field { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; align-items: start; font-size: 0.875rem; color: var(--ink-dark-soft); }
.check-field input { width: 20px; height: 20px; margin-top: 0.15rem; accent-color: var(--navy); }
.check-field.is-invalid label { color: #9b2f22; }
.check-field a { color: var(--ink-dark); }
.lead .btn { margin-top: 0.4rem; }
.lead__micro { font-size: 0.8125rem; color: var(--ink-dark-soft); text-align: center; }
.lead__ok { position: absolute; inset: 0; display: grid; align-content: center; gap: 0.8rem; padding: 2.5rem; background: var(--paper); border-radius: var(--radius); }
.lead__ok[hidden] { display: none; }
.lead__ok-title { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.9rem; line-height: 1.15; }
.lead__ok a { color: var(--ink-dark); font-weight: 600; }
.lead.is-sending .btn { opacity: 0.7; pointer-events: none; }
@media (max-width: 520px) { .lead__row { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- footer -- */
.foot { position: relative; z-index: 2; padding-block: clamp(4rem, 8vw, 6rem) 2.5rem; background: var(--navy-deep); color: var(--ink-light); }
.foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(244, 239, 230, 0.12); }
.foot__claim { max-width: 30ch; font-family: var(--sc-font-display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.3rem); font-weight: 600; line-height: 1.18; }
.foot__contact { display: grid; gap: 1rem; align-content: start; }
.foot__tel { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); text-decoration: none; font-variant-numeric: lining-nums; }
.foot__tel:hover { color: var(--champ-hi); }
.foot address { font-style: normal; color: var(--ink-light-soft); line-height: 1.6; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.8rem; padding-block: 2rem; }
.foot__nav a { font-size: 0.9375rem; text-decoration: none; color: rgba(244, 239, 230, 0.8); padding-block: 0.3rem; }
.foot__nav a:hover { color: var(--ink-light); text-decoration: underline; text-underline-offset: 0.3em; }
.foot__legal { display: grid; gap: 1.2rem; padding-top: 1.6rem; border-top: 1px solid rgba(244, 239, 230, 0.12); font-size: 0.8125rem; line-height: 1.6; color: var(--ink-light-soft); }
.foot__legal p:first-child { max-width: 82ch; }
.foot__legal strong { color: var(--ink-light); font-weight: 600; }

/* ------------------------------------------------------------- video modal -- */
.vmodal { width: min(1200px, 94vw); max-width: none; max-height: 94vh; padding: 0; border: 0; background: transparent; color: var(--ink-light); overflow: visible; }
.vmodal::backdrop { background: rgba(5, 11, 20, 0.88); }
.vmodal__frame { background: #000; border-radius: var(--radius); overflow: hidden; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); }
.vmodal__video { display: block; width: 100%; max-height: 82vh; background: #000; }
.vmodal__cap { padding: 0.9rem 1.1rem; background: var(--navy-deep); font-size: var(--t-small); color: var(--ink-light-soft); }
.vmodal__close { position: absolute; right: 0; top: -3.2rem; min-height: 44px; padding: 0.5rem 1rem; background: none; border: 1px solid rgba(244, 239, 230, 0.4); border-radius: var(--radius); color: var(--ink-light); font: 500 0.9375rem var(--sc-font-text); cursor: pointer; }
.vmodal__close:hover { border-color: var(--champ); }
.vmodal[open] .vmodal__frame { animation: vm-in 260ms var(--ease); }
@keyframes vm-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }

/* ------------------------------------------------------------- subpages -- */
.phero { position: relative; padding: calc(var(--bar-h) + clamp(4rem, 9vw, 8rem)) 0 clamp(4rem, 8vw, 7rem); overflow: clip; }
.phero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.phero .lede { color: rgba(244, 239, 230, 0.86); max-width: 36rem; }
.phero__crumb { margin-bottom: 1.6rem; font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--champ); }
.phero__crumb a { text-decoration: none; color: var(--ink-light-soft); }
.phero__crumb a:hover { color: var(--ink-light); }
.phero__mark { position: absolute; right: -4vw; bottom: -10vw; width: 44vw; max-width: 640px; color: rgba(244, 239, 230, 0.035); pointer-events: none; }
@media (max-width: 900px) { .phero__grid { grid-template-columns: 1fr; } }
.prose { max-width: 44rem; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2, .prose h3 { hyphens: auto; overflow-wrap: break-word; }
.prose h2 { margin-top: 3rem; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--t-md); line-height: 1.12; }
.prose h3 { margin-top: 2rem; font-family: var(--sc-font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.2; }
.prose p, .prose li { color: var(--ink-dark-soft); }
.prose ul { display: grid; gap: 0.5rem; padding-left: 1.2rem; list-style: disc; }
.prose strong { color: var(--ink-dark); }
.section { padding-block: clamp(4.5rem, 9vw, 8rem); }

@media (prefers-reduced-motion: reduce) {
  .hero__media { transform: none; }
  .btn, .btn::after, .vposter img { transition: none; }
}

/* ============================================================ Unterseiten */
@media (max-width: 700px) { .dossier { width: 84vw; } .dossier__facts div { flex-wrap: wrap; gap: 0 1rem; } }

.phero h1 { max-width: 18ch; }
.phero .lede { margin-top: 1.6rem; }
.phero__aside { display: grid; gap: 1rem; justify-items: start; }
.phero__aside p { color: var(--ink-light-soft); font-size: var(--t-small); max-width: 26rem; }
.phero--img { min-height: 78vh; display: flex; align-items: flex-end; }
.phero__bg { position: absolute; inset: 0; z-index: 0; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.06 - var(--sc-p, 0) * 0.06)); }
.phero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 18, 31, 0.9) 0%, rgba(8, 18, 31, 0.6) 45%, rgba(8, 18, 31, 0.15) 80%), linear-gradient(0deg, rgba(8, 18, 31, 0.8), transparent 50%); }
.phero--img .wrap { position: relative; z-index: 1; }
@media (max-width: 860px) { .phero__bg::after { background: linear-gradient(0deg, rgba(8, 18, 31, 0.95) 10%, rgba(8, 18, 31, 0.55) 70%, rgba(8, 18, 31, 0.4)); } }

.subnav { position: sticky; top: 0; z-index: 30; background: rgba(244, 239, 230, 0.96); color: var(--ink-dark); border-bottom: 1px solid rgba(19, 32, 51, 0.12); transition: top 320ms var(--ease); }
.bar:not(.is-hidden) ~ main .subnav { top: var(--bar-h); }
.subnav__in { display: flex; gap: clamp(1rem, 3vw, 2.5rem); overflow-x: auto; scrollbar-width: none; }
@media (max-width: 860px) { .subnav__in { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); padding-right: 2.5rem; } }
.subnav a { flex: none; padding: 1rem 0; font-size: var(--t-small); font-weight: 600; text-decoration: none; color: var(--ink-dark-soft); border-bottom: 2px solid transparent; }
.subnav a:hover, .subnav a.is-active { color: var(--ink-dark); border-bottom-color: var(--bronze); }

.obj { padding-block: clamp(4.5rem, 9vw, 8rem); scroll-margin-top: calc(var(--bar-h) + 3.5rem); }
.obj + .obj { border-top: 1px solid var(--sc-hairline); }
.obj__top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.obj__gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.obj__gal figure { overflow: hidden; border-radius: 2px; box-shadow: var(--sc-e2); }
.obj__gal figure:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.obj__gal figure:not(:first-child) { aspect-ratio: 4 / 3; }
.obj__gal img { width: 100%; height: 100%; object-fit: cover; }
.obj__gal figcaption { grid-column: 1 / -1; font-size: var(--t-micro); color: var(--ink-dark-soft); }
.obj__place { font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--bronze); }
.obj__head h2 { margin-top: 0.8rem; }
.obj__sub { margin-top: 0.6rem; font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.3; color: var(--ink-dark); text-wrap: balance; }
.obj__head .lede { margin-top: 1.2rem; color: var(--ink-dark-soft); }
.obj__keys { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.obj__keys li { padding: 0.45rem 0.8rem; border: 1px solid rgba(116, 88, 43, 0.4); border-radius: var(--radius); font-size: var(--t-small); font-weight: 600; color: var(--ink-dark); }
.facts { margin-top: 2rem; border-top: 2px solid var(--navy); }
.facts div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--sc-hairline); font-size: 0.98rem; }
.facts dt { color: var(--ink-dark-soft); }
.facts dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.facts__fn { margin-top: 0.8rem; font-size: 0.78rem; color: var(--ink-dark-soft); }
.obj__quote { margin-top: clamp(3rem, 6vw, 5rem); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.6rem; align-items: start; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--paper-2); border-radius: var(--radius); }
.obj__quote img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; }
.obj__quote blockquote p { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem); line-height: 1.38; }
.obj__quote footer { margin-top: 1rem; font-size: var(--t-small); color: var(--ink-dark-soft); }
.obj__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(3rem, 6vw, 4.5rem); }
.obj__cols h3 { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.4rem; padding-top: 1rem; border-top: 1px solid rgba(19, 32, 51, 0.22); }
.obj__cols p, .obj__cols li { margin-top: 0.7rem; color: var(--ink-dark-soft); font-size: 1rem; }
.obj__cols ul { display: grid; gap: 0.2rem; }
.obj__cols li { display: flex; gap: 0.6rem; }
.obj__cols li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 0.62em; border-radius: 50%; background: var(--bronze); }
.obj__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.obj__cta p { color: var(--ink-dark-soft); font-size: var(--t-small); max-width: 30rem; }
@media (max-width: 900px) { .obj__top, .obj__cols { grid-template-columns: 1fr; } .obj__quote { grid-template-columns: 1fr; } }

.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(0.6rem, 1.4vw, 1.2rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.gallery figure { overflow: hidden; border-radius: 2px; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery .g1 { grid-column: 1 / 8; grid-row: span 2; }
.gallery .g2 { grid-column: 8 / 13; aspect-ratio: 4 / 3; }
.gallery .g3 { grid-column: 8 / 13; aspect-ratio: 4 / 3; }
.gallery .g4 { grid-column: 1 / 5; aspect-ratio: 1; }
.gallery .g5 { grid-column: 5 / 9; aspect-ratio: 1; }
.gallery .g6 { grid-column: 9 / 13; aspect-ratio: 1; }
.gallery__cap { grid-column: 1 / -1; font-size: var(--t-micro); color: var(--ink-light-soft); }
@media (max-width: 700px) { .gallery .g1, .gallery .g2, .gallery .g3 { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; } .gallery .g4, .gallery .g5, .gallery .g6 { grid-column: span 4; } }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* Kundenstimmen-Seite */
.tgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 4rem); margin-top: clamp(3rem, 6vw, 5rem); }
.tcard blockquote { margin-top: 1.3rem; }
.tcard blockquote p { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.6rem); line-height: 1.3; }
.tcard blockquote p + p { margin-top: 0.8rem; font-family: var(--sc-font-text); font-size: 1rem; line-height: 1.6; color: var(--ink-light-soft); }
@media (max-width: 800px) { .tgrid { grid-template-columns: 1fr; } }

/* Steuer-Seite */
.bigcalc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 2px solid var(--navy); }
.bigcalc > div { padding: 1.4rem 1.2rem 0 0; }
.bigcalc > div + div { padding-left: 1.2rem; border-left: 1px solid var(--sc-hairline); }
.bigcalc dt { font-size: var(--t-small); color: var(--ink-dark-soft); }
.bigcalc dd { margin-top: 0.4rem; font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.8rem, 1.3rem + 1.8vw, 3rem); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.bigcalc > div:last-child dd { color: var(--bronze); }
@media (max-width: 800px) { .bigcalc { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bigcalc > div:nth-child(3) { padding-left: 0; border-left: 0; } .bigcalc > div:nth-child(n+3) { margin-top: 1.4rem; border-top: 1px solid var(--sc-hairline); } }
.levers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 4rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.lever { padding: 1.8rem 0 2.2rem; border-top: 1px solid rgba(244, 239, 230, 0.16); }
.lever__tag { font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--champ); }
.lever h3 { margin-top: 0.6rem; font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.9rem); line-height: 1.2; }
.lever p { margin-top: 0.8rem; color: var(--ink-light-soft); }
@media (max-width: 800px) { .levers { grid-template-columns: 1fr; } }

.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); margin-top: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.calc__form { display: grid; gap: 1.2rem; }
.calc__form .field output { font-weight: 600; font-variant-numeric: tabular-nums; }
.calc__form input[type="range"] { width: 100%; accent-color: var(--navy); min-height: 32px; }
.calc__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.seg { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: inline-flex; min-height: 44px; align-items: center; padding: 0.5rem 0.9rem; border: 1px solid rgba(19, 32, 51, 0.28); border-radius: var(--radius); font-size: var(--t-small); font-weight: 600; cursor: pointer; transition: background-color 160ms var(--ease), color 160ms var(--ease); }
.seg input:checked + span { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.seg input:focus-visible + span { outline: 2px solid var(--bronze); outline-offset: 2px; }
.calc__out { position: sticky; top: calc(var(--bar-h) + 2rem); padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--navy); color: var(--ink-light); border-radius: var(--radius); box-shadow: var(--sc-e3); }
.calc__out dl { display: grid; gap: 0; }
.calc__out dl div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(244, 239, 230, 0.12); font-size: 0.98rem; }
.calc__out dt { color: var(--ink-light-soft); }
.calc__out dd { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.calc__big { margin-bottom: 1.2rem; }
.calc__big p { font-size: var(--t-small); color: var(--ink-light-soft); }
.calc__big strong { display: block; margin-top: 0.3rem; font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(2.6rem, 2rem + 2.5vw, 4rem); line-height: 1; color: var(--champ); font-variant-numeric: lining-nums tabular-nums; }
.calc__note { margin-top: 1.2rem; font-size: 0.78rem; line-height: 1.55; color: var(--ink-light-soft); }
.calc__out .btn { margin-top: 1.4rem; width: 100%; }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } .calc__out { position: static; } }

/* Über uns */
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.values article { padding-top: 1.2rem; border-top: 2px solid var(--navy); }
.values h3 { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.45rem; line-height: 1.2; }
.values p { margin-top: 0.7rem; color: var(--ink-dark-soft); }
@media (max-width: 900px) { .values { grid-template-columns: 1fr; } }
.people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.people .person figcaption { font-size: 0.95rem; }
.people .person span { display: block; margin-top: 0.4rem; font-size: var(--t-micro); letter-spacing: 0.05em; text-transform: uppercase; color: var(--bronze); }
@media (max-width: 900px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Chancen & Risiken */
.cr { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.cr__head { position: sticky; top: calc(var(--bar-h) + 2.5rem); }
.cr__head p { margin-top: 1.2rem; color: var(--ink-dark-soft); }
.cr__list article { padding: 1.8rem 0 2rem; border-top: 1px solid rgba(19, 32, 51, 0.2); }
.cr__list h3 { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem); line-height: 1.2; }
.cr__list p { margin-top: 0.7rem; color: var(--ink-dark-soft); }
.cr__list .risk__do { margin-top: 1rem; padding-left: 1rem; border-left: 2px solid var(--bronze); }
.g-navy .cr__head p, .g-navy .cr__list p { color: var(--ink-light-soft); }
.g-navy .cr__list .risk__do { color: var(--ink-light) !important; border-left-color: var(--champ); }
.g-navy .cr__list article { border-top-color: rgba(244, 239, 230, 0.16); }
@media (max-width: 900px) { .cr { grid-template-columns: 1fr; } .cr__head { position: static; } }

/* Erstgespräch */
.next { display: grid; gap: 1.4rem; margin-top: 2rem; counter-reset: n; }
.next li { counter-increment: n; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 1rem; }
.next li::before { content: counter(n); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid rgba(205, 176, 122, 0.6); color: var(--champ); font-family: var(--sc-font-display); font-weight: 600; font-size: 1.1rem; }
.next strong { display: block; font-weight: 600; }
.next p { color: var(--ink-light-soft); font-size: 0.98rem; }
.host { display: flex; gap: 1rem; align-items: center; margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid rgba(244, 239, 230, 0.12); }
.host img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; }
.host p { font-size: var(--t-small); color: var(--ink-light-soft); }
.host strong { display: block; color: var(--ink-light); font-size: 1rem; }

.legal-todo { padding: 0.15em 0.4em; background: #f2dcc0; color: #5b3a12; border-radius: 2px; font-weight: 600; }
.obj__gal figure:nth-child(2):nth-last-child(2) { grid-column: 1 / -1; aspect-ratio: 16 / 7; }

/* Fortschrittslinie, mobile Aktionsleiste, Hero-Auftritt */
.mcta { display: none; }
@media (max-width: 860px) {
  .mcta { position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--sc-z-chrome) - 2); display: flex; gap: 0.6rem; padding: 0.7rem var(--sc-gutter) calc(0.7rem + env(safe-area-inset-bottom)); background: rgba(8, 18, 31, 0.96); border-top: 1px solid rgba(244, 239, 230, 0.1); transform: translateY(110%); transition: transform 320ms var(--ease); }
  .mcta.is-on { transform: none; }
  .mcta .btn { flex: 1; }
  .mcta__tel { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(244, 239, 230, 0.35); border-radius: var(--radius); color: var(--ink-light); }
  .mcta__tel svg { width: 22px; height: 22px; }
  .foot { padding-bottom: 6.5rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero h1 { animation: hero-wipe 1300ms var(--ease) 150ms both; }
  .hero__sub { animation: hero-rise 900ms var(--ease) 650ms both; }
  .hero__actions { animation: hero-rise 900ms var(--ease) 820ms both; }
  .hero__caption, .hero__kicker { animation: hero-fade 1200ms var(--ease) 900ms both; }
  .hero__media img { animation: hero-settle 2600ms var(--ease) both; }
  .bar { animation: hero-fade 900ms var(--ease) 300ms both; }
}
@keyframes hero-wipe { from { clip-path: inset(0 0 100% 0); transform: translateY(18px); } to { clip-path: inset(-10% -5% -20% -5%); transform: none; } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes hero-fade { from { opacity: 0; } }
@keyframes hero-settle { from { filter: brightness(0.55); scale: 1.08; } }

/* Prüfung: fünf Kriterien, oben zwei Fotos fertiger Häuser, darunter Jonas klein als Karte (Dominic 05.11.2026) */
.check__media--v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: clamp(0.8rem, 1.4vw, 1.2rem); align-items: start; }
.check__m2 { margin: 0; overflow: hidden; border-radius: 2px; aspect-ratio: 4 / 5; box-shadow: var(--sc-e2); }
.check__m2 img { width: 100%; height: 100%; object-fit: cover; }
.check__m2--b { margin-top: clamp(2rem, 4vw, 3.5rem); }
.check__media--v2 .check__cap { grid-column: 1 / -1; margin-top: 0.2rem; }
.check__person { grid-column: 1 / -1; position: relative; margin: clamp(0.6rem, 1.5vw, 1.2rem) 0 0; overflow: hidden; background-color: var(--navy); background-image: radial-gradient(90% 140% at 0% 100%, rgba(201, 169, 110, 0.16), transparent 70%); border-radius: 3px; box-shadow: 0 34px 64px -36px rgba(12, 26, 44, 0.75); color: var(--ink-light-soft); }
.check__person::before { content: ""; position: absolute; z-index: 1; inset: 0 0 auto 0; height: 3px; background: var(--gold-grad); }
.check__person-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.check__person-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.check__person figcaption { display: grid; gap: 0.15rem; padding: clamp(0.9rem, 1.5vw, 1.2rem) clamp(1rem, 1.8vw, 1.4rem); font-size: var(--t-small); line-height: 1.4; }
.check__person-k { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--champ); }
.check__person-k b { font-family: var(--sc-font-display); font-size: 1.05rem; letter-spacing: 0; }
.check__person strong { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.2; color: var(--ink-light); }
.check__media--v2 .check__m2 { aspect-ratio: 5 / 4; }
@media (max-height: 860px) and (min-width: 901px) { .check__media--v2 { position: static; } }
.check__media--v2 .check__m2--b { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 900px) { .check__media--v2 { order: 0; max-width: 34rem; } }
@media (max-width: 600px) { .check__person-img { aspect-ratio: 4 / 3; } }
/* Zahlenleiste mit drei Werten (Beratungsgespräche entfernt, Dominic 05.11.2026) */
.figures:has(> .figure:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .figures:has(> .figure:nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .figures:has(> .figure:nth-child(3):last-child) > .figure:last-child { grid-column: 1 / -1; } }

/* site-plus.css */
/* ImmoGroup · site-plus.css · Ergänzungen der Website (seit 28.10.2026). Lädt nach site.css, site.css selbst bleibt unverändert.
   Inhalt: Fragebogen in der Formularkarte (derselbe wie auf den Landingpages, _src/lp/partials/quiz.html), Menü. */

/* ------------------------------------------------ Fragebogen in der Karte -- */
.lead--quiz { gap: 0; }
.lead__sub { margin-top: 0.35rem; font-size: var(--t-small); color: var(--ink-dark-soft); }
.lead--quiz .quiz { position: relative; margin-top: 1.1rem; }

/* Fortschritt: „Frage 1 von 4“ sichtbar, darunter ein feiner Balken */
.lead--quiz .quiz__progress { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.25rem; }
.lead--quiz .quiz__count.sr { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap; flex: none; font: 600 0.72rem/1 var(--sc-font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze); }
.lead--quiz .quiz__bar { flex: 1; height: 3px; overflow: hidden; border-radius: 2px; background: rgba(19, 32, 51, 0.12); }
.lead--quiz .quiz__bar i { display: block; width: 100%; height: 100%; background: var(--gold-grad); transform: scaleX(0.2); transform-origin: left; transition: transform 520ms var(--ease); }

.lead--quiz .quiz__step { min-width: 0; margin: 0; padding: 0; border: 0; }
.lead--quiz .quiz__step:not(.is-on) { display: none; }
.lead--quiz .quiz__step.is-on { animation: q-in 320ms var(--ease) both; }
@keyframes q-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lead--quiz .quiz__step.is-on { animation: none; } }
.lead--quiz legend { width: 100%; margin-bottom: 1rem; padding: 0; font: 600 clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem)/1.25 var(--sc-font-display); letter-spacing: -0.015em; text-wrap: balance; color: var(--navy); }

/* Antworten: breite Flächen mit Bild oder Symbol */
.lead--quiz .opts { display: grid; gap: 0.6rem; }
.lead--quiz .opt { position: relative; display: block; cursor: pointer; }
.lead--quiz .opt input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lead--quiz .opt span { display: flex; align-items: center; gap: 0.9rem; min-height: 62px; padding: 0.55rem 1rem 0.55rem 0.6rem; border: 1px solid rgba(19, 32, 51, 0.14); border-radius: var(--radius); background: #fff; font-weight: 500; line-height: 1.3; color: var(--ink-dark); box-shadow: 0 1px 2px rgba(12, 26, 44, 0.04), 0 12px 22px -20px rgba(12, 26, 44, 0.45); transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background-color 160ms var(--ease), transform 120ms var(--ease); }
.lead--quiz .opt__img { flex: none; width: 46px; height: 46px; object-fit: cover; border-radius: 2px; }
.lead--quiz .opt__ico { flex: none; width: 46px; height: 26px; fill: none; stroke: var(--bronze); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .lead--quiz .opt:hover span { border-color: var(--champ); box-shadow: 0 0 0 1px var(--champ), 0 16px 26px -20px rgba(12, 26, 44, 0.5); } }
.lead--quiz .opt:active span { transform: scale(0.99); }
.lead--quiz .opt input:focus-visible + span { outline: 2px solid var(--bronze); outline-offset: 2px; }
.lead--quiz .opt input:checked + span { border-color: var(--navy); background: var(--navy); color: var(--paper); }
.lead--quiz .opt input:checked + span .opt__ico { stroke: var(--champ-hi); }

/* Zurück und Weiter */
.lead--quiz .quiz__nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 0.4rem; }
.lead--quiz .quiz__back, .lead--quiz .quiz__next { min-height: 44px; padding: 0.4rem 0; border: 0; background: none; cursor: pointer; font: 600 0.875rem/1 var(--sc-font-text); color: var(--ink-dark-soft); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: rgba(19, 32, 51, 0.3); }
.lead--quiz .quiz__next { margin-left: auto; color: var(--ink-dark); }
.lead--quiz .quiz__back[hidden], .lead--quiz .quiz__next[hidden] { display: none; }

/* Kontaktdaten: ohne zweite Karte und ohne Kundenstimme, die Seite zeigt genug Stimmen */
.lead--quiz .quiz__card { padding: 0; background: none; box-shadow: none; }
.lead--quiz .quiz__ctitle, .lead--quiz .quiz__proof { display: none; }
.lead--quiz .quiz__why { margin: 0 0 0.25rem; font-size: var(--t-small); line-height: 1.5; color: var(--ink-dark-soft); }
.lead--quiz .field--salut { margin-top: 0.6rem; }
.lead--quiz .quiz__row--salut { display: flex; gap: 0.6rem; }
.lead--quiz .chip { position: relative; cursor: pointer; }
.lead--quiz .chip input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lead--quiz .chip span { display: grid; place-items: center; min-width: 5rem; min-height: 46px; padding: 0 1rem; border: 1px solid rgba(19, 32, 51, 0.22); border-radius: var(--radius); background: #fff; font-weight: 600; font-size: var(--t-small); }
.lead--quiz .chip input:checked + span { border-color: var(--navy); background: var(--navy); color: var(--paper); }
.lead--quiz .chip input:focus-visible + span { outline: 2px solid var(--bronze); outline-offset: 2px; }
.lead--quiz .field--salut.is-invalid .chip span { border-color: #9b2f22; }
.lead--quiz .field { margin-top: 0.7rem; }
.lead--quiz .field input { min-height: 52px; background: #fff; }
.lead--quiz .field input::placeholder { color: #8a93a1; }
.lead--quiz .field.is-warn input { border-color: #9b2f22; }
.lead--quiz .field--ico { position: relative; }
.lead--quiz .field--ico svg { position: absolute; left: 0.95rem; top: 26px; width: 1.2rem; height: 1.2rem; transform: translateY(-50%); fill: none; stroke: var(--ink-dark-soft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.lead--quiz .field--ico input { padding-left: 2.8rem; }
.lead--quiz .tick { display: flex; align-items: flex-start; gap: 0.65rem; margin-top: 1rem; font-size: 0.875rem; line-height: 1.45; color: var(--ink-dark-soft); cursor: pointer; }
.lead--quiz .tick input { flex: none; width: 1.2rem; height: 1.2rem; margin: 0.1rem 0 0; accent-color: var(--navy); }
.lead--quiz .quiz__send { margin-top: 1.1rem; background: var(--navy); color: var(--paper); box-shadow: 0 10px 24px -14px rgba(13, 27, 46, 0.6); }
@media (hover: hover) and (pointer: fine) { .lead--quiz .quiz__send:hover { background: var(--navy-2); } }
.lead--quiz .quiz__legal { margin-top: 0.75rem; font-size: 0.8125rem; line-height: 1.45; color: var(--ink-dark-soft); }
.lead--quiz .quiz__legal a { color: var(--ink-dark); }
.lead--quiz .quiz.is-done .quiz__progress, .lead--quiz .quiz.is-done .quiz__nav { display: none; }
.lead--quiz .quiz__ok { outline: none; }
.lead--quiz .quiz__ok[hidden] { display: none; }
.lead--quiz .quiz__ok-title { font: 600 1.5rem/1.2 var(--sc-font-display); }

/* ------------------------------------------------------------------ Menü -- */
/* Sieben Punkte (mit Ratgeber und Potenzialrechner): Telefonnummer früher ausblenden, Burger schon unter 1320 px */
@media (max-width: 1560px) { .bar__tel { display: none; } }
@media (max-width: 1320px) {
  .bar__nav, .bar .btn--bar { display: none; }
  .bar__menu { display: grid; place-items: center; }
  :root { --bar-h: 68px; }
}

/* ------------------------------------------ Objekte: sechs statt drei Karten -- */
/* Desktop-Lauf: Karten blenden nacheinander auf. Die Formel in site.css war auf drei Karten gerechnet
   (die letzte wäre bei sechs Karten nie voll sichtbar), daher doppelte Schrittweite. */
@media (prefers-reduced-motion: no-preference) {
  .dossier { opacity: calc(0.55 + 0.45 * min(1, max(0, (var(--sc-p, 0) * 8 - var(--i, 0) * 0.8) + 0.4))); }
}

/* Link „Cookie-Einstellungen“ im Fuß: öffnet den HubSpot-Cookie-Banner erneut */
.cookie-link { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }

/* =========================================================== Premium-Schicht (Dominic, 29.10.2026) ==
   Ziel: hochwertiger, ohne verspielt zu werden. Drei Bausteine:
   1. Buttons wie gebürstetes Champagner-Metall (Verlauf, Lichtkante oben, feiner Rand) mit einem
      Lichtstreif, der langsam darüber zieht (alle 7,5 s, beim Darüberfahren sofort).
   2. Hintergründe mit Tiefe: Lichtinseln, seitliche Abschattung und feines Korn statt Rasterlinien.
      Die oberen 160 px jedes Kapitels laufen in den reinen Grundton aus, damit der Giebel nahtlos ansetzt.
   3. Übergänge: Giebel mit goldener Dachkante; wo ein helles Kapitel unter einem dunklen beginnt,
      eine goldene Haarlinie und ein weicher Schatten, als läge das dunkle Blatt darüber. */
:root {
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.22 0 0 0 -0.07'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  /* Satin-Metall: helle obere Hälfte, an der Mitte eine weiche Lichtkante, darunter tiefer (wirkt glänzend statt matt) */
  --metal: linear-gradient(180deg, #f8ebc9 0%, #ead3a0 46%, #d2b276 54%, #c09c62 82%, #b08a52 100%);
  --metal-hi: linear-gradient(180deg, #fcf2d8 0%, #f0dcae 46%, #dbbd83 54%, #c9a76c 82%, #b9945b 100%);
  --ink-metal: linear-gradient(180deg, #223a58 0%, #13253d 50%, #0a1727 100%);
  --ink-metal-hi: linear-gradient(180deg, #2b4767 0%, #18304d 50%, #0e1e33 100%);
}

/* ---------------------------------------------------------------- Buttons -- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid; border-color: #f2e2b9 #c4a066 #9b7944;
  background: var(--metal); color: #0b1626;
  text-shadow: 0 1px 0 rgba(255, 246, 224, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(110, 80, 36, 0.3), 0 1px 1px rgba(0, 0, 0, 0.22), 0 18px 36px -18px rgba(214, 182, 124, 0.7);
  transition: transform 180ms var(--ease), box-shadow 220ms var(--ease), filter 220ms var(--ease);
}
.btn::before {
  content: ""; position: absolute; z-index: -1; top: -2px; bottom: -2px; left: -55%; width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg); pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .btn::before { animation: btn-sheen 7.5s var(--ease) 2s infinite; }
  .bar .btn--bar::before { animation: none; }
}
@keyframes btn-sheen { 0%, 82% { transform: skewX(-20deg) translateX(0); } 100% { transform: skewX(-20deg) translateX(460%); } }
@keyframes btn-sheen-now { from { transform: skewX(-20deg) translateX(0); } to { transform: skewX(-20deg) translateX(460%); } }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--metal-hi); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(110, 80, 36, 0.3), 0 2px 3px rgba(0, 0, 0, 0.2), 0 24px 44px -18px rgba(214, 182, 124, 0.85); }
  .btn:hover::before { animation: btn-sheen-now 950ms var(--ease) both; }
}
.btn:active { transform: translateY(0); filter: brightness(0.97); }

/* Auf Papier: tiefes Navy mit Goldrand, Pfeil in Champagner */
.g-paper .btn, .g-paper2 .btn, .g-stone .btn {
  border-color: rgba(222, 196, 143, 0.8) rgba(201, 169, 110, 0.5) rgba(150, 118, 66, 0.55);
  background: var(--ink-metal); color: var(--paper); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 1px rgba(0, 0, 0, 0.2), 0 18px 32px -18px rgba(12, 26, 44, 0.75);
}
.g-paper .btn::after, .g-paper2 .btn::after, .g-stone .btn::after { background: var(--champ-hi); }
.g-paper .btn::before, .g-paper2 .btn::before, .g-stone .btn::before { background: linear-gradient(100deg, rgba(230, 210, 168, 0) 0%, rgba(230, 210, 168, 0.38) 50%, rgba(230, 210, 168, 0) 100%); }
@media (hover: hover) and (pointer: fine) {
  .g-paper .btn:hover, .g-paper2 .btn:hover, .g-stone .btn:hover { background: var(--ink-metal-hi); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 3px rgba(0, 0, 0, 0.2), 0 24px 40px -18px rgba(12, 26, 44, 0.8); }
}

/* ----------------------------------------------------------- Hintergründe -- */
.g-navy {
  background-color: var(--navy);
  background-image:
    var(--grain),
    linear-gradient(180deg, var(--navy) 0, rgba(12, 26, 44, 0) 160px),
    radial-gradient(1100px 680px at 10% 8%, rgba(214, 182, 124, 0.13), transparent 70%),
    radial-gradient(1000px 760px at 100% 100%, rgba(38, 72, 122, 0.42), transparent 70%),
    linear-gradient(90deg, rgba(2, 7, 14, 0.38), rgba(2, 7, 14, 0) 22%, rgba(2, 7, 14, 0) 78%, rgba(2, 7, 14, 0.38));
  background-size: 240px 240px, auto, auto, auto, auto;
}
.g-deep {
  background-color: var(--navy-deep);
  background-image:
    var(--grain),
    linear-gradient(180deg, var(--navy-deep) 0, rgba(7, 17, 29, 0) 160px),
    radial-gradient(1200px 620px at 50% 12%, rgba(214, 182, 124, 0.09), transparent 70%),
    radial-gradient(900px 700px at 0% 70%, rgba(36, 66, 108, 0.32), transparent 70%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, 0.4));
  background-size: 240px 240px, auto, auto, auto, auto;
}
.g-paper, .g-paper2 {
  background-image:
    url(https://26761261.fs1.hubspotusercontent-eu1.net/hubfs/26761261/immogroup-lp/img/noise-paper.png),
    linear-gradient(180deg, var(--paper) 0, rgba(246, 242, 235, 0) 160px),
    radial-gradient(1200px 700px at 50% 10%, rgba(255, 255, 255, 0.75), transparent 70%),
    radial-gradient(900px 700px at 100% 100%, rgba(205, 176, 122, 0.16), transparent 70%),
    linear-gradient(90deg, rgba(122, 92, 44, 0.07), rgba(122, 92, 44, 0) 20%, rgba(122, 92, 44, 0) 80%, rgba(122, 92, 44, 0.07));
}
.g-paper2 { background-color: var(--paper-2); }
.g-stone {
  background-image:
    url(https://26761261.fs1.hubspotusercontent-eu1.net/hubfs/26761261/immogroup-lp/img/noise-stone.png),
    linear-gradient(180deg, var(--stone) 0, rgba(230, 220, 203, 0) 160px),
    radial-gradient(1200px 760px at 15% 12%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(900px 700px at 100% 100%, rgba(150, 118, 66, 0.14), transparent 70%),
    linear-gradient(90deg, rgba(90, 68, 34, 0.08), rgba(90, 68, 34, 0) 20%, rgba(90, 68, 34, 0) 80%, rgba(90, 68, 34, 0.08));
}

/* ------------------------------------------------------------- Übergänge -- */
/* Schnittkanten (Dominic, 29.10.2026, nach den Vorbildern sogno-mio / eas-gmbh): jedes Kapitel nach dem
   ersten schiebt sich schräg über das vorige, abwechselnd links und rechts angeschnitten. An der Kante
   läuft eine goldene Lichtlinie, die zu den Enden ausblendet. Alles statisch: nichts hängt am Scrollen,
   deshalb auch auf dem iPhone ruhig. site.js vergibt .schnitt-l/-r und setzt <span class="fuge">.
   Ersetzt die Giebel (das Dach wäre vom clip-path ohnehin abgeschnitten). */
:root { --cut: clamp(28px, 4.4vw, 72px); }
@media (max-width: 700px) { :root { --cut: clamp(18px, 5.5vw, 34px); } }
main > .schnitt { position: relative; z-index: 1; margin-top: calc(var(--cut) * -1); }
/* Das Abschneiden übernimmt der clip-path (er schneidet am äußeren Rand). overflow: clip schnitte schon
   am Innenrand und damit die Lichtlinie im oberen Rand weg (Zahlen, Gründer). */
main > .schnitt { overflow: visible; }
/* Platz für die Schräge: ein durchsichtiger Rand oben (der Hintergrund läuft darunter weiter), so bleibt
   das eigene Innenmaß jedes Kapitels unangetastet. Gepinnte Kapitel brauchen ihn nicht, ihre Bühne hat
   oben schon Luft für die Kopfleiste. */
main > .schnitt:not(.sc-act--pinned) { border-top: var(--cut) solid transparent; }
.schnitt-l { clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); }
.schnitt-r { clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 100%); }
main > .gable, main > .proof { z-index: 1; }
.schnitt.gable::before { display: none; }

/* Lichtlinie: die 50-%-Linie eines Verlaufs „to bottom right“ ist genau die Diagonale der Box
   (unten links nach oben rechts), „to bottom left“ die andere. Hell ist die Linie, darunter ein kurzer
   Nachschein ins Kapitel hinein; die Maske blendet beide Enden aus, der Schatten lässt sie leuchten. */
.fuge {
  --c: 232, 210, 164;
  position: absolute; z-index: 30; left: 0; right: 0; top: 0; height: var(--cut); pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 38%, #000 62%, transparent 98%);
  mask-image: linear-gradient(90deg, transparent 2%, #000 38%, #000 62%, transparent 98%);
  filter: drop-shadow(0 0 5px rgba(var(--c), 0.55));
}
.schnitt-l > .fuge { background: linear-gradient(to bottom right, transparent calc(50% - 0.5px), rgba(var(--c), 1) calc(50% + 0.5px), rgba(var(--c), 0.9) calc(50% + 2.2px), rgba(var(--c), 0.22) calc(50% + 4px), transparent calc(50% + 16px)); }
.schnitt-r > .fuge { background: linear-gradient(to bottom left, transparent calc(50% - 0.5px), rgba(var(--c), 1) calc(50% + 0.5px), rgba(var(--c), 0.9) calc(50% + 2.2px), rgba(var(--c), 0.22) calc(50% + 4px), transparent calc(50% + 16px)); }
/* Ohne Pin sitzt die Schräge im oberen Rand; absolute Kinder beginnen erst unter dem Rand. */
main > .schnitt:not(.sc-act--pinned) > .fuge { top: calc(var(--cut) * -1); }
:is(.g-paper, .g-paper2, .g-stone) > .fuge { --c: 184, 146, 86; filter: drop-shadow(0 0 4px rgba(var(--c), 0.35)); }

/* Nahtlose Kapitel (Dominic, 29.10.2026): Das Haus endet in der Nacht, 25 Jahre wächst ohne Kante daraus
   hervor (zwei fast gleiche Dunkeltöne mit Schnitt dazwischen wirkten wie ein Fehler). Dafür tragen beide
   Flächen dasselbe Korn, dieselbe Seitenabschattung, und der blaue Schein am Fuß der Bühne läuft oben in
   25 Jahre weiter. */
.landlord__stage::before {
  background-image:
    var(--grain),
    radial-gradient(80% 50% at 50% 100%, rgba(40, 70, 110, 0.25), transparent 70%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, 0.4));
  background-size: 240px 240px, auto, auto;
}
.years.g-deep {
  background-image:
    var(--grain),
    radial-gradient(80vw 50vh at 50% 0, rgba(40, 70, 110, 0.25), transparent 70%),
    radial-gradient(1200px 620px at 50% 30%, rgba(214, 182, 124, 0.08), transparent 70%),
    radial-gradient(900px 700px at 0% 70%, rgba(36, 66, 108, 0.32), transparent 70%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, 0.4));
  background-size: 240px 240px, auto, auto, auto, auto;
}
.years-after.g-deep {
  background-image:
    var(--grain),
    linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, 0.4));
  background-size: 240px 240px, auto;
}

/* Objekte (Desktop-Querlauf): unten Platz für die Schräge des nächsten Kapitels, sonst schneidet sie
   am Ende des Pins die Kartenfüße an. */
@media (min-width: 861px) {
  .objects__stage { padding-bottom: calc(var(--cut) + 1.5rem); }
}

/* Jonas vor dem Logo-Dach (Dominic, 29.10.2026, wie auf den Landingpages): das freigestellte Bild steht
   frei auf dem Kapitelgrund, ohne Bogen, Rahmen und Plakette. */
.portrait--logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.35)); }
.portrait--logo .portrait__plate { margin-top: clamp(1rem, 2vw, 1.6rem); }
.founder__portrait--logo { aspect-ratio: auto; overflow: visible; background: none; box-shadow: none; }
.founder__portrait--logo img { height: auto; object-fit: contain; }

/* Fallstudien (Dominic, 29.10.2026): keine weißen Kästen mehr. Die Thumbnails tragen Aussage, Beruf und
   Namen selbst (gebaut mit _tools/thumbs/make.py); darunter steht der Text frei auf dem Steingrund.
   Abspielknopf und Länge sitzen unten links, wo das Thumbnail dunkel und leer ist. */
.feature, .case { background: none; border: 0; box-shadow: none; padding: 0; }
.feature { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); padding-right: 0; }
.case::before { display: none; }
.feature__media, .case__media, .vposter { border-radius: 6px; background: #08131f; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 34px 60px -34px rgba(12, 26, 44, 0.75), 0 0 0 1px rgba(150, 118, 66, 0.28); transition: transform 400ms var(--ease), box-shadow 400ms var(--ease); }
.feature__media::after, .case__media::after { background: none; box-shadow: inset 0 0 0 1px rgba(230, 210, 168, 0.12); border-radius: inherit; }
.vposter img { opacity: 1; }
.case__play, .vposter__play { left: auto; right: clamp(0.7rem, 2.2%, 1.3rem); top: auto; bottom: clamp(0.7rem, 3.5%, 1.3rem); margin: 0; width: 44px; height: 44px; background: rgba(214, 182, 124, 0.95); border-color: rgba(255, 240, 205, 0.9); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.6); }
.case__play::before, .vposter__play::before { background: var(--navy); width: 11px; height: 13px; }
.case__play--lg { width: 58px; height: 58px; margin: 0; }
.case__play--lg::before { width: 15px; height: 18px; }
.case__len, .vposter__len { right: calc(clamp(0.7rem, 2.2%, 1.3rem) + 44px + 0.5rem); bottom: calc(clamp(0.7rem, 3.5%, 1.3rem) + 11px); background: rgba(8, 19, 31, 0.72); border: 1px solid rgba(230, 210, 168, 0.3); color: #f2e6cc; }
.case__play--lg + .case__len { right: calc(clamp(0.7rem, 2.2%, 1.3rem) + 58px + 0.6rem); bottom: calc(clamp(0.7rem, 3.5%, 1.3rem) + 17px); }
@media (max-width: 640px) {
  .case__play--lg { width: 46px; height: 46px; }
  .case__play--lg + .case__len { right: calc(clamp(0.7rem, 2.2%, 1.3rem) + 46px + 0.5rem); bottom: calc(clamp(0.7rem, 3.5%, 1.3rem) + 12px); }
}
@media (hover: hover) and (pointer: fine) {
  .feature:hover .feature__media, .case:hover .case__media, .vposter:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 44px 70px -34px rgba(12, 26, 44, 0.85), 0 0 0 1px rgba(184, 146, 86, 0.6); }
  .feature__media:hover img, .case:hover .case__media img, .vposter:hover img { transform: scale(1.025); }
  .feature__media:hover .case__play, .case:hover .case__play, .vposter:hover .vposter__play { background: #f3e2bb; transform: scale(1.06); }
  .case:hover { transform: none; box-shadow: none; }
}
.case .case__no { margin: 1.25rem 0 0; }
.case__q { margin: 0.6rem 0 0; }
.case__q p { font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.22rem); color: var(--ink-dark); }
.case .case__who { margin: 1rem 0 0; padding-top: 0.9rem; border-top: 1px solid rgba(122, 92, 44, 0.22); }
.cases { gap: clamp(2.2rem, 4vw, 3.4rem) clamp(1.25rem, 2.4vw, 2.2rem); }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } .feature__text { padding: 0.2rem 0 0; } }

/* Haus als Rendering (Dominic, 29.10.2026: „hochwertiger, realistischer“). Gebaut mit _tools/house/make_house.py.
   Beim Hereinscrollen zeichnet sich zuerst die Strichzeichnung, dann wächst darunter das gerenderte Haus
   (Putz, Dach, Glas, Baum) heraus und die Linien treten zurück. Nachts legt sich die Dämmerung nur über das
   Haus, Fenster und Eingangslampen gehen nacheinander an, Sterne und ein Mondhof erscheinen. */
.house { --rnd: clamp(0, calc((var(--draw, 0) - 0.5) * 2.6), 1); }
.house__render, .house__marks { opacity: var(--rnd); }
.house__draw { opacity: calc(1 - var(--rnd) * 0.88); transition: opacity 900ms var(--ease-io); }
.house__draw path { stroke-width: 1.6; }
.house__draw .house__wall, .house__draw .house__roof { stroke-width: 2; }
.house__marks rect { fill: transparent; transition: fill 600ms var(--ease-io); }
.landlord__stage[data-step="1"] .house__marks [data-w="b"], .landlord__stage[data-step="2"] .house__marks [data-w="b"] { fill: url(#hs-shutter); }
.landlord__stage[data-step="1"] .house__marks [data-w="c"] { fill: url(#hatch); fill-opacity: 0.75; }
.landlord__stage[data-step="1"] .house__marks [data-w="d"] { fill: rgba(163, 71, 59, 0.38); }
.house__stars circle { fill: #f6ecd6; opacity: 0; transition: opacity 900ms var(--ease) 600ms; }
.house__halo { opacity: 0; transition: opacity 1400ms var(--ease) 400ms; }
.house__dusk { fill: #0a1626; opacity: 0; transition: opacity 700ms var(--ease-io); }
.house__spill { opacity: 0; transition: opacity 1200ms var(--ease) 900ms; }
.house__glow > * { fill: #ffb85a; opacity: 0; transition: opacity 700ms var(--ease); }
.house__lit .hl { opacity: 0; transition: opacity 260ms var(--ease); }
.landlord__stage[data-step="3"] .house__draw { opacity: 0.4; }
.landlord__stage[data-step="3"] .house__dusk { opacity: 0.8; }
.landlord__stage[data-step="3"] .house__halo, .landlord__stage[data-step="3"] .house__spill { opacity: 1; }
.landlord__stage[data-step="3"] .house__stars circle { opacity: 0.85; animation: hs-twinkle 4.5s ease-in-out calc(var(--t) * -0.7s) infinite; }
.landlord__stage[data-step="3"] .house__glow > * { opacity: 0.5; transition-delay: calc(500ms + var(--k) * 130ms); }
.landlord__stage[data-step="3"] .house__lit .hl { opacity: 1; transition-duration: 380ms; transition-delay: calc(450ms + var(--k) * 130ms); }
@keyframes hs-twinkle { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .landlord__stage[data-step="3"] .house__stars circle { animation: none; } }
.house__lawn { transition: opacity 900ms var(--ease-io); }
.landlord__stage[data-step="3"] .house__lawn { opacity: 0.16; }

/* Fallstudien-Text (Dominic, 29.10.2026: „hochwertiger“). Kopfzeile wie ein Register: Ziffer in Bronze,
   feine Linie, rechts „Video 4:01“ als zweiter Abspielknopf. Zitat mit hängendem Anführungszeichen,
   darunter Name und Beruf als Signatur, ohne Trennlinie. */
.case__no { display: flex; align-items: center; gap: 0.85rem; letter-spacing: 0; text-transform: none; }
.case .case__no { margin: 1.4rem 0 0; }
.feature__text .case__no { margin-bottom: 1.6rem; }
.case__nr { font: 600 1.05rem/1 var(--sc-font-display); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; background: linear-gradient(180deg, #b8935a, #7a5c2c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.case__lbl { font: 600 0.68rem/1 var(--sc-font-text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze); white-space: nowrap; }
.case__rule { flex: 1; min-width: 1.5rem; height: 1px; background: linear-gradient(90deg, rgba(122, 92, 44, 0.5), rgba(122, 92, 44, 0.12)); }
.case__watch { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0; border: 0; background: none; cursor: pointer; font: 600 0.68rem/1 var(--sc-font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dark-soft); transition: color 200ms var(--ease); }
.case__watch::before { content: ""; width: 6px; height: 7px; background: var(--bronze); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.case__watch span { letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--ink-dark); }
.case__watch:hover { color: var(--bronze); }
.case__watch:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; }
.case__q { margin: 0.95rem 0 0; }
.case__q p { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.1rem, 0.98rem + 0.38vw, 1.28rem); line-height: 1.4; letter-spacing: -0.008em; color: var(--ink-dark); text-indent: -0.42em; text-wrap: pretty; }
.feature__text blockquote p { text-indent: -0.42em; letter-spacing: -0.015em; }
.case .case__who, .feature__text .case__who { margin: 1.15rem 0 0; padding: 0; border: 0; font: 600 0.66rem/1.4 var(--sc-font-text); letter-spacing: 0.15em; text-transform: uppercase; color: var(--bronze); }
.case__who b { display: block; margin-bottom: 0.3rem; font: 650 1rem/1.25 var(--sc-font-display); letter-spacing: -0.005em; text-transform: none; color: var(--ink-dark); }
.feature__text .case__who { margin-top: 1.6rem; }
.feature__text .case__who b { font-size: 1.15rem; }

/* Objektkarten veredelt (Dominic, 29.10.2026: „glänzen, schimmern“). Goldener Verlaufsrand, leicht
   gehobene Fläche, über Bild und Rand läuft alle zehn Sekunden ein Lichtstreif (je Karte versetzt).
   Am Desktop folgt ein weicher Lichtschein der Maus (site.js setzt --mx/--my). */
.objects__rail .dossier {
  position: relative; isolation: isolate; border: 1px solid transparent; border-radius: 6px;
  background:
    radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(240, 220, 175, 0.09), transparent 62%) padding-box,
    linear-gradient(165deg, rgba(246, 242, 235, 0.085), rgba(246, 242, 235, 0.02) 36%, rgba(246, 242, 235, 0.035)) padding-box,
    linear-gradient(#11223a, #0d1b2e) padding-box,
    linear-gradient(145deg, rgba(240, 220, 175, 0.7), rgba(201, 169, 110, 0.16) 26%, rgba(201, 169, 110, 0.07) 62%, rgba(240, 220, 175, 0.45)) border-box;
}
@media (min-width: 861px) {
  .objects__rail .dossier { box-shadow: 0 60px 90px -50px rgba(0, 0, 0, 0.9), 0 18px 30px -20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.09); }
}
.objects__rail .dossier::after {
  content: ""; position: absolute; inset: -1px; z-index: 3; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 238, 196, 0.95) 50%, transparent 58%) 100% 0 / 300% 100% no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: dz-edge 10s cubic-bezier(0.45, 0, 0.2, 1) calc(1.2s + var(--i, 0) * 1.3s) infinite;
}
.dossier__img { position: relative; border-radius: 4px; }
.dossier__img::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(240, 220, 175, 0.2), inset 0 -70px 60px -50px rgba(7, 17, 29, 0.55); }
.dossier__img::after {
  content: ""; position: absolute; inset: -10% -40%; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 41%, rgba(255, 246, 225, 0.08) 45%, rgba(255, 248, 232, 0.75) 49.5%, rgba(255, 252, 244, 0.9) 50%, rgba(255, 248, 232, 0.75) 50.5%, rgba(255, 246, 225, 0.08) 55%, transparent 59%);
  mix-blend-mode: soft-light;
  transform: translateX(-75%);
  animation: dz-sheen 10s cubic-bezier(0.45, 0, 0.2, 1) calc(1.2s + var(--i, 0) * 1.3s) infinite;
}
@keyframes dz-sheen { 0% { transform: translateX(-75%); } 16%, 100% { transform: translateX(75%); } }
@keyframes dz-edge { 0% { background-position: 100% 0; } 16%, 100% { background-position: 0% 0; } }
@media (hover: hover) and (pointer: fine) {
  .objects__rail .dossier { transition: transform 500ms var(--ease); }
  .objects__rail .dossier:hover { transform: translateY(-6px); }
  .dossier:hover .dossier__img img { transform: scale(1.045); }
}
.dossier__facts div:nth-child(-n + 2) dd { color: #f3e4c4; }
.dossier__link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: auto 0.6rem 0; padding-top: 1rem;
  border-top: 1px solid rgba(246, 242, 235, 0.1); text-decoration: none; letter-spacing: 0.02em; color: var(--champ-hi);
}
.dossier__facts + .dossier__link { margin-top: auto; }
.dossier__link::after {
  content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(201, 169, 110, 0.55);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23e6d2a8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / 15px no-repeat;
  transition: background-color 250ms var(--ease), transform 250ms var(--ease);
}
.dossier__link:hover::after, .dossier:hover .dossier__link::after {
  background: var(--champ) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230c1a2c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / 15px no-repeat;
  transform: translateX(3px);
}
.dossier__link:hover { color: var(--champ-hi); }
@media (max-width: 860px) {
  .objects__rail .dossier { box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(246, 242, 235, 0.08); }
  .dossier__link { padding-top: 0.7rem; }
  .dossier__link::after { width: 30px; height: 30px; background-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .objects__rail .dossier::after, .dossier__img::after { animation: none; display: none; } }

/* Hero → Zahlen (Dominic, 29.10.2026). Vorher lief das Foto unten in Navy aus und die Schräge lag in
   diesem Dunst: zwei fast gleiche Töne, dazu eine waagerechte Haarlinie und die Goldlinie quer durch den
   Scroll-Hinweis. Jetzt bleibt das Foto bis zur Kante sichtbar, die Schräge schneidet klar ins Bild,
   und der Hinweis steht als feine Linie mit Wort darüber. */
@media (min-width: 861px) {
  .hero__shade { background:
    linear-gradient(90deg, rgba(7, 17, 29, 0.9) 0%, rgba(7, 17, 29, 0.72) 30%, rgba(7, 17, 29, 0.18) 58%, transparent 72%),
    linear-gradient(0deg, rgba(7, 17, 29, 0.42) 0%, rgba(7, 17, 29, 0.12) 22%, transparent 40%),
    linear-gradient(180deg, rgba(7, 17, 29, 0.55) 0%, transparent 20%); }
  .proof.schnitt::before { display: none; }
  .hero__scroll { bottom: calc(var(--cut) + 1.3rem); width: 140px; height: auto; margin-left: -70px; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; border: 0; border-radius: 0; font: 600 0.64rem/1 var(--sc-font-text); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(246, 242, 235, 0.78); text-shadow: 0 1px 12px rgba(7, 17, 29, 0.6); transition: color 250ms var(--ease); }
  .hero__scroll::before { content: "Scrollen"; padding-left: 0.24em; }
  .hero__scroll span { position: relative; left: auto; top: auto; width: 1px; height: 44px; margin: 0; border-radius: 0; background: rgba(246, 242, 235, 0.28); overflow: hidden; animation: none; }
  .hero__scroll span::after { content: ""; position: absolute; left: 0; top: -45%; width: 1px; height: 45%; background: linear-gradient(rgba(230, 210, 168, 0), var(--champ-hi)); animation: drip 1.9s var(--ease-io) infinite; }
  .hero__scroll:hover { color: var(--champ-hi); }
}
/* Verläufe der Kapitel über den Rand der Schräge spannen (sonst endet Korn und Licht an der Oberkante
   des Inhalts und unter der Schräge bleibt ein glatter Streifen mit waagerechter Naht). */
main > .schnitt { background-origin: border-box; }
@media (min-width: 861px) {
  .hero__scroll { padding: 0.9rem 0 0; background: radial-gradient(closest-side, rgba(7, 17, 29, 0.5), rgba(7, 17, 29, 0)); background-size: 100% 60%; background-repeat: no-repeat; }
}
.hero__scroll { text-decoration: none; }

/* Steuervorteile mit Bildern (Dominic, 29.10.2026): echte Fotos aus der Dropbox (Fotos im Büro) und
   Objektbilder statt nur Text. Hero mit Beratungsfoto, jeder Hebel mit passendem Bild, im Abschluss
   die Rechnung am Flipchart. */
.phero--steuer .phero__bg img { object-position: 70% 35%; }
.lever__img { margin: 0 0 1.4rem; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(240, 220, 175, 0.18); }
.lever__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .lever:hover .lever__img img { transform: scale(1.04); } }
.close__photo { margin-top: 2.4rem; max-width: 30rem; }
.close__photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; border-radius: 4px; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(240, 220, 175, 0.2); }
.close__photo figcaption { margin-top: 0.8rem; font-size: var(--t-micro); color: var(--ink-light-soft); }
@media (max-width: 900px) { .close__photo { display: none; } }

/* ------------------------------------------- Abschluss: Knopf zur Anfrage -- */
/* Der Fragebogen liegt nur noch auf erstgespraech.html; hier eine Papierkarte mit drei Schritten und Knopf. */
.lead--cta { gap: 0; align-self: center; border-top: 2px solid transparent; background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--gold-grad) border-box; }
.lead--cta .lead__sub { margin-top: 0.5rem; }
.cta-steps { display: grid; gap: 0; margin: 1.6rem 0 1.5rem; padding: 0; list-style: none; counter-reset: cs; }
.cta-steps li { counter-increment: cs; position: relative; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: 0.95rem; padding: 0.85rem 0; border-top: 1px solid rgba(19, 32, 51, 0.1); }
.cta-steps li:last-child { border-bottom: 1px solid rgba(19, 32, 51, 0.1); }
.cta-steps li::before { content: counter(cs); grid-row: span 2; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid rgba(150, 118, 66, 0.55); color: var(--bronze); font: 600 1rem/1 var(--sc-font-display); }
.cta-steps strong { font-weight: 600; line-height: 1.3; color: var(--navy); }
.cta-steps span { font-size: var(--t-small); line-height: 1.45; color: var(--ink-dark-soft); }
.lead--cta .btn {
  min-height: 58px; margin-top: 0;
  border-color: rgba(222, 196, 143, 0.8) rgba(201, 169, 110, 0.5) rgba(150, 118, 66, 0.55);
  background: var(--ink-metal); color: var(--paper); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 1px rgba(0, 0, 0, 0.2), 0 18px 32px -18px rgba(12, 26, 44, 0.75);
}
.lead--cta .btn::after { background: var(--champ-hi); }
.lead--cta .btn::before { background: linear-gradient(100deg, rgba(230, 210, 168, 0) 0%, rgba(230, 210, 168, 0.38) 50%, rgba(230, 210, 168, 0) 100%); }
@media (hover: hover) and (pointer: fine) {
  .lead--cta .btn:hover { background: var(--ink-metal-hi); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 3px rgba(0, 0, 0, 0.2), 0 24px 40px -18px rgba(12, 26, 44, 0.8); }
}


/* ------------------------------------------------------ Handy-Wischreihe -- */
/* Objekte auf dem Handy (Dominic, 30.10.2026): statt Stapel eine Reihe, die man seitlich wischt, natives
   Scrollen mit Einrasten, daher auf dem iPhone ruhig. Punkte und Hinweis setzt site.js. Alle Karten gleich hoch (stretch), die nächste schaut am Rand hervor. */
@media (max-width: 860px) {
  .objects .objects__rail { padding-inline: 0; }
  .objects .objects__lead, .objects .objects__end { margin-inline: var(--sc-gutter); }
  .objects .objects__stack {
    display: flex; align-items: stretch; gap: 0.85rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--sc-gutter); padding: 0.4rem var(--sc-gutter) 1.2rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .objects .objects__stack::-webkit-scrollbar { display: none; }
  .objects .objects__stack::after { content: ""; flex: 0 0 1px; height: auto; }
  .objects .objects__rail .dossier {
    position: relative; top: auto; flex: 0 0 82%; max-width: 24rem; margin: 0; min-height: 0 !important;
    display: flex; flex-direction: column; scroll-snap-align: start;
  }
  .objects .dossier__link { margin-top: auto; }
  .objects__hint { margin: 0 var(--sc-gutter) 0.6rem; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--champ); }
  .objects__hint::after { content: " →"; }
  .objects__dots { display: flex; justify-content: center; gap: 0.45rem; margin-top: 0.2rem; }
  .objects__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(244, 239, 230, 0.25); transition: background-color 200ms var(--ease), transform 200ms var(--ease); }
  .objects__dots i.is-on { background: var(--champ); transform: scale(1.35); }
}

/* ------------------------------------------------ Zusätzliche Termin-Knöpfe -- */
.phero__cta { margin-top: 1.8rem; }
.years__cta { display: flex; justify-content: center; padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: 1.6rem; }
.steps__lead { display: grid; justify-items: start; gap: 1.3rem; }
.steps__lead p { color: var(--ink-light-soft); max-width: 28rem; }
.cr__img { margin: 2rem 0 0; }
.cr__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 60% 50%; border-radius: 4px; box-shadow: 0 30px 50px -34px rgba(12, 26, 44, 0.55); }
.cr__img figcaption { margin-top: 0.6rem; font-size: 0.75rem; color: var(--ink-dark-soft); }

/* KI-Kennzeichnung (Art. 50 KI-VO): klein, aber lesbar, ohne mit dem Inhalt zu konkurrieren */
.ki-hinweis { position: absolute; z-index: 2; right: var(--sc-gutter); bottom: calc(var(--cut, 0px) + 1rem); margin: 0; font-size: 0.6875rem; letter-spacing: 0.04em; color: rgba(244, 239, 230, 0.6); }
@media (max-width: 860px) { .ki-hinweis { top: calc(var(--bar-h) + 0.4rem); bottom: auto; } }