feat: initial mono-repo with 30 vanity domain sites

Scaffold complete repo structure:
- 28 static sites extracted from running containers on mlake
- 2 dynamic sites (dasbes.de, dumusst.com) marked for separate handling
- Template system with 6 templates (person-dark/light, product-dark, editorial, fun, minimal)
- Shared CSS (variables, responsive, animations, noise overlay)
- nginx config generator with multi-domain alias support
- Build script with Docker-based nginx validation
- add-site.sh helper for scaffolding new domains
- Dockerfile for single nginx:alpine container

Sites: clemensplassmann.de, danosi.de, deinesei.de, derkaiseristnackt.de,
elefantenhor.de, fragina.de, frenchkis.de, ichbinaufbali.de, ichbinaufbarley.de,
insain.de, julietensity.de, kainco.de (+keinco.de), kainstress.de, keinefreun.de,
knzlmgmt.de, kopffrai.de, legalais.de, machesdocheinfach.de, mai-otto.de
(+otto.flexsiebels.de, ottomatisch.de, ichbinotto.de), martinsiebels.de,
matthiasbreier.de, osterai.de, paragraphenraiter.de, schulfrai.de, smartin3.de,
sorgenfrai.de, vonschraitter.de, wartebitte.de

Refs: otto#341
This commit is contained in:
mAi
2026-03-29 13:20:27 +02:00
parent ec3e1e42f3
commit 6f5de542ab
78 changed files with 13471 additions and 1 deletions

573
sites/fragina.de/index.html Normal file
View File

