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
793 lines
29 KiB
HTML
793 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>KIlofant — KI so groß, dass der Boden wackelt</title>
|
|
<meta name="description" content="KIlofant — KI + Elefant. Verspielt, groß, unvergesslich. KI-Lösungen die man nicht vergisst.">
|
|
<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>">
|
|
<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=Baloo+2:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
*, *::before, *::after {
|
|
margin: 0; padding: 0; box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--elephant: #5B7B8A;
|
|
--elephant-dark: #3A5563;
|
|
--elephant-light: #8BAAB8;
|
|
--tusk: #F5E6C8;
|
|
--tusk-bright: #FFF3DC;
|
|
--savanna: #C8A84E;
|
|
--savanna-light: #E8D48E;
|
|
--ground: #D4A574;
|
|
--ground-dark: #8B6944;
|
|
--leaf: #6B8E4E;
|
|
--leaf-bright: #8DB86B;
|
|
--sky: #87CEEB;
|
|
--sky-deep: #5BA3C9;
|
|
--bg: #FBF7F0;
|
|
--bg-warm: #F5EDE0;
|
|
--text: #2A1F14;
|
|
--text-soft: #6B5D4F;
|
|
--accent: #E86F2E;
|
|
--accent-glow: rgba(232, 111, 46, 0.2);
|
|
}
|
|
|
|
html { scroll-behavior: smooth; }
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
overflow-x: hidden;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* === STAMPEDE ANIMATIONS === */
|
|
@keyframes stampede-shake {
|
|
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
|
10% { transform: translate(-4px, 2px) rotate(-0.5deg); }
|
|
20% { transform: translate(5px, -3px) rotate(0.8deg); }
|
|
30% { transform: translate(-6px, 4px) rotate(-1deg); }
|
|
40% { transform: translate(7px, -2px) rotate(1.2deg); }
|
|
50% { transform: translate(-5px, 3px) rotate(-0.7deg); }
|
|
60% { transform: translate(4px, -4px) rotate(0.9deg); }
|
|
70% { transform: translate(-3px, 2px) rotate(-0.5deg); }
|
|
80% { transform: translate(2px, -1px) rotate(0.3deg); }
|
|
90% { transform: translate(-1px, 1px) rotate(-0.1deg); }
|
|
}
|
|
|
|
@keyframes stampede-heavy {
|
|
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
|
8% { transform: translate(-10px, 6px) rotate(-2deg); }
|
|
16% { transform: translate(12px, -4px) rotate(2.5deg); }
|
|
24% { transform: translate(-14px, 8px) rotate(-3deg); }
|
|
32% { transform: translate(10px, -6px) rotate(2deg); }
|
|
40% { transform: translate(-8px, 4px) rotate(-1.5deg); }
|
|
50% { transform: translate(6px, -3px) rotate(1deg); }
|
|
60% { transform: translate(-4px, 2px) rotate(-0.5deg); }
|
|
75% { transform: translate(2px, -1px) rotate(0.3deg); }
|
|
90% { transform: translate(0, 0) rotate(0deg); }
|
|
}
|
|
|
|
@keyframes wobble-bounce {
|
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
20% { transform: translateY(-8px) rotate(-3deg); }
|
|
40% { transform: translateY(0) rotate(2deg); }
|
|
60% { transform: translateY(-4px) rotate(-1deg); }
|
|
80% { transform: translateY(0) rotate(0.5deg); }
|
|
}
|
|
|
|
@keyframes trunk-wave {
|
|
0%, 100% { transform: rotate(0deg); }
|
|
25% { transform: rotate(15deg); }
|
|
75% { transform: rotate(-10deg); }
|
|
}
|
|
|
|
@keyframes dust-puff {
|
|
0% { opacity: 0; transform: scale(0.5) translateY(0); }
|
|
30% { opacity: 0.6; }
|
|
100% { opacity: 0; transform: scale(3) translateY(-60px); }
|
|
}
|
|
|
|
@keyframes footstep-boom {
|
|
0% { transform: scale(0); opacity: 0; }
|
|
50% { transform: scale(1.3); opacity: 0.3; }
|
|
100% { transform: scale(2); opacity: 0; }
|
|
}
|
|
|
|
.rumbling .shake-it { animation: stampede-shake 1.5s ease-in-out; }
|
|
.rumbling .shake-heavy { animation: stampede-heavy 2s ease-in-out; }
|
|
.rumbling .wobble-it { animation: wobble-bounce 1.2s ease-in-out; }
|
|
|
|
/* === NAV === */
|
|
nav {
|
|
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
|
padding: 14px 0;
|
|
background: rgba(251, 247, 240, 0.92);
|
|
backdrop-filter: blur(16px);
|
|
border-bottom: 2px solid var(--tusk);
|
|
}
|
|
|
|
nav .inner {
|
|
max-width: 960px; margin: 0 auto; padding: 0 24px;
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
}
|
|
|
|
.logo {
|
|
font-family: 'Baloo 2', cursive;
|
|
font-size: 1.4rem; font-weight: 800;
|
|
color: var(--text);
|
|
}
|
|
|
|
.logo .ki { color: var(--accent); }
|
|
.logo .elephant-icon { font-size: 1.2em; margin-right: 4px; }
|
|
|
|
nav a {
|
|
color: var(--text-soft); text-decoration: none;
|
|
font-size: 0.85rem; font-weight: 500;
|
|
transition: color 0.2s;
|
|
}
|
|
nav a:hover { color: var(--accent); }
|
|
|
|
/* === HERO === */
|
|
.hero {
|
|
min-height: 100vh;
|
|
display: flex; flex-direction: column;
|
|
align-items: center; justify-content: center;
|
|
text-align: center; padding: 120px 24px 80px;
|
|
position: relative;
|
|
background:
|
|
radial-gradient(ellipse at 50% 80%, rgba(212, 165, 116, 0.25) 0%, transparent 60%),
|
|
radial-gradient(ellipse at 30% 30%, rgba(135, 206, 235, 0.15) 0%, transparent 50%),
|
|
var(--bg);
|
|
}
|
|
|
|
.hero-elephant {
|
|
font-size: clamp(7rem, 18vw, 14rem);
|
|
line-height: 1;
|
|
margin-bottom: 0.5rem;
|
|
filter: drop-shadow(0 12px 32px rgba(42, 31, 20, 0.15));
|
|
cursor: pointer;
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.hero-elephant:hover {
|
|
animation: trunk-wave 0.8s ease-in-out;
|
|
}
|
|
|
|
h1 {
|
|
font-family: 'Baloo 2', cursive;
|
|
font-size: clamp(3.5rem, 10vw, 7rem);
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
color: var(--text);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
h1 .ki {
|
|
color: var(--accent);
|
|
position: relative;
|
|
}
|
|
|
|
h1 .ki::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 4px; left: 0; right: 0;
|
|
height: 6px;
|
|
background: var(--accent-glow);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.tagline {
|
|
font-family: 'Baloo 2', cursive;
|
|
font-size: clamp(1.1rem, 2.5vw, 1.6rem);
|
|
color: var(--text-soft);
|
|
font-weight: 500;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.hero-desc {
|
|
font-size: 1rem;
|
|
color: var(--text-soft);
|
|
max-width: 480px;
|
|
margin: 0 auto 40px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.cta-group {
|
|
display: flex; gap: 14px;
|
|
justify-content: center; flex-wrap: wrap;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 14px 32px; border-radius: 60px;
|
|
font-family: 'Baloo 2', cursive;
|
|
font-size: 1rem; font-weight: 700;
|
|
text-decoration: none; border: none; cursor: pointer;
|
|
transition: all 0.25s;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--accent);
|
|
color: white;
|
|
box-shadow: 0 6px 24px var(--accent-glow);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px) scale(1.03);
|
|
box-shadow: 0 10px 36px rgba(232, 111, 46, 0.3);
|
|
}
|
|
|
|
.btn-ghost {
|
|
background: white;
|
|
color: var(--text);
|
|
border: 2px solid var(--tusk);
|
|
}
|
|
|
|
.btn-ghost:hover {
|
|
border-color: var(--elephant-light);
|
|
background: var(--tusk-bright);
|
|
}
|
|
|
|
/* Dust puffs */
|
|
.dust-zone {
|
|
position: absolute; bottom: 0; left: 0; right: 0;
|
|
height: 160px; pointer-events: none;
|
|
}
|
|
|
|
.dust {
|
|
position: absolute; bottom: 20px;
|
|
width: 20px; height: 20px;
|
|
background: var(--ground);
|
|
border-radius: 50%; opacity: 0;
|
|
}
|
|
|
|
.rumbling .dust { animation: dust-puff 1.8s ease-out forwards; }
|
|
.dust:nth-child(1) { left: 8%; animation-delay: 0s; }
|
|
.dust:nth-child(2) { left: 22%; animation-delay: 0.15s; width: 28px; height: 28px; }
|
|
.dust:nth-child(3) { left: 38%; animation-delay: 0.05s; width: 16px; height: 16px; }
|
|
.dust:nth-child(4) { left: 52%; animation-delay: 0.2s; }
|
|
.dust:nth-child(5) { left: 68%; animation-delay: 0.1s; width: 24px; height: 24px; }
|
|
.dust:nth-child(6) { left: 82%; animation-delay: 0.25s; width: 14px; height: 14px; }
|
|
.dust:nth-child(7) { left: 45%; animation-delay: 0.3s; width: 18px; height: 18px; }
|
|
|
|
/* Footstep ripples */
|
|
.footstep-ripple {
|
|
position: absolute; bottom: 0;
|
|
width: 40px; height: 40px;
|
|
border: 3px solid var(--ground);
|
|
border-radius: 50%; opacity: 0;
|
|
}
|
|
|
|
.rumbling .footstep-ripple { animation: footstep-boom 1.5s ease-out forwards; }
|
|
.footstep-ripple:nth-child(1) { left: 15%; animation-delay: 0s; }
|
|
.footstep-ripple:nth-child(2) { left: 50%; animation-delay: 0.3s; }
|
|
.footstep-ripple:nth-child(3) { left: 78%; animation-delay: 0.15s; }
|
|
|
|
/* === STAMPEDE BAR === */
|
|
.stampede-bar {
|
|
background: var(--elephant-dark);
|
|
padding: 12px 24px;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.stampede-scroll {
|
|
display: flex; gap: 48px;
|
|
animation: scroll-left 20s linear infinite;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@keyframes scroll-left {
|
|
0% { transform: translateX(0); }
|
|
100% { transform: translateX(-50%); }
|
|
}
|
|
|
|
.stampede-item {
|
|
font-family: 'Baloo 2', cursive;
|
|
font-size: 0.95rem; font-weight: 600;
|
|
color: var(--tusk);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.stampede-item .ki { color: var(--accent); }
|
|
|
|
/* === CONTAINER === */
|
|
.container {
|
|
max-width: 960px; margin: 0 auto; padding: 0 24px;
|
|
}
|
|
|
|
/* === SECTIONS === */
|
|
section { padding: 80px 0; }
|
|
|
|
.section-badge {
|
|
display: inline-block;
|
|
font-family: 'Baloo 2', cursive;
|
|
font-size: 0.8rem; font-weight: 700;
|
|
color: var(--accent);
|
|
background: var(--accent-glow);
|
|
padding: 4px 16px; border-radius: 40px;
|
|
margin-bottom: 16px;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
h2 {
|
|
font-family: 'Baloo 2', cursive;
|
|
font-size: clamp(2rem, 5vw, 2.8rem);
|
|
font-weight: 800;
|
|
margin-bottom: 12px;
|
|
color: var(--text);
|
|
}
|
|
|
|
.section-desc {
|
|
color: var(--text-soft);
|
|
font-size: 0.95rem;
|
|
max-width: 520px;
|
|
margin-bottom: 48px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* === FEATURE CARDS === */
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
.feature-card {
|
|
background: white;
|
|
border: 2px solid var(--tusk);
|
|
border-radius: 20px;
|
|
padding: 32px 24px;
|
|
text-align: center;
|
|
transition: all 0.3s;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.feature-card::after {
|
|
content: '';
|
|
position: absolute; top: 0; left: 0; right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, var(--accent), var(--savanna));
|
|
transform: scaleX(0);
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-4px);
|
|
border-color: var(--elephant-light);
|
|
box-shadow: 0 12px 40px rgba(42, 31, 20, 0.08);
|
|
}
|
|
|
|
.feature-card:hover::after { transform: scaleX(1); }
|
|
|
|
.feature-emoji {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 16px;
|
|
display: block;
|
|
}
|
|
|
|
.feature-card h3 {
|
|
font-family: 'Baloo 2', cursive;
|
|
font-size: 1.15rem; font-weight: 700;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.feature-card p {
|
|
color: var(--text-soft);
|
|
font-size: 0.84rem; line-height: 1.6;
|
|
}
|
|
|
|
/* === STAMPEDE FACTS === */
|
|
.facts-section {
|
|
background: var(--elephant-dark);
|
|
color: var(--tusk);
|
|
position: relative;
|
|
}
|
|
|
|
.facts-section h2 { color: var(--tusk-bright); }
|
|
.facts-section .section-badge {
|
|
background: rgba(232, 111, 46, 0.2);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.facts-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
.fact-card {
|
|
text-align: center;
|
|
padding: 28px 16px;
|
|
background: rgba(255,255,255,0.06);
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
}
|
|
|
|
.fact-emoji { font-size: 2rem; margin-bottom: 12px; }
|
|
|
|
.fact-number {
|
|
font-family: 'Baloo 2', cursive;
|
|
font-size: 2.4rem; font-weight: 800;
|
|
color: var(--accent);
|
|
line-height: 1;
|
|
}
|
|
|
|
.fact-unit {
|
|
font-family: 'Baloo 2', cursive;
|
|
font-size: 0.9rem;
|
|
color: var(--elephant-light);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.fact-desc {
|
|
font-size: 0.8rem;
|
|
color: var(--elephant-light);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* === PHILOSOPHY === */
|
|
.philosophy {
|
|
text-align: center;
|
|
padding: 100px 24px;
|
|
background:
|
|
radial-gradient(ellipse at 50% 50%, rgba(232, 111, 46, 0.06) 0%, transparent 60%),
|
|
var(--bg-warm);
|
|
}
|
|
|
|
.philosophy-text {
|
|
font-family: 'Baloo 2', cursive;
|
|
font-size: clamp(1.3rem, 3vw, 2rem);
|
|
font-weight: 600;
|
|
line-height: 1.8;
|
|
color: var(--text-soft);
|
|
max-width: 600px; margin: 0 auto;
|
|
}
|
|
|
|
.philosophy-text strong { color: var(--text); }
|
|
.philosophy-text .ki { color: var(--accent); font-weight: 800; }
|
|
|
|
/* === HERD SECTION === */
|
|
.herd-section {
|
|
background: var(--bg-warm);
|
|
text-align: center;
|
|
}
|
|
|
|
.herd-parade {
|
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
|
letter-spacing: 0.5rem;
|
|
margin: 24px 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.herd-text {
|
|
font-family: 'Baloo 2', cursive;
|
|
font-size: 1.1rem;
|
|
color: var(--text-soft);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* === STAMPEDE COUNTER === */
|
|
.counter-section {
|
|
background: var(--bg);
|
|
text-align: center;
|
|
padding: 60px 24px;
|
|
}
|
|
|
|
.counter-value {
|
|
font-family: 'Baloo 2', cursive;
|
|
font-size: clamp(4rem, 10vw, 7rem);
|
|
font-weight: 800;
|
|
color: var(--accent);
|
|
line-height: 1;
|
|
}
|
|
|
|
.counter-label {
|
|
font-family: 'Baloo 2', cursive;
|
|
font-size: 1rem; font-weight: 500;
|
|
color: var(--text-soft);
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* === CTA === */
|
|
.cta-section {
|
|
text-align: center;
|
|
padding: 80px 24px 120px;
|
|
background: var(--bg);
|
|
}
|
|
|
|
.cta-section h2 { margin-bottom: 12px; }
|
|
.cta-section .section-desc {
|
|
margin: 0 auto 40px;
|
|
}
|
|
|
|
/* === FOOTER === */
|
|
footer {
|
|
background: var(--elephant-dark);
|
|
color: var(--tusk);
|
|
text-align: center;
|
|
padding: 40px 24px;
|
|
}
|
|
|
|
.footer-elephants {
|
|
font-size: 1.8rem;
|
|
letter-spacing: 0.3rem;
|
|
margin-bottom: 16px;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.footer-text {
|
|
font-family: 'Baloo 2', cursive;
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.footer-copy {
|
|
font-size: 0.75rem;
|
|
opacity: 0.3;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.footer-copy a {
|
|
color: var(--tusk);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* === MOBILE === */
|
|
@media (max-width: 768px) {
|
|
.features-grid { grid-template-columns: 1fr; }
|
|
.facts-grid { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.hero { padding: 120px 20px 60px; }
|
|
section { padding: 60px 0; }
|
|
.feature-card { padding: 24px 20px; }
|
|
.facts-grid { grid-template-columns: 1fr 1fr; }
|
|
.herd-parade { letter-spacing: 0.2rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="page">
|
|
|
|
<nav>
|
|
<div class="inner">
|
|
<div class="logo shake-it">
|
|
<span class="elephant-icon">🐘</span>
|
|
<span class="ki">KI</span>lofant
|
|
</div>
|
|
<a href="#kontakt" data-de="Kontakt" data-en="Contact">Kontakt</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<section class="hero">
|
|
<div class="hero-elephant shake-heavy" id="hero-elephant" title="Klick mich!">🐘</div>
|
|
<h1 class="wobble-it"><span class="ki">KI</span>lofant</h1>
|
|
<p class="tagline shake-it" data-de="Groß denken. Größer machen." data-en="Think big. Make bigger.">Groß denken. Größer machen.</p>
|
|
<p class="hero-desc" data-de="KI-Lösungen, die man nicht übersieht. Nicht überhört. Und ganz bestimmt nicht vergisst." data-en="AI solutions you can't overlook. Can't ignore. And definitely won't forget.">
|
|
KI-Lösungen, die man nicht übersieht. Nicht überhört.
|
|
Und ganz bestimmt nicht vergisst.
|
|
</p>
|
|
<div class="cta-group">
|
|
<a href="#kontakt" class="btn btn-primary shake-it" data-de="Herde kontaktieren" data-en="Contact the herd">Herde kontaktieren</a>
|
|
<a href="#stampede" class="btn btn-ghost" data-de="Was wir stampfen" data-en="What we stomp">Was wir stampfen</a>
|
|
</div>
|
|
|
|
<div class="dust-zone">
|
|
<div class="dust"></div>
|
|
<div class="dust"></div>
|
|
<div class="dust"></div>
|
|
<div class="dust"></div>
|
|
<div class="dust"></div>
|
|
<div class="dust"></div>
|
|
<div class="dust"></div>
|
|
<div class="footstep-ripple"></div>
|
|
<div class="footstep-ripple"></div>
|
|
<div class="footstep-ripple"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="stampede-bar">
|
|
<div class="stampede-scroll" aria-hidden="true">
|
|
<span class="stampede-item"><span class="ki">KI</span>lofant stampft</span>
|
|
<span class="stampede-item">🐘 🐘 🐘</span>
|
|
<span class="stampede-item">Groß. Stark. Unvergesslich.</span>
|
|
<span class="stampede-item"><span class="ki">KI</span> die Eindruck macht</span>
|
|
<span class="stampede-item">🐘 🐘 🐘</span>
|
|
<span class="stampede-item">Die Herde kommt!</span>
|
|
<span class="stampede-item"><span class="ki">KI</span>lofant stampft</span>
|
|
<span class="stampede-item">🐘 🐘 🐘</span>
|
|
<span class="stampede-item">Groß. Stark. Unvergesslich.</span>
|
|
<span class="stampede-item"><span class="ki">KI</span> die Eindruck macht</span>
|
|
<span class="stampede-item">🐘 🐘 🐘</span>
|
|
<span class="stampede-item">Die Herde kommt!</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="philosophy">
|
|
<div class="container">
|
|
<p class="philosophy-text shake-it" data-de="Die meisten KI-Lösungen sind <strong>Mäuse</strong>.<br>Klein, schnell, leicht zu übersehen.<br>Unsere sind <span class="ki">KI</span>lofanten — <strong>groß, klug<br>und sie vergessen nie</strong>." data-en="Most AI solutions are <strong>mice</strong>.<br>Small, fast, easy to overlook.<br>Ours are <span class="ki">KI</span>lofants — <strong>large, smart<br>and they never forget</strong>.">
|
|
Die meisten KI-Lösungen sind <strong>Mäuse</strong>.<br>
|
|
Klein, schnell, leicht zu übersehen.<br>
|
|
Unsere sind <span class="ki">KI</span>lofanten — <strong>groß, klug<br>
|
|
und sie vergessen nie</strong>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<section id="stampede">
|
|
<div class="container">
|
|
<span class="section-badge" data-de="Was wir stampfen" data-en="What we stomp">Was wir stampfen</span>
|
|
<h2 class="wobble-it" data-de="Elefantenstarke KI" data-en="Elephant-strong AI">Elefantenstarke KI</h2>
|
|
<div class="section-desc" data-de="Sechs Tonnen pure KI-Power. Wir bringen die schweren Geschütze — und hinterlassen Eindruck, keine Verwüstung." data-en="Six tons of pure AI power. We bring the heavy artillery — and leave an impression, not a wasteland.">
|
|
Sechs Tonnen pure KI-Power. Wir bringen die schweren Geschütze —
|
|
und hinterlassen Eindruck, keine Verwüstung.
|
|
</div>
|
|
|
|
<div class="features-grid">
|
|
<div class="feature-card shake-it">
|
|
<span class="feature-emoji">🧠</span>
|
|
<h3 data-de="Elefantengedächtnis" data-en="Elephant Memory">Elefantengedächtnis</h3>
|
|
<p data-de="KI-Systeme die lernen, sich erinnern und immer schlauer werden. Wie ein Elefant — vergisst nie." data-en="AI systems that learn, remember and keep getting smarter. Like an elephant — never forgets.">KI-Systeme die lernen, sich erinnern und immer schlauer werden. Wie ein Elefant — vergisst nie.</p>
|
|
</div>
|
|
|
|
<div class="feature-card wobble-it">
|
|
<span class="feature-emoji">🦶</span>
|
|
<h3 data-de="Stampede-Strategie" data-en="Stampede Strategy">Stampede-Strategie</h3>
|
|
<p data-de="Kraftvolle KI-Implementierung die Wirkung zeigt. Kein zaghaftes Tasten — sondern ein koordinierter Vorstoß." data-en="Powerful AI implementation that shows results. No tentative tiptoeing — a coordinated charge.">Kraftvolle KI-Implementierung die Wirkung zeigt. Kein zaghaftes Tasten — sondern ein koordinierter Vorstoß.</p>
|
|
</div>
|
|
|
|
<div class="feature-card shake-it">
|
|
<span class="feature-emoji">🌿</span>
|
|
<h3 data-de="Herdenwissen" data-en="Herd Knowledge">Herdenwissen</h3>
|
|
<p data-de="Die Herde weiß mehr als das Individuum. Wir vernetzen Ihre Daten zu kollektiver Intelligenz." data-en="The herd knows more than the individual. We connect your data into collective intelligence.">Die Herde weiß mehr als das Individuum. Wir vernetzen Ihre Daten zu kollektiver Intelligenz.</p>
|
|
</div>
|
|
|
|
<div class="feature-card wobble-it">
|
|
<span class="feature-emoji">🛡️</span>
|
|
<h3 data-de="Dickhäuter-Sicherheit" data-en="Thick-skin Security">Dickhäuter-Sicherheit</h3>
|
|
<p data-de="Dicke Haut gegen Angriffe. Unsere KI-Lösungen sind robust, DSGVO-konform und standhaft." data-en="Thick skin against attacks. Our AI solutions are robust, GDPR-compliant and steadfast.">Dicke Haut gegen Angriffe. Unsere KI-Lösungen sind robust, DSGVO-konform und standhaft.</p>
|
|
</div>
|
|
|
|
<div class="feature-card shake-it">
|
|
<span class="feature-emoji">👶</span>
|
|
<h3 data-de="Kalb-Modus" data-en="Calf Mode">Kalb-Modus</h3>
|
|
<p data-de="Jede große Lösung fängt klein an. Prototypen in Tagen, Skalierung wenn die Herde bereit ist." data-en="Every big solution starts small. Prototypes in days, scaling when the herd is ready.">Jede große Lösung fängt klein an. Prototypen in Tagen, Skalierung wenn die Herde bereit ist.</p>
|
|
</div>
|
|
|
|
<div class="feature-card wobble-it">
|
|
<span class="feature-emoji">🎺</span>
|
|
<h3 data-de="Trompeten-Support" data-en="Trumpet Support">Trompeten-Support</h3>
|
|
<p data-de="Wenn es klemmt, hört man uns. Lauter Support, schnelle Reaktion, keine Warteschleifen." data-en="When things get stuck, you'll hear us. Loud support, fast response, no hold music.">Wenn es klemmt, hört man uns. Lauter Support, schnelle Reaktion, keine Warteschleifen.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="facts-section">
|
|
<div class="container">
|
|
<span class="section-badge" data-de="Unnützes KIlofantenwissen" data-en="Useless KIlofant facts">Unnützes KIlofantenwissen</span>
|
|
<h2 class="shake-heavy" data-de="Zahlen die stampfen" data-en="Numbers that stomp">Zahlen die stampfen</h2>
|
|
<div class="facts-grid">
|
|
<div class="fact-card wobble-it">
|
|
<div class="fact-emoji">⚖️</div>
|
|
<div class="fact-number">6.000</div>
|
|
<div class="fact-unit" data-de="kg Lösungskompetenz" data-en="kg solution competence">kg Lösungskompetenz</div>
|
|
<div class="fact-desc" data-de="So schwer wie ein ausgewachsener Bulle. So gewichtig wie unsere Ergebnisse." data-en="As heavy as a full-grown bull. As weighty as our results.">So schwer wie ein ausgewachsener Bulle. So gewichtig wie unsere Ergebnisse.</div>
|
|
</div>
|
|
<div class="fact-card shake-it">
|
|
<div class="fact-emoji">👂</div>
|
|
<div class="fact-number">32</div>
|
|
<div class="fact-unit" data-de="km Reichweite" data-en="km range">km Reichweite</div>
|
|
<div class="fact-desc" data-de="Elefanten hören Infraschall über 32 km. Wir hören Ihre Probleme noch weiter." data-en="Elephants hear infrasound over 32 km. We hear your problems even further.">Elefanten hören Infraschall über 32 km. Wir hören Ihre Probleme noch weiter.</div>
|
|
</div>
|
|
<div class="fact-card wobble-it">
|
|
<div class="fact-emoji">🧠</div>
|
|
<div class="fact-number">5</div>
|
|
<div class="fact-unit" data-de="kg Gehirnmasse" data-en="kg brain mass">kg Gehirnmasse</div>
|
|
<div class="fact-desc" data-de="Größtes Gehirn aller Landtiere. Vergisst nie. Wir auch nicht." data-en="Largest brain of all land animals. Never forgets. Neither do we.">Größtes Gehirn aller Landtiere. Vergisst nie. Wir auch nicht.</div>
|
|
</div>
|
|
<div class="fact-card shake-it">
|
|
<div class="fact-emoji">💨</div>
|
|
<div class="fact-number">40</div>
|
|
<div class="fact-unit" data-de="km/h Stampede" data-en="km/h stampede">km/h Stampede</div>
|
|
<div class="fact-desc" data-de="Sprint-Geschwindigkeit. Unsere Deployments sind schneller." data-en="Sprint speed. Our deployments are faster.">Sprint-Geschwindigkeit. Unsere Deployments sind schneller.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="herd-section">
|
|
<div class="container">
|
|
<span class="section-badge" data-de="Die Herde" data-en="The Herd">Die Herde</span>
|
|
<h2 class="wobble-it" data-de="Zusammen sind wir groß" data-en="Together we are great">Zusammen sind wir groß</h2>
|
|
<div class="herd-parade shake-heavy" id="herd-parade">
|
|
🐘🐘🐘🐘🐘
|
|
</div>
|
|
<p class="herd-text shake-it" data-de="Die Herde wächst. Du auch?" data-en="The herd is growing. Are you?">Die Herde wächst. Du auch?</p>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="counter-section">
|
|
<div class="counter-value shake-heavy" id="counter">0</div>
|
|
<div class="counter-label" data-de="Stampeden seit Seitenaufruf" data-en="Stampedes since page load">Stampeden seit Seitenaufruf</div>
|
|
</div>
|
|
|
|
<section id="kontakt" class="cta-section">
|
|
<div class="container">
|
|
<span class="section-badge" data-de="Kontakt" data-en="Contact">Kontakt</span>
|
|
<h2 class="wobble-it" data-de="Die Herde rufen" data-en="Call the herd">Die Herde rufen</h2>
|
|
<div class="section-desc" style="margin-left:auto; margin-right:auto;" data-de="Lass den Boden beben. Schreib uns — wir stampfen los." data-en="Let the ground shake. Write to us — we'll start stomping.">
|
|
Lass den Boden beben. Schreib uns — wir stampfen los.
|
|
</div>
|
|
<a href="mailto:kilofant@msbls.de?subject=KIlofant%20—%20Anfrage" class="btn btn-primary shake-it">
|
|
kilofant@msbls.de
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="footer-elephants wobble-it">🐘 🐘 🐘 🐘 🐘</div>
|
|
<p class="footer-text shake-it" data-de="Hier war mal eine Webseite. Dann kam der KIlofant." data-en="There used to be a website here. Then came the KIlofant.">Hier war mal eine Webseite. Dann kam der KIlofant.</p>
|
|
<p class="footer-copy" data-de="© 2026 KIlofant.de — ein Projekt von <a href="https://msbls.de">msbls.de</a>" data-en="© 2026 KIlofant.de — a project by <a href="https://msbls.de">msbls.de</a>">© 2026 KIlofant.de — ein Projekt von <a href="https://msbls.de">msbls.de</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(--tusk,#F5E6C8);color:var(--tusk,#F5E6C8);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;opacity:0.7;">EN</button>
|
|
<br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--tusk,#F5E6C8);font-size:0.6rem;opacity:0.4;">Maschinell übersetzt</small>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
const page = document.getElementById('page');
|
|
const counter = document.getElementById('counter');
|
|
const heroElephant = document.getElementById('hero-elephant');
|
|
let stampedes = 0;
|
|
|
|
function triggerStampede() {
|
|
stampedes++;
|
|
counter.textContent = stampedes;
|
|
page.classList.add('rumbling');
|
|
setTimeout(() => page.classList.remove('rumbling'), 2500);
|
|
}
|
|
|
|
// Click elephant to trigger stampede
|
|
heroElephant.addEventListener('click', triggerStampede);
|
|
|
|
// Auto stampede every 7-11 seconds
|
|
setTimeout(triggerStampede, 2500);
|
|
function scheduleStampede() {
|
|
const delay = 7000 + Math.random() * 4000;
|
|
setTimeout(() => {
|
|
triggerStampede();
|
|
scheduleStampede();
|
|
}, delay);
|
|
}
|
|
scheduleStampede();
|
|
|
|
// Grow herd on scroll
|
|
const herdParade = document.getElementById('herd-parade');
|
|
let herdGrown = false;
|
|
const observer = new IntersectionObserver((entries) => {
|
|
if (entries[0].isIntersecting && !herdGrown) {
|
|
herdGrown = true;
|
|
herdParade.textContent = '🐘🐘🐘🐘🐘🐘🐘🐘🐘🐘🐘🐘🐘';
|
|
}
|
|
}, { threshold: 0.5 });
|
|
observer.observe(herdParade);
|
|
</script>
|
|
<script src="/shared/ai-disclosure.js" data-tone="playful"></script>
|
|
<script src="/shared/i18n.js"></script>
|
|
</body>
|
|
</html>
|