ErgoLuft – Praxis für Ergotherapie

.nav-links a {
text-decoration: none;
color: var(–dark);
font-weight: 500;
font-size: 0.95rem;
transition: all 0.3s ease;
position: relative;
padding: 0.5rem 0;
}

.nav-links a::after {
content: “;
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(–primary);
transition: width 0.3s ease;
}

.nav-links a:hover {
color: var(–primary);
}

.nav-links a:hover::after {
width: 100%;
}

.mobile-menu-btn {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
}

.mobile-menu-btn span {
display: block;
width: 25px;
height: 2px;
background: var(–dark);
margin: 5px 0;
transition: all 0.3s ease;
}

/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
background: var(–gradient-light);
}

.hero::before {
content: “;
position: absolute;
top: -30%;
right: -10%;
width: 60%;
height: 120%;
background: var(–gradient);
opacity: 0.08;
border-radius: 50%;
transform: rotate(-15deg);
}

.hero::after {
content: “;
position: absolute;
bottom: -20%;
left: -5%;
width: 40%;
height: 80%;
background: var(–gradient);
opacity: 0.05;
border-radius: 50%;
}

.hero-container {
max-width: 1200px;
margin: 0 auto;
padding: 8rem 2rem 4rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 1;
}

.hero-content h1 {
font-size: 3.2rem;
font-weight: 700;
line-height: 1.15;
color: var(–dark);
margin-bottom: 1.5rem;
}

.hero-content h1 span {
color: var(–primary);
}

.hero-content .subtitle {
font-size: 1.3rem;
color: var(–primary-dark);
font-weight: 500;
margin-bottom: 1rem;
}

.hero-content p {
font-size: 1.1rem;
color: var(–gray);
margin-bottom: 2rem;
max-width: 500px;
}

.hero-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}

.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
border: none;
}

.btn-primary {
background: var(–gradient);
color: var(–white);
box-shadow: 0 10px 30px rgba(58, 175, 169, 0.35);
}

.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(58, 175, 169, 0.45);
}

.btn-secondary {
background: var(–white);
color: var(–primary-dark);
border: 2px solid var(–primary);
}

.btn-secondary:hover {
background: var(–primary);
color: var(–white);
}

/* Abstract Hero Visual */
.hero-visual {
position: relative;
height: 450px;
}

.hero-visual-bg {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: var(–gradient);
border-radius: 30px;
opacity: 0.15;
transform: rotate(3deg);
}

.hero-visual-main {
position: absolute;
top: 20px;
right: 20px;
width: calc(100% – 40px);
height: calc(100% – 40px);
background: linear-gradient(135deg, var(–primary-light) 0%, var(–primary) 50%, var(–primary-dark) 100%);
border-radius: 25px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(–shadow-lg);
overflow: hidden;
}

.hero-visual-main::before {
content: “;
position: absolute;
width: 200%;
height: 200%;
background: repeating-linear-gradient(45deg,
transparent,
transparent 30px,
rgba(255, 255, 255, 0.03) 30px,
rgba(255, 255, 255, 0.03) 60px);
}

.hero-icon {
font-size: 8rem;
opacity: 0.9;
}

.hero-form {
position: relative;
}

.hero-form-card {
background: var(–white);
padding: 2.5rem;
border-radius: 25px;
box-shadow: var(–shadow-lg);
}

.hero-form-card h3 {
font-size: 1.5rem;
color: var(–dark);
margin-bottom: 0.5rem;
}

.hero-form-card>p {
color: var(–gray);
margin-bottom: 1.5rem;
}

.hero-form-card .form-group {
margin-bottom: 1rem;
}

.hero-form-card input,
.hero-form-card textarea {
width: 100%;
padding: 0.875rem 1rem;
border: 2px solid #DEF2F1;
border-radius: 10px;
font-family: inherit;
font-size: 0.95rem;
transition: all 0.3s ease;
background: var(–light);
}

.hero-form-card input:focus,
.hero-form-card textarea:focus {
outline: none;
border-color: var(–primary);
background: var(–white);
}

.hero-form-card textarea {
resize: none;
min-height: 80px;
}

.hero-contact-info {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid #DEF2F1;
}

.hero-contact-info p {
margin-bottom: 0.5rem;
color: var(–gray);
}

.hero-contact-info a {
color: var(–primary-dark);
text-decoration: none;
}

.hero-contact-info a:hover {
color: var(–primary);
}

/* Decorative Elements */
.floating-shapes {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}

.shape {
position: absolute;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
}

.shape-1 {
width: 80px;
height: 80px;
top: 10%;
left: 10%;
}

