/* Entwurf 08: Tactile Slow Luxury Motion & Editorial Section Architecture */
:root {
 --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
 --ease-in-out-soft: cubic-bezier(0.4, 0, 0.2, 1);
 --hero-scroll: 0;
}

img { height: auto; }

/* ==========================================================================
   1. HERO DEEP HORIZON PARALLAX & CURTAIN OVER-SCROLL
   ========================================================================== */
.hero-stage {
 position: relative;
}
.hero {
 overflow: hidden;
}
.hero-image {
 animation: none;
 transform: scale(1.07) translate3d(0, calc(var(--hero-scroll, 0) * -115px), 0);
 transform-origin: center center;
 will-change: transform;
}
.hero-copy {
 transform: translate3d(0, calc(var(--hero-scroll, 0) * -42px), 0);
 opacity: calc(1 - (var(--hero-scroll, 0) * 1.15));
 will-change: transform, opacity;
}
.hero-bottom {
 opacity: calc(1 - (var(--hero-scroll, 0) * 1.6));
 transition: opacity 0.2s linear;
}
.page-surface {
 position: relative;
 z-index: 2;
 background: var(--paper);
 display: flow-root;
 box-shadow: 0 -28px 64px rgba(25, 24, 19, 0.22);
}

@media (min-width: 801px) and (prefers-reduced-motion: no-preference) {
 .hero-stage {
  --hero-height: max(700px, min(900px, 100svh));
  height: calc(2 * var(--hero-height));
 }
 .hero-stage .hero {
  position: sticky;
  top: 0;
  height: var(--hero-height);
  min-height: 0;
  max-height: none;
 }
 .page-surface {
  margin-top: calc(-1 * max(700px, min(900px, 100svh)));
 }
 .journal-banner-clip {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
 }
 .journal-banner-stage.is-locked .journal-banner-clip {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100svh;
  pointer-events: none;
 }
}

/* ==========================================================================
   2. EDITORIAL CHAPTER SYSTEM & FULL-BLEED COLOR ZONES (DIANA-MODUS)
   ========================================================================== */
/* Full-bleed background zones for #erika and #leistungen without changing HTML wrappers */
#erika.journal-founder,
#leistungen.journal-services {
 position: relative;
 background-color: var(--cream);
 box-shadow: 0 0 0 100vmax var(--cream);
 clip-path: inset(0 -100vmax);
 padding-top: clamp(72px, 9vw, 128px);
 padding-bottom: clamp(72px, 9vw, 128px);
 margin-top: 0;
 margin-bottom: 0;
}
#leistungen.journal-services:before {
 display: none;
}

#ablauf.journal-process,
#projekte.journal-projects,
.journal-faq {
 padding-top: clamp(72px, 9vw, 128px);
}

/* Architectural Chapter Bar & Index Numbering */
.journal-label[data-chapter] {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: 100%;
 padding-top: 18px;
 margin-bottom: 24px;
}
.journal-label[data-chapter]::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 1px;
 background: var(--line);
 transform-origin: left center;
 transition: transform 1.05s var(--ease-out-expo);
}
.motion-ready .journal-label[data-chapter]::before {
 transform: scaleX(0);
}
.motion-ready .journal-label[data-chapter].is-drawn::before {
 transform: scaleX(1);
}
.journal-label[data-chapter]::after {
 content: attr(data-chapter);
 font-family: var(--serif);
 font-style: italic;
 font-size: 13px;
 letter-spacing: 0.04em;
 color: var(--sage);
 font-weight: 400;
}

/* Audience Ticker refinement */
.journal-audience {
 background: rgba(243, 240, 232, 0.55);
 border-block: 1px solid var(--line);
}
.audience-row {
 display: inline-flex;
 align-items: center;
 gap: 18px 34px;
}
.audience-divider {
 display: inline;
 font-style: normal;
 color: var(--sage);
}

/* ==========================================================================
   3. PRINCIPLES, PROCESS TIMELINE & SERVICES
   ========================================================================== */
.principle-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 0 clamp(24px, 3.5vw, 52px);
 padding-bottom: clamp(80px, 9vw, 115px);
}
.principle-card {
 position: relative;
 overflow: hidden;
}
.principle-card::before {
 content: attr(data-step);
 display: block;
 font-family: var(--sans);
 font-size: 11px;
 letter-spacing: 0.12em;
 color: var(--sage);
 margin-bottom: 12px;
}
.principle-card img {
 width: 100%;
 height: auto;
 aspect-ratio: 3/4;
 object-fit: cover;
 object-position: center;
 display: block;
 margin-bottom: 22px;
 transition: transform 1.15s var(--ease-out-expo);
}
.principle-card .principle-tag {
 font-size: 11px;
 line-height: 1.5;
 letter-spacing: .08em;
 text-transform: uppercase;
 color: var(--muted);
 margin-bottom: 12px;
 display: block;
}
.principle-card h3 {
 font-size: clamp(25px, 2.45vw, 36px);
 margin-bottom: 16px;
 text-wrap: balance;
}
.principle-card p:not(.principle-tag) {
 font-size: 16px;
 line-height: 1.75;
 color: var(--muted);
}
.principle-credit {
 grid-column: 1/-1;
 margin-top: 30px;
 font-size: 11px;
 color: var(--muted);
 letter-spacing: .07em;
}