@@ -0,0 +1,573 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ina Kamps — Knowledge Lawyer | IP, Marke, Green Claims</title>
<meta name="description" content="Ina Kamps — Knowledge Lawyer. Markenrecht, Green Claims, Nachhaltigkeit und IP an der Schnittstelle von Recht und Innovation.">
<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'>I</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: #a78bfa;
--accent-glow: rgba(167, 139, 250, 0.15);
--accent-subtle: rgba(167, 139, 250, 0.08);
--green: #34d399;
--green-glow: rgba(52, 211, 153, 0.12);
}
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;
}
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;
}
.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 .ai { color: var(--accent); font-weight: 700; }
nav a { color: var(--text-dim); text-decoration: none; font-size: 0.85rem; 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(--green);
border-radius: 50%;
margin-right: 8px;
box-shadow: 0 0 8px var(--green-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);
}
h1 {
font-size: clamp(2.6rem, 6vw, 4rem);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1.1;
margin-bottom: 16px;
}
.ai { color: var(--accent); }
.hero-subtitle {
font-size: 1.15rem;
color: var(--text-dim);
max-width: 580px;
margin: 0 auto 20px;
line-height: 1.7;
font-weight: 300;
}
.hero-subtitle strong { color: var(--text); font-weight: 500; }
.hero-tags {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 48px;
}
.tag {
padding: 4px 14px;
border: 1px solid var(--border);
border-radius: 100px;
font-size: 0.72rem;
font-weight: 500;
color: var(--text-muted);
background: var(--bg-elevated);
letter-spacing: 0.02em;
}
.tag.green { color: var(--green); border-color: rgba(52, 211, 153, 0.2); }
.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);
}
/* Sections */
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 { height: 1px; background: var(--border); max-width: 860px; margin: 0 auto; }
/* Expertise */
.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-card.highlight {
border-color: rgba(52, 211, 153, 0.2);
background: linear-gradient(135deg, var(--bg-card) 0%, rgba(52, 211, 153, 0.03) 100%);
}
.expertise-card.highlight:hover {
border-color: rgba(52, 211, 153, 0.35);
}
.expertise-icon {
width: 40px; height: 40px;
border-radius: 10px;
background: var(--accent-subtle);
border: 1px solid rgba(167, 139, 250, 0.15);
display: flex; align-items: center; justify-content: center;
margin-bottom: 20px;
font-size: 0.85rem; font-weight: 600; color: var(--accent);
}
.expertise-card.highlight .expertise-icon {
background: var(--green-glow);
border-color: rgba(52, 211, 153, 0.2);
color: var(--green);
}
.expertise-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 8px; }
.expertise-card.highlight h3 { color: var(--green); }
.expertise-card p {
color: var(--text-dim); font-size: 0.86rem;
line-height: 1.6; font-weight: 300;
}
/* Profile */
.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; }
/* Publications */
.pub-list { display: flex; flex-direction: column; gap: 14px; }
.pub-item {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 24px 28px;
transition: border-color 0.3s;
}
.pub-item:hover { border-color: #2a2a35; }
.pub-year {
font-size: 0.65rem; font-weight: 600;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--accent); margin-bottom: 6px;
}
.pub-title { font-size: 0.95rem; font-weight: 500; margin-bottom: 4px; }
.pub-source { font-size: 0.82rem; color: var(--text-muted); font-weight: 300; }
/* CTA */
.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; }
footer a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
footer a:hover { color: var(--text-dim); }
@media (max-width: 768px) {
.expertise-grid { 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>
<div class="container">
<div class="logo">fr<span class="ai">AGI</span>na</div>
<a href="#kontakt">Kontakt</a>
</div>
</nav>
<section class="hero">
<div class="container">
<div class="monogram">IK</div>
<div class="hero-badge">
<span class="dot"></span>Knowledge Lawyer
</div>
<h1>Ina Kamps</h1>
<p class="hero-subtitle">
<strong>Knowledge Lawyer</strong> fuer IP und Markenrecht.
Spezialisiert auf <strong>Green Claims</strong>, nachhaltige Werbung
und die Frage, wo Greenwashing aufhoert und echte Kommunikation anfaengt.
</p>
<div class="hero-tags">
<span class="tag">Markenrecht</span>
<span class="tag green">Green Claims</span>
<span class="tag green">Nachhaltige Werbung</span>
<span class="tag">UWG</span>
<span class="tag">Legal Design</span>
<span class="tag">Metaverse & NFTs</span>
</div>
<div class="cta-group">
<a href="#kontakt" class="btn btn-primary">Kontakt aufnehmen</a>
<a href="#expertise" class="btn btn-ghost">Expertise</a>
</div>
</div>
</section>
<div class="divider"></div>
<section id="expertise">
<div class="container">
<div class="section-label">Schwerpunkte</div>
<h2>IP trifft Nachhaltigkeit.</h2>
<div class="section-desc">
Wo Markenrecht, Werbung und Sustainability zusammentreffen,
entsteht ein neues Rechtsgebiet. Ina Kamps gestaltet es mit.
</div>
<div class="expertise-grid">
<div class="expertise-card highlight">
<div class="expertise-icon">GC</div>
<h3>Green Claims</h3>
<p>
Wann ist „klimaneutral" erlaubt? Was fordert die Empco-Richtlinie?
Rechtssichere Nachhaltigkeitskommunikation ohne Greenwashing-Risiko.
</p>
</div>
<div class="expertise-card highlight">
<div class="expertise-icon">GW</div>
<h3>Green Advertising</h3>
<p>
BGH-Rechtsprechung zu Umweltclaims, EU Green Claims Directive,
Oeko-Labels und Offsetting — die neue Regulierungslandschaft.
</p>
</div>
<div class="expertise-card">
<div class="expertise-icon">MR</div>
<h3>Markenrecht</h3>
<p>
Markenstrategie, Anmeldung, Verteidigung. Schutz von Brands
im digitalen Raum — von E-Commerce bis Metaverse.
</p>
</div>
<div class="expertise-card">
<div class="expertise-icon">UW</div>
<h3>Wettbewerbsrecht</h3>
<p>
UWG, irreführende Werbung, vergleichende Werbung.
Durchsetzung und Abwehr wettbewerbsrechtlicher Ansprueche.
</p>
</div>
<div class="expertise-card">
<div class="expertise-icon">MV</div>
<h3>Metaverse & NFTs</h3>
<p>
Markenrecht im virtuellen Raum. NFT-Klassifizierung,
Web 4.0, digitale Markenstrategie der naechsten Generation.
</p>
</div>
<div class="expertise-card">
<div class="expertise-icon">LD</div>
<h3>Legal Design Thinking</h3>
<p>
Wissen nutzerzentriert aufbereiten. Innovative Formate
fuer Mandanteninformation und Wissenstransfer.
</p>
</div>
</div>
</div>
</section>
<div class="divider"></div>
<section id="profil">
<div class="container">
<div class="section-label">Profil</div>
<h2>Wissen. Weitergeben. Wirken.</h2>
<div class="profile-section">
<div class="profile-text">
<p>
Ina Kamps verbindet ueber 20 Jahre Erfahrung im gewerblichen
Rechtsschutz mit einem klaren Blick fuer die Themen, die morgen
zaehlen. Als Knowledge Lawyer arbeitet sie an der Schnittstelle
von Recht und Wissenstransfer — immer mit dem Ziel, komplexe
Zusammenhaenge so aufzubereiten, dass sie in der Praxis wirken.
</p>
<p>
Ihr Schwerpunkt: die rechtlichen Grenzen nachhaltiger Werbung.
Von der Empco-Richtlinie ueber das BGH-Urteil zu „klimaneutral"
bis zur EU Green Claims Directive — Ina Kamps kennt die
Regulierungslandschaft und uebersetzt sie in klare Handlungsempfehlungen.
</p>
<p>
Zusaetzlich lehrt sie an der Universitaet Osnabrueck und engagiert
sich in der GRUR und im Deutschen Juristinnenbund.
</p>
</div>
<div class="profile-details">
<div class="detail-card">
<div class="detail-label">Rolle</div>
<div class="detail-value">Knowledge Lawyer — IP & Marke</div>
</div>
<div class="detail-card">
<div class="detail-label">Standort</div>
<div class="detail-value">Duesseldorf</div>
</div>
<div class="detail-card">
<div class="detail-label">Ausbildung</div>
<div class="detail-value">Rechtsanwaeltin, M.A. Kommunikationswiss. & Politikwiss.</div>
</div>
<div class="detail-card">
<div class="detail-label">Lehre</div>
<div class="detail-value">Lehrbeauftragte, Universitaet Osnabrueck</div>
</div>
<div class="detail-card">
<div class="detail-label">Mitgliedschaften</div>
<div class="detail-value">GRUR, djb e.V.</div>
</div>
<div class="detail-card">
<div class="detail-label">Sprachen</div>
<div class="detail-value">Deutsch, Englisch</div>
</div>
</div>
</div>
</div>
</section>
<div class="divider"></div>
<section id="publikationen">
<div class="container">
<div class="section-label">Publikationen & Vortraege</div>
<h2>Stimme im Diskurs.</h2>
<div class="section-desc">
Regelmaessige Veroeffentlichungen und Vortraege zu Green Claims,
Markenrecht und der digitalen Transformation des IP-Rechts.
</div>
<div class="pub-list">
<div class="pub-item">
<div class="pub-year">2024</div>
<div class="pub-title">The EU's Plans for Green Claims: The Empco Directive</div>
<div class="pub-source">Lexology — Co-Autorin</div>
</div>
<div class="pub-item">
<div class="pub-year">2024</div>
<div class="pub-title">ESG Academy: Green Advertising — Wann ist Werbung mit Nachhaltigkeit verboten?</div>
<div class="pub-source">Vortrag — mit Dr. Wiebke Baars, Andreas Bauer</div>
</div>
<div class="pub-item">
<div class="pub-year">2024</div>
<div class="pub-title">BGH „klimaneutral"-Urteil: Neue Anforderungen an Umweltwerbung</div>
<div class="pub-source">ESG Connect Session — Vortrag</div>
</div>
<div class="pub-item">
<div class="pub-year">2023</div>
<div class="pub-title">More Guidance on Trade Marks and NFTs in the Metaverse</div>
<div class="pub-source">Lexology — Co-Autorin mit Dr. Christian Tenkhoff</div>
</div>
<div class="pub-item">
<div class="pub-year">2022 2023</div>
<div class="pub-title">Bits and Pieces from the Metaverse — Newsletter-Serie</div>
<div class="pub-source">Regelmaessige Ausgaben zu IP im virtuellen Raum</div>
</div>
</div>
</div>
</section>
<div class="divider"></div>
<section id="kontakt" class="cta-section">
<div class="container">
<div class="section-label">Kontakt</div>
<h2>Fragen? Fr<span class="ai">AG I</span>na.</h2>
<div class="section-desc">
Green Claims, Markenrecht, Nachhaltigkeit im IP —
sprechen wir darueber.
</div>
<div class="cta-group">
<a href="mailto:ina.kamps@hoganlovells.com" class="btn btn-primary">E-Mail schreiben</a>
</div>
</div>
</section>
<footer>
<div class="container">
<p>fr<span style="color: var(--accent);">AGI</span>na.de — Ina Kamps</p>
</div>
</footer>
</body>
</html>