@import url('design/inhalte.css');

/* Die Bühne bleibt dunkel, bis der Film selbst ins Papier führt. */
body { isolation: isolate; }
.ink-layer { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--paper); }
.ink-fallback { position: absolute; inset: 0; background: url('assets/intro/k7.webp') center / cover no-repeat; opacity: .16; }
#ink-canvas { display: block; width: 100%; height: 100%; opacity: 0; }
body[data-fluid="ready"] #ink-canvas { opacity: 1; }
body[data-fluid="ready"] .ink-fallback { opacity: 0; }
.site-header { color: var(--paper); }
.brand-mark i { border-color: currentColor; }
.brand-mark i::after { background: currentColor; }
.site-header nav { border: 1px solid rgba(244,244,239,.2); }
.site-header::before { background: linear-gradient(#080b13 calc(100% - 24px), transparent); opacity: .88; }
body[data-ground] .site-header, .detail-page .site-header { color: var(--ink); }
body[data-ground] .site-header::before, .detail-page .site-header::before { background: linear-gradient(var(--paper) calc(100% - 24px), transparent); opacity: 1; }
.site-header.is-scrolled .wordmark { background: none; }
.site-header .wordmark:focus-visible { outline-color: currentColor; }
.global-motion { position: static; inset: auto; z-index: 22; padding: 9px 13px; min-height: 44px; border-color: #727780; background: #10151ce6; color: var(--paper); backdrop-filter: blur(12px); font-size: 11px; }
body[data-ground] .global-motion { background: #f4f4eff0; color: var(--ink); border-color: #b9bdb7; }
.site-footer { padding-bottom: 90px; }
:is(a,button,input,select,textarea,summary) { touch-action: manipulation; scroll-margin-block: 120px 150px; }
.global-motion::before { content: ''; width: 10px; height: 13px; border-inline: 3px solid currentColor; flex: 0 0 auto; }
.global-motion[aria-pressed="true"]::before { width: 0; height: 0; border: 0; border-left: 10px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }

/* Die ruhige, semantische Bildfolge ist der Standard ohne JavaScript. */
#hero-zone { background: #080b13; color: var(--paper); position: relative; }
.intro-media, .intro-footer { display: none; }
.intro-title { position: relative; min-height: 90svh; display: flex; align-items: center; padding: 120px var(--gutter) 100px; overflow: hidden; }
.quiet-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quiet-hand { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.title-copy { position: relative; z-index: 1; width: 43%; max-width: 680px; }
.intro-title::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #080b13e6, #080b1366 45%, transparent 70%); pointer-events: none; }
.intro-label { font-size: 11px; letter-spacing: .12em; font-weight: 500; margin-bottom: 25px; color: #d6d9de; }
.intro-title h1 { font-size: clamp(38px, 4.2vw, 76px); line-height: 1.04; letter-spacing: -.045em; text-wrap: pretty; }
.intro-title h2 { font-size: clamp(46px, 5.6vw, 90px); line-height: 1.02; text-wrap: pretty; }
.intro-answer { font-size: clamp(17px, 1.5vw, 23px); margin-top: 28px; line-height: 1.4; }
.intro-body { margin-top: 28px; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; }
.intro-action { display: flex; align-items: flex-start; flex-direction: column; gap: 10px; margin-top: 36px; }
.intro-action > span { font-size: 12px; color: #d6d9de; }
.quiet-ending { display: grid; grid-template-columns: 1fr 1fr; }
.quiet-ending img { width: 100%; height: 100%; object-fit: cover; }
.services { padding-top: 90px; }
#services-title { width: fit-content; max-width: 770px; margin-bottom: 54px; font-size: clamp(42px, 5.2vw, 82px); background: #f4f4eff0; border-radius: 5px; padding: 12px 20px 16px; margin-left: -20px; }
#services-title { box-shadow: 0 0 24px 18px #f4f4efb3; }
.service-cards { padding: 0; margin: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.service-card { position: relative; display: flex; flex-direction: column; padding: clamp(20px, 2vw, 34px); min-width: 0; background: rgba(244,244,239,.83); border: 1px solid rgba(155,161,168,.45); border-radius: var(--radius); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
/* Milchglas dämpft die Tinte, erhält aber ihren Faden. Schrift wird zusätzlich im Shader geschützt. */
body[data-fluid="ready"] :is(.service-card, .glass, .process-list li, .facts-list > div, .services-foot-grid, .faq-list) { background-color: rgba(244,244,239,.72); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
body[data-fluid="ready"] :is(.tools-section, .outcomes) { background-color: rgba(244,244,239,.45); }
.service-number { font-size: 11px; letter-spacing: .08em; margin-bottom: 32px; }
.service-card h3 { font-size: clamp(25px, 2.3vw, 38px); margin-bottom: 22px; }
.service-text { font-size: 15px; line-height: 1.6; margin-bottom: 24px; }
.service-card .tags { margin-bottom: 28px; gap: 6px; }
.service-card .tags li { font-size: 11px; text-transform: none; letter-spacing: 0; }
.service-price { border-top: 1px solid #a8aea660; margin-top: auto; padding-top: 20px; font-size: 22px; }
.service-price b { font-weight: 500; font-size: 36px; letter-spacing: -.04em; }
.service-link { display: flex; justify-content: space-between; align-items: center; text-decoration: none; font-size: 12px; min-height: 44px; margin-top: 12px; }
.service-link span { font-size: 26px; transition: transform var(--ui) var(--ease-out); }
.service-card { cursor: pointer; }
.service-card:focus-within { outline: 3px solid var(--accent); outline-offset: 5px; }
.service-link:focus-visible { outline: none; }
.service-card:focus-within .service-link { text-decoration: underline; }
.glass, .process-list li, .facts-list > div, .services-foot-grid { border-color: #c4c8c080; }
.services-foot { padding-top: 0; }
.process-list li::before { transform: scaleX(1); }
.editorial-word { text-shadow: 0 0 32px var(--paper); }
.detail-page .site-header { color: var(--ink); }
.detail-page .detail-main { padding-bottom: 110px; }
.detail-page .site-footer a { display: inline-flex; align-items: center; min-height: 44px; }

/* Fünf Schirmhöhen Scrollweg plus eine Schirmhöhe Bühne. */
body[data-intro="motion"] #hero-zone { height: calc(var(--scroll-height,500svh) + var(--stage-height,100svh)); background: transparent; }
body[data-intro="motion"] .intro-sticky { height: var(--stage-height,100svh); position: sticky; top: 0; overflow: hidden; }
body[data-intro="motion"] .intro-media { display: block; position: absolute; inset: 0; background: #080b13; }
.intro-media > img, .intro-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro-media > img, .intro-media > video { translate: 0 var(--ink-sink, 0px); }
body[data-ground] .intro-media { background: transparent; }
.intro-media video { opacity: 0; }
.intro-media video.is-visible { opacity: 1; }
#clock-hand { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.clock-trail { filter: drop-shadow(0 0 3px #d7f52870); }
.intro-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #080b1399, #080b1320 44%, transparent 65%); }
body[data-intro="motion"] .intro-titles { position: absolute; inset: 0; }
body[data-intro="motion"] .intro-title { position: absolute; inset: 0; min-height: 0; padding-block: 120px; opacity: 0; pointer-events: none; transition: opacity 180ms var(--ease-out); }
body[data-intro="motion"] .intro-title::after { display: none; }
body[data-intro="motion"] .intro-title.is-active { opacity: 1; pointer-events: auto; }
body[data-intro="motion"] .quiet-image, body[data-intro="motion"] .quiet-ending { display: none; }
body[data-intro="motion"] .quiet-hand { display: none; }
.word-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .09em; margin-bottom: -.09em; }
.word-mask > span { display: inline-block; }
body[data-intro="motion"] .intro-title .word-mask > span { transform: translateY(110%); transition: transform 600ms var(--ease-out); }
body[data-intro="motion"] .intro-title.is-active .word-mask > span { transform: translateY(0); }
body[data-intro="motion"] .intro-footer { display: flex; position: absolute; bottom: 36px; left: var(--gutter); right: var(--gutter); align-items: center; gap: 50px; color: var(--paper); }
.intro-skip { display: inline-flex; align-items: center; gap: 22px; text-decoration: none; font-size: 12px; min-height: 44px; }
.scroll-cue { font-size: 11px; display: flex; align-items: center; gap: 20px; }
.scroll-track { display: block; height: 1px; width: 110px; background: #f4f4ef40; overflow: hidden; }
.scroll-track i { display: block; height: 1px; width: 100%; background: var(--paper); transform: scaleX(0); transform-origin: left; }
.chapter-count { font-size: 11px; font-variant-numeric: tabular-nums; }
body[data-intro="motion"] .services { position: relative; margin-top: calc(-1 * var(--stage-height,100svh)); min-height: var(--stage-height,100svh); padding-top: clamp(115px, 15svh, 170px); padding-bottom: 60px; pointer-events: none; }
body[data-intro="motion"] .service-card { opacity: 0; transform: translateY(100px); transition: opacity 200ms var(--ease-out); pointer-events: none; }
body[data-intro="motion"] .service-card.is-revealed { opacity: 1; pointer-events: auto; }
body[data-intro="motion"] #services-title { opacity: 0; transition: opacity 200ms var(--ease-out); }
body[data-intro="motion"] #services-title.is-revealed { opacity: 1; }
body[data-intro="quiet"] .global-motion { display: none; }
body[data-paused] .intro-title .word-mask > span { transition: none; }

@media (min-width:768px) and (max-width:1100px) {
  .service-cards { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
  .service-card h3 { font-size: 32px; }
  .title-copy { width: 47%; }
  .intro-title h1 { font-size: 44px; }
}
@media (min-width:768px) and (max-height:750px) {
  .intro-title h1 { font-size: clamp(36px, 4vw, 60px); }
  body[data-intro="motion"] .services { padding-top: 110px; }
  #services-title { margin-bottom: 30px; font-size: 54px; }
  .service-number { margin-bottom: 18px; }
  .service-card h3 { margin-bottom: 16px; }
}
@media (max-width:767px), (max-width:1100px) and (orientation:portrait) {
  .site-header { padding-block: 16px; }
  .site-header::before { bottom: -12px; }
  .global-motion { bottom: calc(13px + env(safe-area-inset-bottom, 0px)); right: 20px; font-size: 11px; }
  body[data-ground] .global-motion { bottom: calc(75px + env(safe-area-inset-bottom, 0px)); }
  .site-header::after { height: calc(140px + env(safe-area-inset-bottom, 0px)); }
  .site-footer { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
  .intro-title { display: block; padding: 0 0 50px; min-height: 0; }
  .intro-title:first-child { padding-top: 82px; }
  .quiet-image { position: relative; aspect-ratio: 1; height: auto; object-fit: cover; object-position: 90.476% center; }
  .quiet-hand { top: 82px; height: auto; aspect-ratio: 1; object-position: 90.476% center; }
  .title-copy { width: auto; padding: 24px 20px; }
  .intro-title::after { display: none; }
  .intro-title h1 { font-size: clamp(30px, 8.2vw, 48px); line-height: 1.07; }
  .intro-title h2 { font-size: clamp(38px, 10vw, 62px); }
  .intro-label { margin-bottom: 15px; font-size: 11px; letter-spacing: .07em; }
  .intro-answer { font-size: 17px; margin-top: 18px; }
  .intro-body { font-size: 17px; margin-top: 20px; }
  .intro-action { margin-top: 24px; }
  .quiet-ending { grid-template-columns: 1fr; }
  .quiet-ending img { aspect-ratio: 1; object-position: 90.476% center; }
  body[data-intro="motion"] .intro-media { top: 78px; bottom: auto; height: min(100vw, 43svh); }
  .intro-media > img, .intro-media > video { width: auto; height: 100%; aspect-ratio: 1; left: 50%; transform: translateX(-50%); object-position: 90.476% center; }
  #clock-hand { width: auto; height: 100%; aspect-ratio: 1; left: 50%; transform: translateX(-50%); }
  .intro-shade { background: linear-gradient(0deg, #080b13, transparent 12%); }
  body[data-intro="motion"] .intro-sticky { background: #080b13; }
  body[data-intro="motion"] .intro-title { display: block; top: calc(78px + min(100vw, 43svh)); bottom: auto; padding: 0; }
  body[data-intro="motion"] .intro-title .title-copy { padding-top: 14px; }
  body[data-intro="motion"] .intro-footer { bottom: 12px; gap: 20px; align-items: flex-start; }
  .intro-skip { font-size: 11px; gap: 10px; }
  .scroll-cue { position: absolute; bottom: 47px; font-size: 11px; gap: 12px; }
  .scroll-track { width: 56px; }
  .chapter-count { display: none; }
  .service-cards { grid-template-columns: 1fr; gap: 18px; }
  .service-card { padding: 28px; }
  .service-card h3 { font-size: 36px; }
  .service-card .tags li { font-size: 11px; }
  #services-title { font-size: 45px; margin-bottom: 32px; }
  body[data-intro="motion"] .services { padding-top: 115px; }
  .service-number { margin-bottom: 22px; }
  .service-text { font-size: 16px; }
  .services-foot { padding-top: 0; }
  .detail-main { padding-bottom: 120px; }
}
@media (max-width:767px) and (max-height:740px) {
  body[data-intro="motion"] .intro-media { height: min(100vw, 35svh); }
  body[data-intro="motion"] .intro-title { top: calc(78px + min(100vw, 35svh)); }
  .intro-title h1 { font-size: 29px; }
  .intro-title h2 { font-size: 36px; }
  .intro-label { margin-bottom: 10px; }
  .intro-answer { margin-top: 14px; }
  .intro-action { margin-top: 18px; }
  .scroll-cue { display: none; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  #ink-canvas { display: none; }
  .global-motion { display: none; }
}
@media(max-width:767px) { html { scroll-padding-bottom: 150px; } }