/* Interactive Process Timeline (#ablauf) */
.journal-process-list article {
 position: relative;
 transition: transform 0.55s var(--ease-out-expo), opacity 0.55s var(--ease-out-expo), background-color 0.45s ease;
 border-radius: 2px;
}
.journal-process-list article .journal-number {
 transition: color 0.45s ease, transform 0.45s var(--ease-out-expo);
}
.motion-ready .journal-process-list article.is-active-step {
 transform: translateX(6px);
}
.motion-ready .journal-process-list article.is-active-step .journal-number {
 color: var(--ink);
 font-weight: 600;
}

/* Services & Paired Offers (#leistungen) */
.offer-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: clamp(50px, 7vw, 100px);
 align-items: start;
 position: relative;
}
.offer-grid:before {
 content: "";
 position: absolute;
 left: 50%;
 top: 0;
 bottom: 0;
 width: 1px;
 background: var(--line);
}
.bloom-offer.service-card {
 padding: 0;
 border: 0;
 background: none;
 color: var(--ink);
 text-align: center;
 overflow: hidden;
}
.offer-image {
 width: 100%;
 height: auto;
 aspect-ratio: 4/3;
 object-fit: cover;
 object-position: center;
 display: block;
 margin-bottom: 34px;
 transition: transform 1.15s var(--ease-out-expo);
}
.bloom-offer > .journal-label {
 margin-bottom: 15px;
}
.bloom-offer h3 {
 font-size: clamp(30px, 3vw, 43px);
 margin-bottom: 20px;
}
.bloom-offer > .offer-intro {
 font-size: 17px;
 line-height: 1.65;
 max-width: 42ch;
 margin: 0 auto 29px;
 color: var(--muted);
}
.offer-details {
 border-block: 1px solid var(--line);
 text-align: left;
}
.offer-details summary {
 padding: 20px 0;
 gap: 20px;
 font-size: 14px;
 font-weight: 500;
}
.offer-details summary > span:last-child {
 font-size: 22px;
 font-weight: 400;
}
.offer-detail-content {
 padding: 8px 0 30px;
 font-size: 16px;
 line-height: 1.75;
 color: var(--muted);
}
.offer-detail-content > p {
 margin-bottom: 20px;
}
.offer-detail-content .offer-price {
 font-size: 24px;
 font-family: var(--serif);
 color: var(--ink);
 margin: 30px 0 5px;
}
.offer-detail-content .journal-scope {
 margin-top: 0;
 border-top: 0;
}
.offer-detail-content .journal-scope > section {
 display: block;
 padding: 24px 0;
}
.offer-detail-content .journal-scope .journal-number {
 display: none;
}
.offer-detail-content .journal-scope h4 {
 font-size: 27px;
 margin-bottom: 12px;
}
.offer-detail-content .journal-handover {
 display: block;
 padding-block: 30px;
}
.offer-detail-content .journal-handover h4 {
 font-size: 29px;
 margin-top: 15px;
}
.offer-detail-content .journal-service-action {
 flex-direction: column;
 align-items: start;
 gap: 15px;
}
.offer-legal {
 display: flex;
 flex-wrap: wrap;
 gap: 18px;
 margin-top: 22px;
}
.offer-legal button {
 background: none;
 padding: 0;
 text-decoration: underline;
 text-underline-offset: 4px;
 font-size: 12px;
 color: var(--muted);
}
.journal-extra-list summary {
 grid-template-columns: 1fr 20px;
}
.journal-extra-list .journal-disclosure > div {
 padding-left: 0;
}
details summary > span:last-child {
 transition: transform .32s var(--ease-out-expo);
}
details[open] summary > span:last-child {
 transform: rotate(45deg);
}

/* ==========================================================================
   4. PROJECTS, BANNER & MOTION REVEALS (ALINA-MODUS)
   ========================================================================== */
