@font-face {
font-family: 'Poppins';
src: url(//luh-estrich.de/wp-content/themes/Luh-Theme/fonts/Poppins/Poppins-Regular.woff2) format('woff2'),
url(//luh-estrich.de/wp-content/themes/Luh-Theme/fonts/Poppins/Poppins-Regular.ttf) format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url(//luh-estrich.de/wp-content/themes/Luh-Theme/fonts/Poppins/Poppins-Medium.woff2) format('woff2'),
url(//luh-estrich.de/wp-content/themes/Luh-Theme/fonts/Poppins/Poppins-Medium.ttf) format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url(//luh-estrich.de/wp-content/themes/Luh-Theme/fonts/Poppins/Poppins-SemiBold.woff2) format('woff2'),
url(//luh-estrich.de/wp-content/themes/Luh-Theme/fonts/Poppins/Poppins-SemiBold.ttf) format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url(//luh-estrich.de/wp-content/themes/Luh-Theme/fonts/Poppins/Poppins-Bold.woff2) format('woff2'),
url(//luh-estrich.de/wp-content/themes/Luh-Theme/fonts/Poppins/Poppins-Bold.ttf) format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url(//luh-estrich.de/wp-content/themes/Luh-Theme/fonts/Poppins/Poppins-ExtraBold.woff2) format('woff2'),
url(//luh-estrich.de/wp-content/themes/Luh-Theme/fonts/Poppins/Poppins-ExtraBold.ttf) format('truetype');
font-weight: 800;
font-style: normal;
font-display: swap;
} :root {
--accent:        #3daa35;
--accent-dark:   #2d8228;
--accent-light:  #5fc957;
--accent-heading: #01505D;
--icon-color:     #01505D;
--accent-glow:   rgba(61,170,53,0.18);
--bg-base:       #f6f6f4;
--bg-card:       #ffffff;
--bg-card2:      #eeeee9;
--bg-glass:      rgba(255,255,255,0.88);
--text-primary:  #1a1c1f;
--text-secondary:#555550;
--text-muted:    #9a9590;
--border:        rgba(0,0,0,0.08);
--border-accent: rgba(61,170,53,0.30);
--radius-sm:     8px;
--radius-md:     14px;
--radius-lg:     24px;
--radius-xl:     36px;
--shadow-card:   0 4px 24px rgba(0,0,0,0.08);
--shadow-accent: 0 0 32px rgba(61,170,53,0.15);
--transition:    all 0.3s cubic-bezier(0.4,0,0.2,1);
} *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
font-family: 'Poppins', sans-serif;
background-color: var(--bg-base);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; } h1, h2, h3, h4 {
line-height: 1.25;
font-weight: 700;
color: var(--accent-heading);
text-transform: uppercase;
letter-spacing: 0.04em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 600; }
p  { color: var(--text-secondary); line-height: 1.75; }
.accent { color: var(--accent); }
.section-label {
display: inline-block;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-heading);
background: var(--accent-glow);
padding: 8px 18px;
border-radius: 0;
margin-bottom: 24px;
} .container {
width: 100%;
max-width: 1160px;
margin: 0 auto;
padding: 0 24px;
}
.container--narrow {
max-width: 780px;
}
section { padding: 100px 0; }
.text-center { text-align: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; } .btn {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 0.95rem;
border-radius: 0;
padding: 14px 32px;
border: none;
cursor: pointer;
transition: var(--transition);
white-space: nowrap;
}
.btn-primary {
background: var(--accent);
color: #fff !important;
box-shadow: 0 4px 20px rgba(61,170,53,0.35);
}
.btn-primary:hover {
background: var(--accent-light);
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(61,170,53,0.45);
}
.btn-outline {
background: transparent;
color: #01505D;
border: 2px solid #01505D;
}
.btn-outline:hover {
background: #01505D;
color: #fff;
transform: translateY(-2px);
}
.btn-ghost {
background: rgba(255,255,255,0.06);
color: var(--text-primary);
border: 1.5px solid var(--border);
border-radius: 0;
}
.btn-ghost:hover {
background: rgba(61,170,53,0.12);
border-color: var(--border-accent);
color: var(--accent);
} .card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 32px;
transition: var(--transition);
}
.card:hover {
border-color: var(--border-accent);
background: var(--bg-card2);
transform: translateY(-4px);
box-shadow: var(--shadow-card);
} .fade-in {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
.fade-in-delay-1 { transition-delay: 0.1s; }
.fade-in-delay-2 { transition-delay: 0.2s; }
.fade-in-delay-3 { transition-delay: 0.3s; }
.fade-in-delay-4 { transition-delay: 0.4s; } #topbar {
background: var(--accent);
color: #fff;
font-size: 0.8rem;
font-weight: 500;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1001;
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,0.15);
transition: var(--transition);
}
#topbar.hidden {
transform: translateY(-100%);
}
.topbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.topbar-left,
.topbar-right {
display: flex;
align-items: center;
gap: 24px;
}
.topbar-item {
display: inline-flex;
align-items: center;
gap: 7px;
color: rgba(255,255,255,0.92);
transition: var(--transition);
white-space: nowrap;
}
a.topbar-item:hover {
color: #fff;
text-shadow: 0 0 8px rgba(255,255,255,0.4);
}
a.topbar-item {
cursor: pointer;
}
.topbar-item svg {
color: var(--icon-color);
flex-shrink: 0;
}
a.topbar-item:hover svg {
opacity: 1;
}
.topbar-item--static {
color: rgba(255,255,255,0.72);
}
.topbar-item span {
font-size: 0.78rem;
letter-spacing: 0.01em;
} #navbar {
position: fixed;
top: 38px; left: 0; right: 0;
z-index: 1000;
padding: 20px 0;
transition: var(--transition);
}
#navbar .container, #topbar .container {
max-width: 100%;
padding: 0 40px;
}
#navbar.scrolled {
background: var(--bg-glass);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
padding: 14px 0;
box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
#navbar.menu-open {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-logo {
display: flex;
align-items: center;
gap: 12px;
}
.nav-logo-icon {
width: 40px; height: 40px;
background: var(--accent);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: 800;
color: #fff;
flex-shrink: 0;
}
.nav-logo-text {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.nav-logo-img {
height: 50px;
width: auto;
display: block;
}
.nav-logo-text strong {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
}
.nav-logo-text span {
font-size: 0.72rem;
color: var(--text-muted);
font-weight: 400;
}
.nav-links {
display: flex;
align-items: center;
gap: 24px;
}
.nav-links a {
font-size: 0.8rem;
font-weight: 600;
color: var(--text-primary);
text-transform: uppercase;
letter-spacing: 0.03em;
transition: var(--transition);
position: relative;
white-space: nowrap;
}
.nav-links a:hover { color: var(--accent); }
.nav-cta { margin-left: 8px; }
.nav-hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 4px;
background: transparent;
border: none;
outline: none;
}
.nav-hamburger span {
display: block;
width: 24px; height: 2px;
background: var(--text-primary);
border-radius: 2px;
transition: var(--transition);
} .nav-has-dropdown { position: relative; }
.nav-has-dropdown::after {
content: '';
position: absolute;
left: -10px; right: -10px;
bottom: -8px;
height: 8px;
}
.nav-dropdown-toggle {
background: none; border: none; cursor: pointer;
display: flex; align-items: center; gap: 5px;
font-family: inherit;
font-size: 0.8rem; font-weight: 600;
color: var(--text-primary);
text-transform: uppercase; letter-spacing: 0.03em;
transition: color 0.2s;
white-space: nowrap; padding: 0;
}
.nav-dropdown-toggle:hover { color: var(--accent); }
.nav-dropdown-toggle svg { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.nav-has-dropdown.open .nav-dropdown-toggle svg { transform: rotate(180deg); }
.nav-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0;
list-style: none;
background: #fff;
border: 1px solid var(--border);
border-top: 3px solid var(--accent);
border-radius: 0;
box-shadow: 0 20px 60px rgba(1,80,93,0.13);
min-width: 275px;
padding: 8px 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-10px);
transition: opacity 0.25s ease, transform 0.28s cubic-bezier(0.22,1,0.36,1), visibility 0.25s;
z-index: 200;
}
.nav-dropdown.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.nav-dropdown li { list-style: none; }
.nav-dropdown li:not(.nav-dropdown-divider) {
opacity: 0;
transform: translateX(-8px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.nav-dropdown.is-open li:not(.nav-dropdown-divider) {
opacity: 1;
transform: translateX(0);
}
.nav-dropdown a {
display: flex;
align-items: center;
gap: 14px;
padding: 11px 20px;
position: relative;
text-decoration: none;
transition: background 0.15s;
}
.nav-dropdown a::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--accent);
transform: scaleY(0);
transition: transform 0.18s ease;
transform-origin: center;
}
.nav-dropdown a:hover { background: #f4fafb; }
.nav-dropdown a:hover::before { transform: scaleY(1); }
.nav-dropdown .nav-dd-icon {
width: 34px; height: 34px;
background: #edf5f7;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
color: var(--accent);
transition: background 0.15s;
}
.nav-dropdown a:hover .nav-dd-icon { background: #d3edf1; }
.nav-dropdown .nav-dd-text { display: flex; flex-direction: column; gap: 2px; }
.nav-dropdown .nav-dd-title {
font-size: 0.85rem; font-weight: 600;
color: var(--text-primary);
text-transform: none !important; letter-spacing: 0;
line-height: 1.3;
}
.nav-dropdown .nav-dd-sub {
font-size: 0.71rem;
color: #8a9ea2;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
.nav-dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; } #hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
padding: 158px 0 80px;
}
.hero-bg {
position: absolute;
inset: 0;
background-image: url(//luh-estrich.de/wp-content/themes/Luh-Theme/img/hero.webp);
background-size: cover;
background-position: center 30%;
z-index: 0;
}
.hero-bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
105deg,
rgba(246,246,244,0.96) 0%,
rgba(246,246,244,0.82) 50%,
rgba(246,246,244,0.40) 100%
);
}
.hero-content {
position: relative;
z-index: 1;
max-width: 680px;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
font-weight: 600;
color: var(--accent-heading);
background: rgba(61, 170, 53, 0.12);
border: 1px solid rgba(61, 170, 53, 0.2);
padding: 10px 20px;
border-radius: 50px;
margin-bottom: 32px;
}
.hero-badge::before {
content: '';
width: 8px;
height: 8px;
background: var(--accent);
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 8px var(--accent);
}
@keyframes pulse {
0%,100% { opacity: 1; transform: scale(1); }
50%      { opacity: 0.6; transform: scale(1.3); }
} .footer-mini-badge {
display: flex;
align-items: center;
gap: 12px;
background: var(--bg-card);
border: 1px solid var(--border);
padding: 8px 12px;
border-radius: var(--radius-sm);
text-decoration: none;
transition: var(--transition);
}
.footer-mini-badge:hover {
border-color: var(--border-accent);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.footer-mini-badge img {
height: 36px;
width: auto;
flex-shrink: 0;
display: block;
}
.footer-mini-badge-text {
display: flex;
flex-direction: column;
line-height: 1.25;
}
.footer-mini-badge-text strong {
font-size: 0.8rem;
color: var(--text-primary);
margin-bottom: 2px;
}
.footer-mini-badge-text span {
font-size: 0.7rem;
color: var(--text-secondary);
}
.hero-title {
font-size: clamp(1.8rem, 4vw, 3rem);
margin-bottom: 20px;
letter-spacing: -0.02em;
word-break: break-word;
hyphens: auto;
}
.hero-title .line2 {
color: var(--accent);
display: block;
position: relative;
white-space: nowrap;
}
@media (max-width: 600px) {
.hero-title .line2 { white-space: normal; }
.hero-bg {
background-image: url(//luh-estrich.de/wp-content/themes/Luh-Theme/img/hero-mobile.webp);
background-position: center center;
background-size: cover;
}
}
@media (max-width: 768px) {
.warum-bg {
background-position: center center;
background-size: cover;
}
}
.hero-subtitle {
font-size: clamp(1rem, 2vw, 1.15rem);
color: var(--text-secondary);
margin-bottom: 40px;
max-width: 540px;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 64px;
}
.hero-stats {
display: flex;
gap: 48px;
padding-top: 32px;
border-top: 1px solid var(--border);
}
.hero-stat-value {
font-size: 2rem;
font-weight: 800;
color: var(--text-primary);
line-height: 1;
}
.hero-stat-value span { color: var(--accent); }
.hero-stat-label {
font-size: 0.8rem;
color: var(--text-muted);
margin-top: 4px;
}
.hero-scroll {
position: absolute;
bottom: 36px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: var(--text-muted);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
animation: scrollBounce 2.5s infinite;
}
.hero-scroll svg { opacity: 0.5; }
@keyframes scrollBounce {
0%,100% { transform: translateX(-50%) translateY(0); }
50%      { transform: translateX(-50%) translateY(6px); }
} #leistungen { background: var(--bg-base); }
#leistungen .container {
max-width: 100%;
padding: 0 40px;
}
.section-header {
text-align: center;
margin-bottom: 64px;
}
.section-header p {
max-width: 560px;
margin: 16px auto 0;
font-size: 1.05rem;
}
.leistungen-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
padding-bottom: 40px;
}
@media (max-width: 768px) {
.leistungen-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 500px) {
.leistungen-grid {
grid-template-columns: 1fr;
}
}
.leistung-card {
position: relative;
overflow: hidden;
height: 320px;
display: block;
text-decoration: none;
cursor: pointer;
}
.leistung-card-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.leistung-card:hover .leistung-card-img { transform: scale(1.07); }
.leistung-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(1, 22, 26, 0.90) 0%,
rgba(1, 22, 26, 0.55) 45%,
rgba(1, 22, 26, 0.10) 100%
);
transition: background 0.35s ease;
}
.leistung-card:hover .leistung-card-overlay {
background: linear-gradient(to top,
rgba(1, 22, 26, 0.95) 0%,
rgba(1, 22, 26, 0.65) 50%,
rgba(1, 22, 26, 0.20) 100%
);
}
.leistung-card-body {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 28px 24px;
transform: translateY(0);
transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.leistung-card:hover .leistung-card-body { transform: translateY(-4px); }
.leistung-card .leistung-label {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent);
margin-bottom: 8px;
display: block;
text-shadow: 0 1px 4px rgba(0,0,0,0.65);
}
.leistung-card h3 {
margin: 0 0 8px;
font-size: 1.05rem;
line-height: 1.3;
color: #fff;
}
.leistung-card p {
font-size: 0.83rem;
margin: 0 0 16px;
color: rgba(255, 255, 255, 0.78);
line-height: 1.55;
}
.leistung-mehr {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.8rem;
font-weight: 600;
color: var(--accent);
text-decoration: none;
transition: gap 0.2s ease;
}
.leistung-card:hover .leistung-mehr { gap: 9px; } .leistung-icon {
width: 52px;
height: 52px;
background: var(--accent-glow);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
flex-shrink: 0;
}
.leistung-icon svg {
width: 28px;
height: 28px;
stroke: var(--accent);
}
.leistung-card:has(.leistung-icon) {
height: auto;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 28px 24px;
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
}
.leistung-card:has(.leistung-icon):hover {
border-color: var(--border-accent);
transform: translateY(-3px);
box-shadow: 0 8px 32px rgba(0,0,0,0.10);
}
.leistung-card:has(.leistung-icon) h3 {
color: var(--accent-heading);
margin-bottom: 12px;
}
.leistung-card:has(.leistung-icon) p {
color: var(--text-secondary);
margin: 0;
} .subpage-hero {
padding: 140px 0 80px;
background: var(--bg-card);
text-align: left;
}
.subpage-hero-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.subpage-hero-text .section-label { margin-bottom: 16px; }
.subpage-hero-text h1 { text-align: left; margin-bottom: 20px; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1; }
.subpage-hero-text p { text-align: left; margin: 0 0 32px 0; max-width: 560px; font-size: 1.05rem;}
.subpage-hero-text .hero-actions { justify-content: flex-start; }
.subpage-hero-image {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
}
.subpage-hero-image img { width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 4/3; }
@media (max-width: 900px) {
.subpage-hero-inner { grid-template-columns: 1fr; gap: 40px; }
.subpage-hero { padding: 120px 0 60px; }
} .projekt-teaser {
background: var(--bg-card);
border-bottom: 1px solid var(--border);
border-top: 1px solid var(--border);
}
.projekt-teaser-inner {
display: flex;
align-items: stretch;
max-width: 1200px;
margin: 0 auto;
}
.projekt-teaser-img {
width: 200px;
min-width: 200px;
height: 120px;
object-fit: cover;
flex-shrink: 0;
display: block;
}
.projekt-teaser-body {
padding: 20px 28px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
}
.projekt-teaser-label {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent);
}
.projekt-teaser-title {
font-size: 0.98rem;
font-weight: 700;
color: var(--text-primary);
margin: 0;
line-height: 1.3;
}
.projekt-teaser-desc {
font-size: 0.80rem;
color: var(--text-secondary);
margin: 0;
line-height: 1.5;
}
.projekt-teaser-action {
padding: 20px 28px;
flex-shrink: 0;
display: flex;
align-items: center;
border-left: 1px solid var(--border);
}
.projekt-teaser-link {
font-size: 0.82rem;
font-weight: 600;
color: var(--accent);
text-decoration: none;
white-space: nowrap;
transition: gap 0.2s ease;
}
.projekt-teaser-link:hover { opacity: 0.8; }
@media (max-width: 768px) {
.projekt-teaser-img { width: 110px; min-width: 110px; height: 90px; }
.projekt-teaser-body { padding: 14px 16px; }
.projekt-teaser-action { display: none; }
} .ls-gf { padding: 72px 0; background: var(--bg-card); border-top: 1px solid var(--border); }
.ls-gf-inner { display: grid; grid-template-columns: 200px 1fr; gap: 52px; align-items: center; max-width: 820px; margin: 0 auto; }
.ls-gf-photo { position: relative; flex-shrink: 0; }
.ls-gf-photo img { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; object-position: top center; display: block; border: 4px solid #fff; box-shadow: 0 8px 32px rgba(1,80,93,0.12); }
.ls-gf-photo-badge { position: absolute; bottom: 8px; right: -4px; background: var(--accent); border-radius: 100px; padding: 4px 10px; font-size: 0.68rem; font-weight: 700; color: #fff; white-space: nowrap; border: 2px solid #fff; }
.ls-gf-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 10px; }
.ls-gf-quote { font-size: 1.15rem; font-style: italic; color: var(--accent-heading); line-height: 1.65; margin: 0 0 20px; font-weight: 500; }
.ls-gf-name  { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.ls-gf-title { font-size: 0.82rem; color: var(--text-secondary); margin-top: 2px; }
@media (max-width: 640px) {
.ls-gf-inner { grid-template-columns: 1fr; text-align: center; gap: 28px; }
.ls-gf-photo { margin: 0 auto; width: fit-content; }
} #aufbau {
background: var(--bg-card);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.aufbau-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
} #aufbau {
background: var(--bg-card);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.aufbau-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.aufbau-image-wrap {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
border: 1px solid var(--border);
}
.aufbau-image-wrap img {
width: 100%;
display: block;
}
.aufbau-image-badge {
position: absolute;
bottom: 20px;
left: 20px;
background: var(--bg-glass);
backdrop-filter: blur(10px);
border: 1px solid var(--border-accent);
border-radius: var(--radius-sm);
padding: 12px 18px;
font-size: 0.82rem;
font-weight: 600;
color: var(--accent-light);
}
.aufbau-image-badge {
position: absolute;
bottom: 20px; left: 20px;
background: var(--bg-glass);
backdrop-filter: blur(10px);
border: 1px solid var(--border-accent);
border-radius: var(--radius-sm);
padding: 12px 18px;
font-size: 0.82rem;
font-weight: 600;
color: var(--accent-light);
}
.aufbau-layers {
margin-top: 40px;
display: flex;
flex-direction: column;
gap: 16px;
}
.layer {
display: flex;
align-items: center;
gap: 18px;
padding: 16px 20px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg-base);
transition: var(--transition);
}
.layer:hover {
border-color: var(--border-accent);
background: rgba(61,170,53,0.04);
}
.layer-num {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--accent);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 0.78rem;
font-weight: 700;
flex-shrink: 0;
}
.layer-info h4 { font-size: 0.9rem; font-weight: 600; margin-bottom: 2px; }
.layer-info p  { font-size: 0.8rem; color: var(--text-muted); margin: 0; } #vergleich { background: var(--bg-base); }
.comparison-table-wrap {
overflow-x: auto;
border-radius: var(--radius-md);
border: 1px solid var(--border);
box-shadow: var(--shadow-card);
}
table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
thead th {
background: var(--bg-card2);
padding: 18px 24px;
text-align: left;
font-weight: 600;
font-size: 0.85rem;
color: var(--text-primary);
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
thead th:first-child { width: 200px; color: var(--text-muted); }
thead th.highlight {
background: var(--accent-glow);
color: var(--accent);
border-top: 2px solid var(--accent);
}
tbody tr { border-bottom: 1px solid var(--border); transition: var(--transition); }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--bg-card); }
tbody td { padding: 16px 24px; color: var(--text-secondary); }
tbody td:first-child { font-weight: 600; color: var(--text-primary); font-size: 0.85rem; }
tbody td.highlight { background: rgba(61,170,53,0.05); color: var(--text-primary); }
.check { color: var(--accent); font-size: 1.1rem; }
.cross { color: var(--text-muted); font-size: 1.1rem; }
.partial { color: #f5a623; font-size: 1.1rem; } #warum {
position: relative;
overflow: hidden;
background: var(--bg-base);
}
.warum-bg {
position: absolute;
inset: 0;
background-image: url(//luh-estrich.de/wp-content/themes/Luh-Theme/img/Estrich-verlegen-lassen-Experten.webp);
background-size: cover;
background-position: center;
opacity: 0.08;
}
.warum-content {
display: flex;
flex-direction: column;
gap: 48px;
position: relative;
z-index: 1;
}
.warum-top {
display: flex;
gap: 80px;
align-items: center;
}
.warum-left { flex: 1; }
.warum-right { flex: 1; position: relative; }
.warum-usps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.usp-item {
display: flex;
flex-direction: column;
gap: 16px;
padding: 24px;
border-radius: var(--radius-md);
border: 1px solid var(--border);
background: var(--bg-card);
transition: var(--transition);
}
.usp-item:hover {
border-color: var(--border-accent);
box-shadow: 0 0 0 1px var(--border-accent) inset, var(--shadow-card);
}
.usp-icon {
width: 48px; height: 48px;
border-radius: var(--radius-sm);
background: var(--accent-glow);
border: 1px solid var(--border-accent);
display: flex; align-items: center; justify-content: center;
font-size: 1.4rem;
flex-shrink: 0;
}
.usp-item h4 { font-size: 1rem; margin-bottom: 6px; font-weight: 600; }
.usp-item p  { font-size: 0.85rem; color: var(--text-secondary); margin: 0; }
.warum-image-wrapper {
position: relative;
width: 100%;
}
.warum-image {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--radius-sm);
box-shadow: var(--shadow-card);
display: block;
}
.warum-big-stat {
position: absolute;
bottom: -24px;
left: -24px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 0;
padding: 24px 32px;
text-align: center;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}
.warum-big-stat .num {
font-size: 3.5rem;
font-weight: 800;
background: linear-gradient(135deg, var(--accent), var(--accent-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
}
.warum-big-stat .label {
font-size: 0.85rem;
color: var(--text-secondary);
margin-top: 8px;
font-weight: 500;
}
.warum-certs {
display: flex;
gap: 12px;
}
.cert-badge {
flex: 1;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 0;
padding: 16px 12px;
text-align: center;
transition: var(--transition);
}
.cert-badge:hover { border-color: var(--border-accent); }
.cert-badge .icon { font-size: 1.6rem; margin-bottom: 12px; display: flex; justify-content: center; height: 32px; align-items: center; }
.cert-badge .icon img { height: 100%; width: auto; object-fit: contain; }
.cert-badge span { font-size: 0.72rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } #prozess {
background: var(--bg-card);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.prozess-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
position: relative;
margin-top: 64px;
}
.prozess-steps::before {
content: '';
position: absolute;
top: 28px;
left: 12.5%;
right: 12.5%;
height: 2px;
background: linear-gradient(90deg, var(--accent), var(--accent-light), var(--accent));
z-index: 0;
}
.prozess-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 24px;
position: relative;
z-index: 1;
}
.step-num {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--bg-base);
border: 2px solid var(--accent);
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem;
font-weight: 800;
color: var(--accent);
margin-bottom: 24px;
position: relative;
transition: var(--transition);
box-shadow: 0 0 0 6px var(--bg-card);
}
.prozess-step:hover .step-num {
background: var(--accent);
color: #fff;
box-shadow: 0 0 0 6px var(--bg-card), var(--shadow-accent);
}
.prozess-step h3 { font-size: 1rem; margin-bottom: 10px; }
.prozess-step p  { font-size: 0.85rem; color: var(--text-secondary); margin: 0; } #referenzen { background: var(--bg-base); } .projekt-slider {
position: relative;
margin-bottom: 64px;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border);
box-shadow: var(--shadow-card);
background: #111;
}
.slider-track {
display: flex;
transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.slide {
min-width: 100%;
position: relative;
height: 520px;
overflow: hidden;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.slide:hover img { transform: scale(1.03); }
.slide-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 48px 48px 36px;
background: linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 70%, transparent 100%);
color: #fff;
}
.slide-tag {
display: inline-block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #fff;
background: #01505D;
border: 1px solid rgba(1, 80, 93, 0.4);
padding: 5px 14px;
border-radius: 50px;
margin-bottom: 12px;
}
.slide-title {
font-size: clamp(1.1rem, 2.5vw, 1.6rem);
font-weight: 700;
color: #fff;
text-transform: none;
letter-spacing: 0;
margin-bottom: 8px;
text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.slide-desc {
font-size: 0.88rem;
color: rgba(255,255,255,0.82);
line-height: 1.6;
margin: 0;
max-width: 600px;
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px; height: 48px;
border-radius: 50%;
background: rgba(255,255,255,0.92);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-primary);
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
transition: var(--transition);
z-index: 10;
}
.slider-btn:hover {
background: var(--accent);
color: #fff;
transform: translateY(-50%) scale(1.08);
}
.slider-prev { left: 20px; }
.slider-next { right: 20px; }
.slider-dots {
position: absolute;
bottom: 20px;
right: 48px;
display: flex;
gap: 8px;
z-index: 10;
}
.slider-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.4);
border: none;
cursor: pointer;
transition: var(--transition);
padding: 0;
}
.slider-dot.active {
background: var(--accent);
width: 24px;
border-radius: 4px;
}
.slider-counter {
position: absolute;
top: 20px;
right: 20px;
font-size: 0.78rem;
font-weight: 600;
color: rgba(255,255,255,0.8);
background: rgba(0,0,0,0.4);
backdrop-filter: blur(6px);
padding: 6px 14px;
border-radius: 50px;
z-index: 10;
}
.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 32px;
transition: var(--transition);
display: flex;
flex-direction: column;
height: 100%;
}
.testimonial-card:hover { border-color: var(--border-accent); transform: translateY(-4px); box-shadow: var(--shadow-card); }
.testimonial-stars { color: var(--accent); margin-bottom: 16px; font-size: 1rem; letter-spacing: 2px; }
.testimonial-text { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 24px; line-height: 1.7; font-style: italic; flex-grow: 1; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.author-avatar {
width: 42px; height: 42px; border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-dark));
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 1rem; color: #fff;
}
.author-name { font-weight: 600; font-size: 0.9rem; }
.author-location { font-size: 0.78rem; color: var(--text-muted); } #faq {
background: var(--bg-card);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
background: var(--bg-base);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
transition: var(--transition);
}
.faq-item.open { border-color: var(--border-accent); }
.faq-question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 28px;
background: none;
border: none;
cursor: pointer;
text-align: left;
gap: 16px;
}
.faq-question-text { font-family: 'Poppins', sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--text-primary); }
.faq-chevron {
width: 28px; height: 28px; flex-shrink: 0;
background: var(--accent-glow);
border: 1px solid var(--border-accent);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
transition: transform 0.3s ease;
color: var(--accent);
font-size: 0.7rem;
}
.faq-item.open .faq-chevron { transform: rotate(180deg); background: var(--accent); color: #fff; border-color: var(--accent); }
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, padding 0.3s ease;
}
.faq-item.open .faq-answer { max-height: 400px; padding-bottom: 8px; }
.faq-answer p { padding: 0 28px 20px; font-size: 0.88rem; color: var(--text-secondary); margin: 0; line-height: 1.75; } #kontakt { background: var(--bg-base); }
.kontakt-inner {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 64px;
align-items: start;
}
.kontakt-info h2 { margin-bottom: 16px; }
.kontakt-info p  { margin-bottom: 40px; }
.contact-methods { display: flex; flex-direction: column; gap: 16px; }
.contact-method {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 20px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
transition: var(--transition);
color: inherit;
}
.contact-method:hover { border-color: var(--border-accent); transform: translateX(4px); }
.contact-method-icon {
width: 44px; height: 44px;
background: var(--accent-glow);
border: 1px solid var(--border-accent);
border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
}
.contact-method-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; }
.contact-method-value { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); }
.promise-box {
margin-top: 32px;
padding: 20px 24px;
background: var(--accent-glow);
border: 1px solid var(--border-accent);
border-radius: var(--radius-md);
display: flex;
gap: 14px;
align-items: flex-start;
}
.promise-box .icon { font-size: 1.4rem; flex-shrink: 0; }
.promise-box strong { display: block; font-size: 0.9rem; color: var(--accent-light); margin-bottom: 4px; }
.promise-box p { font-size: 0.82rem; margin: 0; color: var(--text-secondary); }
.kontakt-form-wrap {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 48px 40px;
}
.kontakt-form-wrap h3 { margin-bottom: 8px; }
.kontakt-form-wrap > p { font-size: 0.88rem; margin-bottom: 32px; }
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group.full { grid-column: 1 / -1; }
label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }
input, textarea, select {
font-family: 'Poppins', sans-serif;
font-size: 0.9rem;
background: var(--bg-base);
border: 1.5px solid var(--border);
border-radius: 0;
padding: 16px;
color: var(--text-primary);
transition: var(--transition);
width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(61,170,53,0.12);
}
textarea { min-height: 130px; resize: vertical; }
select option { background: var(--bg-card2); }
.form-submit {
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 14px;
}
.form-submit .btn { width: 100%; justify-content: center; font-size: 1rem; padding: 16px 32px; }
.form-hint { font-size: 0.78rem; color: var(--text-muted); text-align: center; }
.form-success {
display: none;
text-align: center;
padding: 32px;
}
.form-success .success-icon {
width: 64px; height: 64px;
background: var(--accent-glow);
border: 2px solid var(--accent);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 1.8rem;
margin: 0 auto 16px;
}
.form-success h3 { color: var(--accent); margin-bottom: 8px; }
.form-success p { font-size: 0.88rem; } footer {
background: var(--bg-card);
border-top: 1px solid var(--border);
padding: 64px 0 32px;
}
footer > .container {
max-width: 1400px;
}
.footer-inner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
margin-bottom: 48px;
align-items: start;
}
.footer-brand p { font-size: 0.85rem; color: var(--text-secondary); margin: 16px 0 24px; max-width: 280px; }
.footer-brand .nav-logo { margin-bottom: 4px; }
.footer-col h4 { font-size: 0.85rem; font-weight: 700; margin-bottom: 20px; color: var(--text-primary); letter-spacing: 0.04em; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { font-size: 0.85rem; color: var(--text-secondary); transition: var(--transition); }
.footer-col ul li a:hover { color: var(--accent); }
.footer-col address { font-style: normal; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.9; }
.footer-bottom {
border-top: 1px solid var(--border);
padding-top: 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.footer-bottom p { font-size: 0.8rem; color: var(--text-muted); }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { font-size: 0.8rem; color: var(--text-muted); transition: var(--transition); }
.footer-legal a:hover { color: var(--accent); } .sticky-phone {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 999;
display: flex;
align-items: center;
gap: 12px;
background: var(--accent);
color: #fff;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 0.95rem;
padding: 14px 24px;
border-radius: 100px;
box-shadow: 0 8px 32px rgba(61,170,53,0.45), 0 2px 8px rgba(0,0,0,0.3);
transition: var(--transition);
border: none;
cursor: pointer;
text-decoration: none;
}
.sticky-phone:hover { background: var(--accent-light); transform: translateY(-3px); }
.sticky-phone .phone-icon { font-size: 1.1rem; animation: phoneFlex 2s infinite; }
@keyframes phoneFlex {
0%,100% { transform: rotate(0deg); }
10%      { transform: rotate(-15deg); }
20%      { transform: rotate(15deg); }
30%      { transform: rotate(0deg); }
}  @media (max-width: 1280px) { .aufbau-inner,
.kontakt-inner { gap: 48px; }
.warum-usps { grid-template-columns: 1fr 1fr; }
.warum-top { gap: 40px; }
.prozess-steps::before { display: none; }
.prozess-steps { grid-template-columns: 1fr 1fr; gap: 32px; } .nav-cta { display: none !important; }
.nav-logo-text span { display: none; }
.nav-hamburger { display: flex; position: relative; z-index: 1000; }
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--accent); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--accent); }
.mobile-nav-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 998;
opacity: 0; visibility: hidden;
transition: opacity 0.35s ease, visibility 0.35s;
}
.mobile-nav-overlay.open { opacity: 1; visibility: visible; }
.nav-links {
display: flex;
flex-direction: column;
position: fixed;
top: 0; right: 0; bottom: 0;
width: min(85%, 380px);
background: #fff;
padding: 88px 28px 40px;
gap: 4px;
z-index: 999;
transform: translateX(100%);
visibility: hidden;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.4s;
box-shadow: -12px 0 48px rgba(0,0,0,0.12);
align-items: flex-start;
overflow-y: auto;
}
.nav-links.open { transform: translateX(0); visibility: visible; }
.nav-links li {
width: 100%;
opacity: 0;
transform: translateX(16px);
transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links.open li { opacity: 1; transform: translateX(0); }
.nav-links.open li:nth-child(1) { transition-delay: 0.08s; }
.nav-links.open li:nth-child(2) { transition-delay: 0.12s; }
.nav-links.open li:nth-child(3) { transition-delay: 0.16s; }
.nav-links.open li:nth-child(4) { transition-delay: 0.20s; }
.nav-links.open li:nth-child(5) { transition-delay: 0.24s; }
.nav-links.open li:nth-child(6) { transition-delay: 0.28s; }
.nav-links.open li:nth-child(7) { transition-delay: 0.32s; }
.nav-links.open li:nth-child(8) { transition-delay: 0.36s; }
.nav-links a {
display: block;
width: 100%;
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
padding: 13px 0;
border-bottom: 1px solid rgba(0,0,0,0.06);
transition: color 0.2s ease, padding-left 0.2s ease;
}
.nav-links a:hover { color: var(--accent); padding-left: 6px; } .nav-has-dropdown { width: 100%; }
.nav-dropdown-toggle {
width: 100%;
justify-content: space-between;
font-size: 1.1rem;
padding: 13px 0;
border-bottom: 1px solid rgba(0,0,0,0.06);
border-radius: 0;
}
.nav-has-dropdown.open .nav-dropdown-toggle svg { transform: rotate(180deg); }
.nav-dropdown {
position: static !important;
transform: none !important;
transition: none !important;
opacity: 1 !important; visibility: visible !important;
pointer-events: auto !important;
box-shadow: none;
border: none;
border-left: 3px solid var(--accent);
border-radius: 0;
background: #f4fafb;
min-width: 0; width: 100%;
padding: 4px 0 8px 0;
display: none;
margin-top: 2px;
margin-bottom: 4px;
}
.nav-has-dropdown.open .nav-dropdown { display: block; }
.nav-dd-icon { width: 28px; height: 28px; background: transparent; }
.nav-dd-title { font-size: 0.9rem; }
.nav-dd-sub { font-size: 0.7rem; }
.nav-dropdown a {
padding: 10px 14px;
gap: 10px;
border-bottom: 1px solid rgba(0,0,0,0.04);
}
.nav-dropdown a::before { display: none; }
.nav-dropdown a:hover { background: transparent; padding-left: 20px; }
.nav-dropdown-divider { display: none; }
}
@media (max-width: 1024px) {
.aufbau-inner,
.kontakt-inner { gap: 48px; }
.warum-usps { grid-template-columns: 1fr 1fr; }
.warum-top { gap: 40px; }
.prozess-steps::before { display: none; }
.prozess-steps { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 768px) {
section { padding: 72px 0; } #topbar { font-size: 0.72rem; padding: 7px 0; }
#navbar { top: 34px; }
.topbar-inner { justify-content: center; gap: 20px; }
.topbar-left { gap: 0; }
.topbar-right { display: flex; gap: 0; }
#topbar-email-link { display: none; }
#topbar-location { display: none; }
.topbar-item--static { color: #fff; }
.topbar-item { color: #fff; }
.aufbau-inner,
.kontakt-inner { grid-template-columns: 1fr; gap: 40px; }
.warum-top { flex-direction: column; gap: 40px; }
.warum-usps { grid-template-columns: 1fr; }
.warum-big-stat { bottom: -16px; left: 16px; padding: 16px 24px; }
.warum-big-stat .num { font-size: 2.5rem; }
.warum-certs { flex-wrap: wrap; }
.testimonials { grid-template-columns: 1fr; }
.form-grid { grid-template-columns: 1fr; }
.slider-btn { display: none; }
.slide { height: 420px; }
.slide-caption { padding: 32px 20px 24px; }
.hero-stats { gap: 28px; flex-wrap: wrap; }
.mobile-only {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
margin-top: auto;
padding-top: 36px;
border-top: 1px solid rgba(0,0,0,0.06);
width: 100%;
}
.mobile-trust-list {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
margin-bottom: 8px;
opacity: 0.7;
color: var(--text-secondary);
}
.mobile-trust-item {
display: flex;
align-items: center;
gap: 16px;
}
.mobile-trust-icon {
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--text-secondary);
}
img.mobile-trust-icon {
filter: grayscale(1);
opacity: 0.9;
}
.mobile-trust-text {
display: flex;
flex-direction: column;
line-height: 1.35;
text-align: left;
}
.mobile-trust-text strong {
font-size: 0.85rem;
font-weight: 700;
}
.mobile-trust-text span {
font-size: 0.75rem;
}
.rating-row {
display: flex;
align-items: center;
gap: 6px;
}
.rating-row span {
letter-spacing: 1px;
font-size: 0.8rem;
}
.mobile-socials {
display: flex;
gap: 12px;
align-items: center;
}
.mobile-social-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: auto !important;
height: auto !important;
background: none;
border: none;
border-radius: 0;
padding: 4px !important;
color: var(--accent);
transition: var(--transition);
opacity: 0.7;
}
.mobile-social-btn:hover { opacity: 1; }
.mobile-social-btn:hover {
background: rgba(0,0,0,0.08);
transform: translateY(-2px);
}
.footer-inner { grid-template-columns: 1fr; gap: 36px; }
.footer-bottom { flex-direction: column; text-align: center; }
.prozess-steps { grid-template-columns: 1fr; gap: 24px; }
.kontakt-form-wrap { padding: 32px 24px; }
.sticky-phone .phone-label { display: none; }
.sticky-phone { padding: 16px; border-radius: 50%; }
}
@media (max-width: 480px) {
.hero-actions { flex-direction: column; }
.hero-actions .btn { width: 100%; justify-content: center; }
.leistungen-grid { grid-template-columns: 1fr; }
} .team-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 40px;
margin-top: 60px;
}
.team-card {
position: relative;
border-radius: var(--radius-md);
overflow: visible;
transition: var(--transition);
}
.team-img-wrapper {
position: relative;
aspect-ratio: 4/5;
overflow: hidden;
border-radius: var(--radius-sm);
z-index: 1;
}
.team-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.team-card:hover .team-img-wrapper img {
transform: scale(1.05);
}
.team-info {
background: #8fa08e; padding: 24px;
margin-top: -60px; margin-left: 20px;
position: relative;
z-index: 2;
border-radius: var(--radius-sm);
color: #ffffff;
box-shadow: var(--shadow-card);
}
.team-info h4 {
font-size: 1.1rem;
margin-bottom: 4px;
color: #ffffff;
}
.team-role {
font-size: 0.85rem;
opacity: 0.9;
margin-bottom: 12px;
display: block;
}
.team-contact {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 0.8rem;
}
.team-contact a {
display: flex;
align-items: center;
gap: 8px;
color: #ffffff;
text-decoration: none;
transition: opacity 0.2s;
}
.team-contact a:hover {
opacity: 0.8;
}
.team-contact strong {
width: 15px;
display: inline-block;
} .faq-more-hidden { display: none; }
.faq-more-hidden.open { display: block; }
.faq-more-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: none;
border: 2px solid var(--border);
border-radius: 100px;
padding: 10px 24px;
font-size: 0.9rem;
font-weight: 600;
color: var(--accent-heading);
cursor: pointer;
transition: var(--transition);
}
.faq-more-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
@media (max-width: 768px) {
.team-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.team-card {
display: grid;
grid-template-columns: 88px 1fr;
align-items: stretch;
}
.team-img-wrapper {
aspect-ratio: 1/1;
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.team-info {
margin-top: 0;
margin-left: 0;
margin-right: 0;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
padding: 14px 16px;
display: flex;
flex-direction: column;
justify-content: center;
}
.team-info h4 { font-size: 0.88rem; margin-bottom: 2px; }
.team-role { font-size: 0.74rem; margin-bottom: 6px; }
.team-contact { font-size: 0.72rem; gap: 2px; }
} .sticky-phone {
position: fixed;
bottom: 24px;
right: 24px;
background: var(--accent);
color: #fff;
padding: 12px 24px;
border-radius: 100px;
box-shadow: 0 4px 20px rgba(61,170,53,0.4);
display: flex;
align-items: center;
gap: 12px;
z-index: 1000;
text-decoration: none;
font-weight: 600;
font-size: 1.05rem;
transition: all 0.4s ease;
opacity: 0;
transform: translateY(20px);
pointer-events: none;
}
.sticky-phone.visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.sticky-phone:hover {
background: var(--accent-light);
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(61,170,53,0.5);
color: #fff;
}
.sticky-phone .phone-icon {
display: flex;
align-items: center;
justify-content: center;
}
.sticky-phone .phone-label {
display: flex;
align-items: center;
} .hero-trust {
display: flex;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 30px;
}
.trust-badge {
display: flex;
align-items: center;
gap: 16px;
background: #ffffff;
padding: 12px 24px;
border-radius: 50px;
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
border: 1px solid rgba(0,0,0,0.04);
}
.trust-badge .badge-icon {
width: 26px;
height: 26px;
flex-shrink: 0;
}
.trust-stars {
display: flex;
gap: 4px;
}
.trust-stars svg {
width: 16px;
height: 16px;
}
.trust-text {
display: flex;
flex-direction: column;
line-height: 1.3;
}
.trust-text strong {
font-size: 0.95rem;
font-weight: 700;
color: var(--accent-heading);
}
.trust-text span {
font-size: 0.8rem;
color: var(--text-secondary);
}
@media (min-width: 769px) {
.mobile-only {
display: none !important;
}
} .faq-grid {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 860px;
margin: 0 auto;
}
.faq-item {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 20px 24px;
transition: var(--transition);
box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}
.faq-item:hover {
border-color: var(--border-accent);
}
.faq-item summary {
font-weight: 600;
font-size: 1.05rem;
color: var(--accent-heading);
cursor: pointer;
list-style: none;
position: relative;
padding-right: 32px;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary::after {
content: '+';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 1.4rem;
font-weight: 400;
color: var(--accent);
transition: transform 0.3s ease;
}
.faq-item[open] summary::after {
content: '-';
transform: translateY(-50%) rotate(180deg);
}
.faq-item p {
margin-top: 16px;
margin-bottom: 0;
font-size: 0.95rem;
} .blog-grid h3 {
text-transform: none;
font-weight: 500;
font-size: 1.15rem;
line-height: 1.4;
}
.blog-grid article h3 a { text-transform: none; }
.post-cta h3 { text-transform: none; }
#ratgeber article:hover {
box-shadow: 0 8px 32px rgba(1,80,93,0.10);
transform: translateY(-3px);
}
#ratgeber article a img:hover {
transform: scale(1.04);
}
@media (max-width: 900px) {
.blog-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 580px) {
.blog-grid { grid-template-columns: 1fr !important; }
}