:root {
--cream:      #f6f4ef;
--beige-mid:  #eae6dc;
--navy:       #022340;
--navy-dim:   rgba(2,35,64,0.62);
--navy-faint: rgba(2,35,64,0.08);
--gold:       #978558;
--gold-h:     #b09f78;
--dark:       #022340;
--white:      #ffffff;
--brown:      #5a4f35;
--f-dis: 'Forum', Georgia, serif;
--f-ser: 'Cormorant Garamond', Georgia, serif;
--f-s1:  'Montserrat', system-ui, sans-serif;
--f-s2:  'Outfit', system-ui, sans-serif;
--max-w:  1280px;
--hdr-h:  128px;
--pad-x:  clamp(1.5rem, 5vw, 4rem);
--sec-py: clamp(4rem, 8vw, 7rem);
} *, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
background: var(--cream);
color: var(--navy);
font-family: var(--f-s2);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
} .wp-site-blocks > *,
.wp-block-template-part {
margin-block-start: 0 !important;
margin-block-end: 0 !important;
} .sec-label {
display: block;
font-family: var(--f-s1);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1rem;
} @keyframes slideInLeft {
from { opacity: 0; transform: translateX(-48px); }
to   { opacity: 1; transform: translateX(0); }
}
@keyframes drawLine {
from { width: 0; }
to   { width: 120px; }
}
@keyframes fadeIn {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(30px); }
to   { opacity: 1; transform: translateY(0); }
}
@keyframes drawC1 { from { stroke-dashoffset: 2199; } to { stroke-dashoffset: 0; } }
@keyframes drawC2 { from { stroke-dashoffset: 1571; } to { stroke-dashoffset: 0; } }
@keyframes drawC3 { from { stroke-dashoffset: 942;  } to { stroke-dashoffset: 0; } }
@keyframes drawC4 { from { stroke-dashoffset: 440;  } to { stroke-dashoffset: 0; } }
@keyframes drawRuler { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 0; } } a:not([class*="btn"]):not([class*="button"]):not([role="button"]):not(.nav-cta):not(.site-logo):not(.aiello-logo-img):not(.footer-logo):not(.custom-logo-link):not([class*="wp-block-site-logo"]) {
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-size: 0 1px;
background-position: left bottom;
transition: background-size 0.25s ease, color 0.2s ease;
text-decoration: none;
}
a:not([class*="btn"]):not([class*="button"]):not([role="button"]):not(.nav-cta):not(.site-logo):not(.aiello-logo-img):not(.footer-logo):not(.custom-logo-link):not([class*="wp-block-site-logo"]):hover {
background-size: 100% 1px;
} .wp-block-site-logo a,
.custom-logo-link,
.aiello-logo-img a,
.footer-logo a,
.site-logo a {
background-image: none !important;
background-size: 0 0 !important;
} .nav-cta-item .wp-block-navigation-item__content,
.wp-block-button__link {
background-image: none !important;
} .animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1), transform 0.65s cubic-bezier(0.4,0,0.2,1);
}
.animate-on-scroll.is-visible {
opacity: 1;
transform: translateY(0);
} @media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
.hero-line { width: 120px !important; }
.deco-c1, .deco-c2, .deco-c3, .deco-c4 { stroke-dashoffset: 0 !important; opacity: 1 !important; }
.deco-ruler-line { stroke-dashoffset: 0 !important; opacity: 0.15 !important; }
.deco-ruler-tick, .deco-crosshair, .deco-const-line, .hero-svg-bracket { opacity: 1 !important; }
.hero-headline, .hero-sub, .hero-cta-group, .hero-eyebrow { opacity: 1 !important; transform: none !important; }
.animate-on-scroll,
.fade-up,
.fade-in,
.slide-in-left {
opacity: 1 !important;
transform: none !important;
}
} .editor-styles-wrapper .animate-on-scroll,
.editor-styles-wrapper .fade-up,
.editor-styles-wrapper .fade-in,
.editor-styles-wrapper .slide-in-left,
.editor-styles-wrapper .hero-headline,
.editor-styles-wrapper .hero-eyebrow,
.editor-styles-wrapper .hero-sub,
.editor-styles-wrapper .hero-cta-group {
opacity: 1 !important;
transform: none !important;
animation: none !important;
transition: none !important;
} .site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
background: var(--cream);
border-bottom: 1px solid var(--beige-mid);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--pad-x);
height: var(--hdr-h);
}
.site-logo { text-decoration: none; display: flex; align-items: center; }
.site-logo img {
height: 32px; width: auto; display: block;
opacity: 0.92;
transition: opacity 0.2s ease;
}
.site-logo:hover img { opacity: 1; }
.site-nav { display: flex; align-items: center; gap: 2.25rem; }
.nav-link {
font-family: var(--f-s1);
font-size: 0.72rem; font-weight: 400;
letter-spacing: 0.12em; text-transform: uppercase;
color: rgba(2,35,64,0.65);
text-decoration: none;
transition: color 0.2s ease;
}
.nav-link:hover { color: var(--gold); }
.nav-cta {
font-family: var(--f-s1) !important;
font-size: 0.72rem !important; font-weight: 600 !important;
letter-spacing: 0.12em !important; text-transform: uppercase !important;
background: var(--gold); color: var(--white) !important;
padding: 9px 22px; border-radius: 4px;
text-decoration: none;
transition: background 0.2s ease !important;
}
.nav-cta:hover { background: var(--gold-h) !important; }
@media (max-width: 768px) { .nav-link { display: none; } } .wp-block-template-part.site-header-part > .wp-block-group {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
background: var(--cream);
border-bottom: 1px solid var(--beige-mid);
} .aiello-header-fixed {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: auto !important;
min-height: var(--hdr-h) !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
align-items: center !important;
z-index: 100;
background: var(--cream) !important;
border-bottom: 1px solid var(--beige-mid);
}
.aiello-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--pad-x);
height: var(--hdr-h);
}
.aiello-logo-img {
display: flex;
align-items: center;
flex-shrink: 0;
}
.aiello-logo-img img,
.aiello-header-fixed .wp-block-site-logo img {
height: 104px !important;
width: auto !important;
max-width: none !important;
display: block;
opacity: 0.92;
transition: opacity 0.2s ease;
}
.aiello-logo-img:hover img,
.aiello-header-fixed .wp-block-site-logo:hover img { opacity: 1; } .aiello-header-fixed > * { align-self: center; }
.aiello-header-fixed .wp-block-navigation { align-self: center !important; } .aiello-header-fixed .wp-block-navigation__container {
display: flex;
align-items: center;
gap: 2.25rem;
}
.aiello-header-fixed .wp-block-navigation-item__content {
font-family: var(--f-s1);
font-size: 0.72rem;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(2,35,64,0.65) !important;
text-decoration: none;
transition: color 0.2s ease;
padding: 0 !important;
display: inline-block;
position: relative;
}
.aiello-header-fixed .wp-block-navigation-item__content:hover { color: var(--gold) !important; }
.aiello-header-fixed .wp-block-navigation-item.nav-cta-item .wp-block-navigation-item__content {
font-weight: 600 !important;
background: var(--gold);
color: var(--white) !important;
padding: 9px 22px !important;
border-radius: 4px;
transition: background 0.2s ease !important;
}
.aiello-header-fixed .wp-block-navigation-item.nav-cta-item .wp-block-navigation-item__content:hover {
background: var(--gold-h) !important;
} @media (max-width: 920px) {
.aiello-header-fixed {
padding-left: var(--pad-x) !important;
padding-right: var(--pad-x) !important;
}
.aiello-header-fixed .wp-block-site-logo img,
.aiello-logo-img img {
height: 64px !important;
} .aiello-header-fixed .wp-block-navigation__responsive-container:not(.is-menu-open):not(.hidden-by-default) {
display: none !important;
position: fixed !important;
} .aiello-header-fixed .wp-block-navigation__responsive-container-open:not(.always-shown) {
display: flex !important;
}
}
@media (min-width: 921px) {
.aiello-header-fixed .wp-block-navigation__responsive-container-open:not(.always-shown) {
display: none !important;
}
} .aiello-header-fixed .wp-block-navigation__responsive-container-open {
width: 36px;
height: 36px;
padding: 0 !important;
background: transparent;
border: 0;
color: var(--navy);
cursor: pointer;
position: relative;
align-items: center;
justify-content: center;
}
.aiello-header-fixed .wp-block-navigation__responsive-container-open svg {
display: none !important;
}
.aiello-header-fixed .wp-block-navigation__responsive-container-open::before {
content: '';
display: block;
width: 22px;
height: 14px;
background:
linear-gradient(currentColor, currentColor) top    / 100% 1.5px no-repeat,
linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
linear-gradient(currentColor, currentColor) bottom / 100% 1.5px no-repeat;
} .hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
background-color: var(--cream);
background-image:
repeating-linear-gradient(
45deg,
transparent 0px, transparent 27px,
rgba(2,35,64,0.032) 27px, rgba(2,35,64,0.032) 28px
),
radial-gradient(ellipse 80% 65% at 8% 55%,  rgba(2,35,64,0.07) 0%, transparent 65%),
radial-gradient(ellipse 60% 70% at 92% 10%, rgba(2,35,64,0.04) 0%, transparent 60%),
radial-gradient(ellipse 70% 40% at 50% 95%, rgba(2,35,64,0.03) 0%, transparent 55%);
}
.hero-svg-circles {
position: absolute; top: 0; right: 0;
width: 55%; height: 100%;
z-index: 1; pointer-events: none; overflow: visible;
}
.deco-circle { fill: none; stroke: #978558; }
.deco-c1 { stroke-width: 1.5; stroke-opacity: 0.38; animation: drawC1 2.2s cubic-bezier(.4,0,.2,1) .5s forwards; }
.deco-c2 { stroke-width: 1.2; stroke-opacity: 0.28; animation: drawC2 2.2s cubic-bezier(.4,0,.2,1) .8s forwards; }
.deco-c3 { stroke-width: 1.0; stroke-opacity: 0.20; animation: drawC3 2.0s cubic-bezier(.4,0,.2,1) 1.0s forwards; }
.deco-c4 { stroke-width: 0.8; stroke-opacity: 0.16; animation: drawC4 1.8s cubic-bezier(.4,0,.2,1) 1.2s forwards; }
.deco-crosshair {
opacity: 0; animation: fadeIn .6s ease-out 1.8s forwards;
}
.deco-const-line {
opacity: 0; animation: fadeIn .6s ease-out 2s forwards;
}
.hero-svg-ruler {
position: absolute;
bottom: clamp(3rem, 6vh, 5rem);
left: 0; width: 100%; height: 28px;
overflow: visible; z-index: 2; pointer-events: none;
}
.deco-ruler-line {
stroke: #022340; stroke-width: .6; stroke-opacity: .15; fill: none;
stroke-dasharray: 600; stroke-dashoffset: 600;
animation: drawRuler 1.6s ease-out 1.4s forwards;
}
.deco-ruler-tick {
opacity: 0; animation: fadeIn .4s ease-out 2.2s forwards;
}
.hero-svg-bracket {
position: absolute; z-index: 2; pointer-events: none;
opacity: 0; animation: fadeIn .5s ease-out 1.6s forwards;
}
.hero-svg-bracket--tl { top: calc(var(--hdr-h) + 2rem); left: var(--pad-x); }
.hero-svg-bracket--br { bottom: clamp(4rem, 7vh, 6rem); right: var(--pad-x); }
.hero__inner {
position: relative; z-index: 3; width: 100%;
max-width: var(--max-w); margin-inline: auto;
padding-inline: var(--pad-x);
padding-top: calc(var(--hdr-h) + 4rem);
padding-bottom: 5rem;
}
.hero-content { max-width: 720px; }
.hero-eyebrow {
display: block;
font-family: var(--f-s1); font-size: .68rem; font-weight: 500;
letter-spacing: .22em; text-transform: uppercase;
color: var(--gold); margin-bottom: 1.75rem;
opacity: 0; animation: fadeIn .5s linear .15s forwards;
}
.hero-headline {
font-family: var(--f-dis);
font-size: clamp(2.6rem, 6vw, 5.5rem);
font-weight: 600; color: var(--navy);
letter-spacing: -.02em; line-height: 1.1;
overflow-wrap: break-word;
hyphens: auto;
-webkit-hyphens: auto;
opacity: 0; transform: translateX(-48px);
animation: slideInLeft .65s linear .25s forwards;
}
.hero-headline__line {
display: block;
}
.hero-line {
display: block; height: 2px; width: 0;
background: var(--gold); margin-top: 2rem;
border: none; animation: drawLine .55s linear .75s forwards;
}
.hero-sub {
font-family: var(--f-s1); font-size: 1.05rem; font-weight: 300;
color: var(--navy-dim); margin-top: 1.5rem;
line-height: 1.7; max-width: 500px;
opacity: 0; animation: fadeIn .6s linear 1.1s forwards;
}
.hero-cta-group {
display: flex; align-items: center;
gap: 1.25rem; margin-top: 2.75rem; flex-wrap: wrap;
opacity: 0; animation: fadeIn .5s linear 1.35s forwards;
} .wp-block-button.hero-cta-primary {
background: transparent !important;
border: none !important;
outline: none !important;
padding: 0 !important;
display: inline-block !important;
} .wp-block-button.hero-cta-primary .wp-block-button__link {
font-family: var(--f-s1) !important; font-size: .78rem !important; font-weight: 600 !important;
letter-spacing: .10em !important; text-transform: uppercase !important;
color: var(--white) !important; background: var(--gold) !important;
padding: 14px 32px !important; border-radius: 4px !important;
border: none !important;
text-decoration: none !important; transition: background .2s linear !important;
display: inline-block !important;
}
.wp-block-button.hero-cta-primary .wp-block-button__link:hover {
background: var(--gold-h) !important;
} .wp-block-button.hero-cta-secondary {
border: none !important;
background: transparent !important;
outline: none !important;
padding: 0 !important;
display: inline-block !important;
} .wp-block-button.hero-cta-secondary .wp-block-button__link {
font-family: var(--f-s1) !important; font-size: .78rem !important; font-weight: 500 !important;
letter-spacing: .10em !important; text-transform: uppercase !important;
color: var(--navy) !important; background: transparent !important;
border: 1px solid rgba(2,35,64,.65) !important;
padding: 13px 28px !important; border-radius: 4px !important;
text-decoration: none !important; transition: border-color .2s linear !important;
display: inline-block !important;
}
.wp-block-button.hero-cta-secondary .wp-block-button__link:hover {
border-color: var(--navy) !important;
background: transparent !important;
}
@media (max-width: 768px) {
.hero__inner { padding-top: calc(var(--hdr-h) + 3rem); }
.hero-cta-group { flex-direction: column; align-items: flex-start; }
.hero-svg-ruler, .hero-svg-bracket { display: none; }
.hero-headline { font-size: clamp(2.1rem, 9vw, 3.4rem); line-height: 1.12; } .hero-svg-circles {
display: block;
width: 78vw;
max-width: 360px;
height: auto;
aspect-ratio: 8 / 9;
top: calc(var(--hdr-h) - 4rem);
right: -6vw;
opacity: 0.55;
} .hero-svg-circles .deco-const-line { display: none; }
} .hero-section {
position: relative;
min-height: 100vh;
background-color: var(--cream);
background-image:
repeating-linear-gradient(
45deg,
transparent 0px, transparent 27px,
rgba(2,35,64,0.032) 27px, rgba(2,35,64,0.032) 28px
),
radial-gradient(ellipse 80% 65% at 8% 55%,  rgba(2,35,64,0.07) 0%, transparent 65%),
radial-gradient(ellipse 60% 70% at 92% 10%, rgba(2,35,64,0.04) 0%, transparent 60%),
radial-gradient(ellipse 70% 40% at 50% 95%, rgba(2,35,64,0.03) 0%, transparent 55%);
overflow: hidden;
}
.hero-section .wp-block-group__inner-container {
padding-top: calc(var(--hdr-h) + 4rem);
padding-bottom: 5rem;
padding-inline: var(--pad-x);
max-width: var(--max-w);
margin-inline: auto;
} .hero-section::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 55%; height: 100%;
background-image:
radial-gradient(ellipse at 75% 42%, rgba(151,133,88,0.12) 0%, transparent 50%);
z-index: 0;
pointer-events: none;
} .hero-deco-circles {
position: absolute;
top: 0; right: 0;
width: 55%; height: 100%;
z-index: 1;
pointer-events: none;
background-image:
radial-gradient(ellipse 350px 350px at 85% 42%, transparent 348px, rgba(151,133,88,0.38) 349px, transparent 351px),
radial-gradient(ellipse 250px 250px at 85% 42%, transparent 248px, rgba(151,133,88,0.28) 249px, transparent 251px),
radial-gradient(ellipse 150px 150px at 85% 42%, transparent 148px, rgba(151,133,88,0.20) 149px, transparent 151px),
radial-gradient(ellipse 70px 70px at 85% 42%, transparent 68px, rgba(151,133,88,0.16) 69px, transparent 71px);
}
.hero-inner-content {
position: relative;
z-index: 3;
padding-top: calc(var(--hdr-h) + 4rem);
padding-bottom: 5rem;
}
.hero-content-wrap { max-width: 720px; } .statement {
background: var(--navy);
padding: var(--sec-py) var(--pad-x);
}
.statement__inner {
max-width: var(--max-w); margin-inline: auto;
display: grid; grid-template-columns: 1fr 1fr;
gap: 5rem; align-items: center;
}
.statement__quote {
font-family: var(--f-ser);
font-size: clamp(1.8rem, 3vw, 2.8rem);
font-weight: 300; font-style: italic;
color: var(--white); line-height: 1.35;
border-left: 2px solid var(--gold);
padding-left: 2rem;
margin: 0;
}
.statement__body {
font-family: var(--f-s2); font-size: 1rem; font-weight: 300;
color: rgba(255,255,255,.68); line-height: 1.8;
}
.statement__body p + p { margin-top: 1rem; } .statement-section {
background: var(--navy) !important;
}
.statement-section .wp-block-columns {
max-width: var(--max-w);
margin-inline: auto;
gap: 5rem;
align-items: center;
}
.statement-quote-col blockquote,
.statement-quote-col .wp-block-quote {
font-family: var(--f-ser) !important;
font-size: clamp(1.8rem, 3vw, 2.8rem) !important;
font-weight: 300 !important;
font-style: italic !important;
color: var(--white) !important;
line-height: 1.35 !important;
border-left: 2px solid var(--gold) !important;
padding-left: 2rem !important;
margin: 0 !important;
border-top: none !important;
border-bottom: none !important;
border-right: none !important;
}
.statement-quote-col .wp-block-quote p {
font-family: var(--f-ser) !important;
font-size: clamp(1.8rem, 3vw, 2.8rem) !important;
font-weight: 300 !important;
font-style: italic !important;
color: var(--white) !important;
line-height: 1.35 !important;
margin: 0 !important;
}
.statement-body-col .wp-block-paragraph {
font-family: var(--f-s2);
font-size: 1rem;
font-weight: 300;
color: rgba(255,255,255,.68);
line-height: 1.8;
}
@media (max-width: 800px) {
.statement__inner { grid-template-columns: 1fr; gap: 2.5rem; }
.statement__quote {
border-left: none; border-top: 2px solid var(--gold);
padding-left: 0; padding-top: 1.5rem;
}
} .leistungen {
background: var(--cream);
padding: var(--sec-py) var(--pad-x);
}
.leistungen__head {
max-width: var(--max-w); margin-inline: auto; margin-bottom: 4rem;
}
.leistungen__h2 {
font-family: var(--f-ser);
font-size: clamp(2.2rem, 4vw, 3.5rem); font-weight: 600;
color: var(--navy); line-height: 1.15; margin-top: .5rem;
}
.leistungen__lead {
font-family: var(--f-s2); font-size: 1rem; font-weight: 300;
color: var(--brown); max-width: 560px; line-height: 1.75; margin-top: 1.25rem;
}
.leistungen__grid {
max-width: var(--max-w); margin-inline: auto;
display: grid; grid-template-columns: repeat(3, 1fr);
}
.leistungen__card {
padding: 2.5rem;
border-top: 1px solid var(--beige-mid);
border-right: 1px solid var(--beige-mid);
transition: background .2s ease;
}
.leistungen__card:last-child { border-right: none; }
.leistungen__card:hover { background: var(--beige-mid); }
.card-illu {
width: 100%;
margin-bottom: 1.5rem;
padding: 1rem 0.5rem;
border-bottom: 1px solid rgba(151,133,88,0.18);
}
.card-illu__svg {
display: block;
width: 100%;
max-width: 220px;
height: auto;
transition: transform .35s ease;
}
.leistungen__card:hover .card-illu__svg,
.leistungen-section .wp-block-column:hover .card-illu__svg {
transform: translateY(-2px);
}
.card-num {
font-family: var(--f-ser); font-size: 3.5rem; font-weight: 300;
color: var(--gold); opacity: .45; line-height: 1; margin-bottom: 1rem;
}
.card-title {
font-family: var(--f-ser); font-size: 1.5rem; font-weight: 600;
color: var(--navy); margin-bottom: 1rem; line-height: 1.2;
}
.card-body {
font-family: var(--f-s2); font-size: .93rem; font-weight: 300;
color: var(--brown); line-height: 1.75;
}
.card-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.tag {
font-family: var(--f-s2); font-size: .72rem; font-weight: 400;
letter-spacing: .04em; color: var(--navy);
border: 1px solid rgba(2,35,64,0.20); padding: 4px 10px; border-radius: 2px;
background: transparent;
} .leistungen-section {
background: var(--beige-mid) !important;
}
.leistungen-section .leistungen-head {
max-width: var(--max-w);
margin-inline: auto;
margin-bottom: 4rem;
}
.leistungen-section .wp-block-heading.leistungen__h2 {
font-family: var(--f-ser) !important;
font-size: clamp(2.2rem, 4vw, 3.5rem) !important;
font-weight: 600 !important;
color: var(--navy) !important;
line-height: 1.15 !important;
}
.leistungen-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
max-width: var(--max-w);
margin-inline: auto;
} .leistungen-section .wp-block-columns {
max-width: var(--max-w);
margin-inline: auto;
gap: 0 !important;
}
.leistungen-section .wp-block-column {
padding: 2.5rem;
border-top: 1px solid var(--beige-mid);
border-right: 1px solid var(--beige-mid);
transition: background .2s ease;
}
.leistungen-section .wp-block-column:last-child { border-right: none; }
.leistungen-section .wp-block-column:hover { background: var(--beige-mid); }
@media (max-width: 900px) {
.leistungen__grid { grid-template-columns: 1fr; }
.leistungen__card { border-right: none; border-bottom: 1px solid var(--beige-mid); }
.leistungen__card:last-child { border-bottom: none; }
.leistungen-section .wp-block-columns { flex-direction: column; }
.leistungen-section .wp-block-column { border-right: none; border-bottom: 1px solid var(--beige-mid); }
.leistungen-section .wp-block-column:last-child { border-bottom: none; }
} .equal-cards > .wp-block-column {
display: flex;
flex-direction: column;
flex-grow: 0;
}
.equal-cards > .wp-block-column > .wp-block-group {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.equal-cards .cta-bottom {
margin-top: auto;
justify-content: center;
} .ueber-section {
background: var(--cream) !important;
padding: var(--sec-py) var(--pad-x) !important;
}
.ueber-layout {
display: grid;
grid-template-columns: 55fr 45fr;
gap: clamp(3rem, 6vw, 6rem);
align-items: center;
max-width: var(--max-w);
margin: 0 auto;
}
.ueber-h2 {
font-family: var(--f-ser);
font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 600;
color: var(--navy); line-height: 1.2; margin-top: .5rem;
}
.ueber-body {
font-family: var(--f-s2); font-size: .95rem; font-weight: 300;
color: var(--brown); line-height: 1.8; margin-top: 1.5rem;
}
.ueber-body p + p { margin-top: 1rem; }
.ueber-quote-block {
font-family: var(--f-ser);
font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 300; font-style: italic;
color: var(--navy); line-height: 1.6;
border-left: 2.5px solid var(--gold);
padding-left: 1.25rem;
margin: 2rem 0 !important;
}
.ueber-skills { display: flex; flex-wrap: wrap; gap: .65rem !important; margin-top: 2rem; padding-bottom: 3rem; }
.skill-tag {
font-family: var(--f-s2); font-size: .8rem; font-weight: 400;
color: var(--gold); border: 1px solid rgba(151,133,88,.4);
padding: 5px 12px; border-radius: 2px;
} .ueber-stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
max-width: var(--max-w);
margin: 4.5rem auto 0;
padding-top: 2.5rem;
border-top: 1px solid rgba(2,35,64,0.12);
}
.ueber-stat { display: flex; flex-direction: column; }
.stat-num {
font-family: var(--f-ser); font-size: 2.8rem; font-weight: 300;
color: var(--gold); line-height: 1; margin: 0;
}
.stat-label {
font-family: var(--f-s2); font-size: .8rem; font-weight: 300;
color: var(--navy); opacity: 0.55; margin-top: .4rem; letter-spacing: .03em;
} .ueber-visual { display: flex; justify-content: center; }
.ueber-portrait-wrap {
position: relative;
width: 75%;
}
.ueber-portrait-img,
.ueber-portrait-img img {
width: 100%;
height: auto;
display: block;
border-radius: 2px;
border: 1px solid rgba(151,133,88,0.35);
}
.ueber-portrait-wrap::before,
.ueber-portrait-wrap::after {
content: '';
position: absolute;
width: 52px; height: 52px;
pointer-events: none;
}
.ueber-portrait-wrap::before {
top: -10px; left: -10px;
border-left: 1.5px solid var(--gold);
border-top: 1.5px solid var(--gold);
}
.ueber-portrait-wrap::after {
bottom: -10px; right: -10px;
border-right: 1.5px solid var(--gold);
border-bottom: 1.5px solid var(--gold);
}
@media (max-width: 900px) {
.ueber-layout { grid-template-columns: 1fr; }
.ueber-visual { order: -1; }
.ueber-portrait-wrap { width: 60%; }
.ueber-stats-row { grid-template-columns: 1fr; gap: 1.5rem; }
} @media (max-width: 782px) {
.ueber-section .wp-block-columns.ueber-layout {
display: flex !important;
flex-direction: column !important;
flex-wrap: wrap !important;
gap: 2rem !important;
}
.ueber-section .wp-block-columns.ueber-layout > .wp-block-column {
flex-basis: 100% !important;
width: 100% !important;
max-width: 100% !important;
}
.ueber-section .wp-block-column.ueber-visual { order: -1; }
.ueber-portrait-wrap { width: min(70%, 280px); margin: 0 auto; }
.ueber-portrait-wrap::before,
.ueber-portrait-wrap::after { width: 36px; height: 36px; }
.ueber-h2 { font-size: clamp(1.75rem, 7vw, 2.25rem) !important; }
.ueber-body { font-size: 1rem; }
.ueber-quote-block { font-size: 1.05rem !important; margin: 1.75rem 0 !important; }
.ueber-skills { padding-bottom: 1.5rem; margin-top: 1.5rem; }
.ueber-section .wp-block-columns.ueber-stats-row {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem !important;
margin-top: 2.5rem;
padding-top: 2rem;
}
.ueber-section .wp-block-columns.ueber-stats-row > .wp-block-column {
flex-basis: auto !important;
width: auto !important;
}
.ueber-stats-row .stat-num { font-size: clamp(1.7rem, 7vw, 2.2rem); }
.ueber-stats-row .stat-label { font-size: 0.72rem; line-height: 1.35; }
}
@media (max-width: 480px) {
.ueber-section .wp-block-columns.ueber-stats-row {
grid-template-columns: 1fr;
gap: 1.5rem !important;
}
.ueber-stats-row .stat-label { font-size: 0.78rem; }
} .referenzen {
background: var(--beige-mid);
padding: var(--sec-py) var(--pad-x);
}
.referenzen__head {
max-width: var(--max-w); margin-inline: auto; margin-bottom: 3.5rem;
display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
}
.referenzen__h2 {
font-family: var(--f-ser);
font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 600;
color: var(--navy); line-height: 1.15; margin-top: .5rem;
}
.ref-link-all {
font-family: var(--f-s2); font-size: .85rem; font-weight: 400;
color: var(--gold); white-space: nowrap;
margin: 0;
line-height: 1.4;
} .ref-link-all a,
.ref-link-all a:hover {
background-image: none !important;
background-size: 0 0 !important;
}
.ref-link-all a {
color: var(--gold);
text-decoration: none;
border-bottom: 1px solid rgba(151,133,88,.4);
padding-bottom: 2px;
transition: border-color .2s ease, color .2s ease;
}
.ref-link-all a:hover {
border-color: var(--gold);
color: var(--gold-h);
}
.referenzen__grid {
max-width: var(--max-w); margin-inline: auto;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.ref-card {
background: var(--cream);
padding: 0;
border-radius: 4px;
display: flex;
flex-direction: column;
transition: transform .25s ease, box-shadow .25s ease;
border: 1px solid rgba(2, 35, 64, 0.06);
box-shadow: 0 1px 3px rgba(2, 35, 64, 0.04);
}
.ref-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(2, 35, 64, 0.10), 0 2px 8px rgba(2, 35, 64, 0.05);
}
.ref-cat {
font-family: var(--f-s1); font-size: .66rem; font-weight: 600;
letter-spacing: .18em; text-transform: uppercase;
color: var(--gold); margin-bottom: 0.85rem;
display: block;
}
.ref-title {
font-family: var(--f-ser); font-size: 1.35rem; font-weight: 600;
color: var(--navy); line-height: 1.25; margin-bottom: 0.85rem;
}
.ref-desc {
font-family: var(--f-s2); font-size: .88rem; font-weight: 300;
color: var(--navy-dim); line-height: 1.7; flex: 1;
}
.ref-footer {
margin-top: 1.5rem; padding-top: 1rem;
border-top: 1px solid rgba(2, 35, 64, 0.08);
display: flex; align-items: center; justify-content: space-between;
gap: 1rem;
}
.ref-tag {
font-family: var(--f-s2); font-size: .72rem; font-weight: 400;
color: rgba(2, 35, 64, 0.45);
letter-spacing: 0.02em;
}
.ref-arrow {
color: var(--gold); font-size: 1rem; text-decoration: none;
transition: transform .2s;
flex-shrink: 0;
}
.ref-card:hover .ref-arrow { transform: translateX(4px); } .ref-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.75rem;
width: 100%;
}
.ref-grid .ref-card {
background: var(--white);
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1), border-color .3s ease;
border: 1px solid rgba(2, 35, 64, 0.06);
box-shadow: 0 1px 3px rgba(2, 35, 64, 0.04);
position: relative;
}
.ref-grid .ref-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: 8px;
pointer-events: none;
box-shadow: inset 0 0 0 0 var(--gold);
transition: box-shadow .3s ease;
z-index: 2;
}
.ref-grid .ref-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 44px rgba(2, 35, 64, 0.12), 0 4px 12px rgba(2, 35, 64, 0.06);
border-color: rgba(151, 133, 88, 0.30);
}
.ref-grid .ref-card:hover::before {
box-shadow: inset 0 -3px 0 0 var(--gold);
}
.ref-card-link {
display: flex;
flex-direction: column;
flex: 1;
text-decoration: none;
background-image: none !important;
color: inherit;
}
.ref-card__img {
width: 100%;
aspect-ratio: 16 / 10;
background-color: var(--beige-mid);
flex-shrink: 0;
border-bottom: 1px solid rgba(2, 35, 64, 0.06);
transition: transform 0.5s cubic-bezier(.4,0,.2,1);
position: relative;
overflow: hidden;
}
.ref-card__img .ref-card__img-el,
.ref-card__img > img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.ref-card__img--placeholder .ref-card__img-el {
object-fit: contain;
padding: 1.5rem;
background: var(--beige-mid);
}
.ref-grid .ref-card:hover .ref-card__img {
transform: scale(1.03);
} .ref-card__img::after {
content: '';
position: absolute;
inset: auto 0 0 0;
height: 40%;
background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.35));
pointer-events: none;
}
.ref-card__body {
padding: 1.75rem 1.75rem 1.5rem;
flex: 1;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.ref-card .ref-cat {
margin-bottom: 0 !important;
padding: 4px 10px;
background: rgba(151, 133, 88, 0.10);
border-radius: 3px;
align-self: flex-start;
font-size: .62rem !important;
letter-spacing: .18em !important;
}
.ref-card .ref-title {
margin-bottom: 0 !important;
font-size: 1.4rem !important;
line-height: 1.3 !important;
}
.ref-card .ref-desc {
margin-bottom: 0 !important;
font-size: .9rem !important;
line-height: 1.65 !important;
color: var(--brown) !important;
}
.ref-card .ref-footer {
margin-top: auto !important;
padding-top: 1.25rem !important;
border-top: 1px solid rgba(2, 35, 64, 0.08);
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 1rem;
}
.ref-card .ref-tag {
font-family: var(--f-s1);
font-size: .68rem;
font-weight: 500;
color: rgba(2, 35, 64, 0.45);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.ref-card .ref-arrow {
font-size: 1rem !important;
font-weight: 400 !important;
color: var(--white) !important;
width: 38px;
height: 38px;
min-width: 38px;
background: var(--navy);
border-radius: 50%;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0;
transition: background .25s ease, transform .25s ease;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
text-indent: 0;
font-family: var(--f-s2);
}
.ref-card .ref-arrow {
font-size: 0 !important;
color: transparent !important;
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8 H13'/%3E%3Cpath d='M9 4 L13 8 L9 12'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center center;
background-size: 16px 16px;
}
.ref-card .ref-arrow::before { content: none; }
.ref-grid .ref-card:hover .ref-arrow {
background-color: var(--gold);
transform: translateX(4px);
}
@media (max-width: 800px) {
.ref-grid { grid-template-columns: 1fr; }
}  .screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.ref-archiv-page__h1 {
font-family: var(--f-ser);
font-size: clamp(2.25rem, 4vw, 3.25rem);
color: var(--navy);
}
.ref-archiv-page__lead {
font-family: var(--f-s2);
color: var(--navy-dim);
font-weight: 300;
max-width: 70ch;
}
.ref-archiv {
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.ref-archiv__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(2, 35, 64, 0.08);
}
.ref-archiv__search {
flex: 1 1 320px;
max-width: 460px;
position: relative;
display: block;
}
.ref-archiv__search-input {
width: 100%;
height: 48px;
padding: 0 1.25rem 0 2.75rem;
font-family: var(--f-s2);
font-size: 0.95rem;
color: var(--navy);
background-color: #ffffff;
border: 1px solid rgba(2, 35, 64, 0.12);
border-radius: 999px;
transition: border-color .2s ease, box-shadow .2s ease;
line-height: 1.3;
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23978558' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 1rem center;
background-size: 16px 16px;
}
.ref-archiv__search-input::placeholder {
color: rgba(2, 35, 64, 0.42);
font-weight: 300;
}
.ref-archiv__search-input:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(151, 133, 88, 0.18);
}
.ref-archiv__count {
font-family: var(--f-s1);
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--navy-dim);
margin: 0 0 0 auto;
text-align: right;
line-height: 1.4;
}
.ref-archiv__count [data-ref-count] {
display: block;
font-family: var(--f-ser);
font-weight: 600;
color: var(--navy);
font-size: 1.6rem;
letter-spacing: 0;
line-height: 1.1;
margin-bottom: 0.2rem;
}
.ref-archiv__count [data-ref-count-label] {
display: block;
}
.ref-archiv__filter-group {
display: flex;
align-items: flex-start;
gap: 1.5rem;
flex-wrap: nowrap;
}
.ref-archiv__filter-label {
font-family: var(--f-s1);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
margin: 0;
flex-shrink: 0;
width: 110px;
padding-top: 0.55rem;
}
.ref-archiv__pills {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
flex: 1;
min-width: 0;
}
.ref-pill {
display: inline-flex;
align-items: center;
padding: 0.5rem 1.05rem;
font-family: var(--f-s2);
font-size: 0.85rem;
font-weight: 400;
color: var(--navy-dim);
background: transparent;
border: 1px solid rgba(2, 35, 64, 0.15);
border-radius: 999px;
cursor: pointer;
transition: color .2s ease, background-color .2s ease, border-color .2s ease;
line-height: 1.2;
white-space: nowrap;
}
.ref-pill:hover {
color: var(--navy);
border-color: rgba(151, 133, 88, 0.5);
}
.ref-pill.is-active {
color: #ffffff;
background: var(--navy);
border-color: var(--navy);
}
.ref-pill.is-active:hover {
background: var(--gold);
border-color: var(--gold);
}
.ref-archiv__grid {
margin-top: 1rem;
} .ref-archiv [data-ref-item][hidden],
.ref-archiv .ref-card[hidden] {
display: none !important;
}
.ref-archiv__grid.is-empty {
display: none;
}
.ref-archiv__empty-state {
text-align: center;
padding: 3rem 1.5rem;
font-family: var(--f-s2);
color: var(--navy-dim);
font-size: 1rem;
background: rgba(2, 35, 64, 0.025);
border-radius: 8px;
border: 1px dashed rgba(2, 35, 64, 0.12);
}
.ref-archiv__reset {
display: inline-block;
margin-left: 0.5rem;
background: none;
border: none;
color: var(--gold);
font-family: var(--f-s2);
font-size: inherit;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
padding: 0;
}
.ref-archiv__reset:hover { color: var(--navy); }
.ref-archiv__empty {
font-family: var(--f-s2);
color: var(--navy-dim);
text-align: center;
padding: 3rem 0;
}
@media (max-width: 800px) {
.ref-archiv { gap: 1.25rem; }
.ref-archiv__toolbar {
flex-direction: row;
align-items: center;
gap: 0.75rem;
padding-bottom: 1rem;
flex-wrap: wrap;
}
.ref-archiv__search { max-width: none; flex: 1 1 100%; }
.ref-archiv__count {
text-align: left;
display: inline-flex;
align-items: baseline;
gap: 0.4rem;
margin: 0;
font-size: 0.7rem;
}
.ref-archiv__count [data-ref-count] {
display: inline;
font-size: 1.05rem;
margin-bottom: 0;
line-height: 1;
}
.ref-archiv__count [data-ref-count-label] {
display: inline;
}
.ref-archiv__filter-group { flex-direction: column; align-items: flex-start; gap: 0.4rem; flex-wrap: wrap; }
.ref-archiv__filter-label { width: auto; padding-top: 0; }
.ref-archiv__pills { width: 100%; gap: 0.4rem; }
.ref-pill { font-size: 0.78rem; padding: 0.4rem 0.85rem; }
} .ueber-visual {
margin-bottom: 2.5rem;
}
.ueber-portrait-wrap {
position: relative;
display: block;
width: 75%;
}
.ueber-portrait-img,
.ueber-portrait-img img {
width: 100%;
height: auto;
display: block;
border-radius: 2px;
border: 1px solid rgba(151,133,88,0.35);
}
.ueber-portrait-wrap::before,
.ueber-portrait-wrap::after {
content: '';
position: absolute;
width: 52px;
height: 52px;
pointer-events: none;
}
.ueber-portrait-wrap::before {
top: -10px;
left: -10px;
border-left: 1.5px solid var(--gold);
border-top: 1.5px solid var(--gold);
}
.ueber-portrait-wrap::after {
bottom: -10px;
right: -10px;
border-right: 1.5px solid var(--gold);
border-bottom: 1.5px solid var(--gold);
} .hero-portrait {
position: absolute;
top: 0; right: 0;
width: 38%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.hero-portrait__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
opacity: 0.55;
} .referenzen-section {
background: var(--beige-mid) !important;
}
.referenzen-section .wp-block-columns {
max-width: var(--max-w);
margin-inline: auto;
gap: 1.5rem;
}
.referenzen-section .wp-block-column {
background: var(--navy);
padding: 2.5rem;
border-radius: 2px;
display: flex;
flex-direction: column;
transition: transform .2s ease;
}
.referenzen-section .wp-block-column:hover { transform: translateY(-3px); }
@media (max-width: 900px) {
.referenzen__grid { grid-template-columns: 1fr; }
.referenzen__head {
flex-direction: column;
align-items: flex-start !important;
}
} .ablauf {
background: var(--cream);
padding: var(--sec-py) var(--pad-x);
}
.ablauf__head {
max-width: var(--max-w); margin-inline: auto; margin-bottom: 4rem;
display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end;
}
.ablauf__h2 {
font-family: var(--f-ser);
font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 600;
color: var(--navy); line-height: 1.15; margin-top: .5rem;
}
.ablauf__intro {
font-family: var(--f-s2); font-size: .95rem; font-weight: 300;
color: var(--brown); line-height: 1.8;
}
.ablauf__steps {
max-width: var(--max-w); margin-inline: auto;
display: grid; grid-template-columns: repeat(3, 1fr);
}
.ablauf__step {
padding: 2.5rem;
border-top: 1px solid var(--beige-mid);
border-right: 1px solid var(--beige-mid);
}
.ablauf__step:nth-child(3n) { border-right: none; }
.ablauf__step:nth-child(n+4) { border-top: 1px solid var(--beige-mid); }
.step-num {
font-family: var(--f-ser); font-size: 3rem; font-weight: 300;
color: var(--gold); opacity: .35; line-height: 1; margin-bottom: .75rem;
}
.step-title {
font-family: var(--f-ser); font-size: 1.25rem; font-weight: 600;
color: var(--navy); margin-bottom: .75rem;
}
.step-body {
font-family: var(--f-s2); font-size: .88rem; font-weight: 300;
color: var(--brown); line-height: 1.75;
} .ablauf-section {
background: var(--cream) !important;
}
.ablauf-steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
max-width: var(--max-w);
margin-inline: auto;
}
.ablauf-steps-grid .wp-block-column {
padding: 2.5rem;
border-top: 1px solid var(--beige-mid);
border-right: 1px solid var(--beige-mid);
}
.ablauf-steps-grid .wp-block-column:nth-child(3n) { border-right: none; }
@media (max-width: 900px) {
.ablauf__head { grid-template-columns: 1fr; gap: 1.5rem; }
.ablauf__steps { grid-template-columns: 1fr; }
.ablauf__step { border-right: none; border-bottom: 1px solid var(--beige-mid); }
.ablauf__step:last-child { border-bottom: none; }
.ablauf-steps-grid { grid-template-columns: 1fr; }
.ablauf-steps-grid .wp-block-column { border-right: none; border-bottom: 1px solid var(--beige-mid); }
} .kontakt {
background: var(--navy);
padding: var(--sec-py) var(--pad-x);
}
.kontakt__inner {
max-width: var(--max-w); margin-inline: auto;
display: grid; grid-template-columns: 60fr 40fr;
gap: 5rem; align-items: center;
}
.kontakt__h2 {
font-family: var(--f-ser);
font-size: clamp(2.2rem, 4vw, 3.5rem); font-weight: 600;
color: var(--white); line-height: 1.15; margin-top: .5rem;
}
.kontakt__lead {
font-family: var(--f-s2); font-size: .95rem; font-weight: 300;
color: rgba(255,255,255,.62); line-height: 1.8; margin-top: 1.25rem;
}
.kontakt__cta-group {
display: flex; flex-direction: column;
gap: 1.25rem; align-items: flex-start;
} .wp-block-button.kontakt-btn {
background: transparent !important;
border: none !important;
outline: none !important;
padding: 0 !important;
display: inline-block !important;
}
.kontakt-btn,
.wp-block-button.kontakt-btn .wp-block-button__link {
font-family: var(--f-s2) !important; font-size: 1rem !important; font-weight: 500 !important;
color: var(--navy) !important; background: var(--gold) !important;
padding: 16px 40px !important; border-radius: 4px !important;
border: none !important;
text-decoration: none !important; letter-spacing: .04em !important;
transition: background .2s ease !important; display: inline-block !important;
}
.kontakt-btn:hover,
.wp-block-button.kontakt-btn .wp-block-button__link:hover { background: var(--gold-h) !important; }
.kontakt-detail {
font-family: var(--f-s2); font-size: 1rem; font-weight: 300;
color: rgba(255,255,255,.6); line-height: 1.8;
}
.kontakt-detail a {
color: var(--gold); text-decoration: none;
font-size: 1.05rem; font-weight: 400;
}
.kontakt-detail a:hover { text-decoration: underline; } .kontakt-section {
background: var(--navy) !important;
}
.kontakt-section .wp-block-columns {
max-width: var(--max-w);
margin-inline: auto;
gap: 5rem;
align-items: center;
}
.kontakt-section .wp-block-heading {
color: var(--white) !important;
font-family: var(--f-ser) !important;
font-size: clamp(2.2rem, 4vw, 3.5rem) !important;
font-weight: 600 !important;
line-height: 1.15 !important;
}
.kontakt-section .wp-block-paragraph {
color: rgba(255,255,255,.62) !important;
font-family: var(--f-s2) !important;
font-size: .95rem !important;
font-weight: 300 !important;
line-height: 1.8 !important;
}
.kontakt-section .wp-block-button__link {
font-family: var(--f-s2) !important;
font-size: .9rem !important;
font-weight: 500 !important;
background: var(--gold) !important;
color: var(--navy) !important;
padding: 14px 32px !important;
border-radius: 4px !important;
letter-spacing: .04em !important;
transition: background .2s ease !important;
}
.kontakt-section .wp-block-button__link:hover { background: var(--gold-h) !important; }
.kontakt-section .sec-label { color: rgba(151,133,88,0.8); }
@media (max-width: 800px) {
.kontakt__inner { grid-template-columns: 1fr; gap: 2.5rem; }
.kontakt-section .wp-block-columns { flex-direction: column; }
} .faq {
background: var(--cream);
padding: var(--sec-py) var(--pad-x);
}
.faq__head {
max-width: var(--max-w); margin-inline: auto; margin-bottom: 3rem;
}
.faq__h2 {
font-family: var(--f-dis);
font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 600;
color: var(--navy); margin-top: .5rem;
}
.faq__list { max-width: 820px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--beige-mid); }
.faq-question {
width: 100%; background: none; border: none; cursor: pointer;
text-align: left; display: flex; align-items: center;
justify-content: space-between; padding: 1.5rem 0; gap: 1rem;
color: var(--navy); text-decoration: none;
}
.faq-q-text {
font-family: var(--f-dis); font-size: 1.1rem; font-weight: 400;
color: var(--navy); line-height: 1.4;
text-decoration: none;
}
.faq-q-text a, .faq-question a {
color: inherit; text-decoration: none;
}
.faq-icon {
width: 26px; height: 26px; flex-shrink: 0;
border: 1px solid var(--gold); border-radius: 50%;
transition: transform .25s ease; margin: 0 !important; padding: 0 !important;
line-height: 0 !important;
display: block !important; color: transparent !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cline x1='7' y1='1' x2='7' y2='13' stroke='%23978558' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='1' y1='7' x2='13' y2='7' stroke='%23978558' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center center;
background-size: 12px 12px;
}
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-answer { display: none; padding: 0 0 1.5rem; }
.faq-item.is-open .faq-answer { display: block; }
.faq-answer p {
font-family: var(--f-s1); font-size: .93rem; font-weight: 300;
color: var(--navy-dim); line-height: 1.8;
} .faq-section {
background: var(--cream) !important;
}
.faq-section .faq__list {
max-width: 820px;
margin-inline: auto;
} .site-footer {
background: var(--navy);
padding: 4rem var(--pad-x) 2.5rem;
border-top: 1px solid var(--gold);
}
.footer-inner { max-width: var(--max-w); margin-inline: auto; }
.footer-top {
display: grid; grid-template-columns: 2fr 1fr 1fr;
gap: 4rem; padding-bottom: 3rem;
border-bottom: 1px solid rgba(151,133,88,.15);
}
.footer-logo-img {
display: block;
margin-bottom: 1.25rem;
}
.footer-logo-img img,
.footer-logo img,
.aiello-footer .wp-block-site-logo img {
height: 112px !important;
width: auto !important;
max-width: none !important;
display: block;
filter: brightness(0) invert(1);
opacity: 0.85;
}
.footer-tagline {
font-family: var(--f-ser); font-size: 1.05rem; font-weight: 300; font-style: italic;
color: rgba(255,255,255,.5); line-height: 1.65; max-width: 280px;
}
.footer-col-title {
font-family: var(--f-s2); font-size: .68rem; font-weight: 500;
letter-spacing: .16em; text-transform: uppercase;
color: var(--gold); display: block;
}
.aiello-footer .footer-col-title {
margin-bottom: .75rem !important;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.footer-col a {
font-family: var(--f-s2); font-size: .88rem; font-weight: 300;
color: rgba(255,255,255,.5); text-decoration: none;
transition: color .2s ease;
}
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
padding-top: 2rem;
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; flex-wrap: wrap;
}
.footer-copy {
font-family: var(--f-s2); font-size: .78rem; font-weight: 300;
color: rgba(255,255,255,.28);
}
.footer-legal {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.footer-legal a {
font-family: var(--f-s2); font-size: .78rem; font-weight: 300;
color: rgba(255,255,255,.28); text-decoration: none;
transition: color .2s;
}
.footer-legal a:hover { color: var(--gold); }
.footer-legal__sep {
color: rgba(255,255,255,.18);
font-size: .78rem;
} .aiello-footer {
background: var(--navy) !important;
border-top: 1px solid var(--gold) !important;
}
.aiello-footer .wp-block-columns {
max-width: var(--max-w);
margin-inline: auto;
gap: 4rem;
padding-bottom: 3rem;
border-bottom: 1px solid rgba(151,133,88,.15);
}
.aiello-footer .footer-logo {
height: auto;
width: auto;
display: block;
margin-bottom: 1.75rem;
}
.aiello-footer .wp-block-paragraph {
font-family: var(--f-ser) !important;
font-size: 1.05rem !important;
font-weight: 300 !important;
font-style: italic !important;
color: rgba(255,255,255,.5) !important;
line-height: 1.65 !important;
}
.aiello-footer .wp-block-navigation__container {
flex-direction: column !important;
gap: .6rem !important;
} .aiello-footer .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
display: block !important;
position: relative !important;
width: 100%;
z-index: auto;
}
.aiello-footer .wp-block-navigation__responsive-container-open {
display: none !important;
} .aiello-footer .footer-col .wp-block-navigation { margin-top: 0 !important; }
.aiello-footer .wp-block-navigation-item { position: relative; }
.aiello-footer .wp-block-navigation-item__content {
font-family: var(--f-s2) !important;
font-size: .88rem !important;
font-weight: 300 !important;
color: rgba(255,255,255,.5) !important;
text-decoration: none !important;
transition: background-size 0.25s ease, color 0.2s ease !important;
}
.aiello-footer .wp-block-navigation-item__content:hover { color: var(--gold) !important; }
.footer-copyright-bar {
padding-top: 2rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
max-width: var(--max-w);
margin-inline: auto;
}
.footer-copyright-bar .wp-block-paragraph {
font-family: var(--f-s2) !important;
font-size: .78rem !important;
font-weight: 300 !important;
color: rgba(255,255,255,.28) !important;
}
@media (max-width: 800px) {
.footer-top { grid-template-columns: 1fr; gap: 2rem; }
.aiello-footer .wp-block-columns { flex-direction: column; }
} body {
padding-top: var(--hdr-h);
} .aiello-header-fixed {
transition: transform 0.35s cubic-bezier(0.4,0,0.2,1) !important;
}
.aiello-header-fixed.header--hidden {
transform: translateY(-100%) !important;
} .admin-bar .aiello-header-fixed {
top: 32px !important;
}
@media screen and (max-width: 782px) {
.admin-bar .aiello-header-fixed {
top: 46px !important;
}
} .prose {
--prose-body:      var(--navy);
--prose-lead:      1.75;
--prose-gap:       1.5em;
--prose-gap-h:     2em;
font-family: var(--f-s2);
font-size: 1.0625rem;
line-height: 1.75;
color: var(--prose-body);
max-width: 72ch;
}
.prose p,
.prose ul,
.prose ol,
.prose blockquote,
.prose pre,
.prose table,
.prose figure,
.prose hr {
margin-top: 0;
margin-bottom: var(--prose-gap);
} .prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
font-family: var(--f-dis);
color: var(--navy);
line-height: 1.25;
margin-top: var(--prose-gap-h);
margin-bottom: 0.6em;
}
.prose h1 { font-size: clamp(2rem, 3.5vw, 3rem); }
.prose h2 {
font-size: clamp(1.5rem, 2.5vw, 2rem);
position: relative;
padding-top: 2.25rem;
margin-top: 2.75em;
}
.prose h2::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 48px;
height: 2px;
background: var(--gold);
}
.prose > h2:first-child { margin-top: 0; }
.prose h3 {
font-size: 1.375rem;
position: relative;
padding-left: 1rem;
margin-top: 2em;
}
.prose h3::before {
content: '';
position: absolute;
top: 0.55em;
left: 0;
width: 6px;
height: 6px;
background: var(--gold);
transform: rotate(45deg);
border-radius: 1px;
}
.prose h4 { font-size: 1.125rem; }
.prose h5,
.prose h6 { font-size: 1rem; font-family: var(--f-s1); letter-spacing: 0.05em; text-transform: uppercase; } .prose a {
color: var(--gold);
text-decoration: underline;
text-decoration-color: rgba(151, 133, 88, 0.35);
text-underline-offset: 3px;
transition: color 0.2s, text-decoration-color 0.2s;
}
.prose a:hover {
color: var(--gold-h);
text-decoration-color: var(--gold-h);
} .prose strong { font-weight: 600; color: var(--navy); }
.prose em { font-style: italic; } .prose ul,
.prose ol {
padding-left: 1.5em;
}
.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }
.prose li { margin-bottom: 0.4em; }
.prose li::marker { color: var(--gold); } .prose blockquote {
border-left: 3px solid var(--gold);
padding: 0.75em 0 0.75em 1.5em;
margin-left: 0;
font-family: var(--f-ser);
font-size: 1.2em;
font-style: italic;
color: rgba(2, 35, 64, 0.75);
}
.prose blockquote p { margin-bottom: 0; } .prose code {
font-size: 0.875em;
background: var(--beige-mid);
padding: 0.15em 0.4em;
border-radius: 3px;
font-family: ui-monospace, 'Cascadia Code', monospace;
}
.prose pre {
background: var(--navy);
color: var(--cream);
padding: 1.25em 1.5em;
border-radius: 6px;
overflow-x: auto;
font-size: 0.875em;
line-height: 1.6;
}
.prose pre code {
background: none;
padding: 0;
color: inherit;
} .prose hr {
border: none;
border-top: 1px solid var(--beige-mid);
margin-top: var(--prose-gap-h);
margin-bottom: var(--prose-gap-h);
} .prose img,
.prose figure img {
max-width: 100%;
height: auto;
border-radius: 4px;
}
.prose figcaption {
font-size: 0.85em;
color: rgba(2, 35, 64, 0.55);
text-align: center;
margin-top: 0.5em;
} .prose table {
width: 100%;
border-collapse: collapse;
font-size: 0.9375em;
}
.prose thead th {
font-family: var(--f-s1);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(2, 35, 64, 0.6);
border-bottom: 2px solid var(--beige-mid);
padding: 0.5em 0.75em;
text-align: left;
}
.prose td {
padding: 0.6em 0.75em;
border-bottom: 1px solid var(--beige-mid);
vertical-align: top;
}
.prose tr:last-child td { border-bottom: none; } .prose .wp-block-buttons,
.wp-block-buttons {
gap: 0.75rem;
flex-wrap: wrap;
}
.wp-block-button:not(.is-style-outline):not(.hero-cta-primary):not(.hero-cta-secondary):not(.kontakt-btn) .wp-block-button__link {
color: var(--white) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link {
background: transparent !important;
color: var(--navy) !important;
border: 2px solid var(--navy) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
background: var(--navy) !important;
color: var(--white) !important;
} .prose > *:first-child { margin-top: 0; }
.prose > *:last-child  { margin-bottom: 0; }  .ref-hero {
position: relative;
overflow: hidden;
background-color: var(--cream);
background-image:
repeating-linear-gradient(
45deg,
transparent 0px, transparent 27px,
rgba(2,35,64,0.028) 27px, rgba(2,35,64,0.028) 28px
),
radial-gradient(ellipse 70% 60% at 92% 50%, rgba(151,133,88,0.10) 0%, transparent 60%),
radial-gradient(ellipse 55% 40% at 8% 110%, rgba(2,35,64,0.05) 0%, transparent 60%);
}
.ref-hero > .wp-block-columns {
position: relative;
z-index: 2;
}
.ref-hero__deco {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.ref-hero__deco-circles {
position: absolute;
bottom: -180px;
right: -180px;
width: 720px;
height: 720px;
max-width: 75%;
opacity: 0;
animation: fadeIn 1.2s ease-out 0.4s forwards;
}
@media (max-width: 768px) {
.ref-hero__deco-circles { display: none; }
} .ref-section-divider {
position: relative;
background: var(--cream);
height: 1px;
margin: 0;
}
.ref-section-divider::before,
.ref-section-divider::after {
content: '';
position: absolute;
top: 50%;
width: calc(50% - 80px);
height: 1px;
background: linear-gradient(to right, transparent, rgba(151,133,88,0.35));
transform: translateY(-50%);
}
.ref-section-divider::before { left: 0; }
.ref-section-divider::after {
right: 0;
background: linear-gradient(to left, transparent, rgba(151,133,88,0.35));
}
.ref-section-divider__dot {
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
background: var(--gold);
transform: translate(-50%, -50%) rotate(45deg);
border-radius: 1px;
} .ref-content-section {
background: var(--white);
position: relative;
} .ref-screenshots-section {
background: var(--beige-mid);
position: relative;
overflow: clip;
}
.ref-screenshots-section::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(ellipse 50% 50% at 100% 0%, rgba(151,133,88,0.10) 0%, transparent 60%),
radial-gradient(ellipse 60% 40% at 0% 100%, rgba(2,35,64,0.05) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
.ref-screenshots-section > * { position: relative; z-index: 1; }
.ref-screenshots-head {
max-width: var(--max-w);
margin: 0 auto 3rem;
text-align: left;
}
.ref-screenshots-h2 {
font-family: var(--f-ser);
font-size: clamp(1.6rem, 2.6vw, 2.25rem);
font-weight: 600;
color: var(--navy);
line-height: 1.2;
margin: 0.5rem 0 0;
} .ref-back-nav {
color: rgba(255,255,255,0.6);
border-top: 1px solid rgba(151,133,88,0.18);
}
.ref-back-nav .wp-block-button.is-style-outline .wp-block-button__link {
color: var(--white) !important;
border: 1px solid rgba(255,255,255,0.4) !important;
background: transparent !important;
font-family: var(--f-s1) !important;
font-size: 0.78rem !important;
font-weight: 500 !important;
letter-spacing: 0.10em !important;
text-transform: uppercase !important;
padding: 13px 28px !important;
border-radius: 4px !important;
transition: border-color 0.2s, background 0.2s !important;
}
.ref-back-nav .wp-block-button.is-style-outline .wp-block-button__link:hover {
border-color: var(--gold) !important;
background: rgba(151,133,88,0.12) !important;
color: var(--white) !important;
}
.ref-back-nav .wp-block-post-terms {
font-family: var(--f-s2);
font-size: 0.8rem;
color: rgba(255,255,255,0.5) !important;
}
.ref-back-nav .wp-block-post-terms a {
color: rgba(255,255,255,0.5) !important;
}
.ref-back-nav .wp-block-post-terms a:hover {
color: var(--gold) !important;
}
.ref-hero-top { margin-bottom: 0; }
.ref-hero__breadcrumb {
font-family: var(--f-s1);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(2, 35, 64, 0.4);
margin: 0 0 1.25rem;
}
.ref-hero__breadcrumb a {
color: rgba(2, 35, 64, 0.4);
text-decoration: none;
transition: color 0.2s;
}
.ref-hero__breadcrumb a:hover { color: var(--gold); }
.ref-hero__badge {
display: inline-block;
font-family: var(--f-s1);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold);
border: 1px solid rgba(151, 133, 88, 0.5);
padding: 4px 12px;
border-radius: 2px;
margin: 0 0 0.75rem;
}
.ref-hero .wp-block-post-title,
.ref-hero__title {
font-family: var(--f-dis) !important;
color: var(--navy) !important;
font-size: clamp(1.75rem, 2.8vw, 2.5rem) !important;
line-height: 1.2 !important;
margin: 0 !important;
letter-spacing: -0.01em !important;
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
}
.ref-hero-bottom { margin-top: 1.5rem; }
.ref-hero__sub {
font-family: var(--f-ser);
font-size: clamp(1.1rem, 1.8vw, 1.35rem);
font-style: italic;
font-weight: 300;
color: rgba(2, 35, 64, 0.65);
line-height: 1.65;
max-width: 64ch;
margin: 0 0 0;
}
.ref-meta-strip {
display: flex;
flex-wrap: wrap;
gap: 2.5rem;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(2, 35, 64, 0.12);
}
.ref-meta-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.ref-meta-label {
font-family: var(--f-s1);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(2, 35, 64, 0.4);
}
.ref-meta-value {
font-family: var(--f-s2);
font-size: 0.9rem;
color: rgba(2, 35, 64, 0.8);
}
.ref-meta-tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.1rem;
}
.skill-tag--light {
color: var(--gold) !important;
border-color: rgba(151, 133, 88, 0.4) !important;
}
.ref-hero__cta {
margin-top: 2.5rem;
}
.ref-live-btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: var(--f-s1) !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
letter-spacing: 0.10em !important;
text-transform: uppercase !important;
color: var(--white) !important;
background: var(--gold) !important;
padding: 14px 32px !important;
border-radius: 4px !important;
border: none !important;
text-decoration: none !important;
transition: background 0.2s ease, transform 0.2s ease !important;
background-image: none !important;
}
.ref-live-btn:hover {
background: var(--gold-h) !important;
color: var(--white) !important;
}
.ref-live-btn__arrow {
display: inline-block;
transition: transform 0.2s ease;
}
.ref-live-btn:hover .ref-live-btn__arrow {
transform: translateX(4px);
} .ref-hero__preview-col {
display: flex;
align-items: center;
justify-content: center;
padding-top: 0;
}
.ref-hero__preview {
width: 100% !important;
aspect-ratio: 4 / 3;
border-radius: 6px !important;
overflow: hidden;
box-shadow: 0 18px 48px rgba(2, 35, 64, 0.18), 0 4px 12px rgba(2, 35, 64, 0.10);
border: 1px solid rgba(151, 133, 88, 0.18) !important;
transform: translateY(0);
}
.ref-hero__preview img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
display: block !important;
border-radius: 6px !important;
}
@media (max-width: 781px) {
.ref-hero > .wp-block-columns > .wp-block-column,
.ref-hero > .wp-block-columns > .wp-block-column[style] {
flex-basis: 100% !important;
}
.ref-hero__preview-col {
order: -1;
margin-bottom: 1.5rem;
}
.ref-hero__preview { aspect-ratio: 16 / 10; }
} .ref-content-section .prose {
max-width: 640px;
margin-left: auto;
margin-right: auto;
} .ref-split-row {
align-items: flex-start !important;
gap: 4rem !important;
}
.ref-split-row + .ref-split-row {
padding-top: 3.5rem;
border-top: 1px solid var(--beige-mid);
}
.ref-split-img {
margin: 0 !important;
border-radius: 4px !important;
overflow: hidden;
box-shadow: 0 8px 32px rgba(2, 35, 64, 0.12);
border: 1px solid rgba(2, 35, 64, 0.08) !important;
}
.ref-split-img img {
width: 100% !important;
height: auto !important;
display: block !important;
border-radius: 4px !important;
} .ref-screenshots-sections {
margin-top: 2rem;
}
.ref-split-row--text-left,
.ref-split-row--text-right {
display: flex;
gap: clamp(2rem, 5vw, 4rem);
align-items: flex-start;
padding: 3rem 0;
border-top: 1px solid var(--beige-mid);
}
@media (min-width: 769px) {
.ref-split-text {
position: sticky;
top: clamp(2rem, 8vh, 6rem);
align-self: flex-start;
}
}
.ref-split-row--text-left:first-child,
.ref-split-row--text-right:first-child {
border-top: none;
padding-top: 0;
}
.ref-split-text,
.ref-split-image {
flex: 1;
min-width: 0;
}
.ref-split-headline {
font-family: var(--f-dis);
font-size: clamp(1.4rem, 2vw, 1.9rem);
color: var(--navy);
line-height: 1.2;
margin: 0 0 0.9rem;
}
.ref-split-desc {
font-family: var(--f-s2);
font-size: 0.95rem;
line-height: 1.75;
color: rgba(2, 35, 64, 0.7);
margin: 0;
}
.ref-split-image img {
width: 100%;
height: auto;
display: block;
border-radius: 4px;
box-shadow: 0 8px 32px rgba(2, 35, 64, 0.12);
border: 1px solid rgba(2, 35, 64, 0.06);
}
@media (max-width: 768px) {
.ref-split-row--text-left,
.ref-split-row--text-right {
flex-direction: column;
gap: 1.5rem;
}
.ref-split-row--text-left .ref-split-image,
.ref-split-row--text-right .ref-split-image {
order: -1;
}
}
.ref-intro-text {
font-size: 1.1rem !important;
line-height: 1.75 !important;
color: rgba(2, 35, 64, 0.7) !important;
margin-bottom: 2.5rem !important;
} .ref-back-nav .wp-block-post-terms {
font-family: var(--f-s2);
font-size: 0.8rem;
color: rgba(2, 35, 64, 0.5);
}
.ref-back-nav .wp-block-post-terms a {
color: rgba(2, 35, 64, 0.5);
text-decoration: none;
}
@media (max-width: 768px) {
.ref-meta-strip { gap: 1.5rem; }
.ref-hero .wp-block-post-title,
.ref-hero__title {
font-size: clamp(1.55rem, 5.8vw, 2.2rem) !important;
line-height: 1.18 !important;
max-width: 100%;
hyphens: auto;
-webkit-hyphens: auto;
overflow-wrap: break-word;
}
.ref-back-nav { flex-direction: column; align-items: flex-start; gap: 1rem; }
}
@media (max-width: 480px) {
.ref-hero .wp-block-post-title,
.ref-hero__title { font-size: clamp(1.4rem, 6.4vw, 1.85rem) !important; }
} .hero-section,
.wp-block-template-part[class*="hero"] + .wp-block-group.hero,
section.hero {
margin-top: calc(-1 * var(--hdr-h));
} .kontakt-page__head .sec-label { color: var(--gold, #978558); letter-spacing: .18em; text-transform: uppercase; font-size: .78rem; font-weight: 500; font-family: 'Montserrat', sans-serif; }
.kontakt-page__h1 { font-family: 'Forum', Georgia, serif; font-size: clamp(2.4rem, 5vw, 3.8rem); color: var(--navy, #022340); }
.kontakt-page__lead { color: rgba(2,35,64,.72); max-width: 60ch; }
.kontakt-page .kontakt-wizard { max-width: 880px !important; margin-left: auto !important; margin-right: auto !important; }
.kontakt-page .kontakt-page__head { max-width: 880px !important; margin-left: auto !important; margin-right: auto !important; } .kw-hp { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden; } .kontakt-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(2,35,64,.08); border: 1px solid rgba(2,35,64,.08); border-radius: 6px; overflow: hidden; margin-bottom: 2.25rem; }
.kontakt-tab {
display: flex; flex-direction: column; align-items: flex-start; gap: .25rem;
padding: 1.25rem 1.5rem; background: #fff; border: 0; text-align: left; cursor: pointer;
font-family: 'Outfit', sans-serif; color: var(--navy, #022340);
transition: background .25s ease, color .25s ease;
}
.kontakt-tab:hover { background: #fbfaf6; }
.kontakt-tab.is-active { background: var(--navy, #022340); color: #fff; }
.kontakt-tab__num { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; opacity: .55; font-weight: 500; }
.kontakt-tab__lbl { font-size: 1.15rem; font-weight: 500; font-family: 'Forum', Georgia, serif; letter-spacing: .01em; }
.kontakt-tab__hint { font-size: .82rem; opacity: .7; }
.kontakt-tab.is-active .kontakt-tab__num,
.kontakt-tab.is-active .kontakt-tab__hint { color: var(--gold-light, #b09f78); opacity: 1; } .kontakt-panel { display: none; }
.kontakt-panel.is-active { display: block; }
.kontakt-panel[hidden] { display: none !important; } .kw-form {
background: #fff;
border: 1px solid rgba(2,35,64,.08);
border-radius: 8px;
padding: clamp(1.5rem, 3vw, 2.5rem);
box-shadow: 0 1px 0 rgba(2,35,64,.04), 0 30px 60px -40px rgba(2,35,64,.12);
} .kw-progress { margin-bottom: 2rem; }
.kw-progress__bar {
height: 3px; border-radius: 2px;
background: linear-gradient(to right, var(--gold, #978558) var(--p, 33%), rgba(2,35,64,.08) var(--p, 33%));
transition: background .4s ease;
margin-bottom: 1rem;
}
.kw-progress__steps { display: flex; justify-content: space-between; list-style: none; padding: 0; margin: 0; counter-reset: kw; }
.kw-progress__steps li { display: flex; align-items: center; gap: .55rem; font-family: 'Outfit', sans-serif; color: rgba(2,35,64,.45); font-size: .82rem; letter-spacing: .04em; }
.kw-progress__steps li span {
display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center;
background: rgba(2,35,64,.06); color: rgba(2,35,64,.55); font-weight: 500; font-size: .78rem;
transition: background .3s, color .3s, transform .3s;
}
.kw-progress__steps li em { font-style: normal; }
.kw-progress__steps li.is-active { color: var(--navy, #022340); }
.kw-progress__steps li.is-active span { background: var(--navy, #022340); color: #fff; transform: scale(1.06); }
.kw-progress__steps li.is-complete span { background: var(--gold, #978558); color: #fff; }
.kw-progress__steps li.is-complete span::after { content: "✓"; }
.kw-progress__steps li.is-complete span > * { display: none; } .kw-step { display: none; border: 0; padding: 0; margin: 0; min-width: 0; }
.kw-step.is-active { display: block; animation: kwIn .35s ease both; }
@keyframes kwIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.kw-step__title { font-family: 'Forum', Georgia, serif; font-size: clamp(1.5rem, 2.5vw, 1.9rem); color: var(--navy, #022340); margin: 0 0 .35rem; padding: 0; font-weight: 500; }
.kw-step__sub { color: rgba(2,35,64,.65); margin: 0 0 1.5rem; font-size: .95rem; } .kw-field { margin-bottom: 1.25rem; }
.kw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.kw-row .kw-field { margin-bottom: 0; }
@media (max-width: 600px) { .kw-row { grid-template-columns: 1fr; } }
.kw-label { display: block; font-family: 'Outfit', sans-serif; font-size: .82rem; font-weight: 500; letter-spacing: .04em; color: var(--navy, #022340); margin-bottom: .45rem; }
.kw-form input[type="text"],
.kw-form input[type="email"],
.kw-form input[type="tel"],
.kw-form input[type="url"],
.kw-form select,
.kw-form textarea {
width: 100%; box-sizing: border-box;
padding: .85rem 1rem; font-family: 'Outfit', sans-serif; font-size: 1rem;
color: var(--navy, #022340); background: #fafaf7;
border: 1px solid rgba(2,35,64,.12); border-radius: 4px;
transition: border-color .2s, background .2s, box-shadow .2s;
}
.kw-form textarea { resize: vertical; min-height: 140px; font-family: inherit; }
.kw-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold, #978558) 50%), linear-gradient(135deg, var(--gold, #978558) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }
.kw-form input:focus,
.kw-form select:focus,
.kw-form textarea:focus {
outline: 0; border-color: var(--gold, #978558); background: #fff;
box-shadow: 0 0 0 3px rgba(151,133,88,.15);
}
.kw-form input.has-error,
.kw-form select.has-error,
.kw-form textarea.has-error { border-color: #c0392b; background: #fdf6f5; }
.kw-hint { font-size: .78rem; color: rgba(2,35,64,.5); margin: .4rem 0 0; font-family: 'Outfit', sans-serif; }
.kw-error { display: none; color: #c0392b; font-size: .82rem; margin: .4rem 0 0; font-family: 'Outfit', sans-serif; }
.kw-error.is-shown { display: block; } .kw-chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.kw-chip { position: relative; cursor: pointer; user-select: none; }
.kw-chip input { position: absolute; opacity: 0; pointer-events: none; }
.kw-chip span {
display: inline-block; padding: .55rem 1rem; border-radius: 999px;
border: 1px solid rgba(2,35,64,.18); background: #fff;
font-family: 'Outfit', sans-serif; font-size: .9rem; color: var(--navy, #022340);
transition: all .2s ease;
}
.kw-chip:hover span { border-color: var(--gold, #978558); }
.kw-chip input:checked + span {
background: var(--navy, #022340); color: #fff; border-color: var(--navy, #022340);
box-shadow: 0 4px 14px -6px rgba(2,35,64,.4);
}
.kw-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(151,133,88,.25); } .kw-check { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; font-size: .9rem; color: rgba(2,35,64,.78); line-height: 1.55; }
.kw-check input { margin-top: .25rem; width: 18px; height: 18px; accent-color: var(--gold, #978558); }
.kw-check a { color: var(--gold, #978558); text-decoration: underline; } .kw-actions { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(2,35,64,.08); }
.kw-actions:has(> :only-child) { justify-content: flex-end; }
.kw-btn {
display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; border: 0;
padding: .85rem 1.6rem; border-radius: 4px;
font-family: 'Montserrat', sans-serif; font-size: .78rem; font-weight: 600; letter-spacing: .10em; text-transform: uppercase;
transition: all .25s ease; min-height: 48px;
}
.kw-btn--primary { background: var(--gold, #978558); color: var(--navy, #022340); }
.kw-btn--primary:hover { background: var(--gold-light, #b09f78); transform: translateY(-1px); box-shadow: 0 8px 22px -12px rgba(151,133,88,.7); }
.kw-btn--ghost { background: transparent; color: var(--navy, #022340); border: 1px solid rgba(2,35,64,.2); }
.kw-btn--ghost:hover { border-color: var(--navy, #022340); background: rgba(2,35,64,.04); }
.kw-btn:disabled { opacity: .6; cursor: wait; } .kw-submit { position: relative; }
.kw-submit__spinner { display: none; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: kwSpin .8s linear infinite; }
.kw-submit.is-loading .kw-submit__spinner { display: inline-block; }
.kw-submit.is-loading .kw-submit__label { opacity: .6; }
@keyframes kwSpin { to { transform: rotate(360deg); } } .kw-result { text-align: center; padding: 2rem 1rem; }
.kw-result__icon { width: 64px; height: 64px; margin: 0 auto 1.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.kw-result.is-ok .kw-result__icon { background: rgba(151,133,88,.12); }
.kw-result.is-ok .kw-result__icon::after { content: "✓"; color: var(--gold, #978558); font-size: 2rem; font-family: 'Forum', serif; }
.kw-result.is-err .kw-result__icon { background: rgba(192,57,43,.1); }
.kw-result.is-err .kw-result__icon::after { content: "!"; color: #c0392b; font-size: 2rem; font-weight: 600; }
.kw-result__title { font-family: 'Forum', Georgia, serif; font-size: 1.7rem; margin: 0 0 .6rem; color: var(--navy, #022340); font-weight: 500; }
.kw-result__msg { color: rgba(2,35,64,.7); max-width: 50ch; margin: 0 auto; } .kw-cal-intro { background: #fff; border: 1px solid rgba(2,35,64,.08); border-radius: 8px 8px 0 0; padding: 1.5rem clamp(1.5rem, 3vw, 2.5rem); border-bottom: 0; }
.kw-cal-intro h3 { font-family: 'Forum', Georgia, serif; font-size: 1.5rem; margin: 0 0 .35rem; color: var(--navy, #022340); font-weight: 500; }
.kw-cal-intro p { margin: 0; color: rgba(2,35,64,.65); font-size: .95rem; }
.kontakt-panel[data-panel="cal"] .calendly-inline-widget { background: #fff; border: 1px solid rgba(2,35,64,.08); border-radius: 0 0 8px 8px; border-top: 0; } .kw-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px dashed rgba(2,35,64,.12); font-family: 'Outfit', sans-serif; font-size: .9rem; color: rgba(2,35,64,.6); }
.kw-alt__lbl { letter-spacing: .04em; }
.kw-alt a { color: var(--gold, #978558); text-decoration: none; }
.kw-alt a:hover { text-decoration: underline; }
.kw-alt__sep { opacity: .4; }
@media (max-width: 640px) {
.kontakt-tab__hint { display: none; }
.kontakt-tab { padding: 1rem 1rem; }
.kontakt-tab__lbl { font-size: 1rem; }
.kw-progress__steps li em { display: none; }
.kw-actions { flex-direction: column-reverse; }
.kw-btn { width: 100%; justify-content: center; }
} .kontakt-page .kontakt-intro {
max-width: 880px !important;
margin: -1rem auto 2.25rem !important;
margin-right: auto !important;
display: flex; align-items: center; gap: 1.1rem;
padding: .9rem 1.4rem .9rem .9rem;
background: #fff;
border: 1px solid rgba(2,35,64,.08);
border-radius: 999px;
box-shadow: 0 1px 0 rgba(2,35,64,.04), 0 20px 40px -30px rgba(2,35,64,.18);
width: fit-content;
}
.kontakt-intro__avatar {
position: relative; flex: 0 0 auto;
width: 68px; height: 68px;
border-radius: 50%; overflow: hidden;
background: var(--cream, #f6f4ef);
box-shadow: 0 0 0 2px rgba(151,133,88,.22);
}
.kontakt-intro__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kontakt-intro__status {
position: absolute; bottom: 3px; right: 3px;
width: 14px; height: 14px; border-radius: 50%;
background: #3ec46d; border: 2px solid #fff;
box-shadow: 0 0 0 2px rgba(62,196,109,.20);
}
.kontakt-intro__text { line-height: 1.35; }
.kontakt-intro__name { margin: 0; font-family: 'Forum', Georgia, serif; font-size: 1.2rem; color: var(--navy, #022340); }
.kontakt-intro__role { margin: 0; font-family: 'Outfit', sans-serif; font-size: .85rem; color: rgba(2,35,64,.6); display: flex; align-items: center; gap: .4rem; }
.kontakt-intro__role::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #3ec46d; box-shadow: 0 0 0 3px rgba(62,196,109,.18); } .lp-immo { color: var(--navy); font-family: var(--f-s1); }
.lp-immo .lp-immo__container {
max-width: 1280px;
margin: 0 auto;
padding-left: var(--pad-x);
padding-right: var(--pad-x);
} .lp-immo .lp-immo__sec-label {
display: inline-block;
font-family: var(--f-s1);
font-size: .68rem;
font-weight: 500;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--gold);
margin: 0 0 .9rem;
}
.lp-immo .lp-immo__sec-label--light { color: var(--gold-h); }
.lp-immo .lp-immo__h2 {
font-family: var(--f-dis);
font-weight: 500;
font-size: clamp(1.95rem, 2.2vw + 1rem, 2.8rem);
line-height: 1.18;
letter-spacing: -0.005em;
color: var(--navy);
margin: 0 0 1.25rem;
}
.lp-immo .lp-immo__h2--light { color: #f6f4ef; }
.lp-immo .lp-immo__section-head {
max-width: 880px;
margin: 0 0 3rem;
}
.lp-immo .lp-immo__section-lead {
font-size: 1.05rem;
line-height: 1.7;
color: rgba(2,35,64,.75);
margin: 0;
}
.lp-immo .lp-immo__section-lead--light { color: rgba(246,244,239,.78); }
.lp-immo .lp-immo__eyebrow {
display: inline-block;
font-family: var(--f-s1);
font-size: .72rem;
font-weight: 500;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--gold);
margin: 0 0 1.5rem;
padding: .45rem 1rem;
border: 1px solid rgba(151,133,88,.35);
border-radius: 999px;
background: rgba(151,133,88,.06);
text-align: center;
line-height: 1.55;
} .lp-immo .lp-immo__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .85rem 1.6rem;
border-radius: 6px;
font-family: var(--f-s1);
font-size: 1rem;
font-weight: 500;
letter-spacing: .01em;
text-decoration: none;
transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
border: 1px solid transparent;
background-image: none !important;
background-size: auto !important;
}
.lp-immo .lp-immo__btn--primary { background: var(--gold); color: #fff; }
.lp-immo .lp-immo__btn--primary:hover { background: var(--gold-h); }
.lp-immo .lp-immo__btn--ghost { background: transparent; color: var(--navy); border-color: rgba(2,35,64,.28); }
.lp-immo .lp-immo__btn--ghost:hover { border-color: var(--navy); background: rgba(2,35,64,.04); }
.lp-immo .lp-immo__btn--ghost.lp-immo__btn--light { color: #f6f4ef; border-color: rgba(246,244,239,.35); }
.lp-immo .lp-immo__btn--ghost.lp-immo__btn--light:hover { background: rgba(246,244,239,.08); border-color: rgba(246,244,239,.6); }
.lp-immo .lp-immo__btn--lg { padding: 1rem 1.9rem; font-size: 1.05rem; }
.lp-immo .lp-immo__cta-row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2.25rem;
}
.lp-immo .lp-immo__cta-row--center { justify-content: center; } .lp-immo__hero {
position: relative;
background:
radial-gradient(1100px 600px at 110% -10%, rgba(151,133,88,.10), transparent 60%),
linear-gradient(180deg, #fbfaf6 0%, #f6f4ef 100%);
padding-top: calc(var(--hdr-h, 128px) + 2.5rem);
padding-bottom: 4.5rem;
border-bottom: 1px solid rgba(2,35,64,.06);
overflow: hidden;
}
.lp-immo__deco { position: absolute; pointer-events: none; z-index: 0; }
.lp-immo__hero > .lp-immo__container { position: relative; z-index: 1; }
.lp-immo__deco--hero-dots {
width: 280px;
height: 280px;
top: 18%;
left: -40px;
color: rgba(2,35,64,.18);
}
.lp-immo__deco--hero-lines {
width: 420px;
height: 420px;
top: -60px;
right: -120px;
color: rgba(151,133,88,.32);
}
.lp-immo__deco--flow-wave {
width: 100%;
height: 60px;
top: 0;
left: 0;
color: rgba(151,133,88,.35);
}
.lp-immo__flow { position: relative; }
.lp-immo__flow > .lp-immo__container { position: relative; z-index: 1; }
.lp-immo__hero-inner {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(2rem, 4vw, 4rem);
align-items: center;
}
.lp-immo__hero-title {
font-family: var(--f-dis);
font-size: clamp(2.1rem, 2.6vw + 1.2rem, 3.4rem);
line-height: 1.1;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--navy);
margin: 0 0 1.25rem;
}
.lp-immo__hero-sub {
font-size: 1.1rem;
line-height: 1.65;
color: rgba(2,35,64,.78);
margin: 0 0 2.25rem;
max-width: 56ch;
} .lp-immo__hero-proof {
margin: 1.5rem 0 0;
font-size: .88rem;
line-height: 1.55;
color: rgba(2,35,64,.62);
letter-spacing: .01em;
} .lp-immo__hero-stack {
position: relative;
width: 170%;
max-width: none;
isolation: isolate; margin-right: -70%;
aspect-ratio: 11 / 10;
}
.lp-immo__hero-img {
margin: 0;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(2,35,64,.10);
background: #fff;
position: absolute;
transform-origin: 50% 100%;
}
.lp-immo__hero-img img { display: block; width: 100%; height: auto; } .lp-immo__hero-img--main {
top: 2%;
left: 0;
width: 64%;
z-index: 1;
transform: rotate(-10deg);
box-shadow:
0 1px 0 rgba(2,35,64,.06),
0 30px 55px -25px rgba(2,35,64,.35);
} .lp-immo__hero-img--float-tr {
top: 2%;
right: 0;
width: 58%;
z-index: 2;
transform: rotate(10deg);
box-shadow:
0 1px 0 rgba(2,35,64,.06),
0 30px 55px -25px rgba(2,35,64,.35);
} .lp-immo__hero-img--float-bl {
top: 18%;
left: 50%;
width: 70%;
z-index: 3;
transform: translateX(-50%) rotate(-1.5deg);
box-shadow:
0 1px 0 rgba(2,35,64,.08),
0 50px 90px -28px rgba(2,35,64,.50);
} .lp-immo__pains {
background: #fff;
padding: clamp(4.5rem, 8vw, 7rem) 0;
border-bottom: 1px solid rgba(2,35,64,.06);
}
.lp-immo__pain-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
}
.lp-immo__pain-card {
background: #fbfaf6;
border: 1px solid rgba(2,35,64,.08);
border-radius: 12px;
padding: 2rem 2rem 1.6rem;
display: flex;
flex-direction: column;
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.lp-immo__pain-card:hover {
border-color: rgba(151,133,88,.5);
transform: translateY(-2px);
box-shadow: 0 1px 0 rgba(2,35,64,.04), 0 22px 38px -30px rgba(2,35,64,.30);
}
.lp-immo__pain-icon {
width: 44px;
height: 44px;
border-radius: 10px;
background: rgba(151,133,88,.12);
color: var(--gold);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 1.2rem;
}
.lp-immo__pain-icon svg { width: 22px; height: 22px; }
.lp-immo__pain-title {
font-family: var(--f-dis);
font-weight: 500;
font-size: 1.45rem;
line-height: 1.2;
margin: 0 0 .6rem;
color: var(--navy);
}
.lp-immo__pain-body {
font-size: .98rem;
line-height: 1.6;
color: rgba(2,35,64,.72);
margin: 0 0 1.1rem;
}
.lp-immo__pain-solution {
font-size: .95rem;
line-height: 1.55;
margin: auto 0 0;
padding: .85rem 1rem;
background: rgba(151,133,88,.10);
border-left: 3px solid var(--gold);
border-radius: 4px;
color: rgba(2,35,64,.85);
} .lp-immo__modules {
background: #eae6dc;
color: var(--navy);
padding: clamp(4.5rem, 8vw, 7rem) 0;
border-top: 1px solid rgba(2,35,64,.06);
border-bottom: 1px solid rgba(2,35,64,.06);
}
.lp-immo__modules .lp-immo__sec-label { color: var(--gold); }
.lp-immo__modules-intro {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
margin-bottom: clamp(3rem, 6vw, 5rem);
}
.lp-immo__section-head--flush { margin-bottom: 0; }
.lp-immo__hexnet {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
}
.lp-immo__hexnet svg {
width: 100%;
max-width: 520px;
height: auto;
display: block;
filter: drop-shadow(0 30px 50px rgba(2,35,64,.15));
}
.lp-immo__hexnet-caption {
font-size: .92rem;
line-height: 1.55;
color: rgba(2,35,64,.65);
text-align: center;
max-width: 42ch;
margin: 0;
font-style: italic;
}
.lp-immo__mod-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
}
.lp-immo__mod {
position: relative;
padding: 1.8rem 1.7rem 1.9rem;
border: 1px solid rgba(2,35,64,.08);
border-radius: 12px;
background: #fff;
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
box-shadow: 0 1px 0 rgba(2,35,64,.03);
}
.lp-immo__mod:hover {
border-color: rgba(151,133,88,.5);
transform: translateY(-2px);
box-shadow: 0 1px 0 rgba(2,35,64,.04), 0 22px 38px -30px rgba(2,35,64,.30);
}
.lp-immo__mod-icon {
width: 44px;
height: 44px;
border-radius: 10px;
background: rgba(151,133,88,.14);
color: var(--gold);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 1.1rem;
}
.lp-immo__mod-icon svg { width: 22px; height: 22px; }
.lp-immo__mod-title {
font-family: var(--f-dis);
font-weight: 500;
font-size: 1.2rem;
line-height: 1.3;
margin: 0 0 .55rem;
color: var(--navy);
}
.lp-immo__mod-body {
font-size: .95rem;
line-height: 1.55;
margin: 0;
color: rgba(2,35,64,.72);
} .lp-immo__flow {
background: #f6f4ef;
padding: clamp(4.5rem, 8vw, 7rem) 0;
border-bottom: 1px solid rgba(2,35,64,.06);
}
.lp-immo__flow-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.25rem;
counter-reset: flow;
}
.lp-immo__flow-step {
position: relative;
padding: 1.8rem 1.6rem 1.7rem;
background: #fff;
border: 1px solid rgba(2,35,64,.08);
border-radius: 12px;
box-shadow: 0 1px 0 rgba(2,35,64,.03);
}
.lp-immo__flow-step::after {
content: '';
position: absolute;
top: 50%;
right: -.95rem;
width: 1.6rem;
height: 1px;
background: rgba(151,133,88,.5);
z-index: 1;
}
.lp-immo__flow-step:last-child::after { display: none; }
.lp-immo__flow-num {
display: inline-block;
font-family: var(--f-dis);
font-size: 1.05rem;
color: var(--gold);
background: rgba(151,133,88,.12);
border-radius: 999px;
padding: .25rem .7rem;
margin-bottom: .9rem;
letter-spacing: .06em;
}
.lp-immo__flow-step-title {
font-family: var(--f-dis);
font-weight: 500;
font-size: 1.15rem;
line-height: 1.25;
color: var(--navy);
margin: 0 0 .55rem;
}
.lp-immo__flow-step-body {
font-size: .92rem;
line-height: 1.55;
color: rgba(2,35,64,.72);
margin: 0;
} .lp-immo__facts {
background: #fbfaf6;
padding: clamp(4rem, 7vw, 6rem) 0;
border-bottom: 1px solid rgba(2,35,64,.06);
}
.lp-immo__fact-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
margin-bottom: 2.25rem;
} .lp-immo__showcase {
background: #fff;
padding: clamp(5rem, 9vw, 8rem) 0;
border-bottom: 1px solid rgba(2,35,64,.06);
}
.lp-immo__show-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
margin-bottom: clamp(4rem, 8vw, 7rem);
}
.lp-immo__show-row:last-child { margin-bottom: 0; }
.lp-immo__show-row--reverse .lp-immo__show-text { order: 2; }
.lp-immo__show-row--reverse .lp-immo__show-img  { order: 1; }
.lp-immo__show-tag {
font-family: var(--f-s1);
font-size: .7rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--gold);
background: rgba(151,133,88,.10);
border-radius: 999px;
padding: .35rem .85rem;
display: inline-block;
margin: 0 0 1.1rem;
font-weight: 500;
}
.lp-immo__show-h3 {
font-family: var(--f-dis);
font-weight: 500;
font-size: clamp(1.5rem, 1.4vw + 1rem, 2rem);
line-height: 1.2;
color: var(--navy);
margin: 0 0 1rem;
}
.lp-immo__show-body {
font-size: 1.02rem;
line-height: 1.7;
color: rgba(2,35,64,.78);
margin: 0 0 1.25rem;
max-width: 56ch;
}
.lp-immo__show-bullets {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: .55rem;
}
.lp-immo__show-bullets li {
position: relative;
padding-left: 1.6rem;
font-size: .95rem;
line-height: 1.55;
color: rgba(2,35,64,.78);
}
.lp-immo__show-bullets li::before {
content: '';
position: absolute;
left: 0;
top: .55rem;
width: .55rem;
height: .55rem;
border: 2px solid var(--gold);
border-top: none;
border-right: none;
transform: rotate(-45deg);
transform-origin: center;
}
.lp-immo__show-img {
margin: 0;
border-radius: 12px;
overflow: hidden;
background: #fbfaf6;
border: 1px solid rgba(2,35,64,.08);
box-shadow: 0 1px 0 rgba(2,35,64,.04), 0 30px 70px -30px rgba(2,35,64,.30);
}
.lp-immo__show-img img { display: block; width: 100%; height: auto; } .lp-immo__show-row--sticky {
align-items: flex-start;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
.lp-immo__show-row--sticky .lp-immo__show-text {
position: sticky;
top: calc(var(--hdr-h, 128px) + 1.5rem);
align-self: flex-start;
}
.lp-immo__show-img--fullpage {
max-width: 620px;
margin-left: auto;
margin-right: 0;
box-shadow: 0 1px 0 rgba(2,35,64,.04), 0 40px 90px -30px rgba(2,35,64,.35);
}
.lp-immo__show-img--fullpage img { width: 100%; height: auto; max-height: none; }
.lp-immo__show-hint {
font-size: .85rem;
font-style: italic;
color: rgba(2,35,64,.55);
margin: 1.25rem 0 0;
line-height: 1.5;
} .lp-immo__versus {
background: #f6f4ef;
padding: clamp(4.5rem, 8vw, 7rem) 0;
border-bottom: 1px solid rgba(2,35,64,.06);
}
.lp-immo__versus-grid {
display: flex;
flex-direction: column;
gap: 1.25rem;
max-width: 1080px;
margin: 0 auto;
}
.lp-immo__versus-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
position: relative;
}
.lp-immo__versus-row::before {
content: 'vs.';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-family: var(--f-dis);
font-size: .85rem;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(2,35,64,.45);
background: #f6f4ef;
padding: .35rem .65rem;
border-radius: 999px;
z-index: 1;
pointer-events: none;
}
.lp-immo__versus-cell {
position: relative;
padding: 1.7rem 1.7rem 1.6rem;
border-radius: 12px;
background: #fff;
border: 1px solid rgba(2,35,64,.08);
}
.lp-immo__versus-cell--neg {
background: #fbfaf6;
border-color: rgba(2,35,64,.10);
}
.lp-immo__versus-cell--neg .lp-immo__versus-label,
.lp-immo__versus-cell--neg .lp-immo__versus-text { color: rgba(2,35,64,.55); }
.lp-immo__versus-cell--neg .lp-immo__versus-icon {
background: rgba(2,35,64,.08);
color: rgba(2,35,64,.55);
}
.lp-immo__versus-cell--pos {
border-color: rgba(151,133,88,.35);
background: #fff;
box-shadow: 0 1px 0 rgba(2,35,64,.04), 0 22px 38px -30px rgba(2,35,64,.20);
}
.lp-immo__versus-cell--pos .lp-immo__versus-icon {
background: rgba(151,133,88,.14);
color: var(--gold);
}
.lp-immo__versus-icon {
width: 36px;
height: 36px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: .9rem;
}
.lp-immo__versus-icon svg { width: 20px; height: 20px; }
.lp-immo__versus-label {
font-family: var(--f-s1);
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
font-weight: 600;
color: var(--navy);
margin: 0 0 .65rem;
}
.lp-immo__versus-text {
font-size: .98rem;
line-height: 1.6;
color: rgba(2,35,64,.8);
margin: 0;
}
.lp-immo__fact {
background: #fff;
border: 1px solid rgba(2,35,64,.08);
border-radius: 10px;
padding: 1.4rem 1.4rem 1.5rem;
}
.lp-immo__fact-num {
font-family: var(--f-dis);
font-size: 2.1rem;
line-height: 1;
color: var(--gold);
margin: 0 0 .6rem;
}
.lp-immo__fact-body {
font-size: .95rem;
line-height: 1.55;
margin: 0;
color: rgba(2,35,64,.78);
}
.lp-immo__fn-ref { font-size: .68em; vertical-align: super; }
.lp-immo__fn-ref a { color: var(--gold); text-decoration: none; }
.lp-immo__footnotes {
list-style: none;
margin: 0 0 1rem;
padding: 1.4rem 1.5rem;
background: #fff;
border: 1px solid rgba(2,35,64,.08);
border-radius: 10px;
font-size: .85rem;
line-height: 1.6;
color: rgba(2,35,64,.7);
}
.lp-immo__footnotes li { margin-bottom: .35rem; }
.lp-immo__footnotes li:last-child { margin-bottom: 0; }
.lp-immo__fn-num { display: inline-block; min-width: 1.5em; color: var(--gold); font-weight: 600; }
.lp-immo__footnotes a { color: var(--navy); }
.lp-immo__claim-note {
font-size: .82rem;
font-style: italic;
color: rgba(2,35,64,.55);
margin: 0;
} .lp-immo__ref {
background: #fff;
padding: clamp(4rem, 7vw, 6rem) 0;
border-bottom: 1px solid rgba(2,35,64,.06);
}
.lp-immo__ref-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: clamp(1.5rem, 4vw, 3.5rem);
align-items: center;
}
.lp-immo__ref-body {
font-size: 1.05rem;
line-height: 1.7;
color: rgba(2,35,64,.78);
margin: 0 0 1.75rem;
max-width: 56ch;
}
.lp-immo__quote {
margin: 0 0 1.75rem;
padding: 1.4rem 1.5rem;
border-left: 3px solid var(--gold);
background: #fbfaf6;
border-radius: 4px;
}
.lp-immo__quote-body {
font-family: var(--f-dis);
font-size: 1.15rem;
line-height: 1.45;
color: var(--navy);
margin: 0 0 .9rem;
font-style: italic;
}
.lp-immo__quote-meta {
display: flex;
flex-direction: column;
gap: .15rem;
font-size: .85rem;
}
.lp-immo__quote-name {
font-weight: 600;
color: var(--navy);
letter-spacing: .01em;
}
.lp-immo__quote-role {
color: rgba(2,35,64,.6);
}
.lp-immo__quote--with-portrait {
display: grid;
grid-template-columns: 120px 1fr;
gap: 1.4rem;
align-items: center;
padding: 1.5rem 1.6rem;
}
.lp-immo__quote-portrait {
margin: 0;
width: 120px;
height: 150px;
border-radius: 8px;
overflow: hidden;
border: 1px solid rgba(2,35,64,.08);
background: #fbfaf6;
box-shadow: 0 1px 0 rgba(2,35,64,.04), 0 18px 32px -22px rgba(2,35,64,.30);
}
.lp-immo__quote-portrait img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.lp-immo__quote-content { min-width: 0; }
.lp-immo__quote--with-portrait .lp-immo__quote-body { margin-bottom: .6rem; } .lp-immo__bridge {
position: relative;
overflow: hidden;
background: #022340;
}
.lp-immo__bridge img {
display: block;
width: 100%;
height: clamp(180px, 28vw, 320px);
object-fit: cover;
object-position: center;
opacity: .82;
}
.lp-immo__bridge-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
padding: 0 clamp(1.5rem, 6vw, 5rem);
background: linear-gradient(90deg, rgba(2,35,64,.55) 0%, rgba(2,35,64,.15) 55%, transparent 90%);
}
.lp-immo__bridge-text {
font-family: var(--f-dis);
font-size: clamp(1.6rem, 3vw + .5rem, 2.6rem);
line-height: 1.15;
color: #f6f4ef;
margin: 0;
max-width: 20ch;
text-shadow: 0 2px 20px rgba(2,35,64,.35);
} .lp-immo__facts { position: relative; padding-top: 0; }
.lp-immo__facts-banner {
margin: 0 0 clamp(3rem, 6vw, 5rem);
width: 100%;
height: clamp(160px, 24vw, 280px);
overflow: hidden;
position: relative;
}
.lp-immo__facts-banner::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(251,250,246,0) 0%, rgba(251,250,246,.85) 100%);
pointer-events: none;
}
.lp-immo__facts-banner img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 60%;
}
.lp-immo__ref-img {
border-radius: 12px;
overflow: hidden;
background: #fbfaf6;
border: 1px solid rgba(2,35,64,.08);
box-shadow: 0 1px 0 rgba(2,35,64,.04), 0 28px 60px -30px rgba(2,35,64,.30);
}
.lp-immo__ref-img img { display: block; width: 100%; height: auto; } .lp-immo__cta {
position: relative;
background: var(--navy);
color: #f6f4ef;
padding: clamp(5rem, 9vw, 8rem) 0;
text-align: center;
isolation: isolate;
overflow: hidden;
border-top: 1px solid rgba(151,133,88,.18);
box-shadow: 0 -30px 60px -30px rgba(2,35,64,.5);
}
.lp-immo__cta::before {
content: '';
position: absolute;
inset: 0;
background: url(//aiellomedia.de/wp-content/uploads/2026/05/ChatGPT-Image-16.-Mai-2026-12_58_28.png) center center / cover no-repeat;
filter: saturate(0.9) brightness(0.55);
z-index: -2;
opacity: 0.85;
}
.lp-immo__cta::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(800px 500px at 20% 20%, rgba(151,133,88,.18), transparent 60%),
linear-gradient(135deg, rgba(2,35,64,.86) 0%, rgba(2,35,64,.74) 50%, rgba(2,35,64,.92) 100%);
z-index: -1;
}
.lp-immo__cta-inner { max-width: 780px; margin: 0 auto; position: relative; }
.lp-immo__cta-body {
font-size: 1.1rem;
line-height: 1.65;
color: rgba(246,244,239,.85);
margin: 0 0 2.25rem;
} @media (max-width: 1024px) {
.lp-immo__hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
.lp-immo__hero-stack {
width: 100%;
max-width: 720px;
margin: 0 auto;
aspect-ratio: 6 / 5;
}
.lp-immo__hero-img--main { width: 62%; transform: rotate(-10deg); }
.lp-immo__hero-img--float-tr { width: 56%; transform: rotate(10deg); }
.lp-immo__hero-img--float-bl { width: 68%; top: 16%; }
.lp-immo__pain-grid { grid-template-columns: 1fr; }
.lp-immo__modules-intro { grid-template-columns: 1fr; }
.lp-immo__mod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-immo__flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-immo__flow-step:nth-child(2)::after { display: none; }
.lp-immo__fact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-immo__ref-inner { grid-template-columns: 1fr; }
.lp-immo__show-row { grid-template-columns: 1fr; gap: 2.25rem; }
.lp-immo__show-row--reverse .lp-immo__show-text,
.lp-immo__show-row--reverse .lp-immo__show-img { order: initial; }
.lp-immo__show-row--sticky { grid-template-columns: 1fr; }
.lp-immo__show-row--sticky .lp-immo__show-text {
position: static;
top: auto;
}
.lp-immo__show-img--fullpage { max-width: 480px; margin: 0 auto; }
.lp-immo__versus-row { grid-template-columns: 1fr; gap: .75rem; }
.lp-immo__versus-row::before {
top: auto;
bottom: 50%;
left: 50%;
transform: translate(-50%, 50%);
}
} @media (max-width: 640px) {
.lp-immo__hero { padding-top: calc(var(--hdr-h, 128px) + 1.25rem); padding-bottom: 3rem; }
.lp-immo__hero-title { font-size: clamp(1.85rem, 6vw + 1rem, 2.4rem); }
.lp-immo__hero-stack { max-width: 100%; aspect-ratio: 5 / 4; }
.lp-immo__hero-img--main { width: 64%; transform: rotate(-8deg); }
.lp-immo__hero-img--float-tr { width: 60%; transform: rotate(8deg); }
.lp-immo__hero-img--float-bl { width: 74%; top: 18%; }
.lp-immo__mod-grid { grid-template-columns: 1fr; }
.lp-immo__flow-grid { grid-template-columns: 1fr; }
.lp-immo__flow-step::after { display: none; }
.lp-immo__fact-grid { grid-template-columns: 1fr; }
.lp-immo__cta-row { flex-direction: column; align-items: stretch; }
.lp-immo__cta-row .lp-immo__btn { width: 100%; }
.lp-immo__cta-row--center .lp-immo__btn { width: auto; }
.lp-immo__btn { padding: .9rem 1.4rem; }
.lp-immo__pain-card { padding: 1.6rem 1.5rem 1.4rem; }
.lp-immo__quote--with-portrait { grid-template-columns: 90px 1fr; gap: 1rem; }
.lp-immo__quote-portrait { width: 90px; height: 112px; }
} .lp-immo .lp-immo__btn { background-image: none !important; background-size: 0 !important; }
.lp-immo .lp-immo__footnotes a {
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-size: 100% 1px;
background-position: left bottom;
} .branche-section { color: var(--navy); }
.branche-section--dark {
background: var(--navy) !important;
color: var(--cream);
}
.branche-section--dark .branche__h2 { color: var(--cream); }
.branche-section--dark .branche__lead { color: rgba(246,244,239,0.78); }
.branche-section--dark .branche__kpi-list { border-top-color: rgba(246,244,239,0.18); }
.branche-section--dark .branche__kpi-num { color: var(--cream); }
.branche-section--dark .branche__kpi-label { color: rgba(246,244,239,0.7); }
.branche-section--dark .branche__btn--primary { background: var(--gold); color: var(--navy); }
.branche-section--dark .branche__btn--primary:hover { background: var(--gold-h); color: var(--navy); }
.branche-section--dark .branche__btn--ghost { color: var(--cream); border-color: rgba(246,244,239,0.45); }
.branche-section--dark .branche__btn--ghost:hover { background: var(--cream); color: var(--navy); border-color: var(--cream); }
.branche-section--dark .branche__media {
box-shadow: 0 30px 60px -25px rgba(0,0,0,0.55), 0 8px 20px -10px rgba(0,0,0,0.35);
background: var(--navy);
}
.branche__inner {
max-width: var(--max-w);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.branche__copy { min-width: 0; }
.branche__h2 {
font-family: var(--f-dis);
font-size: clamp(1.9rem, 3.6vw, 2.75rem);
font-weight: 600;
line-height: 1.15;
color: var(--navy);
margin: 0.5rem 0 1.25rem;
}
.branche__lead {
font-family: var(--f-s2);
font-size: 1.05rem;
line-height: 1.7;
color: var(--navy-dim);
margin: 0 0 2rem;
max-width: 36rem;
}
.branche__kpi-list {
list-style: none;
margin: 0 0 2.25rem;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
border-top: 1px solid rgba(2,35,64,0.15);
padding-top: 1.5rem;
}
.branche__kpi { display: flex; flex-direction: column; gap: 0.35rem; }
.branche__kpi-num {
font-family: var(--f-dis);
font-size: clamp(1.6rem, 2.4vw, 2rem);
font-weight: 600;
color: var(--navy);
line-height: 1;
}
.branche__kpi-label {
font-family: var(--f-s2);
font-size: 0.82rem;
line-height: 1.45;
color: var(--navy-dim);
}
.branche__cta-row {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
}
.branche__btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--f-s1);
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
padding: 0.95rem 1.6rem;
border-radius: 2px;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
border: 1px solid transparent;
}
.branche__btn--primary {
background: var(--navy);
color: var(--cream);
}
.branche__btn--primary:hover { background: #033a66; color: var(--cream); }
.branche__btn--ghost {
background: transparent;
color: var(--navy);
border-color: var(--navy);
}
.branche__btn--ghost:hover { background: var(--navy); color: var(--cream); }
.branche__media {
margin: 0;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 30px 60px -30px rgba(2,35,64,0.35), 0 8px 20px -10px rgba(2,35,64,0.18);
background: var(--cream);
}
.branche__media img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 900px) {
.branche__inner { grid-template-columns: 1fr; }
.branche__media { order: -1; }
.branche__kpi-list { grid-template-columns: 1fr; gap: 1rem; }
} @media (max-width: 782px) {
:root { --hdr-h: 72px; } .aiello-header-fixed {
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
}
.aiello-header-fixed .wp-block-site-logo img,
.aiello-logo-img img {
height: 64px !important;
width: 64px !important;
} .hero-section { min-height: auto; }
.hero-section .wp-block-group__inner-container,
.hero-inner-content {
padding-top: calc(var(--hdr-h) + 1.25rem) !important;
padding-bottom: 3rem !important;
}
.hero-eyebrow {
font-size: 0.6rem;
letter-spacing: 0.18em;
margin-bottom: 1rem;
}
.hero-headline {
font-size: clamp(1.95rem, 8.5vw, 2.6rem) !important;
line-height: 1.12;
}
.hero-line { margin-top: 1.4rem !important; }
.hero-sub {
font-size: 0.95rem;
line-height: 1.6;
margin-top: 1.1rem;
max-width: none;
}
.hero-cta-group {
margin-top: 1.85rem !important;
gap: 0.75rem !important;
width: 100%;
}
.wp-block-button.hero-cta-primary,
.wp-block-button.hero-cta-secondary { width: 100%; }
.wp-block-button.hero-cta-primary .wp-block-button__link,
.wp-block-button.hero-cta-secondary .wp-block-button__link {
width: 100%;
text-align: center;
padding: 13px 18px !important;
font-size: 0.74rem !important;
} .hero-section::before,
.hero-deco-circles { width: 100%; opacity: 0.35; }
}
@media (max-width: 480px) {
.hero-headline { font-size: clamp(1.85rem, 9vw, 2.4rem) !important; }
}