@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 500 600;
font-display: swap;
src: url(//www.diekonzeptin.de/wordpress/wp-content/uploads/static-pages/876/fonts/cormorant-garamond-latin.woff2) format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url(//www.diekonzeptin.de/wordpress/wp-content/uploads/static-pages/876/fonts/inter-latin.woff2) format("woff2");
}
:root {
--paper: #f6f1e9 !important;
--cream: #f0e8de !important;
--sand: #d8c7b5 !important;
--shadow-warm: #dfd1c2 !important;
--mist: #f0ede8 !important;
--ink: #34312d !important;
--muted: #73675d !important;
--line: #d8ccbf !important;
--clay: #947460 !important;
--white: #fffdf9 !important;
--max: 74rem !important;
--reading: 42rem !important;
--serif: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif !important;
--sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
--section: clamp(5.5rem, 9vw, 8rem) !important;
}
* { box-sizing: border-box !important; }
html { scroll-behavior: smooth !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; }
body { margin: 0 !important; overflow-x: hidden !important; background: var(--paper) !important; color: var(--ink) !important; font-family: var(--sans) !important; font-size: clamp(1rem, .12vw + .98rem, 1.08rem) !important; font-weight: 400 !important; line-height: 1.7 !important; letter-spacing: normal !important; font-synthesis: none !important; text-rendering: optimizeLegibility !important; }
img { display: block !important; width: 100% !important; height: auto !important; }
a { color: inherit !important; }
p { margin: 0 0 1.25em !important; }
figure, blockquote { margin: 0 !important; }
h1, h2, h3 { margin: 0 !important; color: var(--ink) !important; font-family: var(--serif) !important; font-weight: 500 !important; letter-spacing: -.025em !important; }
h1 { max-width: 18ch !important; font-size: clamp(2.65rem, 3.7vw, 3.8rem) !important; font-weight: 500 !important; line-height: 1.1 !important; letter-spacing: -.025em !important; }
h2 { max-width: 28ch !important; font-size: clamp(2rem, 2.7vw, 2.8rem) !important; line-height: 1.12 !important; }
strong { font-weight: 600 !important; }
.shell { width: min(calc(100% - 2.5rem), var(--max)) !important; margin-inline: auto !important; }
.skip-link { position: fixed !important; z-index: 100 !important; top: .75rem !important; left: .75rem !important; transform: translateY(-180%) !important; padding: .7rem 1rem !important; background: var(--ink) !important; color: var(--paper) !important; }
.skip-link:focus { transform: none !important; }
a:focus-visible { outline: 3px solid var(--clay) !important; outline-offset: 4px !important; }
.site-header { position: sticky !important; z-index: 20 !important; top: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent) !important; background: color-mix(in srgb, var(--paper) 93%, transparent) !important; backdrop-filter: blur(12px) !important; }
.header-inner { min-height: 4.65rem !important; display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; gap: 2rem !important; }
.brand { width: clamp(9rem, 15vw, 12rem) !important; }
.brand img { height: auto !important; }
.header-title, .eyebrow { color: var(--muted) !important; font-size: .68rem !important; font-weight: 600 !important; letter-spacing: .17em !important; text-transform: uppercase !important; }
.header-cta { justify-self: end !important; }
.text-link { border-bottom: 1px solid var(--line) !important; font-size: .78rem !important; text-decoration: none !important; }
.text-link span, .button span { display: inline-block !important; transition: transform .2s ease !important; }
.text-link:hover span, .button:hover span { transform: translate(3px, -1px) !important; }
.hero { padding-top: clamp(3.5rem, 7vw, 6.5rem) !important; }
.hero-grid { display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .75fr) !important; align-items: center !important; gap: clamp(3rem, 7vw, 7rem) !important; }
.hero-copy { padding-block: 2rem !important; }
.hero h1 { max-width: 21ch !important; font-size: clamp(2.45rem, 3.3vw, 3.45rem) !important; font-weight: 500 !important; line-height: 1.1 !important; letter-spacing: -.025em !important; }
.eyebrow { margin-bottom: 1.45rem !important; }
.lead { max-width: 40rem !important; margin-top: 2.1rem !important; font-family: var(--sans) !important; font-size: clamp(1.15rem, 1.2vw, 1.35rem) !important; font-weight: 400 !important; line-height: 1.6 !important; letter-spacing: normal !important; }
.hero-copy > p:not(.eyebrow) { max-width: 42rem !important; }
.hero-image { min-height: 42rem !important; overflow: visible !important; background: var(--cream) !important; box-shadow: 1.1rem 1.1rem 0 var(--sand) !important; }
.hero-image img { height: 100% !important; min-height: 42rem !important; object-fit: cover !important; object-position: center 45% !important; }
.hero-grid { padding-bottom: clamp(5rem, 9vw, 8rem) !important; border-bottom: 1px solid var(--line) !important; }
.button { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: .65rem !important; min-height: 3.35rem !important; margin-top: 1.35rem !important; padding: .82rem 1.35rem !important; border: 1px solid var(--ink) !important; background: transparent !important; color: var(--ink) !important; font-family: var(--sans) !important; font-size: 1rem !important; font-weight: 600 !important; line-height: 1.75 !important; letter-spacing: normal !important; text-decoration: none !important; transition: border-color .2s ease, background-color .2s ease, color .2s ease !important; }
.button:hover, .button:focus-visible { border-color: var(--sand) !important; background: var(--sand) !important; color: var(--ink) !important; }
.section { padding-block: var(--section) !important; border-top: 1px solid var(--line) !important; }
.hero + .section { border-top: 0 !important; }
.lead-small { margin-top: 1.7rem !important; font-family: var(--serif) !important; font-size: clamp(1.35rem, 1.8vw, 1.7rem) !important; line-height: 1.5 !important; }
.situations-section { padding: 0 !important; background: var(--paper) !important; }
.situations-stage { position: relative !important; padding-block: clamp(3rem, 5vw, 4.5rem) !important; background: var(--cream) url(//www.diekonzeptin.de/wordpress/wp-content/uploads/static-pages/876/images/03_PARALLAX_Ozean_hell.png) center / cover no-repeat fixed !important; }
.situations-stage > .shell { position: relative !important; z-index: 1 !important; width: min(calc(100% - 2rem), 80rem) !important; }
.situations-head { max-width: 56rem !important; margin: 0 auto !important; padding: clamp(4.5rem, 7vw, 6.5rem) clamp(2rem, 5vw, 5rem) !important; text-align: center !important; }
.situations-head .eyebrow::after { content: "" !important; display: block !important; width: 4.5rem !important; margin: 1.35rem auto 0 !important; border-top: 1px solid var(--clay) !important; }
.situations-head h2 { max-width: none !important; margin-inline: auto !important; font-size: clamp(2.45rem, 4vw, 3.7rem) !important; }
.situations-head .lead-small { max-width: 27rem !important; margin: 1.6rem auto 0 !important; }
.situations-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: clamp(1rem, 1.8vw, 1.6rem) !important; row-gap: clamp(8rem, 16vw, 14rem) !important; margin: 0 !important; padding: 0 !important; background: transparent !important; list-style: none !important; }
.situations-grid li { min-height: 19rem !important; padding: clamp(1.3rem, 1.8vw, 1.65rem) !important; background: color-mix(in srgb, var(--paper) 95%, transparent) !important; color: var(--ink) !important; font-family: var(--sans) !important; font-size: clamp(1rem, .8vw + .7rem, 1.08rem) !important; font-weight: 400 !important; line-height: 1.7 !important; box-shadow: 0 .6rem 1.8rem color-mix(in srgb, var(--clay) 13%, transparent) !important; }
.situations-grid li::before { content: attr(data-label) !important; display: block !important; width: fit-content !important; max-width: 100% !important; margin-bottom: 1.35rem !important; padding-bottom: .55rem !important; border-bottom: 1px solid #7f6251 !important; color: #7f6251 !important; font-family: var(--serif) !important; font-size: clamp(1.28rem, 1.7vw, 1.65rem) !important; font-weight: 600 !important; line-height: 1.05 !important; letter-spacing: -.015em !important; }
.line-list { margin: 0 !important; padding: 0 !important; border-top: 1px solid var(--line) !important; list-style: none !important; }
.line-list li { padding: 1.35rem 0 !important; border-bottom: 1px solid var(--line) !important; }
.line-list li::before { content: "→" !important; display: inline-block !important; width: 2rem !important; color: var(--clay) !important; }
.statement-section { border-top: 0 !important; }
.statement-grid { display: grid !important; grid-template-columns: minmax(16rem, .8fr) minmax(0, 1fr) !important; gap: clamp(3rem, 8vw, 8rem) !important; }
.statement-lead { max-width: 25rem !important; font-family: var(--sans) !important; font-size: clamp(1.15rem, 1.2vw, 1.35rem) !important; font-weight: 400 !important; line-height: 1.6 !important; letter-spacing: normal !important; }
.prose { max-width: var(--reading) !important; }
.question-list { margin: 2rem 0 2.5rem !important; padding: 0 !important; border-top: 1px solid var(--line) !important; list-style: none !important; }
.question-list li { padding: 1.1rem 0 !important; border-bottom: 1px solid var(--line) !important; color: var(--clay) !important; font-family: var(--serif) !important; font-size: clamp(1.35rem, 1.8vw, 1.7rem) !important; line-height: 1.45 !important; }
.inner-section { background: var(--cream) !important; }
.split-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(19rem, .72fr) !important; align-items: center !important; gap: clamp(3.5rem, 8vw, 8rem) !important; }
.split-grid-image-first { grid-template-columns: minmax(19rem, .72fr) minmax(0, 1fr) !important; }
.portrait-image { min-height: 41rem !important; overflow: hidden !important; }
.portrait-image img { height: 100% !important; min-height: 41rem !important; object-fit: cover !important; }
.inner-section .portrait-image { background: var(--shadow-warm) !important; box-shadow: 1.1rem 1.1rem 0 var(--shadow-warm) !important; }
.inner-section .portrait-image img { object-position: 27% center !important; }
.split-copy h2 { margin-bottom: 2.1rem !important; }
.split-copy > p { max-width: var(--reading) !important; }
.possibilities { background: var(--white) !important; }
.possibilities-head { max-width: 52rem !important; margin: 0 auto clamp(4rem, 7vw, 6rem) !important; text-align: center !important; }
.possibilities-head h2 { margin-inline: auto !important; }
.possibilities-head .lead-small { max-width: 40rem !important; margin: 1.7rem auto 0 !important; }
.possibility-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(24rem, .9fr) !important; gap: clamp(3.5rem, 6vw, 6rem) !important; align-items: center !important; padding-left: max(1.25rem, calc((100% - var(--max)) / 2)) !important; }
.outcome-copy { max-width: 39rem !important; }
.outcome-intro { margin-bottom: 1.5rem !important; font-family: var(--serif) !important; font-size: clamp(1.35rem, 1.8vw, 1.7rem) !important; line-height: 1.45 !important; }
.outcome-list { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.outcome-list li { position: relative !important; padding: 1rem 0 1rem 2rem !important; border-top: 1px solid var(--line) !important; }
.outcome-list li::before { content: "→" !important; position: absolute !important; top: 1rem !important; left: 0 !important; color: var(--clay) !important; font-size: 1.05rem !important; }
.outcome-list strong { color: var(--ink) !important; }
.possibility-image { align-self: start !important; background: var(--shadow-warm) !important; box-shadow: -1.1rem 1.1rem 0 var(--shadow-warm) !important; }
.possibility-image img { height: auto !important; object-fit: contain !important; object-position: right top !important; }
.centered-close { max-width: 48rem !important; margin-top: clamp(4.5rem, 8vw, 7rem) !important; text-align: center !important; }
.investment-quote p, .investment-quote { color: var(--clay) !important; font-family: var(--serif) !important; font-size: 2.75rem !important; font-weight: 500 !important; line-height: 1.16 !important; letter-spacing: -.025em !important; }
.investment-quote .button { border-color: var(--clay) !important; color: var(--clay) !important; font-family: var(--sans) !important; font-size: 1rem !important; letter-spacing: normal !important; }
.investment-quote .button:hover, .investment-quote .button:focus-visible { border-color: var(--clay) !important; background: var(--clay) !important; color: var(--paper) !important; }
.dual-section { background: var(--mist) !important; }
.dual-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 !important; }
.dual-grid article { padding-right: clamp(2rem, 5vw, 5rem) !important; }
.dual-grid article + article { padding-right: 0 !important; padding-left: clamp(2rem, 5vw, 5rem) !important; border-left: 1px solid var(--line) !important; }
.dual-grid h2 { min-height: 2.1em !important; margin-bottom: 2.2rem !important; color: var(--clay) !important; font-size: clamp(2rem, 2.7vw, 2.8rem) !important; line-height: 1.12 !important; }
.dual-grid article > p:not(.eyebrow) { max-width: 35rem !important; }
.process-grid { display: grid !important; grid-template-columns: minmax(16rem, .82fr) minmax(0, 1fr) !important; align-items: start !important; column-gap: clamp(3rem, 8vw, 8rem) !important; row-gap: clamp(1.5rem, 4vw, 4rem) !important; }
.process-heading { grid-column: 1 / -1 !important; }
.process-heading h2 { margin-bottom: 2rem !important; }
.process-heading > p:not(.eyebrow) { max-width: 48rem !important; }
.process-photo { width: 100% !important; margin: 0 !important; background: var(--shadow-warm) !important; box-shadow: 1.1rem 1.1rem 0 var(--shadow-warm) !important; }
.process-photo img { aspect-ratio: 1 !important; object-fit: cover !important; object-position: right center !important; }
.compact-list { margin: 0 0 2rem 1.5rem !important; }
.process-section .compact-list li { position: relative !important; padding-left: 2.4rem !important; }
.process-section .compact-list li::before { content: "—" !important; position: absolute !important; left: 0 !important; width: 1.8rem !important; }
.about-section { position: relative !important; overflow: hidden !important; background: var(--cream) !important; }
.about-section .split-grid { position: relative !important; z-index: 1 !important; }
.about-watermark { position: absolute !important; z-index: 0 !important; right: clamp(.75rem, 2vw, 2rem) !important; bottom: -.55rem !important; width: auto !important; height: 34% !important; opacity: .52 !important; pointer-events: none !important; }
.about-image { background: var(--shadow-warm) !important; box-shadow: -1.1rem 1.1rem 0 var(--shadow-warm) !important; }
.about-image img { object-position: center 25% !important; }
.final-cta { width: calc(100% - 2rem) !important; margin-inline: 1rem !important; padding-top: var(--section) !important; background: var(--paper) !important; color: var(--ink) !important; }
.final-grid { width: auto !important; margin-right: 0 !important; margin-left: max(1.25rem, calc((100% - var(--max)) / 2)) !important; display: grid !important; grid-template-columns: minmax(0, .9fr) minmax(22rem, .85fr) !important; align-items: center !important; gap: clamp(3rem, 7vw, 7rem) !important; }
.final-copy h2 { color: var(--ink) !important; margin-bottom: 2.2rem !important; }
.final-copy .eyebrow { color: var(--muted) !important; }
.final-copy p { max-width: 39rem !important; color: var(--ink) !important; }
.button-light { border-color: var(--ink) !important; color: var(--ink) !important; }
.button-light:hover { border-color: var(--sand) !important; background: var(--sand) !important; color: var(--ink) !important; }
.final-image { background: var(--shadow-warm) !important; box-shadow: -1.1rem 1.1rem 0 var(--shadow-warm) !important; }
.final-image img { height: auto !important; object-fit: contain !important; object-position: right center !important; }
.closing-quote { max-width: 62rem !important; padding-block: clamp(5rem, 9vw, 8rem) !important; text-align: center !important; background: none !important;
border: none !important; }
.site-footer { background: var(--paper) !important; color: var(--muted) !important; }
.footer-inner { display: flex !important; justify-content: space-between !important; gap: 2rem !important; padding-block: 2.2rem !important; border-top: 1px solid var(--line) !important; font-size: .75rem !important; letter-spacing: .08em !important; text-transform: uppercase !important; }
.footer-inner nav { display: flex !important; gap: 1.5rem !important; }
.footer-inner a { text-underline-offset: .25rem !important; }
.footer-inner p { margin: 0 !important; }
@media (max-width: 900px) {
.header-title { display: none !important; }
.header-inner { grid-template-columns: 1fr auto !important; }
.hero-grid, .statement-grid, .split-grid, .split-grid-image-first, .possibility-grid, .process-grid, .final-grid { grid-template-columns: 1fr !important; }
.hero-copy { max-width: 48rem !important; }
.hero-image { min-height: 34rem !important; }
.hero-image img { min-height: 34rem !important; object-position: center 40% !important; }
.situations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 2rem !important; }
.statement-grid, .process-grid { gap: 2.5rem !important; }
.portrait-image { min-height: 34rem !important; }
.portrait-image img { min-height: 34rem !important; }
.split-grid-image-first .portrait-image { order: 2 !important; }
.possibility-grid { padding-left: 1.25rem !important; }
.possibility-image { max-width: none !important; margin-left: 2rem !important; }
.process-photo { max-width: 40rem !important; }
.final-grid { margin-left: 1.25rem !important; }
}
@media (max-width: 680px) {
:root { --section: 4.6rem !important; }
.shell { width: min(calc(100% - 2rem), var(--max)) !important; }
.site-header { position: relative !important; }
.header-inner { min-height: 4.1rem !important; }
.brand { width: 8.7rem !important; }
.header-cta { font-size: .7rem !important; }
.hero { padding-top: 2rem !important; }
.hero-grid { gap: 2.5rem !important; }
.hero-image, .hero-image img { min-height: 28rem !important; }
.hero-image img { object-position: center 42% !important; }
.desktop-break { display: none !important; }
.situations-section { padding-top: 0 !important; }
.situations-stage { padding-block: 2rem !important; background-attachment: scroll !important; background-position: 52% center !important; }
.situations-head { margin-inline: -.05rem !important; padding-inline: 1.25rem !important; }
.situations-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
.situations-grid li { min-height: 0 !important; padding: 1.6rem !important; font-size: 1.2rem !important; }
.portrait-image, .portrait-image img { min-height: 29rem !important; }
.dual-grid { grid-template-columns: 1fr !important; }
.dual-grid article { padding-right: 0 !important; }
.dual-grid article + article { padding: 4rem 0 0 !important; border-top: 1px solid var(--line) !important; border-left: 0 !important; }
.dual-grid h2 { min-height: 0 !important; }
.possibility-grid, .final-grid { padding-left: 0 !important; margin-left: 1rem !important; }
.possibility-image { margin-left: 1rem !important; }
.process-photo { margin-left: 0 !important; }
.final-image { order: -1 !important; margin-left: 1rem !important; }
.footer-inner { flex-direction: column !important; }
.footer-inner nav { flex-wrap: wrap !important; }
h1 { font-size: clamp(2.45rem, 11vw, 3.15rem) !important; }
h2 { font-size: clamp(1.9rem, 8.5vw, 2.5rem) !important; }
.investment-quote p, .investment-quote, .closing-quote { font-size: clamp(2rem, 9vw, 2.75rem) !important; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto !important; }
.situations-stage { background-attachment: scroll !important; }
*, *::before, *::after { transition-duration: .01ms !important; }
}
.kleanity-page-title-wrap {
height: 165px;
background: #FFF !important;
}