.journal-project + .journal-project {
 border-top: 1px solid var(--line);
 padding-top: clamp(64px, 8vw, 110px);
 margin-top: clamp(64px, 8vw, 110px);
}
.journal-project .gallery-open:hover .project-image {
 transform: scale(1.018);
}
.journal-project .project-image {
 transition: opacity .32s ease, transform .95s var(--ease-out-expo);
}
.journal-faq {
 padding-bottom: clamp(160px, 16vw, 230px);
}
.journal-banner-stage {
 position: relative;
 width: 100%;
 aspect-ratio: 16/9;
 height: auto;
 max-height: min(820px, 85vh);
 min-height: 480px;
 clip-path: inset(0 0 0 0);
 overflow: hidden;
 background: #25281e;
 isolation: isolate;
}
.journal-banner-clip {
 position: relative;
 width: 100%;
 height: 100%;
}
.journal-banner-image {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center 45%;
 display: block;
}

/* Tactile Scroll Reveal & Image Focus Settle */
.motion-ready .reveal {
 opacity: 0;
 transform: translateY(16px);
 transition: opacity 0.72s var(--ease-out-expo), transform 0.72s var(--ease-out-expo);
 transition-delay: var(--reveal-delay, 0ms);
}
.motion-ready .reveal.is-visible {
 opacity: 1;
 transform: none;
}
.motion-ready .principle-card.reveal img,
.motion-ready .service-card.reveal .offer-image,
.motion-ready .gallery-frame.reveal .project-image {
 transform: scale(1.045);
}
.motion-ready .principle-card.reveal.is-visible img,
.motion-ready .service-card.reveal.is-visible .offer-image,
.motion-ready .gallery-frame.reveal.is-visible .project-image {
 transform: scale(1);
}

/* Subtle Desktop Hover Breathing */
@media (hover: hover) and (pointer: fine) {
 .button:hover {
  transform: none;
 }
 .button:hover span,
 .text-button:hover span {
  transform: translate(3px, -2px);
 }
 .principle-card:hover img,
 .bloom-offer.service-card:hover .offer-image {
  transform: scale(1.022);
 }
}

/* ==========================================================================
   5. FOOTER & DIALOGS
   ========================================================================== */
.footer-bottom {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 text-align: center;
 gap: 18px;
 border-top: 1px solid var(--line);
 padding-top: 28px;
}
.footer-bottom > span {
 text-align: center;
 display: block;
 width: 100%;
}
.footer-bottom > div {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 gap: 16px 24px;
}
.legal-dialog h3 {
 font-size: 24px;
 margin-top: 28px;
}
.legal-dialog ul {
 padding-left: 20px;
 font-size: 14px;
 line-height: 1.8;
}
.legal-dialog {
 overscroll-behavior: contain;
}
.customer-kind {
 border: 0;
 margin: 24px 0;
 padding: 0;
}
.customer-kind legend {
 font-size: 14px;
 margin-bottom: 12px;
}
.flow-legal-links {
 display: flex;
 flex-wrap: wrap;
 gap: 15px;
 margin: 18px 0;
 font-size: 13px;
}

/* ==========================================================================
   6. MOBILE & TABLET ARCHITECTURE (< 800px, < 600px, < 400px)
   ========================================================================== */
