/* Figma 08 / So arbeiten wir. Header, contacts, footer and FAQ behavior are shared. */
.work-main { --work-navy: #0e263d; --work-copy: #63738a; --work-accent: #ff851f; }
.work-main :where(h1, h2, h3, p) { margin: 0; }
.work-inner { position: relative; width: min(100% - 152px, 1288px); height: 100%; margin-inline: auto; }
.work-eyebrow { color: var(--work-accent);    }
.work-intro { color: var(--work-copy); }
.work-hero { height: 520px; overflow: hidden; background: #23303a; color: white; }
.work-hero-inner { isolation: isolate; }
.work-hero-glows { position: absolute; z-index: -2; inset: 0; pointer-events: none; }
.work-hero-glow-blue { position: absolute; left: 774px; top: -140px; max-width: none; }
.work-hero-glow-orange { position: absolute; left: 104px; top: 340px; max-width: none; }
.work-hero-inner::before { content: ""; position: absolute; z-index: -1; inset: 0 -100vw; background: rgba(8,18,28,.78); pointer-events: none; }
.work-hero .work-eyebrow { position: absolute; top: 72px; font-size: 15px; line-height: 22px; }
.work-hero h1 { position: absolute; top: 112px; width: min(100%, 990px); font-size: 64px; font-weight: 900; line-height: 68px; }
.work-hero-copy { position: absolute; top: 290px; max-width: 880px; font-size: 18px; line-height: 29px; }

.work-difference { height: 962px; color: var(--work-navy); background: white; }
.work-difference .work-eyebrow { position: absolute; top: 56px; font-size: 13px; }
.work-difference h2 { position: absolute; top: 84px; font-size: 46px; font-weight: 700; line-height: 48px; }
.work-difference .work-intro { position: absolute; top: 150px; max-width: 1120px; font-size: 17px; line-height: 26px; }
.work-difference-grid { position: absolute; top: 266px; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
.work-difference-card { position: relative; height: 300px; }
.work-difference-card::before { content: ""; position: absolute; inset: 6px; border-radius: 22px; background: #ebf2fa; }
.work-difference-card:nth-child(2)::before, .work-difference-card:nth-child(3)::before { background: #fff2e5; }
.work-difference-card h3 { position: absolute; top: 54px; left: 26px; width: calc(100% - 52px); font-size: 27px; font-weight: 700; line-height: 34px; }
.work-difference-card p { position: absolute; top: 128px; left: 26px; width: calc(100% - 52px); font-size: 15px; line-height: 24px; color: var(--work-copy); }

.work-process { padding-top: 56px; padding-bottom: 68px; overflow: hidden; background: white; color: var(--work-navy); }
.work-process-divider { position: absolute; left: -1px; top: 145px; max-width: none; pointer-events: none; }
.work-process-header { display: flex; flex-direction: column; gap: 8px; height: 210px; }
.work-process-header .work-eyebrow { color: var(--ao-orange); }
.work-process-header h2 { height: 52px; font-size: 40px; font-weight: 900; line-height: 48px; }
.work-process-header .work-intro { font-size: 16px; line-height: 26px; }
.work-process-list { position: relative; margin: 0; padding: 0; list-style: none; }
.work-process-list::after { content: ""; position: absolute; bottom: -68px; left: -1px; width: 2px; height: 68px; background: rgba(194,209,224,.9); }
.work-process-step { --process-duration: 360ms; position: relative; height: 230px; transition: height var(--process-duration) ease-in-out; }
.work-process-toggle { position: relative; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: var(--work-navy); text-align: left; cursor: pointer; overflow-anchor: none; }
.work-process-surface { position: absolute; left: 250px; top: 25px; width: 560px; height: 152px; border: 1px solid rgba(194,209,224,.65); border-radius: var(--ao-radius-card); background: white; box-shadow: 0 8px 22px rgba(13,31,51,.1); transition: transform var(--process-duration) ease-in-out, width var(--process-duration) ease-in-out, height var(--process-duration) ease-in-out, background var(--ao-hover-normal) ease-out, border-color var(--ao-hover-normal) ease-out, box-shadow var(--process-duration) ease-in-out; }
.work-process-spine { position: absolute; left: -1px; top: 0; width: 2px; height: 100%; background: rgba(194,209,224,.8); }
.work-process-branch { position: absolute; left: 11px; top: 100px; width: 239px; height: 2px; background: rgba(14,38,61,.55); transition: width var(--process-duration) ease-in-out, background var(--ao-hover-normal) ease-out; }
.work-process-node { position: absolute; left: -11px; top: 90px; width: 22px; height: 22px; }
.work-process-node img { position: absolute; inset: 0; transition: opacity var(--ao-hover-normal) ease-out; }
.work-process-node-active { opacity: 0; }
.work-process-content { position: absolute; left: 278px; top: 47px; width: 644px; transition: transform var(--process-duration) ease-in-out; }
.work-process-content > span { position: absolute; display: block; }
.work-process-number { top: 0; width: 54px; color: var(--ao-orange); font-size: 12px; font-weight: 600; line-height: 18px; }
.work-process-title { top: 24px; width: 420px; font-size: 23px; font-weight: 700; line-height: 30px; transition: color var(--ao-hover-normal) ease-out; }
.work-process-summary { top: 64px; width: 504px; font-size: 15px; font-weight: 400; line-height: 22px; color: var(--work-copy); }
.work-process-details { top: 127px; width: 644px; font-size: 14px; font-weight: 400; line-height: 22px; opacity: 0; transform: translateY(8px); transition: opacity 120ms ease-out, transform 120ms ease-out; }
.work-process-details[hidden] { display: none; }
.work-process-step.is-hover .work-process-surface { background: #fff8f0; border-color: var(--ao-orange); border-width: 1.5px; }
.work-process-step.is-hover .work-process-title { color: var(--ao-orange); }
.work-process-step:is(.is-hover, .is-expanded) .work-process-branch { background: var(--ao-orange); }
.work-process-step:is(.is-hover, .is-expanded) .work-process-node-active { opacity: 1; }
.work-process-step.is-expanded { --process-duration: 320ms; height: 390px; }
.work-process-step.is-expanded .work-process-surface { transform: translateX(200px); width: 700px; height: 310px; border-width: 2px; border-color: rgba(242,140,40,.9); box-shadow: 0 12px 28px rgba(13,31,51,.16); }
.work-process-step.is-expanded .work-process-branch { width: 439px; }
.work-process-step.is-expanded .work-process-content { transform: translateX(200px); }
.work-process-step.is-expanded .work-process-details { opacity: 1; transform: none; transition-delay: 200ms; }
.work-process-toggle:focus-visible { outline: none; }
.work-process-toggle:focus-visible .work-process-surface { outline: 2px solid var(--ao-orange); outline-offset: 4px; }

.work-accompaniment { height: 620px; background: #08121c; color: white; }
.work-accompaniment .work-eyebrow { position: absolute; top: 56px; }
.work-accompaniment h2 { position: absolute; top: 84px; max-width: 980px; font-size: 40px; font-weight: 900; line-height: 48px; }
.work-accompaniment .work-intro { position: absolute; top: 148px; max-width: 980px; font-size: 16px; line-height: 26px; color: #c7d9e8; }
.work-accompaniment-grid { position: absolute; top: 250px; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 404px)); justify-content: space-between; gap: 38px; }
.work-accompaniment-card { position: relative; height: 290px; color: var(--work-navy); }
.work-card-shadow, .work-card-surface { position: absolute; top: 6px; left: 6px; width: calc(100% - 12px); height: 278px; border-radius: 22px; transition: transform var(--ao-hover-normal) ease-out, width var(--ao-hover-normal) ease-out, height var(--ao-hover-normal) ease-out, border-radius var(--ao-hover-normal) ease-out, background var(--ao-hover-normal) ease-out, opacity var(--ao-hover-normal) ease-out; }
.work-card-shadow { opacity: 0; background: var(--ao-blue); }
.work-card-surface { background: white; }
.work-accompaniment-card :where(p, h3) { position: absolute; left: 26px; width: calc(100% - 54px); transition: color var(--ao-hover-normal) ease-out; }
.work-card-number { top: 24px; color: var(--ao-orange); font-size: 12px; font-weight: 600; line-height: 18px; }
.work-accompaniment-card h3 { top: 68px; font-size: 25px; font-weight: 700; line-height: 31px; }
.work-card-copy { top: 144px; font-size: 14.5px; line-height: 23px; color: var(--work-copy); }
.work-accompaniment-card:is(:hover, :focus-visible) .work-card-surface { transform: translate(-4px,-6px); width: calc(100% - 4px); height: 284px; border-radius: var(--ao-radius-container); background: var(--ao-orange); }
.work-accompaniment-card:is(:hover, :focus-visible) .work-card-shadow { transform: translateX(-4px); width: calc(100% - 4px); height: 284px; opacity: .11; border-radius: var(--ao-radius-container); }
.work-accompaniment-card:is(:hover, :focus-visible) :where(p, h3) { color: white; }
.work-accompaniment-card:focus-visible { outline: 2px solid var(--ao-orange); outline-offset: 3px; border-radius: var(--ao-radius-container); }

.work-statement { height: 320px; background: white; color: var(--work-navy); }
.work-statement .work-eyebrow { position: absolute; top: 58px; }
.work-statement h2 { position: absolute; top: 96px; width: 560px; font-size: 38px; font-weight: 900; line-height: 46px; }
.work-statement-divider { position: absolute; top: 84px; left: 624px; width: 3px; height: 150px; background: var(--work-accent); }
.work-statement-copy { position: absolute; top: 98px; left: 684px; width: 560px; font-size: 20px; font-weight: 600; line-height: 31px; }
.work-statement-tagline { position: absolute; top: 222px; left: 684px; font-size: 13px; font-weight: 600; line-height: 20px; color: var(--work-accent); }
.work-faq { padding-inline: max(76px, calc((100% - 1288px) / 2)); }
.work-faq .leistungen-faq-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.work-faq .leistungen-faq-toggle > span, .work-faq .leistungen-faq-answer { max-width: 188px; }
.work-faq .leistungen-faq-toggle { align-items: center; padding-block: 18px; }
.work-faq .leistungen-faq-toggle > span { align-self: center; }
.work-faq .leistungen-faq-toggle > img { top: 38px; }

/* Responsive guards; the 1440px canvas remains the primary reference. */
@media (max-width: 1399px) {
  .work-inner { width: calc(100% - 96px); }
  .work-faq { padding-inline: 48px; }
  .work-faq .leistungen-faq-list { gap: 24px; }
  .work-difference-card h3 { font-size: 25px; }
  .work-accompaniment h2 { font-size: 36px; }
  .work-statement h2 { width: 44%; font-size: 34px; }
  .work-statement-divider { left: 48.5%; }
  .work-statement-copy, .work-statement-tagline { left: 53.1%; width: 43.5%; }
  .work-process-surface { left: 19.4%; }
  .work-process-content { left: calc(19.4% + 28px); }
  .work-process-branch { width: calc(19.4% - 11px); }
  .work-process-step.is-expanded .work-process-surface { transform: translateX(100px); width: min(700px, calc(80.6% - 100px)); }
  .work-process-step.is-expanded .work-process-content { transform: translateX(100px); }
  .work-process-step.is-expanded .work-process-branch { width: calc(19.4% + 89px); }
  .work-process-step.is-expanded .work-process-details { width: min(644px, calc(80.6vw - 233.4px)); }
}
@media (max-width: 1100px) {
  .work-hero h1 { font-size: 56px; line-height: 62px; }
  .work-difference-card h3 { font-size: 23px; }
  .work-accompaniment-grid { gap: 20px; }
  .work-accompaniment-card h3 { font-size: 22px; line-height: 28px; }
  .work-statement { height: 360px; }
  .work-statement-copy { font-size: 18px; line-height: 28px; }
  .work-statement-tagline { top: 258px; }
  .work-faq .leistungen-faq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 950px) {
  .work-inner { width: calc(100% - 56px); }
  .work-hero h1 { font-size: 48px; line-height: 54px; }
  .work-hero-copy { max-width: 100%; }
  .work-difference, .work-accompaniment, .work-statement { height: auto; padding-block: 48px; }
  .work-difference .work-inner, .work-accompaniment .work-inner, .work-statement .work-inner { height: auto; }
  .work-difference :is(.work-eyebrow, h2, .work-intro), .work-accompaniment :is(.work-eyebrow, h2, .work-intro), .work-statement :is(.work-eyebrow, h2, .work-statement-copy, .work-statement-tagline) { position: static; width: 100%; }
  .work-difference h2, .work-accompaniment h2, .work-statement h2 { margin-top: 12px; font-size: 34px; line-height: 42px; }
  .work-difference .work-intro, .work-accompaniment .work-intro { margin-top: 18px; }
  .work-difference-grid, .work-accompaniment-grid { position: static; margin-top: 36px; grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .work-difference-card { height: auto; min-height: 250px; padding: 40px 26px; }
  .work-difference-card h3, .work-difference-card p { position: relative; inset: auto; width: 100%; }
  .work-difference-card p { margin-top: 26px; }
  .work-accompaniment-card { max-width: 540px; width: 100%; }
  .work-statement-divider { position: static; display: block; width: 100%; height: 3px; margin-block: 28px; }
  .work-statement-tagline { margin-top: 20px; }
  .work-process { padding: 48px 0; }
  .work-process-header { height: auto; padding-bottom: 48px; }
  .work-process-header h2 { height: auto; font-size: 34px; line-height: 42px; }
  .work-process-divider { display: none; }
  .work-process-list::after { bottom: -48px; height: 48px; }
  .work-process-surface { left: 36px; width: calc(100% - 36px); }
  .work-process-content { left: 60px; width: calc(100% - 84px); }
  .work-process-content :is(.work-process-title, .work-process-summary, .work-process-details) { max-width: 100%; }
  .work-process-branch, .work-process-step.is-expanded .work-process-branch { width: 25px; }
  .work-process-step.is-expanded .work-process-surface { transform: none; width: calc(100% - 36px); }
  .work-process-step.is-expanded .work-process-content { transform: none; }
  .work-process-step.is-expanded .work-process-details { width: 100%; }
  .work-faq { padding-inline: 28px; }
}
@media (max-width: 600px) {
  .work-inner { width: calc(100% - 48px); }
  .work-hero { height: auto; min-height: 480px; }
  .work-hero-inner { padding-block: 48px 84px; }
  .work-hero .work-eyebrow, .work-hero h1, .work-hero-copy { position: relative; top: auto; }
  .work-hero h1 { margin-top: 20px; font-size: clamp(34px, 8.8vw, 48px); line-height: 1.1; }
  .work-hero-copy { margin-top: 32px; font-size: 16px; line-height: 26px; }
  .work-hero-glow-blue { left: 50%; }
  .work-difference h2, .work-accompaniment h2, .work-statement h2, .work-process-header h2 { font-size: 30px; line-height: 38px; }
  .work-difference .work-intro { font-size: 16px; }
  .work-difference-card h3 { font-size: 23px; line-height: 30px; }
  .work-process-content { left: 54px; width: calc(100% - 76px); }
  .work-process-title { font-size: 22px; }
  .work-process-summary { font-size: 14px; line-height: 21px; }
  .work-process-step.is-expanded { height: max(390px, var(--process-open-height, 390px)); }
  .work-process-step.is-expanded .work-process-surface { height: max(310px, calc(var(--process-open-height, 390px) - 80px)); }
  .work-faq { padding: 40px 24px; }
  .work-faq .leistungen-faq-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .work-faq .leistungen-faq-toggle > span, .work-faq .leistungen-faq-answer { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .work-main *, .work-main *::before, .work-main *::after { transition: none !important; }
}