/* ===== Homepage layout & components (index.html) — tokens/fonts/logo live in base.css ===== */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
font-family: var(--body);
background: var(--bg);
color: var(--ink);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{
max-width: var(--max);
margin: 0 auto;
padding: 0 32px;
}
h1,h2,h3{
font-family: var(--display);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.08;
}
/* ---------- Bridge divider — signature motif ---------- */
.bridge-line{
height: 3px;
width: 100%;
background: linear-gradient(90deg, var(--teal) 0%, var(--teal) 42%, var(--rust) 58%, var(--rust) 100%);
}
.bridge-line.on-dark{ opacity:0.85; }
/* ---------- Header ---------- */
header{
position: sticky;
top: 0;
z-index: 100;
background: var(--bg);
}
.nav-inner{
width: 100%;
padding: 20px 32px;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom: 1px solid var(--line);
}
/* Mobile menu open: header becomes a fixed full-screen panel so the
top bar (logo/claim/close) never scrolls away, and the link list
scrolls internally in the remaining space.
Deliberately no explicit height here - "inset:0" alone stretches a
fixed element to the live viewport, whereas a hardcoded 100vh snaps
to a stale value when a mobile browser's chrome bar hides/shows
during scroll, which is what caused the header to jump/clip. */
body.menu-open{
position: fixed;
width: 100%;
overflow: hidden;
overscroll-behavior: contain;
}
body.menu-open header{
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
z-index: 200;
}
body.menu-open .mobile-nav{
flex: 1 1 auto;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.logo-block{
display:flex;
flex-direction:column;
line-height:1.1;
}
.nav-right{
display: flex;
align-items: center;
gap: 22px;
}
.nav-right .nav-cta{
padding: 10px 20px;
font-size: 0.86rem;
}
.nav-inner > nav > ul{
list-style:none;
display:flex;
align-items:center;
gap: 34px;
}
nav a{
text-decoration:none;
font-size: 0.92rem;
font-weight: 500;
color: var(--ink);
position: relative;
padding-bottom: 4px;
}
nav a::after{
content:'';
position:absolute;
left:0; bottom:0;
width:0; height:2px;
background: var(--rust);
transition: width .2s ease;
}
@media (hover: hover){
nav a:hover::after{ width:100%; }
}
.nav-toggle{
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 34px;
height: 34px;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.nav-toggle span{
display:block;
height: 2px;
background: var(--ink);
border-radius: 2px;
transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
.mobile-nav{
display: none;
flex-direction: column;
gap: 8px;
padding: 16px 32px 32px;
background: var(--bg);
}
.mobile-nav ul{
list-style:none;
display:flex;
flex-direction: column;
}
.mobile-nav a{
display:block;
padding: 22px 0;
text-decoration:none;
color: var(--ink);
font-weight: 500;
border-bottom: 1px solid var(--line);
}
.mobile-nav.is-open{ display:flex; }
@media (max-width: 1060px){
nav{ display:none; }
.nav-toggle{ display:flex; }
}
@media (max-width: 360px){
.nav-right .nav-cta{
padding: 8px 12px;
font-size: 0.72rem;
white-space: nowrap;
}
}
/* Referenzen-Schalter (siehe Kommentar am ): hides the nav entry
in both menus, the section itself, and the divider left over between
it and the Kontakt section, on every breakpoint. */
body[data-referenzen="off"] .nav-referenzen,
body[data-referenzen="off"] #referenzen,
body[data-referenzen="off"] #referenzen-divider{
display: none !important;
}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;
align-items:center;
gap:8px;
font-family: var(--body);
font-weight: 600;
font-size: 0.94rem;
padding: 14px 26px;
border-radius: var(--radius);
text-decoration:none;
border: 1.5px solid transparent;
cursor:pointer;
transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn-primary{
background: var(--rust);
color: #FBF7EF;
}
.btn-ghost-dark{
border-color: var(--ink);
color: var(--ink);
background: transparent;
}
.btn-ghost-light{
border-color: var(--line-on-dark);
color: var(--ink-on-dark);
background: transparent;
}
/* Real mouse hover only - on touch devices, tapping a link/button leaves
its :hover state "stuck" until an unrelated tap elsewhere clears it
(there's no mouseout on touch), which made the Kontakt button's color
flip on tap and stay flipped. */
@media (hover: hover){
.btn:hover{ transform: translateY(-1px); }
.btn-primary:hover{ background: var(--rust-deep); }
.btn-ghost-dark:hover{ background: var(--ink); color: var(--bg); }
.btn-ghost-light:hover{ background: var(--ink-on-dark); color: var(--surface-dark); }
}
/* ---------- Hero ---------- */
.hero{
padding: 96px 0 88px;
position: relative;
overflow: hidden;
}
.hero-grid{
display:grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 56px;
align-items:center;
}
.eyebrow{
display:inline-flex;
align-items:center;
gap:10px;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 22px;
}
.eyebrow .dot{
width:7px; height:7px; border-radius:50%;
background: var(--teal);
}
.hero h1{
font-size: clamp(2.6rem, 5.2vw, 4.1rem);
color: var(--ink);
}
.hero h1 .accent{ color: var(--rust); }
.subline{
font-family: var(--display);
font-size: clamp(1.15rem, 2vw, 1.4rem);
font-weight: 500;
color: var(--teal-deep);
margin-top: 14px;
letter-spacing: 0.01em;
}
.hero-lead{
margin-top: 22px;
font-size: 1.1rem;
color: var(--ink-soft);
max-width: 46ch;
}
.hero-cta{
margin-top: 34px;
display:flex;
gap: 16px;
flex-wrap: wrap;
}
/* Bridge diagram in hero */
.bridge-diagram{
position: relative;
background: var(--surface);
border: 1px solid var(--line);
padding: 40px 30px;
}
.bridge-diagram .bd-row{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap: 12px;
}
.bridge-diagram .bd-label{
font-family: var(--display);
font-size: 0.98rem;
font-weight: 600;
}
.bridge-diagram .bd-label.left{ color: var(--teal-deep); }
.bridge-diagram .bd-label.right{ color: var(--rust-deep); text-align:right; }
.bridge-diagram .bd-sub{
font-size: 0.8rem;
color: var(--ink-soft);
margin-top: 4px;
}
.bridge-diagram .bd-sub.right{ text-align:right; }
.bridge-svg{ width:100%; height:auto; margin: 22px 0 18px; }
.bridge-diagram .bd-caption{
text-align:center;
font-size: 0.8rem;
color: var(--ink-soft);
font-style: italic;
}
@media (max-width: 900px){
.hero-grid{ grid-template-columns: 1fr; }
}
/* ---------- Section basics ---------- */
section{ padding: 92px 0; }
.section-alt{ background: var(--bg-alt); }
.section-dark{ background: var(--surface-dark); color: var(--ink-on-dark); }
.section-dark .ink-soft{ color: var(--ink-on-dark-soft); }
.kicker{
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--rust);
margin-bottom: 14px;
}
.section-dark .kicker{ color: var(--teal); }
h2{
font-size: clamp(1.8rem, 3.2vw, 2.5rem);
}
.section-head{
max-width: 640px;
margin-bottom: 52px;
}
.section-head p{
margin-top: 16px;
font-size: 1.05rem;
color: var(--ink-soft);
}
/* ---------- Problem section ---------- */
.problem-grid{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items:center;
}
.problem-copy p{
color: var(--ink-on-dark-soft);
font-size: 1.05rem;
margin-top: 18px;
max-width: 50ch;
}
.problem-visual{
position: relative;
aspect-ratio: 1 / 1;
border: 1px solid var(--line-on-dark);
display:flex;
align-items:center;
justify-content:center;
background:
radial-gradient(circle at 30% 30%, rgba(47,143,118,0.28), transparent 55%),
radial-gradient(circle at 72% 68%, rgba(196,98,45,0.30), transparent 55%);
}
.problem-visual svg{ width: 72%; height:72%; }
@media (max-width: 900px){
.problem-grid{ grid-template-columns: 1fr; }
.problem-visual{ order:-1; max-width: 380px; margin: 0 auto; }
}
/* ---------- Kernhaltung ---------- */
.stance-grid{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
.stance-card{
background: var(--surface);
padding: 36px 30px;
}
.stance-card .num{
font-family: var(--display);
font-size: 0.85rem;
font-weight: 600;
color: var(--teal-deep);
margin-bottom: 18px;
letter-spacing: 0.04em;
}
.stance-card h3{
font-size: 1.2rem;
margin-bottom: 12px;
}
.stance-card p{
color: var(--ink-soft);
font-size: 0.98rem;
}
@media (max-width: 760px){
.stance-grid{ grid-template-columns: 1fr; }
}
.roles-grid{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 64px;
}
.roles-grid .service-card::before{ background: var(--teal); }
.roles-grid .service-card:nth-child(2)::before{ background: var(--rust); }
.roles-grid .service-card:nth-child(3)::before{ background: var(--teal); }
@media (max-width: 900px){
.roles-grid{ grid-template-columns: 1fr; }
}
.subhead{
font-family: var(--display);
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 24px;
}
/* ---------- Leistungen ---------- */
.services-grid{
display:grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.service-card{
border: 1px solid var(--line);
background: var(--surface);
padding: 34px 32px;
position:relative;
}
.service-card::before{
content:'';
position:absolute;
top:0; left:0;
width: 100%; height: 3px;
background: var(--teal);
}
.service-card:nth-child(2)::before,
.service-card:nth-child(4)::before{ background: var(--rust); }
.service-card h3{
font-size: 1.18rem;
margin-bottom: 12px;
margin-top: 6px;
}
.service-card p{
color: var(--ink-soft);
font-size: 0.98rem;
}
@media (max-width: 760px){
.services-grid{ grid-template-columns: 1fr; }
}
/* ---------- Kennzahlen ---------- */
.metrics-grid{
display:grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
max-width: 720px;
}
.metric{
border-top: 3px solid var(--teal);
padding-top: 22px;
}
.metric:nth-child(2){ border-top-color: var(--rust); }
.metric .value{
font-family: var(--display);
font-size: clamp(2.1rem, 4vw, 3rem);
font-weight: 700;
color: var(--ink);
line-height:1;
}
.metric .label{
font-weight: 600;
margin-top: 12px;
font-size: 1.02rem;
}
.metric .desc{
margin-top: 8px;
color: var(--ink-soft);
font-size: 0.92rem;
}
@media (max-width: 820px){
.metrics-grid{ grid-template-columns: 1fr; gap: 32px; }
}
/* ---------- Track Record ---------- */
.track-layout{
display:grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 56px;
}
.track-intro p{
color: var(--ink-on-dark-soft);
font-size: 1.05rem;
margin-top: 16px;
}
.track-list{
list-style:none;
border-top: 1px solid var(--line-on-dark);
}
.track-list li{
display:grid;
grid-template-columns: 28px 1fr;
gap: 16px;
padding: 22px 0;
border-bottom: 1px solid var(--line-on-dark);
font-size: 1rem;
}
.track-list li .mark{
color: var(--rust);
font-family: var(--display);
font-weight: 700;
}
.track-list li:nth-child(even) .mark{ color: var(--teal); }
@media (max-width: 900px){
.track-layout{ grid-template-columns: 1fr; }
}
/* ---------- Track Record (unified) ---------- */
.track-statement{
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap: 0.3em 0.55em;
font-family: var(--display);
max-width: 880px;
}
.tn{ font-weight:700; line-height:1; letter-spacing:-0.01em; }
.tn-1{ font-size: clamp(2.6rem, 6vw, 4.8rem); color: var(--teal); }
.tn-2{ font-size: clamp(2rem, 4.2vw, 3.2rem); color: var(--rust); }
.tn-3{ font-size: clamp(1.5rem, 2.8vw, 2.1rem); color: var(--ink-on-dark); }
.tn-4{ font-size: clamp(1.2rem, 2.2vw, 1.6rem); color: var(--ink-on-dark-soft); }
.tw{
font-family: var(--body);
font-weight: 500;
font-size: clamp(0.95rem, 1.6vw, 1.1rem);
color: var(--ink-on-dark-soft);
}
.track-context{
margin-top: 26px;
font-size: 1rem;
color: var(--ink-on-dark-soft);
max-width: 60ch;
}
.track-more{
display:grid;
grid-template-columns: repeat(2, 1fr);
gap: 26px 48px;
margin-top: 52px;
padding-top: 32px;
border-top: 1px solid var(--line-on-dark);
}
.track-more-item h4{
font-family: var(--display);
font-size: 1rem;
font-weight: 600;
margin-bottom: 6px;
color: var(--ink-on-dark);
}
.track-more-item p{
font-size: 0.92rem;
color: var(--ink-on-dark-soft);
}
@media (max-width: 700px){
.track-more{ grid-template-columns: 1fr; }
}
/* ---------- Track Record: Konsolidierungs-Netzwerk-Animation ---------- */
.track-anim{
margin: 8px 0 28px;
}
@media (max-width: 700px){
.track-anim{ margin-left: -20px; margin-right: -20px; }
}
.track-anim-svg{
display: block;
width: 100%;
height: auto;
max-width: 640px;
margin: 0 auto;
}
.ta-dot, .ta-node{
transform-box: fill-box;
transform-origin: center;
}
.ta-label{
font-family: var(--display);
font-weight: 600;
font-size: 15px;
fill: var(--ink-on-dark);
text-anchor: middle;
opacity: 0;
transform: translateY(6px);
}
.ta-sublabel{
font-weight: 500;
font-size: 13px;
fill: var(--ink-on-dark-soft);
}
.ta-node{
opacity: 0;
transform: scale(0);
}
.ta-edge{
opacity: 0;
stroke-dasharray: 340;
stroke-dashoffset: 340;
}
@keyframes taDotOut{ to{ opacity: 0; transform: scale(0.2); } }
@keyframes taLineOut{ to{ opacity: 0; } }
@keyframes taNodeIn{
0%{ opacity: 0; transform: scale(0); }
70%{ opacity: 1; transform: scale(1.07); }
100%{ opacity: 1; transform: scale(1); }
}
@keyframes taEdgeDraw{ to{ stroke-dashoffset: 0; opacity: 1; } }
@keyframes taLabelIn{ to{ opacity: 1; transform: translateY(0); } }
.track-anim.play .ta-dot{
animation: taDotOut 0.7s ease-in forwards;
animation-delay: calc(var(--d, 0) * 0.07s);
}
.track-anim.play .ta-line-before{
animation: taLineOut 0.5s ease-in forwards;
animation-delay: calc(var(--d, 0) * 0.07s);
}
.track-anim.play .ta-node{
animation: taNodeIn 0.8s cubic-bezier(.34,1.56,.64,1) forwards;
animation-delay: calc(1.4s + var(--d, 0) * 0.1s);
}
.track-anim.play .ta-edge{
animation: taEdgeDraw 0.9s ease-out forwards;
animation-delay: calc(1.8s + var(--d, 0) * 0.12s);
}
.track-anim.play .ta-label{
animation: taLabelIn 0.7s ease-out forwards;
animation-delay: calc(2.1s + var(--d, 0) * 0.1s);
}
.ta-legend{
display: flex;
gap: 24px;
flex-wrap: wrap;
margin: 4px 0 32px;
font-size: 0.85rem;
color: var(--ink-on-dark-soft);
}
.ta-legend-item{ display: flex; align-items: center; gap: 8px; }
.ta-legend-swatch{ width: 18px; height: 3px; border-radius: 1px; display: inline-block; }
@media (prefers-reduced-motion: reduce){
.track-anim.play .ta-dot,
.track-anim.play .ta-line-before,
.track-anim.play .ta-node,
.track-anim.play .ta-edge,
.track-anim.play .ta-label{ animation: none; }
.ta-before-group{ display: none; }
.ta-node{ opacity: 1; transform: scale(1); }
.ta-edge{ opacity: 1; stroke-dashoffset: 0; }
.ta-label{ opacity: 1; transform: none; }
}
/* ---------- Über mich ---------- */
.about-grid{
display:grid;
grid-template-columns: 340px 1fr;
gap: 56px;
align-items:start;
}
.about-photo{
position: relative;
}
.about-photo img{
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
filter: grayscale(18%);
border: 1px solid var(--line);
}
.about-photo .tag{
position:absolute;
bottom: -16px;
left: -16px;
background: var(--rust);
color: #FBF7EF;
font-family: var(--display);
font-weight: 600;
font-size: 0.85rem;
padding: 10px 16px;
}
.about-copy p{
color: var(--ink-soft);
font-size: 1.05rem;
margin-top: 16px;
max-width: 60ch;
}
.about-facts{
margin-top: 30px;
display:grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px 30px;
}
.about-facts div{
border-top: 1px solid var(--line);
padding-top: 12px;
font-size: 0.92rem;
}
.about-facts strong{
display:block;
font-family: var(--display);
font-size: 0.98rem;
margin-bottom: 4px;
}
@media (max-width: 820px){
.about-grid{ grid-template-columns: 1fr; }
.about-photo{ max-width: 280px; }
}
/* ---------- Kontakt ---------- */
.contact-grid{
display:grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 60px;
}
.contact-info p{
color: var(--ink-on-dark-soft);
margin-top: 16px;
font-size: 1.02rem;
max-width: 40ch;
}
.contact-details{
margin-top: 32px;
list-style:none;
}
.contact-details li{
padding: 16px 0;
border-top: 1px solid var(--line-on-dark);
display:flex;
justify-content:space-between;
gap: 12px;
font-size: 0.98rem;
}
.contact-details li:last-child{ border-bottom: 1px solid var(--line-on-dark); }
.contact-details .k{ color: var(--ink-on-dark-soft); }
.contact-details a{ text-decoration:none; font-weight:600; }
@media (hover: hover){
.contact-details a:hover{ color: var(--teal); }
}
form{
background: var(--surface);
border: 1px solid var(--line);
padding: 36px;
}
.field{
margin-bottom: 20px;
}
.field label{
display:block;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 8px;
color: var(--ink);
}
.field input,
.field textarea{
width:100%;
border: 1px solid var(--line);
background: var(--bg);
padding: 13px 14px;
font-family: var(--body);
font-size: 0.96rem;
color: var(--ink);
border-radius: var(--radius);
}
.field input:focus,
.field textarea:focus{
outline: 2px solid var(--teal);
outline-offset: 1px;
}
.field textarea{ resize: vertical; min-height: 120px; }
.consent{
display:flex;
align-items:flex-start;
gap: 10px;
font-size: 0.82rem;
color: var(--ink-soft);
margin-bottom: 22px;
}
.consent input{ margin-top: 3px; }
.form-note{
font-size: 0.82rem;
color: var(--ink-soft);
margin-top: 14px;
}
.form-status{
display:none;
padding: 14px 16px;
margin-bottom: 20px;
font-size: 0.92rem;
border-radius: var(--radius);
}
.form-status.success{ background: rgba(47,143,118,0.14); color: var(--teal-deep); border: 1px solid rgba(47,143,118,0.3); }
.form-status.error{ background: rgba(196,98,45,0.12); color: var(--rust-deep); border: 1px solid rgba(196,98,45,0.3); }
@media (max-width: 900px){
.contact-grid{ grid-template-columns: 1fr; }
}
/* ---------- Referenzen / Das sagen andere ---------- */
.quote-grid{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.quote-card{
background: var(--surface);
border: 1px solid var(--line);
padding: 32px 28px;
display:flex;
flex-direction:column;
}
.quote-mark{
font-family: var(--display);
font-size: 2.6rem;
font-weight: 700;
line-height: 1;
color: var(--teal);
margin-bottom: 6px;
}
.quote-card:nth-child(2) .quote-mark{ color: var(--rust); }
.quote-card p{
font-size: 1.02rem;
color: var(--ink);
flex-grow: 1;
}
.quote-attr{
margin-top: 20px;
font-size: 0.82rem;
color: var(--ink-soft);
font-weight: 600;
border-top: 1px solid var(--line);
padding-top: 14px;
}
@media (max-width: 900px){
.quote-grid{ grid-template-columns: 1fr; }
}
/* ---------- Footer ---------- */
footer{
background: var(--surface-dark);
color: var(--ink-on-dark-soft);
padding: 34px 0;
font-size: 0.85rem;
}
.footer-inner{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap: wrap;
gap: 14px;
}
.footer-links{ display:flex; gap: 20px; list-style:none; }
.footer-links a{ text-decoration:none; }
@media (hover: hover){
.footer-links a:hover{ color: var(--ink-on-dark); }
}
/* reduced motion */
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
.btn{ transition:none; }
}