company law-firm kanzlei rechtsanwalt german kmu legal professional elegant
Company Law Firm
Elegant German law firm website with practice areas, attorney profiles, legal news section, and appointment booking — trustworthy and professional.
elegant Responsive Vanilla JS
Live Preview
Sections
navbarheropractice-areasteamaboutnewscontactfooter
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>Hartmann & Kollegen — Attorneys at Law in Rostock</title>
<meta name="description" content="Your attorneys at law in Rostock. Expert counsel in employment law, family law, tenancy law, and more. Hartmann & Kollegen Law Firm." />
<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>
/* Brand tokens — formal navy/charcoal with amber-gold accent */
:root {
--ws-color-accent: oklch(0.52 0.12 55); /* amber-700 */
--ws-color-accent-hover: oklch(0.45 0.12 55); /* amber-800 */
--ws-color-accent-subtle: oklch(0.97 0.03 80); /* amber-50 */
--ws-color-surface: oklch(1 0 0);
--ws-color-surface-alt: oklch(0.97 0.01 60); /* stone-50 */
--ws-color-text: oklch(0.20 0.01 240); /* slate-900 */
--ws-color-text-muted: oklch(0.50 0.01 240); /* slate-600 */
}
body { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }
.font-serif { font-family: Georgia, 'Times New Roman', serif; }
/* interactions/underline-draw via nav-link */
.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px;
background-color: #b45309; transition: width 0.3s ease; }
.nav-link:hover::after { width: 100%; }
/* hover-lift snippet */
.hover-lift {
--lift-distance: -4px;
--lift-shadow: 0 8px 24px oklch(0 0 0 / 0.12);
--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; }
}
</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-6xl mx-auto flex items-center justify-between px-6 py-4">
<a href="#" class="flex items-center gap-2">
<span class="text-amber-700 text-2xl" aria-hidden="true">⚖</span>
<span class="font-serif text-xl text-slate-900 tracking-tight">Hartmann <span class="text-amber-700">&</span> Kollegen</span>
</a>
<ul class="hidden md:flex items-center gap-8 text-sm font-medium text-slate-600">
<li><a href="#kanzlei" class="nav-link hover:text-slate-900 transition-colors">Our Firm</a></li>
<li><a href="#rechtsgebiete" class="nav-link hover:text-slate-900 transition-colors">Practice Areas</a></li>
<li><a href="#team" class="nav-link hover:text-slate-900 transition-colors">Team</a></li>
<li><a href="#aktuelles" class="nav-link hover:text-slate-900 transition-colors">News</a></li>
<li><a href="#kontakt" class="nav-link hover:text-slate-900 transition-colors">Contact</a></li>
</ul>
<a href="#kontakt" class="hidden md:inline-flex items-center gap-2 bg-slate-800 text-white text-sm font-medium px-5 py-2.5 rounded hover:bg-amber-700 transition-colors">
Schedule Consultation
</a>
<button id="menu-toggle" class="md: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 md: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="#kanzlei" class="block py-1">Our Firm</a></li>
<li><a href="#rechtsgebiete" class="block py-1">Practice Areas</a></li>
<li><a href="#team" class="block py-1">Team</a></li>
<li><a href="#aktuelles" class="block py-1">News</a></li>
<li><a href="#kontakt" class="block py-1">Contact</a></li>
</ul>
<a href="#kontakt" class="mt-4 block text-center bg-slate-800 text-white text-sm font-medium px-5 py-2.5 rounded">
Schedule Consultation
</a>
</div>
</nav>
<!-- Hero -->
<section class="ws-hero pt-32 pb-20 md:pt-40 md:pb-28 bg-stone-50">
<div class="max-w-6xl mx-auto px-6 text-center">
<h1 class="font-serif text-4xl md:text-6xl lg:text-7xl text-slate-900 leading-tight tracking-tight">
Law. Clear.<br class="hidden sm:block" /> Understood.
</h1>
<p class="mt-6 text-lg md:text-xl text-slate-600 max-w-2xl mx-auto leading-relaxed">
Competent legal counsel with personal commitment. For over 20 years, we have represented your interests — reliably, discreetly, and on equal terms.
</p>
<div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#kontakt" class="inline-flex items-center gap-2 bg-amber-700 text-white font-medium px-8 py-3.5 rounded hover:bg-amber-800 transition-colors text-base">
Schedule Consultation
</a>
<a href="tel:+4938120354680" class="inline-flex items-center gap-2 text-slate-600 hover:text-slate-900 transition-colors text-base">
<svg class="w-5 h-5" 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.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"/>
</svg>
0381 / 203 546 80
</a>
</div>
</div>
</section>
<!-- Practice Areas -->
<section id="rechtsgebiete" class="ws-features py-20 md:py-28">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<p class="text-amber-700 font-medium text-sm tracking-widest uppercase mb-3">Our Focus Areas</p>
<h2 class="font-serif text-3xl md:text-4xl text-slate-900">Practice Areas</h2>
<p class="mt-4 text-slate-600 max-w-xl mx-auto">In these areas, we advise and represent you — with experience, diligence, and the necessary assertiveness.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="hover-lift border border-slate-150 rounded-lg p-7 hover:border-amber-200 hover:bg-amber-50/30 transition-colors">
<span class="text-2xl mb-4 block" aria-hidden="true">⚖</span>
<h3 class="font-serif text-lg text-slate-900 mb-2">Employment Law</h3>
<p class="text-sm text-slate-600 leading-relaxed">Wrongful dismissal protection, severance pay, employment contracts, and settlement agreements. We stand by both employees and employers.</p>
</div>
<div class="hover-lift border border-slate-150 rounded-lg p-7 hover:border-amber-200 hover:bg-amber-50/30 transition-colors">
<span class="text-2xl mb-4 block" aria-hidden="true">♡</span>
<h3 class="font-serif text-lg text-slate-900 mb-2">Family Law</h3>
<p class="text-sm text-slate-600 leading-relaxed">Divorce, custody, alimony, and division of assets. Sensitive matters require empathetic yet determined representation.</p>
</div>
<div class="hover-lift border border-slate-150 rounded-lg p-7 hover:border-amber-200 hover:bg-amber-50/30 transition-colors">
<span class="text-2xl mb-4 block" aria-hidden="true">⌂</span>
<h3 class="font-serif text-lg text-slate-900 mb-2">Tenancy Law</h3>
<p class="text-sm text-slate-600 leading-relaxed">Rent increases, utility bill disputes, terminations, and eviction claims — for tenants and landlords alike.</p>
</div>
<div class="hover-lift border border-slate-150 rounded-lg p-7 hover:border-amber-200 hover:bg-amber-50/30 transition-colors">
<span class="text-2xl mb-4 block" aria-hidden="true">🚗</span>
<h3 class="font-serif text-lg text-slate-900 mb-2">Traffic Law</h3>
<p class="text-sm text-slate-600 leading-relaxed">Accident claims, fine proceedings, license revocation. Quick assistance after traffic accidents and administrative offenses.</p>
</div>
<div class="hover-lift border border-slate-150 rounded-lg p-7 hover:border-amber-200 hover:bg-amber-50/30 transition-colors">
<span class="text-2xl mb-4 block" aria-hidden="true">📜</span>
<h3 class="font-serif text-lg text-slate-900 mb-2">Inheritance Law</h3>
<p class="text-sm text-slate-600 leading-relaxed">Will drafting, estate distribution, forced heirship claims. Taking precautions and settling estates — timely and legally sound.</p>
</div>
<div class="hover-lift border border-slate-150 rounded-lg p-7 hover:border-amber-200 hover:bg-amber-50/30 transition-colors">
<span class="text-2xl mb-4 block" aria-hidden="true">💼</span>
<h3 class="font-serif text-lg text-slate-900 mb-2">Commercial Law</h3>
<p class="text-sm text-slate-600 leading-relaxed">Partnership agreements, commercial register filings, distribution law, and commercial disputes. Counsel for small and medium enterprises.</p>
</div>
</div>
</div>
</section>
<!-- Team -->
<section id="team" class="ws-cards py-20 md:py-28 bg-stone-50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<p class="text-amber-700 font-medium text-sm tracking-widest uppercase mb-3">Your Contacts</p>
<h2 class="font-serif text-3xl md:text-4xl text-slate-900">Our Team</h2>
<p class="mt-4 text-slate-600 max-w-xl mx-auto">Experienced attorneys with a clear focus on your interests. Personal, accessible, dedicated.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Attorney 1 -->
<article class="bg-white rounded-lg overflow-hidden shadow-sm border border-slate-100">
<div class="aspect-[4/5] bg-slate-200 flex items-end justify-center">
<div class="w-full h-full bg-gradient-to-b from-slate-300 to-slate-400"></div>
</div>
<div class="p-6">
<h3 class="font-serif text-lg text-slate-900">Attorney Dr. Martin Hartmann</h3>
<p class="text-amber-700 text-sm font-medium mt-1">Employment Law · Commercial Law</p>
<p class="text-slate-600 text-sm mt-3 leading-relaxed">Founding partner of the firm. Over 25 years of experience representing employees and medium-sized enterprises.</p>
<a href="#" class="inline-flex items-center gap-1 text-amber-700 text-sm font-medium mt-4 hover:text-amber-800 transition-colors">
View profile
<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="M9 5l7 7-7 7"/></svg>
</a>
</div>
</article>
<!-- Attorney 2 -->
<article class="bg-white rounded-lg overflow-hidden shadow-sm border border-slate-100">
<div class="aspect-[4/5] bg-slate-200 flex items-end justify-center">
<div class="w-full h-full bg-gradient-to-b from-stone-300 to-stone-400"></div>
</div>
<div class="p-6">
<h3 class="font-serif text-lg text-slate-900">Attorney Katrin Bremer</h3>
<p class="text-amber-700 text-sm font-medium mt-1">Family Law · Inheritance Law</p>
<p class="text-slate-600 text-sm mt-3 leading-relaxed">Specialist attorney for family law. Known for her empathetic yet resolute client representation.</p>
<a href="#" class="inline-flex items-center gap-1 text-amber-700 text-sm font-medium mt-4 hover:text-amber-800 transition-colors">
View profile
<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="M9 5l7 7-7 7"/></svg>
</a>
</div>
</article>
<!-- Attorney 3 -->
<article class="bg-white rounded-lg overflow-hidden shadow-sm border border-slate-100">
<div class="aspect-[4/5] bg-slate-200 flex items-end justify-center">
<div class="w-full h-full bg-gradient-to-b from-zinc-300 to-zinc-400"></div>
</div>
<div class="p-6">
<h3 class="font-serif text-lg text-slate-900">Attorney Jens Petersen</h3>
<p class="text-amber-700 text-sm font-medium mt-1">Tenancy Law · Traffic Law</p>
<p class="text-slate-600 text-sm mt-3 leading-relaxed">With the firm since 2010. Specialized in tenancy and traffic law with a particular focus on out-of-court settlements.</p>
<a href="#" class="inline-flex items-center gap-1 text-amber-700 text-sm font-medium mt-4 hover:text-amber-800 transition-colors">
View profile
<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="M9 5l7 7-7 7"/></svg>
</a>
</div>
</article>
</div>
</div>
</section>
<!-- About the Firm -->
<section id="kanzlei" class="ws-blog py-20 md:py-28">
<div class="max-w-6xl mx-auto px-6">
<div class="grid md:grid-cols-2 gap-12 md:gap-16 items-center">
<div>
<p class="text-amber-700 font-medium text-sm tracking-widest uppercase mb-3">About Us</p>
<h2 class="font-serif text-3xl md:text-4xl text-slate-900 leading-snug">Client-focused,<br />dedicated, discreet.</h2>
<p class="mt-6 text-slate-600 leading-relaxed">
Since our founding in 2003, our firm has stood for personal attention and professional competence. We take time for your case, explain matters clearly, and fight for your rights — in court and at the negotiation table.
</p>
<p class="mt-4 text-slate-600 leading-relaxed">
As a mid-sized law firm in Rostock, we combine legal excellence with human closeness. Every client receives a dedicated contact, fast response times, and transparent cost information.
</p>
<ul class="mt-8 space-y-3">
<li class="flex items-start gap-3 text-slate-700">
<svg class="w-5 h-5 text-amber-700 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/></svg>
<span>Over 20 years of experience in Mecklenburg-Vorpommern</span>
</li>
<li class="flex items-start gap-3 text-slate-700">
<svg class="w-5 h-5 text-amber-700 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/></svg>
<span>Dedicated contact person for every client</span>
</li>
<li class="flex items-start gap-3 text-slate-700">
<svg class="w-5 h-5 text-amber-700 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/></svg>
<span>Transparent costs — no hidden fees</span>
</li>
<li class="flex items-start gap-3 text-slate-700">
<svg class="w-5 h-5 text-amber-700 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/></svg>
<span>Member of the Bar Association of Mecklenburg-Vorpommern</span>
</li>
</ul>
</div>
<div class="aspect-[4/3] bg-gradient-to-br from-slate-200 to-slate-300 rounded-lg" role="img" aria-label="Office premises of Hartmann & Kollegen law firm"></div>
</div>
</div>
</section>
<!-- News -->
<section id="aktuelles" class="ws-blog py-20 md:py-28 bg-stone-50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<p class="text-amber-700 font-medium text-sm tracking-widest uppercase mb-3">Legal Updates</p>
<h2 class="font-serif text-3xl md:text-4xl text-slate-900">News</h2>
<p class="mt-4 text-slate-600 max-w-xl mx-auto">Current developments, rulings, and practical tips from our daily practice.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<article class="bg-white rounded-lg overflow-hidden shadow-sm border border-slate-100">
<div class="aspect-[16/9] bg-gradient-to-br from-slate-100 to-slate-200"></div>
<div class="p-6">
<div class="flex items-center gap-3 text-xs text-slate-500 mb-3">
<time datetime="2026-03-15">March 15, 2026</time>
<span class="bg-amber-100 text-amber-800 px-2 py-0.5 rounded font-medium">Tenancy Law</span>
</div>
<h3 class="font-serif text-lg text-slate-900 mb-2">New Tenancy Law Regulations in 2026</h3>
<p class="text-sm text-slate-600 leading-relaxed">The rent control has been extended and tightened. What tenants and landlords need to know now — an overview of the most important changes.</p>
<a href="#" class="inline-flex items-center gap-1 text-amber-700 text-sm font-medium mt-4 hover:text-amber-800 transition-colors">
Read more
<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="M9 5l7 7-7 7"/></svg>
</a>
</div>
</article>
<article class="bg-white rounded-lg overflow-hidden shadow-sm border border-slate-100">
<div class="aspect-[16/9] bg-gradient-to-br from-stone-100 to-stone-200"></div>
<div class="p-6">
<div class="flex items-center gap-3 text-xs text-slate-500 mb-3">
<time datetime="2026-02-28">February 28, 2026</time>
<span class="bg-amber-100 text-amber-800 px-2 py-0.5 rounded font-medium">Employment Law</span>
</div>
<h3 class="font-serif text-lg text-slate-900 mb-2">Severance Pay Upon Dismissal — Your Rights</h3>
<p class="text-sm text-slate-600 leading-relaxed">When are you entitled to severance pay? How much should it be? We explain the legal foundations and provide practical recommendations.</p>
<a href="#" class="inline-flex items-center gap-1 text-amber-700 text-sm font-medium mt-4 hover:text-amber-800 transition-colors">
Read more
<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="M9 5l7 7-7 7"/></svg>
</a>
</div>
</article>
<article class="bg-white rounded-lg overflow-hidden shadow-sm border border-slate-100">
<div class="aspect-[16/9] bg-gradient-to-br from-zinc-100 to-zinc-200"></div>
<div class="p-6">
<div class="flex items-center gap-3 text-xs text-slate-500 mb-3">
<time datetime="2026-02-10">February 10, 2026</time>
<span class="bg-amber-100 text-amber-800 px-2 py-0.5 rounded font-medium">Inheritance Law</span>
</div>
<h3 class="font-serif text-lg text-slate-900 mb-2">How to Draft a Valid Will</h3>
<p class="text-sm text-slate-600 leading-relaxed">An invalid will can have serious consequences. Learn about the formal requirements and how to avoid disputes among heirs.</p>
<a href="#" class="inline-flex items-center gap-1 text-amber-700 text-sm font-medium mt-4 hover:text-amber-800 transition-colors">
Read more
<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="M9 5l7 7-7 7"/></svg>
</a>
</div>
</article>
</div>
</div>
</section>
<!-- Contact -->
<section id="kontakt" class="ws-contact py-20 md:py-28">
<div class="max-w-6xl mx-auto px-6">
<div class="grid md:grid-cols-2 gap-12 md:gap-16">
<div>
<p class="text-amber-700 font-medium text-sm tracking-widest uppercase mb-3">Contact</p>
<h2 class="font-serif text-3xl md:text-4xl text-slate-900 leading-snug">We are here<br />for you.</h2>
<p class="mt-6 text-slate-600 leading-relaxed">
Schedule an appointment for a personal initial consultation. We take time to understand your situation and give you an honest assessment.
</p>
<p class="mt-2 text-sm text-slate-500 italic">By appointment. Initial consultation also available via video call.</p>
<dl class="mt-8 space-y-5">
<div class="flex items-start gap-4">
<dt class="sr-only">Address</dt>
<svg class="w-5 h-5 text-amber-700 mt-1 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/>
</svg>
<dd class="text-slate-700">Kröpeliner Str. 42<br />18055 Rostock</dd>
</div>
<div class="flex items-start gap-4">
<dt class="sr-only">Phone</dt>
<svg class="w-5 h-5 text-amber-700 mt-1 shrink-0" 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.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"/>
</svg>
<dd><a href="tel:+4938120354680" class="text-slate-700 hover:text-amber-700 transition-colors">0381 / 203 546 80</a></dd>
</div>
<div class="flex items-start gap-4">
<dt class="sr-only">Email</dt>
<svg class="w-5 h-5 text-amber-700 mt-1 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/>
</svg>
<dd><a href="mailto:kanzlei@hartmann-kollegen.de" class="text-slate-700 hover:text-amber-700 transition-colors">kanzlei@hartmann-kollegen.de</a></dd>
</div>
<div class="flex items-start gap-4">
<dt class="sr-only">Office hours</dt>
<svg class="w-5 h-5 text-amber-700 mt-1 shrink-0" 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 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<dd class="text-slate-700">Mon – Fri: 9:00 AM – 6:00 PM<br /><span class="text-slate-500 text-sm">and by appointment</span></dd>
</div>
</dl>
<a href="#kontakt" class="inline-flex items-center gap-2 bg-amber-700 text-white font-medium px-8 py-3.5 rounded hover:bg-amber-800 transition-colors text-base mt-8">
Schedule Consultation
</a>
</div>
<div class="aspect-[4/3] bg-gradient-to-br from-slate-100 to-slate-200 rounded-lg flex items-center justify-center" role="img" aria-label="Location of the law firm on the map">
<span class="text-slate-400 text-sm">Map view</span>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="ws-footer bg-slate-900 text-slate-300 py-16">
<div class="max-w-6xl mx-auto px-6">
<div class="grid md:grid-cols-4 gap-10">
<div class="md:col-span-1">
<a href="#" class="flex items-center gap-2">
<span class="text-amber-500 text-xl" aria-hidden="true">⚖</span>
<span class="font-serif text-lg text-white">Hartmann & Kollegen</span>
</a>
<p class="mt-4 text-sm text-slate-400 leading-relaxed">Your attorneys at law in Rostock. Competent, personal, and dedicated since 2003.</p>
</div>
<div>
<h3 class="text-white font-medium text-sm mb-4">Practice Areas</h3>
<ul class="space-y-2 text-sm">
<li><a href="#rechtsgebiete" class="hover:text-white transition-colors">Employment Law</a></li>
<li><a href="#rechtsgebiete" class="hover:text-white transition-colors">Family Law</a></li>
<li><a href="#rechtsgebiete" class="hover:text-white transition-colors">Tenancy Law</a></li>
<li><a href="#rechtsgebiete" class="hover:text-white transition-colors">Traffic Law</a></li>
<li><a href="#rechtsgebiete" class="hover:text-white transition-colors">Inheritance Law</a></li>
<li><a href="#rechtsgebiete" class="hover:text-white transition-colors">Commercial Law</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-medium text-sm mb-4">Our Firm</h3>
<ul class="space-y-2 text-sm">
<li><a href="#kanzlei" class="hover:text-white transition-colors">About Us</a></li>
<li><a href="#team" class="hover:text-white transition-colors">Team</a></li>
<li><a href="#aktuelles" class="hover:text-white transition-colors">News</a></li>
<li><a href="#kontakt" class="hover:text-white transition-colors">Contact</a></li>
<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>
</ul>
</div>
<div>
<h3 class="text-white font-medium text-sm mb-4">Contact</h3>
<address class="not-italic text-sm space-y-2">
<p>Kröpeliner Str. 42</p>
<p>18055 Rostock</p>
<p class="mt-3"><a href="tel:+4938120354680" class="hover:text-white transition-colors">0381 / 203 546 80</a></p>
<p><a href="mailto:kanzlei@hartmann-kollegen.de" class="hover:text-white transition-colors">kanzlei@hartmann-kollegen.de</a></p>
</address>
</div>
</div>
<div class="mt-12 pt-8 border-t border-slate-800 flex flex-col md:flex-row items-center justify-between gap-4 text-xs text-slate-500">
<p>Member of the Bar Association of Mecklenburg-Vorpommern</p>
<p>© 2003 – 2026 Hartmann & Kollegen Law Firm. All rights reserved.</p>
</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));
toggle.setAttribute('aria-label', open ? 'Open menu' : 'Close menu');
});
menu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
menu.classList.add('hidden');
toggle.setAttribute('aria-expanded', 'false');
toggle.setAttribute('aria-label', 'Open menu');
});
});
</script>
</body>
</html>Elegant law firm template with navy-gold palette. Serif headlines and generous whitespace create an atmosphere of competence and discretion.