@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/_vinext_fonts/cormorant-garamond-55cbec71eba1/cormorant-garamond-e99b45a2.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/_vinext_fonts/inter-9df0d028785c/inter-fc83e075.woff2') format('woff2'); }
:root {
  --ink: #171715;
  --paper: #f0ece4;
  --cream: #f7f3eb;
  --rust: #a84d31;
  --muted: #7d796f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { --font-display: 'Cormorant Garamond'; --font-sans: 'Inter'; margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--font-sans), sans-serif; }
a { color: inherit; text-decoration: none; }

.site-header {
  position: absolute; z-index: 10; top: 0; left: 0; width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 4vw; color: white; border-bottom: 1px solid rgba(255,255,255,.22);
}
.wordmark { display: flex; align-items: center; gap: 12px; font-size: 13px; line-height: 1.15; letter-spacing: .04em; text-transform: uppercase; }
.wordmark small { font-size: 10px; letter-spacing: .24em; opacity: .72; }
.wordmark-mark { display: grid; place-items: center; position: relative; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.7); border-right: 0; background: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7)) right top / 1px 28% no-repeat, linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7)) right bottom / 1px 52% no-repeat; font-family: var(--font-display); font-size: 23px; }
.wordmark-mark::before,
.wordmark-mark::after { content: ""; position: absolute; z-index: 1; height: 1.5px; border-radius: 2px; background: #d58968; transform: rotate(-28deg); transform-origin: left center; }
.wordmark-mark::before { left: 25px; top: 18px; width: 15px; }
.wordmark-mark::after { left: 28px; top: 23px; width: 12px; }
nav { display: flex; align-items: center; gap: 28px; font-size: 12px; letter-spacing: .05em; }
nav a { opacity: .85; }
nav a:hover, nav a:focus-visible { opacity: 1; }
.nav-contact { border: 1px solid rgba(255,255,255,.55); padding: 11px 16px; }

.hero { position: relative; min-height: 100svh; color: white; overflow: hidden; display: flex; align-items: flex-end; }
.hero-image { position: absolute; inset: 0; background: url('/images/hero-institut-koeln.png') center center / cover no-repeat; transform: scale(1.01); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,7,.88) 0%, rgba(10,10,9,.58) 38%, rgba(10,10,9,.08) 72%), linear-gradient(0deg, rgba(0,0,0,.45), transparent 42%); }
.hero-copy { position: relative; z-index: 2; width: min(790px, 80vw); padding: 170px 7vw 10vh; }
.eyebrow { margin: 0 0 25px; color: #e3b39d; font-size: 11px; font-weight: 600; letter-spacing: .17em; line-height: 1.5; text-transform: uppercase; }
.eyebrow.dark { color: var(--rust); }
h1, h2 { font-family: var(--font-display), Georgia, serif; font-weight: 500; letter-spacing: -.035em; }
h1 { margin: 0; max-width: 820px; font-size: clamp(54px, 7.5vw, 112px); line-height: .86; }
.hero-intro { max-width: 585px; margin: 32px 0; color: rgba(255,255,255,.82); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.65; }
.primary-link { display: inline-flex; gap: 34px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.7); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.image-note { position: absolute; z-index: 2; right: 4vw; bottom: 7vh; margin: 0; text-align: right; color: rgba(255,255,255,.62); font-family: var(--font-display); font-size: 20px; line-height: 1.15; font-style: italic; }

.section { padding: 120px 7vw; }
.section-heading { display: grid; grid-template-columns: 1fr 2fr; gap: 5vw; margin-bottom: 72px; }
.section-heading h2, .training h2 { margin: 0; max-width: 900px; font-size: clamp(43px, 5vw, 74px); line-height: 1; }
.field-list { border-top: 1px solid #c9c2b7; }
.field { display: grid; grid-template-columns: 90px 1fr 1.2fr; gap: 24px; align-items: baseline; padding: 29px 0; border-bottom: 1px solid #c9c2b7; }
.field span { color: var(--rust); font-size: 11px; }
.field h3 { margin: 0; font-family: var(--font-display); font-size: clamp(27px, 3vw, 40px); font-weight: 500; }
.field p { margin: 0; max-width: 560px; color: #57534c; line-height: 1.65; }

.direct-work { display: grid; grid-template-columns: .9fr 1.6fr; gap: 8vw; background: #99472f; color: white; }
.direct-work-intro { align-self: start; position: sticky; top: 40px; }
.direct-work-intro h2 { margin: 0; font-size: clamp(46px, 5vw, 76px); line-height: .96; }
.direct-work-intro > p:last-child { margin: 30px 0 0; color: rgba(255,255,255,.76); font-size: 16px; line-height: 1.75; }
.direct-work-grid { border-top: 1px solid rgba(255,255,255,.35); }
.direct-work-grid article { display: grid; grid-template-columns: 48px 1fr; gap: 12px 22px; padding: 28px 0; border-bottom: 1px solid rgba(255,255,255,.28); }
.direct-work-grid article > span { padding-top: 7px; color: #efc3b0; font-size: 10px; }
.direct-work-grid h3 { margin: 0; font-family: var(--font-display); font-size: clamp(29px, 3vw, 41px); font-weight: 500; line-height: 1; }
.direct-work-grid p { grid-column: 2; max-width: 620px; margin: 0; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.7; }
.direct-work-grid .text-link { grid-column: 2; width: fit-content; margin-top: 3px; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.55); color: #fff; font-size: 12px; letter-spacing: .04em; }
.availability-note { grid-column: 2; display: grid; grid-template-columns: 150px 1fr; gap: 25px; margin-top: 15px; padding: 23px 0 0; border-top: 3px solid #efc3b0; }
.availability-note strong { font-family: var(--font-display); font-size: 22px; font-weight: 500; }
.availability-note p { max-width: 620px; margin: 0; color: rgba(255,255,255,.78); line-height: 1.7; }

.section-intro { max-width: 720px; margin: 24px 0 0; color: #5e5a52; font-size: 17px; line-height: 1.7; }
.regions { background: var(--cream); }
.region-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #c9c2b7; border-bottom: 1px solid #c9c2b7; }
.region-card { display: flex; min-height: 330px; flex-direction: column; padding: 34px 32px 30px 0; }
.region-card + .region-card { padding-left: 32px; border-left: 1px solid #c9c2b7; }
.region-card > p { margin: 0 0 35px; color: var(--rust); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.region-card h3 { margin: 0 0 20px; font-family: var(--font-display); font-size: clamp(36px, 4vw, 56px); font-weight: 500; line-height: .95; }
.region-card > span { color: #5e5a52; font-size: 14px; line-height: 1.7; }
.region-card a { display: inline-flex; justify-content: space-between; gap: 20px; margin-top: auto; padding-top: 32px; color: var(--rust); font-size: 12px; letter-spacing: .04em; }
.region-card a b { font-weight: 400; }

.service-page { background: var(--paper); }
.service-header { position: absolute; z-index: 4; top: 0; left: 0; display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 24px 4vw; color: white; border-bottom: 1px solid rgba(255,255,255,.22); }
.service-hero { position: relative; min-height: 82vh; padding: 190px 7vw 100px; overflow: hidden; background: radial-gradient(circle at 82% 18%, rgba(168,77,49,.45), transparent 34%), linear-gradient(120deg, #171715, #27251f 68%, #5c3225); color: white; }
.service-hero::after { content: ""; position: absolute; right: -8vw; bottom: -22vw; width: 48vw; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; }
.service-hero h1 { max-width: 1050px; font-size: clamp(58px, 8vw, 116px); line-height: .87; }
.service-hero > p:not(.eyebrow) { max-width: 720px; margin: 34px 0; color: rgba(255,255,255,.78); font-size: clamp(17px, 1.7vw, 22px); line-height: 1.65; }
.service-hero-light { background: radial-gradient(circle at 80% 20%, rgba(213,137,104,.34), transparent 32%), linear-gradient(120deg, #24231f, #3c322b 70%, #76422f); }
.service-content { display: grid; grid-template-columns: 1fr 1.2fr; gap: 9vw; padding: 120px 7vw; }
.service-lead h2, .service-band h2, .service-region h2, .service-faq h2, .service-cta h2 { margin: 0; font-size: clamp(44px, 5vw, 76px); line-height: .96; }
.service-copy p { margin: 0 0 24px; color: #57534c; font-size: 16px; line-height: 1.8; }
.service-band { display: grid; grid-template-columns: .9fr 1.4fr; gap: 8vw; padding: 110px 7vw; background: #20201d; color: white; }
.service-points { border-top: 1px solid rgba(255,255,255,.28); }
.service-points article { padding: 27px 0; border-bottom: 1px solid rgba(255,255,255,.24); }
.service-points h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: 31px; font-weight: 500; }
.service-points p { margin: 0; color: #c9c4bb; font-size: 14px; line-height: 1.7; }
.service-region { display: grid; grid-template-columns: 1.1fr 1fr; gap: 9vw; padding: 110px 7vw; background: var(--cream); }
.service-region > div > p:last-child { max-width: 620px; color: #5e5a52; line-height: 1.75; }
.service-region ul { margin: 0; padding: 0; border-top: 1px solid #c9c2b7; list-style: none; }
.service-region li { padding: 16px 0; border-bottom: 1px solid #c9c2b7; font-family: var(--font-display); font-size: 25px; }
.service-faq { padding: 110px 7vw; background: var(--paper); }
.service-faq > h2 { max-width: 980px; margin-bottom: 60px; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #c9c2b7; }
.faq-grid article { padding: 30px 4vw 30px 0; border-bottom: 1px solid #c9c2b7; }
.faq-grid article:nth-child(even) { padding-left: 4vw; border-left: 1px solid #c9c2b7; }
.faq-grid h3 { margin: 0 0 14px; font-family: var(--font-display); font-size: 29px; font-weight: 500; line-height: 1.1; }
.faq-grid p { margin: 0; color: #5e5a52; font-size: 14px; line-height: 1.75; }
.service-cta { padding: 110px 7vw; background: #99472f; color: white; }
.service-cta .eyebrow { color: #f1c9b7; }
.service-cta > p:not(.eyebrow) { max-width: 700px; margin: 30px 0 45px; color: rgba(255,255,255,.78); font-size: 17px; line-height: 1.75; }
.service-cta > a { display: inline-flex; gap: 45px; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.65); font-size: clamp(16px, 2vw, 24px); }

.approach { display: grid; grid-template-columns: 1fr 3fr; gap: 6vw; padding: 120px 7vw; background: #20201d; color: white; }
.approach-label { display: flex; flex-direction: column; }
.vertical-line { flex: 1; width: 1px; min-height: 100px; margin-left: 6px; background: linear-gradient(#9c4a31, transparent); }
.approach-copy h2 { margin: 0 0 65px; font-size: clamp(55px, 7vw, 105px); line-height: .9; }
.approach-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; max-width: 920px; }
.approach-detail p { margin: 0; color: #c9c4bb; line-height: 1.75; }

.team { background: var(--paper); }
.team-heading { align-items: end; }
.team-heading h2 { margin: 0; font-size: clamp(52px, 6vw, 88px); line-height: .95; }
.team-heading div > p { max-width: 640px; margin: 24px 0 0; color: #5e5a52; font-size: 17px; line-height: 1.7; }
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.team-card { min-width: 0; }
.team-card > img, .portrait-placeholder { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #d9d2c7; }
.team-card-copy { padding: 24px 4px 0; }
.team-card-copy > p { margin: 0 0 10px; color: var(--rust); font-size: 10px; font-weight: 600; letter-spacing: .13em; line-height: 1.5; text-transform: uppercase; }
.team-card-copy h3 { margin: 0 0 17px; font-family: var(--font-display); font-size: clamp(30px, 3vw, 42px); font-weight: 500; line-height: 1; }
.team-card-copy > span { display: block; color: #5e5a52; font-size: 14px; line-height: 1.7; }
.service-team { border-bottom: 1px solid #d4cdc2; }
.service-team-link { display: inline-flex; gap: 24px; margin-top: 58px; padding-bottom: 8px; border-bottom: 1px solid var(--rust); color: var(--rust); font-size: 13px; letter-spacing: .04em; }
.portrait-placeholder { display: grid; place-items: center; position: relative; overflow: hidden; color: #817b72; font-family: var(--font-display); font-size: 27px; font-style: italic; text-align: center; }
.portrait-placeholder::before { content: ""; position: absolute; width: 68%; aspect-ratio: 1; border: 1px solid rgba(168,77,49,.28); border-radius: 50%; }
.portrait-placeholder::after { content: ""; position: absolute; inset: 10%; border: 1px solid rgba(255,255,255,.48); }
.portrait-placeholder span { position: relative; z-index: 1; }
.profile-details { margin-top: 65px; border-top: 1px solid #bdb5a9; border-bottom: 1px solid #bdb5a9; }
.profile-details summary { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 24px 0; cursor: pointer; color: #302e2a; font-family: var(--font-display); font-size: clamp(24px, 3vw, 38px); list-style: none; }
.profile-details summary::-webkit-details-marker { display: none; }
.profile-details summary span { color: var(--rust); font-family: var(--font-sans); font-size: 24px; transition: transform .2s ease; }
.profile-details[open] summary span { transform: rotate(45deg); }
.profile-details-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 5vw; padding: 35px 0 55px; border-top: 1px solid #d4cdc2; }
.profile-details-grid > div > p:not(.eyebrow) { color: #5b574f; font-size: 14px; line-height: 1.75; }
.profile-details-grid ul { margin: 0; padding-left: 18px; color: #5b574f; font-size: 14px; line-height: 1.7; }
.profile-details-grid li + li { margin-top: 10px; }

.training { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10vw; background: var(--cream); }
.training-intro > p:last-child { max-width: 640px; margin: 35px 0 0; color: #5e5a52; font-size: 18px; line-height: 1.7; }
.references { align-self: end; border-top: 3px solid var(--rust); padding-top: 24px; }
.references p { margin: 0 0 28px; color: #706b63; font-size: 13px; }
.references strong { display: block; padding: 17px 0; border-bottom: 1px solid #cdc6ba; font-family: var(--font-display); font-size: 25px; font-weight: 500; }

.contact { padding: 120px 7vw; background: #99472f; color: white; }
.contact .eyebrow { color: #f1c9b7; }
.contact h2 { margin: 0; font-size: clamp(56px, 7vw, 105px); line-height: .94; }
.contact > p:not(.eyebrow) { max-width: 620px; margin: 30px 0 50px; color: rgba(255,255,255,.78); font-size: 18px; line-height: 1.7; }
.contact-links { display: flex; flex-wrap: wrap; gap: 18px 50px; }
.contact-links a { display: inline-flex; gap: 50px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.6); font-size: clamp(17px, 2vw, 25px); }

footer { display: flex; justify-content: space-between; gap: 30px; padding: 30px 4vw; background: #171715; color: #8f8c84; font-size: 10px; letter-spacing: .04em; }
footer p { margin: 0; }
footer div { display: flex; gap: 24px; }
footer a:hover, footer a:focus-visible { color: white; }

.legal-page { min-height: 100vh; padding: 70px 7vw 110px; background: var(--cream); }
.legal-page h1 { max-width: 900px; margin: 0 0 70px; font-size: clamp(60px, 8vw, 112px); line-height: .9; }
.legal-page section { max-width: 820px; padding: 30px 0; border-top: 1px solid #cbc3b7; }
.legal-page section h2 { margin: 0 0 18px; font-size: clamp(27px, 3vw, 39px); line-height: 1.05; }
.legal-page section p { margin: 0 0 14px; color: #57534c; line-height: 1.75; }
.legal-page section a { border-bottom: 1px solid var(--rust); }
.legal-back { display: inline-block; margin-bottom: 75px; color: var(--rust); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.legal-placeholder { max-width: 620px; padding: 15px 18px; border-left: 3px solid var(--rust); background: #eee5d9; }
.legal-note { max-width: 820px; margin: 35px 0 0; color: var(--muted); font-size: 12px; }

.logo-lab { min-height: 100vh; padding: 70px 6vw 100px; background: #f3efe7; }
.logo-lab-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding-bottom: 55px; border-bottom: 1px solid #c9c2b7; }
.logo-lab-header h1 { margin: 0; color: var(--ink); font-size: clamp(52px, 7vw, 96px); line-height: .9; }
.logo-lab-header div > p:last-child { max-width: 640px; margin: 25px 0 0; color: #625d55; line-height: 1.7; }
.logo-lab-header > a { flex: none; padding-bottom: 7px; border-bottom: 1px solid var(--rust); color: var(--rust); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.logo-concept-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 70px 4vw; padding-top: 65px; }
.logo-stage { display: grid; min-height: 390px; place-items: center; background: #e7e0d5; }
.lab-sign { display: grid; place-items: center; position: relative; width: 210px; height: 210px; border: 2px solid #252421; color: #252421; font-family: var(--font-display), Georgia, serif; font-size: 148px; line-height: 1; }
.lab-sign i { position: absolute; display: block; background: var(--rust); }
.logo-perspektiven .accent-one { left: 57px; top: 60px; width: 3px; height: 57px; border-radius: 3px; }
.logo-perspektiven .accent-two { left: 66px; top: 76px; width: 3px; height: 41px; border-radius: 3px; }
.logo-begegnung .accent-one { left: 58px; top: 76px; width: 45px; height: 3px; transform: rotate(38deg); transform-origin: left center; }
.logo-begegnung .accent-two { left: 62px; top: 114px; width: 39px; height: 3px; transform: rotate(-35deg); transform-origin: left center; }
.logo-oeffnung .lab-sign { border-right-color: transparent; }
.logo-oeffnung .lab-sign::after { content: ""; position: absolute; right: -2px; top: 0; width: 2px; height: 100%; background: linear-gradient(to bottom, #252421 0 28%, transparent 28% 48%, #252421 48% 100%); }
.logo-oeffnung .accent-one { left: 161px; top: 90px; width: 72px; height: 2px; transform: rotate(-28deg); transform-origin: left center; }
.logo-oeffnung .accent-two { left: 167px; top: 112px; width: 54px; height: 2px; transform: rotate(-28deg); transform-origin: left center; }
.logo-impuls .accent-one { left: 61px; top: 83px; width: 44px; height: 3px; transform: rotate(-35deg); transform-origin: left center; }
.logo-impuls .accent-two { display: none; }
.logo-description { display: grid; grid-template-columns: 44px 1fr; gap: 15px; padding-top: 22px; }
.logo-description > span { padding-top: 7px; color: var(--rust); font-size: 10px; }
.logo-description h2 { margin: 0 0 8px; font-size: 34px; line-height: 1; }
.logo-description p { max-width: 440px; margin: 0; color: #676159; font-size: 14px; line-height: 1.65; }

@media (max-width: 760px) {
  .site-header { padding: 18px 20px; }
  nav a:not(.nav-contact) { display: none; }
  .hero-copy { width: 100%; padding: 150px 22px 85px; }
  h1 { font-size: clamp(48px, 15vw, 68px); }
  .hero-intro { max-width: 94%; }
  .image-note { display: none; }
  .section { padding: 82px 22px; }
  .section-heading, .approach, .training { grid-template-columns: 1fr; }
  .section-heading { gap: 12px; margin-bottom: 45px; }
  .field { grid-template-columns: 42px 1fr; }
  .field p { grid-column: 2; }
  .direct-work { grid-template-columns: 1fr; }
  .direct-work-intro { position: static; }
  .availability-note { grid-column: 1; grid-template-columns: 1fr; gap: 10px; }
  .region-grid, .service-content, .service-band, .service-region, .faq-grid { grid-template-columns: 1fr; }
  .region-card { min-height: 280px; padding: 30px 0; }
  .region-card + .region-card { padding-left: 0; border-top: 1px solid #c9c2b7; border-left: 0; }
  .service-header { padding: 18px 20px; }
  .service-hero { min-height: 88vh; padding: 150px 22px 75px; }
  .service-hero h1 { overflow-wrap: normal; hyphens: manual; font-size: clamp(45px, 12vw, 64px); }
  .service-content, .service-band, .service-region, .service-faq, .service-cta { padding: 82px 22px; }
  .service-content, .service-band, .service-region { gap: 45px; }
  .faq-grid article, .faq-grid article:nth-child(even) { padding: 26px 0; border-left: 0; }
  .approach { padding: 82px 22px; }
  .vertical-line { display: none; }
  .approach-copy h2 { margin-bottom: 42px; }
  .approach-detail { grid-template-columns: 1fr; gap: 22px; }
  .team-grid { grid-template-columns: 1fr; gap: 58px; }
  .team-card > img, .portrait-placeholder { aspect-ratio: 4 / 4.7; }
  .profile-details-grid { grid-template-columns: 1fr; gap: 35px; }
  .training { gap: 65px; }
  .contact { padding: 85px 22px; }
  .contact-links { flex-direction: column; align-items: flex-start; gap: 5px; }
  .contact-links a { gap: 16px; font-size: 15px; }
  .legal-page { padding: 45px 22px 80px; }
  .legal-back { margin-bottom: 55px; }
  footer, footer div { flex-direction: column; }
  .logo-lab { padding: 55px 22px 80px; }
  .logo-lab-header { align-items: flex-start; flex-direction: column; }
  .logo-concept-grid { grid-template-columns: 1fr; }
  .logo-stage { min-height: 320px; }
  .lab-sign { width: 180px; height: 180px; font-size: 126px; }
}