84b28d64f5
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
666 lines
29 KiB
HTML
666 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Patentonkel — Dein Onkel fürs Patent. Nur klüger.</title>
|
|
<meta name="description" content="KI-gestützte Patentberatung. Kein Anwalt, aber der klügste Onkel, den du je hattest.">
|
|
<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'>👓</text></svg>">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400;1,700&family=Space+Mono:wght@400;700&display=swap');
|
|
|
|
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
:root {
|
|
--cream: #faf6ee;
|
|
--cream-dark: #f0e9d8;
|
|
--warm: #d4a853;
|
|
--warm-light: #f0d68a;
|
|
--warm-dim: #a07d2e;
|
|
--brown: #5c4a28;
|
|
--brown-light: #8b7042;
|
|
--blue: #2b5ea7;
|
|
--blue-light: #4a7ec7;
|
|
--blue-dim: #1e4478;
|
|
--blue-pale: #e8eff8;
|
|
--text: #3a3225;
|
|
--text-dim: #7a7062;
|
|
--card-bg: #fff;
|
|
--card-border: #e6dcc8;
|
|
--surface: #f5efe3;
|
|
}
|
|
|
|
html { scroll-behavior: smooth; }
|
|
|
|
body {
|
|
font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
background: var(--cream);
|
|
color: var(--text);
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* === TEXTURE OVERLAY === */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
|
|
pointer-events: none;
|
|
z-index: 999;
|
|
}
|
|
|
|
/* === ONKEL ILLUSTRATION (SVG) === */
|
|
.onkel-svg {
|
|
display: block;
|
|
margin: 0 auto 2rem;
|
|
width: clamp(120px, 25vw, 180px);
|
|
height: auto;
|
|
filter: drop-shadow(0 8px 24px rgba(92, 74, 40, 0.15));
|
|
}
|
|
|
|
/* === HERO === */
|
|
.hero {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
padding: 3rem 2rem;
|
|
text-align: center;
|
|
background:
|
|
radial-gradient(ellipse 80% 50% at 50% 30%, rgba(212, 168, 83, 0.12) 0%, transparent 70%),
|
|
radial-gradient(ellipse 60% 40% at 80% 80%, rgba(43, 94, 167, 0.06) 0%, transparent 60%),
|
|
var(--cream);
|
|
}
|
|
|
|
/* Retro wallpaper pattern */
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background-image:
|
|
radial-gradient(circle at 25% 25%, rgba(212, 168, 83, 0.06) 2px, transparent 2px),
|
|
radial-gradient(circle at 75% 75%, rgba(212, 168, 83, 0.06) 2px, transparent 2px);
|
|
background-size: 40px 40px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 750px;
|
|
}
|
|
|
|
.brand {
|
|
font-size: clamp(2.8rem, 8vw, 5rem);
|
|
font-weight: 900;
|
|
color: var(--brown);
|
|
line-height: 1.1;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.brand-patent {
|
|
color: var(--blue);
|
|
}
|
|
|
|
.subline {
|
|
font-size: clamp(1.1rem, 3vw, 1.5rem);
|
|
color: var(--text-dim);
|
|
font-weight: 600;
|
|
margin-bottom: 2.5rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
.claim {
|
|
font-size: clamp(1rem, 2.5vw, 1.2rem);
|
|
color: var(--text);
|
|
max-width: 540px;
|
|
margin: 0 auto 3rem;
|
|
line-height: 1.8;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.claim strong {
|
|
color: var(--blue);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.hero-cta {
|
|
display: inline-block;
|
|
padding: 1rem 2.5rem;
|
|
background: var(--blue);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 50px;
|
|
font-family: 'Nunito', sans-serif;
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 16px rgba(43, 94, 167, 0.3);
|
|
}
|
|
|
|
.hero-cta:hover {
|
|
background: var(--blue-dim);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 24px rgba(43, 94, 167, 0.4);
|
|
}
|
|
|
|
.scroll-hint {
|
|
position: absolute;
|
|
bottom: 2rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: var(--text-dim);
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.scroll-hint .arrow {
|
|
width: 18px;
|
|
height: 18px;
|
|
border-right: 2px solid var(--warm-dim);
|
|
border-bottom: 2px solid var(--warm-dim);
|
|
transform: rotate(45deg);
|
|
animation: bob 2s ease infinite;
|
|
}
|
|
|
|
@keyframes bob {
|
|
0%, 100% { transform: rotate(45deg) translateY(0); }
|
|
50% { transform: rotate(45deg) translateY(5px); }
|
|
}
|
|
|
|
/* === BADGE === */
|
|
.badge {
|
|
display: inline-block;
|
|
background: var(--blue-pale);
|
|
color: var(--blue);
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
padding: 0.35rem 1rem;
|
|
border-radius: 50px;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
/* === SECTION COMMON === */
|
|
.section {
|
|
padding: 5rem 2rem;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.section-header {
|
|
text-align: center;
|
|
margin-bottom: 3.5rem;
|
|
}
|
|
|
|
.section-header h2 {
|
|
font-size: clamp(1.8rem, 4vw, 2.4rem);
|
|
font-weight: 800;
|
|
color: var(--brown);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.section-header p {
|
|
color: var(--text-dim);
|
|
font-size: 1.05rem;
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* === FEATURES === */
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.feature-card {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 16px;
|
|
padding: 2rem 1.75rem;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 32px rgba(92, 74, 40, 0.1);
|
|
}
|
|
|
|
.feature-card::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0; left: 0; right: 0;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, var(--warm), var(--blue));
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.feature-card:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: var(--surface);
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.feature-card h3 {
|
|
font-size: 1.15rem;
|
|
font-weight: 800;
|
|
color: var(--brown);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.feature-card p {
|
|
color: var(--text-dim);
|
|
font-size: 0.9rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* === ONKEL SAYS (Testimonial) === */
|
|
.onkel-says {
|
|
padding: 4rem 2rem;
|
|
background: var(--surface);
|
|
border-top: 1px solid var(--card-border);
|
|
border-bottom: 1px solid var(--card-border);
|
|
}
|
|
|
|
.onkel-says-inner {
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.quote-mark {
|
|
font-size: 4rem;
|
|
color: var(--warm);
|
|
line-height: 1;
|
|
font-family: Georgia, serif;
|
|
margin-bottom: -0.5rem;
|
|
}
|
|
|
|
.quote-text {
|
|
font-size: clamp(1.15rem, 2.5vw, 1.4rem);
|
|
font-style: italic;
|
|
color: var(--text);
|
|
line-height: 1.7;
|
|
margin-bottom: 1.25rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.quote-author {
|
|
font-size: 0.9rem;
|
|
color: var(--text-dim);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.quote-author strong {
|
|
color: var(--brown-light);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* === HOW IT WORKS === */
|
|
.steps {
|
|
counter-reset: step;
|
|
}
|
|
|
|
.step {
|
|
display: grid;
|
|
grid-template-columns: 4rem 1fr;
|
|
gap: 1.5rem;
|
|
padding: 1.5rem 0;
|
|
border-bottom: 1px solid var(--card-border);
|
|
align-items: start;
|
|
}
|
|
|
|
.step:first-child {
|
|
border-top: 1px solid var(--card-border);
|
|
}
|
|
|
|
.step-num {
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
background: var(--blue);
|
|
color: #fff;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 800;
|
|
font-size: 1.2rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.step h3 {
|
|
font-size: 1.1rem;
|
|
font-weight: 800;
|
|
color: var(--brown);
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
|
|
.step p {
|
|
color: var(--text-dim);
|
|
font-size: 0.9rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* === DISCLAIMER === */
|
|
.disclaimer {
|
|
max-width: 600px;
|
|
margin: 3rem auto 0;
|
|
text-align: center;
|
|
padding: 1.25rem 1.5rem;
|
|
background: var(--blue-pale);
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(43, 94, 167, 0.15);
|
|
}
|
|
|
|
.disclaimer p {
|
|
font-size: 0.85rem;
|
|
color: var(--blue-dim);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.disclaimer strong {
|
|
font-weight: 800;
|
|
}
|
|
|
|
/* === CTA === */
|
|
.cta {
|
|
padding: 5rem 2rem;
|
|
text-align: center;
|
|
background:
|
|
radial-gradient(ellipse 50% 50% at 50% 50%, rgba(43, 94, 167, 0.06) 0%, transparent 70%),
|
|
var(--cream);
|
|
}
|
|
|
|
.cta h2 {
|
|
font-size: clamp(2rem, 5vw, 2.8rem);
|
|
font-weight: 900;
|
|
color: var(--brown);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.cta h2 span { color: var(--blue); }
|
|
|
|
.cta p {
|
|
color: var(--text-dim);
|
|
margin-bottom: 2rem;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.cta-btn {
|
|
display: inline-block;
|
|
padding: 1rem 2.5rem;
|
|
background: var(--warm);
|
|
color: var(--brown);
|
|
border-radius: 50px;
|
|
font-family: 'Nunito', sans-serif;
|
|
font-size: 1.1rem;
|
|
font-weight: 800;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 16px rgba(212, 168, 83, 0.3);
|
|
}
|
|
|
|
.cta-btn:hover {
|
|
background: var(--warm-light);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 24px rgba(212, 168, 83, 0.4);
|
|
}
|
|
|
|
/* === FOOTER === */
|
|
footer {
|
|
padding: 2.5rem 2rem;
|
|
text-align: center;
|
|
background: var(--surface);
|
|
border-top: 1px solid var(--card-border);
|
|
}
|
|
|
|
.footer-brand {
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
color: var(--brown-light);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.footer-tagline {
|
|
font-size: 0.85rem;
|
|
color: var(--text-dim);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.footer-legal {
|
|
font-size: 0.75rem;
|
|
color: var(--text-dim);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.footer-legal a {
|
|
color: var(--text-dim);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* === RESPONSIVE === */
|
|
@media (max-width: 640px) {
|
|
.features-grid { grid-template-columns: 1fr; }
|
|
.step { grid-template-columns: 3rem 1fr; gap: 1rem; }
|
|
.step-num { width: 3rem; height: 3rem; font-size: 1rem; }
|
|
.hero { padding: 2rem 1.5rem; }
|
|
.section { padding: 3.5rem 1.5rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- HERO -->
|
|
<section class="hero">
|
|
<div class="hero-content">
|
|
<!-- Onkel Illustration -->
|
|
<svg class="onkel-svg" viewBox="0 0 200 220" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Armchair -->
|
|
<ellipse cx="100" cy="200" rx="75" ry="14" fill="#d4a853" opacity="0.2"/>
|
|
<path d="M40 145 Q40 120 55 115 L145 115 Q160 120 160 145 L160 190 Q160 200 150 200 L50 200 Q40 200 40 190 Z" fill="#8b7042" opacity="0.3"/>
|
|
<path d="M50 130 Q50 118 65 115 L135 115 Q150 118 150 130 L150 185 Q150 190 145 190 L55 190 Q50 190 50 185 Z" fill="#a08050" opacity="0.25"/>
|
|
<!-- Body (sweater) -->
|
|
<path d="M70 135 Q70 110 100 105 Q130 110 130 135 L130 175 L70 175 Z" fill="#2b5ea7"/>
|
|
<path d="M75 135 Q75 115 100 110 Q125 115 125 135 L125 170 L75 170 Z" fill="#3468b0" opacity="0.6"/>
|
|
<!-- Elbow patches -->
|
|
<ellipse cx="73" cy="145" rx="6" ry="10" fill="#8b7042" opacity="0.5"/>
|
|
<ellipse cx="127" cy="145" rx="6" ry="10" fill="#8b7042" opacity="0.5"/>
|
|
<!-- Head -->
|
|
<circle cx="100" cy="78" r="32" fill="#e8c99b"/>
|
|
<!-- Hair (messy professor) -->
|
|
<path d="M68 68 Q65 50 75 42 Q85 35 100 33 Q115 35 125 42 Q135 50 132 68" fill="#8a7060" opacity="0.8"/>
|
|
<path d="M68 65 Q62 55 70 45 Q80 38 100 36 Q120 38 130 45 Q138 55 132 65" fill="#9a8070"/>
|
|
<!-- Small tufts sticking up -->
|
|
<path d="M85 38 Q83 28 88 30" stroke="#9a8070" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<path d="M112 37 Q115 27 110 30" stroke="#9a8070" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<!-- Ears -->
|
|
<ellipse cx="68" cy="78" rx="5" ry="7" fill="#dbb88a"/>
|
|
<ellipse cx="132" cy="78" rx="5" ry="7" fill="#dbb88a"/>
|
|
<!-- Glasses -->
|
|
<circle cx="88" cy="76" r="12" fill="none" stroke="#5c4a28" stroke-width="2.5"/>
|
|
<circle cx="112" cy="76" r="12" fill="none" stroke="#5c4a28" stroke-width="2.5"/>
|
|
<line x1="100" y1="76" x2="100" y2="76" stroke="#5c4a28" stroke-width="2.5"/>
|
|
<path d="M99 75 L101 75" stroke="#5c4a28" stroke-width="2.5" stroke-linecap="round"/>
|
|
<line x1="76" y1="74" x2="68" y2="72" stroke="#5c4a28" stroke-width="2"/>
|
|
<line x1="124" y1="74" x2="132" y2="72" stroke="#5c4a28" stroke-width="2"/>
|
|
<!-- Eyes (friendly) -->
|
|
<circle cx="88" cy="76" r="3" fill="#5c4a28"/>
|
|
<circle cx="112" cy="76" r="3" fill="#5c4a28"/>
|
|
<circle cx="89.5" cy="74.5" r="1" fill="#fff"/>
|
|
<circle cx="113.5" cy="74.5" r="1" fill="#fff"/>
|
|
<!-- Friendly smile -->
|
|
<path d="M90 90 Q100 98 110 90" stroke="#5c4a28" stroke-width="2" fill="none" stroke-linecap="round"/>
|
|
<!-- Mustache -->
|
|
<path d="M88 86 Q94 84 100 86 Q106 84 112 86" stroke="#8a7060" stroke-width="2" fill="none" stroke-linecap="round"/>
|
|
<!-- Arms holding coffee/book -->
|
|
<path d="M70 140 Q55 150 52 165" stroke="#2b5ea7" stroke-width="10" fill="none" stroke-linecap="round"/>
|
|
<path d="M130 140 Q145 148 148 160" stroke="#2b5ea7" stroke-width="10" fill="none" stroke-linecap="round"/>
|
|
<!-- Hands -->
|
|
<circle cx="52" cy="167" r="6" fill="#e8c99b"/>
|
|
<circle cx="148" cy="162" r="6" fill="#e8c99b"/>
|
|
<!-- Coffee mug -->
|
|
<rect x="140" y="152" width="16" height="18" rx="3" fill="#d4a853"/>
|
|
<path d="M156 157 Q163 157 163 163 Q163 169 156 169" stroke="#d4a853" stroke-width="2" fill="none"/>
|
|
<!-- Steam -->
|
|
<path d="M145 150 Q143 143 147 138" stroke="#d4a853" stroke-width="1.5" fill="none" opacity="0.4" stroke-linecap="round"/>
|
|
<path d="M151 149 Q153 142 150 137" stroke="#d4a853" stroke-width="1.5" fill="none" opacity="0.3" stroke-linecap="round"/>
|
|
<!-- Book/document in left hand -->
|
|
<rect x="38" y="160" width="22" height="16" rx="2" fill="#fff" stroke="#card-border" stroke-width="1"/>
|
|
<line x1="42" y1="165" x2="56" y2="165" stroke="#2b5ea7" stroke-width="1" opacity="0.4"/>
|
|
<line x1="42" y1="168" x2="52" y2="168" stroke="#2b5ea7" stroke-width="1" opacity="0.4"/>
|
|
<line x1="42" y1="171" x2="54" y2="171" stroke="#2b5ea7" stroke-width="1" opacity="0.4"/>
|
|
<!-- Paragraph symbol on document -->
|
|
<text x="48" y="172" font-size="6" fill="#2b5ea7" font-weight="bold" text-anchor="middle" opacity="0.3">§</text>
|
|
</svg>
|
|
|
|
<span class="badge" data-de="KI-Patentberatung" data-en="AI Patent Consulting">KI-Patentberatung</span>
|
|
<h1 class="brand"><span class="brand-patent">Patent</span>onkel</h1>
|
|
<p class="subline" data-de="Dein Onkel fürs Patent. Nur klüger." data-en="Your uncle for patents. Just smarter.">Dein Onkel fürs Patent. Nur klüger.</p>
|
|
<p class="claim" data-de="Jeder hat diesen einen Onkel, der alles weiß. <strong>Patentonkel</strong> weiß alles über Patente &mdash; und erklärt es so, dass du es auch verstehst." data-en="Everyone has that one uncle who knows everything. <strong>Patentonkel</strong> knows everything about patents &mdash; and explains it so you understand it too.">
|
|
Jeder hat diesen einen Onkel, der alles weiß.
|
|
<strong>Patentonkel</strong> weiß alles über Patente —
|
|
und erklärt es so, dass du es auch verstehst.
|
|
</p>
|
|
<a href="#frag" class="hero-cta" data-de="Frag den Onkel" data-en="Ask the uncle">Frag den Onkel</a>
|
|
</div>
|
|
<div class="scroll-hint">
|
|
<span data-de="Mehr erfahren" data-en="Learn more">Mehr erfahren</span>
|
|
<div class="arrow"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FEATURES -->
|
|
<section class="section" id="features">
|
|
<div class="section-header">
|
|
<h2 data-de="Was der Onkel drauf hat" data-en="What the uncle knows">Was der Onkel drauf hat</h2>
|
|
<p data-de="Kein Anwalt. Aber verdammt nah dran am Wissen eines guten." data-en="Not a lawyer. But damn close to the knowledge of a good one.">Kein Anwalt. Aber verdammt nah dran am Wissen eines guten.</p>
|
|
</div>
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🔎</div>
|
|
<h3 data-de="Patentrecherche" data-en="Patent Research">Patentrecherche</h3>
|
|
<p data-de="Stand der Technik finden, bevor es das Patentamt tut. Der Onkel kennt die Datenbanken und weiß, wo man suchen muss." data-en="Find prior art before the patent office does. The uncle knows the databases and where to search.">Stand der Technik finden, bevor es das Patentamt tut. Der Onkel kennt die Datenbanken und weiß, wo man suchen muss.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">📑</div>
|
|
<h3 data-de="Anspruchsanalyse" data-en="Claim Analysis">Anspruchsanalyse</h3>
|
|
<p data-de="Patentansprüche lesen ist eine Kunst. Patentonkel zerlegt sie in verständliche Teile und zeigt, worauf es ankommt." data-en="Reading patent claims is an art. Patentonkel breaks them down into understandable parts and shows what matters.">Patentansprüche lesen ist eine Kunst. Patentonkel zerlegt sie in verständliche Teile und zeigt, worauf es ankommt.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🎨</div>
|
|
<h3 data-de="Stand der Technik" data-en="State of the Art">Stand der Technik</h3>
|
|
<p data-de="Was gab es schon? Was ist neu? Der Onkel durchforstet Prior Art und ordnet deine Erfindung ein." data-en="What already existed? What is new? The uncle searches through prior art and classifies your invention.">Was gab es schon? Was ist neu? Der Onkel durchforstet Prior Art und ordnet deine Erfindung ein.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">📅</div>
|
|
<h3 data-de="Fristenverwaltung" data-en="Deadline Management">Fristenverwaltung</h3>
|
|
<p data-de="Jahresgebühren, Einspruchsfristen, Prioritäten — der Onkel vergisst nichts. Du auch nicht mehr." data-en="Annual fees, opposition deadlines, priorities — the uncle forgets nothing. And neither will you.">Jahresgebühren, Einspruchsfristen, Prioritäten — der Onkel vergisst nichts. Du auch nicht mehr.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🇪🇺</div>
|
|
<h3 data-de="EP/UPC-Expertise" data-en="EP/UPC Expertise">EP/UPC-Expertise</h3>
|
|
<p data-de="Europäisches Patentrecht und das Einheitliche Patentgericht — der Onkel kennt sich aus, auch beim neuen System." data-en="European patent law and the Unified Patent Court — the uncle knows his way around, even with the new system.">Europäisches Patentrecht und das Einheitliche Patentgericht — der Onkel kennt sich aus, auch beim neuen System.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">💬</div>
|
|
<h3 data-de="Verständlich erklärt" data-en="Explained clearly">Verständlich erklärt</h3>
|
|
<p data-de="Patentrecht muss nicht kryptisch sein. Der Onkel erklärt alles so, wie man es am Küchentisch erklären würde." data-en="Patent law doesn't have to be cryptic. The uncle explains everything the way you'd explain it at the kitchen table.">Patentrecht muss nicht kryptisch sein. Der Onkel erklärt alles so, wie man es am Küchentisch erklären würde.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- TESTIMONIAL -->
|
|
<section class="onkel-says">
|
|
<div class="onkel-says-inner">
|
|
<div class="quote-mark">„</div>
|
|
<p class="quote-text" data-de="Mein Onkel Herbert konnte mir nie bei Patentansprüchen helfen. Patentonkel schon." data-en="My uncle Herbert could never help me with patent claims. Patentonkel could.">Mein Onkel Herbert konnte mir nie bei Patentansprüchen helfen. Patentonkel schon.</p>
|
|
<p class="quote-author" data-de="&mdash; <strong>Erfundener Neffe</strong>, zufriedener Tüftler" data-en="&mdash; <strong>Fictional Nephew</strong>, satisfied tinkerer">— <strong>Erfundener Neffe</strong>, zufriedener Tüftler</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- HOW IT WORKS -->
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<h2 data-de="So funktioniert's" data-en="How it works">So funktioniert's</h2>
|
|
<p data-de="Drei Schritte zum Patentwissen." data-en="Three steps to patent knowledge.">Drei Schritte zum Patentwissen.</p>
|
|
</div>
|
|
<div class="steps">
|
|
<div class="step">
|
|
<div class="step-num">1</div>
|
|
<div>
|
|
<h3 data-de="Frag einfach" data-en="Just ask">Frag einfach</h3>
|
|
<p data-de="Stell deine Patentfrage — egal wie grundlegend oder spezifisch. Der Onkel urteilt nicht." data-en="Ask your patent question — no matter how basic or specific. The uncle doesn't judge.">Stell deine Patentfrage — egal wie grundlegend oder spezifisch. Der Onkel urteilt nicht.</p>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-num">2</div>
|
|
<div>
|
|
<h3 data-de="Bekomm eine Antwort" data-en="Get an answer">Bekomm eine Antwort</h3>
|
|
<p data-de="Patentonkel recherchiert, analysiert und erklärt. Mit Quellen, Kontext und ohne Juristendeutsch." data-en="Patentonkel researches, analyzes and explains. With sources, context and without legal jargon.">Patentonkel recherchiert, analysiert und erklärt. Mit Quellen, Kontext und ohne Juristendeutsch.</p>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-num">3</div>
|
|
<div>
|
|
<h3 data-de="Versteh dein Patent" data-en="Understand your patent">Versteh dein Patent</h3>
|
|
<p data-de="Ob Anmeldestrategie, Anspruchsformulierung oder Einspruchsverfahren — du weißt, woran du bist." data-en="Whether filing strategy, claim drafting or opposition proceedings — you'll know where you stand.">Ob Anmeldestrategie, Anspruchsformulierung oder Einspruchsverfahren — du weißt, woran du bist.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="disclaimer">
|
|
<p data-de="<strong>Hinweis:</strong> Patentonkel gibt keine Rechtsberatung. Wir ersetzen keinen Patentanwalt &mdash; aber wir sorgen dafür, dass du gut vorbereitet zum Termin gehst." data-en="<strong>Note:</strong> Patentonkel does not provide legal advice. We don't replace a patent attorney &mdash; but we make sure you're well prepared for the appointment."><strong>Hinweis:</strong> Patentonkel gibt keine Rechtsberatung. Wir ersetzen keinen Patentanwalt — aber wir sorgen dafür, dass du gut vorbereitet zum Termin gehst.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="cta" id="frag">
|
|
<h2 data-de="Bereit? <span>Frag den Onkel.</span>" data-en="Ready? <span>Ask the uncle.</span>">Bereit? <span>Frag den Onkel.</span></h2>
|
|
<p data-de="Kein Anmeldeformular. Kein Kleingedrucktes. Einfach fragen." data-en="No registration form. No fine print. Just ask.">Kein Anmeldeformular. Kein Kleingedrucktes. Einfach fragen.</p>
|
|
<a href="mailto:patentonkel@msbls.de" class="cta-btn" data-de="Frag den Onkel" data-en="Ask the uncle">Frag den Onkel</a>
|
|
</section>
|
|
|
|
<!-- FOOTER -->
|
|
<footer>
|
|
<p class="footer-brand">Patentonkel</p>
|
|
<p class="footer-tagline" data-de="Familiär. Kompetent. KI." data-en="Familiar. Competent. AI.">Familiär. Kompetent. KI.</p>
|
|
<p class="footer-legal" data-de="&copy; 2026 &middot; Ein Projekt von Matthias Flexsiebels &middot; <a href="#" onclick="window.__impressum&&window.__impressum();return false;">Impressum</a>" data-en="&copy; 2026 &middot; A project by Matthias Flexsiebels &middot; <a href="#" onclick="window.__impressum&&window.__impressum();return false;">Impressum</a>">© 2026 · Ein Projekt von Matthias Flexsiebels · <a href="#" onclick="window.__impressum&&window.__impressum();return false;">Impressum</a></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>
|
|
</footer>
|
|
|
|
<script src="/shared/impressum.js"></script>
|
|
|
|
<script src="/shared/ai-disclosure.js" data-tone="playful"></script>
|
|
<script src="/shared/i18n.js"></script>
|
|
</body>
|
|
</html>
|