/* =====================================================================
   Clever Homes — Bühne & Bewegung
   Ruhig und hochwertig: Foto-Hero mit Logo-Rahmen, helle Seitenköpfe,
   sanfte Scroll-Einblendungen, mitlaufende Kapitel, Seitenübergänge.
   Alles Bewegte nur bei prefers-reduced-motion: no-preference.
   ===================================================================== */
:root { --paper: #fafaf9; --ease: cubic-bezier(.2, .7, .2, 1); }

/* Seitenübergänge zwischen Unterseiten (Chromium; andere Browser ignorieren das) */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out .25s ease both; }
  ::view-transition-new(root) { animation: vt-in .45s var(--ease) both; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
}
.site-header { view-transition-name: site-header; }

/* Lesefortschritt nur in Blogartikeln */
.scroll-progress { display: none; }
body.is-article .scroll-progress {
  display: block; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: var(--wine); transform-origin: 0 50%; transform: scaleX(var(--scroll, 0));
}

/* ---------- Startseite: Foto-Hero ---------- */
.hero--photo {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center;
  min-height: min(calc(100svh - var(--header-h)), 860px);
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.hero--photo .hero-bg {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 55%;
  transform: translate3d(0, calc(var(--hx, 0) * 50px), 0) scale(calc(1.04 + var(--hx, 0) * .06));
  transform-origin: 70% 60%;
}
.hero--photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(250, 250, 249, .96) 0%, rgba(250, 250, 249, .9) 32%, rgba(250, 250, 249, .5) 55%, rgba(250, 250, 249, 0) 72%),
    linear-gradient(0deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 16%);
}
@media (min-width: 861px) and (max-width: 1150px) {
  .hero--photo::before { background: linear-gradient(90deg, rgba(250, 250, 249, .96) 0%, rgba(250, 250, 249, .92) 45%, rgba(250, 250, 249, .55) 68%, rgba(250, 250, 249, .1) 85%); }
}
.hero-copy { max-width: 38rem; }
.hero-copy .lead { color: #3d4549; max-width: 33rem; }

/* Logo-Idee: Rahmen umschließt die Headline, unten rechts offen */
.hero-title {
  position: relative; display: inline-block;
  padding: clamp(1.1rem, 2.4vw, 1.9rem) clamp(1.3rem, 2.8vw, 2.3rem) clamp(1.3rem, 2.8vw, 2.2rem);
  margin: 0 0 clamp(1.2rem, 2.5vw, 1.8rem) calc(-1 * clamp(1.3rem, 2.8vw, 2.3rem));
}
.hero-title h1 { margin: 0; }
.hero-title .frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hero-title .frame path { fill: none; stroke: var(--wine); stroke-width: 5; vector-effect: non-scaling-stroke; stroke-linecap: square; }
/* Zeichnen: --len (Pfadlänge in px) setzt site.js, danach wird das Strichmuster entfernt */
@media (prefers-reduced-motion: no-preference) {
  .js-motion .hero-title .frame path[style*="--len"] { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: frame-draw-px 1.5s cubic-bezier(.6, 0, .2, 1) .5s forwards; }
  @keyframes frame-draw-px { to { stroke-dashoffset: 0; } }
}
.hero-vdiv img { background: #fff; padding: 5px 8px; border-radius: 4px; box-sizing: content-box; box-shadow: 0 1px 2px rgba(30, 36, 39, .08); }

.scroll-cue {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  width: 1px; height: 52px; background: linear-gradient(rgba(30, 36, 39, 0), rgba(30, 36, 39, .35)); overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--wine); animation: cue 2.4s cubic-bezier(.6, 0, .3, 1) 3; }
  @keyframes cue { to { top: 110%; } }
}
@media (max-width: 860px) {
  .hero--photo { min-height: 0; padding-block: 2.5rem 0; display: flex; flex-direction: column; align-items: stretch; }
  .hero--photo::before { display: none; }
  .hero--photo .wrap { order: 1; }
  .hero--photo .hero-bg { position: relative; order: 2; inset: auto; height: auto; aspect-ratio: 4 / 3; margin-top: 2.5rem; transform: none; object-position: 72% 60%; }
  .hero-title { margin-left: 0; }
  .hero-copy .btn-row { flex-wrap: wrap; }
  .hero-copy .btn-row .btn { flex: 1 1 auto; padding-inline: .75rem; }
  .scroll-cue { display: none; }
}