.shape-2 {
width: 40px;
height: 40px;
top: 60%;
left: 20%;
}

.shape-3 {
width: 60px;
height: 60px;
top: 20%;
right: 15%;
}

.shape-4 {
width: 30px;
height: 30px;
bottom: 20%;
right: 25%;
}

/* Section Styles */
section {
padding: 6rem 0;
}

.section-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}

.section-header {
text-align: center;
margin-bottom: 4rem;
}

.section-header h2 {
font-size: 2.5rem;
font-weight: 700;
color: var(–dark);
margin-bottom: 1rem;
}

.section-header p {
font-size: 1.1rem;
color: var(–gray);
max-width: 600px;
margin: 0 auto;
}

.section-badge {
display: inline-block;
background: linear-gradient(135deg, rgba(58, 175, 169, 0.15) 0%, rgba(58, 175, 169, 0.08) 100%);
color: var(–primary-dark);
padding: 0.5rem 1.5rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
}

/* Services Section */
.services {
background: var(–white);
}

.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}

.service-card {
background: var(–light);
padding: 2.5rem;
border-radius: 20px;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}

.service-card::before {
content: “;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(–gradient);
transform: scaleX(0);
transition: transform 0.4s ease;
}

.service-card:hover {
transform: translateY(-10px);
box-shadow: var(–shadow-lg);
background: var(–white);
}

.service-card:hover::before {
transform: scaleX(1);
}

.service-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, rgba(58, 175, 169, 0.2) 0%, rgba(58, 175, 169, 0.1) 100%);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin-bottom: 1.5rem;
overflow: hidden;
}

.service-icon img {
width: 100%;
height: 100%;
object-fit: cover;
}

.service-card h3 {
font-size: 1.3rem;
font-weight: 600;
color: var(–dark);
margin-bottom: 1rem;
}

.service-card p {
color: var(–gray);
line-height: 1.7;
}

/* Contact Section */
.contact {
background: var(–gradient-light);
}

.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
}

.contact-info {
background: var(–white);
padding: 3rem;
border-radius: 25px;
box-shadow: var(–shadow);
}

.contact-info h3 {
font-size: 1.8rem;
color: var(–dark);
margin-bottom: 2rem;
}

.contact-item {
display: flex;
align-items: flex-start;
gap: 1.25rem;
margin-bottom: 1.5rem;
padding: 1.25rem;
background: var(–light);
border-radius: 15px;
transition: all 0.3s ease;
}

.contact-item:hover {
background: linear-gradient(135deg, rgba(58, 175, 169, 0.1) 0%, rgba(58, 175, 169, 0.05) 100%);
}

.contact-icon {
width: 50px;
height: 50px;
background: var(–gradient);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(–white);
font-size: 1.25rem;
flex-shrink: 0;
}

.contact-item h4 {
font-size: 1rem;
color: var(–dark);
margin-bottom: 0.25rem;
}

.contact-item p {
color: var(–gray);
font-size: 0.95rem;
}

.contact-item a {
color: var(–primary-dark);
text-decoration: none;
transition: color 0.3s ease;
}

.contact-item a:hover {
color: var(–primary);
}

.contact-form {
background: var(–white);
padding: 3rem;
border-radius: 25px;
box-shadow: var(–shadow);
}

.contact-form h3 {
font-size: 1.8rem;
color: var(–dark);
margin-bottom: 2rem;
}

.form-group {
margin-bottom: 1.5rem;
}

.form-group label {
display: block;
font-weight: 500;
color: var(–dark);
margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
width: 100%;
padding: 1rem 1.25rem;
border: 2px solid #DEF2F1;
border-radius: 12px;
font-family: inherit;
font-size: 1rem;
transition: all 0.3s ease;
background: var(–light);
}

.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(–primary);
background: var(–white);
box-shadow: 0 0 0 4px rgba(58, 175, 169, 0.15);
}

.form-group textarea {
resize: vertical;
min-height: 150px;
}

/* Team Section */
.team {
background: var(–white);
}

.team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
}

.team-card {
text-align: center;
padding: 2rem;
border-radius: 25px;
background: var(–light);
transition: all 0.4s ease;
}

.team-card:hover {
transform: translateY(-10px);
box-shadow: var(–shadow-lg);
background: var(–white);
}

.team-image {
width: 150px;
height: 150px;
border-radius: 50%;
margin: 0 auto 1.5rem;
background: var(–gradient);
display: flex;
align-items: center;
justify-content: center;
font-size: 3.5rem;
color: var(–white);
position: relative;
overflow: hidden;
}

