m/onepager
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add lexsiebels.de — Lex Siebels, Knowledge Lawyer onepager

Browse Source 
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
2026-03-30 14:40:37 +02:00
parent f8a3af4440
commit d141bdc8d0
2 changed files with 558 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

554
sites/lexsiebels.de/index.html Normal file
View 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 &mdash; Patent &amp; UPC</div>
<div class="hero-rule"></div>
<div class="hero-tagline">Hogan Lovells &middot; 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 &mdash; 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 &amp; 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 &mdash; 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 &mdash; 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.
&mdash; 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>

4
sites/lexsiebels.de/site.yaml Normal file
View File

@@ -0,0 +1,4 @@
domain: lexsiebels.de
template: custom
title: "Lex Siebels — Knowledge Lawyer, Patent & UPC"
description: "Matthias Siebels — Knowledge Lawyer bei Hogan Lovells. Patentrecht, Unified Patent Court, IP-Strategie, Legal Tech."