/* Führwitz 3.13 — full-width stacks and scroll storytelling. */
/* Content is readable before JavaScript and with reduced motion. */
.r, .card, [data-reveal] { opacity: 1; transform: none; }
#leistungen, #leistungen > .wrap, #leistungen .services-scroll-scene,
#leistungen .cards, #leistungen #svcCards {
  width: 100%; max-width: none; overflow: visible;
}
#leistungen > .wrap { padding-inline: 0; }
#leistungen .sec-h { width: auto; max-width: none; margin-inline: clamp(22px, 5vw, 88px); font-size: clamp(2.8rem, 7vw, 8rem); }
#leistungen .cards { display: block; padding-bottom: 0; }
#leistungen .card, #leistungen #svcCards .card {
  position: sticky; top: var(--stack-top, 84px); width: 100%; max-height: none;
  min-height: min(650px, 76svh); padding: clamp(30px, 5vw, 88px);
  display: flex; flex-direction: column; justify-content: center;
  border-radius: 0; overflow: hidden;
  background: #f4f2ed; color: #14181a;
  opacity: 1; transform: none;
  transition: none; box-shadow: 0 -12px 48px #0002;
  scroll-margin-top: 90px;
}
#leistungen .card + .card { margin-top: 0; }
#leistungen .card::before { background: linear-gradient(130deg, #00adbc15, #ff66000a); opacity: 1; }
#leistungen .card:nth-child(3n + 2) { background: #112a2e; color: #fff; }
#leistungen .card:nth-child(3n) { background: #f36825; color: #14181a; }
#leistungen .card .k { color: inherit; background: none; -webkit-text-fill-color: currentColor; font-size: clamp(.85rem, 1.3vw, 1.2rem); text-transform: uppercase; letter-spacing: .14em; }
#leistungen .card h3 { width: 100%; max-width: none; font-size: clamp(2.7rem, 8.1vw, 9.5rem); line-height: 1.02; letter-spacing: -.035em; margin: 0 0 clamp(24px, 4vw, 56px); overflow-wrap: anywhere; }
#leistungen .card h3 .gradtext { background: none; color: inherit; -webkit-text-fill-color: currentColor; animation: none; }
#leistungen .service-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: clamp(20px, 4vw, 64px); margin: 0; color: inherit; }
#leistungen .service-points li { display: block; padding-top: 18px; border-top: 1px solid currentColor; color: inherit; font-size: clamp(1rem, 1.65vw, 1.5rem); font-weight: 400; }
#leistungen .service-points li::before { display: none; }
#warum { overflow: clip; }
.why-heading { max-width: 1400px; }
.why-heading .sec-h { width: 100%; max-width: 100%; font-size: clamp(2.8rem, 6.8vw, 7rem); }
.why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 36px); max-width: 1400px; margin: 0 auto clamp(70px, 10vw, 150px); padding-inline: clamp(20px, 5vw, 30px); }
.why-card { position: relative; isolation: isolate; overflow: hidden; min-width: 0; aspect-ratio: 1; padding: clamp(24px, 3.4vw, 52px); border-radius: 0 0 28px 28px; background: #e6efed; display: flex; flex-direction: column; justify-content: space-between; }
.why-card:nth-child(4n + 2), .why-card:nth-child(4n + 3) { background: #142629; color: #fff; }
.why-card .k { font-size: .85rem; text-transform: uppercase; letter-spacing: .14em; }
.why-card h3 { font-size: clamp(2rem, 3.6vw, 3.8rem); line-height: 1.05; margin: 25px 0 18px; overflow-wrap: anywhere; }
.why-card h3 .gradtext { color: inherit; background: none; -webkit-text-fill-color: currentColor; }
#warum .why-card .why-points { color: inherit; font-size: clamp(1rem, 1.25vw, 1.15rem); margin-top: auto; }
.why-icon { position: absolute; z-index: -1; right: -12%; top: 12%; width: 80%; aspect-ratio: 1; opacity: .14; transform: rotate(-14deg); pointer-events: none; }
.why-icon .service-icon-svg { width: 100%; height: 100%; filter: none; }
.why-icon .service-icon-svg g { stroke: currentColor !important; stroke-width: 1; }
.motion-ready .why-card { opacity: 0; transform: translateX(var(--why-from, 100px)); transition: opacity 0.472s ease, transform 0.608s cubic-bezier(.16,1,.3,1); }
.why-card:nth-child(even) { --why-from: -100px; }
.motion-ready .why-card.has-entered { opacity: 1; transform: none; }
.motion-ready .scroll-reveal { opacity: var(--reveal-opacity, 1); transform: translateY(var(--reveal-y, 0px)); transition: none; }
#warum > .wrap.warum-after { max-width: 1440px; padding-top: 0; }
.name-story-section { background: #102124; color: #fff; border-radius: 28px; margin-block: 60px; }
.name-story-section h2 { color: #fff; }
.name-story-section p.name-story-copy { max-width: 100%; font-size: clamp(1.5rem, 3vw, 3rem); line-height: 1.4; text-align: center; }
.name-story-section .name-story-closing { color: #75d7d9; }
.write-visual { white-space: pre-wrap; }
.write-word { display: inline-block; white-space: nowrap; }
.write-char { position: relative; }
.motion-ready .write-char { opacity: 0; }
.motion-ready .write-char.is-written { opacity: 1; }
.sr-copy { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap > .about:not(.seo-about), .wrap > .about.seo-about { max-width: 1320px; width: 100%; margin-block: clamp(60px, 10vw, 140px); }
.about-txt h2 { font-size: clamp(3rem, 6vw, 6.6rem); line-height: 1; }
.motion-ready .about-img, .motion-ready .hero-about-portrait-frame { clip-path: inset(var(--portrait-clip, 0%) round 28px); transform: translateY(var(--portrait-y, 0px)) rotate(var(--portrait-rotate, 0deg)); transition: none; }
#kontakt.contact-invitation { position: relative; isolation: isolate; overflow: clip; min-height: 110svh; display: grid; place-items: center; padding: clamp(90px, 12vw, 180px) clamp(22px, 6vw, 110px); color: #fff; background: #0a0d0e; }
.invitation-content { position: relative; width: 100%; text-align: center; }
.invitation-kicker { display: block; text-transform: uppercase; letter-spacing: .18em; font-size: .85rem; margin-bottom: 32px; color: #9fbbb9; }
.contact-invitation h2 { font-size: clamp(3.2rem, 9.3vw, 11rem); line-height: .98; letter-spacing: -.035em; margin-bottom: 48px; }
.contact-invitation h2 > span { display: block; }
.invitation-brand { color: #61d2d5; }
.invitation-glow { position: absolute; inset: -15%; z-index: -1; background: radial-gradient(ellipse at 20% 65%, #00adbc55, transparent 45%), radial-gradient(ellipse at 85% 35%, #ff660044, transparent 40%); transform: rotate(var(--glow-rotate, 0deg)) scale(var(--glow-scale, 1)); }
.ref-logo img { width: 100%; height: 100%; object-fit: contain; }
.ref-logo.is-unavailable::after { content: 'Projekt ansehen ↗'; font-size: 1rem; color: #142629; }
.ref-logo.is-unavailable img { display: none; }
@media (max-width: 700px) {
  #leistungen .card, #leistungen #svcCards .card { min-height: 65svh; padding: 30px 22px 40px; border-radius: 0; }
  #leistungen .card h3 { font-size: clamp(2.5rem, 9.1vw, 4rem); }
  #leistungen .service-points { grid-template-columns: 1fr; gap: 12px; }
  #leistungen .service-points li { padding-top: 10px; font-size: 1.05rem; }
  .why-grid { grid-template-columns: 1fr; }
  .why-card { padding: 28px; aspect-ratio: auto; min-height: 360px; }
  .motion-ready .why-card { transition: opacity 0.945s ease, transform 1.35s cubic-bezier(.22,.61,.36,1); }
  .why-card h3 { font-size: clamp(2rem, 8vw, 3.2rem); }
  #warum .why-card .why-points { font-size: 1rem; }
  .name-story-section { border-radius: 20px; }
  .contact-invitation h2 { font-size: clamp(2.7rem, 10.7vw, 4.8rem); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .r, .card, .why-card, .scroll-reveal, .invitation-content, .hero p.sub, .hero-cta, .ln > span { opacity: 1 !important; transform: none !important; }
  .about-img, .hero-about-portrait-frame { clip-path: none !important; transform: none !important; }
  .write-char { opacity: 1; }
  #leistungen .card, #leistungen #svcCards .card { position: relative; top: auto; }
}
.ref-marquee:not(.is-enhanced) { overflow-x: auto; }
@media (prefers-reduced-motion: reduce) {
  .ref-marquee.is-enhanced { overflow-x: auto; touch-action: auto; }
  .ref-track { transform: none !important; }
  .ref-card[aria-hidden="true"] { display: none; }
}
#leistungen #svcCards .card:nth-child(3n + 2) { background: #112a2e; color: #fff; }
#leistungen #svcCards .card:nth-child(3n) { background: #f36825; color: #14181a; }
@media (min-width: 701px) and (max-width: 1000px) {
  .why-card { aspect-ratio: auto; min-height: 460px; }
}
/* 3.13.1 — quiet service transitions, typing and staged headlines. */
#leistungen .cards { padding-bottom: 0; }
#leistungen .service-card-icon { position: absolute; z-index: -1; right: -3%; top: 3%; width: min(55%, 700px); aspect-ratio: 1; opacity: .1; transform: rotate(-12deg); pointer-events: none; }
.service-card-icon .service-icon-svg { width: 100%; height: 100%; filter: none; }
.service-card-icon .service-icon-svg g { stroke: currentColor !important; stroke-width: 1; }
.motion-ready .write-char.is-cursor { opacity: 1; }
.motion-ready .write-char.is-cursor.cursor-before { color: transparent; }
.write-char.is-cursor::after { content: ''; position: absolute; left: 100%; top: .1em; width: 2px; height: 1.05em; background: #75d7d9; animation: typingCaret 1s step-end infinite; }
.write-char.is-cursor.cursor-before::after { left: 0; }
@keyframes typingCaret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.why-heading .sec-h { position: relative; padding-bottom: .2em; margin-bottom: 0; }
.why-grid { margin-top: clamp(35px, 6vw, 80px); }
@media (max-width: 700px) {
  #leistungen .service-card-icon { width: 90%; top: 8%; right: -18%; }
}
@media (prefers-reduced-motion: reduce) {
  .write-char.is-cursor.cursor-before { color: inherit; }
  .write-char.is-cursor::after { display: none; }
  .why-heading { position: static !important; }
  .why-heading .sec-h { opacity: 1 !important; transform: none !important; }
}

/* 3.13.3: cards meet edge-to-edge, including the following section. */
#leistungen { padding-bottom: 0; }
/* 3.14 — distinctive heading entrances and an editorial contact finale. */
.headline-reveal { perspective: 800px; }
.heading-mask { display: inline-block; max-width: 100%; overflow: clip; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.heading-word { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.motion-ready .headline-reveal .heading-word { opacity: 0; transform: translateY(115%) rotateX(-35deg); transform-origin: center bottom; transition: transform 1.147s cubic-bezier(.16,1,.3,1), opacity 0.743s ease; transition-delay: var(--heading-delay, 0ms); }
.motion-ready .headline-reveal.has-entered .heading-word { opacity: 1; transform: none; }
.headline-reveal .ln > span { animation: none; transform: none; }
.headline-reveal em { background: none; -webkit-text-fill-color: currentColor; color: #70d8d8; }
.why-heading .sec-h { padding-bottom: 0; }
#leistungen + .depth-group { margin: 0; padding: 0; background: #0a0d0e; }
#leistungen + .depth-group > #referenzen { position: relative; top: auto; margin-top: 0; border-radius: 0; }
/* Keep the service/reference seam in one opaque plane on every viewport. */
#leistungen { margin-bottom: 0; }
#leistungen > .wrap, #leistungen .services-scroll-scene, #leistungen .cards { margin-bottom: 0; padding-bottom: 0; }
.wrap > .about.profile-reveal { padding: 0; background: transparent; color: var(--ink); border-radius: 0; gap: clamp(28px, 5vw, 80px); }
.profile-reveal .about-txt h2, .profile-reveal .about-txt p, .profile-reveal .tagline { color: inherit; }
.profile-reveal .tagline { color: var(--teal-deep); }
.profile-reveal .about-img { border-radius: 0 0 24px 24px; background: #72d6d3; }
.motion-ready .profile-reveal .about-img { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.552s cubic-bezier(.16,1,.3,1); }
.motion-ready .profile-reveal.has-entered .about-img { clip-path: inset(0); }
.motion-ready .profile-reveal .about-img img { transform: scale(1.16); transition: transform 1.89s cubic-bezier(.16,1,.3,1); }
.motion-ready .profile-reveal.has-entered .about-img img { transform: scale(1); }
.motion-ready .profile-reveal .about-txt > :not(h2) { opacity: 0; transform: translateX(40px); transition: opacity 1.08s 0.297s ease, transform 1.35s 0.297s cubic-bezier(.16,1,.3,1); }
.motion-ready .profile-reveal.has-entered .about-txt > :not(h2) { opacity: 1; transform: none; }
.about-story { background: #102124; color: #fff; }
.about-story-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 100px); max-width: 1440px; align-items: start; }
.about-story-intro { position: sticky; top: 120px; }
.story-kicker, .story-number { display: block; color: #76d8d5; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; margin-bottom: 22px; }
.about-story-intro h2 { font-size: clamp(2.8rem, 4.5vw, 5rem); line-height: 1.03; margin-bottom: 28px; }
.about-story-intro p { max-width: 35ch; font-size: 1.15rem; color: #bbcdcc; }
.story-chapter + .story-chapter { margin-top: clamp(60px, 8vw, 120px); }
.story-chapter { border-top: 1px solid #ffffff30; padding-top: 26px; }
.story-chapter h3 { font-size: clamp(2rem, 3vw, 3.5rem); line-height: 1.08; margin-bottom: 26px; }
.story-chapter p { font-size: clamp(1.25rem, 1.9vw, 1.9rem); line-height: 1.55; }
#kontakt.contact-invitation { padding: clamp(70px, 9vw, 140px) clamp(18px, 5vw, 80px); min-height: 110svh; }
.contact-invitation .invitation-content { max-width: 1600px; }
.contact-invitation h2 { margin-bottom: 38px; font-size: clamp(2.1rem, 8vw, 9.5rem); line-height: 1.05; letter-spacing: -.035em; }
.contact-invitation h2 .contact-block { display: block; width: fit-content; max-width: 100%; padding: .13em .24em .18em; margin: 0 auto; color: #102124; background: #f4f2ed; }
.contact-invitation h2 .contact-block:nth-child(2) { background: #f36825; margin-left: 12%; }
.contact-invitation h2 .contact-block--brand { background: #70d8d8; margin-right: 12%; font-size: 1.22em; }
.motion-ready .contact-block { opacity: var(--block-opacity, 0); transform: translateX(var(--block-x, 110%)) rotate(var(--block-rotate, 5deg)); }
.invitation-action p { color: #c3d3d2; margin-bottom: 20px; font-size: clamp(1rem, 1.5vw, 1.25rem); }
.invitation-action .btn { min-height: 72px; padding: 22px 36px; font-size: clamp(1.1rem, 1.6vw, 1.5rem); gap: 30px; box-shadow: 0 0 45px #70d8d82b; }
.invitation-action .btn > span { font-size: 1.6em; }
.motion-ready .invitation-action { opacity: var(--action-opacity, 0); transform: translateY(var(--action-y, 30px)); }
.invitation-action:focus-within { opacity: 1 !important; transform: none !important; }
@media (max-width: 800px) {
  .about-story-layout { grid-template-columns: 1fr; }
  .about-story-intro { position: static; }
  .about-story-intro h2 { font-size: clamp(2.8rem, 9vw, 4rem); }
  .story-chapter p { font-size: clamp(1.25rem, 4.8vw, 1.5rem); }
  .contact-invitation h2 { font-size: clamp(1.9rem, 8vw, 4rem); }
  .invitation-action .btn { padding: 20px; gap: 16px; min-height: 66px; }
  .profile-reveal .about-txt h2 { font-size: clamp(2.5rem, 9vw, 4rem); }
}
@media (prefers-reduced-motion: reduce) {
  .headline-reveal .heading-word, .contact-block, .invitation-action, .profile-reveal .about-txt > *, .profile-reveal .about-img img { opacity: 1 !important; transform: none !important; }
  .profile-reveal .about-img { clip-path: none !important; }
}
/* 3.15 — no interstitial gaps; readable, deliberately paced entrances. */
body.home #leistungen.hero-follow-section,
body #leistungen.hero-follow-section { margin: 0; padding: 0; border-radius: 0; }
#leistungen.hero-follow-section > .wrap { margin: 0; padding: 0; }
#leistungen.hero-follow-section .services-scroll-scene { margin: 0; }
#leistungen + .depth-group #referenzen { position: relative; top: auto; min-height: auto; }
#leistungen + .depth-group { background: #0a0d0e; }
.why-title .why-intro-word, .why-title .why-rest { display: inline; }
.motion-ready .why-title .heading-word { transition-duration: 0.81s, 0.54s; }
.why-title::after { content: none; }
/* Matteo enters as one composition: portrait first, greeting and name follow. */
.profile-reveal .matteo-title { line-height: 1.1; overflow: clip; padding-bottom: .08em; }
.matteo-title > span { display: block; }
.matteo-title .matteo-name { color: var(--teal-deep); font-size: 1.12em; }
.motion-ready .profile-reveal .matteo-hello { opacity: 0; transform: translateY(35px); transition: opacity 0.878s 0.338s ease, transform 1.147s 0.338s cubic-bezier(.16,1,.3,1); }
.motion-ready .profile-reveal .matteo-name { opacity: 0; transform: translateY(110%) rotate(-4deg); transition: opacity 0.743s 0.81s ease, transform 1.282s 0.81s cubic-bezier(.16,1,.3,1); }
.motion-ready .profile-reveal .matteo-title.has-entered > span { opacity: 1; transform: none; }
.motion-ready .profile-reveal .about-txt > :not(h2) { transition-delay: 1.147s; }
#kontakt.contact-invitation { padding-block: clamp(70px, 9vw, 120px); }
.contact-invitation h2 { font-family: 'PT Sans', sans-serif; font-weight: 700; font-size: clamp(2rem, 7vw, 7.5rem); line-height: 1.05; letter-spacing: -.025em; }
.contact-invitation h2 .contact-block { width: 100%; text-align: left; padding: .18em .3em .22em; margin: 0; }
.contact-invitation h2 .contact-block:nth-child(2) { margin: 0; }
.contact-invitation h2 .contact-block--brand { margin: 0; font-family: 'PT Sans', sans-serif; font-size: 1.3em; }
.motion-ready .contact-block { opacity: 0; transform: translateX(80px); transition: opacity 0.81s ease, transform 1.282s cubic-bezier(.16,1,.3,1); }
.motion-ready .contact-block:nth-child(2) { transform: translateX(-80px); transition-delay: 0.27s; }
.motion-ready .contact-block:nth-child(3) { transform: translateY(55px); transition-delay: 0.54s; }
.motion-ready .invitation-content.has-entered .contact-block { opacity: 1; transform: none; }
.motion-ready .invitation-action { opacity: 0; transform: translateY(25px); transition: opacity 0.878s 0.945s ease, transform 1.147s 0.945s cubic-bezier(.16,1,.3,1); }
.motion-ready .invitation-content.has-entered .invitation-action { opacity: 1; transform: none; }
@media (max-width: 700px) {
  .contact-invitation h2 { font-size: clamp(1.85rem, 8.5vw, 3.7rem); }
  .profile-reveal .matteo-title { font-size: clamp(2.3rem, 8.5vw, 3.8rem); }
}
@media (prefers-reduced-motion: reduce) {
  .matteo-title > span, .contact-block, .invitation-action { opacity: 1 !important; transform: none !important; }
}
/* 3.15.1 — restored reference overlay and original centered invitation. */
#leistungen + .depth-group #referenzen { position: sticky; top: 0; min-height: 100svh; }
.contact-invitation h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(3.2rem, 9.3vw, 11rem); line-height: .98; letter-spacing: -.035em; margin-bottom: 48px; }
.contact-invitation h2 .contact-block,
.contact-invitation h2 .contact-block:nth-child(2) { width: 100%; margin: 0; padding: 0; text-align: center; background: none; color: #fff; }
.contact-invitation h2 .contact-block--brand { font-family: inherit; font-size: 1em; color: #61d2d5; }
@media (max-width: 700px) {
  .contact-invitation h2 { font-size: clamp(2.7rem, 10.7vw, 4.8rem); }
}
@media (prefers-reduced-motion: reduce) {
  #leistungen + .depth-group #referenzen { position: relative; min-height: 0; }
}
/* 3.15.3 — one continuous collaboration backdrop; rounded service tops. */
#leistungen .card, #leistungen #svcCards .card { border-radius: 32px 32px 0 0; }
#leistungen .card + .card { margin-top: -32px; }
.collaboration-flow { background: linear-gradient(125deg, var(--teal), var(--orange), var(--teal-deep)); background-size: 300% 300%; animation: meshMove 20s ease infinite; }
.collaboration-flow > .cband, .collaboration-flow > #warum { background: transparent; animation: none; }
.collaboration-flow > #warum::before { content: none; }
.collaboration-flow .why-heading { color: #fff; }
.collaboration-flow > #warum { padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(52px, 8vw, 100px); }
.collaboration-flow .why-grid { margin-bottom: 0; }
@media (max-width: 700px) {
  #leistungen .card, #leistungen #svcCards .card { border-radius: 24px 24px 0 0; }
  #leistungen .card + .card { margin-top: -24px; }
}
.hero p.sub, .hero-cta { animation-duration: 1.2s; }
/* 3.16 — expanded service copy and compact mobile contact. */
#leistungen.leistungen-detail-section .card h2 { font-size: clamp(2.5rem, 6.5vw, 7rem); line-height: 1.05; margin: 0 0 28px; max-width: 100%; }
#leistungen.leistungen-detail-section .card h2 .gradtext { color: inherit; background: none; -webkit-text-fill-color: currentColor; }
.service-description { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 4vw, 60px); margin-bottom: 32px; }
#leistungen .service-description p { color: inherit; max-width: none; font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.65; }
#leistungen + .depth-group #referenzen { top: 0; padding-top: calc(var(--site-header-height, 74px) + 30px); }
@media (max-width: 700px) {
  #kontakt.contact-invitation { min-height: 0; padding: 54px 20px 58px; }
  .invitation-kicker { margin-bottom: 24px; }
  .contact-invitation h2 { font-size: clamp(2.1rem, 9.1vw, 3.5rem); margin-bottom: 30px; }
  .invitation-action .btn { min-height: 58px; padding: 16px 20px; }
  .service-description { grid-template-columns: 1fr; gap: 18px; margin-bottom: 28px; }
  #leistungen.leistungen-detail-section .card h2 { font-size: clamp(2.2rem, 8.7vw, 3.7rem); }
}

/* The name story is a full section; Why itself supplies the reference overlap. */
.name-story-section { width: 100%; max-width: none; margin: 0; border-radius: 0; background: #102124; animation: none; }
.why-title[data-static-heading] { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .about-story-layout { grid-template-columns: minmax(0, 1fr); }
  .about-story-intro { position: static; }
  .hero--about-page .hero-about-portrait-mobile { filter: none; }
  .about-story-copy { min-width: 0; }
}

/* Contact: the same dark canvas, generous type and open portrait treatment. */
#kontakt.contact-studio { isolation: isolate; overflow: clip; background: #102124; color: #fff; padding: clamp(128px, 14vw, 190px) 0 clamp(64px, 8vw, 120px); scroll-margin-top: 0; }
#kontakt.contact-studio::before { content: none; }
.contact-studio > .wrap { max-width: 1440px; }
.contact-studio-glow { position: absolute; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(ellipse at 95% 0%, #c363223d, transparent 45%), radial-gradient(ellipse at 0% 60%, #00adbc30, transparent 45%); }
.contact-intro { max-width: 1100px; margin-bottom: clamp(42px, 6vw, 80px); }
.contact-intro h1 { color: #fff; font-size: clamp(3.5rem, 8.8vw, 8.5rem); line-height: 1.02; margin: 0 0 28px; }
.contact-intro h1 .contact-title-accent { color: #75d7d9; }
.contact-intro > p { max-width: 58ch; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.65; color: #d0dfdd; }
.contact-studio-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.contact-person { min-width: 0; }
.contact-person-portrait { width: min(100%, 300px); background: #1b4043; border-radius: 32px 32px 0 0; overflow: hidden; margin-bottom: 32px; }
.contact-person-portrait img { display: block; width: 100%; height: 300px; object-fit: contain; object-position: center bottom; }
.contact-person h2 { font-size: clamp(2rem, 3vw, 3.25rem); line-height: 1.08; margin-bottom: 20px; color: #fff; }
.contact-person p, .contact-promises { color: #d0dfdd; font-size: 1.08rem; line-height: 1.65; }
.contact-promises { list-style: none; padding: 0; margin: 28px 0 0; }
.contact-promises li { position: relative; padding: 16px 0 16px 26px; border-top: 1px solid #ffffff24; }
.contact-promises li::before { content: '↗'; position: absolute; left: 0; color: #75d7d9; }
.contact-paper { scroll-margin-top: 100px; position: relative; isolation: isolate; background: #f1f4ef; color: #102124; padding: clamp(26px, 4vw, 54px); border-radius: 32px 32px 0 0; min-width: 0; }
.contact-paper-icon { position: absolute; top: 22px; right: 20px; width: 160px; opacity: .055; z-index: -1; pointer-events: none; transform: rotate(-12deg); }
.contact-paper-icon svg { display: block; width: 100%; }
.contact-form-intro { margin-bottom: 32px; }
.contact-paper .story-kicker { color: #286165; margin-bottom: 16px; }
.contact-paper h2 { font-size: clamp(2.2rem, 3.5vw, 3.75rem); line-height: 1.06; margin: 0 0 16px; color: #102124; }
.contact-form-intro p, .contact-success p { color: #465a59; font-size: 1rem; line-height: 1.6; }
.contact-studio .contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 0; width: 100%; }
.contact-studio .contact-form > div { min-width: 0; }
.contact-studio .contact-form label { font-size: 1rem; color: #102124; margin-bottom: 8px; }
.contact-studio .contact-form input:is([type=text], [type=email], [type=number]), .contact-studio .contact-form textarea { width: 100%; min-height: 54px; padding: 14px 16px; border: 1px solid #899e9b; border-radius: 12px 12px 0 0; background: #fff; color: #102124; font-family: inherit; font-size: 16px; line-height: 1.5; }
.contact-studio .contact-form textarea { min-height: 168px; resize: vertical; }
.contact-studio .contact-form ::placeholder { color: #607270; opacity: 1; }
.contact-studio .contact-form :is(input, textarea, button, a):focus-visible { outline: 3px solid #087e87; outline-offset: 3px; }
.contact-studio .form-foot { display: flex; flex-direction: column; align-items: stretch; gap: 24px; margin: 0; }
.contact-studio .form-check { display: flex; gap: 12px; min-width: 0; line-height: 1.55; }
.contact-studio .form-check input { flex: 0 0 22px; width: 22px; height: 22px; margin: 2px 0 0; accent-color: #087e87; }
.contact-studio .form-check a { color: #12636b; text-underline-offset: 3px; }
.contact-studio .contact-submit { display: flex; justify-content: space-between; width: 100%; min-height: 60px; padding: 17px 24px; border: 0; border-radius: 0 24px 0 0; font-family: inherit; font-size: 1.1rem; background: #087e87; color: #fff; cursor: pointer; }
.contact-studio .contact-submit:hover { background: #12636b; color: #fff; }
.contact-error { background: #fce7de; color: #842d13; border-left: 4px solid #b24119; padding: 18px; margin-bottom: 26px; line-height: 1.5; }
.contact-error p { margin: 6px 0 0; }
.contact-success { padding: 24px 0; }
.contact-state-icon { width: 64px; height: 64px; color: #087e87; margin-bottom: 26px; }
.contact-success .btn { margin-top: 28px; }
@media (max-width: 900px) {
  .contact-studio-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .contact-paper { grid-row: 1; }
  .contact-person { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 28px; }
  .contact-person-portrait { margin: 0; align-self: start; }
  .contact-person-portrait img { height: 190px; }
}
@media (max-width: 600px) {
  #kontakt.contact-studio { padding-top: 116px; }
  .contact-intro h1 { font-size: clamp(2.75rem, 11.5vw, 4.3rem); }
  .contact-intro .story-kicker { font-size: .72rem; letter-spacing: .1em; }
  .contact-paper { padding: 26px 20px; border-radius: 24px 24px 0 0; }
  .contact-paper h2 { font-size: clamp(2rem, 8.4vw, 2.8rem); }
  .contact-studio .contact-form { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .contact-person { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .contact-person-portrait { width: 160px; }
}

/* Native mobile reference swipes leave vertical page scrolling to the browser. */
.ref-marquee.is-native { overflow-x: auto; overflow-y: hidden; touch-action: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 20px; padding-inline: 20px; mask-image: none; -webkit-mask-image: none; cursor: auto; }
.ref-marquee.is-native .ref-track { transform: none !important; will-change: auto; }
.ref-marquee.is-native .ref-card { scroll-snap-align: start; }
.ref-marquee.is-native .ref-card[aria-hidden="true"] { display: none; }
.services-page .hero--services { position: sticky; top: var(--services-hero-top, 0px); z-index: 0; padding-bottom: 64px; }
.services-page #leistungen.leistungen-detail-section { position: relative; z-index: 1; padding: 0; margin-top: -32px; }
.services-page #leistungen.leistungen-detail-section > .wrap { padding: 0; }
@media (max-width: 700px) {
  .services-page #leistungen.leistungen-detail-section { margin-top: -24px; }
}
@media (prefers-reduced-motion: reduce) {
  .services-page .hero--services { position: relative; top: auto; }
}

/* Mobile about text: no per-character DOM, scroll-linked writes or moving caret. */
.mobile-write .mobile-write-word { opacity: 0; }
.mobile-write.is-reading .mobile-write-word { animation: mobileWordReveal 240ms ease-out var(--word-delay, 0ms) both; }
@keyframes mobileWordReveal { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .mobile-write .mobile-write-word { opacity: 1; animation: none !important; }
}

/* SEO FAQs follow the invitation on the same dark canvas. Native accordions work without JS. */
#faq.seo-faq-section { background: #0a0d0e; color: #fff; padding: clamp(56px, 8vw, 112px) 0; border-top: 1px solid #ffffff20; }
.seo-faq-layout { max-width: 1440px; display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.seo-faq-intro h2 { font-size: clamp(3rem, 5vw, 5.5rem); line-height: 1.04; margin: 0 0 24px; color: #fff; }
.seo-faq-intro p { color: #bad0cd; font-size: 1.1rem; line-height: 1.65; max-width: 32ch; }
.seo-faq-list { display: grid; gap: 16px; min-width: 0; }
.seo-faq-card { background: #142b2f; color: #fff; border: 1px solid #ffffff20; border-radius: 24px 24px 0 0; overflow: hidden; }
.seo-faq-card:nth-child(3n + 1) { background: #e6efeb; color: #102124; border-color: transparent; }
.seo-faq-question { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(22px, 2.5vw, 34px); font-family: var(--font-body); font-size: clamp(1.1rem, 1.65vw, 1.45rem); font-weight: 700; line-height: 1.4; list-style: none; cursor: pointer; }
.seo-faq-question::-webkit-details-marker { display: none; }
.seo-faq-question::marker { content: ''; }
.seo-faq-question:focus-visible { outline: 3px solid #00adbc; outline-offset: -5px; }
.seo-faq-symbol { font-size: 2rem; font-weight: 400; line-height: 1; flex: 0 0 auto; transition: transform 220ms ease; }
.seo-faq-card[open] .seo-faq-symbol { transform: rotate(45deg); }
.seo-faq-body { padding: 0 clamp(22px, 2.5vw, 34px) clamp(22px, 2.5vw, 34px); font-size: 1.05rem; line-height: 1.75; }
.seo-faq-body p { margin: 0; color: inherit; }
@media (max-width: 900px) {
  .seo-faq-layout { grid-template-columns: minmax(0, 1fr); }
  .seo-faq-intro p { max-width: 54ch; }
}
@media (prefers-reduced-motion: reduce) {
  .seo-faq-symbol { transition: none; }
}

/* Unified, quieter hero palette. A light teal pool keeps the black mark legible. */
.hero {
  --hero-gradient: radial-gradient(ellipse at 23% 38%, #83c9c5b3 0%, transparent 48%), linear-gradient(125deg, #217d84 0%, #a96539 58%, #173d42 100%);
  background: var(--hero-gradient);
}
.hero .hero-blobs, .hero[data-theme="hero"]::before, .hero[data-theme="hero"]::after { display: none; }
.hero .hero-veil { background: linear-gradient(180deg, #10212405, #1021241a); pointer-events: none; }
.hero.hero--home, .hero.seo-hero--new, .hero.hero--subpage { min-height: min(820px, calc(100svh - 74px)); }
.hero .hero-split-wrap { width: 100%; max-width: 1600px; margin-inline: auto; padding: clamp(24px, 4svh, 52px) clamp(24px, 4vw, 64px); }
.hero .hero-split { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 64px); }
.hero .hero-split .hero-icon { width: min(34vw, 52svh, 480px); margin: 0 auto; }
.hero .hero-split .hero-icon img.brand-eyes { width: 110%; max-width: none; }
.hero .hero-split-card { margin: 0; min-width: 0; padding: clamp(28px, 3.5vw, 52px); }
.hero .hero-split-card h1 { font-size: clamp(2.2rem, 4.2vw, 4.8rem); }
.hero.hero--about-page .hero-about-portrait { height: min(620px, 68svh); }
.services-page .hero--services { padding-bottom: 32px; }
@media (max-width: 900px) {
  .hero { --hero-gradient: radial-gradient(ellipse at 50% 18%, #8accc6b3 0%, transparent 47%), linear-gradient(150deg, #287f86 0%, #9d603a 62%, #173d42 100%); }
  .hero.hero--home, .hero.seo-hero--new, .hero.hero--subpage { min-height: 0; }
  .hero .hero-split-wrap { width: min(100% - 28px, 720px); padding: clamp(18px, 3svh, 28px) 0 24px; }
  .hero .hero-split { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hero .hero-split .hero-icon { width: min(58vw, 32svh, 300px); }
  .hero .hero-split-card { padding: clamp(24px, 5vw, 34px); }
  .hero .hero-split-card h1, .hero.hero--home .hero-split-card h1, .hero.seo-hero--new .hero-split-card h1 { font-size: clamp(2rem, 7.3vw, 3.4rem); max-width: 100%; }
  .hero.hero--about-page .hero-about-portrait-mobile { width: auto; max-width: 94%; height: clamp(180px, 32svh, 300px); }
  .services-page .hero--services { padding-bottom: 24px; }
}
@media (max-height: 520px) and (min-width: 600px) and (max-width: 900px) {
  .hero .hero-split, .hero.hero--about-page .hero-split { display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); align-items: center; gap: 22px; }
  .hero .hero-split-wrap { width: calc(100% - 36px); max-width: none; padding-block: 22px; }
  .hero .hero-split .hero-icon { width: min(26vw, 58svh); }
  .hero .hero-split-card { padding: 24px; }
  .hero .hero-split-card h1, .hero.hero--home .hero-split-card h1, .hero.seo-hero--new .hero-split-card h1 { font-size: clamp(1.85rem, 3.8vw, 2.3rem); }
  .hero.hero--about-page .hero-about-portrait-mobile { display: none; }
  .hero.hero--about-page .hero-about-portrait-wrap { display: flex; }
  .hero.hero--about-page .hero-about-portrait { height: 65svh; }
}
/* The contact page already has the dark canvas; scale its opening to the viewport too. */
#kontakt.contact-studio { padding-top: clamp(100px, 16svh, 160px); }
.contact-intro h1 { font-size: clamp(3rem, 8vw, 7.5rem); }
@media (max-width: 600px) { .contact-intro h1 { font-size: clamp(2.75rem, 11.5vw, 4.3rem); } }

.hero--not-found .hero-icon { width: clamp(90px, 18svh, 180px); }
.hero--not-found > .wrap { padding-block: clamp(30px, 5svh, 64px); }
.hero--not-found { --hero-gradient: radial-gradient(ellipse at 50% 18%, #76b3ad99 0%, transparent 42%), linear-gradient(140deg, #205459, #142d31); }

/* Full-screen heroes, with navigation included in the visible viewport. */
.hero, .hero.hero--home, .hero.seo-hero--new, .hero.hero--subpage, .hero.hero--not-found { min-height: calc(100svh - 74px); }
.hero.hero--about-page .hero-split-wrap { padding-bottom: 0; }
.hero.hero--about-page .hero-split { flex: 1 1 auto; align-items: stretch; }
.hero.hero--about-page .hero-about-portrait-wrap { align-self: stretch; align-items: flex-end; }
.hero.hero--about-page .hero-about-portrait-frame { opacity: 1; transform: none; clip-path: none; animation: none; border-radius: 28px 28px 0 0; }
.hero.hero--about-page .hero-split-card { align-self: center; margin-bottom: 28px; }
.hero.hero--not-found .hero-icon { width: clamp(260px, 40svh, 460px); max-width: 85vw; margin-bottom: 12px; }
@media (max-width: 900px) {
  .hero, .hero.hero--home, .hero.seo-hero--new, .hero.hero--subpage, .hero.hero--not-found { min-height: calc(100svh - 64px); }
  .hero.hero--about-page .hero-split { display: flex; flex-direction: column; gap: 22px; }
  .hero.hero--about-page .hero-split-card { order: 0; margin-bottom: 0; flex: 0 0 auto; }
  .hero.hero--about-page .hero-about-portrait-mobile { order: 1; align-self: center; position: static; left: auto; transform: none; margin: auto 0 0; display: block; flex: 0 0 auto; }
}
@media (max-height: 520px) and (min-width: 600px) and (max-width: 900px) {
  .hero.hero--about-page .hero-split { display: grid; align-items: stretch; }
  .hero.hero--about-page .hero-about-portrait-mobile { display: none; }
  .hero.hero--about-page .hero-split-card { margin-bottom: 22px; }
}
.contact-intro { min-height: calc(100svh - 74px - clamp(100px, 16svh, 160px) - clamp(42px, 6vw, 80px)); display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 900px) { .contact-intro { min-height: calc(100svh - 64px - clamp(100px, 16svh, 160px) - clamp(42px, 6vw, 80px)); } }

/* Extend the desktop panel to the screen edge while keeping text and portrait positions. */
@media (min-width: 901px) {
  .hero .hero-split-card {
    --hero-edge-space: calc(clamp(24px, 4vw, 64px) + max(0px, (100vw - 1600px) / 2));
    margin-right: calc(-1 * var(--hero-edge-space));
    padding-right: calc(clamp(28px, 3.5vw, 52px) + var(--hero-edge-space));
    border-top-right-radius: 0;
  }
}

/* Mobile about hero: portrait rests directly above the text and CTA panel. */
@media (max-width: 900px) {
  .hero.hero--about-page .hero-split { row-gap: 0; }
  .hero.hero--about-page .hero-about-portrait-mobile { order: -1; margin: auto 0 -1px; }
}

/* Contact form without a portrait column. */
.contact-studio-grid { grid-template-columns: minmax(0, 1fr); max-width: 900px; margin-inline: auto; }

.contact-form-intro h2 { text-align: center; }

/* Compact mobile contact page: content determines the opening height. */
@media (max-width: 900px) {
  #kontakt.contact-studio { padding-top: 36px; padding-bottom: 44px; }
  .contact-intro { min-height: 0; margin-bottom: 28px; }
  .contact-intro .story-kicker { margin-bottom: 14px; }
  .contact-intro h1 { margin-bottom: 18px; }
  .contact-intro > p { line-height: 1.55; }
  .contact-form-intro { margin-bottom: 24px; }
  .contact-studio .contact-form { gap: 18px; }
  .contact-studio .form-foot { gap: 20px; }
}

/* Contact opening and form share the same horizontal alignment. */
.contact-intro { max-width: 900px; margin-inline: auto; }