m/onepager
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
84b28d64f56f9b9b76afa91c11992868057b295c
onepager/sites/vonschraitter.de/index.html
m 84b28d64f5 feat: AI/KI disclosure footer — shared/ai-disclosure.js + all 54 sites 
Self-injecting script following impressum.js pattern:
- data-tone attribute: playful | serious | minimal | none
- Reads document.documentElement.lang for KI (de) vs AI (en)
- MutationObserver on lang attr for i18n toggle compat
- All tones link to msbls.de/ki
- Injected into all 54 custom sites with data-tone="playful"
- Template infra: base.html includes script, render.sh reads disclosure.tone
- disclosure.tone added to 3 example site.yaml files

Implements m/onepager#2
2026-04-01 13:26:04 +02:00

693 lines
22 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Florian von Schreitter — Kartellrecht</title>
<meta name="description" content="Florian von Schreitter — Kartellrechtsspezialist bei Hogan Lovells. Fusionskontrolle, Kartellverfahren, Compliance.">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>F</text></svg>">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg: #0a0a0c;
--bg-elevated: #111115;
--bg-card: #16161b;
--border: #1e1e26;
--text: #e8e8ed;
--text-dim: #6e6e7a;
--text-muted: #44444f;
--accent: #c9a84c;
--accent-glow: rgba(201, 168, 76, 0.15);
--accent-subtle: rgba(201, 168, 76, 0.08);
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* --- Grain overlay --- */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 9999;
}
/* --- Layout --- */
.container {
max-width: 860px;
margin: 0 auto;
padding: 0 24px;
}
/* --- Nav --- */
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
padding: 20px 0;
background: rgba(10, 10, 12, 0.8);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
}
nav .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.1rem;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text);
}
.logo .accent {
color: var(--accent);
}
nav a {
color: var(--text-dim);
text-decoration: none;
font-size: 0.85rem;
font-weight: 400;
transition: color 0.2s;
}
nav a:hover {
color: var(--text);
}
/* --- Hero --- */
.hero {
padding: 180px 0 120px;
text-align: center;
position: relative;
}
.hero::before {
content: '';
position: absolute;
top: 80px;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 400px;
background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%);
pointer-events: none;
}
.hero-badge {
display: inline-block;
padding: 6px 16px;
border: 1px solid var(--border);
border-radius: 100px;
font-size: 0.75rem;
font-weight: 500;
color: var(--text-dim);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 32px;
background: var(--bg-elevated);
}
.hero-badge .dot {
display: inline-block;
width: 6px;
height: 6px;
background: var(--accent);
border-radius: 50%;
margin-right: 8px;
box-shadow: 0 0 8px var(--accent-glow);
position: relative;
top: -1px;
}
.monogram {
width: 96px;
height: 96px;
border-radius: 50%;
background: var(--bg-card);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 40px;
font-size: 1.6rem;
font-weight: 600;
color: var(--accent);
letter-spacing: 0.02em;
}
h1 {
font-size: clamp(2.6rem, 6vw, 4rem);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1.1;
margin-bottom: 16px;
position: relative;
}
.von {
font-weight: 300;
color: var(--text-dim);
}
.surname {
color: var(--accent);
}
.ai-swap {
display: inline-block;
position: relative;
color: var(--text);
font-weight: 700;
}
.ai-swap .letter {
display: inline-block;
color: var(--accent);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.ai-swap .letter.hidden {
opacity: 0;
transform: translateY(-8px);
position: absolute;
}
.ai-swap .letter.visible {
opacity: 1;
transform: translateY(0);
}
.hero-subtitle {
font-size: 1.2rem;
color: var(--text-dim);
max-width: 560px;
margin: 0 auto 48px;
line-height: 1.7;
font-weight: 300;
}
.hero-subtitle strong {
color: var(--text);
font-weight: 500;
}
.cta-group {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
border-radius: 10px;
font-size: 0.9rem;
font-weight: 500;
text-decoration: none;
transition: all 0.2s;
border: none;
cursor: pointer;
}
.btn-primary {
background: var(--accent);
color: #0a0a0c;
box-shadow: 0 0 30px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 0 50px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.15);
filter: brightness(1.1);
}
.btn-ghost {
background: transparent;
color: var(--text-dim);
border: 1px solid var(--border);
}
.btn-ghost:hover {
color: var(--text);
border-color: #2a2a35;
background: var(--bg-elevated);
}
/* --- Section shared --- */
section {
padding: 100px 0;
}
.section-label {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 16px;
}
h2 {
font-size: 1.8rem;
font-weight: 600;
letter-spacing: -0.03em;
margin-bottom: 16px;
}
.section-desc {
color: var(--text-dim);
font-size: 1rem;
max-width: 520px;
margin-bottom: 56px;
font-weight: 300;
line-height: 1.7;
}
/* --- Divider --- */
.divider {
height: 1px;
background: var(--border);
max-width: 860px;
margin: 0 auto;
}
/* --- Expertise grid --- */
.expertise-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.expertise-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 32px;
transition: border-color 0.3s, box-shadow 0.3s;
}
.expertise-card:hover {
border-color: #2a2a35;
box-shadow: 0 8px 40px rgba(0,0,0,0.3);
}
.expertise-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--accent-subtle);
border: 1px solid rgba(201, 168, 76, 0.15);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
font-size: 1.1rem;
}
.expertise-card h3 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 8px;
letter-spacing: -0.01em;
}
.expertise-card p {
color: var(--text-dim);
font-size: 0.86rem;
line-height: 1.6;
font-weight: 300;
}
/* --- Stats --- */
.stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 56px;
}
.stat {
text-align: center;
padding: 32px 16px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 14px;
}
.stat-number {
font-size: 2.4rem;
font-weight: 700;
color: var(--accent);
letter-spacing: -0.04em;
line-height: 1;
margin-bottom: 8px;
}
.stat-label {
font-size: 0.78rem;
color: var(--text-dim);
font-weight: 400;
letter-spacing: 0.02em;
}
/* --- Profile section --- */
.profile-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
.profile-text p {
color: var(--text-dim);
font-size: 0.95rem;
line-height: 1.8;
font-weight: 300;
margin-bottom: 20px;
}
.profile-text p:last-child {
margin-bottom: 0;
}
.profile-details {
display: flex;
flex-direction: column;
gap: 14px;
}
.detail-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px 24px;
}
.detail-label {
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 6px;
}
.detail-value {
font-size: 0.9rem;
color: var(--text-dim);
font-weight: 300;
}
/* --- CTA Section --- */
.cta-section {
text-align: center;
padding: 80px 0 120px;
}
.cta-section h2 {
margin-bottom: 12px;
}
.cta-section .section-desc {
margin: 0 auto 40px;
}
/* --- Footer --- */
footer {
padding: 40px 0;
text-align: center;
border-top: 1px solid var(--border);
}
footer p {
color: var(--text-muted);
font-size: 0.75rem;
font-weight: 400;
}
footer a {
color: var(--text-muted);
text-decoration: none;
transition: color 0.2s;
}
footer a:hover {
color: var(--text-dim);
}
/* --- Responsive --- */
@media (max-width: 768px) {
.expertise-grid {
grid-template-columns: 1fr;
}
.stats {
grid-template-columns: 1fr;
}
.profile-section {
grid-template-columns: 1fr;
gap: 32px;
}
}
@media (max-width: 640px) {
.hero {
padding: 140px 0 80px;
}
section {
padding: 64px 0;
}
.monogram {
width: 76px;
height: 76px;
font-size: 1.3rem;
margin-bottom: 32px;
}
}
</style>
</head>
<body>
<!-- Nav -->
<nav>
<div class="container">
<div class="logo">von<span class="accent">Schr</span>eitter</div>
<a href="#kontakt" data-de="Kontakt" data-en="Contact">Kontakt</a>
</div>
</nav>
<!-- Hero -->
<section class="hero">
<div class="container">
<div class="monogram">FvS</div>
<div class="hero-badge">
<span class="dot"></span><span data-de="Hogan Lovells" data-en="Hogan Lovells">Hogan Lovells</span>
</div>
<h1>Florian <span class="von">von</span><br>Schr<span class="ai-swap"><span class="letter visible" id="letterA">A</span><span class="letter hidden" id="letterE">E</span></span><span class="surname">I</span>tter</h1>
<p class="hero-subtitle" data-de="&lt;strong&gt;Kartellrecht&lt;/strong&gt; mit Weitblick. Fusionskontrolle, Kartellverfahren und Compliance-Strategien — fuer Unternehmen, die Maerkte gestalten." data-en="&lt;strong&gt;Competition law&lt;/strong&gt; with vision. Merger control, cartel proceedings and compliance strategies — for companies that shape markets.">
<strong>Kartellrecht</strong> mit Weitblick. Fusionskontrolle, Kartellverfahren
und Compliance-Strategien — fuer Unternehmen, die Maerkte gestalten.
</p>
<div class="cta-group">
<a href="#kontakt" class="btn btn-primary" data-de="Kontakt aufnehmen" data-en="Get in touch">Kontakt aufnehmen</a>
<a href="#expertise" class="btn btn-ghost" data-de="Expertise" data-en="Expertise">Expertise</a>
</div>
</div>
</section>
<div class="divider"></div>
<!-- Expertise -->
<section id="expertise">
<div class="container">
<div class="section-label" data-de="Schwerpunkte" data-en="Focus areas">Schwerpunkte</div>
<h2 data-de="Kartellrecht. Durchdacht." data-en="Competition law. Thoroughly considered.">Kartellrecht. Durchdacht.</h2>
<div class="section-desc" data-de="Von der strategischen Beratung bis zur Verteidigung vor den Behoerden — praeziese Arbeit in den Kernbereichen des Wettbewerbsrechts." data-en="From strategic advice to defense before authorities — precise work in the core areas of competition law.">
Von der strategischen Beratung bis zur Verteidigung vor den
Behoerden — praeziese Arbeit in den Kernbereichen des Wettbewerbsrechts.
</div>
<div class="expertise-grid">
<div class="expertise-card">
<div class="expertise-icon">FK</div>
<h3 data-de="Fusionskontrolle" data-en="Merger Control">Fusionskontrolle</h3>
<p data-de="Anmeldungen bei BKartA, EU-Kommission und international. Remedy-Strategien, Phase-II-Verfahren, Gun-Jumping-Praevention." data-en="Filings with BKartA, EU Commission and internationally. Remedy strategies, Phase-II proceedings, gun-jumping prevention.">
Anmeldungen bei BKartA, EU-Kommission und international.
Remedy-Strategien, Phase-II-Verfahren, Gun-Jumping-Praevention.
</p>
</div>
<div class="expertise-card">
<div class="expertise-icon">KV</div>
<h3 data-de="Kartellverfahren" data-en="Cartel Proceedings">Kartellverfahren</h3>
<p data-de="Verteidigung in Bussgeldverfahren. Kronzeugenantraege, Settlement-Verhandlungen, Zusammenarbeit mit Behoerden." data-en="Defense in fine proceedings. Leniency applications, settlement negotiations, cooperation with authorities.">
Verteidigung in Bussgeldverfahren. Kronzeugenantraege,
Settlement-Verhandlungen, Zusammenarbeit mit Behoerden.
</p>
</div>
<div class="expertise-card">
<div class="expertise-icon">CP</div>
<h3 data-de="Compliance" data-en="Compliance">Compliance</h3>
<p data-de="Aufbau und Audit von Kartell-Compliance-Programmen. Schulungen, interne Untersuchungen, Dawn-Raid-Readiness." data-en="Building and auditing cartel compliance programs. Training, internal investigations, dawn raid readiness.">
Aufbau und Audit von Kartell-Compliance-Programmen.
Schulungen, interne Untersuchungen, Dawn-Raid-Readiness.
</p>
</div>
<div class="expertise-card">
<div class="expertise-icon">VB</div>
<h3 data-de="Vertriebskartellrecht" data-en="Distribution Competition Law">Vertriebskartellrecht</h3>
<p data-de="Selektiver Vertrieb, Online-Marktplaetze, Preisbindung. Gestaltung kartellrechtskonformer Vertriebssysteme." data-en="Selective distribution, online marketplaces, resale price maintenance. Designing competition-compliant distribution systems.">
Selektiver Vertrieb, Online-Marktplaetze, Preisbindung.
Gestaltung kartellrechtskonformer Vertriebssysteme.
</p>
</div>
<div class="expertise-card">
<div class="expertise-icon">PE</div>
<h3 data-de="Private Enforcement" data-en="Private Enforcement">Private Enforcement</h3>
<p data-de="Kartellschadensersatzklagen. Anspruchsdurchsetzung und -abwehr nach deutschem und EU-Recht." data-en="Cartel damage claims. Enforcement and defense of claims under German and EU law.">
Kartellschadensersatzklagen. Anspruchsdurchsetzung
und -abwehr nach deutschem und EU-Recht.
</p>
</div>
<div class="expertise-card">
<div class="expertise-icon">DM</div>
<h3 data-de="Digitale Maerkte" data-en="Digital Markets">Digitale Maerkte</h3>
<p data-de="DMA, GWB-Digitalisierung, Plattformregulierung. Wettbewerbsfragen an der Schnittstelle von Tech und Recht." data-en="DMA, GWB digitalization, platform regulation. Competition issues at the intersection of tech and law.">
DMA, GWB-Digitalisierung, Plattformregulierung.
Wettbewerbsfragen an der Schnittstelle von Tech und Recht.
</p>
</div>
</div>
</div>
</section>
<div class="divider"></div>
<!-- Profile -->
<section id="profil">
<div class="container">
<div class="section-label" data-de="Profil" data-en="Profile">Profil</div>
<h2 data-de="Strategie trifft Praezision." data-en="Strategy meets precision.">Strategie trifft Praezision.</h2>
<div class="profile-section">
<div class="profile-text">
<p data-de="Florian von Schreitter beraet nationale und internationale Unternehmen in allen Fragen des deutschen und europaeischen Kartellrechts. Sein Schwerpunkt liegt auf komplexen Fusionskontrollverfahren und der Verteidigung in Kartellbussgeldverfahren." data-en="Florian von Schreitter advises national and international companies on all aspects of German and European competition law. His focus is on complex merger control proceedings and defense in cartel fine proceedings.">
Florian von Schreitter beraet nationale und internationale
Unternehmen in allen Fragen des deutschen und europaeischen
Kartellrechts. Sein Schwerpunkt liegt auf komplexen
Fusionskontrollverfahren und der Verteidigung in
Kartellbussgeldverfahren.
</p>
<p data-de="Als Rechtsanwalt bei Hogan Lovells verbindet er tiefes regulatorisches Verstaendnis mit strategischem Denken — fuer Loesungen, die wirtschaftlich tragfaehig und rechtlich belastbar sind." data-en="As an attorney at Hogan Lovells, he combines deep regulatory understanding with strategic thinking — for solutions that are economically viable and legally sound.">
Als Rechtsanwalt bei Hogan Lovells verbindet er tiefes
regulatorisches Verstaendnis mit strategischem Denken —
fuer Loesungen, die wirtschaftlich tragfaehig und
rechtlich belastbar sind.
</p>
</div>
<div class="profile-details">
<div class="detail-card">
<div class="detail-label" data-de="Kanzlei" data-en="Law firm">Kanzlei</div>
<div class="detail-value">Hogan Lovells International LLP</div>
</div>
<div class="detail-card">
<div class="detail-label" data-de="Praxisgruppe" data-en="Practice group">Praxisgruppe</div>
<div class="detail-value">Competition, Regulation &amp; Trade</div>
</div>
<div class="detail-card">
<div class="detail-label" data-de="Standort" data-en="Location">Standort</div>
<div class="detail-value" data-de="Duesseldorf, Deutschland" data-en="Dusseldorf, Germany">Duesseldorf, Deutschland</div>
</div>
<div class="detail-card">
<div class="detail-label" data-de="Zulassung" data-en="Bar admission">Zulassung</div>
<div class="detail-value" data-de="Rechtsanwalt (Deutschland)" data-en="Attorney-at-law (Germany)">Rechtsanwalt (Deutschland)</div>
</div>
<div class="detail-card">
<div class="detail-label" data-de="Sprachen" data-en="Languages">Sprachen</div>
<div class="detail-value" data-de="Deutsch, Englisch" data-en="German, English">Deutsch, Englisch</div>
</div>
</div>
</div>
</div>
</section>
<div class="divider"></div>
<!-- Contact CTA -->
<section id="kontakt" class="cta-section">
<div class="container">
<div class="section-label" data-de="Kontakt" data-en="Contact">Kontakt</div>
<h2 data-de="Sprechen wir darueber." data-en="Let's talk about it.">Sprechen wir darueber.</h2>
<div class="section-desc" data-de="Kartellrechtliche Fragen verdienen fruehzeitige, strategische Beratung. Nehmen Sie Kontakt auf." data-en="Competition law questions deserve early, strategic advice. Get in touch.">
Kartellrechtliche Fragen verdienen fruehzeitige, strategische Beratung.
Nehmen Sie Kontakt auf.
</div>
<div class="cta-group">
<a href="mailto:florian.vonschreitter@hoganlovells.com" class="btn btn-primary" data-de="E-Mail schreiben" data-en="Send email">E-Mail schreiben</a>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<p>vonschr<span style="color: var(--accent);">AI</span>tter.de — Florian von Schreitter</p>
<div style="text-align:center;margin-top:16px;">
<button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
<br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
</div>
</div>
</footer>
<script>
const a = document.getElementById('letterA');
const e = document.getElementById('letterE');
setInterval(() => {
a.classList.toggle('visible');
a.classList.toggle('hidden');
e.classList.toggle('visible');
e.classList.toggle('hidden');
}, 3000);
</script>
<script src="/shared/ai-disclosure.js" data-tone="playful"></script>
<script src="/shared/i18n.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink