feat: add lexsiebels.de — Lex Siebels, Knowledge Lawyer onepager
Dark navy + gold accent design. Playfair Display + Inter typography. Sections: hero, profil, schwerpunkte (UPC, Patent, KM, Legal Tech), projekte (youpc.org, KanzlAI), footer with LinkedIn/youpc/flexsiebels links.
This commit is contained in:
m
554
sites/lexsiebels.de/index.html
Normal file
554
sites/lexsiebels.de/index.html
Normal file
@@ -0,0 +1,554 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lex Siebels — Knowledge Lawyer, Patent & UPC</title>
|
||||
<meta name="description" content="Matthias Siebels — Knowledge Lawyer bei Hogan Lovells. Patentrecht, Unified Patent Court, IP-Strategie, Legal Tech.">
|
||||
<meta property="og:title" content="Lex Siebels — Knowledge Lawyer, Patent & UPC">
|
||||
<meta property="og:description" content="Patentrecht. UPC. Legal Tech. — Die juristische Seite von Matthias Siebels.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://lexsiebels.de">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--navy: #1a1f36;
|
||||
--navy-light: #232847;
|
||||
--navy-dark: #12152a;
|
||||
--gold: #c8a46e;
|
||||
--gold-dim: rgba(200, 164, 110, 0.15);
|
||||
--gold-glow: rgba(200, 164, 110, 0.08);
|
||||
--text: #e0ddd5;
|
||||
--text-dim: #9a9689;
|
||||
--text-bright: #f5f3ee;
|
||||
--serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
|
||||
--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: var(--sans);
|
||||
background: var(--navy-dark);
|
||||
color: var(--text);
|
||||
line-height: 1.7;
|
||||
font-weight: 300;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* --- Decorative elements --- */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 80% 60% at 20% 10%, rgba(200,164,110,0.03) 0%, transparent 60%),
|
||||
radial-gradient(ellipse 60% 80% at 80% 90%, rgba(200,164,110,0.02) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* --- Hero --- */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60px;
|
||||
height: 1px;
|
||||
background: var(--gold);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.hero-label {
|
||||
font-family: var(--sans);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gold);
|
||||
margin-bottom: 2.5rem;
|
||||
opacity: 0;
|
||||
animation: fadeUp 0.8s ease 0.2s forwards;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-family: var(--serif);
|
||||
font-size: clamp(3rem, 8vw, 5.5rem);
|
||||
font-weight: 700;
|
||||
color: var(--text-bright);
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 1.5rem;
|
||||
opacity: 0;
|
||||
animation: fadeUp 0.8s ease 0.4s forwards;
|
||||
}
|
||||
|
||||
.hero h1 .lex {
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-family: var(--serif);
|
||||
font-size: clamp(1.1rem, 2.5vw, 1.4rem);
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.02em;
|
||||
opacity: 0;
|
||||
animation: fadeUp 0.8s ease 0.6s forwards;
|
||||
}
|
||||
|
||||
.hero-rule {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background: var(--gold);
|
||||
margin: 2rem auto;
|
||||
opacity: 0;
|
||||
animation: fadeUp 0.8s ease 0.7s forwards;
|
||||
}
|
||||
|
||||
.hero-tagline {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 400;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.08em;
|
||||
opacity: 0;
|
||||
animation: fadeUp 0.8s ease 0.8s forwards;
|
||||
}
|
||||
|
||||
/* --- Sections --- */
|
||||
section {
|
||||
padding: 5rem 0;
|
||||
}
|
||||
|
||||
.section-border {
|
||||
border-top: 1px solid rgba(200, 164, 110, 0.1);
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-family: var(--sans);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.25em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gold);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
font-family: var(--serif);
|
||||
font-size: clamp(1.6rem, 3.5vw, 2.2rem);
|
||||
font-weight: 600;
|
||||
color: var(--text-bright);
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.section-text {
|
||||
font-size: 1rem;
|
||||
color: var(--text);
|
||||
max-width: 640px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.section-text strong {
|
||||
color: var(--text-bright);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* --- Profil --- */
|
||||
.profil-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.profil-text {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.85;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.profil-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.profil-meta-item {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.profil-meta-item span {
|
||||
display: block;
|
||||
color: var(--text-bright);
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
/* --- Schwerpunkte --- */
|
||||
.focus-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.focus-card {
|
||||
background: var(--navy);
|
||||
border: 1px solid rgba(200, 164, 110, 0.08);
|
||||
border-radius: 4px;
|
||||
padding: 1.8rem;
|
||||
transition: border-color 0.3s ease, background 0.3s ease;
|
||||
}
|
||||
|
||||
.focus-card:hover {
|
||||
border-color: rgba(200, 164, 110, 0.25);
|
||||
background: var(--navy-light);
|
||||
}
|
||||
|
||||
.focus-card h3 {
|
||||
font-family: var(--serif);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-bright);
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.focus-card p {
|
||||
font-size: 0.88rem;
|
||||
color: var(--text-dim);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.focus-card .focus-tag {
|
||||
display: inline-block;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gold);
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
/* --- Projekte --- */
|
||||
.projects {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
align-items: flex-start;
|
||||
padding: 2rem;
|
||||
background: var(--navy);
|
||||
border: 1px solid rgba(200, 164, 110, 0.08);
|
||||
border-radius: 4px;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
border-color: rgba(200, 164, 110, 0.2);
|
||||
}
|
||||
|
||||
.project-icon {
|
||||
flex-shrink: 0;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: var(--gold-dim);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--serif);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.project-content h3 {
|
||||
font-family: var(--serif);
|
||||
font-size: 1.15rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-bright);
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.project-content h3 a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid rgba(200, 164, 110, 0.3);
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.project-content h3 a:hover {
|
||||
border-color: var(--gold);
|
||||
}
|
||||
|
||||
.project-content p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-dim);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.project-tag {
|
||||
display: inline-block;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gold);
|
||||
background: var(--gold-dim);
|
||||
padding: 0.2rem 0.6rem;
|
||||
border-radius: 2px;
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
|
||||
/* --- Footer --- */
|
||||
footer {
|
||||
padding: 4rem 0 3rem;
|
||||
border-top: 1px solid rgba(200, 164, 110, 0.08);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-dim);
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.06em;
|
||||
transition: color 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.footer-links a svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.disclaimer {
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-dim);
|
||||
opacity: 0.6;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* --- Animations --- */
|
||||
@keyframes fadeUp {
|
||||
from { opacity: 0; transform: translateY(16px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||||
}
|
||||
|
||||
.fade-in.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* --- Responsive --- */
|
||||
@media (max-width: 640px) {
|
||||
.focus-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 3rem 1.5rem;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 3.5rem 0;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="hero">
|
||||
<div class="hero-label">Matthias Siebels</div>
|
||||
<h1><span class="lex">Lex</span> Siebels</h1>
|
||||
<div class="hero-subtitle">Knowledge Lawyer — Patent & UPC</div>
|
||||
<div class="hero-rule"></div>
|
||||
<div class="hero-tagline">Hogan Lovells · Düsseldorf</div>
|
||||
</section>
|
||||
|
||||
<!-- Profil -->
|
||||
<section class="section-border fade-in">
|
||||
<div class="container">
|
||||
<div class="section-label">Profil</div>
|
||||
<div class="profil-grid">
|
||||
<div class="profil-text">
|
||||
<strong>Matthias Siebels</strong> ist Knowledge Lawyer bei <strong>Hogan Lovells</strong> in Düsseldorf.
|
||||
Er verbindet Patentrecht mit Technologie — von der systematischen Aufbereitung
|
||||
komplexer Verfahrensfragen am <strong>Unified Patent Court</strong> bis zum Einsatz von
|
||||
KI-Werkzeugen in der Kanzleipraxis.
|
||||
</div>
|
||||
<div class="profil-meta">
|
||||
<div class="profil-meta-item">Kanzlei<span>Hogan Lovells</span></div>
|
||||
<div class="profil-meta-item">Standort<span>Düsseldorf</span></div>
|
||||
<div class="profil-meta-item">Fokus<span>Patent & UPC</span></div>
|
||||
<div class="profil-meta-item">Rolle<span>Knowledge Lawyer</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Schwerpunkte -->
|
||||
<section class="section-border fade-in">
|
||||
<div class="container">
|
||||
<div class="section-label">Schwerpunkte</div>
|
||||
<div class="section-heading">Areas of Focus</div>
|
||||
<div class="focus-grid">
|
||||
<div class="focus-card">
|
||||
<div class="focus-tag">Litigation</div>
|
||||
<h3>UPC-Verfahrensrecht</h3>
|
||||
<p>Verfahrensführung und Prozessstrategie vor dem Einheitlichen Patentgericht. Rechtsprechungsanalyse und Praxisleitfäden.</p>
|
||||
</div>
|
||||
<div class="focus-card">
|
||||
<div class="focus-tag">IP</div>
|
||||
<h3>Patentstreitigkeiten</h3>
|
||||
<p>Patentverletzung und -verteidigung, Schutzbereitsbestimmung, Zwangslizenzverfahren. Nationale und europäische Verfahren.</p>
|
||||
</div>
|
||||
<div class="focus-card">
|
||||
<div class="focus-tag">Knowledge</div>
|
||||
<h3>Knowledge Management</h3>
|
||||
<p>Aufbau und Pflege juristischer Wissenssysteme. Systematische Erfassung von Rechtsprechung, Mustern und Best Practices.</p>
|
||||
</div>
|
||||
<div class="focus-card">
|
||||
<div class="focus-tag">Tech</div>
|
||||
<h3>Legal Tech</h3>
|
||||
<p>KI-gestützte Werkzeuge für die juristische Arbeit. Automatisierung, Recherche-Tools, Datenaufbereitung für Kanzleien.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Projekte -->
|
||||
<section class="section-border fade-in">
|
||||
<div class="container">
|
||||
<div class="section-label">Projekte</div>
|
||||
<div class="section-heading">Projects</div>
|
||||
<div class="projects">
|
||||
<div class="project-card">
|
||||
<div class="project-icon">U</div>
|
||||
<div class="project-content">
|
||||
<h3><a href="https://youpc.org" target="_blank" rel="noopener">youpc.org</a></h3>
|
||||
<p>Open-Source-Forschungsplattform zum Unified Patent Court. Rechtsprechungsdatenbank, Verfahrensanalysen und Statistiken — frei zugänglich für die IP-Community.</p>
|
||||
<span class="project-tag">UPC Research Platform</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-card">
|
||||
<div class="project-icon">K</div>
|
||||
<div class="project-content">
|
||||
<h3>KanzlAI</h3>
|
||||
<p>KI-Werkzeuge für Kanzleimanagement. Intelligente Dokumentenverarbeitung, Wissensextraktion und Prozessautomatisierung — speziell für den juristischen Workflow.</p>
|
||||
<span class="project-tag">AI for Law Firms</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-links">
|
||||
<a href="https://www.linkedin.com/in/matthias-siebels/" target="_blank" rel="noopener">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
|
||||
LinkedIn
|
||||
</a>
|
||||
<a href="https://youpc.org" target="_blank" rel="noopener">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
|
||||
youpc.org
|
||||
</a>
|
||||
<a href="https://flexsiebels.de" target="_blank" rel="noopener">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
|
||||
flexsiebels.de
|
||||
</a>
|
||||
</div>
|
||||
<div class="disclaimer">
|
||||
Dies ist eine persönliche Seite. Keine Rechtsberatung.
|
||||
— This is a personal page. No legal advice.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Intersection Observer for fade-in animations
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.15 });
|
||||
|
||||
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user