@media (max-width: 800px) {
 /* Gentle Mobile Hero Parallax */
 .hero-image {
  transform: scale(1.05) translate3d(0, calc(var(--hero-scroll, 0) * -65px), 0);
 }
 .hero-copy {
  transform: translate3d(0, calc(var(--hero-scroll, 0) * -24px), 0);
 }

 /* Clear Chapter Spacing on Mobile */
 .journal-intro.journal-wrap,
 #erika.journal-founder,
 #ablauf.journal-process,
 #leistungen.journal-services,
 #projekte.journal-projects,
 .journal-faq {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
 }

 .principle-grid {
  gap: 28px;
  padding-bottom: 64px;
 }
 .principle-card h3 {
  font-size: 27px;
 }
 .principle-card p:not(.principle-tag) {
  font-size: 15px;
 }
 .offer-grid {
  gap: 48px;
 }
 .bloom-offer h3 {
  font-size: 31px;
 }
 .journal-faq {
  padding-bottom: 110px !important;
 }
 .journal-banner-stage {
  aspect-ratio: 16/9;
  height: auto;
  min-height: 260px;
  max-height: none;
 }
 .journal-audience {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 26px var(--gutter);
  border-block: 1px solid var(--line);
  overflow: hidden;
 }
 .audience-divider {
  display: none !important;
 }
 .audience-row {
  display: flex !important;
  align-items: center;
  gap: 10px 16px;
  font-size: 10.5px;
  letter-spacing: .11em;
  line-height: 1.4;
  white-space: nowrap;
 }
 .audience-row:first-child {
  justify-content: center;
  transform: translateX(14px);
 }
 .audience-row:last-child {
  justify-content: center;
  transform: translateX(-14px);
 }
 .audience-row i {
  display: inline !important;
  font-style: normal;
  color: var(--sage);
 }

 /* Mobile Project Detail Frame Distinction */
 .journal-project-detail {
  background: var(--cream);
  padding: 18px;
  border: 1px solid var(--line);
  margin-top: 24px;
 }
 .journal-project-detail figcaption {
  padding-top: 10px;
  font-style: italic;
 }

 .journal-contact {
  text-align: center;
 }
 .journal-contact > .journal-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
 }
 .journal-contact > .journal-wrap > .journal-label {
  margin-inline: auto;
  text-align: center;
 }
 .journal-contact-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
  width: 100%;
 }
 .journal-contact h2 {
  text-align: center;
  margin-inline: auto;
 }
 .journal-contact-grid > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
 }
 .journal-contact-grid > div > p {
  text-align: center;
  margin-inline: auto;
 }
 .journal-contact .button {
  margin-inline: auto;
 }
 .journal-contact .contact-note {
  text-align: center;
  margin-inline: auto;
 }
 .journal footer,
 footer {
  text-align: center !important;
  padding-top: 64px !important;
  padding-bottom: 32px !important;
 }
 .footer-top {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 40px !important;
  padding-bottom: 44px !important;
 }
 .footer-top > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
 }
 .footer-top .eyebrow {
  margin-bottom: 14px !important;
  text-align: center !important;
 }
 .footer-top p {
  text-align: center !important;
 }
 .footer-top a:not(.footer-brand) {
  display: inline-flex !important;
  justify-content: center !important;
  text-align: center !important;
  margin-inline: auto !important;
  margin-bottom: 8px !important;
  width: auto !important;
 }
 .footer-top a.instagram-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  margin-inline: auto !important;
  margin-top: 2px !important;
 }
 .footer-brand.footer-signet {
  margin: 0 auto 14px !important;
 }
 .footer-bottom {
  gap: 14px !important;
  padding-top: 24px !important;
 }
 .footer-bottom > div {
  gap: 12px 18px !important;
 }
 .footer-bottom > div button {
  font-size: 11px !important;
 }
 .footer-bottom > span {
  font-size: 11px !important;
 }
}

@media (max-width: 600px) {
 .principle-grid,
 .offer-grid {
  grid-template-columns: 1fr;
 }
 .principle-grid {
  gap: 40px;
  padding-bottom: 56px;
 }
 /* Distinct separation between stacked Principle Cards on Mobile */
 .principle-card + .principle-card {
  padding-top: 36px;
  border-top: 1px solid var(--line);
 }
 .principle-card img {
  aspect-ratio: 3/4;
  max-height: none;
  margin-bottom: 20px;
 }
 .principle-card h3 {
  font-size: 31px;
 }
 .principle-card p:not(.principle-tag) {
  font-size: 16px;
 }
 .principle-credit {
  margin-top: -20px;
 }
 .offer-grid:before {
  display: none;
 }
 .offer-grid {
  gap: 36px;
 }
 /* Tactile invitation card framing for each service on Mobile */
 .bloom-offer.service-card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 24px 20px 28px;
  box-shadow: 0 12px 32px rgba(41, 39, 31, 0.04);
 }
 .bloom-offer h3 {
  font-size: 33px;
 }
 .bloom-offer > .offer-intro {
  font-size: 16px;
 }
 .journal-services-heading {
  text-align: left;
 }
 .journal-extra-list summary {
  grid-template-columns: 1fr 20px;
 }
}

@media (max-width: 400px) {
 .audience-row {
  font-size: 9.5px;
  gap: 8px 12px;
 }
 .audience-row:first-child {
  transform: translateX(8px);
 }
 .audience-row:last-child {
  transform: translateX(-8px);
 }
}

/* ==========================================================================
   7. ACCESSIBILITY & REDUCED MOTION FALLBACK
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
 html {
  scroll-behavior: auto;
 }
 .hero-image,
 .hero-copy,
 .hero-bottom {
  transform: none !important;
  opacity: 1 !important;
 }
 .motion-ready .reveal,
 .motion-ready .principle-card.reveal img,
 .motion-ready .service-card.reveal .offer-image,
 .motion-ready .gallery-frame.reveal .project-image {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
 }
 .motion-ready .journal-label[data-chapter]::before {
  transform: scaleX(1) !important;
  transition: none !important;
 }
 details summary > span:last-child,
 .button span,
 .text-button span,
 .project-image {
  transition: none !important;
 }
 .gallery-fade {
  animation: none;
 }
 .journal-banner-clip {
  position: relative !important;
  inset: auto !important;
 }
}