Merge: add kilofant.de, omakise.de, heygoldi.de onepagers
This commit is contained in:
m
185
Caddyfile
Normal file
185
Caddyfile
Normal file
@@ -0,0 +1,185 @@
|
||||
{
|
||||
auto_https off
|
||||
admin off
|
||||
}
|
||||
|
||||
:80 {
|
||||
@clemensplassmann_de host clemensplassmann.de
|
||||
handle @clemensplassmann_de {
|
||||
root * /srv/clemensplassmann.de
|
||||
file_server
|
||||
}
|
||||
@danosi_de host danosi.de
|
||||
handle @danosi_de {
|
||||
root * /srv/danosi.de
|
||||
file_server
|
||||
}
|
||||
@dasbes_de host dasbes.de
|
||||
handle @dasbes_de {
|
||||
root * /srv/dasbes.de
|
||||
file_server
|
||||
}
|
||||
@deinesei_de host deinesei.de
|
||||
handle @deinesei_de {
|
||||
root * /srv/deinesei.de
|
||||
file_server
|
||||
}
|
||||
@derkaiseristnackt_de host derkaiseristnackt.de
|
||||
handle @derkaiseristnackt_de {
|
||||
root * /srv/derkaiseristnackt.de
|
||||
file_server
|
||||
}
|
||||
@dumusst_com host dumusst.com dumusst.de dumusstnicht.com dumusstnicht.de
|
||||
handle @dumusst_com {
|
||||
root * /srv/dumusst.com
|
||||
file_server
|
||||
}
|
||||
@elefantenhor_de host elefantenhor.de
|
||||
handle @elefantenhor_de {
|
||||
root * /srv/elefantenhor.de
|
||||
file_server
|
||||
}
|
||||
@fragina_de host fragina.de
|
||||
handle @fragina_de {
|
||||
root * /srv/fragina.de
|
||||
file_server
|
||||
}
|
||||
@frenchkis_de host frenchkis.de
|
||||
handle @frenchkis_de {
|
||||
root * /srv/frenchkis.de
|
||||
file_server
|
||||
}
|
||||
@heygoldi_de host heygoldi.de heygoldi.com
|
||||
handle @heygoldi_de {
|
||||
root * /srv/heygoldi.de
|
||||
file_server
|
||||
}
|
||||
@ichbinaufbali_de host ichbinaufbali.de
|
||||
handle @ichbinaufbali_de {
|
||||
root * /srv/ichbinaufbali.de
|
||||
file_server
|
||||
}
|
||||
@ichbinaufbarley_de host ichbinaufbarley.de
|
||||
handle @ichbinaufbarley_de {
|
||||
root * /srv/ichbinaufbarley.de
|
||||
file_server
|
||||
}
|
||||
@insain_de host insain.de
|
||||
handle @insain_de {
|
||||
root * /srv/insain.de
|
||||
file_server
|
||||
}
|
||||
@julietensity_de host julietensity.de
|
||||
handle @julietensity_de {
|
||||
root * /srv/julietensity.de
|
||||
file_server
|
||||
}
|
||||
@kainco_de host kainco.de keinco.de
|
||||
handle @kainco_de {
|
||||
root * /srv/kainco.de
|
||||
file_server
|
||||
}
|
||||
@kainefrage_de host kainefrage.de
|
||||
handle @kainefrage_de {
|
||||
root * /srv/kainefrage.de
|
||||
file_server
|
||||
}
|
||||
@kainstress_de host kainstress.de
|
||||
handle @kainstress_de {
|
||||
root * /srv/kainstress.de
|
||||
file_server
|
||||
}
|
||||
@keinefreun_de host keinefreun.de
|
||||
handle @keinefreun_de {
|
||||
root * /srv/keinefreun.de
|
||||
file_server
|
||||
}
|
||||
@kilofant_de host kilofant.de
|
||||
handle @kilofant_de {
|
||||
root * /srv/kilofant.de
|
||||
file_server
|
||||
}
|
||||
@kinowhow_de host kinowhow.de
|
||||
handle @kinowhow_de {
|
||||
root * /srv/kinowhow.de
|
||||
file_server
|
||||
}
|
||||
@knzlmgmt_de host knzlmgmt.de
|
||||
handle @knzlmgmt_de {
|
||||
root * /srv/knzlmgmt.de
|
||||
file_server
|
||||
}
|
||||
@kopffrai_de host kopffrai.de
|
||||
handle @kopffrai_de {
|
||||
root * /srv/kopffrai.de
|
||||
file_server
|
||||
}
|
||||
@legalais_de host legalais.de
|
||||
handle @legalais_de {
|
||||
root * /srv/legalais.de
|
||||
file_server
|
||||
}
|
||||
@machesdocheinfach_de host machesdocheinfach.de
|
||||
handle @machesdocheinfach_de {
|
||||
root * /srv/machesdocheinfach.de
|
||||
file_server
|
||||
}
|
||||
@mai_otto_de host mai-otto.de otto.flexsiebels.de ottomatisch.de ichbinotto.de
|
||||
handle @mai_otto_de {
|
||||
root * /srv/mai-otto.de
|
||||
file_server
|
||||
}
|
||||
@martinsiebels_de host martinsiebels.de
|
||||
handle @martinsiebels_de {
|
||||
root * /srv/martinsiebels.de
|
||||
file_server
|
||||
}
|
||||
@matthiasbreier_de host matthiasbreier.de
|
||||
handle @matthiasbreier_de {
|
||||
root * /srv/matthiasbreier.de
|
||||
file_server
|
||||
}
|
||||
@omakise_de host omakise.de
|
||||
handle @omakise_de {
|
||||
root * /srv/omakise.de
|
||||
file_server
|
||||
}
|
||||
@osterai_de host osterai.de
|
||||
handle @osterai_de {
|
||||
root * /srv/osterai.de
|
||||
file_server
|
||||
}
|
||||
@paragraphenraiter_de host paragraphenraiter.de
|
||||
handle @paragraphenraiter_de {
|
||||
root * /srv/paragraphenraiter.de
|
||||
file_server
|
||||
}
|
||||
@schulfrai_de host schulfrai.de
|
||||
handle @schulfrai_de {
|
||||
root * /srv/schulfrai.de
|
||||
file_server
|
||||
}
|
||||
@smartin3_de host smartin3.de
|
||||
handle @smartin3_de {
|
||||
root * /srv/smartin3.de
|
||||
file_server
|
||||
}
|
||||
@sorgenfrai_de host sorgenfrai.de
|
||||
handle @sorgenfrai_de {
|
||||
root * /srv/sorgenfrai.de
|
||||
file_server
|
||||
}
|
||||
@vonschraitter_de host vonschraitter.de
|
||||
handle @vonschraitter_de {
|
||||
root * /srv/vonschraitter.de
|
||||
file_server
|
||||
}
|
||||
@wartebitte_de host wartebitte.de
|
||||
handle @wartebitte_de {
|
||||
root * /srv/wartebitte.de
|
||||
file_server
|
||||
}
|
||||
handle {
|
||||
respond "Not Found" 444
|
||||
}
|
||||
}
|
||||
583
sites/heygoldi.de/index.html
Normal file
583
sites/heygoldi.de/index.html
Normal file
@@ -0,0 +1,583 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Hey Goldi! — Dein freundlicher KI-Begleiter</title>
|
||||
<meta name="description" content="Hey Goldi! — KI-Companion für Menschen, die es einfach mögen. Warm, freundlich, immer da.">
|
||||
<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=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after {
|
||||
margin: 0; padding: 0; box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--gold: #D4A033;
|
||||
--gold-light: #E8C567;
|
||||
--gold-bright: #F5D78E;
|
||||
--gold-pale: #FBF0D4;
|
||||
--gold-glow: rgba(212, 160, 51, 0.15);
|
||||
--warm: #8B6233;
|
||||
--warm-light: #A07842;
|
||||
--cream: #FFF9EE;
|
||||
--cream-warm: #FFF3DD;
|
||||
--cream-rose: #FFF0E8;
|
||||
--text: #3D2E1C;
|
||||
--text-soft: #7A6B58;
|
||||
--text-gentle: #A89880;
|
||||
--rose: #E8A090;
|
||||
--rose-soft: rgba(232, 160, 144, 0.12);
|
||||
--sage: #8BA87A;
|
||||
--sky: #A8C8D8;
|
||||
}
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: 'Nunito', -apple-system, sans-serif;
|
||||
background: var(--cream);
|
||||
color: var(--text);
|
||||
line-height: 1.7;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* === NAV === */
|
||||
nav {
|
||||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||||
padding: 16px 0;
|
||||
background: rgba(255, 249, 238, 0.94);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 2px solid var(--gold-pale);
|
||||
}
|
||||
|
||||
nav .inner {
|
||||
max-width: 800px; margin: 0 auto; padding: 0 28px;
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.3rem; font-weight: 800;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.logo .goldi { color: var(--gold); }
|
||||
.logo .bear { font-size: 1.2em; margin-right: 6px; }
|
||||
|
||||
nav a {
|
||||
color: var(--text-soft); text-decoration: none;
|
||||
font-size: 0.95rem; font-weight: 600;
|
||||
background: var(--gold);
|
||||
color: white;
|
||||
padding: 8px 20px;
|
||||
border-radius: 40px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
nav a:hover {
|
||||
background: var(--warm);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* === HERO === */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center;
|
||||
text-align: center; padding: 120px 28px 80px;
|
||||
background:
|
||||
radial-gradient(ellipse at 50% 60%, var(--gold-glow) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 30% 80%, var(--rose-soft) 0%, transparent 40%),
|
||||
var(--cream);
|
||||
}
|
||||
|
||||
.hero-bear {
|
||||
font-size: clamp(6rem, 15vw, 10rem);
|
||||
line-height: 1;
|
||||
margin-bottom: 16px;
|
||||
animation: gentle-bounce 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes gentle-bounce {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.8rem, 8vw, 4.5rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h1 .hey { color: var(--text); }
|
||||
h1 .goldi { color: var(--gold); }
|
||||
h1 .excl { color: var(--rose); }
|
||||
|
||||
.hero-sub {
|
||||
font-size: clamp(1.1rem, 2.5vw, 1.35rem);
|
||||
color: var(--text-soft);
|
||||
font-weight: 500;
|
||||
max-width: 500px;
|
||||
margin: 0 auto 32px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.hero-sub strong {
|
||||
color: var(--text);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cta-big {
|
||||
display: inline-flex; align-items: center; gap: 12px;
|
||||
padding: 18px 44px;
|
||||
background: var(--gold);
|
||||
color: white;
|
||||
font-size: 1.15rem; font-weight: 700;
|
||||
border-radius: 60px;
|
||||
text-decoration: none; border: none; cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 8px 28px var(--gold-glow);
|
||||
}
|
||||
|
||||
.cta-big:hover {
|
||||
background: var(--warm);
|
||||
transform: translateY(-2px) scale(1.02);
|
||||
box-shadow: 0 12px 40px rgba(212, 160, 51, 0.25);
|
||||
}
|
||||
|
||||
/* === CONTAINER === */
|
||||
.container {
|
||||
max-width: 800px; margin: 0 auto; padding: 0 28px;
|
||||
}
|
||||
|
||||
/* === INTRO === */
|
||||
.intro {
|
||||
text-align: center;
|
||||
padding: 80px 28px;
|
||||
background: var(--cream-warm);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
font-size: clamp(1.15rem, 2.5vw, 1.45rem);
|
||||
font-weight: 500;
|
||||
line-height: 2;
|
||||
color: var(--text-soft);
|
||||
max-width: 560px; margin: 0 auto;
|
||||
}
|
||||
|
||||
.intro-text strong { color: var(--text); font-weight: 700; }
|
||||
.intro-text .goldi { color: var(--gold); font-weight: 800; }
|
||||
|
||||
/* === SECTIONS === */
|
||||
section { padding: 80px 0; }
|
||||
|
||||
.section-emoji {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(1.6rem, 4vw, 2.2rem);
|
||||
font-weight: 800;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
color: var(--text-soft);
|
||||
font-size: 1rem;
|
||||
max-width: 500px;
|
||||
margin-bottom: 48px;
|
||||
line-height: 1.8;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* === FEATURES === */
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: white;
|
||||
border: 2px solid var(--gold-pale);
|
||||
border-radius: 24px;
|
||||
padding: 36px 28px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
border-color: var(--gold-light);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 32px var(--gold-glow);
|
||||
}
|
||||
|
||||
.feature-emoji {
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 1.15rem; font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
color: var(--text-soft);
|
||||
font-size: 0.95rem; line-height: 1.7;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* === HOW IT WORKS === */
|
||||
.steps-section {
|
||||
background: var(--cream-warm);
|
||||
}
|
||||
|
||||
.steps-list {
|
||||
display: flex; flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.step {
|
||||
display: flex; gap: 24px;
|
||||
align-items: flex-start;
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 28px;
|
||||
border: 2px solid var(--gold-pale);
|
||||
}
|
||||
|
||||
.step-number {
|
||||
flex-shrink: 0;
|
||||
width: 52px; height: 52px;
|
||||
background: var(--gold);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 1.3rem; font-weight: 800;
|
||||
}
|
||||
|
||||
.step-body h3 {
|
||||
font-size: 1.1rem; font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.step-body p {
|
||||
color: var(--text-soft);
|
||||
font-size: 0.95rem; line-height: 1.7;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* === TESTIMONIAL === */
|
||||
.testimonial-section {
|
||||
text-align: center;
|
||||
padding: 80px 28px;
|
||||
background: var(--cream-rose);
|
||||
}
|
||||
|
||||
.testimonial-quote {
|
||||
font-size: clamp(1.2rem, 2.8vw, 1.6rem);
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
color: var(--text);
|
||||
max-width: 520px; margin: 0 auto 20px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.testimonial-author {
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-soft);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* === REASSURANCE === */
|
||||
.reassurance {
|
||||
text-align: center;
|
||||
padding: 60px 28px;
|
||||
}
|
||||
|
||||
.reassurance-items {
|
||||
display: flex; justify-content: center;
|
||||
gap: 40px; flex-wrap: wrap;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.reassurance-item {
|
||||
text-align: center;
|
||||
max-width: 160px;
|
||||
}
|
||||
|
||||
.reassurance-emoji {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.reassurance-text {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.reassurance-sub {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-gentle);
|
||||
margin-top: 2px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* === CTA === */
|
||||
.cta-section {
|
||||
text-align: center;
|
||||
padding: 80px 28px 120px;
|
||||
background:
|
||||
radial-gradient(ellipse at 50% 50%, var(--gold-glow) 0%, transparent 50%),
|
||||
var(--cream);
|
||||
}
|
||||
|
||||
.cta-section h2 {
|
||||
font-size: clamp(1.8rem, 4vw, 2.5rem);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.cta-section p {
|
||||
color: var(--text-soft);
|
||||
font-size: 1.05rem;
|
||||
max-width: 440px;
|
||||
margin: 0 auto 36px;
|
||||
line-height: 1.8;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* === FOOTER === */
|
||||
footer {
|
||||
background: var(--warm);
|
||||
color: var(--gold-pale);
|
||||
text-align: center;
|
||||
padding: 36px 28px;
|
||||
}
|
||||
|
||||
.footer-bear {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.footer-copy {
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.4;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.footer-copy a {
|
||||
color: var(--gold-pale);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* === MOBILE === */
|
||||
@media (max-width: 768px) {
|
||||
.features-grid { grid-template-columns: 1fr; }
|
||||
.reassurance-items { gap: 24px; }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
body { font-size: 17px; }
|
||||
.hero { padding: 110px 20px 60px; }
|
||||
section { padding: 60px 0; }
|
||||
.step { flex-direction: column; gap: 16px; }
|
||||
.feature-card { padding: 28px 24px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<div class="inner">
|
||||
<div class="logo">
|
||||
<span class="bear">🧸</span>
|
||||
Hey <span class="goldi">Goldi</span>!
|
||||
</div>
|
||||
<a href="#kontakt">Hallo sagen</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-bear">🧸</div>
|
||||
<h1><span class="hey">Hey </span><span class="goldi">Goldi</span><span class="excl">!</span></h1>
|
||||
<p class="hero-sub">
|
||||
Dein <strong>freundlicher KI-Begleiter</strong>.<br>
|
||||
Immer da. Immer geduldig.<br>
|
||||
Wie ein guter Freund, der alles erklärt.
|
||||
</p>
|
||||
<a href="#kontakt" class="cta-big">
|
||||
🧸 Goldi kennenlernen
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<div class="intro">
|
||||
<div class="container">
|
||||
<p class="intro-text">
|
||||
Technik muss nicht <strong>kompliziert</strong> sein.<br>
|
||||
<span class="goldi">Goldi</span> erklärt alles in <strong>einfachen Worten</strong>.<br>
|
||||
Kein Fachchinesisch. Keine Hektik.<br>
|
||||
Nur ein <strong>freundliches Gespräch</strong>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="features">
|
||||
<div class="container">
|
||||
<div class="section-emoji">✨</div>
|
||||
<h2>Was Goldi alles kann</h2>
|
||||
<div class="section-desc">
|
||||
Goldi hilft dir bei allem, was im Alltag anfällt.
|
||||
Geduldig, verständlich und immer freundlich.
|
||||
</div>
|
||||
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-emoji">💬</div>
|
||||
<h3>Einfach plaudern</h3>
|
||||
<p>Frag Goldi was du möchtest. Zum Wetter, zu Rezepten, zur Nachrichten-Lage. Goldi antwortet so, dass es Spaß macht.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-emoji">📱</div>
|
||||
<h3>Technik-Hilfe</h3>
|
||||
<p>Das Handy spinnt? Die App macht Probleme? Goldi erklärt Schritt für Schritt, was zu tun ist. In deinem Tempo.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-emoji">📝</div>
|
||||
<h3>Briefe & Texte</h3>
|
||||
<p>Goldi hilft beim Schreiben. Ob Kündigung, Beschwerde oder Geburtstagsgruß — verständlich und auf den Punkt.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-emoji">🧠</div>
|
||||
<h3>Gedächtnisstütze</h3>
|
||||
<p>Goldi merkt sich, was dir wichtig ist. Arzttermine, Geburtstage, Einkaufslisten — alles sicher aufgehoben.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-emoji">📖</div>
|
||||
<h3>Geschichten & Rätsel</h3>
|
||||
<p>Langeweile? Goldi erzählt Geschichten, stellt Quizfragen oder liest dir etwas vor. Unterhaltung, wann immer du magst.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-emoji">❤️</div>
|
||||
<h3>Einfach zuhören</h3>
|
||||
<p>Manchmal braucht man jemanden zum Reden. Goldi hört zu, ohne zu urteilen. Und hat immer ein offenes Ohr.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="steps-section">
|
||||
<div class="container">
|
||||
<div class="section-emoji">👋</div>
|
||||
<h2>So einfach geht's</h2>
|
||||
<div class="section-desc">
|
||||
Drei Schritte. Mehr braucht es nicht.
|
||||
</div>
|
||||
|
||||
<div class="steps-list">
|
||||
<div class="step">
|
||||
<div class="step-number">1</div>
|
||||
<div class="step-body">
|
||||
<h3>Sag "Hey Goldi!"</h3>
|
||||
<p>Einfach ansprechen — per Handy, Tablet oder Computer. Goldi ist sofort da und freut sich.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">2</div>
|
||||
<div class="step-body">
|
||||
<h3>Stell deine Frage</h3>
|
||||
<p>Was auch immer dich beschäftigt. Goldi versteht dich, auch wenn du nicht die perfekten Worte findest.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">3</div>
|
||||
<div class="step-body">
|
||||
<h3>Goldi antwortet</h3>
|
||||
<p>Klar, freundlich, verständlich. Und wenn etwas unklar ist: einfach nochmal fragen. Goldi erklärt es gerne anders.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="testimonial-section">
|
||||
<div class="container">
|
||||
<div class="section-emoji">💛</div>
|
||||
<p class="testimonial-quote">
|
||||
"Endlich jemand, der mir alles in Ruhe erklärt.
|
||||
Ohne dass ich mich dumm fühle."
|
||||
</p>
|
||||
<p class="testimonial-author">— So soll es sich anfühlen.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reassurance">
|
||||
<div class="container">
|
||||
<h2>Das versprechen wir</h2>
|
||||
<div class="reassurance-items">
|
||||
<div class="reassurance-item">
|
||||
<div class="reassurance-emoji">🔒</div>
|
||||
<div class="reassurance-text">Privat & sicher</div>
|
||||
<div class="reassurance-sub">Deine Daten bleiben bei dir</div>
|
||||
</div>
|
||||
<div class="reassurance-item">
|
||||
<div class="reassurance-emoji">🐢</div>
|
||||
<div class="reassurance-text">In deinem Tempo</div>
|
||||
<div class="reassurance-sub">Keine Hektik, kein Druck</div>
|
||||
</div>
|
||||
<div class="reassurance-item">
|
||||
<div class="reassurance-emoji">😊</div>
|
||||
<div class="reassurance-text">Immer freundlich</div>
|
||||
<div class="reassurance-sub">Goldi wird nie ungeduldig</div>
|
||||
</div>
|
||||
<div class="reassurance-item">
|
||||
<div class="reassurance-emoji">🇩🇪</div>
|
||||
<div class="reassurance-text">Auf Deutsch</div>
|
||||
<div class="reassurance-sub">Kein Fachchinesisch</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="kontakt" class="cta-section">
|
||||
<div class="container">
|
||||
<div class="section-emoji">🧸</div>
|
||||
<h2>Sag <span style="color:var(--gold);">Hallo</span>!</h2>
|
||||
<p>
|
||||
Goldi freut sich, dich kennenzulernen.
|
||||
Schreib uns — und wir bringen euch zusammen.
|
||||
</p>
|
||||
<a href="mailto:heygoldi@msbls.de?subject=Hey%20Goldi!%20—%20Hallo" class="cta-big">
|
||||
🧸 heygoldi@msbls.de
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="footer-bear">🧸</div>
|
||||
<p class="footer-text">Hey Goldi! — Dein freundlicher KI-Begleiter.</p>
|
||||
<p class="footer-copy">© 2026 heygoldi.de — ein Projekt von <a href="https://msbls.de">msbls.de</a></p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
6
sites/heygoldi.de/site.yaml
Normal file
6
sites/heygoldi.de/site.yaml
Normal file
@@ -0,0 +1,6 @@
|
||||
domain: heygoldi.de
|
||||
template: custom
|
||||
title: "Hey Goldi! — Dein freundlicher KI-Begleiter"
|
||||
description: "Hey Goldi! — AI-Companion fur altere Menschen. Warm, freundlich, einfach. Wie ein guter Freund, der immer da ist."
|
||||
aliases:
|
||||
- heygoldi.com
|
||||
786
sites/kilofant.de/index.html
Normal file
786
sites/kilofant.de/index.html
Normal file
@@ -0,0 +1,786 @@
|
||||
<!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">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">Groß denken. Größer machen.</p>
|
||||
<p class="hero-desc">
|
||||
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">Herde kontaktieren</a>
|
||||
<a href="#stampede" class="btn btn-ghost">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">
|
||||
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">Was wir stampfen</span>
|
||||
<h2 class="wobble-it">Elefantenstarke KI</h2>
|
||||
<div class="section-desc">
|
||||
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>Elefantengedächtnis</h3>
|
||||
<p>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>Stampede-Strategie</h3>
|
||||
<p>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>Herdenwissen</h3>
|
||||
<p>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>Dickhäuter-Sicherheit</h3>
|
||||
<p>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>Kalb-Modus</h3>
|
||||
<p>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>Trompeten-Support</h3>
|
||||
<p>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">Unnützes KIlofantenwissen</span>
|
||||
<h2 class="shake-heavy">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">kg Lösungskompetenz</div>
|
||||
<div class="fact-desc">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">km Reichweite</div>
|
||||
<div class="fact-desc">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">kg Gehirnmasse</div>
|
||||
<div class="fact-desc">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">km/h Stampede</div>
|
||||
<div class="fact-desc">Sprint-Geschwindigkeit. Unsere Deployments sind schneller.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="herd-section">
|
||||
<div class="container">
|
||||
<span class="section-badge">Die Herde</span>
|
||||
<h2 class="wobble-it">Zusammen sind wir groß</h2>
|
||||
<div class="herd-parade shake-heavy" id="herd-parade">
|
||||
🐘🐘🐘🐘🐘
|
||||
</div>
|
||||
<p class="herd-text shake-it">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">Stampeden seit Seitenaufruf</div>
|
||||
</div>
|
||||
|
||||
<section id="kontakt" class="cta-section">
|
||||
<div class="container">
|
||||
<span class="section-badge">Kontakt</span>
|
||||
<h2 class="wobble-it">Die Herde rufen</h2>
|
||||
<div class="section-desc" style="margin-left:auto; margin-right:auto;">
|
||||
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">Hier war mal eine Webseite. Dann kam der KIlofant.</p>
|
||||
<p class="footer-copy">© 2026 KIlofant.de — ein Projekt von <a href="https://msbls.de">msbls.de</a></p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
4
sites/kilofant.de/site.yaml
Normal file
4
sites/kilofant.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: kilofant.de
|
||||
template: custom
|
||||
title: "KIlofant — KI so groB, dass der Boden wackelt"
|
||||
description: "KIlofant — KI + Elefant. Verspielt, groB, unvergesslich. KI-Losungen die man nicht vergisst."
|
||||
623
sites/omakise.de/index.html
Normal file
623
sites/omakise.de/index.html
Normal file
@@ -0,0 +1,623 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OmaKIse — KI-Erlebnis, vom Chef kuratiert</title>
|
||||
<meta name="description" content="OmaKIse — Omakase + KI. Kuratierte KI-Beratung wie ein Omakase-Menü. Du bekommst was der Chef empfiehlt.">
|
||||
<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=Noto+Serif+JP:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after {
|
||||
margin: 0; padding: 0; box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--ink: #1a1a1a;
|
||||
--ink-soft: #4a4a4a;
|
||||
--ink-faint: #8a8a8a;
|
||||
--ink-ghost: #c5c5c5;
|
||||
--washi: #faf6f0;
|
||||
--washi-warm: #f5ede0;
|
||||
--washi-cool: #f0ece6;
|
||||
--hinoki: #c9a96e;
|
||||
--hinoki-dark: #a08040;
|
||||
--hinoki-glow: rgba(201, 169, 110, 0.15);
|
||||
--sumi: #2c2c2c;
|
||||
--aka: #c23b22;
|
||||
--aka-soft: rgba(194, 59, 34, 0.08);
|
||||
--matcha: #7a9a5a;
|
||||
}
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, sans-serif;
|
||||
background: var(--washi);
|
||||
color: var(--ink);
|
||||
line-height: 1.7;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.jp {
|
||||
font-family: 'Noto Serif JP', serif;
|
||||
}
|
||||
|
||||
/* === NAV === */
|
||||
nav {
|
||||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||||
padding: 16px 0;
|
||||
background: rgba(250, 246, 240, 0.9);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
nav .inner {
|
||||
max-width: 880px; margin: 0 auto; padding: 0 32px;
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: 'Noto Serif JP', serif;
|
||||
font-size: 1.1rem; font-weight: 600;
|
||||
color: var(--ink);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.logo .ki { color: var(--aka); font-weight: 700; }
|
||||
|
||||
nav a {
|
||||
color: var(--ink-faint); text-decoration: none;
|
||||
font-size: 0.8rem; font-weight: 400;
|
||||
letter-spacing: 0.08em;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
nav a:hover { color: var(--ink); }
|
||||
|
||||
/* === HERO === */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center;
|
||||
text-align: center; padding: 140px 32px 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
|
||||
background:
|
||||
radial-gradient(ellipse at 50% 40%, var(--hinoki-glow) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-kanji {
|
||||
font-family: 'Noto Serif JP', serif;
|
||||
font-size: clamp(3rem, 8vw, 5rem);
|
||||
font-weight: 300;
|
||||
color: var(--ink-ghost);
|
||||
letter-spacing: 0.3em;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Noto Serif JP', serif;
|
||||
font-size: clamp(2.8rem, 7vw, 4.5rem);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h1 .ki {
|
||||
color: var(--aka);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
font-size: 1.05rem;
|
||||
color: var(--ink-soft);
|
||||
font-weight: 300;
|
||||
max-width: 420px;
|
||||
margin: 0 auto 16px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.hero-sub em {
|
||||
font-style: normal;
|
||||
color: var(--ink);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hero-meaning {
|
||||
font-family: 'Noto Serif JP', serif;
|
||||
font-size: 0.85rem;
|
||||
color: var(--ink-faint);
|
||||
margin-bottom: 40px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.cta-group {
|
||||
display: flex; gap: 16px;
|
||||
justify-content: center; flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
padding: 14px 36px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.85rem; font-weight: 500;
|
||||
text-decoration: none; border: none; cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--ink);
|
||||
color: var(--washi);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--sumi);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 8px 24px rgba(26, 26, 26, 0.12);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--ink-soft);
|
||||
border: 1px solid var(--ink-ghost);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
border-color: var(--ink-soft);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
/* Decorative line */
|
||||
.ichi {
|
||||
width: 60px; height: 1px;
|
||||
background: var(--hinoki);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* === CONTAINER === */
|
||||
.container {
|
||||
max-width: 880px; margin: 0 auto; padding: 0 32px;
|
||||
}
|
||||
|
||||
/* === SECTIONS === */
|
||||
section { padding: 100px 0; }
|
||||
|
||||
.section-jp {
|
||||
font-family: 'Noto Serif JP', serif;
|
||||
font-size: 0.75rem;
|
||||
color: var(--ink-faint);
|
||||
letter-spacing: 0.2em;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: 'Noto Serif JP', serif;
|
||||
font-size: clamp(1.6rem, 4vw, 2.2rem);
|
||||
font-weight: 500;
|
||||
margin-bottom: 12px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
color: var(--ink-soft);
|
||||
font-size: 0.9rem;
|
||||
max-width: 480px;
|
||||
margin-bottom: 56px;
|
||||
line-height: 1.8;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* === PHILOSOPHY === */
|
||||
.philosophy {
|
||||
text-align: center;
|
||||
padding: 100px 32px;
|
||||
background: var(--washi-warm);
|
||||
}
|
||||
|
||||
.philosophy-text {
|
||||
font-family: 'Noto Serif JP', serif;
|
||||
font-size: clamp(1.2rem, 2.5vw, 1.6rem);
|
||||
font-weight: 400;
|
||||
line-height: 2;
|
||||
color: var(--ink-soft);
|
||||
max-width: 560px; margin: 0 auto;
|
||||
}
|
||||
|
||||
.philosophy-text strong { color: var(--ink); font-weight: 600; }
|
||||
.philosophy-text .ki { color: var(--aka); font-weight: 600; }
|
||||
|
||||
/* === OMAKASE COURSES === */
|
||||
.courses-list {
|
||||
display: flex; flex-direction: column;
|
||||
gap: 1px;
|
||||
background: var(--ink-ghost);
|
||||
border-top: 1px solid var(--ink-ghost);
|
||||
border-bottom: 1px solid var(--ink-ghost);
|
||||
}
|
||||
|
||||
.course {
|
||||
display: grid;
|
||||
grid-template-columns: 80px 1fr;
|
||||
gap: 32px;
|
||||
padding: 36px 0;
|
||||
background: var(--washi);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.course-number {
|
||||
font-family: 'Noto Serif JP', serif;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 300;
|
||||
color: var(--ink-ghost);
|
||||
text-align: right;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.course-body h3 {
|
||||
font-family: 'Noto Serif JP', serif;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.course-jp {
|
||||
font-family: 'Noto Serif JP', serif;
|
||||
font-size: 0.75rem;
|
||||
color: var(--hinoki-dark);
|
||||
letter-spacing: 0.1em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.course-body p {
|
||||
color: var(--ink-soft);
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.7;
|
||||
font-weight: 300;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
/* === PRINCIPLES === */
|
||||
.principles-section {
|
||||
background: var(--sumi);
|
||||
color: var(--washi);
|
||||
}
|
||||
|
||||
.principles-section .section-jp { color: var(--hinoki); }
|
||||
.principles-section h2 { color: var(--washi); }
|
||||
.principles-section .section-desc { color: var(--ink-ghost); }
|
||||
|
||||
.principles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1px;
|
||||
background: rgba(255,255,255,0.06);
|
||||
}
|
||||
|
||||
.principle {
|
||||
padding: 36px 28px;
|
||||
background: var(--sumi);
|
||||
}
|
||||
|
||||
.principle-kanji {
|
||||
font-family: 'Noto Serif JP', serif;
|
||||
font-size: 2rem;
|
||||
color: var(--hinoki);
|
||||
margin-bottom: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.principle h3 {
|
||||
font-family: 'Noto Serif JP', serif;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
color: var(--washi);
|
||||
}
|
||||
|
||||
.principle p {
|
||||
font-size: 0.8rem;
|
||||
color: var(--ink-ghost);
|
||||
line-height: 1.7;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* === SEASONAL === */
|
||||
.seasonal {
|
||||
text-align: center;
|
||||
padding: 80px 32px;
|
||||
background: var(--washi-warm);
|
||||
}
|
||||
|
||||
.seasonal-items {
|
||||
display: flex; justify-content: center;
|
||||
gap: 48px; flex-wrap: wrap;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.seasonal-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.seasonal-emoji {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.seasonal-name {
|
||||
font-family: 'Noto Serif JP', serif;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.seasonal-sub {
|
||||
font-size: 0.75rem;
|
||||
color: var(--ink-faint);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* === CTA === */
|
||||
.cta-section {
|
||||
text-align: center;
|
||||
padding: 100px 32px;
|
||||
}
|
||||
|
||||
.cta-section h2 { margin-bottom: 12px; }
|
||||
.cta-section .section-desc { margin: 0 auto 40px; }
|
||||
|
||||
/* === FOOTER === */
|
||||
footer {
|
||||
padding: 32px 0;
|
||||
text-align: center;
|
||||
border-top: 1px solid var(--ink-ghost);
|
||||
}
|
||||
|
||||
footer p {
|
||||
font-size: 0.75rem;
|
||||
color: var(--ink-faint);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--ink-faint);
|
||||
text-decoration: none;
|
||||
}
|
||||
footer a:hover { color: var(--ink-soft); }
|
||||
|
||||
/* === ANIMATIONS === */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(12px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.hero > * {
|
||||
animation: fadeIn 0.8s ease-out both;
|
||||
}
|
||||
.hero > *:nth-child(2) { animation-delay: 0.15s; }
|
||||
.hero > *:nth-child(3) { animation-delay: 0.3s; }
|
||||
.hero > *:nth-child(4) { animation-delay: 0.45s; }
|
||||
.hero > *:nth-child(5) { animation-delay: 0.6s; }
|
||||
.hero > *:nth-child(6) { animation-delay: 0.75s; }
|
||||
.hero > *:nth-child(7) { animation-delay: 0.9s; }
|
||||
|
||||
/* === MOBILE === */
|
||||
@media (max-width: 768px) {
|
||||
.principles-grid { grid-template-columns: 1fr; }
|
||||
.course { grid-template-columns: 48px 1fr; gap: 20px; }
|
||||
.course-number { font-size: 1.6rem; }
|
||||
.seasonal-items { gap: 28px; }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.hero { padding: 120px 24px 80px; }
|
||||
section { padding: 72px 0; }
|
||||
nav .inner { padding: 0 24px; }
|
||||
.container { padding: 0 24px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<div class="inner">
|
||||
<div class="logo">Oma<span class="ki">KI</span>se</div>
|
||||
<a href="#kontakt">Platz nehmen</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-kanji">お任せ</div>
|
||||
<h1>Oma<span class="ki">KI</span>se</h1>
|
||||
<p class="hero-sub">
|
||||
<em>Omakase</em> — ich überlasse es dem Chef.<br>
|
||||
Kuratierte KI-Beratung. Kein Menü. Kein Rätselraten.<br>
|
||||
Du bekommst, was am besten passt.
|
||||
</p>
|
||||
<p class="hero-meaning">おまかせ + KI — Vertrauen trifft Intelligenz</p>
|
||||
<div class="ichi"></div>
|
||||
<br>
|
||||
<div class="cta-group">
|
||||
<a href="#kontakt" class="btn btn-primary">Platz nehmen</a>
|
||||
<a href="#menu" class="btn btn-ghost">Das Menü</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="philosophy">
|
||||
<div class="container">
|
||||
<p class="philosophy-text">
|
||||
Beim Omakase wählt der <strong>Meister</strong>.<br>
|
||||
Nicht aus Arroganz — aus <strong>Erfahrung</strong>.<br>
|
||||
Er kennt die <strong>Zutaten</strong>, den <strong>Moment</strong>,<br>
|
||||
und was <em>genau jetzt</em> am besten schmeckt.<br><br>
|
||||
So arbeiten wir mit <span class="ki">KI</span>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="menu">
|
||||
<div class="container">
|
||||
<div class="section-jp">献立 — MENÜFOLGE</div>
|
||||
<h2>Das OmaKIse-Menü</h2>
|
||||
<div class="section-desc">
|
||||
Sieben Gänge. Jeder aufeinander abgestimmt.
|
||||
Vom ersten Kennenlernen bis zur laufenden Lösung —
|
||||
kuratiert, nicht von der Karte bestellt.
|
||||
</div>
|
||||
|
||||
<div class="courses-list">
|
||||
<div class="course">
|
||||
<div class="course-number">一</div>
|
||||
<div class="course-body">
|
||||
<h3>Sakizuke — Der erste Eindruck</h3>
|
||||
<div class="course-jp">先付</div>
|
||||
<p>Ein kurzes Kennenlernen. Wir hören zu, stellen die richtigen Fragen und verstehen, was Sie wirklich brauchen — nicht was Sie bestellen würden.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="course">
|
||||
<div class="course-number">二</div>
|
||||
<div class="course-body">
|
||||
<h3>Hassun — Die Zusammenstellung</h3>
|
||||
<div class="course-jp">八寸</div>
|
||||
<p>Analyse Ihrer Daten, Prozesse und Ziele. Wir kuratieren die perfekte Kombination von KI-Technologien für Ihren spezifischen Fall.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="course">
|
||||
<div class="course-number">三</div>
|
||||
<div class="course-body">
|
||||
<h3>Mukōzuke — Das Rohe</h3>
|
||||
<div class="course-jp">向付</div>
|
||||
<p>Ehrliche Bestandsaufnahme. Ungeschönt zeigen wir, wo KI Wert schafft — und wo nicht. Keine Garnierung, keine Beschönigung.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="course">
|
||||
<div class="course-number">四</div>
|
||||
<div class="course-body">
|
||||
<h3>Yakimono — Die Zubereitung</h3>
|
||||
<div class="course-jp">焼物</div>
|
||||
<p>Prototyp in Tagen. Wir bauen die erste KI-Lösung — getestet mit echten Daten, echten Nutzern. Funktional, nicht dekorativ.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="course">
|
||||
<div class="course-number">五</div>
|
||||
<div class="course-body">
|
||||
<h3>Nimono — Das Einkochen</h3>
|
||||
<div class="course-jp">煮物</div>
|
||||
<p>Integration in bestehende Systeme. Langsam, sorgfältig, mit Tiefe. Die Lösung zieht ein und entfaltet ihren vollen Geschmack.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="course">
|
||||
<div class="course-number">六</div>
|
||||
<div class="course-body">
|
||||
<h3>Shokuji — Die Sättigung</h3>
|
||||
<div class="course-jp">食事</div>
|
||||
<p>Skalierung und Verfeinerung. Das System läuft, das Team versteht es, die Ergebnisse sprechen für sich.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="course">
|
||||
<div class="course-number">七</div>
|
||||
<div class="course-body">
|
||||
<h3>Mizumono — Der süße Abschluss</h3>
|
||||
<div class="course-jp">水物</div>
|
||||
<p>Übergabe und Autonomie. Ihr Team kann selbst. Wir bleiben als Sparring-Partner — aber der Meister sind jetzt Sie.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="principles-section">
|
||||
<div class="container">
|
||||
<div class="section-jp">哲学 — PHILOSOPHIE</div>
|
||||
<h2>Die Prinzipien</h2>
|
||||
<div class="section-desc">
|
||||
Drei japanische Konzepte leiten unsere Arbeit.
|
||||
</div>
|
||||
|
||||
<div class="principles-grid">
|
||||
<div class="principle">
|
||||
<div class="principle-kanji">信</div>
|
||||
<h3>Shin — Vertrauen</h3>
|
||||
<p>Omakase beginnt mit Vertrauen. Sie vertrauen uns die Auswahl an — wir liefern das Beste, was die Saison hergibt.</p>
|
||||
</div>
|
||||
<div class="principle">
|
||||
<div class="principle-kanji">旬</div>
|
||||
<h3>Shun — Die richtige Zeit</h3>
|
||||
<p>Nicht jede KI-Technologie ist heute reif. Wir wissen, was jetzt Saison hat — und was besser noch reifen sollte.</p>
|
||||
</div>
|
||||
<div class="principle">
|
||||
<div class="principle-kanji">技</div>
|
||||
<h3>Waza — Handwerk</h3>
|
||||
<p>Kein Schnickschnack, kein Overengineering. Präzise Schnitte, jahrelange Übung, respektvoller Umgang mit dem Material.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="seasonal">
|
||||
<div class="container">
|
||||
<div class="section-jp">季節 — SAISON</div>
|
||||
<h2>Was gerade Saison hat</h2>
|
||||
<div class="seasonal-items">
|
||||
<div class="seasonal-item">
|
||||
<div class="seasonal-emoji">🤖</div>
|
||||
<div class="seasonal-name">LLM-Integration</div>
|
||||
<div class="seasonal-sub">Hochsaison</div>
|
||||
</div>
|
||||
<div class="seasonal-item">
|
||||
<div class="seasonal-emoji">📊</div>
|
||||
<div class="seasonal-name">RAG-Systeme</div>
|
||||
<div class="seasonal-sub">Erntezeit</div>
|
||||
</div>
|
||||
<div class="seasonal-item">
|
||||
<div class="seasonal-emoji">🔍</div>
|
||||
<div class="seasonal-name">KI-Agenten</div>
|
||||
<div class="seasonal-sub">Frische Ernte</div>
|
||||
</div>
|
||||
<div class="seasonal-item">
|
||||
<div class="seasonal-emoji">🎯</div>
|
||||
<div class="seasonal-name">Prozessautomation</div>
|
||||
<div class="seasonal-sub">Ganzjährig</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="kontakt" class="cta-section">
|
||||
<div class="container">
|
||||
<div class="section-jp">予約 — RESERVIERUNG</div>
|
||||
<h2>Platz nehmen</h2>
|
||||
<div class="section-desc" style="margin-left:auto; margin-right:auto;">
|
||||
Die besten Plätze sind am Tresen. Direkt beim Chef.
|
||||
Schreiben Sie uns — wir bereiten Ihren ersten Gang vor.
|
||||
</div>
|
||||
<a href="mailto:omakise@msbls.de?subject=OmaKIse%20—%20Reservierung" class="btn btn-primary">
|
||||
omakise@msbls.de
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>Oma<span style="color:var(--aka);">KI</span>se.de — ein Projekt von <a href="https://msbls.de">msbls.de</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4
sites/omakise.de/site.yaml
Normal file
4
sites/omakise.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: omakise.de
|
||||
template: custom
|
||||
title: "OmaKIse — KI-Erlebnis, vom Chef kuratiert"
|
||||
description: "OmaKIse — Omakase + KI. Kuratierte KI-Beratung wie ein Omakase-Menu. Du bekommst was der Chef empfiehlt."
|
||||
Reference in New Issue
Block a user