/* ---------- Unterseiten: heller Seitenkopf mit Rahmen-Motiv ---------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, var(--mist) 0%, var(--paper) 100%);
}
.page-hero:not(:has(.framed))::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: clamp(1.5rem, 4vw, 3rem); right: calc(-1 * clamp(2rem, 6vw, 5rem));
  width: clamp(220px, 34vw, 520px); height: calc(100% - clamp(3rem, 8vw, 6rem));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M55 100 L0 100 L0 0 L100 0 L100 58' fill='none' stroke='%23991242' stroke-width='3' vector-effect='non-scaling-stroke' opacity='.28'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .js-motion .page-hero:not(:has(.framed))::after { opacity: 0; transform: translate3d(24px, -12px, 0); animation: frame-in 1.2s var(--ease) .2s forwards; }
  @keyframes frame-in { to { opacity: 1; transform: none; } }
}
@media (max-width: 860px) { .page-hero::after { display: none; } }

/* ---------- Überschrift Wort für Wort (JS setzt .split-words) ---------- */
.split-words .w { display: inline-block; max-width: 100%; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.split-words .w > span { display: inline-block; max-width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .split-words .w > span { transform: translateY(105%); animation: word-in .8s var(--ease) forwards; animation-delay: calc(var(--i) * 55ms + 60ms); }
  @keyframes word-in { to { transform: none; } }
}

/* ---------- Sanftes Einblenden beim Scrollen ---------- */
@media screen and (prefers-reduced-motion: no-preference) {
  .js-motion [data-reveal] {
    opacity: 0; transform: translate3d(0, 16px, 0);
    transition: opacity .75s var(--ease), transform .75s var(--ease);
    transition-delay: calc(var(--d, 0) * 60ms);
  }
  .js-motion [data-reveal].is-in { opacity: 1; transform: none; }

  .js-motion [data-reveal-img] { overflow: hidden; }
  .js-motion [data-reveal-img] img { opacity: 0; transform: scale(1.04); transition: opacity 1s var(--ease), transform 1.4s var(--ease); }
  .js-motion [data-reveal-img].is-in img { opacity: 1; transform: none; }

  .js-motion .framed[data-reveal-frame] > img { opacity: 0; transform: scale(1.02); transition: opacity 1s var(--ease) .15s, transform 1.4s var(--ease) .15s; }
  .js-motion .framed[data-reveal-frame].is-in > img { opacity: 1; transform: none; }
  .js-motion .framed[data-reveal-frame] .frame path[style*="--len"] { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.3s cubic-bezier(.6, 0, .2, 1); }
  .js-motion .framed[data-reveal-frame].is-in .frame path[style*="--len"] { stroke-dashoffset: 0; }
}
.img-wrap { margin-bottom: 1.1rem; border-radius: 2px; }
.img-wrap img { margin-bottom: 0 !important; }

/* ---------- Mitlaufende Kapitel: Werte + Schritte ---------- */
@media (min-width: 861px) {
  [data-track-list] { position: relative; }
  [data-track-list]::before, [data-track-list]::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * clamp(1.5rem, 3vw, 3rem)); width: 2px;
  }
  [data-track-list]::before { background: var(--line); }
  [data-track-list]::after { background: var(--wine); transform-origin: 50% 0; transform: scaleY(var(--vp, 0)); }
  .is-tracking [data-track-item] h3 { transition: color .4s ease; }
  .is-tracking [data-track-item].is-active h3 { color: var(--wine); }
}

/* Schritte „So wechseln Sie zu uns“ mit mitlaufendem Bild */
.story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.story-media { position: sticky; top: calc(var(--header-h) + 2rem); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step { counter-increment: step; padding-block: clamp(1.6rem, 3vw, 2.4rem); border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; padding-top: 0; }
.step h3 { display: flex; gap: .9rem; align-items: baseline; margin-bottom: .45rem; }
.step h3::before { content: counter(step, decimal-leading-zero); font-size: .95rem; font-stretch: 90%; font-weight: 600; color: var(--wine); min-width: 1.8rem; }
.step p { color: var(--slate); max-width: 34rem; }
@media (max-width: 860px) { .story { grid-template-columns: 1fr; } .story-media { position: static; } }

/* ---------- Kapitel-Navigation (Leistungen) ---------- */
.local-nav { position: sticky; top: var(--header-h); z-index: 40; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--line); }
.local-nav .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 3.25rem; }
.local-nav strong { font-family: var(--font-ui); font-stretch: 85%; font-size: 1.1rem; margin-right: auto; }
.local-nav ul { list-style: none; margin: -6px; padding: 6px; scroll-padding-inline: 6px; display: flex; gap: 1.4rem; overflow-x: auto; scrollbar-width: none; }
.local-nav ul::-webkit-scrollbar { display: none; }
.local-nav ul a { font-family: var(--font-ui); font-size: .92rem; font-weight: 520; font-stretch: 92%; color: var(--slate); text-decoration: none; white-space: nowrap; padding: .9rem 0; display: inline-block; }
.local-nav ul a:hover, .local-nav ul a[aria-current] { color: var(--wine); }
.local-nav ul a[aria-current] { box-shadow: inset 0 -2px 0 var(--wine); }
@media (max-width: 620px) { .local-nav strong, .local-nav .btn { display: none; } }
html:has(.local-nav) { scroll-padding-top: calc(var(--header-h) + 4.5rem); }

/* ---------- Mikro-Interaktionen ---------- */
.text-link::after { content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .45em; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: translateY(-.1em) rotate(45deg); transition: transform .2s ease; }
.text-link:hover::after { transform: translate(3px, -.1em) rotate(45deg); }
.card img, .img-wrap img { transition: transform .6s var(--ease); }
.card:hover img { transform: scale(1.02); }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  @media (prefers-reduced-motion: no-preference) {
    details::details-content { height: 0; overflow: clip; transition: height .35s var(--ease), content-visibility .35s allow-discrete; }
    details[open]::details-content { height: auto; }
  }
}

/* ---------- Abschlussband: warmer Lichtschein ---------- */
.cta-band { position: relative; isolation: isolate; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(760px 460px at 92% 0%, rgba(153, 18, 66, .55), transparent 68%);
}

/* ---------- Druck: alles sichtbar ---------- */
@media print {
  [data-reveal], [data-reveal-img] img, .framed > img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .page-hero::after, .hero--photo::before, .scroll-cue, .local-nav { display: none !important; }
}