company engineering corporate german kmu ingenieurbüro planning corporate
Company Engineering
Professional German engineering firm website with project portfolio, competency showcase, career section, and corporate authority.
corporate Responsive Vanilla JS
Live Preview
Sections
navbarherocompetenciesprojectsaboutcareercontactfooter
Patterns used
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Brückner + Partner — Engineers & Planners</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
<link rel="stylesheet" href="https://webspire.de/webspire-components.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body { font-family: 'Inter', sans-serif; }
/* Brand tokens */
:root {
--ws-color-accent: oklch(0.38 0.06 240); /* slate-700 */
--ws-color-accent-hover: oklch(0.32 0.06 240); /* slate-800 */
--ws-color-accent-subtle: oklch(0.96 0.01 240); /* slate-50 */
--ws-color-surface: oklch(1 0 0);
--ws-color-surface-alt: oklch(0.97 0.005 240); /* slate-50 */
--ws-color-text: oklch(0.20 0.02 240); /* slate-900 */
--ws-color-text-muted: oklch(0.55 0.02 240); /* slate-500 */
}
/* hover-lift snippet */
.hover-lift {
--lift-distance: -4px;
--lift-shadow: 0 8px 24px oklch(0 0 0 / 0.2);
--lift-duration: 0.25s;
transition:
transform var(--lift-duration) cubic-bezier(0.16, 1, 0.3, 1),
box-shadow var(--lift-duration) cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift:hover {
transform: translateY(var(--lift-distance));
box-shadow: var(--lift-shadow);
}
@media (prefers-reduced-motion: reduce) {
.hover-lift { transition: none; }
}
/* Template-specific helpers */
.stat-divider:not(:last-child)::after {
content: ''; position: absolute; right: 0; top: 15%; height: 70%;
width: 1px; background: rgba(100, 116, 139, 0.2);
}
</style>
</head>
<body class="bg-white text-slate-800 antialiased">
<!-- Navbar -->
<nav class="ws-navbar fixed top-0 inset-x-0 z-50 bg-white/95 backdrop-blur-sm border-b border-slate-100" aria-label="Main navigation">
<div class="max-w-7xl mx-auto flex items-center justify-between px-6 py-4">
<a href="#" class="flex items-center gap-3">
<div class="w-8 h-8 bg-slate-700 rounded-sm flex items-center justify-center">
<span class="text-white text-xs font-bold leading-none">B+P</span>
</div>
<span class="text-lg font-semibold tracking-tight text-slate-900">Brückner + Partner</span>
</a>
<ul class="hidden lg:flex items-center gap-8 text-sm font-medium text-slate-500">
<li><a href="#unternehmen" class="hover:text-slate-900 transition-colors">About Us</a></li>
<li><a href="#kompetenzen" class="hover:text-slate-900 transition-colors">Expertise</a></li>
<li><a href="#projekte" class="hover:text-slate-900 transition-colors">Projects</a></li>
<li><a href="#karriere" class="hover:text-slate-900 transition-colors">Careers</a></li>
<li><a href="#kontakt" class="hover:text-slate-900 transition-colors">Contact</a></li>
</ul>
<div class="hidden lg:flex items-center gap-4">
<span class="text-xs font-medium text-slate-400 hover:text-slate-600 cursor-pointer transition-colors">DE</span>
<span class="text-xs font-semibold text-slate-900 border-b border-slate-900 pb-0.5">EN</span>
</div>
<button id="menu-toggle" class="lg:hidden p-2 -mr-2" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-menu">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
<div id="mobile-menu" class="hidden lg:hidden border-t border-slate-100 bg-white px-6 pb-6 pt-4">
<ul class="flex flex-col gap-4 text-base font-medium text-slate-700">
<li><a href="#unternehmen" class="block py-1">About Us</a></li>
<li><a href="#kompetenzen" class="block py-1">Expertise</a></li>
<li><a href="#projekte" class="block py-1">Projects</a></li>
<li><a href="#karriere" class="block py-1">Careers</a></li>
<li><a href="#kontakt" class="block py-1">Contact</a></li>
</ul>
<div class="mt-4 flex gap-4">
<span class="text-sm font-medium text-slate-400">DE</span>
<span class="text-sm font-semibold text-slate-900 border-b border-slate-900 pb-0.5">EN</span>
</div>
</div>
</nav>
<!-- Hero -->
<section class="ws-hero pt-28 pb-16 md:pt-36 md:pb-24 bg-slate-50">
<div class="max-w-7xl mx-auto px-6">
<div class="max-w-3xl">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-slate-900 leading-tight tracking-tight">
Infrastructure.<br />Planning.<br />Future.
</h1>
<p class="mt-6 text-lg md:text-xl text-slate-500 leading-relaxed max-w-2xl">
We plan infrastructure that connects generations. As an independent engineering firm, we develop sustainable solutions for structural and civil engineering, water management, and the energy transition.
</p>
<div class="mt-8 flex flex-wrap gap-4">
<a href="#projekte" class="inline-flex items-center bg-slate-800 text-white text-sm font-medium px-6 py-3 rounded hover:bg-slate-700 transition-colors">
Our Projects
</a>
<a href="#kontakt" class="inline-flex items-center border border-slate-300 text-slate-700 text-sm font-medium px-6 py-3 rounded hover:border-slate-400 hover:text-slate-900 transition-colors">
Get in Touch
</a>
</div>
</div>
</div>
<!-- Stats bar -->
<div class="max-w-7xl mx-auto px-6 mt-16">
<div class="bg-white border border-slate-200 rounded-lg grid grid-cols-2 md:grid-cols-4">
<div class="relative px-6 py-8 text-center stat-divider">
<div class="text-3xl md:text-4xl font-bold text-slate-900">45</div>
<div class="mt-1 text-sm text-slate-500">Years of Experience</div>
</div>
<div class="relative px-6 py-8 text-center stat-divider">
<div class="text-3xl md:text-4xl font-bold text-slate-900">180</div>
<div class="mt-1 text-sm text-slate-500">Employees</div>
</div>
<div class="relative px-6 py-8 text-center stat-divider">
<div class="text-3xl md:text-4xl font-bold text-slate-900">2,400+</div>
<div class="mt-1 text-sm text-slate-500">Projects</div>
</div>
<div class="relative px-6 py-8 text-center stat-divider">
<div class="text-3xl md:text-4xl font-bold text-slate-900">12</div>
<div class="mt-1 text-sm text-slate-500">Offices</div>
</div>
</div>
</div>
</section>
<!-- Expertise -->
<section id="kompetenzen" class="ws-features py-20 md:py-28">
<div class="max-w-7xl mx-auto px-6">
<div class="max-w-2xl">
<p class="text-sm font-semibold text-slate-400 uppercase tracking-widest">Expertise</p>
<h2 class="mt-3 text-3xl md:text-4xl font-bold text-slate-900 tracking-tight">Range of Services</h2>
<p class="mt-4 text-lg text-slate-500">Interdisciplinary engineering services from a single source — from the initial study to construction supervision.</p>
</div>
<div class="mt-14 grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="hover-lift group border border-slate-200 rounded-lg p-8 hover:border-slate-300 transition-colors">
<div class="w-12 h-12 bg-slate-100 rounded-lg flex items-center justify-center text-slate-600 group-hover:bg-slate-800 group-hover:text-white transition-colors">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2 22h20M6 18V10m4 8V6m4 12V8m4 10V4"/>
</svg>
</div>
<h3 class="mt-5 text-lg font-semibold text-slate-900">Structural Engineering</h3>
<p class="mt-2 text-sm text-slate-500 leading-relaxed">Design and detailed planning for administrative, educational, and healthcare buildings. From feasibility study to commissioning.</p>
</div>
<!-- Card 2 -->
<div class="hover-lift group border border-slate-200 rounded-lg p-8 hover:border-slate-300 transition-colors">
<div class="w-12 h-12 bg-slate-100 rounded-lg flex items-center justify-center text-slate-600 group-hover:bg-slate-800 group-hover:text-white transition-colors">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 21h18M3 21V8l4-4h10l4 4v13M9 21v-6h6v6"/>
</svg>
</div>
<h3 class="mt-5 text-lg font-semibold text-slate-900">Civil Engineering</h3>
<p class="mt-2 text-sm text-slate-500 leading-relaxed">Road, bridge, and tunnel construction. Geotechnical assessments, structural planning, and ground investigations for public infrastructure.</p>
</div>
<!-- Card 3 -->
<div class="hover-lift group border border-slate-200 rounded-lg p-8 hover:border-slate-300 transition-colors">
<div class="w-12 h-12 bg-slate-100 rounded-lg flex items-center justify-center text-slate-600 group-hover:bg-slate-800 group-hover:text-white transition-colors">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 3v18m-6-6c0 3.3 2.7 6 6 6s6-2.7 6-6c0-4-3-7-6-12-3 5-6 8-6 12z"/>
</svg>
</div>
<h3 class="mt-5 text-lg font-semibold text-slate-900">Water Management</h3>
<p class="mt-2 text-sm text-slate-500 leading-relaxed">Flood protection, sewer planning, and drinking water supply. Hydraulic modeling and ecological water body development.</p>
</div>
<!-- Card 4 -->
<div class="hover-lift group border border-slate-200 rounded-lg p-8 hover:border-slate-300 transition-colors">
<div class="w-12 h-12 bg-slate-100 rounded-lg flex items-center justify-center text-slate-600 group-hover:bg-slate-800 group-hover:text-white transition-colors">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<h3 class="mt-5 text-lg font-semibold text-slate-900">Energy Planning</h3>
<p class="mt-2 text-sm text-slate-500 leading-relaxed">Building services engineering, heating and cooling concepts, photovoltaic planning, and energy-efficient district development.</p>
</div>
<!-- Card 5 -->
<div class="hover-lift group border border-slate-200 rounded-lg p-8 hover:border-slate-300 transition-colors">
<div class="w-12 h-12 bg-slate-100 rounded-lg flex items-center justify-center text-slate-600 group-hover:bg-slate-800 group-hover:text-white transition-colors">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l5.447 2.724A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
</svg>
</div>
<h3 class="mt-5 text-lg font-semibold text-slate-900">Transport Planning</h3>
<p class="mt-2 text-sm text-slate-500 leading-relaxed">Traffic concepts, mobility analyses, and public transport planning. Noise protection assessments and development planning for municipalities.</p>
</div>
<!-- Card 6 -->
<div class="hover-lift group border border-slate-200 rounded-lg p-8 hover:border-slate-300 transition-colors">
<div class="w-12 h-12 bg-slate-100 rounded-lg flex items-center justify-center text-slate-600 group-hover:bg-slate-800 group-hover:text-white transition-colors">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 3c.3 0 5 4 5 8a5 5 0 01-10 0c0-4 4.7-8 5-8zM7 19a2 2 0 104 0M13 19a2 2 0 104 0M10 21h4"/>
</svg>
</div>
<h3 class="mt-5 text-lg font-semibold text-slate-900">Sustainability</h3>
<p class="mt-2 text-sm text-slate-500 leading-relaxed">BNB and DGNB certification, life cycle analyses, and climate adaptation strategies. Sustainable building materials and circular economy.</p>
</div>
</div>
</div>
</section>
<!-- Reference Projects -->
<section id="projekte" class="ws-cards py-20 md:py-28 bg-slate-50">
<div class="max-w-7xl mx-auto px-6">
<div class="max-w-2xl">
<p class="text-sm font-semibold text-slate-400 uppercase tracking-widest">References</p>
<h2 class="mt-3 text-3xl md:text-4xl font-bold text-slate-900 tracking-tight">Selected Projects</h2>
<p class="mt-4 text-lg text-slate-500">A selection from over 2,400 completed projects in the public and private sector.</p>
</div>
<div class="mt-14 grid md:grid-cols-3 gap-8">
<!-- Project 1 -->
<article class="group">
<div class="aspect-[4/3] bg-slate-200 rounded-lg overflow-hidden">
<div class="w-full h-full bg-gradient-to-br from-slate-300 to-slate-200 group-hover:scale-105 transition-transform duration-500"></div>
</div>
<div class="mt-5">
<div class="flex items-center gap-2">
<span class="text-xs font-medium text-slate-500 bg-slate-100 px-2.5 py-1 rounded">Civil Engineering</span>
<span class="text-xs text-slate-400">2023</span>
</div>
<h3 class="mt-2 text-lg font-semibold text-slate-900">Stadthafen Rostock Expansion</h3>
<p class="mt-1 text-sm text-slate-500">Rostock, Mecklenburg-Vorpommern</p>
</div>
</article>
<!-- Project 2 -->
<article class="group">
<div class="aspect-[4/3] bg-slate-200 rounded-lg overflow-hidden">
<div class="w-full h-full bg-gradient-to-br from-slate-300/80 to-blue-200/30 group-hover:scale-105 transition-transform duration-500"></div>
</div>
<div class="mt-5">
<div class="flex items-center gap-2">
<span class="text-xs font-medium text-slate-500 bg-slate-100 px-2.5 py-1 rounded">Structural Engineering</span>
<span class="text-xs text-slate-400">2024</span>
</div>
<h3 class="mt-2 text-lg font-semibold text-slate-900">New Administrative Center Dresden</h3>
<p class="mt-1 text-sm text-slate-500">Dresden, Saxony</p>
</div>
</article>
<!-- Project 3 -->
<article class="group">
<div class="aspect-[4/3] bg-slate-200 rounded-lg overflow-hidden">
<div class="w-full h-full bg-gradient-to-br from-stone-300/80 to-slate-200 group-hover:scale-105 transition-transform duration-500"></div>
</div>
<div class="mt-5">
<div class="flex items-center gap-2">
<span class="text-xs font-medium text-slate-500 bg-slate-100 px-2.5 py-1 rounded">Water Management</span>
<span class="text-xs text-slate-400">2022</span>
</div>
<h3 class="mt-2 text-lg font-semibold text-slate-900">Elbe Levee Flood Protection</h3>
<p class="mt-1 text-sm text-slate-500">Saxony-Anhalt</p>
</div>
</article>
</div>
<div class="mt-12 text-center">
<a href="#" class="inline-flex items-center gap-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">
View all projects
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
</div>
</section>
<!-- About Us -->
<section id="unternehmen" class="ws-blog py-20 md:py-28">
<div class="max-w-7xl mx-auto px-6">
<div class="grid lg:grid-cols-2 gap-16 items-center">
<div>
<p class="text-sm font-semibold text-slate-400 uppercase tracking-widest">About Us</p>
<h2 class="mt-3 text-3xl md:text-4xl font-bold text-slate-900 tracking-tight">Independent. Interdisciplinary. Since 1979.</h2>
<div class="mt-6 space-y-4 text-slate-600 leading-relaxed">
<p>Brückner + Partner was founded in 1979 in Rostock and has grown into one of the leading independent engineering firms in Northern Germany. With 180 employees across 12 offices, we combine local presence with regional expertise.</p>
<p>Our strength lies in our interdisciplinary approach: architects, civil engineers, environmental planners, and transport experts collaborate from the very beginning. This creates integrated solutions that unite technical excellence with economic efficiency and ecological responsibility.</p>
<p>We stand for long-term partnerships with our clients — municipalities, state authorities, and private investors. Quality, schedule reliability, and cost certainty are not just promises, but measurable results of our work.</p>
</div>
<div class="mt-8 flex items-center gap-6">
<div>
<div class="text-2xl font-bold text-slate-900">ISO 9001</div>
<div class="text-sm text-slate-500">Certified</div>
</div>
<div class="w-px h-10 bg-slate-200" aria-hidden="true"></div>
<div>
<div class="text-2xl font-bold text-slate-900">BIM</div>
<div class="text-sm text-slate-500">Level 2 capable</div>
</div>
<div class="w-px h-10 bg-slate-200" aria-hidden="true"></div>
<div>
<div class="text-2xl font-bold text-slate-900">DGNB</div>
<div class="text-sm text-slate-500">Auditor</div>
</div>
</div>
</div>
<div class="aspect-[4/3] bg-slate-100 rounded-lg">
<div class="w-full h-full bg-gradient-to-br from-slate-200 to-slate-100 rounded-lg flex items-center justify-center">
<span class="text-sm text-slate-400">Office / Team / Project</span>
</div>
</div>
</div>
</div>
</section>
<!-- Careers -->
<section id="karriere" class="ws-cta py-20 md:py-28 bg-slate-900 text-white">
<div class="max-w-7xl mx-auto px-6">
<div class="max-w-2xl">
<p class="text-sm font-semibold text-slate-400 uppercase tracking-widest">Careers</p>
<h2 class="mt-3 text-3xl md:text-4xl font-bold tracking-tight">Shape the future with us.</h2>
<p class="mt-4 text-lg text-slate-400">Join a team that plans infrastructure built to last. We are looking for engineers and planners who want to take on responsibility.</p>
</div>
<div class="mt-14 space-y-0 divide-y divide-slate-700/50">
<a href="#" class="group flex flex-col md:flex-row md:items-center justify-between py-6 hover:bg-slate-800/50 -mx-4 px-4 rounded transition-colors">
<div>
<h3 class="text-lg font-semibold">Project Engineer — Civil Engineering</h3>
<p class="mt-1 text-sm text-slate-400">Planning and construction supervision in road and bridge construction</p>
</div>
<div class="mt-3 md:mt-0 flex items-center gap-4 text-sm text-slate-400">
<span>Rostock</span>
<span class="w-1 h-1 bg-slate-600 rounded-full" aria-hidden="true"></span>
<span>Full-time</span>
<svg class="w-4 h-4 text-slate-500 group-hover:text-white group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</div>
</a>
<a href="#" class="group flex flex-col md:flex-row md:items-center justify-between py-6 hover:bg-slate-800/50 -mx-4 px-4 rounded transition-colors">
<div>
<h3 class="text-lg font-semibold">Civil Engineer — Water Management</h3>
<p class="mt-1 text-sm text-slate-400">Flood protection and hydraulic modeling</p>
</div>
<div class="mt-3 md:mt-0 flex items-center gap-4 text-sm text-slate-400">
<span>Dresden</span>
<span class="w-1 h-1 bg-slate-600 rounded-full" aria-hidden="true"></span>
<span>Full-time</span>
<svg class="w-4 h-4 text-slate-500 group-hover:text-white group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</div>
</a>
<a href="#" class="group flex flex-col md:flex-row md:items-center justify-between py-6 hover:bg-slate-800/50 -mx-4 px-4 rounded transition-colors">
<div>
<h3 class="text-lg font-semibold">Technical Drafter / BIM Modeler</h3>
<p class="mt-1 text-sm text-slate-400">3D modeling and plan detailing in Revit and Civil 3D</p>
</div>
<div class="mt-3 md:mt-0 flex items-center gap-4 text-sm text-slate-400">
<span>Rostock</span>
<span class="w-1 h-1 bg-slate-600 rounded-full" aria-hidden="true"></span>
<span>Full-/Part-time</span>
<svg class="w-4 h-4 text-slate-500 group-hover:text-white group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</div>
</a>
</div>
<div class="mt-10">
<a href="#" class="inline-flex items-center gap-2 bg-white text-slate-900 text-sm font-medium px-6 py-3 rounded hover:bg-slate-100 transition-colors">
View all positions
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
</div>
</section>
<!-- Contact -->
<section id="kontakt" class="ws-contact py-20 md:py-28">
<div class="max-w-7xl mx-auto px-6">
<div class="grid lg:grid-cols-2 gap-16">
<div>
<p class="text-sm font-semibold text-slate-400 uppercase tracking-widest">Contact</p>
<h2 class="mt-3 text-3xl md:text-4xl font-bold text-slate-900 tracking-tight">Let's talk about your project.</h2>
<p class="mt-4 text-lg text-slate-500">Whether feasibility study, design planning, or construction supervision — we are happy to advise you without obligation.</p>
<div class="mt-10 space-y-6">
<div>
<h3 class="text-sm font-semibold text-slate-900 uppercase tracking-wider">Headquarters</h3>
<address class="mt-2 text-slate-600 not-italic leading-relaxed">
Brückner + Partner Ingenieurgesellschaft mbH<br />
Schweriner Str. 25<br />
18069 Rostock
</address>
</div>
<div class="flex flex-col gap-2">
<a href="tel:+4938112080" class="text-slate-600 hover:text-slate-900 transition-colors">+49 381 120 80-0</a>
<a href="mailto:info@brueckner-partner.de" class="text-slate-600 hover:text-slate-900 transition-colors">info@brueckner-partner.de</a>
</div>
</div>
<!-- Map placeholder -->
<div class="mt-8 aspect-[16/9] bg-slate-100 rounded-lg flex items-center justify-center">
<span class="text-sm text-slate-400">Map view</span>
</div>
</div>
<div>
<form class="space-y-6" aria-label="Contact form">
<div>
<label for="name" class="block text-sm font-medium text-slate-700">Name</label>
<input type="text" id="name" name="name" required autocomplete="name"
class="mt-1.5 block w-full rounded border border-slate-300 px-4 py-3 text-slate-900 placeholder-slate-400 focus:border-slate-500 focus:ring-1 focus:ring-slate-500 focus:outline-none transition-colors"
placeholder="Your full name" />
</div>
<div>
<label for="email" class="block text-sm font-medium text-slate-700">Email</label>
<input type="email" id="email" name="email" required autocomplete="email"
class="mt-1.5 block w-full rounded border border-slate-300 px-4 py-3 text-slate-900 placeholder-slate-400 focus:border-slate-500 focus:ring-1 focus:ring-slate-500 focus:outline-none transition-colors"
placeholder="your@email.com" />
</div>
<div>
<label for="subject" class="block text-sm font-medium text-slate-700">Subject</label>
<select id="subject" name="subject"
class="mt-1.5 block w-full rounded border border-slate-300 px-4 py-3 text-slate-900 focus:border-slate-500 focus:ring-1 focus:ring-slate-500 focus:outline-none transition-colors">
<option value="">Please select</option>
<option value="projekt">Project inquiry</option>
<option value="karriere">Job application</option>
<option value="allgemein">General inquiry</option>
</select>
</div>
<div>
<label for="message" class="block text-sm font-medium text-slate-700">Message</label>
<textarea id="message" name="message" rows="5" required
class="mt-1.5 block w-full rounded border border-slate-300 px-4 py-3 text-slate-900 placeholder-slate-400 focus:border-slate-500 focus:ring-1 focus:ring-slate-500 focus:outline-none transition-colors resize-none"
placeholder="Describe your request..."></textarea>
</div>
<button type="submit" class="w-full bg-slate-800 text-white text-sm font-medium px-6 py-3 rounded hover:bg-slate-700 transition-colors">
Send message
</button>
<p class="text-xs text-slate-400">By submitting, you agree to our <a href="#" class="underline hover:text-slate-600">Privacy Policy</a>.</p>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="ws-footer bg-slate-900 text-slate-400 py-16">
<div class="max-w-7xl mx-auto px-6">
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-10">
<div>
<div class="flex items-center gap-3">
<div class="w-8 h-8 bg-slate-700 rounded-sm flex items-center justify-center">
<span class="text-white text-xs font-bold leading-none">B+P</span>
</div>
<span class="text-base font-semibold text-white">Brückner + Partner</span>
</div>
<p class="mt-4 text-sm leading-relaxed">Ingenieurgesellschaft mbH<br />Plan. Build. Move.</p>
</div>
<div>
<h4 class="text-sm font-semibold text-white uppercase tracking-wider">Services</h4>
<ul class="mt-4 space-y-2 text-sm">
<li><a href="#kompetenzen" class="hover:text-white transition-colors">Structural Engineering</a></li>
<li><a href="#kompetenzen" class="hover:text-white transition-colors">Civil Engineering</a></li>
<li><a href="#kompetenzen" class="hover:text-white transition-colors">Water Management</a></li>
<li><a href="#kompetenzen" class="hover:text-white transition-colors">Energy Planning</a></li>
</ul>
</div>
<div>
<h4 class="text-sm font-semibold text-white uppercase tracking-wider">Company</h4>
<ul class="mt-4 space-y-2 text-sm">
<li><a href="#unternehmen" class="hover:text-white transition-colors">About Us</a></li>
<li><a href="#projekte" class="hover:text-white transition-colors">References</a></li>
<li><a href="#karriere" class="hover:text-white transition-colors">Careers</a></li>
<li><a href="#kontakt" class="hover:text-white transition-colors">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-sm font-semibold text-white uppercase tracking-wider">Offices</h4>
<ul class="mt-4 space-y-2 text-sm">
<li>Rostock (Headquarters)</li>
<li>Dresden</li>
<li>Berlin</li>
<li>Hamburg</li>
</ul>
</div>
</div>
<div class="mt-14 pt-8 border-t border-slate-800 flex flex-col md:flex-row justify-between items-center gap-4 text-sm">
<p>© 2026 Brückner + Partner Ingenieurgesellschaft mbH</p>
<ul class="flex items-center gap-6">
<li><a href="#" class="hover:text-white transition-colors">Legal Notice</a></li>
<li><a href="#" class="hover:text-white transition-colors">Privacy Policy</a></li>
<li><a href="#" class="hover:text-white transition-colors">Accessibility</a></li>
</ul>
</div>
</div>
</footer>
<script>
const toggle = document.getElementById('menu-toggle');
const menu = document.getElementById('mobile-menu');
toggle.addEventListener('click', () => {
const open = !menu.classList.contains('hidden');
menu.classList.toggle('hidden');
toggle.setAttribute('aria-expanded', String(!open));
});
document.querySelectorAll('#mobile-menu a').forEach(link => {
link.addEventListener('click', () => {
menu.classList.add('hidden');
toggle.setAttribute('aria-expanded', 'false');
});
});
</script>
</body>
</html>Corporate engineering firm template with German KMU sensibility. Understated design that lets expertise speak — inspired by firms like INROS LACKNER.