/* Leistungen: a service index, original photographs and a shared reflection. */
.services-page { --services-space: clamp(64px, 7vw, 108px); --services-nav-height: 70px; }
.services-page figure { margin: 0; }
.services-page h1, .services-page h2, .services-page h3 { hyphens: none; }
.services-page h1 { font-size: clamp(44px, 5.5vw, 80px); line-height: 1.12; letter-spacing: -.055em; }
.services-page h2 { font-size: clamp(30px, 3.15vw, 46px); line-height: 1.22; letter-spacing: -.04em; }
.services-page h3 { font-size: 23px; line-height: 1.35; letter-spacing: -.025em; }
.services-page .eyebrow { color: var(--brand-dark); margin-bottom: 22px; }
.services-page p:not(.eyebrow) { font-size: 18px; line-height: 1.8; color: var(--muted); }
.services-page [id] { scroll-margin-top: calc(var(--services-nav-height) + 12px); }
.services-intro { padding-block: clamp(50px, 6vw, 88px) clamp(40px, 5vw, 64px); }
.services-intro .services-lead { max-width: 780px; margin-top: 28px; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.75; }
.services-navigation { position: relative; z-index: 30; border-block: 1px solid var(--line); background: #fff; }
.has-services-nav .services-navigation { position: sticky; top: var(--header-height); }
.services-navigation-track { position: relative; display: flex; column-gap: clamp(28px, 4vw, 64px); }
.services-navigation a { position: relative; display: flex; align-items: center; min-height: 70px; padding-block: 18px; font-size: 12px; font-weight: 500; line-height: 1.5; text-decoration: none; transition: color 220ms; }
.services-navigation a[aria-current="location"] { color: var(--brand-dark); }
.services-navigation-line { display: none; position: absolute; top: 0; left: 0; height: 2px; width: var(--indicator-width, 0px); background: var(--brand); transform: translate(var(--indicator-x, 0px), var(--indicator-y, 0px)); pointer-events: none; transition: transform 380ms var(--ease), width 380ms var(--ease); }
.has-services-nav .services-navigation-line { display: block; }
.services-overview { display: grid; grid-template-columns: .85fr 1.35fr; gap: clamp(40px, 6vw, 96px); padding-block: var(--services-space); }
.services-overview-heading { padding-top: 12px; }
.services-overview-heading h2 { font-size: clamp(28px, 2.7vw, 40px); }
.services-heading-rule { display: block; width: 45px; height: 2px; margin-top: 30px; background: var(--brand); }
.services-list { list-style: none; border-top: 1px solid var(--line); }
.services-list li { border-bottom: 1px solid var(--line); }
.services-list-link { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) 20px; align-items: center; gap: 20px; padding: 25px 15px 25px 0; text-decoration: none; transition: background 300ms; }
.services-list-label { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.55; letter-spacing: -.02em; transition: transform 300ms var(--ease); }
.services-list-mark { width: 12px; height: 1px; background: #a5bdb9; transform-origin: left; transition: background 300ms, transform 300ms; }
.services-list-link .icon { width: 18px; height: 18px; color: var(--brand-dark); opacity: .6; transition: transform 300ms var(--ease), opacity 300ms; }
.services-list-link.is-reading, .services-list-link:focus-visible { background: #f2f8f7; }
.services-list-link.is-reading .services-list-mark, .services-list-link:focus-visible .services-list-mark { background: var(--brand); transform: scaleX(1.3); }
.services-list-link:focus-visible .services-list-label { transform: translateX(4px); }
.services-planning { padding-block: var(--services-space); background: #f5f7f6; }
.services-section-heading { margin-bottom: 48px; }
.services-planning-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.services-planning-copy { padding-block: 10px; max-width: 480px; }
.services-planning-copy > p { margin-top: 20px; }
.services-planning-note { display: flex; align-items: center; gap: 11px; margin-top: 30px; font-size: 11px; color: var(--brand-dark); letter-spacing: .04em; }
.services-planning-note .brand-dot { width: 5px; height: 5px; }
.services-photographs { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px 20px; align-items: start; }
.services-photo-preparation { grid-row: 1 / 3; padding-top: 55px; }
.services-photo-guidance { max-width: 86%; }
.services-photo-crop { overflow: hidden; border-radius: 5px; background: #dce1dd; }
.services-photo img { width: 100%; height: auto; object-fit: cover; }
.services-photo-preparation img { aspect-ratio: 3 / 4; }
.services-photo-material img { aspect-ratio: 4 / 3; }
.services-photo-guidance img { aspect-ratio: 1; object-position: 50% 48%; }
.services-photo figcaption { padding-top: 9px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.services-responsibilities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); margin-top: clamp(48px, 5vw, 76px); padding-top: 34px; border-top: 1px solid #dbe2de; }
.services-detail-rule { display: block; width: 22px; height: 2px; background: var(--brand); margin-bottom: 23px; }
.services-responsibility h3 { margin-bottom: 15px; }
.services-reflection { background: var(--logo-grey); padding-block: var(--services-space); color: white; }
.services-reflection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(44px, 8vw, 128px); align-items: center; }
.services-reflection .eyebrow { color: #c4edeb; }
.services-reflection-copy > p:not(.eyebrow) { margin-top: 24px; max-width: 550px; color: #f0f0f0; }
.services-reflection .text-link { margin-top: 24px; color: #def5f3; }
.services-reflection .text-link:focus-visible { outline-color: #b4efec; }
.services-reflection-diagram { padding-top: 8px; }
.services-reflection-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: center; }
.services-reflection-inputs p { color: white !important; font-size: clamp(21px, 2.2vw, 31px) !important; line-height: 1.35 !important; letter-spacing: -.035em; }
.services-reflection-inputs span { color: #d4d9d8; }
.services-reflection-lines { width: 100%; height: 100px; display: block; margin-top: 20px; color: #98d8d4; }
.services-reflection-lines path { stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.services-reflection-diagram p.services-reflection-result { color: white; font-size: clamp(20px, 2vw, 28px); text-align: center; line-height: 1.4; letter-spacing: -.025em; padding-top: 16px; }
.services-settings { display: grid; grid-template-columns: .85fr 1.35fr; gap: 0 clamp(40px, 6vw, 96px); padding-block: var(--services-space) 0; }
.services-settings-heading { padding-top: 16px; }
.services-settings-list { list-style: none; border-top: 1px solid var(--line); }
.services-settings-list li { display: flex; align-items: center; gap: 20px; padding: 26px 16px 26px 0; border-bottom: 1px solid var(--line); font-size: clamp(24px, 2.7vw, 38px); line-height: 1.3; letter-spacing: -.04em; transition: background 280ms; }
.services-setting-dot { flex-shrink: 0; width: 6px; height: 6px; background: var(--brand); border-radius: 50%; margin-left: 3px; transition: transform 280ms var(--ease); }
.services-contact { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 36px; margin-top: var(--services-space); border-top: 1px solid var(--line); padding-block: 42px; }
.services-contact p { max-width: 660px; }
.services-contact .button { flex-shrink: 0; }
@media (hover: hover) {
    .services-navigation a:hover { color: var(--brand-dark); }
    .services-list-link:hover { background: #f2f8f7; }
    .services-list-link:hover .services-list-label { transform: translateX(4px); }
    .services-list-link:hover .icon { transform: translate(2px, -2px); opacity: 1; }
    .services-list-link:hover .services-list-mark { background: var(--brand); transform: scaleX(1.3); }
    .services-settings-list li:hover { background: #f2f8f7; }
    .services-settings-list li:hover .services-setting-dot { transform: scale(1.4); }
}
@media (prefers-reduced-motion: no-preference) {
    .services-intro h1 { animation: services-intro 650ms var(--ease) both; }
    .services-intro .services-lead { animation: services-intro 650ms 80ms var(--ease) both; }
    [data-services-image].is-revealing { animation: services-photo-open 900ms var(--ease) both; }
    [data-services-reflection].is-revealing .services-reflection-lines path { animation: services-connect 1000ms ease both; }
    [data-services-reflection].is-revealing .services-reflection-result { animation: services-intro 550ms 350ms var(--ease) both; }
}
@keyframes services-intro { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes services-photo-open { from { clip-path: inset(0 100% 0 0 round 5px); } to { clip-path: inset(0 0 0 0 round 5px); } }
@keyframes services-connect { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (max-width: 1100px) {
    .services-overview, .services-settings { grid-template-columns: .8fr 1.2fr; gap: 0 40px; }
    .services-list-link { gap: 14px; }
    .services-planning-grid { grid-template-columns: .85fr 1.15fr; gap: 38px; }
    .services-photographs { gap: 20px 14px; }
    .services-responsibilities { gap: 28px; }
}
@media (max-width: 1000px) {
    .services-planning-grid { grid-template-columns: 1fr; gap: 34px; }
    .services-planning-copy { max-width: 650px; }
    .services-photographs { max-width: 760px; width: 100%; gap: 24px; }
    .services-photo-preparation { padding-top: 36px; }
    .services-reflection-grid { grid-template-columns: 1fr; gap: 48px; }
    .services-reflection-diagram { width: min(100%, 580px); justify-self: center; }
    .services-reflection-inputs p { font-size: 30px !important; }
}
@media (max-width: 800px) {
    .services-overview, .services-settings { grid-template-columns: 1fr; gap: 34px; }
    .services-heading-rule { display: none; }
    .services-overview-heading { padding-top: 0; }
    .services-overview-heading h2 br { display: none; }
    .services-list-label { font-size: 21px; }
    .services-responsibilities { grid-template-columns: 1fr; gap: 30px; }
    .services-responsibility { display: grid; grid-template-columns: .6fr 1fr; gap: 16px 25px; }
    .services-detail-rule { grid-column: 1 / -1; margin-bottom: 0; }
    .services-responsibility h3 { margin: 0; }
    .services-settings-heading { padding-top: 0; }
    .services-settings-heading br { display: none; }
    .services-contact { flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 20px; }
}
@media (max-width: 600px) {
    .services-page { --services-nav-height: 100px; }
    .services-page .eyebrow { font-size: 10px; margin-bottom: 17px; }
    .services-page h1 { font-size: clamp(37px, 9.2vw, 53px); }
    .services-page h2 { font-size: clamp(28px, 7.2vw, 36px); }
    .services-page h3 { font-size: 21px; }
    .services-page p:not(.eyebrow) { font-size: 16.8px; line-height: 1.8; }
    .services-intro { padding-block: 38px 34px; }
    .services-intro .services-lead { margin-top: 22px; }
    .services-navigation-track { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
    .services-navigation a { min-height: 50px; padding-block: 13px; font-size: 10px; width: fit-content; max-width: 100%; }
    .services-navigation a:focus-visible { outline-offset: 1px; }
    .services-list-link { padding-block: 21px; gap: 12px; grid-template-columns: 12px minmax(0, 1fr) 18px; }
    .services-list-label { font-size: 18px; }
    .services-section-heading { margin-bottom: 32px; }
    .services-planning-copy > p { margin-top: 17px; }
    .services-planning-note { margin-top: 23px; }
    .services-photographs { grid-template-columns: 1fr 1fr; gap: 22px 14px; }
    .services-photo-preparation { grid-column: 1 / -1; grid-row: auto; padding-top: 0; max-width: 85%; }
    .services-photo-preparation img { aspect-ratio: 4 / 5; object-position: center; }
    .services-photo-guidance { max-width: none; margin-top: 28px !important; }
    .services-photo-guidance img { aspect-ratio: 4 / 5; }
    .services-photo-material { padding-top: 0; }
    .services-photo-material img { aspect-ratio: 1; object-position: 45% center; }
    .services-photo figcaption { font-size: 9px; }
    .services-responsibilities { margin-top: 40px; padding-top: 28px; }
    .services-responsibility { display: block; }
    .services-detail-rule { margin-bottom: 17px; }
    .services-responsibility h3 { margin-bottom: 12px; }
    .services-reflection-grid { gap: 40px; }
    .services-reflection-copy > p:not(.eyebrow) { margin-top: 22px; }
    .services-reflection-inputs { gap: 8px; }
    .services-reflection-inputs p { font-size: clamp(19px, 5.3vw, 27px) !important; }
    .services-reflection-lines { height: 82px; }
    .services-reflection-diagram p.services-reflection-result { font-size: 22px; line-height: 1.4; }
    .services-settings-list li { gap: 18px; font-size: clamp(24px, 6.2vw, 31px); padding-block: 22px; }
    .services-contact { padding-block: 30px; }
    .services-contact .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .services-page *, .services-page *::before, .services-page *::after { animation: none !important; transition: none !important; }
}
@media print {
    .services-navigation { display: none; }
    .services-page [id] { scroll-margin-top: 0; }
    .services-page section { padding-block: 28px; }
    .services-reflection { background: white; color: black; }
    .services-reflection p, .services-reflection .eyebrow, .services-reflection span { color: black !important; }
    .services-contact .button { display: none; }
}