.team-card h3 {
font-size: 1.3rem;
color: var(–dark);
margin-bottom: 0.5rem;
}

.team-card .role {
color: var(–primary-dark);
font-weight: 500;
margin-bottom: 1rem;
}

.team-card p {
color: var(–gray);
font-size: 0.95rem;
}

/* Footer */
.footer {
background: var(–secondary);
color: var(–light);
padding: 4rem 0 2rem;
}

.footer-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}

.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 4rem;
margin-bottom: 3rem;
}

.footer-brand h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(–white);
}

.footer-brand p {
color: var(–gray-light);
line-height: 1.8;
}

.footer-links h4 {
font-size: 1.1rem;
margin-bottom: 1.5rem;
color: var(–white);
}

.footer-links ul {
list-style: none;
}

.footer-links a {
color: var(–gray-light);
text-decoration: none;
display: block;
padding: 0.5rem 0;
transition: color 0.3s ease;
}

.footer-links a:hover {
color: var(–primary-light);
}

.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 2rem;
text-align: center;
color: var(–gray-light);
font-size: 0.9rem;
}

/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes float {

0%,
100% {
transform: translateY(0);
}

50% {
transform: translateY(-15px);
}
}

.animate {
animation: fadeInUp 0.8s ease forwards;
}

.hero-visual-main {
animation: float 6s ease-in-out infinite;
}

/* Responsive */
@media (max-width: 992px) {
.hero-container {
grid-template-columns: 1fr;
text-align: center;
}

.hero-content p {
margin: 0 auto 2rem;
}

.hero-buttons {
justify-content: center;
}

.hero-visual {
order: -1;
height: 300px;
}

.services-grid,
.team-grid {
grid-template-columns: repeat(2, 1fr);
}

.contact-grid {
grid-template-columns: 1fr;
}

.footer-content {
grid-template-columns: 1fr;
gap: 2rem;
}
}

@media (max-width: 768px) {
.nav-links {
display: none;
}

.mobile-menu-btn {
display: block;
}

.hero-content h1 {
font-size: 2.2rem;
}

.services-grid,
.team-grid {
grid-template-columns: 1fr;
}

.section-header h2 {
font-size: 2rem;
}
}

Praxis für Ergotherapie Akinci & Sariaslan

Willkommen bei ErgoLuft

Wir begleiten Menschen dabei, ihre Selbstständigkeit und Lebensqualität zu stärken. Individuelle
Therapie für alle Altersgruppen in Berlin.

📞 Termin vereinbaren

Mehr erfahren

📅 Termin vereinbaren

Kontaktieren Sie uns für eine Beratung

📞 Telefon wird aktualisiert

✉️ info@ergotherapie-luft.de

Unsere Leistungen

Therapieangebote

Wir bieten individuell abgestimmte ergotherapeutische Behandlungen für jedes Alter.

Pädiatrie

Individuelle Ergotherapie für Kinder zur Förderung der motorischen Fähigkeiten, Wahrnehmung und
sozialen Kompetenzen.

Neurologie

Spezialisierte Rehabilitation für Patienten mit neurologischen Erkrankungen zur Verbesserung der
Lebensqualität.

Handtherapie

Therapie zur Wiederherstellung der Handfunktion nach Verletzungen oder Operationen.

Geriatrie

Unterstützung für ältere Menschen zur Erhaltung der Selbstständigkeit im Alltag.

Psychiatrie

Therapie bei psychischen Erkrankungen zur Verbesserung der Handlungsfähigkeit und sozialen
Integration.

Hausbesuche

Ergotherapie in Ihrer gewohnten Umgebung – wir kommen zu Ihnen nach Hause.

Kontakt

Wir sind für Sie da

Nehmen Sie Kontakt mit uns auf – wir helfen Ihnen gerne weiter.

Kontaktdaten

📍

Adresse

Berlin, Deutschland
(Adresse wird aktualisiert)

📞

Telefon

(Nummer wird aktualisiert)

✉️

E-Mail

info@ergotherapie-luft.de

🕐

Öffnungszeiten

Mo-Fr: 8:00 – 18:00 Uhr
Termine nach Vereinbarung

Nachricht senden

Unser Team

Lernen Sie uns kennen

Unser erfahrenes Team freut sich darauf, Sie kennenzulernen.

👤

Therapeut/in

Ergotherapeut/in

Informationen folgen in Kürze.

👤

Therapeut/in

Ergotherapeut/in

Informationen folgen in Kürze.

👤

Therapeut/in

Ergotherapeut/in

Informationen folgen in Kürze.